/* === MARTINA · ESTILOS DE JUEGOS === */
/* Premium, modern, fun, and responsive chess interface */

:root {
  --modal-bg: rgba(1, 42, 74, 0.98);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  --glass-text: #ffffff;
  
  --board-light-wood: #f0d9b5;
  --board-dark-wood: #b58863;
  --board-highlight: rgba(42, 157, 143, 0.6);
  --board-selected: rgba(244, 162, 97, 0.85);
  --board-trail: rgba(231, 111, 81, 0.4);
  --board-obstacle: #2b2d42;

  /* Unified game design tokens */
  --game-bg: #0f172a;
  --game-surface: #1e293b;
  --game-border: #334155;
  --game-text: #e2e8f0;
  --game-text-muted: #64748b;
  --game-accent: #f4a261;
  --game-danger: #ef4444;
  --game-success: #22c55e;
  --game-warning: #f59e0b;
  --game-purple: #7c3aed;
  --game-font: 'Nunito', sans-serif;
  --game-radius: 12px;
  --game-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* === GAME LOADING SCREEN === */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.game-loading {
  animation: none;
}
.loading-bar-track {
  width: 200px;
  max-width: 80%;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  margin: 0 auto;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* === HUB LAYOUT & BANNER === */
.games-banner-container {
  background: linear-gradient(135deg, var(--magic-dark), var(--magic-blue)) !important;
}

.game-card {
  cursor: pointer;
}

/* === Featured game card (Super Martina) === */
.game-card-featured {
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 25px rgba(244,162,97,0.25), 0 0 60px rgba(244,162,97,0.1) !important;
  position: relative;
  overflow: hidden;
  animation: featuredGlow 3s infinite ease-in-out;
}
.game-card-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(244,162,97,0.06), transparent 50%, rgba(244,162,97,0.04));
  pointer-events: none;
  z-index: 1;
}
@keyframes featuredGlow {
  0%, 100% { box-shadow: 0 0 25px rgba(244,162,97,0.25), 0 0 60px rgba(244,162,97,0.1); }
  50% { box-shadow: 0 0 35px rgba(244,162,97,0.4), 0 0 80px rgba(244,162,97,0.18); }
}
.featured-ribbon {
  position: absolute;
  top: 10px;
  right: -2px;
  background: linear-gradient(135deg, var(--gold), #eab308);
  color: var(--magic-dark);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 1.2rem 0.25rem 0.8rem;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 5;
  letter-spacing: 0.5px;
}

.btn-orange {
  background: var(--rose) !important;
  box-shadow: 0 4px 10px rgba(231, 111, 81, 0.3);
}

.btn-green {
  background: var(--sage) !important;
  box-shadow: 0 4px 10px rgba(42, 157, 143, 0.3);
}

.locked-image {
  filter: grayscale(1) opacity(0.2);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locked-icon {
  position: absolute;
  font-size: 3rem;
  color: var(--warm-white);
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* === FULL-SCREEN MODAL === */
.game-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.game-modal.open {
  display: flex;
  opacity: 1;
}

.game-modal-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  max-width: 1000px;
  width: 100%;
  margin: auto;
  box-shadow: var(--glass-shadow);
  display: flex;
  flex-direction: column;
  color: var(--glass-text);
  overflow: hidden;
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.game-modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
}

.game-modal-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-close-modal {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--glass-text);
  padding: 0.45rem 1.25rem;
  border-radius: 20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-close-modal:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--gold);
}

.btn-mute {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--glass-text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-mute:hover { background: rgba(255,255,255,0.15); }
.btn-mute.muted { color: var(--rose); }

.btn-close-modal:hover {
  background: var(--rose);
  color: var(--warm-white);
  transform: translateY(-1px);
}

.game-modal-body {
  padding: 1.5rem;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  overflow: auto;
  max-height: 100%;
}

/* === GENERAL CHESSBOARD STYLE (HTML5/DOM Grid) === */
.chess-board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(88vw, 440px);
  height: min(88vw, 440px);
  border: 10px solid #1a1c2e; /* Sleek dark tournament metallic border */
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.65), 
              0 0 0 1px rgba(255, 255, 255, 0.08), 
              inset 0 0 15px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background-color: #0c0d16;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.chess-square {
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
              transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.square-light {
  background-color: var(--board-light-wood);
}

.square-dark {
  background-color: var(--board-dark-wood);
}

.chess-piece {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 1;
  /* Ajuste de precisión quirúrgica al -5% para el centrado absoluto y simétrico de los glifos Unicode */
  transform: translateY(-5%);
  z-index: 5;
  pointer-events: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chess-square:hover:not(.square-obstacle) {
  filter: brightness(1.1);
}

.chess-square:active {
  transform: scale(0.95);
}

/* BOARD HIGHLIGHTS */
.square-highlight {
  background-color: var(--board-highlight) !important;
}

.square-selected {
  background-color: var(--board-selected) !important;
}

@keyframes pulseDot {
  0% { transform: scale(1); opacity: 0.75; box-shadow: 0 0 4px var(--board-trail); }
  100% { transform: scale(1.2); opacity: 0.95; box-shadow: 0 0 12px var(--board-trail); }
}

.square-path::after {
  content: '';
  width: 24%;
  height: 24%;
  background-color: var(--board-trail);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  animation: pulseDot 0.8s infinite alternate ease-in-out;
  pointer-events: none;
}

.chess-square.square-path:hover {
  box-shadow: inset 0 0 10px rgba(231, 111, 81, 0.45) !important;
  background-color: rgba(231, 111, 81, 0.04) !important;
  filter: brightness(1.05) !important;
}

.chess-square:hover:not(.square-obstacle) {
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.18) !important;
  filter: brightness(1.05);
}

.square-obstacle {
  background-color: var(--board-obstacle) !important;
  background-image: radial-gradient(circle, #3d405b 20%, transparent 20%),
                    radial-gradient(circle, #3d405b 20%, transparent 20%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  cursor: not-allowed;
}

.square-ice {
  background-color: #a8dadc !important;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.8);
}

.square-ice::after {
  content: '❄️';
  font-size: 1.2rem;
  position: absolute;
  opacity: 0.6;
  z-index: 1;
}

/* === GAME: LAS EMPANADAS DE TORRETA === */
.empanadas-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 800px;
  align-items: center;
}

.empanadas-top-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}

.timer-box, .score-box {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--glass-border);
  padding: 0.6rem 1.2rem;
  border-radius: 15px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.timer-danger {
  color: #ff6b6b;
  border-color: #ff6b6b;
  animation: clockShake 0.5s infinite;
}

@keyframes clockShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.empanadas-layout {
  display: flex;
  gap: 2rem;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .empanadas-layout {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
}

.cooking-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.empanadas-dashboard {
  flex: 1;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.customer-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  padding: 1rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  animation: customerSlideIn 0.5s ease-out;
}

@keyframes customerSlideIn {
  from { transform: translateX(50px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.customer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  background: var(--magic-blue);
  flex-shrink: 0;
}

.customer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.customer-order {
  flex: 1;
}

.customer-order h4 {
  font-family: 'Nunito', sans-serif;
  color: var(--gold-light);
  font-size: 1rem;
}

.order-recipe {
  background: rgba(244, 162, 97, 0.2);
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  font-weight: 700;
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--gold-light);
}

.recipe-instruction-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid var(--glass-border);
}

.recipe-instruction-card h4 {
  color: var(--rose-light);
  margin-bottom: 0.5rem;
}

.moves-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.move-step {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}

.move-done {
  background: rgba(42, 157, 143, 0.25);
  color: #a8dadc;
  text-decoration: line-through;
  opacity: 0.8;
}

.move-active {
  background: rgba(244, 162, 97, 0.2);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-weight: 800;
}

/* === GAME: EL LABERINTO DEL CABALLO DE Ŋ === */
.maze-dashboard {
  flex: 1;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.square-carrot::after {
  content: '🥕';
  font-size: 1.5rem;
  position: absolute;
  z-index: 4;
  animation: bounceCarrot 1s infinite alternate;
}

@keyframes bounceCarrot {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

.square-trophy::after {
  content: '🏆';
  font-size: 1.5rem;
  position: absolute;
  z-index: 4;
  animation: rotateTrophy 1.5s infinite ease-in-out alternate;
}

@keyframes rotateTrophy {
  from { transform: rotate(-10deg) scale(1); }
  to { transform: rotate(10deg) scale(1.1); }
}

.moves-left-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-border);
  padding: 1rem;
  border-radius: 15px;
  text-align: center;
}

.moves-count {
  font-size: 2.2rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--gold-light);
  margin-top: 0.2rem;
}

.moves-danger {
  color: #ff6b6b;
  animation: pulseMoves 0.8s infinite alternate;
}

@keyframes pulseMoves {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* === GAME SCREENS: WELCOME, WIN, GAME OVER === */
.game-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--glass-shadow);
  animation: screenFadeIn 0.4s ease-out;
  box-sizing: border-box;
}

@keyframes screenFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.game-screen-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid var(--warm-white);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: var(--magic-blue);
}

.game-screen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-screen h2 {
  color: var(--gold-light);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.game-screen p {
  color: var(--glass-text);
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.btn-game-screen {
  padding: 0.8rem 2.2rem;
  font-size: 1.1rem;
}

.game-screen-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
  justify-content: center;
}

.stat-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  min-width: 100px;
}

.stat-item span {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--board-dark);
}

.stat-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold-light);
}

/* Shake animation for errors */
.shake {
  animation: shakeError 0.4s ease-in-out;
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Professional Chessboard Edge Coordinates (Lichess/Chess.com Style) */
.chess-square::before {
  content: '';
}

/* File letters on bottom row (rank 1) */
.chess-square[data-rank="1"]::before {
  content: attr(data-file);
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  pointer-events: none;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  z-index: 10;
}

/* Rank numbers on left column (file a) */
.chess-square[data-file="a"]::after {
  content: attr(data-rank);
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.68rem;
  font-weight: 800;
  pointer-events: none;
  font-family: 'Nunito', sans-serif;
  z-index: 10;
}

/* Dynamic coordinate contrast based on square color */
.square-light[data-rank="1"]::before,
.square-light[data-file="a"]::after {
  color: #b58863 !important; /* Dark brown on light wood squares */
  opacity: 0.85;
}

.square-dark[data-rank="1"]::before,
.square-dark[data-file="a"]::after {
  color: #f0d9b5 !important; /* Light wood color on dark wood squares */
  opacity: 0.85;
}

/* === GAMIFICATION ACHIEVEMENTS DASHBOARD === */
.dashboard-section {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 2.5rem auto;
  padding: 0 1rem;
}

.dashboard-card {
  background: linear-gradient(135deg, #102a43, #0b1d33);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 12px 36px rgba(1, 42, 74, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dash-stat-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.dash-stat-item:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.dash-stat-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.dash-stat-details {
  display: flex;
  flex-direction: column;
}

.dash-stat-label {
  font-size: 0.85rem;
  color: var(--warm-white);
  opacity: 0.7;
  font-weight: 600;
}

.dash-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold-light);
  font-family: 'Nunito', sans-serif;
}

/* RANK & PROGRESS BAR */
.dashboard-rank-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 1.2rem 1.5rem;
  border-radius: 18px;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.rank-badge-wrapper {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 220px;
}

