/* ═══════════════════════════════════════════ MATCH GUIDANCE on the tabletop board Restyles the "easier to follow" features (dice stakes + beats, narration, recap + log, opponent status, step tags, scoreboard context) for the tabletop UI in match.css / game.css. Loaded last so it can re-show the few header bits the tabletop hides and place new rows in the result sheet. ═══════════════════════════════════════════ */ /* ── Result sheet: beats header + runs-table row ── */ /* Header strip sits directly on top of the sheet (#d-stage is a bottom-aligned column) */ #dice-overlay .d-beats{flex:none;padding:10px 16px 8px;background:#f9fbfffa;border:1px solid #d5e0ed;border-bottom:0; border-radius:24px 24px 0 0;box-shadow:0 -8px 36px #38577b18;pointer-events:none;} #dice-overlay .d-steps{gap:3px;} #dice-overlay .d-steps > i{font:600 8px var(--fb);letter-spacing:.4px;color:var(--ui-muted);background:#eef3f9;padding:3px 7px;} #dice-overlay .d-steps > i.done{color:var(--ui-muted);} #dice-overlay .d-steps > i.on{background:#47799f;color:#fff;} #dice-overlay .d-beat{font:600 13px/1.35 var(--fb);color:var(--ui-ink);margin-top:6px;min-height:18px;} #dice-overlay .d-beat b{color:var(--ui-ink);font-weight:700;} #dice-overlay .d-beat b.bad{color:#c23b3b;} #dice-overlay .d-beat b.good{color:#1c8a55;} #dice-overlay.choosing-target .d-beats{display:none;} #dice-overlay .d-stakes{display:none;} /* its text is the Roll beat's caption */ #dice-overlay .d-scroll{row-gap:4px;} #dice-overlay #d-phase2l{grid-column:1/-1;grid-row:2;} #dice-overlay #d-phase4{grid-row:3;} #dice-overlay #d-phase1{grid-row:4;} #dice-overlay .d-ladder-cap{color:var(--ui-muted);font:500 8px var(--fb);letter-spacing:.6px;margin-top:2px;} #dice-overlay #d-phase2l{align-self:stretch;} #dice-overlay .d-ladder{flex-wrap:nowrap;gap:4px;margin-top:3px;width:100%;} #dice-overlay .d-ladder > div{background:#eef3f9;color:var(--ui-text);min-width:0;flex:1;padding:3px 2px;border-radius:7px;} #dice-overlay .d-ladder b{font:650 12px var(--fb);} #dice-overlay .d-ladder small{font:500 7.5px var(--fb);opacity:.9;white-space:nowrap;} #dice-overlay .d-ladder > .hit{background:#47799f;color:#fff;transform:scale(1.08);box-shadow:none;} #dice-overlay .dbase{color:var(--ui-muted);font:500 8.5px var(--fb);} #dice-overlay .dmod.higher{color:#1c8a55;} #dice-overlay .dmod.lower{color:#c23b3b;} /* ── Header: wickets left / need / target beside each score; last ball on line 2 ── */ #s-board .sb-meta{display:flex;gap:4px;align-items:center;} #s-board .sb-meta .ball-badge{display:none;} #s-board .sb-wk{display:flex;gap:3px;align-items:center;} #s-board .sb-wk i{width:6px;height:6px;} #s-board .sb-wk i.lost::after{top:2px;} #s-board .wk-txt{font:500 9px var(--fb);color:var(--ui-muted);} #s-board .sb-need{font:600 9px var(--fb);padding:1px 6px;margin-left:2px;} #s-board .sb-need.me{background:#47799f;} #s-board .sb-need.opp{background:#b35a4a;} #s-board .score-num.yet{font:500 11px/17px var(--fb);color:var(--ui-muted);} #s-board .sb-last{left:auto;right:16px;bottom:0;transform:none;max-width:52%;background:none;color:var(--ui-text);box-shadow:none; padding:0;gap:4px;font:500 9px var(--fb);} #s-board .sb-last.on{animation:none;} #s-board .sb-last b{font-weight:650;color:var(--ui-ink);} #s-board .sb-last em{color:var(--ui-muted);font-weight:650;} #s-board .sb-last > i{width:14px;height:14px;font:650 8px/14px var(--fb);background:#eef3f9;color:var(--ui-text);} #s-board .sb-last > i.r{background:#47799f;} #s-board .sb-last > i.b{background:#d99a2b;} #s-board .sb-last > i.w{background:#c23b3b;} .log-row > i.r{background:#47799f;} .log-row > i.b{background:#d99a2b;} .log-row > i.w{background:#c23b3b;} #s-board .opp-hand{padding-top:0;} #log-overlay .dsheet{font-family:var(--fb);} /* ── Hint bar: step tag + dimmed-card reasons ── */ #s-board .wtag{background:#47799f;font:600 8.5px/1.6 var(--fb);letter-spacing:.2px;padding:0 7px;margin-right:6px;vertical-align:1px;} #hand-scroll > [data-why]::after{top:44%;background:#294465;font:600 9px var(--fb);padding:2px 7px;} /* ── Opponent status on their face-down card ── */ #opp-active-card.choosing{background:#ffffff40!important;border:1px dashed #b9c8da!important;box-shadow:none!important;} #opp-active-card.choosing::after{font:500 10px var(--fb);color:var(--ui-muted);} #opp-active-card.locked::after{background:#2f8f6a;border:2px solid #fff;font:600 9.5px var(--fb);padding:2px 9px;bottom:12px;} /* ── Narration toasts ── */ .bd-toast{font:500 11.5px/1.3 var(--fb);color:var(--ui-ink);box-shadow:0 4px 14px #294c7526;} .bd-toast b{font-weight:650;} .bd-toast.me .bt-ico{background:#e3edf7;} .bd-toast.opp .bt-ico{background:#f7e6e1;} /* ── WEAK flag on face-off cards ── */ .weak-flag{background:#c23b3b;border-width:1.5px;border-radius:6px;} .weak-flag b{font:650 12px var(--fb);} .weak-flag small{font:500 8.5px var(--fb);} /* ── Match log entry in the ••• menu ── */ #club-match-menu .match-log-btn{width:100%;margin-top:8px;min-height:44px;border:1px solid #d5e0ed;border-radius:14px;background:#f5f8fc; color:#294465;font:600 12px var(--fb);cursor:pointer;} /* ── Narration toasts: top of the pitch, above their bench (moved into .bd-arena by js/narrate.js) ── */ #s-board .bd-arena > .bd-toasts{position:absolute;left:18px;right:18px;top:6px;bottom:auto;transform:none;z-index:40;} /* ── Face-off side by side: [their support][their card] | [your card][your support] ── (the stacked layout took ~340px of height; this row is one card tall) */ #s-board .field{flex-direction:row;height:auto;min-height:calc(var(--ah) + 12px);gap:12px;padding:6px 0;justify-content:center;align-items:center;} #s-board .field-left,#s-board .field-right{flex:1 1 0;width:auto;height:var(--ah);gap:8px;} #s-board .field-left{justify-content:flex-end;} #s-board .field-right{justify-content:flex-start;} #s-board .sup-col,#s-board #opp-sup-wrap{position:static;left:auto;top:auto;bottom:auto;align-self:center;margin:0;} #s-board .compact-board .field{height:auto;} /* ── Support slot: visible drop target during the support step ── */ #s-board .sup-slot{width:var(--sw,54px);height:var(--sh,76px);} #s-board .bd-frame{--sw:54px;--sh:76px;} #s-board[data-phase="support"] .sup-slot:has(.sup-slot-txt){visibility:visible;display:grid;place-items:center; border:1.5px dashed #91cdd0;background:#ffffffa6;border-radius:8px;} #s-board .sup-slot-txt{font:500 8.5px/1.3 var(--fb);color:var(--ui-muted);text-align:center;padding:2px;} #s-board .sup-slot.hover{border-color:#47799f!important;background:#e3edf7!important;} /* ═══ CARD TYPES: frame + name band in the type colour, type badge, weakness pill ═══ Same palette and glyphs as the card design (css/cards.css): Power = coral bolt · Technical = cyan compass · Control = yellow crosshair · All-rounder = violet star. Support = green · Captain = gold. Icons are CSS masks so they take any colour. */ .ti-power{--tc:var(--cs-power);--ico:var(--ico-power);} .ti-technical{--tc:var(--cs-technical);--ico:var(--ico-technical);} .ti-control{--tc:var(--cs-control);--ico:var(--ico-control);} .ti-all{--tc:var(--cs-all);--ico:var(--ico-all);} .card.st-power{--tc:var(--cs-power);} .card.st-technical{--tc:var(--cs-technical);} .card.st-control{--tc:var(--cs-control);} .card.st-all{--tc:var(--cs-all);} .card.sup{--tc:var(--cs-support);} .card.cap{--tc:var(--cs-captain);} /* glyph on its own (weakness pill) */ .ti{display:inline-block;width:11px;height:11px;flex:none;background:var(--tc); -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;} /* round badge on the card: white glyph on the type colour */ .ti.type-ico{position:absolute;top:-6px;left:-6px;width:21px;height:21px;border-radius:50%;z-index:3; -webkit-mask:none;mask:none;background:var(--tc);border:2px solid #fff;box-shadow:0 1px 3px #193a5030;} .ti.type-ico::after{content:'';position:absolute;inset:3px;background:#fff; -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;} :is(.csm,.sup-slot .card,#opp-sup-slot .card,#w2-cards .card) .ti.type-ico{width:17px;height:17px;top:-5px;left:-5px;} .cap-pill .ti.type-ico,.discard-pile .ti.type-ico,#dsheet-grid .ti.type-ico{display:none;} /* frame + name band in the type colour */ :is(#s-board,#dice-overlay,#discard-overlay) .card:is(.st-power,.st-technical,.st-control,.st-all,.sup,.cap){border:2.5px solid var(--tc)!important;} :is(#s-board,#dice-overlay,#discard-overlay) .card:is(.st-power,.st-technical,.st-control,.st-all,.sup,.cap) .cfoot{ background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--tc) 55%,transparent) 30%,var(--tc) 70%)!important;} /* weakness pill (Pocket shows "weakness [icon] +20"; here: Weak [icon] −1) */ #s-board .card .wk-line,#dice-overlay .card .wk-line{display:none!important;} .card .wk-pill{display:inline-flex;align-items:center;gap:2px;margin-top:3px;background:#fffffff0;border-radius:999px; padding:1px 5px 1px 4px;font:650 8.5px/1.2 var(--fb,var(--font-ui));color:#c23b3b;box-shadow:0 1px 2px #0002;} .card .wk-pill .wk-lbl{font-weight:500;color:var(--ui-muted);margin-right:1px;} .card .wk-pill .ti{width:10px;height:10px;} :is(.csm,#w2-cards .card) .wk-pill{padding:0 3px;margin-top:2px;font-size:7px;} :is(.csm,#w2-cards .card) .wk-pill .wk-lbl{display:none;} :is(.csm,#w2-cards .card) .wk-pill .ti{width:8px;height:8px;} .cap-pill .wk-pill,.discard-pile .wk-pill{display:none;} /* ═══ CAPTAINS beside each bench (moved there by js/board.js) ═══ */ #s-board .zone-row > .cap-pill.cap-side{display:block!important;position:absolute;left:14px;top:50%;transform:translateY(-50%); width:48px;height:68px;padding:0;background:none;border:0;box-shadow:none;cursor:pointer;z-index:2;} #s-board .cap-side .card{width:100%;height:100%;border-width:2.5px;} #s-board .cap-side .card .cname{font-size:7.5px!important;} #s-board .cap-side .card .cfoot{padding:10px 2px 3px!important;} #s-board .cap-side::after{content:'Captain';position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%); font:600 7.5px var(--fb);letter-spacing:.5px;text-transform:uppercase;color:#8a6d16;white-space:nowrap;} #s-board .compact-board .zone-row > .cap-pill.cap-side{width:42px;height:60px;left:10px;} /* ═══ HAND: held fan (positions from layoutHand in js/board.js via --hx/--ht) ═══ */ #s-board .hand-scroll{display:block!important;position:relative;overflow:visible!important;padding:0!important;} #s-board #hand-scroll > [id^="hw"]{position:absolute!important;top:12px!important;left:var(--hx,0)!important;transform:var(--ht,none)!important; transform-origin:50% 100%;transition:left .22s ease,transform .22s ease;} #hand-scroll[data-crowded] > [data-why]::after{display:none;} /* dimming + the hint bar still say what's playable */ #s-board #hand-scroll > [id^="hw"]:hover{z-index:50!important;} /* ═══ DECK + DISCARD for both players: a small column at the right of each bench (captain on the left, piles on the right) ═══ */ #s-board .zone-row > .aux-col{display:flex!important;position:absolute;left:auto;right:12px;width:34px;justify-content:center;align-items:center;} #s-board .zone-row > .aux-col:has(.deck-tile){top:calc(50% - 47px);} /* deck on top */ #s-board .zone-row > .aux-col:has(.discard-pile){top:calc(50% + 3px);} /* discard below */ #s-board .zone-row .deck-tile{width:31px;height:44px;opacity:1;cursor:default;} #s-board .pzone .deck-tile{cursor:pointer;} #s-board .zone-row .discard-pile{width:31px;height:44px;opacity:.9;filter:grayscale(.25);} #s-board .zone-row .discard-pile.empty{border:1.5px dashed #b9c8da;border-radius:5px;opacity:.8;} #s-board .zone-row .discard-pile .card .cname{display:none;} /* counts as corner badges so the two piles don't collide */ #s-board .zone-row .deck-cnt,#s-board .zone-row .pile-cnt{top:-6px;bottom:auto;left:auto;right:-7px;transform:none;min-width:16px;text-align:center; background:#35564f;color:#fff;font:600 8.5px/14px var(--fb);border-radius:999px;padding:0 4px;z-index:3;} #s-board .zone-row .dp-ico{display:none;} #s-board .zone-row > .aux-col:has(.discard-pile)::after{position:absolute;left:50%;top:calc(100% + 1px); transform:translateX(-50%);font:600 7px var(--fb);letter-spacing:.4px;text-transform:uppercase;color:var(--ui-muted);white-space:nowrap;} #s-board .zone-row > .aux-col:has(.discard-pile)::after{content:'Discard';} /* ═══ OPPONENT'S HAND: a visible fan of card backs under the header ═══ */ #s-board .opp-hand{height:42px!important;min-height:42px!important;padding:4px 0 0!important;opacity:1;overflow:visible;align-items:flex-start;} #s-board .opp-hand .card.back{width:26px;height:37px;margin:0 -4px;border:1.5px solid #fff!important;border-radius:4px;box-shadow:0 1px 3px #304f7233;opacity:1;} #s-board .compact-board .opp-hand{height:34px!important;min-height:34px!important;} #s-board .compact-board .opp-hand .card.back{width:22px;height:31px;} /* ═══ RESULT SHEET, simplified (feedback 2026-10-01): no step tracker / caption, no runs table, no "No modifiers" chips. "Card effects & matchups" is the headline: open at the top, its rows appear one by one during the reveal. The beat timing (js/board.js _diceBeat) still runs underneath; only its strip is hidden. ═══ */ #dice-overlay .d-beats{display:none!important;} #dice-overlay #d-phase2l{display:none!important;} #dice-overlay #d-phase1{grid-column:1/-1;grid-row:1;} #dice-overlay #d-phase2{grid-column:1;grid-row:2;} #dice-overlay #d-phase3{grid-column:2;grid-row:2;} #dice-overlay #d-phase4{grid-column:1/-1;grid-row:3;} #dice-overlay .dmod.fair{display:none;} #dice-overlay #d-phase1 .ball-explainer{margin:0;padding:0;text-align:left;border:0;} #dice-overlay #d-phase1 .ball-explainer > summary{list-style:none;display:flex;align-items:center;gap:6px;padding:0 0 6px; font:650 12px var(--fb);color:var(--ui-ink);cursor:pointer;} #dice-overlay #d-phase1 .ball-explainer > summary::-webkit-details-marker{display:none;} #dice-overlay #d-phase1 .ball-explainer > summary::after{content:'▾';margin-left:auto;color:var(--ui-muted);font-size:11px;} #dice-overlay #d-phase1 .ball-explainer:not([open]) > summary::after{content:'▸';} #dice-overlay #d-phase1 .d-effects{background:#f2f6fb;border:1px solid #dce5ef;border-radius:12px;padding:8px 10px;max-height:150px;overflow:auto;} #dice-overlay #d-phase1 .d-effects-title{display:none;} #dice-overlay #d-phase1 .d-eff-section{font:600 8.5px var(--fb);letter-spacing:.6px;text-transform:uppercase;color:var(--ui-muted);margin-top:4px;} #dice-overlay #d-phase1 .d-effect-row{font:500 12px/1.4 var(--fb);} /* ═══ OPPONENT STATUS without a card on the pitch (feedback 2026-10-05) ═══ A face-down card + "Locked in" read as a brand-new card. Their slot stays an empty outline until the reveal, and says the pick comes from their bench; at the reveal the picked card slides from the bench (js/board.js _flyOppPick). */ #opp-active-card.locked{background:#ffffff40!important;border:1.5px solid #9fd3bd!important;box-shadow:none!important;} #opp-active-card.choosing::after,#opp-active-card.locked::after{position:absolute;top:0;right:0;bottom:0;left:0;transform:none; display:grid;place-items:center;text-align:center;white-space:pre;padding:0;border:0;border-radius:0;background:none;box-shadow:none; font:500 10px/1.5 var(--fb);} #opp-active-card.choosing::after{content:'Choosing from\A their bench…';color:var(--ui-muted);animation:oppThink 1.2s ease-in-out infinite alternate;} #opp-active-card.locked::after{content:'✓ Ready\A from their bench';color:var(--ui-text);font-weight:600;animation:none;} .opp-pick-ghost > .card{width:100%!important;height:100%!important;box-shadow:0 8px 20px #193a5040;}