/* ═══════════════════════════════════════════════════════════
   NOMADS of the Multiverse — Style System
   Art Direction: Y2K internet nostalgia / neon HiFi glitch /
   90s comic book flare / fae portal as tech interface
   ═══════════════════════════════════════════════════════════ */

/* ── PALETTE ──
   Neon Chrome Garden: cool silver-blue structure + hot neon accents.
   Y2K energy meets Neopets/Flash lobby chrome. */
:root {
  /* ACCENTS — true neon, 100% saturation */
  --neon-red: #FF3B3B;
  --neon-red-glow: #FF1A1A;
  --neon-cyan: #00FFCC;
  --neon-green: #39FF14;
  --neon-magenta: #FF4DA6;
  --neon-gold: #FFD700;
  --neon-amber: #FF9500;
  --neon-orange: #FF6B2B;
  --neon-purple: #B44AFF;

  /* STRUCTURE — visible cool blue-gray chrome, NOT near-black */
  --deep-purple: #0E1B2E;
  --void-black: #080C14;
  --dark-chrome: #141E2C;
  --mid-chrome: #1C2A3C;
  --light-chrome: #2A3E54;

  /* TEXT — bright neutral */
  --text-primary: #D0D4DE;
  --text-bright: #F2F4F8;
  --text-dim: #7888A0;

  /* WINDOW CHROME — steel blue, visible borders */
  --window-border: #3A5068;
  --window-titlebar: #0C1824;
  --window-body-bg: rgba(12, 18, 28, 0.95);

  --scanline-opacity: 0.04;
  --grain-opacity: 0.025;
}

/* ── FONTS ── */
/* Bangers: comic book headers
   VT323: terminal/CRT system text
   Press Start 2P: pixel stats/labels
   Orbitron: tech UI elements
   Permanent Marker: handwritten/graffiti accents */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--void-black);
  color: var(--text-primary);
  font-family: 'VT323', monospace;
  font-size: 16px;
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="6" fill="none" stroke="%2300FFD4" stroke-width="2"/><circle cx="8" cy="8" r="1" fill="%2300FFD4"/></svg>') 8 8, crosshair;
}

/* ── CRT OVERLAY ── */
#crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
}

.film-grain {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  opacity: var(--grain-opacity);
  animation: grain 0.5s steps(6) infinite;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="1"/></svg>');
  background-size: 256px 256px;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  30% { transform: translate(3%, 2%); }
  50% { transform: translate(-1%, 4%); }
  70% { transform: translate(2%, -2%); }
  90% { transform: translate(-3%, 1%); }
}

/* ── UTILITY ── */
.hidden { display: none !important; }

/* ── LOADING SCREEN ── */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void-black);
  transition: opacity 0.6s ease-out;
}
#loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  width: min(80vw, 500px);
}

.loading-title {
  font-family: 'Bangers', cursive;
  font-size: clamp(48px, 10vw, 80px);
  color: var(--neon-red);
  letter-spacing: 6px;
  text-shadow: 0 0 20px var(--neon-red-glow), 0 0 60px rgba(255, 0, 64, 0.3);
  line-height: 1;
}

.loading-subtitle {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(12px, 2.5vw, 18px);
  color: var(--text-dim);
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 48px;
}

.loading-bar-track {
  width: 100%;
  height: 4px;
  background: var(--dark-chrome);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

.loading-bar-fill {
  width: 0%;
  height: 100%;
  background: var(--neon-cyan);
  border-radius: 2px;
  transition: width 0.15s ease-out;
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 20px rgba(0, 255, 204, 0.3);
}

.loading-status {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.loading-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 4px;
  animation: blink 1.2s step-end infinite;
}

.loading-percent {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 204, 0.4);
}

/* ── SCREENS ── */
.screen {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1;
}
.screen.active { display: flex; }
.overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}

/* ── SPLASH SCREEN ── */
#screen-splash {
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--void-black);
}

.splash-container {
  text-align: center;
  animation: fadeInUp 1s ease-out;
}

