/* ===== CORE VARIABLES (Amber Phosphor) ===== */ 
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); 
:root { 
  --term-green: #ffb000; /* Warm, rich amber */ 
  --term-dim: #805800;   /* Grounded amber shadow */ 
  --term-bg: #1a1100;    /* Unlit phosphor screen (not pure black) */ 
  --term-alert: #ff4400; /* Washed-out critical red */ 
  --term-rare: #00e5ff;  /* Cyan pops beautifully against amber */ 
  --term-uncommon: #88cc00; /* Lime-green for uncommon items */ 
  /* CRT Optics */ 
  --scanline-opacity: 0.06; /* Subtler scanlines to avoid muddying text */ 
  --glow: 0 0 1px var(--term-green), 0 0 2px var(--term-dim); /* Tighter, cleaner halation */
  /* Atmospheric / Physical Greebles */
  --crt-curve: inset 0 0 50px rgba(0,0,0,0.6); /* ⚡ BALANCED: Reduced inset/opacity to prevent top-left darkness */
  --vignette: radial-gradient(circle at center, transparent 55%, rgba(0,0,0,0.7) 100%);
  --phosphor-bleed: 0.3px 0.3px 0.8px rgba(0, 0, 0, 0.7), 0 0 2px var(--term-green); 
  --panel-border: #402c00; 
  --rivet-color: #261a00; 
  --warning-yellow: #ffcc00; 
  /* Typography */ 
  --stencil-font: 'VT323', monospace; 
} 
/* ===== BASE RESET & TYPOGRAPHY ===== */ 
* { box-sizing: border-box; margin: 0; padding: 0; } 
body { 
  background-color: var(--term-bg); 
  color: var(--term-green); 
  font-family: var(--stencil-font); 
  font-size: clamp(1rem, 1.2vw, 1.5rem); /* ⚡ FLUID: Scales naturally without breaking layout */ 
  line-height: 1.2; /* ⚡ TIGHTER: Matches CRT terminal density */ 
  text-shadow: var(--phosphor-bleed); 
  letter-spacing: 1px; 
  overflow: hidden; 
  height: 100vh; 
  width: 100vw; 
} 
/* ⚡ GREEBLE: Global CRT curvature overlay */ 
body::after { 
  content: ''; 
  position: fixed; 
  top: 0; left: 0; width: 100%; height: 100%; 
  background: var(--crt-curve); 
  pointer-events: none; 
  z-index: 9998; 
  mix-blend-mode: multiply; 
} 
/* ===== SPLASH SCREEN ===== */ 
#splash-screen { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: var(--term-bg); z-index: 10000; 
  display: flex; flex-direction: column; align-items: center; justify-content: center; 
  transition: opacity 0.5s ease; 
  /* ⚡ GREEBLE: Panel border and rivets */ 
  border: 4px solid var(--panel-border); 
  box-shadow: 
    inset 0 0 20px rgba(0,0,0,0.8), 
    0 0 15px rgba(255, 176, 0, 0.2); 
} 
/* ⚡ GREEBLE: Corner rivets on splash */ 
#splash-screen::before, 
#splash-screen::after { 
  content: '⊕'; 
  position: absolute; 
  color: var(--rivet-color); 
  font-size: 1.5rem; 
  text-shadow: none; 
} 
#splash-screen::before { top: 10px; left: 10px; } 
#splash-screen::after { top: 10px; right: 10px; } 
.splash-art {
  font-size: 1.2rem; text-align: center; margin-bottom: 2rem;
  text-shadow: 0 0 6px var(--term-green), 0 0 12px var(--term-green);
  animation: text-flicker 3s infinite;
  /* ⚡ GREEBLE: Slight phosphor burn-in effect */
  filter: blur(0.3px) contrast(1.1);
  max-width: 100%;
  overflow-x: auto;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 640px;
  padding: 0 1.5rem;
  text-align: center;
}
/* ⚡ SPLASH BUTTONS: Crisp mechanical toggle switches */
.splash-btn {
  background: transparent;
  border: 2px solid var(--term-dim);
  color: var(--term-green);
  font-family: var(--stencil-font);
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
  border-radius: 3px;
  text-shadow: 0 0 4px var(--term-green);
}
.splash-btn:hover {
  border-color: var(--term-green);
  box-shadow: 0 0 8px var(--term-green), inset 0 0 6px rgba(255, 176, 0, 0.2);
  background: rgba(255, 176, 0, 0.08);
  text-shadow: 0 0 8px var(--term-green);
}
.splash-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.3);
}
/* 🔊 VOLUME TOGGLE BOXES — 3-state terminal switches */
.vol-box {
  background: transparent;
  border: 2px solid var(--term-dim);
  color: var(--term-dim);
  font-family: var(--stencil-font);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  border-radius: 2px;
  outline: none;
}
.vol-box:hover {
  border-color: var(--term-green);
  color: var(--term-green);
  box-shadow: 0 0 6px rgba(255,176,0,0.15), inset 0 0 4px rgba(255,176,0,0.1);
}
.vol-box.active {
  background: rgba(255,176,0,0.12);
  border-color: #ffb000;
  color: #ffb000;
  box-shadow: 0 0 10px rgba(255,176,0,0.3), inset 0 0 6px rgba(255,176,0,0.15);
  text-shadow: 0 0 6px rgba(255,176,0,0.5);
}
/* ⚡ SPLASH SUB-TEXT: Primary instruction, clearly legible */
.splash-subtext {
  font-size: 1.4rem;
  color: var(--term-dim);
  font-family: var(--stencil-font);
  letter-spacing: 1px;
}
/* ⚡ SPLASH CREDITS: System alert red, 3/4 scale of primary buttons */
.splash-credits {
  color: var(--term-alert);
  font-size: 0.75rem;
  text-decoration: none;
  letter-spacing: 2px;
  border: 2px solid var(--term-alert);
  padding: 0.55rem 0.9rem;
  transition: all 0.2s;
  font-family: var(--stencil-font);
}
.splash-credits:hover {
  color: var(--term-alert);
  border-color: var(--term-alert);
  text-shadow: 0 0 6px var(--term-alert);
  box-shadow: 0 0 10px var(--term-alert), inset 0 0 8px rgba(255, 68, 0, 0.15);
}
/* ⚡ SPLASH COPYRIGHT LINE */
.splash-copyright {
  font-size: 1rem;
  color: var(--term-dim);
  letter-spacing: 2px;
  opacity: 0.6;
  text-transform: uppercase;
  font-family: var(--stencil-font);
} 

.small-text { 
  font-size: 0.8rem; 
  color: var(--term-dim); 
  /* ⚡ GREEBLE: Serial number stencil */ 
  font-family: var(--stencil-font); 
  letter-spacing: 1px; 
} 
@keyframes blinker { 50% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } } 
@keyframes text-flicker { 
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 
  20%, 24%, 55% { opacity: 0.4; } 
} 
/* ===== CRT SCANLINE OVERLAY ===== */ 
.scanlines { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  background: repeating-linear-gradient( 
    to bottom, 
    transparent 0px, 
    transparent 2px, 
    rgba(0, 0, 0, var(--scanline-opacity)) 2px, 
    rgba(0, 0, 0, var(--scanline-opacity)) 4px 
  ); 
  pointer-events: none; z-index: 9999; 
  animation: scanline-scroll 10s linear infinite; 
  /* ⚡ GREEBLE: Add horizontal interference lines */ 
  background-image: 
    repeating-linear-gradient( 
      to bottom, 
      transparent 0px, 
      transparent 2px, 
      rgba(0, 0, 0, var(--scanline-opacity)) 2px, 
      rgba(0, 0, 0, var(--scanline-opacity)) 4px 
    ), 
    repeating-linear-gradient( 
      to right, 
      transparent 0px, 
      transparent 100px, 
      rgba(255, 176, 0, 0.03) 100px, 
      rgba(255, 176, 0, 0.03) 101px 
    ); 
} 
@keyframes scanline-scroll { 0% { background-position: 0 0; } 100% { background-position: 0 100vh; } } 
/* ===== MAIN LAYOUT ===== */ 
.terminal-container { 
  display: grid; 
  grid-template-columns: 3fr 1fr; 
  grid-template-rows: auto 1fr; 
  grid-template-areas: "top top " "main sidebar "; 
  height: 100vh; padding: 1rem; gap: 1rem; transition: opacity 0.5s ease; 
  /* ⚡ GREEBLE: Worn panel frame */ 
  border: 3px solid var(--panel-border); 
  border-radius: 4px; 
  box-shadow: 
    inset 0 0 30px rgba(0,0,0,0.9), 
    0 0 20px rgba(0,0,0,0.5); 
  position: relative; 
} 
/* ⚡ GREEBLE: Panel wear and tear overlay */ 
.terminal-container::before { 
  content: ''; 
  position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; 
  background: 
    radial-gradient(circle at 20% 30%, transparent 2px, rgba(0,0,0,0.3) 2px, transparent 3px), 
    radial-gradient(circle at 80% 70%, transparent 2px, rgba(0,0,0,0.3) 2px, transparent 3px); 
  background-size: 50px 50px; 
  pointer-events: none; 
  z-index: 1; 
  opacity: 0.5; 
} 
.top-bar { 
  grid-area: top; display: grid; grid-template-columns: auto 1fr; 
  align-items: stretch; gap: 1rem; padding: 0.75rem 1.25rem; 
  border: 1px solid var(--term-dim); border-bottom: 2px solid var(--panel-border);
  background: rgba(26, 17, 0, 0.85);
  position: relative; 
  z-index: 20;
} 
/* ⚡ GREEBLE: Warning label on top bar */ 
.top-bar::after { 
  content: '⚠ AUTHORIZED PERSONNEL ONLY'; 
  position: absolute; 
  bottom: -12px; 
  right: 15px; 
  font-size: 0.6rem; 
  color: var(--warning-yellow); 
  background: var(--term-bg); 
  padding: 0 8px; 
  letter-spacing: 1px; 
  text-shadow: 0 0 3px var(--warning-yellow); 
} 
/* ===== COMMANDER CLUSTER ===== */
.commander-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
}
.commander-avatar { 
  flex: 8 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(3.5rem, 5vw, 5rem); 
  line-height: 0.75; 
  letter-spacing: -0.5px; 
  color: var(--term-green);
  text-shadow: 0 0 4px var(--term-green);
  animation: phosphor-pulse 3s steps(2) infinite;
  filter: drop-shadow(0 0 2px var(--term-dim));
  white-space: pre; 
  z-index: 21;
  position: relative;
} 
.commander-avatar::after { 
  content: ''; 
  position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; 
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 45%, transparent 50%); 
  pointer-events: none; 
} 
@keyframes phosphor-pulse { 
  0%, 100% { opacity: 1; } 
  50% { opacity: 0.85; } 
} 
.commander-hp { 
  flex: 2 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; 
  font-size: 0.75rem; font-weight: bold; 
  color: var(--term-dim); letter-spacing: 1px;
  z-index: 21;
  position: relative;
} 
.hp-bar { 
  width: 160px; height: 16px;
  border: 1px solid var(--term-dim);
  background: #000; 
  background-image: repeating-linear-gradient( 
    to right, 
    transparent 0px, 
    transparent 15px, 
    rgba(0,0,0,0.5) 15px, 
    rgba(0,0,0,0.5) 17px 
  ); 
  position: relative;
} 
.hp-fill { 
  height: 100%; 
  background: var(--term-green); 
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  box-shadow: 0 0 4px var(--term-green);
  position: relative;
} 
.hp-bar.damage-flash .hp-fill { 
  background: var(--term-alert); 
  animation: damage-pulse 0.3s; 
  box-shadow: 0 0 8px var(--term-alert); 
} 
.player-hp.shattered, .commander-hp.shattered {
  animation: hp-shatter 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes hp-shatter {
  0% { opacity: 1; filter: blur(0); }
  50% { opacity: 0.4; filter: blur(2px); transform: scale(1.02); }
  100% { opacity: 0; filter: blur(4px); transform: scale(0.95); }
} 

/* ===== COMMS FEED (Single container, single border) ===== */
.comms-feed {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  justify-content: center;
  border: 1px solid var(--term-dim);
  background: rgba(0, 0, 0, 0.4);
  min-height: 0;
}
.comms-header {
  font-size: 0.8rem;
  color: var(--term-dim);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid rgba(255, 176, 0, 0.2);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.comms-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Commander Voice: primary, bright, typewriter cursor */
.speech-line {
  font-size: 1.6rem;
  color: var(--term-green);
  line-height: 1.3;
  min-height: 1.2em;
  text-shadow: 0 0 3px var(--term-green);
}
.speech-line.typewriter-active .speech-text::after {
  content: '█';
  animation: blinker 0.8s step-end infinite;
  margin-left: 2px;
}

/* System Transmission: secondary, dim, static, no-wrap terminal CLI */
.transmission-line {
  font-size: 1.4rem;
  color: var(--term-dim);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

/* ===== MAIN DISPLAY - PHYSICAL GREEBLES ===== */ 
.main-display {
  grid-area: main; min-height: 0; border: 2px solid var(--term-dim); padding: 1.5rem;
  position: relative; overflow: hidden; background: rgba(26, 17, 0, 0.7);
  /* ⚡ GREEBLE: Inner panel frame */
  border: 2px solid var(--panel-border);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
  border-radius: 4px;
}
/* ⚡ PHYSICAL GREEBLE: Property tag & Radiation marker (replaces corner brackets for cleaner terminal look) */ 
.main-display::before { 
  content: "PROPERTY OF CHESS CLUB MEDIA // REV 0.29"; 
  position: absolute; 
  top: 8px; 
  left: 12px; 
  font-size: 0.55rem; 
  opacity: 0.35; 
  pointer-events: none; 
  z-index: 10; 
  letter-spacing: 0.5px; 
} 
.main-display::after { 
  content: "[ RAD: 0.02 mSv ]"; 
  position: absolute; 
  bottom: 8px; 
  right: 12px; 
  font-size: 0.55rem; 
  opacity: 0.35; 
  pointer-events: none; 
  z-index: 10; 
  letter-spacing: 0.5px; 
} 
.game-grid { display: none; width: 100%; height: 100%; min-height: 0; } 
.game-grid.active { display: grid; grid-template-rows: repeat(12, 1fr); grid-template-columns: repeat(15, 1fr); gap: 2px; min-height: 0; overflow: hidden; } 
/* ===== RPS PROTOCOL BAR (Tactical Briefing Panel) ===== */
.rps-bar {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 100; max-width: 680px; width: 90%;
  font-family: var(--stencil-font);
  animation: rps-enter 0.3s ease-out;
}
@keyframes rps-enter {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
.rps-bar.rps-dissolve {
  animation: rps-dissolve 0.45s ease-out forwards;
  pointer-events: none;
}
@keyframes rps-dissolve {
  0%   { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); }
  30%  { opacity: 0.8; filter: blur(1px); transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; filter: blur(4px); transform: translate(-50%, -50%) scale(1.05); }
}
/* Unified solid box — no text-based corners */
.rps-body {
  width: 100%; padding: 1.5rem 2rem 1.5rem;
  border: 2px solid var(--term-green);
  background: rgba(10, 5, 0, 0.94);
  box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 8px rgba(255,176,0,0.12);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.rps-header {
  font-size: clamp(1rem, 3vw, 1.3rem); font-weight: bold; color: var(--term-green);
  text-shadow: var(--glow); letter-spacing: 3px; text-transform: uppercase;
}
.rps-rule {
  font-size: 0.7rem; color: var(--term-dim); letter-spacing: 1px;
  margin-top: -0.3rem;
}
/* ⚡ BIT-BAR */
.rps-bitbar {
  display: flex; gap: 2px; justify-content: center; align-items: center;
  height: 10px; margin: 0.3rem 0;
}
.rps-bitbar-block {
  display: inline-block; width: 8px; height: 8px;
  background: var(--term-green); box-shadow: 0 0 3px var(--term-green);
  transition: background 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.rps-bitbar-block.empty {
  background: transparent; box-shadow: none;
  border: 1px solid var(--term-dim); opacity: 0.25;
}
.rps-bitbar-block.critical {
  background: var(--term-alert); box-shadow: 0 0 5px var(--term-alert);
  animation: rps-bitbar-flicker 0.12s steps(2) infinite;
}
@keyframes rps-bitbar-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
/* Button row — CSS grid for equal-width containment */
.rps-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; width: 100%; }
.rps-btn { padding: 0.5rem 0.8rem; font-size: clamp(0.5rem, 1.4vw, 0.7rem); white-space: nowrap; min-width: 0; text-align: center; }
.rps-recommended {
  border-color: var(--term-green) !important;
  box-shadow: 0 0 10px var(--term-green) !important;
  animation: rps-pulse 0.8s ease-in-out infinite;
}
@keyframes rps-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--term-green); }
  50% { box-shadow: 0 0 16px var(--term-green); }
}
.rps-selected {
  border-color: var(--term-rare) !important;
  box-shadow: 0 0 18px var(--term-rare) !important;
  color: var(--term-rare) !important;
}
/* Dim backdrop overlay behind rps-bar */
.rps-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.35); z-index: 9; pointer-events: none;
  animation: rps-backdrop-fade 0.3s ease;
}
@keyframes rps-backdrop-fade {
  from { opacity: 0; } to { opacity: 1; }
}
/* ⚡ 4-SECOND BORDER FLASH — pulses existing menu borders, no extra outlines */
.rps-bar.border-flash .rps-body {
  animation: rps-body-flash 4s ease-in-out;
}
@keyframes rps-body-flash {
  0%   { border-color: var(--term-dim); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(255,176,0,0.05); }
  10%  { border-color: var(--term-green); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 10px rgba(255,176,0,0.5); }
  20%  { border-color: var(--term-dim); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(255,176,0,0.05); }
  30%  { border-color: var(--term-green); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 12px rgba(255,176,0,0.55); }
  40%  { border-color: var(--term-dim); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(255,176,0,0.05); }
  50%  { border-color: var(--term-green); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 14px rgba(255,176,0,0.6); }
  60%  { border-color: var(--term-dim); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(255,176,0,0.05); }
  70%  { border-color: var(--term-green); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 16px rgba(255,176,0,0.65); }
  80%  { border-color: var(--term-alert); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 18px rgba(255,68,0,0.6); }
  90%  { border-color: var(--term-alert); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 20px rgba(255,68,0,0.7); }
  100% { border-color: var(--term-dim); box-shadow: inset 0 0 18px rgba(0,0,0,0.85), 0 0 2px rgba(255,176,0,0.05); }
}

