/* =========================================================
   Arcade Ticketeer - Authentic Retro Pixel Art UI System
   8-Bit / 16-Bit Arcade Cabinet & JRPG Window Styling
   ========================================================= */

/* === [SNIPPET: Root Variables & Arcade Cabinet Palette] === */
:root {
  /* Dynamic UI Scale Variable (Configured via Settings Modal) */
  --ui-scale: 0.9;

  /* Flat 8-Bit / 16-Bit Arcade Cabinet Color Palette */
  --pixel-black: #000000;
  --pixel-darkest: #0a0814;
  --pixel-dark: #141122;
  --pixel-panel: #201b33;
  --pixel-card: #2b2544;
  --pixel-card-border: #3d355e;
  
  /* Primary Solid Pixel Accent Colors (NO GRADIENTS) */
  --pixel-gold: #ffcc00;
  --pixel-gold-dark: #b38f00;
  --pixel-cyan: #00f0ff;
  --pixel-cyan-dark: #0099a3;
  --pixel-pink: #ff2a85;
  --pixel-pink-dark: #a31250;
  --pixel-purple: #9d4edd;
  --pixel-purple-dark: #5a189a;
  --pixel-green: #00e676;
  --pixel-green-dark: #008f47;
  --pixel-red: #ff2252;
  --pixel-red-dark: #990f2e;
  --pixel-white: #ffffff;
  --pixel-cream: #fff9e6;
  --pixel-gray: #827b9c;
  --pixel-light-gray: #b8b2cf;

  /* === [SNIPPET: Pixel Art Typography & Text Colors] === */
/* Typography */
  --font-pixel: 'Press Start 2P', monospace;
  --font-pixel-sub: 'Silkscreen', monospace;
  --font-main: 'Press Start 2P', monospace;
  --font-body: 'Silkscreen', monospace;
  --font-mono: 'Press Start 2P', monospace;

  /* Text Colors */
  --text-main: #ffffff;
  --text-muted: #9d95be;
  --text-dark: #000000;

  /* === [SNIPPET: Hard Pixel Shadow Utilities] === */
/* Hard Pixel Shadows (Zero Blur) */
  --pixel-shadow-sm: 2px 2px 0 var(--pixel-black);
  --pixel-shadow-md: 3px 3px 0 var(--pixel-black);
  --pixel-shadow-lg: 4px 4px 0 var(--pixel-black);
  --pixel-shadow-xl: 6px 6px 0 var(--pixel-black);
}

/* Universal Pixel Reset: No rounded corners anywhere */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0 !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Suppress default browser focus rings on mouse/touch clicks without breaking intentional CSS outlines */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--pixel-darkest);
  font-family: var(--font-pixel-sub);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-smooth: never;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* =========================================================
   Master Screen Container (Viewport)
   ========================================================= */
/* === [SNIPPET: Master Screen Container & Viewport Geometry] === */
.game-viewport {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--pixel-dark);
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Fullscreen Responsive Game Container with Edge-to-Edge Canvas */
.canvas-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--pixel-darkest);
  overflow: hidden;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* =========================================================
   Arcade Persistent Sidebar System (Left or Right)
   Floating cleanly within curved screen safety zones over fullscreen canvas
   ========================================================= */
/* === [SNIPPET: Persistent Sidebar Layout & Positioning] === */
.arcade-sidebar {
  position: absolute;
  width: 216px;
  min-width: 216px;
  max-width: 216px;
  top: max(10px, env(safe-area-inset-top, 10px));
  bottom: max(10px, env(safe-area-inset-bottom, 10px));
  /* The rounded cabinet frame (outline, drop shadow, bevel, opaque panel) is drawn by .sidebar-frame layers, see
     [SNIPPET: Sidebar Cabinet Frame] in css/components.css. No backdrop-filter: re-blurring the animated playfield
     every frame cost GPU time on phones. Padding keeps content inside the frame (frame is 6px left/top, 9px right/bottom). */
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
  padding: 14px 18px 16px 15px;
  box-sizing: border-box;
  zoom: var(--ui-scale, 1);
  overflow: hidden;
}

.canvas-wrapper.sidebar-right .arcade-sidebar {
  right: max(48px, env(safe-area-inset-right, 48px));
  left: auto;
}

.canvas-wrapper.sidebar-left .arcade-sidebar {
  left: max(48px, env(safe-area-inset-left, 48px));
  right: auto;
}

.canvas-wrapper.hide-sidebar .arcade-sidebar {
  display: none !important;
}
.canvas-wrapper.hide-sidebar .game-view-area {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* === [SNIPPET: Cabinet Backdrop Atmosphere] === */
/* Gamemode Background & Cabinet Atmosphere (Green Theme for Coin Flip) */
body[data-game-mode="coin_flip"],
.game-viewport[data-game-mode="coin_flip"] {
  background-color: #041209;
}

.canvas-wrapper[data-game-mode="coin_flip"] {
  background-color: #041209;
}

/* Safety Zone Awareness for In-Game Overlays over Fullscreen Canvas */

/* Top HUD cards (CHALLENGE, BALLS, LUCKY RUSH) are placed in their frame tabs by js/ui/playfield_frame.js */

/* === [SNIPPET: Mystic Cup Upper-Left Back Button] === */
.btn-endgame-back {
  position: absolute;
  top: calc((var(--playfield-y, 0px) + 16px * var(--playfield-scale, 1)) / var(--ui-scale, 1));
  left: calc((var(--playfield-x, 0px) + 16px * var(--playfield-scale, 1)) / var(--ui-scale, 1));
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  --btn-fill: #4c1d95;
  --btn-border: #a855f7;
  background: var(--btn-fill);
  border: 0;
  outline: none;
  /* flat stepped pixel bevel: lit top edge, 3px border ring, hard drop shadow (no blur) */
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 0 0 3px var(--btn-border), 0 7px 0 3px #12042a;
  color: #f5f3ff;
  text-shadow: 2px 2px 0 #12042a;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 11px 18px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  zoom: var(--ui-scale, 1);
  transition: background 0.1s ease, outline-color 0.1s ease, color 0.1s ease, transform 0.06s ease;
}

#gameContainer[data-game-mode="endgame"] .btn-endgame-back {
  display: flex;
}

#gameContainer .btn-endgame-back.hidden,
#btnEndgameBack.hidden {
  display: none !important;
}

.btn-endgame-back:hover {
  --btn-fill: #7e22ce;
  --btn-border: #f5f3ff;
  color: #ffffff;
}

.btn-endgame-back:active {
  transform: translateY(3px);
}

.btn-endgame-back:focus,
.btn-endgame-back:focus-visible,
.btn-endgame-back:active {
  outline: none;
}


.sidebar-top {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; /* Fixed - never shrinks regardless of height */
}

.sidebar-top /* === [SNIPPET: Header Game Mode Switcher Button] === */
.btn-game-selector {
  width: 100%;
  justify-content: center;
  font-size: 11px;
  padding: 8px 8px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  gap: 8px;
}

.sidebar-currencies {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0; /* Critical for flex scrolling child */
  margin: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none; /* no scrollbar: a soft edge fade marks clipped cards instead ([SNIPPET: Sidebar Scroll Edge Fade]) */
  padding-bottom: 4px;
}

.sidebar-currencies::-webkit-scrollbar {
  display: none;
}

.sidebar-currencies /* === [SNIPPET: Currency Card Framework] === */
/* === [SNIPPET: Currency Dashboard Card Framework] === */
.stat-card {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 50px;
  min-height: 50px; /* Never let cards squish */
  padding: 6px 10px 7px 10px;
  flex-shrink: 0; /* Prevent squish in scrollable sidebar */
}

.sidebar-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0; /* Fixed - Menu & Settings buttons never scroll away */
  padding-top: 6px;
}

/* === [SNIPPET: Sidebar Attraction Shop Launch Buttons] === */
.btn-sidebar-shop {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 38px;
  min-height: 38px; /* Never let buttons squish */
  flex-shrink: 0; /* Prevent squish in scrollable sidebar */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--btn-bg, var(--pixel-card));
  border: 3px solid var(--pixel-black);
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
  margin-top: -13px;
  margin-bottom: 0;
  outline: none;
}

.arcade-sidebar button:focus,
.arcade-sidebar button:focus-visible,
.arcade-sidebar button:active,
.arcade-sidebar .stat-card:focus,
.arcade-sidebar .stat-card:focus-visible,
.arcade-sidebar .stat-card:active {
  outline: none !important;
}

.btn-sidebar-shop:hover {
  background: var(--btn-hover-bg, var(--pixel-card-hover, #2a3b5c));
  box-shadow: var(--pixel-shadow-md);
}

.btn-sidebar-shop:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

/* Mode-specific button themes */
.btn-sidebar-shop.mode-claw {
  border-color: var(--pixel-black);
  --btn-bg: #241c06;
  --btn-hover-bg: #45360e;
}
.btn-sidebar-shop.mode-claw .shop-btn-text {
  color: var(--pixel-gold);
}
.btn-sidebar-shop.mode-claw:hover {
  border-color: var(--pixel-gold);
}

.btn-sidebar-shop.mode-lab {
  border-color: var(--pixel-black);
  --btn-bg: #290a22;
  --btn-hover-bg: #4f1640;
}
.btn-sidebar-shop.mode-lab .shop-btn-text {
  color: #ff2a85;
}
.btn-sidebar-shop.mode-lab:hover {
  border-color: #ff2a85;
}
.btn-sidebar-shop.mode-lab:hover .shop-btn-text {
  color: #ff80ab;
}

.btn-sidebar-shop.mode-plinko {
  border-color: var(--pixel-black);
  --btn-bg: #2a0c19;
  --btn-hover-bg: #4d1830;
}
.btn-sidebar-shop.mode-plinko .shop-btn-text {
  color: var(--pixel-red);
}
.btn-sidebar-shop.mode-plinko .shop-pixel-icon {
  filter: hue-rotate(305deg) saturate(1.8);
}
.btn-sidebar-shop.mode-plinko:hover {
  border-color: var(--pixel-red);
}

/* Ticket Factory button: keeps the Plinko button, but its text and hover border use the Blue Ticket blue */
.btn-sidebar-shop.mode-plinko.factory-blue .shop-btn-text {
  color: #5c9dff;
}
.btn-sidebar-shop.mode-plinko.factory-blue:hover {
  border-color: #5c9dff;
}

.btn-sidebar-shop.mode-coin_flip {
  border-color: var(--pixel-black);
  --btn-bg: #0a2615;
  --btn-hover-bg: #16482a;
}
.btn-sidebar-shop.mode-coin_flip .shop-btn-text {
  color: #00e676;
}
.btn-sidebar-shop.mode-coin_flip .shop-pixel-icon {
  filter: hue-rotate(85deg) saturate(2);
}
.btn-sidebar-shop.mode-coin_flip:hover {
  border-color: #00e676;
}

.btn-sidebar-shop.mode-prestige {
  border-color: var(--pixel-black);
  --btn-bg: #21123a;
  --btn-hover-bg: #3d2460;
}
.btn-sidebar-shop.mode-prestige .shop-btn-text {
  color: #ba68c8;
}
.btn-sidebar-shop.mode-prestige:hover {
  border-color: #ba68c8;
}

@media (hover: none) {
  .btn-sidebar-shop:hover {
    background: var(--btn-bg, var(--pixel-card));
    box-shadow: var(--pixel-shadow-sm);
  }
  .btn-sidebar-shop.mode-claw:hover {
    border-color: var(--pixel-black);
  }
  .btn-sidebar-shop.mode-lab:hover {
    border-color: var(--pixel-black);
  }
  .btn-sidebar-shop.mode-plinko:hover {
    border-color: var(--pixel-black);
  }
  .btn-sidebar-shop.mode-coin_flip:hover {
    border-color: var(--pixel-black);
  }
  .btn-sidebar-shop.mode-prestige:hover {
    border-color: var(--pixel-black);
  }
}

/* Shop icons */
.lab-pixel-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #ff2a85;
  clip-path: polygon(36% 0%, 64% 0%, 64% 28%, 100% 78%, 100% 100%, 0% 100%, 0% 78%, 36% 28%);
  box-shadow: 0 0 4px #ff2a85;
  flex-shrink: 0;
}

.prestige-shop-pixel-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #ba68c8;
  clip-path: polygon(50% 0%, 85% 35%, 50% 100%, 15% 35%);
  box-shadow: 0 0 4px #ba68c8;
  flex-shrink: 0;
}

.sidebar-actions /* === [SNIPPET: Arcade Pixel Push Buttons] === */
.btn-shop-header {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--pixel-card);
  border: 3px solid var(--pixel-black);
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-actions .btn-shop-header:hover {
  background: var(--pixel-card-hover, #2a3b5c);
  box-shadow: var(--pixel-shadow-md);
  border-color: var(--pixel-gold);
}

.sidebar-actions .btn-shop-header:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.shop-btn-text {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-gold);
  letter-spacing: 0.8px;
  line-height: 1;
}

.sidebar-actions .btn-shop-header:hover .shop-btn-text {
  color: #fff9e6;
}

/* === [SNIPPET: Sidebar Bottom Action Controls] === */
/* Menu button in bottom sidebar actions */
.sidebar-actions .btn-menu-header {
  flex: 1;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--sb-card, var(--pixel-card));
  border: 3px solid var(--pixel-black);
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-actions .btn-menu-header:hover {
  background: var(--sb-hover, var(--pixel-card-hover, #2a3b5c));
  box-shadow: var(--pixel-shadow-md);
  border-color: var(--pixel-white);
}

.sidebar-actions .btn-menu-header:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.menu-btn-text {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-white);
  letter-spacing: 0.8px;
  line-height: 1;
}

.sidebar-actions .btn-menu-header:hover .menu-btn-text {
  color: #fff;
}

.menu-pixel-icon {
  width: 14px;
  height: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Line 1 + shadow for Line 2 (gives us 2 lines via one pseudo-element) */
.menu-pixel-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pixel-white);
  box-shadow: 0 4px 0 var(--pixel-white);
}

/* Line 3 only — no shadow, no extra lines */
.menu-pixel-icon::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--pixel-white);
}

.sidebar-actions .btn-settings-header {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Dedicated Game View Window - Fullscreen Edge-to-Edge Backdrop */
.game-view-area {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #080c14;
  touch-action: none;
  pointer-events: none;
  z-index: 1;
}

@keyframes cosmicDrift {
  0% { transform: translate3d(0px, 0px, 0); }
  100% { transform: translate3d(-56px, -56px, 0); }
}

/* Every mode's 56px tile has a 2px feGaussianBlur baked into the SVG itself: the browser blurs that tiny tile once
   and the drift just repeats it, so the soft look is free per frame. Never move the blur to a CSS `filter` on this
   full-screen animated layer, that re-blurs the whole screen every frame. Tiles draw neighbouring pinstripe copies
   (x - y = -56, 0, 56) so the blurred edges wrap seamlessly; alphas are x2.2 the sharp originals to stay visible. */
.cosmic-bg {
  position: absolute;
  inset: -56px;
  width: calc(100% + 112px);
  height: calc(100% + 112px);
  background-color: #060b14;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='-16' y='-16' width='88' height='88'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3Crect width='56' height='56' fill='%23060b14'/%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M-56 -56L112 112M0 -56L112 56M-56 0L56 112' stroke='rgba(0,240,255,0.33)' stroke-width='1.5'/%3E%3Crect x='13' y='42' width='3' height='1' fill='rgba(0,240,255,0.484)'/%3E%3Crect x='14' y='41' width='1' height='3' fill='rgba(0,240,255,0.484)'/%3E%3Crect x='41' y='13' width='2' height='2' fill='rgba(255,204,0,0.44)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  /* 56 one-pixel steps instead of a smooth glide: the drift is only 8px/s, so it looks the same, but the layer (bigger than
     the screen) now changes 8 times a second instead of 60, so the compositor stops re-blending the whole screen every frame. */
  animation: cosmicDrift 7s steps(56, end) infinite;
  z-index: 0;
  pointer-events: none;
}

/* HTML5 Canvas - Full Responsive Expanded Playfield */
#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: crosshair;
  margin: 0;
  image-rendering: auto;
  border: none;
  box-shadow: none;
  touch-action: none;
  pointer-events: auto;
}

#fgCanvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 20;
  cursor: crosshair;
  margin: 0;
  image-rendering: auto;
  border: none;
  box-shadow: none;
  touch-action: none;
  pointer-events: none; /* Let clicks pass through */
}

/* =========================================================
   Stat Badges (Currency Dashboard Cards)
   ========================================================= */
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background: var(--card-bg, var(--pixel-card));
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-sm);
  padding: 6px 10px 7px 10px;
  height: 50px;
  width: 158px;
  min-width: 158px;
  max-width: 158px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.1s ease, border-color 0.15s ease;
}

.stat-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* === [SNIPPET: Pixel Art Currency SVG Icons] === */
/* Pixel Art Coin Icon - Authentic Claw Machine Octagonal Gold Coin */
.coin-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: url("assets/svg/global/currencies/gold_coin.svg") center / contain no-repeat;
  border: none;
  box-shadow: none;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.coin-icon::after {
  content: none;
}

/* Pixel Art Star Coin Icon (Claw Machine Premium Currency - Authentic Claw Pit Star Coin) */
.star-coin-card {
  border-color: var(--pixel-black);
}

