:root{
  --cyan:#2ef7ff;
  --magenta:#ff3df0;
  --violet:#8a5cff;
  --amber:#ffb020;
  --ink:#05060f;
  --panel:rgba(10,8,26,.82);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05060f;color:#eaf6ff;
  font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
#app{position:fixed;inset:0;overflow:hidden}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.hidden{display:none !important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5}
#topbar{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;align-items:flex-start;
  padding:calc(10px + env(safe-area-inset-top)) 12px 0;justify-content:space-between}
.fighter{flex:1;max-width:44%;min-width:0}
.fighter.right{text-align:right}
.fname{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-size:clamp(10px,2.6vw,14px);letter-spacing:.14em;font-weight:700;margin-bottom:4px;
  text-shadow:0 0 10px rgba(46,247,255,.6);white-space:nowrap;overflow:hidden}
.fighter.right .fname{flex-direction:row-reverse}
.fname .lvl{font-size:.78em;color:var(--amber);text-shadow:0 0 10px rgba(255,176,32,.7);
  border:1px solid rgba(255,176,32,.5);border-radius:4px;padding:0 5px}
.hprow{display:flex;align-items:center;gap:7px}
.fighter.right .hprow{flex-direction:row-reverse}
.portrait{flex:0 0 auto;width:clamp(26px,6.6vw,42px);height:clamp(26px,6.6vw,42px);
  border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 40% 32%,rgba(24,34,66,.96),rgba(4,6,18,.99));
  border:1px solid rgba(46,247,255,.6);
  box-shadow:0 0 14px rgba(46,247,255,.55),inset 0 0 10px rgba(46,247,255,.3)}
.fighter.right .portrait{border-color:rgba(255,62,240,.65);
  box-shadow:0 0 14px rgba(255,62,240,.55),inset 0 0 10px rgba(255,62,240,.3)}
.portrait::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);pointer-events:none}
.portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.4))}
/* broadcast style scoreboard: [serve] [sets] [games] [points], points nearest the centre */
.sb{display:flex;align-items:stretch;gap:3px;min-width:0;height:clamp(22px,5.4vw,32px)}
.fighter.right .sb{flex-direction:row-reverse}
.sb b{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:clamp(20px,5vw,30px);padding:0 4px;border-radius:4px;font-weight:900;
  font-size:clamp(12px,3.2vw,19px);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  background:rgba(4,6,18,.82);border:1px solid rgba(120,200,255,.3);color:#eaf6ff;
  box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.sb b::before{position:absolute;top:-1px;left:0;right:0;text-align:center;
  font-size:clamp(5px,1.1vw,7px);letter-spacing:.14em;font-weight:800;color:#8fb6d6;line-height:1.3}
.sb .c-set::before{content:"SETS"}
.sb .c-game::before{content:"GAMES"}
.sb .c-pt::before{content:"PTS"}
.sb b{padding-top:clamp(5px,1.1vw,8px)}
.sb .c-pt{min-width:clamp(30px,7.2vw,44px);color:#061018;
  background:linear-gradient(180deg,#7dfcff,#12d9ff);border-color:rgba(160,250,255,.9);
  box-shadow:0 0 14px rgba(46,247,255,.6)}
.sb .c-pt::before{color:rgba(4,20,30,.7)}
.fighter.right .sb .c-pt{background:linear-gradient(180deg,#ff9df5,#ff2ec4);border-color:rgba(255,170,245,.9);
  box-shadow:0 0 14px rgba(255,62,240,.6)}
.sb .c-set{color:var(--amber)}
.sb .srv{flex:0 0 auto;align-self:center;width:clamp(7px,1.7vw,10px);height:clamp(7px,1.7vw,10px);border-radius:50%;
  background:#d8ff3a;box-shadow:0 0 8px #d8ff3a;opacity:0;transition:opacity .25s}
.sb .srv.on{opacity:1}
#mid{text-align:center;flex:0 0 auto;padding-top:2px}
#round-label{font-size:clamp(9px,2.4vw,13px);letter-spacing:.24em;font-weight:800;color:#cfe9ff}
#rally{font-size:clamp(8px,2vw,11px);letter-spacing:.18em;color:var(--amber);margin-top:2px}
#call{font-size:clamp(11px,3vw,17px);letter-spacing:.12em;font-weight:900;color:#fff;margin-top:2px;
  white-space:nowrap;text-shadow:0 0 10px rgba(46,247,255,.7)}
#call.tb{color:var(--amber);text-shadow:0 0 10px rgba(255,176,32,.7)}
#banner small{display:block;font-size:.34em;letter-spacing:.18em;margin-top:.25em;opacity:.95}
#brand{position:absolute;top:calc(84px + env(safe-area-inset-top));left:0;right:0;
  text-align:center;line-height:1.15;pointer-events:none;
  text-shadow:0 0 8px #000,0 0 16px rgba(46,247,255,.55)}
#brand::after{content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);
  width:min(90%,360px);height:calc(100% + 10px);z-index:-1;border-radius:13px;
  background:linear-gradient(180deg,rgba(4,6,20,.82),rgba(4,6,20,.4));
  border:1px solid rgba(46,247,255,.18)}
#brand b{display:block;font-size:clamp(9px,2.1vw,14px);letter-spacing:.2em;font-weight:900;color:#eaf7ff}
#brand i{display:block;font-size:clamp(7px,1.5vw,10px);letter-spacing:.16em;font-style:normal;
  font-weight:800;color:var(--amber);margin-top:1px}

#banner{position:absolute;top:34%;left:0;right:0;text-align:center;font-weight:900;
  font-size:clamp(26px,7vw,60px);letter-spacing:.1em;opacity:0;padding:0 10px;
  text-shadow:0 0 24px currentColor,0 0 60px currentColor;transition:opacity .25s}
#banner.show{opacity:1;animation:pop .5s ease}
#toast{position:absolute;bottom:26%;left:0;right:0;text-align:center;font-weight:800;
  letter-spacing:.14em;font-size:clamp(14px,4vw,26px);opacity:0;transition:opacity .3s;
  text-shadow:0 0 18px currentColor}