.splash-logo {
  max-width: min(80vw, 700px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(255, 45, 45, 0.5)) drop-shadow(0 0 60px rgba(255, 0, 64, 0.3));
  animation: logoPulse 3s ease-in-out infinite;
}

.splash-subtitle {
  font-family: 'Press Start 2P', cursive;
  font-size: 14px;
  color: var(--neon-cyan);
  margin-top: 30px;
  animation: blink 1.2s step-end infinite;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

.btn-start {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 48px;
  background: transparent;
  border: 2px solid var(--neon-red);
  color: var(--neon-red);
  font-family: 'Bangers', cursive;
  font-size: 28px;
  letter-spacing: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.15s;
  text-shadow: 0 0 10px var(--neon-red-glow);
  box-shadow: 0 0 15px rgba(255, 0, 64, 0.3), inset 0 0 15px rgba(255, 0, 64, 0.1);
}
.btn-start:hover {
  background: var(--neon-red);
  color: var(--void-black);
  box-shadow: 0 0 40px rgba(255, 0, 64, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.1);
  text-shadow: none;
}

.splash-version {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 20px;
}

/* ── WINDOW CHROME (Y2K OS) ── */
.window-chrome {
  border: 1px solid var(--window-border);
  border-radius: 2px;
  background: var(--window-body-bg);
  box-shadow:
    0 0 1px var(--window-border),
    0 4px 30px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 255, 204, 0.06);
  overflow: hidden;
}

.window-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: linear-gradient(90deg, var(--window-titlebar), var(--deep-purple), var(--deep-purple));
  border-bottom: 1px solid var(--window-border);
  user-select: none;
}

.window-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 8px var(--neon-cyan);
}

.title-icon { margin-right: 6px; }

.window-controls {
  display: flex;
  gap: 4px;
}

.win-btn {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border: 1px solid var(--window-border);
  background: var(--dark-chrome);
  color: var(--text-dim);
  cursor: pointer;
}
.win-btn.close:hover { background: var(--neon-red); color: #fff; }

.window-toolbar {
  display: flex;
  gap: 0;
  padding: 2px 4px;
  background: var(--dark-chrome);
  border-bottom: 1px solid var(--window-border);
}

.toolbar-item {
  padding: 2px 12px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  cursor: pointer;
}
.toolbar-item:hover { color: var(--text-bright); background: var(--mid-chrome); }

.window-body { padding: 16px; }

.window-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  background: var(--dark-chrome);
  border-top: 1px solid var(--window-border);
}

.status-text {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: var(--text-dim);
}

.status-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}
.status-indicator.online { animation: statusPulse 2s infinite; }

/* ── CHARACTER SELECT ── */
#screen-charselect {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--void-black);
}

#screen-charselect .window-chrome {
  width: min(95vw, 1100px);
  max-height: 90vh;
  overflow-y: auto;
}

.charselect-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.section-title {
  font-family: 'Bangers', cursive;
  font-size: 36px;
  color: var(--neon-red);
  letter-spacing: 4px;
  text-shadow: 0 0 20px var(--neon-red-glow), 3px 3px 0 var(--deep-purple);
}

.player-indicator {
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  color: var(--neon-gold);
  text-shadow: 0 0 10px var(--neon-gold);
}

.charselect-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}

/* Character grid */
.character-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
}

.char-card {
  position: relative;
  border: 2px solid var(--window-border);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--dark-chrome);
}

.char-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.8);
  transition: all 0.15s;
}

.char-card:hover img { filter: saturate(1.1) brightness(1.0); }
.char-card:hover { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 255, 212, 0.3); }

.char-card.selected {
  border-color: var(--neon-gold);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}
.char-card.selected img { filter: saturate(1.2) brightness(1.1); }

.char-card.taken {
  opacity: 0.3;
  pointer-events: none;
}
.char-card.taken::after {
  content: 'TAKEN';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  color: var(--neon-red);
  background: rgba(0, 0, 0, 0.7);
}

.char-card-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  font-family: 'Bangers', cursive;
  font-size: 14px;
  color: var(--text-bright);
  text-shadow: 1px 1px 0 #000;
}

