/* Navegación entre áreas, colores de área y acción de volver. */
#activity-nav {
  display: flex;
  justify-content: center;
  padding: 4px 10px;
  flex: none;
}
#activity-nav button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 17px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ad-ink-soft);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 700;
}
#activity-nav button[aria-current="page"] {
  background: #dfedff;
  border-color: var(--ad-line-blue);
  color: var(--ad-ink-blue);
}
#activity-nav button:hover {
  background: var(--ad-soft);
}
#play-entry {
  border: 1px solid #a8cdb6;
  border-radius: 10px;
  background: #e4f3e8;
  color: #326a52;
  min-height: 33px;
  padding: 4px 10px;
  font-size: calc(12px * var(--text-scale, 1));
}
html[data-appearance="dark"] #activity-nav button {
  color: var(--ad-ink-soft);
}
html[data-appearance="dark"] #activity-nav button[aria-current="page"] {
  background: #345575;
  border-color: var(--ad-line-blue);
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-nav {
    gap: 3px;
    padding: 1px 7px 3px;
  }

  #activity-nav button {
    min-width: 0;
    min-height: 32px;
    padding: 3px 2px;
    gap: 3px;
    font-size: calc(11px * var(--text-scale, 1));
  }

  #play-entry {
    font-size: calc(10px * var(--text-scale, 1));
    padding: 3px 5px;
  }
}
html[data-appearance="dark"] #activity-nav button:hover {
  background: var(--ad-soft);
}
body:is([data-navigation-area="listen"], [data-navigation-area="movers"])
  :is(.mobile-controls, .playground > .dpad, #motion-status) {
  display: none;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  body:is([data-navigation-area="listen"], [data-navigation-area="movers"]) .lesson-dock {
    margin-bottom: 8px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body:is([data-navigation-area="listen"], [data-navigation-area="movers"]) .panel {
    grid-row: 1/3;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-nav button {
    flex: 1 1 auto;
    white-space: nowrap;
  }
}
#activity-home-link svg {
  flex: none;
}
@media (max-width: 420px) {
  #activity-nav .area-icon {
    display: none;
  }
}
/* The mode chooser and the topic chooser share one visual language. */
#activity-nav [data-area] {
  border-color: var(--ad-line-soft);
  background: var(--ad-surface);
}
#activity-nav [data-area][aria-expanded="true"] {
  border-color: #7eaedd;
}
html[data-appearance="dark"] #activity-nav [data-area] {
  background: var(--ad-surface);
  border-color: var(--ad-line-soft);
}
html[data-appearance="dark"] #activity-nav [data-area][aria-expanded="true"] {
  border-color: #8fb9dc;
}
/* Navigation map: Missions → All games → area → activity. Each area keeps one color everywhere it
   appears, so children recognise the room they entered from the card they tapped. A back pill wears
   the colors of the menu it returns to (data-back-to, set from ui/nav-history.js): blue for My missions
   and All games, the area's own color otherwise. */