#toast.show{opacity:1}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}

/* ---------- footer / chips ---------- */
#footer{position:absolute;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;
  z-index:6;pointer-events:none}
.chip{pointer-events:auto;background:rgba(8,10,24,.7);border:1px solid rgba(46,247,255,.4);
  color:#bff3ff;border-radius:20px;padding:6px 12px;font-size:11px;letter-spacing:.1em;
  font-weight:700;cursor:pointer;backdrop-filter:blur(4px)}
.chip:active{background:rgba(46,247,255,.25)}
#hint{font-size:clamp(8px,2vw,11px);letter-spacing:.1em;color:#8fb6d6;opacity:.85;
  text-align:center;flex:1;text-shadow:0 0 6px #000}

/* ---------- touch controls ---------- */
#touch-ui{position:absolute;inset:0;z-index:7;pointer-events:none}
#stick-zone{position:absolute;left:0;bottom:0;width:46%;height:62%;pointer-events:auto}
#stick-base{position:absolute;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;
  border:2px solid rgba(46,247,255,.42);background:radial-gradient(circle,rgba(46,247,255,.12),rgba(46,247,255,.03));
  box-shadow:0 0 18px rgba(46,247,255,.22),inset 0 0 14px rgba(46,247,255,.12);touch-action:none;
  transition:box-shadow .15s,border-color .15s}
#stick-base.grabbed{border-color:rgba(46,247,255,.8);box-shadow:0 0 26px rgba(46,247,255,.5),inset 0 0 16px rgba(46,247,255,.2)}
#stick-base::after{content:"MOVE";position:absolute;left:0;right:0;bottom:-16px;text-align:center;
  font-size:9px;letter-spacing:.2em;font-weight:800;color:#9fd8f0;text-shadow:0 1px 4px #000;opacity:.75}
#stick-knob{position:absolute;width:54px;height:54px;left:35px;top:35px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9ffcff,#12b6d8);box-shadow:0 0 18px rgba(46,247,255,.9)}
#swing-btn{position:absolute;right:22px;bottom:calc(30px + env(safe-area-inset-bottom));
  width:96px;height:96px;border-radius:50%;pointer-events:auto;
  border:2px solid rgba(255,62,240,.7);color:#fff;font-weight:900;letter-spacing:.12em;
  background:radial-gradient(circle at 40% 30%,rgba(255,120,240,.55),rgba(120,20,110,.5));
  box-shadow:0 0 26px rgba(255,62,240,.5),inset 0 0 20px rgba(255,62,240,.35);
  font-size:15px;cursor:pointer}
#swing-btn:active{background:radial-gradient(circle at 40% 30%,rgba(255,180,250,.85),rgba(200,40,180,.7))}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(circle at 50% 45%,rgba(20,8,40,.72),rgba(3,3,10,.94));
  backdrop-filter:blur(3px)}
.panel,.startbox{width:min(860px,96vw);max-height:92vh;overflow:auto;background:var(--panel);
  border:1px solid rgba(46,247,255,.35);border-radius:14px;
  box-shadow:0 0 50px rgba(46,247,255,.18),0 0 90px rgba(255,62,240,.12);
  padding:clamp(16px,3vw,30px);text-align:center}
