:root{
  --ink:#2b2b3a;
  --pop:#ff5a8a;
  --pop2:#ffb340;
  --pop3:#3fc9c0;
  --pop4:#7c6cff;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Fredoka',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 15% 20%,#ffe49c 0%,transparent 40%),
    radial-gradient(circle at 85% 15%,#ffc1dd 0%,transparent 40%),
    radial-gradient(circle at 80% 85%,#b8f0e6 0%,transparent 45%),
    radial-gradient(circle at 20% 90%,#cdc6ff 0%,transparent 45%),
    linear-gradient(160deg,#fff7e8,#f4f0ff);
  touch-action:manipulation;
}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(8deg)}}
.decor{position:fixed;font-size:42px;opacity:.35;animation:float 6s ease-in-out infinite;pointer-events:none;z-index:0;}
.page{position:fixed;inset:0;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 14px 14px;animation:pop .35s cubic-bezier(.2,1.3,.4,1);}
.bar{display:flex;align-items:center;gap:12px;margin-bottom:12px;z-index:2;}
.iconbtn{border:none;background:#fff;border-radius:20px;width:60px;height:60px;font-size:28px;cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;
  transition:transform .1s,box-shadow .1s;flex:0 0 auto;}
.iconbtn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.1);}
.barlabel{font-family:'Baloo 2';font-weight:800;font-size:clamp(22px,6vw,30px);color:var(--ink);}
.spacer{flex:1;}
.scorepill{background:#fff;border-radius:20px;padding:10px 18px;font-family:'Baloo 2';font-weight:800;
  font-size:clamp(20px,5vw,26px);box-shadow:0 5px 0 rgba(0,0,0,.1);display:flex;align-items:center;gap:8px;}
.win{position:fixed;inset:0;background:rgba(40,30,60,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.win.show{display:flex;animation:pop .3s;}
.win-card{background:#fff;border-radius:32px;padding:34px 30px;text-align:center;width:min(360px,86vw);
  box-shadow:0 20px 50px rgba(0,0,0,.3);}
.win-card .big{font-size:72px;}
.win-card h2{font-family:'Baloo 2';font-weight:800;font-size:34px;margin:6px 0 18px;color:var(--pop);}
.win-card button{border:none;background:linear-gradient(135deg,#4dd4c8,#2bb3a8);color:#fff;
  font-family:'Baloo 2';font-weight:800;font-size:24px;padding:14px 30px;border-radius:22px;
  cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.15);}
.win-card button:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.15);}