/* ══════════════════════════════════════════════════════════════════════
       Z-INDEX MASTER HIERARCHY
       ─────────────────────────────────────────────────────────────────────
       Layer                           z-index
       ─────────────────────────────────────────────────────────────────────
       Canvas / game-container         0
       HUD (HP, XP, Weapons)           10
       Floating Damage Numbers         50
       Screen Blood Splatters          100
       Modals (Store, Reliquary, LvlUp)500
       Quest / Dopamine Overlays       1000
       ══════════════════════════════════════════════════════════════════════ */

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000; /* Black background - no white space */
      font-family: 'M PLUS Rounded 1c', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }

    #game-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    /* Fix blue border: canvas is inline by default which creates a line-height gap */
    #game-container canvas {
      display: block;
    }

    #ui-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    /* FRESH IMPLEMENTATION: Low HP warning vignette */
    #low-hp-vignette {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9;
      background: radial-gradient(circle at center, transparent 30%, rgba(139, 0, 0, 0.4) 100%);
      opacity: 0;
      transition: opacity 0.3s;
    }

    /* Pulsating vignette when HP < 25% — communicates imminent death */
    #low-hp-vignette.low-hp-critical {
      transition: none; /* let the animation control opacity */
      animation: low-hp-vignette-pulse 0.8s ease-in-out infinite;
      will-change: opacity;
    }

    @keyframes low-hp-vignette-pulse {
      0%   { opacity: var(--low-hp-base-opacity, 0.5); }
      50%  { opacity: 1; }
      100% { opacity: var(--low-hp-base-opacity, 0.5); }
    }

    /* ── Blood Splatter Screen Overlay ─────────────────────────────────────────
       Triggered when a point-blank meat chunk hits the camera.
       Multiple layered blobs animate independently to simulate dripping blood. */
    #blood-splatter-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none !important;
      z-index: 100;
      opacity: 0;
      overflow: hidden;
    }
    #blood-splatter-overlay.active {
      animation: blood-splatter-fade 3.2s ease-out forwards;
      will-change: opacity, transform;
    }
    @keyframes blood-splatter-fade {
      0%   { opacity: 1; }
      60%  { opacity: 0.85; }
      100% { opacity: 0; }
    }
    /* Individual drip blobs */
    .bso-blob {
      position: absolute;
      border-radius: 50% 40% 55% 45% / 45% 55% 40% 50%;
      background: radial-gradient(circle at 40% 35%, #cc0000, #660000 70%, #330000);
      animation: bso-drip var(--drip-dur, 3s) ease-in var(--drip-delay, 0s) forwards;
    }
    @keyframes bso-drip {
      0%   { transform: translateY(0) scaleY(1);   opacity: 0.95; }
      40%  { transform: translateY(var(--drip-travel, 60px)) scaleY(1.18); opacity: 0.9; }
      100% { transform: translateY(var(--drip-travel, 160px)) scaleY(0.8); opacity: 0; }
    }

    /* HUD — centered below the day/night clock */
    .hud-top {
      position: fixed;
      top: 8px;
      left: 8px;
      transform: none;
      padding: 4px 8px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      cursor: grab;
      z-index: 10;
      touch-action: none;
      pointer-events: auto;
      max-width: min(200px, 55vw);
    }
    .hud-top:active {
      cursor: grabbing;
    }

    /* ── Unified stat bar container: HP + EXP + Rage stacked ── */
    .unified-bars-wrap {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100%;
    }

    .bar-container {
      width: 180px;
      height: 18px;
      background: linear-gradient(to bottom, #1a1a1a 0%, #1a1a1a 50%, #3a3a3a 50%, #3a3a3a 100%);
      border-radius: 9px;
      border: 2px solid #000000;
      overflow: hidden;
      position: relative;
      box-shadow: 
        0 0 0 1px rgba(255,215,0,0.7),
        0 0 0 3px #000,
        0 0 6px rgba(255,215,0,0.4),
        0 0 12px rgba(255,215,0,0.15),
        inset 0 2px 4px rgba(0,0,0,0.4);
      background-image: 
        radial-gradient(circle at 3px 3px, rgba(255,215,0,0.05) 2px, transparent 2px);
      background-size: 12px 12px;
      animation: bar-border-alive 3s ease-in-out infinite;
    }

    @keyframes bar-border-alive {
      0%, 100% { 
        box-shadow: 
          0 0 0 1px rgba(255,215,0,0.7),
          0 0 0 4px #000,
          0 0 8px rgba(255,215,0,0.5),
          0 0 16px rgba(255,215,0,0.2),
          inset 0 2px 4px rgba(0,0,0,0.4);
      }
      25% { 
        box-shadow: 
          0 0 0 1px rgba(255,215,0,0.9),
          0 0 0 4px #000,
          0 0 10px rgba(255,215,0,0.6),
          0 0 20px rgba(255,215,0,0.3),
          inset 0 2px 4px rgba(0,0,0,0.4);
      }
      50% { 
        box-shadow: 
          0 0 0 1px rgba(255,215,0,1),
          0 0 0 4px #000,
          0 0 14px rgba(255,215,0,0.7),
          0 0 24px rgba(255,215,0,0.35),
          inset 0 2px 4px rgba(0,0,0,0.4);
      }
      75% { 
        box-shadow: 
          0 0 0 1px rgba(255,215,0,0.8),
          0 0 0 4px #000,
          0 0 10px rgba(255,215,0,0.55),
          0 0 18px rgba(255,215,0,0.25),
          inset 0 2px 4px rgba(0,0,0,0.4);
      }
    }

    .bar-fill {
      height: 100%;
      width: 100%;
      transition: width 0.3s ease-out;
      box-shadow: inset 0 2px 4px rgba(255,255,255,0.2);
      position: relative;
    }

    .bar-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      /* 80s BATMAN COMIC STYLE: Bold comic font */
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      font-weight: bold;
      font-size: 10px;
      color: #FFD700; /* Gold text for comic style */
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000,
        0 0 3px rgba(255,215,0,0.2);
      pointer-events: none;
      z-index: 1;
      letter-spacing: 1px;
    }

    #hp-fill { 
      background: linear-gradient(to bottom, #FF2222, #AA0000);
      width: 100%;
      box-shadow: 0 0 12px rgba(255,0,0,1), 0 0 25px rgba(255,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.3);
    }
    #exp-fill { 
      background: linear-gradient(to bottom, #5DADE2, #3498DB);
      width: 0%;
      box-shadow: 0 0 10px rgba(93,173,226,0.8), 0 0 20px rgba(93,173,226,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
    }

    /* ── Stamina bar integrated into unified bars ── */
    #stamina-bar-container {
      border-color: #000;
    }
    #stamina-bar-container .bar-fill {
      background: linear-gradient(90deg, #00aa44, #00ff77);
      width: 100%;
      box-shadow: 0 0 8px rgba(0,255,100,0.6), inset 0 2px 4px rgba(255,255,255,0.2);
      transition: width 0.15s ease-out, background 0.3s;
    }
    #stamina-bar-container.stamina-low .bar-fill {
      background: linear-gradient(90deg, #aa6600, #ffaa00);
      box-shadow: 0 0 10px rgba(255,170,0,0.7), inset 0 2px 4px rgba(255,255,255,0.2);
    }
    #stamina-bar-container.stamina-critical .bar-fill {
      background: linear-gradient(90deg, #aa0000, #ff4400);
      box-shadow: 0 0 12px rgba(255,68,0,0.8), inset 0 2px 4px rgba(255,255,255,0.2);
    }
    #stamina-bar-container.stamina-critical {
      animation: stamina-bar-pulse 0.5s ease-in-out infinite;
    }
    @keyframes stamina-bar-pulse {
      0%, 100% { box-shadow: 0 0 0 1px rgba(255,68,0,0.6), 0 0 0 3px #000, 0 0 8px rgba(255,68,0,0.4), inset 0 2px 4px rgba(0,0,0,0.4); }
      50% { box-shadow: 0 0 0 1px rgba(255,68,0,0.9), 0 0 0 3px #000, 0 0 14px rgba(255,68,0,0.7), 0 0 22px rgba(255,68,0,0.35), inset 0 2px 4px rgba(0,0,0,0.4); }
    }

    /* ── Skill Icons Panel (top-right) ── */
    #skill-icons-panel {
      position: fixed;
      top: 60px;
      right: 8px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      z-index: 115;
      pointer-events: none;
      max-width: 140px;
    }
    @media (max-width: 540px) {
      #skill-icons-panel {
        top: 54px;
        max-width: 140px;
      }
    }
    .skill-icons-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .skill-icons-section {
      width: 100%;
      background: transparent; /* Remove background */
      border: none; /* Remove border */
      border-radius: 0;
      padding: 0;
      box-shadow: none; /* Remove shadow */
      backdrop-filter: none;
    }
    .skill-section-title {
      display: none; /* Hide section titles */
    }
    .skill-icons-grid {
      display: grid;
      grid-template-columns: repeat(2, 32px); /* 2 columns of smaller icons */
      gap: 4px;
      justify-items: end;
    }
    .skill-icons-grid.weapon-grid {
      grid-template-columns: repeat(2, 32px); /* 2 columns */
    }
    @media (max-width: 540px) {
      .skill-icons-grid.weapon-grid {
        grid-template-columns: repeat(2, 32px);
      }
    }
    .skill-icon-slot {
      position: relative;
      width: 32px;
      height: 32px;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(0,0,0,0.85);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      overflow: visible;
      box-shadow: none;
      transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    }
    .skill-icon-slot.weapon-slot {
      background: rgba(0,0,0,0.55);
      border-color: rgba(0,0,0,0.85);
    }
    .skill-icon-slot.passive-slot {
      background: rgba(0,0,0,0.55);
      border-color: rgba(0,0,0,0.85);
    }
    .skill-icon-slot.ready {
      border-color: rgba(255,215,0,0.8);
      box-shadow: 0 0 8px rgba(255,215,0,0.4);
    }
    .skill-icon-slot.ready .skill-icon-emoji {
      filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
    }
    .skill-icon-slot.on-cooldown {
      opacity: 0.6;
    }
    /* Clock-wipe cooldown overlay with ring mask */
    .skill-icon-cd {
      position: absolute;
      inset: -1px;
      border-radius: 8px;
      pointer-events: none;
      background: conic-gradient(rgba(0,0,0,0.65) var(--cd-pct,0%), transparent var(--cd-pct,0%));
      transform: rotate(-90deg);
      mix-blend-mode: multiply;
    }
    /* Cooldown text (remaining seconds) */
    .skill-icon-cd-text {
      position: absolute;
      bottom: 1px;
      right: 2px;
      font-size: 8px;
      color: #FFE17A;
      font-weight: bold;
      text-shadow: -1px -1px 0 #000, 1px 1px 0 #000;
      pointer-events: none;
      line-height: 1;
    }
    .skill-icon-emoji {
      z-index: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
    }
    .skill-icon-label {
      /* Visually hidden but available to screen readers */
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* Pulse flash when skill becomes ready */
    @keyframes skill-ready-flash {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
      40%  { box-shadow: 0 0 12px 4px rgba(255,215,0,0.8); }
      100% { box-shadow: 0 0 6px 1px rgba(255,215,0,0.35); }
    }
    .skill-icon-slot.just-ready {
      animation: skill-ready-flash 0.5s ease-out forwards;
    }

    .stat-text {
      /* 80s BATMAN COMIC STYLE */
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      color: #FFD700; /* Gold for comic style */
      font-weight: bold;
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000,
        0 0 3px rgba(255,215,0,0.2);
      font-size: 14px;
      margin-top: 4px;
      letter-spacing: 1px;
    }

    .stat-text.gold-text {
      font-size: 12px;
      margin-top: 8px;
    }
    
    /* Quest Arrow Guidance */
    #quest-arrow {
      display: none;
      position: fixed;
      font-size: 36px;
      color: #FFD700;
      text-shadow: 0 0 20px rgba(255,215,0,1), 0 0 40px rgba(255,215,0,0.6);
      pointer-events: none;
      z-index: 50;
      transform-origin: center center;
      transition: left 0.1s, top 0.1s, opacity 0.3s;
    }

    /* Off-screen: arrow pulses to draw attention */
    #quest-arrow.quest-arrow-pulsing {
      animation: questArrowPulse 1s ease-in-out infinite;
    }
    
    /* Stats Bar - Removed (Stats accessible via Stats Button Modal only) */
    
    /* Combo Counter - Red/Black Theme */
    #combo-counter {
      position: absolute;
      top: 40%; /* Position closer to character head area */
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      pointer-events: none;
      z-index: 100;
      opacity: 0;
      transition: opacity 0.3s;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    
    #combo-text {
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      font-size: 14px; /* Much smaller combo text */
      font-weight: 400; /* Thinner weight */
      color: #FF0000;
      letter-spacing: 1px;
      text-shadow: 
        1px 1px 0 #000,
        -1px -1px 0 #000,
        0 0 6px rgba(255,0,0,0.7);
      animation: combo-bubble 0.5s ease-out;
      padding: 3px 6px;
      border-radius: 8px;
    }
    
    #combo-multiplier {
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      font-size: 10px; /* Smaller multiplier */
      font-weight: 400; /* Thinner */
      color: #8B0000;
      letter-spacing: 1px;
      text-shadow: 
        1px 1px 0 #000,
        0 0 4px rgba(139,0,0,0.6);
      margin-top: 1px;
    }
    
    @keyframes combo-bubble {
      0% {
        transform: scale(0.5) translateY(20px);
        opacity: 0;
      }
      60% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
      }
      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }
    
    /* Combo Timer Display */
    #combo-timer {
      display: none;
      color: #FF4444;
      text-shadow: 0 0 8px rgba(255,68,68,0.8), 0 0 12px rgba(255,68,68,0.5), 1px 1px 2px rgba(0,0,0,0.5);
      font-size: 14px;
      font-weight: bold;
      margin-top: 3px;
    }
    
    /* Quest Notification Bubble */
    .quest-notification {
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      font-size: 18px;
      color: #333;
      background: white;
      border-radius: 15px;
      padding: 10px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      text-align: center;
      animation: bubble-bounce 0.5s ease-out;
    }

    /* Quest-ready pulse glow - used on camp building cards with pending quests */
    @keyframes quest-pulse-glow {
      0%, 100% { box-shadow: 0 0 8px 2px rgba(255,215,0,0.4); }
      50% { box-shadow: 0 0 20px 8px rgba(255,215,0,0.9), 0 0 40px 16px rgba(255,165,0,0.4); }
    }
    .quest-ready-glow {
      animation: quest-pulse-glow 1.2s ease-in-out infinite;
    }
    
    @keyframes bubble-bounce {
      0% {
        transform: scale(0.5) translateY(20px);
        opacity: 0;
      }
      60% {
        transform: scale(1.1) translateY(0);
        opacity: 1;
      }
      100% {
        transform: scale(1) translateY(0);
        opacity: 1;
      }
    }
    
    @keyframes combo-fade {
      0% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.8) translateY(-50px); /* Float upward when fading */
      }
    }
    
    /* New Bottom Layout: Waterdrop Level Display with EXP filling, Traditional EXP Bar */
    #bottom-bars-container {
      position: fixed;
      bottom: 5px;
      left: 50%; /* CENTER HORIZONTALLY */
      transform: translateX(-50%); /* EXACT CENTER */
      width: auto; /* Don't stretch full width */
      z-index: 100;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 0;
      gap: 8px;
    }
    
    /* Waterdrop Level Display Container - CENTERED AT BOTTOM */
    #waterdrop-container {
      width: 90px;
      height: 100px;
      position: relative;
      margin-bottom: 5px;
      /* 3D appearance with stronger shadow and depth */
      filter: drop-shadow(0 5px 12px rgba(0,0,0,0.7)) 
              drop-shadow(0 0 20px rgba(93,173,226,0.5))
              drop-shadow(0 8px 20px rgba(0,0,0,0.4));
      transition: transform 0.15s ease-out;
      animation: waterdrop-bubble 2.5s ease-in-out infinite;
      /* 3D transform perspective */
      transform-style: preserve-3d;
      perspective: 1000px;
    }
    
    #waterdrop-container.grow {
      animation: waterdrop-grow 0.3s ease-out, waterdrop-bubble 2.5s ease-in-out infinite;
    }
    
    @keyframes waterdrop-grow {
      0% { transform: scale(1) scaleY(1); }
      50% { transform: scale(1.15) scaleY(1.05); }
      100% { transform: scale(1) scaleY(1); }
    }
    
    /* Bubbling/Squishing animation - makes waterdrop more squishy */
    @keyframes waterdrop-bubble {
      0%, 100% { 
        transform: scale(1) scaleY(1); 
      }
      25% { 
        transform: scale(0.94) scaleY(1.09); /* More dramatic squish */
      }
      50% { 
        transform: scale(1.06) scaleY(0.94); /* More dramatic stretch */
      }
      75% { 
        transform: scale(0.97) scaleY(1.05); /* Secondary squish */
      }
    }
    
    @keyframes waterdrop-slosh {
      /* Water slosh animation for movement/attack */
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-3deg); }
      75% { transform: rotate(3deg); }
    }
    
    /* Attack bounce animation */
    #waterdrop-container.attacked {
      animation: waterdrop-bounce 0.4s ease-out, waterdrop-bubble 2.5s ease-in-out infinite;
    }
    
    @keyframes waterdrop-bounce {
      0% { transform: scale(1) scaleY(1); }
      20% { transform: scale(0.80) scaleY(1.28); }
      40% { transform: scale(1.16) scaleY(0.86); }
      60% { transform: scale(0.93) scaleY(1.10); }
      80% { transform: scale(1.02) scaleY(0.98); }
      100% { transform: scale(1) scaleY(1); }
    }

    /* Shooting wave animation - water ripples when firing */
    #waterdrop-container.shooting {
      animation: waterdrop-shoot 0.3s ease-out, waterdrop-bubble 2.5s ease-in-out infinite;
    }

    @keyframes waterdrop-shoot {
      0% { transform: scale(1) scaleY(1); }
      15% { transform: scale(1.08) scaleY(0.92); }
      30% { transform: scale(0.95) scaleY(1.06); }
      50% { transform: scale(1.04) scaleY(0.97); }
      100% { transform: scale(1) scaleY(1); }
    }

    /* Dash wave animation - stronger water splash */
    #waterdrop-container.dashing {
      animation: waterdrop-dash 0.5s ease-out, waterdrop-bubble 2.5s ease-in-out infinite;
    }

    @keyframes waterdrop-dash {
      0% { transform: scale(1) scaleY(1) rotate(0deg); }
      15% { transform: scale(0.85) scaleY(1.22) rotate(-3deg); }
      30% { transform: scale(1.18) scaleY(0.84) rotate(2deg); }
      50% { transform: scale(0.92) scaleY(1.12) rotate(-1deg); }
      70% { transform: scale(1.05) scaleY(0.96) rotate(1deg); }
      100% { transform: scale(1) scaleY(1) rotate(0deg); }
    }
    
    #waterdrop-svg {
      width: 100%;
      height: 100%;
    }
    
    #waterdrop-exp-fill {
      transition: y 0.3s ease-out, height 0.3s ease-out;
      animation: water-shimmer 3s ease-in-out infinite, water-wave 2s ease-in-out infinite;
    }
    
    /* Enhanced shimmer effect for 3D water appearance */
    @keyframes water-shimmer {
      0%, 100% { opacity: 0.85; }
      50% { opacity: 1.0; }
    }
    
    /* Wave animation that activates on XP progress */
    @keyframes water-wave {
      0%, 100% { 
        transform: translateY(0) scaleY(1);
      }
      25% { 
        transform: translateY(-2px) scaleY(1.02);
      }
      50% { 
        transform: translateY(0) scaleY(1);
      }
      75% { 
        transform: translateY(2px) scaleY(0.98);
      }
    }
    
    #waterdrop-level-text {
      text-shadow: 0 0 10px rgba(255,215,0,0.8);
      animation: waterdrop-level-pulse 3s ease-in-out infinite;
      will-change: filter;
    }
    @keyframes waterdrop-level-pulse {
      0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
      50%       { filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)); }
    }
    
    /* EXP Bar at bottom - REMOVED per PR #117 adjustments */
    #bottom-exp-bar {
      display: none; /* Hide the bottom EXP bar */
    }
    
    #bottom-exp-fill {
      display: none;
    }
    
    #bottom-exp-text {
      display: none;
    }
    
    /* Round Minimap - Bottom Right Corner - 25% BIGGER - RAISED HIGHER */
    #minimap-container {
      position: absolute;
      bottom: 250px; /* Raised from 210px to 250px for better visibility */
      right: 8px;
      width: 130px;
      height: 132px;
      /* Nearly perfect circle with subtle bottom hint */
      border-radius: 50% 50% 48% 48%; /* Nearly round */
      transform: rotate(0deg);
      border: 3px solid #000;
      /* 80s BATMAN COMIC STYLE: Dark gradient with halftone */
      background: radial-gradient(circle at 30% 30%, rgba(30,30,30,0.9), rgba(0,0,0,0.95));
      background-image: 
        radial-gradient(circle at center, rgba(20,20,20,0.9), rgba(0,0,0,0.95)),
        radial-gradient(circle at 3px 3px, rgba(255,215,0,0.08) 2px, transparent 2px);
      background-size: 100%, 12px 12px;
      overflow: hidden;
      pointer-events: none;
      z-index: 120; /* Above companion icons (115) and special-attacks panel (115) */
      /* Enhanced border: thick black + yellow glow between */
      box-shadow: 
        0 0 0 1px rgba(255,215,0,0.7),
        0 0 0 4px #000,
        0 0 10px rgba(255,215,0,0.5),
        0 0 20px rgba(255,215,0,0.2),
        inset -2px -2px 8px rgba(0,0,0,0.7),
        inset 2px 2px 8px rgba(255,255,255,0.1);
      transform-style: preserve-3d;
      animation: bar-border-alive 3s ease-in-out infinite;
    }

    /* Special Attacks Panel — left side, mirrors companion panel on right */
    #special-attacks-panel {
      position: fixed;
      bottom: 25px;
      left: 50%;
      transform: translateX(-190px); /* Adjusted from -220px to -190px for better visibility */
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
      pointer-events: auto;
      z-index: 115;
    }
    /* Settings / Special Attacks open button (replaces rage activate button) */
    #special-attacks-panel .special-attacks-open-btn,
    .special-attacks-open-btn {
      width: 48px;
      height: 48px;
      padding: 0;
      font-size: 20px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bangers', cursive;
      border: 2px solid rgba(100,180,255,0.6);
      background: rgba(10,30,70,0.9);
      color: #88CCFF;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, border-color 0.2s;
    }
    .special-attacks-open-btn:hover {
      background: rgba(20,60,140,0.95);
      border-color: rgba(100,200,255,0.9);
      transform: scale(1.08);
    }
    /* StatusBar — repurposed rage meter shows active elemental/status effects */
    #stamina-bar-container.stamina-regen-override {
      background: rgba(10,10,30,0.7);
      border-color: rgba(80,100,200,0.5);
    }
    /* Status effect CSS animations on the StatusBar */
    #stamina-bar-container.status-fire #stamina-fill {
      background: linear-gradient(90deg, #FF4400, #FF8800, #FFCC00);
      animation: status-fire-anim 0.6s ease-in-out infinite alternate;
    }
    #stamina-bar-container.status-poison #stamina-fill {
      background: linear-gradient(90deg, #00FF44, #44FF00, #AAFF00);
      animation: status-poison-anim 0.8s ease-in-out infinite;
    }
    #stamina-bar-container.status-ice #stamina-fill {
      background: linear-gradient(90deg, #88DDFF, #AAEEFF, #CCFFFF);
      animation: status-ice-anim 1.2s ease-in-out infinite alternate;
    }
    #stamina-bar-container.status-shock #stamina-fill {
      background: linear-gradient(90deg, #8800FF, #AA44FF, #6600CC);
      animation: status-shock-anim 0.25s steps(2) infinite;
    }
    @keyframes status-fire-anim {
      0%   { filter: brightness(1.0) drop-shadow(0 0 4px #FF6600); }
      100% { filter: brightness(1.4) drop-shadow(0 0 10px #FF8800); }
    }
    @keyframes status-poison-anim {
      0%,100% { filter: brightness(1.0) drop-shadow(0 0 3px #00FF44); }
      50%     { filter: brightness(1.3) drop-shadow(0 0 8px #88FF00) saturate(1.5); }
    }
    @keyframes status-ice-anim {
      0%   { filter: brightness(1.0) drop-shadow(0 0 4px #88DDFF); }
      100% { filter: brightness(1.2) drop-shadow(0 0 8px #CCFFFF) blur(0.5px); }
    }
    @keyframes status-shock-anim {
      0%  { filter: brightness(1.0) drop-shadow(0 0 2px #8800FF); opacity: 1.0; }
      50% { filter: brightness(2.0) drop-shadow(0 0 12px #AA44FF); opacity: 0.8; }
    }
    /* Special attack slots inside the panel */
    .sa-slot {
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    .sa-slot .sa-icon {
      font-size: 18px;
      line-height: 1;
    }
    .sa-slot .sa-name {
      font-size: 7px;
      color: #DDD;
      letter-spacing: 0.5px;
      text-align: center;
      line-height: 1;
      margin-top: 1px;
    }
    .sa-slot .sa-cooldown-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0%;
      background: rgba(0,0,0,0.65);
      transition: height 0.1s linear;
      pointer-events: none;
    }
    .sa-slot-locked {
      filter: brightness(0.35) grayscale(1);
      cursor: default !important;
      pointer-events: none;
    }
    .sa-slot.sa-ready {
      border-color: rgba(255,215,0,0.8) !important;
      box-shadow: 0 0 8px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.6) !important;
    }

    /* Companion skill buttons — unified style matching special attacks */
    #companion-skills-panel {
      position: fixed;
      bottom: 25px;
      left: 50%;
      transform: translateX(70px); /* Position right of waterdrop: moves panel right from center */
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      justify-content: center;
      pointer-events: auto;
      z-index: 115;
    }
    .companion-skill-btn {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      border: 2px solid rgba(255,255,255,0.25);
      background: rgba(0,0,0,0.8);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #ccc;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, transform 0.15s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.6);
      font-family: 'Bangers', cursive;
      overflow: hidden;
    }
    .companion-skill-btn:hover {
      border-color: rgba(255,215,0,0.7);
      background: rgba(30,30,30,0.9);
      transform: scale(1.05);
    }
    .companion-skill-btn.on-cooldown {
      opacity: 0.4;
      pointer-events: none;
    }
    .companion-skill-btn .cooldown-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0,0,0,0.65);
      border-radius: 0 0 10px 10px;
      transition: height 0.1s linear;
      pointer-events: none;
    }
    /* Empty companion slot — matches empty special attack slot */
    .companion-skill-btn.comp-empty {
      background: rgba(0,0,0,0.4);
      border: 2px dashed rgba(255,255,255,0.15);
      cursor: default;
      box-shadow: none;
    }
    .companion-skill-btn.comp-empty:hover {
      border-color: rgba(255,255,255,0.25);
      background: rgba(0,0,0,0.5);
      transform: none;
    }
    
    #minimap {
      width: 100%;
      height: 100%;
      position: relative;
      /* No counter-rotation needed since container is not rotated */
      transform: none;
      transform-origin: center;
    }
    
    .minimap-dot {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }
    
    .minimap-player {
      width: 8px;
      height: 8px;
      background: #5DADE2;
      box-shadow: 0 0 8px rgba(93,173,226,0.8);
      z-index: 10;
    }
    
    .minimap-enemy {
      width: 4px;
      height: 4px;
      background: #FF4444;
      box-shadow: 0 0 4px rgba(255,68,68,0.6);
    }
    
    .minimap-landmark {
      width: 6px;
      height: 6px;
      background: #FFD700;
      box-shadow: 0 0 6px rgba(255,215,0,0.8);
      /* Add quest marker symbol */
      position: relative;
    }
    
    /* Quest marker indicators on minimap */
    .minimap-landmark.quest-available::before {
      content: '!';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: bold;
      color: #FFD700;
      text-shadow: 0 0 4px rgba(255,215,0,1);
    }
    
    .minimap-landmark.quest-ready::before {
      content: '?';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 10px;
      font-weight: bold;
      color: #FFD700;
      text-shadow: 0 0 4px rgba(255,215,0,1);
    }

    /* Active quest location marker (yellow ?) */
    .minimap-quest-location {
      width: 8px;
      height: 8px;
      background: rgba(255,215,0,0.3);
      border: 1px solid #FFD700;
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(255,215,0,0.8);
    }
    .minimap-quest-location::before {
      content: '?';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      font-weight: bold;
      color: #FFD700;
      text-shadow: 0 0 6px rgba(255,215,0,1);
    }
    
    /* Region Display - lower-left indicator - hidden */
    #region-display {
      display: none;
    }
    
    #region-display.region-visible {
      display: none;
    }
    
    #region-name {
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      font-weight: bold;
      font-size: 11px;
      color: #FFD700;
      text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 3px rgba(255,215,0,0.2);
      letter-spacing: 1px;
      white-space: nowrap;
    }

    /* Minimap landmark icons for different regions */
    .minimap-icon {
      position: absolute;
      transform: translate(-50%, -50%);
      font-size: 8px;
      text-align: center;
      z-index: 5;
      filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
    }
    
    /* Farmer NPC Speech Bubble */
    #farmer-speech-bubble {
      position: absolute;
      display: none;
      background: rgba(15, 20, 35, 0.96);
      border: 2px solid rgba(255, 215, 0, 0.65);
      border-radius: 14px;
      padding: 12px 16px 10px;
      max-width: 260px;
      min-width: 160px;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 13px;
      color: #e0e0e0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 10px rgba(255,215,0,0.2), inset 0 0 8px rgba(0,0,0,0.5);
      z-index: 500;
      pointer-events: auto;
      cursor: pointer;
      transform: translate(-50%, calc(-100% - 18px));
      text-align: left;
      user-select: none;
    }
    #farmer-speech-bubble::after {
      content: '';
      position: absolute;
      bottom: -16px;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-top-color: rgba(255, 215, 0, 0.65);
    }
    #farmer-speech-bubble::before {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(15, 20, 35, 0.96);
      z-index: 1;
    }
    #farmer-speech-bubble-text {
      margin-bottom: 7px;
      line-height: 1.5;
    }
    #farmer-speech-bubble-prompt {
      font-size: 10px;
      color: rgba(255, 215, 0, 0.6);
      text-align: right;
    }
    /* Farmer speech bubble movement animations */
    @keyframes bubble-twinkle {
      0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 10px rgba(255,215,0,0.2); }
      50% { box-shadow: 0 4px 16px rgba(0,0,0,0.8), 0 0 18px rgba(255,215,0,0.45); }
    }
    @keyframes bubble-push-left {
      0%, 100% { transform: translate(-50%, calc(-100% - 18px)); }
      50% { transform: translate(calc(-50% - 6px), calc(-100% - 18px)); }
    }
    @keyframes bubble-push-right {
      0%, 100% { transform: translate(-50%, calc(-100% - 18px)); }
      50% { transform: translate(calc(-50% + 6px), calc(-100% - 18px)); }
    }
    @keyframes bubble-push-up {
      0%, 100% { transform: translate(-50%, calc(-100% - 18px)); }
      50% { transform: translate(-50%, calc(-100% - 26px)); }
    }
    @keyframes bubble-lean-left {
      0%, 100% { transform: translate(-50%, calc(-100% - 18px)) rotate(0deg); }
      50% { transform: translate(-50%, calc(-100% - 18px)) rotate(-4deg); }
    }
    @keyframes bubble-lean-right {
      0%, 100% { transform: translate(-50%, calc(-100% - 18px)) rotate(0deg); }
      50% { transform: translate(-50%, calc(-100% - 18px)) rotate(4deg); }
    }
    #farmer-speech-bubble.moving-left { animation: bubble-lean-left 0.4s ease-in-out infinite, bubble-push-left 0.4s ease-in-out infinite; }
    #farmer-speech-bubble.moving-right { animation: bubble-lean-right 0.4s ease-in-out infinite, bubble-push-right 0.4s ease-in-out infinite; }
    #farmer-speech-bubble.moving-up { animation: bubble-push-up 0.4s ease-in-out infinite; }
    #farmer-speech-bubble.idle { animation: bubble-twinkle 2s ease-in-out infinite; }
    /* Farmer "?" above head */
    #farmer-quest-indicator {
      position: absolute;
      display: none;
      font-size: 20px;
      font-weight: bold;
      color: #FFD700;
      text-shadow: 0 0 6px rgba(255,215,0,1), 1px 1px 2px #000;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 450;
      animation: questIndicatorBob 1.2s ease-in-out infinite;
    }
    @keyframes questIndicatorBob {
      0%, 100% { transform: translate(-50%, -50%); }
      50% { transform: translate(-50%, calc(-50% - 5px)); }
    }

    /* ─── DialogueSystem — 1980s Sci-Fi Comic Book Panel ─────────────────── */
    #ds-bubble {
      position: fixed;
      z-index: 99999;
      max-width: min(320px, 85vw);
      min-width: 80px;
      width: auto;
      padding: 12px 14px 10px;
      font-family: Bangers, cursive;
      font-size: clamp(12px, 3.5vw, 14px);
      letter-spacing: 0.8px;
      line-height: 1.5;
      text-align: left;
      pointer-events: auto;
      cursor: pointer;
      display: none;
      word-break: break-word;
      white-space: pre-wrap;
      box-sizing: border-box;
      /* Dark cosmic background */
      background: rgba(5, 0, 10, 0.92);
      /* Smooth transitions between emotion styles */
      transition: border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, max-width 0.3s ease;
      user-select: none;
      /* Annunaki gold border with alien glow */
      border: 2px solid rgba(201, 162, 39, 0.7);
      border-radius: 4px;
      outline: 1px solid rgba(201, 162, 39, 0.15);
      box-shadow: 0 3px 12px rgba(0,0,0,0.8), 0 0 8px rgba(201,162,39,0.15);
    }
    /* Short text (≤30 chars): compact bubble */
    #ds-bubble.ds-size-short { max-width: min(180px, 80vw); font-size: clamp(12px, 3.5vw, 15px); }
    /* Medium text (31-70 chars): default */
    #ds-bubble.ds-size-medium { max-width: min(260px, 82vw); font-size: clamp(12px, 3.5vw, 14px); }
    /* Long text (>70 chars): wider bubble */
    #ds-bubble.ds-size-long { max-width: min(340px, 88vw); font-size: clamp(11px, 3vw, 13px); }
    /* Tail pointer arrow (down-left) */
    #ds-bubble::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 22px;
      border: 10px solid transparent;
      transition: border-color 0.3s ease;
    }

    /* ── Emotion variants ── */
    .ds-bubble-happy {
      background: rgba(20,14,8,0.93);
      color: #FFD700;
      border: 2px solid #8B6914;
      border-radius: 50% 50% 50% 20% / 50% 50% 30% 30%;
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 8px rgba(255,215,0,0.15);
    }
    .ds-bubble-happy::after { border-top-color: #8B6914; }

    .ds-bubble-angry {
      background: rgba(60,8,8,0.95);
      color: #FF4500;
      border: 2px solid #CC2200;
      border-radius: 4px;
      clip-path: polygon(5% 15%,15% 0%,25% 15%,38% 0%,50% 15%,63% 0%,75% 15%,85% 0%,95% 15%,100% 35%,95% 55%,100% 75%,95% 88%,80% 100%,65% 88%,50% 100%,35% 88%,20% 100%,5% 88%,0% 75%,5% 55%,0% 35%);
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 12px rgba(255,50,0,0.25);
    }

    .ds-bubble-sad {
      background: rgba(10,20,40,0.93);
      color: #87CEEB;
      border: 2px solid #4682B4;
      border-radius: 40% 40% 60% 60% / 30% 30% 70% 70%;
      box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 8px rgba(70,130,180,0.2);
    }
    .ds-bubble-sad::after { border-top-color: #4682B4; }

    .ds-bubble-joking {
      background: rgba(20,14,8,0.93);
      color: #FFD700;
      border: 2px solid #FF8C00;
      border-radius: 30% 70% 40% 60% / 50% 50% 50% 50%;
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 10px rgba(255,140,0,0.2);
      animation: ds-wiggle 0.7s ease-in-out infinite alternate;
    }
    .ds-bubble-joking::after { border-top-color: #FF8C00; }

    .ds-bubble-thinking {
      background: rgba(30,30,50,0.93);
      color: #E0E0FF;
      border: 2px solid #9090CC;
      border-radius: 50%;
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 8px rgba(144,144,204,0.2);
    }
    /* Cloud dots instead of pointer for thinking */
    .ds-bubble-thinking::after { content: none; }
    .ds-bubble-thinking::before {
      content: '● ●';
      position: absolute;
      bottom: -22px;
      left: 22px;
      color: #9090CC;
      font-size: 10px;
      letter-spacing: 4px;
    }

    .ds-bubble-task {
      background: rgba(10,24,10,0.94);
      color: #90EE90;
      border: 2px solid #228B22;
      border-radius: 6px;
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 6px rgba(34,139,34,0.2);
    }
    .ds-bubble-task::after { border-top-color: #228B22; }

    .ds-bubble-smoky {
      background: rgba(30,30,30,0.6);
      color: #DDDDDD;
      border: 2px solid rgba(180,180,180,0.4);
      border-radius: 20px;
      box-shadow: 0 3px 20px rgba(0,0,0,0.5);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .ds-bubble-smoky::after { border-top-color: rgba(180,180,180,0.4); }

    .ds-bubble-watery {
      background: rgba(10,40,80,0.88);
      color: #7EC8E3;
      border: 2px solid #00BFFF;
      border-radius: 50%;
      box-shadow: 0 3px 12px rgba(0,0,0,0.7), 0 0 12px rgba(0,191,255,0.25);
      animation: ds-watery 2s ease-in-out infinite;
    }
    .ds-bubble-watery::after { border-top-color: #00BFFF; }

    /* ── Goal/Objective style (for questions & objectives) ── */
    .ds-bubble-goal {
      background: rgba(8,20,8,0.95);
      color: #FFD700;
      border: 2px solid #DAA520;
      border-radius: 8px;
      box-shadow: 0 3px 14px rgba(0,0,0,0.7), 0 0 10px rgba(218,165,32,0.2);
      text-align: left;
      padding: 14px 16px 12px;
    }
    .ds-bubble-goal::after { border-top-color: #DAA520; }
    .ds-bubble-goal .ds-goal-label {
      display: block;
      font-size: 10px;
      letter-spacing: 2px;
      color: #aaa;
      margin-bottom: 4px;
      text-transform: uppercase;
    }

    /* ── Typewriter characters ── */
    .ds-char {
      opacity: 0;
      display: inline;
      transition: opacity 0.05s ease;
    }
    .ds-char.visible { opacity: 1; }
    .ds-dots {
      opacity: 0.6;
      font-style: italic;
    }

    /* ── Choice buttons ── */
    .ds-bubble-choices { margin-top: 8px; }
    .ds-choice-btn {
      display: block;
      width: 100%;
      margin: 4px 0;
      padding: 6px 10px;
      background: rgba(255,215,0,0.08);
      color: #FFD700;
      border: 1px solid rgba(255,215,0,0.45);
      border-radius: 20px;
      font-family: Bangers, cursive;
      font-size: 13px;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s;
    }
    .ds-choice-btn:hover,
    .ds-choice-btn:active {
      background: rgba(255,215,0,0.22);
      box-shadow: 0 0 8px rgba(255,215,0,0.35);
    }

    /* ── Comic Book Panel header & footer ── */
    .ds-bubble-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 220, 255, 0.35);
      padding-bottom: 4px;
      margin-bottom: 6px;
    }
    .ds-aida-label {
      font-family: 'Bangers', cursive;
      font-size: 11px;
      letter-spacing: 3px;
      color: #00DCFF;
      text-shadow: 0 0 8px rgba(0,220,255,0.7);
    }
    .ds-panel-dots {
      font-size: 8px;
      color: rgba(0, 220, 255, 0.5);
      letter-spacing: 2px;
    }
    .ds-bubble-footer {
      margin-top: 6px;
      font-family: 'Bangers', cursive;
      font-size: 9px;
      letter-spacing: 2px;
      color: rgba(255, 215, 0, 0.45);
      text-align: right;
      border-top: 1px solid rgba(255, 215, 0, 0.15);
      padding-top: 3px;
      animation: ds-footer-blink 1.6s step-end infinite;
    }
    @keyframes ds-footer-blink {
      0%, 100% { opacity: 0.45; }
      50%       { opacity: 0.1; }
    }

    /* ── Comic Book image panel ── */
    .ds-bubble-image-wrap {
      width: 100%;
      margin-bottom: 8px;
      border: 2px solid rgba(0, 220, 255, 0.4);
      border-radius: 4px;
      overflow: hidden;
      background: #000;
      line-height: 0;
    }
    .ds-panel-image {
      width: 100%;
      max-height: 120px;
      object-fit: cover;
      display: block;
      filter: contrast(1.1) saturate(1.2);
    }
    /* Wider bubble when image is present */
    #ds-bubble.ds-has-image {
      max-width: min(340px, 90vw);
    }

    /* ── Keyframe animations ── */
    @keyframes ds-wiggle {
      0%   { transform: rotate(-2deg); }
      100% { transform: rotate(2deg); }
    }
    @keyframes ds-watery {
      0%   { border-radius: 50% 50% 50% 50%; }
      25%  { border-radius: 60% 40% 50% 50%; }
      50%  { border-radius: 50% 50% 60% 40%; }
      75%  { border-radius: 40% 60% 50% 50%; }
      100% { border-radius: 50% 50% 50% 50%; }
    }
    /* ─────────────────────────────────────────────────────────────────────── */

    /* Stat Notification Queue - Red/Black Dominant */
    #stat-notifications {
      position: fixed;
      top: 125px;
      left: 50%;
      transform: translateX(-50%);
      width: min(260px, calc(50vw - 14px));
      z-index: 150;
      pointer-events: none;
      text-align: center;
    }
    
    .stat-notification {
      font-family: 'Bangers', 'M PLUS Rounded 1c', cursive;
      background: linear-gradient(135deg, #0a0f1a 0%, #0d1526 50%, #0a0f1a 100%);
      border: 2px solid rgba(255,215,0,0.6);
      border-radius: 12px;
      padding: 8px 16px;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: bold;
      color: #FFD700;
      letter-spacing: 1px;
      text-shadow: 
        0 0 6px rgba(255,215,0,0.6),
        1px 1px 2px rgba(0,0,0,0.9);
      box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), 
        0 0 12px rgba(255,215,0,0.2),
        0 0 6px rgba(93,173,226,0.15),
        inset 0 0 15px rgba(0,0,0,0.5);
      animation: stat-float-in-right 0.3s ease-out;
      display: inline-block;
      max-width: fit-content;
      white-space: nowrap;
    }
    
    .stat-notification.combo-high {
      /* Keep same base style, just slightly brighter gold for combos */
      color: #FFD700;
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000,
        0 0 8px rgba(255,215,0,0.7);
    }
    
    .stat-notification.combo-mythical {
      /* For mythical combos, add slight glow effect */
      color: #FFD700;
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000,
        0 0 12px rgba(255,215,0,0.9),
        0 0 20px rgba(255,215,0,0.5);
      animation: stat-float-in-right 0.4s ease-out, subtle-glow 2s ease-in-out infinite alternate;
    }
    
    @keyframes stat-float-in-right {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes stat-fade-out {
      0% {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateX(30px) scale(0.8);
      }
    }
    
    @keyframes subtle-glow {
      0% {
        box-shadow: 
          0 3px 8px rgba(0,0,0,0.3), 
          inset 0 2px 4px rgba(0,0,0,0.2), 
          0 0 15px rgba(255,215,0,0.3);
      }
      100% {
        box-shadow: 
          0 3px 8px rgba(0,0,0,0.3), 
          inset 0 2px 4px rgba(0,0,0,0.2), 
          0 0 25px rgba(255,215,0,0.5);
      }
    }

    /* ── Living fog / water / smoke border animation ──────────────────────────
       A breathing outer glow (via ::after pseudo-elements) that evokes moving
       water, fog, or smoke shadows around all major UI surfaces.
       Using ::after keeps the animation isolated from each element's own
       box-shadow and existing ::before shine layers.
    ── */
    @keyframes ui-fog-glow {
      0%, 100% {
        box-shadow:
          0 0 6px 2px rgba(93,173,226,0.25),
          0 0 18px 7px rgba(93,173,226,0.10),
          0 0 0 1px rgba(93,173,226,0.18),
          -4px -2px 12px 3px rgba(0,40,80,0.30),
          4px 2px 12px 3px rgba(0,40,80,0.30);
        opacity: 0.7;
      }
      25% {
        box-shadow:
          0 0 10px 4px rgba(93,173,226,0.42),
          0 0 26px 10px rgba(93,173,226,0.20),
          0 0 0 2px rgba(150,210,255,0.28),
          -6px 0 14px 4px rgba(0,50,100,0.35),
          0 6px 14px 4px rgba(0,50,100,0.28);
        opacity: 1;
      }
      50% {
        box-shadow:
          0 0 14px 6px rgba(93,173,226,0.50),
          0 0 34px 14px rgba(93,173,226,0.22),
          0 0 0 2px rgba(93,173,226,0.35),
          4px -4px 16px 5px rgba(0,40,80,0.32),
          -4px 4px 16px 5px rgba(0,40,80,0.32);
        opacity: 0.95;
      }
      75% {
        box-shadow:
          0 0 8px 3px rgba(93,173,226,0.32),
          0 0 20px 8px rgba(93,173,226,0.14),
          0 0 0 1px rgba(150,210,255,0.22),
          6px 2px 12px 3px rgba(0,50,100,0.30),
          -2px -6px 12px 3px rgba(0,50,100,0.28);
        opacity: 0.85;
      }
    }

    /* Shared fog pseudo-element base */
    .camp-menu-box::after,
    .settings-container::after,
    .enhanced-notification::after,
    .stat-notification::after,
    .skill-node::after,
    .modal-content::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      z-index: -1;
      will-change: box-shadow, opacity;
      animation: ui-fog-glow 5s ease-in-out infinite;
    }

    /* Ensure fog pseudo-elements on skill nodes work (they are position:relative already) */
    .skill-node {
      position: relative;
    }

    /* Quest tracker — fixed position left-side in-game overlay with dark background */
    #quest-tracker {
      position: fixed !important;
      top: 86px !important;
      left: 12px !important;
      right: auto !important;
      color: #e0e0e0;
      text-shadow: 0 1px 3px rgba(0,0,0,0.9);
      font-size: 12px;
      background: rgba(15, 15, 20, 0.65);
      padding: 6px 10px;
      border: 1px solid rgba(255, 215, 0, 0.2);
      border-radius: 8px;
      max-width: 200px;
      z-index: 200;
      line-height: 1.5;
      box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    }

    /* Quest indicator animation */
    .quest-indicator {
      color: #FF4444;
      font-size: 24px;
      animation: pulse 1s infinite;
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.7;
        transform: scale(1.1);
      }
    }
    
    /* FRESH IMPLEMENTATION: Enhanced Notification System —
       Positioned under the XP bar (stat bar cluster, top-right) instead of centre-screen
       so notifications never obstruct gameplay. Multiple events are queued in JS. */
    :root {
      --notif-slide-distance: 120%;
    }
    .enhanced-notification {
      position: fixed;
      top: 60px;
      right: 10px;
      left: auto;
      transform: translateX(var(--notif-slide-distance));
      background: linear-gradient(to bottom, #1a3a4a 0%, #0f1f2a 100%);
      border: 3px solid #5DADE2;
      border-radius: 16px;
      padding: 12px 16px;
      width: min(260px, calc(50vw - 14px));
      max-width: 280px;
      z-index: 999;
      pointer-events: none;
      box-shadow: 0 0 30px rgba(93,173,226,0.6);
      animation: enhanced-notif-slide-in 0.4s ease-out forwards;
    }
    
    @keyframes enhanced-notif-slide-in {
      0%   { opacity: 0; transform: translateX(var(--notif-slide-distance)); }
      100% { opacity: 1; transform: translateX(0); }
    }
    
    .enhanced-notification.fade-out {
      animation: enhanced-notif-slide-out 0.3s ease-out forwards;
    }
    
    @keyframes enhanced-notif-slide-out {
      0%   { opacity: 1; transform: translateX(0); }
      100% { opacity: 0; transform: translateX(var(--notif-slide-distance)); }
    }
    
    .notification-icon {
      font-size: 28px;
      text-align: center;
      margin-bottom: 6px;
      animation: icon-bounce 0.6s ease-out;
    }
    
    @keyframes icon-bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .notification-title {
      color: #FFD700;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 5px;
      text-shadow: 0 0 10px rgba(255,215,0,0.8);
    }
    
    .notification-text {
      color: #FFFFFF;
      font-size: 13px;
      text-align: center;
      line-height: 1.4;
    }
    
    /* Story Quest Modal Styles */
    .story-quest-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(15,0,20,0.97) 0%, rgba(0,0,0,0.99) 100%);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
    }
    
    .story-quest-content {
      position: relative;
      background: linear-gradient(160deg, #0d0015 0%, #07000e 50%, #0a0510 100%);
      border: 3px solid #C9A227;
      border-radius: 4px;
      padding: 40px;
      max-width: 600px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 60px rgba(0,255,100,0.12), inset 0 0 30px rgba(0,0,0,0.9);
      outline: 1px solid rgba(201,162,39,0.2);
      outline-offset: 4px;
      animation: annunaki-border-pulse 4s ease-in-out infinite;
    }
    /* Eye glyph corner ornament on story quest */
    .story-quest-content::after {
      content: '𓂀';
      position: absolute;
      top: 6px;
      right: 10px;
      font-size: 22px;
      color: #C9A227;
      pointer-events: none;
      z-index: 2;
      animation: annunaki-glyph-flicker 3s ease-in-out infinite;
      line-height: 1;
    }
    /* Scan line on story quest */
    .story-quest-content::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,255,100,0.6), rgba(201,162,39,0.8), rgba(0,255,100,0.6), transparent);
      pointer-events: none;
      z-index: 1;
      animation: annunaki-scan 6s linear infinite;
    }
    
    .story-quest-title {
      color: #C9A227;
      font-size: 34px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      text-shadow: 0 0 15px rgba(201,162,39,0.9), 0 0 30px rgba(201,162,39,0.4), 0 0 5px rgba(0,255,100,0.3);
      letter-spacing: 3px;
      font-family: 'Bangers', cursive;
    }
    
    .story-quest-body {
      color: #E8D5A3;
      font-size: 17px;
      line-height: 1.7;
      margin-bottom: 25px;
      text-align: left;
    }
    
    .story-quest-body p {
      margin-bottom: 15px;
    }
    
    .story-quest-body strong {
      color: #C9A227;
    }
    
    .story-quest-body strong.highlight {
      color: #00FF66;
    }
    
    /* ═══ ANNUNAKI ALIEN OCCULT MYSTIC AI THEME KEYFRAMES ═══ */
    @keyframes annunaki-border-pulse {
      0%   { box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 60px rgba(0,255,100,0.15), inset 0 0 30px rgba(0,0,0,0.9); }
      50%  { box-shadow: 0 0 35px rgba(201,162,39,0.8), 0 0 90px rgba(0,255,100,0.3),  inset 0 0 40px rgba(0,0,0,0.95); }
      100% { box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 60px rgba(0,255,100,0.15), inset 0 0 30px rgba(0,0,0,0.9); }
    }
    @keyframes annunaki-corner-spin {
      0%   { transform: rotate(0deg)   scale(1.0); opacity: 0.6; }
      50%  { transform: rotate(180deg) scale(1.1); opacity: 1.0; }
      100% { transform: rotate(360deg) scale(1.0); opacity: 0.6; }
    }
    @keyframes annunaki-scan {
      0%   { top: 0%;    opacity: 0; }
      5%   { opacity: 0.7; }
      95%  { opacity: 0.7; }
      100% { top: 100%;  opacity: 0; }
    }
    @keyframes annunaki-glyph-flicker {
      0%, 100% { opacity: 0.4; text-shadow: 0 0 6px #C9A227; }
      50%       { opacity: 1.0; text-shadow: 0 0 14px #C9A227, 0 0 28px rgba(201,162,39,0.5); }
    }
    @keyframes you-died-stats-rise {
      0%   { transform: translateY(20px); opacity: 0; }
      100% { transform: translateY(0);    opacity: 1; }
    }
    @keyframes death-vignette-pulse {
      0%,100% { box-shadow: inset 0 0 80px rgba(200,0,0,0.25); }
      50%      { box-shadow: inset 0 0 120px rgba(200,0,0,0.5); }
    }

    /* Comic Book Tutorial Modal - Annunaki Occult AI Theme */
    .comic-tutorial-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(ellipse at center, rgba(20,0,30,0.98) 0%, rgba(0,0,0,0.99) 100%);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      animation: fadeIn 0.3s ease-out;
    }
    
    .comic-panel {
      background: linear-gradient(160deg, #0d0015 0%, #07000e 50%, #0a0510 100%);
      border: 3px solid #C9A227;
      border-radius: 4px;
      padding: 40px;
      max-width: 600px;
      width: 90%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 60px rgba(0,255,100,0.15), inset 0 0 30px rgba(0,0,0,0.9);
      position: relative;
      animation: annunaki-border-pulse 4s ease-in-out infinite;
      outline: 1px solid rgba(201,162,39,0.2);
      outline-offset: 4px;
    }

    /* Scanning light strip across the panel */
    .comic-panel::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0,255,100,0.6), rgba(201,162,39,0.8), rgba(0,255,100,0.6), transparent);
      pointer-events: none;
      z-index: 1;
      animation: annunaki-scan 6s linear infinite;
    }

    /* Corner ornament — top-left eye glyph */
    .comic-panel::after {
      content: '𓂀';
      position: absolute;
      top: 6px;
      right: 10px;
      font-size: 22px;
      color: #C9A227;
      pointer-events: none;
      z-index: 2;
      animation: annunaki-glyph-flicker 3s ease-in-out infinite;
      line-height: 1;
    }
    
    .comic-title {
      color: #C9A227;
      font-size: clamp(24px, 6vw, 48px);
      font-weight: 900;
      text-align: center;
      margin-bottom: 25px;
      text-shadow: 
        3px 3px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        0 0 20px rgba(201,162,39,0.9),
        0 0 40px rgba(201,162,39,0.4),
        0 0 6px rgba(0,255,100,0.3);
      letter-spacing: 4px;
      text-transform: uppercase;
      font-family: 'Bangers', cursive;
    }
    
    .comic-text {
      color: #E8D5A3;
      font-size: clamp(14px, 4vw, 20px);
      line-height: 1.9;
      margin-bottom: 30px;
      text-align: center;
      text-shadow: 1px 1px 4px rgba(0,0,0,1);
      font-weight: 500;
    }
    
    .comic-text strong {
      color: #C9A227;
      font-weight: 900;
      text-shadow: 0 0 12px rgba(201,162,39,0.8),
                   2px 2px 4px rgba(0,0,0,1);
    }
    
    .comic-action {
      background: linear-gradient(to bottom, #C9A227 0%, #8B6914 100%);
      color: #000000;
      font-size: 22px;
      font-weight: 900;
      padding: 16px 40px;
      border: 3px solid #000;
      border-radius: 2px;
      cursor: pointer;
      text-align: center;
      text-transform: uppercase;
      box-shadow: 0 4px 16px rgba(0,0,0,0.9),
                  0 0 20px rgba(201,162,39,0.5),
                  0 0 6px rgba(0,255,100,0.2);
      transition: all 0.2s;
      display: block;
      margin: 0 auto;
      letter-spacing: 3px;
      outline: 1px solid rgba(201,162,39,0.3);
      outline-offset: 2px;
    }
    
    .comic-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.95),
                  0 0 30px rgba(201,162,39,0.8),
                  0 0 10px rgba(0,255,100,0.3);
      background: linear-gradient(to bottom, #E0B830 0%, #A07820 100%);
    }
    
    .comic-action:active {
      transform: translateY(1px);
      box-shadow: 0 2px 10px rgba(0,0,0,0.7),
                  0 0 15px rgba(201,162,39,0.5);
    }
    
    .menu-btn-primary {
      width: 100%;
      padding: 15px;
      font-size: 22px;
      background: linear-gradient(to bottom, #C9A227, #8B6914);
      border: 2px solid #C9A227;
      color: #000;
      letter-spacing: 2px;
    }

    .menu-btn-primary:hover {
      filter: brightness(1.15);
      transform: scale(1.02);
      box-shadow: 0 0 20px rgba(201,162,39,0.6);
    }

    /* Yellow comic-style confirmation button used in modals/info boxes */
    .comic-confirm-btn {
      display: block;
      width: 100%;
      padding: 15px;
      font-size: 22px;
      font-weight: bold;
      background: #FFD700;
      color: #000;
      border: 3px solid #000;
      border-radius: 10px;
      box-shadow: 4px 4px 0 #000;
      cursor: pointer;
      margin-top: 10px;
      font-family: 'Bangers', cursive;
      letter-spacing: 1px;
    }
    .comic-confirm-btn:hover {
      background: #FFC200;
      transform: scale(1.03);
    }
    .comic-confirm-btn:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 #000;
    }
    .overlay-close-x {
      position: absolute;
      top: 10px;
      right: 10px;
      background: none;
      border: none;
      color: #fff;
      font-size: 1.4em;
      font-weight: bold;
      cursor: pointer;
      z-index: 100;
      text-shadow: 0 0 6px #ffd700;
      line-height: 1;
      padding: 4px 8px;
    }
    .overlay-close-x:hover {
      color: #ffd700;
      text-shadow: 0 0 12px #ffd700, 0 0 20px #ffa500;
    }
    
    
    /* Wave Counter - Removed (was in stats bar) */
    
    
    /* Equipment Menu Button */
    #equipment-btn {
      position: absolute;
      top: 20px;
      right: 150px;
      background: linear-gradient(to bottom, #5A3A31, #3a2a21);
      border: 3px solid #000;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 24px;
      cursor: pointer;
      pointer-events: auto;
      z-index: 100;
      box-shadow: 
        0 0 0 1px rgba(255,215,0,0.7),
        0 0 0 4px #000,
        0 0 8px rgba(255,215,0,0.5),
        0 4px 0 #2a1a11;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFD700;
      text-shadow: 0 0 8px rgba(255,215,0,0.6);
      animation: bar-border-alive 3s ease-in-out infinite;
    }
    
    /* PR #117: Menu button - always visible in right upper corner */
    #menu-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: linear-gradient(to bottom, #5A3A31, #3a2a21);
      border: 3px solid #000;
      border-radius: 50%;
      width: 44px;
      height: 44px;
      font-size: 22px;
      cursor: pointer;
      pointer-events: auto;
      z-index: 100;
      box-shadow: 
        0 0 0 1px rgba(255,215,0,0.7),
        0 0 0 4px #000,
        0 0 8px rgba(255,215,0,0.5),
        0 4px 0 #2a1a11;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFD700;
      text-shadow: 0 0 8px rgba(255,215,0,0.6);
      animation: bar-border-alive 3s ease-in-out infinite;
    }
    
    #equipment-btn:hover, #menu-btn:hover {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 6px 0 #2a1a11, 0 8px 16px rgba(0,0,0,0.6);
      filter: brightness(1.2);
    }
    
    #equipment-btn:active, #menu-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #2a1a11, 0 4px 8px rgba(0,0,0,0.4);
    }
    
    /* PR #117: Options Menu Modal */
    #options-menu {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.9);
      z-index: 200;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
    }
    
    .options-content {
      background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
      background-image: 
        linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%),
        radial-gradient(circle at 3px 3px, rgba(255,215,0,0.06) 2px, transparent 2px);
      background-size: 100%, 15px 15px;
      border: 5px solid #FFD700;
      border-radius: 15px;
      padding: 30px;
      max-width: 400px;
      width: 90%;
      box-shadow: 
        0 10px 40px rgba(0,0,0,0.9),
        0 0 40px rgba(255,215,0,0.4),
        0 0 20px rgba(255,215,0,0.2),
        inset 0 0 30px rgba(0,0,0,0.8);
    }
    
    .options-title {
      font-size: 32px;
      color: #FFD700;
      text-align: center;
      margin-bottom: 20px;
      text-shadow: 0 0 15px rgba(255,215,0,0.8);
    }
    
    .options-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    #equipment-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #2a1a11, 0 8px 16px rgba(0,0,0,0.6);
      filter: brightness(1.2);
    }
    
    #equipment-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #2a1a11, 0 4px 8px rgba(0,0,0,0.4);
    }

    /* Joystick — pointer-events toggled by JS (_syncJoystickZone) only during active gameplay */
    #joystick-zone {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      touch-action: none;
      z-index: 50;
    }
    
    .joystick-outer {
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(93, 173, 226, 0.3);
      border: 3px solid rgba(93, 173, 226, 0.5);
      display: none;
      pointer-events: none;
    }
    
    .joystick-inner {
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(93, 173, 226, 0.7);
      border: 2px solid rgba(255, 255, 255, 0.8);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    /* Level Up Modal */
    #levelup-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background:
        radial-gradient(ellipse 800px 800px at 50% 50%,
          rgba(0, 0, 0, 0.75),
          rgba(0, 0, 0, 0.95) 50%,
          rgba(0, 0, 0, 0.98) 100%),
        linear-gradient(to bottom, rgba(8, 8, 16, 0.98), rgba(4, 6, 14, 0.98));
      display: none; /* Flex when active */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none; /* Modal background should not block clicks */
      z-index: 500;
      animation: fogwater-bg 8s ease-in-out infinite;
    }

    /* Eye of Horus pyramid logo background watermark */
    #levelup-modal::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      transform: translate(-50%, -50%);
      background-image:
        radial-gradient(ellipse at center, rgba(255, 215, 0, 0.08) 0%, transparent 70%),
        conic-gradient(from 0deg at 50% 30%,
          transparent 0deg,
          rgba(255, 215, 0, 0.15) 30deg,
          transparent 60deg,
          transparent 120deg,
          rgba(255, 215, 0, 0.15) 150deg,
          transparent 180deg,
          transparent 240deg,
          rgba(255, 215, 0, 0.15) 270deg,
          transparent 300deg,
          transparent 360deg);
      opacity: 0.5;
      filter: blur(1px);
      animation: pyramid-pulse 4s ease-in-out infinite, pyramid-rotate 20s linear infinite;
      pointer-events: none;
      z-index: 1;
    }

    /* Eye of Horus symbol in center */
    #levelup-modal::after {
      content: "\1F441";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 80px;
      color: rgba(255, 215, 0, 0.25);
      text-shadow:
        0 0 15px rgba(255, 215, 0, 0.3),
        0 0 30px rgba(255, 180, 0, 0.2),
        0 0 90px rgba(0, 0, 0, 0.8);
      animation: eye-glow 3s ease-in-out infinite;
      pointer-events: none;
      z-index: 1;
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.25));
    }

    @keyframes pyramid-pulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.6; }
    }

    @keyframes pyramid-rotate {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes eye-glow {
      0%, 100% {
        opacity: 0.2;
        text-shadow:
          0 0 10px rgba(255, 215, 0, 0.2),
          0 0 20px rgba(255, 180, 0, 0.15),
          0 0 60px rgba(0, 0, 0, 0.6);
      }
      50% {
        opacity: 0.35;
        text-shadow:
          0 0 20px rgba(255, 215, 0, 0.35),
          0 0 40px rgba(255, 180, 0, 0.25),
          0 0 120px rgba(0, 0, 0, 0.8);
      }
    }

    .modal, .menu-container {
      max-height: 90vh;
      overflow-y: auto;
      box-sizing: border-box;
    }

    .modal-content {
      /* Dark glass panel with subtle noise pattern */
      background: linear-gradient(135deg, rgba(18, 18, 28, 0.97) 0%, rgba(8, 8, 16, 0.98) 100%);
      background-image:
        linear-gradient(135deg, rgba(18, 18, 28, 0.97) 0%, rgba(8, 8, 16, 0.98) 100%),
        radial-gradient(circle at 3px 3px, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 100%, 10px 10px;
      padding: 20px 18px;
      border-radius: 16px;
      border: 2px solid rgba(255, 215, 0, 0.4);
      outline: 2px solid rgba(255, 255, 255, 0.06);
      outline-offset: 2px;
      width: 95%;
      max-width: 900px;
      max-height: 90vh;
      overflow-y: auto;
      text-align: center;
      box-sizing: border-box;
      /* Glass-like shadow with subtle golden edge */
      box-shadow:
        0 12px 40px rgba(0,0,0,0.95),
        0 0 30px rgba(0,0,0,0.8),
        0 0 2px rgba(255,215,0,0.2),
        inset 0 0 40px rgba(0,0,0,0.9),
        inset 0 1px 0 rgba(255,255,255,0.05);
      pointer-events: auto; /* Modal content should receive clicks */
      position: relative;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 10;
    }

    /* Swirling red/gold/black fog mist around the edges */
    .modal-content::before {
      content: '';
      position: absolute;
      inset: -20px;
      background:
        radial-gradient(ellipse 150px 80px at 10% 20%,
          rgba(255, 34, 0, 0.2) 0%,
          rgba(255, 215, 0, 0.15) 30%,
          transparent 70%),
        radial-gradient(ellipse 150px 80px at 90% 80%,
          rgba(255, 34, 0, 0.2) 0%,
          rgba(255, 215, 0, 0.15) 30%,
          transparent 70%),
        radial-gradient(ellipse 120px 100px at 50% 0%,
          rgba(255, 215, 0, 0.15) 0%,
          rgba(0, 0, 0, 0.3) 40%,
          transparent 70%),
        radial-gradient(ellipse 120px 100px at 50% 100%,
          rgba(255, 215, 0, 0.15) 0%,
          rgba(0, 0, 0, 0.3) 40%,
          transparent 70%);
      border-radius: 20px;
      z-index: -1;
      opacity: 0.8;
      filter: blur(20px);
      animation: fog-swirl 8s ease-in-out infinite;
      pointer-events: none;
    }

    /* Additional edge glow with pulse */
    .modal-content::after {
      content: '';
      position: absolute;
      inset: -6px;
      background: linear-gradient(45deg,
        rgba(255, 34, 0, 0.3) 0%,
        rgba(255, 215, 0, 0.25) 25%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(255, 215, 0, 0.25) 75%,
        rgba(255, 34, 0, 0.3) 100%);
      border-radius: 20px;
      z-index: -1;
      opacity: 0.4;
      animation: edge-pulse 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes fog-swirl {
      0%, 100% {
        background:
          radial-gradient(ellipse 150px 80px at 10% 20%,
            rgba(255, 34, 0, 0.2) 0%,
            rgba(255, 215, 0, 0.15) 30%,
            transparent 70%),
          radial-gradient(ellipse 150px 80px at 90% 80%,
            rgba(255, 34, 0, 0.2) 0%,
            rgba(255, 215, 0, 0.15) 30%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 50% 0%,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 50% 100%,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            transparent 70%);
      }
      25% {
        background:
          radial-gradient(ellipse 150px 80px at 15% 30%,
            rgba(255, 215, 0, 0.2) 0%,
            rgba(255, 34, 0, 0.15) 30%,
            transparent 70%),
          radial-gradient(ellipse 150px 80px at 85% 70%,
            rgba(255, 215, 0, 0.2) 0%,
            rgba(255, 34, 0, 0.15) 30%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 45% 5%,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(255, 215, 0, 0.15) 40%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 55% 95%,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(255, 215, 0, 0.15) 40%,
            transparent 70%);
      }
      50% {
        background:
          radial-gradient(ellipse 150px 80px at 5% 40%,
            rgba(255, 34, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.2) 30%,
            transparent 70%),
          radial-gradient(ellipse 150px 80px at 95% 60%,
            rgba(255, 34, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.2) 30%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 50% 10%,
            rgba(255, 215, 0, 0.2) 0%,
            rgba(255, 34, 0, 0.15) 40%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 50% 90%,
            rgba(255, 215, 0, 0.2) 0%,
            rgba(255, 34, 0, 0.15) 40%,
            transparent 70%);
      }
      75% {
        background:
          radial-gradient(ellipse 150px 80px at 8% 15%,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 34, 0, 0.2) 30%,
            transparent 70%),
          radial-gradient(ellipse 150px 80px at 92% 85%,
            rgba(255, 215, 0, 0.15) 0%,
            rgba(255, 34, 0, 0.2) 30%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 55% 2%,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(255, 215, 0, 0.1) 40%,
            transparent 70%),
          radial-gradient(ellipse 120px 100px at 45% 98%,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(255, 215, 0, 0.1) 40%,
            transparent 70%);
      }
    }

    @keyframes edge-pulse {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 0.5; }
    }
    
    /* UPGRADE GRID: Flexbox layout for upgrade choices.
       Cards wrap into 2 columns on wide screens and stack gracefully on narrow ones
       (e.g. Samsung S10 @ 360 px wide) without horizontal overflow.
       transform:translateZ(0) enables GPU compositing to stop flicker on older Android. */
    #upgrade-list, #level-up-choices {
      display: flex;
      flex-direction: row;
      gap: 15px;
      justify-content: center;
      align-items: center;
      margin-top: 15px;
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
      padding-bottom: 36px;
    }

    #upgrade-choices {
      display: flex;
      flex-wrap: wrap; /* CRITICAL: allows cards to wrap to a second row */
      gap: 8px;
      justify-content: center;
      align-items: center;
      max-width: 100%;
    }

    /* Playing-card layout: items keep their own fixed width (200px set inline). */
    #upgrade-list > *, #level-up-choices > * {
      flex-shrink: 0;
      /* Hardware-acceleration hints to prevent flicker on older Android (Samsung S10) */
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    h2 {
      /* Comic-magazine style — matches the soft, cozy but clear Bangers font used in stat menus */
      font-family: 'Bangers', cursive;
      font-weight: 400; /* Bangers is naturally bold at this weight */
      color: #FFD700;
      margin-top: 0;
      font-size: 36px;
      text-shadow: 
        3px 3px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        0 0 15px rgba(255,215,0,0.5),
        0 0 8px rgba(255,215,0,0.4);
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* Fogwater: animated breathing dark outer border for level-up cards */
    @keyframes fogwater-outer {
      0%   { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3); }
      25%  { box-shadow: 0 0 0 4px rgba(4,10,22,0.95), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3); }
      50%  { box-shadow: 0 0 0 5px rgba(3,7,20,0.98), 0 4px 14px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.3); }
      75%  { box-shadow: 0 0 0 4px rgba(5,9,22,0.95), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3); }
      100% { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3); }
    }

    /* Fogwater: slow breathing gradient on level-up modal background */
    @keyframes fogwater-bg {
      0%   { background:
        radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0,0,0,0.75), rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.98) 100%),
        linear-gradient(to bottom, rgba(26,26,46,0.97), rgba(22,33,62,0.97)); }
      33%  { background:
        radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0,0,0,0.75), rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.98) 100%),
        linear-gradient(to bottom, rgba(20,24,52,0.97), rgba(18,36,68,0.97)); }
      66%  { background:
        radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0,0,0,0.75), rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.98) 100%),
        linear-gradient(to bottom, rgba(24,30,50,0.97), rgba(20,30,58,0.97)); }
      100% { background:
        radial-gradient(ellipse 800px 800px at 50% 50%, rgba(0,0,0,0.75), rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.98) 100%),
        linear-gradient(to bottom, rgba(26,26,46,0.97), rgba(22,33,62,0.97)); }
    }

    /* Glass glow inward flash on card press */
    @keyframes card-glass-press {
      0%   { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 rgba(255,255,255,0); }
      40%  { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 1px 4px rgba(0,0,0,0.4), inset 0 0 22px rgba(255,255,255,0.18), inset 0 0 10px rgba(200,230,255,0.12); }
      100% { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 rgba(255,255,255,0); }
    }

    /* Glassy inward press effect for UI buttons — replaces white flash */
    @keyframes btn-glass-press {
      0%   { box-shadow: 0 6px 0 #3a2a21, 0 8px 15px rgba(0,0,0,0.3), inset 0 0 0 rgba(255,255,255,0); }
      35%  { box-shadow: 0 1px 0 #3a2a21, 0 2px 6px rgba(0,0,0,0.4), inset 0 0 20px rgba(200,230,255,0.22), inset 0 0 8px rgba(255,255,255,0.14); }
      100% { box-shadow: 0 6px 0 #3a2a21, 0 8px 15px rgba(0,0,0,0.3), inset 0 0 0 rgba(255,255,255,0); }
    }

    /* Melt-shadow inward sweep for hold interactions */
    @keyframes melt-shadow-inward {
      0%   { opacity: 0; }
      20%  { opacity: 0.55; }
      100% { opacity: 0.95; }
    }

    /* Rarity-tinted hold ring pulses from center outward while holding */
    @keyframes hold-ring-pulse {
      0%   { transform: scale(0.2); opacity: 0.9; }
      100% { transform: scale(1);   opacity: 0; }
    }

    .upgrade-card {
      width: clamp(180px, 30vw, 240px) !important; /* Bigger premium cards */
      height: clamp(240px, 42vw, 300px) !important;
      background: linear-gradient(180deg, #1a1a2e, #0d1020);
      margin: 0;
      padding: 16px !important;
      font-size: clamp(12px, 2.4vw, 16px); /* Larger readable text */
      border-radius: 16px;
      border: 3px solid #888888;
      outline: none;
      cursor: pointer;
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
      position: relative;
      overflow: visible; /* Allow drips and border-flow to extend outside */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;
      transform-style: preserve-3d;
      will-change: box-shadow, transform;
    }

    /* Ensure inner content elements layer above border-flow/drip effects (z-index layering, not clipping) */
    .upgrade-card .upgrade-rarity-header,
    .upgrade-card .upgrade-title,
    .upgrade-card .upgrade-icon,
    .upgrade-card .upgrade-desc {
      position: relative;
      z-index: 2;
    }

    .upgrade-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 45%;
      background:
        linear-gradient(135deg,
          rgba(255, 255, 255, 0.12) 0%,
          rgba(255, 255, 255, 0.08) 20%,
          transparent 40%,
          rgba(255, 255, 255, 0.05) 60%,
          transparent 100%),
        linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
      border-radius: 14px 14px 0 0;
      pointer-events: none;
      z-index: 1;
      filter: blur(0.5px);
      animation: metallic-shimmer 3s ease-in-out infinite;
    }

    @keyframes metallic-shimmer {
      0%, 100% {
        background:
          linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.08) 20%,
            transparent 40%,
            rgba(255, 255, 255, 0.05) 60%,
            transparent 100%),
          linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
      }
      50% {
        background:
          linear-gradient(135deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.12) 20%,
            transparent 35%,
            rgba(255, 255, 255, 0.08) 55%,
            transparent 100%),
          linear-gradient(to bottom, rgba(255,255,255,0.14), transparent);
      }
    }

    /* Melt-shadow overlay: transformed to light fill meter for hold interactions */
    .upgrade-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 14px;
      background: radial-gradient(ellipse at center,
        var(--rarity-glow-color, rgba(200, 230, 255, 0.9)) 0%,
        transparent 100%);
      opacity: 0;
      pointer-events: none;
      z-index: 10;
      mix-blend-mode: screen;
      filter: brightness(1.5);
    }

    /* Rarity-tinted hold ring: expands from center while button is held */
    .upgrade-card .hold-ring {
      position: absolute;
      inset: 0;
      border-radius: 10px;
      border: 3px solid var(--rarity-glow-color, rgba(200,230,255,0.7));
      pointer-events: none;
      z-index: 11;
      opacity: 0;
      transform: scale(0.2);
    }

    .upgrade-card.holding::after {
      animation: light-fill-meter 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
    }

    @keyframes light-fill-meter {
      0% {
        opacity: 0;
        transform: scale(0.3);
        filter: brightness(2);
      }
      50% {
        opacity: 0.5;
        transform: scale(0.65);
        filter: brightness(1.8);
      }
      100% {
        opacity: 0.85;
        transform: scale(1);
        filter: brightness(1.5);
      }
    }

    .upgrade-card.holding .hold-ring {
      animation: hold-ring-pulse 1.2s ease-out forwards;
    }

    .upgrade-card:hover {
      transform: perspective(1000px) translateY(-12px) scale(1.06) rotateX(5deg);
      filter: brightness(1.2) saturate(1.1);
      animation: none;
      box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 40px var(--rarity-glow-color, rgba(200, 230, 255, 0.4)),
        inset 0 2px 0 rgba(255, 255, 255, 0.15);
    }

    .upgrade-card:not(.holding):hover::after {
      animation: card-glare-sweep 0.55s ease-out forwards !important;
      background: linear-gradient(115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 30%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.05) 70%,
        transparent 100%) !important;
      opacity: 1 !important;
      pointer-events: none;
      mix-blend-mode: overlay;
      filter: blur(2px);
    }

    @keyframes card-glare-sweep {
      0%   { transform: translateX(-150%) skewX(-20deg); opacity: 0; }
      10%  { opacity: 1; }
      100% { transform: translateX(250%) skewX(-20deg); opacity: 0; }
    }

    .upgrade-card:active {
      transform: scale(0.97) perspective(600px) rotateX(2deg);
      animation: card-glass-press 0.45s ease-out forwards;
      filter: brightness(1.08);
      border-color: rgba(200,230,255,0.9);
    }
    
    /* Weapon upgrades - Red edges */
    .upgrade-card.weapon {
      border-color: #FF4444;
      animation: rarity-glow-weapon 3s ease-in-out infinite;
    }
    @keyframes rarity-glow-weapon {
      0%, 100% { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 4px 8px rgba(0,0,0,0.5), 0 0 8px rgba(255,68,68,0.15); }
      50% { box-shadow: 0 0 0 5px rgba(3,7,16,0.98), 0 4px 8px rgba(0,0,0,0.5), 0 0 12px rgba(255,68,68,0.25); }
    }
    
    .upgrade-card.weapon:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 18px 45px rgba(0,0,0,0.85),
        0 0 15px rgba(255,68,68,0.45),
        0 0 30px rgba(255,68,68,0.3),
        inset 0 2px 0 rgba(255,255,255,0.14);
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    
    /* Class upgrades - Purple edges */
    .upgrade-card.class {
      border-color: #9b59b6;
      background: linear-gradient(135deg, #100818 0%, #0a0510 100%);
      animation: rarity-glow-class 3s ease-in-out infinite;
    }
    @keyframes rarity-glow-class {
      0%, 100% { box-shadow: 0 0 0 4px rgba(4,8,18,0.97), 0 4px 8px rgba(0,0,0,0.5), 0 0 8px rgba(155,89,182,0.15); }
      50% { box-shadow: 0 0 0 5px rgba(3,7,16,0.98), 0 4px 8px rgba(0,0,0,0.5), 0 0 12px rgba(155,89,182,0.25); }
    }
    
    .upgrade-card.class:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 18px 45px rgba(0,0,0,0.85),
        0 0 15px rgba(155,89,182,0.45),
        0 0 30px rgba(155,89,182,0.3),
        inset 0 2px 0 rgba(255,255,255,0.14);
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    
    /* Rarity-based edge colors */
    .upgrade-card.rarity-common {
      border-color: #cccccc;
      background: linear-gradient(135deg, #141414 0%, #0e0e0e 100%);
      animation: rarity-glow-common 3s ease-in-out infinite;
      --rarity-glow-color: rgba(220,220,220,0.55);
    }
    @keyframes rarity-glow-common {
      0%, 100% {
        box-shadow:
          0 0 0 4px rgba(4,8,18,0.97),
          0 8px 20px rgba(0,0,0,0.7),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 8px rgba(200,200,200,0.28),
          0 0 16px rgba(180,180,180,0.14),
          inset 0 2px 0 rgba(255,255,255,0.10);
      }
      50% {
        box-shadow:
          0 0 0 5px rgba(3,7,16,0.98),
          0 10px 25px rgba(0,0,0,0.75),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 14px rgba(220,220,220,0.32),
          0 0 24px rgba(200,200,200,0.18),
          inset 0 2px 0 rgba(255,255,255,0.12);
      }
    }
    .upgrade-card.rarity-common:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 14px 36px rgba(0,0,0,0.8),
        0 0 18px rgba(220,220,220,0.38),
        0 0 30px rgba(200,200,200,0.18),
        inset 0 2px 0 rgba(255,255,255,0.12);
      border-color: #e0e0e0;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }

    /* Uncommon = Green */
    .upgrade-card.rarity-uncommon {
      border-color: #44bb44;
      background: linear-gradient(135deg, #091509 0%, #051005 100%);
      animation: rarity-glow-uncommon 3.2s ease-in-out infinite;
      --rarity-glow-color: rgba(68,187,68,0.60);
    }
    .upgrade-card.rarity-uncommon:hover {
      box-shadow:
        0 0 0 4px rgba(4,18,4,0.97),
        0 14px 36px rgba(0,0,0,0.8),
        0 0 16px rgba(68,187,68,0.38),
        0 0 28px rgba(50,170,50,0.20),
        inset 0 2px 0 rgba(150,255,150,0.14);
      border-color: #66dd66;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    @keyframes rarity-glow-uncommon {
      0%, 100% {
        box-shadow:
          0 0 0 4px rgba(4,18,4,0.97),
          0 8px 20px rgba(0,0,0,0.7),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 8px rgba(68,187,68,0.18),
          0 0 16px rgba(50,170,50,0.10),
          inset 0 2px 0 rgba(150,255,150,0.08);
      }
      50% {
        box-shadow:
          0 0 0 5px rgba(3,16,3,0.98),
          0 10px 26px rgba(0,0,0,0.75),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 14px rgba(68,187,68,0.30),
          0 0 26px rgba(50,170,50,0.16),
          inset 0 2px 0 rgba(150,255,150,0.12);
      }
    }
    
    .upgrade-card.rarity-rare {
      border-color: #3498DB;
      background: linear-gradient(135deg, #0d1520 0%, #081018 100%);
      animation: rarity-glow-rare 2.5s ease-in-out infinite;
      --rarity-glow-color: rgba(52,152,219,0.65);
    }
    .upgrade-card.rarity-rare:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 16px 40px rgba(0,0,0,0.8),
        0 0 15px rgba(52,152,219,0.4),
        0 0 25px rgba(52,152,219,0.25),
        inset 0 2px 0 rgba(255,255,255,0.15);
      border-color: #5dade2;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    @keyframes rarity-glow-rare {
      0%, 100% {
        box-shadow:
          0 0 0 4px rgba(4,8,18,0.97),
          0 8px 22px rgba(0,0,0,0.7),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 8px rgba(52,152,219,0.15),
          0 0 15px rgba(52,152,219,0.08),
          inset 0 2px 0 rgba(255,255,255,0.08);
      }
      50% {
        box-shadow:
          0 0 0 5px rgba(3,7,16,0.98),
          0 12px 30px rgba(0,0,0,0.8),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 13px rgba(52,152,219,0.28),
          0 0 25px rgba(52,152,219,0.13),
          inset 0 2px 0 rgba(255,255,255,0.12);
      }
    }
    
    /* Epic = Purple (ARPG spec) */
    .upgrade-card.rarity-epic {
      border-color: #9b44f0;
      background: linear-gradient(135deg, #120820 0%, #0b0515 100%);
      animation: rarity-glow-epic 2s ease-in-out infinite;
      --rarity-glow-color: rgba(155,68,240,0.65);
    }
    .upgrade-card.rarity-epic:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 18px 45px rgba(0,0,0,0.85),
        0 0 18px rgba(155,68,240,0.4),
        0 0 30px rgba(155,68,240,0.25),
        inset 0 2px 0 rgba(255,255,255,0.16);
      border-color: #bb66ff;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    @keyframes rarity-glow-epic {
      0%, 100% {
        box-shadow:
          0 0 0 4px rgba(4,8,18,0.97),
          0 10px 25px rgba(0,0,0,0.75),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 9px rgba(155,68,240,0.18),
          0 0 20px rgba(155,68,240,0.1),
          inset 0 2px 0 rgba(255,255,255,0.1);
      }
      50% {
        box-shadow:
          0 0 0 5px rgba(3,7,16,0.98),
          0 14px 35px rgba(0,0,0,0.85),
          0 4px 12px rgba(0,0,0,0.5),
          0 0 18px rgba(155,68,240,0.22),
          0 0 30px rgba(155,68,240,0.12),
          inset 0 2px 0 rgba(255,255,255,0.14);
      }
    }
    
    /* Legendary = Gold (ARPG spec) */
    .upgrade-card.rarity-legendary {
      border-color: #FFD700;
      background: linear-gradient(135deg, #1a1400 0%, #120e00 100%);
      animation: legendary-glow 2s ease-in-out infinite alternate;
      --rarity-glow-color: rgba(255,215,0,0.70);
    }
    .upgrade-card.rarity-legendary:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 20px 50px rgba(0,0,0,0.9),
        0 0 20px rgba(255,215,0,0.48),
        0 0 35px rgba(255,180,0,0.3),
        0 0 50px rgba(255,215,0,0.15),
        inset 0 2px 0 rgba(255,255,255,0.18);
      border-color: #ffe44d;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    
    /* Mythic = Red/Black (ARPG spec) */
    .upgrade-card.rarity-mythical {
      border-color: #FF2200;
      background: linear-gradient(135deg, #200000 0%, #0a0000 100%);
      animation: mythical-glow 1.2s ease-in-out infinite alternate;
      --rarity-glow-color: rgba(255,34,0,0.75);
      overflow: visible;
    }
    .upgrade-card.rarity-mythical:hover {
      box-shadow:
        0 0 0 4px rgba(4,8,18,0.97),
        0 22px 60px rgba(0,0,0,0.95),
        0 0 25px rgba(255,34,0,0.49),
        0 0 45px rgba(255,0,0,0.35),
        0 0 70px rgba(200,0,0,0.2),
        inset 0 2px 0 rgba(255,255,255,0.2);
      border-color: #ff5533;
      transform: translateY(-12px) scale(1.06) rotateX(5deg);
    }
    
    @keyframes legendary-glow {
      0% {
        box-shadow:
          0 0 0 4px rgba(4,8,18,0.97),
          0 12px 30px rgba(0,0,0,0.8),
          0 6px 15px rgba(0,0,0,0.6),
          0 0 13px rgba(255,215,0,0.3),
          0 0 25px rgba(255,180,0,0.15),
          inset 0 0 0 2px rgba(0,0,0,0.4),
          inset 0 2px 0 rgba(255,255,255,0.12);
      }
      100% {
        box-shadow:
          0 0 0 5px rgba(3,7,16,0.98),
          0 16px 40px rgba(0,0,0,0.9),
          0 8px 20px rgba(0,0,0,0.7),
          0 0 20px rgba(255,215,0,0.45),
          0 0 35px rgba(255,180,0,0.25),
          0 0 50px rgba(255,215,0,0.1),
          inset 0 0 0 2px rgba(0,0,0,0.4),
          inset 0 2px 0 rgba(255,255,255,0.15);
      }
    }
    
    @keyframes mythical-glow {
      0% {
        box-shadow:
          0 0 0 4px rgba(4,8,18,0.97),
          0 14px 35px rgba(0,0,0,0.85),
          0 6px 18px rgba(0,0,0,0.6),
          0 0 15px rgba(255,34,0,0.35),
          0 0 30px rgba(200,0,0,0.2),
          inset 0 0 0 2px rgba(0,0,0,0.4),
          inset 0 2px 0 rgba(255,255,255,0.12);
      }
      100% {
        box-shadow:
          0 0 0 5px rgba(3,7,16,0.98),
          0 18px 45px rgba(0,0,0,0.95),
          0 8px 25px rgba(0,0,0,0.7),
          0 0 23px rgba(255,34,0,0.48),
          0 0 40px rgba(200,0,0,0.3),
          0 0 60px rgba(255,0,0,0.15),
          inset 0 0 0 2px rgba(0,0,0,0.4),
          inset 0 2px 0 rgba(255,255,255,0.15);
      }
    }
    
    /* ── ARPG Rarity Badge ────────────────────────────────────────────────── */
    .upgrade-rarity-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 1.5px;
      padding: 1px 6px;
      border-radius: 3px;
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .rarity-badge-common    { color: #ccc;    background: rgba(200,200,200,0.12); border: 1px solid #ccc; }
    .rarity-badge-rare      { color: #3498DB; background: rgba(52,152,219,0.15); border: 1px solid #3498DB; }
    .rarity-badge-epic      { color: #bb66ff; background: rgba(155,68,240,0.15); border: 1px solid #9b44f0; }
    .rarity-badge-legendary { color: #FFD700; background: rgba(255,215,0,0.15);  border: 1px solid #FFD700; }
    .rarity-badge-mythic    { color: #ff2200; background: rgba(255,34,0,0.15);   border: 1px solid #FF2200; text-shadow: 0 0 6px rgba(255,34,0,0.8); }


    /* ── Melting Drip Border Effects ─────────────────────────────────────── */
    /* Card drip: liquid drops that fall from bottom edge */
    .card-drip {
      position: absolute;
      bottom: -3px;
      border-radius: 0 0 60% 60%;
      background: var(--rarity-glow-color, rgba(200,230,255,0.85));
      box-shadow: 0 3px 10px var(--rarity-glow-color, rgba(200,230,255,0.5));
      pointer-events: none;
      z-index: 20;
      transform-origin: top center;
      animation: drip-fall var(--drip-dur, 2.2s) ease-in var(--drip-delay, 0s) infinite;
      opacity: 0;
    }
    @keyframes drip-fall {
      0%   { height: 0;    opacity: 0;   transform: scaleX(1)    translateY(0); }
      15%  { height: 6px;  opacity: 0.9; transform: scaleX(1)    translateY(0); }
      40%  { height: 14px; opacity: 1;   transform: scaleX(0.85) translateY(0); }
      65%  { height: 16px; opacity: 0.9; transform: scaleX(0.7)  translateY(10px); }
      85%  { height: 10px; opacity: 0.5; transform: scaleX(0.5)  translateY(22px); }
      100% { height: 0;    opacity: 0;   transform: scaleX(0.2)  translateY(30px); }
    }

    /* Side-edge melt streaks */
    .card-streak {
      position: absolute;
      width: 2px;
      border-radius: 1px;
      background: linear-gradient(to bottom, transparent, var(--rarity-glow-color, rgba(200,230,255,0.6)) 40%, transparent);
      pointer-events: none;
      z-index: 19;
      opacity: 0;
      animation: streak-drip var(--streak-dur, 3s) ease-in var(--streak-delay, 0s) infinite;
    }
    @keyframes streak-drip {
      0%   { height: 0;    opacity: 0;   transform: translateY(0); }
      20%  { height: 30px; opacity: 0.7; transform: translateY(0); }
      60%  { height: 50px; opacity: 0.5; transform: translateY(22px); }
      100% { height: 10px; opacity: 0;   transform: translateY(60px); }
    }

    /* Spinning border glow: conic sweep around card edges — sits behind card */
    .border-flow {
      position: absolute;
      inset: -3px;
      border-radius: 19px;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
      will-change: transform;
    }
    .border-flow::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(
        135deg,
        transparent 0%,
        var(--rarity-glow-color, rgba(200,230,255,0.7)) 25%,
        transparent 50%,
        var(--rarity-glow-color, rgba(200,230,255,0.5)) 75%,
        transparent 100%
      );
      background-size: 300% 300%;
      animation: border-pulse var(--pulse-dur, 3s) ease-in-out infinite;
      opacity: 0.75;
    }
    .border-flow::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 16px;
      background: linear-gradient(180deg, #1a1a2e 0%, #0d1020 100%);
    }
    @keyframes border-pulse {
      0%   { background-position: 0% 0%;   opacity: 0.4; }
      50%  { background-position: 100% 100%; opacity: 0.85; }
      100% { background-position: 0% 0%;   opacity: 0.4; }
    }
    .upgrade-card.rarity-common    { --pulse-dur: 4s; }
    .upgrade-card.rarity-uncommon  { --pulse-dur: 3.5s; }
    .upgrade-card.rarity-rare      { --pulse-dur: 3s; }
    .upgrade-card.rarity-epic      { --pulse-dur: 2s; }
    .upgrade-card.rarity-legendary { --pulse-dur: 1.4s; }
    .upgrade-card.rarity-mythical  { --pulse-dur: 0.9s; }

    /* Hold-progress fill that sweeps the card border during the 1.2s hold */
    .hold-progress {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      pointer-events: none;
      z-index: 12;
      border: 3px solid transparent;
      opacity: 0;
      transition: none;
    }
    .upgrade-card.holding .hold-progress {
      border-color: var(--rarity-glow-color, rgba(200,230,255,0.9));
      opacity: 1;
      animation: hold-progress-sweep 0.6s linear forwards;
    }
    @keyframes hold-progress-sweep {
      0%   { clip-path: inset(50% 50% 50% 50%); filter: brightness(1.2); }
      25%  { clip-path: inset(0% 75% 0% 0%);   filter: brightness(1.4); }
      50%  { clip-path: inset(0% 50% 0% 0%);   filter: brightness(1.6); }
      75%  { clip-path: inset(0% 25% 0% 0%);   filter: brightness(1.8); }
      100% { clip-path: inset(0% 0%  0% 0%);   filter: brightness(2.2); }
    }

    /* ── Mythic Particles ─────────────────────────────────────────────────── */
    .mythic-particle {
      position: absolute;
      left: var(--mp-x, 50%);
      bottom: 0;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #ff2200;
      box-shadow: 0 0 6px #ff4400;
      animation: mythicParticleRise 1.8s ease-in var(--mp-delay, 0s) infinite;
      pointer-events: none;
    }
    @keyframes mythicParticleRise {
      0%   { transform: translateY(0)    scale(1);   opacity: 0.9; }
      70%  { transform: translateY(-60px) scale(0.7); opacity: 0.5; }
      100% { transform: translateY(-90px) scale(0.2); opacity: 0; }
    }

    /* ── Focus Path Prompt ────────────────────────────────────────────────── */
    .focus-path-prompt {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      padding: 12px 0;
    }
    .focus-path-btn {
      flex: 1;
      max-width: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 24px 16px;
      border-radius: 12px;
      border: 2px solid rgba(255,255,255,0.25);
      background: rgba(10,10,20,0.9);
      cursor: pointer;
      transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
      user-select: none;
    }
    .focus-path-btn:hover, .focus-path-btn:active {
      transform: scale(1.04);
    }
    .focus-weapons {
      border-color: #3498DB;
      box-shadow: 0 0 14px rgba(52,152,219,0.35);
    }
    .focus-weapons:hover {
      border-color: #5dade2;
      box-shadow: 0 0 24px rgba(52,152,219,0.6);
    }
    .focus-passives {
      border-color: #9b44f0;
      box-shadow: 0 0 14px rgba(155,68,240,0.35);
    }
    .focus-passives:hover {
      border-color: #bb66ff;
      box-shadow: 0 0 24px rgba(155,68,240,0.6);
    }
    .fp-icon   { font-size: 36px; }
    .fp-title  { font-size: 15px; font-weight: 800; letter-spacing: 1px; color: #fff; }
    .fp-desc   { font-size: 11px; color: rgba(255,255,255,0.65); text-align: center; }

    /* ── Relic Loot Screen Cards ──────────────────────────────────────────── */
    .relic-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 200px;
      padding: 24px 16px 20px;
      background: linear-gradient(160deg, #1a1200 0%, #0d0a00 100%);
      border: 2px solid #FFD700;
      border-radius: 14px;
      box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 0 40px rgba(255,180,0,0.15);
      cursor: pointer;
      user-select: none;
      animation: relicFlyIn 0.55s cubic-bezier(0.22,1,0.36,1) var(--relic-delay,0s) both;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .relic-card:hover {
      transform: scale(1.05) translateY(-4px);
      box-shadow: 0 0 28px rgba(255,215,0,0.65), 0 0 56px rgba(255,180,0,0.25);
    }
    .relic-card.relic-holding {
      transform: scale(1.08);
      box-shadow: 0 0 36px rgba(255,215,0,0.85), 0 0 70px rgba(255,200,0,0.4);
    }
    .relic-icon  { font-size: 44px; }
    .relic-title { font-size: 14px; font-weight: 900; letter-spacing: 1.5px; color: #FFD700; text-align: center; }
    .relic-desc  { font-size: 11px; color: rgba(255,255,255,0.8); text-align: center; line-height: 1.5; }
    .relic-pick-hint { font-size: 10px; color: rgba(255,215,0,0.55); letter-spacing: 1px; margin-top: 4px; }
    @keyframes relicFlyIn {
      0%   { opacity: 0; transform: translateY(-120px) scale(0.4) rotate(-8deg); }
      65%  { opacity: 1; transform: translateY(8px)    scale(1.06) rotate(2deg); }
      100% { opacity: 1; transform: translateY(0)      scale(1)    rotate(0deg); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes popIn {
      0% { 
        opacity: 0;
        transform: scale(0.05);
      }
      60% {
        opacity: 1;
        transform: scale(1.05);
      }
      80% {
        opacity: 1;
        transform: scale(0.97);
      }
      100% { 
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
        transform: scale(1);
      }
      50% {
        opacity: 0.6;
        transform: scale(1.2);
      }
    }
    
    @keyframes questArrowPulse {
      0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255,215,0,1));
      }
      50% {
        opacity: 0.6;
        filter: drop-shadow(0 0 20px rgba(255,215,0,0.9));
      }
    }
    
    @keyframes lightning-pulse {
      0%, 100% { 
        filter: brightness(1.2);
      }
      50% { 
        filter: brightness(1.3);
      }
    }

    @keyframes lightning-flash {
      0%   { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #00aaff; filter: brightness(1.2); border-color: #ffffff; }
      20%  { box-shadow: 0 0 40px #fff, 0 0 80px #00aaff, 0 0 120px #0066ff; filter: brightness(2.8); border-color: #ffffff; }
      40%  { box-shadow: 0 0 20px #00aaff, 0 0 50px #0044ff; filter: brightness(2.0); }
      60%  { box-shadow: 0 0 35px #ffffff, 0 0 70px #00aaff; filter: brightness(2.4); border-color: #aaddff; }
      80%  { box-shadow: 0 0 15px #00aaff, 0 0 30px #0066ff; filter: brightness(1.6); }
      100% { box-shadow: 0 0 10px currentColor; filter: brightness(1.2); }
    }

    .upgrade-card.lightning-selected {
      animation: lightning-flash 0.5s ease-out forwards !important;
    }

    .upgrade-title {
      font-family: 'Bangers', cursive;
      font-weight: 400;
      color: #FFD700;
      font-size: 16px; /* Slightly smaller for better fit in compact cards */
      letter-spacing: 1px;
      text-shadow: 0 0 10px rgba(255,215,0,0.8), 0 0 20px rgba(255,215,0,0.4), 2px 2px 4px rgba(0,0,0,1);
      margin-bottom: 8px;
    }

    .upgrade-rarity-header {
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      /* color and text-shadow applied inline (rarity-specific) */
    }

    .upgrade-icon {
      font-size: 28px;
      line-height: 1;
      margin-bottom: 6px;
      display: block;
      filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
    }

    .upgrade-desc {
      font-size: 13px;
      color: #c9d1d9; /* Lighter, more legible text */
      line-height: 1.4;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
      display: block; /* Make descriptions visible for clarity */
    }
    
    /* Perk upgrades (same as class) */
    .upgrade-card.perk {
      border-color: #9b59b6;
      box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 15px rgba(155,89,182,0.3), inset 0 0 0 2px rgba(0,0,0,0.4);
      animation: perkPulse 2s infinite;
    }
    
    .upgrade-card.perk:hover {
      box-shadow: 0 0 20px rgba(155,89,182,0.8), 0 0 40px rgba(155,89,182,0.6);
    }
    
    /* Highest possible upgrade gets legendary treatment */
    .upgrade-card.max-upgrade {
      border-color: #e74c3c;
      background: linear-gradient(135deg, #2e0a0a 0%, #1f0505 100%);
      box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 20px rgba(231,76,60,0.5), inset 0 0 0 2px rgba(0,0,0,0.4);
      animation: legendary-glow 2s ease-in-out infinite alternate;
    }
    
    .upgrade-card.max-upgrade:hover {
      box-shadow: 0 0 25px rgba(231,76,60,1), 0 0 50px rgba(231,76,60,0.8);
    }
    
    @keyframes perkPulse {
      0%, 100% { box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 15px rgba(155,89,182,0.3); }
      50% { box-shadow: 0 4px 8px rgba(0,0,0,0.5), 0 0 25px rgba(155,89,182,0.6); }
    }

    /* ─── Card 3D flip structure ─── */
    .upgrade-card {
      perspective: 1100px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      will-change: transform;
    }
    .card-face {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: 12px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .card-front {
      /* Front face — revealed after flip */
      transform: rotateY(-180deg);
      will-change: transform;
    }

    /* ─── Card back face: black/gold/silver Aida-style ─── */
    .card-back-face {
      background: radial-gradient(ellipse at 50% 30%, #181100 0%, #0c0900 45%, #000000 100%);
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    /* Gold cross-hatch pattern — same as Aida cinematic screen */
    .card-back-face::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background:
        repeating-linear-gradient(45deg,  rgba(201,162,39,0.08) 0px, rgba(201,162,39,0.08) 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(-45deg, rgba(180,170,140,0.05) 0px, rgba(180,170,140,0.05) 1px, transparent 1px, transparent 10px);
      pointer-events: none;
    }
    /* Inner rectangle removed — entire back face is Eye of Horus design, no inner border */
    /* Hieroglyph strips top + bottom */
    .card-back-hier-strip {
      position: absolute;
      left: 0; right: 0;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      letter-spacing: 6px;
      color: rgba(201,162,39,0.45);
      pointer-events: none;
      z-index: 3;
      overflow: hidden;
    }
    .card-back-hier-top { top: 4px;  }
    .card-back-hier-bot { bottom: 4px; }
    /* Eye of Horus — fills the entire card back face */
    .card-back-horus {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: cardBackHorusPulse 3s ease-in-out infinite;
    }
    /* Eye of Horus SVG fills the full card */
    .card-back-horus svg {
      width: 100%;
      height: 100%;
    }
    @keyframes cardBackHorusPulse {
      0%, 100% { filter: drop-shadow(0 0 6px rgba(201,162,39,0.55)) drop-shadow(0 0 14px rgba(201,162,39,0.3)); }
      50%       { filter: drop-shadow(0 0 12px rgba(201,162,39,0.85)) drop-shadow(0 0 28px rgba(255,215,0,0.5)); }
    }
    /* CRT scan-line overlay on card back */
    .card-back-scanline {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px);
      pointer-events: none;
      z-index: 4;
    }
    /* Hide hold-progress and border-flow rectangles on the card back face (before flip).
       They are only relevant when the front face is showing (after card is flipped). */
    .upgrade-card:not(.card-flipped) .hold-progress,
    .upgrade-card:not(.card-flipped) .border-flow {
      display: none;
    }
    /* When flipped, show front */
    .upgrade-card.card-flipped .card-inner {
      transform: rotateY(180deg);
    }
    /* Flip-in-place settle helper */
    .upgrade-card.card-flipping .card-inner {
      transition: transform 0.5s cubic-bezier(0.22, 1.8, 0.36, 1);
    }

    /* Card reveal rotation - sequential one-by-one entrance */
    @keyframes cardRevealRotate {
      0% {
        opacity: 0;
        transform: scale(0.2) rotateY(90deg) translateY(-40px);
        filter: blur(2px);
      }
      60% {
        opacity: 1;
        transform: scale(1.08) rotateY(-5deg) translateY(5px);
        filter: blur(0);
      }
      80% {
        transform: scale(0.97) rotateY(2deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg) translateY(0);
        filter: blur(0);
      }
    }

    /* ─── 6 unique card entry animations (different direction per card) ─── */
    /* 1: Slams in from top — squash-and-stretch impact */
    @keyframes cardEnterFromTop {
      0%   { opacity:0; transform: translate(0,-280%) scaleX(0.6) scaleY(0.5); filter:blur(4px); }
      45%  { opacity:1; transform: translate(0, 4%) scaleX(1.12) scaleY(0.85); filter:blur(0); }
      62%  { transform: translate(0,-3%) scaleX(0.95) scaleY(1.08); }
      78%  { transform: translate(0, 1%) scaleX(1.04) scaleY(0.97); }
      90%  { transform: translate(0,-0.5%) scaleX(0.99) scaleY(1.01); }
      100% { opacity:1; transform: translate(0,0) scale(1); }
    }
    /* 2: Rockets in from left, smacks into place */
    @keyframes cardEnterFromLeft {
      0%   { opacity:0; transform: translate(-300%,0) scale(0.4) rotate(-12deg); filter:blur(4px); }
      48%  { opacity:1; transform: translate(6%,0) scaleX(0.88) scaleY(1.1) rotate(2deg); filter:blur(0); }
      65%  { transform: translate(-3%,0) scaleX(1.08) scaleY(0.95) rotate(-1deg); }
      82%  { transform: translate(1%,0) scaleX(0.98) scaleY(1.02) rotate(0.3deg); }
      100% { opacity:1; transform: translate(0,0) scale(1) rotate(0deg); }
    }
    /* 3: Blasts in from right */
    @keyframes cardEnterFromRight {
      0%   { opacity:0; transform: translate(300%,0) scale(0.4) rotate(12deg); filter:blur(4px); }
      48%  { opacity:1; transform: translate(-6%,0) scaleX(0.88) scaleY(1.1) rotate(-2deg); filter:blur(0); }
      65%  { transform: translate(3%,0) scaleX(1.08) scaleY(0.95) rotate(1deg); }
      82%  { transform: translate(-1%,0) scaleX(0.98) scaleY(1.02) rotate(-0.3deg); }
      100% { opacity:1; transform: translate(0,0) scale(1) rotate(0deg); }
    }
    /* 4: Erupts from bottom */
    @keyframes cardEnterFromBottom {
      0%   { opacity:0; transform: translate(0,300%) scaleX(0.5) scaleY(0.6) rotate(-8deg); filter:blur(4px); }
      48%  { opacity:1; transform: translate(0,-6%) scaleX(1.1) scaleY(0.88) rotate(2deg); filter:blur(0); }
      65%  { transform: translate(0,3%) scaleX(0.95) scaleY(1.08) rotate(-1deg); }
      82%  { transform: translate(0,-1%) scaleX(1.02) scaleY(0.98) rotate(0.3deg); }
      100% { opacity:1; transform: translate(0,0) scale(1) rotate(0deg); }
    }
    /* 5: Pops from nothing at center */
    @keyframes cardEnterZoomPop {
      0%   { opacity:0; transform: scale(0) rotate(0deg); filter:blur(8px); }
      38%  { opacity:1; transform: scale(1.22) rotate(-4deg); filter:blur(1px); }
      58%  { transform: scaleX(0.9) scaleY(1.08) rotate(1.5deg); filter:blur(0); }
      74%  { transform: scale(1.05) rotate(-0.5deg); }
      88%  { transform: scaleX(0.99) scaleY(1.01) rotate(0.2deg); }
      100% { opacity:1; transform: scale(1) rotate(0deg); }
    }
    /* 6: Diagonal slam from top-right */
    @keyframes cardEnterSpiral {
      0%   { opacity:0; transform: translate(220%,-220%) scale(0.15) rotate(270deg); filter:blur(6px); }
      50%  { opacity:1; transform: translate(-3%,3%) scaleX(1.1) scaleY(0.88) rotate(-5deg); filter:blur(0); }
      66%  { transform: translate(2%,-2%) scaleX(0.95) scaleY(1.07) rotate(2deg); }
      82%  { transform: translate(-1%,1%) scaleX(1.03) scaleY(0.98) rotate(-0.5deg); }
      100% { opacity:1; transform: translate(0,0) scale(1) rotate(0deg); }
    }

    /* Card thud flash — bright impact burst when card smacks into place */
    @keyframes cardThudFlash {
      0%   { box-shadow: 0 0 0 0px rgba(255,255,255,0.0); }
      12%  { box-shadow: 0 0 0 12px rgba(255,255,255,0.75), 0 0 45px rgba(255,255,255,0.55), 0 0 80px rgba(200,220,255,0.3); }
      35%  { box-shadow: 0 0 0 6px rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.2); }
      100% { box-shadow: none; }
    }
    .card-thud-flash {
      animation: cardThudFlash 0.42s ease-out forwards !important;
    }

    /* ─── Green selection edge animation ─── */
    @keyframes greenEdgeSweep {
      0%   { clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%); opacity: 1; }
      25%  { clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 0%); }
      50%  { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%); }
      75%  { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
      100% { clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%); opacity: 1; }
    }
    .card-green-edge {
      position: absolute;
      inset: -3px;
      border-radius: 15px;
      border: 3px solid #44ff44;
      box-shadow: 0 0 12px #44ff44, inset 0 0 8px rgba(68,255,68,0.3);
      z-index: 20;
      pointer-events: none;
      opacity: 0;
      will-change: opacity, box-shadow;
    }
    .card-green-edge.animating {
      animation: greenEdgeAppear 1.0s ease-out forwards;
    }
    @keyframes greenEdgeAppear {
      0%   { opacity: 0; box-shadow: 0 0 4px #44ff44; }
      20%  { opacity: 1; box-shadow: 0 0 12px #44ff44, 0 0 30px rgba(68,255,68,0.5); }
      80%  { opacity: 1; box-shadow: 0 0 18px #44ff44, 0 0 50px rgba(68,255,68,0.7); }
      100% { opacity: 1; box-shadow: 0 0 25px #44ff44, 0 0 70px rgba(68,255,68,0.9), 0 0 100px rgba(68,255,68,0.5); }
    }
    .card-green-edge-tracer {
      position: absolute;
      inset: -3px;
      border-radius: 15px;
      border: 3px solid transparent;
      background: none;
      z-index: 21;
      pointer-events: none;
    }

    /* ─── Hole suck animation for the level-up modal ─── */
    @keyframes holeSuck {
      0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; filter: none; }
      40%  { transform: translate(-50%,-50%) scale(0.95); opacity: 0.9; filter: blur(1px); }
      70%  { transform: translate(-50%,-50%) scale(0.6); opacity: 0.5; filter: blur(4px); }
      100% { transform: translate(-50%,-50%) scale(0); opacity: 0; filter: blur(12px); }
    }
    .lvlup-suck-out {
      animation: holeSuck 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
    }

    /* Wall fade-in animation - happens first before cards */
    @keyframes wallFadeIn {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes swooshFromTopLeft {
      0%   { opacity: 0; transform: translate(-120%, -120%) scale(0.5) rotate(-15deg); }
      60%  { opacity: 1; transform: translate(5%, 5%) scale(1.04) rotate(1deg); }
      100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    }
    @keyframes swooshFromTopRight {
      0%   { opacity: 0; transform: translate(120%, -120%) scale(0.5) rotate(15deg); }
      60%  { opacity: 1; transform: translate(-5%, 5%) scale(1.04) rotate(-1deg); }
      100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    }
    @keyframes swooshFromBottomLeft {
      0%   { opacity: 0; transform: translate(-120%, 120%) scale(0.5) rotate(15deg); }
      60%  { opacity: 1; transform: translate(5%, -5%) scale(1.04) rotate(-1deg); }
      100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    }
    @keyframes swooshFromBottomRight {
      0%   { opacity: 0; transform: translate(120%, 120%) scale(0.5) rotate(-15deg); }
      60%  { opacity: 1; transform: translate(-5%, -5%) scale(1.04) rotate(1deg); }
      100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
    }

    /* Level-up heading fly-in */
    @keyframes levelUpFly {
      0%   { opacity: 0; transform: translateY(-50px) scale(0.5); letter-spacing: 12px; }
      50%  { opacity: 1; transform: translateY(6px) scale(1.12); letter-spacing: 4px; }
      80%  { opacity: 1; transform: translateY(-2px) scale(1.05); letter-spacing: 5px; }
      100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 6px; }
    }

    /* Damage Numbers */
    .damage-number {
      position: absolute;
      font-family: 'Nunito', 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', sans-serif; /* Cozy rounded font */
      font-weight: 900;
      font-size: 13px; /* Slightly larger for legibility */
      pointer-events: none !important;
      animation: floatUp 1s forwards;
      z-index: 50;
      letter-spacing: 0.5px;
      will-change: transform, opacity;
    }
    
    .damage-number.critical {
      /* CRIT MAGNITUDE COLOR: Bright gold for critical hits */
      color: #FFD700;
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000, 
        0 0 8px rgba(255,215,0,0.9), 
        0 0 15px rgba(255,215,0,0.6);
      font-size: 18px; /* SMALLER: Reduced from 24px */
    }
    
    .damage-number.normal {
      /* NORMAL DAMAGE: White/light grey */
      color: #DDDDDD;
      text-shadow: 
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000,
        0 0 4px rgba(221,221,221,0.5);
    }
    
    /* NEW: Super crit/headshot damage - bright red */
    .damage-number.headshot {
      color: #FF0000;
      text-shadow: 
        -2px -2px 0 #000, 
        2px -2px 0 #000, 
        -2px 2px 0 #000, 
        2px 2px 0 #000, 
        0 0 12px rgba(255,0,0,1), 
        0 0 24px rgba(255,0,0,0.8);
      font-size: 22px; /* Biggest for headshots */
    }

    @keyframes floatUp {
      0% { transform: translateY(0) scale(1); opacity: 1; }
      100% { transform: translateY(-60px) scale(1.3); opacity: 0; }
    }

    @keyframes goldBagPop {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
      50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1) translateY(-50px); opacity: 0; }
    }

    @keyframes goldTextFloat {
      0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
      50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1) translateY(-30px); opacity: 0; }
    }

    /* Game Over Screen */
    #gameover-screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.55);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      z-index: 150;
      color: white;
    }

    .btn {
      background: #5A3A31;
      color: white;
      border: 3px solid #000;
      padding: 15px 30px;
      font-size: 20px;
      border-radius: 50px;
      margin-top: 20px;
      font-weight: bold;
      /* Enhanced 3D depth effect */
      box-shadow: 
        0 6px 0 #3a2a21,
        0 8px 15px rgba(0,0,0,0.3);
      transition: all 0.1s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transform: translateY(0);
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    /* 3D press-down animation on hover */
    .btn:hover {
      transform: translateY(2px);
      box-shadow: 
        0 4px 0 #3a2a21,
        0 6px 12px rgba(0,0,0,0.4);
    }
    
    /* 3D press-down animation on click */
    .btn:active {
      transform: translateY(6px);
      box-shadow: 
        0 0 0 #3a2a21,
        0 2px 8px rgba(0,0,0,0.5);
    }
    
    .btn:hover {
      box-shadow: 0 6px 0 #3a2a21, 0 0 20px rgba(90,58,49,0.6);
      filter: brightness(1.1);
      transform: translateY(2px) scale(1.03);
    }
    
    .btn:active {
      transform: translateY(4px) scale(0.98);
      box-shadow: 0 0 0 #3a2a21, 0 2px 8px rgba(0,0,0,0.5);
      animation: btn-glass-press 0.4s ease-out;
    }
    
    .btn:active::before {
      width: 300px;
      height: 300px;
    }

    .btn-small {
      background: #5A3A31;
      color: white;
      border: 2px solid #000;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 30px;
      font-weight: bold;
      box-shadow: 0 3px 0 #3a2a21, 0 0 0 rgba(90,58,49,0);
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }
    
    .btn-small::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }
    
    .btn-small:hover {
      box-shadow: 0 5px 0 #3a2a21, 0 0 20px rgba(90,58,49,0.6);
      filter: brightness(1.1);
      transform: scale(1.03);
    }
    
    .btn-small:active {
      transform: translateY(3px) scale(0.98);
      box-shadow: 0 0 0 #3a2a21, 0 2px 6px rgba(0,0,0,0.4);
      animation: btn-glass-press 0.4s ease-out;
    }
    
    .btn-small:active::before {
      width: 200px;
      height: 200px;
    }

    /* Loading Screen */
    #loading-screen {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #1a1a2e; /* Dark fallback — image not yet available */
      /* background-image: url('../321E5768-E77B-4471-8C32-5D7C1D715A4B.png'); — file missing, disabled */
      background-size: cover;
      background-position: center;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      overflow: hidden;
      transition: opacity 0.5s ease-out;
    }

    #loading-screen.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    #loading-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(80% 80% at 50% 20%, rgba(100,80,180,0.15), rgba(0,0,0,0.5)),
        linear-gradient(to bottom, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%);
      pointer-events: none;
    }

    #loading-screen > * {
      position: relative;
      z-index: 1;
    }

    .loading-splash-logo {
      max-width: 80%;
      max-height: 50%;
      width: auto;
      height: auto;
      object-fit: contain;
      margin-bottom: 40px;
      animation: pulse 2s infinite;
      display: block;
    }

    .loading-splash-title {
      font-size: 42px;
      font-weight: bold;
      color: #5DADE2;
      text-shadow: 0 0 20px rgba(93,173,226,0.8), 0 0 40px rgba(93,173,226,0.5);
      margin-bottom: 40px;
      animation: pulse 2s infinite;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .game-title {
      font-size: 48px;
      color: #5DADE2;
      text-shadow: 0 0 20px rgba(93,173,226,0.8), 0 0 40px rgba(93,173,226,0.5);
      margin-bottom: 40px;
      animation: pulse 2s infinite;
      display: none;
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .loading-bar-container {
      width: 300px;
      height: 20px;
      background: #0a0a0a; /* Darker black background */
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid #8B4513; /* Brown border */
      margin-bottom: 40px;
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
    }

    .loading-bar {
      height: 100%;
      background: linear-gradient(to right, #FFE44D, #FFB84D, #E85D3C); /* Brighter yellow to orange to reddish */
      width: 0%;
      transition: width 0.3s ease;
      box-shadow: 0 0 15px rgba(255, 180, 77, 0.9), inset 0 1px 2px rgba(255,255,255,0.3); /* Enhanced glow with highlight */
    }

    /* Main Menu - PERMANENTLY DISABLED (Engine 2.0 boots directly to 3D CampWorld) */
    #main-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #1a1a2e, #16213e);
      display: none !important; /* Force hidden - game boots to 3D camp instead */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 50; /* Lower than UI layer buttons */
    }

    #main-menu::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../654811F9-1760-4A74-B977-73ECB1A92913.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
      z-index: -1;
    }

    .menu-title {
      font-family: 'Bangers', cursive;
      font-size: 42px;
      color: #5DADE2;
      text-shadow: 0 0 20px rgba(93,173,226,0.8), 0 0 40px rgba(93,173,226,0.5);
      margin-bottom: 40px;
      display: none;
    }

    .menu-buttons {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .menu-btn {
      background: transparent; /* Invisible - overlays text in background image */
      color: transparent; /* Hide button text - text visible via background image */
      border: none;
      padding: 15px 40px;
      font-size: 24px;
      font-weight: bold;
      box-shadow: none;
      position: absolute;
      width: 260px; /* Reduced from 300px */
      height: 60px;
      cursor: pointer;
      transition: all 0.2s ease;
      overflow: visible;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 10px;
      text-shadow: none;
      letter-spacing: 2px;
    }

    .menu-btn:hover {
      background: rgba(93,173,226,0.15); /* Subtle highlight on hover so player knows it's a button */
      border-radius: 10px;
      transform: translateX(-50%) scale(1.03);
    }

    .menu-btn:active {
      background: rgba(93,173,226,0.3);
      transform: translateX(-50%) translateY(2px);
    }

    #start-game-btn { top: 55%; } /* Position START GAME button in middle-lower area */
    #camp-btn { top: 65%; } /* Position CAMP button below START GAME */

    .gold-display {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      color: #FFD700;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(255,215,0,0.8), 2px 2px 4px #000;
      pointer-events: none; /* Allow clicks to pass through */
      z-index: 1;
    }
    
    /* Hide gold on main menu - only show in inventory/forge/progression/death summary */
    #main-menu .gold-display {
      display: none;
    }

    /* Progression Shop */
    #progression-shop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.92);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 60; /* Above camp-screen (z-index: 50) */
      overflow-y: auto;
      padding: 20px;
      box-sizing: border-box;
    }

    .shop-title {
      font-size: 24px;
      color: #5DADE2;
      text-shadow: 0 0 15px rgba(93,173,226,0.8);
      font-weight: bold;
    }

    .shop-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 15px;
      width: 100%;
    }

    .upgrade-shop-card {
      background: linear-gradient(to bottom, #2c3e50, #1a252f);
      border: 3px solid #34495e;
      border-radius: 15px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .upgrade-shop-card.max-level {
      opacity: 0.6;
      border-color: #95a5a6;
    }

    .upgrade-shop-title {
      font-size: 20px;
      color: #5DADE2;
      font-weight: bold;
    }

    .upgrade-shop-desc {
      font-size: 14px;
      color: #bdc3c7;
    }

    .upgrade-shop-level {
      font-size: 16px;
      color: #f39c12;
      font-weight: bold;
    }

    .upgrade-shop-cost {
      font-size: 18px;
      color: #FFD700;
      font-weight: bold;
    }

    .upgrade-buy-btn {
      background: linear-gradient(to bottom, #27ae60, #229954);
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
      margin-top: 5px;
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    .upgrade-buy-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .upgrade-buy-btn:hover:not(:disabled) {
      box-shadow: 0 0 20px rgba(39,174,96,0.6);
      filter: brightness(1.1);
    }

    .upgrade-buy-btn:disabled {
      background: linear-gradient(to bottom, #7f8c8d, #95a5a6);
      cursor: not-allowed;
    }

    .upgrade-buy-btn:not(:disabled):active {
      transform: scale(0.95);
      animation: btn-glass-press 0.4s ease-out;
    }

    .upgrade-buy-btn:not(:disabled):active::before {
      width: 200px;
      height: 200px;
    }

    .back-btn {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, #FFD700 0%, #FFA500 100%);
      color: #000;
      border: 4px solid #000;
      padding: 12px 36px;
      font-size: 18px;
      border-radius: 12px;
      font-weight: 900;
      font-family: 'Bangers', cursive;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0,0,0,0.6), 0 0 15px rgba(255,215,0,0.4);
      transition: all 0.15s ease;
      position: relative;
      overflow: hidden;
    }

    /* Override for back buttons inside camp menu boxes — comic-action style */
    .camp-section-back-btn, #shop-back-btn {
      position: relative;
      left: auto;
      transform: none;
      display: inline-block;
      background: linear-gradient(to bottom, #FFD700 0%, #FFA500 100%);
      color: #000000;
      border: 5px solid #000;
      box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.6);
      border-radius: 12px;
      padding: 12px 30px;
      font-size: 18px;
      font-weight: 900;
      font-family: 'Bangers', cursive;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s;
    }

    .camp-section-back-btn:hover, #shop-back-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.9), 0 0 30px rgba(255,215,0,0.8);
      background: linear-gradient(to bottom, #FFED4E 0%, #FFB52E 100%);
    }

    #shop-back-btn {
      display: block;
      width: min(800px, 90vw);
      margin-bottom: 6px;
      box-sizing: border-box;
    }

    .camp-section-back-btn {
      margin-bottom: 6px;
      width: min(800px, 90vw);
      box-sizing: border-box;
    }

    .camp-section-back-btn:active, #shop-back-btn:active {
      transform: translateY(0);
      box-shadow: 0 3px 15px rgba(0,0,0,0.7), 0 0 15px rgba(255,215,0,0.5);
    }

    .back-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: translate(-50%, -50%);
      transition: width 0.6s, height 0.6s;
    }

    .back-btn:hover {
      box-shadow: 0 6px 0 #a93226, 0 0 20px rgba(231,76,60,0.6);
      filter: brightness(1.1);
    }

    .back-btn:active {
      transform: translateX(-50%) translateY(4px) scale(0.98);
      box-shadow: 0 0 0 #3a2a21, 0 2px 8px rgba(0,0,0,0.4);
      animation: btn-glass-press 0.4s ease-out;
    }

    .back-btn:active::before {
      width: 300px;
      height: 300px;
    }

    /* Credits/Achievements Screens */
    #credits-screen, #achievements-screen, #camp-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, #1a1a2e, #16213e);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow-y: auto;
      z-index: 50; /* Lower than UI layer buttons */
      box-sizing: border-box;
      /* Safe area padding */
      padding-top: max(20px, env(safe-area-inset-top));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: max(60px, env(safe-area-inset-bottom));
      padding-left: max(12px, env(safe-area-inset-left));
    }

    .screen-title {
      font-size: 36px;
      color: #5DADE2;
      text-shadow: 0 0 15px rgba(93,173,226,0.8);
      margin-bottom: 16px;
    }

    .screen-content {
      font-size: 18px;
      color: #ecf0f1;
      text-align: center;
      line-height: 1.8;
      max-width: 600px;
    }

    /* Camp Building Styles */
    /* Building cards — responsive grid layout */
    #camp-buildings-content {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
      gap: 10px;
      width: 100%;
    }

    .building-card {
      background: linear-gradient(to bottom, #3a3a4e, #2a2a3e);
      border: 3px solid #8B4513;
      border-radius: 12px;
      padding: 14px 16px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 8px rgba(0,0,0,0.5);
      text-align: left;
      box-sizing: border-box;
    }

    .building-card:hover {
      box-shadow: 0 0 20px rgba(139,69,19,0.6);
      transform: translateY(-2px);
      filter: brightness(1.1);
    }

    .building-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }

    .building-name {
      font-size: 18px;
      color: #FFD700;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(255,215,0,0.6);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .building-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 10px;
      font-weight: bold;
      color: #fff;
      padding: 1px 6px;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
      animation: notif-pulse 1.5s ease-in-out infinite;
      flex-shrink: 0;
    }

    .building-level {
      font-size: 15px;
      color: #5DADE2;
      font-weight: bold;
      flex-shrink: 0;
      margin-left: 8px;
    }

    .building-desc {
      font-size: 13px;
      color: #c9d1d9;
      margin-bottom: 6px;
      line-height: 1.4;
    }

    .building-cost {
      font-size: 14px;
      color: #FFD700;
      font-weight: bold;
      margin-bottom: 4px;
    }

    .building-bonus {
      font-size: 13px;
      color: #2ecc71;
      margin: 4px 0;
    }

    .building-locked {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Skill Tree Styles */
    .skill-tree-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
      gap: 16px;
      width: 100%;
      max-width: 100%;
      margin: 12px auto;
      padding: 16px;
      box-sizing: border-box;
    }

    /* Responsive breakpoints for skill tree */
    @media (max-width: 768px) {
      .skill-tree-container {
        grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
        gap: 12px;
        padding: 12px;
      }
    }

    @media (max-width: 480px) {
      .skill-tree-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
      }
    }

    .skill-node {
      background: linear-gradient(135deg, #1a1e32 0%, #12162a 100%);
      border: 2px solid #444;
      outline: none;
      border-radius: 14px;
      padding: 14px 16px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 3px 10px rgba(0,0,0,0.5);
      position: relative;
      min-width: 0;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
    }

    @media (max-width: 768px) {
      .skill-node {
        padding: 12px 14px;
        min-height: 120px;
      }
    }

    @media (max-width: 480px) {
      .skill-node {
        padding: 10px 12px;
        min-height: 110px;
      }
    }
    /* Branch connector line from parent skill */
    .skill-node::before {
      content: '';
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 10px;
      background: #444;
      display: none;
    }
    .skill-node[data-has-parent="true"]::before { display: block; }
    .skill-node.unlocked::before { background: linear-gradient(180deg, #2ecc71, #27ae60); box-shadow: 0 0 4px rgba(46,204,113,0.5); }

    /* Skill icon badge at top */
    .skill-node .skill-icon-badge {
      width: 48px; height: 48px;
      border-radius: 50%;
      position: relative;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      margin: 0 auto 8px auto;
      flex-shrink: 0;
      background: rgba(255,215,0,0.08);
      border: 1.5px solid rgba(255,215,0,0.25);
      box-shadow: 0 0 8px rgba(255,215,0,0.1);
      overflow: hidden;
    }
    .skill-node .skill-icon-badge .skill-icon-emoji {
      position: relative;
      z-index: 1;
      pointer-events: none;
    }
    .skill-node.unlocked .skill-icon-badge {
      background: rgba(46,204,113,0.12);
      border-color: rgba(46,204,113,0.5);
      box-shadow: 0 0 10px rgba(46,204,113,0.25);
    }

    /* Radial fill overlay for hold-to-buy animation */
    .skill-hold-progress {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(rgba(255,215,0,0.75) var(--fill, 0%), transparent var(--fill, 0%));
      pointer-events: none;
      transition: none;
      z-index: 2;
    }

    /* "Hold to buy" hint label */
    .skill-hold-hint {
      font-size: 9px;
      color: #888;
      letter-spacing: 0.5px;
      margin-top: 4px;
    }

    /* Dopamine-inducing skill unlock animation */
    @keyframes skillPurchased {
      0%   {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 12px rgba(46,204,113,0.3);
      }
      15%  {
        transform: scale(0.85);
        filter: brightness(1.5);
        box-shadow: 0 0 20px rgba(255,215,0,0.6);
      }
      40%  {
        transform: scale(1.4);
        filter: brightness(3) saturate(2);
        box-shadow:
          0 0 40px rgba(255,215,0,1),
          0 0 60px rgba(255,255,255,0.8),
          inset 0 0 30px rgba(255,215,0,0.5);
      }
      70%  {
        transform: scale(1.1);
        filter: brightness(2);
        box-shadow: 0 0 35px rgba(46,204,113,0.8);
      }
      85%  {
        transform: scale(0.95);
        filter: brightness(1.3);
        box-shadow: 0 0 20px rgba(46,204,113,0.5);
      }
      100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 12px rgba(46,204,113,0.3);
      }
    }

    /* Apply unlock animation when skill is purchased */
    .skill-node.just-unlocked {
      animation: skillPurchased 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Particle burst effect overlay for unlock */
    .skill-unlock-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: 12px;
      overflow: hidden;
      z-index: 10;
    }

    @keyframes particleBurst {
      0% {
        transform: scale(0.5) rotate(0deg);
        opacity: 1;
        filter: blur(0px);
      }
      50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0.8;
        filter: blur(2px);
      }
      100% {
        transform: scale(3) rotate(360deg);
        opacity: 0;
        filter: blur(8px);
      }
    }

    .skill-node:hover {
      border-color: #FFD700;
      box-shadow: 0 0 18px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-2px);
    }

    .skill-node.unlocked {
      border-color: #2ecc71;
      box-shadow: 0 0 12px rgba(46,204,113,0.3), inset 0 0 8px rgba(46,204,113,0.08);
    }

    .skill-node.locked {
      opacity: 0.35;
      cursor: not-allowed;
      filter: grayscale(0.4);
    }
    .skill-node.locked .skill-icon-badge {
      filter: grayscale(0.6);
      opacity: 0.5;
    }

    /* Level dots row under icon */
    .skill-level-dots {
      display: flex;
      gap: 3px;
      justify-content: center;
      margin-bottom: 4px;
    }
    .skill-level-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #333;
      border: 1px solid #555;
    }
    .skill-level-dot.filled {
      background: linear-gradient(135deg, #2ecc71, #27ae60);
      border-color: #2ecc71;
      box-shadow: 0 0 4px rgba(46,204,113,0.6);
    }

    .skill-name {
      font-size: 13px;
      color: #FFD700;
      font-weight: bold;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .skill-desc {
      font-size: 10px;
      color: #999;
      margin-bottom: 4px;
      line-height: 1.3;
    }

    .skill-cost {
      font-size: 12px;
      color: #5DADE2;
      font-weight: bold;
    }

    /* Credits Right Align */
    #credits-screen .screen-content {
      text-align: right;
    }

    /* ═══════════════════════════════════════════════════════════════
       SETTINGS MODAL — Premium Dark Obsidian Tablet / Annunaki Theme
       Ancient tech hieroglyph engravings, 3D depth, fog/slime borders
       ═══════════════════════════════════════════════════════════════ */

    /* ─── Keyframes ────────────────────────────────────────────── */
    @keyframes settingsFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes settingsSlideIn {
      from { opacity: 0; transform: translateY(30px) scale(0.92); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes settingsEdgeFog {
      0%   { opacity: 0.55; filter: blur(18px); }
      50%  { opacity: 0.75; filter: blur(22px); }
      100% { opacity: 0.55; filter: blur(18px); }
    }
    @keyframes settingsGlyphPulse {
      0%   { opacity: 0.06; }
      50%  { opacity: 0.12; }
      100% { opacity: 0.06; }
    }
    @keyframes settingsTopGlow {
      0%   { opacity: 0.5; }
      50%  { opacity: 0.9; }
      100% { opacity: 0.5; }
    }
    @keyframes settingsBtnShine {
      0%   { left: -80%; }
      100% { left: 180%; }
    }

    /* ─── Overlay ──────────────────────────────────────────────── */
    #settings-modal {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(ellipse at center, rgba(4,4,14,0.94) 0%, rgba(0,0,0,0.98) 100%);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 100;
      pointer-events: auto;
      backdrop-filter: blur(8px);
      animation: settingsFadeIn 0.3s ease-out;
    }

    /* Thick dark fog / slime shadow melting around modal edges */
    #settings-modal::before {
      content: '';
      position: fixed;
      top: -40px; left: -40px; right: -40px; bottom: -40px;
      background:
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.9) 0%, transparent 55%),
        radial-gradient(ellipse at 0% 50%, rgba(0,0,0,0.85) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0.85) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
      animation: settingsEdgeFog 6s ease-in-out infinite;
    }

    /* ─── Container — Stone Tablet ─────────────────────────────── */
    .settings-container {
      background:
        linear-gradient(165deg,
          #0a0a18 0%,
          #08081a 15%,
          #060614 40%,
          #0a0a1c 70%,
          #080818 100%);
      padding: 0;
      border-radius: 14px;
      max-width: 440px;
      width: 93%;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      animation: settingsSlideIn 0.35s ease-out;

      /* 3D depth: multi-layer black slime border + gold accent + deep shadow */
      border: 2px solid rgba(255,215,0,0.18);
      box-shadow:
        /* inner bevel highlight */
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 -2px 10px rgba(0,0,0,0.7),
        /* outer black slime ring */
        0 0 0 4px rgba(0,0,0,0.85),
        0 0 0 7px rgba(10,10,20,0.7),
        0 0 0 10px rgba(0,0,0,0.6),
        /* gold glow */
        0 0 30px rgba(255,215,0,0.04),
        0 0 80px rgba(255,215,0,0.025),
        /* deep drop shadow */
        0 25px 80px rgba(0,0,0,0.85);
    }

    /* Top gold accent beam with pulse */
    .settings-container::before {
      content: '';
      position: absolute;
      top: 0; left: 8%; right: 8%;
      height: 2px;
      background: linear-gradient(90deg,
        transparent,
        rgba(255,215,0,0.4) 20%,
        rgba(255,215,0,0.8) 50%,
        rgba(255,215,0,0.4) 80%,
        transparent);
      z-index: 5;
      animation: settingsTopGlow 4s ease-in-out infinite;
    }

    /* Inner glass reflection + hieroglyph texture overlay */
    .settings-container::after {
      content: '𓂀 𓁹 𓀀 𓃭 𓆣 𓂋 𓊝 𓏏 𓂀 𓁹 𓀀 𓃭 𓆣 𓂋 𓊝 𓏏 𓂀';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      font-size: 22px;
      line-height: 32px;
      letter-spacing: 14px;
      word-spacing: 10px;
      color: rgba(255,215,0,0.06);
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
      padding: 60px 10px;
      animation: settingsGlyphPulse 8s ease-in-out infinite;
    }

    /* ─── Title ────────────────────────────────────────────────── */
    .settings-title {
      font-size: 20px;
      color: #FFD700;
      text-align: center;
      padding: 20px 20px 14px;
      text-shadow:
        0 0 25px rgba(255,215,0,0.6),
        0 0 50px rgba(255,215,0,0.2),
        0 2px 4px rgba(0,0,0,0.95);
      font-weight: 800;
      letter-spacing: 6px;
      text-transform: uppercase;
      position: relative;
      z-index: 3;
      background: linear-gradient(180deg, rgba(255,215,0,0.04) 0%, transparent 100%);
      border-bottom: 1px solid rgba(255,215,0,0.12);
      flex-shrink: 0;
    }

    /* Eye of Horus decorations flanking title */
    .settings-title::before {
      content: '𓂀';
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      opacity: 0.25;
      color: #FFD700;
    }
    .settings-title::after {
      content: '𓂀';
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%) scaleX(-1);
      font-size: 16px;
      opacity: 0.25;
      color: #FFD700;
    }

    /* ─── Scroll Area ──────────────────────────────────────────── */
    .settings-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 8px 20px 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,215,0,0.2) rgba(0,0,0,0.3);
      position: relative;
      z-index: 2;
    }
    .settings-scroll::-webkit-scrollbar {
      width: 5px;
    }
    .settings-scroll::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.3);
      border-radius: 5px;
    }
    .settings-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(255,215,0,0.3), rgba(180,150,50,0.2));
      border-radius: 5px;
    }

    /* ─── Section Labels — engraved gold ───────────────────────── */
    .settings-section-label {
      font-size: 10px;
      color: rgba(255,215,0,0.55);
      letter-spacing: 4px;
      text-transform: uppercase;
      margin: 18px 0 6px 2px;
      font-weight: 700;
      text-shadow: 0 0 12px rgba(255,215,0,0.2), 0 1px 0 rgba(0,0,0,0.8);
      position: relative;
      padding-left: 18px;
    }
    /* Small hieroglyph bullet */
    .settings-section-label::before {
      content: '𓊝';
      position: absolute;
      left: 0;
      font-size: 11px;
      opacity: 0.5;
    }

    /* ─── Settings Items — recessed obsidian panels ────────────── */
    .settings-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px 0;
      padding: 11px 14px;
      background:
        linear-gradient(135deg,
          rgba(12,12,28,0.85) 0%,
          rgba(8,8,20,0.92) 50%,
          rgba(10,10,24,0.88) 100%);
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.035);
      color: #c8c0b0;
      font-size: 14px;
      position: relative;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 3px 8px rgba(0,0,0,0.35);
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    }
    .settings-item:hover {
      border-color: rgba(255,215,0,0.14);
      transform: translateY(-1px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        inset 0 -2px 6px rgba(0,0,0,0.5),
        0 4px 12px rgba(0,0,0,0.45),
        0 0 20px rgba(255,215,0,0.03);
    }
    .settings-item label {
      flex: 1;
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0,0,0,0.7);
      font-size: 13px;
    }

    .settings-manual-hint {
      font-size: 10px;
      color: rgba(120,190,255,0.45);
      text-align: center;
      padding: 6px 0;
      font-style: italic;
      text-shadow: 0 0 8px rgba(120,190,255,0.1);
    }

    /* ─── Custom Toggle Switch — Obsidian + Gold ───────────────── */
    .settings-toggle {
      position: relative;
      display: inline-block;
      cursor: pointer;
      flex-shrink: 0;
    }
    .settings-toggle input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-track {
      display: block;
      width: 46px;
      height: 25px;
      background: linear-gradient(180deg, #12122a 0%, #0a0a1a 100%);
      border-radius: 13px;
      border: 1.5px solid rgba(255,255,255,0.07);
      position: relative;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.6),
        0 1px 2px rgba(0,0,0,0.4);
    }
    .toggle-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 19px;
      height: 19px;
      background: linear-gradient(145deg, #555 0%, #2a2a3a 100%);
      border-radius: 50%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow:
        0 2px 5px rgba(0,0,0,0.5),
        inset 0 1px 1px rgba(255,255,255,0.12),
        0 0 4px rgba(0,0,0,0.3);
    }

    .settings-toggle input:checked + .toggle-track {
      background: linear-gradient(180deg, #1a3318 0%, #0d2a0d 100%);
      border-color: rgba(0,220,80,0.35);
      box-shadow:
        inset 0 3px 5px rgba(0,0,0,0.3),
        0 0 14px rgba(0,220,80,0.18),
        0 0 30px rgba(0,220,80,0.06);
    }
    .settings-toggle input:checked + .toggle-track .toggle-knob {
      left: 23px;
      background: linear-gradient(145deg, #00ee55 0%, #00aa44 100%);
      box-shadow:
        0 2px 8px rgba(0,220,80,0.5),
        0 0 14px rgba(0,220,80,0.25),
        inset 0 1px 2px rgba(255,255,255,0.35);
    }
    .settings-toggle input:checked + .toggle-track .toggle-knob::after {
      content: '✓';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-size: 11px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }
    .settings-toggle input:disabled + .toggle-track {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* ─── Custom Select/Dropdown — Obsidian ─────────────────────── */
    .select-wrapper {
      position: relative;
      flex-shrink: 0;
    }
    .select-wrapper select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 8px 32px 8px 12px;
      border-radius: 8px;
      background: linear-gradient(180deg, #111128 0%, #0a0a1c 100%);
      color: #d4c8a8;
      border: 1.5px solid rgba(255,215,0,0.14);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      min-width: 125px;
      box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.5),
        0 3px 6px rgba(0,0,0,0.35);
      transition: all 0.2s ease;
      outline: none;
    }
    .select-wrapper select:hover,
    .select-wrapper select:focus {
      border-color: rgba(255,215,0,0.4);
      box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.5),
        0 3px 8px rgba(0,0,0,0.4),
        0 0 18px rgba(255,215,0,0.06);
    }
    .select-wrapper::after {
      content: '▾';
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,215,0,0.4);
      font-size: 12px;
      pointer-events: none;
    }
    .select-wrapper select option {
      background: #0a0a1c;
      color: #d4c8a8;
      padding: 8px;
    }

    /* ─── Buttons Area — Bottom Bar ─────────────────────────────── */
    .settings-buttons {
      padding: 14px 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-top: 1px solid rgba(255,215,0,0.08);
      background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%);
      position: relative;
      z-index: 3;
      flex-shrink: 0;
    }

    /* ─── 3D Buttons — Deep Embossed Stone ──────────────────────── */
    .settings-btn-3d {
      width: 100%;
      padding: 13px 16px;
      font-size: 14px;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      letter-spacing: 1.5px;
      position: relative;
      top: 0;
      overflow: hidden;
      transition: all 0.15s ease;
      text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    }
    .settings-btn-3d:active {
      top: 3px;
    }
    /* Animated shine sweep on hover */
    .settings-btn-3d::after {
      content: '';
      position: absolute;
      top: -50%; left: -80%;
      width: 60%; height: 200%;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .settings-btn-3d:hover::after {
      opacity: 1;
      animation: settingsBtnShine 0.7s ease-out;
    }

    /* ⬅ Back to Game — gold, always visible */
    .settings-btn-back {
      background: linear-gradient(180deg, #302800 0%, #201a00 30%, #161200 60%, #0e0c00 100%);
      color: #FFD700;
      border: 1.5px solid rgba(255,215,0,0.3);
      box-shadow:
        0 5px 0 #080600,
        0 7px 14px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,215,0,0.15),
        inset 0 -1px 4px rgba(0,0,0,0.3),
        0 0 20px rgba(255,215,0,0.06);
    }
    .settings-btn-back:hover {
      top: 2px;
      box-shadow:
        0 3px 0 #080600,
        0 5px 10px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,215,0,0.15),
        0 0 35px rgba(255,215,0,0.1);
      filter: brightness(1.2);
    }
    .settings-btn-back:active {
      top: 5px;
      box-shadow:
        0 0 0 #080600,
        0 1px 4px rgba(0,0,0,0.5),
        inset 0 3px 6px rgba(0,0,0,0.4);
    }

    /* ⛺ Camp — warm amber stone */
    .settings-btn-camp {
      background: linear-gradient(180deg, #1e1a0e 0%, #14120a 30%, #0e0c06 60%, #080804 100%);
      color: #d4a574;
      border: 1.5px solid rgba(212,165,116,0.18);
      box-shadow:
        0 5px 0 #050403,
        0 7px 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(212,165,116,0.08),
        inset 0 -1px 4px rgba(0,0,0,0.3);
    }
    .settings-btn-camp:hover {
      top: 2px;
      filter: brightness(1.25);
      box-shadow:
        0 3px 0 #050403,
        0 5px 10px rgba(0,0,0,0.5),
        0 0 18px rgba(212,165,116,0.06);
    }
    .settings-btn-camp:active {
      top: 5px;
      box-shadow: 0 0 0 #050403, 0 1px 4px rgba(0,0,0,0.5), inset 0 3px 6px rgba(0,0,0,0.4);
    }

    /* 🎛️ UI Customization — deep blue */
    .settings-btn-ui {
      background: linear-gradient(180deg, #0c1624 0%, #081220 30%, #060e18 60%, #040a10 100%);
      color: #6ab0e0;
      border: 1.5px solid rgba(100,170,220,0.15);
      box-shadow:
        0 5px 0 #030810,
        0 7px 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(100,170,220,0.06),
        inset 0 -1px 4px rgba(0,0,0,0.3);
    }
    .settings-btn-ui:hover {
      top: 2px;
      filter: brightness(1.25);
      box-shadow:
        0 3px 0 #030810,
        0 5px 10px rgba(0,0,0,0.5),
        0 0 18px rgba(100,170,220,0.06);
    }
    .settings-btn-ui:active {
      top: 5px;
      box-shadow: 0 0 0 #030810, 0 1px 4px rgba(0,0,0,0.5), inset 0 3px 6px rgba(0,0,0,0.4);
    }

    /* ⚠ Reset — crimson danger */
    .settings-btn-danger {
      background: linear-gradient(180deg, #240808 0%, #1c0505 30%, #140303 60%, #0c0202 100%);
      color: #cc4444;
      border: 1.5px solid rgba(200,60,60,0.18);
      font-size: 12px;
      padding: 11px 16px;
      box-shadow:
        0 5px 0 #080202,
        0 7px 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(200,60,60,0.06),
        inset 0 -1px 4px rgba(0,0,0,0.3);
    }
    .settings-btn-danger:hover {
      top: 2px;
      filter: brightness(1.35);
      box-shadow:
        0 3px 0 #080202,
        0 5px 10px rgba(0,0,0,0.5),
        0 0 18px rgba(200,60,60,0.08);
    }
    .settings-btn-danger:active {
      top: 5px;
      box-shadow: 0 0 0 #080202, 0 1px 4px rgba(0,0,0,0.5), inset 0 3px 6px rgba(0,0,0,0.4);
    }

    /* ═══════════════════════════════════════════════════════════════
       COMIC-BOOK STYLE GAME DIALOG (replaces browser confirm/alert)
       ═══════════════════════════════════════════════════════════════ */
    #game-dialog-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.96) 100%);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: settingsFadeIn 0.2s ease-out;
    }

    .game-dialog-bubble {
      position: relative;
      background: linear-gradient(165deg, #111122 0%, #0a0a18 50%, #080812 100%);
      border: 2px solid rgba(255,215,0,0.28);
      border-radius: 18px;
      padding: 28px 30px 22px;
      max-width: 360px;
      width: 88%;
      box-shadow:
        0 0 0 5px rgba(0,0,0,0.7),
        0 0 50px rgba(255,215,0,0.06),
        0 22px 55px rgba(0,0,0,0.75),
        inset 0 1px 0 rgba(255,255,255,0.04);
      animation: dialogBounceIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    @keyframes dialogBounceIn {
      from { opacity: 0; transform: scale(0.7) translateY(20px); }
      50%  { opacity: 1; transform: scale(1.03) translateY(-2px); }
      to   { transform: scale(1) translateY(0); }
    }

    .game-dialog-tail {
      position: absolute;
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%);
      width: 0; height: 0;
      border-left: 16px solid transparent;
      border-right: 16px solid transparent;
      border-top: 16px solid rgba(255,215,0,0.28);
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
    }
    .game-dialog-tail::after {
      content: '';
      position: absolute;
      top: -18px;
      left: -14px;
      width: 0; height: 0;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-top: 14px solid #0a0a18;
    }

    .game-dialog-title {
      font-size: 16px;
      font-weight: 800;
      color: #FFD700;
      text-align: center;
      margin-bottom: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-shadow: 0 0 18px rgba(255,215,0,0.45), 0 2px 3px rgba(0,0,0,0.9);
    }

    .game-dialog-text {
      font-size: 14px;
      color: #b8b0a0;
      text-align: center;
      line-height: 1.6;
      margin-bottom: 20px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }

    .game-dialog-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .game-dialog-btn {
      padding: 11px 28px;
      font-size: 14px;
      font-weight: 700;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      letter-spacing: 1px;
      transition: all 0.15s ease;
      position: relative;
      top: 0;
      text-shadow: 0 2px 3px rgba(0,0,0,0.9);
    }

    .game-dialog-confirm {
      background: linear-gradient(180deg, #1a2a10 0%, #102008 50%, #0a1505 100%);
      color: #66dd66;
      border: 1.5px solid rgba(100,220,100,0.22);
      box-shadow:
        0 4px 0 #050a03,
        0 6px 12px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(100,220,100,0.08);
    }
    .game-dialog-confirm:hover {
      top: 1px;
      filter: brightness(1.2);
      box-shadow: 0 3px 0 #050a03, 0 5px 10px rgba(0,0,0,0.45), 0 0 14px rgba(100,220,100,0.08);
    }
    .game-dialog-confirm:active {
      top: 3px;
      box-shadow: 0 0 0 #050a03, 0 2px 4px rgba(0,0,0,0.45), inset 0 2px 4px rgba(0,0,0,0.35);
    }

    .game-dialog-cancel {
      background: linear-gradient(180deg, #200e0e 0%, #180808 50%, #100505 100%);
      color: #cc6666;
      border: 1.5px solid rgba(200,80,80,0.18);
      box-shadow:
        0 4px 0 #0a0303,
        0 6px 12px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(200,80,80,0.06);
    }
    .game-dialog-cancel:hover {
      top: 1px;
      filter: brightness(1.2);
      box-shadow: 0 3px 0 #0a0303, 0 5px 10px rgba(0,0,0,0.45), 0 0 14px rgba(200,80,80,0.06);
    }
    .game-dialog-cancel:active {
      top: 3px;
      box-shadow: 0 0 0 #0a0303, 0 2px 4px rgba(0,0,0,0.45), inset 0 2px 4px rgba(0,0,0,0.35);
    }

    /* Responsive Media Queries */
    @media (orientation: portrait) {
      /* Portrait mode adjustments */
      .modal-content {
        width: 92%;
        max-width: 450px; /* Increased for better level-up card readability in portrait orientation */
      }

    .bar-container {
      width: min(200px, 44vw);
      height: 18px;
    }

    .hud-top {
      padding: 4px 8px;
    }
      
      /* PR #117: Fix button overlap in portrait mode */
      /* Hide settings and stats buttons in portrait, show only menu button */
      #settings-btn, #stats-btn, #equipment-btn {
        display: none !important;
      }
      
      #menu-btn {
        display: flex !important;
      }
      
      /* Keep day/night clock centered in portrait */
      #day-night-clock {
        left: calc(50% + 11px) !important;
        right: auto !important;
        transform: translateX(-50%) scale(0.63) !important;
      }

      /* Reduce padding on small portrait screens */
      .story-quest-content {
        padding: 20px;
      }
      
      .comic-panel {
        padding: 20px;
        border-width: 4px;
      }
      
      .comic-title {
        font-size: 28px;
      }
      
      .story-quest-title {
        font-size: 28px;
      }
      
      .story-quest-body {
        font-size: 16px;
      }
      
      .menu-title {
        font-size: 32px;
        margin-bottom: 20px;
      }
      
      /* Optimize level-up cards for portrait iPhone 16 */
      /* ── 2×2 GRID: guaranteed 4 cards on screen simultaneously, perfectly centered ── */
      #upgrade-list, #level-up-choices {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
        padding: 0 12px; /* Padding to prevent cards from touching screen edges */
        margin: 0 auto; /* Center the grid horizontally */
        justify-items: center; /* Center cards within grid cells */
      }

      .upgrade-card {
        width: 100% !important; /* Fill grid cell width */
        max-width: 180px !important; /* Prevent cards from getting too wide */
        min-width: 0 !important;
        height: auto !important;
        max-height: 42vw;           /* ~160px on 380px-wide phone */
        padding: 8px !important;
        font-size: clamp(8px, 1.7vw, 11px);
        overflow: hidden;
        box-sizing: border-box; /* Include padding in width calculation */
      }

      .upgrade-title {
        font-size: clamp(11px, 3.2vw, 15px);
      }

      .upgrade-desc {
        font-size: clamp(8px, 2.4vw, 11px);
      }
    }

    @media (orientation: landscape) {
      /* Landscape mode adjustments — supports PC browsers and rotated phones */
      .modal-content {
        width: 70%;
        max-width: 520px;
        max-height: 90vh;
        overflow-y: auto;
      }

      .bar-container {
        width: min(180px, 24vw);
        height: 16px;
      }

      /* Compact HUD in landscape so it doesn't eat into the play area */
      .hud-top {
        padding: 4px 8px;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
      }

      /* Level-up modal: fit within screen height in landscape */
      #levelup-modal {
        overflow-y: auto;
        padding: 0;
      }

      /* Level-up cards: wrap into rows and fit screen in landscape */
      #upgrade-list, #level-up-choices {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        max-height: 60vh;
        overflow-y: auto;
        padding: 4px;
      }

      /* Upgrade cards: size relative to viewport so they fit on screen */
      .upgrade-card {
        min-width: min(28vw, 140px);
        max-width: min(32vw, 160px);
        min-height: min(22vh, 120px);
        max-height: min(28vh, 150px);
        padding: 6px 8px;
        font-size: clamp(9px, 1.8vw, 13px);
        overflow: hidden;
      }

      /* In landscape the cards wrap — let the .upgrade-card dimensions control sizing */
      #upgrade-list > *, #level-up-choices > * {
        flex-shrink: 0;
      }

      /* Joystick zone: move joystick to far left and shoot joystick to far right
         for comfortable two-thumb play in landscape orientation */
      .joystick-outer {
        width: 100px;
        height: 100px;
      }

      /* Left joystick anchored to far left bottom corner */
      #joystick-left {
        left: 12px !important;
        bottom: 12px !important;
        right: auto !important;
      }

      /* Right joystick anchored to far right bottom corner */
      #joystick-right {
        right: 12px !important;
        left: auto !important;
        bottom: 12px !important;
      }

      /* In landscape mode, hide overlapping buttons - only show menu button
         User accesses these features through the menu button instead */
      #settings-btn, #stats-btn, #equipment-btn {
        display: none !important;
      }

      #menu-btn {
        display: flex !important;
      }
    }
    
    /* iPhone 16 Pro Max and similar large phones (430x932 portrait) */
    @media (max-width: 430px) and (orientation: portrait) {
      .story-quest-content,
      .comic-panel,
      .settings-container {
        padding: 15px;
        width: 95%;
      }
      
      .story-quest-title,
      .comic-title {
        font-size: 24px;
      }
      
      .story-quest-body,
      .comic-text {
        font-size: 14px;
      }
      
      .menu-btn {
        width: 220px;
        height: 45px;
      }
      
      .menu-btn:active::before {
        width: 220px;
        height: 220px;
      }
      
      /* Further optimize level-up modal for small portrait screens */
      .modal-content {
        width: 95%;
        max-width: 400px; /* Reduced from 450px for smaller iPhone screens to fit better */
        padding: 20px; /* Reduce padding */
      }
      
      #upgrade-list {
        gap: 10px; /* Use consistent gap with main portrait mode */
      }
    }
    
    /* iPhone 16 and similar standard phones (393x852 portrait) */
    @media (max-width: 393px) and (orientation: portrait) {
      .story-quest-content,
      .comic-panel {
        padding: 12px;
      }
      
      .story-quest-title,
      .comic-title {
        font-size: 22px;
        margin-bottom: 12px;
      }
      
      .menu-btn {
        width: 200px;
        height: 40px;
      }
      
      .menu-btn:active::before {
        width: 200px;
        height: 200px;
      }
    }
    
    /* Small phones (360px and below) */
    @media (max-width: 360px) {
      .story-quest-content,
      .comic-panel,
      .settings-container {
        padding: 10px;
        width: 98%;
      }
      
      .story-quest-title,
      .comic-title {
        font-size: 20px;
        margin-bottom: 10px;
      }
      
      .story-quest-body,
      .comic-text {
        font-size: 13px;
        line-height: 1.4;
      }
      
      .menu-btn {
        width: 180px;
        height: 38px;
      }
      
      .menu-btn:active::before {
        width: 180px;
        height: 180px;
      }
      
      .screen-title {
        font-size: 28px;
      }
      
      .screen-content {
        font-size: 14px;
      }

      /* Galaxy S10 / small-360 level-up modal: prevent layout break at narrow widths */
      #levelup-modal {
        padding: 0;
        overflow-y: auto;
        /* Use column flexbox so the card list doesn't overflow horizontally */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 8px;
      }

      .modal-content {
        width: 98%;
        max-width: 340px;
        padding: 10px 8px;
        max-height: 96vh;
        box-sizing: border-box;
      }

      /* Galaxy S10 / small-360: 2×2 grid keeps all 4 cards on-screen, perfectly centered */
      #upgrade-list, #level-up-choices {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        overflow: visible;
        padding: 0 10px; /* Padding to prevent cards from touching screen edges */
        margin: 0 auto; /* Center the grid horizontally */
        justify-items: center; /* Center cards within grid cells */
      }

      #upgrade-list > *, #level-up-choices > * {
        min-width: 0;
        max-width: none;
      }

      .upgrade-card {
        width: auto !important;
        height: auto !important;
        max-height: 44vw;
        padding: 7px !important;
        font-size: clamp(7px, 1.8vw, 10px);
      }

      .upgrade-title {
        font-size: 15px;
      }

      .upgrade-desc {
        font-size: 11px;
      }

      /* HUD: compress bars so they don't overlap the game canvas */
      .bar-container {
        width: min(160px, 42vw);
        height: 14px;
      }

      .hud-top {
        padding: 2px 4px;
        gap: 4px;
      }

      /* Ensure unified bars fit within 360px viewport */
      .unified-bars-wrap {
        max-width: 160px;
      }

      /* Samsung S10 / narrow: shrink rage meter so it doesn't overlap special/companion icons */
      .rage-hud {
        bottom: 90px;
        padding: 3px 6px;
        gap: 4px;
        max-width: calc(100vw - 20px);
      }

      .rage-label {
        font-size: 10px;
        letter-spacing: 1px;
      }

      .rage-activate-btn {
        font-size: 10px;
        padding: 2px 5px;
      }

      /* Shift day/night clock slightly right to avoid overlap with left HUD */
      #day-night-clock {
        left: calc(50% + 16px) !important;
        transform: translateX(-50%) scale(0.58) !important;
      }

      /* Settings button: shrink and align neatly top-right */
      #settings-btn {
        top: 14px !important;
        right: 6px !important;
        font-size: 14px !important;
        padding: 3px 5px !important;
      }
    }
    
    /* iPhone 16 Specific (393px x 852px) and similar sizes */
    @media (max-width: 430px) and (max-height: 932px) {
      /* IPHONE 16 OPTIMIZATION: Ensure full UI visibility */
      .building-card {
        padding: 12px;
      }
      
      #camp-screen, #credits-screen, #achievements-screen {
        padding-bottom: max(100px, env(safe-area-inset-bottom) + 60px);
      }
      
      .screen-title {
        font-size: 24px;
        margin-bottom: 15px;
      }
      
      .btn {
        min-height: 44px; /* iOS touch target minimum */
      }
      
      /* ALIGN MINIMAP BOTTOM-RIGHT IN PORTRAIT MODE for iPhone 16 */
      /* Specific positioning for iPhone 16 and similar devices to avoid UI overlap */
      #minimap-container {
        right: 20px;
        bottom: 10px; /* Lowered to near bottom, special attacks moved to left */
      }
      
      #region-display {
        bottom: 10px;
      }

      #region-display.region-visible {
        left: 8px;
        right: auto;
      }
    }
    
    /* Tablets (768px - 1024px) */
    @media (min-width: 768px) and (max-width: 1024px) {
      .story-quest-content,
      .comic-panel {
        max-width: 700px;
        padding: 50px;
      }
      
      .menu-btn {
        width: 320px;
        height: 60px;
      }
      
      .menu-btn:active::before {
        width: 320px;
        height: 320px;
      }
    }
    
    /* Large screens (desktop) */
    @media (min-width: 1024px) {
      .story-quest-content,
      .comic-panel {
        max-width: 800px;
      }
    }
    
    /* Ensure main menu scrolls on very small screens */
    @media (max-height: 700px) {
      #main-menu {
        overflow-y: auto;
      }
      
      .menu-buttons {
        position: relative;
        min-height: 100vh;
      }
    }
    
    /* Kill Cam Animations */
    @keyframes killCamPulse {
      0% {
        opacity: 0;
        transform: scale(1.1);
      }
      50% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes killTextAppear {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    /* Live Stat Display - upper left, under XP bar and active quest elements */
    #live-stat-display {
      width: auto;
      max-width: 220px;
      min-height: 22px;
      background: rgba(25, 25, 30, 0.92);
      border: 2px solid rgba(60, 60, 70, 0.8);
      border-radius: 8px;
      padding: 3px 10px;
      font-family: 'Bangers', cursive;
      font-size: 12px;
      color: #e0e0e0;
      pointer-events: none;
      display: none;
      text-align: left;
      overflow: hidden;
      box-shadow:
        0 2px 8px rgba(0,0,0,0.7),
        inset 0 0 6px rgba(0,0,0,0.4);
      text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    }

    /* You-Died banner — dramatic death overlay with stats */
    #you-died-banner {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: none;
      pointer-events: none;
      z-index: 300;
      background: linear-gradient(135deg, rgba(10, 0, 21, 0.92) 0%, rgba(26, 0, 51, 0.92) 100%);
      animation: death-vignette-pulse 2s ease-in-out infinite;
    }
    #you-died-text {
      position: absolute;
      top: 22%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Bangers', cursive;
      font-size: clamp(56px, 16vw, 88px);
      color: #FF2222;
      text-shadow:
        -4px -4px 0 #000,
        4px -4px 0 #000,
        -4px 4px 0 #000,
        4px 4px 0 #000,
        0 0 40px rgba(255,34,34,1),
        0 0 80px rgba(255,34,34,0.5);
      letter-spacing: 8px;
      white-space: nowrap;
      animation: you-died-pop 0.6s cubic-bezier(0.175,0.885,0.32,1.275) both;
    }
    #you-died-stats {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(160deg, rgba(10,0,15,0.95) 0%, rgba(5,0,8,0.97) 100%);
      border: 2px solid #C9A227;
      border-radius: 4px;
      padding: 14px 28px;
      min-width: 220px;
      text-align: center;
      box-shadow: 0 0 20px rgba(201,162,39,0.5), 0 0 50px rgba(0,0,0,0.8);
      outline: 1px solid rgba(201,162,39,0.2);
      outline-offset: 3px;
      animation: you-died-stats-rise 0.5s 0.4s ease-out both;
    }
    #you-died-stats .yd-label {
      font-family: 'Bangers', cursive;
      font-size: 13px;
      letter-spacing: 3px;
      color: #C9A227;
      opacity: 0.8;
      margin-bottom: 8px;
    }
    #you-died-stats .yd-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-family: 'Bangers', cursive;
      font-size: 18px;
      color: #E8D5A3;
      letter-spacing: 1px;
      margin: 3px 0;
    }
    #you-died-stats .yd-row span:last-child {
      color: #C9A227;
    }
    @keyframes you-died-pop {
      0%   { transform: translate(-50%, -50%) scale(0.3) rotate(-3deg); opacity: 0; }
      60%  { transform: translate(-50%, -50%) scale(1.12) rotate(1deg); opacity: 1; }
      80%  { transform: translate(-50%, -50%) scale(0.97) rotate(-0.5deg); }
      100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    }

    /* Outer flex wrapper for camp sections — headline + back-btn above the box */
    .camp-section-flex {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    /* Fixed headline shown ABOVE the scrollable comic-book box */
    .camp-section-outer-header {
      width: min(800px, 90vw);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      box-sizing: border-box;
      border: 4px solid #FFD700;
      border-bottom: none;
      border-radius: 15px 15px 0 0;
      background: linear-gradient(135deg, #1f1f1f 0%, #0d0d0d 100%);
      box-shadow: 0 0 30px rgba(255,215,0,0.4);
    }

    /* Camp menu box — comic-panel / Loop Report style */
    .camp-menu-box {
      background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
      border: 6px solid #FFD700;
      border-radius: 15px;
      box-shadow: 0 0 30px rgba(255,215,0,0.35),
                  0 0 15px rgba(255,215,0,0.15),
                  inset 0 0 30px rgba(0,0,0,0.9);
      padding: 20px;
      box-sizing: border-box;
      width: min(800px, 90vw);
      max-height: 78vh;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      position: relative;
      /* Halftone comic-book pattern */
      background-image:
        linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%),
        radial-gradient(circle at 3px 3px, rgba(255,215,0,0.08) 2px, transparent 2px);
      background-size: auto, 15px 15px;
    }

    /* Premium Glass overlay — subtle shine layer over camp menu boxes */
    .camp-menu-box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 40%;
      border-radius: 9px 9px 60% 60% / 9px 9px 30% 30%;
      background: linear-gradient(to bottom,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.02) 60%,
        transparent 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* Notification dot for daily rewards / spin wheel */
    .notif-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #e74c3c;
      border: 2px solid #fff;
      border-radius: 50%;
      position: absolute;
      top: -4px;
      right: -4px;
      box-shadow: 0 0 6px rgba(231,76,60,0.9);
      animation: notif-pulse 1.2s ease-in-out infinite;
    }

    @keyframes notif-pulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(231,76,60,0.9); }
      50% { transform: scale(1.25); box-shadow: 0 0 12px rgba(231,76,60,1); }
    }

    /* Camp corner widgets (Daily Reward + Spin Wheel in top corners of camp) */
    .camp-corner-widgets {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: min(800px, 90vw);
      margin: 0 auto 10px auto;
      padding: 0 4px;
      box-sizing: border-box;
    }

    .camp-corner-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: linear-gradient(135deg, #1a1a2e 0%, #0d1020 100%);
      border: 3px solid #FFD700;
      border-radius: 12px;
      padding: 8px 14px;
      cursor: pointer;
      font-family: 'Bangers', cursive;
      font-size: 13px;
      color: #FFD700;
      letter-spacing: 1px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 8px rgba(255,215,0,0.2), inset 0 1px 2px rgba(255,255,255,0.08);
      transition: filter 0.15s, transform 0.1s;
      text-transform: uppercase;
      touch-action: manipulation;
    }

    .camp-corner-btn:hover { filter: brightness(1.3); transform: translateY(-2px); }
    .camp-corner-btn:active { transform: translateY(0); animation: btn-glass-press 0.4s ease-out; }
    .camp-corner-btn .corner-icon { font-size: 32px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
    .camp-corner-btn .corner-label { font-size: 10px; color: #ccc; letter-spacing: 1px; }

    /* ── Unspent Points Notification Bar ─────────────────────────── */
    .camp-unspent-bar {
      width: min(780px, 88vw);
      margin: 6px auto 4px auto;
      background: linear-gradient(135deg, rgba(20,20,40,0.92) 0%, rgba(10,10,25,0.95) 100%);
      border: 2px solid rgba(255,215,0,0.45);
      border-radius: 14px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 0 8px rgba(255,215,0,0.15), inset 0 1px 1px rgba(255,255,255,0.04);
      animation: unspent-slide-in 0.35s ease-out;
      position: relative;
      z-index: 50;
      pointer-events: auto;
    }
    @keyframes unspent-slide-in {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes wheel-result-pop {
      from { opacity: 0; transform: translateY(-14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes daily-reward-pop {
      0%   { opacity: 0; transform: scale(0.5) translateY(-12px); }
      65%  { opacity: 1; transform: scale(1.08) translateY(0); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .unspent-bar-inner {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      flex: 1;
      align-items: center;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .unspent-bar-inner::-webkit-scrollbar { display: none; }
    .unspent-bar-close {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50%;
      width: 22px; height: 22px;
      color: #888;
      font-size: 12px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .unspent-bar-close:hover { background: rgba(255,80,80,0.2); color: #ff6b6b; }

    /* Individual point chip inside the bar */
    .unspent-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(255,255,255,0.06);
      border: 1.5px solid var(--chip-border, rgba(255,215,0,0.5));
      border-radius: 10px;
      padding: 3px 10px 3px 6px;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
      transition: transform 0.1s, background 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .unspent-chip:hover { background: rgba(255,215,0,0.12); transform: translateY(-1px); }
    .unspent-chip .chip-icon {
      width: 18px; height: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      border-radius: 4px;
      background: var(--chip-bg, rgba(255,215,0,0.15));
    }
    .unspent-chip .chip-count {
      font-weight: 700;
      font-family: 'Bangers', cursive;
      letter-spacing: 0.5px;
      color: var(--chip-color, #FFD700);
    }

    /* ── Unspent Points Corner Dropdown (right-side tab) ──────── */
    .unspent-tab {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 200;
      background: linear-gradient(135deg, #2a2a2e 0%, #1a1a1e 100%);
      border: 2px solid #444;
      border-right: none;
      border-radius: 8px 0 0 8px;
      padding: 6px 5px;
      cursor: pointer;
      color: #999;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 11px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      box-shadow: -2px 2px 8px rgba(0,0,0,0.5);
      transition: opacity 0.3s ease, right 0.3s ease;
      pointer-events: auto;
      letter-spacing: 1px;
    }
    .unspent-tab:hover {
      background: linear-gradient(135deg, #3a3a3e 0%, #2a2a2e 100%);
      color: #ccc;
      box-shadow: -3px 3px 12px rgba(0,0,0,0.6);
    }
    .unspent-tab.unspent-open {
      right: min(300px, 75vw);
    }
    .unspent-tab .unspent-notif-dot {
      display: inline-block;
      width: 8px; height: 8px;
      background: #e74c3c;
      border: 1px solid #fff;
      border-radius: 50%;
      margin-top: 3px;
      box-shadow: 0 0 4px rgba(231,76,60,0.9);
      animation: notif-pulse 1.2s ease-in-out infinite;
    }
    .unspent-tab.tab-collapsed {
      padding: 3px 2px;
      font-size: 9px;
      opacity: 0.4;
    }
    .unspent-tab.tab-collapsed:hover { opacity: 1; }

    .unspent-dropdown {
      position: fixed;
      right: calc(-1 * min(300px, 75vw));
      top: 50%;
      transform: translateY(-50%);
      width: min(300px, 75vw);
      max-height: min(520px, 75vh);
      z-index: 199;
      background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 50%, #0d0d0d 100%);
      border: 4px solid #FFD700;
      border-right: none;
      border-radius: 18px 0 0 18px;
      display: flex;
      flex-direction: column;
      transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 20px rgba(0,0,0,0.5);
      pointer-events: auto;
      overflow: hidden;
    }
    .unspent-dropdown.unspent-visible {
      right: 0;
    }
    .unspent-dd-header {
      background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
      color: #000;
      padding: 10px 14px;
      font-family: 'Bangers', cursive;
      font-size: 18px;
      letter-spacing: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .unspent-dd-close {
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      color: #000;
      padding: 2px 6px;
    }
    .unspent-dd-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(255,215,0,0.3) transparent;
    }
    .unspent-dd-list::-webkit-scrollbar { width: 5px; }
    .unspent-dd-list::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 3px; }

    .unspent-dd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      margin-bottom: 4px;
      background: rgba(255,255,255,0.04);
      border: 1.5px solid var(--item-border, rgba(255,215,0,0.3));
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s, transform 0.1s;
      font-family: 'M PLUS Rounded 1c', sans-serif;
    }
    .unspent-dd-item:hover {
      background: rgba(255,215,0,0.1);
      transform: translateX(-2px);
    }
    .unspent-dd-item .dd-icon {
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      background: var(--item-bg, rgba(255,215,0,0.1));
      border-radius: 8px;
      flex-shrink: 0;
    }
    .unspent-dd-item .dd-info {
      flex: 1;
      min-width: 0;
    }
    .unspent-dd-item .dd-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--item-color, #FFD700);
      font-family: 'Bangers', cursive;
      letter-spacing: 0.5px;
    }
    .unspent-dd-item .dd-desc {
      font-size: 10px;
      color: #999;
      margin-top: 1px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .unspent-dd-section {
      font-size: 10px;
      color: #666;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 6px 4px 2px;
      font-family: 'M PLUS Rounded 1c', sans-serif;
    }

    /* 7-day login reward calendar strip */
    .daily-login-strip {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 8px 0;
    }

    .daily-login-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      background: rgba(255,255,255,0.05);
      border: 2px solid rgba(255,215,0,0.3);
      border-radius: 8px;
      padding: 6px 8px;
      min-width: 44px;
      font-family: 'Bangers', cursive;
    }

    .daily-login-day.claimed {
      background: rgba(46,204,113,0.15);
      border-color: #2ecc71;
    }

    .daily-login-day.today {
      background: rgba(255,215,0,0.15);
      border-color: #FFD700;
      box-shadow: 0 0 10px rgba(255,215,0,0.4);
    }

    .daily-login-day .day-num {
      font-size: 11px;
      color: #999;
    }

    .daily-login-day .day-reward {
      font-size: 13px;
      color: #FFD700;
    }

    .daily-login-day .day-gold {
      font-size: 10px;
      color: #aaa;
      font-family: 'M PLUS Rounded 1c', sans-serif;
    }

    /* Daily claim button — base style; rarity colours applied inline */
    .daily-claim-btn {
      margin-top: 16px;
      border-radius: 8px;
      padding: 10px 24px;
      font-family: 'Bangers', cursive;
      font-size: 1.1em;
      letter-spacing: 2px;
      cursor: pointer;
      color: #fff;
      transition: opacity 0.2s;
    }
    .daily-claim-btn:disabled { opacity: 0.5; cursor: default; }

    /* In-place reward badge that animates when daily is claimed */
    .daily-reward-badge {
      display: inline-block;
      padding: 8px 20px;
      border-radius: 12px;
      font-family: 'Bangers', cursive;
      font-size: 1.1em;
      letter-spacing: 1.5px;
      background: rgba(0, 0, 0, 0.6);
      animation: daily-reward-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* When a section has the outer-header sibling, remove top border-radius from box */
    .camp-section-outer-header + .back-btn + .camp-menu-box,
    .camp-section-outer-header + .camp-menu-box {
      border-radius: 0 0 15px 15px;
      border-top: none;
    }

    /* Pinned header inside a camp-menu-box (legacy sticky — kept for any remaining uses) */
    .camp-menu-pinned-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 2px solid #FFD700;
    }


    /* === CAMP UI OVERHAUL === */

    /* Camp title — themed frame */
    #camp-screen > .screen-title {
      font-family: 'Bangers', cursive;
      font-size: 32px;
      letter-spacing: 3px;
      color: #FFD700;
      text-shadow: 0 0 20px rgba(255,215,0,0.9), 2px 2px 0 #000, 4px 4px 0 #8B4513;
      background: linear-gradient(135deg, rgba(20,10,0,0.95) 0%, rgba(50,30,0,0.85) 100%);
      border: 3px solid #FFD700;
      border-radius: 14px;
      padding: 6px 22px;
      box-shadow: 0 0 20px rgba(255,215,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
      margin-bottom: 8px;
    }

    /* Account level — oval glass/dome 3D look */
    #account-level-display {
      background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.18) 0%, rgba(255,215,0,0.08) 40%, rgba(10,5,0,0.92) 100%) !important;
      border: 2px solid #FFD700 !important;
      border-radius: 40px !important;
      padding: 5px 18px !important;
      box-shadow: 0 4px 16px rgba(255,215,0,0.35), 0 2px 6px rgba(0,0,0,0.7), inset 0 2px 6px rgba(255,255,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.5) !important;
      max-width: 200px !important;
      margin: 0 auto 8px auto !important;
    }

    /* Small utility icon — Menu (top-left) */
    #camp-util-icons {
      position: fixed;
      top: max(10px, env(safe-area-inset-top));
      left: max(10px, env(safe-area-inset-left));
      display: flex;
      z-index: 61;
      pointer-events: auto;
    }
    /* Profile icon — top-right */
    #camp-util-icons-right {
      position: fixed;
      top: max(10px, env(safe-area-inset-top));
      right: max(10px, env(safe-area-inset-right));
      display: flex;
      z-index: 61;
      pointer-events: auto;
    }
    .camp-util-icon {
      font-size: 18px;
      padding: 6px 10px;
      background: rgba(0,0,0,0.75);
      color: #aaa;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      cursor: pointer;
      touch-action: manipulation;
      transition: background 0.15s, color 0.15s;
    }
    .camp-util-icon:hover { background: rgba(30,30,30,0.9); color: #fff; }
    .camp-util-icon:active { transform: scale(0.92); }

    /* Camp header — single centralized Epic NEW RUN button */
    .camp-header-btns {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 12px;
    }

    /* ── Epic "NEW RUN" button — Annunaki Cyan+Purple 3D physical button ── */
    @keyframes new-run-pulse {
      0%,100% {
        box-shadow: 0 7px 0 #3300aa, 0 0 22px rgba(0,220,255,0.55), 0 0 55px rgba(150,0,255,0.35),
                    inset 0 0 20px rgba(0,255,255,0.08);
      }
      50% {
        box-shadow: 0 7px 0 #220077, 0 0 40px rgba(0,240,255,0.85), 0 0 90px rgba(180,0,255,0.55),
                    inset 0 0 30px rgba(0,255,255,0.14);
      }
    }
    @keyframes new-run-sweep {
      0% { left: -130%; opacity: 0; }
      8%  { opacity: 1; }
      88% { opacity: 1; }
      100% { left: 130%; opacity: 0; }
    }
    @keyframes new-run-icon-pulse {
      0%,100% { opacity: 0.7; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.25); }
    }
    #camp-action-btn {
      position: relative;
      font-family: 'Bangers', cursive;
      font-size: clamp(22px, 4vw, 30px);
      letter-spacing: 5px;
      padding: 14px 40px;
      background: linear-gradient(180deg,
        #00eeff 0%, #00bbdd 18%,
        #6600ee 55%, #4400aa 80%, #2a006a 100%);
      color: #fff;
      border: none;
      border-radius: 10px;
      border-bottom: 8px solid #3300aa;
      border-right: 4px solid #220077;
      border-top: 2px solid rgba(0,255,255,0.5);
      box-shadow: 0 7px 0 #3300aa, 0 0 22px rgba(0,220,255,0.55), 0 0 55px rgba(150,0,255,0.35);
      cursor: pointer;
      text-transform: uppercase;
      text-shadow: 0 0 8px rgba(0,255,255,0.9), 0 2px 0 rgba(0,0,0,0.5);
      overflow: hidden;
      animation: new-run-pulse 2.2s ease-in-out infinite;
      transition: transform 0.08s, border-bottom-width 0.08s, box-shadow 0.08s;
      touch-action: manipulation;
      min-width: 220px;
    }
    #camp-action-btn .new-run-icon {
      display: inline-block;
      animation: new-run-icon-pulse 1.1s ease-in-out infinite;
      font-style: normal;
    }
    #camp-action-btn::before {
      content: '';
      position: absolute;
      top: 0; left: -130%; width: 55%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
      animation: new-run-sweep 3.2s ease-in-out infinite;
      pointer-events: none;
    }
    #camp-action-btn:hover { filter: brightness(1.15) saturate(1.1); }
    #camp-action-btn:active {
      transform: translateY(6px);
      border-bottom-width: 2px;
      box-shadow: 0 2px 0 #3300aa, 0 0 10px rgba(0,220,255,0.4);
      animation: none;
    }

    /* Building title dome header inside popups */
    .building-popup-title {
      font-family: 'Bangers', cursive;
      font-size: 28px;
      letter-spacing: 2px;
      color: #FFD700;
      text-shadow: 0 0 12px rgba(255,215,0,0.8), 2px 2px 0 #000;
      background: radial-gradient(ellipse at 50% 20%, rgba(255,255,255,0.15) 0%, rgba(255,215,0,0.06) 50%, rgba(10,5,0,0.9) 100%);
      border: 3px solid #FFD700;
      border-radius: 40px;
      padding: 8px 24px;
      text-align: center;
      box-shadow: 0 4px 16px rgba(255,215,0,0.3), inset 0 2px 6px rgba(255,255,255,0.1);
      margin-bottom: 16px;
    }

    /* Subsection active state: hide top camp UI */
    #camp-screen.camp-subsection-active > .screen-title,
    #camp-screen.camp-subsection-active > #account-level-display,
    #camp-screen.camp-subsection-active > .camp-header-btns {
      display: none !important;
    }
    /* Also hide utility corner icons while a subsection is open */
    .camp-subsection-active #camp-util-icons,
    .camp-subsection-active #camp-util-icons-right {
      display: none;
      pointer-events: none;
    }

    /* ── 3D Camp World Mode ─────────────────────────────────────────────
       When CampWorld is active the camp-screen becomes a transparent HUD
       overlay so the Three.js canvas (z-index: 1) shows through underneath.
       Only the header action buttons, corner widgets, and any open subsection
       panel remain visible.  Building cards are navigated via the 3D world.
    ── */
    #camp-screen.camp-3d-mode {
      background: transparent !important;
      overflow: hidden !important;
      pointer-events: none; /* Let touches pass through to 3D canvas and camp world */
    }
    /* Re-enable pointer-events on interactive children that float over the 3D world */
    #camp-screen.camp-3d-mode .camp-util-icon,
    #camp-screen.camp-3d-mode .camp-corner-btn,
    #camp-screen.camp-3d-mode .camp-section-flex,
    #camp-screen.camp-3d-mode button {
      pointer-events: auto;
    }
    /* Hide the 2D building cards — player uses 3D navigation instead */
    #camp-screen.camp-3d-mode #camp-buildings-section,
    #camp-screen.camp-3d-mode > .screen-title,
    #camp-screen.camp-3d-mode > #account-level-display {
      display: none !important;
    }
    /* Header buttons float over the 3D world */
    #camp-screen.camp-3d-mode .camp-header-btns {
      position: fixed;
      top: max(12px, env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      z-index: 60;
    }
    /* Utility icons also float in 3D mode */
    #camp-screen.camp-3d-mode #camp-util-icons,
    #camp-screen.camp-3d-mode #camp-util-icons-right {
      z-index: 62;
      pointer-events: auto;
    }
    /* Corner widgets also float */
    #camp-screen.camp-3d-mode .camp-corner-widgets {
      position: fixed;
      top: max(70px, calc(env(safe-area-inset-top) + 58px));
      right: max(8px, env(safe-area-inset-right));
      z-index: 60;
    }
    /* Unspent points bar floats over 3D world */
    #camp-screen.camp-3d-mode .camp-unspent-bar {
      position: fixed;
      top: max(120px, calc(env(safe-area-inset-top) + 108px));
      left: 50%;
      transform: translateX(-50%);
      z-index: 60;
      pointer-events: auto;
    }
    /* Subsections (skill tree, training, etc.) still overlay the 3D world */
    #camp-screen.camp-3d-mode .camp-section-flex {
      background: linear-gradient(to bottom, rgba(26,26,46,0.97), rgba(22,33,62,0.97));
      min-height: 100vh;
      overflow-y: auto;
    }

    /* Hide game HUD layer when 3D camp is active to prevent black bar artifacts.
       NOTE: Requires #ui-layer to be a sibling of #camp-screen in the DOM
       (index.html: camp-screen @ line ~182, ui-layer @ line ~400, same parent). */
    #camp-screen.camp-3d-mode ~ #ui-layer {
      visibility: hidden;
    }

    /* Skill nodes — taller boxes */
    .skill-node {
      min-height: 130px;
    }

    /* Camp menu box — bottom padding so last items aren't cut off */
    .camp-menu-box {
      padding-bottom: 40px;
    }

    /* Back-to-camp button: ensure it sits above the box with visible spacing */
    .camp-section-back-btn {
      margin-top: 10px !important;
      margin-bottom: 0 !important;
      z-index: 2;
    }

    /* Account stats table in account building popup */
    .account-stats-table {
      width: 100%;
      border-collapse: collapse;
      margin: 12px 0;
    }
    .account-stats-table th {
      color: #FFD700;
      font-family: 'Bangers', cursive;
      font-size: 14px;
      letter-spacing: 1px;
      padding: 6px 10px;
      border-bottom: 2px solid #FFD700;
      text-align: left;
    }
    .account-stats-table td {
      color: #e0e0e0;
      font-size: 13px;
      padding: 5px 10px;
      border-bottom: 1px solid rgba(255,215,0,0.15);
    }
    .account-stats-table .stat-delta-positive { color: #2ecc71; }
    .account-stats-table .stat-delta-negative { color: #e74c3c; }
    .account-stats-table .stat-delta-neutral { color: #aaa; }

    /* ============================================ */
    /* AI CHAT BOX CONSOLE                          */
    /* ============================================ */
    #ai-chat-tab {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 200;
      /* Dark grey/black slim edge tab */
      background: linear-gradient(135deg, #2a2a2e 0%, #1a1a1e 100%);
      border: 2px solid #444;
      border-left: none;
      border-radius: 0 8px 8px 0;
      padding: 6px 5px;
      cursor: pointer;
      color: #999;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 11px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
      text-shadow: none;
      transition: opacity 0.3s ease, left 0.3s ease, width 0.2s ease;
      pointer-events: auto;
      letter-spacing: 1px;
    }
    #ai-chat-tab:hover {
      box-shadow: 3px 3px 12px rgba(0,0,0,0.6);
      background: linear-gradient(135deg, #3a3a3e 0%, #2a2a2e 100%);
      color: #ccc;
    }
    #ai-chat-tab.chat-open {
      left: min(340px, 80vw);
    }
    /* Hidden state — shrink to almost invisible slim tab on edge */
    #ai-chat-tab.chat-tab-hidden {
      opacity: 0;
      pointer-events: none;
    }
    #ai-chat-tab.chat-tab-collapsed {
      padding: 3px 2px;
      font-size: 9px;
      opacity: 0.4;
    }
    #ai-chat-tab.chat-tab-collapsed:hover {
      opacity: 1;
    }
    /* Upward offset in camp mode to avoid menu overlap */
    #ai-chat-tab.camp-mode {
      top: 30%;
    }

    /* Reminder bubble near the chat tab */
    #chat-reminder-bubble {
      position: fixed;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 201;
      background: linear-gradient(135deg, #2a2a2e 0%, #1a1a1e 100%);
      border: 2px solid #555;
      border-radius: 10px;
      padding: 8px 12px;
      max-width: 180px;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 12px;
      color: #ccc;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.6);
      pointer-events: none;
      display: none;
      animation: bubble-bounce 0.4s ease-out;
    }
    #chat-reminder-bubble::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-right-color: #555;
    }
    #chat-reminder-bubble::after {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      border: 4px solid transparent;
      border-right-color: #2a2a2e;
      z-index: 1;
    }
    #chat-reminder-bubble.camp-mode {
      top: 30%;
    }

    #ai-chat-box {
      position: fixed;
      left: -350px;
      top: 50%;
      transform: translateY(-50%);
      width: min(340px, 80vw);
      height: min(480px, 70vh);
      z-index: 199;
      background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 50%, #0d0d0d 100%);
      border: 4px solid #FFD700;
      border-left: none;
      border-radius: 0 18px 18px 0;
      display: flex;
      flex-direction: column;
      transition: left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 20px rgba(0,0,0,0.5);
      pointer-events: auto;
      overflow: hidden;
    }
    #ai-chat-box.chat-visible {
      left: 0;
    }

    .chat-header {
      background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
      color: #000;
      padding: 10px 14px;
      font-family: 'Bangers', cursive;
      font-size: 20px;
      letter-spacing: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }
    .chat-header .chat-close-btn {
      background: none;
      border: 2px solid #000;
      border-radius: 50%;
      color: #000;
      font-size: 16px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      scrollbar-width: thin;
      scrollbar-color: #FFD700 #1a1a2e;
    }
    .chat-messages::-webkit-scrollbar {
      width: 6px;
    }
    .chat-messages::-webkit-scrollbar-track {
      background: #1a1a2e;
    }
    .chat-messages::-webkit-scrollbar-thumb {
      background: #FFD700;
      border-radius: 3px;
    }

    .chat-msg {
      max-width: 90%;
      padding: 10px 14px;
      border-radius: 14px;
      font-family: 'Bangers', cursive;
      font-size: 14px;
      line-height: 1.4;
      position: relative;
      word-wrap: break-word;
    }
    .chat-msg.ai {
      /* Farmer bubble comic style */
      background: #fffde7;
      border: 2px solid #4e342e;
      color: #3e2723;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
      box-shadow: 3px 3px 0px #4e342e;
    }
    .chat-msg.ai::before {
      content: '💧';
      position: absolute;
      top: -8px;
      left: 8px;
      font-size: 16px;
    }
    .chat-msg.user {
      background: linear-gradient(135deg, #2d5016 0%, #1a3a0a 100%);
      border: 2px solid #4CAF50;
      color: #E8F5E9;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }
    .chat-msg.system {
      background: rgba(255,215,0,0.1);
      border: 1px dashed #FFD700;
      color: #FFD700;
      align-self: center;
      text-align: center;
      font-size: 12px;
      max-width: 95%;
    }

    .chat-input-area {
      display: flex;
      gap: 6px;
      padding: 10px;
      background: rgba(0,0,0,0.6);
      border-top: 2px solid #FFD700;
      flex-shrink: 0;
    }
    .chat-input-area input {
      flex: 1;
      background: #1a1a2e;
      border: 2px solid #555;
      border-radius: 8px;
      color: #F0F8FF;
      padding: 8px 12px;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-size: 14px;
      outline: none;
      transition: border-color 0.3s;
    }
    .chat-input-area input:focus {
      border-color: #FFD700;
    }
    .chat-input-area button {
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      border: none;
      border-radius: 8px;
      color: #000;
      font-family: 'Bangers', cursive;
      font-size: 14px;
      padding: 8px 16px;
      cursor: pointer;
      font-weight: bold;
      transition: transform 0.1s, box-shadow 0.2s;
    }
    .chat-input-area button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(255,215,0,0.5);
    }
    .chat-input-area button:active {
      transform: scale(0.95);
    }

    /* ============================================ */
    /* CHARACTER VISUALS SCREEN                     */
    /* ============================================ */
    #character-visuals-screen {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
      z-index: 150;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      padding: 20px;
    }

    .char-vis-header {
      font-family: 'Bangers', cursive;
      font-size: 28px;
      color: #FFD700;
      text-shadow: 0 0 10px rgba(255,215,0,0.5);
      margin-bottom: 16px;
      letter-spacing: 3px;
    }

    .char-vis-preview {
      width: min(280px, 70vw);
      height: min(280px, 70vw);
      background: radial-gradient(circle, #1a2a3a 0%, #0a0a1a 70%);
      border: 4px solid #FFD700;
      border-radius: 18px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 40px rgba(0,0,0,0.7);
      overflow: hidden;
    }

    .char-vis-preview .char-preview-drop {
      width: 80px;
      height: 100px;
      background: radial-gradient(ellipse at 30% 30%, #87CEEB, #4A90D9, #2E5BA7);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      position: relative;
      animation: char-breathe 3s ease-in-out infinite;
    }
    .char-vis-preview .char-preview-drop::after {
      content: '🚬';
      position: absolute;
      right: -16px;
      top: 35%;
      font-size: 18px;
      animation: cigar-glow 2s ease-in-out infinite alternate;
    }
    @keyframes char-breathe {
      0%, 100% { transform: scaleY(1) scaleX(1); }
      50% { transform: scaleY(1.05) scaleX(0.97); }
    }
    @keyframes cigar-glow {
      0% { filter: brightness(1); }
      100% { filter: brightness(1.3); }
    }

    .char-vis-sections {
      width: min(600px, 90vw);
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .char-vis-section {
      background: rgba(255,255,255,0.05);
      border: 2px solid rgba(255,215,0,0.4);
      border-radius: 12px;
      padding: 14px;
    }
    .char-vis-section-title {
      font-family: 'Bangers', cursive;
      font-size: 18px;
      color: #FFD700;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }

    .char-vis-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .char-vis-option {
      background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4e 100%);
      border: 2px solid #555;
      border-radius: 10px;
      padding: 8px 14px;
      color: #F0F8FF;
      font-family: 'Bangers', cursive;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .char-vis-option:hover {
      border-color: #FFD700;
      box-shadow: 0 0 8px rgba(255,215,0,0.4);
    }
    .char-vis-option.selected {
      border-color: #FFD700;
      background: linear-gradient(135deg, #2d4a1a 0%, #1a3a0a 100%);
      box-shadow: 0 0 12px rgba(255,215,0,0.5);
    }

    /* ============================================ */
    /* CODEX SCREEN — Comic Book Magazine Style      */
    /* ============================================ */
    #codex-screen {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      /* LIQUID GOLD & DARK WATER: Deep abyssal black/dark-blue with animated wave effect */
      background:
        radial-gradient(ellipse at 20% 80%, rgba(0, 30, 60, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(0, 20, 50, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #000814 0%, #001020 50%, #000408 100%);
      z-index: 9000;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      padding: 12px 8px;
      box-sizing: border-box;
      /* Add animated wave overlay via pseudo-element */
      position: relative;
    }

    /* Dark water wave animation overlay */
    #codex-screen::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background:
        radial-gradient(ellipse 800px 400px at var(--wave-x, 50%) var(--wave-y, 50%),
          rgba(10, 40, 80, 0.15) 0%,
          transparent 70%);
      animation: darkWaterRipple 8s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }

    @keyframes darkWaterRipple {
      0%   { --wave-x: 30%; --wave-y: 20%; opacity: 0.3; }
      25%  { --wave-x: 70%; --wave-y: 40%; opacity: 0.5; }
      50%  { --wave-x: 40%; --wave-y: 70%; opacity: 0.4; }
      75%  { --wave-x: 60%; --wave-y: 30%; opacity: 0.6; }
      100% { --wave-x: 30%; --wave-y: 20%; opacity: 0.3; }
    }

    /* Ensure content appears above wave overlay */
    #codex-screen > * {
      position: relative;
      z-index: 1;
    }

    /* Legacy classes kept for backwards compat */
    .codex-header { display: none; }
    .codex-pages { display: none; }
    .codex-pagination { display: none; }
    .codex-entry { display: none; }

    /* =================================================
       SUPER STAT BAR — Advanced real-time event panel
       Right side, below menu button, above minimap
       ================================================= */
    #super-stat-bar {
      display: none !important;
    }

    /* Header row: wave · kills · combo */
    .ssb-header {
      background: rgba(15, 15, 20, 0.65);
      border: 1px solid rgba(255, 215, 0, 0.25);
      border-radius: 7px 7px 0 0;
      padding: 3px 7px;
      font-size: 11px;
      color: #FFD700;
      text-align: center;
      letter-spacing: 1px;
      text-shadow: 0 0 6px rgba(255,215,0,0.6), 1px 1px 2px rgba(0,0,0,0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 0 6px rgba(0,0,0,0.4);
    }

    /* Shared base for all event/context rows */
    .ssb-row {
      border-radius: 6px;
      padding: 3px 6px;
      font-size: 11px;
      border: 1px solid rgba(255, 215, 0, 0.15);
      background: rgba(15, 15, 20, 0.65);
      color: #d0d0d0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity 0.35s ease, border-color 0.3s;
      display: none;    /* hidden until populated by JS */
      align-items: center;
      gap: 3px;
      min-height: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 0 4px rgba(0,0,0,0.4);
      text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    }

    /* Context rows */
    .ssb-region-row { font-size: 10px; }
    .ssb-quest-row  { font-size: 10px; }

    /* Horizontal divider */
    .ssb-sep {
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(255,215,0,0.3), transparent);
      margin: 1px 0;
      flex-shrink: 0;
    }

    /* History event rows */
    .ssb-prev2   { font-size: 10px; opacity: 0.4  !important; }
    .ssb-prev1   { font-size: 10px; opacity: 0.65 !important; }

    /* Live current event — most prominent */
    .ssb-current {
      font-size: 13px;
      border-width: 2px;
      padding: 5px 7px;
      min-height: 26px;
      opacity: 1 !important;
      letter-spacing: 0.5px;
    }

    /* Next-goal hint */
    .ssb-next-row {
      font-size: 9px;
      opacity: 0.45 !important;
      border-style: dashed;
    }

    /* Icon and text spans inside each row */
    .ssb-icon {
      flex-shrink: 0;
      font-size: 10px;
      line-height: 1;
    }
    .ssb-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }

    /* Flash-in animation when new event arrives */
    @keyframes ssb-flash-in {
      0%   { transform: scale(1.05) translateX(5px); opacity: 0.6; }
      50%  { transform: scale(1.02) translateX(0);   opacity: 1;   }
      100% { transform: scale(1)    translateX(0);   opacity: 1;   }
    }
    .ssb-new-event {
      animation: ssb-flash-in 0.35s ease-out forwards;
    }

    /* Countdown section inside super stat bar */
    .ssb-countdown {
      border-radius: 7px;
      padding: 5px 7px;
      font-family: 'Bangers', cursive;
      font-size: 22px;
      letter-spacing: 3px;
      text-align: center;
      border: 2px solid #FFD700;
      background: rgba(30,20,0,0.92);
      color: #FFD700;
      text-shadow: 0 0 10px #FFD700AA, 0 0 22px #FFD70066, 1px 1px 3px rgba(0,0,0,0.9);
      box-shadow: 0 0 8px #FFD70066, inset 0 0 6px rgba(255,215,0,0.12);
      margin-top: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ssb-countdown.ssb-cd-orange {
      border-color: #FF8800;
      color: #FF8800;
      text-shadow: 0 0 10px #FF8800AA, 0 0 22px #FF880066, 1px 1px 3px rgba(0,0,0,0.9);
      box-shadow: 0 0 8px #FF880066, inset 0 0 6px rgba(255,136,0,0.12);
    }
    .ssb-countdown.ssb-cd-red {
      border-color: #FF2222;
      color: #FF2222;
      text-shadow: 0 0 12px #FF2222CC, 0 0 28px #FF222266, 1px 1px 3px rgba(0,0,0,0.9);
      box-shadow: 0 0 10px #FF222266, inset 0 0 6px rgba(255,34,34,0.15);
    }
    .ssb-countdown.ssb-cd-green {
      border-color: #2ecc71;
      color: #2ecc71;
      text-shadow: 0 0 10px #2ecc71AA, 0 0 22px #2ecc7166, 1px 1px 3px rgba(0,0,0,0.9);
      box-shadow: 0 0 8px #2ecc7166, inset 0 0 6px rgba(46,204,113,0.12);
    }
    @keyframes ssb-countdown-pulse {
      0%   { transform: scale(1);    }
      40%  { transform: scale(1.12); }
      70%  { transform: scale(0.97); }
      100% { transform: scale(1);    }
    }
    .ssb-countdown-pulse {
      animation: ssb-countdown-pulse 0.45s ease-out forwards;
    }

    /* Portrait: super-stat-bar removed */
    @media (orientation: portrait) {
      #super-stat-bar { display: none !important; }
    }
    /* Landscape: super-stat-bar removed */
    @media (orientation: landscape) {
      #super-stat-bar { display: none !important; }
    }

/* ============================================================
   HARVESTING & RESOURCE HUD
   ============================================================ */
.harvest-hud {
  /* Hidden in game mode – only shown in camp mode via JS */
  display: none;
  position: fixed;
  bottom: 120px;
  left: 10px;
  flex-direction: column;
  gap: 4px;
  z-index: 110;
  pointer-events: none;
}
.harvest-hud.camp-mode {
  top: 10px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(200,162,72,0.4);
  border-radius: 14px;
  padding: 4px 12px;
  gap: 8px;
}
.harvest-res-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: 'Bangers', cursive;
  font-size: 13px;
  color: #FFF;
  text-shadow: 0 1px 3px #000;
}
.harvest-res-icon { font-size: 13px; }
.harvest-res-count { min-width: 18px; text-align: right; }

.harvest-swing-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 38px;
  pointer-events: none;
  z-index: 220;
  filter: drop-shadow(0 0 6px rgba(255,180,0,0.9));
  display: none;
}

/* ============================================================
   RAGE MODE HUD — now integrated into unified bar, keep only
   the activate button styles and the old container as a slim
   button row below the unified bars.
   ============================================================ */
.rage-hud {
  position: fixed;
  bottom: 80px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 115;
  background: rgba(0,0,0,0.65);
  border: 2px solid #FF4400;
  border-radius: 10px;
  /* Slightly smaller than before so it doesn't overlap "Current Lvl" or companion buttons */
  padding: 3px 6px;
  max-width: 160px;
}
.rage-label {
  font-family: 'Bangers', cursive;
  font-size: 12px;
  color: #FF8800;
  letter-spacing: 2px;
  white-space: nowrap;
}
.rage-bar-bg {
  display: none; /* Old bar hidden; rage now uses unified bar */
}
.rage-bar-fill {
  display: none;
}
.rage-activate-btn {
  font-family: 'Bangers', cursive;
  font-size: 12px;
  letter-spacing: 2px;
  background: rgba(80,20,0,0.9);
  color: #FF8800;
  border: 2px solid #FF4400;
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.rage-activate-btn:disabled { opacity: 0.4; cursor: default; }
.rage-activate-btn.rage-ready {
  background: rgba(200,60,0,0.85);
  color: #FFD700;
  animation: rage-ready-pulse 0.8s ease-in-out infinite;
}
.rage-activate-btn.rage-active {
  background: rgba(220,80,0,0.95);
  color: #FFF;
}
@keyframes rage-ready-pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ============================================================
   SPECIAL ATTACKS & COMPANION ICONS — Unified Style
   Both use the same .ability-icon base class for consistent look.
   ============================================================ */
.special-attacks-hud {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 115;
}

/* Shared base for both special-attack and companion icons */
.ability-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.8);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Bangers', cursive;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.ability-icon:hover {
  border-color: rgba(255,215,0,0.7);
  background: rgba(30,30,30,0.9);
  transform: scale(1.05);
}
.ability-icon.sa-ready {
  border-color: rgba(255,215,0,0.8);
  box-shadow: 0 0 8px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.6);
}
.ability-icon.sa-locked {
  filter: brightness(0.35) grayscale(1);
  border-color: rgba(255,255,255,0.15);
  cursor: default;
}
.ability-icon:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Empty slot placeholder — shows a dim outline when no ability is equipped */
.ability-icon.ability-empty {
  background: rgba(0,0,0,0.4);
  border: 2px dashed rgba(255,255,255,0.15);
  cursor: default;
  box-shadow: none;
}
.ability-icon.ability-empty:hover {
  border-color: rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.5);
  transform: none;
}
.ability-icon.ability-empty .sa-icon {
  opacity: 0.2;
}

