* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #e0f2fe; /* azul muy claro */
      color: #0f172a;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .app {
      width: 100%;
      max-width: 780px;
      min-height: 100vh;
      background: #e0f2fe;
    }

    /* CABECERA AZUL */
    .header {
      background: #0ea5e9;
      color: #ffffff;
      padding: 14px 16px 18px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(15, 23, 42, 0.25);
    }
    .header-title {
      margin: 0;
      font-size: 28px;
      font-weight: 700;
    }
    .header-subtitle {
      margin: 4px 0 0;
      font-size: 18px;
      font-weight: 500;
    }

    .content {
      padding: 16px 12px 24px;
    }

    .screen { display: none; }
    .screen.active { display: block; }

    /* LISTA DE MENÚ VERTICAL (como la captura) */
    .menu-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 12px;
    }

    .menu-card {
      background: #ffffff;
      border-radius: 18px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18);
      cursor: pointer;
      border: 1px solid #bae6fd;
      transition: transform 0.08s ease, box-shadow 0.08s ease;
    }
    .menu-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
    }

    .menu-icon {
      width: 48px;
      height: 48px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0ea5e9;
      color: #ffffff;
      font-size: 26px;
      flex-shrink: 0;
    }

    .menu-text-main {
      font-size: 18px;
      font-weight: 600;
    }
    .menu-text-sub {
      font-size: 14px;
      color: #4b5563;
    }

    /* BOTONES GENERALES */
    .btn {
      border: none;
      border-radius: 999px;
      padding: 9px 16px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      background: #0ea5e9;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(14, 165, 233, 0.6);
      transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
    }
    .btn:hover:enabled {
      background: #0284c7;
      box-shadow: 0 5px 12px rgba(14, 165, 233, 0.7);
    }
    .btn:disabled {
      opacity: 0.5;
      cursor: default;
      box-shadow: none;
      transform: none;
    }
    .btn-secondary {
      background: #ffffff;
      color: #0f172a;
      border: 1px solid #cbd5f5;
      box-shadow: none;
    }
    .btn-secondary:hover:enabled {
      background: #e5e7eb;
    }

    /* PANTALLA INTRO BLOQUE */
    #screen-section {
      text-align: center;
      margin-top: 12px;
    }
    #section-title {
      font-size: 22px;
      margin-bottom: 6px;
    }
    #section-subtitle {
      font-size: 16px;
      color: #4b5563;
      margin-bottom: 12px;
    }

    /* QUIZ */
    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .topbar-title {
      font-size: 19px;
      font-weight: 600;
    }
    .topbar-right {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .question-card {
      background: #ffffff;
      border-radius: 18px;
      padding: 14px;
      border: 2px solid #bae6fd;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 10px;
      box-shadow: 0 3px 9px rgba(15, 23, 42, 0.16);
    }
    .question-card.correct {
      border-color: #22c55e;
      background: #ecfdf3;
    }
    .question-card.incorrect {
      border-color: #ef4444;
      background: #fef2f2;
    }

    #question-number {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
    }
    #question-text {
      font-size: 18px;
      line-height: 1.4;
    }
    #question-input input[type="text"] {
      width: 100%;
      padding: 9px 12px;
      border-radius: 999px;
      border: 1px solid #93c5fd;
      font-size: 16px;
      outline: none;
    }
    #question-input input[type="text"]:focus {
      border-color: #0ea5e9;
      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45);
    }
    #question-result {
      font-size: 15px;
    }
    .result-correct { color: #166534; }
    .result-incorrect { color: #b91c1c; }

    .nav-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .nav-row button {
      flex: 1;
      min-width: 120px;
    }

    /* MODAL */
    #modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 40;
    }
    #modal-overlay.show { display: flex; }
    .modal-box {
      background: #ffffff;
      border-radius: 18px;
      padding: 16px 16px 12px;
      max-width: 360px;
      width: 100%;
      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.45);
      border: 2px solid #bae6fd;
    }
    #modal-emoji {
      font-size: 30px;
      margin-bottom: 4px;
      text-align:center;
    }
    #modal-title {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 4px;
      text-align:center;
    }
    #modal-text {
      font-size: 15px;
      color: #111827;
      white-space: pre-line;
      margin-bottom: 10px;
    }
    .modal-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    @media (max-width: 640px) {
      .app {
        max-width: 100%;
      }
      .content {
        padding: 12px 8px 20px;
      }
      .menu-card {
        padding: 10px 10px;
      }
    }
  
    .history-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:8px 10px;
      border-radius:12px;
      background:#ffffff;
      border:1px solid #bae6fd;
      box-shadow:0 2px 6px rgba(15,23,42,0.06);
      margin-bottom:6px;
    }
    .history-main {
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .history-title {
      font-size:15px;
      font-weight:600;
    }
    .history-sub {
      font-size:13px;
      color:#6b7280;
    }
    .history-score {
      text-align:right;
      font-size:14px;
    }
    .history-grade {
      font-weight:600;
    }
    .history-stars {
      color:#fbbf24;
      font-size:15px;
    }

    .guide-box {
      margin: 12px 0 8px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 6px rgba(15,23,42,0.12);
    }
    .guide-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: #0ea5e9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #ffffff;
      flex-shrink: 0;
    }
    .guide-texts {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .guide-name {
      font-size: 15px;
      font-weight: 600;
    }
    .guide-message {
      font-size: 14px;
      color: #374151;
    }
    .guide-bounce {
      animation: guideBounce 1.4s ease-in-out infinite;
    }
    @keyframes guideBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    .trophies-section {
      margin-top: 14px;
      padding: 10px 12px;
      border-radius: 14px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      box-shadow: 0 3px 8px rgba(15,23,42,0.08);
    }
    .trophies-section h3 {
      margin: 0 0 8px;
      font-size: 16px;
      font-weight: 600;
      color: #0f172a;
    }
    .ultra-progress-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ultra-progress-bar-bg {
      width: 100%;
      height: 12px;
      border-radius: 999px;
      background: #e5e7eb;
      overflow: hidden;
    }
    .ultra-progress-bar-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, #22c55e, #0ea5e9);
      transition: width 0.3s ease;
    }
    .ultra-progress-label {
      font-size: 14px;
      color: #374151;
    }
    .ultra-medals-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .ultra-medal-card {
      flex: 1;
      min-width: 90px;
      padding: 8px;
      border-radius: 12px;
      text-align: center;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }
    .ultra-medal-gold { background: #fef9c3; border-color: #facc15; }
    .ultra-medal-silver { background: #e5e7eb; border-color: #9ca3af; }
    .ultra-medal-bronze { background: #fef3c7; border-color: #f97316; }
    .ultra-medal-emoji {
      font-size: 22px;
      margin-bottom: 2px;
    }
    .ultra-medal-title {
      font-size: 14px;
      font-weight: 600;
    }
    .ultra-medal-count {
      font-size: 18px;
      font-weight: 700;
      margin-top: 2px;
    }
    .ultra-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 8px;
    }
    .ultra-stat-card {
      padding: 8px;
      border-radius: 10px;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
    }
    .ultra-stat-label {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 2px;
    }
    .ultra-stat-value {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
    }
    .missions-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mission-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      border-radius: 10px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      font-size: 14px;
    }
    .mission-text {
      flex: 1;
      margin-right: 8px;
    }
    .mission-status {
      font-size: 18px;
    }


/* =============================
   Mascota animada (Lingo)
   ============================= */
.mascot{
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 9999;
  pointer-events: none; /* no bloquea clicks de la app */
}

.mascot-body{
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: #ffffff;
  border: 3px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  animation: mascot-float 2.6s ease-in-out infinite;
  pointer-events: auto; /* la mascota sí se puede tocar */
  cursor: pointer;
  user-select: none;
}

.mascot-bubble{
  min-width: 220px;
  max-width: 280px;
  background: #ffffff;
  border: 3px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  padding: 10px 12px;
  pointer-events: auto;
}

.mascot-name{
  font-weight: 800;
  font-size: 14px;
  color: #2563eb;
  margin-bottom: 4px;
}

.mascot-text{
  font-size: 14px;
  color: #111827;
  line-height: 1.25;
}

.mascot-actions{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.mascot-btn{
  border: 0;
  background: rgba(37,99,235,0.10);
  color: #1d4ed8;
  font-weight: 800;
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
}

.mascot-btn:active{ transform: scale(0.98); }

@keyframes mascot-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.mascot-shake{ animation: mascot-shake 420ms ease-in-out; }
@keyframes mascot-shake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-5px); }
  50%{ transform: translateX(5px); }
  75%{ transform: translateX(-4px); }
  100%{ transform: translateX(0); }
}

