/* BaseRogue Stylesheet */
/* Overhauled for 8-Bit Retro Arcade Baseball theme */

:root {
  --bg-color: #07140e;
  --panel-bg: rgba(0, 12, 6, 0.95);
  --border-color: #10b981;
  --primary-color: #00ff66; /* Vibrant retro green */
  --primary-glow: rgba(0, 255, 102, 0.5);
  --accent-color: #ffcc00; /* Retro yellow */
  --accent-glow: rgba(255, 204, 0, 0.5);
  --danger-color: #ff3333;
  
  --rarity-common: #8e9e98;
  --rarity-uncommon: #10b981;
  --rarity-rare: #00ccff;
  --rarity-epic: #cc00ff;
  --rarity-legendary: #ffcc00;

  --badge-clutch: #ff3300;
  --badge-captain: #00d4ff;
  --badge-build-era: #ff2ec4;
  --badge-build-era-glow: rgba(255, 46, 196, 0.5);
  --badge-challenge-winner: #ffd700;

  /* 162-0 Challenge identity color — distinct accent for its own screens */
  --challenge162-accent: #ffd700;
  --challenge162-accent-glow: rgba(255, 215, 0, 0.35);

  /* Career Mode's own identity color — distinct from the core green/yellow
     theme (Story Mode also keeps its own accents), kept as a real variable
     instead of hardcoded hex so it can be reused consistently. */
  --career-accent: #ec4899;
  --career-accent-dim: #db2777;
  --career-accent-glow: rgba(236, 72, 153, 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0px !important; /* Force blocky NES style everywhere */
}

body {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  background-color: var(--bg-color);
  /* Clean 16-Bit Arcade Stadium Background */
  background-image: 
    linear-gradient(180deg, rgba(3, 10, 6, 0.72) 0%, rgba(3, 10, 6, 0.88) 100%),
    url('assets/TEST.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f3f4f6;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

body.on-main-menu {
  background-image: 
    linear-gradient(180deg, rgba(3, 10, 6, 0.65) 0%, rgba(3, 10, 6, 0.82) 100%),
    url('assets/TEST3.webp') !important;
}

/* Header */
header {
  background-color: #000;
  border-bottom: 4px double var(--primary-color);
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 0 #000;
  z-index: 10;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--primary-color);
  text-shadow: 2px 2px 0px #000, 4px 4px 0px var(--primary-glow);
  text-transform: uppercase;
}

.logo i {
  color: var(--primary-color);
  font-size: 20px;
  text-shadow: 2px 2px 0 #000;
}

.game-hud {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hud-item {
  background: rgba(0, 0, 0, 0.6);
  border: 3px double #ffffff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  font-family: 'Press Start 2P', monospace;
  border-radius: 4px;
}

.hud-item i {
  color: var(--accent-color);
}

.hud-item.stage i {
  color: var(--primary-color);
}

.hud-item.budget {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.22) 0%, rgba(20, 16, 4, 0.95) 100%) !important;
  border: 2px solid #eab308 !important;
  box-shadow: 0 0 12px rgba(234, 179, 8, 0.45), inset 0 0 6px rgba(234, 179, 8, 0.2) !important;
  border-radius: 6px !important;
  color: #fef08a !important;
  font-size: 9.5px !important;
  padding: 8px 14px !important;
}

.hud-item.budget i {
  color: #facc15 !important;
  font-size: 13px !important;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.8)) !important;
}

#hud-budget-val {
  color: #fde047 !important;
  font-size: 12.5px !important;
  font-weight: bold !important;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.8) !important;
  margin-left: 3px !important;
}

/* Mobile-only toggle buttons — hidden on desktop where 3 columns are always visible */
#btn-toggle-roster-view,
#btn-toggle-synergies-mobile {
  display: none;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Retro double borders */
.glass-panel {
  background: var(--panel-bg);
  border: 4px double var(--border-color);
  box-shadow: 0 0 0 4px #000, 0 10px 20px rgba(0,0,0,0.5);
  padding: 24px;
  margin-bottom: 24px;
}

/* Headings */
h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 2px 2px 0px #000;
}

h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 10px;
}

h4 {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

p {
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.4;
  color: #a1a1aa;
  margin-bottom: 12px;
}

/* Buttons */
.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 10px 16px;
  background: var(--primary-color);
  color: #000;
  border: 4px double #ffffff;
  box-shadow: 0 0 0 2px #000;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 0 8px var(--primary-glow);
}

.btn:active {
  transform: translateY(2px);
}

.btn-secondary {
  background: #1e293b;
  color: #fff;
  border-color: #64748b;
}

.btn-secondary:hover {
  background: #334155;
  color: #fff;
}

/* Roster Slots & Management */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.roster-slot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.4);
  border: 3px double rgba(255,255,255,0.08);
  padding: 8px;
  transition: transform 0.2s, background 0.2s;
}

.roster-slot-container.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.roster-slot-container.drag-over {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-color);
  transform: scale(1.05);
}

.roster-slot-header {
  font-size: 8px;
  color: var(--accent-color);
  margin-bottom: 8px;
  font-weight: bold;
}

.bench-container {
  margin-top: 24px;
  background: rgba(0,0,0,0.3);
  padding: 16px;
  border: 4px double rgba(255,255,255,0.05);
}

.bench-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  justify-items: center;
}

