:root { --bg:#07060f; --cyan:#00ffff; --pink:#ff007f; --muted:#8a90b0; --text:#eef1ff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { min-height:100vh; background:radial-gradient(ellipse at 20% 0%, #1a0a2a, var(--bg)); color:var(--text); font-family:Inter,system-ui,sans-serif; display:flex; flex-direction:column; align-items:center; padding:1rem 1rem 3rem; }
.hidden { display:none !important; }
.back { color:var(--muted); font-size:.85rem; align-self:flex-start; text-decoration:none; margin-bottom:.5rem; }
.screen { width:100%; max-width:440px; display:flex; flex-direction:column; gap:1rem; align-items:center; text-align:center; }
.icon { font-size:4rem; }
h1 { font-size:2rem; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--pink)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tag,.how { color:var(--muted); font-size:.95rem; line-height:1.4; }
.how { text-align:left; padding-left:1.2rem; }
.input,select { width:100%; padding:.75rem 1rem; border-radius:.6rem; background:#ffffff0d; border:1px solid #ffffff22; color:var(--text); font-size:1rem; }
.rounds { width:100%; color:var(--muted); text-align:left; display:flex; gap:.75rem; align-items:center; }
.btn { width:100%; padding:.9rem; border:0; border-radius:.75rem; cursor:pointer; font-weight:800; font-size:1.05rem; color:#fff; background:linear-gradient(135deg,#bf00ff,var(--pink)); }
.hud { width:100%; display:flex; justify-content:space-between; font-weight:800; }
.clue { width:100%; border-radius:1rem; padding:1.25rem; border:2px solid var(--cyan); background:#00000066; }
.year { font-size:.8rem; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.artist { font-size:1.4rem; font-weight:900; margin:.35rem 0; }
.lyrics { font-style:italic; color:var(--cyan); font-size:1.1rem; }
.timer { margin-top:.75rem; font-size:1.6rem; font-weight:900; color:var(--cyan); }
.options { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.opt { min-height:56px; padding:.7rem; border-radius:.7rem; cursor:pointer; background:#ffffff0d; border:2px solid transparent; color:var(--text); font-weight:700; }
.opt.correct { border-color:#32ff00; color:#32ff00; }
.opt.wrong { border-color:#ff2d55; color:#ff2d55; }
.lockout { width:100%; padding:.7rem; border-radius:.7rem; background:#ff2d5522; color:#ff2d55; font-weight:700; }
.pts { color:#32ff00; font-weight:800; font-size:1.2rem; }
.score { font-size:3.2rem; font-weight:900; color:var(--cyan); }