/* ---- MENUS ---- */
    .menu-screen{
      position:absolute;inset:0;
      background: #060910;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      z-index:30;padding:24px 20px;text-align:center;gap:14px;
      overflow-y:auto;animation:fadeIn .35s ease both;
      isolation:isolate;
    }
    .hidden, .menu-screen.hidden, .lobby-screen.hidden{display:none !important}
    @keyframes fadeIn{from{opacity:0}}
    /* aurora behind menu */
    .menu-bg{
      position:absolute;inset:0;z-index:-1;overflow:hidden;
      background:
        radial-gradient(700px 500px at 30% 0%, rgba(46,213,115,.14), transparent 65%),
        radial-gradient(800px 600px at 85% 12%, rgba(255,59,92,.16), transparent 65%),
        radial-gradient(900px 700px at 50% 100%, rgba(255,192,72,.10), transparent 70%),
        linear-gradient(180deg, #0b1226 0%, #070a14 55%, #060910 100%);
    }
    .menu-bg::before{
      content:"";position:absolute;inset:-20%;
      background-image:url("../../assets/noise.svg");opacity:.35;mix-blend-mode:soft-light;
    }
    .menu-bg::after{
      content:"";position:absolute;inset:0;
      background-image:url("../../assets/grid-pattern.svg");background-size:120px 120px;opacity:.22;
      mask-image: radial-gradient(700px 500px at 50% 30%, black 40%, transparent 80%);
    }
    .orb{
      position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;mix-blend-mode:screen;
      animation: drift 14s ease-in-out infinite alternate;
    }
    .orb-a{width:420px;height:420px;left:-80px;top:-60px;background: radial-gradient(circle, rgba(46,213,115,.9), transparent 70%);animation-delay:-2s}
    .orb-b{width:520px;height:520px;right:-120px;top:10%;background: radial-gradient(circle, rgba(255,59,92,.85), transparent 70%);animation-delay:-6s}
    .orb-c{width:640px;height:360px;left:20%;bottom:-120px;background: radial-gradient(circle, rgba(255,192,72,.7), transparent 70%);animation-delay:-9s}
    @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(18px, -16px) scale(1.06)}}
    /* logo */
    .brand{
      display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:2px;
      animation: floatBrand 5s ease-in-out infinite;
    }
    @keyframes floatBrand{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
    .brand-mark{
      width:92px;height:92px;border-radius:24px;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);
      box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.08) inset;
      display:grid;place-items:center;position:relative;overflow:hidden;
    }
    .brand-mark::after{
      content:"";position:absolute;inset:0;
      background: radial-gradient(300px 200px at 30% 20%, rgba(255,255,255,.10), transparent 60%);
    }
    .brand-mark img{width:72px;height:72px;position:relative;z-index:1;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
    .brand-title{
      font-size: clamp(1.9rem, 5.2vw, 2.9rem);font-weight:900;letter-spacing:-.5px;line-height:1;
      background: linear-gradient(100deg, #fff 10%, #ffe9a8 30%, #ffc048 45%, #ff6b81 65%, #fff 90%);
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
      filter: drop-shadow(0 6px 18px rgba(255,165,2,.18));
      display:flex;align-items:center;gap:10px;
    }
    .brand-title small{
      font-size:.42em;font-weight:800;letter-spacing:.18em;color:var(--muted);
      -webkit-text-fill-color:var(--muted);background:none;
      border:1px solid rgba(255,255,255,.12);padding:4px 8px;border-radius:999px;
    }
    .game-subtitle{font-size:clamp(.88rem,2.2vw,1.02rem);color:#b6c2d2;max-width:560px;line-height:1.75;font-weight:500}
    .game-subtitle strong{color:var(--accent);font-weight:800}
    /* mode cards */
    .mode-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:640px;margin:4px 0}
    .mode-card{
      position:relative;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.10);
      padding:18px 16px;border-radius:18px;cursor:pointer;
      display:flex;flex-direction:column;align-items:center;gap:10px;
      transition: all .28s cubic-bezier(.2,1.2,.3,1);
      overflow:hidden; isolation:isolate;
      box-shadow: 0 8px 24px rgba(0,0,0,.22);
    }
    .mode-card::before{
      content:"";position:absolute;inset:0 0 auto 0;height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    }
    .mode-card::after{
      content:"";position:absolute;inset:0;opacity:0;transition:.3s;
      background: radial-gradient(400px 200px at 50% 0%, rgba(255,255,255,.08), transparent 70%);
    }
    .mode-card:hover{transform:translateY(-4px);background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));border-color:rgba(255,255,255,.16);box-shadow:0 16px 32px rgba(0,0,0,.28)}
    .mode-card:hover::after{opacity:1}
    .mode-card.selected{
      border-color: rgba(46,213,115,.55);
      background: linear-gradient(180deg, rgba(46,213,115,.18), rgba(46,213,115,.06));
      box-shadow: 0 14px 36px rgba(46,213,115,.22), 0 0 0 1px rgba(46,213,115,.2) inset;
    }
    .mode-card.selected#cardSeeker{
      border-color: rgba(255,59,92,.55);
      background: linear-gradient(180deg, rgba(255,59,92,.18), rgba(255,59,92,.06));
      box-shadow: 0 14px 36px rgba(255,59,92,.20), 0 0 0 1px rgba(255,59,92,.18) inset;
    }
    .mode-icon-wrap{
      width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
      background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);font-size:2rem;position:relative;
      box-shadow: 0 6px 16px rgba(0,0,0,.18) inset;
    }
    .mode-card.selected .mode-icon-wrap{background: linear-gradient(135deg, #2ed573, #10ac84);border-color:rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(46,213,115,.35)}
    .mode-card.selected#cardSeeker .mode-icon-wrap{background: linear-gradient(135deg, #ff3b5c, #ff6b81);box-shadow:0 8px 20px rgba(255,59,92,.35)}
    .mode-name{font-size:1.06rem;font-weight:900;letter-spacing:-.2px}
    .mode-desc{font-size:.82rem;opacity:.74;line-height:1.6;font-weight:500}
    .mode-check{
      position:absolute;top:10px;left:10px;width:22px;height:22px;border-radius:50%;
      background: var(--secondary);color:#fff;display:grid;place-items:center;
      font-size:.75rem;transform:scale(0);transition:.3s cubic-bezier(.2,1.4,.4,1);border:2px solid rgba(255,255,255,.9)
    }
    .mode-card.selected .mode-check{transform:scale(1)}
    .mode-card.selected#cardSeeker .mode-check{background:var(--primary)}
    .diff-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
    .diff-label{font-size:.78rem;color:var(--muted);font-weight:700;margin-left:4px}
    .diff-chip{
      background: rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
      color:var(--ink);font-family:inherit;font-weight:800;font-size:.84rem;
      padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .2s ease;
      display:flex;align-items:center;gap:6px;
    }
    .diff-chip:hover{background:rgba(255,255,255,.09);transform:translateY(-1px)}
    .diff-chip.active{border-color: var(--accent);background: linear-gradient(180deg, rgba(255,192,72,.22), rgba(255,192,72,.10));color:var(--accent);box-shadow:0 6px 16px rgba(255,192,72,.18)}
    /* ---- character gallery ---- */
    .char-gallery-wrap{width:100%;max-width:640px;background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 12px 10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
    .char-gallery-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 2px}
    .char-gallery-title{font-size:.82rem;font-weight:900;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}
    .char-gallery-title span{opacity:.9}
    .char-gallery-hint{font-size:.68rem;color:var(--muted);font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);padding:3px 8px;border-radius:999px}
    .char-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:8px}
    .char-grid.seekers{grid-template-columns:repeat(3, 1fr);max-width:380px;margin:0 auto}
    .char-card{position:relative;background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1.5px solid rgba(255,255,255,.08);border-radius:14px;padding:8px 4px 6px;cursor:pointer;transition:all .22s cubic-bezier(.2,1.2,.3,1);display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}
    .char-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);opacity:.6}
    .char-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16);background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04))}
    .char-card.selected{border-color: var(--accent);background: linear-gradient(180deg, rgba(255,192,72,.18), rgba(255,192,72,.06));box-shadow:0 8px 20px rgba(255,192,72,.18)}
    .char-card.selected.seek{border-color: var(--primary);background: linear-gradient(180deg, rgba(255,59,92,.18), rgba(255,59,92,.06));box-shadow:0 8px 20px rgba(255,59,92,.18)}
    .char-thumb{width:58px;height:58px;border-radius:50%;background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.2) inset}
    .char-thumb img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
    .char-card.selected .char-thumb{border-color:rgba(255,192,72,.5);background: radial-gradient(circle at 30% 30%, rgba(255,192,72,.22), rgba(255,255,255,.04))}
    .char-card.selected.seek .char-thumb{border-color:rgba(255,59,92,.5);background: radial-gradient(circle at 30% 30%, rgba(255,59,92,.22), rgba(255,255,255,.04))}
    .char-name{font-size:.74rem;font-weight:900;letter-spacing:-.2px;line-height:1}
    .char-desc{font-size:.62rem;opacity:.62;font-weight:600}
    .char-tick{position:absolute;top:6px;left:6px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#1a1a2e;display:grid;place-items:center;font-size:.65rem;font-weight:900;transform:scale(0);transition:.25s cubic-bezier(.2,1.4,.4,1);border:1.5px solid white}
    .char-card.selected .char-tick{transform:scale(1)}
    .char-card.selected.seek .char-tick{background:var(--primary);color:white}
    @media (max-width:560px){.char-grid{grid-template-columns:repeat(5, 1fr);gap:6px}.char-thumb{width:48px;height:48px}.char-thumb img{width:44px;height:44px}.char-name{font-size:.66rem}}
    .btn-main{
      position:relative;overflow:hidden;isolation:isolate;
      background: linear-gradient(135deg, #2ed573 0%, #10ac84 55%, #0fb68e 100%);
      color:#fff;border:none;font-family:inherit;font-size:1.08rem;font-weight:900;
      padding:14px 36px;border-radius:999px;cursor:pointer;
      box-shadow: 0 14px 32px rgba(46,213,115,.32), 0 1px 0 rgba(255,255,255,.28) inset;
      transition: transform .18s ease, box-shadow .18s ease, filter .18s;
      display:inline-flex;align-items:center;gap:10px;
    }
    .btn-main::before{
      content:"";position:absolute;inset:0;
      background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 30%, transparent 45%);
      transform:translateX(-100%);transition: transform .65s ease;
    }
    .btn-main:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 38px rgba(46,213,115,.42);filter:brightness(1.02)}
    .btn-main:hover::before{transform:translateX(100%)}
    .btn-main:active{transform:scale(.98)}
    .btn-main svg{width:18px;height:18px;fill:none;stroke:white;stroke-width:2.2}
    .btn-ghost{
      background: rgba(255,255,255,.06);color:var(--ink);
      border:1px solid rgba(255,255,255,.10);font-family:inherit;
      font-size:.96rem;font-weight:800;padding:11px 22px;border-radius:999px;cursor:pointer;
      transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    }
    .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
    .key-hints{
      display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;
      font-size:.78rem;color:#8b98ad;
    }
    .key-hints .hint-pill{
      display:flex;align-items:center;gap:8px;
      background: rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
      padding:6px 10px;border-radius:999px;
    }
    .kbd{
      background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
      padding:2px 7px;border-radius:6px;font-weight:800;color:#fff;
      border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;
      box-shadow:0 2px 0 rgba(0,0,0,.25);display:inline-block;font-size:.78rem;min-width:22px;text-align:center;
    }
    .stats-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
    .stat-box{
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 18px;min-width:110px;
      box-shadow:0 8px 20px rgba(0,0,0,.18);
    }
    .stat-num{font-size:1.35rem;font-weight:900;color:var(--accent)}
    .stat-lbl{font-size:.72rem;opacity:.68;margin-top:2px;font-weight:600}
    .version-badge{
      position:absolute;bottom:12px;left:14px;
      font-size:.68rem;color:rgba(255,255,255,.42);font-weight:600;letter-spacing:.04em;
      background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:5px 9px;border-radius:999px;
    }
    @media (max-width:780px){
      .mode-select-grid{grid-template-columns:1fr;gap:10px}
      .mode-card{flex-direction:row;text-align:right;gap:12px;padding:14px}
      .mode-icon-wrap{width:52px;height:52px;font-size:1.6rem;flex-shrink:0}
      .mode-card > div{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
      .key-hints{display:none}
      .hud-value{font-size:1.05rem}
      .stamina-container{width:96px}
      #toastStack{top:calc(var(--sat, 0px) + 112px)}
      .brand-mark{width:78px;height:78px;border-radius:18px}
      .brand-mark img{width:62px;height:62px}
      .brand-title{font-size:1.7rem}
      .version-badge{display:none}
    }
    @media (max-width:560px){
      #hud{top:max(8px, env(safe-area-inset-top));left:8px;right:8px;gap:6px}
      .hud-group{gap:6px}
      .hud-card{padding:6px 10px;min-height:42px;border-radius:11px}
      .hud-title{font-size:.58rem}
      .hud-value{font-size:.92rem}
      .stamina-container{width:72px;height:8px}
      .icon-btn{width:38px;min-height:42px;border-radius:11px}
      #cardHideState,#cardRole{display:none !important}
      #toastStack{top:calc(var(--sat, 0px) + 104px)}
      .toast{font-size:.84rem;padding:7px 14px}
      .hud-title{display:none}
      .joystick-zone{width:116px;height:116px}
      .joystick-knob{width:48px;height:48px;top:34px;left:34px}
      .sprint-touch-btn{width:74px;height:74px;font-size:.8rem}
    }
    @media (max-height:560px){
      .game-subtitle{display:none}
      .menu-screen{gap:10px}
      .brand{gap:6px}
    }
  
    /* ---- MULTIPLAYER & LOBBY UI ---- */
    .menu-tabs { display:flex; gap:10px; margin-bottom:6px; background:rgba(255,255,255,.05); padding:4px; border-radius:14px; border:1px solid rgba(255,255,255,.08); width:100%; max-width:440px; }
    .tab-btn { flex:1; padding:8px 16px; border:none; background:transparent; color:var(--muted); font-family:inherit; font-weight:700; font-size:.9rem; border-radius:10px; cursor:pointer; transition:.2s; }
    .tab-btn.active { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(255,59,92,.35); }
    .lobby-screen { position:absolute; inset:0; z-index:35; background:#060910; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center; gap:14px; overflow-y:auto; animation:fadeIn .3s ease both; }
    .lobby-box { width:100%; max-width:480px; background:rgba(18,26,44,.88); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:0 16px 36px rgba(0,0,0,.45); }
    .lobby-header { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; }
    .lobby-title { font-size:1.15rem; font-weight:900; color:var(--ink); }
    .room-badge { background:rgba(46,213,115,.15); color:var(--secondary); border:1px solid rgba(46,213,115,.3); padding:4px 10px; border-radius:8px; font-weight:900; font-family:'Space Grotesk',monospace; letter-spacing:1px; }
    .lobby-players-list { display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; padding-right:4px; }
    .lobby-player-card { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:8px 12px; border-radius:12px; text-align:right; }
    .lobby-player-card.self { border-color:var(--secondary); background:rgba(46,213,115,.06); }
    .lobby-player-avatar { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); padding:4px; object-fit:contain; }
    .lobby-player-info { flex:1; }
    .lobby-player-name { font-weight:800; font-size:.92rem; }
    .lobby-player-role { font-size:.78rem; font-weight:700; margin-top:2px; }
    .lobby-player-role.seeker { color:var(--primary); }
    .lobby-player-role.hider { color:var(--secondary); }
    .btn-role-switch { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:8px; padding:4px 8px; font-size:.78rem; font-family:inherit; font-weight:700; cursor:pointer; }
    .btn-role-switch:hover { background:rgba(255,255,255,.18); }
    .voice-status { display:flex; align-items:center; justify-content:center; gap:8px; font-size:.82rem; color:var(--muted); background:rgba(255,255,255,.03); padding:8px; border-radius:10px; }
    .input-field { width:100%; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; font-family:inherit; font-size:.95rem; text-align:right; }
    .input-field:focus { outline:none; border-color:var(--primary); }
    .lobby-share-row { display: flex; gap: 8px; justify-content: center; width: 100%; }
    .btn-share {
      flex: 1;
      background: linear-gradient(135deg, rgba(46,213,115,0.22), rgba(46,213,115,0.08));
      border: 1px solid rgba(46,213,115,0.45);
      color: var(--secondary-2);
      font-family: inherit;
      font-weight: 800;
      font-size: 0.9rem;
      padding: 10px 16px;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.2s ease;
      box-shadow: 0 4px 14px rgba(46,213,115,0.15);
    }
    .btn-share:hover { background: rgba(46,213,115,0.3); transform: translateY(-1px); }
    .btn-share:active { transform: scale(0.97); }
    .btn-share.copied { background: var(--secondary); color: #060910; border-color: var(--secondary); font-weight: 900; }

    /* ---- SETTINGS PANEL ---- */
    .settings-btn{position:absolute;top:12px;right:12px;z-index:20;width:44px;height:44px;border-radius:13px;background:rgba(18,26,44,.88);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;box-shadow:0 6px 18px rgba(0,0,0,.35)}
    .settings-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}
    .settings-btn svg{width:20px;height:20px;stroke:white;stroke-width:2;fill:none}
    .settings-panel{position:fixed;top:0;right:-380px;width:360px;height:100vh;z-index:100;background:linear-gradient(180deg,#0f172a,#0a0f1e);border-left:1px solid rgba(255,255,255,.08);box-shadow:-20px 0 60px rgba(0,0,0,.6);transition:right .35s cubic-bezier(.2,1.2,.3,1);display:flex;flex-direction:column;padding:20px;overflow-y:auto}
    .settings-panel.open{right:0}
    .settings-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:99}
    .settings-backdrop.open{opacity:1;visibility:visible}
    .settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
    .settings-title{font-size:1.1rem;font-weight:900}
    .settings-close{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer}
    .settings-section{margin-bottom:24px}
    .settings-label{font-size:.75rem;font-weight:800;color:var(--muted);margin-bottom:10px;letter-spacing:.05em}
    .setting-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
    .setting-info{display:flex;flex-direction:column;gap:2px}
    .setting-name{font-weight:700;font-size:.9rem}
    .setting-desc{font-size:.7rem;color:var(--muted)}
    .toggle{width:52px;height:28px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);position:relative;cursor:pointer;transition:.2s}
    .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:.2s}
    .toggle.on{background:linear-gradient(135deg,#2ed573,#10ac84);border-color:rgba(255,255,255,.2)}
    .toggle.on::after{left:28px}
    .slider{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.12);appearance:none;cursor:pointer}
    .slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#ffc048,#ff9f43);border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer}
    .select-wrap{position:relative;width:100%}
    .select-wrap select{width:100%;padding:10px 36px 10px 12px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--ink);font-family:inherit;font-size:.9rem;appearance:none;cursor:pointer}
    .select-wrap::after{content:"▼";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.6rem;color:var(--muted);pointer-events:none}

    /* ---- TUTORIAL / HELP ---- */
    .help-btn{position:absolute;top:12px;left:12px;z-index:20;width:44px;height:44px;border-radius:13px;background:rgba(18,26,44,.88);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
    .help-btn:hover{background:rgba(255,255,255,.1)}
    .help-btn svg{width:20px;height:20px;stroke:white;stroke-width:2;fill:none}
    .help-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.3s}
    .help-modal.open{opacity:1;visibility:visible}
    .help-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75)}
    .help-content{position:relative;background:linear-gradient(180deg,#121c36,#0a0f1e);border:1px solid rgba(255,255,255,.1);border-radius:22px;max-width:580px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:popIn .35s cubic-bezier(.2,1.4,.4,1)}
    @keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
    .help-header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
    .help-title{font-size:1.2rem;font-weight:900}
    .help-close{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer}
    .help-body{padding:20px}
    .help-section{margin-bottom:20px}
    .help-section-title{font-weight:900;font-size:.95rem;margin-bottom:10px;color:var(--accent)}
    .help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
    .help-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
    .help-card svg{width:36px;height:36px;stroke:var(--accent);stroke-width:2;fill:none}
    .help-card-title{font-weight:800;font-size:.82rem}
    .help-card-desc{font-size:.7rem;color:var(--muted);line-height:1.5}

    /* ---- FOOTSTEP PARTICLES ---- */
    /* handled in JS */

    /* ---- PERFORMANCE MONITOR ---- */
    .perf-monitor{position:fixed;bottom:12px;right:12px;z-index:50;background:rgba(6,9,16,.92);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;font-family:monospace;font-size:.68rem;color:var(--accent);display:none;pointer-events:none}
    .perf-monitor.show{display:block}
    .perf-row{display:flex;gap:16px;white-space:nowrap}
    .perf-label{color:var(--muted)}

    /* ---- END SCREEN CHART ---- */
    .end-extra{margin-top:14px;padding-top:14px;border-top:2px dashed rgba(0,0,0,.14);width:100%;max-width:520px}
    .end-chart-title{font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:.66rem;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:#0f0f0f;background:#c4f542;border:2px solid #0f0f0f;box-shadow:3px 3px 0 #0f0f0f;display:inline-block;padding:4px 9px;margin-bottom:12px;transform:rotate(-.5deg)}
    .end-chart{display:flex;gap:10px;align-items:flex-end;justify-content:center}
    .end-col{flex:1 1 0;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:6px}
    .end-col-track{width:100%;height:76px;background:#f0ede6;border:2px solid #0f0f0f;box-shadow:3px 3px 0 #0f0f0f;display:flex;align-items:flex-end;overflow:hidden}
    .end-col-fill{width:100%;transition:height .7s cubic-bezier(.2,1.3,.4,1)}
    .end-col-fill.seeker{background:repeating-linear-gradient(135deg,#ff5e5e 0 8px,#ff7b7b 8px 16px)}
    .end-col-fill.hider{background:repeating-linear-gradient(135deg,#34d97c 0 8px,#7bed9f 8px 16px)}
    .end-col-fill.time{background:repeating-linear-gradient(135deg,#ffb62e 0 8px,#ffd06a 8px 16px)}
    .end-col-val{font-family:'Space Grotesk',monospace;font-size:.82rem;font-weight:900;color:#0f0f0f}
    .end-col-label{font-size:.68rem;font-weight:800;color:#6b6b60}

    /* ---- BUSH SHAKE ENHANCED ---- */
    /* handled in JS */

    /* ---- MOBILE SETTINGS TOGGLE ---- */
    @media (max-width:560px){
      .settings-panel{width:100vw;right:-100vw}
      .help-content{margin:10px;border-radius:16px}
    }

        /* =====================================================================
       MAIN MENU V3 — Non-Cliché: Evidence Board / Brutalist Paper
       My taste: tactile, editorial, pinned-paper dossier. No neon glass.
       ===================================================================== */
    #mainMenu.menu-pro{
      --paper:#fffef8;
      --paper-2:#f5f1e6;
      --ink:#0f0f0f;
      --muted-paper:#6b6b60;
      --cork:#0e1014;
      --red:#ff3b3b;
      --lime:#c4f542;
      gap:0;
      background: #0e1014;
      align-items:stretch;
      justify-content:flex-start;
      justify-content:safe center;
      padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
      overflow-x:hidden;
    }
    #mainMenu.menu-pro .menu-bg{
      background:
        radial-gradient(700px 520px at 18% 8%, rgba(196,245,66,.06), transparent 62%),
        radial-gradient(620px 480px at 88% 18%, rgba(255,59,92,.05), transparent 64%),
        linear-gradient(180deg, #111318 0%, #0e1014 100%);
    }
    #mainMenu.menu-pro .menu-bg::before{
      opacity:.06;
      background-image:
        radial-gradient(rgba(255,255,255,.9) 1.1px, transparent 1.1px),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
      background-size: 18px 18px, 90px 90px, 90px 90px;
    }
    #mainMenu.menu-pro .menu-bg::after{ opacity:0; }
    #mainMenu.menu-pro .orb{ display:none; }
    #mainMenu.menu-pro .menu-shell{
      width: min(1060px, 100%);
      margin: 0 auto;
      display:flex; flex-direction:column; gap:20px;
      position:relative;
    }
    #mainMenu.menu-pro .menu-shell::before{
      content:"";
      position:absolute; top: -6px; left: -8px; right: -8px; height:2px;
      background: repeating-linear-gradient(90deg, rgba(255,59,92,0) 0 8px, rgba(255,59,92,.55) 8px 14px, rgba(255,59,92,0) 14px 22px);
      opacity:.55; pointer-events:none; transform: rotate(-0.2deg);
    }
    #mainMenu.menu-pro .menu-header{
      display:flex; flex-direction:column; align-items:center; gap:12px;
      text-align:center; padding: 10px 0 2px; position:relative;
    }
    #mainMenu.menu-pro .brand{ gap:14px; animation:none; }
    #mainMenu.menu-pro .brand-mark{
      width:72px; height:72px; border-radius: 4px;
      background: var(--paper);
      border: 2px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      transform: rotate(-1.2deg);
      position:relative;
    }
    #mainMenu.menu-pro .brand-mark::after{
      content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(2deg);
      width:44px; height:14px; background: rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.08); box-shadow: 0 1px 4px rgba(0,0,0,.12);
      border-radius:2px;
    }
    #mainMenu.menu-pro .brand-mark img{ width:48px; height:48px; }
    #mainMenu.menu-pro .brand-title{
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size: clamp(2.1rem, 5.2vw, 3.2rem);
      font-weight:900; letter-spacing:-.05em; line-height:.95;
      background:none; -webkit-text-fill-color: var(--paper);
      color: var(--paper);
      display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; justify-content:center;
      text-shadow: 4px 4px 0 rgba(0,0,0,.85);
    }
    #mainMenu.menu-pro .brand-title small{
      font-family:'Vazirmatn',sans-serif;
      font-size:.32em; letter-spacing:.18em; font-weight:900; text-transform:uppercase;
      background: var(--red); color:white; -webkit-text-fill-color:white;
      border:2px solid var(--ink); padding:6px 10px; border-radius:0;
      box-shadow: 3px 3px 0 var(--ink);
      transform: rotate(1.4deg) translateY(-4px);
    }
    #mainMenu.menu-pro .brand-kicker{
      font-family:'Space Grotesk',monospace;
      font-size:.68rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
      color: rgba(255,255,255,.42);
      border:1px dashed rgba(255,255,255,.14); padding:6px 12px; background: rgba(255,255,255,.02);
    }
    #mainMenu.menu-pro .brand-kicker::before, #mainMenu.menu-pro .brand-kicker::after{ display:none; }
    #mainMenu.menu-pro .game-subtitle{
      max-width:520px; font-size:.88rem; line-height:1.6;
      color: rgba(255,255,255,.55); font-weight:500;
      background: none; border:none;
      padding:0; transform: none;
    }
    #mainMenu.menu-pro .game-subtitle strong{ color: var(--lime); font-weight:900; background: rgba(196,245,66,.10); padding:0 4px; }
    #mainMenu.menu-pro .menu-tabs{
      width:min(560px, 100%); margin: 0 auto;
      background: transparent; border:none; border-radius:0;
      padding:0; gap:0;
      box-shadow:none; backdrop-filter:none;
      display:flex; align-items:flex-end; justify-content:center;
      transform: rotate(-0.15deg);
    }
    #mainMenu.menu-pro .tab-btn{
      flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size:.86rem; font-weight:800; letter-spacing:.02em;
      padding:12px 14px 10px; border-radius: 10px 10px 0 0;
      color: rgba(255,255,255,.48);
      background: #1a1d24; border:1px solid rgba(255,255,255,.06);
      border-bottom:1px solid transparent;
      margin-bottom:-1px; position:relative; top:1px;
      box-shadow: 4px 0 0 rgba(0,0,0,.2);
    }
    #mainMenu.menu-pro .tab-btn.active{
      background: var(--paper); color: var(--ink);
      border-color: var(--ink); border-bottom-color: var(--paper);
      box-shadow: 5px -3px 0 rgba(0,0,0,.25);
      z-index:2;
    }
    #mainMenu.menu-pro .tab-btn.active::after{ display:none; }
    #mainMenu.menu-pro .menu-body{
      display:grid; grid-template-columns: 1fr 1.08fr; gap:18px;
      background: var(--paper);
      border:2px solid var(--ink);
      box-shadow: 10px 10px 0 var(--ink);
      padding:18px;
      position:relative;
      transform: rotate(0.18deg);
    }
    #mainMenu.menu-pro .menu-body::before{
      content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-1deg);
      width:120px; height:18px; background: rgba(255,255,255,.68);
      border:1px solid rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    #mainMenu.menu-pro .menu-body::after{
      content:"CASE \2116 02 \2014 TOP VIEW / HIDE & SEEK";
      position:absolute; bottom:-10px; right:14px;
      font-family:'Space Grotesk',monospace; font-size:.60rem; font-weight:800; letter-spacing:.14em;
      color: rgba(0,0,0,.32); background: var(--paper);
      border:1px solid var(--ink); padding:3px 8px; transform: rotate(0.6deg);
      box-shadow: 3px 3px 0 var(--ink);
    }
    #mainMenu.menu-pro .menu-col{ gap:14px; }
    #mainMenu.menu-pro .menu-col:first-child{ border-left: 1px dashed rgba(0,0,0,.12); padding-left:18px; }
    @media (max-width:860px){
      #mainMenu.menu-pro .menu-body{ grid-template-columns: 1fr; }
      #mainMenu.menu-pro .menu-col:first-child{ border-left:none; padding-left:0; border-top:1px dashed rgba(0,0,0,.12); padding-top:14px; }
      #mainMenu.menu-pro .menu-body::after{ display:none; }
    }
    #mainMenu.menu-pro .menu-topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; background: var(--paper); border:2px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:8px 10px; transform: rotate(-0.18deg); }
    #mainMenu.menu-pro .topbar-left{ display:flex; align-items:center; gap:8px; }
    #mainMenu.menu-pro .level-badge{ display:inline-flex; align-items:center; gap:6px; background: var(--ink); color:var(--paper); border:2px solid var(--ink); padding:6px 10px; font-family:'Space Grotesk',monospace; font-size:.68rem; font-weight:900; letter-spacing:.08em; box-shadow:3px 3px 0 rgba(0,0,0,.18); }
    #mainMenu.menu-pro .coins-badge{ display:inline-flex; align-items:center; gap:6px; background: var(--lime); color:var(--ink); border:2px solid var(--ink); padding:6px 10px; font-family:'Space Grotesk',monospace; font-size:.72rem; font-weight:900; box-shadow:3px 3px 0 var(--ink); }
    #mainMenu.menu-pro .best-badge{ display:inline-flex; align-items:center; gap:6px; background: white; color:var(--ink); border:2px solid var(--ink); padding:6px 10px; font-family:'Space Grotesk',monospace; font-size:.68rem; font-weight:900; box-shadow:3px 3px 0 var(--ink); }
    #mainMenu.menu-pro .topbar-right{ display:flex; align-items:center; gap:6px; }
    #mainMenu.menu-pro .shop-mini{ display:inline-flex; align-items:center; gap:6px; background: var(--red); color:white; border:2px solid var(--ink); padding:7px 12px; font-family:'Space Grotesk','Vazirmatn',sans-serif; font-size:.72rem; font-weight:900; box-shadow:3px 3px 0 var(--ink); cursor:pointer; transform: rotate(0.6deg); }
    #mainMenu.menu-pro .hero-cta{ background: var(--lime) !important; color:var(--ink) !important; border:2px solid var(--ink) !important; box-shadow:6px 6px 0 var(--ink) !important; transform: rotate(-0.4deg); font-size:1.15rem !important; padding:16px 22px !important; }
    #mainMenu.menu-pro .hero-cta svg{ stroke: var(--ink) !important; }
    #mainMenu.menu-pro .cta-sub{ font-family:'Space Grotesk',monospace; font-size:.62rem; font-weight:800; letter-spacing:.08em; color: rgba(0,0,0,.55); background: var(--paper); border:1px solid var(--ink); padding:4px 8px; display:inline-block; transform: rotate(0.3deg); box-shadow:2px 2px 0 var(--ink); }
    #mainMenu.menu-pro .mode-select-grid{ display:contents; }
    #mainMenu.menu-pro .mode-card{
      flex-direction:row; align-items:center; text-align:right;
      padding:14px 14px; gap:14px;
      border-radius:0;
      background: var(--paper-2);
      border:2px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      transform: rotate(-0.2deg);
      transition: all .16s steps(2);
    }
    #mainMenu.menu-pro .mode-card:nth-child(2){ transform: rotate(0.35deg); }
    #mainMenu.menu-pro .mode-card:hover{
      transform: translate(-1px,-1px) rotate(-0.2deg);
      box-shadow: 7px 7px 0 var(--ink);
      background: #fffdf6;
    }
    #mainMenu.menu-pro .mode-card.selected{
      background: var(--lime);
      border-color: var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      transform: rotate(-0.2deg) scale(1.01);
    }
    #mainMenu.menu-pro .mode-card.selected#cardSeeker{
      background: #ff5e5e; color: white;
    }
    #mainMenu.menu-pro .mode-card.selected#cardSeeker .mode-name, #mainMenu.menu-pro .mode-card.selected#cardSeeker .mode-desc{ color: white; }
    #mainMenu.menu-pro .mode-card.selected .mode-desc{ color: rgba(0,0,0,.62); }
    #mainMenu.menu-pro .mode-card::before, #mainMenu.menu-pro .mode-card::after{ display:none; }
    #mainMenu.menu-pro .mode-card .mode-icon-wrap{
      width:54px; height:54px; border-radius:0; font-size:1.5rem;
      background: white; border:2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink); flex-shrink:0;
    }
    #mainMenu.menu-pro .mode-card.selected .mode-icon-wrap{ background: white; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
    #mainMenu.menu-pro .mode-name{ font-size:1rem; font-weight:900; letter-spacing:-.3px; color: var(--ink); font-family:'Space Grotesk','Vazirmatn',sans-serif; }
    #mainMenu.menu-pro .mode-desc{ font-size:.76rem; line-height:1.6; color: #6b6b60; font-weight:700; }
    #mainMenu.menu-pro .mode-check{
      top:-8px; left:-8px; width:22px; height:22px; font-size:.70rem;
      background: var(--red); color:white; border:2px solid var(--ink);
      box-shadow: 2px 2px 0 var(--ink); border-radius:0; transform: rotate(-8deg) scale(0);
    }
    #mainMenu.menu-pro .mode-card.selected .mode-check{ transform: rotate(-8deg) scale(1); }
    #mainMenu.menu-pro .char-gallery-wrap{
      background: transparent; border:none; border-radius:0;
      padding:0; box-shadow:none;
      transform: rotate(0.2deg);
    }
    #mainMenu.menu-pro .char-gallery-head{
      margin:0 0 12px; padding:0 0 10px;
      border-bottom: 2px solid var(--ink);
      display:flex; align-items:center; justify-content:space-between;
      font-family:'Space Grotesk',monospace;
    }
    #mainMenu.menu-pro .char-gallery-title{
      font-size:.78rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color: var(--ink);
    }
    #mainMenu.menu-pro .char-gallery-title span:first-child{
      width:auto; height:auto; background:none; border:none; border-radius:0;
      font-size:.78rem; color: var(--ink);
    }
    #mainMenu.menu-pro .char-gallery-hint{
      background: var(--ink); color: var(--paper);
      border:1px solid var(--ink); border-radius:0;
      font-family:'Space Grotesk',monospace; font-size:.62rem; font-weight:800;
      padding:4px 8px; box-shadow: 2px 2px 0 rgba(0,0,0,.12);
    }
    #mainMenu.menu-pro .char-grid{ gap:8px; }
    #mainMenu.menu-pro .char-card{
      border-radius:0; padding:0 0 8px;
      background: white; border:2px solid var(--ink);
      box-shadow: 5px 5px 0 var(--ink);
      transform: rotate(-0.6deg);
      overflow:visible;
    }
    #mainMenu.menu-pro .char-card:nth-child(2n){ transform: rotate(0.5deg); }
    #mainMenu.menu-pro .char-card:nth-child(3n){ transform: rotate(-0.3deg); }
    #mainMenu.menu-pro .char-card::after{
      content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(-0.8deg);
      width:34px; height:12px; background: rgba(255,255,255,.62);
      border:1px solid rgba(0,0,0,.06); box-shadow: 0 1px 4px rgba(0,0,0,.08);
      display:block;
    }
    #mainMenu.menu-pro .char-card:hover{ transform: translateY(-2px) rotate(-0.6deg); box-shadow: 7px 7px 0 var(--ink); }
    #mainMenu.menu-pro .char-card.selected{
      border-color: var(--ink); background: white;
      box-shadow: 6px 6px 0 var(--ink);
      outline: 3px solid var(--lime); outline-offset: -1px;
      transform: rotate(-0.6deg) scale(1.02);
    }
    #mainMenu.menu-pro .char-card.selected.seek{ outline-color: var(--red); }
    #mainMenu.menu-pro .char-thumb{
      width:100%; height:62px; border-radius:0; background: #f0ede6;
      border:none; border-bottom:2px solid var(--ink);
      box-shadow:none;
    }
    #mainMenu.menu-pro .char-thumb img{ width:52px; height:52px; }
    #mainMenu.menu-pro .char-name{
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size:.68rem; font-weight:900; color: var(--ink); margin-top:6px;
    }
    #mainMenu.menu-pro .char-desc{ font-size:.58rem; color: #6b6b60; font-weight:700; padding:0 4px; }
    #mainMenu.menu-pro .char-ability{ margin:6px 4px 0; padding:5px 6px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); font-family:'Space Grotesk','Vazirmatn',monospace; font-size:.52rem; line-height:1.45; transform:none; text-align:right; }
    #mainMenu.menu-pro .char-ability-name{ font-weight:900; display:block; font-size:.58rem; letter-spacing:.02em; color:var(--lime); margin-bottom:2px }
    #mainMenu.menu-pro .char-ability-desc{ font-weight:700; color:rgba(255,255,255,.74); display:block }
    #mainMenu.menu-pro .char-card.seek .char-ability-name{ color:#ff9aa2 }
    #mainMenu.menu-pro .char-card:hover .char-ability{ transform:rotate(0deg) scale(1.03); box-shadow:3px 3px 0 var(--ink) }
    #mainMenu.menu-pro .char-card:hover{ transform: translateY(-2px) rotate(-0.2deg) !important }
    #mainMenu.menu-pro .char-tick{
      top:-9px; left:-9px; width:20px; height:20px; font-size:.60rem;
      background: var(--lime); color: var(--ink); border:2px solid var(--ink);
      box-shadow: 2px 2px 0 var(--ink); border-radius:0; transform: rotate(-12deg) scale(0);
    }
    #mainMenu.menu-pro .char-card.selected .char-tick{ transform: rotate(-12deg) scale(1); }
    #mainMenu.menu-pro .char-card.selected.seek .char-tick{ background: var(--red); color:white; }
    #mainMenu.menu-pro .diff-row{
      width:100%;
      background: white; border:2px solid var(--ink);
      border-radius:0; padding:4px; gap:4px;
      box-shadow: 6px 6px 0 var(--ink);
      transform: rotate(0.15deg);
    }
    #mainMenu.menu-pro .diff-label{ display:none; }
    #mainMenu.menu-pro .diff-row::before{
      content:"سطح پرونده"; font-family:'Space Grotesk',monospace;
      font-size:.62rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
      color: var(--ink); background: var(--paper-2);
      border:2px solid var(--ink); padding:6px 10px;
      margin-left:4px; box-shadow: 2px 2px 0 var(--ink);
    }
    #mainMenu.menu-pro .diff-chip{
      flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
      background: transparent; border:2px solid transparent;
      padding:8px; border-radius:0;
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size:.78rem; font-weight:800; color: var(--ink);
    }
    #mainMenu.menu-pro .diff-chip.active{
      background: var(--ink); color: var(--paper); border-color: var(--ink);
      box-shadow: 3px 3px 0 rgba(0,0,0,.18);
      transform: rotate(-0.3deg);
    }
    #mainMenu.menu-pro #onlineSetupSection{
      max-width:100%;
      background: white; border:2px solid var(--ink);
      border-radius:0; padding:14px;
      box-shadow: 6px 6px 0 var(--ink);
      transform: rotate(-0.15deg);
    }
    #mainMenu.menu-pro #onlineSetupSection .input-field{
      background: var(--paper-2); border:2px solid var(--ink);
      border-radius:0; color: var(--ink); font-weight:700;
      box-shadow: 3px 3px 0 var(--ink);
    }
    #mainMenu.menu-pro #onlineSetupSection .input-field:focus{
      border-color: var(--ink); background:white;
      box-shadow: 4px 4px 0 var(--ink);
    }
    #mainMenu.menu-pro .menu-cta{
      display:flex; flex-direction:column; align-items:center; gap:10px; padding: 4px 0 2px;
    }
    #mainMenu.menu-pro .menu-cta .btn-main{
      width:min(420px, 100%);
      justify-content:center; gap:10px;
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size:1.18rem; font-weight:900; letter-spacing:-.03em;
      padding:16px 28px; border-radius:0;
      background: var(--red); color:white;
      border:3px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      transform: rotate(-0.4deg);
    }
    #mainMenu.menu-pro .menu-cta .btn-main svg{ stroke:white; }
    #mainMenu.menu-pro .menu-cta .btn-main:hover{
      transform: translate(-1px,-1px) rotate(-0.4deg);
      box-shadow: 9px 9px 0 var(--ink);
      background: #ff4d4d;
    }
    #mainMenu.menu-pro .menu-cta .btn-main:active{
      transform: translate(2px,2px) rotate(-0.4deg);
      box-shadow: 4px 4px 0 var(--ink);
    }
    #mainMenu.menu-pro .cta-sub{
      font-family:'Space Grotesk',monospace;
      font-size:.64rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
      color: rgba(255,255,255,.38);
      background: rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.10);
      padding:6px 12px; transform: rotate(0.2deg);
    }
    #mainMenu.menu-pro .cta-sub::before, #mainMenu.menu-pro .cta-sub::after{ display:none; }
    #mainMenu.menu-pro .key-hints{ gap:8px; }
    #mainMenu.menu-pro .key-hints .hint-pill{
      background: var(--paper); border:2px solid var(--ink);
      border-radius:0; color: var(--ink); font-size:.70rem; font-weight:800;
      box-shadow: 3px 3px 0 var(--ink); transform: rotate(0.2deg);
    }
    #mainMenu.menu-pro .key-hints .hint-pill:nth-child(even){ transform: rotate(-0.2deg); }
    #mainMenu.menu-pro .kbd{
      background: var(--ink); color: var(--paper);
      border:1px solid var(--ink); border-radius:0;
      font-size:.68rem; box-shadow:none; min-width:22px;
    }
    #mainMenu.menu-pro .version-badge{
      background: var(--paper); border:2px solid var(--ink);
      color: var(--ink); border-radius:0;
      font-family:'Space Grotesk',monospace; font-size:.60rem; font-weight:800;
      box-shadow: 3px 3px 0 var(--ink);
    }
    #mainMenu.menu-pro a.version-badge{ background: white; }
    @media (max-width:860px){
      #mainMenu.menu-pro .menu-body{ grid-template-columns: 1fr; }
      #mainMenu.menu-pro .menu-body::after{ display:none; }
    }
    @media (max-width:560px){
      #mainMenu.menu-pro .brand-title{ font-size:1.9rem; }
      #mainMenu.menu-pro .mode-card{ padding:12px; }
      #mainMenu.menu-pro .char-grid{ grid-template-columns: repeat(5, 1fr); }
    }


    /* Menu icons — replaces emoji, matches brutalist ink-on-paper */
    .mi{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
    .mi svg{width:18px;height:18px;display:block;stroke-width:2.4}
    .mi--sm svg{width:16px;height:16px}
    .mi--xs svg{width:14px;height:14px}
    .mi--lg svg{width:26px;height:26px}
    .mi--inline svg{width:14px;height:14px;display:inline-block;vertical-align:-2px}
    #mainMenu .tab-btn .mi svg{width:16px;height:16px}
    #mainMenu .mode-icon-wrap{display:grid;place-items:center;background:var(--ink) !important;border-color:var(--ink) !important;box-shadow:3px 3px 0 var(--ink) !important}
    #mainMenu .mode-icon-wrap svg{width:32px;height:32px;stroke:var(--paper) !important;color:var(--paper) !important;stroke-width:2.4}
    #mainMenu .mode-icon-wrap svg [fill="currentColor"]{fill:var(--paper) !important}
    #mainMenu .diff-chip .mi{margin-inline-end:4px}
    #mainMenu .char-gallery-title .mi svg{width:15px;height:15px}
    #mainMenu.menu-pro .mode-card.selected .mode-icon-wrap{background:var(--lime) !important;border-color:var(--ink) !important}
    #mainMenu.menu-pro .mode-card.selected .mode-icon-wrap svg{stroke:var(--ink) !important;color:var(--ink) !important}
    #mainMenu.menu-pro .mode-card.selected .mode-icon-wrap svg [fill="currentColor"]{fill:var(--ink) !important}
    #mainMenu.menu-pro .mode-card.selected#cardSeeker .mode-icon-wrap{background:var(--red) !important}
    #mainMenu.menu-pro .mode-card.selected#cardSeeker .mode-icon-wrap svg{stroke:white !important;color:white !important}
    #mainMenu.menu-pro .mode-card.selected#cardSeeker .mode-icon-wrap svg [fill="currentColor"]{fill:white !important}

    /* On short phones start overlays at the top; each overlay already owns scrolling. */
    @media (max-width:680px){
      .menu-screen, .lobby-screen{
        justify-content:flex-start !important;
        padding-bottom: calc(var(--sab) + 40px) !important;
      }
      #onlineLobby .lobby-players-list{
        max-height:none !important;
      }
    }

    /* PRO unify: lobby / settings / help same brutalist paper as main menu */
    #onlineLobby.lobby-screen, #inviteModal.lobby-screen{
      background: #0e1014;
      background-image:
        radial-gradient(700px 520px at 18% 8%, rgba(196,245,66,.06), transparent 62%),
        radial-gradient(620px 480px at 88% 18%, rgba(255,59,92,.05), transparent 64%);
      padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
    }
    #onlineLobby .lobby-box, #inviteModal .lobby-box{
      background: #fffef8; border:2px solid #0f0f0f; box-shadow: 10px 10px 0 #0f0f0f;
      position:relative; transform: rotate(0.18deg); border-radius:0;
    }
    #onlineLobby .lobby-box::before, #inviteModal .lobby-box::before{
      content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-1deg);
      width:120px; height:18px; background: rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    #onlineLobby .lobby-title, #inviteModal h2{ font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; letter-spacing:-.02em; color:#0f0f0f; }
    #onlineLobby .room-badge{ background:#0f0f0f; color:#c4f542; border:2px solid #0f0f0f; box-shadow:2px 2px 0 #0f0f0f; border-radius:0; font-family:'Space Grotesk',monospace; }
    #onlineLobby .lobby-player-card{ background:white; border:2px solid #0f0f0f; box-shadow:3px 3px 0 #0f0f0f; border-radius:0; transform: rotate(-0.12deg); }
    #onlineLobby .lobby-player-card.self{ border-color:#0f0f0f; background:#c4f542; transform: rotate(0.18deg); }
    .settings-panel{
      background:#fffef8; border-left:2px solid #0f0f0f; box-shadow: -12px 0 24px rgba(0,0,0,.18), -6px 0 0 #0f0f0f;
      color:#0f0f0f; padding-top: calc(var(--sat) + 14px);
    }
    .settings-panel::before{
      content:""; position:absolute; top:8px; left:-10px; width:18px; height:52px;
      background: repeating-linear-gradient(180deg, #0f0f0f 0 10px, transparent 10px 18px);
      opacity:.85;
    }
    .settings-header{ border-bottom:2px dashed rgba(0,0,0,.14); }
    .settings-title{ font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; color:#0f0f0f; }
    .settings-close{ background:white; border:2px solid #0f0f0f; box-shadow:2px 2px 0 #0f0f0f; border-radius:0; color:#0f0f0f; }
    .setting-row{ border-bottom:1px dashed rgba(0,0,0,.10); }
    .setting-name{ color:#0f0f0f; }
    .setting-desc{ color:#6b6b60; }
    .settings-panel .toggle{ background:white; border:2px solid #0f0f0f; box-shadow:2px 2px 0 #0f0f0f; border-radius:999px; }
    .settings-panel .toggle.on{ background:#c4f542; border-color:#0f0f0f; }
    .help-modal{
      background: #0e1014;
      background-image:
        radial-gradient(700px 520px at 18% 8%, rgba(196,245,66,.06), transparent 62%),
        radial-gradient(620px 480px at 88% 18%, rgba(255,59,92,.05), transparent 64%),
        linear-gradient(180deg, #111318 0%, #0e1014 100%);
      backdrop-filter: none;
      padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
    }
    .help-backdrop{ display:none; }
    .help-content{
      background:#fffef8; border:2px solid #0f0f0f; box-shadow: 10px 10px 0 #0f0f0f;
      border-radius:0; position:relative; transform: rotate(0.18deg);
      width: min(720px, 100%); max-width:720px; max-height: calc(100dvh - var(--sat) - var(--sab) - 28px);
      animation: popIn .32s cubic-bezier(.2,1.4,.4,1);
    }
    .help-content::before{
      content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-1deg);
      width:120px; height:18px; background: rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(0,0,0,.12);
    }
    .help-content::after{
      content:"CASE \2116 02 \2014 HOW TO PLAY";
      position:absolute; bottom:-10px; right:14px;
      font-family:'Space Grotesk',monospace; font-size:.60rem; font-weight:800; letter-spacing:.14em;
      color: rgba(0,0,0,.32); background: #fffef8;
      border:1px solid #0f0f0f; padding:3px 8px; transform: rotate(0.6deg);
      box-shadow: 3px 3px 0 #0f0f0f;
    }
    .help-header{ border-bottom:2px dashed rgba(0,0,0,.12); padding:16px 18px; }
    .help-title{ font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; color:#0f0f0f; letter-spacing:-.02em; }
    .lobby-box .input-field, #inviteModal .input-field{ background:white; border:2px solid #0f0f0f; box-shadow:3px 3px 0 #0f0f0f; border-radius:0; color:#0f0f0f; }
    .lobby-box .input-field:focus{ border-color:#0f0f0f; box-shadow:4px 4px 0 #0f0f0f; }
    .settings-panel .select-wrap select{ background:white; border:2px solid #0f0f0f; box-shadow:3px 3px 0 #0f0f0f; border-radius:0; color:#0f0f0f; }
    .settings-panel .slider{ background: white; border:2px solid #0f0f0f; box-shadow:2px 2px 0 #0f0f0f; height:10px; border-radius:0; }
    .lobby-screen .btn-main, .lobby-screen .btn-share{ border:2px solid #0f0f0f; box-shadow:4px 4px 0 #0f0f0f; border-radius:0; transform: rotate(-0.18deg); }
    .help-body{ background:#fffef8; padding:16px; }
    .help-section-title{ color:#0f0f0f; font-family:'Space Grotesk','Vazirmatn',sans-serif; font-weight:900; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; background:#c4f542; border:2px solid #0f0f0f; display:inline-block; padding:4px 8px; box-shadow:3px 3px 0 #0f0f0f; margin-bottom:12px; transform: rotate(-0.4deg); }
    .help-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
    @media (max-width:520px){ .help-grid{ grid-template-columns: 1fr; } }
    .help-card{ background:white; border:2px solid #0f0f0f; box-shadow:4px 4px 0 #0f0f0f; border-radius:0; transform: rotate(-0.2deg); }
    .help-card:nth-child(even){ transform: rotate(0.2deg); }
    .help-card svg{ stroke:#0f0f0f; }
    .help-card-title{ color:#0f0f0f; font-weight:900; }
    .help-card-desc{ color:#3a3a32; }
    .help-close{ background:white; border:2px solid #0f0f0f; box-shadow:2px 2px 0 #0f0f0f; border-radius:0; color:#0f0f0f; width:36px; height:36px; font-weight:900; }
    .help-close:hover{ background:#0f0f0f; color:white; transform: rotate(-1deg); }



    /* ---- END / PAUSE: same brutalist paper as the menu, lobby and help ---- */
    #endModal.menu-screen, #pauseMenu.menu-screen{
      background:#0e1014;
      background-image:
        radial-gradient(700px 520px at 18% 8%, rgba(196,245,66,.06), transparent 62%),
        radial-gradient(620px 480px at 88% 18%, rgba(255,59,92,.05), transparent 64%);
      gap:0;
    }
    #endModal .menu-bg, #pauseMenu .menu-bg{ display:none }
    #endModal > *, #pauseMenu > *{ position:relative; z-index:1 }
    .end-sheet{
      width:min(560px,100%); background:#fffef8; border:2px solid #0f0f0f;
      box-shadow:10px 10px 0 #0f0f0f; padding:22px 20px 20px;
      display:flex; flex-direction:column; align-items:center; gap:12px;
      transform:rotate(.18deg); position:relative;
    }
    .end-sheet::before{
      content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-1deg);
      width:120px; height:18px; background:rgba(255,255,255,.72);
      border:1px solid rgba(0,0,0,.08); box-shadow:0 2px 8px rgba(0,0,0,.12);
    }
    .end-sheet .brand-mark{
      width:72px;height:72px;border-radius:0;background:#f0ede6;
      border:2px solid #0f0f0f;box-shadow:5px 5px 0 #0f0f0f;transform:rotate(-1.4deg);
    }
    .end-sheet .brand-mark::after{ display:none }
    .end-sheet h2{
      font-family:'Space Grotesk','Vazirmatn',sans-serif;font-weight:900;
      color:#0f0f0f;letter-spacing:-.02em;
    }
    .end-sheet .game-subtitle{ color:#5c5c52; max-width:440px }
    .end-sheet .stats-row{ gap:10px }
    .end-sheet .stat-box{
      background:#fff;border:2px solid #0f0f0f;border-radius:0;
      box-shadow:4px 4px 0 #0f0f0f;min-width:98px;padding:10px 14px;transform:rotate(-.25deg);
    }
    .end-sheet .stat-box:nth-child(even){ transform:rotate(.3deg) }
    .end-sheet .stat-num{ color:#0f0f0f;font-family:'Space Grotesk','Vazirmatn',sans-serif }
    .end-sheet .stat-lbl{ color:#6b6b60;opacity:1;font-weight:800 }
    .end-sheet .btn-main{
      border-radius:0;background:#c4f542;color:#0f0f0f;border:3px solid #0f0f0f;
      box-shadow:6px 6px 0 #0f0f0f;transform:rotate(-.4deg);
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
    }
    .end-sheet .btn-main svg{ stroke:#0f0f0f }
    .end-sheet .btn-main:hover{ background:#d3ff5c;box-shadow:7px 7px 0 #0f0f0f;transform:translate(-1px,-1px) rotate(-.4deg) }
    .end-sheet .btn-main:active{ box-shadow:3px 3px 0 #0f0f0f;transform:translate(2px,2px) rotate(-.4deg) }
    .end-sheet .btn-ghost{
      background:#fff;color:#0f0f0f;border:2px solid #0f0f0f;border-radius:0;
      box-shadow:4px 4px 0 #0f0f0f;backdrop-filter:none;transform:rotate(.3deg);
    }
    .end-sheet .btn-ghost:hover{ background:#0f0f0f;color:#fff;transform:translate(-1px,-1px) rotate(.3deg) }
    @media (max-width:520px){
      .end-sheet{ padding:18px 14px 16px; box-shadow:7px 7px 0 #0f0f0f }
      .end-sheet .stat-box{ min-width:84px;padding:8px 10px }
    }


    /* =====================================================================
       MENU DENSITY — the start button used to fall below the fold on a
       860px-tall wrapper. Tighten the vertical rhythm and put map + difficulty
       on one band so the primary action is always reachable without scrolling.
       ===================================================================== */
    #mainMenu.menu-pro .menu-shell{ gap:13px; }
    #mainMenu.menu-pro .menu-header{ gap:8px; padding:4px 0 0; }
    #mainMenu.menu-pro .brand{ gap:11px; }
    #mainMenu.menu-pro .brand-mark{ width:62px; height:62px; }
    #mainMenu.menu-pro .brand-mark img{ width:42px; height:42px; }
    #mainMenu.menu-pro .brand-title{ font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
    #mainMenu.menu-pro .menu-body{ padding:15px; gap:15px; }
    #mainMenu.menu-pro .menu-cta{ padding:0; gap:8px; }

    .setup-row{
      display:grid; grid-template-columns: 1.45fr 1fr; gap:12px; width:100%; align-items:stretch;
    }
    @media (max-width:860px){ .setup-row{ grid-template-columns:1fr; } }

    #mainMenu.menu-pro .setup-row .map-row,
    #mainMenu.menu-pro .setup-row .diff-row{
      display:flex; align-items:center; gap:5px; width:100%; margin:0;
      background:#fff; border:2px solid var(--ink); border-radius:0;
      box-shadow:6px 6px 0 var(--ink); padding:5px;
    }
    #mainMenu.menu-pro .setup-row .map-row{ transform:rotate(-.15deg); }
    #mainMenu.menu-pro .setup-row .diff-row{ transform:rotate(.15deg); }
    #mainMenu.menu-pro .setup-row .diff-row::before{ content:none; }
    #mainMenu.menu-pro .setup-label,
    #mainMenu.menu-pro .setup-row .diff-label{
      display:inline-flex; align-items:center; flex:none;
      font-family:'Space Grotesk',monospace;
      font-size:.60rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
      color:var(--ink); background:var(--paper-2);
      border:2px solid var(--ink); padding:6px 9px; margin:0;
      box-shadow:2px 2px 0 var(--ink);
    }
    #mainMenu.menu-pro .setup-row .diff-label{ display:inline-flex; }
    #mainMenu.menu-pro .map-chip{
      flex:1 1 0; min-width:0;
      display:inline-flex; align-items:center; justify-content:center;
      background:transparent; color:var(--ink);
      border:2px solid transparent; border-radius:0;
      padding:7px 4px; cursor:pointer;
      font-family:'Space Grotesk','Vazirmatn',sans-serif;
      font-size:.74rem; font-weight:800; white-space:nowrap;
      transition: background .14s, color .14s, box-shadow .14s;
    }
    #mainMenu.menu-pro .map-chip:hover{ background:var(--paper-2); }
    #mainMenu.menu-pro .map-chip.active{
      background:var(--ink); color:var(--paper);
      border-color:var(--ink); box-shadow:3px 3px 0 rgba(0,0,0,.18);
      transform:rotate(-.35deg);
    }
    #mainMenu.menu-pro .setup-row .diff-chip{ padding:7px 4px; font-size:.74rem; }
    #mainMenu.menu-pro .setup-row .diff-chip .mi svg{ width:13px; height:13px; }

    /* Character cards: give the ability panel room instead of cramming it. */
    #mainMenu.menu-pro .char-ability{ font-size:.55rem; line-height:1.5; padding:5px 7px; }
    #mainMenu.menu-pro .char-desc{ min-height:1.6em; }

    @media (max-height:900px){
      #mainMenu.menu-pro .brand-kicker{ display:none; }
      #mainMenu.menu-pro .game-subtitle{ font-size:.82rem; }
    }
    @media (max-height:820px){
      #mainMenu.menu-pro .game-subtitle{ display:none; }
      #mainMenu.menu-pro .menu-shell{ gap:10px; }
      #mainMenu.menu-pro .brand-mark{ width:52px; height:52px; }
      #mainMenu.menu-pro .brand-mark img{ width:36px; height:36px; }
      #mainMenu.menu-pro .menu-body{ padding:12px; }
    }


    /* =====================================================================
       MENU — phone fixes
       ===================================================================== */
    /* Grid items stretch by default, so the one selected card (which grows an
       ability panel) dragged every sibling to the same height — a column of
       500px-tall empty boxes on a phone. */
    .char-grid{ align-items:start; }
    #mainMenu.menu-pro .char-card{ align-self:start; }

    /* mobile.css pins the gear and "?" to the viewport, but its `#mainMenu`
       padding rule loses to `#mainMenu.menu-pro`, so the topbar slid underneath
       them. Restate it at matching specificity. */
    #mainMenu.menu-pro{ padding-top: calc(var(--sat) + 62px); }
    @media (max-height:760px){ #mainMenu.menu-pro{ padding-top: calc(var(--sat) + 54px); } }
    @media (max-height:480px) and (orientation:landscape){
      #mainMenu.menu-pro{ padding-top: calc(var(--sat) + 12px); }
    }

    @media (max-width:560px){
      #mainMenu.menu-pro .menu-topbar{ flex-wrap:wrap; gap:6px; padding:7px 8px; }
      #mainMenu.menu-pro .level-badge,
      #mainMenu.menu-pro .best-badge,
      #mainMenu.menu-pro .coins-badge{ font-size:.60rem; padding:5px 7px; }
      #mainMenu.menu-pro .shop-mini{ font-size:.66rem; padding:6px 9px; }
      #mainMenu.menu-pro .tab-btn{ font-size:.72rem; padding:9px 8px 8px; line-height:1.25; }
      #mainMenu.menu-pro .mode-card{ padding:11px; gap:11px; box-shadow:4px 4px 0 var(--ink); }
      #mainMenu.menu-pro .mode-card .mode-icon-wrap{ width:44px; height:44px; }
      #mainMenu.menu-pro .mode-icon-wrap svg{ width:26px; height:26px; }
      #mainMenu.menu-pro .mode-name{ font-size:.92rem; }
      #mainMenu.menu-pro .mode-desc{ font-size:.72rem; }
      #mainMenu.menu-pro .char-card{ box-shadow:3px 3px 0 var(--ink); }
      #mainMenu.menu-pro .char-thumb{ height:52px; }
      #mainMenu.menu-pro .char-thumb img{ width:42px; height:42px; }
      #mainMenu.menu-pro .char-ability{ display:none; }
      #mainMenu.menu-pro .setup-row .map-row,
      #mainMenu.menu-pro .setup-row .diff-row{ box-shadow:4px 4px 0 var(--ink); flex-wrap:wrap; }
      #mainMenu.menu-pro .map-chip,
      #mainMenu.menu-pro .setup-row .diff-chip{ font-size:.70rem; padding:6px 3px; }
      #mainMenu.menu-pro .menu-body{ box-shadow:6px 6px 0 var(--ink); }
    }

    /* ---- Meta: leaderboard & public rooms ---- */
    .lb-table{ width:100%; border-collapse:collapse; font-size:.86rem }
    .lb-table th{ font-size:.66rem; font-weight:900; letter-spacing:.06em; color:#6b6b60; text-align:right; padding:6px 8px; border-bottom:2px solid #0f0f0f }
    .lb-table td{ padding:8px 8px; border-bottom:1px dashed rgba(0,0,0,.14); font-weight:700 }
    .lb-table tr.me td{ background:var(--lime,#c4f542); font-weight:900 }
    .lb-table .lb-name{ max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    .lb-table .lb-best{ font-family:'Space Grotesk',monospace; font-weight:900 }
    .rooms-list{ display:flex; flex-direction:column; gap:6px; width:100% }
    .room-row{ display:flex; align-items:center; justify-content:space-between; gap:8px;
      background:#fffef8; border:2px solid #0f0f0f; box-shadow:4px 4px 0 #0f0f0f;
      padding:9px 12px; cursor:pointer; font-family:'Vazirmatn',sans-serif;
      transform:rotate(-.15deg); transition:transform .12s ease, box-shadow .12s ease }
    .room-row:hover{ transform:translate(-1px,-1px) rotate(-.15deg); box-shadow:5px 5px 0 #0f0f0f }
    .room-row:active{ transform:translate(1px,1px) rotate(-.15deg); box-shadow:2px 2px 0 #0f0f0f }
    .room-id{ font-family:'Space Grotesk',monospace; font-weight:900; color:#0f0f0f; direction:ltr }
    .room-meta{ font-size:.72rem; font-weight:800; color:#6b6b60 }
    .rooms-empty{ background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16);
      padding:10px; text-align:center; font-size:.78rem; font-weight:700; color:rgba(255,255,255,.6) }

    /* ---- Guest identity chip ---- */
    .guest-chip{
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;
      background:var(--paper);color:var(--ink);
      border:2px solid var(--ink);padding:6px 10px;
      font-family:'Space Grotesk','Vazirmatn',sans-serif;font-size:.68rem;font-weight:900;
      box-shadow:3px 3px 0 var(--ink);transform:rotate(.3deg);
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .guest-chip:hover{transform:translate(-1px,-1px) rotate(.3deg);box-shadow:4px 4px 0 var(--ink)}
    .guest-chip:active{transform:translate(1px,1px) rotate(.3deg);box-shadow:1px 1px 0 var(--ink)}
    @media (max-width:560px){ .guest-chip{ font-size:.6rem; padding:5px 7px } }

    /* ---- Google sign-in ---- */
    .guest-chip.google{ background:#fff; color:#1a1a1a; gap:7px }
    .g-logo{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%;
      background:conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
      color:#fff; font-size:.62rem; font-weight:900 }

    /* ---- First-run Tutorial ---- */
    .tut-content{ text-align:center }
    .tut-body{ padding:22px 20px 10px }
    .tut-emoji{ font-size:3rem; line-height:1; margin-bottom:10px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) }
    .tut-title{ font-family:'Vazirmatn','Tahoma',sans-serif; font-weight:900; font-size:1.1rem; color:#0f0f0f; margin-bottom:8px }
    .tut-desc{ font-size:.88rem; line-height:1.8; color:#4b4b43; font-weight:600; min-height:76px }
    .tut-dots{ display:flex; gap:6px; justify-content:center; margin:14px 0 4px }
    .tut-dot{ width:9px; height:9px; border-radius:50%; background:rgba(0,0,0,.16); transition:.2s }
    .tut-dot.on{ background:#0f0f0f; transform:scale(1.25) }
    .tut-nav{ display:flex; gap:10px; justify-content:center; padding:6px 20px 20px }
    #tutModal .btn-ghost, #tutModal .btn-main{ min-width:110px; justify-content:center }

/* Start button while the first match's sprites finish decoding. The wait is
   capped at 1.5s and only ever happens once, but without feedback a tap that
   does nothing for a beat reads as a dead button. */
#btnStart.is-loading{ opacity:.72; pointer-events:none }
#btnStart.is-loading svg{ animation:btnStartSpin .7s linear infinite }
@keyframes btnStartSpin{ to{ transform:rotate(360deg) } }