/* ⚡ COMMANDER SPEECH REEL — locked text glow in dialogue body */
.speech-body-locked {
  color: var(--term-green);
  text-shadow: 0 0 8px var(--term-green), 0 0 14px var(--term-green) !important;
  animation: speech-lock-pop 0.3s ease-out;
}
@keyframes speech-lock-pop {
  0%   { transform: scale(1.12); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
/* ===== ALL-IN HP TOWERS (Round 10 pixel blocks) ===== */
.hp-tower {
  position: absolute; top: 1rem; bottom: 1rem; width: 30px;
  height: calc(100% - 2rem);
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  gap: 2px; z-index: 30; pointer-events: none;
  overflow: hidden;
}
#player-tower { left: 5%; }
#commander-tower { right: 5%; }
.hp-tower .tower-block {
  width: 100%; height: 10px; border: 1px solid var(--term-green);
  background: var(--term-green);
  box-shadow: 0 0 4px var(--term-green);
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
.hp-tower .tower-block.depleted {
  background: transparent; border-color: var(--term-dim);
  box-shadow: none;
}
.hp-tower .tower-block.critical {
  border-color: var(--term-alert);
  animation: breach-pulse 0.4s infinite;
}
#cards-area {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 10;
  display: contents;
}
/* ===== SELECTOR RED WARNING (Overwrite Risk) ===== */
.inventory-slot.slot-red-warning {
  border-color: var(--term-alert) !important;
  box-shadow: 0 0 12px var(--term-alert), inset 0 0 6px rgba(255,68,0,0.3) !important;
  animation: red-warn-pulse 0.3s infinite;
}
@keyframes red-warn-pulse {
  0%, 100% { border-color: var(--term-alert); }
  50%      { border-color: #ff6644; }
}
/* Selector spinning with after-image motion blur trail */
.inventory-slot.selector-spinning {
  box-shadow: 
    0 0 6px var(--warning-yellow),
    -12px 0 8px -4px rgba(255, 204, 0, 0.15),
    12px 0 8px -4px rgba(255, 204, 0, 0.15),
    0 0 20px rgba(255, 204, 0, 0.1);
}
/* Data packet flyout particle */
.particle-selector {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 1px;
  box-shadow: 0 0 6px currentColor;
  animation: selector-flyout 0.3s ease-out forwards;
  pointer-events: none;
}
@keyframes selector-flyout {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
/* ===== ROUND 10 ALL-IN CARD SHUFFLE ===== */
.card.shuffle-glitch {
  animation: card-shuffle 0.08s steps(2) infinite;
  color: var(--term-alert);
  text-shadow: 0 0 8px var(--term-alert);
}
@keyframes card-shuffle {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}
/* ===== STATE TRANSITION UTILITIES ===== */ 
.grid-switch { transition: opacity 0.15s ease-out, transform 0.15s ease-out; will-change: opacity, transform; } 
.state-enter { opacity: 0; transform: translateY(8px) scale(0.99); } 
.state-exit { opacity: 0; transform: translateY(-8px) scale(1.01); } 
.state-active { opacity: 1; transform: translateY(0) scale(1); } 
/* ===== STARFIELD PARALLAX ===== */
#starfield-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Shared star dot base */
.starfield-star {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Far layer: tiny, dim, slow — 1px dots */
.starfield-star.far {
  width: 1px; height: 1px;
  background: var(--term-dim);
  box-shadow: 0 0 1px var(--term-dim);
  animation: star-drift-far linear infinite;
}
/* Near layer: slightly bigger, brighter, faster */
.starfield-star.near {
  width: 2px; height: 2px;
  background: var(--term-green);
  box-shadow: 0 0 3px var(--term-green);
  animation: star-drift-near linear infinite;
}
/* Speed-line streaks */
.starfield-streak {
  position: absolute;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--term-green) 40%, var(--term-green) 60%, transparent 100%);
  box-shadow: 0 0 4px var(--term-green);
  pointer-events: none;
  animation: streak-fly linear forwards;
  z-index: 1;
}
/* Micro-debris near player ship */
.starfield-debris {
  position: absolute;
  width: 1px; height: 1px;
  background: var(--warning-yellow);
  box-shadow: 0 0 2px var(--warning-yellow);
  pointer-events: none;
  animation: debris-drift linear forwards;
  z-index: 3;
}
/* Flicker variations on stars (alpha oscillation) */
.starfield-star.flicker-slow {
  animation-name: star-drift-far, star-flicker-slow;
}
.starfield-star.flicker-fast {
  animation-name: star-drift-near, star-flicker-fast;
}
.starfield-star.drift-left {
  --drift-x: -30px;
}
.starfield-star.drift-right {
  --drift-x: 30px;
}

@keyframes star-drift-far {
  0%   { transform: translateY(0) translateX(0); opacity: 0.5; }
  100% { transform: translateY(120vh) translateX(var(--drift-x, 0px)); opacity: 0.3; }
}
@keyframes star-drift-near {
  0%   { transform: translateY(0) translateX(0); opacity: 0.85; }
  100% { transform: translateY(120vh) translateX(var(--drift-x, 0px)); opacity: 0.4; }
}
@keyframes star-flicker-slow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.2; }
}
@keyframes star-flicker-fast {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.3; }
}
@keyframes streak-fly {
  0%   { height: 0px; opacity: 0; }
  20%  { height: 40px; opacity: 0.8; }
  80%  { height: 40px; opacity: 0.8; }
  100% { height: 0px; opacity: 0; transform: translateY(var(--streak-y, -80vh)); }
}
@keyframes debris-drift {
  0%   { transform: translate(0, 0); opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translate(var(--debris-dx, 15px), var(--debris-dy, 80px)); opacity: 0; }
}

/* ===== PLANETS (Pixel-Art CSS) ===== */
.starfield-planet {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  will-change: transform, opacity;
  transition: opacity 0.5s ease;
  /* Slow rotation — the chunky bands create a pixel-art scan effect */
  animation: planet-rotate 80s linear infinite;
}
/* Dither overlay — gives the surface a retro pixel texture */
.starfield-planet::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.12) 3px,
      rgba(0,0,0,0.12) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 4px,
      rgba(0,0,0,0.06) 4px,
      rgba(0,0,0,0.06) 5px
    );
  pointer-events: none;
  z-index: 2;
}
/* Ringed planets — dotted/dashed ring via repeating radial gradient */
.starfield-planet.ringed::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.08) 0deg,
      rgba(255,255,255,0.08) 4deg,
      transparent 4deg,
      transparent 8deg
    );
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 55%, black 57%, black 62%, transparent 64%);
  mask: radial-gradient(circle at 50% 50%, transparent 55%, black 57%, black 62%, transparent 64%);
  pointer-events: none;
  z-index: 1;
  animation: ring-rotate 120s linear infinite;
}
@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Individual planet chunky-band overrides (pixel-art shadow stacking) */
/* Each planet gets unique inset shadow bands for its color scheme */
.starfield-planet[data-planet="1"] {
  box-shadow:
    inset 0 -20px 0 0 rgba(90,48,16,0.6),
    inset 0 -40px 0 0 rgba(90,48,16,0.3),
    inset 0 20px 0 0 rgba(255,224,160,0.2),
    /* outer glow */  0 0 80px rgba(200,150,80,0.12), 0 0 160px rgba(200,150,80,0.05);
}
.starfield-planet[data-planet="2"] {
  box-shadow:
    inset 0 -25px 0 0 rgba(32,48,96,0.6),
    inset 0 -50px 0 0 rgba(32,48,96,0.3),
    inset 0 15px 0 0 rgba(192,216,255,0.15),
    0 0 80px rgba(100,150,220,0.12), 0 0 160px rgba(100,150,220,0.05);
}
.starfield-planet[data-planet="3"] {
  box-shadow:
    inset 0 -15px 0 0 rgba(112,64,32,0.5),
    inset 0 -35px 0 0 rgba(112,64,32,0.25),
    inset 0 25px 0 0 rgba(255,208,160,0.15),
    0 0 60px rgba(200,120,60,0.08), 0 0 120px rgba(200,120,60,0.03);
}
.starfield-planet[data-planet="4"] {
  box-shadow:
    inset 0 -20px 0 0 rgba(32,64,32,0.6),
    inset 0 -45px 0 0 rgba(32,64,32,0.3),
    inset 0 18px 0 0 rgba(160,208,160,0.15),
    0 0 80px rgba(80,180,100,0.10), 0 0 160px rgba(80,180,100,0.04);
}
.starfield-planet[data-planet="5"] {
  box-shadow:
    inset 0 -30px 0 0 rgba(80,56,32,0.6),
    inset 0 -55px 0 0 rgba(80,56,32,0.3),
    inset 0 22px 0 0 rgba(240,208,176,0.15),
    0 0 100px rgba(200,150,100,0.15), 0 0 200px rgba(200,150,100,0.06);
}
.starfield-planet[data-planet="6"] {
  box-shadow:
    inset 0 -18px 0 0 rgba(64,64,88,0.5),
    inset 0 -38px 0 0 rgba(64,64,88,0.25),
    inset 0 20px 0 0 rgba(208,208,224,0.10),
    0 0 60px rgba(150,150,180,0.08), 0 0 120px rgba(150,150,180,0.03);
}
.starfield-planet[data-planet="7"] {
  box-shadow:
    inset 0 -22px 0 0 rgba(64,8,8,0.6),
    inset 0 -48px 0 0 rgba(64,8,8,0.35),
    inset 0 16px 0 0 rgba(192,96,80,0.15),
    0 0 80px rgba(200,60,50,0.12), 0 0 160px rgba(200,60,50,0.05);
}
.starfield-planet[data-planet="8"] {
  box-shadow:
    inset 0 -35px 0 0 rgba(112,80,64,0.6),
    inset 0 -60px 0 0 rgba(112,80,64,0.3),
    inset 0 25px 0 0 rgba(255,224,192,0.15),
    0 0 100px rgba(220,160,120,0.15), 0 0 200px rgba(220,160,120,0.06);
}
.starfield-planet[data-planet="9"] {
  box-shadow:
    inset 0 -25px 0 0 rgba(64,24,96,0.6),
    inset 0 -50px 0 0 rgba(64,24,96,0.35),
    inset 0 20px 0 0 rgba(224,128,255,0.15),
    0 0 100px rgba(180,80,220,0.15), 0 0 200px rgba(180,80,220,0.06);
}
.starfield-planet[data-planet="10"] {
  box-shadow:
    inset 0 -30px 0 0 rgba(102,0,0,0.6),
    inset 0 -55px 0 0 rgba(102,0,0,0.35),
    inset 0 0 0 0 rgba(255,102,0,0.2),
    0 0 120px rgba(255,80,0,0.22), 0 0 240px rgba(255,80,0,0.10);
}
/* Dormant state for round 9-10 transitions — freeze but keep pixels */
.starfield-planet.dormant {
  animation-play-state: paused;
}
/* On warp-out, planets just fade away — dither overlay fades too */
#starfield-container.warp-exit .starfield-planet {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* ===== HYPERSPACE PULSE ===== */
/* No star animation swaps — just intensify existing drift + streak burst */
#starfield-container.warp-pulse .starfield-star {
  box-shadow: 0 0 6px var(--term-green), 0 0 12px var(--term-green);
  background: var(--term-green);
  width: 2px;
  height: 2px;
}
#starfield-container.warp-pulse .starfield-star.far {
  box-shadow: 0 0 4px var(--term-green), 0 0 8px var(--term-green);
}