.star-coin-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='18' height='22' fill='%23000000'/%3E%3Crect x='0' y='2' width='22' height='18' fill='%23000000'/%3E%3Crect x='2' y='1' width='18' height='20' fill='%23FF2A85'/%3E%3Crect x='1' y='2' width='20' height='18' fill='%23FF2A85'/%3E%3Crect x='3' y='3' width='16' height='16' fill='%23FFA6CE'/%3E%3Crect x='4' y='3' width='3' height='1' fill='%23FFFFFF'/%3E%3Crect x='3' y='4' width='1' height='3' fill='%23FFFFFF'/%3E%3Crect x='10' y='10' width='4' height='4' fill='%23A31250'/%3E%3Crect x='11' y='7' width='2' height='3' fill='%23A31250'/%3E%3Crect x='7' y='10' width='3' height='2' fill='%23A31250'/%3E%3Crect x='14' y='10' width='3' height='2' fill='%23A31250'/%3E%3Crect x='8' y='14' width='3' height='2' fill='%23A31250'/%3E%3Crect x='13' y='14' width='3' height='2' fill='%23A31250'/%3E%3Crect x='9' y='9' width='4' height='4' fill='%23FFFFFF'/%3E%3Crect x='10' y='6' width='2' height='3' fill='%23FFFFFF'/%3E%3Crect x='6' y='9' width='3' height='2' fill='%23FFFFFF'/%3E%3Crect x='13' y='9' width='3' height='2' fill='%23FFFFFF'/%3E%3Crect x='7' y='13' width='3' height='2' fill='%23FFFFFF'/%3E%3Crect x='12' y='13' width='3' height='2' fill='%23FFFFFF'/%3E%3C/svg%3E") center / contain no-repeat;
  border: none;
  box-shadow: none;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}

.star-coin-icon::after {
  content: none;
}

/* Pixel Art Red Ticket Icon (Crimson Plinko) */
.ticket-icon.red-ticket-icon,
.red-ticket-icon {
  width: 26px !important;
  height: 18px !important;
  min-width: 26px !important;
  min-height: 18px !important;
  max-width: 26px !important;
  max-height: 18px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h22v5h-2v2h-1v4h1v2h2v5H2v-5h2v-2h1V7H4V5H2z' fill='%23000'/%3E%3Cpath d='M3 1h20v4h-2v2h-1v4h1v2h2v4H3v-4h2v-2h1V7H5V5H3z' fill='%23d50000'/%3E%3Cpath d='M3 1h20v1H3zm0 1h1v3h1v2H3z' fill='%23ff5252'/%3E%3Cpath d='M3 16h20v1H3zm18-3h2v3h-2z' fill='%23790000'/%3E%3Crect x='7' y='3' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='7' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='11' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='15' width='1' height='1' fill='%23ff8a80'/%3E%3Crect x='19' y='3' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='7' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='11' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='15' width='1' height='1' fill='%23790000'/%3E%3Crect x='13' y='7' width='2' height='5' fill='%23000'/%3E%3Crect x='11' y='9' width='6' height='2' fill='%23000'/%3E%3Crect x='13' y='6' width='2' height='5' fill='%23ffd54f'/%3E%3Crect x='11' y='8' width='6' height='2' fill='%23ffd54f'/%3E%3Crect x='12' y='7' width='4' height='3' fill='%23ffd54f'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain !important;
  border: none !important;
  display: inline-block !important;
  position: relative;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-shadow: none !important;
}

/* Pixel Art Green Dollar Bill Icon (Coin Flip Attraction) */
.dollar-bill-icon {
  width: 26px !important;
  height: 16px !important;
  min-width: 26px !important;
  min-height: 16px !important;
  max-width: 26px !important;
  max-height: 16px !important;
  background: url("assets/svg/global/currencies/dollar_bill.svg") no-repeat center / contain !important;
  border: none !important;
  display: inline-block !important;
  position: relative;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  box-shadow: none !important;
}

.text-emerald {
  color: #00e676 !important;
}

.stat-card.dollar-card {
  border-color: var(--pixel-black);
}

/* Pixel Art Purple Diamond Icon (Universal Prestige Currency) */
.prestige-card {
  border-color: var(--pixel-black);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.prestige-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--pixel-black);
}

.prestige-unclaimed-badge {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #c084fc;
  background: #281a38;
  border: 1px solid #7c3aed;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

.diamond-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: url("assets/svg/global/currencies/diamond.svg") no-repeat center / contain;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.diamond-unclaimed-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: url("assets/svg/global/currencies/diamond_unclaimed.svg") no-repeat center / contain;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.85;
}

.diamond-icon.mini-icon,
.diamond-unclaimed-icon.mini-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}

.diamond-icon.small-icon,
.diamond-unclaimed-icon.small-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.diamond-icon.large-icon,
.diamond-unclaimed-icon.large-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.diamond-icon.huge-icon,
.diamond-unclaimed-icon.huge-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, 0.7));
}

.ticket-icon.red-ticket-icon::after,
.red-ticket-icon::after,
.ticket-icon.red-ticket-icon::before,
.red-ticket-icon::before {
  display: none !important;
  content: none !important;
}

.text-red {
  color: var(--pixel-red) !important;
}

.text-cyan {
  color: var(--pixel-cyan) !important;
}

.text-gold {
  color: var(--pixel-gold) !important;
}

.text-pink {
  color: var(--pixel-pink) !important;
}

.text-purple {
  color: #c084fc !important;
}

.stat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.stat-label {
  display: none !important;
}

.stat-value {
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 700;
  color: var(--pixel-white);
  display: block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  line-height: 1;
  letter-spacing: 0.5px;
  transition: filter 0.08s ease;
}

#coinDisplay {
  color: var(--pixel-gold);
}

/* === [SNIPPET: Prestige Diamonds Dashboard Card & Milestone Bar] === */
/* Universal Prestige Card with Full-Width Milestone Bar under Icon */
.sidebar-currencies .stat-card.prestige-card,
.stat-card.prestige-card {
  height: 52px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 6px 10px 6px 10px;
  margin-top: auto; /* Anchors Prestige right above Shop and Settings */
}

.prestige-card-top,
.stat-card .stat-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Default: value stacked above its income rate (e.g. Coins, Red Tickets), with a clear
   gap so the two lines never feel cramped together. Cards with no rate (Star Coins, Blue
   Tickets) just show the value, vertically centered the same way. */
.stat-card .stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left !important;
  gap: 3px;
  flex: 1;
}

/* Prestige is the exception: the unclaimed badge is small, so it sits beside the diamond
   count instead of stacked below it (higher specificity wins over the rule above). */
.stat-card.prestige-card .stat-content {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start !important;
  gap: 8px;
}

#prestigeDisplay {
  color: #c084fc;
  text-align: left !important;
}

.stat-value.highlight {
  filter: brightness(1.35);
}

/* =========================================================
   Arcade Pixel Action Buttons
   ========================================================= */
.btn-shop-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--pixel-card);
  color: var(--pixel-white);
  border: 3px solid var(--pixel-black);
  padding: 0;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.btn-shop-header:hover {
  background: var(--pixel-card-hover, #2a3b5c);
  box-shadow: var(--pixel-shadow-md);
  border-color: var(--pixel-pink);
}

.btn-shop-header:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.shop-pixel-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Handle --%3E%3Crect x=%221%22 y=%222%22 width=%224%22 height=%221%22 fill=%22%23ffe600%22/%3E%3Crect x=%224%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23ffe600%22/%3E%3C!-- Rear Strut --%3E%3Crect x=%225%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%226%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%23ffe600%22/%3E%3C!-- Solid Trapezoid Basket (Flat Yellow) --%3E%3Crect x=%229%22 y=%225%22 width=%2213%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%229%22 y=%227%22 width=%2212%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%227%22 y=%229%22 width=%2213%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%228%22 y=%2211%22 width=%2211%22 height=%221%22 fill=%22%23ffe600%22/%3E%3C!-- Strut passing through gap --%3E%3Crect x=%228%22 y=%2212%22 width=%222%22 height=%221%22 fill=%22%23ffe600%22/%3E%3C!-- Horizontal Chassis Bar --%3E%3Crect x=%228%22 y=%2213%22 width=%2213%22 height=%222%22 fill=%22%23ffe600%22/%3E%3C!-- Round Pixel Wheels --%3E%3Crect x=%227%22 y=%2215%22 width=%224%22 height=%221%22 fill=%22%23ffe600%22/%3E%3Crect x=%226%22 y=%2216%22 width=%226%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%227%22 y=%2218%22 width=%224%22 height=%221%22 fill=%22%23ffe600%22/%3E%3Crect x=%2217%22 y=%2215%22 width=%224%22 height=%221%22 fill=%22%23ffe600%22/%3E%3Crect x=%2216%22 y=%2216%22 width=%226%22 height=%222%22 fill=%22%23ffe600%22/%3E%3Crect x=%2217%22 y=%2218%22 width=%224%22 height=%221%22 fill=%22%23ffe600%22/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.shop-glow-dot {
  display: none;
}

/* Legacy Header Shop Button Attention Pulse */
.btn-shop-header.shop-attention-pulse {
  animation: shopHeaderAttentionPulse 1.25s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  border-color: #FFE600 !important;
  z-index: 25;
  position: relative;
}

@keyframes shopHeaderAttentionPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 230, 0, 0.8), 3px 3px 0 var(--pixel-black);
    filter: brightness(1);
  }
  28% {
    transform: scale(1.14);
    box-shadow: 0 0 20px 6px rgba(255, 230, 0, 0.95), 0 0 32px 10px rgba(255, 42, 133, 0.7), 3px 3px 0 var(--pixel-black);
    filter: brightness(1.3);
  }
  48% {
    transform: scale(1.03);
    box-shadow: 0 0 10px 2px rgba(255, 230, 0, 0.6), 0 0 16px 4px rgba(255, 42, 133, 0.4), 3px 3px 0 var(--pixel-black);
    filter: brightness(1.1);
  }
  68% {
    transform: scale(1.1);
    box-shadow: 0 0 15px 4px rgba(255, 230, 0, 0.85), 0 0 24px 6px rgba(255, 42, 133, 0.55), 3px 3px 0 var(--pixel-black);
    filter: brightness(1.22);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 230, 0, 0), 3px 3px 0 var(--pixel-black);
    filter: brightness(1);
  }
}

.btn-shop-header.shop-attention-pulse .shop-glow-dot {
  animation: shopAttentionDot 0.28s steps(2, start) infinite alternate;
}

@keyframes shopAttentionDot {
  0% {
    background: #FFE600;
    box-shadow: 0 0 8px #FFE600;
  }
  100% {
    background: #00F0FF;
    box-shadow: 0 0 10px #00F0FF;
  }
}

.btn-music-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--pixel-card);
  color: var(--pixel-white);
  border: 3px solid var(--pixel-black);
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  font-size: 16px;
  transition: transform 0.06s ease, box-shadow 0.06s ease, opacity 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.btn-music-toggle:hover {
  background: var(--pixel-card-hover, #2a3b5c);
  box-shadow: var(--pixel-shadow-md);
}

.btn-music-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.btn-music-toggle.muted {
  opacity: 0.45;
  filter: grayscale(1);
}

.music-icon {
  font-size: 16px;
  line-height: 1;
}

.btn-settings-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--sb-card, var(--pixel-card));
  color: var(--pixel-white);
  border: 3px solid var(--pixel-black);
  padding: 0;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}

.btn-settings-header:hover {
  background: var(--sb-hover, var(--pixel-card-hover, #2a3b5c));
  box-shadow: var(--pixel-shadow-md);
  border-color: #3b82f6;
}

.btn-settings-header:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.settings-pixel-icon,
.settings-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Gear Teeth Outer Outline (Black %23000000) --%3E%3Crect x=%229%22 y=%221%22 width=%226%22 height=%2222%22 fill=%22%23000000%22/%3E%3Crect x=%221%22 y=%229%22 width=%2222%22 height=%226%22 fill=%22%23000000%22/%3E%3Crect x=%224%22 y=%224%22 width=%225%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%224%22 width=%225%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%224%22 y=%2215%22 width=%225%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%2215%22 width=%225%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%224%22 y=%226%22 width=%2216%22 height=%2212%22 fill=%22%23000000%22/%3E%3Crect x=%226%22 y=%224%22 width=%2212%22 height=%2216%22 fill=%22%23000000%22/%3E%3C!-- Pure Solid Flat Fill (Light Steel %23e2e8f0) --%3E%3Crect x=%2210%22 y=%222%22 width=%224%22 height=%2220%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%222%22 y=%2210%22 width=%2220%22 height=%224%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%225%22 y=%225%22 width=%223%22 height=%223%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%2216%22 y=%225%22 width=%223%22 height=%223%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%225%22 y=%2216%22 width=%223%22 height=%223%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%2216%22 y=%2216%22 width=%223%22 height=%223%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%225%22 y=%227%22 width=%2214%22 height=%2210%22 fill=%22%23e2e8f0%22/%3E%3Crect x=%227%22 y=%225%22 width=%2210%22 height=%2214%22 fill=%22%23e2e8f0%22/%3E%3C!-- Center Axle Cutout (Solid Dark %23141122) --%3E%3Crect x=%229%22 y=%229%22 width=%226%22 height=%226%22 fill=%22%23000000%22/%3E%3Crect x=%2210%22 y=%2210%22 width=%224%22 height=%224%22 fill=%22%23141122%22/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  font-size: 0;
  line-height: 0;
}

/* =========================================================
   Header Right Game Mode Selector & Debug Buttons
   ========================================================= */
.btn-game-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1b2e;
  color: var(--pixel-white);
  border: 3px solid #00e5ff;
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  height: 42px;
  flex-shrink: 0;
  transition: transform 0.06s ease, box-shadow 0.06s ease, border-color 0.15s ease, background 0.15s ease;
}

.btn-game-selector:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

/* --- Themed Game Mode Selector Variants --- */

/* Claw Pit Theme (Electric Cyan / Neon Blue) */
.btn-game-selector.mode-theme-claw {
  --selector-accent: #00f0ff;
  --selector-glow: rgba(0, 240, 255, 0.75);
  --selector-glow-outer: rgba(0, 180, 216, 0.45);
  background: #0d1b2e;
  border-color: #00e5ff;
  color: #ffffff;
  box-shadow: var(--pixel-shadow-sm);
}

.btn-game-selector.mode-theme-claw:hover {
  background: #142845;
  border-color: #67e8f9;
  box-shadow: var(--pixel-shadow-md);
}

.btn-game-selector.mode-theme-claw .selector-dot {
  background: #00f0ff;
  box-shadow: none;
}

/* Plinko Theme (Crimson / Neon Red) */
.btn-game-selector.mode-theme-plinko {
  --selector-accent: #ff2252;
  --selector-glow: rgba(255, 34, 82, 0.75);
  --selector-glow-outer: rgba(255, 34, 82, 0.45);
  background: #280d19;
  border-color: #ff2252;
  color: #ffffff;
  box-shadow: var(--pixel-shadow-sm);
}

.btn-game-selector.mode-theme-plinko:hover {
  background: #3d1427;
  border-color: #ff5c7c;
  box-shadow: var(--pixel-shadow-md);
}

.btn-game-selector.mode-theme-plinko .selector-dot {
  background: #ff2252;
  box-shadow: none;
}

/* Coin Flip Theme (Emerald / Felt Green) */
.btn-game-selector.mode-theme-coin_flip {
  --selector-accent: #00e676;
  --selector-glow: rgba(0, 230, 118, 0.75);
  --selector-glow-outer: rgba(0, 230, 118, 0.45);
  background: #0b2e1a;
  border-color: #00e676;
  color: #ffffff;
  box-shadow: var(--pixel-shadow-sm);
}

.btn-game-selector.mode-theme-coin_flip:hover {
  background: #114627;
  border-color: #69f0ae;
  box-shadow: var(--pixel-shadow-md);
}

.btn-game-selector.mode-theme-coin_flip .selector-dot {
  background: #00e676;
  box-shadow: none;
}

/* End Game Theme (Mystic Purple) */
.btn-game-selector.mode-theme-endgame {
  --selector-accent: #a855f7;
  --selector-glow: rgba(168, 85, 247, 0.75);
  --selector-glow-outer: rgba(168, 85, 247, 0.45);
  background: #1e102d;
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: var(--pixel-shadow-sm);
}

.btn-game-selector.mode-theme-endgame:hover {
  background: #2b1740;
  border-color: #c084fc;
  box-shadow: var(--pixel-shadow-md);
}

.btn-game-selector.mode-theme-endgame .selector-dot {
  background: #a855f7;
  box-shadow: none;
}

.debug-btn-icon {
  font-size: 11px;
  line-height: 1;
}

.selector-dot {
  width: 6px;
  height: 6px;
  background: var(--pixel-cyan);
  border: 1px solid var(--pixel-black);
  box-shadow: none;
  flex-shrink: 0;
}

.btn-debug {
  background: var(--pixel-panel);
  border: 2px solid var(--pixel-black);
  color: var(--pixel-gray);
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s ease;
}

.btn-debug:hover {
  background: var(--pixel-card);
  color: var(--pixel-white);
}

.btn-debug:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.btn-debug-max {
  background: var(--pixel-cyan);
  color: var(--pixel-black);
  font-weight: 700;
}

.btn-debug-max:hover {
  background: #33f3ff;
  color: var(--pixel-black);
}

/* =========================================================
   In-Game Floating TRIAL Launch Button & Trial HUD Overlay
   ========================================================= */
