@font-face {
  font-family: 'PixelSerif';
  src: url('fonts/PixelSerif_16px_v02.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/*
:-----------------------------------------------------------------------------:
:  HALL OF FAME (HOF) OVERLAY STYLES                                          :
:-----------------------------------------------------------------------------:
*/

/* The main overlay - full screen, hidden by default */
.hof-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark, semi-transparent background */
    /* Ensure the Hall of Fame overlay appears above other modals */
    z-index: 1100;

    /* Center the tooltip */
    justify-content: center;
    align-items: center;

    /* Hide/show transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Class to show the overlay */
.hof-overlay.is-visible {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
}

/* The main tooltip/modal window */
.hof-tooltip {
    position: relative;
    background: linear-gradient(145deg, #2c3e50, #1a2533); /* Dark, stylish gradient */
    color: #ecf0f1;
    padding: 40px 50px;
    border-radius: 20px;
    border: 2px solid #f39c12; /* Gold border */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    width: 90%;
    max-width: 900px;
    text-align: center;
    
    /* Animation for when it appears */
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hof-overlay.is-visible .hof-tooltip {
    transform: scale(1);
}

/* Close Button */
.hof-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #ecf0f1;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}
.hof-close-btn:hover {
    color: #f39c12; /* Gold on hover */
    transform: rotate(90deg);
}

/* Header Text */
.hof-header {
    text-align: center;
    margin-bottom: 20px;
}
.hof-header h1 {
    font-family: var(--font-pixel);
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    text-transform: none;
}
.hof-header h2 {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: #f39c12;
    margin-top: 5px;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

/* Records Container */
.hof-records-container {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

/* Individual Record Block */
.hof-record-block {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 25px;
    padding-left: 10px;
    border-radius: 15px;
    flex: 1;
    border: 1px solid rgba(243, 156, 18, 0.3);
    text-align: left;
}

.hof-record-block .trophy-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.hof-record-block h3 {
    font-family: var(--font-pixel);
    color: #f39c12;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.hof-record-block .player-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.hof-record-block .player-score {
    font-size: 1rem;
    color: #bdc3c7;
    margin: 5px 0 0 0;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .hof-records-container {
        flex-direction: column;
    }
    .hof-tooltip {
        padding: 40px 20px;
    }
}

/*
:-----------------------------------------------------------------------------:
:  LEVEL UP ANIMATION SYSTEM
:-----------------------------------------------------------------------------:
*/

/* A more aggressive and chaotic screen shake keyframe */
@keyframes strong-shake {
  0% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-5px, -8px) rotate(-1deg); }
  20% { transform: translate(5px, 8px) rotate(1deg); }
  30% { transform: translate(-8px, 5px) rotate(0deg); }
  40% { transform: translate(8px, -5px) rotate(1deg); }
  50% { transform: translate(-5px, 8px) rotate(-1deg); }
  60% { transform: translate(5px, -8px) rotate(0deg); }
  70% { transform: translate(-8px, -5px) rotate(1deg); }
  80% { transform: translate(8px, 5px) rotate(-1deg); }
  90% { transform: translate(-5px, 8px) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* Class added to the main container when leveling up */
.level-up-shake {
  animation: strong-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/*
:-----------------------------------------------------------------------------:
:  SIMPLIFIED LEVEL TEXT TRANSITION
:-----------------------------------------------------------------------------:
*/

#level-text {
  transition: opacity 0.3s ease-in-out;
}

#level-text.is-fading {
  opacity: 0;
}
@font-face {
  font-family: 'Schwarzenegger';
  src: url('fonts/Schwarzenegger.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ==========================================================================
   ====== STYLES FOR MINIMALIST STUDY MODE ======
   ========================================================================== */

/* When the game screen has the 'study-mode-active' class... */

/* 1. Hide all non-essential UI elements */
.study-mode-active #chuache-box,
.study-mode-active #game-mechanics-bar,
.study-mode-active #interaction-panel {
  display: none !important;
}

/* 2. Re-center the main game layout */
.study-mode-active #game-layout {
  display: block;
  width: 100%;
}

/* 3. Make the main content area centered and appropriately sized */
.study-mode-active #game-main {
  flex-basis: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-right: 0;
}

:root {
  --bg-color: #1a2a1a;
  --container-bg: #2a3a2a;
  --text-color: #f0f0f0;
  --title-color: #ffffff;
  --accent-color-red: #c04040;
  --accent-color-blue: #f0f0f0;
  --input-bg: #111111;
  --border-color: #4a5a4a;
  --feedback-correct: #40c040;
  --feedback-incorrect: var(--accent-color-red);
  --font-pixel: 'PixelSerif', sans-serif;
}

body {
  font-family: var(--font-pixel);
  background-color: var(--bg-color);
  color: var(--text-color);
  max-width: 800px;
  margin: 15px auto;
  padding: 15px;
  padding-bottom: 15px; /* espacio inferior */
  font-size: 20px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  text-shadow: 1px 2px #111;
  border-radius: 20px;
  box-shadow:
    inset 0 0 60px rgba(0, 255, 128, 0.1),
    inset 0 0 200px rgba(0, 255, 128, 0.05),
    0 0 60px rgba(0, 255, 128, 0.2);
  /* Preparar contenedor para efectos tipo CRT */
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 100px 30px rgba(0, 0, 0, 0.85);
  /* Use the same radius as the body to avoid visible gaps on mobile */
  border-radius: 20px;
  pointer-events: none;
  z-index: 3;
}

@media (max-width: 600px) {
  body::before {
    box-shadow: none;
  }
}



body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 128, 0.02),
    rgba(0, 255, 128, 0.02) 1px,
    transparent 2px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 2;
}


.main-header .glitch-title {
  font-size: clamp(1em, 8vw, 2.2em);
  letter-spacing: 0.1em;
  white-space: nowrap;
  max-width: 100%;
  overflow: visible;
  text-shadow: 2px 2px #111;
  font-family: 'Schwarzenegger', var(--font-pixel);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: pixelated;
  position: relative;
  z-index: 5;
}

.glitch-title {
  display: inline-block;
  color: white;
  text-align: center;
  position: relative;
}

.glitch-active {
  animation: glitchy 0.5s linear;
}

@keyframes glitchy {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  40% { transform: translate(1px, -1px) rotate(0.5deg); }
  60% { transform: translate(-1px, 1px) rotate(0.5deg); }
  80% { transform: translate(1px, 1px) rotate(-0.5deg); }
  100% { transform: translate(0, 0); }
}

/* Estilo del Título Principal */
#main-title { /* Cambiado de h1 a #main-title para ser más específico */
  color: var(--title-color);
  font-size: 2.8em; /* Tamaño grande */
  text-transform: uppercase; /* MAYÚSCULAS */
  margin: 0; /* Quitar margen por defecto del h1 si está dentro de flex */
  text-shadow: 2px 2px #111; /* Sombra sutil para darle profundidad */
}


.toggle-button {
  background-color: #f0ad4e;
  border: 1px solid #eea236;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.toggle-button:not(.selected) {
  background-color: #444;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  opacity: 1;
}
.toggle-button.selected {
  background: linear-gradient(45deg, #ff6ec4, #7873f5);
  color: #fff;
  animation: pulse-colors 2s infinite;
  border-color: transparent;
}

#toggle-ignore-accents.toggle-button:not(.selected) {
  background-color: var(--accent-color-red);
  color: var(--title-color);
  border: 1px solid var(--border-color);
}

#toggle-ignore-accents.toggle-button.selected {
  /* Keep the same appearance when selected */
  background: var(--accent-color-red);
  color: var(--title-color);
  border: 1px solid var(--border-color);
  animation: none;
}


#toggle-reflexive {
  position: relative;
  padding-right: 28px;
}

#toggle-ignore-accents {
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 4px;
  padding-right: 28px; /* space for the info icon */

}

#toggle-ignore-accents .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  border: 1px solid var(--title-color);
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  margin-right: 0.3em;
  color: transparent;
  flex-shrink: 0;
}

#toggle-ignore-accents.selected .tick::before {
  content: '\2714';
  color: var(--title-color);
  font-size: 0.8em;
  line-height: 1;
  font-weight: bold;
}

#accent-help-text.help-text {
  font-size: 0.85em;
  margin-top: 4px;
  color: var(--text-color);
}

@keyframes pulse-colors {
  0%   { box-shadow: 0 0 8px rgba(255,  0,   0, 0.8); }
  25%  { box-shadow: 0 0 8px rgba(255,165,   0, 0.8); }
  50%  { box-shadow: 0 0 8px rgba(  0,255,   0, 0.8); }
  75%  { box-shadow: 0 0 8px rgba(  0,  0, 255, 0.8); }
  100% { box-shadow: 0 0 8px rgba(255,  0,   0, 0.8); }
}


.screen {
  background-color: var(--container-bg);
  border: 2px solid var(--border-color);
  padding: 25px;
  margin-bottom: 25px;
  /* Quitar border-radius para look más cuadrado/pixelado */
  border-radius: 0;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.3); /* Sombra sutil pixelada */
  position: relative;
  overflow: hidden;
}

h2 {
  color: var(--title-color);
  font-size: 1.8em;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 10px;
}

/* Estilos para Formulario de Configuración */
#setup-form p {
  font-size: 1.2em;
  margin-bottom: 5px;
}

#setup-form label {
  display: inline-block; /* Mejor control */
  margin-bottom: 8px;
  font-size: 1.1em;
  cursor: pointer;
}
/* Espaciado entre checkboxes */
#setup-form label[data-times] {
    display: block; /* Que cada tipo de verbo ocupe una línea */
    margin-left: 10px;
}


input[type="radio"], input[type="checkbox"] {
  margin-right: 8px;
  /* Estilo pixelado básico para checkboxes/radios (difícil sin técnicas avanzadas) */
  appearance: none; /* Quitar estilo por defecto */
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--text-color);
  background-color: var(--input-bg);
  vertical-align: middle; /* Alinear con el texto */
  position: relative; /* Para el punto/check */
  cursor: pointer;
}
input[type="radio"] {
  border-radius: 50%; /* Hacerlo círculo */
}
input[type="checkbox"] {
  border-radius: 0; /* Cuadrado */
}

input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-color-blue);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
input[type="checkbox"]:checked::after {
    content: 'X'; /* O un check '\2713' */
    display: block;
    font-size: 12px; /* Ajustar tamaño */
    line-height: 14px; /* Centrar verticalmente */
    text-align: center;
    color: var(--accent-color-blue);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


select#tense-select {
  font-family: var(--font-pixel);
  font-size: 1em;
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 5px 8px;
  margin-bottom: 15px;
  border-radius: 0;
}

/* Estilo de Botones Generales */
button {
  font-family: var(--font-pixel);
  font-size: 1.1em;
  background-color: var(--accent-color-red);
  color: var(--title-color);
  border: none; /* Quitar borde por defecto */
  padding: 10px 18px;
  margin: 10px 5px 5px 0; /* Margen arriba, derecha, abajo, izquierda */
  cursor: pointer;
  border-radius: 0; /* Look pixelado */
  box-shadow: 2px 2px 0px rgba(0,0,0,0.4);
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s; /* Pequeña transición */
}

button:hover {
  background-color: #fd4b3f; /* Rojo un poco más brillante */
  box-shadow: 1px 1px 0px rgba(0,0,0,0.4);
  transform: translate(1px, 1px); /* Efecto de pulsado */
  text-shadow: 1px 1px #111; /* Sombra sutil para darle profundidad */
}

.no-clues-left {
  text-decoration: line-through;
  opacity: 0.6;
}
button:active {
    box-shadow: none;
    transform: translate(2px, 2px);
}


/* Estilos Pantalla de Juego */
#game-title {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 25px;
    color: var(--accent-color-blue);
    letter-spacing: 0.11em;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.7),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    white-space: normal;
}

.mode-tense-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.mode-container,
.tense-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tense-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.badge-label {
    font-size: 0.75em;
    margin-bottom: 4px;
    text-transform: uppercase;
    color: var(--text-color);
}

