/* Capa visual compartida: conserva el diseño base y sus reglas de respuesta. */
:root {
  --navy: #172447;
  --navy-deep: #101a38;
  --ink: #172447;
  --muted: #53627c;
  --gold: #ffcf58;
  --violet: #7854e8;
  --mint: #43d9cb;
  /* Hasta unos 2 cm por lado en pantallas grandes; sin alterar móvil o tableta. */
  --desktop-shell-shift: clamp(0px, calc(46.875vw - 750px), 150px);
  --shared-shell-width: min(calc(1280px + var(--desktop-shell-shift)), calc(100% - clamp(72px, 11vw, 190px) + var(--desktop-shell-shift)));
  --wide-shell-width: min(calc(100% - 160px), clamp(calc(1280px + var(--desktop-shell-shift)), 65vw, 1660px));
}

.game-page, .landing-page { background: #101a38; }
.game-page .world, .landing-page .world {
  background:
    radial-gradient(circle at 8% 15%, #ffffffb0 0 2px, transparent 3px),
    radial-gradient(circle at 83% 12%, #ffdc83b0 0 3px, transparent 4px),
    radial-gradient(circle at 72% 52%, #ffffff91 0 2px, transparent 3px),
    radial-gradient(circle at 40% 75%, #ffffff91 0 2px, transparent 3px),
    radial-gradient(circle at 50% 12%, #4f4bcc 0, transparent 43%),
    linear-gradient(160deg, #141c51, #26337a 52%, #146d8c);
  background-size: 370px 290px, 490px 360px, 620px 460px, 420px 390px, auto, auto;
}
.game-page .world-moon, .landing-page .world-moon,
.game-page .world-sun, .landing-page .world-sun {
  position: absolute;
  top: 8%;
  right: clamp(35px, 8vw, 170px);
  width: clamp(76px, 8vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.game-page .world-moon, .landing-page .world-moon {
  background:
    radial-gradient(circle at 32% 30%, #d3ddea88 0 7%, transparent 8%),
    radial-gradient(circle at 68% 56%, #c7d4e37a 0 10%, transparent 11%),
    radial-gradient(circle at 43% 72%, #c7d4e366 0 5%, transparent 6%),
    radial-gradient(circle at 35% 30%, #fffef0, #e2f3ff 78%);
  box-shadow: 0 0 25px 9px #ecf7ffc4, 0 0 90px 38px #d4ecff69;
}
.game-page .world-sun, .landing-page .world-sun { display: none; }
.game-page .cloud-three, .landing-page .cloud-three,
.game-page .cloud-four, .landing-page .cloud-four,
.game-page .cloud-five, .landing-page .cloud-five { display: none; }
.game-page .cloud-three, .landing-page .cloud-three { top: 9%; left: 32%; transform: scale(.9); animation-delay: -12s; }
.game-page .cloud-four, .landing-page .cloud-four { top: 48%; right: 5%; transform: scale(.75); animation-delay: -26s; }
.game-page .cloud-five, .landing-page .cloud-five { top: 63%; left: 18%; transform: scale(.55); animation-delay: -33s; }
html[data-sky="day"] .game-page, html[data-sky="day"] .landing-page { background: #7bd9ef; }
html[data-sky="day"] .game-page .world, html[data-sky="day"] .landing-page .world {
  background: radial-gradient(circle at 76% 18%, #d8faff99, transparent 30%),
    linear-gradient(165deg, #52baf2 0%, #9be6fa 58%, #b6f3d8 100%);
}
html[data-sky="day"] .game-page .world-moon, html[data-sky="day"] .landing-page .world-moon { display: none; }
html[data-sky="day"] .game-page .world-sun, html[data-sky="day"] .landing-page .world-sun {
  display: block;
  background: radial-gradient(circle at 34% 30%, #fffce0, #ffe16d 70%, #ffc44c);
  box-shadow: 0 0 28px 12px #fff3a3b3, 0 0 95px 42px #ffed9d7a;
}
html[data-sky="day"] .game-page .world-sun::before,
html[data-sky="day"] .landing-page .world-sun::before {
  content: '';
  position: absolute;
  inset: -27px;
  border-radius: 50%;
  background: repeating-conic-gradient(#ffec89 0deg 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(transparent 0 48%, #000 50%);
  mask: radial-gradient(transparent 0 48%, #000 50%);
}
html[data-sky="day"] .game-page .world-cloud, html[data-sky="day"] .landing-page .world-cloud {
  display: block;
  opacity: .82;
  background: #fff;
  box-shadow: 23px -15px #fff, 58px -6px #fff;
}
html[data-sky="day"] .game-page .world-star, html[data-sky="day"] .landing-page .world-star,
html[data-sky="day"] .game-page .world-shooting-star, html[data-sky="day"] .landing-page .world-shooting-star { display: none; }
html[data-sky="day"] .game-page .world-hill, html[data-sky="day"] .landing-page .world-hill { background: #59cf73a8; }
html[data-sky="day"] .game-page .hill-two, html[data-sky="day"] .landing-page .hill-two { background: #36bb8299; }
.game-page .world-cloud, .landing-page .world-cloud {
  opacity: .25;
  animation: cloud-drift 48s ease-in-out infinite;
}
.game-page .cloud-two, .landing-page .cloud-two { animation-duration: 63s; animation-delay: -19s; }
.game-page .world-star, .landing-page .world-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff7d5;
  box-shadow: 0 0 10px 2px #d8f6ffb0;
  opacity: .65;
  animation: star-twinkle var(--period, 4s) ease-in-out var(--phase, 0s) infinite;
}
.game-page .world-shooting-star, .landing-page .world-shooting-star {
  position: absolute;
  top: 16%;
  left: -180px;
  width: 150px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a9eafa 55%, #fff);
  box-shadow: 0 0 16px 2px #bdfcff99;
  opacity: 0;
  animation: shooting-star 8s linear -5.3s infinite;
}
.game-page .world-ufo, .landing-page .world-ufo,
.game-page .world-plane, .landing-page .world-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 58px;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px #10234a80);
}
.game-page .world-ufo svg, .landing-page .world-ufo svg,
.game-page .world-plane svg, .landing-page .world-plane svg {
  display: block;
  width: 100%;
  height: 100%;
}
.game-page .world-ufo svg, .landing-page .world-ufo svg {
  animation: ufo-hover 2.8s ease-in-out infinite;
}
.game-page .world-plane, .landing-page .world-plane { display: none; }
html[data-sky="day"] .game-page .world-ufo,
html[data-sky="day"] .landing-page .world-ufo { display: none; }
html[data-sky="day"] .game-page .world-plane,
html[data-sky="day"] .landing-page .world-plane {
  display: block;
  width: 126px;
  height: 49px;
}
@keyframes ufo-hover {
  50% { transform: translateY(-5px); }
}
@keyframes cloud-drift {
  0%, 100% { translate: -16px 0; }
  50% { translate: 22px -4px; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: .25; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.55); }
}
@keyframes shooting-star {
  0%, 67% { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg); }
  68% { opacity: 1; }
  79% { opacity: 1; transform: translate3d(115vw, 40vh, 0) rotate(18deg); }
  80%, 100% { opacity: 0; transform: translate3d(115vw, 40vh, 0) rotate(18deg); }
}
.game-page .world-hill, .landing-page .world-hill { background: #42c5b33d; }
.game-page .world-orb, .landing-page .world-orb { border-color: #91b9ff24; }

/* El aviso de audio ocupa el mismo lateral en la portada y en el juego. */
.game-page .sound-notice,
.landing-page .sound-notice {
  right: max(12px, env(safe-area-inset-right));
  left: auto;
  top: 50%;
  bottom: auto;
  max-width: min(345px, calc(100vw - 24px));
  translate: 0 -50%;
  transform: none;
  animation: sound-notice-side-in .35s ease both;
}
.game-page .sound-notice:hover,
.landing-page .sound-notice:hover { transform: translateX(-3px); }
@keyframes sound-notice-side-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page .sound-notice,
  .landing-page .sound-notice { animation: none; }
  .game-page .sound-notice:hover,
  .landing-page .sound-notice:hover { transform: none; }
}
html[data-calm-motion="true"] .game-page .sound-notice,
html[data-calm-motion="true"] .landing-page .sound-notice { animation: none; }

.game-page .home, .landing-page .landing-shell {
  border-color: #111936;
  box-shadow: 0 10px 0 #0a1128, 0 32px 70px #030b2f8c;
}
.game-page .home-header, .game-page .game-header, .game-page .online-header,
.landing-page .landing-header {
  background: linear-gradient(110deg, #111c43, #28256c 60%, #164e71);
  border-color: #101a38;
}
.game-page .logo b, .landing-page .logo b { color: #82f3d7; }
.game-page .logo-mark, .landing-page .logo-mark {
  color: #172447;
  background: linear-gradient(145deg, #fff19c, #ffb84f);
  box-shadow: 3px 3px 0 #0b1330, 0 0 22px #ffda7c77;
}
.game-page img.logo-mark, .landing-page img.logo-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: none;
  object-fit: contain;
  box-shadow: 0 0 18px #ffda7c55;
}
@media (max-width: 620px) {
  .game-page img.logo-mark, .landing-page img.logo-mark {
    width: 36px;
    height: 36px;
  }
}
.game-page .home-grid, .landing-page .hero {
  background:
    radial-gradient(circle at 78% 5%, #ffe9a678 0, transparent 28%),
    radial-gradient(circle at 22% 74%, #83e8e766 0, transparent 34%),
    linear-gradient(128deg, #f9fcff, #e9e8ff 65%, #d9fbf1);
}
.game-page .intro h1 em, .landing-page .hero h1 em {
  color: #633ed4;
  text-decoration-color: #d5c5ff;
  text-shadow: 0 3px 0 #ffffff;
}
.game-page .eyebrow, .landing-page .eyebrow { color: #275d74; }
.game-page .art-wrap, .landing-page .hero-art { filter: drop-shadow(0 22px 18px #292c7355); }
.game-page .island-art, .landing-page .island-art { animation: island-float 5s ease-in-out infinite; }
@keyframes island-float { 50% { transform: translateY(-9px); } }

.game-page .select-panel, .game-page .panel,
.landing-page .mode-card, .landing-page .step, .landing-page .age-card {
  border-color: #252758;
  box-shadow: 7px 8px 0 #7773c5, 0 18px 28px #1a1e5233;
}
.game-page .select-panel { background: linear-gradient(160deg, #fff, #fbfaff); }
.game-page .select-panel h2 { color: #202456; }
.game-page .age-card:has(input:checked) {
  border-color: #7351de;
  background: #f2ecff;
  box-shadow: 0 5px 0 #c4b1ff, 0 0 0 4px #d6caff72;
}
.game-page .primary-btn, .landing-page .cta-primary {
  border-color: #42308f;
  background: linear-gradient(100deg, #ffdd69, #ffac56);
  box-shadow: 0 6px 0 #9d5480, 0 10px 24px #c3687d64;
}
.game-page .primary-btn:hover, .landing-page .cta-primary:hover {
  box-shadow: 0 8px 0 #9d5480, 0 14px 27px #c3687d64;
}
.game-page .settings-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  cursor: pointer;
  border: 2px solid #2d946e;
  border-left-width: 6px;
  background: linear-gradient(110deg, #d8f8e7, #f0fff4);
  box-shadow: 0 3px 0 #9ad4b3;
  color: #174c39 !important;
  transition: transform .15s, background .15s, box-shadow .15s;
}
.game-page .settings-summary strong { font-size: .92rem; }
.game-page .settings-summary span { font-size: .78rem; font-weight: 700; }
.game-page .settings-summary:hover { transform: translateY(-2px); background: #c6f3dc; box-shadow: 0 5px 0 #9ad4b3; }
.game-page .settings-summary:active { transform: translateY(2px); box-shadow: 0 1px 0 #9ad4b3; }
.game-page .extra-modes { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 23px; }
.game-page .mode-group { min-width: 0; }
.game-page .mode-group h3 {
  margin: 0 0 7px;
  color: #4c4e80;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.game-page .mode-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.game-page .mode-group:last-child .mode-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game-page .mode-group:last-child .mode-button:last-child { grid-column: 1 / -1; }
.game-page .mode-group-grid .mode-button { min-width: 0; padding: 8px; border-color: #c4c5e8; background: #f4f4ff; }
.game-page .mode-group-grid .mode-button strong { color: #282c61; }
.game-page .mode-group-grid .mode-button small { line-height: 1.2; }
.game-page .mode-group-grid .mode-icon { width: 36px; height: 36px; font-size: 1rem; }
.game-page .mode-group-grid .mode-button > span:last-child { display: none; }

.game-page .game-grid { grid-template-columns: minmax(0, 1.65fr) minmax(275px, .7fr); }
.game-page .game-header { box-shadow: 0 7px 0 #101a38, 0 15px 28px #060c2c55; }
.game-page .age-badge { color: #fff; background: #5641a9; }
.game-page .game-header .control, .game-page .home-header .control { border-color: #8998d05c; background: #ffffff16; }
.game-page .game-header .control:hover, .game-page .home-header .control:hover { background: #ffffff32; }
.game-page .play-panel { background: linear-gradient(150deg, #fff, #f8f8ff); }
.game-page .play-panel::before { background: repeating-linear-gradient(90deg, #5de4c4 0 34px, #ffdc72 34px 68px, #ae81ff 68px 102px); }
.game-page .question-card {
  border: 3px solid #202151;
  background:
    radial-gradient(circle at 50% 23%, #59c6e488 0, transparent 45%),
    repeating-linear-gradient(0deg, transparent 0 34px, #ffffff0a 35px 36px),
    linear-gradient(122deg, #263079, #49329d 58%, #176b91);
  box-shadow: inset 0 -9px #181b58, 0 8px 0 #9491d1, 0 16px 25px #211a6070;
}
.game-page .question-kicker { color: #b4fff0; }
.game-page .game.detective-mode .question-card {
  background: radial-gradient(circle at 78% 15%, #b9f5db44, transparent 38%), linear-gradient(125deg, #173e59, #29436f 52%, #425294);
}
.game-page .game.detective-mode .question-kicker { color: #ffe18a; }
.game-page .game.detective-mode .answer.detective-verdict:not(.correct):not(.wrong) { background: #f0e8ff; border-color: #6d55b6; }
.game-page .question-mark { color: #ffda69; }
.game-page .column-expression {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  font-size: clamp(2.25rem, 4.6vw, 3.7rem);
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}
.game-page .column-board {
  max-width: 100%;
  padding: .08em .22em .14em;
  border-radius: .2em;
  background: #ffffff12;
  font-weight: 900;
}
.game-page .column-vertical { display: grid; grid-template-columns: 1.1ch max-content; column-gap: .08em; }
.game-page .column-top { grid-column: 2; grid-row: 1; justify-self: end; }
.game-page .column-sign { grid-column: 1; grid-row: 2; color: #98fff0; }
.game-page .column-bottom { grid-column: 2; grid-row: 2; justify-self: end; }
.game-page .column-rule { grid-column: 1 / -1; grid-row: 3; height: .09em; margin: .08em 0; background: #fff; border-radius: 2px; }
.game-page .column-result { grid-column: 2; grid-row: 4; justify-self: end; color: #ffde77; }
.game-page .column-division { display: grid; grid-template-columns: max-content max-content; align-items: stretch; column-gap: .14em; }
.game-page .column-dividend { grid-column: 1; grid-row: 1; padding: .08em .1em; align-self: start; }
.game-page .column-divisor { grid-column: 2; grid-row: 1; padding: .08em .14em .08em .3em; border-left: .06em solid #fff; }
.game-page .column-quotient { grid-column: 2; grid-row: 2; min-width: 1.7ch; padding: .13em .14em .04em .3em; border-top: .06em solid #fff; border-left: .06em solid #fff; color: #ffde77; text-align: center; }
.game-page .answer { border-color: #292c66; box-shadow: 0 6px 0 #8e8db4; }
.game-page .answer:hover:not(:disabled) { box-shadow: 0 9px 0 #7778b4; }
.game-page .answer.correct { border-color: #227957; box-shadow: 0 6px 0 #28835c; }
.game-page .answer.wrong { border-color: #a85060; box-shadow: 0 6px 0 #ae5763; }
.game-page .stats-panel { background: linear-gradient(150deg, #fff, #f6f4ff); }
.game-page .xp-fill { background: linear-gradient(90deg, #5ce0c6, #f9d36d, #ad7afa); }

.landing-page .landing-shell { background: #fafaff; }
.landing-page .section--tint { background: linear-gradient(130deg, #eeedff, #e9fcf7); }
.landing-page .section-head h2 em { color: #6845d5; }
.landing-page .mode-card:nth-child(3n + 1) { box-shadow: 7px 8px 0 #ffcf84; }
.landing-page .mode-card:nth-child(3n + 2) { box-shadow: 7px 8px 0 #8ddfd2; }
.landing-page .mode-card.detective-card { border-color: #8467c6; background: linear-gradient(145deg, #f7f2ff, #edf9ff); box-shadow: 7px 8px 0 #b7a2ef; }
.landing-page .step { box-shadow: 7px 8px 0 #aea1ec; }
.landing-page .final-cta { background: radial-gradient(circle at 50% 0%, #5144b3, transparent 57%), linear-gradient(135deg, #162250, #0d506e); }

.achievement-notices {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.achievement-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 94px;
  padding: 13px 11px;
  border: 3px solid #ffdd76;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(115deg, #23236a, #6635a5 65%, #1c78a0);
  box-shadow: 0 7px 0 #15134b, 0 20px 42px #070b3480, inset 0 0 25px #ffffff1a;
  pointer-events: auto;
  animation: achievement-arrive .38s cubic-bezier(.2, 1.5, .4, 1) both;
}
.achievement-crown { border-color: #ffdb55; background: linear-gradient(115deg, #513074, #a66621, #5b338e); }
.achievement-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 51px;
  height: 51px;
  border: 2px solid #fff6c0;
  border-radius: 12px;
  color: #3b266e;
  background: linear-gradient(145deg, #fff3b2, #ffc15f);
  font-size: 1.5rem;
  box-shadow: 0 4px 0 #bb7f5d;
}
.achievement-copy { display: grid; gap: 3px; min-width: 0; line-height: 1.25; }
.achievement-copy small { color: #ffdf78; font-size: .64rem; font-weight: 900; letter-spacing: .16em; }
.achievement-copy strong { font-size: 1.02rem; }
.achievement-copy > span { color: #ecedff; font-size: .8rem; }
.achievement-dismiss { align-self: flex-start; margin-left: auto; padding: 0 4px; border: 0; color: #fff; background: transparent; font-size: 1.35rem; cursor: pointer; }
@keyframes achievement-arrive { from { opacity: 0; transform: translateY(-22px) scale(.85); } to { opacity: 1; transform: none; } }

@media (max-width: 1150px) {
  .game-page .mode-group:last-child .mode-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-page .game-grid { grid-template-columns: minmax(0, 1.45fr) minmax(255px, .75fr); }
}
@media (max-width: 900px) {
  .game-page .game-grid { grid-template-columns: 1fr; }
  .game-page .mode-group:last-child .mode-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .game-page .home-header-right { gap: 5px; }
  .game-page .home-header-right .control { min-width: 36px; padding: 6px; }
  .game-page .header-middle { flex-wrap: wrap; justify-content: center; }
  .game-page .header-middle .hud-pill { min-height: 34px; }
  .game-page .mode-group-grid, .game-page .mode-group:last-child .mode-group-grid { grid-template-columns: 1fr; }
  .game-page .mode-group:last-child .mode-button:last-child { grid-column: auto; }
  .game-page .mode-group-grid .mode-button > span:last-child { display: block; }
  .game-page .question-card { min-height: 174px; }
  .game-page .column-expression { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  .achievement-notices { top: auto; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .achievement-notice { min-height: 83px; }
}
@media (min-width: 1200px) and (max-height: 1000px) {
  .game-page .extra-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .game-page .mode-group h3 { margin-bottom: 4px; }
  .game-page .mode-group-grid, .game-page .mode-group:last-child .mode-group-grid { grid-template-columns: 1fr; gap: 6px; }
  .game-page .mode-group:last-child .mode-button:last-child { grid-column: auto; }
}
@media (min-width: 1921px) {
  .game-page #localTeamsButton { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .game-page .island-art, .landing-page .island-art, .achievement-notice,
  .game-page .world-cloud, .landing-page .world-cloud,
  .game-page .world-star, .landing-page .world-star { animation: none; }
  .game-page .world-shooting-star, .landing-page .world-shooting-star,
  .game-page .world-ufo, .landing-page .world-ufo,
  .game-page .world-plane, .landing-page .world-plane { display: none !important; }
}
html[data-calm-motion="true"] .world-shooting-star,
html[data-calm-motion="true"] .world-ufo,
html[data-calm-motion="true"] .world-plane { display: none !important; }
html[data-calm-motion="true"] .world-star, html[data-calm-motion="true"] .world-cloud { animation: none; }