/* === Snack TD - Retro Pixel-Art Style === */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Prevent double-tap zoom on all interactive elements */
button, .panel-tab, .inv-slot, .ctx-btn, .hud-item, select, input {
  touch-action: manipulation;
}

.language-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFE9B6;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}
.language-select {
  min-width: 118px;
  border: 2px solid #FFD926;
  border-radius: 6px;
  background: #2A1A0A;
  color: #FFF5D6;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 7px 8px;
  cursor: pointer;
}
.language-select:focus {
  outline: 2px solid #FFF;
  outline-offset: 2px;
}
.start-language-picker {
  margin: 8px 0 12px;
}
.pause-language-picker {
  width: 100%;
  margin: -4px 0 8px;
}

/* Pixel-art utility classes */
.pixel-border {
  border: 3px solid #5A3A1A;
  box-shadow: inset 0 0 0 1px #8B6914, inset 0 0 0 2px #C4915C, 0 0 0 1px #3D2B1F;
  image-rendering: pixelated; border-radius: 2px !important;
}
.pixel-btn {
  border: 2px solid #3D2B1F !important;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.2), inset 2px 2px 0 rgba(255,255,255,0.2);
  image-rendering: pixelated; border-radius: 2px !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  font-family: 'Press Start 2P', monospace !important;
}
.pixel-btn:active {
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2), inset -2px -2px 0 rgba(255,255,255,0.2);
}
.wood-panel {
  background: #FFF8ED;
}

/* Wood-textured panel frame */
.wood-frame {
  position: relative;
  background: #FFF8ED;
}
.wood-frame::before {
  content: '';
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  background:
    repeating-linear-gradient(
      0deg,
      #C49545 0px, #B88535 1px, #C49545 2px, #D4A85A 3px, #C49545 4px
    );
  border-radius: 3px;
  z-index: -1;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.2),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    0 0 0 1px #5A3A1A,
    2px 3px 6px rgba(0,0,0,0.25);
}
.wood-frame::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #999 30%, #666 70%);
  border-radius: 50%;
  border: 1px solid #555;
  top: -2px; left: -2px;
  box-shadow:
    calc(100% - 2px) 0 0 0 #777,
    0 calc(100% - 2px) 0 0 #777,
    calc(100% - 2px) calc(100% - 2px) 0 0 #777;
  z-index: 1;
  pointer-events: none;
}

:root {
  --bg-panel: rgba(30,20,10,0.85);
  --bg-dark: #1A0E06;
  --bg-medium: rgba(40,28,16,0.7);
  --bg-light: rgba(50,35,20,0.8);
  --gold: #B8962E;
  --gold-bright: #D4950A;
  --border: rgba(196,145,92,0.35);
  --text: #E8DCCB;
  --text-dim: #C4A888;
  --text-muted: #9A8878;
  --sugar-color: #E8A030;
  --streusel-color: #3DC9B5;
  --lives-color: #FF6B6B;
  --wave-color: #D4A530;
  --green-btn: #4CAF50;
  --pink: #E84393;
  --red-btn: #D9534F;
  --fusion-color: #B38C0D;
  --fusion-border: #FFE033;
}

html, body { height: 100%; width: 100%; overflow: hidden; overflow-x: hidden; }

body {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232,67,147,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(232,160,48,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(42,157,143,0.06) 0%, transparent 60%),
    linear-gradient(135deg, #2A1A0E 0%, #3D2B1F 30%, #1A0E06 70%, #2A1A0E 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  display: flex; flex-direction: column;
  image-rendering: pixelated;
}

#game-container {
  display: flex; flex-direction: column;
  height: 100vh; width: 100%;
  position: relative;
  overflow: hidden;
}

/* Animated background layer behind game UI */
#game-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* === HUD === */

#hud {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 12px;
  background: rgba(30,20,10,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(196,145,92,0.3);
  border-radius: 10px;
  margin: 6px 8px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}

/* Left: Logo */
#logo-wrap { position: relative; flex-shrink: 0; user-select: none; -webkit-user-select: none; min-width: 90px; }
#game-logo {
  font-size: 14px; font-weight: 900; letter-spacing: 0.5px;
  font-family: 'Press Start 2P', monospace;
  background: linear-gradient(90deg, #E84393, #E8A030);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; display: block; white-space: nowrap;
}

.mode-badge {
  display: block;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #FFD45C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Center: Resources */
#hud-row1 { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 1; min-width: 0; }
/* Right: Action buttons */
#hud-row2 { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.hud-group { display: flex; align-items: center; gap: 12px; padding: 2px 8px; }
.hud-group-resources { border-right: 1px solid rgba(196, 145, 92, 0.2); padding-right: 16px; }
.hud-item { display: flex; flex-direction: column; align-items: center; min-width: 50px; line-height: 1.3; }
.hud-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; }
.hud-value { font-size: 19px; font-weight: 700; }
#debug-dot {
  position: absolute; top: -2px; right: -6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF4040;
}
#hud-dbg {
  font-size: 10px; font-weight: 800; color: #FF4040;
  flex-shrink: 0; letter-spacing: 1px;
}

/* Debug Panel */
#debug-panel {
  position: fixed; top: 58px; left: 8px; z-index: 200;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(4px);
  border: 1px solid #FF4040; border-radius: 8px;
  color: #EEE; font-family: monospace; font-size: 12px;
  padding: 0; width: 320px; max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
}
#debug-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #FF4040;
}
#debug-title { color: #FF4040; font-weight: 800; font-size: 13px; letter-spacing: 2px; }
#debug-close {
  background: none; border: 1px solid #FF4040; color: #FF4040;
  font-size: 14px; cursor: pointer; border-radius: 4px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
}
#debug-close:hover { background: #FF4040; color: #000; }
#debug-body { padding: 8px 12px; overflow-y: auto; flex: 1; }
.dbg-section {
  font-size: 10px; font-weight: 700; color: #FF8080;
  text-transform: uppercase; letter-spacing: 1px;
  margin: 8px 0 4px; border-bottom: 1px solid #333;
  padding-bottom: 2px;
}
.dbg-section:first-child { margin-top: 0; }
.dbg-row {
  display: flex; gap: 4px; align-items: center;
  margin-bottom: 4px; flex-wrap: wrap;
}
.dbg-row label { font-size: 11px; color: #CCC; white-space: nowrap; }
.dbg-placement-options {
  justify-content: flex-start;
  gap: 12px;
  padding: 2px 0 4px;
}
.dbg-placement-options label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #F0D6A0;
}
.dbg-row input[type="number"] {
  background: #222; border: 1px solid #555; color: #FFF;
  border-radius: 3px; padding: 2px 4px; font-family: monospace; font-size: 11px;
}
.dbg-row select {
  background: #222; border: 1px solid #555; color: #FFF;
  border-radius: 3px; padding: 2px; font-size: 11px; flex: 1; min-width: 0;
}
.dbg-btn {
  background: #333; border: 1px solid #666; color: #EEE;
  border-radius: 3px; padding: 3px 8px; font-size: 11px;
  font-family: monospace; cursor: pointer; white-space: nowrap;
}
.dbg-btn:hover { background: #555; border-color: #FF8080; }

#hud-sugar .hud-value { color: var(--sugar-color); }
#hud-streusel .hud-value { color: var(--streusel-color); }
#hud-lives .hud-value { color: var(--lives-color); }
#hud-wave .hud-value { color: var(--wave-color); }
#hud-countdown .hud-value { color: var(--gold-bright); }
#hud-countdown.countdown-active .hud-value {
  animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

#btn-start-wave {
  padding: 6px 12px; background: var(--green-btn); color: #fff;
  border: 2px solid #3D2B1F; border-radius: 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.2), inset 2px 2px 0 rgba(255,255,255,0.2);
  font-size: 10px; font-weight: 700; cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  min-height: 34px; transition: background 0.15s, box-shadow 0.15s;
}
#btn-start-wave:hover { background: #5cbf60; }
#btn-start-wave:active { box-shadow: inset 2px 2px 0 rgba(0,0,0,0.2), inset -2px -2px 0 rgba(255,255,255,0.2); }
#btn-start-wave:disabled { background: #BBB; border-color: #999; cursor: not-allowed; opacity: 0.6; color: #ddd; }

