* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: linear-gradient(180deg, #0055aa 0%, #003d7a 40%, #001f4d 100%); overflow: hidden; font-family: Arial, sans-serif; }
    canvas { display: block; }
    #ui { position: fixed; inset: 0; pointer-events: none; }

    /* ── START BACKDROP ── */
    #start-backdrop {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, #0077cc 0%, #0055aa 40%, #002f7a 100%);
      pointer-events: none;
    }

    /* ── START SCREEN ── */
    #start-screen {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      background: linear-gradient(160deg, #003d7a 0%, #00245c 50%, #001535 100%);
      border: 3px solid #44aaff; border-radius: 22px;
      padding: 36px 48px; color: white; text-align: center; min-width: 500px;
      max-height: 92vh; overflow-y: auto;
      pointer-events: all;
      box-shadow: 0 0 80px rgba(0,120,255,0.35), 0 0 20px rgba(0,80,200,0.5), inset 0 1px 0 rgba(100,180,255,0.15);
    }
    #start-screen h1 {
      color: #ffffff; font-size: 46px; margin-bottom: 4px;
      text-shadow: 0 0 30px rgba(0,200,255,0.8), 0 2px 8px rgba(0,0,0,0.6);
    }
    #start-screen .sub {
      color: #88ddff; font-size: 15px; margin-bottom: 22px; letter-spacing: 0.5px;
    }
    #start-screen .ctrl {
      font-size: 13px; color: #aaccee; line-height: 2.2; margin-bottom: 22px;
      text-align: left; background: rgba(0,30,80,0.5); border-radius: 12px;
      padding: 14px 18px; border: 1px solid rgba(68,170,255,0.2);
    }
    #start-screen .ctrl b { color: #66ddff; }
    #start-screen button {
      background: linear-gradient(135deg, #0088ee, #0055bb);
      color: #ffffff; border: 2px solid #44aaff;
      padding: 14px 44px; font-size: 22px; font-weight: bold;
      border-radius: 12px; cursor: pointer;
      box-shadow: 0 4px 20px rgba(0,120,255,0.5);
      letter-spacing: 1px; transition: all 0.15s;
    }
    #start-screen button:hover {
      background: linear-gradient(135deg, #22aaff, #0077dd);
      box-shadow: 0 6px 30px rgba(0,160,255,0.7);
      transform: translateY(-2px);
    }
    /* ── GAMEMODE OVERLAY ── */
    #mode-overlay {
      display: none; position: absolute; inset: 0;
      background: linear-gradient(160deg, #001030 0%, #000820 100%);
      align-items: center; justify-content: center;
      pointer-events: all; flex-direction: column; gap: 28px;
    }
    #mode-overlay h2 { font-size: 28px; color: #fff; margin: 0; text-shadow: 0 0 20px rgba(100,200,255,0.6); }
    #mode-overlay p  { font-size: 13px; color: #6699bb; margin: -16px 0 0; letter-spacing: 1px; }
    #mode-cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
    .mode-card {
      width: 150px; background: rgba(255,255,255,0.04);
      border: 2px solid rgba(255,255,255,0.12); border-radius: 18px;
      padding: 22px 16px; text-align: center; cursor: pointer;
      transition: all 0.18s; user-select: none;
    }
    .mode-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.09); }
    .mode-card.selected { border-width: 3px; box-shadow: 0 0 30px var(--mc); background: rgba(255,255,255,0.08); }
    .mode-card-icon  { font-size: 44px; margin-bottom: 10px; }
    .mode-card-name  { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 8px; }
    .mode-card-desc  { font-size: 11px; color: #99aabb; line-height: 1.6; }
    #mode-back-btn {
      padding: 10px 30px; border-radius: 10px; background: rgba(255,255,255,0.06);
      border: 2px solid rgba(255,255,255,0.15); color: #aabbcc; font-size: 14px;
      cursor: pointer; font-family: inherit;
    }
    #mode-back-btn:hover { background: rgba(255,255,255,0.12); }
    #mode-start-btn {
      padding: 14px 44px; border-radius: 12px; font-size: 20px; font-weight: bold;
      cursor: pointer; font-family: inherit; letter-spacing: 1px;
      border: 2px solid; transition: all 0.15s;
    }
    #mode-start-btn:hover { transform: translateY(-2px); }

    /* ── STARTER BONUS OVERLAY ── */
    #bonus-overlay {
      display: none; position: absolute; inset: 0;
      background: linear-gradient(160deg, #001030 0%, #000820 100%);
      align-items: center; justify-content: center;
      pointer-events: all; flex-direction: column; gap: 22px;
      overflow-y: auto; padding: 30px 20px; box-sizing: border-box;
    }
    #bonus-overlay h2 { font-size: 28px; color: #fff; margin: 0; text-shadow: 0 0 22px rgba(255,210,80,0.7); }
    #bonus-overlay > p { font-size: 13px; color: #aa8844; margin: -16px 0 0; letter-spacing: 1px; }
    #bonus-cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; max-width: 920px; }
    .bonus-card {
      width: 210px; background: rgba(255,190,60,0.04);
      border: 2px solid rgba(255,190,60,0.2); border-radius: 18px;
      padding: 22px 16px; text-align: center; cursor: pointer;
      transition: all 0.18s; user-select: none;
    }
    .bonus-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255,210,60,0.65);
      background: rgba(255,200,60,0.10);
      box-shadow: 0 6px 28px rgba(255,180,40,0.28);
    }
    .bonus-icon   { font-size: 50px; margin-bottom: 10px; }
    .bonus-title  { font-size: 16px; font-weight: bold; color: #ffe066; margin-bottom: 7px; }
    .bonus-desc   { font-size: 13px; color: #ddeeff; line-height: 1.5; margin-bottom: 8px; }
    .bonus-detail { font-size: 11px; color: #778899; line-height: 1.5; margin-bottom: 14px; min-height: 32px; }
    .bonus-btn {
      width: 100%; padding: 9px 0; border-radius: 9px;
      background: rgba(255,200,60,0.14); border: 2px solid rgba(255,200,60,0.4);
      color: #ffe066; font-size: 13px; font-weight: bold;
      cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .bonus-btn:hover { background: rgba(255,200,60,0.32); border-color: #ffe066; }
    #bonus-skip-btn {
      padding: 9px 28px; border-radius: 10px;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
      color: #556677; font-size: 13px; cursor: pointer; font-family: inherit;
      transition: all 0.15s;
    }
    #bonus-skip-btn:hover { background: rgba(255,255,255,0.09); color: #99aabb; }

    /* ── BACK BUTTON (top-right, always visible) ── */
    #mob-back {
      position: absolute; top: 14px; right: 14px; z-index: 9999;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(0,10,30,0.72); border: 2px solid rgba(100,160,255,0.45);
      color: #88ccff; font-size: 22px; font-weight: bold;
      cursor: pointer; pointer-events: all; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }
    #mob-back:hover { background: rgba(0,40,100,0.85); border-color: #44aaff; color: #fff; }

    /* ── MOBILE CHAT BUTTON (always visible on touch, not tied to mobile controls) ── */
    #mob-chat {
      position: absolute; top: 14px; right: 68px; z-index: 9999;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(0,10,30,0.72); border: 2px solid rgba(255,200,0,0.55);
      font-size: 22px; cursor: pointer; pointer-events: all;
      display: none; align-items: center; justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      touch-action: manipulation;
    }
    @media (pointer: coarse) { #mob-chat { display: flex; } }
    #mob-chat:active { background: rgba(60,40,0,0.9); border-color: gold; }

    /* ── SAVE FILE SLOTS ── */
    #continue-btn {
      width:100%; padding:13px 18px; margin:14px 0 8px;
      background: linear-gradient(135deg, #0088ee, #0055bb);
      border: 2px solid #44aaff; border-radius:12px;
      color:#fff; font-size:18px; font-weight:bold;
      cursor:pointer; font-family:inherit; letter-spacing:1px;
      transition:all 0.15s; box-shadow: 0 4px 20px rgba(0,120,255,0.4);
    }
    #continue-btn:hover { background:linear-gradient(135deg,#22aaff,#0077dd); transform:translateY(-2px); box-shadow:0 6px 28px rgba(0,160,255,0.55); }
    #save-toggle-btn {
      width:100%; padding:11px 18px; margin:14px 0 0;
      background:rgba(0,30,80,0.55); border:2px solid rgba(68,170,255,0.3);
      border-radius:12px; color:#88ccff; font-size:15px; font-weight:bold;
      cursor:pointer; font-family:inherit; letter-spacing:0.5px;
      transition:all 0.15s; text-align:left;
    }
    #save-toggle-btn:hover { background:rgba(0,55,130,0.65); border-color:rgba(68,170,255,0.6); color:#fff; }

    /* ── Settings button ── */
    #settings-toggle-btn {
      width:100%; padding:11px 18px; margin:8px 0 0;
      background:rgba(20,20,40,0.55); border:2px solid rgba(160,160,255,0.25);
      border-radius:12px; color:#aaaadd; font-size:15px; font-weight:bold;
      cursor:pointer; font-family:inherit; letter-spacing:0.5px;
      transition:all 0.15s; text-align:left;
    }
    #settings-toggle-btn:hover { background:rgba(40,40,90,0.7); border-color:rgba(160,160,255,0.55); color:#fff; }

    /* ── Settings panel ── */
    #settings-panel {
      margin-top:10px; padding:14px 16px;
      background:rgba(10,10,30,0.7); border:1.5px solid rgba(150,150,255,0.2);
      border-radius:14px;
    }
    .settings-section-title {
      font-size:11px; font-weight:bold; color:#7788bb;
      letter-spacing:2px; text-transform:uppercase; margin-bottom:10px;
    }
    .sfx-row {
      display:flex; align-items:center; gap:12px;
      background:rgba(255,255,255,0.05); border-radius:10px;
      padding:10px 14px; margin-bottom:4px;
    }
    #sfx-vol-label { font-size:13px; color:#aaccee; min-width:72px; font-weight:bold; }
    .settings-theme-cards { display:flex; gap:10px; }
    .stc {
      flex:1; padding:12px 10px; border-radius:12px; cursor:pointer;
      border:2px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.05);
      text-align:center; transition:all 0.18s;
    }
    .stc:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.25); }
    .stc-active {
      border-color:#44aaff; background:rgba(0,120,255,0.18);
      box-shadow:0 0 12px rgba(0,150,255,0.25);
    }
    .stc-icon { font-size:26px; margin-bottom:5px; }
    .stc-name { font-size:13px; font-weight:bold; color:#ddeeff; margin-bottom:3px; }
    .stc-desc { font-size:10px; color:#668899; line-height:1.4; }
    #save-slots { display:flex; flex-direction:column; gap:10px; margin:10px 0 4px; }
    .save-slot {
      background:rgba(0,30,80,0.55); border:2px solid rgba(68,170,255,0.25);
      border-radius:14px; padding:13px 16px; cursor:pointer;
      transition:all 0.15s; text-align:left; position:relative;
    }
    .save-slot:hover { background:rgba(0,55,130,0.65); border-color:rgba(68,170,255,0.55); transform:translateY(-1px); }
    .save-slot-empty { text-align:center; border-style:dashed; border-color:rgba(68,170,255,0.18); padding:18px 16px; }
    .save-slot-empty:hover { border-color:rgba(68,170,255,0.45); }
    .ss-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
    .ss-num { font-size:13px; color:#66aadd; font-weight:bold; letter-spacing:0.5px; }
    #start-screen .ss-delete { background:rgba(255,60,60,0.14); border:1px solid rgba(255,80,80,0.3); color:#ff8888; border-radius:7px; padding:3px 9px; font-size:12px; cursor:pointer; font-family:inherit; box-shadow:none; letter-spacing:0; transform:none; }
    #start-screen .ss-delete:hover { background:rgba(255,60,60,0.32); transform:none; box-shadow:none; }
    .ss-diff { font-size:12px; color:#88aacc; margin-bottom:2px; }
    .ss-level { font-size:15px; font-weight:bold; color:#eef6ff; }
    .ss-stats { font-size:12px; color:#7799bb; margin-top:3px; }
    .ss-time { font-size:11px; color:#445566; margin-top:3px; }
    .ss-custom-map-badge { font-size:11px; color:#ffcc55; background:rgba(200,140,0,0.12); border:1px solid rgba(200,140,0,0.3); border-radius:6px; padding:2px 8px; margin-top:4px; display:inline-block; }
    .ss-empty-icon { font-size:28px; margin:4px 0 6px; }
    .ss-empty-label { font-size:14px; color:#446688; margin-bottom:10px; }
    #start-screen .ss-btn { display:inline-block; padding:8px 22px; border-radius:8px; font-size:14px; font-weight:bold; cursor:pointer; font-family:inherit; letter-spacing:0.5px; border:2px solid transparent; margin-top:8px; transition:all 0.12s; box-shadow:none; }
    #start-screen .ss-btn-continue { background:linear-gradient(135deg,#0088ee,#0055bb); color:#fff; border-color:#44aaff; }
    #start-screen .ss-btn-continue:hover { background:linear-gradient(135deg,#22aaff,#0077dd); transform:translateY(-1px); }
    #start-screen .ss-btn-new { background:rgba(68,170,255,0.1); color:#66aadd; border-color:rgba(68,170,255,0.3); }
    #start-screen .ss-btn-new:hover { background:rgba(68,170,255,0.22); border-color:#44aaff; transform:translateY(-1px); }

    /* HUD mode badge */
    #mode-badge-hud {
      display: none; /* position controlled by #top-right container */
      padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold;
      border: 2px solid; pointer-events: none; letter-spacing: 1px;
    }
    /* Gamemode button on start screen */
    #gamemodeBtn {
      background: linear-gradient(135deg, #1a3a6a, #0d2248);
      color: #88ccff; border: 2px solid rgba(68,170,255,0.5);
      padding: 10px 28px; font-size: 15px; font-weight: bold;
      border-radius: 10px; cursor: pointer; margin-bottom: 14px;
      letter-spacing: 0.5px; transition: all 0.15s; display: block; width: 100%;
    }
    #gamemodeBtn:hover { background: linear-gradient(135deg, #224488, #112255); border-color: #44aaff; }
    #gamemode-preview {
      font-size: 13px; color: #66aadd; margin-bottom: 14px; text-align: center;
    }

    /* Mobile toggle row */
    #mobile-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(0,30,80,0.5); border: 1px solid rgba(68,170,255,0.2);
      border-radius: 12px; padding: 12px 18px; margin-bottom: 22px;
      cursor: pointer; user-select: none;
    }
    #mobile-toggle-row:hover { background: rgba(0,50,110,0.6); }
    #mobile-toggle-label { font-size: 14px; color: #aaccee; }
    #mobile-toggle-label span { color: #66ddff; font-weight: bold; }
    /* The pill switch — shared by both toggles */
    #mobile-pill, .mobile-pill-btn {
      width: 50px; height: 26px; border-radius: 13px; position: relative;
      background: #334; border: 2px solid rgba(68,170,255,0.3);
      transition: background 0.2s; flex-shrink: 0;
    }
    #mobile-pill::after, .mobile-pill-btn::after {
      content: ''; position: absolute; top: 3px; left: 3px;
      width: 16px; height: 16px; border-radius: 50%;
      background: #557; transition: transform 0.2s, background 0.2s;
    }
    #mobile-pill.on, .mobile-pill-btn.on { background: #0077ee; border-color: #44aaff; }
    #mobile-pill.on::after, .mobile-pill-btn.on::after { transform: translateX(24px); background: white; }

    /* ── BANK PROXIMITY HINT ── */
    #bank-hint {
      display: none; position: absolute; bottom: 120px; left: 50%;
      transform: translateX(-50%);
      background: rgba(0,5,20,0.82); border: 2px solid #ffd700;
      border-radius: 12px; padding: 10px 22px; color: #ffd700;
      font-size: 15px; font-weight: bold; letter-spacing: 1px;
      pointer-events: all; cursor: pointer; text-align: center;
      box-shadow: 0 0 20px rgba(255,210,0,0.2);
      animation: hintpulse 1.5s ease-in-out infinite;
    }
    @keyframes hintpulse {
      0%,100% { box-shadow: 0 0 20px rgba(255,210,0,0.2); }
      50%      { box-shadow: 0 0 35px rgba(255,210,0,0.5); }
    }

    /* ── CROSSHAIR ── */
    #crosshair {
      display: none; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%); color: rgba(255,255,255,0.8); font-size: 22px;
      text-shadow: 0 0 6px #000;
    }

    /* ── TOP LEFT: score + kills ── */
    #top-left {
      display: none; position: absolute; top: 14px; left: 14px;
      flex-direction: column; gap: 7px;
    }
    /* ── Combined right panel ── */
    #top-right {
      display: none; position: absolute; top: 14px; right: 14px;
      flex-direction: column; gap: 0; align-items: stretch;
      background: rgba(0,8,24,0.88); border: 2px solid rgba(0,200,255,0.35);
      border-radius: 12px; overflow: hidden; pointer-events: none;
      min-width: 134px;
    }
    /* mp-hud inside top-right: needs click events */
    #top-right #mp-hud {
      position: static; pointer-events: all;
      border-radius: 0; border: none; background: rgba(0,20,36,0.6);
      border-bottom: 1px solid rgba(0,200,255,0.15);
      backdrop-filter: none; box-shadow: none;
    }
    /* mode badge inside top-right: just a coloured text label — no pill bg */
    #top-right #mode-badge-hud {
      position: static; border-radius: 0 !important;
      border: none !important; background: transparent !important;
      border-bottom: 1px solid rgba(255,255,255,0.08) !important;
      padding: 5px 12px; text-align: center; font-size: 11px; letter-spacing: 1px;
    }
    /* event ticker inside top-right: becomes a section row */
    #top-right #event-ticker {
      position: static; border-radius: 0; border: none; background: none;
      border-bottom: 1px solid rgba(255,215,0,0.18);
      padding: 5px 10px; text-align: center; max-width: unset;
    }
    /* minimap inside top-right: no absolute positioning */
    #top-right #minimap-wrap {
      position: static; transform: none;
      padding: 6px 6px 4px 6px;
    }
    #top-right #minimap {
      border-radius: 8px; display: block; width: 122px; height: 122px;
    }
    .hbox {
      background: rgba(0,8,24,0.75); border: 2px solid rgba(0,200,255,0.35);
      border-radius: 10px; padding: 6px 14px; color: white; font-size: 14px;
    }
    /* ── Combined stats panel: one card instead of 4 separate bubbles ── */
    #stats-panel {
      background: rgba(0,8,24,0.88);
      border: 2px solid rgba(0,200,255,0.38);
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #stats-panel .hbox {
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,0.07) !important;
      padding: 7px 14px;
    }
    #stats-panel .hbox:last-child {
      border-bottom: none !important;
    }
    #stats-panel #level-box {
      background: rgba(30,10,0,0.45) !important;
      border-bottom: 1px solid rgba(255,200,0,0.18) !important;
    }
    #stats-panel #hp-box {
      background: rgba(30,0,0,0.25) !important;
    }
    #score-box { color: #00ffcc; font-weight: bold; font-size: 16px; }
    #kill-box  { color: #ffdd44; }
    #hp-box    { border-color: rgba(255,80,80,0.4); }

    /* ── QUEST HUD ── */
    #quest-hud {
      background: rgba(0,8,24,0.82); border: 2px solid rgba(68,170,255,0.3);
      border-radius: 10px; padding: 8px 13px; color: white; font-size: 13px;
      min-width: 200px; transition: border-color 0.3s, box-shadow 0.3s;
    }
    /* When these live inside the stats-panel card, strip standalone card styling */
    #stats-panel #quest-hud {
      background: none !important;
      border: none !important;
      border-radius: 0 !important;
      border-top: 1px solid rgba(68,170,255,0.18) !important;
      min-width: 0 !important;
      padding: 8px 14px !important;
    }
    #stats-panel #skin-tag {
      background: rgba(50,0,80,0.4) !important;
      border: none !important;
      border-radius: 0 !important;
      border-top: 1px solid rgba(153,51,255,0.2) !important;
      padding: 6px 14px !important;
      text-align: left !important;
    }
    #stats-panel #team-hud {
      background: rgba(0,15,40,0.4) !important;
      border: none !important;
      border-radius: 0 !important;
      border-top: 1px solid rgba(68,170,255,0.18) !important;
      box-shadow: none !important;
      margin-top: 0 !important;
      padding: 7px 14px !important;
      text-align: left !important;
    }
    #stats-panel #team-hud:hover {
      background: rgba(0,20,55,0.5) !important;
      box-shadow: none !important;
    }
    .qh-label { font-size: 12px; color: #88ccff; margin-bottom: 3px; }
    .qh-done  { color: #ffe066; font-weight: bold; font-size: 11px; margin-left: 4px; animation: hcPulse 1s infinite; }
    .qh-task  { font-size: 13px; font-weight: bold; color: #ffffff; margin-bottom: 5px; }
    .qh-bar-wrap {
      background: rgba(255,255,255,0.1); border-radius: 4px; height: 6px;
      margin-bottom: 4px; overflow: hidden;
    }
    .qh-bar {
      height: 100%; border-radius: 4px;
      background: linear-gradient(90deg, #44aaff, #00ffcc);
      transition: width 0.4s ease;
    }
    .qh-nums { font-size: 11px; color: #aaccee; }
    /* Wave Practice grid inside Arena Selector */
  .arena-wave-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center; padding: 4px 0 8px;
  }

  /* Multi-quest slots (LV12+) */
    .qh-slot { padding-top: 6px; }
    .qh-slot + .qh-slot {
      border-top: 1px solid rgba(68,170,255,0.15);
      margin-top: 6px;
    }
    .qh-slot-done .qh-task { color: #ffe066; }
    .qh-slot-done .qh-bar  { background: linear-gradient(90deg, #ffcc00, #ffee88); }

    /* ── Daily quests ───────────────────────────────────── */
    #daily-wrap { margin-top: 4px; }
    #daily-btn {
      width: 100%; text-align: left; cursor: pointer;
      background: rgba(10,15,35,0.82); border: 2px solid rgba(255,180,0,0.45);
      border-radius: 10px; padding: 7px 13px; color: #ffe066;
      font-size: 12px; font-family: inherit; transition: background 0.3s, border-color 0.3s;
    }
    #daily-btn:hover { background: rgba(30,25,0,0.88); }
    #daily-panel {
      background: rgba(0,8,24,0.9); border: 2px solid rgba(255,180,0,0.3);
      border-top: none; border-radius: 0 0 10px 10px;
      padding: 8px; display: flex; flex-direction: column; gap: 6px;
    }
    .dq-card {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px; padding: 8px 10px;
    }
    .dq-card.dq-ready  { border-color: #ffe066; box-shadow: 0 0 8px rgba(255,220,0,0.3); animation: hcPulse 1.5s infinite; }
    .dq-card.dq-done   { opacity: 0.55; }
    .dq-name  { font-size: 12px; font-weight: bold; color: #fff; margin-bottom: 5px; }
    .dq-barbg {
      background: rgba(255,255,255,0.1); border-radius: 4px; height: 5px;
      margin-bottom: 5px; overflow: hidden;
    }
    .dq-barfill {
      height: 100%; border-radius: 4px;
      background: linear-gradient(90deg, #ffaa00, #ffe066);
      transition: width 0.4s ease;
    }
    .dq-foot   { display: flex; justify-content: space-between; align-items: center; }
    .dq-prog   { font-size: 11px; color: #aaccee; }
    .dq-rwrd   { font-size: 11px; color: #ffe066; }
    .dq-rwrd-got { color: #44ff88; }
    .dq-collect {
      background: linear-gradient(135deg,#ffe066,#ffaa00); border: none;
      border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: bold;
      color: #1a0800; cursor: pointer; transition: transform 0.1s;
    }
    .dq-collect:hover { transform: scale(1.06); }
    #level-box {
      display: flex; align-items: center; gap: 8px;
    }
    #level-badge {
      font-size: 18px; font-weight: bold;
      background: linear-gradient(135deg, #ffcc00, #ff8800);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    #level-name { color: #ffeeaa; font-size: 12px; }
    #level-xp-bar-wrap { flex: 1; min-width: 80px; }
    #level-xp-bar { width: 100%; height: 6px; background: #222; border-radius: 3px; overflow: hidden; margin-top: 3px; }
    #level-xp-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,#ffcc00,#ff8800); transition: width .3s; }
    .bar { width: 80px; height: 10px; background: #222; border-radius: 5px; overflow: hidden; margin-top: 4px; transition: width 0.4s ease; }
    .bar-fill { height: 100%; border-radius: 5px; transition: width .2s; }
    #php-fill { background: linear-gradient(90deg,#ff4444,#ff8888); }

    /* ── TOP CENTER: boss bars (stack up to 4) ── */
    #boss-bars-container {
      display: none; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      flex-direction: column; gap: 5px; align-items: center;
    }
    .boss-bar-item {
      background: rgba(0,8,24,0.88); border: 2px solid #ff3333; border-radius: 10px;
      padding: 7px 18px; color: #ff6666; font-size: 13px; text-align: center; min-width: 230px;
    }
    .boss-bar-track { width: 200px; height: 13px; background: #333; border-radius: 7px; overflow: hidden; margin-top: 5px; }
    .boss-bar-fill  { height: 100%; background: linear-gradient(90deg,#ff2222,#ff8800); border-radius: 7px; transition: width .15s; }

    /* ── Bob HP bar inside stats-panel (octo mode) ── */
    #stats-panel #bob-hp-bar {
      background: rgba(0,10,40,0.45) !important;
      border: none !important;
      border-radius: 0 !important;
      border-top: 1px solid rgba(68,136,255,0.22) !important;
      padding: 7px 14px !important;
      color: #88bbff; font-size: 12px;
    }
    #bob-hp-bar .bob-bar-track { height: 10px; background: #1a2035; border-radius: 5px; overflow: hidden; margin-top: 5px; }
    #bob-hp-bar .bob-bar-fill  { height: 100%; border-radius: 5px; transition: width .2s; }

    /* ── BOTTOM CENTER: weapons ── */
    #weapons {
      display: none; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
      flex-direction: column; align-items: center; gap: 6px;
      pointer-events: none; /* individual slots set their own pointer-events */
    }
    .wslot { cursor: pointer; touch-action: manipulation; }
    #weapon-hint { font-size: 11px; color: rgba(255,255,255,0.45); }
    #wslots { display: flex; gap: 8px; }
    .wslot {
      background: rgba(0,8,24,0.75); border: 2px solid rgba(255,255,255,0.18);
      border-radius: 8px; padding: 7px 14px; color: #666; font-size: 13px; text-align: center;
      min-width: 80px;
      position: relative; overflow: hidden;  /* needed for the CD sweep */
      --cd: 0;  /* 0 = ready, 1 = just attacked — set by JS */
    }
    .wslot.unlocked  { color: #aaa; border-color: rgba(255,255,255,0.3); }
    .wslot.active    { color: white; border-color: white; background: rgba(255,255,255,0.12); }
    .wslot.cooldown  { color: #444; }
    /* Clock-sweep cooldown overlay on the active slot */
    .wslot.active::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: conic-gradient(
        from -90deg,
        rgba(0, 0, 0, 0.58) calc(var(--cd) * 360deg),
        transparent calc(var(--cd) * 360deg)
      );
    }

    /* ── SPEECH BUBBLE ── */
    #speech-bubble {
      display: none; position: absolute; pointer-events: none;
      background: rgba(255,255,255,0.94); border: 2px solid #333;
      border-radius: 14px; padding: 10px 16px; max-width: 260px;
      font-size: 14px; color: #222; line-height: 1.5;
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    }
    #speech-bubble::after {
      content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
      border: 6px solid transparent; border-top-color: #333; z-index: 0;
    }
    #speech-bubble::before {
      content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
      border: 5px solid transparent; border-top-color: rgba(255,255,255,0.94); z-index: 1;
    }
    #fish-name { font-weight: bold; color: #e06000; font-size: 12px; margin-bottom: 3px; }

    /* ── OVERLAY / RESPAWN ── */
    #overlay {
      display: none; position: fixed; top: 38%; left: 50%;
      transform: translate(-50%,-50%);
      color: white; font-size: 22px; text-align: center; line-height: 1.6;
      text-shadow: 0 2px 10px #000, 0 0 28px rgba(0,0,0,0.95);
      pointer-events: none; max-width: 90vw; z-index: 1300;
    }
    #respawn-msg {
      display: none; position: absolute; top: 56%; left: 50%;
      transform: translate(-50%,-50%); color: white; font-size: 26px;
      text-align: center; text-shadow: 0 0 12px #000;
    }

    /* ── EVENT TICKER (top right) ── */
    #event-ticker {
      display: none; /* position controlled by #top-right container */
      background: rgba(0,8,24,0.8); border: 2px solid gold;
      border-radius: 10px; padding: 7px 14px; color: gold; font-size: 13px;
      text-align: right; max-width: 200px;
    }

    /* ── HOUSE UI ── */
    #house-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,8,24,0.88);
      align-items: center; justify-content: center;
      pointer-events: all;
    }
    #house-panel {
      background: linear-gradient(160deg, #0a2040 0%, #061428 100%);
      border: 2px solid #3399cc;
      border-radius: 20px; padding: 36px 48px;
      color: white; text-align: center;
      min-width: 380px; max-width: 440px;
      box-shadow: 0 0 40px rgba(0,150,255,0.15);
    }
    #house-icon { font-size: 52px; margin-bottom: 8px; line-height: 1; }
    #house-name { color: #88ddff; font-size: 26px; font-weight: bold; margin-bottom: 6px; }
    #house-subtitle { color: #44dd88; font-size: 13px; margin-bottom: 22px; letter-spacing: 1px; }
    .house-divider { border: none; border-top: 1px solid rgba(68,170,220,0.25); margin: 18px 0; }
    .house-row {
      display: flex; align-items: center; gap: 10px;
      background: rgba(0,80,140,0.25); border-radius: 10px;
      padding: 10px 14px; margin-bottom: 10px; text-align: left;
    }
    .house-row-icon { font-size: 20px; flex-shrink: 0; }
    .house-row-text { font-size: 13px; color: #aaccee; line-height: 1.5; }
    .house-row-text b { color: #ddeeff; }
    #house-exit-btn {
      width: 100%; margin-top: 20px;
      background: #2277aa; color: #e8f8ff; border: 2px solid #44aadd;
      padding: 12px 0; font-size: 16px; font-weight: bold;
      border-radius: 10px; cursor: pointer; letter-spacing: 0.5px;
      transition: background 0.15s;
    }
    #house-exit-btn:hover { background: #3399cc; }

    /* ── PLAYER HOUSE BUILDER ── */
    #house-builder-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,8,24,0.88);
      align-items: center; justify-content: center;
      pointer-events: all; z-index: 300;
    }
    #house-builder-panel {
      background: linear-gradient(160deg, #152a0a 0%, #0a1806 100%);
      border: 2px solid #66aa44;
      border-radius: 20px; padding: 28px 36px;
      color: white; text-align: center;
      min-width: 400px; max-width: 480px;
      box-shadow: 0 0 40px rgba(100,200,60,0.18);
    }
    .hb-header { font-size: 26px; font-weight: bold; color: #aaee66; margin-bottom: 5px; }
    .hb-stage  { font-size: 14px; color: #88cc55; margin-bottom: 12px; letter-spacing: 1px; }
    .hb-resources {
      background: rgba(40,90,15,0.35); border-radius: 12px;
      padding: 10px 16px; margin-bottom: 10px; text-align: left;
    }
    .hb-res-row { font-size: 14px; color: #cceebb; margin: 3px 0; }
    /* 3D builder canvas */
    #hb-canvas {
      display: block;
      width: 100%;
      border-radius: 10px;
      border: 2px solid #2a5a18;
      margin: 10px 0;
      cursor: crosshair;
      box-shadow: 0 0 18px rgba(60,180,40,0.15);
    }
    /* Layer selector buttons */
    .hb-layer-btns {
      display: flex; gap: 8px; margin-bottom: 10px;
    }
    .hb-layer-btn {
      flex: 1; background: #1a3a0a; color: #aaddaa;
      border: 2px solid #446633; padding: 9px 4px;
      font-size: 14px; border-radius: 9px; cursor: pointer;
      transition: background 0.12s, color 0.12s;
    }
    .hb-layer-btn:hover { background: #2a5a18; color: #ddffc4; }
    .hb-next {
      font-size: 13px; color: #99dd77; background: rgba(50,90,25,0.4);
      border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; line-height: 1.5;
    }
    #hb-enter-btn {
      display: none; width: 100%;
      background: #44aa22; color: white; border: 2px solid #66cc44;
      padding: 13px 0; font-size: 17px; font-weight: bold;
      border-radius: 10px; cursor: pointer; margin-bottom: 10px;
      transition: background 0.15s;
    }
    #hb-enter-btn:hover { background: #55bb33; }
    .hb-close-btn {
      width: 100%; background: transparent; color: #88bb66;
      border: 1px solid #446633; padding: 9px 0;
      font-size: 14px; border-radius: 8px; cursor: pointer;
      transition: color 0.15s;
    }
    .hb-close-btn:hover { color: #aaddaa; }

    /* ── SPAWN SHIELD INDICATOR ── */
    #spawn-shield {
      display: none; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none; z-index: 60; text-align: center;
    }
    #spawn-shield-icon {
      font-size: 64px; line-height: 1;
      filter: drop-shadow(0 0 18px gold);
      animation: shield-pulse 0.6s ease-in-out infinite alternate;
    }
    #spawn-shield-time {
      font-size: 22px; font-weight: bold; color: #ffdd44;
      text-shadow: 0 0 12px gold;
      margin-top: 4px;
    }
    @keyframes shield-pulse {
      from { transform: scale(0.9); opacity: 0.7; }
      to   { transform: scale(1.1); opacity: 1.0; }
    }

    /* ── BALISTICA ARMOR HUD ── */
    #balistica-hud {
      display: none;
      position: absolute; bottom: 72px; left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.75);
      border: 2px solid #ff6600;
      border-radius: 10px;
      padding: 5px 16px;
      color: #ff6600;
      font-weight: bold; font-size: 13px; letter-spacing: 1px;
      pointer-events: auto; z-index: 55;
      box-shadow: 0 0 14px rgba(255,100,0,0.4);
      gap: 6px; align-items: center;
    }
    @keyframes bal-ready-pulse {
      0%,100% { box-shadow: 0 0 10px rgba(255,100,0,0.4); }
      50%      { box-shadow: 0 0 22px rgba(255,100,0,0.9); }
    }

    /* ── FISHY LEVEL HUD (bottom-left) ── */
    #fishy-level-hud {
      position: fixed; bottom: 18px; left: 18px;
      background: rgba(0,15,30,0.82);
      border: 1px solid #005577;
      border-radius: 10px;
      padding: 6px 12px;
      color: #88ccff;
      font-size: 13px;
      font-weight: bold;
      z-index: 55;
      min-width: 170px;
      pointer-events: none;
    }

    #dummy-hud {
      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -180px);
      background: rgba(0, 10, 20, 0.88);
      border: 2px solid #00aaff;
      border-radius: 14px;
      padding: 14px 28px;
      color: #ffffff;
      font-size: 14px;
      font-family: inherit;
      z-index: 65;
      pointer-events: none;
      box-shadow: 0 0 24px rgba(0, 170, 255, 0.4);
      min-width: 130px;
    }

    /* Twemoji images: keep them inline and sized like text */
    img.emoji {
      height: 1em;
      width: 1em;
      margin: 0 0.05em 0 0.1em;
      vertical-align: -0.1em;
    }

    /* ── FOOD TRUCK SHOP ── */
    #food-truck-ui {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 420px; max-width: 94vw;
      background: linear-gradient(160deg, #1a0a00 0%, #2d1400 100%);
      border: 3px solid #ddaa00;
      border-radius: 18px;
      padding: 0 0 14px 0;
      display: flex; flex-direction: column; gap: 0;
      z-index: 80; color: #fff;
      pointer-events: all;
      box-shadow: 0 0 40px rgba(221,170,0,0.35), 0 8px 32px rgba(0,0,0,0.7);
      overflow: hidden;
    }
    .ft-header {
      display: flex; justify-content: space-between; align-items: flex-start;
      background: linear-gradient(90deg, #5a2500, #8b3a00);
      padding: 14px 16px 10px;
      border-bottom: 2px solid #ddaa00;
    }
    .ft-title  { font-size: 18px; font-weight: bold; color: #ffe066; }
    .ft-subtitle { font-size: 13px; color: #ffcc88; margin-top: 2px; }
    .ft-close-btn {
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
      color: #fff; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 16px;
    }
    .ft-close-btn:hover { background: rgba(255,100,0,0.35); }
    .ft-dino-row {
      display: flex; gap: 10px; padding: 10px 16px 6px;
      border-bottom: 1px solid rgba(221,170,0,0.2);
    }
    .ft-dino-tag {
      background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.3);
      border-radius: 20px; padding: 3px 12px; font-size: 13px; color: #ffe066;
    }
    #ft-menu { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 0; }
    .ft-item {
      display: flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,180,0,0.2);
      border-radius: 12px; padding: 10px 12px;
      transition: background 0.15s;
    }
    .ft-item:hover:not(.ft-disabled) { background: rgba(255,180,0,0.12); }
    .ft-item.ft-disabled { opacity: 0.48; }
    .ft-emoji  { font-size: 32px; min-width: 40px; text-align: center; }
    .ft-info   { flex: 1; }
    .ft-name   { font-weight: bold; font-size: 15px; color: #ffe066; }
    .ft-desc   { font-size: 12px; color: #ccc; margin: 1px 0; }
    .ft-heal   { font-size: 12px; color: #88ff88; font-weight: bold; }
    .ft-btn {
      background: linear-gradient(135deg, #8b5e00, #c88000);
      border: 1px solid #ddaa00; border-radius: 10px;
      color: #ffe; font-weight: bold; font-size: 14px;
      padding: 7px 14px; cursor: pointer; white-space: nowrap;
      transition: background 0.15s;
    }
    .ft-btn:hover:not(:disabled) { background: linear-gradient(135deg, #c88000, #ffcc00); color: #000; }
    .ft-btn:disabled { background: #333; border-color: #555; color: #888; cursor: default; }
    .ft-footer {
      font-size: 13px; color: #aaa; padding: 10px 16px 0;
      border-top: 1px solid rgba(221,170,0,0.2); margin-top: 8px;
    }
    #food-truck-hint {
      position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
      background: rgba(20,8,0,0.85); border: 2px solid #ddaa00; border-radius: 10px;
      padding: 8px 20px; color: #ffe066; font-size: 15px; font-weight: bold;
      pointer-events: all; cursor: pointer; z-index: 60; white-space: nowrap;
      box-shadow: 0 0 16px rgba(221,170,0,0.3);
    }
    #food-truck-hint:hover { background: rgba(80,30,0,0.9); }

    /* ── GRASS COMPANION PANEL ── */
    #grass-panel {
      display: none;
      position: absolute; bottom: 16px; left: 16px;
      background: rgba(0,15,5,0.88); border: 2px solid #33aa44;
      border-radius: 14px; padding: 10px 14px; min-width: 170px;
      pointer-events: all; z-index: 50;
      box-shadow: 0 0 20px rgba(50,200,80,0.25);
    }
    #grass-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    #grass-avatar { font-size: 22px; line-height: 1; }
    #grass-name   { font-size: 15px; font-weight: bold; color: #66ee66; }
    #grass-level  { font-size: 11px; color: #aaffaa; margin-left: auto; background: rgba(0,80,0,0.6); padding: 2px 6px; border-radius: 8px; }
    .grass-bar-wrap { margin: 4px 0; }
    .grass-bar-label { font-size: 10px; color: #88cc88; margin-bottom: 2px; display: flex; justify-content: space-between; }
    .grass-bar-bg { background: rgba(0,40,0,0.7); border-radius: 4px; height: 7px; overflow: hidden; }
    .grass-bar-fill { height: 100%; border-radius: 4px; transition: width 0.25s, background 0.25s; }
    #grass-hp-fill  { background: #44ff66; }
    #grass-xp-fill  { background: #88ffcc; }
    #grass-footer { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #77bb77; }
    #grass-status { font-size: 10px; color: #88ff88; margin-top: 4px; }

    /* ── CHOMP COMPANION PANEL ── */
    #chomp-panel {
      display: none;
      position: absolute; bottom: 16px; left: 200px;
      background: rgba(18, 8, 2, 0.88); border: 2px solid #aa5511;
      border-radius: 14px; padding: 10px 14px; min-width: 170px;
      pointer-events: all; z-index: 50;
      box-shadow: 0 0 20px rgba(180, 100, 30, 0.3);
    }
    #chomp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    #chomp-avatar { font-size: 22px; line-height: 1; }
    #chomp-name   { font-size: 15px; font-weight: bold; color: #dd8833; }
    #chomp-level  { font-size: 11px; color: #eebb88; margin-left: auto; background: rgba(80,30,0,0.6); padding: 2px 6px; border-radius: 8px; }
    .chomp-bar-wrap  { margin: 4px 0; }
    .chomp-bar-label { font-size: 10px; color: #aa7744; margin-bottom: 2px; display: flex; justify-content: space-between; }
    .chomp-timer-bg  { background: rgba(40,15,0,0.7); border-radius: 4px; height: 7px; overflow: hidden; }
    .chomp-timer-fill { height: 100%; border-radius: 4px; background: #44ff88; transition: width 0.3s; }
    #chomp-status { font-size: 10px; color: #aaffaa; margin-top: 4px; }

    /* ── CONFUSION PULSE HUD ── */
    #confusion-hud {
      display: none;
      position: absolute; bottom: 158px; left: 16px;
      background: rgba(40, 0, 60, 0.82);
      border: 1px solid #9900cc;
      border-radius: 10px; padding: 8px 12px; min-width: 148px;
      backdrop-filter: blur(6px);
      box-shadow: 0 0 20px rgba(180, 0, 255, 0.35);
    }
    #confusion-header  { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    #confusion-key     { font-size: 14px; font-weight: bold; color: #fff; background: rgba(120,0,180,0.8); border-radius: 5px; padding: 1px 7px; border: 1px solid #cc44ff; transition: opacity 0.3s; }
    #confusion-name    { font-size: 13px; font-weight: bold; color: #dd66ff; }
    .confusion-bar-wrap  { margin: 4px 0; }
    .confusion-bar-label { font-size: 10px; color: #aa66cc; margin-bottom: 2px; display: flex; justify-content: space-between; }
    .confusion-cd-bg   { background: rgba(40,0,60,0.8); border-radius: 4px; height: 7px; overflow: hidden; }
    .confusion-cd-fill { height: 100%; border-radius: 4px; background: #cc44ff; transition: width 0.3s; }
    #confusion-status  { font-size: 10px; color: #cc88ff; margin-top: 4px; }

    /* ── ARENA SELECTOR UI ── */
    #arena-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,2,15,0.88);
      align-items: center; justify-content: center; pointer-events: all;
    }
    #arena-panel {
      background: linear-gradient(160deg, #080018 0%, #020010 100%);
      border: 2px solid #ff6600; border-radius: 20px;
      padding: 28px 32px; width: min(480px, 94vw);
      display: flex; flex-direction: column;
      max-height: 88vh; box-sizing: border-box;
      box-shadow: 0 0 60px rgba(255,100,0,0.25);
    }
    #arena-header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
    #arena-header h2 { font-size: 24px; color: #ff8800; margin: 0 0 4px; }
    #arena-header p  { font-size: 12px; color: #885533; margin: 0; letter-spacing: 1px; }
    #arena-list {
      overflow-y: auto; flex: 1;
      display: flex; flex-direction: column; gap: 10px;
      padding-right: 4px;
      scrollbar-width: thin; scrollbar-color: #ff6600 #111;
    }
    #arena-list::-webkit-scrollbar { width: 6px; }
    #arena-list::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
    #arena-list::-webkit-scrollbar-thumb { background: #ff6600; border-radius: 3px; }
    .arena-card {
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,100,0,0.07); border: 1px solid #331500;
      border-radius: 12px; padding: 14px 16px; cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .arena-card:hover { background: rgba(255,100,0,0.18); border-color: #ff6600; }
    .arena-card.locked { opacity: 0.45; cursor: not-allowed; }
    .arena-card-icon { font-size: 32px; flex-shrink: 0; line-height: 1; }
    .arena-card-info { flex: 1; }
    .arena-card-name { font-size: 16px; font-weight: bold; color: #ffcc88; margin-bottom: 3px; }
    .arena-card-desc { font-size: 12px; color: #886644; }
    .arena-card-lock { font-size: 11px; color: #ff4444; margin-top: 3px; }
    #arena-close-btn {
      margin-top: 18px; flex-shrink: 0;
      padding: 11px; border-radius: 10px; font-size: 14px; font-family: inherit;
      font-weight: bold; cursor: pointer; border: 2px solid #443300;
      background: #1a0a00; color: #886644; width: 100%;
    }
    #arena-close-btn:hover { background: #2a1200; }

    /* ── WAVE HUD ── */
    #wave-hud {
      display: none; position: absolute; top: 16px; left: 50%;
      transform: translateX(-50%);
      background: rgba(0,5,20,0.85); border: 2px solid #ff6600;
      border-radius: 14px; padding: 10px 28px; text-align: center;
      pointer-events: none; z-index: 50;
      box-shadow: 0 0 30px rgba(255,100,0,0.4);
    }
    #wave-num  { font-size: 22px; font-weight: bold; color: #ff8800; letter-spacing: 2px; }
    #wave-left { font-size: 13px; color: #ffcc88; margin-top: 2px; }

    /* ── DUMMY / DUMB OCTO HUD ── */
    #dummy-hud {
      display: none; position: absolute; top: 16px; right: 16px;
      background: rgba(10,0,0,0.88); border: 2px solid #ff2200;
      border-radius: 14px; padding: 12px 20px; text-align: center;
      pointer-events: none; z-index: 50;
      box-shadow: 0 0 24px rgba(255,30,0,0.5);
      min-width: 110px;
    }

    /* ── ACHIEVEMENTS UI ── */
    #achieve-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(10,6,0,0.9);
      align-items: center; justify-content: center; pointer-events: all;
    }
    #achieve-panel {
      background: linear-gradient(160deg, #1a1000 0%, #2a1800 60%, #1a0e00 100%);
      border: 2px solid #ffaa00; border-radius: 20px;
      padding: 28px 36px; width: 480px; max-width: 96vw;
      box-shadow: 0 0 60px rgba(255,160,0,0.3);
      max-height: 80vh; display: flex; flex-direction: column;
    }
    #achieve-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
    #achieve-title { font-size: 22px; font-weight: bold; color: #ffd700; }
    #achieve-progress { font-size: 13px; color: #cc9900; margin-left: auto; }
    #achieve-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
    #achieve-list::-webkit-scrollbar { width: 5px; }
    #achieve-list::-webkit-scrollbar-thumb { background: #664400; border-radius: 3px; }
    .achieve-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; border-radius: 12px;
      transition: background 0.15s;
    }
    .achieve-row.achieved { background: rgba(255,180,0,0.12); border: 1px solid rgba(255,160,0,0.3); }
    .achieve-row.achieved.claimed { background: rgba(0,180,80,0.08); border: 1px solid rgba(0,180,80,0.2); }
    .achieve-row.locked { background: rgba(60,40,0,0.3); border: 1px solid rgba(80,60,0,0.3); opacity: 0.65; }
    .achieve-icon { font-size: 24px; flex-shrink: 0; width: 30px; text-align: center; }
    .achieve-info { flex: 1; min-width: 0; }
    .achieve-name { font-size: 14px; font-weight: bold; color: #ffeebb; }
    .achieve-desc { font-size: 11px; color: #aa8855; margin-top: 2px; }
    .achieve-claim-btn {
      flex-shrink: 0; background: #cc7700; color: #fff8e0;
      border: 2px solid #ffaa00; border-radius: 8px;
      padding: 5px 12px; font-size: 12px; font-weight: bold; cursor: pointer;
      white-space: nowrap; transition: background 0.15s;
    }
    .achieve-claim-btn:hover { background: #ffaa00; color: #1a0a00; }
    .achieve-claimed-tag { flex-shrink: 0; color: #44cc77; font-size: 12px; white-space: nowrap; }
    .achieve-locked-tag  { flex-shrink: 0; color: #665533; font-size: 12px; white-space: nowrap; }
    #achieve-close-btn {
      width: 100%; margin-top: 18px; background: #443300; color: #ffd700;
      border: 2px solid #aa7700; padding: 11px 0; border-radius: 10px;
      font-size: 14px; cursor: pointer; transition: background 0.15s; flex-shrink: 0;
    }
    #achieve-close-btn:hover { background: #665500; }

    /* ── BANK UI ── */
    #bank-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,5,20,0.82);
      align-items: center; justify-content: center; pointer-events: all;
    }
    #bank-panel {
      background: linear-gradient(160deg, #1a1200 0%, #0d0900 100%);
      border: 2px solid #ffd700; border-radius: 20px;
      padding: 32px 42px; min-width: 360px; text-align: center;
      box-shadow: 0 0 50px rgba(255,210,0,0.25);
    }
    #bank-icon { font-size: 48px; margin-bottom: 6px; }
    #bank-title { font-size: 24px; font-weight: bold; color: #ffd700; margin-bottom: 4px; }
    #bank-subtitle { font-size: 11px; color: #887744; margin-bottom: 22px; letter-spacing: 1px; }
    .bank-balance-row {
      display: flex; justify-content: space-between;
      background: rgba(255,210,0,0.07); border: 1px solid #443300;
      border-radius: 10px; padding: 10px 16px; margin-bottom: 10px;
      font-size: 15px; color: #ffeeaa;
    }
    .bank-balance-row span { color: #ffd700; font-weight: bold; }
    #bank-interest-note { font-size: 11px; color: #887744; margin-bottom: 20px; }
    #bank-input {
      width: 100%; box-sizing: border-box;
      background: rgba(150,110,0,0.18); border: 2px solid #886600;
      border-radius: 10px; color: #ffffff; font-size: 20px; font-family: inherit;
      text-align: center; padding: 9px 14px; outline: none; margin-bottom: 16px;
      letter-spacing: 1px;
    }
    #bank-input:focus { border-color: #ffd700; box-shadow: 0 0 12px rgba(255,210,0,0.3); }
    .bank-btn {
      padding: 11px 22px; border-radius: 10px; font-size: 14px; font-family: inherit;
      font-weight: bold; cursor: pointer; border: 2px solid; transition: background 0.15s;
      margin: 0 5px;
    }
    #bank-deposit-btn   { background: #3a2200; border-color: #ffd700; color: #ffd700; }
    #bank-deposit-btn:hover { background: #5a3500; }
    #bank-withdraw-btn  { background: #221100; border-color: #aa7700; color: #ffcc44; }
    #bank-withdraw-btn:hover { background: #332200; }
    #bank-close-btn     { background: #1a1100; border-color: #443300; color: #887744; }
    #bank-close-btn:hover { background: #2a1a00; }
    #bank-rob-warn {
      margin-top: 14px; font-size: 11px; color: #cc4400;
      display: none;
    }

    /* ── FORCED NAME POPUP ── */
    #name-required-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,10,30,0.92);
      display: flex; align-items: center; justify-content: center;
      pointer-events: all;
    }
    #name-required-panel {
      background: linear-gradient(160deg, #0a1f3a 0%, #051020 100%);
      border: 3px solid #00ccff; border-radius: 22px;
      padding: 36px 32px; max-width: 360px; width: 88%;
      text-align: center; box-shadow: 0 0 40px rgba(0,200,255,0.3);
    }
    #name-required-icon { font-size: 52px; margin-bottom: 10px; }
    #name-required-title {
      font-size: 26px; font-weight: 900; color: #00eeff;
      margin-bottom: 8px; letter-spacing: 1px;
    }
    #name-required-sub {
      font-size: 14px; color: #88ccdd; margin-bottom: 20px; line-height: 1.4;
    }
    #name-required-input {
      width: 100%; box-sizing: border-box;
      padding: 12px 16px; font-size: 18px; font-weight: bold;
      border-radius: 12px; border: 2px solid #0099cc;
      background: rgba(0,30,60,0.8); color: #fff;
      text-align: center; outline: none; margin-bottom: 8px;
    }
    #name-required-input:focus { border-color: #00eeff; box-shadow: 0 0 10px rgba(0,238,255,0.4); }
    #name-required-error { color: #ff6666; font-size: 13px; margin-bottom: 8px; }
    #name-required-btn {
      margin-top: 12px; width: 100%; padding: 14px;
      font-size: 18px; font-weight: 900; border-radius: 14px;
      border: none; cursor: pointer;
      background: linear-gradient(135deg, #0077cc, #00bbff);
      color: #fff; box-shadow: 0 4px 18px rgba(0,180,255,0.4);
      transition: transform 0.1s;
    }
    #name-required-btn:active { transform: scale(0.96); }

    /* ── NICKNAME UI ── */
    #nickname-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,5,20,0.85);
      align-items: center; justify-content: center; pointer-events: all;
    }
    #nickname-panel {
      background: linear-gradient(160deg, #1a0a3a 0%, #0d0520 100%);
      border: 2px solid #cc44ff; border-radius: 20px;
      padding: 36px 44px; min-width: 340px; text-align: center;
      box-shadow: 0 0 50px rgba(180,60,255,0.3);
    }
    #nickname-icon { font-size: 52px; margin-bottom: 8px; }
    #nickname-title { font-size: 22px; font-weight: bold; color: #dd88ff; margin-bottom: 6px; }
    #nickname-subtitle { font-size: 12px; color: #8855aa; margin-bottom: 24px; letter-spacing: 1px; }
    #nickname-input {
      width: 100%; box-sizing: border-box;
      background: rgba(100,30,160,0.3); border: 2px solid #9933cc;
      border-radius: 10px; color: #ffffff; font-size: 20px; font-family: inherit;
      text-align: center; padding: 10px 14px; outline: none; margin-bottom: 18px;
      letter-spacing: 1px;
    }
    #nickname-input:focus { border-color: #dd44ff; box-shadow: 0 0 12px rgba(200,60,255,0.4); }
    #nickname-preview { font-size: 13px; color: #aa77cc; margin-bottom: 20px; min-height: 18px; }
    .nick-btn {
      padding: 11px 28px; border-radius: 10px; font-size: 15px; font-family: inherit;
      font-weight: bold; cursor: pointer; border: 2px solid; transition: background 0.15s;
    }
    #nickname-save-btn { background: #7722bb; border-color: #cc44ff; color: #ffffff; margin-right: 10px; }
    #nickname-save-btn:hover { background: #9933dd; }
    #nickname-cancel-btn { background: #221133; border-color: #553366; color: #aa88cc; }
    #nickname-cancel-btn:hover { background: #332244; }

    /* ── LEVEL UP POPUP ── */
    #levelup-popup {
      display: none; position: absolute;
      top: 12px; right: 12px;
      background: rgba(20, 8, 0, 0.55);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,170,0,0.45); border-radius: 14px;
      padding: 14px 20px; min-width: 200px; max-width: 240px; text-align: center;
      box-shadow: 0 0 24px rgba(255,140,0,0.25);
      pointer-events: none; z-index: 200;
      animation: lvup-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    }
    @keyframes lvup-in {
      from { transform: scale(0.75) translateY(-12px); opacity: 0; }
      to   { transform: scale(1) translateY(0);        opacity: 1; }
    }
    #levelup-title { font-size: 11px; letter-spacing: 2px; color: #ffaa44; text-transform: uppercase; margin-bottom: 2px; }
    #levelup-badge { font-size: 36px; line-height: 1.1; margin: 4px 0; }
    #levelup-name  { font-size: 15px; font-weight: bold; color: #ffeebb; margin-bottom: 10px; }
    #levelup-rewards { display: flex; flex-direction: column; gap: 5px; }
    .lvup-row {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,140,0,0.10); border-radius: 8px;
      padding: 5px 10px; font-size: 12px; color: #ffd899;
    }
    .lvup-row-icon { font-size: 15px; flex-shrink: 0; }
    .lvup-row b { color: #ffffff; }

    /* ── SHOP ── */
    #shop-ui {
      display: none; position: absolute; inset: 0;
      background: rgba(0,10,30,0.9); align-items: center; justify-content: center;
      pointer-events: all;
    }
    #shop-panel {
      background: rgba(5,20,50,0.97); border: 3px solid #ffcc00; border-radius: 18px;
      color: white; width: min(94vw, 500px); max-height: 88vh;
      display: flex; flex-direction: column; overflow: hidden;
    }
    #shop-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 20px; border-bottom: 2px solid rgba(255,204,0,0.3); flex-shrink: 0;
    }
    #shop-header h2 { color: #ffcc00; font-size: 20px; margin: 0; }
    #shop-money-disp { color: #ffcc00; font-size: 15px; font-weight: bold; }
    #shop-close-btn {
      background: none; border: 2px solid #666; color: #aaa; border-radius: 6px;
      width: 30px; height: 30px; cursor: pointer; font-size: 15px; pointer-events: all;
    }
    #shop-close-btn:hover { border-color: #fff; color: #fff; }
    #shop-tabs {
      display: flex; border-bottom: 2px solid rgba(255,204,0,0.2); flex-shrink: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    #shop-tabs::-webkit-scrollbar { display: none; }
    .shop-tab {
      flex: 1 0 auto; min-width: 60px; padding: 10px 6px;
      background: none; border: none; color: #888;
      font-size: 13px; cursor: pointer; pointer-events: all;
      border-bottom: 3px solid transparent; white-space: nowrap;
    }
    .shop-tab.active { color: #ffcc00; border-bottom-color: #ffcc00; }
    #shop-content-row { display: flex; flex: 1; overflow: hidden; }
    #shop-content { overflow-y: auto; padding: 14px; flex: 1; }
    #shop-scroll-btns {
      display: flex;
      flex-direction: column; gap: 8px;
      padding: 8px 10px 12px 0;
      align-items: center; flex-shrink: 0;
      justify-content: center;
    }
    #shop-scroll-up, #shop-scroll-down {
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(255,204,0,0.9); border: 2px solid #ffcc00;
      color: #001020; font-size: 22px; font-weight: bold;
      cursor: pointer; pointer-events: all; touch-action: manipulation;
      display: flex; align-items: center; justify-content: center;
    }
    .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .shop-item {
      background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.12);
      border-radius: 12px; padding: 12px; text-align: center;
    }
    .shop-item.s-owned   { border-color: rgba(0,220,150,0.45); }
    .shop-item.s-equipped { border-color: #ffcc00; background: rgba(255,204,0,0.08); }
    .skin-swatch { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 7px; border: 3px solid rgba(255,255,255,0.25); }
    .shop-item-name { font-size: 12px; font-weight: bold; margin-bottom: 3px; }
    .shop-item-price { font-size: 11px; color: #ffcc00; margin-bottom: 7px; }
    .shop-item-desc  { font-size: 11px; color: #99bbcc; margin-bottom: 7px; }
    .shop-btn {
      background: #ffcc00; color: #001a2e; border: none; border-radius: 6px;
      padding: 5px 10px; font-size: 12px; font-weight: bold;
      cursor: pointer; pointer-events: all; width: 100%;
    }
    .shop-btn:hover:not(:disabled) { background: #ffdd44; }
    .shop-btn:disabled { background: #333; color: #666; cursor: default; }
    .shop-btn.equip-btn  { background: #00ccff; color: #001a2e; }
    .shop-btn.badge-btn  { background: rgba(255,204,0,0.2); color: #ffcc00; cursor: default; }

    /* ── Loadout tab ── */
    .loadout-grid { display: flex; flex-direction: column; gap: 10px; }
    .loadout-slot { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.14);
      border-radius: 12px; padding: 10px 12px; }
    .loadout-slot.loadout-active { border-color: #ffcc00; background: rgba(255,204,0,0.08); }
    .loadout-slot-num  { font-size: 10px; color: #88aacc; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
    .loadout-slot-weapon { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 8px; }
    .loadout-slot-btns { display: flex; flex-wrap: wrap; gap: 5px; }
    .lw-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
      border-radius: 7px; padding: 4px 10px; color: #cce; font-size: 11px; cursor: pointer;
      transition: background 0.15s; }
    .lw-btn:hover { background: rgba(255,255,255,0.18); }
    .lw-btn.lw-active { background: rgba(255,204,0,0.25); border-color: #ffcc00; color: #ffee88; font-weight: bold; }

    .wrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
            background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
            border-radius: 12px; margin-bottom: 8px; }
    .wrow.s-owned { border-color: rgba(0,220,150,0.4); }
    .wrow-icon { font-size: 32px; }
    .wrow-info { flex: 1; }
    .wrow-name { font-size: 13px; font-weight: bold; }
    .wrow-desc { font-size: 11px; color: #99bbcc; margin-top: 2px; }

    /* money HUD */
    #money-box { color: #ffcc00; }


    /* ── MINI-MAP ── */
    #minimap-wrap {
      display: none; /* position controlled by #top-right container */
      pointer-events: none;
    }
    #minimap-label {
      font-size: 10px; color: rgba(0,200,255,0.5); text-align: center;
      margin-bottom: 3px; letter-spacing: 2px; text-transform: uppercase;
    }
    #minimap {
      border-radius: 10px; border: 2px solid rgba(0,200,255,0.35); display: block;
    }

    /* ── MOBILE CONTROLS ── */
    #mobile-ui { display: none; position: absolute; inset: 0; pointer-events: none; }
    /* Shown by default on touch devices OR when forced on */
    @media (pointer: coarse) { #mobile-ui { display: block; } }
    /* Hide minimap on touch devices — it takes up space and can't be used without a keyboard */
    @media (pointer: coarse) { #minimap-wrap { display: none !important; } }
    #mobile-ui.force-on  { display: block !important; }
    #mobile-ui.force-off { display: none  !important; }

    #joy-base {
      position: absolute; width: 114px; height: 114px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.22);
      pointer-events: none; transition: opacity .15s;
    }
    #joy-knob {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 50px; height: 50px; border-radius: 50%;
      background: rgba(255,255,255,0.38); pointer-events: none;
    }
    .mob-btn {
      position: absolute; border-radius: 50%; border: none;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; font-weight: bold; color: white;
      pointer-events: all; cursor: pointer; user-select: none;
      -webkit-user-select: none; touch-action: manipulation;
    }
    #mob-attack {
      width: 80px; height: 80px; bottom: 20px; right: 20px;
      background: rgba(255,60,60,0.82); border: 3px solid #ff4444;
    }
    #mob-up {
      width: 58px; height: 58px; bottom: 88px; right: 144px;
      background: rgba(0,160,255,0.65); border: 2px solid rgba(0,220,255,0.8);
      font-size: 20px;
    }
    #mob-down {
      width: 58px; height: 58px; bottom: 20px; right: 144px;
      background: rgba(0,100,200,0.65); border: 2px solid rgba(0,160,255,0.8);
      font-size: 20px;
    }
    #mob-talk {
      width: 58px; height: 58px; bottom: 172px; right: 20px;
      background: rgba(255,180,0,0.7); border: 2px solid gold;
      font-size: 18px;
    }
    #mob-shop {
      width: 52px; height: 52px; bottom: 302px; right: 20px;
      background: rgba(255,204,0,0.7); border: 2px solid #ffcc00;
      font-size: 20px;
    }
    #mob-home {
      width: 52px; height: 52px; bottom: 364px; right: 20px;
      background: rgba(0,160,80,0.82); border: 2px solid #00cc66;
      font-size: 22px;
    }
    #mob-prev-weapon, #mob-next-weapon {
      width: 52px; height: 52px;
      background: rgba(40,40,80,0.82); border: 2px solid rgba(180,180,255,0.6);
      font-size: 22px;
    }
    #mob-prev-weapon { bottom: 110px; right: 82px; }
    #mob-next-weapon { bottom: 110px; right: 20px; }
    #mob-dash {
      width: 70px; height: 70px; bottom: 170px; right: 110px;
      background: rgba(0,200,255,0.85); border: 3px solid #00eeff;
      font-size: 28px;
    }
    #mob-confusion {
      width: 70px; height: 70px; bottom: 158px; left: 55px;
      background: rgba(140,0,220,0.85); border: 3px solid #cc44ff;
      font-size: 28px;
    }
    #mob-confusion.on-cooldown { opacity: 0.45; }
    #mob-gyro {
      width: 52px; height: 52px; top: 16px; right: 16px;
      background: rgba(0,60,140,0.65); border: 2px solid rgba(80,160,255,0.8);
      font-size: 22px;
    }
    #mob-team {
      width: 52px; height: 52px; bottom: 426px; right: 20px;
      background: rgba(0,180,100,0.82); border: 2px solid #00cc66;
      font-size: 22px;
    }

    /* ── Panel scroll buttons (always visible) ── */
    .panel-scroll-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 5px 0;
      font-size: 16px;
      color: #88ccff;
      background: rgba(0,60,120,0.35);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
      letter-spacing: 2px;
      flex-shrink: 0;
    }
    .panel-scroll-btn:hover  { background: rgba(0,80,160,0.5); color: #aaddff; }
    .panel-scroll-btn:active { background: rgba(0,120,220,0.65); color: #fff; }

    /* Sticky top/bottom inside #start-screen */
    .panel-scroll-top {
      position: sticky; top: 0; z-index: 2;
      border-radius: 8px 8px 0 0; margin-bottom: 4px;
    }
    .panel-scroll-bot {
      position: sticky; bottom: 0; z-index: 2;
      border-radius: 0 0 8px 8px; margin-top: 4px;
    }

    /* Inline row inside arena/achieve panels */
    .panel-scroll-row { border-radius: 8px; margin: 2px 0; }

    /* Make HUD readable on small screens */
    @media (max-width: 500px) {
      .hbox { font-size: 12px; padding: 4px 10px; }
      #score-box { font-size: 13px; }
      .wslot { min-width: 60px; font-size: 11px; padding: 5px 8px; }
      #start-screen { min-width: unset; width: 92vw; padding: 22px 20px; border-radius: 16px; }
      #start-screen h1 { font-size: 32px; }
      #start-screen button { font-size: 18px; padding: 12px 32px; }
      .panel-scroll-btn { font-size: 20px; padding: 7px 0; }
    }

  @keyframes hcPulse {
    0%,100% { opacity:1; text-shadow: 0 0 14px #ff00aa, 0 0 28px #ff00aa; }
    50%      { opacity:0.7; text-shadow: 0 0 4px #ff00aa; }
  }

  /* ── LEADERBOARD HINT ── */
  #lb-hint {
    display: none; position: absolute; bottom: 80px; left: 50%;
    transform: translateX(-50%);
    background: rgba(5,15,5,0.88); border: 2px solid #ffd700;
    border-radius: 12px; padding: 10px 24px; color: #ffd700;
    font-size: 15px; font-weight: bold; letter-spacing: 0.5px;
    pointer-events: all; cursor: pointer; text-align: center;
    box-shadow: 0 0 22px rgba(255,215,0,0.25);
    animation: hintpulse 1.5s ease-in-out infinite;
    white-space: nowrap;
  }

  /* ── LEADERBOARD PANEL ── */
  #leaderboard-ui {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex; align-items: center; justify-content: center;
    z-index: 220; pointer-events: all;
  }
  #lb-panel {
    background: linear-gradient(160deg, #0a1a00 0%, #0d2240 60%, #0a0d1a 100%);
    border: 2.5px solid #ffd700; border-radius: 20px;
    padding: 26px 30px 20px; min-width: 340px; max-width: 470px; width: 92%;
    box-shadow: 0 0 50px rgba(255,215,0,0.18), inset 0 0 30px rgba(255,215,0,0.04);
  }
  #lb-header { text-align: center; margin-bottom: 16px; }
  #lb-trophy-icon { font-size: 38px; line-height: 1; margin-bottom: 4px; }
  #lb-title {
    font-size: 24px; font-weight: bold; color: #ffd700;
    letter-spacing: 3px; text-transform: uppercase;
  }
  #lb-subtitle {
    font-size: 10px; color: #886600; letter-spacing: 4px;
    margin-top: 2px; text-transform: uppercase;
  }
  #lb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
  .lb-tab {
    flex: 1; padding: 8px 4px; border: 1.5px solid #553300;
    border-radius: 10px; background: #1a0e00; color: #aa7722;
    font-size: 13px; cursor: pointer; transition: all 0.18s;
    font-weight: bold;
  }
  .lb-tab:hover { background: #2a1800; border-color: #ffd700; color: #ffd700; }
  .lb-tab-active {
    background: linear-gradient(135deg, #ffd700, #cc9900);
    color: #1a0a00; border-color: #ffd700;
    box-shadow: 0 2px 10px rgba(255,215,0,0.3);
  }
  #lb-content { display: flex; flex-direction: column; gap: 5px; min-height: 220px; }
  .lb-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 13px; border-radius: 10px;
    background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
    transition: background 0.15s;
  }
  .lb-gold   { background: rgba(255,215,0,0.10); border-color: rgba(255,215,0,0.35); }
  .lb-silver { background: rgba(200,200,200,0.08); border-color: rgba(200,200,200,0.25); }
  .lb-bronze { background: rgba(205,127,50,0.10); border-color: rgba(205,127,50,0.28); }
  .lb-me {
    background: rgba(255,215,0,0.16) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255,215,0,0.2);
  }
  .lb-rank { font-size: 20px; min-width: 30px; text-align: center; flex-shrink: 0; }
  .lb-name {
    flex: 1; color: #ffe090; font-size: 13px; font-weight: bold;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lb-val  { color: #ffd700; font-size: 13px; font-weight: bold; white-space: nowrap; }
  .lb-you-tag {
    font-size: 9px; font-weight: bold; color: #1a0a00;
    background: #ffd700; border-radius: 5px;
    padding: 2px 5px; letter-spacing: 1px; flex-shrink: 0;
  }
  .lb-loading {
    text-align: center; color: #886600; padding: 40px 20px;
    font-size: 14px; line-height: 1.6;
  }
  .lb-offline {
    text-align: center; color: #cc4444; padding: 30px 20px;
    font-size: 13px; line-height: 1.7;
  }
  #lb-close-btn {
    width: 100%; margin-top: 16px; padding: 11px;
    border: 1.5px solid #553300; border-radius: 12px;
    background: #1a0e00; color: #aa7722; font-size: 14px;
    cursor: pointer; transition: all 0.18s; font-weight: bold;
  }
  #lb-close-btn:hover {
    background: linear-gradient(135deg, #ffd700, #cc9900);
    color: #1a0a00; border-color: #ffd700;
  }

  /* ══════════════════════════════════════════════════════
     MULTIPLAYER PORTAL UI
  ══════════════════════════════════════════════════════ */
  #mp-hint {
    position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 30, 50, 0.88); color: #88eeff;
    border: 1.5px solid #00ccee; border-radius: 12px;
    padding: 10px 22px; font-size: 15px; font-weight: bold;
    cursor: pointer; pointer-events: all; text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 20px rgba(0,200,240,0.3);
    transition: opacity 0.25s;
  }
  #mp-hint:hover { background: rgba(0, 50, 80, 0.95); }

  /* ── Arena approach hint ── */
  #arena-hint {
    position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
    background: rgba(20, 0, 40, 0.88); color: #cc88ff;
    border: 1.5px solid #aa44ff; border-radius: 12px;
    padding: 10px 22px; font-size: 15px; font-weight: bold;
    pointer-events: none; text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 22px rgba(150, 50, 255, 0.35);
    animation: hintpulse 1.5s ease-in-out infinite;
  }

  /* ── News Station approach hint ── */
  #news-hint {
    position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
    background: rgba(40, 15, 0, 0.90); color: #ffaa44;
    border: 1.5px solid #ff6600; border-radius: 12px;
    padding: 10px 22px; font-size: 15px; font-weight: bold;
    cursor: pointer; pointer-events: all; text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 22px rgba(255, 100, 0, 0.4);
    animation: hintpulse 1.5s ease-in-out infinite;
    transition: opacity 0.25s;
  }
  #news-hint:hover { background: rgba(70, 25, 0, 0.95); }

  /* ── Wave Selector approach hint ── */
  #wave-select-hint {
    position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 20, 50, 0.90); color: #44ccff;
    border: 1.5px solid #0099dd; border-radius: 12px;
    padding: 10px 22px; font-size: 15px; font-weight: bold;
    cursor: pointer; pointer-events: all; text-align: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 22px rgba(0, 150, 255, 0.4);
    animation: hintpulse 1.5s ease-in-out infinite;
    transition: opacity 0.25s;
  }
  #wave-select-hint:hover { background: rgba(0, 40, 80, 0.95); }

  /* ── Wave Selector panel ── */
  #wave-select-ui {
    display: flex; flex-direction: column;
    pointer-events: all;
  }
  #wave-select-panel {
    background: linear-gradient(160deg, #000e1a 0%, #000810 100%);
    border: 2px solid #0099dd; border-radius: 20px;
    padding: 28px 32px; width: min(520px, 94vw);
    display: flex; flex-direction: column;
    max-height: 85vh; box-sizing: border-box;
    box-shadow: 0 0 60px rgba(0, 150, 255, 0.25);
  }
  #wave-select-header { text-align: center; margin-bottom: 20px; flex-shrink: 0; }
  #wave-select-header h2 { font-size: 24px; color: #44ccff; margin: 0 0 4px; }
  #wave-select-header p  { font-size: 12px; color: #336688; margin: 0; letter-spacing: 1px; }
  #wave-select-grid {
    overflow-y: auto; flex: 1;
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; padding: 4px;
    scrollbar-width: thin; scrollbar-color: #0099dd #111;
  }
  #wave-select-grid::-webkit-scrollbar { width: 6px; }
  #wave-select-grid::-webkit-scrollbar-track { background: #111; border-radius: 3px; }
  #wave-select-grid::-webkit-scrollbar-thumb { background: #0099dd; border-radius: 3px; }
  .wave-sel-btn {
    width: 90px; height: 56px;
    background: rgba(0, 100, 200, 0.15); border: 2px solid #0099dd;
    border-radius: 12px; color: #88ddff; font-size: 14px; font-weight: bold;
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
  }
  .wave-sel-btn:hover { background: rgba(0, 150, 255, 0.3); transform: scale(1.06); }
  #wave-select-close {
    margin-top: 18px; flex-shrink: 0;
    padding: 11px; border-radius: 10px; font-size: 14px; font-family: inherit;
    font-weight: bold; cursor: pointer; border: 2px solid #003355;
    background: #001122; color: #336688; width: 100%;
  }
  #wave-select-close:hover { background: #002244; }

  /* ══════════════════════════════════════════════════════
     NEWS PANEL (Ocean News Network)
  ══════════════════════════════════════════════════════ */
  #news-ui {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.80);
    display: flex; align-items: center; justify-content: center;
    z-index: 220; pointer-events: all;
  }
  #news-panel {
    width: 540px; max-width: 96vw;
    background: #0a0c10; border: 2px solid #ff6600; border-radius: 16px;
    padding: 0 0 20px 0; overflow: hidden;
    box-shadow: 0 0 50px rgba(255,80,0,0.35), 0 8px 40px rgba(0,0,0,0.7);
    font-family: inherit;
    animation: newsSlideIn 0.3s ease-out;
  }
  @keyframes newsSlideIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1);    }
  }
  #news-header {
    background: linear-gradient(135deg, #1a0800, #2a1200);
    border-bottom: 2px solid #ff6600;
    padding: 18px 24px 14px;
    text-align: center;
  }
  #news-logo {
    font-size: 32px; font-weight: 900; color: #ff6600;
    letter-spacing: 6px; text-shadow: 0 0 20px rgba(255,100,0,0.7);
  }
  #news-title {
    font-size: 11px; letter-spacing: 4px; color: #ff9944;
    font-weight: bold; margin-top: 4px; opacity: 0.85;
  }
  #news-date {
    font-size: 12px; color: #ffcc88; margin-top: 6px; opacity: 0.7;
  }
  #news-ticker {
    background: #cc3300; color: #fff; font-size: 12px; font-weight: bold;
    padding: 6px 16px; letter-spacing: 1.5px; text-align: center;
    animation: tickerpulse 1.2s ease-in-out infinite;
  }
  @keyframes tickerpulse {
    0%,100% { background: #cc3300; }
    50%      { background: #ff2200; }
  }
  #news-body {
    padding: 18px 24px 4px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .news-section {
    background: rgba(255,255,255,0.04);
    border-radius: 10px; overflow: hidden;
  }
  .news-section-label {
    font-size: 10px; font-weight: 900; letter-spacing: 2.5px;
    padding: 5px 14px; display: inline-block;
  }
  .breaking-label { background: #cc1100; color: #fff; }
  .weather-label  { background: #cc6600; color: #fff; }
  .sports-label   { background: #1155cc; color: #fff; }
  .local-label    { background: #226633; color: #fff; }
  .news-section-body {
    display: flex; align-items: flex-start;
  }
  .news-story {
    flex: 1;
    color: #e8e0d4; font-size: 14px; line-height: 1.5;
    padding: 10px 14px 12px;
  }
  .news-img {
    flex-shrink: 0; width: 110px;
    margin: 8px 10px 8px 0;
    border-radius: 8px; overflow: hidden;
    border: 2px solid #334455;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    background: #080e18;
    align-self: flex-start;
  }
  .news-photo {
    width: 100%; height: auto;
    display: block;
  }
  #news-close-btn {
    display: block; width: calc(100% - 48px); margin: 8px 24px 0;
    padding: 11px; border: 1.5px solid #553300; border-radius: 12px;
    background: #1a0a00; color: #ff8833; font-size: 14px;
    cursor: pointer; font-weight: bold; font-family: inherit;
    transition: all 0.18s;
  }
  #news-close-btn:hover {
    background: linear-gradient(135deg, #ff6600, #cc4400);
    color: #fff; border-color: #ff6600;
  }

  /* ── In-game HUD badge (top-right corner) ── */
  #mp-hud {
    /* position controlled by #top-right container */
    background: rgba(0, 25, 45, 0.88);
    border: none; border-radius: 0;
    padding: 8px 14px 8px 12px;
    color: #88eeff; font-size: 13px;
    pointer-events: all;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid rgba(0,200,255,0.2);
  }
  #mp-hud-icon { font-size: 18px; }
  #mp-hud-name { font-weight: bold; color: #ccf4ff; font-size: 13px; line-height: 1.3; }
  #mp-hud-code { color: #00aacc; font-size: 11px; font-weight: bold; letter-spacing: 1px; }
  #mp-hud-leave {
    background: none; border: 1px solid #004466; border-radius: 8px;
    color: #448899; font-size: 12px; padding: 3px 7px;
    cursor: pointer; transition: all 0.15s; font-family: inherit;
  }
  #mp-hud-leave:hover { background: rgba(0,100,140,0.5); color: #88ddff; }

  /* ── Full panel overlay ── */
  #mp-ui {
    position: absolute; inset: 0;
    background: rgba(0, 12, 24, 0.82);
    display: none; align-items: center; justify-content: center;
    pointer-events: all; backdrop-filter: blur(3px);
  }
  #mp-panel {
    background: linear-gradient(160deg, #041e30 0%, #021525 60%, #010d1a 100%);
    border: 2px solid #00aacc; border-radius: 22px;
    padding: 32px 36px; color: white;
    min-width: 360px; max-width: 480px; width: 92vw;
    box-shadow: 0 0 60px rgba(0,180,220,0.3), inset 0 1px 0 rgba(0,200,255,0.1);
    max-height: 88vh; overflow-y: auto;
  }
  #mp-header { text-align: center; margin-bottom: 22px; }
  #mp-portal-icon { font-size: 42px; margin-bottom: 6px; filter: drop-shadow(0 0 12px #00eeff); }
  #mp-title {
    font-size: 26px; font-weight: bold; color: #ccf4ff;
    text-shadow: 0 0 20px rgba(0,220,255,0.7);
    margin-bottom: 4px;
  }
  #mp-subtitle {
    font-size: 10px; color: #3388aa; letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* ── Tab row ── */
  .mp-tabs {
    display: flex; gap: 8px; margin-bottom: 18px;
  }
  .mp-tab {
    flex: 1; padding: 10px 6px; border-radius: 12px; font-size: 14px;
    font-weight: bold; cursor: pointer; transition: all 0.18s;
    background: rgba(0,100,140,0.15); border: 1.5px solid rgba(0,150,200,0.3);
    color: #557788; font-family: inherit;
  }
  .mp-tab:hover { background: rgba(0,120,170,0.3); color: #aaddee; }
  .mp-tab-active {
    background: linear-gradient(135deg, rgba(0,150,200,0.35), rgba(0,100,160,0.25));
    border-color: #00aacc; color: #88eeff;
    box-shadow: 0 0 15px rgba(0,170,220,0.2);
  }

  /* ── Form area ── */
  .mp-form { display: flex; flex-direction: column; gap: 10px; }
  .mp-label {
    font-size: 12px; font-weight: bold; color: #4499bb;
    text-transform: uppercase; letter-spacing: 1px;
  }
  .mp-input {
    width: 100%; padding: 12px 16px; border-radius: 12px; font-size: 16px;
    background: rgba(0, 40, 70, 0.7); border: 1.5px solid #005577;
    color: #ccf4ff; font-family: inherit; outline: none;
    transition: border-color 0.18s;
  }
  .mp-input:focus { border-color: #00aacc; box-shadow: 0 0 12px rgba(0,170,220,0.2); }
  .mp-code-input {
    font-size: 32px; font-weight: bold; letter-spacing: 10px;
    text-align: center; padding: 12px 8px;
  }
  .mp-field-hint { font-size: 11px; color: #336677; line-height: 1.5; }

  /* ── Buttons ── */
  .mp-btn {
    padding: 12px 20px; border-radius: 13px; font-size: 16px;
    font-weight: bold; cursor: pointer; transition: all 0.18s;
    font-family: inherit; border: 2px solid; width: 100%; margin-top: 4px;
  }
  .mp-create-btn {
    background: linear-gradient(135deg, #0077aa, #004d77);
    border-color: #00aacc; color: #ccf4ff;
    box-shadow: 0 4px 18px rgba(0,150,200,0.35);
  }
  .mp-create-btn:hover {
    background: linear-gradient(135deg, #00aadd, #0077aa);
    box-shadow: 0 6px 28px rgba(0,180,240,0.55); transform: translateY(-2px);
  }
  .mp-join-btn {
    background: linear-gradient(135deg, #005588, #003355);
    border-color: #0088bb; color: #aaddff;
    box-shadow: 0 4px 18px rgba(0,120,180,0.3);
  }
  .mp-join-btn:hover {
    background: linear-gradient(135deg, #0077bb, #005588);
    box-shadow: 0 6px 28px rgba(0,150,220,0.5); transform: translateY(-2px);
  }
  .mp-leave-btn {
    background: rgba(80,20,20,0.6); border-color: #883333; color: #ffaaaa;
    margin-top: 8px;
  }
  .mp-leave-btn:hover { background: rgba(120,30,30,0.8); border-color: #cc4444; }

  /* ── In-world view ── */
  .mp-in-world { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .mp-world-badge {
    font-size: 20px; font-weight: bold; color: #ccf4ff;
    text-align: center;
  }
  .mp-code-display {
    font-size: 44px; font-weight: bold; color: #00eeff;
    letter-spacing: 8px; text-shadow: 0 0 25px rgba(0,240,255,0.6);
    background: rgba(0,30,60,0.6); border-radius: 16px;
    padding: 12px 24px; border: 2px solid rgba(0,200,240,0.3);
  }
  .mp-share-hint { font-size: 13px; color: #3388aa; text-align: center; }
  .mp-online-count {
    font-size: 14px; color: #88ddff;
    background: rgba(0,40,70,0.6); border-radius: 10px;
    padding: 8px 16px; border: 1px solid rgba(0,150,200,0.3);
  }

  /* ── No RTDB warning ── */
  .mp-no-rtdb {
    margin-top: 14px; padding: 14px 16px;
    background: rgba(80,30,0,0.4); border: 1.5px solid #885500;
    border-radius: 12px; font-size: 12px; color: #ffcc88; line-height: 1.7;
    text-align: center;
  }

  /* ── Status line ── */
  #mp-status {
    min-height: 18px; font-size: 13px; color: #88ddff;
    text-align: center; margin-top: 10px; line-height: 1.5;
  }

  /* ── Close button ── */
  #mp-close-btn {
    width: 100%; margin-top: 16px; padding: 11px;
    border: 1.5px solid #004455; border-radius: 12px;
    background: #010e1a; color: #336677; font-size: 14px;
    cursor: pointer; transition: all 0.18s; font-weight: bold; font-family: inherit;
  }
  #mp-close-btn:hover {
    background: linear-gradient(135deg, #00aadd, #007799);
    color: #fff; border-color: #00ccee;
  }

/* ══════════════════════════════════════════════
   MAP EDITOR
   ══════════════════════════════════════════════ */
#map-editor-btn {
  background: linear-gradient(135deg, #005522, #008833);
  color: #aaffcc; border: 2px solid #33cc66;
  padding: 13px 30px; font-size: 17px; font-weight: bold;
  border-radius: 12px; cursor: pointer; width: 100%;
  margin-bottom: 10px; transition: all 0.15s;
  box-shadow: 0 3px 14px rgba(0,180,80,0.4);
}
#map-editor-btn:hover {
  background: linear-gradient(135deg, #007733, #00bb44);
  color: #ffffff; box-shadow: 0 5px 22px rgba(0,220,100,0.5);
  transform: translateY(-2px);
}

/* Full-screen overlay */
#map-editor-ui {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,8,20,0.97);
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; pointer-events: all;
  padding: 16px;
}

#me-panel {
  width: 100%; max-width: 980px;
  background: linear-gradient(160deg, #00172a 0%, #000e1e 100%);
  border: 2px solid rgba(0,180,100,0.4);
  border-radius: 20px; padding: 22px;
  box-shadow: 0 0 60px rgba(0,180,80,0.2);
  display: flex; flex-direction: column; gap: 18px;
  position: relative; /* needed for the slot-chooser overlay */
}

#me-header {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(0,180,100,0.25);
  padding-bottom: 14px; position: relative;
}
#me-title {
  font-size: 26px; font-weight: bold; color: #ffffff;
  text-shadow: 0 0 20px rgba(0,220,100,0.6);
}
#me-subtitle {
  font-size: 11px; color: #33cc66; letter-spacing: 1.5px;
  font-weight: bold; margin-top: 2px;
}
#me-close-btn {
  position: absolute; right: 0; top: 0;
  background: rgba(255,50,50,0.15); border: 1px solid rgba(255,80,80,0.4);
  color: #ff8888; border-radius: 8px; padding: 6px 13px;
  font-size: 16px; cursor: pointer; transition: all 0.15s;
}
#me-close-btn:hover { background: rgba(255,50,50,0.35); color: #fff; }

#me-body {
  display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
}

/* ── Sidebar ── */
#me-sidebar {
  flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px;
}
.me-section-title {
  font-size: 11px; font-weight: bold; color: #33cc66;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 2px;
}
#editor-palette {
  display: flex; flex-direction: column; gap: 5px;
}
.editor-tool-btn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 8px 11px; cursor: pointer;
  color: #cce8ff; font-family: inherit; transition: all 0.13s;
  text-align: left;
}
.editor-tool-btn:hover { background: rgba(0,200,100,0.12); border-color: rgba(0,200,100,0.4); }
.editor-tool-btn.active {
  background: rgba(0,200,100,0.22);
  border-color: #33cc66; color: #ffffff;
  box-shadow: 0 0 10px rgba(0,200,100,0.3);
}
.etb-emoji { font-size: 18px; }
.etb-label { font-size: 13px; font-weight: bold; }

