* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #f8d878; font-family: system-ui, sans-serif; cursor: crosshair; }
    #canvas { display: block; width: 100%; height: 100%; }

    /* ══════ HUD ══════ */
    #hud {
      position: fixed;
      top: 0; left: 0; right: 0;
      padding: 16px 16px 16px 16px;
      pointer-events: none;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    /* Reserve space on the right for the auth button (which has a dropdown) */
    #hud > .hud-panel:last-child { margin-right: 220px; }
    .hud-panel {
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.4);
      border-radius: 4px;
      padding: 10px 14px;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      backdrop-filter: blur(8px);
      pointer-events: auto;
    }
    .hud-label { color: #857f70; font-size: 9px; margin-bottom: 3px; }
    .hud-value { color: #f8d878; font-family: monospace; font-size: 14px; }

    /* ══════ CROSSHAIR ══════ */
    #crosshair {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 110px;
      height: 110px;
      pointer-events: none;
      z-index: 5;
    }
    #crosshair::before, #crosshair::after {
      content: '';
      position: absolute;
      background: rgba(248, 216, 120, 0.35);
      transition: background 0.15s;
    }
    #crosshair::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
    #crosshair::after { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
    #crosshair.locked-on::before, #crosshair.locked-on::after {
      background: rgba(255, 70, 70, 0.9);
      box-shadow: 0 0 10px rgba(255, 70, 70, 0.7);
    }
    .deadzone-ring {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 1px dashed rgba(248, 216, 120, 0.25);
      pointer-events: none;
      z-index: 5;
    }

    /* ══════ HORIZON ══════ */
    #horizon {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 200px;
      height: 200px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 4;
      opacity: 0.5;
    }
    .horizon-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(248, 216, 120, 0.3);
    }
    .horizon-bar {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 240px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(248, 216, 120, 0.8), transparent);
      transform-origin: center;
      transform: translate(-50%, -50%);
    }

    /* ══════ CONTROLS HINT ══════ */
    #controls-hint {
      position: fixed;
      bottom: 16px; left: 16px;
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 4px;
      padding: 12px 16px;
      font-size: 11px;
      line-height: 1.8;
      z-index: 10;
      backdrop-filter: blur(8px);
      max-width: 280px;
    }
    #controls-hint kbd {
      background: rgba(248, 216, 120, 0.15);
      border: 1px solid rgba(248, 216, 120, 0.4);
      padding: 1px 6px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 10px;
      color: #f8d878;
    }
    .control-title {
      color: #f8d878;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    /* ══════ TIME CONTROLS (play/pause/speed) ══════ */
    #time-controls {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
      background: rgba(10, 5, 24, 0.85);
      border: 1px solid rgba(248, 216, 120, 0.4);
      border-radius: 24px;
      padding: 4px;
      z-index: 10;
      backdrop-filter: blur(8px);
    }
    .time-btn {
      background: transparent;
      border: none;
      color: #857f70;
      padding: 8px 14px;
      border-radius: 20px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: all 0.2s;
      min-width: 44px;
    }
    .time-btn:hover { color: #f8d878; background: rgba(248, 216, 120, 0.1); }
    .time-btn.active { background: #f8d878; color: #0a0518; }
    .time-btn-auto {
      background: linear-gradient(135deg, #ff5e5b, #ff8c42);
      color: white;
      font-weight: 600;
      margin-left: 6px;
    }
    .time-btn-auto.active {
      background: linear-gradient(135deg, #00ccff, #5588ff);
    }

    /* ══════ WAYPOINT INDICATOR (in-world, follows tracked mission) ══════ */
    #waypoint-indicator {
      font-family: system-ui;
      filter: drop-shadow(0 0 14px rgba(94, 215, 255, 0.6));
    }
    .waypoint-ring {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      border: 2px dashed #5ed7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 6px;
      animation: wpRingPulse 1.6s ease-in-out infinite;
      background: radial-gradient(circle, rgba(94,215,255,0.12), transparent 70%);
    }
    .waypoint-arrow {
      color: #5ed7ff;
      font-size: 22px;
      font-weight: 700;
      transform-origin: center;
      transition: transform 0.05s linear;
    }
    @keyframes wpRingPulse {
      0%, 100% { transform: scale(1); border-color: #5ed7ff; }
      50% { transform: scale(1.15); border-color: rgba(94,215,255,0.5); }
    }
    .waypoint-label {
      text-align: center;
      padding: 4px 10px;
      background: rgba(10,5,24,0.85);
      border: 1px solid rgba(94,215,255,0.4);
      border-radius: 4px;
      backdrop-filter: blur(4px);
      max-width: 220px;
      overflow: hidden;
    }
    .waypoint-system,
    .waypoint-dist {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .waypoint-title {
      font-size: 9px;
      letter-spacing: 0.25em;
      color: #5ed7ff;
      font-weight: 700;
    }
    .waypoint-system {
      font-size: 11px;
      letter-spacing: 0.15em;
      color: #fff;
      margin-top: 2px;
    }
    .waypoint-dist {
      font-size: 9px;
      font-family: monospace;
      color: #857f70;
      margin-top: 1px;
      letter-spacing: 0.1em;
    }
    #waypoint-indicator.waypoint-offscreen .waypoint-label { display: none; }

    /* ══════ GALAXY MAP OVERLAY (opens on M key) ══════ */
    #galaxy-map {
      position: fixed;
      inset: 0;
      background: rgba(3, 1, 8, 0.95);
      z-index: 62;
      display: none;
      flex-direction: column;
      padding: 40px;
      backdrop-filter: blur(8px);
    }
    #galaxy-map.visible { display: flex; }
    .gmap-header {
      text-align: center;
      margin-bottom: 20px;
    }
    .gmap-title {
      font-size: 22px;
      letter-spacing: 0.3em;
      color: #f8d878;
      margin-bottom: 4px;
    }
    .gmap-sub {
      font-size: 11px;
      color: #857f70;
      letter-spacing: 0.15em;
    }
    .gmap-canvas-wrap {
      flex: 1;
      position: relative;
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 8px;
      overflow: hidden;
      background: rgba(3, 1, 8, 0.7);
    }
    .gmap-svg {
      width: 100%;
      height: 100%;
      display: block;
      cursor: grab;
    }
    .gmap-svg.gmap-panning { cursor: grabbing; }

    .gmap-zoom-controls {
      position: absolute;
      top: 14px;
      right: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: rgba(10, 5, 24, 0.85);
      border: 1px solid rgba(248, 216, 120, 0.25);
      border-radius: 6px;
      padding: 6px;
      backdrop-filter: blur(6px);
      z-index: 5;
    }
    .gmap-zoom-btn {
      width: 34px;
      height: 34px;
      background: rgba(248, 216, 120, 0.06);
      border: 1px solid rgba(248, 216, 120, 0.25);
      color: #f8d878;
      font-size: 16px;
      font-family: system-ui;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }
    .gmap-zoom-btn:hover {
      background: rgba(248, 216, 120, 0.18);
      border-color: #f8d878;
      transform: scale(1.05);
    }
    .gmap-zoom-btn.gmap-zoom-target {
      color: #5ed7ff;
      border-color: rgba(94, 215, 255, 0.35);
    }
    .gmap-zoom-btn.gmap-zoom-target:hover {
      background: rgba(94, 215, 255, 0.18);
      border-color: #5ed7ff;
    }
    .gmap-zoom-btn.gmap-zoom-target:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      transform: none;
    }
    .gmap-zoom-level {
      font-size: 10px;
      font-family: monospace;
      color: #857f70;
      text-align: center;
      letter-spacing: 0.1em;
      padding: 2px 0;
    }
    .gmap-footer {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .gmap-close {
      background: transparent;
      border: 1px solid #857f70;
      color: #857f70;
      padding: 8px 18px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.15em;
      cursor: pointer;
      transition: all 0.2s;
    }
    .gmap-close:hover { color: #f8d878; border-color: #f8d878; }
    .gmap-info {
      font-size: 11px;
      color: #857f70;
      letter-spacing: 0.1em;
    }

    /* ══════ WARP OVERLAY ══════ */
    #warp-overlay {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 40;
      opacity: 0;
      transition: opacity 0.4s;
      background: radial-gradient(ellipse at center, transparent 45%, rgba(60, 120, 180, 0.25) 100%);
    }
    #warp-overlay.active { opacity: 1; }

    #warp-label {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 22px;
      letter-spacing: 0.5em;
      color: rgba(180, 220, 255, 0.9);
      text-shadow: 0 0 20px rgba(100, 180, 255, 0.6);
      z-index: 41;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      font-family: 'Cinzel', 'Georgia', serif;
      font-weight: 300;
    }
    #warp-label.active { opacity: 1; }

    /* ══════ SYSTEM ARRIVED BANNER ══════ */
    #system-banner {
      position: fixed;
      top: 100px; left: 50%;
      transform: translate(-50%, -20px);
      opacity: 0;
      background: rgba(10, 5, 24, 0.95);
      border: 1px solid #f8d878;
      border-radius: 6px;
      padding: 20px 36px;
      text-align: center;
      z-index: 30;
      pointer-events: none;
      transition: all 0.5s;
      box-shadow: 0 0 60px rgba(248, 216, 120, 0.3);
    }
    #system-banner.visible {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    .banner-eyebrow {
      font-size: 10px;
      color: #f8d878;
      letter-spacing: 0.4em;
      margin-bottom: 6px;
    }
    .banner-name {
      font-family: 'Georgia', serif;
      font-size: 26px;
      color: #fff;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .banner-desc {
      font-size: 12px;
      color: #857f70;
      font-style: italic;
      letter-spacing: 0.05em;
    }

    /* ══════ INTRO ══════ */
    #intro {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      opacity: 1;
      transition: opacity 0.6s;
    }
    #intro.gone { opacity: 0; pointer-events: none; }
    .intro-card { text-align: center; padding: 40px; max-width: 540px; }
    .intro-eyebrow { color: #f8d878; font-size: 11px; letter-spacing: 0.4em; margin-bottom: 12px; }
    .intro-title { font-size: 28px; color: #fff; letter-spacing: 0.1em; margin-bottom: 24px; font-family: 'Georgia', serif; }
    .intro-text { color: #ccc; font-size: 14px; line-height: 1.8; margin-bottom: 28px; }
    .intro-text kbd {
      background: rgba(248, 216, 120, 0.15);
      border: 1px solid rgba(248, 216, 120, 0.4);
      padding: 1px 7px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 11px;
      color: #f8d878;
    }
    .intro-btn {
      background: transparent;
      border: 1px solid #f8d878;
      color: #f8d878;
      padding: 12px 32px;
      font-family: inherit;
      font-size: 13px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }
    .intro-btn:hover { background: #f8d878; color: #0a0518; }

    /* ══════ AUTO MODE OVERLAY (cinematic) ══════ */
    body.auto-mode #crosshair,
    body.auto-mode .deadzone-ring,
    body.auto-mode #horizon,
    body.auto-mode #controls-hint { opacity: 0; pointer-events: none; }

    body.auto-mode::before {
      content: '';
      position: fixed;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.5) 100%);
      pointer-events: none;
      z-index: 20;
    }

    #auto-subtitle {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Georgia', serif;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      max-width: 80%;
      z-index: 25;
      text-shadow: 0 2px 10px rgba(0,0,0,0.8);
      letter-spacing: 0.05em;
      opacity: 0;
      transition: opacity 0.5s;
      pointer-events: none;
    }
    #auto-subtitle.visible { opacity: 1; }

    /* ══════ COMBAT HUD ══════ */
    #combat-hud {
      position: fixed;
      top: 50%;
      right: 16px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
      pointer-events: none;
    }
    .combat-bar-wrap {
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 4px;
      padding: 8px 12px;
      min-width: 180px;
      backdrop-filter: blur(8px);
    }
    .combat-bar-label {
      font-size: 9px;
      color: #857f70;
      letter-spacing: 0.3em;
      margin-bottom: 4px;
    }
    .combat-bar {
      width: 100%;
      height: 6px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 2px;
    }
    .combat-bar-fill {
      height: 100%;
      transition: width 0.3s;
      border-radius: 3px;
    }
    .combat-bar-hp {
      background: linear-gradient(90deg, #ff4444, #ff8866);
      box-shadow: 0 0 10px rgba(255, 70, 70, 0.5);
    }
    .combat-bar-shield {
      background: linear-gradient(90deg, #44aaff, #88ccff);
      box-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
    }
    .combat-bar-value {
      font-family: monospace;
      font-size: 11px;
      color: #f8d878;
      text-align: right;
    }
    .combat-credits {
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.5);
      border-radius: 4px;
      padding: 10px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      backdrop-filter: blur(8px);
    }
    .credits-label {
      font-size: 10px;
      color: #857f70;
      letter-spacing: 0.3em;
    }
    .credits-value {
      font-family: monospace;
      font-size: 16px;
      color: #f8d878;
      font-weight: 500;
    }
    .hud-rep {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 4px 6px 0;
      font-family: monospace;
      font-size: 10px;
      letter-spacing: 0.05em;
    }
    .hud-rep-chip {
      padding: 2px 7px;
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid currentColor;
    }

    #damage-flash {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 35;
      background: radial-gradient(ellipse at center, transparent 20%, rgba(255, 30, 30, 0.6) 100%);
      opacity: 0;
      transition: opacity 0.1s;
    }

    body.auto-mode #combat-hud { opacity: 0.4; }

    /* ══════ POINTER LOCK HINT ══════ */
    /* Transparent full-screen container; only the card is visible.
       pointer-events: none so clicks pass through to canvas (which re-locks)
       or HUD buttons (which open their menus). No blur — the HUD must stay
       legible and usable while the pointer is released. */
    #pointer-hint {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 45;
      pointer-events: none;
    }
    /* Hide hint overlay when any modal panel is open */
    body:has(#galaxy-map.visible) #pointer-hint,
    body:has(#mission-journal.visible) #pointer-hint,
    body:has(#entitlements-panel.visible) #pointer-hint,
    body:has(#story-panel.visible) #pointer-hint {
      display: none;
    }
    .pointer-hint-card {
      background: rgba(10, 5, 24, 0.95);
      border: 1px solid #f8d878;
      border-radius: 6px;
      padding: 20px 36px;
      text-align: center;
      box-shadow: 0 0 60px rgba(248, 216, 120, 0.25);
    }
    .pointer-hint-title {
      color: #f8d878;
      font-size: 14px;
      letter-spacing: 0.3em;
      margin-bottom: 6px;
    }
    .pointer-hint-sub {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.15em;
    }

    /* ══════ SAVE INDICATOR ══════ */
    #save-indicator {
      position: fixed;
      top: 90px;
      right: 20px;
      background: rgba(10, 5, 24, 0.9);
      border: 1px solid rgba(136, 204, 136, 0.6);
      color: #88cc88;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 10px;
      letter-spacing: 0.2em;
      z-index: 15;
      opacity: 0;
      transform: translateX(10px);
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
      font-family: monospace;
    }
    #save-indicator.visible { opacity: 1; transform: translateX(0); }

    /* ══════ NEW GAME BUTTON ══════ */
    #new-game-btn {
      position: fixed;
      bottom: 16px;
      right: 16px;
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #857f70;
      padding: 10px 14px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
      backdrop-filter: blur(8px);
    }
    #new-game-btn:hover {
      color: #ff6666;
      border-color: #ff6666;
    }

    #mute-btn {
      position: fixed;
      bottom: 16px;
      right: 140px;
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #f8d878;
      padding: 10px 14px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
      backdrop-filter: blur(8px);
    }
    #mute-btn:hover {
      color: #fff;
      border-color: #f8d878;
    }

    /* ══════ DLC BUTTON ══════ */
    #dlc-btn {
      position: fixed;
      bottom: 16px;
      right: 220px;
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #f8d878;
      padding: 10px 14px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #dlc-btn:hover {
      color: #fff;
      border-color: #f8d878;
    }
    #dlc-count {
      background: #f8d878;
      color: #0a0518;
      padding: 1px 6px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: bold;
      display: none;
    }

    /* ══════ ENTITLEMENTS PANEL ══════ */
    #entitlements-panel {
      position: fixed;
      inset: 80px;
      background: rgba(3, 1, 8, 0.95);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 60;
      display: none;
      flex-direction: column;
      padding: 30px;
      backdrop-filter: blur(8px);
    }
    #entitlements-panel.visible { display: flex; }
    .ent-header { text-align: center; margin-bottom: 24px; }
    .ent-title { font-size: 18px; letter-spacing: 0.3em; color: #f8d878; }
    .ent-sub { font-size: 10px; color: #857f70; letter-spacing: 0.15em; margin-top: 4px; }
    #entitlement-list {
      flex: 1;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      align-content: start;
    }
    .ent-item {
      background: rgba(248, 216, 120, 0.05);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 6px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ent-badge {
      background: rgba(136, 204, 136, 0.15);
      border: 1px solid #88cc88;
      color: #88cc88;
      padding: 3px 8px;
      border-radius: 3px;
      font-size: 9px;
      letter-spacing: 0.2em;
      white-space: nowrap;
    }
    .ent-name {
      color: #fff;
      font-family: monospace;
      font-size: 13px;
    }
    .ent-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 60px 20px;
      color: #857f70;
    }
    .ent-empty-icon {
      font-size: 48px;
      color: rgba(248, 216, 120, 0.3);
      margin-bottom: 16px;
    }
    .ent-empty-title {
      font-size: 16px;
      color: #aaa;
      margin-bottom: 8px;
      letter-spacing: 0.1em;
    }
    .ent-empty-sub {
      font-size: 12px;
      line-height: 1.6;
    }
    /* ══════ STORE CLOSE BUTTON ══════ */
    .ent-close {
      position: absolute;
      top: 14px;
      right: 18px;
      background: transparent;
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #857f70;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
      z-index: 10;
    }
    .ent-close:hover {
      color: #ff6666;
      border-color: #ff6666;
      transform: rotate(90deg);
    }

    /* ══════ STORE TABS ══════ */
    .ent-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
      border-bottom: 1px solid rgba(248, 216, 120, 0.15);
      padding-bottom: 0;
    }
    .ent-tab {
      background: transparent;
      border: none;
      color: #857f70;
      padding: 10px 20px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ent-tab:hover { color: #f8d878; }
    .ent-tab.active {
      color: #f8d878;
      border-bottom-color: #f8d878;
    }
    .ent-tab-count {
      background: rgba(248, 216, 120, 0.15);
      color: #f8d878;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
      letter-spacing: 0.05em;
      min-width: 22px;
      text-align: center;
    }
    .ent-tab.active .ent-tab-count {
      background: #f8d878;
      color: #0a0518;
    }

    .ent-list {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 26px;
      padding: 4px 2px 20px;
    }
    .ent-list .ent-empty { margin: auto; }

    /* Store sections */
    .store-section { display: flex; flex-direction: column; gap: 14px; }
    .store-section-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      letter-spacing: 0.35em;
      color: #857f70;
      font-weight: 600;
    }
    .store-section-bar {
      width: 22px;
      height: 2px;
      background: linear-gradient(90deg, #f8d878, transparent);
      border-radius: 1px;
    }
    .store-section-title-cosm .store-section-bar {
      background: linear-gradient(90deg, #d866ff, transparent);
    }
    .store-section-count {
      margin-left: auto;
      font-family: monospace;
      font-size: 10px;
      color: #5a5048;
      letter-spacing: 0.15em;
    }

    /* ══════ HERO BUNDLE ══════ */
    .store-hero {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 22px;
      padding: 26px 28px;
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(248,216,120,0.18), rgba(216,102,255,0.10) 50%, rgba(94,215,255,0.10)),
        rgba(10, 5, 24, 0.7);
      border: 1px solid rgba(248, 216, 120, 0.45);
      overflow: hidden;
      box-shadow: 0 0 40px rgba(248,216,120,0.15), inset 0 0 60px rgba(0,0,0,0.35);
    }
    .store-hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 10% 20%, rgba(248,216,120,0.2), transparent 50%),
        radial-gradient(ellipse at 90% 90%, rgba(255,122,213,0.15), transparent 55%);
      pointer-events: none;
    }
    .store-hero-icon {
      position: relative;
      align-self: center;
      width: 110px;
      height: 110px;
      font-size: 64px;
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--accent);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(248,216,120,0.25), transparent 70%);
      text-shadow: 0 0 24px var(--accent);
      filter: drop-shadow(0 0 18px rgba(248,216,120,0.5));
      animation: storeHeroSpin 32s linear infinite;
    }
    @keyframes storeHeroSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    .store-hero-body { position: relative; display: flex; flex-direction: column; gap: 6px; }
    .store-hero-badge {
      align-self: flex-start;
      background: linear-gradient(135deg, #ff7ad5, #f8d878);
      color: #0a0518;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 10px;
      letter-spacing: 0.25em;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(255,122,213,0.5);
    }
    .store-hero-eyebrow {
      font-size: 10px;
      letter-spacing: 0.3em;
      color: #857f70;
      font-weight: 600;
      margin-top: 4px;
    }
    .store-hero-name {
      font-size: 28px;
      color: #fff8d0;
      font-family: 'Georgia', serif;
      letter-spacing: 0.03em;
      text-shadow: 0 0 16px rgba(248,216,120,0.4);
    }
    .store-hero-tagline {
      font-size: 13px;
      color: var(--accent);
      font-style: italic;
      letter-spacing: 0.05em;
    }
    .store-hero-desc {
      font-size: 13px;
      color: #cfc7b0;
      line-height: 1.5;
      max-width: 520px;
    }
    .store-hero-bullets {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
    }
    .store-hero-bullet {
      font-size: 10px;
      font-family: monospace;
      color: #cfc7b0;
      padding: 3px 10px;
      background: rgba(248,216,120,0.08);
      border: 1px solid rgba(248,216,120,0.2);
      border-radius: 12px;
      letter-spacing: 0.08em;
    }
    .store-hero-cta {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 8px;
      min-width: 180px;
    }
    .store-hero-price {
      font-size: 34px;
      font-family: 'Georgia', serif;
      color: #f8d878;
      font-weight: 700;
      text-shadow: 0 0 18px rgba(248,216,120,0.45);
    }
    .store-hero-price-sub {
      font-size: 9px;
      color: #857f70;
      letter-spacing: 0.2em;
      margin-top: -4px;
    }

    /* ══════ EPILOGUE GRID (2 columns) ══════ */
    .store-epi-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    @media (max-width: 900px) {
      .store-epi-grid { grid-template-columns: 1fr; }
      .store-hero { grid-template-columns: 1fr; text-align: center; }
      .store-hero-cta { align-items: center; }
      .store-hero-icon { margin: 0 auto; }
    }
    .store-epi {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 18px;
      padding: 20px 22px;
      background:
        linear-gradient(160deg, rgba(var(--accent-rgb, 248, 216, 120), 0.08), transparent 60%),
        rgba(8, 4, 20, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-left: 3px solid var(--accent);
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .store-epi:hover {
      transform: translateY(-3px);
      border-color: var(--accent);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 28px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(0, 0, 0, 0.3);
    }
    .store-epi[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 20px; right: 20px;
      bottom: calc(100% + 10px);
      background: #0a0518;
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: 10px 14px;
      border-radius: 6px;
      font-size: 11px;
      letter-spacing: 0.05em;
      line-height: 1.4;
      z-index: 20;
      pointer-events: none;
      box-shadow: 0 0 24px rgba(0,0,0,0.6);
      white-space: normal;
    }
    .store-epi-icon {
      font-size: 54px;
      color: var(--accent);
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
      display: flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 0 18px var(--accent);
      align-self: center;
      flex-shrink: 0;
      transition: transform 0.3s;
    }
    .store-epi:hover .store-epi-icon { transform: scale(1.08) rotate(-4deg); }
    .store-epi-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .store-epi-eyebrow {
      font-size: 9px;
      letter-spacing: 0.3em;
      color: #857f70;
      font-weight: 600;
    }
    .store-epi-name {
      font-size: 20px;
      color: #fff;
      font-family: 'Georgia', serif;
      line-height: 1.2;
    }
    .store-epi-tagline {
      font-size: 11px;
      color: var(--accent);
      font-style: italic;
      margin-top: 4px;
    }
    .store-epi-desc {
      font-size: 12px;
      color: #aaa;
      line-height: 1.45;
      margin-top: 6px;
      margin-bottom: 10px;
    }
    .store-epi-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 6px;
    }
    .store-epi-price {
      font-size: 18px;
      font-family: 'Georgia', serif;
      color: var(--accent);
      font-weight: 600;
    }

    /* ══════ COSMETICS GRID ══════ */
    .store-cosm-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 14px;
    }
    .store-cosm {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 16px 18px;
      background: rgba(216, 102, 255, 0.04);
      border: 1px solid rgba(216, 102, 255, 0.22);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      transition: all 0.2s;
    }
    .store-cosm:hover {
      background: rgba(216, 102, 255, 0.08);
      border-color: var(--accent);
      transform: translateY(-2px);
    }
    .store-cosm-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--accent);
      color: var(--accent);
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 0 12px var(--accent);
    }
    .store-cosm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .store-cosm-name {
      font-size: 14px;
      color: #fff;
      font-family: 'Georgia', serif;
      letter-spacing: 0.03em;
    }
    .store-cosm-desc {
      font-size: 11px;
      color: #aaa;
      line-height: 1.4;
    }
    .store-cosm-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .store-cosm-price {
      font-size: 14px;
      font-family: monospace;
      color: var(--accent);
      font-weight: 600;
    }

    /* ══════ UNIVERSAL BUY BUTTON (with gradient + hover scale) ══════ */
    /* Inherits --accent from the parent card (.store-hero / .store-epi /
       .store-cosm) so each product gets its own colored CTA. */
    .store-buy-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      background: linear-gradient(135deg, var(--accent, #f8d878), color-mix(in srgb, var(--accent, #f8d878), #000 22%));
      border: none;
      color: #0a0518;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      border-radius: 6px;
      transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
      box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }
    .store-buy-btn:hover:not(:disabled) {
      transform: scale(1.06);
      filter: brightness(1.12) saturate(1.1);
      box-shadow: 0 4px 22px color-mix(in srgb, var(--accent) 55%, transparent);
    }
    .store-buy-btn:active:not(:disabled) { transform: scale(0.98); }
    .store-buy-btn:disabled { opacity: 0.55; cursor: wait; }
    .store-buy-btn-hero {
      padding: 12px 24px;
      font-size: 12px;
      letter-spacing: 0.25em;
    }
    .store-buy-arrow {
      transition: transform 0.2s;
      font-size: 14px;
    }
    .store-buy-btn:hover .store-buy-arrow { transform: translateX(4px); }

    /* ══════ OWNED GRID (with thumbnails) ══════ */
    .owned-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 14px;
      align-content: start;
    }
    .owned-card {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 14px 16px;
      background:
        linear-gradient(135deg, rgba(var(--accent-rgb, 123, 255, 154), 0.06), transparent),
        rgba(10, 5, 24, 0.6);
      border: 1px solid rgba(255,255,255,0.08);
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      transition: all 0.2s;
    }
    .owned-card:hover {
      transform: translateY(-2px);
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    .owned-thumb {
      width: 54px;
      height: 54px;
      border-radius: 10px;
      background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
      border: 1px solid var(--accent);
      color: var(--accent);
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-shadow: 0 0 14px var(--accent);
    }
    .owned-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .owned-type {
      font-size: 9px;
      letter-spacing: 0.3em;
      color: var(--accent);
      font-weight: 600;
    }
    .owned-name {
      font-size: 14px;
      color: #fff;
      font-family: 'Georgia', serif;
    }
    .owned-tag {
      font-size: 11px;
      color: #857f70;
      font-style: italic;
    }
    .owned-check {
      font-size: 20px;
      color: var(--accent);
      text-shadow: 0 0 10px var(--accent);
    }

    /* ══════ STORE ITEMS ══════ */
    .store-item {
      position: relative;
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.25);
      border-radius: 6px;
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s;
    }
    .store-item:hover {
      border-color: rgba(248, 216, 120, 0.5);
      background: rgba(248, 216, 120, 0.07);
    }
    .store-item-bundle {
      border-color: rgba(248, 216, 120, 0.5);
      background: rgba(248, 216, 120, 0.08);
    }
    .store-item-cosmetic {
      border-color: rgba(136, 180, 255, 0.25);
    }
    .store-item-badge {
      position: absolute;
      top: -8px;
      right: 14px;
      background: #f8d878;
      color: #0a0518;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.15em;
      padding: 3px 10px;
      border-radius: 3px;
    }
    .store-item-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
    }
    .store-item-name {
      color: #fff;
      font-size: 14px;
      letter-spacing: 0.05em;
      font-family: 'Georgia', serif;
      line-height: 1.3;
    }
    .store-item-price {
      color: #f8d878;
      font-family: monospace;
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
    }
    .store-item-desc {
      color: #aaa;
      font-size: 12px;
      line-height: 1.5;
    }
    .store-buy-btn {
      margin-top: 4px;
      background: transparent;
      border: 1px solid #f8d878;
      color: #f8d878;
      padding: 10px 16px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
      border-radius: 4px;
    }
    .store-buy-btn:hover:not(:disabled) {
      background: #f8d878;
      color: #0a0518;
    }
    .store-buy-btn:disabled {
      opacity: 0.5;
      cursor: wait;
    }

    /* ══════ AUTH BUTTON (top-right corner) ══════ */
    #auth-btn {
      position: fixed;
      top: 16px;
      right: 16px;
      background: rgba(10, 5, 24, 0.85);
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #857f70;
      padding: 10px 14px;
      border-radius: 20px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 20;
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      gap: 6px;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    #auth-btn .auth-name {
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #auth-btn:hover {
      color: #f8d878;
      border-color: #f8d878;
    }
    #auth-btn.signed-in {
      color: #88cc88;
      border-color: rgba(136, 204, 136, 0.4);
    }
    #auth-btn .auth-avatar { font-size: 12px; }
    #auth-btn .auth-name { font-weight: 500; }
    #auth-btn .auth-chev { font-size: 8px; margin-left: 2px; }

    #auth-menu {
      position: fixed;
      top: 56px;
      right: 16px;
      background: rgba(10, 5, 24, 0.98);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 6px;
      padding: 14px;
      z-index: 25;
      min-width: 200px;
      backdrop-filter: blur(12px);
      display: none;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    }
    #auth-menu.visible { display: flex; }
    .auth-menu-email {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.1em;
      padding: 4px 8px 8px;
      border-bottom: 1px solid rgba(248, 216, 120, 0.15);
      margin-bottom: 4px;
      word-break: break-all;
    }
    .auth-menu-link {
      background: transparent;
      border: none;
      color: #aaa;
      padding: 8px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.15em;
      cursor: pointer;
      text-align: left;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.15s;
      display: block;
    }
    .auth-menu-link:hover {
      background: rgba(248, 216, 120, 0.1);
      color: #f8d878;
    }

    /* ══════ MISSION HUD (top-center) ══════ */
    #mission-hud {
      position: fixed;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 5, 24, 0.75);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 4px;
      padding: 8px 14px;
      backdrop-filter: blur(8px);
      z-index: 10;
      pointer-events: none;
      min-width: 280px;
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    /* ══════ MISSION JOURNAL ══════ */
    #mission-journal {
      position: fixed;
      inset: 80px;
      background: rgba(3, 1, 8, 0.95);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 60;
      display: none;
      flex-direction: column;
      padding: 30px;
      backdrop-filter: blur(8px);
    }
    #mission-journal.visible { display: flex; }
    .journal-header { text-align: center; margin-bottom: 24px; }
    .journal-title { font-size: 18px; letter-spacing: 0.3em; color: #f8d878; }
    .journal-sub { font-size: 10px; color: #857f70; letter-spacing: 0.15em; margin-top: 4px; }
    #mission-list {
      flex: 1;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 16px;
    }
    .mission-item {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.15);
      border-radius: 6px;
      padding: 16px;
    }
    .mission-type {
      font-size: 9px;
      color: #857f70;
      letter-spacing: 0.3em;
    }
    .mission-title {
      font-size: 15px;
      color: #f8d878;
      margin: 4px 0 6px;
      letter-spacing: 0.05em;
    }
    .mission-desc {
      font-size: 12px;
      color: #aaa;
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .mission-bar {
      width: 100%;
      height: 4px;
      background: rgba(0,0,0,0.5);
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 6px;
    }
    .mission-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #f8d878, #ffdd88);
      border-radius: 2px;
      transition: width 0.3s;
    }
    .mission-foot {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #857f70;
      font-family: monospace;
    }
    .mission-reward { color: #88cc88; }

    /* ══════ STORY PANEL ══════ */
    #story-panel {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      width: 620px;
      max-width: 90vw;
      background: rgba(3, 1, 8, 0.96);
      border: 2px solid rgba(248, 216, 120, 0.5);
      border-radius: 8px;
      padding: 26px 30px;
      z-index: 65;
      opacity: 0;
      pointer-events: none;
      transition: all 0.4s;
      backdrop-filter: blur(12px);
      box-shadow: 0 0 80px rgba(248, 216, 120, 0.2);
    }
    #story-panel.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    .story-title {
      color: #f8d878;
      font-family: 'Georgia', serif;
      font-size: 20px;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }
    .story-character {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.4em;
      margin-bottom: 18px;
    }
    .story-dialogue {
      color: #fff;
      font-size: 15px;
      line-height: 1.7;
      margin-bottom: 22px;
      font-family: 'Georgia', serif;
      font-style: italic;
    }
    .story-advance {
      background: transparent;
      border: 1px solid #f8d878;
      color: #f8d878;
      padding: 10px 24px;
      border-radius: 4px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.2em;
      cursor: pointer;
      transition: all 0.2s;
    }
    .story-advance:hover {
      background: #f8d878;
      color: #0a0518;
    }

    /* ══════ STORY CHOICES ══════ */
    .story-choices {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }
    .story-choice {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.35);
      color: #e9e4d8;
      padding: 12px 16px;
      border-radius: 4px;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
    }
    .story-choice:hover {
      background: rgba(248, 216, 120, 0.15);
      border-color: #f8d878;
      transform: translateX(4px);
    }
    .story-choice-label {
      color: #f8d878;
      font-size: 13px;
      letter-spacing: 0.1em;
      font-weight: 500;
    }
    .story-choice-flavor {
      color: #aaa;
      font-size: 11px;
      font-style: italic;
      line-height: 1.4;
    }

    /* ══════ STORY DIRECTIVE (gameplay hint embedded in scene) ══════ */
    .story-directive {
      background: rgba(248, 216, 120, 0.06);
      border-left: 2px solid #f8d878;
      padding: 10px 14px;
      margin: 14px 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .story-directive-label {
      color: #f8d878;
      font-size: 9px;
      letter-spacing: 0.3em;
    }
    .story-directive-goal {
      color: #fff;
      font-size: 13px;
    }
    .story-directive-hint {
      color: #857f70;
      font-size: 11px;
      font-style: italic;
      line-height: 1.4;
    }

    /* Expand story panel to fit longer scenes + choices */
    #story-panel {
      max-height: 75vh;
      overflow-y: auto;
    }

    /* ══════ MARKET PANEL ══════ */
    #market-panel {
      position: fixed;
      inset: 60px;
      background: rgba(3, 1, 8, 0.96);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 63;
      display: none;
      flex-direction: column;
      padding: 28px;
      backdrop-filter: blur(10px);
    }
    #market-panel.visible { display: flex; }
    .market-close-btn {
      position: absolute;
      top: 14px;
      right: 18px;
      background: transparent;
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #857f70;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
    }
    .market-close-btn:hover {
      color: #ff6666;
      border-color: #ff6666;
      transform: rotate(90deg);
    }
    .market-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 18px;
      padding-right: 48px;
    }
    .market-title {
      font-size: 20px;
      letter-spacing: 0.4em;
      color: #f8d878;
      font-family: 'Georgia', serif;
    }
    .market-location {
      font-size: 11px;
      color: #857f70;
      letter-spacing: 0.2em;
      margin-top: 4px;
    }
    .market-credits-box {
      text-align: right;
      padding: 10px 18px;
      background: rgba(248, 216, 120, 0.08);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 4px;
    }
    .market-credits-label {
      font-size: 9px;
      color: #857f70;
      letter-spacing: 0.3em;
    }
    .market-credits {
      color: #f8d878;
      font-family: monospace;
      font-size: 16px;
      margin-top: 2px;
    }
    .market-tabs {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
      border-bottom: 1px solid rgba(248, 216, 120, 0.15);
    }
    .market-tab {
      background: transparent;
      border: none;
      color: #857f70;
      padding: 10px 26px;
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 0.3em;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: all 0.2s;
    }
    .market-tab:hover { color: #f8d878; }
    .market-tab.active {
      color: #f8d878;
      border-bottom-color: #f8d878;
    }
    .market-categories {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 16px;
    }
    .market-cat {
      background: transparent;
      border: 1px solid rgba(248, 216, 120, 0.2);
      color: #857f70;
      padding: 5px 12px;
      border-radius: 12px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }
    .market-cat:hover { color: #f8d878; border-color: rgba(248, 216, 120, 0.5); }
    .market-cat.active {
      background: #f8d878;
      color: #0a0518;
      border-color: #f8d878;
    }
    .market-body {
      flex: 1;
      overflow-y: auto;
      padding: 2px;
    }
    .market-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
    }
    .market-item {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 5px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s;
    }
    .market-item:hover { border-color: rgba(248, 216, 120, 0.4); }
    .market-item.rarity-rare { border-color: rgba(136, 180, 255, 0.4); }
    .market-item.rarity-legendary { border-color: rgba(200, 120, 255, 0.5); background: rgba(200, 120, 255, 0.05); }
    .market-item.unaffordable { opacity: 0.4; }
    .market-item-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .market-item-name {
      color: #fff;
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .market-item-cat {
      color: #857f70;
      font-size: 9px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .market-item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .market-item-price {
      color: #f8d878;
      font-family: monospace;
      font-size: 13px;
    }
    .market-item-price.price-low { color: #88cc88; }
    .market-item-price.price-high { color: #ff8866; }
    .price-indicator { font-size: 10px; margin-right: 2px; }
    .market-action-btn {
      background: transparent;
      border: 1px solid #f8d878;
      color: #f8d878;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.2em;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s;
    }
    .market-action-btn:hover:not(:disabled) {
      background: #f8d878;
      color: #0a0518;
    }
    .market-action-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }
    .market-empty {
      padding: 60px 20px;
      text-align: center;
      color: #857f70;
      font-size: 12px;
      letter-spacing: 0.1em;
    }

    /* ══════ DOCK HINT (appears when in a market system) ══════ */
    #dock-hint {
      position: fixed;
      top: 140px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(10, 5, 24, 0.85);
      border: 1px solid rgba(136, 204, 136, 0.5);
      color: #88cc88;
      padding: 8px 16px;
      border-radius: 4px;
      font-size: 11px;
      letter-spacing: 0.2em;
      z-index: 11;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
      backdrop-filter: blur(8px);
    }
    #dock-hint.visible { opacity: 1; }
    #controls-hint-stations { display: none; }
    #controls-hint-stations.visible { display: block; }
    #dock-hint kbd {
      background: rgba(136, 204, 136, 0.2);
      border: 1px solid #88cc88;
      padding: 1px 6px;
      border-radius: 3px;
      font-family: monospace;
      margin: 0 4px;
    }

    /* ══════ SHIPYARD / CREW (share #market-panel layout) ══════ */
    #shipyard-panel, #crew-panel {
      position: fixed;
      inset: 60px;
      background: rgba(3, 1, 8, 0.96);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 63;
      display: none;
      flex-direction: column;
      padding: 28px;
      backdrop-filter: blur(10px);
    }
    #shipyard-panel.visible, #crew-panel.visible { display: flex; }

    .shipyard-tiers {
      display: flex;
      gap: 6px;
      margin-bottom: 14px;
    }
    .shipyard-tier {
      background: transparent;
      border: 1px solid rgba(248, 216, 120, 0.25);
      color: #857f70;
      padding: 6px 14px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.2em;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .shipyard-tier:hover { color: #f8d878; border-color: #f8d878; }
    .shipyard-tier.active {
      background: #f8d878;
      color: #0a0518;
      border-color: #f8d878;
    }

    .shipyard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
    }
    .shipyard-card {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 5px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s;
    }
    .shipyard-card:hover { border-color: rgba(248, 216, 120, 0.4); }
    .shipyard-card.owned { background: rgba(136, 204, 136, 0.04); border-color: rgba(136, 204, 136, 0.3); }
    .shipyard-card.active { background: rgba(248, 216, 120, 0.1); border-color: #f8d878; box-shadow: 0 0 25px rgba(248, 216, 120, 0.15); }
    .shipyard-card.unaffordable { opacity: 0.4; }
    .shipyard-card-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .shipyard-card-name {
      color: #fff;
      font-family: 'Georgia', serif;
      font-size: 14px;
    }
    .ship-badge {
      background: rgba(136, 204, 136, 0.2);
      border: 1px solid #88cc88;
      color: #88cc88;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 9px;
      letter-spacing: 0.2em;
    }
    .ship-badge.badge-active {
      background: #f8d878;
      border-color: #f8d878;
      color: #0a0518;
    }
    .shipyard-card-class {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .shipyard-stats {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .stat-bar {
      display: grid;
      grid-template-columns: 60px 1fr 40px;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      color: #857f70;
    }
    .stat-bar .bar {
      height: 6px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 3px;
      overflow: hidden;
    }
    .stat-bar .bar > div {
      height: 100%;
      border-radius: 3px;
    }
    .stat-bar b {
      color: #fff;
      font-family: monospace;
      text-align: right;
    }
    .shipyard-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 4px;
    }
    .shipyard-price {
      color: #f8d878;
      font-family: monospace;
      font-size: 13px;
    }

    /* ══════ CREW CARDS ══════ */
    .crew-section-title {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.3em;
      margin: 12px 0 8px;
      text-transform: uppercase;
    }
    .crew-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 12px;
    }
    .crew-card {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 5px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .crew-card.rarity-uncommon { border-color: rgba(136, 180, 255, 0.35); }
    .crew-card.rarity-rare { border-color: rgba(200, 120, 255, 0.4); }
    .crew-card.rarity-legendary { border-color: rgba(248, 216, 120, 0.55); background: rgba(248, 216, 120, 0.07); }
    .crew-card.rarity-unique { border-color: #f8d878; background: rgba(248, 216, 120, 0.1); }
    .crew-card.unaffordable { opacity: 0.4; }
    .crew-card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    .crew-card-name {
      color: #fff;
      font-family: 'Georgia', serif;
      font-size: 14px;
    }
    .crew-card-role {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      margin-top: 2px;
    }
    .crew-badge {
      background: rgba(136, 204, 136, 0.2);
      border: 1px solid #88cc88;
      color: #88cc88;
      padding: 3px 9px;
      border-radius: 3px;
      font-size: 9px;
      letter-spacing: 0.2em;
    }
    .crew-card-desc {
      color: #aaa;
      font-size: 12px;
      line-height: 1.5;
      font-style: italic;
    }
    .crew-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .crew-card-price {
      color: #f8d878;
      font-family: monospace;
      font-size: 13px;
    }

    /* ══════ ACHIEVEMENTS ══════ */
    #achievements-panel {
      position: fixed;
      inset: 60px;
      background: rgba(3, 1, 8, 0.96);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 63;
      display: none;
      flex-direction: column;
      padding: 28px;
      backdrop-filter: blur(10px);
    }
    #achievements-panel.visible { display: flex; }

    .ach-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .ach-card {
      background: rgba(248, 216, 120, 0.03);
      border: 1px solid rgba(248, 216, 120, 0.15);
      border-radius: 4px;
      padding: 10px 12px;
      display: flex;
      gap: 10px;
      align-items: center;
      opacity: 0.55;
      transition: all 0.2s;
    }
    .ach-card.unlocked {
      opacity: 1;
      background: rgba(248, 216, 120, 0.08);
      border-color: rgba(248, 216, 120, 0.4);
    }
    .ach-card.tier-silver.unlocked { border-color: rgba(192, 192, 192, 0.6); }
    .ach-card.tier-gold.unlocked { border-color: #f8d878; box-shadow: 0 0 20px rgba(248, 216, 120, 0.2); }
    .ach-card.tier-legendary.unlocked { border-color: #c878ff; box-shadow: 0 0 25px rgba(200, 120, 255, 0.3); background: rgba(200, 120, 255, 0.08); }
    .ach-card.secret {
      opacity: 0.35;
      font-style: italic;
    }
    .ach-icon {
      font-size: 24px;
      color: #f8d878;
      min-width: 32px;
      text-align: center;
    }
    .ach-card.unlocked .ach-icon { filter: drop-shadow(0 0 8px rgba(248, 216, 120, 0.5)); }
    .ach-body { flex: 1; }
    .ach-name {
      color: #fff;
      font-size: 13px;
      letter-spacing: 0.05em;
      font-family: 'Georgia', serif;
    }
    .ach-desc {
      color: #aaa;
      font-size: 11px;
      margin-top: 2px;
      line-height: 1.4;
    }
    .ach-check {
      color: #7bff9a;
      font-size: 18px;
      font-weight: bold;
    }

    /* ══════ BASE / MACHINES ══════ */
    #base-panel {
      position: fixed;
      inset: 60px;
      background: rgba(3, 1, 8, 0.96);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 63;
      display: none;
      flex-direction: column;
      padding: 28px;
      backdrop-filter: blur(10px);
    }
    #base-panel.visible { display: flex; }
    .base-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
    }
    .base-machine {
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 5px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: all 0.2s;
    }
    .base-machine:hover { border-color: rgba(248, 216, 120, 0.4); }
    .base-machine.owned { background: rgba(136, 204, 136, 0.05); border-color: rgba(136, 204, 136, 0.4); }
    .base-machine.unaffordable { opacity: 0.45; }
    .base-machine-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .base-machine-name {
      color: #fff;
      font-family: 'Georgia', serif;
      font-size: 14px;
    }
    .base-machine-desc {
      color: #aaa;
      font-size: 12px;
      line-height: 1.4;
      font-style: italic;
    }
    .base-machine-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 4px;
    }
    .base-machine-cost {
      color: #f8d878;
      font-family: monospace;
      font-size: 13px;
    }

    /* ══════ SACRED TIMELINE ══════ */
    #timeline-panel {
      position: fixed;
      inset: 60px;
      background: rgba(3, 1, 8, 0.96);
      border: 1px solid rgba(248, 216, 120, 0.3);
      border-radius: 8px;
      z-index: 63;
      display: none;
      flex-direction: column;
      padding: 28px;
      backdrop-filter: blur(10px);
    }
    #timeline-panel.visible { display: flex; }

    /* Layout: SVG stage + optional right-side ledger */
    .tl-layout {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: row;
      pointer-events: none;
    }
    .tl-layout > * { pointer-events: auto; }
    .tl-stage { flex: 1; position: relative; min-width: 0; }
    .tl-layout-has-ledger .tl-stage { padding-right: 8px; }

    /* Side-panel ledger */
    .tl-ledger {
      width: 340px;
      margin: 130px 18px 24px 0;
      background: linear-gradient(180deg, rgba(18,8,36,0.92), rgba(8,4,20,0.92));
      border: 1px solid rgba(248, 216, 120, 0.22);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(248,216,120,0.04);
      backdrop-filter: blur(8px);
    }
    .tl-ledger-header {
      padding: 14px 18px 12px;
      border-bottom: 1px solid rgba(248, 216, 120, 0.15);
      background: linear-gradient(180deg, rgba(248,216,120,0.06), transparent);
    }
    .tl-ledger-title {
      font-size: 12px;
      letter-spacing: 0.3em;
      color: #ff7ad5;
      font-weight: 700;
    }
    .tl-ledger-count {
      font-size: 10px;
      color: #857f70;
      letter-spacing: 0.15em;
      margin-top: 3px;
    }
    .tl-ledger-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 12px 14px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,122,213,0.3) transparent;
    }
    .tl-ledger-list::-webkit-scrollbar { width: 6px; }
    .tl-ledger-list::-webkit-scrollbar-thumb { background: rgba(255,122,213,0.3); border-radius: 3px; }

    .tl-ledger-card {
      position: relative;
      padding: 12px 14px 12px 16px;
      margin-bottom: 8px;
      background: rgba(var(--branch-rgb), 0.06);
      border: 1px solid rgba(var(--branch-rgb), 0.22);
      border-left: 3px solid var(--branch-color);
      border-radius: 4px;
      transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
      cursor: default;
    }
    .tl-ledger-card:hover,
    .tl-ledger-card.tl-highlight {
      background: rgba(var(--branch-rgb), 0.14);
      border-color: var(--branch-color);
      transform: translateX(-2px);
      box-shadow: 0 0 20px rgba(var(--branch-rgb), 0.25);
    }
    .tl-ledger-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .tl-ledger-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px 3px 8px;
      background: var(--branch-color);
      color: #0a0518;
      font-family: monospace;
      font-size: 11px;
      letter-spacing: 0.2em;
      font-weight: 700;
      border-radius: 3px;
      box-shadow: 0 0 12px rgba(var(--branch-rgb), 0.45);
    }
    .tl-ledger-x { font-size: 12px; }
    .tl-ledger-when {
      font-size: 10px;
      color: #857f70;
      font-family: monospace;
      letter-spacing: 0.08em;
    }
    .tl-ledger-arc {
      font-size: 10px;
      color: var(--branch-color);
      letter-spacing: 0.2em;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .tl-ledger-label {
      font-size: 12px;
      color: #cfc7b0;
      font-style: italic;
      font-family: 'Georgia', serif;
      line-height: 1.35;
      margin-bottom: 8px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .tl-ledger-stats {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tl-ledger-chip {
      font-size: 9px;
      font-family: monospace;
      letter-spacing: 0.1em;
      padding: 2px 8px;
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .tl-ledger-chip-kept {
      color: #7bff9a;
      background: rgba(123,255,154,0.08);
      border-color: rgba(123,255,154,0.25);
    }
    .tl-ledger-chip-drop {
      color: #ff8c42;
      background: rgba(255,140,66,0.08);
      border-color: rgba(255,140,66,0.25);
    }

    /* SVG fork highlight mirror */
    .tl-fork { transition: filter 0.15s, opacity 0.15s; }
    .tl-fork.tl-highlight {
      filter: brightness(1.4) drop-shadow(0 0 8px currentColor);
    }

    /* When the right-side ledger is visible, the endings bar slides left
       by half the ledger column width so it stays centered above the
       stage instead of drifting under the ledger. Skip on small screens
       where the ledger stacks below the stage. */
    .tl-endings-bar-offset { margin-left: -180px; }
    @media (max-width: 900px) {
      .tl-endings-bar-offset { margin-left: 0; }
    }

    @media (max-width: 1100px) {
      .tl-ledger { width: 280px; }
    }
    @media (max-width: 900px) {
      .tl-layout { flex-direction: column; }
      .tl-ledger { width: auto; margin: 8px 14px 14px; max-height: 220px; }
    }
    .timeline-chain {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-width: 720px;
      margin: 0 auto;
      padding: 8px 0;
    }
    .timeline-node {
      position: relative;
      display: flex;
      gap: 14px;
      padding: 12px 16px 12px 14px;
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.18);
      border-left: 3px solid #f8d878;
      border-radius: 4px;
      align-items: center;
      transition: all 0.2s;
    }
    .timeline-node:hover { background: rgba(248, 216, 120, 0.08); }
    .timeline-node.current {
      background: rgba(248, 216, 120, 0.12);
      border-color: #f8d878;
      box-shadow: 0 0 25px rgba(248, 216, 120, 0.2);
    }
    .timeline-node-marker {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      box-shadow: 0 0 12px currentColor;
      flex-shrink: 0;
    }
    .timeline-node-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .timeline-node-meta {
      color: #857f70;
      font-size: 10px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
    .timeline-node-label {
      color: #fff;
      font-size: 13px;
      font-family: 'Georgia', serif;
    }
    .timeline-node-here {
      color: #f8d878;
      font-size: 11px;
      letter-spacing: 0.2em;
      margin-top: 2px;
    }
    .timeline-rewind-btn {
      background: transparent;
      border: 1px solid rgba(248, 216, 120, 0.3);
      color: #aaa;
      padding: 4px 10px;
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.2em;
      cursor: pointer;
      border-radius: 3px;
      transition: all 0.2s;
      margin-top: 4px;
      align-self: flex-start;
    }
    .timeline-rewind-btn:hover {
      color: #f8d878;
      border-color: #f8d878;
      background: rgba(248, 216, 120, 0.1);
    }

    /* Endings collected bar in Timeline panel */
    .tl-endings-bar {
      max-width: 720px;
      margin: 0 auto 16px;
      padding: 14px 16px;
      background: rgba(248, 216, 120, 0.04);
      border: 1px solid rgba(248, 216, 120, 0.2);
      border-radius: 6px;
    }
    .tl-endings-title {
      color: #f8d878;
      font-size: 10px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .tl-endings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin-bottom: 8px;
    }
    .tl-ending-group { }
    .tl-ending-label {
      color: #e9e4d8;
      font-size: 11px;
      letter-spacing: 0.15em;
      margin-bottom: 4px;
    }
    .tl-ending-count {
      color: #857f70;
      font-family: monospace;
    }
    .tl-pips {
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
    }
    .tl-pip {
      color: #4a4130;
      font-size: 14px;
      line-height: 1;
      cursor: help;
    }
    .tl-pip.got { color: #f8d878; text-shadow: 0 0 6px rgba(248, 216, 120, 0.6); }
    .tl-endings-hint {
      color: #857f70;
      font-size: 11px;
      font-style: italic;
      line-height: 1.4;
      margin-top: 4px;
    }

/* ─── HUD immersive alerts (v5.5) ──────────────────────────────────── */
@keyframes hud-alert-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.02); }
}
#hud-alerts > div { transition: opacity 0.3s ease-out; }