/* Jackpot Crusher - Stylesheet */

:root {
  /* Z-Index Scale (UPDATE 2 Section 10.1) */
  --z-board: 1;
  --z-hud: 10;
  --z-ledger: 20;
  --z-pops: 30;
  --z-reel: 40;
  --z-banners: 50;
  --z-modals: 60;
  --z-toast: 70;

  /* Colors (UPDATE 1 Section 8 Neon Casino Palette) */
  --color-red: #ff3d5a;
  --color-blue: #3da5ff;
  --color-green: #34d17a;
  --color-yellow: #ffcf33;
  --color-orange: #ff8a2b;
  --color-purple: #a45bff;
  --color-gold: #f59e0b;
  --color-shard: #38bdf8;

  --bg-dark: #090a0f;
  --bg-card: #131722;
  --bg-card-border: #232a3b;
  --gold-main: #f59e0b;
  --gold-light: #fde68a;
  --gold-dark: #b45309;
  --gold-glow: rgba(245, 158, 11, 0.4);
  --danger-main: #ef4444;
  --danger-glow: rgba(239, 68, 68, 0.4);
  --success-main: #10b981;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --board-bg: #0c0f18;
  --board-cell-bg: #161b2a;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Safe Area Insets for Mobile */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* Font */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

body {
  background: radial-gradient(circle at 50% 20%, #151c2e 0%, #090a0f 80%);
  color: var(--text-main);
  font-family: var(--font-main);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  width: 100%;
  max-width: 480px;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-dark);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  overscroll-behavior: none;
  padding-left: var(--sal);
  padding-right: var(--sar);
}

/* Universal Hidden Utility */
.hidden {
  display: none !important;
}

/* Fullscreen Effects Canvas */
#fx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* Screens */
.screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--bg-dark);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
}

.screen.hidden {
  display: none !important;
}

/* Buttons */
.btn {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 8px;
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.15s ease, background-color 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn-large {
  padding: 16px 24px;
  font-size: 1.15rem;
  width: 100%;
}

.btn-gold {
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  color: #000;
  box-shadow: 0 4px 14px var(--gold-glow);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.btn-gold:hover {
  filter: brightness(1.1);
}

.btn-secondary {
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background-color: #1e2638;
}

.btn-danger {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 4px 14px var(--danger-glow);
}

.btn-sm {
  padding: 8px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  color: var(--text-muted);
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 6px 10px;
}

.gold-text {
  color: var(--gold-main);
  font-weight: 700;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: var(--z-modals, 60);
  backdrop-filter: blur(4px);
}

.modal-overlay.hidden {
  display: none !important;
}

.modal-card {
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--bg-card-border);
  padding-bottom: 10px;
}

/* --- SCREEN: MAIN MENU --- */
#screen-menu {
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.menu-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.game-title {
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 1px;
}

.title-accent {
  color: var(--gold-main);
  text-shadow: 0 0 20px var(--gold-glow);
}

.tagline {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 6px;
  text-align: center;
}

.wallet-display {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: 1.2rem;
}

.wallet-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.auto-crush-ticker {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--success-main);
  box-shadow: 0 0 8px var(--success-main);
}

/* --- SCREEN: HERO SELECT --- */
.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bg-card-border);
}

/* --- SCREEN: HERO SELECT (ENHANCED VISUALS) --- */
.hero-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  perspective: 1000px;
}

.hero-card {
  position: relative;
  background: linear-gradient(145deg, #181d2c 0%, #0f131f 100%);
  border: 2px solid #2a334a;
  border-radius: 16px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.25s ease;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #475569;
  transition: background 0.25s ease;
}

/* Card 1: Knight (Defensive / Cyan Aura) */
.hero-card-knight {
  transform: rotate(-0.5deg);
}

.hero-card-knight::before {
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
}

.hero-card-knight:hover {
  border-color: #38bdf8;
  transform: translateY(-6px) scale(1.02) rotate(0deg);
  box-shadow: 0 18px 36px rgba(14, 165, 233, 0.25), 0 0 20px rgba(56, 189, 248, 0.15);
}

/* Card 2: Gambler (High Roller / Gold & Ruby Aura) */
.hero-card-gambler {
  transform: rotate(0.5deg);
}

.hero-card-gambler::before {
  background: linear-gradient(90deg, transparent, #f59e0b, #ef4444, transparent);
}

.hero-card-gambler:hover {
  border-color: #f59e0b;
  transform: translateY(-6px) scale(1.02) rotate(0deg);
  box-shadow: 0 18px 36px rgba(245, 158, 11, 0.25), 0 0 20px rgba(239, 68, 68, 0.15);
}

/* Hero Badges & Traits */
.hero-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}

.knight-badge {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.gambler-badge {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.hero-passive-tag {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 10px;
  border-radius: 6px;
}

.hero-trait-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.trait-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
}

.trait-pill.gold-pill {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.trait-pill.red-pill {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.hero-avatar {
  width: 86px;
  height: 86px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}

.hero-card:hover .hero-avatar {
  transform: scale(1.08);
}

.hero-avatar svg {
  width: 100%;
  height: 100%;
}

.hero-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.hero-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.45;
  max-width: 320px;
}

/* --- SCREEN: WAGER & HEAT --- */
.wager-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wallet-badge {
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-card);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
}

.wager-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.crate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.crate-card {
  background-color: var(--bg-card);
  border: 2px solid var(--bg-card-border);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.crate-card:hover, .crate-card.selected {
  border-color: var(--gold-main);
  box-shadow: 0 0 12px var(--gold-glow);
  transform: scale(1.02);
}

.crate-card.crate-all-in {
  border-color: var(--bg-card-border);
}

.crate-card.crate-all-in:hover {
  border-color: var(--gold-main);
}

.crate-card.crate-all-in.selected {
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.75) !important;
}

.all-in-tag {
  position: absolute;
  top: -8px;
  right: 8px;
  background-color: var(--danger-main);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

.crate-icon {
  font-size: 2rem;
  margin-bottom: 4px;
}

.crate-pct {
  font-weight: 800;
  font-size: 1.1rem;
}

.crate-amt {
  font-size: 0.85rem;
  color: var(--gold-main);
}

.heat-selector {
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.heat-flames {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.heat-pip {
  flex: 1;
  padding: 10px 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1e2638;
  border: 1px solid var(--bg-card-border);
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.heat-pip.active {
  background: linear-gradient(180deg, #f97316 0%, #ef4444 100%);
  color: #fff;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.heat-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- SCREEN: RUN & BOARD - 5 ZONES (UPDATE 2 SECTION 10.1) --- */
#screen-run {
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-hud, 10);
}

.run-hud {
  padding: max(4px, var(--sat)) 0 0 0;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--bg-card-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: var(--z-hud, 10);
}

/* Zone 1: HUD row */
.hud-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--bg-card-border);
  min-height: 38px;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.floor-badge-text {
  font-size: 0.82rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.5px;
}

.boss-tag {
  background-color: var(--danger-main);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
}

.player-hp-compact {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hp-icon {
  font-size: 0.72rem;
}

.player-hp-bg {
  width: 52px;
  height: 8px;
  background-color: #0c0f18;
  border-radius: 4px;
  overflow: hidden;
}

.hp-compact-text {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
}

.hud-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pot-display {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.95rem;
}

.pot-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 700;
}

.hud-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-shards-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
}

.gold-compact {
  color: var(--gold-main);
}

.shards-compact {
  color: var(--color-shard, #38bdf8);
}

.btn-icon {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f8fafc;
}

/* Zone 2: Floor Bar Zone */
.floor-bar-zone {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 10px;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid var(--bg-card-border);
}

.front-enemy-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.enemy-main-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.enemy-name-text {
  font-weight: 800;
  color: #f8fafc;
}

.enemy-progress-text,
.stake-diff-text {
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.enemy-intent {
  color: #f87171;
  font-weight: 700;
  font-size: 0.72rem;
}

.enemy-hp-bg {
  flex: 1;
  height: 8px;
  min-width: 36px;
  background-color: #0c0f18;
  border-radius: 4px;
  overflow: hidden;
}

.enemy-hp-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  flex-shrink: 0;
}

.hp-bar {
  height: 100%;
  transition: width 0.25s ease;
}

.enemy-hp-fill {
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
}

.player-hp-fill {
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
}

/* Zone 3: Boss Strip */
.boss-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 10px;
  background: rgba(23, 19, 34, 0.95);
  border-bottom: 1px solid rgba(239, 68, 68, 0.35);
  font-size: 0.74rem;
  color: #f8fafc;
  cursor: pointer;
  user-select: none;
}

.boss-strip:hover {
  background: rgba(35, 29, 52, 0.95);
}

.boss-strip-left {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boss-strip-icon {
  font-size: 0.85rem;
}

.boss-strip-name {
  font-weight: 800;
  color: #ffcf33;
}

.boss-strip-sep {
  color: #64748b;
}

.boss-strip-summary {
  color: #cbd5e1;
  font-weight: 600;
}

.boss-strip-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.boss-strip-timer {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f87171;
}

.btn-boss-info {
  background: none;
  border: none;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Zone 4: Match-3 Board */
.board-wrapper {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 4px 8px;
  width: 100%;
}

.game-board {
  --cell: 48px;
  --cols: 9;
  --rows: 6;
  width: calc(var(--cell) * var(--cols, 9));
  height: calc(var(--cell) * var(--rows, 6));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: var(--board-bg);
  border-radius: 12px;
  border: 2px solid var(--bg-card-border);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.9), 0 0 16px rgba(56, 189, 248, 0.15);
  touch-action: none;
  user-select: none;
  z-index: var(--z-board, 1);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  padding: 0;
  box-sizing: content-box;
}

/* Zone 5: Action Bar Zone */
.action-bar-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px max(8px, var(--sab));
  background: var(--bg-card);
  border-top: 1px solid var(--bg-card-border);
  min-height: 48px;
  flex-shrink: 0;
  z-index: var(--z-hud, 10);
}

/* Board reaction to Heat */
.game-board[data-heat="0"] { border-color: #1e293b; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 14px rgba(56, 189, 248, 0.12); }
.game-board[data-heat="1"] { border-color: #78350f; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 18px rgba(245, 158, 11, 0.25); }
.game-board[data-heat="2"] { border-color: #9a3412; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 22px rgba(249, 115, 22, 0.35); }
.game-board[data-heat="3"] { border-color: #b91c1c; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 28px rgba(239, 68, 68, 0.5); }
.game-board[data-heat="4"] { border-color: #dc2626; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 35px rgba(220, 38, 38, 0.65); }
.game-board[data-heat="5"] { border-color: #ef4444; box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 0 45px rgba(239, 68, 68, 0.85); }

.board-grid-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), 1fr);
  grid-template-rows: repeat(var(--rows, 6), 1fr);
  gap: 3px;
  padding: 2px;
  pointer-events: none;
  z-index: 1;
}

.board-grid-slot {
  background-color: var(--board-cell-bg);
  border-radius: 8px;
}

.sprite-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  z-index: 2;
  will-change: transform, opacity;
}

.sprite-tile .candy-svg {
  width: 90%;
  height: 90%;
  pointer-events: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.sprite-tile:hover .candy-svg {
  filter: brightness(1.2) drop-shadow(0 0 10px var(--gem-glow, #ffffff));
  transform: scale(1.05);
}

.sprite-tile.active-press .candy-svg {
  transform: scale(0.92);
  transition: transform 0.08s cubic-bezier(0.2, 0.9, 0.4, 1);
}

.sprite-tile.selected {
  z-index: 8;
}

.sprite-tile.selected::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 2px solid #ffcf33;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 10px #ffcf33, inset 0 0 6px #ffcf33;
  animation: selectPulse 1.2s ease-in-out infinite alternate;
}

@keyframes selectPulse {
  from { opacity: 0.7; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1.02); }
}

.sprite-tile.debug-mismatch {
  outline: 3px solid #ff3d5a !important;
  z-index: 99 !important;
}

/* --- FROZEN CANDY / ICE BLOCK (UPDATE 2 SECTION 9) --- */
.ice-block {
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(191, 234, 255, 0.65) 0%, rgba(95, 184, 232, 0.65) 100%);
  border-top: 2px solid rgba(255, 255, 255, 0.85);
  border-left: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(40, 110, 160, 0.75);
  border-right: 2px solid rgba(40, 110, 160, 0.6);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.45), 0 2px 6px rgba(0, 40, 80, 0.35);
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  backdrop-filter: blur(1px);
}

.ice-glare {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0.85) 50%, transparent 56%);
  pointer-events: none;
  animation: iceShimmer 4s ease-in-out infinite;
}

@keyframes iceShimmer {
  0%, 80%, 100% { opacity: 0.3; transform: translateX(-30%); }
  90% { opacity: 0.9; transform: translateX(30%); }
}

.ice-cracks {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.8) 1.5px, transparent 1.5px),
                    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.7) 1.5px, transparent 1.5px);
  pointer-events: none;
}

