/* Hooks Playbook r10. Built from Designer's r10 mocks (mock.css + field-e.css). */
:root{color-scheme:light dark;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.screen{position:absolute;inset:0;margin:0 auto;max-width:620px;display:none;flex-direction:column;gap:8px;
  padding:calc(8px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));overflow:hidden;
  background:radial-gradient(130% 55% at 50% -8%,color-mix(in srgb,var(--navy) 14%,transparent),transparent 62%),var(--bg)}
html.dark .screen{background:radial-gradient(130% 55% at 50% -8%,rgba(40,94,136,.30),transparent 62%),var(--bg)}
body{background:var(--bg)}
.screen.on{display:flex;animation:riseIn .45s var(--spring) both}
@keyframes riseIn{from{transform:translateY(10px);opacity:.001}to{transform:none;opacity:1}}
.screen.plain,.screen.home{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Hooks Playbook r10 mock styles. Tokens extend r9 :root vars (styles.css): same names, refined values. */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Inter","Segoe UI",sans-serif;
  --spring:cubic-bezier(.22,1,.36,1);
  --navy:#0E3A5C; --navy-deep:#0A2740; --accent:#D25A1F; --accent-ink:#B4470F;
  --bg:#EEF2F6; --bg2:#E3E9EF; --card:#FFFFFF; --card-glass:rgba(255,255,255,.72);
  --ink:#0A1220; --ink2:#46566A; --ink3:#5E6C7D; --line:rgba(10,18,32,.09);
  --primary:#0E3A5C; --success:#0B7A43; --success-bg:#E6F4EC; --danger:#B8321F; --danger-bg:#FBECE8;
  --shadow-sm:0 1px 2px rgba(10,18,32,.06),0 4px 12px rgba(10,18,32,.06);
  --shadow:0 2px 6px rgba(10,18,32,.06),0 14px 34px rgba(10,18,32,.10);
  --press:rgba(10,18,32,.05);
  /* field (light: day game) */
  --fa-stands:#D3DBE4; --fa-row:rgba(10,18,32,.07); --fa-grass:#3C9655; --fa-grass-far:#47A360; --fa-mow:rgba(255,255,255,.075);
  --fa-track:#B5805B; --fa-dirt:#C79262; --fa-dirt-hi:#D4A273; --fa-grit:rgba(92,52,22,.20); --fa-grit2:rgba(255,255,255,.13); --fa-lip:rgba(70,40,15,.28);
  --fa-chalk:rgba(255,255,255,.96); --fa-wall:#0E3A5C; --fa-wall-top:rgba(255,255,255,.55); --fa-rail:#A9B5C2; --fa-dugout:#2B394B; --fa-dugout-lip:#C9D2DC;
  --fa-light:#FFFFFF; --fa-vig:.16; --fa-ondeck:rgba(0,0,0,.10);
  --fa-cap:#0E3A5C; --fa-cap-hi:#285E88; --fa-rim:rgba(255,255,255,.92); --fa-lab:#FFFFFF;
  --fa-run:#B3262D; --fa-run-hi:#E86A6F; --fa-run-lo:#7A151B;
}
html.dark{
  --bg:#05080D; --bg2:#0B111A; --card:#111925; --card-glass:rgba(22,31,44,.72);
  --ink:#F3F6F9; --ink2:#A9B6C4; --ink3:#8394A6; --line:rgba(255,255,255,.09);
  --primary:#7CC0E6; --success:#3DD68C; --success-bg:rgba(61,214,140,.12); --danger:#FF7A66; --danger-bg:rgba(255,122,102,.12);
  --accent:#F08A45; --accent-ink:#B4470F;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35);
  --shadow:0 2px 8px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  --press:rgba(255,255,255,.06);
  /* field (dark: night game under lights) */
  --fa-stands:#0A111B; --fa-row:rgba(255,255,255,.035); --fa-grass:#2A7140; --fa-grass-far:#2F7C47; --fa-mow:rgba(255,255,255,.055);
  --fa-track:#80593F; --fa-dirt:#9E6E4A; --fa-dirt-hi:#B28058; --fa-grit:rgba(40,20,8,.28); --fa-grit2:rgba(255,255,255,.08); --fa-lip:rgba(20,10,4,.35);
  --fa-chalk:rgba(255,255,255,.9); --fa-wall:#16406A; --fa-wall-top:rgba(124,192,230,.7); --fa-rail:#33445A; --fa-dugout:#05090F; --fa-dugout-lip:#2A3A4E;
  --fa-light:#FFF6DA; --fa-vig:.42; --fa-ondeck:rgba(0,0,0,.18);
  --fa-cap:#0F3F66; --fa-cap-hi:#2C6896;
  --fa-run:#C42F36; --fa-run-hi:#F07A7F; --fa-run-lo:#821A20;
}
/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;height:44px;flex:0 0 44px}
.glass-btn{height:44px;min-width:44px;padding:0 16px 0 12px;border-radius:22px;display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600;letter-spacing:-.02em;
  background:var(--card-glass);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);color:var(--ink)}
.glass-btn .chev{width:9px;height:9px;border-left:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg);margin-right:3px;border-radius:1px}
.icon-btn{width:44px;padding:0;justify-content:center}
.hud{display:flex;height:36px;border-radius:18px;background:var(--card-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);
  font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.01em;align-items:center}
.hud span{padding:0 12px;display:flex;align-items:center;height:100%}
.hud span+span{box-shadow:inset .5px 0 0 var(--line)}
.hud .mut{color:var(--ink2);font-weight:550}
.hud .acc{color:var(--accent-ink)} html.dark .hud .acc{color:var(--accent)}