#activity-nav [data-area="explore"],
#album-dialog [data-home-area="explore"],
body[data-navigation-area="explore"],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="explore"][data-back-to],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="missions"][data-back-to],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="home"][data-back-to] {
  --area-bg: var(--ad-soft-keep);
  --area-border: #9cc3ea;
  --area-ink: #285e8c;
  --area-shadow: #cfe2f5;
  --area-tile: #d4e8fd;
}
#activity-nav [data-area="adventures"],
#album-dialog [data-home-area="adventures"],
body[data-navigation-area="adventures"],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="adventures"][data-back-to] {
  --area-bg: #ffece0;
  --area-border: #eba97c;
  --area-ink: #8a4a1c;
  --area-shadow: #f3d3bb;
  --area-tile: #ffd9bd;
}
#activity-nav [data-area="challenges"],
#album-dialog [data-home-area="challenges"],
body[data-navigation-area="challenges"],
#practice-toggle,
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="challenges"][data-back-to] {
  --area-bg: #fff6dc;
  --area-border: #e3c46c;
  --area-ink: #76560f;
  --area-shadow: #f0dfae;
  --area-tile: #ffe9ad;
}
#activity-nav [data-area="play"],
#album-dialog [data-home-area="play"],
body[data-navigation-area="play"],
.world-header .world-close,
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="play"][data-back-to] {
  --area-bg: #e6f5ea;
  --area-border: #8fc8a0;
  --area-ink: #2b6843;
  --area-shadow: #c6e4cf;
  --area-tile: #cbead4;
}
#activity-nav [data-area="listen"],
#album-dialog [data-home-area="listen"],
body:is([data-navigation-area="listen"], [data-navigation-area="movers"]),
#riddle-player .riddle-top .riddle-back,
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="listen"][data-back-to] {
  --area-bg: #f1ecfc;
  --area-border: #b8a9e4;
  --area-ink: #56448f;
  --area-shadow: #ddd4f3;
  --area-tile: #e1d8f8;
}
#activity-nav [data-area="movers"],
#album-dialog [data-home-area="movers"],
body[data-navigation-area="movers"],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="movers"][data-back-to] {
  --area-bg: #e2f6f4;
  --area-border: #8fd0c9;
  --area-ink: #1f6a63;
  --area-shadow: #c3e8e4;
  --area-tile: #cfeeea;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="explore"],
    #album-dialog [data-home-area="explore"],
    #activity-hub[data-section="explore"],
    body[data-navigation-area="explore"]
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="explore"][data-back-to],
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="missions"][data-back-to],
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="home"][data-back-to] {
  --area-bg: #24425f;
  --area-border: #5f8fbb;
  --area-ink: #d3e7fa;
  --area-shadow: #162c40;
  --area-tile: #30577a;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="adventures"],
    #album-dialog [data-home-area="adventures"],
    #activity-hub[data-section="adventures"],
    body[data-navigation-area="adventures"]
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="adventures"][data-back-to] {
  --area-bg: #4a3426;
  --area-border: #b5784a;
  --area-ink: #fbe0cc;
  --area-shadow: #2c1e15;
  --area-tile: #5e4130;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="challenges"],
    #album-dialog [data-home-area="challenges"],
    #activity-hub[data-section="challenges"],
    body[data-navigation-area="challenges"],
    #practice-toggle
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="challenges"][data-back-to] {
  --area-bg: #45402c;
  --area-border: #a98f48;
  --area-ink: #fbecc0;
  --area-shadow: #2a2618;
  --area-tile: #5c5232;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="play"],
    #album-dialog [data-home-area="play"],
    #activity-hub[data-section="play"],
    body[data-navigation-area="play"],
    .world-header .world-close
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="play"][data-back-to] {
  --area-bg: #29463a;
  --area-border: #5f9a79;
  --area-ink: #d2f0de;
  --area-shadow: #182b23;
  --area-tile: #355c4a;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="listen"],
    #album-dialog [data-home-area="listen"],
    #activity-hub[data-section="listen"],
    body:is([data-navigation-area="listen"], [data-navigation-area="movers"]),
    #riddle-player .riddle-top .riddle-back
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="listen"][data-back-to] {
  --area-bg: #3a3657;
  --area-border: #8a7cc2;
  --area-ink: #e4ddfb;
  --area-shadow: #221f36;
  --area-tile: #4a4470;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="movers"],
    #album-dialog [data-home-area="movers"],
    #activity-hub[data-section="movers"],
    body[data-navigation-area="movers"]
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="movers"][data-back-to] {
  --area-bg: #20413f;
  --area-border: #5fa39b;
  --area-ink: #cdeeea;
  --area-shadow: #142927;
  --area-tile: #2c5754;
}
/* Top bar: the current area and the one being opened share its color. */
#activity-nav [data-area][aria-current="page"],
#activity-nav [data-area][aria-expanded="true"] {
  background: var(--area-bg);
  border-color: var(--area-border);
}
#activity-nav [data-area][aria-expanded="true"] {
  box-shadow:
    inset 0 0 0 1px var(--area-border),
    0 2px 0 var(--area-shadow);
}
html[data-appearance="dark"] #activity-nav [data-area][aria-current="page"],
html[data-appearance="dark"] #activity-nav [data-area][aria-expanded="true"] {
  background: var(--area-bg);
  border-color: var(--area-border);
  color: var(--area-ink);
}
/* Touch and icon sizing for young players (audit 2026-10-20).
   Targets: tap controls ≥40px, ≥44px on tall phones (Apple 44pt, WCAG 2.5.5, Android 48dp);
   icons that carry meaning ≥24px in chrome and ≥30px on answer and vocabulary cards; text ≥11px.
   Short screens (under 800px tall, landscape phones) keep compact chrome: there the
   stage height decides how big the hero can be, so only icons and text grow. */
