/* Start overlay, workshop, leaderboard, modes, and progression. */
    .arcade-overlay {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 1300;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: radial-gradient(circle at 50% 15%, rgba(0,255,157,0.12), rgba(0,0,0,0.88) 55%, rgba(0,0,0,0.94));
      text-align: center;
      pointer-events: auto;
    }
    .arcade-overlay.show { display: flex; }

    .arcade-overlay .panel {
      width: min(380px, 92%);
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 16px;
      border: 1px solid var(--panel-border);
      background: rgba(0,0,0,0.78);
      box-shadow: 0 0 30px rgba(0,0,0,0.9);
      padding: 16px 14px;
    }
    .arcade-overlay .title {
      margin: 0 0 10px;
      font-size: 0.82rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }
    .name-entry {
      margin-bottom: 12px;
    }
    .name-entry-label {
      display: block;
      font-size: 0.56rem;
      letter-spacing: 0.14em;
      color: var(--neon);
      text-transform: uppercase;
      margin-bottom: 5px;
    }
    .name-entry-input {
      width: 100%;
      max-width: 220px;
      background: rgba(0,0,0,0.5);
      border: 1px solid rgba(0,255,157,0.4);
      border-radius: 6px;
      color: #eee;
      padding: 8px 10px;
      font-family: inherit;
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-align: center;
      text-transform: uppercase;
      box-sizing: border-box;
    }
    .name-entry-input:focus {
      outline: none;
      border-color: var(--neon);
    }

    .shop-overlay {
      position: fixed;
      inset: 0;
      z-index: 1300;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: radial-gradient(circle at 50% 15%, rgba(0,255,157,0.14), rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.96));
    }
    .shop-overlay.show { display: flex; }
    .shop-panel {
      width: min(380px, 92%);
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 16px;
      border: 1px solid var(--panel-border, rgba(0,255,157,0.4));
      background: rgba(0,0,0,0.82);
      box-shadow: 0 0 30px rgba(0,0,0,0.9);
      padding: 20px 16px;
      text-align: center;
    }
    .shop-title {
      font-size: 0.9rem;
      letter-spacing: 0.24em;
      color: var(--neon, #00ff9d);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .shop-sub {
      font-size: 0.62rem;
      color: #999;
      letter-spacing: 0.06em;
      margin-bottom: 12px;
    }
    .shop-balance {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      margin-bottom: 14px;
      text-transform: uppercase;
    }
    .shop-balance strong { color: var(--neon, #00ff9d); }
    .shop-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .shop-item-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      background: rgba(0,255,157,0.05);
      border: 1px solid rgba(0,255,157,0.3);
      border-radius: 8px;
      color: #eee;
      padding: 10px 12px;
      font-family: inherit;
      font-size: 0.66rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      cursor: pointer;
      text-align: left;
    }
    .shop-item-btn .shop-item-cost {
      color: var(--neon, #00ff9d);
      font-weight: 700;
      flex-shrink: 0;
      margin-left: 10px;
    }
    .shop-item-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .shop-item-btn:not(:disabled):hover {
      border-color: var(--neon, #00ff9d);
      background: rgba(0,255,157,0.1);
    }
    .shop-continue {
      width: 100%;
    }

    .arcade-overlay .stats {
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1.55;
      margin-bottom: 12px;
      opacity: 0.9;
    }
    .arcade-overlay .stats strong { color: var(--neon); }
    .arcade-overlay .row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 10px;
    }

    .leaderboard, .caught-products {
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      border: 1px solid rgba(0,255,157,0.25);
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 10px;
      background: rgba(0,255,157,0.03);
      text-align: left;
    }
    .leaderboard-title, .caught-products-title {
      color: var(--neon);
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.6rem;
      margin-bottom: 6px;
      text-align: center;
    }
    .leaderboard-row {
      display: flex;
      justify-content: space-between;
      padding: 3px 0;
      opacity: 0.9;
    }
    .leaderboard-row .rank { color: var(--neon); font-weight: 700; margin-right: 6px; }
    .caught-products-list a {
      display: flex;
      justify-content: space-between;
      color: #eee;
      text-decoration: none;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .caught-products-list a:last-child { border-bottom: none; }
    .caught-products-list a:hover { color: var(--neon); }
    .caught-products-list .count { color: var(--neon); font-weight: 700; }

    .mode-selector {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .mode-btn {
      flex: 1;
      padding: 9px;
      border-radius: 8px;
      border: 1px solid rgba(0,255,157,0.3);
      background: rgba(0,255,157,0.04);
      color: #999;
      font-family: inherit;
      font-size: 0.66rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .mode-btn.active {
      border-color: var(--neon);
      background: rgba(0,255,157,0.14);
      color: #fff;
      font-weight: 700;
    }
    .mode-desc {
      font-size: 0.6rem;
      color: #999;
      text-align: center;
      margin-bottom: 14px;
    }
    .runway-hud {
      display: none;
      text-align: center;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      color: var(--neon, #00ff9d);
      margin: 6px 0;
      background: rgba(0,0,0,0.4);
      border-radius: 6px;
      padding: 6px 10px;
    }
    .runway-hud.show { display: block; }

    .progression {
      font-size: 0.62rem;
      letter-spacing: 0.08em;
      border: 1px solid rgba(0,255,157,0.25);
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 10px;
      background: rgba(0,255,157,0.03);
      text-align: left;
    }
    .progression-title {
      color: var(--neon, #00ff9d);
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.6rem;
      margin-bottom: 8px;
      text-align: center;
    }
    .progression-level {
      text-align: center;
      font-size: 0.74rem;
      color: #fff;
      letter-spacing: 0.1em;
      margin-bottom: 6px;
    }
    .progression-bar-track {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      overflow: hidden;
      margin-bottom: 4px;
    }
    .progression-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #00ff9d, #00cfff);
      transition: width 0.4s ease;
    }
    .progression-xp-label {
      text-align: center;
      font-size: 0.56rem;
      color: #999;
      margin-bottom: 8px;
    }
    .progression-achievements {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
    }
    .progression-achievement-badge {
      background: rgba(0,255,157,0.1);
      border: 1px solid rgba(0,255,157,0.35);
      border-radius: 999px;
      padding: 3px 9px;
      font-size: 0.56rem;
      color: var(--neon, #00ff9d);
      text-transform: uppercase;
    }
    .progression-login-note {
      text-align: center;
      font-size: 0.58rem;
      color: #999;
      margin-top: 8px;
    }
    .progression-login-note a {
      color: var(--neon, #00ff9d);
      text-decoration: none;
    }


/* Arcade v2 Phase 2: cosmetic locker. */
.locker-card { width: min(560px, 96vw); }
.locker-copy { margin: 0 0 12px; color: #b8c2cc; font-size: 0.62rem; line-height: 1.5; text-align: center; }
.locker-summary { margin-bottom: 12px; text-align: center; color: var(--neon); font-size: 0.62rem; letter-spacing: 0.12em; }
.locker-section { margin-bottom: 14px; }
.locker-section h4 { margin: 0 0 8px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }
.locker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.locker-item { width: 100%; min-height: 66px; display: flex; gap: 10px; align-items: center; border-radius: 10px; border: 1px solid rgba(0,255,157,0.22); background: rgba(255,255,255,0.035); color: #fff; padding: 8px; cursor: pointer; text-align: left; font-family: inherit; }
.locker-item.selected { border-color: var(--neon); box-shadow: 0 0 18px rgba(0,255,157,0.18); background: rgba(0,255,157,0.08); }
.locker-item.locked { opacity: 0.42; cursor: not-allowed; filter: grayscale(0.55); }
.locker-swatch { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); }
.locker-item-label { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.locker-item-label strong { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }
.locker-item-label small { color: #9ba6b2; font-size: 0.5rem; line-height: 1.35; }
@media (max-width: 520px) { .locker-grid { grid-template-columns: 1fr; } }

/* Arcade v2 Phase 3 missions */
.missions-card { width:min(460px,96vw); }
.missions-copy { font-size:.62rem; line-height:1.5; color:#b7c8c2; text-align:center; }
.missions-summary { margin:8px 0 12px; text-align:center; color:var(--neon); font-size:.6rem; letter-spacing:.08em; }
.missions-list { display:grid; gap:9px; margin-bottom:14px; }
.mission-item { border:1px solid rgba(0,255,157,.22); border-radius:10px; padding:10px; background:rgba(0,255,157,.035); }
.mission-item.completed { border-color:rgba(255,222,116,.42); background:rgba(255,222,116,.055); }
.mission-head { display:flex; justify-content:space-between; gap:10px; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
.mission-head span { color:#ffe28b; white-space:nowrap; }
.mission-description { margin:6px 0; font-size:.58rem; color:#c8d4d0; }
.mission-progress { height:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); }
.mission-progress span { display:block; height:100%; background:linear-gradient(90deg,var(--neon),var(--cyan)); }
.mission-meta { margin-top:5px; text-align:right; font-size:.54rem; color:#91a49d; }


/* Phase 4.1 modal stacking fix: secondary menus must sit above the main arcade overlay. */
#locker-panel,
#character-panel,
#missions-panel,
#how-to-play,
#settings-panel,
#stats-panel {
  z-index: 1600;
}

#rewardModal {
  z-index: 1700;
}