.ice-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(10, 25, 45, 0.9);
  color: #bfeaff;
  font-family: monospace;
  font-size: 11px;
  font-weight: 800;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 234, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 6;
}

.board-cell {
  background-color: var(--board-cell-bg);
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.board-cell:hover .candy-svg {
  filter: brightness(1.2) drop-shadow(0 0 10px var(--gem-glow, #ffffff));
  transform: scale(1.06);
}

.board-cell.selected {
  outline: 3px solid var(--gold-main);
  outline-offset: -2px;
  filter: brightness(1.2);
  transform: scale(0.96);
  z-index: 5;
}

.board-cell.selected .candy-svg {
  filter: brightness(1.3) drop-shadow(0 0 16px var(--gem-glow, #f59e0b));
  transform: scale(1.10);
}

.board-cell.swapping {
  z-index: 10;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.board-cell.matching {
  animation: candyPulse 0.3s ease-in-out;
}

@keyframes candyPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.2); filter: brightness(1.8) drop-shadow(0 0 14px #ffffff); }
}

.board-cell.clearing {
  animation: candyClear 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes candyClear {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  40% { transform: scale(1.25); opacity: 1; filter: brightness(2) drop-shadow(0 0 16px #ffffff); }
  100% { transform: scale(0); opacity: 0; filter: brightness(2); }
}

.special-overlay {
  animation: specialAuraPulse 1.8s infinite ease-in-out;
}

@keyframes specialAuraPulse {
  0%, 100% { filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 8px #38bdf8); opacity: 0.9; }
  50% { filter: drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 18px #f59e0b); opacity: 1; }
}

.board-cell.falling {
  animation: candyGravityFall var(--fall-dur, 350ms) cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}

@keyframes candyGravityFall {
  0% { transform: translateY(var(--fall-px, -40px)); }
  75% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.candy-svg {
  width: 90%;
  height: 90%;
  pointer-events: none;
}

/* Reusable Flashy Case-Opening Reel Overlay */
.reel-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.22) 0%, rgba(9, 10, 15, 0.78) 70%);
  backdrop-filter: blur(4px);
  z-index: var(--z-reel, 40);
  pointer-events: auto;
  overflow: hidden;
}

.reel-overlay.hidden {
  display: none !important;
}

.reel-bg-rays {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 15deg,
    rgba(245, 158, 11, 0.16) 15deg 30deg,
    transparent 30deg 45deg,
    rgba(56, 189, 248, 0.14) 45deg 60deg,
    transparent 60deg 75deg,
    rgba(239, 68, 68, 0.15) 75deg 90deg,
    transparent 90deg 105deg,
    rgba(245, 158, 11, 0.16) 105deg 120deg,
    transparent 120deg 135deg,
    rgba(168, 85, 247, 0.15) 135deg 150deg,
    transparent 150deg 165deg,
    rgba(245, 158, 11, 0.16) 165deg 180deg,
    transparent 180deg 195deg,
    rgba(56, 189, 248, 0.14) 195deg 210deg,
    transparent 210deg 225deg,
    rgba(245, 158, 11, 0.16) 225deg 240deg,
    transparent 240deg 255deg,
    rgba(239, 68, 68, 0.15) 255deg 270deg,
    transparent 270deg 285deg,
    rgba(245, 158, 11, 0.16) 285deg 300deg,
    transparent 300deg 315deg,
    rgba(168, 85, 247, 0.15) 315deg 330deg,
    transparent 330deg 345deg,
    rgba(245, 158, 11, 0.16) 345deg 360deg
  );
  filter: blur(2px);
  pointer-events: none;
  animation: reelRaysSpin 12s linear infinite;
}

@keyframes reelRaysSpin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  to { transform: rotate(360deg) scale(1); }
}

.reel-card {
  width: min(310px, calc(100vw - 28px));
  background: linear-gradient(180deg, #1b2234 0%, #0d111c 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.92),
    0 0 28px rgba(245, 158, 11, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
  position: relative;
  z-index: 2;
  animation: reelCardPopIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.reel-card.reel-landed {
  border-color: #fde047;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.95),
    0 0 42px rgba(250, 204, 21, 0.8),
    inset 0 0 18px rgba(250, 204, 21, 0.25);
}

@keyframes reelCardPopIn {
  from { transform: scale(0.86); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.reel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.reel-sparkle {
  color: #fde047;
  font-size: 0.85rem;
  text-shadow: 0 0 8px #f59e0b;
  animation: sparklePulse 0.9s ease-in-out infinite alternate;
}

@keyframes sparklePulse {
  from { transform: scale(0.85); opacity: 0.7; }
  to { transform: scale(1.2); opacity: 1; }
}

.reel-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fde047;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.75), 0 2px 4px #000;
}

.reel-viewport,
.reel-container {
  width: 100%;
  height: 72px;
  overflow: hidden;
  position: relative;
  background: #070a12;
  border-radius: 10px;
  border: 1px solid #28324b;
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.95);
}

.reel-fade-left,
.reel-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  z-index: 6;
  pointer-events: none;
}

.reel-fade-left {
  left: 0;
  background: linear-gradient(90deg, rgba(7, 10, 18, 0.95) 0%, transparent 100%);
}

.reel-fade-right {
  right: 0;
  background: linear-gradient(270deg, rgba(7, 10, 18, 0.95) 0%, transparent 100%);
}

.reel-strip {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
}

.reel-tile {
  width: 68px;
  min-width: 68px;
  height: 64px;
  margin: 0 3px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #334155;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reel-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: currentColor;
  opacity: 0.85;
}

.reel-tile-val {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.reel-tile-sub {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  opacity: 0.85;
  margin-top: 2px;
  text-transform: uppercase;
}

.reel-rarity-low {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

.reel-rarity-mid {
  background: linear-gradient(180deg, #0f2e22 0%, #091914 100%);
  box-shadow: inset 0 0 10px rgba(52, 209, 122, 0.22);
}

.reel-rarity-high {
  background: linear-gradient(180deg, #3b2506 0%, #1c1204 100%);
  box-shadow: inset 0 0 12px rgba(255, 207, 51, 0.3);
}

.reel-rarity-jackpot {
  background: linear-gradient(135deg, #4c0519 0%, #1e1b4b 100%);
  box-shadow: inset 0 0 14px rgba(255, 61, 90, 0.45);
}

.reel-tile.winner {
  transform: scale(1.06);
  border-color: #ffffff !important;
  box-shadow: 0 0 18px currentColor, inset 0 0 12px rgba(255, 255, 255, 0.45) !important;
  z-index: 5;
}

.reel-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 50%, #fde047 100%);
  box-shadow: 0 0 10px #fde047, 0 0 4px #ffffff;
  z-index: 10;
  pointer-events: none;
}

.reel-marker::before,
.reel-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.reel-marker::before {
  top: 0;
  border-top: 7px solid #fde047;
}

.reel-marker::after {
  bottom: 0;
  border-bottom: 7px solid #fde047;
}

.reel-footer {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.btn-reel-skip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #334155;
  color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 16px;
  min-height: 40px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-reel-skip:hover {
  background: #1e293b;
  color: #ffffff;
}

.reel-floating-result {
  position: absolute;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold-main);
  text-shadow: 0 0 14px var(--gold-glow);
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  20% { transform: translateY(-10px) scale(1.2); opacity: 1; }
  100% { transform: translateY(-40px) scale(1); opacity: 0; }
}

/* --- DECISION MODAL & VAULT --- */
.decision-card {
  gap: 20px;
}

.decision-pot-info {
  background-color: #0c0f18;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--bg-card-border);
}

.pot-massive {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold-main);
  margin: 6px 0;
}

.payout-estimate {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.decision-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-vault {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
  color: #fff;
  font-weight: 800;
  padding: 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.descend-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

#btn-descend {
  position: relative;
  overflow: hidden;
}

.btn-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* --- UPGRADES SCREEN --- */
.upgrades-wallet {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--bg-card-border);
  font-size: 0.95rem;
}

.soul-chips-badge {
  color: #38bdf8;
  font-weight: 700;
}

.upgrades-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}

.upgrade-item {
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.upgrade-icon {
  font-size: 2rem;
}

.upgrade-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upgrade-title-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}

.upgrade-chance {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.rebirth-section {
  margin: 16px 20px 30px;
  background: #18121f;
  border: 1px solid #581c87;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.rebirth-section h3 {
  color: #c084fc;
}

.rebirth-section p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* --- SETTINGS & ODDS TABLES --- */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
}

.setting-item input[type="range"] {
  width: 140px;
}

.setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold-main);
  cursor: pointer;
}

.odds-modal-card {
  max-width: 320px;
  max-height: 62dvh;
  padding: 14px 16px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.odds-modal-card .modal-header {
  padding-bottom: 6px;
  flex-shrink: 0;
}

.odds-modal-card .modal-header h2 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.modal-body-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.odds-content h3 {
  font-size: 0.82rem;
  font-weight: 800;
  color: #38bdf8;
  margin: 6px 0 2px;
}

.odds-hero-selector {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin: 0;
}

.odds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin: 4px 0;
}

.odds-table th, .odds-table td {
  border: 1px solid var(--bg-card-border);
  padding: 4px 8px;
  text-align: center;
}

.odds-table th {
  background-color: #1e2638;
}

.odds-specials-list {
  font-size: 0.78rem;
  color: #e2e8f0;
}

.odds-note {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.35;
  margin: 0;
}

/* --- SUMMARY SCREEN & SHARE CARD --- */
#screen-summary {
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.summary-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.summary-tag {
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--gold-main);
}

.summary-stats-box {
  background-color: #0c0f18;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
}

.share-card-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-card-preview {
  background-color: #0c0f18;
  border: 1px dashed var(--bg-card-border);
  border-radius: 8px;
  padding: 12px;
  font-family: monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
  text-align: left;
  line-height: 1.4;
}

/* Mobile responsive adjustments down to 360px */
@media (max-width: 480px) {
  .game-title {
    font-size: 2.4rem;
  }
  .modal-card {
    padding: 18px;
  }
}

@media (max-width: 380px) {
  .game-title {
    font-size: 2.2rem;
  }
  .game-board {
    --board-max-w: 328px;
    gap: 2px;
    padding: 3px;
  }
  .modal-card {
    padding: 16px;
  }
}

/* Superpower Visual Juice */
.screen-wipe-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 50%, #a855f7 100%);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 14px 28px;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(245, 158, 11, 0.9), 0 0 20px rgba(239, 68, 68, 0.8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: var(--z-banners, 50);
  animation: wipeBannerAnim 1s ease-out forwards;
}

@keyframes wipeBannerAnim {
  0% { transform: translate(-50%, -50%) scale(0.3) rotate(-5deg); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1.0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

.pop-number {
  position: absolute;
  font-size: 1.8rem;
  font-weight: 900;
  pointer-events: none;
  z-index: 110;
  color: #fde047;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 4px 14px rgba(0, 0, 0, 0.9);
  animation: popFloat 0.95s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* --- POP LAYER & STANDARDIZED POPUPS (UPDATE 2 SECTION 8) --- */
.pop-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-pops, 30);
  overflow: hidden;
}

.jc-pop-item {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 4px 14px rgba(0, 0, 0, 0.9);
  will-change: transform, opacity;
  transform: translate3d(-50%, 0, 0);
}

.pop-size-sm { font-size: 1.1rem; }
.pop-size-md { font-size: 1.6rem; }
.pop-size-lg { font-size: 2.2rem; }
.pop-size-xl { font-size: 2.8rem; }

.jc-pop-icon {
  display: inline-block;
  font-size: 0.9em;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.jc-pop-text {
  letter-spacing: 0.5px;
}

.pop-number.crit {
  font-size: 2.3rem;
  color: #ef4444;
  text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 0 20px rgba(239, 68, 68, 0.9);
}

@keyframes popFloat {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -15px) scale(1.3); opacity: 1; }
  75% { transform: translate(-50%, -45px) scale(1.0); opacity: 1; }
  100% { transform: translate(-50%, -75px) scale(0.85); opacity: 0; }
}

/* Save info in settings */
.save-status-info {
  margin-top: 10px;
  color: var(--text-muted);
}

/* --- Section 6 UI Additions (Update 1) --- */

/* Shards Badge */
.shards-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 800;
  color: #38bdf8;
  margin-left: 6px;
}

.shards-text {
  color: #38bdf8;
  font-weight: 800;
}

/* Floor Progression Bar Lane (Section 6.1) */
.floor-lane-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 4px;
  background: rgba(15, 23, 42, 0.65);
  border-radius: 8px;
  border: 1px solid var(--bg-card-border);
}

.floor-lane-track {
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  transition: transform 0.25s ease;
}

.lane-node {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #1e293b;
  border: 1px solid #334155;
  position: relative;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.lane-node.node-front {
  width: clamp(28px, 7.5vw, 34px);
  height: clamp(28px, 7.5vw, 34px);
  min-width: clamp(28px, 7.5vw, 34px);
  border: 2px solid var(--gold-main);
  box-shadow: 0 0 10px var(--gold-glow);
  background: #1e2638;
  z-index: 5;
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
}

.lane-node.node-upcoming {
  width: clamp(16px, 4.8vw, 22px);
  height: clamp(16px, 4.8vw, 22px);
  min-width: clamp(16px, 4.8vw, 22px);
  font-size: clamp(0.55rem, 2vw, 0.72rem);
  opacity: 0.85;
}

.lane-node.node-mini {
  transform: rotate(45deg);
  border-color: #f97316;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
  background: #3c1e10;
}

.lane-node.node-mini > span {
  transform: rotate(-45deg);
}

.lane-node.node-boss {
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.6);
  background: #2d184c;
}

.lane-node.node-attacker {
  animation: pulseAttacker 1s infinite alternate;
  border-color: #ef4444;
}

@keyframes pulseAttacker {
  from { box-shadow: 0 0 4px #ef4444; }
  to { box-shadow: 0 0 14px #ef4444; }
}

.lane-link {
  width: 6px;
  height: 2px;
  background: #334155;
  flex-shrink: 0;
}

.lane-carry-float {
  position: absolute;
  top: 2px;
  left: 45px;
  background: #ef4444;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 10;
}

/* Lane Sub-Row */
.lane-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 2px;
}

.enemy-progress-text {
  color: #cbd5e1;
}

.enemy-intent {
  color: #f87171;
  font-size: 0.75rem;
  font-weight: 600;
}

.enemy-intent.imminent {
  color: #ef4444;
  font-weight: 800;
  animation: blinkDanger 0.8s infinite alternate;
}

@keyframes blinkDanger {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* Boss & Mini Boss Panel (Section 6.3) */
.boss-panel {
  background: rgba(30, 27, 75, 0.75);
  border: 1px solid #6366f1;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.75rem;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
}

.boss-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #e0e7ff;
}

.boss-panel-icon {
  font-size: 1.1rem;
}

.boss-panel-name {
  letter-spacing: 0.5px;
}

.boss-panel-passive {
  color: #c7d2fe;
}

.boss-panel-active-row {
  color: #f43f5e;
  font-weight: 600;
}

/* Boss Details Sheet Modal (UPDATE 2 SECTION 10) */
.boss-sheet-card {
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #131722;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.boss-sheet-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #232a3b;
  padding-bottom: 8px;
}

.boss-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.boss-sheet-section h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 2px;
}

.boss-sheet-section p {
  color: #cbd5e1;
}

/* Turn Controls Bar (Section 6.2) */
.hud-top-sep {
  color: #475569;
  font-weight: 800;
  margin: 0 2px;
}

/* Bottom Bar: Small Player Avatar Card + Attack Count & ATK POWER */
.action-bar-zone {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-card);
  border-top: 1px solid var(--bg-card-border);
  min-height: 48px;
  flex-shrink: 0;
  z-index: var(--z-hud, 10);
}

.player-card-bottom {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #0d121d;
  border: 1px solid #263147;
  border-radius: 8px;
  padding: 4px 8px 4px 5px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-card-avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #161e2e;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.player-card-avatar svg {
  width: 26px;
  height: 26px;
}

.player-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 78px;
}

.player-card-top-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.player-card-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.3px;
}