/* Cards System - Blocky 8-bit styling */
.player-card {
  width: 152px;
  height: 236px;
  position: relative;
  background: #1e293b;
  border: 4px double #ffffff;
  box-shadow: 0 0 0 3px #000;
  padding: 7px 8px 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.player-card.rarity-Common {
  border: 3px solid var(--rarity-common);
  box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
}
.player-card.rarity-Uncommon {
  border: 3px solid var(--rarity-uncommon);
  box-shadow: 0 0 6px var(--rarity-uncommon), inset 0 0 6px rgba(16, 185, 129, 0.12);
}
.player-card.rarity-Rare {
  border: 3px solid var(--rarity-rare);
  box-shadow: 0 0 8px var(--rarity-rare), inset 0 0 8px rgba(0, 204, 255, 0.15);
}
.player-card.rarity-Epic {
  border: 3px solid var(--rarity-epic);
  box-shadow: 0 0 12px var(--rarity-epic), inset 0 0 10px rgba(204, 0, 255, 0.2);
}
.player-card.rarity-Legendary {
  border: 3px double var(--rarity-legendary);
  box-shadow: 0 0 16px var(--rarity-legendary), inset 0 0 12px rgba(255, 204, 0, 0.3);
  animation: gold-glow-pulse 2s infinite alternate;
}

@keyframes gold-glow-pulse {
  0% { box-shadow: 0 0 6px var(--rarity-legendary), inset 0 0 5px rgba(255, 204, 0, 0.15); }
  100% { box-shadow: 0 0 18px var(--rarity-legendary), inset 0 0 15px rgba(255, 204, 0, 0.4); }
}

/* ── BADGE CORNER RIBBONS & COMBINED GLOWS ────────────────────── */
.card-ribbon {
  position: absolute;
  width: 85px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  font-weight: bold;
  letter-spacing: 0.5px;
  padding: 1.5px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  z-index: 25;
  cursor: help;
  user-select: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  transition: filter 0.2s ease;
}

/* Single Badge at Bottom-Left Corner (+45 deg diagonal angle) */
.card-ribbon.ribbon-bottom-left {
  bottom: 11px;
  left: -26px;
  transform: rotate(45deg);
}

.card-ribbon.ribbon-clutch {
  background: linear-gradient(135deg, #ff4500, #dc2626);
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
}

.card-ribbon.ribbon-captain {
  background: linear-gradient(135deg, #00d4ff, #0284c7);
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
}

/* Double Badge Staggered (Both maintain identical 45° diagonal angle & size) */
.card-ribbon.ribbon-stagger-1 {
  bottom: 21px;
  left: -22px;
  z-index: 26;
}

.card-ribbon.ribbon-stagger-2 {
  bottom: 7px;
  left: -29px;
  z-index: 25;
}

.card-ribbon:hover {
  filter: brightness(1.3);
}

/* Story Mode inter-era wildcard — a full-width glowing strip, not a corner
   ribbon (a diagonal ribbon reads fine for "CLUTCH" but a longer phrase like
   "OUT OF ERA" was illegible at that size/angle). */
.card-interera-banner {
  width: 100%;
  background: linear-gradient(90deg, #f59e0b, #b45309);
  color: #1a1002;
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  font-weight: bold;
  text-align: center;
  padding: 3px 2px;
  letter-spacing: 0.3px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  animation: interera-banner-glow 1.6s ease-in-out infinite;
  z-index: 5;
}

@keyframes interera-banner-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
  50%      { box-shadow: 0 0 14px rgba(245, 158, 11, 0.9); }
}

/* Outcome Row Modifier Pills (Zonas de la Suerte) */
.outcome-row-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.outcome-row-right {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.zone-modifier-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 6px;
  font-weight: bold;
  font-family: 'Press Start 2P', monospace;
  padding: 1.5px 4px;
  border-radius: 3px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.zone-modifier-pill.pill-boost {
  background: rgba(0, 255, 102, 0.2);
  border: 1px solid #00ff66;
  color: #00ff66;
}

.zone-modifier-pill.pill-penalty {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #ef4444;
}

.zone-modifier-pill.pill-hr {
  background: rgba(234, 179, 8, 0.25);
  border: 1px solid #eab308;
  color: #fef08a;
}

/* Combined Badge Glows (summed to Rarity Glow) */
.player-card.has-clutch {
  box-shadow: 0 0 10px var(--badge-clutch), inset 0 0 6px rgba(255, 51, 0, 0.2) !important;
}

.player-card.has-captain {
  box-shadow: 0 0 10px var(--badge-captain), inset 0 0 6px rgba(0, 212, 255, 0.2) !important;
}

.player-card.has-clutch.has-captain {
  box-shadow: -5px 0 12px var(--badge-clutch), 5px 0 12px var(--badge-captain), inset 0 0 8px rgba(255, 255, 255, 0.25) !important;
}

.player-card.rarity-Epic.has-clutch {
  box-shadow: 0 0 12px var(--rarity-epic), 0 0 8px var(--badge-clutch), inset 0 0 8px rgba(204, 0, 255, 0.2) !important;
}
.player-card.rarity-Epic.has-captain {
  box-shadow: 0 0 12px var(--rarity-epic), 0 0 8px var(--badge-captain), inset 0 0 8px rgba(204, 0, 255, 0.2) !important;
}
.player-card.rarity-Epic.has-clutch.has-captain {
  box-shadow: 0 0 14px var(--rarity-epic), -5px 0 10px var(--badge-clutch), 5px 0 10px var(--badge-captain), inset 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

.player-card.rarity-Legendary.has-clutch {
  box-shadow: 0 0 16px var(--rarity-legendary), 0 0 10px var(--badge-clutch), inset 0 0 10px rgba(255, 204, 0, 0.3) !important;
}
.player-card.rarity-Legendary.has-captain {
  box-shadow: 0 0 16px var(--rarity-legendary), 0 0 10px var(--badge-captain), inset 0 0 10px rgba(255, 204, 0, 0.3) !important;
}
.player-card.rarity-Legendary.has-clutch.has-captain {
  box-shadow: 0 0 18px var(--rarity-legendary), -5px 0 12px var(--badge-clutch), 5px 0 12px var(--badge-captain), inset 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  margin-bottom: 4px;
}

.card-position {
  background: #000;
  color: #fff;
  padding: 2px 4px;
}

.card-year {
  color: #9ca3af;
}

.card-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.8px;
  font-weight: normal;
  text-align: center;
  color: #fff;
  margin: 2px 0 2px 0;
  padding: 2px 3px;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px dashed rgba(255,255,255,0.18);
}

.card-name.name-xxs { font-size: 5.6px !important; letter-spacing: -0.25px !important; }
.card-name.name-xs  { font-size: 6.4px !important; letter-spacing: -0.1px !important; }
.card-name.name-sm  { font-size: 7.0px !important; }
.card-name.name-lg  { font-size: 7.8px; }

/* Combat arena cards specific line height & padding adjustment */
.fight-card-slot .card-name,
#screen-match .card-name {
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  text-align: center;
  margin: 2px 0;
  padding: 2px 3px;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.fight-card-slot .card-name.name-xxs,
#screen-match .card-name.name-xxs { font-size: 5.8px !important; letter-spacing: -0.25px !important; }
.fight-card-slot .card-name.name-xs,
#screen-match .card-name.name-xs  { font-size: 6.6px !important; letter-spacing: -0.1px !important; }
.fight-card-slot .card-name.name-sm,
#screen-match .card-name.name-sm  { font-size: 7.2px !important; }

.card-sec-pos {
  font-size: 6px;
  font-family: 'Press Start 2P', monospace;
  color: #06b6d4;
  text-align: center;
  font-weight: bold;
  margin: 2px 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Card stats area - high contrast box */
.card-stats {
  background: rgba(0, 0, 0, 0.85);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  padding: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.4;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin: 1px 0;
}

.stat-label {
  color: #9ca3af;
}

.stat-val {
  font-weight: bold;
  color: #fff;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  margin-top: auto !important;
  border-top: 1px dashed rgba(255,255,255,0.2);
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.card-stamina-badge {
  font-size: 6px;
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #22c55e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.card-stamina-badge.low {
  color: #f59e0b;
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.25);
}

.card-stamina-badge.critical {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.3);
  animation: stamina-pulse 1s infinite alternate;
}

@keyframes stamina-pulse {
  0% { opacity: 0.75; }
  100% { opacity: 1; }
}

/* 8-Bit Eras Colorizations */
/* ==========================================================================
   ERA CARD THEMES (PRESERVING RARITY BORDER & GLOW AURA)
   ========================================================================== */

/* 1. GENESIS ERA (1871-1900) - VICTORIAN PARCHMENT & DARK WOOD */
.player-card.era-genesis {
  background: #f1e8d0;
  background-image: 
    radial-gradient(#c8b896 1px, transparent 1px),
    linear-gradient(to bottom, #f5edd6, #e3d3b4);
  background-size: 8px 8px, 100% 100%;
  color: #2b1f18;
}

.player-card.era-genesis .card-header {
  background: #3d2c20;
  color: #f5edd6;
  padding: 2px 4px;
  border-radius: 2px;
  border-bottom: 2px solid #8c6e4e;
}

.player-card.era-genesis .card-position,
.player-card.era-genesis .card-year {
  color: #f5edd6;
  background: transparent;
  border: none;
}
/* 1. GENESIS ERA (1871-1900) - VICTORIAN PARCHMENT STIPPLE & DARK WOODBLOCK */
.player-card.era-genesis {
  background-color: #f1e8d0;
  background-image: radial-gradient(rgba(140, 110, 78, 0.25) 12%, transparent 13%);
  background-size: 8px 8px;
  box-shadow: inset 0 0 0 2px #3d2c20;
  color: #3d2c20;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-genesis .card-header {
  background: #3d2c20;
  color: #f1e8d0;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #8c6e4e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.player-card.era-genesis .card-position {
  background: #3d2c20 !important; /* Victorian Woodblock Dark Brown Badge */
  color: #f1e8d0 !important;
  font-weight: 900 !important;
  border: 1px solid #8c6e4e !important;
  border-radius: 3px !important;
  padding: 1px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.player-card.era-genesis .card-year {
  color: #f1e8d0;
  background: transparent;
  border: none;
  font-weight: 900;
}

.player-card.era-genesis .card-name {
  background: rgba(241, 232, 208, 0.95);
  color: #2b1f18;
  font-weight: 900;
  border-bottom: 2px solid #8c6e4e;
  padding: 2px 4px !important;
  margin: 1px 0 !important;
  border-radius: 2px;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.6);
}

.player-card.era-genesis .card-stats {
  background: rgba(226, 212, 185, 0.95);
  border: 1px dashed #5a4332;
  box-shadow: inset 0 0 4px rgba(90, 67, 50, 0.2);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-genesis .stat-label {
  color: #4a382c;
  font-weight: bold;
}

.player-card.era-genesis .card-sec-pos {
  color: #8c4300 !important;
  font-weight: bold;
}

.player-card.era-genesis .card-trait-badge {
  background: #3d2c20;
  color: #f1e8d0;
  border: 1px solid #7a5c43;
  font-weight: bold;
}

.player-card.era-genesis .card-footer {
  color: #3d2c20;
  border-top: 1px dashed #8c6e4e;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* 2. DEADBALL ERA (1901-1919) - 1:1 1909 T206 PIEDMONT TOBACCO CARD (HONUS WAGNER & TY COBB) */
.player-card.era-deadball {
  background: #0f2b48;
  background-image: linear-gradient(180deg, #16385c 0%, #091e36 100%);
  box-shadow: inset 0 0 0 2px #d4af37, inset 0 0 0 4px #091e36;
  color: #f4efe4;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-deadball .card-header {
  background: #091e36;
  color: #d4af37;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #d4af37;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-deadball .card-position {
  background: #d4af37 !important; /* 1909 T206 Vintage Gold Stamp Position Badge */
  color: #091e36 !important;
  font-weight: 900 !important;
  border: 1px solid #091e36 !important;
  border-radius: 2px !important;
  padding: 1px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.player-card.era-deadball .card-year {
  color: #d4af37;
  background: transparent;
  border: none;
  font-weight: 900;
}

.player-card.era-deadball .card-name {
  color: #ffffff;
  font-weight: 900;
  border-bottom: 2px solid #d4af37;
  padding: 2px 0 !important;
  margin: 2px 0 !important;
  text-shadow: 1px 1px 3px #000000;
}

.player-card.era-deadball .card-stats {
  background: #fdfbf7;
  border: 2px solid #d4af37;
  box-shadow: inset 0 0 4px rgba(9, 30, 54, 0.15);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-deadball .stat-label {
  color: #0f2b48;
  font-weight: bold;
}

.player-card.era-deadball .card-sec-pos {
  color: #facc15 !important;
  font-weight: bold;
}

.player-card.era-deadball .card-trait-badge {
  background: #091e36;
  color: #d4af37;
  border: 1px solid #d4af37;
  font-weight: bold;
}

.player-card.era-deadball .card-footer {
  color: #d4af37;
  border-top: 1px dashed #d4af37;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* Card traits box - stack Era and Team vertically on separate lines */
.card-traits-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 2px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card-trait-badge {
  font-size: 5px;
  font-family: 'Press Start 2P', monospace;
  padding: 1.5px 4px;
  border-radius: 2px;
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Secondary position tag above ratings box */
.card-sec-pos-line {
  font-size: 5.5px;
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  text-align: center;
  margin: 1px 0 !important;
  line-height: 1 !important;
  letter-spacing: 0.5px;
}

.player-card.era-genesis .card-sec-pos-line { color: #8c4300; }
.player-card.era-deadball .card-sec-pos-line { color: #d4af37; }
.player-card.era-golden .card-sec-pos-line { color: #fde047; }
.player-card.era-integration .card-sec-pos-line { color: #fde047; }
.player-card.era-expansion .card-sec-pos-line { color: #facc15; }
.player-card.era-bighair .card-sec-pos-line { color: #facc15; }
.player-card.era-steroid .card-sec-pos-line { color: #38bdf8; }
.player-card.era-efficiency .card-sec-pos-line { color: #34d399; }
.player-card.era-modern .card-sec-pos-line { color: #1d4ed8; }

/* 3. GOLDEN ERA (1920-1941) - 1933 GOUDEY CRIMSON RED & DOT PATTERN */
.player-card.era-golden {
  background: #b91c1c;
  background-image: 
    radial-gradient(#d97706 15%, transparent 16%),
    linear-gradient(to bottom, #dc2626, #991b1b);
  background-size: 12px 12px, 100% 100%;
  box-shadow: inset 0 0 0 2px #facc15;
  color: #ffffff;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-golden .card-header {
  background: #450a0a;
  color: #fbbf24;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #fbbf24;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-golden .card-position {
  background: #facc15 !important; /* 1933 Goudey Yellow Position Badge */
  color: #7f1d1d !important;
  font-weight: 900 !important;
  border: 1px solid #7f1d1d !important;
  border-radius: 2px !important;
  padding: 1px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.player-card.era-golden .card-year {
  color: #fbbf24;
  background: transparent;
  border: none;
  font-weight: 900;
}

.player-card.era-golden .card-name {
  color: #ffffff;
  font-weight: 900;
  border-bottom: 2px solid #fbbf24;
  padding: 2px 0 !important;
  margin: 2px 0 !important;
  text-shadow: 1px 1px 3px #000000;
}

.player-card.era-golden .card-stats {
  background: rgba(254, 243, 199, 0.95);
  border: 2px solid #fbbf24;
  box-shadow: inset 0 0 4px rgba(185, 28, 28, 0.2);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-golden .stat-label {
  color: #7f1d1d;
  font-weight: bold;
}

.player-card.era-golden .card-sec-pos {
  color: #fef08a !important;
  font-weight: bold;
}

.player-card.era-golden .card-trait-badge {
  background: #450a0a;
  color: #fbbf24;
  border: 1px solid #fbbf24;
  font-weight: bold;
}

.player-card.era-golden .card-footer {
  color: #fbbf24;
  border-top: 1px dashed #fbbf24;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* 4. INTEGRATION ERA (1942-1960) - ICONIC 1952 TOPPS GOLD-STAR NAMEPLATE BOX */
.player-card.era-integration {
  background: #0284c7;
  background-image: linear-gradient(180deg, #0369a1 0%, #075985 100%);
  box-shadow: inset 0 0 0 2px #facc15;
  color: #ffffff;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-integration .card-header {
  background: #0c4a6e;
  color: #fef08a;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #fde047;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-integration .card-position {
  background: #facc15 !important; /* 1952 Topps Gold Circle Star Badge */
  color: #0284c7 !important;
  font-weight: 900 !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  padding: 2px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.player-card.era-integration .card-year {
  color: #fef08a;
  background: transparent;
  border: none;
  font-weight: 900;
}

.player-card.era-integration .card-name {
  color: #0f172a;
  background: #ffffff;
  font-family: 'Press Start 2P', monospace;
  font-weight: 900;
  padding: 2px 2px !important;
  border: 2px solid #facc15 !important;
  outline: 1px dashed #ca8a04;
  border-radius: 2px;
  margin: 2px 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  text-shadow: none !important;
}

.player-card.era-integration .card-stats {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #facc15;
  box-shadow: inset 0 0 4px rgba(12, 74, 110, 0.15);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-integration .stat-label {
  color: #0c4a6e;
  font-weight: bold;
}

.player-card.era-integration .card-sec-pos {
  color: #fef08a !important;
  font-weight: bold;
}

.player-card.era-integration .card-trait-badge {
  background: #0c4a6e;
  color: #fef08a;
  border: 1px solid #fde047;
  font-weight: bold;
}

.player-card.era-integration .card-footer {
  color: #ffffff;
  border-top: 1px dashed #fde047;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* 5. EXPANSION ERA (1961-1976) - REAL 1975 TOPPS DEEP VINTAGE TEAL & CRIMSON (ROBIN YOUNT & NOLAN RYAN) */
.player-card.era-expansion {
  background: #0f766e;
  background-image: linear-gradient(180deg, #115e59 0%, #042f2e 100%);
  box-shadow: inset 0 0 0 2px #facc15;
  color: #ffffff;
  padding: 5px 6px 5px 6px !important;
}

/* 1975 Topps Header Box (Deep Crimson Red Banner) */
.player-card.era-expansion .card-header {
  background: #991b1b;
  color: #facc15;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #facc15;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-expansion .card-position {
  background: #facc15 !important; /* 1975 Topps Round Yellow Circle Position Badge */
  color: #0f172a !important;
  font-weight: 900 !important;
  border: 1px solid #000000 !important;
  border-radius: 50% !important;
  padding: 2px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.player-card.era-expansion .card-year {
  color: #ffffff;
  background: transparent;
  border: none;
  font-weight: 900;
}

.player-card.era-expansion .card-name {
  color: #ffffff;
  font-weight: 900;
  border-bottom: 2px solid #facc15;
  padding: 2px 0 !important;
  margin: 2px 0 !important;
  text-shadow: 1px 1px 3px #000000;
}

.player-card.era-expansion .card-stats {
  background: #ffffff;
  border: 2px solid #991b1b;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-expansion .stat-label {
  color: #0f766e;
  font-weight: bold;
}

.player-card.era-expansion .card-trait-badge {
  background: #991b1b;
  color: #facc15;
  border: 1px solid #facc15;
  font-weight: bold;
}

.player-card.era-expansion .card-footer {
  color: #facc15;
  border-top: 1px dashed #facc15;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* 6. BIG HAIR ERA (1977-1993) - EXACT 1:1 REPLICATION OF 1986 TOPPS (BARRY BONDS / STRAWBERRY) */
.player-card.era-bighair {
  background: #000000;
  background-image: linear-gradient(180deg, #111827 0%, #000000 100%);
  box-shadow: inset 0 0 0 2px #ffffff;
  color: #ffffff;
  padding: 5px 6px 5px 6px !important;
}

/* 1986 Topps Giant Black Block Header Box (PIRATES / METS / ROYALS Style) */
.player-card.era-bighair .card-header {
  background: #000000;
  color: #facc15;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid #ffffff;
  border-bottom: 2px solid #facc15;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.player-card.era-bighair .card-position {
  background: #facc15 !important; /* 1986 Topps Iconic Yellow Circle Position Badge */
  color: #0f172a !important;
  font-weight: 900 !important;
  border: 1px solid #000000 !important;
  border-radius: 50% !important;
  padding: 1px 3px !important;
  font-size: 6px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.player-card.era-bighair .card-year {
  color: #ffffff;
  background: transparent;
  border: none;
  font-weight: 900;
}

/* 1986 Topps Bold White Player Name */
.player-card.era-bighair .card-name {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid #facc15;
  padding: 1px 0 !important;
  margin: 1px 0 !important;
  text-shadow: 1px 1px 3px #000000;
}

.player-card.era-bighair .card-stats {
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-bighair .stat-label {
  color: #0f172a;
  font-weight: 900;
}

.player-card.era-bighair .card-trait-badge {
  background: #000000;
  color: #facc15;
  border: 1px solid #ffffff;
  font-weight: bold;
}

.player-card.era-bighair .card-footer {
  color: #facc15;
  border-top: 1px dashed #facc15;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
/* 7. STEROID ERA (1994-2005) - ICONIC 1996 TOPPS CHROME REFRACTOR (IRIDESCENT METALLIC HOLO) */
.player-card.era-steroid {
  background: #0f172a;
  background-image: 
    linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(168, 85, 247, 0.3) 33%, rgba(244, 63, 94, 0.25) 66%, rgba(250, 204, 21, 0.2) 100%),
    linear-gradient(180deg, #1e293b 0%, #090d16 100%);
  box-shadow: inset 0 0 0 2px #e2e8f0, inset 0 0 8px rgba(56, 189, 248, 0.6), 0 0 14px rgba(168, 85, 247, 0.5);
  color: #f8fafc;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-steroid .card-header {
  background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  color: #38bdf8;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #38bdf8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.player-card.era-steroid .card-position {
  background: #38bdf8 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-steroid .card-year {
  color: #38bdf8;
  background: transparent;
  border: none;
  font-weight: 900;
}

/* Polished Chrome Silver Metallic Player Nameplate */
.player-card.era-steroid .card-name {
  background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  color: #0f172a !important;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid #ffffff;
  padding: 2px 4px !important;
  margin: 2px 0 !important;
  text-shadow: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Smoked Chrome Glass Stats Box */
.player-card.era-steroid .card-stats {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #38bdf8;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.3);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-steroid .stat-label {
  color: #38bdf8;
  font-weight: bold;
}

.player-card.era-steroid .card-trait-badge {
  background: linear-gradient(90deg, #1e1b4b 0%, #312e81 100%);
  color: #38bdf8;
  border: 1px solid #38bdf8;
  font-weight: bold;
}

.player-card.era-steroid .card-footer {
  color: #38bdf8;
  border-top: 1px dashed #38bdf8;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* 8. EFFICIENCY ERA (2006-2015) - 1:1 2008-2011 BOWMAN CHROME EMERALD REFRACTOR (MIKE TROUT #101 / BRYCE HARPER) */
.player-card.era-efficiency {
  background: #022c22;
  background-image: 
    radial-gradient(ellipse at top, rgba(34, 197, 94, 0.25) 0%, transparent 70%),
    linear-gradient(180deg, #064e3b 0%, #022c22 100%);
  box-shadow: inset 0 0 0 2px #10b981, inset 0 0 8px rgba(16, 185, 129, 0.5), 0 0 12px rgba(34, 197, 94, 0.4);
  color: #ecfdf5;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-efficiency .card-header {
  background: linear-gradient(90deg, #064e3b 0%, #022c22 50%, #064e3b 100%);
  color: #34d399;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #10b981;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.player-card.era-efficiency .card-position {
  background: #10b981 !important;
  color: #022c22 !important;
  font-weight: 900 !important;
  border: 1px solid #ffffff !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.player-card.era-efficiency .card-year {
  color: #34d399;
  background: transparent;
  border: none;
  font-weight: 900;
}

/* 2008-2011 Bowman Chrome Curved Emerald Player Nameplate Banner */
.player-card.era-efficiency .card-name {
  background: linear-gradient(180deg, #10b981 0%, #064e3b 100%);
  color: #ffffff !important;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid #34d399;
  padding: 2px 4px !important;
  margin: 2px 0 !important;
  text-shadow: 1px 1px 3px #000000 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Bowman Chrome Smoked Glass Stats Box */
.player-card.era-efficiency .card-stats {
  background: rgba(2, 44, 34, 0.92);
  border: 1px solid #10b981;
  box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.3);
  border-radius: 3px;
  margin: 2px 4px 1px 4px !important;
  padding: 3px 5px !important;
}

.player-card.era-efficiency .stat-label {
  color: #34d399;
  font-weight: bold;
}

.player-card.era-efficiency .card-trait-badge {
  background: linear-gradient(90deg, #064e3b 0%, #022c22 100%);
  color: #34d399;
  border: 1px solid #10b981;
  font-weight: bold;
}

.player-card.era-efficiency .card-footer {
  color: #34d399;
  border-top: 1px dashed #10b981;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* 9. MODERN ERA (2016-PRES) - WARM CREAM PEARL REFRACTOR (2024 TOPPS OHTANI / JUDGE / SKENES) */
.player-card.era-modern {
  background: #faf8f5;
  background-image: 
    radial-gradient(ellipse at top, rgba(251, 191, 36, 0.15) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(37, 99, 235, 0.03) 0px, rgba(37, 99, 235, 0.03) 2px, transparent 2px, transparent 6px),
    linear-gradient(180deg, #ffffff 0%, #fef3c7 100%);
  box-shadow: inset 0 0 0 2px #1d4ed8, inset 0 0 0 4px #d97706;
  color: #0f172a;
  padding: 5px 6px 5px 6px !important;
}

.player-card.era-modern .card-header {
  background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 3px;
  border-bottom: 2px solid #d97706;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.player-card.era-modern .card-position {
  background: #d97706 !important; /* Warm Amber Gold Position Circle */
  color: #ffffff !important;
  font-weight: 900 !important;
  border: 1px solid #0f172a !important;
  border-radius: 50% !important;
  padding: 2px 4px !important;
  font-size: 6.5px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.player-card.era-modern .card-year {
  color: #fef08a;
  background: transparent;
  border: none;
  font-weight: 900;
}

/* Harmonized Cream Pearl Player Nameplate */
.player-card.era-modern .card-name {
  color: #0f172a;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid #1d4ed8;
  padding: 2px 0 !important;
  margin: 2px 0 !important;
  text-shadow: none !important;
}

/* Harmonized Smooth Cardstats Box with High-Tech Dark Slate Screen */
.player-card.era-modern .card-stats {
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid #1d4ed8;
  box-shadow: inset 0 0 6px rgba(56, 189, 248, 0.2);
  border-radius: 4px;
  margin: 3px 4px 1px 4px !important;
  padding: 4px 6px !important;
}

.player-card.era-modern .stat-label {
  color: #38bdf8;
  font-weight: bold;
}

.player-card.era-modern .card-trait-badge {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #1d4ed8;
  font-weight: bold;
}

.player-card.era-modern .card-footer {
  color: #0f172a;
  border-top: 1px dashed #1d4ed8;
  font-weight: bold;
  margin-top: 1px !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
}


/* PRE-FIGHT SETUP */
.pre-fight-row {
  background: #000;
  border: 3px double var(--primary-color);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pre-fight-row.ko {
  opacity: 0.45;
  border-color: #ef4444;
}
.pre-fight-row .name {
  font-size: 9px;
  font-weight: bold;
}
.pre-fight-row .hp-text {
  font-size: 8px;
  color: #a1a1aa;
}
.pre-fight-row .hp-bar-container {
  width: 70px;
  height: 8px;
  background: #111;
  border: 1px solid #555;
  overflow: hidden;
}
.pre-fight-row .hp-bar-fill {
  height: 100%;
}



/* ==========================================================================
   POKELIKE VISUAL MAP — ZONE SYSTEM
   ========================================================================== */

/* Map screen: allow vertical scroll inside center panel */
#screen-map {
  padding: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: rgba(3, 10, 6, 0.85) !important;
  background-image: 
    linear-gradient(180deg, rgba(3, 8, 5, 0.60) 0%, rgba(3, 8, 5, 0.85) 100%),
    url('assets/TEST2.webp') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  border: 2px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.95);
  position: relative;
  z-index: 10;
}

#screen-map h2 { margin-bottom: 8px; }

.map-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#map-nodes-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: transparent;
}

/* ── Zone Wrapper ─────────────────────────────────────────────────────────── */
.zone-wrapper {
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  background: rgba(4, 18, 12, 0.60) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.zone-wrapper.zone-active {
  border: 2px solid #10b981;
  background: rgba(4, 24, 15, 0.55) !important;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.25), 0 8px 24px rgba(0, 0, 0, 0.8);
}

.zone-wrapper.zone-done {
  opacity: 0.8;
  filter: saturate(0.6);
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(4, 14, 8, 0.5) !important;
}

.zone-wrapper.zone-locked {
  pointer-events: none;
  border-color: rgba(51, 65, 85, 0.6);
  background: rgba(6, 12, 20, 0.65) !important;
}

.zone-wrapper.zone-locked .zone-header {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
}

.zone-wrapper.zone-locked .zone-name {
  color: #64748b;
  text-shadow: none;
}

/* Zone themed backgrounds */
.zone-minor    { background: rgba(4, 18, 12, 0.60) !important; }
.zone-major    { background: rgba(5, 16, 26, 0.60) !important; }
.zone-pennant  { background: rgba(16, 8, 28, 0.60) !important; }
.zone-hof      { background: rgba(22, 12, 2, 0.60) !important; }

/* ── Zone Header ──────────────────────────────────────────────────────────── */
.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(6, 78, 59, 0.75) 50%, rgba(0, 0, 0, 0.85) 100%);
  border-bottom: 1px solid rgba(16, 185, 129, 0.4);
}

.zone-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.zone-icon {
  font-size: 22px;
  line-height: 1;
}

.zone-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #00ff66;
  text-shadow: 2px 2px 0px #000000;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}

.zone-subtitle {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #e2e8f0;
  font-weight: bold;
}

.zone-division-banner {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #fbbf24;
  letter-spacing: 0.5px;
  margin-top: 5px;
  text-shadow: 1px 1px 0px #000000;
}

.zone-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 4px 8px;
  border: 1.5px solid;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.zone-badge-active  { color: #00ff66; border-color: #00ff66; background: #000000; }
.zone-badge-done    { color: #10b981; border-color: #10b981; background: #000000; }
.zone-badge-locked  { color: #64748b; border-color: #475569; background: #000000; }

/* ── Zone Canvas (SVG container) ────────────────────────────────────────── */
.zone-canvas {
  padding: 10px;
  background: transparent;
  margin-top: 4px;
}

.zone-canvas svg {
  display: block;
  width: 100%;
  /* Now that the SVG scales height WITH width correctly (see ui.js
     renderMap — the old fixed pixel `height` attribute never let it scale
     at all), an uncapped width:100% on a wide desktop panel scales node
     size and total height right along with it — nodes the size of a fist
     and a forced scrollbar. Capping the rendered width keeps node size
     reasonable and stops the height from ballooning, while mobile is
     already narrower than this cap so it's unaffected. */
  max-width: 640px;
  margin: 0 auto;
}

/* Legacy stubs - SVG handles all rendering now */
.zone-paths-svg { display: none; }
.zone-stage-row { display: none; }
.zone-stage-row.boss-row { display: none; }

/* ── Individual Visual Nodes (Circular like Pokelike) ───────────────────────── */
.map-node-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 52px;
  background: radial-gradient(circle at 30% 30%, #475569, #0f172a);
  border: 3px solid var(--node-border, #64748b);
  box-shadow: inset 0 -4px 6px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.5);
  border-radius: 50% !important; /* Circular nodes overriding universal border-radius */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 3;
}

.map-node-visual .node-emoji {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.8));
  transition: transform 0.2s ease;
}

.map-node-visual .node-type-label {
  display: none; /* Hide labels inside nodes like Pokelike for space and clean look */
}

/* State: visited / past */
.map-node-visual.node-visited {
  opacity: 0.6;
  filter: saturate(0.2) brightness(0.8);
  cursor: default;
}

/* State: currently active/clickable */
.map-node-visual.node-active {
  border-color: var(--node-color, #00ff66);
  box-shadow: 0 0 0 2px #000, 0 0 14px var(--node-color, rgba(0,255,102,0.7));
  animation: nodeActivePulse 1.4s infinite alternate;
  cursor: pointer;
}

.map-node-visual.node-active:hover {
  transform: scale(1.08);
}

.map-node-visual.node-active:hover .node-emoji {
  transform: scale(1.2);
}

/* State: locked/disabled */
.map-node-visual.node-disabled {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(1);
}

/* State: boss node */
.map-node-visual.node-boss {
  width: 90px;
  min-height: 90px;
  border-width: 3px;
  border-style: double;
}

.map-node-visual.node-boss.node-active {
  animation: bossNodePulse 1.2s infinite alternate;
}

.map-node-visual.node-boss .node-emoji {
  font-size: 32px;
}

.map-node-visual.node-boss .node-type-label {
  font-size: 6px;
}

@keyframes nodeActivePulse {
  0%   { box-shadow: 0 0 0 2px #000, 0 0 8px var(--node-color, rgba(0,255,102,0.5)); }
  100% { box-shadow: 0 0 0 2px #000, 0 0 20px var(--node-color, rgba(0,255,102,0.9)); }
}

@keyframes bossNodePulse {
  0%   { box-shadow: 0 0 0 3px #000, 0 0 12px rgba(255,215,0,0.5); }
  100% { box-shadow: 0 0 0 3px #000, 0 0 30px rgba(255,215,0,0.95); transform: scale(1.04); }
}

/* SVG path animation class */
.path-active-anim {
  animation: dashTravel 1.5s linear infinite;
  stroke-dasharray: 8,6;
}

@keyframes dashTravel {
  to { stroke-dashoffset: -28; }
}

/* ── SVG MAP NODE STYLES & RADAR PULSE ───────────────────────────── */
.map-node-group {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
}

.map-node-group.node-is-active {
  cursor: pointer;
}

.map-node-group.node-is-active:hover {
  filter: brightness(1.25);
}

.map-node-group.node-is-active:hover .node-circle-main {
  filter: drop-shadow(0 0 10px rgba(0, 255, 102, 0.8));
}

.map-node-group.node-is-future {
  pointer-events: none;
}

.map-node-group.node-is-visited {
  pointer-events: none;
}

.map-radar-pulse {
  animation: svgMapRadar 1.8s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
  transform-origin: center;
}

@keyframes svgMapRadar {
  0% {
    stroke-width: 2.5px;
    opacity: 0.85;
    transform: scale(0.95);
  }
  60% {
    opacity: 0.45;
  }
  100% {
    stroke-width: 0.5px;
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Keep .active-path class compat for the click handler targeting */
.map-node-visual.active-path { /* handled by node-active */ }

/* MATCH ARENA - 1v1 COMBAT */
.match-arena {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  position: relative;
}

/* Tension escalation overlay — driven by inning + team HP (computeDangerLevel in ui.js) */
.match-arena::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(239,68,68,0.35) 100%);
}

.match-arena.danger-1::after {
  opacity: 0.35;
}

.match-arena.danger-2::after {
  opacity: 0.6;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(239,68,68,0.5) 100%);
  animation: tension-pulse 2.4s ease-in-out infinite;
}

.match-arena.danger-3::after {
  opacity: 0.85;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 25%, rgba(239,68,68,0.65) 100%);
  animation: tension-pulse 1.1s ease-in-out infinite;
}
.match-arena.danger-3 {
  animation: tension-tint 1.1s ease-in-out infinite;
}

@keyframes tension-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}

@keyframes tension-tint {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.05) saturate(1.25) hue-rotate(-5deg); }
}

/* ── ARCADE MATCH JUICE: KO, BULLPEN & INNING TRANSITIONS ─────────── */

/* Heavy screen shake for KO & major impact */
.screen-shake-heavy {
  animation: arenaShakeHeavy 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes arenaShakeHeavy {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(-7px, 5px) rotate(-1.5deg); }
  24% { transform: translate(7px, -5px) rotate(1.5deg); }
  36% { transform: translate(-5px, 3px) rotate(-1deg); }
  48% { transform: translate(5px, -3px) rotate(1deg); }
  60% { transform: translate(-3px, 2px) rotate(-0.5deg); }
  72% { transform: translate(3px, -1px) rotate(0.5deg); }
  84% { transform: translate(-1px, 1px) rotate(0deg); }
}

/* Screen flash on KO / Inning */
.match-screen-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 215, 0, 0.4) 60%, transparent 100%);
  pointer-events: none;
  z-index: 120;
  animation: flashFadeOut 0.4s ease-out forwards;
}

@keyframes flashFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Pitcher K.O. Stamp Slammed directly on the card */
.ko-stamp-badge {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 50;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  border: 3px double #ffd700;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 16px;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px #000, 0 0 10px #ffd700;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.9), 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(255, 215, 0, 0.6);
  pointer-events: none;
  white-space: nowrap;
  animation: koStampSlam 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes koStampSlam {
  0% {
    transform: translate(-50%, -50%) scale(4) rotate(-35deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9) rotate(-10deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1.08) rotate(-13deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-12deg);
    opacity: 1;
  }
}

/* Defeated Pitcher Card animation */
.pitcher-card-defeated {
  animation: pitcherDefeatFall 0.85s ease-out forwards;
}

@keyframes pitcherDefeatFall {
  0% {
    transform: translateY(0) rotate(0deg);
    filter: none;
  }
  25% {
    transform: translateY(0) rotate(2deg);
    filter: brightness(1.6) drop-shadow(0 0 15px #ef4444);
  }
  50% {
    transform: translateY(8px) rotate(-3deg);
    filter: grayscale(0.7) brightness(0.7);
  }
  100% {
    transform: translateY(14px) rotate(-2deg);
    filter: grayscale(1) opacity(0.4) brightness(0.5);
  }
}

/* Defeated Pitcher Card exit animation when relief arrives */
.pitcher-card-exit {
  animation: pitcherCardExit 0.35s ease-in forwards;
}

@keyframes pitcherCardExit {
  0% {
    transform: translateY(14px) rotate(-2deg);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-60px) translateY(14px);
    opacity: 0;
  }
}

/* Relief Pitcher Card entrance animation */
.pitcher-card-entrance {
  animation: pitcherCardEnter 0.45s ease-out forwards;
}

@keyframes pitcherCardEnter {
  0% {
    transform: translateX(45px);
    opacity: 0;
    filter: brightness(1.4) drop-shadow(0 0 10px #38bdf8);
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    filter: none;
  }
}

/* Full-Width Arcade Transition Banner (Inning Change & Bullpen Alert) */
.arcade-transition-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 550px;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  animation: bannerSequence 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.arcade-transition-banner.banner-ko {
  background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.95) 15%, rgba(153, 27, 27, 0.95) 85%, transparent 100%);
  border-top: 3px double #ffd700;
  border-bottom: 3px double #ffd700;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.8), inset 0 0 20px rgba(255, 215, 0, 0.3);
}

.arcade-transition-banner.banner-bullpen {
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.95) 15%, rgba(180, 83, 9, 0.95) 85%, transparent 100%);
  border-top: 3px double #fde047;
  border-bottom: 3px double #fde047;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.8), inset 0 0 20px rgba(253, 224, 71, 0.3);
}

.arcade-transition-banner.banner-inning {
  background: linear-gradient(90deg, transparent 0%, rgba(14, 165, 233, 0.95) 15%, rgba(3, 105, 161, 0.95) 85%, transparent 100%);
  border-top: 3px double #38bdf8;
  border-bottom: 3px double #38bdf8;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.8), inset 0 0 20px rgba(56, 189, 248, 0.3);
}

.arcade-transition-banner.banner-last-inning {
  background: linear-gradient(90deg, transparent 0%, rgba(234, 88, 12, 0.95) 15%, rgba(185, 28, 28, 0.95) 85%, transparent 100%);
  border-top: 3px double #f97316;
  border-bottom: 3px double #f97316;
  box-shadow: 0 0 40px rgba(234, 88, 12, 0.9), inset 0 0 20px rgba(254, 240, 138, 0.4);
}

.arcade-banner-main {
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px #000, 0 0 12px rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
}

.arcade-banner-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
  color: #fef08a;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px #000;
}

@keyframes bannerSequence {
  0% {
    transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.7);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scaleX(1.05) scaleY(1.05);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.85) translateY(-30px);
    opacity: 0;
  }
}

/* Bases Cleared Sweep Effect */
.bases-cleared-glow {
  animation: baseSweepGlow 0.65s ease-out forwards;
}

@keyframes baseSweepGlow {
  0% {
    filter: brightness(2.5) drop-shadow(0 0 12px #38bdf8);
    opacity: 1;
  }
  100% {
    filter: none;
    opacity: 0.3;
  }
}

/* ── HIGH-STAKES GAMBLE NODE: coin flip ──────────────────────────────── */
/* ── HIGH-STAKES LUCK EVENT: Lucky Clover Orb ───────────────────────── */
.gamble-coin-wrap {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.gamble-coin {
  width: 100%;
  height: 100%;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  border: 3px solid #34d399;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.6), inset 0 0 15px rgba(255, 215, 0, 0.3);
  background: radial-gradient(circle at 35% 30%, #10b981 0%, #065f46 65%, #022c22 100%);
  transition: all 0.25s ease;
}

.gamble-coin.gamble-coin-fail {
  background: radial-gradient(circle at 35% 30%, #ef4444 0%, #991b1b 65%, #450a0a 100%);
  border-color: #f87171;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.gamble-coin-flipping {
  animation: gamble-coin-squash 0.2s ease-in-out infinite;
}

@keyframes gamble-coin-squash {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50%      { transform: scaleX(0.2) scaleY(1.1) rotate(15deg); filter: brightness(1.4); }
}

.gamble-outcome-card {
  width: 90px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
}
.gamble-outcome-win  { border-color: rgba(16,185,129,0.35); }
.gamble-outcome-lose { border-color: rgba(239,68,68,0.35); }

/* ── MANAGER EVENT RISK ROULETTE (ARCADE RETRO UPGRADE) ──────────────── */
.roulette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.95);
  backdrop-filter: blur(12px);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.roulette-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
  border: 2px solid rgba(250, 204, 21, 0.4);
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(250, 204, 21, 0.25), inset 0 0 20px rgba(0, 0, 0, 0.8);
  max-width: 420px;
  width: 90%;
  text-align: center;
}

.roulette-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
  letter-spacing: 0.5px;
  line-height: 1.5;
}

.roulette-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0;
}

.roulette-pointer {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 30px;
  color: #facc15;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.9), 0 0 4px #000;
  z-index: 10;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.9));
  animation: pointerPulse 1s ease-in-out infinite alternate;
}

@keyframes pointerPulse {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-3px); }
}

.roulette-wheel-border {
  position: absolute;
  inset: -8px;
  border-radius: 50% !important;
  border: 4px dashed rgba(250, 204, 21, 0.4);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.2);
  pointer-events: none;
}

.roulette-wheel {
  position: relative;
  box-sizing: border-box;
  width: 240px;
  height: 240px;
  border-radius: 50% !important;
  border: 5px solid #1e293b;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(0deg);
}

/* Thin radial ticks so it reads as an arcade roulette wheel */
.roulette-wheel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50% !important;
  background: repeating-conic-gradient(rgba(255,255,255,0.22) 0deg 1.5deg, transparent 1.5deg 30deg);
  pointer-events: none;
}

.roulette-center {
  width: 86px;
  height: 86px;
  border-radius: 50% !important;
  background: #020617;
  border: 3px solid #facc15;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.4), inset 0 0 10px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #fff;
  text-align: center;
  line-height: 1.5;
  z-index: 5;
}

.roulette-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #94a3b8;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}

/* Shake Animation for Failures */
@keyframes retroShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15% { transform: translate(-6px, -4px) rotate(-1deg); }
  30% { transform: translate(5px, 4px) rotate(1deg); }
  45% { transform: translate(-5px, 3px) rotate(-1deg); }
  60% { transform: translate(4px, -3px) rotate(1deg); }
  75% { transform: translate(-3px, 2px) rotate(0deg); }
}

.retro-shake-anim {
  animation: retroShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Event Store Choice Cards (Overhauled Layout) */
.event-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
  width: 100%;
}

.event-store-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border-radius: 14px;
  background: rgba(10, 15, 26, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.event-store-card:hover {
  transform: translateY(-4px);
}

.event-store-card-safe {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(10, 15, 26, 0.95) 100%);
}

.event-store-card-safe:hover {
  border-color: #10b981;
  box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3);
}

.event-store-card-risky {
  border-color: rgba(239, 68, 68, 0.5);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.08) 0%, rgba(10, 15, 26, 0.95) 100%);
}

.event-store-card-risky:hover {
  border-color: #ef4444;
  box-shadow: 0 8px 30px rgba(239, 68, 68, 0.35);
}

.event-store-card-reject {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.6);
}

.event-store-card-reject:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.scoreboard {
  background: #000;
  border: 4px double var(--primary-color);
  box-shadow: 0 0 0 3px #000;
  padding: 12px;
}

/* Fight Deck Slots */
.rpg-fight-deck {
  background: rgba(0,0,0,0.5);
  border: 4px double rgba(255, 255, 255, 0.05);
  padding: 20px;
}

.fight-card-slot {
  min-width: 156px;
  min-height: 248px;
  height: 248px;
  border: 3px dashed #444;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 4px;
  overflow: visible;
}

.faceoff-panel {
  background: #000;
  border: 4px double var(--primary-color);
  box-shadow: 0 0 0 3px #000;
}

.faceoff-name {
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.rotation-badge {
  background: #222;
  border: 2px solid #555;
  color: #888;
  padding: 4px 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  display: inline-block;
}

.rotation-badge.active {
  background: #ef4444;
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 8px #ef4444;
}

.rotation-badge.ko {
  text-decoration: line-through;
  background: #111;
  color: #333;
  border-color: #222;
  opacity: 0.5;
}

/* Log Narrative */
.match-log {
  display: flex;
  flex-direction: column;
  height: 200px !important;
  max-height: 200px !important;
  border: 4px double var(--primary-color);
  box-shadow: 0 0 0 3px #000;
}

.match-log-header {
  background: #000;
  padding: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--primary-color);
  border-bottom: 4px double var(--primary-color);
}

.match-log-content {
  font-family: 'VT323', monospace;
  font-size: 19px !important;
  color: #00ff66 !important;
  background: #000000 !important;
  text-shadow: 0 0 3px rgba(0, 255, 102, 0.7);
  padding: 16px;
  flex: 1;
  overflow-y: auto;
  max-height: 480px;
}

.log-line {
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 255, 102, 0.15);
  padding-bottom: 4px;
}

.log-line.header-line {
  color: var(--accent-color) !important;
  text-shadow: 0 0 4px var(--accent-glow);
  font-weight: bold;
}

.log-line.run-scored {
  color: #ffff00 !important;
  text-shadow: 0 0 4px rgba(255,255,0,0.5);
}

.log-line.bold {
  font-weight: bold;
}


/* SHOP */
.shop-shelf {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-card {
  background: #000;
  border: 3px double #ffffff;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shop-item-name {
  font-size: 9px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.shop-item-desc {
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #9ca3af;
}

.shop-item-price {
  font-size: 11px;
  font-weight: bold;
  color: var(--accent-color);
  margin-right: 12px;
}


/* TRAINING SCREEN */
.training-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.training-card {
  background: #000;
  border: 3px double rgba(255,255,255,0.15);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.training-card:hover, .training-card.selected {
  border-color: var(--primary-color);
  background: rgba(0, 255, 102, 0.05);
}


/* SYNERGIES SIDEBAR PANEL */
.synergies-panel {
  background: rgba(0,0,0,0.4);
  border: 3px double rgba(255,255,255,0.1);
  margin-bottom: 16px;
  padding: 12px;
}

.synergies-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--accent-color);
  border-bottom: 2px dashed rgba(255,255,255,0.1);
  padding-bottom: 6px;
  margin-bottom: 8px;
}

.synergy-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.synergy-item {
  background: #000;
  border: 2px solid rgba(255,255,255,0.08);
  padding: 8px;
}

.synergy-badge {
  font-size: 7px;
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 4px;
}

.synergy-desc {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #9ca3af;
}

.perk-badge {
  background: #1e293b;
  border: 1px solid #475569;
  color: #fff;
  padding: 4px 6px;
  font-size: 8px;
  margin: 2px;
  display: inline-block;
}


/* MODALS */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: #000;
  border: 4px double var(--primary-color);
  box-shadow: 0 0 0 4px #000;
  padding: 24px;
  max-width: 480px;
  width: 100%;
}

.swap-bench-item {
  background: #111;
  border: 2px solid #333;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 8px;
}


/* HISTORY / GAME OVER */
.history-row {
  background: #000;
  border: 2px dashed rgba(255,255,255,0.1);
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.history-row.won { color: var(--primary-color); border-color: var(--primary-color); }
.history-row.lost { color: var(--danger-color); border-color: var(--danger-color); }


/* UTILITIES */
.hidden { display: none !important; }
.center { text-align: center; }
.margin-top { margin-top: 15px; }
.flex-row { display: flex; gap: 20px; }
.flex-1 { flex: 1; }

.pre-fight-columns {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.draft-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 800px) {
  .flex-row { flex-direction: column; }
  .match-arena { grid-template-columns: 1fr; }
}

/* --- LAPTOP / SMALL DESKTOP AUTO-SCALING (769px - 1380px) ---
   Scales down battle arena elements proportionally so nothing overflows
   on smaller laptop screens while preserving the 2-column PC layout.
*/
@media (min-width: 769px) and (max-width: 1380px) {
  .match-arena {
    gap: 14px !important;
  }

  /* Scale cards proportionally based on viewport width */
  .rpg-fight-deck {
    padding: 10px !important;
    transform: scale(0.9) !important;
    transform-origin: center top !important;
    margin-bottom: -24px !important;
  }

  .fight-card-slot {
    min-width: 130px !important;
    min-height: 210px !important;
    height: 210px !important;
  }

  .scoreboard {
    font-size: 8px !important;
    padding: 8px !important;
  }

  #scoreboard-inning-text {
    font-size: 8px !important;
    margin-bottom: 6px !important;
  }

  .faceoff-panel {
    padding: 8px 10px !important;
  }

  .faceoff-name {
    font-size: 11px !important;
  }

  #match-batter-stats-box {
    font-size: 7px !important;
    line-height: 1.4 !important;
    margin-top: 6px !important;
  }

  #match-pitcher-hp-text {
    font-size: 9px !important;
  }

  #dice-battle-panel {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  #team-vitals span {
    font-size: 9px !important;
  }

  #so-chain-display {
    font-size: 9px !important;
  }

  #dice-result-display {
    width: 60px !important;
    height: 60px !important;
    font-size: 28px !important;
  }

  #btn-roll-dice {
    font-size: 11px !important;
    padding: 10px 20px !important;
  }

  #btn-match-skip-game {
    font-size: 9px !important;
    padding: 8px 16px !important;
  }

  .match-log {
    height: 140px !important;
    max-height: 140px !important;
  }

  .match-log-content {
    font-size: 16px !important;
  }

  .outcome-probabilities-grid {
    font-size: 9px !important;
  }

  #zones-panel-header {
    font-size: 9px !important;
  }

  #zones-panel #zones-lines > div {
    font-size: 9px !important;
  }
}

/* Batting Order Controls */
.order-btn-container {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.order-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: #111;
  color: #fff;
  border: 2px solid #555;
  padding: 3px 6px;
  cursor: pointer;
  box-shadow: 0 2px 0 #000;
}
.order-btn:hover {
  background: var(--primary-color);
  color: #000;
  border-color: #fff;
}
.order-badge {
  font-size: 8px;
  color: var(--accent-color);
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
}

/* Event Choice Buttons & Risk Badges */
.event-choices-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-choice-btn {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  text-align: left;
  width: 100%;
  padding: 14px 18px;
  background: rgba(10, 15, 24, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.event-choice-btn:hover {
  transform: translateY(-3px);
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--primary-color);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
}
.event-choice-btn.event-choice-risk-moderate:hover {
  background: rgba(245, 158, 11, 0.08);
  border-color: var(--accent-color);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}
.event-choice-btn.event-choice-risk-high:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #ef4444;
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.25);
}
.event-choice-btn:disabled {
  color: #555;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.6);
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.choice-risk-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.choice-risk-tag.choice-risk-safe {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.choice-risk-tag.choice-risk-moderate {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.choice-risk-tag.choice-risk-high {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Training Card Tiers & Reveal Animations */
@keyframes cardPopIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.training-card-tier-gold:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.65), 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.training-card-tier-silver:hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.55), 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

.training-card-tier-normal:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 0 15px rgba(100, 116, 139, 0.4), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Outcome Probabilities Panel */
#zones-panel {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
}

/* #zones-panel-header is a <summary> (its parent #zones-panel is a <details>,
   collapsed by default on mobile only — see mobile CSS + the render-time JS
   that strips its `open` attribute below 769px). list-style/marker removed
   so it reads as plain text on desktop, where it's always open anyway. */
#zones-panel-header {
  color: #94a3b8;
  font-family: 'Press Start 2P', monospace;
  font-size: 10.5px;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
}

#zones-panel-header::-webkit-details-marker {
  display: none;
}

.clutch-active-banner {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 8px;
  color: #ef4444;
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25);
}

.clutch-tag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  font-weight: bold;
  font-family: 'Press Start 2P', monospace;
  padding: 1px 3px;
  border-radius: 2px;
  margin-left: 3px;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.clutch-tag-badge.boost {
  color: #00ff66;
  background: rgba(0, 255, 102, 0.18);
  border: 1px solid rgba(0, 255, 102, 0.4);
  text-shadow: 0 0 4px rgba(0, 255, 102, 0.6);
}

.clutch-tag-badge.hr-boost {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid rgba(255, 215, 0, 0.4);
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.clutch-tag-badge.penalty {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.6);
}

.outcome-probabilities-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 4px 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
}

.outcome-probabilities-grid > div {
  min-width: 0;
}

.outcome-probabilities-grid .outcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3.5px 6px;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
  font-size: 8.5px;
  gap: 3px;
}

.outcome-probabilities-grid .outcome-row-left {
  font-size: 8px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcome-probabilities-grid .outcome-row-right {
  font-size: 8.5px;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}


/* ==========================================================================
   3-COLUMN WORKSPACE & PORTRAIT BATTING ROSTER SIDEBAR
   ========================================================================== */

/* Toggle scroll Lock when run is active */
body.workspace-active {
  height: 100vh;
  overflow: hidden;
}

body.workspace-active .main-container {
  height: calc(100vh - 75px);
  max-width: 100%;
  padding: 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
}

#game-workspace {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.workspace-three-columns {
  display: flex;
  gap: 12px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Sidebar Containers */
.workspace-sidebar {
  background: var(--panel-bg);
  border: 4px double var(--border-color);
  box-shadow: 0 0 0 4px #000;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  flex-shrink: 0;
}

.left-sidebar {
  /* Was 260px — too narrow for real player names ("Spencer Torkelson",
     "Paul Goldschmidt") alongside the position badge + grade badge +
     stamina bar, forcing an ellipsis truncation the user didn't want.
     The center map panel is flex:1 or (elsewhere on some screens) has
     plenty of spare width to give up 40px without feeling cramped. */
  width: 300px;
}

.right-sidebar {
  width: 290px;
}

.workspace-center-panel {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  min-width: 0; /* Prevents flex items from overflowing */
  display: flex;
  flex-direction: column;
}

/* Header style for Sidebars */
.sidebar-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--primary-color);
  border-bottom: 2px dashed var(--primary-color);
  padding-bottom: 6px;
  margin-bottom: 8px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* Scrollable area inside Sidebars */
.scrollable-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

/* Scrollbars Retro Style */
.scrollable-sidebar-content::-webkit-scrollbar,
.workspace-center-panel::-webkit-scrollbar {
  width: 6px;
}
.scrollable-sidebar-content::-webkit-scrollbar-track,
.workspace-center-panel::-webkit-scrollbar-track {
  background: #000;
}
.scrollable-sidebar-content::-webkit-scrollbar-thumb,
.workspace-center-panel::-webkit-scrollbar-thumb {
  background: var(--border-color);
}

/* Vertical Roster Slots in Left Sidebar */
.roster-vertical-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}

.roster-vertical-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 8px;
  position: relative;
  cursor: grab;
  transition: all 0.15s ease;
}

.roster-vertical-item.dragging {
  opacity: 0.4;
  border-color: var(--accent-color);
}

.roster-vertical-item.drag-over {
  border: 2px dashed var(--accent-color);
  background: rgba(255, 255, 255, 0.08);
}

.roster-vertical-item .pos-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  font-weight: bold;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--accent-color);
  padding: 2px 4px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.roster-vertical-item .player-name {
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  /* Without this, a long name + multiple badge icons (captain/clutch/etc)
     never actually triggers the ellipsis above — a flex item's default
     min-width is its content's full width, so instead of truncating, the
     name muscled its siblings (the grade badge) down to a few px wide,
     rendering it basically illegible (looked like a single "-" in
     screenshots, e.g. Brooks Robinson, Willie Randolph). */
  min-width: 0;
}

/* VT323/Press Start 2P are pixel-art fonts with no emoji glyphs — inside
   .player-name and similar retro-font contexts, badge emojis (👑 ⚡ ⏳) fell
   back to those fonts' own placeholder glyph (a bare dash) instead of the
   system emoji font. Force an emoji-capable stack on badge icons only. */
.list-badge-icon {
  font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif !important;
}

.roster-vertical-item .ovr-badge {
  font-family: 'Press Start 2P', monospace;
  /* Was 6px/1px 3px padding — a "correctly" tiny 12px-wide box, not a bug,
     but too small to reliably read at a glance (or in a phone photo of the
     screen — this is what got mistaken for a "-" glitch in bug reports on
     players like Brooks Robinson / Willie Randolph). */
  font-size: 9px;
  padding: 2px 5px;
  min-width: 16px;
  text-align: center;
  border-radius: 3px;
  font-weight: bold;
}

/* Wrapper around the grade badge + stamina bar — protects them from being
   squeezed to a sliver by a long player name (see .player-name's
   min-width: 0 above for the other half of this fix). */
.roster-vertical-item .roster-item-stats {
  flex-shrink: 0;
}

.roster-vertical-item .stamina-bar-mini {
  width: 30px;
  height: 4px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  margin-top: 2px;
}

.roster-vertical-item .stamina-fill-mini {
  height: 100%;
}

.roster-vertical-item .order-number {
  font-size: 7px;
  color: rgba(255,255,255,0.3);
  font-family: 'Press Start 2P', monospace;
  margin-right: 4px;
}

/* Trait Badges on Player Cards.
   This is the SECOND definition of .card-traits-box in this file (the first
   is at line ~793, `flex-direction: column`) — this one wins the cascade
   since it's later, but never explicitly set flex-direction, so it fell
   back to the flex default (row) with wrap. That made card height depend on
   whether a given player's era name + team code happened to fit on one line
   or wrapped to two — different for almost every player, which is why two
   cards with identical aspect-ratio math could still end up visibly
   different heights. Forcing column here makes every card stack its badges
   the same way regardless of text length. */
.card-traits-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  justify-content: center;
}

.card-trait-badge {
  font-size: 5px;
  padding: 2px 4px;
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  color: #000;
  background: #8e9e98;
}

.card-trait-badge.trait-era {
  background: var(--primary-color);
}

.card-trait-badge.trait-team {
  background: var(--accent-color);
}

.card-trait-badge.trait-clutch {
  background: #dc2626;
  color: #fff;
  font-size: 6px;
  padding: 1px 3.5px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 5px rgba(220, 38, 38, 0.8);
  cursor: help;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-trait-badge.trait-clutch:hover {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(239, 68, 68, 1);
  z-index: 10;
}

.card-trait-badge.trait-captain {
  background: #0ea5e9;
  color: #fff;
  font-size: 6px;
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 5px rgba(14, 165, 233, 0.8);
  cursor: help;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-trait-badge.trait-captain:hover {
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(56, 189, 248, 1);
  z-index: 10;
}

/* Synergy list and progress items in Right Sidebar */
.synergy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.synergy-list-item {
  background: rgba(0, 0, 0, 0.4);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  padding: 8px;
  transition: all 0.2s ease;
}

.synergy-list-item.active {
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 8px var(--primary-glow);
  background: rgba(0, 255, 102, 0.03);
}

.synergy-list-item.active-level-2 {
  border: 2px solid var(--accent-color);
  box-shadow: 0 0 12px var(--accent-glow);
  background: rgba(255, 204, 0, 0.03);
}

.synergy-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.synergy-item-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  font-weight: bold;
  color: #fff;
}

.synergy-item-count {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #9ca3af;
}

.synergy-progress-dots {
  display: flex;
  gap: 3px;
  margin-bottom: 6px;
}

.synergy-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.synergy-dot.filled {
  background: #ff2ec4;
  border-color: #fff;
}

.synergy-item-desc {
  font-family: 'VT323', monospace;
  font-size: 13.5px;
  line-height: 1.25;
  color: #a1a1aa;
}

/* ── Synergy Active States by Tier (Organic Progression) ── */
/* Tier 1 (2+ players): Neon Purple / Magenta */
.synergy-list-item.tier-1 {
  border: 2px solid #ff2ec4;
  box-shadow: 0 0 10px rgba(255, 46, 196, 0.4), inset 0 0 6px rgba(255, 46, 196, 0.08);
  background: rgba(255, 46, 196, 0.04);
}
.synergy-list-item.tier-1 .synergy-item-name {
  color: #ff2ec4;
  text-shadow: 0 0 5px rgba(255, 46, 196, 0.6);
}
.synergy-list-item.tier-1 .synergy-item-count {
  color: #ff8be3;
}
.synergy-list-item.tier-1 .synergy-dot.filled {
  background: #ff2ec4;
  border-color: #fff;
  box-shadow: 0 0 5px #ff2ec4;
}
.synergy-list-item.tier-1 .synergy-tier-row.tier-current {
  color: #fff;
  border-left-color: #ff2ec4;
  background: rgba(255, 46, 196, 0.08);
}
.synergy-list-item.tier-1 .synergy-tier-row.tier-current .tier-label {
  color: #ff2ec4;
}

/* Tier 2 (4+ players): Cyan / Electric Blue */
.synergy-list-item.tier-2 {
  border: 2px solid #00f0ff;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.45), inset 0 0 8px rgba(0, 240, 255, 0.1);
  background: rgba(0, 240, 255, 0.05);
}
.synergy-list-item.tier-2 .synergy-item-name {
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0, 240, 255, 0.7);
}
.synergy-list-item.tier-2 .synergy-item-count {
  color: #7df9ff;
}
.synergy-list-item.tier-2 .synergy-dot.filled {
  background: #00f0ff;
  border-color: #fff;
  box-shadow: 0 0 6px #00f0ff;
}
.synergy-list-item.tier-2 .synergy-tier-row.tier-current {
  color: #fff;
  border-left-color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
}
.synergy-list-item.tier-2 .synergy-tier-row.tier-current .tier-label {
  color: #00f0ff;
}

/* Tier 3 (6+ players): Neon Green / Emerald */
.synergy-list-item.tier-3 {
  border: 2px solid #00ff66;
  box-shadow: 0 0 14px rgba(0, 255, 102, 0.5), inset 0 0 10px rgba(0, 255, 102, 0.12);
  background: rgba(0, 255, 102, 0.06);
}
.synergy-list-item.tier-3 .synergy-item-name {
  color: #00ff66;
  text-shadow: 0 0 7px rgba(0, 255, 102, 0.8);
}
.synergy-list-item.tier-3 .synergy-item-count {
  color: #86efac;
}
.synergy-list-item.tier-3 .synergy-dot.filled {
  background: #00ff66;
  border-color: #fff;
  box-shadow: 0 0 7px #00ff66;
}
.synergy-list-item.tier-3 .synergy-tier-row.tier-current {
  color: #fff;
  border-left-color: #00ff66;
  background: rgba(0, 255, 102, 0.1);
}
.synergy-list-item.tier-3 .synergy-tier-row.tier-current .tier-label {
  color: #00ff66;
}

/* Tier 4 (8+ players): Legendary Gold / Mythic */
.synergy-list-item.tier-4 {
  border: 2px solid #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.65), inset 0 0 12px rgba(255, 215, 0, 0.16);
  background: rgba(255, 215, 0, 0.08);
  animation: pulse-legendary-glow 2.5s infinite alternate;
}
.synergy-list-item.tier-4 .synergy-item-name {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
}
.synergy-list-item.tier-4 .synergy-item-count {
  color: #fde047;
}
.synergy-list-item.tier-4 .synergy-dot.filled {
  background: #ffd700;
  border-color: #fff;
  box-shadow: 0 0 8px #ffd700;
}
.synergy-list-item.tier-4 .synergy-tier-row.tier-current {
  color: #fff;
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.12);
}
.synergy-list-item.tier-4 .synergy-tier-row.tier-current .tier-label {
  color: #ffd700;
}

@keyframes pulse-legendary-glow {
  0% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.5), inset 0 0 8px rgba(255, 215, 0, 0.12); }
  100% { box-shadow: 0 0 22px rgba(255, 215, 0, 0.8), inset 0 0 16px rgba(255, 215, 0, 0.22); }
}

/* 4-tier description breakdown */
.synergy-tier-breakdown {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.synergy-tier-row {
  font-family: 'VT323', monospace;
  font-size: 11.5px;
  line-height: 1.25;
  padding: 3px 5px;
  border-left: 2px solid transparent;
  color: #6b7280;
}

.synergy-tier-row .tier-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  margin-right: 4px;
}

.synergy-tier-row.tier-reached {
  color: #a1a1aa;
  border-left-color: rgba(255, 255, 255, 0.2);
}

/* Synergy Helper Text in Draft Option Cards */
.draft-synergy-helper {
  background: rgba(0, 0, 0, 0.7);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  margin-top: 8px;
  padding: 6px;
  font-size: 7.5px;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.4;
  color: #a1a1aa;
  text-align: center;
  max-width: 152px;
}

.draft-synergy-helper strong {
  color: var(--primary-color);
}


/* ==========================================================================
   PLAYER CARD POPUP
   ========================================================================== */

#player-card-popup-overlay.hidden { display: none !important; }

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#popup-card-content {
  animation: popupSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popupSlideIn {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);        opacity: 1; }
}

.popup-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.popup-rarity-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 8px;
  border: 1px solid;
  letter-spacing: 1px;
}

.popup-close-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  color: #9ca3af;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 8px;
  transition: all 0.15s ease;
}
.popup-close-btn:hover { background: rgba(239,68,68,0.2); color: #ef4444; border-color: #ef4444; }

.popup-player-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.5;
}