/* Keep old class names working as aliases */
.special-attack-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,0.8);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  font-family: 'Bangers', cursive;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.special-attack-btn.sa-ready { border-color: rgba(255,215,0,0.8); box-shadow: 0 0 8px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.6); }
.special-attack-btn.sa-locked { filter: brightness(0.35) grayscale(1); border-color: rgba(255,255,255,0.15); cursor: default; }
.special-attack-btn:disabled { opacity: 0.5; cursor: default; }
.sa-icon { font-size: 18px; line-height: 1; }
.sa-name { font-size: 7px; color: #DDD; letter-spacing: 0.5px; text-align: center; line-height: 1; margin-top: 1px; }
.sa-cooldown-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: rgba(0,0,0,0.65);
  transition: height 0.1s linear;
  pointer-events: none;
}

/* Big rage text notification */
.rage-big-text {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', cursive;
  font-size: 42px;
  letter-spacing: 4px;
  text-shadow: 0 0 20px currentColor, 2px 2px 0 #000;
  pointer-events: none;
  z-index: 230;
  animation: rage-text-anim 1.8s forwards;
  white-space: nowrap;
}
@keyframes rage-text-anim {
  0%   { opacity:0; transform:translateX(-50%) scale(0.6); }
  20%  { opacity:1; transform:translateX(-50%) scale(1.1); }
  70%  { opacity:1; transform:translateX(-50%) scale(1.0); }
  100% { opacity:0; transform:translateX(-50%) scale(1.0) translateY(-30px); }
}

