/* ============================================================
   SURGE — styles
   Palette is defined once in :root and referenced everywhere.
   ============================================================ */
:root{
  --ink:#0c0d1a;        /* arena base */
  --ink2:#13152a;       /* panels */
  --cream:#f3ead7;      /* player / primary text */
  --coral:#ff5d52;      /* danger */
  --ember:#ff9d3d;      /* projectiles / fast */
  --mint:#5fe6c4;       /* xp / positive */
  --gold:#ffce4f;       /* levelup */
  --violet:#9a7bff;     /* special */
  --pink:#ff7ad0;       /* elite */
  --muted:#8a8aa8;
  --grid:rgba(154,123,255,0.06);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;background:var(--ink);}
body{
  font-family:'Chakra Petch',system-ui,sans-serif;
  color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  user-select:none;
}
#wrap{
  position:relative;
  width:100vw;height:100vh;
  overflow:hidden;
  background:radial-gradient(120% 120% at 50% 30%, #15172e 0%, #0c0d1a 60%, #07070f 100%);
  box-shadow:0 0 0 1px rgba(154,123,255,0.12);
}
#game{display:block;width:100%;height:100%;}

/* ---------- HUD ---------- */
#hud{
  position:absolute;inset:0;pointer-events:none;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
  opacity:0;transition:opacity .3s;
}
#hud.on{opacity:1;}
.topbar{display:flex;align-items:flex-start;gap:14px;}
.bars{flex:1;display:flex;flex-direction:column;gap:7px;max-width:340px;}
.bar{
  height:13px;border-radius:7px;overflow:hidden;position:relative;
  background:rgba(255,255,255,0.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.bar > i{display:block;height:100%;width:0%;border-radius:7px;transition:width .12s linear;}
#hpFill{background:linear-gradient(90deg,#ff7a5c,#ff5d52);}
#xpFill{background:linear-gradient(90deg,#5fe6c4,#7bd0ff);}
#surgeFill{background:linear-gradient(90deg,#7b5fff,#c77bff);}
.barLabel{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.08em;
  text-shadow:0 1px 2px rgba(0,0,0,.6);color:#0c0d1a;
}
.stats{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-weight:600;line-height:1;
}
#timer{font-size:30px;letter-spacing:.04em;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.substat{font-size:12px;color:var(--muted);letter-spacing:.06em;}
.substat b{color:var(--cream);font-weight:700;}
#comboLine{
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--gold);
  opacity:0;transition:opacity .15s;text-shadow:0 1px 6px rgba(0,0,0,.5);
}
#muteBtn{
  pointer-events:auto;cursor:pointer;
  margin-left:auto;align-self:flex-start;
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
  color:var(--muted);font-size:15px;
}
#muteBtn:hover{color:var(--cream);}
#minimap{
  position:absolute;bottom:14px;left:14px;
  width:140px;height:105px;
  pointer-events:none;opacity:0.6;z-index:4;
  border:1px solid rgba(154,123,255,0.25);border-radius:6px;
  background:rgba(12,13,26,0.5);
}
#dashBtn{
  display:none;pointer-events:auto;cursor:pointer;
  position:absolute;right:16px;bottom:16px;
  width:64px;height:64px;border-radius:50%;
  background:rgba(154,123,255,0.15);border:2px solid rgba(154,123,255,0.4);
  color:var(--violet);font-size:11px;font-weight:700;letter-spacing:.1em;
  font-family:inherit;
  justify-content:center;align-items:center;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s;
}
#dashBtn.cd{opacity:0.3;border-color:rgba(154,123,255,0.15);}
@media (hover:none) and (pointer:coarse){
  #dashBtn{display:flex;}
}

