/* ======================================================================
   11 HOME RUNS — baseball batting challenge

   Layout rules this file sticks to, because the first build was too busy:
     * the batting screen has FOUR things on it and no more —
       top bar (where you are), meta row (the three numbers), stage (feedback),
       meter + swing button (what to do);
     * every number carries a word label, so nothing has to be guessed;
     * the gear bench and the bat choice are overlays on the dimmed field,
       never separate screens, so you never lose your place.
   ==================================================================== */

:root{
  --night:#0b1118;
  --sheet:rgba(11,17,24,.96);
  --line:rgba(255,255,255,.13);
  --ink:#eef4f8;
  --dim:#9bacba;
  --dimmer:#6d7f8c;
  --flood:#ffe9b8;
  --accent:#ff4d3d;
  --gold:#ffc247;
  --good:#8ad66a;
  --bad:#ff6b5a;
  --r:14px;
  --pad:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(120% 80% at 50% -10%, #1b2a38 0%, transparent 60%), var(--night);
  color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
#app{position:fixed;inset:0;overflow:hidden}
.hidden{display:none !important}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}

.screen{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--pad) + env(safe-area-inset-top,0px)) var(--pad) calc(var(--pad) + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
}
.screen.on{display:flex}

/* The result and the board keep their dark sheets — a card of numbers wants the
   contrast — but they sit in the same daylight as the menu and the field rather
   than on a flat grey page. No horizon here: these two scroll, and a hard colour
   stop that slid up and down with the content would read as a seam. */
#scResult,#scLegends{
  background:linear-gradient(180deg,#2f7fb8 0%,#5ba3d2 35%,#3f8f58 100%);
}

/* ====================== start menu ======================
   This screen used to be the same grey as everything else, which made the game
   look like it was already over before it started. It is now the ballpark the
   field was repainted as: sky above, cut grass below, with the horizon at 46%.
   One layered background rather than a pseudo-element, so nothing inside needs
   a z-index to stay on top of it. Everything that sits on the bright half earns
   its contrast from its own surface — a cream ribbon, a white input, solid
   poster-coloured buttons, a gold ticket — rather than from a dark page. */
#scStart{
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.06) 0 46px, rgba(255,255,255,0) 46px 92px) 0 100%/100% 54% no-repeat,
    linear-gradient(180deg,
      #3f93cf 0%, #74b9e0 22%, #c6e6f5 45%,
      #2f8f48 46%, #4bb062 66%, #2c8243 100%);
}