/* ============================================================
   MELEE TAKEDOWN BUTTON
   ============================================================ */
#melee-takedown-btn {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 64px;
  height: 64px;
  background: rgba(20,0,0,0.85);
  border: 2px solid rgba(200,50,0,0.7);
  border-radius: 12px;
  cursor: pointer;
  z-index: 115;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Bangers', cursive;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition: border-color 0.2s;
}
#melee-takedown-btn:disabled { opacity: 0.4; cursor: default; }
#melee-takedown-btn.melee-ready { border-color: rgba(255,80,0,0.9); }
.melee-icon { font-size: 26px; line-height: 1; }
.melee-label { font-size: 9px; color: #FF9966; letter-spacing: 0.5px; margin-top: 1px; }
.melee-cd-overlay {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0%;
  background: rgba(0,0,0,0.65);
  transition: height 0.1s linear;
  pointer-events: none;
}
/* Melee slash visual effect */
.melee-slash-fx {
  position: fixed;
  pointer-events: none;
  z-index: 220;
  font-size: 72px;
  animation: melee-slash-anim 0.5s ease-out forwards;
  transform-origin: center;
}
@keyframes melee-slash-anim {
  0%   { opacity:1; transform: scale(0.4) rotate(-30deg); }
  40%  { opacity:1; transform: scale(1.2) rotate(10deg); }
  100% { opacity:0; transform: scale(1.5) rotate(20deg) translateY(-20px); }
}
/* Special attack enhanced visual ring */
.sa-ring-outer {
  position: fixed;
  pointer-events: none;
  z-index: 218;
  border-radius: 50%;
  animation: sa-ring-expand 0.7s ease-out forwards;
}
@keyframes sa-ring-expand {
  0%   { opacity:0.9; transform: translate(-50%,-50%) scale(0); }
  60%  { opacity:0.6; }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(1); }
}
/* Loadout panel */
#sa-loadout-panel {
  position: fixed;
  bottom: 150px;
  left: 10px;
  background: rgba(0,0,0,0.92);
  border: 2px solid rgba(255,215,0,0.5);
  border-radius: 14px;
  padding: 10px;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 6px;
  max-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
}
#sa-loadout-panel.visible { display: flex; }
#sa-loadout-panel h3 { color: #FFD700; font-size: 13px; margin: 0 0 4px; font-family: 'Bangers', cursive; letter-spacing: 1px; }
.sa-loadout-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  font-size: 12px;
  color: #DDD;
  background: rgba(255,255,255,0.05);
}
.sa-loadout-item.equipped { border-color: rgba(255,215,0,0.7); background: rgba(255,215,0,0.1); }
.sa-loadout-item.locked { opacity: 0.4; cursor: default; }
.sa-loadout-close { align-self: flex-end; background: none; border: none; color: #888; font-size: 16px; cursor: pointer; padding: 0; line-height: 1; }

/* ============================================================
   UI CALIBRATION MODE
   ============================================================ */
#ui-calibration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  z-index: 9000;
  pointer-events: none;
}