/* In-game trial button styles consolidated below in TRIAL Section */

.trial-glow-dot {
  width: 6px;
  height: 6px;
  background: var(--pixel-white);
  border: 1px solid var(--pixel-black);
}

.trial-cooldown-badge {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  background: var(--pixel-black);
  padding: 3px 6px;
  color: var(--pixel-white);
}

.trial-ready .trial-cooldown-badge {
  background: var(--pixel-white);
  color: var(--pixel-black);
}

/* Running CHALLENGE card (#trialHudOverlay): [SNIPPET: Top HUD Tab Cards] in css/components.css */

/* === [SNIPPET: Challenge HUD Per-Mode Multiplier & Earned Colors] === */
/* MULTIPLIER matches the attraction's theme accent; EARNED matches its main currency color */
#trialHudOverlay.mode-theme-claw #trialHudMult { color: var(--pixel-cyan); }
#trialHudOverlay.mode-theme-claw #trialHudEarned { color: var(--pixel-gold); }

#trialHudOverlay.mode-theme-plinko #trialHudMult,
#trialHudOverlay.mode-theme-plinko #trialHudEarned { color: var(--pixel-red); }

#trialHudOverlay.mode-theme-coin_flip #trialHudMult,
#trialHudOverlay.mode-theme-coin_flip #trialHudEarned { color: #00e676; }

#trialHudOverlay.mode-theme-cannon #trialHudMult { color: #ff8a00; }
#trialHudOverlay.mode-theme-cannon #trialHudEarned { color: #ffd23f; }

/* === [SNIPPET: Plinko Upper-Left Ball Counter HUD] === */
/* Left top HUD tab card in Plinko (shared look: [SNIPPET: Top HUD Tab Cards]): gold BALLS label and dot, the
   "cur / max" count ([SNIPPET: Plinko Ball HUD Interactive Overclock Overlays]) and a segmented gold refill bar. */
.plinko-ball-hud {
  width: 236px;
  --hud-accent: var(--pixel-gold);
  --hud-segs: 14;
  pointer-events: none;
}
.plinko-ball-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.plinko-ball-hud-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.plinko-ball-hud-dot {
  width: 6px;
  height: 6px;
  background: var(--hud-accent);
  box-shadow: 0 0 0 1px var(--pixel-black);
}
.plinko-ball-hud-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  color: var(--hud-accent);
}
.plinko-ball-hud.ball-hud-empty {
  border-color: var(--pixel-red);
}

/* === [SNIPPET: Coin Flip Upper-Left Lucky Rush HUD] === */
/* Left top HUD tab card in Coin Flip (shared look: [SNIPPET: Top HUD Tab Cards]): LUCKY RUSH label, dot and
   segmented meter in the mode accent; during a frenzy they turn gold and the 3X badge shows. */
.coin-flip-rush-hud {
  width: 236px;
  --hud-accent: var(--sb-accent);
  --hud-segs: 14;
  pointer-events: none;
  transition: border-color 0.15s ease;
}
.coin-flip-rush-hud.rush-hud-frenzy {
  --hud-accent: #ffd54f;
  border-color: #ffd54f;
}
.coin-flip-rush-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.coin-flip-rush-hud-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.coin-flip-rush-hud-dot {
  width: 6px;
  height: 6px;
  background: var(--hud-accent);
  box-shadow: 0 0 0 1px var(--pixel-black);
}
.coin-flip-rush-hud-label {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  color: var(--hud-accent);
}
.coin-flip-rush-hud-status {
  background: #ffd54f;
  color: #000;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border: 1px solid #000;
  margin-left: auto;
  letter-spacing: 0.5px;
  line-height: 1;
}
.coin-flip-rush-hud-count {
  display: none !important;
}
.coin-flip-rush-hud-fill.frenzy-fill {
  --hud-accent: #ffd54f;
}

/* =========================================================
   MODAL WINDOW FRAMEWORK (Retro RPG / Arcade Window System)
   Strictly NO blur, NO rounded corners, double pixel frame
   ========================================================= */
/* === [SNIPPET: Legacy Modal Window Framework] === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: #08060e;
  /* No backdrop blur and fully opaque: nothing behind a modal is visible, so a live blur would only cost GPU (stutter on 120/144Hz phones) */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in-out;
}

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

.modal-dialog {
  background: var(--pixel-panel);
  border: 4px solid var(--pixel-black);
  outline: none !important;
  box-shadow: var(--pixel-shadow-xl);
  color: var(--text-main);
  position: relative;
}

.modal-dialog:focus,
.modal-dialog:focus-visible,
.modal-dialog:active,
.modal-backdrop:focus,
.modal-backdrop:focus-visible,
.modal-backdrop:active {
  outline: none !important;
}

.modal-dialog:not(.fullscreen-dialog):not(.settings-dialog) {
  /* Keep dialogs at stable zoom to prevent overflowing in landscape */
  zoom: 1;
}

/* Classic Square Pixel Close [X] Button */
.btn-close {
  background: var(--pixel-red);
  border: 2px solid var(--pixel-black);
  color: var(--pixel-white);
  font-family: var(--font-pixel);
  font-size: 20px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s ease;
  line-height: 1;
}

.btn-close:hover {
  background: #ff476e;
}

.btn-close:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* =========================================================
   Game Modes Selection Modal (3 Arcade Cabinet Panels)
   ========================================================= */
/* === [SNIPPET: Game Modes Selection Modal] === */
.game-modes-dialog {
  max-width: 580px;
  width: 92%;
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
}

.game-modes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 3px solid var(--pixel-black);
  padding-bottom: 8px;
  flex-shrink: 0;
}

.game-modes-header h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--pixel-gold);
  margin: 0;
  letter-spacing: 0.05em;
}

.game-modes-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 14px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--pixel-gold) var(--pixel-black);
}

.game-modes-grid::-webkit-scrollbar {
  height: 8px;
}

.game-modes-grid::-webkit-scrollbar-track {
  background: var(--pixel-black);
  border: 1px solid var(--pixel-card-border);
}

.game-modes-grid::-webkit-scrollbar-thumb {
  background: var(--pixel-gold);
  border: 1px solid var(--pixel-black);
}

.game-modes-grid::-webkit-scrollbar-thumb:hover {
  background: #fde68a;
}

.mode-card-btn {
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--pixel-card);
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-md);
  padding: 12px;
  cursor: pointer;
  transition: transform 0.06s ease, border-color 0.1s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.mode-card-btn:focus,
.mode-card-btn:focus-visible {
  outline: none;
}

.mode-card-btn:hover {
  background: #362f54;
  border-color: var(--pixel-white);
}

.mode-card-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

#modeBtnClaw.mode-card-btn.active {
  background: #172b38;
  border-color: var(--pixel-cyan);
  outline: 2px solid var(--pixel-cyan);
}

#modeBtnClaw.mode-card-btn.active:focus,
#modeBtnClaw.mode-card-btn.active:focus-visible {
  outline: 2px solid var(--pixel-cyan);
}

#modeBtnPlinko.mode-card-btn.active {
  background: #2b121e;
  border-color: var(--pixel-red);
  outline: 2px solid var(--pixel-red);
}

#modeBtnPlinko.mode-card-btn.active:focus,
#modeBtnPlinko.mode-card-btn.active:focus-visible {
  outline: 2px solid var(--pixel-red);
}

#modeBtnCoinFlip.mode-card-btn.active {
  background: #0d2e1c;
  border-color: #00e676;
  outline: 2px solid #00e676;
}

#modeBtnCoinFlip.mode-card-btn.active:focus,
#modeBtnCoinFlip.mode-card-btn.active:focus-visible {
  outline: 2px solid #00e676;
}

/* === [SNIPPET: Game Cabinet CRT Scanline & Bezel] === */
/* Attraction Game Art Preview Frame in Mode Cards */
.mode-card-art {
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pixel-black);
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 14px rgba(0, 0, 0, 0.65);
}

/* Subtle CRT scanline overlay across all preview frames */
.mode-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.65;
  z-index: 2;
}

/* Inner golden cabinet bezel accent ring */
.mode-card-art::before {
  content: '';
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgba(255, 204, 0, 0.22);
  z-index: 1;
}

/* 1. Claw Pit - Authentic Cyber-Navy Starfield & Diagonal Pinstripes */
#modeBtnClaw .mode-card-art,
.sidebar-claw .mode-card-art {
  background-color: #080d1a;
  background-image:
    radial-gradient(circle at center, rgba(0, 240, 255, 0.14) 0%, transparent 80%),
    radial-gradient(circle, rgba(0, 240, 255, 0.30) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 204, 0, 0.22) 1.5px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent, transparent 27px, rgba(0, 240, 255, 0.08) 28px);
  background-size: 100% 100%, 28px 28px, 28px 28px, 100% 100%;
  background-position: 0 0, 0 0, 14px 14px, 0 0;
}

#modeBtnClaw.active .mode-card-art {
  border-color: var(--pixel-cyan);
  box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.25), inset 0 0 0 1px var(--pixel-cyan);
}

/* 2. Plinko - Authentic Crimson Arcade Chamber & Ruby Starfield */
#modeBtnPlinko .mode-card-art,
.sidebar-plinko .mode-card-art {
  background-color: #10030a;
  background-image:
    radial-gradient(circle at center, rgba(255, 23, 68, 0.16) 0%, transparent 80%),
    radial-gradient(circle, rgba(255, 64, 129, 0.30) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 213, 79, 0.22) 1.5px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent, transparent 27px, rgba(255, 23, 68, 0.09) 28px);
  background-size: 100% 100%, 28px 28px, 28px 28px, 100% 100%;
  background-position: 0 0, 0 0, 14px 14px, 0 0;
}

#modeBtnPlinko.active .mode-card-art {
  border-color: var(--pixel-red);
  box-shadow: inset 0 0 14px rgba(255, 23, 68, 0.25), inset 0 0 0 1px var(--pixel-red);
}

/* 3. Coin Flip - Authentic Emerald Casino Table Felt & Starfield */
#modeBtnCoinFlip .mode-card-art {
  background-color: #071f14;
  background-image:
    radial-gradient(circle at center, rgba(0, 230, 118, 0.14) 0%, transparent 80%),
    radial-gradient(circle, rgba(0, 230, 118, 0.30) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 213, 79, 0.22) 1.5px, transparent 1.5px),
    repeating-linear-gradient(45deg, transparent, transparent 27px, rgba(0, 230, 118, 0.08) 28px);
  background-size: 100% 100%, 28px 28px, 28px 28px, 100% 100%;
  background-position: 0 0, 0 0, 14px 14px, 0 0;
}

#modeBtnCoinFlip.active .mode-card-art {
  border-color: #00e676;
  box-shadow: inset 0 0 14px rgba(0, 230, 118, 0.25), inset 0 0 0 1px #00e676;
}

.mode-card-art .mode-art-img {
  width: 76px;
  height: 76px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.12s ease;
  position: relative;
  z-index: 1;
}

.mode-card-btn:hover .mode-card-art .mode-art-img {
  transform: scale(1.06);
}

.mode-card-badge {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--pixel-black);
  color: var(--pixel-gray);
  margin-bottom: 8px;
  border: 1px solid var(--pixel-card-border);
}

.mode-card-btn.active .mode-card-badge {
  background: var(--pixel-cyan);
  color: var(--pixel-black);
  border-color: var(--pixel-black);
}

#modeBtnPlinko.mode-card-btn.active .mode-card-badge {
  background: var(--pixel-red);
  color: var(--pixel-white);
  border-color: var(--pixel-black);
}

#modeBtnCoinFlip.mode-card-btn.active .mode-card-badge {
  background: #00e676;
  color: var(--pixel-black);
  border-color: var(--pixel-black);
}

.mode-card-title {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  color: var(--pixel-white);
  margin-bottom: 6px;
}

.mode-card-desc {
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  font-weight: 400;
  color: var(--pixel-light-gray);
  margin-bottom: 12px;
  line-height: 1.4;
  flex: 1;
}

.mode-card-currency {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  color: var(--pixel-gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.mode-card-currency .mode-currency-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  vertical-align: middle;
  display: inline-block;
}

/* === [SNIPPET: Game Modes Selection Modal & Locked Overlay Card] === */
/* Standardized Locked Gamemode Overlay: Keeps original card visible beneath darkened blur */
.mode-card-btn.mode-card-locked {
  cursor: default;
  border-color: #3f3258;
}

.mode-card-btn.mode-card-locked:hover {
  border-color: #5d4d7f;
}

/* Blur and dim underlying attraction info so art and text remain recognizable */
.mode-card-btn.mode-card-locked .mode-card-info-group {
  display: flex !important;
  filter: blur(2px) brightness(0.38);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Semi-transparent dark blur overlay anchored directly over the card */
.mode-card-locked-group {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

.mode-card-info-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.mode-card-lock-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
  transition: transform 0.15s ease;
  pointer-events: none;
}

.mode-card-btn.mode-card-locked:hover .mode-card-lock-art {
  transform: translateY(-2px);
}

.mode-card-unlock-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.btn-mode-unlock {
  width: auto;
  min-width: 110px;
  max-width: 160px;
  height: 38px;
  padding: 6px 16px;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  border: 3px solid var(--pixel-black);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--pixel-shadow-sm);
  transition: all 0.12s ease;
  line-height: 1;
}

.btn-mode-unlock .unlock-cost-text {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.btn-mode-unlock .unlock-coin-icon,
.btn-mode-unlock .unlock-ticket-icon,
.btn-mode-unlock .unlock-dollar-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  object-fit: contain;
}

.btn-mode-unlock.can-afford {
  background: #ffd700;
  color: #000000;
  border-color: #ffffff;
  animation: unlockAffordGlow 1.2s ease-in-out infinite alternate;
}

.btn-mode-unlock.can-afford:hover {
  background: #ffe066;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.85);
}

.btn-mode-unlock.can-afford:active {
  transform: translate(2px, 2px);
}

.btn-mode-unlock.cannot-afford {
  background: #1e1b29;
  color: #71717a;
  border: 2px solid #3f3f46;
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
  outline: none !important;
}

.btn-mode-unlock.cannot-afford:hover,
.btn-mode-unlock.cannot-afford:active,
.btn-mode-unlock.cannot-afford:focus,
.btn-mode-unlock.cannot-afford:focus-visible {
  background: #1e1b29 !important;
  color: #71717a !important;
  border-color: #3f3f46 !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-mode-unlock.cannot-afford .unlock-coin-icon,
.btn-mode-unlock.cannot-afford .unlock-ticket-icon,
.btn-mode-unlock.cannot-afford .unlock-dollar-icon {
  opacity: 0.45;
  filter: grayscale(100%);
}

@keyframes unlockAffordGlow {
  0% {
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
    border-color: #ffd700;
  }
  100% {
    box-shadow: 0 0 14px 2px rgba(255, 215, 0, 0.95), 0 0 20px rgba(255, 150, 0, 0.5);
    border-color: #ffffff;
  }
}

/* Unlocking Animation for Gamemode Cards (Smooth fade-out of lock & dark blur) */
@keyframes modeLockFadeOut {
  0% {
    opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.06) rotate(-1deg);
  }
  55% {
    opacity: 0.85;
    transform: scale(1.08) rotate(1.5deg);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transform: scale(0.85);
    pointer-events: none;
  }
}

@keyframes modeLockPadlockPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.25) translateY(-8px); filter: drop-shadow(0 0 12px #c084fc); }
  60% { transform: scale(1.15) translateY(-4px) rotate(-6deg); }
  100% { transform: scale(0.6) translateY(20px) rotate(12deg); opacity: 0; }
}

.mode-card-locked-group.mode-card-unlock-fading {
  animation: modeLockFadeOut 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  pointer-events: none;
}

.mode-card-locked-group.mode-card-unlock-fading .mode-card-lock-art {
  animation: modeLockPadlockPop 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.mode-card-locked-group.mode-card-unlock-fading .mode-card-unlock-wrap {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
}

.mode-card-btn.mode-card-unlocking .mode-card-info-group {
  filter: blur(0px) brightness(1.1) !important;
  opacity: 1 !important;
  transition: filter 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.75s ease;
}

.mode-card-btn.mode-card-unlocking {
  border-color: #c084fc !important;
  box-shadow: 0 0 16px rgba(192, 132, 252, 0.6) !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

#modeBtnPlinko.mode-card-btn.mode-card-unlocking {
  border-color: #ff2252 !important;
  box-shadow: 0 0 16px rgba(255, 34, 82, 0.6) !important;
}

#modeBtnCoinFlip.mode-card-btn.mode-card-unlocking {
  border-color: #00e676 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.6) !important;
}

/* Retro Pixel Burst Particles during Attraction Card Unlock */
.unlock-burst-particle {
  position: absolute;
  border-radius: 0;
  pointer-events: none;
  z-index: 20;
  transition: transform 0.75s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.75s ease;
  box-shadow: 0 0 4px currentColor;
}

/* Mystic Orb Splash Art Hover & Breathing Effect */
.mode-art-img.mystic-orb-art {
  image-rendering: pixelated;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.mode-card-btn:hover .mode-art-img.mystic-orb-art {
  transform: scale(1.08) translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.6));
}


/* =========================================================
   ONBOARDING & MILESTONE ATTENTION HIGHLIGHTS
   ========================================================= */
