/*
  Gambl – Polished Dark Theme
  Purpose: Visually upgrade the app to a premium, immersive casino feel
  Note: Purely presentational. No logic is modified.
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Core surfaces */
  --bg-0: #0a0f1c;        /* page background */
  --bg-1: #0d1324;        /* app shell */
  --bg-2: #111a33;        /* cards/panels */
  --bg-3: #162241;        /* deeper surface */

  /* Content */
  --text-1: #e8f0ff;
  --text-2: #b7c4e0;
  --text-3: #7f91b3;

  /* Accents */
  --primary-0: #3b82f6;   /* electric blue */
  --primary-1: #22d3ee;   /* cyan edge */
  --success-0: #10b981;   /* neon green */
  --danger-0: #ef4444;    /* vivid red */
  --warning-0: #f59e0b;   /* amber */

  /* FX */
  --ring: 0 0 0 1px rgba(255,255,255,0.06);
  --glass: saturate(160%) blur(14px);
  --radius-lg: 18px;
  --radius-xl: 22px;
}

/* Global reset + typography */
html, body {
  background: var(--bg-0) !important;
  color: var(--text-1);
  font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animated background energy */
body::before, body::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -2;
}
body::before {
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(34,211,238,0.08), transparent 60%),
    radial-gradient(800px 600px at 110% 10%, rgba(59,130,246,0.09), transparent 65%),
    radial-gradient(1200px 900px at 40% 120%, rgba(16,185,129,0.08), transparent 60%),
    linear-gradient(180deg, #070b14, #0b1020 30%, #0b1120 70%, #070b14);
  filter: saturate(120%);
}
body::after {
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 20% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 1px, transparent 2px, transparent 60px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06), transparent 40%);
  mix-blend-mode: overlay;
  opacity: .15;
  animation: bgPulse 14s ease-in-out infinite alternate;
}
@keyframes bgPulse { from { opacity:.10; transform: scale(1);} to { opacity:.20; transform: scale(1.04);} }

/* Subtle universal transitions */
* {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* App shell */
.app-shell { background: transparent !important; }
.sidebar {
  background: linear-gradient(180deg, rgba(18,26,50,0.9), rgba(14,19,35,0.9)) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45) inset, 0 0 0 1px rgba(255,255,255,0.02);
}
.sidebar .logo {
  letter-spacing: .5px; font-weight: 800; color: #fff;
  text-shadow: 0 6px 28px rgba(59,130,246,0.35);
}
.nav-item { color: var(--text-2) !important; border-radius: 12px !important; }
.nav-item:hover { color: #fff !important; background: rgba(59,130,246,0.10) !important; }
.nav-item.active {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(59,130,246,0.25), rgba(34,211,238,0.18)) !important;
  box-shadow: 0 8px 28px -8px rgba(59,130,246,0.55), var(--ring);
}
.nav-item .indicator { background: linear-gradient(180deg, var(--primary-0), var(--primary-1)); box-shadow: 0 0 0 2px rgba(59,130,246,0.3); }

