/* =====================================================================
   App screens: game shell, cricket, race worlds, tic tac toe, monsters,
   results, share. Loaded after app.css.
   ===================================================================== */
.opt{width:100%; min-height:48px; text-align:left}
.x-top .quit{padding:8px 16px 8px 10px}
.view{position:relative; min-height:0; min-width:0; display:grid}
.view > *{min-height:0}
.turnbar{display:flex; align-items:center; gap:10px; min-height:58px}
.turnbar .sp{flex:1}
.turnbar .slot{height:50px; flex-shrink:1; min-width:52px}
.turnbar .pill{white-space:nowrap; padding:10px 14px; flex-shrink:0}
.hitpop{top:26%; z-index:4}
.pcard.out{opacity:.3}
.pcard .prog{position:absolute; left:0; bottom:0; height:4px; background:var(--pc); box-shadow:0 0 10px var(--pc); transition:width .6s}
.sheet-copy{margin:0; color:#cfdaff; font-size:16px}
.nm-saved{display:flex; flex-direction:column; gap:8px}
.nm-saved:empty{display:none}
.nm-chips{display:flex; flex-wrap:wrap; gap:8px; max-height:188px; overflow:auto; padding:2px}
.nm-chip{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:5px 16px 5px 5px; border-radius:999px; font-weight:700; font-size:17px; background:rgba(120,160,255,.1); border:1px solid rgba(120,160,255,.3)}
.nm-chip .avatar{width:36px; height:36px; font-size:17px; border-radius:50%}
.nm-chip:active{transform:scale(.96)}
.nm-hint.warn{color:#ffd27a}
.muted{color:var(--muted)}

/* setup roster rows: edit button + optional play/sit-out circle */
.prow{padding:0; overflow:hidden}
.prow .pedit{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; text-align:left; font-weight:700; min-height:48px}
.plist.dense .prow .pedit{padding:4px 8px 4px 4px; gap:8px; min-height:40px}
.prow .pin{width:30px; height:30px; margin-left:6px; flex:none; border-radius:50%; border:2px solid color-mix(in srgb, var(--pc) 70%, transparent); color:#08102a; font-weight:900; font-size:15px}
.prow .pin.on{background:var(--pc); box-shadow:0 0 12px color-mix(in srgb, var(--pc) 60%, transparent)}
.prow.out .pedit{opacity:.45}
.prow.out{opacity:1}
.prow.add{padding:8px 10px}
.prow .pdel{flex:none; width:36px; height:36px; margin-right:6px; border-radius:999px; display:grid; place-items:center; font-size:22px; line-height:1; color:#ff8fa3; background:rgba(255,45,85,.1); border:1px solid rgba(255,45,85,.4)}
.prow .pdel:active{transform:scale(.9)}
.plist.dense .prow .pdel{width:30px; height:30px; font-size:18px; margin-right:4px}


/* ---------- race ---------- */
.race-wrap{display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; min-height:0}
.mm-line{background-size:calc(100% / var(--steps, 21)) 100%}
.lanepop.miss{fill:#dfe6ff; stroke:#1a1030}
.sign.sign-world, .sign.sign-clock{left:12px; top:12px; transform:none; align-items:flex-start}
.sign.sign-world .ropes, .sign.sign-clock .ropes{display:none}
.sign em{display:block; font-style:normal; font-weight:700; font-size:14px; letter-spacing:.06em}
.sign em:empty{display:none}
.sign-world .plate{background:#fff; border:0; border-radius:14px; padding:0 0 10px; min-width:170px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.45); text-align:left}
.sign-world .plate small{background:#1d4dd8; color:#fff; text-shadow:none; padding:6px 14px; margin-bottom:6px; letter-spacing:.2em}
.sign-world .plate b{background:linear-gradient(180deg,#1d4dd8,#0a1f6a); -webkit-background-clip:text; background-clip:text; filter:none; padding:0 14px}
.sign-world .plate em{color:#0a1f6a; padding:0 14px}
.sign-clock .plate{background:linear-gradient(180deg,#2a1a5a,#140a34); border:3px solid #ffc83a; box-shadow:0 0 24px rgba(255,200,58,.35)}
.sign-clock .plate small{color:#ffe7a3; text-shadow:none}
.scene.theme-world{background:#061634}
.scene.theme-clock{background:#0a0620}
.w-route{fill:none; stroke:#ffffff; stroke-opacity:.55; stroke-width:4; stroke-dasharray:2 14; stroke-linecap:round}
.w-num{font-family:var(--num); font-size:20px; fill:#fff; text-anchor:middle; paint-order:stroke; stroke:#061634; stroke-width:6}
.w-lbl{font-family:var(--ui); font-weight:700; font-size:15px; fill:#bfe9ff; text-anchor:middle; paint-order:stroke; stroke:#061634; stroke-width:5; letter-spacing:.04em}
.w-pulse{fill:none; stroke:#ffd84a; stroke-width:4; opacity:0; transform-box:fill-box; transform-origin:center}
.w-stop.next .w-pulse{animation:wpulse 1.2s ease-out infinite}
.w-stop.next circle:nth-child(2){fill:#ffd84a; stroke:#fff}
@keyframes wpulse{from{opacity:1; transform:scale(.6)} to{opacity:0; transform:scale(1.8)}}
.w-home{animation:homeBob 2.4s ease-in-out infinite alternate}
@keyframes homeBob{to{transform:translateY(-4px)}}
.plane-num{font-family:var(--num); font-size:11px; fill:#fff; text-anchor:middle; dominant-baseline:central}
.plane .plane-body{filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.c-num{font-family:var(--num); font-size:42px; fill:#e8e4ff; text-anchor:middle; dominant-baseline:central; transition:fill .3s}
.c-num.next{fill:#ffd84a; animation:cnum 1s ease-in-out infinite alternate}
@keyframes cnum{to{fill:#fff7d0}}
.c-brand{font-family:var(--num); font-size:16px; letter-spacing:.3em; fill:#8f86c8; text-anchor:middle}
.c-chime{fill:none; stroke:#ffd84a; stroke-width:10; opacity:0; transform-box:fill-box; transform-origin:center}
.c-chime.ring{animation:chime 1.2s ease-out}
@keyframes chime{0%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(1.35)}}
.gear{transform-box:fill-box; transform-origin:center}
.gear.g1{animation:spin 60s linear infinite} .gear.g2{animation:spin 40s linear infinite reverse} .gear.g3{animation:spin 30s linear infinite}
.hand, .hand-num{transform-box:view-box}
.hand:not(.on){opacity:.8}
.hand.on .hand-tip{stroke:#fff; stroke-width:4}

/* ---------- tic tac toe ---------- */
.ttt-wrap{padding:14px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; justify-items:center; min-height:0}
.ttt-grid{position:relative; height:100%; aspect-ratio:1; max-width:100%; display:grid; grid-template:repeat(3, minmax(0,1fr)) / repeat(3, minmax(0,1fr)); gap:10px; min-height:0}
.ttt-cell{--oc:transparent; position:relative; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(180deg, rgba(36,56,120,.55), rgba(9,14,38,.85)); border:1px solid var(--edge); overflow:hidden; transition:border-color .3s, box-shadow .3s; min-height:0}
.ttt-cell.live{border-color:rgba(255,216,74,.45)}
.ttt-n{font-family:var(--num); font-size:clamp(22px, 6vh, 52px); line-height:1; color:#fff; position:relative; z-index:1}
.ttt-own{position:absolute; inset:0; display:grid; place-items:center}
.ttt-cell.owned{background:linear-gradient(160deg, color-mix(in srgb, var(--oc) 55%, #0b1230), color-mix(in srgb, var(--oc) 22%, #070b1e)); border-color:var(--oc); box-shadow:inset 0 0 40px color-mix(in srgb, var(--oc) 40%, transparent)}
/* a claimed cell keeps its number small in the corner so it never sits under the big X or O */
.ttt-cell.owned .ttt-n{position:absolute; top:8px; left:12px; font-size:clamp(14px, 2.6vh, 22px); opacity:.7}
.ttt-marks{display:flex; gap:clamp(4px, .9vh, 10px); min-height:clamp(24px, 4.4vh, 40px); position:relative; z-index:1}
.ttt-mini{width:clamp(24px, 4.4vh, 40px); height:clamp(24px, 4.4vh, 40px); overflow:visible; filter:drop-shadow(0 0 6px rgba(255,255,255,.18)); animation:tttMini .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes tttMini{from{transform:scale(.2); opacity:0}}
.ttt-glyph{width:72%; height:72%; overflow:visible}
.ttt-glyph .draw, .ttt-line .draw{fill:none; stroke-width:12; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200; animation:draw .45s ease-out forwards; filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}
.ttt-glyph .d2{animation-delay:.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.ttt-line{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.ttt-line .draw{stroke-width:9; stroke-dasharray:460; stroke-dashoffset:460; animation-duration:.6s}
.ttt-cell.pop{animation:cellPop .35s ease-out}
.ttt-cell.claim{animation:cellClaim .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes cellPop{50%{transform:scale(.96)}}
@keyframes cellClaim{0%{transform:scale(.8)} 100%{transform:scale(1)}}
.ttt-legend{display:flex; gap:18px; font-weight:700}
.ttt-legend span{display:flex; align-items:center; gap:8px}
.ttt-legend b{font-family:var(--num); font-weight:400; font-size:22px; color:var(--pc)}

/* ---------- monster bash ---------- */
.mon-wrap{position:relative; display:grid; min-height:0}
.mon-scene{background:#080418}
.mon-vs{font-family:var(--num); font-size:110px; text-anchor:middle; dominant-baseline:central; opacity:.9}
.beam{transform-box:fill-box; transform-origin:50% 0; animation:beam 6s ease-in-out infinite alternate}
.beam.b2{animation-delay:-2s} .beam.b3{animation-delay:-4s}
@keyframes beam{from{transform:rotate(-8deg)} to{transform:rotate(8deg)}}
.mon-rig{transform-box:fill-box; transform-origin:50% 100%}
.mon .mon-body{transform-box:fill-box; transform-origin:50% 100%; animation:breathe 2.2s ease-in-out infinite alternate}
.mon.turn .mon-body{animation-duration:.9s}
.mon .pupil{animation:look 4s ease-in-out infinite}
.mon .antenna{animation:blink 1.4s steps(2) infinite}
.mon-shadow{fill:rgba(0,0,0,.4)}
@keyframes breathe{to{transform:scale(1.03, .97)}}
@keyframes look{0%,40%{transform:translate(0,0)} 50%,90%{transform:translate(-8px,2px)}}
@keyframes blink{50%{fill:#ff6ad5}}
.mon.lunge .mon-rig{animation:lunge .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes lunge{40%{transform:translateX(70px) scale(1.06)}}
.mon.hurt .mon-rig{animation:hurt .5s linear}
@keyframes hurt{0%,100%{transform:none; filter:none} 15%{transform:translateX(-18px) rotate(-6deg); filter:brightness(3)} 35%{transform:translateX(14px) rotate(4deg); filter:brightness(1.8)} 60%{transform:translateX(-8px)} 80%{transform:translateX(4px)}}
.mon.healing .mon-rig{animation:heal .7s ease-out}
@keyframes heal{40%{filter:drop-shadow(0 0 30px #3cf0a0) brightness(1.3); transform:scale(1.06)}}
.mon.ko .mon-rig{transition:transform .8s cubic-bezier(.5,0,.7,.4), filter .8s; transform:rotate(-75deg) translateY(30px); filter:grayscale(.9) brightness(.6)}
.mon-shot{opacity:0}
.mon-shot.on{opacity:1; filter:drop-shadow(0 0 14px #fff)}
.mon-shot.crit{r:28px}
.lanepop.dmg{fill:#ff5c7a; stroke:#2a0010}
.lanepop.crit{fill:#ffd84a; stroke:#4a2600; font-size:46px}
.lanepop.heal{fill:#7dffc8; stroke:#003a22}
.mon-hud{position:absolute; left:12px; right:12px; top:12px; display:grid; grid-template-columns:1fr 1fr; gap:14px; pointer-events:none}
.mon-hp{padding:10px 12px; border-radius:16px; background:rgba(8,4,24,.72); border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); transition:box-shadow .3s; min-width:0}
.mon-hp.on{box-shadow:0 0 0 2px var(--pc), 0 0 24px color-mix(in srgb, var(--pc) 45%, transparent)}
.mon-hp-top{display:flex; align-items:center; gap:8px; margin-bottom:8px; min-width:0}
.mon-hp.r .mon-hp-top{flex-direction:row-reverse}
.mon-hp-top .avatar{width:28px; height:28px; font-size:13px; border-radius:9px}
.mon-hp-top b{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mon-hp-top em{font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--muted); font-weight:700}
.mon-hp-top strong{margin-left:auto; font-family:var(--num); font-weight:400; font-size:26px}
.mon-hp.r .mon-hp-top strong{margin-left:0; margin-right:auto}
.mon-bar{position:relative; height:16px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden}
.mon-hp.r .mon-bar{transform:scaleX(-1)}
.mon-bar i{position:absolute; left:0; top:0; bottom:0; border-radius:999px}
.mon-bar .lag{background:#fff; opacity:.5; transition:width .9s .55s ease}
.mon-bar .fill{background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc)); box-shadow:0 0 12px var(--pc); transition:width .35s .35s ease}
.mon-hp.low .mon-bar .fill{background:linear-gradient(90deg,#ff9aad,#ff2d55); animation:lowhp .6s ease-in-out infinite alternate}
@keyframes lowhp{to{opacity:.6}}
.mon-targets{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:8px; pointer-events:none}
.mt{padding:8px 14px; border-radius:999px; font-weight:700; font-size:13px; letter-spacing:.12em; white-space:nowrap; background:rgba(8,4,24,.8)}
.mt b{font-family:var(--num); font-weight:400; font-size:22px; letter-spacing:0; margin-left:6px}
.mt.atk{border:2px solid #ff3b5c; color:#ffb0c0} .mt.atk b{color:#ff3b5c}
.mt.heal{border:2px dashed #ffffff; color:#eef2ff} .mt.heal b{color:#ffffff}
.mt.crit{border:2px solid #ffd84a; color:#ffeaa0} .mt.crit b{color:#ffd84a; font-size:16px}

/* ---------- results ---------- */
#scr-results{overflow:auto; padding:0 14px 110px}
#scr-results.on{display:block}
.res-body{max-width:1240px; margin:0 auto}
.res-hero{--pc:var(--gold); position:relative; text-align:center; padding:34px 20px 26px}
.res-hero::before{content:""; position:absolute; left:50%; top:-40px; width:min(900px, 120vw); height:340px; transform:translateX(-50%); background:radial-gradient(ellipse at center, color-mix(in srgb, var(--pc) 35%, transparent), transparent 65%); pointer-events:none}
.res-title{position:relative; margin:10px 0 4px; font-family:var(--num); font-weight:400; font-size:clamp(46px, 9vw, 110px); line-height:1; text-wrap:balance}
.res-title::before{content:attr(data-text); position:absolute; left:0; right:0; top:0; color:#4a2600; text-shadow:0 3px 0 #7a4600,0 6px 0 #5a3200,0 9px 0 #3a1f00,0 24px 40px rgba(0,0,0,.7)}
.res-title span{position:relative; background:linear-gradient(180deg,#fffdf0 0%,#ffe690 26%,#ffbe1a 50%,#fff3c0 52%,#f0a000 76%,#ffd766 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.res-line{position:relative; margin:8px 0 22px; font-size:20px; font-weight:700; color:#fff}
.share-cta{position:relative; display:inline-flex; align-items:center; gap:14px; padding:20px 44px; border-radius:999px; font-family:var(--num); font-size:clamp(22px, 3vw, 30px); letter-spacing:.06em; color:#1a0f00; overflow:hidden;
  background:linear-gradient(180deg,#fff3b0 0%,#ffc83a 45%,#e08a00 100%); box-shadow:0 0 0 2px rgba(255,255,255,.4) inset, 0 12px 34px rgba(255,170,0,.45), 0 0 60px rgba(255,190,40,.35); animation:ctaPulse 2.4s ease-in-out infinite}
.share-cta svg{width:34px; height:34px; position:relative; z-index:1}
.share-cta::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); background-size:250% 100%; animation:sheen 2.4s ease-in-out infinite}
.share-cta:active{transform:scale(.97)}
@keyframes ctaPulse{50%{box-shadow:0 0 0 2px rgba(255,255,255,.4) inset, 0 12px 44px rgba(255,170,0,.6), 0 0 90px rgba(255,190,40,.5)}}
.res-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:14px}
.res-card{padding:18px 20px; min-width:0}
.res-card h3{margin:0 0 12px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.res-stand{grid-column:span 5}
.res-table-card{grid-column:span 7}
.res-chart-card{grid-column:span 7}
.res-heat-card{grid-column:span 5}
.res-awards{grid-column:span 12}
.stand-row{display:grid; grid-template-columns:34px 40px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px; border-radius:16px; background:rgba(120,160,255,.06); border:1px solid rgba(120,160,255,.12)}
.stand-row.gold{background:linear-gradient(90deg, rgba(255,197,61,.22), rgba(120,160,255,.04)); border-color:rgba(255,197,61,.5)}
.stand-row .rank{font-family:var(--num); font-size:24px; text-align:center; color:#6f7cab}
.stand-row.gold .rank{color:#ffc53d} .stand-row.silver .rank{color:#dfe6ff} .stand-row.bronze .rank{color:#e0a070}
.st-name{min-width:0} .st-name b{display:block; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-name small, .st-key small{display:block; color:var(--muted); font-size:12px; font-weight:600}
.st-key{text-align:right; font-family:var(--num); font-size:24px; color:var(--pc); font-variant-numeric:tabular-nums}
.st-key small{font-family:var(--ui); letter-spacing:.08em; text-transform:uppercase; font-size:10px}
.res-table-scroll{overflow-x:auto}
.res-table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.res-table th{padding:8px 10px; font-size:14px; text-align:center; white-space:nowrap; border-bottom:3px solid var(--pc)}
.res-table th .dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--pc); margin-right:6px}
.res-table td{padding:9px 10px; text-align:center; font-weight:700; border-bottom:1px solid rgba(120,160,255,.1)}
.res-table td:first-child{text-align:left; color:var(--muted); font-weight:600; white-space:nowrap}
.res-table tr.key td:not(:first-child){font-family:var(--num); font-weight:400; font-size:20px}
.res-chart svg{width:100%; height:240px; overflow:visible}
.res-chart .grid{stroke:rgba(140,175,255,.14); stroke-width:1}
.res-chart .axis{fill:var(--muted); font-size:12px; font-weight:600; font-family:var(--ui)}
.heat-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.heat-tabs button{padding:6px 12px; min-height:36px; border-radius:999px; font-weight:700; font-size:13px; border:1px solid color-mix(in srgb, var(--pc) 45%, transparent)}
.heat-tabs button.on{background:var(--pc); color:#08102a}
.heat-board{position:relative; aspect-ratio:1; max-height:340px; margin:0 auto}
svg.board.heat .seg{opacity:.3}
.heat-seg{pointer-events:none}
.aw-row{display:flex; align-items:center; gap:14px; padding:10px 14px; margin-bottom:8px; border-radius:14px; background:rgba(120,160,255,.06); border-left:5px solid var(--pc); font-weight:700}
.aw-t{font-family:var(--num); font-weight:400; font-size:20px; color:#ffd766; letter-spacing:.03em}
.aw-row small{margin-left:auto; color:var(--muted)}
.res-actions{position:fixed; left:0; right:0; bottom:0; z-index:5; display:none; justify-content:center; gap:12px; padding:14px; background:linear-gradient(0deg, rgba(4,7,22,.96) 55%, transparent)}
#scr-results.on .res-actions{display:flex}
.res-actions .pill{min-width:150px; justify-content:center; font-size:17px}

/* share + preview sheets */
.share-sheet{width:min(560px, 100%)}
.share-ico{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#1a0f00; background:linear-gradient(180deg,#fff3b0,#ffc83a 50%,#e08a00)}
.share-ico svg{width:30px; height:30px}
.share-field{display:flex; gap:8px}
.share-field input{flex:1; min-width:0; padding:14px 22px; border-radius:999px; font:600 20px var(--ui); color:#fff; background:rgba(4,7,22,.65); border:2px solid rgba(255,200,58,.5); outline:none}
.share-field input:focus{box-shadow:0 0 0 4px rgba(255,200,58,.25)}
.chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chips:empty{display:none}
.chips .eyebrow{width:100%}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; min-height:40px; border-radius:999px; font-weight:700; font-size:14px; background:rgba(120,160,255,.1); border:1px solid rgba(120,160,255,.3)}
.chip.on{background:rgba(255,200,58,.18); border-color:rgba(255,200,58,.6); color:#ffe7a3}
.chip span{font-size:18px; line-height:1; opacity:.7}
.share-status{min-height:22px; font-weight:600; color:#cfdaff}
.share-status.err{color:#ff9aad}
.share-status.ok{color:#7dffc8}
.preview-sheet{width:min(760px, 100%); height:min(90vh, 1000px); padding:16px; gap:12px}
.preview-head{display:flex; align-items:center; gap:12px}
.preview-head > div{flex:1; min-width:0}
.preview-head b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#previewFrame{flex:1; width:100%; border:0; border-radius:16px; background:#05081a}

@media (orientation:portrait){
  .res-stand, .res-table-card, .res-chart-card, .res-heat-card, .res-awards{grid-column:span 12}
  .turnbar .slot{width:clamp(64px, 16vw, 100px); height:44px; font-size:18px}
  .mon-vs{font-size:80px}
  .mon-hp-top b{font-size:14px}
  .mt{font-size:11px; padding:6px 10px}
}

/* ---------- menu fit: START never leaves the panel; cards center in their column ---------- */
.setup{min-height:0; overflow:hidden}
.setup-scroll{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; margin:0 -6px; padding:2px 6px}
.setup .start{margin-top:0; flex:none}
.cards{align-content:center; justify-content:center; min-height:0; height:100%}
.cards .card{width:100%; max-width:min(240px, calc((100vh - 230px) * .62))}
.cards{justify-items:center}
@media (max-height:720px) and (orientation:landscape){
  .m-head{padding:0 6px}
  .logo-mark{width:38px; height:38px} .logo-word{font-size:23px}
  .setup{padding:14px; gap:10px}
  .setup h4{font-size:19px}
  .rpill button{min-height:44px; font-size:22px}
  .setup .start{padding:13px; font-size:22px}
  .plist.dense .prow .pedit{min-height:36px}
  .card .meta{padding:10px 12px 12px}
  .card h3{font-size:19px}
}
.card .meta{flex:1}
.res-grid{align-items:start}
.sign-world .plate b, .sign-clock .plate b{font-size:clamp(40px, 8vh, 64px)}
.pcards{grid-template-columns:repeat(var(--n, 4), minmax(0,1fr))}

/* board target extras: x2 / x3 ring labels, player labels, tinted and striped wedges */
.tgt-mult{font-family:var(--num); font-size:15px; fill:#fff; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#050818; stroke-width:4; pointer-events:none}
.tgt-label{font-family:var(--num); font-size:17px; fill:#fff; text-anchor:middle; dominant-baseline:central; paint-order:stroke; stroke:#050818; stroke-width:5; pointer-events:none}
.tgt-fill{pointer-events:none}
.tgt-outline.dash{stroke-dasharray:10 6}

/* monster bash, 2-3 players */
.mon-hud{grid-template-columns:repeat(var(--n, 2), minmax(0,1fr))}
.mon-hp.ko{opacity:.45}
.mt.lap{display:flex; align-items:center; gap:8px; border:2px solid #fff; color:#fff}
.mt.lap i{width:26px; height:14px; border-radius:4px; background:repeating-linear-gradient(45deg, #ffc53d 0 5px, #ff4fb4 5px 10px)}
.mon-shot.on{filter:drop-shadow(0 0 12px #fff)}

/* ---------- two line ---------- */
.tl-wrap{padding:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; min-height:0; background:radial-gradient(ellipse at 40% 40%, rgba(255,190,40,.18), transparent 65%), linear-gradient(180deg, rgba(36,56,120,.50), rgba(9,14,38,.82))}
.tl-grid{position:relative; height:100%; max-height:100%; aspect-ratio:1; max-width:100%; justify-self:center; display:grid; grid-template:repeat(5, minmax(0,1fr)) / repeat(5, minmax(0,1fr)); gap:7px; min-height:0}
.tl-box{--oc:transparent; position:relative; display:grid; place-items:center; border-radius:12px; min-height:0; overflow:hidden;
  background:linear-gradient(160deg, #ffffff 0%, #dfe5f2 45%, #aab4cc 100%); box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.9), 0 4px 10px rgba(0,0,0,.35)}
.tl-box .tl-n{font-family:var(--num); font-size:clamp(18px, 5.2vh, 44px); line-height:1; color:#15203d; position:relative; z-index:1}
.tl-box.star{background:linear-gradient(160deg, #fffaf0 0%, #ffe8a8 50%, #e8b440 100%)}
.tl-box.star .tl-n{color:#b86a00; text-shadow:0 0 12px rgba(255,200,60,.8)}
.tl-box.owned{background:linear-gradient(160deg, color-mix(in srgb, var(--oc) 55%, #fff) 0%, var(--oc) 50%, color-mix(in srgb, var(--oc) 60%, #000) 100%); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.55), 0 0 16px color-mix(in srgb, var(--oc) 55%, transparent)}
.tl-box.owned .tl-n{color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35)}
.tl-crack{position:absolute; inset:0; opacity:0; background:linear-gradient(115deg, transparent 44%, rgba(10,10,20,.75) 45%, rgba(10,10,20,.75) 48%, transparent 49%), linear-gradient(35deg, transparent 58%, rgba(10,10,20,.6) 59%, rgba(10,10,20,.6) 61%, transparent 62%)}
.tl-box.cracked .tl-crack{opacity:1}
.tl-box.flip{animation:tlFlip .5s ease-out}
.tl-box.hit{animation:tlHit .4s linear}
.tl-box.bump{animation:bump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes tlFlip{0%{transform:perspective(400px) rotateY(0)} 50%{transform:perspective(400px) rotateY(90deg) scale(1.08)} 100%{transform:perspective(400px) rotateY(0)}}
@keyframes tlHit{20%{transform:translateX(-6px) rotate(-4deg)} 40%{transform:translateX(5px) rotate(3deg)} 60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}
.tl-lines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2}
.tl-line{fill:none; stroke-width:12; stroke-linecap:round; opacity:.9; filter:drop-shadow(0 0 8px rgba(255,255,255,.7)); stroke-dasharray:720; stroke-dashoffset:720; animation:draw .6s ease-out forwards}
.tl-line.win{stroke-width:16; animation:draw .6s ease-out forwards, tlWin .6s .6s ease-in-out infinite alternate}
@keyframes tlWin{to{opacity:.55}}
.tl-side{display:flex; flex-direction:column; gap:10px; width:clamp(140px, 16vw, 200px)}
.tl-lc{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px 8px; padding:10px 12px; border-radius:16px; background:rgba(4,7,22,.45); border:1px solid color-mix(in srgb, var(--pc) 40%, transparent); transition:box-shadow .3s}
.tl-lc.on{box-shadow:0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 45%, transparent)}
.tl-lc .avatar{width:28px; height:28px; font-size:13px; border-radius:9px}
.tl-lc b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-pips{display:flex; gap:6px}
.tl-pips i{width:36px; height:12px; border-radius:6px; background:rgba(255,255,255,.14)}
.tl-pips i.lit{background:var(--pc); box-shadow:0 0 10px var(--pc)}
.tl-lc small{font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--muted)}
.tl-rule{font-size:13px; font-weight:600; color:var(--muted); text-align:center}
.tl-rule b{color:#ffd766}
@media (orientation:portrait){ .tl-wrap{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto} .tl-side{flex-direction:row; width:auto; align-items:center} .tl-lc{flex:1} .tl-rule{display:none} }
.tl-pips, .tl-lc small{grid-column:1/-1}
.tl-lc b{text-align:left}
.mon-hud[style*="--n:4"] .mon-hp-top em{display:none}
.mon-hud[style*="--n:4"] .mon-hp-top strong{font-size:22px}
.mon-hud[style*="--n:4"] .mon-hp{padding:8px 10px}

/* setup: pick-one options (01 start rule) and the records round note */
.ochoice{display:flex; flex-direction:column; gap:6px}
.rpill.small button{min-height:42px; font-family:var(--ui); font-weight:700; font-size:15px; letter-spacing:.02em}
.rec-note{margin-top:2px; text-align:center; font-size:13px; font-weight:600; color:#ffd27a}

/* ---------- turn intro: who is up, the round plate, and the game name + lineup before the first dart ---------- */
.intro{position:fixed; inset:0; z-index:60; display:grid; place-items:center; overflow:hidden; --pc:var(--gold); cursor:pointer}
.in-veil{position:absolute; inset:0; background:radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--pc) 30%, rgba(4,7,22,.8)) 0%, rgba(3,5,16,.94) 72%)}
.in-slash{position:absolute; left:-100vw; right:-100vw; transform:skewY(-6deg); z-index:-1}
.in-slash.a{top:-12%; bottom:-12%; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 55%, #000) 16%, color-mix(in srgb, var(--pc) 80%, #000) 50%, color-mix(in srgb, var(--pc) 55%, #000) 84%, transparent); opacity:.92}
.in-slash.b{bottom:-22%; height:4px; background:linear-gradient(90deg, transparent, #fff 50%, transparent); opacity:.6}
.in-stage{position:relative; display:flex; flex-direction:column; align-items:center; gap:2.4vh; padding:0 4vw; text-align:center}
.in-game{display:flex; flex-direction:column; align-items:center; gap:12px}
.in-game-name{font-family:var(--num); font-size:clamp(20px, 3.4vh, 34px); letter-spacing:.12em; color:#fff}
.in-lineup{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:80vw}
.in-chip{display:inline-flex; align-items:center; gap:8px; padding:5px 16px 5px 5px; border-radius:999px; background:rgba(10,16,40,.85); border:1px solid color-mix(in srgb, var(--pc) 60%, transparent); font-weight:700; font-size:16px}
.in-round{position:relative; z-index:1; display:flex; align-items:baseline; gap:14px; padding:8px 34px; border-radius:999px; background:linear-gradient(180deg, #fff3b0, #ffc83a 55%, #b86e00); color:#2a1600; box-shadow:0 10px 40px rgba(255,190,40,.35)}
.in-round span{font-family:var(--num); font-size:clamp(18px, 3vh, 28px); letter-spacing:.14em}
.in-round b{font-family:var(--num); font-weight:400; font-size:clamp(40px, 7vh, 68px); line-height:1.05}
.in-round b:empty{display:none}
.in-round.final{background:linear-gradient(180deg, #ffb8c6, #ff2d55 55%, #8a0020); color:#fff; box-shadow:0 10px 40px rgba(255,45,85,.45); padding:14px 40px}
.in-card{position:relative; isolation:isolate; display:flex; align-items:center; gap:3.2vh}
.in-avatar{flex:none; width:clamp(90px, 17vh, 160px); aspect-ratio:1; border-radius:28%; display:grid; place-items:center; font-family:var(--num); font-size:clamp(48px, 9.5vh, 92px); color:#08102a;
  background:linear-gradient(160deg, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 60%, #000)); box-shadow:0 0 0 6px rgba(255,255,255,.12), 0 0 60px color-mix(in srgb, var(--pc) 70%, transparent)}
.in-txt{display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-width:0}
.in-eye{font-weight:700; letter-spacing:.45em; font-size:clamp(13px, 2vh, 18px); color:#fff; opacity:.85}
.in-name{font-family:var(--num); font-weight:400; font-size:clamp(56px, 13vh, 140px); line-height:1; color:#fff; letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 6px 0 rgba(0,0,0,.35), 0 0 40px color-mix(in srgb, var(--pc) 80%, transparent)}
.in-info{margin-top:1.4vh; padding:6px 20px; border-radius:999px; background:rgba(4,7,22,.78); border:1px solid rgba(255,216,74,.55); color:#ffe7a3; font-family:var(--num); font-size:clamp(18px, 3vh, 30px); letter-spacing:.08em}
.in-skip{position:fixed; left:0; right:0; bottom:4vh; text-align:center; font-weight:700; font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:#fff; opacity:.5}
.intro.go .in-veil{animation:inFade .25s ease-out both}
.intro.go .in-slash.a{animation:inSlash .55s cubic-bezier(.2,.9,.2,1) both}
.intro.go .in-slash.b{animation:inSlash .7s .08s cubic-bezier(.2,.9,.2,1) both}
.intro.go .in-game{animation:inDrop .5s .05s cubic-bezier(.2,1.3,.4,1) both}
.intro.go .in-round{animation:inDrop .5s .1s cubic-bezier(.2,1.4,.4,1) both}
.intro.go .in-avatar{animation:inPop .5s .15s cubic-bezier(.2,1.5,.4,1) both}
.intro.go .in-name{animation:inName .55s .2s cubic-bezier(.2,1,.3,1) both}
.intro.go .in-eye, .intro.go .in-info, .intro.go .in-skip{animation:inFade .4s .3s both}
.intro.out{animation:inOut .32s ease-in forwards}
@keyframes inFade{from{opacity:0}}
@keyframes inSlash{from{transform:skewY(-6deg) translateX(-110%)}}
@keyframes inDrop{from{opacity:0; transform:translateY(-40px) scale(.8)}}
@keyframes inPop{from{opacity:0; transform:scale(.3) rotate(-12deg)}}
@keyframes inName{from{opacity:0; transform:translateX(60px)}}
@keyframes inOut{to{opacity:0; transform:scale(1.04)}}
@media (orientation:portrait){
  .in-card{flex-direction:column}
  .in-txt{align-items:center; text-align:center}
  .in-card{gap:1.6vh}
}
.intro[hidden], .in-game[hidden], .in-round[hidden], .in-info[hidden]{display:none}

/* ---------- sound: speaker pills (menu opens the sheet, game screen mutes) and the Sound sheet ---------- */
.snd-btn{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px; color:#bfe9ff; background:linear-gradient(180deg, rgba(120,160,255,.18), rgba(120,160,255,.06)); border:1px solid rgba(140,175,255,.35); flex:none}
.snd-btn:active{transform:scale(.96)}
.snd-btn svg, .pill.snd svg{width:24px; height:24px; flex:none}
.x-top .pill.snd{padding:8px 12px; flex:none}
.snd-toggle .x{display:none}
.snd-toggle.off .w{display:none}
.snd-toggle.off .x{display:inline}
.snd-toggle.off{color:#ff8fa3; border-color:rgba(255,45,85,.5)}
.snd-vol{cursor:default}
.snd-vol input{flex:1; max-width:62%; height:30px; accent-color:#39d5ff}
.snd-note{font-size:14px; opacity:.7}
.opt:disabled{opacity:.45}

/* ---------- connect 4 ---------- */
.c4-wrap{padding:12px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; justify-items:center; min-height:0; background:radial-gradient(ellipse at 50% 30%, rgba(58,123,255,.22), transparent 70%), linear-gradient(180deg, rgba(36,56,120,.50), rgba(9,14,38,.82))}
.c4-svg{width:100%; height:100%; min-height:0; overflow:visible}
.c4-badge circle{fill:#0b1433; stroke:var(--cc, #fff); stroke-width:5; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--cc, #fff) 70%, transparent)); transition:stroke .3s, opacity .3s}
.c4-badge text{font-family:var(--num); font-size:36px; fill:#fff}
.c4-badge.full{opacity:.3}
.c4-badge.full circle{stroke:#5a6a9a; filter:none}
.c4-frame{filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.c4-rims circle{fill:none; stroke:rgba(4,10,40,.45); stroke-width:5}
.c4-ring{fill:none; stroke:#fff; stroke-width:7; filter:drop-shadow(0 0 10px #fff); animation:c4Pulse 1s ease-in-out infinite alternate}
.c4-line{stroke:#fff; stroke-width:10; stroke-linecap:round; opacity:.85; stroke-dasharray:700; stroke-dashoffset:700; animation:draw .6s ease-out forwards}
@keyframes c4Pulse{to{stroke-width:3; opacity:.6}}
.c4-legend{display:flex; gap:18px; font-weight:700; font-size:15px}
.c4-legend span{display:inline-flex; align-items:center; gap:8px; padding:4px 14px 4px 6px; border-radius:999px; border:1px solid transparent; opacity:.7}
.c4-legend span.on{opacity:1; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06)}
.c4-legend i{width:22px; height:22px; border-radius:50%; box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}

/* ---------- hunter: glass vials ---------- */
.hv-stage{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 16px 10px; overflow:hidden; min-height:0;
  background:radial-gradient(ellipse at 50% 18%, rgba(255,196,110,.14), transparent 62%), linear-gradient(180deg, #1c1f33, #0a0c18)}
.hv-gears{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.hv-gears g{fill:rgba(210,170,100,.07); stroke:rgba(210,170,100,.07)}
.hv-goal{position:relative; align-self:center; padding:3px 16px; border-radius:999px; font-weight:700; font-size:12px; letter-spacing:.3em; color:#e9cf98; background:rgba(10,8,4,.55); border:1px solid rgba(232,192,112,.4)}
.hv-goal b{font-family:var(--num); font-weight:400; font-size:16px; letter-spacing:.04em; color:#fff}
.hv-row{position:relative; flex:1; min-height:0; display:flex; justify-content:center; align-items:stretch; gap:clamp(10px, 3vw, 44px)}
.hv{flex:0 1 120px; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; gap:6px}
.hv-score{font-family:var(--num); font-size:clamp(20px, 5vh, 46px); line-height:1; color:#fff; text-shadow:0 0 18px color-mix(in srgb, var(--pc) 70%, transparent), 0 3px 0 rgba(0,0,0,.5)}
.hv-tube{position:relative; flex:1; min-height:60px; width:min(100%, 84px)}
.hv-tube::before{content:""; position:absolute; left:50%; top:-10px; width:10px; height:12px; margin-left:-5px; border-radius:2px; background:repeating-linear-gradient(180deg, #d8b878 0 2px, #6b5020 2px 4px)}
.hv-cap, .hv-base{position:absolute; left:-7px; right:-7px; height:20px; border-radius:6px; background:linear-gradient(90deg, #4a3510, #e8c878 32%, #fff0c0 42%, #9a7430 68%, #3c2a0c); box-shadow:0 3px 8px rgba(0,0,0,.5); z-index:2}
.hv-cap{top:0; display:grid; place-items:center}
.hv-cap span{font-family:var(--num); font-size:11px; color:#3a2600; opacity:.8}
.hv-base{bottom:0}
.hv-glass{position:absolute; top:16px; bottom:16px; left:0; right:0; overflow:hidden; border-radius:6px; border:2px solid rgba(220,235,255,.32);
  background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 30%, rgba(255,255,255,.05) 70%, rgba(255,255,255,.14)); transition:border-color .3s, box-shadow .3s}
.hv-glass::after{content:""; position:absolute; top:8px; bottom:8px; left:16%; width:10%; border-radius:6px; background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08)); pointer-events:none; z-index:1}
.hv-ticks{position:absolute; inset:0; background:repeating-linear-gradient(0deg, transparent 0 calc(10% - 2px), rgba(255,255,255,.18) calc(10% - 2px) 10%); -webkit-mask:linear-gradient(90deg, transparent 70%, #000 72%); mask:linear-gradient(90deg, transparent 70%, #000 72%); pointer-events:none}
.hv-liquid{position:absolute; left:0; right:0; bottom:0; height:0; transition:height .75s cubic-bezier(.3,1.25,.45,1);
  background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, #000), var(--pc) 38%, color-mix(in srgb, var(--pc) 55%, #fff) 52%, var(--pc) 66%, color-mix(in srgb, var(--pc) 55%, #000));
  box-shadow:0 0 26px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 -20px 30px rgba(0,0,0,.25)}
.hv-liquid::before{content:""; position:absolute; left:0; right:0; top:-4px; height:8px; border-radius:50%; background:color-mix(in srgb, var(--pc) 45%, #fff); opacity:.85}
.hv-liquid i{position:absolute; bottom:4px; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); animation:hvBubble 2.4s ease-in infinite}
.hv-liquid i:nth-child(1){left:30%} .hv-liquid i:nth-child(2){left:58%; animation-delay:.8s; width:4px; height:4px} .hv-liquid i:nth-child(3){left:44%; animation-delay:1.6s}
@keyframes hvBubble{0%{transform:translateY(0); opacity:0} 15%{opacity:.8} 100%{transform:translateY(-120px); opacity:0}}
.hv.drain .hv-liquid{transition:height 1.2s cubic-bezier(.6,0,.9,.6)}
.hv.full .hv-liquid{animation:hvFull .8s ease-in-out infinite alternate}
@keyframes hvFull{to{box-shadow:0 0 50px var(--pc), inset 0 -20px 30px rgba(0,0,0,.2)}}
.hv.on .hv-glass{border-color:color-mix(in srgb, var(--pc) 60%, #fff); box-shadow:0 0 24px color-mix(in srgb, var(--pc) 55%, transparent)}
.hv-plate{max-width:calc(100% + 16px); padding:5px 12px; border-radius:8px; font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#2e1e00;
  background:linear-gradient(180deg, #f6dc98, #c89a42 55%, #8a6420); box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5)}
.hv.on .hv-plate{color:#fff; background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 55%, #fff), var(--pc) 55%, color-mix(in srgb, var(--pc) 60%, #000)); box-shadow:0 0 18px color-mix(in srgb, var(--pc) 60%, transparent)}
.hv-mark{position:absolute; left:50%; bottom:calc(16px + (100% - 32px) * var(--lvl, 0)); transform:translate(-50%, 50%); z-index:3; padding:2px 8px; border-radius:999px; font-weight:800; font-size:12px; white-space:nowrap; color:#08102a; background:#7ff0c0; box-shadow:0 0 10px rgba(127,240,192,.5); animation:hvMark 1.1s ease-in-out infinite alternate}
@keyframes hvMark{to{box-shadow:0 0 22px rgba(127,240,192,1)}}
.hv-mark[hidden]{display:none}
.hv-boom{position:absolute; left:50%; top:35%; z-index:4; font-family:var(--num); font-size:clamp(16px, 3vh, 26px); color:#fff; white-space:nowrap; opacity:0; pointer-events:none; text-shadow:0 0 12px #ff2d55, 0 2px 0 #000}
.hv-boom.go{animation:hvBoom 1.3s ease-out}
@keyframes hvBoom{0%{opacity:0; transform:translate(-50%, 0) scale(.3) rotate(-10deg)} 20%{opacity:1; transform:translate(-50%, 0) scale(1.35) rotate(-6deg)} 70%{opacity:1; transform:translate(-50%, -20px) scale(1) rotate(-6deg)} 100%{opacity:0; transform:translate(-50%, -40px) scale(1)}}
.hv-row.dense .hv-plate{font-size:11px; padding:4px 7px}
.hv-row.dense .hv-score{font-size:clamp(16px, 3.6vh, 30px)}
.hv-stage .checkout{position:relative; align-self:center}

/* ---------- cricket: numbers down the middle, a capsule of marks per player, on a starfield ---------- */
.ck-stage{position:relative; padding:10px 16px 12px; overflow:hidden; min-height:0; display:flex; background:#04061a}
.ck-sky{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 27% 64%, #cfe0ff, transparent), radial-gradient(1.5px 1.5px at 41% 32%, #fff, transparent),
    radial-gradient(1px 1px at 58% 12%, #fff, transparent), radial-gradient(2px 2px at 73% 48%, #dfe8ff, transparent), radial-gradient(1px 1px at 86% 22%, #fff, transparent),
    radial-gradient(1px 1px at 91% 78%, #fff, transparent), radial-gradient(1.5px 1.5px at 18% 86%, #fff, transparent), radial-gradient(1px 1px at 66% 90%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 35% 8%, #fff, transparent), radial-gradient(1px 1px at 8% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 50% 72%, #fff, transparent),
    radial-gradient(ellipse 60% 45% at 70% 35%, rgba(90,60,200,.35), transparent 70%),
    radial-gradient(ellipse 50% 40% at 25% 70%, rgba(30,110,220,.28), transparent 70%),
    linear-gradient(180deg, #070a24, #03040f)}
.ck-planet{position:absolute; width:38%; aspect-ratio:1; left:-12%; bottom:-22%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 62% 30%, #7fb4ff 0%, #2f5bd0 22%, #16246e 48%, #070b2a 72%); box-shadow:0 0 60px rgba(80,140,255,.35); opacity:.7}
.ck-grid{position:relative; flex:1; min-height:0; display:grid; grid-template-rows:clamp(30px, 6vh, 46px) repeat(7, minmax(0, 1fr)); column-gap:clamp(6px, 1.4vw, 18px); max-width:720px; margin:0 auto; width:100%}
.ck-col{grid-row:1 / -1; justify-self:center; width:min(100%, 110px); border-radius:22px; border:3px solid color-mix(in srgb, var(--pc) 70%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pc) 14%, rgba(4,6,20,.55)), rgba(4,6,20,.55)); transition:box-shadow .3s, border-color .3s}
.ck-col.on{border-color:var(--pc); box-shadow:0 0 26px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 0 22px color-mix(in srgb, var(--pc) 22%, transparent)}
.ck-lockwrap{display:grid; place-items:center; height:clamp(30px, 6vh, 46px); color:rgba(255,255,255,.35)}
.ck-lock{width:clamp(18px, 3.4vh, 28px); height:auto; transition:color .3s}
.ck-lock .shackle{transform:translateY(-3px); transition:transform .3s}
.ck-lockwrap.locked{color:#ffd84a; filter:drop-shadow(0 0 8px rgba(255,216,74,.8))}
.ck-lockwrap.locked .shackle{transform:none}
.ck-num{display:grid; place-items:center; font-family:var(--num); font-size:clamp(22px, 6vh, 56px); line-height:1; color:#fff; font-style:italic; text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 18px rgba(140,180,255,.35); transition:opacity .3s, color .3s; position:relative}
.ck-num.bull{color:#ffd84a; font-size:clamp(20px, 5.2vh, 48px)}
.ck-num.score{color:#ffe690; text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 22px rgba(255,200,58,.9)}
.ck-num.dead{opacity:.28}
.ck-num.dead::after{content:""; position:absolute; left:18%; right:18%; top:50%; height:4px; border-radius:2px; background:#fff}
.ck-num.hit{animation:ckHit .5s ease-out}
@keyframes ckHit{30%{transform:scale(1.25)}}
.ck-cell{position:relative; display:grid; place-items:center; min-height:0; color:#fff; transition:opacity .3s}
.ck-cell.dead{opacity:.35}
.ck-g{height:74%; max-height:52px; width:auto; overflow:visible; filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.ck-cell .ck-g3{color:#fff; filter:drop-shadow(0 0 8px var(--pc))}
.ck-cell.pop .ck-g{animation:ckPop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes ckPop{from{transform:scale(1.8) rotate(-12deg); opacity:.3}}
.ck-grid.many .ck-col{border-radius:16px; border-width:2px}
.ck-rlist > div{display:flex; align-items:center; justify-content:space-between}
.ck-marks{display:inline-flex; gap:4px; align-items:center}
.ck-marks > *{width:18px; height:18px; display:inline-grid; place-items:center}
.ck-mini{color:#fff}
.ck-marks i.ck-none::before{content:""; width:8px; height:2px; border-radius:1px; background:rgba(255,255,255,.3)}
@media (orientation:portrait){
  .ck-num{font-size:clamp(16px, 2.3vh, 32px)} .ck-num.bull{font-size:clamp(15px, 2.1vh, 28px)}
  .ck-grid{grid-template-rows:clamp(24px, 3vh, 36px) repeat(7, minmax(0, 1fr))}
  .ck-lockwrap{height:clamp(24px, 3vh, 36px)}
}
.scene > canvas.globe{position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab}

/* ---------- last one standing ---------- */
.lo-stage{position:relative; overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:12px; padding:14px 16px;
  background:radial-gradient(ellipse 70% 55% at 50% -5%, rgba(255,230,160,.22), transparent 70%), linear-gradient(180deg, #14101e, #07060c)}
.lo-light{position:absolute; left:50%; top:-10%; width:70%; height:120%; transform:translateX(-50%); pointer-events:none;
  background:conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255,236,180,.10) 20deg, rgba(255,236,180,.16) 40deg, rgba(255,236,180,.10) 60deg, transparent 80deg); animation:loSway 7s ease-in-out infinite alternate}
@keyframes loSway{from{transform:translateX(-54%) rotate(-3deg)} to{transform:translateX(-46%) rotate(3deg)}}
.lo-banner{position:relative; display:flex; align-items:center; gap:14px; justify-content:center; text-align:left}
.lo-banner b{display:block; font-family:var(--num); font-weight:400; font-size:clamp(20px, 4.2vh, 36px); letter-spacing:.04em; color:#fff}
.lo-banner span{display:block; font-weight:700; font-size:clamp(12px, 1.9vh, 16px); color:#ffe7a3}
.lo-bull{position:relative; width:clamp(40px, 7vh, 60px); aspect-ratio:1; flex:none}
.lo-bull i{position:absolute; inset:0; border-radius:50%; background:#0f4596; box-shadow:0 0 18px rgba(255,216,74,.4)}
.lo-bull i:nth-child(2){inset:22%; background:#2ee6a0} .lo-bull i:nth-child(3){inset:40%; background:#ff2d55; box-shadow:0 0 12px #ff2d55}
.lo-grid{position:relative; flex:1; min-height:0; display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows:minmax(0, 1fr); gap:10px}
.lo-tile{position:relative; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px; border-radius:18px; text-align:center;
  background:linear-gradient(180deg, rgba(40,36,64,.75), rgba(12,10,22,.85)); border:2px solid rgba(255,255,255,.1); transition:opacity .4s, filter .4s, border-color .3s, box-shadow .3s}
.lo-head{display:flex; align-items:center; gap:8px; max-width:100%; font-weight:700; font-size:clamp(13px, 2vh, 17px)}
.lo-head b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-head .avatar{width:28px; height:28px; font-size:13px; border-radius:9px; flex:none}
.lo-pts{font-family:var(--num); font-size:clamp(26px, 6.5vh, 58px); line-height:1; color:#fff}
.lo-state{padding:3px 12px; border-radius:999px; font-weight:800; font-size:clamp(10px, 1.6vh, 13px); letter-spacing:.12em; white-space:nowrap; background:rgba(255,255,255,.08); color:#c8cde8}
.lo-tile.cur{border-color:var(--pc); box-shadow:0 0 28px color-mix(in srgb, var(--pc) 50%, transparent), inset 0 0 30px color-mix(in srgb, var(--pc) 18%, transparent)}
.lo-tile.on .lo-state{background:var(--pc); color:#08102a}
.lo-tile.safe{border-color:rgba(46,230,160,.6)}
.lo-tile.safe .lo-state{background:#2ee6a0; color:#04241a}
.lo-tile.risk{border-color:rgba(255,45,85,.55)}
.lo-tile.risk .lo-state{background:rgba(255,45,85,.2); color:#ff9aad}
.lo-tile.out{opacity:.38; filter:grayscale(.9)}
.lo-tile.out .lo-state{background:rgba(255,45,85,.25); color:#ffb3c1}
.lo-tile.saved{animation:loSaved .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes loSaved{40%{transform:scale(1.08)}}
/* the round summary */
.lo-sum{position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:14px; background:rgba(4,3,10,.78); cursor:pointer}
.lo-sum[hidden]{display:none}
.lo-sum.go .lo-sum-card{animation:sheetIn .35s cubic-bezier(.2,1.3,.4,1)}
.lo-sum-card{width:min(640px, 100%); max-height:100%; overflow:auto; padding:18px 20px; border-radius:22px; text-align:center; background:linear-gradient(180deg, #221a36, #0c0916); border:1px solid rgba(255,230,160,.3); box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lo-sum-card h3{margin:4px 0 12px; font-family:var(--num); font-weight:400; font-size:clamp(22px, 4vh, 34px); color:#fff}
.lo-sum-card .eyebrow{color:#ffe7a3}
.lo-sum-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left}
.lo-sum-h{font-weight:800; font-size:12px; letter-spacing:.2em; margin-bottom:6px}
.lo-sum-h.in{color:#2ee6a0} .lo-sum-h.out{color:#ff8fa3}
.lo-sum-row{display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; margin-bottom:5px; border-radius:999px; background:rgba(255,255,255,.06); font-size:15px}
.lo-sum-row b{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-sum-row span:last-child{font-weight:700; font-size:13px; color:#c8cde8; white-space:nowrap}
.lo-sum-row .avatar{width:26px; height:26px; font-size:12px; border-radius:50%}
#loSumOut .lo-sum-row{opacity:.6}
#loSumOut .lo-sum-row.fresh{opacity:1; background:rgba(255,45,85,.16)}
#loSumOut .lo-sum-row.fresh span:last-child{color:#ff8fa3}
.lo-sum-none{margin:4px 0; color:#8f8aa8; font-size:14px}
.lo-sum-skip{margin-top:10px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:.45}

/* ---------- time bomb ---------- */
.tb-stage{position:relative; overflow:hidden; min-height:0; display:flex; padding:0; background:#08070c}
.tb-svg{width:100%; height:100%; min-height:0}
.tb-tnt{font-family:var(--num); font-size:22px; fill:#fff; opacity:.75; text-anchor:middle; dominant-baseline:central; letter-spacing:.2em}
.tb-led, .tb-led-ghost{font-family:'Courier New', monospace; font-weight:700; font-size:72px; text-anchor:middle; dominant-baseline:central; letter-spacing:6px}
.tb-led-ghost{fill:#3a0a0c; opacity:.55}
.tb-led{fill:#ff2a2a; filter:drop-shadow(0 0 6px #ff2a2a) drop-shadow(0 0 16px rgba(255,40,40,.6))}
.tb-led-lbl{font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.25em; fill:#9aa0ad; text-anchor:middle}
.tb-light{fill:#ff2a2a; animation:tbBlink 1.2s steps(2) infinite}
@keyframes tbBlink{50%{fill:#3a0a0c}}
.tb-wire{fill:none; stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 3px 2px rgba(0,0,0,.5)); transition:stroke-dasharray .2s}
.tb-wire.cut{stroke-dasharray:44 12 100; opacity:.85}
.tb-tag rect{fill:#161821; stroke-width:4}
.tb-tag-n{font-family:var(--num); font-size:30px; fill:#fff; text-anchor:middle; dominant-baseline:central}
.tb-tag-s{font-family:var(--ui); font-weight:800; font-size:13px; letter-spacing:.14em; fill:#8e96b0; text-anchor:middle; dominant-baseline:central}
.tb-tag.live rect{fill:#3a0d12} .tb-tag.live .tb-tag-s{fill:#ff6b6b}
.tb-tag.decoy rect, .tb-tag.dud rect{fill:#1c1c1c; stroke:#555 !important} .tb-tag.decoy .tb-tag-n, .tb-tag.dud .tb-tag-n{fill:#777} .tb-tag.decoy .tb-tag-s, .tb-tag.dud .tb-tag-s{fill:#9a9a9a}
.tb-tag.dud rect{fill:#2a1408}
.tb-tag.done rect{fill:#0d3a24} .tb-tag.done .tb-tag-s{fill:#2ee6a0}
.tb-tag.scanned{animation:tbScan .8s ease-out}
@keyframes tbScan{30%{transform-box:fill-box; filter:drop-shadow(0 0 16px #39d5ff) brightness(1.6)}}
.tb-hud-lbl{font-family:var(--ui); font-weight:700; font-size:11px; letter-spacing:.18em; fill:#c8cde8}
.tb-hud-n{font-family:var(--num); font-size:24px; fill:#fff}
.tb-hud-sm{font-family:var(--ui); font-weight:600; font-size:13px; fill:#8e96b0}
/* instability: the lower the clock, the worse it gets */
.tb-bundle{transform-box:fill-box; transform-origin:50% 90%}
.tb-stage.uneasy .tb-bundle{animation:tbWobble 1.6s ease-in-out infinite}
.tb-stage.danger .tb-bundle{animation:tbWobble .55s ease-in-out infinite}
.tb-stage.danger .tb-light{animation-duration:.45s}
.tb-stage.critical .tb-bundle{animation:tbShake .12s linear infinite}
.tb-stage.critical .tb-light{animation-duration:.2s}
.tb-stage.critical{box-shadow:inset 0 0 90px rgba(255,30,30,.45); animation:tbAlarm .8s ease-in-out infinite}
@keyframes tbWobble{25%{transform:rotate(-1.2deg)} 75%{transform:rotate(1.2deg)}}
@keyframes tbShake{25%{transform:translate(-3px,1px) rotate(-.8deg)} 50%{transform:translate(2px,-2px)} 75%{transform:translate(3px,1px) rotate(.8deg)}}
@keyframes tbAlarm{50%{box-shadow:inset 0 0 140px rgba(255,30,30,.7)}}
.tb-stage.defused .tb-led{fill:#2ee66a; filter:drop-shadow(0 0 10px #2ee66a)}
.tb-stage.defused .tb-light{fill:#2ee66a; animation:none}
.tb-stage.defused .tb-bundle{animation:none; filter:saturate(.6)}
.tb-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none}
.tb-flash.go{animation:tbFlash 1.1s ease-out}
@keyframes tbFlash{0%{opacity:1} 100%{opacity:0}}
.tb-stage.kaboom .tb-bundle{opacity:0; transition:opacity .15s}
.tb-stage.kaboom .tb-svg{animation:tbShake .09s linear 10}