/* Identidad visual del juego. Esta capa no modifica el estado ni los eventos. */
.game-page {
  --game-ink: #14244d;
  --game-aqua: #9cf7e3;
  --game-gold: #ffe18a;
  --game-violet: #7354dc;
}

.game-page .app { width: var(--shared-shell-width); }
/* Menú y partidas mantienen el mismo marco que la portada y las páginas legales. */
@media (min-width: 1921px) {
  .game-page .app { width: var(--wide-shell-width); }
}
/* En un monitor 2K el reto gana altura real, sin alterar las columnas ni el ancho exterior. */
@media (min-width: 1700px) and (max-width: 1920px) and (min-height: 1001px) {
  .game-page #gameScreen .play-panel { min-height: 686px; }
}
@media (min-width: 1700px) and (max-height: 1000px) and (min-height: 800px) {
  .game-page #gameScreen .play-panel { min-height: 598px; }
}
@media (min-width: 1921px) and (min-height: 1250px) {
  .game-page #gameScreen .play-panel { min-height: 840px; padding-block: 30px 32px; }
  .game-page #gameScreen .question-card { min-height: 290px; }
  .game-page #gameScreen .answer { min-height: 85px; }
  .game-page #gameScreen .answers { gap: 16px; margin-bottom: 19px; }
  .game-page #gameScreen .mission { margin-bottom: 22px; }
  .game-page #gameScreen .hint-row { margin-block: 24px 17px; }
}
.game-page .home {
  border: 1px solid #ffffff38;
  border-radius: 34px;
  background: #f6f8ff;
  box-shadow: 0 30px 80px #050b2b83, 0 0 0 5px #ffffff0d;
}
.game-page .home-header,
.game-page .game-header,
.game-page .online-header {
  border: 0;
  background: linear-gradient(110deg, #141e49, #28266e 60%, #175871);
  box-shadow: none;
}
.game-page .home-header {
  min-height: 76px;
  padding-inline: clamp(20px, 3.5vw, 48px);
  border-bottom: 1px solid #ffffff22;
}
.game-page .header-slogan { color: #a4eadf; }
.game-page .home-header .control,
.game-page .game-header .control,
.game-page .online-header .control {
  min-height: 42px;
  padding-inline: 12px;
  border: 1px solid #c5dbff5a;
  border-radius: 12px;
  background: #ffffff17;
  color: #f6f9ff;
}
.game-page .home-header .control:hover,
.game-page .game-header .control:hover,
.game-page .online-header .control:hover { background: #ffffff32; }

/* El menú conserva todos los modos, pero ofrece un primer paso muy evidente. */
.game-page .home-grid {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  gap: clamp(24px, 3.8vw, 62px);
  padding: clamp(30px, 3vw, 45px) clamp(30px, 4vw, 64px) 26px;
  background: radial-gradient(circle at 79% 26%, #815bff69, transparent 31%),
    radial-gradient(circle at 9% 89%, #35d8cf52, transparent 34%),
    linear-gradient(125deg, #111e48, #24246d 56%, #135b7a);
}
.game-page .home-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image: linear-gradient(#ffffff28 1px, transparent 1px), linear-gradient(90deg, #ffffff28 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, transparent);
}
.game-page .intro { align-self: center; color: #fff; }
.game-page .intro .eyebrow {
  padding: 7px 13px 7px 7px;
  border: 1px solid #c7e3ff5d;
  border-radius: 999px;
  color: #d8f9f1;
  background: #ffffff19;
  font-size: .66rem;
  letter-spacing: .1em;
  line-height: 1.3;
}
.game-page .intro .eyebrow-star { flex: none; border-color: #e7f6ff; background: #ffdc76; }
.game-page .intro h1 {
  margin: clamp(18px, 2vw, 28px) 0 15px;
  color: #fff;
  font-size: clamp(3.4rem, 5vw, 6rem);
  line-height: .94;
  letter-spacing: -.085em;
  text-wrap: balance;
}
.game-page .intro h1 em {
  color: #ffdf80;
  text-decoration: none;
  text-shadow: 0 5px 0 #ab668c77;
}
.game-page .intro .subtitle { color: #a9f8e5; font-size: clamp(1.1rem, 1.55vw, 1.45rem); }
.game-page .intro-copy { max-width: 580px; color: #e2ebff; line-height: 1.6; }
.game-page .feature-list span {
  border: 1px solid #c5dbff55;
  border-radius: 11px;
  background: #ffffff1a;
  color: #f4fbff;
  backdrop-filter: blur(8px);
}
.game-page .feature-list b { color: #ffe188; }
.game-page .art-wrap { max-width: 550px; margin-top: 16px; filter: drop-shadow(0 28px 20px #070d344f); }
.game-page .art-wrap::before,
.game-page .art-wrap::after {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #fffdf5;
  box-shadow: 0 6px 0 #172447, 0 13px 20px #070d3470;
  color: #41328e;
  font-size: .9rem;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: game-chip-bob 4.5s ease-in-out infinite;
}
.game-page .art-wrap::before { content: '7 × 8 = 56'; top: 2%; left: 2%; transform: rotate(-8deg); }
.game-page .art-wrap::after { content: '24 ÷ 6 = 4'; top: 16%; right: -2%; transform: rotate(7deg); animation-delay: -2s; }
@keyframes game-chip-bob { 50% { translate: 0 -7px; } }
.game-page .art-caption { color: #d4f8fa; }
.game-page .select-panel {
  align-self: center;
  border: 1px solid #dfdff9;
  border-radius: 28px;
  background: linear-gradient(155deg, #fff, #f5f5ff);
  box-shadow: 0 10px 0 #322f8b, 0 28px 52px #070b3780;
}
.game-page .select-panel h2 { color: #172447; }
.game-page .age-card { border-radius: 14px; background: #fff; }
.game-page .age-card:has(input:checked) { border-color: #7654d9; background: #f2edff; }
.game-page .settings-summary {
  min-height: 54px;
  border-radius: 13px;
  background: linear-gradient(110deg, #d6f9e6, #effff4);
}
.game-page .select-panel > .primary-btn { min-height: 60px; border-radius: 14px; font-size: 1.09rem; }
.game-page .options-review-note {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid #c5b9ed;
  border-left: 4px solid #7956c9;
  border-radius: 12px;
  background: #f4f0ff;
  color: #3d3673;
  font-size: .85rem;
  font-weight: 750;
  line-height: 1.45;
}
.game-page .mode-group-grid .mode-button { border-radius: 12px; }
.game-page .home-footer {
  min-height: 52px;
  border-top: 0;
  background: #121f45;
  color: #d6e5ff;
}
html[data-sky="day"] .game-page .home-grid {
  background: radial-gradient(circle at 80% 18%, #fff7c7d9, transparent 34%),
    radial-gradient(circle at 14% 80%, #74e0de9c, transparent 35%),
    linear-gradient(125deg, #e5faff, #c8e7fb 55%, #d4f5dc);
}
html[data-sky="day"] .game-page .home-grid::before {
  background-image: linear-gradient(#355e8b1b 1px, transparent 1px), linear-gradient(90deg, #355e8b1b 1px, transparent 1px);
}
html[data-sky="day"] .game-page .intro,
html[data-sky="day"] .game-page .intro h1 { color: #192b55; }
html[data-sky="day"] .game-page .intro h1 em { color: #6243bb; text-shadow: 0 4px 0 #ffffffbc; }
html[data-sky="day"] .game-page .intro .eyebrow { border-color: #5371956e; background: #ffffffa6; color: #22566b; }
html[data-sky="day"] .game-page .intro .subtitle { color: #275c68; }
html[data-sky="day"] .game-page .intro-copy { color: #2d4c68; }
html[data-sky="day"] .game-page .feature-list span { border-color: #9dbecb; background: #ffffffc9; color: #315568; }
html[data-sky="day"] .game-page .feature-list b,
html[data-sky="day"] .game-page .art-caption { color: #5942a4; }

/* La partida se lee como una mesa de misión: reto, respuestas y progreso. */
.game-page .game { gap: 16px; }
.game-page .game-header,
.game-page .online-header {
  min-height: 72px;
  padding: 12px clamp(16px, 2vw, 26px);
  border: 1px solid #c6d9ff40;
  border-radius: 22px;
  box-shadow: 0 12px 30px #07103270;
}
.game-page .header-middle { gap: 7px; }
.game-page .hud-pill { min-height: 38px; border-radius: 11px; }
.game-page .age-badge { background: #6143ba; }
.game-page .hud-pill.gold { background: #ffe28a; }
.game-page .hud-pill.coral { background: #ffc9bb; }
.game-page .game-grid { grid-template-columns: minmax(0, 1.65fr) minmax(278px, .7fr); gap: 17px; align-items: start; }
.game-page .play-panel,
.game-page .stats-panel,
.game-page .online-screen .panel,
.game-page .local-screen .panel {
  border: 1px solid #dadffa;
  border-radius: 25px;
  background: linear-gradient(155deg, #fff, #f7f7ff);
  box-shadow: 0 10px 0 #5149a3, 0 24px 44px #06113d54;
}
.game-page .play-panel { padding: 22px 25px 24px; }
.game-page .play-panel::before { height: 6px; background: linear-gradient(90deg, #69e5d1, #ffe084 45%, #aa87fa); }
.game-page .mission { margin: 3px 0 16px; }
.game-page .mission .overline { color: #5f55aa; }
.game-page .mission h1 { color: #1c285a; font-size: 1.9rem; }
.game-page .mission-badge { border: 1px solid #9edbcf; border-radius: 999px; background: #e5fbf1; color: #205e57; }
.game-page .game-clock { border-radius: 999px; }
.game-page .question-card,
.game-page .race-question,
.game-page .local-question {
  min-height: 208px;
  border: 1px solid #bcb6ff65;
  border-radius: 22px;
  background: radial-gradient(circle at 75% 28%, #7c6efc80, transparent 36%),
    radial-gradient(circle at 20% 85%, #30d5c65c, transparent 40%),
    linear-gradient(125deg, #18255d, #41318c 60%, #176889);
  box-shadow: inset 0 1px #ffffff55, inset 0 -6px #121c5970, 0 8px 0 #beb3ed, 0 19px 32px #1c1e6670;
}
.game-page .question-card::before,
.game-page .question-card::after { border-color: #ffffff26; }
.game-page .question-glow { background: #88f6f655; }
.game-page .question-kicker { color: #c4fff3; }
.game-page .expression { color: #fff; text-shadow: 0 6px 0 #15184880; }
.game-page .question-subtitle { color: #e6ecff; }
.game-page .question-decoration { color: #ffe28a; }
.game-page .game.detective-mode .question-card { background: radial-gradient(circle at 82% 10%, #9df1d465, transparent 40%), linear-gradient(125deg, #173c60, #3f3784); }
.game-page .hint-row { margin: 20px 0 11px; }
.game-page .hint-button { border-color: #b9d8df; border-radius: 11px; background: #e9faf6; color: #275568; }
.game-page .answer-instruction { color: #415475; }
.game-page .answers { gap: 11px; margin-bottom: 14px; }
.game-page .answer {
  min-height: 70px;
  border: 2px solid #313368;
  border-radius: 15px;
  box-shadow: 0 6px 0 #8d8bbd;
  color: #1c2b55;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.game-page .answer:nth-child(1) { background: #fff5db; }
.game-page .answer:nth-child(2) { background: #e7fcf2; }
.game-page .answer:nth-child(3) { background: #eeedff; }
.game-page .answer:nth-child(4) { background: #fff0ec; }
.game-page .answer:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 9px 0 #7778b4; }
.game-page .answer.correct { border-color: #247952; background: #caf5dc; box-shadow: 0 6px 0 #28835c; }
.game-page .answer.wrong { border-color: #a85060; background: #ffe0da; box-shadow: 0 6px 0 #ae5763; }
.game-page .answer .key { border-color: #b4b8d5; color: #4e567c; }
.game-page .feedback { border-radius: 13px; background: #f4f6ff; color: #33486b; }
.game-page .feedback.success { background: #e6faec; color: #266247; }
.game-page .feedback.error { background: #fff0e8; color: #814a35; }
.game-page .experience { margin-top: 18px; }
.game-page .experience-head { color: #495b81; }
.game-page .xp-track { height: 14px; border: 0; background: #e4e9f8; }
.game-page .xp-fill { background: linear-gradient(90deg, #43d5c9, #ffcf68 55%, #a676fa); }
.game-page .stats-panel { display: flex; flex-direction: column; padding: 21px; }
.game-page .stats-panel .tip { margin-top: auto; }
.game-page .stats-head h2 { color: #1c285a; }
.game-page .stats-emblem { border-color: #45408c; background: #eee8ff; box-shadow: 3px 3px 0 #b5a1dd; }
.game-page .level-card {
  border: 1px solid #a3b3ef85;
  border-radius: 17px;
  background: radial-gradient(circle at 90% 0%, #ffffff2f, transparent 45%), linear-gradient(120deg, #2b3a92, #553da3 68%, #2e86a6);
  box-shadow: 0 6px 0 #262b75;
}
.game-page .level-card:hover { box-shadow: 0 8px 0 #262b75; }
.game-page .level-card-name { color: #ffe69c; }
.game-page .level-card-link { color: #b6fff1; }
.game-page .stat-hero { border-color: #f2d683; border-radius: 13px; background: linear-gradient(110deg, #fff6d9, #fffbed); }
.game-page .stat { border-color: #e0e5f4; border-radius: 12px; background: #f5f7ff; }
.game-page .tip { border-radius: 11px; }
.game-page .game-footer { color: #e5ecff; text-shadow: 0 2px 6px #0d194a; }
.game-page .game-footer > span { color: #ffe18a; }

/* Las salas y los duelos comparten el mismo escenario que la aventura. */
.game-page .online-screen,
.game-page .local-screen { gap: 16px; }
.game-page .online-entry { border-radius: 25px; background: radial-gradient(circle at 76% 16%, #8d68fa65, transparent 32%), linear-gradient(120deg, #172354, #283070 59%, #186481); }
.game-page .online-intro .eyebrow,
.game-page .online-intro h1 { color: #fff; }
.game-page .online-intro h1 em { color: #ffdf80; }
.game-page .online-intro p { color: #e0edff; }
.game-page .online-steps span { border-color: #ffffff55; background: #ffffff1d; color: #fff; }
.game-page .online-screen .question-card,
.game-page .local-screen .question-card { border-color: #bcb6ff65; background: radial-gradient(circle at 72% 20%, #7c6efc80, transparent 38%), linear-gradient(125deg, #18255d, #41318c 60%, #176889); }
.game-page .local-toolbar { border-radius: 19px; }
.game-page .local-side.blue-side { border-top: 6px solid #6c9eff; }
.game-page .local-side.orange-side { border-top: 6px solid #ffaf72; }
.game-page .race-notice,
.game-page .local-notice { border-radius: 13px; }

@media (min-width: 1200px) and (max-height: 1000px) {
  .game-page .app { margin-top: 8px; margin-bottom: 8px; }
  .game-page .home-header { min-height: 64px; height: 64px; }
  .game-page .home-grid { gap: 24px; padding: 15px 34px 12px; }
  .game-page .intro h1 { margin: 13px 0 10px; font-size: clamp(3.15rem, 4.2vw, 4.7rem); }
  .game-page .intro-copy { line-height: 1.42; }
  .game-page .art-wrap { height: 230px; margin-top: 6px; }
  .game-page .island-art { height: 290px; }
  .game-page .select-panel { padding: 13px 20px; }
  .game-page .select-panel > .primary-btn { min-height: 50px; }
  .game-page .home-footer { min-height: 42px; }
  .game-page .game { gap: 12px; }
  .game-page .game-header { min-height: 64px; padding-block: 8px; }
  .game-page .play-panel { padding: 17px 22px 18px; }
  .game-page .mission { margin: 3px 0 10px; }
  .game-page .mission h1 { font-size: 1.66rem; }
  .game-page .question-card { min-height: 168px; padding: 16px 12px; }
  .game-page .hint-row { margin: 12px 0 10px; }
  .game-page .answer { min-height: 61px; }
  .game-page .answers { gap: 9px; margin-bottom: 11px; }
  .game-page .experience { margin-top: 13px; }
  .game-page .stats-panel { padding: 17px; }
}
@media (max-width: 1150px) {
  .game-page .home-grid { grid-template-columns: minmax(0, 1fr) minmax(350px, .95fr); }
  .game-page .game-grid { grid-template-columns: minmax(0, 1.45fr) minmax(255px, .75fr); }
}
@media (max-width: 900px) {
  .game-page .home-grid { grid-template-columns: 1fr; }
  .game-page .intro { text-align: center; }
  .game-page .intro h1,
  .game-page .intro-copy { margin-inline: auto; }
  .game-page .feature-list { justify-content: center; }
  .game-page .art-wrap { margin-inline: auto; }
  .game-page .game-grid { grid-template-columns: 1fr; align-items: start; }
  .game-page .stats-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .game-page .stats-panel .tip { margin-top: 0; }
  .game-page .stats-head,
  .game-page .stats-intro,
  .game-page .stats-list,
  .game-page .tip { grid-column: 1 / -1; }
  .game-page .stats-intro { margin: 0; }
  .game-page .stat-hero { margin: 0; }
}
@media (max-width: 600px) {
  .game-page .app { width: calc(100% - 20px); }
  .game-page .home { border-radius: 20px; }
  .game-page .home-header { min-height: 65px; padding: 9px 12px; }
  .game-page .home-header .control,
  .game-page .game-header .control,
  .game-page .online-header .control { min-width: 40px; min-height: 40px; padding: 7px; }
  .game-page .home-grid { gap: 15px; padding: 27px 18px 28px; }
  .game-page .intro h1 { font-size: clamp(2.9rem, 10.5vw, 4rem); }
  .game-page .intro .eyebrow { font-size: .58rem; }
  .game-page .art-wrap { height: 190px; margin-top: 12px; }
  .game-page .art-wrap::before,
  .game-page .art-wrap::after { padding: 5px 7px; border-radius: 9px; font-size: .68rem; box-shadow: 0 4px 0 #172447; }
  .game-page .select-panel { padding: 20px; border-radius: 20px; }
  .game-page .game-header { border-radius: 18px; }
  .game-page .game-header .logo { width: auto; }
  .game-page .header-actions { margin-left: auto; }
  .game-page .header-middle { order: 3; width: 100%; justify-content: center; }
  .game-page .hud-pill { min-height: 34px; }
  .game-page .play-panel,
  .game-page .stats-panel { border-radius: 20px; }
  .game-page .play-panel { padding: 20px 15px 22px; }
  .game-page .mission h1 { font-size: 1.5rem; }
  .game-page .question-card { min-height: 180px; border-radius: 17px; }
  .game-page .question-subtitle { font-size: .73rem; }
  .game-page .answer { min-height: 68px; }
  .game-page .stats-panel { grid-template-columns: 1fr; }
  .game-page .stats-head,
  .game-page .stats-intro,
  .game-page .stats-list,
  .game-page .tip { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page .art-wrap::before,
  .game-page .art-wrap::after { animation: none; }
  .game-page .answer,
  .game-page .control { transition: none; }
}
html[data-calm-motion="true"] .game-page .art-wrap::before,
html[data-calm-motion="true"] .game-page .art-wrap::after { animation: none; }

.game-page .game-grid { position: relative; }
.game-page .mascot-guide {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 520px);
  padding: 10px 14px 10px 9px;
  border: 2px solid #302264;
  border-radius: 19px;
  background: linear-gradient(135deg, #fff8d9, #e7fff7);
  box-shadow: 0 6px 0 #52479d, 0 13px 25px #101b4f38;
  color: #18284f;
  z-index: 4;
  pointer-events: none;
  animation: mascot-appear .3s ease-out;
}
.game-page .mascot-guide img { flex: none; width: 56px; height: 56px; border-radius: 14px; filter: drop-shadow(0 3px 0 #251e5a52); }
.game-page .mascot-guide p { margin: 0; font-size: .84rem; font-weight: 800; line-height: 1.35; }
@keyframes mascot-appear { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (min-width: 1700px) {
  .game-page .mascot-guide {
    position: absolute;
    top: 101px;
    right: calc(100% + 14px);
    width: 160px;
    flex-direction: column;
    text-align: center;
  }
}
@media (min-width: 1800px) { .game-page .mascot-guide { width: 200px; } }
@media (max-width: 600px) {
  .game-page .mascot-guide { width: 100%; padding: 8px 10px; gap: 8px; }
  .game-page .mascot-guide img { width: 42px; height: 42px; }
  .game-page .mascot-guide p { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) { .game-page .mascot-guide { animation: none; } }
html[data-calm-motion="true"] .game-page .mascot-guide { animation: none; }

.game-page [data-choice-group="optionsOperation"] [data-value="equation"]:disabled { display: none; }
.game-page .options-age-section .age-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.game-page .options-age-section .age-choices .option-card:last-child { grid-column: auto; }
.game-page .options-setting-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 901px) {
  .game-page [data-choice-group="optionsOperation"]:has([data-value="equation"]:not(:disabled)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .game-page .options-age-section .age-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-page .options-age-section .age-choices .option-card:last-child { grid-column: 1 / -1; }
  .game-page .options-setting-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .game-page [data-choice-group="optionsOperation"] [data-value="equation"]:not(:disabled) { grid-column: 1 / -1; }
}