/* Draggable tab button — always visible during calibration */
.ui-cal-tab-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #1a6e9f, #0d4a70);
  color: #FFD700;
  font-family: 'Bangers', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 8px 14px;
  border: 2px solid rgba(255,215,0,0.6);
  border-radius: 10px;
  cursor: grab;
  pointer-events: auto;
  z-index: 9002;
  box-shadow: 0 3px 0 rgba(0,0,0,0.5);
  user-select: none;
  -webkit-user-select: none;
}
.ui-cal-tab-toggle:active { cursor: grabbing; }

/* Collapsible panel */
.ui-cal-panel {
  position: fixed;
  top: 50px;
  right: 10px;
  background: rgba(10, 10, 20, 0.96);
  border: 2px solid rgba(255,215,0,0.6);
  border-radius: 12px;
  padding: 12px;
  z-index: 9001;
  pointer-events: auto;
  max-width: min(360px, 90vw);
}
.ui-cal-title {
  color: #FFD700;
  font-family: 'Bangers', cursive;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 0 0 8px 0;
  border-bottom: 1px solid rgba(255,215,0,0.3);
  margin-bottom: 8px;
  text-align: left;
}
.ui-cal-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.ui-cal-btn {
  font-family: 'Bangers', cursive;
  font-size: 13px;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  white-space: nowrap;
}
.ui-cal-btn:active { transform: translateY(3px); box-shadow: none; }
.ui-cal-save-btn  { background: linear-gradient(135deg, #27ae60, #1e8449); color: #fff; }
.ui-cal-reset-btn { background: linear-gradient(135deg, #e67e22, #ca6f1e); color: #fff; }
.ui-cal-close-btn { background: linear-gradient(135deg, #555, #333); color: #ccc; }

/* Active element highlight during calibration */
.ui-cal-active-element {
  outline: 2px dashed rgba(255, 215, 0, 0.8) !important;
  outline-offset: 3px;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
}
.ui-cal-active-element:active { cursor: default !important; }

/* Label badge shown inside each HUD element during calibration */
.ui-cal-label-badge {
  position: absolute;
  top: -22px;
  left: 0;
  background: rgba(0, 0, 0, 0.82);
  color: #FFD700;
  font-family: 'Bangers', cursive;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9001;
}

/* Scale slider for calibration mode */
.ui-cal-scale-wrap {
  position: absolute;
  bottom: -30px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 9001;
  background: rgba(0,0,0,0.75);
  border-radius: 5px;
  padding: 2px 5px;
  white-space: nowrap;
}
.ui-cal-scale-label {
  color: #00ffcc;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  min-width: 32px;
  text-align: center;
}
.ui-cal-scale-slider {
  width: 70px;
  height: 4px;
  accent-color: #00ffcc;
  cursor: pointer;
}

/* Resize handle (upper-left corner ◤) */
.ui-cal-resize-handle {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 20px;
  height: 20px;
  background: rgba(255, 215, 0, 0.85);
  color: #000;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px 0 4px 0;
  cursor: nwse-resize;
  z-index: 9002;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
/* Corner resize handles (other 3 corners) */
.ui-cal-resize-br {
  position: absolute; bottom: -1px; right: -1px;
  width: 20px; height: 20px;
  background: rgba(255, 215, 0, 0.85); color: #000;
  font-size: 13px; line-height: 20px; text-align: center;
  border-radius: 0 4px 0 4px; cursor: se-resize;
  z-index: 9002; pointer-events: auto; user-select: none; -webkit-user-select: none;
}
.ui-cal-resize-bl {
  position: absolute; bottom: -1px; left: -1px;
  width: 20px; height: 20px;
  background: rgba(255, 215, 0, 0.85); color: #000;
  font-size: 13px; line-height: 20px; text-align: center;
  border-radius: 4px 0 4px 0; cursor: sw-resize;
  z-index: 9002; pointer-events: auto; user-select: none; -webkit-user-select: none;
}
.ui-cal-resize-tr {
  position: absolute; top: -1px; right: -1px;
  width: 20px; height: 20px;
  background: rgba(255, 215, 0, 0.85); color: #000;
  font-size: 13px; line-height: 20px; text-align: center;
  border-radius: 0 4px 0 4px; cursor: ne-resize;
  z-index: 9002; pointer-events: auto; user-select: none; -webkit-user-select: none;
}
/* Edge resize handles */
.ui-cal-resize-t, .ui-cal-resize-b {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 22px; height: 14px;
  background: rgba(255, 215, 0, 0.75); color: #000;
  font-size: 10px; line-height: 14px; text-align: center;
  border-radius: 0 0 5px 5px; cursor: ns-resize;
  z-index: 9002; pointer-events: auto; user-select: none; -webkit-user-select: none;
}
.ui-cal-resize-t { top: -1px; border-radius: 5px 5px 0 0; }
.ui-cal-resize-b { bottom: -1px; }
.ui-cal-resize-l, .ui-cal-resize-r {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 14px; height: 22px;
  background: rgba(255, 215, 0, 0.75); color: #000;
  font-size: 10px; line-height: 22px; text-align: center;
  border-radius: 0 5px 5px 0; cursor: ew-resize;
  z-index: 9002; pointer-events: auto; user-select: none; -webkit-user-select: none;
}
.ui-cal-resize-l { left: -1px; border-radius: 5px 0 0 5px; }
.ui-cal-resize-r { right: -1px; }

/* Move handle (center drag zone) — strictly moves, never resizes */
.ui-cal-move-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: grab;
  font-size: 15px;
  color: #fff;
  z-index: 9002;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
.ui-cal-move-handle:active { cursor: grabbing; }

/* ============================================================
   LIVING BORDER SYSTEM — universal breathing dark outer border
   Applied to all interactive UI elements that need the effect.
   The inner UV sheen uses a pseudo-element on .living-border class.
   ============================================================ */

/* Living border animation: dark outer border that breathes like fog/shadow */
@keyframes living-border-breathe {
  0%   { box-shadow: 0 0 0 3px rgba(4,8,18,0.96), 0 0 8px rgba(0,0,0,0.5),  inset 0 0 0 1px rgba(150,220,255,0.08); }
  25%  { box-shadow: 0 0 0 4px rgba(3,6,16,0.97), 0 0 10px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(150,220,255,0.10); }
  50%  { box-shadow: 0 0 0 4px rgba(2,5,15,0.98), 0 0 13px rgba(0,0,0,0.6),  inset 0 0 0 1px rgba(180,240,255,0.14); }
  75%  { box-shadow: 0 0 0 3px rgba(4,7,18,0.96), 0 0 9px rgba(0,0,0,0.52),  inset 0 0 0 1px rgba(150,220,255,0.09); }
  100% { box-shadow: 0 0 0 3px rgba(4,8,18,0.96), 0 0 8px rgba(0,0,0,0.5),  inset 0 0 0 1px rgba(150,220,255,0.08); }
}

/* Apply to camp header buttons */
.camp-header-btn {
  animation: living-border-breathe 4s ease-in-out infinite;
}
.camp-header-btn:hover, .camp-header-btn:active {
  animation: none;
}

/* super-stat-bar removed — no animation needed */

/* Apply to ssb-countdown — living glow around it */
.ssb-countdown {
  animation: ssb-countdown-pulse 0.45s ease-out forwards, living-border-breathe 3s ease-in-out infinite;
}

/* tutorial-text-wrap: remove border animation that was creating a visible dark-bordered
   black square at screen center (where the player character is) when no countdown text
   was showing (opacity:0). The element is still used for countdown text display. */
#tutorial-text-wrap {
  animation: none;
}


/* ── Account Level-Up Curtain — Premium Glass Drop ── */

/*  Teaser peek: peeks ~10px from the top before the full drop.
    Applied first; .curtain-enter replaces it with the full spring-drop. */
@keyframes curtain-teaser {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(calc(-100% + 10px)); }
}

/*  Main spring-drop: panel falls from top with satisfying bounce.
    cubic-bezier(0.22,1,0.36,1) = spring overshoot without wild bounce. */
@keyframes curtain-drop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(2%);    }   /* slight overshoot */
  80%  { transform: translateY(-0.8%); }   /* settle back */
  100% { transform: translateY(0);     }
}

@keyframes curtain-rise {
  0%   { transform: translateY(0);      }
  30%  { transform: translateY(-2%);    }   /* small pullback before rising */
  100% { transform: translateY(-100%);  }
}

/* Slow edge-glow sweep on the bottom border — shows while curtain is open */
@keyframes curtain-border-glow {
  0%   { border-bottom-color: rgba(255,215,0,0.25); box-shadow: var(--c-base-shadow), 0 0 30px rgba(255,215,0,0.08); }
  50%  { border-bottom-color: rgba(255,215,0,0.90); box-shadow: var(--c-base-shadow), 0 0 80px rgba(255,215,0,0.35), 0 0 140px rgba(255,165,0,0.12); }
  100% { border-bottom-color: rgba(255,215,0,0.25); box-shadow: var(--c-base-shadow), 0 0 30px rgba(255,215,0,0.08); }
}

#account-levelup-curtain {
  --c-base-shadow: 0 12px 60px rgba(0,0,0,0.95), 0 4px 20px rgba(0,0,0,0.8);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* Minimum 58% of screen height; content may expand it */
  min-height: 58vh;
  height: auto;
  max-height: 72vh;

  z-index: 9999;

  /* Black glass: deep black base + subtle cool-tint inner glow */
  background:
    linear-gradient(160deg,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0)     40%
    ),
    linear-gradient(to bottom,
      rgba(6,6,14,0.98)  0%,
      rgba(8,8,18,0.97)  55%,
      rgba(10,10,22,0.93) 85%,
      rgba(10,10,22,0.0)  100%
    );

  /* Thick 3-D rounded bottom edge */
  border-bottom-left-radius:  32px;
  border-bottom-right-radius: 32px;

  /* Ice-glass border: layered inset glow + outer shadow */
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: 3px solid rgba(255,215,0,0.55);
  border-left:   1px solid rgba(255,255,255,0.06);
  border-right:  1px solid rgba(255,255,255,0.06);
  box-shadow: var(--c-base-shadow);

  /* Frosted glass backdrop (supported browsers) */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter:          blur(18px) saturate(140%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 28px 48px;

  transform: translateY(-100%);
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  will-change: transform;
}

/* Teaser: peeks just enough to show the glowing edge */
#account-levelup-curtain.curtain-teaser {
  animation: curtain-teaser 0.35s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Full drop with spring overshoot */
#account-levelup-curtain.curtain-enter {
  animation: curtain-drop 0.65s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Pulsing border glow while panel is visible */
#account-levelup-curtain.curtain-enter-done {
  transform: translateY(0);
  animation: curtain-border-glow 2.4s ease-in-out infinite;
}

#account-levelup-curtain.curtain-exit {
  animation: curtain-rise 0.45s cubic-bezier(0.55,0,1,0.45) forwards;
}