.mascot-pop{ animation: mascot-pop 520ms ease-out; }
@keyframes mascot-pop{
  0%{ transform: scale(1); }
  35%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}

.mascot-volume{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.mascot-vol-label{
  font-size:12px;
  font-weight:800;
  color:#2563eb;
}
#volume-slider{
  width: 150px;
  accent-color:#2563eb;
}
.mascot-cheer{ animation: mascot-cheer 600ms ease-out; }
@keyframes mascot-cheer{
  0%{ transform: translateY(0) rotate(0deg) scale(1); }
  30%{ transform: translateY(-10px) rotate(-6deg) scale(1.08); }
  60%{ transform: translateY(-6px) rotate(6deg) scale(1.10); }
  100%{ transform: translateY(0) rotate(0deg) scale(1); }
}

/* Mascota: botón flecha (móvil) */
.mascot-bubble{ position: relative; }
.mascot-mini-toggle{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border-radius:12px;
  border:0;
  background: rgba(37,99,235,0.12);
  color:#1d4ed8;
  font-weight:900;
  cursor:pointer;
  pointer-events:auto;
}
.mascot-collapsed .mascot-volume{ display:none !important; }

/* Toast de consejos */
.guide-toast{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 86px;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
  font-size: 15px;
  line-height: 1.25;
}
.guide-toast.hidden{ display:none; }