.banner{text-align:center;margin-bottom:20px}
.tagline{
  font-size:11px;letter-spacing:.26em;font-weight:bold;margin-bottom:12px;
  color:#0c3c5c;text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.ribbon{
  background:linear-gradient(180deg,#fffaf0,#e7dcc4);color:#121b25;
  padding:10px 26px;border-radius:6px;transform:rotate(-1.2deg);
  box-shadow:0 12px 26px rgba(10,40,60,.35), inset 0 -3px 0 rgba(0,0,0,.12);
  border:3px solid var(--accent);
}
.title{margin:0;font-size:clamp(32px,10.5vw,58px);letter-spacing:.04em;line-height:1}
.title .accent{color:var(--accent)}
.subtitle{
  margin-top:12px;font-size:12px;letter-spacing:.42em;font-weight:bold;
  color:#0c3c5c;text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.nameField{display:flex;flex-direction:column;gap:6px;width:min(330px,100%);margin-bottom:16px}
.nameField span{
  font-size:10px;letter-spacing:.2em;font-weight:bold;padding-left:4px;
  color:#0c3c5c;text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.nameField input{
  background:#fffdf7;border:2px solid #cbd8e2;color:#16222e;
  border-radius:10px;padding:12px 14px;font:inherit;font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 3px 0 rgba(10,40,60,.18);
}
.nameField input::placeholder{color:#93a4b2}
.nameField input:focus{outline:none;border-color:var(--accent)}

/* Poster colours with a hard drop shadow — they read on sky and on grass alike,
   and the chunky press is most of what makes a menu feel like a game. */
.menuButtons{display:flex;flex-direction:column;gap:10px;width:min(330px,100%)}
.menuBtn{
  background:linear-gradient(180deg,#3d97dc,#2069ad);color:#fff;
  border:2px solid rgba(255,255,255,.45);border-radius:var(--r);padding:14px 16px;
  font:inherit;cursor:pointer;text-align:left;
  box-shadow:0 5px 0 rgba(10,40,60,.45), 0 8px 18px rgba(10,40,60,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.menuBtn span{display:block;font-size:15px;letter-spacing:.12em;font-weight:bold}
.menuBtn small{display:block;margin-top:3px;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.85);font-weight:normal}
.menuBtn.primary{background:linear-gradient(180deg,#ff7a4d,#e03a1c);border-color:#ffb79b}
.menuBtn.primary span{font-size:17px}
.menuBtn.ghostish{
  background:linear-gradient(180deg,#fffdf7,#e3ebf1);color:#16222e;
  border-color:#fff;text-shadow:none;
}
.menuBtn.ghostish span{font-size:13px}
.menuBtn.ghostish small{color:#5c6d7a}
.menuBtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(10,40,60,.45)}

/* the wallet: a gold ticket stapled to the grass, brighter once it can buy a bat */
.startCash{
  margin-top:18px;width:min(330px,100%);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  border:2px dashed rgba(120,78,10,.45);border-radius:12px;padding:8px 14px;
  background:linear-gradient(180deg,#ffe29a,#f3bf4f);
  box-shadow:0 4px 0 rgba(10,40,60,.22);
  font-size:10px;letter-spacing:.16em;font-weight:bold;color:#6b4708;text-align:center;
}
.startCash b{font-size:19px;letter-spacing:0;color:#412a00}
.startCash small{display:block;width:100%;font-size:10.5px;letter-spacing:.04em;font-weight:normal;color:#7a5410;text-transform:none}
.startCash.rich{border-style:solid;border-color:#fff6d8;background:linear-gradient(180deg,#fff0b8,#ffc63f)}

.startBest{
  margin-top:12px;font-size:12px;text-align:center;min-height:16px;max-width:330px;
  color:#eafbee;text-shadow:0 1px 3px rgba(0,30,10,.65);
}
.foot{position:absolute;bottom:10px;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.65);text-shadow:0 1px 3px rgba(0,30,10,.6)}

/* ====================== batting screen ====================== */
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}

/* A light vignette over the daytime field: just enough corner fall-off to settle
   the eye on the plate, plus a band under the top bar so the white chips and the
   pitch label keep their contrast against a bright sky. Pseudo-element, so it
   never swallows a tap. */
#scGame::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(125% 75% at 50% 62%, rgba(0,0,0,0) 45%, rgba(10,30,45,.22) 100%),
    linear-gradient(180deg, rgba(8,22,34,.55) 0%, rgba(8,22,34,.12) 16%, rgba(0,0,0,0) 30%);
}

/* --- 1. top bar: where you are in the run --- */
#topBar{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 8px 8px;
  background:linear-gradient(180deg,rgba(5,9,13,.85),rgba(5,9,13,0));
}
.tbMain{flex:1;min-width:0}
/* "PITCH 11 OF 11 · 168 KM/H" has to hold on one line on a narrow phone */
#pitchLabel{font-size:13px;font-weight:bold;letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){#pitchLabel{font-size:11.5px;letter-spacing:.1em}}
#segs{display:flex;gap:3px;margin-top:6px}
#segs i{
  flex:1;height:7px;border-radius:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.08);
}
#segs i.done{background:var(--good);border-color:var(--good)}
#segs i.now{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(255,194,71,.55)}
#segs i.fail{background:var(--bad);border-color:var(--bad)}
#segs.off{display:none}
.tbBtns{display:flex;gap:6px}
.tbBtns button{
  width:36px;height:36px;border-radius:10px;
  background:rgba(8,14,20,.72);border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
}

/* --- 2. meta row: the three numbers, each with a word --- */
#metaRow{
  position:absolute;top:calc(62px + env(safe-area-inset-top,0px));left:8px;right:8px;z-index:5;
  display:flex;gap:6px;
}
.chip{
  background:rgba(8,14,20,.78);border:1px solid var(--line);border-radius:10px;
  padding:6px 9px;min-width:0;flex:1;
}
.chip span{display:block;font-size:8.5px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip span small{font-size:8.5px;letter-spacing:.06em;color:var(--dimmer);text-transform:none}
.chip b{font-size:14px;display:block;margin-top:1px;font-variant-numeric:tabular-nums}
.chip.wide{flex:1.5}
.ptsTrack{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:4px;overflow:hidden}
.ptsTrack i{display:block;height:100%;width:0;background:var(--gold);border-radius:3px;transition:width .35s ease}
.chip.ready{border-color:var(--gold)}
.chip.ready b{color:var(--gold)}

/* --- 3. stage: the ONLY place feedback appears ---
   It used to sit at 44%, which is where the pitcher stands — every message
   landed on top of him and neither could be read. It now sits ABOVE him, in the
   band of stands between the meta row and the fence (the canvas scoreboard that
   used to occupy that band was dropped; the top bar already says the same
   thing). Each line carries its own dark pill so it stays legible over a bright
   sky, pale dirt or green grass, and :empty keeps the pills off screen when
   there is nothing to say.

   `top` is a fixed offset rather than a percentage: the meta row above it is
   also at a fixed offset, so this is the one value that cannot slide under it on
   a short screen — and the pitcher never starts higher than 39.5% of the
   viewport, so there is nothing below to collide with either.

   A flex column, because the two pills have to STACK. Centring them with
   text-align would only work while they were blocks; as shrink-to-fit pills they
   would otherwise flow onto the same line whenever both fit. */
#stage{
  position:absolute;left:var(--pad);right:var(--pad);z-index:6;
  top:calc(118px + env(safe-area-inset-top,0px));
  display:flex;flex-direction:column;align-items:center;
  text-align:center;pointer-events:none;min-height:92px;
}
#stBig{
  max-width:100%;
  font-size:clamp(24px,7.5vw,46px);line-height:1.05;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--flood);text-shadow:0 2px 10px rgba(0,0,0,.75);
  background:rgba(6,16,24,.62);border-radius:14px;padding:6px 18px;
}
#stSub{
  max-width:100%;margin-top:8px;
  font-size:13px;letter-spacing:.1em;color:#fff;
  background:rgba(6,16,24,.72);border-radius:9px;padding:5px 11px;
}
#stBig:empty,#stSub:empty{display:none}
#stage.bad #stBig{color:#ffb3a8}
#stage.good #stBig{color:#b6f29a}
#stage.quiet #stBig{font-size:14px;letter-spacing:.24em;color:var(--ink);padding:5px 13px}
#stage.pop{animation:pop .32s ease-out}
@keyframes pop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}

/* --- 4. meter + swing button: what to do --- */
#meterWrap{
  position:absolute;left:var(--pad);right:var(--pad);
  bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:5;pointer-events:none;
}
/* The row of words above the bar. "SWING NOW" is taken OUT of the flow and
   pinned to the contact point by layoutMeter(), because centring it pointed it
   at the wrong place — the two "TOO" labels still sit at the ends. */