/* Detail panel */
.character-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-portrait-frame {
  aspect-ratio: 3/4;
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 212, 0.2);
  overflow: hidden;
  background: var(--dark-chrome);
}

.detail-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-name {
  font-family: 'Permanent Marker', cursive;
  font-size: 28px;
  color: var(--neon-gold);
  text-shadow: 0 0 15px var(--neon-gold), 2px 2px 0 var(--deep-purple);
}

.detail-description {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 1.3;
}

.detail-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-row {
  display: grid;
  grid-template-columns: 70px 40px 1fr;
  align-items: center;
  gap: 8px;
}

.stat-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 9px;
  text-transform: uppercase;
}
.stat-label.speed { color: var(--neon-cyan); }
.stat-label.wit { color: var(--neon-purple); }
.stat-label.force { color: var(--neon-red); }
.stat-label.jazz { color: var(--neon-gold); }

.stat-die {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.stat-bar-track {
  height: 8px;
  background: var(--dark-chrome);
  border: 1px solid var(--window-border);
  border-radius: 1px;
  overflow: hidden;
}

.stat-bar-fill {
  height: 100%;
  transition: width 0.3s;
}
.stat-bar-fill.speed { background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); }
.stat-bar-fill.wit { background: var(--neon-purple); box-shadow: 0 0 6px var(--neon-purple); }
.stat-bar-fill.force { background: var(--neon-red); box-shadow: 0 0 6px var(--neon-red); }
.stat-bar-fill.jazz { background: var(--neon-gold); box-shadow: 0 0 6px var(--neon-gold); }

.btn-confirm {
  padding: 12px 32px;
  background: transparent;
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  font-family: 'Bangers', cursive;
  font-size: 22px;
  letter-spacing: 3px;
  cursor: pointer;
  text-shadow: 0 0 10px var(--neon-green);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
  transition: all 0.15s;
}
.btn-confirm:hover:not(:disabled) {
  background: var(--neon-green);
  color: var(--void-black);
  text-shadow: none;
}
.btn-confirm:disabled {
  border-color: var(--window-border);
  color: var(--text-dim);
  text-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

/* Selected characters bar */
.selected-bar {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--window-border);
}

.selected-slot {
  flex: 1;
  height: 60px;
  border: 2px dashed var(--window-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: var(--dark-chrome);
}

.selected-slot.filled {
  border-style: solid;
  border-color: var(--neon-green);
}

.selected-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-label {
  position: absolute;
  top: 2px;
  left: 4px;
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: var(--text-dim);
  z-index: 1;
  text-shadow: 0 0 4px #000;
}

/* ── GAME BOARD ── */
#screen-game { background: var(--void-black); }

#board-canvas-container {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.game-hud {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.game-hud > * { pointer-events: auto; }

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

.hud-round {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
  letter-spacing: 3px;
}

.hud-turn {
  font-family: 'Bangers', cursive;
  font-size: 22px;
  color: var(--neon-gold);
  text-shadow: 0 0 15px var(--neon-gold), 2px 2px 0 rgba(0, 0, 0, 0.8);
}

.hud-players {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.player-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(12, 18, 28, 0.85);
  border: 1px solid var(--window-border);
  border-left: 3px solid var(--neon-cyan);
  min-width: 180px;
}

.player-strip.active { border-color: var(--neon-gold); background: rgba(255, 215, 0, 0.05); }

.player-strip-portrait {
  width: 36px; height: 36px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid var(--window-border);
}

.player-strip-info {
  flex: 1;
}

.player-strip-name {
  font-family: 'Bangers', cursive;
  font-size: 16px;
  color: var(--text-bright);
}

.player-strip-score {
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: var(--neon-green);
}

.hud-actions {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
}

.btn-action {
  padding: 16px 48px;
  background: rgba(12, 18, 28, 0.9);
  border: 2px solid var(--neon-red);
  color: var(--neon-red);
  font-family: 'Bangers', cursive;
  font-size: 32px;
  letter-spacing: 4px;
  cursor: pointer;
  text-shadow: 0 0 15px var(--neon-red-glow);
  box-shadow: 0 0 20px rgba(255, 0, 64, 0.3);
  transition: all 0.15s;
  animation: actionPulse 2s ease-in-out infinite;
}
.btn-action:hover {
  background: var(--neon-red);
  color: var(--void-black);
  text-shadow: none;
}

.hud-log-container {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 320px;
}

.window-chrome.mini .window-titlebar { padding: 2px 6px; }
.window-chrome.mini .window-body { padding: 8px; max-height: 120px; overflow-y: auto; }

.game-log {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.4;
}

.log-entry { margin-bottom: 2px; }
.log-entry .log-highlight { color: var(--neon-cyan); }

/* ── ENCOUNTER ── */
.encounter-window {
  width: min(90vw, 600px);
  max-height: 80vh;
  overflow-y: auto;
}

.encounter-narrative {
  font-family: 'VT323', monospace;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: normal;
  margin-bottom: 20px;
  padding: 12px;
  border-left: 3px solid var(--neon-purple);
  background: rgba(0, 255, 204, 0.04);
}

.encounter-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.choice-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: rgba(12, 18, 28, 0.8);
  border: 1px solid var(--window-border);
  color: var(--text-primary);
  font-family: 'VT323', monospace;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.12s;
}

