:root{
  --bg1:#6ee7ff;
  --bg2:#a7f3d0;
  --ink:#0f172a;
  --panel: rgba(255,255,255,.85);
  --shadow: rgba(2, 8, 23, .18);
  --good:#22c55e;
  --bad:#ef4444;
  --btn:#ffffff;
  --btnInk:#0b1226;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --radius: 18px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 900px at 20% 20%, var(--bg1), transparent 60%),
              radial-gradient(1200px 900px at 80% 40%, var(--bg2), transparent 60%),
              linear-gradient(180deg, #fff7ed, #eff6ff);
  color: var(--ink);
  overflow:hidden;
  touch-action: none;
  user-select:none;
}

#app{
  position:fixed;
  inset:0;
  padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
  display:flex;
  flex-direction:column;
  gap:10px;
}

#topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 56px;
}

.stat{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing:.2px;
  white-space:nowrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(2,8,23,.12);
  border: 1px solid rgba(2,8,23,.08);
  min-height: 44px;
}
.icon{
  width: 22px;
  height: 22px;
  display:inline-block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(15,23,42,.14), rgba(15,23,42,.06));
  position:relative;
}
.icon::before{
  content:"";
  position:absolute;
  inset: 5px;
  border-radius: 6px;
  background: rgba(15,23,42,.18);
}
.scoreNum, .timeNum{ font-variant-numeric: tabular-nums; }

.btnRow{
  display:flex;
  align-items:center;
  gap:10px;
}

button{
  appearance:none;
  border: 1px solid rgba(2,8,23,.16);
  background: var(--btn);
  color: var(--btnInk);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 44px;
  min-width: 44px;
  font-weight: 800;
  letter-spacing: .2px;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(2,8,23,.12);
  transition: transform .08s ease, box-shadow .08s ease, background .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  outline:none;
}
button:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,8,23,.14); }
button:active{ transform: translateY(0px) scale(0.98); box-shadow: 0 6px 16px rgba(2,8,23,.10); background: #f8fafc; }
button:focus-visible{
  box-shadow: 0 0 0 4px rgba(17,24,39,.22), 0 10px 22px rgba(2,8,23,.14);
  border-color: rgba(17,24,39,.35);
}

.btnDanger{
  background: linear-gradient(180deg, #fff, #fff5f5);
  border-color: rgba(239,68,68,.28);
}
.btnMute[data-muted="true"]{
  background: linear-gradient(180deg, #fff, #fff7ed);
  border-color: rgba(245,158,11,.35);
}
.btnInstall{
  background: linear-gradient(180deg, #fff, #f0f9ff);
  border-color: rgba(59,130,246,.28);
}
.btnInstall[hidden]{ display:none !important; }

#stageWrap{
  position:relative;
  flex:1;
  border-radius: calc(var(--radius) + 4px);
  overflow:hidden;
  background: radial-gradient(1000px 700px at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,.20) 60%),
              radial-gradient(900px 700px at 70% 60%, rgba(255,255,255,.55), rgba(255,255,255,.12) 62%),
              linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
  box-shadow: 0 18px 50px rgba(2,8,23,.18);
  border: 1px solid rgba(2,8,23,.10);
}
canvas{ display:block; width:100%; height:100%; }

.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 18px; pointer-events:none;
}
.card{
  pointer-events:auto;
  width:min(520px, 96%);
  background: rgba(255,255,255,.88);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(2,8,23,.22);
  border: 1px solid rgba(2,8,23,.10);
  padding: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card h1{
  margin: 4px 0 10px;
  font-size: clamp(26px, 3.8vw, 34px);
  line-height: 1.1;
  letter-spacing: .3px;
}
.sub{
  margin: 0 0 14px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  opacity:.9;
}
.bigBtn{
  width:100%;
  justify-content:center;
  min-height: 56px;
  border-radius: 18px;
  font-size: 18px;
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.hintRow{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin: 10px 0 0;
}
.hintChip{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,8,23,.10);
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(2,8,23,.10);
}
.dot{
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
}
.kbd{
  font-weight: 900;
  border-radius: 10px;
  padding: 6px 10px;
  border: 1px solid rgba(2,8,23,.14);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(2,8,23,.10);
  font-variant-numeric: tabular-nums;
}

#stickerBar{
  position:absolute; left: 12px; right: 12px; bottom: 12px;
  display:flex; gap:10px; align-items:center; justify-content:center;
  pointer-events:none;
}
.sticker{
  width: 42px; height: 42px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(2,8,23,.10);
  box-shadow: 0 10px 22px rgba(2,8,23,.14);
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000; font-size: 22px;
  transform: translateY(10px) scale(.92);
  opacity:0;
}

@media (prefers-reduced-motion: reduce){
  button{ transition:none; }
  button:hover{ transform:none; }
  button:active{ transform:none; }
}
@media (max-width: 420px){
  #topbar{ padding: 8px; gap:8px; }
  .pill{ padding: 7px 10px; }
  .btnRow{ gap:8px; }
  button{ padding: 10px 12px; border-radius: 12px; }
}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip: rect(0,0,0,0); white-space:nowrap; border:0;
}