/* ==========================================================================
   HOJA DE ESTILOS PRINCIPAL: MATH ADVENTURE QUEST
   ========================================================================== */

   :root {
    /* Paleta de colores infantil alegre y de alta legibilidad */
    --color-primary: #FF6B6B;      /* Coral / Rojo suave */
    --color-secondary: #4ECDC4;    /* Turquesa */
    --color-accent: #FFE66D;       /* Amarillo brillante */
    --color-success: #6BCB77;      /* Verde éxito */
    --color-info: #4D96FF;         /* Azul info */
    --color-dark: #2C3E50;         /* Texto oscuro */
    
    /* Fondos */
    --bg-main: #F9F7F5;            /* Arena muy claro / crema */
    --bg-card: #FFFFFF;
    
    /* Degradados por islas / niveles */
    --island-1: linear-gradient(135deg, #A8E6CF, #8ED8B4);
    --island-2: linear-gradient(135deg, #FFD3B6, #FFAAA6);
    --island-3: linear-gradient(135deg, #DCEDC1, #C7E5A1);
    --island-4: linear-gradient(135deg, #FFAAA5, #FF8B8B);
    --island-5: linear-gradient(135deg, #DCE2F1, #B3C5E6);
    --island-6: linear-gradient(135deg, #FFE4E1, #FFC0CB);
    --island-7: linear-gradient(135deg, #E8D7FF, #CEB3FF);
    --island-8: linear-gradient(135deg, #D0F4DE, #A9E7C0);
    --island-9: linear-gradient(135deg, #FFF1E6, #FFDFD3);
    --island-10: linear-gradient(135deg, #FFE5EC, #FFC2D1);
  }
  
  body {
      font-family: 'Nunito', sans-serif;
      background-color: var(--bg-main);
      color: var(--color-dark);
      margin: 0;
      padding: 0;
      min-height: 100vh;
      overflow-x: hidden;
      background-image: radial-gradient(#E8E5E2 1px, transparent 1px);
      background-size: 20px 20px;
  }
  
  h1, h2, h3, h4, h5, h6, .game-title {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
  }
  
  /* ==========================================================================
     PANTALLAS / VISTAS DE LA SPA
     ========================================================================== */
  
  .game-screen {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
  }
  
  /* Pantalla de Bienvenida */
  .welcome-card {
      background-color: var(--bg-card);
      border-radius: 30px;
      padding: 40px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
      max-width: 500px;
      width: 100%;
      border: 8px solid #F3F1EC;
  }
  
  .logo-container {
      margin-bottom: 25px;
  }
  
  .logo-title {
      font-size: 2.8rem;
      background: linear-gradient(45deg, var(--color-primary), var(--color-info));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 5px;
  }
  
  .avatar-selector {
      display: flex;
      justify-content: space-around;
      margin: 20px 0;
  }
  
  .avatar-option {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      border: 4px solid transparent;
      cursor: pointer;
      font-size: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #F0EDE8;
      transition: all 0.2s ease;
  }
  
  .avatar-option:hover {
      transform: scale(1.1);
  }
  
  .avatar-option.selected {
      border-color: var(--color-primary);
      background-color: var(--color-accent);
      transform: scale(1.15);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
  }
  
  /* Botón Infantil */
  .btn-kids {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      border-radius: 50px !important;
      padding: 12px 30px;
      font-size: 1.2rem;
      transition: all 0.3s ease;
      box-shadow: 0 6px 0 #00000020;
      border: none;
  }
  
  .btn-kids:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 #00000020;
  }
  
  .btn-kids-primary {
      background-color: var(--color-primary);
      color: white;
  }
  
  .btn-kids-primary:hover {
      background-color: #ff5252;
      color: white;
  }
  
  .btn-kids-secondary {
      background-color: var(--color-secondary);
      color: white;
  }
  
  .btn-kids-secondary:hover {
      background-color: #3cbdb4;
      color: white;
  }
  
  .btn-kids-info {
      background-color: var(--color-info);
      color: white;
  }
  
  .btn-kids-info:hover {
      background-color: #3b82f6;
      color: white;
  }
  
  /* ==========================================================================
     MAPA DE NIVELES (10 ISLAS)
     ========================================================================== */
  
  .level-map-container {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 20px;
  }
  
  .map-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      background-color: white;
      padding: 15px 30px;
      border-radius: 50px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  }
  
  .map-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 25px;
      justify-items: center;
      padding: 20px 0;
  }
  
  .island-card {
      width: 170px;
      height: 190px;
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 18px;
      color: white;
      text-align: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      position: relative;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 4px solid rgba(255, 255, 255, 0.4);
      user-select: none;
  }
  
  .island-card:hover:not(.locked) {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
  }
  
  .island-card.locked {
      background: #CCD1D9 !important;
      border-color: #E6E9ED;
      cursor: not-allowed;
      box-shadow: none;
  }
  
  .island-number {
      font-size: 1.1rem;
      background-color: rgba(0, 0, 0, 0.15);
      padding: 2px 10px;
      border-radius: 12px;
      font-weight: bold;
  }
  
  .island-icon {
      font-size: 2.5rem;
      margin: 10px 0;
  }
  
  .island-name {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.95rem;
      line-height: 1.2;
      font-weight: 600;
  }
  
  .island-stars {
      display: flex;
      gap: 3px;
  }
  
  .star-mini {
      font-size: 0.9rem;
      color: var(--color-accent);
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  
  .star-mini.empty {
      color: rgba(255, 255, 255, 0.4);
  }
  
  .lock-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(200, 200, 200, 0.25);
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.2rem;
      color: #656D78;
  }
  
  /* ==========================================================================
     ÁREA DE JUEGO (PLAYGROUND)
     ========================================================================== */
  
  .game-container-box {
      background-color: white;
      border-radius: 35px;
      padding: 30px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
      max-width: 800px;
      width: 100%;
      border: 8px solid #F3F1EC;
      margin-top: 15px;
  }
  
  .playground-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      border-bottom: 3px dashed #E6E3DE;
      padding-bottom: 15px;
  }
  
  .hud-item {
      font-size: 1.2rem;
      font-weight: bold;
      background-color: #F8F6F2;
      padding: 8px 18px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  .question-box {
      font-size: 2.5rem;
      text-align: center;
      margin: 30px 0;
      min-height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Fredoka', sans-serif;
  }
  
  /* Opciones de respuesta */
  .answers-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 20px;
  }
  
  .answer-btn {
      font-family: 'Fredoka', sans-serif;
      font-size: 1.8rem;
      padding: 20px;
      border-radius: 24px;
      border: 4px solid #ECE9E4;
      background-color: #FDFDFD;
      color: var(--color-dark);
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 8px 0 #ECE9E4;
  }
  
  .answer-btn:hover {
      background-color: #F6F4F0;
      border-color: #DFDBD5;
      transform: translateY(-2px);
  }
  
  .answer-btn:active {
      transform: translateY(6px);
      box-shadow: 0 2px 0 #ECE9E4;
  }
  
  /* ==========================================================================
     MECÁNICAS ESPECÍFICAS DE MINIJUEGOS
     ========================================================================== */
  
  /* Drag and Drop Contenedores */
  .drag-zone {
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
      margin-bottom: 25px;
      min-height: 80px;
      padding: 15px;
      background-color: #FAF8F5;
      border-radius: 20px;
      border: 3px dashed #DFDBD5;
  }
  
  .drop-zone {
      min-height: 120px;
      border: 4px dashed var(--color-secondary);
      border-radius: 24px;
      background-color: #EBFDFB;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 15px;
      margin: 20px 0;
      transition: all 0.3s ease;
  }
  
  .drop-zone.hovered {
      background-color: #D3F9F4;
      border-color: #3abdb4;
  }
  
  /* Fichas manipulativas */
  .drag-item {
      font-size: 2.3rem;
      cursor: grab;
      user-select: none;
      transition: transform 0.2s ease;
      display: inline-block;
  }
  
  .drag-item:active {
      cursor: grabbing;
      transform: scale(1.2);
  }
  
  /* Burbujas y Globos flotantes (Nivel 4 y 7) */
  .float-area {
      height: 350px;
      position: relative;
      background: linear-gradient(to bottom, #e0f2fe, #f0f9ff);
      border-radius: 24px;
      overflow: hidden;
      border: 4px solid #bae6fd;
  }
  
  .floating-balloon {
      position: absolute;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      color: white;
      font-family: 'Fredoka', sans-serif;
      font-size: 1.6rem;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
      user-select: none;
      transition: transform 0.1s ease;
  }
  
  .floating-balloon::after {
      content: "";
      position: absolute;
      bottom: -10px;
      left: 33px;
      border-width: 8px 4px 0;
      border-style: solid;
      border-color: inherit;
      display: block;
      width: 0;
  }
  
  /* Regletas / Base 10 (Nivel 5) */
  .base10-zone {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      min-height: 200px;
      background-color: #FBFBFB;
      border-radius: 20px;
      padding: 20px;
      border: 3px dashed #DFDBD5;
  }
  
  .block-ten {
      width: 25px;
      height: 150px;
      background-color: #E15B64;
      border: 2px solid #C83B44;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2px 0;
      align-items: center;
      box-shadow: 2px 4px 5px rgba(0,0,0,0.1);
  }
  
  .block-ten-unit {
      width: 19px;
      height: 12px;
      background-color: #F28C8F;
      border-radius: 2px;
  }
  
  .block-one {
      width: 25px;
      height: 25px;
      background-color: #4ECDC4;
      border: 2px solid #36A7A0;
      border-radius: 4px;
      box-shadow: 2px 3px 4px rgba(0,0,0,0.1);
  }
  
  /* Tablero de Bingo (Nivel 10) */
  .bingo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      max-width: 320px;
      margin: 20px auto;
  }
  
  .bingo-cell {
      aspect-ratio: 1;
      border-radius: 16px;
      font-size: 2rem;
      font-weight: bold;
      background-color: #F7F6F3;
      border: 4px solid #DFDBD5;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: 'Fredoka', sans-serif;
  }
  
  .bingo-cell.marked {
      background-color: var(--color-success);
      color: white;
      border-color: #4fa85a;
      transform: scale(1.05);
  }
  
  /* ==========================================================================
     TABLA DE RANKING (TOP 5)
     ========================================================================== */
  
  .ranking-box {
      width: 100%;
      max-width: 500px;
      background-color: white;
      border-radius: 30px;
      padding: 30px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
      border: 8px solid #F3F1EC;
  }
  
  .ranking-list {
      margin: 25px 0;
  }
  
  .ranking-card {
      display: flex;
      align-items: center;
      padding: 12px 20px;
      margin-bottom: 12px;
      background-color: #F8F6F2;
      border-radius: 20px;
      transition: transform 0.2s ease;
      border: 2px solid transparent;
  }
  
  .ranking-card:hover {
      transform: scale(1.02);
  }
  
  .ranking-card.self-player {
      background-color: #FFFDEB;
      border-color: var(--color-accent);
  }
  
  .ranking-rank {
      font-size: 1.8rem;
      width: 45px;
      text-align: center;
  }
  
  .ranking-avatar {
      font-size: 2.2rem;
      margin: 0 15px;
  }
  
  .ranking-info {
      flex-grow: 1;
  }
  
  .ranking-name {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 2px;
  }
  
  .ranking-level-badge {
      font-size: 0.8rem;
      background-color: rgba(0,0,0,0.06);
      padding: 2px 8px;
      border-radius: 10px;
  }
  
  .ranking-score {
      text-align: right;
  }
  
  .ranking-points {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--color-info);
  }
  
  /* ==========================================================================
     RESPONSIVIDAD Y AJUSTES
     ========================================================================== */
  
  @media(max-width: 576px) {
      .logo-title {
          font-size: 2.2rem;
      }
      .answers-grid {
          grid-template-columns: 1fr;
          gap: 12px;
      }
      .answer-btn {
          font-size: 1.5rem;
          padding: 15px;
      }
      .map-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 15px;
      }
      .island-card {
          width: 140px;
          height: 160px;
      }
  }

  /* Estilos específicos para el input de alias con alto contraste */
  #player-alias {
      background-color: #FFFFFF !important;
      color: #2C3E50 !important;
      border: 3px solid #FF6B6B !important;
      font-size: 1.3rem !important;
      font-weight: 700 !important;
  }

  #player-alias:focus {
      border-color: #4ECDC4 !important;
      box-shadow: 0 0 10px rgba(78, 205, 196, 0.4) !important;
  }

  /* Placeholder visible y con alta opacidad */
  #player-alias::placeholder {
      color: #8A95A5 !important;
      opacity: 0.85 !important;
  }

  /* Prevenir comportamiento de autocompletado del navegador */
  #player-alias:-webkit-autofill,
  #player-alias:-webkit-autofill:hover, 
  #player-alias:-webkit-autofill:focus {
      border: 3px solid #FF6B6B !important;
      -webkit-text-fill-color: #2C3E50 !important;
      -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
      transition: background-color 5000s ease-in-out 0s;
  }

  /* ==========================================================================
     MEJORAS DE UI PEDAGÓGICAS (METODOLOGÍA CPA / ABN)
     ========================================================================== */

  /* Recta Numérica Interactiva */
  .number-line-container {
      background-color: #F8F9FA;
      border: 3px solid #E9ECEF;
      border-radius: 20px;
      padding: 15px 25px 25px 25px;
      margin-bottom: 20px;
      position: relative;
  }

  .number-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 6px;
      background-color: #CED4DA;
      margin-top: 50px; /* Espacio para que salte la mascota */
      position: relative;
      border-radius: 3px;
  }

  .number-line-node {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #6C757D;
      position: relative;
      z-index: 2;
      transition: background-color 0.3s ease;
  }

  .number-line-node.active {
      background-color: var(--color-primary);
  }

  .number-line-label {
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Fredoka', sans-serif;
      font-weight: bold;
      font-size: 0.9rem;
      color: #495057;
  }

  .number-line-mascot {
      position: absolute;
      font-size: 2.2rem;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      top: -46px;
      left: 0;
      z-index: 10;
      transition: left 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      pointer-events: none;
  }

  /* Marcadores de conteo secuencial */
  .conteo-marker {
      position: absolute;
      background-color: var(--color-accent) !important;
      color: var(--color-dark) !important;
      border: 2px solid var(--color-primary) !important;
      border-radius: 50% !important;
      width: 32px !important;
      height: 32px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      font-family: 'Fredoka', sans-serif !important;
      font-weight: bold !important;
      font-size: 0.95rem !important;
      top: -15px !important;
      right: -15px !important;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
      animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
      z-index: 20 !important;
      pointer-events: none !important;
  }

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

  /* Celebración High-Five */
  .highfive-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      margin: 20px 0;
      height: 100px;
  }

  .highfive-mascot-left {
      font-size: 4rem;
      animation: leftSwing 0.8s infinite alternate ease-in-out;
  }

  .highfive-mascot-right {
      font-size: 4rem;
      animation: rightSwing 0.8s infinite alternate ease-in-out;
  }

  @keyframes leftSwing {
      from { transform: rotate(0deg) translateX(0); }
      to { transform: rotate(15deg) translateX(10px); }
  }

  @keyframes rightSwing {
      from { transform: rotate(0deg) translateX(0); }
      to { transform: rotate(-15deg) translateX(-10px); }
  }

  /* ==========================================================================
     FASE 2: SCAFFOLDING, BARRA SINGAPUR
     ========================================================================== */

  /* Scaffolding: Pista nivel 1 — Brillo dorado suave en el botón correcto */
  .hint-glow {
      box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.45), 0 0 20px rgba(255, 193, 7, 0.3) !important;
      animation: hintPulse 1.2s ease-in-out infinite !important;
      border-color: #FFC107 !important;
  }

  @keyframes hintPulse {
      0%, 100% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.3), 0 0 15px rgba(255, 193, 7, 0.15); }
      50% { box-shadow: 0 0 0 8px rgba(255, 193, 7, 0.5), 0 0 30px rgba(255, 193, 7, 0.35); }
  }

  /* Scaffolding: Pista nivel 2 — Mascota con flecha señalando */
  .mascot-hint {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 30;
      pointer-events: none;
      font-size: 1.8rem;
      top: -60px;
      left: 50%;
      transform: translateX(-50%);
  }

  .mascot-hint .hint-arrow {
      font-size: 1.4rem;
      color: #FFC107;
      animation: arrowBounce 0.6s ease-in-out infinite;
  }

  @keyframes arrowBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
  }

  /* Barra de Singapur para División (Nivel 9) */
  .singapore-bar-container {
      margin: 15px auto 25px auto;
      max-width: 400px;
  }

  .singapore-bar-label {
      font-family: 'Fredoka', sans-serif;
      font-size: 0.85rem;
      color: #6C757D;
      text-align: center;
      margin-bottom: 6px;
  }

  .singapore-bar {
      display: flex;
      height: 45px;
      border-radius: 12px;
      overflow: hidden;
      border: 3px solid #DEE2E6;
      background-color: #F8F9FA;
  }

  .singapore-segment {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Fredoka', sans-serif;
      font-weight: bold;
      font-size: 1rem;
      color: #FFF;
      border-right: 2px dashed rgba(255, 255, 255, 0.6);
      opacity: 0;
      animation: segmentReveal 0.4s ease-out forwards;
  }

  .singapore-segment:last-child {
      border-right: none;
  }

  @keyframes segmentReveal {
      from { opacity: 0; transform: scaleX(0); }
      to { opacity: 1; transform: scaleX(1); }
  }