.choice-btn:hover {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 255, 212, 0.05);
  padding-left: 24px;
}

.choice-stat-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-family: 'Press Start 2P', cursive;
  font-size: 7px;
  border-radius: 1px;
  vertical-align: middle;
}
.choice-stat-tag.wit { background: var(--neon-purple); color: #000; }
.choice-stat-tag.force { background: var(--neon-red); color: #000; }
.choice-stat-tag.jazz { background: var(--neon-gold); color: #000; }
.choice-stat-tag.speed { background: var(--neon-cyan); color: #000; }

.encounter-result {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--neon-green);
  background: rgba(57, 255, 20, 0.05);
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.4;
  color: var(--text-primary);
  white-space: pre-line;
}

.encounter-result.failure { border-color: var(--neon-red); background: rgba(255, 0, 64, 0.05); }

.encounter-result .roll-result {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  display: block;
  margin-bottom: 8px;
}

/* ── NOMAD MEET SPLASH ── */
.nomad-meet-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: meetEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.meet-text-container {
  text-align: center;
}

.meet-text-line {
  font-family: 'Bangers', cursive;
  text-transform: uppercase;
  line-height: 0.85;
}

.meet-text-nomad {
  font-size: clamp(80px, 20vw, 200px);
  color: var(--neon-red);
  text-shadow:
    0 0 40px var(--neon-red-glow),
    0 0 80px var(--neon-red-glow),
    6px 6px 0 var(--deep-purple),
    -3px -3px 0 var(--neon-magenta);
  animation: textGlitch 3s infinite;
}

.meet-text-meet {
  font-size: clamp(100px, 25vw, 260px);
  color: var(--neon-gold);
  text-shadow:
    0 0 40px var(--neon-amber),
    0 0 80px var(--neon-amber),
    6px 6px 0 var(--deep-purple),
    -3px -3px 0 var(--neon-orange);
  animation: textGlitch 3s 0.15s infinite;
}

.meet-subtitle {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(24px, 5vw, 48px);
  color: var(--neon-cyan);
  text-shadow: 0 0 20px var(--neon-cyan);
  margin-top: 20px;
  animation: fadeInUp 0.8s 0.4s both;
}

/* ── BIG PAELLA ── */
#screen-paella {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, var(--deep-purple), var(--void-black));
}

.paella-layout {
  width: min(95vw, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.paella-title {
  font-family: 'Permanent Marker', cursive;
  font-size: 48px;
  color: var(--neon-orange);
  text-shadow: 0 0 20px var(--neon-orange), 3px 3px 0 var(--deep-purple);
  text-align: center;
}

.paella-turn-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#paella-player-name {
  font-family: 'Bangers', cursive;
  font-size: 24px;
  color: var(--neon-cyan);
}

.paella-timer {
  font-family: 'Press Start 2P', cursive;
  font-size: 24px;
  color: var(--neon-red);
  text-shadow: 0 0 10px var(--neon-red-glow);
  animation: timerPulse 1s infinite;
}

.paella-pot-area {
  display: flex;
  align-items: center;
  gap: 30px;
}

.paella-pot {
  width: 250px;
  height: 200px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 165, 0, 0.15), transparent 70%),
    linear-gradient(to bottom, var(--mid-chrome), var(--dark-chrome));
  border: 3px solid var(--neon-amber);
  border-radius: 0 0 40% 40%;
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}

.pot-contents {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  gap: 4px;
}

.pot-item {
  font-size: 24px;
  animation: potBubble 2s ease-in-out infinite;
}

#paella-pie {
  border: 2px solid var(--window-border);
  background: var(--dark-chrome);
  border-radius: 50%;
}