.panel h2{margin:0 0 6px;font-size:clamp(20px,4.4vw,34px);letter-spacing:.14em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.sub{margin:0 0 16px;color:#9fc2dd;font-size:clamp(11px,2.4vw,14px);letter-spacing:.06em}
/* ---------- title cover ---------- */
#start.cover{display:block;padding:0;overflow:hidden;background:#05060f;backdrop-filter:none}
#start.cover .cover-art{position:absolute;inset:0;
  background:url(assets/cover.jpg) center 30%/cover no-repeat;
  transform:scale(1.03);animation:coverDrift 26s ease-in-out infinite alternate}
@keyframes coverDrift{from{transform:scale(1.03) translate3d(-.6%,-.4%,0)}to{transform:scale(1.08) translate3d(.6%,.5%,0)}}
#start.cover .cover-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    rgba(3,3,10,.97) 0%, rgba(3,3,10,.86) 24%, rgba(3,3,10,.42) 48%,
    rgba(3,3,10,.12) 66%, rgba(3,3,10,.42) 100%)}
#start.cover .cover-inner{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1.5vh,13px);
  padding:0 clamp(14px,4vw,44px) calc(12px + env(safe-area-inset-bottom));text-align:center}
#start.cover .logo{font-size:clamp(28px,7vw,64px);font-weight:900;letter-spacing:.06em;
  line-height:1;color:#f4fdff;
  text-shadow:0 0 20px rgba(46,247,255,.85),0 2px 4px rgba(0,0,0,.75),0 0 46px rgba(255,62,240,.4)}
#start.cover .logo span{display:block;font-size:clamp(22px,5.6vw,50px);
  background:linear-gradient(90deg,var(--magenta),var(--amber));-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(255,62,240,.7))}
.tag{color:#cfe4f6;letter-spacing:.08em;font-size:clamp(11px,2.4vw,16px);margin:2px 0 4px;
  text-shadow:0 1px 5px rgba(0,0,0,.85)}
button#play-btn,button#again-btn{cursor:pointer;border:none;border-radius:999px;
  padding:clamp(12px,2.6vw,17px) clamp(30px,7vw,54px);font-weight:900;
  letter-spacing:.18em;font-size:clamp(14px,3.1vw,19px);color:#04121a;
  display:inline-flex;align-items:center;gap:.6em;
  background:linear-gradient(90deg,var(--cyan),#9dfbff);
  box-shadow:0 0 30px rgba(46,247,255,.75),0 6px 22px rgba(0,0,0,.5);
  transition:transform .12s,box-shadow .2s;animation:playPulse 2.4s ease-in-out infinite}
@keyframes playPulse{0%,100%{box-shadow:0 0 26px rgba(46,247,255,.6),0 6px 22px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 46px rgba(46,247,255,.95),0 6px 22px rgba(0,0,0,.5)}}
button#play-btn:active,button#again-btn:active{transform:scale(.96)}
button#play-btn:hover{transform:translateY(-2px)}
.play-ico{width:0;height:0;border-style:solid;border-width:.55em 0 .55em .9em;
  border-color:transparent transparent transparent #04121a;display:inline-block}
.controls{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;
  color:#a9c8e0;font-size:clamp(10px,2.1vw,13px);letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(0,0,0,.9)}
.controls b{color:var(--cyan);letter-spacing:.12em;margin-right:6px}

/* ---------- match setup picks ---------- */
#setup .panel{width:min(760px,96vw)}
.picks{display:flex;gap:clamp(12px,3vw,26px);justify-content:center;flex-wrap:wrap;margin:4px 0 18px}
.pick-col{flex:1 1 250px;max-width:330px}
.pick-lab{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--amber);margin-bottom:8px}
.pick-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;cursor:pointer;border-radius:12px;padding:0;overflow:hidden;
  border:2px solid rgba(255,255,255,.14);background:#0b0a1a;text-align:left;color:#fff;
  transition:transform .12s,border-color .12s,box-shadow .12s}
.tile:hover{transform:translateY(-3px)}
.tile.active{border-color:rgba(46,247,255,.7);box-shadow:0 0 12px rgba(46,247,255,.28)}
.tile .sw{position:relative;height:94px;width:100%;display:block;overflow:hidden;
  box-shadow:inset 0 -14px 18px -12px rgba(3,3,10,.9)}
.tile .sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 22%;display:block;transition:transform .28s ease;
  filter:saturate(1.04) contrast(1.02)}
