:root{
  --pink:#ff66aa;
  --bg:#0a070a;
  --dim:0.6;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; overflow:hidden; background:var(--bg); font-family:"Bricolage Grotesque",sans-serif; color:#fff; }
#game{ position:fixed; inset:0; }
#canvas{ position:absolute; inset:0; cursor:none; touch-action:none; }

.hidden{ display:none !important; }

/* ---- Screens ---- */
.screen{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px; text-align:center;
  background:radial-gradient(circle at 50% 35%, rgba(40,20,35,0.85), rgba(6,4,7,0.96));
  backdrop-filter:blur(2px);
}

/* ---- Logo ---- */
.logo{ position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.logo-ring{
  position:absolute; width:150px; height:150px; border-radius:50%;
  border:6px solid var(--pink);
  box-shadow:0 0 40px var(--pink), inset 0 0 30px rgba(255,102,170,0.4);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(0.9); opacity:0.7; } 50%{ transform:scale(1.05); opacity:1; } }
.logo h1{
  font-size:clamp(38px,9vw,72px); font-weight:800; letter-spacing:-2px; z-index:1;
  text-shadow:0 0 30px rgba(255,102,170,0.6);
}
.logo h1 span{ color:var(--pink); }
.tag{ font-family:"JetBrains Mono",monospace; font-size:13px; color:#c99; opacity:0.85; margin-bottom:8px; }

/* ---- Buttons ---- */
.btn{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:18px;
  padding:14px 34px; border:none; border-radius:40px; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease;
}
.btn.primary{ background:var(--pink); color:#1a0812; box-shadow:0 6px 24px rgba(255,102,170,0.5); }
.btn.primary:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 10px 34px rgba(255,102,170,0.7); }
.btn.ghost{ background:transparent; color:#fff; border:2px solid rgba(255,102,170,0.5); }
.btn.ghost:hover{ background:rgba(255,102,170,0.12); }

/* ---- Dropzone ---- */
.dropzone{
  width:min(420px,90vw); padding:24px; border:2px dashed rgba(255,102,170,0.5);
  border-radius:16px; cursor:pointer; display:flex; flex-direction:column; gap:4px;
  transition:all .18s ease; background:rgba(255,102,170,0.04);
}
.dropzone:hover,.dropzone.drag{ border-color:var(--pink); background:rgba(255,102,170,0.12); }
.dropzone b{ color:var(--pink); }
.dropzone .or{ font-size:12px; opacity:0.6; font-family:"JetBrains Mono",monospace; }

.parse-msg{ font-family:"JetBrains Mono",monospace; font-size:13px; min-height:18px; }
.parse-msg.ok{ color:#77dd55; }
.parse-msg.err{ color:#ff4466; }

/* ---- Map list ---- */
.map-list{ display:flex; flex-direction:column; gap:8px; width:min(420px,90vw); max-height:34vh; overflow-y:auto; }
.map-card{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,102,170,0.25);
  border-radius:12px; padding:12px 16px; cursor:pointer; text-align:left; transition:all .15s ease;
}
.map-card:hover{ background:rgba(255,102,170,0.15); transform:translateX(4px); border-color:var(--pink); }
.mc-title{ font-weight:700; font-size:15px; }
.mc-diff{ color:var(--pink); font-size:13px; font-weight:700; }
.mc-meta{ font-family:"JetBrains Mono",monospace; font-size:11px; opacity:0.7; margin-top:2px; }

/* ---- Settings rows ---- */
.screen h2{ font-size:32px; font-weight:800; margin-bottom:8px; }
.row{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(340px,86vw);
  background:rgba(255,255,255,0.05); padding:12px 18px; border-radius:12px; font-size:16px; }
.row input[type=range]{ accent-color:var(--pink); }
.row input[type=checkbox]{ width:20px; height:20px; accent-color:var(--pink); }

/* ---- HUD ---- */
#hud{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.hp-bar{ position:absolute; top:0; left:0; right:0; height:6px; background:rgba(255,255,255,0.08); }
.hp-fill{ height:100%; width:100%; background:linear-gradient(90deg,#ff4466,var(--pink),#66ccff);
  transition:width .15s ease; }
.hud-top{ position:absolute; top:14px; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; padding:0 20px; }
.hud-left #songTitle{ font-weight:700; font-size:15px; }
.hud-left #songDiff{ color:var(--pink); font-size:12px; }
.hud-center{ font-family:"JetBrains Mono",monospace; font-size:20px; font-weight:700; }
.hud-right{ font-family:"JetBrains Mono",monospace; font-size:30px; font-weight:700; letter-spacing:1px;
  text-shadow:0 0 14px rgba(255,102,170,0.5); }
.hud-combo{ position:absolute; bottom:24px; left:24px; font-size:44px; font-weight:800;
  text-shadow:0 0 20px rgba(255,102,170,0.6); }

/* ---- Countdown ---- */
.countdown{
  position:absolute; inset:0; z-index:12; display:flex; align-items:center; justify-content:center;
  font-size:120px; font-weight:800; color:var(--pink); pointer-events:none;
  text-shadow:0 0 40px var(--pink); animation:cd .7s ease;
}
@keyframes cd{ 0%{ transform:scale(2.2); opacity:0; } 40%{ opacity:1; } 100%{ transform:scale(0.8); opacity:0.4; } }

/* ---- Results ---- */
.grade{ font-size:clamp(90px,22vw,160px); font-weight:800; line-height:1;
  text-shadow:0 0 50px currentColor; }
.g-SS,.g-S{ color:#ffd24a; }
.g-A{ color:#77dd55; }
.g-B{ color:#66ccff; }
.g-C{ color:#cc88ff; }
.g-D{ color:#ff9944; }
.g-F{ color:#ff4466; }
.res-score{ font-family:"JetBrains Mono",monospace; font-size:40px; font-weight:700; }
.res-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 26px; margin:8px 0; }
.rs{ display:flex; flex-direction:column; align-items:center; }
.rs b{ font-family:"JetBrains Mono",monospace; font-size:22px; }
.rs span{ font-size:11px; opacity:0.6; text-transform:uppercase; letter-spacing:1px; }
.res-best{ font-family:"JetBrains Mono",monospace; font-size:14px; opacity:0.85; min-height:20px; }
.new-best{ color:var(--pink); font-weight:800; animation:pulse 0.8s ease-in-out infinite; }
.res-btns{ display:flex; gap:12px; margin-top:8px; }

/* ---- Footer ---- */
#footer{ position:absolute; bottom:6px; width:100%; text-align:center; z-index:20;
  font-family:"JetBrains Mono",monospace; font-size:11px; opacity:0.5; pointer-events:none; }
#footer a{ color:var(--pink); pointer-events:auto; text-decoration:none; }
#footer a:hover{ text-decoration:underline; }

@media (max-width:600px){
  .hud-right{ font-size:24px; }
  .hud-combo{ font-size:34px; }
  .countdown{ font-size:80px; }
}