:root{
  --bg:#05070f;
  --bg2:#0a0f22;
  --panel:linear-gradient(158deg,rgba(10,16,36,.72),rgba(8,12,30,.62));
  --line:rgba(150,180,255,.22);
  --ink:#eef2ff;
  --dim:#9aa6cf;
  --accent:#6c7bff;
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 760px at 15% -12%, #1d2a63 0%, transparent 58%),
    radial-gradient(1000px 680px at 112% 112%, #35184f 0%, transparent 55%),
    radial-gradient(900px 500px at 50% 120%, #0d2a55 0%, transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
}
#app{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

/* ---------------- stage / board ---------------- */
.stage{position:absolute;inset:0}
.board-wrap{position:absolute;inset:0}
canvas{
  display:block;
  background:var(--bg2);
  touch-action:none;
  cursor:pointer;
}
body[data-theme="light"] canvas{background:#eef1f9}

/* ---------------- heads-up display ---------------- */
.hud{
  position:absolute;
  left:0;right:0;
  z-index:4;
  display:flex;
  align-items:flex-start;
  gap:.3rem;
  pointer-events:none;
  padding:max(.3rem,env(safe-area-inset-top)) max(.4rem,env(safe-area-inset-right)) max(.3rem,env(safe-area-inset-bottom)) max(.4rem,env(safe-area-inset-left));
}
.hud > *{pointer-events:auto}
.hud-top{top:0;justify-content:space-between}
.hud-bottom{bottom:0;align-items:flex-end;justify-content:space-between;padding-bottom:max(.12rem,env(safe-area-inset-bottom))}
.hud-top-right{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hud-left,.hud-right{display:flex;gap:.32rem;align-items:center;flex-wrap:wrap}
.hud-right{justify-content:flex-end}

.brand-name{
  margin:0;
  font-size:clamp(.95rem,3.9vw,1.25rem);
  letter-spacing:.03em;
  font-weight:800;
  line-height:1.1;
  background:linear-gradient(90deg,#ff5c7a,#ffb703,#43dd7b,#35c3f3,#c77dff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  padding:.1rem .2rem;
}
.stat,.next-box{
  display:flex;
  flex-direction:column;
  line-height:1.02;
  padding:.16rem .42rem;
  border-radius:.5rem;
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.stat{min-width:3.1rem}
.stat-label{font-size:.5rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.stat-value{font-size:clamp(.9rem,3.7vw,1.12rem);font-weight:800;line-height:1.12;font-variant-numeric:tabular-nums}
.stat-value.pop{animation:pop .38s ease}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.32);color:#ffe14d}100%{transform:scale(1)}}
.stat.best .stat-value{color:#ffd76a}
.next-box{gap:.08rem}
.next-row{display:flex;gap:.26rem;align-items:center;min-height:1rem}
.next-row .chip{width:.9rem;height:.9rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 1px 4px rgba(0,0,0,.5)}
.next-row .chip.joker{
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;color:#3a2a00;
  background:conic-gradient(from 0deg,#ff5c7a,#ffd76a,#43dd7b,#35c3f3,#c77dff,#ff5c7a);
}

.joker-btn{
  padding:.3rem .55rem;
  border-radius:.5rem;
  border:1px solid rgba(180,150,255,.45);
  background:linear-gradient(100deg,rgba(60,90,190,.55),rgba(70,90,200,.5) 45%,rgba(140,90,220,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  opacity:.55;
  transition:opacity .2s, box-shadow .2s, transform .1s;
  white-space:nowrap;
}
.joker-btn.ready{
  opacity:1;
  box-shadow:0 0 0 1px rgba(199,125,255,.55), 0 6px 18px rgba(110,200,255,.28);
  animation:jokerGlow 1.8s ease-in-out infinite;
}
.joker-btn.active{ outline:2px solid #cfeaff; transform:scale(.98); }
.joker-btn:disabled{cursor:default}
.golden-btn{
  border-color:rgba(255,205,90,.55);
  background:linear-gradient(100deg,rgba(180,120,10,.55),rgba(160,100,10,.5) 45%,rgba(220,180,60,.55));
  color:#fff6df;
}
.golden-btn.ready{
  opacity:1;
  box-shadow:0 0 0 1px rgba(255,205,90,.7), 0 6px 18px rgba(255,190,40,.4);
  animation:goldGlow 1.6s ease-in-out infinite;
}
.golden-btn.active{ outline:2px solid #ffe9a6; transform:scale(.98); }
@keyframes goldGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(255,205,90,.55), 0 6px 18px rgba(255,190,40,.28)}
  50%{box-shadow:0 0 0 1px rgba(255,225,120,.95), 0 8px 26px rgba(255,205,60,.62)}
}
@keyframes jokerGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(199,125,255,.45), 0 6px 18px rgba(110,200,255,.20)}
  50%{box-shadow:0 0 0 1px rgba(199,125,255,.8), 0 8px 24px rgba(110,200,255,.45)}
}

.mini{
  background:linear-gradient(160deg,rgba(60,80,160,.6),rgba(16,24,54,.6));
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:.5rem;
  font-size:.74rem;
  padding:.3rem .55rem;
  cursor:pointer;
  line-height:1.2;
  white-space:nowrap;
}
.mini:hover{background:rgba(255,255,255,.16)}
#sound.off{opacity:.42}
#theme.ready{box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 0 14px rgba(120,150,255,.35)}

/* ---------------- toast ---------------- */
.toast{
  position:absolute;
  left:50%;
  bottom:calc(3.4rem + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(1.5rem);
  z-index:4;
  background:linear-gradient(160deg,rgba(80,105,190,.5),rgba(16,22,46,.9));
  border:1px solid rgba(160,190,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 34px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:.4rem .8rem;
  border-radius:2rem;
  font-size:.8rem;
  opacity:0;
  transition:opacity .25s, transform .25s;
  pointer-events:none;
  max-width:90%;
  text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- overlay ---------------- */
.overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  background:radial-gradient(circle at 50% 40%, rgba(20,26,48,.72), rgba(5,8,18,.9));
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:opacity .35s;
  z-index:5;
}
.overlay.hidden{opacity:0;pointer-events:none}
.overlay-card{
  width:min(30rem,92%);
  max-height:92%;
  overflow:auto;
  background:linear-gradient(160deg,rgba(60,80,150,.4),rgba(14,19,40,.72));
  border:1px solid rgba(160,190,255,.22);
  border-radius:1.2rem;
  padding:1.2rem 1.2rem;
  text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.65);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
.overlay-card h2{
  margin:0 0 .5rem;
  font-size:clamp(1.5rem,6vw,2rem);
  background:linear-gradient(90deg,#ff5c7a,#ffb703,#43dd7b,#35c3f3,#c77dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.overlay-card p{color:#c3ccf0;font-size:.9rem;line-height:1.5;margin:.4rem 0}
.ov-score{font-weight:700;color:#ffd76a}
.play{
  margin-top:.9rem;
  border:0;border-radius:1rem;
  padding:.8rem 2.1rem;
  font-size:1.05rem;font-weight:800;letter-spacing:.03em;
  color:#0b0f1e;
  background:linear-gradient(90deg,#ffd76a,#43dd7b,#35c3f3);
  cursor:pointer;
  box-shadow:0 10px 26px rgba(53,195,243,.35);
  transition:transform .12s;
}
.play:active{transform:scale(.96)}

/* ---------------- leaderboard (inside the overlay) ---------------- */
.board-box{
  margin-top:.9rem;
  border-radius:.6rem;
  background:rgba(8,12,30,.45);
  border:1px solid var(--line);
  padding:.4rem .6rem .5rem;
  text-align:left;
}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.lb{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.12rem;font-size:.76rem;max-height:8rem;overflow:auto}
.lb li{display:flex;gap:.5rem;align-items:center;padding:.1rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.lb li:last-child{border-bottom:0}
.lb .rank{width:1.1rem;color:var(--dim);font-variant-numeric:tabular-nums}
.lb .who{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .val{font-weight:700;font-variant-numeric:tabular-nums;color:#ffd76a}
.lb li.me .who{color:#9bf0b5;font-weight:700}
.lb-empty{color:var(--dim)}

/* ---------------- narrow screens: tighter HUD ---------------- */
@media (max-width:430px){
  .brand-name{font-size:.95rem}
  .stat{min-width:2.85rem;padding:.14rem .36rem}
  .next-box{padding:.14rem .36rem}
  .joker-btn,.mini{font-size:.7rem;padding:.26rem .45rem}
}
@media (max-width:340px){
  .brand-name{display:none}
}