@media (min-width: 769px){
  .guide-toast{ left:auto; right: 18px; width: 320px; bottom: 110px; }
  .mascot-mini-toggle{ display:none; } /* en PC no hace falta */
}

/* Toggle flotante (solo flecha) para móvil */
.mascot-fab{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 0;
  background: rgba(37,99,235,0.14);
  color: #1d4ed8;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
  display:none; /* por defecto, lo activamos en móvil */
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

@media (max-width: 768px){
  .mascot-fab{ display:inline-flex; align-items:center; justify-content:center; }
  .mascot-mini-toggle{ display:none !important; } /* ocultar flecha interna */
  /* Al plegar: esconder completamente el panel (burbuja) */
  .mascot-collapsed .mascot-bubble{ display:none !important; }
  /* Mantener solo mascota + flecha */
}

.sync-input{
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 15px;
  outline: none;
}
.sync-input:focus{
  border-color: rgba(37,99,235,0.6);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

/* Modal inicial de sincronización */
.sync-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 14px;
}
.sync-modal-overlay.show{ display:flex; }

.sync-modal{
  width: min(520px, 96vw);
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 16px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.08);
  text-align: center;
}
.sync-modal-title{
  font-size: 22px;
  font-weight: 900;
  color: #1f3b77;
}
.sync-modal-sub{
  margin-top: 6px;
  font-size: 14px;
  color: #4b5563;
}
.sync-modal-input{
  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.14);
  font-size: 16px;
  outline: none;
}
.sync-modal-input:focus{
  border-color: rgba(37,99,235,0.65);
  box-shadow: 0 0 0 5px rgba(37,99,235,0.12);
}

.sync-modal-buttons{
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.sync-big{
  min-width: 150px;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}
.sync-continue{
  margin-top: 10px;
  width: 100%;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
}
.sync-modal-status{
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
  min-height: 18px;
}
.sync-modal-hint{
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}