/* === [SNIPPET: Shop Unlock Attention Pulse Animation] === */
/* Simple & Elegant Shop Unlock Attention Glow Pulse.
   Shared "attention beacon" (every sidebar button / card pulse below and in css/components.css uses it): the element
   rests on a steady small glow (--beacon-rest) and its ::before carries the big peak glow (--beacon-glow), fading in
   and out with an opacity animation. Animating box-shadow itself repainted the whole sidebar on the main thread
   every frame (about 20 ms/s on a fast PC, far more on a phone); an opacity animation runs on the compositor.
   Variants only set the --beacon-* tokens (AGENTS.md section 10):
   --beacon-border (static border colour), --beacon-rest, --beacon-glow, --beacon-ms (period), --beacon-z. */
.btn-sidebar-shop:is(.shop-attention-pulse, .lab-attention-pulse, .factory-attention-pulse, .mint-attention-pulse, .foundry-attention-pulse),
.btn-game-selector.mode-selector-attention,
.stat-card.prestige-card.prestige-attention-pulse {
  position: relative;
  z-index: var(--beacon-z, 10);
  border-color: var(--beacon-border) !important;
  box-shadow: var(--beacon-rest) !important;
}
.btn-sidebar-shop:is(.shop-attention-pulse, .lab-attention-pulse, .factory-attention-pulse, .mint-attention-pulse, .foundry-attention-pulse)::before,
.btn-game-selector.mode-selector-attention::before,
.stat-card.prestige-card.prestige-attention-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border: inherit; /* same border width as the element, so the glow hugs its outer edge */
  border-color: transparent;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--beacon-glow);
  animation: beaconFade var(--beacon-ms, 1.8s) ease-in-out infinite;
}
@keyframes beaconFade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.btn-sidebar-shop.shop-attention-pulse {
  --beacon-border: #ffe600;
  --beacon-rest: 0 0 4px rgba(255, 230, 0, 0.35), 2px 2px 0 var(--pixel-black);
  --beacon-glow: 0 0 14px rgba(255, 230, 0, 0.85), 0 0 24px rgba(255, 215, 0, 0.4);
}

/* === [SNIPPET: Arcade Lab Attention Highlight] === */
/* Arcade Lab Button Attention Highlight */
.btn-sidebar-shop.lab-attention-pulse {
  --beacon-border: #ff2a85;
  --beacon-rest: 0 0 4px rgba(255, 42, 133, 0.35), 2px 2px 0 var(--pixel-black);
  --beacon-glow: 0 0 14px rgba(255, 42, 133, 0.85), 0 0 24px rgba(255, 128, 171, 0.4);
}

.btn-sidebar-shop.lab-attention-pulse .shop-btn-text {
  color: #ff80ab !important;
  text-shadow: 1px 1px 0 var(--pixel-black);
  animation: labTextFlash 0.9s ease-in-out infinite alternate;
}

@keyframes labTextFlash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

/* === [SNIPPET: Prestige Sanctuary Attention Highlight] === */
/* Prestige Card Attention Highlight (Milestone Ready) */
.stat-card.prestige-card.prestige-attention-pulse {
  --beacon-border: #ba68c8;
  --beacon-rest: 0 0 6px rgba(186, 104, 200, 0.4), 2px 2px 0 var(--pixel-black);
  --beacon-glow: 0 0 14px rgba(234, 128, 252, 0.8);
  --beacon-ms: 1.2s;
  --beacon-z: 5;
  cursor: pointer;
}

/* The badge pulse crossfades to its bright colours with an opacity animation on a ::before (behind the text) */
.stat-card.prestige-card.prestige-attention-pulse .prestige-unclaimed-badge {
  position: relative;
  isolation: isolate;
}
.stat-card.prestige-card.prestige-attention-pulse .prestige-unclaimed-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid #c084fc;
  border-radius: 2px;
  background: #4a1d96;
  opacity: 0;
  animation: beaconFade 1.2s ease-in-out infinite;
}

/* === [SNIPPET: Top Game Mode Switcher Button Attention Highlight] === */
/* === [SNIPPET: Top Game Mode Switcher Attention Highlight] === */
/* Top Sidebar Game Mode Switcher Button Attention Highlight (New Attraction Ready) */
.btn-game-selector.mode-selector-attention {
  --beacon-border: var(--selector-accent, #00f0ff);
  --beacon-rest: var(--pixel-shadow-sm);
  --beacon-glow: 0 0 16px 4px var(--selector-glow, rgba(0, 240, 255, 0.95)), 0 0 26px var(--selector-glow-outer, rgba(0, 180, 216, 0.6));
  --beacon-ms: 1.1s;
  --beacon-z: 5;
}

.btn-game-selector.mode-selector-attention #currentModeLabel {
  color: #ffffff !important;
  text-shadow: 1px 1px 0 var(--pixel-black);
}

.btn-game-selector.mode-selector-attention .selector-dot {
  background: var(--selector-accent, #00f0ff) !important;
  animation: selectorDotFlash 0.5s ease-in-out infinite alternate;
}

@keyframes selectorDotFlash {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 1; }
}

/* === [SNIPPET: Mystic Shop Attention Highlight] === */
/* Mystic Shop Button Attention Highlight (> 5 Diamonds Unlocked) */
.btn-sidebar-shop.mode-prestige.shop-attention-pulse {
  --beacon-border: #ba68c8;
  --beacon-rest: 0 0 4px rgba(186, 104, 200, 0.4), 2px 2px 0 var(--pixel-black);
  --beacon-glow: 0 0 16px rgba(216, 180, 254, 0.85), 0 0 24px rgba(147, 51, 234, 0.5);
  --beacon-ms: 1.2s;
}

.btn-sidebar-shop.mode-prestige.shop-attention-pulse .shop-btn-text {
  color: #e9d5ff !important;
  text-shadow: 1px 1px 0 var(--pixel-black);
}

/* =========================================================
   AUDIO & GAME SETTINGS MODAL
   ========================================================= */
/* === [SNIPPET: Audio & Game Settings Modal] === */
#prestigeConfirmModal,
#prestigeCooldownModal {
  /* Must sit above #prestigeModal, which is created later and would otherwise cover it */
  z-index: 1100;
}

#prestigeModal,
#prestigeConfirmModal,
#prestigeCooldownModal {
  /* See-through backdrop so the game stays visible around the popup */
  background: rgba(8, 6, 14, 0.5);
}

#settingsModal {
  z-index: 15000 !important;
  /* See-through backdrop so the game stays visible around the settings box (no blur, to keep GPU cost flat) */
  background: rgba(8, 6, 14, 0.5);
}

.modal-dialog.settings-dialog,
.settings-dialog {
  max-width: min(520px, 94vw, calc(94vw / var(--ui-scale, 1)));
  width: 92%;
  max-height: min(92vh, calc(92vh / var(--ui-scale, 1)));
  max-height: min(92dvh, calc(92dvh / var(--ui-scale, 1)));
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  zoom: var(--ui-scale, 1) !important;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  border-bottom: 3px solid var(--pixel-black);
  padding-bottom: 8px;
  flex-shrink: 0;
}

.settings-header h2 {
  font-family: var(--font-pixel);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pixel-gold);
  margin: 0;
  letter-spacing: 0.05em;
}

.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-right: 8px;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: #55447a #141122;
}

.settings-body::-webkit-scrollbar {
  width: 8px;
}
.settings-body::-webkit-scrollbar-track {
  background: #120e21;
  border-left: 1px solid var(--pixel-black);
}
.settings-body::-webkit-scrollbar-thumb {
  background: #524378;
  border: 1px solid var(--pixel-black);
}
.settings-body::-webkit-scrollbar-thumb:hover {
  background: #6a5899;
}

/* Settings Grouped Sections */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px 4px 2px;
}

.settings-section-title {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  color: #8c82ab;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-section-line {
  flex: 1;
  height: 2px;
  background: #2b2245;
  border-bottom: 1px solid #141122;
}

.settings-section-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-card {
  background: #231c38;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 #0f0c1c;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
  width: 100%;
}

.settings-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-card-title {
  font-family: var(--font-pixel);
  font-size: 8.5px;
  font-weight: 700;
  color: #ded9f0;
  letter-spacing: 0.03em;
}

.volume-val-badge {
  font-family: var(--font-pixel);
  color: #cfc8ea;
  font-weight: 700;
  font-size: 8px;
}

.volume-val-badge.muted {
  color: #ff5277;
}

.settings-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-sound-icon-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #17122b;
  border: 2px solid var(--pixel-black);
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.btn-sound-icon-toggle:hover {
  background: #251e3a;
  border-color: #5d4e8c;
}

.btn-sound-icon-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.btn-sound-icon-toggle.muted {
  background: #2c1820;
  border-color: var(--pixel-red);
}

.settings-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.sfx-pixel-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Speaker Outline (Black %23000000) --%3E%3Crect x=%221%22 y=%228%22 width=%226%22 height=%228%22 fill=%22%23000000%22/%3E%3Cpolygon points=%226%2C8 13%2C3 14%2C3 14%2C21 13%2C21 6%2C16%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Cyan Fill (%2300f0ff) --%3E%3Crect x=%222%22 y=%229%22 width=%224%22 height=%226%22 fill=%22%2300f0ff%22/%3E%3Cpolygon points=%226%2C9 12%2C4 13%2C4 13%2C20 12%2C20 6%2C15%22 fill=%22%2300f0ff%22/%3E%3C!-- Solid Flat Gold Waves (%23ffcc00) --%3E%3C!-- Inner Wave --%3E%3Crect x=%2215%22 y=%229%22 width=%222%22 height=%226%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%2210%22 width=%221%22 height=%224%22 fill=%22%23ffcc00%22/%3E%3Crect x=%2214%22 y=%229%22 width=%221%22 height=%221%22 fill=%22%23ffcc00%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%221%22 height=%221%22 fill=%22%23ffcc00%22/%3E%3C!-- Outer Wave --%3E%3Crect x=%2220%22 y=%226%22 width=%222%22 height=%2212%22 fill=%22%23000000%22/%3E%3Crect x=%2219%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2219%22 y=%2217%22 width=%222%22 height=%222%22 fill=%22%23000000%22/%3E%3Crect x=%2220%22 y=%227%22 width=%221%22 height=%2210%22 fill=%22%23ffcc00%22/%3E%3Crect x=%2219%22 y=%226%22 width=%221%22 height=%221%22 fill=%22%23ffcc00%22/%3E%3Crect x=%2219%22 y=%2217%22 width=%221%22 height=%221%22 fill=%22%23ffcc00%22/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.sfx-pixel-icon.muted,
.btn-sound-icon-toggle.muted .sfx-pixel-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Speaker Outline (Black %23000000) --%3E%3Crect x=%221%22 y=%228%22 width=%226%22 height=%228%22 fill=%22%23000000%22/%3E%3Cpolygon points=%226%2C8 13%2C3 14%2C3 14%2C21 13%2C21 6%2C16%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Muted Gray Fill (%2364748b) --%3E%3Crect x=%222%22 y=%229%22 width=%224%22 height=%226%22 fill=%22%2364748b%22/%3E%3Cpolygon points=%226%2C9 12%2C4 13%2C4 13%2C20 12%2C20 6%2C15%22 fill=%22%2364748b%22/%3E%3C!-- Solid Flat Red X (%23ff2252) --%3E%3Crect x=%2215%22 y=%227%22 width=%228%22 height=%2210%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2217%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2219%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2221%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2221%22 y=%228%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2219%22 y=%2210%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2217%22 y=%2212%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2215%22 y=%2214%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.bgm-pixel-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Note Outline (Black %23000000) --%3E%3Crect x=%226%22 y=%222%22 width=%2216%22 height=%225%22 fill=%22%23000000%22/%3E%3Crect x=%226%22 y=%224%22 width=%224%22 height=%2214%22 fill=%22%23000000%22/%3E%3Crect x=%2218%22 y=%224%22 width=%224%22 height=%2211%22 fill=%22%23000000%22/%3E%3Crect x=%222%22 y=%2214%22 width=%229%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%223%22 y=%2213%22 width=%227%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%2214%22 y=%2211%22 width=%229%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%2210%22 width=%227%22 height=%229%22 fill=%22%23000000%22/%3E%3C!-- Pure Solid Flat Pink Fill (%23ff2a85) --%3E%3Crect x=%227%22 y=%223%22 width=%2214%22 height=%223%22 fill=%22%23ff2a85%22/%3E%3Crect x=%227%22 y=%226%22 width=%222%22 height=%2210%22 fill=%22%23ff2a85%22/%3E%3Crect x=%2219%22 y=%226%22 width=%222%22 height=%227%22 fill=%22%23ff2a85%22/%3E%3Crect x=%223%22 y=%2215%22 width=%227%22 height=%225%22 fill=%22%23ff2a85%22/%3E%3Crect x=%224%22 y=%2214%22 width=%225%22 height=%227%22 fill=%22%23ff2a85%22/%3E%3Crect x=%2215%22 y=%2212%22 width=%227%22 height=%225%22 fill=%22%23ff2a85%22/%3E%3Crect x=%2216%22 y=%2211%22 width=%225%22 height=%227%22 fill=%22%23ff2a85%22/%3E%3C/svg%3E") center / contain no-repeat;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.bgm-pixel-icon.muted,
.btn-sound-icon-toggle.muted .bgm-pixel-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 shape-rendering=%22crispEdges%22%3E%3C!-- Muted Note Silhouette --%3E%3Crect x=%224%22 y=%224%22 width=%2211%22 height=%224%22 fill=%22%23000000%22/%3E%3Crect x=%224%22 y=%226%22 width=%223%22 height=%2212%22 fill=%22%23000000%22/%3E%3Crect x=%2212%22 y=%226%22 width=%223%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%221%22 y=%2214%22 width=%228%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%222%22 y=%2213%22 width=%226%22 height=%229%22 fill=%22%23000000%22/%3E%3Crect x=%229%22 y=%2212%22 width=%228%22 height=%227%22 fill=%22%23000000%22/%3E%3Crect x=%2210%22 y=%2211%22 width=%226%22 height=%229%22 fill=%22%23000000%22/%3E%3C!-- Solid Flat Gray Fill (%2364748b) --%3E%3Crect x=%225%22 y=%225%22 width=%229%22 height=%222%22 fill=%22%2364748b%22/%3E%3Crect x=%225%22 y=%227%22 width=%221%22 height=%229%22 fill=%22%2364748b%22/%3E%3Crect x=%2213%22 y=%227%22 width=%221%22 height=%226%22 fill=%22%2364748b%22/%3E%3Crect x=%222%22 y=%2215%22 width=%226%22 height=%225%22 fill=%22%2364748b%22/%3E%3Crect x=%2210%22 y=%2213%22 width=%226%22 height=%225%22 fill=%22%2364748b%22/%3E%3C!-- Solid Flat Red X (%23ff2252) --%3E%3Crect x=%2215%22 y=%222%22 width=%228%22 height=%2210%22 fill=%22%23000000%22/%3E%3Crect x=%2215%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2217%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2219%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2221%22 y=%229%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2221%22 y=%223%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2219%22 y=%225%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2217%22 y=%227%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3Crect x=%2215%22 y=%229%22 width=%222%22 height=%222%22 fill=%22%23ff2252%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* === [SNIPPET: Audio Settings Custom Range Slider] === */
/* Custom Arcade Range Slider - Unified across Audio and UI Scaling */
.arcade-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  flex: 1;
  height: 12px;
  background: #0f0b1c;
  border: 2px solid var(--pixel-black);
  outline: none;
  margin: 0;
  cursor: pointer;
  /* Vertical swipes over the slider still scroll the settings panel; only knob drags change the value (see grab_slider.js) */
  touch-action: pan-y;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}

.settings-card.is-muted .arcade-slider {
  opacity: 0.45;
}

.arcade-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 22px;
  background: #e0b324;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 var(--pixel-black);
  cursor: pointer;
  transition: background 0.1s ease;
}

.arcade-slider::-webkit-slider-thumb:hover {
  background: #ffd54f;
}

.arcade-slider::-moz-range-thumb {
  width: 16px;
  height: 22px;
  background: #e0b324;
  border: 2px solid var(--pixel-black);
  box-shadow: 2px 2px 0 var(--pixel-black);
  cursor: pointer;
}

/* === [SNIPPET: UI Scaling Selector] === */
/* UI Scaling is a .segmented-control of .btn-segment.dial-mark buttons (index.html); styled with the other segments. */

/* In-Game Floating HUD Overlays & Shop Controls UI Scale */
.plinko-ball-hud,
.coin-flip-rush-hud,
.trial-hud-overlay,
.powerup-active-bar,
.wave-cleared-banner,
.fullscreen-dialog .modal-header,
.fullscreen-dialog /* === [SNIPPET: Skill Tree Floating Node Detail Pop-up Card] === */
.node-popup-card {
  zoom: var(--ui-scale, 1);
}