.paella-hand {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.item-card {
  width: 120px;
  padding: 12px;
  background: rgba(12, 18, 28, 0.9);
  border: 2px solid var(--window-border);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.item-card:hover { border-color: var(--neon-cyan); transform: translateY(-4px); }
.item-card.cant-throw { opacity: 0.4; cursor: not-allowed; border-color: var(--neon-red); }
.item-card.cant-throw:hover { transform: none; border-color: var(--neon-red); }

.item-emoji { font-size: 36px; }
.item-name {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-primary);
  margin-top: 4px;
}

.item-preference {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  margin-top: 4px;
}
.item-preference.like { color: var(--neon-green); }
.item-preference.dislike { color: var(--neon-red); }
.item-preference.garbage { color: var(--neon-red); }
.item-preference.unknown { color: var(--text-dim); }
.item-preference.warning { color: var(--neon-orange); }
.item-preference.mixed { color: var(--neon-gold); }
.item-preference.neutral { color: var(--text-dim); }

.paella-garbage-meter {
  width: 100%;
  max-width: 400px;
}

.garbage-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 9px;
  color: var(--neon-red);
  margin-bottom: 4px;
}

.garbage-bar {
  height: 12px;
  background: var(--dark-chrome);
  border: 1px solid var(--window-border);
}

.garbage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-orange), var(--neon-red));
  box-shadow: 0 0 8px var(--neon-red);
  transition: width 0.3s;
  width: 0%;
}

/* ── RESULTS ── */
#screen-results {
  align-items: center;
  justify-content: center;
  background: var(--void-black);
}

.results-title {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: var(--neon-gold);
  text-shadow: 0 0 30px var(--neon-gold), 4px 4px 0 var(--deep-purple);
  margin-bottom: 30px;
}

/* ── ANIMATIONS ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(255, 45, 45, 0.5)) drop-shadow(0 0 60px rgba(255, 0, 64, 0.3)); }
  50% { filter: drop-shadow(0 0 40px rgba(255, 45, 45, 0.7)) drop-shadow(0 0 80px rgba(255, 0, 64, 0.4)); }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes actionPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 0, 64, 0.3); }
  50% { box-shadow: 0 0 35px rgba(255, 0, 64, 0.5); }
}

@keyframes textGlitch {
  0%, 95%, 100% { transform: translate(0); }
  96% { transform: translate(-4px, 2px); }
  97% { transform: translate(4px, -2px); }
  98% { transform: translate(-2px, -1px); }
  99% { transform: translate(2px, 1px); }
}

@keyframes meetEnter {
  from { transform: scale(3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

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

/* ── INSTRUCTIONS OVERLAY ── */
.instructions-window {
  max-width: 560px;
  width: 90%;
}
.instructions-body {
  padding: 24px;
}
.instructions-intro {
  font-family: 'VT323', monospace;
  font-size: 1.2em;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.4;
}
.instructions-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.instructions-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.instructions-stat-desc {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--text-dim);
}
.instructions-text {
  font-family: 'VT323', monospace;
  font-size: 1.1em;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.4;
}
.instructions-text strong {
  color: var(--neon-orange);
}
.instructions-begin {
  width: 100%;
}