.rank-emoji {
  font-size: 2rem;
}

.rank-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rose-light);
  font-family: 'Nunito', sans-serif;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.progress-bar-container {
  flex: 1;
  height: 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.05);
  min-width: 200px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  border-radius: 10px;
  box-shadow: 0 0 10px var(--gold);
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-text {
  font-weight: 800;
  color: var(--gold-light);
  font-size: 1.05rem;
  min-width: 45px;
  text-align: right;
}

/* BADGES SHOWCASE */
.badges-showcase {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.5rem;
}

.showcase-title {
  font-size: 1.1rem;
  color: var(--rose-light);
  margin-bottom: 1.2rem;
  font-family: 'Nunito', sans-serif;
}

.badges-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.badge-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.badge-item.unlocked {
  background: rgba(244, 162, 97, 0.07);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(244, 162, 97, 0.15);
}

.badge-item.unlocked:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 20px rgba(244, 162, 97, 0.25);
  background: rgba(244, 162, 97, 0.12);
}

.badge-item.locked {
  opacity: 0.4;
  filter: grayscale(1);
}

.badge-icon-circle {
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border: 2px solid rgba(255,255,255,0.1);
}

.badge-item.unlocked .badge-icon-circle {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.2), rgba(231, 111, 81, 0.2));
}

.badge-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--warm-white);
  line-height: 1.2;
}

.badge-desc {
  font-size: 0.65rem;
  opacity: 0.65;
  color: var(--warm-white);
}

/* === LEVEL SELECTION SCREEN UI === */
.level-select-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
  padding: 1rem;
  animation: screenFadeIn 0.4s ease-out;
}

.level-select-header {
  text-align: center;
}

.level-select-header h2 {
  color: var(--gold-light);
  font-size: 2rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.level-select-header p {
  font-size: 1.05rem;
  opacity: 0.85;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.level-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.level-card:not(.locked):hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.level-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.03);
}

.level-card.locked::after {
  content: '🔒';
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1.3rem;
  opacity: 0.8;
}

.level-card-stars {
  display: flex;
  gap: 0.2rem;
  font-size: 1.1rem;
}

.star-filled {
  color: var(--gold);
  text-shadow: 0 0 5px rgba(244, 162, 97, 0.5);
}

.star-empty {
  color: rgba(255, 255, 255, 0.15);
}

.level-number {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--rose-light);
  letter-spacing: 1px;
}

.level-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--warm-white);
  line-height: 1.3;
}

.level-card-desc {
  font-size: 0.85rem;
  opacity: 0.75;
  line-height: 1.4;
  flex: 1;
}

.level-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
}

.level-card-meta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sage-light);
  opacity: 0.9;
}

.level-card-play-btn {
  background: var(--gold);
  color: var(--magic-dark);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  border: none;
  transition: transform 0.2s ease;
}

.level-card:hover .level-card-play-btn {
  transform: scale(1.05);
}