/* Segmented Control (Sidebar Position, Particles, Static BG, Auto-Save) */
.segmented-control {
  display: flex;
  width: 100%;
  background: #120e21;
  border: 2px solid var(--pixel-black);
  padding: 3px;
  gap: 4px;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.btn-segment {
  flex: 1;
  background: #181329;
  color: #887e9f;
  border: 2px solid transparent;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 7.5px 8px;
  cursor: pointer;
  text-align: center;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.btn-segment:hover:not(.active) {
  background: #251e3a;
  color: var(--pixel-white);
}

.btn-segment.active {
  background: #3e3363;
  color: #ffdf7a;
  border-color: #635398;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), 1px 1px 0 var(--pixel-black);
}

/* === [SNIPPET: Settings Reset Button (In-Card)] === */
/* Reset Defaults button - now lives inside a settings card, not a footer */
.btn-reset-audio {
  background: #374151;
  color: #d1d5db;
  border: 2px solid var(--pixel-black);
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.06s ease, background 0.1s ease;
  width: 100%;
  text-align: center;
}

.btn-reset-audio:hover {
  background: #4b5563;
  color: #fff;
}

.btn-reset-audio:active {
  transform: translate(1px, 1px);
}

@media (max-height: 500px) {
  .settings-dialog {
    max-height: min(96vh, calc(96vh / var(--ui-scale, 1)));
    max-height: min(96dvh, calc(96dvh / var(--ui-scale, 1)));
    padding: 10px 14px;
  }
  .settings-header {
    margin-bottom: 10px;
    padding-bottom: 4px;
  }
  .settings-header h2 {
    font-size: 11px;
  }
  .settings-body {
    gap: 16px;
  }
  .settings-section-cards {
    gap: 10px;
  }
  .settings-card {
    padding: 10px 10px;
    gap: 8px;
  }
  .settings-card-title {
    font-size: 8.5px;
  }
  .volume-val-badge {
    font-size: 8px;
  }
  .btn-sound-icon-toggle,
  .settings-icon-box {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }
  .btn-segment {
    padding: 6px 8px;
    font-size: 8px;
  }
  .settings-footer-row {
    margin-top: 4px;
    padding-top: 6px;
  }
  .btn-reset-audio {
    padding: 6px 10px;
    font-size: 7.5px;
  }
  .btn-settings-done {
    padding: 6px 14px;
    font-size: 8px;
  }
}

/* =========================================================
   SKILL TREE FULLSCREEN OVERLAY MODAL
   ========================================================= */
/* === [SNIPPET: Skill Tree Fullscreen Modal Overlay] === */
.modal-fullscreen,
#shopModal {
  background: #04060e;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  /* Backdrop is ~opaque; a live blur of the animating game canvas behind it only causes repaint flicker */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fullscreen-dialog,
.fullscreen-dialog:focus,
.fullscreen-dialog:focus-visible,
.fullscreen-dialog:active {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  background: rgb(9, 14, 26);
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  outline: none !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Shop Header (Cleanly padded inside popup window) */
.fullscreen-dialog .modal-header,
#shopModal .modal-header {
  position: absolute;
  top: max(24px, env(safe-area-inset-top, 24px));
  left: max(48px, env(safe-area-inset-left, 48px));
  right: max(48px, env(safe-area-inset-right, 48px));
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pixel-panel);
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-md);
  padding: 6px 14px;
  pointer-events: auto;
}

.modal-title-group h2 {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  color: var(--pixel-white);
}

.shop-tree-switcher {
  display: flex;
  gap: 6px;
}

.btn-shop-tab {
  background: var(--pixel-card);
  border: 2px solid var(--pixel-black);
  color: var(--pixel-gray);
  padding: 4px 8px;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.06s ease;
}

.btn-shop-tab:hover {
  color: var(--pixel-white);
}

.btn-shop-tab.active {
  background: var(--pixel-cyan);
  color: var(--pixel-black);
  border-color: var(--pixel-black);
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}


.modal-coin-balance {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 154px;
  min-width: 154px;
  max-width: 154px;
  height: 38px;
  box-sizing: border-box;
  flex-shrink: 0;
  background: var(--pixel-panel);
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-sm);
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-gold);
}

.modal-coin-balance span {
  flex: 1;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}

/* Tree Viewport (Canvas Circuit Grid) */
.tree-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  background: transparent;
  touch-action: none;
}

.tree-viewport:active {
  cursor: grabbing;
}


/* =========================================================
   Floating Node Detail Pop-up Card (Retro RPG Item Box)
   ========================================================= */
.node-popup-card {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  right: max(48px, env(safe-area-inset-right, 48px));
  width: 410px;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 80px);
  overflow-y: auto;
  background: rgba(23, 19, 38, 0.90) !important;
  border: 4px solid var(--pixel-black);
  outline: 2px solid var(--pixel-cyan);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), var(--pixel-shadow-xl);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: break-word;
}

.node-popup-card:active,
.node-popup-card:focus,
.node-popup-card:focus-within {
  outline: 2px solid var(--pixel-cyan);
}

.btn-close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: #251e38;
  border: 2px solid var(--pixel-black);
  color: #9d96b8;
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  transition: background 0.1s ease, color 0.1s ease, transform 0.06s ease;
  z-index: 10;
  padding: 0;
}

.btn-close-popup:hover {
  background: #ff1744;
  color: #ffffff;
  border-color: #ff5252;
}

.btn-close-popup:active {
  transform: scale(0.92);
}

.node-popup-card.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

@media (max-width: 600px), (max-height: 500px) {
  .modal-fullscreen {
    padding: 0;
  }
  .fullscreen-dialog {
    width: 100vw;
    height: 100vh;
  }
  .node-popup-card {
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    right: max(48px, env(safe-area-inset-right, 48px));
    width: 360px;
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    padding: 12px 14px;
  }
}
.popup-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-right: 28px;
}

.inspector-title {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--pixel-white);
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}

.inspector-level {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-gold);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}

.inspector-desc {
  font-family: var(--font-pixel-sub);
  font-size: 12px;
  line-height: 1.45;
  color: var(--pixel-light-gray);
  margin-bottom: 12px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.inspector-stats {
  background: var(--pixel-card);
  border: 2px solid var(--pixel-black);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.stat-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-pixel-sub);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-gray);
}

.stat-row span {
  flex: 0 0 auto;
  min-width: 80px;
  white-space: nowrap;
}

.stat-row strong {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.3;
  color: var(--pixel-white);
  text-align: left;
  word-break: break-word;
}

.stat-row .text-accent {
  color: var(--pixel-gold);
}

.inspector-prereq {
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  color: var(--pixel-red);
  background: var(--pixel-black);
  padding: 6px 8px;
  border: 1px solid var(--pixel-red);
  margin-bottom: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.btn-upgrade {
  width: 100%;
  padding: 11px 8px;
  background: var(--pixel-gold);
  border: 3px solid var(--pixel-black);
  color: var(--pixel-black);
  font-family: var(--font-pixel);
  font-size: clamp(9px, 2.2vw, 11px);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-md);
  transition: transform 0.06s ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  box-sizing: border-box;
}

.btn-upgrade:hover:not(.btn-upgrade-locked) {
  background: #ffd633;
}

.btn-upgrade:active:not(.btn-upgrade-locked),
.btn-upgrade.is-holding:not(.btn-upgrade-locked) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

/* Stays clickable while locked (rather than the native disabled attribute) so pressing it while unaffordable
   can still shake via .btn-denied-shake - see the Standard Denied Button Shake rule. MAX LEVEL and LOCKED
   (prerequisite) states share this same look but don't shake, since neither is "unaffordable" or "on cooldown".
   No `transform` override here: an !important transform on this class would beat the .btn-denied-shake
   keyframes' own transform (important declarations win over a running animation), silently killing the shake. */
.btn-upgrade.btn-upgrade-locked,
.modal-backdrop .btn-upgrade.btn-upgrade-locked {
  background: #2a2538 !important;
  color: #665e7d !important;
  border-color: var(--pixel-black) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn-upgrade,
.btn-upgrade span,
.btn-upgrade .currency-tag,
.btn-upgrade .currency-tag .currency-val {
  color: #000000 !important;
}

.btn-upgrade .currency-tag {
  gap: 4px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

.btn-upgrade.btn-upgrade-locked,
.btn-upgrade.btn-upgrade-locked span,
.btn-upgrade.btn-upgrade-locked .currency-tag,
.btn-upgrade.btn-upgrade-locked .currency-tag .currency-val {
  color: #665e7d !important;
}

.btn-upgrade.btn-upgrade-locked .currency-tag-icon {
  opacity: 0.5;
  filter: grayscale(0.8);
}

/* =========================================================
   Power-Up Capsule Upgrade Shop Modal (List-Based)
   ========================================================= */
/* === [SNIPPET: Power-Up Capsule Upgrade Shop Modal] === */
.powerup-list-dialog {
  max-width: 660px;
  width: 92%;
  max-height: 88vh;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-card, #1c1829);
  border: 4px solid var(--pixel-black);
  box-shadow: 6px 6px 0 var(--pixel-black);
}

.powerup-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 3px solid var(--pixel-black);
  padding-bottom: 10px;
  gap: 12px;
  flex-shrink: 0;
}

.powerup-title-group h2 {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  color: var(--pixel-gold);
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.powerup-modal-subtitle {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #9088a8;
  letter-spacing: 0.5px;
}

.powerup-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-star-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #13101c;
  border: 2px solid var(--pixel-black);
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--pixel-gold);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--pixel-black);
}

.modal-star-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
}

.powerup-modal-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  /* Still scrolls (wheel, drag, touch) but without the default scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.powerup-modal-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.powerup-list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.powerup-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #262135;
  border: 3px solid var(--pixel-black);
  box-shadow: 3px 3px 0 var(--pixel-black);
  padding: 12px 14px;
  border-radius: 4px;
  position: relative;
  transition: transform 0.1s ease, border-color 0.1s ease;
}

.powerup-list-item.item-locked {
  background: #1f1b2b;
  border-color: #38304c;
  opacity: 0.9;
}

.powerup-list-item.item-maxed {
  border-color: var(--pixel-gold);
  box-shadow: 3px 3px 0 var(--pixel-black), inset 0 0 10px rgba(255, 213, 79, 0.08);
}

.powerup-item-left {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.powerup-vertical-meter {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  justify-content: center;
  align-items: center;
  padding: 4px 3px;
  background: #14101e;
  border: 2px solid var(--pixel-black);
  border-radius: 3px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.7);
  flex-shrink: 0;
}

.powerup-vertical-meter .lvl-pip {
  width: 9px;
  height: 6px;
  background: #2a233a;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 1px;
  display: block;
}

.powerup-vertical-meter .lvl-pip.pip-filled {
  background: var(--pixel-gold);
  box-shadow: 0 0 5px rgba(255, 213, 79, 0.85);
  border-color: #FFA000;
}

.powerup-list-icon {
  width: 46px;
  height: 46px;
  background: #14101e;
  border: 3px solid var(--item-color, #00F0FF);
  box-shadow: 2px 2px 0 var(--pixel-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.powerup-icon-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.powerup-list-icon svg {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}

.powerup-list-icon.powerup-pod-icon {
  background: transparent;
  border: none;
  box-shadow: none;
}

.powerup-list-icon.powerup-pod-icon svg {
  width: 46px;
  height: 46px;
  filter: drop-shadow(2px 2px 0 var(--pixel-black));
}

/* Arcade Lab capsule icons: same sprite + glyph layout as the in-game capsules (44px art, 24px glyph at 10,10) */
.lab-capsule {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.lab-capsule-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 var(--pixel-black));
}

.lab-capsule-glyph {
  position: absolute;
  left: 22.7%;
  top: 22.7%;
  width: 54.5%;
  height: 54.5%;
  display: flex;
}

.powerup-list-icon .lab-capsule-glyph svg {
  width: 100%;
  height: 100%;
  filter: none;
}

/* Arcade Lab clusters built from in-game sprites (balls, tickets, coins) */
.lab-cluster {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.lab-cluster-img {
  position: absolute;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 var(--pixel-black));
}

.lab-cluster-img.lab-cluster-dim {
  filter: brightness(0.65) drop-shadow(1px 1px 0 var(--pixel-black));
}

.lab-capsule-cluster {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.lab-capsule-cluster .lab-capsule {
  position: absolute;
  width: 24px;
  height: 24px;
}

.lab-capsule-cluster .lab-capsule-body {
  filter: drop-shadow(1px 1px 0 var(--pixel-black));
}

.lab-capsule-a { left: 11px; top: 0; }
.lab-capsule-b { left: 0; top: 22px; }
.lab-capsule-c { left: 22px; top: 22px; }

.powerup-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.powerup-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.powerup-item-name {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lab-game-tag {
  font-family: var(--font-pixel);
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  border: 1px solid var(--pixel-black);
}

.lab-game-tag.claw {
  background: #311b42;
  color: #FF80AB;
}

.lab-game-tag.plinko {
  background: #0d2e1f;
  color: #00E676;
}

.powerup-item-desc {
  font-size: 11px;
  color: #cfc8e6;
  line-height: 1.35;
}

.powerup-item-effect {
  font-family: var(--font-pixel);
  font-size: 8.5px;
  color: #9e9eb4;
  line-height: 1.3;
}

.powerup-item-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 154px;
}

.lab-btn-star {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='12' height='16' fill='%23FF2A85'/%3E%3Crect x='0' y='2' width='16' height='12' fill='%23FF2A85'/%3E%3Crect x='2' y='2' width='12' height='12' fill='%23FFA6CE'/%3E%3Crect x='7' y='3' width='2' height='3' fill='%23FFFFFF'/%3E%3Crect x='3' y='6' width='10' height='3' fill='%23FFFFFF'/%3E%3Crect x='5' y='9' width='6' height='2' fill='%23FFFFFF'/%3E%3Crect x='4' y='11' width='3' height='3' fill='%23FFFFFF'/%3E%3Crect x='9' y='11' width='3' height='3' fill='%23FFFFFF'/%3E%3C/svg%3E") center / contain no-repeat;
  margin: 0 3px;
}

.btn-powerup-action {
  width: 100%;
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  padding: 12px 16px;
  min-height: 42px;
  border: 3px solid var(--pixel-black);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.5px;
  background: #38304c;
  color: #7d7398;
  cursor: not-allowed;
  box-shadow: none;
  transition: all 0.08s ease;
}

.btn-powerup-action.btn-can-afford {
  background: var(--pixel-gold);
  color: #1c1829;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pixel-black);
}

.btn-powerup-action.btn-can-afford:hover {
  background: #FFE082;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pixel-black);
}

.btn-powerup-action.btn-can-afford:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

.btn-powerup-action:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}



@media (max-width: 600px) {
  .powerup-list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .powerup-item-actions {
    width: 100%;
  }
  .btn-powerup-action {
    width: 100%;
    padding: 12px 14px;
    font-size: 11px;
  }
}


/* =========================================================
   TRIAL Result Modal (Retro Arcade "STAGE CLEAR" Scoreboard)
   ========================================================= */
/* === [SNIPPET: Trial Stage Clear Result Scoreboard Modal] === */
.trial-result-dialog {
  max-width: 420px;
  width: 90%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trial-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--pixel-black);
  padding-bottom: 8px;
}

.trial-result-header h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--pixel-white);
  margin: 0;
}

.trial-record-pill {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  background: var(--pixel-gold);
  color: var(--pixel-black);
  padding: 3px 6px;
  border: 2px solid var(--pixel-black);
}

.trial-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.trial-result-card {
  background: var(--pixel-card);
  border: 2px solid var(--pixel-black);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--pixel-shadow-sm);
}

.trial-result-card.full-width {
  grid-column: 1 / -1;
  background: #332b4f;
}

.card-lbl {
  font-family: var(--font-pixel-sub);
  font-size: 8px;
  font-weight: 700;
  color: var(--pixel-gray);
  text-transform: uppercase;
}

.card-val {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--pixel-white);
}

.card-val.highlight {
  font-size: 16px;
  color: var(--pixel-gold);
}

.trial-best-summary {
  font-size: 9px;
  font-family: var(--font-pixel-sub);
  font-weight: 700;
  color: var(--pixel-gray);
  text-align: center;
}

.btn-trial-confirm {
  width: 100%;
  padding: 10px;
  background: var(--pixel-gold);
  color: var(--pixel-black);
  border: 3px solid var(--pixel-black);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-md);
  transition: transform 0.06s ease;
}

.btn-trial-confirm:hover {
  background: #ffd633;
}

.btn-trial-confirm:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pixel-black);
}

/* =========================================================
   Offline Simulation Loading Screen (Minimalist Retro Boot)
   ========================================================= */
/* === [SNIPPET: Offline Simulation Loading Screen] === */
#offlineLoadingModal {
  /* The one opaque screen: nothing of the game shows while it loads (every other popup dims to 50%, see [SNIPPET: Pixel UI Popup Backdrop]) */
  background: #08060e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 999999 !important;
}

