@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #12142b;
  --bg-elevated: #1b1e3d;
  --bg-panel: #1f2244;
  --line: #33375f;
  --text: #ecebf6;
  --text-muted: #8c8db0;
  --calculo: #c8f04b;
  --memoria: #5bc9ff;
  --logica: #f0a742;
  --percepcion: #c48bff;
  --danger: #ff6b5b;
  --home-ranking: #ffc94a;
  --home-training: #ec4899;
  --home-profile: #38bdf8;
  --home-vip: #a855f7;
  --home-settings: #8b93c9;
  /* Dedicadas a la pantalla de Entrenamiento (Training Master v1) — a
     propósito NO reutilizan --calculo/--memoria/--logica/--percepcion:
     esas variables ya se usan en Competición/minijuegos con OTRO
     esquema de color, y cambiarlas habría alterado pantallas que esta
     tarea no debía tocar. */
  --training-calc: #38bdf8;
  --training-mem: #ec4899;
  --training-logic: #8ee000;
  --training-percep: #f5a623;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
}

#app {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 20px 40px;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Menú principal ---------- */
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
  margin: 12px 0 4px;
}
.brand-tag {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 32px;
}

.btn-play {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--calculo);
  border: none;
  padding: 20px;
  width: 100%;
  margin-bottom: 24px;
}
.btn-play:active { transform: translateY(1px); }

/* Active-round-only mobile policy: remove browser gestures that compete with fast answers. */
.gameplay-surface {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}
.gameplay-surface button,
.gameplay-surface [role="button"],
.gameplay-surface input,
.gameplay-surface select {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.gameplay-fullscreen-slot:empty { display: none; }
.gameplay-fullscreen-button { margin-top: 10px; }

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 16px 4px;
  font-size: 1.05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-item:hover { color: var(--memoria); }
.menu-item .hint { color: var(--text-muted); font-size: 0.85rem; }

.vip-toggle-row {
  margin-top: auto;
  padding-top: 24px;
}

/* ========================================================
   HOME MASTER v1 — todo escaleado bajo .home-screen para no
   afectar visualmente ninguna otra pantalla del proyecto.
   ======================================================== */
.home-screen {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* Decorative glows must not widen the mobile viewport. */
  padding-top: 4px;
}
.home-screen::before,
.home-screen::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
.home-screen::before {
  width: 260px;
  height: 260px;
  top: -60px;
  right: -80px;
  background: radial-gradient(circle, var(--percepcion), transparent 70%);
}
.home-screen::after {
  width: 220px;
  height: 220px;
  bottom: 120px;
  left: -90px;
  background: radial-gradient(circle, var(--memoria), transparent 70%);
}

.home-header { margin-bottom: 20px; }
.home-account {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  min-height: 44px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: .85rem;
  overflow-wrap: anywhere;
}
.home-account-greeting { color: var(--text); }
.home-account-action {
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--memoria);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-account-action:hover { color: var(--calculo); }
.home-account-action:focus-visible { outline: 2px solid var(--calculo); outline-offset: 2px; border-radius: 4px; }
.home-account-action:active { opacity: .7; }
.home-account-action:disabled { opacity: .5; cursor: wait; }
.home-account-error { width: 100%; text-align: right; color: var(--danger); }
.home-import {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-panel);
  padding: 16px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.home-import h2 { font-size: 1rem; margin: 0 0 8px; }
.home-import p { margin: 0 0 12px; color: var(--text-muted); }
.home-import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-import-actions button { min-height: 44px; white-space: normal; }
.home-import-status { margin-top: 8px; }
.home-sync-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: .85rem; margin-bottom: 12px; }
.home-brand-row { display: flex; align-items: center; gap: 10px; }
.home-brand-icon {
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  object-fit: cover;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 2px solid var(--home-training);
  flex-shrink: 0;
}
.home-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(90deg, var(--memoria), var(--calculo) 55%, var(--home-training));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-tagline {
  color: var(--text-muted);
  font-size: clamp(0.8rem, 3vw, 0.95rem);
  margin: 6px 0 0 4px;
}

