:root{
  color-scheme: dark;
  /* Ferns pass 3B: petrol schoolyard shell, with the pitch keeping the actual greens. */
  --page: #082829;
  --panel: #103637;
  --panel2: #174344;
  --line: #77763d;
  --ink: #f0dfbd;
  --muted: #c9bc91;
  --gold: #dcc13c;
  --orc: #ff5fe0;
  --human: #7f8dff;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; min-height: 100%; }
body{ background: var(--page); color: var(--ink); font-family: Georgia, "Times New Roman", serif; }
.bb-shell{ width: min(100% - 32px, 1500px); margin: 0 auto; padding: 14px 0 40px; }
.bb-head{ text-align: center; margin-bottom: 10px; }
.eyebrow{ margin: 0; color: var(--muted); font-size: .78rem; letter-spacing: .08em; }
.bb-head h1{ margin: 2px 0; font-size: clamp(1.2rem, 2.6vw, 2rem); letter-spacing: .08em; }
.tagline{ margin: 0; color: var(--muted); font-style: italic; }

.bb-stage{ display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.bb-board-wrap{ min-width: 0; }
.bb-board{ position: relative; width: 100%; line-height: 0; }
#pitch{ display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.bb-field{
  position: absolute; left: 9.6875%; top: 11.0526316%; width: 80.1875%; height: 77.2631579%;
  cursor: pointer; line-height: normal; touch-action: manipulation;
}
.bb-field > *{ position: absolute; pointer-events: none; }

.hl{ border-radius: 2px; }
.hl.half{ background: rgba(255,239,128,.10); outline: 1px dashed rgba(255,239,128,.5); outline-offset: -1px; }
.hl.kickhalf{ background: rgba(255,120,80,.12); outline-color: rgba(255,150,100,.6); }
.hl.los{ background: rgba(255,255,255,.12); }
.hl.hover{ outline: 2px solid rgba(255,244,181,.8); outline-offset: -2px; }
.hl.target{ background: rgba(255,60,60,.35); outline: 2px solid #ff6a5a; outline-offset: -2px; }
.hl.r-green{ background: rgba(80,220,110,.30); }
.hl.r-yellow{ background: rgba(255,225,60,.38); }
.hl.r-orange{ background: rgba(255,140,40,.42); }
.hl.r-red{ background: rgba(255,50,50,.42); outline: 2px solid #ff5a4a; outline-offset: -2px; }
.hl.r-blue{ background: rgba(80,130,255,.40); outline: 2px solid #7fa0ff; outline-offset: -2px; }
.hl.r-push{ background: rgba(120,200,255,.45); outline: 2px solid #9fdcff; outline-offset: -2px; animation: pulse 1s infinite; }
.hl.step{ display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.20); }
.hl.step i{ font: 700 clamp(6px,.7vw,12px)/1 Arial, sans-serif; font-style: normal; color: #fff; text-shadow: 0 1px 2px #000; }
@keyframes pulse{ 50%{ opacity: .45; } }

.tok{ display: flex; align-items: center; justify-content: center; z-index: 5; }
.tok img{ width: 112%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.tok .num{
  position: absolute; left: 4%; top: 2%; font: 900 clamp(6px,.72vw,12px)/1 Arial, sans-serif; color: #fff;
  background: rgba(20,14,8,.85); padding: 1px 2px; border-radius: 2px;
}
.tok.orc .num{ border: 1px solid var(--orc); }
.tok.human .num{ border: 1px solid var(--human); }
.tok .badge{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font: 900 clamp(5px,.55vw,9px)/1 Arial, sans-serif;
  text-decoration: none; background: rgba(20,14,8,.9); color: #fff4c8; border: 1px solid #fff; padding: 1px 2px; border-radius: 2px;
}
.tok.st-prone img, .tok.st-stunned img{ transform: rotate(90deg) scale(.72); opacity: .85; }
.tok.done img{ filter: grayscale(1) brightness(.62) contrast(.9) drop-shadow(0 1px 1px rgba(0,0,0,.5)); opacity: .6; }
.tok.done .num{ filter: grayscale(1); opacity: .55; }
.tok.done .badge{ opacity: .6; }
.tok.sel{ outline: 2px solid var(--gold); outline-offset: -1px; background: rgba(255,239,128,.22); z-index: 6; }
.tok.acting{ outline-color: #fff; }
.ball{ z-index: 8; display: flex; align-items: center; justify-content: center; }
.ball img{ width: 62%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); transform: rotate(-8deg); }
.ball.carried{ align-items: flex-end; justify-content: flex-end; }
.ball.carried img{ width: 48%; margin: 0 -4% -4% 0; }

.bb-side{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bb-side > section{ background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.bb-side h2, .bb-side h3{ margin: 0 0 4px; letter-spacing: .06em; }
.bb-side h2{ font-size: 1rem; }
.bb-side h3{ font-size: .86rem; }
.bb-side p{ margin: 4px 0; font-size: .86rem; line-height: 1.35; }
.orc{ color: var(--orc); }
.human{ color: var(--human); }
.mute{ color: var(--muted); }
.ok{ color: #7be08c; }
.errs{ margin: 4px 0 0; padding-left: 18px; color: #ffb27a; font-size: .82rem; }

.bb-score{ display: flex; flex-direction: column; gap: 8px; }
.sc-row{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; }
.sc-team{ border: 2px solid transparent; border-radius: 6px; padding: 4px; background: var(--panel2); display: flex; flex-direction: column; }
.sc-team span{ font-weight: 700; letter-spacing: .08em; font-size: .8rem; }
.sc-team em{ font-style: normal; font-size: 2rem; font-weight: 900; color: var(--ink); line-height: 1.1; }
.sc-team small{ color: var(--muted); font-size: .66rem; }
.sc-team.orc.on{ border-color: var(--orc); }
.sc-team.human.on{ border-color: var(--human); }
.sc-mid{ font-size: .7rem; color: var(--muted); letter-spacing: .08em; }

.btn{
  font: 700 .8rem/1 Georgia, serif; letter-spacing: .06em; color: #1a130b; background: var(--gold); border: 0; border-radius: 4px;
  padding: 9px 12px; cursor: pointer; margin: 3px 4px 3px 0;
}
.btn:hover{ filter: brightness(1.1); }
.btn[disabled]{ opacity: .4; cursor: default; }
.btn.small{ padding: 7px 9px; font-size: .74rem; }
.btn.ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger{ border-color: #a35a3a; }
.btn:focus-visible, .dp:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.who{ font-weight: 700; }

.bb-decision{ border-color: var(--gold) !important; box-shadow: 0 0 0 1px var(--gold) inset; }
.dice{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.die{
  font: 700 .72rem/1.15 Georgia, serif; color: #1a130b; background: #efe3c4; border: 2px solid #1a130b; border-radius: 6px;
  min-width: 78px; padding: 10px 8px; text-align: center; cursor: pointer;
}
span.die{ cursor: default; }
.die.f-AD{ background: #e98a7c; }
.die.f-BD{ background: #e7c36a; }
.die.f-PB{ background: #d6d0be; }
.die.f-ST{ background: #9fd39a; }
.die.f-DD{ background: #6fc778; }
button.die:hover{ filter: brightness(1.1); transform: translateY(-1px); }

.bb-card{ display: flex; gap: 10px; align-items: flex-start; min-height: 74px; }
.bb-card img{ width: 70px; height: auto; flex: none; }
.bb-card .prev{ color: var(--gold); }

.bb-dugouts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dug h3{ font-size: .7rem; margin: 0 0 4px; }
.dug-list{ display: flex; flex-wrap: wrap; gap: 4px; }
.dp{
  background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; padding: 2px; width: 52px; color: var(--ink);
  font: 700 .55rem/1.1 Arial, sans-serif; cursor: pointer; text-align: center;
}
.dp img{ width: 100%; display: block; }
.dp[disabled]{ cursor: default; }
.dp.st-ko, .dp.st-cas, .dp.st-sent{ opacity: .55; filter: grayscale(1); }
.dp.sel{ outline: 2px solid var(--gold); }

.bb-logbox h2{ font-size: .8rem; }
#log{ list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; font: .76rem/1.35 Arial, sans-serif; }
#log li{ padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#log .k-head{ font-weight: 700; color: var(--gold); margin-top: 4px; }
#log .k-roll{ color: #cfd6e8; }
#log .k-bad{ color: #ff9a8a; }
#log .k-good{ color: #8fe39d; font-weight: 700; }

.bb-help{ margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; }
.bb-help summary{ cursor: pointer; font-weight: 700; letter-spacing: .06em; }
.bb-help-body{ font-size: .88rem; line-height: 1.5; }
.bb-help-body h3{ margin: 12px 0 2px; font-size: .9rem; color: var(--gold); }
.bb-help-body p{ margin: 4px 0; }
.fine{ color: var(--muted); font-size: .76rem; }
.key{ display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; border: 1px solid rgba(255,255,255,.4); }
.k-green{ background: rgba(80,220,110,.6); } .k-yellow{ background: rgba(255,225,60,.7); } .k-orange{ background: rgba(255,140,40,.8); }
.k-red{ background: rgba(255,50,50,.7); } .k-blue{ background: rgba(80,130,255,.7); }

.bb-toast{
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #3a1c14; color: #ffd9c9; border: 1px solid #a35a3a;
  padding: 9px 14px; border-radius: 6px; z-index: 50; font-size: .86rem; max-width: 90vw;
}

@media (max-width: 1100px){
  .bb-stage{ grid-template-columns: 1fr; }
  .bb-board-wrap{ overflow-x: auto; }
  .bb-board{ min-width: 760px; }
}

.bb-counters{ position: absolute; inset: 0; pointer-events: none; z-index: 12; }
.bb-counters .mark{ position: absolute; display: block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); }
.bb-counters .mark.orc{ outline: 4px solid #ff00d9; outline-offset: -5px; }
.bb-counters .mark.human{ outline: 4px solid #1717ff; outline-offset: -5px; }

.bb-dugoutlayer{ position: absolute; inset: 0; pointer-events: none; z-index: 11; }
.dbox{ position: absolute; }
.dtok{ position: absolute; left: 0; width: 100%; aspect-ratio: 287 / 162; }
.dtok img{ width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.dtok b{ position: absolute; left: 0; top: 0; font: 900 clamp(5px,.6vw,10px)/1 Arial, sans-serif; color: #fff; background: rgba(20,14,8,.85); padding: 1px 2px; border-radius: 2px; }
.dtok.orc b{ border: 1px solid #ff5fe0; }
.dtok.human b{ border: 1px solid #7f8dff; }
.dtok.sel{ outline: 2px solid #ffef80; }

.bb-chooser{ background: var(--panel); border: 2px solid var(--gold); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.bb-chooser h2{ margin: 0 0 10px; font-size: 1rem; letter-spacing: .08em; text-align: center; }
.bb-chooser .cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match-card{ text-align: left; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; cursor: pointer; font: inherit; }
.match-card:hover, .match-card:focus-visible{ border-color: var(--gold); outline: none; }
.match-card h3{ margin: 0 0 6px; font-size: 1rem; letter-spacing: .06em; color: var(--gold); }
.match-card p{ margin: 4px 0; font-size: .86rem; line-height: 1.35; }
.bb-stage.dim{ opacity: .35; pointer-events: none; }
@media (max-width: 700px){ .bb-chooser .cards{ grid-template-columns: 1fr; } }

/* Yard Ghost / opponent controls */
.bb-chooser .modes{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 12px; }
.bb-chooser .mode{ background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font: inherit; font-size: .8rem; letter-spacing: .06em; cursor: pointer; }
.bb-chooser .mode.on{ border-color: var(--gold); color: var(--gold); }
.bb-chooser .mode:hover, .bb-chooser .mode:focus-visible{ border-color: var(--gold); outline: none; }
.bb-chooser .modenote{ text-align: center; margin: 0 0 12px; font-size: .84rem; }
.cpu{ font-style: normal; font-size: .62rem; letter-spacing: .08em; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }

.sc-weather{ margin: 6px 0 0; font-size: .74rem; letter-spacing: .04em; color: var(--muted, #c9bc91); }
.sc-weather b{ color: var(--gold); }

/* team builder (local version) */
.match-card.custom{ grid-column: 1 / -1; text-align: center; }
.bb-builder{ background: var(--panel); border: 2px solid var(--gold); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.bb-builder h2{ margin: 0 0 6px; font-size: 1rem; letter-spacing: .08em; text-align: center; }
.bld-intro{ text-align: center; margin: 0 0 12px; font-size: .84rem; }
.bld-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bld-side{ background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; min-width: 0; }
.bld-side h3{ margin: 0 0 8px; font-size: .9rem; letter-spacing: .08em; }
.bld-top{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bld-top select{ flex: 1 1 140px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 5px 6px; font: inherit; }
.bld-rules{ margin: 6px 0; font-size: .74rem; }
.bld-table{ width: 100%; border-collapse: collapse; font-size: .78rem; }
.bld-table th{ text-align: left; font-weight: 700; color: var(--muted, #c9bc91); padding: 3px 4px; border-bottom: 1px solid var(--line); }
.bld-table td{ padding: 4px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.bld-table td.st{ text-align: center; }
.bld-table .pn small{ display: block; color: var(--muted, #c9bc91); }
.bld-table .sk{ display: inline-block; margin: 0 4px 2px 0; }
.bld-table .sk.inert{ color: #8d8470; text-decoration: line-through; text-decoration-color: rgba(141,132,112,.6); }
.qty{ white-space: nowrap; text-align: right; }
.qty b{ display: inline-block; min-width: 1.6em; text-align: center; }
.qty button{ width: 1.9em; height: 1.9em; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font: inherit; }
.qty button:disabled{ opacity: .35; cursor: default; }
.ex{ display: flex; justify-content: space-between; align-items: center; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .8rem; }
.ex small{ color: var(--muted, #c9bc91); }
.bld-sum{ margin: 8px 0 4px; font-size: .84rem; }
.bld-sum.ok b{ color: var(--gold); }
.bld-foot{ text-align: center; margin: 12px 0 8px; font-size: .86rem; }
.bld-buttons{ display: flex; gap: 10px; justify-content: center; }
@media (max-width: 1100px){ .bld-cols{ grid-template-columns: 1fr; } }
.lg-post{ margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel2); }
.lg-post h3{ margin: 0 0 6px; font-size: .9rem; letter-spacing: .06em; }
.lg-post ul{ margin: 0 0 8px; padding-left: 18px; font-size: .86rem; }

/* SoB Bowl entrance */
.yard-intro{ text-align:center; max-width:820px; margin:0 auto 14px; }
.yard-intro h2{ color:var(--gold); margin:4px 0 8px; }
.yard-intro p{ margin:6px 0; line-height:1.4; }
.yard-kicker{ color:var(--muted); font-size:.76rem; letter-spacing:.12em; font-weight:700; }
.ghost-line{ font-size:1rem; }
.yard-rule{ color:var(--gold); font-size:1rem; font-weight:700; line-height:1.35; letter-spacing:.03em; text-align:center; max-width:900px; margin:16px auto 2px !important; }
.bb-chooser .yard-modes{ gap:12px; }
.bb-chooser .yard-modes .mode{ min-width:240px; padding:12px 16px; font-weight:700; }
.bb-chooser .yard-modes .mode span{ display:block; margin-top:5px; color:var(--muted); font-size:.72rem; font-weight:400; letter-spacing:0; }
.bb-chooser .yard-teams .mode{ min-width:180px; font-weight:700; }
.chooser-back{ background:transparent; color:var(--muted); border:0; padding:0 0 8px; cursor:pointer; font:700 .72rem Georgia,serif; letter-spacing:.06em; }
.chooser-back:hover,.chooser-back:focus-visible{ color:var(--gold); outline:none; }


/* PASS A/B — human roll overlay. The pitch remains the stage; only the requested die comes to the coach. */
.bb-roll-overlay{ position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:rgba(15,10,6,.18); pointer-events:auto; }
.bb-roll-overlay[hidden]{ display:none; }
.bb-roll-box{ min-width:190px; max-width:70%; text-align:center; padding:14px 18px; border:2px solid var(--gold); border-radius:8px; background:rgba(31,24,15,.94); box-shadow:0 5px 20px rgba(0,0,0,.45); }
.bb-roll-reason{ color:var(--gold); font-weight:900; letter-spacing:.12em; font-size:.9rem; }
.bb-roll-target{ margin-top:3px; color:var(--ink); font-size:.82rem; }
.bb-roll-dice{ margin:8px 0; font:700 58px/1 Arial,sans-serif; color:#fff; text-shadow:0 2px 5px #000; }
.bb-roll-dice.rolled{ color:var(--gold); }
.bb-roll-button{ min-width:110px; }

/* Editable setup: the printed Reserve box is a drop/return target for the selected on-pitch player. */
.bb-dugoutlayer .dbox[data-setup-reserve]{ pointer-events:auto; cursor:pointer; }

.bb-roll-box .die{display:grid;place-items:center;width:104px;height:104px;border-radius:18px;background:linear-gradient(145deg,#b64a3b 0,#8f3028 55%,#5e1e1a 100%);border:2px solid #d87960;box-shadow:inset 7px 7px 14px rgba(255,190,150,.16),inset -9px -10px 18px rgba(50,0,0,.32),0 12px 18px rgba(0,0,0,.42);color:#fff5dd;text-shadow:0 2px 2px #42100c;user-select:none}
.bb-roll-box .die.d6{font:84px/1 Arial,sans-serif;padding-bottom:8px}
.bb-roll-box .die.number{font:900 2.6rem Arial,sans-serif}
.bb-roll-box .die.block{width:118px;height:104px;font:900 1rem/1.05 Arial,sans-serif;text-align:center;padding:10px;letter-spacing:.03em}
.bb-roll-box .die.rolling{animation:tumble .52s cubic-bezier(.2,.75,.25,1)}
@keyframes tumble{0%{transform:rotate(0) scale(1)}22%{transform:translateY(-10px) rotate(92deg) scale(.96)}52%{transform:translateY(2px) rotate(205deg) scale(1.04)}78%{transform:translateY(-3px) rotate(315deg)}100%{transform:translateY(0) rotate(360deg) scale(1)}}
.bb-roll-box .roll{min-width:190px;border:1px solid #e0aa54;border-radius:11px;padding:14px 28px;background:linear-gradient(#9b4536,#6e2b24);color:#fff0ce;box-shadow:0 6px 0 #3b1713,0 12px 24px rgba(0,0,0,.35);cursor:pointer;font:900 .95rem Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.bb-roll-box .roll:hover{filter:brightness(1.12)}
.bb-roll-box .roll:active{transform:translateY(4px);box-shadow:0 2px 0 #3b1713,0 7px 16px rgba(0,0,0,.35)}

/* BBSoB original Dice Roller visual components, scaled for SoB Bowl Human Roll.
   Presentation-only: existing game engine owns dice and resolves rolls. */
.bb-roll-overlay{align-items:end;justify-items:center;padding:12px 10px 22px;background:rgba(15,10,6,.14)}
.bb-roll-box{width:min(100%,460px);max-width:100%;min-width:0;padding:11px 14px 14px;
 background:rgba(38,23,15,.97);border:1px solid #9a7042;border-radius:15px;
 box-shadow:0 15px 35px #0009,inset 0 1px #ffe1aa20;text-align:center}
.bb-roll-reason{color:#f2dfb6;font:900 .76rem Arial,sans-serif;letter-spacing:.07em}
.bb-roll-target{color:#c8aa80;font:italic .83rem Georgia,serif;margin:3px 0 8px}
.bb-roll-dice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px auto 12px;
 font:inherit;color:inherit;text-shadow:none}
.bb-roll-box .die{width:62px;height:62px;border-radius:12px}
.bb-roll-box .die.d6{font-size:51px;padding-bottom:5px}
.bb-roll-box .die.number{font-size:1.65rem}
.bb-roll-box .die.block{width:73px;height:62px;font-size:.65rem;padding:5px}
.bb-roll-box .die.block small{font-size:.65em}
.bb-roll-box .roll{min-width:0;width:min(100%,200px);padding:9px 16px;font-size:.8rem;display:block;margin:auto}
@media(max-width:480px){.bb-roll-box{padding:9px 10px}.bb-roll-box .die{width:53px;height:53px}.bb-roll-box .die.d6{font-size:43px}.bb-roll-box .die.block{width:63px;height:53px}}
@media(prefers-reduced-motion:reduce){.bb-roll-box .die.rolling{animation:none}}

/* QA 06: Ferns' original artwork, compact vertical slot reels. */
.bb-roll-dice .fern-reel{position:relative;width:70px;height:72px;overflow:hidden;flex:0 0 auto;background:transparent;border:0;box-shadow:none;border-radius:0}
.bb-roll-dice .fern-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transform:translateY(0);border:0;box-shadow:none}
.bb-roll-dice .fern-reel img.fern-next{transform:translateY(100%)}
@media(max-width:480px){.bb-roll-dice .fern-reel{width:59px;height:61px}}

/* QA 07: restore the compact Human Roll tray to the pitch centre. */
.bb-roll-overlay{align-items:center;justify-items:center;padding:0;background:rgba(15,10,6,.14)}

/* Optional match-file controls: outside normal action flow. */
.bb-match-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* Stage 4: team-specific PNGs fit one pitch cell; generic tokens unchanged. */
.tok img[src*="/shared/tokens/"] {
  width: 82%; height: 82%; max-width: 82%; max-height: 82%;
  object-fit: contain; flex-shrink: 0;
}
/* Dugout images use their existing layout; do not scale them by pitch cell rules. */

/* LOCAL QA — BOWL DRAWERS V1: visual layout only, engine untouched */
.bb-shell{width:min(100% - 24px, 1850px)}
.bb-stage{display:block;position:relative;padding-top:64px;min-height:400px}
.bb-board-wrap{width:100%;position:relative}
.bb-board{width:100%}
.bb-drawer-menu{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;z-index:20}
.bb-menu-details{position:relative;background:#103637;border:1px solid #77763d;border-radius:5px;max-width:min(500px,92vw);font-size:.82rem}
.bb-menu-details>summary{cursor:pointer;padding:9px 13px;font-weight:bold;letter-spacing:.05em;white-space:nowrap}
.bb-menu-details[open]{z-index:30}
.bb-help-body,.bb-menu-content{position:absolute;top:100%;left:0;width:min(470px,90vw);max-height:65vh;overflow:auto;padding:12px;background:#103637;border:1px solid #77763d;border-radius:5px;box-shadow:0 10px 30px #000b;line-height:1.35}
.bb-menu-content>section{margin:0 0 12px}
.bb-side{position:static;display:contents}
.bb-score{position:absolute;top:0;right:0;width:min(370px,45%);height:48px;overflow:auto;z-index:18;padding:2px 8px!important;background:rgba(16,54,55,.95)!important;border:1px solid #77763d;border-radius:5px}
.bb-score .sc-row{gap:4px}.bb-score .sc-team{padding:1px}.bb-score .sc-team em{font-size:1.15rem}.bb-score .sc-team small{display:none}
.bb-drawer{position:absolute;bottom:0;width:min(365px,35%);height:245px;min-height:34px;max-height:88%;z-index:24;display:flex;flex-direction:column;background:rgba(16,54,55,.91);border:1px solid #a19856;border-radius:8px 8px 0 0;box-shadow:0 -4px 18px #0008;backdrop-filter:blur(4px)}
.bb-drawer-left{left:0}.bb-drawer-right{right:0}
.bb-drawer-handle{cursor:ns-resize;width:100%;height:34px;flex:0 0 34px;border:0;border-bottom:1px solid #77763d;background:#173e3d;color:#f0dfbd;font:700 .85rem Georgia,serif;letter-spacing:.07em;text-align:center;touch-action:none}
.bb-drawer-body{padding:8px 10px;overflow:auto;min-height:0;flex:1;line-height:1.4}
.bb-drawer-body>section{margin:0 0 9px;background:rgba(8,40,41,.5);padding:8px;border:1px solid #77763d;border-radius:5px}
.bb-drawer-body .bb-logbox{border:0;background:transparent;padding:0}
.bb-drawer-body .bb-logbox>h2{display:none}
.bb-drawer.collapsed{height:34px!important}.bb-drawer.collapsed .bb-drawer-body{display:none}
.bb-roll-overlay{z-index:90!important}
@media(max-width:700px){.bb-stage{padding-top:104px}.bb-score{top:47px;left:0;right:auto;width:100%}.bb-drawer{width:48%;height:180px}.bb-drawer-body{font-size:.73rem;padding:5px}.bb-drawer-handle{font-size:.7rem}}

/* LOCAL QA V2 — full pitch within viewport; board-relative corner controls */
body:has(.bb-stage:not([hidden])) .bb-head{display:none}
.bb-shell{padding:4px 0 0;width:100%;max-width:none}
.bb-stage{padding:0!important;min-height:0!important;margin:0 auto;position:relative;width:min(100%,calc((100dvh - var(--bowl-top,56px) - 8px) * 1.6827586));max-width:100%;}
.bb-board-wrap,.bb-board{width:100%;min-width:0!important;overflow:visible!important}
.bb-drawer-menu{top:0;left:0;right:auto;width:auto;max-width:54%;gap:5px;flex-wrap:nowrap;z-index:35}
.bb-menu-details{font-size:clamp(.58rem,.72vw,.75rem);background:rgba(16,54,55,.93)}
.bb-menu-details>summary{padding:5px 7px}
.bb-help-body,.bb-menu-content{z-index:40;max-height:55dvh}
.bb-score{top:0;right:0;width:min(310px,38%);height:clamp(27px,3.5vw,40px);overflow:hidden;padding:1px 4px!important;z-index:25}
.bb-score .sc-team{padding:0}.bb-score .sc-team span{font-size:clamp(.5rem,.65vw,.7rem)}
.bb-score .sc-team em{font-size:clamp(.75rem,1.1vw,1.05rem)}.bb-score .sc-mid{font-size:clamp(.48rem,.6vw,.65rem)}
.bb-drawer{bottom:0;width:min(345px,30%);max-height:80%;}
.bb-player-attached{display:flex;gap:8px;align-items:flex-start}
.bb-player-attached[hidden]{display:none!important}
.bb-player-attached img{width:38px;max-height:46px;object-fit:contain;flex-shrink:0}
.bb-player-attached h3{margin:0 0 3px;font-size:.86rem}
.bb-player-attached p{margin:2px 0;font-size:.75rem}
@media(max-width:700px){.bb-stage{width:100%;}.bb-drawer{width:48%}.bb-drawer-menu{max-width:60%}.bb-menu-details>summary{padding:3px 5px}}

/* LOCAL QA V3 — compact controls on the pitch's brown margins */
.bb-drawer-menu{max-width:16%;left:0;top:0}
.bb-menu-details{max-width:100%;}
.bb-menu-details>summary{padding:5px 7px;font-size:clamp(.54rem,.64vw,.7rem);letter-spacing:0;}
.bb-help{margin:0;}
.bb-score{width:clamp(94px,9.5%,145px)!important;height:auto!important;min-height:0;max-height:105px;right:0;top:0;padding:3px!important;overflow:hidden!important;}
.bb-score .sc-row{display:grid;grid-template-columns:1fr;gap:2px;text-align:left;}
.bb-score .sc-team{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:3px;padding:2px 4px;border-width:1px;min-height:24px;}
.bb-score .sc-team span{font-size:clamp(.48rem,.64vw,.67rem);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bb-score .sc-team em{font-size:clamp(.72rem,1vw,1rem);}
.bb-score .sc-mid{grid-row:3;text-align:center;font-size:.58rem;line-height:1.1;}
.bb-score .sc-weather,.bb-score>.btn,.bb-score>.bb-match-files,.bb-score>.mute{display:none!important}
.bb-drawer-left{height:245px;}

/* V4 LOCAL QA: controls in brown margins; visual dugout summary removed. */
.bb-dugouts{display:none!important}
.bb-drawer-menu{top:12px!important;left:1.1%!important;max-width:14%!important}
.bb-score{top:11px!important;right:1.1%!important;width:clamp(92px,9%,138px)!important}
.bb-score .sc-team{min-height:20px!important;padding:1px 3px!important}
.bb-score .sc-mid{font-size:.52rem!important}
.bb-drawer-left{height:245px}

/* V5: clickable reserve tokens for manual setup (parent reserve box retains return target). */
.bb-dugoutlayer .dtok[data-reserve-player]{pointer-events:auto;cursor:pointer;z-index:2;}
.bb-dugoutlayer .dtok[data-reserve-player]:hover{outline:2px solid #ffe27c;}

/* V6 LOCAL QA — align the two controls within the top brown corner gutters.
   The pitch and turn tracks remain untouched. */
.bb-drawer-menu {
  top: 20px !important; left: 1.05% !important;
  width: 7.9% !important; max-width: 7.9% !important;
  z-index: 35;
}
.bb-menu-details { width:100%; max-width:100%; }
.bb-menu-details > summary {
  padding: 8px 3px !important; text-align:center;
  font-size:clamp(.52rem,.57vw,.68rem) !important;
  line-height:1.1; letter-spacing:0 !important;
}
.bb-score {
  top: 8px !important; right: 1.05% !important;
  width: 7.9% !important; max-width: 7.9% !important;
  min-width:0 !important; box-sizing:border-box;
  padding:2px !important;
}
.bb-score .sc-team { min-height:18px !important; padding:1px 3px !important; }
.bb-score .sc-team span {font-size:clamp(.48rem,.58vw,.65rem)}
.bb-score .sc-team em {font-size:clamp(.65rem,.82vw,.9rem)}
@media (max-width: 700px) {
  .bb-drawer-menu {top:14px !important;}
  .bb-menu-details>summary {font-size:.47rem !important;padding:5px 1px !important;}
  .bb-score {top:3px !important;}
  .bb-score .sc-team {min-height:15px !important;}
}

/* V7 LOCAL QA: anchor corner controls to the actual pitch frame, not stage.
   Board image is the containing block; controls scale and move with its brown border. */
.bb-board{position:relative!important;}
.bb-board > .bb-drawer-menu{position:absolute!important;left:1.1%!important;top:1.65%!important;right:auto!important;width:7.8%!important;max-width:7.8%!important;z-index:35;}
.bb-board > .bb-score{position:absolute!important;right:1.1%!important;top:1.65%!important;left:auto!important;width:7.8%!important;max-width:7.8%!important;z-index:35;}
/* A closed control must not reserve space in the document flow. */
.bb-board > .bb-drawer-menu,.bb-board > .bb-score{margin:0!important;}

/* V8 LOCAL QA — frame-corner controls. Replace V7 percentage sizing with
   explicit corner slots; keep scoreboard labels legible at normal desktop sizes. */
.bb-board > .bb-drawer-menu {
  position:absolute!important; left:1.05%!important; right:auto!important;
  top:1.35%!important; width:8.25%!important; max-width:8.25%!important;
  box-sizing:border-box!important; margin:0!important; z-index:35;
}
.bb-board > .bb-drawer-menu .bb-menu-details {width:100%!important;box-sizing:border-box!important;}
.bb-board > .bb-drawer-menu .bb-menu-details > summary {
  box-sizing:border-box!important; width:100%!important;
  padding:7px 2px!important; font-size:clamp(9px,.61vw,11px)!important;
  white-space:nowrap!important; text-align:center!important;
}
.bb-board > .bb-score {
  position:absolute!important; right:1.05%!important; left:auto!important;
  top:1.0%!important; width:8.25%!important; max-width:8.25%!important;
  min-width:0!important; height:auto!important; max-height:none!important;
  overflow:visible!important; padding:3px!important;
  margin:0!important; box-sizing:border-box!important; z-index:35;
}
.bb-board > .bb-score .sc-row {display:flex!important; flex-direction:column!important; gap:2px!important; width:100%!important;}
.bb-board > .bb-score .sc-team {
  display:flex!important; flex-direction:row!important; align-items:center!important;
  justify-content:space-between!important; min-width:0!important; width:100%!important;
  box-sizing:border-box!important; padding:2px 3px!important; min-height:19px!important;
}
.bb-board > .bb-score .sc-team span {
  display:block!important; flex:1 1 auto!important; min-width:0!important;
  font-size:clamp(9px,.63vw,11px)!important; line-height:1.1!important;
  letter-spacing:0!important; white-space:nowrap!important;
  overflow:hidden!important; text-overflow:ellipsis!important;
}
.bb-board > .bb-score .sc-team em {
  display:block!important; flex:0 0 auto!important; font-size:12px!important;
  line-height:1.1!important; margin-left:3px!important;
}
.bb-board > .bb-score .sc-team .cpu {display:none!important;}
.bb-board > .bb-score .sc-mid {order:3!important; font-size:9px!important;line-height:1!important;}
@media(max-width:850px){
 .bb-board > .bb-drawer-menu .bb-menu-details > summary {font-size:8px!important;padding:5px 0!important;}
 .bb-board > .bb-score .sc-team span {font-size:8px!important;}
 .bb-board > .bb-score .sc-team em {font-size:10px!important;}
}

/* V9 LOCAL QA — true side-gutter slots, outside the top turn track.
   The pitch artwork's turn track begins ~8.2% from the left and ends
   ~91.7% from the left. Both controls live entirely in the remaining gutters.
   This supersedes V6–V8 positional overrides without touching match logic. */
.bb-board > .bb-drawer-menu {
  left: .9% !important;
  right: auto !important;
  top: 1.55% !important;
  width: 6.5% !important;
  max-width: 6.5% !important;
}
.bb-board > .bb-drawer-menu .bb-menu-details > summary {
  font-size: clamp(8px, .57vw, 10px) !important;
  padding: 8px 1px !important;
  letter-spacing: -.02em !important;
}
.bb-board > .bb-score {
  right: .8% !important;
  left: auto !important;
  top: 1.15% !important;
  width: 6.4% !important;
  max-width: 6.4% !important;
  padding: 2px !important;
}
.bb-board > .bb-score .sc-team { padding: 2px 1px !important; }
.bb-board > .bb-score .sc-team span {
  font-size: clamp(8px, .55vw, 10px) !important;
}
.bb-board > .bb-score .sc-team em { font-size: 11px !important; }
@media (max-width: 850px) {
  .bb-board > .bb-drawer-menu .bb-menu-details > summary { font-size: 7px !important; }
  .bb-board > .bb-score .sc-team span { font-size: 7px !important; }
  .bb-board > .bb-score .sc-team em { font-size: 9px !important; }
}

/* V10 — one compact menu in V9's approved left gutter slot. */
.bb-board > .bb-drawer-menu .bb-menu-details > summary {cursor:pointer;}
.bb-board > .bb-drawer-menu .bb-game-menu {
  position:absolute;left:0;top:100%;width:clamp(170px,16vw,230px);
  display:flex;flex-direction:column;gap:5px;padding:9px;
  background:#103637;border:1px solid #77763d;border-radius:5px;
  box-shadow:0 10px 30px #000b;z-index:55;
}
.bb-board > .bb-drawer-menu .bb-game-menu[hidden],
.bb-board > .bb-drawer-menu .bb-help-body[hidden] {display:none!important;}
.bb-game-menu button {color:#e9d5a2;background:#173d3d;border:1px solid #77763d;
  border-radius:3px;padding:9px;text-align:left;font-family:inherit;font-weight:700;cursor:pointer;}
.bb-game-menu button:hover,.bb-game-menu button:focus-visible {background:#285454;}
.bb-board > .bb-drawer-menu .bb-help-body {left:0;top:100%;z-index:55;}