.offline-loading-dialog {
  width: min(340px, 86vw);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #141026;
  border: 3px solid var(--pixel-black, #000);
  box-shadow: 4px 4px 0 var(--pixel-black, #000);
  box-sizing: border-box;
  zoom: var(--ui-scale, 1);
  text-align: center;
  outline: none !important;
}

.offline-loading-title {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--pixel-gold, #ffd54f);
  letter-spacing: 1.5px;
  text-shadow: 3px 3px 0 #7a4f00;
}

/* Segmented loading bar (same look as the sidebar meters): 20 blocks with gaps, each outlined in black; lit blocks
   take the popup accent, the block in progress is half lit. js/ui/offline_modal.js lights them via renderSegments(). */
.offline-loading-track {
  width: 100%;
  display: flex;
  gap: 3px;
  margin: 2px 0;
}
.offline-loading-track i {
  flex: 1;
  height: 12px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px var(--pixel-black, #000);
}
.offline-loading-track i.on { background: var(--px-accent, #b9a6ff); }
.offline-loading-track i.part { background: var(--px-accent, #b9a6ff); opacity: 0.5; }

.offline-loading-status {
  font-family: var(--font-pixel-sub);
  font-size: 11px;
  color: #b8b2cf;
  min-height: 12px;
  line-height: 1.2;
}

/* =========================================================
   Offline Revenue Modal (Offline Bank Showcase)
   ========================================================= */
/* === [SNIPPET: Offline Revenue & Bank Showcase Modal] === */
/* Pixel UI layout (same as the mockup): title + subtitle, OFFLINE BANK well with a 16-block meter and hour marks,
   EARNED list ([icon] +base amount, "4X WITH AD" hint), green ad button and a plain CLAIM button. The frame, the
   well corners and the ad button green come from css/pixel_ui.css. */
.offline-dialog {
  max-width: min(420px, 92vw, calc(92vw / var(--ui-scale, 1)));
  width: 92%;
  max-height: min(88vh, calc(88vh / var(--ui-scale, 1)));
  max-height: min(88dvh, calc(88dvh / var(--ui-scale, 1)));
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.offline-modal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 2px;
}

.offline-modal-title {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 2px 2px 0 #000;
}

.offline-modal-subtitle {
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  color: var(--px-accent, #b9a6ff);
  letter-spacing: 0.5px;
}

/* OFFLINE BANK well (corners + inset come from the Pixel UI inset wells) */
.offline-bank-container {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  box-sizing: border-box;
}

.offline-bank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pixel);
  font-size: 9px;
}

.offline-bank-lbl { color: #ffffff; white-space: nowrap; }
.offline-bank-cap-badge { color: #ff5a7a; white-space: nowrap; }

/* 16-block meter, lit by renderSegments() (solid blocks + one half-lit block) */
.offline-bank-meter {
  display: flex;
  gap: 3px;
  margin: 10px 0 5px;
}
.offline-bank-meter i {
  flex: 1;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 1px var(--pixel-black, #000);
}
.offline-bank-meter i.on { background: var(--px-accent, #b9a6ff); }
.offline-bank-meter i.part { background: var(--px-accent, #b9a6ff); opacity: 0.5; }

.offline-bank-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel-sub);
  font-size: 9px;
  color: #b8b2cf;
}

.offline-bank-ratio {
  align-self: flex-end;
  margin-top: 6px;
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  color: #b8b2cf;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.offline-time-val { display: none; }

/* "EARNED" section label with a dashed rule, like the Settings sections */
.offline-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--px-accent, #b9a6ff);
}
.offline-section-head::after {
  content: "";
  flex: 1;
  border-top: 2px dashed rgba(255, 255, 255, 0.1);
}

.offline-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* EARNED list: one dark well, rows split by dashed lines; scrolls if many currencies */
.offline-currencies-container {
  display: flex;
  flex-direction: column;
  max-height: min(210px, 35vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid var(--pixel-black, #000);
  clip-path: var(--px-notch);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--px-accent, #b9a6ff) transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.offline-currency-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  width: 100%;
  box-sizing: border-box;
}
.offline-currency-card + .offline-currency-card { border-top: 2px dashed rgba(255, 255, 255, 0.08); }

.offline-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.offline-item-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  display: inline-block;
  image-rendering: pixelated;
}

.offline-item-icon.coin-pixel-icon {
  background: url("assets/svg/global/currencies/gold_coin.svg") center / contain no-repeat;
}

.offline-item-icon.gold-bar-pixel-icon {
  background: url("assets/svg/global/currencies/gold_bar.svg") center / contain no-repeat;
}

.offline-item-icon.ticket-red-pixel-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18' viewBox='0 0 26 18' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h22v5h-2v2h-1v4h1v2h2v5H2v-5h2v-2h1V7H4V5H2z' fill='%23000'/%3E%3Cpath d='M3 1h20v4h-2v2h-1v4h1v2h2v4H3v-4h2v-2h1V7H5V5H3z' fill='%23d50000'/%3E%3Cpath d='M3 1h20v1H3zm0 1h1v3h1v2H3z' fill='%23ff5252'/%3E%3Cpath d='M3 16h20v1H3zm18-3h2v3h-2z' fill='%23790000'/%3E%3Crect x='7' y='3' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='7' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='11' width='1' height='2' fill='%23ff8a80'/%3E%3Crect x='7' y='15' width='1' height='1' fill='%23ff8a80'/%3E%3Crect x='19' y='3' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='7' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='11' width='1' height='2' fill='%23790000'/%3E%3Crect x='19' y='15' width='1' height='1' fill='%23790000'/%3E%3Crect x='13' y='7' width='2' height='5' fill='%23000'/%3E%3Crect x='11' y='9' width='6' height='2' fill='%23000'/%3E%3Crect x='13' y='6' width='2' height='5' fill='%23ffd54f'/%3E%3Crect x='11' y='8' width='6' height='2' fill='%23ffd54f'/%3E%3Crect x='12' y='7' width='4' height='3' fill='%23ffd54f'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}

.offline-item-icon.dollar-bill-pixel-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' width='28' height='16' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='26' height='16' fill='%23000000'/%3E%3Crect x='0' y='1' width='28' height='14' fill='%23000000'/%3E%3Crect x='1' y='1' width='26' height='14' fill='%230b5328'/%3E%3Crect x='2' y='2' width='24' height='12' fill='%231b8a47'/%3E%3Crect x='3' y='3' width='22' height='10' fill='%230e6231'/%3E%3Crect x='4' y='4' width='20' height='8' fill='%23157a3e'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='24' y='2' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='2' y='12' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='24' y='12' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='11' y='4' width='6' height='8' fill='%230b5328'/%3E%3Crect x='10' y='5' width='8' height='6' fill='%230b5328'/%3E%3Crect x='11' y='5' width='6' height='6' fill='%231e9b50'/%3E%3Crect x='12' y='5' width='4' height='6' fill='%232ee57a'/%3E%3Crect x='5' y='6' width='3' height='1' fill='%232ee57a'/%3E%3Crect x='6' y='7' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='5' y='9' width='3' height='1' fill='%232ee57a'/%3E%3Crect x='20' y='6' width='3' height='1' fill='%232ee57a'/%3E%3Crect x='20' y='7' width='2' height='2' fill='%232ee57a'/%3E%3Crect x='20' y='9' width='3' height='1' fill='%232ee57a'/%3E%3C/svg%3E") no-repeat center / contain;
}

.offline-base-num {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: #ffffff;
  white-space: nowrap;
}

.offline-ad-hint {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--pixel-gold, #ffcc00);
  white-space: nowrap;
  flex-shrink: 0;
}

.offline-modal-actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  margin-top: 4px;
}

/* WATCH AD 4X: layout only, its green comes from [SNIPPET: Ad Button Standard] */
.btn-offline-4x {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--font-pixel);
  font-size: 10px;
  cursor: pointer;
}

/* CLAIM (BASE VALUE): plain panel button */
.btn-offline-claim {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  background: var(--px-card, #2b2544);
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 10px;
  cursor: pointer;
  text-align: center;
}
.btn-offline-claim:hover { background: var(--px-hover, #3a3160); }

/* =========================================================
   Mobile Orientation Warning (Pixel Art Console Graphic)
   ========================================================= */
/* === [SNIPPET: Mobile Orientation Warning Console Graphic] === */
.portrait-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  background: var(--pixel-darkest);
  z-index: 999999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  .portrait-warning {
    display: flex !important;
  }
}

.portrait-warning h2 {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--pixel-white);
  margin-top: 16px;
}

.portrait-warning p {
  font-family: var(--font-pixel-sub);
  font-size: 12px;
  color: var(--pixel-gray);
  margin-top: 8px;
}

/* Pixel Art Phone Rotate Graphic */
.rotate-icon {
  width: 44px;
  height: 68px;
  border: 4px solid var(--pixel-cyan);
  position: relative;
  margin-bottom: 12px;
  box-shadow: var(--pixel-shadow-md);
  animation: rotatePixelPhone 2.2s infinite steps(4);
}

.rotate-icon::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 4px;
  background: var(--pixel-cyan);
}

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

/* =========================================================
   Skill Tree Dynamic Shop Themes (Flat Pixel Colors)
   ========================================================= */
/* === [SNIPPET: Skill Tree Gamemode Dynamic Matrix Themes] === */
/* 1. Claw Pit Theme (Electric Cyan / Navy) */
.modal-backdrop.shop-theme-claw .fullscreen-dialog {
  background: rgb(9, 14, 26);
  border: none;
  box-shadow: none;
}
.modal-backdrop.shop-theme-claw .tree-viewport {
  background: transparent;
}
.modal-backdrop.shop-theme-claw .btn-shop-tab.active {
  background: var(--pixel-cyan);
  color: var(--pixel-black);
}

/* 2. Plinko Theme (Crimson Red Matrix) */
.modal-backdrop.shop-theme-plinko .fullscreen-dialog {
  background: rgb(23, 7, 14);
  border: none;
  box-shadow: none;
}
.modal-backdrop.shop-theme-plinko .tree-viewport {
  background: transparent;
}
.modal-backdrop.shop-theme-plinko .btn-shop-tab.active {
  background: var(--pixel-red);
  color: var(--pixel-white);
}
.modal-backdrop.shop-theme-plinko .modal-coin-balance {
  color: var(--pixel-red);
}
.modal-backdrop.shop-theme-plinko .node-popup-card {
  outline-color: var(--pixel-red);
}

/* 3. Coin Flip Theme (Emerald Green Casino Matrix) */
.modal-backdrop.shop-theme-coin_flip .fullscreen-dialog {
  background: rgb(6, 24, 14);
  border: none;
  box-shadow: none;
}
.modal-backdrop.shop-theme-coin_flip .tree-viewport {
  background: transparent;
}
.modal-backdrop.shop-theme-coin_flip .modal-coin-balance {
  color: #00e676;
}
.modal-backdrop.shop-theme-coin_flip .node-popup-card {
  border-color: #00e676;
  outline: 2px solid #00e676;
}

/* =========================================================
   Wave Cleared Pop Banner & Animations
   ========================================================= */
/* === [SNIPPET: Wave Cleared Pop Banners & Overlays] === */
.wave-cleared-banner {
  display: none !important;
}

.wave-cleared-title {
  display: none !important;
}

.wave-cleared-bonus {
  display: none !important;
}

/* Claw Pit powerup chips (#powerupActiveBar): [SNIPPET: Claw Pit Powerup Chips] in css/components.css */

/* =========================================================
   TRIAL Button & Persistent Multiplier (sits in its own band just above the upper-right of the playfield)
   JS (updatePinnedHudPositions) places it and reserves the band in handleResize; the CSS vars are a fallback
   ========================================================= */
/* === [SNIPPET: In-Game Floating Trial Launch Button & Cooldown Bar] === */
/* CHALLENGE: right top HUD tab card in every attraction (shared look: [SNIPPET: Top HUD Tab Cards]), placed by
   js/ui/playfield_frame.js. Row: gold income multiplier in a black pill, then the dot and CHALLENGE in the mode
   accent; segmented cooldown bar underneath. The whole card is the tap target (#btnTrial's ::before covers it).
   Mode colors come from the --sb-* tokens (.pf-themed), so the mode-theme-* classes the trial scripts toggle need
   no rules here. .cooling-down grays out the whole card; .trial-ready turns the dot green. */
.trial-btn-group {
  width: 200px;
  --hud-accent: var(--sb-accent);
  --hud-segs: 12;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s ease;
}
.trial-btn-group[style*="display: inline-flex"],
.trial-btn-group[style*="display: flex"] {
  display: flex !important;
}
.trial-btn-group:hover,
.trial-btn-group:active {
  background: var(--sb-hover);
}
.trial-btn-group.cooling-down {
  filter: grayscale(0.75) brightness(0.8);
}
.trial-btn-top {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.trial-income-mult-pill {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  background: var(--pixel-black);
  color: var(--pixel-gold);
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
}
.mult-pill-val {
  color: var(--pixel-gold);
  font-weight: bold;
  font-size: 9px;
}
.btn-trial-ingame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--hud-accent);
  font-family: var(--font-pixel);
  font-size: 9px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  outline: none;
}
.btn-trial-ingame::before {
  /* whole card is the tap target */
  content: "";
  position: absolute;
  inset: 0;
}
.btn-trial-ingame:focus,
.btn-trial-ingame:focus-visible {
  outline: none;
}
.btn-trial-ingame:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.btn-trial-ingame.cooling-down {
  opacity: 0.75;
}
.trial-indicator-dot,
.trial-glow-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--hud-accent);
  box-shadow: 0 0 0 1px var(--pixel-black);
  transition: background 0.2s ease;
}
.btn-trial-ingame.cooling-down .trial-indicator-dot {
  background: #4e5d73;
}
.btn-trial-ingame.cooling-down .trial-btn-title {
  color: #7b8ea6;
}
.btn-trial-ingame.trial-ready .trial-indicator-dot {
  background: #00e676;
}
.trial-btn-title {
  color: inherit;
  font-size: 9px;
  font-weight: bold;
  text-shadow: none;
}
/* Cooldown & Ready Status Badge (Hidden) */
.trial-cooldown-badge {
  display: none !important;
}

/* === [SNIPPET: Mobile Landscape Height Optimization Queries] === */
/* =========================================================
   Landscape Mobile Optimization (Compact Height)
   ========================================================= */
@media (max-height: 500px) {
  .game-view-area {
    height: 100%;
  }
  .sidebar-currencies .stat-value {
    font-size: 18px;
    line-height: 1;
  }
  .btn-shop-header,
  .btn-settings-header {
    width: 34px;
    height: 34px;
    padding: 0;
  }
  .btn-game-selector {
    height: 34px;
    padding: 3px 8px;
    font-size: 9px;
  }
  .btn-debug {
    height: 32px;
    padding: 2px 5px;
    font-size: 7px;
  }
}

/* =========================================================
   Prestige Sanctuary Modal Framework
   ========================================================= */
.prestige-dialog {
  max-width: 400px;
  width: 92%;
  max-height: 90vh;
  max-height: min(90dvh, 100%); /* never taller than the space left inside the safe padding (see #prestigeModal) */
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #141021;
  border: 4px solid var(--pixel-black);
  outline: 3px solid #c084fc;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85);
}

.prestige-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--pixel-black);
  padding-bottom: 8px;
}

.prestige-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prestige-modal-title {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
  margin: 0;
  text-shadow: 2px 2px 0 var(--pixel-black);
}

.prestige-modal-subtitle {
  font-family: var(--font-pixel-sub);
  font-size: 11px;
  color: var(--pixel-gray);
  margin-top: 3px;
}

/* === [SNIPPET: Prestige Sanctuary Modal Overview Cards] === */
/* Overview Cards: Banked & Unclaimed */
.prestige-overview-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.prestige-banked-card,
.prestige-unclaimed-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1b152d;
  border: 3px solid var(--pixel-black);
  padding: 6px 12px;
  box-shadow: var(--pixel-shadow-sm);
}

.prestige-unclaimed-card {
  background: #161224;
  border-color: #2d1f3d;
}

.prestige-banked-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.prestige-banked-label {
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  color: var(--pixel-gray);
  font-weight: 700;
  text-transform: uppercase;
}

.prestige-banked-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.prestige-banked-value {
  font-family: var(--font-pixel);
  font-size: 20px;
  font-weight: 700;
}

.prestige-unclaimed-tag {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #c084fc;
  background: #251a38;
  padding: 2px 6px;
  border: 2px solid #581c87;
}

/* === [SNIPPET: Prestige Sanctuary Action Card & Confirmation] === */
/* Prestige Action Card */
.prestige-action-card {
  background: #181329;
  border: 3px solid var(--pixel-black);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--pixel-shadow-sm);
}

.prestige-action-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.prestige-action-desc {
  text-align: center;
  font-family: var(--font-pixel-sub);
  font-size: 12px;
  color: var(--pixel-light-gray);
  line-height: 1.3;
}

.btn-prestige-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #9333ea;
  color: #ffffff;
  border: 3px solid var(--pixel-black);
  padding: 8px 18px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  white-space: nowrap;
  transition: transform 0.08s ease, background 0.1s ease;
  outline: none !important;
}

.btn-prestige-claim:hover:not(.btn-prestige-locked) {
  background: #a855f7;
  transform: translateY(-2px);
}

.btn-prestige-claim:active:not(.btn-prestige-locked) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Locked via a class, not the native disabled attribute, so a press while locked still fires the click
   handler and can trigger .btn-denied-shake (see the Standard Denied Button Shake snippet) - no !important
   on transform here, since that would silently cancel the shake's own keyframes. */
.btn-prestige-claim.btn-prestige-locked {
  background: #251c38;
  color: #63547e;
  cursor: not-allowed;
  box-shadow: none;
}

/* === [SNIPPET: Dedicated Prestige Confirmation Modal Dialog] === */
/* Header-less confirmation popup: side-by-side "you lose / you keep" summary and two buttons */
.prestige-confirm-dialog {
  max-width: 400px;
  width: 92%;
  padding: 8px;
  background: #160b24;
  border: 3px solid #9333ea;
  box-shadow: var(--pixel-shadow);
  margin: auto;
  outline: none !important;
}

.prestige-popup-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px;
}

/* Sanctuary-style panel: the question and claim lines each sit in one */
.prestige-popup-question,
.prestige-popup-claim {
  background: #181329;
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-sm);
  padding: 12px 14px;
  text-align: center;
}

