/* Disc Up styles.
   Colors are tokens on :root. Team identity never relies on color alone:
   Aqua pieces are circles, Pink pieces are rounded squares, and every piece
   carries its letter (H, C, D). Minimum target size is 44 by 44 CSS pixels.
   Moved out of index.html in build 24 so the Content-Security-Policy can
   forbid inline styles; the rules above the "build 24" line are unchanged. */
:root{--bg:#050507;--surface:#10141F;--cell:#171C2B;--cell-alt:#1D2334;--line:#7C8CB0;--text:#F4F7FF;--muted:#C6D1E8;--team-a:#00FFFF;--team-b:#FF7AB6;--disc:#FFFFFF}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);margin:0;padding:12px;font-family:'Space Mono',ui-monospace,Menlo,Consolas,monospace;line-height:1.5}
.wrap{max-width:460px;margin:0 auto}
h1{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.3rem;margin:4px 0 2px}
.sub{color:var(--muted);font-size:.8rem;margin:0 0 12px}
.panel{background:var(--surface);border:2px solid var(--line);border-radius:8px;padding:10px;margin-bottom:12px}
#score-line{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.6rem;font-weight:700;text-align:center;letter-spacing:.06em;margin-bottom:2px}
#score-line .a{color:var(--team-a)}
#score-line .b{color:var(--team-b)}
#turn-line{font-weight:700;text-align:center;margin-bottom:2px}
#stall-line{text-align:center;font-size:.8rem;color:var(--muted);margin-bottom:4px}
#status{min-height:2.8rem;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.9rem}
#hud{padding:8px 10px}
.tally{display:flex;gap:8px;justify-content:center;font-size:.8rem;margin-bottom:12px}
.tally span{border:1px solid var(--line);border-radius:6px;padding:4px 8px}
#board-wrap{display:grid;grid-template-columns:20px 1fr;grid-template-rows:18px auto;gap:2px;margin-bottom:12px}
#col-labels{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(5,1fr);column-gap:4px;padding:0 7px}
#col-labels span{text-align:center;font-size:.72rem;color:var(--muted)}
#row-labels{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(9,1fr);row-gap:4px;padding:7px 0}
#row-labels span{display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted)}
#board{grid-column:2;grid-row:2}
#board{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--line);border:3px solid var(--line);border-radius:8px;padding:4px;margin:0}
.row{display:contents}
.cell{aspect-ratio:1.3;min-height:44px;background:var(--cell);border:none;padding:0;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);font:inherit}
.cell:focus-visible{outline:4px solid var(--text);outline-offset:-4px;z-index:10}
.endzone-a{background:repeating-linear-gradient(45deg,var(--cell-alt) 0 6px,var(--cell) 6px 12px)}
.endzone-b{background:repeating-linear-gradient(-45deg,var(--cell-alt) 0 6px,var(--cell) 6px 12px)}
.goal-line-a{border-bottom:4px solid var(--team-a)}
.goal-line-b{border-top:4px solid var(--team-b)}
.piece{width:78%;height:78%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:#050507;position:relative;z-index:2}
.piece.team1{background:var(--team-a);border-radius:50%;border:3px solid #050507}
.piece.team2{background:var(--team-b);border-radius:18%;border:3px solid #f4f7ff}
.piece.selected{box-shadow:0 0 0 4px var(--text)}
.piece.marked{outline:3px dotted #050507;outline-offset:-8px}
.carry-dot{position:absolute;right:-4px;top:-4px;width:38%;height:38%;background:var(--disc);border:2px solid #050507;border-radius:50%}
.zone::before{content:'';position:absolute;inset:3px;border:3px dotted var(--team-b);border-radius:50%;z-index:3;pointer-events:none}
.zone-t1::before{border-color:var(--team-a)}
.zone-t2::before{border-color:var(--team-b)}
.badge{position:absolute;left:-6px;bottom:-6px;font-size:.62rem;line-height:1;padding:2px 3px;border-radius:4px;background:#050507;color:#f4f7ff;border:1px solid #f4f7ff}
.badge.badge-off{left:auto;right:-6px;bottom:-6px;color:var(--muted);border-color:var(--muted)}
#event-line{text-align:center;font-size:.85rem;font-weight:700;margin-bottom:6px}
#event-line:empty{display:none}
.target::after{content:'';position:absolute;inset:5px;border:3px dashed var(--text);border-radius:6px;z-index:4;pointer-events:none}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#bar .act{flex:1 1 30%;font-size:.9rem;padding:6px 4px;min-height:44px;white-space:nowrap}
#bar{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--surface);border-top:2px solid var(--line);padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));max-width:460px;margin-left:auto;margin-right:auto}
body{padding-bottom:calc(var(--bar-h,120px) + 16px)}
html{scroll-padding-bottom:calc(var(--bar-h,120px) + 8px);scroll-padding-top:8px}
@media (min-height:700px){#hud{position:sticky;top:0;z-index:40;box-shadow:0 6px 10px var(--bg)}
html{scroll-padding-top:calc(var(--hud-h,150px) + 8px)}}@media (max-height:520px){#bar{position:static;max-width:none;border:2px solid var(--line);border-radius:8px;margin:0 0 12px}
body{padding-bottom:12px}
html{scroll-padding-bottom:8px}}@media (max-width:350px){#bar .act{white-space:normal}
.cell{aspect-ratio:1}}#paused-flag{text-align:center;font-weight:700;margin-bottom:6px}
#paused-flag:empty{display:none}
button.act{flex:1 1 30%;background:var(--cell-alt);color:var(--text);border:2px solid var(--line);border-radius:6px;padding:12px 8px;font:inherit;font-weight:700;min-height:48px;cursor:pointer}
button.act[aria-pressed=true]{background:var(--team-a);color:#050507;border-color:var(--text)}
button.act:disabled{opacity:.45;cursor:not-allowed}
button.act:focus-visible{outline:4px solid var(--text);outline-offset:2px}
label{display:block;font-size:.85rem;margin-bottom:4px}
input[type=text]{width:100%;padding:10px;font:inherit;background:var(--cell);color:var(--text);border:2px solid var(--line);border-radius:6px;min-height:44px}
input[type=text]:focus-visible{outline:3px solid var(--text);outline-offset:2px}
details{border:2px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);margin-bottom:12px}
summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center}
details ul{padding-left:18px}
details li{margin-bottom:8px;font-size:.86rem}
#log{list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--muted)}
#log li{padding:3px 0;border-bottom:1px solid #2a3247}
.build-line{text-align:center;font-size:.72rem;margin:14px 0 0;color:var(--muted)}
#welcome{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;overflow-y:auto;padding:20px}
#welcome[hidden]{display:none}
#welcome .card{max-width:380px;text-align:center;margin:auto}
#welcome h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.5rem;margin:0 0 10px}
#welcome p{font-size:.95rem;color:var(--muted);margin:0 0 18px}
#welcome button{display:block;width:100%;margin:0 0 10px;min-height:64px;font:inherit;font-weight:700;font-size:1.05rem;border-radius:8px;cursor:pointer;background:var(--cell-alt);color:var(--text);border:2px solid var(--line)}
#welcome button.primary{background:var(--team-a);color:#050507;border-color:var(--text)}
#welcome button[aria-pressed=true]{background:var(--team-b);color:#050507;border-color:var(--text)}
#welcome button:focus-visible{outline:4px solid var(--text);outline-offset:3px}
#welcome .hint{font-size:.8rem;color:var(--muted)}
#welcome fieldset{border:2px solid var(--line);border-radius:8px;margin:0 0 10px;padding:6px 8px 8px;display:flex;gap:6px}
#welcome fieldset[hidden]{display:none}
#welcome legend{font-size:.85rem;padding:0 4px}
.lvl{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;min-height:52px;border:2px solid var(--line);border-radius:6px;cursor:pointer;font-weight:700;font-size:.85rem}
.lvl input{width:20px;height:20px;accent-color:#00FFFF;margin:0}
.lvl:has(input:checked){background:var(--team-a);color:#050507;border-color:var(--text)}
.lvl:focus-within{outline:4px solid var(--text);outline-offset:2px}
select{width:100%;padding:10px;font:inherit;background:var(--cell);color:var(--text);border:2px solid var(--line);border-radius:6px;min-height:44px}
select:focus-visible{outline:3px solid var(--text);outline-offset:2px}
#play-panel h2{font-size:.9rem;margin:0 0 6px}
#play-panel h2:focus-visible{outline:3px solid var(--text);outline-offset:2px}
#history,#play-list{margin:0;padding-left:22px;font-size:.85rem}
#history li,#play-list li{margin-bottom:4px}
#play-list li[aria-current=step]{background:var(--text);color:#050507;border-radius:4px;padding:0 4px}
#play-list li[aria-current=step]::marker{color:var(--text);font-weight:700}
#board-wrap.replaying #board{border-style:dashed;border-color:var(--text)}
.cell.trail::after{content:'';position:absolute;inset:auto;left:41%;top:41%;width:18%;height:18%;border-radius:50%;background:var(--disc);opacity:.6;z-index:4;pointer-events:none}
.cell.trail-head::after{left:33%;top:33%;width:34%;height:34%;opacity:1;border:2px solid #050507}
.cell.from-sq:not(:focus-visible){outline:3px dashed var(--muted);outline-offset:-6px}
.piece.moved{box-shadow:0 0 0 4px var(--text)}
#stall-box{margin:4px auto 4px;max-width:260px;text-align:center}
#stall-box[hidden]{display:none}
#stall-num{font-family:'Space Grotesk',system-ui,sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.04em}
.stall-pips{display:flex;gap:6px;justify-content:center;margin-top:4px}
.stall-pips span{width:28px;height:10px;border:2px solid var(--text);border-radius:6px}
.stall-pips span.on{background:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- build 24 ---- */
/* Were inline style attributes in index.html (same values). */
.panel-title{font-size:.9rem;margin:0 0 6px}
#stake-help{margin:6px 0 0}
#history-empty{margin:0}
/* How to play: 44 px target (WCAG 2.5.5 AAA). */
summary{min-height:44px}
/* 404 page */
.not-found{margin-top:24px;text-align:center}
.not-found h1{font-size:1.3rem}
.play-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:2px solid var(--text);border-radius:8px;background:var(--team-a);color:#050507;font-weight:700;text-decoration:none}
.play-link:focus-visible{outline:4px solid var(--text);outline-offset:3px}

/* ---- build 26 ---- */
/* The defender on the mark: M, top right of the piece. */
.badge.badge-mark{left:auto;right:-6px;top:-6px;bottom:auto;color:var(--text);border-color:var(--text)}
/* What voice commands heard. Plain text, not a live region: the status line
   already announces the result. */
#heard-line{text-align:center;font-size:.8rem;color:var(--muted);margin-top:4px}
#heard-line:empty{display:none}

/* ---- build 27 ---- */
/* The prompt again at the top of the action bar, for screens where the
   scoreboard is not pinned (under 700 px tall): first players had to scroll
   back up to read it. aria-hidden; #status stays the live region. */
#bar-status{display:none;flex:1 1 100%;margin:0;text-align:center;font-size:.85rem;line-height:1.35}
@media not all and (min-height:700px){#bar-status:not(:empty){display:block}}
/* Example stakes in the empty stake box, 4.5:1 or better on the box. */
#stake::placeholder{color:#AAB6CF;opacity:1}

/* ---- build 28 ---- */
/* Opening screen: one short line, three big choices, two smaller switches. */
#welcome #w-body{font-size:1.1rem;color:var(--text);margin:0 0 20px}
#welcome .choice{min-height:64px;font-size:1.25rem;margin-bottom:12px}
#welcome .w-switches{margin-top:20px}
#welcome .switch{min-height:48px;font-size:.95rem;margin-bottom:8px}
/* The walkthrough's next step (coach.js). A white ring (3.3:1 against the
   field lines, 17:1 against a square or the action bar), a black ring inside
   it so it still shows on an Aqua piece, and a TAP tag on a square or an
   arrow on a button, so it never relies on color alone. */
.cell[data-coach=next]{box-shadow:inset 0 0 0 4px #FFFFFF,inset 0 0 0 7px #050507}
.coach-tag{position:absolute;left:0;top:0;z-index:6;font-size:.62rem;line-height:1;font-weight:700;letter-spacing:.04em;padding:2px 4px 3px 3px;border-radius:0 0 5px 0;background:#FFFFFF;color:#050507;pointer-events:none}
button[data-coach=next]{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 5px #050507}
.coach-arrow{display:inline-block;width:0;height:0;margin-right:6px;vertical-align:-1px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}
/* It pulses only when the system allows motion; the ring never gets
   thinner than at rest. */
@keyframes coach-ring{50%{box-shadow:inset 0 0 0 7px #FFFFFF,inset 0 0 0 10px #050507}}
@keyframes coach-ring-btn{50%{outline-offset:4px;box-shadow:0 0 0 7px #050507}}
@media (prefers-reduced-motion:no-preference){.cell[data-coach=next]{animation:coach-ring 1.4s ease-in-out infinite}button[data-coach=next]{animation:coach-ring-btn 1.4s ease-in-out infinite}}
/* Slimmer pinned scoreboard (700 px tall and up), so all 9 rows fit between
   it and the action bar: smaller score, tighter lines, empty lines hidden.
   fitBoard (view.js) sizes the field with --board-max. */
@media (min-height:700px){#hud{padding:6px 10px}
#score-line{font-size:1.25rem;line-height:1.25;margin-bottom:0}
#turn-line{font-size:.85rem;line-height:1.3;margin-bottom:0}
#stall-line{line-height:1.3;margin-bottom:2px}
#stall-line:empty{display:none}
#paused-flag,#event-line{line-height:1.3;margin-bottom:2px}
#stall-box{margin:2px auto;display:flex;align-items:center;justify-content:center;gap:10px}
#stall-num{font-size:1.05rem;line-height:1.3;white-space:nowrap}
.stall-pips{margin-top:0}
#status{min-height:2.7em;line-height:1.35}
#board-wrap{max-width:var(--board-max,none);margin-left:auto;margin-right:auto}}
/* Action bar 420 px wide and up: four buttons a row, so in play it takes
   two rows instead of three and leaves the field more room. */
@media (min-width:420px){#bar .act{flex-basis:22%}}