/* style.css — Star Drift */
:root{
  --bg:#0a0612;
  --panel:rgba(20,14,38,0.92);
  --panel-line:rgba(127,208,255,0.22);
  --text:#e9e4ff;
  --muted:#9aa0c0;
  --accent:#7fd0ff;
  --accent2:#ffd166;
  --danger:#ff5d7a;
  --radius:18px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1f8;
    --panel:rgba(255,255,255,0.94);
    --panel-line:rgba(40,70,140,0.18);
    --text:#1a2240;
    --muted:#5b6486;
    --accent:#2b6cf0;
    --accent2:#e08a00;
    --danger:#e0395b;
    color-scheme: light;
  }
}
html[data-theme="dark"]{
  --bg:#0a0612; --panel:rgba(20,14,38,0.92); --panel-line:rgba(127,208,255,0.22);
  --text:#e9e4ff; --muted:#9aa0c0; --accent:#7fd0ff; --accent2:#ffd166; --danger:#ff5d7a;
  color-scheme: dark;
}
html[data-theme="light"]{
  --bg:#eef1f8; --panel:rgba(255,255,255,0.94); --panel-line:rgba(40,70,140,0.18);
  --text:#1a2240; --muted:#5b6486; --accent:#2b6cf0; --accent2:#e08a00; --danger:#e0395b;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow:hidden;
  touch-action: manipulation;
  -webkit-user-select:none; user-select:none;
}
#root{
  position:fixed; inset:0;
  display:flex;
}
#game{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  touch-action:none;
  background:#07040f;
}

/* HUD */
#hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:14px 16px;
  pointer-events:none;
  z-index:5;
}
.hud-left, .hud-right{ display:flex; flex-direction:column; gap:6px; }
.hud-right{ align-items:flex-end; }
.stat{
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:12px;
  padding:6px 12px;
  min-width:84px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat.right{ align-items:flex-end; }
.stat .label{
  font-size:10px; letter-spacing:1.5px;
  color:var(--muted); font-weight:700;
}
.stat .value{
  font-size:20px; font-weight:800; line-height:1.1;
  color:var(--text); font-variant-numeric: tabular-nums;
}
.lives{ display:flex; gap:5px; margin-top:4px; }
.lives .life{
  width:26px; height:auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Mute button */
.mute{
  position:absolute; bottom:14px; right:14px; z-index:6;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--panel-line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .15s, background .2s;
}
.mute:hover{ transform: scale(1.08); }
.mute:active{ transform: scale(0.94); }
.mute::before{ content:"🔊"; }
.mute.off::before{ content:"🔇"; }

/* Screens */
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, rgba(10,6,18,0.78), rgba(6,4,14,0.92));
  z-index:10;
  padding:20px;
  animation: fadeIn .35s ease;
}
html[data-theme="light"] .screen{
  background:radial-gradient(120% 120% at 50% 30%, rgba(238,241,248,0.85), rgba(220,225,240,0.94));
}
.screen.hidden{ display:none; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.panel{
  width:min(440px, 92vw);
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:24px;
  padding:30px 28px 26px;
  text-align:center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.emblem{
  width:74px; height:74px; margin:0 auto 14px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.emblem .ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--accent);
  box-shadow: 0 0 24px rgba(127,208,255,0.55), inset 0 0 18px rgba(127,208,255,0.25);
  animation: pulse 2.4s ease-in-out infinite;
}
.emblem::after{
  content:"🚀";
  font-size:34px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.08); opacity:0.75; }
}
h1{
  font-size:38px; letter-spacing:6px;
  margin:0 0 6px;
  font-weight:900;
  background: linear-gradient(90deg, var(--accent), #c79bff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
h1.dead{
  background: linear-gradient(90deg, var(--danger), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color: transparent;
}
.tag{
  color:var(--muted);
  font-size:14px; line-height:1.5;
  margin:0 0 18px;
}
.how{
  list-style:none; padding:0; margin:0 0 22px;
  text-align:left;
  display:flex; flex-direction:column; gap:8px;
}
.how li{
  font-size:13px; color:var(--text);
  padding:9px 12px;
  background:rgba(127,208,255,0.06);
  border:1px solid var(--panel-line);
  border-radius:10px;
}
.how b{ color:var(--accent); }

.primary{
  display:inline-block;
  appearance:none; border:none; cursor:pointer;
  font-size:16px; font-weight:800; letter-spacing:2px;
  color:#06122a;
  background: linear-gradient(180deg, var(--accent), #4aa8e0);
  padding:14px 34px;
  border-radius:14px;
  box-shadow: 0 8px 24px rgba(127,208,255,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
.primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(127,208,255,0.5); }
.primary:active{ transform: translateY(0); filter:brightness(0.96); }

.bestrow{
  margin-top:14px;
  font-size:12px; color:var(--muted); letter-spacing:1px;
}
.bestrow span{ color:var(--accent2); font-weight:800; }

.stats{
  display:flex; justify-content:space-around; gap:10px;
  margin:18px 0 10px;
}
.stats > div{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 8px;
  background:rgba(127,208,255,0.06);
  border:1px solid var(--panel-line);
  border-radius:12px;
  min-width:96px;
}
.stats .label{ font-size:10px; letter-spacing:1.5px; color:var(--muted); font-weight:700; }
.stats .value{ font-size:22px; font-weight:800; color:var(--text); }
.newbest{
  color:var(--accent2); font-weight:800; letter-spacing:2px;
  font-size:13px; margin:6px 0 14px;
  animation: blink 1s ease-in-out infinite;
}
.newbest.hidden{ display:none; }
@keyframes blink{ 50%{ opacity:0.4; } }

@media (max-width: 380px){
  h1{ font-size:30px; letter-spacing:4px; }
  .panel{ padding:24px 20px 22px; }
  .stats > div{ min-width:84px; }
  .stat{ min-width:72px; padding:5px 10px; }
  .stat .value{ font-size:17px; }
}