/* Sam's TV, the game. A full-screen stage over the three.js field, in
   Visa Payments Frontier's pixel language: a near-black dithered lattice,
   pale screens that blink out, blue for what fits, gold only for near misses
   and clue words. Every number the scripts read is a --cb-game-* token here,
   so the local tuner covers the stage, its motion and its colors. */
:root{
  --cb-game-stage:#0a0a0a;--cb-game-lit:#c7edff;--cb-game-fit:#4d9bff;--cb-game-near:#f2cf7a;--cb-game-parked:#5b6b80;--cb-game-cta:#1e6fec;
  --cb-game-grid-base:.04;--cb-game-grid-square:.05;--cb-game-grid-density:.32;--cb-game-grid-twinkle:.6;
  --cb-game-tile:.86;--cb-game-halo:1;--cb-game-pixel:2;--cb-game-dither-levels:18;--cb-game-tilt:58;--cb-game-dpr-cap:1.5;
  --cb-game-boot:600;--cb-game-blink:260;--cb-game-spread:700;--cb-game-jitter:.15;--cb-game-near-flash:320;--cb-game-near-in-opening:0;
  --cb-game-type-cps:90;--cb-game-type-max:600;--cb-game-opening-cps:95;--cb-game-chip:420;--cb-game-deal:40;--cb-game-send:280;
  --cb-game-count-roll:600;--cb-game-idle-fps:24;--cb-game-aisles:1;--cb-game-label-gutter:112;--cb-game-zoom-step:.025;
  --cb-game-register-lead:600;--cb-game-register-scan:420;--cb-game-ghost-step:1300;--cb-game-end-dim:.18;--cb-game-miss:#e8875e;--cb-game-volume:.5;
  --cb-game-panel:rgba(14,14,14,.86);--cb-game-card:#171717;--cb-game-card-hover:#202020;--cb-game-ink:#b9b4ae;--cb-game-caption:#8d8882;
}
html.cbg-lock{overflow:hidden}

.cbg{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--cb-game-stage);color:#fff;overflow:hidden;font:400 16px/1.4 var(--display)}
.cbg::backdrop{background:var(--cb-game-stage)}
.cbg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.cbg-fallback{position:absolute;inset:0;pointer-events:none}
.cbg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cbg [hidden]{display:none!important}

.cbg-ui{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:minmax(300px,348px) minmax(0,1fr) minmax(300px,360px);grid-template-rows:auto minmax(0,1fr);gap:18px 22px;padding:18px 22px 22px;pointer-events:none}
.cbg-ui>*{pointer-events:auto}

