/* No backdrop-filter anywhere: it is the first thing to stutter on a
   2019 tablet GPU, so glass panels are faked with layered translucent gradients. */
:root{
  --bg0:#040716; --text:#eaf0ff; --muted:#8e9bc4; --edge:rgba(120,160,255,.26);
  --blue:#2f7bff; --cyan:#39d5ff; --red:#ff2d55;
  --gold:#ffc53d; --magenta:#ff4fb4; --emerald:#2ee6a0; --sky:#3fc8ff;
  --orange:#ff8a3d; --violet:#a98bff; --lime:#b8f040; --silver:#dfe6ff;
  --ui:'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --num:'Russo One', 'Arial Black', Impact, sans-serif;
  --nav:0px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0; overflow:hidden; background:var(--bg0); color:var(--text); font-family:var(--ui)}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}

/* ---------- ambient background ---------- */
#bg{position:fixed; inset:0; overflow:hidden; z-index:0}
#bg .glow{position:absolute; width:90vmax; height:90vmax; border-radius:50%; filter:blur(10px); opacity:.55; will-change:transform}
#bg .g1{left:-30vmax; top:-40vmax; background:radial-gradient(circle, rgba(47,123,255,.55), transparent 62%); animation:drift1 22s ease-in-out infinite alternate}
#bg .g2{right:-35vmax; bottom:-45vmax; background:radial-gradient(circle, rgba(170,60,255,.40), transparent 60%); animation:drift2 26s ease-in-out infinite alternate}
#bg .g3{left:30vw; top:30vh; width:60vmax; height:60vmax; background:radial-gradient(circle, rgba(57,213,255,.16), transparent 60%); animation:drift1 30s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(12vmax,8vmax)}}
@keyframes drift2{to{transform:translate(-10vmax,-6vmax)}}
#bg .ghostboard{position:absolute; width:120vmax; height:120vmax; right:-38vmax; top:50%; margin-top:-60vmax; opacity:.07; animation:spin 240s linear infinite; will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}
#bg .streak{position:absolute; top:-50%; left:-60%; width:40%; height:200%; background:linear-gradient(90deg, transparent, rgba(160,200,255,.07), transparent); transform:rotate(18deg); animation:streak 9s ease-in-out infinite}
@keyframes streak{0%,60%{left:-60%} 100%{left:130%}}


/* ---------- shared panels ---------- */
.screen{position:fixed; inset:var(--nav) 0 0 0; z-index:1; display:none; padding:14px}
.screen.on{display:grid}
.panel{position:relative; border-radius:22px; background:linear-gradient(180deg, rgba(36,56,120,.50), rgba(9,14,38,.82)); border:1px solid var(--edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px rgba(0,0,0,.45)}
.panel::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%)}
.pill{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px; font-weight:700; letter-spacing:.04em; background:linear-gradient(180deg, rgba(120,160,255,.18), rgba(120,160,255,.06)); border:1px solid rgba(140,175,255,.35)}
.pill:active{transform:scale(.96)}
.eyebrow{font-size:11px; letter-spacing:.24em; color:var(--muted); font-weight:700; text-transform:uppercase}