.popup-meta-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.popup-pos-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--accent-color);
  padding: 3px 8px;
}

.popup-era-chip {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--primary-color);
  border: 1px solid rgba(0,255,102,0.3);
  padding: 1px 7px;
  background: rgba(0,255,102,0.05);
}

.popup-team-chip {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: var(--accent-color);
  border: 1px solid rgba(255,204,0,0.25);
  padding: 1px 7px;
  background: rgba(255,204,0,0.04);
}

.popup-ovr-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid;
  padding: 8px 14px;
  margin-bottom: 14px;
}

.popup-ovr-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #9ca3af;
}

.popup-ovr-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  font-weight: bold;
}

.popup-ovr-grade {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  font-weight: bold;
}

.popup-stats-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}

.popup-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popup-stat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #9ca3af;
  width: 28px;
  flex-shrink: 0;
}

.popup-stat-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

.popup-stat-bar-fill {
  height: 100%;
  transition: width 0.4s ease;
}

.super-stat-bar {
  animation: superStatFire 0.8s infinite alternate;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), inset 0 0 6px rgba(255, 255, 255, 0.6);
  border-right: 2px solid #fff;
}

@keyframes superStatFire {
  0% { filter: hue-rotate(0deg) brightness(1.2); }
  100% { filter: hue-rotate(-25deg) brightness(1.6); }
}