.home-score-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-elevated));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.home-score-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-score-label {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--home-ranking);
  border: 1px solid var(--home-ranking);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 6px;
}
.home-score-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.home-score-value-empty { color: var(--text-muted); }
.home-score-sub { color: var(--text-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; }
.home-score-mascot {
  width: clamp(84px, 26vw, 130px);
  height: clamp(84px, 26vw, 130px);
  object-fit: contain;
  flex-shrink: 0;
}

.home-play-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 18px 22px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, #a8e639, var(--calculo) 60%, #7cc428);
  box-shadow: 0 10px 24px rgba(200, 240, 75, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.home-play-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(200, 240, 75, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.home-play-btn:active { transform: translateY(1px); }
.home-play-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.home-play-icon { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.home-play-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.home-play-title { font-family: var(--font-display); font-size: clamp(1.3rem, 6vw, 1.6rem); font-weight: 700; color: #16281a; letter-spacing: 0.01em; }
.home-play-subtitle { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: #2d4a1f; }

.home-explore-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 12px 2px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 420px) {
  .home-grid { grid-template-columns: 1fr; }
}

.home-card,
.home-settings-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.home-card { flex-wrap: wrap; position: relative; }
.home-card:hover, .home-settings-card:hover { transform: translateY(-2px); }
.home-card:focus-visible, .home-settings-card:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.home-card-icon { width: clamp(40px, 12vw, 52px); height: clamp(40px, 12vw, 52px); object-fit: contain; flex-shrink: 0; }
.home-card-icon-small { width: 38px; height: 38px; }
.home-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.85rem, 4vw, 1rem); letter-spacing: 0.01em; overflow-wrap: break-word; }
.home-card-subtitle { color: var(--text-muted); font-size: 0.75rem; overflow-wrap: break-word; }
.home-card-arrow { margin-left: auto; font-size: 1.1rem; opacity: 0.7; align-self: flex-end; }

.home-card-ranking { border-color: color-mix(in srgb, var(--home-ranking) 45%, var(--line)); }
.home-card-ranking .home-card-arrow, .home-card-ranking .home-card-title { color: var(--home-ranking); }
.home-card-training { border-color: color-mix(in srgb, var(--home-training) 45%, var(--line)); }
.home-card-training .home-card-arrow, .home-card-training .home-card-title { color: var(--home-training); }
.home-card-profile { border-color: color-mix(in srgb, var(--home-profile) 45%, var(--line)); }
.home-card-profile .home-card-arrow, .home-card-profile .home-card-title { color: var(--home-profile); }
.home-card-vip { border-color: color-mix(in srgb, var(--home-vip) 45%, var(--line)); }
.home-card-vip .home-card-arrow, .home-card-vip .home-card-title { color: var(--home-vip); }

.home-settings-card {
  width: 100%;
  margin-bottom: 20px;
  opacity: 0.9;
}
.home-settings-card .home-card-title { font-size: 0.9rem; }
.home-settings-card .home-card-arrow { color: var(--home-settings); font-size: 1.3rem; }

.home-footer-categories {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  margin: 8px 0 4px;
}
.home-build-tag {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.7rem;
  margin: 0;
  opacity: 0.6;
}

/* Microtransiciones de entrada de modo: breves y deliberadamente distintas. */
.av-navigation-training-enter .home-screen { pointer-events: none; animation: navigation-training-enter 320ms ease-out both; }
.av-navigation-competition-enter .home-screen { pointer-events: none; animation: navigation-competition-enter 400ms cubic-bezier(.22,.75,.25,1) both; }
@keyframes navigation-training-enter {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  45% { transform: translateY(-3px) scale(.995); filter: brightness(1.08); }
  100% { opacity: 0; transform: translateY(-10px) scale(.985); filter: brightness(1.12); }
}
@keyframes navigation-competition-enter {
  0% { opacity: 1; transform: scale(1); filter: contrast(1) brightness(1); }
  42% { transform: scale(1.012); filter: contrast(1.1) brightness(1.08); }
  100% { opacity: 0; transform: scale(.97); filter: contrast(1.18) brightness(.78); }
}

/* ---------- Pantalla de juego ---------- */
.category-banner {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.category-banner-icon { display: inline-block; width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.game-name { color: var(--text-muted); margin-bottom: 20px; }

.hud {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.hud-progress { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-muted); }
.timer-bar-track {
  height: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
}
.timer-bar-fill {
  height: 100%;
  background: var(--danger);
  width: 100%;
  transition: width 0.1s linear;
}

.question-content { min-height: 220px; }
.prompt { color: var(--text-muted); margin: 0 0 12px; }
.equation, .chain, .syllogism { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 20px; }
.equation-box {
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 28px 12px;
  margin: 0 0 24px;
}
.digits-display { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: 0.2em; text-align: center; margin: 24px 0; word-break: break-all; }

.choice-row, .choice-grid {
  display: grid;
  gap: 10px;
}
.choice-row { grid-template-columns: 1fr 1fr; }
.choice-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
.choice-box {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 18px 8px;
}
.choice-box:hover { border-color: var(--memoria); }
.color-choice { height: 56px; }

.numeric-display {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.08em;
  text-align: center;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 14px;
  margin: 0 auto 16px;
  max-width: 320px;
}
.numeric-display[data-empty="true"] { color: var(--text-muted); }

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 320px;
  margin: 0 auto;
}
.numpad-key {
  aspect-ratio: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numpad-key:active { background: var(--bg-elevated); }
.numpad-key-ok { background: var(--memoria); color: var(--bg); font-weight: 600; font-size: 1.2rem; }

/* Variante compacta — usada donde el teclado comparte pantalla con otro
   contenido grande (ej. Conteo espacial), para que quepan teclado +
   contenido + barra de tiempo sin scroll. */
.numeric-display.numpad-compact { max-width: 260px; font-size: 1.6rem; padding: 10px; }
.numpad-grid.numpad-compact { max-width: 260px; gap: 8px; }
.numpad-grid.numpad-compact .numpad-key { font-size: 1.4rem; }

.answer-form { display: flex; gap: 10px; }
.answer-input {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  padding: 14px;
}
.answer-form button {
  background: var(--memoria);
  border: none;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 18px;
}

.feedback { min-height: 24px; margin-top: 16px; font-weight: 600; }
.answer-explanation { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); margin-top: 6px; }
.feedback-ok, .feedback-correct { color: var(--calculo); }
.feedback-bad, .feedback-incorrect, .feedback-timeout { color: var(--danger); }
.feedback-time-up { color: var(--text-muted); }
.feedback-partial { color: #e7b84b; }

.competition-results {
  position: relative;
  align-self: center;
  width: min(960px, calc(100vw - 40px));
  min-width: 0;
  isolation: isolate;
  overflow-x: clip;
}
.competition-results::before,
.competition-results::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.18;
  pointer-events: none;
}
.competition-results::before {
  width: 260px;
  height: 260px;
  top: 30px;
  left: -80px;
  background: var(--percepcion);
}
.competition-results::after {
  width: 300px;
  height: 300px;
  top: 110px;
  right: -90px;
  background: var(--memoria);
}
.competition-results > .results-title {
  margin: 8px 0 20px;
  text-align: center;
}
.competition-results .results-title,
.competition-results .brain-score,
.competition-results .brain-score-label,
.competition-results .results-mascot,
.competition-results .result-category,
.competition-results .result-actions {
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.24s ease,
    background-color 0.24s ease, box-shadow 0.24s ease;
}
.competition-results.has-active-category .results-title,
.competition-results.has-active-category .result-actions { opacity: 0.34; }
.competition-results.has-active-category .brain-score,
.competition-results.has-active-category .brain-score-label { opacity: 0.68; }
.competition-results.has-active-category .results-mascot { opacity: 0.64; filter: saturate(0.78); }
.competition-results.has-active-category .cognitive-radar-wrap { opacity: 0.48; }
.competition-results.has-active-category .result-category:not(.is-active) {
  opacity: 0.38;
  filter: saturate(0.65);
}
.result-total, .result-category-value { font-variant-numeric: tabular-nums; }
.result-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.result-journey-step {
  overflow: hidden;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--bg-panel);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 1.2vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.55;
  transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.result-journey-step.is-current {
  color: var(--text);
  border-color: var(--calculo);
  box-shadow: 0 0 15px rgba(56, 207, 255, 0.22);
  opacity: 1;
}
.result-journey-step.is-settled { color: var(--text); border-color: var(--memoria); opacity: 1; }
.competition-results.is-anticipating .results-score-cloud { animation: result-anticipation 0.7s ease-in-out both; }
.results-score-cloud.is-pulsing { animation: result-score-pulse 0.17s ease-out; }
.competition-results.is-resolved .results-hero { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 34px rgba(56, 207, 255, 0.2); }
.results-hero {
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--memoria) 32%, var(--line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 19% 55%, rgba(36, 190, 255, 0.15), transparent 46%),
    radial-gradient(circle at 82% 48%, rgba(139, 92, 246, 0.12), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-panel) 96%, #174c78), var(--bg-elevated));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 30px rgba(63, 184, 255, 0.09);
}
.results-score-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: clamp(28px, 4vw, 40px) 12px clamp(22px, 3vw, 30px);
  background: radial-gradient(circle at 56% 48%, rgba(32, 196, 255, 0.10), transparent 58%);
}
.results-score-cloud {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, clamp(190px, 22vw, 245px));
  min-height: 138px;
  padding: 24px 18px 18px;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 48% 52% 46% 54% / 52% 48% 52% 48%;
  background: linear-gradient(155deg, #ffffff 0%, #eef9ff 62%, #ddecff 100%);
  filter: drop-shadow(0 12px 18px rgba(0, 20, 70, 0.24)) drop-shadow(0 0 18px rgba(70, 195, 255, 0.18));
}
.results-score-cloud::before,
.results-score-cloud::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: linear-gradient(150deg, #ffffff, #e9f7ff 72%, #dbeeff);
}
.results-score-cloud::before {
  width: 43%;
  aspect-ratio: 1;
  top: -25%;
  left: 13%;
}
.results-score-cloud::after {
  width: 36%;
  aspect-ratio: 1;
  top: -17%;
  right: 12%;
}
.results-score-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}
.results-score-panel .brain-score {
  font-size: clamp(3.55rem, 6vw, 4.75rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #073b80;
  background: linear-gradient(135deg, #062f6f 12%, #0758ae 58%, #087aa1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
  -webkit-text-fill-color: transparent;
}
.results-score-panel .brain-score-label {
  margin: 10px 0 0;
  color: #123b63;
  font-family: var(--font-display);
  font-size: clamp(0.68rem, 1.25vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.results-mascot-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
  min-width: 0;
  width: 100%;
}
.results-mascot-halo {
  position: relative;
  align-self: center;
  display: grid;
  place-items: end center;
  width: min(100%, clamp(170px, 18vw, 195px));
  aspect-ratio: 1222 / 1287;
  flex-shrink: 0;
}
.results-mascot-halo::before {
  content: '';
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  bottom: 8%;
  border-radius: 50%;
  background: rgba(29, 198, 255, 0.22);
  filter: blur(25px);
}
.results-mascot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.results-mascot.is-reacting { animation: result-mascot-react 0.42s ease-out both; }
.results-mascot-stack[data-mascot-state="celebration-high"] .results-mascot-halo::before {
  background: rgba(255, 205, 67, 0.25);
}
.results-mascot-bubble {
  position: relative;
  max-width: min(100%, 190px);
  margin: 7px 0 0;
  padding: 9px 11px;
  border: 1px solid #d3e5f7;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 7px 19px rgba(0, 25, 70, 0.2);
  color: #123455;
  font-size: clamp(0.68rem, 1.1vw, 0.8rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.results-mascot-bubble[hidden] { display: none; }
.results-mascot-bubble:not([hidden]) { animation: result-mascot-bubble-in 0.3s ease-out both; }
.results-mascot-bubble::before {
  content: '';
  position: absolute;
  top: -11px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-top: 1px solid #d3e5f7;
  border-left: 1px solid #d3e5f7;
  background: #fff;
  transform: rotate(45deg);
}
.results-radar-panel {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 10px clamp(18px, 3vw, 30px);
  background:
    radial-gradient(circle at 60% 46%, rgba(98, 113, 255, 0.12), transparent 58%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018), rgba(124, 92, 246, 0.055));
  border-left: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.cognitive-radar-wrap {
  width: min(100%, 380px);
  margin: 0 auto;
  overflow: visible;
  transition: opacity 0.2s ease;
}
.cognitive-radar { display: block; width: 100%; height: auto; overflow: visible; }
.cognitive-radar-grid polygon {
  fill: color-mix(in srgb, var(--bg-elevated) 20%, transparent);
  stroke: color-mix(in srgb, var(--text-muted) 32%, transparent);
  stroke-width: 1;
}
.cognitive-radar-grid .cognitive-radar-ring-100 {
  stroke: color-mix(in srgb, var(--memoria) 48%, var(--line));
  stroke-width: 1.4;
}
.cognitive-radar-grid line {
  stroke: color-mix(in srgb, var(--text-muted) 34%, transparent);
  stroke-width: 1;
}
.cognitive-radar-profile {
  fill: color-mix(in srgb, var(--memoria) 22%, transparent);
  stroke: var(--memoria);
  stroke-width: 2.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--memoria) 48%, transparent));
}
.cognitive-radar-vertex {
  fill: var(--bg);
  stroke: var(--calculo);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cognitive-radar-vertex.is-revealed { opacity: 1; }
.cognitive-radar-vertex[data-radar-category="calculo"] { stroke: var(--calculo); }
.cognitive-radar-vertex[data-radar-category="memoria"] { stroke: var(--memoria); }
.cognitive-radar-vertex[data-radar-category="logica"] { stroke: var(--logica); }
.cognitive-radar-vertex[data-radar-category="percepcion"] { stroke: var(--percepcion); }
.cognitive-radar-vertex.is-landing { animation: cognitive-radar-landing 0.28s ease-out; }
.cognitive-radar-label {
  fill: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.025em;
}
.cognitive-radar.is-resolved .cognitive-radar-profile { animation: cognitive-radar-resolve 0.48s ease-out; }
.cognitive-radar.is-immediate .cognitive-radar-profile,
.cognitive-radar.is-immediate .cognitive-radar-vertex { animation: none !important; }
.results-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  min-width: 0;
}
.result-category {
  --result-accent: #38cfff;
  --result-accent-secondary: var(--result-accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 100px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--result-accent) 48%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 13% 20%, color-mix(in srgb, var(--result-accent) 14%, transparent), transparent 52%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-panel) 91%, var(--result-accent)), color-mix(in srgb, var(--bg-elevated) 95%, var(--result-accent-secondary)));
  visibility: hidden;
  opacity: 0;
  transform: translateY(7px);
}
.result-category-calculo { --result-accent: #38cfff; --result-accent-secondary: #1677ff; }
.result-category-memoria { --result-accent: #f05ab8; --result-accent-secondary: #a93b9f; }
.result-category-logica { --result-accent: #8ee000; --result-accent-secondary: #1baa68; }
.result-category-percepcion { --result-accent: #b86cff; --result-accent-secondary: #f5a623; }
.result-category::after {
  content: '';
  position: absolute;
  inset: auto 14px 0;
  height: 2px;
  border-radius: 999px;
  background: var(--result-accent);
  opacity: 0.56;
}
.result-category-icon {
  display: block;
  width: clamp(40px, 5vw, 52px);
  height: clamp(40px, 5vw, 52px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--result-accent) 25%, transparent));
  transition: filter 0.22s ease;
}
.result-category-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.12;
}
.result-category-label {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  font-weight: 650;
}
.result-category-value {
  margin-top: 5px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 12px color-mix(in srgb, var(--result-accent) 15%, transparent);
}
.result-category.is-active {
  z-index: 3;
  transform: scale(1.07);
  border-color: color-mix(in srgb, var(--result-accent) 76%, var(--line));
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--result-accent) 25%, transparent), transparent 58%),
    linear-gradient(145deg, color-mix(in srgb, var(--bg-elevated) 84%, var(--result-accent)), color-mix(in srgb, var(--bg-panel) 90%, var(--result-accent-secondary)));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px color-mix(in srgb, var(--result-accent) 38%, transparent);
}
.result-category.is-active .result-category-icon {
  filter: drop-shadow(0 0 13px color-mix(in srgb, var(--result-accent) 68%, transparent));
}
.result-category.is-active [data-category-label] {
  color: var(--result-accent);
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.035em;
}
.result-category.is-active .result-category-value { font-size: clamp(1.8rem, 3.2vw, 2.2rem); }
.result-category.is-revealed {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.result-category.is-counting .result-category-value,
.result-total.is-counting {
  filter: blur(0.35px);
  animation: result-number-roll 0.12s linear infinite;
}
.result-category.is-settled .result-category-value { animation: result-number-settle 0.22s ease-out; }
.result-total.is-final { animation: result-total-final 0.5s ease-out; }
.competition-results .result-skip { display: block; max-width: 360px; margin: 18px auto 0; }
.result-skip.is-hidden { display: none; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.result-actions .btn-secondary { margin-top: 0; }
.result-actions #btn-again {
  border-color: color-mix(in srgb, #38cfff 48%, var(--line));
  background: linear-gradient(135deg, rgba(56, 207, 255, 0.08), rgba(22, 119, 255, 0.05));
}
.result-actions #btn-again:not(:disabled):hover {
  border-color: #38cfff;
  box-shadow: 0 0 15px rgba(56, 207, 255, 0.12);
}
.result-actions button:disabled { opacity: 0.45; cursor: default; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes result-number-roll {
  0% { transform: translateY(-1px); }
  50% { transform: translateY(1px); }
  100% { transform: translateY(-1px); }
}
@keyframes result-anticipation {
  0% { filter: drop-shadow(0 0 3px rgba(56, 207, 255, 0.12)); }
  100% { filter: drop-shadow(0 0 21px rgba(56, 207, 255, 0.35)); }
}
@keyframes result-score-pulse {
  45% { transform: scale(1.035); }
}
@keyframes result-mascot-react {
  0% { opacity: 0.4; transform: scale(0.95); }
  65% { opacity: 1; transform: scale(1.045); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes result-mascot-bubble-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes result-number-settle {
  50% { transform: scale(1.055); }
}
@keyframes result-total-final {
  45% { transform: scale(1.08); text-shadow: 0 0 18px color-mix(in srgb, var(--calculo) 72%, transparent); }
}
@keyframes cognitive-radar-landing {
  0% { transform: scale(0.25); opacity: 0; }
  60% { transform: scale(1.45); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes cognitive-radar-resolve {
  45% { stroke-width: 3.4; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--memoria) 72%, transparent)); }
}

.av-button-press { animation: av-button-press 0.14s ease-out; }
.av-answer-correct { animation: av-answer-correct 0.38s ease-out; }
.av-answer-partial { animation: av-answer-partial 0.38s ease-out; }
.av-answer-incorrect { animation: av-answer-incorrect 0.34s ease-out; }
.av-answer-timeout { animation: av-answer-timeout 0.34s ease-out; }
.av-session-time-up .timer-bar-track { animation: av-session-time-up 0.45s ease-out; }

@keyframes av-button-press { 45% { transform: scale(0.97); } }
@keyframes av-answer-correct { 45% { transform: scale(1.025); text-shadow: 0 0 12px color-mix(in srgb, var(--calculo) 70%, transparent); } }
@keyframes av-answer-partial { 45% { transform: scale(1.015); text-shadow: 0 0 10px rgba(231, 184, 75, 0.7); } }
@keyframes av-answer-incorrect { 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
@keyframes av-answer-timeout { 45% { opacity: 0.58; } }
@keyframes av-session-time-up {
  45% { border-color: var(--percepcion); box-shadow: 0 0 12px color-mix(in srgb, var(--percepcion) 28%, transparent); }
}

.settings-audio {
  display: grid;
  gap: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
}
.settings-audio .branch-title { margin: 0 0 4px; }
.settings-toggle, .settings-range { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-range { flex-wrap: wrap; }
.settings-range input { flex: 1; min-width: 150px; accent-color: var(--memoria); }
.settings-toggle input { width: 20px; height: 20px; accent-color: var(--memoria); }

@media (prefers-reduced-motion: reduce) {
  .compact-answer-feedback { animation: none !important; }
  .av-navigation-training-enter .home-screen, .av-navigation-competition-enter .home-screen { animation: none !important; }
  .av-button-press, .av-answer-correct, .av-answer-partial, .av-answer-incorrect, .av-answer-timeout, .av-session-time-up .timer-bar-track { animation: none !important; }
  .result-category, .result-category.is-revealed, .result-category.is-active { transition: none !important; transform: none !important; }
  .competition-results.has-active-category * { opacity: 1 !important; filter: none !important; }
  .result-category-value, .result-total { animation: none !important; filter: none !important; }
  .competition-results.is-anticipating .results-score-cloud, .results-score-cloud.is-pulsing { animation: none !important; }
  .results-mascot.is-reacting, .results-mascot-bubble:not([hidden]) { animation: none !important; }
  .cognitive-radar-profile, .cognitive-radar-vertex { animation: none !important; }
}

@media (max-width: 820px) {
  .results-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-score-panel { gap: 6px; padding-inline: 12px; }
  .results-mascot-halo { width: min(100%, clamp(125px, 18vw, 150px)); }
  .results-score-cloud { width: min(100%, clamp(180px, 24vw, 205px)); min-height: 126px; }
}

@media (max-width: 640px) {
  .results-hero { grid-template-columns: minmax(0, 1fr); }
  .results-score-panel {
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    justify-content: center;
    gap: 6px;
    min-height: 145px;
    padding: 30px 10px 12px;
  }
  .results-score-panel .brain-score { font-size: clamp(3.35rem, 17vw, 4.4rem); }
  .results-score-panel .brain-score-label { font-size: clamp(0.62rem, 2.8vw, 0.78rem); }
  .results-score-cloud {
    width: min(100%, clamp(150px, 48vw, 210px));
    min-height: 104px;
    padding: 18px 10px 12px;
  }
  .results-mascot-halo { width: min(100%, clamp(90px, 27vw, 150px)); }
  .results-radar-panel {
    padding: 0 12px 8px;
    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-left: 0;
  }
  .cognitive-radar-wrap { width: min(100%, 360px); }
  .result-category { min-height: 88px; padding: 12px; gap: 9px; }
  .result-category.is-active { transform: scale(1.055); }
  .result-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 420px) {
  .competition-results { width: calc(100vw - 40px); }
  .competition-results > .results-title { margin-bottom: 16px; }
  .cognitive-radar-wrap { width: 100%; }
  .cognitive-radar-label { font-size: 11px; }
  .results-category-grid { gap: 9px; }
  .result-category { flex-direction: column; justify-content: center; text-align: center; min-height: 118px; }
  .result-category-icon { width: 38px; height: 38px; }
  .result-category-value { font-size: 1.55rem; }
  .result-category.is-active .result-category-value { font-size: 1.75rem; }
}

@media (max-width: 360px) {
  .results-score-panel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .results-score-cloud { grid-row: 1; justify-self: center; width: min(100%, 205px); }
  .results-mascot-stack {
    grid-row: 2;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
  }
  .results-mascot-halo { align-self: center; width: clamp(72px, 27vw, 96px); }
  .results-mascot-bubble { flex: 1; max-width: 160px; margin: 0; }
  .results-mascot-bubble::before {
    top: calc(50% - 7px);
    left: -8px;
    transform: rotate(-45deg);
  }
}

@media (max-width: 280px) {
  .results-category-grid { grid-template-columns: minmax(0, 1fr); }
}

.sequence-grid {
  position: relative;
  height: clamp(288px, 46vw, 320px);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.sequence-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 80ms ease, background-color 80ms ease, box-shadow 80ms ease, filter 80ms ease;
}
.sequence-item:focus-visible { outline: 2px solid var(--percepcion); outline-offset: 3px; border-color: var(--percepcion); }
@media (hover: hover) and (pointer: fine) {
  .sequence-item:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--percepcion) 75%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--percepcion));
    box-shadow: 0 0 10px color-mix(in srgb, var(--percepcion) 24%, transparent);
    filter: brightness(1.08);
  }
}
.sequence-item-done { background: var(--percepcion); border-color: var(--percepcion); color: var(--bg); opacity: 0.55; cursor: default; }
.sequence-item-wrong { background: var(--danger); border-color: var(--danger); color: var(--bg); }
.p1-sequence-locked .sequence-item { cursor: default; }
@media (max-width: 419px) {
  .sequence-grid { height: clamp(320px, 105vw, 360px); }
}

.cubes-stage {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}
.cubes-svg { width: 100%; max-width: 260px; height: auto; display: block; }
.l5-figure-wrap { position: relative; }
.l5-figure-wrap .cubes-stage { margin-inline: clamp(42px, 10vw, 76px); }
.compact-answer-feedback { position: absolute; top: 50%; right: 4px; width: clamp(52px, 12vw, 72px); height: clamp(52px, 12vw, 72px); transform: translateY(-50%); pointer-events: none; }
.compact-answer-feedback svg { width: 100%; height: 100%; overflow: visible; }
.compact-answer-feedback circle { fill: var(--bg-elevated); stroke-width: 3; }
.compact-answer-feedback path { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.compact-answer-feedback.is-correct { animation: l5-check-in 280ms ease-out both; filter: drop-shadow(0 0 8px rgba(91,201,255,.45)); }
.compact-answer-feedback.is-correct circle, .compact-answer-feedback.is-correct path { stroke: var(--memoria); }
.compact-answer-feedback.is-incorrect { animation: l5-error-in 260ms ease-out both; }
.compact-answer-feedback.is-incorrect circle, .compact-answer-feedback.is-incorrect path { stroke: var(--danger); }
.compact-answer-global-feedback { visibility: hidden; }
.p2-field-wrap { position: relative; }
.l5-global-feedback { visibility: hidden; margin: 0; min-height: 0; }
@keyframes l5-check-in { 0% { opacity: 0; transform: translateY(-50%) scale(.72); } 70% { opacity: 1; transform: translateY(-50%) scale(1.08); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes l5-error-in { 0% { opacity: 0; transform: translateY(-50%) scale(.82); } 55% { opacity: 1; transform: translate(-2px,-50%) scale(1.04); } 75% { transform: translate(2px,-50%) scale(1); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } }

/* ---------- Estadísticas / gráfico de línea ---------- */
.stats-filters { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.stats-indicators {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0 20px;
}
.stat-box { background: var(--bg-panel); border: 1px solid var(--line); padding: 12px; }
.stat-box .stat-label { color: var(--text-muted); font-size: 0.75rem; margin-bottom: 4px; }
.stat-box .stat-value { font-family: var(--font-display); font-size: 1.3rem; }

/* ---------- Resumen de partida en Training ---------- */
.training-player-stats { width: min(100%, 560px); margin: 0 auto 20px; text-align: left; }
.training-player-stats h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 1rem; }
.training-player-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.training-player-stat { min-width: 0; padding: 10px 12px; background: var(--bg-panel); border: 1px solid var(--line); overflow-wrap: anywhere; }
.training-player-stat dt { color: var(--text-muted); font-size: .76rem; line-height: 1.3; }
.training-player-stat dd { margin: 5px 0 0; font-family: var(--font-display); font-size: 1.1rem; }
@media (max-width: 360px) { .training-player-stats-grid { grid-template-columns: minmax(0, 1fr); } }
.chart-wrap { position: relative; background: var(--bg-panel); border: 1px solid var(--line); padding: 8px; }
.chart-title { font-family: var(--font-display); font-size: 0.95rem; margin: 0 0 10px; }
.line-chart-svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart-point { cursor: pointer; }
.chart-tooltip {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--memoria);
  padding: 8px 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.flash-field { position: relative; height: 220px; border: 1px solid var(--line); background: var(--bg-panel); }
.flash-dot { position: absolute; font-size: 1.4rem; color: var(--percepcion); transform: translate(-50%, -50%); }

.stroop-word { font-family: var(--font-display); font-size: 2rem; text-align: center; margin: 24px 0; }

.p3-rule-badge { font-size: 2.2rem; text-align: center; margin-bottom: 4px; line-height: 1; }
/* Marco grueso y con separación generosa del texto — a propósito, para
   que tinta y marco nunca generen duda sobre cuál es cuál. */
.p3-frame { display: inline-block; padding: 12px 24px; border: 7px solid; border-radius: 6px; }
.p3-stimulus-wrap { position: relative; padding-right: clamp(58px, 13vw, 82px); }

.simon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 12px; width: 100%; min-width: 0; max-width: 420px; margin: 0 auto; }
.simon-cell { aspect-ratio: 1; background: var(--cell-color); opacity: 0.4; border: none; }
.simon-cell.lit { opacity: 1; }
.m1-phase { min-height: 1.5em; text-align: center; color: var(--text-muted); }
.game-tutorial { max-width: 620px; margin: 0 auto; text-align: center; }
.tutorial-statement { font-weight: 800; letter-spacing: .03em; }
.tutorial-premises { line-height: 1.8; }
.tutorial-feedback { min-height: 4rem; line-height: 1.5; }
.set-diagram { min-height: 230px; display: grid; place-items: center; margin: 18px 0; }
.set { position: relative; width: 190px; height: 190px; border-radius: 50%; border: 4px solid currentColor; display: grid; place-items: center; }
.set.green { color: #2ec4b6; background: rgba(46,196,182,.12); }
.set.blue { width: 92px; height: 92px; color: #1e6fff; background: rgba(30,111,255,.2); }
.set.red { color: #e63946; background: rgba(230,57,70,.12); }
.sets-apart { display: flex; gap: 28px; }
.sets-apart .set { width: 150px; height: 150px; }
.green-extra { position: absolute; right: 28px; top: 42px; font-size: 1.4rem; }

.memory-grid {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0 auto;
}
.memory-grid[data-card-count="4"] { grid-template-columns: repeat(2, 1fr); max-width: 300px; }
.memory-grid[data-card-count="6"] { grid-template-columns: repeat(3, 1fr); max-width: 390px; }
.memory-grid[data-card-count="8"] { grid-template-columns: repeat(4, 1fr); max-width: 440px; }
.memory-grid[data-card-count="16"] { grid-template-columns: repeat(4, 1fr); max-width: 500px; }
.memory-card {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: clamp(1rem, 5vw, 1.6rem);
}
.memory-card.matched { border-color: var(--calculo); opacity: 0.6; }

@media (max-height: 620px) {
  .memory-grid { gap: 4px; }
  .memory-grid[data-card-count="16"] { max-width: min(68vh, 500px); }
}

.balances-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.balances-stack[data-balance-count="1"] .balance-row {
  grid-column: 1 / -1;
  width: min(100%, 300px);
  justify-self: center;
}
.balances-stack[data-balance-count="3"] .balance-row:nth-child(3) {
  grid-column: 1 / -1;
  width: min(50%, 300px);
  justify-self: center;
}
.balance-row { min-width: 0; padding: 4px 0; }
.balance-visual {
  position: relative;
  width: 100%;
  height: 128px;
  max-width: 260px;
  margin: 0 auto;
}
.balance-beam {
  position: absolute;
  top: 44px;
  left: 8%;
  right: 8%;
  height: 5px;
  background: var(--text-muted);
  border-radius: 3px;
  transform-origin: 50% 50%;
  transition: transform 0.35s ease;
}
.balance-row.tilt-left .balance-beam { transform: rotate(-20deg); }
.balance-row.tilt-right .balance-beam { transform: rotate(20deg); }

.balance-fulcrum-tri {
  position: absolute;
  top: 47px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 22px solid var(--line);
}

.balance-string {
  position: absolute;
  top: 46px;
  width: 1px;
  background: var(--text-muted);
  transition: height 0.35s ease, top 0.35s ease;
}
.string-left { left: 8%; }
.string-right { right: 8%; }
.balance-row.tilt-left .string-left { height: 30px; top: 62px; }
.balance-row.tilt-left .string-right { height: 12px; top: 30px; }
.balance-row.tilt-right .string-right { height: 30px; top: 62px; }
.balance-row.tilt-right .string-left { height: 12px; top: 30px; }
.balance-row.balanced .string-left,
.balance-row.balanced .string-right { height: 24px; top: 48px; }

.balance-pan {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: top 0.35s ease;
}
.pan-left { left: 0; }
.pan-right { right: 0; }
.balance-pan.pan-multi { width: 62px; font-size: 1.05rem; gap: 1px; }
.balance-row.tilt-left .pan-left { top: 78px; border-color: var(--calculo); }
.balance-row.tilt-left .pan-right { top: 24px; }
.balance-row.tilt-right .pan-right { top: 78px; border-color: var(--calculo); }
.balance-row.tilt-right .pan-left { top: 24px; }
.balance-row.balanced .pan-left,
.balance-row.balanced .pan-right { top: 70px; }

@media (max-width: 520px) {
  .balances-stack { gap: 10px 8px; }
  .balances-stack[data-balance-count="3"] .balance-row:nth-child(3) {
    width: min(50%, 210px);
  }
  .balance-row { padding: 2px 0; }
  .balance-visual { height: 100px; max-width: 200px; }
  .balance-beam { top: 34px; height: 4px; }
  .balance-fulcrum-tri {
    top: 37px;
    border-left-width: 9px;
    border-right-width: 9px;
    border-top-width: 17px;
  }
  .balance-string { top: 36px; }
  .balance-row.tilt-left .string-left { height: 23px; top: 48px; }
  .balance-row.tilt-left .string-right { height: 9px; top: 23px; }
  .balance-row.tilt-right .string-right { height: 23px; top: 48px; }
  .balance-row.tilt-right .string-left { height: 9px; top: 23px; }
  .balance-row.balanced .string-left,
  .balance-row.balanced .string-right { height: 18px; top: 37px; }
  .balance-pan { width: 36px; height: 36px; font-size: 1.2rem; }
  .balance-pan.pan-multi { width: 48px; font-size: 0.82rem; }
  .balance-row.tilt-left .pan-left { top: 60px; }
  .balance-row.tilt-left .pan-right { top: 18px; }
  .balance-row.tilt-right .pan-right { top: 60px; }
  .balance-row.tilt-right .pan-left { top: 18px; }
  .balance-row.balanced .pan-left,
  .balance-row.balanced .pan-right { top: 54px; }
}

/* ---------- Resultados ---------- */
.results-title { font-family: var(--font-display); font-size: 1.6rem; margin: 12px 0 24px; }
.brain-score {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.brain-score-label { color: var(--text-muted); margin-bottom: 28px; }
.score-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.score-row .value { font-family: var(--font-display); }

.btn-secondary {
  margin-top: 28px;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px;
  width: 100%;
  font-family: var(--font-display);
}
.btn-secondary:hover { border-color: var(--memoria); }

/* ---------- Entrenamiento ---------- */
.branch { margin-bottom: 28px; }
.branch-title { font-family: var(--font-display); margin-bottom: 10px; }
.branch-track { display: flex; flex-direction: column; gap: 8px; }
.node-wrap { display: flex; flex-direction: row; gap: 8px; }
.node { flex: 1; text-align: left; padding-left: 16px; }
.stats-link {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 4px;
  width: 44px;
  flex: none;
}
.stats-link:hover { color: var(--memoria); border-color: var(--memoria); }
.node {
  flex: 1;
  border: 1px solid var(--line);
  padding: 12px 8px;
  text-align: center;
  font-size: 0.85rem;
  background: var(--bg-panel);
}
.node.locked { color: var(--text-muted); opacity: 0.5; }
.node.unlocked { cursor: pointer; }
.node.unlocked:hover { border-color: var(--memoria); }
.node.next-challenge { border-color: var(--danger); cursor: pointer; }

.back-link {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0;
  margin-bottom: 16px;
  font-size: 0.9rem;
}
.back-link:hover { color: var(--text); }

/* ---------- Ranking ---------- */
.ranking-tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }
.tab-btn {
  flex: 1;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text-muted);
  padding: 10px 6px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  white-space: nowrap;
}
.tab-btn.active { background: var(--memoria); color: var(--bg); border-color: var(--memoria); font-weight: 600; }
#ranking-list .score-row { gap: 12px; }
#ranking-list .score-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
#ranking-list .score-row .value { flex: none; }

/* ---------- Selector de país ---------- */
.country-select {
  width: 100%;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px;
  font-family: var(--font-body);
  font-size: 1rem;
}

.placeholder { color: var(--text-muted); margin-top: 40px; text-align: center; }

/* ---------- Pantalla de instrucciones ---------- */
.instructions-text { color: var(--text-muted); margin: 0 0 20px; line-height: 1.5; }
.demo-box {
  position: relative;
  min-height: 170px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  margin-bottom: 24px;
  padding: 16px;
  overflow: visible;
}
.demo-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--calculo);
  box-shadow: 0 0 0 5px rgba(200, 240, 75, 0.22);
  transform: translate(-50%, -50%);
  transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
  pointer-events: none;
}
.demo-cursor-click { animation: demo-click-pulse 0.28s ease-out; }
@media (max-width: 320px) {
  /* Preserve P1's certified 48px targets / 60px spacing; recover demo padding. */
  .demo-box:has(.p1-sequence-grid) { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-cursor { transition: none !important; animation: none !important; }
}
@keyframes demo-click-pulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.7); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ========================================================
   TRAINING MASTER v1 — todo escaleado bajo .training-screen
   para no afectar visualmente ninguna otra pantalla.
   ======================================================== */
.training-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
  margin: 0 auto;
}

.training-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  padding: 4px 2px;
  cursor: pointer;
}
.training-back:hover { color: var(--home-profile); }
.training-back:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.training-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-elevated));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(16px, 4vw, 24px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.training-header-text { min-width: 0; flex: 1; }
.training-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 6vw, 2rem);
  margin: 0 0 4px;
}
.training-subtitle { color: var(--text-muted); font-size: clamp(0.8rem, 3vw, 0.95rem); margin: 0 0 14px; }
.training-score-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.training-score-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--home-profile); flex-shrink: 0; }
.training-mascot {
  width: clamp(70px, 20vw, 110px);
  height: clamp(70px, 20vw, 110px);
  object-fit: contain;
  flex-shrink: 0;
}

