/* ═══════════════════════════════════════════════════════════════════════════
   CONCHA ÚNICA DE FLUENTA — sistema visual común del arcade.
   Iteración UX 1. Especificación: SISTEMA_CONCHA.md

   Tesis: Fluenta es un SITIO al que viajas, no un curso. Cada juego es una
   actividad dentro de ese sitio, así que todos comparten la misma concha.

   El sistema está EXTRAÍDO de las tarjetas 门口 / 楼下 / 白天 de `memorizar`,
   que eran ya el mejor patrón del producto: hanzi enorme, todo lo demás
   callado, una sola acción dorada, y una línea de calma abajo.

   Se incluye con dos líneas, antes que nada:
     <link rel="stylesheet" href="/games/fluenta-shell.css">
     <script src="/games/fluenta-shell.js"></script>
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color. Paleta cerrada: nada fuera de aquí. ───────────────────────── */
  --noche:      #131938;   /* fondo base */
  --noche-2:    #0d1230;   /* extremo del degradado */
  --tinta:      #1b2350;   /* superficie de tarjeta */
  --tinta-alta: #232c62;   /* superficie elevada */
  --linea:      #2a3268;   /* bordes */
  --oro:        #f6a623;   /* LA acción principal. Una por pantalla. */
  --oro-suave:  #ffd98a;   /* pinyin, acentos */
  --crema:      #fff4e0;   /* texto principal */
  --tenue:      #8f97c4;   /* texto secundario */
  --jade:       #3fae6a;   /* acierto — nunca acción */
  --jade-suave: #9fe8c6;
  --cinabrio:   #c4472f;   /* SOLO error */
  --cinabrio-s: #ff9d8a;

  /* ── Tipografía. El hanzi es el héroe. ────────────────────────────────── */
  --font: 'Nunito', system-ui, -apple-system, sans-serif;
  --cjk:  'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --t-hz:     5.2rem;   /* hanzi protagonista */
  --t-hz-sm:  2.4rem;   /* hanzi secundario */
  --t-py:     1.5rem;   /* pinyin */
  --t-es:     1.1rem;   /* significado */
  --t-meta:   .66rem;   /* tono, ayuda */
  --t-nota:   .72rem;   /* línea de calma */
  --t-paso:   .6rem;    /* contador de la concha */

  /* ── Espacio y forma ──────────────────────────────────────────────────── */
  --e1: 4px; --e2: 8px; --e3: 10px; --e4: 12px; --e5: 16px; --e6: 20px; --e7: 26px;
  --r-btn: 12px; --r-card: 18px; --r-pill: 99px;
  --col: 26rem;                       /* ancho máximo de columna */
  --concha-h: 48px;                   /* alto de la barra superior */
  --concha-top: calc(var(--concha-h) + env(safe-area-inset-top));
}

/* ── NUNCA BLANCO ───────────────────────────────────────────────────────────
   Causa raíz del fotograma blanco por el lado web: el `body` de casi todos los
   juegos es transparente (`rgba(0,0,0,0)`), así que asoma el blanco por defecto
   del WebView de Android. Se pinta el fondo en html Y en body, antes que nada. */
html, body {
  background: var(--noche);
  background-image: linear-gradient(180deg, var(--noche), var(--noche-2));
  background-attachment: fixed;
}
html { color-scheme: dark; }

/* ── LA CONCHA ────────────────────────────────────────────────────────────── */
#fshell {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000;
  height: var(--concha-top);
  padding: env(safe-area-inset-top) var(--e4) 0;
  display: flex; align-items: center; gap: var(--e4);
  background: linear-gradient(180deg, rgba(19,25,56,.96), rgba(19,25,56,.78) 70%, rgba(19,25,56,0));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font); color: var(--crema);
  pointer-events: none;                 /* solo los controles reciben toques */
}
#fshell > * { pointer-events: auto; }

/* Un solo ‹ para volver. Siempre en el mismo sitio, en todos los juegos. */
#fshell-back {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: rgba(27,35,80,.75);
  color: var(--crema); font: 900 1.15rem/1 var(--font); cursor: pointer;
  display: grid; place-items: center; padding: 0 2px 2px 0;
}
#fshell-back:active { transform: scale(.94); }

/* Progreso de la actividad. Oro sobre tinta. */
#fshell-prog { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--tinta); overflow: hidden; }
#fshell-prog i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--oro), var(--oro-suave)); transition: width .35s ease; }

#fshell-meta { flex: none; display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-paso); font-weight: 900; letter-spacing: .12em; color: var(--tenue); }
#fshell-paso { font-variant-numeric: tabular-nums; }
#fshell-time { font-variant-numeric: tabular-nums; color: var(--oro-suave); }
#fshell-time.hot { color: var(--cinabrio-s); }

#fshell-help {
  flex: none; width: 26px; height: 26px; border-radius: var(--r-pill);
  border: 1px solid var(--linea); background: rgba(27,35,80,.75);
  color: var(--tenue); font: 900 .78rem/1 var(--font); cursor: pointer; padding: 0;
}

/* El contenido del juego arranca por debajo de la concha. */
body.fshell-on { padding-top: var(--concha-top) !important; }

/* ── SE ABSORBEN LAS CAPAS ANTIGUAS ─────────────────────────────────────────
   ronda.js, a11y.js y game-feedback.js dibujaban cada uno sus propios elementos
   fijos con posiciones y z-index a mano. De ahí venían los solapamientos
   («Siguiente» tapando «atrapa: fruta»). La información útil pasa a la concha;
   los duplicados se ocultan. No se borra nada: se deja de pintar. */