/* ── ROUND TRANSITION ── */
.round-transition-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: roundTransitionEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.round-transition-text {
  font-family: 'Bangers', cursive;
  font-size: clamp(60px, 15vw, 160px);
  color: var(--neon-cyan);
  text-shadow:
    0 0 40px var(--neon-cyan),
    0 0 80px rgba(0, 255, 212, 0.4),
    4px 4px 0 var(--deep-purple);
  text-transform: uppercase;
  letter-spacing: 8px;
}
.round-transition-subtitle {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(18px, 4vw, 36px);
  color: var(--neon-gold);
  text-shadow: 0 0 15px var(--neon-gold);
  margin-top: 16px;
  animation: fadeInUp 0.8s 0.3s both;
}
@keyframes roundTransitionEnter {
  from { transform: scale(2.5) rotate(-5deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── BEDTIME STORY SCREEN ── */
#screen-story {
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, var(--deep-purple), var(--void-black));
}
.story-container {
  width: min(90vw, 700px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.story-tagline {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  color: var(--neon-cyan);
  text-align: center;
  letter-spacing: 2px;
  text-shadow: 0 0 10px var(--neon-cyan);
}
.story-title {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  color: var(--neon-gold);
  text-shadow: 0 0 30px var(--neon-gold), 4px 4px 0 var(--deep-purple);
}
.story-scroll {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 55vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.4);
  padding: 24px;
  border: 1px solid var(--light-chrome);
  border-radius: 2px;
  width: 100%;
}
.story-scroll strong, .story-scroll b {
  color: var(--neon-gold);
}
.story-restart {
  margin-top: 8px;
}

/* ── RESULTS SCREEN ENHANCEMENT ── */
.results-container {
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.results-content {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}
.results-scores {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
.results-score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 16px;
  border: 1px solid var(--window-border);
  border-radius: 2px;
}
.results-score-row img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
}
.results-score-row-portrait {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
  border: 2px solid var(--window-border);
}
.results-score-info {
  flex: 1;
}
.results-score-name {
  font-family: 'Bangers', cursive;
  font-size: 18px;
}
.results-score-value {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--text-primary);
}
.winner-banner {
  text-align: center;
  padding: 20px;
  margin-top: 16px;
  border: 2px solid var(--neon-gold);
  background: rgba(255, 215, 0, 0.05);
  animation: winnerPulse 2s ease-in-out infinite;
}
.winner-banner-title {
  font-family: 'Bangers', cursive;
  font-size: 36px;
  color: var(--neon-gold);
  letter-spacing: 3px;
  text-shadow: 0 0 20px var(--neon-gold);
}
.winner-banner-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  margin-top: 8px;
}
.paella-god-banner {
  border-color: var(--neon-magenta);
  background: linear-gradient(135deg, rgba(255, 20, 147, 0.08), rgba(255, 215, 0, 0.08));
}
.paella-god-banner .winner-banner-title {
  color: var(--neon-magenta);
  text-shadow: 0 0 20px var(--neon-magenta), 0 0 40px var(--neon-gold);
}
@keyframes winnerPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.15); }
  50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); }
}

/* ── CONVEYOR BELT ── */
.conveyor-track {
  width: 100%;
  max-width: 600px;
  position: relative;
  padding: 8px 0;
}
.conveyor-belt-visual {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--neon-amber) 0px,
    var(--neon-amber) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 20px 4px;
  animation: conveyorMove 1s linear infinite;
  opacity: 0.5;
}
.conveyor-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 2px;
}
@keyframes conveyorMove {
  from { background-position: 0 0; }
  to { background-position: 20px 0; }
}
.paella-timer-bar {
  width: 100%;
  height: 6px;
  background: var(--dark-chrome);
  border: 1px solid var(--window-border);
  margin-top: 8px;
}
.paella-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green));
  transition: width 0.1s linear;
  width: 100%;
}
.paella-timer-fill.warning {
  background: linear-gradient(90deg, var(--neon-orange), var(--neon-red));
}

