:root{
  --bg0:#0b0a1f;
  --bg1:#151235;
  --ink:#ffffff;
  --muted:#a9a7d4;
  --card:rgba(23, 20, 54, 0.55);
  --card-brd:rgba(150, 140, 255, 0.22);
  --accent:#7c5cff;
  --accent2:#2de2e6;
  --radius:16px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:"Nunito", system-ui, sans-serif;
  color:var(--ink);
  background:var(--bg0);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

/* Ambient background: generated image (set via JS) + gradient fallback */
#bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 90% at 50% -10%, #241a5e 0%, var(--bg1) 45%, var(--bg0) 100%);
  background-size:cover;
  background-position:center;
}
#bg.has-image{ background-blend-mode:normal; }
#bg::after{ /* darken + vignette so gameplay pops */
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 42%, rgba(3,2,14,0.15) 0%, rgba(4,3,18,0.55) 70%, rgba(3,2,12,0.82) 100%);
}

#app{
  position:relative;
  height:100dvh;
  max-width:520px;
  margin:0 auto;
  padding:max(14px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

/* ---- HUD ---- */
.hud{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding-top:6px;
}
.brand{
  margin:0;
  font-family:"Baloo 2", sans-serif;
  font-weight:800;
  font-size:clamp(22px, 6.5vw, 30px);
  letter-spacing:0.5px;
  text-align:center;
  color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,0.25), 0 0 22px rgba(124,92,255,0.55);
  line-height:1;
}
.brand span{ color:var(--accent2); }

.scorecard{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:90px;
  padding:7px 10px;
  background:var(--card);
  border:1px solid var(--card-brd);
  border-radius:var(--radius);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.scorecard.best{ justify-self:end; }
.scorecard:first-child{ justify-self:start; }
.scorecard .label{
  font-size:11px; font-weight:800; letter-spacing:2px;
  color:var(--muted);
}
.scorecard .value{
  font-size:clamp(20px, 6vw, 26px); font-weight:900;
  color:#fff; font-variant-numeric:tabular-nums;
  transition:transform .12s ease;
}
.scorecard .value.bump{ transform:scale(1.28); color:var(--accent2); }

/* ---- Stage / canvas ---- */
#stage{
  position:relative;
  width:100%;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
#game{
  width:100%;
  height:auto;
  touch-action:none;
  display:block;
}

/* ---- Combo banner ---- */
.combo{
  position:absolute;
  top:34%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  font-family:"Baloo 2", sans-serif;
  font-weight:800;
  font-size:clamp(30px, 11vw, 54px);
  color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,0.28), 0 0 26px currentColor;
  pointer-events:none;
  opacity:0;
  z-index:5;
  white-space:nowrap;
}
.combo.show{ animation:comboPop 0.9s cubic-bezier(.2,1.3,.3,1) forwards; }
@keyframes comboPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-6deg); }
  25%{ opacity:1; transform:translate(-50%,-58%) scale(1.15) rotate(2deg); }
  70%{ opacity:1; transform:translate(-50%,-60%) scale(1) rotate(0deg); }
  100%{ opacity:0; transform:translate(-50%,-72%) scale(1) rotate(0deg); }
}

/* ---- Game over overlay ---- */
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,22,0.62);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:10;
  transition:opacity .25s ease;
}
.overlay.hidden, .combo.hidden{ display:none; }
.panel{
  width:min(84%, 340px);
  text-align:center;
  padding:26px 24px 24px;
  background:linear-gradient(180deg, rgba(40,33,92,0.92), rgba(22,18,52,0.92));
  border:1px solid var(--card-brd);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:panelIn .35s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.94);} to{opacity:1; transform:none;} }
.over-kicker{ margin:0 0 6px; font-weight:900; letter-spacing:3px; color:var(--muted); font-size:13px; }
.over-score{ margin:0; font-family:"Baloo 2"; font-weight:800; font-size:64px; line-height:1; color:#fff; text-shadow:0 0 26px rgba(45,226,230,.5); }
.over-best{ margin:8px 0 20px; color:var(--muted); font-weight:800; }
.over-best span{ color:#fff; }
.newbest{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:linear-gradient(90deg,#ffd23d,#ff9a3d); color:#3a2600; font-size:12px; font-weight:900; letter-spacing:1px; }
.newbest.hidden{ display:none; }
.btn{
  font-family:"Baloo 2", sans-serif;
  font-weight:800; font-size:19px;
  color:#fff; cursor:pointer;
  padding:13px 30px;
  border:none; border-radius:999px;
  background:linear-gradient(180deg, #8a6bff, #6a45ff);
  box-shadow:0 8px 0 #4a2ecf, 0 14px 26px rgba(106,69,255,.5);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:active{ transform:translateY(5px); box-shadow:0 3px 0 #4a2ecf, 0 8px 16px rgba(106,69,255,.45); }

/* ---- Mute ---- */
.mute{
  position:absolute;
  right:16px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--card-brd);
  border-radius:12px;
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.mute.off{ color:#5b5880; }