/* ---------- Overlays ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(80% 80% at 50% 45%, rgba(12,13,26,.55), rgba(7,7,15,.9));
  backdrop-filter:blur(2px);padding:24px;z-index:5;
}
.screen.hide{display:none;}
.title{
  font-size:clamp(64px,15vw,128px);font-weight:700;letter-spacing:.12em;line-height:.9;
  color:var(--cream);
  text-shadow:0 0 30px rgba(154,123,255,.35), 0 0 6px rgba(95,230,196,.4);
  position:relative;
}
.title::after{
  content:'SURGE';position:absolute;left:0;top:0;width:100%;
  color:transparent;-webkit-text-stroke:1px var(--coral);
  transform:translate(3px,3px);opacity:.55;z-index:-1;letter-spacing:.12em;
}
.tagline{margin-top:14px;color:var(--mint);letter-spacing:.32em;font-size:13px;font-weight:600;text-transform:uppercase;}
.bestline{margin-top:10px;color:var(--gold);letter-spacing:.14em;font-size:13px;font-weight:600;min-height:16px;}
.howto{
  margin-top:26px;max-width:440px;color:var(--muted);font-size:14px;line-height:1.7;
}
.howto b{color:var(--cream);font-weight:600;}
.key{
  display:inline-block;min-width:22px;padding:2px 7px;margin:0 1px;
  background:var(--ink2);border:1px solid rgba(255,255,255,.14);border-bottom-width:2px;
  border-radius:6px;font-size:12px;font-weight:700;color:var(--cream);
}
.btn{
  pointer-events:auto;cursor:pointer;margin-top:30px;
  font-family:inherit;font-weight:700;letter-spacing:.18em;font-size:18px;
  color:var(--ink);background:var(--cream);
  padding:16px 44px;border:none;border-radius:12px;
  box-shadow:0 8px 0 #b9af97, 0 14px 30px rgba(0,0,0,.4);
  transition:transform .06s, box-shadow .06s;text-transform:uppercase;
}
.btn:hover{background:#fff;}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #b9af97, 0 6px 16px rgba(0,0,0,.4);}
.btn.ghost{
  background:transparent;color:var(--cream);
  box-shadow:0 0 0 1px rgba(255,255,255,.2);
  padding:13px 30px;font-size:14px;margin-top:14px;
}
.btn.ghost:hover{background:rgba(255,255,255,.07);}
.btn.ghost:active{transform:translateY(2px);box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.overbtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;}

/* game over */
#over .ohead{font-size:clamp(40px,9vw,72px);font-weight:700;letter-spacing:.06em;color:var(--coral);
  text-shadow:0 0 24px rgba(255,93,82,.4);}
.ostats{
  margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(80px,1fr));gap:14px 32px;
}
.ostat{display:flex;flex-direction:column;gap:4px;}
.ostat .v{font-size:34px;font-weight:700;line-height:1;}
.ostat .l{font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;}
.orank{
  font-size:clamp(48px,12vw,80px);font-weight:700;line-height:1;margin-top:8px;
  letter-spacing:.04em;
  text-shadow:0 0 30px rgba(154,123,255,.4);
}
.orank[data-rank="S"]{color:#ffce4f;text-shadow:0 0 30px rgba(255,206,79,.5);}
.orank[data-rank="A"]{color:#5fe6c4;}
.orank[data-rank="B"]{color:#7bd0ff;}
.orank[data-rank="C"]{color:var(--muted);}
.orank[data-rank="D"]{color:#8a8aa8;}
#bestTag{margin-top:18px;color:var(--gold);font-weight:600;letter-spacing:.1em;font-size:14px;min-height:18px;}
.nearmiss{
  margin-top:8px;color:var(--coral);font-weight:600;letter-spacing:.08em;font-size:13px;
  min-height:16px;animation:pulse 0.8s ease-in-out infinite alternate;
}
@keyframes pulse{from{opacity:.7;}to{opacity:1;}}

/* tutorial hints */
.tut-hint{
  position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  background:rgba(12,13,26,0.85);border:1px solid rgba(154,123,255,0.3);
  border-radius:10px;padding:10px 22px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--cream);
  white-space:nowrap;pointer-events:none;
  animation:hintIn .3s ease-out;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.tut-hint.hide{display:none;}
@keyframes hintIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}

/* level up */
#levelup{z-index:6;background:radial-gradient(70% 70% at 50% 50%, rgba(20,18,40,.7), rgba(7,7,15,.94));}
#levelup .lhead{font-size:14px;letter-spacing:.34em;color:var(--gold);font-weight:700;text-transform:uppercase;}
#levelup .lsub{margin-top:6px;color:var(--muted);font-size:13px;letter-spacing:.1em;}
.cards{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:680px;}
.card{
  pointer-events:auto;cursor:pointer;width:188px;min-height:200px;
  background:linear-gradient(180deg,var(--ink2),#0e0f1f);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;
  padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  transition:transform .12s, border-color .12s, box-shadow .12s;position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-6px);border-color:var(--accent,var(--mint));
  box-shadow:0 14px 36px rgba(0,0,0,.5), 0 0 0 1px var(--accent,var(--mint));}
.card .ic{font-size:40px;line-height:1;filter:drop-shadow(0 0 10px var(--accent,var(--mint)));}
.card .nm{font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--cream);}
.card .ds{font-size:12.5px;color:var(--muted);line-height:1.5;}
.card .tier{position:absolute;top:10px;right:12px;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--accent,var(--mint));opacity:.8;}
.card .tier[data-tier="legendary"]{color:var(--gold);}
.card.legendary{border-color:rgba(255,206,79,0.3);background:linear-gradient(180deg,#1a1728,#12101e);}

@media (max-width:560px){
  #timer{font-size:24px;}
  #comboLine{font-size:13px;}
  .card{width:46%;min-width:140px;min-height:170px;padding:16px 12px;}
  .card .ic{font-size:32px;}
  .howto{font-size:13px;}
}