.player-card-hp-text {
  font-size: 0.66rem;
  font-weight: 700;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.player-card-bottom .player-hp-bg {
  width: 100%;
  height: 6px;
  background-color: #070a12;
  border-radius: 3px;
  overflow: hidden;
}

.bottom-combat-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.turn-attacks-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.attacks-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.attack-count-num {
  font-size: 0.82rem;
  font-weight: 900;
  color: #38bdf8;
  min-width: 10px;
  text-align: center;
}

.attack-pips-container {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.attack-pip {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #1e293b;
  border: 1px solid #334155;
  display: inline-block;
  transition: all 0.2s ease;
}

.attack-pip.filled {
  background: #38bdf8;
  border-color: #7dd3fc;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.65);
}

.attack-pip.spent {
  background: #334155;
  border-color: #475569;
  opacity: 0.5;
}

/* ATK POWER (X + X + X) */
.action-charge-meter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.45);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fbbf24;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.atk-power-label {
  font-size: 0.66rem;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 0.5px;
}

.atk-power-slots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: monospace;
  font-size: 0.78rem;
  font-weight: 900;
}

.atk-slot.filled {
  color: #fde047;
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid rgba(250, 204, 21, 0.6);
  padding: 0 4px;
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.atk-slot.unfilled {
  color: #64748b;
  background: rgba(15, 23, 42, 0.7);
  border: 1px dashed #475569;
  padding: 0 4px;
  border-radius: 4px;
}

.atk-slot.empty {
  color: #64748b;
}

.atk-plus {
  color: #94a3b8;
  font-weight: 800;
  font-size: 0.72rem;
}

.charge-releasing {
  animation: strikeRelease 0.45s ease-out !important;
}

/* Damage Ledger (Compatibility) */
.damage-ledger {
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid #2e3856;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: monospace;
  font-size: 0.72rem;
  color: #94a3b8;
}

/* --- BOARD DAMAGE LEDGER OVERLAY (Transparent by default; appears on crush/cascade) --- */
.board-wrapper {
  position: relative;
}

.board-damage-ledger {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  z-index: var(--z-ledger, 20);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.board-damage-ledger.active {
  opacity: 1;
  transform: translateY(0);
}

.board-ledger-total {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.95), 0 2px 4px #000, 0 0 24px rgba(255, 207, 51, 0.5);
  font-family: var(--font-main, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, transform 0.15s ease, text-shadow 0.2s ease;
  will-change: transform, color;
}

.board-ledger-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  max-height: 52px;
  overflow: hidden;
}

.board-ledger-line {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 800;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.88);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  animation: ledgerSlideDown 0.2s ease-out;
  transition: opacity 0.3s ease;
}