.mode-badge {
    /* Reduced overall size by ~20% for a more compact mode indicator */
    padding: 5px 10px;
    border: 2px solid #fff;
    border-radius: 10px;
    font-family: var(--font-pixel);
    font-size: 0.8em;
    color: #fff;
    background-color: #333;
    text-shadow: 1px 1px 2px #000;
    position: relative;
    padding-right: 24px;
}
.mode-badge.receptive { background-color: #dc3545; }
.mode-badge.productive_easy { background-color: #6f42c1; }
.mode-badge.productive { background-color: #28a745; }
.mode-badge.timer { background-color: #ee3c30; }
.mode-badge.lives { background-color: #0b5ac8; }

.tense-badge {
    padding: 4px 8px;
    border: 2px solid #fff;
    border-radius: 12px;
    font-family: var(--font-pixel);
    font-size: 0.7em;
    color: #fff;
    background-color: #333;
    text-shadow: 1px 1px 2px #000;
    position: relative;
    padding-right: 24px;
    margin-right: 0.3em; /* add space before trailing punctuation */
}

.mode-badge,
.tense-badge {
    pointer-events: auto;
    cursor: help;
}

.tense-badge.present { background-color: transparent; border-color: #aaa; color: #aaa; }
.tense-badge.past_simple { background-color: #b71c1c; }
.tense-badge.present_perfect { background-color: #d32f2f; }
.tense-badge.imperfect_indicative { background-color: #e57373; }
.tense-badge.future_simple { background-color: #00e5ff; color: #000; }
.tense-badge.condicional_simple { background-color: #4dd0e1; }

#question-area p { /* El texto "Question:" */
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #aaa; /* Un poco más apagado */
}

#question-prompt {
  font-size: 1.35em; /* Slightly smaller question text */
  margin-bottom: 15px;
  color: var(--title-color);
  background-color: var(--input-bg); /* Fondo oscuro para la pregunta */
  padding: 10px;
  border: 1px solid var(--border-color);
  min-height: 30px; /* Asegurar altura mínima */
  text-align: center;
}

#answer-area label {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.1em;
  margin-bottom: 0;
}

#answer-area input[type="text"] {
  font-family: var(--font-pixel);
  /* Reduce font size to prevent overlap with the character panel */
  font-size: 1.1em;
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  width: auto;
  margin-bottom: 15px;
  border-radius: 0;
}



.pronoun-button {
  display: inline-block;
  margin: 3px 5px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  font-size: 0.9em;
  user-select: none;
  cursor: default;
}
#pronoun-buttons-container {
  margin-bottom: 5px;
}
.spark-effect {
  position: fixed; top:50%; left:50%; transform: translate(-50%,-50%);
  width:200px; height:200px; background: url('images/spark.gif') no-repeat center;
  pointer-events: none; z-index:1000;
}

/* Área de Feedback */
#feedback-area {
  /* REGLAS MODIFICADAS: Haz que esta área se asemeje al input */
  width: 100%;
  max-width: 500px;
  /* Increase height so hints and messages fit comfortably on two lines */
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; /* Center feedback text */
  line-height: 1.4; /* Improve line spacing for multiline messages */
  margin-top: 4px;
  position: relative;
  z-index: 2; /* ensures fire stays behind the clues */
}
#feedback-fixed { margin-bottom: 4px; }
#feedback-area:empty { /* Ocultar borde si está vacío */
    border: none;
    padding: 0;
    min-height: 0;
    margin-top: 0;
}
/* Colores específicos para feedback (necesitarías añadir clases en JS) */
/* .feedback-correct { color: var(--feedback-correct); border-color: var(--feedback-correct); } */
/* .feedback-incorrect { color: var(--feedback-incorrect); border-color: var(--feedback-incorrect); } */


#level-text {
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px auto;
}

/* Container wrapping clue box and fire bar */
#feedback-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#streak-bar {
  position: absolute;
  right: -8px; /* push slightly outside for better alignment */
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}




.music-button {
  position: fixed;
  bottom: 70px;
  right: 130px;
  background: #222;
  color: white;
  border: none;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1000;
}
.music-button:hover {
  background-color: #444;
}
#music-icon {
  width: 100%;
  height: 100%;
}
#game-modes {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.mode-button {
  background-color: #222;
  color: white;
  font-size: 23px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: 'PixelSerif', monospace;
}

.mode-button:hover {
  background-color: #444;
}
.mode-selector {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem;
}
.mode-button.selected-mode {
  background-color: #0d6efd;
  color: white;
  border: 2px solid #0d6efd;
  text-shadow: 2px 2px #111; /* Sombra sutil para darle profundidad */
}

.verb-type-selector {
  display: grid; /* Usar grid para organizar en columnas */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
  gap: 6px;
  margin-bottom: 5px;
}

.verb-type-button {
  font-family: var(--font-pixel);
  font-size: 0.8em;
  background-color: #444;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 6px;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
  transition: background-color 0.2s, border-color 0.2s, opacity 0.3s;
  line-height: 1.2;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-right: 28px;
  }

.verb-type-button:hover {
  background-color: #555;
  border-color: #777;
   }


.verb-type-name {
  font-size: 1em; 
  font-weight: bold; 
  color: var(--title-color);
  display: block; 
  margin-bottom: 2px; 
  text-shadow: none;
  }

.verb-type-hint {
  font-size: 0.8em; /* Pista más pequeña */
  color: #ccc; /* Color más apagado */
  font-style: italic;
  display: block; /* Ocupar línea */
  text-shadow: none;
}

/* Estilo cuando el botón está seleccionado */
.verb-type-button.selected {
  background-color: #fe9600;
  border-color: var(--title-color);
  color: white;
  padding: 8px 10px;
  letter-spacing: 0.5px;  
}
.verb-type-button.selected .verb-type-name {
     color: white;
}
 .verb-type-button.selected .verb-type-hint {
     color: #333; /* Pista más oscura sobre fondo blanco */
}


/* Estilo cuando el botón está desactivado */
.verb-type-button.disabled {
  background-color: #333; 
  border-color: #444;
  color: #777; 
  opacity: 0.6; 
  cursor: not-allowed; 
  pointer-events: none; 
  padding: 10px 15px;
  letter-spacing: 1px;
}
 .verb-type-button.disabled .verb-type-name,
 .verb-type-button.disabled .verb-type-hint {
     color: #777 !important; 
 }

#volume-slider{
  appearance:none;
  height:4px;
  background:#666;
  border-radius:2px;
}
 #volume-slider::-webkit-slider-thumb{
  appearance:none;
  width:12px; height:12px;
  background:#f0f0f0;
  border:1px solid #222;
  cursor:pointer;
}

/* Botoncitos para las terminaciones */
.hint-btn{
  display:inline-block;
  background:#0d6efd;        /* azul vivo: buen contraste sobre el fondo verde */
  color:#ffffff;             /* texto blanco nítido */
  border:1px solid #ffffff55;/* fino borde semitransparente */
  padding:4px 10px;          /* un poco más de aire alrededor del texto */
  margin:0 4px 4px 0;        /* separación entre cuadritos */
  border-radius:4px;         /* ligera curva, sigue estética píxel */
  font-size:1.05em;          /* letra un pelín mayor */
  line-height:1;             /* alineación vertical perfecta */
  font-family:var(--font-pixel);
  text-shadow:1px 1px #111;  /* contorno sutil que evita que “se coma” el fuego */
  cursor:default;
}

#feedback-area em {
  font-style: normal;
  opacity: 0.8;
  margin-right: 0.2em;
}
/*--- contenedor relativo para score+llamas ---*/
#question-prompt,
#feedback-area {
  margin: 0 auto 10px;     /* margen automático a los lados, menor espacio abajo */
}

#question-prompt {
  width: 80%;              /* ajusta al 80% del ancho de la pantalla */
}
#input-es-container,
#input-en-container {
  width: 75%;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#input-es-container {
  position: relative;
  left: 25px; /* shift further right under question */
}

#answer-area button,
#game-modes .mode-button {
  display: inline-block;
  margin: 10px 8px;        /* separación uniforme entre botones */
}

#answer-area {
  flex: 0 0 100%;
  max-width: 100%;
}

#action-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

#action-buttons button {
  flex: 1 1 auto;
}

@media (max-width: 600px) {
  #action-buttons button {
    font-size: 0.8em;
    padding: 6px 8px;
    margin: 5px 4px;
  }
}


#setup-records {
  display: flex;
  flex-wrap: wrap;    /* permite que el h3 ocupe la primera “fila” */
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  max-height: calc(100% - 60px);
  overflow-y: auto;
}


#setup-records > h3 {
  flex: 1 1 100%;
  text-align: center;
  margin: 0 0 15px;   /* separa un poco del bloque de cajas */
  color: var(--title-color);
}


/* Cada “modo” en su propia caja */
.mode-records {
  flex: 1;                   /* ocupan partes iguales */
  background-color: #f4f4f4; /* un gris clarito */
  padding: 15px;
  padding-left: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  letter-spacing: 0.05em;
  text-shadow: 2px 2px #111; /* Sombra sutil para darle profundidad */
  font-size: 0.8em;
  text-align: left;
}

/* Titulo de cada modalidad de record */
.record-mode-title {
  font-family: var(--font-pixel);
  color: var(--title-color);
  font-size: 1.1em;
  margin: 0 0 10px;
  text-shadow: 2px 2px #000;
}

/* Opcional: fondo distinto por modo */
.mode-records[data-mode="timer"]    { background-color: #ee3c30; }
.mode-records[data-mode="lives"]    { background-color: #0b5ac8; }

/* Ajustes de lista: sin viñetas y sin padding extra */
/* Remove bullets from lists inside both .mode-records and .hof-record-block */
.mode-records .record-list,
.hof-record-block .record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mode-records .record-list li,
.hof-record-block .record-list li {
  margin: 6px 0;
}

/* Estilo para cada entrada de récord */
.record-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.record-date {
  font-size: 0.75em;
}
@keyframes vibrate {
  0%   { transform: translate(0); }
  20%  { transform: translate(-1px, 1px); }
  40%  { transform: translate(1px, -1px); }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes vibrate-strong {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(2px, -2px); }
  60%  { transform: translate(-2px, -2px); }
  80%  { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

/* Pronoun color styling */
.pronoun#yo {
  color: #ffbe0b;
}

.pronoun#tú {
  color: #fb5607;
}

.pronoun#él,
.pronoun#ella,
.pronoun#usted {
  color: #ff006e;
}

.pronoun#nosotros,
.pronoun#nosotras {
  color: #8338ec;
}

.pronoun#vosotros,
.pronoun#vosotras {
  color: #3a86ff;
}

.pronoun#ellos,
.pronoun#ellas,
.pronoun#ustedes {
  color: #fffffc;
}
.mode-button {
  background-color: #007bff;
  color: white;
  border: 2px solid #0056b3;
  padding: 10px 20px;
  cursor: pointer;
  margin: 5px;
}

.mode-button.selected-mode {
  background-color: #0056b3;
}

.mode-button[data-mode="produce"] {
  background-color: #28a745 !important; 
  border-color:    #28a745 !important;
}

.mode-button[data-mode="recall"] {
  background-color: #dc3545 !important; 
  border-color:    #dc3545 !important;
}

.mode-button.config-button[data-mode="productive_easy"].selected-mode {
  background-color: #6f42c1 !important;  
  border-color:    #6f42c1 !important;
}


.mode-button.config-button[data-mode="productive_easy"].selected-mode:hover {
  background-color: #5a32a3 !important;
}


@media (min-width: 763px) {
  .mode-button[data-mode="receptive"],
  .mode-button[data-mode="productive_easy"],
  .mode-button[data-mode="productive"] {
    font-size: 0.98em;       /* un 10% más pequeño */
    width: auto !important; /* que no ocupen 100% */
  }
}
#example-container {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}
#game-modes .mode-button {
  background-color: #444 !important;    /* gris oscuro */
  color: white !important;
  border: none !important;
}

#game-modes .mode-button.selected-mode {
  background-color: #0d6efd !important; /* azul vivo */
  border: 2px solid #0d6efd !important;
}

.mode-button {
  background-color: #444; 
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  margin: 5px;
  position: relative; 
  padding-right: 30px;
}

.mode-button.config-button[data-mode="productive"].selected-mode {
  background-color: #28a745 !important; /* Verde */
}

.mode-button.config-button[data-mode="receptive"].selected-mode {
  background-color: #dc3545 !important; /* Rojo */
}

.mode-button.config-button:not(.selected-mode) {
  background-color: #444 !important; /* Gris oscuro */
}

.mode-button.config-button:hover:not(.selected-mode) {
  background-color: #555 !important;
}
/* --- AJUSTES PARA MÓVIL --- */
@media (max-width: 768px) {
    body {
    margin: 0;
    padding: 10px;
    padding-bottom: 80px; /* espacio para el footer fijo */
    width: 100%;
    max-width: 100%;
    font-size: 17px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .specific-modal {
    width: 90vw;
    padding-top: 60px;  /* Espacio suficiente arriba para el botón */
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px; /* Padding inferior normal */
    height: auto;
    max-height: 85vh;
  }

  #name-entry-modal {
    width: 90vw;
    max-height: 85vh;
    padding: 20px;
    padding-bottom: 30px;
    font-size: 1.2em;
  }

  .specific-modal-content {
    font-size: 0.9em; /* Ajusta el tamaño del texto del contenido si es necesario */
    line-height: 1.45;
  }
  
  .specific-modal-content h2 {
    font-size: 1.1em;
    margin-top: 0; 
    padding-bottom: 6px;
    margin-bottom: 10px;
  }

  /* ESTOS SON LOS ESTILOS CORRECTOS PARA EL BOTÓN ARRIBA A LA DERECHA EN MÓVIL */
  .specific-modal-close-btn {
    position: absolute;
    top: 15px;       /* Ajusta según el nuevo padding-top del modal */
    right: 15px;       /* Ajusta según el nuevo padding-right del modal */
    font-size: 2em; 
    line-height: 1;
    padding: 5px;
    color: var(--text-color);
    background: transparent;
    border: none;
    text-shadow: none; /* Asegura que no haya sombra en la 'X' */
    cursor: pointer; /* Para que se vea como clickeable */
  }
  .main-header {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }

        .main-header .glitch-title {
        font-size: clamp(0.8em,  7vw, 1.1em);
        white-space: normal;
        word-break: break-word;
        text-align: center;
        position: relative;
        z-index: 5;
    }

  #main-title {
    font-size: 1.0em;
  }

  .screen {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
  }

  button, 
  button:not(#music-toggle),
  .mode-button,
  .verb-type-button {
    width: 100%;
    padding: 12px 18px;
    font-size: 1.1em;
    margin: 8px 0;
  }

  #question-prompt {
    font-size: 1.2em;
    padding: 10px;
    width: 100%;
  }

  #answer-area input[type="text"] {
    font-size: 1.1em;
    padding: 10px;
    width: 100%;
  }

  #game-modes,
  .mode-selector,
  .verb-type-selector {
    flex-direction: column;
    align-items: center;
  }

  #setup-records {
    flex-direction: column;
    align-items: center;
  }

  .mode-records {
    width: 100%;
    margin-bottom: 15px;
  }


  #music-toggle {
    display: inline-block;
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 16px;      /* ajusta a tu gusto */
    background: #222;     /* o transparente si lo prefieres */
    border: none;
    border-radius: 4px;
    z-index: 1000;
  }
  .music-button {
    bottom: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 16px;
    display: none;
    border: none;
  }
  
}
  @media (min-width: 900px) {
  .glitch-title {
    font-size: 4.5em;
  }
}
@media (max-width: 1227px) {
  .music-button {
    display: none;
  }
}