/* ===== WARP-OUT ===== */
/* Stars just get faster + brighter — same animation, different speed */
#starfield-container.warp-exit .starfield-star.far {
  animation-duration: 0.8s !important;
  box-shadow: 0 0 6px var(--term-green), 0 0 12px var(--term-green);
  background: var(--term-green);
  width: 2px;
  height: 2px;
}
#starfield-container.warp-exit .starfield-star.near {
  animation-duration: 0.4s !important;
  box-shadow: 0 0 10px var(--term-green), 0 0 20px var(--term-green);
  background: var(--term-green);
  width: 3px;
  height: 3px;
}

/* ===== STORM SPARKS (Round 9+) ===== */
.starfield-spark {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: var(--term-green);
  box-shadow: 0 0 3px var(--term-green), 0 0 6px rgba(180,80,220,0.5);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: spark-flicker ease-in-out infinite alternate;
}
@keyframes spark-flicker {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 0.8; transform: scale(1.5); }
  40%  { opacity: 0; transform: scale(1); }
  60%  { opacity: 0.4; transform: scale(1.2); }
  80%  { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1); }
}
/* Round 10 sparks get the red tint */
.starfield-spark {
  box-shadow: 0 0 4px var(--term-alert), 0 0 8px rgba(255,80,0,0.5);
}

/* ===== DEATH CLOUDS (Round 10) ===== */
.starfield-cloud {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(100,0,0,0.25) 0%, rgba(60,0,0,0.1) 50%, transparent 70%);
  filter: blur(3px);
  animation: cloud-drift linear infinite;
}
@keyframes cloud-drift {
  0%   { transform: translateX(-20px); opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateX(calc(100vw + 40px)); opacity: 0; }
}

/* ===== INVADERS & BULLETS ===== */
.invader, .player-ship, .bullet { 
  display: flex; align-items: center; justify-content: center; 
  font-weight: bold; user-select: none; 
  will-change: transform, opacity; /* ⚡ PRE-ALLOCATE GPU LAYERS FOR 60FPS */ 
} 
.invader {
  font-size: clamp(1.3rem, 4vh, 2.8rem); line-height: 1;
  animation: invader-float 3s ease-in-out infinite; 
  transform: scale(1.15); /* ⚡ FIX: Scales up without breaking grid cell math */ 
  /* ⚡ GREEBLE: Enemy glow */ 
  text-shadow: 0 0 5px rgba(255, 68, 0, 0.5); 
} 
@keyframes invader-float { 0%, 100% { transform: translateY(0) scale(1.15); } 50% { transform: translateY(-3px) scale(1.15); } } 

/* ===== PRISM FIREWALL ===== */
.fw-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 2.5vh, 1.8rem);
  will-change: transform, opacity;
  transition: color 0.3s, text-shadow 0.3s, opacity 0.3s;
  font-weight: bold;
}
.firewall-solid {
  color: var(--term-green);
  text-shadow: 0 0 8px var(--term-green);
}
.firewall-degraded {
  color: var(--term-dim);
  text-shadow: none;
  opacity: 0.6;
}
.firewall-shattered {
  color: var(--term-alert);
  text-shadow: 0 0 4px var(--term-alert);
  opacity: 0.3;
  animation: fw-shatter-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes fw-shatter-pulse {
  from { opacity: 0.3; }
  to { opacity: 0.6; }
}

/* ===== ENEMY PROJECTILE ===== */
.enemy-bullet {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.3rem, 3.5vh, 2.5rem);
  color: var(--term-alert);
  text-shadow: 0 0 8px var(--term-alert), 0 0 16px #ff2200;
  pointer-events: none;
  will-change: transform, opacity;
  /* ⚡ SMOOTH DROP: each new position triggers a fresh slide-down animation */
  animation:
    enemy-bullet-pulse 0.2s ease-in-out infinite,
    enemy-bullet-drop 0.25s ease-out forwards;
}
@keyframes enemy-bullet-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes enemy-bullet-drop {
  from { transform: translateY(-80%) scale(1.3); }
  to   { transform: translateY(0) scale(1); }
}
.enemy-bullet::after {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 3px;
  height: 36px;
  background: linear-gradient(to top, var(--term-alert), transparent);
  transform: translate(-50%, 0);
  opacity: 0.4;
  pointer-events: none;
}

/* ===== PHOSPHOR BURN-IN DECAY ===== */
.phosphor-decay {
  display: flex; align-items: center; justify-content: center;
  color: var(--term-dim);
  text-shadow: 0 0 3px var(--term-dim);
  font-size: clamp(0.6rem, 1.5vh, 1rem);
  pointer-events: none;
  transition: opacity 0.3s;
}
.phosphor-decay-2 { opacity: 0.7; }
.phosphor-decay-1 { opacity: 0.25; }

/* ===== SYSTEM SHOCK ===== */
.system-shock {
  filter: invert(1) !important;
  transition: filter 0.05s;
}

.player-ship {
  font-size: clamp(1.3rem, 4vh, 2.8rem); line-height: 1;
  z-index: 10;
  /* ⚡ GREEBLE: Player ship glow */
  text-shadow: 0 0 8px var(--term-green);
  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}
/* 🚀 HYPERSPACE WARP-OUT — full journey offscreen */
.player-ship.warp-exit-ship {
  animation: ship-warp-out 2.2s ease-in forwards;
}
@keyframes ship-warp-out {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  25%  { transform: translateY(-60px) scale(1.15); opacity: 1; }
  50%  { transform: translateY(-180px) scale(0.8); opacity: 0.9; }
  75%  { transform: translateY(-400px) scale(0.3); opacity: 0.5; }
  100% { transform: translateY(-800px) scale(0.05); opacity: 0; }
}

.bullet { 
  font-size: 1.4rem; /* ⚡ FIX: Thicker laser trails */ 
  animation: bullet-fly 0.3s linear forwards; 
} 
@keyframes bullet-fly { to { transform: translateY(-400px); opacity: 0; } } 
.invader.exploding { 
  animation: explode 0.35s ease-out forwards; 
  color: var(--term-alert) !important; 
  text-shadow: 0 0 12px var(--term-alert) !important; 
  z-index: 20; 
} 
@keyframes explode {
  0% { transform: scale(1.15); opacity: 1; }
  50%  { transform: scale(1.8); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
/* ===== EYE CANDY: RPS Lock-In & Ghost Trail ===== */
/* [ LOCKED ] bracket flash — 12Hz blink */
@keyframes lock-flash {
  0%, 100% { text-shadow: 0 0 4px var(--term-green); }
  50%      { text-shadow: 0 0 18px #ffb000, 0 0 36px #ffb000; }
}
.rps-locked {
  animation: lock-flash 83ms linear 5; /* ~5 flashes @ 12Hz ≈ 415ms */
}
.locked-bracket {
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: bold;
  color: var(--warning-yellow);
  text-shadow: 0 0 6px var(--warning-yellow), 0 0 12px var(--warning-yellow);
  z-index: 15;
  pointer-events: none;
  animation: lock-flash 83ms linear 5;
}
/* Raster trajectory trace — faint dotted column markers */
.trajectory-trace {
  z-index: 1;
  pointer-events: none;
  border-left: 1px dotted var(--term-dim);
  opacity: 0.25;
  animation: trace-fade 800ms ease-out forwards;
}
@keyframes trace-fade {
  0%   { opacity: 0.35; }
  100% { opacity: 0; }
}
/* Phosphor afterimage ghost ship */
.player-ship-ghost {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.2rem, 3.5vh, 2.5rem); line-height: 1;
  z-index: 9;
  color: var(--term-dim);
  text-shadow: 0 0 4px var(--term-dim);
  pointer-events: none;
  will-change: opacity;
  /* Opacity driven by --ghost-age: 4=newest (0.6), 1=oldest (0.15) */
  opacity: calc(0.15 * var(--ghost-age, 1));
  animation: ghost-fade 200ms ease-out forwards;
}
@keyframes ghost-fade {
  0%   { opacity: calc(0.15 * var(--ghost-age, 1)); }
  100% { opacity: 0; transform: translateY(-2px) scale(0.95); }
}
/* ===== BLACKJACK TABLE ===== */
/*
  First principles: This is a CRT terminal.
  The cards ARE the graphics — huge phosphor characters on bare screen.
  No boxes, no felt, no corporate layout.
  Just two hands of cards and a center info bar, floating on the CRT.
*/
#blackjack-table {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
  justify-items: center;
  height: 100%;
  width: 100%;
  padding: 1.75rem 1.5rem;
  /* ⚡ FELT TABLE: Subtle data-matrix pattern behind cards */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 40px,
      rgba(255, 176, 0, 0.015) 40px,
      rgba(255, 176, 0, 0.015) 41px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(255, 176, 0, 0.015) 40px,
      rgba(255, 176, 0, 0.015) 41px
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 176, 0, 0.03) 0%,
      transparent 70%
    );
  position: relative;
}
/* Override the 12-row game-grid default — blackjack uses its own rows */
#blackjack-table.game-grid.active {
  grid-template-rows: 1fr auto 1fr !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* ===== OUTCOME REVEAL: Full-window takeover overlays ===== */
.outcome-overlay {
  position: absolute;
  /* Extend beyond #blackjack-table to fill the entire main-display area */
  top: calc(-1 * var(--outcome-offset-top, 0px));
  left: calc(-1 * var(--outcome-offset-left, 0px));
  width: calc(100% + var(--outcome-offset-left, 0px) + var(--outcome-offset-right, 0px));
  height: calc(100% + var(--outcome-offset-top, 0px) + var(--outcome-offset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: outcome-fade-in 0.08s ease-out;
  overflow: hidden;
  background: rgba(10, 7, 0, 0.55);
  backdrop-filter: blur(1px);
}
/* ⛔ When #blackjack-table contains an outcome overlay, hide all visible game elements.
     Uses :has() — now widely supported. This makes the table content invisible while
     the overlay animation plays, so the user sees only the animation against the dark bg. */
#blackjack-table:has(.outcome-overlay) .hand-area,
#blackjack-table:has(.outcome-overlay) .cards-container,
#blackjack-table:has(.outcome-overlay) .hand-label,
#blackjack-table:has(.outcome-overlay) .hand-total,
#blackjack-table:has(.outcome-overlay) .stakes-bar,
#blackjack-table:has(.outcome-overlay) .round-history,
#blackjack-table:has(.outcome-overlay) .count-readout {
  opacity: 0 !important;
  pointer-events: none !important;
}
.outcome-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
  z-index: 0;
  pointer-events: none;
}
.outcome-overlay.outcome-sd {
  background: rgba(26, 0, 0, 0.45);
}
@keyframes outcome-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.outcome-exit {
  animation: outcome-fade-out 0.2s ease-in forwards;
}
@keyframes outcome-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* ===== FULL-WINDOW OUTCOME ANIMATIONS =====
 * These take over the entire blackjack table area (which fills main-display).
 * Text is LARGE and centered. Background effects fill the full space.
 * Cards/info behind overlay become invisible via :has() rule above.
 */

.outcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 100%;
  position: relative;
}