.speed-btn {
  padding: 8px 12px; background: var(--bg-medium); color: var(--text);
  border: 2px solid #5A3A1A; border-radius: 2px;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.2);
  font-size: 11px; font-weight: 800; cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  min-width: 38px; min-height: 34px; text-align: center;
  transition: background 0.15s, box-shadow 0.15s;
}
.speed-btn:hover { background: var(--gold); color: #fff; }
.speed-btn:active { background: var(--gold-bright); color: #fff; }
.speed-btn.active { background: var(--gold-bright); color: #fff; }

/* === Main Area === */

#main-area { flex: 1 1 0%; display: flex; min-height: 0; overflow: hidden; }

#left-panel {
  width: 240px; flex-shrink: 0;
  background: rgba(30,20,10,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(196,145,92,0.3);
  border-radius: 10px;
  margin: 6px 0 6px 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow-y: auto; padding: 8px 7px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; transform: none;
  scrollbar-color: rgba(196,145,92,0.4) transparent;
}

#canvas-wrapper {
  flex: 1 1 0%; display: flex; justify-content: center; align-items: center;
  overflow: hidden; min-height: 100px; min-width: 100px;
  position: relative;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#canvas-wrapper canvas {
  position: absolute; display: block; touch-action: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#bg-canvas { z-index: 0; }
#game-canvas { z-index: 1; }
#ui-canvas { z-index: 2; cursor: default; pointer-events: auto; }
#ui-canvas.cursor-tower { cursor: grab; }
#ui-canvas.cursor-dragging { cursor: grabbing; }
#ui-canvas.cursor-build-ok { cursor: copy; }
#ui-canvas.cursor-build-bad { cursor: not-allowed; }
#ui-canvas.cursor-target { cursor: cell; }
#ui-canvas.spell-active,
#ui-canvas.cursor-spell { cursor: none; }
#bg-canvas, #game-canvas { pointer-events: none; }

/* === Right Sidebar === */

#sidebar {
  width: 200px; flex-shrink: 0;
  background: rgba(30,20,10,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(196,145,92,0.3);
  border-radius: 10px;
  margin: 6px 8px 6px 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow-y: auto; padding: 8px 7px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; transform: none;
  scrollbar-color: rgba(196,145,92,0.4) transparent;
}

.sidebar-section { display: flex; flex-direction: column; gap: 4px; }

.section-title {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: #8B6914;
  border-bottom: 1px solid rgba(139, 105, 20, 0.3); padding-bottom: 4px;
  margin-top: 4px; margin-bottom: 8px;
  line-height: 1.4;
  font-family: 'Press Start 2P', monospace;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.sidebar-section:first-child .section-title { margin-top: 0; }

#constructor-info { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.constructor-chances { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.sidebar-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 10px;
  background: linear-gradient(180deg, #F0DDB8 0%, #D4B882 100%);
  color: #3D2B1F;
  border: 3px solid #8B6914; border-radius: 2px;
  box-shadow: inset 1px 1px 0 0 #D4A85A, inset -1px -1px 0 0 #5A3A1A, 1px 1px 2px rgba(0,0,0,0.15);
  cursor: pointer; width: 100%; line-height: 1.3;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  font-family: 'Press Start 2P', monospace;
  transition: background 0.15s, box-shadow 0.15s;
}
.sidebar-btn:hover { background: linear-gradient(180deg, #F5E5C8 0%, #DCC090 100%); }
.sidebar-btn:active { box-shadow: inset -1px -1px 0 0 #D4A85A, inset 1px 1px 0 0 #5A3A1A; }
.sidebar-btn:disabled { background: #BBB; border-color: #999; cursor: not-allowed; opacity: 0.6; color: #777; }
.sidebar-btn.btn-gold { background: linear-gradient(180deg, #5cbf60 0%, #4CAF50 100%); border-color: #3d8b40; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.sidebar-btn.btn-gold:hover { background: linear-gradient(180deg, #6cd070 0%, #5cbf60 100%); }
.sidebar-btn.btn-gold:disabled { background: #BBB; border-color: #999; opacity: 0.6; color: #777; }
.sidebar-btn.btn-multi-active {
  background: linear-gradient(180deg,#FFE94F 0%,#C49F0F 100%) !important;
  border-color: #B38C0D !important;
  color: #3D2B1F !important; font-weight: 800 !important;
  animation: multi-active-pulse 1.4s ease-in-out infinite;
}
@keyframes multi-active-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,217,38,0); }
  50% { box-shadow: 0 0 0 3px rgba(255,217,38,0.6); }
}
/* Constructor + Bauen on the same row */
.constructor-build-row {
  display: flex; gap: 4px; width: 100%;
}
.constructor-build-row .sidebar-btn { flex: 1; min-width: 0; }
/* Hint below the row */
.build-multi-hint {
  font-size: 9px; color: #A08060; text-align: right;
  margin-top: 2px; opacity: 0.8; font-style: italic;
}
.sidebar-btn.btn-red { background: linear-gradient(180deg, #E86060 0%, #D9534F 100%); border-color: #c9302c; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.sidebar-btn.btn-red:hover { background: linear-gradient(180deg, #F07070 0%, #E86060 100%); }

.sidebar-btn .btn-main { font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sidebar-btn .btn-cost { font-size: 11px; opacity: 0.9; }

#tower-detail { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
#build-detail { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
#quest-list { }
#snackman-info { font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* Snack Man highlight: pulsing golden border when available */
#snackman-section.snackman-highlight {
  border: 2px solid #FFD700 !important;
  animation: snackman-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
@keyframes snackman-pulse {
  0%, 100% { border-color: #FFD700; box-shadow: 0 0 6px rgba(255,215,0,0.3); }
  50% { border-color: #FFA500; box-shadow: 0 0 16px rgba(255,165,0,0.6), inset 0 0 8px rgba(255,215,0,0.1); }
}
#snackman-section.snackman-highlight #btn-place-snackman {
  animation: snackman-btn-pulse 1.5s ease-in-out infinite;
}
@keyframes snackman-btn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.lock-hint {
  font-size: 11px; color: #5C4A32; margin-top: 2px;
  font-style: italic; text-align: center;
}

/* Locked features collapsed header */
.locked-collapsed-header {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  cursor: pointer; padding: 8px 6px;
  border: 1px dashed var(--border); border-radius: 2px;
  background: rgba(0,0,0,0.03);
  font-size: 11px; color: var(--text-muted);
  transition: background 0.2s;
}
.locked-collapsed-header:hover { background: rgba(0,0,0,0.06); }
.locked-collapsed-header .lock-icon { font-size: 14px; flex-shrink: 0; }
.locked-collapsed-header .expand-arrow {
  margin-left: auto; font-size: 10px;
  transition: transform 0.2s;
}
.locked-collapsed-header.expanded .expand-arrow { transform: rotate(180deg); }
#locked-features-wrapper.collapsed { display: none; }

/* Locked section visual state (grayscale + lock overlay) */
.locked-section { filter: grayscale(0.8); opacity: 0.5; }
.locked-section .sidebar-btn { cursor: not-allowed; }

/* Glow animation when features unlock */
@keyframes unlock-glow {
  0% { box-shadow: 0 0 0 0 rgba(212, 149, 10, 0); }
  30% { box-shadow: 0 0 12px 4px rgba(212, 149, 10, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(212, 149, 10, 0); }
}
#locked-features-wrapper.unlocked-glow { animation: unlock-glow 2s ease-out; }

.result-text {
  font-size: 13px; font-weight: 700; min-height: 20px;
  text-align: center; padding: 2px; line-height: 1.3;
}

/* Gamble progress */
#gamble-progress { margin: 4px 0; }
#gamble-progress-label {
  font-size: 11px; color: var(--text-dim); text-align: center;
  font-weight: 700; margin-bottom: 2px;
}
#gamble-progress-bar {
  height: 10px; background: var(--bg-medium); border-radius: 5px;
  overflow: hidden; border: 1px solid var(--border); position: relative;
}
#gamble-progress-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--sugar-color), #FF6B8A);
  transition: width 0.3s ease;
}
#gamble-progress-reward {
  font-size: 10px; color: var(--text-muted); text-align: center;
  margin-top: 1px;
}

/* === Slot Machine === */
#slot-machine { margin-bottom: 6px; }
.slot-cabinet {
  background: linear-gradient(180deg, #A0524A 0%, #7A3B35 50%, #5C2A25 100%);
  border: 3px solid #D4A85A;
  border-radius: 6px;
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 2px 8px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.slot-cabinet::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent, transparent 8px,
    rgba(255,215,0,0.04) 8px, rgba(255,215,0,0.04) 9px
  );
  pointer-events: none;
}
.slot-top-label {
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #FFD700;
  text-shadow: 0 0 6px rgba(255,215,0,0.6), 0 1px 0 #000;
  margin-bottom: 5px;
  letter-spacing: 1px;
  animation: slot-label-glow 2s ease-in-out infinite alternate;
}
@keyframes slot-label-glow {
  0% { text-shadow: 0 0 4px rgba(255,215,0,0.4), 0 1px 0 #000; }
  100% { text-shadow: 0 0 10px rgba(255,215,0,0.9), 0 0 20px rgba(255,215,0,0.3), 0 1px 0 #000; }
}
.slot-reels-frame {
  display: flex; gap: 3px; justify-content: center;
  background: #1A1A1A;
  border: 2px solid #8B6914;
  border-radius: 4px;
  padding: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}
.slot-reel {
  width: 36px; height: 36px;
  background: linear-gradient(180deg, #FFF8E7 0%, #FFF 30%, #FFF 70%, #F0E6D4 100%);
  border: 2px solid #B8860B;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.reel-inner {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 22px;
  transition: transform 0.1s;
}
.slot-reel.spinning .reel-inner {
  animation: reel-spin 0.15s linear infinite;
}
@keyframes reel-spin {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
.slot-reel.landed {
  animation: reel-land 0.2s ease-out;
}
@keyframes reel-land {
  0% { transform: scale(1.1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
#slot-machine .result-text { color: #FFD700; text-shadow: 0 1px 0 #000; }
#slot-machine #gamble-progress { margin: 4px 2px; }
#slot-machine #gamble-progress-label { color: #FFD700; opacity: 0.8; }
#slot-machine #gamble-progress-bar { background: #3A2A1A; border-color: #8B6914; }
#slot-machine #gamble-progress-reward { color: #FFD700; opacity: 0.7; }

.slot-lever-btn {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  padding: 6px 8px;
  margin-top: 4px;
  background: linear-gradient(180deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  color: #3A0808;
  border: 2px solid #B8860B;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  font-weight: 900;
  box-shadow: 0 2px 0 #8B6914, inset 0 1px 0 rgba(255,255,255,0.4);
  transition: all 0.1s;
}
.slot-lever-btn:hover { background: linear-gradient(180deg, #FFE44D 0%, #FFB733 50%, #FFA500 100%); }
.slot-lever-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #8B6914, inset 0 1px 0 rgba(255,255,255,0.4); }
.slot-lever-btn:disabled { background: #666; border-color: #444; color: #999; cursor: not-allowed; box-shadow: none; }
.slot-lever-btn .lever-icon { font-size: 14px; }
.slot-lever-btn .lever-text { font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.slot-lever-btn .btn-cost { font-size: 9px; opacity: 0.8; margin-top: 1px; font-family: 'Press Start 2P', monospace; }
.slot-lever-btn.spinning { animation: lever-shake 0.1s linear infinite; }
@keyframes lever-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

/* Gamble banner (centered screen feedback) */
@keyframes gamble-banner-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Aura spin banner animations */
@keyframes aura-spin-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.82); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes aura-spin-land {
  0% { transform: rotate(360deg) scale(1.8); }
  40% { transform: rotate(0deg) scale(0.85); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1.1); }
}
/* Slow rhythmic glow after landing so the result keeps drawing the eye */
@keyframes aura-glow-pulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.2); }
}
/* Decorative ring behind the aura icon — cycles through aura colors during
   the spin and locks onto the winner with a big color-matched glow. */
.aura-spin-ring {
  position: absolute;
  width: 220px; height: 220px;
  border: 4px solid #FFF;
  border-radius: 50%;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  animation: aura-ring-spin 1.2s linear infinite;
  opacity: 0.85;
  transition: box-shadow 0.35s ease-out;
}
.aura-spin-ring.landed {
  animation: aura-ring-land 0.6s ease-out, aura-ring-pulse 1.6s ease-in-out 0.6s infinite;
}
@keyframes aura-ring-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes aura-ring-land {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0.9; }
}
@keyframes aura-ring-pulse {
  0%, 100% { transform: scale(1.2); opacity: 0.9; }
  50% { transform: scale(1.32); opacity: 1; }
}

/* Mystery Box */
#mystery-box-wrap { margin-top: 6px; }
.mystery-box-btn {
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
  padding: 8px;
  background: linear-gradient(180deg, #9B7BBF 0%, #7B5DA0 50%, #5E4580 100%);
  color: #F0E8FF;
  border: 3px solid #B08CCF;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  box-shadow: 0 0 8px rgba(155,89,182,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.mystery-box-btn::before {
  content: '?';
  position: absolute; top: -2px; right: 4px;
  font-size: 28px; font-weight: 900;
  color: rgba(255,215,0,0.1);
  pointer-events: none;
}
.mystery-box-btn:hover {
  box-shadow: 0 0 12px rgba(176,140,207,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
  border-color: #C4A6DD;
}
.mystery-box-btn:disabled { background: #555; border-color: #444; color: #888; box-shadow: none; cursor: not-allowed; }
.mystery-box-btn:disabled::before { display: none; }
.mystery-box-btn .mystery-chest { font-size: 20px; }
.mystery-box-btn .mystery-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.mystery-box-btn .btn-cost { font-size: 9px; opacity: 0.8; font-family: 'Press Start 2P', monospace; }

/* === Stats Overlay === */
#stats-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
#stats-content {
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(196,145,92,0.4);
  border-radius: 10px;
  padding: 16px;
  max-width: 420px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-family: 'Press Start 2P', monospace;
  color: #E8DCCB;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  font-size: 10px;
  line-height: 1.6;
}
.stats-grid .stat-label { color: #C4A888; }
.stats-grid .stat-value { color: #E8DCCB; font-weight: 700; text-align: right; }
.stats-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(196,145,92,0.25);
  margin: 4px 0;
}
.stats-section-title {
  grid-column: 1 / -1;
  font-size: 9px;
  color: #D4A530;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(196,145,92,0.25);
}
.stats-tower-row {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
  font-size: 9px;
}
.stats-tower-row .tower-rank { color: #8B6914; font-weight: 700; min-width: 16px; }
.stats-tower-row .tower-name { flex: 1; color: #3D2B1F; }
.stats-tower-row .tower-dmg { color: #D9534F; font-weight: 700; }

/* === Aura Spin Buttons === */
.aura-btn-row {
  display: flex; gap: 5px; margin-bottom: 6px;
}
.aura-spin-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px;
  border: 2px solid;
  border-radius: 50% / 35%;
  cursor: pointer;
  font-family: 'Press Start 2P', monospace;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
}
.aura-spin-btn::before {
  content: '';
  position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
  animation: aura-glow-rotate 4s linear infinite;
  pointer-events: none;
}
@keyframes aura-glow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.aura-spin-streusel {
  background: radial-gradient(circle at 50% 40%, #9B7BBF 0%, #5E4580 100%);
  border-color: #B08CCF;
  color: #F0E8FF;
  box-shadow: 0 0 6px rgba(176,140,207,0.35), inset 0 0 10px rgba(176,140,207,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.aura-spin-streusel:hover {
  box-shadow: 0 0 10px rgba(176,140,207,0.5), inset 0 0 14px rgba(176,140,207,0.25);
}
.aura-spin-sugar {
  background: radial-gradient(circle at 50% 40%, #D4950A 0%, #6B4226 100%);
  border-color: #FFD700;
  color: #FFF8E7;
  box-shadow: 0 0 8px rgba(212,149,10,0.4), inset 0 0 12px rgba(255,215,0,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.aura-spin-sugar:hover {
  box-shadow: 0 0 14px rgba(255,215,0,0.6), inset 0 0 16px rgba(255,215,0,0.25);
}
.aura-spin-btn:disabled {
  background: #555 !important;
  border-color: #444 !important;
  color: #888 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.aura-spin-btn:disabled::before { display: none; }
.aura-spin-icon { font-size: 16px; line-height: 1; }
.aura-spin-label { font-size: 8px; font-weight: 700; margin-top: 2px; letter-spacing: 0.5px; }
.aura-spin-cost { font-size: 7px; opacity: 0.85; margin-top: 1px; }

/* Mobile aura slide-in panel (receives #aura-section via JS on narrow screens) */
.aura-mobile-panel {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 240px; max-width: 75vw;
  z-index: 52;
  overflow-y: auto;
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-right: 2px solid rgba(196,145,92,0.3);
  box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  transform: translateX(-110%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.aura-mobile-panel.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Aura display */
#aura-display { font-size: 11px; line-height: 1.4; }
.aura-row { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; flex-wrap: nowrap; }
.aura-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; color: #fff; }
.aura-bar { flex: 1; height: 7px; background: #ddd; border-radius: 3px; overflow: hidden; }
.aura-fill { height: 100%; border-radius: 3px; }

/* === Bottom Bar === */

#bottom-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: rgba(30,20,10,0.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(196,145,92,0.3);
  border-radius: 10px;
  margin: 0 8px 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  flex-shrink: 0; min-height: 64px; height: auto; overflow: hidden;
}

#inventory-header {
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gold-bright);
  flex-shrink: 0; white-space: nowrap;
}

#inventory { display: flex; gap: 3px; flex: 1; min-width: 0; }

.inv-slot {
  width: 50px; height: 50px; min-width: 34px; flex-shrink: 1;
  border: 2px solid #5A3A1A; border-radius: 2px;
  background: var(--bg-medium);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.15);
  cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.1s;
}
.inv-slot:hover { border-color: var(--gold); background: var(--bg-light); }
.inv-slot.selected { border-color: var(--gold-bright); background: var(--bg-light); box-shadow: 0 0 8px rgba(212,149,10,0.6); }
.inv-slot.empty { cursor: default; opacity: 0.35; }
.inv-slot.fusion-slot { border-color: var(--fusion-border); }
.inv-slot.special-slot {
  border-color: #FF5A2E;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.15),
              0 0 6px rgba(255,90,46,0.55);
}
.inv-slot.special-slot::after {
  content: "★";
  position: absolute; top: 0px; left: 2px;
  font-size: 8px; color: #FFD45C;
  text-shadow: 0 0 4px rgba(255,90,46,0.9);
  line-height: 1; pointer-events: none;
}
.inv-slot .slot-family { font-size: 13px; font-weight: 700; color: #fff; text-align: center; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.inv-slot .slot-level { position: absolute; top: 1px; right: 3px; font-size: 11px; font-weight: 800; text-shadow: 0 0 2px #000; }

/* === Context Menu === */

#inv-context {
  position: fixed; z-index: 80;
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(196,145,92,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  border-radius: 8px; padding: 10px 12px;
  min-width: 200px; max-width: 260px;
  touch-action: manipulation;
}
#ctx-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
#ctx-stats { color: var(--text-dim); margin-bottom: 8px; }
.ctx-tower-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ctx-tower-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 800;
}
.ctx-tower-level {
  flex-shrink: 0;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 800;
  color: #1E1208;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.1);
}
.ctx-badge-special {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: #1E1208;
  background: linear-gradient(135deg, #FF5A2E, #FFD45C);
  box-shadow: 0 0 8px rgba(255,90,46,0.55);
  flex-shrink: 0;
}
.ctx-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.ctx-stat-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 2px 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.ctx-stat-icon { font-size: 15px; line-height: 1; margin-bottom: 2px; }
.ctx-stat-value { font-size: 14px; font-weight: 800; color: #FFD926; line-height: 1.1; }
.ctx-stat-label {
  font-size: 9px; color: #8A7868;
  text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px;
}
.ctx-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.ctx-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #E8DCCB; white-space: nowrap;
}
.ctx-chip.chip-target {
  color: #FFE68F; border-color: rgba(255,217,38,0.55); background: rgba(255,217,38,0.14);
}
.ctx-chip.chip-damage {
  color: #FFC0A8; border-color: rgba(255,128,96,0.55); background: rgba(255,128,96,0.16);
}
.ctx-chip.chip-status {
  color: #BEE3FF; border-color: rgba(107,195,255,0.55); background: rgba(107,195,255,0.16);
}
.ctx-chip.chip-support {
  color: #CFF7D0; border-color: rgba(135,220,140,0.55); background: rgba(135,220,140,0.16);
}
#ctx-buttons { display: flex; flex-direction: column; gap: 4px; }

.ctx-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 10px; color: #fff;
  border: 2px solid #3D2B1F; border-radius: 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.2), inset 2px 2px 0 rgba(255,255,255,0.2);
  cursor: pointer; width: 100%;
  font-family: inherit; text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  transition: background 0.15s, box-shadow 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ctx-btn .ctx-btn-main { font-size: 14px; font-weight: 700; text-transform: uppercase; }
.ctx-btn .ctx-btn-cost { font-size: 12px; opacity: 0.9; }
.ctx-btn-place { background: var(--green-btn); border-color: #3d8b40; }
.ctx-btn-place:hover { background: #5cbf60; }
.ctx-btn-combine { background: var(--gold); border-color: var(--gold-bright); }
.ctx-btn-combine:hover { background: var(--gold-bright); }
.ctx-btn-fusion { background: var(--fusion-color); border-color: var(--fusion-border); }
.ctx-btn-fusion:hover { background: #c9a010; }
.ctx-btn-fusion-ready {
  position: relative;
  border-color: #FFE066;
  background: linear-gradient(180deg, #F6C945 0%, #D4950A 58%, #8F5D00 100%);
  box-shadow:
    0 0 0 2px rgba(255,224,102,0.24),
    0 0 14px rgba(255,210,70,0.52),
    inset -2px -2px 0 rgba(0,0,0,0.24),
    inset 2px 2px 0 rgba(255,255,255,0.28);
  animation: ctx-fusion-pulse 1.35s ease-in-out infinite;
}
.ctx-btn-fusion-ready:hover {
  background: linear-gradient(180deg, #FFE066 0%, #E0A314 58%, #9A6500 100%);
}
.ctx-fusion-hint {
  margin-top: 7px;
  padding: 5px 7px;
  color: #FFE066;
  background: rgba(212,149,10,0.18);
  border: 1px solid rgba(255,224,102,0.52);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
@keyframes ctx-fusion-pulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.16); }
}
.ctx-btn-sell { background: var(--red-btn); border-color: #c9302c; }
.ctx-btn-sell:hover { background: #c9302c; }
.ctx-btn-ultimate { background: linear-gradient(135deg, #006680 0%, #003344 100%); border-color: #00FFFF; color: #00FFFF; text-shadow: 0 0 8px rgba(0,255,255,0.8); box-shadow: 0 0 10px rgba(0,255,255,0.3), inset 0 0 6px rgba(0,255,255,0.1); }
.ctx-btn-ultimate:hover { background: linear-gradient(135deg, #009ab3 0%, #005566 100%); box-shadow: 0 0 16px rgba(0,255,255,0.6), inset 0 0 8px rgba(0,255,255,0.2); }
.ctx-btn:disabled { background: #BBB; border-color: #999; cursor: not-allowed; opacity: 0.6; color: #777; }

/* === Enemy Tooltip === */
#enemy-tooltip {
  position: fixed; z-index: 75; pointer-events: none;
  background: rgba(61,43,31,0.92); color: #FFF;
  border: 1px solid var(--gold); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; line-height: 1.4;
  max-width: 220px; white-space: nowrap;
}
@media (hover: none), (pointer: coarse) {
  #enemy-tooltip { display: none !important; }
}

/* === Confirm Dialog === */
#confirm-dialog {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center; z-index: 110;
}
#confirm-content {
  background: var(--bg-panel); border: 3px solid var(--gold);
  border-radius: 10px; padding: 20px 28px; text-align: center;
  min-width: 240px;
}
#confirm-text { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--text); }

/* === Pause Menu === */
#pause-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center; z-index: 105;
}
#pause-menu-content {
  background: var(--bg-panel); border: 3px solid var(--gold);
  border-radius: 10px; padding: 24px 32px; text-align: center;
  min-width: 240px; max-width: 320px; width: 80vw;
}
#pause-menu-title {
  font-size: 20px; font-weight: 900; color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 2px; margin: 0 0 18px 0;
}
.pause-menu-btn {
  display: block; width: 100%; margin: 8px 0;
  padding: 10px 16px; font-size: 13px; font-weight: 800;
  font-family: 'Press Start 2P', monospace;
  border: 2px solid #5A3A1A; border-radius: 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.15), inset 2px 2px 0 rgba(255,255,255,0.2);
  background: var(--bg-medium); color: var(--text);
  cursor: pointer; text-align: center;
}
.pause-menu-btn:hover { background: var(--gold); color: #fff; }
.pause-menu-btn:disabled { background: #BBB; border-color: #999; color: #777; cursor: not-allowed; opacity: 0.6; }
.pause-menu-btn-primary { background: var(--green-btn); color: #fff; border-color: #3d8b40; }
.pause-menu-btn-primary:hover { background: #5cbf60; }
.pause-menu-btn-secondary { font-size: 11px; opacity: 0.85; }
.pause-menu-btn-secondary:hover { opacity: 1; }
.pause-menu-btn-danger { background: rgba(180,40,40,0.18); border-color: rgba(220,60,60,0.55); color: #FF8888; margin-top: 4px; }
.pause-menu-btn-danger:hover { background: rgba(200,50,50,0.85); color: #fff; border-color: #FF6666; }

/* === Encyclopedia === */
#encyclopedia {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center; z-index: 95;
}
#encyclopedia-content {
  background: var(--bg-panel); border: 3px solid var(--gold);
  border-radius: 10px; padding: 16px 20px;
  max-width: 600px; width: 90vw; max-height: 80vh; overflow-y: auto;
}
.ency-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; border-bottom: 1px solid var(--bg-medium);
}
.ency-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #FFF; flex-shrink: 0;
}
.ency-name { font-weight: 700; font-size: 14px; }
.ency-stats { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.ency-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.ency-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ency-stats-inline {
  display: inline-flex; gap: 10px; font-size: 12px;
  color: var(--text-dim);
}
.ency-stats-inline .ency-stat-item { display: inline-flex; align-items: center; gap: 3px; }
.ency-stats-inline b { color: #FFD926; font-weight: 800; }
.ency-row-meta {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ency-family-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 800;
  background: rgba(255,255,255,0.05);
  border: 1px solid;
}
.ency-family-join { color: #8A7868; font-size: 11px; padding: 0 2px; }
.ency-hint {
  font-size: 11px; color: #9A8878; line-height: 1.5;
  margin: 2px 0 6px; padding: 4px 6px;
  background: rgba(255,255,255,0.05); border-radius: 4px;
}
.ency-hint strong { color: #D4A530; }
.ency-info-block {
  margin: 4px 0; padding: 5px 8px;
  background: rgba(255,255,255,0.05); border-radius: 4px;
}
.ency-info-title {
  font-size: 12px; font-weight: 700; color: #D4A530; margin-bottom: 2px;
}
.ency-info-text {
  font-size: 11px; color: #C4A888; line-height: 1.6;
}

/* === Shortcut Help Overlay === */
#shortcut-help {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center; z-index: 115;
}
#shortcut-help-content {
  background: var(--bg-panel); border: 3px solid var(--gold);
  border-radius: 10px; padding: 20px 28px;
  min-width: 280px; max-width: 400px; width: 85vw;
}
.shortcut-grid {
  display: flex; flex-direction: column; gap: 6px;
}
.shortcut-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--bg-medium);
  font-size: 13px; color: var(--text);
}
.shortcut-row:last-child { border-bottom: none; }
.shortcut-row kbd {
  display: inline-block; min-width: 24px; text-align: center;
  padding: 2px 7px; font-size: 12px; font-weight: 700;
  font-family: 'Press Start 2P', monospace;
  background: rgba(255,255,255,0.08); color: var(--gold-bright);
  border: 2px solid rgba(196,145,92,0.3); border-radius: 4px;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15), inset 1px 1px 0 rgba(255,255,255,0.05);
}
.shortcut-row span:last-child {
  flex: 1; font-weight: 600;
}

/* === Panel Toggle Tabs (hidden on desktop) === */

.panel-tab {
  display: none; /* shown only on mobile */
  position: fixed; z-index: 50;
  /* Wood/waffle style matching sidebar-btn */
  background: linear-gradient(180deg, #F0DDB8 0%, #D4B882 100%);
  color: #3D2B1F;
  border: 3px solid #8B6914; border-radius: 2px;
  box-shadow: inset 1px 1px 0 0 #D4A85A, inset -1px -1px 0 0 #5A3A1A, 1px 1px 2px rgba(0,0,0,0.15);
  font-size: 9px; font-weight: 800;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 5px 4px;
}
.panel-tab:hover { background: linear-gradient(180deg, #F5E5C8 0%, #DCC090 100%); }
.panel-tab.active {
  background: linear-gradient(180deg, #5cbf60 0%, #4CAF50 100%);
  border-color: #3d8b40; color: #fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

.tab-icon { font-size: 18px; line-height: 1; }
.tab-label { font-size: 7px; line-height: 1; }
.tab-badge {
  font-size: 8px; background: var(--lives-color); color: #fff;
  border-radius: 2px; padding: 1px 3px; min-width: 14px; text-align: center;
}

/* Desktop base positions (overridden in mobile @media) */
.tab-left  { left: 6px; top: 70px; width: 62px; height: 52px; }
.tab-gambling { left: 6px; top: 130px; width: 62px; height: 52px; }
.tab-aura { left: 6px; width: 62px; height: 52px; }
.tab-right { display: none; } /* sidebar always visible on mobile — no toggle needed */
.tab-inv {
  right: 6px; bottom: 8px;
  width: 110px; height: 44px;
  flex-direction: row; gap: 4px;
  font-size: 9px; white-space: nowrap;
  /* Gold variant for inventory */
  background: linear-gradient(180deg, #D4B060 0%, #B89030 100%);
  border-color: #8B6914; color: #3D2B1F;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
}
.tab-inv:hover { background: linear-gradient(180deg, #DEC070 0%, #C4A040 100%); }

/* Floating multi-build cancel (mobile only) */
.fab-multi-cancel {
  display: none; position: fixed; z-index: 55;
  right: 6px; top: 180px;
  min-width: 64px; height: 40px; padding: 4px 10px;
  font-size: 10px; font-weight: 800;
  font-family: 'Press Start 2P', monospace;
  background: #FFD926; border: 3px solid #B38C0D; border-radius: 4px;
  color: #3D2B1F; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  animation: fab-pulse 1.5s ease-in-out infinite;
}
@keyframes fab-pulse {
  0%,100% { box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 2px 16px rgba(255,217,38,0.7); }
}

/* Snack Man placement FAB — hidden by default, shown via JS when snackManAvailable */
.fab-place-snackman {
  display: none;
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 76;
  min-width: min(360px, calc(100vw - 28px));
  min-height: 54px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.92);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,0.88), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #FFE06A 0%, #F0A52D 48%, #C85E20 100%);
  color: #2D1208;
  cursor: pointer;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.48);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.46),
    0 0 0 5px rgba(255, 208, 64, 0.18),
    0 0 30px rgba(255, 188, 40, 0.70),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -4px 0 rgba(90,28,8,0.28);
  transform: translateX(-50%);
  animation: fab-snackman-bottom-pulse 0.95s ease-in-out infinite;
}
.fab-place-snackman.visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.fab-place-snackman::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 2px solid rgba(255, 224, 92, 0.72);
  opacity: 0.75;
  pointer-events: none;
  animation: fab-snackman-ring 0.95s ease-out infinite;
}
.fab-place-snackman:hover {
  filter: brightness(1.08);
}
.fab-snackman-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 1px rgba(100,38,6,0.35));
}
.fab-snackman-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@keyframes fab-snackman-bottom-pulse {
  0%,100% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 14px 34px rgba(0,0,0,0.46),
      0 0 0 5px rgba(255, 208, 64, 0.18),
      0 0 24px rgba(255, 188, 40, 0.62),
      inset 0 2px 0 rgba(255,255,255,0.55),
      inset 0 -4px 0 rgba(90,28,8,0.28);
  }
  50% {
    transform: translateX(-50%) scale(1.055);
    box-shadow:
      0 18px 42px rgba(0,0,0,0.52),
      0 0 0 8px rgba(255, 232, 100, 0.22),
      0 0 42px rgba(255, 210, 55, 0.95),
      inset 0 2px 0 rgba(255,255,255,0.72),
      inset 0 -4px 0 rgba(90,28,8,0.30);
  }
}
@keyframes fab-snackman-ring {
  0% { transform: scale(0.96); opacity: 0.86; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* === Tutorial (overlay-free) === */

/* Pulsating highlight ring on target element */
.tutorial-highlight {
  animation: tutorial-pulse 0.9s ease-in-out infinite !important;
  outline: 3px solid #FF4500 !important;
  outline-offset: 4px !important;
}
@keyframes tutorial-pulse {
  0%, 100% {
    outline-color: #FF4500;
    box-shadow: 0 0 0 3px rgba(255,69,0,0.9), 0 0 18px 6px rgba(255,69,0,0.6);
  }
  50% {
    outline-color: #FFD926;
    box-shadow: 0 0 0 6px rgba(255,217,38,1.0), 0 0 28px 12px rgba(255,217,38,0.7);
  }
}

/* Dim non-relevant containers */
.tutorial-dim {
  filter: brightness(0.4) !important;
  transition: filter 0.3s ease !important;
  pointer-events: none !important;
}

/* Force sidebar visible during tutorial */
.force-visible {
  display: block !important;
  visibility: visible !important;
  z-index: 100 !important;
}
/* Speech bubble */
.tutorial-bubble {
  position: fixed;
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(196,145,92,0.4);
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 280px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.tutorial-bubble-text {
  font-size: 15px;
  line-height: 1.4;
  color: #E8DCCB;
  margin-bottom: 12px;
}
.tutorial-bubble-actions { text-align: center; }
.tutorial-ok-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: #fff;
  border: 2px solid #2E7D32;
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.tutorial-ok-btn:hover { background: linear-gradient(135deg, #5cbf60, #43A047); }
.tutorial-skip {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #9A8878;
  text-decoration: underline;
  cursor: pointer;
}

/* Start dialog modal */
.tutorial-start-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  z-index: 10000;
}
.tutorial-start-box {
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(196,145,92,0.4);
  border-radius: 10px;
  padding: 28px 32px;
  max-width: 320px; width: 90vw;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.tutorial-start-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 22px; font-weight: 800;
  color: var(--gold-bright, #D4950A);
  margin-bottom: 6px;
}
.tutorial-start-subtitle {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px; color: #C4A888;
  margin-bottom: 20px;
}
.tutorial-start-btn-green, .tutorial-start-btn-gray {
  display: block; width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  border: 2px solid;
  text-align: center;
}
.tutorial-start-btn-green {
  background: linear-gradient(135deg, #4CAF50, #388E3C);
  color: #fff; border-color: #2E7D32;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.tutorial-start-btn-green:hover { background: linear-gradient(135deg, #5cbf60, #43A047); }
.tutorial-start-btn-gray {
  background: rgba(255,255,255,0.08);
  color: #C4A888; border-color: rgba(196,145,92,0.4);
}
.tutorial-start-btn-gray:hover { background: rgba(255,255,255,0.12); }
.tutorial-start-hint {
  display: block;
  font-size: 11px; font-weight: 400;
  opacity: 0.8; margin-top: 2px;
}

/* Hint Pulse */
@keyframes hint-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255,69,0,0.95), 0 0 14px 4px rgba(255,69,0,0.6);
    outline: 3px solid #FF4500;
    outline-offset: 3px;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255,217,38,1.0), 0 0 24px 10px rgba(255,217,38,0.75);
    outline: 3px solid #FFD926;
    outline-offset: 3px;
  }
}
.hint-pulse {
  animation: hint-pulse 0.9s ease-in-out infinite;
}

/* Game notification banner */
.game-notification {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(196,145,92,0.4);
  border-radius: 10px;
  padding: 16px 24px;
  max-width: 320px; width: 90vw;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px; font-weight: 700;
  color: #E8DCCB;
  z-index: 9000;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: opacity 1s ease;
}
.game-notification-fade { opacity: 0; }

.streusel-popup {
  position: fixed;
  font-size: 15px;
  font-weight: 900;
  color: #4ECDC4;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  animation: streusel-float 1.4s ease-out forwards;
}
@keyframes streusel-float {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.3); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-44px) scale(1); }
}

#panel-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4); z-index: 39;
}

/* === Start Screen === */
#start-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(232,67,147,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(232,160,48,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(42,157,143,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #2A1A0E 0%, #3D2B1F 30%, #1A0E06 70%, #2A1A0E 100%);
  display: flex; justify-content: center; align-items: center;
  z-index: 500;
  overflow: hidden;
}

/* -- Background layer: floating candy & sparkles -- */
.ss-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ss-candy {
  position: absolute;
  font-size: 28px;
  opacity: 0.3;
  filter: blur(0.5px);
  animation: ss-float 12s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
.ss-candy-1  { top: 5%;  left: 4%;  font-size: 34px; opacity: 0.35; animation-duration: 14s; animation-delay: 0s; }
.ss-candy-2  { top: 12%; left: 88%; font-size: 42px; opacity: 0.2;  filter: blur(1px); animation-duration: 18s; animation-delay: -3s; }
.ss-candy-3  { top: 30%; left: 8%;  font-size: 26px; opacity: 0.25; animation-duration: 16s; animation-delay: -6s; }
.ss-candy-4  { top: 55%; left: 92%; font-size: 30px; opacity: 0.3;  animation-duration: 13s; animation-delay: -2s; }
.ss-candy-5  { top: 75%; left: 6%;  font-size: 38px; opacity: 0.2;  filter: blur(1px); animation-duration: 20s; animation-delay: -8s; }
.ss-candy-6  { top: 85%; left: 80%; font-size: 24px; opacity: 0.35; animation-duration: 11s; animation-delay: -1s; }
.ss-candy-7  { top: 18%; left: 45%; font-size: 20px; opacity: 0.15; filter: blur(1.5px); animation-duration: 22s; animation-delay: -5s; }
.ss-candy-8  { top: 40%; left: 85%; font-size: 36px; opacity: 0.25; animation-duration: 15s; animation-delay: -10s; }
.ss-candy-9  { top: 65%; left: 15%; font-size: 32px; opacity: 0.2;  filter: blur(0.5px); animation-duration: 17s; animation-delay: -4s; }
.ss-candy-10 { top: 90%; left: 50%; font-size: 28px; opacity: 0.25; animation-duration: 14s; animation-delay: -7s; }
.ss-candy-11 { top: 45%; left: 3%;  font-size: 22px; opacity: 0.3;  animation-duration: 19s; animation-delay: -9s; }
.ss-candy-12 { top: 8%;  left: 70%; font-size: 26px; opacity: 0.2;  filter: blur(1px); animation-duration: 16s; animation-delay: -12s; }

@keyframes ss-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-20px) rotate(5deg); }
  50%      { transform: translateY(-8px) rotate(-3deg); }
  75%      { transform: translateY(-25px) rotate(3deg); }
}

/* -- Sparkle particles -- */
.ss-sparkle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #FFE033;
  box-shadow: 0 0 6px 2px rgba(255,224,51,0.6), 0 0 12px 4px rgba(255,224,51,0.3);
  animation: ss-twinkle 2.5s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}
.ss-sparkle-1 { top: 18%; left: 12%; animation-delay: 0s; }
.ss-sparkle-2 { top: 32%; left: 78%; animation-delay: -0.4s; }
.ss-sparkle-3 { top: 55%; left: 22%; animation-delay: -0.9s; }
.ss-sparkle-4 { top: 70%; left: 65%; animation-delay: -1.3s; }
.ss-sparkle-5 { top: 25%; left: 55%; animation-delay: -1.7s; }
.ss-sparkle-6 { top: 80%; left: 35%; animation-delay: -0.6s; }
.ss-sparkle-7 { top: 42%; left: 90%; animation-delay: -2.0s; }
.ss-sparkle-8 { top: 10%; left: 40%; animation-delay: -1.1s; }

@keyframes ss-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* -- Rotating light rays -- */
.ss-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 700px; height: 700px;
  margin-left: -350px; margin-top: -350px;
  background: conic-gradient(
    from 0deg,
    rgba(232,67,147,0.1) 0deg, transparent 15deg,
    rgba(232,160,48,0.1) 30deg, transparent 45deg,
    rgba(184,150,46,0.08) 60deg, transparent 75deg,
    rgba(232,67,147,0.1) 90deg, transparent 105deg,
    rgba(232,160,48,0.1) 120deg, transparent 135deg,
    rgba(184,150,46,0.08) 150deg, transparent 165deg,
    rgba(232,67,147,0.1) 180deg, transparent 195deg,
    rgba(232,160,48,0.1) 210deg, transparent 225deg,
    rgba(184,150,46,0.08) 240deg, transparent 255deg,
    rgba(232,67,147,0.1) 270deg, transparent 285deg,
    rgba(232,160,48,0.1) 300deg, transparent 315deg,
    rgba(184,150,46,0.08) 330deg, transparent 345deg
  );
  animation: ss-rays-spin 30s linear infinite;
  opacity: 0.6;
  mask-image: radial-gradient(circle, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0) 55%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}
@keyframes ss-rays-spin { to { transform: rotate(360deg); } }

/* -- Content card -- */
#start-content {
  text-align: center;
  max-width: 500px;
  width: 92vw;
  padding: 32px 24px;
  position: relative;
  z-index: 1;
}

/* -- Logo with glow halo -- */
.ss-logo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto 10px;
}
.ss-logo-glow {
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,160,48,0.25) 0%, rgba(232,67,147,0.12) 35%, transparent 60%);
  animation: ss-glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ss-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.2); opacity: 0.9; }
}

#start-logo {
  display: block;
  width: min(280px, 72vw);
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  animation: ss-logo-float 3s ease-in-out infinite;
  filter:
    drop-shadow(0 10px 24px rgba(10, 4, 14, 0.55))
    drop-shadow(0 0 18px rgba(255, 186, 82, 0.20));
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@keyframes ss-logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1.018); }
}

/* -- Title shimmer -- */
#start-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  padding: 6px 16px 7px;
  border: 1px solid rgba(255, 218, 142, 0.32);
  border-radius: 999px;
  background: rgba(24, 12, 24, 0.58);
  color: #FFFFFF;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(54, 15, 30, 0.90),
    0 6px 16px rgba(0, 0, 0, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 22px rgba(0,0,0,0.24);
}
@keyframes ss-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#start-subtitle {
  font-size: 13px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 226, 166, 0.92);
  letter-spacing: 0;
  margin-bottom: 18px;
  font-weight: 750;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}

/* -- Buttons -- */
.ss-buttons {
  margin-bottom: 16px;
}
#start-screen .start-btn {
  display: block;
  width: 100%; max-width: 300px;
  margin: 10px auto;
  padding: 16px 32px;
  font-size: 15px; font-weight: 800;
  font-family: 'Press Start 2P', monospace !important;
  text-transform: uppercase; letter-spacing: 2px;
  border: 4px solid #1E5A1E !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #6CD070 0%, #4CAF50 50%, #388E3C 100%) !important;
  color: #fff !important;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4) !important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.3),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 4px 0 #0A3A0A,
    0 6px 12px rgba(0,0,0,0.4) !important;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
  animation: ss-btn-pulse 2.5s ease-in-out infinite;
  position: relative;
}
@keyframes ss-btn-pulse {
  0%, 100% {
    box-shadow:
      inset 2px 2px 0 rgba(255,255,255,0.3),
      inset -2px -2px 0 rgba(0,0,0,0.2),
      0 4px 0 #0A3A0A,
      0 6px 12px rgba(0,0,0,0.4),
      0 0 0 0 rgba(76,175,80,0);
  }
  50% {
    box-shadow:
      inset 2px 2px 0 rgba(255,255,255,0.3),
      inset -2px -2px 0 rgba(0,0,0,0.2),
      0 4px 0 #0A3A0A,
      0 6px 12px rgba(0,0,0,0.4),
      0 0 24px 6px rgba(76,175,80,0.35);
  }
}
#start-screen .start-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.4),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 6px 0 #0A3A0A,
    0 8px 16px rgba(0,0,0,0.5) !important;
}
#start-screen .start-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.3),
    0 1px 0 #0A3A0A,
    0 2px 4px rgba(0,0,0,0.4) !important;
}

/* Continue button — gold variant */
#start-screen .start-btn-secondary {
  background: linear-gradient(180deg, #E8C040 0%, #B8962E 50%, #8B6914 100%) !important;
  border-color: #5A3A1A !important;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.3),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 4px 0 #3D2B1F,
    0 6px 12px rgba(0,0,0,0.4) !important;
  animation: none;
  font-size: 13px;
}

/* -- Hint cards -- */
.ss-hints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  justify-content: center;
  margin: 0 auto 14px;
  max-width: 430px;
}
.ss-hint {
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255, 235, 185, 0.10), rgba(255,255,255,0.025)),
    rgba(24, 12, 24, 0.50);
  border: 1px solid rgba(255, 212, 90, 0.22);
  border-radius: 8px;
  padding: 10px 8px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px rgba(0,0,0,0.16);
}
.ss-hint-icon {
  display: block;
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35));
}
.ss-hint-text {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #FFFFFF;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0,0,0,0.75);
}
.ss-hint-sub {
  display: block;
  margin-top: 3px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  color: rgba(255, 226, 166, 0.74);
  font-weight: 650;
  line-height: 1.2;
}

/* -- Footer -- */
#start-footer {
  margin-top: 0;
  font-size: 11px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: rgba(255, 226, 166, 0.58);
  letter-spacing: 0;
  line-height: 1.8;
}
#start-footer kbd {
  display: inline-block;
  background: rgba(255,248,237,0.1);
  border: 1px solid rgba(196,145,92,0.3);
  border-radius: 2px;
  padding: 2px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #C4915C;
}

/* === Overlay === */

#overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex; justify-content: center; align-items: center; z-index: 100;
}
#overlay-content {
  background: var(--bg-panel); border: 3px solid var(--gold);
  border-radius: 12px; padding: 32px 48px; text-align: center;
  max-width: 90vw; max-height: 90vh; overflow-y: auto;
}
#overlay-content h1 { font-size: 28px; color: var(--gold-bright); margin-bottom: 12px; }
#overlay-content p { font-size: 16px; margin-bottom: 16px; }
#overlay-content button {
  padding: 10px 28px; background: var(--green-btn); color: #fff;
  border: 2px solid #3d8b40; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* ============================================================
   MOBILE LAYOUT (max-width: 900px)
   ============================================================ */

@media (max-width: 900px) {
  #debug-panel {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 100vh; border-radius: 0;
  }
  #game-logo { font-size: 16px; }
  #sidebar.force-visible { display: flex !important; }
  /* Two-row HUD on mobile — resources must NOT wrap */
  #hud {
    flex-wrap: wrap; gap: 2px 6px; padding: 3px 8px;
    height: auto; justify-content: center;
    margin: 0; border-radius: 0;
  }
  /* Logo + resources share row 1 — logo constrained so resources never get pushed off */
  #logo-wrap { order: 0; max-width: 110px; flex-shrink: 1; }
  .mode-badge { font-size: 7px; max-width: 110px; }
  /* Resources row: nowrap so values never spill to a 2nd line */
  #hud-row1 { order: 1; flex: 1; justify-content: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  /* Buttons on row 2, full width */
  #hud-row2 { order: 2; width: 100%; justify-content: center; gap: 6px; flex-wrap: wrap; }
  .hud-group { gap: 4px; padding: 2px 3px; flex-wrap: nowrap; }
  .hud-group-resources { border-right: 1px solid rgba(196,145,92,0.2); padding-right: 4px; }
  .hud-item { min-width: 0; flex: 0 1 auto; }
  .hud-label { font-size: 9px; letter-spacing: 0.5px; white-space: nowrap; }
  .hud-value { font-size: 14px; white-space: nowrap; }
  #hud-countdown { display: none; }
  #hud-countdown.countdown-active { display: flex; }
  #game-logo { font-size: 15px; }
  #btn-start-wave {
    order: -1; width: 100%;
    padding: 8px 16px; font-size: 12px;
    flex: none;
  }
  .speed-btn { padding: 6px 10px; font-size: 12px; min-width: 44px; min-height: 44px; }

  /* Left panel: slide-in overlay (unchanged) */
  #left-panel {
    position: fixed; top: 0; bottom: 0; z-index: 40;
    width: 240px; max-width: 75vw;
    transition: transform 0.25s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
    padding-top: 8px;
    margin: 0; border-radius: 0;
    background: rgba(30,20,10,0.92);
    left: 0; transform: translateX(-100%);
    border-right: 2px solid rgba(196,145,92,0.3);
  }
  #left-panel.open { transform: translateX(0); z-index: 51; }
  #left-panel.mobile-view-quests #locked-features-header,
  #left-panel.mobile-view-quests #locked-features-wrapper {
    display: none !important;
  }
  #left-panel.mobile-view-gambling #quest-section {
    display: none !important;
  }

  /* RIGHT SIDEBAR: floating transparent overlay on top of the canvas.
     Container is transparent & click-through; only the section pills catch touches. */
  #sidebar {
    position: fixed !important;
    top: var(--mobile-hud-h, 95px) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    z-index: 30 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 3px 4px !important;
    overflow: visible !important;
    margin: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    transition: none !important;
  }
  /* Sidebar sections: compact semi-transparent floating pills — smaller & more transparent */
  #sidebar > .sidebar-section {
    pointer-events: auto;
    flex: 1 1 0; min-width: 0; max-width: 150px; gap: 1px;
    justify-content: center;
    background: rgba(10,6,2,0.52) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(196,145,92,0.30) !important;
    border-radius: 5px !important;
    padding: 2px 3px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35) !important;
  }
  /* Smaller sidebar buttons on mobile */
  #sidebar .sidebar-btn {
    padding: 4px 6px !important;
    font-size: 9px !important;
    min-height: 28px !important;
    line-height: 1.2 !important;
  }
  #sidebar .sidebar-btn .btn-main { font-size: 9px !important; text-align: center !important; }
  #sidebar .sidebar-btn .btn-cost { font-size: 8px !important; opacity: 0.85; text-align: center !important; }
  /* Compact section titles */
  #sidebar > .sidebar-section .section-title {
    font-size: 7px !important;
    margin: 0 0 2px 0 !important;
    padding-bottom: 2px !important;
  }
  /* Hide constructor chances — too verbose for the compact bar */
  #sidebar .constructor-chances { display: none; }
  #sidebar #constructor-info { font-size: 8px; }
  #sidebar #snackman-info { font-size: 8px !important; }
  #sidebar #build-detail { font-size: 8px !important; }

  /* Main area: canvas fills full height; sidebar floats on top. */
  #main-area {
    position: relative; flex: 1;
    padding-top: 0;
  }

  /* Build-status pill: pull out of the sidebar flow and pin to bottom center */
  #sidebar #build-status {
    position: fixed !important;
    bottom: 70px !important;
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 180px !important;
    flex: none !important;
    background: rgba(18, 10, 3, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 2px solid rgba(212, 149, 10, 0.75) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 45 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.55) !important;
  }
  #sidebar #build-status .section-title { display: none !important; }
  #sidebar #build-status #build-detail {
    font-size: 11px !important;
    color: #E8D890 !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }

  /* Bottom bar: slide-up, compact inventory */
  #bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
    height: auto; max-height: 50vh; padding: 6px 6px;
    flex-wrap: wrap; gap: 3px;
    margin: 0; border-radius: 0;
    background: rgba(30,20,10,0.92);
  }
  #bottom-bar.open { transform: translateY(0); z-index: 51; }
  .fab-multi-cancel.visible { display: flex; align-items: center; justify-content: center; }
  .fab-multi-cancel { top: calc(var(--mobile-hud-h, 95px) + var(--mobile-sb-h, 75px) + 8px); }
  .fab-place-snackman {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    min-width: min(340px, calc(100vw - 24px));
    min-height: 50px;
    padding: 9px 16px;
    font-size: 14px;
  }
  #inventory-header { font-size: 11px; width: 100%; text-align: center; }
  #inventory { flex-wrap: wrap; gap: 2px; justify-content: center; }
  .inv-slot {
    width: calc((100vw - 44px) / 8); height: calc((100vw - 44px) / 8);
    min-width: 28px; max-width: 44px; min-height: 28px; max-height: 44px;
  }
  .inv-slot .slot-family { font-size: 10px; }
  .inv-slot .slot-level { font-size: 8px; }

  /* Show panel toggle tabs on mobile */
  .panel-tab { display: flex; }
  /* tab-right hidden: sidebar is always visible, no toggle needed */
  .tab-right { display: none !important; }
  /* Quest + Gambling + Aura tabs: transparent so the game field shows through */
  .tab-left, .tab-gambling, .tab-aura {
    background: rgba(15,9,3,0.35) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-color: rgba(139,105,20,0.35) !important;
    box-shadow: none !important;
    color: rgba(255,235,190,0.85) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
  }
  .tab-left:active, .tab-gambling:active, .tab-aura:active,
  .tab-left.active, .tab-gambling.active, .tab-aura.active {
    background: rgba(15,9,3,0.72) !important;
    border-color: rgba(139,105,20,0.8) !important;
  }
  /* Quest tab: left side, just below sidebar bar */
  .tab-left {
    left: 6px;
    top: calc(var(--mobile-hud-h, 95px) + var(--mobile-sb-h, 75px) + 8px);
    width: 62px; height: 52px;
  }
  /* Gambling tab: left side, below quest tab */
  .tab-gambling {
    left: 6px;
    top: calc(var(--mobile-hud-h, 95px) + var(--mobile-sb-h, 75px) + 68px);
    width: 62px; height: 52px;
  }
  /* Aura tab: left side — top is set by JS (getBoundingClientRect of gambling tab + 8px) */
  .tab-aura {
    left: 6px;
    width: 62px; height: 52px;
  }
  .tab-inv { width: 110px; height: 44px; }

  /* Aura section: hidden in the sidebar bar on mobile (JS moves it to #aura-panel) */
  #sidebar #aura-section { display: none !important; }

  /* Canvas fills remaining space */
  #canvas-wrapper { flex: 1; width: 100%; min-width: 0; min-height: 0; }

  /* Context menu */
  #inv-context { min-width: 200px; max-width: 85vw; padding: 12px 16px; }
  .ctx-btn { padding: 8px 12px; min-height: 40px; }
  .ctx-btn .ctx-btn-main { font-size: 14px; }
  .ctx-btn .ctx-btn-cost { font-size: 11px; }

  /* Overlay */
  #overlay-content { padding: 20px 24px; }
  #overlay-content h1 { font-size: 22px; }

  /* Spell panel: thin transparent strip at bottom — icon-only, no title */
  #spell-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 4px 110px 4px 8px; /* right padding avoids tab-inv overlap */
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    background: linear-gradient(180deg, rgba(19, 24, 46, 0.62), rgba(14, 12, 30, 0.68)) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(102, 179, 255, 0.22) !important;
    box-shadow: none !important;
    min-height: 0;
  }
  #spell-panel-hint { display: none; }
  .spell-panel-head { display: none; }
  .spell-name { display: none; }
  .spell-chip {
    min-height: 30px;
    padding: 3px 7px;
    gap: 4px;
    flex-shrink: 0;
  }
  .spell-icon {
    min-width: 20px;
    height: 20px;
    font-size: 9px;
  }
  .spell-count { font-size: 10px; }
}