/* Delete tool — red accent, separated visually from building tools */
.editor-tool-btn.etb-delete {
  margin-top: 8px;
  border-color: rgba(255,80,80,0.35);
  color: #ff9999;
}
.editor-tool-btn.etb-delete:hover { background: rgba(255,60,60,0.15); border-color: rgba(255,80,80,0.7); color: #ffcccc; }
.editor-tool-btn.etb-delete.active {
  background: rgba(255,60,60,0.22);
  border-color: #ff4444; color: #ffffff;
  box-shadow: 0 0 10px rgba(255,60,60,0.4);
}

.me-hint {
  font-size: 12px; color: #557799; line-height: 1.5; margin-top: 4px;
}

#editor-map-name {
  width: 100%; padding: 9px 12px;
  background: rgba(0,30,60,0.7); border: 1.5px solid rgba(0,180,100,0.35);
  border-radius: 9px; color: #ccffee; font-size: 14px;
  font-family: inherit; outline: none; transition: border-color 0.15s;
}
#editor-map-name:focus { border-color: #33cc66; }
#editor-map-name::placeholder { color: #446655; }

#editor-count {
  font-size: 12px; color: #33cc66; font-weight: bold; min-height: 18px;
}

#me-actions { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.me-action-btn {
  padding: 10px; border-radius: 10px; font-size: 14px; font-weight: bold;
  cursor: pointer; border: 2px solid; font-family: inherit; transition: all 0.15s;
}
.me-play {
  background: linear-gradient(135deg, #0088ee, #0055cc);
  color: #fff; border-color: #44aaff;
  box-shadow: 0 3px 12px rgba(0,120,255,0.4);
}
.me-play:hover { background: linear-gradient(135deg, #22aaff, #0077dd); transform: translateY(-1px); }
.me-post {
  background: linear-gradient(135deg, #007733, #005522);
  color: #aaffcc; border-color: #33cc66;
  box-shadow: 0 3px 12px rgba(0,200,80,0.3);
}
.me-post:hover { background: linear-gradient(135deg, #00aa44, #007733); color: #fff; }
.me-post:disabled { opacity: 0.5; cursor: default; }
.me-clear {
  background: rgba(255,60,60,0.1); color: #ff8888; border-color: rgba(255,80,80,0.35);
}
.me-clear:hover { background: rgba(255,60,60,0.22); color: #fff; }
.me-save {
  background: linear-gradient(135deg, #664400, #885500);
  color: #ffdd88; border-color: #ffaa33;
  box-shadow: 0 3px 12px rgba(220,150,0,0.25);
}
.me-save:hover { background: linear-gradient(135deg, #885500, #aa7700); color: #fff; transform: translateY(-1px); }
.me-post-status { font-size: 12px; color: #44ffaa; min-height: 16px; line-height: 1.5; }

/* ── Move toggle button ── */
#editor-move-toggle { font-family: inherit; }
#editor-move-toggle:hover { opacity: 0.85; }
#editor-move-toggle.move-locked {
  background: rgba(220,60,60,0.18) !important;
  border-color: rgba(220,80,80,0.5) !important;
  color: #ffaaaa !important;
}

/* ── Gallery tabs ── */
#me-tabs {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.me-tab {
  padding: 8px 20px; border-radius: 9px; font-size: 13px; font-weight: bold;
  cursor: pointer; border: 1.5px solid rgba(0,180,100,0.3);
  background: rgba(0,30,60,0.4); color: #557799;
  font-family: inherit; transition: all 0.13s;
}
.me-tab:hover { border-color: rgba(0,180,100,0.6); color: #aaffcc; }
.me-tab.active {
  background: rgba(0,100,50,0.35); border-color: #33cc66;
  color: #ccffee; box-shadow: 0 0 12px rgba(0,200,80,0.2);
}
#me-gallery-mine, #me-gallery-community {
  display: flex; flex-wrap: wrap; gap: 10px; min-height: 60px;
}

/* ── My Maps cards ── */
.my-map-card {
  background: rgba(10,25,60,0.75); border: 1.5px solid rgba(80,160,255,0.22);
  border-radius: 13px; padding: 12px 14px; min-width: 188px; max-width: 240px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.my-map-card:hover {
  border-color: rgba(80,180,255,0.55);
  box-shadow: 0 0 14px rgba(60,140,255,0.15);
}
.my-map-card-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
}
.my-map-card-name { font-size: 14px; font-weight: bold; color: #aaddff; }
.my-map-card-info { font-size: 11px; color: #4488bb; white-space: nowrap; }
.my-map-card-date { font-size: 11px; color: #335566; }
.my-map-card-btns { display: flex; gap: 6px; margin-top: 5px; }
.my-map-load-btn {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  background: linear-gradient(135deg, #002244, #003366);
  border: 1.5px solid #4488cc; color: #aaddff;
  font-size: 12px; font-weight: bold; cursor: pointer;
  font-family: inherit; transition: all 0.13s;
}
.my-map-load-btn:hover { background: linear-gradient(135deg, #003366, #0055aa); color: #fff; }
.my-map-del-btn {
  padding: 7px 10px; border-radius: 8px;
  background: rgba(255,50,50,0.1); border: 1.5px solid rgba(255,80,80,0.35);
  color: #ff8888; font-size: 13px; cursor: pointer;
  font-family: inherit; transition: all 0.13s;
}
.my-map-del-btn:hover { background: rgba(255,50,50,0.28); color: #fff; }

/* ── Custom-map save-file chooser ── */
#custom-slot-chooser {
  position: absolute; inset: 0;
  background: rgba(0,8,20,0.97);
  border-radius: 20px;           /* matches #me-panel */
  z-index: 10;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 20px; overflow-y: auto;
}
#csc-panel {
  width: 100%; max-width: 780px;
  display: flex; flex-direction: column; gap: 18px;
}
#csc-back {
  align-self: flex-start;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  color: #aaddff; border-radius: 9px; padding: 7px 18px;
  font-size: 14px; font-family: inherit; cursor: pointer; transition: all 0.13s;
}
#csc-back:hover { background: rgba(255,255,255,0.14); color: #fff; }
#csc-title {
  font-size: 26px; font-weight: bold; color: #fff;
  text-shadow: 0 0 24px rgba(0,220,100,0.5);
}
#csc-subtitle {
  font-size: 13px; color: #557799; line-height: 1.6; margin-top: -8px;
}
#csc-subtitle b { color: #ffdd66; }
#csc-map-badge {
  background: rgba(0,40,80,0.7); border: 1.5px solid rgba(0,180,100,0.35);
  border-radius: 12px; padding: 12px 18px;
  font-size: 15px; color: #aaffcc; display: flex; align-items: center; gap: 10px;
}
#csc-slots {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.csc-slot {
  flex: 1; min-width: 200px; max-width: 260px;
  background: rgba(0,25,55,0.8); border: 2px solid rgba(0,180,100,0.25);
  border-radius: 14px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.csc-slot:hover {
  border-color: rgba(0,220,110,0.7);
  box-shadow: 0 0 20px rgba(0,200,80,0.2);
}
.csc-slot-empty {
  border-color: rgba(255,255,255,0.1);
}
.csc-slot-empty:hover { border-color: rgba(100,220,255,0.5); }
.csc-slot-num { font-size: 15px; font-weight: bold; color: #ccffee; }
.csc-slot-level { font-size: 13px; color: #88ccaa; }
.csc-slot-stats { font-size: 12px; color: #447755; }
.csc-slot-empty-label { font-size: 13px; color: #335555; font-style: italic; }
.csc-has-map {
  font-size: 11px; color: #ffaa44; background: rgba(255,150,0,0.1);
  border: 1px solid rgba(255,150,0,0.25); border-radius: 6px;
  padding: 3px 8px; margin-top: 2px;
}
.csc-slot-btn {
  margin-top: 8px; padding: 10px; border-radius: 10px;
  background: linear-gradient(135deg, #005522, #008833);
  border: 2px solid #33cc66; color: #aaffcc;
  font-size: 14px; font-weight: bold; cursor: pointer;
  font-family: inherit; transition: all 0.13s;
}
.csc-slot-btn:hover { background: linear-gradient(135deg, #008844, #00bb55); color: #fff; }
.csc-slot-empty .csc-slot-btn {
  background: linear-gradient(135deg, #002244, #003366);
  border-color: #4488cc; color: #aaddff;
}
.csc-slot-empty .csc-slot-btn:hover {
  background: linear-gradient(135deg, #003366, #0055aa); color: #fff;
}

/* Canvas ── */
#me-canvas-wrap {
  flex: 1; min-width: 300px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
#editor-canvas {
  border-radius: 14px;
  border: 2px solid rgba(0,180,100,0.4);
  cursor: crosshair;
  width: 100%; max-width: 480px;
  box-shadow: 0 0 30px rgba(0,180,80,0.15);
}
#me-canvas-label {
  font-size: 12px; color: #446655; text-align: center;
}

/* ── Community maps ── */
#me-community {
  border-top: 1px solid rgba(0,180,100,0.2);
  padding-top: 16px; display: flex; flex-direction: column; gap: 10px;
}
#community-maps-list {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.cm-msg { color: #446655; font-size: 13px; padding: 10px 0; }
.cm-card {
  background: rgba(0,30,60,0.6); border: 1px solid rgba(0,180,100,0.25);
  border-radius: 12px; padding: 12px 14px; min-width: 200px; max-width: 260px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color 0.15s;
}
.cm-card:hover { border-color: rgba(0,200,100,0.5); }
.cm-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cm-card-name { font-size: 14px; font-weight: bold; color: #ccffee; }
.cm-card-info { font-size: 11px; color: #33cc66; white-space: nowrap; }
.cm-card-author { font-size: 12px; color: #557799; }
.cm-play-btn {
  margin-top: 6px; padding: 7px 12px; border-radius: 8px;
  background: linear-gradient(135deg, #003322, #005533);
  border: 1.5px solid #33cc66; color: #aaffcc;
  font-size: 13px; font-weight: bold; cursor: pointer;
  font-family: inherit; transition: all 0.13s;
}
.cm-play-btn:hover {
  background: linear-gradient(135deg, #005533, #008844);
  color: #ffffff;
}

/* ── FLOATING DAMAGE NUMBERS ── */
.dmg-num {
  position: absolute;
  font-size: 22px; font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 200; white-space: nowrap;
  animation: dmgFloat 1.1s ease-out forwards;
}
@keyframes dmgFloat {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  15%  { opacity: 1; transform: translate(-50%, -80%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.8); }
}

/* ══════════════════════════════════════════════════════
   JUKEBOX / MUSIC SYSTEM
══════════════════════════════════════════════════════ */

/* Floating HUD button — bottom-right corner */
#music-hud-btn {
  position: fixed; bottom: 18px; right: 18px; z-index: 300;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 20, 40, 0.88);
  border: 2px solid #0099cc;
  color: #fff; font-size: 20px;
  cursor: pointer; pointer-events: all;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px rgba(0,150,220,0.4);
  transition: transform 0.18s, box-shadow 0.18s;
}
#music-hud-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 26px rgba(0,200,255,0.6);
}

/* ── WAYPOINTS HUD BUTTON — always visible ── */
#hud-waypoints {
  position: fixed; bottom: 74px; right: 18px; z-index: 300;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0, 20, 40, 0.88);
  border: 2px solid #00aa55;
  font-size: 20px;
  cursor: pointer; pointer-events: all;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(0,180,80,0.35);
  transition: transform 0.18s, box-shadow 0.18s;
}
#hud-waypoints:hover {
  transform: scale(1.15);
  box-shadow: 0 0 22px rgba(0,220,100,0.55);
}

/* Overlay backdrop */
#music-ui {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 220; pointer-events: all;
}

/* Panel container */
#music-panel {
  width: 520px; max-width: 96vw;
  background: linear-gradient(160deg, #040d16 0%, #081c30 70%, #04101a 100%);
  border: 2px solid #0099cc; border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,150,255,0.25), 0 8px 40px rgba(0,0,0,0.7);
  animation: musicSlideIn 0.28s ease-out;
}
@keyframes musicSlideIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}

/* Header */
#music-header {
  background: linear-gradient(135deg, #001828, #003055);
  border-bottom: 2px solid #0099cc;
  padding: 16px 20px 12px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
#music-logo {
  font-size: 22px; font-weight: 900; color: #00ddff;
  letter-spacing: 3px; text-shadow: 0 0 18px rgba(0,200,255,0.6);
}
#music-subtitle {
  font-size: 10px; color: #6699bb; letter-spacing: 3px;
  font-weight: bold; text-transform: uppercase;
}
#music-close-x {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid #224455; border-radius: 8px;
  color: #446688; font-size: 14px; padding: 4px 9px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
#music-close-x:hover { background: #cc2200; color: #fff; border-color: #cc2200; }

/* Track list */
#music-track-list {
  padding: 14px 18px; display: flex; flex-direction: column; gap: 10px;
  max-height: 52vh; overflow-y: auto;
}
#music-track-list::-webkit-scrollbar { width: 5px; }
#music-track-list::-webkit-scrollbar-thumb { background: #0055aa; border-radius: 3px; }

.music-track-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,30,55,0.7); border: 1.5px solid #0d2a40;
  border-radius: 12px; padding: 10px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.music-track-row:hover { border-color: #0077bb; }
.mtr-active {
  background: rgba(0, 60, 100, 0.65) !important;
  border-color: #00aaff !important;
  box-shadow: 0 0 16px rgba(0,170,255,0.2);
}
.mtr-locked { opacity: 0.8; }

.mtr-icon { font-size: 26px; width: 36px; text-align: center; flex-shrink: 0; }

.mtr-info { flex: 1; min-width: 0; }
.mtr-name {
  font-size: 14px; font-weight: bold; color: #cce8ff;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.mtr-desc { font-size: 11px; color: #6699aa; margin-top: 3px; line-height: 1.4; }

.mtr-playing-badge {
  font-size: 9px; background: #00aaff; color: #000;
  padding: 2px 7px; border-radius: 20px; font-weight: 900;
  letter-spacing: 0.5px; white-space: nowrap;
  animation: badgePulse 1.2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.mtr-price-badge {
  font-size: 10px; background: #225533; color: #88ddaa;
  padding: 2px 7px; border-radius: 20px; font-weight: bold;
}

/* Track action buttons */
.mtr-action { flex-shrink: 0; }
.mtr-btn {
  padding: 7px 14px; border-radius: 10px; font-size: 12px;
  font-weight: bold; cursor: pointer; border: 1.5px solid;
  font-family: inherit; transition: all 0.16s; white-space: nowrap;
}
.mtr-btn-play {
  background: #002244; color: #00aaff; border-color: #0066cc;
}
.mtr-btn-play:hover { background: #004488; box-shadow: 0 0 12px rgba(0,170,255,0.35); }
.mtr-btn-on {
  background: #003355; color: #00ccff; border-color: #00aaff; cursor: default;
}
.mtr-btn-buy {
  background: linear-gradient(135deg, #112200, #224400);
  color: #88dd44; border-color: #336600;
}
.mtr-btn-buy:hover { background: linear-gradient(135deg, #224400, #336600); box-shadow: 0 0 12px rgba(80,200,0,0.3); }

/* Volume controls */
#music-controls {
  padding: 10px 18px 4px;
  border-top: 1px solid #0d2a40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#music-mute-btn {
  background: #001828; color: #6699bb; border: 1.5px solid #1a3a55;
  border-radius: 10px; padding: 6px 14px; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all 0.15s; font-weight: bold;
}
#music-mute-btn:hover { background: #003355; color: #00ccff; border-color: #0066aa; }

#music-vol-row {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
#music-vol-icon { font-size: 14px; }
#music-vol-label { font-size: 12px; color: #6699aa; min-width: 34px; text-align: right; }
#music-vol-slider {
  flex: 1; height: 4px; accent-color: #00aaff; cursor: pointer;
}

/* Close button */
#music-close-btn {
  display: block; width: calc(100% - 36px); margin: 10px 18px 16px;
  padding: 11px; border: 1.5px solid #0d2a40; border-radius: 12px;
  background: #020c16; color: #336688; font-size: 13px;
  cursor: pointer; font-weight: bold; font-family: inherit; transition: all 0.18s;
}
#music-close-btn:hover { background: #003055; color: #00aaff; border-color: #0066aa; }

/* ══════════════════════════════════════════
   BLACK MARKET UI
══════════════════════════════════════════ */
#bm-hint {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(60, 0, 90, 0.92); color: #dd88ff;
  border: 2px solid #8800cc; border-radius: 12px;
  padding: 10px 20px; font-size: 14px; font-weight: bold;
  pointer-events: auto; cursor: pointer; z-index: 500;
  animation: bmPulse 1.4s ease-in-out infinite;
}
@keyframes bmPulse {
  0%,100% { box-shadow: 0 0 8px #8800cc; }
  50%      { box-shadow: 0 0 22px #cc44ff, 0 0 40px #660099; }
}

#bm-ui {
  position: fixed; inset: 0; background: rgba(10,0,20,0.88);
  display: none; align-items: center; justify-content: center; z-index: 1100;
  pointer-events: all;
}
#bm-panel {
  background: linear-gradient(160deg,#1a0030,#0d001e);
  border: 2px solid #8800cc; border-radius: 18px;
  width: min(520px, 95vw); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 40px #6600aa, 0 0 80px rgba(100,0,180,0.4);
  font-family: inherit; color: #eeddff;
}
#bm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 10px; border-bottom: 1px solid #440066;
}
#bm-title { font-size: 22px; font-weight: bold; color: #cc88ff; }
#bm-sub { font-size: 11px; color: #886699; padding: 6px 20px 0; font-style: italic; }
#bm-close-btn {
  background: none; border: 1.5px solid #660099; color: #cc88ff;
  border-radius: 8px; padding: 4px 12px; font-size: 16px;
  cursor: pointer; font-family: inherit;
}
#bm-close-btn:hover { background: #440066; }
#bm-content { padding: 14px 18px 18px; }
.bm-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.bm-item {
  flex: 1 1 140px; background: rgba(60,0,90,0.5);
  border: 1.5px solid #660099; border-radius: 12px;
  padding: 14px 12px; text-align: center; transition: border-color 0.15s;
}
.bm-item:hover { border-color: #cc44ff; }
.bm-item-done { opacity: 0.55; border-color: #440044; }
.bm-item-icon { font-size: 30px; margin-bottom: 6px; }
.bm-item-name { font-size: 13px; font-weight: bold; color: #eeddff; margin-bottom: 4px; }
.bm-item-desc { font-size: 10px; color: #aa88cc; margin-bottom: 8px; line-height: 1.4; }
.bm-item-price { font-size: 16px; font-weight: bold; color: #ffdd44; margin-bottom: 8px; }
.bm-btn {
  background: linear-gradient(135deg,#6600aa,#440077); color: #ffffff;
  border: 1.5px solid #aa44ff; border-radius: 10px;
  padding: 7px 16px; font-size: 13px; font-weight: bold;
  cursor: pointer; font-family: inherit; transition: all 0.15s;
  width: 100%;
}
.bm-btn:hover:not(:disabled) { background: linear-gradient(135deg,#8800cc,#660099); box-shadow: 0 0 10px #aa44ff; }
.bm-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════
   TEAM MAKER — HUD badge + full panel
   ═══════════════════════════════════════════════════════════════ */

/* ── HUD badge (top-left, below level box) ─── */
#team-hud {
  display: none;
  background: rgba(0, 20, 50, 0.88);
  border: 1.5px solid #44aaff; border-radius: 14px;
  padding: 7px 14px; color: #88ccff; font-size: 13px;
  pointer-events: all; cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(68,170,255,0.25);
  margin-top: 6px; text-align: center; font-weight: bold;
}
#team-hud:hover { border-color: #88ccff; box-shadow: 0 0 26px rgba(68,170,255,0.45); }
.team-hud-count {
  font-size: 11px; color: #44aaff; font-weight: normal;
  margin-left: 6px;
}

/* ── Full panel overlay ─── */
#team-panel {
  position: fixed; inset: 0;
  background: rgba(0, 10, 28, 0.82);
  display: none; align-items: center; justify-content: center;
  pointer-events: all; backdrop-filter: blur(3px);
  z-index: 1500;
}
.team-inner {
  position: relative;
  background: linear-gradient(160deg, #041428 0%, #021020 60%, #010a18 100%);
  border: 2px solid #1e4488; border-radius: 22px;
  padding: 30px 32px 26px; color: white;
  min-width: 340px; max-width: 460px; width: 92vw;
  box-shadow: 0 0 60px rgba(30,100,200,0.35), inset 0 1px 0 rgba(68,170,255,0.12);
  max-height: 88vh; overflow-y: auto;
}
.team-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: 1px solid #1e3a66; border-radius: 8px;
  color: #3366aa; font-size: 15px; padding: 4px 9px;
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.team-close:hover { background: rgba(30,60,120,0.5); color: #88ccff; border-color: #4466aa; }

.team-title {
  font-size: 24px; font-weight: bold; color: #cce8ff;
  text-shadow: 0 0 18px rgba(68,160,255,0.55);
  margin-bottom: 6px; text-align: center;
}
.team-subtitle {
  font-size: 12px; color: #3a6080; text-align: center;
  margin-bottom: 20px; line-height: 1.5;
}

.team-section { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }

.team-label {
  font-size: 13px; font-weight: bold; color: #4488cc;
}
.team-label-small { font-size: 11px; color: #336699; }

.team-input {
  width: 100%; padding: 11px 14px; border-radius: 11px; font-size: 15px;
  background: rgba(0, 30, 60, 0.75); border: 1.5px solid #1e3a66;
  color: #cce8ff; font-family: inherit; outline: none;
  transition: border-color 0.18s; box-sizing: border-box;
}
.team-input:focus { border-color: #44aaff; box-shadow: 0 0 10px rgba(68,170,255,0.18); }
.team-code-input {
  font-size: 28px; font-weight: bold; letter-spacing: 8px;
  text-align: center; padding: 11px 8px;
}

.team-divider {
  text-align: center; color: #244466; font-size: 12px;
  margin: 14px 0; letter-spacing: 1px;
}

/* ── Buttons ─── */
.team-btn {
  padding: 11px 18px; border-radius: 12px; font-size: 15px;
  font-weight: bold; cursor: pointer; transition: all 0.18s;
  font-family: inherit; border: 2px solid; width: 100%; margin-top: 2px;
}
.team-btn-primary {
  background: linear-gradient(135deg, #1a4488, #0d2255);
  border-color: #44aaff; color: #cce8ff;
  box-shadow: 0 4px 16px rgba(68,150,220,0.35);
}
.team-btn-primary:hover {
  background: linear-gradient(135deg, #2255aa, #1a4488);
  box-shadow: 0 6px 24px rgba(68,180,255,0.55); transform: translateY(-2px);
}
.team-btn-join {
  background: linear-gradient(135deg, #115577, #0a3355);
  border-color: #2288bb; color: #99ddff;
  box-shadow: 0 4px 16px rgba(0,120,180,0.3);
}
.team-btn-join:hover {
  background: linear-gradient(135deg, #1a77aa, #115577);
  box-shadow: 0 6px 22px rgba(0,150,220,0.5); transform: translateY(-2px);
}
.team-btn-danger {
  background: rgba(80,20,20,0.6); border-color: #883333; color: #ffaaaa;
}
.team-btn-danger:hover { background: rgba(120,30,30,0.8); border-color: #cc4444; }
.team-btn-leave {
  background: rgba(20,40,80,0.6); border-color: #334488; color: #aabbdd;
}
.team-btn-leave:hover { background: rgba(30,60,120,0.7); border-color: #5577aa; }

.team-status-msg {
  font-size: 13px; text-align: center; padding: 8px 12px;
  border-radius: 10px; background: rgba(0,30,60,0.5);
  border: 1px solid #1e3a66; color: #88bbdd; margin-top: 6px;
}

/* ── In-team member list ─── */
.team-code-bar {
  font-size: 13px; color: #3a6080; text-align: center;
  margin-bottom: 14px; letter-spacing: 1px;
}
.team-code-bar b { color: #44aaff; letter-spacing: 4px; font-size: 16px; }
.team-count-badge {
  display: inline-block; margin-left: 8px;
  font-size: 11px; color: #2a5070; background: rgba(0,30,60,0.6);
  border-radius: 8px; padding: 2px 8px;
}

.team-members { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }

.team-row {
  display: flex; align-items: center; gap: 9px;
  background: rgba(0,25,55,0.55); border-radius: 12px;
  padding: 9px 12px; border: 1px solid #1a3060;
  transition: border-color 0.15s;
}
.team-row:hover { border-color: #2a5090; }
.team-row-me { border-color: #2255aa; background: rgba(10,30,70,0.7); }

.team-dot { font-size: 12px; flex-shrink: 0; }
.team-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,255,255,0.3); border: 1.5px solid rgba(255,255,255,0.15);
}
.team-row-info { flex: 1; min-width: 0; }
.team-row-nick {
  font-size: 14px; font-weight: bold; color: #cce8ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.team-row-nick small { font-weight: normal; color: #447799; font-size: 11px; }
.team-row-stat {
  font-size: 11px; color: #3a6080; display: block; margin-top: 1px;
}

.team-row-btns { display: flex; gap: 5px; flex-shrink: 0; }
.team-sm-btn {
  padding: 5px 10px; border-radius: 9px; font-size: 12px;
  font-weight: bold; cursor: pointer; transition: all 0.15s;
  font-family: inherit; border: 1.5px solid;
}
.team-join-btn {
  background: rgba(0,60,110,0.7); border-color: #2277aa; color: #88ccff;
}
.team-join-btn:hover { background: rgba(0,80,140,0.9); border-color: #44aaff; }
.team-ban-btn {
  background: rgba(60,10,10,0.7); border-color: #663333; color: #ff9999;
}
.team-ban-btn:hover { background: rgba(100,20,20,0.9); border-color: #cc4444; }

.team-empty {
  text-align: center; color: #2a5070; font-size: 13px;
  padding: 20px 10px; line-height: 1.6;
}
.team-empty b { color: #44aaff; letter-spacing: 3px; }

.arena-section-divider { font-size: 13px; color: #886644; border-top: 1px solid #333; padding-top: 10px; margin-top: 8px; margin-bottom: 6px; }

.team-footer { border-top: 1px solid #0d2244; padding-top: 14px; }

/* ── Library hint banner ───────────────────────────────────────────────────── */
#lib-hint {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(0,15,35,0.88); border: 2px solid #336688; border-radius: 10px;
  padding: 8px 20px; color: #88ccff; font-size: 15px; font-weight: bold;
  pointer-events: all; cursor: pointer; z-index: 60; white-space: nowrap;
  box-shadow: 0 0 16px rgba(51,102,136,0.4);
}
#lib-hint:hover, #lib-hint:active { background: rgba(20,50,80,0.95); }

/* ── Boss Bestiary ─────────────────────────────────────────────────────────── */
#bestiary-ui {
  display: none; position: absolute; inset: 0;
  background: rgba(0,5,20,0.96); z-index: 60;
  flex-direction: column; align-items: center;
  overflow-y: auto; padding: 16px 12px; pointer-events: all;
  /* safe area for phones with notches */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
#bst-header { display:flex; justify-content:space-between; align-items:center; width:100%; max-width:700px; margin-bottom:14px; }
#bst-header h2 { font-size:20px; color:#eef; }
#bst-header button {
  background:#1a3a55; border:1px solid #336688; color:#88bbdd;
  border-radius:8px; padding:8px 16px; font-size:15px; cursor:pointer;
  /* bigger tap target on mobile */
  min-width:44px; min-height:44px;
}
#bst-header button:hover, #bst-header button:active { background:#224466; }
#bst-content { width:100%; max-width:700px; }
.bst-section { margin-bottom:18px; }
.bst-cat { color:#88bbdd; font-size:12px; text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; border-bottom:1px solid #1a3a55; padding-bottom:4px; }
.bst-card { display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:7px; background:rgba(0,20,40,0.5); border:1px solid #1a3a55; border-radius:8px; }
.bst-locked { opacity:0.45; }
.bst-dot { width:32px; height:32px; border-radius:50%; flex-shrink:0; border:2px solid rgba(255,255,255,0.2); }
.bst-info { flex:1; min-width:0; }
.bst-name { font-size:13px; font-weight:bold; color:#eef; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bst-stats { font-size:11px; color:#88aacc; margin:2px 0; }
.bst-kills { font-size:11px; color:#aaffaa; }

@media (max-width: 480px) {
  #lib-hint { font-size:13px; padding:7px 14px; bottom:100px; }
  #bst-header h2 { font-size:17px; }
  .bst-name { font-size:12px; }
  .bst-stats, .bst-kills { font-size:10px; }
  .bst-dot { width:26px; height:26px; }
}

/* ── Custom emoji images ── */
.ow-e {
  width: 1.15em; height: 1.15em;
  display: inline-block;
  vertical-align: -0.22em;
  image-rendering: auto;
  pointer-events: none;
}
#intro-emoji .ow-e { width: 80px; height: 80px; vertical-align: middle; }

/* ══════════════════════════════════════════════════════════
   INTRO TUTORIAL OVERLAY
══════════════════════════════════════════════════════════ */
#intro-tutorial {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(160deg, #000c1a 0%, #001833 60%, #00050f 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: Arial, sans-serif;
  transition: opacity 0.42s ease;
  pointer-events: all;
}
#intro-content {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 20px 40px; max-width: 520px; width: 90vw;
  position: relative; z-index: 1;
}
.intro-slide-in { animation: introSlideIn 0.35s ease-out both; }
@keyframes introSlideIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
#intro-emoji {
  font-size: 80px; line-height: 1; margin-bottom: 22px;
  animation: introEmojiBob 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(68,170,255,0.6));
}
/* keep the twemoji <img> bobbing at the right size */
#intro-emoji img { width: 80px; height: 80px; }
@keyframes introEmojiBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-13px); }
}
#intro-title {
  font-size: 28px; font-weight: bold; color: #ffffff;
  margin-bottom: 14px; line-height: 1.25;
  text-shadow: 0 0 28px rgba(68,170,255,0.65);
}
#intro-desc {
  font-size: 16px; color: #aacce8; line-height: 1.65;
  margin-bottom: 18px;
}
#intro-extras { margin-bottom: 10px; min-height: 60px; }
/* Keyboard key visuals */
.intro-keys { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ikey-row   { display: flex; gap: 6px; justify-content: center; }
.ikey {
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.09); border: 2px solid rgba(255,255,255,0.28);
  border-bottom: 4px solid rgba(255,255,255,0.12);
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: bold; color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ikey-wide { width: 72px; }
.intro-mouse {
  background: rgba(255,255,255,0.09); border: 2px solid rgba(255,255,255,0.22);
  border-radius: 12px; padding: 10px 26px;
  font-size: 16px; color: #ddeeff;
}
/* Dive In button */
#intro-dive-btn {
  margin-top: 10px;
  padding: 14px 46px; font-size: 19px; font-weight: bold;
  background: linear-gradient(135deg, #005fcc, #0099ff);
  color: white; border: none; border-radius: 16px;
  cursor: pointer; font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  animation: introDivePulse 1.6s ease-in-out infinite;
}
#intro-dive-btn:hover { transform: scale(1.06); box-shadow: 0 0 48px rgba(0,150,255,0.7); }
@keyframes introDivePulse {
  0%, 100% { box-shadow: 0 0 30px rgba(0,150,255,0.4); }
  50%       { box-shadow: 0 0 55px rgba(0,150,255,0.75); }
}
/* Footer: progress dots + bar */
#intro-footer {
  position: absolute; bottom: 38px;
  left: 50%; transform: translateX(-50%);
  width: min(480px, 85vw);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#intro-dots { display: flex; gap: 8px; justify-content: center; }
.intro-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transition: background 0.3s, transform 0.3s;
}
.intro-dot.active { background: #44aaff; transform: scale(1.38); }
#intro-bar-wrap {
  width: 100%; height: 4px;
  background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden;
}
#intro-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0055cc, #44ccff);
  border-radius: 2px;
}
@keyframes introFill {
  from { width: 0%; }
  to   { width: 100%; }
}
/* Skip button */
#intro-skip-btn {
  position: absolute; top: 22px; right: 26px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.55); font-size: 13px; font-family: inherit;
  padding: 8px 18px; border-radius: 22px; cursor: pointer;
  transition: background 0.2s, color 0.2s; z-index: 2;
}
#intro-skip-btn:hover { background: rgba(255,255,255,0.16); color: white; }

/* ── Smooth panel open animations ──────────────────────────────────────────── */
@keyframes _owPanelIn {
  from { opacity: 0; transform: scale(0.93) translateY(22px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
@keyframes _owBackdropIn {
  from { background-color: rgba(0,0,0,0); }
  to   { background-color: inherit;       }
}
/* Panels/overlays animate in when JS changes display:none → visible */
#shop-panel, #arena-panel,
#food-truck-ui, #bestiary-ui, #potion-shop-ui, #pet-shop-ui,
#daily-quests-ui, #skin-tag {
  animation: _owPanelIn 0.32s cubic-bezier(0.22,1,0.36,1);
}
/* Also make bar fills extra smooth */
.boss-bar-fill  { transition: width 0.28s cubic-bezier(0.4,0,0.2,1) !important; }
#bob-hp-bar .bob-bar-fill { transition: width 0.28s cubic-bezier(0.4,0,0.2,1) !important; }
#level-xp-fill  { transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important; }