.training-branch {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(14px, 4vw, 20px);
}
.training-branch-calculo { border-color: color-mix(in srgb, var(--training-calc) 40%, var(--line)); }
.training-branch-memoria { border-color: color-mix(in srgb, var(--training-mem) 40%, var(--line)); }
.training-branch-logica { border-color: color-mix(in srgb, var(--training-logic) 40%, var(--line)); }
.training-branch-percepcion { border-color: color-mix(in srgb, var(--training-percep) 40%, var(--line)); }

.training-branch-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.training-branch-icon { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.training-branch-title { font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.3rem); font-weight: 700; margin: 0; }
.training-branch-subtitle { font-size: 0.72rem; letter-spacing: 0.04em; margin: 2px 0 0; font-weight: 600; }
.training-branch-calculo .training-branch-subtitle { color: var(--training-calc); }
.training-branch-memoria .training-branch-subtitle { color: var(--training-mem); }
.training-branch-logica .training-branch-subtitle { color: var(--training-logic); }
.training-branch-percepcion .training-branch-subtitle { color: var(--training-percep); }

.training-branch-track { position: relative; display: flex; flex-direction: column; gap: 10px; }
/* Conector vertical — se adapta solo a cualquier cantidad de nodos
   porque está anclado al primer/último ícono por un margen FIJO, no por
   una altura calculada a partir del número de elementos. */
