@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#0b0d1b;--bg2:#121629;--panel:#181d32;--panel2:#22283e;--line:#343b57;--txt:#f8f7ff;--muted:#a8acc7;--accent:#ffca77;--pink:#ff608e;--mint:#87e6b6;--red:#ff788f;--radius:18px}
*{box-sizing:border-box}html{background:var(--bg);color:var(--txt);scroll-behavior:smooth}body{margin:0;min-height:100svh;font-family:"DM Sans",system-ui,-apple-system,sans-serif;background:radial-gradient(ellipse 800px 480px at 50% -160px,#43255e91,transparent),radial-gradient(ellipse 460px 420px at 100% 120%,#193e4960,transparent),var(--bg);color:var(--txt)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed;transform:none!important}a{color:var(--accent)}h1,h2,h3,p{margin:0}h1,h2,h3,.display,.brand{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-.035em}h1{font-size:clamp(30px,5vw,56px);line-height:1.04}h2{font-size:clamp(23px,3vw,35px)}h3{font-size:19px}small,.small{font-size:13px;color:var(--muted)}.muted{color:var(--muted)}.highlight{color:var(--accent)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}.brand{font-size:17px;font-weight:800;letter-spacing:-.04em;display:flex;gap:10px;align-items:center}.brand-dot{display:grid;place-items:center;background:var(--pink);color:#171127;width:32px;height:32px;border-radius:50%;box-shadow:0 0 30px #ff608e55}.page{width:min(1120px,100%);margin:0 auto;padding:26px 22px 60px}.mobile{max-width:550px;padding:18px 16px 75px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:31px}.subbar{display:flex;align-items:center;justify-content:space-between;gap:10px}.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;padding:8px 12px;border-radius:99px;border:1px solid #6e5d80;color:#ecd2f3;background:#301f4266;white-space:nowrap}.tag.live{border-color:#447767;color:var(--mint);background:#183e3655}.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(140deg,#1b2037,#151a2b);padding:24px;box-shadow:0 14px 36px #05071636}.card.soft{background:#181d32b9}.section{margin-top:24px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:10px}.hero{padding:36px 0 28px}.hero p{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6;max-width:640px}.gradient-word{background:linear-gradient(110deg,#ffcb71,#ff7094);color:transparent;background-clip:text;-webkit-background-clip:text}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{min-height:44px;padding:11px 17px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:14px;font-weight:800;transition:filter .12s,transform .12s}.btn:not(:disabled):hover{filter:brightness(1.15);transform:translateY(-1px)}.btn.primary{background:linear-gradient(120deg,#ffba6b,#ff8c90);border-color:#ffb988;color:#241525}.btn.good{background:#174435;border-color:#498b72;color:#a0f1ca}.btn.danger{border-color:#975065;background:#3d2436;color:#ffacb7}.btn.ghost{background:transparent}.btn.xl{min-height:56px;padding:15px 22px;font-size:16px}.btn.full{width:100%}.btn:focus-visible,.gap:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:20px;align-items:start}.stack{display:flex;flex-direction:column;gap:16px}.row{display:flex;gap:12px;align-items:center;justify-content:space-between}.row.wrap{flex-wrap:wrap}.spacer{height:14px}.big-number{font-size:clamp(44px,7vw,76px);font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.06em;line-height:1}.clock{font-variant-numeric:tabular-nums;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:clamp(30px,5vw,52px);color:var(--accent)}.meter{height:8px;background:#0e1325;border-radius:20px;overflow:hidden;margin:12px 0}.meter>div{height:100%;border-radius:20px;background:linear-gradient(90deg,#ffb867,#ff648f);transition:width .3s}.score{font-size:23px;font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--accent)}.hearts{color:var(--pink);letter-spacing:3px;font-size:16px;white-space:nowrap}.status{font-size:11px;border:1px solid #587361;color:var(--mint);padding:5px 8px;border-radius:8px;font-weight:800;white-space:nowrap}.status.out{border-color:#76495e;color:#ff91a4}.team-card{padding:14px;border:1px solid var(--line);border-radius:13px;background:#22263d75}.team-card.out{opacity:.53;filter:grayscale(.7)}.team-name{font-weight:800;overflow-wrap:anywhere}.team-card .mini-btn{width:36px;height:36px;display:grid;place-items:center;padding:0;font-size:20px;border-radius:10px}.mini-btn{border:1px solid var(--line);background:#343955;color:#fff}.mini-btn.plus{background:#1b4539;color:#a4f1c4;border-color:#326e55}.mini-btn.minus{background:#432b3b;color:#ffb6c0;border-color:#6e3c50}.teams-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.form-input{width:100%;background:#0e1426;border:1px solid #49506d;border-radius:11px;padding:13px 14px;color:#fff;font-size:15px}.form-input:focus{outline:2px solid #ffb66d;outline-offset:1px}.label{display:block;font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.02em;margin-bottom:7px}.name-in{font-size:18px;padding:16px}.help{color:var(--muted);line-height:1.55;font-size:13px}.join-link{display:block;word-break:break-all;background:#0d1122;padding:12px;border-radius:10px;color:var(--accent);font-size:12px;margin:11px 0}.qr{width:170px;max-width:100%;background:#fff;padding:8px;border-radius:12px;display:block;margin:0 auto 10px}.player-hero{text-align:center;padding:16px 0 22px}.player-hero h1{font-size:33px}.player-hero p{margin-top:8px;color:var(--muted)}.player-top{margin-bottom:22px}.timelist{margin-top:13px;display:flex;flex-direction:column;gap:5px}.timeline-track{padding:13px 15px;background:#222942;border:1px solid #3d4562;border-radius:12px;display:flex;align-items:center;gap:12px}.timeline-track .year{font-family:"Space Grotesk",sans-serif;color:var(--accent);font-size:14px;font-weight:700;min-width:46px}.timeline-track .song{font-weight:700;font-size:14px}.timeline-track .artist{font-size:12px;color:#afb5cf;margin-top:3px}.gap{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;padding:11px 10px;border:1px dashed #656e8c;background:#22274133;border-radius:10px;color:#c7cce5;font-weight:800;font-size:13px;min-height:42px}.gap:hover{border-color:var(--accent)}.gap.selected{border:2px solid #f8bf70;color:#1b152a;background:var(--accent);box-shadow:0 0 20px #ffbe6a33}.pill{border:1px solid var(--line);border-radius:999px;padding:7px 11px;font-weight:800;font-size:12px;color:var(--muted)}.notice{border:1px solid #78613f;border-radius:14px;background:#473b234f;padding:13px 15px;color:#ffe0a9;font-size:13px;line-height:1.5}.notice.success{border-color:#317d5a;background:#193c3150;color:#9feec4}.notice.negative{border-color:#a44b60;background:#4b243356;color:#ffb2c2}.answer{font-size:26px;font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.04em}.round-meta{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}.divider{height:1px;background:var(--line);margin:18px 0}.leader-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #383f59}.leader-row:last-child{border-bottom:none}.leader-row.out{opacity:.49}.rank{font-family:"Space Grotesk",sans-serif;color:var(--accent);font-weight:700}.winner-banner{border:1px solid #d79b62;background:linear-gradient(120deg,#513548,#6a4737,#392741);border-radius:18px;padding:26px;text-align:center}.winner-banner h1{font-size:clamp(33px,5vw,56px);margin:10px 0}.pulse{animation:pulse 1.5s infinite alternate}@keyframes pulse{from{opacity:.65;transform:scale(.98)}to{opacity:1;transform:scale(1.02)}}.turntable{width:112px;height:112px;border:8px solid #30243f;border-radius:50%;background:radial-gradient(circle at center,#f4c577 0 8px,#382d3f 9px 24px,#fb6a96 25px 29px,#2b2944 30px 49px);box-shadow:0 0 50px #ff688c35;animation:spin 7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.editor-row{display:grid;grid-template-columns:1.25fr 1.1fr 75px 38px;gap:8px;margin-bottom:9px}.editor-row .form-input{padding:10px;font-size:13px}.editor-row .btn{padding:7px}.editor-row.head{font-size:11px;color:var(--muted);font-weight:800;padding:2px 10px}.editor{margin-top:18px}.small-note{font-size:12px;line-height:1.45;color:var(--muted)}.credits{color:#797e9f;font-size:11px;margin:28px 0}.count-bubble{background:#323652;padding:7px 11px;border-radius:11px;color:#eee3ff;font-weight:800;font-size:12px;white-space:nowrap}.boot{padding:15vh 25px;text-align:center;color:#ffca77;font-size:23px}#toast{position:fixed;z-index:100;bottom:20px;left:50%;transform:translateX(-50%);max-width:min(92%,530px);background:#432c3c;border:1px solid #e58ea6;color:#fff;padding:13px 18px;border-radius:12px;box-shadow:0 12px 45px #0008;display:none;text-align:center;font-size:14px}#toast.show{display:block}.hidden{display:none!important}
@media(max-width:760px){.page{padding:16px 15px 60px}.layout{grid-template-columns:1fr}.topbar{margin-bottom:22px}.card{padding:18px}.teams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-row{grid-template-columns:1.1fr 1fr 60px 30px;gap:4px}.editor-row .form-input{padding:8px;font-size:12px}.grid.three{grid-template-columns:1fr}}
@media(max-width:390px){.teams-grid{grid-template-columns:1fr}.mobile .teams-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-card{padding:11px}.btn{padding:10px 12px}}

.sticky-lock{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(550px,100%);padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#101323 82%,#101323ef);border-top:1px solid #50506b;box-shadow:0 -12px 35px #06091299;display:flex;flex-direction:column;gap:7px;align-items:center}.sticky-lock .small{color:#e9cf9f;font-weight:800}.mobile:has(.sticky-lock){padding-bottom:155px}

.answer-clock{text-align:center;min-width:84px}.answer-clock .clock{font-variant-numeric:tabular-nums;font-size:clamp(25px,5vw,44px);font-weight:800;color:#ffcd80}.answer-clock .small{font-size:11px}.gap:disabled{opacity:.5;cursor:not-allowed}.sticky-lock button:disabled{opacity:.55}.sticky-lock [data-closed-note]{font-size:11px;color:#aebbd8;text-align:center}.mobile .answer-clock .clock{font-size:30px}.mobile .card .row{gap:12px}

.footer-clock{font-size:20px;font-variant-numeric:tabular-nums;color:#ffcd80}.sticky-lock [data-closed-note]{min-height:22px}


/* Submitted answers are distinct from the amber unsubmitted selection. */
.gap.submitted{border:2px solid #58d69b;background:#216347;color:#f1fff8;box-shadow:0 0 20px #33ce8850}
.gap.submitted:hover{border-color:#a2ffca}

/* Host playlist preview: labels are immutable; arrow buttons change playback order. */
.playlist-songs,.playlist-anchors{display:flex;flex-direction:column;gap:8px}
.playlist-song-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.playlist-position{color:var(--accent);font-weight:800;text-align:center}
.playlist-track,.playlist-anchor{display:flex;flex-direction:column;gap:3px;min-width:0}
.playlist-track strong,.playlist-anchor strong{overflow-wrap:anywhere}
.playlist-track span,.playlist-anchor span{font-size:12px;color:var(--muted)}
.playlist-move{display:flex;gap:5px}
.playlist-move .mini-btn{width:36px;height:36px;border-radius:9px;font-size:20px}
.playlist-anchor{padding:10px 13px;border:1px solid var(--line);border-radius:10px}
@media(max-width:480px){.playlist-song-row{gap:7px;padding:10px 7px}.playlist-move .mini-btn{width:31px;height:34px}}

/* A clear top-to-bottom setup flow for casual party hosts. */
.host-lobby-stack{width:100%;max-width:740px;margin:0 auto;}

/* Returning from playlist preview begins at team signup, not playback. */
#host-join-qr{scroll-margin-top:20px}

/* Host's optional three-step Spotify tutorial. Works in mobile Safari. */
.tutorial-link{align-self:center;border:0;background:none;color:var(--accent);font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:3px 8px;min-height:30px;cursor:pointer}
.tutorial-link:focus-visible,.tutorial-x:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.tutorial-overlay{position:fixed;inset:0;z-index:1000;background:#060817df;display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
.tutorial-dialog{width:min(440px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:20px;background:#191e34;padding:18px;display:flex;flex-direction:column;gap:13px;box-shadow:0 24px 75px #000b}
.tutorial-top{gap:10px}.tutorial-x{min-height:32px;padding:5px 10px}.tutorial-dialog h2{font-size:clamp(21px,5vw,26px);line-height:1.18}
.tutorial-video{width:auto;max-width:100%;height:min(45dvh,420px);align-self:center;border:1px solid var(--line);border-radius:12px;background:#070814;object-fit:contain}
.tutorial-caption{font-size:14px;line-height:1.5;color:var(--txt)}.tutorial-dots{display:flex;justify-content:center;gap:8px;margin:0 0 2px}.tutorial-dot{height:7px;width:7px;background:#646984;border-radius:50%}.tutorial-dot.active{background:var(--accent);width:20px;border-radius:8px}
.tutorial-buttons{gap:12px}.tutorial-buttons .btn{flex:1}
@media(max-height:650px){.tutorial-dialog{gap:8px;padding:12px}.tutorial-video{height:35dvh}}


/* Tracks of Time brand: existing vinyl-and-tracks artwork, sized for host and team interfaces. */
.brand{display:flex;align-items:center;min-width:0;flex:0 1 auto;line-height:1}
.brand-image{display:block;width:clamp(210px,29vw,340px);max-width:100%;height:auto;object-fit:contain;object-position:left center}
.topbar{min-width:0;align-items:center}
.topbar > .tag,.topbar > .actions{flex:0 0 auto}
.mobile .brand-image{width:clamp(170px,52vw,245px)}
.player-hero .small-note{margin-top:10px}
@media(max-width:420px){
  .mobile .topbar{gap:8px}
  .mobile .brand-image{width:clamp(145px,51vw,210px)}
  .mobile .topbar .tag{font-size:10px;padding:7px 9px;letter-spacing:.04em}
}
@media(max-width:340px){
  .mobile .brand-image{width:145px}
  .mobile .topbar .tag{font-size:9px;padding:6px 7px}
}

/* Public multi-room landing page: host access is created privately per party. */
.landing{max-width:920px}.landing-hero{padding:45px 0}.landing-hero p{font-size:17px}
.landing-choices .card{min-height:295px}.landing-choices .card .help{flex:1;font-size:14px}
.code-input{font-family:"Space Grotesk",monospace;font-weight:800;letter-spacing:.2em;text-transform:uppercase;font-size:20px}
.landing-message{min-height:22px;text-align:center;margin-top:20px;color:var(--accent)}
.room-code-tag{font-family:"Space Grotesk",monospace;letter-spacing:.13em}
.host-recovery{word-break:break-all}
@media(max-width:600px){.landing-choices{grid-template-columns:1fr!important}.landing-choices .card{min-height:unset}.landing-hero{padding:22px 0 30px}}
/* Hosts return without needing to save a private recovery URL. */
#resume-games[hidden]{display:none}
.resume-games{margin-top:22px}
.resume-game-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 15px;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
.resume-game-info{display:flex;flex-direction:column;gap:5px;min-width:0}
.resume-game-info span{color:var(--muted);font-size:13px}
@media(max-width:480px){.resume-game-row{flex-direction:column;align-items:stretch}.resume-game-row button{width:100%}}