/* GENERADO por tools/build_critical_css.py — NO editar a mano.
   Subconjunto de styles.css que pinta la primera pantalla (splash + login).
   styles.css se sigue cargando entero y despues, asi que el resultado final lo manda el.
   Para regenerarlo:  python tools/build_critical_css.py  */
/* ════════════════════════════════════════════════════════════════
   PALETA DE MARCA — Speakuy (guinda)
   El tema completo usa estas variables; cámbialas AQUÍ y se actualiza
   todo el sitio. (Antes el tema era morado.)
   ════════════════════════════════════════════════════════════════ */
:root {
  --brand:        #9e1b32;  /* guinda principal */
  --brand-strong: #7a1428;  /* guinda oscuro / texto destacado */
  --brand-2:      #b5253f;  /* guinda claro / 2do color del degradado */
  --brand-dark:   #6e1023;  /* guinda muy oscuro */
  --brand-deep:   #5e0f1f;  /* guinda profundo */
  --brand-soft:   #d98a99;  /* guinda apagado / acento suave */
  --brand-100:    #f7e7ea;  /* tinte claro de fondo */
  --brand-150:    #f0d6dc;  /* borde suave */
  --brand-200:    #e8c3cb;  /* borde / hover claro */
  --brand-50:     #fcf4f6;  /* fondo casi blanco */
  --splash-1:     #2a0810;  /* degradado del splash (oscuro) */
  --splash-2:     #5e0f1f;  /* degradado del splash (medio) */
  --splash-3:     #1a0509;  /* degradado del splash (oscuro) */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Quita el recuadro azul rectangular que Chrome/Android pinta al tocar botones (no seguía la
   forma redondeada del botón — feedback de Milu). El feedback de toque queda en :active/.active. */