.popup-stat-val {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  min-width: 42px;
  text-align: right;
  flex-shrink: 0;
}

.popup-grade { font-size: 8px; font-weight: bold; }

.popup-stamina-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.popup-stamina-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}

.popup-stamina-fill { height: 100%; transition: width 0.4s ease; }

.popup-upgrades-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(0,255,102,0.04);
  border: 1px dashed rgba(0,255,102,0.2);
}

.popup-upgrade-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  padding: 2px 6px;
  background: rgba(0,255,102,0.12);
  border: 1px solid rgba(0,255,102,0.3);
  color: var(--primary-color);
}

.popup-era-desc {
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.3;
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.1);
}

.popup-year {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: #475569;
  text-align: center;
  margin-top: 6px;
}

.roster-vertical-item { cursor: pointer !important; }
.roster-vertical-item:hover {
  background: rgba(0, 255, 102, 0.05);
  border-color: rgba(0, 255, 102, 0.3);
}

/* ── HP BAR SHAKE & FLASH ANIMATIONS ───────────────────────────────────── */
@keyframes shake-dmg {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px); }
  30%  { transform: translateX(5px); }
  45%  { transform: translateX(-4px); }
  60%  { transform: translateX(3px); }
  75%  { transform: translateX(-2px); }
  90%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