.glitch-title .letter:nth-child(odd) {
  color: #AA151B;           /* rojo */
  text-shadow:
    0 0 8px #AA151B,        /* glow rojo */
    2px 2px 4px rgba(0,0,0,0.7);
}
.glitch-title .letter:nth-child(even) {
  color: #F1BF00;           /* amarillo */
  text-shadow:
    0 0 8px #F1BF00,        /* glow amarillo */
    2px 2px 4px rgba(0,0,0,0.7);
}
.glitch-title .letter {
  display: inline-block;    /* para que text-shadow no se solape demasiado */
  /* opcional: un leve desplazamiento en hover */
  transition: transform .2s;
}
.glitch-title .letter:hover {
  transform: scale(1.1) rotate(-2deg);
}
/* Reservar ancho para espacios */
.glitch-title .letter.space {
  display: inline-block;
  width: 0.5em;        /* ajusta a cuánto quieras el espacio */
}
.glitch-title .word {
  display: inline-block;
  white-space: nowrap;
}
.hidden {
  display: none !important;
}
/* Estilo base para los botones de tiempo */
#tense-buttons .tense-button {
  background-color: #e0e0e0;    /* gris claro */
  color: #555;                  /* texto oscuro suave */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 0 4px;
  opacity: 0.5;                 /* aspecto "desactivado" */
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;           /* para posicionar el icono dentro */
  padding-right: 28px;          /* espacio para el icono */
}

/* Cuando está seleccionado, rojo y opacidad completa */
#tense-buttons .tense-button.selected {
  background-color: #d32f2f;    /* rojo vivo */
  color: #fff;                  /* texto blanco */
  border-color: #b71c1c;
  opacity: 1;
}

/* (Opcional) si quieres cambiar el cursor cuando no está activo */
#tense-buttons .tense-button:not(.selected) {
  cursor: pointer;
}
.tense-label {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #fff;              /* adjust for contrast */
  text-transform: uppercase;
}
.game-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: center;
  font-size: 0.8em;
  color: #ddd;            /* más claro para mayor contraste */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  margin-top: 10px; 
  padding: 10px 0;
}
.game-footer .feedback-link {
  color: var(--accent-color-blue);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--accent-color-blue);
  border-radius: 4px;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  filter: brightness(1.3);
  transition: background-color 0.2s, filter 0.2s;
}
.splash-footer .feedback-link {
  color: var(--accent-color-blue);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--accent-color-blue);
  border-radius: 4px;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  filter: brightness(1.3);
  transition: background-color 0.2s, filter 0.2s;
}
.game-footer .feedback-link:hover {
  background-color: rgba(255,255,255,0.1);
  filter: brightness(1.5);
}
.splash-footer .feedback-link:hover {
  background-color: rgba(255,255,255,0.1);
  filter: brightness(1.5);
}

/* Buy Me a Coffee button */
.game-footer .coffee-link {
  color: #8b0000; /* dark red text for contrast */
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid #8b0000; /* matching dark red border */
  border-radius: 4px;

  background: linear-gradient(45deg, #d4af37, #fffbcc);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.7);

  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  filter: brightness(1.2);
  transition: box-shadow 0.2s, filter 0.2s;
}
.splash-footer .coffee-link {
  color: #8b0000;
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid #8b0000;
  border-radius: 4px;
  background: linear-gradient(45deg, #d4af37, #fffbcc);
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.7);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9);
  filter: brightness(1.2);
  transition: box-shadow 0.2s, filter 0.2s;
}
.game-footer .coffee-link:hover {

  box-shadow: 0 0 8px rgba(255, 215, 0, 1);

  filter: brightness(1.3);
}
.splash-footer .coffee-link:hover {
  box-shadow: 0 0 8px rgba(255, 215, 0, 1);
  filter: brightness(1.3);
}
#left-bubbles, #right-bubbles {
  position: fixed;
  top: 0;
  width: 80px;               /* Más estrecho que antes */
  height: 100%;
  pointer-events: none;       /* No intercept clicks until activated */

  z-index: 1;
}

#left-bubbles {
  left: 100px;               /* Empieza más hacia dentro */
}

#right-bubbles {
  right: 100px;              /* También más hacia dentro */
}

.bubble {
  position: absolute;
  bottom: -50px;
  width: 100px; /* Ajusta al tamaño deseado/de la imagen */
  height: 70px; /* Ajusta al tamaño deseado/de la imagen */
  background-image: url('images/pixel_bubble.webp');
  background-size: contain; /* O 'cover', según prefieras */
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px; 
  color: white;
  font-family: inherit;
  text-align: center;
  animation: rise 8s linear forwards;
  opacity: 0.85;
  text-shadow: 1px 1px 2px #000;
  pointer-events: none;        /* Decorative bubbles shouldn't intercept clicks */
  image-rendering: pixelated;
}

@keyframes rise {
  0% {
    transform: translateY(0);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}


@media (max-width: 1300px) {
  #left-bubbles,
  #right-bubbles {
    display: none;
  }
}
.screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0, 255, 128, 0) 0%,
    rgba(0, 255, 128, 0.05) 45%,
    rgba(0, 255, 128, 0.1) 50%,
    rgba(0, 255, 128, 0.05) 55%,
    rgba(0, 255, 128, 0) 100%
  );
  animation: scan-screen 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
#game-screen::before {
  animation: scan-screen 6s linear infinite !important;
  position: fixed;
}
@keyframes scan-screen {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.screen {
  position: relative; /* ← MUY IMPORTANTE para contener el ::before */
  overflow: hidden;   /* ← Esto evita que el rayo se “escape” */
}
/* Splash buttons */
#initial-start-button,
#settings-button,
#salon-button,
#hall-of-fame-btn,
#help-button {
  font-family: var(--font-pixel);
  font-size: 1.5em;
  background-color: transparent !important;
  color: #335533 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 18px;
  margin: 10px 5px;
  cursor: pointer;
}

#initial-start-button:hover,
#settings-button:hover,
#salon-button:hover,
#hall-of-fame-btn:hover,
#help-button:hover,
#initial-start-button.selected,
#settings-button.selected,
#salon-button.selected,
#hall-of-fame-btn.selected,
#help-button.selected {
  animation: splash-blink 1s infinite;
  color: #ffffff !important;
}

#initial-start-button.electric-effect {
  animation: electric-spark 0.5s infinite alternate;
}

#confirm-mode-button.electric-effect {
  animation: electric-spark 0.5s infinite alternate;
}

#confirm-difficulty-button.electric-effect {
  animation: electric-spark 0.5s infinite alternate;
}

#end-button.electric-effect {
  animation: electric-spark 0.5s infinite alternate;
}

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


.tooltip-popup {
  display: none; 
  position: absolute; /* Positioned relative to the nearest positioned ancestor (body or a wrapper) */
  background-color: rgba(26, 42, 26, 0.8); /* 80% de opacidad */  
  color: var(--text-color);
  border: 2px solid var(--border-color); /* Match screen border */
  padding: 10px; /* Padding for the overall tooltip container */
  border-radius: 0; /* Match screen style */
  box-shadow: 4px 4px 0px rgba(0,0,0,0.5); /* Match screen shadow */
  z-index: 100; /* Ensure it's on top */
  font-size: 0.95em; /* Base font size for tooltip */
  width: auto; /* Let width adjust to content */
  max-width: 600px; /* Maximum width for the entire tooltip */
  pointer-events: none; /* Tooltip shouldn't block interactions with elements behind (if any) */
  text-shadow: 1px 1px #111; /* Consistent text shadow */
  position: fixed; /* asegura posición respecto a la pantalla */
  top: 50%;        /* centrado verticalmente */
  left: 50%;       /* centrado horizontalmente */
  transform: translate(-50%, -50%); /* truco sencillo para centrarlo perfectamente */
  max-width: 600px; /* límite del ancho para no exceder pantalla */
  width: 80%;       /* ancho adaptado a pantallas pequeñas también */
  box-sizing: border-box; /* asegura padding dentro del ancho */
  z-index: 1000;    /* muy encima para que nada tape */
  display: none;    /* inicialmente oculto */
}

/* Style for rows within the tooltip */
.tooltip-row {
    display: flex;
    justify-content: center; /* Center boxes horizontally */
    gap: 10px; /* Space between boxes in a row */
    margin-bottom: 10px; /* Space between rows */
}
.tooltip-row:last-child {
    margin-bottom: 0; /* No margin below the last row */
}


.tooltip-box {
    flex: 1; /* Allow boxes to share space equally */
    background-color: var(--container-bg); /* Match screen background */
    border: 2px solid var(--border-color); /* Match screen border */
    padding: 15px; /* Inner padding for box content */
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3); /* Match screen shadow */
    min-width: 150px; /* Minimum width to prevent excessive squeezing */
    text-align: left; /* Align text left within boxes */
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack title, p, animation vertically */
}

.tooltip-box h5 { /* Title within each box */
    font-family: var(--font-pixel);
    color: var(--title-color);
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 5px;
    text-align: center;
}

.tooltip-box p { /* Description text */
    margin-bottom: 10px;
    line-height: 1.4;
    font-size: 0.9em;
    flex-grow: 1; /* Allow paragraphs to take available space, pushing animation down */
}
.tooltip-box p:last-of-type { /* Adjust margin for last paragraph before animation */
    margin-bottom: 15px;
}

/* Styles for animation elements */
.example-prompt {
    font-size: 0.9em;
    color: #ccc; /* Lighter color for the example prompt */
    margin-bottom: 8px;
    font-style: italic;
    text-align: center;
}

.typing-animation {
    font-family: monospace; /* Monospace font looks like typing */
    font-size: 1.1em;
    color: var(--feedback-correct); 
    background-color: var(--input-bg); /* Dark background like an input field */
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    min-height: 1.5em; /* Ensure it has some height even when empty */
    text-align: center;
    white-space: pre; /* Preserve spaces in the animation */
    margin-top: auto; /* Push animation to bottom if box has extra space */
}

.typing-cursor {
    display: inline-block;
    background-color: var(--feedback-correct); /* Cursor color */
    width: 8px; /* Cursor width */
    height: 1.1em; /* Match font height */
    animation: blink 1s step-end infinite;
    vertical-align: bottom; /* Align cursor nicely with text baseline */
    margin-left: 2px; /* Small space before cursor */
}

@keyframes blink {
    from, to { background-color: transparent } /* Invisible state */
    50% { background-color: var(--feedback-correct); } /* Visible state */
}

