/* ── MODALS ──────────────────────────────────────────── */
    .modal-ov {
      position: fixed; inset: 0; z-index: 300;
      background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center;
      animation: mFadeIn .12s steps(3) forwards;
    }
    @keyframes mFadeIn { from{opacity:0} to{opacity:1} }
    .modal-box {
      background: #07040f;
      border: 4px solid #3a1055;
      border-radius: 0;
      padding: 32px 36px;
      min-width: 320px; max-width: 460px; width: 90%;
      box-shadow: 7px 7px 0 #000, inset 0 0 0 1px rgba(180,80,255,.08);
      position: relative;
      animation: mSlideUp .14s steps(4) forwards;
      /* scanline overlay */
      background-image: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px
      );
    }
    @keyframes mSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

    /* ── SHARED PIXEL TITLE ──────────────────────────────── */
    .modal-title {
      font-family: 'Press Start 2P', monospace;
      font-size: clamp(11px, 1.8vw, 14px);
      letter-spacing: .08em; text-transform: uppercase;
      color: #ff4444;
      text-shadow: 3px 3px 0 #7a0000, 0 0 18px rgba(255,40,40,.5);
      margin-bottom: 28px; text-align: center;
      padding-bottom: 16px;
      border-bottom: 3px solid rgba(180,20,20,.45);
      position: relative;
    }
    .modal-title::after {
      content: '';
      position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
      width: 40px; height: 3px; background: rgba(255,60,60,.35);
    }

    /* ── CLOSE BUTTON ────────────────────────────────────── */
    .modal-x {
      position: absolute; top: 12px; right: 14px;
      font-family: 'Press Start 2P', monospace;
      font-size: 9px; letter-spacing: .05em;
      background: rgba(80,0,0,.55); border: 3px solid rgba(180,30,30,.7);
      color: #ff6666; padding: 5px 9px;
      box-shadow: 3px 3px 0 #000;
      cursor: pointer; transition: transform .07s, box-shadow .07s;
    }
    .modal-x:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 #000; color: #fff; }
    .modal-x:active { transform: translate(3px,3px); box-shadow: none; }

    /* ══════════════════════════════════════════════════════
       ⚙  SETTINGS MODAL
    ══════════════════════════════════════════════════════ */
    #settingsModal .modal-box {
      border-color: #1a1a5a;
      box-shadow: 7px 7px 0 #000, inset 0 0 0 1px rgba(80,80,255,.06);
    }
    #settingsModal .modal-title {
      color: #5588ff;
      text-shadow: 3px 3px 0 #000c40, 0 0 18px rgba(60,80,255,.5);
      border-bottom-color: rgba(40,50,180,.5);
    }
    #settingsModal .modal-title::after {
      background: rgba(80,100,255,.35);
    }

    .srow {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 14px;
      background: rgba(10,8,28,.8);
      border: 3px solid rgba(50,40,100,.7);
      box-shadow: 4px 4px 0 rgba(0,0,0,.8);
      padding: 11px 14px;
    }
    .srow:last-child { margin-bottom: 0; }

    .slabel {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px; color: #8899dd;
      letter-spacing: .06em; flex: 1;
      text-transform: uppercase;
    }

    /* Custom pixel slider */
    input[type=range].sslider {
      -webkit-appearance: none; appearance: none;
      width: 120px; height: 10px;
      background: #0a0618;
      border: 3px solid #33256a;
      box-shadow: inset 2px 2px 0 rgba(0,0,0,.7);
      cursor: pointer; outline: none; flex-shrink: 0;
    }
    input[type=range].sslider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 18px; height: 18px;
      background: #7755dd;
      border: 3px solid #ccaaff;
      box-shadow: 3px 3px 0 #000;
      cursor: pointer;
    }
    input[type=range].sslider::-moz-range-thumb {
      width: 18px; height: 18px;
      background: #7755dd; border: 3px solid #ccaaff;
      box-shadow: 3px 3px 0 #000; cursor: pointer; border-radius: 0;
    }
    input[type=range].sslider:focus { outline: none; }

    .sval {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px; color: #aabbff;
      min-width: 42px; text-align: right;
      text-shadow: 1px 1px 0 #000;
    }

    /* Fullscreen button in settings */
    #settingsModal .mbtn {
      font-family: 'Press Start 2P', monospace !important;
      font-size: 8px !important;
      border-radius: 0 !important;
      border: 3px solid #1a3388 !important;
      box-shadow: 4px 4px 0 #000 !important;
    }
    #settingsModal .mbtn:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000 !important; }
    #settingsModal .mbtn:active { transform: translate(4px,4px); box-shadow: none !important; }

    /* ══════════════════════════════════════════════════════
       🏆  LEADERBOARD MODAL
    ══════════════════════════════════════════════════════ */
    #lbModal .modal-box {
      max-width: 540px;
      border-color: #3a2800;
      box-shadow: 7px 7px 0 #000, inset 0 0 0 1px rgba(255,180,0,.05);
    }
    #lbModal .modal-title {
      color: #ffcc33;
      text-shadow: 3px 3px 0 #4a3000, 0 0 20px rgba(255,180,0,.55);
      border-bottom-color: rgba(180,120,0,.4);
    }
    #lbModal .modal-title::after {
      background: rgba(255,160,0,.35);
    }

    .lb-tbl { width: 100%; border-collapse: collapse; }

    .lb-tbl thead tr {
      background: rgba(255,180,0,.06);
      border-bottom: 3px solid rgba(180,120,0,.4);
    }
    .lb-tbl th {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px; color: rgba(255,190,60,.65);
      letter-spacing: .14em; text-transform: uppercase;
      padding: 9px 10px; text-align: left;
    }
    .lb-tbl td {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px; padding: 11px 10px; color: #666;
      border-bottom: 2px solid rgba(255,255,255,.04);
    }

    /* Rank medal rows */
    .lb-tbl tr.gold   { background: rgba(255,215,0,.07); }
    .lb-tbl tr.silver { background: rgba(192,192,192,.06); }
    .lb-tbl tr.bronze { background: rgba(205,127,50,.06); }
    .lb-tbl tr.gold   td { color: #ffd700; text-shadow: 2px 2px 0 #5a4000; }
    .lb-tbl tr.silver td { color: #c0c0c0; text-shadow: 2px 2px 0 #3a3a3a; }
    .lb-tbl tr.bronze td { color: #cd7f32; text-shadow: 2px 2px 0 #4a2800; }

    /* Rank number column decoration */
    .lb-tbl td:first-child, .lb-tbl th:first-child { padding-left: 14px; }

    .lb-tbl tr.gold   td:first-child::before { content: '★ '; color: #ffd700; }
    .lb-tbl tr.silver td:first-child::before { content: '★ '; color: #c0c0c0; }
    .lb-tbl tr.bronze td:first-child::before { content: '★ '; color: #cd7f32; }

    /* Hover highlight */
    .lb-tbl tbody tr:not(.gold):not(.silver):not(.bronze):hover td {
      color: #aaa; background: rgba(255,255,255,.03);
    }

    .lb-empty {
      font-family: 'Press Start 2P', monospace;
      text-align: center; font-size: 8px;
      color: rgba(255,255,255,.22); padding: 28px 10px;
      letter-spacing: .1em;
      border: 3px dashed rgba(255,255,255,.08);
      margin-top: 8px;
    }
    /* login */
    .linput {
      width: 100%; padding: 12px 15px; background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff;
      font-size: 16px; outline: none; margin-bottom: 14px; transition: border-color .2s;
      font-family: 'Segoe UI', sans-serif;
    }
    .linput:focus { border-color: rgba(180,120,255,.7); }
    .linput::placeholder { color: rgba(255,255,255,.22); }
    .lsave {
      width: 100%; padding: 12px; background: rgba(130,55,220,.33);
      border: 1px solid rgba(180,100,255,.45); border-radius: 8px;
      color: #ddbbff; font-size: 14px; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; cursor: pointer; transition: all .18s; font-family: 'Segoe UI', sans-serif;
    }
    .lsave:hover { background: rgba(150,75,240,.48); color: #fff; }
    .luser { text-align: center; color: rgba(255,255,255,.38); font-size: 13px; margin-top: 12px; }
    .auth-tab { flex:1; padding:11px; background:rgba(255,255,255,.04); border:none; color:rgba(255,255,255,.4); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:all .15s; font-family:'Segoe UI',sans-serif; }
    .auth-tab:hover { color:rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
    .auth-tab.active { background:rgba(130,55,220,.35); color:#cc99ff; }
    /* multiplayer */
    .mp-code { font-size:34px; font-weight:900; letter-spacing:.22em; color:#00ffaa; text-align:center; margin:14px 0; text-shadow:0 0 20px #00cc88; }
    .mp-players { width:100%; margin:14px 0; }
    .mp-player-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; margin-bottom:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
    .mp-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
    .mp-pname { color:#ddd; font-size:14px; flex:1; }
    .mp-host-badge { font-size:10px; color:#ffcc44; letter-spacing:.08em; background:rgba(255,200,0,.12); border:1px solid rgba(255,200,0,.28); padding:2px 7px; border-radius:4px; }
    .mp-input-row { display:flex; gap:8px; margin-bottom:12px; }
    .mp-input-row .linput { margin-bottom:0; flex:1; }
    .mp-input-row .lsave { width:auto; padding:12px 18px; flex-shrink:0; }
    .mp-msg { text-align:center; color:#ff8888; font-size:13px; min-height:18px; margin-bottom:8px; }

    /* Map selector */
    .map-row {
      display:flex; align-items:center; gap:8px; padding:9px 10px;
      border-radius:7px; border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04); margin-bottom:7px;
    }
    .map-row-name { flex:1; color:#ddd; font-size:14px; font-weight:600; }
    .map-row-size { color:rgba(255,255,255,.3); font-size:11px; }
    .map-row button {
      padding:4px 10px; border-radius:5px; border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.06); color:#ccc; cursor:pointer;
      font-size:11px; font-family:inherit; transition:all .13s;
    }
    .map-row button:hover { border-color:rgba(255,255,255,.4); color:#fff; }
    .map-row button.play-btn { background:rgba(180,18,18,.28); border-color:rgba(255,55,55,.5); color:#ff9090; }
    .map-row button.play-btn:hover { background:rgba(220,28,28,.42); color:#fff; }