/* Decorative inner shine streak across the glass face */
#account-levelup-curtain::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 70%,
    transparent 100%
  );
  border-radius: 0;
  pointer-events: none;
}

/* Subtle inside corner radius shine */
#account-levelup-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  border-bottom-left-radius:  32px;
  border-bottom-right-radius: 32px;
  box-shadow: inset 0 -2px 12px rgba(255,215,0,0.07), inset 0 0 40px rgba(255,255,255,0.025);
  pointer-events: none;
}

.curtain-icon {
  font-size: 40px;
  filter: drop-shadow(0 0 16px rgba(255,215,0,1)) drop-shadow(0 0 32px rgba(255,165,0,0.5));
  animation: curtain-icon-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes curtain-icon-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.curtain-levelup-text {
  font-family: 'Bangers', cursive;
  font-size: 28px;
  letter-spacing: 4px;
  color: #FFD700;
  text-shadow: 0 0 18px rgba(255,215,0,0.9), 0 0 40px rgba(255,165,0,0.4), 0 3px 6px rgba(0,0,0,0.95);
  animation: curtain-text-slide 0.45s 0.12s cubic-bezier(0.22,1,0.36,1) both;
}
.curtain-level-num {
  font-family: 'Bangers', cursive;
  font-size: clamp(48px, 10vw, 72px);
  letter-spacing: 2px;
  color: #FFFFFF;
  text-shadow: 0 0 30px rgba(255,215,0,1), 0 0 60px rgba(255,165,0,0.6), 0 4px 8px rgba(0,0,0,0.9);
  line-height: 1;
  animation: curtain-text-slide 0.45s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
.curtain-reward-text {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 16px;
  color: #e8ddb8;
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
  animation: curtain-text-slide 0.45s 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes curtain-text-slide {
  0%   { transform: translateY(18px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Rank title shown inside curtain */
.curtain-rank-title {
  font-family: 'Bangers', cursive;
  font-size: 26px;
  letter-spacing: 3px;
  color: #FFA500;
  text-shadow: 0 0 20px rgba(255,165,0,1), 0 0 40px rgba(255,100,0,0.5), 0 3px 6px rgba(0,0,0,0.9);
  animation: curtain-title-pulse 0.6s 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes curtain-title-pulse {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* Milestone rank-up: slightly taller + purple-gold tint */
#account-levelup-curtain.curtain-milestone {
  min-height: 68vh;
  max-height: 80vh;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(to bottom,
      rgba(5,3,14,0.99)   0%,
      rgba(18,3,40,0.97)  55%,
      rgba(22,4,50,0.92)  80%,
      rgba(10,3,25,0.0)  100%
    );
  border-bottom-color: rgba(255,165,0,0.9);
  border-bottom-width: 4px;
}

/* Sunburst inside the curtain */
.curtain-sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%) rotate(0deg);
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,220,0,0.14) 8deg,
    transparent 16deg, rgba(255,180,0,0.10) 24deg,
    transparent 32deg
  );
  border-radius: 50%;
  animation: sunburst-spin 3s linear infinite;
}

/* ── Level-Up Rarity Effects ────────────────────────────────────────────── */

/* Confetti burst */
@keyframes lvlup-confetti {
  0%   { transform: translate(0, 0) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) rotate(calc(var(--rot) + 720deg)); opacity: 0; }
}
.lvlup-confetti {
  position: fixed;
  width: 6px;
  height: 10px;
  border-radius: 2px;
  pointer-events: none !important;
  z-index: 1000;
  animation: lvlup-confetti 1200ms ease-out forwards;
}
@keyframes lvlup-mythic-hue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
.lvlup-confetti-mythic {
  background: linear-gradient(135deg, #ff4444, #ff8800, #ffff00, #44ff88, #4488ff, #cc44ff) !important;
  animation: lvlup-confetti 1200ms ease-out forwards, lvlup-mythic-hue 0.4s linear infinite;
}

/* Light rays */
@keyframes lvlup-ray {
  0%   { transform: rotate(var(--angle)) scaleY(0); opacity: 0.8; }
  20%  { transform: rotate(var(--angle)) scaleY(1); opacity: 0.85; }
  65%  { transform: rotate(var(--angle)) scaleY(1); opacity: 0.7; }
  100% { transform: rotate(var(--angle)) scaleY(1); opacity: 0; }
}
.lvlup-ray {
  position: fixed;
  width: var(--ray-w, 3px);
  height: var(--ray-h, 160px);
  pointer-events: none !important;
  z-index: 1000;
  transform-origin: top center;
  animation: lvlup-ray var(--ray-dur, 900ms) ease-out forwards;
  will-change: transform, opacity;
}

/* Screen edge flash */
@keyframes lvlup-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.lvlup-screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  animation: lvlup-flash 600ms ease-out forwards;
}


.rarity-common    { color: #aaaaaa; }
.rarity-uncommon  { color: #55cc55; }
.rarity-rare      { color: #44aaff; }
.rarity-epic      { color: #aa44ff; }
.rarity-legendary { color: #ffaa00; }

/* ── Rarity Escalation Glow Ring ─────────────────────────────────────
   Absolutely-positioned ring anchored over a reward element.
   Colour is driven by --ring-color CSS variable set from JS.
   Three states:
     .rarity-ring-pulse  → gentle throb (building tension)
     .rarity-ring-flash  → bright burst (advancing to next tier)
     .rarity-ring-final  → hold + radiate (jackpot — final rarity)
── */
@keyframes rarity-ring-pulse-anim {
  0%   { box-shadow: 0 0 8px 2px var(--ring-color), 0 0 0px 0px var(--ring-color); opacity: 0.55; }
  45%  { box-shadow: 0 0 24px 8px var(--ring-color), 0 0 50px 12px var(--ring-color); opacity: 0.85; }
  70%  { box-shadow: 0 0 12px 4px var(--ring-color), 0 0 20px  6px var(--ring-color); opacity: 0.65; }
  100% { box-shadow: 0 0 30px 10px var(--ring-color), 0 0 60px 16px var(--ring-color); opacity: 0.9; }
}

@keyframes rarity-ring-flash-anim {
  0%   { box-shadow: 0 0 40px 14px var(--ring-color), 0 0 80px 24px var(--ring-color); opacity: 1; }
  50%  { box-shadow: 0 0 20px  6px var(--ring-color), 0 0 40px 12px var(--ring-color); opacity: 0.7; }
  100% { box-shadow: 0 0 10px  2px var(--ring-color), 0 0 20px  4px var(--ring-color); opacity: 0.4; }
}

@keyframes rarity-ring-final-anim {
  0%   { box-shadow: 0 0 24px  8px var(--ring-color), 0 0 50px  16px var(--ring-color); opacity: 0.8;  transform: translate(-50%, -50%) scale(1.00); }
  30%  { box-shadow: 0 0 60px 22px var(--ring-color), 0 0 120px 40px var(--ring-color); opacity: 1.0;  transform: translate(-50%, -50%) scale(1.04); }
  60%  { box-shadow: 0 0 40px 14px var(--ring-color), 0 0 80px  28px var(--ring-color); opacity: 0.95; transform: translate(-50%, -50%) scale(1.01); }
  80%  { box-shadow: 0 0 70px 28px var(--ring-color), 0 0 140px 50px var(--ring-color); opacity: 1.0;  transform: translate(-50%, -50%) scale(1.06); }
  100% { box-shadow: 0 0 50px 18px var(--ring-color), 0 0 100px 36px var(--ring-color); opacity: 0.9;  transform: translate(-50%, -50%) scale(1.02); }
}

.rarity-glow-ring {
  --ring-color: #aaaaaa;
  position: fixed;
  border-radius: 14px;
  border: 2px solid var(--ring-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  box-sizing: border-box;
  will-change: box-shadow, opacity;
}
.rarity-glow-ring.rarity-ring-pulse {
  animation: rarity-ring-pulse-anim 0.5s ease-in-out infinite alternate;
}
.rarity-glow-ring.rarity-ring-flash {
  animation: rarity-ring-flash-anim 0.22s ease-out forwards;
}
.rarity-glow-ring.rarity-ring-final {
  animation: rarity-ring-final-anim 0.7s ease-in-out infinite alternate;
}

#item-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#item-info-panel {
  background: linear-gradient(145deg,#12182b,#1e2640);
  border: 2px solid #F39C12;
  border-radius: 14px;
  padding: 22px 20px 18px;
  max-width: 360px;
  width: 100%;
  color: #fff;
  box-shadow: 0 0 40px rgba(243,156,18,0.35);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  position: relative;
}
#item-info-panel .iip-icon { font-size: 48px; text-align: center; margin-bottom: 6px; }
#item-info-panel .iip-name {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 4px;
}
#item-info-panel .iip-rarity {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
#item-info-panel .iip-desc {
  color: #bbb;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}
#item-info-panel .iip-stats {
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
#item-info-panel .iip-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 2px 0;
  color: #90ee90;
}
#item-info-panel .iip-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
#item-info-panel .iip-btn-equip {
  flex: 1;
  padding: 10px;
  background: linear-gradient(to bottom,#27ae60,#1e8449);
  border: 2px solid #2ecc71;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
#item-info-panel .iip-btn-equip:hover { background: linear-gradient(to bottom,#2ecc71,#27ae60); }
#item-info-panel .iip-btn-close {
  flex: 1;
  padding: 10px;
  background: rgba(255,255,255,0.08);
  border: 2px solid #888;
  border-radius: 8px;
  color: #ddd;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
#item-info-panel .iip-btn-close:hover { background: rgba(255,255,255,0.15); }
#item-info-panel .iip-hint {
  text-align: center;
  font-size: 10px;
  color: #666;
  margin-top: 8px;
}

/* ===================================================================
   Dopamine System — elastic damage numbers, fever mode, level-up FX
   =================================================================== */

/* --- Elastic Damage Numbers --- */
.elastic-damage-number {
  position: absolute;
  pointer-events: none !important;
  z-index: 50;
  /* Cozy, rounded, highly legible damage font — Nunito falls back to M PLUS Rounded (already loaded) */
  font-family: 'Nunito', 'M PLUS Rounded 1c', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #fff;
  text-shadow:
    0 0 4px rgba(0,0,0,0.9),
    0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}
.elastic-damage-number.critical {
  color: #FFD700;
  /* Critical text is SMALLER than base so it spawns cleanly above the enemy head without dominating the screen */
  font-size: 17px;
  font-weight: 900;
  text-shadow:
    0 0 8px rgba(255,215,0,0.8),
    0 0 16px rgba(255,165,0,0.5),
    0 2px 4px rgba(0,0,0,0.8);
}
.elastic-damage-number.headshot {
  color: #FF6644;
  /* Headshot text is SMALLER — spawns right at the head position without large visual noise */
  font-size: 17px;
  font-weight: 900;
  text-shadow:
    0 0 10px rgba(255,100,68,0.8),
    0 0 20px rgba(255,50,50,0.5),
    0 2px 4px rgba(0,0,0,0.8);
}

/* --- Fever Mode Overlay --- */
#fever-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 0.4s ease-out;
}

/* --- Dopamine FX Overlay (camera effects) --- */
#dopamine-fx-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  transition: backdrop-filter 0.3s, box-shadow 0.2s;
}

/* --- Level-up card collector animations --- */
@keyframes cardReveal {
  0%   { opacity: 0; transform: scale(0.5) rotateY(20deg) translateY(50px); }
  60%  { opacity: 1; transform: scale(1.05) rotateY(-3deg) translateY(-5px); }
  100% { opacity: 1; transform: scale(1) rotateY(0) translateY(0); }
}
@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
  50%      { box-shadow: 0 0 25px rgba(255,215,0,0.7), 0 0 50px rgba(255,165,0,0.3); }
}
@keyframes cardSelected {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); filter: brightness(1.3); }
  100% { transform: scale(1.1); filter: brightness(1.1); }
}

/* ===================================================================
   COMIC BOOK SPEECH BUBBLES — Benny the Hippie Guide
   Redesigned as dynamic, bold comic-style dialogue bubbles.
   =================================================================== */

/* ===================================================================
   A.I.D.A TERMINAL — Override ds-bubble with retro-futuristic terminal style
   =================================================================== */
/* Override base ds-bubble with terminal foundation */
#ds-bubble {
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  letter-spacing: 0.5px !important;
  border-width: 2px !important;
  border-style: solid !important;
  filter: drop-shadow(0 0 8px rgba(0,255,204,0.5)) drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  max-width: min(320px, 88vw) !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  box-sizing: border-box !important;
  border-radius: 4px !important;
  transform: none !important;
}