.prestige-popup-question {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: #ffffff;
}

.prestige-popup-compare {
  display: flex;
  gap: 14px;
}

.prestige-popup-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border: 2px solid var(--col-accent);
  background: var(--col-bg);
}

.prestige-popup-lose {
  --col-accent: #ff5252;
  --col-bg: #28111e;
}

.prestige-popup-keep {
  --col-accent: #00e676;
  --col-bg: #0b2917;
}

.prestige-popup-col-title {
  font-family: var(--font-pixel);
  font-size: 9.5px;
  color: var(--col-accent);
  text-align: center;
}

.prestige-popup-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prestige-popup-col li {
  font-family: var(--font-pixel-sub);
  font-size: 12px;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
}

.prestige-popup-claim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-pixel-sub);
  font-size: 13px;
  color: #d8b4fe;
}

.prestige-popup-actions {
  display: flex;
  gap: 12px;
}

.btn-prestige-confirm {
  flex: 1;
  background: #9333ea;
  color: #ffffff;
  border: 2px solid var(--pixel-black);
  padding: 10px 16px;
  font-family: var(--font-pixel);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none !important;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.08s ease, background 0.1s ease;
}

.btn-prestige-confirm:hover {
  background: #a855f7;
}

.btn-prestige-confirm:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn-prestige-cancel {
  flex: 1;
  background: #374151;
  color: #ffffff;
  border: 2px solid var(--pixel-black);
  padding: 10px 16px;
  font-family: var(--font-pixel);
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none !important;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.08s ease, background 0.1s ease;
}

.btn-prestige-cancel:hover {
  background: #4b5563;
}

.btn-prestige-cancel:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Mystic Shop Unclaimed Banner */
.mystic-unclaimed-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  align-self: stretch;
  background: #211638;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #581c87;
  padding: 6px 12px;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: #c084fc;
  font-weight: 700;
  border-radius: 2px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: background 0.15s ease, outline-color 0.15s ease;
}

.mystic-unclaimed-indicator:hover {
  background: #2d1d4e;
  outline-color: #c084fc;
}

.mystic-unclaimed-indicator:focus,
.mystic-unclaimed-indicator:focus-visible {
  outline: 1px solid #581c87;
}

.mystic-unclaimed-indicator:active {
  transform: translate(2px, 2px);
  box-shadow: none;
  outline: 1px solid #581c87;
}

/* Claim Footer */
.prestige-action-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1a142c;
  border: 3px solid var(--pixel-black);
  padding: 12px 16px;
  margin-top: 4px;
}

.prestige-unclaimed-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prestige-unclaimed-label {
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  color: var(--pixel-gray);
  font-weight: 700;
}

.prestige-unclaimed-count {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  color: var(--pixel-gray);
}

.prestige-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #251c3d;
  border: 2px solid #7c3aed;
  padding: 6px 14px;
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  color: #c084fc;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.25);
}

.btn-claim-diamonds {
  background: #7c4dff;
  color: #ffffff;
  border: 3px solid var(--pixel-black);
  padding: 8px 18px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--pixel-shadow-sm);
  transition: transform 0.08s ease, background 0.1s ease;
}

.btn-claim-diamonds:hover:not(:disabled) {
  background: #9667ff;
  transform: translateY(-2px);
}

.btn-claim-diamonds:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.btn-claim-diamonds.btn-disabled,
.btn-claim-diamonds:disabled {
  background: #2a223f !important;
  color: #665b82 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* =========================================================
   Arcade Quick Game Menu Modal
   ========================================================= */
/* === [SNIPPET: Arcade Quick Game Menu Modal] === */
.game-menu-dialog {
  max-width: 420px;
  width: 90%;
  background: var(--pixel-panel);
  border: 3px solid var(--pixel-black);
  box-shadow: var(--pixel-shadow-xl);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.game-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--pixel-darkest);
  border-bottom: 3px solid var(--pixel-black);
}

.game-menu-header h2 {
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  color: var(--pixel-cyan);
  letter-spacing: 0.8px;
  margin: 0;
}

.game-menu-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--pixel-card);
  border: 2px solid var(--pixel-card-border);
  box-shadow: var(--pixel-shadow-sm);
  cursor: pointer;
  transition: background 0.1s ease, transform 0.06s ease, border-color 0.15s ease;
  box-sizing: border-box;
  text-align: left;
}

.game-menu-item:hover {
  background: var(--pixel-card-hover, #2a3b5c);
  border-color: var(--pixel-cyan);
}

.game-menu-item:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.game-menu-item.item-danger:hover {
  border-color: var(--pixel-red);
  background: #341520;
}

.game-menu-item.item-danger .menu-item-title {
  color: var(--pixel-red);
}

.game-menu-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-item-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.menu-item-title {
  font-family: var(--font-pixel);
  font-size: 11px;
  font-weight: 700;
  color: var(--pixel-white);
  letter-spacing: 0.6px;
}

.menu-item-desc {
  font-family: var(--font-pixel);
  font-size: 7.5px;
  color: var(--pixel-gray);
  letter-spacing: 0.3px;
}

.settings-card .menu-item-desc {
  line-height: 1.6;
}

.menu-item-arrow {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--pixel-cyan);
}

.game-menu-card {
  background: #141a2e;
  border: 2px solid var(--pixel-card-border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--pixel-shadow-sm);
}

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

.game-menu-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px dashed #283758;
  padding-top: 8px;
}

.btn-save-now {
  background: #e0b324;
  border: 2px solid var(--pixel-black);
  color: var(--pixel-black);
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 1px 1px 0 var(--pixel-black);
  transition: transform 0.06s ease, background 0.1s ease;
}

.btn-save-now:hover {
  background: #ffd54f;
}

.btn-save-now:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.save-timestamp {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: var(--pixel-gray);
}

/* Settings Danger Zone - Delete Save File */
.settings-danger-card {
  border: 2px dashed rgba(239, 68, 68, 0.45) !important;
  background: rgba(36, 12, 24, 0.6) !important;
}

.danger-badge {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
  border: 1px solid #ef4444 !important;
}

.btn-delete-save {
  width: 100%;
  background: #991b1b;
  border: 2px solid #ef4444;
  color: #ffffff;
  font-family: var(--font-pixel);
  font-size: 9px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 #000000;
  transition: transform 0.06s ease, background 0.1s ease, border-color 0.1s ease;
  outline: none !important;
}

.btn-delete-save:hover {
  background: #b91c1c;
  border-color: #f87171;
}

.btn-delete-save:active {
  transform: translateY(2px);
  box-shadow: none;
}

.btn-delete-save.confirming-delete {
  background: #dc2626;
  border-color: #fef08a;
  color: #ffffff;
  animation: deleteConfirmPulse 0.8s ease-in-out infinite alternate;
}

@keyframes deleteConfirmPulse {
  0% {
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.6);
    border-color: #fef08a;
  }
  100% {
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.9), 0 0 20px rgba(254, 240, 138, 0.6);
    border-color: #ffffff;
  }
}

.text-danger-sub {
  color: #f87171 !important;
  font-size: 7.5px;
  line-height: 1.3;
}

.text-danger-warn {
  color: #facc15 !important;
  font-weight: 700;
}

/* Toggle Switch */
.btn-toggle-switch {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.toggle-track {
  display: block;
  width: 38px;
  height: 20px;
  background: #333a52;
  border: 2px solid var(--pixel-black);
  position: relative;
  transition: background 0.15s ease;
}

.toggle-thumb {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #8892b0;
  border: 1px solid var(--pixel-black);
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn-toggle-switch.active .toggle-track {
  background: #14532d;
  border-color: #22c55e;
}

.btn-toggle-switch.active .toggle-thumb {
  transform: translateX(18px);
  background: #4ade80;
}

.save-pixel-icon {
  width: 14px;
  height: 14px;
  background: var(--pixel-gold);
  clip-path: polygon(0% 0%, 80% 0%, 100% 20%, 100% 100%, 0% 100%);
  display: inline-block;
  flex-shrink: 0;
}

.exit-pixel-icon {
  width: 14px;
  height: 14px;
  background: var(--pixel-red);
  clip-path: polygon(0% 0%, 45% 0%, 45% 35%, 75% 35%, 75% 20%, 100% 50%, 75% 80%, 75% 65%, 45% 65%, 45% 100%, 0% 100%);
  display: inline-block;
  flex-shrink: 0;
}

.home-pixel-icon {
  width: 14px;
  height: 14px;
  background: var(--pixel-white, #ffffff);
  clip-path: polygon(50% 0%, 100% 45%, 82% 45%, 82% 100%, 18% 100%, 18% 45%, 0% 45%);
  display: inline-block;
  flex-shrink: 0;
}

.back-pixel-icon {
  width: 14px;
  height: 14px;
  background: var(--pixel-white);
  clip-path: polygon(45% 0%, 45% 30%, 100% 30%, 100% 70%, 45% 70%, 45% 100%, 0% 50%);
  display: inline-block;
  flex-shrink: 0;
}

.rate-pixel-icon {
  width: 14px;
  height: 14px;
  background: var(--pixel-gold);
  clip-path: polygon(50% 0%, 63% 35%, 100% 38%, 72% 62%, 81% 100%, 50% 77%, 19% 100%, 28% 62%, 0% 38%, 37% 35%);
  display: inline-block;
  flex-shrink: 0;
}

/* =========================================================
   MYSTIC SHOP (PRESTIGE DIAMOND SHOP) MODAL & ROW LAYOUT
   ========================================================= */
/* === [SNIPPET: Mystic Shop Modal Framework & Header] === */
#mysticShopModal {
  z-index: 99998;
  /* Composites the whole panel into its own GPU layer ahead of the opacity fade-in, so the header's pixel-font
     text (diamond balance, etc.) is rasterized once instead of flickering as it repaints at each fade step */
  will-change: opacity;
}

/* Safe padding (Mystic Shop and Prestige popups): the backdrop keeps the popup clear of a phone's notch, rounded corners and home bar
   (env(safe-area-inset-*) is 0 on a plain screen, so there the padding is just the 8px / 12px minimum) */
#mysticShopModal,
#prestigeModal {
  box-sizing: border-box;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}

/* The ID selector outranks components.css `.modal-dialog:not(.fullscreen-dialog)`, so the look is identical at rest, focused and pressed */
#mysticShopModal .modal-dialog.mystic-dialog {
  max-width: 1140px;
  width: 95%;
  max-height: 92vh;
  max-height: min(92dvh, 100%); /* never taller than the space left inside the safe padding */
  background: #110b1f;
  border: 3px solid var(--pixel-black);
  outline: none !important;
  box-shadow: var(--pixel-shadow-xl);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

#mysticShopModal *:focus,
#mysticShopModal *:focus-visible {
  outline: none !important;
}

/* Header */
.mystic-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--pixel-card-border);
  flex-shrink: 0;
}

.mystic-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mystic-header-title-wrap .large-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.mystic-modal-title {
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 700;
  color: #c084fc;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(192, 132, 252, 0.6);
  margin: 0;
}

.mystic-modal-subtitle {
  font-family: var(--font-pixel-sub);
  font-size: 11px;
  color: var(--pixel-light-gray);
  margin-top: 2px;
}

.mystic-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mystic-balance-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1f1438;
  border: 2px solid var(--pixel-black);
  outline: 1px solid var(--pixel-purple);
  padding: 6px 12px;
  box-shadow: var(--pixel-shadow-sm);
}

.mystic-balance-val {
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  color: #c084fc;
}

/* Rows Container */
.mystic-rows-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 6px 2px;
  flex: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mystic-rows-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Attraction Game Row */
.mystic-game-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  background: #140d24;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #33234e;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6), var(--pixel-shadow-sm);
  padding: 10px;
  position: relative;
}

.mystic-game-row.row-claw {
  border-left: 4px solid #b8860b;
}

.mystic-game-row.row-plinko {
  border-left: 4px solid #7b2cbf;
}

.mystic-game-row.row-coin_flip {
  border-left: 4px solid #00e676;
}

.mystic-game-row.row-cannon {
  border-left: 4px solid #ff8a00;
}

