/* Pennant Knights - 57Beef */
/* 57Beef game kit v2 styles (copied into each kit game's game.css at build time).
   Only what the game area needs: the site's own stylesheet already draws the top bar, the pause menu,
   the How to play sheet and the buttons inside them. Rules are wrapped in :where(...) so they never
   outweigh the game's own main.css, which comes after this file. */
main.kit-stage { display: flex; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
main.kit-stage:focus { outline: none; }
[hidden] { display: none !important; }
:where(.kit-stage) .play { position: relative; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* buttons inside the game area and the end box */
:where(.kit-stage, .kit-end) .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--outline); background: var(--surface-2); color: var(--text); font: 600 17px var(--sans); text-decoration: none; cursor: pointer; touch-action: manipulation; }
:where(.kit-stage, .kit-end) .btn:hover { filter: brightness(1.12); }
:where(.kit-stage, .kit-end) .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:where(.kit-stage) .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
:where(.kit-stage, .kit-end) .btn:disabled { opacity: .5; cursor: default; }
:where(.kit-stage, .kit-end) .stack { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
:where(.kit-stage) .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
:where(.kit-stage, .kit-end) .small { font-size: 14px; }
:where(.kit-stage, .kit-end) .dim { color: var(--text-dim); }
/* end-of-round box (a site sheet made by the kit) */
dialog.kit-end .dlg-title { margin: 0 0 8px; font: 600 24px/1.2 var(--serif); }
dialog.kit-end .end-line { margin: 4px 0; font-size: 20px; font-variant-numeric: tabular-nums; }
dialog.kit-end .stack .btn { margin-top: 0; }
/* How to play: the game's own drawn picture and picture figures */
.help-art { display: block; width: 100%; max-width: 300px; aspect-ratio: 2 / 1; margin: 0 auto 12px; background: var(--bg); border-radius: 10px; }
.howto-figs img { display: block; width: 132px; height: 96px; object-fit: contain; background: #15110d; border: 1px solid var(--line); border-radius: var(--radius); }
/* title / overlay screens inside the game area */
:where(.kit-stage) .screen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; text-align: center; background: rgba(20, 17, 15, .94); overflow: auto; }
:where(.kit-stage) .screen[hidden] { display: none; }
:where(.kit-stage) .screen h2 { margin: 0; font: 700 32px/1.15 var(--serif); color: var(--accent); }
:where(.kit-stage) .screen p { margin: 0; max-width: 340px; color: var(--text-dim); }
:where(.kit-stage) .opt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.kit-stage) .opt-label { font-size: 14px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
:where(.kit-stage) .opt .row .btn { min-width: 64px; padding: 6px 12px; font-size: 15px; }
:where(.kit-stage) .hud { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .kit-stage *, .kit-end * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
.reduce .kit-stage *, .reduce .kit-end * { transition-duration: 1ms !important; animation-duration: 1ms !important; }

/* game */
:root { --pk: #ffd166; --pk-ink: #1a1208; }
.play { position: relative; }
.cv { display: block; border-radius: 12px; background: #14110f; }
.screen { border-radius: 12px; justify-content: flex-start; padding-top: 24px; }
.screen > :first-child { margin-top: auto; } .screen > :last-child { margin-bottom: auto; }
.screen h2 { color: var(--pk); }
.btn.primary, .btn[aria-pressed="true"] { background: var(--pk); border-color: var(--pk); color: var(--pk-ink); }
.btn.big { min-width: 180px; font-size: 20px; padding: 12px 24px; }
.menubar { position: absolute; left: 8px; right: 8px; z-index: 3; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.menubar .btn { pointer-events: auto; background: rgba(42, 36, 30, .92); }
.menubar .btn.primary { background: var(--pk); }
.touch { position: absolute; left: 0; right: 0; height: 196px; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; touch-action: none; -webkit-user-select: none; user-select: none; }
.touch.over { bottom: 0; height: 170px; pointer-events: none; opacity: .8; }
.touch.over > * { pointer-events: auto; }
.stick { position: relative; width: 136px; height: 136px; border-radius: 50%; background: rgba(42, 36, 30, .88); border: 2px solid var(--outline); touch-action: none; }
.knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #5a4e42; border: 3px solid var(--text); pointer-events: none; }
.tbtns { display: grid; grid-template-columns: 60px 60px 60px; grid-template-rows: 60px 60px; gap: 8px; grid-template-areas: "guard smash magic" ". jump hit"; }
.tb { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--text); background: rgba(58, 49, 40, .92); color: var(--text); font: 700 14px var(--sans);
  touch-action: none; padding: 0; -webkit-user-select: none; user-select: none; }
.tb.on { background: var(--pk); color: var(--pk-ink); }
.tb-guard { grid-area: guard; border-radius: 14px; } .tb-smash { grid-area: smash; } .tb-magic { grid-area: magic; border-style: dashed; }
.tb-jump { grid-area: jump; } .tb-hit { grid-area: hit; width: 68px; height: 68px; margin: -4px; font-size: 16px; background: rgba(90, 70, 40, .95); }
.kgrid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.kcol { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.kh { margin: 0 0 4px; font: 600 17px var(--serif); color: var(--text); }
.krow { display: flex; align-items: center; gap: 8px; text-align: left; }
.klab { flex: 1 1 auto; font-size: 14px; color: var(--text-dim); }
.kbtn { min-width: 72px; padding: 4px 10px; font-size: 15px; }
.kx { font-size: 12px; color: var(--text-dim); min-width: 60px; }
.rot { position: absolute; left: 0; right: 0; bottom: -30px; margin: 0; text-align: center; font-size: 13px; }

.padmap{list-style:none;margin:4px 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:6px 14px;text-align:left}
.padmap li{display:flex;align-items:center;gap:6px;font-size:14px}
.pb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #1a1208;font-weight:900;font-size:13px;color:#fff;text-shadow:0 1px 0 #1a1208}
.pb-a{background:#2f9e44}.pb-b{background:#d9382c}.pb-x{background:#2f6fd6}.pb-y{background:#f2c12e;color:#1a1208;text-shadow:none}
.pl{display:inline-flex;align-items:center;flex:none;height:22px;padding:0 8px;border-radius:11px;border:1.5px solid #f3ebe0;background:#2a241e;color:#f3ebe0;font-weight:800;font-size:12px}