/* All emotion variants share the terminal dark look */
.ds-bubble-happy,
.ds-bubble-task,
.ds-bubble-joking,
.ds-bubble-thinking,
.ds-bubble-sad,
.ds-bubble-goal {
  background: rgba(0, 12, 18, 0.94) !important;
  color: #00ffcc !important;
  border-color: #00ffcc !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px rgba(0,255,204,0.3),
    inset 0 0 12px rgba(0,255,204,0.06),
    0 0 20px rgba(0,255,204,0.2) !important;
  transform: none !important;
}

/* Tail pointer — terminal triangle pointing down */
.ds-bubble-happy::after,
.ds-bubble-task::after,
.ds-bubble-joking::after,
.ds-bubble-goal::after {
  border-top-color: #00ffcc !important;
  bottom: -13px !important;
  left: 18px !important;
  border-width: 9px !important;
}

/* Thinking variant: slightly yellow tint for uncertainty */
.ds-bubble-thinking {
  color: #ffe066 !important;
  border-color: #ffe066 !important;
  box-shadow:
    0 0 0 1px rgba(255,224,102,0.3),
    inset 0 0 12px rgba(255,224,102,0.06),
    0 0 20px rgba(255,224,102,0.2) !important;
}

/* Goal / objective variant: gold for critical directives */
.ds-bubble-goal {
  color: #FFD700 !important;
  border-color: #FFD700 !important;
  box-shadow:
    0 0 0 1px rgba(255,215,0,0.4),
    inset 0 0 12px rgba(255,215,0,0.06),
    0 0 20px rgba(255,215,0,0.25) !important;
}

