:root{--bg:#050817;--panel:#0b1021;--panel2:#11182d;--text:#f7f8fc;--muted:#aeb7cc;--line:#6c52ff52;--accent:#e500c8;--accent2:#00bfe9;--good:#35e6b5;--bad:#ff5c7b;--shadow:0 20px 70px #0000007a;--radius:20px}*{box-sizing:border-box}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at 15% 12%,#ff00d62e,#0000 24%),radial-gradient(circle at 82% 14%,#00cfff29,#0000 27%),linear-gradient(#080b20,#050817 54%,#030611);margin:0;font-family:Inter,Segoe UI,Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:20;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#050817eb;border-bottom:1px solid #7c4dff38;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:12px 28px;display:grid;position:sticky;top:0}.brand{color:var(--text);text-align:left;background:0 0;border:0;align-items:center;gap:10px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#ef00d8,#7a32ff 48%,#00cfff);border-radius:12px;place-items:center;width:42px;height:42px;font-weight:900;display:grid;box-shadow:0 8px 24px #6f29ff47}.brand strong{letter-spacing:.08em;font-size:.93rem;display:block}.brand small{color:var(--muted);margin-top:2px;display:block}nav{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}nav button{color:#eef1fa;background:0 0;border:1px solid #0000;border-radius:10px;padding:9px 12px}nav button:hover{background:#ffffff0a;border-color:#ffffff1c}.login-solid{color:#fff;background:#00bfe9;border:0;border-radius:13px;padding:10px 18px;font-weight:900;box-shadow:0 8px 24px #00bfe940}main{flex:1;width:min(1180px,100% - 30px);margin:0 auto;padding:18px 0 60px}footer{color:#727a8d;border-top:1px solid #ffffff0f;justify-content:space-between;gap:12px;padding:20px 24px;font-size:.8rem;display:flex}.hero-v5{min-height:590px;box-shadow:var(--shadow);background:radial-gradient(circle at 18% 15%,#ff00c833,#0000 24%),radial-gradient(circle at 80% 16%,#00c3ff2e,#0000 26%),linear-gradient(#0c102aa3,#050817e0);border:1px solid #6948ff33;border-radius:26px;grid-template-columns:1.02fr .98fr;align-items:center;gap:24px;padding:26px 30px 12px;display:grid;position:relative;overflow:hidden}.hero-left,.hero-right{z-index:2;position:relative}.hero-left{justify-content:center;align-items:center;display:flex}.vinyl-wrap{aspect-ratio:1;filter:drop-shadow(0 25px 38px #0000008c);border-radius:50%;width:min(520px,86%)}.vinyl-img{object-fit:contain;border-radius:50%;width:100%;height:100%}.hero-right{text-align:center;padding:22px 10px}.hero-title{line-height:.84;display:grid}.artist-word,.unknown-word{font-family:Impact,Haettenschweiler,Arial Narrow Bold,sans-serif}.artist-word{color:#fff;font-size:clamp(4.6rem,8.5vw,8rem)}.unknown-word{background:linear-gradient(90deg,#ff15d1,#9d2cff 44%,#00cfff);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(4.2rem,7.6vw,7.3rem)}.hero-tagline{letter-spacing:.28em;margin:26px 0 28px;font-size:.95rem;font-weight:800;line-height:1.7}.hero-play{color:#fff;background:linear-gradient(90deg,#ec00d8,#762cff 46%,#00cfff);border:0;border-radius:18px;min-width:min(100%,460px);padding:18px 30px;font-size:1.1rem;font-weight:950;box-shadow:0 14px 36px #512cff52}.hero-play span{margin-right:12px}.how-grid{grid-template-columns:repeat(4,1fr);margin:18px 0 0;padding:24px 6px 18px;display:grid}.how-item{text-align:center;padding:18px 26px;position:relative}.how-item:not(:last-child):after{content:"";background:linear-gradient(#0000,#a828ff,#00cfff,#0000);width:1px;position:absolute;top:18%;bottom:18%;right:0}.how-icon{background:linear-gradient(#ff20df,#8d34ff,#00d2ff);color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:3.2rem;font-weight:900;line-height:1}.how-item h3{margin:0 0 8px;font-size:1.16rem;font-weight:650}.how-item p{color:#c1c8d9;margin:0;line-height:1.5}.home-footer-line{color:#d5d9e4;letter-spacing:.28em;text-align:center;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:8px 0 26px;font-size:.78rem;display:grid}.home-footer-line span{background:linear-gradient(90deg,#0000,#ff00cf,#63f,#00cfff,#0000);height:2px}h1,h2,h3{margin-top:0}.lead{color:#bac2d2;font-size:1.08rem;line-height:1.7}.card{border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#0f152df5,#070b1bf5);border:1px solid #5946b452}.primary,.secondary{border-radius:12px;padding:12px 16px;font-weight:800}.primary{color:#fff;background:linear-gradient(90deg,#ef00d8,#7a32ff 48%,#00cfff);border:0}.secondary{color:var(--text);background:#11182d;border:1px solid #6b54ca57}#checkTitles{background:#e500c8!important}.game-layout{grid-template-columns:1fr 300px;align-items:start;gap:18px;display:grid}.game-card{padding:24px}.game-top{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.kicker{color:#19cfff;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:900}.badge{color:#c9d1df;background:#232a38;border:1px solid #323b50;border-radius:999px;padding:6px 9px;font-size:.76rem;font-weight:800;display:inline-flex}.score-box{text-align:right}.score{color:#e02bff;font-size:3rem;font-weight:900;line-height:.9}.score-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-top:5px;font-size:.74rem}.story{color:#e7e8eb;white-space:pre-line;border:1px solid var(--line);-webkit-user-select:text;user-select:text;background:#0d1017;border-radius:16px;padding:20px;font-family:Georgia,Times New Roman,serif;font-size:1.1rem;line-height:1.86}.side-stack{gap:14px;display:grid}.side-card{padding:18px}.rule-list{color:#c4cad6;margin:0;padding-left:18px}.rule-list li{margin:8px 0}.cta-row{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px;display:flex}.cta-row.left{justify-content:flex-start}.feedback{min-height:24px;margin-top:10px;font-weight:700}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.result{text-align:center;padding:28px}.result-icon{font-size:3rem}.final-score{color:#e02bff;font-size:4rem;font-weight:900}.muted{color:var(--muted)}.songs-label{color:#e02bff;margin-top:18px;font-weight:900}.highlights{flex-wrap:wrap;gap:8px;margin:10px 0;display:flex}.highlights.center{justify-content:center}.chip{color:#dfe6ff;background:#15122d;border:1px solid #513c96;border-radius:999px;padding:7px 10px;font-size:.85rem}.revealed-song,.example-song{color:#ff4f75;font-weight:900}.modal{z-index:50;background:#000000b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{width:min(560px,100%);box-shadow:var(--shadow);background:#121722;border:1px solid #31394a;border-radius:22px;padding:24px;position:relative}.modal-close{color:#9da7b8;background:0 0;border:0;font-size:1.8rem;position:absolute;top:10px;right:14px}.modal-card input{margin-bottom:10px}.how-page{gap:22px;display:grid}.how-page-head{text-align:center;padding:24px 10px 8px}.how-page-head .lead{max-width:800px;margin:0 auto}.how-steps{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.how-step-card{grid-template-columns:54px 1fr;gap:14px;padding:20px;display:grid}.step-num{background:linear-gradient(135deg,#ef00d8,#7a32ff 48%,#00cfff);border-radius:12px;place-items:center;width:44px;height:44px;font-weight:900;display:grid}.how-step-card p{color:var(--muted);margin:0;line-height:1.58}.example-card{padding:24px}.example-head{justify-content:space-between;gap:18px;display:flex}.example-score{color:#7ddfff;font-size:.9rem;font-weight:800}.example-story{border:1px solid var(--line);background:#0d1017;border-radius:16px;margin-top:18px;padding:20px;font-family:Georgia,Times New Roman,serif;font-size:1.08rem;line-height:1.8}.example-reveal{grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;display:grid}.example-reveal>div{background:#10162a;border:1px solid #704fff47;border-radius:12px;padding:14px 16px}.example-reveal span{color:var(--muted);text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px;font-size:.78rem;display:block}.table-card{overflow:hidden}.table-head,.table-row{grid-template-columns:70px 1fr 120px 120px;align-items:center;gap:12px;padding:14px 18px;display:grid}.table-head{text-transform:uppercase;letter-spacing:.09em;color:var(--muted);border-bottom:1px solid var(--line);font-size:.75rem}.table-row{border-bottom:1px solid #ffffff0d}.rank{color:#e02bff;font-weight:900}.tabs{gap:8px;display:flex}.tab{color:#cdd4e4;background:#11182d;border:1px solid #6b54ca57;border-radius:10px;padding:8px 12px}.tab.active{color:#fff;background:#00bfe9}.stat-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0;display:grid}.stat{text-align:center;padding:20px}.stat strong{font-size:2rem;display:block}.stat span{color:var(--muted);font-size:.8rem}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.field{gap:7px;display:grid}.field.full{grid-column:1/-1}.field label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:800}input,textarea,select{width:100%;color:var(--text);background:#0d1119;border:1px solid #2b3344;border-radius:10px;outline:none;padding:11px 12px}textarea{resize:vertical;min-height:220px}.inline-form{gap:10px;display:flex}.story-review{text-align:left;max-height:58vh;overflow:auto}.spacer{height:12px}@media (max-width:900px){.hero-v5{min-height:unset;grid-template-columns:1fr}.how-grid{grid-template-columns:1fr 1fr}.game-layout{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr 1fr}}@media (max-width:650px){.topbar{grid-template-columns:1fr auto;padding:10px}.topbar nav{flex-wrap:nowrap;order:3;grid-column:1/-1;justify-content:flex-start;overflow:auto}.brand small{display:none}main{width:min(100% - 20px,1180px)}.hero-v5{padding:16px 12px}.artist-word{font-size:4rem}.unknown-word{font-size:3.6rem}.hero-tagline{letter-spacing:.19em;font-size:.73rem}.how-grid,.how-steps,.example-reveal,.form-grid{grid-template-columns:1fr}.how-item:after{display:none!important}.home-footer-line{grid-template-columns:1fr}.home-footer-line span{display:none}.table-head,.table-row{grid-template-columns:46px 1fr 90px}.table-head div:nth-child(4),.table-row div:nth-child(4){display:none}.stat-grid{grid-template-columns:1fr 1fr}footer{flex-direction:column}}:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible{outline-offset:4px;outline:3px solid #fff;box-shadow:0 0 0 6px #4136a8}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:1000;color:#fff;background:#111;padding:12px;position:fixed;top:-100px;left:12px}.skip-link:focus{top:12px}.accessible-dialog{color:var(--text);width:min(560px,100% - 40px);max-height:90dvh;margin:auto;position:fixed;overflow:auto}.accessible-dialog::backdrop{background:#000000c7}.title-entry{margin-top:16px;display:block}.title-entry input{margin-top:8px;display:block}