@keyframes flash-red {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(2.5) saturate(3) hue-rotate(-20deg); }
  50%  { filter: brightness(1.8) saturate(2); }
  100% { filter: brightness(1); }
}

.hp-bar-hit {
  animation: shake-dmg 0.45s ease-out, flash-red 0.45s ease-out;
}

@keyframes flash-synergy {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(2.2) saturate(2.5) hue-rotate(-30deg); }
  60%  { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

.base-synergy-flash {
  animation: flash-synergy 0.6s ease-out;
}

/* ── d100 DICE: two rolling 3D cubes (tens + units) ─────────────────────── */
.d100-die {
  width: 54px;
  height: 54px;
  perspective: 260px;
}

.d100-die-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
}

.d100-die-face {
  position: absolute;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.18);
  backface-visibility: hidden;
}

.d100-die-face.face-front  { transform: translateZ(27px); }
.d100-die-face.face-back   { transform: rotateY(180deg) translateZ(27px); }
.d100-die-face.face-right  { transform: rotateY(90deg) translateZ(27px); }
.d100-die-face.face-left   { transform: rotateY(-90deg) translateZ(27px); }
.d100-die-face.face-top    { transform: rotateX(90deg) translateZ(27px); }
.d100-die-face.face-bottom { transform: rotateX(-90deg) translateZ(27px); }

@keyframes dice-tumble-units {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(1080deg) rotateY(720deg); }
}

@keyframes dice-tumble-tens {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(1440deg) rotateY(1080deg); }
}

