/* Inter, self-hosted (no request to Google Fonts: faster + better for privacy). SIL OFL licence. */
  @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
    src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

  @font-face{font-family:'Marker';font-style:normal;font-weight:400;font-display:swap;
    src:url('fonts/permanent-marker-latin-400-normal.woff2') format('woff2');}

  :root{
    /* Dark "streaming platform" palette — near-black ground, YouTube red as the
       single brand accent, a touch of neon crimson glow for a Netflix-at-night feel. */
    --page:#0a0a0b;
    --panel-1:#141416;
    --panel-2:#1c1c1f;
    --panel-hover:#26262a;
    --border:rgba(255,255,255,.09);
    /* Contrast-checked palette (WCAG 2.2 / RGAA 4.1):
       Default theme = "Netflix": Netflix red #e50914
       --accent       fills behind white text  -> 4.8:1 with #fff (AA)
       --accent-soft  red TEXT on dark panels  -> 5.2-6.3:1 (AA)
       --accent-line  red borders / outlines   -> >= 3.8:1 (UI components need 3:1)
       The "sobre" theme ([data-theme=sobre], end of file) is light and AAA.
       --accent-bright pure brand red, decorative only (logo, glows, top bars) */
    --accent:#e50914;
    --accent-bright:#ff0000;
    --accent-line:#e50914;
    --accent-soft:#ff6369;
    --accent-purple:#b20710;
    --text-body:#d9d9db;
    --border-strong:rgba(255,255,255,.16);
    --focus:#ffffff;
    --glow:rgba(229,9,20,.6);
    --accent-pink:#ff2d55;
    --on-accent:#ffffff;
    --text-primary:#f5f5f5;
    --text-secondary:#b3b3b3;
    --text-muted:#a8a8ae;
    --good:#2ecc71;
    --good-bg:rgba(46,204,113,.14);
    --bad:#ff6369;
    --bad-bg:rgba(255,71,71,.16);
    color-scheme:dark;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html,body{height:100%;}
  body{
    background:var(--page);
    color:var(--text-primary);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.4;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }
  .bg-glow{
    position:fixed;inset:0;z-index:-2;
    background:
      radial-gradient(circle at 12% -4%, rgba(255,0,0,.16), transparent 40%),
      radial-gradient(circle at 90% 105%, rgba(255,0,0,.10), transparent 45%),
      var(--page);
  }
  .wrap{
    max-width:640px;
    margin:0 auto;
    padding:28px 18px 60px;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  @media(min-width:860px){
    .wrap{ max-width:760px; padding-top:44px; }
  }
  header.top{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:22px;
  }
  .brand{
    display:flex;align-items:center;gap:10px;
    font-weight:900;font-size:20px;letter-spacing:.01em;
  }
  .brand .dot{
    width:24px;height:24px;border-radius:6px;flex:none;
    background:var(--accent-bright);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 14px rgba(255,0,0,.65);
  }
  .brand .dot::after{
    content:'';width:0;height:0;margin-left:2px;
    border-style:solid;border-width:6px 0 6px 9px;
    border-color:transparent transparent transparent #fff;
  }
  .header-actions{display:flex;align-items:center;gap:8px;position:relative;}
  .lang-panel{display:flex;gap:4px;}
  .lang-btn{
    appearance:none;cursor:pointer;font-family:inherit;font-weight:800;font-size:11px;
    padding:7px 9px;border-radius:4px;border:1px solid var(--border);
    background:var(--panel-2);color:var(--text-secondary);
  }
  .lang-btn.active{
    background:var(--accent);color:var(--on-accent);border-color:var(--accent);
    box-shadow:0 0 12px rgba(255,0,0,.45);
  }
  .icon-toggle{
    appearance:none;border:1px solid var(--border);background:var(--panel-2);
    width:32px;height:32px;border-radius:4px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;color:var(--text-primary);
  }
  .icon-toggle:hover{background:var(--panel-hover);border-color:var(--accent-line);}
  .icon-toggle svg{width:17px;height:17px;display:block;}
  /* Narrow phones (≤360px, e.g. iPhone SE): shrink the header just enough that the
     brand name stays on one line instead of wrapping against the FR/EN/volume controls. */
  @media(max-width:360px){
    header.top{ gap:8px; }
    .brand{ font-size:16px; gap:7px; }
    .brand .dot{ width:20px; height:20px; border-radius:5px; }
    .brand .dot::after{ border-width:5px 0 5px 7px; }
    .header-actions{ gap:5px; }
    .lang-panel{ gap:3px; }
    .lang-btn{ padding:6px 7px; font-size:10px; }
    .icon-toggle{ width:28px; height:28px; }
    .icon-toggle svg{ width:15px; height:15px; }
  }
  .volume-popover{
    position:absolute;top:44px;right:0;z-index:40;width:220px;
    background:var(--panel-1);border:1px solid var(--border);border-radius:4px;
    padding:14px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  }
  .volume-popover[hidden]{display:none;}
  .volume-popover .sub{font-size:12px;margin-bottom:10px;}
  .volume-popover .volume-row{background:transparent;border:none;padding:0;margin-bottom:0;}
  .panel{
    position:relative;
    background:var(--panel-1);
    border:1px solid var(--border);
    border-radius:4px;
    padding:22px;
    margin-bottom:16px;
    box-shadow:0 4px 20px -10px rgba(0,0,0,.6);
  }
  .panel::before{
    content:'';position:absolute;top:0;left:16px;right:16px;height:3px;
    background:var(--accent-bright);
    box-shadow:0 0 10px rgba(255,0,0,.7);
  }
  h1{font-size:26px;font-weight:900;margin-bottom:6px;letter-spacing:-.01em;}
  h2{font-size:18px;font-weight:800;margin-bottom:12px;color:var(--text-primary);}
  p.sub{color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:4px;}
  .muted{color:var(--text-muted);font-size:13px;}
  .screen{display:none;flex:1;flex-direction:column;}
  .screen.active{display:flex;}
  .btn{
    appearance:none;border:none;cursor:pointer;
    font-family:inherit;font-weight:800;font-size:14px;
    padding:13px 20px;
    border-radius:4px;
    transition:filter .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .btn:active{transform:scale(.98);}
  .btn-primary{
    background:var(--accent);
    color:var(--on-accent);
    box-shadow:0 0 0 rgba(255,0,0,0);
  }
  .btn-primary:hover{filter:brightness(1.08);box-shadow:0 4px 22px -6px rgba(255,0,0,.65);}
  .btn-primary:disabled{opacity:.35;cursor:not-allowed;filter:none;box-shadow:none;}
  .btn-ghost{
    background:var(--panel-1);
    border:1px solid var(--accent-line);
    color:var(--accent-soft);
  }
  .btn-ghost:hover{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 22px -6px rgba(255,0,0,.65);}
  .btn-block{width:100%;text-align:center;}
  .btn-back{
    align-self:flex-start;
    appearance:none;cursor:pointer;font-family:inherit;
    background:var(--panel-1);border:1px solid var(--border);border-radius:4px;
    color:var(--text-primary);font-weight:800;font-size:13px;
    padding:9px 14px;margin-bottom:14px;
    transition:border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .btn-back:hover{border-color:var(--accent-line);color:var(--accent-soft);box-shadow:0 4px 18px -8px rgba(255,0,0,.6);}
  .btn-back:active{transform:scale(.98);}
  .row{display:flex;gap:10px;flex-wrap:wrap;}
  .field{margin-bottom:14px;}
  label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin-bottom:6px;}
  input[type=text], input[type=number], textarea{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--border);
    color:var(--text-primary);
    font-family:inherit;
    font-size:14px;
    padding:11px 12px;
    border-radius:4px;
  }
  input:focus, textarea:focus{outline:2px solid var(--accent-soft);outline-offset:1px;}
  ::placeholder{color:#9a9aa1;opacity:1;}
  textarea{resize:vertical;min-height:90px;line-height:1.6;}
  .toggle-row{display:flex;gap:8px;}
  .toggle-opt{
    flex:1;
    text-align:center;
    padding:10px 8px;
    background:var(--panel-2);
    border:1px solid var(--border);
    border-radius:4px;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
    color:var(--text-secondary);
  }
  .toggle-opt.active{
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
  }
  .player-chip{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:var(--panel-2);border:1px solid var(--border);
    border-radius:4px;padding:9px 12px;margin-bottom:8px;font-size:14px;font-weight:600;
  }
  .player-chip .chip-left{display:flex;align-items:center;gap:8px;min-width:0;}
  .player-chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .player-chip .badge{
    font-size:11px;font-weight:700;color:#5be38e;background:var(--good-bg);
    border-radius:3px;padding:2px 7px;white-space:nowrap;flex:none;
  }
  .player-chip .rm{cursor:pointer;color:var(--text-muted);font-size:13px;font-weight:700;flex:none;}
  .player-chip .rm:hover{color:var(--bad);}
  .avatar{
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:4px;color:#fff;font-weight:900;flex:none;
    vertical-align:middle;
  }
  .guess-btn{display:flex;align-items:center;justify-content:center;gap:8px;}
  .divider{border:none;border-top:1px solid var(--border);margin:18px 0;}
  .center{text-align:center;}

  /* FAQ (home screen) — plain <details>/<summary>, no icons */
  .faq-panel{ }
  .faq-panel-summary{
    cursor:pointer;font-weight:800;font-size:18px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    color:var(--text-primary);
  }
  .faq-panel-summary::-webkit-details-marker{display:none;}
  .faq-panel-summary::after{content:'+';color:var(--accent-soft);font-size:20px;font-weight:900;flex:none;}
  .faq-panel[open] .faq-panel-summary::after{content:'\2212';}
  .faq-panel[open] .faq-panel-summary{margin-bottom:12px;}
  .faq-item{border-bottom:1px solid var(--border);padding:12px 0;}
  .faq-item:last-child{border-bottom:none;}
  .faq-item summary{
    cursor:pointer;font-weight:800;font-size:14px;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    color:var(--text-primary);
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+';color:var(--accent-soft);font-size:18px;font-weight:900;flex:none;}
  .faq-item[open] summary::after{content:'\2212';}
  .faq-item p{margin-top:8px;color:var(--text-secondary);font-size:13px;line-height:1.6;}

  /* individual track slots with a live YouTube-thumbnail preview */
  .track-slot{
    display:flex;align-items:center;gap:10px;
    background:var(--panel-2);border:1px solid var(--border);
    border-radius:4px;padding:6px 10px;margin-bottom:8px;
  }
  .track-slot .track-input{
    flex:1;background:transparent;border:none;padding:8px 2px;font-size:13px;color:var(--text-primary);
  }
  .track-slot .track-input:focus{outline:none;}
  .track-slot .track-preview img{
    width:56px;height:32px;object-fit:cover;border-radius:2px;display:block;
    border:1px solid var(--border);
  }

  /* online room: code + lobby + countdown */
  .room-code{
    font-size:34px;font-weight:900;letter-spacing:.18em;color:var(--accent-soft);
    background:var(--panel-2);border:1px solid var(--border);border-radius:4px;
    padding:14px;margin:10px 0;
    text-shadow:0 0 18px rgba(255,0,0,.55);
  }
  .countdown-overlay{
    position:fixed;inset:0;z-index:50;
    background:rgba(0,0,0,.8);
    display:flex;align-items:center;justify-content:center;
  }
  .countdown-overlay[hidden]{display:none;}
  .countdown-num{
    font-size:110px;font-weight:900;color:#fff;
    text-shadow:0 0 50px rgba(255,0,0,.85);
    animation:countPulse .85s ease;
    text-align:center;padding:0 24px;
  }
  .countdown-num.countdown-num-text{ font-size:48px; color:var(--accent-soft); }
  @keyframes countPulse{ 0%{transform:scale(1.7);opacity:0;} 45%{transform:scale(1);opacity:1;} 100%{transform:scale(1);opacity:1;} }

  /* HUD (round screen) */
  .hud{
    display:flex;gap:10px;margin-bottom:16px;
  }
  .hud-seg{
    flex:1;background:var(--panel-1);border:1px solid var(--border);
    border-radius:4px;padding:9px 12px;text-align:center;
  }
  .hud-seg .hud-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;}
  .hud-seg .hud-val{font-size:19px;font-weight:900;color:var(--accent-soft);}

  .player-frame{
    position:relative;width:100%;aspect-ratio:16/9;
    background:#000;border-radius:4px;overflow:hidden;
    border:1px solid var(--border);
    margin-bottom:16px;
  }
  .player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .audio-cover{
    position:absolute;inset:0;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    /* fully opaque at every point — no alpha anywhere in this gradient — so the
       video underneath never shows through, even faintly */
    background:radial-gradient(circle at 50% 40%, var(--panel-2), var(--page) 75%);
  }
  .eq{display:flex;align-items:flex-end;gap:5px;height:44px;}
  .eq span{width:7px;border-radius:3px;background:linear-gradient(180deg,var(--accent-bright),var(--accent));animation:eq 1.1s ease-in-out infinite;}
  .eq span:nth-child(1){animation-delay:-1.0s;} .eq span:nth-child(2){animation-delay:-.7s;}
  .eq span:nth-child(3){animation-delay:-.4s;} .eq span:nth-child(4){animation-delay:-.9s;}
  .eq span:nth-child(5){animation-delay:-.2s;}
  @keyframes eq{0%,100%{height:8px;}50%{height:40px;}}

  .volume-row{
    display:flex;align-items:center;gap:10px;
    background:var(--panel-1);border:1px solid var(--border);
    border-radius:4px;padding:9px 14px;margin-bottom:16px;
  }
  .volume-row .icon-btn{
    appearance:none;border:none;background:none;cursor:pointer;
    line-height:1;flex:none;padding:2px;color:var(--text-primary);
    display:flex;align-items:center;justify-content:center;
  }
  .volume-row .icon-btn svg{width:17px;height:17px;display:block;}
  .volume-row input[type=range]{
    flex:1;accent-color:var(--accent);height:20px;cursor:pointer;
  }
  .volume-row .vol-val{font-size:12px;font-weight:700;color:var(--text-muted);width:32px;text-align:right;flex:none;}

  .guess-title{font-weight:800;font-size:15px;margin-bottom:10px;}
  .guess-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
  .guess-btn{
    padding:13px 8px;border-radius:4px;border:1px solid var(--border);
    background:var(--panel-2);color:var(--text-primary);font-weight:700;font-size:14px;
    cursor:pointer;text-align:center;
  }
  .guess-btn.selected{background:var(--good-bg);border-color:var(--good);color:var(--good);}
  .guess-btn.owner{opacity:.35;pointer-events:none;}
  .guess-btn.locked{opacity:.5;pointer-events:none;}
  .guess-btn.locked.selected{opacity:1;}

  .reveal-card{text-align:center;padding:26px 18px;}
  .reveal-name{font-size:24px;font-weight:900;color:var(--accent-soft);margin:8px 0 4px;}
  .reveal-pts{font-size:13px;color:var(--text-secondary);}

  .leaderboard{list-style:none;}
  .lb-row{
    display:flex;align-items:center;gap:12px;
    background:var(--panel-2);border:1px solid var(--border);
    border-radius:4px;padding:11px 14px;margin-bottom:8px;
  }
  .lb-row .rank{font-weight:900;font-size:16px;color:var(--accent-soft);width:22px;}
  .lb-row.first{border-color:var(--accent-line);background:rgba(255,0,0,.10);box-shadow:0 0 16px -4px rgba(255,0,0,.5);}
  .lb-row .name{flex:1;font-weight:700;}
  .lb-row .pts{font-weight:900;color:var(--good);}

  /* on taller/wider viewports the home screen is short — center it in the available
     space instead of leaving it stuck at the top with empty space below */
  #screenHome.active{ justify-content:center; }

  @media(max-width:420px){ .guess-grid{grid-template-columns:1fr;} }

  [hidden]{display:none !important;}
  a{color:var(--accent-soft);}
  a:hover{color:var(--text-primary);}
  .skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:8px 12px;z-index:100;}
  .skip-link:focus{left:8px;}
  .brand{color:var(--text-primary);text-decoration:none;}
  .brand:hover{color:var(--text-primary);}
  .lang-btn{text-decoration:none;display:inline-block;line-height:1;}

  /* ---------- top nav ---------- */
  .site-nav{
    display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
    margin:-8px 0 22px;padding-bottom:2px;
  }
  .site-nav::-webkit-scrollbar{display:none;}
  .site-nav a{
    flex:none;font-size:13px;font-weight:700;color:var(--text-secondary);text-decoration:none;
    padding:7px 11px;border-radius:4px;border:1px solid transparent;white-space:nowrap;
  }
  .site-nav a:hover{color:var(--text-primary);border-color:var(--border);}
  .site-nav a[aria-current="page"]{color:var(--text-primary);background:var(--panel-2);border-color:var(--border);}
  body.in-game .site-nav{display:none;}

  /* ---------- home hero ---------- */
  .hero{padding:38px 24px 30px;}
  .hero .eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:10px;}
  .hero h1{font-size:30px;line-height:1.15;margin-bottom:10px;}
  .hero h1 em{font-style:normal;color:var(--accent-soft);}
  .hero .sub{max-width:520px;margin:0 auto 22px;}
  .trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:16px;font-size:12px;color:var(--text-muted);font-weight:600;}
  .trust-row span::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--good);margin-right:6px;vertical-align:middle;}
  .mode-hint{display:block;font-size:12px;font-weight:600;margin-top:3px;}
  @media(min-width:860px){ .hero h1{font-size:38px;} }
  body.in-game .home-only{display:none !important;}

  /* ---------- home SEO sections ---------- */
  .home-section{margin-bottom:16px;}
  .home-section h2{font-size:20px;}
  .home-section p{color:var(--text-secondary);font-size:14px;line-height:1.65;margin-bottom:10px;}
  .home-section p:last-child{margin-bottom:0;}
  .steps{display:grid;gap:10px;counter-reset:step;}
  @media(min-width:640px){ .steps{grid-template-columns:repeat(3,1fr);} }
  .step{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:14px;}
  .step::before{
    counter-increment:step;content:counter(step);
    display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
    background:var(--accent);color:#fff;font-weight:900;font-size:13px;margin-bottom:10px;
    box-shadow:0 0 10px rgba(255,0,0,.5);
  }
  .step h3{font-size:14px;font-weight:800;margin-bottom:4px;}
  .step p{font-size:13px;margin:0;}
  .two-col{display:grid;gap:10px;}
  @media(min-width:640px){ .two-col{grid-template-columns:1fr 1fr;} }
  .card{background:var(--panel-2);border:1px solid var(--border);border-radius:4px;padding:16px;}
  .card h3{font-size:15px;font-weight:800;margin-bottom:6px;}
  .card p{font-size:13px;}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px;}
  .chip{font-size:13px;font-weight:700;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:7px 12px;color:var(--text-primary);}
  .link-list{list-style:none;display:grid;gap:8px;}
  .link-list a{
    display:block;background:var(--panel-2);border:1px solid var(--border);border-radius:4px;
    padding:12px 14px;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:14px;
  }
  .link-list a span{display:block;font-weight:500;font-size:12px;color:var(--text-muted);margin-top:3px;}
  .link-list a:hover{border-color:var(--accent-line);}
  .faq-static .faq-item:first-child{padding-top:0;}

  /* ---------- theme picker / banners ---------- */
  select{
    width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--text-primary);
    font-family:inherit;font-size:14px;padding:11px 12px;border-radius:4px;
  }
  select:focus{outline:2px solid var(--accent-soft);outline-offset:1px;}
  .theme-row{display:flex;gap:8px;}
  .theme-row select{flex:1;min-width:0;}
  .theme-row .btn{flex:none;padding:11px 14px;}
  .theme-banner{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    background:linear-gradient(90deg, rgba(255,0,0,.16), rgba(255,0,0,.04));
    border:1px solid rgba(255,71,71,.35);border-radius:4px;padding:10px 14px;margin-bottom:16px;
    font-size:14px;font-weight:700;
  }
  .theme-banner .theme-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-soft);font-weight:800;}
  .badge-theme{color:var(--accent-soft) !important;background:rgba(255,71,71,.12) !important;max-width:220px;overflow:hidden;text-overflow:ellipsis;}

  /* ---------- live standings ---------- */
  .standings{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
  .standing{
    display:inline-flex;align-items:center;gap:6px;background:var(--panel-1);border:1px solid var(--border);
    border-radius:999px;padding:4px 10px 4px 6px;font-size:12px;font-weight:700;
  }
  .standing.me{border-color:var(--accent-line);}
  .standing-rank{color:var(--text-muted);font-weight:900;min-width:10px;text-align:center;}
  .standing-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .standing-pts{color:var(--good);font-weight:900;}
  .reveal-card .standings{justify-content:center;margin:14px 0 0;}

  /* ---------- awards ---------- */
  .awards{margin-top:4px;}
  .awards h2{margin-bottom:10px;}
  .award{
    background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--accent-line);
    border-radius:4px;padding:12px 14px;margin-bottom:8px;text-align:left;
  }
  .award-kind{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-soft);font-weight:800;}
  .award-name{font-size:17px;font-weight:900;margin:2px 0;}
  .award-sub{font-size:12px;color:var(--text-secondary);}

  /* ---------- ads & support ---------- */
  .ad-wrap{margin:6px 0 18px;min-height:0;text-align:center;}
  .ad-wrap .ad-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
  .ad-wrap.is-empty{display:none;}
  .ad-wrap ins{display:block;min-height:100px;}
  .support-box{text-align:center;}
  .support-box p{margin-bottom:12px;}

  /* ---------- footer ---------- */
  .site-footer{
    margin-top:28px;padding-top:20px;border-top:1px solid var(--border);
    font-size:12px;color:var(--text-muted);
  }
  .site-footer nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;}
  .site-footer a{color:var(--text-secondary);text-decoration:none;}
  .site-footer a:hover{color:var(--text-primary);text-decoration:underline;}
  body.in-game .site-footer{display:none;}

  /* ---------- article pages ---------- */
  .breadcrumb{font-size:12px;color:var(--text-muted);margin-bottom:14px;}
  .breadcrumb a{color:var(--text-secondary);text-decoration:none;}
  .breadcrumb a:hover{text-decoration:underline;}
  .article{padding:28px 22px;}
  .article h1{font-size:28px;line-height:1.2;margin-bottom:10px;}
  .article .lede{font-size:16px;color:var(--text-secondary);line-height:1.6;margin-bottom:18px;}
  .article .meta{font-size:12px;color:var(--text-muted);margin-bottom:22px;}
  .article h2{font-size:21px;margin:30px 0 10px;line-height:1.25;}
  .article h3{font-size:16px;font-weight:800;margin:20px 0 8px;}
  .article p, .article li{font-size:15px;line-height:1.7;color:var(--text-body);}
  .article p{margin-bottom:12px;}
  .article ul, .article ol{padding-left:22px;margin-bottom:14px;}
  .article li{margin-bottom:6px;}
  .article strong{color:var(--text-primary);}
  .article table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:14px;}
  .article th, .article td{border:1px solid var(--border);padding:9px 10px;text-align:left;vertical-align:top;}
  .article th{background:var(--panel-2);font-weight:800;}
  .table-scroll{overflow-x:auto;}
  .callout{
    background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--accent-line);
    border-radius:4px;padding:14px 16px;margin:18px 0;
  }
  .callout p:last-child{margin-bottom:0;}
  .cta-box{text-align:center;padding:26px 20px;}
  .cta-box h2{margin-top:0;}
  .cta-box p{color:var(--text-secondary);margin-bottom:14px;}
  .cta-box .btn{display:inline-block;text-decoration:none;}
  @media(max-width:420px){ .article h1{font-size:24px;} .article{padding:22px 16px;} }

  /* ---------- theme editor ---------- */
  .theme-input-wrap{position:relative;}
  .theme-input-wrap input{padding-right:58px;font-weight:700;}
  .theme-count{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text-muted);font-weight:700;pointer-events:none;}
  .theme-actions{display:flex;gap:8px;margin-top:8px;}
  .theme-actions .btn{flex:1;padding:10px 12px;font-size:13px;}
  .theme-picker{max-height:300px;overflow-y:auto;padding-right:4px;border-top:1px solid var(--border);padding-top:10px;}
  .theme-cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:6px 0 6px;}
  .theme-group .chips{margin:0 0 8px;gap:6px;}
  .chip-btn{appearance:none;cursor:pointer;font-family:inherit;text-align:left;font-size:12px;padding:7px 11px;}
  .chip-btn:hover{border-color:var(--accent-line);}
  .chip-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}

  /* ---------- one theme per song ---------- */
  #themeRows{display:flex;flex-direction:column;gap:6px;}
  .theme-row-item{display:flex;align-items:center;gap:8px;border-radius:4px;}
  .theme-num{
    flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);border:1px solid var(--border);font-size:12px;font-weight:900;color:var(--text-secondary);
  }
  .theme-row-item.focused .theme-num{background:var(--accent);border-color:var(--accent);color:#fff;}
  .theme-row-item .theme-input{flex:1;min-width:0;font-weight:700;padding:10px 12px;}
  .slot-theme{font-size:13px;font-weight:800;color:var(--text-primary);margin:12px 0 6px;line-height:1.35;}
  .slot-theme:first-child{margin-top:0;}
  .slot-theme-num{
    display:inline-block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
    color:#fff;background:var(--accent);border-radius:3px;padding:2px 6px;margin-right:8px;vertical-align:1px;
  }
  .theme-intro{
    position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:24px;
    background:rgba(0,0,0,.78);animation:introFade .3s ease;cursor:pointer;
  }
  .theme-intro-card{
    max-width:520px;width:100%;text-align:center;background:var(--panel-1);border:1px solid rgba(255,71,71,.5);
    border-radius:6px;padding:34px 24px;box-shadow:0 0 60px -10px rgba(255,0,0,.6);animation:countPulse .7s ease;
  }
  .theme-intro-label{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:12px;}
  .theme-intro-text{font-size:28px;font-weight:900;line-height:1.2;}
  @keyframes introFade{from{opacity:0;}to{opacity:1;}}

  /* ---------- accessibility: visible keyboard focus (RGAA 10.7 / WCAG 2.4.7) ---------- */
  a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
  [tabindex]:focus-visible, .toggle-opt:focus-visible, .guess-btn:focus-visible{
    outline:2px solid var(--focus);outline-offset:2px;
  }
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  }

  /* ---------- side ad columns ----------
     Content column = 760px. Each ad column is centred in the free space on its side,
     and its size follows the screen:
       1100-1279px (small laptops)       -> 120px wide
       1280-1599px (1366/1440/1536 laptops) -> 160px wide
       1600px+     (1920x1080 and up)      -> 300px wide
     Height adapts to the screen height (see ads.js), so it fits 1366x768 laptops too.
     Below 1100px there's no room: the in-content slots are used instead. */
  .side-ad{display:none;}
  @media (min-width:1100px){
    .side-ad{
      --side-w:120px;
      display:block;position:fixed;z-index:1;margin:0;
      width:var(--side-w);
      top:50%;transform:translateY(-50%);
    }
    .side-left{left:calc((50vw - 380px - var(--side-w)) / 2);}
    .side-right{right:calc((50vw - 380px - var(--side-w)) / 2);}
    .ad-wrap:not(.side-ad){display:none !important;}
  }
  @media (min-width:1280px){ .side-ad{--side-w:160px;} }
  @media (min-width:1600px){ .side-ad{--side-w:300px;} }

  /* Show the "Publicité" label only once Google actually fills the slot
     (before approval, or when no ad is available, nothing is shown at all). */
  .ad-wrap .ad-label{visibility:hidden;}
  .ad-wrap:has(ins[data-ad-status="filled"]) .ad-label{visibility:visible;}
  ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important;}


  /* ---------- header controls: one consistent family (lang switch, sound, display mode) ---------- */
  .header-actions{gap:6px;}
  .lang-panel{
    display:flex;gap:2px;padding:2px;height:36px;align-items:center;
    background:var(--panel-2);border:1px solid var(--border-strong);border-radius:8px;
  }
  .lang-btn{
    height:30px;min-width:34px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;
    border:none;border-radius:6px;background:transparent;color:var(--text-secondary);
    font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:none;
  }
  .lang-btn:hover{color:var(--text-primary);background:var(--panel-hover);}
  .lang-btn.active{background:var(--accent);color:var(--on-accent);box-shadow:none;}
  .icon-toggle{
    width:36px;height:36px;border-radius:8px;border:1px solid var(--border-strong);
    background:var(--panel-2);color:var(--text-primary);
  }
  .icon-toggle svg{width:18px;height:18px;}
  .volume-popover{top:46px;border-radius:8px;}
  @media(max-width:360px){
    .lang-panel{height:32px;}
    .lang-btn{height:26px;min-width:30px;padding:0 7px;font-size:11px;}
    .icon-toggle{width:32px;height:32px;}
  }

  /* ======================================================================
     "Sobre" display mode — light, calm, AAA contrast (7:1+ for all text),
     no glows, no gradients, underlined links, bigger text, strong focus.
     Toggled with the half-circle button in the header (saved per device),
     and applied automatically when the system asks for more contrast.
     ====================================================================== */
  :root[data-theme="sobre"]{
    --page:#f4f5f7;
    --panel-1:#ffffff;
    --panel-2:#eef0f3;
    --panel-hover:#e3e6ea;
    --border:rgba(17,19,24,.14);
    --border-strong:#8a8f98;
    --accent:#a30000;
    --accent-bright:#a30000;
    --accent-line:#a30000;
    --accent-soft:#a30000;
    --accent-purple:#a30000;
    --on-accent:#ffffff;
    --text-primary:#111318;
    --text-secondary:#33363d;
    --text-muted:#4a4e57;
    --text-body:#22252b;
    --good:#176b2f;
    --good-bg:#e3f4e8;
    --bad:#a30000;
    --bad-bg:#fbe9e9;
    --focus:#111318;
    color-scheme:light;
  }
  [data-theme="sobre"] body{font-size:16px;}
  [data-theme="sobre"] .bg-glow{background:var(--page);}
  [data-theme="sobre"] *, [data-theme="sobre"] *::before, [data-theme="sobre"] *::after{
    box-shadow:none !important;text-shadow:none !important;
  }
  [data-theme="sobre"] a{text-decoration:underline;text-underline-offset:2px;}
  [data-theme="sobre"] .btn, [data-theme="sobre"] .brand, [data-theme="sobre"] .site-nav a,
  [data-theme="sobre"] .link-list a, [data-theme="sobre"] .lang-btn, [data-theme="sobre"] .skip-link{text-decoration:none;}
  [data-theme="sobre"] .panel{border-color:var(--border);}
  [data-theme="sobre"] .panel::before{height:2px;}
  [data-theme="sobre"] p.sub, [data-theme="sobre"] .home-section p, [data-theme="sobre"] .step p,
  [data-theme="sobre"] .card p, [data-theme="sobre"] .faq-item p{font-size:15px;}
  [data-theme="sobre"] .badge{color:#0d4a20 !important;}
  [data-theme="sobre"] .badge-theme{color:var(--accent-soft) !important;background:var(--bad-bg) !important;}
  [data-theme="sobre"] .theme-banner{background:var(--bad-bg);border-color:var(--border-strong);}
  [data-theme="sobre"] .lb-row.first{background:var(--bad-bg);}
  [data-theme="sobre"] .theme-intro-card{border-color:var(--border-strong);}
  [data-theme="sobre"] input, [data-theme="sobre"] select, [data-theme="sobre"] textarea{
    background:#ffffff;border-color:var(--border-strong);
  }
  [data-theme="sobre"] .track-slot{background:#ffffff;border-color:var(--border-strong);}
  [data-theme="sobre"] ::placeholder{color:#5c606a;}
  [data-theme="sobre"] .eq span{animation:none;height:24px;}
  [data-theme="sobre"] a:focus-visible, [data-theme="sobre"] button:focus-visible,
  [data-theme="sobre"] [tabindex]:focus-visible, [data-theme="sobre"] summary:focus-visible,
  [data-theme="sobre"] .toggle-opt:focus-visible, [data-theme="sobre"] .guess-btn:focus-visible{outline-width:3px;}
  /* the theme switch icon shows which mode you'd switch to */
  .theme-toggle .icon-sun{display:none;}
  [data-theme="sobre"] .theme-toggle .icon-moon{display:none;}
  [data-theme="sobre"] .theme-toggle .icon-sun{display:block;}

  /* ---------- "turn on sound" fallback when autoplay is blocked (iPhone…) ---------- */
  .sound-unlock{
    position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:16px;text-align:center;background:rgba(10,10,11,.86);
  }
  .sound-unlock p{font-size:13px;color:#e6e6e8;max-width:300px;line-height:1.45;}
  .sound-unlock .btn{padding:14px 26px;font-size:15px;}
  [data-theme="sobre"] .sound-unlock{background:rgba(244,245,247,.95);}
  [data-theme="sobre"] .sound-unlock p{color:var(--text-primary);}

  /* round timer */
  .hud-seg.urgent{border-color:var(--accent-line);}
  .hud-seg.urgent .hud-val{color:var(--accent-soft);}

  /* duplicate songs */
  .track-slot.dup{border-color:var(--accent-line);}
  .dup-note{font-size:12px;color:var(--accent-soft);margin:-4px 0 8px;font-weight:600;}
  #lobbyDupHint{margin:8px 0 0;}

  /* ---------- simplified theme editor ---------- */
  .setup-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .setup-row label{margin:0;}
  .stepper{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--panel-2);}
  .stepper input{width:52px;text-align:center;border:none;border-radius:0;background:transparent;font-weight:800;padding:8px 4px;-moz-appearance:textfield;}
  .stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .stepper-btn{appearance:none;border:none;background:transparent;color:var(--text-primary);width:40px;height:40px;font-size:20px;font-weight:800;cursor:pointer;}
  .stepper-btn:hover{background:var(--panel-hover);}
  .theme-row-item{gap:8px;}
  .theme-reroll{
    flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;
    border:1px solid var(--border-strong);border-radius:8px;background:var(--panel-2);color:var(--text-secondary);
  }
  .theme-reroll:hover{color:var(--text-primary);border-color:var(--accent-line);}
  .theme-reroll svg{width:17px;height:17px;}
  .theme-row-item.flash .theme-input{animation:themeFlash .5s ease;}
  @keyframes themeFlash{from{background:var(--bad-bg);}to{background:var(--panel-2);}}
  .theme-num{background:var(--panel-2);}
  .theme-tip{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text-secondary);margin-bottom:10px;line-height:1.45;}
  .theme-tip svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent-soft);}
  .theme-field{position:relative;flex:1;min-width:0;display:block;}
  .theme-field .theme-input{width:100%;padding-right:34px;}
  .theme-pen{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-muted);pointer-events:none;}
  .theme-field:focus-within .theme-pen{color:var(--accent-soft);}
  #themeEditor .theme-actions{display:flex;gap:8px;margin-top:10px;}
  #themeEditor .theme-actions .btn{flex:1;padding:11px 10px;font-size:13px;}
  .theme-input::placeholder{font-weight:500;}

  /* ---------- persistent room ---------- */
  .end-actions h2{margin-bottom:4px;}
  .kick-btn{
    appearance:none;flex:none;width:30px;height:30px;border-radius:6px;cursor:pointer;
    border:1px solid var(--border-strong);background:transparent;color:var(--text-secondary);font-size:13px;font-weight:800;
  }
  .kick-btn:hover{color:var(--accent-soft);border-color:var(--accent-line);}
  .badge-wait{color:var(--text-secondary) !important;background:var(--panel-hover) !important;}
  .relobby-note{
    background:var(--bad-bg);border:1px solid var(--accent-line);border-radius:6px;padding:10px 12px;
    font-size:14px;font-weight:700;margin-bottom:14px;color:var(--text-primary);
  }
  .wait-next{margin-top:14px;font-size:13px;color:var(--text-secondary);}

  /* rules summary (joiners + host lobby) */
  .rules-card h2{margin-bottom:10px;}
  .rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  @media(max-width:340px){ .rules-grid{grid-template-columns:1fr;} }
  .rule{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
  .rule-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);}
  .rule-v{font-size:14px;font-weight:700;color:var(--text-primary);}
  .rules-themes{margin:6px 0 0;padding-left:22px;}
  .rules-themes li{font-size:14px;font-weight:600;margin-bottom:4px;color:var(--text-primary);}
  .rules-themes em{color:var(--text-muted);font-weight:500;}

  /* owner note + vote progress */
  .mine-note{
    background:var(--bad-bg);border:1px solid var(--accent-line);border-radius:6px;padding:12px 14px;
    font-size:14px;font-weight:700;margin-bottom:12px;text-align:center;color:var(--text-primary);
  }
  .vote-progress{font-size:13px;font-weight:700;color:var(--text-secondary);text-align:center;margin:-6px 0 12px;}
  .vote-progress:empty{display:none;}

  /* QR code */
  .room-qr{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px;}
  .room-qr .qr-img{background:#fff;padding:8px;border-radius:8px;width:168px;height:168px;}
  .room-qr .qr-img svg{width:100%;height:100%;display:block;}
  /* playlist recap */
  .recap{margin-top:14px;}
  .recap h2{margin-bottom:10px;}
  .recap-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:12px;text-align:left;}
  .recap-list li{min-width:0;}
  .recap > a.btn{display:flex;justify-content:center;width:100%;text-decoration:none;margin-bottom:10px;}
  .recap-list a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary);
    background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:6px;}
  .recap-list a:hover{border-color:var(--accent-line);}
  .recap-list img{width:96px;height:54px;object-fit:cover;border-radius:4px;flex:none;background:#000;}
  .recap-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
  .recap-name{font-weight:800;font-size:14px;}
  .recap-theme{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---------- song slot: start time + link check ---------- */
  .track-slot{display:block;}
  .track-main{display:flex;align-items:center;gap:10px;}
  .track-slot.bad{border-color:var(--accent-line);}
  .track-extra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed var(--border);margin-top:4px;padding:6px 2px 2px;}
  .track-extra[hidden]{display:none;}
  label.track-start{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;}
  .track-start svg{width:11px;height:11px;fill:var(--accent-soft);flex:none;}
  .track-slot input.track-start-input{width:68px;padding:5px 6px;font-size:13px;text-align:center;font-weight:700;letter-spacing:.02em;
    background:var(--panel-1);border:1px solid var(--border-strong);text-transform:none;}
  .track-slot input.track-start-input.invalid{border-color:var(--accent-line);}
  .track-check{font-size:12px;color:var(--text-muted);flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .track-check.ok{color:var(--good);}
  .track-check.bad{color:var(--accent-soft);white-space:normal;font-weight:700;}
  [data-theme="sobre"] .track-slot input.track-start-input{background:#fff;}

  /* ---------- TV mode (host screen plugged into a TV, everyone plays on their phone) ---------- */
  .tv-only{display:none;}
  body.tv-mode .tv-only{display:block;}
  body.tv-mode button.tv-only{display:inline-block;}
  .tv-lobby-hint{font-weight:800;color:var(--text-primary);margin-top:6px;}
  body.tv-mode .side-ad{display:none !important;}
  @media (min-width:1000px){
    body.tv-mode .wrap{max-width:1180px;}
    body.tv-mode .room-code{font-size:72px;padding:20px;}
    body.tv-mode .room-qr .qr-img{width:300px;height:300px;}
    body.tv-mode .tv-lobby-hint{font-size:22px;}
    body.tv-mode #lobbyList .player-chip{font-size:20px;}
    body.tv-mode #screenPlay .hud-seg .hud-val{font-size:40px;}
    body.tv-mode #screenPlay .hud-seg .hud-lbl{font-size:15px;}
    body.tv-mode #screenPlay .theme-banner{font-size:34px;padding:20px 26px;}
    body.tv-mode #screenPlay .theme-banner .theme-label{font-size:16px;}
    body.tv-mode #guessTitle{font-size:38px;text-align:center;margin:10px 0;}
    body.tv-mode #voteProgress{font-size:34px;margin:6px 0 18px;color:var(--text-primary);}
    body.tv-mode .reveal-name{font-size:84px;}
    body.tv-mode .reveal-pts{font-size:24px;}
    body.tv-mode #revealVotesList{font-size:20px;columns:2;}
    body.tv-mode .standings .standing{font-size:20px;padding:8px 14px;}
    body.tv-mode .standing-name{max-width:220px;}
    body.tv-mode #screenEnd .leaderboard li{font-size:24px;}
    body.tv-mode #playerFrame{width:min(100%, calc(42vh * 16 / 9));margin-left:auto;margin-right:auto;}
    body.tv-mode #screenPlay .hud{margin-bottom:12px;}
  }

  /* ---------- live reactions ---------- */
  .bubbles{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;}
  .bub{position:absolute;bottom:96px;animation:bub-rise var(--dur,3.6s) cubic-bezier(.3,.6,.4,1) forwards;}
  .bub .sway{display:flex;flex-direction:column;align-items:center;gap:4px;animation:bub-sway 1.4s ease-in-out infinite alternate;}
  .bub .e{font-size:44px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));animation:bub-pop .35s cubic-bezier(.3,1.6,.5,1);}
  .bub .g{width:110px;height:110px;border-radius:14px;object-fit:cover;background:#111;border:2px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.55);animation:bub-pop .35s cubic-bezier(.3,1.6,.5,1);}
  .bub .who{font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.72);padding:2px 9px;border-radius:10px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis;}
  body.tv-mode .bub .e{font-size:80px;}
  body.tv-mode .bub .g{width:190px;height:190px;}
  body.tv-mode .bub .who{font-size:18px;max-width:240px;}
  body.tv-mode .bub{bottom:40px;}
  @keyframes bub-rise{0%{transform:translateY(0);opacity:0}8%{opacity:1}75%{opacity:1}100%{transform:translateY(-62vh);opacity:0}}
  @keyframes bub-sway{from{transform:translateX(-14px) rotate(-6deg)}to{transform:translateX(14px) rotate(6deg)}}
  @keyframes bub-pop{from{transform:scale(.2)}to{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){ .bub .sway{animation:none;} .bub .e, .bub .g{animation:none;} }

  .react-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(10,10,11,.94);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));}
  .react-bar[hidden]{display:none;}
  body.has-react-bar .wrap{padding-bottom:150px;}
  .react-row{max-width:640px;margin:0 auto;display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;}
  .react-emo{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);background:var(--panel-2);font-size:21px;line-height:1;cursor:pointer;padding:0;transition:transform .12s;}
  .react-emo:active{transform:scale(.86);}
  .react-pill{height:42px;padding:0 15px;border-radius:21px;border:1px solid var(--accent-line);background:transparent;color:var(--accent-soft);font:inherit;font-weight:800;font-size:14px;cursor:pointer;}
  .react-pill:hover{background:rgba(229,9,20,.12);}
  .react-tray{max-width:640px;margin:0 auto 8px;}
  .react-tray[hidden]{display:none;}
  .react-tray-head{display:flex;gap:6px;margin-bottom:8px;}
  #reactSearch{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:6px;color:var(--text-primary);font:inherit;font-size:15px;padding:10px 12px;}
  .react-close{width:42px;flex:none;border-radius:6px;border:1px solid var(--border-strong);background:var(--panel-2);color:var(--text-primary);font-size:16px;cursor:pointer;}
  .react-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:min(46vh,330px);overflow-y:auto;}
  @media (min-width:560px){ .react-grid{grid-template-columns:repeat(6,1fr);} }
  .react-gif{padding:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#111;aspect-ratio:1;cursor:pointer;}
  .react-gif img{width:100%;height:100%;object-fit:cover;display:block;}
  .react-msg{font-size:13px;color:var(--text-secondary);text-align:center;margin:8px 0 0;}
  .react-credit{font-size:11px;color:var(--text-muted);text-align:right;margin:6px 0 0;}
  [data-theme="sobre"] .react-bar{background:rgba(244,245,247,.96);}
  [data-theme="sobre"] .react-emo, [data-theme="sobre"] .react-close, [data-theme="sobre"] #reactSearch{background:#fff;}

  /* ---------- install the app (PWA) ---------- */
  .install-btn{display:inline-flex;align-items:center;gap:8px;margin-top:14px;}
  .install-btn[hidden]{display:none;}
  .install-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .install-hint{font-size:12px;color:var(--text-muted);margin:12px 0 0;}
  .install-hint[hidden]{display:none;}
  [data-theme="sobre"] .track-check.ok{color:#11501f;}

  /* =====================================================================
     "Fusion" look (Oct 2026): the game's own objects — player stickers, a
     cassette, a tracklist, marker notes, gaffer-tape buttons — on the black /
     Netflix-red base. Animations are transform/opacity only, and switch off in
     the sober display mode and with "reduce motion".
     ===================================================================== */
  .mk{font-family:'Marker','Comic Sans MS',cursive;font-weight:400;letter-spacing:0;}
  .nw{white-space:nowrap;}

  /* gaffer-tape primary buttons: the torn tape is a pseudo-element, so the focus ring stays visible */
  .btn-primary{background:transparent;position:relative;isolation:isolate;box-shadow:none;}
  .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
    clip-path:polygon(0 9%,2% 0,98% 6%,100% 0,99.3% 50%,100% 94%,97% 100%,3% 95%,0 100%,.7% 50%);transition:filter .15s;}
  .btn-primary:hover{filter:none;box-shadow:none;}
  .btn-primary:hover::before{filter:brightness(1.12);}
  .btn-primary:disabled::before{filter:none;}

  /* player stickers (faces) */
  .sticker{position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);font-size:var(--s);
    border:max(2px,.055em) solid #fff;border-radius:.11em;box-shadow:0 .07em .18em rgba(0,0,0,.45);transform:rotate(var(--tilt,0deg));}
  .sticker .eye{position:absolute;top:34%;width:12%;height:12%;border-radius:50%;background:#111;}
  .sticker .eye.l{left:27%;}.sticker .eye.r{right:27%;}
  .sticker .mouth{position:absolute;left:30%;right:30%;top:53%;height:20%;border-bottom:max(2px,.055em) solid #111;border-radius:0 0 50% 50%;}
  .face-v1 .mouth{border:max(2px,.055em) solid #111;border-radius:50%;left:40%;right:40%;height:18%;top:56%;}
  .face-v2 .eye{height:7%;top:37%;border-radius:1px;}
  .face-v3 .eye{top:33%;height:13%;width:26%;border-radius:.03em;}
  .face-v3 .eye.l{left:18%;}.face-v3 .eye.r{right:18%;}
  .face-v3 .br{position:absolute;top:37%;left:42%;right:42%;height:3%;background:#111;}
  .face-v3 .mouth{left:36%;right:24%;border-radius:0 0 60% 20%;}
  .face-v4 .mouth{left:24%;right:24%;height:22%;top:50%;border-bottom-width:max(3px,.075em);}
  .player-chip .sticker{margin:3px 4px 3px 2px;}
  .sticker > svg:not(.mk-circle){position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:.06em;overflow:hidden;}

  /* hand-drawn marker circle + note */
  .mk-circle{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none;overflow:visible;}
  .mk-circle path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;animation:mk-draw .7s .7s ease-out forwards;}
  @keyframes mk-draw{to{stroke-dashoffset:0;}}
  .mk-note{position:absolute;left:calc(100% + 14px);top:-.4em;font-family:'Marker',cursive;font-size:24px;line-height:1;color:var(--accent-soft);white-space:nowrap;
    transform:rotate(-8deg);opacity:0;animation:mk-pop .35s 1.2s cubic-bezier(.2,1.6,.4,1) forwards;}
  @keyframes mk-pop{from{opacity:0;scale:.4;}to{opacity:1;scale:1;}}
  .confetti{position:fixed;inset:0;pointer-events:none;z-index:95;overflow:hidden;}
  .confetti i{position:absolute;width:9px;height:14px;border-radius:2px;}

  /* ---------- home hero: the page is a round ---------- */
  #screenHome .hero{text-align:center;padding:18px 0 6px;}
  .hero-now{position:relative;display:inline-flex;margin-bottom:20px;}
  .cass{position:relative;width:190px;aspect-ratio:1.6;border-radius:12px;background:linear-gradient(#1f1f22,#161618);border:1px solid #2e2e33;padding:10px 12px;transform:rotate(-4deg);box-shadow:0 18px 40px rgba(0,0,0,.55);}
  .cass-lab{height:60%;border-radius:6px;background:var(--accent);padding:6px 9px;text-align:left;font-family:'Marker',cursive;font-size:13px;line-height:1.1;color:#fff;}
  .cass-win{position:absolute;left:24%;right:24%;top:47%;height:28%;border-radius:20px;background:#0b0b0c;display:flex;align-items:center;justify-content:space-between;padding:0 8%;}
  .cass .reel{width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0b0b0c 0 20%,#e8e8e8 21% 30%,#2a2a2d 31%);animation:reel-spin 1.8s linear infinite;}
  @keyframes reel-spin{to{transform:rotate(360deg);}}
  .hero-note{left:calc(100% + 12px);top:4px;text-align:left;font-size:17px;line-height:1.1;opacity:1;animation:none;transform:rotate(-6deg);}
  .hero-note svg{position:absolute;left:-46px;top:12px;width:40px;height:30px;overflow:visible;}
  .hero-note path{fill:none;stroke:var(--accent-soft);stroke-width:2.5;stroke-linecap:round;}
  @media (max-width:600px){ .hero-note{display:none;} }
  #screenHome .hero h1{font-size:clamp(44px,10.5vw,86px);line-height:.92;letter-spacing:-.055em;font-weight:900;margin:0;}
  #screenHome .hero h1 .q{font-family:'Marker',cursive;font-weight:400;color:var(--accent);letter-spacing:0;display:inline-block;transform:rotate(8deg) translateY(-.03em);}
  .hero-lead{max-width:540px;margin:16px auto 0;color:var(--text-body);font-size:clamp(15px,1.9vw,18px);line-height:1.55;}
  .demo-stickers{display:flex;justify-content:center;gap:clamp(14px,3.4vw,34px);margin:30px auto 0;flex-wrap:wrap;}
  .demo-st{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text-primary);padding:4px;border-radius:12px;}
  .demo-st .sticker{transition:transform .25s cubic-bezier(.2,1.4,.4,1),border-color .2s;}
  .demo-st:not(:disabled):hover .sticker{transform:rotate(0) translateY(-6px);}
  .demo-st:disabled{cursor:default;}
  .demo-name{font-family:'Marker',cursive;font-size:22px;line-height:1;}
  .demo-st.picked .sticker{border-color:#ffd84d;}
  .demo-st.dim{filter:grayscale(1) brightness(.55);opacity:.8;transition:filter .4s,opacity .4s;}
  .demo-st.owner .sticker{transform:rotate(0) scale(1.08);}
  .demo-st .mk-circle path{animation-delay:0s;}
  .demo-st .mk-note{animation-delay:.45s;font-size:22px;}
  .demo-st .mk-note{left:50%;top:-42px;transform:translateX(-50%) rotate(-4deg);}
  .demo-st .mk-circle{width:136%;height:136%;}
  .demo-stickers{padding-top:12px;}
  @media (max-width:560px){
    .demo-stickers{display:grid;grid-template-columns:repeat(2,auto);gap:38px 36px;}
    .demo-st .sticker{--s:clamp(86px,25vw,112px) !important;}
    .reveal-st .mk-note{left:50%;top:-40px;transform:translateX(-50%) rotate(-4deg);}
    .reveal-sticker{margin-top:38px;}
  }
  .demo-msg{min-height:58px;margin:18px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:560px;}
  .mk-hint{font-family:'Marker',cursive;font-size:19px;color:var(--text-muted);display:inline-block;transform:rotate(-2deg);}
  .demo-res{font-size:17px;font-weight:600;}
  .link-btn{background:none;border:none;color:var(--text-primary);font:inherit;font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;}
  .hero-ctas{display:grid;gap:10px;max-width:520px;margin:10px auto 0;}
  .hero-ctas .btn-primary::before{transform:rotate(-1deg);}
  #screenHome .trust-row span::before{display:none;}
  #screenHome .trust-row{gap:4px 18px;font-size:13px;}

  /* ---------- home sections: no boxes, big type, marker notes ---------- */
  .home-only .home-section{background:none;border:none;box-shadow:none;padding:0;margin:76px 0 0;}
  .home-only .home-section::before{display:none;}
  .home-only .home-section h2{font-size:clamp(28px,4.6vw,42px);line-height:1;letter-spacing:-.045em;font-weight:900;margin-bottom:20px;}
  .home-only .home-section h2 .mk{color:var(--accent-soft);display:inline-block;transform:rotate(-2deg);margin-top:4px;}
  .home-only .home-section p{font-size:15.5px;color:var(--text-body);}
  .home-only .ad-wrap{margin-top:60px;}
  .steps-mk{list-style:none;display:grid;gap:30px;}
  @media (min-width:640px){ .steps-mk{grid-template-columns:repeat(3,1fr);gap:28px;} }
  .steps-mk li{position:relative;padding-top:62px;}
  .num-mk{position:absolute;left:2px;top:0;width:46px;height:46px;font-family:'Marker',cursive;font-size:28px;color:var(--accent-soft);display:grid;place-items:center;}
  .num-mk svg{position:absolute;inset:-4px;width:54px;height:54px;overflow:visible;}
  .num-mk path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;}
  .steps-mk h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;}
  .code-tiles{display:flex;gap:5px;margin-top:12px;}
  .code-tiles span{width:30px;height:38px;border-radius:5px;background:var(--panel-2);border:1px solid var(--border-strong);display:grid;place-items:center;font-weight:900;font-size:19px;color:var(--accent-soft);}
  .tl-grid{display:grid;gap:36px;align-items:center;}
  @media (min-width:700px){ .tl-grid{grid-template-columns:1fr 1fr;gap:44px;} }
  .arrow-link{display:inline-block;margin-top:6px;font-weight:800;color:var(--accent-soft);}
  .jcard{position:relative;background:#f7f7f7;color:#111;border-radius:4px;padding:22px 22px 12px;box-shadow:0 24px 50px rgba(0,0,0,.5);transform:rotate(1.2deg);}
  .jcard::before{content:"";position:absolute;top:-13px;left:38%;width:104px;height:26px;background:rgba(229,9,20,.88);transform:rotate(-4deg);
    clip-path:polygon(0 8%,4% 0,96% 6%,100% 0,98% 92%,100% 100%,3% 96%,0 100%);}
  .home-only .home-section .jcard-title{font-size:22px;color:#111;margin-bottom:6px;}
  .tracks{list-style:none;}
  .tracks li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-top:1px solid #d4d4d4;font-weight:600;font-size:15px;}
  .tracks .tn{color:#5e5e5e;width:22px;font-variant-numeric:tabular-nums;}
  .tracks .dots{flex:1;border-bottom:2px dotted #b5b5b5;transform:translateY(-4px);}
  .tracks .who{font-family:'Marker',cursive;font-size:21px;color:#c4060f;min-width:56px;text-align:right;line-height:1;}
  .who-btn{font-family:'Marker',cursive;font-size:21px;color:#111;background:none;border:none;border-bottom:2px solid #111;cursor:pointer;padding:0;line-height:1;}
  .ink{display:inline-block;clip-path:inset(0 100% 0 0);animation:ink-write .55s ease forwards;}
  @keyframes ink-write{to{clip-path:inset(0 0 0 0);}}

  /* ---------- game screens ---------- */
  .countdown-num.pop{animation:cd-pop .8s cubic-bezier(.2,1.4,.4,1);}
  @keyframes cd-pop{from{transform:scale(2.1);opacity:0}30%{opacity:1}to{transform:scale(1);opacity:1}}
  .theme-intro-card{background:var(--accent);border:none;border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.6);padding:30px 26px 34px;
    clip-path:polygon(0 4%,3% 0,97% 3%,100% 0,99.4% 50%,100% 97%,96% 100%,4% 97%,0 100%,.6% 50%);animation:tape-in .5s cubic-bezier(.2,1.3,.4,1);transform:rotate(-2deg);}
  @keyframes tape-in{from{transform:translateX(60%) rotate(6deg);opacity:0}to{transform:rotate(-2deg);opacity:1}}
  .theme-intro-label{font-family:'Marker',cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:20px;color:#fff;opacity:.92;}
  .theme-intro-text{color:#fff;font-size:clamp(28px,6vw,38px);letter-spacing:-.035em;line-height:1.05;}
  .reveal-sticker{display:flex;justify-content:center;margin:10px 0 18px;}
  .reveal-sticker[hidden]{display:none;}
  .reveal-st{position:relative;display:inline-block;}
  .reveal-st .sticker{--tilt:-3deg;}
  #screenPlay .reveal-name{font-size:30px;letter-spacing:-.03em;}
  .leaderboard .sticker{margin-right:4px;}

  /* sober display mode: no tilt, no wobble */
  [data-theme="sobre"] .sticker, [data-theme="sobre"] .cass, [data-theme="sobre"] .jcard, [data-theme="sobre"] .theme-intro-card,
  [data-theme="sobre"] .hero-ctas .btn-primary::before, [data-theme="sobre"] #screenHome .hero h1 .q{transform:none;}
  [data-theme="sobre"] .cass .reel{animation:none;}
  [data-theme="sobre"] .jcard{background:#fff;border:1px solid var(--border-strong);box-shadow:none;}
  [data-theme="sobre"] .sticker{border-color:#111;box-shadow:none;}
  [data-theme="sobre"] .mk-note, [data-theme="sobre"] .hero-note, [data-theme="sobre"] .num-mk, [data-theme="sobre"] .home-only .home-section h2 .mk{color:var(--accent);}
  [data-theme="sobre"] .hero-note path{stroke:var(--accent);}
  [data-theme="sobre"] .cass{background:#2a2a2e;}
  [data-theme="sobre"] .demo-st.dim{filter:grayscale(1);opacity:.55;}
  @media (prefers-reduced-motion:reduce){
    .cass .reel{animation:none;}
    .mk-circle path{animation:none;stroke-dashoffset:0;}
    .mk-note{animation:none;opacity:1;}
    .ink{animation:none;clip-path:none;}
    .countdown-num.pop, .theme-intro-card{animation:none;}
  }

  /* =====================================================================
     Fusion look, everywhere: panels with a strip of red tape instead of the neon
     line, sentence-case labels, marker annotations, paper cards (rules, awards,
     playlist) like the home tracklist, stickers for every player.
     ===================================================================== */
  .panel{border-radius:14px;background:var(--panel-1);border-color:var(--border);box-shadow:0 10px 30px -18px rgba(0,0,0,.8);}
  .panel::before{top:-8px;left:22px;right:auto;width:74px;height:16px;background:var(--accent);box-shadow:none;transform:rotate(-3deg);
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);opacity:.95;}
  .panel h2{font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1.1;}
  h1{letter-spacing:-.04em;}
  label{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700;color:var(--text-secondary);}
  input[type=text], input[type=number], textarea, select{border-radius:10px;}
  .btn{border-radius:10px;}
  .btn-ghost{background:transparent;border:2px solid var(--border-strong);color:var(--text-primary);}
  .btn-ghost:hover{background:var(--panel-2);color:var(--text-primary);border-color:var(--accent-line);box-shadow:none;}
  .btn-back{border-radius:999px;background:transparent;border:1px solid var(--border-strong);}
  .btn-back:hover{box-shadow:none;}

  /* toggles: the chosen option becomes a strip of red tape */
  .toggle-row{gap:10px;}
  .toggle-opt{border-radius:10px;position:relative;isolation:isolate;background:var(--panel-2);font-size:14px;}
  .toggle-opt.active{background:transparent;border-color:transparent;color:#fff;}
  .toggle-opt.active::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
    clip-path:polygon(0 9%,3% 0,97% 6%,100% 0,99% 50%,100% 94%,96% 100%,3% 95%,0 100%,1% 50%);}

  /* room code as tiles + QR taped on */
  .room-code{display:flex;justify-content:center;gap:8px;background:none;border:none;padding:6px 0;text-shadow:none;letter-spacing:0;}
  .room-code span{width:clamp(42px,12vw,58px);aspect-ratio:.8;display:grid;place-items:center;border-radius:10px;background:var(--panel-2);
    border:1px solid var(--border-strong);font-size:clamp(28px,8vw,38px);font-weight:900;color:var(--accent-soft);}
  .room-qr .qr-img{position:relative;transform:rotate(-2deg);border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45);}
  .room-qr .qr-img::before{content:"";position:absolute;top:-10px;left:50%;width:70px;height:18px;margin-left:-35px;background:rgba(229,9,20,.9);transform:rotate(3deg);
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);}

  /* paper cards: rules of the night, awards, playlist */
  .rules-card{background:#f7f7f7;color:#111;border:none;transform:rotate(-.6deg);}
  .rules-card h2{font-family:'Marker',cursive;font-weight:400;letter-spacing:0;font-size:24px;color:#111;}
  .rules-card .rule{background:#fff;border:1px solid #d9d9d9;}
  .rules-card .rule-k{color:#555;}
  .rules-card .rule-v{color:#111;}
  .rules-card .rules-themes li{color:#111;}
  .rules-card .rules-themes{color:#111;}
  .awards h2, .recap h2{font-size:22px;font-weight:900;letter-spacing:-.03em;}
  .awards{display:grid;gap:14px;}
  .award{background:#f7f7f7;color:#111;border:none;border-radius:4px;padding:16px 16px 14px;position:relative;box-shadow:0 12px 26px rgba(0,0,0,.4);}
  .award:nth-of-type(odd){transform:rotate(-1deg);} .award:nth-of-type(even){transform:rotate(1deg);}
  .award::before{content:"";position:absolute;top:-9px;left:18px;width:64px;height:16px;background:rgba(229,9,20,.9);transform:rotate(-4deg);
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);}
  .award-kind{font-family:'Marker',cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:19px;color:#c4060f;}
  .award-name{font-size:24px;letter-spacing:-.03em;color:#111;}
  .award-sub{color:#444;font-size:13px;}
  .recap-list{background:#f7f7f7;border-radius:4px;padding:6px 14px;gap:0;box-shadow:0 18px 40px rgba(0,0,0,.45);}
  .recap-list li + li{border-top:1px solid #dadada;}
  .recap-list a{background:none;border:none;border-radius:0;padding:10px 0;color:#111;}
  .recap-list a:hover{border:none;background:none;}
  .recap-list a:hover .recap-name{text-decoration:underline;}
  .recap-list img{width:72px;height:41px;}
  .recap-name{font-family:'Marker',cursive;font-weight:400;font-size:19px;color:#c4060f;order:2;}
  .recap-theme{color:#333;font-weight:700;font-size:13.5px;white-space:normal;}

  /* in-round */
  .hud-seg{border-radius:12px;}
  .hud-seg .hud-lbl{font-family:'Marker',cursive;text-transform:none;letter-spacing:0;font-size:15px;color:var(--accent-soft);font-weight:400;}
  .hud-seg .hud-val{font-size:26px;color:var(--text-primary);letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
  .hud-seg.urgent .hud-val{color:var(--accent-soft);animation:urg .5s ease-in-out infinite alternate;}
  @keyframes urg{to{transform:scale(1.1);}}
  .theme-banner{background:var(--accent);border:none;border-radius:0;color:#fff;transform:rotate(-1deg);padding:12px 16px;
    clip-path:polygon(0 8%,2% 0,98% 6%,100% 0,99.4% 50%,100% 94%,97% 100%,3% 95%,0 100%,.6% 50%);}
  .theme-banner .theme-label{font-family:'Marker',cursive;font-weight:400;text-transform:none;letter-spacing:0;font-size:16px;color:#fff;opacity:.9;}
  .theme-banner .theme-text{font-size:16px;font-weight:800;}
  .guess-title{font-size:20px;font-weight:900;letter-spacing:-.02em;}
  .guess-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  @media(max-width:420px){ .guess-grid{grid-template-columns:repeat(2,1fr);} }
  .guess-btn{flex-direction:column;gap:8px;padding:14px 8px 12px;border-radius:14px;border:2px solid var(--border);background:var(--panel-2);transition:transform .15s,border-color .15s,background .15s;}
  .guess-btn:hover{border-color:var(--border-strong);}
  .guess-btn .sticker{transition:transform .2s cubic-bezier(.2,1.4,.4,1);}
  .guess-btn:hover .sticker{transform:rotate(0) translateY(-3px);}
  .guess-name{font-family:'Marker',cursive;font-weight:400;font-size:19px;line-height:1;}
  .guess-btn.selected{background:rgba(229,9,20,.14);border-color:var(--accent-line);color:var(--text-primary);}
  .guess-btn.selected .sticker{transform:rotate(0) scale(1.1);border-color:#ffd84d;}
  .vote-progress{font-family:'Marker',cursive;font-size:19px;color:var(--text-secondary);font-weight:400;}
  .standing{border-radius:999px;padding:3px 10px 3px 4px;}
  .standing .sticker{border-width:2px;}
  .mine-note{font-family:'Marker',cursive;font-weight:400;font-size:22px;}
  .reveal-card > .muted{font-family:'Marker',cursive;font-size:18px;color:var(--text-secondary);}
  #screenPlay .reveal-name, .reveal-name{color:var(--text-primary);font-size:34px;letter-spacing:-.04em;}

  /* lobby */
  .player-chip{border-radius:14px;padding:8px 12px 8px 8px;font-size:15px;}
  .player-chip .badge{border-radius:999px;font-weight:700;}
  .kick-btn{border-radius:999px;}

  /* end of game */
  #screenEnd > .panel.center h2{font-size:clamp(34px,8vw,52px);letter-spacing:-.05em;line-height:1;}
  .end-title{font-size:clamp(28px,8vw,40px);letter-spacing:-.045em;line-height:1;margin-bottom:10px;}
  .podium{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;gap:10px;margin:18px 0 22px;min-height:220px;}
  .pod{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .pod-name{font-family:'Marker',cursive;font-size:20px;line-height:1;text-align:center;word-break:break-word;}
  .pod-bar{width:100%;border-radius:12px 12px 4px 4px;background:var(--panel-2);border:1px solid var(--border-strong);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:10px;
    transform-origin:bottom;animation:pod-up .9s cubic-bezier(.2,1.3,.4,1) both;}
  .pod-bar b{font-size:30px;font-weight:900;line-height:1;}
  .pod-bar small{font-size:12px;color:var(--text-secondary);font-weight:700;margin-top:4px;}
  .pod-1 .pod-bar{height:120px;background:var(--accent);border-color:var(--accent);color:#fff;animation-delay:.2s;}
  .pod-1 .pod-bar small{color:#fff;opacity:.9;}
  .pod-2 .pod-bar{height:84px;}
  .pod-3 .pod-bar{height:60px;animation-delay:.35s;}
  @keyframes pod-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .lb-row{border-radius:12px;}
  .lb-row.first{box-shadow:none;}
  .join-rank-line{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:600;}

  /* track slots, theme editor */
  .track-slot{border-radius:12px;}
  .slot-theme-num{font-family:'Marker',cursive;font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;border-radius:0;padding:3px 8px 4px;
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);}
  .theme-num{background:none;border:none;font-family:'Marker',cursive;font-weight:400;font-size:20px;color:var(--accent-soft);}
  .theme-row-item.focused .theme-num{background:none;color:var(--accent-soft);}

  /* site chrome */
  .site-nav a{border-radius:999px;}
  .site-nav a[aria-current="page"]{background:none;border-color:transparent;color:var(--text-primary);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q 25 1 50 4 T 98 3' fill='none' stroke='%23e50914' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-size:80% 7px;background-position:50% 100%;}
  .faq-item summary{font-size:16px;}
  .faq-item p{font-size:15px;}
  .link-list a{border-radius:12px;font-size:15px;}
  .link-list a span{font-size:13px;}
  .two-col .card{border-radius:14px;}
  .chip{border-radius:999px;}

  /* sober mode: flat paper, no tilt */
  [data-theme="sobre"] .panel::before, [data-theme="sobre"] .award::before, [data-theme="sobre"] .room-qr .qr-img::before{transform:none;}
  [data-theme="sobre"] .rules-card, [data-theme="sobre"] .award, [data-theme="sobre"] .theme-banner, [data-theme="sobre"] .room-qr .qr-img{transform:none;}
  [data-theme="sobre"] .rules-card, [data-theme="sobre"] .award, [data-theme="sobre"] .recap-list{background:#fff;border:1px solid var(--border-strong);}
  [data-theme="sobre"] .award-kind, [data-theme="sobre"] .recap-name, [data-theme="sobre"] .tracks .who{color:#a30000;}
  [data-theme="sobre"] .hud-seg.urgent .hud-val, [data-theme="sobre"] .pod-bar{animation:none;}
  [data-theme="sobre"] .site-nav a[aria-current="page"]{text-decoration:underline;}
  .rules-card .rule-k{text-transform:none;letter-spacing:0;font-size:12.5px;color:#555;}
  .rules-card .rules-themes em{color:#666;}

  /* ---------- article & legal pages ---------- */
  .breadcrumb{font-size:13px;}
  .article.panel{background:none;border:none;box-shadow:none;padding:6px 0 0;}
  .article.panel::before{display:none;}
  .art-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:12px;}
  .article h1{font-size:clamp(32px,6.2vw,52px);line-height:.98;letter-spacing:-.05em;font-weight:900;margin:0;}
  .art-crowd{display:flex;flex:none;padding-bottom:6px;}
  .art-crowd .sticker + .sticker{margin-left:-10px;}
  @media(max-width:560px){ .art-crowd{display:none;} }
  .article .lede{font-size:clamp(17px,2.2vw,19px);color:var(--text-body);line-height:1.6;}
  .article .meta{font-family:'Marker',cursive;font-size:16px;color:var(--accent-soft);}
  .article h2{font-size:clamp(24px,3.6vw,30px);letter-spacing:-.04em;font-weight:900;line-height:1.08;margin:44px 0 12px;}
  .article h3{font-size:18px;letter-spacing:-.02em;}
  .article p, .article li{font-size:16px;}
  .article ul{list-style:none;padding-left:4px;}
  .article ul > li{position:relative;padding-left:26px;}
  .article ul > li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:7px;background:var(--accent);transform:rotate(-6deg);
    clip-path:polygon(0 12%,8% 0,92% 10%,100% 0,96% 88%,100% 100%,6% 92%,0 100%);}
  .article ol{padding-left:26px;}
  .article ol > li::marker{font-family:'Marker',cursive;color:var(--accent-soft);}
  .article table{border-radius:12px;overflow:hidden;}
  .article th{background:var(--panel-2);}
  .callout{background:#f7f7f7;color:#111;border:none;border-radius:4px;padding:18px 18px 14px;margin:26px 4px;transform:rotate(-.6deg);position:relative;box-shadow:0 14px 30px rgba(0,0,0,.4);}
  .callout::before{content:"";position:absolute;top:-9px;left:24px;width:70px;height:16px;background:rgba(229,9,20,.9);transform:rotate(-4deg);
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);}
  .callout p, .callout li, .callout strong{color:#111;}
  .callout a{color:#b0060f;}
  .cta-box{padding:34px 22px 30px;}
  .cta-box h2{font-size:clamp(24px,4vw,32px);letter-spacing:-.04em;}
  .cta-crowd{display:flex;justify-content:center;margin:-2px 0 16px;}
  .cta-crowd .sticker + .sticker{margin-left:-12px;}
  .lost{position:relative;display:inline-block;margin:10px 0 22px;}
  .lost-note{left:calc(100% + 16px);top:20px;opacity:1;animation:none;}
  [data-theme="sobre"] .callout{background:#fff;border:1px solid var(--border-strong);transform:none;}
  [data-theme="sobre"] .callout::before, [data-theme="sobre"] .article ul > li::before{transform:none;}
  .reveal-sticker{position:relative;z-index:4;}

  /* ---------- character picker (random + reroll) ---------- */
  .av-pick{display:flex;align-items:center;gap:16px;margin:4px 0 14px;}
  .av-prev{display:block;width:68px;height:68px;flex:none;}
  .av-pick-txt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
  .av-pick-lbl{font-size:13.5px;font-weight:700;color:var(--text-secondary);}
  .av-reroll{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:2px solid var(--border-strong);background:transparent;
    color:var(--text-primary);font:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:border-color .15s;}
  .av-reroll:hover{border-color:var(--accent-line);}
  .av-reroll svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s;}
  .av-reroll:active svg{transform:rotate(-200deg);}
  .sticker.pop-in{animation:av-pop .4s cubic-bezier(.2,1.6,.4,1);}
  @keyframes av-pop{from{transform:rotate(-3deg) scale(.5);opacity:.3}to{transform:rotate(-3deg) scale(1);opacity:1}}
  [data-theme="sobre"] .sticker.pop-in{animation:none;}

  /* =====================================================================
     Settings screen: an open page with numbered steps (no stacked boxes),
     the themes written on the night's tracklist, a sticky "create" button.
     ===================================================================== */
  .screen-head{margin:6px 0 30px;}
  .screen-head h1{font-size:clamp(40px,8.4vw,64px);line-height:.94;letter-spacing:-.055em;font-weight:900;margin:0;}
  .mk-sub{font-family:'Marker',cursive;color:var(--accent-soft);font-size:21px;line-height:1.1;display:inline-block;transform:rotate(-2deg);margin-top:8px;}
  #screenOnlineSetup .setup-step{background:none;border:none;border-radius:0;box-shadow:none;padding:0 0 30px;margin:0 0 30px;border-bottom:1px dashed var(--border-strong);}
  #screenOnlineSetup .setup-step::before{display:none;}
  #screenOnlineSetup .setup-step h2{display:flex;align-items:center;gap:12px;font-size:clamp(24px,4.4vw,30px);letter-spacing:-.04em;margin-bottom:12px;}
  .step-n{flex:none;width:44px;height:44px;display:grid;place-items:center;font-family:'Marker',cursive;font-weight:400;font-size:24px;letter-spacing:0;color:var(--accent-soft);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M27 4 C 44 3, 52 18, 49 31 C 46 46, 28 52, 15 46 C 3 40, 2 22, 11 12 C 16 7, 24 5, 33 7' fill='none' stroke='%23e50914' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;}
  #screenOnlineSetup .setup-step > p.sub{font-size:15px;color:var(--text-body);}
  .setup-row{padding:6px 0;}
  .setup-row label{font-size:16px;color:var(--text-primary);}
  .stepper{border-radius:999px;border-width:2px;}
  .stepper input{font-size:22px;width:56px;}
  .stepper-btn{width:46px;height:46px;font-size:22px;border-radius:999px;}
  .theme-tip{font-size:13.5px;}
  .paper-card{position:relative;background:#f7f7f7;color:#111;border-radius:4px;padding:20px 16px 12px;margin-top:6px;transform:rotate(-.4deg);box-shadow:0 18px 40px rgba(0,0,0,.45);}
  .paper-card::before{content:"";position:absolute;top:-11px;left:40%;width:96px;height:22px;background:rgba(229,9,20,.9);transform:rotate(-3deg);
    clip-path:polygon(0 8%,4% 0,96% 6%,100% 0,98% 92%,100% 100%,3% 96%,0 100%);}
  .paper-title{font-family:'Marker',cursive;font-size:22px;color:#111;margin:0 0 6px 4px;}
  .paper-card #themeRows{gap:0;}
  .paper-card .theme-row-item{border-top:1px solid #dcdcdc;padding:4px 0;gap:6px;}
  .paper-card .theme-num{color:#c4060f;width:26px;}
  .paper-card .theme-row-item .theme-input{background:transparent;border:none;border-radius:0;color:#111;font-weight:700;font-size:15px;padding:10px 30px 10px 4px;}
  .paper-card .theme-row-item .theme-input::placeholder{color:#777;}
  .paper-card .theme-row-item .theme-input:focus{outline:2px solid #c4060f;outline-offset:0;background:#fff;}
  .paper-card .theme-pen{color:#888;}
  .paper-card .theme-reroll{background:transparent;border:1.5px solid #c9c9c9;color:#333;}
  .paper-card .theme-reroll:hover{border-color:#c4060f;color:#c4060f;}
  #screenOnlineSetup .theme-actions{margin-top:16px;}
  .create-bar{position:sticky;bottom:12px;z-index:20;margin:4px 0 10px;}
  .create-bar .btn{padding:18px;font-size:17px;}
  .create-bar::before{content:"";position:absolute;inset:-12px -8px -14px;z-index:-1;background:linear-gradient(to top,var(--page) 55%,transparent);pointer-events:none;}

  /* =====================================================================
     Round screen: no boxes around the HUD, a timer ring that empties,
     the cassette spinning while the song plays, open vote area.
     ===================================================================== */
  .hud{align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
  .hud-seg{background:none;border:none;padding:0;text-align:left;flex:0 1 auto;}
  .hud-seg .hud-val{font-size:clamp(34px,8vw,44px);line-height:1;letter-spacing:-.05em;}
  #hudTimerSeg, #joinHudTimerSeg{flex:none;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;position:relative;
    background:conic-gradient(var(--accent) calc(var(--p,1) * 360deg), var(--panel-2) 0);}
  #hudTimerSeg .hud-lbl, #joinHudTimerSeg .hud-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  #hudTimerSeg .hud-val, #joinHudTimerSeg .hud-val{width:64px;height:64px;border-radius:50%;background:var(--page);display:grid;place-items:center;font-size:21px;letter-spacing:-.03em;}
  .player-frame{border-radius:16px;}
  .audio-cover{gap:16px;background:radial-gradient(circle at 50% 40%, #241014, var(--page) 78%);}
  .cass-big{width:min(240px,60%);transform:rotate(-3deg);}
  .cass-big .cass-lab{font-size:15px;}
  #voteZone.panel, #joinPlayArea.panel{background:none;border:none;box-shadow:none;padding:6px 0 0;}
  #voteZone.panel::before, #joinPlayArea.panel::before{display:none;}
  .guess-title{font-size:clamp(20px,4.4vw,26px);letter-spacing:-.035em;margin-bottom:14px;}
  @media (min-width:1000px){ body.tv-mode #hudTimerSeg{width:120px;height:120px;} body.tv-mode #hudTimerSeg .hud-val{width:100px;height:100px;font-size:34px;} }
  [data-theme="sobre"] .paper-card{background:#fff;border:1px solid var(--border-strong);transform:none;box-shadow:none;}
  [data-theme="sobre"] .paper-card::before, [data-theme="sobre"] .cass-big{transform:none;}
  [data-theme="sobre"] .audio-cover{background:var(--panel-2);}
  [data-theme="sobre"] .create-bar::before{background:linear-gradient(to top,var(--page) 55%,transparent);}
  [data-theme="sobre"] .step-n{color:var(--accent);}

  /* round screen: make it feel like a game */
  .guess-btn{padding:16px 8px 14px;border-radius:18px;background:linear-gradient(180deg,var(--panel-2),var(--panel-1));}
  .guess-btn .sticker{box-shadow:0 10px 20px rgba(0,0,0,.45);}
  .guess-btn:not(.locked):hover .sticker{animation:wiggle .5s ease-in-out;}
  @keyframes wiggle{0%,100%{transform:rotate(var(--tilt,0deg))}25%{transform:rotate(-8deg) translateY(-4px)}75%{transform:rotate(7deg) translateY(-4px)}}
  .guess-name{font-size:21px;}
  .guess-btn.selected{background:linear-gradient(180deg,rgba(229,9,20,.28),rgba(229,9,20,.08));}
  .guess-btn.selected .guess-name::after{content:" ✓";color:#ffd84d;}
  .vote-progress{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 16px;}
  .vp-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
  .vp-dot{width:26px;height:8px;border-radius:4px;background:var(--panel-2);border:1px solid var(--border-strong);transition:background .3s;}
  .vp-dot.on{background:var(--accent);border-color:var(--accent);}
  .vp-dot.new{animation:vp-pop .45s cubic-bezier(.2,1.6,.4,1);}
  @keyframes vp-pop{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
  .vp-txt{font-family:'Marker',cursive;font-size:19px;color:var(--text-secondary);}
  .mine-note{position:relative;background:#f7f7f7;color:#111;border-radius:4px;padding:16px 18px 14px;margin:6px 4px 18px;transform:rotate(-1.2deg);
    box-shadow:0 14px 30px rgba(0,0,0,.45);text-align:center;line-height:1.25;}
  .mine-note::before{content:"";position:absolute;top:-10px;left:50%;width:84px;height:18px;margin-left:-42px;background:rgba(229,9,20,.9);transform:rotate(3deg);
    clip-path:polygon(0 10%,5% 0,95% 8%,100% 0,98% 90%,100% 100%,4% 94%,0 100%);}
  .player-frame{border:none;background:#0d0d0f;box-shadow:0 24px 50px -20px rgba(229,9,20,.45);}
  .cass-big{width:min(280px,68%);}
  .audio-cover .muted{font-family:'Marker',cursive;font-size:16px;}
  .sound-unlock{background:rgba(10,10,11,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  .hud-seg.urgent .hud-val{animation:urg .5s ease-in-out infinite alternate;}
  #hudTimerSeg.urgent, #joinHudTimerSeg.urgent{animation:ring-pulse .5s ease-in-out infinite alternate;}
  @keyframes ring-pulse{to{box-shadow:0 0 0 6px rgba(229,9,20,.25);}}
  #hudTimerSeg.urgent .hud-val, #joinHudTimerSeg.urgent .hud-val{animation:none;}
  [data-theme="sobre"] .mine-note{background:#fff;border:1px solid var(--border-strong);transform:none;}
  [data-theme="sobre"] .mine-note::before{transform:none;}
  [data-theme="sobre"] .guess-btn:not(.locked):hover .sticker, [data-theme="sobre"] #hudTimerSeg.urgent, [data-theme="sobre"] #joinHudTimerSeg.urgent{animation:none;}
  @media (prefers-reduced-motion:reduce){ .guess-btn:hover .sticker, .vp-dot.new, #hudTimerSeg.urgent, #joinHudTimerSeg.urgent{animation:none;} }

  /* song title at the reveal + in the end playlist */
  .reveal-sticker{flex-direction:column;align-items:center;gap:14px;}
  .reveal-song{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:6px 0 0;padding:7px 14px;border-radius:999px;background:var(--panel-2);
    border:1px solid var(--border-strong);font-weight:700;font-size:14px;color:var(--text-primary);text-align:left;}
  .reveal-song svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent-soft);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .reveal-song span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .recap-title{font-weight:800;font-size:14px;color:#111;line-height:1.25;}
  .recap-txt{gap:3px;}
  .recap-name{order:0;}
  .capy-tag{display:none;font-family:'Marker',cursive;font-size:20px;color:var(--accent-soft);transform:rotate(-4deg);margin-left:4px;}
  .av-pick.is-capy .capy-tag{display:inline-block;}
  .av-pick-txt > .av-pick-lbl{display:inline;}

  /* volume panel */
  .volume-popover{width:270px;padding:16px;border-radius:14px;border-color:var(--border-strong);box-shadow:0 20px 40px -12px rgba(0,0,0,.7);}
  .vol-title{font-size:13px;font-weight:800;margin-bottom:8px;color:var(--text-primary);}
  .volume-popover .volume-row{gap:12px;margin-bottom:12px;}
  #volumeSlider{-webkit-appearance:none;appearance:none;height:28px;background:transparent;}
  #volumeSlider::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--accent) var(--v,80%),var(--panel-hover) var(--v,80%));}
  #volumeSlider::-moz-range-track{height:8px;border-radius:4px;background:var(--panel-hover);}
  #volumeSlider::-moz-range-progress{height:8px;border-radius:4px;background:var(--accent);}
  #volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);margin-top:-7px;box-shadow:0 2px 6px rgba(0,0,0,.4);}
  #volumeSlider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);}
  .volume-popover .vol-val{width:38px;font-size:13px;color:var(--text-primary);}
  .vol-ios{font-size:12.5px;color:var(--text-secondary);line-height:1.45;margin:-4px 0 12px;}
  .vol-sfx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px dashed var(--border-strong);border-bottom:1px dashed var(--border-strong);margin-bottom:10px;font-size:13px;font-weight:700;}
  .vol-switch{position:relative;width:46px;height:26px;border-radius:13px;border:none;background:var(--panel-hover);cursor:pointer;flex:none;transition:background .2s;}
  .vol-switch span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;}
  .vol-switch[aria-checked="true"]{background:var(--accent);}
  .vol-switch[aria-checked="true"] span{transform:translateX(20px);}
  .volume-popover p.sub{font-size:11.5px;margin:0;}

  /* =====================================================================
     DA uniformisation: every control speaks the same language as the home
     page — tape for buttons, dashed outlines for options you could pick,
     "write here" lines for inputs.
     ===================================================================== */
  /* secondary buttons = black gaffer tape */
  .btn-ghost{background:transparent;border:none;position:relative;isolation:isolate;color:#fff;box-shadow:none;}
  .btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:#2c2c31;
    background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);
    clip-path:polygon(0 8%,2% 0,98% 7%,100% 0,99.3% 50%,100% 93%,97% 100%,3% 94%,0 100%,.7% 50%);transition:background-color .15s;}
  .btn-ghost:hover{background:transparent;color:#fff;box-shadow:none;}
  .btn-ghost:hover::before{background-color:#3a3a40;}
  .btn-ghost:disabled{opacity:.45;cursor:not-allowed;}
  .theme-actions .btn-ghost:nth-child(2)::before, .row .btn-ghost:nth-child(2)::before{transform:rotate(.6deg);}
  .theme-actions .btn-ghost:first-child::before{transform:rotate(-.6deg);}

  /* options you can pick: dashed outline; the chosen one is red tape */
  .toggle-opt{background:transparent;border:2px dashed var(--border-strong);color:var(--text-secondary);transition:border-color .15s,color .15s;}
  .toggle-opt:hover{border-color:rgba(255,255,255,.45);color:var(--text-primary);}
  .toggle-opt.active{border:2px solid transparent;}
  .toggle-row.chips{flex-wrap:wrap;gap:8px;}
  .toggle-row.chips .toggle-opt{flex:0 0 auto;padding:9px 14px;border-radius:999px;font-variant-numeric:tabular-nums;}
  .toggle-row.chips .toggle-opt.active{border-radius:4px;}
  .toggle-row.chips .toggle-opt:last-child{flex:1 1 auto;}

  /* inputs: a line to write on */
  input[type=text], input[type=number], textarea, select{background:rgba(255,255,255,.045);border:none;border-bottom:2px solid var(--border-strong);
    border-radius:8px 8px 2px 2px;transition:border-color .15s, background-color .15s;}
  input[type=text]:hover, textarea:hover{background:rgba(255,255,255,.07);}
  input[type=text]:focus, input[type=number]:focus, textarea:focus{border-bottom-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:2px;}
  .paper-card input[type=text]{background:transparent;color:#111;border-bottom-color:rgba(0,0,0,.25);}
  .paper-card input[type=text]::placeholder{color:#6b6b6b;}
  .stepper{border:2px dashed var(--border-strong);background:transparent;}
  .stepper input{background:transparent;border:none;border-radius:0;}
  .stepper input:focus{outline-offset:-2px;}
  .stepper-btn{font-family:'Marker',cursive;font-weight:400;font-size:26px;}
  .stepper-btn:hover{background:var(--accent);color:#fff;}
  .btn-back{border:2px dashed var(--border-strong);}
  .btn-back:hover{border-style:solid;border-color:var(--text-secondary);color:var(--text-primary);}

  [data-theme="sobre"] .btn-ghost{color:var(--text-primary);border:2px solid var(--text-primary);border-radius:10px;}
  [data-theme="sobre"] .btn-ghost::before{display:none;}
  [data-theme="sobre"] .btn-ghost:hover{background:var(--panel-2);color:var(--text-primary);}
  [data-theme="sobre"] .toggle-opt{border-style:solid;color:var(--text-primary);}
  [data-theme="sobre"] .toggle-opt.active{color:#fff;}
  [data-theme="sobre"] input[type=text], [data-theme="sobre"] input[type=number], [data-theme="sobre"] textarea{background:#fff;border:2px solid var(--border-strong);border-radius:8px;}
  [data-theme="sobre"] .paper-card input[type=text]{background:#fff;}
  [data-theme="sobre"] .stepper, [data-theme="sobre"] .btn-back{border-style:solid;}

  /* lists and boxes in the same hand-made language */
  .track-slot{background:transparent;border:2px dashed var(--border-strong);}
  .track-slot.bad, .track-slot.dup{border-color:var(--accent-line);border-style:dashed;}
  .track-slot .track-input{background:transparent;border:none;border-radius:0;}
  .track-slot .track-input:hover{background:transparent;}
  .track-slot .track-input:focus{outline:2px solid var(--accent-soft);outline-offset:2px;}
  .player-chip{background:transparent;border:none;border-bottom:1px dashed var(--border-strong);border-radius:0;padding:10px 2px;margin-bottom:0;}
  .player-chip:last-child{border-bottom:none;}
  .lb-row{background:transparent;border:none;border-bottom:1px dashed var(--border-strong);border-radius:0;box-shadow:none;}
  .lb-row.first{background:transparent;border-color:var(--border-strong);box-shadow:none;}
  .lb-row.first .name{font-family:'Marker',cursive;font-weight:400;font-size:19px;}
  .lb-row .rank{font-family:'Marker',cursive;font-weight:400;font-size:20px;width:34px;}
  .rules-card .rule{background:transparent;border:1.5px dashed rgba(0,0,0,.28);}
  [data-theme="sobre"] .track-slot, [data-theme="sobre"] .rules-card .rule{border-style:solid;}
  [data-theme="sobre"] .player-chip, [data-theme="sobre"] .lb-row{border-bottom-style:solid;}
  @media (max-width:560px){ .demo-stickers .demo-st:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;} }
  .rules-card .rule-k{color:#4a4a4a;}

  /* logo: red cassette with a "?" label */
  .brand .logo{width:38px;height:38px;flex:none;margin:-6px 0;transition:transform .2s;}
  .brand:hover .logo{transform:rotate(-6deg) scale(1.06);}
  .brand .q{font-family:'Marker',cursive;font-weight:400;color:var(--accent-soft);}
  @media (max-width:560px){ .brand .logo{width:32px;height:32px;} }
  [data-theme="sobre"] .brand .logo{transition:none;}
  [data-theme="sobre"] .brand:hover .logo{transform:none;}
  @media (max-width:440px){ .brand{font-size:17px;gap:8px;} .brand .logo{width:28px;height:28px;} }
  @media (max-width:360px){ .brand{font-size:15.5px;gap:6px;} .brand .logo{width:24px;height:24px;} }

  /* header controls in the same hand-made language: dashed outlines, the active one is red tape */
  .lang-panel{background:transparent;border:none;padding:0;gap:6px;height:36px;}
  .lang-btn{position:relative;isolation:isolate;height:34px;min-width:40px;padding:0 10px;border:2px dashed var(--border-strong);border-radius:999px;
    font-family:'Marker',cursive;font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--text-secondary);background:transparent;transition:border-color .15s,color .15s;}
  .lang-btn:hover{background:transparent;border-color:var(--text-secondary);border-style:solid;color:var(--text-primary);}
  .lang-btn.active{background:transparent;border-color:transparent;color:#fff;}
  .lang-btn.active::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--accent);transform:rotate(-4deg);
    clip-path:polygon(0 10%,6% 0,94% 7%,100% 0,98% 50%,100% 92%,93% 100%,5% 94%,0 100%,2% 50%);}
  .icon-toggle{width:36px;height:36px;border-radius:50%;border:2px dashed var(--border-strong);background:transparent;transition:border-color .15s,transform .15s;}
  .icon-toggle:hover{background:transparent;border-style:solid;border-color:var(--text-secondary);transform:rotate(-8deg);}
  .icon-toggle[aria-expanded="true"]{border:2px solid transparent;background:var(--accent);color:#fff;}
  .icon-toggle svg{width:18px;height:18px;}
  @media(max-width:360px){ .lang-btn{height:30px;min-width:34px;padding:0 7px;font-size:13px;} .icon-toggle{width:32px;height:32px;} }
  [data-theme="sobre"] .lang-btn, [data-theme="sobre"] .icon-toggle{border-style:solid;color:var(--text-primary);}
  [data-theme="sobre"] .lang-btn.active{color:#fff;}
  [data-theme="sobre"] .lang-btn.active::before{transform:none;inset:-2px;border-radius:999px;clip-path:none;}
  [data-theme="sobre"] .icon-toggle:hover{transform:none;}
  @media (prefers-reduced-motion:reduce){ .icon-toggle:hover{transform:none;} }

  /* ---------- "alive" touches (see site.js): transform / opacity only ---------- */
  .rv{opacity:0;transform:translateY(26px) rotate(-.6deg);transition:opacity .55s ease, transform .6s cubic-bezier(.2,1.2,.4,1);}
  .rv.rv-in{opacity:1;transform:none;}
  .rv .mk, .rv .num-mk{clip-path:inset(0 100% 0 0);}
  .rv.rv-in .mk, .rv.rv-in .num-mk{animation:ink-write .6s .25s ease forwards;}
  .sticker.capy > svg:not(.mk-circle) > g{transition:transform .35s cubic-bezier(.2,1.4,.4,1);}
  /* the big "?" of the home title sways gently left and right, like a puzzled head */
  #screenHome .hero h1 .q{transform-origin:50% 90%;animation:q-sway 2.4s ease-in-out infinite alternate;}
  @keyframes q-sway{from{transform:rotate(-7deg) translateY(-.03em);}to{transform:rotate(15deg) translateY(-.03em);}}
  @media (prefers-reduced-motion:reduce){ #screenHome .hero h1 .q{animation:none;} }
  [data-theme="sobre"] #screenHome .hero h1 .q{animation:none;}
  .sticker.hop{animation:st-hop .7s cubic-bezier(.3,1.6,.5,1);}
  .sticker.squish{animation:st-squish .45s cubic-bezier(.3,1.8,.5,1);}
  @keyframes st-hop{0%,100%{transform:rotate(var(--tilt,0deg));}35%{transform:translateY(-16px) rotate(calc(var(--tilt,0deg) - 7deg));}60%{transform:translateY(0) rotate(var(--tilt,0deg)) scaleY(.9);}}
  @keyframes st-squish{0%,100%{transform:rotate(var(--tilt,0deg));}30%{transform:rotate(var(--tilt,0deg)) scale(1.12,.86);}60%{transform:rotate(var(--tilt,0deg)) scale(.94,1.06);}}
  .btn{transition:filter .15s ease, transform .15s cubic-bezier(.2,1.4,.4,1), box-shadow .15s ease;}
  .btn:not(:disabled):hover{transform:translateY(-2px) rotate(-.4deg);}
  .btn:not(:disabled):active{transform:translateY(1px) scale(.97);}
  .brand:hover .logo{animation:logo-jig .5s ease;}
  @keyframes logo-jig{30%{transform:rotate(-10deg) scale(1.08);}60%{transform:rotate(4deg) scale(1.04);}}
  @media (prefers-reduced-motion:reduce){
    .rv{opacity:1;transform:none;transition:none;} .rv .mk, .rv .num-mk{clip-path:none;animation:none;}
    .sticker.hop, .sticker.squish, .brand:hover .logo{animation:none;} .btn:not(:disabled):hover, .btn:not(:disabled):active{transform:none;}
    .sticker.capy > svg > g{transition:none;transform:none !important;}
  }
  [data-theme="sobre"] .sticker.hop, [data-theme="sobre"] .sticker.squish, [data-theme="sobre"] .brand:hover .logo{animation:none;}
  [data-theme="sobre"] .btn:not(:disabled):hover{transform:none;}
  /* signature */
  .made-by{margin-top:14px;display:flex;align-items:baseline;justify-content:flex-start;gap:8px;font-size:14px;}
  .made-by .mk{font-size:17px;color:var(--accent-soft);display:inline-block;transform:rotate(-4deg);}
  .made-by a{color:var(--text-primary);font-weight:800;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 2px no-repeat;padding-bottom:2px;transition:background-size .2s;}
  .made-by a:hover{background-size:100% 100%;color:#fff;}
  [data-theme="sobre"] .made-by a{text-decoration:underline;background:none;}
  [data-theme="sobre"] .made-by .mk{transform:none;}

  /* ---------- the cassette vibes like a little speaker (chill, ~84 bpm): a soft thump on each beat,
     a slow sway, and a music note drifting out now and then. Transform / opacity only. ---------- */
  .hero-now .cass, .cass-big{--r:-4deg;transform-origin:50% 100%;animation:cass-vibe 8s ease-in-out infinite;}
  .cass-big{--r:-3deg;}
  /* 3 s of groove (4 beats), then 5 s still, on a loop */
  @keyframes cass-vibe{
    0%,37.5%,100%{transform:rotate(var(--r)) translateY(0) scale(1);}
    4.5%{transform:rotate(calc(var(--r) - 1.2deg)) translateY(-3px) scale(1.03,1.02);}
    9.4%{transform:rotate(calc(var(--r) - 1.5deg)) translateY(0) scale(1);}
    13.9%{transform:rotate(calc(var(--r) + .3deg)) translateY(-3px) scale(1.03,1.02);}
    18.75%{transform:rotate(calc(var(--r) + 1.5deg)) translateY(0) scale(1);}
    23.25%{transform:rotate(calc(var(--r) + 1.2deg)) translateY(-3px) scale(1.03,1.02);}
    28.1%{transform:rotate(calc(var(--r) + .5deg)) translateY(0) scale(1);}
    32.6%{transform:rotate(calc(var(--r) - .3deg)) translateY(-3px) scale(1.03,1.02);}
  }
  .hero-now .cass::before, .hero-now .cass::after{content:"♪";position:absolute;right:12%;top:-2px;font-size:26px;line-height:1;color:var(--accent-soft);
    opacity:0;pointer-events:none;animation:note-drift 8s ease-out infinite;}
  .hero-now .cass::after{content:"♫";right:auto;left:14%;font-size:22px;color:#fff;animation-delay:1.3s;}
  @keyframes note-drift{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.6);}3%{opacity:.9;}
    13%{opacity:.7;transform:translate(12px,-24px) rotate(12deg) scale(1);}20%,100%{opacity:0;transform:translate(4px,-36px) rotate(-6deg) scale(.9);}}
  @media (prefers-reduced-motion:reduce){ .hero-now .cass, .cass-big, .hero-now .cass::before, .hero-now .cass::after{animation:none;} }
  [data-theme="sobre"] .hero-now .cass, [data-theme="sobre"] .cass-big, [data-theme="sobre"] .hero-now .cass::before, [data-theme="sobre"] .hero-now .cass::after{animation:none;}

  /* ---------- main nav: dashed pills like the header buttons, the current page is a strip of red tape ---------- */
  .site-nav{gap:8px;padding:6px 2px 6px;margin:-12px 0 18px;}
  .site-nav a{position:relative;isolation:isolate;border:2px dashed var(--border-strong);border-radius:999px;padding:7px 14px;
    color:var(--text-secondary);font-size:13px;font-weight:800;background:none;transition:color .15s,border-color .15s,transform .15s cubic-bezier(.2,1.4,.4,1);}
  .site-nav a:hover{border-style:solid;border-color:var(--text-secondary);color:var(--text-primary);transform:rotate(-2deg);}
  .site-nav a[aria-current="page"]{border-color:transparent;color:#fff;background:none;background-image:none;}
  .site-nav a[aria-current="page"]::before{content:"";position:absolute;inset:-2px -4px;z-index:-1;background:var(--accent);transform:rotate(-2deg);
    clip-path:polygon(0 12%,4% 0,96% 8%,100% 0,98.5% 50%,100% 90%,95% 100%,3% 92%,0 100%,1.5% 50%);}
  .site-nav a[aria-current="page"]:hover{transform:none;}
  @media (prefers-reduced-motion:reduce){ .site-nav a:hover{transform:none;} }
  [data-theme="sobre"] .site-nav a{border-style:solid;color:var(--text-primary);}
  [data-theme="sobre"] .site-nav a:hover{transform:none;}
  [data-theme="sobre"] .site-nav a[aria-current="page"]{text-decoration:none;color:#fff;}
  [data-theme="sobre"] .site-nav a[aria-current="page"]::before{transform:none;clip-path:none;border-radius:999px;inset:-2px;}
  .site-nav a{padding:6px 11px;}
  @media (min-width:640px){ .site-nav{flex-wrap:wrap;overflow:visible;gap:8px 6px;} }
  @media (max-width:639px){ .site-nav{-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent);} }

  /* =====================================================================
     Everything that was a dashed outline is now a strip of black gaffer tape
     (same as the secondary buttons). The chosen / current one stays red tape.
     ===================================================================== */
  :root{--tape-clip:polygon(0 9%,2.5% 0,97.5% 7%,100% 0,99.2% 50%,100% 92%,97% 100%,3% 94%,0 100%,.8% 50%);
        --tape-dark:#2c2c31;--tape-dark-h:#3a3a40;
        --tape-tex:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);}
  .site-nav a, .lang-btn, .icon-toggle, .toggle-opt, .btn-back, .stepper, .av-reroll, .track-slot{
    position:relative;isolation:isolate;border:2px solid transparent;background:none;}
  .site-nav a::before, .lang-btn::before, .icon-toggle::before, .toggle-opt::before, .btn-back::before, .stepper::before, .av-reroll::before, .track-slot::before{
    content:"";position:absolute;inset:-2px;z-index:-1;background-color:var(--tape-dark);background-image:var(--tape-tex);clip-path:var(--tape-clip);
    transition:background-color .15s;}
  .site-nav a:hover, .lang-btn:hover, .icon-toggle:hover, .toggle-opt:hover, .btn-back:hover, .av-reroll:hover{border-color:transparent;background:none;color:var(--text-primary);}
  .site-nav a:hover::before, .lang-btn:hover::before, .icon-toggle:hover::before, .toggle-opt:hover::before, .btn-back:hover::before, .av-reroll:hover::before{background-color:var(--tape-dark-h);}
  /* chosen / current = red tape */
  .site-nav a[aria-current="page"]::before, .lang-btn.active::before, .toggle-opt.active::before, .icon-toggle[aria-expanded="true"]::before{
    background-color:var(--accent);background-image:none;}
  .site-nav a[aria-current="page"]::before, .lang-btn.active::before{inset:-2px -4px;transform:rotate(-2deg);}
  .icon-toggle[aria-expanded="true"]{background:none;border-color:transparent;}
  .icon-toggle{border-radius:6px;}
  /* little tilts so it looks stuck on by hand */
  .site-nav a:nth-child(even)::before, .toggle-opt:nth-child(even)::before{transform:rotate(.8deg);}
  .site-nav a:nth-child(odd):not([aria-current])::before, .toggle-opt:nth-child(odd):not(.active)::before{transform:rotate(-.6deg);}
  /* big boxes: same tape, finer tears */
  .track-slot::before{inset:0;clip-path:polygon(0 3%,1.5% 0,98.5% 2%,100% 0,99.6% 50%,100% 97%,98% 100%,2% 98%,0 100%,.4% 50%);}
  .track-slot.bad::before, .track-slot.dup::before{background-color:#3a1417;}
  .stepper::before{inset:0;}
  .stepper-btn:hover{border-radius:6px;}
  /* rule cells on the paper card: light masking tape */
  .rules-card .rule{position:relative;isolation:isolate;border:none;background:none;}
  .rules-card .rule::before{content:"";position:absolute;inset:0;z-index:-1;background:#efe7d0;
    clip-path:polygon(0 6%,3% 0,97% 5%,100% 0,99% 50%,100% 95%,96% 100%,3% 96%,0 100%,1% 50%);}
  .rules-card .rule:nth-child(even)::before{transform:rotate(.7deg);}
  .rules-card .rule:nth-child(odd)::before{transform:rotate(-.5deg);}
  /* sober mode: plain solid outlines, no tape */
  [data-theme="sobre"] :is(.site-nav a, .lang-btn, .icon-toggle, .toggle-opt, .btn-back, .stepper, .av-reroll, .track-slot){border:2px solid var(--border-strong);}
  [data-theme="sobre"] :is(.site-nav a, .lang-btn, .icon-toggle, .toggle-opt, .btn-back, .stepper, .av-reroll, .track-slot)::before{display:none;}
  [data-theme="sobre"] :is(.site-nav a[aria-current="page"], .lang-btn.active, .toggle-opt.active, .icon-toggle[aria-expanded="true"]){background:var(--accent);border-color:var(--accent);color:#fff;}
  [data-theme="sobre"] .rules-card .rule{border:1.5px solid #c9ccd2;}
  [data-theme="sobre"] .rules-card .rule::before{display:none;}

  /* In-page ad slots take no room until Google actually shows an ad in them
     (on phones an empty / pending responsive slot left a big black gap on the home page). */
  .ad-wrap:not(.side-ad):not(:has(ins[data-ad-status="filled"])){height:0;min-height:0;margin:0;padding:0;overflow:hidden;}
  .ad-wrap:not(.side-ad):has(ins[data-ad-status="filled"]) ins.adsbygoogle{max-height:420px;overflow:hidden;}

  /* join form: live state of the connection to the room (before "Join") */
  .join-conn{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--text-secondary);margin:-4px 0 14px;}
  .join-conn .jc-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;animation:jc-pulse 1s ease-in-out infinite alternate;}
  .join-conn.is-fail{color:var(--accent-soft);} .join-conn.is-fail .jc-dot{animation:none;}
  @keyframes jc-pulse{from{opacity:.25;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
  @media (prefers-reduced-motion:reduce){ .join-conn .jc-dot{animation:none;} }

  /* =====================================================================
     Waiting room (joiner who already sent their songs) + game box + playlist import
     ===================================================================== */
  .wait-room{display:block;}
  .wait-room[hidden]{display:none;}
  .wait-head{text-align:center;padding-top:30px;}
  .wait-cass{margin:4px auto 6px;}
  .wait-cass .cass{width:150px;}
  .wait-cass .cass-lab{font-size:15px;display:flex;align-items:center;}
  .wait-title{font-size:32px;color:var(--accent-soft);display:inline-block;transform:rotate(-2deg);margin:8px 0 4px;letter-spacing:0;}
  .wait-sub{color:var(--text-secondary);font-weight:600;}
  .dots i{display:inline-block;font-style:normal;animation:dot-up 1.2s ease-in-out infinite;}
  .dots i:nth-child(2){animation-delay:.15s;} .dots i:nth-child(3){animation-delay:.3s;}
  @keyframes dot-up{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-5px);opacity:1;}}
  .wait-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 10px;margin:14px 0 6px;}
  .wr-p{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;}
  .wr-p .sticker{transition:opacity .3s;}
  .wr-p.ready .sticker{animation:wr-bob 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s);}
  .wr-p.choosing .sticker{opacity:.55;animation:wr-think 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s);}
  .wr-p.away .sticker{opacity:.35;filter:grayscale(1);}
  .wr-p.new{animation:wr-in .55s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i) * 70ms);}
  .wr-name{font-weight:800;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wr-name em{font-style:normal;font-weight:600;color:var(--text-muted);font-size:12px;}
  .wr-p.me .wr-name{color:var(--accent-soft);}
  .wr-tag{position:relative;isolation:isolate;font-size:12px;font-weight:800;padding:2px 9px;color:var(--text-secondary);}
  .wr-tag.ok{color:#fff;}
  .wr-tag.ok::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:rotate(-3deg);clip-path:var(--tape-clip);}
  .wr-tag.ok::after{content:" ✓";}
  .wr-tag.pen{color:var(--text-muted);font-weight:700;}
  @keyframes wr-bob{0%,100%{transform:rotate(var(--tilt,0deg)) translateY(0);}50%{transform:rotate(calc(var(--tilt,0deg) + 3deg)) translateY(-5px);}}
  @keyframes wr-think{0%,100%{transform:rotate(var(--tilt,0deg));}25%{transform:rotate(calc(var(--tilt,0deg) - 6deg));}50%{transform:rotate(calc(var(--tilt,0deg) + 2deg));}}
  @keyframes wr-in{from{transform:scale(.3) rotate(-12deg);opacity:0;}to{transform:none;opacity:1;}}
  .wait-choosing{color:var(--text-secondary);font-size:14px;margin-top:8px;}
  #joinWaitRoom.all-ready .wait-choosing{color:var(--accent-soft);font-family:'Marker',cursive;font-size:19px;}

  /* game box */
  .mg-box .mg-title{margin-bottom:2px;}
  .mg-box .mg-title .mk{color:var(--accent-soft);font-size:26px;display:inline-block;transform:rotate(-2deg);}
  .mg-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 6px;}
  .mg-pick[hidden]{display:none;}
  @media (max-width:520px){ .mg-pick{grid-template-columns:1fr;} }
  .mg-tile{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 14px;border:none;background:none;color:var(--text-primary);cursor:pointer;font:inherit;transition:transform .15s cubic-bezier(.2,1.4,.4,1);}
  .mg-tile::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--tape-dark);background-image:var(--tape-tex);clip-path:var(--tape-clip);transition:background-color .15s;}
  .mg-tile:hover{transform:translateY(-2px) rotate(-.6deg);}
  .mg-tile:hover::before{background-color:var(--tape-dark-h);}
  .mg-tile:hover .sticker{animation:st-squish .45s cubic-bezier(.3,1.8,.5,1);}
  .mg-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .mg-name{font-weight:900;font-size:16px;}
  .mg-desc{font-size:13px;color:var(--text-secondary);}
  .mg-best{font-family:'Marker',cursive;font-size:15px;color:var(--accent-soft);}
  .mg-stage[hidden]{display:none;}
  .mg-top{display:flex;justify-content:space-between;align-items:center;margin:12px 0 8px;}
  .mg-hud{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:10px;flex-wrap:wrap;}
  .mg-hud b{font-size:22px;font-variant-numeric:tabular-nums;color:var(--text-primary);}
  .mg-hint{font-size:12px;color:var(--text-muted);font-weight:600;}
  .capy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:360px;margin:0 auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
  .hole{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse 70% 26% at 50% 86%,#000 60%,transparent 62%),#18181b;}
  .mole{position:absolute;left:50%;bottom:6%;margin-left:-32px;width:64px;height:64px;padding:0;border:none;background:none;cursor:pointer;
    animation:mole-up .18s cubic-bezier(.2,1.5,.4,1) both;-webkit-tap-highlight-color:transparent;}
  .mole .sticker{pointer-events:none;}
  .mole.gold .sticker{border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.5);}
  .mole.down{animation:mole-down .17s ease-in both;}
  .mole.hit{animation:mole-hit .2s ease-out both;}
  @keyframes mole-up{from{transform:translateY(105%);}to{transform:translateY(0);}}
  @keyframes mole-down{to{transform:translateY(105%);}}
  @keyframes mole-hit{to{transform:scale(1.25,.55) translateY(30%);opacity:0;}}
  .mg-float{position:absolute;left:50%;top:18%;transform:translateX(-50%);font-family:'Marker',cursive;font-size:24px;pointer-events:none;animation:mg-float .7s ease-out forwards;}
  .mg-float.good{color:#4ade80;} .mg-float.bad{color:var(--accent-soft);}
  @keyframes mg-float{to{transform:translate(-50%,-34px);opacity:0;}}
  .memo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:400px;margin:0 auto;}
  .memo-card{aspect-ratio:1/1;padding:0;border:none;background:none;cursor:pointer;perspective:600px;}
  .mc-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,1.3,.5,1);}
  .memo-card.up .mc-in{transform:rotateY(180deg);}
  .mc-back, .mc-face{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;}
  .mc-back{background:#f3f0e6;color:var(--accent);font-size:34px;box-shadow:0 4px 10px rgba(0,0,0,.35);}
  .memo-card:nth-child(odd) .mc-back{transform:rotate(-1.5deg);} .memo-card:nth-child(even) .mc-back{transform:rotate(1.2deg);}
  .mc-face{transform:rotateY(180deg);background:#232327;}
  .mc-face .sticker{--s:min(58px,70%) !important;}
  .memo-card.found .mc-face{background:rgba(229,9,20,.18);}
  .memo-card.found .mc-face .sticker{animation:st-squish .45s cubic-bezier(.3,1.8,.5,1);}
  .mg-result{text-align:center;padding:10px 0 4px;}
  .mg-res-label{color:var(--text-secondary);font-weight:700;}
  .mg-res-val{font-size:48px;font-weight:900;letter-spacing:-.03em;line-height:1.1;}
  .mg-rec{font-size:24px;color:var(--accent-soft);transform:rotate(-3deg);display:inline-block;margin:2px 0 6px;}
  .mg-result .row{justify-content:center;margin-top:10px;}
  .mg-board{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--border-strong);}
  @media (max-width:420px){ .mg-board{grid-template-columns:1fr;} }
  .mb-h{font-weight:800;font-size:13px;color:var(--text-secondary);margin-bottom:6px;}
  .mg-board ol{list-style:none;padding:0;margin:0;}
  .mg-board li{display:flex;gap:8px;align-items:baseline;font-size:14px;padding:3px 0;}
  .mb-r{font-family:'Marker',cursive;color:var(--accent-soft);width:18px;}
  .mb-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;}
  .mb-s{font-weight:900;font-variant-numeric:tabular-nums;}
  .mg-board li.me .mb-n{color:var(--accent-soft);}
  .mb-empty{font-size:13px;color:var(--text-muted);}

  /* playlist import */
  .pl-import{margin:0 0 14px;}
  .pl-open{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;font-size:13.5px;}
  .pl-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .pl-open svg path:last-child{fill:currentColor;stroke:none;}
  .pl-form{display:flex;gap:8px;margin-top:10px;}
  .pl-form[hidden]{display:none;}
  .pl-form input{flex:1;min-width:0;}
  .pl-form .btn{flex:none;padding:10px 16px;}
  .pl-status{font-size:13.5px;color:var(--text-secondary);margin-top:8px;}
  .pl-status:empty{display:none;}
  .pl-status.bad{color:var(--accent-soft);}
  .pl-actions{display:flex;gap:16px;margin-top:4px;}
  .pl-actions[hidden], .pl-list[hidden]{display:none;}
  .pl-list{margin-top:10px;}
  .pl-pick-hint{font-size:13.5px;color:var(--text-secondary);margin-bottom:8px;}
  .pl-items{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:4px;margin-bottom:10px;}
  .pl-item{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--text-primary);text-transform:none;letter-spacing:0;margin:0;cursor:pointer;}
  .pl-item img{width:64px;height:48px;object-fit:cover;border-radius:4px;flex:none;background:#222;}
  .pl-item input{width:18px;height:18px;accent-color:var(--accent);flex:none;}
  .pl-item input:disabled + img{opacity:.4;}
  .pl-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  body.tv-mode #hostGameBox{display:none;}
  @media (prefers-reduced-motion:reduce){
    .dots i, .wr-p.ready .sticker, .wr-p.choosing .sticker, .wr-p.new, .mg-tile:hover .sticker, .memo-card.found .mc-face .sticker{animation:none;}
    .mc-in{transition:none;}
  }
  [data-theme="sobre"] .wr-p.ready .sticker, [data-theme="sobre"] .wr-p.choosing .sticker, [data-theme="sobre"] .wr-p.new{animation:none;}
  [data-theme="sobre"] .mg-tile{border:2px solid var(--border-strong);border-radius:10px;}
  [data-theme="sobre"] .mg-tile::before{display:none;}
  [data-theme="sobre"] .hole{background:#e6e8ec;}
  [data-theme="sobre"] .mc-face{background:#fff;}
  .wait-head{display:flex;flex-direction:column;align-items:center;}
  .wait-cass{display:flex;justify-content:center;margin:6px auto 10px;}
  .ghost-st{background:#2a2a2e !important;border-style:dashed !important;border-color:#5a5a62 !important;display:grid !important;place-items:center;}
  .ghost-st .mk{font-size:34px;color:#8a8a92;line-height:1;}

  /* ---------- live multiplayer mini-games ---------- */
  .mg-sec{grid-column:1/-1;font-weight:800;font-size:13px;color:var(--text-secondary);margin:6px 0 -2px;}
  .mp-ico{font-size:40px;line-height:1;width:56px;text-align:center;flex:none;}
  .mp-banner{position:relative;isolation:isolate;margin:12px 0 4px;padding:12px 14px;color:#fff;}
  .mp-banner[hidden]{display:none;}
  .mp-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);clip-path:var(--tape-clip);transform:rotate(-.6deg);}
  .mp-banner p{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;}
  .mp-banner .btn{margin-top:8px;}
  .mp-banner .btn-primary::before{background:#111;}
  .mp-wait{font-family:'Marker',cursive;font-size:17px;margin-top:6px;}
  .mp-who{display:inline-flex;gap:4px;}
  .mp-count{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:84px;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);pointer-events:none;z-index:5;animation:cd-pop .8s cubic-bezier(.2,1.4,.4,1) infinite;}
  .mg-play{position:relative;}
  /* tom-tom */
  .dr-lives{display:inline-flex;gap:4px;}
  .dr-lives i{width:14px;height:14px;border-radius:3px;background:#3a3a40;transform:rotate(-8deg);}
  .dr-lives i.on{background:var(--accent);}
  .dr-arena{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0;}
  .dr-arena.shake{animation:dr-shake .3s ease;}
  @keyframes dr-shake{25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}
  .dr-team{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:44px;}
  .dr-p{display:inline-block;transition:transform .15s;}
  .dr-p.ok{animation:dr-ok .35s cubic-bezier(.3,1.8,.5,1);}
  .dr-p.bad{animation:dr-bad .35s ease;opacity:.6;}
  @keyframes dr-ok{50%{transform:translateY(-8px) scale(1.1);}}
  @keyframes dr-bad{30%{transform:rotate(-12deg);}70%{transform:rotate(10deg);}}
  .dr-drum{position:relative;width:min(220px,62vw);aspect-ratio:1/1;border:none;padding:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .dr-skin{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,#f4ead2 0 58%,#d9c9a3 59% 62%,#e50914 63% 74%,#8f050d 75% 100%);box-shadow:0 14px 30px rgba(0,0,0,.5);}
  .dr-drum.hit .dr-skin{animation:dr-hit .18s ease-out;}
  @keyframes dr-hit{40%{transform:scale(.93,.9);}}
  .dr-rings{position:absolute;inset:0;pointer-events:none;}
  .dr-ring{position:absolute;inset:0;border-radius:50%;border:5px solid #fff;opacity:0;animation-name:dr-ring;animation-timing-function:linear;animation-fill-mode:forwards;}
  .dr-ring.got{border-color:#4ade80;}
  @keyframes dr-ring{0%{transform:scale(2.4);opacity:0;}15%{opacity:.9;}100%{transform:scale(1);opacity:1;}}
  .dr-fb{min-height:28px;font-family:'Marker',cursive;font-size:24px;}
  .dr-fb.perfect{color:#4ade80;} .dr-fb.good{color:#facc15;} .dr-fb.miss, .dr-fb.early{color:var(--accent-soft);}
  .dr-fb.pop{animation:mk-pop .3s cubic-bezier(.2,1.6,.4,1);}
  /* block tower */
  .tw-wrap{display:flex;gap:14px;justify-content:center;align-items:stretch;}
  .tw-col{position:relative;width:min(240px,64vw);padding-bottom:58px;overflow:hidden;}
  .tw-tower{display:flex;flex-direction:column;}
  .tw-row{display:grid;grid-template-columns:1fr 58px 1fr;height:36px;align-items:center;}
  .tw-row.top{opacity:0;}
  .tw-trunk{height:100%;background:#f3f0e6;border-left:3px solid #d9cfb5;border-right:3px solid #d9cfb5;display:grid;place-items:center;font-size:18px;}
  .tw-ob{height:22px;}
  .tw-ob.on{background:var(--accent);clip-path:polygon(0 15%,100% 0,100% 100%,0 85%);}
  .tw-row .tw-ob.on:first-child{clip-path:polygon(0 0,100% 15%,100% 85%,0 100%);}
  .tw-col.up .tw-tower{animation:tw-up .14s ease-out;}
  @keyframes tw-up{from{transform:translateY(-36px);}to{transform:none;}}
  .tw-col.crash{animation:dr-shake .3s ease 2;}
  .tw-me{position:absolute;bottom:4px;left:50%;width:58px;height:50px;transition:transform .1s ease-out;}
  .tw-me::before{content:"";position:absolute;left:0;right:0;top:-8px;bottom:0;background:#f3f0e6;border-left:3px solid #d9cfb5;border-right:3px solid #d9cfb5;z-index:-1;}
  .tw-me.L{transform:translateX(-122%);} .tw-me.R{transform:translateX(22%);}
  .tw-me .tw-st{display:block;}
  .tw-col.crash .tw-st{animation:dr-bad .4s ease 2;}
  .tw-race{position:relative;display:flex;gap:6px;padding-top:24px;}
  .tw-lane{position:relative;width:30px;background:linear-gradient(#2c2c31,#1b1b1e);border-radius:4px;}
  .tw-dot{position:absolute;left:2px;transition:bottom .2s ease-out;}
  .tw-flag{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:18px;}
  .tw-pads{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;}
  .tw-pad{position:relative;isolation:isolate;width:88px;height:64px;border:none;background:none;color:#fff;font-size:28px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .tw-pad::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tape-dark);background-image:var(--tape-tex);clip-path:var(--tape-clip);}
  .tw-pad:active::before{background-color:var(--accent);}
  .tw-h{font-weight:700;color:var(--text-secondary);min-width:60px;text-align:center;}
  .tw-h b{font-size:22px;color:var(--text-primary);}
  .tw-rank{list-style:decimal;padding-left:22px;text-align:left;max-width:240px;margin:8px auto 0;font-weight:700;}
  .tw-rank span{color:var(--text-muted);font-weight:600;}
  .mg-res-val .sticker{vertical-align:middle;}
  @media (prefers-reduced-motion:reduce){ .dr-arena.shake, .tw-col.crash, .tw-col.up .tw-tower, .dr-p.ok, .dr-p.bad{animation:none;} }
  .dr-arena{overflow:hidden;padding:10px 0;}
  @keyframes dr-ring{0%{transform:scale(1.75);opacity:0;}20%{opacity:.85;}100%{transform:scale(1);opacity:1;}}
  .dr-drum{width:min(200px,56vw);margin:28px 0;}
  .tw-wrap{max-width:420px;margin:0 auto;}
  .tw-col{flex:1;min-width:0;width:auto;max-width:260px;}
  .tw-row{grid-template-columns:1fr 64px 1fr;}
  .tw-trunk{border-bottom:2px solid #d9cfb5;}
  .tw-me{width:64px;margin-left:-32px;}
  .tw-me.L{transform:translateX(-100%);} .tw-me.R{transform:translateX(100%);}
  .tw-me::before{display:none;}
  .tw-col::after{content:"";position:absolute;left:50%;bottom:0;width:64px;margin-left:-32px;height:58px;background:#f3f0e6;border-left:3px solid #d9cfb5;border-right:3px solid #d9cfb5;z-index:-1;}
  .tw-col{isolation:isolate;}
  .tw-race{gap:4px;flex:none;}
  .tw-lane{width:26px;}
  .tw-dot .sticker{--s:22px !important;}

  /* vote to move on */
  .nv-box{margin-top:16px;}
  .nv-box[hidden]{display:none;}
  .nv-status{min-height:20px;text-align:center;font-size:13.5px;font-weight:700;color:var(--text-secondary);margin-top:8px;}
  .nv-status:not(:empty){color:var(--accent-soft);}
  #btnJoinNext.is-next::before, #btnNextRound::before{background-color:var(--accent);background-image:none;}
  #btnJoinNext.voted::before, #btnSkipTrack.voted::before, #btnNextRound.voted::before{background-color:#1f6b3a;background-image:none;}

  /* vote to move on */
  .nv-box{margin-top:16px;}
  .nv-box[hidden]{display:none;}
  .nv-status{min-height:20px;text-align:center;font-size:13.5px;font-weight:700;color:var(--text-secondary);margin-top:8px;}
  .nv-status:not(:empty){color:var(--accent-soft);}
  #btnJoinNext.is-next::before{background-color:var(--accent);background-image:none;}
  #btnJoinNext.voted::before, #btnSkipTrack.voted::before, #btnNextRound.voted::before{background-color:#1f6b3a;background-image:none;}

  /* ads only next to real content: never on the game screens (lobby, round, results, waiting room) */
  body.in-game .side-ad{display:none !important;}
  .guide-list{list-style:none;padding:0;margin:8px 0 22px;display:grid;gap:14px;}
  .guide-list li{padding:14px 16px;border-left:3px solid var(--accent);background:rgba(255,255,255,.03);line-height:1.5;color:var(--text-secondary);}
  .guide-list a{text-decoration:none;color:var(--text-primary);}
  .guide-list a:hover strong{color:var(--accent-soft);}
  [data-theme="sobre"] .guide-list li{background:#fff;}