/* ═══════════════════════════════════════════
   CRICKET TCG · MATCH BOARD (light arena)
   Overrides the dark board styles in styles.css for the match screen
   and its overlays. Layout: fixed 390px design frame (.bd-frame),
   scaled to the viewport by fitBoard() in js/board.js.
   Reference mockup: mockups/match-board.html
═══════════════════════════════════════════ */
:root{
  --bd-bg:#e9edf6; --bd-ink:#1f2a44; --bd-ink2:#5b6885; --bd-line:#dfe5f2;
  --bd-opp:#ff8f7a; --bd-opp-d:#e0553f; --bd-me:#5aa8ff; --bd-me-d:#2466c9;
  --bd-grass:#bfe3a8; --bd-grass2:#b3dc9a; --bd-pitch:#ecdcb3;
  --bd-power:#f9523e; --bd-tech:#22c7c0; --bd-ctrl:#f5b400; --bd-all:#8f6bff; --bd-sup:#4caf50; --bd-cap:#c9971c;
  --bd-glow:#3fe0ff;
  --bd-fn:var(--font-ui); --bd-fd:var(--font-ui);
  /* card sizes: bench · active · support · hand */
  --bw:64px; --bh:90px; --aw:112px; --ah:158px; --sw:54px; --sh:76px; --hw:100px; --hh:140px;
  --bd-back:
    radial-gradient(circle at 50% 50%,#e23b3b 0 15%,transparent 16%),
    radial-gradient(circle at 50% 50%,#fff 0 20%,transparent 21%),
    repeating-linear-gradient(45deg,#2b4a91 0 6px,#23407f 6px 12px);
}

/* ─── FRAME ─── */
#s-board{background:var(--bd-bg);}
#s-board.active{display:block;}
.bd-frame{position:relative;width:390px;margin:0 auto;display:flex;flex-direction:column;
  font-family:var(--bd-fn);color:var(--bd-ink);overflow:hidden;}

/* ─── SCOREBOARD ─── */
#s-board .scorebar{flex:none;position:relative;height:104px;padding:0;display:block;
  background:#fff;border:0;border-radius:0 0 24px 24px;box-shadow:0 3px 12px rgba(30,40,80,.15);z-index:6;overflow:visible;}
#s-board .cap-pill{position:absolute;top:8px;width:50px;height:70px;padding:0;background:none;border:0;box-shadow:none;cursor:pointer;}
#opp-cap-pill{left:10px;} #my-cap-pill{right:10px;}
.cap-pill .card{width:100%;height:100%;}
.sb-side{position:absolute;top:9px;display:flex;flex-direction:column;gap:3px;}
.sb-opp{left:70px;align-items:flex-start;} .sb-me{right:70px;align-items:flex-end;}
.sb-who{font:800 11px var(--bd-fn);color:var(--bd-ink2);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;}
#s-board .score-num{font:900 24px/1 var(--bd-fn);color:var(--bd-ink);text-shadow:none;letter-spacing:0;}
.sb-meta{display:flex;gap:6px;align-items:center;}
#s-board .ball-badge{font:900 9px var(--bd-fn);letter-spacing:.5px;text-transform:uppercase;color:#fff;border:0;border-radius:4px;padding:2px 6px;margin:0;}
#s-board .ball-badge.me{background:var(--bd-me-d);} #s-board .ball-badge.opp{background:var(--bd-opp-d);}
.sb-wk{display:flex;gap:3px;}
.sb-wk i{width:8px;height:8px;border-radius:50%;background:var(--bd-line);}
.sb-wk i.on{background:#ff5a5a;}
.sb-mid{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;}
#s-board .score-vs{font:800 9px var(--bd-fn)!important;color:var(--bd-ink2)!important;letter-spacing:.4px;text-transform:uppercase;padding:0!important;}
.sb-over{display:flex;gap:3px;}
.sb-over i{width:18px;height:18px;border-radius:50%;background:#eef1f8;font:900 10px/18px var(--bd-fn);font-style:normal;color:var(--bd-ink2);text-align:center;}
.sb-over i.r{background:var(--bd-me);color:#fff;} .sb-over i.b{background:#f5a524;color:#fff;}
.sb-over i.w{background:#ff5a5a;color:#fff;} .sb-over i.now{box-shadow:0 0 0 2px var(--bd-ink);}

/* ─── OPPONENT HAND (face-down fan) ─── */
.opp-hand{flex:none;height:44px;display:flex;justify-content:center;align-items:flex-start;padding-top:6px;position:relative;z-index:2;}
.opp-hand .card.back{width:32px;height:46px;margin:0 -5px;border-width:2px;border-radius:6px;}

/* ─── ARENA (oval ground behind both rows + face-off) ─── */
.bd-arena{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:4px 0;}
.bd-arena > *{position:relative;z-index:1;}
.bd-arena > .bd-ground{position:absolute;z-index:0;left:-50px;right:-50px;top:0;bottom:0;border-radius:50%;padding:9px;
  background:linear-gradient(to bottom,var(--bd-opp) 0 50%,var(--bd-me) 50% 100%);}
.bd-grass{width:100%;height:100%;border-radius:50%;
  background:repeating-linear-gradient(to bottom,var(--bd-grass) 0 32px,var(--bd-grass2) 32px 64px);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.75);}

/* rows: discard · bench ×3 · deck */
#s-board .ozone,#s-board .pzone{flex:none;background:none;border:0;padding:0 14px;overflow:visible;display:block;}
#s-board .zone-lbl,#s-board .aux-lbl{display:none;}
#s-board .zone-row{display:flex;align-items:center;justify-content:space-between;gap:0;}
#s-board .bench-row{flex:none;display:flex;gap:8px;align-items:center;justify-content:center;}
#s-board .aux-col{width:var(--bw);display:flex;align-items:center;justify-content:center;}
.ozone .bench-row > div{transform:none!important;}

/* deck: card back + count */
#s-board .deck-tile{position:relative;width:var(--bw);height:var(--bh);border-radius:9px;border:3px solid #fff;
  background:var(--bd-back);box-shadow:0 3px 8px rgba(30,40,80,.28);cursor:default;}
#my-deck{cursor:pointer;}
#s-board .deck-cnt{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#2b3553;color:#fff;
  font:800 10px var(--bd-fn);border-radius:999px;padding:1px 7px;text-shadow:none;}
#s-board .deck-pulse{animation:bdGlow 1.1s ease-in-out infinite alternate;}

/* discard: small, muted face-up stack */
.discard-pile{position:relative;width:48px;height:66px;cursor:pointer;opacity:.7;filter:grayscale(.6);}
.discard-pile.empty{border-radius:8px;border:2px dashed rgba(255,255,255,.8);opacity:.6;filter:none;cursor:default;}
.discard-pile .card{position:absolute;inset:0;width:100%;height:100%;}
.dp-under{position:absolute;inset:0;border-radius:8px;background:#fff;box-shadow:0 2px 5px rgba(30,40,80,.25);transform:rotate(-7deg);}
.dp-under.b{transform:rotate(5deg);}
.dp-ico{position:absolute;top:-6px;left:-6px;width:17px;height:17px;border-radius:50%;background:#2b3553;color:#fff;display:grid;place-items:center;font-size:9px;z-index:2;}
.pile-cnt{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#2b3553;color:#fff;font:800 10px var(--bd-fn);border-radius:999px;padding:1px 7px;z-index:2;}

/* ─── FACE-OFF (side by side on a horizontal pitch) ─── */
#s-board .field,#dice-overlay .field{flex:none;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:4px 8px 6px;background:none;border:0;box-shadow:none;min-height:0;}
#s-board .field::before,#dice-overlay .field::before{content:'';position:absolute;left:8px;right:8px;top:auto;bottom:6px;height:calc(var(--ah) - 22px);
  width:auto;transform:none;margin-bottom:11px;background:var(--bd-pitch);border:0;border-radius:8px;box-shadow:0 0 0 3px rgba(255,255,255,.5);}
#s-board .field::after,#dice-overlay .field::after{content:'';position:absolute;left:80px;right:80px;top:auto;bottom:25px;height:calc(var(--ah) - 38px);
  width:auto;transform:none;background:none;border-left:3px solid rgba(255,255,255,.9);border-right:3px solid rgba(255,255,255,.9);box-shadow:none;}
.field-left,.field-right{flex:1;display:flex;align-items:flex-end;gap:6px;position:relative;z-index:1;}
.field-left{justify-content:flex-end;} .field-right{justify-content:flex-start;}
#s-board .active-col,#dice-overlay .active-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
#s-board .active-lbl,#dice-overlay .active-lbl{font:900 9px var(--bd-fn);letter-spacing:.6px;text-transform:uppercase;color:#fff;border-radius:999px;padding:3px 9px;white-space:nowrap;}
#opp-active-lbl{background:var(--bd-opp-d);} #my-active-lbl{background:var(--bd-me-d);}
#s-board .vs-pill,#dice-overlay .vs-pill{position:absolute;left:50%;bottom:calc(6px + var(--ah)/2);transform:translate(-50%,50%);z-index:2;}
#s-board .vs-txt,#dice-overlay .vs-txt{width:28px;height:28px;border-radius:50%;background:#fff;border:0;padding:0;font:900 11px/28px var(--bd-fn);text-align:center;color:var(--bd-ink2);letter-spacing:0;box-shadow:0 1px 4px rgba(0,0,0,.2);}
#s-board .role-txt,#dice-overlay .role-txt{display:none;}

/* active cards */
#my-active .cact,#opp-active-wrap .cact,#opp-active-wrap .card,.board-flip-wrap,.board-flip-inner{width:var(--aw)!important;height:var(--ah)!important;}
#s-board .empty-active,#dice-overlay .empty-active{border:2.5px dashed rgba(255,255,255,.95);border-radius:10px;background:rgba(255,255,255,.3);}
#s-board .empty-active-txt{font:800 11px var(--bd-fn);color:var(--bd-ink2);text-transform:none;letter-spacing:0;}
#opp-active-card{background:var(--bd-back)!important;border:3px solid #fff!important;}
#opp-active-card > *{display:none!important;}

/* support slots (outside of each active card) */
.sup-col{display:flex;flex-direction:column;gap:4px;align-self:center;margin-top:20px;}
#s-board .sup-lbl,#dice-overlay .sup-lbl,#s-board .opp-sup-lbl,#dice-overlay .opp-sup-lbl{display:none;}
#opp-sup-wrap{align-self:center;margin-top:20px;}
#s-board .sup-slot,#dice-overlay .sup-slot,#opp-sup-slot{width:var(--sw);height:var(--sh);border-radius:9px;border:2.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,.3);overflow:visible;}
#s-board .sup-slot-txt{font:800 9px var(--bd-fn);color:var(--bd-ink2);text-transform:none;letter-spacing:0;}
.sup-slot .card,#opp-sup-slot .card{width:100%!important;height:100%!important;}
#s-board .sup-slot.hover{border-color:var(--bd-glow);background:rgba(63,224,255,.25);}

/* ─── ACTION BAR (instruction · buttons · timer) ─── */
#s-board .wizard{flex:none;margin:0 12px;height:46px;background:#fff;border:0;border-radius:999px;
  box-shadow:0 2px 8px rgba(30,40,80,.18);display:flex;flex-direction:row;align-items:center;padding:0 5px;}
#s-board .wsteps,#s-board .wpips{display:none;}
#s-board .wbody{flex:1;display:flex;flex-direction:row;align-items:center;gap:8px;padding:0;min-width:0;}
#s-board .winstr{flex:1;font:700 11.5px/1.25 var(--bd-fn);color:var(--bd-ink2);min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
#s-board .winstr b{color:var(--bd-ink);}
#s-board .wbtns{display:flex;gap:5px;padding:0;flex:none;}
#s-board .wbtn,#toss-overlay .wbtn{flex:none;height:34px;padding:0 15px;border-radius:999px;border:0;font:800 14px var(--bd-fd);letter-spacing:.3px;cursor:pointer;}
#s-board .wbtn.skip,#toss-overlay .wbtn.skip{background:#fff;color:var(--bd-ink2);box-shadow:inset 0 0 0 2px var(--bd-line);}
#s-board .wbtn.lock,#s-board .wbtn.go,#toss-overlay .wbtn.go{background:linear-gradient(#3d8ef0,var(--bd-me-d));color:#fff;box-shadow:0 2px 6px rgba(36,102,201,.35);}
#s-board .wbtn.undo{width:34px;padding:0;background:#eef1f8;color:var(--bd-ink2);font-size:16px;}
/* timer ring: --t = share of time left (set by upTimer) */
#s-board .timer-pill{position:static;transform:none;flex:none;width:36px;height:36px;border-radius:50%;padding:3px;border:0;
  background:conic-gradient(var(--bd-me) calc(var(--t,1)*360deg),var(--bd-line) 0);box-shadow:none;display:block;}
#s-board .timer-pill.low{background:conic-gradient(var(--bd-opp-d) calc(var(--t,1)*360deg),var(--bd-line) 0);}
#s-board .timer-num{width:100%;height:100%;border-radius:50%;background:#fff;display:grid;place-items:center;font:900 12px var(--bd-fn);color:var(--bd-ink);}

/* ─── HAND (fan; positions set by layoutHand) ─── */
#s-board .hzone{flex:none;height:170px;background:none;border:0;padding:0;overflow:visible;display:block;position:relative;z-index:3;}
#s-board .hand-header{display:none;}
#s-board .hand-scroll{position:relative;display:block;height:100%;overflow:visible;padding:0;}
#hand-scroll > [id^="hw"]{position:absolute;top:14px;transition:left .22s,transform .22s;transform-origin:50% 120%;}
#s-board .chand{width:var(--hw);height:var(--hh);}
#s-board .csm{width:var(--bw);height:var(--bh);}

/* ═══ CARDS (board + overlays) ═══ */
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card{position:relative;display:block;overflow:hidden;
  border:3px solid #fff;border-radius:9px;background:#2b4a91;box-shadow:0 3px 8px rgba(30,40,80,.28);}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card.sup{border-color:#dff5e8;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card.cap{border-color:#ffe7a3;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card.back{background:var(--bd-back);}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cart{position:absolute;inset:0;padding:0;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cart-in{width:100%;height:100%;border-radius:0;background-color:#2b4a91;background-size:cover;background-position:center top;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cart-in.has-art::after{display:none;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cart-emoji{font-size:22px;color:#fff;opacity:.55;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cstyle-badge{display:none;}
/* role icon (top-left) */
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .ccorner{top:4px;left:4px;width:20px;height:20px;padding:0;border-radius:50%;
  background:#fff!important;font-size:0;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.25);}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .ccorner::before{font-size:11px;line-height:1;}
.card.bat .ccorner::before{content:'\1F3CF';}
.card.sup .ccorner::before{content:'\2728';}
.card.cap .ccorner::before{content:'\1F451';}
.card.bowl .ccorner::before{content:'';width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff7a7a,#c81e1e 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);}
/* name band, coloured by style */
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cfoot{position:absolute;left:0;right:0;bottom:0;padding:3px 5px 4px;border:0;background:#5b6885;display:block;}
.card.st-power .cfoot{background:var(--bd-power)!important;} .card.st-technical .cfoot{background:var(--bd-tech)!important;}
.card.st-control .cfoot{background:var(--bd-ctrl)!important;} .card.st-all .cfoot{background:var(--bd-all)!important;}
.card.sup .cfoot{background:var(--bd-sup)!important;} .card.cap .cfoot{background:var(--bd-cap)!important;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cfoot-row{gap:4px;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cfoot-row + .cfoot-row{display:none;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cname{font:800 11px var(--bd-fn);color:#fff;text-transform:none;letter-spacing:0;}
:is(#s-board,#dice-overlay,#discard-overlay,#modal-overlay) .card .cstam{display:none;}
.card .type-strip{margin:-3px -5px 3px;padding:2px 5px;background:rgba(255,255,255,.94);font:900 9px/1.1 var(--bd-fn);text-transform:uppercase;letter-spacing:.6px;text-align:center;white-space:nowrap;overflow:hidden;}
.type-strip.t-power{color:var(--bd-power);} .type-strip.t-technical{color:var(--bd-tech);} .type-strip.t-control{color:var(--bd-ctrl);} .type-strip.t-all{color:var(--bd-all);}
.card .wk-line{font:800 8.5px/1.1 var(--bd-fn);color:rgba(255,255,255,.9);margin-top:1px;white-space:nowrap;overflow:hidden;}
/* stamina: big number + pips (top-right) */
.card .cst{position:absolute;top:2px;right:5px;z-index:2;text-align:right;line-height:1;}
.card .cst b{font:900 26px var(--bd-fn);color:#fff;-webkit-text-stroke:1px rgba(0,0,0,.35);text-shadow:0 2px 3px rgba(0,0,0,.45);}
.card .cst .pips{display:flex;gap:2px;justify-content:flex-end;margin-top:1px;}
.card .cst .pips i{width:9px;height:4px;border-radius:2px;background:#41d17a;box-shadow:0 0 0 1px rgba(0,0,0,.25);}
.card .cst .pips i.off{background:rgba(255,255,255,.45);}
/* small cards (bench, support slots, pickers) */
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .cst b{font-size:18px;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .cst .pips i{width:6px;height:3px;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .ccorner{width:16px!important;height:16px!important;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .ccorner::before{font-size:9px!important;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .cfoot{padding:2px 2px 3px!important;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .cname{font-size:8.5px!important;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .type-strip{margin:-2px -2px 2px;padding:1px 2px;font-size:7px;letter-spacing:.3px;}
:is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .wk-line{font-size:6.5px;letter-spacing:-.15px;margin:0 -1px;}
#w2-cards .card{width:var(--bw)!important;height:var(--bh)!important;}
/* tiny cards (captains, discard) */
:is(.cap-pill,.discard-pile) .card{border-width:2px;border-radius:6px;}
:is(.cap-pill,.discard-pile) .card :is(.cst,.ccorner,.type-strip,.wk-line){display:none;}
:is(.cap-pill,.discard-pile) .card .cfoot{padding:1px 3px 2px;}
:is(.cap-pill,.discard-pile) .card .cname{font-size:7px!important;}
/* big cards (active) */
.cact .cname{font-size:12px!important;}
.cact .cst b{font-size:30px;}
.cact .wk-line{font-size:9px;}

/* empty + locked bench slots */
:is(#s-board,#dice-overlay) .card.empty-slot{background:rgba(255,255,255,.28);border:2.5px solid rgba(255,255,255,.85);box-shadow:none;}
#s-board .eslot-lbl{display:none;}
:is(#s-board,#dice-overlay) .card.locked-slot{background:rgba(255,255,255,.3);border:2.5px dashed rgba(255,255,255,.95);box-shadow:none;}
#s-board .locked-icon{color:var(--bd-ink2);font-size:16px;}
#s-board .locked-lbl{font:800 8px var(--bd-fn);color:var(--bd-ink2);text-transform:none;letter-spacing:0;}

/* states */
#s-board .focus-dim{opacity:.35;}
#s-board .card.grayed{opacity:.35;}
#s-board .card.hover-gold{border-color:var(--bd-glow)!important;box-shadow:0 0 0 3px var(--bd-glow),0 0 16px var(--bd-glow)!important;}
#s-board .card.sup-glow{border-color:#fff!important;box-shadow:0 0 0 3px var(--bd-glow),0 4px 10px rgba(30,40,80,.3)!important;}
#s-board .active-shine,#s-board .bench-shine,#s-board .sup-shine{animation:bdGlow 1.1s ease-in-out infinite alternate!important;}
#s-board .bench-shine{border-style:solid!important;border-color:#fff!important;}
@keyframes bdGlow{from{box-shadow:0 0 0 2px var(--bd-glow),0 0 8px var(--bd-glow);}to{box-shadow:0 0 0 3px var(--bd-glow),0 0 20px var(--bd-glow);}}
:is(#s-board,#dice-overlay) #my-active .card{box-shadow:0 4px 12px rgba(30,40,80,.3);}

/* ═══ DICE OVERLAY ═══ */
#dice-overlay.scrim{background:rgba(25,35,70,.55);}
#dice-overlay.full{background:rgba(22,30,60,.94);}
#d-stage{position:relative;z-index:1;width:390px;margin:0 auto;display:flex;flex-direction:column;font-family:var(--bd-fn);}
#dice-overlay .field.lifted{width:100%;padding-top:18px;border:0;box-shadow:none;}
#dice-overlay .d-scroll{padding:0 16px 18px;}
#dice-overlay .d-divider{height:0;margin:5px 0;background:none;}
#dice-overlay .d-phase-label{font:800 10px var(--bd-fn);color:rgba(255,255,255,.75);letter-spacing:1.5px;margin:4px 0 6px;}
#dice-overlay .d-effects{background:rgba(255,255,255,.96);border:0;border-radius:14px;padding:10px 12px;gap:4px;}
#dice-overlay .d-effects-title{font:800 10px var(--bd-fn);color:var(--bd-ink2);letter-spacing:1px;}
#dice-overlay .d-eff-section{font:800 9px var(--bd-fn);color:var(--bd-ink2);border-top-color:var(--bd-line);}
#dice-overlay .d-effect-row{font:700 12px/1.3 var(--bd-fn);}
#dice-overlay .d-effect-text{color:var(--bd-ink);}
#dice-overlay .d-effect-text.muted{color:var(--bd-ink2);}
#dice-overlay .d-effect-text.good{color:#15994f;}
#dice-overlay .d-effect-text.warn{color:#d23c3c;}
#dice-overlay .d-effect-text.cap{color:#a8740a;}
#dice-overlay .d-dice-row{gap:22px;}
#dice-overlay .d-dice-who{font:800 10px var(--bd-fn);color:#fff;letter-spacing:.6px;}
#dice-overlay .dbox{width:66px;height:66px;border-radius:15px;background:#fff;border:0;box-shadow:0 4px 0 #c9d2e6,0 8px 16px rgba(0,0,0,.25);}
#dice-overlay .dbox.winner{box-shadow:0 4px 0 #c9d2e6,0 0 0 3px #f5a524,0 0 20px rgba(245,165,36,.6);}
#dice-overlay .dval{font:900 36px var(--bd-fn);}
#d-val-you{color:var(--bd-me-d);} #d-val-opp{color:var(--bd-opp-d);}
#dice-overlay .dmod{font:800 10px var(--bd-fn);background:#fff;border:0;border-radius:999px;padding:2px 9px;color:var(--bd-ink2);}
#dice-overlay .dmod.higher{color:#15994f;} #dice-overlay .dmod.lower{color:#d23c3c;}
#dice-overlay .d-matchup-vs{color:rgba(255,255,255,.6);}
#dice-overlay .d-weak.active{background:#fff;color:#d23c3c;border:0;border-radius:999px;font:800 10px var(--bd-fn);}
/* outcome: big slanted banner + maths + highlighted run table */
#dice-overlay .d-outcome-wrap{background:none!important;border:0!important;box-shadow:none!important;padding:4px 0 0;overflow:visible;}
#dice-overlay .d-event-lbl{display:inline-block;font:800 54px/1 var(--bd-fd);letter-spacing:0;color:#fff;padding:10px 60px 2px;margin:0 0 6px;
  transform:skewY(-4deg);-webkit-text-stroke:2px rgba(0,0,0,.25);text-shadow:0 4px 0 rgba(0,0,0,.2);
  background:linear-gradient(90deg,transparent,var(--ev) 15%,var(--ev2) 85%,transparent);--ev:#f08a24;--ev2:#f5a524;}
#dice-overlay .d-event-lbl.six{--ev:#f5a524;--ev2:#ffcc33;}
#dice-overlay .d-event-lbl.wicket{--ev:#d63a3a;--ev2:#ff5a5a;}
#dice-overlay .d-event-lbl.dotball{--ev:#6b7899;--ev2:#8a96b5;font-size:40px;}
#dice-overlay .d-outcome-wrap:is(.four,.six,.wicket,.dotball) :is(.druns,.drlbl){display:none;}
#dice-overlay .druns{color:#fff!important;text-shadow:0 3px 0 rgba(0,0,0,.2)!important;font-family:var(--bd-fd);}
#dice-overlay .drlbl{color:rgba(255,255,255,.8);font:800 10px var(--bd-fn);letter-spacing:1.5px;}
#dice-overlay .drdet{color:#fff;font:800 14px var(--bd-fn);margin-top:4px;}
.d-ladder{display:flex;justify-content:center;gap:3px;margin-top:10px;}
.d-ladder > div{background:rgba(255,255,255,.18);color:#fff;border-radius:7px;padding:3px 6px;min-width:46px;text-align:center;transition:transform .2s;}
.d-ladder b{display:block;font:900 14px var(--bd-fn);}
.d-ladder small{font:700 9px var(--bd-fn);opacity:.85;}
.d-ladder > .hit{background:#fff;color:var(--bd-ink);transform:scale(1.12);box-shadow:0 0 0 2px #f5a524;}
#dice-overlay .btn-cont{background:linear-gradient(#3d8ef0,var(--bd-me-d));color:#fff;border-radius:999px;font:800 16px var(--bd-fd);letter-spacing:.5px;padding:12px 0;box-shadow:0 3px 10px rgba(36,102,201,.4);}
#dice-overlay .d-skip-hint{color:rgba(255,255,255,.55);font:700 9px var(--bd-fn);}
#w2-picker{background:rgba(255,255,255,.96);border:0!important;border-radius:0 0 18px 18px;}
#w2-prompt{color:var(--bd-ink)!important;font:800 13px var(--bd-fn)!important;}

/* ═══ CARD DETAIL (tap any card) ═══ */
#modal-overlay{background:rgba(25,35,70,.6);align-items:center;}
#modal-overlay .msheet{background:none;border:0;box-shadow:none;max-width:320px;padding:16px;display:flex;flex-direction:column;align-items:center;}
#modal-overlay .mhandle{display:none;}
#modal-overlay .mheader{flex-direction:column;align-items:center;gap:12px;margin:0;width:100%;}
#modal-overlay .mart{width:220px;height:308px;border:5px solid #fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);}
#modal-overlay .mart .ccorner{width:32px;height:32px;top:8px;left:8px;}
#modal-overlay .mart .ccorner::before{font-size:17px;}
#modal-overlay .minfo{width:100%;background:#fff;border-radius:14px 14px 0 0;padding:12px 14px 2px;}
#modal-overlay .mtype{font:800 10px var(--bd-fn);color:var(--bd-ink2);letter-spacing:1px;}
#modal-overlay .mname{font:800 22px/1.1 var(--bd-fd);color:var(--bd-ink);text-shadow:none;margin:2px 0 6px;}
#modal-overlay .mstat-l{font:800 9px var(--bd-fn);color:var(--bd-ink2);}
#modal-overlay .mstat-v{font:900 14px var(--bd-fn);color:var(--bd-ink);}
#modal-overlay .mweak{font:800 12px var(--bd-fn);color:#d23c3c;margin-bottom:4px;}
#modal-overlay .mability{width:100%;background:#fff;border:0;border-radius:0 0 14px 14px;padding:8px 14px 14px;margin:0;box-shadow:0 10px 24px rgba(0,0,0,.2);}
#modal-overlay .mab-name{font:800 15px var(--bd-fd);color:var(--bd-ink);text-transform:none;letter-spacing:0;}
#modal-overlay .mab-text{font:600 13px/1.4 var(--bd-fn);color:var(--bd-ink2);}
#modal-overlay .mbtns{margin-top:12px;}
#modal-overlay .mbtn{background:none;border:0;color:#fff;font:700 12px var(--bd-fn);opacity:.85;}

/* ═══ DISCARD SHEET ═══ */
#discard-overlay{background:rgba(25,35,70,.55);align-items:flex-end;justify-content:center;z-index:260;}
.dsheet{width:100%;max-width:440px;background:#fff;border-radius:24px 24px 0 0;padding:12px 16px 28px;font-family:var(--bd-fn);color:var(--bd-ink);max-height:80vh;overflow-y:auto;}
.dsheet .mhandle{background:var(--bd-line);}
.dsheet-title{font:800 18px var(--bd-fd);}
.dsheet-sub{font:600 12px var(--bd-fn);color:var(--bd-ink2);margin-bottom:12px;}
.dsheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.dsheet-grid .card{width:100%;aspect-ratio:5/7;cursor:pointer;}
.dsheet-grid .card .cst b{font-size:18px;}
.dsheet-grid .card .cname{font-size:9px!important;}
.dsheet-grid .card .type-strip{margin:-3px -5px 2px;font-size:7px;}
.dsheet-grid .card .wk-line{font-size:6.5px;} .dsheet-empty{grid-column:1/-1;text-align:center;color:var(--bd-ink2);font:700 13px var(--bd-fn);padding:20px 0;}

/* ═══ TOSS / WAIT / BANNERS ═══ */
#toss-overlay,#wait-overlay{background:rgba(25,35,70,.6);gap:22px;overflow:hidden;}
#toss-overlay .wtxt,#wait-overlay .wtxt{position:relative;width:130%;text-align:center;padding:14px 0;transform:rotate(-6deg);
  font:italic 800 34px/1.05 var(--bd-fd);letter-spacing:0;text-transform:none;color:var(--bd-ink);text-shadow:none;
  background:linear-gradient(90deg,transparent,#fff 18%,#fff 82%,transparent);}
#toss-overlay .wtxt::before,#toss-overlay .wtxt::after,#wait-overlay .wtxt::before,#wait-overlay .wtxt::after{content:'';position:absolute;left:12%;right:12%;height:5px;border-radius:3px;}
#toss-overlay .wtxt::before,#wait-overlay .wtxt::before{top:-10px;background:var(--bd-opp);}
#toss-overlay .wtxt::after,#wait-overlay .wtxt::after{bottom:-10px;background:var(--bd-me);}
#toss-overlay .toss-sub{font:800 14px var(--bd-fn);letter-spacing:0;text-transform:none;color:#fff;background:#2b3553;border-radius:999px;padding:6px 18px;}
#toss-overlay .toss-sub:empty{display:none;}
#toss-overlay .wbtn{height:44px;padding:0 24px;font-size:17px;}
#wait-overlay .dot{background:#fff;}

/* target picker prompt */
#tp-banner{left:12px!important;right:12px!important;bottom:16px!important;background:#fff!important;border:0!important;border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);padding:10px 14px!important;font-family:var(--bd-fn);}
#tp-txt{color:var(--bd-ink)!important;font:800 13px var(--bd-fn)!important;}
#tp-cancel{border-color:var(--bd-line)!important;color:var(--bd-ink2)!important;border-radius:999px!important;}
#s-board .tp-glow,#s-board .tp-glow .card{outline-color:var(--bd-glow);}

/* ═══ DICE: stakes, roll breakdown, weakness flags ═══ */
#dice-overlay .d-stakes{background:rgba(255,255,255,.96);color:var(--bd-ink);border-radius:12px;padding:7px 12px;margin:0 0 10px;
  font:700 12px/1.35 var(--bd-fn);text-align:center;}
#dice-overlay .d-stakes b{font-weight:900;} .d-stakes b.bad{color:#d23c3c;} .d-stakes b.good{color:#15994f;}
#dice-overlay .dbase{font:800 10px var(--bd-fn);color:rgba(255,255,255,.75);min-height:13px;opacity:0;transition:opacity .3s;}
#dice-overlay .dbase.show{opacity:1;}
.d-ladder-cap{font:800 9px var(--bd-fn);color:rgba(255,255,255,.6);letter-spacing:.8px;text-transform:uppercase;text-align:center;margin-top:12px;}
.d-ladder-cap + .d-ladder{margin-top:4px;}
.weak-flag{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;white-space:nowrap;text-align:center;
  background:#d23c3c;color:#fff;border:2px solid #fff;border-radius:7px;padding:2px 8px 3px;line-height:1.1;
  box-shadow:0 2px 6px rgba(0,0,0,.35);animation:weakPop .45s cubic-bezier(.2,1.6,.4,1) both;}
.weak-flag b{display:block;font:900 13px var(--bd-fn);letter-spacing:.3px;}
.weak-flag small{display:block;font:800 9px var(--bd-fn);opacity:.95;}
@keyframes weakPop{from{transform:translate(-50%,-50%) scale(.2);opacity:0;}}

/* Draft matchup cue: an inset halo keeps the bench geometry and card art intact. */
#s-board .ozone .bench-row .card.bench-weak-preview::after{
  content:'';position:absolute;inset:0;border:3px solid #ff665c;border-radius:inherit;
  box-shadow:inset 0 0 12px #ef443b80;pointer-events:none;z-index:9;
  animation:benchWeakPulse 1.4s ease-in-out infinite;
}
#s-board .bench-weak-badge{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:10;
  padding:3px 7px;border:1px solid #ffb4ac;border-radius:5px;background:#a92320;color:#fff;
  font:900 10px var(--bd-fn);letter-spacing:.7px;line-height:1.2;
  box-shadow:0 2px 6px #0005;pointer-events:none;
}
@keyframes benchWeakPulse{0%,100%{opacity:.5;}50%{opacity:1;box-shadow:inset 0 0 20px #ef443bb3;}}
@media(prefers-reduced-motion:reduce){
  #s-board .ozone .bench-row .card.bench-weak-preview::after{animation:none;opacity:1;}
}

/* ═══ BALL NARRATION (js/narrate.js) ═══ */
#s-board .wizard{position:relative;}
.bd-toasts{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:40;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:none;}
.bd-toast{display:flex;align-items:center;gap:7px;max-width:100%;background:#fff;color:var(--bd-ink);border-radius:999px;padding:6px 13px 6px 7px;
  font:700 12px/1.25 var(--bd-fn);box-shadow:0 3px 12px rgba(30,40,80,.25);
  animation:toastIn .3s cubic-bezier(.2,1.3,.4,1) both;transition:opacity .4s,transform .4s;}
.bd-toast.me .bt-ico{background:#dbeaff;} .bd-toast.opp .bt-ico{background:#ffe1db;}
.bd-toast b{font-weight:900;}
.bd-toast .bt-ico{flex:none;width:20px;height:20px;border-radius:50%;background:#eef1f8;display:grid;place-items:center;font-size:11px;}
.bd-toast.out{opacity:0;transform:translateY(-6px);}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.9);}}
.fly-ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none;transform-origin:0 0;}
.fly-ghost.go{transition:transform .6s cubic-bezier(.45,.05,.3,1);}
.fly-ghost > .card{width:100%!important;height:100%!important;box-shadow:0 8px 20px rgba(0,0,0,.35)!important;}

/* ═══ LAST BALL + MATCH LOG ═══ */
.sb-mid{cursor:pointer;}
/* recap pill straddles the scoreboard's bottom edge; the opponent's hand row makes room for it */
.sb-last{position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);z-index:7;display:none;align-items:center;gap:6px;
  max-width:92%;background:#2b3553;color:#fff;border-radius:999px;padding:3px 10px 3px 4px;cursor:pointer;
  font:700 10.5px var(--bd-fn);white-space:nowrap;box-shadow:0 2px 8px rgba(30,40,80,.3);}
.sb-last.on{display:flex;animation:toastIn .35s cubic-bezier(.2,1.3,.4,1) both;}
.sb-last span{overflow:hidden;text-overflow:ellipsis;}
.sb-last b{font-weight:900;}
.sb-last em{font-style:normal;font-weight:900;color:#9cc7ff;flex:none;}
.sb-last > i,.log-row > i{flex:none;width:18px;height:18px;border-radius:50%;background:#eef1f8;color:var(--bd-ink2);
  font:900 10px/18px var(--bd-fn);font-style:normal;text-align:center;}
:is(.sb-last,.log-row) > i.r{background:var(--bd-me);color:#fff;} :is(.sb-last,.log-row) > i.b{background:#f5a524;color:#fff;}
:is(.sb-last,.log-row) > i.w{background:#ff5a5a;color:#fff;}
#s-board .opp-hand{height:54px;padding-top:16px;}
#log-overlay{background:rgba(25,35,70,.55);align-items:flex-end;justify-content:center;z-index:260;}
.log-inn{font:800 10px var(--bd-fn);color:var(--bd-ink2);letter-spacing:1px;text-transform:uppercase;margin:12px 0 4px;}
.log-inn:first-child{margin-top:0;}
.log-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--bd-line);}
.log-row > i{width:24px;height:24px;font-size:12px;line-height:24px;margin-top:1px;}
.log-body{flex:1;min-width:0;}
.log-top{font:700 13px/1.3 var(--bd-fn);color:var(--bd-ink);}
.log-top b{font-weight:900;}
.log-who{font:800 9px var(--bd-fn);color:var(--bd-ink2);background:#eef1f8;border-radius:999px;padding:1px 6px;margin-left:2px;vertical-align:1px;}
.log-why{font:700 12px/1.3 var(--bd-fn);color:var(--bd-ink2);margin-top:1px;}
.log-extra{font:600 11px/1.3 var(--bd-fn);color:#8a93ab;margin-top:2px;}

/* ═══ OPPONENT STATUS on their face-down slot ═══ */
#opp-active-card.choosing{background:rgba(255,255,255,.3)!important;border:2.5px dashed rgba(255,255,255,.95)!important;box-shadow:none!important;}
#opp-active-card.choosing::after{content:'Choosing…';position:absolute;inset:0;display:grid;place-items:center;
  font:800 11px var(--bd-fn);color:var(--bd-ink2);animation:oppThink 1.2s ease-in-out infinite alternate;}
@keyframes oppThink{from{opacity:.45;}to{opacity:1;}}
#opp-active-card.locked::after{content:'✓ Locked in';position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;
  background:#15994f;color:#fff;border:2px solid #fff;border-radius:999px;padding:2px 9px;font:900 10px var(--bd-fn);
  box-shadow:0 2px 6px rgba(0,0,0,.3);animation:lockPop .4s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes lockPop{from{transform:translateX(-50%) scale(.3);opacity:0;}}
/* keep the opponent's status readable while other steps dim the board */
#s-board #opp-active-card.focus-dim:is(.choosing,.locked){opacity:.8;}

/* ═══ DICE BEATS (Reveal → Modifiers → Roll → Result → Changes) ═══ */
#d-particles{z-index:0!important;} /* confetti behind the panels, never over text */
.d-beats{padding:12px 16px 0;text-align:center;}
.d-steps{display:flex;justify-content:center;gap:4px;}
.d-steps > i{font:800 9px var(--bd-fn);font-style:normal;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.08);border-radius:999px;padding:3px 8px;transition:background .25s,color .25s;}
.d-steps > i.done{color:rgba(255,255,255,.75);}
.d-steps > i.on{background:#fff;color:var(--bd-ink);}
.d-beat{font:800 15px/1.3 var(--bd-fn);color:#fff;min-height:20px;margin-top:6px;}
.d-beat b{font-weight:900;color:#ffd166;}
.d-beat.pop{animation:toastIn .3s ease-out both;}
#dice-overlay #d-roll-lbl{display:none;} /* the beat caption says it now */
#dice-overlay .field.lifted{padding-top:4px;}
/* modifiers sit off the dice until the Roll beat, then pop on */
#d-phase2.mods-pending .dmod{visibility:hidden;}
#dice-overlay .dmod.pop{animation:weakPop2 .45s cubic-bezier(.2,1.6,.4,1) both;}
@keyframes weakPop2{from{transform:scale(.2);opacity:0;}}
/* folded effects list: one tappable line */
#d-phase1.compact .d-effects{padding:7px 12px;cursor:pointer;}
#d-phase1.compact:not(.expanded) :is(.d-effect-row,.d-eff-section){display:none!important;}
#d-phase1.compact .d-effects-title::after{content:' · ' attr(data-n);color:#8a93ab;letter-spacing:0;text-transform:none;font-weight:700;}

/* ═══ TURN GUIDANCE ═══ */
#s-board .wtag{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:999px;background:var(--bd-me-d);color:#fff;
  font:900 9.5px/1.5 var(--bd-fn);letter-spacing:.3px;vertical-align:1px;}
/* why a hand card is dimmed (label sits on the wrapper so it isn't faded with the card) */
#hand-scroll > [data-why]::after{content:attr(data-why);position:absolute;left:50%;top:38%;transform:translateX(-50%);z-index:5;
  white-space:nowrap;background:#2b3553;color:#fff;border-radius:999px;padding:2px 8px;font:800 9.5px var(--bd-fn);
  box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none;}

/* ═══ SCOREBOARD CONTEXT ═══ */
#s-board .score-num.yet{font:800 13px/24px var(--bd-fn);color:var(--bd-ink2);}
.sb-wk{align-items:center;}
.sb-wk i.left{background:#2fbf6a;}
.sb-wk i.lost{background:#fff;box-shadow:inset 0 0 0 1.5px #ff5a5a;position:relative;}
.sb-wk i.lost::after{content:'';position:absolute;left:1px;right:1px;top:3px;height:1.5px;background:#ff5a5a;transform:rotate(-45deg);}
.wk-txt{font:800 9px var(--bd-fn);color:var(--bd-ink2);white-space:nowrap;}
.sb-need{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;color:#fff;text-transform:none;letter-spacing:0;font-weight:900;}
.sb-need.me{background:var(--bd-me-d);} .sb-need.opp{background:var(--bd-opp-d);}