.board-ledger-line.crit {
  color: #ffcf33;
  border-color: rgba(255, 207, 51, 0.5);
  box-shadow: 0 0 8px rgba(255, 207, 51, 0.4);
}

.board-ledger-line.fading {
  opacity: 0.45;
}

@keyframes ledgerSlideDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulseCharge {
  from { transform: scale(0.98); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
  to { transform: scale(1.03); box-shadow: 0 0 12px rgba(245, 158, 11, 0.8); }
}

@keyframes strikeRelease {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(2); box-shadow: 0 0 20px #ef4444; }
  100% { transform: scale(0.8); opacity: 0; }
}

.ledger-header {
  font-weight: 800;
  font-size: 0.7rem;
  color: #64748b;
  letter-spacing: 1px;
}

.ledger-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60px;
  overflow-y: auto;
}

.ledger-line {
  display: flex;
  justify-content: space-between;
  color: #f8fafc;
  animation: fadeIn 0.2s ease;
}

.ledger-line.crit {
  color: #f59e0b;
  font-weight: 800;
}

.ledger-total {
  text-align: right;
  font-weight: 800;
  color: #38bdf8;
  border-top: 1px solid #334155;
  padding-top: 2px;
  margin-top: 2px;
}

/* Attack Dice Upgrades Section */
.attack-upgrades-section {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--bg-card-border);
}

.attack-upgrades-section h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 4px;
}

.attack-upgrades-section p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Descend Shards Badge in Decision Modal */
.descend-shards-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: #38bdf8;
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
  text-align: center;
}