@media (max-width: 850px) and (orientation: portrait),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) {
  #activity-nav button {
    font-size: calc(12px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) and (min-height: 800px) {
  #activity-nav button {
    min-height: 44px;
  }
}
/* One back pattern everywhere: "‹ icon Area" at the top left, the Home menu's back pill in the
   color of the menu it returns to. The owners only place it: stage toolbar, challenge bar,
   riddle player and game header. */
:is(
  .practice-bar.is-practicing #practice-toggle,
  #riddle-player .riddle-top .riddle-back,
  .world-header .world-close,
  .wg-bar .wg-close,
  .mv-bar .mv-close
) {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 46px;
  padding: 6px 14px 6px 10px;
  border: 2px solid var(--area-border);
  border-radius: 15px;
  background: var(--color-surface);
  color: var(--area-ink);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--area-shadow);
}
html[data-appearance="dark"]
  :is(
    .practice-bar.is-practicing #practice-toggle,
    #riddle-player .riddle-top .riddle-back,
    .world-header .world-close,
    .wg-bar .wg-close,
    .mv-bar .mv-close
  ) {
  background: #2b455c;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  :is(
    .practice-bar.is-practicing #practice-toggle,
    #riddle-player .riddle-top .riddle-back,
    .world-header .world-close,
    .wg-bar .wg-close,
    .mv-bar .mv-close
  ) {
    min-height: 44px;
    padding: 4px 10px 4px 7px;
    gap: 4px;
    border-radius: 13px;
  }
}
/* Short screens keep compact chrome: the stage height decides how big the hero can be. */
@media (max-height: 500px) {
  :is(
    .practice-bar.is-practicing #practice-toggle,
    #riddle-player .riddle-top .riddle-back,
    .world-header .world-close,
    .wg-bar .wg-close,
    .mv-bar .mv-close
  ) {
    min-height: 40px;
  }
}
.stage-back-arrow {
  font-size: 26px;
  line-height: 0.8;
  margin-top: -2px;
}
.stage-back-icon {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 20px;
  line-height: 22px;
  text-align: center;
}
/* The egg logo opens Home on compact screens; no duplicate mode switcher. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #activity-nav {
    display: none;
  }
}
.area-icon.illustrated-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: middle;
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  #activity-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: min(1040px, calc(100% - 32px));
    margin: 12px auto 14px;
    padding: 0;
    gap: 8px;
  }

  #activity-nav button {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 10px;
    gap: 8px;
    white-space: nowrap;
  }
}
#activity-nav {
  gap: 6px;
}
#activity-nav button {
  border-radius: 15px;
  box-shadow: 0 2px 0 #dce9f4;
}
#activity-nav .area-icon {
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 24px;
  line-height: 28px;
}
#activity-nav #activity-home-link {
  background: var(--color-surface);
  border-color: #9cc3ea;
  color: var(--ad-ink-blue);
  box-shadow: 0 2px 0 #cfe2f5;
}
#activity-nav [data-area][aria-current="page"],
#activity-nav [data-area][aria-expanded="true"] {
  color: var(--area-ink);
}
/* The menu owns navigation while open; the underlying Listen activity keeps its return button. */
@media (max-width: 600px) {
  #activity-nav {
    gap: 4px;
  }

  #activity-nav .area-icon {
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 22px;
  }

  #activity-nav button {
    gap: 4px;
    padding-inline: 5px;
  }
}
@media (max-width: 420px) {
  #activity-nav #activity-home-link .area-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
  }

  #activity-nav [data-area] .area-icon {
    display: none;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .game-header #activity-home {
    min-width: 0;
    min-height: 44px;
    border-radius: 14px;
    gap: 6px;
  }

  .game-header #activity-home:focus:not(:focus-visible) {
    outline: none;
  }

  .game-header #activity-home:focus-visible {
    outline: 2px solid #dca536;
    outline-offset: 2px;
  }
}
#activity-nav [data-area][aria-current="page"],
#activity-nav [data-area][aria-expanded="true"] {
  --tile-top: var(--area-bg);
  --tile-face: var(--area-tile);
  --tile-edge: var(--area-border);
  --tile-base: var(--area-border);
  --tile-ink: var(--area-ink);
  box-shadow:
    inset 0 0 0 1px var(--tile-edge),
    inset 0 2px 0 #ffffffb0,
    0 3px 0 var(--tile-base);
}
/* Home keeps the Home menu's blue, like its back buttons. */
html[data-appearance="dark"] #activity-home-link {
  background: var(--ad-soft) !important;
  color: var(--ad-ink-blue) !important;
  border-color: var(--ad-line-blue) !important;
  box-shadow: 0 2px 0 var(--ad-edge) !important;
}
/* Favorites: a rose area, so saved topics stand out from the six learning areas. */
#activity-nav [data-area="favorites"],
#album-dialog [data-home-area="favorites"],
#activity-hub[data-section="favorites"],
body[data-navigation-area="favorites"],
:is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="favorites"][data-back-to] {
  --area-bg: #fdebf1;
  --area-border: #eba5bd;
  --area-ink: #94304f;
  --area-shadow: #f5ccd9;
  --area-tile: #fad6e2;
}
html[data-appearance="dark"]
  :is(
    #activity-nav [data-area="favorites"],
    #album-dialog [data-home-area="favorites"],
    #activity-hub[data-section="favorites"],
    body[data-navigation-area="favorites"]
  ),