/* Table style for tense tooltips */
.tense-tooltip-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  border: 1px solid var(--border-color);
}
.tense-tooltip-table th,
.tense-tooltip-table td {
  border: 1px solid var(--border-color);
  padding: 4px 6px;
}
.tense-tooltip-table th {
  background: linear-gradient(#3f5f3f, #2b472b);
  color: #e6ffe6;
  text-shadow: 1px 1px #000;
}
.tense-tooltip-table td {
  background-color: #223322;
  color: var(--text-color);
}
.tense-tooltip-table tr:nth-child(even) td {
  background-color: #273a27;
}

.irregular-tooltip-table th:nth-child(1) {
  background-color: var(--feedback-correct);
  color: #000;
  text-shadow: 1px 1px #fff;
}
.irregular-tooltip-table th:nth-child(2) {
  background-color: var(--accent-color-red);
  color: #000;
  text-shadow: 1px 1px #fff;
}
.irregular-tooltip-table th:nth-child(3) {
  background-color: var(--accent-color-blue);
  color: #000;
  text-shadow: 1px 1px #fff;
}

/* Conjugation boxes used in irregularity tooltips */
.conjugation-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.conjugation-box {
  border: 1px solid var(--border-color);
  background-color: var(--container-bg);
  padding: 4px;
  font-size: 0.9em;
}
.conjugation-box caption {
  font-weight: bold;
  color: var(--title-color);
  margin-bottom: 2px;
  text-align: left;
}
.conjugation-box td {
  padding: 2px 4px;
}
.irregular-highlight {
  font-weight: bold;
  text-decoration: underline;
  color: var(--accent-color-red);
}






 body.tooltip-open-no-scroll {
  overflow: hidden !important; /* Previene el scroll en el body */
}


@media (max-width: 600px) {
	#tooltip.tooltip-popup {
	  position: fixed !important;
	  top: 50% !important;
	  left: 50% !important;
	  transform: translate(-50%, -50%) !important;
	  
	  width: 90vw !important; /* Ancho del 90% del viewport */
	  max-width: 450px !important; /* Un máximo para que no sea demasiado ancho en tablets pequeñas en esta vista */
	  padding: 10px !important; 
	  height: auto !important; /* La altura se ajustará al contenido */
	  max-height: 90vh !important; /* Altura máxima del 90% del viewport */
	  
	  overflow-y: auto !important; /* Mantenemos esto por si acaso, pero idealmente no se necesitará si todo cabe */
	  -webkit-overflow-scrolling: touch; 
	  
	  background-color: rgba(26, 42, 26, 0.98) !important; 
	  color: var(--text-color);
	  border: 2px solid var(--border-color);
	  box-shadow: 4px 4px 0px rgba(0,0,0,0.5);
	  z-index: 1001 !important; 
	  
	  padding: 0px !important; /* Padding interno reducido */
	  box-sizing: border-box !important;
	  
	  font-size: 0.82em !important; /* Reducir tamaño de fuente base DENTRO del tooltip */
	  line-height: 1.3 !important; /* Ajustar altura de línea para la nueva fuente */
	}
  
    background-color: var(--accent-color-red); /* Para que parezca un botón de acción */
    color: white;
    border-radius: 4px; /* Pequeño redondeo */
    padding: 8px 20px;  /* Padding para hacerlo más clickeable */
    margin-top: 20px;   /* Espacio entre el contenido y el botón */
    font-size: 1.1em;   /* Un tamaño de fuente más de "botón" */
    font-weight: normal;
    text-shadow: none;    /* Quitar la sombra de texto si la tiene */
    align-self: center; /* Centrar el botón si el modal es flex container */
    width: auto;        /* Ancho automático según el texto */
    display: inline-block; /* Para que width: auto funcione bien con text-align: center del padre si lo tuviera */
  }
	    #verb-dropdown-menu {
        width: 90vw; /* Que ocupe el 90% del ancho de la pantalla */
        max-width: 350px; /* Un máximo absoluto para que no sea demasiado ancho en móviles "grandes" */
        left: 50%;
        transform: translateX(-50%); /* Estas dos líneas centran el menú si tiene position: absolute/fixed */
        right: auto; /* Asegúrate de anular 'right' si estaba definido */
        box-sizing: border-box; /* Importante para que el padding/border no lo hagan más ancho */
        max-height: 70vh; 
    }
	
	#verb-buttons .verb-button {
        font-size: 13px; /* Reduce el tamaño de fuente general del botón */
        padding: 6px 8px; /* Ajusta el padding si es necesario */
    }
    .verb-type-button {
        padding-top: 4px;    
        padding-bottom: 4px; 
	}
	.verb-type-name {
	  font-size: 1em; 
	  font-weight: bold; 
	  color: var(--title-color);
	  display: block; 
	  margin-bottom: 2px; 
	  /* text-shadow: 2px 2px #111; */ /* Comenta o reduce esto */
	  text-shadow: 1px 1px #111; /* O prueba una sombra más sutil */
	}
    .verb-type-button .verb-type-hint {
        font-size: 10px;     
        line-height: 1;    /* Reduce la altura de línea para la pista. */
        display: block;      /* Asegura que ocupe su propia línea (aunque <br> ya lo hace) */
        margin-top: 1px;     
    }	
    #verb-buttons .verb-button .label {
        font-size: 13px; 
    }
	    #pronoun-dropdown-menu {
        position: absolute;
        width: 90vw;        
        max-width: 250px;   

        box-sizing: border-box;

        /* ANCLAR AL LADO DERECHO DE LA PANTALLA */
        right: 5vw;       /* Posiciona el borde derecho del menú a 5% del borde derecho de la pantalla */
                          /* O un valor fijo como '10px' si prefieres: right: 10px; */
        left: auto;       /* Anula cualquier posicionamiento izquierdo para que 'right' tenga precedencia */
        transform: none;  /* Si estabas usando transform: translateX(-50%) para centrar otros menús,
                               anúlalo aquí ya que estamos alineando a la derecha. */
        
        /* Estilos para el scroll interno y altura máxima */
        max-height: 60vh; /* Que no ocupe más del 60% de la altura de la pantalla */
        /* Si el contenido total del menú (incluyendo el botón "All pronouns" y la lista) 
           necesita scroll, puedes añadir overflow-y: auto; aquí. */
    }

    /* Para la lista específica de botones de pronombres dentro del menú */
    #pronoun-buttons {
        max-height: 200px;  /* Ajusta según la cantidad de botones y el espacio deseado. 
                               Podrías usar también unidades vh, ej: 30vh o 40vh */
        overflow-y: auto;   /* Habilita el scroll vertical para la lista */
        overflow-x: hidden; /* Previene el scroll horizontal */
    }
	#tense-dropdown-menu {
        /* Asumimos que ya tiene position: absolute; de una regla general para .dropdown-menu */
        
        width: auto;        /* Permitir que el contenido defina el ancho inicial */
        min-width: 200px;   /* Un ancho mínimo para que no se vea demasiado apretado. Ajusta según necesidad. */
        max-width: 260px;
		box-sizing: border-box;
		max-height: 60vh;
   }
    #tense-buttons {
        max-height: 250px;  /* Ajusta la altura máxima para la lista de botones.
                               Unidades como 35vh o 40vh también podrían funcionar. */
        overflow-y: auto;   /* Habilita el scroll vertical para la lista de tiempos */
        overflow-x: hidden; /* Previene el scroll horizontal */
    }
.tooltip-content-wrapper {
  display: flex !important;         /* <<<< Convertir en contenedor flex */
  flex-direction: row !important;  /* <<<< Para poner las "filas" (ahora columnas) una al lado de la otra */
  gap: 8px !important;             /* Espacio entre las dos columnas */
}

.tooltip-row { /* Cada .tooltip-row ahora actúa como una columna en móvil */
  flex-direction: column !important; /* Los .tooltip-box dentro de esta "columna" se apilan verticalmente */
  flex: 1 !important;                /* Cada "columna" toma la mitad del espacio */
  margin-bottom: 0 !important;       /* Quitar margen inferior ya que ahora son columnas */
  gap: 8px !important;               /* Espacio entre los tooltip-box dentro de esta "columna" */
}

/* Títulos de Columna (opcional, si los añades en el HTML como te sugerí para la versión de 2 columnas) */
/* Si no los usas, puedes ignorar este .tooltip-column-title */
.tooltip-column-title {
  font-family: var(--font-pixel);
  color: var(--accent-color-blue);
  font-size: 1.1em !important; /* Relativo al font-size del tooltip */
  text-align: center;
  margin-bottom: 6px !important;
  padding-bottom: 3px !important;
  border-bottom: 1px solid var(--border-color);
  /* Añadir order para asegurar que el título va primero en cada columna si reestructuras más el HTML */
  /* order: -1; */ 
}


#tooltip .tooltip-box {
  padding: 8px !important; 
  min-width: 0; /* Permitir que las cajas se encojan */
  /* No necesitan flex: 1 aquí si .tooltip-row (ahora columna) es column flex */
}

/* Ajustes de fuente y padding para el contenido DENTRO de las cajas en MÓVIL */
#tooltip .tooltip-box h5 {
  font-size: 1.05em !important; 
  margin-bottom: 5px !important;
}

#tooltip .tooltip-box p {
  font-size: 0.95em !important; 
  line-height: 1.25 !important;
  margin-bottom: 5px !important;
}
#tooltip .tooltip-box p:last-of-type {
    margin-bottom: 8px !important;
}

#tooltip .example-prompt {
    font-size: 0.85em !important; 
    margin-bottom: 4px !important;
}

#tooltip .typing-animation {
    font-size: 0.9em !important; 
    padding: 3px 5px !important;
    min-height: 1.1em !important;
}
#tooltip .typing-cursor {
    height: 0.9em !important;
    width: 5px !important;
}
#tooltip #close-tooltip-btn {
    font-size: 0.9em !important;
    padding: 6px 10px !important;
    margin-top: 10px !important;
}
  #tooltip .tooltip-box {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 2px !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
  }
  #tooltip .tooltip-box h5 {
    font-size: 1.1em !important; /* Ajustar tamaño del título */
    margin-bottom: 8px !important;
    padding-bottom: 2px !important;
  }

  /* Párrafos dentro de cada caja del Tooltip */
  #tooltip .tooltip-box p {
    font-size: 0.9em !important; /* Ajustar tamaño del texto */
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
  }
  #tooltip .tooltip-box p:last-of-type {
    margin-bottom: 2px !important;
  }

  /* Contenido de ejemplo (prompt y animación) */
  #tooltip .example-prompt {
    font-size: 0.85em !important;
    margin-bottom: 2px !important;
  }

  #tooltip .typing-animation {
    font-size: 0.95em !important; /* Ajustar tamaño de la animación de texto */
    padding: 4px 6px !important;
    white-space: pre-wrap !important; /* MUY IMPORTANTE: permite que el texto largo se ajuste */
                                     /* en lugar de desbordar la caja. */
    word-break: break-all; /* Forzar quiebre de palabras si es necesario */
  }

  /* Cursor de la animación de tipeo */
  #tooltip .typing-cursor {
    height: 1em !important; /* Ajustar altura del cursor */
    width: 6px !important;
  }
  #tooltip #close-tooltip-btn {
    font-size: 1em !important; /* Relativo al font-size del tooltip */
    padding: 8px 12px !important;
    margin-top: 10px !important;
 }

 @keyframes electric-spark {
  0%   { box-shadow: 0 0 2px #ffea00, 0 0 5px #ffea00; }
  50%  { box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700; }
  100% { box-shadow: 0 0 2px #ffea00, 0 0 5px #ffea00; }
}

#final-start-game-button:hover,
.start-button:hover,
#confirm-mode-button:hover,
#confirm-difficulty-button:hover,
#end-button:hover {
  animation: electric-spark 0.5s infinite alternate;
}

@keyframes glitch {
  0% { clip-path: var(--slice-1); transform: translate(-20px, -10px); }
  10% { clip-path: var(--slice-3); transform: translate(10px, 10px); }
  20% { clip-path: var(--slice-1); transform: translate(-10px, 10px); }
  30% { clip-path: var(--slice-3); transform: translate(0px, 5px); }
  40% { clip-path: var(--slice-2); transform: translate(-5px, 0px); }
  50% { clip-path: var(--slice-3); transform: translate(5px, 0px); }
  60% { clip-path: var(--slice-4); transform: translate(5px, 10px); }
  70% { clip-path: var(--slice-2); transform: translate(-10px, 10px); }
  80% { clip-path: var(--slice-5); transform: translate(20px, -10px); }
  90% { clip-path: var(--slice-1); transform: translate(-10px, 0px); }
  100% { clip-path: var(--slice-1); transform: translate(0); }
}

.start-button.glitch-effect,
.start-button.glitch-effect::after {
  width: 100%;
  height: 100%;
  line-height: inherit;
  font-family: var(--font-pixel);
  background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  box-shadow: 6px 0px 0px #00E6F6;
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.start-button.glitch-effect::after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
  text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
  animation: glitch 0.7s steps(2, end);
  pointer-events: none;
}

#timer-clock {
  position: relative;       /* para que el .time-change se posicione respecto a este */
  display: inline-block;    /* tamaño ajustado al contenido del reloj */
}

#timer-clock .time-change {
  position: absolute;
  top: 50%;                 /* centrado vertical respecto al reloj */
  left: 100%;               /* justo a la derecha */
  transform: translate(0, -50%);
  background: #e0e0e0;
  padding: 6px 12px;        /* agranda la caja */
  border-radius: 4px;
  font-size: 16px;          /* tamaño legible */
  font-weight: bold;
  white-space: nowrap;      /* para que no se parta la línea */
  pointer-events: none;
  opacity: 0;               /* oculto por defecto */
  transition: opacity 0.3s ease;
}

#timer-clock.show-time-change .time-change {
  opacity: 1;               /* al poner la clase, aparece con transición */
}

#timer-container {
  display: flex;
  justify-content: center;   /* centrado horizontal */
  align-items: center;       /* alineado vertical */
  gap: 4px;                  /* separación entre cajas reducida */
  margin: 4px auto;          /* menor espacio vertical */
}

/* Barra superior con mecánicas de juego */
#game-mechanics-bar {
  width: 100%;
  margin-bottom: 4px; /* Espacio antes del tablero de juego reducido */
  padding: 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ——— Estilo común a los tres recuadros ——— */