/* === [SNIPPET: Mystic Shop Attraction Rows & Badge Sidebar] === */
/* Static Left Column (Game Badge Placeholder) */
.mystic-game-sidebar {
  flex: 0 0 116px;
  min-width: 116px;
  max-width: 116px;
  background: #1a102e;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #3d2b5c;
  box-shadow: var(--pixel-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Same attraction art frames as the Game Modes cards (see .mode-card-art); accent border per game */
.mystic-game-sidebar .mode-card-art {
  margin-bottom: 8px;
}

/* Per-attraction RESPEC button under the badge: reuses .mystic-unclaimed-indicator, sized to fit the 116px sidebar */
.mystic-game-sidebar .mystic-unclaimed-indicator {
  margin-top: 10px;
  padding: 6px 4px;
  font-size: 10px;
  align-self: stretch;
}

.sidebar-claw .mode-card-art {
  border-color: var(--pixel-cyan);
  box-shadow: inset 0 0 14px rgba(0, 240, 255, 0.25), inset 0 0 0 1px var(--pixel-cyan);
}

.sidebar-plinko .mode-card-art {
  border-color: var(--pixel-red);
  box-shadow: inset 0 0 14px rgba(255, 23, 68, 0.25), inset 0 0 0 1px var(--pixel-red);
}

.sidebar-claw {
  border-color: var(--pixel-black);
  outline: 1px solid rgba(212, 175, 55, 0.4);
}

.sidebar-plinko {
  border-color: var(--pixel-black);
  outline: 1px solid rgba(147, 51, 234, 0.4);
}

.sidebar-coin_flip .mode-card-art {
  border-color: #00e676;
  box-shadow: inset 0 0 14px rgba(0, 230, 118, 0.25), inset 0 0 0 1px #00e676;
}

.sidebar-cannon .mode-card-art {
  border-color: #ff8a00;
  box-shadow: inset 0 0 14px rgba(255, 138, 0, 0.25), inset 0 0 0 1px #ff8a00;
}

.sidebar-coin_flip {
  border-color: var(--pixel-black);
  outline: 1px solid rgba(0, 230, 118, 0.4);
}

.sidebar-cannon {
  border-color: var(--pixel-black);
  outline: 1px solid rgba(255, 138, 0, 0.4);
}

/* RESPEC button + one-minute cooldown bar under the badge (the bar fills up; the button unlocks when it is full) */
.mystic-respec-wrap {
  --respec-accent: #c084fc;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 4px;
  margin-top: 10px;
}

.row-claw .mystic-respec-wrap { --respec-accent: #00f0ff; }
.row-plinko .mystic-respec-wrap { --respec-accent: #ff2252; }
.row-coin_flip .mystic-respec-wrap { --respec-accent: #00e676; }
.row-cannon .mystic-respec-wrap { --respec-accent: #ff8a00; }

/* Same dark-purple button on every row (matches the header's +N UNCLAIMED button) instead of each row's
   own bright accent color, for uniformity across the four attractions. */
.mystic-respec-wrap .mystic-unclaimed-indicator {
  margin-top: 0;
  padding: 8px 4px;
  background: #2a1b4a;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #581c87;
  color: #c084fc;
  letter-spacing: 1px;
  /* Raised pixel-button bevel: light top edge, dark bottom edge, hard drop shadow */
  box-shadow: inset 0 2px 0 rgba(192, 132, 252, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 3px 0 var(--pixel-black);
}

.mystic-respec-wrap .mystic-unclaimed-indicator:hover {
  background: #2a1b4a;
  filter: brightness(1.3);
  outline: none;
}

.mystic-respec-wrap .mystic-unclaimed-indicator:focus,
.mystic-respec-wrap .mystic-unclaimed-indicator:focus-visible {
  outline: none;
}

.mystic-respec-wrap .mystic-unclaimed-indicator:active {
  transform: translateY(3px);
  outline: none;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* Cooling down, nothing to respec, or can't afford the currency cost: grayed out and inert-looking.
   Unaffordable is now locked out entirely on click (see _onRespecClick), so it no longer needs to look "ready". */
.mystic-respec-wrap .mystic-unclaimed-indicator.respec-cooling,
.mystic-respec-wrap .mystic-unclaimed-indicator.respec-empty,
.mystic-respec-wrap .mystic-unclaimed-indicator.respec-unaffordable {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.7);
  transform: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 3px 0 var(--pixel-black);
}

.mystic-respec-bar {
  height: 6px;
  background: #0d0818;
  border: 1px solid var(--pixel-black);
  box-sizing: border-box;
  overflow: hidden;
}

.mystic-respec-fill {
  height: 100%;
  width: 0;
  background: var(--respec-accent);
}

/* Taller two-line RESPEC button: "RESPEC" on the first line, its currency cost on the second, so the
   small 116px sidebar column no longer needs a separate cost readout squeezed underneath the button. */
.mystic-respec-btn {
  flex-direction: column;
  gap: 3px;
  padding: 8px 4px 7px;
}

.mystic-respec-btn-label {
  font-size: 10px;
}

.mystic-respec-btn-cost {
  display: inline-flex;
  align-items: center;
}

.mystic-respec-btn-cost .currency-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.mystic-respec-btn-cost .currency-val {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: #e9d5ff;
  opacity: 0.85;
}

/* === [SNIPPET: Mystic Shop Horizontally Scrollable Upgrade Track] === */
/* Horizontally Scrollable Upgrade Track */
.mystic-upgrades-track {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 6px 8px 6px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mystic-upgrades-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Edge fades hint that the row scrolls; classes are toggled from JS by scroll position */
.mystic-upgrades-track.fade-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.mystic-upgrades-track.fade-l {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
  mask-image: linear-gradient(to right, transparent, #000 40px);
}

.mystic-upgrades-track.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* === [SNIPPET: Mystic Compact Upgrade Card] === */
/* Upgrade Card (compact: icon + title + pips, one short blurb, one value line, one button) */
.mystic-card {
  --mystic-accent: #ffd166;
  flex: 0 0 208px;
  min-width: 208px;
  max-width: 208px;
  background: #1d1233;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #372554;
  box-shadow: var(--pixel-shadow-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  user-select: none;
  box-sizing: border-box;
}

/* Claw Pit had no override and was falling through to the base #ffd166 (yellow) default - its real
   theme accent is cyan/blue (#00f0ff), matching the sidebar/skill-tree/HUD everywhere else in Claw Pit. */
.mystic-card.card-claw {
  --mystic-accent: #00f0ff;
}

.mystic-card.card-plinko {
  --mystic-accent: #ff2252;
}

.mystic-card.card-coin_flip {
  --mystic-accent: #00e676;
}

.mystic-card.card-cannon {
  --mystic-accent: #ff8a00;
}

/* Whole-card dimming only applies to an upgrade with no levels bought yet AND that the player can't
   currently afford. Once at least one level is owned, or the very first level becomes affordable, the
   card is at full brightness and only its buy button (.btn-cannot-afford) darkens when unaffordable. */
.mystic-card.card-unstarted {
  filter: brightness(0.5) saturate(0.6);
}

/* Banked diamonds badge lights up when a purchase is refused */
.mystic-balance-badge.balance-flash {
  animation: mysticBalanceFlash 0.7s steps(2, jump-none) 1;
}

@keyframes mysticBalanceFlash {
  0%, 100% { background: #1f1438; outline-color: var(--pixel-purple); }
  50% { background: #7928ca; outline-color: #e9d5ff; }
}

/* Preview-only (not yet implemented) cards are the one case where the whole card is dimmed */
.mystic-card.card-preview {
  opacity: 0.6;
  filter: grayscale(0.6);
}

.mystic-card.card-preview:hover {
  transform: none;
  box-shadow: var(--pixel-shadow-sm);
  border-color: var(--pixel-black);
}

/* Yellow outline if maxed out */
.mystic-card.card-maxed {
  --mystic-accent: var(--pixel-gold);
  outline: 2px solid var(--pixel-gold);
  border-color: var(--pixel-gold);
  background: #23173d;
}

.mystic-card.card-maxed:hover {
  outline-color: #ffe066;
  box-shadow: var(--pixel-shadow-md);
}

/* Top row: pixel icon tile + (title over level pips) */
.mystic-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mystic-card-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #130a22;
  border: 2px solid var(--pixel-black);
  outline: 1px solid #3a2a55;
  color: var(--mystic-accent);
  box-sizing: border-box;
}

.mystic-icon-svg {
  width: 32px; /* 8x8 bitmap at exactly 4px per cell keeps the pixels razor sharp */
  height: 32px;
  display: block;
}

.mystic-card-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mystic-card-title {
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 700;
  color: #f3e8ff;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
  min-height: 22px; /* room for two lines so every card's pips line up */
  display: flex;
  align-items: center;
}

/* === [SNIPPET: Mystic Card Diamond Pip Meter] === */
/* Diamond Pip Meter (5 diamonds showing current level) */
.diamond-meter-pips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}

.diamond-pip {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  display: inline-block;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.diamond-pip.empty {
  background: transparent;
  border: 1.5px solid #5a4875;
}

.diamond-pip.filled {
  background: #c084fc;
  border: 1.5px solid #e9d5ff;
}

.card-maxed .diamond-pip.filled {
  background: var(--pixel-gold);
  border: 1.5px solid #fff59d;
}

/* One short blurb (Silkscreen is a caps-only face, so keep it brief) */
.mystic-card-desc {
  font-family: var(--font-pixel-sub);
  font-size: 10px;
  line-height: 1.4;
  color: #a99bc0;
  margin: 0;
  min-height: 28px;
}

/* One value line: current -> next */
.mystic-card-effect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px;
  box-sizing: border-box;
  background: #130a22;
  border: 1px solid #2d1f45;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.mystic-card-effect .fx-cur {
  color: #e2d9f3;
}

.mystic-card-effect .fx-next {
  color: #ffd166;
}

.mystic-arrow-svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  display: block;
  color: #7d6b96;
}

.mystic-card-effect.fx-max .fx-cur {
  color: var(--pixel-gold);
}

/* === [SNIPPET: Mystic Card Footer & Overclock Buy Button] === */
/* Card Footer */
.mystic-card-footer {
  margin-top: auto;
  width: 100%;
}

.btn-mystic-action {
  width: 100%;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--pixel-black);
  outline: none;
  box-shadow: var(--pixel-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.08s ease, background 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-mystic-action:focus,
.btn-mystic-action:focus-visible {
  outline: none;
}

.btn-mystic-action:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.btn-mystic-action.btn-can-afford {
  background: #7928ca;
  color: var(--pixel-white);
  border-color: #120924;
}

.btn-mystic-action.btn-can-afford:hover {
  background: #9333ea;
}

.btn-mystic-action.btn-cannot-afford {
  background: #251a38;
  color: #6d5c82;
  border-color: #130a22;
  cursor: not-allowed;
  opacity: 0.75;
}

.btn-mystic-action.btn-cannot-afford .diamond-icon {
  opacity: 0.55;
}

.btn-mystic-action.btn-maxed {
  background: var(--pixel-gold);
  color: #1a1002;
  border-color: #634600;
  cursor: default;
  font-size: 8.5px;
}

.btn-mystic-action.btn-placeholder {
  background: #181026;
  color: #6b5c82;
  border-color: #2b1f42;
  border-style: dashed;
  cursor: default;
  font-size: 8px;
}

.btn-mystic-action .mini-icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
}

/* === [SNIPPET: Title Screen & Save Slot Selection Overlay] === */
.title-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background-color: #03010a;
  background-image: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  outline: none !important;
  overflow: hidden;
}

.title-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.title-view {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none !important;
  padding: max(14px, env(safe-area-inset-top, 14px)) max(48px, env(safe-area-inset-right, 48px)) max(14px, env(safe-area-inset-bottom, 14px)) max(48px, env(safe-area-inset-left, 48px));
  box-sizing: border-box;
}

/* Title logo, marquee, buttons and version tag: [SNIPPET: Pixel UI Title Screen] in css/pixel_ui.css */

/* Difficulty Picker Modal */
.title-diff-backdrop {
  z-index: 13000 !important;
}

.title-diff-dialog {
  max-width: 480px;
  background: #0d051c;
  border: 4px solid #a855f7;
  box-shadow: 0 0 0 4px #000000, 0 8px 0 rgba(0, 0, 0, 0.75), 0 0 20px rgba(168, 85, 247, 0.25);
  padding: 20px;
  outline: none !important;
}

.title-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #3b1d6e;
  padding-bottom: 10px;
}

.title-diff-desc {
  font-size: 9px;
  color: #cbd5e1;
  margin: 12px 0;
  line-height: 1.4;
}

.diff-choices-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-diff-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  outline: none !important;
  border: 3px solid;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.75);
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-diff-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.75);
}

.btn-diff-choice:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
}

/* Tier 1: Standard Game (Vibrant Arcade Cyber-Purple) */
.btn-diff-choice.diff-standard {
  background-color: #4c1d95;
  border-color: #a855f7;
}

.btn-diff-choice.diff-standard .diff-choice-name {
  font-size: 12px;
  color: #f3e8ff;
}

.btn-diff-choice.diff-standard .diff-choice-detail {
  font-size: 8px;
  line-height: 1.4;
  color: #d8b4fe;
}

.btn-diff-choice.diff-standard:hover {
  background-color: #581c87;
  border-color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45), 0 6px 0 rgba(0, 0, 0, 0.8);
}

/* Tier 2: Game+ (Deeper Dark Cosmic Purple) */
.btn-diff-choice.diff-game-plus {
  background-color: #270c52;
  border-color: #9333ea;
}

.btn-diff-choice.diff-game-plus .diff-choice-name {
  font-size: 12px;
  color: #e9d5ff;
}

.btn-diff-choice.diff-game-plus .diff-choice-detail {
  font-size: 8px;
  line-height: 1.4;
  color: #c084fc;
}

.btn-diff-choice.diff-game-plus:hover {
  background-color: #33106d;
  border-color: #c084fc;
  box-shadow: 0 0 14px rgba(147, 51, 234, 0.55), 0 6px 0 rgba(0, 0, 0, 0.8);
}

/* Tier 3: Game++ (Darkest Ultra-Deep Void Purple) */
.btn-diff-choice.diff-game-plus-plus {
  background-color: #120329;
  border-color: #7e22ce;
}

.btn-diff-choice.diff-game-plus-plus .diff-choice-name {
  font-size: 12px;
  color: #f5d0fe;
}

.btn-diff-choice.diff-game-plus-plus .diff-choice-detail {
  font-size: 8px;
  line-height: 1.4;
  color: #a855f7;
}

.btn-diff-choice.diff-game-plus-plus:hover {
  background-color: #1c063f;
  border-color: #a855f7;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.65), 0 6px 0 rgba(0, 0, 0, 0.8);
}

/* Title New Game Overwrite Warning Modal */
.title-overwrite-dialog {
  max-width: 460px;
  background: #140509;
  border: 4px solid #ef4444;
  box-shadow: 0 0 0 4px #000000, 0 8px 0 rgba(0, 0, 0, 0.7);
}

.title-overwrite-warning {
  font-size: 10px;
  color: #f87171;
  line-height: 1.6;
  margin: 12px 0 16px;
  text-align: center;
}

.title-overwrite-stat-card {
  background: #220912;
  border: 2px solid #b91c1c;
  padding: 14px;
  margin-bottom: 18px;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.title-overwrite-stat-label {
  font-size: 8.5px;
  color: #fca5a5;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.title-overwrite-stat-value {
  font-size: 13px;
  color: #fef08a;
  letter-spacing: 1px;
  font-weight: bold;
}

.title-overwrite-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.btn-overwrite-confirm {
  background: #b91c1c;
  border: 3px solid #ef4444;
  color: #ffffff;
  padding: 13px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #000000;
  outline: none !important;
  transition: transform 0.05s ease, background 0.1s ease;
}

.btn-overwrite-confirm:hover {
  background: #dc2626;
  border-color: #f87171;
}

.btn-overwrite-confirm:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000000;
}

.btn-overwrite-cancel {
  background: #1e1138;
  border: 3px solid #7c3aed;
  color: #ffffff;
  padding: 13px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 4px 0 #000000;
  outline: none !important;
  transition: transform 0.05s ease, background 0.1s ease;
}

.btn-overwrite-cancel:hover {
  background: #2e1854;
  border-color: #a855f7;
}

.btn-overwrite-cancel:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000000;
}

/* === [SNIPPET: Endgame Mystic Cups Attraction Card] === */
.mode-card-endgame:not(.mode-card-locked) {
  border-color: #7c3aed;
}

.mode-card-endgame:not(.mode-card-locked):hover {
  border-color: #c084fc;
}

.mode-card-endgame:not(.mode-card-locked).active {
  border-color: #a855f7;
  outline: 2px solid #a855f7;
}

/* === [SNIPPET: Endgame Victory Stats Modal & Typewriter Animation] === */
#victoryModal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04010a;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 1 !important;
}

.victory-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.victory-transition-flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transition: opacity 1.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 1.8s ease;
}

.victory-transition-flash.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
}

.victory-screen-view {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  height: auto;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: clamp(10px, 2vh, 24px) clamp(14px, 2.5vw, 28px);
  gap: clamp(6px, 1.6vh, 16px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.victory-screen-view.content-revealed {
  opacity: 1 !important;
}

/* Credits-roll layout (mockup "I: SPACE, CREDITS ROLL"): over the original animated starfield (#victoryBgCanvas),
   no frame. Big gold GAME CLEAR!, a gold subtitle, then one narrow centered column between two dashed purple rules:
   green labels right-aligned, values left-aligned (each currency tag keeps its own color). Lines still type in
   (js/ui/victory_modal.js); the empty .victory-stat-header is the gap between run stats and earnings. */
.victory-header { text-align: center; }
.victory-header h2 {
  margin: 0;
  font-size: clamp(14px, 4.6vh, 20px);
  line-height: 1.2;
  letter-spacing: 1px;
  color: #ffcc00;
  text-shadow: 3px 3px 0 #7a4f00;
}
.victory-subtitle {
  margin: clamp(4px, 1.2vh, 8px) 0 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 2vh, 9px);
  color: #ffcc00;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000000;
}

.victory-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.victory-stats-box {
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.5vh, 4px);
  padding: clamp(6px, 1.6vh, 10px) 0;
  border-top: 2px dashed rgba(180, 140, 255, 0.35);
  border-bottom: 2px dashed rgba(180, 140, 255, 0.35);
  font-family: 'Press Start 2P', monospace;
}

.victory-stat-line {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 14px;
  min-height: clamp(12px, 3.6vh, 16px);
  font-size: clamp(7px, 2vh, 8.5px);
  letter-spacing: 0.5px;
  color: #ffffff;
  text-shadow: 1px 1px 0 #000000;
}
.victory-stat-line .victory-stat-label {
  text-align: right;
  white-space: nowrap;
  color: #86efac;
}
.victory-stat-line .victory-stat-val {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  white-space: nowrap;
  color: #ffffff;
}
/* Gap between the run stats and the earnings (an empty typed line) */
.victory-stat-line.victory-stat-header { display: block; min-height: 0; height: clamp(4px, 1.2vh, 8px); }
.victory-stat-line .stat-line-currency { display: inline-flex; align-items: center; gap: 4px; }
.victory-stat-line .stat-icon-wrap { display: inline-flex; align-items: center; vertical-align: middle; }

.victory-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.fade-in-actions { animation: fadeInActions 0.5s ease forwards; }
@keyframes fadeInActions {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.victory-plus-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 0.8vh, 6px); width: min(300px, 80vw); }

/* UNLOCK GAME+ / RETURN TO MAIN MENU: purple pixel push button (purple like the original; green means an ad) */
.btn-victory-plus {
  width: 100%;
  height: clamp(32px, 9vh, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #7c3aed;
  color: #ffffff;
  border: 3px solid #000000;
  clip-path: var(--px-notch);
  box-shadow: inset 0 -4px 0 #4c1d95, inset 0 3px 0 #a78bfa;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(8px, 2.4vh, 10px);
  letter-spacing: 0.5px;
  cursor: pointer;
  outline: none !important;
}
.btn-victory-plus::before {
  content: "";
  width: 7px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--px-icon-play) center / contain no-repeat;
  mask: var(--px-icon-play) center / contain no-repeat;
}
.btn-victory-plus:hover { filter: brightness(1.12); }
.btn-victory-plus:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 #4c1d95, inset 0 3px 0 #a78bfa; }
.victory-plus-sub {
  font-family: 'Silkscreen', monospace;
  font-size: clamp(8px, 2.2vh, 9px);
  color: #b48cff;
  text-align: center;
}

/* ========================================================= */
/* DOM RENDERING ENGINE OVERHAUL */
/* ========================================================= */

.game-entities-layer {
  position: absolute;
  top: var(--playfield-y, 0);
  left: var(--playfield-x, 0);
  width: 1280px; /* Overridden by JS for 21:9 support */
  height: 720px;
  transform: scale(var(--playfield-scale, 1));
  transform-origin: top left;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

.game-entity {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  /* Keep centered origin to rotate and scale cleanly */
  transform-origin: center center;
  image-rendering: pixelated; /* Forces crisp 8-bit scaling on mobile */
  /* Remove default margins/padding if any */
  margin: 0;
  padding: 0;
  display: block;
}

/* Hardware accelerated CSS glows (GPU offloaded) */
.coin-glow-golden {
}
.coin-glow-diamond {
}
.coin-glow-bonus {
}

/* Prestige claim animation: full-screen overlay, diamonds fly in and merge into one growing banked diamond */
.prestige-claim-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  /* Solid from the first frame: the game behind it must never show through */
  background: #08060e;
  overflow: hidden;
  pointer-events: auto;
  transition: opacity 0.45s ease-out;
}

.prestige-claim-overlay.leaving {
  opacity: 0;
}

.prestige-claim-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1; /* incoming diamonds fly in behind the core */
  transition: transform 0.18s ease-out;
}

.prestige-claim-core .diamond-icon {
  display: block;
  image-rendering: pixelated;
}

.prestige-claim-flier {
  position: absolute;
  left: 50%;
  top: 50%;
  image-rendering: pixelated;
  will-change: transform;
}

.prestige-claim-counter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.prestige-claim-label {
  font-family: var(--font-pixel-sub);
  font-size: 12px;
  color: var(--pixel-gray);
}

.prestige-claim-value {
  font-family: var(--font-pixel);
  font-size: 28px;
  font-weight: 700;
  color: #c084fc;
}

.prestige-claim-tap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: #ffffff;
  animation: prestigeTapBlink 1s steps(2, jump-none) infinite;
}

.prestige-claim-overlay.ready {
  cursor: pointer;
}

@keyframes prestigeTapBlink {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}