/* Playback & Staged Visuals (Section 7) */
.enemy-lunge {
  animation: enemyLungeAnim 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes enemyLungeAnim {
  0% { transform: scale(1) translateY(0); }
  35% { transform: scale(1.3) translateY(12px); filter: brightness(1.8) drop-shadow(0 0 16px #ef4444); }
  70% { transform: scale(1.15) translateY(6px); }
  100% { transform: scale(1) translateY(0); }
}

.node-pop {
  animation: nodePopAnim 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes nodePopAnim {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.4); filter: brightness(2) drop-shadow(0 0 12px #f59e0b); }
  100% { transform: scale(0); opacity: 0; }
}

.boss-active-banner {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6366f1 100%);
  border: 2px solid #818cf8;
  border-radius: 10px;
  padding: 10px 24px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.7);
  text-align: center;
  z-index: var(--z-banners, 50);
  pointer-events: none;
  animation: bossBannerAnim 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bossBannerAnim {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

.overkill-banner {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 50%, #f87171 100%);
  border: 2px solid #fecaca;
  border-radius: 8px;
  padding: 6px 18px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 2px;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.8);
  z-index: var(--z-banners, 50);
  pointer-events: none;
  animation: overkillBannerAnim 0.8s ease-out forwards;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  z-index: var(--z-toast, 70);
  pointer-events: none;
}

@keyframes overkillBannerAnim {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}

.packet-flyer {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  font-family: monospace;
  font-weight: 900;
  font-size: 1.2rem;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 2px 4px #000;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wipe-beam-row {
  position: absolute;
  height: 6px;
  background: linear-gradient(90deg, transparent, #ffffff, #38bdf8, #ffffff, transparent);
  box-shadow: 0 0 16px #38bdf8, 0 0 30px #ffffff;
  pointer-events: none;
  z-index: 50;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  animation: wipeBeamRow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes wipeBeamRow {
  0% { transform: translateY(-50%) scaleX(0); opacity: 1; }
  50% { transform: translateY(-50%) scaleX(1); opacity: 1; }
  100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
}

.wipe-beam-col {
  position: absolute;
  width: 6px;
  background: linear-gradient(180deg, transparent, #ffffff, #38bdf8, #ffffff, transparent);
  box-shadow: 0 0 16px #38bdf8, 0 0 30px #ffffff;
  pointer-events: none;
  z-index: 50;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 100%;
  animation: wipeBeamCol 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes wipeBeamCol {
  0% { transform: translateX(-50%) scaleY(0); opacity: 1; }
  50% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  100% { transform: translateX(-50%) scaleY(1); opacity: 0; }
}

.bomb-shockwave {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #f59e0b;
  box-shadow: 0 0 20px #f59e0b, inset 0 0 15px #ef4444;
  pointer-events: none;
  z-index: 60;
  transform: translate(-50%, -50%);
  animation: shockwaveExpand 0.5s ease-out forwards;
}

@keyframes shockwaveExpand {
  0% { width: 10px; height: 10px; opacity: 1; border-width: 4px; }
  100% { width: 180px; height: 180px; opacity: 0; border-width: 1px; }
}



/* =========================================================================
   UPDATE 3 PHASE Q2: LIVE HEALTH BARS (GHOST, PREVIEW, TICKS, COLORS)
   ========================================================================= */
.hpbar-container {
  position: relative;
  overflow: hidden;
}

.hpbar-ghost {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #ff8a2b, #ff3d5a);
  opacity: 0.78;
  z-index: 1;
  pointer-events: none;
}

.hpbar-ghost.ghost-heal {
  background: linear-gradient(90deg, #10b981, #34d17a);
  opacity: 0.85;
}

.hpbar-fill {
  position: relative;
  height: 100%;
  z-index: 2;
  transition: background 0.2s ease;
}

.hpbar-fill.hp-green {
  background: linear-gradient(90deg, #10b981, #34d17a);
}

.hpbar-fill.hp-yellow {
  background: linear-gradient(90deg, #f59e0b, #ffcf33);
}

.hpbar-fill.hp-red {
  background: linear-gradient(90deg, #dc2626, #ff3d5a);
}

.hpbar-fill.hp-pulse {
  animation: hpLowPulse 0.65s ease-in-out infinite alternate;
}

.hpbar-fill.hp-secondwind-gold {
  background: linear-gradient(90deg, #f59e0b, #fde047) !important;
  box-shadow: 0 0 10px rgba(255, 207, 51, 0.9);
}

@keyframes hpLowPulse {
  from { filter: brightness(0.95); }
  to { filter: brightness(1.38); }
}

.hpbar-preview {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 3;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 207, 51, 0.82),
    rgba(255, 207, 51, 0.82) 5px,
    rgba(255, 61, 90, 0.78) 5px,
    rgba(255, 61, 90, 0.78) 10px
  );
  border-left: 1px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: visible;
}

.hpbar-preview-label {
  font-size: 9px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
  padding: 0 3px;
  letter-spacing: 0.2px;
}

.hpbar-incoming {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 3;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 61, 90, 0.65),
    rgba(255, 61, 90, 0.65) 4px,
    rgba(255, 255, 255, 0.25) 4px,
    rgba(255, 255, 255, 0.25) 8px
  );
  border-left: 1px dashed #ffcf33;
  pointer-events: none;
}

.hpbar-ticks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hpbar-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: rgba(11, 13, 24, 0.85);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.35);
}

.boss-strip-hp-bg {
  width: 48px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.boss-strip-hp-text {
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================================================================
   UPDATE 3 PHASE Q4: STORE REDESIGN
   ========================================================================= */
#screen-upgrades {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
}

#screen-upgrades.hidden {
  display: none !important;
}

.store-header {
  flex-shrink: 0;
  margin-bottom: 0;
}

.store-header-titles {
  display: flex;
  flex-direction: column;
}

.store-header-titles h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0.8px;
}

.store-tagline {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.store-currency-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(15, 20, 38, 0.92);
  border: 1px solid rgba(255, 207, 51, 0.25);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
}

.store-controls-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.store-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  background: #0d1222;
  padding: 4px;
  border-radius: 10px;
  border: 1.5px solid #232c47;
}

.store-tab {
  min-height: 44px;
  padding: 6px 3px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.15s ease;
}

.store-tab:active {
  transform: scale(0.96);
}

.store-tab.active {
  background: linear-gradient(135deg, #1e2844 0%, #29365c 100%);
  color: #ffcf33;
  border: 1px solid rgba(255, 207, 51, 0.45);
  box-shadow: 0 2px 10px rgba(255, 207, 51, 0.25);
}

.store-buy-selector {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.buy-amt-btn {
  min-width: 48px;
  min-height: 38px;
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #cbd5e1;
  background: #13192e;
  border: 1px solid #2d3859;
  border-radius: 6px;
  cursor: pointer;
}

.buy-amt-btn.active {
  background: rgba(255, 207, 51, 0.18);
  border-color: #ffcf33;
  color: #ffcf33;
}

.store-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-tab-panel.hidden {
  display: none !important;
}

.store-card {
  position: relative;
  background: #12172a;
  border: 1.5px solid #2b3554;
  border-radius: 10px;
  padding: 9px 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.store-card.tier-common { border-color: #475569; }
.store-card.tier-rare { border-color: #3da5ff; }
.store-card.tier-epic { border-color: #a45bff; }
.store-card.tier-legendary { border-color: #ffcf33; }
.store-card.tier-max { border-color: #34d17a; }

.store-card.card-affordable {
  box-shadow: 0 0 12px rgba(52, 209, 122, 0.18);
}

.store-card.card-cheapest {
  border-color: #34d17a;
  box-shadow: 0 0 14px rgba(52, 209, 122, 0.35);
}

.store-card.card-pulse {
  animation: storeCardPulse 0.42s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes storeCardPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.03); filter: brightness(1.3); }
  100% { transform: scale(1); }
}

.store-svg-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-svg-icon svg {
  width: 38px;
  height: 38px;
}

.store-lvl-badge {
  font-size: 0.7rem;
  font-weight: 800;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.75);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-variant-numeric: tabular-nums;
}

.store-seg-bar {
  display: none !important;
}

.store-seg-block {
  background: #090d18;
  border: 1px solid #242f4d;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.store-seg-block.filled {
  background: linear-gradient(90deg, #10b981, #34d17a);
  border-color: #34d17a;
}

.store-seg-block.partial::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--seg-fill, 50%);
  background: #ffcf33;
}

.store-preview-line {
  font-size: 0.74rem;
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 4px;
}

.store-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.store-cost-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 207, 51, 0.14);
  border: 1px solid rgba(255, 207, 51, 0.4);
  color: #fde047;
}

.cost-chip.shard-chip {
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.45);
  color: #38bdf8;
}

.cost-chip.missing {
  background: rgba(255, 61, 90, 0.16) !important;
  border-color: #ff3d5a !important;
  color: #ff8597 !important;
}

.cost-chip.max-chip {
  background: rgba(52, 209, 122, 0.16);
  border-color: #34d17a;
  color: #34d17a;
}

.store-odds-panel {
  background: rgba(13, 18, 34, 0.9);
  border: 1px solid #263252;
  border-radius: 10px;
  padding: 8px 10px;
}

.store-odds-title {
  font-size: 0.68rem;
  font-weight: 900;
  color: #ffcf33;
  letter-spacing: 0.6px;
  margin-bottom: 5px;
}

.store-odds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 0.72rem;
  color: #cbd5e1;
}

.odds-preview-item {
  display: flex;
  justify-content: space-between;
}

.odds-preview-wide {
  grid-column: 1 / -1;
  border-top: 1px solid #1e293b;
  padding-top: 4px;
  margin-top: 2px;
}

.store-note {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.store-ac-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 8px 0;
  padding: 8px;
  background: rgba(9, 13, 24, 0.65);
  border-radius: 8px;
  font-size: 0.76rem;
}

.ac-stat-row {
  display: flex;
  justify-content: space-between;
}

.rebirth-rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0;
}

.rebirth-rule-box {
  background: rgba(9, 13, 24, 0.7);
  border: 1px solid #293452;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.7rem;
}

.rebirth-rule-box.reset-box { border-color: rgba(255, 61, 90, 0.45); }
.rebirth-rule-box.keep-box { border-color: rgba(52, 209, 122, 0.45); }

.rule-box-title {
  font-weight: 900;
  font-size: 0.66rem;
  margin-bottom: 4px;
  color: #f8fafc;
}

.rebirth-rule-box ul {
  margin: 0;
  padding-left: 14px;
  color: #cbd5e1;
}

.menu-store-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.65rem;
  font-weight: 900;
  background: #34d17a;
  color: #062814;
  border-radius: 999px;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(52, 209, 122, 0.7);
}

.modal-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* =========================================================================
   UPDATE 3 PHASE Q5: PAYOUT & SUMMARY RECEIPT REDESIGN
   ========================================================================= */
#screen-summary {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 10px 12px;
}

#screen-summary.hidden {
  display: none !important;
}

.receipt-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 12px;
  gap: 8px;
  background: linear-gradient(180deg, #13182b 0%, #0d1120 100%);
  border: 1.5px solid #2b3658;
  border-radius: 12px;
}

.receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed #2e3b5e;
  padding-bottom: 8px;
}

.receipt-banner-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.receipt-headline {
  font-size: 1.25rem !important;
  font-weight: 900;
  margin: 0 !important;
  letter-spacing: 0.8px;
}

#screen-summary .summary-tag {
  display: none;
}

.receipt-subline {
  font-size: 0.78rem;
  color: #94a3b8;
}

.receipt-grade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.grade-badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  font-weight: 900;
  border: 2px solid #475569;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.grade-badge.grade-s {
  background: linear-gradient(135deg, #f59e0b, #fde047);
  color: #1e1b04;
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(255, 207, 51, 0.75);
}

.grade-badge.grade-a {
  background: linear-gradient(135deg, #10b981, #34d17a);
  color: #052614;
  border-color: #86f0b4;
}

.grade-badge.grade-b {
  background: linear-gradient(135deg, #2563eb, #3da5ff);
  color: #ffffff;
  border-color: #93c5fd;
}

.grade-badge.grade-c {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  color: #0f172a;
  border-color: #cbd5e1;
}

.grade-badge.grade-d {
  background: linear-gradient(135deg, #991b1b, #ff3d5a);
  color: #ffffff;
  border-color: #fca5a5;
}

.btn-summary-skip {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 8px;
  min-height: 24px;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 6px;
  cursor: pointer;
}

.summary-floor-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 0.85rem;
  padding: 4px 6px;
  background: rgba(9, 13, 24, 0.7);
  border-radius: 6px;
  min-height: 26px;
  align-items: center;
}

.summary-records-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.record-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(255, 207, 51, 0.18);
  border: 1px solid rgba(255, 207, 51, 0.55);
  color: #fde047;
}

.receipt-lines-box {
  padding: 8px 10px !important;
  gap: 4px !important;
  background: rgba(9, 13, 24, 0.75) !important;
  border: 1px solid #232d4b !important;
  font-variant-numeric: tabular-nums;
}

.receipt-line {
  font-size: 0.76rem !important;
  padding: 2px 0 !important;
}

.receipt-net-row {
  border-top: 1px dashed #334155;
  margin-top: 4px;
  padding-top: 6px !important;
  font-size: 0.92rem !important;
  font-weight: 900;
}

.receipt-net-val.net-profit {
  color: #34d17a;
  text-shadow: 0 0 10px rgba(52, 209, 122, 0.45);
}

.receipt-net-val.net-loss {
  color: #ff3d5a;
}

.summary-mini-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid #232d4b;
  border-radius: 8px;
  padding: 5px 4px;
  text-align: center;
}

.mini-stat-box {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mini-stat-box span {
  font-size: 0.58rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.mini-stat-box b {
  font-size: 0.72rem;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}

#screen-summary .share-card-preview {
  font-size: 0.68rem;
  padding: 6px 8px;
  max-height: 68px;
  overflow-y: auto;
}

.receipt-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px !important;
  margin-top: auto;
}

.receipt-actions-grid .btn {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 0.75rem;
}

/* =========================================================================
   UPDATE 3 PHASE Q6: QUALITY-OF-LIFE, RECORDS, HELP, PAUSE, COLORBLIND, A11Y
   ========================================================================= */

/* 1. Colorblind Gem Symbols & Ice Edges */
.cb-glyph {
  display: none;
  pointer-events: none;
}