/* SPECIAL BOARD OBSTACLE ELEMENTS */
.square-lava {
  background-color: #e63946 !important;
  background-image: radial-gradient(#d90429 20%, transparent 20%),
                    radial-gradient(#d90429 20%, transparent 20%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
  position: relative;
}

.square-lava::after {
  content: '🔥';
  font-size: 1.2rem;
  position: absolute;
  opacity: 0.65;
  z-index: 1;
  pointer-events: none;
}

/* === DIFICULTAD SELECTOR UI === */
.difficulty-selector {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px;
  border-radius: 30px;
  margin: 0.5rem auto 1rem auto;
  gap: 4px;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.diff-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 20px;
  color: var(--warm-white);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.diff-tab:hover {
  opacity: 0.85;
  background: rgba(255, 255, 255, 0.05);
}

.diff-tab.active {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.diff-tab.active.easy {
  background: rgba(46, 196, 182, 0.2);
  border: 1.5px solid #2ec4b6;
  color: #2ec4b6;
}

.diff-tab.active.medium {
  background: rgba(244, 162, 97, 0.2);
  border: 1.5px solid #f4a261;
  color: #f4a261;
}

.diff-tab.active.hard {
  background: rgba(230, 57, 70, 0.2);
  border: 1.5px solid #e63946;
  color: #ff6b6b;
}

.diff-tab.active.martina {
  background: linear-gradient(135deg, rgba(114, 9, 199, 0.25), rgba(181, 23, 158, 0.25));
  border: 1.5px dashed #f72585;
  color: #ff758f;
  animation: pulseMartinaBorder 1.5s infinite alternate;
}

@keyframes pulseMartinaBorder {
  from { border-color: #f72585; box-shadow: 0 0 5px rgba(247, 37, 133, 0.3); }
  to { border-color: #7209b7; box-shadow: 0 0 12px rgba(114, 9, 199, 0.5); }
}

/* === ESTRELLAS TEMÁTICAS SEGÚN DIFICULTAD === */
.star-easy {
  color: #2ec4b6 !important;
  text-shadow: 0 0 6px rgba(46, 196, 182, 0.5);
}

.star-medium {
  color: var(--gold) !important;
  text-shadow: 0 0 6px rgba(244, 162, 97, 0.5);
}

.star-hard {
  color: #ff4d6d !important;
  text-shadow: 0 0 6px rgba(255, 77, 109, 0.5);
}

.star-martina {
  color: #ff758f !important;
  text-shadow: 0 0 8px #f72585, 0 0 15px rgba(181, 23, 158, 0.7) !important;
  animation: sparkleMartinaStar 1.2s infinite alternate;
}

@keyframes sparkleMartinaStar {
  from { transform: scale(1); filter: brightness(1); }
  to { transform: scale(1.08); filter: brightness(1.2); }
}

/* === ASISTENTE VISUAL EN FÁCIL === */
@keyframes pulseEasyFrom {
  0% { box-shadow: inset 0 0 8px rgba(46, 196, 182, 0.7), 0 0 4px rgba(46, 196, 182, 0.5); border-color: #2ec4b6; }
  100% { box-shadow: inset 0 0 20px rgba(46, 196, 182, 1), 0 0 12px rgba(46, 196, 182, 0.8); border-color: #2ec4b6; }
}

@keyframes pulseEasyTo {
  0% { box-shadow: inset 0 0 8px rgba(69, 123, 157, 0.7), 0 0 4px rgba(69, 123, 157, 0.5); border-color: #457b9d; }
  100% { box-shadow: inset 0 0 20px rgba(69, 123, 157, 1), 0 0 12px rgba(69, 123, 157, 0.8); border-color: #457b9d; }
}

.square-easy-from {
  animation: pulseEasyFrom 1.2s infinite alternate !important;
  border: 2px solid #2ec4b6 !important;
  z-index: 6;
}

.square-easy-to {
  animation: pulseEasyTo 1.2s infinite alternate !important;
  border: 2px solid #457b9d !important;
  z-index: 6;
}

/* === MODO CIEGO (BLINDFOLD) EN MODO MARTINA === */
.board-blindfold .chess-square::before {
  opacity: 0.15 !important; /* Very faint labels for chess visualization */
}

/* === GAME: ¡CUIDADO CON EL ESTORNUDO! === */
.square-peoncito {
  font-size: 2.2rem;
  color: #f4f3ee;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: floatPawn 1s infinite alternate;
}

.square-peoncito::after {
  content: '🥸';
  font-size: 1rem;
  position: absolute;
  bottom: 2px;
  z-index: 6;
}

@keyframes floatPawn {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

.square-reina {
  font-size: 2.2rem;
  color: #e63946;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.square-reina::after {
  content: '😷';
  font-size: 0.9rem;
  position: absolute;
  bottom: 4px;
  z-index: 6;
}

.square-mustache::after {
  content: '🥸';
  font-size: 1.5rem;
  position: absolute;
  z-index: 4;
  animation: rotateMustache 1.2s infinite ease-in-out alternate;
}

@keyframes rotateMustache {
  from { transform: rotate(-12deg) scale(1); }
  to { transform: rotate(12deg) scale(1.1); }
}

.square-tissue-box::after {
  content: '🧻';
  font-size: 1.5rem;
  position: absolute;
  z-index: 4;
  animation: pulseTissue 1s infinite alternate;
}

@keyframes pulseTissue {
  from { transform: scale(1); box-shadow: 0 0 5px rgba(255, 215, 0, 0.4); }
  to { transform: scale(1.15); box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
}

.square-sneeze-premonition {
  background-color: rgba(244, 162, 97, 0.08) !important;
  box-shadow: inset 0 0 8px rgba(244, 162, 97, 0.25) !important;
  border: 1px dashed rgba(244, 162, 97, 0.5) !important;
  position: relative;
  animation: pulsePremonition 1.5s infinite ease-in-out alternate;
}

@keyframes pulsePremonition {
  from { opacity: 0.7; box-shadow: inset 0 0 4px rgba(244, 162, 97, 0.15); }
  to { opacity: 1; box-shadow: inset 0 0 12px rgba(244, 162, 97, 0.35); }
}

.square-sneeze-premonition::before {
  content: '💨';
  font-size: 0.85rem;
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0.75;
  z-index: 2;
  filter: drop-shadow(0 0 2px rgba(244, 162, 97, 0.6));
}

.square-sneeze-warning {
  background-color: rgba(230, 57, 70, 0.2) !important;
  box-shadow: inset 0 0 12px rgba(230, 57, 70, 0.5), 0 0 4px rgba(230, 57, 70, 0.3) !important;
  border: 1px solid rgba(230, 57, 70, 0.7) !important;
  position: relative;
  animation: pulseWarning 0.5s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.square-sneeze-warning::before {
  content: '⚠️';
  font-size: 0.95rem;
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0.9;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(230, 57, 70, 0.8));
}

@keyframes pulseWarning {
  from {
    background-color: rgba(230, 57, 70, 0.15);
    box-shadow: inset 0 0 6px rgba(230, 57, 70, 0.3);
  }
  to {
    background-color: rgba(230, 57, 70, 0.45);
    box-shadow: inset 0 0 16px rgba(230, 57, 70, 0.7), 0 0 6px rgba(230, 57, 70, 0.4);
  }
}

.square-sneeze-blast {
  background: radial-gradient(circle, rgba(82, 183, 136, 0.85) 0%, rgba(82, 183, 136, 0.2) 75%, transparent 100%) !important;
  box-shadow: 0 0 15px rgba(82, 183, 136, 0.6) !important;
  position: relative;
  animation: blastGreenSnot 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes blastGreenSnot {
  0% { transform: scale(0.95); background-color: rgba(82, 183, 136, 0.3); }
  50% { transform: scale(1.05); background-color: rgba(82, 183, 136, 0.85); }
  100% { transform: scale(1); background-color: transparent; }
}

/* Sneeze Shockwave effect */
.square-sneeze-shockwave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #52b788;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9;
  animation: shockwaveExpand 0.5s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes shockwaveExpand {
  0% {
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0 0 10px rgba(82, 183, 136, 0.8), 0 0 10px rgba(82, 183, 136, 0.8);
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
    box-shadow: inset 0 0 30px rgba(82, 183, 136, 0), 0 0 30px rgba(82, 183, 136, 0);
  }
}

/* Sneeze Particle effect */
.sneeze-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #52b788 30%, #74c69d 80%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: particleBlow 0.6s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
  filter: drop-shadow(0 0 4px #52b788);
}

@keyframes particleBlow {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

/* Board shake feedback */
@keyframes boardShake {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-4px, -2px) rotate(-0.5deg); }
  20%, 40%, 60%, 80% { transform: translate(4px, 2px) rotate(0.5deg); }
}

.board-shake {
  animation: boardShake 0.4s ease-in-out;
}

/* Red screen flash when hit */
@keyframes screenRedFlash {
  0% { background-color: rgba(230, 57, 70, 0.45); }
  100% { background-color: transparent; }
}

.screen-flash-red {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  animation: screenRedFlash 0.4s ease-out forwards;
}

/* === JUEGO: MARTINA CONTRA SU SOMBRA === */
.square-martina {
  font-size: 2.2rem;
  color: #c77dff; /* bright magenta/purple */
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: floatPawn 1.5s infinite alternate;
}

.square-martina::after {
  content: '👓';
  font-size: 0.9rem;
  position: absolute;
  bottom: 2px;
  z-index: 6;
}

.square-sombra {
  font-size: 2.2rem;
  color: #3c096c; /* deep purple shadow */
  opacity: 0.85;
  filter: drop-shadow(0 0 10px #7b2cbf);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: floatShadow 1.5s infinite alternate;
}

.square-sombra::after {
  content: '👥';
  font-size: 0.8rem;
  position: absolute;
  bottom: 2px;
  opacity: 0.7;
  z-index: 6;
}

@keyframes floatShadow {
  from { transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px #7b2cbf); }
  to { transform: translateY(-3px) scale(0.95); filter: drop-shadow(0 0 16px #9d4edd); }
}

.square-sombra-beam {
  background-color: rgba(157, 78, 221, 0.25) !important;
  position: relative;
  box-shadow: inset 0 0 12px rgba(157, 78, 221, 0.4);
  animation: beamPulse 1s infinite alternate;
}

@keyframes beamPulse {
  from { background-color: rgba(157, 78, 221, 0.18); }
  to { background-color: rgba(157, 78, 221, 0.35); }
}

.square-sombra-beam::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 100%;
  background: rgba(224, 170, 255, 0.5);
  filter: blur(1px);
  z-index: 2;
  pointer-events: none;
}

.square-martina-pinned {
  animation: pinShake 0.4s infinite alternate;
  box-shadow: inset 0 0 18px rgba(230, 57, 70, 0.8), 0 0 12px rgba(230, 57, 70, 0.6) !important;
}

.square-martina-pinned::after {
  content: '⛓️';
  font-size: 1.4rem;
  position: absolute;
  z-index: 7;
  animation: scaleChains 0.5s ease-in-out;
}

@keyframes pinShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(0px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  55% { transform: translate(-1px, 2px) rotate(-1deg); }
  70% { transform: translate(-2px, 1px) rotate(0deg); }
  85% { transform: translate(1px, -1px) rotate(-1deg); }
  100% { transform: translate(1px, 1px) rotate(0deg); }
}

@keyframes scaleChains {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.square-peoncito-rescued::after {
  content: '♙';
  color: #fff;
  font-size: 2rem;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  position: absolute;
  z-index: 4;
  animation: floatPawn 1.2s infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.square-peoncito-rescued-bigote::after {
  content: '🥸';
  font-size: 0.9rem;
  position: absolute;
  bottom: 2px;
  z-index: 5;
}

.square-mirror-portal::after {
  content: '🪞';
  font-size: 1.6rem;
  position: absolute;
  z-index: 4;
  animation: mirrorPulse 1.5s infinite alternate ease-in-out;
}

@keyframes mirrorPulse {
  from { transform: scale(1); filter: drop-shadow(0 0 4px #e0aaff); }
  to { transform: scale(1.15); filter: drop-shadow(0 0 12px #9d4edd); }
}

.square-sombra-guide::after {
  content: '🟣';
  font-size: 0.75rem;
  opacity: 0.45;
  position: absolute;
  z-index: 3;
  animation: pulseGuide 1s infinite alternate;
}

@keyframes pulseGuide {
  from { opacity: 0.3; transform: scale(0.9); }
  to { opacity: 0.6; transform: scale(1.1); }
}

.square-peoncito-placed {
  font-size: 2rem;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.square-peoncito-placed::after {
  content: '🛡️';
  font-size: 0.95rem;
  position: absolute;
  bottom: 2px;
  z-index: 5;
}

.board-blindfold .chess-square {
  background-color: #0c0d16 !important; /* Deep dark cosmic violet */
  border: 1px solid rgba(157, 78, 221, 0.09) !important; /* Glowing neon grid borders */
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9) !important;
}

.board-blindfold .chess-square::before {
  opacity: 0.15 !important; /* Faint coordination coordinates */
}

/* === GAME: SUPER MARTINA PLATFORMER RETRO === */

.mario-outer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  gap: 1.5rem;
  font-family: 'Nunito', sans-serif;
}

/* Map level select screen */
.mario-map-container {
  width: 100%;
  background: rgba(12, 13, 22, 0.6);
  border: 2px solid var(--glass-border);
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mario-map-header {
  text-align: center;
  margin-bottom: 2rem;
}

.mario-map-header h2 {
  font-family: 'Outfit', sans-serif;
  color: var(--gold-light);
  font-size: 2rem;
  text-shadow: 0 0 15px rgba(244, 162, 97, 0.4);
}

.mario-map-header p {
  color: var(--warm-white);
  opacity: 0.85;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* 16 Levels Grid Map */
.mario-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

.mario-stage-node {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: not-allowed;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.mario-stage-node.unlocked {
  cursor: pointer;
  background: linear-gradient(145deg, rgba(42, 157, 143, 0.15), rgba(42, 157, 143, 0.05));
  border-color: rgba(42, 157, 143, 0.4);
}

.mario-stage-node.unlocked:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(42, 157, 143, 0.3);
  border-color: rgba(42, 157, 143, 0.8);
  background: linear-gradient(145deg, rgba(42, 157, 143, 0.25), rgba(42, 157, 143, 0.1));
}

.mario-node-badge {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  transition: transform 0.2s ease;
  position: relative;
  display: inline-block;
}

.mario-node-trophy {
  position: absolute;
  top: -8px;
  right: -12px;
  font-size: 0.85rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
  animation: trophyBounce 2s infinite ease-in-out;
}

@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.15); }
}

.mario-stage-node.unlocked:hover .mario-node-badge {
  transform: scale(1.15) rotate(5deg);
}

.mario-node-num {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rose);
  font-weight: 800;
  margin-bottom: 0.2rem;
}

.mario-stage-node.unlocked .mario-node-num {
  color: var(--sage);
}

.mario-node-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--warm-white);
  line-height: 1.3;
}

.mario-node-desc {
  font-size: 0.75rem;
  color: var(--warm-white);
  opacity: 0.65;
  margin-top: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mario-node-lock {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.85rem;
  opacity: 0.5;
}

.mario-node-status {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--warm-white);
  opacity: 0.6;
}

.mario-stage-node.unlocked .mario-node-status {
  background: rgba(42, 157, 143, 0.2);
  color: var(--sage);
  opacity: 1;
}

.mario-node-play-btn {
  margin-top: 0.8rem;
  background: var(--gold);
  color: var(--magic-dark);
  border: none;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(244, 162, 97, 0.35);
  transition: all 0.2s ease;
  display: none;
}

.mario-stage-node.unlocked:hover .mario-node-status {
  display: none;
}

.mario-stage-node.unlocked:hover .mario-node-play-btn {
  display: block;
  transform: scale(1.05);
}

/* Platformer Active Game Frame */
.mario-game-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #080710;
  border: 4px solid #1a1c2e;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 
              0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
  align-items: center;
}

/* NES Style Retro Status Bar HUD */
.mario-hud-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: linear-gradient(180deg, #0c0d1a 0%, #111222 40%, #0a0b16 100%);
  border-bottom: 3px solid #1a1c2e;
  padding: 0.8rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  color: var(--warm-white);
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 10;
}
/* Retro scanline overlay on HUD */
.mario-hud-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.mario-hud-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.mario-hud-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.mario-hud-label {
  font-size: 0.8rem;
  color: var(--rose);
  text-transform: uppercase;
  margin-right: 0.2rem;
}

.mario-hud-val {
  color: var(--gold-light);
  font-weight: 800;
  text-shadow: 0 0 8px rgba(250, 204, 21, 0.3), 0 0 3px rgba(250, 204, 21, 0.15);
  font-variant-numeric: tabular-nums;
}

.mario-hud-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--warm-white);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.mario-hud-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mario-hud-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.05);
}

/* Active Canvas */
.mario-canvas-container {
  width: 100%;
  min-height: 450px;
  position: relative;
  background: #70a0ff; /* Sky blue standard fallback */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.mario-canvas {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16 / 9;
  background: transparent;
}

/* Mobile Virtual Gamepad Controls */
.mario-touch-pad {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* Only show touch gamepad if touch interaction is available or simulated */
@media (max-width: 1024px) {
  .mario-touch-pad {
    display: block;
  }
}

.touch-btn {
  position: absolute;
  width: 65px;
  height: 65px;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 
              inset 0 0 10px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.1s, transform 0.1s;
}

.touch-btn:active {
  background: rgba(244, 162, 97, 0.4);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: scale(0.9);
}

.touch-btn.left {
  bottom: 25px;
  left: 25px;
}

.touch-btn.right {
  bottom: 25px;
  left: 105px;
}

.touch-btn.jump {
  bottom: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  font-size: 1.8rem;
  background: rgba(231, 111, 81, 0.2);
  border-color: rgba(231, 111, 81, 0.5);
}

.touch-btn.jump:active {
  background: rgba(231, 111, 81, 0.55);
}

/* === Phaser canvas containers: maintain 16:9 === */
#phaser-boxing-parent,
#phaser-game-parent {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
#phaser-boxing-parent canvas,
#phaser-game-parent canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* === Super Martina — Progress bars, trophies & stats === */

.mario-overall-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.8rem 1.2rem;
  margin-top: 1rem;
}
.mario-overall-trophy {
  font-size: 2.2rem;
  flex-shrink: 0;
}
.mario-overall-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mario-overall-label {
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mario-overall-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.mario-overall-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #eab308, #fbbf24, #f59e0b);
  border-radius: 4px;
  transition: width 0.5s ease-out;
}
.mario-overall-pct {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fbbf24;
}

.mario-level-progress {
  width: 100%;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mario-level-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mario-level-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #38bdf8);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.mario-level-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
}
.mario-level-score {
  color: #fbbf24;
}
.mario-level-pct {
  color: #38bdf8;
}
.mario-level-cta {
  font-size: 0.7rem;
  color: #94a3b8;
  font-style: italic;
}

.mario-victory-progress {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mario-progress-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 5px;
  overflow: hidden;
}
.mario-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #eab308);
  border-radius: 5px;
  transition: width 0.6s ease-out;
}
.mario-progress-pct {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fbbf24;
}
.mario-new-record {
  color: #fbbf24;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 15px;
  animation: trophyBounce 1.5s infinite ease-in-out;
}



/* ===================================================================
   MOBILE — minimal, fullscreen, sin chrome, solo el juego
   =================================================================== */
@media (max-width: 1024px), (max-height: 500px) {
  /* --- Fullscreen modal with safe area for bottom nav bar --- */
  .game-modal {
    padding: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
  }
  .game-modal-content {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    border: none;
  }
  .game-modal-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
    background: transparent;
    border: none;
    padding: 4px 8px;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    width: auto;
  }
  .game-modal-title {
    display: none !important;
  }
  .game-modal-body {
    padding: 0 !important;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #game-sandbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background: #000;
    padding: 0;
    box-sizing: border-box;
  }

  /* --- Floating close button (header posiciona) --- */
  .btn-close-modal {
    pointer-events: auto;
    font-size: 0.65rem !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* --- Chessbox: top bar oculta, solo canvas --- */
  .empanadas-container {
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100%;
    max-width: 100% !important;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #000 !important;
    gap: 0 !important;
  }
  .empanadas-top-bar {
    display: none !important;  /* sin barra de timers/score en mobile */
  }
  .empanadas-layout {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 0 !important;
    width: 100%;
    min-height: 0;
  }

  /* ChessBox: grid layout + height-based canvas (commit 5af2116 exacto + min-height fix) */
  #phaser-boxing-parent {
    height: 100%;
    width: auto !important;
    aspect-ratio: 16/9;
    margin: 0 auto;
    position: relative !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden;
    min-height: 0 !important;
  }
  #phaser-boxing-parent canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* Mario: width-based (calculated from dynamic viewport height minus the 44px HUD height) */
  .mario-canvas-container:not(#phaser-boxing-parent) {
    width: min(100%, calc((100dvh - 44px) * 16 / 9)) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16/9;
    max-height: calc(100dvh - 44px) !important;
    border-radius: 0 !important;
    border: none !important;
  }
  #phaser-game-parent canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* --- HUD overlays más chicos --- */
  #phaser-boxing-parent > div[style*="position: absolute"] {
    transform: scale(0.72);
    transform-origin: top left;
  }
  #phaser-boxing-parent > div[style*="position: absolute"][style*="right"] {
    transform: scale(0.72);
    transform-origin: top right;
  }

  /* --- Touch controls: two-thumb layout --- */
  .mario-touch-pad {
    display: flex !important;
    position: fixed !important;
    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100vw !important;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 16px;
    opacity: 0.85 !important;
    z-index: 10002;
    pointer-events: none;
    background: transparent;
    box-shadow: none;
  }
  .touch-group {
    display: flex;
    gap: 6px;
    pointer-events: auto;
    align-items: flex-end;
  }
  .touch-group-left {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
    max-width: 130px;
  }
  .touch-group-left .touch-btn.left,
  .touch-group-left .touch-btn.right,
  .touch-group-left .touch-btn.dash {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
  .touch-btn.dash {
    width: 48px !important;
    height: 48px !important;
    margin-left: 8px;
  }
  .touch-group-right { justify-content: flex-end; }

  /* ChessBox left group: D-pad layout (block top-center, dodge bottom) */
  .touch-dpad {
    display: grid;
    grid-template-columns: 56px 56px 56px;
    grid-template-rows: 56px 56px;
    gap: 4px;
  }
  .touch-dpad .touch-block { grid-column: 2; grid-row: 1; }
  .touch-dpad .touch-dodge-l { grid-column: 1; grid-row: 2; }
  .touch-dpad .touch-dodge-r { grid-column: 3; grid-row: 2; }
  .touch-dpad-spacer { display: none; }

  .touch-btn {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.3rem !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
  }
  .touch-btn:active { transform: scale(0.9); }
  .touch-label {
    font-size: 0.5rem;
    font-weight: 600;
    opacity: 0.7;
    line-height: 1;
    margin-top: 1px;
  }
  .touch-btn.jump {
    width: 70px !important;
    height: 70px !important;
    font-size: 1.8rem !important;
  }

  /* --- Keyboard hints ocultos --- */
  .kb-hint { display: none !important; }

  /* --- Level select: compacto, solo columnas --- */
  .level-select-container {
    padding: 0.3rem !important;
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .level-select-header h2 { font-size: 1rem !important; margin: 0.2rem 0 !important; }
  .level-select-header p { font-size: 0.65rem !important; margin: 0 !important; }
  .difficulty-selector { flex-wrap: wrap; gap: 3px !important; justify-content: center; }
  .diff-tab { font-size: 0.6rem !important; padding: 0.25rem 0.4rem !important; }
  .level-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .level-card { padding: 6px 8px !important; }
  .level-card-title { font-size: 0.78rem !important; }
  .level-card-desc { display: none !important; }
  .level-card-footer { font-size: 0.6rem !important; }
  .level-card-meta { font-size: 0.6rem !important; }
  .level-card-play-btn { font-size: 0.7rem !important; padding: 0.25rem 0.5rem !important; }

  /* --- Chessboard: responsive, capped at 440px --- */
  .chess-board {
    width: min(90vw, 90vh, 440px) !important;
    height: min(90vw, 90vh, 440px) !important;
    border-width: 3px !important;
    border-radius: 6px !important;
  }
  .cooking-station {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  .maze-dashboard {
    display: none !important;
  }
  .chess-board-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* --- Transition panel --- */
  .transition-overlay {
    padding: 0.5rem !important;
  }
  .transition-panel {
    padding: 6px 12px !important;
    max-width: 95% !important;
    width: 90% !important;
    max-width: 400px !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
  .transition-panel h2 { font-size: 0.92rem !important; margin: 2px 0 !important; }
  .transition-panel p { font-size: 0.64rem !important; margin-bottom: 4px !important; line-height: 1.25 !important; }
  .transition-panel .round-badge { font-size: 0.55rem !important; padding: 2px 6px !important; }
  
  /* Selectores para anular estilos en línea en el panel de transición móvil */
  .transition-panel > div[style*="dashed"] {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    border-radius: 6px !important;
  }
  .transition-panel > div[style*="dashed"] h4 {
    margin-bottom: 2px !important;
    font-size: 0.72rem !important;
  }
  .transition-panel > div[style*="dashed"] div {
    font-size: 0.65rem !important;
    margin-bottom: 2px !important;
  }
  .transition-panel > div[style*="space-around"] {
    padding: 4px !important;
    margin-bottom: 6px !important;
    border-radius: 6px !important;
  }
  .transition-panel > div[style*="space-around"] div span {
    font-size: 0.75rem !important;
  }
  .transition-panel > div[style*="space-around"] div span[style*="uppercase"] {
    font-size: 0.52rem !important;
  }

  /* --- Victory/Defeat --- */
  .game-screen {
    padding: 6px 12px !important;
    max-width: 95% !important;
    width: 90% !important;
    max-width: 400px !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
    border-radius: 12px !important;
  }
  .game-screen h2 { font-size: 0.92rem !important; margin: 2px 0 !important; }
  .game-screen p { font-size: 0.65rem !important; margin-bottom: 4px !important; }
  .game-screen-img { width: 40px !important; height: 40px !important; margin-bottom: 4px !important; }
  .game-screen-img div { font-size: 1.4rem !important; }
  .game-screen-stats { gap: 4px !important; margin-bottom: 6px !important; }
  .stat-item { padding: 0.2rem 0.4rem !important; font-size: 0.55rem !important; }
  .stat-val { font-size: 0.75rem !important; }
  .btn-game-screen {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.8rem !important;
    margin: 2px !important;
  }
  .game-screen .star-filled,
  .game-screen .star-empty {
    font-size: 1.5rem !important;
  }
  .game-screen div[style*="margin: 1rem 0"] {
    margin: 4px 0 !important;
  }

  /* --- Mario Victory & GameOver Overlays on Mobile --- */
  .mario-victory-panel,
  .mario-gameover-panel {
    padding: 6px 12px !important;
    max-width: 95% !important;
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
    max-height: 95dvh !important;
    overflow-y: auto !important;
  }
  .mario-victory-crown,
  .mario-gameover-skull {
    font-size: 20px !important;
    margin-bottom: 1px !important;
  }
  .mario-victory-panel h2,
  .mario-gameover-panel h2 {
    font-size: 0.95rem !important;
    margin: 2px 0 !important;
  }
  .mario-victory-msg,
  .mario-gameover-msg {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
  }
  .mario-victory-stats,
  .mario-gameover-stats {
    padding: 4px 6px !important;
    margin-bottom: 6px !important;
    gap: 4px !important;
  }
  .mario-stat-icon {
    font-size: 14px !important;
    margin-bottom: 1px !important;
  }
  .mario-stat-num {
    font-size: 12px !important;
  }
  .mario-stat-name {
    font-size: 7px !important;
    letter-spacing: 0.5px !important;
  }
  .mario-victory-buttons,
  .mario-gameover-buttons {
    gap: 6px !important;
  }
  .mario-vic-btn {
    padding: 4px 10px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* --- Mario level select: scrollable, compact cards --- */
  .mario-outer-container {
    max-width: 100% !important;
    padding: 0.3rem !important;
  }
  .mario-map-container {
    padding: 0.5rem !important;
    max-height: 95vh;
    max-height: 95dvh;
    overflow-y: auto;
    border-radius: 8px !important;
  }
  .mario-map-header h2 { font-size: 1rem !important; margin: 0.2rem 0 !important; }
  .mario-map-header p { font-size: 0.65rem !important; }
  /* --- Mario HUD ultra-compact --- */
  .mario-hud-bar {
    padding: 0.2rem 0.4rem !important;
    gap: 0.3rem !important;
  }
  .mario-hud-group { gap: 0.5rem !important; }
  .mario-hud-item { font-size: 0.68rem !important; gap: 0.15rem !important; }
  .mario-hud-label { display: none !important; }
  .mario-hud-val { font-size: 0.7rem !important; }
  .mario-hud-btn {
    font-size: 0.55rem !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 6px !important;
  }

  .mario-overall-stats { padding: 0.3rem !important; margin-bottom: 0.3rem !important; }
  .mario-overall-trophy { font-size: 2rem !important; }
  .mario-map-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 4px !important;
  }
  .mario-stage-node {
    padding: 6px !important;
    border-radius: 8px !important;
  }
  .mario-node-badge { font-size: 1.4rem !important; }
  .mario-node-num { font-size: 0.6rem !important; }
  .mario-node-name { font-size: 0.7rem !important; }
  .mario-node-desc { font-size: 0.55rem !important; }
  .mario-node-play-btn { font-size: 0.65rem !important; padding: 0.2rem 0.5rem !important; }
  .mario-level-progress { padding: 2px !important; }
  .mario-level-stats { font-size: 0.55rem !important; }

  /* --- Landscape overlay --- */
  .landscape-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #0f172a;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    padding: 1rem;
  }
  .landscape-overlay .rotate-icon {
    font-size: 3rem;
    animation: rotateHint 2s ease-in-out infinite;
  }
  @keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
  }
  .landscape-overlay h2 { font-size: 1.2rem; font-weight: 800; }
  .landscape-overlay p { color: #94a3b8; font-size: 0.8rem; }

  /* --- Chessboxing Mobile Chess Round Layout Override --- */
  .chessbox-chess-container {
    height: 100% !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .chessbox-chess-container .empanadas-top-bar {
    display: flex !important;
    padding: 6px 12px !important;
    gap: 8px !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 102 !important;
    flex-shrink: 0 !important;
  }
  .chessbox-chess-container .empanadas-top-bar .timer-box {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
    gap: 4px !important;
    background: rgba(0,0,0,0.4) !important;
    border-color: rgba(255,255,255,0.12) !important;
    height: auto !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .chessbox-chess-container .empanadas-top-bar .btn-close-modal {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .chessbox-chess-container .empanadas-layout {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: calc(100dvh - 38px) !important;
    max-height: calc(100dvh - 38px) !important;
    min-height: 0 !important;
    gap: 16px !important;
    padding: 6px 12px !important;
    box-sizing: border-box !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  .chessbox-chess-container .cooking-station {
    flex: 0 0 auto !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .chessbox-chess-container .chess-board-wrapper {
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  .chessbox-chess-container .chess-board {
    height: min(80vw, 80vh, 260px) !important;
    width: min(80vw, 80vh, 260px) !important;
    border: 3px solid #1a1c2e !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
  }
  .chessbox-chess-container .chess-piece {
    font-size: 1.6rem !important; /* Scale pieces down to avoid cutting off inside smaller mobile squares */
  }
  .chessbox-chess-container .maze-dashboard {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 220px !important;
    width: 220px !important;
    max-width: 220px !important;
    height: min(80vw, 80vh, 260px) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    font-size: 0.72rem !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    justify-content: space-between !important;
  }
  .chessbox-chess-container .maze-dashboard h4 {
    font-size: 0.85rem !important;
    margin: 2px 0 !important;
  }
  .chessbox-chess-container .maze-dashboard p {
    font-size: 0.65rem !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
  .chessbox-chess-container .maze-dashboard .round-badge {
    font-size: 0.58rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
  }
  .chessbox-chess-container .maze-dashboard div[style*="max-height: 120px"] {
    max-height: 75px !important;
    padding: 6px !important;
    border-radius: 6px !important;
    font-size: 0.65rem !important;
    margin-top: 4px !important;
  }
  .chessbox-chess-container .maze-dashboard #chessbox-history {
    font-size: 0.62rem !important;
    gap: 2px !important;
  }
}

/* ===================================================================
   VISUAL AA — Transitions, badges, cards, animations
   =================================================================== */

/* --- Game screen fade+scale transitions --- */
.game-screen {
  animation: screenIn 0.25s ease-out;
}
@keyframes screenIn {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Game card badge types --- */
.game-card-badge {
  display: inline-block;
  font-family: var(--game-font);
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: 10px;
  color: var(--game-bg);
  letter-spacing: 0.03em;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
}
.game-card-badge.puzzle { background: var(--gold); }
.game-card-badge.action { background: var(--rose); }
.game-card-badge.estrategia { background: var(--game-purple); color: #fff; }
.game-card-badge.arcade { background: var(--game-danger); color: #fff; }

/* --- Progress bar smooth transition --- */
.progress-bar-fill {
  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Toast notification --- */
.game-toast {
  position: fixed;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1.5rem;
  border-radius: 20px;
  font-family: var(--game-font);
  font-weight: 700;
  font-size: 0.85rem;
  z-index: 10002;
  pointer-events: none;
  opacity: 1;
  transition: all 0.35s ease;
}
.game-toast.hidden { opacity: 0; top: 20px; }

/* --- Card hover lift (unified for game cards) --- */
.game-card .btn-start-game {
  transition: all 0.3s ease;
}
.game-card:hover .btn-start-game {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* --- dvh fallback for older Safari --- */
@supports not (height: 100dvh) {
  .game-modal-content, .level-select-container, 
  .mario-map-container, .landscape-overlay {
    min-height: 100vh;
    max-height: 100vh;
  }
}

/* ===================================================================
   LAPTOPS & SHORTER VIEWPORTS — Ultra-compact modal layouts (No Scroll)
   =================================================================== */
@media (min-width: 1025px) and (max-height: 850px) {
  .game-modal {
    padding: 0.5rem !important;
  }
  .game-modal-content {
    max-width: 860px !important;
    margin: auto !important;
    max-height: 96vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .game-modal-header {
    padding: 0.4rem 1rem !important;
  }
  .game-modal-title {
    font-size: 1.1rem !important;
  }
  .btn-close-modal {
    padding: 0.35rem 0.9rem !important;
    font-size: 0.75rem !important;
  }
  .game-modal-body {
    padding: 0.5rem !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* --- Compact Mario (mario.js) on Laptops --- */
  .mario-outer-container {
    gap: 0.5rem !important;
  }
  .mario-game-wrapper {
    border-radius: 16px !important;
  }
  .mario-hud-bar {
    padding: 0.4rem 1rem !important;
  }
  .mario-hud-item {
    font-size: 0.95rem !important;
  }
  .mario-canvas-container {
    min-height: 380px !important;
    height: 380px !important;
  }
  .mario-canvas-container canvas {
    max-height: 380px !important;
    object-fit: contain !important;
  }

  /* --- Compact Chess Boxing (chessbox.js) on Laptops --- */
  .empanadas-container {
    gap: 0.6rem !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  .empanadas-top-bar {
    padding: 0.4rem 0.8rem !important;
    margin-bottom: 0 !important;
  }
  .empanadas-layout {
    gap: 1.2rem !important;
    align-items: center !important;
  }
  .empanadas-container .chess-board {
    width: min(70vw, 50vh, 340px) !important;
    height: min(70vw, 50vh, 340px) !important;
    border-width: 6px !important;
  }
  .empanadas-container .chess-piece {
    font-size: 2.1rem !important; /* Scale pieces down proportionally to fit the 340px board perfectly */
  }
  .empanadas-container .maze-dashboard {
    max-width: 260px !important;
    padding: 10px !important;
    font-size: 0.82rem !important;
  }
  .empanadas-container .maze-dashboard h4 {
    font-size: 1rem !important;
    margin-top: 2px !important;
  }
  .empanadas-container .maze-dashboard p {
    font-size: 0.78rem !important;
  }
  .empanadas-container .maze-dashboard div[style*="max-height: 120px"] {
    max-height: 90px !important;
  }
}

/* ===================================================================
   BOTS DE AJEDREZ — Página de bots
   =================================================================== */

/* --- Hero --- */
.bots-hero {
  text-align: center;
  padding: 1.5rem 1rem 0.75rem;
}
.bots-hero h1 {
  font-family: 'Nunito', 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
  margin: 0 0 0.3rem;
}
.bots-hero-subtitle {
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
  font-weight: 500;
}

/* Stats bar */
.bots-stats-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.bots-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  min-width: 60px;
}
.bots-stat-item span {
  font-size: 0.55rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bots-stat-item strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--warm-white);
}

/* Per-bot record on cards */
.bot-card-record {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: monospace;
}

/* --- Bot Cards Grid --- */
.bots-grid-section {
  padding: 0 1rem 2rem;
}
.bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.bot-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.bot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  border-color: var(--bot-color);
}
.bot-card-header {
  padding: 1.25rem 1.25rem 0.75rem;
  text-align: center;
}
.bot-card-emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.35rem;
}
.bot-card-name {
  font-family: 'Nunito', 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--warm-white);
  margin: 0 0 0.4rem;
}
.bot-card-difficulty {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #0a0a0a;
}
.bot-card-body {
  padding: 0 1.25rem;
  flex: 1;
}
.bot-card-elo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.elo-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--board-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.elo-value {
  font-family: 'Nunito', 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 900;
}
.bot-card-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  text-align: center;
}
.bot-card-footer {
  padding: 1rem 1.25rem;
  text-align: center;
}
.bot-card-btn {
  padding: 0.55rem 2rem;
  border: none;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100%;
}
.bot-card-btn:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}

/* ===================================================================
   BOTS VS INTRO SCREEN — Anime/Mega Man Style
   =================================================================== */
.bots-vs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050512;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: white;
  animation: botsVsIn 0.3s ease-out;
}
@keyframes botsVsIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bots-vs-warning {
  position: absolute;
  left: 0;
  width: 100%;
  height: 32px;
  background: repeating-linear-gradient(-45deg, #dc2626, #dc2626 12px, #000 12px, #000 24px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 2px solid #f43f5e;
  border-bottom: 2px solid #f43f5e;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.4);
}
.warning-top { top: 32px; }
.warning-bottom { bottom: 32px; }
.bots-vs-scroller-reverse {
  animation-direction: reverse !important;
  animation-duration: 12s !important;
}
.bots-vs-energy {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(251,191,36,0.06), transparent 60%);
  pointer-events: none;
  animation: botsVsEnergyPulse 1.5s ease-in-out infinite alternate;
}
@keyframes botsVsEnergyPulse {
  from { opacity: 0.3; }
  to { opacity: 0.7; }
}
.bots-vs-scroller {
  white-space: nowrap;
  animation: botsVsScroll 14s linear infinite;
  font-weight: 900;
  font-size: 0.85rem;
  color: #fff;
  text-shadow: 1px 1px 2px #000, 0 0 5px #f43f5e;
  letter-spacing: 2px;
}
@keyframes botsVsScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.bots-vs-speed-lines {
  position: absolute;
  inset: -100px;
  background: repeating-radial-gradient(circle, transparent, transparent 8px, rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.02) 16px);
  animation: botsVsSpeed 0.18s linear infinite;
  opacity: 0.25;
  pointer-events: none;
}
@keyframes botsVsSpeed {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4px, 4px) scale(1.015); }
  100% { transform: translate(4px, -4px) scale(1); }
}

.bots-vs-split {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bots-vs-panel {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bots-vs-left {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.9), rgba(6, 182, 212, 0.95));
  transform: skewX(-12deg) translateX(-100%);
  animation: botsVsSlideLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  border-right: 4px solid #67e8f9;
  box-shadow: 15px 0 35px rgba(6, 182, 212, 0.45);
}
.bots-vs-right {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(88, 28, 135, 0.9));
  transform: skewX(-12deg) translateX(100%);
  animation: botsVsSlideRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.08s;
  border-left: 4px solid var(--opp-color);
  box-shadow: -15px 0 35px rgba(124, 58, 237, 0.4);
}
@keyframes botsVsSlideLeft {
  0% { transform: skewX(-12deg) translateX(-100%); }
  100% { transform: skewX(-12deg) translateX(0); }
}
@keyframes botsVsSlideRight {
  0% { transform: skewX(-12deg) translateX(100%); }
  100% { transform: skewX(-12deg) translateX(0); }
}

.bots-vs-unskew {
  transform: skewX(12deg);
  width: 85%;
  max-width: 360px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bots-vs-card {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: botsVsContentFade 0.5s ease-out 0.65s both;
}
@keyframes botsVsContentFade {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
.bots-vs-badge {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bots-vs-name {
  font-size: 2.2rem;
  font-weight: 900;
  margin: 5px 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
}
.name-player {
  color: #fff;
  text-shadow: 0 0 15px rgba(6, 182, 212, 0.8);
}
.bots-vs-player-icon {
  margin: 10px 0;
}
.bots-vs-emoji-big {
  font-size: 4rem;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.bots-vs-elo {
  font-size: 1rem;
  font-weight: 700;
  color: #94a3b8;
  margin: 6px 0;
}
.bots-vs-quote {
  font-size: 0.8rem;
  color: #e2e8f0;
  font-style: italic;
  margin-top: 8px;
  max-width: 280px;
  line-height: 1.4;
}
.bots-vs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
.bots-vs-vs {
  font-family: 'Outfit', sans-serif;
  font-size: 4.5rem;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 40px rgba(251, 191, 36, 0.7), 0 4px 8px rgba(0, 0, 0, 0.6);
  animation: botsVsPulse 0.8s ease-in-out infinite alternate;
}
@keyframes botsVsPulse {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.bots-vs-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.bots-vs-skip:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.bots-vs-skip kbd {
  background: #475569;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.75rem;
  color: white;
  margin-left: 4px;
}

/* ===================================================================
   BOTS GAME CONTAINER
   =================================================================== */
.bots-game-container {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 100dvh;
  background: linear-gradient(160deg, #161c2c, #1e2338 50%, #1a2030);
  overflow: hidden;
  animation: botsGameIn 0.35s ease-out;
}

/* Loading screen */
.bots-loading-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem;
  text-align: center;
}
.bots-loading-emoji {
  font-size: 3.5rem;
  animation: botsResultBounce 0.8s ease-in-out infinite;
}
.bots-loading-bar-track {
  width: 200px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.bots-loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--bot-accent, #fbbf24);
  border-radius: 3px;
  transition: width 0.3s ease;
}
@keyframes botsGameIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Top bar — status message lives here now */
.bots-game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px;
  background: rgba(26, 31, 46, 0.95);
  border-bottom: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.12));
  flex-shrink: 0;
  gap: 10px;
}
.bots-btn-resign {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}
.bots-btn-resign:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}
.bots-btn-mute {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  min-width: 32px;
  line-height: 1;
  transition: all 0.15s;
}
.bots-btn-mute:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
}
.bots-opponent-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.bots-opponent-emoji { font-size: 1.3rem; }
.bots-opponent-name {
  display: block;
  color: var(--warm-white);
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.2;
}
.bots-opponent-elo {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Status badge in topbar — prominent colored pill */
#bots-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  transition: all 0.25s ease;
}

/* Main game area — grid for centered board */
.bots-game-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  padding: 2px 4px;
  align-items: stretch;
  min-height: 0;
}

/* Left sidebar — captures + commentator */
.bots-sidebar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 195px;
  padding-top: 2px;
  min-height: 0;
  justify-self: start;
}
.bots-sidebar-left .bots-captured-section {
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
}
.bots-captured-compact {
  height: 32px !important;
  flex-shrink: 0;
}
.bots-captured-compact .bots-captured-label { margin-bottom: 0; }
.bots-captured-compact .bots-captured-pieces { font-size: 0.7rem; }

.bots-captured-section {
  background: rgba(55, 65, 90, 0.5);
  border: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.2));
  border-radius: 6px;
  padding: 5px 7px;
  height: 64px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
}
.bots-captured-label {
  font-size: 0.55rem;
  font-weight: 700;
  color: #f1f5f9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  background: rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
  align-self: flex-start;
}
.bots-captured-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  align-items: center;
}
.bots-cap-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.bots-material-badge {
  background: rgba(55, 65, 90, 0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 3px 6px;
  text-align: center;
  flex-shrink: 0;
}
#bots-material-big {
  font-size: 0.9rem;
  font-weight: 800;
  font-family: monospace;
}

/* Commentator panel — eval bar + tactical commentary */
.bots-commentator {
  background: rgba(40, 48, 70, 0.45);
  border: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.18));
  border-radius: 6px;
  padding: 4px 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}
.bots-commentator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.5rem;
  font-weight: 700;
  color: #a5b4cc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
#bots-eval-score {
  font-size: 0.6rem;
  font-weight: 800;
  font-family: monospace;
}
#bots-material {
  font-size: 0.55rem;
  font-weight: 700;
  font-family: monospace;
}
.bots-eval-bar-container {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.bots-eval-bar-fill {
  height: 100%;
  width: 50%;
  background: #4ade80;
  border-radius: 3px;
  transition: width 0.4s ease, background 0.3s ease;
}
.bots-commentator-list {
  flex: 1 1 0;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bots-cmt-entry {
  font-size: 0.58rem;
  line-height: 1.3;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  animation: botsCmtIn 0.15s ease-out;
}
@keyframes botsCmtIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.bots-cmt-author {
  font-weight: 800;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bots-cmt-text {
  color: #cbd5e1;
}

/* Right sidebar — chat + history */
.bots-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 165px;
  justify-self: end;
}

/* Board wrapper — centered column */
.bots-board-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}
.bots-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(62vmin, 62vh, 500px);
  height: min(62vmin, 62vh, 500px);
  border: 4px solid var(--bot-accent, #3b3b5c);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

/* Chess square & piece */
.bots-chess-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
}
.bots-chess-sq:hover {
  filter: brightness(1.08);
}
.bots-chess-sq:active {
  transform: scale(0.97);
}
.bots-chess-pc {
  width: 100%;
  height: 100%;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  will-change: transform;
}
.bots-pc-moved {
  animation: botsPieceMoved 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes botsPieceMoved {
  from {
    transform: scale(0.6);
    filter: brightness(1.35);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}
.chess-piece-moved {
  animation: chessPieceMoved 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes chessPieceMoved {
  from {
    transform: scale(0.6) translateY(-5%);
    filter: brightness(1.35);
  }
  to {
    transform: scale(1) translateY(-5%);
    filter: brightness(1);
  }
}
.bots-popup {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 900;
  will-change: transform, opacity;
}
@keyframes botsPopupIn {
  from { transform: translate(-100%, 0) scale(0); opacity: 0; }
  60% { transform: translate(-100%, 0) scale(1.3); opacity: 1; }
  to { transform: translate(-100%, 0) scale(1); opacity: 1; }
}
@keyframes botsPopupOut {
  from { transform: translate(-100%, 0) scale(1); opacity: 1; }
  to { transform: translate(-100%, -10px) scale(0.4); opacity: 0; }
}

/* Shared chess duel in Phaser (Mario level 4) */
.chess-duel-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
}
.chess-duel-pc {
  width: 100%;
  height: 100%;
  background-size: 85%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.chess-duel-popup {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 900;
  will-change: transform, opacity;
}
@keyframes botsPopupIn {
  0% { transform: translate(-100%, 0) scale(0); opacity: 0; }
  60% { transform: translate(-100%, 0) scale(1.3); opacity: 1; }
  100% { transform: translate(-100%, 0) scale(1); opacity: 1; }
}
@keyframes botsPopupOut {
  0% { transform: translate(-100%, 0) scale(1); opacity: 1; }
  100% { transform: translate(-100%, -10px) scale(0.4); opacity: 0; }
}

/* Bot comment bubble */
.bots-comment-bubble {
  background: rgba(50, 60, 85, 0.65);
  border: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.2));
  border-radius: 8px;
  padding: 5px 7px;
  display: flex;
  gap: 5px;
  align-items: flex-start;
  flex-shrink: 0;
}
.bots-comment-avatar { font-size: 1.1rem; flex-shrink: 0; }
.bots-comment-content { flex: 1; min-width: 0; }
.bots-comment-name {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}
.bots-comment-text {
  font-size: 0.68rem;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.35;
  font-style: italic;
  min-height: 1.2em;
}

/* History section — scrollable */
.bots-history-section {
  background: rgba(40, 48, 70, 0.45);
  border: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.18));
  border-radius: 6px;
  padding: 4px 5px;
  flex: 0 1 auto;
  max-height: 120px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bots-history-header {
  font-size: 0.5rem;
  font-weight: 700;
  color: #a5b4cc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.bots-history-list {
  flex: 1;
  overflow-y: auto;
  font-family: 'Quicksand', 'Outfit', sans-serif;
  font-size: 0.58rem;
  color: #b0bdd0;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bots-hist-row {
  display: grid;
  grid-template-columns: 16px 1fr 14px 1fr 14px;
  align-items: center;
  gap: 1px;
  padding: 1px 2px;
  border-radius: 2px;
}
.bots-hist-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.bots-hist-num {
  color: #58637a;
  font-weight: 600;
  text-align: right;
  font-size: 0.5rem;
}
.bots-hist-move {
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}
.bots-hist-move.opp {
  color: #94a3b8;
}
.bots-hist-ann {
  font-size: 0.55rem;
  font-weight: 400;
  text-align: center;
  min-width: 12px;
}

/* Mobile-only history — hidden on desktop */
.bots-history-mobile {
  display: none;
}

/* ===================================================================
   BOTS RESULT OVERLAY — compact horizontal layout
   =================================================================== */
.bots-result-overlay {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid;
  border-radius: 16px;
  background: rgba(18, 24, 38, 0.97);
  overflow: hidden;
}

/* --- Top bar: icon + title + reason inline --- */
.bots-result-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.bots-result-icon {
  font-size: 1.8rem;
  animation: botsResultBounce 0.5s ease-out;
}
@keyframes botsResultBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.bots-result-title {
  font-family: 'Nunito', 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
}
.bots-result-reason {
  color: #94a3b8;
  font-size: 0.72rem;
  margin: 0;
}

/* --- Body: board left + info right --- */
.bots-result-body {
  display: flex;
  gap: 0.8rem;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

/* --- Board column --- */
.bots-result-board-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}
.bots-review-board-wrap {
  width: 220px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.bots-review-board {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.bots-review-board .bots-chess-sq {
  width: 12.5%;
  height: 12.5%;
  cursor: default;
}
.bots-review-board .bots-chess-sq:hover {
  filter: none;
}

/* --- Info column --- */
.bots-result-info-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 0.3rem;
  overflow: hidden;
}

/* VS line */
.bots-result-vs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  flex-shrink: 0;
}
.result-player { font-weight: 800; color: #67e8f9; font-size: 0.78rem; }
.result-vs { color: #64748b; font-size: 0.6rem; }
.result-bot { font-weight: 800; font-size: 0.78rem; }

/* Quote */
.bots-result-quote {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: italic;
  margin: 0;
  line-height: 1.3;
  flex-shrink: 0;
}

/* Stats row */
.bots-result-stats {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.result-stat {
  text-align: center;
  padding: 0.2rem 0.4rem;
  background: rgba(255,255,255,0.03);
  border-radius: 5px;
  min-width: 52px;
}
.result-stat span {
  display: block;
  font-size: 0.52rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.result-stat strong {
  font-size: 0.85rem;
  color: var(--warm-white);
}

/* ELO */
.bots-result-elo {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-shrink: 0;
}
.bots-result-elo span {
  font-size: 0.58rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.bots-result-elo strong {
  font-size: 1.15rem;
}

/* Summary */
.bots-result-summary {
  font-size: 0.64rem;
  color: #cbd5e1;
  line-height: 1.35;
  background: rgba(255,255,255,0.025);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  flex-shrink: 0;
}

/* Move info (current move indicator) */
.bots-result-move-info {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-shrink: 0;
}
.bots-review-move-num {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.6rem;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.bots-review-move-san {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #e2e8f0;
}

/* Moves list — compact vertical scroll */
.bots-review-moves {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  max-height: 160px;
  padding: 0.15rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.bots-review-moves::-webkit-scrollbar { width: 3px; }
.bots-review-moves::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.bots-review-move-row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr;
  align-items: center;
  gap: 1px;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.68rem;
}
.bots-review-move-number {
  color: #64748b;
  font-weight: 600;
  text-align: right;
  padding-right: 2px;
}
.bots-review-move-item {
  padding: 1px 3px;
  border-radius: 2px;
  cursor: pointer;
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.1s ease;
  display: flex;
  align-items: center;
  gap: 1px;
}
.bots-review-move-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.bots-review-move-item.active {
  background: #fbbf24;
  color: #0a0a0a !important;
  box-shadow: 0 1px 4px rgba(251, 191, 36, 0.3);
}
.bots-review-move-ann {
  font-size: 0.5rem;
  font-weight: 400;
  margin-left: 1px;
}

/* Controls */
.bots-review-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.bots-review-btn {
  background: none;
  border: none;
  color: #cbd5e1;
  font-size: 0.85rem;
  padding: 0.35rem 0;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bots-review-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.bots-review-btn:active { transform: scale(0.92); }
.bots-review-btn[data-action="play"] { color: #fbbf24; font-size: 0.95rem; }
.bots-review-btn[data-action="play"].playing { color: #f87171; animation: botsReviewPulse 1.2s infinite alternate; }
@keyframes botsReviewPulse {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

/* Actions */
.bots-result-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.bots-result-btn {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex: 1;
}
.bots-result-btn:hover { filter: brightness(1.15); transform: scale(1.03); }
.bots-result-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--warm-white);
}
.bots-result-btn.secondary:hover {   background: rgba(255, 255, 255, 0.12);
}

/* ===================================================================
   BOTS END TRANSITION — fighting game style
   =================================================================== */
.bots-end-transition {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: botsEndFadeIn 0.1s ease-out;
}

.bots-end-transition.bots-end-fadeout {
  animation: botsEndFadeOut 0.4s ease-in forwards;
  pointer-events: none;
}

@keyframes botsEndFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes botsEndFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Flash overlay */
.bots-end-flash {
  position: absolute;
  inset: 0;
  background: var(--flash-color, #ef4444);
  opacity: 0;
  animation: botsEndFlash 0.6s ease-out forwards;
}
@keyframes botsEndFlash {
  0% { opacity: 0; }
  15% { opacity: 0.35; }
  40% { opacity: 0.12; }
  70% { opacity: 0.04; }
  100% { opacity: 0; }
}

/* Slam text — "¡JAQUE MATE!" / "DERROTA" / "¡TABLAS!" */
.bots-end-slam {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  animation: botsEndSlamScale 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes botsEndSlamScale {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.bots-end-slam-text {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.8rem, 8vw, 4.5rem);
  font-weight: 900;
  color: var(--slam-color, #ef4444);
  text-shadow:
    0 0 15px var(--slam-color, #ef4444),
    0 0 40px var(--slam-color, #ef4444),
    0 0 80px var(--slam-color, #ef4444),
    0 4px 12px rgba(0, 0, 0, 0.9);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  animation: botsEndSlamPulse 0.7s ease-in-out 0.5s infinite alternate;
}

@keyframes botsEndSlamPulse {
  0% {
    filter: brightness(1);
    text-shadow: 0 0 15px var(--slam-color), 0 0 40px var(--slam-color), 0 0 80px var(--slam-color), 0 4px 12px rgba(0, 0, 0, 0.9);
  }
  100% {
    filter: brightness(1.3);
    text-shadow: 0 0 25px var(--slam-color), 0 0 60px var(--slam-color), 0 0 100px var(--slam-color), 0 4px 12px rgba(0, 0, 0, 0.9);
  }
}

.bots-end-slam-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  color: #e2e8f0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  opacity: 0;
  animation: botsEndSubIn 0.3s ease-out 0.4s forwards;
}
@keyframes botsEndSubIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 0.9; transform: translateY(0); }
}

/* Scanlines overlay for retro feel */
.bots-end-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* Result overlay entrance */
.bots-result-overlay {
  animation: botsResultIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes botsResultIn {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

/* ===================================================================
   BOTS RESPONSIVE — Mobile & Tablet
   =================================================================== */
@media (max-width: 768px) {
  /* --- Bot selection --- */
  .bots-hero { padding: 1rem 0.75rem 0.5rem; }
  .bots-hero h1 { font-size: 1.35rem; }
  .bots-hero-subtitle { font-size: 0.72rem; }
  .bots-grid-section { padding: 0 0.5rem 1.5rem; }
  .bots-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 380px;
  }
  .bot-card { border-radius: 12px; }
  .bot-card-header { padding: 0.75rem 1rem 0.5rem; }
  .bot-card-emoji { font-size: 1.8rem; }
  .bot-card-name { font-size: 1.05rem; }
  .bot-card-desc { font-size: 0.72rem; }
  .bot-card-btn { padding: 0.5rem 1rem; font-size: 0.8rem; }
  .elo-value { font-size: 1.5rem; }

  /* --- VS intro screen --- */
  .bots-vs-overlay { border-radius: 0; }
  .bots-vs-name { font-size: 1.1rem; }
  .bots-vs-emoji-big { font-size: 2.2rem; }
  .bots-vs-vs { font-size: 2.2rem; }
  .bots-vs-badge { font-size: 0.55rem; padding: 3px 8px; margin-bottom: 6px; }
  .bots-vs-quote { font-size: 0.6rem; max-width: 160px; }
  .bots-vs-skip { bottom: 12px; right: 10px; font-size: 0.65rem; padding: 6px 12px; }
  .warning-top { top: 18px; }
  .warning-bottom { bottom: 18px; }
  .bots-vs-warning { height: 22px; }
  .bots-vs-scroller { font-size: 0.65rem; }

  /* --- Game container --- */
  .bots-game-container {
    height: auto;
    max-height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
  }

  /* Topbar — compact single row */
  .bots-game-topbar {
    padding: 4px 6px;
    gap: 6px;
  }
  .bots-btn-resign {
    padding: 4px 8px;
    font-size: 0.62rem;
    min-height: 32px;
    min-width: 32px;
  }
  .bots-btn-mute {
    padding: 3px 5px;
    font-size: 0.75rem;
    min-width: 28px;
    min-height: 28px;
  }
  .bots-opponent-emoji { font-size: 1.2rem; }
  .bots-opponent-name { font-size: 0.72rem; }
  .bots-opponent-elo { font-size: 0.55rem; }
  #bots-status { font-size: 0.6rem; padding: 2px 8px; }

  /* Main area — stack vertically */
  .bots-game-main {
    display: flex;
    flex-direction: column;
    padding: 4px 6px;
    gap: 4px;
  }

  /* Comment bubble — personality above board */
  .bots-sidebar-right {
    order: 1;
    width: 100%;
    flex-direction: row;
    gap: 4px;
  }
  .bots-comment-bubble {
    flex: 1;
    padding: 4px 7px;
    gap: 5px;
    border-radius: 6px;
    min-height: 0;
  }
  .bots-comment-avatar { font-size: 1rem; }
  .bots-comment-name { font-size: 0.55rem; }
  .bots-comment-text { font-size: 0.64rem; }
  /* Hide desktop history on mobile */
  .bots-sidebar-right .bots-history-section { display: none; }

  /* Mobile history — appears at bottom */
  .bots-history-mobile {
    order: 4;
    display: flex !important;
    flex-direction: column;
    background: rgba(40, 48, 70, 0.45);
    border: 1px solid var(--bot-accent, rgba(255, 255, 255, 0.18));
    border-radius: 5px;
    padding: 3px 5px;
    max-height: 50px;
  }
  .bots-history-mobile .bots-history-header { font-size: 0.48rem; }
  .bots-history-mobile .bots-history-list {
    font-size: 0.5rem;
    max-height: 36px;
    overflow-y: auto;
    font-family: 'Quicksand', 'Outfit', sans-serif;
    color: #b0bdd0;
  }
  .bots-history-mobile .bots-hist-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
  }

  /* Board — full width */
  .bots-board-wrapper {
    order: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .bots-board {
    width: min(92vw, 400px);
    height: min(92vw, 400px);
    border-width: 3px;
  }

  /* Captures — row at bottom */
  .bots-sidebar-left {
    order: 3;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding-top: 0;
  }
  .bots-captured-compact {
    height: 28px !important;
  }
  .bots-sidebar-left .bots-captured-section {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    height: auto;
    min-height: 28px;
    border-radius: 5px;
  }
  .bots-captured-label {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.5rem;
  }
  .bots-captured-pieces { font-size: 0.7rem; }

  /* Hide captured sections on very small screens */
  @media (max-width: 400px) {
    .bots-sidebar-left { display: none; }
  }

  /* Commentator on mobile */
  .bots-commentator {
    max-height: 60px;
    flex: 0 0 auto;
  }

  /* --- Result overlay --- */
  .bots-result-overlay { padding: 0.5rem 0.6rem; }
  .bots-result-top { gap: 0.3rem; margin-bottom: 0.3rem; }
  .bots-result-icon { font-size: 1.4rem; }
  .bots-result-title { font-size: 1rem; }
  .bots-result-reason { font-size: 0.62rem; }
  .bots-result-body { flex-direction: column; gap: 0.4rem; }
  .bots-result-board-col { flex-direction: row; gap: 0.4rem; align-items: flex-start; }
  .bots-review-board-wrap { width: 160px; height: 160px; }
  .bots-review-controls { grid-template-columns: repeat(5, 1fr); width: 140px; }
  .bots-review-btn { font-size: 0.7rem; padding: 0.28rem 0; }
  .bots-result-stats { gap: 0.3rem; }
  .result-stat { min-width: 44px; padding: 0.15rem 0.3rem; }
  .result-stat strong { font-size: 0.72rem; }
  .result-stat span { font-size: 0.45rem; }
  .bots-result-elo strong { font-size: 0.95rem; }
  .bots-result-summary { font-size: 0.58rem; padding: 0.2rem 0.35rem; }
  .bots-result-quote { font-size: 0.6rem; }
  .bots-review-moves { max-height: 100px; }
  .bots-review-move-row { font-size: 0.6rem; grid-template-columns: 16px 1fr 1fr; }
  .bots-review-move-item { font-size: 0.6rem; padding: 1px 2px; }
  .bots-review-move-san { font-size: 0.72rem; }
  .bots-review-move-num { font-size: 0.52rem; }
  .bots-result-actions { margin-top: 0.15rem; }
  .bots-result-btn { font-size: 0.6rem; padding: 0.35rem 0.5rem; }
}

/* Small phones */
@media (max-width: 400px) {
  .bots-hero h1 { font-size: 1.2rem; }
  .bots-hero-subtitle { font-size: 0.65rem; }
  .bots-grid { max-width: 320px; }
  .bot-card-emoji { font-size: 1.5rem; }
  .bot-card-name { font-size: 0.95rem; }
  .elo-value { font-size: 1.3rem; }
  .bot-card-desc { font-size: 0.65rem; }

  .bots-game-topbar { padding: 3px 4px; gap: 4px; }
  .bots-btn-resign { font-size: 0.6rem; padding: 3px 6px; }
  .bots-opponent-emoji { font-size: 1rem; }
  .bots-opponent-name { font-size: 0.65rem; }
  #bots-status { font-size: 0.55rem; padding: 2px 6px; }

  .bots-game-main { gap: 3px; padding: 3px 4px; }
  .bots-board {
    width: min(96vw, 360px);
    height: min(96vw, 360px);
  }
  .bots-chess-pc { font-size: clamp(1rem, 3vmin, 2.2rem); }

  .bots-vs-name { font-size: 0.9rem; }
  .bots-vs-emoji-big { font-size: 1.6rem; }
  .bots-vs-vs { font-size: 1.6rem; }
  .bots-vs-skip { bottom: 8px; right: 6px; font-size: 0.6rem; }
}

/* ===================================================================
   FIGHTING GAME INTRO STYLES
   =================================================================== */
.bots-vs-ready-text {
  font-family: 'Outfit', sans-serif;
  font-size: 3.8rem;
  font-weight: 900;
  color: #ef4444; /* Bright Red */
  text-shadow: 
    0 0 10px rgba(239, 68, 68, 0.8),
    0 0 30px rgba(239, 68, 68, 0.6),
    0 0 50px rgba(239, 68, 68, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.9);
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: botsVsReadyBlink 0.4s ease-in-out infinite alternate;
  margin-top: 15px;
}

@keyframes botsVsReadyBlink {
  0% {
    transform: scale(0.92);
    filter: brightness(0.7) drop-shadow(0 0 5px rgba(239, 68, 68, 0.5));
    opacity: 0.5;
  }
  100% {
    transform: scale(1.08);
    filter: brightness(1.3) drop-shadow(0 0 25px rgba(239, 68, 68, 0.95));
    opacity: 1;
  }
}

/* Pulsing fighting game CTA button centered at bottom */
.bots-vs-skip-epic {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%) scale(1);
  z-index: 200;
  animation: botsVsPulseBtn 0.6s ease-in-out infinite alternate;
  padding: 14px 36px;
  font-size: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  border: 3px solid #fecaca;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.75), inset 0 2px 4px rgba(255,255,255,0.4);
  font-weight: 900;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.bots-vs-skip-epic:hover {
  transform: translateX(-50%) scale(1.1) translateY(-3px);
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
  box-shadow: 0 0 45px rgba(239, 68, 68, 0.95), inset 0 2px 4px rgba(255,255,255,0.6);
}

.bots-vs-skip-epic:active {
  transform: translateX(-50%) scale(0.95) translateY(0);
}

.bots-vs-skip-epic kbd {
  background: #0a0a0a;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
  font-size: 0.95rem;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.2);
}

@keyframes botsVsPulseBtn {
  from {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
  }
  to {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.9);
  }
}

/* Responsive button scaling for mobile */
@media (max-width: 600px) {
  .bots-vs-skip-epic {
    bottom: 20px;
    padding: 10px 24px;
    font-size: 0.95rem;
    border-radius: 10px;
    border-width: 2px;
  }
  .bots-vs-skip-epic kbd {
    font-size: 0.75rem;
    padding: 1px 4px;
  }
}

/* ===================================================================
   BOTS GENERAL STATS DASHBOARD (THEME ADAPTIVE & SPACIOUS)
   =================================================================== */
.bots-dashboard-container {
  margin: 1.5rem auto 2.5rem;
  max-width: 1100px;
  width: 100%;
  animation: botsVsContentFade 0.6s ease-out both;

  /* Default theme values (Light mode) */
  --stat-box-bg: rgba(255, 255, 255, 0.95);
  --stat-box-border: rgba(42, 111, 151, 0.15);
  --stat-box-shadow: 0 10px 25px rgba(42, 111, 151, 0.05);
  --stat-text-primary: #1e293b;
  --stat-text-secondary: #475569;
  --stat-text-muted: #64748b;
  --stat-divider: rgba(42, 111, 151, 0.1);
  --stat-hero-bg: rgba(42, 111, 151, 0.04);
  --stat-pill-win-bg: rgba(74, 222, 128, 0.15);
  --stat-pill-win-text: #166534;
  --stat-pill-loss-bg: rgba(248, 113, 113, 0.15);
  --stat-pill-loss-text: #991b1b;
  --stat-pill-draw-bg: rgba(251, 191, 36, 0.15);
  --stat-pill-draw-text: #92400e;
  --stat-best-win-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  --stat-best-win-border: rgba(251, 191, 36, 0.35);
}

/* Dark mode theme overrides */
[data-theme="dark"] .bots-dashboard-container {
  --stat-box-bg: rgba(27, 45, 69, 0.85);
  --stat-box-border: rgba(255, 255, 255, 0.08);
  --stat-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --stat-text-primary: #f8fafc;
  --stat-text-secondary: #cbd5e1;
  --stat-text-muted: #94a3b8;
  --stat-divider: rgba(255, 255, 255, 0.08);
  --stat-hero-bg: rgba(255, 255, 255, 0.04);
  --stat-pill-win-bg: rgba(74, 222, 128, 0.12);
  --stat-pill-win-text: #4ade80;
  --stat-pill-loss-bg: rgba(248, 113, 113, 0.12);
  --stat-pill-loss-text: #f87171;
  --stat-pill-draw-bg: rgba(251, 191, 36, 0.12);
  --stat-pill-draw-text: #fbbf24;
  --stat-best-win-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(245, 158, 11, 0.08) 100%);
  --stat-best-win-border: rgba(251, 191, 36, 0.2);
}

.bots-stats-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.bots-stat-box {
  background: var(--stat-box-bg);
  border: 1px solid var(--stat-box-border);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--stat-box-shadow);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  color: var(--stat-text-secondary);
}

.bots-stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #fbbf24;
}

.bots-stat-box.box-primary::before { background: #3b82f6; }
.bots-stat-box.box-colors::before { background: #a855f7; }
.bots-stat-box.box-insights::before { background: #10b981; }

.bots-stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .bots-stat-box:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.box-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--stat-text-muted);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

/* --- Card 1: General Stats Layout --- */
.general-stats-layout {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.25rem;
  align-items: stretch;
}

.stat-hero-col {
  flex: 1.2;
  background: var(--stat-hero-bg);
  border-radius: 14px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--stat-box-border);
}

.hero-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--stat-text-muted);
  margin-bottom: 4px;
  text-align: center;
}

.hero-number {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--stat-text-primary);
  font-family: 'Outfit', sans-serif;
  line-height: 1;
}

.stat-details-col {
  flex: 1.8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: space-between;
}

.detail-pill {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: currentColor;
}

.pill-label {
  flex: 1;
}

.pill-val {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
}

.pill-win {
  background: var(--stat-pill-win-bg);
  color: var(--stat-pill-win-text);
}

.pill-loss {
  background: var(--stat-pill-loss-bg);
  color: var(--stat-pill-loss-text);
}

.pill-draw {
  background: var(--stat-pill-draw-bg);
  color: var(--stat-pill-draw-text);
}

/* --- Card 1 Progress Bar --- */
.box-progress-wrapper {
  margin-top: auto;
  border-top: 1px solid var(--stat-divider);
  padding-top: 1rem;
}

.progress-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--stat-text-secondary);
  margin-bottom: 6px;
  font-weight: 700;
}

.progress-percentage {
  color: var(--stat-text-primary);
  font-weight: 800;
}

.progress-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .progress-track {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.03);
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Card 2: Color Statistics --- */
.color-stats-split {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  height: 100%;
}

.color-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-header-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--stat-hero-bg);
  border: 1px solid var(--stat-box-border);
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--stat-text-primary);
  align-self: flex-start;
}

.color-metrics-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--stat-text-secondary);
}

.color-metric-row strong {
  color: var(--stat-text-primary);
}

.color-record-text {
  display: flex;
  gap: 2px;
  font-family: 'Outfit', sans-serif;
}

.color-record-text .txt-win { color: #10b981; }
.color-record-text .txt-loss { color: #ef4444; }
.color-record-text .txt-sep { color: var(--stat-text-muted); font-weight: normal; }

.color-rate-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
}

.text-white-rate {
  color: #06b6d4 !important;
}

.text-black-rate {
  color: #8b5cf6 !important;
}

.color-stat-divider {
  width: 1px;
  background: var(--stat-divider);
  align-self: stretch;
}

/* --- Card 3: Insights & Best Win --- */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.insight-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--stat-text-secondary);
  border-bottom: 1px dashed var(--stat-divider);
  padding-bottom: 6px;
}

.insight-label-with-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.insight-value-highlight {
  color: var(--stat-text-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

.best-win-card {
  background: var(--stat-best-win-bg);
  border: 1px solid var(--stat-best-win-border);
  padding: 8px 12px;
  border-radius: 12px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.best-win-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #eab308;
}

.best-win-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--stat-text-primary);
}

.best-win-opp {
  font-family: 'Quicksand', sans-serif;
}

.best-win-elo {
  color: #eab308;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  background: rgba(234, 179, 8, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
}

/* === SUPER MARTINA CUSTOM OVERLAYS (Victory and Game Over) === */
.mario-gameover-overlay,
.mario-victory-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 6, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 1rem;
  box-sizing: border-box;
}

.mario-gameover-panel,
.mario-victory-panel {
  background: rgba(20, 12, 36, 0.96);
  border-radius: 24px;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  box-sizing: border-box;
  animation: marioPanelZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85);
  font-family: 'Nunito', sans-serif;
  color: #fff;
}

