*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b0418;color:#f4eaff;font-family:system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}
#app{height:100%;background:radial-gradient(ellipse at 50% 120%,#5b1a8a 0%,#1a0833 45%,#0b0418 80%)}
.scr{display:none;height:100%;overflow:auto;padding:20px;max-width:900px;margin:auto}.scr.on{display:block}
#scr-play{max-width:none;padding:0;overflow:hidden;position:relative}
.logo{font-size:clamp(42px,9vw,86px);text-align:center;margin:30px 0 0;letter-spacing:4px;color:#ff2bd6;text-shadow:0 0 18px #ff2bd6,0 0 40px #a020f0;font-style:italic}
.logo span{color:#21e6ff;text-shadow:0 0 18px #21e6ff}.tag{text-align:center;opacity:.8}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-top:30px}
.card{background:linear-gradient(160deg,#2a0f4d,#140726);border:2px solid #a45cff;border-radius:16px;padding:24px 16px;color:#fff;cursor:pointer;text-align:left;transition:.15s}
.card:hover,.card:focus{border-color:#21e6ff;box-shadow:0 0 22px #21e6ff66;transform:translateY(-3px)}.card b{display:block;font-size:22px;margin-bottom:6px}.card small{opacity:.75}
.card.locked{opacity:.4;cursor:not-allowed}
.hint{text-align:center;opacity:.6;margin-top:24px}
header{display:flex;align-items:center;gap:12px}header h2{margin:0;color:#21e6ff}
.back{background:none;border:2px solid #ff2bd6;color:#ff2bd6;border-radius:50%;width:40px;height:40px;font-size:24px;cursor:pointer}
.songs{display:grid;gap:10px;margin-top:14px}
.song{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:12px;background:#1d0b38;border-left:6px solid var(--c,#ff2bd6);cursor:pointer;color:#fff;border-top:0;border-right:0;border-bottom:0;width:100%;text-align:left;font-size:16px}
.song:hover{background:#2b1150}.song small{opacity:.7}
.diffs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.btn{background:#ff2bd6;border:0;color:#fff;padding:10px 18px;border-radius:10px;font-weight:700;cursor:pointer;margin:4px}.btn.ghost{background:transparent;border:2px solid #a45cff}.btn.small{padding:4px 10px}.btn.sel{background:#21e6ff;color:#120526}
.set label{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #ffffff18;gap:10px}
.keys{padding:12px 0}.small{font-size:13px;opacity:.7}.hidden{display:none!important}
.venue{margin:18px 0;padding:14px;border-radius:14px;background:#160830;border:1px solid #a45cff55}.venue h3{margin:0 0 8px;color:#ff5e9c}
canvas{display:block;width:100%;height:100%;touch-action:none}
.overlay{position:absolute;inset:0;background:#0b0418dd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px}
.overlay h2{font-size:40px;color:#ff2bd6;margin:0}
#pauseBtn{position:absolute;top:10px;right:10px;background:#0008;color:#fff;border:1px solid #fff4;border-radius:8px;padding:8px 12px}
#metro{width:40px;height:40px;border-radius:50%;background:#333;margin:10px auto}#metro.on{background:#21e6ff}
table{width:100%;border-collapse:collapse}td,th{padding:6px;border-bottom:1px solid #ffffff15;text-align:left;font-size:14px}