.timer-item {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.5rem;         /* ajusta a tu gusto */
  padding: 8px 16px;         /* mismo padding para todos */
  border-radius: 8px;
  font-family: inherit;
  text-align: center;        /* centra el texto interno */
  min-width: 120px;          /* fuerza anchuras similares */
  box-sizing: border-box;
  white-space: nowrap;
}
.timer-item#time-change {
  /* tamaño idéntico, pero permite color dinámico */
  min-width: 60px;
  text-align: center;
}
.timer-item#time-change { min-width: 60px; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

#time-change.vibrate {
  animation: shake 0.5s ease-in-out;
}

#question-prompt.prize-verb-active {
  border: 3px solid gold; /* Marco brillante */
  box-shadow: 0 0 15px gold, 0 0 5px yellow inset; /* Efecto de brillo */
  animation: pulsePrize 1.5s infinite;
}

.prize-indicator { /* Para el texto/emoji "🎁 Premio!" */
  color: gold;
  font-weight: bold;
  margin-right: 10px;
  animation: blinkPrizeIndicator 1s infinite;
}

@keyframes pulsePrize {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes blinkPrizeIndicator {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* Para el “pop” en el contador */
@keyframes pop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
.just-gained {
  animation: pop 0.5s ease-out;
}

/* Canvas de confeti, dentro de #game-screen con position:relative */
#game-screen {
  position: relative;      /* en lugar de fixed */
  /*width: 100vw;
  height: 100vh;*/
  min-height: auto;
  overflow-y: auto;
  max-width: 800px;
  margin: 0 auto;  
  padding: 20px; /* Añadir padding interno si no lo hereda o lo quieres específico */
  display: none;
}
#life-confetti-canvas {
  position: fixed;             /* fijo al viewport, no al contenedor */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100vh;
  display: none;               /* igual que antes */
  pointer-events: none;
  z-index: 1000;
}

/* Al activar el modo juego, deshabilita scroll exterior */
body.game-active, html.game-active {
  overflow: hidden;
  height: 100%;
}

.life-heart {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-image: url('images/heart.webp');
  background-size: cover;
  margin: 0 2px;
}
#prize-note {
  margin-top: 8px;
  font-size: 0.9rem;
  color: gold;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
  animation: prize-pulse 1s infinite alternate;
}
@keyframes prize-pulse {
  from { opacity: 1; }
  to   { opacity: 0.6; }
}
/* Helpers */
.invisible { visibility: hidden !important; }

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background-color: var(--accent-color-red);
  color: var(--title-color);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 1em;
  border-radius: 0;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  user-select: none;
}

/* Panel desplegable */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background-color: var(--container-bg);
  border: 1px solid var(--border-color);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  padding: 12px;
  width: 280px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
}

/* Encabezado del panel */
.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dropdown-title {
  font-family: var(--font-pixel);
  color: var(--title-color);
  font-size: 1.1em;
}


body.dropdown-open .dropdown-menu {
  display: block;
}
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dropdown-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pronoun-group-button {
  background-color: #444;          
  color: white;
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  margin-bottom: 6px;
  width: 100%;
  text-align: left;
  opacity: 0.5;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}


.pronoun-group-button.selected {
  background-color: #1976d2;        
  opacity: 1;
  
}
#verb-dropdown-menu #verb-buttons .verb-button {
  color: white;
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  margin-bottom: 6px;
  width: 100%;
  text-align: left;
  opacity: 0.6;                 
  cursor: pointer;
  transition: background-color 0.2s, background-image 0.2s, border-color 0.2s, opacity 0.2s, transform 0.1s ease;
  border-radius: 6px; /* Añadido de tus estilos posteriores para consistencia */
  display: flex;      /* Añadido de tus estilos posteriores */
  align-items: center;/* Añadido de tus estilos posteriores */
  font-size: 0.85rem; /* Tomado de .verb-buttons-list .verb-button */
}

#verb-dropdown-menu #verb-buttons .verb-button.selected {    
  opacity: 1;
}

#verb-dropdown-menu {
  width: 250px;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#verb-dropdown-menu .dropdown-header {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
  justify-content: space-between;
}
.select-all-button,
.select-groups-button {
  font-size: 0.9rem;
  padding: 4px 8px;
}
.groups-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 8px;
}
.group-button {
  flex: 1 1 45%;
  font-size: 0.85rem;
  padding: 4px 6px;
  background: var(--bg-dark);
  color: var(--fg);
  border: 1px solid var(--border-color);
  cursor: pointer;
}
.group-button:hover {
  background: var(--accent);
  color: white;
}
.search-container {
  padding: 4px 0;
}
/* Para el botón "Seleccionar/Deseleccionar Todos los Tiempos" */
#select-all-tenses {
    display: block; /* Hace que el botón ocupe toda la línea */
    width: 100%;    /* Asegura que se extienda a todo el ancho disponible */
    box-sizing: border-box; /* Para que el padding y borde no añadan al ancho total */
    margin-bottom: 10px; /* Espacio entre este botón y los botones de tiempo individuales debajo */
    /* Puedes ajustar el padding o text-align si es necesario,
       por ejemplo, si quieres el texto centrado:
       text-align: center;
    */
}

/* Para el botón "Seleccionar/Deseleccionar Todos los Pronombres" */
#select-all-pronouns {
    display: block; /* Hace que el botón ocupe toda la línea */
    width: 100%;    /* Asegura que se extienda a todo el ancho disponible */
    box-sizing: border-box; /* Para que el padding y borde no añadan al ancho total */
    margin-bottom: 10px; /* Espacio entre este botón y los botones de pronombres individuales debajo */
    /* Puedes ajustar el padding o text-align si es necesario:
       text-align: center;
    */
}
#verb-search {
    background-color: #ffffff; /* Fondo blanco */
    color: #333333;           /* Texto oscuro (gris oscuro) */
    border: 1px solid #cccccc; /* Borde estándar gris claro */
    padding: 8px 10px;         /* Un poco de padding interno */
    border-radius: 5px;      /* Bordes ligeramente redondeados */
    box-sizing: border-box;  /* Asegura que el padding y borde no aumenten el tamaño total */
    width: 100%;             /* Ocupa el ancho disponible en su contenedor */
    margin-bottom: 10px;     /* Espacio debajo, si es necesario */
}
#verb-search::placeholder {
    color: #999999; /* Color del placeholder un poco más claro */
    opacity: 1; /* Para asegurar visibilidad en todos los navegadores */
}
.verb-buttons-list {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
}
.verb-buttons-list .verb-button {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  padding: 4px 6px;
  margin-bottom: 2px;
  font-size: 0.8rem;
  margin: 0;
  border-radius: 4;
  height: 30px; 
}

#verb-buttons .verb-button .tick {
  display: inline-flex;   /* Para centrar la marca ✓ con flexbox */
  align-items: center;
  justify-content: center;
  
  width: 1em;             /* Tamaño de la caja del tick, relativo al font-size del botón */
  height: 1em;
  
  background-color: rgba(0, 0, 0, 0.2); /* Fondo oscuro sutil para la caja vacía */
  border: 1px solid var(--text-color-light, white); /* Borde blanco/claro para que se vea el cuadrado */
  border-radius: 3px;
  
  margin-right: 0.7em;    /* Espacio a la derecha del tick */
  flex-shrink: 0;         /* Evita que la caja se encoja */
  
  /* Asegurarse de que el contenido del pseudo-elemento ::before sea el que aparezca */
  color: transparent; /* Oculta cualquier texto que pudiera haber en el span.tick directamente */
  overflow: hidden;   /* Para asegurar que el ::before no se salga si es muy grande */
}

/* 2. La marca de verificación (✓) que aparece DENTRO del .tick cuando .verb-button tiene .selected */
#verb-buttons .verb-button.selected .tick::before {
  content: '✔';         /* Carácter Unicode para la marca (✔). Puedes usar '\\2713' para ✓ */
  color: var(--text-color-light, white); /* Color de la marca ✓. Debe contrastar con el fondo del .tick */
  font-size: 0.8em;          /* Tamaño de la marca ✓, un poco más pequeña que la caja .tick */
  font-weight: bold;
  line-height: 1;            /* Para ayudar a centrarla verticalmente */
  font-family: sans-serif;   /* Usar una fuente genérica para asegurar buena visualización del checkmark */
}

/* 3. Estilo de la cajita .tick cuando el verbo está seleccionado */
#verb-buttons .verb-button.selected .tick {
  background-color: transparent; /* Hacemos el fondo de la caja transparente */
                                 /* El color de fondo será el del botón padre (.verb-button-ar, etc.) */
  border-color: transparent;     /* También hacemos el borde de la caja transparente */
                                 /* De esta forma, solo se verá la marca ✓ blanca sobre el color del botón */
  /* Si prefieres que la caja del tick tenga su propio color de fondo cuando está seleccionada: */
  /* background-color: var(--accent-color-green, #4CAF50); */ /* Ejemplo: fondo verde */
  /* border-color: var(--accent-color-green-dark, #388E3C); */ /* Ejemplo: borde verde oscuro */
}
.verb-buttons-list .verb-button:hover {
  background: var(--bg-dark-light);
}

.glitch-title .letter.big-letter {
  font-size: 1.4em;     
  line-height: 1;       
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: pixelated;
}