/* ─── Shared text elements (BIG, full-window scale) ─── */
.outcome-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  opacity: 0;
  animation: outcome-reveal-text 0.3s ease-out 0.55s forwards;
}
@keyframes outcome-reveal-text {
  from { transform: translateY(15px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.outcome-big {
  font-family: var(--stencil-font);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: bold;
  letter-spacing: 12px;
  color: var(--term-green);
  text-shadow: 0 0 30px var(--term-green), 0 0 60px var(--term-green), 0 0 100px rgba(255,176,0,0.3);
  line-height: 1.1;
}
.outcome-big-outlined {
  font-family: var(--stencil-font);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: bold;
  letter-spacing: 10px;
  color: transparent;
  text-shadow: 0 0 0 var(--term-rare), 0 0 0 #000, 0 0 30px var(--term-rare);
  -webkit-text-stroke: 2px var(--term-rare);
  line-height: 1.1;
}
.outcome-glow-amber {
  text-shadow: 0 0 30px var(--term-green), 0 0 60px var(--term-green), 0 0 120px var(--term-dim) !important;
}
.outcome-sub {
  font-family: var(--stencil-font);
  font-size: clamp(0.8rem, 2vw, 1.4rem);
  letter-spacing: 6px;
  color: var(--term-dim);
  text-transform: uppercase;
  opacity: 0.85;
}
.outcome-bar {
  width: 160px;
  height: 4px;
  background: rgba(255,176,0,0.1);
  border: 1px solid rgba(255,176,0,0.15);
  overflow: hidden;
  margin: 0.25rem 0;
}
.outcome-bar-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.25rem 0;
}
.outcome-bar-cascade {
  height: 4px;
  border: none;
  animation: outcome-bar-fill 0.4s ease-out 0.35s both;
  width: 200px;
}
.outcome-bar-fill {
  display: block;
  height: 100%;
  background: var(--term-green);
  animation: outcome-bar-fill 0.35s ease-out both;
}
@keyframes outcome-bar-fill {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

/* ─── BUBBLE PARTICLE BURST (added to any outcome via .outcome-particle-burst) ─── */
@keyframes outcome-particle-float {
  0%   { transform: translate(0, 0) scale(0); opacity: 1; }
  50%  { opacity: 0.8; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
.outcome-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  animation: outcome-particle-float 0.9s ease-out forwards;
  mix-blend-mode: screen;
}

/* ─── REEL SPIN (Win-0, Blackjack-0) — bigger ─── */
.outcome-reel-wrap {
  position: relative;
  z-index: 5;
  width: clamp(220px, 40vw, 360px);
  height: clamp(80px, 12vw, 120px);
  overflow: hidden;
  border: 3px solid var(--term-dim);
  background: rgba(0,0,0,0.6);
  box-shadow: 0 0 20px rgba(255,176,0,0.1);
}
/* Reel that spins in then fades out so the big text beneath takes over */
.outcome-reel-disappear {
  animation: reel-fade-out 0.2s ease-in 0.55s forwards;
}
@keyframes reel-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.outcome-reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: reel-spin 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.outcome-reel span {
  font-family: var(--stencil-font);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: bold;
  color: var(--term-green);
  text-shadow: 0 0 15px var(--term-green), 0 0 30px var(--term-green);
  height: clamp(80px, 12vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes reel-spin {
  0% { transform: translateY(0); }
  100% { transform: translateY(calc(-1 * clamp(80px, 12vw, 120px) * var(--reel-spins, 2))); }
}

/* ─── CASCADE DROP-IN (Win-1) ─── */
.outcome-cascade {
  font-family: var(--stencil-font);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: bold;
  color: var(--term-rare);
  text-shadow: 0 0 20px var(--term-rare), 0 0 40px var(--term-rare);
  letter-spacing: 12px;
  z-index: 5;
  animation: cascade-drop 0.5s ease-out both;
}
@keyframes cascade-drop {
  from { transform: translateY(-40px); opacity: 0; letter-spacing: 30px; filter: blur(4px); }
  to { transform: translateY(0); opacity: 1; letter-spacing: 12px; filter: blur(0); }
}

/* ─── LEFT/RIGHT SLAM (Win-2) ─── */
.outcome-slam-left,
.outcome-slam-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
}
.outcome-slam-left {
  left: 0;
  background: linear-gradient(to right, rgba(0,229,255,0.12), transparent 70%);
  animation: slam-left 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.outcome-slam-right {
  right: 0;
  background: linear-gradient(to left, rgba(0,229,255,0.12), transparent 70%);
  animation: slam-right 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slam-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes slam-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.outcome-slam-text {
  animation: slam-text-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
@keyframes slam-text-pop {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ─── GLITCH SCREEN (Lose-0) ─── */
.outcome-glitch-screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,68,0,0.06) 3px,
      rgba(255,68,0,0.06) 5px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(255,68,0,0.03) 40px,
      rgba(255,68,0,0.03) 42px
    );
  animation: outcome-glitch-move 0.04s steps(3) infinite;
}
@keyframes outcome-glitch-move {
  0%   { transform: translate(0, 0); opacity: 1; clip-path: inset(0 0 0 0); }
  20%  { transform: translate(-3px, 1px); opacity: 0.7; clip-path: inset(10% 0 80% 0); }
  40%  { transform: translate(3px, -1px); opacity: 1; clip-path: inset(50% 0 30% 0); }
  60%  { transform: translate(-1px, 2px); opacity: 0.8; clip-path: inset(20% 0 60% 0); }
  80%  { transform: translate(2px, -2px); opacity: 0.9; clip-path: inset(70% 0 10% 0); }
  100% { transform: translate(0, 0); opacity: 1; clip-path: inset(0 0 0 0); }
}
.outcome-glitch-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(255,68,0,0.05) 50%, transparent 60%);
  animation: glitch-bar-sweep 0.3s linear infinite;
}
@keyframes glitch-bar-sweep {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ─── CRACK BACKGROUND (Lose-1) ─── */
.outcome-crack-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255,68,0,0.15) 47%, rgba(255,68,0,0.2) 48%, transparent 49%),
    linear-gradient(205deg, transparent 46%, rgba(255,68,0,0.1) 47%, rgba(255,68,0,0.15) 48%, transparent 49%),
    linear-gradient(320deg, transparent 46%, rgba(255,68,0,0.08) 47%, rgba(255,68,0,0.12) 48%, transparent 49%),
    radial-gradient(ellipse at 30% 60%, rgba(255,68,0,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(255,68,0,0.04) 0%, transparent 40%);
  animation: crack-fade 0.3s ease-out both;
}
@keyframes crack-fade {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── SCAN FAIL (Lose-2) ─── */
.outcome-scan-fail {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--term-alert);
  box-shadow: 0 0 15px var(--term-alert), 0 0 35px var(--term-alert), 0 0 60px rgba(255,68,0,0.3);
  z-index: 3;
  animation: scan-fail 0.6s ease-out both;
}
@keyframes scan-fail {
  0%   { top: -5%; opacity: 0; }
  15%  { top: 20%; opacity: 1; }
  30%  { top: 60%; opacity: 0.5; }
  45%  { top: 35%; opacity: 0.9; }
  60%  { top: 75%; opacity: 0.3; }
  80%  { top: 50%; opacity: 0.7; }
  100% { top: 45%; opacity: 0; }
}

/* ─── COLUMN BALANCE (Push-0) ─── */
.outcome-column-left,
.outcome-column-right {
  position: absolute;
  bottom: 0;
  width: 30%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to top, rgba(255,204,0,0.1) 0%, transparent 60%);
}
.outcome-column-left {
  left: 10%;
  animation: column-rise 0.45s ease-out both;
}
.outcome-column-right {
  right: 10%;
  animation: column-rise 0.45s ease-out 0.12s both;
}
@keyframes column-rise {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
.outcome-balance-beam {
  position: absolute;
  top: 50%;
  left: 5%;
  width: 90%;
  height: 3px;
  background: var(--warning-yellow);
  box-shadow: 0 0 10px var(--warning-yellow), 0 0 25px rgba(255,204,0,0.2);
  z-index: 2;
  animation: balance-beam 0.4s ease-out 0.2s both;
}
@keyframes balance-beam {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ─── EQUALIZER BARS (Push-1) ─── */
.outcome-eq-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 100px;
  z-index: 5;
  width: 200px;
}
.outcome-eq-bar {
  display: block;
  width: 14px;
  background: var(--warning-yellow);
  box-shadow: 0 0 8px var(--warning-yellow), 0 0 15px rgba(255,204,0,0.2);
  animation: eq-bounce 0.25s ease-in-out infinite alternate;
}
@keyframes eq-bounce {
  from { transform: scaleY(0.5); transform-origin: bottom; }
  to { transform: scaleY(1.2); transform-origin: bottom; }
}

/* ─── PULSE RINGS (Push-2) ─── */
.outcome-pulse-ring {
  position: absolute;
  width: clamp(160px, 30vw, 280px);
  height: clamp(160px, 30vw, 280px);
  border-radius: 50%;
  border: 3px solid var(--warning-yellow);
  box-shadow: 0 0 20px var(--warning-yellow), inset 0 0 20px rgba(255,204,0,0.08);
  z-index: 2;
  animation: pulse-ring-expand 0.9s ease-out both;
}
@keyframes pulse-ring-expand {
  from { transform: scale(0.2); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}

/* ─── BEAM SWEEP (Win variants) ─── */
.outcome-beam-left,
.outcome-beam-right {
  position: absolute;
  top: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(0,229,255,0.08) 40%, rgba(0,229,255,0.14) 50%, rgba(0,229,255,0.08) 60%, transparent);
  z-index: 2;
  animation: outcome-beam 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.outcome-beam-left { left: 0; }
.outcome-beam-right { right: 0; }
@keyframes outcome-beam {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* ─── GLOW CENTER (expanded) ─── */
.outcome-glow {
  position: absolute;
  width: clamp(200px, 40vw, 350px);
  height: clamp(200px, 40vw, 350px);
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--term-rare);
  box-shadow: 0 0 60px rgba(0,229,255,0.1), 0 0 120px rgba(0,229,255,0.05);
  z-index: 1;
  animation: outcome-glow-pulse 0.8s ease-in-out infinite alternate;
}
@keyframes outcome-glow-pulse {
  from { transform: scale(0.7); opacity: 0.3; }
  to { transform: scale(1.2); opacity: 0.8; }
}

/* ─── SUIT RAIN (Blackjack-1) — expanded ─── */
.outcome-suit-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-family: var(--stencil-font);
  font-size: clamp(1.5rem, 4vw, 3rem);
  color: var(--term-rare);
  text-shadow: 0 0 12px var(--term-rare);
  overflow: hidden;
  line-height: 2;
  animation: suit-rain 1s ease-out forwards;
}
@keyframes suit-rain {
  0%   { opacity: 0; transform: translateY(-10%); }
  20%  { opacity: 0.7; }
  50%  { opacity: 0.5; }
  80%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(5%); }
}

/* ─── RADIAL BURST (Blackjack-2) — expanded ─── */
.outcome-radial-burst {
  position: absolute;
  width: clamp(120px, 25vw, 200px);
  height: clamp(120px, 25vw, 200px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.2) 0%, rgba(0,229,255,0.05) 40%, transparent 70%);
  box-shadow: 0 0 80px rgba(0,229,255,0.12), 0 0 160px rgba(0,229,255,0.06);
  z-index: 1;
  animation: radial-expand 0.6s ease-out both;
}
@keyframes radial-expand {
  from { transform: scale(0.1); opacity: 1; }
  to { transform: scale(4); opacity: 0; }
}


.hand-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 0;
}
.hand-area.commander {
  justify-content: flex-end;
  padding-bottom: 1.25rem;
}
.hand-area.player {
  justify-content: flex-start;
  padding-top: 1.25rem;
}
.hand-label {
  color: var(--term-dim);
  font-family: var(--stencil-font);
  font-size: 1.1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.7;
  padding-bottom: 0.3rem;
}
.cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  perspective: 1000px;
  max-width: 100%;
  overflow: visible;
  flex-wrap: nowrap;
  padding: 0;
}
/* ⚡ BIG CARDS: Massive terminal-space characters — the core visual */
.card {
  border: 2px solid var(--term-dim);
  padding: 2.5rem 1.75rem;
  background: #0d0800;
  width: 130px;
  min-width: 120px;
  max-width: 150px;
  flex-shrink: 0;
  font-size: 3.4rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, margin 0.2s ease, border-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  position: relative;
  border-radius: 3px;
  animation: card-arrive 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: bottom center;
  will-change: transform, opacity;
  margin-right: -1rem;
  z-index: 1;
  overflow: hidden;
}
/* Fan rotation per position (set dynamically by renderer) */
.card {
  transform: rotate(calc(var(--fan-angle, 0deg) * 0.5));
}
.card:hover {
  z-index: 10;
  margin-right: 0rem;
  transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translateY(-6px) scale(1.08);
  box-shadow: 0 10px 20px rgba(0,0,0,0.7), 0 0 15px var(--term-green);
  border-color: var(--term-green);
}
/* Corner fold */
.card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0,0,0,0.4) transparent transparent;
}
/* Hidden card — two-sided flip: circuit board front, card value back */
.card.hidden {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #1a0f00;
  border-color: #8a6a20;
  position: relative;
  overflow: visible;
  font-size: 3.4rem;
  font-weight: bold;
  color: var(--warning-yellow);
  padding: 2.5rem 1.75rem;
  transform-style: preserve-3d;
}