/* Extra small (phones in portrait, 375px-430px) */
@media (max-width: 500px) {
  #start-logo { width: min(230px, 78vw); }
  #start-screen .start-btn { font-size: 12px; padding: 12px 20px; max-width: 260px; }
  .ss-hints { gap: 6px; }
  .ss-hint { padding: 8px 5px; }
  .ss-hint-icon { font-size: 19px; }
  .ss-hint-text { font-size: 11px; }
  .ss-hint-sub { font-size: 9px; }
  .ss-rays { width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; }
  .ss-candy { font-size: 20px !important; }
  #start-footer { font-size: 10px; }
  #start-subtitle { font-size: 12px; margin-bottom: 18px; }
  #start-content { padding: 20px 16px; }
  .hud-label { font-size: 8px; }
  .hud-value { font-size: 12px; }
  #game-logo { font-size: 12px; }
  /* Mode badge too wide on tiny screens — hide it; mode is visible in wave counter */
  .mode-badge { display: none; }
  #btn-start-wave { padding: 6px 12px; font-size: 11px; }
  .speed-btn { min-width: 40px; min-height: 40px; font-size: 11px; }

  .tab-left, .tab-gambling, .tab-aura { width: 54px; height: 46px; font-size: 7px; }
  .tab-inv { width: 100px; height: 40px; font-size: 8px; }
  .tab-icon { font-size: 16px; }
  .tab-label { font-size: 6px; }

  .inv-slot {
    width: calc((100vw - 36px) / 8); height: calc((100vw - 36px) / 8);
    min-width: 24px; max-width: 38px; min-height: 24px; max-height: 38px;
  }
  .inv-slot .slot-family { font-size: 9px; }
  .inv-slot .slot-level { font-size: 7px; }
}