/* ── ITEM CARD STATES ── */
.item-card.flying {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--neon-cyan);
  animation: itemFly 0.6s ease-in-out;
}
.item-card.empty {
  opacity: 0.3;
  border-style: dashed;
}
@keyframes itemFly {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(0.8); opacity: 0.3; }
  100% { transform: translateY(0) scale(1); opacity: 0.5; }
}

/* ── THROW PULSE ANIMATION ── */
@keyframes throwPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── STAT PICKER ── */
.stat-picker-label {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--neon-cyan);
  margin-bottom: 12px;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark-chrome); }
::-webkit-scrollbar-thumb { background: var(--mid-chrome); border: 1px solid var(--window-border); }
::-webkit-scrollbar-thumb:hover { background: var(--light-chrome); }

/* ── WELCOME OVERLAY ── */
.welcome-window {
  max-width: 520px;
  width: 90%;
}
.welcome-body {
  padding: 24px;
}
.welcome-body p {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.welcome-body p:last-of-type {
  margin-bottom: 20px;
  color: var(--neon-cyan);
}
.welcome-desktop-note {
  font-size: 15px !important;
  opacity: 0.7;
  font-style: italic;
}
.welcome-icon-highlight {
  color: var(--neon-gold);
  font-size: 20px;
}
.welcome-btn {
  width: 100%;
}

/* ── ENCOUNTER ART ── */
.encounter-art {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
  border: 2px solid var(--neon-cyan);
  border-radius: 2px;
  background: var(--dark-chrome);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

/* ── DICE ROLL OVERLAY ── */
.dice-animation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dice-rolling-number {
  font-family: 'Bangers', cursive;
  font-size: 120px;
  color: var(--neon-red);
  text-shadow:
    0 0 40px var(--neon-red-glow),
    0 0 80px var(--neon-red-glow),
    4px 4px 0 var(--deep-purple);
  letter-spacing: 8px;
  transition: color 0.2s;
}
.dice-rolling-number.dice-pop {
  color: var(--neon-gold);
  text-shadow:
    0 0 40px var(--neon-amber),
    0 0 80px var(--neon-amber),
    4px 4px 0 var(--deep-purple);
  animation: dicePop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dice-result-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 14px;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px var(--neon-cyan);
  margin-top: 12px;
  letter-spacing: 3px;
}
@keyframes dicePop {
  0% { transform: scale(1.8); opacity: 0.5; }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── CURRENT TURN PORTRAIT ── */
.hud-current-turn-portrait {
  position: absolute;
  left: 12px;
  bottom: 20px;
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(12, 18, 28, 0.85);
  border: 2px solid var(--window-border);
  border-radius: 2px;
  padding: 6px;
  z-index: 2;
}
.hud-current-turn-portrait img {
  width: 168px;
  height: 218px;
  object-fit: cover;
  border: 2px solid var(--neon-cyan);
  border-radius: 2px;
  image-rendering: auto;
}
.hud-portrait-name {
  font-family: 'Bangers', cursive;
  font-size: 20px;
  color: var(--neon-gold);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  margin-top: 4px;
  text-align: center;
  letter-spacing: 1px;
}


/* ── DICE 3D ACTIVE (hides rolling number during 3D dice) ── */
.dice-3d-active .dice-rolling-number { display: none; }
.overlay.dice-3d-active {
  background: rgba(0, 0, 0, 0.15);
}

/* ── ENCOUNTER ART ROW ── */
.encounter-art-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 0 12px;
}
#encounter-player-art {
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
  border: 2px solid var(--neon-cyan);
  border-radius: 2px;
  background: var(--dark-chrome);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

/* ── DISCARD BUTTON ── */
.item-discard-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--neon-orange);
  color: var(--neon-orange);
  font-family: 'Press Start 2P', cursive;
  font-size: 7px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.item-discard-btn:hover {
  background: var(--neon-orange);
  color: var(--void-black);
}

/* ── FOOD FLYER (projectile arc animation) ── */
.food-flyer {
  position: fixed;
  font-size: 28px;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.6));
}