#meterLab{position:relative;display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px;min-height:22px}
#meterLab i{font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--dimmer)}
#meterLab em{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;
  font-style:normal;font-size:11px;letter-spacing:.18em;font-weight:bold;color:#0d1b0d;
  background:var(--good);border-radius:5px;padding:2px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
/* the arrow under the label, so it reads as pointing down at the bar */
#meterLab em::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--good);
}
#meter{
  position:relative;height:26px;border-radius:13px;
  background:rgba(6,10,14,.85);border:1px solid var(--line);overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.45);
}
#meter .zone{position:absolute;top:0;bottom:0;display:block}
#meter .edge{background:rgba(255,150,60,.3)}
#meter .good{background:rgba(138,214,106,.55)}
#meter .perfect{background:rgba(150,255,140,.95);box-shadow:0 0 14px rgba(140,255,130,.7)}
/* the exact instant of contact: a hard line the moving marker has to land on */
#meterHit{
  position:absolute;top:0;bottom:0;width:2px;left:77%;margin-left:-1px;
  background:rgba(255,255,255,.85);
}
#meterMark{
  position:absolute;top:-5px;bottom:-5px;width:5px;left:0;
  background:#fff;border-radius:3px;box-shadow:0 0 14px rgba(255,255,255,.95), 0 0 3px rgba(0,0,0,.6);
}

#hitBtn{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:6;
  width:min(280px,76%);padding:17px;
  background:linear-gradient(180deg,#ff6a53,#d83524);color:#fff;
  border:1px solid #ff8f7c;border-radius:var(--r);
  font:inherit;font-size:18px;font-weight:bold;letter-spacing:.2em;cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
#hitBtn:active{transform:translateX(-50%) translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.4)}
#hitBtn:disabled{opacity:.35;box-shadow:none}

/* first-run tip strip */
#coach{
  position:absolute;left:var(--pad);right:var(--pad);
  bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:7;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,194,71,.14);border:1px solid rgba(255,194,71,.5);
  border-radius:12px;padding:10px 12px;
}
#coachText{flex:1;font-size:12px;line-height:1.5;color:#ffe9b8}
#coach button{
  background:rgba(255,194,71,.9);color:#1a1205;border:0;border-radius:8px;
  padding:7px 10px;font:inherit;font-size:10px;font-weight:bold;letter-spacing:.1em;cursor:pointer;
}