/* Terminal scanline overlay for authentic retro feel */
#ds-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  border-radius: 4px;
}

/* Terminal prompt prefix styling */
#ds-bubble strong, #ds-bubble b {
  display: inline;
  transform: none;
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255,215,0,0.5);
}

/* LVL UP cards hardcoded to A.I.D.A textbox style */
#levelup-modal .upgrade-card.aida-card-theme {
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  border-radius: 4px !important;
  border: 2px solid #00ffcc !important;
  background: rgba(0, 12, 18, 0.94) !important;
  color: #00ffcc !important;
  padding: 12px !important;
  box-shadow:
    0 0 0 1px rgba(0,255,204,0.3),
    inset 0 0 12px rgba(0,255,204,0.06),
    0 0 20px rgba(0,255,204,0.2) !important;
}
#levelup-modal .upgrade-card.aida-card-theme::before {
  border-radius: 2px !important;
  animation: none !important;
  opacity: 0.18;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  ) !important;
}
#levelup-modal .upgrade-card.aida-card-theme .card-front {
  background: rgba(0, 12, 18, 0.94) !important;
  border-color: #00ffcc !important;
  color: #00ffcc !important;
  border-radius: 4px !important;
  padding: 10px 8px 12px !important;
}
#levelup-modal .upgrade-card.aida-card-theme .upgrade-title {
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  color: #00ffcc !important;
}
#levelup-modal .upgrade-card.aida-card-theme .upgrade-desc {
  color: #9efee7 !important;
}
#levelup-modal .upgrade-card.aida-card-theme .upgrade-rarity-header {
  font-family: 'Courier New', 'Lucida Console', monospace !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  margin-top: 2px;
}
#levelup-modal .upgrade-card.aida-card-theme .upgrade-horus {
  position: absolute;
  top: 6px;
  right: 8px;
  color: rgba(255, 215, 0, 0.72);
  font-size: 18px;
  text-shadow: 0 0 6px rgba(255,215,0,0.35);
  pointer-events: none;
  z-index: 3;
}

/* ===================================================================
   REWARD JUICE — Resource icons fly-in, sunburst, confetti
   =================================================================== */

.reward-fly-icon {
  position: fixed;
  pointer-events: none;
  z-index: 10001;
  font-size: 28px;
  transform: translate(-50%, -50%) scale(1.4);
  filter: drop-shadow(0 0 6px gold);
  will-change: transform, opacity, left, top;
}

.reward-sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%) rotate(0deg);
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,220,0,0.18) 10deg,
    transparent 20deg, rgba(255,180,0,0.12) 30deg,
    transparent 40deg
  );
  border-radius: 50%;
  animation: sunburst-spin 4s linear infinite;
}

@keyframes sunburst-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.reward-confetti {
  position: fixed;
  pointer-events: none !important;
  z-index: 1000;
  will-change: transform, opacity, left, top;
}

/* ===================================================================
   MUTATION SYSTEM — Synergy badge UI
   =================================================================== */

.mutation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a0030, #3a0060);
  border: 2px solid #9B59B6;
  color: #E8DAEF;
  font-family: Bangers, cursive;
  font-size: 13px;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(155,89,182,0.4), inset 0 0 6px rgba(155,89,182,0.2);
  animation: mutation-pulse 2s ease-in-out infinite;
}

@keyframes mutation-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(155,89,182,0.4); }
  50%       { box-shadow: 0 0 20px rgba(155,89,182,0.8), 0 0 40px rgba(155,89,182,0.3); }
}

/* ── Camp building menu slide-in ── */
@keyframes campMenuSlideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.camp-menu-box {
  animation: campMenuSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Milestone / Challenge Completed popup ── */
@keyframes challengeCompleted {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  70%  { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes challengeSlideOut {
  from { transform: translate(-50%, -50%) scale(1);       opacity: 1; }
  to   { transform: translate(-50%, calc(-50% + 30px)) scale(0.9); opacity: 0; }
}

.milestone-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: linear-gradient(135deg, #1a1200 0%, #0d0d0d 100%);
  border: 3px solid #FFD700;
  border-radius: 16px;
  padding: 28px 40px;
  text-align: center;
  box-shadow:
    0 0 40px rgba(255, 215, 0, 0.5),
    0 0 80px rgba(255, 215, 0, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: challengeCompleted 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  min-width: 280px;
}

.milestone-popup.milestone-popup-out {
  animation: challengeSlideOut 0.5s ease-in forwards;
}

.milestone-popup-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
}

.milestone-popup-title {
  font-family: Bangers, cursive;
  font-size: 22px;
  letter-spacing: 3px;
  color: #FFD700;
  text-shadow: 0 0 10px rgba(255,215,0,0.8);
  margin-bottom: 6px;
}

.milestone-popup-label {
  font-family: Bangers, cursive;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 10px;
}

.milestone-popup-reward {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #FFD700;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-block;
  letter-spacing: 0.5px;
}

/* Account section header — improved purple-gradient style */
.account-header-improved {
  background: linear-gradient(135deg, #1a0533 0%, #2d0a52 50%, #1a0533 100%);
  border-bottom: 2px solid #9b59b6;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(155,89,182,0.3);
}

/* ── Challenge Complete Board ────────────────────────────────────── */
@keyframes challenge-board-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes challenge-board-slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
@keyframes challenge-strike {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes challenge-laser-confetti {
  0%   { transform: translate(var(--cx), var(--cy)) scale(1)   rotate(0deg);   opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.4) rotate(720deg); opacity: 0; }
}
@keyframes challenge-gold-pulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255,215,0,0.6); }
  50%       { text-shadow: 0 0 20px rgba(255,215,0,1), 0 0 40px rgba(255,165,0,0.7); }
}

#challenge-complete-board {
  position: fixed;
  top: 16px;
  right: 16px;
  left: auto;
  transform: translateX(120%);
  z-index: 99999;
  background: #0a0a0a;
  border: 2px solid #FFD700;
  border-radius: 14px;
  padding: 14px 24px 16px;
  min-width: 240px;
  max-width: 300px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.15);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
#challenge-complete-board.slide-in {
  animation: challenge-board-slide-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
#challenge-complete-board.slide-out {
  animation: challenge-board-slide-out 0.35s ease-in forwards;
}
#challenge-complete-board .ccb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bangers', cursive;
  font-size: 14px;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#challenge-complete-board .ccb-name {
  position: relative;
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  overflow: hidden;
}
#challenge-complete-board .ccb-name .ccb-strike {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: #FFD700;
  width: 0;
  transform: translateY(-50%);
}
#challenge-complete-board .ccb-name.struck .ccb-strike {
  animation: challenge-strike 0.4s ease-out 0.3s forwards;
}
#challenge-complete-board .ccb-gold {
  font-family: 'Bangers', cursive;
  font-size: 26px;
  color: #FFD700;
  text-align: center;
  animation: challenge-gold-pulse 1.2s infinite;
  letter-spacing: 1px;
}
.challenge-confetti-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  animation: challenge-laser-confetti 0.8s ease-out forwards;
}

/* ── Achievement Dopamine Notification ───────────────────────────────────── */
.ach-notif-logo {
  line-height: 1;
  margin-bottom: 6px;
  animation: ach-logo-pop 0.5s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes ach-logo-pop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.ach-notif-title {
  font-family: 'Bangers', cursive;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
.ach-notif-name {
  font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  margin-bottom: 12px;
}
.ach-notif-spin-wrap {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ach-notif-spin-zoom {
  transform-origin: center;
}
.ach-notif-spin {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  transition: transform 0.08s ease-out;
  white-space: nowrap;
}
.ach-notif-spin.ach-notif-spin-landed {
  color: #FFD700;
  text-shadow: 0 0 12px rgba(255,215,0,0.9), 0 2px 6px rgba(0,0,0,0.8);
  animation: ach-spin-land 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes ach-spin-land {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.ach-notif-gold {
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  animation: ach-gold-appear 0.3s ease-out forwards;
}
@keyframes ach-gold-appear {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ach-gold-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.9));
}
.ach-gold-num {
  font-size: 36px;
  color: #FFD700;
  text-shadow:
    0 0 20px rgba(255,215,0,1),
    0 0 40px rgba(255,165,0,0.7),
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
  line-height: 1;
}
.ach-gold-label {
  font-size: 22px;
  color: #FFD700;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}


/* ===================================================================
   AI NARRATOR BOX — Dark hacker-terminal pop-up for dark-humor narrator
   Injected dynamically via quest-system.js _showNarratorLine().
   =================================================================== */
#ai-narrator-box {
  position: fixed;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.92);
  color: #00ff88;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: clamp(11px, 2.8vw, 13px);
  padding: 10px 16px;
  border: 1px solid #00ff88;
  border-radius: 3px;
  box-shadow:
    0 0 14px rgba(0, 255, 136, 0.4),
    inset 0 0 10px rgba(0, 0, 0, 0.5);
  max-width: min(400px, 88vw);
  text-align: center;
  z-index: 2900;
  pointer-events: none;
  display: none;
  line-height: 1.5;
  letter-spacing: 0.3px;
  /* Scanline overlay */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
}

/* =====================================================================
   PRISM RELIQUARY — Gem System UI
   ===================================================================== */

/* Full-screen overlay */
/* Bulletproof fullscreen centering overlay for Prism Reliquary */
#prism-reliquary-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0,0,0,0.8) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 4000 !important;
}

.prism-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(5, 0, 15, 0.93) !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 4000 !important;
  backdrop-filter: blur(10px);
  font-family: 'Segoe UI', sans-serif;
}

/* Scrollable content panel centered inside the overlay */
.prism-panel {
  position: relative !important;
  max-width: 90vw !important;
  margin: auto !important;
  transform: none !important;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 24px;
  width: min(680px, 90vw);
  background: rgba(5, 0, 15, 0.97);
  border-radius: 14px;
  border: 1px solid rgba(100, 0, 180, 0.4);
}

.prism-header {
  text-align: center;
  margin-bottom: 8px;
}

.prism-title {
  display: block;
  font-family: 'Bangers', cursive;
  font-size: clamp(24px, 5vw, 38px);
  letter-spacing: 3px;
  color: #cc88ff;
  text-shadow: 0 0 18px #9900ff, 0 0 36px #6600cc;
}

.prism-subtitle {
  display: block;
  color: #aaa;
  font-size: 12px;
  margin-top: 2px;
  letter-spacing: 1px;
}

.prism-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(80,0,120,0.7);
  border: 1px solid #8844cc;
  color: #cc88ff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4001;
}

.prism-rawgem-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
  padding: 8px 16px;
  background: rgba(30,0,50,0.6);
  border: 1px solid #5500aa;
  border-radius: 8px;
}

.prism-rawgem {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.prism-cols {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 700px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.prism-item-col {
  flex: 1;
  min-width: 240px;
  max-width: 340px;
  background: rgba(20,0,35,0.8);
  border: 1px solid #6622aa;
  border-radius: 12px;
  padding: 14px;
}

.prism-col-header {
  color: #dda0ff;
  font-size: 13px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #440077;
}

.prism-slots-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.prism-slot {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: visible;
}

.prism-slot.empty {
  background: rgba(40,0,60,0.7);
  border: 2px dashed #5500aa;
  color: #553377;
}

.prism-slot.occupied {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.18), rgba(80,0,120,0.9));
  border: 2px solid var(--gem-color, #9900ff);
  box-shadow: 0 0 10px var(--gem-color, #9900ff), 0 0 20px var(--gem-color, #9900ff);
}

.prism-slot:hover {
  transform: scale(1.08);
  box-shadow: 0 0 16px #cc44ff;
}

.prism-slot-icon {
  font-size: 22px;
  line-height: 1;
}

.prism-slot-rarity {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.prism-slot-empty-icon {
  font-size: 20px;
  color: #553377;
}

/* Gem flash effect */
.gem-flash {
  animation: gemFlash 0.5s ease-out forwards;
}

@keyframes gemFlash {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(8) saturate(0); }
  60%  { filter: brightness(4); }
  100% { filter: brightness(1); }
}

/* Shockwave ring */
.gem-shockwave {
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 3px solid var(--shock-color, #cc44ff);
  animation: gemShockwave 0.65s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}

@keyframes gemShockwave {
  0%   { transform: scale(1);   opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Stat text shake */
.stat-shake {
  animation: statShake 1.5s ease-out;
  font-weight: bold;
}

@keyframes statShake {
  0%, 100% { transform: translateX(0); }
  10%  { transform: translateX(-4px) rotate(-1deg); }
  20%  { transform: translateX(4px)  rotate(1deg);  }
  30%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px);  }
  50%  { transform: translateX(-2px); }
  70%  { transform: translateX(0); }
}

.prism-bonuses {
  padding: 6px 8px;
  background: rgba(30,0,50,0.5);
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.7;
  transition: color 1.5s ease;
}

.prism-bonus-line {
  display: block;
  color: #ddaaff;
}

.prism-inv-header {
  color: #998aaa;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
  text-align: center;
  max-width: 700px;
}

.prism-inv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 720px;
}

.prism-gem-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 72px;
  border-radius: 10px;
  border: 2px solid var(--gem-border, #5500aa);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), rgba(10,0,20,0.9));
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 0 6px var(--gem-color, #9900ff);
}

.prism-gem-card:hover,
.prism-gem-card.selected {
  transform: scale(1.1);
  box-shadow: 0 0 18px var(--gem-color, #9900ff), 0 0 30px var(--gem-color, #9900ff);
  border-color: #ffffff;
}

.prism-gem-card.selected {
  outline: 2px solid #ffffff;
}

.prism-gem-icon {
  font-size: 22px;
  line-height: 1;
}

.prism-gem-name {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-align: center;
}

.prism-gem-type {
  font-size: 9px;
  color: #aaa;
  text-align: center;
}

/* =====================================================================
   GACHA STORE — Chest System
   ===================================================================== */

.gacha-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 5, 15, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px 32px;
  overflow-y: auto;
  font-family: 'Segoe UI', sans-serif;
}

.gacha-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(26px, 5.5vw, 42px);
  letter-spacing: 4px;
  color: #FFD700;
  text-shadow: 0 0 20px #cc8800, 0 0 40px #aa6600;
  margin-bottom: 4px;
}

.gacha-subtitle {
  color: #aaa;
  font-size: 12px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

.gacha-currency-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 8px 20px;
  background: rgba(20,15,0,0.7);
  border: 1px solid #886600;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #ffe066;
}

.gacha-chest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 16px;
  width: 100%;
  max-width: 900px;
}

.gacha-chest-card {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.06), rgba(0,5,20,0.95));
  border: 2px solid var(--chest-border, #888);
  border-radius: 14px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 12px var(--chest-glow, #888);
}

.gacha-chest-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 30px var(--chest-glow, #888), 0 0 50px var(--chest-glow, #888);
}

.gacha-chest-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 10px var(--chest-glow, #fff));
}

.gacha-chest-name {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
}

.gacha-chest-desc {
  color: #aaa;
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}

.gacha-chest-cost {
  font-size: 13px;
  color: #ffe066;
  font-weight: bold;
}

.gacha-open-btn {
  background: linear-gradient(135deg, var(--chest-color, #888), var(--chest-glow, #aaa));
  border: none;
  border-radius: 8px;
  padding: 9px 22px;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  letter-spacing: 2px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.gacha-open-btn:hover:not(.disabled) {
  transform: scale(1.07);
  filter: brightness(1.3);
}

.gacha-open-btn.disabled {
  background: #333;
  color: #666;
  cursor: not-allowed;
}

.gacha-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(30,15,0,0.8);
  border: 1px solid #886600;
  color: #FFD700;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4001;
}

/* =====================================================================
   CHEST OPENING ANIMATION — 4 Phases
   ===================================================================== */

.chest-stage {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.chest-stage-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(20,10,40,0.98), #000);
}

.chest-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phase 1 – rattle */
.chest-icon {
  font-size: 100px;
  line-height: 1;
  filter: drop-shadow(0 0 20px var(--chest-glow, #ffe066)) drop-shadow(0 0 40px var(--chest-glow, #ffe066));
  position: relative;
  z-index: 2;
}

.chest-rattle {
  animation: chestRattle 0.12s ease-in-out infinite;
}

@keyframes chestRattle {
  0%   { transform: rotate(-4deg) translateX(-3px); }
  25%  { transform: rotate(4deg)  translateX(3px);  }
  50%  { transform: rotate(-3deg) translateY(-4px); }
  75%  { transform: rotate(3deg)  translateY(2px);  }
  100% { transform: rotate(-4deg) translateX(-3px); }
}

/* Keyhole sparks */
.chest-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe066;
  box-shadow: 0 0 6px #ffcc00;
  transform-origin: center;
  animation: sparkShoot 0.7s ease-out forwards;
  animation-delay: var(--spark-delay, 0s);
}

@keyframes sparkShoot {
  0%   { transform: rotate(var(--spark-angle)) translateX(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--spark-angle)) translateX(var(--spark-dist)) scale(0); opacity: 0; }
}

/* Phase 2 – burst */
.chest-burst-shake {
  animation: chestBurst 0.3s ease-out;
}

@keyframes chestBurst {
  0%  { transform: scale(1); }
  30% { transform: scale(1.4) rotate(6deg); }
  60% { transform: scale(0.9) rotate(-3deg); }
  100%{ transform: scale(1); }
}

.chest-hide {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s, transform 0.3s;
}

/* Screen flash */
.chest-flash {
  position: absolute;
  inset: 0;
  background: white;
  animation: flashFade 0.5s ease-out forwards;
  z-index: 3;
}

@keyframes flashFade {
  0%   { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Spinning light rays */
.chest-rays {
  position: absolute;
  inset: -30vw;
  background: conic-gradient(
    from 0deg,
    transparent 0%, var(--ray-color, #ffe066) 5%,
    transparent 10%, var(--ray-color, #ffe066) 15%,
    transparent 20%, var(--ray-color, #ffe066) 25%,
    transparent 30%, var(--ray-color, #ffe066) 35%,
    transparent 40%, var(--ray-color, #ffe066) 45%,
    transparent 50%, var(--ray-color, #ffe066) 55%,
    transparent 60%, var(--ray-color, #ffe066) 65%,
    transparent 70%, var(--ray-color, #ffe066) 75%,
    transparent 80%, var(--ray-color, #ffe066) 85%,
    transparent 90%, var(--ray-color, #ffe066) 95%,
    transparent 100%
  );
  opacity: 0.25;
  animation: raysSpin 1.8s linear forwards;
  z-index: 0;
  border-radius: 50%;
}

@keyframes raysSpin {
  0%   { transform: rotate(0deg)   scale(0); opacity: 0; }
  20%  { opacity: 0.3; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 0.25; }
  100% { transform: rotate(360deg) scale(1.4); opacity: 0; }
}

/* Phase 3 – loot arc */
.chest-loot-row {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: 12px;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}

.chest-loot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  background: rgba(0,0,0,0.85);
  border: 2px solid var(--loot-color, #ffe066);
  border-radius: 10px;
  padding: 8px 6px;
  opacity: 0;
  box-shadow: 0 0 12px var(--loot-color, #ffe066);
}

/* Arc entry animation */
.chest-loot-arc {
  animation: lootArc 0.55s cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
  animation-delay: calc(var(--loot-idx) * 0.22s);
}

@keyframes lootArc {
  0%   { transform: translateY(-200px) scale(0.3) rotate(-20deg); opacity: 0; }
  60%  { transform: translateY(10px)  scale(1.1) rotate(4deg);   opacity: 1; }
  100% { transform: translateY(0)     scale(1)   rotate(0deg);   opacity: 1; }
}

/* Phase 4 – land flip */
.chest-loot-land {
  opacity: 1;
}

.chest-loot-flip {
  animation: lootFlip 0.45s ease-out forwards;
}

@keyframes lootFlip {
  0%   { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

.chest-loot-icon {
  font-size: 30px;
  line-height: 1;
}

.chest-loot-label {
  font-size: 9px;
  text-align: center;
  margin-top: 4px;
  line-height: 1.3;
  font-weight: bold;
}

.chest-close-btn {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(135deg, #c8a248, #8B6914);
  border: none;
  border-radius: 10px;
  padding: 12px 36px;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 3px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 20px #c8a248;
  animation: collectPulse 0.6s ease-in-out infinite alternate;
}

@keyframes collectPulse {
  from { box-shadow: 0 0 14px #c8a248; }
  to   { box-shadow: 0 0 30px #ffe066, 0 0 50px #c8a248; }
}

/* Rarity confetti */
.rarity-confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--conf-color, #ff44ff);
  border-radius: 2px;
  left: var(--conf-x, 50vw);
  top:  var(--conf-y, 50vh);
  transform: rotate(var(--conf-rot, 0deg));
  animation: confettiFall var(--conf-delay, 0s) 1.8s ease-in forwards;
  pointer-events: none !important;
  z-index: 1000;
}

@keyframes confettiFall {
  0%   { transform: rotate(var(--conf-rot)) translateY(0)    scale(1); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: rotate(calc(var(--conf-rot) + 360deg)) translateY(160px) scale(0.5); opacity: 0; }
}

/* =====================================================================
 *  CAMP BUILDING MODALS — Unified Frosted Glass Sci-Fi Design
 * ===================================================================== */

@keyframes campBldIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes campBldOut {
  from { opacity: 1; transform: translateY(0);    }
  to   { opacity: 0; transform: translateY(20px); }
}

.camp-bld-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 12px 32px;
  overflow-y: auto;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.camp-bld-panel {
  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.05);
  width: 100%;
  max-width: 580px;
  padding: 20px 20px 24px;
  box-sizing: border-box;
  animation: campBldIn 250ms ease-out forwards;
}

.camp-bld-panel.closing {
  animation: campBldOut 200ms ease-in forwards;
  pointer-events: none;
}

.camp-bld-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
}

.camp-bld-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: 3px;
  color: #00ffff;
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
}

.camp-bld-close-btn {
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #00ffff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.camp-bld-close-btn:hover {
  background: rgba(0, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
}

.camp-bld-subtitle {
  color: rgba(180, 220, 255, 0.65);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-align: center;
}

.camp-bld-currency {
  color: #FFD700;
  font-family: 'Bangers', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 14px;
  text-align: center;
}

/* ── Workshop / upgrade skill cards ── */
.camp-workshop-card {
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.camp-workshop-card:hover:not(.camp-workshop-card-maxed):not(.camp-workshop-card-locked) {
  border-color: rgba(0, 255, 255, 0.4);
  background: rgba(0, 255, 255, 0.08);
}
.camp-workshop-card-maxed { opacity: 0.75; cursor: default; }
.camp-workshop-card-locked { opacity: 0.45; cursor: not-allowed; }

.camp-ws-level-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 6px 0;
  color: #ccc;
}
.camp-ws-lv-cur  { color: #7ec8ff; font-weight: bold; }
.camp-ws-lv-arr  { color: rgba(0,255,255,0.5); }
.camp-ws-lv-nxt  { color: #00ffcc; font-weight: bold; }
.camp-ws-cost-affordable   { color: #2ecc71; font-size: 11px; }
.camp-ws-cost-unaffordable { color: #e74c3c; font-size: 11px; }

/* ── Armory weapon / gear cards ── */
.armory-section-title {
  font-family: 'Bangers', cursive;
  font-size: 16px;
  letter-spacing: 2px;
  color: #00ffff;
  margin: 12px 0 8px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  padding-bottom: 4px;
}
.armory-equipped-card {
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  border-width: 3px;
  border-style: solid;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.armory-inv-card {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-width: 2px;
  border-style: solid;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: filter 0.15s;
}
.armory-inv-card:hover { filter: brightness(1.25); }
.armory-empty-slot {
  color: rgba(180, 220, 255, 0.35);
  font-size: 13px;
  padding: 10px 0;
  text-align: center;
  border: 1px dashed rgba(0,255,255,0.15);
  border-radius: 8px;
  margin-bottom: 10px;
}

/* =====================================================================
 *  QUEST COMPLETE BANNER
 * ===================================================================== */

@keyframes questBannerSlam {
  0%   { transform: scale(3.0); opacity: 0; }
  55%  { transform: scale(0.92); opacity: 1; }
  70%  { transform: scale(1.06); }
  82%  { transform: scale(0.98); }
  100% { transform: scale(1.0);  opacity: 1; }
}
@keyframes questBannerOut {
  0%   { opacity: 1; transform: scale(1.0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.88) translateY(12px); }
}

.quest-complete-banner-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  pointer-events: none !important;
}
.quest-complete-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: questBannerSlam 0.65s cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
}
.quest-complete-banner.fading {
  animation: questBannerOut 0.5s ease-in forwards;
}
.quest-complete-banner-text {
  font-family: 'Bangers', cursive;
  font-size: clamp(44px, 11vw, 84px);
  letter-spacing: 6px;
  background: linear-gradient(180deg, #fffde4 0%, #ffd700 40%, #ff9500 80%, #ff4d00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 200, 0, 0.9)) drop-shadow(0 4px 10px rgba(0,0,0,0.85));
  line-height: 1;
  white-space: nowrap;
}
.quest-complete-quest-name {
  font-family: 'Bangers', cursive;
  font-size: clamp(18px, 4.5vw, 30px);
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,215,0,0.85), 2px 2px 5px rgba(0,0,0,0.9);
  margin-top: 6px;
  text-align: center;
}

@keyframes rewardParticleFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1.2); }
  70%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--rp-dx, 0px), var(--rp-dy, 80px)) scale(0.5); }
}
.reward-particle {
  position: fixed;
  font-size: 22px;
  pointer-events: none;
  z-index: 9900;
  animation: rewardParticleFly var(--rp-dur, 1s) ease-in var(--rp-delay, 0s) forwards;
}


/* ══════════════════════════════════════════════════════════════════════════════
   AIDA MODAL — The Astral Gateway dialogue overlay
   Borderless black panel with blurred transparent edges and glitch portrait.
   ══════════════════════════════════════════════════════════════════════════════ */

.aida-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  animation: aidaOverlayIn 0.4s ease-out forwards;
  /* Allow clicks to pass through the dark backdrop — only the panel receives events */
  pointer-events: none;
}

@keyframes aidaOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.aida-modal-panel {
  position: relative;
  background: #000;
  border: none;
  border-radius: 0;
  max-width: 380px;
  width: 90vw;
  padding: 36px 32px 28px;
  text-align: center;
  /* Blurred transparent edges — fade to nothing at perimeter */
  -webkit-mask-image: radial-gradient(ellipse 88% 85% at 50% 50%, black 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 85% at 50% 50%, black 55%, transparent 100%);
  animation: aidaPanelIn 0.45s cubic-bezier(0.22, 1.0, 0.36, 1.0) forwards;
  /* Re-enable pointer events on the actual content panel */
  pointer-events: auto;
}

@keyframes aidaPanelIn {
  from { transform: scale(0.88) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}

/* ── Profile portrait container ─────────────────────────────── */

.aida-portrait-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}

/* Normal state — beautiful humanoid mask face */
.aida-face-normal {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 42%, #0a0a0f 0%, #050508 100%);
  overflow: hidden;
}

/* Shared face SVG fill container */
.aida-face-normal svg,
.aida-face-glitch svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Glitch / reveal state — hidden by default */
.aida-face-glitch {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s;
}

/* Active glitch: show eye, tear the normal face */
.aida-portrait-wrap.aida-glitching .aida-face-normal {
  animation: aidaTearNormal 0.1s steps(1) forwards;
}
.aida-portrait-wrap.aida-glitching .aida-face-glitch {
  opacity: 1;
  animation: aidaTearGlitch 0.1s steps(3) forwards;
}

@keyframes aidaTearNormal {
  0%   { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
  30%  { clip-path: inset(15% 0 35% 0); transform: translateX(-4px); opacity: 0.6; }
  60%  { clip-path: inset(45% 0 10% 0); transform: translateX(4px);  opacity: 0.3; }
  100% { clip-path: inset(0 0 0 0);    transform: none;             opacity: 0;   }
}

@keyframes aidaTearGlitch {
  0%   { clip-path: inset(40% 0 40% 0); transform: translateX(3px);  }
  50%  { clip-path: inset(0 0 0 0);     transform: translateX(-3px); }
  100% { clip-path: inset(0 0 0 0);     transform: none;             }
}

/* ── Dialogue text ───────────────────────────────────────────── */

.aida-modal-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(80, 200, 255, 0.45);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.aida-modal-text {
  font-family: 'Courier New', monospace;
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.7;
  color: rgba(200, 230, 255, 0.9);
  margin-bottom: 24px;
  min-height: 60px;
}

/* Typewriter cursor */
.aida-modal-text::after {
  content: '▌';
  animation: aidaCursorBlink 0.9s step-end infinite;
  color: rgba(80, 200, 255, 0.7);
  margin-left: 2px;
}
.aida-modal-text.aida-typed-done::after {
  content: none;
}

@keyframes aidaCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Confirm button ──────────────────────────────────────────── */

.aida-modal-confirm {
  background: transparent;
  border: 1px solid rgba(80, 200, 255, 0.3);
  color: rgba(80, 200, 255, 0.7);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 24px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.aida-modal-confirm:hover {
  border-color: rgba(80, 200, 255, 0.8);
  color: rgba(80, 200, 255, 1);
  box-shadow: 0 0 14px rgba(80, 200, 255, 0.25);
}

/* Neural Matrix button inside AIDA dialogue */
.aida-neural-matrix-btn {
  margin-top: 6px;
  background: rgba(0, 100, 255, 0.08);
  border-color: rgba(0, 150, 255, 0.7);
  color: #00aaff;
  text-shadow: 0 0 10px #00aaff;
  box-shadow: 0 0 18px rgba(0, 150, 255, 0.2);
}
.aida-neural-matrix-btn:hover {
  background: rgba(0, 100, 255, 0.18);
  border-color: rgba(0, 150, 255, 1);
  box-shadow: 0 0 28px rgba(0, 150, 255, 0.4);
}

/* ================================================================
   ASTRAL DIVE MINIGAME
================================================================ */

/* HUD bar */
#astral-dive-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 15;
  pointer-events: none;
}

.ad-hud-bar {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0, 0, 20, 0.75);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.18);
  font-family: monospace;
  font-size: clamp(11px, 1.8vw, 15px);
  color: rgba(180, 240, 255, 0.9);
  text-shadow: 0 0 8px #00ffff;
  flex-wrap: wrap;
}

.ad-hud-bar b {
  color: #00ffff;
  text-shadow: 0 0 12px #00ffff, 0 0 24px #0088ff;
}

.ad-hud-essence b { color: #ffaa00; text-shadow: 0 0 10px #ffaa00; }
.ad-hud-cores   b { color: #00ffaa; text-shadow: 0 0 10px #00ffaa; }

/* AIDA lore flash */
.ad-lore-line {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: clamp(12px, 2vw, 18px);
  color: #ff4466;
  text-shadow: 0 0 12px #ff0044, 0 0 28px #ff0044;
  letter-spacing: 2px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
}

.ad-lore-line.ad-lore-visible {
  animation: adLoreFlash 5s ease-out forwards;
}

@keyframes adLoreFlash {
  0%   { opacity: 0; letter-spacing: 6px; }
  10%  { opacity: 1; letter-spacing: 2px; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Wake-up flash animation */
@keyframes astralWakeFlash {
  0%   { opacity: 1; }
  30%  { opacity: 0.85; }
  60%  { opacity: 0.4; }
  80%  { opacity: 0.15; }
  100% { opacity: 0; }
}

/* Screen shake on waking */
@keyframes astralShake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-8px,  6px) rotate(-1.5deg); }
  20%  { transform: translate( 9px, -5px) rotate( 1.2deg); }
  30%  { transform: translate(-6px,  8px) rotate(-0.8deg); }
  40%  { transform: translate( 7px, -4px) rotate( 1.0deg); }
  50%  { transform: translate(-4px,  6px) rotate(-0.5deg); }
  60%  { transform: translate( 5px, -3px) rotate( 0.6deg); }
  70%  { transform: translate(-3px,  4px) rotate(-0.3deg); }
  80%  { transform: translate( 2px, -2px) rotate( 0.2deg); }
  90%  { transform: translate(-1px,  1px) rotate(-0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.astral-screen-shake {
  animation: astralShake 0.6s ease-out forwards;
}

/* ═══════════════════════════════════════════════════════════════
   NEURAL MATRIX — Synapse-constellation upgrade UI
   ═══════════════════════════════════════════════════════════════ */

.nm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,2,10,0.97);
  font-family: 'Courier New', Courier, monospace;
  animation: nmFadeIn 0.35s ease-out forwards;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@keyframes nmFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1);    }
}

.nm-header {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(0,204,255,0.18);
  gap: 12px;
}

.nm-title {
  flex: 1;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
  color: #00ccff;
  text-shadow: 0 0 18px #00ccff, 0 0 40px rgba(0,204,255,0.5);
}

.nm-currency {
  font-size: 13px;
  color: #00ffaa;
  letter-spacing: 2px;
  text-shadow: 0 0 10px #00ffaa;
}

.nm-close-btn {
  background: transparent;
  border: 1px solid rgba(0,204,255,0.4);
  color: #00ccff;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 4px;
  transition: background 0.15s;
}
.nm-close-btn:hover { background: rgba(0,204,255,0.12); }

.nm-canvas {
  display: block;
  border-radius: 4px;
  margin: 8px auto 0;
  box-shadow: 0 0 60px rgba(0,50,120,0.4);
}

.nm-info-panel {
  width: 100%;
  max-width: 900px;
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.nm-node-title {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #00ccff;
  text-transform: uppercase;
}

.nm-node-desc {
  font-size: 12px;
  color: rgba(180,220,255,0.7);
  text-align: center;
  max-width: 640px;
  line-height: 1.5;
}

.nm-unlock-btn {
  background: rgba(0,204,255,0.08);
  border: 1px solid rgba(0,204,255,0.7);
  color: #00ccff;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 6px 24px;
  border-radius: 4px;
  text-shadow: 0 0 10px #00ccff;
  box-shadow: 0 0 18px rgba(0,204,255,0.2);
  transition: background 0.15s, box-shadow 0.15s;
}
.nm-unlock-btn:hover:not(:disabled) {
  background: rgba(0,204,255,0.18);
  box-shadow: 0 0 30px rgba(0,204,255,0.4);
}
.nm-unlock-btn:disabled { opacity: 0.45; cursor: default; }

.nm-reroute-btn {
  background: rgba(255,0,34,0.07);
  border: 1px solid rgba(255,0,34,0.5);
  color: #ff4455;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 5px 18px;
  border-radius: 4px;
  transition: background 0.15s;
}
.nm-reroute-btn:hover {
  background: rgba(255,0,34,0.18);
}

.nm-toast {
  font-size: 12px;
  letter-spacing: 1px;
  min-height: 18px;
  text-align: center;
  transition: opacity 0.5s ease;
}

@keyframes nmForbiddenFlash {
  0%   { background: rgba(0,0,0,0.88); }
  50%  { background: rgba(80,0,80,0.92); }
  100% { background: rgba(0,0,0,0.88); }
}

/* ─── AIDA Dark Pact Overlay ─────────────────────────────── */
#aida-dark-pact-overlay {
  backdrop-filter: blur(6px);
}

.aida-pact-offer {
  letter-spacing: 1px;
  word-spacing: 2px;
}

/* ─── Achievement Screen Overhaul ────────────────────────── */
#achievements-screen {
  background: linear-gradient(160deg, #050505 0%, #0a0005 50%, #080008 100%) !important;
}

#achievements-screen .screen-title {
  color: #FFD700;
  text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(255,215,0,0.2);
  font-family: 'Bangers', cursive;
  letter-spacing: 3px;
}

/* ─── Resource Toast (slide-in right side) ───────────────── */
#resource-toast-wrap {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99990;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

@keyframes toast-pop-in {
  0%   { transform: translateX(0) scale(0.85); }
  60%  { transform: translateX(0) scale(1.10); }
  100% { transform: translateX(0) scale(1.00); }
}

/* ─── Camp interact button hidden while menu open ────────── */
.camp-menu-open #camp-interact-btn,
.camp-menu-open #camp-interact-prompt,
.camp-menu-open #camp-building-name {
  display: none !important;
}

/* ─── Achievement Playing-Card Grid ──────────────────────── */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 4px;
}
.ach-card {
  position: relative;
  background: #050505;
  border: 2px solid #222;
  border-radius: 12px;
  padding: 16px 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 180px;
  text-align: center;
  cursor: default;
  transition: transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
}
.ach-card.unlocked {
  background: linear-gradient(160deg, #1a1200 0%, #0d0900 100%);
  border: 2px solid #FFD700;
  box-shadow: 0 0 18px rgba(255,215,0,0.35), 0 0 6px rgba(255,215,0,0.2) inset;
  cursor: pointer;
}
.ach-card.unlocked:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 0 28px rgba(255,215,0,0.55), 0 6px 20px rgba(0,0,0,0.6);
}
.ach-card.claimable {
  background: linear-gradient(160deg, #1a1800 0%, #0d0c00 100%);
  border: 2px solid #ffe033;
  box-shadow: 0 0 20px rgba(255,230,0,0.4), 0 0 8px rgba(255,230,0,0.15) inset;
  cursor: pointer;
  animation: ach-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes ach-pulse {
  from { box-shadow: 0 0 12px rgba(255,230,0,0.3), 0 0 4px rgba(255,230,0,0.1) inset; }
  to   { box-shadow: 0 0 28px rgba(255,230,0,0.6), 0 0 10px rgba(255,230,0,0.25) inset; }
}
.ach-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
}
.ach-icon.locked {
  font-size: 28px;
  filter: brightness(0.3) grayscale(1);
}
.ach-name {
  font-family: 'Bangers', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  color: #FFD700;
  line-height: 1.2;
}
.ach-name.locked {
  color: #333;
  filter: blur(3px);
  user-select: none;
}
.ach-desc {
  font-size: 10px;
  color: #b89030;
  line-height: 1.3;
}
.ach-desc.locked {
  color: #1a1a1a;
  filter: blur(4px);
  user-select: none;
}
.ach-reward-row {
  margin-top: auto;
  font-size: 10px;
  color: #998822;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ach-reward-row .ach-gold {
  color: #FFD700;
  font-family: 'Bangers', cursive;
  font-size: 13px;
}
.ach-reward-row.locked {
  opacity: 0.08;
}
.ach-claim-hint {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffe033;
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  white-space: nowrap;
}
.ach-corner-glow {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════════════════════════
   STAT CARDS SYSTEM - Slot Machine Style
   ══════════════════════════════════════════════════════════════════════ */

#stat-cards-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  overflow: hidden; /* No scroll — all cards must fit on screen */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* On very small screens (less than 400px height) fall back to scroll */
@media (max-height: 400px) {
  #stat-cards-overlay {
    overflow-y: auto;
  }
  .stat-cards-container {
    height: auto;
  }
  .cards-grid {
    grid-template-rows: auto;
    min-height: 300px;
  }
}

.stat-cards-container {
  width: 100%;
  max-width: min(900px, 100vw);
  height: 100vh;
  padding: 1vh 2vw;
  color: white;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

.stat-cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8vh;
  padding: 0.6vh 1.2vw;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  border: 2px solid #ffaa00;
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.3);
  flex-shrink: 0;
}

.stat-cards-header h2 {
  margin: 0;
  font-size: clamp(18px, 3vh, 28px);
  font-weight: bold;
  color: #ffaa00;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
}

.close-button {
  background: rgba(255, 68, 68, 0.8);
  border: 2px solid #ff4444;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.close-button:hover {
  background: #ff4444;
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.8);
}

.stat-cards-info {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.8vh;
  padding: 0.5vh 1vw;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.info-label {
  font-size: clamp(9px, 1.2vh, 13px);
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-value {
  font-size: clamp(13px, 2vh, 18px);
  font-weight: bold;
  color: #ffaa00;
}

.purchase-button {
  width: 100%;
  padding: clamp(6px, 1.2vh, 14px) 10px;
  margin-bottom: 0.8vh;
  background: linear-gradient(135deg, #ff8800 0%, #ff4400 100%);
  border: 3px solid #ffaa00;
  border-radius: 12px;
  color: white;
  font-size: clamp(14px, 2.5vh, 20px);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(255, 136, 0, 0.5);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.purchase-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255, 136, 0, 0.8);
  background: linear-gradient(135deg, #ffaa00 0%, #ff6600 100%);
}

.purchase-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 15px rgba(255, 136, 0, 0.5);
}

.purchase-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  animation: pulse 1s infinite;
}

.cards-grid {
  display: grid;
  /* 16 cards in a 4×4 grid that fills the remaining vertical space */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: clamp(4px, 0.8vh, 12px);
  flex: 1;
  min-height: 0;
  width: 100%;
}

@media (min-width: 600px) {
  .cards-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

.stat-card {
  aspect-ratio: unset;
  background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
  border: 3px solid #444;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card.highlighted {
  border-color: #ffaa00;
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.8);
  animation: cardJump 0.3s ease-in-out;
}

@keyframes cardJump {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-15px) scale(1.15); }
}

.card-back {
  font-size: 64px;
  color: #ffaa00;
  text-shadow: 0 0 20px rgba(255, 170, 0, 0.8);
  animation: cardBackGlow 2s ease-in-out infinite;
}

@keyframes cardBackGlow {
  0%, 100% { opacity: 0.6; text-shadow: 0 0 20px rgba(255, 170, 0, 0.5); }
  50% { opacity: 1; text-shadow: 0 0 30px rgba(255, 170, 0, 1); }
}

.stat-card.flipped {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  border-color: #00ff88;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

/* Golden pop animation when a card is revealed for the first time */
.stat-card.just-flipped {
  animation: cardGoldenPop 0.55s ease-out forwards;
}

@keyframes cardGoldenPop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,215,0,0);    border-color: #444; }
  30%  { transform: scale(1.18); box-shadow: 0 0 30px 8px rgba(255,215,0,0.9); border-color: #FFD700; }
  60%  { transform: scale(1.08); box-shadow: 0 0 20px 5px rgba(255,215,0,0.6); border-color: #FFD700; }
  100% { transform: scale(1);    box-shadow: 0 0 15px rgba(0,255,136,0.5);  border-color: #00ff88; }
}

.card-level {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 170, 0, 0.9);
  color: #000;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.card-icon {
  font-size: clamp(22px, 3.5vh, 48px);
  margin-bottom: 4px;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.card-name {
  font-size: clamp(9px, 1.4vh, 14px);
  font-weight: bold;
  color: white;
  text-align: center;
  margin-bottom: 3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 0 4px;
  line-height: 1.1;
}

.card-value {
  font-size: clamp(10px, 1.6vh, 18px);
  font-weight: bold;
  text-shadow: 0 0 8px currentColor;
}

@keyframes cardFlip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(90deg) scale(1.1); }
  100% { transform: rotateY(0deg) scale(1); }
}

@keyframes popupAppear {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes popupDisappear {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  90% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ─── Teleport Portal spin animation ────────────────────── */
@keyframes portalSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Slide in from right (for small notifications) ─────── */
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Eye of Horus flash (green/black) ──────────────────── */
@keyframes horusFlash {
  0%   { transform: scale(0.5); opacity: 0; color: #000; text-shadow: 0 0 0 transparent; }
  30%  { transform: scale(1.4); opacity: 1; color: #00ff44; text-shadow: 0 0 40px #00ff44, 0 0 80px #00ff44; }
  60%  { transform: scale(1.1); color: #000; text-shadow: 0 0 20px #000; }
  100% { transform: scale(1.5); opacity: 0; color: #00ff44; text-shadow: 0 0 0 transparent; }
}

/* ─── Building construction complete notification ─────── */
/* buildCompleteSlide uses the same animation as slideInRight above */

/* ═══════════════════════════════════════════════════════════
   LIQUID GOLD & DARK WATER NEURAL CODEX STYLING
   Annunaki divine underwater operating system aesthetic
   ═══════════════════════════════════════════════════════════ */

/* Liquid Gold border pulse animation */
@keyframes liquidGoldPulse {
  0%   { box-shadow: 0 0 20px rgba(255, 191, 0, 0.4), 0 0 40px rgba(255, 140, 0, 0.2), inset 0 0 20px rgba(255, 191, 0, 0.1); }
  50%  { box-shadow: 0 0 40px rgba(255, 191, 0, 0.7), 0 0 80px rgba(255, 140, 0, 0.4), inset 0 0 30px rgba(255, 191, 0, 0.2); }
  100% { box-shadow: 0 0 20px rgba(255, 191, 0, 0.4), 0 0 40px rgba(255, 140, 0, 0.2), inset 0 0 20px rgba(255, 191, 0, 0.1); }
}

/* Liquid Gold gradient shift */
@keyframes liquidGoldShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Golden UI crack animation - revealing pulsing core */
@keyframes goldenCrack {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  20%  { clip-path: polygon(10% 0, 90% 0, 95% 50%, 90% 100%, 10% 100%, 5% 50%); }
  40%  { clip-path: polygon(20% 10%, 80% 10%, 85% 50%, 80% 90%, 20% 90%, 15% 50%); }
  60%  { clip-path: polygon(30% 20%, 70% 20%, 75% 50%, 70% 80%, 30% 80%, 25% 50%); }
  100% { clip-path: polygon(45% 45%, 55% 45%, 55% 55%, 45% 55%); opacity: 0; }
}

/* Pulsing core reveal */
@keyframes pulsingCore {
  0%   { transform: scale(0); opacity: 0; box-shadow: 0 0 0 rgba(255, 191, 0, 0); }
  30%  { transform: scale(1.2); opacity: 1; box-shadow: 0 0 60px rgba(255, 191, 0, 0.9), 0 0 120px rgba(255, 140, 0, 0.6); }
  60%  { transform: scale(1); box-shadow: 0 0 40px rgba(255, 191, 0, 0.7), 0 0 80px rgba(255, 140, 0, 0.4); }
  100% { transform: scale(1.1); box-shadow: 0 0 50px rgba(255, 191, 0, 0.8), 0 0 100px rgba(255, 140, 0, 0.5); }
}

/* Molecule network pulse */
@keyframes moleculeNodePulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* AI terminal text glitch */
@keyframes aiTerminalGlitch {
  0%   { opacity: 1; transform: translateX(0); }
  2%   { opacity: 0.8; transform: translateX(-2px); }
  4%   { opacity: 1; transform: translateX(2px); }
  6%   { opacity: 0.9; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Vertical rune glow */
@keyframes verticalRuneGlow {
  0%   { text-shadow: 0 0 10px rgba(255, 191, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.3); opacity: 0.7; }
  50%  { text-shadow: 0 0 25px rgba(255, 191, 0, 0.8), 0 0 50px rgba(255, 140, 0, 0.5), 0 0 75px rgba(255, 100, 0, 0.3); opacity: 1; }
  100% { text-shadow: 0 0 10px rgba(255, 191, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.3); opacity: 0.7; }
}

/* Eye of Horus divine pulse (Black, Red, Gold) */
@keyframes eyeOfHorusDivinePulse {
  0%   {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(204, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 191, 0, 0.4));
    opacity: 0.9;
  }
  25%  {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 191, 0, 0.6)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.8));
    opacity: 1;
  }
  50%  {
    transform: scale(1.2) rotate(0deg);
    filter: drop-shadow(0 0 30px rgba(255, 191, 0, 1)) drop-shadow(0 0 60px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 90px rgba(0, 0, 0, 1));
    opacity: 1;
  }
  75%  {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 40px rgba(255, 191, 0, 0.6)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.8));
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 10px rgba(204, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 191, 0, 0.4));
    opacity: 0.9;
  }
}

/* Underwater echo sound wave */
@keyframes underwaterEcho {
  0%   { transform: scale(1); opacity: 0.7; }
  50%  { transform: scale(1.5); opacity: 0.3; }
  100% { transform: scale(2); opacity: 0; }
}

/* Utility classes for Liquid Gold styling */
.liquid-gold-border {
  border: 2px solid transparent;
  background:
    linear-gradient(#000814, #000814) padding-box,
    linear-gradient(135deg, #FFD700, #FF8C00, #FFD700, #FFA500) border-box;
  background-size: 200% 200%;
  animation: liquidGoldShift 3s ease infinite, liquidGoldPulse 2s ease-in-out infinite;
}

.liquid-gold-border:hover {
  animation: liquidGoldShift 1.5s ease infinite, liquidGoldPulse 1s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(255, 191, 0, 0.8), 0 0 120px rgba(255, 140, 0, 0.5), inset 0 0 40px rgba(255, 191, 0, 0.3);
}

.liquid-gold-border:active {
  box-shadow: 0 0 80px rgba(255, 191, 0, 1), 0 0 160px rgba(255, 140, 0, 0.7), inset 0 0 60px rgba(255, 191, 0, 0.5);
}

/* Vertical Annunaki rune text */
.annunaki-rune {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #FFD700;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 0.2em;
  animation: verticalRuneGlow 3s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 191, 0, 0.5), 0 0 20px rgba(255, 140, 0, 0.3);
}

/* AI Terminal styling */
.ai-terminal {
  background: rgba(0, 8, 20, 0.95);
  border: 1px solid rgba(255, 191, 0, 0.3);
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 8px;
  overflow-y: auto;
  max-height: 120px;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2), inset 0 0 20px rgba(0, 8, 20, 0.9);
}

.ai-terminal-line {
  animation: aiTerminalGlitch 8s infinite;
  animation-delay: calc(var(--line-index, 0) * 0.5s);
  white-space: nowrap;
  overflow: hidden;
}

/* Eye of Horus universal icon */
.eye-of-horus {
  display: inline-block;
  font-size: inherit;
  animation: eyeOfHorusDivinePulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(204, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 191, 0, 0.4));
}

.eye-of-horus-static {
  filter: drop-shadow(0 0 8px rgba(204, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(255, 191, 0, 0.3));
}

/* ─── Eye of Horus Notification Shrine ──────────────────────────────────────── */
@keyframes horus-eye-pulse {
  0%, 100% { opacity: 0.95; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.15); }
}

.horus-pupil {
  animation: horus-eye-pulse 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes horus-crown-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 0 8px  rgba(212,175,55,0.1); }
  50%       { box-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 0 18px rgba(212,175,55,0.3); }
}

#horus-crown {
  animation: horus-crown-glow 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   ANNUNAKI BOSS STYLES
   ═══════════════════════════════════════════════════════════════════ */

@keyframes annunaki-idle {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.015); }
}

@keyframes annunaki-aura-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(212,175,55,0.3); }
  50% { box-shadow: 0 0 60px rgba(212,175,55,0.7); }
}

@keyframes annunaki-stomp {
  0% { transform: translateX(-50%) translateY(0); }
  30% { transform: translateX(-50%) translateY(-30px); }
  60% { transform: translateX(-50%) translateY(8px) scaleX(1.05); }
  100% { transform: translateX(-50%) translateY(0); }
}

.annunaki-stomping {
  animation: annunaki-stomp 0.4s ease-out !important;
}

@keyframes annunaki-swipe {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-25deg) translateX(-20px); }
  100% { transform: rotate(0deg); }
}

.annunaki-swiping {
  animation: annunaki-swipe 0.5s ease-in-out !important;
}

@keyframes annunaki-roar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.annunaki-roaring {
  animation: annunaki-roar 0.3s ease-in-out !important;
}

@keyframes annunaki-death {
  0% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  40% { transform: translateX(-50%) scale(1.1) rotate(-5deg); }
  70% { transform: translateX(-50%) scale(0.95) rotate(3deg) translateY(20px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.8) rotate(-8deg) translateY(60px); }
}

.annunaki-dying {
  animation: annunaki-death 1.8s ease-in forwards !important;
}

@keyframes annunaki-projectile {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(200px) scale(0.3); opacity: 0; }
}

