/* ═══════════════════════════════════════════════════════════
       CSS — NAX Anomaly: The Dimensional Merchant
       Theme: Cozy Magitech Fantasy (Ghibli × Holograms)
       ═══════════════════════════════════════════════════════════ */

    /* ── Design Tokens ── */
    :root {
      /* Background gradients */
      --bg-lavender: #d8b4e2;
      --bg-sky: #a2d2ff;
      --bg-mint: #b8f0d8;
      --bg-peach: #ffd6ba;

      /* Panel glassmorphism */
      --glass-bg: rgba(255, 255, 255, 0.18);
      --glass-border: rgba(255, 255, 255, 0.35);
      --glass-shadow: rgba(100, 80, 140, 0.15);
      --glass-blur: 18px;

      /* Accent colors */
      --cyan-glow: #48ffcc;
      --cyan-dim: #2ad4a8;
      --gold: #ffd700;
      --gold-dark: #cca800;
      --crystal-pink: #ff7eb3;
      --crystal-dim: #e05a90;

      /* Text */
      --text-dark: #2a2040;
      --text-mid: #4a3f60;
      --text-light: #7a6f90;
      --text-white: #f4f0ff;

      /* UI */
      --radius-sm: 12px;
      --radius-md: 18px;
      --radius-lg: 24px;
      --radius-xl: 32px;
      --shadow-soft: 0 8px 32px rgba(100, 80, 140, 0.12);
      --shadow-float: 0 12px 40px rgba(100, 80, 140, 0.18);
      --shadow-glow-cyan: 0 0 20px rgba(72, 255, 204, 0.35);
      --shadow-glow-gold: 0 0 16px rgba(255, 215, 0, 0.4);

      /* Fonts */
      --font-display: 'Fredoka', sans-serif;
      --font-body: 'Outfit', sans-serif;

      /* Transitions */
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ── Reset ── */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    html { font-size: 16px; }

    body {
      font-family: var(--font-body);
      color: var(--text-dark);
      height: 100vh;
      height: 100dvh; /* Dynamic viewport height for mobile browsers */
      overflow: hidden;
      -webkit-text-size-adjust: 100%; /* Prevent iOS font scaling */
      touch-action: manipulation; /* Eliminate 300ms tap delay */

      /* Magical fantasy shop background */

    }

    /* Dark overlay to keep UI readable */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse at 20% 80%, rgba(216, 180, 226, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(162, 210, 255, 0.25) 0%, transparent 50%),
        rgba(10, 5, 25, 0.55);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Animated Floating Particles (pure CSS) ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(72, 255, 204, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 30% 70%, rgba(255, 126, 179, 0.4) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 50% 40%, rgba(255, 215, 0, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 70% 80%, rgba(72, 255, 204, 0.3) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 30%, rgba(162, 210, 255, 0.5) 50%, transparent 100%),
        radial-gradient(2px 2px at 15% 55%, rgba(255, 215, 0, 0.3) 50%, transparent 100%),
        radial-gradient(1px 1px at 60% 15%, rgba(255, 126, 179, 0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 90% 65%, rgba(216, 180, 226, 0.5) 50%, transparent 100%);
      animation: floatParticles 20s ease-in-out infinite alternate;
    }

    @keyframes floatParticles {
      0%   { transform: translateY(0) scale(1); opacity: 0.7; }
      50%  { transform: translateY(-20px) scale(1.1); opacity: 1; }
      100% { transform: translateY(10px) scale(0.95); opacity: 0.6; }
    }

    /* ── Header / Title Bar ── */
    #game-header {
      position: relative;
      z-index: 10;
      text-align: center;
      padding: 20px 16px 10px;
    }

    #game-header h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.5rem, 4vw, 2.2rem);
      color: var(--text-white);
      text-shadow:
        0 0 30px rgba(72, 255, 204, 0.4),
        0 2px 8px rgba(0,0,0,0.3);
      letter-spacing: 1px;
    }

    #game-header h1 span.accent {
      color: var(--cyan-glow);
      text-shadow: 0 0 18px rgba(72, 255, 204, 0.6);
    }

    #game-header .subtitle {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 0.85rem;
      color: rgba(244, 240, 255, 0.6);
      margin-top: 2px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* ── Status Bar (Save indicator + Reset) ── */
    #status-bar {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 6px 16px 12px;
    }

    #save-indicator {
      font-size: 0.75rem;
      color: rgba(244, 240, 255, 0.45);
      font-weight: 300;
      transition: color 0.3s;
    }

    #save-indicator.saving {
      color: var(--cyan-glow);
    }

    .btn-reset {
      background: rgba(255, 80, 80, 0.15);
      border: 1px solid rgba(255, 80, 80, 0.3);
      color: rgba(255, 150, 150, 0.8);
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 500;
      padding: 4px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.25s var(--ease-smooth);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .btn-reset:hover {
      background: rgba(255, 80, 80, 0.3);
      color: #ff9999;
      transform: scale(1.05);
    }

    .btn-reset:active {
      transform: scale(0.95);
    }

    /* ── Single Panel Layout (SPA) ── */
    #game-container {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      padding: 0 16px 80px; /* space for nav */
      max-width: 1400px;
      margin: 0 auto;
      height: calc(100vh - 100px);
      height: calc(100dvh - 100px);
    }
    
    #dashboard-panel {
      width: 100%;
      max-width: 500px;
      height: 100%;
      overflow-y: auto;
    }

    #shop-panel, #upgrades-panel {
      margin: 0;
      width: 100%;
      height: auto;
    }

    /* ── Glass Panel Base ── */
    .panel {
      background: var(--glass-bg);
      /* filter removed */
      
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      padding: 20px;
      box-shadow: var(--shadow-soft);
      transition: box-shadow 0.3s var(--ease-smooth);
      display: flex;
      flex-direction: column;
    }

    .panel:hover {
      box-shadow: var(--shadow-float);
    }

    .panel-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--text-white);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .panel-title .icon {
      font-size: 1.2rem;
    }

    /* ── LEFT PANEL — The Shop ── */
    #shop-panel .shop-level-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, rgba(72, 255, 204, 0.15), rgba(72, 255, 204, 0.05));
      border: 1px solid rgba(72, 255, 204, 0.3);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--cyan-glow);
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(72, 255, 204, 0.3);
    }

    .shop-section {
      margin-bottom: 18px;
    }

    .shop-section-label {
      font-size: 0.7rem;
      font-weight: 600;
      color: rgba(244, 240, 255, 0.4);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 8px;
    }

    /* Stations list */
    .station-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .station-item {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      transition: all 0.25s var(--ease-smooth);
    }

    .station-item:hover {
      background: rgba(255, 255, 255, 0.12);
      transform: translateY(-1px);
    }

    .station-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      flex-shrink: 0;
    }

    .station-icon.potion  { background: linear-gradient(135deg, #a855f7, #7c3aed); }
    .station-icon.gear    { background: linear-gradient(135deg, #38bdf8, #2563eb); }
    .station-icon.scroll  { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

    .station-info {
      flex: 1;
      min-width: 0;
    }

    .station-name {
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--text-white);
    }

    .station-desc {
      font-size: 0.68rem;
      color: rgba(244, 240, 255, 0.5);
      margin-top: 1px;
    }

    /* Customers area */
    .customers-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      min-height: 50px;
      align-items: center;
    }

    .customer {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      animation: customerBob 2s ease-in-out infinite;
      cursor: default;
      transition: transform 0.2s var(--ease-bounce);
    }

    .customer:hover {
      transform: scale(1.2);
    }

    @keyframes customerBob {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }

    /* stagger customer animations */
    .customer:nth-child(2) { animation-delay: 0.3s; }
    .customer:nth-child(3) { animation-delay: 0.6s; }
    .customer:nth-child(4) { animation-delay: 0.15s; }
    .customer:nth-child(5) { animation-delay: 0.45s; }
    .customer:nth-child(6) { animation-delay: 0.75s; }

    /* ── CENTER PANEL — Dashboard ── */
    #dashboard-panel {
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
      padding-top: 24px;
    }

    /* Currency displays */
    .currency-row {
      display: flex;
      gap: 14px;
      width: 100%;
      justify-content: center;
      margin-bottom: 8px;
    }

    .currency-card {
      flex: 1;
      max-width: 200px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      text-align: center;
      transition: all 0.3s var(--ease-smooth);
    }

    .currency-card:hover {
      background: rgba(255, 255, 255, 0.12);
      transform: translateY(-2px);
    }

    .currency-card .currency-icon {
      font-size: 1.6rem;
      margin-bottom: 4px;
    }

    .currency-card .currency-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: rgba(244, 240, 255, 0.45);
      margin-bottom: 4px;
    }

    .currency-card .currency-value {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
    }

    .currency-card.gold .currency-value {
      color: var(--gold);
      text-shadow: var(--shadow-glow-gold);
    }

    .currency-card.crystals .currency-value {
      color: var(--crystal-pink);
      text-shadow: 0 0 16px rgba(255, 126, 179, 0.4);
    }

    /* Income per second indicator */
    .income-indicator {
      font-size: 0.75rem;
      color: var(--cyan-glow);
      font-weight: 500;
      margin-bottom: 16px;
      text-shadow: 0 0 10px rgba(72, 255, 204, 0.3);
      opacity: 0.8;
    }

    /* ── The Big Craft Button ── */
    .craft-btn-wrapper {
      position: relative;
      margin: 10px 0 20px;
    }

    /* Pulsing ring behind the button */
    .craft-btn-wrapper::before {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
      border: 2px solid rgba(72, 255, 204, 0.15);
      animation: pulseRing 2s ease-in-out infinite;
    }

    @keyframes pulseRing {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50%      { transform: scale(1.08); opacity: 0; }
    }

    #craft-btn {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      border: 3px solid rgba(72, 255, 204, 0.4);
      background: radial-gradient(circle at 40% 35%,
        rgba(72, 255, 204, 0.25) 0%,
        rgba(72, 255, 204, 0.08) 50%,
        rgba(30, 42, 80, 0.6) 100%);
      color: var(--cyan-glow);
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      position: relative;
      box-shadow:
        0 0 30px rgba(72, 255, 204, 0.2),
        inset 0 0 30px rgba(72, 255, 204, 0.05);
      transition: all 0.2s var(--ease-bounce);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-shadow: 0 0 14px rgba(72, 255, 204, 0.5);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    #craft-btn .btn-emoji {
      font-size: 2.2rem;
      filter: drop-shadow(0 0 8px rgba(72, 255, 204, 0.4));
      transition: transform 0.2s var(--ease-bounce);
    }

    #craft-btn .btn-label {
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      opacity: 0.85;
    }

    #craft-btn:hover {
      transform: scale(1.06);
      box-shadow:
        0 0 50px rgba(72, 255, 204, 0.35),
        inset 0 0 40px rgba(72, 255, 204, 0.1);
      border-color: rgba(72, 255, 204, 0.6);
    }

    #craft-btn:active {
      transform: scale(0.92);
      box-shadow:
        0 0 20px rgba(72, 255, 204, 0.15),
        inset 0 0 20px rgba(72, 255, 204, 0.08);
      transition-duration: 0.08s;
    }

    #craft-btn:active .btn-emoji {
      transform: rotate(-15deg) scale(0.9);
    }

    /* Click power label */
    .click-power-label {
      font-size: 0.72rem;
      color: rgba(244, 240, 255, 0.4);
      margin-top: 4px;
    }

    .click-power-label span {
      color: var(--gold);
      font-weight: 600;
    }

    /* Floating text container */
    #float-text-container {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 99999;
      overflow: hidden;
    }

    .float-text {
      position: absolute;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.3rem;
      color: var(--gold);
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      pointer-events: none;
      animation: floatUp 1s var(--ease-smooth) forwards;
    }

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

    /* Stats section in center panel */
    .stats-section {
      width: 100%;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .stats-section .shop-section-label {
      text-align: center;
      margin-bottom: 10px;
    }

    .stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      font-size: 0.78rem;
    }

    .stat-row .stat-label {
      color: rgba(244, 240, 255, 0.5);
    }

    .stat-row .stat-value {
      color: var(--text-white);
      font-weight: 600;
    }

    /* ── RIGHT PANEL — Upgrades ── */
    #upgrades-panel {
      gap: 0;
    }

    .upgrades-scroll {
      /* removed flex:1, min-height:0, overflow-y:auto to allow parent modal to scroll */
      padding-right: 4px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── Beautiful Global Scrollbar ── */
    *::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    *::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      margin: 18px 0;
    }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--cyan-glow) 0%, var(--crystal-pink) 100%);
      border-radius: 10px;
      box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
    }
    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #66ffdb 0%, #ff99c2 100%);
      box-shadow: 0 0 8px var(--cyan-glow);
    }
    *::-webkit-scrollbar-corner {
      background: transparent;
    }

    /* Upgrade Card */
    .upgrade-card {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      padding: 14px;
      transition: all 0.25s var(--ease-smooth);
      cursor: pointer;
      user-select: none;
      position: relative;
      overflow: hidden;
    }

    .upgrade-card:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(72, 255, 204, 0.25);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(72, 255, 204, 0.08);
    }

    .upgrade-card:active {
      transform: scale(0.97);
      transition-duration: 0.08s;
    }

    .upgrade-card.cannot-afford {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .upgrade-card.cannot-afford:hover {
      transform: none;
      box-shadow: none;
      border-color: rgba(255, 255, 255, 0.1);
    }

    .upgrade-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .upgrade-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .upgrade-title {
      font-weight: 600;
      font-size: 0.82rem;
      color: var(--text-white);
    }

    .upgrade-level {
      font-size: 0.65rem;
      color: var(--cyan-glow);
      font-weight: 500;
      margin-left: auto;
      background: rgba(72, 255, 204, 0.1);
      border-radius: 10px;
      padding: 2px 8px;
      flex-shrink: 0;
    }

    .upgrade-desc {
      font-size: 0.7rem;
      color: rgba(244, 240, 255, 0.5);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .upgrade-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .upgrade-effect {
      font-size: 0.68rem;
      color: var(--cyan-glow);
      font-weight: 500;
    }

    .upgrade-cost {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--gold);
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
    }

    .upgrade-cost .coin-icon {
      font-size: 0.9rem;
    }

    /* ── Purchase Flash Effect ── */
    @keyframes purchaseFlash {
      0%   { box-shadow: 0 0 0 0 rgba(72, 255, 204, 0.5); }
      50%  { box-shadow: 0 0 20px 4px rgba(72, 255, 204, 0.3); }
      100% { box-shadow: 0 0 0 0 rgba(72, 255, 204, 0); }
    }

    .upgrade-card.purchased {
      animation: purchaseFlash 0.5s var(--ease-smooth);
    }

    /* ── Responsive & Mobile Friendly ── */

    /* === Touch-friendly defaults === */
    @media (pointer: coarse) {
      .nav-btn { -webkit-tap-highlight-color: transparent; }
      .upgrade-card, .research-card, .inv-card, .recruit-card, .staff-chip, .customer {
        -webkit-tap-highlight-color: transparent;
      }
    }

    /* === Tablets (max-width: 768px) === */
    @media (max-width: 768px) {
      html { font-size: 15px; }

      #game-header { padding: 14px 12px 6px; }
      #game-header h1 { font-size: clamp(1.2rem, 5vw, 1.8rem); }
      #game-header .subtitle { font-size: 0.72rem; letter-spacing: 1.5px; }

      #status-bar { padding: 4px 12px 8px; gap: 10px; }

      #game-container {
        padding: 0 10px 90px;
        height: calc(100vh - 80px);
      }

      /* Bottom Nav */
      .bottom-nav {
        bottom: 10px;
        gap: 3px;
        padding: 6px 8px;
        border-radius: 30px;
        width: max-content;
        max-width: 98vw;
        justify-content: center;
      }
      .nav-btn {
        font-size: 1.25rem;
        flex: none;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1;
        border-radius: 50%;
      }
      .nav-btn::after { display: none; } /* Hide tooltip on mobile */

      /* SPA Modals */
      .spa-modal {
        width: 95%;
        max-width: 100%;
        max-height: 82vh;
        padding: 18px 14px;
        border-radius: var(--radius-lg);
      }

      /* Gacha Modal */
      .gacha-modal {
        padding: 20px 16px;
        max-width: 95%;
        width: 95%;
        border-radius: var(--radius-lg);
      }
      .gacha-result { min-height: 130px; }
      .gacha-result-icon { font-size: 3rem; }
      .gacha-modal-actions { flex-direction: column; gap: 8px; }
      .gacha-modal-actions .btn-gacha-pull,
      .gacha-modal-actions .btn-gacha-close {
        width: 100%;
        justify-content: center;
      }

      /* Combat Modal */
      .combat-modal {
        padding: 20px 16px;
        max-width: 95%;
        width: 95%;
        border-radius: var(--radius-lg);
      }
      .monster-emoji { font-size: 3.5rem; }
      .btn-attack { width: 110px; height: 110px; font-size: 1rem; }
      .monster-display { min-height: 140px; margin: 12px 0; }
      .hp-bar-container { width: 90%; }

      /* Dashboard */
      /* Removed padding-top: 16px to maintain the 12px gap from the top */
      #craft-btn { width: 130px; height: 130px; }
      #craft-btn .btn-emoji { font-size: 1.8rem; }
      .currency-card { padding: 10px 12px; }
      .currency-card .currency-value { font-size: 1.3rem; }
      .currency-card .currency-icon { font-size: 1.4rem; }

      /* Upgrade Cards */
      .upgrade-card { padding: 10px; }
      .upgrade-icon { width: 30px; height: 30px; font-size: 1rem; }

      /* Inventory Grid */
      .inventory-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
      .inv-card { padding: 8px; }
      .inv-card .inv-icon { font-size: 1.3rem; }

      /* Tab Bar */
      .tab-bar { gap: 3px; }
      .tab-btn { padding: 6px 4px; font-size: 0.65rem; }

      /* Staff Details */
      .staff-det-emoji { font-size: 3.5rem; }
      .staff-det-name { font-size: 1.3rem; }

      /* Recruit Grid */
      #recruit-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 8px !important; }
      .recruit-card { padding: 10px; }
      .recruit-card .rc-icon { font-size: 2rem; }
      .recruit-card .rc-name { font-size: 0.85rem; }

      /* Close button */
      .btn-close-modal { width: 28px; height: 28px; font-size: 0.85rem; margin-top: -8px; margin-right: -8px; }
    }

    /* === Small phones (max-width: 480px) === */
    @media (max-width: 480px) {
      html { font-size: 14px; }

      #game-header { padding: 10px 10px 4px; }
      #game-header h1 { font-size: 1.15rem; }
      #game-header .subtitle { font-size: 0.65rem; letter-spacing: 1px; }

      #status-bar { padding: 2px 10px 6px; }
      #save-indicator { font-size: 0.65rem; }

      #game-container {
        padding: 0 6px 85px;
        height: calc(100vh - 65px);
      }


      /* SPA Modals */
      .spa-modal {
        width: 98%;
        padding: 16px 12px;
        border-radius: var(--radius-md);
      }
      .panel-title { font-size: 0.95rem; margin-bottom: 12px; }

      /* Gacha & Combat Modals */
      .gacha-modal, .combat-modal {
        padding: 16px 12px;
        width: 98%;
        max-width: 100%;
        border-radius: var(--radius-lg);
      }
      .gacha-modal-title, .combat-title { font-size: 1.05rem; }
      .gacha-modal-subtitle { font-size: 0.65rem; margin-bottom: 14px; }
      .gacha-result { min-height: 110px; margin-bottom: 14px; }
      .gacha-result-icon { font-size: 2.5rem; }
      .gacha-result-name { font-size: 0.95rem; }
      .gacha-rates { gap: 8px; margin-bottom: 10px; }
      .gacha-rate-item { font-size: 0.55rem; }

      /* Dashboard */
      #dashboard-panel { gap: 2px; }
      .currency-row { gap: 8px; flex-wrap: wrap; }
      .currency-card { padding: 8px 10px; max-width: 48%; }
      .currency-card .currency-value { font-size: 1.1rem; }
      .currency-card .currency-label { font-size: 0.6rem; }
      .currency-card .currency-icon { font-size: 1.2rem; }
      #craft-btn { width: 110px; height: 110px; }
      #craft-btn .btn-emoji { font-size: 1.5rem; }
      #craft-btn .btn-label { font-size: 0.65rem; }
      .craft-btn-wrapper { margin: 6px 0 14px; }
      .income-indicator { font-size: 0.68rem; margin-bottom: 10px; }
      .click-power-label { font-size: 0.65rem; }

      .gacha-btn-row { flex-direction: column; gap: 6px; align-items: center; }
      .btn-gacha { width: 100%; justify-content: center; padding: 8px 14px; font-size: 0.75rem; }

      /* Stats Section */
      .stats-section { padding-top: 10px; }
      .stat-row { font-size: 0.72rem; padding: 3px 0; }

      /* Upgrade Cards */
      .upgrade-card { padding: 8px; }
      .upgrade-header { gap: 6px; margin-bottom: 6px; }
      .upgrade-icon { width: 28px; height: 28px; font-size: 0.9rem; }
      .upgrade-title { font-size: 0.75rem; }
      .upgrade-level { font-size: 0.6rem; padding: 1px 6px; }
      .upgrade-desc { font-size: 0.65rem; margin-bottom: 6px; }
      .upgrade-cost { font-size: 0.78rem; }
      .upgrade-effect { font-size: 0.6rem; }

      /* Shop Sections */
      .shop-section-label { font-size: 0.65rem; }
      .station-item { padding: 8px 10px; }
      .station-icon { width: 30px; height: 30px; font-size: 1.1rem; }
      .station-name { font-size: 0.72rem; }
      .station-desc { font-size: 0.6rem; }

      /* Inventory Grid */
      .inventory-grid { grid-template-columns: 1fr 1fr; gap: 5px; }
      .inv-card { padding: 6px; }
      .inv-card .inv-icon { font-size: 1.1rem; }
      .inv-card .inv-name { font-size: 0.6rem; }
      .inv-card .inv-price { font-size: 0.55rem; }
      .inv-card .inv-tier { font-size: 0.45rem; top: 2px; right: 4px; }

      /* Tab Bar */
      .tab-bar { flex-wrap: wrap; gap: 3px; }
      .tab-btn { padding: 5px 3px; font-size: 0.6rem; letter-spacing: 0; }

      /* Research Cards */
      .research-card { padding: 10px; }
      .research-icon { font-size: 1.2rem; }
      .research-name { font-size: 0.72rem; }
      .research-tier-label { font-size: 0.55rem; }
      .research-sell-info { font-size: 0.6rem; }
      .btn-unlock { padding: 4px 10px; font-size: 0.65rem; }

      /* Staff */
      .staff-chip { padding: 3px 7px 3px 5px; font-size: 0.6rem; }
      .staff-chip .staff-emoji { font-size: 0.9rem; }
      .staff-chip .staff-rarity { font-size: 0.45rem; }
      .buff-badge { font-size: 0.55rem; padding: 2px 6px; }
      .staff-det-emoji { font-size: 3rem; }
      .staff-det-name { font-size: 1.1rem; }
      .staff-det-rarity { font-size: 0.75rem; }
      .staff-det-buff { padding: 8px; font-size: 0.8rem; }

      /* Recruit */
      #recruit-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
      .recruit-card { padding: 8px; }
      .recruit-card .rc-icon { font-size: 1.6rem; }
      .recruit-card .rc-name { font-size: 0.78rem; }
      .recruit-card .rc-lore { font-size: 0.6rem; }
      .recruit-card .rc-buff { font-size: 0.65rem; }
      .recruit-card .rc-cost { font-size: 0.75rem; }
      .recruit-card .btn-recruit { padding: 5px 12px; font-size: 0.7rem; }

      /* Sale Log */
      .sale-log { max-height: 55px; }
      .sale-log-entry { font-size: 0.55rem; }

      /* Customers */
      .customers-area { gap: 5px; min-height: 36px; }
      .customer { width: 32px; height: 32px; font-size: 1.2rem; }

      /* Combat */
      .monster-display { min-height: 120px; margin: 8px 0; }
      .monster-emoji { font-size: 3rem; margin-bottom: 6px; }
      .monster-name { font-size: 1rem; }
      .hp-bar-container { width: 95%; height: 14px; }
      .hp-text { font-size: 0.65rem; }
      .btn-attack { width: 95px; height: 95px; font-size: 0.9rem; margin-bottom: 10px; }

      /* Close button */
      .btn-close-modal { width: 26px; height: 26px; font-size: 0.8rem; margin-top: -6px; margin-right: -6px; }

      /* Gacha Pool Info */
      #gacha-pool-modal { padding: 16px 12px !important; }

      /* Consumables */
      .consumable-item { padding: 10px; gap: 6px; }
      .btn-use-item { padding: 6px 12px; font-size: 0.8rem; }

      /* Timer overlay */
      .upgrade-timer-overlay { font-size: 1.1rem; }
      .btn-cancel-upgrade { font-size: 0.65rem; padding: 3px 8px; }


    }

    /* === Very small phones (max-width: 360px) === */
    @media (max-width: 360px) {
      html { font-size: 13px; }

      #craft-btn { width: 95px; height: 95px; }
      #craft-btn .btn-emoji { font-size: 1.3rem; }
      #craft-btn .btn-label { font-size: 0.6rem; }

      .currency-card .currency-value { font-size: 1rem; }

      #recruit-grid { grid-template-columns: 1fr !important; }

      .tab-btn { font-size: 0.55rem; padding: 4px 2px; }
    }

    /* === Landscape orientation on mobile === */
    @media (max-height: 500px) and (orientation: landscape) {
      #game-header { padding: 6px 12px 2px; }
      #game-header h1 { font-size: 1rem; }
      #game-header .subtitle { display: none; }
      #status-bar { padding: 2px 10px 4px; }

      #game-container { height: calc(100vh - 40px); padding-bottom: 60px; }

      .bottom-nav { bottom: 4px; padding: 5px 10px; }
      .nav-btn { font-size: 1.2rem; }

      .spa-modal { max-height: 90vh; }
      .gacha-modal, .combat-modal { max-height: 90vh; overflow-y: auto; }

      #craft-btn { width: 80px; height: 80px; }
      #craft-btn .btn-emoji { font-size: 1.2rem; }
      .craft-btn-wrapper { margin: 4px 0 8px; }

      .monster-display { min-height: 80px; margin: 4px 0; }
      .monster-emoji { font-size: 2.5rem; }
      .btn-attack { width: 70px; height: 70px; font-size: 0.75rem; }
    }

    /* === Safe area insets for notched phones === */
    @supports (padding: env(safe-area-inset-bottom)) {
      .bottom-nav {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }
      #game-container {
        padding-bottom: calc(90px + env(safe-area-inset-bottom));
      }
    }

    /* === Prevent horizontal scroll on mobile === */
    html, body { max-width: 100vw; overflow-x: hidden; }

    /* ── Tooltip Utility ── */
    .tooltip {
      position: relative;
    }
    .tooltip::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 110%;
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: rgba(26, 16, 48, 0.95);
      color: var(--text-white);
      font-size: 0.68rem;
      padding: 5px 10px;
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: all 0.2s var(--ease-smooth);
    }
    .tooltip:hover::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* ═══════════════════════════════════════════════════════════
       PHASE 2 CSS — Inventory, Tech-Tree, Tabs, Sale Animations
       ═══════════════════════════════════════════════════════════ */

    /* ── Shop Inventory Cards ── */
    .inventory-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .inv-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 10px;
      text-align: center;
      transition: all 0.3s var(--ease-smooth);
      position: relative;
      overflow: hidden;
    }

    .inv-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 40%, rgba(72,255,204,0.06) 100%);
      pointer-events: none;
    }

    .inv-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(72,255,204,0.1);
      border-color: rgba(72,255,204,0.25);
    }

    .inv-card .inv-icon {
      font-size: 1.6rem;
      margin-bottom: 4px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    }

    .inv-card .inv-name {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--text-white);
      line-height: 1.2;
      margin-bottom: 3px;
    }

    .inv-card .inv-price {
      font-size: 0.6rem;
      color: var(--gold);
      font-weight: 500;
    }

    .inv-card .inv-tier {
      position: absolute;
      top: 4px;
      right: 6px;
      font-size: 0.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 1px 5px;
      border-radius: 6px;
    }

    .inv-tier.t1 { background: rgba(74,222,128,0.2); color: #4ade80; }
    .inv-tier.t2 { background: rgba(96,165,250,0.2); color: #60a5fa; }
    .inv-tier.t3 { background: rgba(244,114,182,0.2); color: #f472b6; }
    .inv-tier.t4 { background: rgba(251,191,36,0.2); color: #fbbf24; } /* Gold */
    .inv-tier.t5 { background: rgba(255,42,109,0.2); color: #ff2a6d; } /* Void Red */

    .inv-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 20px;
      color: rgba(244,240,255,0.3);
      font-size: 0.78rem;
      font-style: italic;
    }

    /* ── Sale animation (item sold flash on inv card) ── */
    @keyframes salePop {
      0%   { box-shadow: 0 0 0 0 rgba(255,215,0,0.5); transform: scale(1); }
      40%  { box-shadow: 0 0 18px 4px rgba(255,215,0,0.25); transform: scale(1.04); }
      100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); transform: scale(1); }
    }
    .inv-card.sold-flash {
      animation: salePop 0.5s var(--ease-bounce);
    }

    /* ── Sale floating text (appears over shop panel) ── */
    .sale-float {
      position: absolute;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1rem;
      color: var(--gold);
      text-shadow: 0 0 12px rgba(255,215,0,0.5);
      pointer-events: none;
      animation: saleFloatUp 1.3s var(--ease-smooth) forwards;
      z-index: 100;
      white-space: nowrap;
    }
    @keyframes saleFloatUp {
      0%   { opacity: 1; transform: translateY(0) scale(1); }
      50%  { opacity: 0.9; }
      100% { opacity: 0; transform: translateY(-60px) scale(1.15); }
    }

    /* ── Right Panel Tabs ── */
    .tab-bar {
      display: flex;
      gap: 4px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.04);
      color: rgba(244,240,255,0.5);
      font-family: var(--font-body);
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s var(--ease-smooth);
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tab-btn:hover {
      background: rgba(255,255,255,0.08);
      color: var(--text-white);
    }

    .tab-btn.active {
      background: rgba(72,255,204,0.12);
      border-color: rgba(72,255,204,0.3);
      color: var(--cyan-glow);
      text-shadow: 0 0 8px rgba(72,255,204,0.3);
    }

    .tab-content {
      display: none;
      /* removed flex:1, min-height:0, overflow-y:auto to allow parent modal to scroll */
    }

    .tab-content.active {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── Research / Tech-Tree Cards ── */
    .research-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-md);
      padding: 12px;
      transition: all 0.25s var(--ease-smooth);
    }

    .research-card:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.18);
    }

    .research-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .research-icon {
      font-size: 1.5rem;
      filter: grayscale(0.5) opacity(0.7);
      transition: filter 0.3s;
    }

    .research-card:hover .research-icon {
      filter: grayscale(0) opacity(1);
    }

    .research-info {
      flex: 1;
      min-width: 0;
    }

    .research-name {
      font-weight: 600;
      font-size: 0.8rem;
      color: var(--text-white);
    }

    .research-tier-label {
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .research-tier-label.t1 { color: #4ade80; }
    .research-tier-label.t2 { color: #60a5fa; }
    .research-tier-label.t3 { color: #f472b6; }
    .research-tier-label.t4 { color: #fbbf24; }
    .research-tier-label.t5 { color: #ff2a6d; }

    .research-price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 6px;
    }

    .research-sell-info {
      font-size: 0.65rem;
      color: rgba(244,240,255,0.4);
    }

    .research-sell-info span {
      color: var(--gold);
      font-weight: 600;
    }

    .btn-unlock {
      padding: 5px 14px;
      border-radius: 14px;
      border: 1px solid rgba(72,255,204,0.3);
      background: linear-gradient(135deg, rgba(72,255,204,0.15), rgba(72,255,204,0.05));
      color: var(--cyan-glow);
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s var(--ease-bounce);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .btn-unlock:hover {
      background: linear-gradient(135deg, rgba(72,255,204,0.25), rgba(72,255,204,0.1));
      transform: scale(1.05);
      box-shadow: var(--shadow-glow-cyan);
    }

    .btn-unlock:active {
      transform: scale(0.94);
    }

    .btn-unlock.cannot-afford {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .btn-unlock.cannot-afford:hover {
      transform: none;
      box-shadow: none;
    }

    .research-empty {
      text-align: center;
      padding: 30px 10px;
      color: rgba(244,240,255,0.3);
      font-size: 0.78rem;
    }
    .research-empty .empty-icon {
      font-size: 2rem;
      margin-bottom: 8px;
      display: block;
    }

    /* ── Unlock Flash ── */
    @keyframes unlockFlash {
      0%   { box-shadow: 0 0 0 0 rgba(72,255,204,0.6); }
      50%  { box-shadow: 0 0 24px 6px rgba(72,255,204,0.3); }
      100% { box-shadow: 0 0 0 0 rgba(72,255,204,0); }
    }
    .research-card.unlocked {
      animation: unlockFlash 0.6s var(--ease-smooth);
    }

    /* ── Sale Log in Shop ── */
    .sale-log {
      max-height: 70px;
      overflow-y: auto;
      display: flex;
      flex-direction: column-reverse;
      gap: 3px;
    }

    .sale-log-entry {
      font-size: 0.62rem;
      color: rgba(244,240,255,0.45);
      padding: 2px 0;
      animation: fadeInEntry 0.3s ease;
    }

    .sale-log-entry span.sale-gold {
      color: var(--gold);
      font-weight: 600;
    }

    @keyframes fadeInEntry {
      from { opacity: 0; transform: translateX(-6px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* ═══════════════════════════════════════════════════════════
       PHASE 3 CSS — Gacha System, Staff Room, Rarity Effects
       ═══════════════════════════════════════════════════════════ */

    /* ── Rarity Color Tokens ── */
    :root {
      --rarity-n:   #a0a0b0;
      --rarity-r:   #60a5fa;
      --rarity-sr:  #c084fc;
      --rarity-ssr: #ff7eb3;
      --rarity-ur:  #fbbf24;
    }

    /* ── Staff Room (Shop Panel) ── */
    .staff-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .staff-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 20px;
      padding: 4px 10px 4px 6px;
      font-size: 0.68rem;
      color: var(--text-white);
      transition: all 0.2s var(--ease-smooth);
    }

    .staff-chip:hover {
      background: rgba(255,255,255,0.12);
      transform: translateY(-1px);
    }

    .staff-chip .staff-emoji {
      font-size: 1.1rem;
    }

    .staff-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,0.3);
      flex-shrink: 0;
    }

    .staff-chip .staff-rarity {
      font-size: 0.5rem;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .staff-rarity.rN   { background: rgba(160,160,176,0.2); color: var(--rarity-n); }
    .staff-rarity.rR   { background: rgba(96,165,250,0.2);  color: var(--rarity-r); }
    .staff-rarity.rSR  { background: rgba(192,132,252,0.2); color: var(--rarity-sr); }
    .staff-rarity.rSSR { background: rgba(255,126,179,0.2);  color: var(--rarity-ssr); }
    .staff-rarity.rUR  { background: rgba(251,191,36,0.2); color: var(--rarity-ur); text-shadow: 0 0 5px var(--rarity-ur); font-weight: 800; }

    .staff-buff-info {
      font-size: 0.55rem;
      color: var(--cyan-glow);
      opacity: 0.7;
    }

    .staff-empty {
      font-size: 0.72rem;
      color: rgba(244,240,255,0.3);
      font-style: italic;
      padding: 6px 0;
    }

    /* ── Buff Summary Badge ── */
    .buff-summary {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px;
    }

    .buff-badge {
      font-size: 0.6rem;
      padding: 3px 8px;
      border-radius: 10px;
      font-weight: 600;
      background: rgba(72,255,204,0.1);
      border: 1px solid rgba(72,255,204,0.2);
      color: var(--cyan-glow);
    }

    /* ── Gacha Button (Center Panel) ── */
    .gacha-btn-row {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
      margin-top: 8px;
    }

    .btn-gacha {
      padding: 10px 20px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,126,179,0.35);
      background: linear-gradient(135deg, rgba(255,126,179,0.15), rgba(192,132,252,0.1));
      color: var(--crystal-pink);
      font-family: var(--font-display);
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s var(--ease-bounce);
      display: flex;
      align-items: center;
      gap: 6px;
      text-shadow: 0 0 10px rgba(255,126,179,0.3);
    }

    .btn-gacha:hover {
      background: linear-gradient(135deg, rgba(255,126,179,0.25), rgba(192,132,252,0.15));
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255,126,179,0.2);
    }

    .btn-gacha:active {
      transform: scale(0.94);
    }

    .btn-gacha.cannot-afford {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .btn-gacha.cannot-afford:hover {
      transform: none;
      box-shadow: none;
    }

    /* ── Gacha Modal Overlay ── */
    .gacha-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(10,5,25,0.85);
      /* filter removed */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s var(--ease-smooth);
    }

    .gacha-modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .gacha-modal {
      background: linear-gradient(145deg, rgba(42,24,72,0.95), rgba(30,42,80,0.95));
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-xl);
      padding: 30px;
      max-width: 400px;
      width: 90%;
      text-align: center;
      transform: scale(0.9) translateY(20px);
      transition: transform 0.35s var(--ease-bounce);
      position: relative;
      overflow: hidden;
    }

    .gacha-modal-overlay.open .gacha-modal {
      transform: scale(1) translateY(0);
    }

    .gacha-modal-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--text-white);
      margin-bottom: 6px;
    }

    .gacha-modal-subtitle {
      font-size: 0.72rem;
      color: rgba(244,240,255,0.5);
      margin-bottom: 20px;
    }

    /* ── Result Display ── */
    .gacha-result {
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .gacha-result-icon {
      font-size: 4rem;
      animation: gachaReveal 0.6s var(--ease-bounce);
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
    }

    @keyframes gachaReveal {
      0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
      60%  { transform: scale(1.2) rotate(5deg); }
      100% { transform: scale(1) rotate(0); opacity: 1; }
    }

    .gacha-result-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--text-white);
    }

    .gacha-result-rarity {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 3px 14px;
      border-radius: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
    }

    .gacha-result-rarity.rN   { background: rgba(160,160,176,0.2); color: var(--rarity-n); }
    .gacha-result-rarity.rR   { background: rgba(96,165,250,0.2);  color: var(--rarity-r); }
    .gacha-result-rarity.rSR  { background: rgba(192,132,252,0.25); color: var(--rarity-sr); box-shadow: 0 0 16px rgba(192,132,252,0.2); }
    .gacha-result-rarity.rSSR { background: rgba(255,126,179,0.25);  color: var(--rarity-ssr); box-shadow: 0 0 20px rgba(255,126,179,0.3); }
    .gacha-result-rarity.rUR  { background: rgba(251,191,36,0.25);  color: var(--rarity-ur); box-shadow: 0 0 20px rgba(251,191,36,0.3); }

    .gacha-result-buff {
      font-size: 0.7rem;
      color: var(--cyan-glow);
      font-weight: 500;
    }

    .gacha-result-dupe {
      font-size: 0.65rem;
      color: var(--crystal-pink);
      font-weight: 500;
      margin-top: 2px;
    }

    /* ── SSR Special Glow Animation ── */
    @keyframes ssrGlow {
      0%   { box-shadow: 0 0 20px rgba(255,126,179,0.3), 0 0 60px rgba(192,132,252,0.15); }
      50%  { box-shadow: 0 0 40px rgba(255,126,179,0.5), 0 0 80px rgba(192,132,252,0.25); }
      100% { box-shadow: 0 0 20px rgba(255,126,179,0.3), 0 0 60px rgba(192,132,252,0.15); }
    }

    .gacha-modal.ssr-pull {
      animation: ssrGlow 1.5s ease-in-out infinite;
      border-color: rgba(255,126,179,0.5);
    }

    .gacha-modal.ssr-pull::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: var(--radius-xl);
      background: linear-gradient(135deg, rgba(255,126,179,0.1), rgba(192,132,252,0.1), rgba(251,191,36,0.1));
      z-index: -1;
      animation: ssrBorderShift 3s linear infinite;
    }

    @keyframes ssrBorderShift {
      0%   { filter: hue-rotate(0deg); }
      100% { filter: hue-rotate(360deg); }
    }

    /* ── SR Glow ── */
    .gacha-modal.sr-pull {
      box-shadow: 0 0 30px rgba(192,132,252,0.25);
      border-color: rgba(192,132,252,0.4);
    }

    /* ── Modal Buttons ── */
    .gacha-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .btn-gacha-pull {
      padding: 10px 22px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,126,179,0.3);
      background: linear-gradient(135deg, rgba(255,126,179,0.2), rgba(192,132,252,0.12));
      color: var(--crystal-pink);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.2s var(--ease-bounce);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .btn-gacha-pull:hover {
      transform: scale(1.06);
      box-shadow: 0 0 20px rgba(255,126,179,0.25);
    }

    .btn-gacha-pull:active {
      transform: scale(0.94);
    }

    .btn-gacha-pull.cannot-afford {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .btn-gacha-pull.cannot-afford:hover {
      transform: none;
      box-shadow: none;
    }

    .btn-gacha-close {
      padding: 10px 22px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.06);
      color: var(--text-white);
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.2s var(--ease-smooth);
    }

    .btn-gacha-close:hover {
      background: rgba(255,255,255,0.12);
      transform: scale(1.04);
    }

    /* ── Gacha placeholder (before first pull) ── */
    .gacha-placeholder {
      color: rgba(244,240,255,0.3);
      font-size: 0.82rem;
    }
    .gacha-placeholder .placeholder-icon {
      font-size: 3rem;
      display: block;
      margin-bottom: 8px;
      opacity: 0.5;
    }

    /* ── Gacha Tabs ── */
    .gacha-tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    .gacha-tab-btn {
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.6);
      padding: 10px 24px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .gacha-tab-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      transform: translateY(-1px);
    }
    .gacha-tab-btn.active.basic {
      background: linear-gradient(135deg, rgba(72,255,204,0.3) 0%, rgba(72,255,204,0.05) 100%);
      border-color: var(--cyan-glow);
      color: #fff;
      box-shadow: 0 0 15px rgba(72, 255, 204, 0.2), inset 0 0 10px rgba(72, 255, 204, 0.1);
    }
    .gacha-tab-btn.premium {
      border-color: rgba(255, 126, 179, 0.3);
      color: rgba(255, 126, 179, 0.8);
    }
    .gacha-tab-btn.active.premium {
      background: linear-gradient(135deg, rgba(255,126,179,0.7) 0%, rgba(251,191,36,0.6) 100%);
      border-color: rgba(255,255,255,0.8);
      color: #fff;
      box-shadow: 0 0 20px rgba(255, 126, 179, 0.5), inset 0 0 15px rgba(251,191,36,0.4);
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
      transform: translateY(-2px) scale(1.02);
    }
    .gacha-tab-btn.active.premium::after {
      content: '';
      position: absolute;
      top: -50%; left: -50%; width: 200%; height: 200%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
      transform: rotate(30deg);
      animation: tabShine 3s infinite linear;
    }
    @keyframes tabShine {
      0% { transform: translateX(-100%) rotate(30deg); }
      20% { transform: translateX(100%) rotate(30deg); }
      100% { transform: translateX(100%) rotate(30deg); }
    }

    /* ── Probability Table ── */
    .gacha-rates {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .gacha-rate-item {
      font-size: 0.6rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .gacha-rate-item .rate-pct { margin-left: 3px; }
    .gacha-rate-item.rN   .rate-label, .gacha-rate-item.rN   .rate-pct { color: var(--rarity-n); }
    .gacha-rate-item.rR   .rate-label, .gacha-rate-item.rR   .rate-pct { color: var(--rarity-r); }
    .gacha-rate-item.rSR  .rate-label, .gacha-rate-item.rSR  .rate-pct { color: var(--rarity-sr); }
    .gacha-rate-item.rSSR .rate-label, .gacha-rate-item.rSSR .rate-pct { color: var(--rarity-ssr); }
    .gacha-rate-item.rUR  .rate-label, .gacha-rate-item.rUR  .rate-pct { color: var(--rarity-ur); text-shadow: 0 0 6px rgba(251,191,36,0.5); }

    /* ═══════════════════════════════════════════════════════════
       PHASE 4 CSS — Expedition & Leaderboard
       ═══════════════════════════════════════════════════════════ */

    /* ── Expedition Modal Overlay ── */
    .combat-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(20,5,5,0.85);
      /* filter removed */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s var(--ease-smooth);
    }
    .combat-modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }
    .combat-modal {
      background: linear-gradient(145deg, rgba(42,24,32,0.95), rgba(80,30,42,0.95));
      border: 1px solid rgba(255,100,150,0.25);
      border-radius: var(--radius-xl);
      padding: 30px;
      max-width: 450px;
      width: 90%;
      text-align: center;
      transform: scale(0.9) translateY(20px);
      transition: transform 0.35s var(--ease-bounce);
      position: relative;
      box-shadow: 0 0 50px rgba(255,0,127,0.15);
    }
    .combat-modal-overlay.open .combat-modal {
      transform: scale(1) translateY(0);
    }
    .combat-title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.3rem;
      color: #ff99cc;
      margin-bottom: 6px;
      text-shadow: 0 0 10px rgba(255,0,127,0.5);
    }

    /* ── Monster Display ── */
    .monster-display {
      margin: 20px 0;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .monster-emoji {
      font-size: 5rem;
      margin-top: 20px;
      margin-bottom: 10px;
      animation: monsterFloat 3s ease-in-out infinite;
      filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
      transition: transform 0.1s;
      user-select: none;
    }
    @keyframes monsterFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    .monster-emoji.hit {
      transform: scale(0.9) rotate(-5deg);
      opacity: 0.8;
    }
    .monster-emoji.dead {
      animation: monsterDeath 0.6s forwards;
    }
    @keyframes monsterDeath {
      0% { transform: scale(1); opacity: 1; filter: brightness(2) contrast(2); }
      100% { transform: scale(0.5) translateY(50px); opacity: 0; filter: grayscale(1); }
    }
    @keyframes pulseAlert {
      0% { transform: scale(1); box-shadow: 0 0 10px rgba(251,191,36,0.4); }
      100% { transform: scale(1.1); box-shadow: 0 0 30px rgba(251,191,36,0.8); }
    }
    .monster-name {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--text-white);
      margin-bottom: 8px;
    }

    /* ── HP Bar ── */
    .hp-bar-container {
      width: 80%;
      height: 16px;
      background: rgba(0,0,0,0.5);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.2);
      overflow: hidden;
      margin-bottom: 6px;
      position: relative;
    }
    .hp-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff007f, #ff4d4d);
      width: 100%;
      transition: width 0.15s ease-out;
      box-shadow: 0 0 10px rgba(255,0,127,0.5);
    }
    .hp-text {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-white);
    }

    /* ── Attack Button ── */
    .btn-attack {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 3px solid rgba(255,0,127,0.4);
      background: radial-gradient(circle at 40% 35%, rgba(255,0,127,0.25) 0%, rgba(255,0,127,0.08) 50%, rgba(42,24,32,0.6) 100%);
      color: #ff99cc;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.2rem;
      cursor: pointer;
      box-shadow: 0 0 30px rgba(255,0,127,0.2), inset 0 0 30px rgba(255,0,127,0.05);
      transition: all 0.1s;
      margin-bottom: 16px;
      text-shadow: 0 0 14px rgba(255,0,127,0.5);
      user-select: none;
    }
    .btn-attack:hover {
      transform: scale(1.05);
      box-shadow: 0 0 50px rgba(255,0,127,0.4), inset 0 0 40px rgba(255,0,127,0.1);
      border-color: rgba(255,0,127,0.6);
    }
    .btn-attack:active {
      transform: scale(0.92);
      box-shadow: 0 0 20px rgba(255,0,127,0.15), inset 0 0 20px rgba(255,0,127,0.08);
    }

    /* ── Damage Floating Text ── */
    .dmg-float {
      position: absolute;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.5rem;
      color: #ff4d4d;
      text-shadow: 0 0 10px #ff007f, 0 0 2px #fff;
      pointer-events: none;
      animation: dmgFloatUp 0.8s ease-out forwards;
      z-index: 15000;
    }
    @keyframes dmgFloatUp {
      0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
      100% { opacity: 0; transform: translateY(-60px) scale(1.5); }
    }

    /* ── BOSS MODE — Performance Optimized Effects ── */
    @keyframes bossEntrance {
      0%   { transform: scale(0.3); opacity: 0; }
      60%  { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); }
    }
    @keyframes bossShake {
      0%, 100% { transform: scale(1) translateX(0); }
      20% { transform: scale(1) translateX(-4px); }
      40% { transform: scale(1) translateX(4px); }
      60% { transform: scale(1) translateX(-2px); }
      80% { transform: scale(1) translateX(2px); }
    }

    .combat-modal-overlay.boss-mode {
      background: rgba(40, 5, 10, 0.95);
    }
    .combat-modal-overlay.boss-mode .combat-modal {
      border: 2px solid rgba(255,0,60,0.8);
      background: linear-gradient(145deg, rgba(60,10,20,0.97), rgba(20,5,30,0.97));
      box-shadow: 0 0 50px rgba(255,0,60,0.3); /* Static shadow, no lag */
    }
    .combat-modal-overlay.boss-mode .combat-title {
      color: #ff3355;
    }
    .combat-modal-overlay.boss-mode .monster-name {
      color: #ff3355;
      font-size: 1.35rem;
      letter-spacing: 1px;
    }
    @keyframes bossJitter {
      0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
      20%  { transform: translate3d(-3px, 2px, 0) scale(1.01) rotate(-1deg); }
      40%  { transform: translate3d(3px, -2px, 0) scale(0.99) rotate(1deg); }
      60%  { transform: translate3d(-2px, -3px, 0) scale(1.01) rotate(-1deg); }
      80%  { transform: translate3d(2px, 3px, 0) scale(0.99) rotate(1deg); }
      100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    }

    .combat-modal-overlay.boss-mode .monster-emoji {
      animation: bossJitter 1.5s ease-in-out infinite;
      will-change: transform;
    }
    .combat-modal-overlay.boss-mode .monster-emoji.boss-enter {
      animation: bossEntrance 0.6s ease-out forwards;
    }
    .combat-modal-overlay.boss-mode .hp-bar-fill {
      background: linear-gradient(90deg, #8b0000, #ff003c, #ff0055);
    }
    .combat-modal-overlay.boss-mode .hp-bar-container {
      border-color: rgba(255,0,60,0.8);
    }
    .combat-modal-overlay.boss-mode .btn-attack {
      border-color: rgba(255,0,60,0.8);
      background: radial-gradient(circle at 40% 35%, rgba(255,0,60,0.3) 0%, rgba(139,0,255,0.1) 50%, rgba(20,5,10,0.7) 100%);
      color: #ff5577;
    }
    .combat-modal-overlay.boss-mode .btn-attack:hover {
      background: rgba(255,0,60,0.2);
    }
    .combat-modal.boss-shake {
      animation: bossShake 0.4s ease-out;
    }



    /* ═══════════════════════════════════════════════════════════
       PHASE 5 CSS — SPA Layout (Modals & Nav)
       ═══════════════════════════════════════════════════════════ */
    .bottom-nav {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 12px;
      background: rgba(255, 255, 255, 0.1);
      /* filter removed */
      
      border: 1px solid rgba(255,255,255,0.25);
      padding: 10px 20px;
      border-radius: 40px;
      z-index: 15000;
      box-shadow: var(--shadow-float), 0 0 20px rgba(72, 255, 204, 0.1);
      max-width: 95vw;
    }
    .nav-btn {
      background: transparent;
      border: none;
      color: var(--text-white);
      font-size: 1.8rem;
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s var(--ease-bounce), background 0.2s, opacity 0.2s;
      position: relative;
      flex-shrink: 0;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0);
    }
    .nav-btn:hover {
      background: rgba(255,255,255,0.15);
    }
    @media (hover: hover) {
      .nav-btn:hover {
        transform: translateY(-5px) scale(1.1);
      }
    }
    .nav-btn:active {
      transform: translateY(6px) scale(0.95) !important;
    }
    .nav-btn::after {
      content: attr(aria-label);
      position: absolute;
      top: -32px;
      left: 50%;
      font-size: 0.75rem;
      font-family: var(--font-body);
      font-weight: 600;
      background: rgba(20,10,40,0.9);
      padding: 4px 10px;
      border-radius: 8px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      transform: translate(-50%, 5px);
      white-space: nowrap;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .nav-btn:hover::after { 
      opacity: 1; 
      transform: translate(-50%, 0);
    }

    /* Unified SPA Modals for Shop & Tech-Tree */
    .spa-modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1500;
      background: rgba(10,5,25,0.7);
      /* filter removed */
      
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease-smooth);
    }
    .spa-modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }
    .spa-modal {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-xl);
      padding: 24px;
      width: 90%;
      max-width: 550px;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: var(--shadow-float);
      transform: scale(0.95) translate3d(0, 10px, 0);
      transition: transform 0.3s var(--ease-bounce), opacity 0.3s var(--ease-smooth);
      position: relative;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .spa-modal-overlay.open .spa-modal {
      transform: scale(1) translate3d(0, 0, 0);
    }
    
    /* Global Close Button for all modals */
    .btn-close-modal {
      /* Safely inside the flex title */
      flex-shrink: 0;
      margin-left: auto; /* Pushes it to the right if space-between isn't enough */
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s;
      z-index: 100;
    }
    .btn-close-modal:hover {
      background: rgba(255, 50, 100, 0.8); /* Better matching deep pink/red color */
      transform: rotate(90deg); /* Only rotate, no scale */
    }

    /* Fallback for modals WITHOUT a title (like Staff Details & Visitor) */
    .spa-modal > .btn-close-modal {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 100;
      margin: 0;
    }
    
    /* Phase 6: Upgrade Timer & Consumables */
    .upgrade-timer-overlay {
      position: absolute;
      inset: 0;
      background: rgba(10,5,25,0.80);
      /* filter removed */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      font-weight: bold;
      color: var(--cyan-glow);
      text-shadow: 0 0 10px rgba(72,255,204,0.8);
      border-radius: inherit;
      z-index: 2;
    }
    .btn-cancel-upgrade {
      margin-top: 6px;
      font-size: 0.75rem;
      background: rgba(255,0,127,0.15);
      border: 1px solid var(--crystal-pink);
      color: var(--text-white);
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-cancel-upgrade:hover {
      background: rgba(255,0,127,0.35);
    }
    .recruit-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
      position: relative;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      transition: all 0.3s var(--ease-smooth);
      overflow: hidden;
    }
    .recruit-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 40%, rgba(72,255,204,0.06) 100%);
      pointer-events: none;
    }
    .recruit-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(72,255,204,0.1);
      border-color: rgba(72,255,204,0.25);
    }
    .recruit-card .rc-icon { font-size: 2.5rem; }
    .recruit-card .rc-name { font-weight: bold; color: var(--text-white); font-size: 0.95rem; }
    .recruit-card .rc-lore { font-size: 0.7rem; color: var(--text-white); opacity: 0.7; line-height: 1.3; }
    .recruit-card .rc-buff { font-size: 0.75rem; color: var(--cyan-glow); }
    .recruit-card .rc-cost { font-size: 0.85rem; color: var(--crystal-pink); font-weight: bold; }
    .recruit-card .btn-recruit {
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, rgba(255, 126, 179, 0.2), rgba(72, 255, 204, 0.2));
      border: 1px solid var(--crystal-pink);
      color: var(--text-white);
      font-weight: bold;
      font-size: 0.8rem;
      cursor: pointer;
      margin-top: auto;
      width: 100%;
      transition: all 0.2s;
    }
    .recruit-card .btn-recruit:hover {
      background: linear-gradient(135deg, rgba(255, 126, 179, 0.4), rgba(72, 255, 204, 0.4));
      border-color: var(--cyan-glow);
      box-shadow: 0 0 10px rgba(72, 255, 204, 0.3);
      transform: translateY(-2px);
    }
    .recruit-card .btn-recruit:hover { transform: scale(1.05); }
    .recruit-card .btn-recruit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
    .recruit-card.recruited { opacity: 0.5; pointer-events: none; }
    .recruit-card.recruited::after {
      content: '✅ HIRED';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%) rotate(-15deg);
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--cyan-glow);
      text-shadow: 0 0 10px black;
      opacity: 0.8;
      z-index: 2;
    }
    .consumable-item {
      background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      transition: all 0.3s var(--ease-smooth);
      position: relative;
      overflow: hidden;
    }
    .consumable-item::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 40%, rgba(72,255,204,0.06) 100%);
      pointer-events: none;
    }
    .consumable-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(72,255,204,0.1);
      border-color: rgba(72,255,204,0.25);
    }
    .btn-use-item {
      background: rgba(72, 255, 204, 0.15);
      border: 1px solid var(--cyan-glow);
      color: var(--text-white);
      padding: 8px 16px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      margin-top: auto;
      transition: all 0.2s;
      width: 100%;
    }
    .btn-use-item:hover { background: var(--cyan-glow); color: #000; box-shadow: 0 0 15px var(--cyan-glow); }
    .active-buff-badge { font-size: 0.8rem; color: var(--crystal-pink); text-transform: uppercase; letter-spacing: 1px; }

    /* Phase 6: Staff Details Modal Specifics */
    .staff-det-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
    }
    .staff-det-emoji {
      font-size: 5rem;
      animation: monsterFloat 3s infinite ease-in-out;
    }
    .staff-det-name {
      font-family: var(--font-display);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-white);
      margin-top: 10px;
    }
    .staff-det-rarity {
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.9rem;
      margin-top: 8px;
    }
    .staff-det-buff {
      background: rgba(72,255,204,0.1);
      border: 1px solid rgba(72,255,204,0.3);
      padding: 12px;
      border-radius: var(--radius-md);
      text-align: center;
      color: var(--cyan-glow);
      font-weight: 600;
      margin-bottom: 16px;
    }
    .staff-det-lore {
      font-style: italic;
      color: var(--text-light);
      text-align: center;
      line-height: 1.5;
    }
  
    @keyframes epicGachaCharge {
      0% { 
        transform: scale(0.1); opacity: 0; background: var(--cyan-glow);
        box-shadow: 
          -200px -150px 10px var(--cyan-glow),
          200px -150px 15px var(--crystal-pink),
          -150px 200px 10px white,
          150px 200px 12px var(--cyan-glow),
          0px -250px 8px var(--crystal-pink),
          0px 250px 10px var(--cyan-glow);
      }
      20% { opacity: 1; }
      75% { 
        transform: scale(1.2) translate(2px, -2px); opacity: 1; background: white;
        box-shadow: 
          0 0 60px var(--cyan-glow),
          0 0 60px var(--crystal-pink),
          0 0 60px white,
          0 0 100px var(--cyan-glow),
          0 0 80px var(--crystal-pink),
          0 0 80px var(--cyan-glow);
      }
      80% { transform: scale(1.2) translate(-4px, 4px); }
      85% { transform: scale(1.2) translate(4px, 4px); }
      90% { transform: scale(1.2) translate(-4px, -4px); }
      95% { transform: scale(20); opacity: 1; box-shadow: 0 0 400px white; background: white; }
      100% { transform: scale(30); opacity: 0; box-shadow: 0 0 800px white; background: white; }
    }
    @keyframes epicGachaFlash {
      0% { background: rgba(16, 16, 32, 0.95); box-shadow: 0 0 0px transparent; }
      80% { background: rgba(30, 10, 50, 0.95); box-shadow: inset 0 0 100px var(--cyan-glow); }
      95% { background: rgba(255, 255, 255, 1); box-shadow: inset 0 0 300px white; }
      100% { background: rgba(16, 16, 32, 0.95); box-shadow: 0 0 0px transparent; }
    }
    .gacha-animating {
      animation: epicGachaFlash 2.5s ease-in forwards !important;
    }
    .gacha-animating * {
      pointer-events: none;
    }
    .gacha-energy-orb {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 40px auto;
      animation: epicGachaCharge 2.5s linear forwards;
    }
    .gacha-summon-text {
      margin-top:20px; 
      font-weight:900; 
      color:white; 
      font-size:1.5rem; 
      letter-spacing:8px; 
      animation: pulse 0.3s infinite alternate;
      text-shadow: 0 0 10px var(--cyan-glow);
    }

  
    .magic-particles-container {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    .magic-particle {
      position: absolute;
      bottom: -50px;
      border-radius: 50%;
      opacity: 0;
      animation: floatMagic var(--d) ease-in-out infinite;
    }
    @keyframes floatMagic {
      0% { transform: translateY(0) scale(0.2) translateX(0); opacity: 0; }
      10% { opacity: var(--o); }
      90% { opacity: var(--o); }
      100% { transform: translateY(-110vh) scale(1.5) translateX(var(--x-end)); opacity: 0; }
    }

  
    .btn-gacha-lore {
      position: relative;
      overflow: hidden;
      margin-top: 12px;
      font-size: 0.95rem;
      font-weight: bold;
      letter-spacing: 0.5px;
      padding: 12px 15px;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(255,0,127,0.15) 0%, rgba(72,255,204,0.1) 100%);
      color: #ffffff;
      border: 1px solid rgba(255, 126, 179, 0.5);
      box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,0,127,0.1);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: 100%;
      text-shadow: 0 0 8px rgba(255,255,255,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
    .btn-gacha-lore::before {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transform: skewX(-20deg);
      transition: all 0.6s ease;
    }
    .btn-gacha-lore:hover {
      background: linear-gradient(135deg, rgba(255,0,127,0.3) 0%, rgba(72,255,204,0.2) 100%);
      border-color: var(--crystal-pink);
      box-shadow: 0 0 25px rgba(255, 126, 179, 0.4), inset 0 0 15px rgba(72,255,204,0.2);
      transform: translateY(-2px);
    }
    .btn-gacha-lore:hover::before {
      left: 150%;
    }
    .btn-gacha-lore:active {
      transform: translateY(1px);
    }

  
    /* ── SPA OVERLAYS ── */
    .spa-modal-overlay, .gacha-modal-overlay, .combat-modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(10, 5, 20, 0.85);
      /* filter removed */
      
      z-index: 10000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .spa-modal-overlay.open, .gacha-modal-overlay.open, .combat-modal-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

  
    .btn-exchange {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.2s ease;
      color: white;
    }
    .btn-exchange:hover {
      background: rgba(255,255,255,0.15);
      transform: scale(1.02);
      border-color: var(--gold);
      box-shadow: 0 0 10px rgba(255,215,0,0.3);
    }
    .btn-exchange:active { transform: scale(0.98); }
    
    #btn-add-gold:hover { transform:scale(1.2); background:rgba(255,215,0,0.5) !important; color:var(--gold); }
    #btn-add-gems:hover { transform:scale(1.2); background:rgba(72,255,204,0.5) !important; color:var(--cyan-glow); }

    #welcome-modal {

      z-index: 99999;
      display: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      text-align: center;
    }
    #welcome-modal.open {
      display: flex !important;
    }
    .welcome-container {
      max-width: 650px;
      padding: 35px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      background: rgba(15, 8, 25, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: var(--radius-lg);
      /* filter removed */
      
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
      margin: 0 20px;
    }
    #story-content {
      font-size: 1.15rem;
      line-height: 1.6;
      white-space: pre-wrap;
      color: var(--text-white);
      text-shadow: 0 0 10px rgba(72, 255, 204, 0.3);
    }
    .click-prompt {
      font-size: 0.9rem;
      color: var(--crystal-pink);
      animation: blink 1.5s infinite;
      margin-top: 10px;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    
    /* --- SULTAN ANIMATIONS --- */
    @keyframes pulseAuraSSR {
      0% { box-shadow: 0 0 20px var(--rarity-ssr), inset 0 0 10px rgba(255,126,179,0.2); filter: brightness(1); }
      50% { box-shadow: 0 0 45px var(--rarity-ssr), inset 0 0 25px rgba(255,126,179,0.6); filter: brightness(1.15); }
      100% { box-shadow: 0 0 20px var(--rarity-ssr), inset 0 0 10px rgba(255,126,179,0.2); filter: brightness(1); }
    }
    @keyframes pulseAuraUR {
      0% { box-shadow: 0 0 30px var(--rarity-ur), inset 0 0 20px rgba(251,191,36,0.3); filter: brightness(1) hue-rotate(0deg); }
      50% { box-shadow: 0 0 60px var(--rarity-ur), inset 0 0 40px rgba(251,191,36,0.7); filter: brightness(1.25) hue-rotate(20deg); }
      100% { box-shadow: 0 0 30px var(--rarity-ur), inset 0 0 20px rgba(251,191,36,0.3); filter: brightness(1) hue-rotate(0deg); }
    }
    @keyframes floatCardUR {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    @keyframes floatCardSSR {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-6px); }
      100% { transform: translateY(0px); }
    }

    .tcg-card {
      width: 200px;
      height: 280px;
      border-radius: var(--radius-md);
      background-size: cover;
      background-position: center;
      position: relative;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
      border: 3px solid rgba(255,255,255,0.2);
      overflow: hidden;
      margin: 0 auto 10px auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      animation: cardReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .tcg-card.no-anim {
      animation: none !important;
      transform: scale(1) translateY(0) rotateX(0deg) !important;
    }
    .tcg-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 40%, transparent 100%);
      pointer-events: none;
    }
    .tcg-card.rN { border-color: var(--rarity-n); box-shadow: 0 0 15px var(--rarity-n); }
    .tcg-card.rR { border-color: var(--rarity-r); box-shadow: 0 0 20px var(--rarity-r); }
    .tcg-card.rSR { border-color: var(--rarity-sr); box-shadow: 0 0 25px var(--rarity-sr); }
    .tcg-card.rSSR { border-color: var(--rarity-ssr); animation: pulseAuraSSR 3s infinite, floatCardSSR 4s ease-in-out infinite; }
    .tcg-card.rUR { border-color: var(--rarity-ur); animation: pulseAuraUR 2.5s infinite, floatCardUR 3.5s ease-in-out infinite; }
    
    .tcg-card-content {
      position: relative;
      z-index: 2;
      padding: 10px;
      text-align: center;
    }
    .tcg-card-rarity {
      font-size: 1.5rem;
      font-weight: 900;
      text-shadow: 0 2px 4px rgba(0,0,0,0.8);
      margin-bottom: 2px;
    }
    .tcg-card-rarity.rN { color: var(--rarity-n); }
    .tcg-card-rarity.rR { color: var(--rarity-r); }
    .tcg-card-rarity.rSR { color: var(--rarity-sr); text-shadow: 0 0 5px var(--rarity-sr), 0 2px 4px rgba(0,0,0,0.8); }
    .tcg-card-rarity.rSSR { color: var(--rarity-ssr); text-shadow: 0 0 10px var(--rarity-ssr), 0 2px 4px rgba(0,0,0,0.8); }
    .tcg-card-rarity.rUR { color: var(--rarity-ur); text-shadow: 0 0 15px var(--rarity-ur), 0 2px 4px rgba(0,0,0,0.8); }
    .tcg-card-name {
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--text-white);
      text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    }
    
    @keyframes cardReveal {
      0% { transform: scale(0.5) translateY(50px) rotateX(45deg); opacity: 0; }
      100% { transform: scale(1) translateY(0) rotateX(0deg); opacity: 1; }
    }

    /* GLOBAL MODAL SPACING (Ensures all modals avoid bottom nav on all screen sizes) */
    .spa-modal-overlay, .gacha-modal-overlay, .combat-modal-overlay {
      padding-bottom: 0 !important;
      will-change: opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      transform: translateZ(0); /* Force hardware layer */
    }
    .spa-modal, .gacha-modal, .combat-modal {
      margin-bottom: 85px !important;
      max-height: calc(100vh - 130px) !important;
      overflow-y: auto !important; /* Ensures all modals can scroll */
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Sticky Titles */
    .panel-title, .gacha-modal-title, .combat-title {
      position: sticky;
      z-index: 90;
      background: var(--glass-bg);
      /* filter removed */
      
      border-radius: var(--radius-lg);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      border: 1px solid var(--glass-border);
      
      /* Flex layout for internal elements (icon, text, close button) */
      align-self: stretch; /* Forces it to stretch even in centered containers like Dashboard */
      display: flex;
      align-items: center;
      justify-content: space-between; /* Pushes the close button to the far right */
    }
    
    /* Normal modals get a slight gap from the top */
    .panel-title {
      top: -12px;
      padding: 16px 16px 16px 16px;
      margin: -12px -16px 16px -16px;
    }
    
    /* Gacha & Combat modals stay flush with the top */
    .gacha-modal-title, .combat-title {
      top: -24px;
      padding: 24px 16px 16px 16px;
      margin: -24px -16px 16px -16px;
    }
    .settings-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: 16px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 0 20px rgba(255,255,255,0.02);
    }
    .settings-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    }
    .settings-card.danger-zone {
      background: linear-gradient(145deg, rgba(255,50,50,0.1), rgba(0,0,0,0.2));
      border-color: rgba(255,50,50,0.3);
    }
    .settings-card.danger-zone::before {
      background: linear-gradient(90deg, transparent, rgba(255,50,50,0.5), transparent);
    }
    .btn-lang {
      flex: 1;
      padding: 12px 10px;
      font-size: 1.05rem;
      border-radius: var(--radius-md);
      cursor: pointer;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--text-white);
      transition: all 0.3s var(--ease-bounce);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .btn-lang:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }
    .btn-lang.active-id { border-color: #4ade80; background: rgba(74,222,128,0.1); box-shadow: 0 0 15px rgba(74,222,128,0.2); }
    .btn-lang.active-en { border-color: #3b82f6; background: rgba(59,130,246,0.1); box-shadow: 0 0 15px rgba(59,130,246,0.2); }
    
    .setting-slider-row {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(0,0,0,0.2);
      padding: 10px 14px;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255,255,255,0.05);
    }
    .setting-icon { font-size: 1.2rem; width: 30px; text-align: center; }
    .setting-val { font-size: 0.8rem; font-weight: bold; width: 40px; text-align: right; }
    
    .settings-btn-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }
    .btn-setting-action {
      padding: 10px 0;
      font-size: 0.75rem;
      font-weight: 600;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.2s var(--ease-smooth);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .btn-setting-action:hover { transform: translateY(-2px); }
    .btn-setting-action:active { transform: scale(0.95); }
    .btn-sa-bgm { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.4); color: #4ade80; }
    .btn-sa-bgm:hover { background: rgba(74,222,128,0.2); box-shadow: 0 0 10px rgba(74,222,128,0.2); }
    .btn-sa-sfx { background: rgba(255,126,179,0.1); border: 1px solid rgba(255,126,179,0.4); color: var(--crystal-pink); }
    .btn-sa-sfx:hover { background: rgba(255,126,179,0.2); box-shadow: 0 0 10px rgba(255,126,179,0.2); }
    .btn-sa-fs { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.3); color: white; }
    .btn-sa-fs:hover { background: rgba(255,255,255,0.15); box-shadow: 0 0 10px rgba(255,255,255,0.2); }