body.colorblind-mode .cb-glyph {
  display: block;
}

body.colorblind-mode .sprite-tile.is-frozen .ice-block {
  border: 2.5px dashed #ffffff;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(120, 210, 255, 0.35),
    rgba(120, 210, 255, 0.35) 5px,
    rgba(255, 255, 255, 0.5) 5px,
    rgba(255, 255, 255, 0.5) 10px
  );
}

/* 2. Large Text Mode */
body.text-large {
  font-size: 108%;
}

body.text-large .odds-note,
body.text-large .store-note,
body.text-large .store-preview-line,
body.text-large .receipt-line {
  font-size: 0.85rem !important;
}

/* 3. Idle Move Hint Pulse */
.sprite-tile.hint-pulse svg {
  animation: hintTilePulse 0.9s ease-in-out infinite alternate;
}

@keyframes hintTilePulse {
  from {
    filter: brightness(1) drop-shadow(0 0 2px rgba(255, 207, 51, 0.4));
  }
  to {
    filter: brightness(1.45) drop-shadow(0 0 12px rgba(255, 207, 51, 0.95));
  }
}

/* 4. Menu Secondary Grid */
.menu-secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.menu-secondary-grid .btn {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

/* 5. Records Screen (#screen-records) */
#screen-records {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 10px 12px;
  gap: 8px;
}

#screen-records.hidden {
  display: none !important;
}

.records-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.records-section-title {
  font-size: 0.72rem;
  font-weight: 900;
  color: #ffcf33;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

.records-lifetime-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.records-actions-2x1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 12px 0;
}

.record-stat-card {
  background: #12172a;
  border: 1px solid #283352;
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}

.record-stat-card span {
  font-size: 0.72rem;
  color: #94a3b8;
}

.record-stat-card b {
  font-size: 0.85rem;
  color: #f8fafc;
}

.records-history-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #12172a;
  border: 1px solid #232d4b;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

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

.history-meta {
  color: #94a3b8;
  font-size: 0.7rem;
}

.history-right {
  font-weight: 800;
}

.grade-badge.grade-sm {
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  border-radius: 6px;
  border-width: 1.5px;
}

/* 6. Pause, Help & Settings Modals */
.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.pause-actions .btn {
  min-height: 42px;
}

.help-modal-card,
.settings-modal-card {
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.help-glossary-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
}

.glossary-subhead {
  font-size: 0.68rem;
  font-weight: 900;
  color: #ffcf33;
  letter-spacing: 0.8px;
  margin-top: 4px;
}

.glossary-item {
  background: rgba(9, 13, 24, 0.7);
  border: 1px solid #242f4d;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
}

.glossary-title {
  color: #f8fafc;
  margin-bottom: 2px;
}

.glossary-desc {
  color: #cbd5e1;
  font-size: 0.69rem;
  line-height: 1.3;
}

.settings-now-playing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid #283454;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.75rem;
  color: #cbd5e1;
}

.settings-now-playing b {
  color: #ffcf33;
  text-transform: uppercase;
}

.settings-divider {
  height: 1px;
  background: #232d4b;
  margin: 4px 0;
}

.save-export-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.save-io-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 76px;
  font-family: monospace;
  font-size: 0.68rem !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  background: #090d18 !important;
  border: 1px solid #2a3659 !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
  resize: none;
}

.save-io-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.save-io-buttons .btn {
  min-height: 40px;
  font-size: 0.72rem;
  padding: 6px 8px;
}

/* 7. First-Run Coach Marks Overlay */
.coach-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-modals, 60);
  background: rgba(6, 9, 18, 0.68);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px 76px;
}

.coach-overlay.hidden {
  display: none !important;
}

.coach-card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #171f38 0%, #0f1426 100%);
  border: 2px solid #ffcf33;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 207, 51, 0.3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coach-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coach-step-badge {
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ffcf33;
  color: #1a1504;
}

.coach-title {
  font-size: 0.9rem;
  color: #ffffff;
}

.coach-text {
  font-size: 0.78rem;
  color: #cbd5e1;
  margin: 0;
  line-height: 1.38;
}

.coach-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.coach-actions .btn {
  min-height: 40px;
  min-width: 88px;
}

/* 8. FPS Badge & Toast */
.fps-badge {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: var(--z-toast, 70);
  background: rgba(9, 13, 24, 0.85);
  border: 1px solid #334155;
  color: #34d17a;
  font-family: monospace;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  pointer-events: none;
}

.jc-toast {
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-toast, 70);
  background: #151c33;
  border: 1.5px solid #3da5ff;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.jc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.jc-toast.toast-warn {
  border-color: #ffcf33;
  color: #fde047;
}

.jc-toast.toast-error {
  border-color: #ff3d5a;
  color: #ff8597;
}

.jc-toast.toast-success {
  border-color: #34d17a;
  color: #86f0b4;
}

/* 9. Accessibility Focus Outlines & Tabular Numerals */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid #ffcf33 !important;
  outline-offset: 2px !important;
}

.gold-text,
.shards-text,
.enemy-hp-num,
.player-card-hp-text,
.attack-count-num {
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   CUTSCENE SYSTEM (js/cutsceene.js)
   1. Elevator Floor Descent Cutscene
   2. Rebirth Ascension Cutscene
   ============================================================= */

.cutscene-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(4, 6, 12, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

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

.cutscene-overlay.fade-out {
  opacity: 0;
}

/* 1. FLOOR DESCENT CUTSCENE */
.descent-viewport {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  overflow: hidden;
}

/* Vertical Speed Lines Moving Up */
.descent-speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.streak {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.7), transparent);
  animation: streakDrop 0.4s linear infinite;
}

.streak-1 { left: 15%; height: 90px; animation-delay: 0s; }
.streak-2 { left: 35%; height: 140px; animation-delay: 0.15s; }
.streak-3 { left: 52%; height: 110px; animation-delay: 0.25s; }
.streak-4 { left: 70%; height: 160px; animation-delay: 0.08s; }
.streak-5 { left: 88%; height: 80px; animation-delay: 0.18s; }
.streak-6 { left: 95%; height: 120px; animation-delay: 0.3s; }

@keyframes streakDrop {
  0% { transform: translateY(500px); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-300px); opacity: 0; }
}

.descent-cage-wrap {
  position: relative;
  width: 220px;
  height: 200px;
  margin-bottom: 24px;
  animation: cageBob 0.6s ease-in-out infinite alternate;
}

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

.descent-elevator-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 28px rgba(56, 189, 248, 0.35));
}

.anim-cable {
  animation: cableSlide 0.35s linear infinite;
}

@keyframes cableSlide {
  0% { stroke-dashoffset: 0; stroke-dasharray: 8 6; }
  100% { stroke-dashoffset: -14; stroke-dasharray: 8 6; }
}

.anim-shaft-rail {
  animation: railSlide 0.25s linear infinite;
}

@keyframes railSlide {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -10; }
}

.anim-thruster-glow {
  animation: thrusterFlicker 0.15s ease-in-out infinite alternate;
}

@keyframes thrusterFlicker {
  0% { opacity: 0.25; transform: scale(0.95); }
  100% { opacity: 0.7; transform: scale(1.05); }
}

.descent-telemetry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

.descent-subhead {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: #38bdf8;
  text-transform: uppercase;
}

.descent-floors {
  display: flex;
  align-items: center;
  gap: 14px;
}

.floor-pill {
  font-size: 1.15rem;
  font-weight: 900;
  padding: 6px 14px;
  border-radius: 8px;
  background: #111827;
  border: 1px solid #374151;
  color: #94a3b8;
}

.floor-pill.next-floor {
  background: #0369a1;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4);
}

.descent-arrow {
  color: #38bdf8;
  font-size: 1.3rem;
  animation: arrowPulse 0.5s ease-in-out infinite alternate;
}

@keyframes arrowPulse {
  0% { transform: translateX(-3px); }
  100% { transform: translateX(3px); }
}

.descent-depth-counter {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 1px;
}

/* Boss Warning Styling */
.is-boss-descent {
  box-shadow: inset 0 0 60px rgba(239, 68, 68, 0.25);
}

.descent-boss-warning {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.hazard-stripe {
  height: 6px;
  width: 100%;
  background: repeating-linear-gradient(45deg, #ef4444, #ef4444 10px, #18181b 10px, #18181b 20px);
  border-radius: 2px;
}

.hazard-text {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ef4444;
  animation: sirenFlash 0.5s ease-in-out infinite alternate;
}

@keyframes sirenFlash {
  0% { opacity: 0.6; }
  100% { opacity: 1; text-shadow: 0 0 12px rgba(239, 68, 68, 0.8); }
}

/* 2. REBIRTH ASCENSION CUTSCENE */
.rebirth-viewport {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  overflow: hidden;
}

.rebirth-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ember {
  position: absolute;
  font-size: 1.1rem;
  opacity: 0;
  animation: emberRise 1.8s ease-out infinite;
}

.ember-1 { left: 20%; animation-delay: 0.1s; }
.ember-2 { left: 35%; animation-delay: 0.4s; }
.ember-3 { left: 50%; animation-delay: 0.2s; }
.ember-4 { left: 65%; animation-delay: 0.7s; }
.ember-5 { left: 80%; animation-delay: 0.3s; }
.ember-6 { left: 90%; animation-delay: 0.6s; }

@keyframes emberRise {
  0% { transform: translateY(400px) scale(0.6); opacity: 0; }
  40% { opacity: 0.9; }
  100% { transform: translateY(-120px) scale(1.2); opacity: 0; }
}

.rebirth-monolith-wrap {
  position: relative;
  width: 280px;
  height: 240px;
  margin-bottom: 12px;
}

.monolith-aura {
  position: absolute;
  inset: 15% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 75%);
  filter: blur(20px);
  animation: auraPulse 2.4s ease-in-out infinite alternate;
}

@keyframes auraPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

.rebirth-monolith-svg {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 32px rgba(168, 85, 247, 0.45));
}

