:root{--bg-1:#0b0f1a;--bg-2:#151e33;--accent:#7c5cff;--accent-2:#00e0a4;--card:#0f1626cc;--card-border:#2b3551;--text:#e9efff;--muted:#9fb1d1;--chip:#1b2540;--chip-border:#2a3554}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--text);font:16px/1.45 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(1000px 600px at 20% -10%,#1b2744,transparent 60%),radial-gradient(1000px 600px at 120% 110%,#17203a,transparent 60%),linear-gradient(180deg,var(--bg-1),var(--bg-2))}.wrap{max-width:1100px;margin:0 auto;padding:28px 24px 38px}.card{background:var(--card);border:1px solid var(--card-border);border-radius:18px;box-shadow:0 10px 40px #0000004d,inset 0 1px #ffffff05}#hud{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;margin:14px 0 18px;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hchip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--chip);border:1px solid var(--chip-border);border-radius:999px;font-weight:700;color:#cfe0ff}.hchip span{color:#fff;font-weight:900;letter-spacing:.2px}#mode{margin-left:6px;opacity:.9}#ring{width:56px;height:56px}.ringbg{stroke:#243154;stroke-width:8}.ringfg{stroke:url(#ringGrad);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .95s linear}#qtext{text-align:center;font-size:1.6rem;font-weight:800;letter-spacing:.2px;padding:22px 16px;border-radius:16px;margin:12px auto;max-width:900px}#media{display:flex;justify-content:center;gap:18px;margin-top:6px}#blurImg{max-width:820px;max-height:420px;border-radius:16px;border:1px solid var(--chip-border);display:none}audio{width:420px;background:#0003;border-radius:12px}#replay{margin-top:8px;opacity:.95;border:1px solid var(--chip-border);background:#111a2d;color:var(--text);padding:8px 12px;border-radius:10px}#replay:disabled{opacity:.45;cursor:not-allowed}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#answerRow{justify-content:center;margin:10px 0 24px}input[type=text]{background:#0a1122;color:var(--text);border:1px solid var(--chip-border);border-radius:14px;padding:12px 14px;outline:none;transition:box-shadow .15s ease,border-color .15s ease}input[type=text]:focus{box-shadow:0 0 0 3px #7c5cff55;border-color:#7c5cffaa}#answer{flex:0 1 560px}#song{flex:0 1 340px}button{background:linear-gradient(180deg,#8c74ff,#6b4bff);border:1px solid #5a3fff;color:#fff;padding:12px 16px;border-radius:14px;font-weight:800;letter-spacing:.3px;cursor:pointer;box-shadow:0 10px 24px #7c5cff59}button:active{transform:translateY(1px)}#scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:14px;margin-top:8px}.scard{display:flex;align-items:center;gap:12px;padding:10px 12px}.avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#223;border:1px solid var(--chip-border)}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.name{font-weight:700}.pts{margin-left:auto;background:#0d1326;border:1px solid var(--chip-border);padding:4px 10px;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}#toasts{position:fixed;left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;gap:10px;z-index:10000}.toast{background:linear-gradient(180deg,#111a2d,#0b1225);color:#e6f0ff;border:1px solid var(--chip-border);padding:12px 16px;border-radius:14px;box-shadow:0 14px 36px #00000059;display:flex;align-items:center;gap:10px;min-width:280px;justify-content:center;animation:pop .2s ease-out,slidein .25s ease-out}@keyframes pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slidein{0%{transform:translateY(8px)}to{transform:translateY(0)}}.overlay .body{white-space:pre-wrap}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;z-index:9999;background:radial-gradient(1200px 700px at 50% 50%,#0b1024f2,#0b0f1aee 60%,#0b0f1acc);padding:24px}.overlay.show{display:flex}.ovcard{max-width:980px;width:min(92vw,980px);padding:28px}.title{font-size:2.1rem;font-weight:900;margin:10px 0 8px}.sub{color:var(--muted);white-space:pre-wrap}.winrow{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:14px}.winrow .avatar{width:48px;height:48px}#lbList .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--chip-border)}#lbList .row:nth-child(1){background:#1b2444;border-radius:12px}.hchip .avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;border:1px solid var(--chip-border)}.hchip .avatar img{width:100%;height:100%;object-fit:cover;display:block}.multiple-choice{display:flex;flex-direction:column;gap:12px;margin:20px auto;max-width:700px;padding:0 20px}.mc-option{display:flex;align-items:center;gap:16px;padding:18px 20px;background:#14141ed9;border:2px solid #444;border-radius:10px;cursor:pointer;transition:all .2s ease;text-align:left;font-size:1.05rem}.mc-option:hover:not(:disabled){background:#282832f2;border-color:#ff6b00;transform:translate(6px);box-shadow:0 4px 12px #ff6b004d}.mc-option:active:not(:disabled){transform:translate(3px)}.mc-option:disabled{opacity:.5;cursor:not-allowed}.mc-letter{font-weight:700;font-size:1.4rem;color:#ff6b00;min-width:35px;text-align:center;font-family:monospace}.mc-text{flex:1;font-size:1rem;color:#fff;line-height:1.4}@media (max-width: 768px){.wrap{padding:16px 12px 24px}#hud{padding:10px 12px;margin:8px 0 12px;gap:8px}.hchip{padding:6px 10px;font-size:.85rem}#ring{width:44px;height:44px}#qtext{font-size:1.25rem;padding:16px 12px;margin:8px auto}#blurImg{max-width:100%;max-height:280px;width:100%;object-fit:contain}#media{margin-top:8px;gap:12px}audio{width:100%;max-width:100%}#answerRow{margin:8px 0 16px}input[type=text]{padding:10px 12px;font-size:.95rem}#answer,#song{flex:1 1 100%;max-width:100%}button{padding:10px 14px;font-size:.95rem}.multiple-choice{max-width:100%;padding:0 12px;margin:12px auto;gap:10px}.mc-option{padding:14px 16px;gap:12px}.mc-letter{font-size:1.2rem;min-width:30px}.mc-text{font-size:.95rem}#scores{grid-template-columns:1fr;gap:8px;padding:10px}.scard{padding:8px 10px}.overlay{padding:12px}.ovcard{padding:20px 16px;max-width:100%}.title{font-size:1.6rem}}