/* Premium Mailbox Pulse & Glow */
@keyframes premiumMailboxPulse {
  0% { box-shadow: 0 0 40px rgba(0,255,204,0.3), inset 0 0 60px rgba(0,255,204,0.05); border-color: rgba(0,255,204, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 80px rgba(0,255,204,0.8), inset 0 0 100px rgba(0,255,204,0.2); border-color: rgba(0,255,204, 1); transform: scale(1.02); }
  100% { box-shadow: 0 0 40px rgba(0,255,204,0.3), inset 0 0 60px rgba(0,255,204,0.05); border-color: rgba(0,255,204, 0.5); transform: scale(1); }
}
.mailbox-premium-glow {
  animation: premiumMailboxPulse 2s infinite ease-in-out !important;
  position: relative;
}

@keyframes pulseIconGlow {
  0% { transform: scale(1); text-shadow: 0 0 10px rgba(0,255,204,0.4); }
  100% { transform: scale(1.15); text-shadow: 0 0 30px rgba(0,255,204,1); }
}

@keyframes throbIcon {
  0% { transform: scale(1); text-shadow: 0 0 10px rgba(0,255,204,0.4); }
  100% { transform: scale(1.25); text-shadow: 0 0 30px rgba(0,255,204,1); }
}
@keyframes throbGold {
  0% { transform: scale(1); text-shadow: 0 0 10px rgba(255,215,0,0.4); }
  100% { transform: scale(1.25); text-shadow: 0 0 30px rgba(255,215,0,1); }
}

/* ======================================================= */
/* BROADCAST OVERLAY CSS (Dipindahkan dari overlay_bc.php) */
/* ======================================================= */
#nax-vip-overlay {
    position: fixed; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%) translateY(150px); 
    background: linear-gradient(135deg, #1a0b2e 0%, #050508 100%);
    border: 2px solid transparent; border-radius: 15px; padding: 10px 15px;
    box-shadow: 0 -5px 20px rgba(255, 0, 127, 0.4), 0 0 15px rgba(0, 210, 255, 0.2);
    z-index: 9999999; display: flex; align-items: center; gap: 12px;
    color: #fff; font-family: sans-serif; 
    width: 90vw; max-width: 340px; 
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    opacity: 0; pointer-events: none;
    
    background-image: linear-gradient(#1a0b2e, #1a0b2e), linear-gradient(90deg, #ffd700, #ff007f, #00d2ff, #ffd700);
    background-origin: padding-box, border-box; background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    animation: naxOverlayFlow 3s linear infinite;
}

@keyframes naxOverlayFlow {
    0% { background-position: 0% 0%, 200% 0%; }
    100% { background-position: 0% 0%, -200% 0%; }
}

#nax-vip-overlay.show-overlay { 
    transform: translateX(-50%) translateY(0); 
    opacity: 1; 
    pointer-events: auto; 
}