/* === Pixel-Art Holzrahmen Overrides === */

/* Panel borders — dark floating glass panels */
#hud, #left-panel, #sidebar, #bottom-bar {
  border-color: rgba(196,145,92,0.3) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}

/* All HUD / start / pause buttons — waffle/wood style.
   NOTE: sidebar-btn is intentionally NOT in this rule — the lebkuchen
   sidebar theme at the bottom of the file owns sidebar button styling. */
#hud button,
.start-btn,
.pause-menu-btn {
  border: 3px solid #8B6914 !important;
  background: linear-gradient(180deg, #F0DDB8 0%, #D4B882 100%) !important;
  color: #3D2B1F !important;
  font-family: 'Press Start 2P', monospace !important;
  box-shadow:
    inset 1px 1px 0 0 rgba(255,255,255,0.35),
    inset -1px -1px 0 0 rgba(90,58,26,0.3),
    1px 2px 3px rgba(0,0,0,0.15) !important;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3) !important;
  border-radius: 2px !important;
}

#hud button:hover:not(:disabled),
.start-btn:hover:not(:disabled),
.pause-menu-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #F5E5C8 0%, #DCC090 100%) !important;
  box-shadow:
    inset 1px 1px 0 0 rgba(255,255,255,0.4),
    inset -1px -1px 0 0 rgba(90,58,26,0.25),
    2px 3px 5px rgba(0,0,0,0.2) !important;
}

#hud button:active:not(:disabled) {
  box-shadow:
    inset -1px -1px 0 0 rgba(255,255,255,0.2),
    inset 1px 1px 0 0 rgba(90,58,26,0.3),
    0 1px 2px rgba(0,0,0,0.1) !important;
}

#hud button:disabled {
  background: linear-gradient(180deg, #D0D0C8 0%, #B0B0A8 100%) !important;
  color: #888 !important;
  border-color: #999 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Green start-wave button */
#btn-start-wave {
  background: linear-gradient(180deg, #5cbf60 0%, #4CAF50 100%) !important;
  border-color: #3d8b40 !important;
  color: #fff !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4) !important;
}
#btn-start-wave:hover:not(:disabled) {
  background: linear-gradient(180deg, #6cd070 0%, #5cbf60 100%) !important;
}

/* Inventory slots */
.inv-slot {
  border: 2px solid rgba(139,105,20,0.5) !important;
  background: rgba(255,248,237,0.08) !important;
  box-shadow:
    inset 1px 1px 0 0 rgba(0,0,0,0.2),
    inset -1px -1px 0 0 rgba(255,255,255,0.05) !important;
  border-radius: 3px !important;
}
.inv-slot:hover { border-color: #B8962E !important; background: rgba(255,248,237,0.15) !important; }
.inv-slot.selected {
  border-color: #D4950A !important;
  background: rgba(255,248,237,0.18) !important;
  box-shadow: 0 0 8px rgba(212,149,10,0.5) !important;
}

/* Section titles — golden on dark */
.section-title {
  color: #D4A530 !important;
  border-bottom: 2px solid rgba(196,145,92,0.3) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

/* Progress bars */
#gamble-progress-bar,
.aura-bar {
  border: 1px solid rgba(139,105,20,0.4) !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 2px !important;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.2) !important;
}

/* Dialog overlays — dark glass panels */
#confirm-content,
#encyclopedia-content,
#shortcut-help-content,
#pause-menu-content {
  border: 2px solid rgba(196,145,92,0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  background: rgba(30,20,10,0.92) !important;
  color: var(--text) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
}

/* === Visual Feedback Animations === */
@keyframes danger-pulse {
  0%, 100% { color: #FF6B6B; text-shadow: none; }
  50% { color: #FF2020; text-shadow: 0 0 8px rgba(255,40,40,0.9); transform: scale(1.15); }
}
.danger-pulse {
  animation: danger-pulse 0.65s ease-in-out infinite;
  display: inline-block;
}

/* Legacy pop for old code paths */
@keyframes inv-pop {
  0%   { transform: scale(0.65) rotate(-6deg); opacity: 0.4; }
  55%  { transform: scale(1.18) rotate(2deg); opacity: 1; }
  80%  { transform: scale(0.95) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* New-item flashy reveal: huge scale pop + 4 repeated glow pulses
   + rotating radiant halo + sparkle overlay so the player sees it
   even in their peripheral vision. */
.just-added {
  position: relative;
  animation: inv-new-pop 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 10;
}
@keyframes inv-new-pop {
  0%   { transform: scale(0.4) rotate(-20deg); opacity: 0; box-shadow: 0 0 0 0 rgba(255,224,51,0); }
  10%  { transform: scale(1.5) rotate(8deg); opacity: 1; box-shadow: 0 0 0 10px rgba(255,224,51,0.9), 0 0 30px 8px rgba(255,224,51,0.85); }
  18%  { transform: scale(0.85) rotate(-4deg); box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 0 24px 12px rgba(255,224,51,0.6); }
  26%  { transform: scale(1.28) rotate(3deg); box-shadow: 0 0 0 8px rgba(255,224,51,0.85), 0 0 28px 14px rgba(255,224,51,0.7); }
  35%  { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 5px rgba(255,255,255,0.7), 0 0 20px 10px rgba(255,224,51,0.55); }
  50%  { box-shadow: 0 0 0 8px rgba(255,224,51,0.85), 0 0 28px 16px rgba(255,224,51,0.65); }
  65%  { box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 0 14px 8px rgba(255,224,51,0.35); }
  80%  { box-shadow: 0 0 0 6px rgba(255,224,51,0.6), 0 0 20px 12px rgba(255,224,51,0.45); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255,224,51,0); }
}
/* Rotating radiant halo behind the slot */
.just-added::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,224,51,0.8) 0deg, rgba(255,224,51,0) 20deg,
    rgba(255,255,255,0.9) 45deg, rgba(255,224,51,0) 65deg,
    rgba(255,224,51,0.8) 90deg, rgba(255,224,51,0) 110deg,
    rgba(255,255,255,0.9) 135deg, rgba(255,224,51,0) 155deg,
    rgba(255,224,51,0.8) 180deg, rgba(255,224,51,0) 200deg,
    rgba(255,255,255,0.9) 225deg, rgba(255,224,51,0) 245deg,
    rgba(255,224,51,0.8) 270deg, rgba(255,224,51,0) 290deg,
    rgba(255,255,255,0.9) 315deg, rgba(255,224,51,0) 335deg
  );
  animation: inv-halo-spin 1.6s linear, inv-halo-fade 2.4s ease-out forwards;
  pointer-events: none;
  z-index: -1;
  filter: blur(2px);
}
@keyframes inv-halo-spin {
  0%   { transform: rotate(0deg) scale(0.6); }
  100% { transform: rotate(540deg) scale(1.4); }
}
@keyframes inv-halo-fade {
  0%,20% { opacity: 1; }
  80%    { opacity: 0.5; }
  100%   { opacity: 0; }
}
/* "NEW!" badge sparkle above the slot */
.just-added::after {
  content: 'NEU!';
  position: absolute;
  top: -18px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #FFE033;
  background: #3D1F0A;
  padding: 3px 6px;
  border: 2px solid #FFE033;
  border-radius: 4px;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 0 10px rgba(255,224,51,0.9), 0 2px 4px rgba(0,0,0,0.6);
  animation: inv-badge-bob 0.55s ease-in-out infinite, inv-badge-fade 2.4s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
  z-index: 11;
}
@keyframes inv-badge-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-4px); }
}
@keyframes inv-badge-fade {
  0%,85% { opacity: 1; }
  100%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Inventory-tab badge pulses when a new item was added but inventory
   panel is not currently visible (mobile mostly). */
#tab-inv-badge.new-flash {
  animation: tab-badge-flash 1.2s ease-in-out 3;
  background: #FFE033 !important;
  color: #3D1F0A !important;
}
@keyframes tab-badge-flash {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,224,51,0.8); }
  50%     { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(255,224,51,0); }
}

/* === Reward Reveal Overlay (Gacha Unboxing) === */
#reward-reveal {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; justify-content: center; align-items: center;
  pointer-events: auto;
  font-family: 'Press Start 2P', monospace;
}
#reward-reveal-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,60,0.75) 0%, rgba(0,0,0,0.92) 80%);
  opacity: 0;
  animation: reveal-bg-in 0.35s ease-out forwards;
}
@keyframes reveal-bg-in { to { opacity: 1; } }

#reward-reveal-rays {
  position: absolute; top: 50%; left: 50%;
  width: 680px; height: 680px;
  margin-left: -340px; margin-top: -340px;
  background: conic-gradient(
    from 0deg,
    rgba(255,230,90,0.35) 0deg,  rgba(255,230,90,0) 12deg,
    rgba(255,230,90,0.35) 30deg, rgba(255,230,90,0) 42deg,
    rgba(255,230,90,0.35) 60deg, rgba(255,230,90,0) 72deg,
    rgba(255,230,90,0.35) 90deg, rgba(255,230,90,0) 102deg,
    rgba(255,230,90,0.35) 120deg,rgba(255,230,90,0) 132deg,
    rgba(255,230,90,0.35) 150deg,rgba(255,230,90,0) 162deg,
    rgba(255,230,90,0.35) 180deg,rgba(255,230,90,0) 192deg,
    rgba(255,230,90,0.35) 210deg,rgba(255,230,90,0) 222deg,
    rgba(255,230,90,0.35) 240deg,rgba(255,230,90,0) 252deg,
    rgba(255,230,90,0.35) 270deg,rgba(255,230,90,0) 282deg,
    rgba(255,230,90,0.35) 300deg,rgba(255,230,90,0) 312deg,
    rgba(255,230,90,0.35) 330deg,rgba(255,230,90,0) 342deg);
  opacity: 0;
  animation: reveal-rays-spin 14s linear infinite, reveal-rays-fade 0.5s 0.35s ease-out forwards;
  filter: blur(1px);
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 65%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0) 65%);
}
@keyframes reveal-rays-spin { to { transform: rotate(360deg); } }
@keyframes reveal-rays-fade { to { opacity: 0.9; } }

#reward-reveal-content {
  position: relative;
  text-align: center;
  z-index: 1;
}

