:root{
  --bg:#0b1016; --ink:#e9f1ff; --muted:#b8d4ffcc; --glass:#0e1726cc; --accent:#4da3ff; --accent2:#7cf5ff; --danger:#ff6b6b;
  --laneW: 92px; --laneGap: 12px; --stageH: 560px; --hitlineY: 460px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(1200px 800px at 30% -10%, #1f547a 0%, #0b1016 60%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
.app{min-height:100%;display:flex;flex-direction:column}
.top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:rgba(13,20,30,0.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #ffffff1a}
.brand{color:#9bd0ff;text-decoration:none;font-weight:800}
.title{font-weight:900;letter-spacing:.5px}
.btn{appearance:none;border:1px solid #ffffff22;background:#132033;color:var(--ink);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}
.btn:hover{border-color:#ffffff44}
.btn.primary{background:linear-gradient(180deg,#3396ff,#1974d5);border-color:#4da3ff;color:white;box-shadow:0 6px 18px #3396ff38}
.btn.ghost{background:#0f1a2ab3}

.main{padding:16px;display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;justify-content:center}
.controls{min-width:280px;max-width:340px;flex:0 0 auto;background:linear-gradient(135deg,#0f1a2acc,#0b1016b3);border:1px solid #ffffff1a;border-radius:14px;padding:12px;box-shadow:0 12px 28px #0008}
.controls .row{display:flex;align-items:center;gap:8px;margin:8px 0}
.controls .row label{opacity:.8;width:86px}
.controls .row .kbd{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:#0f1a2a;border:1px solid #ffffff1a}
.controls .row .hint{opacity:.7;font-size:12px}
.controls .row.gap{gap:10px}

.hud{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#0f1a2acc;border:1px solid #ffffff1a;border-radius:14px}
.hud .combo{font-size:24px;font-weight:900;color:#aaf}
.hud .judgment{min-width:94px;text-align:center;font-weight:900;letter-spacing:.5px}
.hud .hearts{display:flex;gap:6px}
.heart{width:18px;height:18px;filter:drop-shadow(0 4px 10px #f66a);}
.heart::before{content:"";display:block;width:100%;height:100%;background:radial-gradient(circle at 30% 35%,#fff,#fdd 20%,#f66 60%,#b00 100%);clip-path:path("M9 16C8 15 2 11 2 7a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4-6 8-7 9Z");}

.stageWrap{flex:1 1 420px;display:flex;justify-content:center}
.stage{position:relative;width:calc(var(--laneW)*4 + var(--laneGap)*3);height:var(--stageH);background:linear-gradient(180deg,#0d1624,#0a111a);border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px #0009,inset 0 40px 120px #1f507010}
.bg-grad{position:absolute;inset:0;background:radial-gradient(600px 200px at 50% -20%, #1f547a88, transparent 70%)}
.scanline{position:absolute;left:0;right:0;top:-20%;height:20%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),transparent);filter:blur(2px);animation:scan 4s linear infinite;mix-blend-mode:screen}
@keyframes scan{0%{top:-20%}100%{top:100%}}
.lanes{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:var(--laneGap);bottom:0;padding-bottom:0}
.lane{position:relative;width:var(--laneW);height:var(--stageH);background:linear-gradient(180deg,#0a1422,#0b1016);border:1px solid #ffffff14;border-top:none;border-bottom:none;border-radius:10px;overflow:hidden}
.lane .laneGlow{position:absolute;left:0;right:0;bottom:0;height:0;background:radial-gradient(200px 80px at 50% 100%, #7cf5ff66, transparent 70%);opacity:0;pointer-events:none}
.lane.active .laneGlow{opacity:1;height:50%}
.lane .key{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;padding:6px 10px;border-radius:8px;background:#0f1a2a;border:1px solid #ffffff22;font-weight:800;opacity:.75}

.hitline{position:absolute;left:0;right:0;bottom:calc(var(--stageH) - var(--hitlineY));height:3px;background:linear-gradient(90deg,transparent,#7cf5ff,#4da3ff,#7cf5ff,transparent);filter:drop-shadow(0 0 10px #7cf5ff88)}
.fx{position:absolute;inset:0;pointer-events:none}

.note{position:absolute;width:var(--laneW);height:80px;border-radius:8px;background:linear-gradient(180deg,#7cf5ff,#4da3ff);box-shadow:0 10px 24px #4da3ff44, inset 0 0 22px #fff4;left:0;transform:translateY(-82px);will-change:transform;display:flex;align-items:center;justify-content:center}
.note:after{content:"";width:70%;height:3px;background:#fff8;border-radius:99px;filter:blur(1px)}
.note.shadow{box-shadow:0 30px 60px #4da3ff55, inset 0 0 22px #fff6}
.note.bad{background:linear-gradient(180deg,#ff8a8a,#ff4d4d);box-shadow:0 10px 24px #ff4d4d55}
.note.good{background:linear-gradient(180deg,#9dff8a,#43d96e)}
.note.perfect{background:linear-gradient(180deg,#fff9a1,#ffd24d)}

.splash{position:absolute;width:130px;height:130px;left:0;top:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,#7cf5ff,#4da3ff 60%,transparent 61%);opacity:.9;transform:translate(-50%,-50%) scale(.2);animation:splash .5s ease forwards}
@keyframes splash{to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}

.pop{position:absolute;left:50%;top:calc(var(--hitlineY) - 22px);transform:translateX(-50%) translateY(0);color:#fff;font-weight:900;letter-spacing:.5px;text-shadow:0 6px 16px #0009;animation:pop .65s ease forwards;pointer-events:none}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.92)}20%{opacity:1}to{opacity:0;transform:translateX(-50%) translateY(-24px) scale(1.08)}}

.bottom{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid #ffffff1a;background:#0f1a2acc}
.best{opacity:.9}
.tips{opacity:.7}
.audioHint{opacity:.7}

@media (max-width: 520px){
  :root{ --laneW: 72px; --laneGap: 8px; --stageH: 520px; --hitlineY: 420px; }
  .controls{width:100%;order:2}
  .stageWrap{order:1}
}