:root{--bg-deep: #070B14;--bg-surface: #0F1625;--bg-elevated: #172035;--bg-card: #1C2740;--amber: #FFB800;--amber-fill: #FFB800;--amber-dim: #CC9400;--amber-glow: rgba(255, 184, 0, .15);--coral: #FF4D6D;--coral-fill: #FF4D6D;--coral-dim: #CC3D57;--teal: #00CDB8;--teal-fill: #00CDB8;--teal-dim: #009E8E;--brand-mid: #FFE082;--text-primary: #F2F4F8;--text-secondary:#A6B0C2;--text-dim: #7E899D;--border: rgba(255, 255, 255, .14);--border-accent: rgba(255, 184, 0, .35);--font-display: "Bebas Neue", "Arial Narrow", sans-serif;--font-body: "Outfit", "Segoe UI", sans-serif;--font-mono: "Space Mono", monospace;--shadow-amber: 0 0 20px rgba(255, 184, 0, .2), 0 4px 16px rgba(0,0,0,.4);--shadow-coral: 0 0 20px rgba(255, 77, 109, .2), 0 4px 16px rgba(0,0,0,.4);--shadow-card: 0 4px 24px rgba(0,0,0,.5);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px}[data-theme=light]{--bg-deep: #F5F0E8;--bg-surface: #EDE7DB;--bg-elevated: #E4DCCE;--bg-card: #FFFFFF;--amber: #8A5B00;--amber-fill: #C98000;--amber-dim: #6E4800;--amber-glow: rgba(180, 120, 0, .12);--coral: #C0283E;--coral-fill: #E0405A;--coral-dim: #9A1F32;--teal: #00766A;--teal-fill: #00A896;--teal-dim: #005E55;--brand-mid: #C98000;--text-primary: #16192A;--text-secondary:#3F4459;--text-dim: #5B6079;--border: rgba(0, 0, 0, .16);--border-accent: rgba(138, 91, 0, .45);--shadow-amber: 0 0 20px rgba(180, 120, 0, .15), 0 4px 16px rgba(0,0,0,.12);--shadow-coral: 0 0 20px rgba(200, 50, 80, .15), 0 4px 16px rgba(0,0,0,.12);--shadow-card: 0 4px 24px rgba(0,0,0,.1)}[data-theme=light] body{background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(180,120,0,.05) 0%,transparent 60%)}[data-theme=light] .primary-button:hover:not(:disabled),[data-theme=light] .btn-primary:hover:not(:disabled){background:#b36e00;box-shadow:0 0 24px #b478004d,0 4px 16px #00000026}*,*:before,*:after{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:var(--font-body);font-weight:400;background-color:var(--bg-deep);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(255,184,0,.06) 0%,transparent 60%)}#root{min-height:100vh;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);letter-spacing:.03em;margin:0;line-height:1}h1{font-size:clamp(2.5rem,6vw,5rem)}h2{font-size:clamp(1.6rem,4vw,2.8rem)}h3{font-size:clamp(1.1rem,2.5vw,1.6rem)}p{margin:0}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-card)}.card--elevated{background:var(--bg-elevated);border-color:var(--border-accent)}button{cursor:pointer;border:none;border-radius:var(--radius-md);padding:12px 24px;font-family:var(--font-body);font-size:15px;font-weight:600;transition:all .18s ease}button:active{transform:scale(.97)}button:focus-visible,[role=button]:focus-visible{outline:2px solid var(--amber);outline-offset:2px}button:focus:not(:focus-visible){outline:none}.btn-primary{background:var(--amber-fill);color:#070b14;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow-amber)}.btn-primary:hover:not(:disabled){background:#ffc833;box-shadow:0 0 32px #ffb80066,0 4px 16px #0006;transform:translateY(-1px)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--text-dim)}.primary-button{background:var(--amber-fill);color:#070b14;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow-amber);border:none;border-radius:var(--radius-md);padding:14px 40px;font-family:var(--font-body);font-size:16px;cursor:pointer;transition:all .18s ease}.primary-button:hover:not(:disabled){background:#ffc833;box-shadow:0 0 32px #ffb80066,0 4px 16px #0006;transform:translateY(-2px)}.primary-button:disabled{opacity:.35;cursor:not-allowed}input[type=text],input[type=number],input[type=email],input[type=password]{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:15px;padding:10px 14px;width:100%;transition:border-color .15s;outline:none}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}input[type=text]:focus-visible,input[type=number]:focus-visible,input[type=email]:focus-visible,input[type=password]:focus-visible{outline:2px solid var(--amber);outline-offset:1px}input::placeholder{color:var(--text-dim)}.section-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}.select-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;cursor:pointer;transition:all .18s ease}.select-card:hover{border-color:#ffb80066;background:var(--bg-elevated)}.select-card.active{border-color:var(--amber);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--amber),inset 0 0 24px var(--amber-glow)}.select-card.active-coral{border-color:var(--coral);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--coral),inset 0 0 24px #ff4d6d1a}.divider{height:1px;background:var(--border);margin:24px 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.song-set-grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}@media (min-width: 640px){.song-set-grid{grid-template-columns:repeat(3,1fr)}}.preset-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}@media (max-width: 768px){.card{padding:20px 16px}button{padding:10px 16px;font-size:14px}}@media (max-width: 480px){button{padding:8px 12px;font-size:13px}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ffb80033}50%{box-shadow:0 0 32px #ffb80080}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-up{animation:fadeUp .4s ease both}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#0000008c;display:flex;align-items:flex-end;justify-content:center}.sheet-panel{display:flex;flex-direction:column;width:100%;max-height:90vh;background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);border-bottom:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-card);outline:none;animation:sheetUp .22s ease both}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px}.sheet-title{font-size:22px;color:var(--text-primary)}.sheet-close{flex:none;margin-left:auto;width:36px;height:36px;padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text-secondary);font-size:22px;line-height:1}.sheet-close:hover{background:var(--bg-elevated);color:var(--text-primary)}.sheet-body{overflow-y:auto;padding:0 16px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (min-width: 640px){.sheet-backdrop{align-items:center;padding:24px}.sheet-panel{max-width:560px;max-height:85vh;border-bottom:1px solid var(--border);border-radius:var(--radius-lg);animation-name:fadeUp}}@media (prefers-reduced-motion: reduce){.sheet-panel{animation:none}}.new-game{width:100%;max-width:640px;animation:fadeUp .4s ease both}.new-game-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.new-game-back{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);text-decoration:none;transition:background .18s ease}.new-game-back:hover{background:var(--bg-elevated)}.new-game-back:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.new-game-title{font-size:clamp(1.8rem,6vw,2.4rem);color:var(--text-primary)}.new-game-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;margin-top:12px;padding:10px 16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-primary);font-size:15px;font-weight:600;text-align:left}.new-game-row:hover{background:var(--bg-elevated);border-color:var(--text-dim)}.new-game-row__label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}.new-game-row__count{color:var(--text-dim);font-weight:400}.new-game-row__summary{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--text-secondary)}.new-game-row__chevron{flex:none;font-size:18px;color:var(--text-secondary)}.new-game-more{display:flex;flex-direction:column;gap:20px;margin-top:10px;padding:16px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}@media (prefers-reduced-motion: reduce){.new-game{animation:none}}.home{width:100%;max-width:920px;margin:0 auto;padding:20px 16px 64px;animation:fadeUp .4s ease both}.home-hero{display:flex;flex-direction:column;gap:8px;text-align:center;margin-bottom:16px}.home-wordmark{font-family:var(--font-display);font-size:clamp(2.6rem,11vw,4.4rem);font-weight:700;letter-spacing:.06em;line-height:1;background:linear-gradient(90deg,var(--amber) 0%,var(--brand-mid) 50%,var(--coral) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.home-tagline{font-family:var(--font-body);font-size:15px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--text-secondary)}.home-question{margin:0 0 14px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--text-secondary)}.home-cards{display:grid;gap:16px}.home-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.home-card--friends{background:var(--bg-elevated);border-color:var(--border-accent)}.home-card--solo{background:var(--bg-surface);border-color:#00cdb866}[data-theme=light] .home-card--solo{border-color:#00766a73}.home-card__head{display:flex;align-items:center;gap:12px}.home-card__icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--amber-glow);color:var(--amber)}.home-card__icon--teal{background:#00cdb824;color:var(--teal)}.home-card__title{font-size:clamp(1.8rem,7vw,2.1rem);letter-spacing:.04em;color:var(--text-primary)}.home-card__text{font-size:15px;line-height:1.5;color:var(--text-secondary)}.home-card__record{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--teal)}.home-card__actions{display:flex;gap:10px}.home-card__cta{flex:2;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;border-radius:var(--radius-md);font-size:17px;font-weight:700;letter-spacing:.04em;text-align:center;text-decoration:none;transition:all .18s ease}.home-card__cta--amber{background:var(--amber-fill);color:#070b14;box-shadow:var(--shadow-amber)}.home-card__cta--amber:hover{background:#ffc833;transform:translateY(-1px)}[data-theme=light] .home-card__cta--amber:hover{background:#b36e00}.home-card__cta--teal{background:transparent;border:2px solid var(--teal);color:var(--teal)}.home-card__cta--teal:hover{background:#00cdb81a}.home-card__secondary{flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:15px;text-align:center;text-decoration:none;color:var(--text-secondary);transition:all .18s ease}.home-card__secondary:hover{background:var(--bg-elevated);color:var(--text-primary)}.home-card__cta:focus-visible,.home-card__secondary:focus-visible,.home-join:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.home-join{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:12px;font-size:15px;color:var(--text-primary);text-decoration:none}.home-join__icon{display:flex;color:var(--amber)}.home-join strong{color:var(--amber)}.home-steps{display:flex;flex-direction:column;gap:14px;margin-top:12px;padding-top:24px;border-top:1px solid var(--border)}.home-steps__title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}.home-steps ol{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}.home-steps li{display:flex;gap:12px;align-items:baseline;font-size:15px;line-height:1.5;color:var(--text-primary)}.home-steps__n{flex-shrink:0;min-width:18px;font-family:var(--font-display);font-size:24px;color:var(--amber)}.home-lang{margin-top:40px;font-size:14px;text-align:center}.home-lang a{color:var(--amber);text-decoration:none}@media (min-width: 760px){.home{padding-top:40px}.home-hero{gap:12px;margin-bottom:24px}.home-tagline{font-size:18px}.home-question{margin-bottom:20px}.home-cards{grid-template-columns:1fr 1fr;gap:20px;align-items:start}.home-card{padding:28px;gap:14px}.home-steps ol{flex-direction:row;flex-wrap:wrap;gap:20px}.home-steps li{flex:1 1 220px}}@media (prefers-reduced-motion: reduce){.home{animation:none}}.timeline-placement-container,.timeline-songs-container{display:flex;align-items:center;gap:8px;justify-content:center;justify-content:safe center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}@media (min-width: 521px){.timeline-placement-container,.timeline-songs-container{flex-wrap:wrap}}@media (max-width: 520px){.timeline-placement-container,.timeline-songs-container{flex-direction:column;overflow-x:visible;overflow-y:auto;max-height:55vh;align-items:stretch;justify-content:flex-start;overscroll-behavior:contain}}