/* --- Box Stage --- */
#reward-reveal-box {
  width: 140px; height: 140px;
  position: relative; margin: 0 auto;
  animation: reveal-box-in 0.4s cubic-bezier(.2,1.4,.3,1) forwards,
             reveal-box-shake 0.12s 0.5s ease-in-out 6;
}
@keyframes reveal-box-in {
  0%   { transform: scale(0.2) translateY(80px) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.2) translateY(-8px) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes reveal-box-shake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(-5px) rotate(-3deg); }
  75% { transform: translateX(5px) rotate(3deg); }
}
#reward-reveal-box-body {
  position: absolute; left: 0; top: 38px; width: 140px; height: 102px;
  background:
    linear-gradient(180deg, #D9883B 0%, #A65E1E 100%);
  border: 4px solid #3D1F0A;
  box-shadow:
    inset 4px 4px 0 rgba(255,230,170,0.3),
    inset -4px -4px 0 rgba(0,0,0,0.25),
    0 6px 0 #2A1408,
    0 10px 30px rgba(0,0,0,0.6);
  border-radius: 3px;
}
#reward-reveal-box-body::before {
  content: '';
  position: absolute; left: 62px; top: 12px;
  width: 16px; height: 40px;
  background: #FFE033;
  border: 3px solid #3D1F0A;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4);
}
#reward-reveal-box-body::after {
  content: '?';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; color: #FFE033;
  text-shadow: 2px 2px 0 #3D1F0A, -2px -2px 0 #3D1F0A, 2px -2px 0 #3D1F0A, -2px 2px 0 #3D1F0A;
  padding-top: 14px;
}
#reward-reveal-box-lid {
  position: absolute; left: -6px; top: 0; width: 152px; height: 46px;
  background: linear-gradient(180deg, #E8A155 0%, #C27432 100%);
  border: 4px solid #3D1F0A;
  box-shadow:
    inset 4px 4px 0 rgba(255,230,170,0.35),
    inset -4px -4px 0 rgba(0,0,0,0.2),
    0 4px 0 #2A1408;
  border-radius: 3px;
  transform-origin: 10% 100%;
}
.reveal-explode #reward-reveal-box-lid {
  animation: reveal-lid-pop 0.35s cubic-bezier(.4,1.6,.6,1) forwards;
}
@keyframes reveal-lid-pop {
  0%   { transform: rotate(0deg) translateY(0); opacity: 1; }
  50%  { transform: rotate(-45deg) translateY(-40px) translateX(-20px); opacity: 1; }
  100% { transform: rotate(-80deg) translateY(-160px) translateX(-60px); opacity: 0; }
}
.reveal-explode #reward-reveal-box-body {
  animation: reveal-body-fade 0.35s 0.05s ease-out forwards;
}
@keyframes reveal-body-fade {
  to { transform: scale(0.88) translateY(20px); opacity: 0; }
}

#reward-reveal-sparks {
  position: absolute; inset: -20px;
  pointer-events: none;
  opacity: 0;
}
.reveal-explode #reward-reveal-sparks {
  animation: reveal-sparks-burst 0.8s ease-out forwards;
  background:
    radial-gradient(circle at 10% 20%, #FFE033 2px, transparent 3px),
    radial-gradient(circle at 90% 30%, #FF73BF 2px, transparent 3px),
    radial-gradient(circle at 30% 85%, #66B3FF 2px, transparent 3px),
    radial-gradient(circle at 80% 75%, #33BF4D 2px, transparent 3px),
    radial-gradient(circle at 20% 60%, #FFFFFF 2px, transparent 3px),
    radial-gradient(circle at 60% 10%, #FFD926 2px, transparent 3px),
    radial-gradient(circle at 50% 90%, #FF4040 2px, transparent 3px);
}
@keyframes reveal-sparks-burst {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.4); }
}

/* --- Prize Stage --- */
#reward-reveal-prize {
  position: absolute; left: 0; right: 0; top: 0;
  display: none;
  flex-direction: column; align-items: center; gap: 10px;
  padding-top: 10px;
}
.reveal-show-prize #reward-reveal-prize {
  display: flex;
  animation: reveal-prize-in 0.55s cubic-bezier(.2,1.5,.3,1) forwards;
}
@keyframes reveal-prize-in {
  0%   { opacity: 0; transform: scale(0.3) translateY(-40px); }
  60%  { opacity: 1; transform: scale(1.15) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
#reward-reveal-icon {
  width: 120px; height: 120px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.65));
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
}
#reward-reveal-title {
  color: #FFFFFF;
  font-size: 16px;
  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000,
               0 0 12px rgba(255,220,90,0.7);
  max-width: 360px;
  line-height: 1.5;
}
#reward-reveal-subtitle {
  color: #FFE033;
  font-size: 10px;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  max-width: 360px;
  line-height: 1.6;
}
#reward-reveal-rarity {
  font-size: 9px;
  padding: 6px 14px;
  border: 2px solid #3D1F0A;
  text-shadow: 1px 1px 0 #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.25), 0 3px 0 #2A1408;
  color: #FFF;
}
.rarity-common    { background: linear-gradient(180deg, #999 0%, #555 100%); }
.rarity-uncommon  { background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%); }
.rarity-rare      { background: linear-gradient(180deg, #4A90E2 0%, #1E3F8A 100%); }
.rarity-epic      { background: linear-gradient(180deg, #B04AE8 0%, #5E1C8A 100%); }
.rarity-legendary { background: linear-gradient(180deg, #FFD926 0%, #C47F10 100%); color: #3D1F0A; }

/* Reward action buttons (Inventory / Place) */
#reward-reveal-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.reward-btn {
  padding: 10px 18px;
  border: 3px solid #3D1F0A;
  border-radius: 6px;
  background: linear-gradient(180deg, #F0DDB8 0%, #C4915C 100%);
  color: #3D1F0A;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  cursor: pointer;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5),
              inset -2px -2px 0 rgba(0,0,0,0.25),
              0 3px 0 #2A1408,
              0 5px 10px rgba(0,0,0,0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.reward-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.6),
              inset -2px -2px 0 rgba(0,0,0,0.25),
              0 5px 0 #2A1408,
              0 8px 16px rgba(0,0,0,0.6);
}
.reward-btn:active {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3),
              inset -2px -2px 0 rgba(0,0,0,0.3),
              0 1px 0 #2A1408,
              0 2px 4px rgba(0,0,0,0.4);
}
.reward-btn-primary {
  background: linear-gradient(180deg, #7BE870 0%, #3D8F3D 100%);
  color: #FFFFFF;
  border-color: #0A2A0A;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.55);
}
.reward-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
#reward-reveal-actions.hidden { display: none; }

.rarity-rare      #reward-reveal-rays { animation-duration: 10s; }
.rarity-epic      #reward-reveal-rays { animation-duration: 7s; }
.rarity-legendary #reward-reveal-rays { animation-duration: 4s; }

/* Close hint */
#reward-reveal::after {
  content: '[ Klick zum Schliessen ]';
  position: absolute; bottom: 40px; left: 0; right: 0;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  opacity: 0;
  animation: reveal-hint-in 0.5s 1.4s ease-out forwards;
}
@keyframes reveal-hint-in { to { opacity: 1; } }

@media (max-width: 700px) {
  #reward-reveal-rays { width: 460px; height: 460px; margin-left: -230px; margin-top: -230px; }
  #reward-reveal-box { width: 110px; height: 110px; }
  #reward-reveal-box-body { width: 110px; height: 80px; top: 30px; }
  #reward-reveal-box-body::before { left: 47px; width: 14px; height: 32px; }
  #reward-reveal-box-body::after { font-size: 34px; padding-top: 10px; }
  #reward-reveal-box-lid { width: 122px; height: 36px; }
  #reward-reveal-icon { width: 90px; height: 90px; font-size: 56px; }
  #reward-reveal-title { font-size: 13px; max-width: 80vw; }
  #reward-reveal-subtitle { font-size: 8px; max-width: 80vw; }
}

/* === Low-Lives Panic Mode (Chromatic Aberration + Red Pulse) === */
#canvas-wrapper.low-lives-panic::before,
#canvas-wrapper.low-lives-panic::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
#canvas-wrapper.low-lives-panic::before {
  /* Red vignette that pulses with the heartbeat */
  background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(220,10,10,0.28) 85%, rgba(120,0,0,0.45) 100%);
  animation: panic-pulse 0.85s ease-in-out infinite;
}
#canvas-wrapper.low-lives-panic::after {
  /* Scanline / warning border */
  border: 2px solid rgba(255,50,50,0.55);
  box-shadow: inset 0 0 40px rgba(255,0,0,0.25), 0 0 20px rgba(255,0,0,0.35);
  animation: panic-border 0.4s ease-in-out infinite;
}
@keyframes panic-pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
@keyframes panic-border {
  0%,100% { opacity: 0.6; }
  50%     { opacity: 1; }
}
/* Chromatic split on the game canvas layer only */
#canvas-wrapper.low-lives-panic #game-canvas {
  animation: panic-shake 0.24s ease-in-out infinite;
  filter: drop-shadow(1px 0 0 rgba(255,0,0,0.6)) drop-shadow(-1px 0 0 rgba(0,255,255,0.5));
}
@keyframes panic-shake {
  0%,100% { transform: translate(-50%, -50%) translateX(0); }
  25%     { transform: translate(-50%, -50%) translateX(-1px); }
  75%     { transform: translate(-50%, -50%) translateX(1px); }
}

/* === HUD Resource Icon Animations === */
/* Prepend icons to sugar/streusel/lives/wave/countdown */
#hud-sugar .hud-label::before {
  content: '\1F36C '; /* lollipop */
  display: inline-block;
  animation: icon-rotate 6s linear infinite;
  transform-origin: center;
  margin-right: 2px;
}
#hud-streusel .hud-label::before {
  content: '\2728 '; /* sparkles */
  display: inline-block;
  animation: icon-bounce 1.4s ease-in-out infinite;
  margin-right: 2px;
}
#hud-lives .hud-label::before {
  content: '\2764 '; /* heart */
  color: #E84040;
  display: inline-block;
  animation: icon-heartbeat 1.1s ease-in-out infinite;
  margin-right: 2px;
}
#hud-wave .hud-label::before {
  content: '\1F30A '; /* wave */
  display: inline-block;
  animation: icon-wobble 3s ease-in-out infinite;
  margin-right: 2px;
}
@keyframes icon-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes icon-bounce {
  0%,100% { transform: translateY(0) scale(1); }
  40%     { transform: translateY(-3px) scale(1.12); }
  60%     { transform: translateY(0) scale(0.95); }
}
@keyframes icon-heartbeat {
  0%,60%,100% { transform: scale(1); }
  15%         { transform: scale(1.3); }
  30%         { transform: scale(1.05); }
  45%         { transform: scale(1.2); }
}
@keyframes icon-wobble {
  0%,100% { transform: rotate(0deg) translateY(0); }
  25%     { transform: rotate(-8deg) translateY(-1px); }
  75%     { transform: rotate(8deg) translateY(1px); }
}

/* Resource value highlight on change (temporary glow class added via JS) */
.hud-value.flash-up {
  animation: hud-flash-up 0.45s ease-out;
}
.hud-value.flash-down {
  animation: hud-flash-down 0.45s ease-out;
}
@keyframes hud-flash-up {
  0%   { color: #4CFF6B; text-shadow: 0 0 14px rgba(76,255,107,1); transform: scale(1.25); }
  100% { }
}
@keyframes hud-flash-down {
  0%   { color: #FF5050; text-shadow: 0 0 14px rgba(255,80,80,1); transform: scale(1.25); }
  100% { }
}

/* === Inventory Hover Lift === */
.inv-slot:not(.empty) {
  transition: transform 0.15s cubic-bezier(0.22, 1.4, 0.36, 1),
              box-shadow 0.15s ease,
              filter 0.15s ease;
}
.inv-slot:not(.empty):hover {
  transform: translateY(-4px) scale(1.05);
  filter: brightness(1.12);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45),
              0 0 0 2px #FFE033,
              inset 0 0 8px rgba(255,224,51,0.3);
  z-index: 5;
}
.inv-slot:not(.empty):hover .slot-level {
  transform: scale(1.2) rotate(-4deg);
  transition: transform 0.15s ease;
}

/* === Inventory Fusion / Combine Preview Highlights === */
.inv-slot.fusion-preview {
  animation: fusion-preview-glow 1.2s ease-in-out infinite;
  position: relative;
}
.inv-slot.fusion-preview::after {
  content: '\269C'; /* fleur-de-lis like fusion icon */
  position: absolute;
  top: 1px; left: 2px;
  font-size: 10px;
  color: #FFE033;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
  animation: fusion-icon-pulse 0.9s ease-in-out infinite;
}
@keyframes fusion-preview-glow {
  0%,100% {
    box-shadow: 0 0 0 2px #FFE033, 0 0 8px rgba(255,224,51,0.5), inset 0 0 6px rgba(255,224,51,0.35);
  }
  50% {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 14px rgba(255,224,51,0.85), inset 0 0 10px rgba(255,224,51,0.55);
  }
}

#btn-buffet-rush.start-btn-accent {
  background: linear-gradient(180deg, #FF6B35, #D43D22) !important;
  border-color: #FFD45C !important;
  color: #FFF6E8 !important;
}

#wave-bonus-side {
  position: fixed;
  right: 12px;
  top: 96px;
  z-index: 8500;
  width: min(300px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

#wave-bonus-side > * { pointer-events: auto; }

.wave-bonus-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid #FFD45C;
  background: linear-gradient(180deg, rgba(46, 23, 40, 0.96), rgba(20, 12, 30, 0.96));
  color: #FFF6E8;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 16px rgba(255, 212, 90, 0.28);
  animation: waveBonusPulse 1.8s ease-in-out infinite;
}

@keyframes waveBonusPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 16px rgba(255, 212, 90, 0.28); }
  50%      { box-shadow: 0 8px 22px rgba(0,0,0,0.42), 0 0 26px rgba(255, 212, 90, 0.55); }
}

.wave-bonus-pill .wbp-icon { font-size: 17px; }
.wave-bonus-pill .wbp-label { flex: 1; text-align: left; }
.wave-bonus-pill .wbp-chevron { color: #FFD45C; font-size: 14px; }

.wave-bonus-pill.rarity-uncommon { border-color: #5CD274; }
.wave-bonus-pill.rarity-rare     { border-color: #59A6FF; }
.wave-bonus-pill.rarity-epic     { border-color: #CC59FF; }

.wave-bonus-panel {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 212, 90, 0.45);
  background: linear-gradient(180deg, rgba(46, 23, 40, 0.97), rgba(20, 12, 30, 0.97));
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wave-bonus-panel .wbp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 4px 6px;
}

.wave-bonus-panel .wbp-kicker {
  color: #FFD45C;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wave-bonus-card-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  color: #FFF6E8;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.wave-bonus-card-mini:hover {
  transform: translateX(-2px);
  border-color: #FFD45C;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px rgba(255, 212, 90, 0.22);
}

.wave-bonus-card-mini .wbcm-icon {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #FFE08A, #C96C28);
  color: #2B1308;
  font-weight: 900;
  font-size: 18px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.42);
}

.wave-bonus-card-mini .wbcm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wave-bonus-card-mini .wbcm-name { font-weight: 900; font-size: 13px; color: #FFD45C; }
.wave-bonus-card-mini .wbcm-desc { font-size: 11px; line-height: 1.35; color: rgba(255,246,232,0.78); }

.wave-bonus-card-mini.rarity-uncommon { border-color: rgba(92,210,116,0.6); }
.wave-bonus-card-mini.rarity-rare     { border-color: rgba(89,166,255,0.65); }
.wave-bonus-card-mini.rarity-epic     { border-color: rgba(204,89,255,0.72); }

.buffet-choice-tier {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24);
}

.spell-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(102, 179, 255, 0.38);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(19, 24, 46, 0.78), rgba(14, 12, 30, 0.78));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spell-panel-head {
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.spell-panel-title {
  color: #66B3FF;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

#spell-panel-hint {
  color: rgba(255,246,232,0.62);
  font-size: 10px;
  line-height: 1.25;
}

.spell-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex: 1;
}

.spell-bar-title {
  color: rgba(255,246,232,0.62);
  font-size: 10px;
  font-weight: 900;
  margin-right: 4px;
}

.spell-chip {
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(24, 14, 28, 0.92);
  color: #FFF6E8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.spell-chip.selected {
  outline: 2px solid #FFD45C;
  box-shadow: 0 0 18px rgba(255,212,90,0.28);
}

.spell-icon {
  min-width: 26px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #1A1010;
  font-weight: 900;
  font-size: 10px;
}

.spell-name {
  font-size: 11px;
  font-weight: 800;
}

.spell-count {
  color: #FFD45C;
  font-weight: 900;
  font-size: 11px;
}

@media (max-width: 700px) {
  #wave-bonus-side {
    top: 70px;
    right: 6px;
    width: min(240px, calc(100vw - 12px));
  }
  .wave-bonus-pill { font-size: 11px; padding: 6px 10px; }
  .wave-bonus-card-mini { padding: 6px 8px; }
  .wave-bonus-card-mini .wbcm-icon { width: 28px; height: 28px; flex-basis: 28px; font-size: 15px; }
  .wave-bonus-card-mini .wbcm-name { font-size: 12px; }
  .wave-bonus-card-mini .wbcm-desc { font-size: 10px; }
  .buffet-choice-tier {
    padding: 1px 6px;
    font-size: 9px;
  }
}
@keyframes fusion-icon-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.3); }
}

.inv-slot.combine-preview {
  animation: combine-preview-glow 1.2s ease-in-out infinite;
  position: relative;
}
.inv-slot.combine-preview::before {
  content: '\21C8'; /* upward paired arrows */
  position: absolute;
  top: 1px; left: 2px;
  font-size: 11px;
  color: #7BE870;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
  z-index: 3;
}
@keyframes combine-preview-glow {
  0%,100% {
    box-shadow: 0 0 0 2px #7BE870, 0 0 6px rgba(123,232,112,0.4), inset 0 0 6px rgba(123,232,112,0.3);
  }
  50% {
    box-shadow: 0 0 0 2px #BFFFB0, 0 0 12px rgba(123,232,112,0.75), inset 0 0 10px rgba(123,232,112,0.5);
  }
}

/* === Sidebar Sections & Buttons === Dark glass cards with light text */
#sidebar .sidebar-section,
#left-panel .sidebar-section {
  position: relative;
  padding: 10px 11px 10px;
  margin-bottom: 8px;
  gap: 6px;
  background: rgba(255,244,226,0.06);
  border: 2px solid rgba(196,145,92,0.25);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.3);
}
/* Subtle dashed icing border inside the frame (decorative) */
#sidebar .sidebar-section::before,
#left-panel .sidebar-section::before {
  content: '';
  position: absolute;
  top: 4px; left: 4px; right: 4px; bottom: 4px;
  border: 1px dashed rgba(196, 145, 92, 0.15);
  border-radius: 5px;
  pointer-events: none;
}
/* Remove the speckle overlay */
#sidebar .sidebar-section::after,
#left-panel .sidebar-section::after {
  content: none;
}
/* Section title: Press Start 2P pixel-art style — golden on dark */
#sidebar .sidebar-section .section-title,
#left-panel .sidebar-section .section-title {
  color: #D4A530;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.4;
  margin: 0 0 6px 0;
  padding-bottom: 5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  border-bottom: 2px solid rgba(196, 145, 92, 0.25);
  position: relative;
  z-index: 1;
}
/* Generic info text: sans-serif, light on dark */
#sidebar .sidebar-section #constructor-info,
#sidebar .sidebar-section .constructor-chances,
#sidebar .sidebar-section #snackman-info,
#sidebar .sidebar-section #build-detail,
#sidebar .sidebar-section #aura-display,
#sidebar .sidebar-section #mystery-result,
#sidebar .sidebar-section #tower-detail,
#left-panel .sidebar-section #quest-list,
#left-panel .sidebar-section #tower-detail {
  color: #D8C8B0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  text-shadow: none;
  position: relative;
  z-index: 1;
}
#sidebar .sidebar-section #constructor-info strong,
#sidebar .sidebar-section .constructor-chances strong,
#left-panel .sidebar-section #quest-list strong {
  color: #D4A530;
  font-weight: 800;
}
/* Constructor chance list: a bit tighter but still readable */
#sidebar .sidebar-section .constructor-chances {
  font-size: 13px;
  line-height: 1.5;
  color: #C4A888;
  font-weight: 600;
}
#sidebar .constructor-chances .streusel-active {
  color: #3DC9B5;
  font-weight: 700;
}
#sidebar .constructor-chances .streusel-inactive {
  color: #9A8878;
  font-weight: 600;
}
/* Gamble progress label + reward text */
#sidebar #gamble-progress-label,
#sidebar #gamble-progress-reward {
  color: #C4A888 !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  margin: 3px 0 !important;
  position: relative;
  z-index: 1;
}
#sidebar #gamble-progress-bar {
  height: 8px !important;
  margin: 3px 0 !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(139,78,33,0.3) !important;
  border-radius: 2px !important;
  position: relative;
  z-index: 1;
}
#sidebar #gamble-progress-fill {
  background: linear-gradient(180deg, #FFD926 0%, #C47F10 100%) !important;
}
/* Gamble / mystery inline result texts */
#gamble-result {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #FFD700 !important;
  text-shadow: 0 1px 0 #000 !important;
  margin: 3px 0 !important;
  min-height: 0;
  line-height: 1.4;
}
#mystery-result {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #2B1A0E !important;
  text-shadow: none !important;
  margin: 3px 0 !important;
  min-height: 0;
  line-height: 1.4;
}
/* Quest rows: dark text, larger and heavier weight */
#left-panel #quest-list,
#left-panel #quest-list * {
  font-family: system-ui, -apple-system, sans-serif !important;
}
#left-panel #quest-list .quest-row {
  padding: 4px 6px !important;
  margin: 3px 0 !important;
  background: rgba(255,234,197,0.08) !important;
  border: 1px solid rgba(196,145,92,0.25) !important;
  border-left: 3px solid #C47F10 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