/* Front face: circuit board (behind text) */
.card.hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(180, 120, 20, 0.65) 12px, rgba(180, 120, 20, 0.65) 13px),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(180, 120, 20, 0.65) 12px, rgba(180, 120, 20, 0.65) 13px),
    repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(200, 140, 30, 0.50) 28px, rgba(200, 140, 30, 0.50) 29px),
    repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(200, 140, 30, 0.50) 28px, rgba(200, 140, 30, 0.50) 29px),
    radial-gradient(circle at 20% 20%, #d4a030 3px, transparent 4px),
    radial-gradient(circle at 80% 25%, #d4a030 3px, transparent 4px),
    radial-gradient(circle at 35% 65%, #d4a030 3px, transparent 4px),
    radial-gradient(circle at 70% 70%, #d4a030 3px, transparent 4px),
    radial-gradient(circle at 50% 45%, #d4a030 4px, transparent 5px);
  transform: rotateY(0deg);
}

/* Back face: card value */
.card.hidden::after {
  content: attr(data-value);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  font-weight: bold;
  color: var(--term-green);
  z-index: 2;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(100, 65, 0, 0.40) 12px, rgba(100, 65, 0, 0.40) 13px),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(100, 65, 0, 0.40) 12px, rgba(100, 65, 0, 0.40) 13px),
    repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(140, 90, 10, 0.35) 28px, rgba(140, 90, 10, 0.35) 29px),
    repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(140, 90, 10, 0.35) 28px, rgba(140, 90, 10, 0.35) 29px),
    radial-gradient(circle at 20% 20%, #b8860b 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, #b8860b 2px, transparent 3px),
    radial-gradient(circle at 35% 65%, #b8860b 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, #b8860b 2px, transparent 3px),
    radial-gradient(circle at 50% 45%, #b8860b 3px, transparent 4px);
}

/* ⚡ FLIP: rotate 180° on Y-axis */
.card.hidden.revealed {
  animation: card-flip 0.4s cubic-bezier(0.22, 0.85, 0.45, 1) forwards;
}
@keyframes card-flip {
  0% {
    transform: rotateY(0deg) rotate(calc(var(--fan-angle, 0deg) * 0.5)) scale(1);
    border-color: #5a3e00;
  }
  40% {
    transform: rotateY(90deg) rotate(calc(var(--fan-angle, 0deg) * 0.5)) scale(1.05);
    border-color: var(--term-rare);
    box-shadow: 0 0 20px var(--term-rare);
  }
  100% {
    transform: rotateY(180deg) rotate(calc(var(--fan-angle, 0deg) * 0.5)) scale(1);
    border-color: var(--term-rare);
  }
}
/* After flip: normal face-up card */
/* .hidden was removed at flip midpoint; .reveal-done stands alone */
.card.hidden.reveal-done,
.card.reveal-done {
  color: var(--term-green);
  border-color: var(--term-dim);
  transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) scale(1);
}
.card.hidden.reveal-done::before,
.card.hidden.reveal-done::after,
.card.reveal-done::before,
.card.reveal-done::after {
  display: none;
}
/* Scan beam */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 176, 0, 0.08) 40%,
    rgba(255, 176, 0, 0.15) 50%,
    rgba(255, 176, 0, 0.08) 60%,
    transparent
  );
  pointer-events: none;
  transition: none;
  z-index: 2;
}
.card:hover::after {
  animation: card-scan 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes card-scan {
  0%   { left: -60%; }
  100% { left: 160%; }
}
/* Hidden card hover: same as face-up card — lift and glow */
.card.hidden:hover {
  z-index: 10;
  margin-right: 0rem;
  transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translateY(-6px) scale(1.08);
  box-shadow: 0 10px 20px rgba(0,0,0,0.7), 0 0 15px var(--term-green);
  border-color: var(--term-green);
}
.card.hidden:hover::after {
  animation: hidden-scan 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hidden-scan {
  0%   { left: -60%; opacity: 0.3; }
  100% { left: 160%; opacity: 0.1; }
}
@keyframes hidden-flicker {
  0%   { opacity: 0.7; transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translate(0, 0); }
  25%  { opacity: 1; transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translate(0, -1px); }
  50%  { opacity: 0.6; transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translate(0, 0); }
  75%  { opacity: 1; transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translate(0, 1px); }
  100% { opacity: 0.7; transform: rotate(calc(var(--fan-angle, 0deg) * 0.5)) translate(0, 0); }
}
.hand-total {
  font-size: 2rem;
  font-weight: bold;
  font-family: var(--stencil-font);
  letter-spacing: 4px;
  color: var(--term-dim);
  margin-top: 0.75rem;
  padding-top: 0.3rem;
  text-shadow: 0 0 4px var(--term-dim);
}
/* ===== CENTER ANALYTICS BAR (Blackjack Nerd Data Panel — Single-Line Stock Ticker) ===== */
.stakes-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--term-dim);
  border-bottom: 1px solid var(--term-dim);
  min-height: 56px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 5;
  animation: stakes-unveil 0.5s ease-out 0.35s both;
}
.stakes-bar.sd {
  animation: stakes-unveil-sd 0.5s ease-out 0.35s both;
}
@keyframes stakes-unveil {
  0%   { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(3px); }
  70%  { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); }
}
@keyframes stakes-unveil-sd {
  0%   { opacity: 0; clip-path: inset(0 50% 0 50%); filter: blur(3px); }
  40%  { clip-path: inset(0 0 0 0); filter: blur(0); }
  60%  { opacity: 1; }
  80%  { border-color: var(--term-alert); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: blur(0); border-color: var(--term-dim); }
}
.analytics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  flex-shrink: 0;
}
.analytics-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--stencil-font);
  min-width: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.analytics-label {
  color: var(--term-dim);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  white-space: nowrap;
}
.analytics-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--term-green);
  text-shadow: 0 0 4px var(--term-green);
  letter-spacing: 1px;
  white-space: nowrap;
}
.analytics-value.active {
  color: var(--term-rare);
  text-shadow: 0 0 5px var(--term-rare);
}
.analytics-value.warn {
  color: var(--warning-yellow);
  text-shadow: 0 0 4px var(--warning-yellow);
}
.analytics-value.danger {
  color: var(--term-alert);
  text-shadow: 0 0 6px var(--term-alert);
}
.analytics-div {
  width: 1px;
  height: 26px;
  background: var(--term-dim);
  opacity: 0.25;
  flex-shrink: 0;
  margin: 0 0.6rem;
}
.analytics-status {
  font-size: 0.85rem;
  color: var(--term-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--stencil-font);
}
.analytics-status.nullified {
  color: var(--term-rare);
  text-shadow: 0 0 8px var(--term-rare);
}
.stakes-status.sudden-death {
  color: var(--term-alert);
  text-shadow: 0 0 10px var(--term-alert), 0 0 20px var(--term-alert);
  animation: sd-flash 0.4s ease-in-out infinite;
  font-size: 1rem;
  font-weight: bold;
}