.header-city {
  position: absolute;
  bottom: -5px;              
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.header-char {
  position: absolute;
  bottom: -10px;        
  right: -200px;        
  transform: scale(0.15);
  transform-origin: bottom right;
  width: auto;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* ——————————————
   TÍTULO: siempre encima
—————————————— */
.main-header {
  position: relative;
  text-align: center;
  margin: 5px 0;
  overflow: hidden;
  padding-bottom: 120px;
}

/* ——————————————
   KEYFRAMES
—————————————— */
@keyframes slideUpCity {
  from { bottom: -120px; }
  to   { bottom: -5px; }
}
@keyframes slideInChar {
  from { right: -200px; }
  to   { right: 30px; }
}

.main-header.animate .header-city {
  animation: slideUpCity 1.5s ease-out forwards;
}
.main-header.animate .header-char {
  animation: slideInChar 1s ease-out 0.7s forwards;
}
/* 1) Estado “no seleccionado” (por defecto) */
.group-button {
  background: #2a2f25;      /* verde oscuro apagado */
  color: #bbb;              /* texto gris claro */
  border: 1px solid #3a4a38;
  cursor: pointer;
  transition: 
    background 0.2s, 
    color 0.2s, 
    box-shadow 0.2s;
}

/* 2) Estado hover (cuando pasas el ratón) */
.group-button:hover:not(.active) {
  background: #3e4e3c;      /* un poco más claro */
}

/* 3) Estado activo GENERAL (fallback genérico) */
.group-button.active {
  color: #fff;
  box-shadow: none;
}

/* 4) “Todos” — fondo blanco con texto negro */
.group-button[data-group="all"].active {
  background: #fff;
  color: #000;
}

/* 5) “Reflexivos” — gradiente + glow como antes */
.group-button[data-group="reflexive"].active {
  background: linear-gradient(135deg, #ff6ec4, #7873f5);
  box-shadow: 0 0 8px rgba(255,110,196,0.6);
}

/* 6) “-ar” — verde brillante */
.group-button[data-group="ar"].active {
  background: #4caf50;
  box-shadow: 0 0 6px rgba(76,175,80,0.6);
}

/* 7) “-er” — azul */
.group-button[data-group="er"].active {
  background: #1976d2;
  box-shadow: 0 0 6px rgba(33,150,243,0.6);
}

/* 8) “-ir” — púrpura */
.group-button[data-group="ir"].active {
  background: #9c27b0;
  box-shadow: 0 0 6px rgba(156,39,176,0.6);
}
#verb-dropdown-menu,
#verb-buttons {
  max-height: 600px; /* O un valor que deje espacio para el groups-panel y search */
  overflow-x: hidden;      /* no permitimos desplazamiento horizontal */
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Ajusta anchura si sigue cambiando: */
#verb-dropdown-menu {
  width: 210px;            /* ajústalo a tu gusto para que no desborde */
}

/* ── 2) Redondear esquinas de los verb-buttons ── */
.verb-button {
  display: flex;           
  align-items: center;     
  border-radius: 6px;    
  padding: 4px 8px;       
  font-size: 0.9rem;
  color: var(--text-color-light, white); /* Texto claro si los fondos son oscuros */
  border: 1px solid transparent; /* Borde base, se puede sobreescribir */
  transition: background-color 0.2s ease, background-image 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

/* Si quieres redondear también el dropdown en su conjunto: */
#verb-dropdown-menu {
  border-radius: 6px;
}

/* ── 3) Opcional: recortar un pelín el padding interno ── */
.verb-button {
  display: flex;
  padding: 4px 8px;        /* menos padding horizontal para que no desborde */
  font-size: 0.85rem;      /* también más compacto si lo deseas */
}

.verb-button .tick {
  display: inline-flex;   /* Para alinear y centrar el contenido (la marca ✓) */
  align-items: center;    /* Centrado vertical del ✓ */
  justify-content: center;/* Centrado horizontal del ✓ */

  width: 1.1em;           
  height: 1.1em;          

  border: 1px solid var(--border-color, #555); /* Borde de la cajita */
  background-color: rgba(0,0,0,0.2); /* Un fondo sutil para la cajita vacía */
  border-radius: 3px;     /* Bordes ligeramente redondeados para la cajita */

  margin-right: 0.6em;    /* Espacio entre la cajita y el texto del verbo */
  color: transparent;     /* Por si acaso, para ocultar cualquier contenido de texto directo */

  flex-shrink: 0;         /* Evita que la cajita se encoja si el texto del verbo es largo */
  transition: background-color 0.2s, border-color 0.2s; /* Transición suave */
}
.verb-button.selected .tick::before {
  content: '\\2714';         /* Carácter Unicode para la marca de verificación (✔) */
                             /* Puedes probar también con '\\2713' (✓) si prefieres otro estilo de tick */
  color: white;              
                             /* Si algunos fondos de botón son muy claros, podrías necesitar un color oscuro. */
  font-size: 0.85em;         /* Tamaño de la marca ✓ dentro de su cajita */
  line-height: 1;            /* Ayuda a centrarla si es necesario */
  font-weight: bold;         /* Para que la marca sea más visible */
}
.verb-button.selected .tick {
  background-color: var(--accent-color-green, #4CAF50); /* Ejemplo: Fondo verde para la cajita del tick seleccionado */
  border-color: var(--accent-color-green, #388E3C);     /* Borde verde más oscuro */
}
/* Verbos -AR (Verde) */
.verb-button-ar {
    background-color: var(--accent-color-green, #4CAF50);
    border-color: #388E3C; /* Un verde un poco más oscuro para el borde */
}
.verb-button-ar:hover {
    background-color: #5cb85c; /* Un verde más claro para hover */
    border-color: #4CAF50;
}

/* Verbos -ER (Azul - como están ahora) */
.verb-button-er {
    background-color: #2196F3;
    border-color: #1976D2; /* Un azul un poco más oscuro para el borde */
}
.verb-button-er:hover {
    background-color: #64B5F6; /* Un azul más claro para hover */
    border-color: #2196F3;
}

/* Verbos -IR (Morado) */
.verb-button-ir {
    background-color: var(--accent-color-purple, #673AB7);
    border-color: #512DA8; /* Un morado un poco más oscuro para el borde */
}
.verb-button-ir:hover {
    background-color: #7E57C2; /* Un morado más claro para hover */
    border-color: #673AB7;
}

/* Verbos Reflexivos (-SE) (Degradado Rosa-Lila) */
.verb-button-reflexive {
    background-image: linear-gradient(to right, var(--accent-color-purple, #673AB7), var(--accent-color-pink, #E91E63));
    border: 1px solid var(--accent-color-pink, #E91E63); /* Borde basado en uno de los colores del degradado */
}
.verb-button-reflexive:hover {
    /* Para el hover en degradados, a veces es más fácil oscurecerlo un poco o cambiar la intensidad */
    /* Podrías usar box-shadow o un ligero cambio en la opacidad o un degradado ligeramente diferente */
    background-image: linear-gradient(to right, #7E57C2, #EC407A); /* Versión ligeramente más clara/brillante */
    border-color: #EC407A;
}
.verb-button:active {
    transform: translateY(1px);
}
.verb-button-ar:active { background-color: #388E3C; }
.verb-button-er:active { background-color: #1976D2; }
.verb-button-ir:active { background-color: #512DA8; }
.verb-button-reflexive:active {
    background-image: linear-gradient(to right, #512DA8, #C2185B); /* Versión más oscura */
}

/* 3) Ajuste de la etiqueta para que no se descuelgue */
.verb-button .label {
  flex: 1 1 auto;
  overflow: hidden;
  
}

.search-no-results {
  padding: 10px;
  text-align: center;
  color: #aaa; /* Un color un poco apagado */
  font-style: italic;
  font-size: 0.9em;
}

#pronoun-buttons .pronoun-group-button {
  font-family: var(--font-pixel);
  font-size: 0.95rem;     
  padding: 5px 8px;      
  margin: 3px;            
  width: auto;            
  display: inline-block;  
  text-align: center;
  min-height: auto;  
  flex-direction: row;
  box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}

#pronoun-buttons.verb-type-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
  gap: 5px; 
}
#verb-groups-panel .group-button[data-group="reflexive"] {
    flex-basis: 100%; 
}
.select-all-button {
    background-color: #FFC107;  /* Amarillo ámbar (Material Design) - ¡REEMPLAZA SI ENCUENTRAS EL TUYO! */
    color: #212529;              /* Texto oscuro para buen contraste */
    border: 1px solid #FFA000;   /* Borde ámbar más oscuro - ¡REEMPLAZA SI ENCUENTRAS EL TUYO! */
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease;

    /* Estilos para que ocupe toda la línea */
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px; 
}

.select-all-button:hover {
    background-color: #FFCA28;  /* Un poco más claro para hover - ¡AJUSTA SEGÚN TU COLOR BASE! */
    border-color: #FFB300;       /* ¡AJUSTA SEGÚN TU COLOR BASE! */
}

.select-all-button:active {
    background-color: #FFA000;  /* Un poco más oscuro para active - ¡AJUSTA SEGÚN TU COLOR BASE! */
    transform: translateY(1px);
}
.select-groups-button { /* O #verb-groups-button si prefieres más especificidad */
    /* Mantén o define su color de fondo y texto distintivo si ya lo tiene. Ejemplo: */
    background-color: #D32F2F; /* Un rojo estándar, ajústalo al tuyo si es diferente */
    color: white;
    border: 1px solid #B71C1C; /* Un borde rojo más oscuro */

    /* Propiedades para igualar la forma y tamaño con .select-all-button */
    padding: 8px 12px;         /* IGUALA este padding al de .select-all-button */
    border-radius: 5px;        /* IGUALA este border-radius al de .select-all-button */
    font-weight: 500;          /* IGUALA este font-weight si quieres la misma "grosura" de texto */

    /* Otras propiedades comunes de botón */
    text-align: center;
    cursor: pointer;
    line-height: normal;       /* Ayuda a alinear el texto verticalmente de forma consistente */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    vertical-align: middle;    /* Puede ayudar si están en línea y tienen alturas ligeramente diferentes */
}

.select-groups-button:hover {
    background-color: #E53935; /* Un rojo un poco más claro para el hover */
    border-color: #C62828;
}

.select-groups-button:active {
    background-color: #B71C1C; /* Rojo más oscuro para el estado activo/clic */
    transform: translateY(1px);
}
/* Para todas las barras de scroll (principal de la página y de elementos internos) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
#verb-buttons::-webkit-scrollbar,
#tense-buttons::-webkit-scrollbar,
#pronoun-buttons::-webkit-scrollbar,
#tooltip::-webkit-scrollbar { /* Añade otros selectores de elementos con scroll si es necesario */
    width: 10px;  /* Ancho de la barra de scroll vertical */
    height: 10px; /* Altura de la barra de scroll horizontal (si la hay) */
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
#verb-buttons::-webkit-scrollbar-track,
#tense-buttons::-webkit-scrollbar-track,
#pronoun-buttons::-webkit-scrollbar-track,
#tooltip::-webkit-scrollbar-track {
    background: var(--container-bg, #2a3a2a); /* Color del riel (la base de la barra) */
    border-radius: 0; /* Esquinas cuadradas para un look más retro/pixelado */
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
#verb-buttons::-webkit-scrollbar-thumb,
#tense-buttons::-webkit-scrollbar-thumb,
#pronoun-buttons::-webkit-scrollbar-thumb,
#tooltip::-webkit-scrollbar-thumb {
    background-color: var(--accent-color-green, #4CAF50); /* Color del pulgar (la parte móvil) */
    border-radius: 0; /* Esquinas cuadradas */
    border: 1px solid var(--bg-color, #1a2a1a); /* Un borde sutil alrededor del pulgar */
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
#verb-buttons::-webkit-scrollbar-thumb:hover,
#tense-buttons::-webkit-scrollbar-thumb:hover,
#pronoun-buttons::-webkit-scrollbar-thumb:hover,
#tooltip::-webkit-scrollbar-thumb:hover {
    background-color: #5cb85c; /* Un verde un poco más claro al pasar el ratón */
}

/* Estilos de la barra de scroll para Firefox */
html, 
body, 
.dropdown-menu, 
#verb-buttons, 
#tense-buttons, 
#pronoun-buttons, 
#tooltip { /* Aplica a los elementos que puedan tener scroll */
    scrollbar-width: thin; /* Opciones: 'auto', 'thin', 'none' */
    scrollbar-color: var(--accent-color-green, #4CAF50) var(--container-bg, #2a3a2a); /* color del pulgar, color del riel */
}
/* --- Nuevo Modal Específico --- */
.specific-modal-backdrop {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Más oscuro, 80% opacidad */
  z-index: 1050; /* Encima del backdrop del tooltip general si ambos estuvieran activos */
}

.specific-modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85vw; /* Más ancho */
  max-width: 700px; /* Un máximo razonable */
  height: 75vh; /* Más alto */
  max-height: 600px; /* Un máximo razonable */
  background-color: var(--container-bg);
  color: var(--text-color);
  border: 2px solid var(--accent-color-blue);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  z-index: 1051; /* Encima de su propio backdrop */
  padding: 20px; /* Padding uniforme en top, left, right */
  padding-bottom: 60px;
  box-sizing: border-box;
  display: flex; /* Para organizar el contenido y el botón de cerrar */
  flex-direction: column;
}

.specific-modal-content {
  flex-grow: 1; /* Hace que esta área ocupe el espacio disponible */
  overflow-y: auto; /* Scroll si el contenido excede la altura */
  padding-right: 15px; /* Espacio para la barra de scroll, si aparece */
  font-size: 1.1em;
  line-height: 1.4;
  font-size: 0.9em;
}

.specific-modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 2.5em; /* Más grande */
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
#name-entry-modal {
  width: 80vw;
  max-width: 640px;
  height: 50vh;
  max-height: 460px;
  padding: 30px;
  padding-bottom: 40px;
  font-size: 1.2em;
}

#name-entry-message {
  font-size: 1.4em;
}

.specific-modal-close-btn:hover {
  color: var(--accent-color-red);
}

/* Modal for entering player's name */
#name-entry-modal input[type="text"] {
  font-family: var(--font-pixel);
  font-size: 1.2em;
  background-color: var(--input-bg);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 8px 10px;
  width: calc(100% - 22px);
  margin-bottom: 15px;
  border-radius: 0;
}

#name-entry-modal button.name-submit {
  font-family: var(--font-pixel);
  padding: 10px 20px;
  background-color: var(--accent-color-blue);
  color: var(--bg-color);
  border: 1px solid var(--border-color);
  cursor: pointer;
}
#name-entry-modal button.name-submit:hover {
  background-color: var(--accent-color-red);
}

.context-info-icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-image: url('images/iconquestion.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: help;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.5)); /* Sombra sutil */
  transition: transform 0.3s ease-out, filter 0.2s ease-out; /* Transición para filter también */
  text-shadow: none !important;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges; /* Para Firefox */
  image-rendering: crisp-edges;    /* Estándar */
}

.context-info-icon:hover {
  animation: spinAndFloat 1.2s ease-in-out infinite;

   filter: brightness(1.5) drop-shadow(1px 1px 1px rgba(0,0,0,0.4)); */
}

/* La animación @keyframes spinAndFloat se mantiene igual */
@keyframes spinAndFloat {
  0% {
    transform: translateY(0) rotate(0deg) scale(1.1);
  }
  25% {
    transform: translateY(-2px) rotate(90deg) scale(1.15);
  }
  50% {
    transform: translateY(0) rotate(180deg) scale(1.1);
  }
  75% {
    transform: translateY(-2px) rotate(270deg) scale(1.15);
  }
  100% {
    transform: translateY(0) rotate(360deg) scale(1.1);
  }
}
.difficulty-easy { color: #81C784; font-weight: bold; }
.difficulty-normal { color: #FFB74D; font-weight: bold; }
.difficulty-hard { color: #E57373; font-weight: bold; }
.emphasis-mechanic { color: #FF80AB; font-weight: bold; } /* Rosa */
.tense-example { color: #90CAF9; font-style: italic; } /* Azul claro */
.points-value { color: #FFF176; font-weight: bold; } /* Amarillo */
.feedback-time { color: #90CAF9; }
.feedback-points { color: #FFF176; }
.feedback-streak { color: #FFB74D; }
.text-red { color: #E57373; }
.text-green { color: #81C784; }
.modal-subtitle { /* Nueva clase para subtítulos como "Goal:", "Time Mechanics:" */
  color: var(--title-color, #f0f0f0); /* Usa tu variable de color de texto o un blanco roto */
  display: block; 
  margin-top: 8px;
  margin-bottom: 2px; /* Menos espacio después del subtítulo */
  font-weight: bold;
  font-size: 1.05em; /* Ligeramente más grande que el texto normal del modal */
}
.example-prompt-text {
    font-style: italic;
    color: #ccc;
    font-size: 0.9em; /* Relativo al font-size del modal-content */
    display: block; 
    margin-bottom: 4px;
}
body.is-loading #specific-info-modal,
body.is-loading .specific-modal-backdrop,
body.is-loading #tooltip,
body.is-loading .modal-backdrop:not(.specific-modal-backdrop) { /* :not para no afectar el backdrop del modal específico si se usa el mismo nombre de clase general */
  display: none !important;
}
/* --- Nueva Pantalla de Configuración --- */
#config-flow-screen {
    display: flex; /* Para el layout 60/40 */
    /* display: none; /* Asegúrate que esté oculto si se muestra el splash primero */
    /* width: 100%; Ya lo gestiona .screen */
    /* max-width: 1000px; /* O el ancho que prefieras */
    /* margin: 20px auto; */
}

.config-main-panel {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
.config-step {
    display: none; /* Ocultos por defecto */
    animation: fadeInStep 0.5s ease-in-out;
}

.config-step.active-step {
    display: block;
}

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

/* --- Estilos para botones dentro del nuevo flujo --- */
.config-flow-button {
    background-color: #555 !important; /* GRIS OSCURO POR DEFECTO */
    color: var(--text-color) !important;
    border: 1px solid #444 !important;
    /* Asegúrate que otros estilos base como padding, margin, text-align estén aquí o heredados */
    display: block; 
    width: 100%; /* Por defecto, para los de modo. Se ajustará para los de dificultad. */
    margin-bottom: 10px;
    padding: 12px;
    text-align: center;
    animation: none !important; /* Quitar cualquier animación de pulse-border por defecto */
    box-shadow: 2px 2px 0px rgba(0,0,0,0.4); /* Sombra base */
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.config-flow-button:hover {
    background-color: #666 !important; /* GRIS MÁS CLARO EN HOVER */
    box-shadow: 1px 1px 0px rgba(0,0,0,0.4);
    transform: translate(1px, 1px);
}
.config-flow-button:active {
    box-shadow: none !important;
    transform: translate(2px, 2px) !important;
}
.config-flow-button.provisional-selection {
    animation: pulse-border 1s infinite;
    /* background-color: #555; /* Color de preselección */
}
.config-flow-button.confirmed-selection {
    background-color: #2a5a2a !important; 
    color: #ccc !important;
    border: 2px solid lightgreen !important;
    display: block !important; /* ASEGURA que el botón confirmado sea visible */
    pointer-events: auto; /* Permite hacer clic si quieres esa funcionalidad */
}
.config-flow-button:not(.confirmed-selection):not(.provisional-selection):hover {
     /* Estilo hover normal */
}
/* 2. ESTADO DE SELECCIÓN PROVISIONAL (COLORES "CHULOS") */

/* --- Botones de MODO DE JUEGO en estado provisional --- */

.config-flow-button[data-infokey="timerMode"].provisional-selection {
    background-color: #ee3c30 !important; /* Rojo para Timer */
    border-color: #c72e21 !important;
    color: white !important;
}
.config-flow-button[data-infokey="timerMode"].provisional-selection:hover {
    background-color: #fd4b3f !important; /* Rojo más claro */
}

.config-flow-button[data-infokey="livesMode"].provisional-selection {
    background-color: #0b5ac8 !important; /* Azul para Lives */
    border-color: #094aa0 !important;
    color: white !important;
}
.config-flow-button[data-infokey="livesMode"].provisional-selection:hover {
    background-color: #0d6efd !important; /* Azul más claro */
}

/* Estilo para "Study Mode" cuando está seleccionado provisionalmente */
.config-flow-button[data-infokey="studyMode"].provisional-selection {
    background-color: #ffffff !important; /* Blanco */
    border-color: #cccccc !important;
    color: #000000 !important; /* Texto negro */
}
.config-flow-button[data-infokey="studyMode"].provisional-selection:hover {
    background-color: #f2f2f2 !important; /* Blanco ligeramente oscuro */
}

/* --- Botones de DIFICULTAD en estado provisional --- */
.config-flow-button[data-infokey="receptiveConfig"].provisional-selection { /* Recall */
    background-color: #dc3545 !important; /* Rojo */
    border-color: #b02a37 !important;
    color: white !important;
}
.config-flow-button[data-infokey="receptiveConfig"].provisional-selection:hover {
    background-color: #c82333 !important; 
}

.config-flow-button[data-infokey="productiveEasyConfig"].provisional-selection { /* Conjugate */
    background-color: #6f42c1 !important; /* Morado */
    border-color: #5a32a3 !important;
    color: white !important;
}
.config-flow-button[data-infokey="productiveEasyConfig"].provisional-selection:hover {
    background-color: #8358cf !important; 
}

.config-flow-button[data-infokey="productiveConfig"].provisional-selection { /* Produce */
    background-color: #28a745 !important; /* Verde */
    border-color: #1e7e34 !important;
    color: white !important;
}
.config-flow-button[data-infokey="productiveConfig"].provisional-selection:hover {
    background-color: #218838 !important; 
}

/* General para provisional-selection si no tiene animación específica */
.config-flow-button.provisional-selection {
    animation: none !important; /* Anula el pulse-border si lo tenías */
}

.confirm-button, .start-button, #back-button {
    display: block;
    width: 80%;
    margin: 20px auto;
    padding: 15px;
    font-size: 1.2em;
    position: relative;
    overflow: hidden;
    /* ... otros estilos de tus botones principales ... */
}
#end-button {
    background-color: #902020;
}

#end-button:hover {
    background-color: #a03030;
}
#final-start-game-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}


/* Splash Step */
#splash-step {
    text-align: center;
    padding-top: 50px; /* Más espacio arriba */
}
#splash-step h2 {
    font-size: 2.5em; /* Más grande */
    color: var(--accent-color-blue);
    margin-bottom: 20px;
}
@keyframes pulse-border {
    0% { box-shadow: 0 0 5px rgba(255, 255, 100, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 255, 100, 1); }
    100% { box-shadow: 0 0 5px rgba(255, 255, 100, 0.5); }
}
/* Ajustes para móvil si es necesario para el nuevo layout */
@media (max-width: 768px) {
    #config-flow-screen {
        flex-direction: column;
    }
    .config-main-panel {
        width: 100%;
        height: auto;
        border-right: none;
    }
}
.config-flow-button.confirmed-selection {
    background-color: #2a5a2a !important; /* Tono verdoso fijo */
    color: #ccc !important;
    border: 2px solid lightgreen !important; /* Borde para destacar */
    opacity: 1 !important;
    /* pointer-events: none;  // Considera quitar esto si quieres que sea clickeable para volver */
    display: block !important; /* Asegurar que sea visible */
}
.config-step.step-section-completed .config-flow-button:not(.confirmed-selection) {
    display: none !important; /* Oculta los otros botones */
}

/* Estilo para el contenedor del paso completado */
.config-step.step-section-completed {
    padding-bottom: 15px; /* Menos espacio si solo muestra una opción */
    margin-bottom: 15px; 
    border-bottom: 1px dashed var(--border-color); 
}

/* Ocultar el botón de "Confirmar" de un paso ya completado */
.config-step.step-section-completed .confirm-button {
    display: none !important;
}
#config-flow-screen.splash-active .config-main-panel {
    width: 100%;
    border-right: none;


    max-height: 800px;  /* Más alto para mostrar los récords completos */

    /* O podrías hacer que el splash-step tenga un padding específico */
}

#splash-step.active-step { /* Cuando el splash es el paso activo */
    padding-top: 20px; /* Reduce el padding superior si antes era mucho */
    padding-bottom: 20px; /* Reduce el padding inferior */
    /* Puedes intentar darle una altura fija o máxima al splash-step directamente */
    /* max-height: 300px; */
    /* overflow-y: auto; /* Si el contenido interno es más grande que la altura */
}
#difficulty-buttons-container {
    display: flex;
    justify-content: center; /* Centra los botones horizontalmente */
    flex-wrap: wrap;         /* Permite que bajen si no caben en una línea */
    gap: 10px;               /* Espacio entre botones */
    margin-bottom: 15px;     /* Espacio debajo del contenedor */
}
#difficulty-buttons-container .config-flow-button {
    width: 100%;           /* Igual que los botones de modo */
    flex-basis: 100%;      /* Se apilan verticalmente manteniendo el mismo ancho */
    min-width: unset;      /* Sin ancho mínimo adicional */
    flex-grow: 0;
}

/* Para pantallas más pequeñas, podrías querer que vuelvan a ser de ancho completo */
@media (max-width: 600px) { /* Ajusta este breakpoint según necesites */
    #difficulty-buttons-container .config-flow-button {
        flex-basis: 100%;
        width: 100%;
    }

    /* Ocultar la barra de volumen en pantallas pequeñas */
    #volume-slider {
        display: none !important;
    }

}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Fade in effect for first-time splash */
.fade-in {
    animation: fadeInScreen 1s forwards;
}

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

@media (max-width: 600px) {
  .filter-bar {
    gap: 6px;
  }
  #toggle-ignore-accents {
    white-space: normal;
    text-align: center;
  }
}
.irregular-highlight {
  color: #E57373; 
  font-weight: bold;
}

td.irregular-highlight {
  text-align: center;
  font-weight: bold;
  color: #E57373;
}

#game-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

#game-main {
  flex: 0 0 70%;
  max-width: 70%;
}

#answer-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 4px; /* Espacio más reducido con la pregunta */
}

#chuache-box {
  flex: 1 1 30%;
  max-width: 200px;
  order: 2;
  background-color: #162416;
  border-left: 2px solid var(--border-color);
  margin-top: 50px;
  position: relative;

  /* --- INSTRUCCIONES MODIFICADAS --- */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}


#chuache-image,
#boss-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  transition: opacity 0.5s ease-in-out;
}

@media (max-width: 600px) {
  #chuache-box {
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
  }
  #answer-area {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   ====== DEFINITIVE STYLES FOR CHUACHE AND SPEECH BUBBLE ======
   ========================================================================== */

/* 1. The Character's Main Container (The Positioning Anchor) */
#character-container {
  position: relative; /* This is the anchor for the absolute-positioned bubble. */
  width: 200px; /* Match your image width */
  height: 200px; /* Match your image height */
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

.boss-battle-bg {
  background-color: #1a0000;
  transition: background-color 0.5s ease;
}

.boss-challenge {
  color: #ff5555;
  font-weight: bold;
  text-align: center;
  animation: glitch-text 1s steps(2, end) infinite;
}

.glitched-verb {
  display: inline-block;
  animation: glitch-text 1s steps(2, end) infinite;
}

@keyframes glitch-text {
  0% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  20% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
  40% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  60% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
  80% { text-shadow: 2px 0 #ff0000, -2px 0 #00ffff; }
  100% { text-shadow: -2px 0 #ff0000, 2px 0 #00ffff; }
}

/* 2. The Speech Bubble's Main Body */
.speech-bubble {
  /* This makes the bubble float on top, preventing any layout shift. */
  position: absolute; 
  /* Positions the bubble above the container. Adjust 'bottom' if needed. */
  bottom: 95%; 
  /* This combination centers the bubble horizontally above the image. */
  left: 50%;
  transform: translateX(-50%);
  
  width: 90%;
  max-width: 190px;
  background: #001f00;
  border: 2px solid #00ff88;
  color: #00ff88;
  padding: 12px;
  border-radius: 8px;
  z-index: 10;
  
  /* Inherited properties from before */
  font-family: var(--font-pixel);
  animation: popIn 0.3s ease;
  text-align: center;
}

/* 3. The Speech Bubble's Tail (Fill) */
.speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%; /* Positioned right at the bottom edge of the bubble */
  left: 30px;  /* Positioned on the left side of the bubble */
  
  /* Creates the triangle shape */
  width: 0;
  height: 0;
  border-top: 10px solid #001f00; /* Points down, uses bubble's background color */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

/* 4. The Speech Bubble's Tail (Border) */
.speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%; /* Positioned right at the bottom edge */
  left: 28px;  /* Positioned slightly outside the fill to create a border effect */

  /* Creates a slightly larger triangle for the border */
  width: 0;
  height: 0;
  border-top: 12px solid #00ff88; /* Points down, uses bubble's border color */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  /* This ensures the border triangle is rendered behind the fill triangle */
  z-index: -1; 
}


/* --- 5. DYNAMIC COLOR CHANGE FOR ERROR STATE --- */

/* Changes the bubble's border and background when the .error class is added */
.speech-bubble.error {
  background: #330000;
  border-color: #ff5555;
  color: #ff5555;
}

/* Changes the TAIL'S BORDER to red during an error */
.speech-bubble.error::before {
  border-top-color: #ff5555;
}

/* Changes the TAIL'S FILL to dark red during an error */
.speech-bubble.error::after {
  border-top-color: #330000;
}

.speech-bubble.hidden {
  display: none;
}

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

/* --- Game Screen Layout Engine --- */
#game-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

/* --- Right Panel: Main Game Board (70%) --- */
#game-main {
  flex: 1 1 70%;
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* padding-right has been removed */
  box-sizing: border-box;
}


/* --- Element Adjustments based on User Request --- */
#question-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#question-prompt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5em;
  width: 100%;
  text-align: center;
}

#answer-area {
  width: 100%;
}

/* --- New Bottom Panel occupying full width --- */
#bottom-panel {
    width: 100%;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#bottom-panel #action-buttons {
    width: 100%;
}

#input-es-container,
#input-en-container {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center;
}