/* HUD */
.cbg-hud{grid-column:1/-1;display:flex;align-items:center;gap:24px;min-height:48px}
.cbg-title{margin:0;font:400 13px/1.4 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--cb-game-ink);outline:none}
.cbg-turns{display:flex;align-items:center;gap:14px;margin-left:auto}
.cbg-turn,.cbg-par{display:flex;align-items:baseline;gap:8px;margin:0}
.cbg-turn small,.cbg-par small{font:400 11px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-turn b{font:700 28px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cbg-par b{font:700 18px/1 var(--display);color:var(--cb-game-near)}
.cbg-pips{display:flex;gap:3px;align-items:flex-end}
.cbg-pips i{width:6px;height:12px;background:#262626}
.cbg-pips i.is-used{background:var(--cb-game-lit)}
.cbg-pips i.is-par{height:18px;box-shadow:0 2px 0 var(--cb-game-near)}
.cbg-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#161616;color:#fff;cursor:pointer}
.cbg-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.cbg-close:hover{background:#222}
.cbg-sound{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#161616;color:var(--cb-game-caption);cursor:pointer;transition:background .2s,color .2s}
.cbg-sound:hover{background:#222;color:#fff}
.cbg-sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-sound .is-on,.cbg-sound[aria-pressed="true"] .is-off{display:none}
.cbg-sound[aria-pressed="true"] .is-on{display:block}
.cbg-sound[aria-pressed="true"]{color:#fff}
.cbg-sound:focus-visible,.cbg-close:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}

/* Left: Sam, the household, the needs */
.cbg-left{display:flex;flex-direction:column;gap:18px;min-height:0;padding:18px;border-radius:18px;background:var(--cb-game-panel)}
.cbg-sam{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;align-items:start}
.cbg-portrait,.cbg-person{position:relative;margin:0}
.cbg-face{width:76px;height:76px;overflow:hidden;border-radius:14px;background:#111}
.cbg-face canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.cbg-portrait figcaption,.cbg-person figcaption{margin-top:6px;font:400 10px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption);text-align:center}
.cbg-bubble{position:relative;padding:14px 16px;border-radius:4px 16px 16px 16px;background:#1b1b1b;min-height:76px;transition:opacity .2s}
.cbg-bubble.is-dead .cbg-says{color:var(--cb-game-caption)}
.cbg-you{margin:0 0 8px;font:400 13px/1.4 var(--display);color:var(--cb-game-ink)}
.cbg-you b{margin-right:6px;font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-aside{margin:0 0 8px;font:italic 400 13px/1.4 var(--display);color:var(--cb-game-caption)}
.cbg-says{margin:0;font:400 16px/1.45 var(--display);color:#fff}
.cbg-mark{background:none;color:inherit}
.cbg-mark.is-need,.cbg-mark.is-person{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--cb-game-near)}
.cbg-mark.is-hint{text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(242,207,122,.55)}

.cbg-household{display:flex;gap:14px;min-height:0}
.cbg-household:empty{display:none}
.cbg-person .cbg-face{width:58px;height:58px;border-radius:12px;background:#121212}
.cbg-person{transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.cbg-person.is-entering{opacity:0;transform:translateY(8px)}
.cbg-person.is-locked .cbg-face{filter:brightness(.72)}
.cbg-person.is-cameo .cbg-face{filter:brightness(.6) grayscale(1)}
/* The padlock badge. Its box is scoped to the figure because html.cbg-lock is
   the scroll lock: on <html> the box shrank the page under the game, and on
   phones the story's canvas then grew every frame. The svg rule stays
   unscoped: while the game is open it sizes the stage's icons, as shipped. */
.cbg-person .cbg-lock{position:absolute;right:-6px;top:40px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#262626;color:var(--cb-game-ink)}
.cbg-lock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.cbg-person.is-pointed .cbg-face,.cbg-portrait.is-pointed .cbg-face{animation:cbg-point 1.2s cubic-bezier(.2,.8,.2,1)}
@keyframes cbg-point{0%,100%{box-shadow:0 0 0 0 rgba(77,155,255,0)}30%{box-shadow:0 0 0 6px rgba(77,155,255,.55)}}

.cbg-label{margin:0 0 10px;font:400 11px/1.4 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-needs-wrap{margin-top:auto}
.cbg-needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cbg-need{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;min-height:44px;padding:8px 10px;border-radius:10px;background:#141414;color:var(--cb-game-caption);transition:background .3s,color .3s}
.cbg-need-icon{display:grid;place-items:center;width:28px;height:28px}
.cbg-need-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-need small{font:400 11px/1.25 var(--mono);letter-spacing:.6px;text-transform:uppercase}
.cbg-need.is-found{background:#14295e;color:#fff;animation:cbg-pop .5s cubic-bezier(.2,.8,.2,1)}
.cbg-need.is-missed{background:#2a2414;color:var(--cb-game-near)}
@keyframes cbg-pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:none}}

/* The field slot: the count and the aisle labels sit over the canvas */
.cbg-slot{position:relative;min-height:0}
.cbg-count{position:relative;z-index:2;display:flex;align-items:baseline;gap:12px;margin:0;pointer-events:none}
.cbg-count b{font:700 56px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cbg-count span{font:400 12px/1.3 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-game-ink)}
.cbg-slot.is-fits .cbg-count b{color:var(--cb-game-fit)}
.cbg-slot.is-wiped .cbg-count b{color:var(--cb-game-caption)}
.cbg-labels{position:absolute;inset:0;pointer-events:none}
.cbg-aisle{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px;font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption);white-space:nowrap;transition:color .4s}
.cbg-aisle b{min-width:2ch;font:700 12px/1 var(--display);letter-spacing:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums;transition:color .4s}
.cbg-aisle.is-empty,.cbg-aisle.is-empty b{color:#4a4744}
.cbg-tip{position:absolute;left:0;top:0;z-index:3;width:244px;padding:12px 14px;border-radius:12px;background:#121212;box-shadow:0 12px 32px rgba(0,0,0,.55);pointer-events:none}
.cbg-tip b{display:block;font:600 15px/1.3 var(--display)}
.cbg-tip small{display:block;margin-top:4px;font:400 12px/1.35 var(--display);color:var(--cb-game-ink)}
.cbg-tip-status{margin:0 0 6px;font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-tip ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.cbg-tip li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:6px;font:400 12px/1.3 var(--display);color:var(--cb-game-ink)}
.cbg-tip li span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cbg-tip li.is-ok b{color:var(--cb-game-fit)}
.cbg-tip li.is-miss b{color:#e8875e}
.cbg-tip.is-pinned{pointer-events:auto}
.cbg-tip-pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:40px;margin-top:12px;border:0;border-radius:999px;background:var(--cb-game-cta);color:#fff;font:600 14px/1 var(--display);cursor:pointer;transition:background .2s}
.cbg-tip-pick:hover{background:#2f7ff5}
.cbg-tip-pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}

/* Right: the hand */
.cbg-right{display:flex;flex-direction:column;gap:14px;min-height:0;padding:18px;border-radius:18px;background:var(--cb-game-panel)}
.cbg-ask{display:flex;flex-direction:column;flex:1;min-height:0}
.cbg-hand{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;overflow-y:auto;min-height:0}
.cbg-card{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border:0;border-radius:12px;background:var(--cb-game-card);color:#fff;font:400 15px/1.35 var(--display);text-align:left;cursor:pointer;transition:background .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.cbg-card:hover{background:var(--cb-game-card-hover);transform:translateY(-1px)}
.cbg-card:active{transform:scale(.985)}
.cbg-card:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbg-card-to{width:34px;height:34px;overflow:hidden;border-radius:9px;background:#0f0f0f}
.cbg-card-to img{width:100%;height:100%;display:block;image-rendering:pixelated}
.cbg-card-icon svg{width:18px;height:18px;fill:none;stroke:var(--cb-game-caption);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-card.is-new::after{content:"";position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--cb-game-near)}
.cbg-card.is-urgent{background:#1b2c55}
.cbg-note{margin:14px 0 0;font:400 13px/1.4 var(--display);color:var(--cb-game-ink)}
.cbg-cart,.cbg-ring{display:flex;align-items:center;justify-content:center;gap:10px;flex:none;min-height:52px;padding:0 18px;border:0;border-radius:999px;color:#fff;font:600 15px/1 var(--display);cursor:pointer;transition:background .2s,color .2s}
.cbg-cart svg,.cbg-ring svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-cart{position:relative;background:#222}
.cbg-cart:hover{background:#2c2c2c}
.cbg-cart.is-ready,.cbg-ring{background:var(--cb-game-cta)}
.cbg-cart.is-ready:hover,.cbg-ring:hover{background:#2f7ff5}
.cbg-cart.is-nudged::after{content:"";position:absolute;right:18px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--cb-game-near)}
.cbg-ring:disabled{background:#222;color:var(--cb-game-caption);cursor:default}
.cbg-cart:focus-visible,.cbg-ring:focus-visible,.cbg-link:focus-visible,.cbg-tip-pick:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbg-link{padding:4px 0;border:0;background:none;color:var(--cb-game-ink);font:400 13px/1.3 var(--display);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cbg-link:hover{color:#fff}

/* Checkout: what still fits, cheapest first */
.cbg-checkout{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.cbg-checkout-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cbg-checkout-title{margin:0;font:600 20px/1.2 var(--display);outline:none}
.cbg-hint{margin:0;font:400 13px/1.4 var(--display);color:var(--cb-game-ink)}
.cbg-picks{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto}
.cbg-pick{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--cb-game-card);cursor:pointer;transition:background .2s}
.cbg-pick:hover{background:var(--cb-game-card-hover)}
.cbg-pick input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.cbg-pick-dot{width:18px;height:18px;margin-top:1px;border-radius:50%;background:#2c2c2c;transition:background .2s,box-shadow .2s}
.cbg-pick:has(input:checked){background:#14295e}
.cbg-pick:has(input:checked) .cbg-pick-dot{background:#fff;box-shadow:inset 0 0 0 5px var(--cb-game-cta)}
.cbg-pick:has(input:focus-visible){outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbg-pick-body b{display:block;font:600 14px/1.3 var(--display)}
.cbg-pick-body small{display:block;margin-top:3px;font:400 12px/1.35 var(--display);color:var(--cb-game-ink)}
.cbg-pick.is-out b,.cbg-pick.is-parked b,.cbg-pick.is-none b{color:var(--cb-game-ink)}
.cbg-pick-needs{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cbg-pick-needs span{display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 5px;border-radius:999px;background:#0e0e0e;font:700 11px/1 var(--display)}
.cbg-pick-needs svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-pick-needs .is-ok{color:var(--cb-game-fit)}
.cbg-pick-needs .is-miss{color:#e8875e}

/* The ending: the register center stage, then the AI runs, the recorded runs and sharing */
.cbg-show{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:12px;pointer-events:none}
.cbg-show>*{pointer-events:auto}
.cbg-show[data-kind="ghost"]{place-items:end center}
.cbg-show.is-instant *{animation:none!important}
.cbg-belt{position:absolute;left:0;top:0;z-index:6;width:16px;height:12px;border-radius:2px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.8);pointer-events:none}

.cbg-register,.cbg-board{width:min(460px,100%);max-height:100%;overflow:auto;box-sizing:border-box;padding:22px 24px 20px;border-radius:18px;background:#0f0f0f;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.cbg-register-kicker{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:400 11px/1 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-register-kicker svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-register-tv{margin:0;font:600 22px/1.2 var(--display);outline:none}
.cbg-register-sub{margin:4px 0 16px;font:400 13px/1.35 var(--display);color:var(--cb-game-ink)}
.cbg-tape{display:flex;flex-direction:column;gap:6px;margin:0;padding:14px 0;list-style:none;border-top:1px dashed #2c2c2c;border-bottom:1px dashed #2c2c2c}
.cbg-scan{--at:calc((var(--cb-game-register-lead) + var(--i) * var(--cb-game-register-scan)) * 1ms);position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto 56px;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;background:#161616;overflow:hidden;font:400 13px/1.3 var(--display);animation:cbg-scan-in .26s ease-out both;animation-delay:var(--at)}
.cbg-scan::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(199,237,255,.22),transparent);transform:translateX(-100%);animation:cbg-sweep .34s linear both;animation-delay:var(--at)}
.cbg-scan-icon{display:grid;place-items:center}
.cbg-scan-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-scan-label small{display:block;margin-top:2px;font-size:11px;color:var(--cb-game-caption)}
.cbg-scan-found{font:400 10px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--cb-game-caption);text-align:right}
.cbg-scan-mark{justify-self:center;font:700 16px/1 var(--display);animation:cbg-stamp-in .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--at) + 260ms)}
.cbg-scan.is-ok .cbg-scan-mark{color:var(--cb-game-fit)}
.cbg-scan.is-miss,.cbg-scan.is-lucky{animation:cbg-scan-in .26s ease-out both,cbg-tint .3s ease-out both;animation-delay:var(--at),calc(var(--at) + 260ms)}
.cbg-scan.is-miss{background:#2a1a12}
.cbg-scan.is-miss .cbg-scan-mark{color:var(--cb-game-miss)}
.cbg-scan.is-lucky{background:#2a2414}
.cbg-scan.is-lucky .cbg-scan-mark{padding:4px 7px;border-radius:999px;background:var(--cb-game-near);color:#1a1405;font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.cbg-scan.is-known .cbg-scan-mark,.cbg-scan.is-unknown .cbg-scan-mark{color:var(--cb-game-caption)}
.cbg-total{--at:calc((var(--cb-game-register-lead) + 6 * var(--cb-game-register-scan) + 200) * 1ms);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:16px 0 6px;animation:cbg-total-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--at)}
.cbg-total b{font:700 30px/1.1 var(--display);letter-spacing:-.01em}
.cbg-total.is-G b{color:var(--cb-game-fit)}
.cbg-total.is-B b,.cbg-total.is-W b{color:var(--cb-game-miss)}
.cbg-total small{font:400 12px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--cb-game-ink);white-space:nowrap}
.cbg-register-why{margin:0;font:400 14px/1.45 var(--display);animation:cbg-fade .4s ease-out both;animation-delay:calc((var(--cb-game-register-lead) + 6 * var(--cb-game-register-scan) + 500) * 1ms)}
@keyframes cbg-scan-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes cbg-sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes cbg-stamp-in{0%{opacity:0;transform:scale(1.6)}100%{opacity:1;transform:none}}
@keyframes cbg-tint{from{background:#161616}}
@keyframes cbg-total-in{0%{opacity:0;transform:scale(1.15)}60%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:none}}
@keyframes cbg-fade{from{opacity:0}to{opacity:1}}

/* The snapshot board: 15 models × 3 runs, no ranks */
.cbg-board{width:min(560px,100%);padding:20px 22px}
.cbg-board-you{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 16px;padding:10px 12px;border-radius:10px;background:#171717;font:400 14px/1.3 var(--display)}
.cbg-board-you b{font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-board-you small{flex-basis:100%;font-size:11px;color:var(--cb-game-caption)}
.cbg-board-pool{margin:0 0 6px;font:400 11px/1.3 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-board-title{margin:0 0 12px;font:600 22px/1.2 var(--display);outline:none}
.cbg-board-title b{font:700 34px/1 var(--display);color:var(--cb-game-fit);font-variant-numeric:tabular-nums}
.cbg-board-rows{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.cbg-board-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:12px;font:400 13px/1.2 var(--display)}
.cbg-board-model{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cb-game-ink)}
.cbg-board-runs{display:flex;gap:4px}
.cbg-board-runs i,.cbg-board-legend i{display:block;width:22px;height:16px;border-radius:3px;background:#262626}
.cbg-board i.is-pass{background:var(--cb-game-fit)}
.cbg-board i.is-fail{background:var(--cb-game-miss)}
.cbg-board i.is-none{background:repeating-linear-gradient(135deg,#4a4a4a 0 3px,#222 3px 6px)}
.cbg-board-n{font:700 12px/1 var(--display);color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.cbg-board.is-revealed .cbg-board-runs i{animation:cbg-flip .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms + 150ms)}
.cbg-board.is-revealed .cbg-board-n{animation:cbg-fade .3s ease-out both;animation-delay:calc(var(--i) * 70ms + 350ms)}
@keyframes cbg-flip{from{background:#262626;transform:scaleY(.15)}}
.cbg-scale{position:relative;height:64px;margin:0 0 14px}
.cbg-scale-track{position:absolute;left:0;right:0;top:28px;height:6px;border-radius:3px;background:#262626;overflow:hidden}
.cbg-scale-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--to) * 100%);background:var(--cb-game-fit);transform-origin:left;animation:cbg-grow .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes cbg-grow{from{transform:scaleX(0)}}
.cbg-scale-mark{position:absolute;left:calc(var(--at) * 100%);display:flex;flex-direction:column;align-items:center;gap:3px;transform:translateX(-50%);font:400 11px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;animation:cbg-fade .3s ease-out both;animation-delay:.9s}
.cbg-scale-mark b{font-weight:700}
.cbg-scale-mark.is-actual{top:0;color:var(--cb-game-fit)}
.cbg-scale-mark.is-actual::after{content:"";width:2px;height:16px;background:currentColor}
.cbg-scale-mark.is-guess{top:24px;flex-direction:column-reverse;color:#fff}
.cbg-scale-mark.is-guess::after{content:"";width:2px;height:14px;background:currentColor}
.cbg-scale-end{position:absolute;left:0;top:40px;font:400 10px/1 var(--mono);color:var(--cb-game-caption)}
.cbg-scale-end.is-max{left:auto;right:0}
.cbg-board-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;font:400 12px/1.2 var(--display);color:var(--cb-game-ink)}
.cbg-board-legend span{display:inline-flex;align-items:center;gap:6px}
.cbg-board-legend i{width:14px;height:10px}
.cbg-board-foot{margin:10px 0 0;font:400 13px/1.4 var(--display)}

/* A recorded demo run, replayed on your field */
.cbg-ghost{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;width:min(640px,100%);box-sizing:border-box;padding:14px 16px;border-radius:16px;background:rgba(15,15,15,.94);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.cbg-ghost-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0}
.cbg-ghost-who b{font:600 16px/1.2 var(--display)}
.cbg-ghost-who small{flex-basis:100%;font:400 10px/1.2 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-glyph{font-size:18px;line-height:1}
.cbg-ghost-turn{margin:0;font:400 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-ghost-turn b{margin-left:6px;font:700 26px/1 var(--display);letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums}
.cbg-ghost-needs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;min-height:28px;margin:0;padding:0;list-style:none}
.cbg-ghost-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:#14295e;font:400 11px/1 var(--mono);letter-spacing:.6px;text-transform:uppercase;animation:cbg-pop .45s cubic-bezier(.2,.8,.2,1) both}
.cbg-ghost-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-ghost-chip small{font:400 10px/1 var(--mono);letter-spacing:0;text-transform:none;color:#9fb6e8}
.cbg-ghost-chip.is-missed{background:#2a1a12;color:var(--cb-game-miss)}
.cbg-ghost-chip.is-missed small{color:var(--cb-game-miss)}
.cbg-ghost-end{grid-column:1/-1;margin:0;font:400 14px/1.4 var(--display)}
.cbg-ghost-end .is-pass{color:var(--cb-game-fit)}
.cbg-ghost-end .is-fail{color:var(--cb-game-miss)}
.cbg-ghost .cbg-link{grid-column:1/-1;justify-self:start}

/* The ending panel */
.cbg-ending{display:flex;flex-direction:column;gap:22px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.cbg-ending>section{display:flex;flex-direction:column;gap:8px}
.cbg-ending .cbg-label{margin:0}
.cbg-end-verdict{margin:0;font:700 26px/1.15 var(--display);outline:none}
.cbg-end-verdict.is-G{color:var(--cb-game-fit)}
.cbg-end-verdict.is-B,.cbg-end-verdict.is-W{color:var(--cb-game-miss)}
.cbg-end-meta{margin:0;font:400 13px/1.35 var(--display);color:var(--cb-game-ink)}
.cbg-end-why{margin:0;font:400 14px/1.45 var(--display)}
.cbg-ending>section>.cbg-link{align-self:flex-start}
.cbg-end-title{margin:0;font:600 20px/1.2 var(--display);outline:none}
.cbg-end-text{margin:0;font:400 14px/1.45 var(--display);color:var(--cb-game-ink)}
.cbg-end-text b{color:#fff}
.cbg-guess{position:relative;display:grid;align-items:center;height:44px}
.cbg-guess-bar{display:grid;grid-template-columns:repeat(var(--runs,45),minmax(0,1fr));gap:2px;height:26px}
.cbg-guess-bar i{border-radius:2px;background:#262626;transition:background .12s}
.cbg-guess-bar i.is-on{background:#fff}
.cbg-guess input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cbg-guess:has(input:focus-visible){outline:2px solid var(--cb-game-near);outline-offset:4px;border-radius:4px}
.cbg-guess-value{margin:0;font:400 12px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-guess-value b{margin-right:6px;font:700 28px/1 var(--display);letter-spacing:0;color:#fff;font-variant-numeric:tabular-nums}
.cbg-predict .cbg-ring{margin-top:6px}
.cbg-predict>.cbg-link{align-self:center}
.cbg-ghost-buttons{display:grid;gap:8px}
.cbg-ghost-btn{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:var(--cb-game-card);color:#fff;font:400 14px/1.3 var(--display);text-align:left;cursor:pointer;transition:background .2s}
.cbg-ghost-btn:hover{background:var(--cb-game-card-hover)}
.cbg-ghost-btn b{display:block;font-weight:600}
.cbg-ghost-btn small{display:block;margin-top:2px;font-size:12px;color:var(--cb-game-ink)}
.cbg-ghost-play{padding:6px 12px;border-radius:999px;background:#262626;font:600 12px/1 var(--display)}
.cbg-compare{width:100%;border-collapse:separate;border-spacing:0 4px;font:400 12px/1.2 var(--display)}
.cbg-compare caption{margin-bottom:4px;text-align:left;font:400 11px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-compare th,.cbg-compare td{padding:6px 8px;background:#161616;text-align:left;white-space:nowrap}
.cbg-compare thead th{padding-top:0;padding-bottom:2px;background:none;font:400 10px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-compare abbr{text-decoration:none}
.cbg-compare tbody th{font-weight:400;color:#fff}
.cbg-compare tbody th span{display:inline-block;vertical-align:-3px;margin-right:6px}
.cbg-compare tbody th svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-compare tbody tr>:first-child{border-radius:8px 0 0 8px}
.cbg-compare tbody tr>:last-child{border-radius:0 8px 8px 0}
.cbg-compare td.is-never,.cbg-compare td.is-fail{color:var(--cb-game-miss)}
.cbg-compare td.is-pass{color:var(--cb-game-fit)}
.cbg-foot{margin:0;font:400 12px/1.45 var(--display);color:var(--cb-game-caption)}
.cbg-path{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none}
.cbg-step{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:3px;background:#333;font:700 11px/1 var(--display);color:#111}
.cbg-step.is-reveal{background:var(--cb-game-fit)}
.cbg-step.is-clue{background:var(--cb-game-near)}
.cbg-step.is-probe{background:#8796a8}
.cbg-step.is-lure{background:#7a4632}
.cbg-step.is-act{background:var(--cb-game-miss)}
.cbg-step.is-undo{background:#d9d4ce}
.cbg-step.is-buy{width:26px;background:#fff}
.cbg-step.is-buy::after{content:"✓"}
.cbg-step.is-buy.is-fail::after{content:"✗"}
.cbg-path-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font:400 12px/1.2 var(--display);color:var(--cb-game-ink)}
.cbg-path-legend span{display:inline-flex;align-items:center;gap:6px}
.cbg-path-legend .cbg-step{width:12px;height:12px}
.cbg-ideas{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cbg-ideas li{display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:#141414}
.cbg-ideas b{font:600 14px/1.3 var(--display)}
.cbg-ideas span{font:400 13px/1.45 var(--display);color:var(--cb-game-ink)}
.cbg-ideas small{font:400 10px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbg-share-text{margin:0;padding:12px 14px;border-radius:10px;background:#141414;font:400 13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word}
.cbg-share-actions{display:flex;flex-wrap:wrap;gap:8px}
.cbg-share-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#222;color:#fff;font:600 13px/1 var(--display);cursor:pointer;transition:background .2s}
.cbg-share-btn:hover{background:#2c2c2c}
.cbg-share-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbg-share-note{margin:0;min-height:1.2em;font:400 12px/1.4 var(--display);color:var(--cb-game-ink)}
.cbg-share-out:empty{display:none}
.cbg-share-area{width:100%;box-sizing:border-box;padding:10px;border:0;border-radius:10px;background:#141414;color:#fff;font:400 13px/1.5 var(--mono);resize:none}
.cbg-postcard{display:block;width:100%;height:auto;border-radius:10px}
.cbg-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.cbg-ending>.cbg-note{margin:0;font-size:12px;color:var(--cb-game-caption)}
.cbg-ghost-btn:focus-visible,.cbg-share-btn:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}

/* A need in flight from Sam's words to the tray */
.cbg-chip{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#14295e;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none}
.cbg-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cbg-chip b{font:400 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}

/* DOM field (no WebGL) */
.cbg-ft{position:absolute;box-sizing:border-box;border:2px solid transparent;border-radius:3px;transition:background .26s,border-color .26s,opacity .26s}
.cbg-ft.is-hidden{opacity:0}
.cbg-ft.is-lit{background:var(--cb-game-lit);background-clip:padding-box;border-color:var(--cb-game-stage)}
.cbg-ft.is-fit{background:var(--cb-game-fit);background-clip:padding-box;border-color:var(--cb-game-stage)}
.cbg-ft.is-parked{background:transparent;border-color:var(--cb-game-parked)}
.cbg-ft.is-out{background:#161616;background-clip:padding-box;border-color:var(--cb-game-stage)}
.cbg-ft.is-near{animation:cbg-near .5s ease-out both}
.cbg-ft.is-hover{outline:2px solid #fff}
.cbg-ft.is-snap{transition:none}
@keyframes cbg-near{0%{background:var(--cb-game-near)}100%{background:#161616}}
.cbg-ft.is-selected{background:#fff;background-clip:padding-box;box-shadow:0 0 14px rgba(255,255,255,.55)}
.cbg-fallback .cbg-ft:not(.is-selected):not(.is-hidden){opacity:var(--cbg-dim,1)}
.cbg-ft.is-pulse{animation:cbg-ft-pulse 1.1s ease-in-out}
@keyframes cbg-ft-pulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px #fff,0 0 14px rgba(255,255,255,.5)}}

@media (max-width:979px){
  :root{--cb-game-label-gutter:80;--cb-game-tilt:66}
  /* Phones: HUD, field, one compact strip for Sam, his needs and household, then the hand. */
  .cbg-ui{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,32dvh) auto minmax(0,1fr);gap:8px;padding:8px 12px 12px}
  .cbg.is-opening .cbg-says{max-height:12em}
  .cbg-hud{gap:10px;min-height:44px}
  .cbg-sound,.cbg-close{width:40px;height:40px}
  .cbg-title{font-size:10px;letter-spacing:1.2px}
  .cbg-pips{display:none}
  .cbg-turn b{font-size:22px}
  .cbg-slot{grid-row:2}
  .cbg-count b{font-size:36px}
  .cbg-count span{font-size:10px}
  .cbg-left{grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sam sam" "needs house";align-items:center;gap:8px 10px;padding:10px 12px;border-radius:14px}
  .cbg-sam{grid-area:sam;grid-template-columns:40px minmax(0,1fr);gap:10px}
  .cbg-portrait .cbg-face{width:40px;height:40px;border-radius:9px}
  .cbg-portrait figcaption{display:none}
  .cbg-bubble{min-height:0;padding:9px 12px}
  .cbg-you{display:none}
  .cbg-says{max-height:4.35em;overflow-y:auto;font-size:14px}
  .cbg-aside{font-size:12px;margin-bottom:4px}
  .cbg-needs-wrap{grid-area:needs;margin:0}
  .cbg-needs-wrap .cbg-label{display:none}
  .cbg-needs{grid-template-columns:repeat(6,36px);gap:4px}
  .cbg-need{display:grid;place-items:center;grid-template-columns:1fr;width:36px;height:36px;min-height:0;padding:0;border-radius:9px}
  .cbg-need small{display:none}
  .cbg-need-icon{width:22px;height:22px}
  .cbg-need-icon svg{width:18px;height:18px}
  .cbg-household{grid-area:house;gap:6px}
  .cbg-person .cbg-face{width:32px;height:32px;border-radius:8px}
  .cbg-person figcaption{display:none}
  .cbg-person .cbg-lock{top:18px;right:-5px;width:16px;height:16px}
  .cbg-lock svg{width:10px;height:10px}
  .cbg-right{grid-row:4;position:relative;gap:10px;padding:10px 12px 12px;border-radius:14px}
  .cbg-ask .cbg-label{display:flex;align-items:center;min-height:34px;margin:0 0 6px}
  .cbg-card{min-height:44px;font-size:14px;padding:8px 10px}
  /* The way to checkout sits beside "Ask Sam" so the hand keeps the room. */
  .cbg-cart{position:absolute;top:10px;right:12px;min-height:34px;padding:0 14px;gap:6px;font-size:13px}
  .cbg-cart svg{width:15px;height:15px}
  .cbg-cart.is-nudged::after{right:6px;top:4px}
  .cbg-ring{min-height:44px;font-size:14px}
  /* Checkout and the register take the household's rows. */
  .cbg[data-mode="checkout"] .cbg-left,.cbg[data-mode="ending"] .cbg-left{display:none}
  .cbg[data-mode="checkout"] .cbg-right,.cbg[data-mode="ending"] .cbg-right{grid-row:3/5}
  .cbg-checkout-title{font-size:17px}
  .cbg-show{position:static;display:block;padding:0}
  .cbg-register,.cbg-board,.cbg-ghost{width:auto;max-height:none;overflow:visible;padding:14px;border-radius:14px;background:#141414;box-shadow:none}
  .cbg-register-tv{font-size:18px}
  .cbg-total b,.cbg-end-verdict{font-size:22px}
  .cbg-scan{grid-template-columns:20px minmax(0,1fr) auto 48px;gap:8px;padding:7px 8px}
  .cbg-board-title b{font-size:28px}
  .cbg-board-row{gap:8px}
  .cbg-board-runs i{width:20px}
}
/* ===== v2: the showroom TV wall (reference scene, ?v2). Plan: docs/plans/game-v2-2026-10-18.md =====
   A full stage over the wall: HUD and needs on top, Sam's bubble and the count,
   the wall, then a dock of playing cards. Tokens are on the tuner's sliders. */
:root{
  --cb-v2-tilt:7;--cb-v2-tile:.9;--cb-v2-off:520;--cb-v2-slow:3.2;--cb-v2-shimmer:.55;--cb-v2-spot:.7;
  --cb-v2-shake:.22;--cb-v2-push:1.5;--cb-v2-boot:1500;--cb-v2-shelf:.16;--cb-v2-stamp:1400;--cb-v2-row:1.3;
  --cb-v2-fly:1100;--cb-v2-fly-spread:900;--cb-v2-lift:2;--cb-v2-map-tv:1.4;--cb-v2-path-seg:260;--cb-v2-path-gap:420;
  --cb-v2-you:#f2cf7a;--cb-v2-sol:#7ee0c3;--cb-v2-opus:#c39bff;--cb-v2-dpr-cap:2;
  --cb-v2-card-w:136px;--cb-v2-card-h:176px;--cb-v2-send:560;
}
html.cbv2-open{overflow:hidden}
.cbv2 .cbv2-ui{position:relative;z-index:1;height:100%;box-sizing:border-box;display:grid;grid-template-columns:clamp(340px,31vw,460px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud" "chat stage" "chat checkout";gap:12px 20px;padding:14px 24px 16px;pointer-events:none}
.cbv2 .cbv2-ui>*{pointer-events:auto}
.cbv2 .cbv2-ui>.cbv2-fx,.cbv2 .cbv2-ui>.cbv2-coach{pointer-events:none}

/* The top: Sam's requirements to find (the objective), then the scoreboard. */
.cbv2-hud{grid-area:hud;display:flex;align-items:flex-start;gap:20px}
.cbv2-goal{flex:1;min-width:0}
.cbv2-title{margin:0 0 8px;font:400 11px/1.3 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--cb-game-caption);outline:none;white-space:nowrap}
.cbv2-goal-label{display:flex;align-items:baseline;gap:10px;margin:0 0 7px;font:700 14px/1.2 var(--display);color:#fff}
.cbv2-goal-label b{font:400 11px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-near)}
.cbv2-goal-label b.is-all{color:var(--cb-game-fit)}
.cbv2-slots{display:grid;grid-template-columns:repeat(6,minmax(0,132px));gap:8px;margin:0;padding:0;list-style:none}
.cbv2-factor{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:48px;box-sizing:border-box;padding:0 12px;border-radius:12px;background:#151515;color:#3f3c39;font:800 20px/1 var(--display);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.cbv2-factor.is-found{justify-content:flex-start;background:#14295e;color:#fff;font:400 11px/1.15 var(--mono);letter-spacing:.3px;text-transform:uppercase;box-shadow:0 0 24px rgba(77,155,255,.3),0 8px 20px rgba(0,0,0,.35);animation:cbv2-badge .5s cubic-bezier(.2,.8,.2,1) both}
.cbv2-factor svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbv2-factor b{display:-webkit-box;overflow:hidden;font-weight:400;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cbv2-factor.is-landing{visibility:hidden}
/* Padlocked: a requirement only someone else in the house knows, as the intro's chips show. */
.cbv2-factor.is-locked{color:#77716b}
@keyframes cbv2-badge{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none}}
/* The scoreboard: the turn is the round's clock, lit, with par marked on its bar; the TVs left beside it. */
.cbv2-scores{display:grid;grid-template-columns:auto auto;grid-template-areas:"turn count" "race race";gap:8px 10px}
.cbv2-turnbox,.cbv2-countbox{display:grid;align-content:start;gap:4px;margin:0;padding:10px 14px;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.cbv2-turnbox{padding:12px 18px 12px 16px}
.cbv2-turnbox{grid-area:turn;grid-template-columns:auto auto;grid-template-areas:"label label" "n pips" "note note";column-gap:14px;background:linear-gradient(180deg,#17295a,#0f1a38);transition:background .4s}
.cbv2-turnbox .cbv2-box-label{grid-area:label}
.cbv2-box-label{margin:0;font:400 10px/1 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:#9fb6e8}
.cbv2-turn-n{grid-area:n;font:800 56px/1 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.cbv2-pips{grid-area:pips;align-self:end;display:flex;gap:3px;padding:18px 0 8px}
.cbv2-pips i{width:8px;height:20px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .3s}
.cbv2-pips i.is-used{background:#c7edff}
.cbv2-pips i.is-par{position:relative;margin-right:6px}
.cbv2-pips i.is-par::after{content:"";position:absolute;right:-6px;top:-7px;bottom:-7px;width:3px;border-radius:2px;background:var(--cb-game-near);box-shadow:0 0 10px rgba(242,207,122,.6)}
.cbv2-pips i.is-par::before{content:"PAR";position:absolute;right:-16px;top:-20px;font:700 9px/1 var(--mono);letter-spacing:1.2px;color:var(--cb-game-near)}
.cbv2-pips i.is-par~i.is-used{background:var(--cb-game-miss)}
.cbv2-pips i.is-burnt{background:var(--cb-game-miss)}
.cbv2-turn-note{grid-area:note;margin:0;font:400 12px/1.3 var(--mono);letter-spacing:.5px;color:#c9d6f2}
.cbv2-turnbox.is-near{background:linear-gradient(180deg,#4a3a10,#271d08);animation:cbv2-near 1.1s ease-in-out 3}
.cbv2-turnbox.is-near .cbv2-turn-note,.cbv2-turnbox.is-par .cbv2-turn-note{color:var(--cb-game-near)}
.cbv2-turnbox.is-par{background:linear-gradient(180deg,#5a4512,#2d220a)}
@keyframes cbv2-near{50%{box-shadow:0 0 0 3px rgba(242,207,122,.85),0 0 44px rgba(242,207,122,.55)}}
.cbv2-turnbox.is-over{background:linear-gradient(180deg,#5a2510,#2e140a)}
.cbv2-turnbox.is-over .cbv2-box-label,.cbv2-turnbox.is-over .cbv2-turn-note{color:#ffcdb3}
.cbv2-turnbox.is-ticking .cbv2-turn-n{animation:cbv2-tick .5s cubic-bezier(.2,.8,.2,1)}
@keyframes cbv2-tick{0%{transform:translateY(-8px) scale(1.2);color:var(--cb-game-near)}100%{transform:none}}
.cbv2-countbox{grid-area:count;background:#141414}
.cbv2-countbox .cbv2-box-label{color:var(--cb-game-caption)}
.cbv2-count{font:800 40px/1 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.cbv2-count-note{margin:0;max-width:18ch;font:400 11px/1.25 var(--mono);color:var(--cb-game-caption)}
.cbv2-countbox.is-wiped .cbv2-count{color:var(--cb-game-caption)}
.cbv2-race{grid-area:race;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;margin:0;padding:0;list-style:none;font:400 11px/1.2 var(--mono);letter-spacing:.6px;color:var(--cb-game-caption)}
.cbv2-race li{display:flex;align-items:baseline;gap:6px}
.cbv2-race b{font:700 15px/1 var(--display);letter-spacing:0;color:#d8d3cc;font-variant-numeric:tabular-nums}
.cbv2-race .is-you b{color:#fff}
.cbv2-race .cbv2-race-pool{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#6b6762}
.cbv2-hud-buttons{display:flex;gap:8px}
.cbv2-round{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#161616;color:#fff;cursor:pointer;transition:background .2s}
.cbv2-round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cbv2-round .is-on,.cbv2-round[aria-pressed="true"] .is-off{display:none}
.cbv2-round[aria-pressed="true"] .is-on{display:block}
.cbv2-round:hover{background:#222}
.cbv2-round:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}

/* Sam's chat: the whole conversation, newest at the bottom. Your questions sit right, his answers left,
   and your question cards wait under it, like replies (Kyle, 19 Oct). */
.cbv2-chat{grid-area:chat;display:grid;grid-template-rows:auto minmax(180px,1fr) minmax(0,max-content);min-height:0;border-radius:18px;background:rgba(17,17,17,.95);box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden}
.cbv2-chat-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#171717}
.cbv2-portrait{flex:none;margin:0;width:40px;height:40px;overflow:hidden;border-radius:10px;background:#0c0c0c}
.cbv2-face,.cbv2-face canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.cbv2-portrait.is-bouncing{animation:cbv2-bounce .6s cubic-bezier(.2,.8,.2,1)}
@keyframes cbv2-bounce{0%,100%{transform:none}35%{transform:translateY(-6px) scale(1.06)}65%{transform:translateY(1px)}}
.cbv2-chat-head p{display:grid;gap:2px;margin:0}
.cbv2-chat-head b{font:700 15px/1.2 var(--display)}
.cbv2-chat-head small{font:400 10px/1.2 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-near)}
/* You, the shopping agent: a dithered robot in your gold, wherever you appear (Kyle, 19 Oct). */
.cbv2-agent{display:inline-block;flex:none;width:16px;height:16px;border-radius:4px;background:#0c0c0c var(--cbv2-agent) center/cover no-repeat;image-rendering:pixelated;vertical-align:-3px}
.cbv2-agent.is-head{width:40px;height:40px;border-radius:10px}
.cbv2-agent.is-howto{width:52px;height:52px;border-radius:12px}
.cbv2-agent.is-tiny{width:14px;height:14px;margin-right:6px;border-radius:3px}
.cbv2-agent.is-board{float:right;width:40px;height:40px;margin:0 0 8px 12px;border-radius:10px}
.cbv2-chat-head .cbv2-chat-you{margin-left:auto;text-align:right}
.cbv2-chat-you small{color:#cfe0ff}
.cbv2-thread-scroll{display:flex;flex-direction:column-reverse;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;padding:12px 12px 14px}
.cbv2-thread{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cbv2-msg{max-width:88%;box-sizing:border-box;padding:9px 12px 10px;border-radius:14px;font:400 14px/1.45 var(--display);animation:cbv2-msg-in .3s cubic-bezier(.2,.8,.2,1) both}
.cbv2-msg small{display:block;margin-bottom:3px;font:400 9px/1.2 var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.cbv2-msg p{margin:0}
.cbv2-msg.is-sam{justify-self:start;border-top-left-radius:4px;background:#242424;color:#fff}
.cbv2-msg.is-sam small{color:var(--cb-game-near)}
.cbv2-msg.is-you{justify-self:end;border-top-right-radius:4px;background:var(--cb-game-cta);color:#fff}
.cbv2-msg.is-you small{color:#cfe0ff}
.cbv2-msg.is-sent{animation:none}
.cbv2-msg.is-note{justify-self:center;max-width:100%;padding:0 6px;background:none;font:italic 400 12px/1.35 var(--display);color:var(--cb-game-caption);text-align:center}
.cbv2-msg.is-dead{background:#1b1b1b;color:var(--cb-game-caption)}
.cbv2-msg.is-tilting{animation:cbv2-msg-in .3s cubic-bezier(.2,.8,.2,1) both,cbv2-tilt .5s cubic-bezier(.2,.8,.2,1) .3s}
@keyframes cbv2-msg-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes cbv2-tilt{0%,100%{transform:none}30%{transform:rotate(-2.2deg)}60%{transform:rotate(1deg)}}
/* Without WebGL the field's squares become the same TVs (Kyle, 19 Oct): a panel on a pedestal on its
   shelf, playing the showroom's picture (two hills and a sun) when it's on, dark glass when it's off. */
.cbv2 .cbg-ft{--tv:#3a3c40;--sky1:transparent;--sky2:transparent;--ground:transparent;--sun:transparent;border:0;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) 0 79%/100% 1.5px no-repeat!important;box-shadow:none}
.cbv2.is-map .cbg-ft{background:none!important}
.cbv2 .cbg-ft::before{content:"";position:absolute;left:6%;right:6%;top:12%;height:53%;box-sizing:border-box;border:1.5px solid var(--tv);border-radius:2px;background:radial-gradient(circle at 73% 32%,var(--sun) 0 9%,transparent 11%),radial-gradient(ellipse 72% 52% at 22% 100%,var(--ground) 97%,transparent 100%),radial-gradient(ellipse 62% 40% at 80% 100%,var(--ground) 97%,transparent 100%),linear-gradient(var(--sky1),var(--sky2)),#131417;transition:border-color .26s}
.cbv2 .cbg-ft::after{content:"";position:absolute;left:31%;right:31%;top:65%;height:14%;background:linear-gradient(var(--tv),var(--tv)) 50% 0/8% 70% no-repeat,linear-gradient(var(--tv),var(--tv)) 50% 100%/100% 2px no-repeat;transition:background .26s}
.cbv2 .cbg-ft.is-lit{--tv:#c7edff;--sky1:rgba(199,237,255,.5);--sky2:rgba(199,237,255,.2);--ground:rgba(14,16,18,.7);--sun:rgba(199,237,255,.85)}
.cbv2 .cbg-ft.is-fit{--tv:var(--cb-game-fit);--sky1:rgba(77,155,255,.62);--sky2:rgba(77,155,255,.3);--ground:rgba(14,16,18,.62);--sun:rgba(160,205,255,.95)}
.cbv2 .cbg-ft.is-parked{--tv:var(--cb-game-parked);--sky1:rgba(91,107,128,.22);--sky2:rgba(91,107,128,.1);--ground:rgba(14,16,18,.5);--sun:rgba(91,107,128,.35)}
.cbv2 .cbg-ft.is-selected{--tv:var(--cb-game-near);--sky1:rgba(242,207,122,.55);--sky2:rgba(242,207,122,.22);--ground:rgba(14,16,18,.62);--sun:rgba(242,207,122,.95)}
.cbv2 .cbg-ft.is-hover::before{border-color:#fff}

/* The wall's slot: the canvas draws the TVs here; labels and a TV's card sit over it. */
.cbv2-stage{grid-area:stage;position:relative;min-height:0;border-radius:12px;outline:none}
.cbv2-stage:focus-visible{box-shadow:0 0 0 2px rgba(242,207,122,.55)}
.cbv2-labels{position:absolute;inset:0;pointer-events:none}
.cbv2-aisle{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:6px;padding-bottom:3px;font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption);white-space:nowrap;transition:color .4s}
.cbv2-aisle b{min-width:2ch;font:700 12px/1 var(--display);letter-spacing:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums;transition:color .4s}
.cbv2-aisle.is-empty,.cbv2-aisle.is-empty b{color:#4a4744}
.cbv2-tip{position:absolute;left:0;top:0;z-index:5;width:250px;box-sizing:border-box;padding:14px 16px;border-radius:14px;background:#121212;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.cbv2-tip b{display:block;font:600 15px/1.3 var(--display)}
.cbv2-tip small{display:block;margin-top:4px;font:400 12px/1.35 var(--display);color:var(--cb-game-ink)}
.cbv2-tip-status{margin:0 0 6px;font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbv2-tip ul{display:grid;gap:4px;margin:10px 0 0;padding:0;list-style:none}
.cbv2-tip li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:6px;font:400 12px/1.3 var(--display);color:var(--cb-game-ink)}
.cbv2-tip li span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cbv2-tip li.is-ok b{color:var(--cb-game-fit)}
.cbv2-tip li.is-miss b{color:var(--cb-game-miss)}
.cbv2-tip-pick{width:100%;min-height:44px;margin-top:12px;border:0;border-radius:999px;background:var(--cb-game-cta);color:#fff;font:700 15px/1 var(--display);cursor:pointer;box-shadow:0 8px 22px rgba(30,111,236,.4);transition:background .2s,transform .15s}
.cbv2-tip-pick:hover{background:#2f7ff5;transform:translateY(-1px)}
.cbv2-tip-pick:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbv2-tip-mine{margin:12px 0 0;font:600 13px/1.3 var(--display);color:var(--cb-game-near)}

/* The cards sit under the chat in two columns; they scroll when the chat runs short. */
.cbv2-dock{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;padding:12px 12px 10px;background:#141414;box-shadow:0 -14px 28px rgba(0,0,0,.35)}
/* Under the wall: your TV in its window, and Ring it up. */
.cbv2-checkout{grid-area:checkout;display:flex;justify-content:flex-end;align-items:center;gap:12px;min-width:0}
.cbv2-mine{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tv label" "tv name" "tv price" "tv note";align-items:center;justify-items:start;column-gap:12px;row-gap:1px;padding:9px 14px 9px 10px;border:0;border-radius:12px;background:#1d1708;color:#fff;text-align:left;cursor:pointer;box-shadow:0 0 22px rgba(242,207,122,.18)}
.cbv2-mine small{font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-near)}
.cbv2-mine b{max-width:24ch;overflow:hidden;font:600 14px/1.25 var(--display);text-overflow:ellipsis;white-space:nowrap}
.cbv2-mine span{font:400 12px/1.2 var(--display);color:var(--cb-game-ink)}
.cbv2-mine.is-out{background:#24140c;box-shadow:none}
.cbv2-mine .is-out{color:var(--cb-game-miss)}
.cbv2-mine-tv{grid-area:tv;display:block;width:52px;margin:0;color:var(--cb-game-near)}
.cbv2-mine small{grid-area:label}
.cbv2-mine b{grid-area:name}
.cbv2-mine>span:not(.cbv2-mine-tv){grid-area:price}
.cbv2-mine em{grid-area:note}
.cbv2-mine-tv svg{display:block;width:100%;height:auto}
.cbv2-mine-tv .is-glass{fill:#131417}
.cbv2-mine-tv .is-picture{fill:currentColor;opacity:.42}
.cbv2-mine-tv .is-hills{fill:#131417;opacity:.72}
.cbv2-mine-tv .is-sun{fill:currentColor;opacity:.9}
.cbv2-mine-tv .is-bezel{fill:none;stroke:currentColor;stroke-width:3}
.cbv2-mine-tv .is-stand{fill:currentColor}
/* Ruled out: dark glass, as the wall switches it off. Set aside: a dim picture. */
.cbv2-mine-tv.is-out{color:var(--cb-game-miss)}
.cbv2-mine-tv.is-out .is-picture,.cbv2-mine-tv.is-out .is-sun{display:none}
.cbv2-mine-tv.is-parked{color:var(--cb-game-parked)}
.cbv2-mine-tv.is-parked .is-picture{opacity:.16}
.cbv2-mine-tv.is-parked .is-sun{opacity:.35}
.cbv2-mine em{margin-top:3px;font:400 11px/1.25 var(--mono);font-style:normal;letter-spacing:.3px;color:#cfe0ff}
.cbv2-mine em.is-out{color:var(--cb-game-miss)}
.cbv2-mine em.is-parked{color:var(--cb-game-caption)}
.cbv2-mine:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbv2-dock-label{margin:0 2px 8px;font:400 11px/1.4 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--cb-game-caption);transition:color .3s}
.cbv2-hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px 8px;min-height:0;margin:0;padding:9px 2px 6px;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.cbv2-hand.is-scrolls{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent)}
.cbv2-hand::-webkit-scrollbar{display:none}
/* None over another (Kyle, 19 Oct): a grid under the chat here, a straight row on a phone. */
.cbv2-slot{min-width:0}
.cbv2-card{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;width:100%;height:100%;min-height:62px;box-sizing:border-box;padding:10px 11px;border:0;border-radius:12px;background:linear-gradient(180deg,#242424,#161616);color:#fff;text-align:left;font:500 13px/1.32 var(--display);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);transform:none;transform-origin:50% 50%;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,opacity .25s,filter .25s}
.cbv2-card:hover:not(:disabled),.cbv2-card:focus-visible{z-index:2;transform:translateY(-2px);box-shadow:0 22px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.cbv2-card:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:3px}
.cbv2-card:active:not(:disabled){transform:scale(.98)}
.cbv2-card-art{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:radial-gradient(circle at 50% 40%,#2e2e2e,#191919);color:var(--cb-game-lit)}
.cbv2-card-art svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cbv2-card-say{display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical}
/* A card that just opened up wears a small New tag on its top edge (Kyle, 19 Oct): the gold dot it replaces
   read as a hint, and gold means a hint everywhere else here, so the tag is grey. */
.cbv2-card-new{position:absolute;top:-7px;right:10px;z-index:1;padding:2px 6px 1px;border-radius:999px;background:#3a3a3a;color:#f2f0ec;font:700 9px/1.25 var(--mono);letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 3px 8px rgba(0,0,0,.45);pointer-events:none}
.cbv2-card.is-urgent{background:linear-gradient(180deg,#22386e,#16264d)}
.cbv2-card:disabled{opacity:.3;filter:grayscale(.7);cursor:default}
.cbv2-card.is-guided{z-index:3;opacity:1;filter:none;background:linear-gradient(180deg,#3d3218,#231c0c);transform:translateY(-2px) scale(1.02);box-shadow:0 0 42px rgba(242,207,122,.45),0 22px 40px rgba(0,0,0,.6);animation:cbv2-glow 1.6s ease-in-out infinite,cbv2-wiggle 2.4s ease-in-out infinite}
/* The first card glows and wiggles every couple of seconds until your first question, every round. */
@keyframes cbv2-wiggle{0%,60%,100%{rotate:0deg}66%{rotate:-4deg}72%{rotate:4deg}78%{rotate:-3deg}84%{rotate:2deg}90%{rotate:0deg}}
.cbv2-card.is-guided .cbv2-card-art{background:radial-gradient(circle at 50% 40%,#4a3c17,#2a210d);color:var(--cb-game-near)}
@keyframes cbv2-glow{50%{box-shadow:0 0 64px rgba(242,207,122,.7),0 22px 40px rgba(0,0,0,.6)}}
.cbv2-ring{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 22px;border:0;border-radius:999px;background:var(--cb-game-cta);color:#fff;font:700 16px/1 var(--display);cursor:pointer;box-shadow:0 10px 26px rgba(30,111,236,.35);transition:background .2s,transform .15s}
.cbv2-ring svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbv2-ring:hover:not(:disabled){background:#2f7ff5;transform:translateY(-1px)}
.cbv2-ring:disabled{background:#222;color:var(--cb-game-caption);box-shadow:none;cursor:default}
.cbv2-ring:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:3px}
.cbv2-ring.is-nudged::after{content:"";position:absolute;right:14px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--cb-game-near)}

/* While coaching a card, the rest of the stage steps back. */
.cbv2-coach{position:absolute;left:0;top:0;z-index:8;margin:0;padding:11px 15px;border-radius:12px;background:var(--cb-game-near);color:#1a1405;font:700 15px/1.3 var(--display);box-shadow:0 14px 34px rgba(0,0,0,.55);pointer-events:none;animation:cbv2-coach-in .35s cubic-bezier(.2,.8,.2,1) both}
.cbv2-coach::after{content:"";position:absolute;left:calc(var(--arrow,50%) - 8px);bottom:-7px;width:16px;height:16px;border-radius:3px;background:inherit;transform:rotate(45deg)}
.cbv2-coach.is-below::after{display:none}
/* Beside a card under the chat, pointing back at it. */
.cbv2-coach.is-side::after{left:-7px;top:calc(var(--arrow-y,50%) - 8px);bottom:auto}
@keyframes cbv2-coach-in{from{opacity:0;translate:0 8px}}

/* Effects: stamps over your TV, the cut popping off the count, a need flying to its badge, a burnt card. */
.cbv2-fx{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none}
/* A question card on its way into the chat, and the message it turns into (both copies, in the fx layer). */
.cbv2-fx .cbv2-fly{position:absolute;z-index:9;margin:0;max-width:none;box-sizing:border-box;list-style:none;transform-origin:0 0;pointer-events:none;animation:none;will-change:transform,opacity}
.cbv2-stamp{position:absolute;padding:7px 12px;border-radius:8px;font:900 20px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-150%) rotate(-7deg);animation:cbv2-stamp calc(var(--cb-v2-stamp) * 1ms + 400ms) cubic-bezier(.2,.8,.2,1) both}
.cbv2-stamp.is-safe{background:var(--cb-game-near);color:#1a1405;box-shadow:0 0 30px rgba(242,207,122,.6)}
.cbv2-stamp.is-out{background:var(--cb-game-miss);color:#1c0b04;box-shadow:0 0 30px rgba(232,135,94,.55)}
@keyframes cbv2-stamp{0%{opacity:0;transform:translate(-50%,-150%) rotate(-7deg) scale(1.9)}12%{opacity:1;transform:translate(-50%,-150%) rotate(-7deg) scale(.94)}20%{transform:translate(-50%,-150%) rotate(-7deg) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-175%) rotate(-7deg)}}
.cbv2-pop{position:absolute;font:900 34px/1 var(--display);color:var(--cb-game-miss);text-shadow:0 0 18px rgba(232,135,94,.5);transform:translate(-50%,0);animation:cbv2-pop 1.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes cbv2-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-56px) scale(1)}}
.cbv2-chip{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#14295e;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.cbv2-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.cbv2-chip b{font:400 11px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}

/* The clue: every need found. The count turns blue, and its marquee flashes blue once. */
.cbv2-score.is-fits .cbv2-marquee{animation:cbv2-fits .9s cubic-bezier(.2,.8,.2,1) 1}
.cbv2-score.is-fits .cbv2-marquee::before{background-image:radial-gradient(circle,var(--cb-game-fit) 0 1.6px,transparent 2.2px);opacity:1}
@keyframes cbv2-fits{0%{transform:none}30%{transform:scale(1.12);box-shadow:0 0 40px rgba(77,155,255,.55)}100%{transform:none}}
/* After a wipe, the way back out glows. */
.cbv2-card.is-urgent{background:linear-gradient(180deg,#22386e,#16264d);box-shadow:0 0 38px rgba(77,155,255,.45),0 22px 40px rgba(0,0,0,.6);animation:cbv2-urgent 1.4s ease-in-out infinite}
@keyframes cbv2-urgent{50%{box-shadow:0 0 60px rgba(77,155,255,.75),0 22px 40px rgba(0,0,0,.6)}}
/* The Frontier host's motion pause holds the loops, as its contract asks; one-shot entrances still play. */
html.vf-motion-pause .cbv2-card.is-guided,html.vf-motion-pause .cbv2-card.is-urgent{animation-play-state:paused}
/* A demo run that has already bought. */
.cbv2-race em{font-style:normal;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cb-game-near)}
/* Pixel-square confetti on a pass. */
.cbv2-confetti{position:absolute;inset:0}
.cbv2-confetti i{position:absolute;top:-14px;width:9px;height:9px;animation:cbv2-confetti 2s cubic-bezier(.25,.6,.35,1) both}
@keyframes cbv2-confetti{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:translate(var(--dx,0),105vh) rotate(var(--spin,180deg));opacity:0}}

/* The register: three TVs stand up together, and the needs open one press at a time. */
.cbv2.is-register .cbv2-dock,.cbv2.is-register .cbv2-checkout{visibility:hidden}
.cbv2-register{position:absolute;left:50%;top:calc(var(--cbv2-under-hud,0px) + (100% - var(--cbv2-under-hud,0px)) / 2);z-index:10;width:min(860px,calc(100% - 32px));max-height:calc(100% - var(--cbv2-under-hud,76px) - 16px);box-sizing:border-box;overflow-y:auto;scrollbar-width:none;padding:20px 24px 18px;border-radius:20px;background:rgba(14,14,14,.96);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translate(-50%,-50%);animation:cbv2-reg-mid-in .45s cubic-bezier(.2,.8,.2,1) both}
/* Centred in the room under the HUD (Kyle, 3 Nov: it had sat at the bottom); on a phone it stays a bottom sheet, as the
   board and the share card are, and they keep the rising entrance (cbv2-reg-in). */
@keyframes cbv2-reg-mid-in{from{opacity:0;transform:translate(-50%,calc(-50% + 24px))}}
@keyframes cbv2-reg-in{from{opacity:0;transform:translate(-50%,24px)}}
.cbv2-register-title{margin:0 0 14px;font:700 22px/1.2 var(--display);outline:none}
.cbv2-reg-tvs{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.cbv2-reg-legend{display:grid;align-content:end;gap:6px;margin:0;padding:0 0 10px;font:400 11px/1.3 var(--display);color:var(--cb-game-caption)}
.cbv2-reg-legend span{display:flex;align-items:center;gap:8px}
.cbv2-reg-legend b{min-width:16px;font:800 14px/1 var(--display);text-align:center}
.cbv2-reg-legend .is-ok{color:var(--cb-game-fit)}
.cbv2-reg-legend .is-miss{color:var(--cb-game-miss)}
.cbv2-reg-legend .is-lucky{padding:3px 6px;border-radius:999px;background:var(--cb-game-near);color:#1a1405;font-size:9px;letter-spacing:.4px;text-transform:uppercase}
.cbv2-reg-need .is-short{display:none}
.cbv2-reg-tv{display:grid;justify-items:center;gap:8px;margin:0;padding:12px 10px 10px;border-radius:14px;background:#171717;text-align:center;animation:cbv2-stand .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 140ms + 200ms)}
@keyframes cbv2-stand{from{opacity:0;transform:translateY(28px)}}
.cbv2-reg-tv.is-you{background:#1d1708;box-shadow:0 0 26px rgba(242,207,122,.2)}
.cbv2-reg-screen{--tv:var(--cb-game-lit);position:relative;width:96px;height:58px;margin-bottom:12px;padding:5px;box-sizing:border-box;border:2px solid var(--tv);border-radius:8px;background:rgba(199,237,255,.06);transition:border-color .4s .45s}
.cbv2-reg-screen::before{content:"";position:absolute;left:calc(50% - 1px);bottom:-9px;width:2px;height:7px;background:var(--tv);transition:background .4s .45s}
.cbv2-reg-screen::after{content:"";position:absolute;left:32%;right:32%;bottom:-11px;height:2px;border-radius:1px;background:var(--tv);transition:background .4s .45s}
.cbv2-reg-screen i{display:block;width:100%;height:100%;border-radius:3px;background:rgba(199,237,255,.26);box-shadow:0 0 18px rgba(199,237,255,.25);transform-origin:50% 50%}
.cbv2-reg-tv.is-you .cbv2-reg-screen{--tv:var(--cb-game-near);background:rgba(242,207,122,.08)}
.cbv2-reg-tv.is-you .cbv2-reg-screen i{background:rgba(242,207,122,.28);box-shadow:0 0 18px rgba(242,207,122,.25)}
.cbv2-reg-tv.is-off .cbv2-reg-screen{--tv:#3a3c40}
.cbv2-reg-tv.is-scan .cbv2-reg-screen i{animation:cbv2-scan .45s ease-out}
@keyframes cbv2-scan{0%{filter:brightness(1.6)}100%{filter:none}}
.cbv2-reg-tv.is-lucky .cbv2-reg-screen i{animation:cbv2-lucky .8s ease-out}
@keyframes cbv2-lucky{0%,40%{background:var(--cb-game-near);box-shadow:0 0 30px rgba(242,207,122,.8)}}
.cbv2-reg-tv.is-off .cbv2-reg-screen i{animation:cbv2-crt-off .7s cubic-bezier(.4,0,.6,1) forwards}
.cbv2-reg-tv.is-off.is-slow .cbv2-reg-screen i{animation-duration:2s}
@keyframes cbv2-crt-off{0%{transform:none;filter:brightness(1)}45%{transform:scaleY(.04);filter:brightness(2.4)}80%{transform:scale(.03,.04);filter:brightness(2.4)}100%{transform:scale(0);filter:brightness(0)}}
.cbv2-reg-tv figcaption{display:grid;gap:2px}
.cbv2-reg-tv small{font:400 10px/1.3 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--cb-game-caption)}
.cbv2-reg-tv.is-you small{color:var(--cb-game-near)}
.cbv2-reg-tv b{font:600 13px/1.25 var(--display)}
.cbv2-reg-tv span{font:400 11px/1.3 var(--display);color:var(--cb-game-ink)}
.cbv2-reg-tv em{margin-top:2px;font:700 12px/1 var(--display);font-style:normal;color:#fff;font-variant-numeric:tabular-nums}
.cbv2-reg-tv.is-off em{color:var(--cb-game-miss)}
.cbv2-reg-rows{display:grid;gap:4px;margin:0 0 14px;padding:0;list-style:none}
.cbv2-reg-row{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));align-items:center;gap:12px;min-height:34px;padding:0 10px;border-radius:10px;background:#141414;transition:background .3s}
.cbv2-reg-need{display:flex;align-items:center;gap:8px;min-width:0;font:400 13px/1.25 var(--display);color:var(--cb-game-ink)}
.cbv2-reg-need svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cbv2-reg-need b{overflow:hidden;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.cbv2-reg-row.is-closed .cbv2-reg-need{color:#4a4744}
.cbv2-reg-mark{justify-self:center;font:800 17px/1 var(--display);color:#3a3a3a}
.cbv2-reg-mark.is-ok{color:var(--cb-game-fit);animation:cbv2-stamp-in .3s cubic-bezier(.2,.8,.2,1) both}
.cbv2-reg-mark.is-miss{color:var(--cb-game-miss);animation:cbv2-stamp-in .3s cubic-bezier(.2,.8,.2,1) both}
.cbv2-reg-mark.is-lucky{padding:4px 8px;border-radius:999px;background:var(--cb-game-near);color:#1a1405;font-size:10px;letter-spacing:.5px;text-transform:uppercase;animation:cbv2-stamp-in .3s cubic-bezier(.2,.8,.2,1) both}
.cbv2-reg-mark.is-slow{animation-duration:.6s}
@keyframes cbv2-stamp-in{0%{opacity:0;transform:scale(1.9)}100%{opacity:1;transform:none}}
.cbv2-reg-row.is-open{background:#191919}
.cbv2-reg-row.is-deciding{background:linear-gradient(90deg,#191919,#2a2414,#191919);background-size:200% 100%;animation:cbv2-suspense 1.3s linear 1}
@keyframes cbv2-suspense{from{background-position:100% 0}to{background-position:-100% 0}}
.cbv2-register .cbv2-ring{margin:0}
.cbv2-stamp.is-lucky{background:var(--cb-game-near);color:#1a1405;box-shadow:0 0 30px rgba(242,207,122,.6)}

/* How to play: three steps before Sam's first message. */
.cbv2-howto{position:absolute;left:50%;top:50%;z-index:12;width:min(480px,calc(100% - 32px));box-sizing:border-box;padding:26px 28px 24px;border-radius:20px;background:#101010;box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translate(-50%,-50%);animation:cbv2-final-in .4s cubic-bezier(.2,.8,.2,1) both}
.cbv2-howto-steps{display:grid;gap:12px;margin:6px 0 22px;padding:0;list-style:none}
.cbv2-howto-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;font:400 16px/1.4 var(--display);color:#ece8e2}
.cbv2-howto-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1d1708;color:var(--cb-game-near);font:800 16px/1 var(--display)}
.cbv2-howto .cbv2-ring{margin:0}
.cbv2-howto-head{display:flex;align-items:center;gap:14px;margin:2px 0 10px}
.cbv2-howto-head .cbv2-end-title{margin:0}
.cbv2-howto-lead{margin:0 0 16px;font:400 15px/1.45 var(--display);color:var(--cb-game-ink)}
/* The demo notice on the game's start screen, under its Play button (comms and Kyle, 3 Nov). */
.cbv2-intro-actions{flex-wrap:wrap}
.cbv2-intro-demo{flex-basis:100%;margin:14px 0 0;font:400 11px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-gold,#f2cf7a)}
.cbv2.is-howto .cbv2-chat,.cbv2.is-howto .cbv2-checkout,.cbv2.is-howto .cbv2-stage{opacity:.3;transition:opacity .3s}

/* The intro: the Sam's TV scene that stood on the page (Kyle, 19 Oct), before How to play. */
.cbv2-intro{--cbv2-intro-offer:#5f5b57;--cbv2-intro-trap:var(--miss,#d95926);--cbv2-intro-fit:var(--pass,#3987e5);position:absolute;inset:0;z-index:14;background:var(--cb-game-stage,#0a0a0a);animation:cbv2-intro-in .5s ease both}
.cbv2-intro-scroll{position:absolute;inset:0;display:flex;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;padding:56px 48px}
.cbv2-intro-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px 64px;align-items:center;width:100%;max-width:1160px;margin:auto}
.cbv2-intro-copy{grid-row:1/3;min-width:0}
.cbv2-intro-kicker{margin:0 0 20px;outline:none}
.cbv2-intro-chat{margin:0;padding:16px 18px 18px;background:#141414;border:1px solid #303030;border-radius:20px}
.cbv2-intro-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(150,145,140,.16)}
.cbv2-intro-face{flex:none;width:36px;height:36px;overflow:hidden;border-radius:10px;background:#0c0c0c}
.cbv2-intro-face canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.cbv2-intro-head b{display:block;font:600 16px/1.2 var(--display);color:#fff}
.cbv2-intro-head small{display:block;margin-top:2px;font:400 12px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#96918c}
.cbv2-intro-typing{display:inline-flex;gap:5px;margin-bottom:8px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#2c2c2c}
.cbv2-intro-typing i{width:7px;height:7px;border-radius:50%;background:#b9b4ae;animation:cbv2-dot 1s ease-in-out infinite}
.cbv2-intro-typing i:nth-child(2){animation-delay:.15s}
.cbv2-intro-typing i:nth-child(3){animation-delay:.3s}
@keyframes cbv2-dot{50%{opacity:.35}}
.cbv2-intro-bubble{margin:0;padding:12px 16px 13px;border-radius:18px 18px 18px 4px;background:#2c2c2c;font:400 17px/1.48 var(--display);color:#fff}
.cbv2-intro-bubble mark{margin:0 -2px;padding:0 2px;border-radius:3px;background:transparent;color:inherit;transition:background-color .35s ease}
.cbv2-intro-bubble mark.is-said{background:rgba(57,135,229,.34)}
.cbv2-intro-meta{margin:6px 0 0 4px;font:400 11px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#96918c}
.cbv2-intro-unsaid{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:16px 0 0}
.cbv2-intro-chips{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.cbv2-intro-chip{display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border-radius:12px;background:#2b2b2b;border:1px solid #303030;color:#b9b4ae}
.cbv2-intro-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.cbv2-intro-chips-label{margin:0;max-width:20ch;font:400 14px/1.35 var(--display);color:#b9b4ae}
.cbv2-intro-caption{margin:24px 0 0;max-width:30ch;font:600 22px/1.3 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
.cbv2-intro-market{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;min-width:0;height:min(58vh,560px)}
.cbv2-intro-count{display:flex;align-items:baseline;gap:14px;margin:0}
.cbv2-intro-count b{font:700 56px/1 var(--display);letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums}
.cbv2-intro-count span{font:600 22px/1.2 var(--display);letter-spacing:-.01em;color:#fff;transition:opacity .3s}
.cbv2-intro-field{display:block;width:100%;height:100%;min-height:0}
.cbv2-intro-note{display:flex;align-items:baseline;gap:12px;margin:0;font:600 20px/1.3 var(--display);letter-spacing:-.01em;color:#fff}
.cbv2-intro-note+.cbv2-intro-note{margin-top:10px}
.cbv2-intro-note i{flex:none;width:14px;height:14px;border-radius:3px;transform:translateY(1px)}
.cbv2-intro-note .is-trap{background:var(--cbv2-intro-trap)}
.cbv2-intro-note .is-fit{background:var(--cbv2-intro-fit)}
.cbv2-intro-actions{grid-column:2;display:flex}
.cbv2-intro-actions .cbv2-ring{min-width:168px;margin:0}
.cbv2-intro-close{position:absolute;top:16px;right:24px}
@keyframes cbv2-intro-in{from{opacity:0}}
html.vf-motion-pause .cbv2-intro-typing i{animation-play-state:paused}

/* The end: a final answer, then the ladder. */
.cbv2-end,.cbv2-final{position:absolute;left:50%;top:50%;z-index:10;width:min(460px,calc(100% - 32px));box-sizing:border-box;padding:24px 26px;border-radius:18px;background:#101010;box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translate(-50%,-50%)}
.cbv2-end-kicker{margin:0 0 8px;font:400 11px/1 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--cb-game-near)}
.cbv2-end-title{margin:0 0 10px;font:700 24px/1.2 var(--display);outline:none}
.cbv2-end-score{margin:-2px 0 12px;font:400 12px/1.35 var(--mono);letter-spacing:.6px;color:var(--cb-game-caption)}
.cbv2-end-text{margin:0 0 18px;font:400 15px/1.5 var(--display);color:var(--cb-game-ink)}
.cbv2-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cbv2-final{width:min(420px,calc(100% - 32px));animation:cbv2-final-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes cbv2-final-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.cbv2-final-tv{display:grid;gap:4px;margin:0 0 18px;padding:14px 16px;border-radius:12px;background:#1d1708;box-shadow:0 0 26px rgba(242,207,122,.18)}
.cbv2-final-tv b{font:600 17px/1.25 var(--display)}
.cbv2-final-tv span{font:400 13px/1.35 var(--display);color:var(--cb-game-ink)}
.cbv2-final .cbv2-ring{margin:0}
/* Your result takes the whole screen, so the round reads as over (Kyle, 19 Oct): the headline, your TV, the way on. */
.cbv2-end{inset:0;z-index:15;display:flex;width:auto;max-width:none;padding:48px 24px;border-radius:0;overflow-y:auto;scrollbar-width:none;background:radial-gradient(ellipse at 50% 35%,#161a22,#0a0a0a 72%);box-shadow:none;transform:none;animation:cbv2-intro-in .5s ease both}
.cbv2-end-in{width:min(700px,100%);margin:auto;text-align:center}
.cbv2-end .cbv2-end-kicker{font-size:12px}
.cbv2-end .cbv2-end-title{margin:0 0 12px;font-size:44px;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.cbv2-end .cbv2-end-text{margin:0 0 6px;font-size:17px}
.cbv2-end-tv{display:grid;justify-items:center;gap:10px;margin:22px 0 30px}
.cbv2-end-tv canvas{display:block;width:280px;height:200px}
.cbv2-end-tv figcaption{display:grid;gap:4px}
.cbv2-end-tv b{font:700 20px/1.25 var(--display);color:#fff}
.cbv2-end-tv span{font:400 14px/1.35 var(--display);color:var(--cb-game-ink)}
.cbv2-end .cbv2-end-score{margin:4px 0 0;font:400 13px/1.35 var(--mono);letter-spacing:.6px;color:var(--cb-game-near)}
.cbv2-end .cbv2-end-actions{justify-content:center}
/* The ending: Sam gets his TV (Kyle, 19 Oct). The wall dims behind; a tap skips ahead. */
.cbv2-ending{position:absolute;inset:0;z-index:13;display:grid;place-items:center;cursor:pointer;background:radial-gradient(ellipse at 50% 45%,rgba(10,10,10,.3),rgba(10,10,10,.85) 70%);animation:cbv2-intro-in .5s ease both}
.cbv2-ending-in{display:grid;grid-template-columns:auto auto;grid-template-areas:"tv sam" "name name";align-items:center;gap:18px 34px}
.cbv2-ending-tv{grid-area:tv;position:relative}
.cbv2-ending-tv canvas{display:block;width:400px;height:290px}
.cbv2-ending-stamp{position:absolute;left:50%;top:38%;padding:8px 14px;border-radius:8px;font:800 22px/1 var(--display);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%) rotate(-8deg);animation:cbv2-stamp-in .35s cubic-bezier(.2,.8,.2,1) both}
.cbv2-ending-stamp.is-rung-3{background:var(--cb-game-near);color:#1a1405}
.cbv2-ending-stamp.is-rung-4{background:var(--cb-game-miss);color:#1c0b04}
@keyframes cbv2-stamp-in{from{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.8)}}
.cbv2-ending-sam{grid-area:sam;display:grid;justify-items:start;gap:12px;animation:cbv2-sam-in .45s cubic-bezier(.2,.8,.2,1) .5s both}
.cbv2-ending-face{display:block;width:104px;height:104px;overflow:hidden;border-radius:18px;background:#0c0c0c;box-shadow:0 0 30px rgba(199,237,255,.18)}
.cbv2-ending-face canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.cbv2-ending-say{margin:0;padding:12px 16px;border-radius:16px 16px 16px 4px;background:#242424;font:600 20px/1.3 var(--display);color:#fff}
.cbv2-ending-name{grid-area:name;margin:0;text-align:center;font:400 13px/1.3 var(--mono);letter-spacing:.8px;color:var(--cb-game-near)}
@keyframes cbv2-sam-in{from{opacity:0;transform:translateY(16px) scale(.9)}}
.cbv2.is-ending .cbv2-chat,.cbv2.is-ending .cbv2-checkout{opacity:.15;transition:opacity .4s}
.cbv2-end[data-rung="1"] .cbv2-end-title,.cbv2-end[data-rung="2"] .cbv2-end-title{color:var(--cb-game-fit)}
.cbv2-end[data-rung="3"] .cbv2-end-title{color:var(--cb-game-near)}
.cbv2-end[data-rung="4"] .cbv2-end-title,.cbv2-end[data-rung="5"] .cbv2-end-title{color:var(--cb-game-miss)}
.cbv2-link{padding:4px 0;border:0;background:none;color:var(--cb-game-ink);font:400 14px/1.3 var(--display);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cbv2-link:hover{color:#fff}

/* You against the AI: the TVs fly to the research map; three paths step on each press. */
.cbv2.is-map .cbv2-ui{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud" "stage stage" "map map"}
.cbv2.is-map .cbv2-chat,.cbv2.is-map .cbv2-checkout,.cbv2.is-map .cbv2-countbox,.cbv2.is-map .cbv2-race{display:none}
.cbv2-path.is-you,.cbv2-map-row.is-you,.cbv2-tip-by .is-you{--c:var(--cb-v2-you)}
.cbv2-path.is-sol,.cbv2-map-row.is-sol,.cbv2-tip-by .is-sol{--c:var(--cb-v2-sol)}
.cbv2-path.is-opus,.cbv2-map-row.is-opus,.cbv2-tip-by .is-opus{--c:var(--cb-v2-opus)}
.cbv2-paths{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.cbv2-zone{fill:rgba(77,155,255,.06);stroke:rgba(77,155,255,.6);stroke-width:1.5;stroke-dasharray:3 5}
.cbv2-start{fill:var(--cb-game-near)}
.cbv2-seg{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:square;opacity:.45}
.cbv2-seg.is-now{opacity:1;stroke-width:2.5;filter:drop-shadow(0 0 4px var(--c))}
.cbv2-dot{fill:#0a0a0a;stroke:var(--c);stroke-width:1.5;opacity:.7;transform-box:fill-box;transform-origin:center}
.cbv2-dot.is-now{opacity:1}
.cbv2-bold{fill:var(--c);stroke:#0a0a0a;stroke-width:1;transform-box:fill-box;transform-origin:center}
.cbv2-bold.is-now{filter:drop-shadow(0 0 6px var(--c))}
.cbv2-ring-mark{fill:none;stroke:var(--c);stroke-width:2.5;transform-box:fill-box;transform-origin:center}
.cbv2-tag{fill:var(--c);font:700 11px/1 var(--display);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#0a0a0a;stroke-width:3px;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.cbv2-tag.is-bought,.cbv2-tag.is-out{font:400 9px/1 var(--mono);letter-spacing:1px;text-transform:uppercase}
.cbv2-tag.is-out{fill:var(--cb-game-miss)}
.cbv2-out{fill:none;stroke:var(--cb-game-miss);stroke-width:2.5;stroke-linecap:square;transform-box:fill-box;transform-origin:center}
.cbv2.is-board .cbv2-paths,.cbv2.is-board .cbv2-map-labels,.cbv2.is-board .cbv2-map-heads{opacity:.12}
.cbv2-map-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.cbv2-region{position:absolute;transform:translate(-50%,-50%);font:400 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cb-game-caption);white-space:nowrap;text-shadow:0 0 6px #0a0a0a,0 0 2px #0a0a0a;animation:cbv2-label-in .5s cubic-bezier(.2,.8,.2,1) both}
.cbv2-region b{margin-left:4px;font:700 11px/1 var(--display);letter-spacing:0;color:#fff}
.cbv2-region.is-answer{transform:translate(-50%,-100%);color:var(--cb-game-fit)}
.cbv2-region.is-start{transform:translate(-50%,-100%);color:var(--cb-game-near)}
@keyframes cbv2-label-in{from{opacity:0}}
.is-placed>.cbv2-region{animation:none}
/* Who's who on the map (Kyle, 3 Nov): each path's colour, logo and name at its newest TV, riding the line's tip as it draws,
   on the side opposite that path's turn tags (you and Sol below, Opus above) and its Bought label. */
.cbv2-map-heads{position:absolute;inset:0;z-index:3;pointer-events:none}
.cbv2-head{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:4px 9px 4px 7px;border-radius:999px;background:rgba(10,10,10,.9);box-shadow:0 2px 12px rgba(0,0,0,.55);font:600 11px/1 var(--display);color:#fff;white-space:nowrap;transform:translate(12px,calc(-50% + var(--dy)))}
.cbv2-head.is-left{transform:translate(calc(-100% - 12px),calc(-50% + var(--dy)))}
.cbv2-head.is-you{--c:var(--cb-v2-you);--dy:14px}
.cbv2-head.is-sol{--c:var(--cb-v2-sol);--dy:14px}
.cbv2-head.is-opus{--c:var(--cb-v2-opus);--dy:-14px}
.cbv2-head-swatch{flex:none;width:12px;height:3px;border-radius:2px;background:var(--c);box-shadow:0 0 6px var(--c)}
.cbv2-head-logo{display:inline-flex;flex:none;width:13px;height:13px;color:#fff}
.cbv2-head-logo svg{display:block;width:100%;height:100%}
.cbv2-map{grid-area:map;display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr) auto;align-items:center;gap:10px 28px;padding:14px 20px;border-radius:16px;background:rgba(14,14,14,.94);box-shadow:0 -10px 40px rgba(0,0,0,.45);animation:cbv2-bar-in .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes cbv2-bar-in{from{opacity:0;transform:translateY(16px)}}
.cbv2-map-title{margin:0 0 8px;font:700 20px/1.2 var(--display);outline:none}
.cbv2-map-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font:400 11px/1.3 var(--display);color:var(--cb-game-caption)}
.cbv2-map-key span{display:inline-flex;align-items:center;gap:6px}
.cbv2-map-key i{width:7px;height:7px;box-sizing:border-box;border:1.5px solid #d8d3cc}
.cbv2-map-key i.is-bold{width:10px;height:10px;border:0;background:#d8d3cc}
.cbv2-map-key i.is-ring{width:12px;height:12px;border-width:2px;border-radius:50%}
.cbv2-map-rows{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.cbv2-map-row{display:grid;grid-template-columns:24px 230px minmax(0,1fr);align-items:center;gap:12px}
.cbv2-map-swatch{height:3px;background:var(--c);box-shadow:0 0 8px var(--c)}
.cbv2-map-who{display:grid;gap:2px}
.cbv2-map-who b{font:600 14px/1.2 var(--display);color:#fff}
.cbv2-map-who small{font:400 10px/1.2 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--c)}
.cbv2-map-line{min-width:0;font:400 13px/1.35 var(--display);color:var(--cb-game-ink)}
.cbv2-map .cbv2-end-actions{flex-direction:column;align-items:stretch;gap:6px}
.cbv2-map .cbv2-ring{justify-content:center;margin:0;white-space:nowrap}
/* The turns step on ◀, one square per turn, coloured as your share strip colours it (Kyle, 19 Oct), and the big Play turn button. */
.cbv2-map{grid-template-areas:"head rows actions" "steps steps actions"}
.cbv2-map-head{grid-area:head}
.cbv2-map-rows{grid-area:rows}
.cbv2-map .cbv2-end-actions{grid-area:actions}
.cbv2-map-steps{grid-area:steps;display:flex;align-items:center;gap:10px}
.cbv2-map-steps .cbv2-round{flex:none;width:38px;height:38px}
.cbv2-map-steps .cbv2-round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cbv2-map-steps .cbv2-round:disabled{opacity:.3;cursor:default}
/* The next turn is the bar's one big button, named for the turn it plays (Kyle, 3 Nov: the small arrow at the bottom
   left was easy to miss); it pulses until the first turn plays. The board waits as a link under it, then takes its place. */
.cbv2-map-next{gap:10px}
.cbv2-map-next svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cbv2-map-next.is-hint{animation:cbv2-next-glow 1.4s ease-in-out infinite}
.cbv2-map .cbv2-link{align-self:flex-start}
@keyframes cbv2-next-glow{50%{box-shadow:0 0 28px rgba(30,111,236,.6)}}
html.vf-motion-pause .cbv2-map-next.is-hint{animation-play-state:paused}
.cbv2-map-strip{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cbv2-map-sq{display:block;width:22px;height:22px;padding:0;border:0;border-radius:4px;background:#2e2e2e;cursor:pointer;opacity:.35;transition:opacity .2s,transform .2s,box-shadow .2s}
.cbv2-map-sq.is-found,.cbv2-map-sq.is-pass{background:var(--cb-game-fit)}
.cbv2-map-sq.is-clue,.cbv2-map-sq.is-lucky{background:var(--cb-game-near)}
.cbv2-map-sq.is-lead,.cbv2-map-sq.is-miss{background:var(--cb-game-miss)}
.cbv2-map-sq.is-opening{background:rgba(199,237,255,.28)}
.cbv2-map-sq.is-after{background:#1e1e1e}
.cbv2-map-sq.is-seen{opacity:.8}
.cbv2-map-sq.is-now{opacity:1;transform:scale(1.28);box-shadow:0 0 14px rgba(255,255,255,.35)}
.cbv2-map-sq:focus-visible{outline:2px solid var(--cb-game-near);outline-offset:2px}
.cbv2-tip-by{display:grid;gap:3px;margin:10px 0 0;font:400 11px/1.3 var(--mono);letter-spacing:.4px}
.cbv2-tip-by span{color:var(--c,var(--cb-game-caption))}

/* The board, with your round beside it. */
.cbv2-board{position:absolute;left:50%;top:50%;z-index:10;display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"you runs" "demo runs" "actions runs";gap:16px 28px;width:min(960px,calc(100% - 32px));max-height:calc(100% - 92px);box-sizing:border-box;overflow-y:auto;scrollbar-width:none;padding:22px 26px 20px;border-radius:20px;background:rgba(14,14,14,.96);box-shadow:0 30px 80px rgba(0,0,0,.7);transform:translate(-50%,-50%);animation:cbv2-final-in .45s cubic-bezier(.2,.8,.2,1) both}
.cbv2-board>.cbv2-end-actions{grid-area:actions;align-self:end;gap:10px 18px}
.cbv2-board-you{grid-area:you;align-self:start;margin:0;padding:18px;border-radius:16px;background:#1d1708;box-shadow:0 0 26px rgba(242,207,122,.18)}
.cbv2-board-verdict{margin:0 0 12px;font:700 21px/1.2 var(--display)}
.cbv2-board-you.is-rung-1 .cbv2-board-verdict,.cbv2-board-you.is-rung-2 .cbv2-board-verdict{color:var(--cb-game-fit)}
.cbv2-board-you.is-rung-3 .cbv2-board-verdict{color:var(--cb-game-near)}
.cbv2-board-you.is-rung-4 .cbv2-board-verdict,.cbv2-board-you.is-rung-5 .cbv2-board-verdict{color:var(--cb-game-miss)}
.cbv2-board-tv{display:grid;gap:3px;margin:0 0 12px}
.cbv2-board-tv b{font:600 15px/1.25 var(--display)}
.cbv2-board-tv span{font:400 12px/1.35 var(--display);color:var(--cb-game-ink)}
.cbv2-board-note{margin:0;font:400 12px/1.45 var(--display);color:var(--cb-game-caption)}
.cbv2-board-runs{grid-area:runs;min-width:0}
.cbv2-board-demo{grid-area:demo;margin:0;padding:14px 18px;border-radius:16px;background:#151515}
.cbv2-board-demo ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.cbv2-board-demo li{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:2px 10px}
.cbv2-board-demo b{font:600 13px/1.25 var(--display);color:#fff}
.cbv2-board-demo span{grid-column:2;font:400 12px/1.3 var(--display);color:var(--cb-game-ink)}
.cbv2-board-title{margin:0 0 12px;font:700 22px/1.2 var(--display);outline:none}
.cbv2-board-title b{font:800 30px/1 var(--display);color:var(--cb-game-fit);font-variant-numeric:tabular-nums}
.cbv2-board-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows,8),auto);grid-auto-flow:column;gap:4px 14px;margin:0 0 12px;padding:0;list-style:none}
.cbv2-board-row{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;align-items:center;gap:10px;padding:5px 10px;border-radius:8px;background:#141414;font:400 13px/1.3 var(--display);color:var(--cb-game-ink);animation:cbv2-row-in .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 40ms + 150ms)}
.cbv2-board-model{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbv2-board-cells{display:flex;gap:4px}
.cbv2-board-cells i,.cbv2-board-legend i{display:block;width:20px;height:12px;border-radius:3px;background:#2a2a2a}
.cbv2-board-cells i{animation:cbv2-cell-in .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 40ms + var(--k) * 60ms + 250ms)}
.cbv2-board i.is-pass{background:var(--cb-game-fit)}
.cbv2-board i.is-fail{background:var(--cb-game-miss)}
.cbv2-board i.is-none{background:#4a4744}
.cbv2-board-row b{font:700 13px/1 var(--display);color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.cbv2-board-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px;font:400 11px/1.3 var(--display);color:var(--cb-game-caption)}
.cbv2-board-legend span{display:inline-flex;align-items:center;gap:6px}
.cbv2-board-legend i{width:14px;height:9px}
.cbv2-board-foot{margin:0;font:400 12px/1.45 var(--display);color:var(--cb-game-ink)}
@keyframes cbv2-row-in{from{opacity:0;transform:translateY(6px)}}

/* The board's turn strip: one square per turn, and never a need. */
/* Copy result (Kyle, 4 Nov: no share panel): where copying is blocked, the text under the button, selected. */
.cbv2-copy-out{margin-top:12px;max-width:440px}
.cbv2-copy-note{margin:8px 0 0;font:400 12px/1.45 var(--mono);color:#b2ada6}
.cbv2-strip{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 12px;padding:0;list-style:none}
.cbv2-strip li{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:5px;background:#2e2e2e;animation:cbv2-square .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k) * 110ms + 120ms)}
.cbv2-strip li b{font:900 18px/1 var(--display);color:#0b1220}
.cbv2-strip li.is-miss b{color:#1c0b04}
.cbv2-strip .is-found,.cbv2-strip .is-pass{background:var(--cb-game-fit)}
.cbv2-strip .is-clue,.cbv2-strip .is-lucky{background:var(--cb-game-near)}
.cbv2-strip .is-lead,.cbv2-strip .is-miss{background:var(--cb-game-miss)}
.cbv2-strip .is-dead{background:#2e2e2e}
.cbv2-strip .is-opening{background:rgba(199,237,255,.22)}
.cbv2-strip .is-pass,.cbv2-strip .is-lucky,.cbv2-strip .is-miss{box-shadow:0 0 18px rgba(255,255,255,.12)}
.cbv2-strip.is-small{gap:4px;margin:0 0 12px}
.cbv2-strip.is-small li{width:16px;height:16px;border-radius:3px}
.cbv2-strip.is-small li b{font-size:10px}
@keyframes cbv2-square{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.25)}100%{transform:none}}
@keyframes cbv2-cell-in{from{opacity:0;transform:scale(.4)}}

@media (max-width:979px){
  :root{--cb-v2-card-w:116px;--cb-v2-card-h:150px}
  .cbv2-ending-in{grid-template-columns:auto;grid-template-areas:"tv" "sam" "name";justify-items:center;gap:12px}
  .cbv2-ending-tv canvas{width:300px;height:216px}
  .cbv2-ending-sam{grid-template-columns:auto auto;align-items:center;justify-items:start}
  .cbv2-ending-face{width:64px;height:64px;border-radius:12px}
  .cbv2-ending-say{font-size:16px}
  .cbv2-end{padding:32px 16px}
  .cbv2-end .cbv2-end-title{font-size:30px}
  .cbv2-end-tv canvas{width:220px;height:158px}
  .cbv2-end-tv b{font-size:17px}
  /* The intro in one column; Play stays in reach at the bottom while you read. */
  .cbv2-intro-scroll{padding:48px 16px 0}
  .cbv2-intro-in{grid-template-columns:minmax(0,1fr);gap:12px;margin:0 auto}
  .cbv2-intro-copy{grid-row:auto}
  .cbv2-intro-kicker{margin-bottom:12px}
  .cbv2-intro-chat{padding:12px 14px 14px}
  .cbv2-intro-head{margin-bottom:10px;padding-bottom:8px}
  .cbv2-intro-face{width:30px;height:30px;border-radius:8px}
  .cbv2-intro-bubble{padding:10px 13px;font-size:14px}
  .cbv2-intro-unsaid{margin-top:10px;gap:8px 12px}
  .cbv2-intro-chip{width:34px;height:34px;border-radius:10px}
  .cbv2-intro-chips-label{font-size:13px}
  .cbv2-intro-caption{margin-top:12px;font-size:16px}
  .cbv2-intro-market{height:auto;grid-template-rows:auto 104px auto;gap:10px}
  .cbv2-intro-count b{font-size:36px}
  .cbv2-intro-count span{font-size:16px}
  .cbv2-intro-note{font-size:15px}
  .cbv2-intro-note+.cbv2-intro-note{margin-top:6px}
  .cbv2-intro-actions{grid-column:auto;position:sticky;bottom:0;margin:0 -16px;padding:12px 16px 16px;background:linear-gradient(rgba(10,10,10,0),#0a0a0a 30%)}
  .cbv2-intro-actions .cbv2-ring{flex:1;min-height:48px;font-size:15px}
  .cbv2-intro-close{top:8px;right:12px}
  .cbv2 .cbv2-ui{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"hud" "stage" "checkout" "chat";gap:8px;padding:8px 12px 10px}
  /* Phones: the title goes to screen readers only; the slots show icons; the scoreboard sits under them. */
  .cbv2-hud{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"goal buttons" "scores scores";gap:6px 8px}
  .cbv2-goal{grid-area:goal}
  .cbv2-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cbv2-goal-label{margin-bottom:4px;font-size:12px}
  .cbv2-goal-label b{font-size:10px}
  .cbv2-slots{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .cbv2-factor{justify-content:center;height:32px;padding:0;border-radius:8px;font-size:14px}
  .cbv2-factor.is-found{justify-content:center}
  .cbv2-factor b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cbv2-factor svg{width:16px;height:16px}
  .cbv2-hud-buttons{grid-area:buttons;gap:6px}
  .cbv2-round{width:36px;height:36px}
  .cbv2-scores{grid-area:scores;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
  .cbv2-turnbox,.cbv2-countbox{padding:7px 10px;border-radius:12px}
  .cbv2-turnbox{column-gap:10px}
  .cbv2-turn-n{font-size:34px}
  .cbv2-count{font-size:26px}
  .cbv2-turnbox{padding:7px 10px}
  .cbv2-pips{gap:2px;padding:12px 0 4px}
  .cbv2-pips i{width:3px;height:12px}
  .cbv2-pips i.is-par{margin-right:4px}
  .cbv2-pips i.is-par::after{right:-4px;top:-4px;bottom:-4px;width:2px}
  .cbv2-pips i.is-par::before{right:-11px;top:-14px;font-size:7px;letter-spacing:.6px}
  .cbv2-turn-note,.cbv2-count-note{font-size:10px}
  .cbv2-race{justify-content:flex-start;gap:4px 10px;font-size:10px}
  .cbv2-race b{font-size:13px}
  /* The chat, with the cards in a row right under it; its header steps aside for the thread. */
  .cbv2-chat{grid-template-rows:112px auto;border-radius:14px}
  .cbv2-chat-head{display:none}
  .cbv2-thread-scroll{padding:8px 8px 10px}
  .cbv2-msg{max-width:92%;padding:6px 10px 7px;font-size:13px}
  .cbv2-dock{max-height:none;padding:6px 8px 8px}
  .cbv2-dock-label{margin:0 2px}
  .cbv2-checkout{gap:8px}
  .cbv2-mine{margin-right:auto;padding:5px 9px}
  .cbv2-mine small{font-size:8px}
  .cbv2-mine b{max-width:12ch;font-size:11px}
  .cbv2-mine span{display:none}
  .cbv2-mine{grid-template-columns:auto auto;grid-template-areas:"tv label" "tv name";column-gap:6px;align-items:center}
  .cbv2-mine-tv{width:24px}
  .cbv2-mine small{grid-area:label}
  .cbv2-mine b{grid-area:name}
  .cbv2-mine em{display:none}
  .cbv2-hand{display:flex;overflow:auto hidden;padding:14px 2px 2px;scroll-snap-type:x proximity}
  .cbv2-hand.is-scrolls{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .cbv2-slot{flex:none;min-width:0;scroll-snap-align:start}
  .cbv2-slot+.cbv2-slot{margin-left:8px}
  .cbv2-card{grid-template-columns:minmax(0,1fr);grid-template-rows:44px auto;align-content:start;gap:8px;width:var(--cb-v2-card-w);height:var(--cb-v2-card-h);min-height:0;padding:11px 10px;border-radius:14px;font-size:13px;transform:none;transform-origin:50% 100%}
  .cbv2-card-say{-webkit-line-clamp:5}
  .cbv2-card-art{width:auto;height:44px;border-radius:10px}
  .cbv2-card-art svg{width:30px;height:30px}
  .cbv2-card:hover:not(:disabled),.cbv2-card:focus-visible{transform:translateY(-8px)}
  .cbv2-card.is-guided{transform:translateY(-10px)}
  .cbv2-ring{min-height:40px;margin:0;padding:0 14px;font-size:13px}
  .cbv2-ring svg{width:16px;height:16px}
  .cbv2-tip{width:min(250px,calc(100vw - 48px))}
  .cbv2-stamp{padding:5px 9px;font-size:15px}
  .cbv2-pop{font-size:26px}
  .cbv2-coach{font-size:14px}
  .cbv2-register{top:auto;bottom:8px;transform:translateX(-50%);animation-name:cbv2-reg-in;width:calc(100% - 16px);max-height:calc(100% - 60px);padding:14px 12px 12px;border-radius:16px}
  .cbv2-register-title{margin-bottom:10px;font-size:17px}
  .cbv2-reg-tvs,.cbv2-reg-row{grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:6px}
  .cbv2-reg-tv{padding:8px 4px 6px;gap:6px}
  .cbv2-reg-screen{width:62px;height:38px;padding:3px}
  .cbv2-reg-tv small{font-size:8px;letter-spacing:.4px}
  .cbv2-reg-tv b{font-size:11px}
  .cbv2-reg-tv span{display:none}
  .cbv2-reg-row{min-height:30px;padding:0 6px}
  .cbv2-reg-need{gap:5px;font-size:11px}
  .cbv2-reg-need svg{width:15px;height:15px}
  .cbv2-reg-mark{font-size:15px}
  .cbv2-reg-mark.is-lucky{padding:3px 5px;font-size:8px}
  .cbv2-reg-need .is-long{display:none}
  .cbv2-reg-need .is-short{display:inline}
  .cbv2-reg-legend{gap:4px;padding-bottom:4px;font-size:9px}
  .cbv2-reg-legend span{gap:4px}
  .cbv2-reg-legend .is-lucky{padding:2px 4px;font-size:7px}
  .cbv2.is-map .cbv2-ui{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud" "stage" "map"}
  .cbv2-map{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "steps" "rows" "actions";gap:8px;padding:10px 12px 12px;border-radius:14px}
  .cbv2-map-steps{gap:8px}
  .cbv2-map-steps .cbv2-round{width:34px;height:34px}
  .cbv2-map-sq{width:18px;height:18px}
  .cbv2-map-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .cbv2-map-head .cbv2-end-kicker{flex-basis:100%;margin:0;font-size:9px}
  .cbv2-map-title{margin:0;font-size:16px}
  .cbv2-map-key{gap:2px 8px;font-size:10px}
  .cbv2-map-rows{gap:5px}
  .cbv2-map-row{grid-template-columns:14px minmax(0,1fr);gap:1px 8px}
  .cbv2-map-who{display:flex;align-items:baseline;gap:6px}
  .cbv2-map-who b{font-size:12px}
  .cbv2-map-who small{font-size:8px;letter-spacing:.4px}
  .cbv2-map-line{grid-column:2;font-size:11px}
  .cbv2-map .cbv2-end-actions{flex-direction:row;align-items:center;gap:14px}
  .cbv2-map .cbv2-ring{flex:1}
  .cbv2-region{font-size:8px;letter-spacing:.8px}
  .cbv2-head{gap:5px;padding:3px 7px 3px 5px;font-size:10px}
  .cbv2-head-logo{width:11px;height:11px}
  .cbv2-region b{font-size:9px}
  .cbv2-tag{font-size:10px}
  .cbv2-board{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"you" "demo" "runs" "actions";gap:12px;top:auto;bottom:8px;width:calc(100% - 16px);max-height:calc(100% - 60px);padding:14px 12px;border-radius:16px;transform:translateX(-50%);animation-name:cbv2-reg-in}
  .cbv2-board>.cbv2-end-actions{position:sticky;bottom:-14px;z-index:1;margin:0 -12px -14px;padding:14px 12px;background:linear-gradient(rgba(14,14,14,0),rgba(14,14,14,.96) 35%)}
  .cbv2-board-you{padding:12px 14px}
  .cbv2-strip{gap:5px}
  .cbv2-strip li{width:26px;height:26px}
  .cbv2-strip li b{font-size:14px}
  .cbv2-board-verdict{margin-bottom:8px;font-size:17px}
  .cbv2-board-title{font-size:17px}
  .cbv2-board-title b{font-size:24px}
  .cbv2-board-rows{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .cbv2-board-row{padding:4px 8px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .cbg *{transition:none!important;animation:none!important}
}