.d100-die-cube.tumbling-units {
  animation: dice-tumble-units 0.55s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.d100-die-cube.tumbling-tens {
  animation: dice-tumble-tens 0.85s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.d100-die-cube.die-settled {
  animation: die-settle-pulse 0.3s ease-out;
}

/* ── CARD DEAL-IN: reusable "dealt from a deck" reveal, used for the combat
   faceoff cards, the draft round's choice cards, and any other freshly-
   revealed player card. --deal-from-x/--deal-from-y set the origin offset
   (deck position); default is a simple pop-and-flip with no travel. ── */
@keyframes card-deal-in {
  0%   { opacity: 0; transform: translateX(var(--deal-from-x, 0px)) translateY(var(--deal-from-y, 0px)) rotateY(80deg); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotateY(0deg); }
}

.card-deal-in {
  animation: card-deal-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  backface-visibility: hidden;
}

.card-deal-perspective {
  perspective: 900px;
}

/* ── DRAFT SHUFFLE: brief face-down stack shown before a round's 3 cards deal in ── */
.draft-shuffle-stack {
  position: relative;
  width: 170px;
  height: 236px;
  margin: 0 auto;
}

.draft-shuffle-card {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #0a1f14, #0a1f14 8px, #0f2b1c 8px, #0f2b1c 16px);
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 14px var(--primary-glow);
  animation: draft-shuffle-jitter 0.35s ease-in-out;
}

.draft-shuffle-card:nth-child(1) { animation-delay: 0s;    transform: rotate(-4deg) translateX(-3px); }
.draft-shuffle-card:nth-child(2) { animation-delay: 0.05s; transform: rotate(2deg)  translateX(3px);  }
.draft-shuffle-card:nth-child(3) { animation-delay: 0.1s;  transform: rotate(-1deg); }

@keyframes draft-shuffle-jitter {
  0%   { transform: translateX(0) rotate(0deg); opacity: 0.6; }
  30%  { transform: translateX(-10px) rotate(-6deg); }
  60%  { transform: translateX(8px) rotate(5deg); }
  100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* ── DRAFT PACK OPENING: replaces the shuffle stack — a tap-to-open vintage
   bubblegum-wax-pack (60s-90s baseball card pack styling: bold banner,
   corner price/round tag, torn-paper crimp edge) that tears open on click
   before the round's 3 cards deal in (same footprint as the old
   .draft-shuffle-stack so it drops into the same layout slot). Three tier
   skins (--premium/--common/--random) driven by the round's rarity floor. ── */
.draft-pack {
  position: relative;
  width: 170px;
  height: 236px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: pack-pulse-in 0.5s ease-out both, pack-idle-bob 2.2s ease-in-out 0.5s infinite;
}

.draft-pack:hover {
  filter: brightness(1.08);
}

/* Tier skins — background/border/glow only; structural bits above are shared */
.draft-pack--premium,
.draft-pack--epic {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #2a1a05 0%, #1a1002 45%, #05070f 100%);
  border: 3px solid #ffd700;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.45), inset 0 0 20px rgba(255, 215, 0, 0.1);
}
.draft-pack--premium .draft-pack-brand,
.draft-pack--premium .draft-pack-tagline,
.draft-pack--epic .draft-pack-brand,
.draft-pack--epic .draft-pack-tagline { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.8); }
.draft-pack--premium .draft-pack-badge,
.draft-pack--epic .draft-pack-badge { background: #ffd700; color: #1a1002; }
.draft-pack--premium .draft-pack-crimp,
.draft-pack--epic .draft-pack-crimp { background-image: linear-gradient(135deg, #ffd700 25%, transparent 25%), linear-gradient(225deg, #ffd700 25%, transparent 25%); }

.draft-pack--rare {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #072238 0%, #031422 45%, #05070f 100%);
  border: 3px solid #38bdf8;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.45), inset 0 0 20px rgba(56, 189, 248, 0.1);
}
.draft-pack--rare .draft-pack-brand,
.draft-pack--rare .draft-pack-tagline { color: #7dd3fc; text-shadow: 0 0 8px rgba(56, 189, 248, 0.8); }
.draft-pack--rare .draft-pack-badge { background: #38bdf8; color: #031422; }
.draft-pack--rare .draft-pack-crimp { background-image: linear-gradient(135deg, #38bdf8 25%, transparent 25%), linear-gradient(225deg, #38bdf8 25%, transparent 25%); }

.draft-pack--uncommon {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #072b1a 0%, #031c10 45%, #05070f 100%);
  border: 3px solid #10b981;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.45), inset 0 0 20px rgba(16, 185, 129, 0.1);
}
.draft-pack--uncommon .draft-pack-brand,
.draft-pack--uncommon .draft-pack-tagline { color: #6ee7b7; text-shadow: 0 0 8px rgba(16, 185, 129, 0.8); }
.draft-pack--uncommon .draft-pack-badge { background: #10b981; color: #022114; }
.draft-pack--uncommon .draft-pack-crimp { background-image: linear-gradient(135deg, #10b981 25%, transparent 25%), linear-gradient(225deg, #10b981 25%, transparent 25%); }

.draft-pack--common {
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #d8c49a 0%, #b89a68 55%, #8a6f43 100%);
  border: 3px solid #6b5432;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.draft-pack--common .draft-pack-brand,
.draft-pack--common .draft-pack-tagline { color: #3a2b12; text-shadow: none; }
.draft-pack--common .draft-pack-badge { background: #6b5432; color: #f2e6cc; }
.draft-pack--common .draft-pack-crimp { background-image: linear-gradient(135deg, #6b5432 25%, transparent 25%), linear-gradient(225deg, #6b5432 25%, transparent 25%); }
.draft-pack--common::before { display: none; } /* no holo shine on the plain wax pack */

.draft-pack--random {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, #ff2ee0, #ffae00, #2effc8, #7a5cff, #ff2ee0);
  background-size: 100% 100%, 400% 400%;
  animation: pack-pulse-in 0.5s ease-out both, pack-idle-bob 2.2s ease-in-out 0.5s infinite, pack-rainbow-shift 4s linear infinite;
  border: 3px solid #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.4);
}
.draft-pack--random .draft-pack-brand,
.draft-pack--random .draft-pack-tagline { color: #fff; text-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.draft-pack--random .draft-pack-badge { background: #fff; color: #7a5cff; }
.draft-pack--random .draft-pack-crimp { background-image: linear-gradient(135deg, #fff 25%, transparent 25%), linear-gradient(225deg, #fff 25%, transparent 25%); }

@keyframes pack-rainbow-shift {
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 400% 50%; }
}

/* Torn-wax crimp seam along the top edge (classic wax-pack detail) */
.draft-pack-crimp {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  background-size: 12px 9px, 12px 9px;
  background-position: 0 0, 6px 0;
  z-index: 2;
}

.draft-pack-badge {
  position: absolute;
  top: 14px; right: -4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 3px 8px 3px 6px;
  border-radius: 4px 0 0 4px;
  z-index: 3;
  box-shadow: -2px 2px 4px rgba(0,0,0,0.3);
}

.draft-pack-brand {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 2;
  margin-bottom: 6px;
}

.draft-pack-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  letter-spacing: 0.5px;
  opacity: 0.85;
  z-index: 2;
  margin-bottom: 18px;
}

.draft-pack::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 48%, rgba(255,255,255,0.12) 56%, transparent 70%);
  background-size: 220% 220%;
  background-position: -140% -140%;
  animation: pack-shine-sweep 2.4s ease-in-out 0.6s infinite;
  z-index: 1;
}

.draft-pack-open-prompt {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: pack-prompt-pulse 1.1s ease-in-out infinite;
}

.draft-pack-tap-icon {
  font-size: 20px;
  animation: pack-tap-bounce 1.1s ease-in-out infinite;
}

.draft-pack-open-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: inherit;
  text-align: center;
  line-height: 1.5;
}

@keyframes pack-prompt-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

@keyframes pack-tap-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes pack-idle-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-0.6deg); }
}

@keyframes pack-pulse-in {
  0%   { transform: scale(0.88); opacity: 0; }
  45%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pack-shine-sweep {
  0%   { background-position: -140% -140%; }
  50%  { background-position: 140% 140%; }
  100% { background-position: 140% 140%; }
}

.draft-pack.pack-tearing {
  cursor: default;
  animation: pack-tear 0.28s ease-in forwards;
}

.draft-pack.pack-tearing .draft-pack-open-prompt {
  animation: none;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

@keyframes pack-tear {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; transform: scale(1); }
  45%  { clip-path: polygon(0% 10%, 15% 0%, 35% 12%, 55% 2%, 75% 14%, 100% 5%, 100% 100%, 0% 100%); opacity: 1; transform: scale(1.06); }
  100% { clip-path: polygon(0% 45%, 15% 32%, 35% 46%, 55% 30%, 75% 48%, 100% 32%, 100% 100%, 0% 100%); opacity: 0; transform: scale(1.14); }
}

.pack-particle {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px 1px rgba(255, 215, 0, 0.8);
  opacity: 0;
  animation: pack-particle-burst 0.5s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}

@keyframes pack-particle-burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--px, 0px), var(--py, 0px)) scale(0.3); }
}

/* ══════════════════════════════════════════════════════════════
   CAREER MODE — persistent panel, choice cards, event wheel.
   Uses --career-accent (see :root) instead of hardcoded pink, and
   reuses cardPopIn/pack-particle-burst from the sections above so
   Career shares the same reveal/burst language as Train and the
   pack-opening screen instead of inventing its own.
   ══════════════════════════════════════════════════════════════ */

.career-panel {
  max-width: 280px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--career-accent-glow);
  border-radius: 12px;
  padding: 14px;
}
.career-panel__ovr {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}
.career-panel__ovr-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 26px;
  color: var(--career-accent);
}
.career-panel__ovr.is-breakout .career-panel__ovr-value {
  animation: gold-glow-pulse 1.8s ease-in-out infinite;
}
.career-panel__name {
  font-size: 10px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 10px;
}
.career-panel__meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #e4e4e7;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0;
  margin-bottom: 8px;
}
.career-panel__contract-row {
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
  margin-bottom: 8px;
}
.career-panel__totals-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 6px 2px;
  margin-bottom: 10px;
}
.career-panel__totals-grid .label {
  font-size: 7px;
  color: #6b7280;
}
.career-panel__totals-grid .value {
  font-size: 10.5px;
  color: #fff;
  font-weight: bold;
}
.career-panel__reputation-row {
  margin-bottom: 8px;
}
.career-panel__reputation-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.career-panel__reputation-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.career-panel__rating-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  color: #e4e4e7;
}
.career-panel__rating-row .delta { color: #6b7280; }
.career-panel__rating-row.is-up .delta { color: #10b981; }
.career-panel__rating-row.is-down .delta { color: #ef4444; }

/* Choice/decision cards — same structural family as .training-card-offer
   (tier badge, big icon, footer button, cardPopIn stagger), tier COLORS
   are read from ui.js's TRAINING_TIER_CONFIG.tiers at render time so both
   systems always look identical, not just similar. */
.career-choice-card {
  background: #090d16;
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  animation: cardPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.career-choice-card:hover {
  transform: translateY(-4px);
}
.career-stakes-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 7px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid currentColor;
}

/* Circular event wheel — size/prominence scales with the triggering
   event's stakes tier (see CAREER_STAKES in career.js) so a routine
   situational spin visibly reads as smaller/calmer than the season-moment
   or World Series spin. */
.career-wheel {
  position: relative;
  border-radius: 50% !important; /* Circular nodes overriding universal border-radius */
  margin: 0 auto;
  border: 3px solid var(--career-accent);
  transition: box-shadow 0.3s ease;
}
.career-wheel--routine {
  width: 160px;
  height: 160px;
  border-width: 3px;
}
.career-wheel--major {
  width: 220px;
  height: 220px;
  border-width: 4px;
  box-shadow: 0 0 20px var(--career-accent-glow);
  animation: career-wheel-idle-pulse 2.4s ease-in-out infinite;
}
.career-wheel--critical {
  width: 260px;
  height: 260px;
  border-width: 5px;
  box-shadow: 0 0 32px var(--career-accent-glow), 0 0 60px rgba(245, 158, 11, 0.25);
  animation: career-wheel-idle-pulse 1.8s ease-in-out infinite;
}
@keyframes career-wheel-idle-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--career-accent-glow); }
  50% { box-shadow: 0 0 34px var(--career-accent-glow), 0 0 10px rgba(255,255,255,0.15); }
}
.career-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid #fff;
  z-index: 2;
  filter: drop-shadow(0 0 4px var(--career-accent-glow));
}
.career-wheel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}
.career-wheel-legend__item {
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #9ca3af;
  transition: all 0.2s ease;
}
.career-wheel-legend__item--active {
  color: #fff;
  border-color: currentColor;
  transform: scale(1.08);
  font-weight: bold;
}
.career-wheel-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50% !important; /* Circular nodes overriding universal border-radius */
  opacity: 0;
  animation: pack-particle-burst 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 3;
}

/* ── FIRST-RUN TUTORIAL: anchored callout bubble ──────────────────────────
   Positioned via JS (top/left set from the anchor element's bounding rect),
   this block only owns visual styling + the directional arrow. ── */
.tutorial-callout {
  position: fixed;
  z-index: 9500;
  max-width: 260px;
  background: #090d16;
  border: 2px solid var(--primary-color, #00ff66);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.35), 0 8px 24px rgba(0, 0, 0, 0.6);
  animation: tutorial-callout-in 0.25s ease-out both;
}

.tutorial-callout-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--primary-color, #00ff66);
  line-height: 1.5;
  margin-bottom: 8px;
}

.tutorial-callout-text {
  font-size: 12px;
  color: #e4e4e7;
  line-height: 1.5;
  margin-bottom: 10px;
}

.tutorial-callout-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.tutorial-callout-skip {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 9px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  flex-shrink: 1;
}

.tutorial-callout-ok {
  background: var(--primary-color, #00ff66);
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.tutorial-callout::after {
  content: '';
  position: absolute;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.tutorial-callout--bottom::after {
  top: -8px;
  border-bottom: 8px solid var(--primary-color, #00ff66);
}

.tutorial-callout--top::after {
  bottom: -8px;
  border-top: 8px solid var(--primary-color, #00ff66);
}

@keyframes tutorial-callout-in {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── CARD "PHYSICALITY" (Part 4 — reusable across every .player-card) ──────
   Cursor-follow tilt on hover, foil shine for Legendary/Epic, and a flip-in
   for any card newly added to the page — all driven generically by JS
   event delegation / a MutationObserver, no per-screen wiring needed. */
@media (prefers-reduced-motion: no-preference) {
  .player-card {
    transition: transform 0.12s ease-out, filter 0.12s ease-out;
    will-change: transform;
  }
  .player-card.card-tilt-active {
    transform: perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.035);
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
    z-index: 5;
  }

  /* Foil shine — Legendary/Epic only, sweeps diagonally on hover */
  .player-card.rarity-Legendary,
  .player-card.rarity-Epic {
    overflow: hidden;
  }
  .player-card.rarity-Legendary::before,
  .player-card.rarity-Epic::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.15) 54%, transparent 65%);
    background-size: 220% 220%;
    background-position: -120% -120%;
    opacity: 0;
    transition: background-position 0.55s ease-out, opacity 0.15s ease-out;
    z-index: 6;
  }
  .player-card.rarity-Legendary.card-tilt-active::before,
  .player-card.rarity-Epic.card-tilt-active::before {
    background-position: 120% 120%;
    opacity: 1;
  }
}

@keyframes card-flip-reveal {
  0%   { opacity: 0; transform: rotateY(100deg) scale(0.9); }
  60%  { opacity: 1; transform: rotateY(10deg) scale(1.02); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

.card-flip-reveal {
  animation: card-flip-reveal 0.4s ease-out both;
  backface-visibility: hidden;
}

@keyframes die-settle-pulse {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

.shield-bar-hit {
  animation: shake-dmg 0.35s ease-out;
}

/* ── RATINGS INFO POPOVER (Draft Screen) ──────────────────────────────── */
#ratings-info-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #3b82f6;
  color: #3b82f6;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
  transition: all 0.2s ease;
  z-index: 210;
}
#ratings-info-btn:hover {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.7);
}

#ratings-info-dropdown {
  position: absolute;
  top: 50px;
  right: 14px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: rgba(9, 13, 22, 0.98);
  border: 2px solid #3b82f6;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 0 30px rgba(0,0,0,0.9), 0 0 15px rgba(59,130,246,0.25);
  z-index: 250;
  backdrop-filter: blur(8px);
  font-size: 11px;
  line-height: 1.6;
  color: #e4e4e7;
}

/* ── MOBILE RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Draft/Starter/Reward card wrappers: unified snug width (~175px) across all modes */
  .draft-card-wrapper,
  .starter-card-wrapper,
  .draft-card-option {
    width: 175px !important;
    max-width: 175px !important;
    min-width: 156px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .draft-card-wrapper > div:first-child,
  .draft-card-option > div:first-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .draft-card-caption {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 3px 0 !important;
  }

  .draft-card-caption > div {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* Unified standard player card across ALL screens on mobile (Draft, Battle, Rewards, Roster) */
  .player-card {
    width: 152px !important;
    height: 236px !important;
    max-width: 152px !important;
    min-width: 152px !important;
    padding: 7px 8px 6px 8px !important;
    font-size: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    position: relative !important;
  }

  .player-card .card-position,
  .player-card .card-ovr,
  .player-card .card-year {
    font-size: 6px !important;
    padding: 2px 4px !important;
  }

  .player-card .card-name {
    line-height: 1.2 !important;
    margin: 1px 0 !important;
    padding: 1px 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .player-card .card-traits-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 2px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .player-card .card-trait-badge {
    font-size: 5px !important;
    padding: 1px 4px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .player-card .card-sec-pos-line {
    font-size: 6px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .player-card .card-stats {
    padding: 4px 5px !important;
    margin: 1px 0 !important;
    font-size: 7px !important;
  }

  .player-card .stat-row {
    font-size: 7px !important;
    margin: 1px 0 !important;
  }

  .player-card .stat-badge {
    font-size: 6px !important;
    padding: 1px 4px !important;
  }

  .player-card .card-footer {
    font-size: 8px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .player-card .card-stamina-badge {
    font-size: 7px !important;
  }

  .popup-player-name {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  /* Cards row in Draft & Rewards */
  .cards-row,
  .draft-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* Hide synergy helpers in mobile draft to save space */
  .draft-synergy-helper {
    display: none !important;
  }
  
  /* Make draft button smaller */
  .btn-sign-draft {
    padding: 8px !important;
    font-size: 10px !important;
    min-height: 32px !important;
  }

  .pre-fight-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .roster-slot {
    padding: 6px 8px !important;
    font-size: 10px !important;
    margin-bottom: 4px !important;
  }
  .roster-slot .player-name {
    font-size: 11px !important;
  }
  .roster-slot-number {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    line-height: 18px !important;
  }
  #pre-fight-player-lineup, #pre-fight-enemy-rotation {
    gap: 4px !important;
  }
  #pre-fight-player-lineup .roster-slot, #pre-fight-enemy-rotation .roster-slot {
    padding: 4px 6px !important;
  }
/* ── Main Menu Vertical Centering ── */
body.on-main-menu {
  min-height: 100vh;
}

body.on-main-menu .main-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: calc(100vh - 64px) !important;
  padding: 8px 20px 30px 20px !important;
}

/* ── Main Menu & Mode Select Stadium Background ── */
#screen-mode-select {
  position: relative;
  background-color: rgba(7, 20, 14, 0.70) !important;
  background-image: 
    linear-gradient(180deg, rgba(7, 20, 14, 0.55) 0%, rgba(7, 20, 14, 0.75) 100%),
    url('assets/TEST3.webp') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border: 2px solid #10b981;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), inset 0 0 25px rgba(0, 0, 0, 0.85);
  padding: 24px 28px 45px 28px !important;
  max-width: 980px !important;
  width: 100% !important;
  margin: clamp(35px, 5vh, 70px) auto 40px auto !important;
}

/* ── Pokelike-Style Menu Brand Lockup ── */
.main-logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto clamp(36px, 5vh, 56px) auto !important;
  text-align: center;
}

.menu-main-logo {
  max-width: 360px !important;
  width: 80% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 8px auto !important;
  filter: drop-shadow(0 4px 18px rgba(0, 255, 102, 0.55));
}

.menu-tagline-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.menu-tagline-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.4) 40%, rgba(56, 189, 248, 0.85) 100%);
  box-shadow: 0 0 4px rgba(56, 189, 248, 0.5);
}

.menu-tagline-line.line-right {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.85) 0%, rgba(56, 189, 248, 0.4) 60%, transparent 100%);
}

.menu-tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
  color: #7dd3fc;
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.menu-tagline-pipe {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 6px;
}

.menu-tagline-ver {
  color: #fef08a;
  text-shadow: 0 0 6px rgba(254, 240, 138, 0.6);
}