#input-es-container label,
#input-en-container label {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.1em;
}

#answer-input-es,
#answer-input-en {
  flex-grow: 1;
  width: auto;
}

#answer-input-es::placeholder,
#answer-input-en::placeholder {
  color: #999999;
  opacity: 1;
}


/* --- Responsive Design for Mobile --- */
@media (max-width: 768px) {
  #game-layout {
    flex-direction: column;
  }

  #game-main {
      order: 1;
  }

  #chuache-box {
    order: 2;
    max-width: 100%;
    width: 100%;
    margin-top: 15px;
    border-left: none;
    border-top: 2px solid var(--border-color);
  }


  #input-es-container,
  #input-en-container {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  #input-es-container {
    position: relative;
    left: 25px; /* match desktop offset */
  }
}



/* --- Estilo del Nuevo Panel Inferior Independiente --- */
#bottom-panel {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed var(--border-color); /* Separador visual */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra sus hijos horizontalmente */
  gap: 5px; /* Reduce el espacio para acercar la puntuación */
}

/* --- Hijos del Panel Inferior --- */
#bottom-panel #action-buttons {
    width: 100%;
    max-width: 500px; /* Un ancho máximo para que no se vea demasiado estirado en pantallas grandes */
    text-align: center; /* Centra el contenido de texto y los botones inline */
}