.stakes-sd-damage {
  color: var(--term-alert);
  font-size: 0.75rem;
  letter-spacing: 2px;
  animation: sd-damage-pulse 0.8s ease-in-out infinite;
  font-family: var(--stencil-font);
}
@keyframes sd-flash {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 15px var(--term-alert), 0 0 30px var(--term-alert); }
}
@keyframes sd-damage-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
} 
/* ===== SIDEBAR & INVENTORY ===== */ 
.sidebar { 
  grid-area: sidebar; min-height: 0;
  display: flex; 
  flex-direction: column; 
  gap: 1.5rem; 
  border: 2px solid var(--term-dim); 
  padding: 1.5rem; 
  background: rgba(26, 17, 0, 0.95); 
  /* ⚡ GREEBLE: Side panel styling */ 
  border-left: 3px solid var(--panel-border); 
  position: relative; 
  border-radius: 4px; 
} 
/* ⚡ GREEBLE: Serial number on sidebar */ 
.sidebar::after { 
  content: 'MJ: Wu5-h3Re-X'; 
  position: absolute; 
  bottom: 10px; 
  right: 15px; 
  font-size: 0.8rem; 
  color: var(--term-dim); 
  letter-spacing: 1px; 
  opacity: 0.7; 
} 
.inventory { display: grid; gap: 0.75rem; flex-grow: 4; } 
.inventory.hidden-inventory { display: none; } 
/* ⚡ PHASE 7: DATA CARTRIDGE OVERHAUL */ 
.inventory-slot { 
  flex: 1; min-height: 60px; 
  border: 2px solid var(--term-dim); /* Solid border for cartridge feel */ 
  background: 
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px), /* Punched card texture */ 
    rgba(0,0,0,0.3); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: flex-start; 
  padding: 0.4rem 0.8rem; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  position: relative; 
  border-radius: 2px; 
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
} 
/* ASCII Corner Bracket */ 
.inventory-slot::before { 
  content: '+--'; 
  position: absolute; 
  top: 2px; 
  left: 4px; 
  font-size: 0.6rem; 
  color: var(--term-dim); 
  pointer-events: none; 
  z-index: 2; 
} 
/* ✅ FIX: Hover Diagnostic Readout - Only show if data-readout exists AND is not empty */ 
.inventory-slot:hover[data-readout]:not([data-readout=" "])::after { 
  content: attr(data-readout); 
  display: block; 
  position: absolute; 
  right: 105%; /* Pops out to the left */ 
  bottom: 0; 
  width: 180px; 
  background: var(--term-bg); 
  border: 1px solid var(--term-green); 
  padding: 0.5rem; 
  font-size: 0.8rem; 
  color: var(--term-green); 
  white-space: pre-wrap; 
  z-index: 100; 
  box-shadow: 0 0 10px var(--term-green); 
  text-shadow: none; 
  pointer-events: none; 
  animation: crt-flicker 0.1s steps(2); 
} 
/* Empty Socket (Hardware Bay Pins) */ 
.inventory-slot:empty { 
  border-style: dashed; 
  background: rgba(0,0,0,0.1); 
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.8); 
} 
.inventory-slot:empty::before { 
  content: '[ : : : : ]'; 
  position: absolute; 
  top: 50%; left: 50%; 
  transform: translate(-50%, -50%); 
  font-size: 0.8rem; 
  color: var(--rivet-color); 
  opacity: 0.6; 
} 
.inventory-slot:hover:not(:empty) { 
  border-color: var(--term-green); 
  background: rgba(255, 176, 0, 0.15); 
  transform: scale(1.03); 
  box-shadow: 0 0 10px rgba(255, 176, 0, 0.3); 
} 
.inventory-slot.uncommon { 
  border-color: var(--term-uncommon); 
  color: var(--term-uncommon); 
  box-shadow: 0 0 5px rgba(136, 204, 0, 0.3); 
} 
.inventory-slot.rare { 
  border-color: var(--term-rare); 
  color: var(--term-rare); 
  animation: rare-pulse 2s infinite; 
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); 
} 
@keyframes rare-pulse { 
  0%, 100% { box-shadow: 0 0 3px var(--term-rare); } 
  50% { box-shadow: 0 0 12px var(--term-rare); } 
} 
/* Card Internal Typography */ 
.card-title {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 2px;
  color: var(--term-green);
  text-shadow: var(--glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-desc {
  font-size: 1.3rem;
  color: var(--term-dim);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} 
/* Corrupted State: Containment Breach */ 
.inventory-slot.corrupted { 
  border-color: var(--term-alert); 
  position: relative; 
  animation: breach-pulse 0.4s infinite; 
} 
.inventory-slot.corrupted::before { 
  /* Marching Ants Edge Trace */ 
  content: ''; 
  position: absolute; 
  inset: 2px; 
  border: 2px dashed var(--term-alert); 
  opacity: 0.6; 
  pointer-events: none; 
  z-index: -1; 
  animation: ants-march 0.4s linear infinite; 
} 
.corrupted .card-title { 
  color: var(--term-alert); 
  text-shadow: 0 0 5px var(--term-alert); 
  animation: text-glitch 3s infinite steps(1); 
} 
@keyframes ants-march { 
  to { background-position: 10px 10px; } 
} 
@keyframes breach-pulse { 
  0%, 100% { box-shadow: 0 0 2px var(--term-alert); } 
  50% { box-shadow: 0 0 8px var(--term-alert); } 
} 
@keyframes text-glitch { 
  0%,  90%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); } 
  92% { transform: translate(-2px, 0); clip-path: inset(20% 0 40% 0); } 
  94% { transform: translate(2px, 0); clip-path: inset(60% 0 10% 0); } 
} 
@keyframes crt-flicker { 
  0% { opacity: 0; transform: scale(0.95); } 
  100% { opacity: 1; transform: scale(1); } 
} 
/* Burn Animation (Economy Sacrifice) */ 
.inventory-slot.burning { 
  animation: burn-dissolve 0.2s forwards; 
  pointer-events: none; 
} 
@keyframes burn-dissolve { 
  0% { filter: brightness(1) blur(0); transform: scale(1); opacity: 1; } 
  50% { filter: brightness(4) blur(2px); transform: scale(0.9); } 
  100% { filter: brightness(0) blur(5px); transform: scale(0.8); opacity: 0; } 
} 
/* ===== 🎰 AUTO-CASINO: INVENTORY SLOT STATES ===== */ 
/* 1. Text Scramble / Processing State */ 
.inventory-slot.scrambling { 
  animation: scramble-flicker 0.05s steps(2) infinite; 
  border-color: var(--term-dim); 
  color: var(--term-dim); 
  pointer-events: none; /* Block clicks while processing */ 
  z-index: 10; 
} 
.inventory-slot.scrambling::before { 
  content: '⚡ SCRAMBLING'; /* Override corner bracket */ 
  font-size: 0.5rem; 
  color: var(--term-dim); 
  top: -5px; left: 2px; 
} 
@keyframes scramble-flicker { 
  0% { opacity: 1; transform: translate(0, 0); } 
  25% { opacity: 0.3; transform: translate(-1px, 1px); } 
  50% { opacity: 0.8; transform: translate(1px, -1px); } 
  75% { opacity: 0.4; transform: translate(0, -1px); } 
  100% { opacity: 1; transform: translate(0, 0); } 
} 
/* 2. Selector Target (Legacy/Idle Fallback) */ 
.inventory-slot.selector-target { 
  border-color: var(--warning-yellow) !important; 
  background-color: rgba(255, 204, 0, 0.08); 
  box-shadow: 0 0 8px var(--warning-yellow), inset 0 0 4px var(--warning-yellow); 
  animation: selector-pulse 0.4s ease-in-out infinite alternate; 
  z-index: 5; 
} 
@keyframes selector-pulse { 
  from { box-shadow: 0 0 4px var(--warning-yellow); transform: scale(1.0); } 
  to { box-shadow: 0 0 12px var(--warning-yellow); transform: scale(1.01); } 
} 
/* ✅ NEW: 3. Selector Spinning (High-Speed Blur) */ 
.inventory-slot.selector-spinning { 
  border-color: var(--warning-yellow) !important; 
  background-color: rgba(255, 204, 0, 0.12); 
  box-shadow: 0 0 6px var(--warning-yellow), inset 0 0 4px var(--warning-yellow); 
  animation: selector-spin-blur 0.05s steps(2) infinite; 
  z-index: 5; 
} 
@keyframes selector-spin-blur { 
  0% { transform: scale(1.0) translate(0, 0); box-shadow: 0 0 4px var(--warning-yellow); opacity: 0.9; } 
  25% { transform: scale(1.01) translate(-1px, 0); opacity: 1; } 
  50% { transform: scale(1.0) translate(1px, 0); box-shadow: 0 0 12px var(--warning-yellow); opacity: 0.85; } 
  75% { transform: scale(1.01) translate(0, -1px); opacity: 1; } 
  100% { transform: scale(1.0) translate(0, 0); box-shadow: 0 0 4px var(--warning-yellow); opacity: 0.9; } 
} 
/* ✅ NEW: 4. Selector Locked (Final Position Anchor) */ 
.inventory-slot.selector-lock { 
  border-color: var(--warning-yellow) !important; 
  background-color: rgba(255, 204, 0, 0.08); 
  box-shadow: 0 0 10px var(--warning-yellow), inset 0 0 6px rgba(255, 204, 0, 0.3); 
  animation: selector-lock-pulse 0.5s ease-in-out infinite alternate; 
  z-index: 5; 
} 
@keyframes selector-lock-pulse { 
  from { box-shadow: 0 0 6px var(--warning-yellow); transform: scale(1.0); } 
  to { box-shadow: 0 0 16px var(--warning-yellow); transform: scale(1.015); } 
} 
/* ✅ NEW: 5. Selector Overload (Full Inventory Alert) */ 
.inventory-slot.selector-overload { 
  border-color: var(--term-alert) !important; 
  background-color: rgba(255, 68, 0, 0.1); 
  box-shadow: 0 0 8px var(--term-alert), inset 0 0 4px var(--term-alert); 
  animation: overload-glitch 0.15s steps(2) infinite; 
  z-index: 10; 
} 
@keyframes overload-glitch { 
  0%, 100% { transform: translate(0); clip-path: inset(0 0 0 0); } 
  25% { transform: translate(-1px, 1px) skewX(-1deg); clip-path: inset(20% 0 60% 0); } 
  50% { transform: translate(1px, -1px) skewX(1deg); clip-path: inset(50% 0 20% 0); border-color: var(--term-rare); } 
  75% { transform: translate(-1px, 0) skewX(0deg); clip-path: inset(10% 0 80% 0); } 
} 
/* 6. High-Value Reveal (Jackpot/Rare Target) */ 
.inventory-slot.high-value { 
  border-color: var(--term-rare) !important; 
  color: var(--term-rare); 
  box-shadow: 0 0 10px var(--term-rare); 
  animation: high-value-strobe 0.2s steps(2) infinite; 
} 
@keyframes high-value-strobe { 
  0% { background-color: rgba(0, 229, 255, 0.05); } 
  50% { background-color: rgba(0, 229, 255, 0.15); } 
  100% { background-color: rgba(0, 229, 255, 0.05); } 
} 
/* 7. Phase Lock (Block Clicks during Farming) */ 
.inventory-slot.slot-locked { 
  cursor: not-allowed !important; 
  pointer-events: none !important; 
  opacity: 0.85; 
  filter: grayscale(0.5); 
} 
.inventory-slot.slot-locked:hover { 
  border-color: var(--term-dim); 
  transform: none; 
  box-shadow: none; 
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0.2) 4px), rgba(0,0,0,0.3); 
} 
/* ===== SIDEBAR & INVENTORY (Legacy Rules Preserved for Compatibility) ===== */ 
/* 
⚡ PATCHED: Action Panel Stacking & Click-Through Fix 
*/ 
.action-panel { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
  margin-top: auto; 
  position: relative; /* Establish local stacking context */ 
  z-index: 50;        /* Forces panel above sidebar overlays/greebles */ 
  pointer-events: auto; /* Explicitly re-enables interaction */ 
} 
/* 
⚡ PATCHED: Terminal Buttons (Phosphor Glow + State Clarity) 
*/ 
.terminal-btn { 
  background: transparent; 
  border: 2px solid var(--term-dim); 
  color: var(--term-green); 
  padding: 1.25rem; 
  font-size: 1.3rem;
  letter-spacing: 2px;
  font-weight: bold; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  position: relative; 
  box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 2px 5px rgba(0,0,0,0.3); 
  border-radius: 3px; 
  font-family: var(--stencil-font); 
  pointer-events: auto; /* Guarantee click registration */ 
} 
/* ⚡ GREEBLE: Button press depression */ 
.terminal-btn:active { 
  transform: translateY(2px); 
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.3); 
} 
.terminal-btn:disabled { 
  opacity: 0.3; 
  cursor: not-allowed; 
  box-shadow: none; 
  pointer-events: none; /* Disable interaction at the source */ 
} 
/* ✅ NEW: Active State Phosphor Glow (Fixes "Too Dark" Issue) */ 
.terminal-btn:not(:disabled) { 
  color: var(--term-green); 
  text-shadow: 0 0 6px var(--term-green); /* Matches CRT phosphor intensity */ 
  border-color: var(--term-dim); 
  box-shadow: inset 0 0 10px rgba(0,0,0,0.4), 0 0 4px rgba(255,176,0,0.2); 
} 
.terminal-btn:not(:disabled):hover { 
  border-color: var(--term-green); 
  box-shadow: 0 0 15px var(--term-green), inset 0 0 10px rgba(255, 176, 0, 0.3); 
  background: rgba(255, 176, 0, 0.08); 
  text-shadow: 0 0 10px var(--term-green); 
} 
.intercept-btn {
  width: 100%; margin-top: 0.5rem;
  grid-column: 1 / -1;
  color: var(--term-rare); border-color: var(--term-rare);
  letter-spacing: 1px;
  font-size: 0.9rem;
  position: relative; overflow: hidden;
}
.intercept-btn:not(:disabled):hover {
  box-shadow: 0 0 14px var(--term-rare);
  border-color: var(--term-rare);
  color: var(--term-rare);
}
.intercept-btn.showing-count::after {
  content: attr(data-count);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--stencil-font);
  color: var(--term-rare);
  background: rgba(26, 17, 0, 0.94);
  text-shadow: 0 0 4px var(--term-rare);
  animation: signal-interference 0.2s steps(2) infinite;
  z-index: 10;
}
@keyframes signal-interference {
  0%, 100% { transform: translate(0); opacity: 1; }
  25% { transform: translate(-0.5px, 0.5px); opacity: 0.9; }
  50% { transform: translate(0.5px, -0.5px); opacity: 0.8; }
  75% { transform: translate(-0.5px, 0); opacity: 0.9; }
}
.round-counter { 
  text-align: center; 
  margin-top: 1rem; 
  padding-top: 1rem; 
  border-top: 2px solid var(--term-dim); 
  /* ⚡ GREEBLE: Digital counter styling */ 
  font-family: var(--stencil-font); 
  letter-spacing: 2px; 
  position: relative; 
} 
/* ⚡ GREEBLE: Round counter LED glow */ 
.round-counter::before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  width: 80%; 
  height: 120%; 
  background: radial-gradient(ellipse, rgba(255, 176, 0, 0.1) 0%, transparent 70%); 
  pointer-events: none; 
} 
/* ===== UTILITY & MEDIA ===== */ 
.hidden { display: none !important; } 
@keyframes damage-pulse { 50% { opacity: 0.5; } } 
/* ===== PHASE 3: CSS JUICE ===== */ 
.crt-channel-surf { 
  animation: channel-surf 0.3s ease-out forwards; 
  filter: blur(2px) contrast(1.2); 
} 
@keyframes channel-surf { 
  0% { opacity: 1; transform: scale(1); } 
  50% { opacity: 0.3; transform: scale(1.02); filter: blur(4px); } 
  100% { opacity: 1; transform: scale(1); filter: blur(0); } 
} 
.critical-failure { 
  animation: critical-shake 0.1s infinite; 
  text-shadow: 0 0 8px var(--term-alert), 0 0 16px var(--term-alert) !important; 
} 
@keyframes critical-shake { 
  0%, 100% { transform: translateX(0); } 
  25% { transform: translateX(-3px); } 
  75% { transform: translateX(3px); } 
} 
.card-acquired { 
  animation: drip-fade 1.5s ease-out forwards; 
} 
@keyframes drip-fade {
  0% { box-shadow: 0 0 0 0 rgba(255, 176, 0, 0.8); transform: scale(1); }
  50% { box-shadow: 0 0 20px 5px rgba(255, 176, 0, 0.4); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(255, 176, 0, 0); transform: scale(1); }
}

/* ===== ROUND HISTORY TICKER ===== */
.round-history {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: rgba(26, 17, 0, 0.7);
  border: 1px solid rgba(255, 176, 0, 0.12);
  border-radius: 2px;
  z-index: 20;
  pointer-events: auto;
}
.round-history-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--term-dim);
  background: transparent;
  border-radius: 50%;
  transition: all 0.3s ease;
  position: relative;
}
.round-history-dot.win {
  border-color: var(--term-green);
  background: var(--term-green);
  box-shadow: 0 0 5px var(--term-green), inset 0 0 2px rgba(0,0,0,0.3);
}
.round-history-dot.loss {
  border-color: var(--term-alert);
  background: var(--term-alert);
  box-shadow: 0 0 5px var(--term-alert), inset 0 0 2px rgba(0,0,0,0.3);
}
.round-history-dot.push {
  border-color: var(--warning-yellow);
  background: var(--warning-yellow);
  box-shadow: 0 0 5px var(--warning-yellow), inset 0 0 2px rgba(0,0,0,0.3);
}
.round-history-dot.active {
  border-color: var(--term-green);
  animation: history-pulse 1s ease-in-out infinite;
}
.round-history-dot.future {
  opacity: 0.25;
}
.round-history-dot.sudden-death {
  border-color: var(--term-alert);
  background: transparent;
  animation: history-sd-pulse 0.4s ease-in-out infinite;
}
@keyframes history-pulse {
  0%, 100% { box-shadow: 0 0 3px var(--term-green); }
  50% { box-shadow: 0 0 10px var(--term-green); }
}
@keyframes history-sd-pulse {
  0%, 100% { box-shadow: 0 0 3px var(--term-alert); transform: scale(1); }
  50% { box-shadow: 0 0 10px var(--term-alert); transform: scale(1.15); }
}
/* Match ticker dot results to the current round via tooltip */
.round-history-dot[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--term-bg);
  border: 1px solid var(--term-dim);
  padding: 2px 6px;
  font-size: 0.65rem;
  white-space: nowrap;
  color: var(--term-green);
  z-index: 100;
  pointer-events: none;
}

/* ===== BACKDROP ATMOSPHERE ELEMENTS ===== */
/* ⚡ SCANNING RADAR LINE — slow horizontal sweep down the table */
#blackjack-table .radar-sweep {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 176, 0, 0.25) 20%,
    rgba(255, 176, 0, 0.4) 40%,
    rgba(255, 176, 0, 0.05) 60%,
    transparent 100%
  );
  box-shadow:
    0 0 6px rgba(255, 176, 0, 0.3),
    0 0 12px rgba(255, 176, 0, 0.15);
  pointer-events: none;
  z-index: 3;
  animation: radar-sweep 6s ease-in-out infinite;
  will-change: top;
}
@keyframes radar-sweep {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 0.6; }
  45%  { opacity: 0.8; }
  50%  { top: 100%; opacity: 0; }
  55%  { opacity: 0; top: 0%; }
  100% { top: 0%; opacity: 0; }
}

/* ⚡ DATA STREAM TEXT — faint scrolling hex in the margins */
#blackjack-table .data-stream {
  position: absolute;
  font-family: var(--stencil-font);
  font-size: 0.5rem;
  color: var(--term-dim);
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  user-select: none;
  overflow: hidden;
  line-height: 1.1;
}
#blackjack-table .data-stream.left {
  left: 6px;
  top: 0;
  bottom: 0;
  animation: data-stream-scroll 12s linear infinite;
}
#blackjack-table .data-stream.right {
  right: 6px;
  top: 0;
  bottom: 0;
  animation: data-stream-scroll 15s linear infinite reverse;
}
@keyframes data-stream-scroll {
  0%   { transform: translateY(-20%); }
  100% { transform: translateY(20%); }
}