.anim-light-beam {
  animation: beamSweep 1.8s ease-in-out infinite alternate;
}

@keyframes beamSweep {
  0% { opacity: 0.4; transform: scaleX(0.85); }
  100% { opacity: 0.9; transform: scaleX(1.1); }
}

.anim-floating-obelisk {
  animation: obeliskLevitate 2.2s ease-in-out infinite alternate;
}

@keyframes obeliskLevitate {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

.anim-soul-pulse {
  animation: corePulse 1s ease-in-out infinite alternate;
}

@keyframes corePulse {
  0% { r: 8px; }
  100% { r: 11px; fill: #fb7185; }
}

.anim-ring-spin {
  transform-origin: 160px 180px;
  animation: ringSpin 6s linear infinite;
}

.anim-ring-spin-rev {
  transform-origin: 160px 180px;
  animation: ringSpinRev 8s linear infinite;
}

@keyframes ringSpin {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 40; }
}

@keyframes ringSpinRev {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

.rebirth-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.rebirth-badge {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: #e879f9;
  text-transform: uppercase;
}

.rebirth-title {
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 0 20px rgba(192, 132, 252, 0.6);
}

.rebirth-chips-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(36, 12, 66, 0.7);
  border: 2px solid #a855f7;
  border-radius: 14px;
  padding: 10px 22px;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.35);
}

.chips-icon {
  font-size: 1.8rem;
}

.chips-count {
  font-size: 2.2rem;
  font-weight: 900;
  color: #f0abfc;
  text-shadow: 0 0 16px rgba(240, 171, 252, 0.8);
  min-width: 60px;
}

.chips-count.pop-finish {
  animation: chipBounce 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes chipBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.chips-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: #c084fc;
  letter-spacing: 1px;
}

.rebirth-perk-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  padding: 10px 18px;
  max-width: 340px;
}

.perk-highlight {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #facc15;
}

.perk-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin-top: 3px;
}

.rebirth-continue-btn {
  margin-top: 8px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.45);
  animation: btnPulse 1.4s ease-in-out infinite alternate;
}

@keyframes btnPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

/* =========================================================================
   MOBILE GAME OPTIMIZATIONS & ORIENTATION GUARD
   ========================================================================= */

.sprite-tile.active-press {
  z-index: 50 !important;
}

.sprite-tile.active-press .candy-svg {
  transform: scale(1.15) !important;
  filter: brightness(1.25) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75)) !important;
  transition: transform 0.08s ease, filter 0.08s ease;
}

.orientation-blocker {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 10, 15, 0.98);
  z-index: 99999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.orientation-card {
  background: #131722;
  border: 1.5px solid #ffcf33;
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 207, 51, 0.2);
}

.orientation-icon {
  font-size: 3rem;
  animation: rotateHint 2s infinite ease-in-out;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

@media screen and (orientation: landscape) and (max-height: 520px) {
  .orientation-blocker {
    display: flex !important;
  }
}

/* Touch active styles (eliminates sticky hover on mobile) */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .store-tab:hover,
  .crate-card:hover,
  .hero-card:hover {
    transform: none;
    filter: none;
    border-color: inherit;
  }
}

/* =========================================================================
   UNIVERSAL SCROLLBAR ELIMINATION (TASK 1)
   ========================================================================= */
*, *::before, *::after, html, body, #app, .screen, .modal-card, .modal-body-scroll, .store-scroll-body, .help-content, .settings-list, .odds-content, .records-content {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
*::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar, div::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* =========================================================================
   ENEMY CAROUSEL & VISUAL COMBAT (TASK 6)
   ========================================================================= */
.enemy-carousel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.carousel-wave-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  padding: 0 4px;
  position: relative;
}

.carousel-floor-badge {
  color: var(--primary-light, #38bdf8);
  letter-spacing: 0.05em;
}

.carousel-wave-badge {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
}

.carousel-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid var(--bg-card-border);
  border-radius: 10px;
  padding: 6px 10px;
  position: relative;
  overflow: visible;
}

.carousel-active-card {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.enemy-svg-stage {
  width: 58px;
  height: 58px;
  min-width: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.enemy-svg-stage .enemy-svg {
  width: 100%;
  height: 100%;
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
  transform-origin: center bottom;
  will-change: transform, filter;
}

/* Hurt Flash Overlay (Task 6: Simple Red Overlay) */
.enemy-svg-stage.is-hurt .enemy-svg {
  animation: enemy-hurt-overlay 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes enemy-hurt-overlay {
  0% {
    filter: brightness(1.7) saturate(2.5) drop-shadow(0 0 16px #ef4444);
    transform: scale(0.92);
  }
  30% {
    filter: brightness(1.4) saturate(2) drop-shadow(0 0 12px #ef4444);
    transform: scale(1.06);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}

/* Attack Lunge Forward (Task 6: Simple forward moving SVG) */
.enemy-svg-stage.is-attacking .enemy-svg {
  animation: enemy-attack-forward 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.3);
}
@keyframes enemy-attack-forward {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(18px) scale(1.12);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.enemy-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.carousel-upcoming {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.carousel-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1e293b;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.carousel-pill.pill-mini {
  border-color: #a855f7;
  background: #3b0764;
}
.carousel-pill.pill-boss {
  border-color: #eab308;
  background: #451a03;
}

/* =========================================================================
   DIFFICULTY CARDS & PILLS (TASK 4)
   ========================================================================= */
.diff-card {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  text-align: left;
}

.diff-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diff-card-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: #f8fafc;
}

.diff-card-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.diff-stats-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}

.diff-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
  text-align: center;
  white-space: nowrap;
}

.diff-pill.pill-hp {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}

.diff-pill.pill-dmg {
  color: #fb923c;
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
}

.diff-pill.pill-payout {
  color: #facc15;
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.3);
}

.diff-pill.pill-shards {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
}

.diff-card-extra {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* =========================================================================
   HELP MODAL QUICK NAV BAR (TASK 1)
   ========================================================================= */
.help-nav-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 10px;
  background: #090c15;
  border-bottom: 1px solid #1e293b;
  -webkit-overflow-scrolling: touch;
}

.help-nav-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.help-nav-btn.active {
  background: var(--gold-main);
  color: #000;
  border-color: var(--gold-glow);
  font-weight: 800;
}

/* =========================================================================
   CATEGORIZED SETTINGS & CENTERED BUTTONS (TASK 2)
   ========================================================================= */
.settings-group {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primary-light, #38bdf8);
  letter-spacing: 0.05em;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.save-io-buttons.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* =========================================================================
   BOSS & MINI-BOSS ENCOUNTER CUTSCENE SYSTEM
   ========================================================================= */
.boss-cutscene-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 20, 0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  user-select: none;
}

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

.boss-cutscene-overlay.fade-out {
  opacity: 0;
}

.boss-cutscene-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Theme Gradients */
.boss-cutscene-overlay.theme-blizzard {
  background: radial-gradient(circle at center, rgba(14, 116, 144, 0.88) 0%, rgba(6, 24, 44, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(56, 189, 248, 0.35);
}

.boss-cutscene-overlay.theme-infernal {
  background: radial-gradient(circle at center, rgba(194, 65, 12, 0.88) 0%, rgba(41, 10, 10, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(249, 115, 22, 0.35);
}

.boss-cutscene-overlay.theme-casino {
  background: radial-gradient(circle at center, rgba(180, 83, 9, 0.88) 0%, rgba(30, 22, 10, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(251, 191, 36, 0.35);
}

.boss-cutscene-overlay.theme-void {
  background: radial-gradient(circle at center, rgba(126, 34, 206, 0.88) 0%, rgba(15, 10, 30, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(168, 85, 247, 0.35);
}

.boss-cutscene-overlay.theme-venom {
  background: radial-gradient(circle at center, rgba(21, 128, 61, 0.88) 0%, rgba(6, 30, 18, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(16, 185, 129, 0.35);
}

.boss-cutscene-overlay.theme-earth {
  background: radial-gradient(circle at center, rgba(146, 64, 14, 0.88) 0%, rgba(28, 19, 12, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(234, 179, 8, 0.35);
}

.boss-cutscene-overlay.theme-dread {
  background: radial-gradient(circle at center, rgba(185, 28, 28, 0.88) 0%, rgba(28, 10, 10, 0.98) 100%);
  box-shadow: inset 0 0 100px rgba(239, 68, 68, 0.35);
}

/* Floating Particles */
.thematic-particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cutscene-float-particle {
  position: absolute;
  font-size: 1.4rem;
  opacity: 0.6;
  animation: cutsceneFloatUp infinite ease-in-out;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

@keyframes cutsceneFloatUp {
  0% {
    transform: translateY(20px) scale(0.7) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-80px) scale(1.1) rotate(45deg);
    opacity: 0;
  }
}

/* Content Container */
.boss-cutscene-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 90%;
  max-width: 360px;
  padding: 24px 18px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.85), 0 0 30px rgba(255, 255, 255, 0.08);
  animation: cutsceneContentPop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes cutsceneContentPop {
  0% {
    transform: scale(0.8) translateY(24px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Header & Badges */
.boss-cutscene-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.is-boss-fight .boss-cutscene-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid #f87171;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.65);
}

.is-miniboss-fight .boss-cutscene-badge {
  background: linear-gradient(135deg, #a855f7, #7e22ce);
  color: #fff;
  border: 1px solid #c084fc;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.65);
}

.boss-cutscene-theme-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.boss-cutscene-theme-subtitle {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.3;
}

/* Avatar Aura & Stage */
.boss-cutscene-avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.boss-cutscene-aura {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(239, 68, 68, 0.4)) 0%, transparent 70%);
  animation: cutsceneAuraPulse 1.8s ease-in-out infinite alternate;
}

@keyframes cutsceneAuraPulse {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.15); opacity: 1; }
}

.boss-cutscene-svg-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85));
}

.boss-cutscene-svg-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Details & Ability Pills */
.boss-cutscene-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.boss-cutscene-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px #000;
}

.boss-cutscene-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  color: #e2e8f0;
  max-width: 100%;
}

.boss-cutscene-skill-pill .pill-badge {
  font-size: 0.62rem;
  font-weight: 900;
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 2px 5px;
  border-radius: 4px;
}

.boss-cutscene-skill-pill .pill-name {
  font-weight: 800;
  color: #fde047;
}

.boss-cutscene-ward-notice {
  font-size: 0.7rem;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 2px;
}

.btn-skip-cutscene {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.btn-skip-cutscene:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   PHASE 2 ACHIEVER STYLES & SYMMETRICAL GRIDS (Global Symmetry Law)
   ========================================================================== */

/* Special Combat Callout Banners */
.callout-banner {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 15, 29, 0.94);
  border: 2px solid #ffcf33;
  border-radius: 999px;
  padding: 8px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: var(--z-banners, 50);
  animation: banner-pop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Category grid for Achievements: 3x2 symmetrical grid */
.achieve-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
}

.achieve-cat-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.achieve-cat-btn.active {
  background: #f59e0b;
  color: #0f172a;
  border-color: #fbbf24;
  font-weight: 900;
}

.achieve-progress-banner {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: #94a3b8;
}

.achieve-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 52vh;
  overflow-y: auto;
}

.achieve-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 12px;
}

.achieve-card.unlocked {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), #1e293b);
}

.achieve-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.achieve-card-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f8fafc;
}

.achieve-card-desc {
  font-size: 0.72rem;
  color: #94a3b8;
}

.achieve-card-reward {
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffcf33;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 7-Day Login Streak Calendar */
.streak-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  width: 100%;
  margin: 10px 0 14px;
}

.streak-day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 2px;
  gap: 4px;
  font-size: 0.65rem;
  color: #94a3b8;
}

.streak-day-card.claimed {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

.streak-day-card.today {
  border-color: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.streak-freeze-pill {
  font-size: 0.72rem;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Daily Quests List */
.quests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.quest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 12px;
}

.quest-card-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.quest-card-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f8fafc;
}

.quest-card-progress {
  font-size: 0.7rem;
  color: #94a3b8;
}

/* Symmetrical 2x2 Equipment Grid (Global Symmetry Law) */
.equipment-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
}

.equip-slot-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  min-height: 64px;
}

.equip-slot-card.has-item {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), #1e293b);
}

.slot-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #64748b;
}