.vip-avatar-box { position: relative; width: 45px; height: 45px; flex-shrink: 0; }

.vip-avatar-img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    background: #111;
}

.vip-crown-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    font-size: 16px; filter: drop-shadow(0 2px 4px #ff007f);
}

.vip-broad-text-area { display: flex; flex-direction: column; overflow: hidden; flex: 1; text-align: left; }

#vip-broad-user { font-size: 14px; font-weight: 900; line-height: 1.2; }
#vip-broad-tier { font-size: 11px; color: #d1d1e0; margin-top: 2px; line-height: 1.3; }

#vip-broad-msg {
    font-size: 11px; font-style: italic; color: #ffd700; background: rgba(255,215,0,0.1); 
    padding: 4px 8px; border-radius: 6px; margin-top: 4px; border-left: 2px solid #ffd700; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    display: none; width: 100%; box-sizing: border-box; line-height: 1.2;
}

@media (min-width: 768px) {
    #nax-vip-overlay { max-width: 420px; padding: 15px 20px; border-radius: 20px; gap: 15px; bottom: 40px; }
    .vip-avatar-box { width: 55px; height: 55px; }
    .vip-crown-badge { font-size: 20px; top: -10px; }
    #vip-broad-user { font-size: 16px; }
    #vip-broad-tier { font-size: 12px; }
    #vip-broad-msg { font-size: 12px; padding: 6px 10px; margin-top: 6px; }
}

#nax-vip-close {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    z-index: 99999999;
    transition: color 0.3s ease, transform 0.3s ease;
    line-height: 1;
}
#nax-vip-close:hover {
    color: #ff007f;
    transform: scale(1.2);
}