#screen-menu {
  position: relative;
  background-color: rgba(7, 20, 14, 0.70) !important;
  background-image: 
    linear-gradient(180deg, rgba(7, 20, 14, 0.55) 0%, rgba(7, 20, 14, 0.75) 100%),
    url('assets/TEST.webp') !important;
  background-size: cover !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  image-rendering: pixelated;
  border: 2px solid #10b981;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), inset 0 0 25px rgba(0, 0, 0, 0.85);
  padding: 30px 20px;
  max-width: 900px;
  margin: 0 auto;
}

  /* Hide the BaseRogue text in draft on mobile */
  #screen-menu > p {
    display: none !important;
  }

  /* Allow body and workspace to scroll vertically on mobile */
  body, body.workspace-active {
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.workspace-active .main-container {
    height: auto !important;
    padding: 6px !important;
    max-width: 100vw !important;
  }

  #game-workspace {
    height: auto !important;
  }

  .main-container {
    padding: 8px !important;
    max-width: 100vw !important;
  }

  /* Clean Native Mobile Tab System (< 768px) */
  body {
    padding-bottom: 56px !important;
  }

  .workspace-sidebar.left-sidebar,
  .workspace-sidebar.right-sidebar,
  .workspace-center-panel,
  .draft-col {
    display: none !important;
    width: 100% !important;
  }

  .workspace-sidebar.left-sidebar.mobile-active,
  .workspace-sidebar.right-sidebar.mobile-active,
  .workspace-center-panel.mobile-active,
  .draft-col.mobile-active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Workspace Layout: 1 column, 100% width */
  .workspace-three-columns {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .workspace-center-panel {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Glass panels full width */
  .glass-panel {
    padding: 12px 10px !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* HUD Top Bar — header was staying in one un-wrapped row (logo | icon
     buttons | game-hud), which squeezed the 4-item game-hud into whatever
     leftover width remained (as little as ~165px on a 400px phone), so its
     items stacked inside that narrow column and the stage text wrapped
     across 2-3 lines. Force header onto two clean full-width rows instead:
     row 1 = logo + icon buttons, row 2 = game-hud as a proper 2x2 grid. */
  header {
    flex-wrap: wrap !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    row-gap: 8px !important;
  }

  .header-icon-actions {
    margin-left: auto !important;
  }

  /* :not(.hidden) matters here — #game-hud (an ID selector) otherwise beats
     .hidden's `display:none !important` on specificity alone (ID > class,
     regardless of !important on both sides), which was forcing the HUD
     bar to render on the main menu / mode-select screens, before any run
     had even started. */
  #game-hud:not(.hidden) {
    flex: 1 1 100% !important;
    width: 100% !important;
    order: 3 !important;
    display: grid !important;
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track still grows to fit its
       content's min-content size (nowrap text's *full* width), which is what
       let the long "Etapa: <zone name>" text blow its column out to 295px
       and push the budget column off the right edge of the screen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .hud-item {
    font-size: 8px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .hud-item span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #btn-toggle-roster-view,
  #btn-toggle-synergies-mobile {
    display: flex !important;
    align-items: center !important;
    font-size: 8px !important;
    padding: 6px 8px !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  /* Match Arena Layout */
  .match-arena {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Fight Cards Deck: fit side-by-side on mobile without clipping */
  .rpg-fight-deck {
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 8px 0 !important;
  }

  .fight-card-slot {
    flex: 1 !important;
    max-width: 48% !important;
    width: 48% !important;
  }

  .fight-card-slot .card {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 8.5px !important;
    padding: 6px 4px !important;
  }

  .vs-circle {
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* Faceoff panel & Scoreboard */
  .faceoff-panel {
    width: 100% !important;
    padding: 8px 10px !important;
  }

  .scoreboard {
    width: 100% !important;
    font-size: 7.5px !important;
    padding: 8px !important;
  }

  /* Battle Right Column (HP, zones, dice button) */
  .match-arena > div:last-child {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Roll Dice Button: touch friendly */
  #btn-roll-dice {
    font-size: 12px !important;
    padding: 16px 12px !important;
    min-height: 52px !important;
    width: 100% !important;
  }

  /* Map screen — bigger nodes and a background texture so it reads as a
     designed screen rather than a bare wireframe diagram on a small phone
     canvas (the scale(0.98) here previously did essentially nothing). */
  #map-nodes-container {
    gap: 16px !important;
  }

  .map-viewport {
    padding: 6px 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .zone-header {
    padding: 12px 14px !important;
  }

  .zone-icon {
    font-size: 28px !important;
  }

  .zone-name {
    font-size: 11px !important;
  }

  .zone-subtitle {
    font-size: 16px !important;
  }

  .zone-canvas {
    padding: 16px 14px !important;
  }

  .map-node-visual {
    width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }

  .map-node-visual .node-emoji {
    font-size: 14px !important;
  }

  .map-node-visual.node-boss {
    width: 104px !important;
    min-height: 104px !important;
  }

  .map-node-visual.node-boss .node-emoji {
    font-size: 38px !important;
  }

  /* Modals & Popups: fit mobile screens */
  .battle-over-modal > div {
    max-width: 95vw !important;
    padding: 16px 12px !important;
  }

  #outcome-popup {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90vw !important;
  }

  #combat-info-dropdown,
  #ratings-info-dropdown {
    width: 90vw !important;
    right: 5vw !important;
    left: 5vw !important;
    top: 45px !important;
  }

  /* Starter pool & draft cards: centered wrap on mobile */
  .starter-selection {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .draft-cards-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .starter-card-wrapper .btn {
    font-size: 10px !important;
    padding: 8px !important;
    min-height: 36px !important;
  }

  /* Starter Assignment Screen */
  .starter-assign-layout {
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  .starter-slots-wrap,
  .starter-players-wrap {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  h2 {
    font-size: 14px !important;
  }
  h3 {
    font-size: 11px !important;
  }
}



/* --- MINIMALIST SINGLE-SCREEN MOBILE BATTLE (< 768px) --- */
@media (max-width: 768px) {
  /* Pre-fight screen: hide player batters lineup panel on mobile */
  #screen-pre-fight .pre-fight-columns > div:first-child {
    display: none !important;
  }

  #screen-pre-fight:not(.hidden) .pre-fight-columns {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* Mobile Match Simulator Viewport (Fits 100% inside 1 screen and scrollable inside green box if screen is small) */
  /* Previously this had its own max-height + overflow-y:auto, creating a scroll
     box nested inside the page's own scroll — you'd have to scroll the page to
     reveal the bottom of this panel, THEN scroll again inside it to reach the
     luck zones / roll button. Letting it flow in the normal page scroll (like
     every other screen) means there's one scroll instead of two, and it's what
     lets #dice-action-bar's sticky positioning stick to the real viewport
     bottom instead of an inner box that itself could be scrolled out of view. */
  #screen-match:not(.hidden) {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 3px 5px 12px 5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #match-header-title {
    display: none !important;
  }

  .match-arena {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  /* Compact LED Scoreboard with Baseball Diamond SVG on the LEFT.
     Thinner border + no outer glow ring on mobile — the base .scoreboard style
     (4px double border + 3px black shadow ring) reads as a heavy standalone box;
     flattened here so it sits as one calm strip instead of a boxed panel. */
  .scoreboard {
    width: 100% !important;
    font-size: 7.5px !important;
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .scoreboard-text-panel {
    flex: 1 !important;
    min-width: 0 !important;
  }

  #scoreboard-inning-text {
    margin-bottom: 2px !important;
    font-size: 7.5px !important;
    text-align: center !important;
  }

  #bases-display-row {
    display: flex !important;
    order: -1 !important; /* Positions Diamond SVG on far LEFT of mobile scoreboard */
    border: none !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #bases-display-row svg {
    width: 36px !important;
    height: 36px !important;
  }

  /* 1v1 Battle Arena Cards — proportional and matching standard card size */
  .rpg-fight-deck {
    transform: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 0 !important;
    padding: 4px !important;
    background: none !important;
    border: none !important;
  }

  .fight-card-slot {
    flex: 1 1 48% !important;
    max-width: 155px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }

  .fight-card-slot .card,
  .fight-card-slot .player-card {
    width: 152px !important;
    height: 236px !important;
    max-width: 100% !important;
    aspect-ratio: 152 / 236 !important;
    font-size: 7.5px !important;
    padding: 7px 8px 6px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  .fight-card-slot .player-card .card-stats {
    padding: 3px 4px !important;
    margin: 1px 0 !important;
  }

  .fight-card-slot .player-card .stat-row {
    margin: 1px 0 !important;
    font-size: 7px !important;
  }

  .fight-card-slot .player-card .card-name {
    padding: 0 2px !important;
    margin: 1px 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .fight-card-slot .player-card .card-header {
    font-size: 6px !important;
    margin-bottom: 2px !important;
  }

  .vs-circle {
    font-size: 10px !important;
    margin: 0 !important;
  }

  /* Active Batter / Pitcher HP Bar & Names — same flattening as .scoreboard above */
  .faceoff-panel {
    width: 100% !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    gap: 2px !important;
    margin: 4px 0 0 0 !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
  }

  .faceoff-panel > div:first-child > div {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .faceoff-name {
    font-size: 8.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    box-sizing: border-box !important;
  }

  /* Redundant with the ratings already printed on the batter's card above it —
     hidden on mobile to cut clutter (kept on desktop where there's room). */
  #match-batter-stats-box {
    display: none !important;
  }

  .hp-bar-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 2px 0 !important;
    box-sizing: border-box !important;
  }

  #match-pitcher-hp-text {
    font-size: 8px !important;
    text-align: right !important;
    transform-origin: right !important;
    margin-top: 2px !important;
    color: #a7f3d0 !important;
  }

  #match-pitchers-rotation-queue {
    display: none !important; /* Hide 5-pitcher queue icons on mobile to save vertical space */
  }

  /* Debuff badge ("+X% DAMAGE RECEIVED") was wrapping across 3 lines inside
     the ~50%-width pitcher column — shrink it into one calm inline chip. */
  #match-pitcher-debuff-badge {
    font-size: 6.5px !important;
    padding: 2px 4px !important;
    margin-top: 3px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Dice Battle Container: the ONE bordered panel that owns everything below the
     faceoff (vitals, dice, luck zones). Nested panels inside it (zones, dice-d100)
     go borderless/flat so the screen reads as a couple of calm sections instead of
     boxes stacked inside boxes. */
  #dice-battle-panel {
    padding: 12px !important;
    margin-top: 6px !important;
    gap: 10px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Luck Zones: flat, no inner box — just a hairline divider from the section above */
  #zones-panel {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 0 0 !important;
    margin: 2px 0 0 0 !important;
    background: none !important;
    border: none !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    box-sizing: border-box !important;
  }

  .clutch-active-banner {
    font-size: 8px !important;
    padding: 3px 6px !important;
    margin-bottom: 5px !important;
    border-radius: 4px !important;
  }

  .clutch-tag-badge {
    font-size: 6.5px !important;
    padding: 0.5px 2px !important;
    margin-left: 2px !important;
  }

  /* Single column instead of two — even with the overflow bug fixed, a
     ~167px-wide column is too tight for "🚀 Home Run (HR)" plus a "82–100"
     range to sit apart with any breathing room; text ran together edge to
     edge. Full row width gives space between the label and the number. */
  .outcome-probabilities-grid {
    grid-template-columns: 1fr !important;
    font-size: 10px !important;
    gap: 3px !important;
  }

  .outcome-probabilities-grid .outcome-row {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  /* #zones-panel is a <details> on mobile (collapsed by default — see the JS
     that removes its `open` attribute at render time) so the probability
     breakdown doesn't compete with the roll button/vitals for attention
     until the player actually wants it. #zones-panel-header is the
     <summary> — style it as an obvious tap target with its own chevron
     instead of the inconsistent native browser marker. */
  #zones-panel-header {
    font-size: 8px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    color: #38bdf8 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    list-style: none !important;
    padding: 4px 0 !important;
  }

  #zones-panel-header::-webkit-details-marker {
    display: none !important;
  }

  #zones-panel-header::after {
    content: '▾' !important;
    margin-left: 6px !important;
    display: inline-block !important;
    transition: transform 0.15s ease !important;
  }

  #zones-panel[open] #zones-panel-header::after {
    transform: rotate(180deg) !important;
  }

  #zones-panel:not([open]) #zones-lines {
    display: none !important;
  }

  #zones-panel #zones-lines {
    display: block !important;
    width: 100% !important;
  }

  /* This used to style the individual outcome rows directly (back when
     #zones-lines' children WERE the rows), but the DOM grew a
     .outcome-probabilities-grid wrapper in between — so this selector was
     silently hitting the GRID CONTAINER instead of each row, forcing
     `display:flex !important` on it and overriding the grid layout
     entirely (root cause of the 2-column-that-wouldn't-become-1-column
     bug). The rows themselves are already styled correctly via
     `.outcome-probabilities-grid .outcome-row` below — this rule is dead
     weight now that it's pointed at the wrong element, so it's removed
     rather than "fixed", since fixing it would just duplicate that rule. */

  #team-vitals {
    gap: 4px !important;
  }

  #team-vitals span {
    font-size: 9px !important;
  }

  #so-chain-display {
    font-size: 9px !important;
  }

  #dice-result-display {
    width: 50px !important;
    height: 32px !important;
    font-size: 18px !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
  }

  /* d100 cubes: scale the whole 3D die uniformly (rather than resizing width/
     height directly, which would desync from the faces' fixed translateZ and
     break the cube geometry) so the idle "0 / 0" state doesn't dominate the
     screen before the player has even rolled. */
  #dice-d100-container {
    gap: 4px !important;
  }

  .d100-die {
    transform: scale(0.6) !important;
    margin: -11px !important;
  }

  /* Action bar: sticks to the bottom of the mobile scroll viewport so ROLL DICE
     is always one tap away, no matter how far the player has scrolled through
     the luck zones / log above it. */
  #dice-action-bar {
    position: sticky !important;
    bottom: 4px !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
    background: rgba(9, 13, 22, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    border-radius: 10px !important;
  }

  #btn-roll-dice {
    font-size: 11px !important;
    padding: 12px 10px !important;
    min-height: 44px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  #btn-match-skip-game {
    font-size: 9px !important;
    padding: 8px 10px !important;
    margin-top: 6px !important;
  }

  /* Hide raw text log box on mobile so everything sits inside 1 screen height */
  .match-log {
    display: none !important;
  }

  /* Mid-run Reward Draft Options on Mobile: Centered Row / Grid */
  .midrun-draft-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .draft-card-option {
    width: 175px !important;
    max-width: 175px !important;
  }

  .draft-card-option > div {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ── BOSS TRAIT REWARD MODAL — MOBILE ─────────────────────────────────────
   showTraitSelectionModal() in ui.js builds this overlay from inline styles;
   the base recipe caps each choice card at max-width:240px so 3 can sit in a
   row on desktop. On a phone they wrap to one per line anyway (3x240px never
   fits ~340px), which is fine functionally, but leaves the cards small and
   off-center with a lot of empty side margin. Let them use the full row. */
@media (max-width: 768px) {
  .trait-choice-card {
    max-width: 100% !important;
    width: 100% !important;
    padding: 18px 16px !important;
  }
}

/* ── RUN SUMMARY MODAL (end-of-run batter/pitcher stats) — MOBILE ─────────
   #modal-run-summary is a desktop-only data table (15 batting columns / 9
   pitching columns) with no mobile handling at all before this — it just
   overflow-x:scrolled at full desktop density. Shrinks the type/padding so
   more columns are visible per scroll, and pins the name column so it stays
   in view while scrolling sideways through the stats. */
@media (max-width: 768px) {
  #modal-run-summary > div {
    padding: 14px 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  #modal-run-summary h3 {
    font-size: 9px !important;
  }

  #modal-run-summary [id^="tab-summary-"] {
    flex: 1 !important;
    font-size: 9px !important;
    padding: 10px 6px !important;
    text-align: center !important;
  }

  #modal-run-summary table {
    font-size: 9px !important;
  }

  #modal-run-summary th,
  #modal-run-summary td {
    padding: 6px 5px !important;
    white-space: nowrap !important;
  }

  #modal-run-summary th:first-child,
  #modal-run-summary td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #090d16 !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ── END-OF-RUN SCREENS (defeat & victory) — MOBILE ────────────────────── */
@media (max-width: 768px) {
  #gameover-title {
    font-size: 20px !important;
  }

  #gameover-history-log {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 4px;
    margin-bottom: 8px;
  }

  .history-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
}


/* ── GAME MODE SELECTOR (POKELIKE STYLE) ────────────────────────────────── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 14px;
  margin-bottom: 6px;
}

.career-card {
  border-color: rgba(236, 72, 153, 0.4);
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.1);
}

.difficulty-option {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.difficulty-option:hover {
  transform: translateY(-2px);
  border-color: #ec4899;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.25);
}

.mode-card {
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.mode-card:hover {
  transform: translateY(-4px);
}

.story-card {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}
.story-card:hover {
  border-color: #10b981;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.35);
}

.quick-card {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}
.quick-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.35);
}

.mode-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.mode-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
}

.mode-subtitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #f59e0b;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

.mode-desc {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.45;
  margin-bottom: 20px;
  flex: 1;
}

.btn-mode {
  width: 100%;
  padding: 10px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
}

.story-card .btn-mode {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  color: #fff;
}

.quick-card .btn-mode {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: 1px solid #60a5fa;
  color: #fff;
}

.challenge162-card {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}
.challenge162-card:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}
.challenge162-card .btn-mode {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: 1px solid #fbbf24;
  color: #fff;
}

.mode-card.is-locked {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  box-shadow: none !important;
  opacity: 0.65;
  cursor: not-allowed !important;
}
.mode-card.is-locked:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
.mode-card.is-locked .mode-title {
  color: #94a3b8;
}
.mode-card.is-locked .mode-subtitle {
  color: #64748b;
}
.mode-card.is-locked .mode-desc {
  color: #64748b;
}
.mode-card.is-locked .btn-mode {
  background: rgba(51, 65, 85, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}







/* Season Roulette Glowing Animation */
.roulette-box.winning-glow {
  border-color: #ffd700 !important;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, rgba(0,0,0,0.9) 100%) !important;
  box-shadow: 0 0 35px #ffd700, inset 0 0 20px #ffd700 !important;
  transform: scale(1.08);
  animation: pulseGlow 0.6s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
  from {
    box-shadow: 0 0 25px #ffd700, inset 0 0 15px #ffd700;
  }
  to {
    box-shadow: 0 0 45px #ffe033, inset 0 0 30px #ffe033;
  }
}

/* 162-0 Challenge — season stat tables */
.c162-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  color: #e4e4e7;
  font-family: 'JetBrains Mono', monospace;
}
.c162-th {
  text-align: right;
  padding: 8px 12px;
  color: #9ca3af;
  font-size: 11px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.c162-th-name {
  text-align: left;
  padding-left: 14px;
}
.c162-td {
  text-align: right;
  padding: 6px 12px;
  white-space: nowrap;
}
.c162-td:first-child {
  text-align: left;
  padding-left: 14px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  color: #f3f4f6;
  font-size: 13.5px;
}
.c162-tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
}
.c162-tr:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
.c162-tr-alt {
  background: rgba(255, 255, 255, 0.025);
}
.c162-tag-role {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: bold;
  font-family: 'Press Start 2P', monospace;
}
.challenge162-slot-btn:hover,
.challenge162-candidate-btn:hover {
  filter: brightness(1.15);
}