.slot-icon {
  font-size: 1.5rem;
}

.slot-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.slot-item-name {
  font-size: 0.8rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-stat {
  font-size: 0.68rem;
  color: #38bdf8;
}

/* Inventory Item Grid */
.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-height: 40vh;
  overflow-y: auto;
}

.inventory-item-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.inventory-item-card.rarity-uncommon { border-color: #22c55e; }
.inventory-item-card.rarity-rare { border-color: #38bdf8; }
.inventory-item-card.rarity-epic { border-color: #a855f7; }
.inventory-item-card.rarity-legendary { border-color: #fbbf24; }

.inventory-item-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #f8fafc;
}

.inventory-item-affix {
  font-size: 0.68rem;
  color: #94a3b8;
}

.inventory-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}

.inventory-item-actions .btn {
  padding: 4px 6px;
  font-size: 0.65rem;
  min-height: 28px;
}

/* Store Tabs 6-item Grid */
.store-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
}

/* ==========================================================================
   HERO BADGES & AVATARS (Phase 4 Explorer Heroes)
   ========================================================================== */
.alchemist-badge {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
}
.rogue-badge {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid #8b5cf6;
  color: #c084fc;
}
.cleric-badge {
  background: rgba(250, 204, 21, 0.2);
  border: 1px solid #facc15;
  color: #fde047;
}

/* ==========================================================================
   AREA THEMES & PARALLAX BACKGROUNDS (Phase 3 Presentation)
   ========================================================================== */
.area-theme-lobby {
  background: radial-gradient(circle at 50% 20%, rgba(56, 189, 248, 0.08) 0%, transparent 60%), #090a0f !important;
}
.area-theme-vault {
  background: radial-gradient(circle at 50% 20%, rgba(251, 191, 36, 0.09) 0%, transparent 60%), #090a0f !important;
}
.area-theme-cellar {
  background: radial-gradient(circle at 50% 20%, rgba(103, 232, 249, 0.1) 0%, transparent 60%), #070b14 !important;
}
.area-theme-foundry {
  background: radial-gradient(circle at 50% 20%, rgba(249, 115, 22, 0.1) 0%, transparent 60%), #110805 !important;
}
.area-theme-void {
  background: radial-gradient(circle at 50% 20%, rgba(192, 132, 252, 0.1) 0%, transparent 60%), #090611 !important;
}
.area-theme-penthouse {
  background: radial-gradient(circle at 50% 20%, rgba(244, 63, 94, 0.1) 0%, transparent 60%), #0f060a !important;
}

/* ==========================================================================
   MODAL: CHEAT SANDBOX (Global Symmetry Law: 2x2 Grid)
   ========================================================================== */
.cheats-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}
.cheats-grid-2x2 .btn {
  padding: 12px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
}

/* ==========================================================================
   MODAL: LOCAL-FIRST LEADERBOARD (Hall of Fame)
   ========================================================================== */
.leaderboard-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
}
.leaderboard-tab-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.leaderboard-tab-btn.active {
  background: #f59e0b;
  color: #0f172a;
  border-color: #fbbf24;
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
}
.leaderboard-row.is-player {
  border-color: #38bdf8;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), #0f172a);
}
.leaderboard-rank {
  font-weight: 900;
  min-width: 24px;
  color: #94a3b8;
}
.leaderboard-row:nth-child(1) .leaderboard-rank { color: #fbbf24; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #94a3b8; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #d97706; }
.leaderboard-name {
  font-weight: 800;
  color: #f8fafc;
  flex: 1;
  margin-left: 8px;
}
.leaderboard-score {
  font-weight: 800;
  color: #ffcf33;
}

/* ==========================================================================
   MODAL: PLAYER PROFILE (Global Symmetry Law: 2x2 Grids)
   ========================================================================== */
.profile-card-display {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 14px;
}
.profile-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.profile-avatar-box svg {
  width: 38px;
  height: 38px;
}
.profile-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-title-col h3 {
  font-size: 1rem;
  font-weight: 900;
  margin: 0;
  color: #f8fafc;
}
.profile-title-badge {
  font-size: 0.72rem;
  color: #38bdf8;
}
.profile-gear-showcase-2x2,
.profile-stats-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.profile-gear-slot,
.prof-stat-box {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-gear-slot .slot-tag,
.prof-stat-box span {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.profile-gear-slot b,
.prof-stat-box b {
  font-size: 0.8rem;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   MODAL: DUNGEON EVENTS (Symmetrical 2-Column Choices)
   ========================================================================== */
.event-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 10px 0;
}
.event-icon {
  font-size: 2.4rem;
}
.event-desc {
  font-size: 0.85rem;
  color: #cbd5e1;
  margin: 0;
}
.event-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}
.event-option-btn {
  padding: 12px 8px;
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==========================================================================
   CREDIT BUTTON & MODAL
   ========================================================================== */
.btn-menu-credit {
  grid-column: span 2;
  letter-spacing: 0.06em;
  font-weight: 800;
  border-color: #334155;
  background: #1e293b;
  color: #94a3b8;
  transition: all 0.2s ease;
}
.btn-menu-credit:hover {
  background: #273549;
  border-color: #f59e0b;
  color: #f8fafc;
}

.credit-modal-card {
  max-width: 360px;
  width: 90%;
  text-align: center;
}

.credit-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 10px 0 4px;
}

.credit-card {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.credit-icon {
  font-size: 2.2rem;
}

.credit-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font-size: 0.85rem;
  color: #f8fafc;
}

.credit-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: #182234;
  border-radius: 6px;
}

.credit-line span {
  color: #94a3b8;
  font-weight: 700;
}

.credit-line b {
  color: #ffcf33;
  font-weight: 800;
}

/* ==========================================================================
   ACHIEVEMENTS CLAIM ALL & BADGES (QoL Update)
   ========================================================================== */
.achieve-claim-all-bar {
  margin: 6px 0 10px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.btn-claim-all {
  width: 100%;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 14px;
}
.btn-claim-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.achieve-claimed-badge {
  font-size: 0.72rem;
  color: #34d17a;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(52, 209, 122, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(52, 209, 122, 0.3);
}
.achieve-locked-badge {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(100, 116, 139, 0.12);
  border-radius: 4px;
}
.achieve-card.claimable {
  border-color: #ffcf33;
  box-shadow: 0 0 10px rgba(255, 207, 51, 0.2);
}
.badge-dot {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 16px;
  color: #0b0f19;
  background: #34d17a;
  border-radius: 8px;
  text-align: center;
  margin-left: 4px;
  vertical-align: middle;
}