#left-panel #quest-list .quest-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 5px;
  margin-bottom: 1px;
}
#left-panel #quest-list .quest-name {
  color: #E8D8C0 !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#left-panel #quest-list .quest-desc {
  color: #C4A888 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#left-panel #quest-list .quest-meta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
#left-panel #quest-list .quest-progress {
  color: #D4A530 !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  text-shadow: none !important;
  flex-shrink: 0;
}
#left-panel #quest-list .quest-bar {
  height: 3px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(139,78,33,0.3) !important;
  border-radius: 2px !important;
  margin-top: 2px !important;
  overflow: hidden;
}
#left-panel #quest-list .quest-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, #FFD926 0%, #C47F10 100%) !important;
  border-radius: 1px;
}
#left-panel #quest-list .quest-row.done {
  background: rgba(61,143,61,0.12) !important;
  border-left-color: #4CAF50 !important;
}
#left-panel #quest-list .quest-row.done .quest-name {
  color: #8FD88F !important;
}
#left-panel #quest-list .quest-row.done .quest-bar-fill {
  background: linear-gradient(180deg, #6CD070 0%, #388E3C 100%) !important;
}
/* Quest reward tag: shows the reward payout prominently on every card */
#left-panel #quest-list .quest-reward {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px;
  margin-top: 0 !important;
  padding: 1px 4px !important;
  background: rgba(255,244,214,0.1) !important;
  border: 1px solid rgba(196,145,92,0.3) !important;
  border-radius: 3px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #D4A530 !important;
  text-shadow: none !important;
  line-height: 1.1 !important;
  max-width: 86px;
  min-width: 0;
  overflow: hidden;
}
#left-panel #quest-list .quest-reward .reward-icon {
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}
#left-panel #quest-list .quest-reward .reward-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#left-panel #quest-list .quest-row.done .quest-reward {
  background: rgba(76,175,80,0.1) !important;
  border-color: rgba(76,175,80,0.3) !important;
  color: #8FD88F !important;
  opacity: 0.75;
}
/* Title: pixel font is wide — use flex row with "Runde X" right-aligned
   so it never wraps onto a second misaligned line. */
#left-panel .section-title.quest-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important;
}
#left-panel .section-title.quest-title .quest-title-label {
  flex-shrink: 0;
}
#left-panel .section-title.quest-title .quest-title-round {
  font-size: 9px !important;
  color: #E8A030;
  flex-shrink: 0;
}
/* All-quests-complete special-bonus card */
#quest-allbonus {
  margin: 4px 0 2px 0;
  padding: 4px 6px;
  background: linear-gradient(135deg, rgba(255,241,184,0.12) 0%, rgba(255,217,107,0.08) 100%);
  border: 1px solid rgba(196,127,16,0.4);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 8px rgba(255,200,60,0.15);
  font-family: system-ui, -apple-system, sans-serif;
  color: #D4A530;
  font-size: 10px;
  line-height: 1.2;
  position: relative;
}
#quest-allbonus.empty { display: none; }
#quest-allbonus .allbonus-title {
  font-weight: 900;
  font-size: 10px;
  color: #6B3D00;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 1px;
}
#quest-allbonus .allbonus-reward {
  font-weight: 800;
  color: #8B4E0F;
  font-size: 10px;
}
#quest-allbonus .allbonus-star {
  font-size: 11px;
  filter: drop-shadow(0 0 2px rgba(255,200,40,0.8));
}

/* --- Quest completion toast (top-right stack) --- */
#quest-toast-container {
  position: fixed;
  top: 70px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9500;
  pointer-events: none;
  max-width: 280px;
}
.quest-toast {
  background: rgba(30,20,10,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(196,145,92,0.3);
  border-left: 5px solid #4CAF50;
  border-radius: 8px;
  padding: 9px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  font-family: system-ui, -apple-system, sans-serif;
  color: #E8DCCB;
  min-width: 190px;
  pointer-events: auto;
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2,0.9,0.25,1.15), opacity 0.35s ease;
}
.quest-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.quest-toast.hide {
  transform: translateX(110%);
  opacity: 0;
}
/* Error variant — red accent for action failures (e.g. not enough sugar) */
.quest-toast.error-toast {
  border-left-color: #E74C3C;
}
.quest-toast.error-toast .qt-head {
  color: #FFB4A8;
}
.quest-toast .qt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 13px;
  color: #8FD88F;
  margin-bottom: 3px;
}
.quest-toast .qt-check {
  font-size: 14px;
}
.quest-toast .qt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quest-toast .qt-reward {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255,244,214,0.1);
  border: 1px solid rgba(196,127,16,0.3);
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  color: #D4A530;
}
.quest-toast.all-done {
  border-left-color: #FFD926;
  background: rgba(50,35,10,0.92);
  box-shadow: 0 4px 18px rgba(255,200,40,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  animation: allDonePulse 1.6s ease-in-out infinite;
}
.quest-toast.all-done .qt-head {
  color: #FFD926;
}
@keyframes allDonePulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(255,200,40,0.55), inset 1px 1px 0 rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 4px 22px rgba(255,220,80,0.85), inset 1px 1px 0 rgba(255,255,255,0.7); }
}
/* Aura-display rows: readable light text on dark */
#sidebar #aura-display {
  font-family: system-ui, -apple-system, sans-serif !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#sidebar #aura-display .aura-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #D8C8B0 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
#sidebar #aura-display .aura-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #D8C8B0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebar #aura-display .aura-count {
  font-size: 12px;
  font-weight: 800;
  color: #D4A530;
  flex-shrink: 0;
}
#sidebar #aura-display .aura-bar {
  width: 36px;
  flex-shrink: 0;
  height: 7px !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(139,78,33,0.3) !important;
  border-radius: 2px !important;
  overflow: hidden;
}
#sidebar #aura-display .aura-fill {
  height: 100%;
  border-radius: 1px;
}
#sidebar #aura-display .aura-dot {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 4px;
  font-size: 12px;
  border: 2px solid #3D1F0A;
  color: #FFF;
  text-shadow: 1px 1px 0 #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4);
}
/* Locked features header */
#left-panel #locked-features-header {
  display: flex !important;
  align-items: center;
  gap: 5px;
  padding: 10px 12px !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #C4A888 !important;
  text-shadow: none !important;
  background: rgba(255,244,226,0.06) !important;
  border: 2px solid rgba(196,145,92,0.25) !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}
#left-panel #locked-features-header .lock-icon {
  font-size: 16px;
  flex-shrink: 0;
}
#left-panel #locked-features-header .expand-arrow {
  margin-left: auto;
  color: #D4A530;
  font-size: 12px;
  flex-shrink: 0;
}
/* Aura lock hint */
#aura-lock-hint,
.lock-hint {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #9A8878 !important;
  text-shadow: none !important;
  padding: 4px 0 !important;
  line-height: 1.4 !important;
}
/* Generic result-text wrapper */
.result-text {
  min-height: 0;
  color: #D8C8B0;
}
/* Constructor level displayed inline */
#constructor-level {
  color: #D4A530;
  font-size: 15px;
  font-weight: 900;
}

/* === Sidebar Buttons — light themed with high-contrast text === */
#sidebar .sidebar-btn,
#left-panel .sidebar-btn {
  position: relative;
  padding: 9px 10px;
  margin-bottom: 4px;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 700;
  min-height: 0;
  background: linear-gradient(180deg, #F5E3BA 0%, #D4A85A 100%);
  color: #2B1A0E;
  border: 3px solid #8B4E21;
  border-radius: 6px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.55),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    0 3px 0 #5A3310,
    0 5px 8px rgba(0,0,0,0.3);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  line-height: 1.25;
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
  z-index: 1;
}
#sidebar .sidebar-btn:hover:not(:disabled),
#left-panel .sidebar-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.65),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    0 5px 0 #5A3310,
    0 8px 14px rgba(0,0,0,0.4);
}
#sidebar .sidebar-btn:active:not(:disabled),
#left-panel .sidebar-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.35),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    0 1px 0 #5A3310,
    0 2px 4px rgba(0,0,0,0.3);
}
#sidebar .sidebar-btn:disabled,
#left-panel .sidebar-btn:disabled {
  background: linear-gradient(180deg, #C5B5A0 0%, #8A7555 100%);
  border-color: #5A4A30;
  color: #5A4A30;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.25),
    0 2px 0 #3D2B1F;
  filter: grayscale(0.4);
}
/* Green "go" variant (build tower / upgrade Constructor) */
#sidebar .sidebar-btn.btn-gold,
#left-panel .sidebar-btn.btn-gold {
  background: linear-gradient(180deg, #A8F0A0 0%, #4CAF50 100%);
  border-color: #1E5A1E;
  color: #0A2A0A;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.18),
    0 3px 0 #0A3A0A,
    0 5px 10px rgba(0,0,0,0.4);
}
/* Red danger variant */
#sidebar .sidebar-btn.btn-red,
#left-panel .sidebar-btn.btn-red {
  background: linear-gradient(180deg, #FFA3A3 0%, #D9534F 100%);
  border-color: #7A1E1E;
  color: #3A0A0A;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.55),
    inset -2px -2px 0 rgba(0,0,0,0.18),
    0 3px 0 #3A0A0A,
    0 5px 10px rgba(0,0,0,0.4);
}
/* Multi-build active state for btn-draw */
#sidebar .sidebar-btn.btn-multi-active,
#left-panel .sidebar-btn.btn-multi-active {
  background: linear-gradient(180deg, #FFE94F 0%, #C49F0F 100%) !important;
  color: #3D1F0A !important;
  border-color: #5A3A1E !important;
}
/* Button content layout */
#sidebar .sidebar-btn .btn-main,
#sidebar .sidebar-btn .btn-cost,
#left-panel .sidebar-btn .btn-main,
#left-panel .sidebar-btn .btn-cost {
  position: relative;
  z-index: 2;
  display: block;
  text-align: center;
  width: 100%;
}
#sidebar .sidebar-btn .btn-main,
#left-panel .sidebar-btn .btn-main {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
#sidebar .sidebar-btn .btn-cost,
#left-panel .sidebar-btn .btn-cost {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #5A3A1E;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  opacity: 1;
  margin-top: 1px;
}
#sidebar .sidebar-btn.btn-gold .btn-cost,
#left-panel .sidebar-btn.btn-gold .btn-cost {
  color: #0A3A0A;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
}

/* ============================================================
   Candy Arcade Polish
   Final skin pass: brighter game surface, calmer chrome, mobile-first actions.
   ============================================================ */

:root {
  --bg-panel: rgba(36, 20, 33, 0.82);
  --bg-dark: #140D18;
  --bg-medium: rgba(255, 255, 255, 0.08);
  --bg-light: rgba(255, 255, 255, 0.14);
  --gold: #F2B84B;
  --gold-bright: #FFD45A;
  --border: rgba(255, 213, 117, 0.28);
  --text: #FFF6E8;
  --text-dim: #E7D8C7;
  --text-muted: #BCA99D;
  --sugar-color: #FFB545;
  --streusel-color: #56E0D2;
  --lives-color: #FF5E7E;
  --wave-color: #FFE066;
  --green-btn: #22B867;
  --pink: #FF5AB3;
}

body {
  background:
    linear-gradient(180deg, rgba(255, 160, 200, 0.10), rgba(77, 218, 201, 0.07)),
    linear-gradient(135deg, #211126 0%, #301A2D 42%, #121B29 100%);
  image-rendering: auto;
}

#hud,
#left-panel,
#sidebar,
#bottom-bar,
#inv-context {
  background: rgba(24, 14, 28, 0.82) !important;
  border: 1px solid rgba(255, 213, 117, 0.24) !important;
  border-radius: 8px !important;
  box-shadow:
    0 10px 30px rgba(5, 2, 12, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#hud {
  min-height: 56px;
  padding: 6px 12px;
}

#game-logo {
  background: linear-gradient(90deg, #FF5AB3 0%, #FFD45A 48%, #56E0D2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hud-label {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 246, 232, 0.58);
}

.hud-value {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

#hud button,
.sidebar-btn,
.ctx-btn,
.panel-tab,
.pause-menu-btn,
.start-btn {
  border-radius: 6px !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

#hud button,
.speed-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFF6E8 !important;
  min-height: 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.18) !important;
  text-shadow: none !important;
}

#hud button:hover:not(:disabled),
.speed-btn.active {
  background: rgba(255, 212, 90, 0.22) !important;
  border-color: rgba(255, 212, 90, 0.58) !important;
}

#btn-start-wave {
  background: linear-gradient(180deg, #31D879 0%, #17A95A 100%) !important;
  border-color: rgba(151, 255, 190, 0.55) !important;
  color: white !important;
  font-weight: 900;
}

#main-area {
  gap: 8px;
  padding: 8px;
}

#left-panel,
#sidebar {
  margin: 0;
}

#left-panel {
  width: 220px;
}

#sidebar {
  width: 190px;
}

#canvas-wrapper {
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 246, 214, 0.10), rgba(255, 255, 255, 0.02)),
    #182118;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

#canvas-wrapper canvas {
  border-radius: 4px;
}

.section-title {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  color: #FFD45A !important;
  border-bottom: 1px solid rgba(255, 212, 90, 0.18) !important;
  text-shadow: none !important;
}

.sidebar-section {
  gap: 8px;
}

.sidebar-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFF6E8 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 16px rgba(0, 0, 0, 0.20) !important;
  text-shadow: none !important;
}

.sidebar-btn.btn-gold,
.ctx-btn-place {
  background: linear-gradient(180deg, #30D679 0%, #18A85B 100%) !important;
  border-color: rgba(146, 255, 188, 0.50) !important;
  color: white !important;
}

.sidebar-btn .btn-main {
  font-size: 13px;
  font-weight: 900;
}

.sidebar-btn .btn-cost {
  font-size: 11px;
  color: rgba(255, 246, 232, 0.72);
}

#bottom-bar {
  min-height: 58px;
  height: auto;
  margin: 0 8px 8px;
}

#inventory-header {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.inv-slot {
  width: 46px;
  height: 46px;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
}

.inv-slot:hover,
.inv-slot.selected {
  background: rgba(255, 212, 90, 0.16) !important;
  border-color: rgba(255, 212, 90, 0.72) !important;
}

#left-panel #quest-list .quest-row {
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  padding: 4px 6px !important;
  margin: 3px 0 !important;
}

#left-panel #quest-list .quest-bar {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

#left-panel #quest-list .quest-bar-fill {
  background: linear-gradient(90deg, #FF5AB3, #FFD45A) !important;
}

@media (min-width: 901px) {
  #hud-row2 .speed-btn {
    min-width: 42px;
    padding: 6px 10px;
  }

  #btn-start-wave {
    min-width: 176px;
  }
}

@media (max-width: 900px) {
  #hud {
    min-height: 0;
    padding: 5px 8px 6px;
    border-width: 0 0 1px 0 !important;
    gap: 4px;
  }

  #logo-wrap {
    min-width: 72px;
  }

  #game-logo {
    font-size: 13px;
  }

  #hud-row1 {
    gap: 3px;
  }

  .hud-group {
    gap: 5px;
    padding: 0 2px;
  }

  .hud-label {
    font-size: 8px;
  }

  .hud-value {
    font-size: 15px;
  }

  #hud-row2 {
    gap: 5px;
  }

  #btn-start-wave {
    width: auto;
    flex: 1 1 150px;
    min-height: 42px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .speed-btn {
    min-width: 42px;
    min-height: 42px;
    padding: 5px 8px;
    font-size: 12px;
  }

  #main-area {
    padding: 0 0 82px;
    gap: 0;
  }

  #sidebar {
    position: fixed !important;
    top: auto !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px !important;
    pointer-events: auto !important;
    background: rgba(24, 14, 28, 0.76) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  #sidebar > .sidebar-section {
    flex: 1 1 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #sidebar > .sidebar-section .section-title,
  #sidebar .constructor-chances,
  #sidebar #snackman-info {
    display: none !important;
  }

  .constructor-build-row {
    height: 100%;
    gap: 6px !important;
  }

  #sidebar .sidebar-btn {
    min-height: 54px !important;
    padding: 7px 8px !important;
  }

  #sidebar .sidebar-btn .btn-main {
    font-size: 12px !important;
  }

  #sidebar .sidebar-btn .btn-cost {
    font-size: 10px !important;
  }

  #sidebar #build-status {
    bottom: 86px !important;
    background: rgba(24, 14, 28, 0.88) !important;
    border: 1px solid rgba(255, 212, 90, 0.60) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
  }

  #sidebar #build-status #build-detail {
    color: #FFF1B8 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #canvas-wrapper {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #left-panel {
    background: rgba(24, 14, 28, 0.94) !important;
    width: min(320px, 86vw);
  }

  .tab-left,
  .tab-gambling,
  .tab-aura {
    left: 8px;
    width: 50px !important;
    height: 48px !important;
    border-radius: 8px !important;
    background: rgba(24, 14, 28, 0.54) !important;
  }

  .tab-left {
    top: calc(var(--mobile-hud-h, 88px) + 8px);
  }

  .tab-gambling {
    top: calc(var(--mobile-hud-h, 88px) + 62px);
  }

  .tab-inv {
    right: 12px;
    bottom: 86px;
    height: 40px;
    z-index: 72;
    border-radius: 999px !important;
    background: rgba(255, 212, 90, 0.92) !important;
    border-color: rgba(255, 246, 232, 0.45) !important;
  }

  #bottom-bar.open ~ .tab-inv {
    bottom: calc(76px + var(--mobile-inv-h, 128px) + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 72;
    background: rgba(24, 14, 28, 0.94) !important;
    color: #FFF6E8 !important;
    border-color: rgba(255, 212, 90, 0.68) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34) !important;
  }

  #bottom-bar.open ~ .fab-place-snackman {
    bottom: calc(76px + var(--mobile-inv-h, 128px) + 62px + env(safe-area-inset-bottom, 0px));
  }

  #bottom-bar {
    z-index: 60;
    bottom: 0 !important;
    height: auto !important;
    min-height: 128px;
    max-height: min(58vh, calc(100dvh - var(--mobile-hud-h, 88px) - 100px));
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0 !important;
    align-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #bottom-bar.open {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 128px;
  }

  #inventory {
    gap: 6px;
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
  }

  .inv-slot {
    width: calc((100vw - 70px) / 5);
    height: calc((100vw - 70px) / 5);
    max-width: 58px;
    max-height: 58px;
  }

  /* Spell panel: sit above the bottom sidebar (bottom: 8px + ~66px tall = ~76px) */
  #spell-panel {
    bottom: 82px !important;
    z-index: 46 !important; /* above sidebar z-index:45, below open panels z-index:51 */
    padding-right: 10px !important; /* no tab-inv overlap in this layout */
  }
}