* { -webkit-tap-highlight-color: transparent; }
body {
  min-height: 100vh;
  font-family: 'Inter', Arial, sans-serif;
  background: linear-gradient(135deg, var(--splash-1) 0%, var(--splash-2) 50%, var(--splash-3) 100%);
  color: #27303f;
}
.text-input, select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  font-size: 0.95rem;
  font-family: 'Inter', Arial, sans-serif;
  background: #fafafa;
  color: #111827;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.text-input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12);
}
/* Categoría activa (Games/Vocabulario): guinda sólido para que se note claramente */
.chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  font-weight: 600;
}
.start-btn {
  margin-top: 28px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: 'Inter', Arial, sans-serif;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4);
}
.start-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(124,58,237,0.5);
}
.start-btn:active { transform: translateY(0); }
/* Iconos SVG dentro de los botones del header: algo más chicos que en el drawer */
.header-actions .nav-ic { width: 20px; height: 20px; }
#nav-toggle .nav-ic { width: 22px; height: 22px; }
.es-toggle.active { background: #fff; color: var(--brand-strong); border-color: #fff; }
.es-toggle.active:hover { background: #f1f1f1; }
.mode-btn.active { background: white; color: var(--brand-strong); font-weight: 600; }
/* ── Pantalla de Login / Registro ── */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  background: white;
  border-radius: 20px;
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.auth-card .text-input { width: 100%; margin-bottom: 10px; }
.auth-hero { text-align: center; margin-bottom: 20px; }
.auth-hero h1 { color: var(--brand-strong); font-size: 1.5rem; margin-top: 4px; }
.auth-sub { color: #6b7280; font-size: 0.9rem; margin-top: 6px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 10px; border: none; border-radius: 10px; cursor: pointer;
  background: #f3f4f6; color: #6b7280; font-weight: 600; font-family: 'Inter', Arial, sans-serif;
}
.auth-tab.active { background: var(--brand); color: white; }
.auth-error { color: #dc2626; font-size: 0.85rem; margin: 4px 0; text-align: center; }
.auth-divider { display: flex; align-items: center; text-align: center; color: #9ca3af; margin: 16px 0; font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.auth-divider span { padding: 0 12px; }
.auth-guest-btn {
  width: 100%; padding: 12px; border: 1.5px solid var(--brand-150); border-radius: 12px;
  background: white; color: var(--brand-strong); font-weight: 600; cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
}
.auth-guest-btn:hover { border-color: var(--brand); }
.auth-guest-btn small { display: block; font-size: 0.72rem; color: #9ca3af; font-weight: 500; margin-top: 2px; }
.auth-forgot { display: block; width: 100%; background: none; border: 0; color: var(--brand-strong);
  font-size: .82rem; cursor: pointer; padding: 6px 0 2px; font-family: 'Inter', Arial, sans-serif; text-align: center; }
.auth-forgot:hover { text-decoration: underline; }
.rc-modal .text-input { margin: 6px 0; }
/* Rótulo "lo más rápido" sobre el botón de Google (camino principal de entrada). */
.auth-fast {
  text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--brand-strong);
  margin: 0 0 8px;
}
.auth-fast .es-hint { display: block; font-size: 0.72rem; font-weight: 500; color: #9ca3af; }
/* Botón "Continuar con Google" — estilo blanco según las guías de marca de Google.
   Realzado (arriba, camino principal): sombra base + más aire para que sea el ancla visual. */
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; margin-bottom: 4px; border: 1.5px solid #dadce0;
  border-radius: 12px; background: white; color: #3c4043; font-weight: 600;
  font-family: 'Inter', Arial, sans-serif; font-size: 1rem; cursor: pointer;
  text-decoration: none; box-shadow: 0 1px 4px rgba(60,64,67,.16);
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}
.auth-google-btn:hover { box-shadow: 0 2px 8px rgba(60,64,67,.28); border-color: #d2d4d7; }
.auth-google-btn:active { transform: translateY(1px); }
.auth-google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-hint { margin-top: 14px; text-align: center; font-size: 0.82rem; color: #6b7280; line-height: 1.4; }
/* Callout que aclara que el usuario ES el nombre público de juego (aparece al Crear cuenta). */
.auth-name-hint { font-size: 0.8rem; color: #6b7280; line-height: 1.4; text-align: left;
  padding: 2px 2px 0; margin: -2px 0 10px; }
.auth-name-hint b { color: var(--brand); }
.auth-demos { margin-top: 20px; text-align: center; }
.auth-demos-title { font-size: 0.8rem; color: #9ca3af; }
.auth-demos-row { display: flex; gap: 8px; margin-top: 8px; }
.auth-demo-btn {
  flex: 1; padding: 10px; border: 1px dashed var(--brand-200); border-radius: 10px;
  background: var(--brand-50); color: var(--brand-strong); font-weight: 600; cursor: pointer;
  font-size: 0.85rem; font-family: 'Inter', Arial, sans-serif;
}
.auth-demo-btn:hover { border-style: solid; border-color: var(--brand); }
.daily-pop-head .es-hint { display: none; font-size: 0.72rem; font-weight: 600; color: #9aa0a6; }
body.show-es .daily-pop-head .es-hint { display: block; }
#tour-title .es-hint, #tour-body .es-hint { display: none; }
body.show-es #tour-title .es-hint { display: block; font-size: 0.8rem; color: #9aa0a6; font-weight: 700; }
body.show-es #tour-body .es-hint { display: block; margin-top: 3px; font-size: 0.82rem; color: #6b7280; }
.tour-skip .es-hint, .tour-next .es-hint { display: none; }
/* En chat/roleplay el FAB tapaba el botón de enviar (mismo rincón) → ocultarlo en esos modos.
   !important porque el FAB se muestra con un display:flex INLINE (JS) que si no, le gana. */
body.hide-rakku-fab .rakku-fab, body.hide-rakku-fab #rakku-panel { display: none !important; }
.rakku-chip .es-hint, .rakku-act .es-hint, .rakku-msg .es-hint { display: none; }
body.show-es .rakku-msg .es-hint { display: block; margin-top: 3px; color: #6b7280; font-size: 0.82rem; }
/* El icono de cuadrícula que inyecta el JS va separado del texto "Modes" */
.nav-drawer-title .nav-ic { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
.nav-item.active { background: var(--brand); color: white; }
/* Iconos SVG del menú (reemplazan los emoji): un solo trazo, heredan el color del item
   (gris normal, blanco en el activo, gracias a stroke:currentColor). */
.nav-ic { width: 24px; height: 24px; flex: none; display: inline-flex; vertical-align: middle; color: inherit; }
.nav-ic svg { width: 100%; height: 100%; display: block; }
.nav-hint .es-hint { display: none; }
body.show-es .nav-hint .es-hint { display: block; margin-top: 1px; }
.nav-item.active .nav-star:hover { background: rgba(255,255,255,0.18); }
/* estrella dorada = tu inicio */
.nav-item.active .nav-star.on { color: #ffdf7e; }
.nav-item .es-hint { margin-top: 1px; font-size: 0.74rem; font-weight: 600; }
/* En el modo activo (fondo guinda) el gris pierde contraste: lo aclaramos. */
.nav-item.active .es-hint { color: rgba(255,255,255,0.85); }
.nav-uisize-label .es-hint { font-weight: 500; }
/* ===== Sensación de app nativa: sin selección/sombreado accidental en la interfaz =====
   Recomendación de Milu (UI bancaria): que la UI no se pueda sombrear como una página web.
   Se DESACTIVA la selección en todo el chrome y se REACTIVA solo en el contenido que el
   usuario querría leer o copiar (chat, lectura, guion, feedback, campos de texto). */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; user-select: text; }
.species-btn.active {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand-strong);
}
.species-special.active { border-color: #1e2a6b; background: #e6ebff; color: #1e2a6b; }
.stance-btn.active { border-color: var(--brand); background: var(--brand-50); }
.stance-btn.active .stance-name { color: var(--brand-strong); }
.arena-tab.active { border-color: var(--brand); background: var(--brand-50); color: var(--brand-strong); }
.hs-opt.active { border-color: var(--brand); background: var(--brand-50); }
@media print {
  body * { visibility: hidden; }
  #diploma, #diploma * { visibility: visible; }
  #diploma { position: absolute; left: 0; top: 0; box-shadow: none; }
  .diploma-close, .diploma-print { display: none !important; }
}
.pet-codex-btn .es-hint { color: #d9b24e; }
/* El FAB de Rakku es fijo y se come el rincón inferior derecho. En móvil eso dejaba celdas del
   Match —que hay que TOCAR— permanentemente debajo del botón, sin forma de sacarlas con scroll.
   Como el FAB es global, la holgura también: las 19 vistas scrollean sobre el mismo botón.
   En chat/roleplay el FAB se oculta (body.hide-rakku-fab), así que ahí no se añade nada. */
@media (max-width: 560px) {
  body:not(.hide-rakku-fab) .exercise-view { padding-bottom: 84px; }
}
/* Icono de modo inyectado al inicio del título de sección (applyTitleIcons) */
.ex-title .nav-ic { width: 24px; height: 24px; vertical-align: -5px; margin-right: 8px; }
.guide-tab.active { color: var(--brand-strong); border-bottom-color: var(--brand-strong); }
.guide-panel.active { display: block; }
.ai-badge .stat-ic { width: 0.9em; height: 0.9em; }
.pet-ai-credit .stat-ic { width: 0.95em; height: 0.95em; font-style: normal; color: #b58900; }
.ai-loading-spark .stat-ic { width: 38px; height: 38px; animation: aiSpark 1.15s ease-in-out infinite; }
.ai-stack-head .stat-ic { width: 1.05em; height: 1.05em; color: #d4a017; }
.ai-stack-row .nav-ic { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 1px; }
.story-game .ex-title .nav-ic { width: 24px; height: 24px; vertical-align: -5px; margin-right: 6px; }
.story-img--gen .ai-loading-spark .stat-ic { width: 22px; height: 22px; }
.story-ungraded-icon .stat-ic { width: 40px; height: 40px; opacity: .55; }
.lp-replay .nav-ic { width: 22px; height: 22px; }
.stw-mic .nav-ic { width: 22px; height: 22px; }
.wai-head .stat-ic { width: 1.1em; height: 1.1em; color: #d4a017; }
.vocab-tab.active {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: white;
  border-color: transparent;
}
.vstyle-btn.active { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent; }
.ex-tab .es-hint { font-size: 0.66rem; opacity: .8; }
.ex-tab.active { background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent; }
body.show-es .chip small,
body.show-es .vocab-tab small,
body.show-es .field-label small { display: block; }
/* Pista en español reutilizable (UI dinámica): inglés primario siempre,
   español visible SOLO en A1 (body.show-es). Mantiene la inmersión en niveles altos. */
/* Ayuda en español: secundaria pero LEGIBLE y moderna (sin itálica, más contraste y aire). */
.es-hint { display: none; color: #5c6470; font-weight: 500; font-style: normal; font-size: 0.8em; line-height: 1.4; margin-top: 3px; letter-spacing: 0.002em; }
body.show-es .es-hint { display: block; }
/* es-hint sobre botones de fondo oscuro (guinda) → color claro legible */
.start-btn .es-hint, .ex-btn .es-hint, .home-levelup .es-hint { color: rgba(255,255,255,0.9); font-weight: 600; }
/* Sobre los headers guinda (fondo oscuro) el gris se pierde → blanco translúcido legible. */
.auth-sub .es-hint, .subtitle .es-hint, .splash-tagline .es-hint { color: rgba(255, 255, 255, 0.74); }
/* Subtítulos ES dentro de las tarjetas de features (fondo guinda translúcido) → blanco legible */
.splash-feat .es-hint { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.game-emoji .nav-ic { width: 30px; height: 30px; }
.size-btn.active {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: white;
  border-color: transparent;
}
.listen-tab.active {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: white;
  border-color: transparent;
}
.auth-legal-link {
  display: block; margin: 14px auto 0; background: none; border: none; cursor: pointer;
  font-size: .76rem; color: #9aa0a6; text-decoration: underline; text-underline-offset: 2px;
}
.auth-legal-link:hover { color: var(--brand-strong, #7a1f2b); }
.help-emoji .nav-ic { width: 26px; height: 26px; }
.help-q > summary .es-hint { display: none; font-weight: 600; }
body.show-es .help-q > summary .es-hint { display: block; margin-top: 2px; color: #6b7280; font-size: 0.78rem; }
/* ── Portada / Pantalla de bienvenida ── */
.splash-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  /* Backdrop pintado (gpt-image-1) con lavado guinda encima para que el texto se lea */
  background:
    linear-gradient(150deg, rgba(158,27,50,0.80) 0%, rgba(158,27,50,0.62) 45%, rgba(125,20,39,0.88) 100%),
    url('/static/img/splash_bg.webp') center / cover no-repeat;
  text-align: center;
}
.splash-content {
  max-width: 600px;
  color: white;
  animation: splash-in 0.7s ease;
}
.splash-hero {
  position: relative;
  display: inline-block;
}
.splash-hero-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
  animation: float 3s ease-in-out infinite;
}
.auth-logo-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(94, 15, 31, 0.3);
}
.splash-hero .splash-wave {
  position: absolute;
  right: -2px;
  bottom: 4px;
  font-size: 2.4rem;
  animation: float 3s ease-in-out infinite 0.4s;
}
.splash-title {
  font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin: 8px 0 0;
  letter-spacing: -1px;
}
/* Wordmark de marca "Speakuy" (Fredoka; la sílaba "uy" en naranja-cuy = el cuy dentro del nombre) */
.wordmark { font-family: 'Fredoka', 'Inter', system-ui, sans-serif; font-weight: 700; }
.wm-uy { color: #E8912E; }
/* naranja del cuy */
.splash-title .wm-uy { color: #F4A63C; }
.vocab-finish-msg .es-hint { display: block; font-family: 'Inter',sans-serif; font-weight: 400; font-size: .8rem; }
.pf-label .es-hint { font-weight: 400; }
.pf-adults-sum .es-hint { display: block; font-weight: 400; }
/* ===== Abracito de Rakku en el splash: "Hola" y "Hello" se abrazan (bilingüe) ===== */
.hug-greet { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 2px 0 10px; font-family: 'Fredoka', 'Baloo 2', system-ui, sans-serif;
  font-weight: 600; font-size: 1.2rem; color: #FBE9C4; }
.hug-word { display: inline-block; }
.hug-es { animation: hugLeft 3.6s ease-in-out infinite; }
.hug-en { animation: hugRight 3.6s ease-in-out infinite; }
.hug-heart { display: inline-block; font-size: 1rem; animation: hugHeart 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hug-es, .hug-en, .hug-heart { animation: none; } }
.saga-teaser .es-hint { display: block; color: #c9aab8; font-style: italic; }
.saga-badge .es-hint { display: inline; color: #d9b877; }
/* ===== Accesibilidad: tamaño de interfaz (escala el font-size raíz → todo crece) ===== */
html.ui-lg { font-size: 112.5%; }
/* Grande (~18px) */
html.ui-xl { font-size: 125%; }
/* Muy grande (~20px) */

/* ===== Layout de ESCRITORIO (≥900px) ===== */
/* Antes: la sidebar quedaba FIJA y abierta (se sentía desordenada / siempre abierta).
   Ahora: es un RAIL de iconos limpio que se expande al pasar el mouse (look limpio por
   defecto, modos a un vistazo). En pantallas táctiles (iPad, sin hover) se muestra la
   sidebar completa y etiquetada. Móvil (<900px) queda intacto (drawer con ☰). */
@media (min-width: 900px) {
  #nav-drawer {
    transform: none !important;         /* siempre presente, ya no es overlay con ☰ */
    position: fixed; left: 0; top: 0; height: 100dvh;
    z-index: 80;
    overflow-x: hidden;
  }
  .nav-drawer-head, .nav-hint { display: none; }        /* título/cerrar sobran en la sidebar fija */
  #nav-toggle, #nav-close, #nav-overlay { display: none !important; }
  /* Home en 2 columnas: el pet (héroe) a la izquierda, sugerencia + acciones a la derecha.
     Así deja de ser una columna angosta de móvil con medio monitor vacío al lado. */
  #home-content {
    display: grid;
    grid-template-columns: minmax(320px, 380px) 1fr;
    gap: 28px; align-items: start;
    max-width: 900px; margin: 0 auto;
  }
  .home-hero { max-width: none; margin: 0; position: sticky; top: 24px; }
  .home-side { display: flex; flex-direction: column; }
  .home-quick { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-levelup, .home-bell { max-width: none; }
  .pet-card { max-width: 620px; }
}
/* — Ratón (puntero fino): rail colapsado de 76px que se expande al hover — */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  #nav-drawer {
    width: 76px; padding: 12px 10px;
    box-shadow: 2px 0 14px rgba(0,0,0,0.06);
    transition: width 0.18s ease, box-shadow 0.18s ease;
  }
  #nav-drawer .nav-item { justify-content: center; gap: 0; padding: 12px 0; }
  #nav-drawer .nav-item > span:not(.nav-ic):not(.nav-dot),
  #nav-drawer .nav-star { display: none; }               /* oculta el texto, deja el icono y el dot */
  #nav-drawer .nav-group-label { justify-content: center; padding: 12px 0 4px; color: transparent; }
  #nav-drawer .nav-group-label span { display: none; }
  #nav-drawer .nav-group-label::before {                 /* raya divisoria en vez de texto */
    content: ''; width: 26px; height: 2px; border-radius: 2px; background: #e5e7eb;
  }
  #nav-drawer .nav-uisize { margin: 12px 6px 8px; }      /* rail colapsado: solo las 3 "A" */
  #nav-drawer .nav-uisize-label { display: none; }
  #nav-drawer .nav-uisize .vstyle-btn { padding: 6px 0; }
  #nav-drawer:hover .nav-uisize { margin: 12px 12px 8px; }
  #nav-drawer:hover .nav-uisize-label { display: block; }
  /* Al pasar el mouse: se expande y muestra texto + etiquetas */
  #nav-drawer:hover {
    width: 258px; padding: 12px;
    box-shadow: 6px 0 30px rgba(0,0,0,0.16);
  }
  #nav-drawer:hover .nav-item { justify-content: flex-start; gap: 12px; padding: 12px 14px; }
  #nav-drawer:hover .nav-item > span:not(.nav-ic):not(.nav-dot) { display: flex; }
  #nav-drawer:hover .nav-item:hover .nav-star { display: inline-flex; }
  #nav-drawer:hover .nav-group-label { justify-content: flex-start; padding: 14px 12px 4px; color: #9aa0a6; }
  #nav-drawer:hover .nav-group-label span { display: inline; }
  #nav-drawer:hover .nav-group-label::before { display: none; }
  .chat-shell {
    width: min(1080px, calc(100% - 124px));
    /* Centrado en el área a la derecha del rail de 76px (el hover se superpone, no reacomoda) */
    margin: 24px auto 24px calc(76px + (100% - 76px - min(1080px, calc(100% - 124px))) / 2);
  }
}
/* — Táctil (sin hover, p. ej. iPad): sidebar completa y etiquetada, sin depender del mouse — */
@media (min-width: 900px) and (hover: none) {
  #nav-drawer { width: 258px; box-shadow: 2px 0 18px rgba(0,0,0,0.10); }
  .chat-shell {
    width: min(1040px, calc(100% - 300px));
    margin: 28px auto 28px max(282px, calc(258px + (100% - 258px - min(1040px, calc(100% - 300px))) / 2));
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   ESCRITORIO — REPARTO DEL ANCHO POR VISTA (≥900px)
   El shell ya se ensancha a ~1080px, pero las vistas de adentro caían en
   dos extremos: unas quedaban en una ISLA angosta heredada del molde móvil
   (arena 560px, leaderboard 520px, pet 620px → mitad de la pantalla muerta)
   y otras se ESTIRABAN a 1016px sin re-maquetar (skills = filas de 1000px
   con una etiqueta chiquita; reading = línea de lectura larguísima).
   Aquí se reparte ese ancho: 2 columnas donde hay dos bloques distintos,
   grid de tarjetas donde hay una lista, y medida de lectura donde hay texto.
   Todo es SOLO-CSS y vive dentro del breakpoint: móvil queda intacto.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Anchos de referencia. Antes cada vista traía su número suelto (420/480/
     520/560/620); aquí hay una sola palanca por tipo de contenido. */
  :root {
    --w-col:  900px;   /* vista de 2 columnas (dos bloques que conviven) */
    --w-read: 68ch;    /* medida de lectura cómoda (~68 caracteres) */
  }

  /* ── ARENA: tu luchador fija a la izquierda, la elección de rival a la
     derecha. Antes tocaba bajar scrolleando para comparar rival vs stats. ── */
  .arena { max-width: var(--w-col); }
  #arena-pve {
    display: grid; grid-template-columns: 300px 1fr;
    /* filas explícitas: sin esto, tu luchador (alto) estira la fila 1 y abre
       un hueco enorme bajo la intro. Con las 6 filas declaradas puede ocupar
       la columna entera (1 / -1) y cada bloque de la derecha va a su fila. */
    grid-template-rows: repeat(6, min-content);
    gap: 12px 26px; align-items: start;
  }
  #arena-you { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 8px; }
  #arena-pve > .ex-intro, #arena-pve > #combat-guide-btn,
  #arena-pve > #bsk-toggle, #arena-pve > #bsk-desc,
  #arena-pve > .arena-pick-label, #arena-pve > #arena-rivals { grid-column: 2; }

  /* ── LEADERBOARD: contexto (intro + bandas + tu posición) a la izquierda,
     el ranking a la derecha, que es lo que se viene a mirar. ── */
  .leaderboard { max-width: var(--w-col); }
  #lb-study, #lb-arena {
    display: grid; grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 10px 24px; align-items: start;
  }
  #lb-study > .ex-intro, #lb-study > .lb-cefr-tabs, #lb-study > .lb-me,
  #lb-arena > .ex-intro, #lb-arena > .lb-cefr-tabs, #lb-arena > .lb-me { grid-column: 1; }
  #lb-study > .lb-list, #lb-arena > .lb-list { grid-column: 2; grid-row: 1 / span 3; }

  /* ── SKILLS: las competencias ya eran tarjetas, solo estaban apiladas a
     todo lo ancho. En rejilla se ven ~3 de un vistazo (es una LISTA para
     escanear, no un texto para leer). ── */
  .skills-group {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px; align-items: start;
  }
  .skills-group-title { grid-column: 1 / -1; }

  /* ── READING: el texto generado se capa a medida de lectura. Una línea de
     1000px se lee PEOR que una de 600 (el ojo pierde el renglón). ── */
  #reading-content, .guide-search, #reading-view > .guide-picker > .ex-intro {
    max-width: var(--w-read); margin-left: auto; margin-right: auto;
  }

  /* ── PET: la ficha medía ~1900px de alto en una sola columna. Identidad
     (arte + nombre + evolución + linaje) a la izquierda; detalle
     (stats, cuidados, postura, perks) a la derecha. ── */
  .pet-card {
    max-width: 940px;
    display: grid; grid-template-columns: 320px 1fr;
    gap: 0 30px; align-items: start;
  }
  /* Cada columna es su PROPIO flujo (no ítems sueltos en un grid compartido):
     si comparten grid, las filas se alinean entre columnas y aparecen huecos
     enormes al lado de los bloques altos (el arte del pet mide 200px). */
  .pet-col { display: block; min-width: 0; }
  .pet-col-id { position: sticky; top: 8px; }
  .pet-card .pet-bar, #pet-flavor, #pet-care { width: 100%; max-width: none; }
}
.splash-tagline {
  font-size: 1.2rem;
  opacity: 0.92;
  margin: 16px auto 0;
  max-width: 480px;
  line-height: 1.5;
}
.splash-tagline em { font-style: italic; font-weight: 600; }
.splash-features {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 36px 0;
}
.splash-feat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 20px 18px;
  width: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.35;
  backdrop-filter: blur(4px);
}
.sf-icon { font-size: 2rem; color: #fff; }
.sf-icon .nav-ic { width: 30px; height: 30px; }
.splash-btn {
  padding: 16px 48px;
  border: none;
  border-radius: 50px;
  background: white;
  color: var(--brand-strong);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transition: transform 0.15s;
}
.splash-btn:hover { transform: translateY(-2px) scale(1.02); }
.splash-btn:active { transform: scale(0.98); }
.bsk-mode-btn.active { border-color: var(--brand); background: var(--brand-50); color: var(--brand-strong); }
.bsk-mode-btn[data-bsk="berserker"].active { border-color: #ef4444; background: #fee2e2; color: #b91c1c; }
.bsk-desc .es-hint { display: block; }
.lb-cefr-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.lb-cefr-tab.active .lb-you-dot { color: #fff; }
.home-more-btn .nav-ic, .home-more-btn .stat-ic { width: 16px; height: 16px; }
/* Iconos SVG del set del menú, ahora también en los chips de la home y el botón de recordatorios */
.home-chip .nav-ic, .home-bell .nav-ic { width: 20px; height: 20px; }
.home-bell .nav-ic { vertical-align: -5px; margin-right: 5px; }
/* Iconos de línea "en tamaño texto" para las estadísticas del home-hero (XP, racha, evolución,
   diarias, candado de invitado): escalan con la tipografía y heredan el color del texto. */
.stat-ic { display: inline-flex; width: 1.05em; height: 1.05em; vertical-align: -0.16em; color: inherit; flex: none; }
.stat-ic svg { width: 100%; height: 100%; display: block; }
.home-shop .stat-ic { vertical-align: -0.16em; margin-right: 2px; }
.home-shop .es-hint { display: block; font-weight: 600; font-size: .78rem; opacity: .85; margin-top: 2px; }
.home-skills .es-hint { display: block; font-weight: 600; font-size: .78rem; color: #6366f1; margin-top: 2px; }
.home-bell .es-hint { font-weight: 600; }
.home-guest-signin .stat-ic, .home-guest-signin svg { vertical-align: -2px; margin-right: 4px; }
.lb-actions .stat-ic, .friend-actions .stat-ic { width: 16px; height: 16px; }
.social-refresh .stat-ic, #copy-pid .stat-ic { vertical-align: -2px; }
#add-friend-btn .stat-ic { width: 1em; height: 1em; vertical-align: -2px; margin-right: 3px; }
/* ── Móvil: que el encabezado quepa sin recortar ni encimar (XP/ES/ayuda visibles) ── */
@media (max-width: 560px) {
  .chat-header { padding: 10px 10px; gap: 6px; }
  .header-left { gap: 8px; }
  .header-text { display: none; }                /* en celular ocultamos el wordmark "Rakku" (el
                                                    avatar ya identifica la app) para que quepan
                                                    el chip de XP + ES + ayuda sin encimarse */
  .xp-chip { font-size: 0.62rem; padding: 3px 6px; }
  .daily-pill { font-size: 0.62rem; padding: 3px 7px; }
  .header-actions { gap: 5px; }
  .reset-btn { padding: 5px 8px; font-size: 0.8rem; }   /* ES y ❓ más compactos en móvil */
  /* App a pantalla completa en celular (sin marco/tarjeta flotante) */
  .chat-shell { width: 100%; margin: 0; height: 100vh; border-radius: 0; box-shadow: none; }
}
@keyframes aiSpark { 0%,100% { transform: scale(0.9) rotate(-8deg); opacity: 0.65; } 50% { transform: scale(1.2) rotate(12deg); opacity: 1; } }
@keyframes splash-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes hugLeft  { 0%,18%,100% { transform: translateX(0) rotate(0); }
                      45%,66% { transform: translateX(9px) rotate(-5deg); } }
@keyframes hugRight { 0%,18%,100% { transform: translateX(0) rotate(0); }
                      45%,66% { transform: translateX(-9px) rotate(5deg); } }
@keyframes hugHeart { 0%,25%,82%,100% { transform: scale(.5); opacity: .3; }
                      48%,62% { transform: scale(1.25); opacity: 1; } }