.training-branch-track::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}

.training-node-row { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 8px; }
.training-node {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
  min-width: 0;
}
.training-node-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--text-muted);
}
.training-node-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.training-node-code { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-muted); }
.training-node-name { font-weight: 700; font-size: clamp(0.85rem, 3.5vw, 0.98rem); overflow-wrap: break-word; }
.training-next-tag { text-transform: uppercase; }

.training-node-row.is-unlocked .training-node-icon,
.training-node-row.is-completed .training-node-icon { color: inherit; }
.training-branch-calculo :is(.is-unlocked, .is-completed) .training-node { border-color: color-mix(in srgb, var(--training-calc) 55%, var(--line)); }
.training-branch-memoria :is(.is-unlocked, .is-completed) .training-node { border-color: color-mix(in srgb, var(--training-mem) 55%, var(--line)); }
.training-branch-logica :is(.is-unlocked, .is-completed) .training-node { border-color: color-mix(in srgb, var(--training-logic) 55%, var(--line)); }
.training-branch-percepcion :is(.is-unlocked, .is-completed) .training-node { border-color: color-mix(in srgb, var(--training-percep) 55%, var(--line)); }
.training-branch-calculo .is-unlocked .training-node-icon,
.training-branch-calculo .is-unlocked .training-node-code,
.training-branch-calculo .is-completed .training-node-icon,
.training-branch-calculo .is-completed .training-node-code { color: var(--training-calc); }
.training-branch-memoria .is-unlocked .training-node-icon,
.training-branch-memoria .is-unlocked .training-node-code,
.training-branch-memoria .is-completed .training-node-icon,
.training-branch-memoria .is-completed .training-node-code { color: var(--training-mem); }
.training-branch-logica .is-unlocked .training-node-icon,
.training-branch-logica .is-unlocked .training-node-code,
.training-branch-logica .is-completed .training-node-icon,
.training-branch-logica .is-completed .training-node-code { color: var(--training-logic); }
.training-branch-percepcion .is-unlocked .training-node-icon,
.training-branch-percepcion .is-unlocked .training-node-code,
.training-branch-percepcion .is-completed .training-node-icon,
.training-branch-percepcion .is-completed .training-node-code { color: var(--training-percep); }
.training-completed-tag { color: currentColor; font-weight: 800; text-transform: uppercase; }

.training-node-row.is-next .training-node {
  border-color: var(--calculo);
  box-shadow: 0 0 0 1px var(--calculo), 0 0 18px rgba(200, 240, 75, 0.35);
}
.training-node-row.is-next .training-node-icon { color: var(--calculo); background: transparent; }
.training-node-row.is-next .training-node-code { color: var(--calculo); }
.training-next-tag { color: var(--calculo); font-weight: 800; }