/* --- Ajuste Responsive para Móvil --- */
@media (max-width: 768px) {
  #game-layout {
    flex-direction: column;
  }

  #game-main {
      order: 1; 
  }

  #chuache-box {
    order: 2;
    border-left: none; 
  }

  /* El #bottom-panel fluirá naturalmente debajo de #game-layout, no necesita cambios aquí. */
}

/* --- Survival Mode Visual Tweaks --- */
#lives-mechanics-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}

.lives-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

#lives-count {
  color: #ff8a80;
  font-weight: bold;
  font-size: 1.5em;
  text-shadow: 0 0 5px #fff, 0 0 10px #ff5252, 0 0 15px #ff5252, 0 0 20px #ff5252;
  animation: pulse-glow 1.5s infinite ease-in-out;
}

@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff5252, 0 0 15px #ff5252;
  }
  50% {
    text-shadow: 0 0 10px #fff, 0 0 20px #ff8a80, 0 0 30px #ff8a80;
  }
  100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #ff5252, 0 0 15px #ff5252;
  }
}

/* ==========================================================================
   ====== REGLAS EXCLUSIVAS PARA LA DISPOSICIÓN EN MÓVIL (FLUJO VERTICAL) ======
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 1. PREPARACIÓN DE CONTENEDORES --- */

  /* Hacemos que la pantalla principal del juego sea un contenedor flexible vertical.
     Esto nos permite usar la propiedad 'order' en sus hijos directos. */
  #game-screen {
    display: block;
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  /* ¡TRUCO ESENCIAL! Con 'display: contents', hacemos que los contenedores del
     layout de escritorio (#game-layout y #game-main) "desaparezcan" visualmente,
     permitiéndonos reordenar a sus hijos como si fueran directos de #game-screen. */
  #game-header-panel, #game-layout {
    display: block;
  }


  #game-mechanics-bar {
    justify-self: start;
    align-self: center;
    padding: 0;
    margin: 0;
  }

  #chuache-box {
    justify-self: end;
    align-self: start;
    width: 120px;
    border: none;
    background: none;
    padding: 0;
    margin-top: 0;
    margin-left: auto;
  }

  #game-main-panel, #bottom-panel, .game-footer {
     width: 100%;
     max-width: 100%;
  }


  /* --- 2. REORDENAMIENTO VISUAL CON LA PROPIEDAD 'ORDER' --- */

  /* Asignamos un número de orden a cada componente principal. 
     Se mostrarán en pantalla de menor a mayor, creando el flujo vertical deseado. */
  
  /* Ordenamiento heredado del flujo natural */
  
  /* Alineación sencilla para seguir el orden natural del DOM */
  #feedback-container { margin-top: 8px; }


  /* --- 3. AJUSTES DE ESTILO PARA LOS COMPONENTES EN MODO MÓVIL --- */
  

  /* Aseguramos que el contenedor de la imagen esté centrado dentro de su nueva posición */

  /* Nos aseguramos de que los demás paneles ocupen el ancho y tengan un margen adecuado */
  #answer-row,
  #interaction-panel,
  #feedback-area {
    width: 100%;
    max-width: 100%; /* This is important to override any max-width set for desktop. */
    box-sizing: border-box; /* Ensures padding is included in the width calculation. */
  }

  #answer-row,
  #action-buttons {
    width: 100%;
    max-width: 95%; /* Use 95% width with auto margin to center them nicely. */
    margin-left: auto;
    margin-right: auto;
  }
}

/* === Unified Panel Styles === */
#game-header-panel, #bottom-panel {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

#game-main-panel {
    flex: 1 1 70%;
    background-color: var(--container-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

#game-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
}

#question-prompt,
#feedback-area {
    border: none;
    background-color: transparent;
    padding: 10px 0;
}

#question-prompt {
    font-size: 1.5em;
    color: var(--title-color);
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 3px;
}

#answer-area input[type="text"] {
    font-size: 1.3em;
    text-align: center;
    padding: 12px;
    border: 1px solid #777;
    border-radius: 4px;
}

#feedback-area {
    font-size: 1.1em;
    min-height: 50px;
    width: 100%;
    max-width: 450px;
    line-height: 1.5;
    color: #ccc;
}

#action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}


@media (max-width: 768px) {
    #game-layout {
        flex-direction: column;
    }

    #game-main-panel, #game-header-panel, #bottom-panel {
        width: 100%;
        box-sizing: border-box;
    }

    /* --- Mobile Game Screen Layout Overhaul --- */

    #game-header-panel {
        display: block;
    }

    #game-mechanics-bar {
        padding: 0;
        margin: 0;
        justify-content: flex-start;
    }

    #game-title {
        text-align: left;
    }


    #game-main-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 5px;
    }

    /* Mantén el orden natural de los elementos */
    #answer-row { margin-top: 4px; }
    #feedback-container { margin-top: 4px; }

    #bottom-panel {
        margin-top: 5px;
        padding-top: 5px;
    }
}

@keyframes iridescent-dark-flow {
  0% {
    background-color: #0d0221; /* Dark Navy */
  }
  25% {
    background-color: #2d00f7; /* Vibrant Blue */
  }
  50% {
    background-color: #4a0072; /* Deep Purple */
  }
  75% {
    background-color: #0b2027; /* Dark Teal */
  }
  100% {
    background-color: #0d0221; /* Back to Dark Navy */
  }
}

body.iridescent-level {
  animation: iridescent-dark-flow 15s ease infinite;
  background-size: 400% 400%; /* Ensures smooth transition */
}

body.iridescent-level.level-up-shake {
  animation: iridescent-dark-flow 15s ease infinite,
             strong-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
  background-size: 400% 400%;
}

/* --- Score Preview Box Styles --- */
.score-preview {
    background-color: #1a2a1a;
    color: #f39c12;
    border: 2px dashed #f39c12;
    border-radius: 8px;
    padding: 12px 18px;
    margin-top: 20px;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'PixelSerif', sans-serif;
    font-size: 1.1em;
    text-shadow: 1px 1px #000;
    transition: all 0.3s ease;
}
#score-preview-value {
    font-size: 1.3em;
    margin-left: 8px;
    color: #ffffff;
}

#salon-records-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

/* --- Splash Screen Records Box Styles --- */

#splash-records-box {
    width: 90%;
    max-width: 600px;
    margin: 30px auto 10px auto;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid #444;
    border-radius: 8px;
    text-align: center;
}

#records-display-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* We can reuse the existing record block styling */
.hof-record-block {
    flex: 1;
    min-width: 200px;
}

/* --- Splash Screen Text Color Overrides --- */
#splash-step .splash-footer span {
    color: #39FF14 !important;
}

#splash-step .splash-footer a.feedback-link {
    color: #FFFFFF !important;
}

#splash-step .splash-footer a.coffee-link {
    color: #000000 !important;
}

#splash-records-box .hof-header h1 {
    color: #FFFFFF;
}

#splash-records-box .record-item,
#splash-records-box .record-item strong {
    color: #FFFFFF;
}

/* New Fire Effect Styles */
/* 1. Add styles for the new container */
.fire-bar-container {
  position: relative;
  width: 50px; /* slightly thinner */
  height: 180px;
  background-color: transparent;
  border: none; /* No border for transparent effect */
  box-shadow: none;
  overflow: visible; /* Change from hidden to visible to ensure fire is not clipped */
}

/* 2. Modify the existing .fire element's styles */
.fire {
  font-size: 5px;
  filter: blur(0.02em);
  -webkit-filter: blur(0.02em);
  margin: 0;
  position: absolute;
  bottom: 0;
  width: 40px; /* Give the animation a fixed width, not 100% */
  height: 100%;
  left: 50%; /* Center the animation horizontally */
  transform: translateX(-50%); /* Fine-tune the centering */
}

#streak-fire .particle {
animation: rise 1s ease-in infinite;
background-image: radial-gradient(rgb(255,80,0) 20%, rgba(255,80,0,0) 70%);
border-radius: 50%;
mix-blend-mode: screen;
opacity: 0;
position: absolute;
bottom: 0;
width: 100%;
height: 5em;
}

/* Loop to distribute particles */
/* Note: This SASS @for loop needs to be compiled into standard CSS if not using a SASS preprocessor. 
   The createFireParticles() function in script.js already handles this logic dynamically, so no direct CSS changes are needed here if that function remains.
*/
/* @for $p from 1 through 50 {
#streak-fire .particle:nth-of-type(#{$p}) {
animation-delay: 1s * random();
left: calc((100% - 5em) * #{($p - 1)/50});
}
} */


@keyframes rise {
from {
opacity: 0;
transform: translateY(0) scale(1);
}
25% {
opacity: 1;
}
to {
opacity: 0;
/* Use a CSS variable for dynamic height control */
transform: translateY(var(--fire-rise-height, -5em)) scale(0);
}
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out;
}

/* Nuclear Bomb Boss Styles */
.nuclear-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(45deg, #ff0000, #ff4444);
  border-radius: 15px;
  padding: 20px;
  color: white;
  text-align: center;
  animation: pulse-danger 1s infinite alternate;
  position: relative;
  overflow: hidden;
}

.nuclear-countdown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.1) 10px,
    rgba(255, 255, 255, 0.1) 20px
  );
  animation: move-stripes 2s linear infinite;
}

@keyframes pulse-danger {
  0% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.5); }
  100% { box-shadow: 0 0 40px rgba(255, 0, 0, 0.9); }
}

@keyframes move-stripes {
  0% { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

.bomb-icon {
  font-size: 3em;
  margin-bottom: 10px;
  animation: bounce 0.5s infinite alternate;
  z-index: 2;
  position: relative;
}

@keyframes bounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.countdown-display {
  z-index: 2;
  position: relative;
}

.time-label {
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.time-value {
  font-size: 2.5em;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  margin-bottom: 10px;
}

.defuse-text {
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 1px;
  z-index: 2;
  position: relative;
}

/* Warning state (20+ seconds) */
.nuclear-countdown.warning {
  background: linear-gradient(45deg, #ff8800, #ffaa44);
  animation: pulse-warning 1s infinite alternate;
}

@keyframes pulse-warning {
  0% { box-shadow: 0 0 20px rgba(255, 136, 0, 0.5); }
  100% { box-shadow: 0 0 40px rgba(255, 136, 0, 0.9); }
}

/* Critical state (10 seconds or less) */
.nuclear-countdown.critical {
  background: linear-gradient(45deg, #ff0000, #cc0000);
  animation: pulse-critical 0.3s infinite alternate;
}

@keyframes pulse-critical {
  0% {
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 60px rgba(255, 0, 0, 1);
    transform: scale(1.02);
  }
}

.nuclear-countdown.critical .bomb-icon {
  animation: shake 0.2s infinite;
  color: #ffff00;
  text-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
}

@keyframes shake {
  0% { transform: translateX(-2px) rotate(-1deg); }
  25% { transform: translateX(2px) rotate(1deg); }
  50% { transform: translateX(-2px) rotate(-1deg); }
  75% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

.nuclear-countdown.critical .time-value {
  color: #ffff00;
  animation: flash-red 0.5s infinite;
}

@keyframes flash-red {
  0% { color: #ffff00; }
  50% { color: #ff0000; }
  100% { color: #ffff00; }
}

/* Defused state */
.nuclear-countdown.defused {
  background: linear-gradient(45deg, #00ff00, #44ff44);
  animation: pulse-success 1s infinite alternate;
}

@keyframes pulse-success {
  0% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
  100% { box-shadow: 0 0 40px rgba(0, 255, 0, 0.9); }
}

.nuclear-countdown.defused .bomb-icon {
  content: '✅';
}

.nuclear-countdown.defused .defuse-text {
  content: 'BOMB DEFUSED!';
}

/* Hide Chuache when in nuclear mode */
#chuache-box.nuclear-mode #chuache-image,
#chuache-box.nuclear-mode #speech-bubble {
  display: none;
}