/* ---------- MENU ---------- */
#scr-menu{grid-template-columns:210px minmax(0,1fr) 280px; grid-template-rows:auto minmax(0,1fr); gap:14px}
.m-head{grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:2px 6px}
.logo{display:flex; align-items:center; gap:12px}
.logo-mark{width:46px; height:46px}
.logo-word{font-family:var(--num); font-size:28px; letter-spacing:.06em; line-height:1; background:linear-gradient(180deg,#fff 0%,#bcd4ff 45%,#5f8dff 55%,#e4eeff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 12px rgba(80,140,255,.45))}
.logo-sub{font-size:11px; letter-spacing:.3em; color:var(--muted); margin-top:3px}
.m-head .sp{flex:1}
.chip-me{display:flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border-radius:999px; background:rgba(120,160,255,.08); border:1px solid rgba(120,160,255,.2); font-weight:600}

.rail{display:flex; flex-direction:column; gap:10px; padding:16px 0 16px 0; overflow:hidden auto}
@media (max-width:1150px) and (orientation:landscape){ #scr-menu{grid-template-columns:180px minmax(0,1fr) 250px} .cat{font-size:15px; padding:12px 14px} .card h3{font-size:19px} }
.cat{position:relative; display:flex; align-items:center; gap:12px; padding:14px 18px; margin-right:-6px; font-size:18px; font-weight:700; letter-spacing:.03em; clip-path:polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); background:linear-gradient(90deg, rgba(47,123,255,.22), rgba(47,123,255,.05)); color:#c9d6ff; transition:transform .2s}
.cat svg{width:24px; height:24px; flex:none}
.cat.on{color:#fff; background:linear-gradient(90deg,#ff2d55 0%,#c5163f 70%,rgba(197,22,63,.4) 100%); transform:translateX(8px); box-shadow:0 0 30px rgba(255,45,85,.45)}
.cat.on::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#fff; box-shadow:0 0 12px #fff}

.cards{display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 240px)); justify-content:center; gap:14px; padding:8px 4px; overflow:auto; align-content:center}
.card{position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; text-align:left; background:#0b1230; border:1px solid var(--edge); box-shadow:0 14px 40px rgba(0,0,0,.45); transition:transform .25s, box-shadow .25s; animation:cardIn .5s both}
.card:nth-child(2){animation-delay:.07s} .card:nth-child(3){animation-delay:.14s}
@keyframes cardIn{from{opacity:0; transform:translateY(24px) scale(.97)}}
.card .art{position:relative; aspect-ratio:4/5; overflow:hidden}
.card .art svg{position:absolute; inset:0; width:100%; height:100%}
.card .meta{padding:14px 16px 16px; background:linear-gradient(180deg, rgba(12,20,52,.9), #080d24)}
.card h3{margin:0; font-family:var(--num); font-weight:400; font-size:24px; letter-spacing:.02em}
.card p{margin:4px 0 0; color:var(--muted); font-size:14px; font-weight:600}
.card .badge{position:absolute; top:12px; left:12px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.12em; background:rgba(4,7,22,.7); border:1px solid rgba(255,255,255,.2)}
.card.sel{transform:translateY(-4px); border-color:#8fd8ff; box-shadow:0 0 0 2px #39d5ff, 0 0 40px rgba(57,213,255,.45), 0 20px 50px rgba(0,0,0,.5)}
.card.sel::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%); background-size:250% 100%; animation:sheen 2.6s ease-in-out infinite}
@keyframes sheen{from{background-position:120% 0} to{background-position:-120% 0}}

.setup{display:flex; flex-direction:column; padding:18px; gap:14px}
.setup h4{margin:0; font-family:var(--num); font-weight:400; font-size:22px}
.plist{display:flex; flex-direction:column; gap:8px}
.prow{display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border-radius:16px; background:rgba(120,160,255,.07); border:1px solid rgba(120,160,255,.14); font-weight:700; font-size:16px}
.prow small{margin-left:auto; color:var(--muted); font-weight:600; font-size:12px}
.plist.dense{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, auto); grid-auto-flow:column; gap:6px}
.plist.dense .prow{font-size:14px; padding:4px 8px 4px 4px; gap:8px; border-radius:12px}
.plist.dense .avatar{width:28px; height:28px; font-size:13px; border-radius:9px}
.prow{transition:opacity .25s}
.prow.out{opacity:.3}
.capnote{font-size:13px; font-weight:600; color:var(--muted); margin-top:-6px}
.capnote.warn{color:#ffd27a}
.pcount{display:block; margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.avatar{--pc:var(--gold); width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; font-family:var(--num); font-size:17px; color:#08102a; background:linear-gradient(145deg, #fff 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 55%, #000) 100%); box-shadow:0 0 14px color-mix(in srgb, var(--pc) 55%, transparent), inset 0 -3px 0 rgba(0,0,0,.25)}
.opt{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:600; font-size:15px; color:#cfdaff}
.tog{width:54px; height:30px; border-radius:999px; background:rgba(120,135,180,.28); position:relative; flex:none; transition:background .2s, box-shadow .2s}
.tog.on{background:linear-gradient(90deg,#1d9bff,#39d5ff); box-shadow:0 0 14px rgba(57,213,255,.45)}
.tog::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:left .2s}
.tog.on::after{left:27px}
#opts{display:flex; flex-direction:column; gap:16px}
.rpick{display:flex; flex-direction:column; align-items:center; gap:8px}
.rpill{display:flex; width:100%; padding:5px; border-radius:999px; background:rgba(4,7,22,.55); border:1px solid rgba(140,175,255,.3); box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}
.rpill button{flex:1; min-height:56px; border-radius:999px; font-family:var(--num); font-size:26px; color:var(--muted); transition:background .2s, color .2s, box-shadow .2s}
.rfixed{width:100%; min-height:66px; display:grid; place-items:center; border-radius:999px; font-weight:700; font-size:17px; color:#cfdaff; background:rgba(4,7,22,.55); border:1px dashed rgba(140,175,255,.3)}
.rpill button.on{color:#fff; background:linear-gradient(180deg,#4a90ff,#1d4dd8); box-shadow:0 0 0 1px #7fb0ff inset, 0 0 22px rgba(47,123,255,.55)}
.seg3{display:flex; border-radius:999px; overflow:hidden; border:1px solid rgba(120,160,255,.3)}
.seg3 span{padding:5px 11px; font-size:13px; font-weight:700; color:var(--muted)}
.seg3 span.on{background:#2f7bff; color:#fff}
.start{margin-top:auto; position:relative; overflow:hidden; padding:18px; border-radius:999px; font-family:var(--num); font-size:26px; letter-spacing:.08em; color:#fff; background:linear-gradient(180deg,#ff5577 0%,#ff2d55 45%,#b8123a 100%); box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 10px 30px rgba(255,45,85,.45), 0 0 50px rgba(255,45,85,.3); text-shadow:0 2px 0 rgba(0,0,0,.25)}
.start::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); background-size:250% 100%; animation:sheen 2.2s ease-in-out infinite}
.start:active{transform:scale(.97)}

/* ---------- DARTBOARD ---------- */
.boardwrap{position:relative; display:grid; place-items:center; min-height:0; min-width:0}
.boardwrap::before{content:""; position:absolute; width:96%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(47,123,255,.28), transparent 68%); filter:blur(8px)}
svg.board{position:absolute; inset:0; width:100%; height:100%; touch-action:none; user-select:none; overflow:visible}
.b-rim{fill:url(#rimG)}
.b-numring{fill:#070b1e; stroke:rgba(140,175,255,.35); stroke-width:1.5}
.b-num{fill:#dfe8ff; font-family:var(--num); font-size:21px; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.seg{stroke:#060a1c; stroke-width:1.4; transition:opacity .25s}
.seg.c-a{fill:#141c3a} .seg.c-b{fill:#e8edf8}
.seg.si.c-b,.seg.so.c-b{fill:url(#ivoryG)}
.seg.si.c-a,.seg.so.c-a{fill:url(#inkG)}
.seg.t.c-a,.seg.d.c-a{fill:url(#redG)}
.seg.t.c-b,.seg.d.c-b{fill:url(#blueG)}
.seg.bull{fill:url(#blueG)} .seg.dbull{fill:url(#redG)}
.wire{fill:none; stroke:rgba(200,215,255,.55); stroke-width:1.2; pointer-events:none}
.wire.thin{stroke-width:.7; stroke:rgba(200,215,255,.35)}
svg.board.has-target .seg:not(.target){opacity:.32}
.tgt-outline{fill:none; stroke:#ffd84a; stroke-width:4; stroke-linejoin:round; filter:url(#glow); animation:tgtPulse 1.1s ease-in-out infinite alternate; pointer-events:none}
@keyframes tgtPulse{from{stroke-opacity:.35} to{stroke-opacity:1}}
.fx-flash{fill:#fff; pointer-events:none; animation:flash .55s ease-out forwards}
@keyframes flash{0%{opacity:.95} 100%{opacity:0}}
.fx-ripple{fill:none; stroke:#fff; stroke-width:3; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:ripple .6s ease-out forwards}
@keyframes ripple{from{transform:scale(.2); opacity:1} to{transform:scale(3.2); opacity:0}}
.mark{pointer-events:none}
.mark circle:first-child{fill:rgba(255,255,255,.25)}
.mark circle:last-child{fill:#fff; filter:url(#glow)}
.mark text{fill:#fff; font-family:var(--num); font-size:13px; text-anchor:middle; paint-order:stroke; stroke:#050818; stroke-width:4}

/* ---------- X01 ---------- */
#scr-game{grid-template-columns:minmax(0,1fr) min(calc(100vh - 28px), 44vw); gap:14px}
.g-info{position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:10px; min-height:0; min-width:0}
.x-top{display:flex; align-items:center; gap:10px}
.gbadge{padding:8px 16px; border-radius:999px; font-weight:700; background:linear-gradient(90deg,#ff2d55,#c5163f); box-shadow:0 0 20px rgba(255,45,85,.35); letter-spacing:.05em}
.x-top .sp{flex:1}
.roundbox{font-weight:700; color:var(--muted); letter-spacing:.1em}
.roundbox b{color:#fff; font-family:var(--num); font-weight:400; font-size:22px; letter-spacing:0}
.x-main{display:grid; grid-template-columns:190px minmax(0,1fr); gap:12px; min-height:0; height:100%}
.rounds{padding:14px; display:flex; flex-direction:column; gap:10px; min-height:0}
.rp-head{display:flex; align-items:center; gap:10px}
.rp-name{font-weight:700; font-size:18px; line-height:1.1}
.rp-stat{display:grid; grid-template-columns:1fr 1fr; gap:6px; text-align:center}
.rp-stat div{padding:6px 4px; border-radius:12px; background:rgba(120,160,255,.08)}
.rp-stat b{display:block; font-family:var(--num); font-weight:400; font-size:20px}
.rp-stat span{font-size:10px; letter-spacing:.2em; color:var(--muted); font-weight:700}
.rlist{display:flex; flex-direction:column; gap:3px; overflow:auto; min-height:0}
.rlist div{display:flex; justify-content:space-between; padding:4px 10px; border-radius:8px; font-weight:600; color:#b8c5ee}
.rlist div:nth-child(odd){background:rgba(120,160,255,.05)}
.rlist div.cur{background:linear-gradient(90deg, rgba(255,45,85,.35), rgba(255,45,85,.08)); color:#fff}
.rlist div em{font-style:normal; color:var(--muted)}
.scorep{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px; overflow:hidden; min-height:0}
.scorep .eyebrow{margin-bottom:-6px}
.bigscore{position:relative; font-family:var(--num); font-size:clamp(80px, 24vh, 230px); line-height:1; text-align:center; transform-origin:center}
.bigscore .ext{position:absolute; left:0; right:0; top:0; font-weight:400; color:#4a2600; text-shadow:0 2px 0 #7a4600,0 4px 0 #6a3c00,0 6px 0 #5a3200,0 8px 0 #4a2800,0 10px 0 #3a1f00,0 22px 40px rgba(0,0,0,.7)}
.bigscore .face{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; filter:drop-shadow(0 0 22px rgba(255,190,40,.35))}
.bigscore.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(.86)} 100%{transform:scale(1)}}
.checkout{display:flex; align-items:center; gap:8px; min-height:34px}
.checkout .lbl{font-size:11px; letter-spacing:.22em; font-weight:700; color:#7ff0c0}
.checkout .d{padding:4px 12px; border-radius:999px; font-weight:700; background:rgba(46,230,160,.12); border:1px solid rgba(46,230,160,.45); color:#c8ffe8}
.slots{display:flex; gap:10px; align-items:center}
.slot{width:clamp(78px, 9vw, 110px); height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--num); font-size:22px; border:2px dashed rgba(140,175,255,.28); color:rgba(140,175,255,.4)}
.slot.filled{border:1px solid rgba(255,255,255,.28); color:#fff; background:linear-gradient(180deg, rgba(80,120,255,.35), rgba(30,50,130,.35)); box-shadow:0 0 20px rgba(47,123,255,.35); animation:slotIn .35s cubic-bezier(.2,1.5,.4,1)}
.slot.filled.t{background:linear-gradient(180deg, rgba(255,45,85,.55), rgba(140,10,40,.45)); box-shadow:0 0 22px rgba(255,45,85,.5)}
.slot.filled.d{background:linear-gradient(180deg, rgba(57,213,255,.5), rgba(20,90,160,.45)); box-shadow:0 0 22px rgba(57,213,255,.45)}
.slot.filled.miss{background:rgba(120,130,160,.15); box-shadow:none; color:var(--muted)}
@keyframes slotIn{from{transform:scale(.5); opacity:0}}
.slot svg{width:16px; height:16px; opacity:.8}
.turnsum{font-family:var(--num); font-size:22px; color:var(--muted); min-width:60px; text-align:center}
.actions{display:flex; gap:10px}
.hitpop{position:absolute; left:50%; top:16%; transform:translateX(-50%); font-family:var(--num); font-size:clamp(34px, 7vh, 64px); white-space:nowrap; pointer-events:none; opacity:0; letter-spacing:.04em}
.hitpop.go{animation:hitpop .9s cubic-bezier(.2,1.4,.4,1) forwards}
.hitpop.t{color:#ff5a7a; text-shadow:0 0 18px #ff2d55, 0 0 40px rgba(255,45,85,.7)}
.hitpop.d{color:#7fe6ff; text-shadow:0 0 18px #39d5ff, 0 0 40px rgba(57,213,255,.6)}
.hitpop.s{color:#fff; text-shadow:0 0 16px rgba(160,200,255,.8)}
.hitpop.b{color:#ffe07a; text-shadow:0 0 18px #ffb300, 0 0 44px rgba(255,180,0,.7)}
.hitpop.bust{color:#ff3050; text-shadow:0 0 20px #ff0030, 0 4px 0 #5a0010; font-size:clamp(60px, 13vh, 120px); top:30%}
@keyframes hitpop{0%{opacity:0; transform:translate(-50%,20px) scale(.6)} 25%{opacity:1; transform:translate(-50%,0) scale(1.12)} 70%{opacity:1; transform:translate(-50%,-6px) scale(1)} 100%{opacity:0; transform:translate(-50%,-26px) scale(.96)}}
.pcards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}
.pcard{--pc:var(--gold); position:relative; padding:10px 12px; border-radius:18px; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; background:linear-gradient(160deg, color-mix(in srgb, var(--pc) 30%, #0b1230) 0%, #0a1028 70%); border:1px solid color-mix(in srgb, var(--pc) 40%, transparent); opacity:.62; transition:opacity .3s, transform .3s, box-shadow .3s}
.pcard.on{opacity:1; transform:translateY(-4px); box-shadow:0 0 0 2px var(--pc), 0 0 30px color-mix(in srgb, var(--pc) 55%, transparent)}
.pcard.on::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--pc); box-shadow:0 0 12px var(--pc)}
.pcard .nm{font-weight:700; font-size:15px; line-height:1.1}
.pcard .sc{grid-column:1/-1; justify-self:end; font-family:var(--num); font-size:clamp(28px, 5vh, 44px); line-height:1.05; margin-top:2px}
.pcard .avatar{width:32px; height:32px; font-size:14px; border-radius:10px}
.pcard > div:nth-child(2){min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.pcard small{display:block; color:var(--muted); font-size:11px; font-weight:600}
/* 5-8 players: two rows of four, each card one line (avatar · name · score). */
.pcards.dense{gap:8px}
.pcards.dense .pcard{padding:6px 10px 6px 6px; grid-template-columns:auto minmax(0,1fr) auto; border-radius:14px}
.pcards.dense .pcard .sc{grid-column:auto; margin:0; font-size:clamp(20px, 3.4vh, 28px)}
.pcards.dense .pcard small{display:none}
.pcards.dense .pcard .avatar{width:26px; height:26px; font-size:12px; border-radius:8px}
.pcards.dense .pcard.on{transform:none}
.pcards.dense .pcard .nm{font-size:14px}
.swap{position:absolute; inset:0; z-index:5; display:grid; place-items:center; pointer-events:none; overflow:hidden; border-radius:22px}
.swap .bar{--pc:var(--gold); width:140%; padding:18px 0; text-align:center; transform:skewY(-4deg) translateX(-110%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 70%, #000) 20%, color-mix(in srgb, var(--pc) 70%, #000) 80%, transparent); box-shadow:0 0 60px color-mix(in srgb, var(--pc) 60%, transparent)}
.swap .bar b{display:block; font-family:var(--num); font-weight:400; font-size:clamp(40px, 9vh, 84px); letter-spacing:.06em; line-height:1; text-shadow:0 4px 0 rgba(0,0,0,.35)}
.swap .bar span{font-weight:700; letter-spacing:.4em; font-size:14px}
.swap.go .bar{animation:swapBar 2.2s cubic-bezier(.7,0,.3,1) forwards}
@keyframes swapBar{0%{transform:skewY(-4deg) translateX(-110%)} 30%,70%{transform:skewY(-4deg) translateX(0)} 100%{transform:skewY(-4deg) translateX(110%)}}

/* ---------- HORSE RACE ---------- */
.scene{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--edge); box-shadow:0 18px 50px rgba(0,0,0,.5); min-height:0; background:#8fc3ff}
.scene > svg{position:absolute; inset:0; width:100%; height:100%}
.cloud{animation:cloud linear infinite}
@keyframes cloud{from{transform:translateX(-260px)} to{transform:translateX(1460px)}}
.crowdrow{animation:cheer .5s ease-in-out infinite alternate}
.crowdrow:nth-child(2){animation-delay:-.17s} .crowdrow:nth-child(3){animation-delay:-.33s} .crowdrow:nth-child(4){animation-delay:-.08s}
.scene.roar .crowdrow{animation-duration:.18s}
@keyframes cheer{to{transform:translateY(-3px)}}
.flag{transform-box:fill-box; transform-origin:0 50%; animation:flag 1.2s ease-in-out infinite alternate}
@keyframes flag{from{transform:skewY(6deg) scaleX(.9)} to{transform:skewY(-6deg) scaleX(1.05)}}
.horse .bob{animation:bob .6s ease-in-out infinite alternate}
.horse .leg{transform-box:fill-box; transform-origin:50% 6%; animation:legF .6s ease-in-out infinite alternate}
.horse .leg.b{animation-name:legB}
.horse .leg.p2{animation-delay:-.3s}
.horse .tail{transform-box:fill-box; transform-origin:100% 20%; animation:tail .6s ease-in-out infinite alternate}
.horse.run .bob{animation-duration:.14s}
.horse.run .leg, .horse.run .tail{animation-duration:.14s}
@keyframes bob{from{transform:translateY(0)} to{transform:translateY(-5px)}}
@keyframes legF{from{transform:rotate(-34deg)} to{transform:rotate(28deg)}}
@keyframes legB{from{transform:rotate(30deg)} to{transform:rotate(-26deg)}}
@keyframes tail{from{transform:rotate(-8deg)} to{transform:rotate(10deg)}}
.hshadow{fill:rgba(40,20,5,.28)}
.hnum{font-family:var(--num); font-size:15px; text-anchor:middle; dominant-baseline:central}
.lanepop{font-family:var(--num); font-size:34px; text-anchor:middle; paint-order:stroke; stroke:#3a1d05; stroke-width:6; fill:#ffe27a; opacity:0}
.lanepop.go{animation:lanepop 1s ease-out forwards}
@keyframes lanepop{0%{opacity:0; transform:translateY(10px)} 20%{opacity:1; transform:translateY(-6px)} 75%{opacity:1} 100%{opacity:0; transform:translateY(-34px)}}
.sign{position:absolute; left:50%; top:10px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 10px 16px rgba(40,20,0,.45))}
.sign .ropes{width:120px; height:14px; border-left:3px solid #5a3a1a; border-right:3px solid #5a3a1a}
.sign .plate{min-width:150px; padding:6px 22px 10px; border-radius:16px; text-align:center; background:linear-gradient(180deg,#c98a4a 0%,#a86a32 45%,#8a5424 100%); border:4px solid #5e3816; box-shadow:inset 0 3px 0 rgba(255,230,180,.35), inset 0 -4px 0 rgba(0,0,0,.2)}
.sign .plate small{display:block; font-weight:700; letter-spacing:.3em; font-size:12px; color:#ffe9c2; text-shadow:0 1px 0 #4a2a0a}
.sign .plate b{display:block; font-family:var(--num); font-weight:400; font-size:clamp(46px, 10vh, 84px); line-height:.95; background:linear-gradient(180deg,#fffbe0,#ffd23a 55%,#e09000); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 #4a2a0a)}
.sign.flip .plate{animation:signflip .5s ease-in-out}
@keyframes signflip{0%{transform:rotateX(0)} 50%{transform:rotateX(90deg)} 100%{transform:rotateX(0)}}
.rhud{position:absolute; left:12px; top:12px; padding:8px 14px; border-radius:14px; background:rgba(20,12,4,.55); color:#fff; font-weight:700; letter-spacing:.1em; font-size:13px}
.rhud b{font-family:var(--num); font-weight:400; font-size:24px; letter-spacing:0; margin-left:6px}
.rdarts{position:absolute; right:12px; top:12px; display:flex; gap:6px}
.minimap{position:relative; height:50px; padding:0 40px 0 22px; border-radius:999px; background:linear-gradient(180deg, rgba(36,56,120,.5), rgba(9,14,38,.82)); border:1px solid var(--edge)}
.mm-in{position:relative; height:100%}
.mm-line{position:absolute; left:0; right:0; top:50%; height:4px; margin-top:-2px; border-radius:2px; background:repeating-linear-gradient(90deg, rgba(255,230,190,.5) 0 2px, transparent 2px 100%); background-size:calc(100% / 21) 100%; background-color:rgba(255,230,190,.18)}
.mm-flag{position:absolute; right:-34px; top:50%; transform:translateY(-50%); font-family:var(--num); font-size:11px; color:#fff; background:#ff2d55; padding:2px 6px; border-radius:6px}
.mm-dot{--pc:#fff; position:absolute; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; display:grid; place-items:center; font-family:var(--num); font-size:12px; color:#140a02; background:var(--pc); box-shadow:0 0 0 2px rgba(20,10,2,.8), 0 0 12px var(--pc); transition:left .7s cubic-bezier(.4,0,.2,1), transform .3s}
.mm-dot.on{transform:scale(1.3) translateY(-2px); z-index:2}
.rdarts i{width:34px; height:34px; border-radius:50%; background:rgba(20,12,4,.55); display:grid; place-items:center}
.rdarts i svg{width:20px; height:20px}
.rdarts i.used{opacity:.3}
.rcards .pcard .sc{font-size:clamp(20px, 3.4vh, 30px)}
.rcards .prog{position:absolute; left:0; bottom:0; height:4px; background:var(--pc); box-shadow:0 0 10px var(--pc); transition:width .6s}

/* ---------- AWARD TAKEOVER ---------- */
#award{position:fixed; inset:0; z-index:80; pointer-events:none; display:grid; place-items:center; overflow:hidden; opacity:0}
#award.on{opacity:1}
#award .veil{position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(2,4,14,.84), rgba(2,4,14,.96) 70%); opacity:0}
#award .rays{position:absolute; width:180vmax; height:180vmax; left:50%; top:50%; margin:-90vmax 0 0 -90vmax; background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--a2) 26%, transparent) 0deg 3deg, transparent 3deg 12deg); -webkit-mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 45%); mask:radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 45%); opacity:0; will-change:transform}
#award .core{position:absolute; width:70vmin; height:70vmin; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--a1) 70%, transparent), color-mix(in srgb, var(--a2) 35%, transparent) 35%, transparent 70%); opacity:0}
#award .shock{position:absolute; width:30vmin; height:30vmin; border-radius:50%; border:6px solid var(--a1); box-shadow:0 0 40px var(--a2), inset 0 0 40px var(--a2); opacity:0}
#award .shock.s2{border-width:3px}
#award .flashw{position:absolute; inset:0; background:#fff; opacity:0}
#award .title{position:relative; text-align:center; opacity:0}
#award .t-main{position:relative; font-family:var(--num); font-size:clamp(64px, min(17vw, 26vh), 260px); line-height:.95; letter-spacing:.02em; white-space:pre}
#award .t-main .ext{position:absolute; left:0; right:0; top:0; font-weight:400; color:var(--a3); text-shadow:0 3px 0 color-mix(in srgb, var(--a3) 80%, #000), 0 6px 0 color-mix(in srgb, var(--a3) 65%, #000), 0 9px 0 color-mix(in srgb, var(--a3) 50%, #000), 0 12px 0 color-mix(in srgb, var(--a3) 35%, #000), 0 30px 60px rgba(0,0,0,.8)}
#award .t-main span{position:relative; background:linear-gradient(180deg, #fff 0%, var(--a1) 30%, var(--a2) 52%, #fff 54%, var(--a2) 70%, var(--a3) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 30px color-mix(in srgb, var(--a2) 70%, transparent))}
#award .t-main i{position:absolute; left:0; right:0; top:0; font-style:normal; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent}
#award .t-sub{margin-top:18px; display:inline-block; max-width:92vw; text-wrap:balance; padding:8px 28px; border-radius:999px; font-weight:700; font-size:clamp(16px, 2.6vh, 26px); letter-spacing:.4em; color:#fff; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--a3) 80%, transparent), transparent); opacity:0}
#award canvas{position:absolute; inset:0; width:100%; height:100%}
#award.play .veil{animation:veil 2.9s ease forwards}
#award.play .rays{animation:rays 2.9s ease-out forwards}
#award.play .core{animation:core 2.9s ease-out forwards}
#award.play .shock{animation:shock .9s .18s cubic-bezier(.1,.7,.3,1) forwards}
#award.play .shock.s2{animation-delay:.34s}
#award.play .flashw{animation:flashw .5s .16s ease-out forwards}
#award.play .title{animation:slam 2.9s cubic-bezier(.2,1,.3,1) forwards}
#award.play .t-main i{animation:shine 1.1s .55s ease-in-out forwards}
#award.play .t-sub{animation:subIn 2.9s ease forwards}
#award.play.shake .title{animation:slam 2.9s cubic-bezier(.2,1,.3,1) forwards, shake .38s .2s linear}
@keyframes veil{0%{opacity:0} 8%{opacity:1} 82%{opacity:1} 100%{opacity:0}}
@keyframes rays{0%{opacity:0; transform:rotate(0) scale(.6)} 12%{opacity:1} 82%{opacity:.9} 100%{opacity:0; transform:rotate(40deg) scale(1.1)}}
@keyframes core{0%{opacity:0; transform:scale(.2)} 12%{opacity:1; transform:scale(1.2)} 30%{transform:scale(1)} 82%{opacity:.8} 100%{opacity:0; transform:scale(1.3)}}
@keyframes shock{0%{opacity:1; transform:scale(.3)} 100%{opacity:0; transform:scale(6)}}
@keyframes flashw{0%{opacity:.85} 100%{opacity:0}}
@keyframes slam{0%{opacity:0; transform:scale(3.2); filter:blur(14px)} 9%{opacity:1; transform:scale(.9); filter:blur(0)} 15%{transform:scale(1.04)} 22%{transform:scale(1); filter:blur(0)} 80%{opacity:1; transform:scale(1.06); filter:blur(0)} 100%{opacity:0; transform:scale(1.35); filter:blur(8px)}}
@keyframes shine{from{background-position:120% 0} to{background-position:-60% 0}}
@keyframes subIn{0%,16%{opacity:0; transform:translateY(20px); letter-spacing:1em} 30%{opacity:1; transform:none; letter-spacing:.4em} 80%{opacity:1} 100%{opacity:0}}
@keyframes shake{0%,100%{translate:0 0} 20%{translate:-14px 8px} 40%{translate:12px -10px} 60%{translate:-8px -4px} 80%{translate:6px 6px}}

button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
@media (prefers-reduced-motion:reduce){ #bg .glow, #bg .ghostboard, #bg .streak, .card.sel::after, .start::after{animation:none} }
.pill:disabled{opacity:.35; pointer-events:none}
.rundo{position:absolute; right:12px; bottom:12px; background:rgba(20,12,4,.62); border-color:rgba(255,230,190,.35); color:#fff}

/* ---------- roster ---------- */
button.prow{width:100%; text-align:left; cursor:pointer}
button.prow:active{transform:scale(.97)}
.prow .pname{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow.add{justify-content:center; white-space:nowrap; color:#9fd0ff; background:transparent; border:1.5px dashed rgba(127,176,255,.45)}
.prow .plus{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:20px; line-height:1; background:rgba(47,123,255,.25); color:#fff}
.modal{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px; background:rgba(2,4,14,.72)}
.modal[hidden]{display:none}
.sheet{--pc:var(--gold); width:min(480px, 100%); padding:24px; display:flex; flex-direction:column; gap:16px; animation:sheetIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes sheetIn{from{opacity:0; transform:translateY(24px) scale(.97)}}
.sheet-head{display:flex; align-items:center; gap:14px}
.sheet-head .avatar{--pc:inherit; width:56px; height:56px; font-size:26px; border-radius:16px}
.sheet-head h4{margin:2px 0 0; font-family:var(--num); font-weight:400; font-size:26px}
.nm-field{display:flex; flex-direction:column; gap:6px}
.nm-field input{width:100%; padding:16px 24px; border-radius:999px; font-family:var(--num); font-size:28px; color:#fff; background:rgba(4,7,22,.65); border:2px solid color-mix(in srgb, var(--pc) 70%, transparent); outline:none; box-shadow:0 0 0 0 transparent; transition:box-shadow .2s}
.nm-field input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--pc) 30%, transparent), 0 0 30px color-mix(in srgb, var(--pc) 35%, transparent)}
.nm-hint{padding:0 24px; font-size:13px; font-weight:600; color:var(--muted)}
.nm-actions{display:flex; gap:10px; align-items:center}
.nm-actions .sp{flex:1}
.pill.danger{color:#ff8fa3; border-color:rgba(255,45,85,.5); background:rgba(255,45,85,.1)}
.start.small{margin:0; padding:14px 28px; font-size:20px}
.start:disabled{filter:saturate(.3) brightness(.7); pointer-events:none}
.pill, .start{min-height:48px}
.toast{position:fixed; left:50%; bottom:24px; z-index:90; transform:translateX(-50%); padding:12px 22px; border-radius:999px; background:rgba(10,16,40,.95); border:1px solid var(--edge); font-weight:600; opacity:0; transition:opacity .3s; pointer-events:none}
.toast.on{opacity:1}

/* ---------- PORTRAIT ---------- */
@media (orientation:portrait){
  #scr-menu{grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:auto}
  .rail{flex-direction:row; padding:0; overflow-x:auto}
  .cat{white-space:nowrap; clip-path:none; border-radius:999px; margin:0; font-size:15px; padding:10px 16px}
  .cat.on{transform:none}
  .setup .plist{flex-direction:row; flex-wrap:wrap}
  #scr-game{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) min(calc(100vw - 28px), 48vh)}
  .x-main{grid-template-columns:1fr}
  .rounds{display:none}
  .pcards{grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
  .pcard{padding:8px 10px}
  .pcard small{display:none}
  .g-info{min-height:0; overflow:hidden}
  .bigscore{font-size:clamp(64px, 11vh, 150px)}
  .scorep{gap:6px; padding:10px}
  .slot{height:44px}
  .boardwrap{min-height:0}
}
@keyframes tick{to{transform:rotate(360deg)}}