:root{
  color-scheme:light;
  --ink:#102c38;--ink-2:#27434e;--muted:#65767b;--paper:#f6f3ed;--card:#fffdfa;
  --teal:#0c7f80;--aqua:#55d1c9;--coral:#ff7058;--yellow:#f6c85b;--line:#d9dfda;
  --shadow:0 20px 55px rgba(16,44,56,.11);--soft-shadow:0 12px 30px rgba(16,44,56,.08);
  --radius:28px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
img,svg,canvas,audio{max-width:100%}
html{min-width:0;background:var(--paper);scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;min-width:0;max-width:100%;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
[hidden]{display:none!important}
.skip-link{position:fixed;left:12px;top:-80px;z-index:200;padding:12px 16px;background:#fff;color:var(--ink);border-radius:12px}.skip-link:focus{top:calc(10px + var(--safe-top))}
:focus-visible{outline:3px solid #0b7eae;outline-offset:3px}
.topbar{position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:18px;height:calc(72px + var(--safe-top));padding:var(--safe-top) clamp(18px,5vw,60px) 0;background:rgba(246,243,237,.92);border-bottom:1px solid rgba(16,44,56,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand-button{display:flex;align-items:center;gap:11px;padding:0;border:0;background:none;text-align:left}.brand-button>span:last-child{display:grid;line-height:1.02}.brand-button strong{font-size:1.05rem;letter-spacing:-.03em}.brand-button small{margin-top:4px;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.brand-mark{position:relative;width:42px;height:42px;flex:none;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 3px rgba(255,255,255,.16)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;border-radius:50%;border:2px solid rgba(255,255,255,.78);inset:9px}.brand-mark:after{inset:15px;background:var(--coral);border:0}.brand-mark i{position:absolute;z-index:2;width:22px;height:3px;right:-4px;top:9px;background:var(--aqua);border-radius:3px;transform:rotate(-38deg);transform-origin:right}.brand-mark b{position:absolute;z-index:2;width:4px;height:18px;right:6px;top:5px;background:var(--aqua);border-radius:3px;transform:rotate(25deg)}
.top-actions{display:flex;align-items:center;gap:10px}.icon-action,.avatar-action,.round-button{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(16,44,56,.12);border-radius:50%;background:var(--card);font-weight:800;box-shadow:0 6px 16px rgba(16,44,56,.06)}.avatar-action{background:var(--ink);border-color:var(--ink);color:#fff;font-size:.73rem}.icon-action{font-size:1.35rem}
main{width:100%;min-width:0}.view{width:100%;min-width:0;padding-bottom:calc(72px + var(--safe-bottom))}.library-view{padding-top:0}.narrow-view{width:min(780px,100%);margin:0 auto;padding:30px 20px calc(80px + var(--safe-bottom))}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;min-height:500px;padding:clamp(56px,8vw,100px) max(22px,calc((100vw - 1180px)/2));overflow:hidden;background:linear-gradient(125deg,#0d2834 5%,#0c5260 56%,#0d7374);color:#fff}
.hero:before{content:"";position:absolute;z-index:-1;width:660px;height:660px;right:-240px;top:-310px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.018)}
.hero-copy{position:relative;z-index:2;max-width:630px}.hero h1,.page-heading h1{margin:8px 0 18px;font-size:clamp(2.75rem,7vw,5.7rem);line-height:.93;letter-spacing:-.075em}.hero h1 em{color:var(--aqua);font-family:Georgia,serif;font-weight:500}.hero-copy>p:not(.eyebrow){max-width:590px;margin:0;color:rgba(255,255,255,.77);font-size:clamp(1rem,2vw,1.19rem)}
.eyebrow{margin:0;color:var(--teal);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.eyebrow.light{color:var(--aqua)}.eyebrow.warning{color:#b6402e}
.hero-actions,.inline-actions,.dialog-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 22px;border:1px solid transparent;border-radius:999px;background:var(--card);font-weight:850;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.button:hover{transform:translateY(-2px)}.button.coral{background:var(--coral);color:#182d34;box-shadow:0 10px 28px rgba(255,112,88,.25)}.button.glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}.button.dark{background:var(--ink);color:#fff}.button.outline{background:transparent;border-color:rgba(16,44,56,.22)}.button.wide{width:100%;min-height:56px}.small-button{padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:800}.text-button,.link-button{padding:7px;border:0;background:none;color:var(--teal);font-weight:850}.link-button.light{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px}
.hero-record{position:relative;justify-self:center;width:min(380px,36vw);aspect-ratio:1}.vinyl{position:absolute;inset:6%;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#122834 0 2px,#1a3d48 3px 6px,#122834 7px 9px);box-shadow:0 38px 70px rgba(0,0,0,.28);animation:spin 14s linear infinite}.vinyl:before{content:"";width:39%;height:39%;border-radius:50%;background:var(--coral);box-shadow:inset 0 0 0 16px rgba(255,255,255,.12)}.vinyl i{position:absolute;width:7%;height:7%;border-radius:50%;background:var(--paper)}.needle{position:absolute;width:46%;height:14px;right:-2%;top:14%;border-radius:14px;background:linear-gradient(90deg,#cde4df,var(--aqua));transform:rotate(40deg);transform-origin:right}.needle:after{content:"";position:absolute;right:-17px;top:-17px;width:46px;height:46px;border-radius:50%;background:#d8eee8}.year{position:absolute;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);font-size:.72rem;font-weight:850;backdrop-filter:blur(9px)}.y1{left:-10%;top:25%}.y2{right:-7%;bottom:20%}.y3{left:4%;bottom:3%}
@keyframes spin{to{transform:rotate(360deg)}}
.content-section{width:min(1180px,100%);margin:0 auto;padding:64px 24px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading h2,.maker-callout h2,.panel h2{margin:5px 0 0;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.05;letter-spacing:-.05em}
.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mode-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;min-width:0;padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--card);text-align:left;box-shadow:var(--soft-shadow)}.mode-card>span:nth-child(2){min-width:0;display:grid}.mode-card strong{font-size:1rem}.mode-card small{overflow:hidden;color:var(--muted);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.mode-card>b{font-size:1.2rem}.mode-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:#dff4ef;color:var(--teal);font-size:1.35rem;font-weight:900}.mode-icon.pass{background:#fff0db;color:#9b5b12}.mode-icon.teams{background:#efe5fa;color:#6d3d94}
.deck-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,290px);gap:16px;max-width:100%;overflow-x:auto;padding:2px 24px 18px 2px;scroll-snap-type:x proximity;scrollbar-width:thin;overscroll-behavior-inline:contain}.deck-card{position:relative;isolation:isolate;min-height:310px;overflow:hidden;padding:22px;border:0;border-radius:26px;background:var(--deck,#176e70);color:#fff;text-align:left;scroll-snap-align:start;box-shadow:var(--soft-shadow)}.deck-card:before,.deck-card:after{content:"";position:absolute;z-index:-1;border-radius:50%;border:1px solid rgba(255,255,255,.23)}.deck-card:before{width:240px;height:240px;right:-115px;top:-55px;box-shadow:0 0 0 34px rgba(255,255,255,.035)}.deck-card:after{width:90px;height:90px;right:36px;top:20px;background:repeating-radial-gradient(circle,rgba(5,25,30,.65) 0 2px,rgba(255,255,255,.08) 3px 5px);border:8px solid rgba(255,255,255,.14)}.deck-card .deck-top{display:flex;justify-content:space-between;align-items:center}.deck-card .deck-count{padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.15);font-size:.7rem;font-weight:850}.deck-card .deck-note{font-size:1.35rem}.deck-card .deck-copy{position:absolute;left:22px;right:22px;bottom:22px}.deck-card h3{max-width:220px;margin:8px 0 7px;font-size:1.75rem;line-height:1;letter-spacing:-.045em}.deck-card p{margin:0;color:rgba(255,255,255,.72);font-size:.84rem}.deck-card .deck-range{display:block;margin-top:15px;font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.maker-callout{display:grid;grid-template-columns:250px 1fr;align-items:center;gap:40px;margin-top:64px;padding:40px;border-radius:34px;background:#e4efeb}.maker-callout>div:last-child{max-width:690px}.maker-callout p:not(.eyebrow){color:var(--muted)}.maker-art{position:relative;height:210px;border-radius:26px;background:var(--ink);overflow:hidden}.maker-art span{position:absolute;z-index:2;left:38%;top:28%;color:var(--coral);font-size:4.5rem}.maker-art:before,.maker-art:after,.maker-art i,.maker-art b{content:"";position:absolute;border:1px solid rgba(85,209,201,.4);border-radius:50%}.maker-art:before{width:170px;height:170px;left:-40px;top:20px}.maker-art:after{width:110px;height:110px;right:-30px;top:-25px}.maker-art i{width:220px;height:220px;right:-80px;bottom:-170px}.maker-art b{width:80px;height:80px;left:42%;top:32%;border-width:10px;border-color:rgba(255,255,255,.1)}
.custom-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.custom-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--card)}.custom-card .cover{display:grid;place-items:center;width:60px;height:60px;border-radius:17px;background:var(--ink);color:var(--aqua);font-size:1.5rem}.custom-card>span{min-width:0;display:grid}.custom-card strong,.custom-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-card small{color:var(--muted)}.custom-card button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:#edf2ef;font-weight:900}.custom-card-actions{grid-auto-flow:column;gap:6px}.empty-state{display:grid;justify-items:center;padding:34px;border:1px dashed #bcc8c3;border-radius:24px;text-align:center}.empty-state>span{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#e4efeb;color:var(--teal);font-size:1.6rem}.empty-state h3{margin:13px 0 2px}.empty-state p{max-width:480px;margin:0 0 18px;color:var(--muted)}
.back-button{margin:5px 0 22px;padding:8px 0;border:0;background:none;color:var(--teal);font-weight:850}.page-heading{margin-bottom:28px}.page-heading h1{margin:6px 0 12px;font-size:clamp(2.45rem,8vw,4.7rem)}.page-heading>p:last-child{max-width:650px;margin:0;color:var(--muted);font-size:1.06rem}.panel{min-width:0;padding:clamp(20px,4vw,34px);border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--soft-shadow)}
fieldset{min-width:0;margin:0 0 24px;padding:0;border:0}legend,.field>span,#playersLabel{display:block;margin-bottom:8px;font-size:.77rem;font-weight:850;letter-spacing:.04em}.segmented{display:grid;padding:4px;border-radius:15px;background:#edf1ee}.segmented.three{grid-template-columns:repeat(3,1fr)}.segmented label{min-width:0}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:block;padding:10px 7px;border-radius:11px;text-align:center;font-size:.86rem;font-weight:800}.segmented input:checked+span{background:#fff;box-shadow:0 4px 12px rgba(16,44,56,.1)}
.segmented input:focus-visible+span,.option-cards input:focus-visible+span{outline:3px solid #0b7eae;outline-offset:3px}
.field{display:block;min-width:0;margin-bottom:20px}.field input,.field select,.field textarea,.mini-field select{width:100%;min-width:0;border:1px solid #cdd6d1;border-radius:14px;background:#fff;padding:13px 14px}.field textarea{resize:vertical}.field small{display:block;margin-top:6px;color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.player-inputs{display:grid;gap:8px}.player-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px}.player-row input{min-width:0;border:1px solid #cdd6d1;border-radius:13px;padding:12px}.player-row button{border:0;border-radius:13px;background:#f5e7e3;color:#a03929}.check-row{display:flex;align-items:flex-start;gap:12px;margin:18px 0;padding:15px;border:1px solid var(--line);border-radius:16px}.check-row input{width:20px;height:20px;margin-top:2px;accent-color:var(--teal)}.check-row span{display:grid}.check-row small{color:var(--muted)}
.game-view{min-height:calc(100dvh - 72px);padding-bottom:0;background:#eaf0ed}.game-header{position:sticky;top:calc(72px + var(--safe-top));z-index:30;display:grid;grid-template-columns:48px 1fr 65px;align-items:center;gap:12px;padding:12px clamp(14px,4vw,30px);background:rgba(246,243,237,.93);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.game-header>div{display:grid;text-align:center}.game-header span{font-size:.75rem;color:var(--muted);font-weight:750}.game-header strong{font-size:.94rem}.score-chip{display:grid;justify-items:center;padding:7px;border:0;border-radius:15px;background:var(--ink);color:#fff}.score-chip span{color:#fff;font-size:1rem}.score-chip small{font-size:.6rem}.game-stage{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);min-height:calc(100dvh - 145px)}
.mystery-player{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;padding:45px 25px;background:linear-gradient(155deg,#102c38,#0b676c);color:#fff;text-align:center}.mystery-player h1{margin:5px 0 7px;font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.055em}.mystery-player>p:not(.eyebrow){max-width:400px;margin:0;color:rgba(255,255,255,.68)}.mystery-art{position:relative;width:min(230px,55vw);aspect-ratio:1;margin-bottom:28px}.mystery-art .record{position:absolute;inset:11%;display:grid;place-items:center;border-radius:50%;background:repeating-radial-gradient(circle,#0b2029 0 3px,#24414a 4px 7px);box-shadow:0 25px 50px rgba(0,0,0,.35);animation:spin 12s linear infinite}.mystery-art .record:after{content:"?";display:grid;place-items:center;width:37%;height:37%;border-radius:50%;background:var(--coral);color:var(--ink);font-size:2.4rem;font-weight:950}.pulse{position:absolute;inset:0;border:1px solid rgba(85,209,201,.25);border-radius:50%;animation:pulse 2.4s ease-out infinite}.pulse.p2{animation-delay:.8s}.pulse.p3{animation-delay:1.6s}@keyframes pulse{0%{transform:scale(.65);opacity:.2}60%{opacity:.65}100%{transform:scale(1.12);opacity:0}}.player-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px}.play-button{display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;background:var(--coral);color:var(--ink);font-size:1.35rem;box-shadow:0 10px 25px rgba(0,0,0,.23)}
.timeline-panel{min-width:0;padding:clamp(22px,5vw,58px);overflow:hidden}.timeline-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:22px}.timeline-heading h2{margin:3px 0 0;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.05em}.challenge-hint{max-width:620px;margin:7px 0 0;color:var(--muted)}.round-guess{max-width:520px;margin:8px auto 24px}.round-guess input,.round-guess select{min-height:58px;font-size:1.05rem}.mini-field{width:125px;font-size:.7rem;font-weight:850}.mini-field span{display:block;margin-bottom:4px}.mini-field select{padding:9px}.timeline{position:relative;display:grid;min-width:0;gap:8px;margin:0 0 22px;padding:5px 0}.timeline:before{content:"";position:absolute;z-index:0;left:23px;top:15px;bottom:15px;width:3px;border-radius:3px;background:linear-gradient(var(--aqua),var(--coral))}.timeline-card,.timeline-gap{position:relative;z-index:1;width:100%;min-width:0}.timeline-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:13px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 7px 18px rgba(16,44,56,.06)}.timeline-card .year-bubble{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:900}.timeline-card>span:last-child{min-width:0;display:grid}.timeline-card strong,.timeline-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.timeline-card small{color:var(--muted)}.timeline-gap{min-height:42px;padding-left:57px;border:0;background:none;text-align:left}.timeline-gap span{display:inline-block;padding:8px 12px;border:1px dashed #8ca4a0;border-radius:999px;background:#f6faf7;color:var(--teal);font-size:.75rem;font-weight:850}.timeline-gap.selected span{border-style:solid;background:var(--coral);border-color:var(--coral);color:var(--ink)}.privacy-curtain{position:fixed;z-index:100;inset:calc(72px + var(--safe-top)) 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at 70% 20%,#167477,#102c38 65%);color:#fff;text-align:center}.privacy-curtain h2{margin:7px 0;font-size:clamp(2.4rem,10vw,5rem);line-height:1;letter-spacing:-.06em}.privacy-curtain>p:not(.eyebrow){max-width:450px;color:rgba(255,255,255,.7)}.curtain-icon{display:grid;place-items:center;width:80px;height:80px;margin-bottom:20px;border:1px solid rgba(255,255,255,.25);border-radius:27px;background:rgba(255,255,255,.08);font-size:2.5rem}
.import-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:20px;padding:4px;border-radius:15px;background:#edf1ee}.import-tabs button{min-width:0;padding:10px 6px;border:0;border-radius:11px;background:none;font-weight:800;overflow-wrap:anywhere}.import-tabs button.active{background:#fff;box-shadow:0 4px 12px rgba(16,44,56,.1)}.drop-zone{display:grid;justify-items:center;padding:36px 18px;border:2px dashed #afc1bb;border-radius:20px;text-align:center}.drop-zone input,.file-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-zone>span{font-size:2rem;color:var(--teal)}.drop-zone small{color:var(--muted)}.privacy-box,.pdf-notice{display:flex;gap:12px;padding:15px;border-radius:16px;background:#eef6f3}.privacy-box{display:block;margin-bottom:18px}.privacy-box p,.support-copy{margin:3px 0 0;color:var(--muted);font-size:.87rem}.import-preview{display:flex;justify-content:space-between;gap:15px;align-items:center;min-width:0;margin:14px 0;padding:15px;border-radius:15px;background:#edf6f2}.import-preview>div{display:grid;min-width:0}.import-preview small,.status-line{overflow-wrap:anywhere}.import-preview small{color:var(--muted)}.audio-match-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.audio-match-panel p{margin-bottom:0;color:var(--muted)}.file-button{position:relative;flex:none}.status-line{min-height:1.4em;color:var(--muted)}
.track-studio{min-width:0;margin:26px 0;padding-top:24px;border-top:1px solid var(--line)}.track-studio-heading{display:flex;align-items:end;justify-content:space-between;gap:16px}.track-studio-heading h2{margin:4px 0 0}.count-chip{flex:none;padding:6px 10px;border-radius:999px;background:#e4efeb;color:var(--teal);font-size:.75rem}.manual-track-grid{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px;padding:16px;border-radius:18px;background:#f1f5f2}.manual-track-grid .field{min-width:0;margin:0}.manual-track-grid .manual-link{grid-column:1/3}.manual-track-grid>.button{align-self:end;min-width:0;border-radius:14px}.track-editor-list{display:grid;gap:10px;min-width:0;margin:14px 0 0;padding:0;list-style:none}.track-editor-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start;min-width:0;padding:12px;border:1px solid var(--line);border-radius:17px;background:#fff}.track-editor-row.invalid{border-color:#c8533d;background:#fff8f6}.track-order{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:900}.track-edit-fields{display:grid;grid-template-columns:86px minmax(120px,1fr) minmax(140px,1.2fr);gap:8px;min-width:0}.track-edit-fields label{display:grid;min-width:0;gap:4px}.track-edit-fields label>span{font-size:.67rem;font-weight:850;color:var(--muted)}.track-edit-fields input{width:100%;min-width:0;padding:9px 10px;border:1px solid #cdd6d1;border-radius:11px}.track-edit-fields .track-link-field{grid-column:1/-1}.track-row-actions{display:grid;grid-template-columns:repeat(3,40px);gap:5px}.track-row-actions button{min-width:40px;min-height:40px;border:0;border-radius:11px;background:#edf2ef;font-weight:900}.track-row-actions button.danger,.danger-button{color:#9d3828;border-color:#d8a69c}.track-row-actions button:disabled{opacity:.35;cursor:not-allowed}.track-error{grid-column:2/-1;min-height:1em;color:#a13f30;font-weight:750}.editor-actions,.preset-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.editor-actions .button{flex:1}.danger-text{color:#a13f30}
.workflow-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 24px;padding:0;list-style:none}.workflow-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px;border-radius:15px;background:#edf6f2}.workflow-steps b{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--ink);color:#fff}.workflow-steps span{display:grid}.workflow-steps small{color:var(--muted)}
.spotify-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;padding:0;list-style:none}.spotify-flow li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:11px;border:1px solid var(--line);border-radius:14px;background:#fff}.spotify-flow b{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;background:var(--teal);color:#fff}.spotify-flow span{display:grid}.spotify-flow small{color:var(--muted)}.spotify-connect-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 16px}.spotify-url-route{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:#f7f9f7}.spotify-url-route h3{margin:0 0 14px}.spotify-url-route .privacy-box.compact{margin:15px 0 0;background:#edf6f2}.spotify-export-fallback{margin:18px 0;padding:13px;border:1px solid var(--line);border-radius:14px;background:#f7f9f7}.spotify-export-fallback summary{cursor:pointer;font-weight:850}.spotify-export-fallback[open] summary{margin-bottom:14px}
.option-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.option-cards label{position:relative}.option-cards input{position:absolute;opacity:0}.option-cards span{display:grid;height:100%;padding:15px;border:1px solid var(--line);border-radius:16px}.option-cards small{color:var(--muted)}.option-cards input:checked+span{border-color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal);background:#eff8f4}.pdf-notice{align-items:flex-start;margin:20px 0}.pdf-notice>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-weight:900}.pdf-notice p{margin:0;font-size:.85rem}
.preset-actions{margin:20px 0}.preset-actions .status-line{flex:1;min-width:180px;margin:0}.control-disabled{opacity:.48}.pdf-preview{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);align-items:center;gap:24px;margin:22px 0;padding:20px;border:1px solid var(--line);border-radius:20px;background:#f4f7f4}.paper-preview{width:100%;aspect-ratio:210/297;padding:10px;border:1px solid #bfc9c4;background:#fff;box-shadow:0 10px 25px rgba(16,44,56,.12)}.paper-grid{display:grid;height:100%;gap:4px}.paper-grid.cols-3{grid-template-columns:repeat(3,1fr)}.paper-grid.cols-2{grid-template-columns:repeat(2,1fr)}.paper-grid span{display:grid;place-items:center;min-width:0;border:1px dashed #91a7a1;border-radius:3px;background:#f7faf8;color:var(--teal);font-size:.62rem;font-weight:900}.pdf-summary{min-width:0}.pdf-summary h2{margin:5px 0 8px}.pdf-summary p{color:var(--muted)}.pdf-summary ul{display:grid;gap:7px;margin:12px 0 0;padding-left:20px;color:var(--ink);font-size:.86rem}
.print-guide{margin:20px 0;padding:18px;border:2px solid var(--ink);border-radius:18px;background:#fff}.print-guide h2{margin:4px 0 10px}.print-guide ol{display:grid;gap:7px;margin:0;padding-left:22px}.flip-instruction{margin:14px 0 0;padding:10px 12px;border-left:5px solid var(--ink);background:#eef2ef;font-weight:800}
.steps-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.steps-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--card)}.steps-list li>span{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--ink);color:var(--aqua);font-size:1.2rem;font-weight:900}.steps-list h2{margin:1px 0 4px;font-size:1.3rem}.steps-list p{margin:0;color:var(--muted)}.strict-note{margin-top:18px}.strict-note p:last-child{color:var(--muted)}.settings-list{padding:8px}.settings-list a,.settings-list button{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:14px;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;text-align:left;text-decoration:none}.settings-list>*:last-child{border-bottom:0}.settings-list span:nth-child(2){display:grid;min-width:0}.settings-list small{color:var(--muted)}.setting-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#e4efeb;font-weight:900}.setting-icon.danger{background:#f9e6e0;color:#a13f30}
dialog{max-width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 30px);overflow:auto;padding:0;border:0;border-radius:28px;background:transparent;box-shadow:0 30px 90px rgba(0,0,0,.3)}dialog::backdrop{background:rgba(8,30,38,.7);backdrop-filter:blur(4px)}.dialog-card,.reveal-card{position:relative;padding:clamp(23px,5vw,36px);background:var(--card)}.dialog-card h2{margin:5px 0 10px;font-size:2rem;line-height:1;letter-spacing:-.05em}.dialog-card>p:not(.eyebrow){color:var(--muted)}.dialog-close{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:#edf1ee;font-size:1.4rem}.reveal-dialog{width:min(480px,calc(100% - 28px))}.reveal-card{text-align:center}.result-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:#dff4e8;color:#16623d;font-size:.7rem;font-weight:950;letter-spacing:.11em}.result-badge.wrong{background:#fae5df;color:#9d3828}.reveal-year{margin:20px 0 2px;font-family:Georgia,serif;font-size:clamp(4.5rem,20vw,8rem);font-weight:700;line-height:.8;color:var(--teal);letter-spacing:-.08em}.reveal-card h2{margin:5px 0 2px;font-size:2.25rem;line-height:1;letter-spacing:-.055em}.reveal-card>p:not(.eyebrow){margin:0;color:var(--muted);font-size:1.1rem}.points-line{margin:22px 0;padding:12px;border-radius:14px;background:#edf6f2;font-weight:900}.score-list{display:grid;gap:8px;margin-top:18px}.score-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#f0f3ef}.score-row span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;font-size:.75rem}.toast{position:fixed;z-index:150;left:50%;bottom:calc(22px + var(--safe-bottom));transform:translateX(-50%);max-width:min(520px,calc(100% - 28px));padding:12px 17px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);font-weight:750;text-align:center}
.host-room-panel{margin-top:18px}.host-code-block{display:grid;justify-items:center;padding:22px;border-radius:20px;background:var(--ink);color:#fff;text-align:center}.host-code-block .eyebrow{color:var(--aqua)}.host-code-block strong{max-width:100%;font-size:clamp(2.3rem,12vw,5rem);line-height:1;letter-spacing:.14em;overflow-wrap:anywhere}.host-code-block small{margin-top:8px;color:rgba(255,255,255,.62)}.host-private-banner{display:flex;align-items:flex-start;gap:13px;margin:16px 0;padding:15px;border-radius:17px;background:#fff0db}.host-private-banner>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:12px;background:var(--yellow)}.host-private-banner p{margin:2px 0 0;color:var(--muted);font-size:.84rem}.host-status-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:24px}.host-status-head h2{margin:3px 0 0}.host-connection{display:grid;justify-items:end;gap:7px}.state-chip{padding:7px 10px;border-radius:999px;background:#dff4e8;color:#16623d;font-size:.72rem;font-weight:850}.state-chip.connecting{background:#fff0db;color:#815312}.state-chip.offline{background:#fae5df;color:#9d3828}.host-empty{display:grid;justify-items:center;padding:28px 12px;text-align:center;color:var(--muted)}.host-empty>span{font-size:2rem}.host-empty p{max-width:470px}.host-queue-list{display:grid;gap:7px;margin:14px 0;padding:0;list-style:none}.host-queue-list li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#edf2ef}.host-queue-list li.active{background:#fff0db;box-shadow:inset 0 0 0 1px #e4b44e}.host-queue-list li.completed{background:#e5f4ef}.host-queue-list li>span{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:900}.host-queue-list small{color:var(--muted);text-align:right}.host-round-card{padding:18px;border:1px solid var(--line);border-radius:21px;background:#f7faf8}.host-mystery{display:flex;align-items:center;gap:13px}.host-mystery>span:last-child{display:grid;min-width:0}.host-mystery small{color:var(--muted);overflow-wrap:anywhere}.record-mini{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:50%;background:repeating-radial-gradient(circle,#102c38 0 2px,#28454e 3px 5px);color:var(--coral);font-size:1.4rem;font-weight:900}.host-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:18px}.host-answer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:16px;padding:15px;border-radius:16px;background:#e5f4ef}.host-answer>span{font-family:Georgia,serif;font-size:2.5rem;color:var(--teal);font-weight:800}.host-answer>div{display:grid;min-width:0}.host-answer strong,.host-answer small{overflow-wrap:anywhere}.host-answer small{color:var(--muted)}
.stats-panel,.achievements-panel,.history-panel{margin-bottom:18px}.section-heading.compact{margin-bottom:18px}.stats-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.stats-overview>div{display:grid;justify-items:center;padding:15px 8px;border-radius:16px;background:#edf6f2;text-align:center}.stats-overview strong{font-size:1.65rem;color:var(--teal)}.stats-overview span{color:var(--muted);font-size:.72rem;font-weight:800}.stats-panel h3{margin:24px 0 10px;font-size:1rem}.stat-breakdown,.deck-stats,.achievement-list,.history-list{display:grid;gap:8px}.stat-breakdown article,.deck-stats article,.history-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#f0f3ef}.stat-breakdown article{grid-template-columns:minmax(0,1fr) auto}.stat-breakdown article>span{grid-column:1;color:var(--muted);font-size:.78rem}.stat-breakdown article>b{grid-column:2;grid-row:1/3;font-size:.78rem}.deck-stats article>span,.history-list li>span{display:grid;min-width:0}.deck-stats small,.history-list small{color:var(--muted);overflow-wrap:anywhere}.deck-stats b,.history-list b{white-space:nowrap}.achievement-list{grid-template-columns:repeat(2,minmax(0,1fr))}.achievement{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:13px;border:1px solid var(--line);border-radius:16px;opacity:.55}.achievement.unlocked{border-color:#83b9aa;background:#edf7f2;opacity:1}.achievement>span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#dfe6e2;font-weight:900}.achievement.unlocked>span{background:var(--teal);color:#fff}.achievement>div{display:grid;min-width:0}.achievement small{color:var(--muted)}.achievement>b{grid-column:2;color:var(--teal);font-size:.7rem}.history-list{margin:12px 0 0;padding:0;list-style:none}.empty-copy{margin:0;color:var(--muted)}
@media(max-width:820px){
  .hero{grid-template-columns:1fr;min-height:520px;padding-top:62px;padding-bottom:62px}.hero-record{position:absolute;z-index:0;width:330px;right:-150px;bottom:-90px;opacity:.42}.hero-copy{z-index:1}.hero h1{max-width:560px}
  .mode-grid{grid-template-columns:1fr}.maker-callout{grid-template-columns:160px 1fr;gap:24px}.custom-decks{grid-template-columns:1fr}.game-stage{grid-template-columns:1fr}.mystery-player{min-height:430px}.game-header{top:calc(72px + var(--safe-top))}.audio-match-panel{align-items:flex-start;flex-direction:column}.audio-match-panel .file-button{width:100%}
}
@media(max-width:600px){
  .topbar{height:calc(64px + var(--safe-top));padding-left:14px;padding-right:14px}.brand-mark{width:38px;height:38px}.brand-button small{display:none}.top-actions{gap:7px}.icon-action,.avatar-action{width:40px;height:40px}
  .hero{min-height:510px;padding:52px 20px 56px}.hero-copy>p:not(.eyebrow){font-size:.97rem}.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hero-actions .button{padding:12px 10px}.content-section{padding:48px 16px 0}.featured-section{padding-top:42px}.section-heading{align-items:center}.section-heading h2{font-size:1.9rem}.deck-rail{grid-auto-columns:78vw;margin-right:-16px;padding-right:28px}.maker-callout{grid-template-columns:1fr;margin:48px 16px 0;padding:20px}.maker-art{height:145px}.inline-actions{display:grid;grid-template-columns:1fr 1fr}.custom-decks{gap:10px}.narrow-view{padding:22px 14px calc(70px + var(--safe-bottom))}.page-heading h1{font-size:2.55rem}.panel{padding:19px;border-radius:22px}.form-grid,.option-cards{grid-template-columns:1fr}.segmented span{font-size:.78rem;padding-inline:3px}.import-tabs button{font-size:.78rem}.check-row{padding:13px}.game-view{min-height:calc(100dvh - 64px)}.game-header{top:calc(64px + var(--safe-top));grid-template-columns:42px 1fr 58px;padding:9px 11px}.game-header .round-button{width:40px;height:40px}.game-stage{min-height:auto}.mystery-player{min-height:400px;padding:34px 16px}.mystery-art{width:165px;margin-bottom:17px}.mystery-player h1{font-size:2.25rem}.timeline-panel{padding:24px 14px 40px}.timeline-heading{align-items:flex-start}.mini-field{width:112px}.privacy-curtain{inset:calc(64px + var(--safe-top)) 0 0}.audio-match-panel{padding:18px}.steps-list li{padding:17px;gap:13px}.steps-list li>span{width:42px;height:42px}.reveal-card h2{font-size:1.9rem}
}
@media(max-width:600px){.host-action-grid{grid-template-columns:1fr}.host-code-block strong{font-size:2.8rem}.host-status-head{align-items:flex-start}.hero-actions{grid-template-columns:1fr 1fr}.hero-actions .button:last-child{grid-column:1/-1}}
@media(max-width:720px){
  .manual-track-grid{grid-template-columns:90px minmax(0,1fr)}.manual-track-grid .field:nth-child(3),.manual-track-grid .manual-link{grid-column:1/-1}.manual-track-grid>.button{grid-column:1/-1;width:100%}
  .track-editor-row{grid-template-columns:32px minmax(0,1fr)}.track-edit-fields{grid-template-columns:82px minmax(0,1fr)}.track-edit-fields label:nth-child(3),.track-edit-fields .track-link-field{grid-column:1/-1}.track-row-actions{grid-column:2;grid-row:2}.track-error{grid-column:2}.pdf-preview{grid-template-columns:130px minmax(0,1fr)}
  .achievement-list{grid-template-columns:1fr}.stats-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.host-answer{grid-template-columns:auto minmax(0,1fr)}.host-answer .small-button{grid-column:1/-1;width:100%}
}
@media(max-width:480px){
  .custom-card{grid-template-columns:46px minmax(0,1fr)}.custom-card .cover{width:46px;height:46px}.custom-card-actions{grid-column:1/-1;justify-content:end}.workflow-steps,.spotify-flow{grid-template-columns:1fr}.spotify-connect-actions{display:grid;grid-template-columns:1fr}.spotify-connect-actions>*{width:100%}.manual-track-grid,.track-edit-fields{grid-template-columns:1fr}.manual-track-grid .field,.manual-track-grid .field:nth-child(3),.manual-track-grid .manual-link,.track-edit-fields label,.track-edit-fields label:nth-child(3),.track-edit-fields .track-link-field{grid-column:1}.track-editor-row{grid-template-columns:28px minmax(0,1fr);padding:10px}.track-order{width:28px;height:28px}.track-row-actions{grid-template-columns:repeat(3,minmax(44px,1fr));width:100%}.editor-actions{display:grid;grid-template-columns:1fr;width:100%}.pdf-preview{grid-template-columns:1fr}.paper-preview{width:min(190px,70vw);justify-self:center}.preset-actions{align-items:stretch;flex-direction:column}.preset-actions>*{width:100%}.host-status-head{display:grid}.host-connection{justify-items:start}.host-queue-list li{grid-template-columns:32px minmax(0,1fr)}.host-queue-list small{grid-column:2;text-align:left}.stats-panel .section-heading{display:grid;align-items:start}.stat-breakdown article{grid-template-columns:minmax(0,1fr)}.stat-breakdown article>b{grid-column:1;grid-row:auto}.deck-stats article,.history-list li{align-items:start}.host-answer{grid-template-columns:1fr;text-align:center}.host-answer>span{font-size:2.1rem}.host-answer .small-button{grid-column:1}
}
@media(max-width:370px){.hero-actions,.inline-actions{grid-template-columns:1fr}.hero-actions .button:last-child{grid-column:auto}.timeline-heading{display:grid}.mini-field{width:100%}.mode-card{padding:14px}.mode-icon{width:44px;height:44px}.deck-rail{grid-auto-columns:82vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(hover:hover){.mode-card:hover,.deck-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.mode-card,.deck-card{transition:transform .18s ease,box-shadow .18s ease}}
@media print{.topbar,.button,.back-button{display:none!important}body{background:#fff}.view{padding:0}.panel{border:0;box-shadow:none}}

.scan-page{min-height:100dvh;background:radial-gradient(circle at 50% -20%,#188087,#102c38 58%,#081c24);color:#fff}.scan-shell{display:grid;align-content:start;justify-items:center;min-height:100dvh;padding:calc(24px + var(--safe-top)) 16px calc(32px + var(--safe-bottom))}.scan-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.scan-brand>span:last-child{display:grid;line-height:1}.scan-brand small{margin-top:5px;color:rgba(255,255,255,.6);font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.scan-card{width:min(470px,100%);padding:clamp(23px,6vw,40px);border:1px solid rgba(255,255,255,.13);border-radius:32px;background:rgba(255,255,255,.96);box-shadow:0 40px 90px rgba(0,0,0,.32);color:var(--ink);text-align:center}.scan-card h1{margin:7px auto 10px;max-width:370px;font-size:clamp(2.1rem,9vw,3.4rem);line-height:.94;letter-spacing:-.06em}.scan-card>p:not(.eyebrow){margin:0 auto 24px;color:var(--muted)}.scan-record{position:relative;width:145px;height:145px;margin:0 auto 24px}.scan-record>span{position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,#102c38 0 3px,#28454e 4px 7px);animation:spin 12s linear infinite;box-shadow:0 20px 38px rgba(16,44,56,.2)}.scan-record>span:after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--coral)}.scan-record>b{position:absolute;z-index:2;inset:0;display:grid;place-items:center;color:var(--ink);font-size:2.2rem}.scan-form{margin:22px 0 10px;text-align:left}.scan-form .field{margin-bottom:10px}.scan-form input{text-align:center;text-transform:uppercase;font-weight:900;letter-spacing:.16em}.scan-card>.button{margin-top:9px}.scan-privacy{display:flex;align-items:flex-start;gap:10px;margin-top:24px;padding:13px;border-radius:15px;background:#e9f5f1;text-align:left}.scan-privacy>span{display:grid;place-items:center;flex:none;width:27px;height:27px;border-radius:50%;background:var(--teal);color:#fff;font-weight:900}.scan-privacy p{margin:0;font-size:.78rem;color:var(--muted)}

/* Houd het onderschrift bij de grote jaartal-onthulling leesbaar op smalle schermen. */
.reveal-card>.eyebrow{margin-top:14px}