.topbar {
  background: rgba(12,18,35,0.8) !important;
  backdrop-filter: var(--glass);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.search-box {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.search-box input { color: var(--text-1) !important; }
.balance-pill {
  background: linear-gradient(180deg, rgba(29,41,75,0.85), rgba(18,27,52,0.9)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 16px rgba(34,211,238,.08);
}
.balance-pill .amount { color: #abffdd !important; text-shadow: 0 0 18px rgba(16,185,129,.45); }

.content-scroll { background: transparent !important; }

/* Panels & cards */
.panel {
  background: linear-gradient(180deg, rgba(13,19,36,0.9), rgba(9,14,28,0.9)) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.08);
}
.game-card, .enhanced-game-card {
  background: radial-gradient(1200px 700px at -10% -10%, rgba(59,130,246,0.10), transparent 40%),
              linear-gradient(180deg, #18223e, #121a33) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.08);
}
.game-card:hover, .enhanced-game-card:hover { box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.12); }
.card-pattern { opacity: .18 !important; }

/* Universal buttons (map to existing classes) */
.btn, .primary-btn, .dice-bet-btn, .tower-bet-btn, .tower-cashout-btn, .blackjack-btn, .play-btn, .play-btn-enhanced {
  position: relative;
  border-radius: 14px !important;
  background: linear-gradient(90deg, var(--primary-0), var(--primary-1)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 30px -8px rgba(34,211,238,0.55), 0 0 0 1px rgba(34,211,238,0.45);
}
.btn:hover, .primary-btn:hover, .dice-bet-btn:hover, .tower-bet-btn:hover, .tower-cashout-btn:hover, .blackjack-btn:hover, .play-btn:hover, .play-btn-enhanced:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 44px -12px rgba(34,211,238,0.7), 0 0 0 1px rgba(34,211,238,0.55);
}
.btn:active, .primary-btn:active, .dice-bet-btn:active, .tower-bet-btn:active, .tower-cashout-btn:active, .blackjack-btn:active, .play-btn:active, .play-btn-enhanced:active {
  transform: translateY(-1px) !important;
}

/* Success/Danger variants where present */
.tower-cashout-btn { background: linear-gradient(90deg, var(--success-0), #00c28b) !important; box-shadow: 0 10px 30px -8px rgba(16,185,129,0.55), 0 0 0 1px rgba(16,185,129,0.45); }
.tower-cashout-btn:hover { box-shadow: 0 18px 40px -10px rgba(16,185,129,0.7), 0 0 0 1px rgba(16,185,129,0.55); }
.tower-cashout-btn { animation: calloutPulse 2.4s ease-in-out infinite; }
@keyframes calloutPulse { 0%,100%{ filter: brightness(1); box-shadow: 0 10px 30px -8px rgba(16,185,129,.55), 0 0 0 1px rgba(16,185,129,.45);} 50%{ filter: brightness(1.08); box-shadow: 0 18px 44px -8px rgba(16,185,129,.75), 0 0 0 1px rgba(16,185,129,.55);} }

/* Micro-interaction: sparkle on click */
.btn::after, .primary-btn::after, .dice-bet-btn::after, .play-btn::after, .play-btn-enhanced::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(200px 60px at var(--mx,50%) -20%, rgba(255,255,255,.35), transparent 65%);
  opacity: 0; transition: opacity .25s ease;
}
.btn:active::after, .primary-btn:active::after, .dice-bet-btn:active::after, .play-btn:active::after, .play-btn-enhanced:active::after { opacity: 1; }

/* Inputs */
input[type="number"], input[type="text"], select {
  background: linear-gradient(180deg, rgba(20,29,56,0.85), rgba(12,18,35,0.85)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text-1) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
input:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(34,211,238,.20) !important; border-color: rgba(34,211,238,.65) !important; }

/* Chips, tiles, cards */
.casino-chip { box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(0,0,0,.35) !important; }
.casino-chip.selected { animation: chipPulse 1.8s ease-in-out infinite !important; }
@keyframes chipPulse { 0%,100% { transform: translateY(-6px) scale(1.08); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 0 rgba(59,130,246,.25);} 50% { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 12px rgba(59,130,246,.0);} }

.mine-tile { background: linear-gradient(180deg, #141d38, #0f1729) !important; border: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35) !important; }
.mine-tile:hover { background: linear-gradient(180deg, #162246, #121a33) !important; box-shadow: 0 16px 44px rgba(0,0,0,.45) !important; }
.mine-tile.revealing { box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 16px 40px rgba(0,0,0,.5) !important; }

.playing-card { box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) !important; }

/* Dice specific polish */
.dice-container, .tower-container { background: linear-gradient(180deg, rgba(12,18,35,.85), rgba(8,12,24,.9)) !important; }
.dice-bar-container { border-color: rgba(255,255,255,0.08) !important; background: linear-gradient(180deg, #121a33, #0f1729) !important; box-shadow: inset 0 4px 10px rgba(0,0,0,.35); }
.dice-dragger { background: linear-gradient(180deg, #7aa2ff, #5165c7) !important; box-shadow: 0 8px 18px rgba(81,101,199,.5), 0 0 0 2px rgba(81,101,199,.35) !important; }
.dice-bar.normal .dice-bar-fill { background: linear-gradient(90deg, #16a34a, #10b981) !important; }
.dice-bar.inverse .dice-bar-fill { background: linear-gradient(90deg, #ef4444, #fb7185) !important; }

/* Tower — premium board styling */
.tower-right { position: relative; width: 100%; }
.tower-right::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(59,130,246,.12), transparent 70%),
    radial-gradient(500px 260px at 15% 100%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(700px 340px at 50% 50%, rgba(16,185,129,.10), transparent 65%);
  filter: saturate(120%);
}
.tower-right::after {
  content: ""; position: absolute; inset: 12px; border-radius: 22px; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(34,211,238,.10), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -10px 40px rgba(0,0,0,.25);
}
.tower-board {
  position: relative; z-index: 1;
  /* Responsive geometry */
  --chip-col: clamp(58px, 8vw, 96px);
  --egg-w: clamp(64px, 8.6vw, 112px);
  --egg-h: clamp(38px, 5.1vw, 58px);
  --row-gap: clamp(8px, 1.4vw, 16px);
  background: linear-gradient(180deg, rgba(16,23,42,.85), rgba(10,15,28,.85)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 50px rgba(0,0,0,.45), inset 0 -10px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(59,130,246,.08);
  padding: clamp(12px, 1.6vw, 22px);
  padding-right: calc(var(--chip-col) + clamp(8px, 1vw, 16px));
  min-height: clamp(420px, 54vh, 720px);
  height: auto;
  overflow: visible; max-width: 100%;
  background-size: 200% 200%;
  animation: boardGradient 22s ease-in-out infinite;
}
.tower-board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(100% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
  mix-blend-mode: overlay; opacity: .35;
}
@keyframes boardGradient { 0%{ background-position: 0% 0%; } 50%{ background-position: 100% 100%; } 100%{ background-position: 0% 0%; } }

.tower-level {
  width: 100% !important;
  padding: 6px 8px;
  gap: var(--row-gap) !important;
  margin-bottom: var(--row-gap) !important;
  padding-left: clamp(24px, 3vw, 36px) !important;
  /* Reserve space on the right for the multiplier chip so it never overlaps eggs */
  padding-right: calc(var(--chip-col) + clamp(8px, 1vw, 16px)) !important;
}
.tower-level-number { color: var(--text-3) !important; text-shadow: 0 2px 10px rgba(0,0,0,.3); left: 0 !important; }

/* Visual progress via :has() */
.tower-level:has(.safe) { position: relative; }
.tower-level:has(.safe)::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(20,248,166,.0), rgba(20,248,166,.8), rgba(20,248,166,.0));
  filter: drop-shadow(0 0 8px rgba(20,248,166,.5));
}
.tower-level:has(.danger)::before {
  background: linear-gradient(90deg, rgba(255,107,107,.0), rgba(255,107,107,.85), rgba(255,107,107,.0));
  filter: drop-shadow(0 0 8px rgba(255,107,107,.5));
}
.tower-level:has(.current-level) .tower-level-number { color: #bfe7ff !important; text-shadow: 0 0 12px rgba(59,130,246,.5); }

/* Tower eggs: 3D tiles with interactive glow */
.tower-egg {
  width: var(--egg-w) !important; height: var(--egg-h) !important;
  border-radius: clamp(10px, 1.4vw, 14px) !important;
  background: linear-gradient(180deg, #1a2548, #111a33) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.25) !important;
  transform: translateZ(0);
}
.tower-egg:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 42px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.10) inset !important; }
.tower-egg:active { transform: translateY(-1px) !important; }

/* Click ripple (pure CSS via :active) */
.tower-egg::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: radial-gradient(180px 60px at var(--mx,50%) 50%, rgba(255,255,255,.18), transparent 60%);
  opacity: 0; transform: scale(.95); transition: opacity .25s, transform .25s;
}
.tower-egg:active::after { opacity: 1; transform: scale(1.05); }

/* States */
.tower-egg.safe {
  background: linear-gradient(180deg, rgba(16,185,129,.18), rgba(11,92,71,.25)) !important;
  border-color: rgba(20,248,166,.55) !important;
  box-shadow: 0 0 0 1px rgba(20,248,166,.35) inset, 0 12px 30px rgba(20,248,166,.25) !important;
  animation: towerSafePulse 1.2s ease-in-out 1;
  position: relative;
}
.tower-egg.safe::before, .tower-egg.safe::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0));
  width: 6px; height: 6px; opacity: 0; filter: drop-shadow(0 0 8px rgba(20,248,166,.6));
}
.tower-egg.safe::before { left: 12px; top: 8px; animation: sparkle 1s ease-out .1s 1 forwards; }
.tower-egg.safe::after  { right: 10px; bottom: 10px; animation: sparkle 1s ease-out .25s 1 forwards; }
@keyframes sparkle { 0%{ transform: scale(.4); opacity: 0; } 40%{ transform: scale(1.1); opacity: 1; } 100%{ transform: scale(1.0); opacity: 0; } }
}
.tower-egg.danger {
  background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(111,22,22,.25)) !important;
  border-color: rgba(255,107,107,.55) !important;
  box-shadow: 0 0 0 1px rgba(255,107,107,.35) inset, 0 12px 30px rgba(255,107,107,.25) !important;
  animation: towerDangerFlash .6s ease-in-out 1, towerShake .4s ease-in-out 1;
}
.tower-egg.current-level { box-shadow: 0 0 0 2px rgba(59,130,246,.55), 0 0 22px rgba(59,130,246,.25) !important; }

@keyframes towerSafePulse { 0%{ box-shadow: 0 0 0 0 rgba(20,248,166,.45), 0 12px 30px rgba(20,248,166,.20);} 70%{ box-shadow: 0 0 0 8px rgba(20,248,166,.0), 0 16px 38px rgba(20,248,166,.35);} 100%{ box-shadow: 0 0 0 0 rgba(20,248,166,.0), 0 12px 30px rgba(20,248,166,.25);} }
@keyframes towerDangerFlash { 0%{ filter: saturate(160%) brightness(1.1);} 40%{ filter: saturate(100%) brightness(.9);} 100%{ filter: none; } }
@keyframes towerShake { 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-3px) rotate(-1deg);} 50%{ transform: translateX(3px) rotate(1deg);} 75%{ transform: translateX(-2px) rotate(-1deg);} }

/* Multiplier chips */
.tower-multiplier-display {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  right: clamp(8px, 1.6vw, 18px) !important; min-width: var(--chip-col); text-align: center;
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(59,130,246,.18)) !important;
  border: 1px solid rgba(59,130,246,.45) !important; color: #bfe7ff !important;
  text-shadow: 0 0 14px rgba(59,130,246,.45);
  padding: 6px 8px !important; border-radius: 12px !important;
  pointer-events: none;
}

/* Left panel labels with lightweight icons */
.tower-input-label::before { content: '💰'; margin-right: 8px; }
.tower-stat-row:nth-child(1) .tower-stat-label::before { content: '⛰️'; margin-right: 8px; }
.tower-stat-row:nth-child(2) .tower-stat-label::before { content: '✖️'; margin-right: 8px; }
.tower-stat-row:nth-child(3) .tower-stat-label::before { content: '🏆'; margin-right: 8px; }

/* quick bet buttons */
.tower-quick-btn {
  background: rgba(59,130,246,.16) !important;
  border: 1px solid rgba(59,130,246,.35) !important;
  color: #bfe7ff !important;
  border-radius: 10px !important;
}
.tower-quick-btn:hover { background: rgba(59,130,246,.24) !important; }

/* Game over modal enhancements */
.tower-game-over { z-index: 10 !important; background: rgba(3,8,20,0.72) !important; }
.tower-game-over-content { position: relative; overflow: hidden; backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.12); background: rgba(20,27,48,0.96) !important; border: 1px solid rgba(255,255,255,0.12) !important; }
.tower-game-over-content::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0; opacity: .25;
  background: radial-gradient(800px 400px at 20% -10%, rgba(34,211,238,.25), transparent 60%), radial-gradient(600px 300px at 120% 10%, rgba(59,130,246,.25), transparent 60%);
}
.tower-game-over-title.win { text-shadow: 0 0 22px rgba(20,248,166,.4), 0 0 2px rgba(0,0,0,.6); }
.tower-game-over-amount.win { text-shadow: 0 0 18px rgba(20,248,166,.35); }
.tower-game-over-title.lose, .tower-game-over-amount.lose { text-shadow: 0 0 18px rgba(255,107,107,.35); }

/* Confetti (CSS only) for wins/cashouts */
.tower-game-over .tower-game-over-title.win::after,
.tower-game-over .tower-game-over-title:not(.lose)::after {
  content: ""; position: absolute; left: 50%; top: -10px; width: 2px; height: 2px; pointer-events: none;
  background:
    linear-gradient(#ff5d8f, #ff5d8f) 0 0/4px 12px no-repeat,
    linear-gradient(#ffd166, #ffd166) 8px 2px/4px 14px no-repeat,
    linear-gradient(#06d6a0, #06d6a0) -10px -2px/4px 16px no-repeat,
    linear-gradient(#4cc9f0, #4cc9f0) 14px -4px/4px 20px no-repeat,
    linear-gradient(#b5179e, #b5179e) -16px 0/4px 18px no-repeat;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.3));
  animation: confettiFall 1.6s ease-in forwards;
}
@keyframes confettiFall { from{ opacity:1; transform: translate(-50%, -20px) rotate(0deg);} to{ opacity:0; transform: translate(-50%, 120px) rotate(120deg);} }


/* Status labels */
.dice-result.win, .tower-game-over-title.win { color: #14f8a6 !important; text-shadow: 0 0 12px rgba(20,248,166,.45); }
.dice-result.lose, .tower-game-over-title.lose { color: #ff6b6b !important; text-shadow: 0 0 12px rgba(255,107,107,.35); }

/* Shimmer header accents */
.panel-header, .game-title, .card-title-enhanced {
  background: linear-gradient(90deg, #fff, #bcd3ff 30%, #fff 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* Hover lift utility for clickable surfaces */
.hover-lift { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 28px 80px rgba(0,0,0,.45); }

/* Utility: glowing borders */
.glow-border { position: relative; }
.glow-border::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(90deg, rgba(59,130,246,.6), rgba(34,211,238,.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* Footer / misc */
.empty-state { border-color: rgba(255,255,255,0.10) !important; background: rgba(11,17,33,.65) !important; }
.fab { background: linear-gradient(135deg, var(--primary-0), var(--primary-1)) !important; box-shadow: 0 18px 44px rgba(34,211,238,.5) !important; }

/* Mobile polish */
@media (max-width: 640px) {
  .panel { border-radius: 16px !important; }
  .nav-item { border-radius: 10px !important; }
}

/* Pointer position for button sparkle */
html { --mx: 50%; }

/* Tower responsive tuning */
@media (max-width: 980px) {
  .tower-board { --egg-w: clamp(52px, 16vw, 96px); --egg-h: clamp(30px, 9vw, 48px); --chip-col: clamp(52px, 12vw, 84px); min-height: clamp(400px, 58vh, 680px); }
}
@media (max-width: 640px) {
  /* tighter geometry for phones */
  .tower-board {
    --egg-w: clamp(42px, 14vw, 56px);
    --egg-h: clamp(24px, 8vw, 34px);
    --row-gap: clamp(6px, 2vw, 10px);
    /* widen reserved space for chips on phones */
    --chip-col: clamp(64px, 22vw, 88px);
    padding: 10px;
    padding-right: calc(var(--chip-col) + clamp(10px, 2.4vw, 16px));
  }
  .tower-level { padding-left: clamp(14px, 4vw, 20px) !important; }
  .tower-level-number { font-size: 11px !important; }
  .tower-multiplier-display { font-size: 11px !important; padding: 4px 6px !important; border-radius: 10px !important; }

  .tower-main { flex-direction: column !important; gap: clamp(16px, 4vw, 24px) !important; }
  .tower-left, .tower-right { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  .tower-right { margin-top: clamp(8px, 2.5vw, 14px) !important; overflow: hidden; }
  .tower-stats { margin-top: clamp(10px, 2.5vw, 16px) !important; }
  .tower-bet-btn, .tower-cashout-btn { width: 100% !important; margin-top: clamp(10px, 3vw, 16px) !important; }
  .tower-cashout-btn { box-shadow: 0 12px 28px -12px rgba(16,185,129,.55), 0 0 0 1px rgba(16,185,129,.45) !important; }
}

@media (max-width: 400px) {
  .tower-board {
    --egg-w: clamp(36px, 18vw, 48px);
    --egg-h: clamp(20px, 10vw, 30px);
    --row-gap: 6px;
    /* ensure enough reserved width even on narrow screens */
    --chip-col: clamp(60px, 26vw, 86px);
    padding-right: calc(var(--chip-col) + clamp(8px, 2.8vw, 14px));
    min-height: clamp(360px, 60vh, 620px);
  }
  .tower-multiplier-display { font-size: 10px !important; padding: 4px 6px !important; border-radius: 10px !important; }
  .tower-level-number { font-size: 10px !important; }
}

/* Improve touch ergonomics */
.tower-egg { touch-action: manipulation; }