/* ===== PLACE YOUR BETS — Round Transition Overlay ===== */
/* ⚡ DARK CLOUD: Backdrop that hides everything behind the bet overlay */
#bet-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
}
#bet-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(26, 17, 0, 0.97) 0%,
    rgba(26, 17, 0, 0.92) 40%,
    rgba(26, 17, 0, 0.85) 70%,
    rgba(26, 17, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: -1;
}
#bet-overlay.bet-normal {
  animation: bet-overlay-fade 2.5s ease forwards;
}
#bet-overlay.bet-sudden-death {
  animation: bet-overlay-fade-sd 3s ease forwards;
}
#bet-overlay.bet-sudden-death::before {
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(26, 0, 0, 0.98) 0%,
    rgba(26, 0, 0, 0.93) 40%,
    rgba(26, 0, 0, 0.87) 70%,
    rgba(26, 0, 0, 0.75) 100%
  );
}
@keyframes bet-overlay-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes bet-overlay-fade-sd {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
.bet-text {
  font-family: var(--stencil-font);
  text-align: center;
  letter-spacing: 6px;
  text-transform: uppercase;
  filter: blur(0.5px);
}
.bet-text.bet-main {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--term-green);
  text-shadow:
    0 0 10px var(--term-green),
    0 0 20px var(--term-green),
    0 0 40px var(--term-dim);
  animation: bet-glitch 0.12s steps(2) infinite;
}
.bet-text.bet-sub {
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  color: var(--term-dim);
  margin-top: 0.5rem;
  letter-spacing: 4px;
  opacity: 0.8;
}
.bet-text.bet-sd {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--term-alert);
  text-shadow:
    0 0 15px var(--term-alert),
    0 0 30px var(--term-alert),
    0 0 60px rgba(255, 68, 0, 0.3);
  animation: bet-sd-jitter 0.08s steps(2) infinite;
}
@keyframes bet-glitch {
  0%   { transform: translate(0); opacity: 1; }
  25%  { transform: translate(-1px, 1px); opacity: 0.85; }
  50%  { transform: translate(1px, -1px); opacity: 1; }
  75%  { transform: translate(-1px, 0); opacity: 0.9; }
  100% { transform: translate(0); opacity: 1; }
}
@keyframes bet-sd-jitter {
  0%   { transform: translate(0); }
  25%  { transform: translate(-2px, 2px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -2px); }
  100% { transform: translate(0); }
}
/* ⚡ BET PARTICLES: bursts of terminal confetti around the overlay text */
.bet-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  pointer-events: none;
  animation: bet-particle-fly 1.5s ease-out forwards;
}
.bet-particle.sd {
  animation: bet-particle-sd 1.8s ease-out forwards;
}
@keyframes bet-particle-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@keyframes bet-particle-sd {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  50%  { transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.7)) scale(0.8) rotate(180deg); opacity: 0.8; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(360deg); opacity: 0; }
}

/* ===== CARD COUNT TOOLTIP (Hover on deck area) ===== */
.count-readout {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: var(--stencil-font);
  font-size: 0.6rem;
  color: var(--term-dim);
  z-index: 15;
  pointer-events: auto;
  cursor: help;
  opacity: 0.5;
  transition: opacity 0.2s;
  letter-spacing: 1px;
}
.count-readout:hover {
  opacity: 1;
  color: var(--term-green);
  text-shadow: 0 0 4px var(--term-green);
}
.count-readout[data-count]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 140%;
  right: 0;
  background: var(--term-bg);
  border: 1px solid var(--term-dim);
  padding: 6px 10px;
  font-size: 0.7rem;
  color: var(--term-green);
  white-space: pre-line;
  min-width: 160px;
  z-index: 100;
  pointer-events: none;
  text-shadow: none;
  line-height: 1.4;
}
.count-readout.visible {
  opacity: 0.7;
  color: var(--term-rare);
  text-shadow: 0 0 3px var(--term-rare);
} 
.bullet { position: relative; } 
.bullet::after { 
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); 
  width: 2px; height: 24px; background: linear-gradient(to bottom, var(--term-green), transparent); 
  animation: bullet-trail 0.2s linear forwards; 
} 
@keyframes bullet-trail { to { height: 0; opacity: 0; } } 
.invader { transition: transform 0.1s ease; } 
.invader:hover { 
  transform: scale(1.25); 
  text-shadow: 0 0 4px var(--term-green);
} 
/* ===== SYSTEM SURGE BULLETS ===== */ 
.bullet.surge { 
  color: var(--term-alert) !important; 
  animation: bullet-fly 0.3s linear forwards, surge-pulse 0.1s infinite; 
  z-index: 15; 
  text-shadow: 0 0 8px var(--term-green), 0 0 12px rgba(255, 176, 0, 0.6);
} 
/* Suppress the standard vertical laser pipe trail for Surge Diamonds at launch */
.bullet.surge::after { 
  content: none !important;
} 
@keyframes surge-pulse { 
  0%, 100% { text-shadow: 0 0 8px var(--term-alert), 0 0 16px var(--term-alert); } 
  50% { text-shadow: 0 0 15px var(--term-alert), 0 0 30px var(--term-alert); } 
} 
/* ===== ⚡ GREEBLE: Additional Atmospheric Layers ===== */ 
/* Vignette overlay */ 
.terminal-container::after { 
  content: ''; 
  position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; 
  background: var(--vignette); 
  pointer-events: none; 
  z-index: 2; 
} 
/* ⚡ GREEBLE: Random static noise animation */ 
@keyframes static-noise { 
  0% { background-position: 0 0; } 
  10% { background-position: -5% -10%; } 
  20% { background-position: -15% 5%; } 
  30% { background-position: 7% -25%; } 
  40%  { background-position: -5% 25%; } 
  50% { background-position: -15% 10%; } 
  60% { background-position: 15% 0%; } 
  70% { background-position: 0% 15%; } 
  80% { background-position: -15% -10%; } 
  90% { background-position: 10% 20%; } 
  100% { background-position: 0 0; } 
} 
/* ⚡ GREEBLE: Occasional screen glitch */ 
@keyframes screen-glitch { 
  0%, 90%, 100% { transform: translate(0); filter: none; } 
  92% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); } 
  94% { transform: translate(2px, -1px); filter: hue-rotate(-90deg); } 
  96% { transform: translate(-1px, 2px); filter: saturate(2); } 
  98% { transform: translate(1px, -2px); filter: none; } 
} 
/* Apply glitch occasionally to main display */ 
.main-display { 
  animation: screen-glitch 20s infinite; 
} 
/* ⚡ GREEBLE: Phosphor afterimage effect */ 
@keyframes phosphor-afterimage { 
  0% { opacity: 1; } 
  50% { opacity: 0.8; } 
  100% { opacity: 1; } 
} 

/* ⚡ GREEBLE: Panel seam lines */ 
.top-bar, .main-display, .sidebar { 
  position: relative; 
} 
.top-bar::before, 
.main-display::before, 
.sidebar::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 1px; 
  background: linear-gradient( 
    to right, 
    transparent 0%, 
    var(--panel-border) 10%, 
    var(--panel-border) 90%, 
    transparent 100% 
  ); 
  opacity: 0.5; 
} 
/* ⚡ GREEBLE: Worn edge highlights */ 
.terminal-container, 
.top-bar, 
.main-display, 
.sidebar { 
  border-image: linear-gradient( 
    to bottom, 
    rgba(255, 176, 0, 0.3) 0%, 
    rgba(255, 176, 0, 0.1) 50%, 
    rgba(0, 0, 0, 0.5) 100% 
  ) 1; 
} 
/* ⚡ GREEBLE: Warning stripes on critical elements */ 
.hp-bar.damage-flash { 
  background-image: repeating-linear-gradient( 
    45deg, 
    var(--term-alert), 
    var(--term-alert) 5px, 
    #000 5px, 
    #000 10px 
  ) !important; 
} 
/* ⚡ GREEBLE: Rivet decorations on corners */ 
.terminal-container::before { 
  content: '⊕ ⊕'; 
  position: absolute; 
  top: 5px; 
  left: 10px; 
  color: var(--rivet-color); 
  font-size: 1rem; 
  letter-spacing: 15px; 
  z-index: 3; 
  pointer-events: none; 
} 
.terminal-container::after { 
  content: '⊕ ⊕'; 
  position: absolute; 
  top: 5px; 
  right: 10px; 
  color: var(--rivet-color); 
  font-size: 1rem; 
  letter-spacing: 15px; 
  z-index: 3; 
  pointer-events: none; 
} 

/* ===== 🃏 PHASE 4: INSCRYPTION-STYLE JUICE & FEEDBACK ===== */ 
/* Card Deal Trail */ 
@keyframes card-arrive { 
  0% { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(0.85); } 
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } 
} 
/* Card Physical Tilt on Hover — REPLACED by fan-preserving hover above */
/* HP Bar Ghost Drain Trail */ 
.hp-fill::after { 
  content: ''; position: absolute; top: 0; right: -8px; width: 8px; height: 100%; 
  background: linear-gradient(to right, var(--term-alert), transparent); 
  opacity: 0; transition: opacity 0.1s; pointer-events: none; 
} 
.hp-bar.damage-flash .hp-fill::after { opacity: 1; } 
/* Screen Flash Overlay Base */ 
#flash-overlay { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  pointer-events: none; z-index: 9997; opacity: 0; mix-blend-mode: screen; 
} 
/* Particle System CSS */ 
#particle-container { 
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
  pointer-events: none; z-index: 9996; overflow: hidden; 
} 
.particle { 
  position: absolute; width: 4px; height: 4px; border-radius: 50%; pointer-events: none; 
  box-shadow: 0 0 6px currentColor; animation: particle-fly 0.6s ease-out forwards; 
} 
@keyframes particle-fly { 
  0% { transform: translate(0, 0); opacity: 1; } 
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 
}
/* --- Tactical Particle Variants --- */
.particle-square {
  position: absolute; width: 5px; height: 5px; border-radius: 0; pointer-events: none;
  box-shadow: 0 0 8px currentColor;
  animation: particle-fly 0.35s ease-out forwards;
}
.particle-bleed {
  position: absolute; pointer-events: none;
  font-family: var(--stencil-font); font-size: 0.7rem;
  color: var(--term-green); text-shadow: 0 0 4px var(--term-green);
  animation: particle-bleed-flicker 0.4s steps(3) forwards;
}
.particle-scanline {
  position: absolute; width: 4px; height: 4px; border-radius: 0; pointer-events: none;
  background: var(--term-green); box-shadow: 0 0 6px var(--term-green);
  animation: particle-sweep 0.02s linear forwards;
}
@keyframes particle-bleed-flicker {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  50% { opacity: 0.3; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
@keyframes particle-sweep {
  0% { opacity: 1; }
  100% { opacity: 0; }
} 
/* Typewriter Cursor */ 
.typewriter-cursor::after { 
  content: '█'; animation: blinker 1s step-end infinite; color: var(--term-green); margin-left: 2px; 
} 
/* State Scan Wipe */ 
.scan-wipe::before { 
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; 
  background: var(--term-green); box-shadow: 0 0 8px var(--term-green), 0 0 15px var(--term-dim); 
  animation: scan-wipe 0.4s ease-out forwards; pointer-events: none; z-index: 10; 
} 
@keyframes scan-wipe { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 0; } } 
/* Commander Damage Glitch */ 
.cmdr-glitch { animation: cmdr-glitch 0.3s steps(3) forwards; } 
@keyframes cmdr-glitch { 
  0% { clip-path: inset(0 0 80% 0); transform: translate(-2px, 1px); } 
  25% { clip-path: inset(40% 0 20% 0); transform: translate(2px, -1px); } 
  50% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 2px); } 
  75% { clip-path: inset(70% 0 5% 0); transform: translate(1px, -2px); } 
  100% { clip-path: inset(0 0 0 0); transform: translate(0); } 
} 
/* ===== ⚡ NEW: ATMOSPHERIC FLICKER (60Hz Jitter) ===== */ 
@keyframes flicker { 
  0% { opacity: 0.97; } 
  5% { opacity: 0.95; } 
  10% { opacity: 0.9; } 
  100% { opacity: 1; } 
} 
#crt-overlay { 
  background: 
    radial-gradient(circle, transparent 40%, rgba(0,0,0,0.5) 100%), 
    repeating-linear-gradient(rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 2px); 
  animation: flicker 0.15s infinite; 
  pointer-events: none; 
  position: fixed; 
  top: 0; left: 0; width: 100%; height: 100%; 
  z-index: 9999; 
} 
/* ======================================== */ 
/* ⚡ PHASE 6: JUICE & ECONOMY FEEDBACK  */ 
/* ======================================== */ 
/* High-Value Target (Anomaly) Visuals */ 
.anomaly-target { 
  color: var(--term-rare); 
  text-shadow: 0 0 15px var(--term-rare); 
  animation: fast-jitter 0.1s infinite !important; 
  will-change: transform; 
} 
@keyframes fast-jitter { 
  0% { transform: translate(1px, 1px); } 
  50% { transform: translate(-1px, -1px); } 
  100% { transform: translate(1px, -1px); } 
} 
/* Tactile Impact (Screen Shake scoped to Main Display) */ 
.main-display.heavy-impact { 
  animation: heavy-shake 0.15s cubic-bezier(.36,.07,.19,.97) both; 
  contain: layout style paint; 
} 
@keyframes heavy-shake { 
  10%, 90% { transform: translate3d(-2px, 2px, 0); } 
  20%, 80% { transform: translate3d(4px, -2px, 0); } 
  30%, 50%, 70% { transform: translate3d(-6px, 4px, 0); } 
  40%, 60% { transform: translate3d(6px, -4px, 0); } 
} 
/* Mechanical Card Print Animation */ 
.card-print { 
  animation: card-slide-in 0.2s ease-out, card-phosphor-flicker 0.4s steps(4); 
} 
@keyframes card-slide-in { 
  from { transform: translateY(20px); opacity: 0; } 
  to { transform: translateY(0); opacity: 1; } 
} 
@keyframes card-phosphor-flicker {
  0% { background: var(--term-green); color: var(--term-bg); }
  100% { background: var(--term-bg); color: var(--term-green); }
}
/* ⚡ CARD BRACKET SLOT: MGS-terminal empty placeholder before a card arrives */
.card-bracket {
  width: 130px;
  min-width: 120px;
  max-width: 150px;
  height: clamp(100px, 14vh, 130px);
  border: 2px dashed var(--term-dim);
  opacity: 0.25;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--term-dim);
  letter-spacing: 2px;
  border-radius: 3px;
  position: relative;
  margin-right: -1rem;
  z-index: 0;
  animation: bracket-pulse 1.5s ease-in-out infinite;
}
@keyframes bracket-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}
/* ─── Compact bracket variant for crowded hands (5+ cards) ─── */
.card-bracket.compact {
  width: 90px;
  min-width: 80px;
  max-width: 100px;
  height: clamp(70px, 10vh, 90px);
  margin-right: -0.5rem;
}
/* ⚡ CARD FLING-IN: Cards fly in from a central deal origin point */
@keyframes card-fling-in {
  0% {
    transform: translate(calc(var(--deal-dx, 0px) * 1.2), calc(var(--deal-dy, 300px))) rotate(15deg) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--deal-dx, 0px) * 0.1), 10px) rotate(2deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(calc(var(--fan-angle, 0deg) * 0.5)) scale(1);
    opacity: 1;
  }
}
.card-fling {
  animation: card-fling-in 0.35s cubic-bezier(0.15, 0.85, 0.35, 1) forwards, card-phosphor-flicker 0.4s steps(4);
}
/* Memory Corruption Glitch (Scoped to Blackjack Table) */ 
#blackjack-table.system-glitch { 
  animation: glitch-skew 0.2s infinite; 
  filter: hue-rotate(90deg) contrast(150%); 
  contain: layout style paint; 
} 
@keyframes glitch-skew { 
  0% { transform: skew(0deg); } 
  20% { transform: skew(3deg); } 
  40% { transform: skew(-3deg); } 
  100% { transform: skew(0deg); } 
} 
/* ===== PHASE 1 DOPAMINE: Combo Counter Overlay ===== */
.combo-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  pointer-events: none;
}
.combo-overlay.combo-pop {
  animation: combo-pop-in 0.3s ease-out forwards;
}
.combo-overlay.combo-fade {
  animation: combo-fade-out 0.4s ease-out forwards;
}
.combo-text {
  font-family: var(--stencil-font);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--term-green);
  text-shadow: 0 0 20px var(--term-green), 0 0 40px var(--term-green);
  letter-spacing: 4px;
  display: block;
  text-align: center;
}
@keyframes combo-pop-in {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes combo-fade-out {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* ===== PHASE 1 DOPAMINE: Jackpot Overlay ===== */
.jackpot-overlay {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--stencil-font);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--warning-yellow);
  text-shadow: 0 0 30px var(--warning-yellow), 0 0 60px var(--warning-yellow), 0 0 90px var(--term-alert);
  z-index: 500;
  pointer-events: none;
  animation: jackpot-flash 0.6s ease-out forwards;
  letter-spacing: 8px;
}
.jackpot-overlay.jackpot-fade {
  animation: jackpot-fade 0.4s ease-out forwards;
}
@keyframes jackpot-flash {
  0% { opacity: 0; transform: scale(0.4); }
  30% { opacity: 1; transform: scale(1.3); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; }
}
@keyframes jackpot-fade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* ===== PHASE 1 DOPAMINE: Screen Border Pulse on Kill ===== */
.main-display.border-pulse {
  animation: border-pulse 0.4s ease-out;
}
@keyframes border-pulse {
  0% { box-shadow: 0 0 0 rgba(255, 176, 0, 0.6); }
  30% { box-shadow: 0 0 30px rgba(255, 176, 0, 0.4), 0 0 60px rgba(255, 176, 0, 0.2); }
  100% { box-shadow: 0 0 0 rgba(255, 176, 0, 0); }
}