.annunaki-projectile {
  animation: annunaki-projectile 0.8s ease-in forwards;
}

@keyframes annunaki-phase-flash {
  0%, 100% { background: rgba(0,0,0,0); }
  50% { background: rgba(212,175,55,0.15); }
}

@keyframes annunaki-enter {
  from { transform: translateX(-50%) translateY(-110%); }
  to { transform: translateX(-50%) translateY(0); }
}

@keyframes annunaki-shockwave-expand {
  from { width: 0; height: 0; opacity: 1; }
  to { width: 120px; height: 120px; opacity: 0; }
}

.annunaki-enraged .annunaki-aura {
  border-color: rgba(255,50,0,0.5) !important;
  box-shadow: 0 0 40px rgba(255,50,0,0.6) !important;
}

.annunaki-enraged {
  filter: hue-rotate(30deg) brightness(1.3) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ENDLESS MODE STYLES
   ═══════════════════════════════════════════════════════════════════ */

#endless-wave-display {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(11px,2.5vw,14px);
  color: rgba(255,215,0,0.9);
  background: rgba(0,0,0,0.5);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,215,0,0.3);
  z-index: 100;
  font-family: 'Bangers', cursive;
  letter-spacing: 2px;
  display: none;
}

#endless-mode-btn {
  background: linear-gradient(135deg, #1a0a0a 0%, #3a0a0a 50%, #1a0a0a 100%);
  border: 2px solid rgba(255,50,0,0.6);
  color: rgba(255,215,0,0.9);
  font-family: 'Bangers', cursive;
  font-size: clamp(14px,3vw,18px);
  letter-spacing: 3px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 16px rgba(255,50,0,0.3);
  text-transform: uppercase;
  border-radius: 10px;
}

#endless-mode-btn:hover {
  background: linear-gradient(135deg, #3a0a0a 0%, #5a0a0a 50%, #3a0a0a 100%);
  box-shadow: 0 0 28px rgba(255,80,0,0.6);
  transform: scale(1.05);
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

#wave-complete-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(32px,8vw,64px);
  color: #ffd700;
  font-family: 'Bangers', cursive;
  letter-spacing: 6px;
  text-shadow: 0 0 20px #ffd700, 0 0 40px #ff8c00, 2px 2px 0 #000;
  z-index: 9999;
  display: none;
  animation: waveCompleteFade 1s ease-in-out;
  pointer-events: none;
}

@keyframes waveCompleteFade {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

.completion-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
}

@keyframes completion-burst {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   AIDA BOSS ANIMATIONS (SECTION 5B)
   ═══════════════════════════════════════════════════════════ */

@keyframes aida-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes aida-aura-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

@keyframes aida-phase-transition {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  25% {
    transform: translateX(-50%) scale(1.2, 0.8);
  }
  50% {
    transform: translateX(-50%) scale(0.9, 1.2);
  }
  75% {
    transform: translateX(-50%) scale(1.1, 0.9);
  }
}

@keyframes aida-death {
  0% {
    opacity: 1;
    transform: translateX(-50%) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1.2) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.3) rotate(-15deg) translateY(100px);
  }
}

@keyframes aida-drain-pulse {
  0%, 100% {
    opacity: 0.8;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.5);
  }
}

.aida-projectile {
  animation: aida-projectile-spin 1s linear infinite;
}

@keyframes aida-projectile-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════
   COMPLETION SCREEN ANIMATIONS (SECTION 6)
   ═══════════════════════════════════════════════════════════ */

@keyframes completion-title-pulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 30px #ffd700, 0 0 60px #ff8c00;
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 40px #ffd700, 0 0 80px #ff8c00, 0 0 100px #ffd700;
  }
}

@keyframes completion-subtitle-fade {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes completion-reward-appear {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Annunaki alien mystical border pulse animation */
@keyframes borderPulse {
  0%, 100% {
    border-color: #00ffff;
    box-shadow:
      0 0 30px rgba(0, 255, 255, 0.5),
      0 0 60px rgba(138, 43, 226, 0.4),
      inset 0 0 40px rgba(0, 255, 255, 0.1),
      inset 0 0 80px rgba(138, 43, 226, 0.2);
  }
  50% {
    border-color: #8a2be2;
    box-shadow:
      0 0 40px rgba(138, 43, 226, 0.7),
      0 0 80px rgba(0, 255, 255, 0.5),
      inset 0 0 50px rgba(138, 43, 226, 0.3),
      inset 0 0 100px rgba(0, 255, 255, 0.2);
  }
}

/* Annunaki glow animation for YOU DIED banner */
@keyframes annunakiGlow {
  0%, 100% {
    text-shadow:
      0 0 10px #00ffff,
      0 0 20px #00ffff,
      0 0 40px #8a2be2,
      0 0 80px #8a2be2,
      2px 2px 4px #000;
  }
  50% {
    text-shadow:
      0 0 20px #00ffff,
      0 0 40px #00ffff,
      0 0 60px #8a2be2,
      0 0 120px #8a2be2,
      2px 2px 4px #000;
  }
}

/* Comic info overlay close button hover — no inline event handlers */
#comic-info-overlay .comic-info-close-btn:hover {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.9), 0 0 50px rgba(138, 43, 226, 0.7) !important;
}


/* ============================================================
   MASTER VAULT — squircle cards, rarity glows, side panel
   ============================================================ */
.mv-squircle-card:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
  transition: transform .15s, filter .15s, box-shadow .18s, border-color .18s;
}

@keyframes mv-rarity-glow-mythic {
  0%,100% { box-shadow: 0 0 10px #ff2a2aaa, 0 0 24px #ff2a2a66; }
  50%      { box-shadow: 0 0 22px #ff2a2a, 0 0 48px #ff2a2aaa;  }
}
.mv-squircle-card[data-rarity="mythic"] {
  animation: mv-rarity-glow-mythic 2s ease-in-out infinite;
}

@keyframes mv-crimson-pulse {
  0%   { box-shadow: inset 0 0 0px #ff0000; background: #07060e; }
  30%  { box-shadow: inset 0 0 80px #cc000088; background: #1a0000; }
  60%  { box-shadow: inset 0 0 120px #ff000099; background: #200000; }
  100% { box-shadow: inset 0 0 0px #ff0000; background: #07060e; }
}
.mv-crimson-pulse {
  animation: mv-crimson-pulse 0.9s ease forwards !important;
}

/* 1/3-screen cinematic AIDA dialogue */
@keyframes mv-cinematic-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Blood Moon vignette overlay */
#blood-moon-vignette {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(140,0,0,0.55) 80%, rgba(80,0,0,0.85) 100%);
  animation: blood-moon-vignette-pulse 3s ease-in-out infinite;
}
@keyframes blood-moon-vignette-pulse {
  0%,100% { opacity: 0.7; }
  50%     { opacity: 1.0; }
}

/* Idle clicker drone visuals */
.idle-drone-field {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 8px auto 0 auto;
  pointer-events: none;
}
.idle-drone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: idleDroneOrbit 6s linear infinite;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
  opacity: 0.9;
}
@keyframes idleDroneOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg) translateX(var(--orbit-radius, 38px)) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) translateX(var(--orbit-radius, 38px)) rotate(-360deg);
  }

/* ============================================================
   ARTIFACT SHRINE & VISUAL GEAR UI — Annunaki Aesthetic
   ============================================================ */

/* ── Cinematic Dialogue Overlay ─────────────────────────── */
@keyframes cinematicFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cinematicFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes cinematicTapPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}
/* AIDA portrait idle glow/pulse animation */
@keyframes aidaPortraitGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0,255,255,0.5)); }
  50%       { filter: drop-shadow(0 0 20px rgba(0,255,255,0.95)) drop-shadow(0 0 8px rgba(180,100,255,0.5)); }
}
.aida-portrait-img {
  width: 80%;
  max-width: 120px;
  border-radius: 4px;
  animation: aidaPortraitGlow 2.8s ease-in-out infinite;
}
.aida-portrait-svg {
  width: 80%;
  max-width: 120px;
  animation: aidaPortraitGlow 2.8s ease-in-out infinite;
}

/* ── Inventory Screen Reusable Components ───────────────── */
.inv-currency-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 13px;
}

.inv-section-title {
  color: #C9A227;
  font-family: Bangers, cursive;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(201,162,39,0.5);
}

.inv-special-egg {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(0,255,180,0.12), rgba(0,100,80,0.2));
  border: 1px solid rgba(0,255,180,0.35);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.inv-gear-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s;
}
.inv-gear-item:hover {
  background: rgba(255,255,255,0.08);
}
.inv-gear-item.inv-equipped {
  background: rgba(255,215,0,0.08);
}
.inv-gear-item:active { cursor: grabbing; }

.inv-equip-btn {
  background: rgba(0,255,255,0.12);
  border: 1px solid rgba(0,255,255,0.4);
  border-radius: 6px;
  padding: 5px 10px;
  color: #00ffff;
  cursor: pointer;
  font-size: 11px;
  font-family: Courier New, monospace;
  letter-spacing: 1px;
  transition: background 0.15s;
  white-space: nowrap;
}
.inv-equip-btn:hover {
  background: rgba(0,255,255,0.22);
}

.inv-back-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  padding: 8px 16px;
  color: #ccc;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.inv-back-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* ── Visual Equipment Slots ─────────────────────────────── */
.inv-vis-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 58px;
  background: linear-gradient(135deg, #0d0015 0%, #07000e 100%);
  border: 2px solid rgba(0,255,255,0.3);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 8px rgba(0,255,255,0.1), inset 0 0 10px rgba(0,0,0,0.5);
  overflow: hidden;
}
.inv-vis-slot:hover {
  border-color: rgba(0,255,255,0.7);
  box-shadow: 0 0 16px rgba(0,255,255,0.35), inset 0 0 12px rgba(0,0,0,0.5);
}
.inv-vis-slot.inv-vis-slot-dragover {
  border-color: #C9A227;
  box-shadow: 0 0 20px rgba(201,162,39,0.6), inset 0 0 12px rgba(201,162,39,0.1);
  background: linear-gradient(135deg, rgba(201,162,39,0.15), rgba(0,0,0,0.9));
}
.inv-vis-slot-label {
  font-size: 9px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 0.5px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 50px;
}

/* ── Artifact Shrine Modal ──────────────────────────────── */
.shrine-slots-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.shrine-slot {
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  background: linear-gradient(135deg, #0d0015 0%, #1a0033 60%, #0d0015 100%);
  border: 2px solid rgba(0,255,255,0.25);
  border-radius: 14px;
  padding: 18px 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 12px rgba(0,255,255,0.08), inset 0 0 20px rgba(0,0,0,0.5);
}
.shrine-slot:hover {
  border-color: rgba(0,255,255,0.55);
  box-shadow: 0 0 20px rgba(0,255,255,0.2), inset 0 0 20px rgba(0,0,0,0.5);
}
.shrine-slot-locked {
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: none !important;
  opacity: 0.7;
}
.shrine-slot-label {
  font-size: 12px;
  font-family: Courier New, monospace;
  letter-spacing: 1px;
  margin-top: 6px;
  font-weight: bold;
}

.shrine-remove-btn {
  margin-top: 8px;
  background: rgba(255,0,0,0.15);
  border: 1px solid rgba(255,80,80,0.4);
  border-radius: 6px;
  padding: 4px 10px;
  color: #ff8888;
  cursor: pointer;
  font-size: 10px;
  font-family: Courier New, monospace;
  transition: background 0.15s;
}
.shrine-remove-btn:hover {
  background: rgba(255,0,0,0.28);
}

.shrine-inv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shrine-inv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #444;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.shrine-inv-item:hover {
  background: rgba(0,255,255,0.06);
  border-color: rgba(0,255,255,0.4);
}
.shrine-inv-item.shrine-inv-equipped {
  background: rgba(0,255,255,0.08);
  border-color: rgba(0,255,255,0.35);
}

.shrine-upgrade-box {
  background: linear-gradient(135deg, rgba(201,162,39,0.08), rgba(0,0,0,0.6));
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

.shrine-upgrade-btn {
  background: linear-gradient(135deg, #1a3a6a, #2a5a9a);
  border: 2px solid #5DADE2;
  border-radius: 10px;
  padding: 10px 28px;
  color: #fff;
  font-family: Bangers, cursive;
  font-size: 16px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-top: 8px;
  transition: box-shadow 0.2s;
}
.shrine-upgrade-btn:hover:not(:disabled) {
  box-shadow: 0 0 16px rgba(93,173,226,0.5);
}
.shrine-upgrade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #222;
  border-color: #555;
}

/* ── Annunaki Forge — Merge Animations ──────────────────────────────────── */
@keyframes forgeMergeFlash {
  0%   { opacity: 0; transform: scale(0.8); }
  30%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes forgeMergeReveal {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-8deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

@keyframes forgeSpark {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--spark-x, 0px), var(--spark-y, 0px)) scale(0); opacity: 0; }
}

@keyframes forgeShake {
  0%   { transform: translate(0,0) rotate(0deg); }
  15%  { transform: translate(-6px, 3px) rotate(-1.5deg); }
  30%  { transform: translate(6px, -4px) rotate(1deg); }
  45%  { transform: translate(-4px, 5px) rotate(-0.8deg); }
  60%  { transform: translate(5px, -2px) rotate(0.5deg); }
  75%  { transform: translate(-3px, 3px) rotate(-0.3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}

.forge-screen-shake {
  animation: forgeShake 0.55s cubic-bezier(0.36,0.07,0.19,0.97);
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIVERSAL RARITY FIX — missing .rarity-badge-uncommon + unified colors
   ═══════════════════════════════════════════════════════════════════════════ */

/* Uncommon badge — was missing from the badge row */
.rarity-badge-uncommon {
  color: #55cc55;
  background: rgba(85,204,85,0.13);
  border: 1px solid #55cc55;
}

/* Alias for the 'mythical' naming variant used by card CSS classes (rarity-mythical) */
.rarity-badge-mythical {
  color: #ff2200;
  background: rgba(255,34,0,0.15);
  border: 1px solid #ff2200;
  text-shadow: 0 0 6px rgba(255,34,0,0.8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE DROPPLET SHOP — full-screen modal
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at top, rgba(0,20,40,0.98) 0%, rgba(0,0,0,1) 100%);
  z-index: 200;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
  box-sizing: border-box;
  font-family: 'Courier New', monospace;
}

.ds-panel {
  width: 100%;
  max-width: 720px;
}

.ds-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid rgba(0,200,255,0.3);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.ds-title {
  font-family: 'Bangers', cursive;
  font-size: 28px;
  letter-spacing: 4px;
  color: #00cfff;
  text-shadow: 0 0 18px rgba(0,200,255,0.7);
}

.ds-subtitle {
  color: #778899;
  font-size: 11px;
  margin-top: 3px;
  font-style: italic;
}

.ds-back-btn {
  background: linear-gradient(135deg, #0a2a3a, #0d3a4e);
  border: 1px solid rgba(0,200,255,0.4);
  border-radius: 8px;
  color: #00cfff;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, box-shadow 0.15s;
}
.ds-back-btn:hover { background: rgba(0,200,255,0.12); box-shadow: 0 0 12px rgba(0,200,255,0.3); }

.ds-currency-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}

.ds-cur-item { display: flex; align-items: center; gap: 4px; color: #e0d0a0; }
.ds-cur-icon { font-size: 16px; }
.ds-cur-val  { font-weight: bold; color: #ffd700; }
.ds-wde      { color: #44ddff; }
.ds-wde .ds-cur-val { color: #44ddff; }
.ds-cur-sep  { color: #444; }

.ds-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ds-tab {
  flex: 1;
  min-width: 110px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 8px;
  color: #667788;
  font-family: 'Bangers', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 9px 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.ds-tab:hover { color: #00cfff; border-color: rgba(0,200,255,0.5); }
.ds-tab.active {
  background: rgba(0,200,255,0.12);
  border-color: #00cfff;
  color: #00cfff;
  box-shadow: 0 0 10px rgba(0,200,255,0.25);
}

.ds-content { min-height: 300px; }

.ds-empty {
  text-align: center;
  color: #556677;
  padding: 48px 20px;
  font-size: 14px;
  line-height: 1.7;
}

/* SELL grid */
.ds-sell-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0,0,0,0.45);
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.ds-item-card:hover { background: rgba(0,200,255,0.05); }
.ds-item-equipped   { opacity: 0.55; }

.ds-item-icon { font-size: 28px; min-width: 36px; text-align: center; }

.ds-item-info { flex: 1; min-width: 0; }
.ds-item-name { font-weight: bold; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-item-rarity { font-size: 10px; color: #556677; letter-spacing: 1px; margin-top: 2px; }
.ds-item-equipped-tag { font-size: 10px; color: #ffd700; margin-top: 2px; }

.ds-item-sell { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ds-sell-price { color: #ffd700; font-size: 13px; font-weight: bold; white-space: nowrap; }
.ds-sell-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 6px;
  color: #fff8e0;
  font-family: 'Bangers', cursive;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 4px 14px;
  cursor: pointer;
  transition: all 0.12s;
}
.ds-sell-btn:hover { background: linear-gradient(135deg, #daa520, #c8a000); box-shadow: 0 0 8px rgba(255,215,0,0.4); }
.ds-sell-disabled { font-size: 10px; color: #556677; }

/* BUY MATERIALS grid */
.ds-buy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.ds-mat-card {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,200,255,0.2);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: border-color 0.15s;
}
.ds-mat-card:hover { border-color: rgba(0,200,255,0.5); }

.ds-mat-icon  { font-size: 32px; }
.ds-mat-name  { color: #c8d8e8; font-weight: bold; font-size: 14px; }
.ds-mat-owned { color: #556677; font-size: 11px; }
.ds-mat-price { color: #ffd700; font-size: 12px; margin-bottom: 4px; }

.ds-mat-qty-row { display: flex; gap: 5px; }
.ds-mat-buy {
  background: rgba(0,200,255,0.1);
  border: 1px solid rgba(0,200,255,0.35);
  border-radius: 6px;
  color: #00cfff;
  font-family: 'Bangers', cursive;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.12s;
}
.ds-mat-buy:hover { background: rgba(0,200,255,0.2); box-shadow: 0 0 6px rgba(0,200,255,0.3); }

/* WATERDROP ENERGY tab */
.ds-wde-wrap { display: flex; flex-direction: column; gap: 18px; }

.ds-wde-hero {
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(0,80,140,0.35) 0%, transparent 70%);
  border: 1px solid rgba(0,200,255,0.25);
  border-radius: 14px;
  padding: 24px 16px;
}
.ds-wde-hero-icon  { font-size: 52px; }
.ds-wde-hero-title {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 3px;
  color: #44ddff;
  text-shadow: 0 0 14px rgba(0,200,255,0.7);
  margin: 8px 0 6px;
}
.ds-wde-hero-desc { color: #778899; font-size: 12px; line-height: 1.6; }

.ds-wde-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.ds-wde-card {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  background: rgba(0,20,50,0.5);
  border: 1px solid rgba(0,200,255,0.35);
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-wde-card:hover { border-color: #00cfff; box-shadow: 0 0 14px rgba(0,200,255,0.25); }

.ds-wde-qty   { color: #44ddff; font-family: 'Bangers', cursive; font-size: 20px; letter-spacing: 1px; }
.ds-wde-price { color: #ffd700; font-size: 13px; }
.ds-wde-btn {
  background: linear-gradient(135deg, #004070, #00264a);
  border: 1px solid rgba(0,200,255,0.5);
  border-radius: 8px;
  color: #00cfff;
  font-family: 'Bangers', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 6px 18px;
  cursor: pointer;
  transition: all 0.12s;
  width: 100%;
}
.ds-wde-btn:hover { background: rgba(0,200,255,0.18); box-shadow: 0 0 10px rgba(0,200,255,0.35); }

/* ═══════════════════════════════════════════════════════════════════════════
   ARTIFACT RESONANCE GRID — merge minigame inside the Shrine
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,255,255,0.25);
}

.rg-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #556677;
  font-family: 'Bangers', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 10px 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rg-tab:hover { color: #00ffff; }
.rg-tab.active {
  color: #00ffff;
  border-bottom-color: #00ffff;
}

/* 3×4 resonance grid cells */
.rg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 10px;
  margin-bottom: 16px;
}

.rg-cell {
  aspect-ratio: 1;
  min-height: 72px;
  background: rgba(0,30,50,0.5);
  border: 2px dashed rgba(0,255,255,0.2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  overflow: hidden;
}
.rg-cell:hover { border-color: rgba(0,255,255,0.5); transform: scale(1.04); }
.rg-cell.rg-selected {
  border-color: #ffd700;
  border-style: solid;
  box-shadow: 0 0 12px rgba(255,215,0,0.4);
}
.rg-cell.rg-filled { border-style: solid; }
.rg-cell.rg-empty  { opacity: 0.55; }

.rg-cell-icon  { font-size: 26px; }
.rg-cell-name  { font-size: 9px; color: #99aabb; text-align: center; line-height: 1.2; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-cell-rarity{ font-size: 8px; letter-spacing: 1px; margin-top: 1px; }

/* Merge panel beneath the grid */
.rg-merge-panel {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.rg-merge-title  { font-family: 'Bangers', cursive; font-size: 16px; letter-spacing: 2px; color: #C9A227; margin-bottom: 8px; }
.rg-merge-status { font-size: 12px; color: #778899; margin-bottom: 10px; min-height: 36px; line-height: 1.5; }
.rg-merge-cost   { color: #44ddff; font-size: 12px; margin-bottom: 10px; }

.rg-merge-btn {
  background: linear-gradient(135deg, #7b2d00, #c84b00);
  border: 2px solid rgba(255,100,0,0.6);
  border-radius: 10px;
  color: #fff5e0;
  font-family: 'Bangers', cursive;
  font-size: 20px;
  letter-spacing: 3px;
  padding: 10px 32px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.rg-merge-btn:hover { background: linear-gradient(135deg, #a03800, #f05000); box-shadow: 0 0 18px rgba(255,120,0,0.5); }
.rg-merge-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* ── Skill-check shrinking ring animation ─────────────────────── */

@keyframes rg-ring-shrink {
  0%   { transform: translate(-50%,-50%) scale(3.5); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.0); opacity: 0.9; }
}
@keyframes rg-green-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,255,100,0.8); }
  50%       { box-shadow: 0 0 0 8px rgba(0,255,100,0); }
}
@keyframes rg-success-burst {
  0%   { transform: translate(-50%,-50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
}
@keyframes rg-fail-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* Overlay container for the skill-check */
.rg-skillcheck-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  cursor: pointer;
}
.rg-skillcheck-label {
  color: #ffd700;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 40px;
  text-shadow: 0 0 14px rgba(255,215,0,0.7);
  animation: rg-green-pulse 1s infinite;
}
/* Outer track ring */
.rg-track {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px solid rgba(0,255,255,0.25);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Green zone band — fixed arc indicator */
.rg-green-zone {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 10px solid rgba(0,255,100,0.75);
  box-shadow: 0 0 20px rgba(0,255,100,0.5);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
/* The shrinking ring cursor */
.rg-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #ff6600;
  box-shadow: 0 0 14px rgba(255,100,0,0.6);
  transform: translate(-50%,-50%) scale(3.5);
  animation: rg-ring-shrink var(--rg-anim-dur, 1.5s) linear forwards;
  pointer-events: none;
}
.rg-skillcheck-hint {
  margin-top: 30px;
  color: #889;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Screen shake brief for card slam */
@keyframes screenShakeBrief {
  0%   { transform: translate(0,0) rotate(0deg); }
  20%  { transform: translate(-3px, 2px) rotate(-0.5deg); }
  40%  { transform: translate(3px, -1px) rotate(0.3deg); }
  60%  { transform: translate(-2px, 3px) rotate(0.2deg); }
  80%  { transform: translate(2px, -2px) rotate(-0.3deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.screen-shake-brief {
  animation: screenShakeBrief 0.2s ease-out forwards;
}

/* ─── Black hole whirlpool ─── */
@keyframes bhWhirlExpand {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(-540deg); opacity: 1; }
}
@keyframes bhWhirlContract {
  0%   { transform: translate(-50%,-50%) scale(1) rotate(0deg);   opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(0.08) rotate(360deg); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(0) rotate(540deg);  opacity: 0; }
}
@keyframes bhRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bhRingSpinRev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}