.quest-toast {
  background: rgba(24, 14, 28, 0.90) !important;
  border: 1px solid rgba(255, 212, 90, 0.48) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(255, 90, 179, 0.12) !important;
}

.quest-toast .qt-check {
  background: linear-gradient(180deg, #56E0D2, #22B867) !important;
  color: #101818 !important;
}

.quest-toast.all-done {
  background: linear-gradient(135deg, rgba(255, 90, 179, 0.94), rgba(255, 212, 90, 0.94)) !important;
  color: #241018 !important;
}

#reward-reveal-bg {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 212, 90, 0.35), transparent 30%),
    linear-gradient(135deg, rgba(34, 184, 103, 0.72), rgba(255, 90, 179, 0.76)) !important;
}

#reward-reveal-prize {
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
}

.reward-btn {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFF6E8 !important;
}

.reward-btn-primary {
  background: linear-gradient(180deg, #31D879 0%, #17A95A 100%) !important;
  color: white !important;
}

.sidebar-btn:active,
.ctx-btn:active,
.panel-tab:active,
#hud button:active {
  transform: translateY(1px) scale(0.985);
}

@media (max-width: 500px) {
  #hud-row2 .speed-btn:nth-of-type(n+5) {
    display: none;
  }

  #btn-start-wave {
    flex-basis: 128px;
    font-size: 12px;
  }

  #sidebar .sidebar-btn .btn-main {
    font-size: 11px !important;
  }

  #sidebar .sidebar-btn .btn-cost {
    font-size: 9px !important;
  }
}

/* === Premium Candy Polish Pass === */
#hud {
  background:
    linear-gradient(180deg, rgba(52, 27, 58, 0.94), rgba(25, 13, 34, 0.88)) !important;
  border: 1px solid rgba(255, 226, 136, 0.38) !important;
  box-shadow:
    0 12px 32px rgba(7, 2, 18, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 105, 190, 0.10) !important;
}

.hud-item {
  min-width: 64px;
  padding: 5px 9px 6px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.16);
}

.hud-label {
  color: rgba(255, 246, 232, 0.68) !important;
}

.hud-value {
  letter-spacing: 0 !important;
}

#hud button,
.speed-btn {
  border-radius: 8px !important;
}

#btn-start-wave {
  min-height: 40px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #45E987 0%, #16B866 58%, #0C864A 100%) !important;
  border: 1px solid rgba(187, 255, 205, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(17, 188, 100, 0.24) !important;
}

#canvas-wrapper {
  border: 1px solid rgba(255, 226, 136, 0.22) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 226, 136, 0.10), transparent 36%),
    linear-gradient(180deg, rgba(24, 46, 28, 0.96), rgba(13, 28, 21, 0.98)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#left-panel,
#sidebar,
#bottom-bar {
  background:
    linear-gradient(180deg, rgba(47, 27, 50, 0.92), rgba(22, 13, 31, 0.90)) !important;
  border-color: rgba(255, 226, 136, 0.28) !important;
}

#bottom-bar {
  min-height: 64px;
  box-shadow:
    0 -8px 24px rgba(6, 2, 16, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.inv-slot {
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}

.inv-slot.fusion-slot {
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 227, 106, 0.28), rgba(255, 122, 242, 0.10) 58%, rgba(255, 255, 255, 0.04)) !important;
  border-color: rgba(255, 227, 106, 0.86) !important;
  box-shadow:
    0 0 16px rgba(255, 212, 90, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.sidebar-btn,
.ctx-btn {
  border-radius: 8px !important;
  min-height: 48px;
}

.sidebar-btn.btn-gold,
.ctx-btn-place {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, #45E987, #18AA62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(17, 188, 100, 0.20) !important;
}

#btn-upgrade-constructor.constructor-ready {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, #FFE66D 0%, #F6B932 55%, #C97816 100%) !important;
  border-color: rgba(255, 236, 142, 0.88) !important;
  color: #2E1807 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -4px 0 rgba(111, 55, 0, 0.24),
    0 8px 18px rgba(246, 185, 50, 0.28) !important;
}

#btn-upgrade-constructor.constructor-ready .btn-cost,
#btn-upgrade-constructor.constructor-ready #constructor-level {
  color: #3A1A05 !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.46) !important;
}

@media (max-width: 900px) {
  .hud-item {
    min-width: 0;
    padding: 3px 5px;
  }

  #btn-start-wave {
    min-height: 38px !important;
  }
}

/* === Candy Royale visual pass === */
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 210, 126, 0.12) 0, rgba(255, 210, 126, 0) 22%),
    radial-gradient(circle at 80% 16%, rgba(166, 38, 84, 0.28) 0, rgba(166, 38, 84, 0) 28%),
    radial-gradient(circle at 74% 84%, rgba(117, 58, 26, 0.32) 0, rgba(117, 58, 26, 0) 30%),
    linear-gradient(135deg, #231226 0%, #4A1735 42%, #5A2C16 100%) !important;
  image-rendering: auto !important;
}

#game-bg {
  background:
    linear-gradient(180deg, rgba(255, 220, 140, 0.08), rgba(20, 8, 20, 0)),
    radial-gradient(circle at 50% 110%, rgba(95, 42, 20, 0.32), rgba(95, 42, 20, 0)) !important;
}

#hud,
#left-panel,
#sidebar,
#bottom-bar,
.aura-mobile-panel {
  background:
    linear-gradient(180deg, rgba(255, 235, 185, 0.13), rgba(255, 255, 255, 0.035) 42%, rgba(88, 35, 23, 0.18)),
    linear-gradient(180deg, rgba(64, 27, 54, 0.94), rgba(31, 16, 30, 0.96)) !important;
  border: 1px solid rgba(232, 169, 82, 0.34) !important;
  border-radius: 12px !important;
  box-shadow:
    0 12px 32px rgba(10, 4, 14, 0.46),
    inset 0 1px 0 rgba(255, 226, 166, 0.20),
    inset 0 -2px 0 rgba(0, 0, 0, 0.30) !important;
}

#hud {
  min-height: 62px;
  margin: 8px 10px 0;
}

#game-logo,
#start-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  letter-spacing: 0 !important;
  color: #FFFFFF !important;
  text-shadow:
    0 2px 0 rgba(54, 15, 30, 0.86),
    0 7px 18px rgba(255, 173, 80, 0.28) !important;
}

.hud-label,
.section-title,
.spell-panel-title {
  letter-spacing: 0 !important;
  color: rgba(255, 218, 142, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72) !important;
}

.hud-value {
  color: #FFFFFF !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.88),
    0 3px 10px rgba(0, 0, 0, 0.72) !important;
}

#hud button,
.start-btn,
.pause-menu-btn,
.sidebar-btn,
.ctx-btn,
.spell-btn {
  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 226, 174, 0.25), rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, #9B2F4F 0%, #741F3D 54%, #4C1831 100%) !important;
  color: #FFFFFF !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 174, 0.30),
    inset 0 -4px 0 rgba(0, 0, 0, 0.24),
    0 7px 14px rgba(12, 4, 14, 0.34) !important;
}

#hud button:hover:not(:disabled),
.start-btn:hover:not(:disabled),
.pause-menu-btn:hover:not(:disabled),
.sidebar-btn:hover:not(:disabled),
.ctx-btn:hover:not(:disabled) {
  filter: brightness(1.08) saturate(1.08);
  transform: translateY(-1px);
}

#btn-start-wave,
.start-btn-accent,
.sidebar-btn.btn-gold,
.ctx-btn-place {
  background:
    linear-gradient(180deg, rgba(255, 238, 180, 0.36), rgba(255, 255, 255, 0.02) 44%),
    linear-gradient(180deg, #C17324 0%, #934716 56%, #5F2B10 100%) !important;
  border-color: rgba(255, 207, 112, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 170, 0.40),
    inset 0 -4px 0 rgba(0, 0, 0, 0.24),
    0 9px 18px rgba(126, 61, 17, 0.30) !important;
}

#canvas-wrapper {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow:
    0 16px 42px rgba(10, 4, 14, 0.42),
    0 0 0 1px rgba(232, 169, 82, 0.28),
    inset 0 1px 0 rgba(255, 226, 166, 0.18) !important;
}

#canvas-wrapper canvas {
  image-rendering: auto !important;
}

.inv-slot {
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 226, 166, 0.22), rgba(255, 255, 255, 0.035) 46%, rgba(46, 18, 35, 0.42)) !important;
}

.inv-slot:hover,
.inv-slot.selected {
  border-color: rgba(255, 238, 142, 0.86) !important;
  box-shadow:
    0 0 18px rgba(255, 213, 88, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

#start-screen {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 218, 142, 0.20), rgba(255,255,255,0) 30%),
    linear-gradient(135deg, #231226 0%, #4A1735 44%, #5A2C16 100%) !important;
}

#start-content {
  filter: drop-shadow(0 16px 32px rgba(10, 4, 14, 0.42));
}

#start-logo {
  image-rendering: auto !important;
  filter:
    drop-shadow(0 10px 24px rgba(10, 4, 14, 0.55))
    drop-shadow(0 0 18px rgba(255, 186, 82, 0.20)) !important;
}

#start-title {
  background: rgba(24, 12, 24, 0.58) !important;
  border: 1px solid rgba(255, 218, 142, 0.32) !important;
  border-radius: 999px !important;
  color: #FFFFFF !important;
  font-weight: 950 !important;
}

#start-screen .ss-hint {
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255, 235, 185, 0.10), rgba(255,255,255,0.025)),
    rgba(24, 12, 24, 0.50) !important;
  border: 1px solid rgba(255, 212, 90, 0.22) !important;
}

#start-screen .ss-hint-text {
  color: #FFFFFF !important;
}

#start-screen .ss-hint-sub {
  color: rgba(255, 226, 166, 0.74) !important;
}

@media (max-width: 900px) {
  #hud {
    margin: 4px 4px 0;
    border-radius: 10px !important;
  }

  #canvas-wrapper {
    border-radius: 12px !important;
  }
}

/* === Final responsive UI fit pass === */
#hud {
  display: grid !important;
  grid-template-columns: minmax(92px, 130px) minmax(260px, 1fr) auto;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 3px !important;
  min-height: 50px !important;
  max-height: 64px;
  padding: 5px 10px !important;
  overflow: hidden;
}

#logo-wrap {
  min-width: 0 !important;
  max-width: 130px !important;
  overflow: hidden;
  z-index: 2;
}

#game-logo {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 1.05vw, 16px) !important;
  line-height: 1.1;
}

.mode-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hud-row1 {
  min-width: 0 !important;
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  gap: clamp(4px, 0.6vw, 10px) !important;
  overflow: hidden;
}

#hud-row2 {
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow: hidden;
}

.hud-group {
  min-width: 0 !important;
  gap: clamp(3px, 0.45vw, 8px) !important;
  padding: 0 !important;
  flex: 0 1 auto;
}

.hud-group-resources {
  padding-right: clamp(4px, 0.6vw, 10px) !important;
}

.hud-item {
  min-width: clamp(44px, 5vw, 66px) !important;
  max-width: 78px;
  padding: 3px 6px 4px !important;
  line-height: 1.15 !important;
  overflow: hidden;
}

.hud-label,
.hud-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-label {
  font-size: clamp(8px, 0.72vw, 11px) !important;
}

.hud-value {
  font-size: clamp(12px, 1.05vw, 17px) !important;
}

#hud button,
#hud .speed-btn {
  flex: 0 1 auto;
  min-width: 34px !important;
  max-width: 112px;
  min-height: 34px !important;
  padding: 5px 8px !important;
  font-size: clamp(10px, 0.82vw, 13px) !important;
  line-height: 1.05 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#btn-start-wave {
  min-width: 104px !important;
  max-width: 140px !important;
}

@media (max-width: 1180px) and (min-width: 901px) {
  #hud {
    grid-template-columns: minmax(86px, 112px) minmax(220px, 1fr) auto;
    column-gap: 6px !important;
  }

  #hud-row2 .speed-btn {
    min-width: 32px !important;
    max-width: 52px;
    padding-inline: 6px !important;
  }

  #btn-start-wave {
    min-width: 94px !important;
    max-width: 112px !important;
  }
}

/* === Multiplayer Lobby Modal === */
#mp-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.65);
  display: flex; justify-content: center; align-items: center;
  /* Above #start-screen (z:500) so the lobby modal opens on top of it. */
  z-index: 600;
}
#mp-modal-content {
  /* Opaque base — start-screen below is z:500 with bright gradients, so the
     modal must fully occlude it (var(--bg-panel) at 85% lets red bleed through). */
  background: #1A0E06;
  border: 3px solid var(--gold);
  border-radius: 10px; padding: 18px 22px;
  min-width: 320px; max-width: 460px; width: 92vw;
  max-height: 88vh; overflow-y: auto;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
#mp-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
#mp-modal-title {
  font-size: 14px; font-weight: 900; color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace; letter-spacing: 1px;
}
#mp-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; font-weight: 800; cursor: pointer;
  padding: 0 6px;
}
#mp-close:hover { color: var(--gold-bright); }

.mp-section-title {
  margin: 12px 0 6px !important;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  color: var(--gold);
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
}

.mp-field {
  display: block; margin: 10px 0 6px;
}
.mp-field-label {
  display: block; font-size: 11px; font-weight: 800;
  color: var(--text-dim); margin-bottom: 4px; letter-spacing: 0.5px;
}
.mp-field input {
  width: 100%;
  padding: 8px 10px; font-size: 14px;
  background: rgba(0,0,0,0.25); color: var(--text);
  border: 2px solid var(--border); border-radius: 4px;
  font-family: inherit;
}
.mp-field input:focus {
  outline: none; border-color: var(--gold-bright);
  background: rgba(0,0,0,0.35);
}
#mp-code {
  text-transform: uppercase; letter-spacing: 4px;
  text-align: center; font-weight: 800;
}

.mp-actions-row {
  display: flex; gap: 8px; margin: 10px 0;
}
.mp-actions-lobby { margin: 12px 0; }
.mp-action-btn {
  flex: 1; padding: 10px 12px !important;
  font-size: 13px !important;
}
.mp-or {
  text-align: center; font-size: 11px; font-weight: 800;
  color: var(--text-muted); margin: 14px 0 6px; letter-spacing: 1px;
}
.mp-error {
  margin: 10px 0; padding: 8px 12px;
  background: rgba(180,40,40,0.18); color: #FF8888;
  border: 1px solid rgba(220,60,60,0.55); border-radius: 4px;
  font-size: 12px; font-weight: 700;
}
.mp-hint {
  margin-top: 14px; padding: 8px 10px;
  font-size: 11px; line-height: 1.5; color: var(--text-muted);
  background: rgba(255,255,255,0.04); border-radius: 4px;
  border-left: 3px solid var(--gold);
}

#mp-code-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 4px;
  background: rgba(255,255,255,0.04); border-radius: 4px;
  border: 1px dashed var(--border);
}
.mp-code-label {
  font-size: 10px; font-weight: 800; color: var(--text-dim);
  letter-spacing: 0.5px;
}
.mp-code-value {
  flex: 1; font-family: 'Press Start 2P', monospace;
  font-size: 16px; font-weight: 900;
  color: var(--gold-bright); letter-spacing: 4px;
  text-align: center;
}
.mp-mini-btn {
  padding: 5px 10px; font-size: 11px; font-weight: 800;
  background: var(--bg-medium); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.mp-mini-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold-bright); }