.tile:hover .sw img{transform:scale(1.05)}
.tile.loading .sw img{opacity:.55}
.tile .tn{padding:6px 9px 9px}
.tile .tn b{display:block;font-size:12px;letter-spacing:.05em}
.tile .tn span{display:block;font-size:10px;color:#9fc2dd;margin-top:2px;line-height:1.3}
.tile .chk{position:absolute;top:5px;right:9px;font-size:13px;color:var(--cyan);
  text-shadow:0 0 6px #000;opacity:0}
.tile.active .chk{opacity:1}
.setup-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.ghost{cursor:pointer;border-radius:999px;padding:clamp(10px,2.2vw,14px) clamp(20px,4vw,32px);
  font-weight:800;letter-spacing:.16em;font-size:clamp(12px,2.6vw,15px);
  color:#bfe9ff;background:rgba(10,12,28,.7);border:1px solid rgba(46,247,255,.5)}
.ghost:active{transform:scale(.97)}
#setup-start{cursor:pointer;border:none;border-radius:999px;
  padding:clamp(10px,2.2vw,14px) clamp(22px,5vw,40px);
  font-weight:900;letter-spacing:.16em;font-size:clamp(12px,2.6vw,16px);color:#04121a;
  background:linear-gradient(90deg,var(--cyan),#9dfbff);
  box-shadow:0 0 14px rgba(46,247,255,.4);display:inline-flex;align-items:center;gap:.5em}
#setup-start:active{transform:scale(.97)}
@media (max-height:560px){
  #setup .panel{padding:10px 14px}
  #setup .panel h2{font-size:clamp(16px,4vw,22px);margin-bottom:2px}
  #setup .sub{margin-bottom:8px;font-size:11px}
  #setup .picks{margin:2px 0 10px;gap:10px}
  #setup .pick-lab{margin-bottom:4px;font-size:10px}
  #setup .tile .sw{height:56px}
  #setup .tile .tn{padding:4px 7px 6px}
  #setup .tile .tn b{font-size:11px}
  #setup .tile .tn span{font-size:9px;line-height:1.2}
  #setup .setup-btns{margin-top:4px}
  #setup .ghost,#setup-start{padding:8px 18px;font-size:12px}
}

#card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,16px)}
@media (max-width:560px){#card-row{grid-template-columns:1fr;gap:10px}}
.card{position:relative;cursor:pointer;text-align:left;padding:clamp(12px,2.6vw,18px);
  border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg,rgba(30,16,60,.95),rgba(10,8,24,.95));
  transition:transform .14s,border-color .14s,box-shadow .14s}
.card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 0 26px rgba(46,247,255,.35)}
.card .ico{font-size:clamp(22px,5vw,32px);margin-bottom:6px}
.card h3{margin:0 0 6px;font-size:clamp(13px,2.8vw,18px);letter-spacing:.06em;color:#fff}
.card p{margin:0;font-size:clamp(10px,2.2vw,13px);color:#a9c8e0;line-height:1.45}
.card .tagcorner{position:absolute;top:8px;right:10px;font-size:9px;letter-spacing:.16em;color:var(--amber)}

#go-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 20px}
#go-stats .st{background:rgba(0,0,0,.3);border:1px solid rgba(46,247,255,.2);border-radius:8px;padding:8px}
#go-stats .st b{display:block;font-size:clamp(18px,4vw,28px);color:var(--cyan)}
#go-stats .st span{font-size:10px;letter-spacing:.14em;color:#8fb6d6}

/* ---------- loader ---------- */
#loader{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;transition:opacity .5s;
  background:radial-gradient(circle at 50% 46%,rgba(3,3,10,.45),rgba(3,3,10,.9) 78%),
    url(assets/cover.jpg) center 30%/cover no-repeat}
#loader.gone{opacity:0;pointer-events:none}
.ld-icon{width:clamp(72px,16vmin,112px);height:auto;aspect-ratio:1;border-radius:22%;margin-bottom:14px;
  box-shadow:0 0 0 2px rgba(46,247,255,.45),0 0 28px rgba(46,247,255,.35),0 8px 22px rgba(0,0,0,.6)}
.ld-in{letter-spacing:.4em;font-weight:800;color:var(--cyan);font-size:clamp(13px,3vw,20px);
  text-shadow:0 0 20px rgba(46,247,255,.7)}
.ld-in .dot{animation:blink 1.2s infinite}
.ld-in .dot:nth-child(2){animation-delay:.2s}
.ld-in .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.15}50%{opacity:1}}
.ld-bar{width:min(320px,70vw);height:6px;border-radius:4px;background:rgba(46,247,255,.15);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 14px rgba(46,247,255,.8);transition:width .25s}

/* landscape small-height: tighten */
@media (max-height:430px){
  #banner{top:26%}
  #start.cover .logo{font-size:clamp(20px,4.6vw,32px)}
  #start.cover .logo span{font-size:clamp(16px,3.8vw,26px)}
  #start.cover .cover-inner{gap:6px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  #start.cover .controls{display:none}
  #start.cover .tag{font-size:clamp(10px,2vw,13px);margin:0}
}

/* ---------- cup tournament ---------- */
:root{--gold:#ffd166;--gold2:#ffb020}
.cup-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.18em;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23201204' d='M6 2h12v2h3v3a5 5 0 0 1-4.6 5A6 6 0 0 1 13 15.9V18h3v2h1v2H7v-2h1v-2h3v-2.1A6 6 0 0 1 7.6 12 5 5 0 0 1 3 7V4h3V2zm0 4H5v1a3 3 0 0 0 1.3 2.5A6 6 0 0 1 6 8V6zm12 0v2a6 6 0 0 1-.3 1.5A3 3 0 0 0 19 7V6h-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.cup-ico.gold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd166' d='M6 2h12v2h3v3a5 5 0 0 1-4.6 5A6 6 0 0 1 13 15.9V18h3v2h1v2H7v-2h1v-2h3v-2.1A6 6 0 0 1 7.6 12 5 5 0 0 1 3 7V4h3V2zm0 4H5v1a3 3 0 0 0 1.3 2.5A6 6 0 0 1 6 8V6zm12 0v2a6 6 0 0 1-.3 1.5A3 3 0 0 0 19 7V6h-1z'/%3E%3C/svg%3E")}
.mode-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
button#cup-btn,.gold-btn{cursor:pointer;border:none;border-radius:999px;
  padding:clamp(12px,2.6vw,17px) clamp(24px,5vw,40px);font-weight:900;
  letter-spacing:.16em;font-size:clamp(13px,2.8vw,18px);color:#201204;
  display:inline-flex;align-items:center;gap:.55em;
  background:linear-gradient(90deg,#ffe29a,var(--gold),var(--gold2));
  box-shadow:0 0 26px rgba(255,190,60,.6),0 6px 22px rgba(0,0,0,.5);transition:transform .12s}
button#cup-btn:active,.gold-btn:active{transform:scale(.96)}
button#cup-btn:hover,.gold-btn:hover{transform:translateY(-2px)}
.gold-btn .play-ico{border-color:transparent transparent transparent #201204}
.cabinet{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;font-size:clamp(10px,2vw,12px);
  letter-spacing:.1em;color:#cfe4f6;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.cabinet:empty{display:none}
.cabinet .cb{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  background:rgba(8,10,24,.6);border:1px solid rgba(255,209,102,.25)}
.cabinet .cb.won{border-color:rgba(255,209,102,.8);color:var(--gold);box-shadow:0 0 12px rgba(255,190,60,.3)}
.cabinet .cb:not(.won) .cup-ico{opacity:.3}
.mode-row{display:flex;gap:10px;justify-content:center;margin:6px 0 8px}
.mode-chip{cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  min-width:128px;padding:7px 16px;border-radius:12px;font-weight:900;letter-spacing:.14em;font-size:13px;
  color:#cfe9ff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.16)}
.mode-chip small{font-weight:600;letter-spacing:.06em;font-size:10px;color:#8fb6d6}
.mode-chip .cup-ico.sm{display:none}
.mode-chip.active[data-mode=arcade]{border-color:var(--cyan);box-shadow:0 0 14px rgba(46,247,255,.35);color:#fff}
.mode-chip.active[data-mode=cup]{border-color:var(--gold);box-shadow:0 0 14px rgba(255,190,60,.45);color:var(--gold)}
.tile .cupbadge{position:absolute;left:6px;top:6px;z-index:2;display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:999px;font-size:10px;font-weight:900;color:#201204;
  background:linear-gradient(90deg,#ffe29a,var(--gold2));box-shadow:0 0 10px rgba(255,190,60,.6)}
#setup.cupmode #setup-start{background:linear-gradient(90deg,#ffe29a,var(--gold),var(--gold2));box-shadow:0 0 14px rgba(255,190,60,.5);color:#201204}
#setup.cupmode .panel h2{background:linear-gradient(90deg,#ffe29a,var(--gold2));-webkit-background-clip:text;background-clip:text}

/* stage overlays leave room for the 3D trophy */
.overlay.stage{background:linear-gradient(90deg,rgba(3,3,10,.82) 0%,rgba(3,3,10,.55) 52%,rgba(3,3,10,0) 78%);
  backdrop-filter:none;justify-content:flex-start;padding-left:max(16px,env(safe-area-inset-left))}
.overlay.stage .bpanel{width:min(600px,58vw);border-color:rgba(255,209,102,.45);
  box-shadow:0 0 40px rgba(255,190,60,.18),0 0 90px rgba(255,62,240,.10);padding:clamp(12px,2.4vw,24px)}
@media (max-aspect-ratio:21/20){
  .overlay.stage{align-items:flex-end;justify-content:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,rgba(3,3,10,.88) 0%,rgba(3,3,10,.6) 55%,rgba(3,3,10,0) 70%)}
  .overlay.stage .bpanel{width:min(600px,100%);max-height:64vh}
}
.cup-kicker{font-size:clamp(10px,2vw,12px);letter-spacing:.3em;font-weight:900;color:var(--gold);margin-bottom:2px}
.bpanel h2,.gold-title{background:linear-gradient(90deg,#fff3c4,var(--gold),var(--gold2)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;color:transparent}
.gold-title{margin:0 0 6px;font-size:clamp(26px,6vw,46px);letter-spacing:.16em;
  filter:drop-shadow(0 0 16px rgba(255,190,60,.55))}
#br-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(6px,1.6vw,14px);margin:4px 0 10px;text-align:left}
.bhead{font-size:clamp(8px,1.7vw,10px);letter-spacing:.18em;font-weight:900;color:#8fb6d6;margin-bottom:5px;text-align:center}
.bcol.now .bhead{color:var(--gold)}
.bslots{display:flex;flex-direction:column;justify-content:space-around;height:calc(100% - 18px);gap:6px}
.bmatch{border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);padding:2px}
.bmatch.next{border-color:var(--gold);box-shadow:0 0 12px rgba(255,190,60,.45);animation:nextPulse 1.6s ease-in-out infinite}
@keyframes nextPulse{0%,100%{box-shadow:0 0 8px rgba(255,190,60,.3)}50%{box-shadow:0 0 18px rgba(255,190,60,.7)}}
.be{display:flex;align-items:center;gap:5px;padding:2px 4px;border-radius:6px;min-width:0;
  font-size:clamp(9px,1.8vw,12px);font-weight:700;letter-spacing:.03em;color:#cfe4f6}
.be .pt{flex:0 0 auto;width:clamp(14px,2.8vw,20px);height:clamp(14px,2.8vw,20px);border-radius:50%;
  background:#223 center/cover no-repeat;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:900;color:#05060f}
.be .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.be .w{flex:0 0 auto;font-size:.8em;font-weight:900;color:var(--gold);opacity:0}
.be.win .w{opacity:1}
.be.you{color:#fff;background:rgba(46,247,255,.14)}
.be.you .pt{border-color:var(--cyan)}
.be.out{opacity:.38;text-decoration:line-through}
.be.tbd{color:#6f8aa6;font-style:italic;font-weight:600}
.be.fresh{animation:beIn .6s ease both}
@keyframes beIn{from{transform:translateX(-10px);opacity:0}to{transform:none;opacity:1}}
#br-next{font-size:clamp(11px,2.2vw,14px);letter-spacing:.06em;color:#dfeefc;margin:0 0 10px}
#br-next b{color:var(--gold)}
#ch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 16px}
#ch-stats .st{background:rgba(0,0,0,.3);border:1px solid rgba(255,209,102,.25);border-radius:8px;padding:8px 4px}
#ch-stats .st b{display:block;font-size:clamp(16px,3.6vw,24px);color:var(--gold)}
#ch-stats .st span{font-size:9px;letter-spacing:.14em;color:#8fb6d6}
@media (max-width:480px){#ch-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-height:500px){
  .overlay.stage .bpanel{padding:8px 12px}
  .bpanel h2{font-size:clamp(16px,3.6vw,22px);margin-bottom:0}
  .bpanel .sub{margin-bottom:4px;font-size:11px}
  #br-grid{margin:2px 0 6px}
  #br-next{margin-bottom:6px}
  .bpanel .ghost,.gold-btn{padding:8px 18px;font-size:12px}
  .gold-title{font-size:28px}
  #ch-stats{margin:6px 0 8px}
}
@media (max-height:430px){.mode-chip small{display:none}.mode-row{margin:2px 0 4px}.mode-chip{padding:5px 12px;min-width:100px}
  button#cup-btn,button#play-btn{padding:9px 22px;font-size:13px}.cabinet{display:none}}
#brand.cup b{color:var(--gold);text-shadow:0 0 12px rgba(255,190,60,.6)}
#brand.cup i{color:#ffe7b0}
.bpanel .setup-btns{flex-wrap:nowrap}
.be{padding:1px 4px}
.bslots{gap:4px}
@media (max-height:640px){
  .overlay.stage .bpanel{max-height:96vh;padding:10px 14px}
  #br-sub{display:none}
  .bpanel h2{font-size:clamp(18px,3.8vw,28px);margin-bottom:4px}
  .bhead{margin-bottom:3px}
  .be{font-size:11px}
  .be .pt{width:15px;height:15px}
  #br-next{font-size:12px;margin-bottom:6px}
  .bpanel .ghost,.gold-btn{padding:9px 20px;font-size:13px}
}
@media (max-height:420px){
  .be{font-size:10px;padding:0 3px}
  .bslots{gap:2px}
  .bmatch{padding:1px}
  .cup-kicker{display:none}
  .bpanel h2{font-size:17px}
}
/* keep the start button in reach while the picks scroll */
#setup .setup-btns{position:sticky;bottom:calc(-1 * clamp(16px,3vw,30px));z-index:3;margin:6px calc(-1 * clamp(16px,3vw,30px)) calc(-1 * clamp(16px,3vw,30px));
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(10,8,26,.98) 70%,rgba(10,8,26,0))}
@media (max-width:520px){
  #setup .tile .sw{height:64px}
  #setup .tile .tn span{display:none}
  #setup .pick-row{gap:7px}
}
@media (max-height:560px){
  #setup .setup-btns{bottom:-10px;margin:4px -14px -10px;padding:8px}
  #setup .tile .sw{height:46px}
}

/* cover: one button over the art */
#start.cover .cover-inner{padding-bottom:calc(clamp(34px,9vh,80px) + env(safe-area-inset-bottom))}
#start.cover .cover-scrim{background:linear-gradient(to top,
  rgba(3,3,10,.85) 0%, rgba(3,3,10,.45) 22%, rgba(3,3,10,0) 45%)}
#start.cover button#play-btn{padding:clamp(14px,2.8vw,19px) clamp(34px,7vw,60px);font-size:clamp(15px,3.2vw,21px)}

/* cover title above the single button */
#start.cover h1.cover-title{margin:0 0 clamp(6px,1.8vh,16px);font-size:clamp(26px,6.4vw,62px);letter-spacing:.05em}
#start.cover h1.cover-title span{margin-top:.18em;font-size:clamp(15px,3.4vw,34px);letter-spacing:.14em}
#start.cover .cover-scrim{background:linear-gradient(to top,
  rgba(3,3,10,.92) 0%, rgba(3,3,10,.7) 22%, rgba(3,3,10,.25) 42%, rgba(3,3,10,0) 58%)}
@media (max-height:430px){
  #start.cover h1.cover-title{font-size:clamp(20px,4.4vw,34px);margin-bottom:4px}
  #start.cover h1.cover-title span{font-size:clamp(12px,2.4vw,18px)}
}

/* winning shot replay */
#replay{position:absolute;inset:0;z-index:25;pointer-events:auto;cursor:pointer}
#replay.hidden{display:none}
#replay .rp-bar{position:absolute;left:0;right:0;height:11%;background:#000;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
#replay .rp-top{top:0;transform:translateY(-100%)}
#replay .rp-bot{bottom:0;transform:translateY(100%)}
#replay.on .rp-top,#replay.on .rp-bot{transform:none}
#replay .rp-tag{position:absolute;top:calc(11% + 12px);left:calc(14px + env(safe-area-inset-left));
  display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.32em;font-size:clamp(12px,2.2vw,17px);
  color:#fff;padding:6px 12px;border-radius:6px;background:rgba(3,3,10,.55);border:1px solid rgba(255,255,255,.2);
  opacity:0;transition:opacity .4s .2s}
#replay.on .rp-tag{opacity:1}
#replay .rp-tag i{width:10px;height:10px;border-radius:50%;background:#ff2d4a;box-shadow:0 0 10px #ff2d4a;animation:blink 1s infinite}
#rp-cap{position:absolute;left:0;right:0;bottom:calc(11% + 14px);display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;padding:0 16px;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
#rp-cap.show{opacity:1;transform:none}
#rp-cap b{font-size:clamp(20px,5vw,46px);font-weight:900;letter-spacing:.08em;color:#fff;
  text-shadow:0 0 18px rgba(46,247,255,.9),0 2px 4px rgba(0,0,0,.8)}
#rp-cap span{font-size:clamp(11px,2.2vw,16px);font-weight:800;letter-spacing:.18em;color:var(--amber);
  text-shadow:0 1px 5px rgba(0,0,0,.9)}
#rp-skip{position:absolute;top:calc(11% + 12px);right:calc(14px + env(safe-area-inset-right));z-index:2}
.rp-hide{visibility:hidden}
@media (max-height:430px){#replay .rp-bar{height:9%}#rp-cap b{font-size:clamp(18px,4vw,30px)}}

/* ---------- online 1v1 ---------- */
.online-cta{display:inline-flex;align-items:center;gap:.6em;margin-top:2px;
  border-color:rgba(255,62,240,.7);color:#ffe3fb;box-shadow:0 0 16px rgba(255,62,240,.35)}
.vs-ico{display:inline-block;padding:2px 6px;border-radius:6px;font-size:.8em;letter-spacing:.06em;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));color:#08081a}
.mode-chip.active[data-mode=online]{border-color:var(--magenta);box-shadow:0 0 14px rgba(255,62,240,.45);color:#ffd6fa}
#setup.onlinemode #setup-start{background:linear-gradient(90deg,var(--magenta),#ff9df5);box-shadow:0 0 14px rgba(255,62,240,.5);color:#1a0418}
#setup.onlinemode .play-ico{border-color:transparent transparent transparent #1a0418}
.lpanel{width:min(620px,96vw)}
.lb-kick{color:var(--magenta)}
#lb-seats{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,20px);margin:4px 0 12px}
.lseat{flex:1 1 0;max-width:220px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 8px;border-radius:12px;border:1px dashed rgba(255,255,255,.25);background:rgba(0,0,0,.3)}
.lseat .lpt{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.18)}
.lseat b{font-size:clamp(11px,2.6vw,14px);letter-spacing:.06em;color:#fff;word-break:break-all}
.lseat i{font-style:normal;font-size:10px;letter-spacing:.2em;color:#8fb6d6;text-transform:uppercase}
.lseat.here{border-style:solid;border-color:rgba(46,247,255,.65);box-shadow:0 0 14px rgba(46,247,255,.25)}
.lseat.here .lpt{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.lseat.here i{color:var(--cyan)}
.lseat:not(.here) .lpt{animation:blink 1.4s infinite}
.lvs{font-weight:900;letter-spacing:.1em;color:var(--magenta);font-size:clamp(14px,3.4vw,20px)}
#lb-linkrow{display:flex;gap:8px;margin:0 auto 12px;max-width:520px}
#lb-url{flex:1;min-width:0;font:inherit;font-size:12px;padding:9px 12px;border-radius:10px;color:#dff6ff;
  background:rgba(0,0,0,.45);border:1px solid rgba(46,247,255,.4)}
.lb-picklab{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--amber);margin:2px 0 6px}
#lb-chars{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 auto 12px;max-width:520px}
.lchar{cursor:pointer;padding:0;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.14);
  background:#0b0a1a;color:#fff;display:flex;flex-direction:column}
.lchar img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%;display:block}
.lchar span{font-size:8px;letter-spacing:.04em;padding:3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lchar.active{border-color:var(--cyan);box-shadow:0 0 10px rgba(46,247,255,.4)}
@media (max-width:420px){#lb-chars{grid-template-columns:repeat(3,1fr)}}
.lb-btns .gold-btn{padding:clamp(10px,2.2vw,14px) clamp(18px,4vw,30px);font-size:clamp(12px,2.6vw,15px)}
@media (max-height:520px){
  .lpanel{padding:10px 14px}
  .lpanel h2{font-size:clamp(16px,4vw,22px);margin-bottom:2px}
  .lpanel .sub{margin-bottom:6px;font-size:11px}
  #lb-seats{margin:2px 0 6px}.lseat{padding:5px 6px}
  #lb-chars{max-width:420px;margin-bottom:6px}.lchar span{display:none}
  #lb-linkrow{margin-bottom:6px}
  .lb-btns .ghost,.lb-btns .gold-btn{padding:8px 16px;font-size:12px}
}
#netwait{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:6;max-width:88vw;text-align:center;
  padding:10px 16px;border-radius:12px;font-weight:900;letter-spacing:.12em;font-size:clamp(11px,2.6vw,15px);
  color:#ffd166;background:rgba(6,6,18,.82);border:1px solid rgba(255,209,102,.5)}
#hud.online .lvl{display:none}
#or-title.lose{background:linear-gradient(90deg,var(--magenta),#ff8a6a);-webkit-background-clip:text;background-clip:text}
#or-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 10px}
#or-stats .st{background:rgba(0,0,0,.3);border:1px solid rgba(46,247,255,.2);border-radius:8px;padding:8px}
#or-stats .st b{display:block;font-size:clamp(16px,3.6vw,24px);color:var(--cyan)}
#or-stats .st span{font-size:10px;letter-spacing:.14em;color:#8fb6d6}
@media (max-width:480px){#or-stats{grid-template-columns:repeat(2,1fr)}}
.or-next{color:var(--amber);font-weight:800;letter-spacing:.16em}
#onres{background:radial-gradient(circle at 50% 45%,rgba(20,8,40,.55),rgba(3,3,10,.8))}
.mode-row{flex-wrap:wrap}@media (max-width:520px){.mode-chip{min-width:0;flex:1 1 30%;padding:6px 8px;font-size:11px;letter-spacing:.08em}}
#lb-near{display:flex;gap:14px;align-items:center;justify-content:center;margin:0 auto 12px;max-width:560px;text-align:left}
#lb-near.hidden{display:none}
#lb-qr{width:128px;height:128px;flex:0 0 auto;border-radius:10px;background:#fff;
  box-shadow:0 0 0 2px rgba(46,247,255,.55),0 0 18px rgba(46,247,255,.35);image-rendering:pixelated}
.lb-nearcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.lb-nearcol b{font-size:12px;letter-spacing:.16em;color:var(--cyan)}
.lb-nearcol span{font-size:clamp(10px,2.4vw,12px);color:#9fc2dd;line-height:1.35}
.lb-nearcol #lb-linkrow{margin:0;max-width:none}
@media (max-width:420px){#lb-qr{width:112px;height:112px}}
@media (max-height:520px){#lb-qr{width:92px;height:92px}#lb-near{margin-bottom:6px}.lb-nearcol span{display:none}}