/* ===== PHASE 1 DOPAMINE: Transmission feed reel animation ===== */
/* The transmission text uses these during the RPS slot reveal */
#transmission-text {
  transition: color 0.1s ease;
}
#transmission-text.reel-spinning {
  color: var(--warning-yellow);
  text-shadow: 0 0 8px var(--warning-yellow);
}
#transmission-text.reel-locked {
  color: var(--term-green);
  text-shadow: 0 0 12px var(--term-green);
}

/* ===== PHASE 1 DOPAMINE: Bigger RPS buttons — slot machine handles ===== */
.rps-btn {
  padding: 0.7rem 1rem !important;
  font-size: clamp(0.6rem, 1.6vw, 0.85rem) !important;
  transition: all 0.1s ease !important;
  cursor: pointer !important;
}
.rps-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--term-green);
}
.rps-btn:active {
  transform: scale(0.96);
}
.rps-btn:disabled {
  cursor: default;
  filter: brightness(0.5);
}

/* ===== PHASE 1 DOPAMINE: Inventory slot flash on card drop ===== */
.inventory-slot.slot-drop-flash {
  animation: slot-drop-flash 0.5s ease-out;
}
@keyframes slot-drop-flash {
  0% { box-shadow: 0 0 0 var(--warning-yellow); border-color: var(--warning-yellow); }
  40% { box-shadow: 0 0 20px var(--warning-yellow), 0 0 40px var(--warning-yellow); }
  100% { box-shadow: 0 0 4px var(--term-dim); border-color: var(--term-dim); }
}

/* ===== PHASE 1 DOPAMINE: Pachinko lane column highlights ===== */
.trajectory-trace {
  /* Enhanced: pay-out lane glow for lucky lane columns */
  opacity: 0.15;
}
/* Specific columns get a "payout lane" highlight */
.trajectory-trace[style*="column: 3"],
.trajectory-trace[style*="column: 6"],
.trajectory-trace[style*="column: 9"],
.trajectory-trace[style*="column: 12"] {
  opacity: 0.25;
  background: linear-gradient(to bottom, transparent, rgba(255, 204, 0, 0.2), transparent);
}

/* Accessibility: Phase 1 dopamine additions */
@media (prefers-reduced-motion: reduce) {
  .combo-overlay, .jackpot-overlay, .border-pulse, .slot-drop-flash {
    animation: none !important;
  }
  .rps-btn:hover { transform: none !important; }
  .rps-btn:active { transform: none !important; }
}
body.reduced-fx .combo-overlay,
body.reduced-fx .jackpot-overlay,
body.reduced-fx .border-pulse,
body.reduced-fx .slot-drop-flash {
  animation: none !important;
}
body.reduced-fx .rps-btn:hover { transform: none !important; }
body.reduced-fx .rps-btn:active { transform: none !important; }

/* ===== SHIP PLACEMENT ANIMATION ===== */
/* Expanding ring that appears when an invader locks into position */
@keyframes ship-placement-ring {
  0%   { transform: scale(0.3); opacity: 0.8; }
  50%  { transform: scale(1.2); opacity: 0.4; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Glow flicker when ship is freshly placed — quickly fades */
.invader.just-placed {
  animation: invader-place-glow 0.5s ease-out forwards;
}
@keyframes invader-place-glow {
  0%   { text-shadow: 0 0 20px var(--term-alert), 0 0 40px var(--term-alert); opacity: 0; transform: scale(2.5); }
  20%  { opacity: 1; transform: scale(0.9); }
  40%  { transform: scale(1.05); }
  60%  { transform: scale(0.97); }
  100% { text-shadow: 0 0 4px currentColor; opacity: 1; transform: scale(1); }
}

/* Accessibility: Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .heavy-impact, .system-glitch, .anomaly-target, .card-print, .scrambling, .selector-target, .high-value,
  .selector-spinning, .selector-lock, .selector-overload {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
  .inventory-slot.corrupted {
    border-style: dashed;
  }
  /* ⚡ SEIZURE-RISK SUPPRESSION: scanline scroll, phosphor flicker, full-screen
     flash bursts, and glitch overlays go static. Color-state info is preserved. */
  .scanlines { animation: none !important; }
  .splash-art, .phosphor-decay, .phosphor-decay-2, .phosphor-decay-1 { animation: none !important; }
  .pulse, .cmdr-glitch, .jammed, .snark-shake { animation: none !important; }
  #flash-overlay { opacity: 0 !important; animation: none !important; transition: none !important; }
  .outcome-glitch-screen, .outcome-glitch-screen::after, .outcome-glitch-move,
  .glitch-bar-sweep, .crt-channel-surf { animation: none !important; filter: none !important; }
}

/* Accessibility: in-game REDUCED FX toggle (mirrors the media query for users
   who haven't set the OS preference). Applied as body.reduced-fx. */
body.reduced-fx .heavy-impact, body.reduced-fx .system-glitch, body.reduced-fx .anomaly-target,
body.reduced-fx .card-print, body.reduced-fx .scrambling, body.reduced-fx .selector-target,
body.reduced-fx .high-value, body.reduced-fx .selector-spinning, body.reduced-fx .selector-lock,
body.reduced-fx .selector-overload,
body.reduced-fx .scanlines,
body.reduced-fx .splash-art, body.reduced-fx .phosphor-decay,
body.reduced-fx .phosphor-decay-2, body.reduced-fx .phosphor-decay-1,
body.reduced-fx .pulse, body.reduced-fx .cmdr-glitch, body.reduced-fx .jammed,
body.reduced-fx .snark-shake,
body.reduced-fx .outcome-glitch-screen, body.reduced-fx .outcome-glitch-move,
body.reduced-fx .glitch-bar-sweep, body.reduced-fx .crt-channel-surf {
  animation: none !important;
  filter: none !important;
}
body.reduced-fx .heavy-impact, body.reduced-fx .system-glitch {
  transform: none !important;
}
body.reduced-fx #flash-overlay {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}
body.reduced-fx .inventory-slot.corrupted { border-style: dashed; }
/* ═══════════════════════════════════════════════════════════════
   📱 BASELINE RESPONSIVE LAYER
   Media-query-only — desktop layout above is untouched.
   Strategy: below 900px the terminal re-stacks into a single column
   (comms → battle grid → console strip). Greeble labels hide to
   reclaim space. Below 560px type and chrome compress further and
   the splash ASCII art scales with viewport width.
   ═══════════════════════════════════════════════════════════════ */

/* Mobile browsers: 100vh includes the URL bar; dvh tracks the real viewport */
@supports (height: 100dvh) {
  body { height: 100dvh; }
  .terminal-container { height: 100dvh; }
  #splash-screen { height: 100dvh; }
}

@media (max-width: 900px) {
  /* ── Single-column terminal: top bar / battle grid / console strip ── */
  .terminal-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "main" "sidebar";
    padding: 0.5rem;
    gap: 0.5rem;
  }

  /* ── Top bar: compact commander cluster ── */
  /* The transmission line is white-space:nowrap (slot-reel readout) — grid
     tracks won't shrink below it unless the 1fr column is minmax(0,1fr).
     Clip long feed text with an ellipsis instead of widening the page. */
  .top-bar { gap: 0.5rem; padding: 0.5rem 0.6rem; grid-template-columns: auto minmax(0, 1fr); }
  .comms-feed, .comms-body, .speech-line, .transmission-line { min-width: 0; }
  .transmission-line { overflow: hidden; text-overflow: ellipsis; }
  .speech-line { overflow: hidden; }
  .commander-cluster { padding: 0.25rem; }
  .commander-avatar { font-size: clamp(2rem, 6vw, 3rem); }
  .hp-bar { width: clamp(90px, 18vw, 160px); }

  /* ── Sidebar becomes a horizontal console strip under the grid ── */
  .sidebar {
    padding: 0.6rem;
    gap: 0.6rem;
    border-left: 2px solid var(--panel-border);
  }
  .inventory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    flex-grow: 0;
  }
  .inventory-slot { min-height: 52px; }
  .action-panel { gap: 0.5rem; margin-top: 0; }
  .round-counter { margin-top: 0.25rem; padding-top: 0.4rem; }

  /* ── Reclaim space: decorative labels off on small panels ── */
  .top-bar::after,
  .main-display::before,
  .main-display::after,
  .sidebar::after,
  .terminal-container::before { display: none; }
}

@media (max-width: 560px) {
  body { font-size: clamp(0.85rem, 3.2vw, 1rem); letter-spacing: 0.5px; }
  .terminal-container { padding: 0.35rem; gap: 0.35rem; border-width: 2px; }
  .top-bar { padding: 0.4rem 0.5rem; }
  .comms-feed { padding: 0.35rem 0.5rem; }
  .comms-header { font-size: 0.65rem; letter-spacing: 1px; }
  .main-display { padding: 0.5rem; }
  .sidebar { padding: 0.5rem; gap: 0.5rem; }
  .inventory-slot { min-height: 44px; }
  .terminal-btn { padding: 0.5rem 0.4rem; font-size: 0.85rem; letter-spacing: 1px; }

  /* ── Splash: ASCII art scales to viewport, controls stay tappable ── */
  .splash-art { font-size: clamp(0.4rem, 2.4vw, 1.2rem); margin-bottom: 1rem; }
  .splash-content { gap: 0.9rem; padding: 0 0.75rem; }
  .splash-btn { font-size: 0.9rem; padding: 0.6rem 0.9rem; letter-spacing: 1px; }
}

/* ── Touch devices: comfortable hit targets regardless of width ── */
@media (pointer: coarse) {
  .terminal-btn, .splash-btn, .vol-box { min-height: 44px; }
  .inventory-slot { min-height: 48px; }
}

/* ── Short landscape phones: keep the battle grid dominant ── */
@media (max-height: 480px) and (orientation: landscape) {
  .terminal-container {
    grid-template-columns: minmax(0, 2.2fr) minmax(160px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "main sidebar";
    padding: 0.35rem;
    gap: 0.35rem;
  }
  .top-bar { padding: 0.3rem 0.5rem; }
  .commander-avatar { font-size: 1.6rem; }
  .comms-feed { padding: 0.25rem 0.5rem; gap: 0.2rem; }
  .comms-body { gap: 0.3rem; }
  /* Sidebar content is taller than a short viewport — scroll inside its
     panel instead of forcing the whole terminal frame past 100vh */
  .sidebar { padding: 0.5rem; gap: 0.4rem; overflow-y: auto; }
  .inventory { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem; flex-grow: 0; }
  .inventory-slot { min-height: 40px; }
  .action-panel { gap: 0.35rem; margin-top: 0; }
  .terminal-btn { padding: 0.4rem 0.4rem; font-size: 0.8rem; letter-spacing: 1px; }
  .round-counter { margin-top: 0.2rem; padding-top: 0.3rem; }
  .splash-art { font-size: clamp(0.4rem, 1.6vh, 0.9rem); margin-bottom: 0.5rem; }
}