/* ===== Scoreboard A: LED stadium board ===== */
.board{position:relative;flex:0 0 auto;height:108px;border-radius:20px;color:#fff;display:grid;grid-template-columns:46px 1fr 62px 74px;align-items:stretch;overflow:hidden;
  background:linear-gradient(180deg,#121A26 0%,#070B12 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12),0 10px 28px rgba(5,10,20,.28),0 2px 4px rgba(5,10,20,.2)}
.board::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) .7px,transparent .9px);background-size:3px 3px}
.board::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%)}
.board>*{position:relative;z-index:1}
.col{display:flex;flex-direction:column;justify-content:center}
.col+.col{box-shadow:inset 1px 0 0 rgba(255,255,255,.07)}
.inn{align-items:center;gap:1px}
.inn .arr{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
.inn .up{border-bottom:8px solid rgba(255,255,255,.14)} .inn .dn{border-top:8px solid rgba(255,255,255,.14)}
.inn .on.up{border-bottom-color:var(--led)} .inn .on.dn{border-top-color:var(--led)}
.inn .on{filter:drop-shadow(0 0 4px var(--led-glow))}
.inn .n{font-size:30px;font-weight:800;line-height:34px;font-variant-numeric:tabular-nums;color:var(--led);text-shadow:0 0 10px var(--led-glow)}
.board{--led:#FFC765;--led-glow:rgba(255,170,60,.55);--led-off:rgba(255,255,255,.12)}
.teams{padding:0 12px 0 10px;gap:6px}
.team{display:flex;align-items:center;height:38px;gap:9px}
.team .chip{width:4px;height:24px;border-radius:2px;background:#7D8A99}
.team.home .chip{background:linear-gradient(180deg,#F08A45,#D25A1F);box-shadow:0 0 8px rgba(240,138,69,.6)}
.team .nm{font-size:15px;font-weight:700;letter-spacing:.06em;flex:1;color:rgba(255,255,255,.78)}
.team.home .nm{color:#fff}
.team .bat{width:6px;height:6px;border-radius:50%;background:var(--led);box-shadow:0 0 6px var(--led-glow);margin-right:2px}
.team .r{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;min-width:30px;text-align:right;color:var(--led);text-shadow:0 0 12px var(--led-glow);letter-spacing:-.02em}
.dia{align-items:center}
.dia svg{width:50px;height:50px;overflow:visible}
.dia .b{fill:var(--led-off)}
.dia .b.on{fill:var(--led);filter:drop-shadow(0 0 3px var(--led-glow)) drop-shadow(0 0 6px var(--led-glow))}
.dia .pl{fill:rgba(255,255,255,.32)}
.cnt{padding:0 10px 0 11px;gap:7px}
.cnt .row{display:flex;align-items:center;gap:5px;height:14px}
.cnt .k{font-size:12px;font-weight:750;width:13px;color:rgba(255,255,255,.62);letter-spacing:.02em}
.cnt i{width:10px;height:10px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.cnt .b i.on{background:#4BE08A;box-shadow:0 0 6px rgba(75,224,138,.8),inset 0 -1px 1px rgba(0,0,0,.2)}
.cnt .s i.on{background:#FFC765;box-shadow:0 0 6px rgba(255,170,60,.85),inset 0 -1px 1px rgba(0,0,0,.2)}
.cnt .o i.on{background:#FF5A4E;box-shadow:0 0 6px rgba(255,80,70,.85),inset 0 -1px 1px rgba(0,0,0,.2)}

/* ===== Scoreboard B: sleek glass panel (Hooks navy) ===== */
.board.glass{--led:#FFFFFF;--led-glow:rgba(255,255,255,0);--led-off:rgba(255,255,255,.18);
  background:linear-gradient(160deg,#16507C 0%,#0E3A5C 45%,#0A2740 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px rgba(10,39,64,.35)}
.board.glass::before{opacity:1;background:radial-gradient(120% 90% at 20% -30%,rgba(255,255,255,.22),transparent 55%);background-size:auto}
.board.glass .r,.board.glass .inn .n{text-shadow:none;color:#fff}
.board.glass .team .nm{color:rgba(255,255,255,.72)} .board.glass .team.home .nm{color:#fff}
.board.glass .dia .b.on{fill:#FFB27A;filter:none}
.board.glass .inn .on.up{border-bottom-color:#FFB27A} .board.glass .inn .on{filter:none}
.board.glass .team .bat{background:#FFB27A;box-shadow:none}
.board.glass .col+.col{box-shadow:inset 1px 0 0 rgba(255,255,255,.12)}
.board.glass .cnt i.on{box-shadow:none}

/* situation card */
.sit{flex:0 0 auto;background:var(--card);border-radius:18px;padding:10px 16px 11px;box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line)}
.sit .kick{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);display:flex;gap:6px;align-items:center}
html.dark .sit .kick{color:var(--accent)}
.sit .kick .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.sit h2{font-size:20px;line-height:24px;font-weight:750;letter-spacing:-.025em;margin-top:0;color:var(--ink)}
.sit p{font-size:15px;line-height:20px;color:var(--ink2);margin-top:1px;letter-spacing:-.01em}

/* field */
.field-wrap{flex:1 1 auto;min-height:0;position:relative;border-radius:22px;overflow:hidden;background:var(--fa-stands);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1),var(--shadow-sm)}
.field-wrap svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fielder .bill{fill:var(--fa-cap)} .fielder .cap{fill:url(#fa-cap)}
.fielder .rim{fill:none;stroke:var(--fa-rim);stroke-width:1.7}
.fielder .tok-lab{font:750 13.8px var(--font);fill:var(--fa-lab);letter-spacing:-.02em}
.fielder.key .rim{stroke:#fff;stroke-width:2.4}
.fielder.you .cap{fill:#fff} .fielder.you .bill{fill:#E8EDF2}
.fielder.you .rim{stroke:var(--accent);stroke-width:3.2}
.fielder.you .tok-lab{fill:var(--navy);font-size:15.5px;font-weight:800}
.you-halo{fill:rgba(240,138,69,.20);stroke:rgba(255,255,255,.55);stroke-width:1}
.you-pulse{fill:none;stroke:rgba(255,200,160,.9);stroke-width:1.6}
.you-tag rect,.you-tag-tip{fill:var(--accent-ink)}
.you-tag text{font:650 14px var(--font);fill:#fff;letter-spacing:-.01em}
.you-tag .you-k{font-weight:850;letter-spacing:.06em}
.you-tag{filter:url(#fa-tok)}
.runner .r-bill{fill:var(--fa-run-lo)} .runner .r-flap{fill:var(--fa-run)} .runner .r-dome{fill:url(#fa-helmet)}
.runner .r-gloss{fill:rgba(255,255,255,.55)}
.runner .r-bill,.runner .r-flap{stroke:rgba(255,255,255,.9);stroke-width:1.4}
.runner .r-rim{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.6}
.bag,.rubber{fill:#fff} .pole{fill:var(--accent)}
.ball-path{fill:none;stroke:#fff;stroke-width:1.9;stroke-dasharray:5 4.5;stroke-linecap:round;opacity:.95}
.ball-glow{fill:none;stroke:rgba(255,255,255,.28);stroke-width:6;stroke-linecap:round;filter:url(#fa-soft)}
.ball-core{fill:#fff;stroke:rgba(0,0,0,.18);stroke-width:.6}
.seam{fill:none;stroke:#D2453B;stroke-width:.9;stroke-linecap:round}
.ball-shadow{fill:rgba(0,0,0,.32)}
.land-ring{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.2;stroke-dasharray:2.5 2.5}

/* choices (r9 .choice metrics: min-height 50, 15.5px/650) */
.choices{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.choice{width:100%;min-height:50px;padding:13px 16px;border-radius:16px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:20px;background:var(--card);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line)}
.choice .ch{flex:0 0 7px;height:7px;border-right:2px solid var(--ink3);border-top:2px solid var(--ink3);transform:rotate(45deg);opacity:.7;margin-right:4px}
.choice.pressed{transform:scale(.97);background:color-mix(in srgb,var(--card) 92%,var(--ink))}

/* feedback sheet */
.scrim{position:absolute;inset:0;background:rgba(5,10,18,.18);z-index:4}
html.dark .scrim{background:rgba(0,0,0,.35)}
.sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:5;border-radius:34px;padding:18px 20px 14px;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:0 -1px 0 rgba(255,255,255,.4) inset,0 0 0 .5px var(--line),0 24px 60px rgba(5,10,20,.35)}
.sheet .grab{display:none}
.badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 6px;border-radius:15px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.badge .bi{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff}
.good .badge{background:var(--success-bg);color:var(--success)} .good .badge .bi{background:var(--success)}
.bad .badge{background:var(--danger-bg);color:var(--danger)} .bad .badge .bi{background:var(--danger)}
html.dark .good .badge .bi,html.dark .bad .badge .bi{color:#06120B}
.sheet .res{font-size:24px;line-height:29px;font-weight:780;letter-spacing:-.03em;margin-top:8px}
.sheet .why{font-size:15.5px;line-height:21px;color:var(--ink2);margin-top:6px;letter-spacing:-.01em}
.sheet .teach{margin-top:10px;padding:10px 13px;border-radius:14px;background:var(--bg2);font-size:15px;line-height:20px;letter-spacing:-.01em}
html.dark .sheet .teach{background:rgba(255,255,255,.06)}
.sheet .teach b{font-weight:700}
.primary{width:100%;height:54px;border-radius:27px;margin-top:18px;font-size:17px;font-weight:650;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(180deg,#16507C,#0E3A5C);box-shadow:0 8px 20px rgba(14,58,92,.3),inset 0 1px 0 rgba(255,255,255,.18)}
html.dark .primary{background:linear-gradient(180deg,#F39456,#D25A1F);color:#1A0B03;box-shadow:0 8px 22px rgba(210,90,31,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.secondary{width:100%;height:52px;border-radius:26px;font-size:17px;font-weight:600;letter-spacing:-.02em;background:var(--card);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);color:var(--ink)}

/* home */
.brandrow{display:flex;align-items:center;justify-content:space-between;height:44px}
.logo{width:40px;height:40px;border-radius:11px;box-shadow:var(--shadow-sm);display:block}
.acts{display:flex;gap:8px}
.hero{position:relative;height:232px;border-radius:26px;overflow:hidden;flex:0 0 auto;box-shadow:var(--shadow);background:#0A2740}
.hero svg{position:absolute;inset:0;width:100%;height:100%}
.hero .scrim2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,28,0) 25%,rgba(6,16,28,.82) 100%)}
.hero .copy{position:absolute;left:20px;right:20px;bottom:18px;color:#fff}
.hero .kick{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#FFB27A}
.hero h1{font-size:34px;line-height:38px;font-weight:800;letter-spacing:-.035em;margin-top:3px}
.hero p{font-size:15px;line-height:20px;color:rgba(255,255,255,.86);margin-top:4px;letter-spacing:-.01em}
.sect{font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:4px 4px -4px}
.modes{display:flex;flex-direction:column;background:var(--card);border-radius:22px;box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);overflow:hidden}
.mode{display:flex;align-items:center;gap:13px;min-height:56px;padding:8px 16px 8px 12px;text-align:left;position:relative}
.mode+.mode::before{content:"";position:absolute;left:62px;right:0;top:0;height:.5px;background:var(--line)}
.mi{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mi.age{background:linear-gradient(160deg,#1C5F92,#0E3A5C)}
.mi.off{background:linear-gradient(160deg,#F39456,#D25A1F)} .mi.game{background:linear-gradient(160deg,#2C9A57,#1A6E3B)} .mi.h2h{background:linear-gradient(160deg,#5E6E82,#3C4A5C)}
.mc{flex:1;min-width:0} .mc b{display:block;font-size:16px;font-weight:650;letter-spacing:-.02em;line-height:20px}
.mc span{display:block;font-size:13px;color:var(--ink2);line-height:17px;letter-spacing:-.01em}
.mode .ch{flex:0 0 8px;height:8px;border-right:2px solid var(--ink3);border-top:2px solid var(--ink3);transform:rotate(45deg);opacity:.6}
.foot{text-align:center;font-size:13px;color:var(--ink3);line-height:18px}
.foot b{color:var(--ink2);font-weight:600}

/* summary / final */
.sum-head{text-align:center;padding-top:6px}
.sum-head .kick{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
html.dark .sum-head .kick{color:var(--accent)}
.sum-head h2{font-size:34px;line-height:40px;font-weight:800;letter-spacing:-.035em;margin-top:2px}
.sum-head p{font-size:16px;line-height:22px;color:var(--ink2);margin-top:4px}
.ring{position:relative;width:180px;height:180px;margin:4px auto 0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .t b{font-size:48px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.ring .t span{font-size:13px;font-weight:650;color:var(--ink2);margin-top:6px;letter-spacing:.04em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--card);border-radius:18px;padding:14px 8px 12px;text-align:center;box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line)}
.stat b{display:block;font-size:26px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:30px}
.stat span{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-top:2px;letter-spacing:.01em}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.btns .row2{display:flex;gap:10px}
.btns .primary{margin-top:0}
.best{font-size:13px;color:var(--ink3);text-align:center}
/* final line score */
.fboard{position:relative;border-radius:22px;color:#fff;padding:14px 14px 12px;overflow:hidden;background:linear-gradient(180deg,#121A26,#070B12);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.12),0 14px 34px rgba(5,10,20,.3)}
.fboard::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.07) .7px,transparent .9px);background-size:3px 3px}
.fboard table{position:relative;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fboard th{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);padding:0 0 6px;text-align:center;letter-spacing:.04em}
.fboard td{font-size:17px;font-weight:700;text-align:center;color:#FFC765;text-shadow:0 0 8px rgba(255,170,60,.45);height:34px}
.fboard td.tm{text-align:left;font-size:14px;letter-spacing:.06em;color:rgba(255,255,255,.8);text-shadow:none;width:92px}
.fboard tr.home td.tm{color:#fff}
.fboard td.tm i{display:inline-block;width:4px;height:18px;border-radius:2px;background:#7D8A99;vertical-align:-4px;margin-right:8px}
.fboard tr.home td.tm i{background:linear-gradient(180deg,#F08A45,#D25A1F)}
.fboard td.R{font-size:26px;font-weight:800;width:40px;box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
.fboard th.R{box-shadow:inset 1px 0 0 rgba(255,255,255,.1)}
.fboard td.x{color:rgba(255,255,255,.28);text-shadow:none}
.fboard tbody tr+tr td{box-shadow:inset 0 1px 0 rgba(255,255,255,.07)} .fboard tbody tr+tr td.R{box-shadow:inset 1px 0 0 rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.07)}
.winner{text-align:center;font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--accent-ink)}
html.dark .winner{color:var(--accent)}
.recap{background:var(--card);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);font-size:15px;line-height:21px;color:var(--ink2)}
.recap b{display:block;color:var(--ink);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}

.sheet-space{flex:0 0 250px}
.hero .scrim2{background:linear-gradient(180deg,rgba(6,16,28,0) 30%,rgba(6,16,28,.86) 100%)}
.sheet .primary{margin-top:14px;height:52px;border-radius:26px}

/* organ toggle */
.tb-l{display:flex;gap:8px}
.organ{color:var(--ink2)} .organ.on{color:#fff;background:linear-gradient(180deg,#F39456,#D25A1F);box-shadow:0 6px 16px rgba(210,90,31,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.organ-pill{gap:8px;padding:0 10px 0 12px;font-size:15px;color:var(--ink)}
.organ-pill svg{color:var(--accent-ink)} html.dark .organ-pill svg{color:var(--accent)}
.sw{width:36px;height:22px;border-radius:11px;background:rgba(120,120,128,.24);position:relative;margin-left:2px}
.sw i{position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.mi.book{background:linear-gradient(160deg,#B08A55,#7D5C30)}
/* ---------- Keep the Book ---------- */
.book{--paper:#F7F2E6;--rule:#A9BFB0;--rule2:rgba(84,120,98,.22);--pencil:#26292E;--pencil2:#5B6168;--run:#C4421A;--cur:rgba(240,138,69,.16)}
html.dark .book{--paper:#0D1522;--rule:rgba(124,192,230,.30);--rule2:rgba(124,192,230,.12);--pencil:#EEF2F6;--pencil2:#9FB0C2;--run:#F08A45;--cur:rgba(240,138,69,.14)}
.bk-head{display:flex;align-items:flex-end;justify-content:space-between;padding:2px 4px 0}
.bk-k{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)} html.dark .bk-k{color:var(--accent)}
.bk-t{font-size:22px;font-weight:780;letter-spacing:-.03em}
.bk-legend{display:flex;gap:12px;font-size:12px;color:var(--ink2);font-weight:600}
.bk-legend span{display:flex;align-items:center;gap:5px}
.lg-out{width:11px;height:11px;border-radius:50%;border:1.4px solid var(--pencil2)} .lg-run{width:10px;height:10px;transform:rotate(45deg);background:var(--run);border-radius:1.5px}
.bk-paper{background:var(--paper);border-radius:18px;padding:6px 6px 4px;box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);
  background-image:linear-gradient(var(--paper),var(--paper)),repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,100,60,.025) 3px 4px)}
html.light .bk-paper,.bk-paper{background-blend-mode:normal}
html.dark .bk-paper{background:linear-gradient(180deg,#111C2C,#0B1320);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),var(--shadow-sm)}
table.bk{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--pencil)}
.bk th,.bk td{border:1px solid var(--rule2)}
.bk thead th{height:22px;font-size:12px;font-weight:750;color:var(--pencil2);border-bottom:1.5px solid var(--rule);font-variant-numeric:tabular-nums}
.bk thead th.now{color:var(--run)}
.bk th.bk-b{width:46px;text-align:left;padding-left:6px;border-right:1.5px solid var(--rule)}
.bk th.bk-b b{font-size:16px;font-weight:780;font-variant-numeric:tabular-nums;margin-right:4px}
.bk th.bk-b span{font-size:11px;font-weight:650;color:var(--pencil2)}
.bk td.bk-c{height:52px;padding:0}
.book.entry .bk td.bk-c{height:44px}
.bk td svg{display:block;width:100%;height:100%}
.bk tr.cur th.bk-b{background:var(--cur)}
.bk td.live{background:var(--cur);box-shadow:inset 0 0 0 2px var(--run)}
.bk-dia{fill:none;stroke:var(--rule);stroke-width:1.1}
.bk-dia.run{fill:var(--run);stroke:var(--run)}
.bk-path path{stroke:var(--pencil);stroke-width:2.6;stroke-linecap:round}
.bk-path.run path{stroke:var(--run)}
.bk-cnt rect{fill:none;stroke:var(--rule);stroke-width:.8} .bk-cnt rect.on{fill:var(--pencil2);stroke:var(--pencil2)}
.bk-out{fill:none;stroke:var(--pencil2);stroke-width:1.1} .bk-outn{font:750 8px var(--font);fill:var(--pencil2)}
.bk-res{font:750 14px "Bradley Hand","Marker Felt","Segoe Print",var(--font);fill:var(--pencil);letter-spacing:-.02em}
.bk-res.sm{font-size:11px}
.bk-res.onrun{fill:#fff} html.dark .bk-res.onrun{fill:#1A0B03}
.bk-res.side{font-size:12px}
html.dark .bk-res{font-family:var(--font);font-weight:650}
.bk tr.tot td{height:24px;text-align:center;font-size:12px;color:var(--pencil2);font-variant-numeric:tabular-nums;border-top:1.5px solid var(--rule)}
.bk tr.tot td b{color:var(--run);font-weight:800;font-size:13px} .bk tr.tot td i{font-style:normal;opacity:.5;margin:0 2px}
.bk-foot{margin-top:auto}
/* entry sheet */
.bk-sheet{padding:16px 16px 14px}
.bk-sh-top{display:flex;justify-content:space-between;align-items:flex-start}
.bk-sh-k{font-size:13px;font-weight:650;color:var(--ink2)}
.bk-compose{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:40px;display:flex;align-items:center;font-variant-numeric:tabular-nums}
.bk-compose .dash{color:var(--ink3);margin:0 2px}
.bk-compose .caret{width:2.5px;height:30px;background:var(--accent);border-radius:2px;margin-left:3px}
.bk-count{display:flex;flex-direction:column;gap:6px}
.cg{height:44px;min-width:128px;padding:0 12px;border-radius:13px;background:var(--bg2);display:flex;align-items:center;gap:7px}
html.dark .cg{background:rgba(255,255,255,.07)}
.cg span{font-size:13px;font-weight:700;color:var(--ink2);flex:1;text-align:left}
.cg i{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--ink3)}
.cg i.on{background:#22A45D;border-color:#22A45D;box-shadow:0 0 6px rgba(34,164,93,.45)}
.cg.s i.on{background:#E8A21C;border-color:#E8A21C;box-shadow:0 0 6px rgba(232,162,28,.45)}
.bk-lab{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:10px 2px 6px}
.bk-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.bk-pad button{height:46px;border-radius:13px;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
html.dark .bk-pad button,html.dark .bk-chips button{background:rgba(255,255,255,.07)}
.bk-pad b{font-size:19px;font-weight:780;font-variant-numeric:tabular-nums} .bk-pad span{font-size:10px;font-weight:650;color:var(--ink2);margin-top:2px}
.bk-pad button.on{background:var(--navy);color:#fff} .bk-pad button.on span{color:rgba(255,255,255,.75)}
html.dark .bk-pad button.on{background:var(--accent);color:#1A0B03} html.dark .bk-pad button.on span{color:rgba(26,11,3,.7)}
.bk-pad .del{font-size:18px;color:var(--ink2)}
.bk-chips{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.bk-chips button{height:44px;border-radius:12px;background:var(--bg2);font-size:15px;font-weight:750;letter-spacing:-.02em}
.bk-chips button.k{color:var(--danger)} .bk-chips button.hit{color:var(--success)}
.bk-sheet .primary{margin-top:12px;height:52px}
.bk-scroll{overflow:hidden;border-radius:12px}
.bk thead th{position:sticky;top:0;background:var(--paper);z-index:1}
html.dark .bk thead th{background:#111C2C}
.bk td svg{overflow:hidden}.bk thead th{box-shadow:0 1px 0 var(--rule)}

/* ===== field layer (concept D + Designer E) ===== */
/* Designer E field layer = concept D field.css (players + art classes, verbatim below the vars) + Hooks palette + polish.
   Builder: apply concept-d patch, then replace D's var block with this one and append the "E polish" block. */
.field-wrap, .hero {
  /* day game (light): Hooks palette */
  --faD-g1: #47A050; --faD-g2: #2C8744;
  --faD-c1: #D7A06B; --faD-c2: #B37643; --faD-m1: #E4B380;
  --faD-s1: #B8C6D6; --faD-s2: #8197B0;
  --faD-fan-a: rgba(255,255,255,.55); --faD-fan-b: rgba(14,58,92,.30);
  --faD-wall: #0E3A5C; --faD-cap: #F08A45; --faD-track: #B17E53;
  --faD-mow: .085; --faD-istripe: .07;
  --faD-pool: .12; --faD-vig: .22; --faD-flare: .35;
  --faE-ring: .05; --faE-cap: #0E3A5C; --faE-trim: #0E3A5C; --faE-you: #E2672A;
  --faE-road: #9AA5B3; --faE-roadtrim: #B3262D; --faE-helmet: #1B2533;
  background: #2C8744;
}
html.dark .field-wrap, html.dark .hero {
  /* night game under lights */
  --faD-g1: #2E7A44; --faD-g2: #11442A;
  --faD-c1: #B58053; --faD-c2: #774C2D; --faD-m1: #C68F66;
  --faD-s1: #060A12; --faD-s2: #101A2C;
  --faD-fan-a: rgba(255,255,255,.18); --faD-fan-b: rgba(107,180,220,.22);
  --faD-wall: #0B2540; --faD-track: #6B482D;
  --faD-mow: .07; --faD-istripe: .06;
  --faD-pool: .26; --faD-vig: .52; --faD-flare: .9;
  --faE-ring: .045; --faE-cap: #2C6896; --faE-trim: #2C6896;
  --faE-road: #8792A1; --faE-helmet: #101722;
  background: #11442A;
}
.field-wrap svg { overflow: visible; }
.faD-fan1 { fill: var(--faD-fan-a); } .faD-fan2 { fill: var(--faD-fan-b); }
.faD-tier { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; }
.faD-tower rect { fill: #2A3350; }
.faD-bulbs circle { fill: #FFF8DE; }
.faD-flare { opacity: var(--faD-flare); }
.faD-track { fill: var(--faD-track); }
.faD-mow { fill: #fff; opacity: var(--faD-mow); }
.faD-wall { fill: none; stroke: var(--faD-wall); stroke-width: 5; }
.faD-wallcap { fill: none; stroke: var(--faD-cap); stroke-width: 1.2; }
.faD-dug rect { fill: #1B2236; opacity: .85; }
.faD-dugroof rect { fill: #FACC15; opacity: .55; }
.faD-lip { fill: none; stroke: rgba(0,0,0,.16); stroke-width: 1.4; }
.faD-glip { fill: none; stroke: rgba(0,0,0,.14); stroke-width: 1; }
.faD-istripe { opacity: var(--faD-istripe); }
.faD-ondeck { fill: rgba(0,0,0,.10); stroke: rgba(255,255,255,.6); stroke-width: .8; }
.faD-moundsh { fill: rgba(0,0,0,.18); }
.faD-chalk { fill: none; stroke: #FFFFFF; stroke-width: 1.4; stroke-linecap: round; opacity: .95; }
.faD-lane, .faD-box { fill: none; stroke: #FFFFFF; stroke-width: .8; opacity: .85; }
.faD-chalk-fill { fill: #FFFFFF; }
.faD-pole { fill: #FACC15; stroke: #0C0E1A; stroke-width: .6; }
.faD-bag { fill: #FFFFFF; }
.faD-bag-edge, .faD-plate-edge { fill: #B9C0CE; }
.faD-bag-shadow { fill: rgba(0,0,0,.22); }
.faD-pool { opacity: var(--faD-pool); }
.faD-vig { opacity: var(--faD-vig); }

/* players */
.fa-shadow { fill: rgba(0,0,0,.30); }
html.dark .fa-shadow { fill: rgba(0,0,0,.5); }
.faD-fig { --jersey: #FFFFFF; --trim: #4338CA; --cap: #4338CA; --pants: #E3E7EF; }
.faD-run { --jersey: #E5484D; --trim: #FFFFFF; --cap: #1C2142; --pants: #F1F2F6; }
html.dark .faD-def { --cap: #6366F1; --trim: #6366F1; }
.fielder.you .faD-def { --jersey: #FACC15; --trim: #0C0E1A; --cap: #0C0E1A; }
.faD-jersey, .faD-sleeve { fill: var(--jersey); stroke: rgba(10,18,32,.45); stroke-width: .6; }
.faD-trim { fill: none; stroke: var(--trim); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.faD-pants { fill: var(--pants); stroke: rgba(10,18,32,.4); stroke-width: .5; }
.faD-shoe { fill: #12141F; }
.faD-hand, .faD-face { fill: #E2B48E; stroke: rgba(10,18,32,.35); stroke-width: .5; }
.faD-cap, .faD-brim { fill: var(--cap); }
.faD-brim { filter: brightness(.8); }
.faD-glove { fill: #A0622D; stroke: #5A3214; stroke-width: .6; }
.faD-pocket { fill: none; stroke: #5A3214; stroke-width: .7; stroke-linecap: round; }
.faD-helmet { fill: var(--cap); stroke: rgba(255,255,255,.35); stroke-width: .5; }
.faD-shine { fill: rgba(255,255,255,.55); }
.faD-bglove { fill: #F5F6FA; stroke: rgba(10,18,32,.4); stroke-width: .5; }
.fielder.key .faD-cap { stroke: #FACC15; stroke-width: .9; }
.faD-youdisc { fill: rgba(250,204,21,.28); }
.field-wrap .you-glow { fill: none; stroke: #FACC15; stroke-width: 2; }
.faD-youpill { fill: #0C0E1A; stroke: #FACC15; stroke-width: 1.2; }
.field-wrap .you-tag { fill: #FACC15; stroke: none; font-size: 8.5px; font-weight: 850; letter-spacing: .1em; }
.field-wrap .fielder-lab { font-size: 8.5px; font-weight: 750; fill: #fff; stroke: rgba(8,12,24,.75); stroke-width: 2.6px; }
.field-wrap .runner-dot { fill: rgba(229,72,77,.28); stroke: #E5484D; stroke-width: 1.4; filter: none; }
.field-wrap .runner-dot.advance { fill: rgba(250,204,21,.4); stroke: #FACC15; }
.field-wrap #ball { fill: #FFFFFF; stroke: #C8202F; stroke-width: 1.1; }
.field-wrap .ball-path { stroke: #FFFFFF; stroke-width: 1.8; stroke-dasharray: 3 5; filter: none; }

/* ---------- E polish ---------- */
.faE-ring { fill: #fff; opacity: var(--faE-ring); }
.faE-tracklip { fill: none; stroke: rgba(40,22,8,.28); stroke-width: 1; }
html.dark .faE-tracklip { stroke: rgba(0,0,0,.4); }
.faD-dugroof rect { fill: var(--faD-cap); opacity: .7; }
.faD-pole { fill: var(--faD-cap); stroke: #0A1220; }
.faD-bag { fill: #FFFFFF; } .faD-bag-shadow { fill: rgba(0,0,0,.28); }
/* Hooks home whites: white jersey, navy cap + trim */
.faD-fig.faD-def { --jersey: #FFFFFF; --trim: var(--faE-trim); --cap: var(--faE-cap); --pants: #E6EAF0; }
html.dark .faD-def { --cap: var(--faE-cap); --trim: var(--faE-trim); }
/* YOU: Hooks orange jersey, navy cap; orange disc + glow + soft breathing halo */
.fielder.you .faD-def { --jersey: var(--faE-you); --trim: #FFFFFF; --cap: #0E3A5C; }
.faE-youdisc { fill: rgba(240,138,69,.34); }
.field-wrap .you-glow { fill: none; stroke: #F08A45; stroke-width: 1.8; }
.faE-halo { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1; }
.faE-youtag rect { fill: #0E3A5C; stroke: #F08A45; stroke-width: 1.1; }
.faE-youtag text { font: 650 8.6px var(--font); fill: #fff; letter-spacing: -.01em; }
.faE-youtag .k { font-weight: 850; fill: #FFB27A; letter-spacing: .08em; }
/* position tags: dark capsule, white text (contrast is against the capsule, never the grass) */
.faE-tag rect { fill: rgba(8,20,34,.72); }
.faE-tag text { font: 750 7.6px var(--font); fill: #fff; letter-spacing: .02em; }
.faE-tag.key rect { fill: rgba(8,20,34,.86); stroke: rgba(255,255,255,.55); stroke-width: .6; }
.faE-tag.key text { font-size: 7.6px; }
/* visitors (road greys + dark helmet, crimson trim) */
.faD-run { --jersey: var(--faE-road); --trim: var(--faE-roadtrim); --cap: var(--faE-helmet); --pants: #C9D0D9; }
.field-wrap .runner-dot { fill: rgba(179,38,45,.25); stroke: #E5484D; stroke-width: 1.3; }
.faE-trail { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 1.3; stroke-dasharray: 1.6 2.4; stroke-linecap: round; }
/* ball + flight */
.field-wrap #ball { fill: #FFFFFF; stroke: rgba(0,0,0,.2); stroke-width: .5; }
.faE-seam { fill: none; stroke: #D2453B; stroke-width: .7; stroke-linecap: round; }
.faE-ballsh { fill: rgba(0,0,0,.35); }
.faE-land { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.8); stroke-width: .8; stroke-dasharray: 2 2; }
.field-wrap .ball-path { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-dasharray: 3 3.5; stroke-linecap: round; opacity: .95; }
.field-wrap .ball-glow { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 4.5; stroke-linecap: round; }
.fielder.key .faD-cap { stroke: #FFB27A; stroke-width: .9; }

/* ===== r10 build additions ===== */
.home{gap:12px}
.sum{gap:14px;overflow-y:auto}
.book{gap:10px}
.foot b{display:block}
.foot b:empty{display:none}
.glass-btn:active,.choice:active,.mode:active,.primary:active,.secondary:active,.pos-btn:active{transform:scale(.97)}
.choice,.primary,.secondary,.glass-btn,.mode{transition:transform .18s var(--spring),background-color .25s}
.choice.correct{background:var(--success-bg);box-shadow:inset 0 0 0 1.5px var(--success)}
.choice.wrong{background:var(--danger-bg);box-shadow:inset 0 0 0 1.5px var(--danger)}
.choice.reveal{box-shadow:inset 0 0 0 1.5px var(--success)}
.ic-spk,.ic-sun,.organ-ic{display:grid;place-items:center}
.organ-pill[aria-pressed="true"] .sw{background:#34C759}
.organ-pill .sw i{transition:transform .2s var(--spring)}
.organ-pill[aria-pressed="true"] .sw i{transform:translateX(14px)}
.organ.on{color:#fff}
.audio-panel{display:flex;flex-wrap:wrap;gap:10px 16px;padding:10px 14px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line)}
.audio-panel[hidden]{display:none!important}
.tog{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;min-height:44px}
.tog input{width:20px;height:20px;accent-color:var(--navy)}
/* hud as tabs on the book */
.hud .hud-tab{padding:0 12px;height:100%;font-weight:650;color:var(--ink2);box-shadow:inset .5px 0 0 var(--line)}
.hud .hud-tab.on{color:var(--accent-ink)} html.dark .hud .hud-tab.on{color:var(--accent)}
/* pickers */
.pick-head{padding:6px 4px 2px}
.pick-head .kick,.pass-card .kick{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
html.dark .pick-head .kick,html.dark .pass-card .kick{color:var(--accent)}
.pick-head h2{font-size:30px;line-height:36px;font-weight:800;letter-spacing:-.035em;margin-top:2px}
.pick-head p{font-size:15px;color:var(--ink2);margin-top:4px}
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:12px}
.pos-btn{text-align:left;padding:14px;border-radius:18px;background:var(--card);box-shadow:var(--shadow-sm),inset 0 0 0 .5px var(--line);min-height:76px}
.pos-btn b{display:block;font-size:16px;font-weight:700;letter-spacing:-.02em}
.pos-btn span{display:block;margin-top:4px;font-size:13px;color:var(--ink2);line-height:1.3}
.pos-btn.wide{grid-column:1/-1}
.pos-btn.hard{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card))}
#pass{justify-content:center}
.pass-card{background:var(--card);border-radius:26px;padding:28px 22px;box-shadow:var(--shadow);text-align:center}
.pass-card h2{font-size:26px;font-weight:800;letter-spacing:-.03em;margin-top:4px}
.pass-card p{color:var(--ink2);margin-top:6px}
.pass-team{margin:18px auto 4px;font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--navy);padding:16px;border-radius:16px;background:color-mix(in srgb,var(--navy) 10%,var(--bg))}
html.dark .pass-team{color:var(--accent)}
/* game layout */
.game .field-wrap{flex:1 1 auto;min-height:180px}
.game.sheet-open .sit,.game.sheet-open .choices{display:none}
.sheet-space{display:none;flex:0 0 0}
.game.sheet-open .sheet-space{display:block}
.choices{visibility:hidden}
.choices.on{visibility:visible}
#pop{left:8px;right:8px;bottom:calc(8px + var(--safe-bottom));transform:translateY(115%);visibility:hidden;transition:transform .26s ease-in,visibility 0s .26s}
#pop.on{transform:none;visibility:visible;transition:transform .42s var(--spring)}
#pop.on .badge{animation:badgePop .2s .12s var(--spring) both}
@keyframes badgePop{from{transform:scale(.9)}to{transform:none}}
.badge .bi svg{display:block}
/* scoreboard bits */
.team .bat{visibility:hidden}
.team.up .bat{visibility:visible}
.team .r.flip{animation:digitIn .36s cubic-bezier(.2,.8,.2,1)}
@keyframes digitIn{from{transform:translateY(40%);opacity:0;text-shadow:0 0 22px var(--led-glow)}to{transform:none;opacity:1}}
.cnt i{transition:background-color .22s ease-out,box-shadow .22s ease-out,transform .22s ease-out}
.cnt i.on{animation:lampOn .22s ease-out}
@keyframes lampOn{from{transform:scale(.6)}to{transform:none}}
.dia .b{transition:fill .2s ease-out}
/* announcer lower third, inside the field */
.announcer{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;pointer-events:none}
.announcer[hidden]{display:none!important}
.ann-bar{display:flex;align-items:stretch;background:linear-gradient(90deg,#0A1220 0%,#152033 70%,rgba(21,32,51,.94));border:1px solid rgba(255,199,101,.3);border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.ann-live{background:#D25A1F;color:#fff;font-size:11px;font-weight:850;letter-spacing:.12em;padding:8px;display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg)}
.ann-copy{padding:9px 14px;flex:1}
.ann-title{font-size:17px;font-weight:780;letter-spacing:-.02em;color:#FFC765}
.ann-sub{margin-top:2px;font-size:14px;font-weight:550;color:rgba(255,255,255,.86);line-height:1.3}
.announcer.in .ann-bar{animation:annIn .45s var(--spring) both}
.announcer.out .ann-bar{animation:annOut .3s ease forwards}
@keyframes annIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes annOut{to{transform:translateY(16px);opacity:0}}
/* field: bigger tags (11px+ on a 390 phone) */
.faE-tag text,.faE-tag.key text{font:750 11px var(--font);letter-spacing:.01em}
.faE-youtag text{font:650 11.2px var(--font)}
.field-wrap #ball{fill:#fff;stroke:#C8202F;stroke-width:.8}
.field-wrap #ball-shadow{fill:rgba(0,0,0,.35)}
.faE-land{opacity:0;transition:opacity .18s}
.faE-land.on{opacity:1}
.ball-path,.ball-glow{opacity:0;transition:opacity .2s}
.ball-path.show,.ball-glow.show{opacity:.95}
.faE-halo{transform-box:fill-box;transform-origin:center;animation:halo 2.4s ease-in-out infinite}
@keyframes halo{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:.35}}
.game.sheet-open .faE-halo{animation-play-state:paused}
.fielder.you{transition:transform .7s var(--spring)}
/* offense half: Hooks bat in whites, visitors field in road greys */
.field-wrap.offense .faD-fig.faD-def{--jersey:var(--faE-road);--trim:var(--faE-roadtrim);--cap:var(--faE-helmet);--pants:#C9D0D9}
.field-wrap.offense .faD-run{--jersey:#FFFFFF;--trim:var(--faE-trim);--cap:var(--faE-cap);--pants:#E6EAF0}
.field-wrap.offense .runner-dot{fill:rgba(14,58,92,.25);stroke:#fff}
.fielder.you .faD-run{--jersey:var(--faE-you);--trim:#FFFFFF;--cap:#0E3A5C}
/* summary */
.stats.four{grid-template-columns:repeat(4,1fr)}
.stats.four .stat b{font-size:22px}
#final-score{display:flex;flex-direction:column;gap:12px}
#final-score[hidden]{display:none}
.fboard .x-col{display:none}
.fboard.extras .x-col{display:table-cell}
.fboard td.live{color:#fff}
.recap ul{margin:0;padding-left:18px}
.best:empty{display:none}
/* book */
.bk-paper{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.bk-scroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.bk td.bk-c{height:48px;cursor:pointer}
.bk-foot{margin-top:0;display:flex;flex-direction:column;gap:8px}
.bk-foot .row2{display:flex;gap:8px}
.bk-foot .secondary{height:44px;font-size:15px}
.bk-space{display:none;flex:0 0 0}
.book.entry .bk-space{display:block}
.book.entry .bk-foot{display:none}
#bk-sheet{left:8px;right:8px;bottom:calc(8px + var(--safe-bottom));transform:translateY(115%);visibility:hidden;transition:transform .26s ease-in,visibility 0s .26s}
#bk-sheet.on{transform:none;visibility:visible;transition:transform .42s var(--spring)}
.bk-compose{min-height:40px}
.bk-compose .ph{color:var(--ink3);font-size:20px;font-weight:650}
.bk-chips button.on,.bk-pad button.on{background:var(--navy);color:#fff}
html.dark .bk-chips button.on{background:var(--accent);color:#1A0B03}
.bk-chips button.on.k,.bk-chips button.on.hit{color:#fff} html.dark .bk-chips button.on.k,html.dark .bk-chips button.on.hit{color:#1A0B03}
.bk-actions{display:flex;gap:8px;margin-top:12px}
.bk-actions .secondary{flex:0 0 34%;height:52px}
.bk-actions .primary{margin-top:0;height:52px;flex:1}
.bk-res.ink{animation:ink .22s ease-out}
@keyframes ink{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:120ms!important}
}
@media (max-height:700px){.board{height:92px}.team .r{font-size:28px}.sit h2{font-size:18px;line-height:22px}.choice{min-height:46px;padding:10px 14px}}
.hud[hidden],.ring[hidden],[hidden]{display:none!important}
.screen.game,.screen.book,.screen.sum{overflow:clip}
.book .hud{height:44px;border-radius:22px}
/* r10.1 fixes */
.bk-chips{grid-template-columns:repeat(6,1fr)}
.bk-chips button{min-width:44px;min-height:44px}
.stats{grid-template-columns:repeat(4,1fr)}
.stats .stat b{font-size:22px}
#pill-practice span{padding:0 10px}
/* r10.2 fixes */
.organ-pill.on .sw{background:#34C759}
.organ-pill.on .sw i{transform:translateX(14px)}
.organ-pill.on{box-shadow:var(--shadow-sm),inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 55%,transparent)}
#bk-sheet:not(.on),#pop:not(.on){pointer-events:none}