:root{--bg:#14111f;--bg2:#1e1a2e;--card:#262139;--line:#3a3352;--text:#f3f0fa;--muted:#a39cb8;--accent:#ff4fa3;--accent2:#ffb84f;--ok:#3ddc84;--bad:#ff5f6d;--skip:#6b6485;--radius:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#faf7ff;--bg2:#f0ebfa;--card:#fff;--line:#ddd5ee;--text:#1d1730;--muted:#6d6585;--skip:#b5aecb;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}:root[data-theme=light]{--bg:#faf7ff;--bg2:#f0ebfa;--card:#fff;--line:#ddd5ee;--text:#1d1730;--muted:#6d6585;--skip:#b5aecb;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}code{background:var(--bg2);border-radius:6px;padding:2px 6px}.app{max-width:640px;padding:max(12px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;gap:14px;margin:0 auto;display:flex}.topbar{align-items:center;gap:10px;display:flex}.topbar h1{letter-spacing:-.02em;flex:1;margin:0;font-size:1.4rem}.topbar h1 span{color:var(--accent)}.score-pill{background:var(--card);border:1px solid var(--line);font-variant-numeric:tabular-nums;border-radius:999px;gap:10px;padding:6px 12px;font-weight:600;display:flex}.icon-btn{background:0 0;border:none;border-radius:10px;padding:6px;font-size:1.3rem}.tabs{background:var(--bg2);border-radius:12px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.tabs button{color:var(--muted);background:0 0;border:none;border-radius:9px;padding:10px;font-weight:600}.tabs button.on{background:var(--card);color:var(--text);box-shadow:0 1px 4px #0003}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}.center{text-align:center}.big{font-size:2rem;font-weight:700}.hint{color:var(--muted);margin:4px 0;font-size:.9rem}.notice,.error{border-radius:12px;padding:10px 14px;font-size:.95rem}.notice{background:color-mix(in srgb, var(--accent2) 20%, transparent);cursor:pointer;justify-content:space-between;gap:8px;display:flex}.error{background:color-mix(in srgb, var(--bad) 20%, transparent)}.turn,.daily-info{text-align:center;color:var(--muted);margin:0}.turn b{color:var(--accent2)}.game{flex-direction:column;gap:16px;display:flex}.stagebar{grid-template-columns:repeat(7,1fr);gap:4px;margin:0;padding:0;list-style:none;display:grid}.seg{white-space:nowrap;letter-spacing:-.02em;background:var(--bg2);border:1px solid var(--line);height:34px;color:var(--muted);border-radius:8px;place-items:center;font-size:clamp(.62rem,2.6vw,.8rem);font-weight:600;transition:all .2s;display:grid}.seg.current{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);transform:scale(1.06)}.seg.wrong{background:color-mix(in srgb, var(--bad) 25%, transparent);border-color:var(--bad);color:var(--text)}.seg.skip{background:var(--skip);border-color:var(--skip);color:#fff}.seg.correct{background:var(--ok);border-color:var(--ok);color:#0b2416}.timebar{background:var(--bg2);border-radius:999px;height:10px;position:relative;overflow:hidden}.timebar-unlocked{background:color-mix(in srgb, var(--accent) 30%, transparent);transition:width .3s;position:absolute;inset:0 auto 0 0}.timebar-played{background:linear-gradient(90deg, var(--accent), var(--accent2));position:absolute;inset:0 auto 0 0}.timebar-tick{background:var(--bg);width:2px;position:absolute;top:0;bottom:0}.player{flex-direction:column;align-items:center;gap:8px;padding:8px 0;display:flex}.play{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;width:112px;height:112px;box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 40%, transparent);touch-action:manipulation;border:none;border-radius:50%;place-items:center;font-size:2.6rem;transition:transform .1s;display:grid}.play:active{transform:scale(.95)}.play.playing{animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 10px 50px color-mix(in srgb, var(--accent) 70%, transparent)}}.play-label{color:var(--muted);font-variant-numeric:tabular-nums;margin:0}.spinner{border:3px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin;display:inline-block}.card .spinner{border-color:var(--line);border-top-color:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}.guess{flex-direction:column;gap:10px;display:flex}.combo{position:relative}.combo input{border:1px solid var(--line);background:var(--bg2);width:100%;color:var(--text);border-radius:12px;outline:none;padding:14px 16px;font-size:1.05rem}.combo input:focus{border-color:var(--accent)}.suggestions{background:var(--card);border:1px solid var(--line);z-index:10;border-radius:12px;max-height:50vh;margin:0;padding:6px;list-style:none;position:absolute;bottom:calc(100% + 6px);left:0;right:0;overflow-y:auto;box-shadow:0 -8px 30px #00000059}.suggestions li{cursor:pointer;border-radius:8px;padding:11px 12px}.suggestions li span{color:var(--muted)}.suggestions li.active{background:color-mix(in srgb, var(--accent) 22%, transparent)}.suggestions li.guessed{opacity:.5;text-decoration:line-through}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.btn{border:1px solid var(--line);background:var(--bg2);touch-action:manipulation;border-radius:12px;padding:12px 16px;font-weight:600}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.ghost{background:0 0}.btn.small{padding:8px 12px;font-size:.9rem}.btn.big{width:100%;padding:16px;font-size:1.1rem}.attempts{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.attempts li{border:1px solid var(--line);min-height:40px;color:var(--muted);border-radius:10px;padding:9px 12px;font-size:.95rem}.attempts li.current{border-color:var(--accent)}.attempts li.wrong{color:var(--bad);border-color:color-mix(in srgb, var(--bad) 50%, transparent)}.attempts li.skip{color:var(--skip)}.attempts li.correct{color:var(--ok);border-color:var(--ok);font-weight:600}.result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:14px;padding:18px;animation:.25s ease-out pop;display:flex}.result.won{border-color:var(--ok)}@keyframes pop{0%{opacity:0;transform:scale(.97)}}.result-headline{text-align:center;margin:0;font-size:1.05rem}.result-headline b{color:var(--ok)}.result-body{text-align:center;flex-direction:column;align-items:center;gap:14px;display:flex}.cover{aspect-ratio:1;object-fit:cover;border-radius:12px;width:min(72vw,280px);height:auto;box-shadow:0 10px 30px #0006}.cover.placeholder{background:var(--bg2);place-items:center;font-size:4rem;display:grid}.result-info{flex-direction:column;align-items:center;gap:6px;display:flex}.result-info h2{margin:0;font-size:1.4rem}.result-info .artist{color:var(--accent2);margin:0;font-size:1.1rem;font-weight:600}.result-info .meta{color:var(--muted);margin:0;font-size:.9rem}.result-info .btn{margin-top:6px}.mini-progress{background:var(--bg2);border-radius:999px;width:100%;max-width:260px;height:6px;overflow:hidden}.mini-progress div{background:var(--accent);height:100%}.link{color:var(--accent);font-size:.9rem}.result-actions{text-align:center;flex-direction:column;gap:8px;display:flex}.scoreboard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.scoreboard h3{margin:0 0 8px}.scoreboard table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.scoreboard th,.scoreboard td{text-align:left;border-bottom:1px solid var(--line);padding:6px 4px}.scoreboard th{color:var(--muted);font-size:.85rem;font-weight:500}.scoreboard tr.current td{color:var(--accent2);font-weight:600}.stats{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:.85rem;display:flex}.modal-backdrop{z-index:50;background:#0000008c;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal{background:var(--card);width:100%;max-width:560px;max-height:90vh;padding:18px 18px max(18px, env(safe-area-inset-bottom));border-radius:20px 20px 0 0;overflow-y:auto}@media (width>=640px){.modal-backdrop{align-items:center}.modal{border-radius:20px}}.modal header{justify-content:space-between;align-items:center;display:flex}.modal h2{margin:0}.modal h3{margin:18px 0 6px;font-size:1rem}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line);background:var(--bg2);border-radius:999px;padding:8px 14px}.chip small{color:var(--muted);margin-left:4px}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}.chip.on small{color:#fffc}.switch{align-items:center;gap:10px;display:flex}.switch input{width:20px;height:20px;accent-color:var(--accent)}.players-edit{flex-direction:column;gap:8px;margin-top:10px;display:flex}.player-row{gap:8px;display:flex}.player-row input{border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:10px;flex:1;padding:10px 12px;font-size:1rem}.modal-footer{justify-content:space-between;gap:10px;margin-top:22px;display:flex}:root[data-occasion=wedding]{--bg:#1d0e18;--bg2:#2a1422;--card:#34192b;--line:#522a44;--muted:#c49ab3;--accent:#ff3d7f;--accent2:#f5c76b}@media (prefers-color-scheme:light){:root[data-occasion=wedding]:not([data-theme=dark]){--bg:#fff5f8;--bg2:#ffe7ef;--card:#fff;--line:#f6c9d8;--muted:#92627a;--accent2:#c9962e}}:root[data-occasion=wedding][data-theme=light]{--bg:#fff5f8;--bg2:#ffe7ef;--card:#fff;--line:#f6c9d8;--muted:#92627a;--accent2:#c9962e}:root[data-occasion=wedding] body{background:radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 45%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 50%), var(--bg);background-attachment:fixed;min-height:100vh}:root[data-occasion=wedding] .app{z-index:0;position:relative}.wedding-banner{border-radius:var(--radius);color:#fff;text-shadow:0 1px 3px #78143c73;background:linear-gradient(120deg,#ff3d7f,#ff7aa8 45%,#e8b04f) 0 0/200% 200%;align-items:center;gap:12px;padding:14px 16px;animation:8s infinite banner-shine;display:flex;box-shadow:0 6px 24px #ff3d7f59}.wedding-banner>div{text-align:center;flex-direction:column;flex:1;gap:2px;display:flex}.wedding-banner strong{letter-spacing:-.01em;font-size:1.15rem}.wedding-banner span{opacity:.95;font-size:.88rem}.wedding-banner .rings{font-size:1.7rem;animation:1.6s ease-in-out infinite heartbeat}@keyframes banner-shine{0%,to{background-position:0%}50%{background-position:100%}}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}.hearts{pointer-events:none;z-index:-1;position:fixed;inset:0;overflow:hidden}.hearts span{opacity:0;animation-name:float-heart;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;bottom:-40px}@keyframes float-heart{0%{opacity:0;transform:translate(0)rotate(-10deg)}10%{opacity:.55}50%{transform:translate(18px,-55vh)rotate(10deg)}90%{opacity:.4}to{opacity:0;transform:translate(-12px,-110vh)rotate(-8deg)}}@media (prefers-reduced-motion:reduce){.hearts{display:none}.wedding-banner,.wedding-banner .rings{animation:none}}