.mp-lobby-help {
  margin: 4px 0 8px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.mp-player-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 6px;
  min-height: 36px;
}
.mp-player {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04); border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 13px;
}
.mp-player.mp-player-off { opacity: 0.45; }
.mp-player-name { font-weight: 700; color: var(--text); }
.mp-tag-me, .mp-tag-host, .mp-tag-ready, .mp-tag-waiting {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px;
  vertical-align: middle;
}
.mp-tag-me     { background: rgba(232,160,48,0.25); color: var(--gold-bright); }
.mp-tag-host   { background: rgba(184,150,46,0.3); color: #FFE079; }
.mp-tag-ready  { background: rgba(76,175,80,0.25); color: #8FE093; }
.mp-tag-waiting{ background: rgba(255,255,255,0.05); color: var(--text-muted); }

.mp-status {
  font-size: 11px; color: var(--text-muted);
  text-align: center; padding: 4px 0;
}
.mp-lobby-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 4px 0 8px;
}
.mp-lobby-chip {
  padding: 3px 7px;
  border: 1px solid rgba(212,149,10,0.34);
  background: rgba(212,149,10,0.10);
  color: #FFE079;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.mp-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 6px;
}
.mp-mode-btn {
  min-height: 36px;
  border: 2px solid rgba(196,145,92,0.35);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.mp-mode-btn.active {
  border-color: var(--gold-bright);
  background: rgba(212,149,10,0.28);
  color: var(--gold-bright);
}
.mp-mode-btn:disabled {
  opacity: 0.75;
  cursor: default;
}
.mp-mode-hint {
  min-height: 34px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(196,145,92,0.18);
  padding: 7px 8px;
}

/* The base .sidebar-btn rule near the bottom of this file uses !important to
   force a maroon gradient on every sidebar-btn — so the lobby's "ready" state
   has to do the same to win the cascade. */
#mp-btn-ready.mp-btn-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 42%),
    linear-gradient(180deg, #5cbf60 0%, #4CAF50 60%, #357A38 100%) !important;
  border-color: #3d8b40 !important;
  color: #fff !important;
}

.mp-chat-log {
  height: 110px; max-height: 110px; overflow-y: auto;
  padding: 6px 8px; margin-bottom: 6px;
  background: rgba(0,0,0,0.22); border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 12px; line-height: 1.5;
}
.mp-chat-msg { margin: 2px 0; word-wrap: break-word; }
.mp-chat-from { color: var(--gold-bright); font-weight: 800; }
.mp-chat-me .mp-chat-from { color: #8FE093; }
.mp-chat-sys {
  color: var(--text-muted); font-style: italic; font-size: 11px;
}
.mp-chat-input-row {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.mp-chat-input-row input {
  flex: 1; padding: 6px 10px; font-size: 12px;
  background: rgba(0,0,0,0.25); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  font-family: inherit;
}
.mp-chat-input-row input:focus {
  outline: none; border-color: var(--gold-bright);
}

#mp-scoreboard {
  position: fixed;
  left: 50%;
  top: 86px;
  transform: translateX(-50%);
  z-index: 72;
  width: min(360px, calc(100vw - 24px));
  padding: 8px;
  background: rgba(31,20,12,0.92);
  border: 2px solid rgba(212,149,10,0.55);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28);
  color: var(--text);
  font-family: inherit;
  pointer-events: auto;
}
#mp-connection-badge {
  position: fixed;
  left: 50%;
  top: 52px;
  transform: translateX(-50%);
  z-index: 73;
  padding: 5px 10px;
  color: #FFF6E8;
  background: rgba(28,18,12,0.94);
  border: 1px solid rgba(255,220,120,0.48);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}
#mp-connection-badge.mp-connection-reconnecting,
#mp-connection-badge.mp-connection-connecting {
  color: #FFE079;
  border-color: rgba(255,210,70,0.76);
}
#mp-connection-badge.mp-connection-offline {
  color: #FF9AA3;
  border-color: rgba(255,122,134,0.72);
}
.mp-score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mp-score-head strong {
  color: var(--gold-bright);
}
.mp-score-code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 900;
}
.mp-score-net {
  color: #FFE079;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}
#mp-score-toggle {
  width: 28px;
  height: 26px;
  min-width: 28px;
  padding: 0;
  border: 1px solid rgba(212,149,10,0.6);
  background: rgba(0,0,0,0.2);
  color: var(--gold-bright);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
#mp-score-toggle:hover {
  background: rgba(212,149,10,0.22);
}
#mp-scoreboard.collapsed {
  width: min(210px, calc(100vw - 24px));
}
#mp-scoreboard.collapsed .mp-score-body {
  display: none;
}
.mp-score-room {
  margin: 3px 0 6px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
}
.mp-score-row {
  display: grid;
  grid-template-columns: minmax(62px, 1fr) auto repeat(4, auto) auto;
  gap: 5px;
  align-items: center;
  padding: 5px 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
  min-height: 30px;
}
.mp-score-race-hint {
  margin: 4px 0 3px;
  padding: 4px 6px;
  color: #FFE079;
  background: rgba(212,149,10,0.14);
  border: 1px solid rgba(212,149,10,0.38);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
}
.mp-score-row.me {
  background: rgba(212,149,10,0.14);
}
.mp-score-row.off {
  opacity: 0.45;
}
.mp-score-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 12px;
}
.mp-score-name em {
  font-style: normal;
  font-size: 9px;
  color: var(--gold-bright);
}
.mp-score-name b {
  color: var(--gold-bright);
  font-size: 10px;
}
.mp-score-status {
  white-space: nowrap;
  min-width: 38px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  color: #E8DCCB;
  background: rgba(255,255,255,0.06);
}
.mp-score-status.fight { color: #BEE3FF; background: rgba(107,195,255,0.15); }
.mp-score-status.clear,
.mp-score-status.done { color: #8FE093; background: rgba(76,175,80,0.16); }
.mp-score-status.out { color: #FF9AA3; background: rgba(255,122,134,0.15); }
.mp-score-status.off { color: #9C8E82; background: rgba(255,255,255,0.04); }
.mp-score-status.wait { color: #FFE079; background: rgba(212,149,10,0.14); }
.mp-score-stat,
.mp-score-points {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
  color: var(--text);
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.045);
}
.mp-score-stat.lives {
  color: #ff7a86;
}
.mp-score-points {
  color: var(--gold-bright);
  min-width: 38px;
  text-align: right;
  background: transparent;
  padding-right: 0;
}

@media (max-width: 520px) {
  #mp-scoreboard {
    left: 50%;
    right: auto;
    top: calc(var(--mobile-hud-h, 88px) + 4px);
    transform: translateX(-50%);
    width: min(330px, calc(100vw - 104px));
  }
  #mp-connection-badge {
    top: calc(var(--mobile-hud-h, 88px) - 26px);
    max-width: min(300px, calc(100vw - 104px));
  }
  .mp-score-row {
    grid-template-columns: minmax(48px, 1fr) auto repeat(4, auto);
    gap: 3px;
  }
  .mp-score-points {
    display: none;
  }
  .mp-score-status {
    min-width: 32px;
    font-size: 8px;
    padding: 2px 3px;
  }
}

body.mp-running #btn-start-wave,
body.mp-running #btn-speed,
body.mp-running #btn-pause,
body.mp-running #btn-save {
  display: none !important;
}

body.mp-running #hud-row2 {
  justify-content: center;
}

#mp-eliminated-overlay,
#mp-spectator-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18, 10, 6, 0.86);
  backdrop-filter: blur(2px);
}
#mp-eliminated-card,
#mp-spectator-card {
  width: min(760px, calc(100vw - 28px));
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 22px;
  background: rgba(31,20,12,0.96);
  border: 3px solid rgba(212,149,10,0.72);
  box-shadow: 0 16px 40px rgba(0,0,0,0.42);
  color: var(--text);
}
.mp-elim-kicker {
  color: #ff7a86;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
#mp-eliminated-card h1,
#mp-spectator-card h1 {
  margin: 4px 0 6px;
  color: var(--gold-bright);
}
#mp-spectator-overlay {
  z-index: 610;
}
#mp-eliminated-card p,
#mp-spectator-card p {
  margin: 0 0 14px;
  color: var(--text-muted);
  line-height: 1.45;
}
.mp-spectator-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.mp-spectator-actions button {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.10);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}
.mp-elim-table {
  display: grid;
  gap: 4px;
}
.mp-elim-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 76px 76px 82px 86px 90px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  font-weight: 800;
}
.mp-elim-header {
  min-height: 30px;
  color: var(--text-muted);
  background: transparent;
  border-color: rgba(212,149,10,0.24);
  font-size: 11px;
  text-transform: uppercase;
}
.mp-elim-row.me {
  background: rgba(212,149,10,0.18);
  border-color: rgba(212,149,10,0.45);
}
.mp-elim-row.off {
  opacity: 0.55;
}
.mp-elim-player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-elim-player b {
  color: var(--gold-bright);
}
.mp-elim-player em {
  color: var(--gold-bright);
  font-size: 10px;
  font-style: normal;
}
.mp-elim-life {
  color: #ff7a86;
}
.mp-elim-score {
  color: var(--gold-bright);
  text-align: right;
}

/* Multiplayer champion banner: non-blocking celebration when first
   player clears wave 42, shown on every player's screen. */
#mp-champion-banner {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2px solid #FFD45C;
  background: linear-gradient(180deg, rgba(74, 23, 53, 0.96), rgba(31, 16, 30, 0.96));
  color: #FFF6E8;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 38px rgba(0,0,0,0.55), 0 0 32px rgba(255, 212, 90, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,1.4,.4,1);
  animation: mpChampionGlow 1.6s ease-in-out infinite;
}
#mp-champion-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#mp-champion-banner.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(-12px);
}
#mp-champion-banner .mpc-trophy { font-size: 22px; }
#mp-champion-banner .mpc-text { color: #FFD45C; }

@keyframes mpChampionGlow {
  0%, 100% { box-shadow: 0 16px 38px rgba(0,0,0,0.55), 0 0 32px rgba(255, 212, 90, 0.45); }
  50%      { box-shadow: 0 16px 38px rgba(0,0,0,0.55), 0 0 48px rgba(255, 212, 90, 0.75); }
}

@media (max-width: 700px) {
  #mp-champion-banner {
    top: 60px;
    padding: 10px 16px;
    font-size: 13px;
    gap: 8px;
  }
  #mp-champion-banner .mpc-trophy { font-size: 16px; }
}

/* Multiplayer postgame + damage-test comparison */
#mp-postgame-overlay {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(18,10,6,0.88);
  backdrop-filter: blur(2px);
}
#mp-postgame-card {
  width: min(820px, calc(100vw - 28px));
  max-height: min(84vh, 760px);
  overflow: auto;
  padding: 22px;
  background: rgba(31,20,12,0.97);
  border: 3px solid rgba(212,149,10,0.74);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  color: var(--text);
}
.mp-post-kicker {
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
#mp-postgame-card h1 {
  margin: 4px 0 6px;
  color: var(--gold-bright);
}
#mp-postgame-card p {
  margin: 0 0 14px;
  color: var(--text-muted);
  line-height: 1.45;
}
.mp-post-table {
  display: grid;
  gap: 4px;
}
.mp-post-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 72px 92px 92px 72px 68px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  font-weight: 800;
}
.mp-post-header {
  min-height: 30px;
  color: var(--text-muted);
  background: transparent;
  border-color: rgba(212,149,10,0.24);
  font-size: 11px;
  text-transform: uppercase;
}
.mp-post-row.me {
  background: rgba(212,149,10,0.18);
  border-color: rgba(212,149,10,0.45);
}
.mp-post-player {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-post-player b,
.mp-post-score {
  color: var(--gold-bright);
}
.mp-post-player em {
  color: var(--gold-bright);
  font-size: 10px;
  font-style: normal;
}
.mp-post-winner-banner {
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--gold-bright);
  background: rgba(212,149,10,0.15);
  border: 2px solid rgba(212,149,10,0.55);
  padding: 10px 16px;
  margin-bottom: 10px;
}
.mp-post-row.mp-post-winner {
  background: rgba(212,149,10,0.22);
  border-color: var(--gold-bright);
  box-shadow: 0 0 10px rgba(212,149,10,0.25);
}
.mp-post-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
#mp-btn-damage-test {
  min-width: min(280px, 100%);
  padding: 12px 18px;
  border: 2px solid rgba(212,149,10,0.75);
  background: var(--green-btn);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
#mp-btn-damage-test:disabled {
  background: #777;
  border-color: #999;
  color: #ddd;
  cursor: not-allowed;
  opacity: 0.75;
}

@media (max-width: 680px) {
  #mp-modal-content {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
    padding: 14px;
  }
  #mp-code-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .mp-code-label,
  .mp-code-value {
    grid-column: 1 / -1;
  }
  .mp-code-value {
    letter-spacing: 3px;
  }
  .mp-mini-btn {
    min-height: 34px;
  }
  .mp-chat-log {
    height: 86px;
    max-height: 86px;
  }
  #mp-eliminated-card,
  #mp-spectator-card {
    padding: 16px;
  }
  .mp-elim-row {
    grid-template-columns: minmax(92px, 1fr) 48px 48px 54px 54px;
    gap: 5px;
    font-size: 12px;
  }
  .mp-elim-row > span:last-child {
    display: none;
  }
  #mp-postgame-card {
    padding: 16px;
  }
  .mp-post-row {
    grid-template-columns: minmax(92px, 1fr) 56px 70px 66px 48px;
    gap: 5px;
    font-size: 12px;
  }
  .mp-post-row > span:last-child {
    display: none;
  }
}

@media (max-width: 900px) {
  #hud {
    display: grid !important;
    grid-template-columns: minmax(68px, 88px) minmax(0, 1fr);
    grid-template-areas:
      "logo stats"
      "actions actions";
    min-height: 0 !important;
    max-height: none;
    padding: 4px 6px !important;
    margin: 0 !important;
    gap: 3px 5px !important;
    border-radius: 0 !important;
  }

  #logo-wrap {
    grid-area: logo;
    max-width: 88px !important;
  }

  #game-logo {
    font-size: clamp(11px, 3.1vw, 14px) !important;
  }

  #hud-row1 {
    grid-area: stats;
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  #hud-row2 {
    grid-area: actions;
    width: 100%;
    justify-content: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  .hud-item {
    min-width: 0 !important;
    max-width: none;
    flex: 1 1 0;
    padding: 2px 4px !important;
  }

  .hud-label {
    font-size: clamp(7px, 2.1vw, 9px) !important;
  }

  .hud-value {
    font-size: clamp(10px, 3vw, 13px) !important;
  }

  #hud-countdown {
    display: none !important;
  }

  #hud-countdown.countdown-active {
    display: flex !important;
  }

  #hud button,
  #hud .speed-btn {
    min-width: 34px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    font-size: clamp(9px, 2.6vw, 11px) !important;
  }

  #btn-start-wave {
    flex: 1 1 104px !important;
    min-width: 96px !important;
    max-width: 160px !important;
  }
}

@media (max-width: 500px) {
  #hud {
    grid-template-columns: minmax(58px, 72px) minmax(0, 1fr);
  }

  #logo-wrap {
    max-width: 72px !important;
  }

  .hud-group-resources {
    border-right: 0 !important;
    padding-right: 0 !important;
  }

  #hud-row1 {
    gap: 2px !important;
  }

  #hud-row2 {
    display: grid !important;
    grid-template-columns: minmax(88px, 1.6fr) repeat(6, minmax(26px, 1fr));
    gap: 3px !important;
    align-items: stretch;
    width: 100%;
  }

  #hud-row2 .speed-btn,
  #hud-row2 button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 30px !important;
    padding: 3px 4px !important;
    font-size: clamp(8px, 2.4vw, 10px) !important;
    line-height: 1 !important;
  }

  #btn-start-wave {
    min-width: 92px !important;
    max-width: none !important;
  }
}

#btn-draw.sidebar-btn,
#btn-place-snackman.sidebar-btn,
#sidebar .sidebar-btn.btn-gold,
#left-panel .sidebar-btn.btn-gold {
  background:
    linear-gradient(180deg, rgba(235, 255, 218, 0.42), rgba(255, 255, 255, 0.02) 42%),
    linear-gradient(180deg, #65E77A 0%, #22B84D 55%, #0B7830 100%) !important;
  border-color: rgba(179, 255, 170, 0.72) !important;
  color: #F4FFF0 !important;
  text-shadow: 0 1px 2px rgba(0, 40, 10, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -4px 0 rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(8, 132, 54, 0.28) !important;
}

#btn-draw .btn-cost,
#btn-place-snackman .btn-cost,
#sidebar .sidebar-btn.btn-gold .btn-cost,
#left-panel .sidebar-btn.btn-gold .btn-cost {
  color: rgba(238, 255, 230, 0.88) !important;
  text-shadow: 0 1px 2px rgba(0, 45, 10, 0.80) !important;
}

#gambling-section {
  gap: 6px !important;
}

#slot-machine {
  margin-bottom: 4px !important;
}

.slot-cabinet {
  padding: 4px !important;
  border-width: 2px !important;
  border-radius: 7px !important;
}

.slot-top-label {
  font-size: 8px !important;
  margin-bottom: 3px !important;
  letter-spacing: 0 !important;
}

.slot-reels-frame {
  gap: 2px !important;
  padding: 4px !important;
}

.slot-reel {
  width: 30px !important;
  height: 30px !important;
}

.slot-reel span {
  font-size: 18px !important;
}

#gamble-result.result-text {
  min-height: 14px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

#slot-machine #gamble-progress {
  margin: 3px 1px !important;
}

#gamble-progress-label,
#gamble-progress-reward {
  font-size: 9px !important;
}

#gamble-progress-bar {
  height: 7px !important;
}

.slot-lever-btn {
  min-height: 38px !important;
  padding: 4px 6px !important;
  margin-top: 3px !important;
}

.slot-lever-btn .lever-icon {
  font-size: 12px !important;
}

.slot-lever-btn .lever-text {
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

.slot-lever-btn .btn-cost {
  font-size: 8px !important;
}

#mystery-box-wrap {
  margin-top: 4px !important;
}

.mystery-box-btn {
  min-height: 46px !important;
  padding: 5px 7px !important;
  border-width: 2px !important;
  border-radius: 7px !important;
}

.mystery-box-btn::before {
  font-size: 20px !important;
}

.mystery-box-btn .mystery-chest {
  font-size: 16px !important;
}

.mystery-box-btn .mystery-label {
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

.mystery-box-btn .btn-cost {
  font-size: 8px !important;
}

#debug-dot {
  display: none !important;
}

/* Wave start ready pulse: rendered outside the button without taking HUD space. */
#hud-row2 {
  overflow: visible !important;
}

#btn-start-wave {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

#btn-start-wave:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(157, 255, 190, 0.88);
  border-radius: 11px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.72;
  animation: wave-start-ready-pulse 1.15s ease-in-out infinite;
}

@keyframes wave-start-ready-pulse {
  0%, 100% {
    transform: scale(0.985);
    opacity: 0.58;
    box-shadow: 0 0 0 0 rgba(71, 236, 135, 0.30), 0 0 12px rgba(71, 236, 135, 0.28);
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(71, 236, 135, 0), 0 0 18px rgba(71, 236, 135, 0.50);
  }
}

/* High-risk gambling pass: darker premium cabinet with clearer reward meter */
#gambling-section .section-title {
  color: #FFD36A !important;
  text-shadow: 0 1px 0 #1A0808, 0 0 8px rgba(255, 176, 70, 0.35) !important;
}

#slot-machine .slot-cabinet {
  background:
    linear-gradient(145deg, rgba(255, 211, 106, 0.12) 0%, transparent 34%),
    linear-gradient(180deg, #3A1428 0%, #4A181F 48%, #2B1410 100%) !important;
  border-color: #B77A34 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -8px 18px rgba(0,0,0,0.28),
    0 4px 12px rgba(0,0,0,0.45) !important;
}

#slot-machine .slot-cabinet::before {
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 214, 100, 0.24) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 8%, rgba(255, 214, 100, 0.24) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important;
}

#slot-machine .slot-top-label {
  color: #FFD36A !important;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 211, 106, 0.55) !important;
}

#slot-machine .slot-reels-frame {
  background: linear-gradient(180deg, #13070C 0%, #25100A 100%) !important;
  border-color: #7A4A22 !important;
}

#slot-machine .slot-reel {
  background: linear-gradient(180deg, #FFF6D6 0%, #F9DDA2 48%, #9B5A35 52%, #FFE7AC 100%) !important;
  border-color: #C79642 !important;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.32),
    inset 0 -5px 8px rgba(70,24,12,0.28) !important;
}

#slot-machine #gamble-progress-label,
#slot-machine #gamble-progress-reward {
  color: #F6C977 !important;
  opacity: 0.95 !important;
  text-shadow: 0 1px 0 #000 !important;
}

#slot-machine #gamble-progress-bar {
  background: #190B10 !important;
  border-color: #7A4A22 !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.75) !important;
}

#slot-machine #gamble-progress-fill {
  background: linear-gradient(90deg, #A73545 0%, #D88439 52%, #FFD36A 100%) !important;
  box-shadow: 0 0 8px rgba(255, 188, 80, 0.45) !important;
}

#slot-machine .slot-lever-btn {
  background: linear-gradient(180deg, #FFE08A 0%, #D88935 48%, #8A2B22 100%) !important;
  border-color: #F0B85A !important;
  color: #250A09 !important;
  box-shadow: 0 2px 0 #5C2318, inset 0 1px 0 rgba(255,255,255,0.45), 0 0 10px rgba(216, 137, 53, 0.22) !important;
}

#slot-machine .slot-lever-btn:hover {
  background: linear-gradient(180deg, #FFF0A8 0%, #F0A34A 50%, #A7352E 100%) !important;
}

/* ============================================================
   Mobile thermal mitigation: disable backdrop-filter on small
   viewports. The compositor-level Gaussian blurs are a known
   heavy GPU/thermal cost on iOS Safari, especially when many
   overlapping elements use it simultaneously (HUD, panels,
   modals, slot machine, etc.). Solid translucent backgrounds
   are visually similar but cost a fraction of the GPU work.
   ============================================================ */
@media (max-width: 899px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}