html[data-appearance="dark"]
  :is(
    #practice-toggle,
    .world-close,
    .hub-back,
    .wg-close,
    .mv-close
  )[data-back-to="favorites"][data-back-to] {
  --area-bg: #4a2634;
  --area-border: #b8607c;
  --area-ink: #fbd7e2;
  --area-shadow: #2d1620;
  --area-tile: #603245;
}
/* Seven areas share the row on mid-width screens: tighter tabs so no name is clipped. */
@media (min-width: 851px) and (max-width: 1100px) and (pointer: fine) {
  #activity-nav {
    gap: 4px;
  }

  #activity-nav button {
    gap: 4px;
    padding: 7px 3px;
    font-size: calc(12px * var(--text-scale, 1));
  }

  #activity-nav .area-icon {
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 20px;
  }
}

/* Keep names available to assistive technology while phones show navigation icons. */
@media (max-width: 600px) {
  #activity-nav button > span:not(.area-icon),
  :is(#practice-toggle, .riddle-back, .world-close, .wg-close, .mv-close) .stage-back-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #activity-nav button {
    min-height: 44px;
  }
}
/* A challenge or Play world that would go back to My missions shows no back pill: the header egg,
   always visible above the stage, is that button. Menus and dialogs keep theirs, since a modal
   covers the header. */
#stage :is(#practice-toggle, .world-close)[data-back-to="missions"] {
  display: none;
}