/* ====================== sheets (overlays + result + boards) ====================== */
.sheet{
  position:relative;width:min(440px,100%);
  background:var(--sheet);border:1px solid var(--line);border-radius:18px;padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.sheet.wide{width:min(560px,100%)}
/* the bat shop carries four cards two-across, so it needs the room */
.sheet.shopSheet{width:min(720px,100%)}
.kicker{font-size:10px;letter-spacing:.24em;color:var(--gold);margin-bottom:6px}
.sheet h2{margin:0 0 12px;font-size:21px;letter-spacing:.05em}
#ovBat h2 span{color:var(--gold)}
.small{font-size:12.5px;line-height:1.55;color:var(--dim)}
.small b{color:var(--ink)}
.dim{color:var(--dimmer)}
.msg{min-height:16px;margin:10px 0 0}
.msg.ok{color:var(--good)}
.msg.err{color:var(--bad)}
.backBtn{
  position:absolute;top:14px;right:14px;
  background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:9px;padding:7px 10px;font:inherit;font-size:10px;letter-spacing:.12em;cursor:pointer;
}

.bigPts{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.bigPts b{font-size:34px;color:var(--gold);line-height:1}
.bigPts span{font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

/* the two currencies side by side — the bat shop is read against both at once */
.balances{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.bal{
  display:flex;align-items:baseline;gap:7px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:9px 12px;
}
.bal b{font-size:26px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bal span{font-size:9.5px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;line-height:1.3}
.bal.cash{border-color:rgba(255,194,71,.4);background:rgba(255,194,71,.1)}
.bal.cash b{color:var(--gold)}

/* the rule that separates "spend this run's points" from "spend the wallet" */
.shopSplit{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--dimmer)}
.shopSplit::before,.shopSplit::after{content:"";flex:1;height:1px;background:var(--line)}
.shopSplit span{font-size:9px;letter-spacing:.16em;text-align:center}

/* what this run paid into the wallet, on the result screen */
.cashLine{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:12px;border:1px solid rgba(255,194,71,.4);border-radius:12px;padding:10px 12px;
  background:rgba(255,194,71,.1);
  font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;
}
.cashLine b{font-size:22px;letter-spacing:0;color:var(--gold);line-height:1}
/* the breakdown and the balance each take their own line, so a long breakdown
   ("10 home runs · 4 perfect · reached pitch 11") never squeezes the balance out */
.cashLine small{flex:1 0 100%;font-size:10px;letter-spacing:.04em;color:var(--dimmer);text-transform:none}
.cashLine em{flex:1 0 100%;text-align:right;font-style:normal;font-size:10px;color:var(--gold)}

.shop{display:flex;flex-direction:column;gap:10px;margin:14px 0}

/* Two across instead of a single stack. Four bats in one column ran well past
   the bottom of a phone, so the cards turn vertical — name, what it does, then
   the price as a full-width button — and sit two to a row. The rule between the
   points bats and the cash bats spans both columns. */
.shop.compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.shop.compare .shopSplit{grid-column:1 / -1}
.shop.compare .card{flex-direction:column;align-items:stretch;gap:10px}
.shop.compare .card button{width:100%}
@media (max-width:540px){
  .shop.compare{grid-template-columns:1fr}
  .shop.compare .card{flex-direction:row;align-items:center}
  .shop.compare .card button{width:auto}
}

.card{
  display:flex;align-items:center;gap:12px;
  background:#101a24;border:1px solid var(--line);border-radius:12px;padding:12px;
}
.card.legend{border-color:var(--gold);background:linear-gradient(180deg,#1f2636,#101a24)}
/* the cash bats: the Money Bat wears the same gold as the Legend Bat it copies,
   the Pro Money Bat the cold steel that says "this one is not the same bat" */
.card.money{border-color:rgba(255,194,71,.55);background:linear-gradient(180deg,#1b2230,#101a24)}
.card.money.pro{border-color:rgba(223,232,242,.6);background:linear-gradient(180deg,#1c242e,#101a24)}
.card.owned{border-color:var(--good)}
.card.dead{opacity:.72}
.card div{flex:1;min-width:0}
.card b{display:block;font-size:14px}
.card b small{font-size:10px;letter-spacing:.14em;color:var(--good);margin-left:6px}
.card span{display:block;font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.5}
.card span b{display:inline;color:var(--ink)}
.card span em{font-style:normal;color:var(--bad)}
.card button{
  background:#22303f;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:13px;font-weight:bold;letter-spacing:.06em;cursor:pointer;white-space:nowrap;
}
.card.legend button,.card.money button{background:linear-gradient(180deg,#ffc247,#e09c1d);color:#2a1c00;border-color:#ffd77a}
.card.money.pro button{background:linear-gradient(180deg,#eef4fa,#b9c8d8);color:#14202b;border-color:#fff}
.card button:disabled{opacity:.45;cursor:default;background:#1a242e;color:var(--dim);border-color:var(--line)}
/* "IN HAND" is green (see .card b small), but "SHORT 23" on a bat you cannot
   afford yet is not a good state — it is the price gap, so it wears the gold */
.card.dead b small{color:var(--gold)}

.warn{
  border-radius:10px;padding:10px 12px;margin-top:4px;
  font-size:12px;line-height:1.5;
  background:rgba(255,107,90,.12);border:1px solid rgba(255,107,90,.45);color:#ffcfc8;
}
.warn.ok{background:rgba(138,214,106,.12);border-color:rgba(138,214,106,.45);color:#d8f3c9}
.warn:empty{display:none}

.btn{
  background:linear-gradient(180deg,#24384a,#16222e);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px;font:inherit;font-size:14px;font-weight:bold;letter-spacing:.12em;cursor:pointer;
}
.btn.big{width:100%;margin-top:14px;background:linear-gradient(180deg,#ff6a53,#d83524);border-color:#ff8f7c;color:#fff;font-size:15px}
.btn.ghost{background:linear-gradient(180deg,#1a2531,#121a24)}
.btn.danger{color:#ffb3a9;width:100%;margin-top:10px;font-size:11px;padding:11px}
.btnRow{display:flex;gap:10px;margin-top:10px}
.btnRow .btn{flex:1;min-width:0}

/* result */
.hitTable{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;margin:14px 0}
.hitCell{background:#101a24;border:1px solid var(--line);border-radius:10px;padding:8px;font-size:13px}
.hitCell small{display:block;font-size:9px;letter-spacing:.14em;color:var(--dim);margin-bottom:2px}
.hitCell.perfect{border-color:var(--gold)}
.hitCell.fail{border-color:var(--bad);background:#1d1113}
.hitCell em{font-style:normal;color:var(--bad)}
/* one line reading the card back: hit, perfect, missed */
.resSummary{
  margin:0 0 12px;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  font-size:11.5px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;text-align:center;
}
.resSummary b{font-size:15px;letter-spacing:0;color:var(--ink)}
.totals{display:flex;gap:8px}

/* boards */
.legendCount{font-size:12px;color:var(--dim);margin-bottom:12px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{
  flex:1;background:#101a24;border:1px solid var(--line);color:var(--dim);
  border-radius:10px;padding:10px 6px;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer;
}
.tab.on{background:#22303f;color:var(--ink);border-color:var(--gold)}
.board{max-height:44vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:10px;background:#101a24;border:1px solid var(--line);border-radius:10px;padding:10px}
.row .rank{width:24px;text-align:center;font-weight:bold;color:var(--gold)}
.row .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .who small{display:block;font-size:10px;color:var(--dim)}
/* says a run bought its way past pitch 11 with cash rather than earning the bat */
.row .who .tag{
  display:inline-block;margin-left:7px;vertical-align:1px;
  font-style:normal;font-size:8.5px;letter-spacing:.14em;
  border:1px solid rgba(255,194,71,.5);border-radius:5px;padding:1px 5px;
  color:var(--gold);background:rgba(255,194,71,.1);
}
.row .who .tag.pro{border-color:rgba(223,232,242,.55);color:#dfe8f2;background:rgba(223,232,242,.1)}
.row .val{font-weight:bold}
.row.me{border-color:var(--gold)}
.empty{color:var(--dim);font-size:13px;text-align:center;padding:24px 0}

/* overlays (gear bench, bat choice, how to play) */
.overlay{
  position:absolute;inset:0;z-index:20;display:none;
  align-items:center;justify-content:center;padding:var(--pad);
  background:rgba(4,8,12,.82);overflow-y:auto;
}
.overlay.on{display:flex}

/* how-to steps */
.step{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.step i{
  flex:0 0 24px;height:24px;border-radius:50%;
  background:rgba(255,194,71,.16);border:1px solid rgba(255,194,71,.5);color:var(--gold);
  font-style:normal;font-size:12px;font-weight:bold;display:grid;place-items:center;
}
.step div{flex:1;font-size:12.5px;line-height:1.55;color:var(--dim)}
.step b{color:var(--ink)}

/* short screens */
@media (max-height:640px){
  .banner{margin-bottom:12px}
  .screen{justify-content:flex-start}
  #stage{top:calc(110px + env(safe-area-inset-top,0px));min-height:76px}
  #stBig{font-size:clamp(20px,6.5vw,34px)}
  #meterWrap{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  #coach{bottom:calc(142px + env(safe-area-inset-bottom,0px))}
}