@media (max-width: 500px) {
  .mario-gameover-panel,
  .mario-victory-panel {
    padding: 1rem;
    border-radius: 16px;
  }
  .mario-gameover-skull,
  .mario-victory-crown {
    font-size: 2.5rem;
  }
  .mario-gameover-panel h2,
  .mario-victory-panel h2 {
    font-size: 1.3rem;
  }
  .mario-gameover-msg,
  .mario-victory-msg {
    font-size: 0.8rem;
  }
}

.mario-gameover-panel {
  border: 3px solid #f43f5e;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(244, 63, 94, 0.25);
}

.mario-victory-panel {
  border: 3px solid #fbbf24;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 30px rgba(251, 191, 36, 0.25);
}

@keyframes marioPanelZoom {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1.0); opacity: 1; }
}

.mario-gameover-skull,
.mario-victory-crown {
  font-size: 3.5rem;
  margin-bottom: 0.8rem;
  display: inline-block;
  animation: marioBadgeFloat 2s infinite alternate ease-in-out;
}

@keyframes marioBadgeFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

.mario-gameover-panel h2,
.mario-victory-panel h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  margin: 0 0 0.5rem 0;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.mario-gameover-panel h2 {
  color: #f43f5e;
  text-shadow: 0 0 12px rgba(244, 63, 94, 0.3);
}

.mario-victory-panel h2 {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}

.mario-gameover-msg,
.mario-victory-msg {
  font-size: 0.95rem;
  color: #cbd5e1;
  line-height: 1.45;
  margin: 0 0 1.5rem 0;
}

.mario-gameover-stats,
.mario-victory-stats {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.mario-stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mario-stat-icon {
  font-size: 1.4rem;
}

.mario-stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #fbbf24;
}

.mario-stat-name {
  font-size: 0.75rem;
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mario-victory-buttons,
.mario-gameover-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.mario-vic-btn {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.6rem 1.4rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mario-vic-btn.btn-replay {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  color: #fff;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.3);
}

.mario-vic-btn.btn-replay:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(67, 56, 202, 0.5);
  background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.mario-vic-btn.btn-map {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.mario-vic-btn.btn-map:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.mario-vic-btn:active {
  transform: translateY(0);
}

/* === Game Sandbox Relative Position Context === */
#game-sandbox {
  position: relative;
}