:root{--bg:#020817;--panel:#07172d;--gold:#d8aa42;--gold2:#f3d98d;--cream:#fff8e8}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:#fff}
button{font:inherit}
.hidden{display:none!important}
.screen{min-height:100vh}
.app{min-height:100vh;background:radial-gradient(circle at 50% 10%,#173b68 0,#081d3b 38%,#020817 100%)}
.wrap{max-width:1440px;margin:auto;padding:22px}
.gold{color:var(--gold2)}
.panel{border:1px solid #d8aa4260;background:#06162fdd;border-radius:18px}
.gold-btn,.ghost-btn{cursor:pointer;border-radius:12px;padding:11px 16px}
.gold-btn{border:1px solid var(--gold2);background:linear-gradient(#e8c15d,#a77518);color:#061326;font-weight:700}
.ghost-btn{border:1px solid #d8aa4270;background:#071a35;color:var(--gold2)}
.welcome{display:grid;place-items:center;text-align:center;padding:30px}
.welcome h1{font-size:clamp(44px,7vw,86px);line-height:1.05;margin:20px 0;color:var(--gold2);font-family:Georgia,"Microsoft YaHei",serif}
.welcome p{color:#ffffffb8;font-size:18px}
.duration{margin-top:10px;color:#ffffff82;font-size:14px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:1px solid #d8aa4250;padding-bottom:17px}
.top h2{margin:4px 0 0;font-size:34px}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px;color:#ffffffb8}
.dot{width:11px;height:11px;border-radius:50%;background:#ffffff25}
.dot.current{background:var(--gold2);box-shadow:0 0 0 4px #d8aa4226}
.dot.done{background:#d8aa4270}
.quiz-grid{display:grid;grid-template-columns:230px 1fr;gap:20px;margin-top:20px}
.aside{display:grid;gap:16px;align-content:start}
.box{padding:16px}.box h3{margin:0;color:var(--gold2)}
.stack{display:grid;gap:10px;margin-top:14px}
.stats{display:grid;gap:12px;margin-top:14px;font-size:14px}
.stat{display:flex;justify-content:space-between}.stat span:first-child{color:#ffffff88}
.progress{height:8px;background:#ffffff14;border-radius:999px;overflow:hidden;margin-top:14px}
.progress div{height:100%;background:var(--gold);width:0}
.question{min-height:570px;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.question-head{display:flex;justify-content:space-between;gap:16px;align-items:center}
.question h3{font-size:28px;margin:7px 0 0}
.pill{border:1px solid #d8aa4270;border-radius:999px;padding:6px 10px;color:var(--gold2);font-size:13px}
.choices{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:30px}
.song-card{min-height:390px;border-radius:24px;border:1px solid #d8aa4290;background:linear-gradient(150deg,#fff9ea,#e6d4ac);color:#111827;padding:20px;overflow:hidden}
.song-label{color:#0007;font-size:13px}.song-name{display:block;font-size:27px;margin-top:8px}
.media-row{display:grid;grid-template-columns:136px 1fr;gap:16px;align-items:center;margin-top:18px}
.cover-wrap{width:136px;height:136px;border-radius:16px;background:#071a35;border:1px solid #d8aa4280;display:grid;place-items:center;color:#f3d98d;font-size:34px;overflow:hidden}
.cover{width:100%;height:100%;object-fit:cover}
.preview-btn{width:100%;border:1px solid #9a6d19;border-radius:11px;background:#071a35;color:#f3d98d;padding:10px 12px;cursor:pointer;text-align:left}
.preview-btn:disabled{opacity:.48;cursor:not-allowed}
.preview-status{margin-top:9px;color:#5f4b23;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-track{height:8px;border-radius:999px;background:#0002;overflow:hidden;margin-top:9px}
.preview-progress{height:100%;width:0;background:#b58222}
.preview-time{display:flex;justify-content:space-between;margin-top:6px;color:#6d5a35;font-size:12px}
.select-btn{width:100%;margin-top:18px;border:1px solid #9a6d19;border-radius:12px;background:linear-gradient(#e7bd58,#ac791b);color:#071427;padding:12px;font-weight:700;cursor:pointer}
.vs{border:1px solid #d8aa4270;border-radius:999px;padding:8px 12px;color:var(--gold2);font-size:14px}
.round-list{border-top:1px solid #ffffff15;padding-top:18px;margin-top:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:5px 10px;border-radius:999px;border:1px solid #d8aa4266;background:#d8aa421b;color:var(--gold2);font-size:13px}
.note{color:#ffffff8f;font-size:14px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.bracket-shell{margin-top:18px;overflow:auto;border:1px solid #d8aa4270;border-radius:18px;background:#020b1b;padding:8px}
#bracketHost{min-width:1536px}
@media(max-width:850px){.quiz-grid{grid-template-columns:1fr}.aside{grid-template-columns:1fr 1fr}.choices{grid-template-columns:1fr}.vs{justify-self:center}.top{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.wrap{padding:12px}.aside{grid-template-columns:1fr}.question{padding:18px}.song-card{min-height:0}.media-row{grid-template-columns:96px 1fr}.cover-wrap{width:96px;height:96px}}

.mode-choice{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.mobile-status{display:none}
.switch-btn{width:100%}
body.mobile-mode .wrap{max-width:760px}
body.mobile-mode .top{align-items:flex-start;flex-direction:column}
body.mobile-mode .quiz-grid{grid-template-columns:1fr}
body.mobile-mode .aside{grid-template-columns:1fr;order:2}
body.mobile-mode .question{order:1;min-height:0;padding:18px}
body.mobile-mode .choices{grid-template-columns:1fr;gap:14px}
body.mobile-mode .vs{justify-self:center}
body.mobile-mode .song-card{min-height:0;border-radius:20px;padding:18px}
body.mobile-mode .media-row{grid-template-columns:108px 1fr;gap:13px}
body.mobile-mode .cover-wrap{width:108px;height:108px}
body.mobile-mode .song-name{font-size:24px}
body.mobile-mode .question h3{font-size:24px}
body.mobile-mode .mobile-status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
body.mobile-mode .mobile-status .mini{border:1px solid #d8aa4250;background:#06162f;border-radius:12px;padding:10px;text-align:center}
body.mobile-mode .mobile-status .mini small{display:block;color:#ffffff72;font-size:11px}
body.mobile-mode .mobile-status .mini strong{display:block;color:var(--gold2);margin-top:4px;font-size:15px}
body.mobile-mode .round-list{margin-top:18px}
body.mobile-mode .top h2{font-size:30px}
body.mobile-mode .nav{font-size:12px;gap:6px}
body.mobile-mode .stack{grid-template-columns:1fr}
body.mobile-mode .bracket-shell{overflow:auto}
.result-mobile-note{display:none;color:#ffffff88;font-size:13px;margin-top:6px}
body.mobile-mode .result-mobile-note{display:block}