@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Rubik:wght@300;400;500;700&display=swap");
:root {
  --bg-color: #03050a;
  --surface-color: rgba(15, 21, 38, 0.8);
  --surface-hover: rgba(22, 30, 50, 0.9);
  --surface-solid: #111827;
  --border-color: rgba(147, 197, 253, 0.15); /* Light blue border */
  --border-glow: rgba(147, 197, 253, 0.3);
  --accent-purple: rgba(139, 92, 246, 0.4);
  --primary-gold: #fbbf24;
  --gold-glow: rgba(251, 191, 36, 0.6);
  --gold-light: #fde68a;
  --gold-dark: #b45309;
  --gold-gradient: linear-gradient(180deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
  --money-green: #10b981;
  --green-glow: rgba(16, 185, 129, 0.4);
  --green-light: #34d399;
  --danger-red: #ef4444;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --font-heading: 'Rubik', 'Outfit', sans-serif;
  --font-body: 'Rubik', 'Outfit', sans-serif;
  --transition-speed: 0.25s;
  --transition-prop: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed), opacity var(--transition-speed);
  --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --glass-blur: blur(12px);
}

html {
  scrollbar-gutter: stable;
}

html[dir=rtl] body {
  direction: rtl;
  font-family: "Heebo", "Rubik", var(--font-body), sans-serif;
}

/* Reset and Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* WCAG 2.4.7 — Focus Visible: visible focus indicators for keyboard users */
:focus {
  outline: none; /* remove browser default — we handle it with focus-visible */
}

:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Rounded elements */
.sound-toggle-btn:focus-visible,
.bottom-nav-btn:focus-visible,
.lang-option-card:focus-visible,
.fortune-close-btn-styled:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 3px;
  border-radius: 50px;
}

/* Tab buttons */
.tab-btn:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Buy buttons */
.buy-btn:focus-visible,
.collect-vault-btn:focus-visible,
.modal-close-btn:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 2px;
  border-radius: 10px;
}

/* Role="button" divs */
[role=button]:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 3px;
  border-radius: 8px;
}

/* Slider */
.adv-slider:focus-visible {
  outline: 3px solid #dfab29;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  width: auto;
  height: auto;
  overflow: visible;
  background: #dfab29;
  color: #000;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  z-index: 9999;
  font-weight: 700;
  font-size: 0.9rem;
}

body {
  background-color: var(--bg-color);
  background-image: radial-gradient(at 0% 0%, var(--accent-purple) 0px, transparent 60%), radial-gradient(at 100% 100%, var(--gold-glow) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(15, 21, 38, 0.9) 0px, transparent 100%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-gold);
}

/* App Layout */
.app-container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-x: hidden;
}

/* Juiciness - Button Squish Animation */
.buy-btn, .claim-reward-btn, .claim-achievement-btn, .tab-btn, .collect-vault-btn, .upg-v2-buy-btn {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease-out, filter 0.15s ease-out, background 0.2s ease, border-color 0.2s ease !important;
}

.buy-btn:not(:disabled):active,
.claim-reward-btn:active,
.claim-achievement-btn:active,
.tab-btn:not(.active):active,
.collect-vault-btn:active,
.upg-v2-buy-btn:not(:disabled):active {
  transform: scale(0.92) !important;
  filter: brightness(0.9);
}

/* Smart Notifications & Highlights */
.notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--danger-red);
  border-radius: 50%;
  border: 2px solid var(--surface-color);
  box-shadow: 0 0 8px var(--danger-red);
  animation: pulse-dot 1.5s infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 12px var(--danger-red);
  }
  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}
.smart-recommendation-glow {
  animation: smart-card-pulse 2s infinite alternate !important;
}

@keyframes smart-card-pulse {
  0% {
    box-shadow: 0 0 5px 2px rgba(251, 191, 36, 0.3);
    border-color: rgba(251, 191, 36, 0.5);
  }
  100% {
    box-shadow: 0 0 20px 5px rgba(251, 191, 36, 0.8);
    border-color: rgb(251, 191, 36);
  }
}
.recommended-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(90deg, #dfab29, #fceb9c);
  color: #111827;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(223, 171, 41, 0.5);
  z-index: 10;
  pointer-events: none;
  animation: badge-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

[dir=ltr] .recommended-badge {
  right: auto;
  left: 20px;
}

@keyframes badge-pop {
  0% {
    transform: scale(0) translateY(10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.idle-zzz {
  position: absolute;
  top: -10px;
  right: -10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  font-weight: bold;
  animation: float-zzz 2s ease-in-out infinite;
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes float-zzz {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(-15px) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px) scale(1.5);
    opacity: 0;
  }
}
/* Header Area */
header {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--card-shadow);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-icon {
  font-size: 2.5rem; /* Make icon larger too! */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 25px rgba(223, 171, 41, 0.95)) brightness(1.3);
}

@media (hover: hover) {
  .brand-icon {
    animation: float 3s ease-in-out infinite;
  }
}
.brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-title h1 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(to bottom, #ffffff 0%, #fff0b3 25%, #f5d070 50%, #dfaa28 75%, #a67c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(245, 208, 112, 0.65));
}

.brand-title p {
  font-size: 0.85rem;
  color: #fff0b3;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(223, 171, 41, 0.9), 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
}

.stats-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stats-row {
  display: flex;
  gap: 1.5rem;
}

body {
  background-color: var(--bg-color);
  background-image: radial-gradient(at 0% 0%, rgba(223, 171, 41, 0.05) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%), radial-gradient(at 50% 50%, rgba(20, 24, 36, 0.3) 0px, transparent 100%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-gold);
}

/* App Layout */
.app-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Juiciness - Button Squish Animation */
.btn-squish {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease-out, filter 0.15s ease-out !important;
}

.btn-squish:active {
  transform: scale(0.92) !important;
  filter: brightness(0.9);
}

/* Header Area */
header {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--card-shadow);
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-icon {
  font-size: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  filter: drop-shadow(0 2px 8px var(--gold-glow));
}

@media (hover: hover) {
  .brand-icon {
    animation: float 3s ease-in-out infinite;
  }
}
.brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-title h1 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(to left, #fff, var(--text-muted));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-title p {
  font-size: 0.8rem;
  color: var(--primary-gold);
  font-weight: 500;
}

.stats-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.stats-row {
  display: flex;
  gap: 1.5rem;
}

.header-buttons-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stat-box {
  background: linear-gradient(180deg, rgba(30, 35, 45, 0.6) 0%, rgba(15, 20, 25, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0.6rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 150px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
}

.stat-box.cash-stat::before {
  background: linear-gradient(180deg, var(--money-green), #059669);
}

.stat-box.shares-stat::before {
  background: linear-gradient(180deg, var(--primary-gold), var(--gold-dark));
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  color: var(--text-main);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.stat-sub {
  font-size: 0.7rem;
  color: var(--money-green);
  margin-top: 0.15rem;
  font-weight: 600;
}

.stat-box:hover {
  transform: translateY(-3px) scale(1.02);
}

.prestige-preview {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 0.35rem;
  font-weight: 500;
  line-height: 1.25;
  max-width: 180px;
  opacity: 0.85;
}

.sound-toggle-btn {
  background: linear-gradient(145deg, #1e243b, #0f1322);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-prop);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.05);
  font-size: 1.15rem;
  position: relative;
}

@media (min-width: 650px) {
  .sound-toggle-btn {
    width: 58px;
    height: 58px;
    font-size: 1.55rem;
  }
}
.sound-toggle-btn span, .sound-toggle-btn {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.sound-toggle-btn.fortune-wheel-header-btn {
  border: 2px solid rgba(251, 191, 36, 0.8);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.1);
}

.sound-toggle-btn:hover {
  border-color: var(--primary-gold);
  color: var(--primary-gold);
  box-shadow: 0 0 10px var(--border-glow);
}

/* Main Display Panels */
.main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
  flex: 1;
}

@media (max-width: 900px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
  .control-panel {
    max-height: none;
    overflow: visible;
  }
  .tab-content {
    overflow-y: visible;
    max-height: none;
  }
  .tab-pane {
    position: relative;
    height: auto;
    overflow-y: visible;
  }
}
/* Bank Floor Panel */
.bank-floor {
  min-width: 0;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.panel-title {
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-badge {
  background: var(--gold-glow);
  border: 1px solid var(--primary-gold);
  color: var(--gold-light);
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 20px;
  font-weight: 500;
}

/* Visual Floor Map Simulation */
.floor-map {
  background: radial-gradient(circle at center, #111522 0%, #06080d 100%);
  background-image: radial-gradient(circle at 50% 50%, rgba(223, 171, 41, 0.08), transparent 75%), linear-gradient(135deg, rgba(223, 171, 41, 0.02) 25%, transparent 25%), linear-gradient(225deg, rgba(223, 171, 41, 0.02) 25%, transparent 25%), linear-gradient(45deg, rgba(223, 171, 41, 0.02) 25%, transparent 25%), linear-gradient(315deg, rgba(223, 171, 41, 0.02) 25%, transparent 25%);
  background-size: 100% 100%, 60px 60px, 60px 60px, 60px 60px, 60px 60px;
  border: 2px solid #dfab29;
  border-radius: 20px;
  flex: 1;
  min-height: 550px;
  position: relative;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.85), var(--card-shadow);
}

/* Customer Queue & Advertising Group (Clean, Breathable, Ultra-Refined Luxury) */
.queue-wrapper.queue-premium-design {
  background: linear-gradient(180deg, #131a29 0%, #090d15 100%);
  border: 1.5px solid rgba(223, 171, 41, 0.35);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(223, 171, 41, 0.25);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.queue-main-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
}

.queue-progress-bar {
  width: 100%;
  height: 10px;
  background: #141b28;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85);
}

.queue-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4ade80 0%, #a3e635 35%, #facc15 70%, #f87171 100%);
  border-radius: 6px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(163, 230, 53, 0.6);
}

.queue-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.queue-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.queue-status-pill.ok-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #10b981;
}
.queue-status-pill.alert-pill {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #60a5fa;
}
.queue-status-pill.warning-pill {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.queue-status-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.queue-status-text {
  line-height: 1.2;
}

/* Gold Count Badge */
.queue-capacity-badge-container {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.queue-capacity-glow-ring {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.25) 0%, rgba(223, 171, 41, 0.05) 65%, transparent 80%);
  border: 1.5px solid rgba(223, 171, 41, 0.55);
  box-shadow: 0 0 16px rgba(223, 171, 41, 0.35), inset 0 0 10px rgba(223, 171, 41, 0.2);
}

.queue-capacity-label {
  font-family: "Outfit", sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fff8cc 0%, #ffd700 45%, #e6a817 75%, #a67c1e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.9));
  z-index: 2;
  position: relative;
  line-height: 1;
  letter-spacing: -0.5px;
}

/* Advertising Control (Clean, Spacious & Beautiful) */
.advertising-control {
  background: linear-gradient(180deg, #131a29 0%, #090d15 100%);
  border: 1.5px solid rgba(223, 171, 41, 0.35);
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(223, 171, 41, 0.2);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.adv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.adv-title-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.adv-title-icon {
  font-size: 1rem;
  line-height: 1;
}

.adv-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.adv-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #4ade80;
}
.adv-value-pill.off {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}
.adv-value-pill.suspended {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.adv-value-icon {
  font-size: 0.8rem;
  line-height: 1;
}

.adv-value {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
}

.adv-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
}

.adv-limit {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
}

.adv-slider-track-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.adv-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #4ade80 0%, #4ade80 var(--slider-pct, 0%), rgba(255, 255, 255, 0.12) var(--slider-pct, 0%), rgba(255, 255, 255, 0.12) 100%);
  outline: none;
  cursor: pointer;
  margin: 0;
}
.adv-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6ad 0%, #dfab29 45%, #966f0a 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 10px rgba(223, 171, 41, 0.7);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.adv-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 215, 0, 0.95);
}
.adv-slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
  cursor: grabbing;
}
.adv-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6ad 0%, #dfab29 45%, #966f0a 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 10px rgba(223, 171, 41, 0.7);
  cursor: grab;
}

/* Removed avatar queue styles per user request */
.customer-line {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0.1rem 0;
  min-width: 100%;
  width: 100%;
  flex: 1;
  overflow: hidden; /* Hide overflow to prevent browser scroll adjustment loops in RTL */
  align-items: center;
  justify-content: flex-start;
}

.customer-avatar, .visual-client-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: walk-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  position: relative;
  flex-shrink: 0;
  border: 2px solid rgba(223, 171, 41, 0.6);
  box-shadow: 0 0 12px rgba(223, 171, 41, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3) center top/cover no-repeat;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.customer-avatar + .customer-avatar,
.visual-client-icon + .visual-client-icon,
.customer-avatar + .visual-client-icon,
.visual-client-icon + .customer-avatar {
  margin-right: -14px;
}

.customer-avatar:hover, .visual-client-icon:hover {
  transform: scale(1.15) translateY(-2px);
  border-color: rgba(223, 171, 41, 0.95);
  box-shadow: 0 6px 15px rgba(223, 171, 41, 0.35);
  z-index: 10;
}

/* Tellers/Counters Layout - Horizontal Counter Line */
.tellers-zone {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* Wrap tellers if there are many of them or screen is small */
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.teller-counter {
  background: radial-gradient(circle at top, rgba(28, 38, 57, 0.98) 0%, rgb(10, 14, 23) 100%);
  border: 1px solid rgba(223, 171, 41, 0.25);
  border-radius: 16px;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 220px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  min-height: 240px;
}

/* Up to 4 Tellers per row on desktop — max 2 rows */
@media (min-width: 769px) {
  .tellers-zone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
  }
  .teller-counter {
    min-width: 0;
    flex: 1 1 calc(25% - 0.75rem);
    max-width: calc(25% - 0.75rem);
  }
}
.teller-counter.active {
  border-color: rgba(223, 171, 41, 0.45);
  box-shadow: 0 20px 45px rgba(223, 171, 41, 0.15), 0 0 15px rgba(223, 171, 41, 0.05);
}

.teller-counter.active.processing {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.18), 0 0 25px rgba(16, 185, 129, 0.1);
}

/* Glass Showcase 3D Simulation Container */
.glass-showcase {
  width: 100%;
  height: 240px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(223, 171, 41, 0.15);
  z-index: 1;
}

.teller-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Glass Reflection */
.glass-showcase::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-60%);
  pointer-events: none;
  animation: glass-shine-glow 8s infinite ease-in-out;
}

@keyframes glass-shine-glow {
  0% {
    transform: translateX(-60%);
  }
  25% {
    transform: translateX(60%);
  }
  100% {
    transform: translateX(60%);
  }
}
/* Top Glow Cylindrical Light */
.glass-showcase::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 15px;
  background: radial-gradient(ellipse at top, rgba(223, 171, 41, 0.35) 0%, rgba(223, 171, 41, 0) 70%);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  z-index: 2;
  transition: background 0.3s ease;
}

.teller-counter.active.processing .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.55) 0%, rgba(16, 185, 129, 0) 70%);
}

/* 3D Floating Client in Showcase */
.client-slot-3d {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #dfab29 0%, #b8860b 100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border: 1.5px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 8px rgba(223, 171, 41, 0.4);
  font-size: 1.15rem;
  z-index: 5;
  animation: client-float 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes client-float {
  0% {
    transform: translateY(0) scale(1);
  }
  100% {
    transform: translateY(-5px) scale(1.04);
  }
}
/* Brushed Gold Plaque */
.gold-plaque {
  background: linear-gradient(180deg, #1d1b14 0%, #0d0c09 100%);
  border-top: 1px solid rgba(223, 171, 41, 0.35);
  padding: 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 2;
}

/* Plaque corner rivets */
.gold-plaque::before, .gold-plaque::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(223, 171, 41, 0.65);
  border-radius: 50%;
  box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.gold-plaque::before {
  top: 4px;
  left: 4px;
}

.gold-plaque::after {
  top: 4px;
  right: 4px;
}

.plaque-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.plaque-title {
  color: #e5c060;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.plaque-level {
  color: #dfab29;
  font-weight: 700;
  font-size: 0.9rem;
  background: rgba(223, 171, 41, 0.08);
  padding: 0px 4px;
  border-radius: 3px;
  border: 0.5px solid rgba(223, 171, 41, 0.25);
  font-family: "Outfit", sans-serif;
}

.plaque-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plaque-cash {
  font-size: 1.2rem;
  font-weight: 800;
  color: #dfab29;
  font-family: "Outfit", sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.teller-full-alert {
  color: #ff4444;
  font-weight: 800;
  font-size: 1.1rem;
  animation: alert-blink 1s infinite;
}

@keyframes alert-blink {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.6);
  }
  50% {
    opacity: 0.6;
    text-shadow: none;
  }
}
.plaque-collect-btn {
  background: linear-gradient(180deg, #dfab29 0%, #b8860b 100%);
  color: #000 !important;
  border: none;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  box-shadow: 0 1.5px 4px rgba(184, 134, 11, 0.4);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  min-height: 44px;
}

.plaque-collect-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-0.5px);
  box-shadow: 0 3px 8px rgba(184, 134, 11, 0.5);
}

.plaque-collect-btn:active {
  transform: translateY(0);
}

.plaque-collect-btn.disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #555 !important;
  border: 0.5px solid rgba(255, 255, 255, 0.03);
  box-shadow: none;
  pointer-events: none;
}

.plaque-progress-container {
  height: 3px;
  background: rgba(255, 255, 255, 0.03);
  width: 100%;
  border-radius: 1.5px;
  overflow: hidden;
  position: relative;
  margin-top: 1px;
}

.plaque-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #dfab29 0%, #ffd700 100%);
  box-shadow: 0 0 6px rgba(223, 171, 41, 0.5);
  transition: width 0.05s linear;
}

.teller-counter.locked {
  opacity: 0.45;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 155px;
  border: 2px dashed rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
}

.teller-counter.locked:hover {
  opacity: 0.85;
  background: rgba(223, 171, 41, 0.02);
  border-color: var(--primary-gold);
  box-shadow: 0 0 20px rgba(223, 171, 41, 0.15);
}

.lock-info {
  text-align: center;
}

.lock-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.lock-cost {
  font-size: 0.92rem;
  color: var(--primary-gold);
  font-weight: 600;
  font-family: "Outfit", sans-serif;
}

.teller-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 500;
}

.teller-name {
  color: var(--text-main);
}

.teller-level {
  color: var(--primary-gold);
}

.progress-bar-container {
  height: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--money-green), var(--green-light));
  border-radius: 4px;
  transition: width 0.05s linear;
}

.teller-desk-visual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
}

.cash-pile {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  color: var(--green-light);
  font-family: "Outfit", sans-serif;
}

.cash-pile-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.collect-btn {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--green-light);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-prop);
}

.collect-btn:hover {
  background: var(--money-green);
  color: #0c0f1d !important;
  border-color: var(--money-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--green-glow);
}

.collect-btn:active {
  transform: translateY(0);
}

.collect-btn.disabled {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

/* Guard Stations Hub (Dedicated Stations Row - Fixed Level Pill & No Clipping) */
.guard-stations-hub {
  display: flex;
  flex-direction: row;
  gap: 0.45rem;
  width: 100%;
  margin: 0.45rem 0 0.65rem 0;
  padding: 0.4rem 0.5rem;
  background: linear-gradient(180deg, #162035 0%, #0d1527 100%);
  border: 1.5px solid rgba(223, 171, 41, 0.4);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(223, 171, 41, 0.3);
  z-index: 5;
  position: relative;
  box-sizing: border-box;
}

.guard-station-bay {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.35rem;
  border-radius: 10px;
  min-height: 64px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}
.guard-station-bay:active {
  transform: scale(0.96);
}
.guard-station-bay.active {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1.5px solid #dfab29;
  box-shadow: 0 0 12px rgba(223, 171, 41, 0.2);
}
.guard-station-bay.active:hover {
  border-color: #ffd700;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.35);
}
.guard-station-bay.locked {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.45) 0%, rgba(15, 23, 42, 0.65) 100%);
  border: 1px dashed rgba(223, 171, 41, 0.35);
  opacity: 0.85;
}
.guard-station-bay.locked:hover {
  border-color: #dfab29;
  border-style: solid;
  box-shadow: 0 0 12px rgba(223, 171, 41, 0.3);
}

.guard-bay-slot {
  width: 24px;
  height: 48px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guard-bay-slot-base {
  width: 26px;
  height: 7px;
  background: radial-gradient(ellipse, rgba(223, 171, 41, 0.5) 0%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
}

.guard-bay-lock-icon {
  font-size: 22px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

.guard-bay-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  overflow: visible;
}

.guard-bay-bottom-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.guard-bay-name {
  font-size: clamp(0.62rem, 2vw, 0.7rem);
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  line-height: 1.15;
}

.guard-station-bay.locked .guard-bay-name {
  color: #e2e8f0;
  font-weight: 800;
}

.guard-bay-lvl-pill {
  font-size: 0.64rem;
  font-weight: 800;
  color: #dfab29;
  background: rgba(223, 171, 41, 0.18);
  border: 1px solid rgba(223, 171, 41, 0.5);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  line-height: 1.1;
  letter-spacing: -0.2px;
  width: fit-content;
}

.guard-bay-status {
  font-size: 0.72rem;
  font-weight: 700;
  color: #10b981;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.guard-bay-status.locked {
  color: #dfab29;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

/* Premium Gold Unlock CTA Button */
.guard-bay-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1a1300;
  background: linear-gradient(135deg, #ffe066 0%, #dfab29 60%, #b8860b 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.2px;
  box-shadow: 0 2px 6px rgba(223, 171, 41, 0.35);
  width: fit-content;
  transition: filter 0.15s ease;
}
.guard-bay-unlock-btn:hover {
  filter: brightness(1.15);
}

/* Parallel Guards (Couriers) styling */
.guard-runner {
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none; /* No transition for tick-based movements */
  z-index: 5;
  pointer-events: none;
  transform: translateY(-50%);
}

.guard-runner-avatar {
  width: 44px;
  height: 44px;
  background-image: url("images/guard.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

/* Walk bobbing animation when guard is moving */
@keyframes guard-walk {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.guard-runner.state-moving_to_tellers .guard-runner-avatar,
.guard-runner.state-moving_to_vault .guard-runner-avatar {
  animation: guard-walk 0.6s infinite ease-in-out;
}

/* Flip direction depending on target */
.guard-runner.moving-left .guard-runner-avatar {
  transform: scaleX(1); /* Faces left */
}

.guard-runner.moving-right .guard-runner-avatar {
  transform: scaleX(-1); /* Flip horizontally to face right */
}

/* Glowing halo when collecting or depositing */
@keyframes guard-collect-glow {
  0%, 100% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 2px rgba(223, 171, 41, 0.4));
  }
  50% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(223, 171, 41, 0.8));
  }
}
.guard-runner.state-collecting .guard-runner-avatar,
.guard-runner.state-depositing .guard-runner-avatar {
  animation: guard-collect-glow 1s infinite ease-in-out;
}

.guard-runner-load {
  position: absolute;
  bottom: 48px;
  background: linear-gradient(135deg, #1e1b10 0%, #11100a 100%);
  border: 1.5px solid #dfab29;
  color: #dfab29;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 8px rgba(223, 171, 41, 0.4);
  transform: translateX(-50%);
  left: 50%;
  animation: bounce-small 2s infinite ease-in-out;
}

@keyframes bounce-small {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -3px);
  }
}
/* Vault Zone styling - Redesigned to match the mockup */
.vault-zone {
  background: linear-gradient(135deg, #091124 0%, #03060d 100%);
  border: 2px solid rgba(223, 171, 41, 0.45);
  border-radius: 24px;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), inset 0 1px 3px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

/* Glass shine on vault container */
.vault-zone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-60%);
  pointer-events: none;
  z-index: 1;
  animation: glass-shine-glow 10s infinite ease-in-out;
}

/* Repeated luxury gold grid overlay (hexagon/isometric line pattern) */
.vault-zone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="34.64" viewBox="0 0 60 34.64"><path d="M0 0 L30 17.32 L60 0 M30 17.32 L30 34.64 M0 34.64 L30 17.32 L60 34.64" fill="none" stroke="rgba(223, 171, 41, 0.07)" stroke-width="1.2"/></svg>');
  background-size: 60px 34.64px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}

/* Glowing gold aura behind circular vault door */
@keyframes gold-vault-pulse {
  0% {
    box-shadow: 0 0 20px rgba(223, 171, 41, 0.15), 0 0 40px rgba(223, 171, 41, 0.08);
  }
  50% {
    box-shadow: 0 0 35px rgba(223, 171, 41, 0.45), 0 0 70px rgba(223, 171, 41, 0.2);
  }
  100% {
    box-shadow: 0 0 20px rgba(223, 171, 41, 0.15), 0 0 40px rgba(223, 171, 41, 0.08);
  }
}
.vault-graphic {
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7);
  z-index: 2;
  flex-shrink: 0;
}

.vault-door-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  z-index: 1;
}

.vault-graphic-label {
  position: relative;
  z-index: 4;
}

.vault-graphic::before {
  content: none;
}

.vault-graphic:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 35px rgba(223, 171, 41, 0.45);
}

.vault-graphic:active {
  transform: translateY(-2px) scale(0.98);
}

.vault-graphic-label {
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  color: #dfab29; /* Gold */
  background: radial-gradient(circle, #222530 0%, #0d0f14 80%);
  border: 3.5px solid #dfab29;
  border-radius: 50%;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.15), 0 0 12px rgba(223, 171, 41, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.6px;
  pointer-events: none;
  z-index: 3;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vault-graphic:hover .vault-graphic-label {
  transform: rotate(180deg);
}

.vault-graphic.full {
  animation: shake 0.5s ease-in-out infinite;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.75);
}

.vault-graphic.vault-full {
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
.vault-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  z-index: 2;
}

.vault-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.vault-title-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vault-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vault-title {
  font-family: "Outfit", "Inter", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #dfab29; /* High-quality Gold */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(223, 171, 41, 0.3);
  letter-spacing: 0.3px;
}

.vault-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 1px;
}

.vault-progress-row {
  width: 100%;
  margin-top: 0.25rem;
  position: relative;
}

.vault-progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.5px;
}

.vault-fill-bar-container {
  height: 32px;
  background: rgba(5, 8, 15, 0.85);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(223, 171, 41, 0.35);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.95), 0 0 10px rgba(223, 171, 41, 0.05);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Metallic caps on the progress tube ends */
.vault-fill-bar-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 12px;
  background: linear-gradient(90deg, #64748b, #cbd5e1, #64748b);
  border-right: 1.5px solid #475569;
  z-index: 4;
}

.vault-fill-bar-container::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 12px;
  background: linear-gradient(90deg, #64748b, #cbd5e1, #64748b);
  border-left: 1.5px solid #475569;
  z-index: 4;
}

/* Liquid gold flowing shine keyframe */
@keyframes bar-shine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
.vault-fill-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%);
  border-radius: 0;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.85);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.vault-fill-bar-fill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  z-index: 2;
}

.vault-fill-bar-fill.full {
  background: linear-gradient(90deg, #991b1b 0%, #ef4444 50%, #991b1b 100%);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.7);
}

/* Premium Vault Stats Dashboard Grid */
.vault-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.6rem;
}

.vault-stat-card {
  background: rgba(10, 15, 30, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.vault-stat-card:hover {
  transform: translateX(-3px);
  background-color: rgba(15, 23, 42, 0.6);
  border-color: rgba(223, 171, 41, 0.35);
}

.vault-stat-card.yield-card {
  border-color: rgba(16, 185, 129, 0.15);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.01) 0%, rgba(16, 185, 129, 0.04) 100%);
}

.vault-stat-card.yield-card:hover {
  border-color: rgba(16, 185, 129, 0.4);
}

.vault-stat-card.cap-card {
  border-color: rgba(223, 171, 41, 0.15);
  background: linear-gradient(135deg, rgba(223, 171, 41, 0.01) 0%, rgba(223, 171, 41, 0.04) 100%);
}

.vault-stat-card.cap-card:hover {
  border-color: rgba(223, 171, 41, 0.4);
}

.vault-stat-card.volume-card {
  border-color: rgba(59, 130, 246, 0.15);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.01) 0%, rgba(59, 130, 246, 0.04) 100%);
}

.vault-stat-card.volume-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
}

.tab-btn .tab-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.nav-3d-icon-small {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-bottom: 2px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6)) brightness(0.95);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.tab-btn.active .nav-3d-icon-small {
  transform: scale(1.15) translateY(-1px);
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.9)) brightness(1.15);
}

.vault-stat-icon {
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  padding: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.vault-stat-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  flex-grow: 1;
  gap: 0.5rem;
}

.vault-stat-label {
  font-size: 0.82rem;
  color: #94a3b8;
  font-weight: 700;
}

.vault-stat-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: #f1f5f9;
  white-space: nowrap;
  text-align: left;
}

.vault-stat-value.text-green {
  color: #10b981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.vault-stat-value.text-gold {
  color: #dfab29;
  text-shadow: 0 0 8px rgba(223, 171, 41, 0.35);
}

.vault-info-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  font-size: 0.72rem !important;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  margin-right: 0.35rem;
  flex-shrink: 0;
  position: relative;
}

.vault-info-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  z-index: -1;
}

.vault-info-btn:hover {
  background: rgba(223, 171, 41, 0.2) !important;
  border-color: #dfab29 !important;
  color: #dfab29 !important;
  transform: scale(1.1);
}

.vault-stats {
  display: none !important; /* Replaced by bottom row stats */
}

.vault-limit-label {
  color: var(--text-muted);
}

.vault-current-value {
  color: var(--primary-gold);
  font-weight: 700;
}

.collect-vault-btn {
  background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
  border: none;
  color: #0c0f1d !important;
  font-weight: 800;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--gold-glow);
  transition: var(--transition-prop);
  font-size: 0.95rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.collect-vault-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(223, 171, 41, 0.5);
}

.collect-vault-btn:active {
  transform: translateY(0);
}

.collect-vault-btn.disabled {
  background: #374151;
  color: #6b7280;
  cursor: not-allowed;
  box-shadow: none;
}

/* Floating cash animation overlay */
.floating-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 3000;
}

.floating-cash {
  position: absolute;
  color: var(--green-light);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  animation: float-up 1s ease-out forwards;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  z-index: 100;
  pointer-events: none;
}

/* Control & Upgrade Panel */
.control-panel {
  min-width: 0;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.control-panel-title {
  font-size: 2.2rem;
  font-weight: 900;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(223, 171, 41, 0.4), 0 3px 6px rgba(0, 0, 0, 0.8);
  margin: 0.5rem 0 1.5rem 0;
  width: 100%;
  letter-spacing: 1px;
}

/* Tabs Navigation (Pill Style) */
.tabs-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 1px 3px rgba(255, 255, 255, 0.05);
  border-radius: 35px;
  padding: 0 10px;
  margin: 0 auto 1rem auto;
  height: 75px;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 800px;
  z-index: 10;
}

.tab-btn {
  background: transparent;
  border: none;
  color: rgba(180, 183, 200, 0.9);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  position: relative;
}

.tab-btn .nav-3d-icon-small {
  width: 32px;
  height: 32px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) brightness(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

.tab-btn:hover .nav-3d-icon-small {
  transform: translateY(-2px) scale(1.05);
}

.tab-btn.active .nav-3d-icon-small {
  transform: scale(1.3) translateY(-4px);
  filter: drop-shadow(0 8px 16px rgba(223, 171, 41, 0.7)) brightness(1.25);
}

.tab-btn.active {
  color: var(--primary-gold);
  text-shadow: 0 0 10px rgba(223, 171, 41, 0.9);
}

.tab-btn.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.45) 0%, rgba(223, 171, 41, 0) 70%);
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.tab-label {
  z-index: 2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  position: relative;
}

.tab-btn.active .tab-label::after {
  content: "✨";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  filter: drop-shadow(0 0 5px rgb(223, 171, 41));
}

.tab-btn.active .tab-label {
  text-shadow: 0 0 8px rgba(223, 171, 41, 0.5);
}

.tab-content {
  flex: 1;
  position: relative;
  min-height: 0;
}

.tab-pane {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.tab-pane.active {
  display: flex;
}

/* Cards & List Items */
.upgrade-card {
  background: linear-gradient(135deg, rgba(20, 25, 40, 0.4) 0%, rgba(10, 15, 25, 0.8) 100%);
  border: 1px solid rgba(223, 171, 41, 0.2);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: var(--transition-prop);
}

.upgrade-card:hover {
  background: linear-gradient(135deg, rgba(30, 35, 50, 0.6) 0%, rgba(15, 20, 35, 0.9) 100%);
  border-color: rgba(223, 171, 41, 0.6);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(223, 171, 41, 0.15);
  transform: translateY(-3px) scale(1.01);
}

.card-left-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
  min-width: 0;
}

.card-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(223, 171, 41, 0.4);
  box-shadow: 0 0 20px rgba(223, 171, 41, 0.15), inset 0 0 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.upgrade-card:hover .card-avatar {
  transform: scale(1.08);
  border-color: rgba(223, 171, 41, 0.9);
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-avatar.locked {
  border-color: rgba(255, 255, 255, 0.1);
  filter: grayscale(1) brightness(0.4);
}

.card-avatar.locked .lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
  animation: lock-pulse 2s infinite alternate;
}

@keyframes lock-pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}
.card-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-grow: 1;
  min-width: 0;
}

.card-title {
  font-size: 1.3rem !important;
  font-weight: 900;
  color: var(--text-main);
  font-family: var(--font-heading);
  background: linear-gradient(90deg, #fff, #f3e5ab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.card-title .upgrade-amount-text {
  -webkit-text-fill-color: #16a34a !important;
  color: #16a34a !important;
}

.upgrade-amount-text {
  color: #16a34a !important;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(22, 163, 74, 0.4);
  font-size: 1.2em;
}

.buy-btn .upgrade-amount-text {
  direction: ltr;
  unicode-bidi: embed;
  margin-right: 4px;
}

.card-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.card-stats {
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 0.25rem;
}

.card-stats span {
  color: #dfab29;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(223, 171, 41, 0.4);
}

.buy-btn {
  background: linear-gradient(180deg, #dfab29 0%, #b8860b 100%);
  border: 1px solid #ffe699;
  color: #0c0e1d !important;
  font-weight: 800;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.1rem !important;
  font-family: "Outfit", sans-serif;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(223, 171, 41, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  transition: var(--transition-prop);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.buy-btn br {
  display: none;
}

.buy-btn:not(.disabled)::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -150%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(30deg);
  animation: button-shine 4s infinite linear;
}

@keyframes button-shine {
  0% {
    left: -150%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}
.buy-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #f3d052 0%, #d4af37 100%);
  box-shadow: 0 6px 20px rgba(223, 171, 41, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
  filter: brightness(1.05);
}

.buy-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(223, 171, 41, 0.3);
}

.buy-btn.disabled {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  color: #475569 !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Managers Specific Layout */
.manager-status {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  text-align: center;
}

.manager-status.hired {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green-light);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.manager-status.sold {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.manager-status.sold {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Prestige specific styles */
.prestige-panel {
  text-align: center;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.prestige-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-gold);
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(223, 171, 41, 0.2);
}

.prestige-description {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 380px;
}

.prestige-showcase-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-top: 1.5px solid rgba(255, 255, 255, 0.15);
  border-left: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), 0 8px 32px 0 rgba(0, 0, 0, 0.37), 0 0 20px rgba(16, 185, 129, 0.05);
  border-radius: 12px;
  padding: 1.25rem 2rem;
  margin: 0.5rem auto;
  width: 100%;
  max-width: 340px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.showcase-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.showcase-value {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ffe082 0%, #ffb300 50%, #ff8f00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(255, 179, 0, 0.45));
  font-family: "Outfit", sans-serif;
  margin-top: 0.25rem;
  letter-spacing: 1px;
  animation: glow-pulse 3s infinite alternate;
}

@keyframes glow-pulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 179, 0, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 12px rgba(255, 179, 0, 0.6));
  }
}
.prestige-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ffb300;
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
  filter: blur(0.5px);
}

.prestige-particle:nth-child(1) {
  top: 20%;
  left: 15%;
  animation: particle-float 6s infinite ease-in-out;
}

.prestige-particle:nth-child(2) {
  top: 60%;
  left: 80%;
  animation: particle-float 8s infinite ease-in-out;
  animation-delay: 1.5s;
}

.prestige-particle:nth-child(3) {
  top: 80%;
  left: 25%;
  animation: particle-float 7s infinite ease-in-out;
  animation-delay: 3s;
}

.prestige-particle:nth-child(4) {
  top: 30%;
  left: 70%;
  animation: particle-float 9s infinite ease-in-out;
  animation-delay: 0.5s;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-30px) translateX(10px);
    opacity: 0;
  }
}
.prestige-beveled-btn {
  background: linear-gradient(90deg, #dfab29 0%, #10b981 100%);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  font-weight: 800;
  padding: 0.9rem 2.5rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25), 0 8px 30px rgba(223, 171, 41, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 340px;
  text-align: center;
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}

.prestige-beveled-btn:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4), 0 10px 35px rgba(223, 171, 41, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}

.prestige-beveled-btn:active:not(.disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}

.prestige-beveled-btn.disabled {
  background: linear-gradient(90deg, #374151 0%, #1f2937 100%);
  color: #6b7280;
  border-color: rgba(255, 255, 255, 0.05);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  text-shadow: none;
}

.prestige-btn-subtext {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: -0.4rem;
  font-weight: 500;
}

/* Branch Unlock Card */
.branch-card {
  background: #050811;
  border: 1px solid rgba(223, 171, 41, 0.4);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 190px; /* Increased from 145px to prevent pill cutoff */
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 1.2rem;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.1), inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

.branch-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.9), inset 0 2px 10px rgba(0, 0, 0, 0.6);
  border-color: rgba(223, 171, 41, 0.7);
}

.branch-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 1;
  filter: brightness(1.1) contrast(1.1) saturate(1.1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.branch-card:hover::before {
  transform: scale(1.03);
  filter: brightness(1.15) contrast(1.1) saturate(1.1);
}

.branch-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(270deg, rgba(10, 15, 30, 0.98) 0%, rgba(10, 15, 30, 0.8) 40%, rgba(10, 15, 30, 0) 80%);
  z-index: 2;
  pointer-events: none;
}

/* Flip gradient for LTR so the text area is darkened properly */
[dir=ltr] .branch-card::after {
  background: linear-gradient(90deg, rgba(10, 15, 30, 0.98) 0%, rgba(10, 15, 30, 0.8) 40%, rgba(10, 15, 30, 0) 80%);
}

.branch-card.current {
  border-color: #dfab29;
  box-shadow: 0 0 20px rgba(223, 171, 41, 0.2), inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Dynamic branch background rules on pseudo-element */
.branch-card.bg-branch-0::before {
  background-image: url("images/local_branch_bg.png");
}

.branch-card.bg-branch-1::before {
  background-image: url("images/london_branch_bg.png");
}

.branch-card.bg-branch-2::before {
  background-image: url("images/frankfurt_branch_bg.png");
}

.branch-card.bg-branch-3::before {
  background-image: url("images/wallstreet_branch_bg.png");
}

.branch-card.bg-branch-4::before {
  background-image: url("images/goldman_branch_bg.png");
}

.branch-card-right {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the text block vertically when align-items: center is on the parent */
  flex: 1;
  z-index: 3;
  padding-left: 1.5rem; /* Gap between text and left action area */
}

[dir=ltr] .branch-card-right {
  padding-left: 0;
  padding-right: 1.5rem;
}

.branch-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Restored to space-between to push icons to the far left */
  gap: 0.8rem; /* Space between title and icons */
  margin-bottom: 0.4rem;
  width: 100%;
}

.branch-card-right .branch-name {
  font-size: 1.45rem;
  line-height: 1.2;
  margin-bottom: 0.25rem; /* Larger */
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.5); /* crisp deep shadow */
}

.branch-nav-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.branch-diamond-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(96, 165, 250, 0.8); /* brighter, thicker border */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  font-size: 1.2rem;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.6), inset 0 0 10px rgba(59, 130, 246, 0.4);
  background: radial-gradient(circle, rgba(30, 58, 138, 0.9), rgb(15, 23, 42));
}

.chevron-icon {
  color: #cbd5e1;
  font-size: 1.2rem;
}

.branch-card-right .branch-desc {
  font-size: 0.88rem;
  color: #e2e8f0;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  max-width: 90%;
}

.branch-req-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(5, 10, 20, 0.95); /* darker, deep background */
  border: 1px solid rgba(139, 180, 246, 0.4); /* subtle blue border */
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  margin-top: 0.5rem; /* Replaced auto with a fixed margin to avoid overflow */
  margin-bottom: 0.5rem; /* Add bottom margin for breathing room */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
  align-self: flex-start;
  gap: 0.8rem; /* more space between icons and text */
}

.branch-req-pill-icon {
  color: #6ee7b7;
  font-size: 1.5rem; /* larger stack of cash icon */
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.5));
}

.branch-req-pill-text {
  display: flex;
  flex-direction: column; /* two lines! */
  align-items: flex-start;
  gap: 0;
}

[dir=rtl] .branch-req-pill-text {
  align-items: flex-end; /* right align in Hebrew */
}

.req-label {
  font-size: 0.9rem;
  color: #9ca3af;
  font-weight: 500;
}

.req-val {
  font-size: 1.2rem; /* Larger cash amount */
  color: #ffffff;
  font-weight: 800;
}

.branch-req-pill-crown {
  font-size: 1.4rem;
  filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.9));
}

.branch-status-pill {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #6ee7b7;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(16, 185, 129, 0.2);
}

.branch-status-pill .pulse-dot {
  width: 7px;
  height: 7px;
  background-color: #10b981;
  border-radius: 50%;
  margin-left: 6px;
  box-shadow: 0 0 8px #10b981;
  animation: dot-pulse 1.6s infinite alternate;
}

@keyframes dot-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.5;
    box-shadow: 0 0 4px #10b981;
  }
  100% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 10px #34d399;
  }
}
.branch-card-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 130px;
  flex-shrink: 0;
  z-index: 3;
  gap: 0.4rem; /* Tighter gap between hexagon and button */
  background: transparent !important;
}

/* Hexagon Container for proper border simulation */
.multiplier-hexagon-badge {
  position: relative;
  width: 105px;
  height: 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); /* Bright blue outer glow */
}

/* Outer thick blue border */
.multiplier-hexagon-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #60a5fa, #1d4ed8); /* Bright gradient */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -2;
}

/* Inner dark blue background */
.multiplier-hexagon-badge::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: linear-gradient(135deg, #0a1128, #132448); /* Deep dark blue */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.multiplier-hexagon-badge .hex-crown {
  color: #fcd34d;
  font-size: 1.4rem;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 5px rgba(252, 211, 77, 0.8));
}

.multiplier-hexagon-badge .mult-val {
  color: #fde047;
  font-size: 1.95rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  text-shadow: 0 0 12px rgba(253, 224, 71, 0.9), 0 2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.multiplier-hexagon-badge .mult-lbl {
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.branch-action-wrapper {
  width: 100%;
}

.branch-action-btn {
  width: 100%; /* Better adaptation */
  min-height: 40px;
  border-radius: 8px;
  padding: 0.4rem 0.5rem; /* Slightly more side padding */
  cursor: pointer;
  font-size: 0.9rem; /* slightly larger text */
  font-weight: 800;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1; /* Prevent text clipping if it wraps */
}

.gold-gradient-btn {
  background: linear-gradient(180deg, #fef08a 0%, #d4af37 40%, #926600 100%);
  border: 1px solid #fde047;
  color: #1c1917; /* Very dark text */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  text-shadow: none; /* Text in Image 2 is crisp, no shadow needed */
}

.gold-gradient-btn:hover:not(.disabled) {
  filter: brightness(1.15);
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.8);
}

.branch-action-btn.solid-gold {
  background: linear-gradient(180deg, #dfab29 0%, #b48518 100%);
  color: #111827;
  font-weight: 800;
  border: 1px solid #fef08a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: none;
}

.branch-action-btn.solid-gold:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

.branch-action-btn.ghost-gold {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.8) 0%, rgba(5, 5, 5, 0.95) 100%);
  border: 1px solid rgba(245, 208, 112, 0.8);
  color: #F5D070;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.9);
  text-shadow: 0 2px 4px rgb(0, 0, 0);
}

.branch-action-btn.ghost-gold:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 208, 112, 0.3), inset 0 0 12px rgba(245, 208, 112, 0.2);
  filter: brightness(1.1);
}

.branch-status-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  white-space: nowrap;
}

.branch-status-label.sold {
  background: rgba(107, 114, 128, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(107, 114, 128, 0.2);
}

/* Footer Section */
footer {
  text-align: center;
  padding: 1rem 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

.tab-icon-wrapper, .nav-icon-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.bottom-nav {
  overflow: visible !important;
}

.bottom-nav-btn {
  overflow: visible !important;
}

.tab-badge-counter {
  position: absolute !important;
  top: 1px !important;
  right: 0px !important;
  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-heading, system-ui, sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  min-width: 15px !important;
  height: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  padding: 0 3px !important;
  box-sizing: border-box !important;
  border: 1px solid #080c18 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 6px rgba(225, 29, 72, 0.4) !important;
  animation: tab-badge-subtle-pulse 2.2s infinite ease-in-out !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

[dir=rtl] .tab-badge-counter {
  right: auto !important;
  left: 0px !important;
}

@keyframes tab-badge-subtle-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}
/* Animations Definitions */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes spawn-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes walk-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes float-up {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(1.1);
    opacity: 0;
  }
}
@keyframes shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  20%, 60% {
    transform: rotate(-5deg);
  }
  40%, 80% {
    transform: rotate(5deg);
  }
}
/* Offline Welcome Overlay Modal */
.modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(0, 0, 0, 0.82) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overscroll-behavior: contain;
  padding: max(1rem + env(safe-area-inset-top, 0px), 24px) 1rem max(1.5rem + env(safe-area-inset-bottom, 0px), 28px) 1rem !important;
  box-sizing: border-box !important;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  background: radial-gradient(circle at top, rgba(30, 35, 52, 0.98) 0%, rgba(10, 12, 18, 0.99) 100%);
  border: 1px solid rgba(223, 171, 41, 0.35);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 40px rgba(223, 171, 41, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 2rem 1.5rem;
  max-width: 480px !important;
  width: calc(100% - 1.5rem) !important;
  margin: 0 auto !important;
  max-height: 85vh !important;
  max-height: 85dvh !important;
  overflow-y: auto !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
}

.modal-icon {
  font-size: 3.5rem;
  color: var(--primary-gold);
  filter: drop-shadow(0 0 10px var(--gold-glow));
  animation: modal-icon-pulse 2.5s infinite ease-in-out;
}

@keyframes modal-icon-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(223, 171, 41, 0.3));
  }
  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 18px rgba(223, 171, 41, 0.6));
  }
}
.modal-title {
  font-size: 1.3rem;
  font-weight: 700;
}

.modal-text {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.modal-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--green-light);
  font-family: "Outfit", sans-serif;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.modal-close-btn {
  background: linear-gradient(135deg, var(--primary-gold), var(--gold-dark));
  color: #111827;
  border: none;
  font-weight: 700;
  padding: 0.75rem 2.5rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px var(--gold-glow);
  transition: var(--transition-prop);
  width: 100%;
}

.modal-close-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(223, 171, 41, 0.4);
}

/* Daily Login Reward: rolling 7-day streak strip (today + next 6 days preview) */
.login-streak-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  width: 100%;
}

.login-streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.15rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.5;
}

.login-streak-day-label {
  font-size: 0.55rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.login-streak-day-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.login-streak-day-value {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.login-streak-day.is-today {
  opacity: 1;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.45);
}

.login-streak-day.is-today .login-streak-day-label {
  color: var(--green-light);
}

.login-streak-day.is-tomorrow {
  opacity: 1;
  background: rgba(223, 171, 41, 0.14);
  border-color: var(--primary-gold);
  box-shadow: 0 0 12px rgba(223, 171, 41, 0.35);
  animation: login-streak-tomorrow-pulse 2.2s infinite ease-in-out;
}

.login-streak-day.is-tomorrow .login-streak-day-label {
  color: var(--primary-gold);
  font-weight: 700;
}

@keyframes login-streak-tomorrow-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
/* Flying Coin Animation */
.flying-coin {
  position: absolute;
  font-size: 1.4rem;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  user-select: none;
  line-height: 1;
}

/* Desk Simulation inside Teller Cards */
.desk-simulation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding: 0.5rem;
  margin: 0.3rem 0;
  border: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 52px;
}

.desk-character {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.desk-character.teller-avatar {
  background: linear-gradient(135deg, #10b981, #047857);
  color: white;
  font-size: 1.1rem;
}

.desk-screen {
  font-size: 1.25rem;
  animation: float 3s ease-in-out infinite;
}

.client-slot {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
}

.client-slot.active {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.1);
  animation: bobbing 0.7s ease-in-out infinite alternate;
}

@keyframes bobbing {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}
/* Decorative Bank Assets */
.bank-decor {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
}

@keyframes camera-sweep {
  0% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}
.security-camera {
  top: 0.5rem;
  left: 0.5rem;
  font-size: 1.25rem;
  transform-origin: top center;
  animation: camera-sweep 4s ease-in-out infinite alternate;
}

.atm-machine {
  top: 0.5rem;
  right: 3rem;
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.gold-pillar {
  font-size: 1.8rem;
  color: var(--primary-gold);
  text-shadow: 0 0 10px var(--gold-glow);
  top: 40%;
  opacity: 0.4;
}

.gold-pillar.pillar-l {
  left: 0.5rem;
}

.gold-pillar.pillar-r {
  right: 0.5rem;
}

.potted-plant {
  bottom: 4rem;
  font-size: 1.15rem;
}

.potted-plant.plant-l {
  left: 0.5rem;
}

.potted-plant.plant-r {
  right: 0.5rem;
}

.waiting-sofa {
  font-size: 1.25rem;
  margin-left: 0.5rem;
  margin-right: 0.8rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.entrance-door {
  font-size: 1.3rem;
  margin-left: 0.5rem;
  margin-right: 0.8rem;
}

/* Missions Tab Styling matching mockup exactly */
#tab-missions .missions-summary-header {
  flex-shrink: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px), linear-gradient(135deg, #0b101e 0%, #1e293b 50%, #050811 100%);
  background-size: 10px 10px, 100% 100%;
  border: 1px solid rgba(223, 171, 41, 0.6); /* Gold glowing border */
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(223, 171, 41, 0.3), inset 0 2px 15px rgba(0, 0, 0, 0.6);
  color: #f8fafc; /* White/silver text */
  position: relative;
}

#tab-missions .missions-summary-header .summary-badge {
  font-size: 1.7rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fef08a 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.6)); /* Metallic drop shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

#tab-missions .missions-summary-header .summary-desc {
  font-size: 0.95rem;
  font-weight: 700;
  color: #cbd5e1; /* Lighter desc to match dark bg */
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

#tab-missions .mission-card {
  /* tab pane is a fixed-height flex column: without this, cards get compressed
     to min-height and the claim button spills outside the card */
  flex-shrink: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px), linear-gradient(135deg, #0d152e 0%, #050814 100%);
  background-size: 10px 10px, 100% 100%;
  border: 1px solid rgba(223, 171, 41, 0.6); /* Glowing gold border */
  border-radius: 24px;
  padding: 2.25rem 1.25rem 1.25rem 1.25rem; /* Increased top padding to prevent badge overlap */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  position: relative;
  min-height: 140px;
  overflow: visible;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(212, 175, 55, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.1), inset 0 2px 15px rgba(0, 0, 0, 0.6); /* Inner shadow for depth */
  direction: ltr; /* LTR for layout: image left, circle right */
  margin-bottom: 1.2rem;
}

#tab-missions .mission-card-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "image content circle";
  gap: 1.8rem;
  align-items: center;
}

#tab-missions .mission-card:hover {
  border-color: rgba(30, 144, 255, 0.75);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(30, 144, 255, 0.35);
  transform: translateY(-3px);
}

/* Completed mission card has gold border and gold ambient glow */
#tab-missions .mission-card.completed {
  border-color: #dfab29; /* Solid theme gold border */
  background: linear-gradient(135deg, rgba(223, 171, 41, 0.08) 0%, rgba(15, 23, 42, 0.98) 100%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(223, 171, 41, 0.35);
}

/* Reward Badge Overlapping Top Border */
#tab-missions .mission-reward-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: linear-gradient(135deg, #0b101e 0%, #000000 100%);
  border-bottom: 1.5px solid #D4AF37;
  border-left: 1.5px solid #D4AF37;
  border-top: none;
  border-right: none;
  color: #fbbf24; /* Shiny gold text */
  font-size: 0.85rem;
  font-weight: 900;
  padding: 0.3rem 1.4rem; /* Increased horizontal padding */
  border-radius: 0 24px 0 16px;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.8), inset 0 0 5px rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 10;
}

#tab-missions .mission-card.completed .mission-reward-badge {
  border-color: #ffffff;
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
}

/* Middle details */
#tab-missions .mission-content-middle {
  grid-area: content;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-align: right;
  min-width: 0;
}

#tab-missions .mission-details {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: right;
}

#tab-missions .mission-card .mission-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.3px;
  white-space: normal;
  line-height: 1.2;
}

#tab-missions .mission-card .mission-desc {
  font-size: 0.88rem;
  color: #e2e8f0;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Flex Row for gold bar and percentage */
#tab-missions .mission-progress-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Progress bar container (gold liquid capsule) */
#tab-missions .mission-progress-outer {
  flex-grow: 1;
  height: 16px; /* Made thinner */
  background: #000000;
  border: 1px solid rgba(223, 171, 41, 0.4);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

#tab-missions .mission-progress-bar {
  height: 100%;
  background: linear-gradient(180deg, #fef08a 0%, #facc15 50%, #ca8a04 100%);
  border-radius: 20px;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7);
}

#tab-missions .mission-card.completed .mission-progress-bar {
  background: linear-gradient(180deg, #fef08a 0%, #facc15 50%, #ca8a04 100%);
}

/* Text overlay inside progress bar */
#tab-missions .progress-text-overlay {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem; /* Reduced font size further */
  letter-spacing: 0.5px; /* Added spacing for technical look */
  font-weight: 900;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 0px 0px 4px #000; /* Sharp heavy black shadow */
  pointer-events: none;
  font-family: "Outfit", sans-serif;
  white-space: nowrap;
  z-index: 5;
}

/* Circular Progress Indicator */
#tab-missions .mission-circle-progress {
  grid-area: circle;
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-missions .mission-circle-progress svg {
  transform: rotate(-90deg);
}

#tab-missions .mission-circle-progress .circle-bg,
#tab-missions .mission-circle-progress .circle-value {
  stroke-width: 4px; /* Reduced from 6px to be thinner/elegant */
}

#tab-missions .mission-circle-progress .circle-bg {
  stroke: #0a1128; /* Dark navy for unfilled portion */
}

#tab-missions .mission-circle-progress .circle-value {
  stroke: #dfab29;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 4px rgba(223, 171, 41, 0.6));
}

#tab-missions .mission-circle-progress .circle-text {
  position: absolute;
  font-size: 0.95rem; /* Reduced from 1.2em */
  font-weight: 700; /* Less bulky */
  color: #ffffff; /* Platinum white */
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  font-family: "Outfit", sans-serif;
}

/* ===== Achievements Tab — reuses the same dark/gold card language as Missions ===== */
#tab-achievements .missions-summary-header {
  background: radial-gradient(rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px), linear-gradient(135deg, #0b101e 0%, #1e293b 50%, #050811 100%);
  background-size: 10px 10px, 100% 100%;
  border: 1px solid rgba(223, 171, 41, 0.6);
  border-radius: 20px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(223, 171, 41, 0.3), inset 0 2px 15px rgba(0, 0, 0, 0.6);
  color: #f8fafc;
  position: relative;
}

#tab-achievements .missions-summary-header .summary-badge {
  font-size: 1.7rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fef08a 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

#tab-achievements .missions-summary-header .summary-desc {
  font-size: 0.95rem;
  font-weight: 700;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}

#tab-achievements .mission-card {
  background: radial-gradient(circle at 15% 50%, rgba(223, 171, 41, 0.15) 0%, transparent 45%), linear-gradient(180deg, #111522 0%, #080b12 100%);
  border: 1px solid rgba(223, 171, 41, 0.4);
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  min-height: 110px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  direction: ltr;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#tab-achievements .mission-card:hover {
  transform: translateY(-2px);
  border-color: rgba(223, 171, 41, 0.8);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 0 15px rgba(223, 171, 41, 0.15);
}

/* Unlocked state: static gold tint only — no glow/pulse animation by design */
#tab-achievements .mission-card.unlocked {
  border-color: rgba(223, 171, 41, 0.7);
  background: radial-gradient(circle at 15% 50%, rgba(223, 171, 41, 0.25) 0%, transparent 50%), linear-gradient(180deg, #151a28 0%, #0a0d16 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 12px rgba(223, 171, 41, 0.1);
}

#tab-achievements .achievement-icon-box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#tab-achievements .achievement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.achievement-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  border: 1.5px solid rgba(223, 171, 41, 0.8);
  box-shadow: 0 0 12px rgba(223, 171, 41, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#tab-achievements .mission-card:hover .achievement-img {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(223, 171, 41, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

#tab-achievements .mission-content-middle {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: right;
  min-width: 0;
  padding-top: 14px; /* Fixes overlap with the corner badge */
}

#tab-achievements .mission-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: right;
}

#tab-achievements .mission-card .mission-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  line-height: 1.2;
  letter-spacing: 0.3px;
}

#tab-achievements .mission-card .mission-desc {
  font-size: 0.95rem;
  color: #94a3b8;
  word-wrap: break-word;
  font-weight: 500;
}

#tab-achievements .mission-progress-row {
  display: flex;
  align-items: center;
  width: 100%;
}

#tab-achievements .mission-progress-outer {
  flex-grow: 1;
  height: 18px;
  background: #02040a;
  border: 1px solid rgba(223, 171, 41, 0.5);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(255, 255, 255, 0.05);
}

#tab-achievements .mission-progress-bar {
  height: 100%;
  background: linear-gradient(180deg, #fef08a 0%, #eab308 50%, #a16207 100%);
  border-radius: 20px;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 0 10px rgba(234, 179, 8, 0.6);
}

#tab-achievements .progress-text-overlay {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0px 1px 3px #000, 0px -1px 3px #000, 1px 0px 3px #000, -1px 0px 3px #000;
  pointer-events: none;
  font-family: "Outfit", sans-serif;
  white-space: nowrap;
  z-index: 5;
}

#tab-achievements .achievement-unlocked-badge {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  background: rgba(223, 171, 41, 0.15);
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(223, 171, 41, 0.3);
  display: inline-block;
}

#tab-achievements .mission-circle-progress {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tab-achievements .mission-circle-progress svg {
  transform: rotate(-90deg);
  width: 60px;
  height: 60px;
}

#tab-achievements .mission-circle-progress .circle-bg,
#tab-achievements .mission-circle-progress .circle-value {
  stroke-width: 4px;
}

#tab-achievements .mission-circle-progress .circle-bg {
  stroke: rgba(223, 171, 41, 0.1);
}

#tab-achievements .mission-circle-progress .circle-value {
  stroke: #facc15;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.7));
}

#tab-achievements .mission-circle-progress .circle-text {
  position: absolute;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Already-claimed achievements sink to the bottom of the list — muted, out of the way */
#tab-achievements .mission-card.claimed {
  opacity: 0.55;
}

#tab-achievements .mission-reward-badge {
  position: absolute;
  top: -1px;
  right: 20px; /* Shifted from edge like the mockup */
  background: linear-gradient(180deg, #151a28 0%, #0a0d16 100%);
  border: 1px solid rgba(223, 171, 41, 0.6);
  border-top: none;
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.2rem 0.8rem;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 10;
}

#tab-achievements .mission-action-zone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Align right like mockup */
}

/* Claim button — elegant luxury style */
#tab-achievements .claim-achievement-btn {
  width: auto;
  min-width: 120px;
  padding: 0.45rem 1.4rem;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.7);
  background: linear-gradient(180deg, #227344 0%, #0d361b 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(10, 38, 20, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  box-sizing: border-box;
}

#tab-achievements .claim-achievement-btn:hover {
  background: linear-gradient(to bottom, #216a3e, #0c2f19);
  transform: scale(1.03);
}

#tab-achievements .claim-achievement-btn:active {
  transform: scale(0.96);
}

#tab-achievements .claim-reward-amount {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Light divider between the Daily Challenges section and the merged Achievements section below it */
.daily-achievements-divider {
  height: 1px;
  margin: 1.75rem 0.5rem 1.5rem;
  background: linear-gradient(90deg, transparent 0%, rgba(223, 171, 41, 0.4) 50%, transparent 100%);
}

/* Action Zone (Left side) */
#tab-missions .mission-action-zone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Green claim reward button with glowing neon green aura */
#tab-missions .claim-reward-btn {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(223, 171, 41, 0.5); /* Gold rim */
  background: linear-gradient(180deg, #1e5c36 0%, #0d3b1e 100%) !important; /* Rich glossy green */
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 25px rgba(13, 59, 30, 0.8), inset 0 2px 5px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.6) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  filter: none !important; /* remove crazy drop-shadows from text clipping global */
}

#tab-missions .claim-reward-btn:hover {
  background: linear-gradient(to bottom, #216a3e, #0c2f19) !important;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.9), inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.03);
}

#tab-missions .claim-reward-btn:active {
  transform: scale(0.96);
}

#tab-missions .claim-reward-amount {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.9;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes ready-to-claim-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.4) !important;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgb(16, 185, 129), 0 0 20px rgba(52, 211, 153, 0.9), inset 0 2px 8px rgba(255, 255, 255, 0.9) !important;
    border-color: rgb(255, 255, 255);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.4) !important;
  }
}
#tab-missions .mission-card.completed .claim-reward-btn {
  animation: ready-to-claim-pulse 1.2s infinite ease-in-out;
  background: linear-gradient(180deg, #065f46 0%, #064e3b 100%) !important; /* Dark emerald metallic green */
  border: 1px solid rgba(250, 204, 21, 0.8);
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Grey in-progress display box */
#tab-missions .mission-progress-box {
  width: 100%;
  background: #000000; /* Pure black background for high contrast */
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.55rem 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

#tab-missions .box-progress-fraction {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Outfit", sans-serif;
  text-align: center;
  white-space: nowrap;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tab-missions .box-progress-percent {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffd54f; /* Gold text for percent inside box */
  text-shadow: 0 0 4px rgba(255, 213, 79, 0.3);
}

/* Left Side: Circular Image illustration */
#tab-missions .mission-image-box {
  grid-area: image;
  width: 115px; /* Super Massive icon to match AI */
  height: 115px;
  border-radius: 50%;
  border: 4px solid rgba(223, 171, 41, 0.9); /* Thicker gold ring */
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.5), inset 0 0 20px rgba(223, 171, 41, 0.8), 0 10px 25px rgba(0, 0, 0, 0.9); /* Depth shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #000;
  padding: 0;
  overflow: hidden;
  clip-path: circle(50% at 50% 50%);
}

#tab-missions .mission-image-glow {
  display: none;
}

#tab-missions .mission-illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* Shift focus slightly upward */
  border-radius: 50%;
  border: none;
  margin: 0;
  display: block;
  z-index: 2;
  transform-origin: center 25%; /* Scale from upper-center so head isn't cropped */
  transform: scale(1.75); /* Reduced slightly from 1.85 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#tab-missions .mission-card:hover .mission-illustration {
  transform: scale(1.85); /* Reduced hover scale accordingly */
}

/* Advertising Campaign Budget Control */
.advertising-control {
  background: linear-gradient(90deg, rgba(20, 26, 38, 0.8) 0%, rgba(12, 16, 24, 0.85) 100%);
  border: 1px solid rgba(223, 171, 41, 0.2);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.adv-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
}

.adv-title {
  color: var(--text-main);
  cursor: pointer;
}

.adv-value {
  color: var(--green-light);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  transition: color 0.3s ease;
}

.adv-value.insufficient {
  color: var(--danger-red);
}

.adv-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.adv-limit {
  font-size: 0.7rem;
  color: var(--text-muted);
  min-width: 44px;
  text-align: center;
}

.adv-slider {
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.adv-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.adv-slider::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary-gold);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
  box-shadow: 0 0 8px var(--gold-glow);
  transition: transform 0.1s ease;
}

.adv-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Clickable mission card styles and highlight pulse effect */
.mission-card {
  cursor: pointer;
}

@keyframes mission-pulse {
  0% {
    border-color: rgba(223, 171, 41, 0.4);
    box-shadow: 0 0 5px rgba(223, 171, 41, 0.2);
  }
  50% {
    border-color: var(--primary-gold);
    box-shadow: 0 0 25px rgba(223, 171, 41, 0.9);
    background: rgba(223, 171, 41, 0.08);
  }
  100% {
    border-color: rgba(223, 171, 41, 0.4);
    box-shadow: 0 0 5px rgba(223, 171, 41, 0.2);
  }
}
.upgrade-card.mission-highlight,
.new-upg-wrapper.mission-highlight,
.manager-card.mission-highlight,
.department-card.mission-highlight,
.prestige-panel.mission-highlight,
.gold-upgrade-card.mission-highlight {
  animation: mission-pulse 0.6s infinite ease-in-out;
  border-color: var(--primary-gold) !important;
}

/* Performance mode: disable backdrop blur on large devices too (under 1200px width) */
@media (max-width: 1200px) {
  .bank-floor, .control-panel, header, .teller-counter {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Mobile Responsiveness for Missions */
@media (max-width: 650px) {
  #tab-missions .mission-card {
    padding: 2.25rem 0.5rem 0.75rem 0.5rem;
  }
  #tab-missions .mission-card-top {
    grid-template-columns: 110px 1fr 56px;
    grid-template-areas: "image content circle";
    gap: 0.5rem;
  }
  #tab-missions .mission-image-box {
    width: 110px;
    height: 110px;
    border-width: 4px;
    margin: 0;
  }
  #tab-missions .mission-circle-progress {
    width: 56px;
    height: 56px;
    margin: 0;
  }
  #tab-missions .mission-circle-progress svg {
    width: 56px;
    height: 56px;
  }
  #tab-missions .progress-text-overlay {
    font-size: 0.65rem;
    letter-spacing: -0.3px;
    white-space: nowrap;
  }
  #tab-missions .mission-circle-progress .circle-text {
    font-size: 0.75rem;
    letter-spacing: -0.5px;
  }
  #tab-missions .mission-card .mission-title {
    font-size: 1.05rem;
  }
  #tab-missions .mission-action-zone {
    margin-top: 0.25rem;
    margin-bottom: 4px;
  }
}
/* Responsive adjustments to prevent horizontal shifts and overflows on smaller screens */
@media (max-width: 768px) {
  /* Performance & Layout overrides */
  /* Mobile perf fix: the game uses backdrop-filter: blur() on ~29 elements
     (nav, cards, modals). On phones this heavy compositor load freezes CSS
     transitions — a modal becomes "active" but its opacity never animates
     from 0 to 1, so it opens fully transparent and looks like nothing
     happened (e.g. tapping the fortune wheel appeared to do nothing).
     Dropping the blur on mobile unfreezes rendering; the glass panels keep
     their solid rgba() backgrounds so the look is preserved. */
  html body [class],
  html body [class]::before,
  html body [class]::after,
  html body [id],
  html body header,
  html body header::before,
  html body header::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }
  .control-panel, .tab-content, .tab-pane,
  .upgrade-card, .teller-counter, .department-card, .manager-card-v2, .mission-card {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab-content, .tab-pane, .control-panel {
    padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
  }
  .app-container {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    padding-top: max(0.75rem + env(safe-area-inset-top, 0px), 34px) !important;
    padding-left: calc(0.75rem + env(safe-area-inset-left)) !important;
    padding-right: calc(0.75rem + env(safe-area-inset-right)) !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }
  header {
    position: sticky;
    top: 0;
    z-index: 300;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
    background: rgba(10, 12, 20, 0.85);
    border-bottom: 1px solid rgba(223, 171, 41, 0.2);
  }
  .stats-bar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .stat-box {
    padding: 0.35rem 0.5rem !important;
  }
  .header-buttons-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: nowrap;
  }
  /* Tabs Navigation as Horizontal Swipable Row */
  .tabs-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    gap: 0;
    padding: 0.2rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
  }
  .tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .tab-btn {
    flex: 0 0 auto !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
  /* Simulator Board Compact Rules */
  .floor-map {
    min-height: 350px !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    border-radius: 14px;
  }
  /* Hide decorative items to free space */
  .gold-pillar, .potted-plant {
    display: none !important;
  }
  .security-camera {
    font-size: 0.95rem;
    top: 0.35rem;
    left: 0.35rem;
  }
  .atm-machine {
    font-size: 0.95rem;
    top: 0.35rem;
    right: 2rem;
  }
  /* Tellers Grid 2 Columns */
  .tellers-zone {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    width: 100%;
    padding-bottom: 0.8rem !important;
  }
  .tellers-zone::-webkit-scrollbar {
    display: none;
  }
  .teller-counter {
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 12px;
    min-height: 220px !important;
    height: auto !important;
  }
  .teller-counter.locked {
    min-height: 100px !important;
    padding: 0.5rem !important;
  }
  .glass-showcase {
    height: 240px !important;
  }
  .client-slot-3d {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.9rem !important;
    bottom: 5px !important;
    right: 5px !important;
    border-width: 1px !important;
  }
  .gold-plaque {
    padding: 0.4rem 0.35rem !important;
    gap: 0.15rem !important;
  }
  .plaque-title {
    font-size: 0.95rem !important;
  }
  .plaque-level {
    font-size: 0.85rem !important;
    padding: 0px 3px !important;
  }
  .plaque-cash {
    font-size: 1.05rem !important;
  }
  .plaque-collect-btn {
    font-size: 0.85rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  .plaque-progress-container {
    height: 2.5px !important;
  }
  .stat-label {
    font-size: 0.78rem !important;
  }
  .stat-value {
    font-size: 1.05rem !important;
  }
  .stat-sub {
    font-size: 0.75rem !important;
  }
  .collect-btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px;
  }
  .lock-icon {
    font-size: 1.1rem !important;
  }
  .lock-cost {
    font-size: 0.7rem !important;
  }
  /* Queue Zone Compact */
  .queue-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
  }
  .queue-zone {
    width: 100% !important;
    height: 56px !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 12px;
  }
  .queue-label {
    font-size: 0.8rem !important;
  }
  .waiting-sofa, .entrance-door {
    font-size: 1.2rem !important;
  }
  .customer-line {
    min-width: 162px !important;
    width: 162px !important;
    max-width: 162px !important;
    gap: 0.4rem !important;
    overflow: hidden !important;
  }
  .customer-avatar, .visual-client-icon {
    width: 36px !important;
    height: 36px !important;
  }
  /* Security Path Compact */
  .security-path {
    padding: 0.35rem 0.75rem !important;
    border-radius: 8px;
  }
  .guard-status-text {
    font-size: 0.7rem !important;
    margin-right: 1.8rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 90px) !important;
    display: inline-block !important;
  }
  .guard-avatar {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem !important;
    right: 0.6rem !important;
  }
  html[dir=ltr] .guard-avatar {
    right: auto !important;
    left: 0.6rem !important;
  }
  .guard-load {
    font-size: 0.7rem !important;
  }
  /* Vault Zone Horizontal & Compact */
  .vault-zone {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.4rem 0.6rem !important;
    gap: 0.5rem !important;
    border-radius: 10px;
    text-align: right !important;
  }
  html[dir=ltr] .vault-zone {
    text-align: left !important;
  }
  .vault-graphic {
    width: 72px !important;
    height: 72px !important;
    border: none !important;
    flex-shrink: 0;
  }
  .vault-graphic::before {
    font-size: 0.75rem !important;
  }
  .vault-info {
    gap: 0.35rem !important;
  }
  .vault-title {
    font-size: 0.95rem !important;
  }
  .vault-subtitle {
    font-size: 0.75rem !important;
    margin-top: 0 !important;
  }
  .vault-fill-bar-container {
    height: 12px !important;
    border-radius: 6px;
  }
  .vault-progress-label {
    font-size: 0.74rem !important;
  }
  .vault-stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.3rem !important;
    margin-top: 0.25rem !important;
  }
  .vault-stat-card {
    padding: 0.25rem 0.35rem !important;
    border-radius: 8px !important;
    gap: 0 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .vault-stat-icon {
    display: none !important;
  }
  .vault-stat-text {
    align-items: center !important;
    text-align: center !important;
  }
  .vault-stat-label {
    font-size: 0.7rem !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
  }
  .vault-stat-value {
    font-size: 0.75rem !important;
  }
  .vault-info-btn {
    display: none !important;
  }
  .collect-vault-btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px;
    width: auto !important;
    flex-shrink: 0;
  }
  /* Queue Status Warning Text Visible on Mobile */
  .queue-status-text {
    display: inline !important;
  }
  /* Advertising Control Compact */
  .advertising-control {
    padding: 0.35rem 0.6rem !important;
    border-radius: 8px;
  }
  .adv-header {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    width: 100% !important;
    margin-bottom: 0.2rem !important;
    font-size: 0.82rem !important;
  }
  .adv-title {
    font-size: 0.82rem !important;
  }
  .adv-value {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
  }
  .adv-slider-wrapper {
    gap: 0.4rem !important;
  }
  .adv-limit {
    font-size: 0.78rem !important;
    min-width: 40px !important;
  }
  .adv-slider::-webkit-slider-thumb {
    height: 24px !important;
    width: 24px !important;
    margin-top: -9px !important;
  }
  /* Modal Overlay Viewport containment and Scrolling */
  .modal-overlay {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: calc(1.5rem + env(safe-area-inset-top)) env(safe-area-inset-right) calc(1.5rem + env(safe-area-inset-bottom)) env(safe-area-inset-left) !important;
  }
  .modal-box {
    margin: auto !important;
    /* Cap height to the viewport and scroll internally so the close/claim
       buttons at the bottom are ALWAYS reachable on short phone screens
       (previously max-height:none let tall modals push buttons off-screen,
       leaving the modal un-closable and blocking the whole header). */
    max-height: calc(100dvh - 3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    padding: 1.25rem !important;
    width: 92% !important;
    gap: 0.85rem !important;
  }
  .modal-icon {
    font-size: 2.2rem !important;
  }
  .modal-title {
    font-size: 1.15rem !important;
  }
  .modal-text {
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }
  .modal-amount {
    font-size: 1.6rem !important;
  }
  .modal-close-btn {
    padding: 0.6rem 1.5rem !important;
    font-size: 0.85rem !important;
  }
  .login-streak-strip {
    gap: 0.25rem !important;
  }
  .login-streak-day {
    padding: 0.3rem 0.05rem !important;
  }
  .login-streak-day-label {
    font-size: 0.48rem !important;
  }
  .login-streak-day-icon {
    font-size: 0.9rem !important;
  }
  .login-streak-day-value {
    font-size: 0.5rem !important;
  }
  .lang-options-grid {
    gap: 0.6rem !important;
    margin-top: 0.85rem !important;
  }
  .lang-option-card {
    padding: 0.6rem !important;
    gap: 0.25rem !important;
  }
  .lang-flag {
    font-size: 1.6rem !important;
  }
  .lang-name {
    font-size: 0.8rem !important;
  }
  /* Upgrades & Prestige Cards Compact */
  .upgrade-card {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
  }
  .card-title {
    font-size: 0.8rem !important;
  }
  .card-desc {
    font-size: 0.7rem !important;
  }
  .card-stats {
    font-size: 0.7rem !important;
  }
  .buy-btn {
    min-width: 90px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }
  .bulk-upgrade-selector {
    padding: 0.4rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  .bulk-label {
    font-size: 0.78rem !important;
  }
  .bulk-btn-option {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.82rem !important;
  }
  /* Managers grid single column on mobile */
  .managers-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  /* Control panel: no height limit on mobile — let it scroll naturally */
  .control-panel {
    max-height: none !important;
  }
  /* Tab content: no overflow scroll on mobile — page scrolls instead */
  .tab-content {
    overflow-y: visible !important;
    max-height: none !important;
  }
  /* Reduce brand area on mobile */
  .brand-icon {
    font-size: 1.8rem !important;
  }
  .brand-title h1 {
    font-size: 1.2rem !important;
  }
  .brand-title p {
    font-size: 0.82rem !important;
  }
  /* Make all interactive items full-width on mobile for easier tapping */
  .collect-vault-btn {
    width: auto !important;
  }
  /* Footer compact */
  footer {
    font-size: 0.7rem !important;
    padding: 0.5rem !important;
    text-align: center !important;
  }
  /* Reduce padding inside bank-floor and control-panel panels */
  .bank-floor, .control-panel {
    padding: 0.75rem !important;
  }
  /* Reduce gap between sections (header/floor/control) */
  .app-container {
    gap: 0.6rem !important;
  }
  /* Panel header compact */
  .panel-header {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0 !important;
  }
  /* Panel badge: truncate text instead of clipping */
  .panel-badge {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 45% !important;
    font-size: 0.78rem !important;
    padding: 0.1rem 0.45rem !important;
  }
  /* Panel title slightly smaller */
  .panel-title {
    font-size: 0.95rem !important;
  }
  /* Tab buttons: ensure equal minimum size and better touch area */
  .tab-btn {
    min-height: 48px !important;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.78rem !important;
  }
  /* floor-map: reduce padding further */
  .floor-map {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
}
/* Force absolute horizontal viewport containment */
html, body {
  max-width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.security-path {
  overflow: visible;
}

/* Queue Zone Status Indicator Colors */
.queue-zone.status-ok {
  border-color: rgba(16, 185, 129, 0.4) !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.04) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(16, 185, 129, 0.1) !important;
}

.queue-zone.status-alert {
  border-color: rgba(239, 68, 68, 0.5) !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.06) 0%, rgba(0, 0, 0, 0.3) 100%) !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(239, 68, 68, 0.25) !important;
  animation: queue-alert-pulse 1.5s infinite ease-in-out;
}

@keyframes queue-alert-pulse {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(239, 68, 68, 0.15);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.8);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(239, 68, 68, 0.4);
  }
}
/* Language Settings Button */
#lang-btn {
  font-size: 1.2rem;
  margin-right: 0.25rem;
}

/* Language Selection Grid and Options */
.lang-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.lang-option-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-main);
  transition: var(--transition-prop);
}

.lang-option-card:hover {
  background: var(--surface-hover);
  border-color: var(--primary-gold);
  box-shadow: 0 0 12px var(--gold-glow);
  transform: translateY(-2px);
}

.lang-option-card.active {
  border-color: var(--primary-gold);
  background: rgba(223, 171, 41, 0.12);
  box-shadow: 0 0 15px var(--gold-glow);
}

.lang-flag {
  font-size: 2.2rem;
  line-height: 1;
}

.lang-name {
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

.reset-confirm-wrapper {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.reset-confirm-wrapper label {
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}

.prestige-options-mt {
  margin-top: 1.5rem;
}

.settings-theme-section,
.settings-danger-section {
  margin-top: 1.5rem;
  border-top: 1px dashed var(--border-color);
  padding-top: 1rem;
  width: 100%;
  text-align: center;
}

.settings-section-title {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.settings-danger-title {
  color: var(--danger-red);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* LTR layout fixes for visual stability */
html[dir=ltr] .guard-avatar {
  right: auto;
  left: 1rem;
}

html[dir=ltr] .brand-icon {
  animation: float 3s ease-in-out infinite;
}

html[dir=ltr] .stat-box::before {
  right: auto;
  left: 0;
}

/* Premium Gold Aesthetics Enhancements */
.shares-stat .stat-value {
  color: var(--primary-gold) !important;
  text-shadow: 0 0 5px var(--gold-glow);
}

#prestige-shares-gained {
  color: var(--primary-gold) !important;
  text-shadow: 0 0 10px var(--gold-glow) !important;
}

.gold-upgrade-title {
  color: var(--gold-light) !important;
}

.gold-upgrade-card {
  border: 1px solid rgba(223, 171, 41, 0.15) !important;
}

.gold-upgrade-card:hover {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 10px rgba(223, 171, 41, 0.15) !important;
}

/* Touch Action Optimization to prevent 300ms Click Delay on mobile devices */
button, .buy-btn, .tab-btn, .collect-vault-btn,
.bulk-btn-option, .sound-toggle-btn,
.modal-close-btn, .lang-option-card {
  touch-action: manipulation;
}

/* Interactive elements minimum heights for touch targets */
.buy-btn, .tab-btn, .collect-vault-btn,
.modal-close-btn, .bulk-btn-option, .sound-toggle-btn {
  min-height: 48px;
}

/* 375px Extra Small Mobile Breakpoint */
@media (max-width: 375px) {
  /* Shrink stats text to prevent clipping */
  .stat-value {
    font-size: 0.95rem !important;
  }
  .stat-label {
    font-size: 0.74rem !important;
  }
  .stat-sub {
    font-size: 0.7rem !important;
  }
  /* Minimize margins & headers padding */
  header {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
  .stats-bar {
    gap: 0.5rem !important;
  }
  .header-buttons-row {
    gap: 0.35rem !important;
  }
  .topbar-action-btn,
  .sound-toggle-btn,
  .boost-toggle-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
  }
  .topbar-action-btn span,
  .sound-toggle-btn span,
  .boost-toggle-btn span {
    font-size: 1.15rem !important;
  }
  /* Control upgrades card layout optimization */
  .upgrade-card {
    padding: 0.6rem !important;
    gap: 0.5rem !important;
  }
  .card-title {
    font-size: 0.8rem !important;
  }
  .card-desc {
    font-size: 0.78rem !important;
  }
  .card-stats {
    font-size: 0.75rem !important;
  }
  .buy-btn {
    min-width: 90px !important;
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    min-height: 44px !important;
  }
  /* Vault UI components compact styling */
  .vault-zone {
    padding: 0.6rem !important;
    gap: 0.5rem !important;
  }
  .vault-title {
    font-size: 0.8rem !important;
  }
  .collect-vault-btn {
    font-size: 0.75rem !important;
    padding: 0.45rem 0.75rem !important;
  }
}
/* CTR Ad Button Pulse Animation */
.ad-pulse-button {
  animation: gold-ad-pulse 2s infinite ease-in-out !important;
  will-change: transform;
}

@keyframes gold-ad-pulse {
  0%, 100% {
    transform: scale(1) !important;
    opacity: 0.85 !important;
  }
  50% {
    transform: scale(1.04) !important;
    opacity: 1 !important;
  }
}
/* Toast Notification Styles */
#toast-container {
  position: fixed !important;
  top: calc(58px + env(safe-area-inset-top, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  width: max-content !important;
  max-width: 90vw !important;
  z-index: 1000001 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  pointer-events: none !important;
}

.custom-toast {
  background: linear-gradient(135deg, rgba(16, 22, 40, 0.96) 0%, rgba(8, 12, 24, 0.98) 100%) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 14px !important;
  font-family: var(--font-heading, system-ui, sans-serif) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px !important;
  opacity: 0 !important;
  transform: translateY(-15px) scale(0.95) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, box-shadow 0.3s ease !important;
  text-align: center !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(223, 171, 41, 0.25) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.5) !important;
}

.custom-toast.toast-success {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(16, 185, 129, 0.35) !important;
}

.custom-toast.toast-info {
  border-color: rgba(223, 171, 41, 0.6) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(223, 171, 41, 0.35) !important;
}

.custom-toast.toast-danger {
  border-color: rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(239, 68, 68, 0.35) !important;
}

.custom-toast.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Crash Overlay Styles */
#crash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  padding: 20px;
  text-align: center;
}

#crash-overlay h1 {
  color: var(--danger-red, #ff4444);
  margin-bottom: 15px;
}

#crash-overlay p {
  margin-bottom: 25px;
  font-size: 1.1rem;
}

#crash-overlay button {
  padding: 12px 28px;
  background: var(--primary-gold, #dfab29);
  color: #000;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 4px 15px rgba(223, 171, 41, 0.3);
  transition: transform var(--transition-speed), filter var(--transition-speed);
}

#crash-overlay button:hover {
  filter: brightness(1.1);
}

/* Individual Color Accent Lights and Client badges for Tellers 1 to 7 */
.teller-counter[data-id="0"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.55) 0%, rgba(59, 130, 246, 0) 70%) !important;
}

.teller-counter[data-id="0"] .client-slot-3d {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(59, 130, 246, 0.5) !important;
}

.teller-counter[data-id="1"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(245, 158, 11, 0.55) 0%, rgba(245, 158, 11, 0) 70%) !important;
}

.teller-counter[data-id="1"] .client-slot-3d {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

.teller-counter[data-id="2"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.55) 0%, rgba(139, 92, 246, 0) 70%) !important;
}

.teller-counter[data-id="2"] .client-slot-3d {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(139, 92, 246, 0.5) !important;
}

.teller-counter[data-id="3"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.55) 0%, rgba(239, 68, 68, 0) 70%) !important;
}

.teller-counter[data-id="3"] .client-slot-3d {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(239, 68, 68, 0.5) !important;
}

.teller-counter[data-id="4"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.55) 0%, rgba(16, 185, 129, 0) 70%) !important;
}

.teller-counter[data-id="4"] .client-slot-3d {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(16, 185, 129, 0.5) !important;
}

.teller-counter[data-id="5"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(236, 72, 153, 0.55) 0%, rgba(236, 72, 153, 0) 70%) !important;
}

.teller-counter[data-id="5"] .client-slot-3d {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(236, 72, 153, 0.5) !important;
}

.teller-counter[data-id="6"] .glass-showcase::before {
  background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.55) 0%, rgba(6, 182, 212, 0) 70%) !important;
}

.teller-counter[data-id="6"] .client-slot-3d {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7), 0 0 10px rgba(6, 182, 212, 0.5) !important;
}

/* Redesigned Managers Tab Grid & Cards */
.managers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  width: 100%;
}

.upgrade-card.manager-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #0f1424 0%, #151b2d 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
  gap: 0 !important;
}

/* Card Themes */
.upgrade-card.manager-card.theme-gold {
  border: 1px solid rgba(223, 171, 41, 0.35) !important;
}

.upgrade-card.manager-card.theme-blue {
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

.upgrade-card.manager-card.theme-purple {
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

.upgrade-card.manager-card.theme-amber {
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.upgrade-card.manager-card.theme-red {
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.upgrade-card.manager-card.theme-green {
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.upgrade-card.manager-card.theme-gold:hover {
  border-color: rgba(223, 171, 41, 0.65) !important;
  box-shadow: 0 6px 20px rgba(223, 171, 41, 0.15) !important;
}

.upgrade-card.manager-card.theme-blue:hover {
  border-color: rgba(59, 130, 246, 0.65) !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15) !important;
}

.upgrade-card.manager-card.theme-purple:hover {
  border-color: rgba(168, 85, 247, 0.65) !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.15) !important;
}

.upgrade-card.manager-card.theme-amber:hover {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15) !important;
}

.upgrade-card.manager-card.theme-red:hover {
  border-color: rgba(239, 68, 68, 0.65) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.15) !important;
}

.upgrade-card.manager-card.theme-green:hover {
  border-color: rgba(34, 197, 94, 0.65) !important;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.15) !important;
}

.upgrade-card.manager-card:hover {
  transform: translateY(-3px);
}

.upgrade-card.manager-card.locked {
  opacity: 0.75 !important;
  background: linear-gradient(135deg, #080c14 0%, #0f1424 100%) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

/* Main Layout: Header on top, Portrait and info below */
.mgr-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 0.6rem;
}

.mgr-body-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Portrait container */
.mgr-portrait-box {
  position: relative;
  width: 90px;
  height: 145px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  background: #090d16;
}

.theme-gold .mgr-portrait-box {
  border: 2px solid rgba(223, 171, 41, 0.7);
}

.theme-blue .mgr-portrait-box {
  border: 2px solid rgba(59, 130, 246, 0.7);
}

.theme-purple .mgr-portrait-box {
  border: 2px solid rgba(168, 85, 247, 0.7);
}

.theme-amber .mgr-portrait-box {
  border: 2px solid rgba(245, 158, 11, 0.7);
}

.theme-red .mgr-portrait-box {
  border: 2px solid rgba(239, 68, 68, 0.7);
}

.theme-green .mgr-portrait-box {
  border: 2px solid rgba(34, 197, 94, 0.7);
}

.upgrade-card.manager-card.locked .mgr-portrait-box {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.mgr-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 0.5s ease;
}

.upgrade-card.manager-card.locked .mgr-portrait-img {
  filter: grayscale(1) opacity(0.35);
}

.upgrade-card.manager-card:not(.locked):hover .mgr-portrait-img {
  transform: scale(1.06);
}

/* Top Left Gem Badge inside portrait */
.mgr-gem-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.theme-gold .mgr-gem-badge {
  background: linear-gradient(135deg, #dfab29, #ab7f17);
}

.theme-blue .mgr-gem-badge {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.theme-purple .mgr-gem-badge {
  background: linear-gradient(135deg, #a855f7, #6b21a8);
}

.theme-amber .mgr-gem-badge {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}

.theme-red .mgr-gem-badge {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.theme-green .mgr-gem-badge {
  background: linear-gradient(135deg, #22c55e, #15803d);
}

.upgrade-card.manager-card.locked .mgr-gem-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Info Section */
.mgr-info-box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: 0.9rem; /* RTL margin right */
  justify-content: center;
}

html[dir=ltr] .mgr-info-box {
  margin-right: 0;
  margin-left: 0.9rem;
}

.mgr-title-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mgr-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  margin-bottom: 0.2rem;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mgr-title-divider {
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 171, 41, 0.5), transparent);
  margin: 0 auto 0.4rem auto;
}

/* Stars Rating */
.mgr-stars-box {
  display: flex;
  gap: 4px;
  margin-bottom: 0.4rem;
}

.mgr-stars-box .star {
  font-size: 1.05rem;
  line-height: 1;
}

.mgr-stars-box .star.gold-star {
  color: #dfab29;
}

.mgr-stars-box .star.gray-star {
  color: rgba(255, 255, 255, 0.15);
}

/* Level Badge */
.mgr-lvl-badge {
  font-size: 0.95rem;
  font-weight: 800;
  color: #dfab29;
  background: transparent;
  border: 1.5px solid #dfab29;
  padding: 0.15rem 1rem;
  border-radius: 6px;
  width: fit-content;
  margin-bottom: 0.8rem;
}

.theme-gold .mgr-lvl-badge {
  color: #dfab29;
  border-color: #dfab29;
  background: transparent;
}

.theme-blue .mgr-lvl-badge {
  color: #60a5fa;
  border-color: #60a5fa;
  background: transparent;
}

.theme-purple .mgr-lvl-badge {
  color: #c084fc;
  border-color: #c084fc;
  background: transparent;
}

.theme-amber .mgr-lvl-badge {
  color: #fbbf24;
  border-color: #fbbf24;
  background: transparent;
}

.theme-red .mgr-lvl-badge {
  color: #f87171;
  border-color: #f87171;
  background: transparent;
}

.theme-green .mgr-lvl-badge {
  color: #4ade80;
  border-color: #4ade80;
  background: transparent;
}

/* Stats details */
.mgr-stats-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mgr-stat-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #181d2c;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  width: 100%;
  box-sizing: border-box;
}

html[dir=rtl] .mgr-stat-item {
  flex-direction: row-reverse;
}

.mgr-stat-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mgr-stat-val {
  font-weight: 800;
  font-size: 1.05rem;
}

.mgr-stat-sep {
  color: rgba(255, 255, 255, 0.15);
  font-weight: 300;
  margin: 0 4px;
}

.mgr-stat-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mgr-stat-label {
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.9rem;
}

.mgr-stat-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(223, 171, 41, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #dfab29;
}

.theme-gold .mgr-stat-val {
  color: #f5cf6d;
}

.theme-blue .mgr-stat-val {
  color: #93c5fd;
}

.theme-purple .mgr-stat-val {
  color: #d8b4fe;
}

.theme-amber .mgr-stat-val {
  color: #fcd34d;
}

.theme-red .mgr-stat-val {
  color: #fca5a5;
}

.theme-green .mgr-stat-val {
  color: #86efac;
}

/* Footer row */
.mgr-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.95rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
}

.mgr-footer-info {
  display: flex;
  flex-direction: column;
  text-align: right;
}

html[dir=ltr] .mgr-footer-info {
  text-align: left;
}

.mgr-footer-lbl {
  font-size: 0.88rem;
  color: rgba(248, 250, 252, 0.5);
  font-weight: 500;
}

.mgr-footer-val-box {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 0.15rem;
}

.mgr-footer-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: #f5cf6d;
  font-family: "Outfit", sans-serif;
}

.per-hour-lbl {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
}

.mgr-buy-btn {
  min-width: 120px !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

/* Active status indicator */
.mgr-active-badge {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1.5px solid #16a34a !important;
  color: #16a34a !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  padding: 0.45rem 1.2rem !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-width: 120px !important;
}

/* =========================================
   ULTRA PREMIUM UI/UX OVERRIDES
   ========================================= */
/* 1. Deep Glassmorphism for Panels */
:root {
  --glass-blur: blur(20px);
}

header, .control-panel, .bank-floor {
  background: linear-gradient(145deg, rgba(20, 24, 36, 0.6) 0%, rgba(10, 12, 18, 0.8) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

/* 2. Modals with Cinematic Scale-in */
.modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-box {
  background: linear-gradient(135deg, rgba(25, 30, 45, 0.95) 0%, rgba(15, 20, 30, 0.98) 100%) !important;
  border: 1px solid rgba(223, 171, 41, 0.3) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), inset 0 2px 2px rgba(255, 255, 255, 0.1) !important;
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

.modal-overlay.active .modal-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* 3. Simulator Area: Grid & Glows */
.floor-map {
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
  background-size: 30px 30px !important;
  background-color: rgba(10, 15, 25, 0.4) !important;
  border: 1px inset rgba(0, 0, 0, 0.5) !important;
}

.security-path {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px dashed rgba(223, 171, 41, 0.3) !important;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(223, 171, 41, 0.1) !important;
}

.vault-graphic {
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.3) !important;
  animation: vault-glow 3s infinite alternate;
}

@keyframes vault-glow {
  0% {
    box-shadow: 0 0 15px rgba(223, 171, 41, 0.2);
  }
  100% {
    box-shadow: 0 0 35px rgba(223, 171, 41, 0.6);
  }
}
/* 4. Floating Cash Upgrades */
@keyframes float-up {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    transform: translateY(-20px) scale(1.3);
    opacity: 1;
    text-shadow: 0 0 15px var(--green-glow);
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}
/* 5. Tabs Holographic Effect */
.tabs-nav {
  border-bottom: 2px solid rgba(255, 255, 255, 0.05) !important;
  position: relative;
  bottom: auto !important;
}

.tab-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 600 !important;
  position: relative;
  padding-bottom: 12px !important;
  transition: all 0.3s ease !important;
}

.tab-btn:hover {
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.tab-btn.active {
  color: var(--primary-gold) !important;
  text-shadow: 0 0 12px rgba(223, 171, 41, 0.6) !important;
}

.tab-btn::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-gold);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  box-shadow: 0 -2px 10px var(--primary-gold);
}

.tab-btn.active::after {
  transform: scaleX(1);
}

/* 6. Dashboard Glowing Stats */
.stat-box {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.stat-box.cash-stat {
  border-right: 3px solid var(--money-green) !important;
}

.stat-box.shares-stat {
  border-right: 3px solid var(--primary-gold) !important;
}

/* ===================================================
   AAA MASTERPIECE ANALYTICS DASHBOARD (Exact Match Reference)
   =================================================== */
.analytics-modal-box.luxury-analytics-modal {
  max-width: 440px !important;
  width: 93vw !important;
  background: #060911 !important;
  background: radial-gradient(circle at 50% 0%, #0f172a 0%, #050810 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.35) !important;
  border-radius: 28px !important;
  padding: 1.1rem 0.95rem 0.95rem 0.95rem !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.98), 0 0 35px rgba(56, 189, 248, 0.18) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  max-height: 87vh !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Background Tech Constellation Accents */
.analytics-tech-bg-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 0;
}
.analytics-tech-bg-lines .tech-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px #38bdf8;
}
.analytics-tech-bg-lines .dot-1 {
  top: 22px;
  left: 24%;
}
.analytics-tech-bg-lines .dot-2 {
  top: 38px;
  left: 16%;
}
.analytics-tech-bg-lines .dot-3 {
  top: 26px;
  right: 20%;
}
.analytics-tech-bg-lines .tech-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.25) 50%, transparent 100%);
}
.analytics-tech-bg-lines .line-1 {
  top: 23px;
  left: 15%;
  width: 70px;
  transform: rotate(-15deg);
}
.analytics-tech-bg-lines .line-2 {
  top: 32px;
  right: 18%;
  width: 80px;
  transform: rotate(20deg);
}

/* Close X circular button */
.analytics-modal-close-x {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: all 0.2s ease;
}
.analytics-modal-close-x:active {
  transform: scale(0.92);
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ef4444;
}

.modal-header-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-top: 0.1rem;
}

.analytics-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(96, 165, 250, 0.6);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.analytics-icon-badge .analytics-hero-glyph {
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.analytics-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.analytics-title-group .modal-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.analytics-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 2px 10px;
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
  color: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
}
.analytics-live-status-pill .live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
  animation: statusDotPulse 1.8s infinite;
}

@keyframes statusDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}
.analytics-content-scroll {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  max-height: 57vh;
  padding: 2px 4px 6px 4px;
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(223, 171, 41, 0.3) transparent;
}
.analytics-content-scroll::-webkit-scrollbar {
  width: 3px;
}
.analytics-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(223, 171, 41, 0.3);
  border-radius: 3px;
}

/* Sections */
.analytics-section-card {
  background: rgba(10, 15, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.analytics-section-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.analytics-section-header .analytics-section-icon-box {
  font-size: 0.95rem;
}
.analytics-section-header .analytics-section-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0;
}

/* Tellers List */
.analytics-tellers-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.analytic-teller-card-aaa {
  background: rgba(11, 16, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
  /* Rank 1 Highlight: Luxurious Golden Frame */
}
.analytic-teller-card-aaa.rank-1 {
  border: 1.5px solid rgba(223, 171, 41, 0.85) !important;
  background: linear-gradient(90deg, rgba(223, 171, 41, 0.12) 0%, rgba(11, 16, 28, 0.98) 100%) !important;
  box-shadow: 0 0 20px rgba(223, 171, 41, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.teller-card-main-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Rank Shields / Badges */
.teller-rank-shield {
  width: 30px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.teller-rank-shield.rank-badge-gold {
  background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
  color: #111827;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}
.teller-rank-shield.rank-badge-silver {
  background: linear-gradient(180deg, #f1f5f9 0%, #64748b 100%);
  color: #0f172a;
}
.teller-rank-shield.rank-badge-bronze {
  background: linear-gradient(180deg, #f59e0b 0%, #78350f 100%);
  color: #ffffff;
}
.teller-rank-shield.rank-badge-other {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
}

/* Circular Portrait with Color-Coded Rim */
.teller-portrait-wrapper-zoomed {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(223, 171, 41, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.teller-portrait-wrapper-zoomed.ring-gold {
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}
.teller-portrait-wrapper-zoomed.ring-silver {
  border-color: #cbd5e1;
}
.teller-portrait-wrapper-zoomed.ring-bronze {
  border-color: #d97706;
}
.teller-portrait-wrapper-zoomed.ring-amber {
  border-color: #f97316;
}
.teller-portrait-wrapper-zoomed.ring-green {
  border-color: #22c55e;
}
.teller-portrait-wrapper-zoomed.ring-gray {
  border-color: rgba(255, 255, 255, 0.2);
}
.teller-portrait-wrapper-zoomed .teller-close-up-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.teller-portrait-wrapper-zoomed .teller-status-dot-active {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  border: 1.2px solid #0b0f19;
  box-shadow: 0 0 6px #4ade80;
  z-index: 2;
}

.teller-meta-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.teller-name-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.teller-name-line .teller-real-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}
.teller-name-line .teller-lvl-badge {
  font-family: "Outfit", sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  color: #dfab29;
  background: rgba(223, 171, 41, 0.12);
  border: 1px solid rgba(223, 171, 41, 0.4);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

.teller-bar-container {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.teller-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.teller-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #4ade80 100%);
  border-radius: 3px;
}

.teller-share-label {
  font-family: "Outfit", sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}

.teller-yield-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.teller-yield-col .teller-yield-val {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.4);
  white-space: nowrap;
}
.teller-yield-col .teller-yield-unit {
  font-size: 0.65rem;
  color: #94a3b8;
  line-height: 1;
}

/* Bottom Split Section: 2 Columns Side-by-Side */
.analytics-bottom-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.6rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Operations Balance Grid */
.ops-flow-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ops-flow-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ops-flow-row .ops-flow-left {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.ops-flow-row .ops-flow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ops-flow-row .ops-flow-icon {
  font-size: 0.78rem;
}
.ops-flow-row .ops-flow-title {
  font-size: 0.7rem;
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
}
.ops-flow-row .ops-flow-right {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
}
.ops-flow-row .ops-flow-val {
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
}
.ops-flow-row .ops-flow-subtag {
  font-size: 0.64rem;
  color: #94a3b8;
}
.ops-flow-row.ok .ops-flow-dot {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}
.ops-flow-row.ok .ops-flow-val {
  color: #4ade80;
}
.ops-flow-row.busy {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}
.ops-flow-row.busy .ops-flow-dot {
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}
.ops-flow-row.busy .ops-flow-val {
  color: #fbbf24;
}

/* Masterpiece Advisor Card */
.analytic-optimal-card-master {
  background: linear-gradient(135deg, rgba(223, 171, 41, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.2px solid rgba(223, 171, 41, 0.45);
  border-radius: 12px;
  padding: 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.analytic-optimal-card-master .optimal-star-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.3) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.2px solid rgba(223, 171, 41, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.analytic-optimal-card-master .optimal-star-circle .optimal-star-glyph {
  font-size: 1.1rem;
}
.analytic-optimal-card-master .optimal-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.analytic-optimal-card-master .optimal-text-group .optimal-headline {
  font-size: 0.76rem;
  font-weight: 800;
  color: #ffd700;
  line-height: 1.2;
}
.analytic-optimal-card-master .optimal-text-group .optimal-sub {
  font-size: 0.65rem;
  color: #cbd5e1;
  line-height: 1.2;
}
.analytic-optimal-card-master.warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-color: rgba(245, 158, 11, 0.45);
}
.analytic-optimal-card-master.warning .optimal-headline {
  color: #fbbf24;
}
.analytic-optimal-card-master.alert {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(15, 23, 42, 0.85) 100%);
  border-color: rgba(239, 68, 68, 0.45);
}
.analytic-optimal-card-master.alert .optimal-headline {
  color: #f87171;
}

/* Masterpiece Golden Close Button */
.luxury-analytics-close-btn {
  width: 100% !important;
  background: linear-gradient(180deg, #d8a02c 0%, #9e7118 100%) !important;
  border: 1.5px solid #ffe885 !important;
  border-radius: 14px !important;
  color: #080c14 !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(216, 160, 44, 0.45), inset 0 1px 2px #fff3b0 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.luxury-analytics-close-btn:active {
  transform: scale(0.98);
}

.bulk-options {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.theme-options-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

.theme-option-btn-choice {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 1.2rem 0.5rem;
  font-weight: 800;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid transparent;
}

/* Individual Theme Colors & Gradients */
.theme-option-btn-choice[data-theme=dark] {
  background: linear-gradient(135deg, #1f1f1f 0%, #050505 100%);
  color: #f3f4f6;
  border-color: #333;
}

.theme-option-btn-choice[data-theme=white] {
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  color: #0f172a;
  border-color: #cbd5e1;
}

.theme-option-btn-choice[data-theme=blue] {
  background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
  color: #f8fafc;
  border-color: #1e40af;
}

/* Hover Effects */
.theme-option-btn-choice:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Active Glow Effects */
.theme-option-btn-choice[data-theme=dark].active {
  border-color: #a855f7;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(168, 85, 247, 0.2);
}

.theme-option-btn-choice[data-theme=white].active {
  border-color: #dfab29;
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.6), inset 0 0 10px rgba(223, 171, 41, 0.2);
}

.theme-option-btn-choice[data-theme=blue].active {
  border-color: #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(56, 189, 248, 0.2);
}

/* Active Checkmark */
.theme-option-btn-choice::before {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 1.1rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.theme-option-btn-choice.active::before {
  opacity: 1;
  transform: scale(1);
}

.theme-option-btn-choice[data-theme=dark]::before {
  color: #a855f7;
}

.theme-option-btn-choice[data-theme=white]::before {
  color: #dfab29;
}

.theme-option-btn-choice[data-theme=blue]::before {
  color: #38bdf8;
}

.secondary-btn, .prestige-double-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.secondary-btn:hover, .prestige-double-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.prestige-reward-box {
  background: rgba(223, 171, 41, 0.1);
  border: 1px solid var(--primary-gold);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 1rem;
}

.click-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-right: 0.25rem;
  text-align: center;
  margin-top: 0.5rem;
}

.vault-cap-icon, .vault-shield-icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.collect-btn-icon {
  margin-left: 0.5rem;
}

.modal-event-cash-wrapper {
  font-size: 1.5rem;
  color: var(--money-green);
  text-align: center;
  font-weight: bold;
  margin: 1rem 0;
}

/* Bulk Upgrade Selector (Restored) */
.bulk-upgrade-selector {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  margin-bottom: 0.5rem;
  justify-content: flex-end; /* Align to the end of the row */
}

.bulk-label {
  font-weight: 800;
  color: #94a3b8;
  font-size: 1.1rem;
}

.bulk-options {
  display: flex;
  align-items: center;
  background: rgba(15, 20, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.25rem;
  border-radius: 30px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
}

.bulk-btn-option {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid transparent;
  padding: 0.4rem 1.25rem;
  border-radius: 20px;
  font-weight: 800;
  font-size: 1.05rem;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bulk-btn-option:hover {
  color: #ffffff;
}

.bulk-btn-option.active {
  background: linear-gradient(180deg, #dfab29 0%, #b48518 100%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(223, 171, 41, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  border: none;
}

/* Restored Boost Toggle Button */
.boost-toggle-btn {
  background: linear-gradient(145deg, rgba(67, 30, 15, 0.95) 0%, rgba(30, 12, 5, 0.98) 100%) !important;
  border: 1.5px solid #fb923c !important;
  color: #fb923c !important;
  padding: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  white-space: nowrap !important;
}

@media (min-width: 650px) {
  .boost-toggle-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
  }
  .boost-toggle-btn span {
    font-size: 1.45rem !important;
  }
}
.boost-toggle-btn span {
  font-size: 1.3rem !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)) !important;
}

.boost-toggle-btn::after {
  display: none !important;
}

.boost-toggle-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(251, 146, 60, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
}

.boost-toggle-btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 10px rgba(251, 146, 60, 0.3) !important;
}

.boost-toggle-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border-color: #34d399 !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.5) !important;
}

.boost-toggle-btn.offer {
  background: linear-gradient(135deg, #b45309, #d97706) !important;
  border-color: #f59e0b !important;
  color: #fff !important;
  animation: boostOfferPulse 1.5s ease-in-out infinite !important;
}

@keyframes boostOfferPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}
@keyframes slideUpIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ad-pulse-button {
  animation: pulseAd 2s infinite ease-in-out;
}

@keyframes pulseAd {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
  }
  100% {
    transform: scale(1);
  }
}
/* ============================================================
   BRANCHES TAB - GOLD UPGRADES SHOP SECTION
   ============================================================ */
.gold-shop-panel {
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   PRESTIGE SHOP HEADER (NEW PREMIUM DESIGN)
   ========================================================= */
.prestige-shop-header {
  position: relative;
  margin-top: 1.5rem;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(223, 171, 41, 0.4);
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at top center, rgba(30, 40, 80, 0.4) 0%, rgba(10, 15, 30, 0) 70%);
}

.prestige-shop-bg-stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 80px 70px, #d4af37, rgba(0, 0, 0, 0)), radial-gradient(1.5px 1.5px at 150px 20px, #ffffff, rgba(0, 0, 0, 0)), radial-gradient(2.5px 2.5px at 250px 90px, #ffffff, rgba(0, 0, 0, 0)), radial-gradient(1.5px 1.5px at 320px 40px, #d4af37, rgba(0, 0, 0, 0));
  opacity: 0.5;
  pointer-events: none;
  animation: twinkleBg 4s infinite alternate;
}

@keyframes twinkleBg {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 0.7;
  }
}
.prestige-title-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}

.prestige-temple-img {
  height: 90px;
  object-fit: contain;
  mix-blend-mode: screen; /* Removes black background from AI generated icons */
  filter: drop-shadow(0 0 25px rgba(223, 171, 41, 0.9));
  animation: floatIcon 4s ease-in-out infinite alternate;
}

@keyframes floatIcon {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-5px);
  }
}
.prestige-title-text {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, #ffe38f 30%, #d4af37 60%, #b8860b 100%);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.5px;
  text-align: right;
}

.prestige-subtitle {
  font-size: 1.4rem;
  opacity: 0.85;
  background: linear-gradient(180deg, #ffe38f 0%, #b8860b 100%);
  -webkit-background-clip: text;
}

.prestige-shop-header .prestige-description {
  color: #e0e5ec;
  font-size: 1rem;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  max-width: 400px;
  margin: 0 auto;
}

/* =========================================================
   Grid of gold upgrade cards 
   ========================================================= */
.gold-upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

/* =========================================================
   Ultra-Premium Gold Upgrade Cards 
   ========================================================= */
.gold-upgrade-card {
  background: url("../images/gold_swoosh.svg") right bottom/cover no-repeat, linear-gradient(145deg, #070d20 0%, #030612 100%) !important;
  background-blend-mode: color-dodge, normal;
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  transition: transform 0.2s ease, filter 0.3s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.95), inset 0 0 40px rgba(10, 20, 50, 0.9);
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  border: none !important;
  z-index: 1;
}

/* Jewel Corners and Massive Gold Frame */
.gold-upgrade-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
  /* This creates the thick gold border and the blue jewels in the corners */
  background: radial-gradient(circle at 18px 18px, #0044ff 1px, #1a237e 4px, #000 6px, transparent 7px), radial-gradient(circle at calc(100% - 18px) 18px, #0044ff 1px, #1a237e 4px, #000 6px, transparent 7px), radial-gradient(circle at 18px calc(100% - 18px), #0044ff 1px, #1a237e 4px, #000 6px, transparent 7px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #0044ff 1px, #1a237e 4px, #000 6px, transparent 7px), radial-gradient(circle at 18px 18px, #fcebb6 6px, #a67c00 12px, transparent 15px), radial-gradient(circle at calc(100% - 18px) 18px, #fcebb6 6px, #a67c00 12px, transparent 15px), radial-gradient(circle at 18px calc(100% - 18px), #fcebb6 6px, #a67c00 12px, transparent 15px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #fcebb6 6px, #a67c00 12px, transparent 15px), linear-gradient(135deg, #fcebb6 0%, #a67c00 20%, #2a1f0b 50%, #a67c00 80%, #fcebb6 100%);
  /* We mask out the center so it only shows as a thick border */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 6px; /* border thickness */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9);
}

/* Inner golden etched line */
.gold-upgrade-card::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1.5px solid rgba(223, 171, 41, 0.5);
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 20px rgba(223, 171, 41, 0.1);
}

.gold-upgrade-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* =========================================================
   Right Side: Large 3D Illustration 
   ========================================================= */
.gold-card-right {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10, 15, 35, 0.9), rgb(0, 0, 0)) padding-box, linear-gradient(135deg, #a67c00 0%, #ffe066 50%, #4a3614 100%) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 0 25px rgba(223, 171, 41, 0.2);
  z-index: 1;
}

/* Subtle glow behind the image inside its frame */
.gold-card-right::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.3) 0%, rgba(0, 0, 0, 0) 60%);
  z-index: 0;
  animation: slowSpin 15s linear infinite;
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.gold-big-illustration {
  width: 95%;
  height: 95%;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.9));
}

/* =========================================================
   Middle: Text and Action 
   ========================================================= */
.gold-card-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  z-index: 1;
}

.gold-upgrade-title {
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff 0%, #ffe38f 30%, #d4af37 60%, #b8860b 100%);
  -webkit-background-clip: text;
  color: transparent !important;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.5px;
}

.gold-upgrade-desc {
  font-size: 1.35rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin-bottom: 0.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.gold-upgrade-action-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* =========================================================
   3D Gold Bar Button 
   ========================================================= */
.gold-upgrade-card .buy-gold-btn {
  position: relative;
  background: linear-gradient(180deg, #fff2cc 0%, #e6c27a 15%, #b8860b 50%, #8a6300 85%, #4a3614 100%) !important;
  border: 1px solid #fffde4 !important;
  border-radius: 8px;
  padding: 0.8rem 1.8rem !important;
  color: #2b1f00 !important;
  font-weight: 900 !important;
  font-size: 1.4rem !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.9), inset 0 4px 8px rgba(255, 255, 255, 0.8), inset 0 -6px 12px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255, 232, 133, 0.6) !important;
  transition: all 0.1s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}

.gold-upgrade-card .buy-gold-btn:active {
  transform: translateY(6px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), inset 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.3) !important;
}

/* DISABLED BUTTON - It should look like a locked Dark Gold / Titanium Bar, NOT plain grey */
.gold-upgrade-card .buy-gold-btn.disabled {
  background: linear-gradient(180deg, #a3957a 0%, #7d7059 20%, #4a4130 80%, #2b251a 100%) !important;
  border: 1px solid #c9baa1 !important;
  color: #1c1811 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8), inset 0 4px 8px rgba(255, 255, 255, 0.4), inset 0 -6px 12px rgba(0, 0, 0, 0.7) !important;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   Metallic Level Pill 
   ========================================================= */
.gold-level-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(to bottom, #1e1508, #0a0702);
  border: 2px solid #d4af37;
  padding: 0.6rem 1.6rem;
  border-radius: 8px;
  font-size: 1.5rem !important;
  color: #ffda6a;
  font-weight: 900 !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.9), 0 0 12px rgba(212, 175, 55, 0.4);
}

.gold-level-pill.max {
  border-color: #34d399;
  color: #34d399;
  background: linear-gradient(to bottom, #062b1a, #020c07);
}

.gold-checkmark {
  color: #34d399;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* =========================================================
   Mobile Optimization
   ========================================================= */
@media (max-width: 768px) {
  .gold-upgrade-card {
    flex-direction: row !important;
    text-align: right;
    padding: 1.2rem !important;
    gap: 1rem !important;
  }
  .gold-card-right {
    width: 135px !important;
    height: 135px !important;
    margin: 0 !important;
  }
  .gold-card-middle {
    align-items: flex-start !important;
  }
  .gold-upgrade-title {
    justify-content: flex-start !important;
    font-size: 1.9rem !important;
  }
  .gold-upgrade-desc {
    text-align: right !important;
    font-size: 1.15rem !important;
  }
  .gold-upgrade-action-row {
    justify-content: flex-start !important;
    width: auto !important;
    gap: 0.8rem !important;
  }
}
/* Left Side: Icon and MAX */
.gold-card-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 60px;
  flex-shrink: 0;
}

.gold-category-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(223, 171, 41, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.15) 0%, rgba(20, 24, 36, 0.8) 100%);
  box-shadow: inset 0 0 10px rgba(223, 171, 41, 0.2);
}

.gold-max-text {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--primary-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(223, 171, 41, 0.4);
}

/* Gold buy button */
.buy-gold-btn {
  background: linear-gradient(135deg, #f5d06d 0%, #dfab29 100%);
  color: #111827;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  font-size: 0.92rem;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  font-family: "Outfit", sans-serif;
}

.buy-gold-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45);
}

.buy-gold-btn.disabled {
  background: #1f2937;
  color: #9ca3af;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Summary box at bottom of gold shop */
.gold-summary-box {
  background: linear-gradient(135deg, rgba(20, 24, 36, 0.98) 0%, rgba(10, 12, 20, 0.99) 100%);
  border: 1px solid rgba(223, 171, 41, 0.25);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-top: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 0 40px rgba(223, 171, 41, 0.03);
  box-sizing: border-box;
  width: 100%;
}

.gold-summary-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-gold, #dfab29);
  margin-bottom: 0.8rem;
}

.gold-summary-grid {
  display: flex;
  flex-direction: row;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.gold-stat-box {
  background: rgba(223, 171, 41, 0.07);
  border: 1px solid rgba(223, 171, 41, 0.18);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 90px;
}

.gold-stat-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--primary-gold, #dfab29);
  font-family: "Outfit", sans-serif;
  text-shadow: 0 0 8px rgba(223, 171, 41, 0.4);
}

.gold-stat-desc {
  font-size: 0.88rem;
  color: var(--text-muted, #9ca3af);
  text-align: center;
  line-height: 1.2;
}

.gold-grand-bonus-row {
  font-size: 0.9rem;
  color: var(--text-secondary, #a3aab5);
  border-top: 1px solid rgba(223, 171, 41, 0.12);
  padding-top: 0.65rem;
  line-height: 1.5;
}

.gold-grand-bonus-val {
  color: #34d399;
  font-weight: 700;
}

/* Bottom Nav: מוסתר בדסקטופ */
.bottom-nav {
  display: none;
}

/* Vault Mini Bar: מוסתר בדסקטופ */
.vault-mini-bar {
  display: none;
}

/* =========================================================
   MAX Level State 
   ========================================================= */
.gold-upgrade-card.is-maxed::after {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: inset 0 0 25px rgba(255, 215, 0, 0.3);
}

.gold-max-reached-btn {
  background: linear-gradient(135deg, rgba(223, 171, 41, 0.15) 0%, rgba(255, 215, 0, 0.3) 100%);
  border: 1px solid #d4af37;
  color: #fffde4;
  padding: 0.7rem 1.6rem;
  border-radius: 6px;
  font-weight: 900;
  font-size: 1.25rem;
  text-shadow: 0 0 8px rgba(223, 171, 41, 0.8);
  box-shadow: 0 0 15px rgba(223, 171, 41, 0.4), inset 0 0 10px rgba(223, 171, 41, 0.2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 150px;
  justify-content: center;
  cursor: default;
}

/* ===================================================
   PORTRAIT MOBILE MODE
   =================================================== */
@media (max-width: 950px), (max-height: 500px), (pointer: coarse) {
  /* --- Bottom Nav: גלוי ב-portrait --- */
  /* Using position: sticky makes it "built-in" (part of the normal DOM flow), avoiding WebView fixed-position bugs! */
  .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: max(10px + env(safe-area-inset-bottom, 0px), 12px) !important;
    left: 10px !important;
    right: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: 550px !important;
    margin: 0 auto !important;
    height: 64px !important;
    background: rgba(15, 18, 28, 0.97) !important;
    border: 1.5px solid rgba(223, 171, 41, 0.35) !important;
    border-radius: 20px !important;
    z-index: 9990 !important;
    padding: 2px 6px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: visible !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }
  .bottom-nav::-webkit-scrollbar {
    display: none;
  }
  .bottom-nav-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    color: rgba(180, 183, 200, 0.9) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 2px 2px !important;
    box-sizing: border-box !important;
  }
  .bottom-nav-btn:active {
    transform: scale(0.95);
  }
  .bottom-nav-btn.active {
    color: var(--primary-gold);
    /* Remove old background gradient */
    background: transparent;
  }
  /* 3D Icon styling */
  .nav-icon-wrapper {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2px;
  }
  .nav-3d-icon {
    width: 34px;
    height: 34px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) brightness(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
  }
  /* Active Tab Enhancements */
  .bottom-nav-btn.active .nav-3d-icon {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.9)) brightness(1.2);
  }
  .bottom-nav-btn.active .nav-icon-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(223, 171, 41, 0.35) 0%, rgba(223, 171, 41, 0) 65%);
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
  }
  .bnav-label {
    font-size: 0.72rem;
    font-weight: 700;
    z-index: 2;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
  }
  .bottom-nav-btn.active .bnav-label {
    text-shadow: 0 0 8px rgba(223, 171, 41, 0.5);
  }
  .active-star {
    font-size: 0.65rem;
    color: var(--primary-gold);
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
    margin-top: -2px;
    text-shadow: 0 0 6px rgba(223, 171, 41, 0.9);
  }
  .bottom-nav-btn.active .active-star {
    opacity: 1;
    transform: translateY(0);
  }
  /* --- Body: מרווח תחתון לbottom nav + buffer --- */
  html, body {
    padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
  }
  /* --- App Container --- */
  .app-container {
    padding: max(0.65rem + env(safe-area-inset-top, 0px), 34px) 0.5rem 0 0.5rem !important;
    gap: 0.4rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  header, main {
    flex-shrink: 0 !important;
  }
  /* --- Header: brand + כפתורים בשורה אחת, stats בשורה שניה --- */
  header {
    padding: 0.4rem 0.6rem !important;
    gap: 0.35rem !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  /* stats-bar: grid — brand שמאל, כפתורים ימין (שורה 1), stats מלא (שורה 2) */
  .stats-bar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 0.3rem 0.5rem !important;
    flex-wrap: unset !important;
  }
  .brand-section {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .header-buttons-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-content: flex-end !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }
  .stats-row {
    grid-column: 1/-1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
  }
  .brand-title p {
    display: none !important;
  }
  .brand-icon {
    font-size: 1.3rem !important;
  }
  .brand-title h1 {
    font-size: 0.9rem !important;
  }
  .upg-v2-stat-text {
    min-width: 0;
    font-size: 0.85rem;
    word-break: break-word; /* Allow text to wrap nicely */
  }
  .stat-box {
    min-width: 0 !important;
    padding: 0.25rem 0.45rem !important;
  }
  .stat-value {
    font-size: 0.95rem !important;
  }
  .stat-label {
    font-size: 0.8rem !important;
  }
  .stat-sub {
    font-size: 0.78rem !important;
  }
  /* מסתיר שורת Prestige preview — חוסך גובה */
  #prestige-preview-label {
    display: none !important;
  }
  /* --- Vault Mini Bar: פאנל כספת מרשים --- */
  @keyframes vault-bar-ready-pulse {
    0%, 100% {
      box-shadow: 0 0 22px rgba(223, 171, 41, 0.18), 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      border-color: rgba(223, 171, 41, 0.65);
    }
    50% {
      box-shadow: 0 0 38px rgba(223, 171, 41, 0.55), 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      border-color: rgba(243, 208, 82, 0.95);
    }
  }
  @keyframes vault-bar-full-pulse {
    0%, 100% {
      box-shadow: 0 0 24px rgba(239, 68, 68, 0.25), 0 4px 16px rgba(0, 0, 0, 0.5);
      border-color: rgba(239, 68, 68, 0.7);
    }
    50% {
      box-shadow: 0 0 42px rgba(239, 68, 68, 0.6), 0 4px 20px rgba(0, 0, 0, 0.6);
      border-color: rgb(239, 68, 68);
    }
  }
  @keyframes vault-btn-ready-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
    }
    50% {
      box-shadow: 0 0 14px 4px rgba(223, 171, 41, 0.55);
    }
  }
  @keyframes vault-fill-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .vault-mini-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    background: linear-gradient(135deg, rgba(14, 20, 38, 0.99) 0%, rgb(8, 13, 26) 100%) !important;
    border: 1.5px solid rgba(223, 171, 41, 0.65) !important;
    border-radius: 14px !important;
    padding: 0.45rem 0.6rem !important;
    margin-top: 0.2rem !important;
    box-shadow: 0 0 22px rgba(223, 171, 41, 0.18), 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .vault-mini-bar::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(223, 171, 41, 0.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .vault-mini-bar.is-ready {
    animation: vault-bar-ready-pulse 1.8s ease-in-out infinite !important;
  }
  .vault-mini-bar.is-full {
    animation: vault-bar-full-pulse 1.4s ease-in-out infinite !important;
  }
  /* שורה 1: אייקון עגול + שם + level + סכום / קיבולת + כפתור */
  .vault-mini-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .vault-mini-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1.5px solid rgba(223, 171, 41, 0.6) !important;
    box-shadow: 0 0 10px rgba(223, 171, 41, 0.25) !important;
    flex-shrink: 0 !important;
    background: #0a0f1e !important;
    transition: box-shadow 0.3s ease !important;
  }
  .vault-mini-bar.is-ready .vault-mini-icon {
    box-shadow: 0 0 18px rgba(243, 208, 82, 0.55) !important;
    border-color: rgba(243, 208, 82, 0.9) !important;
  }
  .vault-mini-name-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
  }
  .vault-mini-label {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #dfab29 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
  }
  .vault-mini-level {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
  }
  .vault-mini-spacer {
    display: none !important;
  }
  /* סכומים: stored גדול / cap קטן */
  .vault-mini-amounts {
    display: flex !important;
    align-items: baseline !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  .vault-mini-stored-val {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #f3d052 !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(243, 208, 82, 0.55) !important;
    transition: text-shadow 0.3s ease !important;
  }
  .vault-mini-bar.is-full .vault-mini-stored-val {
    color: #fca5a5 !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.55) !important;
  }
  .vault-mini-slash {
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.35) !important;
    margin: 0 1px !important;
  }
  .vault-mini-cap-val {
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }
  .vault-mini-collect {
    background: linear-gradient(135deg, #1a3352, #1a4268) !important;
    border: 1.5px solid rgba(96, 165, 250, 0.45) !important;
    color: #7eb8f5 !important;
    border-radius: 8px !important;
    padding: 0.28rem 0.55rem !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    min-height: 38px !important;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 80ms ease !important;
    letter-spacing: 0.2px !important;
    box-sizing: border-box !important;
  }
  .vault-mini-collect:not(:disabled) {
    background: linear-gradient(135deg, #92530a, #b8720d, #dfab29) !important;
    border-color: rgba(243, 208, 82, 0.8) !important;
    color: #fff8e0 !important;
    animation: vault-btn-ready-pulse 1.8s ease-in-out infinite !important;
  }
  .vault-mini-bar.is-full .vault-mini-collect:not(:disabled) {
    background: linear-gradient(135deg, #7f1d1d, #b91c1c, #ef4444) !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
    color: #fff !important;
    animation: vault-btn-ready-pulse 1.2s ease-in-out infinite !important;
  }
  .vault-mini-collect:active {
    transform: scale(0.95) !important;
  }
  .vault-mini-collect:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
  }
  /* שורה 2: פס מילוי + meta */
  .vault-mini-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .vault-mini-track {
    width: 100% !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
  }
  .vault-mini-fill {
    height: 100% !important;
    width: 0%;
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 40%, #93c5fd 60%, #3b82f6 100%) !important;
    background-size: 200% 100% !important;
    border-radius: 6px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: width;
    animation: vault-fill-shimmer 2.5s linear infinite !important;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5) !important;
    position: relative !important;
  }
  .vault-mini-fill::after {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 6% !important;
    right: 6% !important;
    height: 3px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px !important;
  }
  .vault-mini-fill.is-warm {
    background: linear-gradient(90deg, #92400e 0%, #d97706 40%, #fbbf24 60%, #d97706 100%) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.6) !important;
    animation: vault-fill-shimmer 2s linear infinite !important;
  }
  .vault-mini-fill.is-full {
    background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 40%, #f87171 60%, #dc2626 100%) !important;
    background-size: 200% 100% !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7) !important;
    animation: vault-fill-shimmer 1.5s linear infinite !important;
  }
  /* meta: אחוז + תשואה */
  .vault-mini-details {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    line-height: 1 !important;
  }
  .vault-mini-pct-wrap {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #f3d052 !important;
    line-height: 1 !important;
  }
  .vault-mini-sep {
    color: rgba(255, 255, 255, 0.22) !important;
  }
  #vault-mini-yield {
    color: #34d399 !important;
    font-weight: 700 !important;
  }
  /* --- קופות בפורטרייט: נראות טובה יותר --- */
  .teller-counter {
    border: 1.5px solid rgba(223, 171, 41, 0.3) !important;
    border-radius: 12px !important;
    background: linear-gradient(160deg, rgba(25, 30, 48, 0.95), rgba(15, 20, 35, 0.98)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  }
  .teller-counter.locked {
    border-color: rgba(100, 100, 130, 0.3) !important;
    background: linear-gradient(160deg, rgba(18, 22, 38, 0.9), rgba(12, 16, 28, 0.95)) !important;
  }
  /* --- Bank Floor: Simulation Area קומפקטי --- */
  .bank-floor {
    padding: 0.5rem !important;
    gap: 0.4rem !important;
    height: auto !important;
  }
  .bank-floor .panel-header {
    display: none !important;
  }
  .floor-map {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.4rem 0.5rem !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* queue-wrapper — גרסה קומפקטית לפורטרייט */
  .queue-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .queue-zone {
    height: 56px !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 12px !important;
    gap: 0.5rem !important;
  }
  .queue-label {
    font-size: 0.78rem !important;
    margin-bottom: 0.15rem !important;
  }
  .customer-line {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  .customer-avatar, .visual-client-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.9rem !important;
    border-width: 2px;
  }
  .waiting-sofa, .entrance-door {
    font-size: 0.9rem !important;
  }
  /* Tellers: Grid 2 Columns (Native Scroll) */
  .tellers-zone {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    width: 100%;
    overflow: visible !important;
    position: relative !important;
    bottom: auto !important;
    height: auto !important;
    flex: none !important;
    min-height: auto !important;
    z-index: 10 !important;
    white-space: normal !important;
  }
  .tellers-zone::-webkit-scrollbar {
    display: none !important;
  }
  .teller-counter {
    display: flex !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 145px !important;
    height: auto !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-right: 0 !important;
    vertical-align: top !important;
  }
  .teller-counter .glass-showcase {
    height: 160px !important;
    flex-shrink: 0 !important;
  }
  .teller-counter .teller-bg-img {
    object-position: center 25% !important;
  }
  /* --- כספת: מוסתרת בפורטרייט — vault-mini-bar ב-header מחליפה אותה --- */
  .vault-zone {
    display: none !important;
  }
  .security-path {
    display: flex !important;
    padding: 0.3rem 0.6rem !important;
    min-height: 36px !important;
    overflow: visible !important;
    margin-top: 1rem !important;
  }
  .guard-status-text {
    font-size: 0.72rem !important;
  }
  /* advertising-control — גרסה קומפקטית לפורטרייט */
  .advertising-control {
    display: flex !important;
    padding: 0.3rem 0.6rem !important;
    gap: 0.15rem !important;
    border-radius: 8px !important;
  }
  .adv-header {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }
  .adv-slider-wrapper {
    gap: 0.35rem !important;
  }
  .adv-slider::-webkit-slider-thumb {
    height: 22px !important;
    width: 22px !important;
  }
  /* אלמנטים דקורטיביים */
  .gold-pillar,
  .potted-plant,
  .atm-machine,
  .security-camera {
    display: none !important;
  }
  /* --- Control Panel --- */
  .control-panel {
    padding: 0.5rem 0.5rem 0 0.5rem !important;
    gap: 0.5rem !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* הטאבים הקיימים מוסתרים — מוחלפים ע"י bottom nav */
  .tabs-nav {
    display: none !important;
  }
  .tab-content {
    overflow-y: visible !important;
    max-height: none !important;
    padding-bottom: 120px !important;
  }
  .tab-pane {
    position: relative !important;
    height: auto !important;
    overflow-y: visible !important;
  }
  /* --- Floating Container z-index fix --- */
  .floating-container {
    z-index: 0 !important;
  }
  /* --- Footer מוסתר --- */
  footer {
    display: none !important;
  }
  /* contextual banner מעל ה-bottom nav */
  #contextual-offer-banner {
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
  /* analytics שולחן-עבודה בלבד — מוסתר על מובייל */
  #analytics-btn {
    display: flex !important;
  }
  .bottom-nav-btn .nav-icon {
    font-size: 1.15rem;
  }
  /* --- כרטיסי שדרוג: layout מובייל --- */
  .upgrade-card {
    padding: 0.65rem 0.75rem !important;
    gap: 0.6rem !important;
    border-radius: 14px !important;
  }
  .card-avatar {
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(223, 171, 41, 0.7) !important;
    box-shadow: 0 0 12px rgba(223, 171, 41, 0.3) !important;
  }
  .card-title {
    font-size: 0.87rem !important;
    font-weight: 800 !important;
  }
  .card-desc {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    opacity: 0.82;
  }
  .card-stats {
    font-size: 0.78rem !important;
    opacity: 0.7;
  }
  /* כפתור Buy — גדול יותר, קריא */
  .buy-btn {
    min-width: 76px !important;
    min-height: 46px !important;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    letter-spacing: 0 !important;
  }
  /* bulk selector */
  .bulk-upgrade-selector {
    padding: 0.4rem 0.6rem !important;
    gap: 0.5rem !important;
    position: static !important;
    margin-bottom: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  .bulk-btn-option {
    min-height: 44px !important;
    padding: 0.3rem 0.7rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* --- Boost Button: icon-only בפורטרייט --- */
  /* --- Boost Button: circular design & countdown badge --- */
  #boost-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    position: relative !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(145deg, rgba(30, 20, 50, 0.95) 0%, rgba(15, 12, 28, 0.98) 100%) !important;
    border: 1.5px solid rgba(223, 171, 41, 0.4) !important;
  }
  #boost-btn span[aria-hidden=true] {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #boost-btn.active {
    border-color: #a855f7 !important;
    background: linear-gradient(145deg, #6d28d9 0%, #4c1d95 100%) !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.7), 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  }
  #boost-btn.urgent-boost {
    border-color: #ef4444 !important;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.9), 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    animation: boost-urgent-pulse 0.7s ease-in-out infinite !important;
  }
  #boost-btn.offer::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #0f121c;
    box-shadow: 0 0 6px #ef4444;
  }
  .boost-timer-badge {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 18, 28, 0.95);
    border: 1px solid #fbbf24;
    color: #fbbf24;
    font-size: 0.52rem;
    font-weight: 800;
    padding: 0 4px;
    height: 13px;
    line-height: 12px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
    z-index: 10;
    pointer-events: none;
    font-family: system-ui, -apple-system, sans-serif;
  }
  .boost-timer-badge.urgent {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #fca5a5 !important;
    animation: timer-badge-pulse 0.6s ease-in-out infinite !important;
  }
  /* --- Live Timer Capsule Pill on the left of Boost Btn --- */
  .boost-live-timer-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(26, 20, 42, 0.95), rgba(12, 10, 24, 0.98)) !important;
    border: 1.5px solid #fbbf24 !important;
    border-radius: 20px !important;
    padding: 3px 9px !important;
    height: 32px !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
  }
  .boost-live-timer-pill .timer-clock-icon {
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }
  .boost-live-timer-pill .timer-countdown-val {
    font-family: "Outfit", "Roboto", monospace, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
  }
  .boost-live-timer-pill.urgent {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    border-color: #fca5a5 !important;
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.8) !important;
    animation: urgent-pill-pulse 0.7s ease-in-out infinite !important;
  }
  .boost-live-timer-pill.urgent .timer-countdown-val {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
  }
  @keyframes urgent-pill-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
    }
    50% {
      transform: scale(1.06);
      box-shadow: 0 0 24px rgb(239, 68, 68);
    }
  }
  @keyframes boost-urgent-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 16px rgba(239, 68, 68, 0.8);
    }
    50% {
      transform: scale(1.08);
      box-shadow: 0 0 26px rgb(239, 68, 68);
    }
  }
  @keyframes timer-badge-pulse {
    0%, 100% {
      transform: translateX(-50%) scale(1);
    }
    50% {
      transform: translateX(-50%) scale(1.15);
    }
  }
  /* --- Vault Mini Bar: small phone refinements --- */
  .vault-mini-bar {
    padding: 0.4rem 0.5rem !important;
    border-radius: 12px !important;
  }
  .vault-mini-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .vault-mini-label {
    font-size: 0.85rem !important;
  }
  .vault-mini-stored-val {
    font-size: 0.95rem !important;
  }
  .vault-mini-collect {
    min-height: 40px !important;
    font-size: 0.7rem !important;
    padding: 0.28rem 0.45rem !important;
    border-radius: 8px !important;
  }
  .vault-mini-track {
    height: 10px !important;
  }
  /* --- Buy Buttons: גדולים וברורים --- */
  .buy-btn {
    min-width: 88px !important;
    min-height: 58px !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    border-radius: 14px !important;
    padding: 0.5rem 0.65rem !important;
    box-shadow: 0 4px 14px rgba(223, 171, 41, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.25) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .buy-btn:not(.disabled) {
    background: linear-gradient(160deg, #f3d052 0%, #dfab29 50%, #b8860b 100%) !important;
    border: 1.5px solid #ffe699 !important;
    color: #0c0e1d !important;
    transition: transform 80ms ease, box-shadow 80ms ease !important;
  }
  .buy-btn:not(.disabled):active {
    transform: scale(0.93) !important;
    box-shadow: 0 2px 6px rgba(223, 171, 41, 0.3) !important;
  }
  .buy-btn.disabled, .buy-btn:disabled {
    box-shadow: none !important;
    opacity: 0.4 !important;
  }
  /* כרטיסי שדרוג: הכפתור לא מתכווץ */
  .upgrade-card {
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .card-left-section {
    min-width: 0 !important;
    flex: 1 !important;
  }
  /* --- Header buttons row: compact row בפורטרייט --- */
  .header-buttons-row {
    align-self: flex-end !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    padding-bottom: 20px !important;
  }
  /* Force Gold Upgrades to 1 column in portrait so they aren't squished */
  .gold-upgrades-grid {
    grid-template-columns: 1fr !important;
  }
}
/* Responsive adjustments for gold shop and small mobile */
@media (max-width: 480px) {
  .gold-upgrades-grid {
    grid-template-columns: 1fr !important;
  }
  .gold-summary-grid {
    flex-direction: column;
  }
  /* Floor map shorter on narrow phones (landscape only — portrait overrides below) */
  .floor-map {
    min-height: auto !important;
  }
  /* Portrait: keep floor compact at 130px */
}
@media (max-width: 480px) and (orientation: portrait) {
  .floor-map {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}
@media (max-width: 480px) {
  /* 2 columns of tellers to prevent horizontal overflow */
  .tellers-zone {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .teller-counter.locked {
    min-height: 90px !important;
  }
  /* Language grid single column */
  .lang-options-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  /* Modal scrollable with safe area */
  .modal-box {
    max-height: 85dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
  /* Managers grid single column on narrow phones */
  .managers-grid {
    grid-template-columns: 1fr !important;
  }
  /* Reduce brand section on narrow screens */
  .brand-icon {
    font-size: 1.7rem !important;
  }
  .brand-title h1 {
    font-size: 1.15rem !important;
  }
  /* App container minimal padding */
  .app-container {
    padding: 0.5rem !important;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
  }
  /* Stat boxes: no min-width to prevent overflow */
  .stat-box {
    min-width: 0 !important;
  }
}
/* Portrait override: מנצח את min-height: 290px מ-@media (max-width: 480px) */
@media (max-width: 480px) and (orientation: portrait) {
  .floor-map {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Gold shop — redesigned 2-column layout for portrait mobile */
  .gold-upgrade-card {
    gap: 0.75rem !important;
    padding: 0.85rem !important;
    align-items: center !important;
  }
  /* Hide emoji icon column — image already carries the visual identity */
  .gold-card-left {
    display: none !important;
  }
  /* Larger, cleaner illustration */
  .gold-card-right {
    width: 76px !important;
    height: 76px !important;
    flex-shrink: 0 !important;
  }
  .gold-card-right::before {
    width: 76px !important;
    height: 76px !important;
  }
  /* Remove drop-shadow — it bleeds outside card bounds on mobile */
  .gold-big-illustration {
    filter: none !important;
  }
  /* Full-width text area, prevents overflow */
  .gold-card-middle {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .gold-upgrade-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  .gold-upgrade-desc {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.35rem !important;
  }
  .gold-upgrade-action-row {
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    align-items: center !important;
  }
  .buy-gold-btn {
    font-size: 0.92rem !important;
    padding: 0.38rem 0.8rem !important;
  }
  .gold-level-pill {
    font-size: 0.82rem !important;
    padding: 0.25rem 0.6rem !important;
  }
  /* Summary panel */
  .gold-summary-box {
    padding: 0.8rem !important;
  }
  .gold-stat-val {
    font-size: 0.92rem !important;
  }
  .gold-stat-desc {
    font-size: 0.88rem !important;
  }
}
/* Vault graphic asset update - v1.0.1 */
/* ===================================================
   UI/UX IMPROVEMENTS & ANIMATIONS (v1.1.0)
   =================================================== */
/* Theme enhancements transitions */
:root {
  transition: var(--transition-prop);
}

.app-container, header, main, section, .stat-box, .tab-btn, .upgrade-card, .teller-counter {
  /* transform intentionally excluded: transitioning transform on large scroll
     containers (.app-container, main, section) and frequently-repeated list
     items (.tab-btn, .upgrade-card) fights mobile hardware-accelerated
     scrolling and causes visible jumps mid-scroll. */
  transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* 1. Neon glowing borders & styles */
.teller-counter.active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--border-glow);
}

/* 2. Living Simulator Interactions */
/* Camera Wiggle */
.camera-wiggle {
  animation: camera-wiggle-anim 0.6s ease-in-out;
}

@keyframes camera-wiggle-anim {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  45% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Plant Shake */
.plant-shake {
  animation: plant-shake-anim 0.5s ease-in-out;
}

@keyframes plant-shake-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05) rotate(4deg);
  }
  40% {
    transform: scale(0.95) rotate(-4deg);
  }
  60% {
    transform: scale(1.02) rotate(2deg);
  }
  80% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* ATM Vibrate */
.atm-vibrate {
  animation: atm-vibrate-anim 0.4s linear;
}

@keyframes atm-vibrate-anim {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY DASHBOARD REDESIGN — Premium Cards & Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
/* Override header base to column layout */
header {
  background: rgba(7, 9, 16, 0.88) !important;
  border: 1px solid rgba(223, 171, 41, 0.14) !important;
  border-radius: 22px !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important; /* Allow full expansion on desktop */
  margin: 0 auto !important;
  width: 100% !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(223, 171, 41, 0.07) !important;
}

/* ── Top bar: Brand left, Buttons right ── */
.luxury-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Unified Topbar Action Buttons ── */
.header-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

.topbar-action-btn,
.sound-toggle-btn,
.boost-toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(24, 34, 58, 0.95) 0%, rgba(12, 17, 30, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.topbar-action-btn:hover,
.sound-toggle-btn:hover,
.boost-toggle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(234, 179, 8, 0.35) !important;
}

.topbar-action-btn span,
.sound-toggle-btn span,
.boost-toggle-btn span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* Fortune Wheel Header Button Accent */
.fortune-wheel-header-btn {
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Header Daily Achievements Accent */
.header-daily-btn {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Boost Button Accent (Circular, Matching the Set!) */
.boost-toggle-btn {
  border: 2px solid #fb923c !important;
  background: linear-gradient(145deg, rgba(67, 30, 15, 0.95) 0%, rgba(30, 12, 5, 0.98) 100%) !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #fb923c !important;
  overflow: visible !important;
}

.boost-timer-badge {
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(15, 18, 28, 0.95) !important;
  border: 1px solid #fbbf24 !important;
  color: #fbbf24 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  height: 14px !important;
  line-height: 13px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Live Boost Timer Capsule Pill (Desktop & Mobile) */
.boost-live-timer-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 28px !important;
  padding: 0 6px !important;
  background: linear-gradient(145deg, rgba(26, 20, 42, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  align-self: center !important;
}

.boost-live-timer-pill .timer-clock-icon {
  font-size: 0.8rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.boost-live-timer-pill .timer-countdown-val {
  font-family: "Outfit", "Roboto", monospace, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
}

/* Gentle, subtle idle blink at 00:00 */
.boost-live-timer-pill.idle-blink {
  animation: gentle-idle-blink 3s linear infinite !important;
}

@keyframes gentle-idle-blink {
  0%, 100% {
    opacity: 1;
    border-color: rgba(223, 171, 41, 0.45);
    box-shadow: 0 0 8px rgba(223, 171, 41, 0.2);
  }
  50% {
    opacity: 0.55;
    border-color: rgba(223, 171, 41, 0.2);
    box-shadow: 0 0 2px rgba(223, 171, 41, 0.05);
  }
}
/* Urgent state when <= 60 seconds left */
.boost-live-timer-pill.urgent {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.8) !important;
  animation: urgent-pill-pulse 0.7s ease-in-out infinite !important;
}

.boost-live-timer-pill.urgent .timer-countdown-val {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

@keyframes urgent-pill-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgb(239, 68, 68);
  }
}
@media (min-width: 650px) {
  .header-buttons-row {
    gap: 0.3rem !important;
  }
  .topbar-action-btn,
  .sound-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.2rem !important;
  }
  .topbar-action-btn span,
  .sound-toggle-btn span {
    font-size: 1.2rem !important;
  }
}
/* ── Dashboard grid ──
   Mobile: cash full-width top row, secondary cards side-by-side below
   Desktop: cash takes 60%, secondary cards take 40% on the right
*/
.luxury-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.65rem;
}

@media (min-width: 650px) {
  .luxury-dashboard {
    grid-template-columns: 1.6fr 1.1fr;
    grid-template-rows: 1fr;
  }
  .secondary-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.65rem;
  }
  .secondary-card {
    height: 100%;
  }
  .luxury-topbar {
    min-height: 60px;
  }
  .brand-title h1 {
    font-size: 2.2rem;
  }
  /* Center group content on wide desktop cards */
  .cash-hero-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem;
  }
  .cash-hero-card .hero-side-img {
    position: relative;
    transform: none;
    max-height: 120px;
  }
  .cash-hero-card .cash-card-content {
    padding-left: 0;
    align-items: flex-start;
  }
  .secondary-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
  }
  .secondary-card .secondary-side-img {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    max-height: 90px;
    min-width: 70px;
  }
  .secondary-card .secondary-card-content,
  .secondary-card .secondary-value,
  .secondary-card .secondary-card-top {
    padding-left: 0;
    z-index: 2;
  }
  /* Enlarge desktop card text for high readability */
  .cash-label {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
  }
  .cash-amount {
    font-size: 2.8rem !important;
  }
  .cash-eps {
    font-size: 1rem !important;
  }
  .secondary-label {
    font-size: 0.95rem !important;
    letter-spacing: 0.03em;
  }
  .secondary-value {
    font-size: 1.7rem !important;
  }
  .huge-multiplier {
    font-size: 1.85rem !important;
  }
  .small-multiplier-label {
    font-size: 0.92rem !important;
  }
  .prestige-hint-text {
    font-size: 0.82rem !important;
  }
}
@media (min-width: 1050px) {
  .cash-amount {
    font-size: 3.2rem !important;
  }
  .cash-label {
    font-size: 0.95rem !important;
  }
  .cash-eps {
    font-size: 1.1rem !important;
  }
  .secondary-label {
    font-size: 1.05rem !important;
  }
  .secondary-value {
    font-size: 2rem !important;
  }
  .huge-multiplier {
    font-size: 2.2rem !important;
  }
}
/* ════════════════════════════════
   PREMIUM CARD — BASE STYLES
   ════════════════════════════════ */
.premium-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.82) 0%, rgba(10, 12, 22, 0.92) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) {
  .premium-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}
/* ════════════════════════════════
   HERO CASH CARD
   ════════════════════════════════ */
.cash-hero-card {
  min-height: 115px; /* Increased height */
  padding: 1.2rem 1.5rem;
  border-color: rgba(52, 211, 153, 0.5); /* Crisp, brighter green border */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45), 0 0 48px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.15); /* Stronger inner green glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cash-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 60%, rgba(16, 185, 129, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.cash-hero-card:hover {
  border-color: rgba(16, 185, 129, 0.42);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 70px rgba(16, 185, 129, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Sweeping shimmer */
.cash-card-shimmer {
  position: absolute;
  top: 0;
  right: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 50%, transparent 80%);
  animation: luxury-shimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes luxury-shimmer {
  0% {
    right: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    right: 160%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    right: 160%;
    opacity: 0;
  }
}
/* Background decorative ring */
.cash-card-bg-ring {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.11);
  animation: ring-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cash-card-bg-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.07);
}

@keyframes ring-breathe {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    opacity: 0.9;
  }
}
/* Cash card content wrapper */
.cash-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 100px; /* Protect text from left image */
}

/* Top row: label + live badge */
.cash-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Add styles for 3D Side Images - Contained version */
.hero-side-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  max-height: 160px;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)) brightness(1.15); /* Stronger aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
}

.secondary-side-img {
  position: absolute;
  left: 2%;
  bottom: 5%;
  height: 90%;
  max-height: 85px;
  max-width: 85px;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(223, 171, 41, 0.5)) brightness(1.15); /* Golden aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
}

html[dir=ltr] .secondary-side-img {
  left: auto !important;
  right: 2% !important;
}

html[dir=rtl] .secondary-side-img {
  right: auto !important;
  left: 2% !important;
}

.secondary-side-img.boost-img {
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)) brightness(1.15); /* Purple aura */
}

.cash-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(52, 211, 153, 0.8);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cash-live-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(52, 211, 153, 0.85);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 5px;
  padding: 1px 5px;
  animation: live-blink 2.2s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* The hero number */
.cash-amount {
  font-size: 2.25rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 0 40px rgba(16, 185, 129, 0.28), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* EPS sub-row */
.cash-eps {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--money-green);
  margin-top: 0.05rem;
}

.eps-arrow {
  font-size: 0.72rem;
  display: inline-block;
  animation: eps-float 1.8s ease-in-out infinite;
  color: var(--green-light);
}

@keyframes eps-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
/* ════════════════════════════════
   SECONDARY CARDS GRID
   ════════════════════════════════ */
.secondary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.65rem;
}

/* ── Single secondary card ── */
.secondary-card {
  padding: 0.9rem 1rem;
  border-color: rgba(255, 204, 77, 0.4); /* Brighter gold border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(223, 171, 41, 0.15), inset 0 0 24px rgba(223, 171, 41, 0.12); /* Inner gold glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Strictly align text to right in RTL */
  gap: 0.18rem;
  min-height: 90px; /* Taller card */
}

.secondary-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 65px; /* Protect text from left image in RTL */
  padding-right: 0;
  position: relative;
  z-index: 2;
}

html[dir=ltr] .secondary-card-content {
  padding-left: 0 !important;
  padding-right: 65px !important; /* Protect text from right image in LTR */
  align-items: flex-start !important;
  text-align: left !important;
}

html[dir=rtl] .secondary-card-content {
  padding-left: 65px !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: right !important;
}

/* Fix gold shares image white corners specifically */
.gold-shares-card .secondary-side-img {
  border-radius: 24px;
}

.secondary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(223, 171, 41, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(223, 171, 41, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

@media (hover: hover) {
  .secondary-card:hover {
    border-color: rgba(223, 171, 41, 0.32);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(223, 171, 41, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
/* Gold top-edge accent line */
.secondary-card-accent {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(223, 171, 41, 0.9), transparent);
  border-radius: 0 0 2px 2px;
}

/* Multiplier Specific Styling (Purple/Blue) */
.multiplier-card {
  border-color: rgba(180, 140, 255, 0.45); /* Brighter purple border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(167, 139, 250, 0.15), inset 0 0 24px rgba(167, 139, 250, 0.12); /* Inner purple glow */
}

.multiplier-card::before {
  background: radial-gradient(circle at 10% 50%, rgba(167, 139, 250, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(147, 51, 234, 0.18) 0%, transparent 65%);
}

.multiplier-card:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(147, 51, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.multiplier-card .secondary-card-accent {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.9), transparent);
}

/* Icon + label row */
.secondary-card-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.secondary-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 5px rgba(223, 171, 41, 0.55));
  line-height: 1;
}

.secondary-label {
  font-size: clamp(0.68rem, 2.4vw, 0.85rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Main value in secondary card */
.secondary-value {
  font-size: 1.4rem; /* Smaller font to fit */
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  color: var(--primary-gold);
  text-shadow: 0 0 24px rgba(223, 171, 41, 0.32);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  display: block;
}

/* Multiplier card text override to match AI */
.multiplier-card .secondary-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.huge-multiplier {
  font-size: 1.5rem; /* Smaller multiplier to fit */
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #eaddff; /* Even brighter purple */
  text-shadow: 0 0 22px rgba(167, 139, 250, 0.5);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em; /* Condense slightly */
}

.small-multiplier-label {
  font-size: 0.85rem;
  color: rgba(196, 181, 253, 0.8);
  font-weight: 500;
}

/* Prestige hint under shares value */
.prestige-hint-text {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.65);
  line-height: 1.35;
  margin-top: 0.1rem;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   RESPONSIVE — PORTRAIT MOBILE
   ════════════════════════════════ */
@media (max-width: 950px), (max-height: 500px) {
  header {
    padding: 0.55rem 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 16px !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .luxury-topbar {
    /* Let space-between handle it on single line, but force buttons left if wrapped */
  }
  .header-buttons-row {
    order: 1 !important;
    margin-inline-start: auto !important; /* Forces buttons to left side in RTL */
  }
  /* פורטרייט: שורה 1 cash רוחב מלא, שורה 2 secondary זה לצד זה */
  .luxury-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.45rem !important;
  }
  .secondary-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0.45rem !important;
  }
  .cash-hero-card {
    min-height: 88px !important;
    padding: 0.75rem 1rem 0.6rem !important;
    justify-content: flex-start !important;
  }
  .cash-label {
    font-size: 0.78rem !important;
    opacity: 0.7;
  }
  .cash-amount {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }
  .cash-eps {
    font-size: 0.82rem !important;
    margin-top: 0.1rem !important;
  }
  .secondary-card {
    min-height: 72px !important;
    padding: 0.5rem 0.6rem !important;
    justify-content: flex-start !important;
    position: relative !important;
  }
  .secondary-side-img {
    max-height: 52px !important;
    max-width: 52px !important;
    bottom: 2px !important;
  }
  html[dir=ltr] .secondary-side-img {
    right: 2px !important;
    left: auto !important;
  }
  html[dir=rtl] .secondary-side-img {
    left: 2px !important;
    right: auto !important;
  }
  html[dir=ltr] .secondary-card-content {
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
  html[dir=rtl] .secondary-card-content {
    padding-left: 50px !important;
    padding-right: 0 !important;
  }
  .secondary-label {
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  .secondary-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  .luxury-topbar {
    gap: 0.35rem;
  }
  .brand-title p {
    display: none !important;
  }
  .brand-icon {
    font-size: 1.3rem !important;
  }
  .header-buttons-row {
    gap: 0.3rem !important;
    width: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .brand-section {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 0.1rem;
    justify-content: center !important;
  }
  .brand-title h1 {
    font-size: 1.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #prestige-preview-label {
    display: none !important;
  }
}
/* Narrow phone (<360px) — shrink further */
@media (max-width: 360px) {
  .cash-amount {
    font-size: 1.45rem !important;
  }
  .secondary-value {
    font-size: 1rem !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 0.88rem !important;
  }
}
/* Falling Leaf */
.falling-leaf {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  z-index: 100;
  animation: leaf-fall-anim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes leaf-fall-anim {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-15px, 20px) rotate(45deg);
  }
  60% {
    transform: translate(10px, 45px) rotate(-90deg);
  }
  100% {
    transform: translate(-5px, 80px) rotate(180deg);
    opacity: 0;
  }
}
/* ATM Receipt */
.atm-receipt {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  padding: 1px 4px;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 50;
  animation: receipt-print-anim 1.2s ease-out forwards;
}

@keyframes receipt-print-anim {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  30% {
    height: 12px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
}
/* 3. Milestone Sparkle & Confetti */
.upgrade-card.sparkle-flash {
  animation: card-sparkle-anim 0.5s ease-out;
}

@keyframes card-sparkle-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(223, 171, 41, 0.6);
    border-color: var(--primary-gold);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
}
.plaque-level.milestone-active {
  background: linear-gradient(135deg, #dfab29 0%, #ffffff 50%, #b8860b 100%) !important;
  color: #1a1505 !important;
  text-shadow: none !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  border-color: #ffffff !important;
}

/* Confetti particle */
.confetti-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 150;
  border-radius: 50%;
  animation: confetti-fall-anim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes confetti-fall-anim {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}
/* 4. VIP Glow & Queue Alert */
/* VIP Teller Glow Effect */
.teller-counter.vip-serving-glow {
  border-color: rgba(192, 132, 252, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 132, 252, 0.45) !important;
}

.teller-counter.rich-serving-glow {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.45) !important;
}

/* Queue Full Pulse Warning */
.queue-zone.status-alert {
  animation: queue-alert-pulse 1.5s infinite ease-in-out;
}

@keyframes queue-alert-pulse {
  0% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    border-color: var(--danger-red);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(239, 68, 68, 0.4);
  }
  100% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}
/* ── Sticky Persistent Mini Balance Bar (3D Depth Masterpiece HUD - No Truncation) ── */
.sticky-balance-bar {
  position: fixed !important;
  top: max(8px + env(safe-area-inset-top, 0px), 34px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-130%) !important;
  width: calc(100% - 10px) !important;
  max-width: 480px !important;
  height: 48px !important;
  z-index: 8500 !important;
  background: linear-gradient(180deg, #0e1424 0%, #060913 100%) !important;
  border-radius: 14px !important;
  padding: 3px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
  /* Multi-layer metallic outer border with top specular flare */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 2px rgba(10, 14, 26, 0.9), 0 12px 25px rgba(0, 0, 0, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.sticky-balance-bar.visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sticky-balance-bar {
  /* Top Central Lens Flare */
}
.sticky-balance-bar::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 30% !important;
  width: 40% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.9), #ffffff, rgba(147, 197, 253, 0.9), transparent) !important;
  filter: drop-shadow(0 0 6px #60a5fa) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar {
  /* Bottom Colored Ambient Underglows */
}
.sticky-balance-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.65) 5%, transparent 30%, rgba(56, 189, 248, 0.75) 50%, transparent 70%, rgba(245, 158, 11, 0.65) 95%) !important;
  filter: blur(5px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar .sticky-balance-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  gap: 2px !important;
}
.sticky-balance-bar {
  /* 3 Recessed Sections / Slots with smart flex-ratios */
}
.sticky-balance-bar .hud-section {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  padding: 2px 3px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: rgba(4, 7, 16, 0.55) !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sticky-balance-bar {
  /* Cash gets more flex room since monetary strings are longest */
}
.sticky-balance-bar .hud-section:first-child {
  flex: 1.18 1 0 !important;
}
.sticky-balance-bar .hud-section:last-child {
  flex: 0.82 1 0 !important;
}
.sticky-balance-bar {
  /* Separator Dots with Vertical Lines */
}
.sticky-balance-bar .hud-separator {
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sticky-balance-bar .hud-separator::before {
  content: "" !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  position: absolute !important;
}
.sticky-balance-bar .sep-cyan::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 5px #38bdf8, 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.sticky-balance-bar .sep-gold::before {
  background: #fbbf24 !important;
  box-shadow: 0 0 5px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.8) !important;
}
.sticky-balance-bar {
  /* 3D Elevated Squircles */
}
.sticky-balance-bar .hud-squircle {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.sticky-balance-bar .hud-squircle.cash-sq {
  background: linear-gradient(180deg, #132e22 0%, #07160f 100%) !important;
  border: 1px solid #10b981 !important;
  border-top: 1.5px solid #6ee7b7 !important;
  border-bottom: 1.5px solid #047857 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(16, 185, 129, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.eps-sq {
  background: linear-gradient(180deg, #132342 0%, #071024 100%) !important;
  border: 1px solid #3b82f6 !important;
  border-top: 1.5px solid #93c5fd !important;
  border-bottom: 1.5px solid #1d4ed8 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(59, 130, 246, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.shares-sq {
  background: linear-gradient(180deg, #332208 0%, #170e03 100%) !important;
  border: 1px solid #f59e0b !important;
  border-top: 1.5px solid #fde047 !important;
  border-bottom: 1.5px solid #b45309 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.sticky-balance-bar .hud-icon {
  width: 13px !important;
  height: 13px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
.sticky-balance-bar .hud-text-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.sticky-balance-bar .hud-label {
  font-size: 0.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px !important;
  text-transform: uppercase !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sticky-balance-bar .label-cash {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4) !important;
}
.sticky-balance-bar .label-eps {
  color: #60a5fa !important;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4) !important;
}
.sticky-balance-bar .label-shares {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4) !important;
}
.sticky-balance-bar .hud-value {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.6rem, 1.9vw, 0.7rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  display: block !important;
  line-height: 1.15 !important;
}
.sticky-balance-bar .hud-value .slash-s {
  color: #60a5fa !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  margin-left: 1px !important;
}

/* Proper RTL support for Sticky Balance Bar */
[dir=rtl] .sticky-balance-bar {
  direction: rtl !important;
}
[dir=rtl] .sticky-balance-bar .hud-text-group {
  text-align: right !important;
}
[dir=rtl] .sticky-balance-bar .hud-section:first-child {
  flex: 1.18 1 0 !important;
}
[dir=rtl] .sticky-balance-bar .hud-section:last-child {
  flex: 0.82 1 0 !important;
}

/* ===================================================
   UI/UX IMPROVEMENTS & ANIMATIONS (v1.1.0)
   =================================================== */
/* Theme enhancements transitions */
:root {
  transition: var(--transition-prop);
}

.app-container, header, main, section, .stat-box, .tab-btn, .upgrade-card, .teller-counter {
  /* transform intentionally excluded: transitioning transform on large scroll
     containers (.app-container, main, section) and frequently-repeated list
     items (.tab-btn, .upgrade-card) fights mobile hardware-accelerated
     scrolling and causes visible jumps mid-scroll. */
  transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* 1. Neon glowing borders & styles */
.teller-counter.active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--border-glow);
}

/* 2. Living Simulator Interactions */
/* Camera Wiggle */
.camera-wiggle {
  animation: camera-wiggle-anim 0.6s ease-in-out;
}

@keyframes camera-wiggle-anim {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  45% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Plant Shake */
.plant-shake {
  animation: plant-shake-anim 0.5s ease-in-out;
}

@keyframes plant-shake-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05) rotate(4deg);
  }
  40% {
    transform: scale(0.95) rotate(-4deg);
  }
  60% {
    transform: scale(1.02) rotate(2deg);
  }
  80% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* ATM Vibrate */
.atm-vibrate {
  animation: atm-vibrate-anim 0.4s linear;
}

@keyframes atm-vibrate-anim {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY DASHBOARD REDESIGN — Premium Cards & Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
/* Override header base to column layout */
header {
  background: rgba(7, 9, 16, 0.88) !important;
  border: 1px solid rgba(223, 171, 41, 0.14) !important;
  border-radius: 22px !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important; /* Allow full expansion on desktop */
  margin: 0 auto !important;
  width: 100% !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(223, 171, 41, 0.07) !important;
}

/* ── Top bar: Brand left, Buttons right ── */
.luxury-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Unified Topbar Action Buttons ── */
.header-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

.topbar-action-btn,
.sound-toggle-btn,
.boost-toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(24, 34, 58, 0.95) 0%, rgba(12, 17, 30, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.topbar-action-btn:hover,
.sound-toggle-btn:hover,
.boost-toggle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(234, 179, 8, 0.35) !important;
}

.topbar-action-btn span,
.sound-toggle-btn span,
.boost-toggle-btn span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* Fortune Wheel Header Button Accent */
.fortune-wheel-header-btn {
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Header Daily Achievements Accent */
.header-daily-btn {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Boost Button Accent (Circular, Matching the Set!) */
.boost-toggle-btn {
  border: 2px solid #fb923c !important;
  background: linear-gradient(145deg, rgba(67, 30, 15, 0.95) 0%, rgba(30, 12, 5, 0.98) 100%) !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #fb923c !important;
  overflow: visible !important;
}

.boost-timer-badge {
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(15, 18, 28, 0.95) !important;
  border: 1px solid #fbbf24 !important;
  color: #fbbf24 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  height: 14px !important;
  line-height: 13px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Live Boost Timer Capsule Pill (Desktop & Mobile) */
.boost-live-timer-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 28px !important;
  padding: 0 6px !important;
  background: linear-gradient(145deg, rgba(26, 20, 42, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  align-self: center !important;
}

.boost-live-timer-pill .timer-clock-icon {
  font-size: 0.8rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.boost-live-timer-pill .timer-countdown-val {
  font-family: "Outfit", "Roboto", monospace, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
}

/* Gentle, subtle idle blink at 00:00 */
.boost-live-timer-pill.idle-blink {
  animation: gentle-idle-blink 3s linear infinite !important;
}

@keyframes gentle-idle-blink {
  0%, 100% {
    opacity: 1;
    border-color: rgba(223, 171, 41, 0.45);
    box-shadow: 0 0 8px rgba(223, 171, 41, 0.2);
  }
  50% {
    opacity: 0.55;
    border-color: rgba(223, 171, 41, 0.2);
    box-shadow: 0 0 2px rgba(223, 171, 41, 0.05);
  }
}
/* Urgent state when <= 60 seconds left */
.boost-live-timer-pill.urgent {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.8) !important;
  animation: urgent-pill-pulse 0.7s ease-in-out infinite !important;
}

.boost-live-timer-pill.urgent .timer-countdown-val {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

@keyframes urgent-pill-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgb(239, 68, 68);
  }
}
@media (min-width: 650px) {
  .header-buttons-row {
    gap: 0.3rem !important;
  }
  .topbar-action-btn,
  .sound-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.2rem !important;
  }
  .topbar-action-btn span,
  .sound-toggle-btn span {
    font-size: 1.2rem !important;
  }
}
/* ── Dashboard grid ──
   Mobile: cash full-width top row, secondary cards side-by-side below
   Desktop: cash takes 60%, secondary cards take 40% on the right
*/
.luxury-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.65rem;
}

@media (min-width: 650px) {
  .luxury-dashboard {
    grid-template-columns: 1.6fr 1.1fr;
    grid-template-rows: 1fr;
  }
  .secondary-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.65rem;
  }
  .secondary-card {
    height: 100%;
  }
  .luxury-topbar {
    min-height: 60px;
  }
  .brand-title h1 {
    font-size: 2.2rem;
  }
  /* Center group content on wide desktop cards */
  .cash-hero-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem;
  }
  .cash-hero-card .hero-side-img {
    position: relative;
    transform: none;
    max-height: 120px;
  }
  .cash-hero-card .cash-card-content {
    padding-left: 0;
    align-items: flex-start;
  }
  .secondary-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
  }
  .secondary-card .secondary-side-img {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    max-height: 90px;
    min-width: 70px;
  }
  .secondary-card .secondary-card-content,
  .secondary-card .secondary-value,
  .secondary-card .secondary-card-top {
    padding-left: 0;
    z-index: 2;
  }
  /* Enlarge desktop card text for high readability */
  .cash-label {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
  }
  .cash-amount {
    font-size: 2.8rem !important;
  }
  .cash-eps {
    font-size: 1rem !important;
  }
  .secondary-label {
    font-size: 0.95rem !important;
    letter-spacing: 0.03em;
  }
  .secondary-value {
    font-size: 1.7rem !important;
  }
  .huge-multiplier {
    font-size: 1.85rem !important;
  }
  .small-multiplier-label {
    font-size: 0.92rem !important;
  }
  .prestige-hint-text {
    font-size: 0.82rem !important;
  }
}
@media (min-width: 1050px) {
  .cash-amount {
    font-size: 3.2rem !important;
  }
  .cash-label {
    font-size: 0.95rem !important;
  }
  .cash-eps {
    font-size: 1.1rem !important;
  }
  .secondary-label {
    font-size: 1.05rem !important;
  }
  .secondary-value {
    font-size: 2rem !important;
  }
  .huge-multiplier {
    font-size: 2.2rem !important;
  }
}
/* ════════════════════════════════
   PREMIUM CARD — BASE STYLES
   ════════════════════════════════ */
.premium-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.82) 0%, rgba(10, 12, 22, 0.92) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) {
  .premium-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}
/* ════════════════════════════════
   HERO CASH CARD
   ════════════════════════════════ */
.cash-hero-card {
  min-height: 115px; /* Increased height */
  padding: 1.2rem 1.5rem;
  border-color: rgba(52, 211, 153, 0.5); /* Crisp, brighter green border */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45), 0 0 48px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.15); /* Stronger inner green glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cash-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 60%, rgba(16, 185, 129, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.cash-hero-card:hover {
  border-color: rgba(16, 185, 129, 0.42);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 70px rgba(16, 185, 129, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Sweeping shimmer */
.cash-card-shimmer {
  position: absolute;
  top: 0;
  right: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 50%, transparent 80%);
  animation: luxury-shimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes luxury-shimmer {
  0% {
    right: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    right: 160%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    right: 160%;
    opacity: 0;
  }
}
/* Background decorative ring */
.cash-card-bg-ring {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.11);
  animation: ring-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cash-card-bg-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.07);
}

@keyframes ring-breathe {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    opacity: 0.9;
  }
}
/* Cash card content wrapper */
.cash-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 100px; /* Protect text from left image */
}

/* Top row: label + live badge */
.cash-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Add styles for 3D Side Images - Contained version */
.hero-side-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  max-height: 160px;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)) brightness(1.15); /* Stronger aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
}

.secondary-side-img {
  position: absolute;
  left: 2%;
  bottom: 5%;
  height: 90%;
  max-height: 85px;
  max-width: 85px;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(223, 171, 41, 0.5)) brightness(1.15); /* Golden aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
}

html[dir=ltr] .secondary-side-img {
  left: auto !important;
  right: 2% !important;
}

html[dir=rtl] .secondary-side-img {
  right: auto !important;
  left: 2% !important;
}

.secondary-side-img.boost-img {
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)) brightness(1.15); /* Purple aura */
}

.cash-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(52, 211, 153, 0.8);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cash-live-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(52, 211, 153, 0.85);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 5px;
  padding: 1px 5px;
  animation: live-blink 2.2s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* The hero number */
.cash-amount {
  font-size: 2.25rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 0 40px rgba(16, 185, 129, 0.28), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* EPS sub-row */
.cash-eps {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--money-green);
  margin-top: 0.05rem;
}

.eps-arrow {
  font-size: 0.72rem;
  display: inline-block;
  animation: eps-float 1.8s ease-in-out infinite;
  color: var(--green-light);
}

@keyframes eps-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
/* ════════════════════════════════
   SECONDARY CARDS GRID
   ════════════════════════════════ */
.secondary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.65rem;
}

/* ── Single secondary card ── */
.secondary-card {
  padding: 0.9rem 1rem;
  border-color: rgba(255, 204, 77, 0.4); /* Brighter gold border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(223, 171, 41, 0.15), inset 0 0 24px rgba(223, 171, 41, 0.12); /* Inner gold glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Strictly align text to right in RTL */
  gap: 0.18rem;
  min-height: 90px; /* Taller card */
}

.secondary-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 65px; /* Protect text from left image in RTL */
  padding-right: 0;
  position: relative;
  z-index: 2;
}

html[dir=ltr] .secondary-card-content {
  padding-left: 0 !important;
  padding-right: 65px !important; /* Protect text from right image in LTR */
  align-items: flex-start !important;
  text-align: left !important;
}

html[dir=rtl] .secondary-card-content {
  padding-left: 65px !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: right !important;
}

/* Fix gold shares image white corners specifically */
.gold-shares-card .secondary-side-img {
  border-radius: 24px;
}

.secondary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(223, 171, 41, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(223, 171, 41, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

@media (hover: hover) {
  .secondary-card:hover {
    border-color: rgba(223, 171, 41, 0.32);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(223, 171, 41, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
/* Gold top-edge accent line */
.secondary-card-accent {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(223, 171, 41, 0.9), transparent);
  border-radius: 0 0 2px 2px;
}

/* Multiplier Specific Styling (Purple/Blue) */
.multiplier-card {
  border-color: rgba(180, 140, 255, 0.45); /* Brighter purple border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(167, 139, 250, 0.15), inset 0 0 24px rgba(167, 139, 250, 0.12); /* Inner purple glow */
}

.multiplier-card::before {
  background: radial-gradient(circle at 10% 50%, rgba(167, 139, 250, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(147, 51, 234, 0.18) 0%, transparent 65%);
}

.multiplier-card:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(147, 51, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.multiplier-card .secondary-card-accent {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.9), transparent);
}

/* Icon + label row */
.secondary-card-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.secondary-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 5px rgba(223, 171, 41, 0.55));
  line-height: 1;
}

.secondary-label {
  font-size: clamp(0.68rem, 2.4vw, 0.85rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Main value in secondary card */
.secondary-value {
  font-size: 1.4rem; /* Smaller font to fit */
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  color: var(--primary-gold);
  text-shadow: 0 0 24px rgba(223, 171, 41, 0.32);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  display: block;
}

/* Multiplier card text override to match AI */
.multiplier-card .secondary-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.huge-multiplier {
  font-size: 1.5rem; /* Smaller multiplier to fit */
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #eaddff; /* Even brighter purple */
  text-shadow: 0 0 22px rgba(167, 139, 250, 0.5);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em; /* Condense slightly */
}

.small-multiplier-label {
  font-size: 0.85rem;
  color: rgba(196, 181, 253, 0.8);
  font-weight: 500;
}

/* Prestige hint under shares value */
.prestige-hint-text {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.65);
  line-height: 1.35;
  margin-top: 0.1rem;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   RESPONSIVE — PORTRAIT MOBILE
   ════════════════════════════════ */
@media (max-width: 950px), (max-height: 500px) {
  header {
    padding: 0.55rem 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 16px !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .luxury-topbar {
    /* Let space-between handle it on single line, but force buttons left if wrapped */
  }
  .header-buttons-row {
    order: 1 !important;
    margin-inline-start: auto !important; /* Forces buttons to left side in RTL */
  }
  /* פורטרייט: שורה 1 cash רוחב מלא, שורה 2 secondary זה לצד זה */
  .luxury-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.45rem !important;
  }
  .secondary-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0.45rem !important;
  }
  .cash-hero-card {
    min-height: 88px !important;
    padding: 0.75rem 1rem 0.6rem !important;
    justify-content: flex-start !important;
  }
  .cash-label {
    font-size: 0.78rem !important;
    opacity: 0.7;
  }
  .cash-amount {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }
  .cash-eps {
    font-size: 0.82rem !important;
    margin-top: 0.1rem !important;
  }
  .secondary-card {
    min-height: 72px !important;
    padding: 0.5rem 0.6rem !important;
    justify-content: flex-start !important;
    position: relative !important;
  }
  .secondary-side-img {
    max-height: 52px !important;
    max-width: 52px !important;
    bottom: 2px !important;
  }
  html[dir=ltr] .secondary-side-img {
    right: 2px !important;
    left: auto !important;
  }
  html[dir=rtl] .secondary-side-img {
    left: 2px !important;
    right: auto !important;
  }
  html[dir=ltr] .secondary-card-content {
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
  html[dir=rtl] .secondary-card-content {
    padding-left: 50px !important;
    padding-right: 0 !important;
  }
  .secondary-label {
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  .secondary-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  .luxury-topbar {
    gap: 0.35rem;
  }
  .brand-title p {
    display: none !important;
  }
  .brand-icon {
    font-size: 1.3rem !important;
  }
  .header-buttons-row {
    gap: 0.3rem !important;
    width: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .brand-section {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 0.1rem;
    justify-content: center !important;
  }
  .brand-title h1 {
    font-size: 1.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #prestige-preview-label {
    display: none !important;
  }
}
/* Narrow phone (<360px) — shrink further */
@media (max-width: 360px) {
  .cash-amount {
    font-size: 1.45rem !important;
  }
  .secondary-value {
    font-size: 1rem !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 0.88rem !important;
  }
}
/* Falling Leaf */
.falling-leaf {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  z-index: 100;
  animation: leaf-fall-anim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes leaf-fall-anim {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-15px, 20px) rotate(45deg);
  }
  60% {
    transform: translate(10px, 45px) rotate(-90deg);
  }
  100% {
    transform: translate(-5px, 80px) rotate(180deg);
    opacity: 0;
  }
}
/* ATM Receipt */
.atm-receipt {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  padding: 1px 4px;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 50;
  animation: receipt-print-anim 1.2s ease-out forwards;
}

@keyframes receipt-print-anim {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  30% {
    height: 12px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
}
/* 3. Milestone Sparkle & Confetti */
.upgrade-card.sparkle-flash {
  animation: card-sparkle-anim 0.5s ease-out;
}

@keyframes card-sparkle-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(223, 171, 41, 0.6);
    border-color: var(--primary-gold);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
}
.plaque-level.milestone-active {
  background: linear-gradient(135deg, #dfab29 0%, #ffffff 50%, #b8860b 100%) !important;
  color: #1a1505 !important;
  text-shadow: none !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  border-color: #ffffff !important;
}

/* Confetti particle */
.confetti-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 150;
  border-radius: 50%;
  animation: confetti-fall-anim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes confetti-fall-anim {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}
/* 4. VIP Glow & Queue Alert */
/* VIP Teller Glow Effect */
.teller-counter.vip-serving-glow {
  border-color: rgba(192, 132, 252, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 132, 252, 0.45) !important;
}

.teller-counter.rich-serving-glow {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.45) !important;
}

/* Queue Full Pulse Warning */
.queue-zone.status-alert {
  animation: queue-alert-pulse 1.5s infinite ease-in-out;
}

@keyframes queue-alert-pulse {
  0% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    border-color: var(--danger-red);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(239, 68, 68, 0.4);
  }
  100% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}
/* ── Sticky Persistent Mini Balance Bar (3D Depth Masterpiece HUD - No Truncation) ── */
.sticky-balance-bar {
  position: fixed !important;
  top: max(8px + env(safe-area-inset-top, 0px), 34px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-130%) !important;
  width: calc(100% - 10px) !important;
  max-width: 480px !important;
  height: 48px !important;
  z-index: 8500 !important;
  background: linear-gradient(180deg, #0e1424 0%, #060913 100%) !important;
  border-radius: 14px !important;
  padding: 3px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
  /* Multi-layer metallic outer border with top specular flare */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 2px rgba(10, 14, 26, 0.9), 0 12px 25px rgba(0, 0, 0, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.sticky-balance-bar.visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sticky-balance-bar {
  /* Top Central Lens Flare */
}
.sticky-balance-bar::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 30% !important;
  width: 40% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.9), #ffffff, rgba(147, 197, 253, 0.9), transparent) !important;
  filter: drop-shadow(0 0 6px #60a5fa) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar {
  /* Bottom Colored Ambient Underglows */
}
.sticky-balance-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.65) 5%, transparent 30%, rgba(56, 189, 248, 0.75) 50%, transparent 70%, rgba(245, 158, 11, 0.65) 95%) !important;
  filter: blur(5px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar .sticky-balance-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  gap: 2px !important;
}
.sticky-balance-bar {
  /* 3 Recessed Sections / Slots */
}
.sticky-balance-bar .hud-section {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: rgba(4, 7, 16, 0.55) !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sticky-balance-bar {
  /* Separator Dots with Vertical Lines */
}
.sticky-balance-bar .hud-separator {
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sticky-balance-bar .hud-separator::before {
  content: "" !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  position: absolute !important;
}
.sticky-balance-bar .sep-cyan::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 5px #38bdf8, 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.sticky-balance-bar .sep-gold::before {
  background: #fbbf24 !important;
  box-shadow: 0 0 5px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.8) !important;
}
.sticky-balance-bar {
  /* 3D Elevated Squircles */
}
.sticky-balance-bar .hud-squircle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.sticky-balance-bar .hud-squircle.cash-sq {
  background: linear-gradient(180deg, #132e22 0%, #07160f 100%) !important;
  border: 1px solid #10b981 !important;
  border-top: 1.5px solid #6ee7b7 !important;
  border-bottom: 1.5px solid #047857 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(16, 185, 129, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.eps-sq {
  background: linear-gradient(180deg, #132342 0%, #071024 100%) !important;
  border: 1px solid #3b82f6 !important;
  border-top: 1.5px solid #93c5fd !important;
  border-bottom: 1.5px solid #1d4ed8 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(59, 130, 246, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.shares-sq {
  background: linear-gradient(180deg, #332208 0%, #170e03 100%) !important;
  border: 1px solid #f59e0b !important;
  border-top: 1.5px solid #fde047 !important;
  border-bottom: 1.5px solid #b45309 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.sticky-balance-bar .hud-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
.sticky-balance-bar .hud-text-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.sticky-balance-bar .hud-label {
  font-size: 0.52rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sticky-balance-bar .label-cash {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4) !important;
}
.sticky-balance-bar .label-eps {
  color: #60a5fa !important;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4) !important;
}
.sticky-balance-bar .label-shares {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4) !important;
}
.sticky-balance-bar .hud-value {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.66rem, 2.1vw, 0.76rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  display: block !important;
  line-height: 1.15 !important;
}
.sticky-balance-bar .hud-value .slash-s {
  color: #60a5fa !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  margin-left: 1px !important;
}

/* Proper RTL support for Sticky Balance Bar */
[dir=rtl] .sticky-balance-bar {
  direction: rtl !important;
}
[dir=rtl] .sticky-balance-bar .hud-text-group {
  text-align: right !important;
}

/* ===================================================
   UI/UX IMPROVEMENTS & ANIMATIONS (v1.1.0)
   =================================================== */
/* Theme enhancements transitions */
:root {
  transition: var(--transition-prop);
}

.app-container, header, main, section, .stat-box, .tab-btn, .upgrade-card, .teller-counter {
  /* transform intentionally excluded: transitioning transform on large scroll
     containers (.app-container, main, section) and frequently-repeated list
     items (.tab-btn, .upgrade-card) fights mobile hardware-accelerated
     scrolling and causes visible jumps mid-scroll. */
  transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* 1. Neon glowing borders & styles */
.teller-counter.active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--border-glow);
}

/* 2. Living Simulator Interactions */
/* Camera Wiggle */
.camera-wiggle {
  animation: camera-wiggle-anim 0.6s ease-in-out;
}

@keyframes camera-wiggle-anim {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  45% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Plant Shake */
.plant-shake {
  animation: plant-shake-anim 0.5s ease-in-out;
}

@keyframes plant-shake-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05) rotate(4deg);
  }
  40% {
    transform: scale(0.95) rotate(-4deg);
  }
  60% {
    transform: scale(1.02) rotate(2deg);
  }
  80% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* ATM Vibrate */
.atm-vibrate {
  animation: atm-vibrate-anim 0.4s linear;
}

@keyframes atm-vibrate-anim {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY DASHBOARD REDESIGN — Premium Cards & Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
/* Override header base to column layout */
header {
  background: rgba(7, 9, 16, 0.88) !important;
  border: 1px solid rgba(223, 171, 41, 0.14) !important;
  border-radius: 22px !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important; /* Allow full expansion on desktop */
  margin: 0 auto !important;
  width: 100% !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(223, 171, 41, 0.07) !important;
}

/* ── Top bar: Brand left, Buttons right ── */
.luxury-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Unified Topbar Action Buttons ── */
.header-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

.topbar-action-btn,
.sound-toggle-btn,
.boost-toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(24, 34, 58, 0.95) 0%, rgba(12, 17, 30, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.topbar-action-btn:hover,
.sound-toggle-btn:hover,
.boost-toggle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(234, 179, 8, 0.35) !important;
}

.topbar-action-btn span,
.sound-toggle-btn span,
.boost-toggle-btn span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* Fortune Wheel Header Button Accent */
.fortune-wheel-header-btn {
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Header Daily Achievements Accent */
.header-daily-btn {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Boost Button Accent (Circular, Matching the Set!) */
.boost-toggle-btn {
  border: 2px solid #fb923c !important;
  background: linear-gradient(145deg, rgba(67, 30, 15, 0.95) 0%, rgba(30, 12, 5, 0.98) 100%) !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #fb923c !important;
  overflow: visible !important;
}

.boost-timer-badge {
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(15, 18, 28, 0.95) !important;
  border: 1px solid #fbbf24 !important;
  color: #fbbf24 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  height: 14px !important;
  line-height: 13px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Live Boost Timer Capsule Pill (Desktop & Mobile) */
.boost-live-timer-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 28px !important;
  padding: 0 6px !important;
  background: linear-gradient(145deg, rgba(26, 20, 42, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  align-self: center !important;
}

.boost-live-timer-pill .timer-clock-icon {
  font-size: 0.8rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.boost-live-timer-pill .timer-countdown-val {
  font-family: "Outfit", "Roboto", monospace, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
}

/* Gentle, subtle idle blink at 00:00 */
.boost-live-timer-pill.idle-blink {
  animation: gentle-idle-blink 3s linear infinite !important;
}

@keyframes gentle-idle-blink {
  0%, 100% {
    opacity: 1;
    border-color: rgba(223, 171, 41, 0.45);
    box-shadow: 0 0 8px rgba(223, 171, 41, 0.2);
  }
  50% {
    opacity: 0.55;
    border-color: rgba(223, 171, 41, 0.2);
    box-shadow: 0 0 2px rgba(223, 171, 41, 0.05);
  }
}
/* Urgent state when <= 60 seconds left */
.boost-live-timer-pill.urgent {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.8) !important;
  animation: urgent-pill-pulse 0.7s ease-in-out infinite !important;
}

.boost-live-timer-pill.urgent .timer-countdown-val {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

@keyframes urgent-pill-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgb(239, 68, 68);
  }
}
@media (min-width: 650px) {
  .header-buttons-row {
    gap: 0.3rem !important;
  }
  .topbar-action-btn,
  .sound-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.2rem !important;
  }
  .topbar-action-btn span,
  .sound-toggle-btn span {
    font-size: 1.2rem !important;
  }
}
/* ── Dashboard grid ──
   Mobile: cash full-width top row, secondary cards side-by-side below
   Desktop: cash takes 60%, secondary cards take 40% on the right
*/
.luxury-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.65rem;
}

@media (min-width: 650px) {
  .luxury-dashboard {
    grid-template-columns: 1.6fr 1.1fr;
    grid-template-rows: 1fr;
  }
  .secondary-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.65rem;
  }
  .secondary-card {
    height: 100%;
  }
  .luxury-topbar {
    min-height: 60px;
  }
  .brand-title h1 {
    font-size: 2.2rem;
  }
  /* Center group content on wide desktop cards */
  .cash-hero-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem;
  }
  .cash-hero-card .hero-side-img {
    position: relative;
    transform: none;
    max-height: 120px;
  }
  .cash-hero-card .cash-card-content {
    padding-left: 0;
    align-items: flex-start;
  }
  .secondary-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
  }
  .secondary-card .secondary-side-img {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    max-height: 90px;
    min-width: 70px;
  }
  .secondary-card .secondary-card-content,
  .secondary-card .secondary-value,
  .secondary-card .secondary-card-top {
    padding-left: 0;
    z-index: 2;
  }
  /* Enlarge desktop card text for high readability */
  .cash-label {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
  }
  .cash-amount {
    font-size: 2.8rem !important;
  }
  .cash-eps {
    font-size: 1rem !important;
  }
  .secondary-label {
    font-size: 0.95rem !important;
    letter-spacing: 0.03em;
  }
  .secondary-value {
    font-size: 1.7rem !important;
  }
  .huge-multiplier {
    font-size: 1.85rem !important;
  }
  .small-multiplier-label {
    font-size: 0.92rem !important;
  }
  .prestige-hint-text {
    font-size: 0.82rem !important;
  }
}
@media (min-width: 1050px) {
  .cash-amount {
    font-size: 3.2rem !important;
  }
  .cash-label {
    font-size: 0.95rem !important;
  }
  .cash-eps {
    font-size: 1.1rem !important;
  }
  .secondary-label {
    font-size: 1.05rem !important;
  }
  .secondary-value {
    font-size: 2rem !important;
  }
  .huge-multiplier {
    font-size: 2.2rem !important;
  }
}
/* ════════════════════════════════
   PREMIUM CARD — BASE STYLES
   ════════════════════════════════ */
.premium-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.82) 0%, rgba(10, 12, 22, 0.92) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) {
  .premium-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}
/* ════════════════════════════════
   HERO CASH CARD
   ════════════════════════════════ */
.cash-hero-card {
  min-height: 115px; /* Increased height */
  padding: 1.2rem 1.5rem;
  border-color: rgba(52, 211, 153, 0.5); /* Crisp, brighter green border */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45), 0 0 48px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.15); /* Stronger inner green glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cash-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 60%, rgba(16, 185, 129, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.cash-hero-card:hover {
  border-color: rgba(16, 185, 129, 0.42);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 70px rgba(16, 185, 129, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Sweeping shimmer */
.cash-card-shimmer {
  position: absolute;
  top: 0;
  right: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 50%, transparent 80%);
  animation: luxury-shimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes luxury-shimmer {
  0% {
    right: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    right: 160%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    right: 160%;
    opacity: 0;
  }
}
/* Background decorative ring */
.cash-card-bg-ring {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.11);
  animation: ring-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cash-card-bg-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.07);
}

@keyframes ring-breathe {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    opacity: 0.9;
  }
}
/* Cash card content wrapper */
.cash-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 100px; /* Protect text from left image */
}

/* Top row: label + live badge */
.cash-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Add styles for 3D Side Images - Contained version */
.hero-side-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  max-height: 160px;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)) brightness(1.15); /* Stronger aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
}

.secondary-side-img {
  position: absolute;
  left: 2%;
  bottom: 5%;
  height: 90%;
  max-height: 85px;
  max-width: 85px;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(223, 171, 41, 0.5)) brightness(1.15); /* Golden aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
}

html[dir=ltr] .secondary-side-img {
  left: auto !important;
  right: 2% !important;
}

html[dir=rtl] .secondary-side-img {
  right: auto !important;
  left: 2% !important;
}

.secondary-side-img.boost-img {
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)) brightness(1.15); /* Purple aura */
}

.cash-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(52, 211, 153, 0.8);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cash-live-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(52, 211, 153, 0.85);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 5px;
  padding: 1px 5px;
  animation: live-blink 2.2s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* The hero number */
.cash-amount {
  font-size: 2.25rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 0 40px rgba(16, 185, 129, 0.28), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* EPS sub-row */
.cash-eps {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--money-green);
  margin-top: 0.05rem;
}

.eps-arrow {
  font-size: 0.72rem;
  display: inline-block;
  animation: eps-float 1.8s ease-in-out infinite;
  color: var(--green-light);
}

@keyframes eps-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
/* ════════════════════════════════
   SECONDARY CARDS GRID
   ════════════════════════════════ */
.secondary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.65rem;
}

/* ── Single secondary card ── */
.secondary-card {
  padding: 0.9rem 1rem;
  border-color: rgba(255, 204, 77, 0.4); /* Brighter gold border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(223, 171, 41, 0.15), inset 0 0 24px rgba(223, 171, 41, 0.12); /* Inner gold glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Strictly align text to right in RTL */
  gap: 0.18rem;
  min-height: 90px; /* Taller card */
}

.secondary-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 65px; /* Protect text from left image in RTL */
  padding-right: 0;
  position: relative;
  z-index: 2;
}

html[dir=ltr] .secondary-card-content {
  padding-left: 0 !important;
  padding-right: 65px !important; /* Protect text from right image in LTR */
  align-items: flex-start !important;
  text-align: left !important;
}

html[dir=rtl] .secondary-card-content {
  padding-left: 65px !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: right !important;
}

/* Fix gold shares image white corners specifically */
.gold-shares-card .secondary-side-img {
  border-radius: 24px;
}

.secondary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(223, 171, 41, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(223, 171, 41, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

@media (hover: hover) {
  .secondary-card:hover {
    border-color: rgba(223, 171, 41, 0.32);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(223, 171, 41, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
/* Gold top-edge accent line */
.secondary-card-accent {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(223, 171, 41, 0.9), transparent);
  border-radius: 0 0 2px 2px;
}

/* Multiplier Specific Styling (Purple/Blue) */
.multiplier-card {
  border-color: rgba(180, 140, 255, 0.45); /* Brighter purple border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(167, 139, 250, 0.15), inset 0 0 24px rgba(167, 139, 250, 0.12); /* Inner purple glow */
}

.multiplier-card::before {
  background: radial-gradient(circle at 10% 50%, rgba(167, 139, 250, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(147, 51, 234, 0.18) 0%, transparent 65%);
}

.multiplier-card:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(147, 51, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.multiplier-card .secondary-card-accent {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.9), transparent);
}

/* Icon + label row */
.secondary-card-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.secondary-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 5px rgba(223, 171, 41, 0.55));
  line-height: 1;
}

.secondary-label {
  font-size: clamp(0.68rem, 2.4vw, 0.85rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Main value in secondary card */
.secondary-value {
  font-size: 1.4rem; /* Smaller font to fit */
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  color: var(--primary-gold);
  text-shadow: 0 0 24px rgba(223, 171, 41, 0.32);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  display: block;
}

/* Multiplier card text override to match AI */
.multiplier-card .secondary-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.huge-multiplier {
  font-size: 1.5rem; /* Smaller multiplier to fit */
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #eaddff; /* Even brighter purple */
  text-shadow: 0 0 22px rgba(167, 139, 250, 0.5);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em; /* Condense slightly */
}

.small-multiplier-label {
  font-size: 0.85rem;
  color: rgba(196, 181, 253, 0.8);
  font-weight: 500;
}

/* Prestige hint under shares value */
.prestige-hint-text {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.65);
  line-height: 1.35;
  margin-top: 0.1rem;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   RESPONSIVE — PORTRAIT MOBILE
   ════════════════════════════════ */
@media (max-width: 950px), (max-height: 500px) {
  header {
    padding: 0.55rem 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 16px !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .luxury-topbar {
    /* Let space-between handle it on single line, but force buttons left if wrapped */
  }
  .header-buttons-row {
    order: 1 !important;
    margin-inline-start: auto !important; /* Forces buttons to left side in RTL */
  }
  /* פורטרייט: שורה 1 cash רוחב מלא, שורה 2 secondary זה לצד זה */
  .luxury-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.45rem !important;
  }
  .secondary-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0.45rem !important;
  }
  .cash-hero-card {
    min-height: 88px !important;
    padding: 0.75rem 1rem 0.6rem !important;
    justify-content: flex-start !important;
  }
  .cash-label {
    font-size: 0.78rem !important;
    opacity: 0.7;
  }
  .cash-amount {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }
  .cash-eps {
    font-size: 0.82rem !important;
    margin-top: 0.1rem !important;
  }
  .secondary-card {
    min-height: 72px !important;
    padding: 0.5rem 0.6rem !important;
    justify-content: flex-start !important;
    position: relative !important;
  }
  .secondary-side-img {
    max-height: 52px !important;
    max-width: 52px !important;
    bottom: 2px !important;
  }
  html[dir=ltr] .secondary-side-img {
    right: 2px !important;
    left: auto !important;
  }
  html[dir=rtl] .secondary-side-img {
    left: 2px !important;
    right: auto !important;
  }
  html[dir=ltr] .secondary-card-content {
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
  html[dir=rtl] .secondary-card-content {
    padding-left: 50px !important;
    padding-right: 0 !important;
  }
  .secondary-label {
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  .secondary-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  .luxury-topbar {
    gap: 0.35rem;
  }
  .brand-title p {
    display: none !important;
  }
  .brand-icon {
    font-size: 1.3rem !important;
  }
  .header-buttons-row {
    gap: 0.3rem !important;
    width: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .brand-section {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 0.1rem;
    justify-content: center !important;
  }
  .brand-title h1 {
    font-size: 1.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #prestige-preview-label {
    display: none !important;
  }
}
/* Narrow phone (<360px) — shrink further */
@media (max-width: 360px) {
  .cash-amount {
    font-size: 1.45rem !important;
  }
  .secondary-value {
    font-size: 1rem !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 0.88rem !important;
  }
}
/* Falling Leaf */
.falling-leaf {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  z-index: 100;
  animation: leaf-fall-anim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes leaf-fall-anim {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-15px, 20px) rotate(45deg);
  }
  60% {
    transform: translate(10px, 45px) rotate(-90deg);
  }
  100% {
    transform: translate(-5px, 80px) rotate(180deg);
    opacity: 0;
  }
}
/* ATM Receipt */
.atm-receipt {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  padding: 1px 4px;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 50;
  animation: receipt-print-anim 1.2s ease-out forwards;
}

@keyframes receipt-print-anim {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  30% {
    height: 12px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
}
/* 3. Milestone Sparkle & Confetti */
.upgrade-card.sparkle-flash {
  animation: card-sparkle-anim 0.5s ease-out;
}

@keyframes card-sparkle-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(223, 171, 41, 0.6);
    border-color: var(--primary-gold);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
}
.plaque-level.milestone-active {
  background: linear-gradient(135deg, #dfab29 0%, #ffffff 50%, #b8860b 100%) !important;
  color: #1a1505 !important;
  text-shadow: none !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  border-color: #ffffff !important;
}

/* Confetti particle */
.confetti-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 150;
  border-radius: 50%;
  animation: confetti-fall-anim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes confetti-fall-anim {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}
/* 4. VIP Glow & Queue Alert */
/* VIP Teller Glow Effect */
.teller-counter.vip-serving-glow {
  border-color: rgba(192, 132, 252, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 132, 252, 0.45) !important;
}

.teller-counter.rich-serving-glow {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.45) !important;
}

/* Queue Full Pulse Warning */
.queue-zone.status-alert {
  animation: queue-alert-pulse 1.5s infinite ease-in-out;
}

@keyframes queue-alert-pulse {
  0% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    border-color: var(--danger-red);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(239, 68, 68, 0.4);
  }
  100% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}
/* ── Sticky Persistent Mini Balance Bar (3D Depth Masterpiece HUD - No Truncation) ── */
.sticky-balance-bar {
  position: fixed !important;
  top: max(8px + env(safe-area-inset-top, 0px), 34px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-130%) !important;
  width: calc(100% - 12px) !important;
  max-width: 480px !important;
  height: 48px !important;
  z-index: 8500 !important;
  background: linear-gradient(180deg, #0e1424 0%, #060913 100%) !important;
  border-radius: 14px !important;
  padding: 3px 5px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
  /* Multi-layer metallic outer border with top specular flare */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 2px rgba(10, 14, 26, 0.9), 0 12px 25px rgba(0, 0, 0, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.sticky-balance-bar.visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sticky-balance-bar {
  /* Top Central Lens Flare */
}
.sticky-balance-bar::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 30% !important;
  width: 40% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.9), #ffffff, rgba(147, 197, 253, 0.9), transparent) !important;
  filter: drop-shadow(0 0 6px #60a5fa) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar {
  /* Bottom Colored Ambient Underglows */
}
.sticky-balance-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.65) 5%, transparent 30%, rgba(56, 189, 248, 0.75) 50%, transparent 70%, rgba(245, 158, 11, 0.65) 95%) !important;
  filter: blur(5px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar .sticky-balance-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  gap: 3px !important;
}
.sticky-balance-bar {
  /* 3 Recessed Sections / Slots */
}
.sticky-balance-bar .hud-section {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: rgba(4, 7, 16, 0.55) !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.sticky-balance-bar {
  /* Separator Dots with Vertical Lines */
}
.sticky-balance-bar .hud-separator {
  width: 1px !important;
  height: 20px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sticky-balance-bar .hud-separator::before {
  content: "" !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  position: absolute !important;
}
.sticky-balance-bar .sep-cyan::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 5px #38bdf8, 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.sticky-balance-bar .sep-gold::before {
  background: #fbbf24 !important;
  box-shadow: 0 0 5px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.8) !important;
}
.sticky-balance-bar {
  /* 3D Elevated Squircles */
}
.sticky-balance-bar .hud-squircle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.sticky-balance-bar .hud-squircle.cash-sq {
  background: linear-gradient(180deg, #132e22 0%, #07160f 100%) !important;
  border: 1px solid #10b981 !important;
  border-top: 1.5px solid #6ee7b7 !important;
  border-bottom: 1.5px solid #047857 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(16, 185, 129, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.eps-sq {
  background: linear-gradient(180deg, #132342 0%, #071024 100%) !important;
  border: 1px solid #3b82f6 !important;
  border-top: 1.5px solid #93c5fd !important;
  border-bottom: 1.5px solid #1d4ed8 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(59, 130, 246, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.shares-sq {
  background: linear-gradient(180deg, #332208 0%, #170e03 100%) !important;
  border: 1px solid #f59e0b !important;
  border-top: 1.5px solid #fde047 !important;
  border-bottom: 1.5px solid #b45309 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.sticky-balance-bar .hud-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) !important;
}
.sticky-balance-bar .hud-text-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.sticky-balance-bar .hud-label {
  font-size: 0.52rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sticky-balance-bar .label-cash {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4) !important;
}
.sticky-balance-bar .label-eps {
  color: #60a5fa !important;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4) !important;
}
.sticky-balance-bar .label-shares {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4) !important;
}
.sticky-balance-bar .hud-value {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(0.64rem, 2vw, 0.72rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.35px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  display: block !important;
  line-height: 1.15 !important;
  unicode-bidi: isolate !important;
}
.sticky-balance-bar .hud-value .slash-s {
  color: #60a5fa !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  margin-left: 1px !important;
}

/* ===================================================
   UI/UX IMPROVEMENTS & ANIMATIONS (v1.1.0)
   =================================================== */
/* Theme enhancements transitions */
:root {
  transition: var(--transition-prop);
}

.app-container, header, main, section, .stat-box, .tab-btn, .upgrade-card, .teller-counter {
  /* transform intentionally excluded: transitioning transform on large scroll
     containers (.app-container, main, section) and frequently-repeated list
     items (.tab-btn, .upgrade-card) fights mobile hardware-accelerated
     scrolling and causes visible jumps mid-scroll. */
  transition: background var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* 1. Neon glowing borders & styles */
.teller-counter.active {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px var(--border-glow);
}

/* 2. Living Simulator Interactions */
/* Camera Wiggle */
.camera-wiggle {
  animation: camera-wiggle-anim 0.6s ease-in-out;
}

@keyframes camera-wiggle-anim {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(15deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  45% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Plant Shake */
.plant-shake {
  animation: plant-shake-anim 0.5s ease-in-out;
}

@keyframes plant-shake-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05) rotate(4deg);
  }
  40% {
    transform: scale(0.95) rotate(-4deg);
  }
  60% {
    transform: scale(1.02) rotate(2deg);
  }
  80% {
    transform: scale(0.98) rotate(-1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
/* ATM Vibrate */
.atm-vibrate {
  animation: atm-vibrate-anim 0.4s linear;
}

@keyframes atm-vibrate-anim {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 1px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1px, -1px);
  }
  80% {
    transform: translate(1px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ═══════════════════════════════════════════════════════════════
   LUXURY DASHBOARD REDESIGN — Premium Cards & Glassmorphism
   ═══════════════════════════════════════════════════════════════ */
/* Override header base to column layout */
header {
  background: rgba(7, 9, 16, 0.88) !important;
  border: 1px solid rgba(223, 171, 41, 0.14) !important;
  border-radius: 22px !important;
  padding: 1rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important; /* Allow full expansion on desktop */
  margin: 0 auto !important;
  width: 100% !important;
  gap: 0.85rem !important;
  align-items: stretch !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(223, 171, 41, 0.07) !important;
}

/* ── Top bar: Brand left, Buttons right ── */
.luxury-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Unified Topbar Action Buttons ── */
.header-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

.topbar-action-btn,
.sound-toggle-btn,
.boost-toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(24, 34, 58, 0.95) 0%, rgba(12, 17, 30, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  position: relative !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.topbar-action-btn:hover,
.sound-toggle-btn:hover,
.boost-toggle-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.8) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(234, 179, 8, 0.35) !important;
}

.topbar-action-btn span,
.sound-toggle-btn span,
.boost-toggle-btn span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 1rem !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* Fortune Wheel Header Button Accent */
.fortune-wheel-header-btn {
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 16px rgba(234, 179, 8, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Header Daily Achievements Accent */
.header-daily-btn {
  border: 2px solid #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

/* Boost Button Accent (Circular, Matching the Set!) */
.boost-toggle-btn {
  border: 2px solid #fb923c !important;
  background: linear-gradient(145deg, rgba(67, 30, 15, 0.95) 0%, rgba(30, 12, 5, 0.98) 100%) !important;
  box-shadow: 0 0 16px rgba(251, 146, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  color: #fb923c !important;
  overflow: visible !important;
}

.boost-timer-badge {
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(15, 18, 28, 0.95) !important;
  border: 1px solid #fbbf24 !important;
  color: #fbbf24 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  height: 14px !important;
  line-height: 13px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Live Boost Timer Capsule Pill (Desktop & Mobile) */
.boost-live-timer-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 28px !important;
  padding: 0 6px !important;
  background: linear-gradient(145deg, rgba(26, 20, 42, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: all 0.3s ease !important;
  align-self: center !important;
}

.boost-live-timer-pill .timer-clock-icon {
  font-size: 0.8rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.boost-live-timer-pill .timer-countdown-val {
  font-family: "Outfit", "Roboto", monospace, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
}

/* Gentle, subtle idle blink at 00:00 */
.boost-live-timer-pill.idle-blink {
  animation: gentle-idle-blink 3s linear infinite !important;
}

@keyframes gentle-idle-blink {
  0%, 100% {
    opacity: 1;
    border-color: rgba(223, 171, 41, 0.45);
    box-shadow: 0 0 8px rgba(223, 171, 41, 0.2);
  }
  50% {
    opacity: 0.55;
    border-color: rgba(223, 171, 41, 0.2);
    box-shadow: 0 0 2px rgba(223, 171, 41, 0.05);
  }
}
/* Urgent state when <= 60 seconds left */
.boost-live-timer-pill.urgent {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.8) !important;
  animation: urgent-pill-pulse 0.7s ease-in-out infinite !important;
}

.boost-live-timer-pill.urgent .timer-countdown-val {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9) !important;
}

@keyframes urgent-pill-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 24px rgb(239, 68, 68);
  }
}
@media (min-width: 650px) {
  .header-buttons-row {
    gap: 0.3rem !important;
  }
  .topbar-action-btn,
  .sound-toggle-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 1.2rem !important;
  }
  .topbar-action-btn span,
  .sound-toggle-btn span {
    font-size: 1.2rem !important;
  }
}
/* ── Dashboard grid ──
   Mobile: cash full-width top row, secondary cards side-by-side below
   Desktop: cash takes 60%, secondary cards take 40% on the right
*/
.luxury-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 0.65rem;
}

@media (min-width: 650px) {
  .luxury-dashboard {
    grid-template-columns: 1.6fr 1.1fr;
    grid-template-rows: 1fr;
  }
  .secondary-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0.65rem;
  }
  .secondary-card {
    height: 100%;
  }
  .luxury-topbar {
    min-height: 60px;
  }
  .brand-title h1 {
    font-size: 2.2rem;
  }
  /* Center group content on wide desktop cards */
  .cash-hero-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2rem;
  }
  .cash-hero-card .hero-side-img {
    position: relative;
    transform: none;
    max-height: 120px;
  }
  .cash-hero-card .cash-card-content {
    padding-left: 0;
    align-items: flex-start;
  }
  .secondary-card {
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
  }
  .secondary-card .secondary-side-img {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    max-height: 90px;
    min-width: 70px;
  }
  .secondary-card .secondary-card-content,
  .secondary-card .secondary-value,
  .secondary-card .secondary-card-top {
    padding-left: 0;
    z-index: 2;
  }
  /* Enlarge desktop card text for high readability */
  .cash-label {
    font-size: 0.85rem !important;
    letter-spacing: 0.08em;
  }
  .cash-amount {
    font-size: 2.8rem !important;
  }
  .cash-eps {
    font-size: 1rem !important;
  }
  .secondary-label {
    font-size: 0.95rem !important;
    letter-spacing: 0.03em;
  }
  .secondary-value {
    font-size: 1.7rem !important;
  }
  .huge-multiplier {
    font-size: 1.85rem !important;
  }
  .small-multiplier-label {
    font-size: 0.92rem !important;
  }
  .prestige-hint-text {
    font-size: 0.82rem !important;
  }
}
@media (min-width: 1050px) {
  .cash-amount {
    font-size: 3.2rem !important;
  }
  .cash-label {
    font-size: 0.95rem !important;
  }
  .cash-eps {
    font-size: 1.1rem !important;
  }
  .secondary-label {
    font-size: 1.05rem !important;
  }
  .secondary-value {
    font-size: 2rem !important;
  }
  .huge-multiplier {
    font-size: 2.2rem !important;
  }
}
/* ════════════════════════════════
   PREMIUM CARD — BASE STYLES
   ════════════════════════════════ */
.premium-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(16, 20, 32, 0.82) 0%, rgba(10, 12, 22, 0.92) 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

@media (hover: hover) {
  .premium-card:hover {
    transform: translateY(-4px) scale(1.01);
  }
}
/* ════════════════════════════════
   HERO CASH CARD
   ════════════════════════════════ */
.cash-hero-card {
  min-height: 115px; /* Increased height */
  padding: 1.2rem 1.5rem;
  border-color: rgba(52, 211, 153, 0.5); /* Crisp, brighter green border */
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45), 0 0 48px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.15); /* Stronger inner green glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cash-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 60%, rgba(16, 185, 129, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 90% 10%, rgba(16, 185, 129, 0.1) 0%, transparent 55%);
  pointer-events: none;
}

.cash-hero-card:hover {
  border-color: rgba(16, 185, 129, 0.42);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55), 0 0 70px rgba(16, 185, 129, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* Sweeping shimmer */
.cash-card-shimmer {
  position: absolute;
  top: 0;
  right: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.045) 50%, transparent 80%);
  animation: luxury-shimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes luxury-shimmer {
  0% {
    right: -120%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    right: 160%;
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    right: 160%;
    opacity: 0;
  }
}
/* Background decorative ring */
.cash-card-bg-ring {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1.5px solid rgba(16, 185, 129, 0.11);
  animation: ring-breathe 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.cash-card-bg-ring::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, 0.07);
}

@keyframes ring-breathe {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-50%) scale(1.1);
    opacity: 0.9;
  }
}
/* Cash card content wrapper */
.cash-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 100px; /* Protect text from left image */
}

/* Top row: label + live badge */
.cash-card-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Add styles for 3D Side Images - Contained version */
.hero-side-img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  max-height: 160px;
  z-index: 0;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.8)) brightness(1.15); /* Stronger aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 70%, transparent 100%);
}

.secondary-side-img {
  position: absolute;
  left: 2%;
  bottom: 5%;
  height: 90%;
  max-height: 85px;
  max-width: 85px;
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(223, 171, 41, 0.5)) brightness(1.15); /* Golden aura */
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, black 75%, transparent 100%);
}

html[dir=ltr] .secondary-side-img {
  left: auto !important;
  right: 2% !important;
}

html[dir=rtl] .secondary-side-img {
  right: auto !important;
  left: 2% !important;
}

.secondary-side-img.boost-img {
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)) brightness(1.15); /* Purple aura */
}

.cash-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(52, 211, 153, 0.8);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cash-live-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(52, 211, 153, 0.85);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 5px;
  padding: 1px 5px;
  animation: live-blink 2.2s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
/* The hero number */
.cash-amount {
  font-size: 2.25rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #ffffff;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-shadow: 0 0 40px rgba(16, 185, 129, 0.28), 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* EPS sub-row */
.cash-eps {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--money-green);
  margin-top: 0.05rem;
}

.eps-arrow {
  font-size: 0.72rem;
  display: inline-block;
  animation: eps-float 1.8s ease-in-out infinite;
  color: var(--green-light);
}

@keyframes eps-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}
/* ════════════════════════════════
   SECONDARY CARDS GRID
   ════════════════════════════════ */
.secondary-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0.65rem;
}

/* ── Single secondary card ── */
.secondary-card {
  padding: 0.9rem 1rem;
  border-color: rgba(255, 204, 77, 0.4); /* Brighter gold border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(223, 171, 41, 0.15), inset 0 0 24px rgba(223, 171, 41, 0.12); /* Inner gold glow */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Strictly align text to right in RTL */
  gap: 0.18rem;
  min-height: 90px; /* Taller card */
}

.secondary-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 65px; /* Protect text from left image in RTL */
  padding-right: 0;
  position: relative;
  z-index: 2;
}

html[dir=ltr] .secondary-card-content {
  padding-left: 0 !important;
  padding-right: 65px !important; /* Protect text from right image in LTR */
  align-items: flex-start !important;
  text-align: left !important;
}

html[dir=rtl] .secondary-card-content {
  padding-left: 65px !important;
  padding-right: 0 !important;
  align-items: flex-start !important;
  text-align: right !important;
}

/* Fix gold shares image white corners specifically */
.gold-shares-card .secondary-side-img {
  border-radius: 24px;
}

.secondary-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 50%, rgba(223, 171, 41, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(223, 171, 41, 0.15) 0%, transparent 65%);
  pointer-events: none;
}

@media (hover: hover) {
  .secondary-card:hover {
    border-color: rgba(223, 171, 41, 0.32);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(223, 171, 41, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
/* Gold top-edge accent line */
.secondary-card-accent {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(223, 171, 41, 0.9), transparent);
  border-radius: 0 0 2px 2px;
}

/* Multiplier Specific Styling (Purple/Blue) */
.multiplier-card {
  border-color: rgba(180, 140, 255, 0.45); /* Brighter purple border */
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 32px rgba(167, 139, 250, 0.15), inset 0 0 24px rgba(167, 139, 250, 0.12); /* Inner purple glow */
}

.multiplier-card::before {
  background: radial-gradient(circle at 10% 50%, rgba(167, 139, 250, 0.25) 0%, transparent 55%), radial-gradient(ellipse at 85% 5%, rgba(147, 51, 234, 0.18) 0%, transparent 65%);
}

.multiplier-card:hover {
  border-color: rgba(147, 51, 234, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 50px rgba(147, 51, 234, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.multiplier-card .secondary-card-accent {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.9), transparent);
}

/* Icon + label row */
.secondary-card-top {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.secondary-icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 5px rgba(223, 171, 41, 0.55));
  line-height: 1;
}

.secondary-label {
  font-size: clamp(0.68rem, 2.4vw, 0.85rem);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Main value in secondary card */
.secondary-value {
  font-size: 1.4rem; /* Smaller font to fit */
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  color: var(--primary-gold);
  text-shadow: 0 0 24px rgba(223, 171, 41, 0.32);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  display: block;
}

/* Multiplier card text override to match AI */
.multiplier-card .secondary-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.huge-multiplier {
  font-size: 1.5rem; /* Smaller multiplier to fit */
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  color: #eaddff; /* Even brighter purple */
  text-shadow: 0 0 22px rgba(167, 139, 250, 0.5);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.02em; /* Condense slightly */
}

.small-multiplier-label {
  font-size: 0.85rem;
  color: rgba(196, 181, 253, 0.8);
  font-weight: 500;
}

/* Prestige hint under shares value */
.prestige-hint-text {
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.65);
  line-height: 1.35;
  margin-top: 0.1rem;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   RESPONSIVE — PORTRAIT MOBILE
   ════════════════════════════════ */
@media (max-width: 950px), (max-height: 500px) {
  header {
    padding: 0.55rem 0.7rem !important;
    gap: 0.55rem !important;
    border-radius: 16px !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  .luxury-topbar {
    /* Let space-between handle it on single line, but force buttons left if wrapped */
  }
  .header-buttons-row {
    order: 1 !important;
    margin-inline-start: auto !important; /* Forces buttons to left side in RTL */
  }
  /* פורטרייט: שורה 1 cash רוחב מלא, שורה 2 secondary זה לצד זה */
  .luxury-dashboard {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 0.45rem !important;
  }
  .secondary-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0.45rem !important;
  }
  .cash-hero-card {
    min-height: 88px !important;
    padding: 0.75rem 1rem 0.6rem !important;
    justify-content: flex-start !important;
  }
  .cash-label {
    font-size: 0.78rem !important;
    opacity: 0.7;
  }
  .cash-amount {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
  }
  .cash-eps {
    font-size: 0.82rem !important;
    margin-top: 0.1rem !important;
  }
  .secondary-card {
    min-height: 72px !important;
    padding: 0.5rem 0.6rem !important;
    justify-content: flex-start !important;
    position: relative !important;
  }
  .secondary-side-img {
    max-height: 52px !important;
    max-width: 52px !important;
    bottom: 2px !important;
  }
  html[dir=ltr] .secondary-side-img {
    right: 2px !important;
    left: auto !important;
  }
  html[dir=rtl] .secondary-side-img {
    left: 2px !important;
    right: auto !important;
  }
  html[dir=ltr] .secondary-card-content {
    padding-right: 50px !important;
    padding-left: 0 !important;
  }
  html[dir=rtl] .secondary-card-content {
    padding-left: 50px !important;
    padding-right: 0 !important;
  }
  .secondary-label {
    font-size: 0.72rem !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
  .secondary-value {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
  .luxury-topbar {
    gap: 0.35rem;
  }
  .brand-title p {
    display: none !important;
  }
  .brand-icon {
    font-size: 1.3rem !important;
  }
  .header-buttons-row {
    gap: 0.3rem !important;
    width: auto !important;
    align-self: center !important;
    flex-shrink: 0 !important;
  }
  .brand-section {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-top: 0.1rem;
    justify-content: center !important;
  }
  .brand-title h1 {
    font-size: 1.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #prestige-preview-label {
    display: none !important;
  }
}
/* Narrow phone (<360px) — shrink further */
@media (max-width: 360px) {
  .cash-amount {
    font-size: 1.45rem !important;
  }
  .secondary-value {
    font-size: 1rem !important;
  }
  .multiplier-card .secondary-value,
  .multiplier-value-wrap {
    font-size: 0.88rem !important;
  }
}
/* Falling Leaf */
.falling-leaf {
  position: absolute;
  font-size: 1rem;
  pointer-events: none;
  z-index: 100;
  animation: leaf-fall-anim 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes leaf-fall-anim {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translate(-15px, 20px) rotate(45deg);
  }
  60% {
    transform: translate(10px, 45px) rotate(-90deg);
  }
  100% {
    transform: translate(-5px, 80px) rotate(180deg);
    opacity: 0;
  }
}
/* ATM Receipt */
.atm-receipt {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  padding: 1px 4px;
  border: 1px solid #d1d5db;
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 50;
  animation: receipt-print-anim 1.2s ease-out forwards;
}

@keyframes receipt-print-anim {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-50%) translateY(-5px);
  }
  30% {
    height: 12px;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
}
/* 3. Milestone Sparkle & Confetti */
.upgrade-card.sparkle-flash {
  animation: card-sparkle-anim 0.5s ease-out;
}

@keyframes card-sparkle-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(223, 171, 41, 0.6);
    border-color: var(--primary-gold);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(223, 171, 41, 0);
  }
}
.plaque-level.milestone-active {
  background: linear-gradient(135deg, #dfab29 0%, #ffffff 50%, #b8860b 100%) !important;
  color: #1a1505 !important;
  text-shadow: none !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  border-color: #ffffff !important;
}

/* Confetti particle */
.confetti-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 150;
  border-radius: 50%;
  animation: confetti-fall-anim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes confetti-fall-anim {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg);
    opacity: 0;
  }
}
/* 4. VIP Glow & Queue Alert */
/* VIP Teller Glow Effect */
.teller-counter.vip-serving-glow {
  border-color: rgba(192, 132, 252, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(192, 132, 252, 0.45) !important;
}

.teller-counter.rich-serving-glow {
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(251, 191, 36, 0.45) !important;
}

/* Queue Full Pulse Warning */
.queue-zone.status-alert {
  animation: queue-alert-pulse 1.5s infinite ease-in-out;
}

@keyframes queue-alert-pulse {
  0% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    border-color: var(--danger-red);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(239, 68, 68, 0.4);
  }
  100% {
    border-color: rgba(223, 171, 41, 0.35);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}
/* ── Sticky Persistent Mini Balance Bar (3D Depth Masterpiece HUD - No Truncation) ── */
.sticky-balance-bar {
  direction: ltr !important;
  position: fixed !important;
  top: max(8px + env(safe-area-inset-top, 0px), 34px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-130%) !important;
  width: calc(100% - 12px) !important;
  max-width: 480px !important;
  height: 48px !important;
  z-index: 8500 !important;
  background: linear-gradient(180deg, #0e1424 0%, #060913 100%) !important;
  border-radius: 14px !important;
  padding: 3px 4px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease !important;
  /* Multi-layer metallic outer border with top specular flare */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 2px rgba(10, 14, 26, 0.9), 0 12px 25px rgba(0, 0, 0, 0.95), inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.8) !important;
}
.sticky-balance-bar.visible {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.sticky-balance-bar {
  /* Top Central Lens Flare */
}
.sticky-balance-bar::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: 30% !important;
  width: 40% !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.9), #ffffff, rgba(147, 197, 253, 0.9), transparent) !important;
  filter: drop-shadow(0 0 6px #60a5fa) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar {
  /* Bottom Colored Ambient Underglows */
}
.sticky-balance-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.65) 5%, transparent 30%, rgba(56, 189, 248, 0.75) 50%, transparent 70%, rgba(245, 158, 11, 0.65) 95%) !important;
  filter: blur(5px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}
.sticky-balance-bar .sticky-balance-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 100% !important;
  gap: 3px !important;
}
.sticky-balance-bar {
  /* 3 Recessed Sections / Slots */
}
.sticky-balance-bar .hud-section {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 1 1 0 !important;
  height: 100% !important;
  padding: 2px 4px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  position: relative !important;
  background: rgba(4, 7, 16, 0.55) !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  min-width: 0 !important;
}
.sticky-balance-bar {
  /* Separator Dots with Vertical Lines */
}
.sticky-balance-bar .hud-separator {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sticky-balance-bar .hud-separator::before {
  content: "" !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  position: absolute !important;
}
.sticky-balance-bar .sep-cyan::before {
  background: #38bdf8 !important;
  box-shadow: 0 0 5px #38bdf8, 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.sticky-balance-bar .sep-gold::before {
  background: #fbbf24 !important;
  box-shadow: 0 0 5px #fbbf24, 0 0 8px rgba(251, 191, 36, 0.8) !important;
}
.sticky-balance-bar {
  /* 3D Elevated Squircles */
}
.sticky-balance-bar .hud-squircle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.sticky-balance-bar .hud-squircle.cash-sq {
  background: linear-gradient(180deg, #132e22 0%, #07160f 100%) !important;
  border: 1px solid #10b981 !important;
  border-top: 1.5px solid #6ee7b7 !important;
  border-bottom: 1.5px solid #047857 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(16, 185, 129, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.eps-sq {
  background: linear-gradient(180deg, #132342 0%, #071024 100%) !important;
  border: 1px solid #3b82f6 !important;
  border-top: 1.5px solid #93c5fd !important;
  border-bottom: 1.5px solid #1d4ed8 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(59, 130, 246, 0.4) !important;
}
.sticky-balance-bar .hud-squircle.shares-sq {
  background: linear-gradient(180deg, #332208 0%, #170e03 100%) !important;
  border: 1px solid #f59e0b !important;
  border-top: 1.5px solid #fde047 !important;
  border-bottom: 1.5px solid #b45309 !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.4) !important;
}
.sticky-balance-bar .hud-icon {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)) !important;
}
.sticky-balance-bar .hud-text-group {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
}
.sticky-balance-bar .hud-label {
  font-size: 0.5rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
}
.sticky-balance-bar .label-cash {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4) !important;
}
.sticky-balance-bar .label-eps {
  color: #60a5fa !important;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.4) !important;
}
.sticky-balance-bar .label-shares {
  color: #fbbf24 !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4) !important;
}
.sticky-balance-bar .hud-value {
  color: #ffffff !important;
  font-family: var(--font-heading) !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}
.sticky-balance-bar .hud-value .slash-s {
  color: #60a5fa !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  margin-left: 1px !important;
}

/* ========================================================
   UNIFIED SLEEK TOPBAR BADGES & LIVELY FLOATING ANIMATION
   ======================================================== */
@keyframes badgeFloatBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 6px rgba(16, 185, 129, 0.7);
  }
  50% {
    transform: translateY(-4px) scale(1.18);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 14px rgb(16, 185, 129);
  }
}
.boost-timer-badge {
  position: absolute !important;
  bottom: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 13px !important;
  line-height: 12px !important;
  font-size: 0.52rem !important;
  font-weight: 800 !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
  background: rgba(11, 15, 25, 0.95) !important;
  border: 1px solid rgba(251, 191, 36, 0.85) !important;
  color: #fbbf24 !important;
}

.header-daily-btn .daily-ready-badge,
.fortune-wheel-header-btn .fortune-wheel-badge,
.fortune-wheel-badge,
.daily-ready-badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  left: auto !important;
  bottom: auto !important;
  min-width: 15px !important;
  height: 15px !important;
  padding: 0 3px !important;
  border-radius: 999px !important;
  font-size: 0.54rem !important;
  font-weight: 900 !important;
  line-height: 13px !important;
  white-space: nowrap !important;
  text-align: center !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
  pointer-events: none !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #0f121e !important;
  animation: badgeFloatBounce 1.4s ease-in-out infinite !important;
  will-change: transform, box-shadow;
}

/* Fortune Wheel Ready: Vibrant Green Badge with Exclamation Mark & Lively Float */
.fortune-wheel-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(16, 185, 129, 0.85) !important;
}

/* Fortune Wheel Ad Ready: Emerald badge */
.fortune-wheel-header-btn.fortune-wheel-ad-ready .fortune-wheel-badge {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(16, 185, 129, 0.85) !important;
}

/* Daily Trophy Ready Badge: Vibrant Green Notification with Lively Float */
.daily-ready-badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(16, 185, 129, 0.85) !important;
}

/* Button Containers: Static size, NO scale() expansion to prevent neighbor collision */
.fortune-wheel-header-btn,
.header-daily-btn,
.boost-toggle-btn {
  position: relative !important;
  overflow: visible !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Fortune Wheel Ready: Subtle, elegant golden border and soft glow */
.fortune-wheel-header-btn.fortune-wheel-ready {
  border: 1.5px solid rgba(245, 158, 11, 0.75) !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(15, 18, 28, 0.95) 100%) !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35) !important;
}
.fortune-wheel-header-btn.fortune-wheel-ready .fortune-wheel-badge {
  display: flex !important;
}
.fortune-wheel-header-btn.fortune-wheel-ready .wheel-icon {
  display: inline-block !important;
}

/* Header Daily Trophy Ready */
.header-daily-btn.header-daily-ready,
.header-daily-btn.reward-ready-glow {
  border: 1.5px solid rgba(245, 158, 11, 0.75) !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(15, 18, 28, 0.95) 100%) !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.35) !important;
}
.header-daily-btn.header-daily-ready .daily-ready-badge,
.header-daily-btn.reward-ready-glow .daily-ready-badge {
  display: flex !important;
}

/* ==========================================
   FORTUNE WHEEL MODAL (PREMIUM DESIGN)
   ========================================== */
.fortune-wheel-box.luxury-fortune-wheel-modal {
  max-width: 375px !important;
  width: 92vw !important;
  background: url("../images/fortune_wheel_bg.jpg") center bottom/cover no-repeat, #050811 !important;
  border: 1.5px solid rgba(223, 171, 41, 0.55) !important;
  border-radius: 28px !important;
  padding: 0.9rem 0.9rem 0.8rem 0.9rem !important;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.98), 0 0 35px rgba(223, 171, 41, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  max-height: 92vh !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: auto !important;
}

/* Floating Gold Confetti / Dust */
.fortune-confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.fortune-confetti-layer .f-dust {
  position: absolute;
  filter: drop-shadow(0 0 6px #ffd700);
  animation: dustFloat 2.4s infinite alternate ease-in-out;
}
.fortune-confetti-layer .d-1 {
  top: 12px;
  left: 18%;
  font-size: 0.8rem;
}
.fortune-confetti-layer .d-2 {
  top: 18px;
  right: 14%;
  font-size: 0.95rem;
  animation-delay: 0.6s;
}
.fortune-confetti-layer .d-3 {
  top: 40%;
  left: 8%;
  font-size: 0.75rem;
  animation-delay: 1.2s;
}
.fortune-confetti-layer .d-4 {
  top: 50%;
  right: 10%;
  font-size: 0.7rem;
  animation-delay: 0.9s;
}
.fortune-confetti-layer .d-5 {
  bottom: 18%;
  left: 14%;
  font-size: 0.85rem;
  animation-delay: 1.5s;
}
.fortune-confetti-layer .d-6 {
  bottom: 22%;
  right: 16%;
  font-size: 0.9rem;
  animation-delay: 0.3s;
}

@keyframes dustFloat {
  0% {
    transform: translateY(0) scale(0.85);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-8px) scale(1.15);
    opacity: 1;
    filter: drop-shadow(0 0 8px #fff);
  }
}
/* Circular Close Button */
.fortune-wheel-close-x {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: 1.2px solid rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.fortune-wheel-close-x:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.4);
  border-color: #ef4444;
  color: #ffffff;
}

.modal-header-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 3;
}

/* Golden Crest with Laurels */
.fortune-crest-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.fortune-crest-badge .crest-laurel {
  font-size: 1.4rem;
  color: #ffd700;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.fortune-crest-badge .crest-laurel-left {
  transform: scaleX(-1);
}
.fortune-crest-badge .fortune-shield-box {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: radial-gradient(circle, #ffd700 0%, #b8860b 60%, #451a03 100%);
  border: 2px solid #fff3b0;
  box-shadow: 0 0 25px rgba(223, 171, 41, 0.6), inset 0 1px 2px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fortune-crest-badge .fortune-shield-box .fortune-hero-glyph {
  font-size: 1.6rem;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.fortune-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.fortune-title-group .modal-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.2px !important;
  margin: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.fortune-live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px 11px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.2px solid rgba(223, 171, 41, 0.6);
  font-size: 0.7rem;
  font-weight: 800;
  color: #fde047;
  box-shadow: 0 0 10px rgba(223, 171, 41, 0.25);
  backdrop-filter: blur(6px);
}
.fortune-live-status-pill .live-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fde047;
  box-shadow: 0 0 6px #fde047;
  animation: statusDotPulse 1.8s infinite;
}

/* ===================================================
   WHEEL STAGE & 3D CASINO CHASSIS
   =================================================== */
.fortune-wheel-stage {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.85rem 0 0.15rem 0;
  z-index: 2;
}

.wheel-outer-chassis {
  position: relative;
  width: 226px;
  height: 226px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700 0%, #b8860b 50%, #582607 100%);
  border: 3px solid #fff3b0;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.95), 0 0 30px rgba(223, 171, 41, 0.45), inset 0 2px 4px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 16 Glowing Bulbs */
.wheel-lights-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
}
.wheel-lights-ring .bulb {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #ffd700, 0 0 10px #f59e0b;
  top: 50%;
  left: 50%;
  margin: -3px;
}
.wheel-lights-ring .b-1 {
  transform: rotate(0deg) translate(107px) rotate(0deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.1s;
}
.wheel-lights-ring .b-2 {
  transform: rotate(22.5deg) translate(107px) rotate(-22.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.2s;
}
.wheel-lights-ring .b-3 {
  transform: rotate(45deg) translate(107px) rotate(-45deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.3s;
}
.wheel-lights-ring .b-4 {
  transform: rotate(67.5deg) translate(107px) rotate(-67.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.4s;
}
.wheel-lights-ring .b-5 {
  transform: rotate(90deg) translate(107px) rotate(-90deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.5s;
}
.wheel-lights-ring .b-6 {
  transform: rotate(112.5deg) translate(107px) rotate(-112.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.6s;
}
.wheel-lights-ring .b-7 {
  transform: rotate(135deg) translate(107px) rotate(-135deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.7s;
}
.wheel-lights-ring .b-8 {
  transform: rotate(157.5deg) translate(107px) rotate(-157.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.8s;
}
.wheel-lights-ring .b-9 {
  transform: rotate(180deg) translate(107px) rotate(-180deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 0.9s;
}
.wheel-lights-ring .b-10 {
  transform: rotate(202.5deg) translate(107px) rotate(-202.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1s;
}
.wheel-lights-ring .b-11 {
  transform: rotate(225deg) translate(107px) rotate(-225deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.1s;
}
.wheel-lights-ring .b-12 {
  transform: rotate(247.5deg) translate(107px) rotate(-247.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.2s;
}
.wheel-lights-ring .b-13 {
  transform: rotate(270deg) translate(107px) rotate(-270deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.3s;
}
.wheel-lights-ring .b-14 {
  transform: rotate(292.5deg) translate(107px) rotate(-292.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.4s;
}
.wheel-lights-ring .b-15 {
  transform: rotate(315deg) translate(107px) rotate(-315deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.5s;
}
.wheel-lights-ring .b-16 {
  transform: rotate(337.5deg) translate(107px) rotate(-337.5deg);
  animation: bulbBlink 1.6s infinite alternate ease-in-out;
  animation-delay: 1.6s;
}

.fortune-wheel-graphic {
  position: relative;
  width: 204px;
  height: 204px;
  border-radius: 50%;
  border: 2.5px solid #0f172a;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.1, 1);
  overflow: hidden;
}
.fortune-wheel-graphic.wheel-spin {
  animation: wheel-rotate 4s cubic-bezier(0.12, 0.86, 0.15, 1) forwards;
}

@keyframes wheel-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--stop-angle, 2160deg));
  }
}
.wheel-segments {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-seg {
  position: absolute;
  transform-origin: 50% 50%;
  z-index: 4;
}
.wheel-seg .wheel-seg-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.95));
}
.wheel-seg .wheel-seg-inner .seg-icon {
  font-size: 1.3rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}
.wheel-seg .wheel-seg-inner .seg-val {
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 3D Center Golden Hub with 'SPIN' Button */
.wheel-center-hub {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff5c0 0%, #eab308 45%, #63320b 100%);
  border: 2.5px solid #ffe885;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.95), inset 0 2px 3px rgba(255, 255, 255, 0.9), inset 0 -3px 5px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease;
}
.wheel-center-hub:active {
  transform: scale(0.92);
}
.wheel-center-hub .hub-spin-label {
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  color: #2b1405;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  letter-spacing: -0.3px;
}

/* 3D Golden Pointer Needle with Diamond */
.wheel-pointer-needle {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 44px;
  z-index: 20;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.95));
  animation: pointerHover 1.8s infinite ease-in-out;
}
.wheel-pointer-needle .pointer-svg {
  width: 100%;
  height: 100%;
}

/* Win Result Card (Matches Reference 1-to-1) */
.fortune-result-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid #ffd700;
  border-radius: 16px;
  padding: 0.55rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(223, 171, 41, 0.35);
  animation: resultPop 0.35s cubic-bezier(0.17, 0.89, 0.32, 1.4) forwards;
  z-index: 3;
  backdrop-filter: blur(8px);
}
.fortune-result-card .wheel-win-top-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.fortune-result-card .wheel-win-crown {
  font-size: 1.1rem;
}
.fortune-result-card .wheel-win-headline {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fde047;
}
.fortune-result-card .wheel-win-box {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.fortune-result-card .wheel-win-box .laurel {
  font-size: 1.25rem;
  color: #ffd700;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.fortune-result-card .wheel-win-box .laurel-left {
  transform: scaleX(-1);
}
.fortune-result-card .wheel-win-box .wheel-win-amount {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.6);
}

/* Controls */
.fortune-controls-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  z-index: 3;
}

/* Free Spin Golden Button */
.luxury-fortune-spin-btn {
  width: 100% !important;
  background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%) !important;
  border: 1.5px solid #fff3b0 !important;
  border-radius: 14px !important;
  color: #080c14 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  padding: 0.7rem 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(223, 171, 41, 0.45), inset 0 1px 2px #ffffff !important;
  transition: transform 0.15s ease !important;
}
.luxury-fortune-spin-btn:active {
  transform: scale(0.98);
}
.luxury-fortune-spin-btn.disabled-limit {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.8 !important;
}

/* Royal Purple Ad Spin Button (Matches Reference) */
.luxury-fortune-ad-btn {
  width: 100% !important;
  background: linear-gradient(180deg, #9333ea 0%, #6b21a8 100%) !important;
  border: 1.5px solid #d8b4fe !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  padding: 0.7rem 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 6px 22px rgba(147, 51, 234, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: transform 0.15s ease !important;
}
.luxury-fortune-ad-btn:active {
  transform: scale(0.98);
}

.fortune-cooldown-pill {
  padding: 3px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  color: #94a3b8;
  backdrop-filter: blur(6px);
}

.fortune-close-btn-styled {
  background: none !important;
  border: none !important;
  color: #64748b !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 0.15rem !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}
.fortune-close-btn-styled:hover, .fortune-close-btn-styled:active {
  color: #94a3b8 !important;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 8, 20, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 99990;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  display: none;
}

.onboarding-overlay.active {
  display: block;
  opacity: 1;
}

/* Highlighted spotlight target element */
.onboarding-spotlight-target {
  position: relative !important;
  z-index: 99995 !important;
  pointer-events: auto !important;
  box-shadow: 0 0 0 4px #fbbf24, 0 0 30px rgba(251, 191, 36, 0.8), inset 0 0 15px rgba(251, 191, 36, 0.4) !important;
  border-radius: 12px !important;
  animation: onboardingSpotlightPulse 1.5s ease-in-out infinite !important;
  transition: box-shadow 0.3s ease !important;
}

@keyframes onboardingSpotlightPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px #fbbf24, 0 0 25px rgba(251, 191, 36, 0.8), inset 0 0 15px rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px #f59e0b, 0 0 40px rgba(245, 158, 11, 0.95), inset 0 0 25px rgba(245, 158, 11, 0.6);
  }
}
/* Floating interactive card */
.onboarding-card {
  position: fixed;
  z-index: 99999;
  width: min(340px, 90vw);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.98));
  border: 2px solid #fbbf24;
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(251, 191, 36, 0.35);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.onboarding-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.onboarding-step-badge {
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid #fbbf24;
  color: #fbbf24;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 0.15rem 0.6rem;
  border-radius: 12px;
}

.onboarding-skip-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-skip-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
}

.onboarding-text {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.45;
  margin: 0.3rem 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.onboarding-pointer-arrow {
  position: fixed;
  z-index: 99999;
  font-size: 2.2rem;
  color: #fbbf24;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: onboardingArrowBounce 1.1s ease-in-out infinite;
}

@keyframes onboardingArrowBounce {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.15);
  }
}
.onboarding-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.65rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0b1120;
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
  border: 1px solid #fef08a;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  animation: onboardingBtnPulse 1.6s ease-in-out infinite alternate;
}

.onboarding-action-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.onboarding-action-btn:active {
  transform: translateY(0) scale(0.98);
}

@keyframes onboardingBtnPulse {
  from {
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
  }
  to {
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.8);
  }
}
/* ==========================================
   DISCOVERY TIP PANEL (PREMIUM FLOATING TOAST)
   ========================================== */
.discovery-tip-panel {
  display: none;
  position: fixed;
  bottom: calc(85px + env(safe-area-inset-bottom));
  left: 14px;
  right: 14px;
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(10, 14, 26, 0.98) 100%);
  border: 1.5px solid rgba(223, 171, 41, 0.5);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(223, 171, 41, 0.25);
  backdrop-filter: blur(12px);
  z-index: 7500;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  animation: discoveryTipSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.discovery-tip-panel.visible {
  display: flex !important;
}

.discovery-tip-inner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.discovery-tip-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.discovery-tip-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.discovery-tip-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1.2;
}

.discovery-tip-body {
  font-size: 0.75rem;
  color: #cbd5e1;
  line-height: 1.35;
}

.discovery-tip-btn {
  background: linear-gradient(180deg, #f5d070 0%, #dfaa28 100%);
  color: #0f172a;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(223, 171, 41, 0.35);
  transition: transform 0.1s, opacity 0.2s;
}
.discovery-tip-btn:active {
  transform: scale(0.95);
}

@keyframes discoveryTipSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ==========================================================
   UI/UX OVERHAUL (Juice, Visual Queue, Feature Cards, Splash)
   ========================================================== */
/* 1. Floating Text Animation (Juice) */
.floating-text {
  position: absolute;
  pointer-events: none;
  font-weight: 800;
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  animation: floatUpFade 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes floatUpFade {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  20% {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translateY(-30px) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-40px) scale(0.9);
    opacity: 0;
  }
}
/* Glowing Affordable Buttons */
.upgrade-btn.affordable, .plaque-collect-btn.affordable {
  animation: pulse-glow-btn 2s infinite alternate;
}

@keyframes pulse-glow-btn {
  0% {
    box-shadow: 0 0 5px rgba(223, 171, 41, 0.2);
  }
  100% {
    box-shadow: 0 0 15px rgba(223, 171, 41, 0.6), inset 0 0 5px rgba(223, 171, 41, 0.3);
  }
}
/* 2. Visual Queue */
.queue-zone {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 2px;
  height: 30px;
  padding: 0 10px;
}

.visual-client-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 1.2rem;
  line-height: 1;
  animation: slideInClient 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transform-origin: bottom center;
}

@keyframes slideInClient {
  0% {
    transform: translateX(20px) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
/* 3. Feature Cards (Managers & Departments) */
.feature-card {
  background: radial-gradient(circle at top left, rgba(28, 38, 57, 0.8) 0%, rgba(10, 14, 23, 0.95) 100%);
  border: 1px solid rgba(223, 171, 41, 0.15);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.feature-card:hover {
  border-color: rgba(223, 171, 41, 0.4);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(223, 171, 41, 0.1);
  transform: translateY(-2px);
}

.feature-card-icon {
  font-size: 2.5rem;
  min-width: 60px;
  text-align: center;
  filter: drop-shadow(0 0 10px rgba(223, 171, 41, 0.3));
}

.feature-card-content {
  flex: 1;
}

.feature-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f3f4f6;
  margin-bottom: 4px;
}

.feature-card-desc {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.4;
}

.feature-card-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

/* 4. Luxury Splash Screen */
.luxury-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("images/splash_bg.png") no-repeat center center;
  background-size: cover;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 5vh;
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
  font-family: "Times New Roman", Times, serif;
  overflow: hidden;
  will-change: opacity, transform, visibility;
}

.luxury-splash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top center, rgba(10, 20, 50, 0) 0%, rgba(2, 6, 23, 0.9) 100%);
  z-index: 1;
}

/* Animated Particles / Grid / Financial Background */
.splash-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Combine grid with an SVG line chart pattern for the financial look */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><path d="M0,150 L50,120 L100,140 L150,80 L200,90 L250,30 L300,50 L350,10 L400,20" fill="none" stroke="%23dfab29" stroke-width="1" opacity="0.3"/><circle cx="50" cy="120" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="100" cy="140" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="150" cy="80" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="200" cy="90" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="250" cy="30" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="300" cy="50" r="3" fill="%23dfab29" opacity="0.5"/><circle cx="350" cy="10" r="3" fill="%23dfab29" opacity="0.5"/></svg>'), linear-gradient(rgba(223, 171, 41, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(223, 171, 41, 0.05) 1px, transparent 1px);
  background-size: 400px 200px, 40px 40px, 40px 40px;
  z-index: 1;
  opacity: 0.15;
  animation: gridScroll 30s linear infinite;
}

.splash-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Soft golden floating orbs */
  background-image: radial-gradient(circle, rgba(255, 215, 0, 0.8) 1px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 3px);
  background-size: 150px 150px, 200px 200px;
  background-position: 0 0, 50px 50px;
  opacity: 0.4;
  animation: particlesDrift 15s linear infinite;
}

@keyframes gridScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30px);
  }
}
@keyframes particlesDrift {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 100px 100px;
  }
}
.splash-content {
  position: relative;
  /* Removed z-index to prevent stacking context isolation */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Halo behind logo */
.splash-halo {
  position: absolute;
  top: 15vh;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.4) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 1;
  animation: haloPulse 3s ease-in-out infinite alternate;
}

@keyframes haloPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.splash-logo-container {
  margin-bottom: 0vh; /* Brought closer to title */
  margin-top: 5vh;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  animation: floatLogo 4s ease-in-out infinite;
  position: relative;
  filter: drop-shadow(0 0 25px rgba(223, 171, 41, 0.4));
  mix-blend-mode: screen; /* Apply blending to the container because transform creates a stacking context! */
}

@keyframes floatLogo {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
.splash-logo-img {
  height: 100%;
  max-height: 480px; /* Increased size significantly */
  object-fit: contain;
  /* Blending moved to parent container */
}

.splash-door-light {
  position: absolute;
  bottom: -10px;
  width: 60px;
  height: 120px;
  background: radial-gradient(ellipse at bottom, rgba(255, 255, 200, 0.7) 0%, rgba(223, 171, 41, 0.2) 50%, transparent 80%);
  z-index: 3;
  animation: doorLightFlicker 3s infinite alternate;
}

@keyframes doorLightFlicker {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}
.splash-podium {
  position: absolute;
  bottom: -20px;
  width: 250px;
  height: 50px;
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.8) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.9), inset 0 2px 10px rgba(255, 215, 0, 0.2);
  border-top: 1px solid rgba(255, 215, 0, 0.1);
}

.splash-title-container {
  text-align: center;
  margin-bottom: 4vh;
  position: relative;
  z-index: 2;
}

.splash-welcome-text {
  color: #dfab29;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 6px;
  margin-bottom: 5px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  font-family: "Heebo", Arial, sans-serif;
  animation: textPulse 3s ease-in-out infinite alternate;
}

.splash-title-main {
  color: #fff;
  font-size: 3.8rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 4px;
  background: linear-gradient(to bottom, #fffdf2 0%, #ffdf80 40%, #cca329 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
  animation: textPulse 3s ease-in-out infinite alternate;
}

@keyframes textPulse {
  0% {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 20px rgba(223, 171, 41, 0.5));
  }
}
.splash-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.diamond-icon {
  color: #dfab29;
  font-size: 0.8rem;
}

.splash-subtitle-en {
  color: #ffd700;
  font-family: "Heebo", Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 3px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.splash-loading-area {
  width: 85%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6vh;
  position: relative;
  z-index: 2;
}

.splash-progress-wrapper {
  width: 100%;
  position: relative;
  height: 32px;
  margin-bottom: 15px;
  border-radius: 16px;
  overflow: hidden;
}

.splash-progress-track {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #8c6b16;
  border-radius: 16px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(223, 171, 41, 0.3);
}

.splash-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b8860b 0%, #ffdf80 50%, #cca329 100%);
  border-radius: 12px;
  position: relative;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 10px rgba(255, 223, 128, 0.8);
  overflow: hidden;
}

.splash-progress-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: barShine 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes barShine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
.splash-progress-glow {
  position: absolute;
  right: -10px;
  top: -50%;
  height: 200%;
  width: 20px;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.8) 0%, rgba(223, 171, 41, 0) 70%);
}

.splash-progress-text {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-family: "Heebo", Arial, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  z-index: 3;
}

.splash-status-text {
  color: #a0aec0;
  font-family: "Heebo", Arial, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}

.splash-loading-dots {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.splash-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dfab29;
  animation: splashDotPulse 1.4s infinite ease-in-out both;
}

.splash-loading-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.splash-loading-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes splashDotPulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Mobile Responsive Splash */
@media (max-width: 768px) {
  .splash-logo-container {
    height: 35vh; /* Reduced height to leave room for text */
    margin-top: 5vh;
    width: 100%;
    max-width: 90vw;
    mix-blend-mode: screen; /* Keep screen blend to hide black background of the logo */
  }
  .splash-logo-img {
    height: auto; /* Let it scale properly */
    max-height: 35vh;
    max-width: 100%;
    object-fit: contain;
  }
  .splash-halo {
    width: 220px;
    height: 220px;
    top: 20vh;
  }
  .splash-podium {
    width: 180px;
    height: 35px;
    bottom: -15px;
  }
  .splash-door-light {
    width: 40px;
    height: 80px;
    bottom: -5px;
  }
  .splash-title-main {
    font-size: 2.4rem;
    letter-spacing: 2px;
  }
  .splash-welcome-text {
    font-size: 0.9rem;
    letter-spacing: 4px;
  }
  .splash-subtitle-en {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
  }
  .splash-status-text {
    font-size: 0.65rem;
    letter-spacing: 1px;
  }
  .splash-loading-area {
    width: 90%;
    margin-bottom: 8vh;
  }
  /* background-position animations force a full repaint every frame (unlike
     transform/opacity, which are compositor-only) — disable on mobile where
     weaker GPUs/CPUs turned this into visible flicker during the splash. */
  .splash-particles {
    animation: none;
    background-position: 0 0, 50px 50px;
  }
}
/* ==========================================================
   PREMIUM ANIMATIONS (Mobile Optimized)
   ========================================================== */
/* 1. Button Click Ripple & Scale */
.buy-btn, .upgrade-btn, .plaque-collect-btn, .tab-btn {
  /* Shortened from 0.15s: a touch that turns into a scroll still fires :active
     briefly, and the longer this transition runs the more that reads as a
     visible jump instead of an imperceptible flicker. */
  transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s ease;
}

.buy-btn:active, .upgrade-btn:active, .plaque-collect-btn:active, .tab-btn:active {
  transform: scale(0.92);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* 2. Premium Card Hover (3D Effect) */
#tutorial-skip:hover {
  color: #d1d5db;
}

.tutorial-highlight-pulse {
  outline: 3px solid #3b82f6 !important;
  outline-offset: 4px !important;
  border-radius: 6px;
}

/* ==========================================================
   PREMIUM ANIMATIONS (Mobile Optimized)
   ========================================================== */
/* 1. Button Click Ripple & Scale */
.buy-btn, .upgrade-btn, .plaque-collect-btn, .tab-btn {
  /* Shortened from 0.15s: a touch that turns into a scroll still fires :active
     briefly, and the longer this transition runs the more that reads as a
     visible jump instead of an imperceptible flicker. */
  transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.08s ease;
}

.buy-btn:active, .upgrade-btn:active, .plaque-collect-btn:active, .tab-btn:active {
  transform: scale(0.92);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* 2. Premium Card Hover (3D Effect) */
.upgrade-card.feature-card, .manager-card, .department-card {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-color 0.3s ease;
}

.upgrade-card.feature-card:hover, .manager-card:hover, .department-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(223, 171, 41, 0.15);
  border-color: rgba(223, 171, 41, 0.5);
  z-index: 10;
}

/* 3. Vault Animation (Pulse & Open glow) */
.vault-graphic {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.vault-graphic.vault-full {
  animation: vaultPulse 1.5s infinite alternate;
}

@keyframes vaultPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px rgba(223, 171, 41, 0.3);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(223, 171, 41, 0.8);
  }
}
.vault-graphic:active {
  transform: scale(0.9);
}

/* 4. Premium Toast Achievement Sweep */
.custom-toast {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--primary-gold);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(223, 171, 41, 0.3);
  animation: toastPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.custom-toast::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  animation: shinySweep 2.5s infinite;
}

@keyframes toastPop {
  0% {
    transform: scale(0.5) translateY(20px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
@keyframes shinySweep {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
.weekly-stats-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  text-align: right;
  font-size: 0.88rem;
  line-height: 1.8;
}

.weekly-prestige-options {
  margin-top: 1rem;
}

/* ============================================================
   NEW PREMIUM MANAGERS DESIGN
   ============================================================ */
.mgr-new-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: right;
  font-family: var(--font-main);
}

.mgr-new-top {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0.8rem;
  gap: 0.8rem;
}

/* LEFT SIDE - CONTENT */
.mgr-new-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.mgr-new-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  position: relative;
  padding-bottom: 0.3rem;
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  text-align: center;
  white-space: normal;
  line-height: 1.1;
}

.mgr-new-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, rgba(212, 175, 55, 0) 100%);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.mgr-new-stars {
  display: flex;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.mgr-new-stars .star {
  font-size: 0.9rem;
}

.mgr-new-stars .star.gold {
  color: #dfab29;
  filter: drop-shadow(0 0 4px rgba(223, 171, 41, 0.6));
}

.mgr-new-stars .star.gray {
  color: rgba(255, 255, 255, 0.15);
}

.mgr-new-level {
  align-self: center;
  border: 1px solid #dfab29;
  border-radius: 6px;
  padding: 0.15rem 1rem;
  color: #dfab29;
  font-size: 0.9rem;
  font-weight: 800;
  background: rgba(20, 24, 36, 0.8);
  margin-bottom: 0.8rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* STAT PILLS */
.mgr-new-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mgr-new-stat-pill {
  background: linear-gradient(90deg, rgba(30, 36, 50, 0.9) 0%, rgba(20, 24, 36, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.3rem 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s;
  min-width: 0;
}

.mgr-new-stat-pill:hover {
  border-color: rgba(223, 171, 41, 0.3);
  background: linear-gradient(90deg, rgba(35, 42, 60, 0.95) 0%, rgba(20, 24, 36, 0.8) 100%);
}

.mgr-new-stat-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 171, 41, 0.15) 0%, rgba(0, 0, 0, 0.3) 100%);
  border: 1px solid rgba(223, 171, 41, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dfab29;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.mgr-new-stat-icon svg {
  width: 12px;
  height: 12px;
}

.mgr-new-stat-label {
  flex-grow: 1;
  color: #cbd5e1;
  font-size: 0.88rem;
  font-weight: 500;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 0.3rem;
  white-space: normal;
  line-height: 1.1;
  word-break: break-word;
}

.mgr-new-stat-val {
  color: #dfab29;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: "Outfit", sans-serif;
  padding-left: 0.2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

/* PORTRAIT */
.mgr-new-portrait {
  position: relative;
  width: 100px;
  height: 140px;
  border-radius: 12px;
  border: 2px solid #dfab29;
  box-shadow: 0 0 15px rgba(223, 171, 41, 0.35);
  overflow: hidden;
  flex-shrink: 0;
  background: #0f121a;
  transform: translateZ(0); /* Prevent border-radius bleed on hover */
}

.mgr-new-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; /* Give the head some breathing room at the top */
  display: block;
  filter: contrast(1.1) brightness(0.95);
  transition: filter 0.3s, transform 0.3s ease;
}

.mgr-new-layout:not(.locked):hover .mgr-new-portrait img {
  filter: contrast(1.15) brightness(1.05);
}

.mgr-new-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 0 30px rgba(223, 171, 41, 0.5);
  pointer-events: none;
  z-index: 2;
}

.mgr-new-crown {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.85);
  border: 1px solid #dfab29;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  z-index: 3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* BOTTOM SECTION */
.mgr-new-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ACTION CONTAINER & BUTTONS */
.mgr-new-action-container {
  display: flex;
  align-items: center;
}

.mgr-new-btn {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border-radius: 8px;
  padding: 0.4rem 1rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.2;
}

.mgr-new-btn:hover:not(.disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.mgr-new-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mgr-btn-cost {
  font-family: "Outfit", sans-serif;
  color: #dfab29;
  font-weight: 900;
  font-size: 0.95rem;
}

.mgr-new-active-badge {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 8px;
  padding: 0.4rem 1.2rem;
  color: #4ade80;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.15);
}

.mgr-new-active-badge svg {
  width: 16px;
  height: 16px;
}

/* PROFIT INFO */
.mgr-new-profit-info {
  text-align: left;
  position: relative;
  padding-left: 1rem;
}

.mgr-new-profit-lbl {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-bottom: 0.1rem;
}

.mgr-new-profit-val {
  font-size: 1.1rem;
  font-weight: 900;
  color: #cbd5e1;
  font-family: "Outfit", sans-serif;
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.profit-val-highlight {
  color: #dfab29;
  font-size: 1.3rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.profit-val-suffix {
  font-size: 0.88rem;
  color: #94a3b8;
  font-family: var(--font-main);
}

.profit-bg-icon {
  position: absolute;
  left: -10px;
  bottom: -5px;
  width: 45px;
  height: 45px;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 0;
}

/* LOCKED STATE OVERRIDES */
.mgr-new-layout.locked {
  filter: grayscale(0.5);
  opacity: 0.85;
}

.mgr-new-layout.locked .mgr-new-portrait {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.mgr-new-layout.locked .mgr-new-title::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: none;
}

.mgr-new-layout.locked .mgr-new-level {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

.mgr-new-layout.locked .mgr-new-crown.gray {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
  filter: grayscale(1);
}

.mgr-new-locked-msg {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.mgr-new-locked-msg span {
  color: #dfab29;
  font-weight: 700;
}

/* UPGRADES TAB NEW LAYOUT */
.upg-new-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0f121a;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.8rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  text-align: right;
  gap: 1rem;
  flex-wrap: nowrap;
}

.upg-new-layout.locked {
  filter: brightness(0.6) grayscale(0.8);
}

.upg-new-btn-wrapper {
  flex-shrink: 0;
  width: clamp(90px, 20vw, 110px);
  flex-grow: 0;
  max-width: 130px;
  min-width: 90px;
}

.upg-new-btn {
  width: 100%;
  height: 110px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c49a37 0%, #e2c057 50%, #b28325 100%);
  border: 2px solid #ffeba5;
  box-shadow: 0 0 20px rgba(226, 192, 87, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.upg-new-btn:hover:not(.disabled) {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.upg-new-btn.disabled {
  background: linear-gradient(135deg, #444 0%, #666 50%, #333 100%);
  border-color: #777;
  box-shadow: none;
  color: #ccc;
  cursor: not-allowed;
}

.upg-btn-icon {
  width: 32px;
  height: 32px;
  background: #1a1a1a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2c057;
  margin-bottom: 0.35rem;
  color: #e2c057;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.upg-new-btn.upg-v2-level-up {
  color: #4ade80; /* Green color for the level up text like in mockup */
  font-size: 1.1rem;
}

.upg-v2-desc {
  color: #94a3b8;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}

.upg-v2-divider {
  height: 1px;
  background: #1e293b;
  margin: 0.6rem 0;
  width: 100%;
}

.upg-new-btn.disabled .upg-btn-icon {
  border-color: #888;
  color: #888;
}

.upg-btn-icon svg {
  width: 15px;
  height: 15px;
}

.upg-btn-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.1rem;
}

.upg-btn-cost {
  font-size: 1.05rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
}

.upg-btn-glow {
  position: absolute;
  bottom: 18px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5);
}

.upg-new-btn.disabled .upg-btn-glow {
  display: none;
}

.upg-new-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 150px;
}

.upg-new-header {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.upg-title-name {
  color: #ffffff;
}

.upg-title-level {
  color: #e2c057;
}

.upg-title-levels {
  color: #059669; /* Darker, richer green that blends better with the game */
  font-weight: 900;
  font-size: 1.2rem;
}

.upg-plus-hl {
  color: #059669; /* Darker, richer green */
  font-weight: 900;
}

.buy-btn .upg-plus-hl {
  color: #065f46; /* Deep forest green for better contrast on gold buttons */
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
}

.upg-new-desc {
  color: #94a3b8;
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
  max-width: 90%;
  line-height: 1.3;
}

.upg-new-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.upg-new-stat-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.upg-new-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upg-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #161b22;
  border: 1px solid rgba(226, 192, 87, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2c057;
  flex-shrink: 0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.upg-stat-icon svg {
  width: 14px;
  height: 14px;
}

.upg-stat-info {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.upg-stat-val {
  font-size: 0.85rem;
  font-family: "Outfit", sans-serif;
  white-space: nowrap;
}

.upg-stat-val .val-old {
  color: #e2c057;
}

.upg-stat-val .val-new {
  color: #a3ffb1;
  font-weight: 800;
}

.upg-new-portrait {
  flex-shrink: 0;
  width: clamp(72px, 14vw, 90px);
  height: clamp(72px, 14vw, 90px);
  border-radius: 50%;
  border: 3px solid #e2c057;
  box-shadow: 0 0 20px rgba(226, 192, 87, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
  background: #111;
}

.upg-new-portrait.locked-portrait {
  border-color: #555;
  box-shadow: none;
}

.upg-portrait-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}

/* ==============================================================
   Premium Upgrades Redesign (V3 - Neon Banker Glassmorphism)
============================================================== */
.upgrade-card.premium-upg-card {
  position: relative;
  border-radius: 24px;
  background: #030814;
  border: 2px solid rgba(74, 144, 226, 0.85); /* Brighter border */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(74, 144, 226, 0.6), inset 0 0 40px rgba(74, 144, 226, 0.35), inset 0 1px 4px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  margin-bottom: 1.2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 220px;
  display: flex;
  align-items: stretch !important;
  flex-shrink: 0;
}

/* Pseudo element for the double glowing border effect */
.upgrade-card.premium-upg-card::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px solid rgba(138, 190, 255, 0.4); /* Bright inner glow line */
  border-radius: 20px;
  pointer-events: none;
  z-index: 3;
}

.upgrade-card.premium-upg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgb(0, 0, 0), 0 0 30px rgba(74, 144, 226, 0.5), inset 0 0 40px rgba(74, 144, 226, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.4);
  border-color: rgba(74, 144, 226, 0.8);
}

.upgrade-card.premium-upg-card.locked-card {
  opacity: 0.7;
  filter: saturate(0.6);
}

/* Avatar Large — Elegant Inset Rounded Showcase Frame for All Cards */
.upg-v2-avatar-large {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 10px;
  width: 100px;
  height: calc(100% - 20px);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  border-radius: 14px;
  overflow: hidden;
  opacity: 1;
  border: 1.5px solid rgba(74, 144, 226, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 12px rgba(74, 144, 226, 0.25);
  background-color: rgba(6, 14, 30, 0.9);
  pointer-events: none;
}

html[dir=ltr] .upg-v2-avatar-large {
  right: auto;
  left: 0;
  border-radius: 24px 0 0 24px;
  box-shadow: 20px 0 35px rgba(0, 0, 0, 0.95);
  filter: contrast(1.15) saturate(1.1);
}

/* Content Overlay */
.upg-v2-content-overlay {
  position: relative;
  z-index: 2;
  padding: 0.75rem;
  padding-inline-start: 29%; /* Push text area to left of avatar (avatar is 28%) */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  /* Gradient stops at 72% so the right 28% (avatar) is 100% fully visible and clear! */
  background: linear-gradient(90deg, rgb(3, 8, 20) 40%, rgba(3, 8, 20, 0.95) 60%, rgba(3, 8, 20, 0) 72%);
}

html[dir=ltr] .upg-v2-content-overlay {
  text-align: left;
  background: linear-gradient(-90deg, rgb(3, 8, 20) 40%, rgba(3, 8, 20, 0.95) 60%, rgba(3, 8, 20, 0) 72%);
}

/* Header Row */
.upg-v2-header-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.upg-v2-main-title {
  font-size: 1.8rem; /* Medium-large font */
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 3px 6px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.5px;
}

.bank-icon-title {
  color: #dfab29;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  width: 28px;
  height: 28px;
}

.upg-v2-badge {
  background: rgba(10, 30, 20, 0.9);
  border: 2px solid #4ade80;
  color: #4ade80;
  padding: 0.2rem 0.75rem;
  border-radius: 20px;
  font-weight: 900;
  font-size: clamp(0.72rem, 2.5vw, 0.9rem);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.3), inset 0 0 10px rgba(74, 222, 128, 0.2);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upg-v2-desc-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.6rem;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Stats Glass Box - Neon Style */
.upg-v2-stats-glass-box {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(15, 25, 45, 0.8), rgba(5, 12, 25, 0.9));
  border: 1px solid rgba(74, 144, 226, 0.5);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 0.8rem;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.95), 0 5px 20px rgba(0, 0, 0, 0.5);
  width: 100%;
  box-sizing: border-box;
}

.upg-v2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
  flex: 1;
  padding: 0.6rem 0.4rem;
}

.upg-v2-stat:not(:last-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}

html[dir=ltr] .upg-v2-stat:not(:last-child) {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.upg-v2-stat-icon {
  color: #dfab29;
  margin-bottom: 0.3rem;
  filter: drop-shadow(0 0 8px rgba(223, 171, 41, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.upg-v2-stat-icon svg {
  width: 26px;
  height: 26px;
}

.upg-v2-stat-label {
  font-size: 1.05rem;
  color: #f8fafc;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.3px;
}

/* Stacked Values */
.upg-v2-stat-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 0.2rem;
}

.val-current {
  color: #ffffff;
  text-shadow: 0 2px 5px rgb(0, 0, 0);
}

.val-arrow {
  margin: -4px 0;
  font-size: 1.2rem;
  text-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
  /* Removed rotation to match concept */
}

.val-next {
  color: #4ade80;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  padding: 0.1rem 0.6rem;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(74, 222, 128, 0.05);
}

/* Neon Buy Button - Monolithic block */
.upg-v2-buy-btn {
  display: flex;
  align-items: stretch;
  background: linear-gradient(160deg, #ffe066 0%, #d4af37 40%, #b8860b 80%, #8c6600 100%);
  border: 2px solid #ffeb99;
  border-radius: 14px;
  padding: 0.4rem;
  margin: 0;
  margin-top: auto;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
  font-family: inherit;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.8), inset 0 2px 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(223, 171, 41, 0.4);
  overflow: hidden;
}

.upg-v2-buy-btn:hover:not(.disabled) {
  transform: translateY(-3px);
  filter: brightness(1.15);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.9), inset 0 2px 10px rgba(255, 255, 255, 0.9), 0 0 35px rgba(223, 171, 41, 0.6);
}

.upg-v2-buy-btn:active:not(.disabled) {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), inset 0 2px 5px rgba(255, 255, 255, 0.6);
}

.upg-v2-btn-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.6rem;
  flex-shrink: 0;
}

.premium-cash-icon {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

.upg-v2-btn-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.4rem;
  text-align: center;
}

.upg-v2-btn-lbl {
  font-size: 1.4rem;
  font-weight: 900;
  color: #1a1200;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  letter-spacing: 0.5px;
}

.upg-v2-btn-amount {
  font-size: 1rem;
  color: #0b4a1c;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.upg-v2-btn-cost {
  font-size: 1.4rem;
  font-weight: 900;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.upg-v2-btn-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.8rem;
  /* Removed border and background */
}

.dark-circle-arrow {
  background: linear-gradient(135deg, #1e2532 0%, #0b0f16 100%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dfab29;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 2px 5px rgba(255, 255, 255, 0.4);
  border: 2px solid #5a450b;
}

.dark-circle-arrow svg {
  width: 20px;
  height: 20px;
}

/* Disabled State */
.upg-v2-buy-btn.disabled {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #334155;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.upg-v2-buy-btn.disabled .upg-v2-btn-lbl,
.upg-v2-buy-btn.disabled .upg-v2-btn-cost {
  color: #64748b;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.upg-v2-buy-btn.disabled .premium-cash-icon {
  filter: grayscale(1) opacity(0.5);
}

.upg-v2-buy-btn.disabled .dark-circle-arrow {
  background: #080b12;
  color: #475569;
  border-color: #1e293b;
}

/* ==============================================================
   Gold Upgrade Card Overrides for V3
============================================================== */
.upgrade-card.premium-upg-card.gold-upgrade-card {
  border: 2px solid #dfab29 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), inset 0 0 50px rgba(223, 171, 41, 0.15), 0 0 15px rgba(223, 171, 41, 0.4) !important;
  padding: 0 !important;
  background: #0a0e17 !important;
}

.upgrade-card.premium-upg-card .recommended-badge {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important; /* Move to left to not cover avatar on right */
  right: auto !important;
  margin: 0 !important;
  border-radius: 0 0 20px 0 !important;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.8) !important;
  z-index: 10 !important;
  font-size: 1.1rem !important;
  padding: 0.5rem 1.5rem !important;
  background: linear-gradient(135deg, #dfab29, #fceb9c, #d4af37) !important;
  color: #3b2b00 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  border-bottom: 2px solid #fff !important;
  border-left: 2px solid #fff !important;
  border-right: none !important;
  letter-spacing: 0.5px;
  font-weight: 900 !important;
}

html[dir=ltr] .upgrade-card.premium-upg-card .recommended-badge {
  left: auto !important;
  right: 0 !important;
  border-radius: 0 0 0 20px !important;
  border-right: none !important;
  border-left: 2px solid #fff !important;
  box-shadow: -3px 3px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Upgrades Tab Grid */
.upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

/* Responsive - Keep the premium asymmetric look but shrink it! */
@media (max-width: 900px) {
  .upgrades-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .upgrade-card.premium-upg-card {
    min-height: 100px;
    border-radius: 10px;
    margin-bottom: 0.5rem;
  }
  /* Mobile Avatar Large — Inset Rounded Frame */
  .upg-v2-avatar-large {
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    right: 8px !important;
    left: auto !important;
    width: 86px !important;
    height: calc(100% - 16px) !important;
    opacity: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(74, 144, 226, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(74, 144, 226, 0.25) !important;
    background-color: rgba(6, 14, 30, 0.9) !important;
    background-size: cover !important;
    background-position: center center !important;
    pointer-events: none;
  }
  html[dir=ltr] .upg-v2-avatar-large {
    right: auto !important;
    left: 8px !important;
  }
  /* Content Overlay leaves room for the 75px avatar */
  .upg-v2-content-overlay {
    padding: 0.4rem;
    padding-inline-start: 98px !important;
    background: linear-gradient(90deg, rgb(3, 8, 20) 40%, rgba(3, 8, 20, 0.8) 75%, rgba(3, 8, 20, 0) 100%);
    align-items: flex-start;
    text-align: right;
  }
  html[dir=ltr] .upg-v2-content-overlay {
    background: linear-gradient(-90deg, rgb(3, 8, 20) 40%, rgba(3, 8, 20, 0.8) 75%, rgba(3, 8, 20, 0) 100%);
    align-items: flex-start;
    text-align: left;
  }
  /* Font sizes compact */
  .upg-v2-main-title {
    font-size: 0.95rem;
    justify-content: flex-start;
    text-align: right;
    gap: 0.2rem;
  }
  html[dir=ltr] .upg-v2-main-title {
    text-align: left;
  }
  .bank-icon-title {
    width: 14px;
    height: 14px;
  }
  .upg-v2-header-row {
    justify-content: flex-start;
    margin-bottom: 0.2rem;
  }
  .upg-v2-badge {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    border-width: 1px;
  }
  /* Description text - clean full wrap */
  .upg-v2-desc-text {
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
    text-align: right;
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    width: 100%;
    color: rgba(255, 255, 255, 0.85);
  }
  html[dir=ltr] .upg-v2-desc-text {
    text-align: left;
  }
  /* Stats box tighter - Horizontal stats values! */
  .upg-v2-stats-glass-box {
    margin-bottom: 0.3rem;
    padding: 0.2rem;
    border-radius: 6px;
    flex-wrap: nowrap;
  }
  .upg-v2-stat {
    padding: 0.1rem;
    gap: 0.1rem;
  }
  .upg-v2-stat-icon svg {
    width: 14px;
    height: 14px;
  }
  .upg-v2-stat-label {
    font-size: 0.65rem;
    color: #cbd5e1;
    margin-bottom: 0;
  }
  .upg-v2-stat-val {
    font-size: 0.8rem;
    flex-direction: row; /* Horizontal! */
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
    margin-top: 0;
    line-height: 1.2;
  }
  /* Force "current" onto its own line so arrow+next always wrap together
     underneath — otherwise a 3-part value (current/arrow/next) wraps
     unpredictably per-column and the row heights go crooked. */
  .val-current {
    flex: 0 0 100%;
  }
  .val-arrow {
    font-size: 0.7rem;
    margin: 0;
  }
  .val-next {
    padding: 0 0.25rem;
    border-radius: 4px;
    font-size: 0.7rem;
  }
  /* Button */
  .upg-v2-buy-btn {
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
    border-width: 1px;
    min-height: 44px !important;
    height: auto !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .upg-v2-btn-left {
    padding: 0 0.2rem;
    flex-shrink: 0;
    justify-content: flex-start !important;
  }
  .upg-v2-btn-right {
    padding: 0 0.2rem;
    flex-shrink: 0;
  }
  .upg-v2-btn-center {
    padding: 0.1rem;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .upg-v2-btn-lbl {
    font-size: 0.75rem;
    gap: 0.15rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .upg-v2-btn-cost {
    font-size: 0.8rem;
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    text-align: center;
  }
  .upg-v2-btn-sub {
    display: none !important;
  }
  .upg-v2-btn-amount {
    font-size: 0.65rem;
    padding: 0.1rem 0.2rem;
  }
  .premium-cash-icon {
    width: 20px;
    height: 20px;
  }
  .dark-circle-arrow {
    width: 16px;
    height: 16px;
    border-width: 1px;
  }
  .dark-circle-arrow svg {
    width: 10px;
    height: 10px;
  }
  /* Shrink the recommended badge on mobile */
  .upgrade-card.premium-upg-card .recommended-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
    border-width: 1px !important;
  }
}
/* Guard Cards — Contain Full Character */
.upgrade-card:has(.upg-v2-badge:contains('בלדר')) .upg-v2-avatar-large,
.upgrade-card[data-type=guard] .upg-v2-avatar-large {
  background-size: contain !important;
  background-position: center center !important;
}

/* ==========================================
   PRESTIGE NEAR-MISS GLOW
   ========================================== */
@keyframes prestige-near-miss-pulse {
  0% {
    box-shadow: 0 0 6px rgba(223, 171, 41, 0.3);
  }
  50% {
    box-shadow: 0 0 18px rgba(223, 171, 41, 0.75), 0 0 30px rgba(223, 171, 41, 0.3);
  }
  100% {
    box-shadow: 0 0 6px rgba(223, 171, 41, 0.3);
  }
}
.prestige-near-miss-glow {
  animation: prestige-near-miss-pulse 2s ease-in-out infinite;
}

/* WCAG 1.3.1 — Progress bars visual aids */
[role=progressbar] {
  position: relative;
}

/* ===================================================
   ACCESSIBILITY: Reduced Motion Support
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep functional transitions but remove decorative ones */
  .vault-fill-bar-fill,
  .queue-progress-fill,
  .plaque-progress-fill {
    transition: width 0.15s linear !important;
  }
  .tab-pane {
    transition: none !important;
  }
  /* Disable specific decorative animations */
  .notification-dot,
  .smart-recommendation-glow,
  .idle-zzz,
  .brand-icon,
  .client-slot-3d,
  .guard-runner-avatar,
  .guard-runner-load,
  .cash-card-shimmer {
    animation: none !important;
  }
  /* Remove button shine animation */
  .buy-btn:not(.disabled)::after {
    animation: none !important;
    display: none;
  }
  /* Remove glass shine effects */
  .glass-showcase::after,
  .vault-zone::after {
    animation: none !important;
  }
  /* Simplify hover transforms */
  .upgrade-card:hover,
  .vault-graphic:hover,
  .buy-btn:hover,
  .collect-vault-btn:hover {
    transform: none !important;
  }
}
/* ===================================================
   GDPR CONSENT BANNER
   =================================================== */
.gdpr-banner {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom));
  left: 12px;
  right: 12px;
  background: rgba(10, 14, 26, 0.98);
  border: 1px solid rgba(223, 171, 41, 0.35);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  z-index: 8000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.gdpr-text {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin: 0;
  width: 100%;
  line-height: 1.4;
  text-align: center;
  box-sizing: border-box;
}

.gdpr-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.gdpr-privacy-link {
  font-size: 0.75rem;
  color: #dfab29;
  text-decoration: underline;
  white-space: nowrap;
}

.gdpr-accept-btn {
  background: linear-gradient(180deg, #f5d070 0%, #dfaa28 100%);
  color: #0f172a;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.1s;
}
.gdpr-accept-btn:active {
  transform: scale(0.96);
}

/* ===================================================
   MOBILE TABS REFINEMENTS
   =================================================== */
@media (max-width: 500px) {
  /* Missions handled gracefully in _missions-achievements.scss */
  /* Daily */
  .daily-challenge-card {
    padding: 12px !important;
  }
  .daily-card-title {
    font-size: 1.1rem !important;
  }
  .daily-reward-pill {
    font-size: 0.85rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  .daily-claim-btn {
    padding: 6px 14px !important;
    font-size: 0.9rem !important;
  }
}
/* WCAG 1.3.1 — Progress bars visual aids */
[role=progressbar] {
  position: relative;
}

/* ===================================================
   ACCESSIBILITY: Reduced Motion Support
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep functional transitions but remove decorative ones */
  .vault-fill-bar-fill,
  .queue-progress-fill,
  .plaque-progress-fill {
    transition: width 0.15s linear !important;
  }
  .tab-pane {
    transition: none !important;
  }
  /* Disable specific decorative animations */
  .notification-dot,
  .smart-recommendation-glow,
  .idle-zzz,
  .brand-icon,
  .client-slot-3d,
  .guard-runner-avatar,
  .guard-runner-load,
  .cash-card-shimmer {
    animation: none !important;
  }
  /* Remove button shine animation */
  .buy-btn:not(.disabled)::after {
    animation: none !important;
    display: none;
  }
  /* Remove glass shine effects */
  .glass-showcase::after,
  .vault-zone::after {
    animation: none !important;
  }
  /* Simplify hover transforms */
  .upgrade-card:hover,
  .vault-graphic:hover,
  .buy-btn:hover,
  .collect-vault-btn:hover {
    transform: none !important;
  }
}
/* Settings privacy link */
.settings-privacy-row {
  text-align: center;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.settings-privacy-link {
  font-size: 0.8rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s;
}

.settings-privacy-link:hover {
  color: #dfab29;
}

/* ===================================================
   MOBILE TABS REFINEMENTS
   =================================================== */
@media (max-width: 500px) {
  /* Achievements */
  #tab-achievements .mission-card {
    padding: 1rem 0.8rem !important;
    gap: 0.8rem !important;
  }
  #tab-achievements .achievement-icon-box {
    width: 80px !important;
    height: 80px !important;
  }
  #tab-achievements .achievement-img {
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
  }
  #tab-achievements .mission-card .mission-title {
    font-size: 1.1rem !important;
  }
  #tab-achievements .mission-card .mission-desc {
    font-size: 0.85rem !important;
  }
  #tab-achievements .claim-achievement-btn {
    min-width: 110px !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.85rem !important;
    height: 38px !important;
  }
  #tab-achievements .mission-circle-progress {
    transform: scale(0.75) !important;
    transform-origin: left center !important;
  }
  /* Missions handled gracefully in _missions-achievements.scss */
  /* Daily */
  .daily-challenge-card {
    padding: 12px !important;
  }
  .daily-card-title {
    font-size: 1.1rem !important;
  }
  .daily-reward-pill {
    font-size: 0.85rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  .daily-claim-btn {
    padding: 6px 14px !important;
    font-size: 0.9rem !important;
  }
  /* Branches */
  .branch-card {
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
  }
  .branch-header-row .branch-name {
    font-size: 1.25rem !important;
  }
  .branch-flag {
    width: 32px !important;
    height: 32px !important;
  }
  .branch-stat-val {
    font-size: 1rem !important;
  }
}
/* ===================================================
   ULTRA-SMALL MOBILE MODE (Older Phones)
   =================================================== */
@media (max-width: 380px) {
  /* Missions handled gracefully in _missions-achievements.scss */
  /* Daily */
  .daily-challenge-card {
    padding: 10px !important;
  }
  .daily-card-title {
    font-size: 1rem !important;
  }
  .daily-reward-pill {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  .daily-claim-btn {
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
  }
  /* Branches */
  .branch-card {
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
  .branch-header-row .branch-name {
    font-size: 1.1rem !important;
  }
  .branch-flag {
    width: 28px !important;
    height: 28px !important;
  }
  .branch-stat-val {
    font-size: 0.9rem !important;
  }
  /* Upgrades (Courier / בלדר) */
  .upgrade-card.premium-upg-card {
    padding: 10px !important;
    gap: 10px !important;
  }
  .upg-v2-avatar-wrap {
    width: 70px !important;
    height: 70px !important;
  }
  .upg-v2-title {
    font-size: 1.15rem !important;
  }
  .upg-v2-desc {
    font-size: 0.8rem !important;
  }
  .upg-stat-group {
    gap: 6px !important;
  }
  .upg-stat-icon {
    font-size: 0.9rem !important;
  }
  .upg-stat-val, .upg-stat-label {
    font-size: 0.85rem !important;
  }
  .upg-v2-buy-btn {
    padding: 8px !important;
    font-size: 0.85rem !important;
  }
  /* Gold Upgrades */
  .gold-upgrade-card {
    padding: 10px !important;
  }
  .gold-upg-title {
    font-size: 1.1rem !important;
  }
  .gold-upg-desc {
    font-size: 0.8rem !important;
  }
}
/* ===================================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   =================================================== */
@media (max-width: 768px) {
  .upgrade-card, .manager-card, .dept-card, .mission-card, .branch-card, .buy-btn, .tab-btn, .floating-text, .header-panel, .prestige-btn {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
  }
  .manager-card.active, .dept-card.unlocked, .mission-card.completed {
    box-shadow: 0 2px 8px rgba(223, 171, 41, 0.4) !important;
  }
}
/* ===================================================
   MOBILE LANDSCAPE OVERRIDE
   =================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  html, body {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  #toast-container {
    max-width: 75vw !important; /* Leave room for nav */
    margin-right: auto !important;
    margin-left: 10px !important;
  }
  .custom-toast {
    white-space: normal !important;
    word-break: break-word !important;
  }
  .bank-canvas-container {
    height: 65vh !important;
    min-height: 220px !important;
  }
  .layout-wrapper {
    height: auto !important;
    overflow-y: visible !important;
  }
}
.wheel-separator-line {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.wheel-separator-line::before, .wheel-separator-line::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(223, 171, 41, 0.5), transparent);
}

.wheel-separator-line .diamond {
  color: #eab308;
  font-size: 0.8rem;
  margin: 0 10px;
  text-shadow: 0 0 5px rgba(234, 179, 8, 0.8);
}

.wheel-benefits-title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0 0.5rem;
  color: #fcd34d;
  font-size: 0.95rem;
  font-weight: 600;
}

.wheel-benefits-title::before, .wheel-benefits-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(223, 171, 41, 0.3), transparent);
  margin: 0 10px;
}

.wheel-benefits-title .diamond {
  color: #eab308;
  font-size: 0.7rem;
  margin: 0 4px;
}

/* Global Modal scrolling fix */
.modal-box {
  max-height: 92vh !important;
  overflow-y: auto !important;
}

.modal-box::-webkit-scrollbar {
  width: 6px;
}

.modal-box::-webkit-scrollbar-thumb {
  background: rgba(223, 171, 41, 0.5);
  border-radius: 4px;
}

@media (max-width: 480px) {
  .fortune-wheel-box {
    padding: 1.5rem 1rem !important;
    width: 95% !important;
  }
  .fortune-prize-list {
    grid-template-columns: 1fr !important;
  }
  .fortune-wheel-container {
    transform: scale(0.85);
    transform-origin: center center;
    margin: 0.5rem auto -20px auto !important;
  }
}
@media (max-height: 700px) {
  .fortune-wheel-container {
    transform: scale(0.7);
    transform-origin: center center;
    margin: 0 auto -60px auto !important;
  }
  .fortune-prize-list {
    max-height: 200px !important;
  }
}
/* Vault particles */
.vault-particle {
  position: absolute;
  width: 25px;
  height: 15px;
  background: #10b981;
  border-radius: 2px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  z-index: 45; /* behind doors, above modal but wait, modal is opacity 0 */
  opacity: 0;
}

#offline-modal.active .vault-particle {
  animation: fly-out 1.2s ease-out 1.2s forwards;
}

.vp-1 {
  top: 50%;
  left: 50%;
  transform: rotate(15deg);
}

.vp-2 {
  top: 50%;
  left: 50%;
  transform: rotate(-25deg);
}

.vp-3 {
  top: 50%;
  left: 50%;
  transform: rotate(45deg);
}

.vp-4 {
  top: 50%;
  left: 50%;
  transform: rotate(-65deg);
}

.vp-5 {
  top: 50%;
  left: 50%;
  transform: rotate(10deg);
}

@keyframes fly-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx, 150px), var(--ty, -150px)) scale(1.5) rotate(var(--rot, 360deg));
  }
}
/* Premium Offline Modal styling */
.offline-modal-premium {
  background: linear-gradient(135deg, #090d16 0%, #151c2e 100%) !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(251, 191, 36, 0.05) !important;
  border-radius: 24px !important;
  padding: 32px 24px 24px 24px !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: "Heebo", var(--font-body), sans-serif !important;
  max-width: 420px;
  margin: 0 auto;
}

.offline-modal-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: radial-gradient(circle at top center, rgba(251, 191, 36, 0.25), transparent 70%);
  pointer-events: none;
}

.offline-premium-icon-img {
  width: 140px;
  height: 140px;
  margin-top: -20px;
  margin-bottom: 10px;
  mix-blend-mode: screen;
  position: relative;
  z-index: 2;
  animation: premium-float 3s ease-in-out infinite;
  filter: drop-shadow(0 5px 15px rgba(255, 215, 0, 0.4));
}

@keyframes premium-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.offline-premium-title {
  color: #f3f4f6 !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
  font-family: "Heebo", Arial, sans-serif !important;
  letter-spacing: -0.5px;
}

.offline-premium-subtitle {
  color: #cbd5e1 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 25px !important;
  line-height: 1.4 !important;
  padding: 0 20px;
  font-family: "Heebo", Arial, sans-serif !important;
}

.offline-premium-divider {
  color: #fbbf24 !important;
  font-size: 20px !important;
  margin-bottom: 25px !important;
  opacity: 0.9 !important;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offline-premium-divider::before, .offline-premium-divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.6), transparent);
  margin: 0 15px;
}

.offline-premium-amount-box {
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid #4ade80 !important;
  border-radius: 12px !important;
  padding: 15px 10px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.15), inset 0 0 10px rgba(74, 222, 128, 0.1) !important;
}

.offline-premium-amount {
  color: #86efac !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  text-shadow: 0 0 15px rgba(74, 222, 128, 0.5) !important;
  letter-spacing: 0px;
  font-family: "Heebo", Arial, sans-serif !important;
}

.offline-premium-btn-ad {
  background: linear-gradient(90deg, #4c1d95, #701a75) !important;
  border: 1px solid #fbbf24 !important;
  box-shadow: 0 0 25px rgba(112, 26, 117, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  padding: 15px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  font-family: "Heebo", Arial, sans-serif !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.offline-premium-btn-ad:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 0 35px rgba(112, 26, 117, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.2) !important;
}

.offline-premium-btn-claim {
  background: #1f2937 !important;
  border: 1px solid #374151 !important;
  color: #cbd5e1 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 14px !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  font-family: "Heebo", Arial, sans-serif !important;
}

.offline-premium-btn-claim:hover {
  background: #374151 !important;
  color: #fff !important;
}

/* Mobile scaling for premium offline modal */
@media (max-width: 480px) {
  .offline-modal-premium {
    padding: 25px 15px 15px 15px !important;
    border-radius: 16px !important;
    width: 90% !important;
    max-width: 350px !important;
  }
  .offline-modal-premium::before {
    height: 100px !important;
  }
  .offline-premium-icon-img {
    width: 100px !important;
    height: 100px !important;
    margin-top: -10px !important;
    margin-bottom: 5px !important;
  }
  .offline-premium-title {
    font-size: 26px !important;
    margin-bottom: 5px !important;
  }
  .offline-premium-subtitle {
    font-size: 14px !important;
    padding: 0 5px !important;
    margin-bottom: 15px !important;
  }
  .offline-premium-divider {
    font-size: 18px !important;
    margin-bottom: 15px !important;
  }
  .offline-premium-amount-box {
    padding: 12px 10px !important;
    margin-bottom: 15px !important;
  }
  .offline-premium-amount {
    font-size: 30px !important;
  }
  .offline-premium-btn-ad {
    font-size: 17px !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .offline-premium-btn-claim {
    font-size: 16px !important;
    padding: 12px !important;
  }
}
@media (max-height: 700px) {
  .offline-modal-premium {
    padding: 15px !important;
  }
  .offline-premium-icon-img {
    width: 80px !important;
    height: 80px !important;
  }
  .offline-premium-title {
    font-size: 22px !important;
  }
  .offline-premium-amount {
    font-size: 26px !important;
  }
}
/* Fix for Android navigation bar overlap on modals */
.modal-box {
  padding-bottom: calc(2rem + env(safe-area-inset-bottom, 48px)) !important;
}

.header-glow {
  animation: header-pulse-glow 1.5s infinite alternate !important;
}

@keyframes header-pulse-glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 215, 0, 0.6) inset;
    border-color: rgb(255, 215, 0);
  }
}
/* Premium Event Options & Boost Modal Redesign */
.event-options-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
  width: 100%;
}

.event-option-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  color: #f3f4f6;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
}

.event-option-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.event-option-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}

.event-option-btn:hover::before {
  opacity: 1;
}

.event-option-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.event-option-desc {
  font-size: 0.95rem;
  color: #a0aec0;
  line-height: 1.4;
  font-weight: 500;
}

/* Premium Ad Option */
.event-option-btn.ad-option {
  background: linear-gradient(135deg, rgba(223, 171, 41, 0.15) 0%, rgba(184, 134, 11, 0.05) 100%);
  border: 1px solid rgba(223, 171, 41, 0.4);
  box-shadow: 0 4px 20px rgba(223, 171, 41, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.event-option-btn.ad-option:hover {
  border-color: var(--primary-gold);
  box-shadow: 0 8px 30px rgba(223, 171, 41, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.event-option-btn.ad-option .event-option-title {
  color: var(--primary-gold);
}

.event-option-btn.ad-option .event-option-desc {
  color: #dfab29;
  opacity: 0.85;
}

/* Event Title & Cash styling */
.modal-title#event-title {
  font-size: 1.5rem;
  line-height: 1.3;
  background: linear-gradient(to bottom, #ffffff, #e2e8f0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  padding: 0 10px;
}

.event-cash-display-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(46, 204, 113, 0.3);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2ecc71;
  margin: 1rem auto;
  width: fit-content;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.event-cash-display-box .event-cash-val {
  font-size: 1.6rem;
  text-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
  font-weight: 900;
}

.modal-icon#event-icon {
  font-size: 4rem;
  filter: drop-shadow(0 0 20px rgba(223, 171, 41, 0.5));
  animation: floatEventIcon 3s ease-in-out infinite;
  margin-bottom: 0.5rem;
}

@keyframes floatEventIcon {
  0% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 20px rgba(223, 171, 41, 0.5));
  }
  50% {
    transform: translateY(-10px) scale(1.05);
    filter: drop-shadow(0 0 30px rgba(223, 171, 41, 0.8));
  }
  100% {
    transform: translateY(0px) scale(1);
    filter: drop-shadow(0 0 20px rgba(223, 171, 41, 0.5));
  }
}
@media (max-width: 768px) {
  .modal-box.event-modal-box {
    padding: 0.8rem 0.6rem !important;
    gap: 0;
  }
  .modal-title#event-title {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
  }
  .event-cash-display-box {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    margin: 0.25rem auto;
  }
  .event-cash-display-box .event-cash-val {
    font-size: 1.1rem;
  }
  .event-options-list {
    margin-top: 0.5rem;
    gap: 0.5rem;
  }
  .event-option-btn {
    padding: 0.6rem 0.8rem;
  }
  .event-option-title {
    font-size: 0.95rem;
  }
  .event-option-desc {
    font-size: 0.75rem;
  }
  .modal-icon#event-icon {
    font-size: 2.2rem;
    margin-bottom: 0.25rem;
  }
}
/* ===================================================
   LUXURY SETTINGS MODAL (AI MOCKUP PARITY)
   =================================================== */
.language-modal-box {
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 88vh !important;
  max-height: 88dvh !important;
  background: radial-gradient(circle at top, rgba(20, 28, 50, 0.99) 0%, rgba(7, 11, 20, 0.99) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.55) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 55px rgba(223, 171, 41, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
  border-radius: 28px !important;
  padding: 1.6rem 1.3rem 1.8rem 1.3rem !important;
  max-width: 460px !important;
  width: calc(100% - 1.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Subtle top glow spotlight behind globe icon */
.language-modal-box::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 290px;
  height: 190px;
  background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.22) 0%, rgba(234, 179, 8, 0.1) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Glowing Top Globe Icon */
.language-modal-box .modal-icon {
  position: relative !important;
  z-index: 1 !important;
  font-size: 3rem !important;
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 2px solid rgba(234, 179, 8, 0.75) !important;
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.6), inset 0 0 16px rgba(234, 179, 8, 0.4) !important;
  margin: 0 auto 0.1rem auto !important;
}

/* Luxury Section Titles with Decorative Diamonds */
.luxury-modal-title, .luxury-section-title {
  position: relative !important;
  z-index: 1 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  margin: 0 !important;
}

.modal-title-decor {
  color: #eab308 !important;
  font-size: 0.9rem !important;
  text-shadow: 0 0 10px rgba(234, 179, 8, 0.7) !important;
}

/* 2x2 Language Grid */
.lang-options-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.85rem !important;
  margin: 0.2rem 0 !important;
  width: 100% !important;
}

.lang-option-card {
  position: relative !important;
  background: linear-gradient(145deg, rgba(20, 32, 58, 0.85) 0%, rgba(10, 16, 32, 0.96) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  padding: 0.9rem 0.6rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.lang-option-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(234, 179, 8, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 18px rgba(234, 179, 8, 0.25) !important;
}

/* Active Language Card (Gold Glow + Badge) */
.lang-option-card.active {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(145deg, rgba(38, 50, 85, 0.95) 0%, rgba(18, 26, 52, 0.98) 100%) !important;
  box-shadow: 0 0 26px rgba(245, 158, 11, 0.5), inset 0 0 16px rgba(245, 158, 11, 0.22) !important;
}

.lang-flag {
  font-size: 1.85rem !important;
  line-height: 1 !important;
  margin-bottom: 0.15rem !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)) !important;
}

.lang-country-code {
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
}

.lang-option-card.active .lang-country-code {
  color: #facc15 !important;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.7) !important;
}

.lang-name {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: rgba(226, 232, 240, 0.88) !important;
}

/* Checkmark Badge on Active Card */
.lang-check-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 22px !important;
  height: 22px !important;
  background: #eab308 !important;
  color: #0f172a !important;
  border-radius: 50% !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.85) !important;
}

[dir=rtl] .lang-check-badge {
  right: auto !important;
  left: 8px !important;
}

.lang-option-card.active .lang-check-badge {
  display: flex !important;
}

/* Theme Selection Row */
.settings-theme-section {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  width: 100% !important;
}

.theme-options-row {
  display: flex !important;
  gap: 0.6rem !important;
  justify-content: center !important;
  width: 100% !important;
}

.theme-option-btn-choice {
  flex: 1 !important;
  padding: 0.7rem 0.5rem !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(15, 23, 42, 0.8) !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  transition: all 0.25s ease !important;
}

.theme-option-btn-choice.active[data-theme=blue] {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.6) !important;
  color: #ffffff !important;
}

.theme-option-btn-choice.active[data-theme=white] {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
}

.theme-option-btn-choice.active[data-theme=dark] {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 2px solid #94a3b8 !important;
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.4) !important;
}

.theme-check-badge {
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  margin-left: 2px !important;
}

/* Danger Zone Card */
.luxury-danger-card {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(220, 38, 38, 0.06) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 18px !important;
  padding: 0.9rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.settings-danger-title {
  color: #ef4444 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
  border-bottom: 1px dashed rgba(239, 68, 68, 0.25) !important;
  padding-bottom: 0.4rem !important;
}

.luxury-danger-btn {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.85) 0%, rgba(185, 28, 28, 0.95) 100%) !important;
  border: 1.5px solid #ef4444 !important;
  color: #fef2f2 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

.luxury-danger-btn:disabled {
  opacity: 0.45 !important;
  filter: grayscale(0.6) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Analytics Shortcut Card */
.analytics-shortcut-btn {
  position: relative !important;
  z-index: 1 !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.4) !important;
  border-radius: 16px !important;
  color: #facc15 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  cursor: pointer !important;
}

.analytics-shortcut-btn:hover {
  border-color: rgba(234, 179, 8, 0.8) !important;
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Close Settings Button */
.luxury-close-btn {
  position: relative !important;
  z-index: 1 !important;
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  padding: 0.85rem 1.2rem !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.luxury-close-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.6) !important;
}

/* ===================================================
   MOBILE PHONE OPTIMIZATIONS FOR SETTINGS MODAL
   =================================================== */
@media (max-width: 550px), (max-height: 750px) {
  .language-modal-box {
    padding: 1.1rem 0.85rem 1.6rem 0.85rem !important;
    gap: 0.65rem !important;
    border-radius: 20px !important;
    max-height: 85vh !important;
    max-height: 85dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .language-modal-box .modal-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 2.2rem !important;
    margin-bottom: 0 !important;
  }
  .luxury-modal-title, .luxury-section-title {
    font-size: 1.05rem !important;
  }
  #lang-modal-text {
    font-size: 0.78rem !important;
    margin: 0 !important;
    line-height: 1.25 !important;
  }
  .lang-options-grid {
    gap: 0.5rem !important;
    margin: 0.1rem 0 !important;
  }
  .lang-option-card {
    padding: 0.6rem 0.35rem !important;
    border-radius: 14px !important;
    gap: 0.15rem !important;
  }
  .lang-flag {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
  }
  .lang-country-code {
    font-size: 1.15rem !important;
  }
  .lang-name {
    font-size: 0.72rem !important;
  }
  .lang-check-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.65rem !important;
    top: 5px !important;
    right: 5px !important;
  }
  [dir=rtl] .lang-check-badge {
    right: auto !important;
    left: 5px !important;
  }
  .theme-option-btn-choice {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }
  .luxury-danger-card {
    padding: 0.65rem !important;
    gap: 0.5rem !important;
    border-radius: 14px !important;
  }
  .settings-danger-title {
    font-size: 0.85rem !important;
  }
  .luxury-danger-btn {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.82rem !important;
    border-radius: 10px !important;
  }
  .analytics-shortcut-btn {
    padding: 0.6rem 0.8rem !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }
  .settings-privacy-row {
    font-size: 0.75rem !important;
  }
  .luxury-close-btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
  }
}
/* ===================================================
   LUXURY DAILY LOGIN REWARD MODAL (AI MOCKUP PARITY)
   =================================================== */
.luxury-daily-modal-box {
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background: radial-gradient(circle at top, rgba(22, 30, 52, 0.99) 0%, rgba(7, 11, 20, 0.99) 100%) !important;
  border: 1.5px solid rgba(223, 171, 41, 0.6) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 55px rgba(223, 171, 41, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  border-radius: 28px !important;
  padding: 1.8rem 1.4rem !important;
  max-width: 480px !important;
  width: calc(100% - 1.5rem) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Close X button */
.daily-modal-close-x {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
}

[dir=rtl] .daily-modal-close-x {
  right: auto !important;
  left: 14px !important;
}

.daily-modal-close-x:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

/* Top Gift Box Hero Header & Confetti */
.daily-reward-hero-header {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.2rem !important;
}

.daily-gift-box-icon {
  font-size: 4rem !important;
  filter: drop-shadow(0 8px 24px rgba(234, 179, 8, 0.55)) drop-shadow(0 0 40px rgba(250, 204, 21, 0.4)) !important;
  animation: giftBoxFloat 3s ease-in-out infinite !important;
}

@keyframes giftBoxFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.05);
  }
}
.daily-confetti-particle {
  position: absolute !important;
  font-size: 1.3rem !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  animation: confettiFloat 2.5s ease-in-out infinite alternate !important;
}

.dcp-1 {
  top: -5px;
  left: -30px;
  animation-delay: 0s;
}

.dcp-2 {
  top: 10px;
  right: -35px;
  animation-delay: 0.7s;
}

.dcp-3 {
  bottom: 0px;
  left: -25px;
  animation-delay: 1.3s;
}

@keyframes confettiFloat {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-12px) rotate(15deg);
    opacity: 0.95;
  }
}
/* Streak Text with Clock Icon */
.luxury-streak-text {
  color: rgba(226, 232, 240, 0.8) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.streak-clock-icon {
  color: #facc15 !important;
  font-size: 0.9rem !important;
}

/* Hero Reward Card (Green Glow + Sublabel) */
.luxury-reward-hero-card {
  background: linear-gradient(145deg, rgba(14, 23, 42, 0.9) 0%, rgba(8, 14, 28, 0.95) 100%) !important;
  border: 1.5px solid rgba(74, 222, 128, 0.35) !important;
  border-radius: 22px !important;
  padding: 1.2rem 1.6rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.3rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(74, 222, 128, 0.08) !important;
}

.luxury-green-amount {
  color: #4ade80 !important;
  font-size: 2.3rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 25px rgba(74, 222, 128, 0.7), 0 0 50px rgba(74, 222, 128, 0.3) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}

.luxury-reward-sublabel {
  color: rgba(226, 232, 240, 0.85) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-top: 0.2rem !important;
}

/* 7-Day Rewards Strip (.login-streak-strip) */
.login-streak-strip {
  display: flex !important;
  gap: 0.5rem !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0.4rem 0.2rem !important;
  margin: 0.3rem 0 !important;
  scrollbar-width: none !important;
}

.login-streak-strip::-webkit-scrollbar {
  display: none !important;
}

.login-streak-day {
  flex: 1 !important;
  min-width: 58px !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  padding: 0.65rem 0.3rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  transition: all 0.25s ease !important;
}

/* Today's Card (Golden Highlight) */
.login-streak-day.is-today {
  border: 2px solid #facc15 !important;
  background: linear-gradient(145deg, rgba(38, 48, 78, 0.95) 0%, rgba(18, 26, 48, 0.98) 100%) !important;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.5), inset 0 0 12px rgba(250, 204, 21, 0.2) !important;
  transform: scale(1.04) !important;
}

.login-streak-day.is-today .login-streak-day-label {
  color: #facc15 !important;
  font-weight: 900 !important;
}

/* Tomorrow's Card (Teal Highlight) */
.login-streak-day.is-tomorrow {
  border: 1.5px solid #2dd4bf !important;
  background: linear-gradient(145deg, rgba(15, 45, 50, 0.9) 0%, rgba(8, 25, 32, 0.95) 100%) !important;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.35) !important;
}

.login-streak-day.is-tomorrow .login-streak-day-label {
  color: #2dd4bf !important;
  font-weight: 800 !important;
}

.login-streak-day-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: rgba(226, 232, 240, 0.8) !important;
}

.login-streak-day-icon {
  font-size: 1.45rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

.login-streak-day-value {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Collect Button (Gold Gradient + Crown Badge) */
.luxury-daily-collect-btn {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
  padding: 0.85rem 1.6rem !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  margin-top: 0.3rem !important;
}

.luxury-daily-collect-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 32px rgba(245, 158, 11, 0.65) !important;
}

.collect-btn-badge {
  background: rgba(15, 23, 42, 0.25) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
}

/* Mobile Phone Optimizations for Daily Bonus Modal */
@media (max-width: 550px), (max-height: 750px) {
  .luxury-daily-modal-box {
    padding: 1.2rem 0.9rem !important;
    gap: 0.65rem !important;
    border-radius: 22px !important;
  }
  .daily-gift-box-icon {
    font-size: 3.2rem !important;
  }
  .luxury-green-amount {
    font-size: 1.85rem !important;
  }
  .luxury-reward-hero-card {
    padding: 0.9rem 1rem !important;
  }
  .login-streak-day {
    min-width: 50px !important;
    padding: 0.5rem 0.2rem !important;
  }
  .login-streak-day-icon {
    font-size: 1.25rem !important;
  }
  .login-streak-day-value {
    font-size: 0.68rem !important;
  }
  .luxury-daily-collect-btn {
    padding: 0.75rem 1.2rem !important;
    font-size: 1.15rem !important;
    border-radius: 16px !important;
  }
}
/* ===================================================
   LUXURY WEEKLY REWARD MODAL (HERO DESIGN & PARTICLES)
   =================================================== */
.weekly-modal-box {
  border-color: rgba(234, 179, 8, 0.65) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 55px rgba(234, 179, 8, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.weekly-trophy-icon {
  font-size: 4.2rem !important;
  filter: drop-shadow(0 8px 24px rgba(234, 179, 8, 0.6)) drop-shadow(0 0 35px rgba(250, 204, 21, 0.45)) !important;
  animation: trophyFloat 3.2s ease-in-out infinite !important;
}

@keyframes trophyFloat {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) scale(1.06) rotate(3deg);
  }
}
.weekly-reward-hero-card {
  border: 1.5px solid rgba(250, 204, 21, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(250, 204, 21, 0.08) !important;
  padding: 1.1rem 1.4rem !important;
}

.weekly-stats-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 0.95rem !important;
  line-height: 2 !important;
  color: rgba(226, 232, 240, 0.9) !important;
  width: 100% !important;
}

.weekly-stats-box strong {
  color: #fde047 !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.4) !important;
}

.weekly-prestige-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  width: 100% !important;
  margin-top: 0.4rem !important;
}

.weekly-luxury-ad-btn {
  background: linear-gradient(135deg, #facc15 0%, #d97706 100%) !important;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.weekly-luxury-ad-btn:hover {
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.7) !important;
}

.weekly-close-btn {
  width: 100% !important;
  padding: 0.65rem 1rem !important;
  border-radius: 14px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.weekly-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================
   VIP WEEKLY REWARD MODAL (10X LUXURY DESIGN MOCKUP PARITY)
   ========================================================== */
.weekly-vip-modal-box {
  position: relative !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  background: radial-gradient(circle at 50% 10%, #0e173a 0%, #060a1a 65%, #02040a 100%) !important;
  border: 2px solid rgba(234, 179, 8, 0.6) !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.98), 0 0 50px rgba(234, 179, 8, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
  border-radius: 26px !important;
  padding: 1.1rem 1.1rem 0.85rem !important;
  max-width: 380px !important;
  width: calc(100% - 1.5rem) !important;
  max-height: min(92vh, 620px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 0.45rem !important;
  box-sizing: border-box !important;
}

.weekly-vip-close-x {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #f1f5f9 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 20 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.2s ease !important;
}

[dir=rtl] .weekly-vip-close-x {
  right: auto !important;
  left: 10px !important;
}

.weekly-vip-close-x:hover {
  background: rgba(239, 68, 68, 0.85) !important;
  border-color: #ef4444 !important;
  transform: scale(1.08) !important;
}

/* Floating Confetti Particles */
.weekly-confetti-wrap {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

.w-confetti {
  position: absolute !important;
  animation: wConfettiFloat 3s ease-in-out infinite alternate !important;
}

.wc-1 {
  top: 10px;
  left: 14%;
  font-size: 1.2rem;
  animation-delay: 0s;
}

.wc-2 {
  top: 18px;
  right: 18%;
  font-size: 1.1rem;
  animation-delay: 0.8s;
}

.wc-3 {
  top: 75px;
  left: 8%;
  font-size: 0.95rem;
  animation-delay: 1.5s;
}

.wc-4 {
  top: 100px;
  right: 10%;
  font-size: 1.1rem;
  animation-delay: 2.1s;
}

.wc-5 {
  top: 150px;
  left: 16%;
  font-size: 1rem;
  animation-delay: 1.1s;
}

@keyframes wConfettiFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-10px) rotate(20deg) scale(1.15);
    opacity: 1;
  }
}
/* 3D Trophy Hero Image with Seamless Radial Mask */
.weekly-trophy-showcase {
  position: relative !important;
  width: 130px !important;
  height: 125px !important;
  margin-top: -0.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.weekly-trophy-aura {
  position: absolute !important;
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.5) 0%, rgba(234, 179, 8, 0.18) 55%, transparent 80%) !important;
  filter: blur(16px) !important;
  animation: trophyAuraPulse 3s ease-in-out infinite alternate !important;
}

@keyframes trophyAuraPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.weekly-trophy-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  mask-image: radial-gradient(circle at 50% 50%, black 55%, rgba(0, 0, 0, 0.85) 68%, transparent 82%) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 55%, rgba(0, 0, 0, 0.85) 68%, transparent 82%) !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(250, 204, 21, 0.6)) !important;
  animation: trophyFloatAnim 3.5s ease-in-out infinite !important;
}

@keyframes trophyFloatAnim {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.02);
  }
}
/* Title and Golden Laurels */
.weekly-title-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  z-index: 2 !important;
  margin-top: -0.25rem !important;
}

.weekly-gold-laurel {
  width: 26px !important;
  height: 26px !important;
  filter: drop-shadow(0 2px 6px rgba(250, 204, 21, 0.8)) !important;
}

.weekly-hero-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 0 22px rgba(250, 204, 21, 0.7), 0 3px 6px rgba(0, 0, 0, 0.95) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

.weekly-stars {
  color: #facc15 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.3rem !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.9) !important;
  margin-top: -0.35rem !important;
  z-index: 2 !important;
}

.weekly-hero-subtitle {
  font-size: 0.78rem !important;
  color: rgba(226, 232, 240, 0.92) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  z-index: 2 !important;
}

/* Stats Card (3 Distinct Rows with Circle Badges) */
.weekly-stats-hero-card {
  width: 100% !important;
  box-sizing: border-box !important;
  background: linear-gradient(150deg, rgba(16, 26, 56, 0.88) 0%, rgba(9, 15, 36, 0.95) 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.35) !important;
  border-radius: 18px !important;
  padding: 0.65rem 0.95rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(234, 179, 8, 0.06) !important;
  z-index: 2 !important;
}

.weekly-stat-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.weekly-stat-left {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

.weekly-stat-icon-wrap {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6) !important;
  flex-shrink: 0 !important;
}

.icon-eps {
  background: radial-gradient(circle, rgba(234, 179, 8, 0.35) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(234, 179, 8, 0.85) !important;
}

.icon-clients {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.85) !important;
}

.icon-shares {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.85) !important;
}

.weekly-stat-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
}

.weekly-stat-val {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.val-eps {
  color: #fde047 !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.7) !important;
}

.val-clients {
  color: #c084fc !important;
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.7) !important;
}

.val-shares {
  color: #fbbf24 !important;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.7) !important;
}

.weekly-stat-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important;
  width: 100% !important;
}

/* Two-Tone Luxury CTA Button */
.weekly-cta-container {
  width: 100% !important;
  z-index: 2 !important;
}

.weekly-mega-ad-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.65rem 0.95rem !important;
  border-radius: 18px !important;
  border: 1.5px solid #fef08a !important;
  background: linear-gradient(90deg, #300c58 0%, #581c87 35%, #b45309 68%, #d97706 85%, #f59e0b 100%) !important;
  box-shadow: 0 10px 28px rgba(217, 119, 6, 0.55), 0 0 20px rgba(168, 85, 247, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.weekly-mega-ad-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 14px 35px rgba(245, 158, 11, 0.75), inset 0 1px 3px rgba(255, 255, 255, 0.8) !important;
  filter: brightness(1.08) !important;
}

.weekly-mega-ad-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.weekly-clapper-wrap {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.weekly-clapper-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  mask-image: radial-gradient(circle at center, black 65%, rgba(0, 0, 0, 0.85) 80%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(circle at center, black 65%, rgba(0, 0, 0, 0.85) 80%, transparent 100%) !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(168, 85, 247, 0.5)) !important;
}

.weekly-btn-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 0.15rem !important;
}

[dir=rtl] .weekly-btn-content {
  align-items: flex-start !important;
  text-align: right !important;
}

.weekly-btn-title {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
  line-height: 1.1 !important;
}

.weekly-btn-sub {
  font-size: 0.68rem !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.gold-highlight {
  color: #fde047 !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.9) !important;
}

.gold-bold {
  color: #fde047 !important;
  font-weight: 800 !important;
}

.weekly-play-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fffbeb 0%, #f59e0b 50%, #b45309 100%) !important;
  border: 1.5px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), 0 0 12px rgba(250, 204, 21, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
  color: #78350f !important;
}

.weekly-play-circle svg {
  width: 20px !important;
  height: 20px !important;
  margin-left: 2px !important;
}

[dir=rtl] .weekly-play-circle svg {
  transform: scaleX(-1);
}

/* Footer Dismiss Button (Exact Mockup Match) */
.weekly-footer-dismiss-btn {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 0.45rem 1rem !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
}

.weekly-footer-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.dismiss-circle {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #94a3b8 !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
}

.dismiss-text-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.dismiss-title {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

.dismiss-subtitle {
  font-size: 0.62rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Extra Compact for Small Phones (height < 700px) */
@media (max-height: 700px) {
  .weekly-vip-modal-box {
    padding: 0.85rem 0.95rem 0.7rem !important;
    gap: 0.35rem !important;
    max-height: 94vh !important;
  }
  .weekly-trophy-showcase {
    width: 105px !important;
    height: 100px !important;
  }
  .weekly-trophy-aura {
    width: 95px !important;
    height: 95px !important;
  }
  .weekly-hero-title {
    font-size: 1.25rem !important;
  }
  .weekly-gold-laurel {
    width: 22px !important;
    height: 22px !important;
  }
  .weekly-stars {
    font-size: 0.85rem !important;
  }
  .weekly-stats-hero-card {
    padding: 0.5rem 0.8rem !important;
    gap: 0.35rem !important;
  }
  .weekly-stat-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.9rem !important;
  }
  .weekly-stat-val {
    font-size: 0.95rem !important;
  }
  .weekly-mega-ad-btn {
    padding: 0.5rem 0.8rem !important;
  }
  .weekly-clapper-wrap {
    width: 38px !important;
    height: 38px !important;
  }
  .weekly-play-circle {
    width: 32px !important;
    height: 32px !important;
  }
}
/* ============================================================
   PREMIUM DEPARTMENTS TAB DESIGN (RESPONSIVE MOBILE & DESKTOP GRID)
   ============================================================ */
#tab-departments {
  padding-top: 14px;
  padding-bottom: 30px;
  box-sizing: border-box;
}

#tab-departments.active {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* --- DESKTOP / TABLET GRID LAYOUT (2 COLUMNS) --- */
@media (min-width: 768px) {
  #tab-departments.active {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
    gap: 18px !important;
    align-content: start !important;
    padding: 18px 6px 36px 6px !important;
  }
  #tab-departments .department-card {
    margin-bottom: 0 !important;
    height: 100% !important;
  }
}
.department-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  background: linear-gradient(135deg, #10192e 0%, #080d19 100%);
  border: 1.5px solid rgba(80, 130, 230, 0.35);
  border-radius: 22px;
  padding: 16px 16px;
  margin-bottom: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.18), 0 0 22px rgba(59, 130, 246, 0.18);
  position: relative;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

html[dir=rtl] .department-card {
  direction: rtl;
}

html[dir=ltr] .department-card {
  direction: ltr;
}

.department-card.locked {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(14, 18, 30, 0.95) 0%, rgba(7, 10, 20, 0.98) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.department-card:hover:not(.locked) {
  border-color: rgba(96, 165, 250, 0.85);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85), 0 0 28px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
}

/* --- TOP CORNER SHIELD BADGE --- */
.dept-title-shield {
  position: absolute;
  top: 14px;
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
  z-index: 5;
  pointer-events: none;
}

html[dir=rtl] .dept-title-shield {
  right: 16px;
}

html[dir=ltr] .dept-title-shield {
  left: 16px;
}

.dept-title-shield svg {
  width: 20px;
  height: 20px;
}

/* --- TOP ROW (ACTION + DIVIDER + CENTER + ICON) --- */
.dept-card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 2;
}

html[dir=rtl] .dept-card-top {
  direction: rtl;
}

html[dir=ltr] .dept-card-top {
  direction: ltr;
}

/* --- ICON FRAME (ENLARGED HERO 3D) --- */
.dept-icon-frame {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #18223d 0%, #060913 90%);
  border: 2px solid rgba(234, 179, 8, 0.8);
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.45), inset 0 0 12px rgba(0, 0, 0, 0.9);
}

.dept-icon-frame::before {
  content: "";
  position: absolute;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.22) 0%, transparent 65%);
  z-index: -1;
}

.dept-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.dept-ring-1 {
  width: 82px;
  height: 82px;
  border: 1.5px dashed rgba(234, 179, 8, 0.6);
}

.dept-ring-2 {
  width: 90px;
  height: 90px;
  border: 1px solid rgba(234, 179, 8, 0.25);
}

.dept-icon-content {
  position: relative;
  z-index: 2;
  color: #fff4bd;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.95));
}

.dept-icon-content svg {
  width: 100%;
  height: 100%;
}

/* --- CENTER CONTENT (TITLE + ACTIVE BADGE) --- */
.dept-card-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 10px;
  gap: 6px;
}

.dept-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.dept-title-text {
  font-size: 1.22rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
  hyphens: none;
  font-family: var(--font-heading);
  text-align: center;
}

.dept-active-badge {
  background: rgba(16, 185, 129, 0.18);
  border: 1.5px solid rgba(52, 211, 153, 0.55);
  color: #6ee7b7;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 3px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  white-space: nowrap;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background-color: #34d399;
  border-radius: 50%;
  box-shadow: 0 0 10px #34d399;
}

/* --- VERTICAL GLOWING DIVIDER --- */
.dept-card-divider {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, rgba(52, 211, 153, 0.85) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
  margin: 0 8px;
  z-index: 2;
  border-radius: 2px;
  flex-shrink: 0;
}

/* --- ACTION AREA (MAX JEWEL & BUY BTN) --- */
.dept-card-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 86px;
  position: relative;
  z-index: 2;
}

.dept-action-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid rgba(255, 143, 0, 0.85);
  background: linear-gradient(180deg, #ffb300 0%, #ff8f00 100%);
  color: #0f172a;
  font-family: var(--font-heading);
  box-shadow: 0 4px 16px rgba(255, 143, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

.dept-action-btn:hover:not(.disabled) {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.12);
  box-shadow: 0 8px 22px rgba(255, 143, 0, 0.55);
}

.dept-action-btn:active:not(.disabled) {
  transform: scale(0.97);
}

.dept-action-btn.disabled {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.85) 0%, rgba(10, 15, 30, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

.dept-action-btn .btn-arrow {
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}

.dept-action-btn .btn-lbl {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
}

.dept-action-btn .btn-cost {
  font-size: 0.92rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  margin-top: 2px;
  line-height: 1;
  white-space: nowrap;
}

.dept-action-btn.disabled .btn-cost {
  color: #fbbf24;
}

.dept-action-btn.disabled .btn-arrow {
  color: rgba(255, 255, 255, 0.4);
}

.dept-action-btn.disabled .btn-lbl {
  color: rgba(255, 255, 255, 0.6);
}

/* --- EMERALD MAX JEWEL (LARGE HERO) --- */
.max-jewel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.max-jewel {
  position: relative;
  width: 58px;
  height: 64px;
  background: radial-gradient(circle at 35% 35%, #6ee7b7 0%, #059669 60%, #047857 100%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.5);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.65));
}

.max-jewel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
}

.max-jewel .jewel-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  transform: translateY(1px);
  z-index: 3;
}

.max-jewel .jewel-check {
  font-size: 19px;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.max-jewel .jewel-text {
  font-size: 11px;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 1px;
  margin-top: -2px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.max-jewel-label {
  font-size: 0.95rem;
  font-weight: 900;
  color: #6ee7b7;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(110, 231, 183, 0.6);
}

/* --- BOTTOM STATS FULL-WIDTH BAR --- */
.dept-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.dept-stat-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  background: rgba(9, 14, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 18px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

html[dir=rtl] .dept-stat-bar {
  direction: rtl;
}

html[dir=ltr] .dept-stat-bar {
  direction: ltr;
}

.stat-bar-label {
  font-size: 0.9rem;
  color: #94a3b8;
  font-weight: 700;
  white-space: nowrap;
}

.stat-bar-sep {
  color: rgba(255, 255, 255, 0.2);
  margin: 0 12px;
  font-weight: 300;
  font-size: 1.1rem;
}

.stat-bar-val {
  font-size: 1.1rem;
  font-weight: 900;
  font-family: "Outfit", sans-serif;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* --- PREMIUM MANAGERS CSS --- */
.upgrade-card.manager-card {
  position: relative;
  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.2));
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  background: #0a0e17;
  padding: 12px 16px; /* Reduced top/bottom padding to tighten height */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  gap: 12px; /* Reduced overall gap */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.9), inset 0 0 15px var(--theme-glow, rgba(255, 255, 255, 0.05)), 0 0 12px var(--theme-glow, rgba(255, 255, 255, 0.2));
}

.upgrade-card.manager-card:hover {
  box-shadow: 0 18px 35px rgb(0, 0, 0), inset 0 0 20px var(--theme-glow, rgba(255, 255, 255, 0.1)), 0 0 18px var(--theme-glow, rgba(255, 255, 255, 0.3));
}

.theme-gold {
  --theme-glow: rgba(251, 191, 36, 0.3);
  --theme-border: rgba(251, 191, 36, 0.4);
}

.theme-purple {
  --theme-glow: rgba(168, 85, 247, 0.3);
  --theme-border: rgba(168, 85, 247, 0.4);
}

.theme-blue {
  --theme-glow: rgba(59, 130, 246, 0.3);
  --theme-border: rgba(59, 130, 246, 0.4);
}

.theme-amber {
  --theme-glow: rgba(245, 158, 11, 0.3);
  --theme-border: rgba(245, 158, 11, 0.4);
}

.theme-red {
  --theme-glow: rgba(239, 68, 68, 0.3);
  --theme-border: rgba(239, 68, 68, 0.4);
}

.theme-green {
  --theme-glow: rgba(34, 197, 94, 0.3);
  --theme-border: rgba(34, 197, 94, 0.4);
}

.theme-teal {
  --theme-glow: rgba(20, 184, 166, 0.3);
  --theme-border: rgba(20, 184, 166, 0.4);
}

.mgr-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent), radial-gradient(circle at top left, var(--theme-glow, rgba(255, 255, 255, 0.1)) 0%, transparent 60%);
  background-size: 20px 20px, 100% 100%;
}

.theme-gold .mgr-card-bg {
  --theme-glow: #fbbf24;
  background-color: rgba(251, 191, 36, 0.05);
}

.theme-purple .mgr-card-bg {
  --theme-glow: #a855f7;
  background-color: rgba(168, 85, 247, 0.05);
}

.theme-blue .mgr-card-bg {
  --theme-glow: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
}

.theme-amber .mgr-card-bg {
  --theme-glow: #f59e0b;
  background-color: rgba(245, 158, 11, 0.05);
}

.theme-red .mgr-card-bg {
  --theme-glow: #ef4444;
  background-color: rgba(239, 68, 68, 0.05);
}

.theme-green .mgr-card-bg {
  --theme-glow: #22c55e;
  background-color: rgba(34, 197, 94, 0.05);
}

.theme-teal .mgr-card-bg {
  --theme-glow: #14b8a6;
  background-color: rgba(20, 184, 166, 0.05);
}

.mgr-layout-wrapper {
  display: flex;
  flex-direction: row; /* In RTL, first item is on the right */
  align-items: stretch;
  gap: 16px;
  z-index: 1;
  position: relative;
}

.mgr-content-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0; /* Prevents text blowout */
}

/* --- PORTRAIT --- */
.mgr-portrait-col {
  width: 130px; /* Fixed width instead of grid column */
  height: 100%;
  min-height: 120px; /* Reduced min-height so cards can be shorter */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: #000;
}

.theme-gold .mgr-portrait-col {
  border-color: rgba(251, 191, 36, 0.8);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.theme-purple .mgr-portrait-col {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.theme-blue .mgr-portrait-col {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.theme-amber .mgr-portrait-col {
  border-color: rgba(245, 158, 11, 0.8);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.theme-red .mgr-portrait-col {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.theme-green .mgr-portrait-col {
  border-color: rgba(34, 197, 94, 0.8);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.theme-teal .mgr-portrait-col {
  border-color: rgba(20, 184, 166, 0.8);
  box-shadow: 0 0 15px rgba(20, 184, 166, 0.2);
}

.mgr-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  border-radius: 10px; /* slightly less than container to fit inside border */
}

/* Fix specific alignment for Marketing Manager (manager-6) */
.mgr-portrait-img[src*=manager-6] {
  object-position: center 0% !important; /* Forces her to align from the absolute top */
}

.mgr-gem-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, rgba(42, 49, 67, 0.9) 0%, rgba(19, 23, 32, 0.9) 100%);
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

/* --- TOP ROW (Hex + Title) --- */
.mgr-top-row {
  display: grid;
  grid-template-columns: 1fr 50px; /* In RTL, Col 1 (1fr) is Right, Col 2 (50px) is Left */
  gap: 12px;
  align-items: flex-start;
}

/* Hexagon icon */
.mgr-hex-icon {
  width: 44px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}

.mgr-hex-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #0a0e17;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 0;
}

.theme-gold .mgr-hex-icon {
  background: linear-gradient(180deg, #fbbf24, #b45309);
  color: #fbbf24;
}

.theme-purple .mgr-hex-icon {
  background: linear-gradient(180deg, #a855f7, #6b21a8);
  color: #c084fc;
}

.theme-blue .mgr-hex-icon {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  color: #93c5fd;
}

.hex-inner {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0 4px currentColor);
}

/* Title group */
.mgr-title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-top: 4px;
}

.mgr-title {
  font-family: "Assistant", "Heebo", "Rubik", system-ui, -apple-system, sans-serif;
  font-size: 1.85rem; /* Significantly Increased size */
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
  letter-spacing: 0.5px;
}

.mgr-stars {
  color: #fbbf24;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.mgr-lvl-badge {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 2px 14px;
  font-size: 0.85rem;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.6));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.theme-gold .mgr-lvl-badge {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(0, 0, 0, 0.8));
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.theme-purple .mgr-lvl-badge {
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.6);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.15), rgba(0, 0, 0, 0.8));
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.theme-blue .mgr-lvl-badge {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.6);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.15), rgba(0, 0, 0, 0.8));
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* --- STATS PILLS --- */
.mgr-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mgr-stat-pill {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 92%;
  margin: 0 auto; /* Leaves breathing room on the edges */
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.mgr-stat-val {
  font-family: "Assistant", "Heebo", "Rubik", system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 1.45rem; /* Significantly Increased size */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

.theme-gold .mgr-stat-val {
  color: #fde047;
}

.theme-purple .mgr-stat-val {
  color: #d8b4fe;
}

.theme-blue .mgr-stat-val {
  color: #93c5fd;
}

.mgr-stat-label-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.mgr-stat-label {
  font-family: "Assistant", "Heebo", "Rubik", system-ui, -apple-system, sans-serif;
  font-size: 1.15rem; /* Significantly Increased size */
  color: #ffffff; /* Pure white for max readability */
  font-weight: 800; /* Bolder */
  letter-spacing: 0.5px;
}

.mgr-stat-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.theme-gold .mgr-stat-icon-circle {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
}

.theme-purple .mgr-stat-icon-circle {
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.5);
}

.theme-blue .mgr-stat-icon-circle {
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.5);
}

/* --- BUY BUTTON --- */
button.buy-btn.mgr-buy-btn {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -4px 6px rgba(0, 0, 0, 0.3) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-weight: 800;
  transition: all 0.2s ease;
}

button.buy-btn.mgr-buy-btn:hover:not(.disabled) {
  transform: translateY(-2px) !important;
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.4) !important;
}

button.buy-btn.mgr-buy-btn:active:not(.disabled) {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 4px 8px rgba(0, 0, 0, 0.5) !important;
}

.theme-gold button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #ffe066 0%, #d4af37 40%, #aa7c11 100%) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  color: #2b1f04;
}

.theme-purple button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #d8b4fe 0%, #9333ea 40%, #581c87 100%) !important;
}

.theme-blue button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #93c5fd 0%, #2563eb 40%, #1e3a8a 100%) !important;
}

.theme-amber button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #fcd34d 0%, #d97706 40%, #78350f 100%) !important;
}

.theme-red button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #fca5a5 0%, #dc2626 40%, #7f1d1d 100%) !important;
}

.theme-green button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #86efac 0%, #16a34a 40%, #14532d 100%) !important;
}

.theme-teal button.buy-btn.mgr-buy-btn {
  background: linear-gradient(180deg, #5eead4 0%, #0d9488 40%, #134e4a 100%) !important;
}

button.buy-btn.mgr-buy-btn.disabled {
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%) !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- FOOTER ACTION ROW --- */
.mgr-footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.mgr-active-badge {
  background: linear-gradient(180deg, #16a34a 0%, #14532d 100%);
  border: 1px solid #4ade80;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Assistant", "Heebo", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6), inset 0 2px 4px rgba(255, 255, 255, 0.4), inset 0 -4px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mgr-active-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.8), inset 0 2px 4px rgba(255, 255, 255, 0.5), inset 0 -4px 6px rgba(0, 0, 0, 0.3);
}

.mgr-footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Right aligned in RTL */
}

.mgr-footer-lbl {
  font-size: 0.75rem;
  color: #94a3b8;
}

.mgr-footer-val-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.mgr-footer-val {
  color: #93c5fd;
  font-size: 1.15rem;
  font-weight: 800;
}

.theme-gold .mgr-footer-val {
  color: #fde047;
}

.theme-purple .mgr-footer-val {
  color: #d8b4fe;
}

.per-hour-lbl {
  color: #94a3b8;
  font-size: 0.75rem;
}

/* ===================================================
   PORTRAIT MOBILE MODE
   =================================================== */
@media (max-width: 500px) {
  .upgrade-card.manager-card {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .mgr-layout-wrapper {
    gap: 12px !important;
  }
  .mgr-portrait-col {
    width: 85px !important;
    min-height: 100px !important;
  }
  .mgr-title {
    font-size: 1.25rem !important;
  }
  .mgr-stat-val {
    font-size: 1.1rem !important;
  }
  .mgr-stat-label {
    font-size: 0.95rem !important;
    gap: 8px !important;
  }
  .mgr-stat-icon-circle {
    width: 24px !important;
    height: 24px !important;
  }
  .mgr-stat-pill {
    padding: 4px 10px !important;
  }
  .mgr-active-badge {
    font-size: 0.9rem !important;
    padding: 4px 10px !important;
  }
  .mgr-footer-val {
    font-size: 1rem !important;
  }
  button.buy-btn.mgr-buy-btn {
    padding: 8px !important;
    font-size: 0.9rem !important;
  }
}
/* ===================================================
   ULTRA-SMALL MOBILE MODE (Older Phones, e.g., iPhone SE)
   =================================================== */
@media (max-width: 380px) {
  .mgr-layout-wrapper {
    gap: 8px !important;
  }
  .mgr-portrait-col {
    width: 65px !important;
    min-height: 80px !important;
  }
  .mgr-title {
    font-size: 1.1rem !important;
  }
  .mgr-lvl-badge {
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
  }
  .mgr-stat-val {
    font-size: 0.95rem !important;
  }
  .mgr-stat-label {
    font-size: 0.85rem !important;
    gap: 4px !important;
  }
  .mgr-stat-icon-circle {
    width: 20px !important;
    height: 20px !important;
  }
  .mgr-stat-pill {
    padding: 4px 6px !important;
  }
  .mgr-active-badge {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
  }
  .mgr-footer-val {
    font-size: 0.9rem !important;
  }
  button.buy-btn.mgr-buy-btn {
    padding: 6px !important;
    font-size: 0.8rem !important;
  }
}
/* Performance Mode Overrides for Eco settings */
body.perf-eco {
  /* Backdrop filter overrides */
}
body.perf-eco * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.perf-eco {
  /* Expensive decorative shadow/glow overrides */
}
body.perf-eco .splash-halo,
body.perf-eco .splash-door-light,
body.perf-eco .splash-progress-glow,
body.perf-eco .splash-progress-shine,
body.perf-eco .secondary-card-accent,
body.perf-eco .hex-glow,
body.perf-eco .branch-card::before,
body.perf-eco .branch-card::after,
body.perf-eco .vip-glow,
body.perf-eco .vault-glow,
body.perf-eco .floating-text {
  filter: none !important;
}
body.perf-eco {
  /* Reduce multi-layer box shadows to a single simple shadow */
}
body.perf-eco .branch-card,
body.perf-eco .upgrade-card,
body.perf-eco .manager-card,
body.perf-eco .dept-card,
body.perf-eco .mission-card,
body.perf-eco .premium-card,
body.perf-eco .branch-action-btn,
body.perf-eco .gold-gradient-btn,
body.perf-eco .ghost-gold,
body.perf-eco .solid-gold,
body.perf-eco .branch-req-pill,
body.perf-eco .branch-diamond-icon,
body.perf-eco .multiplier-hexagon-badge,
body.perf-eco .progress-bar-fill,
body.perf-eco .nav-btn.active,
body.perf-eco .buy-btn,
body.perf-eco .prestige-btn,
body.perf-eco .teller-desk,
body.perf-eco .vault-door,
body.perf-eco .customer-avatar {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;
}
body.perf-eco {
  /* Flat icons */
}
body.perf-eco .branch-diamond-icon {
  box-shadow: none !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
}
body.perf-eco {
  /* Reduce multi-layer text shadows to a single simple shadow */
}
body.perf-eco .branch-name,
body.perf-eco .cash-amount,
body.perf-eco h1, body.perf-eco h2, body.perf-eco h3, body.perf-eco h4,
body.perf-eco .splash-title-main,
body.perf-eco .splash-welcome-text,
body.perf-eco .mult-val,
body.perf-eco .req-val,
body.perf-eco .action-val,
body.perf-eco .upgrade-title,
body.perf-eco .manager-name,
body.perf-eco .floating-text,
body.perf-eco .toast-message,
body.perf-eco .prestige-btn {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}
body.perf-eco {
  /* Turn off expensive keyframe animations that use box-shadow or filter */
}
body.perf-eco .ad-pulse-button,
body.perf-eco .pulse-dot,
body.perf-eco .splash-loading-dots span,
body.perf-eco .ready-to-claim,
body.perf-eco .mission-pulse,
body.perf-eco .boost-img,
body.perf-eco .vault-door.open,
body.perf-eco .header-daily-btn.alert {
  animation: none !important;
}
/*# sourceMappingURL=style.css.map */