/* ── WINNER FANFARE OVERLAY ── */
.winner-fanfare {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  animation: fanfareEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fanfare-portrait {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border: 4px solid var(--neon-gold);
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
  image-rendering: auto;
}
.fanfare-title {
  font-family: 'Bangers', cursive;
  font-size: 52px;
  color: var(--neon-gold);
  text-shadow: 0 0 30px var(--neon-gold), 0 0 60px var(--neon-amber), 4px 4px 0 var(--deep-purple);
  margin-top: 20px;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.fanfare-name {
  font-family: 'Permanent Marker', cursive;
  font-size: 36px;
  margin-top: 8px;
}
.fanfare-idol {
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
  margin-top: 16px;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
  animation: fanfareIdolPulse 1.5s ease-in-out infinite;
}
.fanfare-idol-label {
  font-family: 'Press Start 2P', cursive;
  font-size: 12px;
  color: var(--neon-amber);
  margin-top: 8px;
  letter-spacing: 2px;
}
@keyframes fanfareEnter {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes fanfareIdolPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.8)); }
}

/* ── PAELLA GOD ENDING OVERLAY ── */
.paella-god-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(255, 170, 0, 0.15), rgba(0, 0, 0, 0.95));
  animation: godOverlayEnter 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.god-image-container {
  position: relative;
  margin-bottom: 20px;
}
.god-aura {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3), transparent 70%);
  animation: godAuraPulse 2s ease-in-out infinite;
}
.god-image {
  width: 256px;
  height: 256px;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.6));
}
.god-title {
  font-family: 'Bangers', cursive;
  font-size: 60px;
  color: var(--neon-gold);
  text-shadow:
    0 0 40px var(--neon-gold),
    0 0 80px var(--neon-amber),
    0 0 120px rgba(255, 100, 0, 0.4),
    4px 4px 0 var(--deep-purple);
  text-transform: uppercase;
  letter-spacing: 8px;
  margin-bottom: 12px;
}
.god-winner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.god-winner-portrait {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border: 3px solid var(--neon-gold);
  border-radius: 2px;
}
.god-winner-name {
  font-family: 'Permanent Marker', cursive;
  font-size: 32px;
  color: var(--neon-gold);
}
.god-idol-row {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}
.god-idol-row img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}
.god-narrative {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--text-primary);
  max-width: 500px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 24px;
}
.god-continue-btn {
  padding: 16px 48px;
  background: transparent;
  border: 2px solid var(--neon-gold);
  color: var(--neon-gold);
  font-family: 'Bangers', cursive;
  font-size: 24px;
  letter-spacing: 3px;
  cursor: pointer;
  text-shadow: 0 0 10px var(--neon-gold);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  transition: all 0.15s;
}
.god-continue-btn:hover {
  background: var(--neon-gold);
  color: var(--void-black);
  text-shadow: none;
}
@keyframes godOverlayEnter {
  from { transform: scale(1.5) rotate(5deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes godAuraPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ── PAELLA HANDOFF OVERLAY ── */
#paella-handoff-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.handoff-content {
  text-align: center;
}
.handoff-label {
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: var(--text-dim);
  letter-spacing: 4px;
  margin-bottom: 12px;
}
.handoff-name {
  font-family: 'Bangers', cursive;
  font-size: 48px;
  text-shadow: 0 0 20px currentColor;
  letter-spacing: 3px;
}

/* ── POT RUINED OVERLAY ── */
#paella-pot-ruined {
  position: absolute;
  inset: 0;
  background: rgba(20, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: potRuinedFlash 0.3s ease-out;
}
.pot-ruined-content { text-align: center; }
.pot-ruined-icon { font-size: 64px; margin-bottom: 12px; }
.pot-ruined-title {
  font-family: 'Bangers', cursive;
  font-size: 36px;
  color: var(--neon-red);
  text-shadow: 0 0 20px var(--neon-red-glow);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.pot-ruined-subtitle {
  font-family: 'VT323', monospace;
  font-size: 20px;
  color: var(--text-dim);
}
@keyframes potRuinedFlash {
  0% { background: rgba(255, 0, 0, 0.4); }
  100% { background: rgba(20, 0, 0, 0.9); }
}