@keyframes c162-streak-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
/* 162-0 Challenge — Responsive 2-Column Dashboard Layout */
.c162-season-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}
.c162-main-panel {
  flex: 1 1 70%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.c162-sidebar-panel {
  flex: 0 0 350px;
  width: 350px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  max-height: 780px;
  box-sizing: border-box;
}
.c162-game-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
  max-height: 710px;
}
.c162-game-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  font-size: 11px;
  transition: all 0.2s ease;
}
.c162-game-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateX(-2px);
}
.c162-outcome-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 24px;
  text-align: center;
}
.c162-outcome-w {
  background: rgba(52, 211, 153, 0.2);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.4);
}
.c162-outcome-l {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

@media (max-width: 1080px) {
  .c162-season-grid {
    flex-direction: column;
  }
  .c162-sidebar-panel {
    flex: 1 1 auto;
    width: 100%;
    max-height: 360px;
  }
  .c162-game-feed {
    max-height: 290px;
  }
}

.c162-streak-badge {
  display: inline-block;
  animation: c162-streak-pulse 1.1s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   162-0 Challenge — Authentic BaseRogue Cards with Golden Holographic Aura
   ───────────────────────────────────────────────────────────── */
.c162-roster-section {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.c162-section-header {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.c162-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
}

/* Card Slot Wrapper with Position Pill and 162 Glow */
.c162-slot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}
.c162-slot-header-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 8.5px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3af;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}
.c162-slot-item.active .c162-slot-header-pill {
  background: linear-gradient(135deg, #ffd700, #f59e0b);
  color: #000;
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  font-weight: bold;
}

/* Challenge 162 Card Container with Native Size & Holographic Glow */
.c162-card-container {
  position: relative;
  width: 152px;
  height: 236px;
  border-radius: 4px;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.c162-card-container .player-card {
  width: 152px !important;
  height: 236px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.2);
}
.c162-slot-item:hover .c162-card-container {
  transform: translateY(-6px) scale(1.03);
}
.c162-slot-item:hover .player-card {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8), 0 0 18px rgba(245, 158, 11, 0.5);
  filter: brightness(1.08);
}
.c162-slot-item.active .c162-card-container {
  transform: translateY(-8px) scale(1.05);
}
.c162-slot-item.active .player-card {
  box-shadow: 0 0 0 3px #ffd700, 0 0 25px rgba(255, 215, 0, 0.85), 0 15px 35px rgba(0, 0, 0, 0.9) !important;
  animation: c162-gold-aura 1.5s infinite alternate;
}

@keyframes c162-gold-aura {
  0% { box-shadow: 0 0 0 3px #ffd700, 0 0 18px rgba(255, 215, 0, 0.7), 0 12px 25px rgba(0,0,0,0.8); }
  100% { box-shadow: 0 0 0 4px #fff, 0 0 32px rgba(255, 215, 0, 1), 0 18px 40px rgba(0,0,0,0.9); }
}

/* Empty Card Frame at Exact Native Scale */
.c162-empty-card-frame {
  width: 152px;
  height: 236px;
  position: relative;
  background: rgba(15, 23, 42, 0.55);
  border: 3px dashed rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  box-sizing: border-box;
  transition: all 0.2s ease;
}
.c162-slot-item:hover .c162-empty-card-frame {
  border-color: var(--challenge162-accent);
  background: rgba(245, 158, 11, 0.08);
  color: #f1f5f9;
}
.c162-slot-item.active .c162-empty-card-frame {
  border: 3px solid #ffd700;
  background: rgba(245, 158, 11, 0.15);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}
.c162-empty-card-frame .c162-empty-icon {
  font-size: 26px;
  color: #475569;
  transition: transform 0.2s ease, color 0.2s ease;
}
.c162-slot-item:hover .c162-empty-icon {
  color: #ffd700;
  transform: scale(1.25);
}
.c162-empty-card-frame .c162-empty-text {
  font-size: 9px;
  font-family: 'Press Start 2P', monospace;
  color: #94a3af;
  text-align: center;
  padding: 0 6px;
  line-height: 1.3;
}

/* Candidate Picker Gallery Grid */
.c162-picker-drawer {
  background: rgba(8, 12, 20, 0.96);
  border: 2px solid var(--challenge162-accent);
  border-radius: 14px;
  padding: 18px 20px;
  margin-top: 20px;
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.25);
}
.c162-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-height: 480px;
  overflow-y: auto;
  padding: 10px 4px 16px 4px;
}
.c162-candidate-wrap {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.c162-candidate-wrap:hover {
  transform: translateY(-8px) scale(1.05);
  z-index: 30;
}
.c162-candidate-wrap:hover .player-card {
  box-shadow: 0 0 0 3px #ffd700, 0 0 20px rgba(255, 215, 0, 0.75), 0 12px 28px rgba(0, 0, 0, 0.8) !important;
}

/* Ring of Champions All-In-One 17 Cards Grid (2 Rows) */
.c162-all-champions-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
}
.c162-champions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}
.c162-result-card-wrap {
  flex: 0 0 auto;
  transform: scale(0.72);
  transform-origin: top center;
  margin: 0 -12px -56px -12px;
  transition: transform 0.2s ease, z-index 0.2s ease;
}
.c162-result-card-wrap:hover {
  transform: scale(0.92) translateY(-10px);
  z-index: 60;
}

/* ── HIGH-END DEFENSIVE TENSION MODAL (BOTTOM OF INNING EVENT) ──────────── */
@keyframes def-tension-pulse {
  0%, 100% {
    box-shadow: 0 0 60px rgba(56, 189, 248, 0.25), 0 0 100px rgba(0, 0, 0, 0.95), inset 0 0 35px rgba(56, 189, 248, 0.15);
    border-color: #38bdf8;
  }
  50% {
    box-shadow: 0 0 85px rgba(251, 191, 36, 0.35), 0 0 120px rgba(0, 0, 0, 0.98), inset 0 0 50px rgba(251, 191, 36, 0.25);
    border-color: #fbbf24;
  }
}

@keyframes def-radar-sweep {
  0% { transform: scale(0.96); opacity: 0.85; }
  50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 0 12px #fbbf24); }
  100% { transform: scale(0.96); opacity: 0.85; }
}

@keyframes def-scanline {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 0.35; }
  100% { transform: translateY(400%); opacity: 0; }
}

.def-modal-backdrop {
  background: radial-gradient(circle at 50% 40%, rgba(12, 24, 42, 0.92) 0%, rgba(3, 7, 18, 0.98) 100%) !important;
  backdrop-filter: blur(12px) !important;
}

.def-modal-box {
  background: linear-gradient(180deg, #091322 0%, #050b14 100%) !important;
  border: 2px solid #38bdf8;
  border-radius: 14px;
  animation: def-tension-pulse 3.5s ease-in-out infinite;
  overflow: hidden;
  position: relative;
  max-width: 480px !important;
  padding: 14px 18px !important;
}

.def-scanline-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #38bdf8 50%, #fbbf24 80%, transparent 100%);
  animation: def-scanline 3s linear infinite;
  pointer-events: none;
}

.def-badge-radar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
  padding: 4px 10px;
  border-radius: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  color: #fef08a;
  letter-spacing: 0.5px;
  animation: def-radar-sweep 2.5s ease-in-out infinite;
  margin-bottom: 4px;
}

#def-modal-title {
  font-size: 10.5px;
  margin-bottom: 3px;
  line-height: 1.3;
}

#def-modal-scenario {
  font-size: 8px;
  margin-bottom: 8px;
  line-height: 1.25;
}

/* ── RETRO BASEBALL FIELD RADAR ─────────────────────────────────────────── */
.def-field-radar-card {
  position: relative;
  width: 100%;
  height: 150px !important;
  background: radial-gradient(circle at 50% 85%, #0d281a 0%, #041009 100%);
  border: 2px solid #10b981;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.85), 0 0 18px rgba(16, 185, 129, 0.25);
}

@keyframes def-target-ring-pulse {
  0% { r: 8; opacity: 1; stroke-width: 2; }
  100% { r: 24; opacity: 0; stroke-width: 1; }
}

@keyframes def-laser-dash {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

.def-trajectory-laser {
  animation: def-laser-dash 0.6s linear infinite;
}

.def-pos-node text {
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  fill: #94a3b8;
  text-anchor: middle;
  dominant-baseline: central;
}

.def-pos-target-node text {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  font-weight: bold;
  fill: #fef08a;
  text-anchor: middle;
  dominant-baseline: central;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}

/* Tactics Selector */
.def-tactics-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.def-tactic-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 6px !important;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
  font-family: 'Press Start 2P', monospace;
}

.def-tactic-card:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.def-tactic-card.active {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(217, 119, 6, 0.28) 100%);
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.4);
}

.def-tactic-title {
  font-size: 8px !important;
  color: #fff;
  margin-bottom: 4px !important;
  letter-spacing: 0.5px;
}

.def-tactic-desc {
  font-size: 7px !important;
  color: #cbd5e1 !important;
  line-height: 1.35 !important;
}

.def-fielder-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.08);
  border-radius: 10px;
  padding: 8px 12px !important;
  display: flex;
  align-items: center;
  gap: 10px !important;
  text-align: left;
  margin-bottom: 8px !important;
}

.def-fielder-avatar {
  font-size: 22px !important;
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(251, 191, 36, 0.2) 100%);
  border: 1.5px solid #fbbf24;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

/* Tension Probability Gauge */
#def-modal-gauge-zone {
  margin-bottom: 8px !important;
}

#def-modal-gauge-zone span {
  font-size: 6.5px !important;
}

.def-gauge-wrapper {
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  height: 14px !important;
  position: relative;
  overflow: hidden;
  display: flex;
  margin: 4px 0 2px 0 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.def-gauge-catch {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #34d399 70%, #6ee7b7 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.def-gauge-error {
  flex: 1;
  height: 100%;
  background: linear-gradient(90deg, #f43f5e 0%, #e11d48 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.def-gauge-needle {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: #ffffff;
  box-shadow: 0 0 6px #fff, 0 0 10px #fbbf24;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: 2px;
  transition: left 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}

.def-stakes-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 16px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
}

.def-stake-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.25) 100%);
  border: 1px solid #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 10px 8px;
  color: #6ee7b7;
  text-align: center;
}

.def-stake-fail {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(190, 18, 60, 0.25) 100%);
  border: 1px solid #f43f5e;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.2);
  border-radius: 8px;
  padding: 10px 8px;
  color: #fda4af;
  text-align: center;
}

.def-roll-btn {
  width: 100%;
  padding: 15px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10.5px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.45), 0 4px 0 #000 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border-radius: 8px !important;
}

.def-roll-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.7), 0 6px 0 #000 !important;
}

.def-roll-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3), 0 2px 0 #000 !important;
}

.def-result-card-success {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.9) 0%, rgba(6, 95, 70, 0.95) 100%);
  border: 2px solid #34d399;
  box-shadow: 0 0 30px rgba(52, 211, 153, 0.45);
  border-radius: 10px;
  padding: 14px;
  color: #ecfdf5;
  animation: bounce 0.6s ease;
}

.def-result-card-error {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.9) 0%, rgba(159, 18, 57, 0.95) 100%);
  border: 2px solid #f43f5e;
  box-shadow: 0 0 30px rgba(244, 63, 94, 0.45);
  border-radius: 10px;
  padding: 14px;
  color: #fff1f2;
}

/* ── DEFENSIVE EVENT MODAL MOBILE RESPONSIVENESS ────────────────────────── */
@media (max-width: 600px) {
  #modal-mid-inning-defense {
    padding: 8px !important;
    align-items: center !important;
  }

  .def-modal-box {
    padding: 14px 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 94vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
  }

  .def-badge-radar {
    font-size: 7px !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
    gap: 4px !important;
  }

  #def-modal-title {
    font-size: 9.5px !important;
    margin-bottom: 2px !important;
    line-height: 1.35 !important;
  }

  #def-modal-scenario {
    font-size: 8.5px !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
  }

  .def-field-radar-card {
    height: 130px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }

  #def-field-speed-tag,
  #def-field-target-tag {
    font-size: 6px !important;
    padding: 2px 5px !important;
    top: 4px !important;
  }

  #def-field-speed-tag { left: 6px !important; }
  #def-field-target-tag { right: 6px !important; }

  .def-fielder-card {
    padding: 8px 10px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
  }

  .def-fielder-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
    border-radius: 6px !important;
  }

  #def-modal-hp-status {
    padding: 5px 8px !important;
    margin-bottom: 6px !important;
    font-size: 6.5px !important;
    border-radius: 6px !important;
  }

  .def-tactics-selector {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .def-tactic-card {
    padding: 6px 4px !important;
    border-radius: 8px !important;
  }

  .def-tactic-title {
    font-size: 7px !important;
    margin-bottom: 2px !important;
  }

  .def-tactic-desc {
    font-size: 5.5px !important;
    line-height: 1.2 !important;
  }

  #def-modal-gauge-zone {
    margin-bottom: 6px !important;
  }

  #def-modal-gauge-zone span {
    font-size: 6px !important;
  }

  .def-gauge-wrapper {
    height: 12px !important;
    margin: 4px 0 2px 0 !important;
  }

  #def-dice-d100-panel {
    margin-bottom: 6px !important;
    gap: 2px !important;
  }

  #def-dice-d100-container {
    transform: scale(0.85);
    margin: -4px 0 !important;
    gap: 6px !important;
  }

  #def-dice-result-display {
    font-size: 12px !important;
  }

  .def-roll-btn {
    padding: 11px 8px !important;
    font-size: 8.5px !important;
    border-radius: 6px !important;
  }

  .def-result-card-success,
  .def-result-card-error {
    padding: 8px 10px !important;
    font-size: 8px !important;
    border-radius: 8px !important;
  }
}

/* ── RUN SUMMARY MODAL MOBILE RESPONSIVENESS ────────────────────────────── */
@media (max-width: 768px) {
  #modal-run-summary > div {
    padding: 14px 10px !important;
    width: 98% !important;
    max-height: 94vh !important;
    border-radius: 12px !important;
  }

  #modal-run-summary h3 {
    font-size: 9.5px !important;
  }

  #summary-team-totals-header > div {
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  #summary-team-totals-header div:first-child {
    font-size: 8.5px !important;
  }

  #summary-team-totals-header div:last-child {
    gap: 4px !important;
    font-size: 8px !important;
  }

  #summary-team-totals-header span {
    padding: 3px 6px !important;
    font-size: 7.5px !important;
  }

  #tab-summary-batters,
  #tab-summary-pitchers {
    padding: 6px 10px !important;
    font-size: 8.5px !important;
  }

  .run-summary-table-scroll {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    max-height: 52vh !important;
  }

  #summary-content-batters table,
  #summary-content-pitchers table {
    font-size: 9.5px !important;
  }

  #summary-thead-batters-row th,
  #summary-thead-pitchers-row th,
  #summary-tbody-batters td,
  #summary-tbody-pitchers td {
    padding: 5px 6px !important;
    white-space: nowrap;
  }

  #summary-thead-batters-row th:first-child,
  #summary-thead-pitchers-row th:first-child,
  #summary-tbody-batters td:first-child,
  #summary-tbody-pitchers td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    background: #090d16 !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ── GENERAL MODALS MOBILE RESPONSIVENESS ───────────────────────────────── */
@media (max-width: 600px) {
  #modal-season-select > div,
  #modal-run-intro > div,
  #modal-career-difficulty > div,
  #modal-swap-draft .modal-content {
    padding: 16px 12px !important;
    max-height: 94vh !important;
    overflow-y: auto !important;
  }

  #modal-season-select div:first-child,
  #modal-run-intro div:first-child {
    font-size: 11px !important;
  }

  #modal-season-select p,
  #modal-run-intro p {
    font-size: 11px !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
  }
}

/* ── 162-0 CHALLENGE HUB & THEMED RUNS (HIGH-END ARCADE) ─────────────────── */
.c162-hub-wrap {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.c162-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 14px;
}

.c162-records-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.12) 0%, rgba(8, 12, 20, 0.85) 100%);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.c162-record-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c162-record-label {
  font-size: 8.5px;
  font-family: 'Press Start 2P', monospace;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.c162-record-val {
  font-size: 16px;
  font-family: 'Press Start 2P', monospace;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.c162-active-run-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.1) 100%);
  border: 2px solid #10b981;
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.3);
  animation: pulseGlowGreen 3s infinite alternate;
}

@keyframes pulseGlowGreen {
  0% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.25); }
  100% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.6); }
}

.c162-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}

.c162-mode-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(8, 12, 22, 0.98) 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: all 0.22s ease-in-out;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.c162-mode-card:hover {
  transform: translateY(-4px);
  border-color: var(--challenge162-accent);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.25);
}

.c162-mode-card.is-active-select {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.4) !important;
}

.c162-mode-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 8.5px;
  font-family: 'Press Start 2P', monospace;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.c162-mode-title {
  font-size: 13px;
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}

.c162-mode-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 16px;
}

.c162-sub-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 4px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.c162-sub-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.c162-sub-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffd700;
  transform: scale(1.03);
}

.c162-sub-item.selected {
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6) !important;
}

/* Position Filter Pills for Roster Builder */
.c162-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.c162-pill-btn {
  padding: 5px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #94a3b8;
  font-size: 9.5px;
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  transition: all 0.15s ease;
}

.c162-pill-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #ffd700;
}

.c162-pill-btn.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #000 !important;
  border-color: #ffd700 !important;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}