:root{
  --bg1:#2a1a4a;
  --bg2:#0e0a26;
  --panel:rgba(255,255,255,.06);
  --panel-b:rgba(255,255,255,.14);
  --ink:#f4eaff;
  --dim:#9d8fc4;
  --accent:#ff5fa2;
  --gel-glow:0 0 24px rgba(255,95,162,.35);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Fredoka',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% -10%, #4a2b7e 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 110%, #ff5fa233 0%, transparent 50%),
    linear-gradient(160deg,var(--bg1),var(--bg2));
  overflow:hidden;
  user-select:none;
  touch-action:manipulation;
}
#app{display:flex;flex-direction:column;height:100dvh;padding:8px;gap:8px;max-width:820px;margin:0 auto;}

#topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:0 0 auto;}
.title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:clamp(20px,5vw,30px);
  letter-spacing:-1px;line-height:1;
  background:linear-gradient(90deg,#ffd1e8,#ff5fa2,#a06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap;
}
.pud{-webkit-text-fill-color:initial;filter:drop-shadow(0 2px 4px #0006);}
.stats{display:flex;gap:8px;margin-left:auto;}
.stat{
  display:flex;flex-direction:column;align-items:center;
  background:var(--panel);border:1px solid var(--panel-b);
  border-radius:12px;padding:4px 12px;min-width:56px;
}
.stat .lbl{font-size:9px;letter-spacing:1.5px;color:var(--dim);font-weight:600;}
.stat span:last-child{font-size:18px;font-weight:700;}
.btns{display:flex;gap:6px;}
.btns button{
  background:var(--panel);border:1px solid var(--panel-b);color:var(--ink);
  border-radius:12px;width:40px;height:40px;font-size:18px;cursor:pointer;
  transition:transform .1s,background .2s;
}
.btns button:active{transform:scale(.9);}

#game{display:flex;gap:8px;flex:1 1 auto;min-height:0;}
#playWrap{position:relative;flex:0 0 auto;height:100%;display:flex;align-items:stretch;}
#canvas{
  display:block;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.25));
  border:2px solid var(--panel-b);
  border-radius:20px;
  box-shadow:inset 0 8px 30px rgba(0,0,0,.4), inset 0 -2px 12px rgba(255,255,255,.06), var(--gel-glow);
}
#nextCanvas{width:100%;height:80px;display:block;}

#side{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;min-width:0;}
.panel{
  background:var(--panel);border:1px solid var(--panel-b);
  border-radius:16px;padding:10px;
}
.panel-title{font-size:10px;letter-spacing:2px;color:var(--dim);font-weight:600;margin-bottom:6px;}
.leader{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;min-height:0;}
#leaderboard{list-style:none;overflow-y:auto;font-size:13px;}
#leaderboard li{display:flex;justify-content:space-between;padding:5px 4px;border-bottom:1px dashed rgba(255,255,255,.08);}
#leaderboard li.empty{color:var(--dim);justify-content:center;font-style:italic;}
#leaderboard li .rk{color:var(--accent);font-weight:700;margin-right:6px;}
#leaderboard li .sc{font-weight:700;}
#leaderboard li.me{background:rgba(255,95,162,.12);border-radius:8px;}

#touch{display:none;gap:6px;justify-content:center;flex:0 0 auto;}
#touch button{
  flex:1;max-width:90px;height:56px;font-size:22px;
  background:var(--panel);border:1px solid var(--panel-b);color:var(--ink);
  border-radius:16px;cursor:pointer;transition:transform .08s,background .15s;
}
#touch button:active{transform:scale(.92);background:var(--accent);}

#foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--dim);padding:0 4px;flex:0 0 auto;}
#foot a{color:var(--accent);text-decoration:none;font-weight:600;}
#foot a:hover{text-decoration:underline;}

#auth-status{position:fixed;bottom:4px;left:4px;font-size:10px;color:var(--dim);pointer-events:none;}

#overlay{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  border-radius:20px;background:rgba(14,10,38,.78);backdrop-filter:blur(6px);z-index:5;
}
#overlay.show{display:flex;}
.ov-card{text-align:center;padding:24px;max-width:90%;}
.ov-card h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,7vw,46px);
  background:linear-gradient(90deg,#ffd1e8,#ff5fa2,#a06bff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wobble 2.4s ease-in-out infinite;
}
@keyframes wobble{0%,100%{transform:rotate(-2deg) scale(1);}50%{transform:rotate(2deg) scale(1.03);}}
.ov-card .tag{margin:8px 0 16px;color:#e6d8ff;font-size:15px;}
.ov-card .hint{font-size:12px;color:var(--dim);margin-bottom:16px;line-height:1.6;}
.ov-card .mob{display:none;}
#startBtn{
  font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;
  background:linear-gradient(90deg,#ff5fa2,#a06bff);color:#fff;border:none;
  padding:13px 30px;border-radius:40px;cursor:pointer;
  box-shadow:0 6px 20px rgba(255,95,162,.5);transition:transform .1s;
}
#startBtn:active{transform:scale(.94);}

@media (max-width:640px){
  #touch{display:flex;}
  .ov-card .desk{display:none;}
  .ov-card .mob{display:block;}
  #side{flex:0 0 96px;}
  .title{font-size:18px;}
  .stat{min-width:46px;padding:4px 8px;}
}
@media (max-height:560px){#foot{display:none;}}