#rnd-chip, #rnd-bar, #rnd-help,
#fluenta-a11y-btn, #fluenta-a11y-min, #fluenta-a11y-aviso,
/* arcade-base dibujaba su propia cabecera (←, título, marcador, reloj) y su
   propia barra de tiempo, justo donde va la concha. El marcador y el reloj se
   mudan a la concha; el ← y el título ya no hacen falta (el velo dice a dónde
   entras, y el ← de la concha es siempre el mismo). */
#ab-head, #ab-bar { display: none !important; }

/* Los tres puntos 🟢🟠🔴 salen de la experiencia del alumno.
   Siguen existiendo para el founder: ?debug=1 los devuelve (ver fluenta-shell.js). */
body:not(.fshell-debug) #gfb-wrap,
body:not(.fshell-debug) #gfb-sem { display: none !important; }

/* La salida deja de gritar. Regla del oro: el oro es de la acción principal.
   `[data-telarana-next]` era un botón dorado a pantalla completa; pasa a ser
   texto tenue dentro de la concha. */
[data-telarana-next] {
  position: static !important; background: none !important; border: none !important;
  color: var(--tenue) !important; font-size: var(--t-paso) !important;
  font-weight: 900 !important; letter-spacing: .1em !important;
  padding: 0 !important; box-shadow: none !important; opacity: .8;
}
[data-telarana-next]:active { opacity: 1; }

/* ── COMPONENTES ──────────────────────────────────────────────────────────── */
.f-wrap { width: 100%; max-width: var(--col); margin: 0 auto;
  padding: 0 var(--e5) calc(var(--e5) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--e4); }

.f-card { background: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r-card);
  padding: var(--e6) var(--e5); text-align: center;
  display: flex; flex-direction: column; gap: var(--e3); align-items: center; }

/* El hanzi, protagonista. En cualquier pantalla con contenido chino es el
   elemento más grande. Sin excepción. */
.f-hz    { font-family: var(--cjk); font-size: var(--t-hz); line-height: 1.05; font-weight: 900; color: var(--crema); }
.f-hz-sm { font-family: var(--cjk); font-size: var(--t-hz-sm); line-height: 1.1; font-weight: 900; color: var(--crema); }
.f-py    { font-size: var(--t-py); font-weight: 900; color: var(--oro-suave); letter-spacing: .02em; }
.f-es    { font-size: var(--t-es); color: var(--crema); }
.f-meta  { font-size: var(--t-meta); color: var(--tenue); }
.f-nota  { font-size: var(--t-nota); color: var(--tenue); text-align: center; line-height: 1.5; }

/* Botones. Uno solo puede ser oro por pantalla. */
.f-btn { font-family: inherit; border: 1px solid var(--linea); cursor: pointer;
  border-radius: var(--r-btn); padding: 13px var(--e5); font-weight: 900; font-size: .95rem;
  background: var(--tinta); color: var(--crema); }
.f-btn:active { transform: scale(.98); }
.f-btn--oro   { background: var(--oro); color: #3a2a00; border-color: var(--oro); }
.f-btn--ancho { width: 100%; }
.f-btn--quieto{ background: none; border: none; color: var(--tenue); font-size: var(--t-nota); padding: var(--e2); }
.f-fila { display: flex; gap: var(--e2); width: 100%; }
.f-fila .f-btn { flex: 1; }

/* Feedback. Jade acierto, cinabrio error. Nunca oro. */
.f-ok  { background: rgba(63,174,106,.20); border-color: var(--jade); color: var(--jade-suave); }
.f-mal { background: rgba(196,71,47,.20); border-color: var(--cinabrio); color: var(--cinabrio-s); }
@keyframes f-pulso-ok  { 0%,100%{box-shadow:0 0 0 0 rgba(63,174,106,0)} 40%{box-shadow:0 0 0 8px rgba(63,174,106,.22)} }
@keyframes f-pulso-mal { 0%,100%{box-shadow:0 0 0 0 rgba(196,71,47,0)} 40%{box-shadow:0 0 0 8px rgba(196,71,47,.22)} }
.f-pulso-ok  { animation: f-pulso-ok .45s ease; }
.f-pulso-mal { animation: f-pulso-mal .45s ease; }

/* ── VELO DE ENTRADA — la transición ────────────────────────────────────────
   Comparte EXACTAMENTE el fondo de la app, así que no hay salto de color en
   ningún punto: la transición se vuelve invisible en vez de ser un destello. */
#fshell-velo {
  position: fixed; inset: 0; z-index: 2147483600;
  background: linear-gradient(180deg, var(--noche), var(--noche-2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e5);
  font-family: var(--font); color: var(--crema); transition: opacity .22s ease;
}
#fshell-velo.va { opacity: 0; pointer-events: none; }
#fshell-velo .sitio { font-family: var(--cjk); font-size: 2.6rem; font-weight: 900; color: var(--oro-suave);
  animation: f-latido 1.9s ease-in-out infinite; }
#fshell-velo .donde { font-size: var(--t-nota); color: var(--tenue); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 900; }
#fshell-velo .lento { font-size: var(--t-nota); color: var(--tenue); opacity: 0; transition: opacity .4s; }
#fshell-velo.tarda .lento { opacity: .85; }
@keyframes f-latido { 0%,100%{opacity:.55;transform:scale(.98)} 50%{opacity:1;transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
  #fshell-velo .sitio { animation: none; opacity: 1; }
  .f-pulso-ok, .f-pulso-mal { animation: none; }
  #fshell-prog i, #fshell-velo { transition: none; }
}