:root{
    --bg:#1B1420;
    --surface:#251A2B;
    --surface-2:#2E2033;
    --line:#3C2C42;
    --gold:#D4A24E;
    --gold-dim:#8C6F3B;
    --red:#B33A3A;
    --green:#5C9163;
    --paper:#F3EADD;
    --muted:#9C8FA3;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--paper);
    font-family:'Work Sans',sans-serif;
    padding:2.5rem 1.5rem 4rem;
  }
  .wrap{max-width:720px;margin:0 auto;}
  .page-layout{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:1.5rem;
    max-width:1400px;
    margin:0 auto;
    padding:0 90px;
  }
  .ad-slot{
    display:none;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    background:var(--surface);
    border:1px dashed var(--line);
    border-radius:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    overflow:hidden;
  }
  .ad-slot-side{
    width:160px;
    height:600px;
    flex-shrink:0;
    position:sticky;
    top:2.5rem;
  }
  @media (min-width:1300px){
    .ad-slot-side{display:flex;}
  }
  .ad-slot-bottom{
    width:100%;
    max-width:728px;
    height:90px;
    margin:2.5rem auto 2rem;
  }
  .ad-slot-bottom{display:flex;}
  @media (max-width:480px){
    .ad-slot-bottom{height:50px;max-width:320px;}
  }
  h1{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:clamp(2rem,calc(5 * var(--vw, 1vw)),2.8rem);
    margin:0 0 .2rem;
    letter-spacing:-0.01em;
  }
  .tagline{color:var(--muted);font-size:.95rem;margin:0 0 2.2rem;}
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    padding:1.5rem;
    margin-bottom:1.5rem;
  }
  .card h2{
    font-family:'IBM Plex Mono',monospace;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--gold);
    margin:0 0 1rem;
  }
  textarea{
    width:100%;
    min-height:120px;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:.85rem;
    padding:.8rem;
    resize:vertical;
  }
  textarea::placeholder{color:var(--muted);}
  .hint{font-size:.78rem;color:var(--muted);margin-top:.5rem;line-height:1.5;}
  button{
    font-family:'Work Sans',sans-serif;
    font-weight:500;
    font-size:.85rem;
    padding:.65rem 1.1rem;
    border-radius:8px;
    border:1px solid var(--gold-dim);
    background:transparent;
    color:var(--gold);
    cursor:pointer;
    transition:background .15s, transform .1s;
  }
  button:hover{background:rgba(212,162,78,.1);}
  button:active{transform:scale(.97);}
  button.primary{background:var(--gold);color:#241A0B;border-color:var(--gold);}
  button.primary:hover{background:#e0b568;}
  button:disabled{opacity:.35;cursor:not-allowed;}
  button.danger{border-color:var(--red);color:#f0a3a3;}
  .row{display:flex;gap:.6rem;flex-wrap:wrap;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .tracklist{margin:0;padding:0;}
  .rules-h3{font-family:'Fraunces',serif;font-size:1.05rem;margin:1.2rem 0 .4rem;color:var(--paper);}
  .rules-h3-sub{font-family:'Fraunces',serif;font-size:.95rem;margin:1rem 0 .4rem;color:var(--gold);}
  .capture-title{font-family:'Fraunces',serif;font-weight:700;font-size:1.7rem;letter-spacing:-0.01em;color:var(--paper);}
  .capture-subtitle{font-family:'IBM Plex Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);margin-top:.2rem;}
  .tracklist .empty{color:var(--muted);font-size:.85rem;font-style:italic;}
  .plist-group{margin-bottom:0;}
  .plist-summary{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.6rem;
    padding:.7rem .9rem;
    background:var(--surface-2);
    border-radius:8px;
    border:1px solid var(--line);
    list-style:none;
    margin-bottom:.5rem;
  }
  .plist-summary::-webkit-details-marker{display:none;}
  .plist-summary::before{content:'▸';color:var(--gold);margin-right:.5rem;font-size:.75rem;transition:transform .15s;flex-shrink:0;}
  details[open] > .plist-summary::before{transform:rotate(90deg);}
  .plist-name{
    font-family:'Fraunces',serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--paper);
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .plist-meta{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    color:var(--muted);
    margin-left:.6rem;
    font-weight:400;
  }
  .plist-tracks{list-style:none;margin:.6rem 0 1.1rem;padding:0 0 0 1.4rem;max-height:24rem;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;}
  .plist-tracks::-webkit-scrollbar{display:none;}
  .footer-link{color:var(--muted);text-decoration:none;}
  .footer-link:hover{color:var(--gold);text-decoration:underline;}
  .plist-close-row-inline{cursor:pointer;}
  .plist-close-row-inline:hover .close-arrow{color:var(--gold);}
  .close-arrow{display:flex;justify-content:center;align-items:center;color:var(--muted);opacity:.6;}
  .plist-close-row-inline:hover .close-arrow{opacity:1;}
  .plist-tracks li{
    display:flex;align-items:center;gap:.8rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--line);
    font-size:.88rem;
  }
  .plist-tracks li:last-child{border-bottom:none;}
  .scoreboard-overlay{
    position:fixed;
    inset:0;
    background:var(--bg);
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .scoreboard-overlay.open{transform:translateX(0);}
  .scoreboard-panel{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem 4rem;}
  .scoreboard-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;gap:1rem;position:relative;}
  .sb-view-toggle{
    display:flex;
    gap:.4rem;
    background:var(--surface-2);
    border-radius:8px;
    padding:.25rem;
    flex-shrink:0;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  .filter-toggle{
    display:inline-flex;
    gap:.4rem;
    background:var(--surface-2);
    border-radius:8px;
    padding:.25rem;
    position:relative;
  }
  .toggle-slider{
    position:absolute;
    top:.25rem;
    bottom:.25rem;
    border-radius:6px;
    background:var(--gold);
    transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
    z-index:0;
  }
  .sb-view-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    padding:.4rem .9rem;
    border-radius:6px;
    border:none;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    position:relative;
    z-index:1;
    transition:color .2s ease;
  }
  .sb-view-btn.active{color:#241A0B;}
  .scoreboard-panel-header h2{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:clamp(1.8rem,calc(5 * var(--vw, 1vw)),2.6rem);
    margin:0;
    color:var(--paper);
  }
  #closeScoreboardBtn{
    background:transparent;
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:8px;
    width:42px;height:42px;
    padding:0;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    cursor:pointer;
    flex-shrink:0;
  }
  #closeScoreboardBtn:hover{background:var(--surface-2);}
  .scoreboard-add-row{display:flex;gap:.6rem;margin-bottom:2rem;}
  .scoreboard-add-row input{flex:1;margin-bottom:0;}
  .menu-trigger{
    position:fixed;
    top:1.4rem;
    right:1.6rem;
    z-index:1002;
  }
  .menu-hamburger{
    width:40px;height:40px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--surface);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
  }
  .menu-hamburger:hover{background:var(--surface-2);}
  .menu-hamburger .grip-line-h{
    width:18px;height:2px;
    background:var(--gold);
    border-radius:2px;
  }
  .menu-dropdown{
    position:absolute;
    top:100%;
    right:0;
    padding-top:8px;
    display:none;
  }
  .menu-trigger.open .menu-dropdown,
  .menu-trigger:hover .menu-dropdown{display:block;}
  .menu-trigger.suppress .menu-dropdown{display:none !important;}
  .menu-trigger.hidden{display:none;}
  .menu-dropdown-inner{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:10px;
    min-width:150px;
    padding:.4rem;
    display:flex;
    flex-direction:column;
    gap:.15rem;
    box-shadow:0 10px 28px rgba(0,0,0,.45);
  }
  .menu-dropdown-item{
    font-family:'Work Sans',sans-serif;
    font-size:.85rem;
    text-align:left;
    padding:.6rem .75rem;
    border-radius:6px;
    border:none;
    background:transparent;
    color:var(--paper);
    cursor:pointer;
  }
  .menu-dropdown-item:hover{background:var(--surface);color:var(--gold);}
  .confirm-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,7,15,.7);
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
  }
  .confirm-overlay.open{display:flex;}
  .preset-row{display:flex;gap:.35rem;}
  .preset-btn{border:1px solid var(--line);border-radius:999px;}
  .preset-btn.active{background:var(--gold);border-color:var(--gold);color:#241A0B;}
  .recap-card-box{max-width:460px;padding:1.2rem 1.2rem 1.4rem;}
  .recap-card-box img{display:block;width:100%;border-radius:14px;margin:.2rem 0 1rem;}
  .recap-cards{display:flex;flex-wrap:wrap;gap:.45rem;}
  .confirm-box{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:1.8rem;
    max-width:380px;
    width:100%;
    text-align:center;
  }
  .confirm-box p{
    font-size:.95rem;
    color:var(--paper);
    margin:0 0 1.5rem;
    line-height:1.5;
  }
  .confirm-actions{display:flex;gap:.7rem;justify-content:center;}
  .confirm-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:.85rem;
    padding:.6rem 1.2rem;
    border-radius:8px;
    cursor:pointer;
  }
  .confirm-btn.cancel{background:transparent;border:1px solid var(--line);color:var(--muted);}
  .confirm-btn.cancel:hover{background:var(--surface-2);}
  .confirm-btn.danger{background:var(--red);border:1px solid var(--red);color:#fff;}
  .confirm-btn.danger:hover{background:#c94848;}
  .menu-section-title{
    font-family:'IBM Plex Mono',monospace;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--gold);
    margin:2rem 0 1rem;
  }
  .menu-section-title:first-of-type{margin-top:0;}
  .menu-setting-row{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
  }
  .menu-setting-row .field-label{min-width:110px;flex-shrink:0;}
  .menu-setting-row input[type="range"]{flex:1;margin-bottom:0;}
  .recap-h{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:1.3rem 0 .4rem;}
  .recap-v{text-align:right;margin-left:1rem;}
  .menu-setting-value{
    font-family:'IBM Plex Mono',monospace;
    font-size:.9rem;
    color:var(--gold);
    min-width:3.5ch;
    text-align:right;
    flex-shrink:0;
  }
  .history-entry{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.6rem 0;
    border-bottom:1px solid var(--line);
    font-size:.88rem;
  }
  .history-entry:last-child{border-bottom:none;}
  #historyList{
    max-height:calc(55vh / var(--z, 1));
    overflow-y:auto;
    padding-right:.5rem;
    border-top:1px solid var(--line);
  }
  .history-scroll-box{
    max-height:calc(70vh / var(--z, 1));
    overflow-y:auto;
    padding-right:.5rem;
    border-top:1px solid var(--line);
  }
  .history-year{
    font-family:'IBM Plex Mono',monospace;
    color:var(--gold);
    min-width:4ch;
  }
  .history-title{flex:1;color:var(--paper);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .history-meta{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);flex-shrink:0;}
  #podiumCapture{background:var(--surface);padding:2.5rem 2rem;border-radius:12px;max-width:760px;margin:0 auto;}
  #podiumStage{display:flex;align-items:flex-end;justify-content:center;gap:1.6rem;margin-bottom:2.2rem;}
  .podium-column{display:flex;flex-direction:column;align-items:center;gap:.9rem;width:170px;}
  .podium-info{display:flex;flex-direction:column;align-items:center;gap:.35rem;}
  .podium-name{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:1.5rem;
    color:var(--paper);
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .podium-score-row{display:flex;align-items:center;gap:.9rem;}
  .podium-score-item{display:flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:1.35rem;}
  .podium-score-item svg{width:16px;height:16px;}
  .podium-block{
    display:flex;
    align-items:center;
    justify-content:center;
    width:170px;
    border-radius:8px 8px 0 0;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-bottom:none;
  }
  .podium-column.first{order:2;}
  .podium-column.second{order:1;}
  .podium-column.third{order:3;}
  .podium-block.first{height:190px;border-color:var(--gold);}
  .podium-block.second{height:135px;}
  .podium-block.third{height:95px;}
  .podium-medal svg{width:52px;height:52px;display:block;}
  .podium-rest-row{
    display:flex;
    align-items:center;
    gap:.9rem;
    padding:.7rem 0;
    border-bottom:1px solid var(--line);
    font-size:1.05rem;
  }
  .podium-rest-row:last-child{border-bottom:none;}
  .podium-rest-rank{font-family:'IBM Plex Mono',monospace;color:var(--muted);min-width:2.4ch;}
  .podium-rest-name{flex:1;font-family:'Fraunces',serif;font-weight:600;color:var(--paper);}
  .podium-rest-count{display:flex;align-items:center;gap:.4rem;font-family:'IBM Plex Mono',monospace;color:var(--gold);}
  .podium-rest-count svg{width:15px;height:15px;}
  .player-block{margin-bottom:2.4rem;}
  .player-block:last-child{margin-bottom:0;}
  .player-header{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem;}
  .player-rank{font-family:'IBM Plex Mono',monospace;font-size:1.2rem;color:var(--muted);min-width:2ch;flex-shrink:0;}
  .player-block.leader .player-rank{color:var(--gold);}
  .player-name{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.3rem,calc(3 * var(--vw, 1vw)),1.8rem);color:var(--paper);}
  .player-block.leader .player-name{color:var(--gold);}
  .player-win-badge{
    font-family:'IBM Plex Mono',monospace;
    font-size:.62rem;
    color:var(--gold);
    border:1px solid var(--gold);
    border-radius:20px;
    padding:.15rem .55rem;
    flex-shrink:0;
  }
  .player-bonus{
    display:flex;align-items:center;gap:.35rem;
    font-family:'IBM Plex Mono',monospace;font-size:.65rem;color:var(--muted);
    flex-shrink:0;
  }
  .icon-btn-sm{
    width:24px;height:24px;
    border-radius:6px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:.78rem;
    line-height:1;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .icon-btn-sm:hover{background:var(--surface-2);color:var(--gold);}
  .player-count{
    font-family:'IBM Plex Mono',monospace;
    font-size:1.3rem;
    color:var(--gold);
    margin-left:auto;
    flex-shrink:0;
  }
  .player-actions{display:flex;gap:.4rem;flex-shrink:0;}
  .icon-btn{
    width:34px;height:34px;
    border-radius:8px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-size:.9rem;
    padding:0;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .icon-btn:hover{background:var(--surface-2);color:var(--gold);}
  .icon-btn:disabled{opacity:.3;cursor:not-allowed;}
  .player-timeline{display:flex;flex-wrap:wrap;gap:.9rem;min-height:calc(clamp(120px,calc(13 * var(--vw, 1vw)),168px) + .4rem);border-radius:10px;transition:background-color .15s;}
  .player-timeline.drag-over{background-color:rgba(212,162,78,0.1);outline:2px dashed var(--gold-dim);outline-offset:4px;}
  .vinyl-card{
    position:relative;
    width:clamp(96px,calc(11 * var(--vw, 1vw)),136px);
    min-height:clamp(120px,calc(13 * var(--vw, 1vw)),168px);
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:.7rem .5rem;
    text-align:center;
    gap:.3rem;
    cursor:grab;
  }
  .vinyl-card.dragging{opacity:.4;cursor:grabbing;}
  .card-remove-btn{
    position:absolute;
    bottom:7px;
    right:7px;
    width:24px;height:24px;padding:0;
    border-radius:7px;
    border:1px solid transparent;
    background:rgba(14,10,17,.55);
    color:var(--muted);
    display:grid;place-items:center;
    cursor:pointer;
    opacity:0;
    transition:opacity .15s, color .15s, background .15s, border-color .15s;
  }
  .card-remove-btn svg{width:13px;height:13px;display:block;}
  .vinyl-card:hover .card-remove-btn{opacity:1;}
  .card-remove-btn:hover{color:#F1B5AE;background:rgba(177,72,62,.28);border-color:rgba(177,72,62,.6);}
  .vinyl-card.has-bonus{border-color:var(--gold-dim);}
  .card-bonus-badge{
    position:absolute;
    top:6px;
    left:6px;
    display:flex;gap:2px;
  }
  .card-bonus-toggle{
    position:absolute;
    top:6px;
    right:6px;
    width:20px;height:20px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    transition:opacity .15s;
    padding:0;
  }
  .vinyl-card:hover .card-bonus-toggle{opacity:1;}
  .vinyl-card-year{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(1.15rem,calc(2.2 * var(--vw, 1vw)),1.5rem);
    color:var(--gold);
    font-weight:500;
    position:relative;
  }
  .vinyl-card-month{
    position:absolute;
    bottom:100%;
    left:50%;
    transform:translateX(-50%);
    margin-bottom:.1rem;
    white-space:nowrap;
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--gold-dim);
  }
  .vinyl-card-title{
    font-family:'Fraunces',serif;
    font-size:.8rem;
    color:var(--paper);
    line-height:1.25;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .vinyl-card-artist{
    font-family:'Work Sans',sans-serif;
    font-size:.68rem;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:100%;
  }
  .vinyl-card.add-slot{
    border-style:dashed;
    border-color:var(--gold-dim);
    cursor:pointer;
    background:transparent;
    color:var(--gold);
  }
  .vinyl-card.add-slot:hover{background:rgba(212,162,78,.08);}
  .vinyl-card.add-slot:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);color:var(--muted);background:transparent;}
  .vinyl-card.add-slot .plus-icon{font-size:1.7rem;line-height:1;}
  .vinyl-card.add-slot .add-slot-label{font-family:'IBM Plex Mono',monospace;font-size:.65rem;}
  .num{
    font-family:'IBM Plex Mono',monospace;
    color:var(--muted);
    width:1.6rem;
    text-align:right;
    flex-shrink:0;
  }
  .tname{
    flex:1;color:var(--paper);min-width:0;
    overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tname::-webkit-scrollbar{display:none;}
  .tname.pending{color:var(--muted);font-style:italic;}
  .tyear{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:.82rem;}

  /* ── role picker (first thing you see) ─────────────────────────────── */
  .role-overlay{
    position:fixed;inset:0;z-index:3000;
    background:var(--bg);
    display:none;
    align-items:center;justify-content:center;
    padding:1.5rem;
    overflow-y:auto;
  }
  .role-overlay.open{display:flex;}
  .role-inner{max-width:640px;width:100%;text-align:center;}
  .role-inner h1{font-size:clamp(2.4rem,calc(7 * var(--vw, 1vw)),3.4rem);margin-bottom:.4rem;}
  .role-inner .tagline{margin-bottom:2.4rem;}
  .role-options{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;}
  .role-btn{
    flex:1 1 240px;max-width:280px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.8rem 1.4rem;
    text-align:center;
    cursor:pointer;
    color:var(--paper);
    transition:border-color .15s, background-color .15s, transform .15s;
  }
  .role-btn:hover{border-color:var(--gold);background:var(--surface-2);transform:translateY(-2px);}
  .role-btn .role-icon{color:var(--gold);margin-bottom:.9rem;display:flex;justify-content:center;}
  .role-btn .role-title{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;margin-bottom:.4rem;}
  .role-btn .role-desc{display:block;font-size:.85rem;color:var(--muted);line-height:1.5;}
  .role-note{font-size:.78rem;color:var(--muted);margin-top:2rem;line-height:1.5;}
  .role-btn.blocked{opacity:.45;}
  .role-btn.blocked:hover{border-color:var(--line);background:var(--surface);transform:none;}
  .role-warning{
    display:none;
    background:#3A1F1F;
    border:1px solid var(--red);
    border-radius:10px;
    padding:.9rem 1.1rem;
    margin-top:1.6rem;
    font-size:.85rem;
    color:#f0c4c4;
    line-height:1.5;
    text-align:left;
  }
  .role-warning.show{display:block;}
  .home-title{cursor:pointer;transition:color .15s;-webkit-tap-highlight-color:transparent;}
  .home-title:hover{color:var(--gold);}

  /* ── lobby panel on the DJ screen ──────────────────────────────────── */
  /* A button so it's keyboard-reachable, styled back down to plain text. */
  button.lobby-code{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(1.8rem,calc(4.5 * var(--vw, 1vw)),2.6rem);
    letter-spacing:.22em;
    color:var(--gold);
    line-height:1.1;
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    padding:.1rem .3rem;
    margin:-.1rem -.3rem;
    cursor:pointer;
    transition:background-color .15s, border-color .15s;
  }
  button.lobby-code:hover{background:rgba(212,162,78,.08);border-color:var(--gold-dim);}
  button.lobby-code.pending{cursor:default;}
  button.lobby-code.pending:hover{background:transparent;border-color:transparent;}
  button.lobby-code.pending{color:var(--muted);letter-spacing:.12em;font-size:1.2rem;}
  .lobby-sub{font-family:'IBM Plex Mono',monospace;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
  .lobby-actions{display:flex;gap:.5rem;margin-left:auto;flex-wrap:wrap;}
  .lobby-qr{
    display:none;
    width:100%;
    align-items:center;
    gap:1.2rem;
    border-top:1px solid var(--line);
    padding-top:1.1rem;
  }
  .lobby-qr.open{display:flex;}
  .lobby-qr img{
    width:190px;height:190px;
    background:var(--paper);
    border-radius:10px;
    padding:.5rem;
    flex-shrink:0;
    display:block;
  }
  .lobby-qr-caption{display:flex;flex-direction:column;gap:.4rem;min-width:0;}
  .lobby-qr-hint{font-size:.85rem;color:var(--paper);}
  .lobby-qr-url{
    font-family:'IBM Plex Mono',monospace;font-size:.7rem;
    color:var(--muted);word-break:break-all;
  }
  .lobby-qr-warn{font-size:.78rem;color:var(--red);line-height:1.5;}
  .lobby-phones{
    width:100%;display:flex;gap:.45rem;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:.9rem;margin-top:.2rem;
  }
  .phone-chip{
    display:flex;align-items:center;gap:.4rem;
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;
    border:1px solid var(--line);border-radius:20px;
    padding:.25rem .7rem;color:var(--paper);
    background:transparent;
    cursor:pointer;
    transition:color .15s, border-color .15s, background-color .15s;
  }
  /* Click once to arm, again to remove — hovering turns it red so it's clear
     the chip does something destructive before you commit. */
  .phone-chip:hover{color:var(--red);border-color:var(--red);}
  .phone-chip.armed{color:var(--red);border-color:var(--red);background:rgba(179,58,58,.14);}
  .phone-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
  .phone-chip .dot.away{background:var(--gold);}
  .lobby-status{
    display:flex;align-items:center;gap:.45rem;
    font-family:'IBM Plex Mono',monospace;font-size:.62rem;
    text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  }
  .lobby-status .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
  .lobby-status.live .dot{background:var(--green);}
  .lobby-status.down .dot{background:var(--red);}
  .lobby-status.live{color:var(--green);}
  .lobby-status.down{color:var(--red);}
  .player-claim{
    width:7px;height:7px;border-radius:50%;
    background:var(--green);flex-shrink:0;
  }
  .player-claim.off{background:var(--line);}
  .player-header input.player-name-input{
    font-family:'Fraunces',serif;font-weight:600;
    font-size:clamp(1.3rem,calc(3 * var(--vw, 1vw)),1.8rem);
    color:var(--paper);
    background:transparent;border:1px solid transparent;border-radius:6px;
    padding:.1rem .35rem;margin:0;width:auto;max-width:min(calc(48 * var(--vw, 1vw)),320px);
  }
  .player-header input.player-name-input:hover{border-color:var(--line);}
  .player-header input.player-name-input:focus{border-color:var(--gold-dim);background:var(--surface-2);outline:none;}
  .player-block.leader input.player-name-input{color:var(--gold);}
  .join-toast{
    position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
    background:var(--surface);border:1px solid var(--gold-dim);border-radius:10px;
    padding:.7rem 1.1rem;font-size:.85rem;color:var(--paper);
    z-index:1500;box-shadow:0 8px 24px rgba(0,0,0,.4);
    max-width:calc(calc(100 * var(--vw, 1vw)) - 3rem);
  }
  .badge{
    font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;
    padding:.15rem .5rem;
    border-radius:20px;
    border:1px solid var(--line);
    color:var(--muted);
  }
  .badge.drawn{border-color:var(--gold-dim);color:var(--gold);}
  .empty{color:var(--muted);font-size:.85rem;font-style:italic;}
  #sp-frame-holder{position:absolute;top:0;left:0;width:260px;height:80px;overflow:hidden;}
  input[type="text"],input[type="password"]{
    width:100%;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:.82rem;
    padding:.6rem .7rem;
    margin-bottom:.6rem;
  }
  .field-label{font-size:.78rem;color:var(--muted);display:block;margin-bottom:.25rem;}
  details{margin-top:.3rem;}
  summary{cursor:pointer;color:var(--gold);font-size:.82rem;margin-bottom:.6rem;}
  details p, details ol{font-size:.8rem;color:var(--muted);line-height:1.6;}
  details a{color:var(--gold);}
  .status-line{font-size:.82rem;color:var(--muted);margin-top:.4rem;min-height:1.2rem;}
  .plist-controls{display:flex;gap:.4rem;flex-shrink:0;}
  .plist-btn{
    font-family:'IBM Plex Mono',monospace;
    font-size:.65rem;
    padding:.2rem .5rem;
    border-radius:6px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    text-transform:none;
    letter-spacing:normal;
  }
  .plist-btn:hover{background:var(--surface);}
  .plist-btn.off{color:var(--red);border-color:var(--red);}
  .audio-engine{position:relative;width:26px;height:26px;margin:0 auto;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--surface-2);flex-shrink:0;}
  .audio-engine-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;}
  .audio-engine-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);}
  .audio-engine.playing .audio-engine-dot{background:var(--gold);animation:enginepulse 1s ease-in-out infinite;}
  @keyframes enginepulse{0%,100%{opacity:1;}50%{opacity:.25;}}
  .clip-timer{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.4rem;}
  .clip-timer-num{font-family:'IBM Plex Mono',monospace;font-size:1.3rem;color:var(--gold);min-width:3ch;text-align:center;}
  .clip-timer-track{width:180px;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
  .clip-timer-bar{height:100%;width:100%;background:var(--gold);}
  .conn-pill{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
    padding:.3rem .7rem;
    border-radius:20px;
    border:1px solid var(--line);
    color:var(--muted);
  }
  .conn-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;}
  .conn-pill.connected{border-color:var(--green);color:var(--green);}
  .conn-pill.connected .conn-dot{background:var(--green);}
  .conn-pill.pending .conn-dot{background:var(--gold);}
  .conn-pill.pending{border-color:var(--gold-dim);color:var(--gold);}
  .conn-pill.error{border-color:var(--red);color:#f0a3a3;}
  .conn-pill.error .conn-dot{background:var(--red);}

  /* ════════════════════════════════════════════════════════════════════
     The stage, records drawer, sleeves, atmosphere.
     Everything below overrides the base rules above.
     ════════════════════════════════════════════════════════════════════ */
  :root{
    --vinyl:#0E0A11;
    --ink:#241A0B;
    --glow:rgba(212,162,78,.15);
    --amber:#E0B568;
  }
  [hidden]{display:none !important;}
  html{background:var(--bg);}
  body{
    padding:0 0 3rem;
    min-height:calc(100vh / var(--z, 1));
    background:
      radial-gradient(1100px 620px at 92% -12%, var(--glow), transparent 62%),
      radial-gradient(800px 560px at -12% 108%, rgba(92,145,99,.06), transparent 60%),
      var(--bg);
    background-attachment:fixed;
  }
  /* Film grain + vignette over everything but the overlays, so the flat plum
     reads as a dim room. Plain alpha, not mix-blend-mode — a full-screen blend
     layer gets re-composited on every frame the record spins. */
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:1;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(8,5,10,.45) 100%);
  }
  /* Ad slots stay in the markup, hidden until real ads exist. */
  .ad-slot,.ad-slot-bottom,.ad-slot-side{display:none !important;}
  :focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  button:focus:not(:focus-visible){outline:none;}

  /* ── top bar ── */
  .topbar{
    position:sticky;top:0;z-index:900;
    display:flex;align-items:center;gap:1rem;
    padding:.85rem 5.4rem .85rem 1.6rem;
    background:rgba(27,20,32,.78);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(60,44,66,.7);
  }
  .topbar .spacer{flex:1;}
  .brand{
    display:flex;align-items:center;gap:.6rem;margin:0;
    font-family:'Fraunces',serif;font-weight:700;font-size:1.45rem;letter-spacing:-.01em;
  }
  .brand-mark{width:32px;height:32px;flex-shrink:0;}
  .menu-trigger{top:1.15rem;}
  .pill{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:400;
    color:var(--muted);border:1px solid var(--line);border-radius:999px;
    padding:.4rem .8rem;background:rgba(37,26,43,.6);
  }
  .pill b{color:var(--paper);font-weight:500;}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;}
  .pill .dot.connected{background:var(--green);}
  .pill .dot.pending{background:var(--gold);}
  .pill .dot.error{background:var(--red);}
  .pill .chev{color:var(--gold);}
  button.pill:hover{border-color:var(--gold-dim);color:var(--paper);background:rgba(37,26,43,.9);}
  .joinchip{
    display:flex;align-items:center;gap:.75rem;
    border:1px solid var(--gold-dim);border-radius:12px;
    padding:.3rem .4rem .3rem .8rem;background:rgba(212,162,78,.06);
    color:var(--paper);text-align:left;
  }
  .joinchip:hover{background:rgba(212,162,78,.12);}
  .joinchip .lbl{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.3;}
  .joinchip .lbl b{display:block;color:var(--gold);font-size:1rem;letter-spacing:.24em;font-weight:500;}
  .joinchip-count{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);white-space:nowrap;}
  .joinchip-qr{width:40px;height:40px;border-radius:6px;background:var(--paper);display:block;}

  /* ── stage ── */
  .stage-wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:1.8rem 1.6rem 0;}
  .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:1.6rem;align-items:start;}
  .stage-main{
    position:relative;min-height:470px;
    background:rgba(37,26,43,.45);border:1px solid var(--line);border-radius:20px;
    padding:2rem 1.8rem;
  }
  .stage[data-mode="deck"] .lobby-hero{display:none;}
  .stage[data-mode="lobby"] .deck{display:none;}

  /* Top-aligned, so anything that appears in the readout (the reveal, the
     give chips, the debug panel) grows downward instead of re-centring and
     shoving everything up. The padding sets the resting position. */
  .deck{display:flex;align-items:flex-start;justify-content:center;gap:clamp(1.6rem,calc(4 * var(--vw, 1vw)),3.4rem);flex-wrap:wrap;min-height:420px;}
  .deck .readout{padding-top:clamp(0px,calc(3.4 * var(--vw, 1vw)),48px);}
  .tt{position:relative;width:clamp(230px,calc(28 * var(--vw, 1vw)),350px);aspect-ratio:1;flex-shrink:0;margin:14px;}
  .ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);transform:rotate(-90deg);pointer-events:none;}
  .ring circle{fill:none;stroke-width:3;}
  .ring-track{stroke:var(--line);}
  .ring-prog{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:1118.4;stroke-dashoffset:0;}
  .tt.revealed .ring-prog{stroke:var(--gold-dim);}
  .spin-wrap{position:absolute;inset:0;border-radius:50%;}
  .spin-wrap.spinning{animation:spin 1.8s linear infinite;}
  .record{
    position:absolute;inset:0;border-radius:50%;
    background:repeating-radial-gradient(circle at 50% 50%, var(--vinyl) 0 2px, #17111B 2px 3px);
    box-shadow:0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #000, inset 0 0 0 10px var(--vinyl);
  }
  .sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:conic-gradient(from 20deg, transparent 0 20deg, rgba(255,255,255,.07) 45deg, transparent 75deg 200deg, rgba(255,255,255,.05) 225deg, transparent 255deg);}
  .deck-label{position:absolute;inset:32%;perspective:600px;}
  .label-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.4,.5,1);}
  .tt.revealed .label-inner{transform:rotateY(180deg);}
  .face{
    position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(circle at 35% 30%, #E4B865, var(--gold) 55%, #B98838);
    color:var(--ink);box-shadow:inset 0 0 0 1px rgba(36,26,11,.3);
  }
  .face.front span{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(2.2rem,calc(4.4 * var(--vw, 1vw)),3.4rem);line-height:1;}
  .face.back{transform:rotateY(180deg);}
  .face.back .y{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:clamp(1.3rem,calc(2.7 * var(--vw, 1vw)),2.1rem);letter-spacing:.02em;line-height:1.1;}
  .face.back .m{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
  .spindle{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--vinyl);z-index:3;transition:opacity .3s;}
  .tt.revealed .spindle{opacity:0;}
  .tonearm{
    position:absolute;top:-10%;right:-12%;width:43%;height:43%;z-index:4;
    transform-origin:85% 15%;transform:rotate(-34deg);
    transition:transform .7s cubic-bezier(.4,0,.2,1);
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));
  }
  .tonearm.down{transform:rotate(-4deg);}

  .readout{flex:1;min-width:250px;max-width:400px;position:relative;}
  .state-line{
    display:flex;align-items:center;gap:.5rem;
    font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
    white-space:nowrap;min-width:0;
  }
  .state-line #stageState{overflow:hidden;text-overflow:ellipsis;}
  .live-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);display:none;animation:pulse 1.3s ease-in-out infinite;}
  .deck.playing .live-dot{display:inline-block;}
  @keyframes pulse{50%{opacity:.2;}}
  /* Every line above the hero button is exactly one line tall, whatever it
     holds, so Reveal and Next record sit on the same pixel. Text too long for
     the line runs as a ticker instead of wrapping. */
  .readout .title{
    font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.6rem,calc(3 * var(--vw, 1vw)),2.3rem);
    line-height:1.25;height:1.25em;margin:.5rem 0 .2rem;letter-spacing:-.01em;
  }
  .readout .sub{color:var(--muted);font-size:1.05rem;line-height:1.35;height:1.35em;}
  .ticker{overflow:hidden;white-space:nowrap;}
  .ticker > span{display:inline-block;}
  .ticker.run{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.4rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.4rem),transparent);}
  /* Rests at the start of each lap so the title can be read, then rolls. */
  .ticker.run > span{animation:ticker var(--tk-dur,10s) linear infinite;}
  .ticker.run > span::after{content:attr(data-text);padding-left:3.5rem;}
  @keyframes ticker{0%,18%{transform:none;}100%{transform:translateX(calc(-1 * var(--tk-dist)));}}
  .readout .year{
    font-family:'IBM Plex Mono',monospace;font-size:clamp(2.4rem,calc(5 * var(--vw, 1vw)),3.4rem);color:var(--gold);
    margin-top:.4rem;line-height:1;height:1.05em;white-space:nowrap;
  }
  /* Mystery year: four empty slots, echoing the join-code boxes. 0.875 × the
     year's font at 1.2em tall = the year's 1.05em, so the hero button doesn't
     move on reveal. */
  .readout .year:empty,.readout .year.with-month:empty{display:none;}
  .year-slots{display:none;gap:.45rem;margin-top:.4rem;height:1.2em;font-size:clamp(2.1rem,calc(4.375 * var(--vw, 1vw)),2.975rem);}
  .readout .year:empty + .year-slots{display:flex;}
  .deck.skipped .year-slots{display:none !important;}
  .year-slots i{
    width:.95em;display:grid;place-items:center;font-style:normal;
    font-family:'IBM Plex Mono',monospace;color:var(--gold-dim);
    border:1px dashed rgba(212,162,78,.4);border-radius:12px;background:rgba(212,162,78,.035);
  }
  .year-slots i::before{content:'?';opacity:.55;}
  .deck.playing .year-slots i{animation:slotPulse 1.6s ease-in-out infinite;}
  .deck.playing .year-slots i:nth-child(2){animation-delay:.15s;}
  .deck.playing .year-slots i:nth-child(3){animation-delay:.3s;}
  .deck.playing .year-slots i:nth-child(4){animation-delay:.45s;}
  @keyframes slotPulse{50%{border-color:var(--gold);background:rgba(212,162,78,.1);}}
  .readout .year:not(:empty){animation:yearIn .45s .4s both cubic-bezier(.3,1.3,.5,1);}
  .readout .year.with-month{display:inline-flex;gap:.25em;align-items:baseline;}
  .readout .year.with-month span:first-child{font-size:.45em;color:var(--gold-dim);text-transform:uppercase;letter-spacing:.1em;}
  @keyframes yearIn{from{opacity:0;transform:translateY(10px);}}
  .deck-controls{display:flex;align-items:center;gap:.55rem;margin-top:1.5rem;flex-wrap:wrap;}
  .hero-btn{
    display:inline-flex;align-items:center;gap:.65rem;
    background:var(--gold);color:var(--ink);border:1px solid var(--gold);
    font-weight:600;font-size:1.05rem;padding:.95rem 1.5rem;border-radius:12px;
    box-shadow:0 10px 30px rgba(212,162,78,.25);
  }
  .hero-btn:hover{background:#e0b568;}
  .hero-btn:disabled{box-shadow:none;}
  .give kbd{font-family:'IBM Plex Mono',monospace;font-size:.58rem;font-weight:400;border:1px solid var(--line);border-radius:4px;padding:0 .3rem;margin-left:.45rem;opacity:.65;vertical-align:.1em;}
  .hero-btn kbd{font-family:'IBM Plex Mono',monospace;font-size:.62rem;border:1px solid rgba(36,26,11,.35);border-radius:5px;padding:.1rem .4rem;opacity:.7;}
  .ibtn{
    width:44px;height:44px;padding:0;border-radius:10px;
    border:1px solid var(--line);background:var(--surface);color:var(--muted);
    display:inline-grid;place-items:center;
  }
  .ibtn:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--surface-2);}
  .ibtn svg{width:18px;height:18px;}
  /* Hidden (the ring and live dot show this) but still rendered: the Spotify
     iframe lives in the timer row, and the ring reads the bar's width. */
  .clip-timer{position:absolute;left:0;bottom:0;margin:0;opacity:0;pointer-events:none;z-index:-1;}
  .tt .audio-engine{position:absolute;left:50%;top:50%;margin:-13px 0 0 -13px;pointer-events:none;}
  .clip-timer-num{font-size:1rem;min-width:0;text-align:left;}
  .clip-timer-track{position:absolute;width:180px;opacity:0;pointer-events:none;}
  .give-row{margin-top:1.3rem;animation:yearIn .35s .6s both;}
  .give-label{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;}
  .gives{display:flex;gap:.45rem;flex-wrap:wrap;}
  .give{
    font-family:'Fraunces',serif;font-weight:600;font-size:.95rem;white-space:nowrap;
    padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--paper);
  }
  .give:hover{border-color:var(--gold);color:var(--gold);background:var(--surface-2);}
  .give.given{background:var(--gold);border-color:var(--gold);color:var(--ink);}
  .give.muted{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.72rem;color:var(--muted);}
  .give:disabled{opacity:.35;}
  .deck-meta{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);margin-top:1rem;letter-spacing:.04em;line-height:1.6;}
  .deck-meta #offStatus{opacity:.75;display:block;}
  .debug{margin-top:.9rem;}
  .debug > summary{font-family:'IBM Plex Mono',monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
  .debug > summary:hover{color:var(--gold);}
  .debug .status-line{font-family:'IBM Plex Mono',monospace;font-size:.7rem;}
  .debug input[type="range"]{margin:.5rem 0 !important;}
  .debug .row{gap:.4rem;}
  .debug .row button{font-size:.74rem;padding:.4rem .7rem;}
  input[type="range"]{accent-color:var(--gold);}
  .st-more{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);text-align:center;margin:.5rem 0 0;}

  /* ── chaos mode: round chip in the readout + the card announcement ── */
  .chaos-chip{
    display:flex;flex-direction:column;gap:.15rem;margin:0 0 1rem;padding:.6rem .85rem;
    border:1px solid var(--gold-dim);border-radius:12px;background:rgba(212,162,78,.07);
  }
  .chaos-chip .k{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
  .chaos-chip b{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;color:var(--paper);}
  .chaos-chip .d{font-size:.8rem;color:var(--muted);line-height:1.4;}
  .chaos-chip .v{margin-top:.1rem;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--gold);line-height:1.45;}
  .chaos-chip .v b{font-family:'Fraunces',serif;font-weight:700;font-size:1.25rem;color:var(--paper);}
  /* Standings rows can be clicked to hand someone the turn. */
  .st.pickable{cursor:pointer;}
  .st.pickable:hover .st-nm span{color:var(--gold);}
  .shop-btn{margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;}
  .shop-box{max-width:540px;text-align:left;max-height:calc(100vh / var(--z, 1) - 3rem);overflow:auto;}
  .shop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem;}
  .shop-head h2{font-family:'Fraunces',serif;font-size:1.7rem;margin:0;}
  .shop-buyer{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:.6rem;}
  .shop-buyer b{color:var(--gold);font-family:'IBM Plex Mono',monospace;font-weight:500;}
  .shop-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .9rem;align-items:center;padding:.8rem 0;border-top:1px solid var(--line);}
  .shop-item .n{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;}
  .shop-item .n small{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.72rem;color:var(--gold);margin-left:.4rem;}
  .shop-item .d{grid-column:1;font-size:.8rem;color:var(--muted);line-height:1.4;}
  .shop-item .why{grid-column:1;font-size:.72rem;color:var(--gold-dim);}
  .shop-item select,.shop-buyer select{font:inherit;font-size:.85rem;padding:.4rem .6rem;background:var(--surface-2);color:var(--paper);border:1px solid var(--line);border-radius:8px;}
  .shop-item select{grid-column:1;width:100%;min-width:0;text-overflow:ellipsis;}
  .shop-item .buy{grid-column:2;grid-row:1 / span 3;}
  .st-turn{font-family:'IBM Plex Mono',monospace;font-size:.55rem;color:var(--ink);background:var(--gold);border-radius:20px;padding:.05rem .4rem;}
  .st-fire{font-family:'IBM Plex Mono',monospace;font-size:.62rem;font-weight:500;color:var(--gold);}
  .chaos-announce{
    position:absolute;inset:0;z-index:5;border-radius:inherit;
    display:grid;place-items:center;padding:2rem;text-align:center;
    background:radial-gradient(circle at 50% 42%,rgba(212,162,78,.14),transparent 60%),rgba(22,16,26,.94);
  }
  .chaos-card{
    max-width:540px;padding:2.2rem 2.4rem 2rem;border:1px solid var(--gold-dim);border-radius:20px;
    background:linear-gradient(160deg,rgba(212,162,78,.13),rgba(37,26,43,.92) 55%);
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    animation:chaosFlip .6s cubic-bezier(.3,1.3,.5,1) both;
  }
  @keyframes chaosFlip{from{opacity:0;transform:perspective(900px) rotateY(80deg) scale(.9);}}
  .chaos-card .k{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
  .chaos-card h2{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(2.2rem,calc(4.6 * var(--vw, 1vw)),3.4rem);line-height:1.05;margin:.6rem 0 .7rem;color:var(--paper);letter-spacing:-.01em;}
  .chaos-card p{font-size:1.1rem;line-height:1.5;color:var(--muted);margin:0 auto;max-width:30em;}
  .chaos-card .len{display:block;margin:1.1rem 0 1.5rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dim);}

  /* ── standings rail ── */
  /* At least as tall as the stage in its mystery-record state: the deck's
     420px min-height + 2rem padding top and bottom + border. Fixed, so it
     doesn't grow along with the stage when the give chips appear. */
  .rail{
    display:flex;flex-direction:column;min-height:calc(420px + 4rem + 2px);
    background:rgba(37,26,43,.72);border:1px solid var(--line);border-radius:18px;
    padding:1.2rem 1.2rem .9rem;position:sticky;top:6rem;
  }
  #standings{flex:1;}
  .rail-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem;}
  .rail-h h3{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0;font-weight:500;}
  .rail-h span{font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--muted);}
  .st{display:grid;grid-template-columns:1.7rem minmax(0,1fr) auto;gap:.25rem .55rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--line);}
  .st:first-child{border-top:none;padding-top:.1rem;}
  .st-rk{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--muted);}
  .st-nm{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:.45rem;min-width:0;}
  .st-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .st.lead .st-rk,.st.lead .st-nm{color:var(--gold);}
  .st-on{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;}
  .st-on.off{background:var(--line);}
  .st-sc{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--gold);display:flex;gap:.6rem;align-items:center;}
  .st-sc span{display:inline-flex;align-items:center;gap:.25rem;}
  .st-win{font-family:'IBM Plex Mono',monospace;font-size:.55rem;color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:.05rem .4rem;}
  .st-bar{grid-column:2 / 4;height:4px;border-radius:4px;background:var(--line);overflow:hidden;}
  .st-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-dim),var(--gold));transition:width .5s cubic-bezier(.3,1.2,.5,1);}
  .rail .empty{font-size:.8rem;margin:.2rem 0 .6rem;}
  .rail-actions{margin-top:.8rem;display:flex;flex-direction:column;gap:.5rem;}
  .rail-actions > button{width:100%;}
  .rail-links{display:flex;justify-content:center;gap:1rem;}
  .linkish{background:none;border:none;padding:.2rem;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
  .linkish:hover{background:none;color:var(--gold);}

  /* ── pre-game lobby hero ── */
  .lobby-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.2rem;align-items:center;min-height:420px;}
  .lobby-hero .kicker{display:flex;align-items:center;gap:.9rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
  .lobby-hero-title{font-family:'Fraunces',serif;font-weight:700;font-size:clamp(2.2rem,calc(5 * var(--vw, 1vw)),3.4rem);margin:.5rem 0 .5rem;line-height:1.02;letter-spacing:-.015em;color:var(--paper);}
  .lobby-hero-url{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:1rem;}
  .lobby-hero-url b{color:var(--paper);font-weight:500;}
  button.lobby-code{
    display:flex;gap:.45rem;flex-wrap:wrap;margin:1.1rem 0 .35rem;padding:0;border:none;background:none;
    font-size:clamp(1.8rem,calc(4 * var(--vw, 1vw)),2.8rem);letter-spacing:0;
  }
  button.lobby-code:hover{background:none;border-color:transparent;}
  button.lobby-code .ch{
    width:1.35em;height:1.6em;display:grid;place-items:center;
    border:1px solid var(--gold-dim);border-radius:12px;background:rgba(212,162,78,.06);color:var(--gold);
    transition:background .15s;
  }
  button.lobby-code:hover .ch{background:rgba(212,162,78,.14);}
  button.lobby-code.pending{font-size:1.2rem;color:var(--muted);letter-spacing:.12em;margin:1.3rem 0 .6rem;}
  .lobby-hero .lobby-sub{display:block;margin-bottom:1.1rem;}
  .lobby-phones{border-top:none;padding-top:0;margin:0 0 1.3rem;}
  .phone-chip{font-family:'Fraunces',serif;font-size:.92rem;font-weight:600;padding:.4rem .85rem;background:var(--surface-2);animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;}
  @keyframes pop{from{transform:scale(.6);opacity:0;}}
  .lobby-hero-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
  .lobby-hero-actions .primary{font-size:1rem;padding:.85rem 1.4rem;border-radius:12px;font-weight:600;margin-right:.4rem;}
  .lobby-hero-hint{font-size:.8rem;color:var(--muted);margin:.8rem 0 0;min-height:1em;}
  .lobby-hero-hint button{font-size:.8rem;padding:0;border:none;background:none;text-decoration:underline;text-underline-offset:3px;}
  .lobby-qr{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:auto;border-top:none;padding-top:0;}
  .lobby-qr img{width:210px;height:210px;border-radius:16px;padding:.7rem;box-shadow:0 20px 50px rgba(0,0,0,.45);}
  .lobby-qr img:not([src]){visibility:hidden;}
  .lobby-qr-caption{align-items:center;text-align:center;max-width:230px;}
  .lobby-qr-hint{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}

  /* ── records drawer ── */
  .drawer-scrim{position:fixed;inset:0;z-index:940;background:rgba(10,7,15,.55);opacity:0;pointer-events:none;transition:opacity .3s;}
  .drawer-scrim.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:950;width:min(460px,calc(100 * var(--vw, 1vw)));
    background:var(--surface);border-left:1px solid var(--line);
    transform:translateX(104%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.5);
  }
  .drawer.open{transform:none;}
  .dr-head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.3rem .9rem;}
  .dr-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;margin:0;}
  .dr-x{width:38px;height:38px;padding:0;border-radius:9px;border:1px solid var(--line);color:var(--muted);font-size:1rem;}
  .dr-x:hover{background:var(--surface-2);}
  .seg{display:flex;gap:.3rem;background:var(--surface-2);border-radius:9px;padding:.25rem;margin:0 1.3rem 1rem;}
  .seg button{flex:1;font-family:'IBM Plex Mono',monospace;font-size:.74rem;padding:.5rem;border:none;border-radius:6px;background:transparent;color:var(--muted);transition:background .2s,color .2s;}
  .seg button:hover{background:rgba(212,162,78,.08);}
  .seg button.on{background:var(--gold);color:var(--ink);}
  .dr-body{flex:1;overflow-y:auto;padding:0 1.3rem 1.6rem;}
  .stp{display:grid;grid-template-columns:28px minmax(0,1fr);gap:.2rem .85rem;padding:1rem 0;border-top:1px solid var(--line);}
  .stp:first-child{border-top:none;padding-top:.2rem;}
  .stp-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:.75rem;border:1px solid var(--gold-dim);color:var(--gold);}
  .stp.done .stp-n{background:var(--green);border-color:var(--green);color:var(--paper);font-size:0;}
  .stp.done .stp-n::after{content:'✓';font-size:.8rem;}
  .stp h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.05rem;margin:.15rem 0 .35rem;color:var(--paper);}
  .stp .hint{margin-top:.3rem;}
  .stp details summary{font-size:.78rem;}
  .callout{border-radius:10px;padding:.7rem .85rem;margin-top:.8rem;font-size:.8rem;line-height:1.5;}
  .callout.note{border:1px solid rgba(212,162,78,.35);background:rgba(212,162,78,.07);color:var(--paper);}
  .callout.note strong{color:var(--gold);font-weight:500;}
  .callout.warn{border:1px solid rgba(179,58,58,.6);background:rgba(179,58,58,.12);color:#f0c4c4;}
  .callout details{margin-top:.4rem;}
  .callout details p{margin:.4rem 0 0;}
  .crates-h{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:1.2rem 0 .55rem;display:flex;justify-content:space-between;gap:1rem;}
  .crates-h span{color:var(--muted);letter-spacing:.04em;text-transform:none;}
  .crate{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);margin-bottom:.45rem;}
  .crate-disc{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--gold);border:10px solid var(--vinyl);box-sizing:border-box;}
  .crate.off .crate-disc{filter:grayscale(1) brightness(.6);}
  .crate-name{flex:1;min-width:0;}
  .crate-name b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .crate.off .crate-name b{color:var(--muted);}
  .crate-name small{font-family:'IBM Plex Mono',monospace;font-size:.64rem;color:var(--muted);}
  .switch{width:36px;height:22px;padding:0;border-radius:999px;border:none;background:var(--gold);position:relative;flex-shrink:0;}
  .switch::after{content:'';position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:var(--ink);transition:right .2s,left .2s;}
  .switch:hover{background:#e0b568;}
  .crate.off .switch{background:var(--line);}
  .crate.off .switch::after{right:auto;left:4px;background:var(--muted);}
  .crate-rm{width:28px;height:28px;padding:0;border:none;border-radius:6px;color:var(--muted);font-size:.85rem;}
  .crate-rm:hover{color:#f0a3a3;background:rgba(179,58,58,.12);}
  .crates-empty{font-size:.8rem;color:var(--muted);font-style:italic;}
  .dr-panel .row{margin-top:.6rem;}

  /* ── sleeves: timeline cards with the record peeking out ── */
  .player-timeline{gap:2.6rem 2.2rem;padding-top:2rem;align-items:flex-end;}
  .vinyl-card{
    --disc:clamp(66px,calc(7.6 * var(--vw, 1vw)),92px);
    background:transparent;border:none;
    /* Year sits at a fixed height on every card (month above it), so a row
       of cards lines up whatever the title length; title and artist follow. */
    justify-content:flex-start;padding:3.8rem .6rem .8rem;gap:.2rem;
  }
  /* Painting order does the layering: the disc (::before) goes first, the
     sleeve face (::after) over it, and the text sits on top at z-index 1. */
  .vinyl-card::before{
    content:'';position:absolute;left:50%;top:calc(var(--disc) * -.36);
    width:var(--disc);height:var(--disc);margin-left:calc(var(--disc) / -2);border-radius:50%;
    background:
      radial-gradient(circle, var(--vinyl) 0 4%, var(--gold) 5% 27%, transparent 28%),
      repeating-radial-gradient(circle, var(--vinyl) 0 2px, #1a131e 2px 3px);
    box-shadow:0 0 0 1px #000;
    transition:transform .35s cubic-bezier(.3,1.3,.5,1);
  }
  .vinyl-card::after{
    content:'';position:absolute;inset:0;border-radius:12px;
    background:linear-gradient(165deg,#36263D,#261B2C 72%);
    border:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.35);
  }
  .vinyl-card:hover::before{transform:translateY(-6px) rotate(40deg);}
  .vinyl-card > .vinyl-card-year,.vinyl-card > .vinyl-card-title,.vinyl-card > .vinyl-card-artist{position:relative;z-index:1;}
  .vinyl-card-year{font-size:clamp(1.55rem,calc(2.8 * var(--vw, 1vw)),2rem);line-height:1;margin-bottom:.2rem;}
  .vinyl-card-year.blind{color:var(--muted);}
  .vinyl-card-title{font-size:.84rem;line-height:1.2;}
  .card-bonus-badge,.card-bonus-toggle,.card-remove-btn,.card-new-tag,.card-gap{z-index:2;}
  .card-bonus-badge{top:8px;left:auto;right:8px;}
  .card-bonus-toggle{top:6px;right:auto;left:6px;}
  .vinyl-card.has-bonus::after{border-color:var(--gold-dim);}
  .vinyl-card.has-bonus.is-new::after,.vinyl-card.is-new::after{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,162,78,.2),0 12px 24px rgba(0,0,0,.35);}
  .card-new-tag{
    position:absolute;top:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink);background:var(--gold);padding:.1rem .35rem;border-radius:4px;
  }
  .card-gap{position:absolute;right:100%;top:55%;width:2.2rem;height:2px;background:var(--line);pointer-events:none;}
  .card-gap span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--muted);white-space:nowrap;}
  .card-gap span.under{bottom:auto;top:6px;}
  .card-gap.tight{background:rgba(92,145,99,.6);}
  .card-gap.tight span{color:var(--green);}
  /* First card of a wrapped row: the gap back to the previous row's last
     card moves onto the sleeve as a small tag, since there's no line to hang
     it on. */
  .vinyl-card.row-start .card-gap{
    display:flex;align-items:center;gap:.3em;
    right:auto;left:50%;top:10px;transform:translateX(-50%);width:auto;height:auto;
    background:rgba(14,10,17,.55);border:1px solid var(--line);border-radius:999px;padding:.12rem .45rem;
  }
  .vinyl-card.row-start .card-gap::before{content:'↳';font-family:'IBM Plex Mono',monospace;font-size:.62rem;color:var(--muted);}
  .vinyl-card.row-start .card-gap span{position:static;transform:none;}
  .vinyl-card.row-start .card-gap.tight{background:rgba(92,145,99,.18);border-color:rgba(92,145,99,.6);}
  .vinyl-card.row-start .card-gap.tight::before{color:var(--green);}
  .vinyl-card.add-slot.row-start .card-gap{display:none;}
  .vinyl-card.dragging::before{opacity:0;}
  .vinyl-card.add-slot{border:1.5px dashed var(--gold-dim);background:transparent;justify-content:center;padding:.75rem .6rem;}
  .vinyl-card.add-slot::before,.vinyl-card.add-slot::after{content:none;}
  .vinyl-card.add-slot .card-gap{background:repeating-linear-gradient(90deg,var(--gold-dim) 0 5px,transparent 5px 10px);}
  .vinyl-card.add-slot:disabled .card-gap{background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 10px);}
  @media (hover:none){
    .card-remove-btn,.card-bonus-toggle{opacity:1;}
  }
  /* Export copies (PNG): html2canvas won't paint gradients on pseudo-elements,
     so exported cards carry a real .card-disc element instead of ::before. */
  .export .vinyl-card::before{content:none;}
  .card-disc{
    position:absolute;left:50%;top:calc(var(--disc) * -.36);
    width:var(--disc);height:var(--disc);margin-left:calc(var(--disc) / -2);border-radius:50%;
    background:radial-gradient(circle, var(--vinyl) 0 5%, var(--gold) 6% 27%, var(--vinyl) 28%);
  }
  .export .vinyl-card::after{background:#2E2033;box-shadow:none;}

  /* ── progress pips (little records) ── */
  .pips{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;}
  .pip{width:12px;height:12px;border-radius:50%;border:1px solid var(--gold-dim);box-sizing:border-box;flex-shrink:0;}
  .pip.f{background:radial-gradient(circle, var(--vinyl) 0 16%, var(--gold) 22%);border-color:var(--gold);}
  .pips-bar{width:120px;height:5px;border-radius:5px;background:var(--line);overflow:hidden;display:inline-block;}
  .pips-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));}

  /* ── scoreboard panel polish ── */
  .scoreboard-overlay{
    background:
      radial-gradient(1000px 560px at 90% -10%, var(--glow), transparent 60%),
      var(--bg);
  }
  .player-block{background:rgba(37,26,43,.5);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem 1.4rem;}
  .player-block.leader{border-color:var(--gold-dim);}
  #podiumStage{position:relative;}
  #podiumStage.is-empty::before{content:none;}
  #podiumStage::before{
    content:'';position:absolute;left:50%;top:-40px;width:420px;height:420px;margin-left:-210px;pointer-events:none;
    background:radial-gradient(circle, rgba(212,162,78,.16), transparent 65%);
  }
  .podium-block{background:linear-gradient(180deg,#36263D,#261B2C);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
  .podium-block.first{background:linear-gradient(180deg,rgba(212,162,78,.22),#2E2033 70%);}

  /* ── role picker ── */
  .role-overlay{
    background:
      radial-gradient(900px 520px at 88% -8%, var(--glow), transparent 62%),
      var(--bg);
  }
  .role-record{
    width:150px;height:150px;margin:0 auto 1.4rem;border-radius:50%;position:relative;
    background:
      radial-gradient(circle, var(--vinyl) 0 3%, var(--gold) 4% 30%, transparent 31%),
      repeating-radial-gradient(circle, var(--vinyl) 0 2px, #1a131e 2px 3px);
    box-shadow:0 20px 50px rgba(0,0,0,.6), 0 0 0 1px #000;
    animation:spin 6s linear infinite;
  }
  .role-btn{background:rgba(37,26,43,.8);}

  .page-foot{position:relative;z-index:2;text-align:center;margin-top:2.6rem;}

  /* ── results poster (1080×1350 PNG, rendered off-screen) ── */
  .poster{
    position:relative;width:1080px;height:1350px;box-sizing:border-box;overflow:hidden;
    padding:72px 80px 60px;color:var(--paper);font-family:'Work Sans',sans-serif;
    background:linear-gradient(200deg, #3A2A2C 0%, #1B1420 42%);
    display:flex;flex-direction:column;align-items:center;
  }
  .poster-podium{margin-top:64px;}
  .poster-rest{margin-top:30px;}
  .poster-winner{margin-top:auto;}
  .poster-head{display:flex;flex-direction:column;align-items:center;}
  .poster-record{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle, var(--vinyl) 0 4%, var(--gold) 5% 30%, var(--vinyl) 31%);}
  .poster-title{font-family:'Fraunces',serif;font-weight:700;font-size:76px;line-height:1;margin-top:22px;letter-spacing:-1px;}
  .poster-sub{font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-top:14px;}
  .poster-empty{font-family:'Fraunces',serif;font-size:40px;color:var(--muted);}
  .poster-podium{display:flex;align-items:flex-end;justify-content:center;gap:26px;width:100%;border-bottom:2px solid var(--line);}
  .pp-col{width:270px;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .pp-name{font-family:'Fraunces',serif;font-weight:600;font-size:42px;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pp-first .pp-name{color:var(--gold);}
  .pp-score,.pr-score{display:flex;gap:20px;align-items:center;font-family:'IBM Plex Mono',monospace;color:var(--gold);}
  .pp-score{font-size:28px;}
  .pp-score span,.pr-score span{display:flex;align-items:center;gap:8px;}
  .pp-score svg{width:20px !important;height:22px !important;}
  .pp-block{width:270px;box-sizing:border-box;border-radius:14px 14px 0 0;background:#2E2033;border:2px solid var(--line);border-bottom:none;display:flex;justify-content:center;padding-top:24px;}
  .pp-block svg{width:72px;height:72px;}
  .pp-first .pp-block{height:230px;border-color:var(--gold);background:#3A2A2E;}
  .pp-second .pp-block{height:165px;}
  .pp-third .pp-block{height:120px;}
  .poster-rest{width:100%;}
  .pr-row{display:flex;align-items:center;gap:22px;padding:14px 8px;border-bottom:1px solid var(--line);font-size:30px;}
  .pr-rank{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:24px;width:40px;}
  .pr-name{flex:1;font-family:'Fraunces',serif;font-weight:600;}
  .pr-score{font-size:24px;}
  .pr-more{font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:20px;padding:12px 8px 0;}
  .poster-winner{width:100%;}
  .pw-h{font-family:'IBM Plex Mono',monospace;font-size:18px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;text-align:center;}
  .pw-row{display:flex;justify-content:center;gap:10px;}
  .pw-card{width:84px;height:104px;box-sizing:border-box;border-radius:10px;background:#2E2033;border:1px solid var(--line);padding:8px 7px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;}
  .pw-card.coin{border-color:var(--gold-dim);}
  .pw-y{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:22px;line-height:1;}
  .pw-t{font-family:'Fraunces',serif;font-size:12px;line-height:1.2;max-height:29px;overflow:hidden;}
  .pw-more{align-self:center;font-family:'IBM Plex Mono',monospace;color:var(--muted);font-size:22px;padding-left:6px;}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important;}
  }
  /* Settings, grouped into cards. */
  .set-group{border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem .4rem;margin-bottom:1rem;background:rgba(255,255,255,.02);}
  .set-group .menu-section-title{margin:0 0 .9rem;}
  .set-group .hint{margin:-.5rem 0 1rem;}
  .set-more{margin:-.3rem 0 1rem;}
  .set-more summary{cursor:pointer;font-size:.78rem;color:var(--gold);list-style:none;margin-bottom:.8rem;}
  .set-more summary::-webkit-details-marker{display:none;}
  .set-more summary::before{content:'▸ ';}
  .set-more[open] summary::before{content:'▾ ';}