.training-node-row.is-locked .training-node { opacity: 0.55; cursor: default; }
.training-node-row.is-locked .training-node-name,
.training-node-row.is-locked .training-node-code { color: var(--text-muted); }

.training-node:not(:disabled) { cursor: pointer; transition: transform 0.12s ease; }
.training-node:not(:disabled):hover { transform: translateY(-1px); }
.training-node:not(:disabled):active { transform: translateY(1px); }
.training-node:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.training-stats-btn {
  flex-shrink: 0;
  width: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.training-stats-btn:hover { color: var(--text); border-color: var(--text-muted); }
.training-stats-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.training-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.training-progress strong { color: var(--text); font-family: var(--font-display); font-size: 0.8rem; }
.training-progress-completed strong { color: var(--calculo); }

.training-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.training-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.training-legend-icon { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; }
.training-legend-icon.is-unlocked { color: var(--home-profile); }
.training-legend-icon.is-next { color: var(--calculo); }
.training-legend-icon.is-locked { color: var(--text-muted); }

.training-footer-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

@media (max-width: 380px) {
  .training-header { flex-direction: column; align-items: flex-start; }
  .training-mascot { align-self: center; }
}

/* Tutorial content is independent of gameplay layout. */
.tutorial-content, .game-tutorial { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tutorial-diagram { width: 100%; max-width: 420px; margin: 18px auto; }
.tutorial-diagram svg { display: block; width: 100%; height: auto; }
.tutorial-diagram text { fill: #fff; font: 18px var(--font-body); }
.tutorial-diagram figcaption { margin-top: 12px; }
.game-tutorial .choice-row { display: flex; flex-wrap: wrap; gap: 12px; }
.game-tutorial .choice-box { flex: 1 1 80px; min-width: 0; }
.game-tutorial button, .tutorial-content > button, .settings-tutorials button, #ins-tutorial { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tutorial-suppress { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 20px; }
.tutorial-suppress input { flex: 0 0 24px; width: 24px; height: 24px; }
.tutorial-content :focus-visible, .tutorial-suppress :focus-visible, .settings-tutorials :focus-visible, #ins-tutorial:focus-visible { outline: 3px solid var(--accent, #c4f042); outline-offset: 3px; }
.settings-tutorials { margin: 24px 0; }

/* L3 keeps premises and conclusion distinct, using neutral gameplay text. */
.l3-statements { width: 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.l3-statements h3 { font-size: .9rem; letter-spacing: .04em; margin: 14px 0 8px; }
.l3-statements ul { padding-left: 22px; margin: 0 0 16px; line-height: 1.6; }
.l3-conclusion { border-left: 3px solid currentColor; padding-left: 12px; line-height: 1.6; }
.l3-rule { font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; }
.l3-statements ~ .choice-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.l3-statements ~ .choice-row .choice-box { flex: 1 1 100px; min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.l3-statements ~ .choice-row .choice-box:focus-visible { outline: 3px solid var(--accent, #c4f042); outline-offset: 3px; }
@media (max-width: 360px) {
  .game-tutorial .choice-row .choice-box,
  .l3-statements ~ .choice-row .choice-box { flex-basis: 100%; }
}

.m1-audio-selector { width: 100%; max-width: 540px; min-width: 0; margin: 0 auto; text-align: center; overflow-wrap: anywhere; }
.m1-audio-selector p { line-height: 1.5; margin: 14px 0; }
.m1-headphones { font-size: 3rem; line-height: 1.25; margin: 12px 0; }
.m1-audio-selector button { width: 100%; min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; margin-top: 12px; }
.m1-audio-selector h2 { font-size: clamp(1.15rem, 5vw, 1.6rem); }
.m1-audio-selector :focus-visible { outline: 3px solid var(--accent, #c4f042); outline-offset: 3px; }
.m1-settings-note { font-size: .8rem; }

.l3-play-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; width:100%; }
.l3-play-layout > * { min-width:0; }
.l3-play-layout .choice-row { display:flex; flex-wrap:wrap; gap:12px; }
.l3-play-layout .choice-box { flex:1 1 100px; min-width:0; min-height:44px; white-space:normal; overflow-wrap:anywhere; }
.l3-workspace { overflow-wrap:anywhere; text-align:left; }
.l3-workspace h3 { font-size:.95rem; }
.l3-workspace p { font-size:.8rem; line-height:1.45; }
.l3-piece-tray { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.l3-piece { min-height:44px; max-width:100%; border:2px solid var(--piece-color); color:var(--text); background:var(--bg); padding:6px; border-radius:12px; white-space:normal; overflow-wrap:anywhere; }
.l3-piece-preview { width:48px; height:48px; display:block; margin:auto; color:var(--piece-color); pointer-events:none; }
.l3-board { width:100%; max-height:340px; display:block; background:rgba(255,255,255,.03); border:1px dashed currentColor; }
.l3-piece,.l3-board g { touch-action:none; user-select:none; cursor:grab; }
.l3-board text { fill:var(--text); font-size:8px; pointer-events:none; }
.l3-workspace :focus-visible,.l3-play-layout .choice-box:focus-visible { outline:3px solid var(--accent,#c4f042); outline-offset:2px; }
.l3-reset { min-height:44px; margin-top:8px; }
@media(min-width:768px) {
 .l3-play-layout { grid-template-columns:minmax(0,1fr) minmax(224px,1fr); align-items:start; }
 .l3-workspace-host { grid-column:2; grid-row:1 / span 2; }
 .l3-play-layout .choice-row { grid-column:1; }
}
/* Accounts foundation: menu surfaces only; no cognitive geometry overrides. */
.account-screen { width: 100%; max-width: 640px; margin-inline: auto; overflow-wrap: anywhere; }
.account-screen h2, .account-screen h3 { margin-block: 18px 12px; }
.account-notice { color: var(--text-muted, #a9aac7); font-size: .9rem; line-height: 1.55; margin-block: 12px; }
.account-screen fieldset { min-width: 0; border: 1px solid var(--border, #454766); border-radius: 12px; padding: 14px; margin-block: 16px; }
.account-screen legend { padding-inline: 6px; }
.account-field { display: flex; flex-direction: column; gap: 6px; margin-block: 12px; min-width: 0; }
.account-field input, .account-field select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid var(--border, #454766); border-radius: 8px; background: var(--panel, #202344); color: var(--text, #eee); font: inherit; }
.account-screen input:focus-visible, .account-screen select:focus-visible, .account-screen summary:focus-visible { outline: 2px solid #a4b9ff; outline-offset: 3px; }
.account-screen summary { padding-block: 14px; cursor: pointer; }
.account-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.account-toggle input { flex: 0 0 20px; width: 20px; height: 20px; }
.account-error { color: #ffb1b1; font-size: .88rem; }
.account-error:empty { display: none; }
.account-avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 2px solid #a4b9ff; border-radius: 50%; background: #2c365e; color: #fff; font-size: 1.5rem; }
.avatar-spark { border-radius: 16px; background: #59417b; }
.avatar-wave { border-radius: 40% 60%; background: #205864; }
.account-preview { border: 1px solid var(--border, #454766); border-radius: 12px; padding: 14px; margin-block: 20px; }
.account-balance, .coin-reward { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.braincoin-symbol { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid #e6ce8a; border-radius: 50%; color: #f9e8b9; font-weight: 700; font-size: .85rem; }
.coin-reward { color: #f9e8b9; margin-block: 14px; }
.future-mode-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.future-mode-links button { flex: 1 1 180px; white-space: normal; min-width: 0; }
.future-badge { display: inline-block; padding: 8px 14px; border: 1px solid var(--border, #454766); border-radius: 20px; }
/* Long L2 labels must remain inside their buttons; content and font size stay intact. */
#game-container[data-game-id="L2"] .choice-box { min-width: 0; overflow-wrap: anywhere; }

/* Shared pre-game presentation; cognitive surfaces retain their styles. */
.instructions-card {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: #fff; color: #171421; border: 3px solid #ff28ce;
  box-shadow: 0 0 15px #ff28ce33; padding: clamp(18px, 4vw, 28px);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  font-size: clamp(20px, 3.5vw, 26px); font-weight: 750; line-height: 1.45;
  text-align: left; overflow-wrap: anywhere; margin: 0 0 20px;
}
.instructions-complete, .instructions-animated { grid-area: 1 / 1; min-width: 0; }
.instructions-complete { opacity: 0; pointer-events: none; }
.pre-game-countdown { flex: 1; min-height: calc(100svh - 64px); display: grid; place-items: center; outline: none; }
.countdown-number { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(100px, 25vw, 180px); line-height: 1.2; text-shadow: 0 0 24px #ff28ce66; }
.countdown-pulse { animation: pre-game-pulse 260ms ease-out both; }
@keyframes pre-game-pulse { from { transform: scale(.9); opacity: .5; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .countdown-pulse { animation: none; } }

/* Local playtest tools: secondary screens, no gameplay layout overrides. */
.toolkit-screen { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.toolkit-screen p { line-height: 1.5; }
.toolkit-screen .stats-filters { flex-wrap: wrap; }
.toolkit-row, .toolkit-game { padding: 16px; margin: 14px 0; border: 1px solid var(--border); border-radius: 12px; }
.toolkit-screen button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.toolkit-screen .training-player-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.toolkit-settings { margin-top: 24px; }
/* Beta tester feedback: isolated form, safe at narrow viewport widths. */
.beta-feedback { width: min(100%, 36rem); margin: 1.5rem auto; padding: 1rem; }
.beta-feedback h1 { font-size: clamp(1.35rem, 5vw, 1.9rem); margin: 0 0 1rem; }
.beta-feedback form { display: grid; gap: .7rem; min-width: 0; }
.beta-feedback label { font-weight: 600; }
.beta-feedback select, .beta-feedback textarea {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  padding: .7rem; border: 1px solid var(--border, #626a91); border-radius: .5rem;
  color: inherit; background: var(--surface, #222747); font: inherit;
}
.beta-feedback textarea { resize: vertical; overflow-wrap: anywhere; }
.beta-feedback-privacy { margin: .2rem 0; font-size: .9rem; opacity: .8; }
.beta-feedback #feedback-status { min-height: 1.4em; overflow-wrap: anywhere; }
.toolkit-settings { display: flex; flex-wrap: wrap; gap: .6rem; }
.account-oauth { display: grid; gap: .7rem; margin-bottom: 1rem; text-align: center; }
.account-oauth-separator { color: var(--text-muted); font-size: .9rem; }
.account-oauth-button {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
  align-items: center; gap: .7rem; padding-inline: 1rem;
}
.account-oauth-button > span { grid-column: 2; text-align: center; }
.account-oauth-icon { grid-column: 1; width: 20px; height: 20px; display: block; }

/* ---------- Páginas legales públicas ---------- */
.legal-body { min-width: 0; }
.legal-page {
  width: min(100% - 32px, 820px); margin: 0 auto; padding: 32px 0 64px;
  color: var(--text); overflow-wrap: anywhere;
}
.legal-back, .legal-page a { color: var(--memoria); text-underline-offset: .2em; }
.legal-back { display: inline-block; margin-bottom: 28px; font-weight: 600; }
.legal-header { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-kicker { margin: 0 0 8px; color: var(--calculo); font: 700 .8rem/1 var(--font-display); letter-spacing: .16em; }
.legal-page h1 { margin: 0 0 10px; font: 700 clamp(2rem, 7vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -.03em; }
.legal-page h2 { margin: 0 0 12px; color: var(--text); font: 600 1.2rem/1.25 var(--font-display); }
.legal-page section { margin-top: 28px; padding: 22px; background: var(--bg-panel); border: 1px solid var(--line); }
.legal-page p, .legal-page li { max-width: 72ch; }
.legal-page ul, .legal-page ol { padding-left: 1.4rem; }
.legal-page li + li { margin-top: 8px; }
.legal-pending { margin-top: 28px; padding: 22px; border: 2px solid var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--bg-panel)); }
.legal-pending h2 { color: var(--danger); }
.legal-footer-link { margin-top: 30px; text-align: center; }
@media (max-width: 420px) {
  .legal-page { width: min(100% - 24px, 820px); padding-top: 20px; }
  .legal-page section, .legal-pending { padding: 17px; }
}

/* BrainMaster Live V1: room orchestration only; gameplay surfaces keep their certified layout. */
.home-live-btn {
  --live-entry-bg: #ff38cf;
  --live-entry-text: #000;
  width: 100%; min-width: 0; min-height: 76px; margin-top: 12px; padding: 14px 18px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  border: 1px solid color-mix(in srgb, var(--calculo) 70%, var(--line)); border-radius: 18px;
  background: var(--live-entry-bg);
  color: var(--live-entry-text); text-align: left; cursor: pointer;
}
.home-live-btn .home-play-title { color: var(--live-entry-text); font-weight: 700; }
.home-live-btn .home-play-subtitle,
.home-live-btn .home-card-arrow { color: var(--live-entry-text); }
.home-live-btn:hover { border-color: var(--calculo); }
.home-live-btn:focus-visible { outline: 3px solid var(--calculo); outline-offset: 3px; }
.home-live-pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--calculo); box-shadow: 0 0 0 7px color-mix(in srgb, var(--calculo) 18%, transparent); }

.live-screen { width: min(100%, 920px); min-width: 0; margin-inline: auto; padding: clamp(12px, 3vw, 28px); overflow-wrap: anywhere; }
.live-screen button, .live-screen input, .live-screen select { font: inherit; }
.live-screen button { min-height: 44px; max-width: 100%; white-space: normal; }
.live-screen :focus-visible { outline: 3px solid var(--calculo); outline-offset: 3px; }
.live-entry > header, .live-room-header { text-align: center; margin-bottom: 24px; }
.live-entry h1, .live-room-header h1, .live-final h2 { margin: 8px 0; font-family: var(--font-display); font-size: clamp(1.55rem, 7vw, 2.8rem); }
.live-kicker { margin: 0; color: var(--calculo); font: 700 .78rem/1 var(--font-display); letter-spacing: .16em; }
.live-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.live-panel, .live-resume, .live-code-card, .live-participants, .live-ranking {
  min-width: 0; padding: clamp(16px, 4vw, 24px); border: 1px solid var(--line); border-radius: 18px; background: var(--bg-panel);
}
.live-resume { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.live-resume p { margin: 0; }
.live-panel form, .live-panel label { display: grid; gap: 8px; }
.live-panel form { gap: 15px; }
.live-panel input, .live-panel select {
  width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-elevated); color: var(--text);
}
.live-panel [role="status"] { min-height: 1.4em; color: #ffb1b1; }
.live-note { color: var(--text-muted); font-size: .84rem; line-height: 1.5; }
.live-code-card { margin: 18px auto; text-align: center; }
.live-code-card span { display: block; color: var(--text-muted); }
.live-code-card strong { display: block; margin-top: 8px; font: 700 clamp(2.5rem, 16vw, 5rem)/1 var(--font-display); letter-spacing: .12em; }
.live-participants ol, .live-ranking ol { margin: 12px 0 0; padding: 0; list-style: none; }
.live-participants li, .live-ranking li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.live-participants li small { margin-left: auto; color: var(--text-muted); }
.live-participant-name { min-width: 0; overflow-wrap: anywhere; }
.live-participants .is-offline { opacity: .55; }
.live-presence { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--calculo); }
.live-participants .is-offline .live-presence { background: var(--text-muted); }
.live-ranking li { justify-content: space-between; }
.live-ranking li > span { min-width: 0; }
.live-ranking-player { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.live-ranking-name { min-width: 0; overflow-wrap: anywhere; }
.live-avatar-slot { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.live-avatar-preparing { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.live-avatar-full::before { content: "👤"; position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(2rem, 6vw, 4rem); opacity: .45; }
.live-avatar-full:has(canvas[data-ready="true"])::before { display: none; }
.live-avatar-medium .avatar-thumbnail { width: 68px; height: 68px; }
.live-avatar-small .avatar-thumbnail { width: 40px; height: 40px; }
.live-ranking li > b { color: var(--calculo); font-family: var(--font-display); }
.live-live-meta { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0; }
.live-live-meta b { color: var(--calculo); font-size: 1.25rem; }
.live-waiting, .live-waiting-screen, .live-countdown, .live-suspense { text-align: center; }
.live-back-to-menu { display: block; width: min(100%, 340px); min-height: 54px !important; margin: 24px auto 0; text-align: center; }
.live-host-join-card { position: sticky; top: 0; z-index: 900; width: min(100%, 600px); align-self: center; margin: 0 auto 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-panel); box-shadow: 0 5px 16px #07112c99; }
.live-host-join-card[hidden] { display: none; }
.live-host-join-card summary { min-height: 44px; padding: 10px 14px; cursor: pointer; text-align: center; font-weight: 700; }
.live-host-join-card summary strong { color: var(--calculo); letter-spacing: .08em; }
.live-host-join-qr { display: grid; place-items: center; padding: 0 12px 12px; }
.live-host-join-qr svg { width: min(36vw, 180px); height: auto; max-height: 180px; background: white; border-radius: 8px; }
.live-session-controls { position: sticky; top: 0; z-index: 10000; display: flex; justify-content: flex-end; gap: 8px; padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); background: var(--bg); border-bottom: 1px solid var(--line); }
.live-session-controls button { min-height: 44px; font-size: .85rem; }
.live-session-controls .gameplay-fullscreen-button { margin-top: 0; }
.live-exit-dialog { width: min(90vw, 380px); max-width: 380px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-panel); color: var(--text); text-align: center; }
.live-exit-dialog::backdrop { background: rgb(0 0 0 / .72); }
.live-exit-dialog h2 { margin: 0 0 20px; font-size: 1.3rem; }
.live-exit-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.live-exit-actions button { min-height: 44px; min-width: 120px; }
.live-countdown > strong, .live-suspense > strong { display: block; margin: 20px auto; font: 700 clamp(5rem, 30vw, 11rem)/1 var(--font-display); color: var(--calculo); }
.live-suspense { padding-top: clamp(24px, 7vh, 70px); }
.live-suspense h2 { font: 700 clamp(1.5rem, 7vw, 3rem)/1.15 var(--font-display); }
.live-suspense-asset { width: min(72vw, 310px); aspect-ratio: 1; margin: 20px auto; display: grid; place-items: center; }
.live-suspense-asset img { display: block; width: 100%; height: auto; object-fit: contain; }
.live-player-game { width: 100%; min-width: 0; }
.live-player-notice { min-height: 1.4em; color: var(--calculo); text-align: center; font-size: .85rem; }
.live-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 30px 0; }
.live-podium article { min-width: 0; display: grid; gap: 8px; place-items: center; padding: 18px 8px; border: 1px solid var(--line); border-radius: 16px 16px 4px 4px; background: var(--bg-panel); text-align: center; }
.live-podium article strong { max-width: 100%; overflow-wrap: anywhere; }
.live-podium article b { color: var(--calculo); }
.live-podium .live-avatar-full { display: block; width: min(100%, 170px); aspect-ratio: 2 / 3; }
.live-podium-1 .live-avatar-full { width: min(100%, 215px); }
.live-podium .live-avatar-full .avatar-figure { width: 100%; height: auto; aspect-ratio: 2 / 3; filter: drop-shadow(0 8px 8px #0c1d4788); }
.live-podium .live-avatar-full .avatar-figure canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
.live-podium-1 { min-height: 210px; border-color: #f4d35e !important; }
.live-podium-2 { min-height: 165px; }
.live-podium-3 { min-height: 130px; }
@media (max-width: 620px) {
  .live-entry-grid { grid-template-columns: minmax(0, 1fr); }
  .live-resume { align-items: stretch; flex-direction: column; }
  .live-code-card strong { letter-spacing: .07em; }
}
@media (max-width: 320px) {
  .live-screen { padding-inline: 8px; }
  .live-panel, .live-resume, .live-code-card, .live-participants, .live-ranking { padding: 13px; }
  .live-podium { gap: 5px; }
  .live-podium article { padding-inline: 4px; font-size: .8rem; }
  .live-avatar-medium .avatar-thumbnail { width: 54px; height: 54px; }
  .live-avatar-small .avatar-thumbnail { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .home-live-pulse { box-shadow: none; } }

/* Local ranking movement: never a score or historical metric. */
.ranking-trend { display:inline-block; margin-inline-start:.4em; font-size:.8em; font-weight:700; color:var(--text); white-space:nowrap; }
.ranking-trend:empty { display:none; }
.ranking-moved { background-color:rgba(108,130,255,.16); transition:background-color .3s; }
.ranking-moved .ranking-trend { animation:ranking-trend-pulse .3s ease-out; }
@keyframes ranking-trend-pulse { from { opacity:.25; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { .ranking-moved { transition:none; } .ranking-moved .ranking-trend { animation:none; } }

/* Official Global Top 3 preview; DOM retains ranking order for screen readers. */
.home-top-three { margin-top:24px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--bg-panel); text-align:center; }
.home-top-three h2 { font-size:1rem; letter-spacing:.06em; margin:0 0 16px; }
.home-podium { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:10px; }
.home-podium li { min-width:0; display:flex; flex-direction:column; gap:6px; padding:14px 8px; border:1px solid var(--line); border-radius:14px; overflow-wrap:anywhere; }
.home-podium li[data-position="1"] { grid-column:2; grid-row:1; padding-block:24px; border-color:#ffd76a; background:rgba(255,215,106,.08); }
.home-podium li[data-position="2"] { grid-column:1; grid-row:1; }
.home-podium li[data-position="3"] { grid-column:3; grid-row:1; }
.home-podium-medal { font-size:1.8rem; }
.home-podium-score { font-size:.8rem; color:var(--text); }
.home-top-three .back-link { margin-top:16px; margin-bottom:0; }
@media(max-width:420px) {
  .home-podium { grid-template-columns:minmax(0,1fr); }
  .home-podium li[data-position] { grid-column:auto; grid-row:auto; }
}

.live-player-game { position:relative; }
.live-c2-power { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.8rem; }
.live-c2-interference { --sabotage-accent:#ff4fd2; position:fixed; inset:0; z-index:20000; pointer-events:none; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(12px,3vh,28px); padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); overflow:hidden; background:radial-gradient(ellipse at center,#572069 0%,#20102f 65%,#100b20 100%); color:#fff; text-align:center; }
.live-c2-sabotage-title { flex:none; max-width:100%; font-size:clamp(26px,8vw,96px); font-weight:900; line-height:1.1; letter-spacing:.035em; overflow-wrap:anywhere; text-shadow:0 4px 0 #7f145f,0 0 24px var(--sabotage-accent); }
.live-c2-sabotage-mascot { display:block; width:min(76vw,440px); height:min(58vh,480px); object-fit:contain; flex-shrink:1; min-height:0; filter:drop-shadow(0 12px 24px #100b20); }
.live-c2-interference[hidden] { display:none; }

/* Local Live QR, four-module quiet zone and projection size. */
.live-qr { width: min(100%, 360px); margin: 1rem auto; text-align: center; }
.live-qr svg { display: block; width: 100%; height: auto; background: white; }
.live-join-notice { line-height: 1.6; }
#live-join-panel { min-width: 0; overflow-wrap: anywhere; }
#live-join-panel button { white-space: normal; }

/* Avatar V1: vector layers leave the stage open for future scenes and cosmetics. */
#app.app-avatar { max-width: 1180px; width: 100%; }
.avatar-screen { width: 100%; min-width: 0; }
.avatar-screen button { min-height: 44px; -webkit-tap-highlight-color: transparent; }
.avatar-screen :focus-visible, .avatar-dialog :focus-visible { outline: 3px solid #77caff; outline-offset: 3px; }
.avatar-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.avatar-header h1 { margin: 0 auto 0 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.avatar-header .back-link { margin: 0; }
.avatar-balance { padding: 8px 14px; border: 1px solid #e3a73b; border-radius: 999px; color: #ffdb77; font-weight: 700; white-space: nowrap; }
#avatar-status:not(:empty) { margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #2d375d; }
.avatar-workspace { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 16px; min-width: 0; }
.avatar-categories { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.avatar-categories button { text-align: left; padding: 10px 14px; border: 1px solid #50658d; border-radius: 12px; color: var(--text); background: #2b3559; font-weight: 700; }
.avatar-categories button.is-active { color: #09234a; background: #a9d8ff; border-color: #66b7ff; box-shadow: inset 0 0 0 2px #fff6; }
.avatar-stage { position: relative; display: grid; place-items: center; min-height: clamp(380px, 54vh, 620px); overflow: hidden; border: 1px solid #4e72aa; border-radius: 24px; background: radial-gradient(circle at 50% 35%, #899ed0 0%, #526eaa 45%, #263c72 100%); }
.avatar-stage::after { content: ''; position: absolute; bottom: 9%; width: min(60%, 360px); height: 15px; border-radius: 50%; background: #a2d8ff; box-shadow: 0 0 18px 6px #49afff; opacity: .8; }
.avatar-figure { position: relative; z-index: 1; width: min(42%, 270px); height: min(78%, 430px); filter: drop-shadow(0 16px 11px #19305988); }
.avatar-stage-caption { position: absolute; z-index: 2; bottom: 8px; right: 15px; margin: 0; font-size: .85rem; color: #fff; background: #0c2c60bd; padding: 4px 10px; border-radius: 20px; }
.avatar-editor { margin-top: 16px; padding: 16px; border: 1px solid #4e72aa; border-radius: 22px; background: #e7f2ff; color: #112b54; }
.avatar-editor h2, .avatar-editor h3 { margin: 0 0 10px; }
.avatar-editor h3:not(:first-child) { margin-top: 18px; }
.avatar-options { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-emotion-options { display: grid; grid-template-columns: repeat(auto-fill,minmax(108px,1fr)); max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; }
.avatar-emotion-options .avatar-option { min-width: 0; max-width: none; }
.avatar-emotion-options .avatar-option-preview { position: relative; width: 82px; height: 82px; overflow: hidden; border-radius: 50%; background: #dce9fa; }
.avatar-emotion-options .avatar-option-preview .avatar-figure-small { position: absolute; left: -79px; top: -64px; width: 240px; height: 360px; }
.avatar-emotion-options .avatar-option-preview canvas { width: 240px; height: 360px; max-width: none; }
.avatar-body-options { max-height: min(55vh, 520px); overflow-y: auto; padding: 4px; align-content: flex-start; scrollbar-gutter: stable; }
.avatar-option { display: grid; place-items: center; gap: 4px; min-width: 105px; max-width: 145px; padding: 9px; border: 2px solid #a6bfe5; border-radius: 14px; background: #f9fbff; color: #112b54; text-align: center; overflow-wrap: anywhere; }
.avatar-option.is-selected { border-color: #218cef; box-shadow: 0 0 0 2px #218cef55; }
.avatar-option small { color: #1c7158; font-weight: 700; }
.avatar-swatch { display: block; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #8295b3; background: var(--avatar-swatch); }
.avatar-option-icon { display: grid; place-items: center; height: 48px; font-size: 2rem; }
.avatar-option-preview { width: 72px; height: 80px; display: grid; place-items: center; }
.avatar-option-preview .avatar-figure-small { width: 100%; height: 100%; }
.avatar-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0; }
.avatar-actions p { margin: 0; color: #d1e5ff; }
.avatar-actions > div { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-actions button:disabled { opacity: .55; cursor: default; }
.avatar-dialog { width: min(90vw, 460px); border: 1px solid #79baff; border-radius: 18px; background: #1f294c; color: var(--text); padding: 22px; }
.avatar-dialog::backdrop { background: #050b1dc9; }
.avatar-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.avatar-gate { padding: 35px; text-align: center; border: 1px solid var(--line); border-radius: 18px; }
.profile-avatar-card { display: flex; align-items: center; gap: 20px; padding: 18px; margin-block: 20px; border: 1px solid #79baff; border-radius: 18px; background: #1f294c; }
.profile-avatar-thumbnail { flex: 0 0 84px; }
.profile-avatar-thumbnail .avatar-figure-small { width: 84px; height: auto; }
.profile-avatar-copy { min-width: 0; }
.profile-avatar-card h3 { margin: 0 0 6px; text-transform: uppercase; }
.profile-avatar-card p { margin: 0 0 12px; }
.profile-avatar-editor { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; }
.profile-avatar-editor:focus-visible { outline: 3px solid #77caff; outline-offset: 3px; }
@media (max-width: 400px) { .profile-avatar-card { gap: 12px; padding: 14px; } .profile-avatar-thumbnail { flex-basis: 64px; } .profile-avatar-thumbnail .avatar-figure-small { width: 64px; } }
.avatar-figure-small { width: 40px; height: 54px; filter: none; }
@media (max-width: 650px) {
  .avatar-workspace { display: flex; flex-direction: column; gap: 10px; }
  .avatar-categories { flex-direction: row; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .avatar-categories button { flex: none; white-space: nowrap; }
  .avatar-stage { min-height: 390px; }
  .avatar-figure { width: min(54%, 235px); height: min(78%, 350px); }
  .avatar-option { min-width: 90px; }
}

/* Avatar Kit 02: all layers share one uniformly scaled raster canvas. */
.avatar-stage .avatar-figure { width: min(90%, 360px); height: auto; aspect-ratio: 2 / 3; filter: none; }
.avatar-figure canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; }
.avatar-stage::after { display: none; }
.avatar-option-preview .avatar-figure-small { height: auto; }
.avatar-kit-tests { margin-top: 16px; font-size: .85rem; }
.avatar-kit-tests label { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 6px; max-width: 100%; }
.avatar-kit-tests select { max-width: 100%; }
@media(max-width: 480px) { .avatar-stage .avatar-figure { width: min(95%, 300px); height: auto; } }

/* Shared social Avatar Kit 02 thumbnails; scores retain their own column. */
.avatar-thumbnail { position:relative; display:inline-block; flex:none; width:48px; height:48px; overflow:hidden; border-radius:50%; background:#dceaff; vertical-align:middle; }
.avatar-thumbnail > span { position:absolute; inset:0; display:grid; place-items:center; font-size:1.5rem; }
.avatar-thumbnail canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
.avatar-thumbnail[data-ready="true"] canvas { opacity:1; }
.avatar-thumbnail[data-ready="true"] > span { display:none; }
.avatar-thumbnail-home { width:60px; height:60px; }
.avatar-thumbnail-profile { width:80px; height:80px; }
.social-avatar-slot { display:inline-flex; flex:none; justify-content:center; }
.home-podium .social-avatar-slot { align-self:center; }
#ranking-list .ranking-player { display:flex; gap:10px; align-items:center; min-width:0; }
#ranking-list .ranking-name { min-width:0; overflow-wrap:anywhere; }
@media(max-width:360px) { #ranking-list .score-row { gap:6px; } #ranking-list .ranking-player { gap:6px; } .avatar-thumbnail-ranking { width:40px; height:40px; } }
.avatar-thumbnail > span::before { content:"👤"; }
.avatar-kit03-notice { margin:1rem 0; padding:1rem; border:1px solid var(--border); border-radius:12px; color:var(--text); overflow-wrap:anywhere; }

/* Cosmetics shop shares the Avatar compositor and game controls. */
#app.app-shop { max-width: 1180px; width: 100%; }
.shop-screen { width:100%; min-width:0; }
.shop-screen button { min-height:44px; touch-action:manipulation; }
.shop-screen :focus-visible { outline:3px solid #77caff; outline-offset:3px; }
.shop-header { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.shop-header h1 { margin:0 auto 0 0; font-size:clamp(1.7rem,4vw,2.5rem); }
.shop-header .back-link { margin:0; }
.shop-main { display:grid; grid-template-columns:minmax(270px, .9fr) minmax(0,1.1fr); gap:18px; align-items:start; }
.shop-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:480px; padding:16px; border:1px solid #4e72aa; border-radius:24px; background:radial-gradient(circle at 50% 35%,#899ed0,#526eaa 48%,#263c72); }
#shop-figure { width:min(100%,300px); aspect-ratio:2/3; }
#shop-figure .avatar-figure { width:100%; height:auto; aspect-ratio:2/3; }
#shop-figure canvas { display:block; width:100%; height:auto; aspect-ratio:2/3; }
.shop-stage #shop-clear { margin-top:8px; }
.shop-browser { min-width:0; }
.shop-categories { display:flex; gap:7px; overflow-x:auto; padding:3px 2px 10px; scrollbar-width:thin; }
.shop-categories button { flex:none; padding:8px 12px; border:1px solid #50658d; border-radius:12px; color:var(--text); background:#2b3559; font-weight:700; }
.shop-categories button.is-active { background:#a9d8ff; color:#09234a; border-color:#66b7ff; }
.shop-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:10px; min-height:130px; padding:8px 0; }
.shop-product { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:12px 8px; border:2px solid #a6bfe5; border-radius:16px; color:#112b54; background:#f9fbff; text-align:center; overflow-wrap:anywhere; }
.shop-product.is-selected { border-color:#218cef; box-shadow:0 0 0 2px #218cef55; }
.shop-product-mark { font-size:2rem; line-height:1; color:#3478bc; }
.shop-product small { color:#1c7158; font-weight:700; }
.shop-rarity { display:inline-block; border-radius:999px; padding:2px 8px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#e4e7eb; color:#34445a; }
.shop-rarity-rare { background:#d7eaff; color:#17548b; }
.shop-rarity-epic { background:#eee0fb; color:#663183; }
.shop-detail { min-height:115px; margin-top:12px; padding:16px; border:1px solid #4e72aa; border-radius:18px; background:#e7f2ff; color:#112b54; }
.shop-detail h2 { margin:0 0 6px; font-size:1.2rem; }
.shop-detail p { margin:0 0 10px; }
.shop-detail button:disabled { opacity:.55; }
.shop-status:not(:empty) { margin:14px 0; padding:12px 14px; border-radius:12px; background:#2d375d; }
.shop-screen > #shop-avatar { margin-top:12px; }
.home-card-shop .home-card-icon { display:grid; place-items:center; font-size:2rem; color:#ffd86d; }
.profile-avatar-copy .profile-avatar-editor + .profile-avatar-editor { margin-left:8px; }
@media(max-width:700px) { .shop-main { grid-template-columns:minmax(0,1fr); gap:12px; } .shop-stage { min-height:0; padding:10px; } #shop-figure { width:min(55vw,220px); } }
@media(max-width:400px) { .shop-header { gap:8px; } .shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); } .shop-stage { min-height:280px; } }
/* Shop storefront: cosmetic imagery leads; transactions retain existing controls. */
.app-shop .shop-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.app-shop .shop-toolbar .back-link { margin:0; }
.app-shop .shop-header { display:flex; align-items:center; gap:22px; padding:24px; margin-bottom:24px; border:1px solid #384267; border-radius:22px; background:linear-gradient(120deg,#242a48,#181d36 70%); box-shadow:inset 0 1px 0 #ffffff0c; }
.app-shop .shop-sign { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:none; width:112px; height:94px; border:2px solid #d0f341; border-radius:12px; color:#d0f341; font-size:2rem; font-weight:900; letter-spacing:.08em; box-shadow:0 0 24px #ccf13616,inset 0 0 18px #ccf1360c; transform:rotate(-3deg); }
.app-shop .shop-sign span { margin-bottom:3px; padding:2px 10px; border:1px solid #d0f34166; border-radius:4px; font-size:.65rem; letter-spacing:.3em; }
.app-shop .shop-heading { min-width:0; }
.app-shop .shop-eyebrow { margin:0 0 6px; color:#a0aacb; font-size:.66rem; font-weight:800; letter-spacing:.17em; }
.app-shop .shop-header h1 { margin:0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.03em; }
.app-shop .shop-tagline { margin:7px 0 0; color:#b6bfd9; font-size:.9rem; }
.app-shop .shop-main { grid-template-columns:minmax(260px,.78fr) minmax(0,1.6fr); gap:24px; }
.app-shop .shop-preview-panel { min-width:0; position:sticky; top:16px; }
.app-shop .shop-stage { position:relative; min-height:0; padding:18px 16px 12px; border:1px solid #435078; border-radius:22px 22px 0 0; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#6179ab 0,#344969 45%,#1b2946 85%); }
.app-shop .shop-stage::after { content:''; position:absolute; bottom:30px; width:60%; height:30px; border:1px solid #b9d4ff55; border-radius:50%; background:#b9d4ff12; pointer-events:none; }
.app-shop .shop-stage-label { align-self:flex-start; z-index:1; color:#d0ddf7; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; }
.app-shop #shop-figure { position:relative; z-index:1; width:min(100%,240px); margin:4px 0; }
.app-shop .shop-stage #shop-clear { position:relative; z-index:1; padding:8px 12px; border-radius:10px; border:1px solid #ffffff35; background:#14233b99; color:#e2eafb; font-size:.75rem; }
.app-shop .shop-detail { margin:0; min-height:155px; padding:20px; border:1px solid #435078; border-top:0; border-radius:0 0 22px 22px; color:#f1f4ff; background:#1b233e; }
.app-shop .shop-detail h2 { font-size:1.12rem; line-height:1.3; margin:0 0 12px; }
.app-shop .shop-detail-eyebrow { color:#b8d345; font-size:.6rem; letter-spacing:.14em; font-weight:800; }
.app-shop .shop-detail-hint { color:#aeb9d5; font-size:.84rem; line-height:1.5; }
.app-shop .shop-detail-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.app-shop .shop-detail-price { color:#e6f6a0; font-weight:800; font-size:.94rem; }
.app-shop .shop-detail-state { color:#b8c9f1; font-size:.8rem; }
.app-shop .shop-detail .btn-play { width:100%; min-width:0; min-height:46px; padding:12px; margin:0; border-radius:11px; font-size:.88rem; line-height:1.3; }
.app-shop .shop-catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 15px; }
.app-shop .shop-catalog-heading h2 { margin:0; font-size:1.12rem; letter-spacing:-.02em; }
.app-shop .shop-catalog-count { color:#96a3c5; font-size:.74rem; white-space:nowrap; }
.app-shop .shop-categories { gap:6px; padding-bottom:14px; }
.app-shop .shop-categories button { padding:9px 12px; border:1px solid #414968; border-radius:10px; background:#1c223c; font-size:.76rem; }
.app-shop .shop-categories button.is-active { color:#d2f25d; border-color:#c1df4666; background:#bdd63e14; box-shadow:inset 0 -2px #c7e852; }
.app-shop .shop-products { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:0; align-items:start; }
.app-shop .shop-product { --shop-accent:#71809f; display:flex; align-items:stretch; justify-content:flex-start; padding:0; gap:0; overflow:hidden; border:1px solid #3c4563; border-radius:16px; background:#202741; color:#eef3ff; text-align:left; transition:border-color .15s,transform .15s,box-shadow .15s; }
.app-shop .shop-product-rare { --shop-accent:#6cb6f5; }
.app-shop .shop-product-epic { --shop-accent:#ba8af2; }
.app-shop .shop-product-art { display:block; position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid #ffffff0c; background:radial-gradient(ellipse at 50% 50%,#dfe9f6,#a6b6ce); }
.app-shop .shop-product-rare .shop-product-art { background:radial-gradient(ellipse at 50% 50%,#e3f0fc,#91b0d3); }
.app-shop .shop-product-epic .shop-product-art { background:radial-gradient(ellipse at 50% 50%,#f1e7ff,#b4a0d2); }
.app-shop .shop-product-art img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 6px #17234428); transition:transform .15s; }
.app-shop .shop-product-copy { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px; width:100%; min-width:0; }
.app-shop [data-shop-name] { font-size:.82rem; font-weight:750; line-height:1.3; min-height:2.6em; }
.app-shop .shop-rarity { font-size:.58rem; padding:3px 7px; letter-spacing:.06em; color:#cad3e6; background:#8798b222; }
.app-shop .shop-rarity-rare { color:#9ad2ff; background:#418cca25; }
.app-shop .shop-rarity-epic { color:#d8b6ff; background:#9b63d325; }
.app-shop .shop-product-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:5px; width:100%; padding-top:8px; border-top:1px solid #ffffff0d; }
.app-shop .shop-price { color:#e4f399; font-size:.78rem; font-weight:800; }
.app-shop .shop-product small { font-size:.59rem; color:#abb9d7; }
.app-shop .shop-product.is-equipped small { color:#91e6c1; }
.app-shop .shop-selection-mark { display:none; position:absolute; right:9px; top:9px; width:23px; height:23px; border-radius:50%; background:#cbec4e; color:#18213a; text-align:center; line-height:23px; font-size:.8rem; font-weight:900; }
.app-shop .shop-product.is-selected { border-color:#c8e84b; box-shadow:0 0 0 2px #c8e84b33; }
.app-shop .shop-product.is-selected .shop-selection-mark { display:block; }
@media(hover:hover) and (pointer:fine) { .app-shop .shop-product:hover { transform:translateY(-3px); border-color:var(--shop-accent); box-shadow:0 7px 16px #0003; } .app-shop .shop-product:hover img { transform:scale(1.04); } .app-shop .shop-categories button:hover { border-color:#a8b5da; } }
@media(max-width:950px) and (min-width:701px) { .app-shop .shop-main { grid-template-columns:minmax(240px,.8fr) minmax(0,1fr); gap:16px; } .app-shop .shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .app-shop .shop-toolbar { margin-bottom:14px; } .app-shop .shop-header { gap:14px; padding:18px 14px; margin-bottom:16px; } .app-shop .shop-sign { width:70px; height:70px; font-size:1.3rem; } .app-shop .shop-eyebrow { font-size:.51rem; letter-spacing:.1em; } .app-shop .shop-tagline { font-size:.74rem; line-height:1.4; } .app-shop .shop-main { grid-template-columns:minmax(0,1fr); gap:20px; } .app-shop .shop-preview-panel { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); position:static; } .app-shop .shop-stage { padding:12px 8px; border-radius:18px 0 0 18px; } .app-shop #shop-figure { width:min(100%,150px); } .app-shop .shop-stage-label { font-size:.54rem; letter-spacing:.06em; } .app-shop .shop-stage #shop-clear { padding:6px; font-size:.65rem; } .app-shop .shop-detail { border-top:1px solid #435078; border-left:0; border-radius:0 18px 18px 0; padding:16px 12px; display:flex; flex-direction:column; justify-content:center; } .app-shop .shop-detail h2 { font-size:1rem; } .app-shop .shop-detail-eyebrow { font-size:.51rem; letter-spacing:.06em; } .app-shop .shop-detail-hint { font-size:.76rem; } .app-shop .shop-detail .btn-play { font-size:.76rem; padding:10px; } .app-shop .shop-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .app-shop .shop-catalog-heading h2 { font-size:1rem; } }
@media(prefers-reduced-motion:reduce) { .app-shop .shop-product,.app-shop .shop-product-art img { transition:none; } }
/* Equipment state is distinct from a local preview selection. */
.app-shop .shop-product.is-equipped { border-color:#69dcb2; box-shadow:inset 0 0 0 1px #69dcb255; }
.app-shop .shop-product.is-equipped .shop-selection-mark { display:block; background:#69dcb2; }
.app-shop .shop-product.is-equipped small { background:#69dcb222; padding:4px 6px; border-radius:6px; font-weight:800; text-transform:uppercase; }
.app-shop #shop-login { display:block; text-align:center; text-decoration:none; box-sizing:border-box; }
.app-avatar .avatar-inventory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.app-avatar .avatar-inventory-section { margin-bottom:22px; }
.app-avatar .avatar-cosmetic { padding:0; gap:0; overflow:hidden; min-width:0; border:1px solid #455474; background:#202741; color:#eef3ff; align-items:stretch; text-align:left; }
.app-avatar .avatar-cosmetic .shop-product-art { display:block; position:relative; aspect-ratio:4/3; background:radial-gradient(ellipse,#deebfa,#a3b5d0); }
.app-avatar .avatar-cosmetic img { display:block; width:100%; height:100%; object-fit:contain; }
.app-avatar .avatar-cosmetic .shop-product-copy { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px; min-width:0; }
.app-avatar .avatar-cosmetic [data-shop-name] { font-size:.82rem; font-weight:750; line-height:1.3; min-height:2.6em; }
.app-avatar .avatar-cosmetic .shop-product-footer { display:flex; flex-wrap:wrap; gap:5px; }
.app-avatar .avatar-cosmetic .shop-price { display:none; }
.app-avatar .avatar-cosmetic small { color:#b5c8ed; font-size:.7rem; }
.app-avatar .avatar-cosmetic .shop-rarity { font-size:.6rem; }
.app-avatar .avatar-cosmetic-action { padding:12px; margin:0 12px 12px; border-radius:9px; color:#ddf58e; border:1px solid #c7e85255; background:#c7e8520c; text-align:center; font-weight:750; font-size:.8rem; }
.app-avatar .avatar-cosmetic.is-selected { border-color:#c7e852; box-shadow:0 0 0 2px #c7e85233; }
.app-avatar .avatar-cosmetic.is-equipped small { color:#91e6c1; }
.app-avatar .avatar-cosmetic .shop-selection-mark { display:none; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; background:#c7e852; color:#18213a; line-height:24px; text-align:center; }
.app-avatar .avatar-cosmetic.is-selected .shop-selection-mark { display:block; }
.app-avatar .avatar-cosmetic.is-equipped .shop-selection-mark { background:#69dcb2; }
.app-avatar .avatar-cosmetic:disabled { opacity:.7; }
.app-avatar .avatar-inventory-grid > .avatar-option { min-height:44px; }
@media(max-width:900px) { .app-avatar .avatar-inventory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .app-avatar .avatar-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .app-avatar .avatar-cosmetic .shop-product-copy { padding:10px; } }
.app-avatar .avatar-editor:has(.avatar-inventory-grid) { background:#1b233e; color:#edf3ff; border-color:#455474; }
.app-avatar .avatar-inventory-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0; }
.app-avatar .avatar-inventory-heading h3 { margin:0; font-size:.96rem; }
.app-avatar .avatar-slot-reset { min-height:44px; padding:8px 12px; border:1px solid #587096; border-radius:9px; background:#263451; color:#e5edff; font-size:.75rem; }
.app-avatar .avatar-slot-reset.is-selected { opacity:.55; }