/* Encabezado y marca, con sus estados y variantes responsive. */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 18px;
  width: 100%;
  flex: none;
  border-bottom: 1px solid #e3edf5;
  background: #ffffffb8;
  height: 42px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: calc(17px * var(--text-scale, 1));
  letter-spacing: -0.4px;
}
.logo span {
  font-size: calc(23px * var(--text-scale, 1));
}
.header-note {
  font-size: calc(11px * var(--text-scale, 1));
  color: #7c92a8;
  margin-left: auto;
}

/* A small toy-like emblem gives the header its identity without animation. */
.game-header {
  /* Bigger than the 44 px minimum: children and small phones need targets that are easy to hit. */
  --header-control-size: 52px;
  --header-icon-size: 32px;
}
.game-header .brand-egg {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--header-control-size);
  height: var(--header-control-size);

  background: #fff0c8;
  font-size: calc(23px * var(--text-scale, 1));
}
.game-header .brand-name {
  letter-spacing: -0.4px;
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .game-header {
    height: 48px;
    padding: 6px 16px;
    gap: 16px;
  }

  .game-header .logo {
    font-size: calc(18px * var(--text-scale, 1));
    gap: 9px;
  }

  .game-header .header-note {
    font-size: calc(11px * var(--text-scale, 1));
    color: var(--ad-ink-muted);
  }
}
.mobile-character-row {
  display: none;
}
/* Keep the selector label available to assistive technology without adding header copy. */
.game-header .mobile-character-row label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html[data-appearance="dark"] header {
  background: #1c3041;
  border-color: #355269;
}

@media (max-width: 360px) {
  .game-header .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .game-header .mobile-character-row {
    display: flex;
    align-items: center;
    gap: 9px;
    order: 3;
    flex: none;
    margin-left: auto;
  }

  .game-header .logo {
    order: 1;
  }

  .game-header .header-note {
    order: 2;
    margin-left: 0;
    white-space: nowrap;
  }
}
@media (min-width: 851px) and (max-width: 1200px) and (pointer: fine) {
  .game-header .header-note {
    display: none;
  }

  .game-header .mobile-character-row {
    margin-left: auto;
  }
}
.game-header .logo {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

/* The same illustrated toy controls used by the learning cards. */
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .game-header {
    padding-inline: max(16px, calc((100% - 1420px) / 2));
  }
}
.game-header {
  border-bottom: 1px solid #d7e5ef;
}
.game-header .brand-egg {
  background-color: #fff1bc;
  border: 1px solid #e6cc83;
  border-radius: 12px;
  box-shadow: 0 3px 0 #e8d59e;
}
.header-gear {
  display: block;
  width: var(--header-icon-size);
  height: var(--header-icon-size);
  filter: drop-shadow(0 1px 0 #345c9130);
}
html[data-appearance="dark"] .game-header {
  background: #21394b;
  border-color: #45647c;
}
/* The egg's SVG has extra space around its narrower silhouette. */
.brand-hero {
  display: block;
  width: calc(var(--header-icon-size) * 1.2);
  height: calc(var(--header-icon-size) * 1.2);
}

.game-header .brand-name {
  font-size: calc(22px * var(--text-scale, 1));
  line-height: 1.1;
}

.game-header {
  background: var(--ad-paper);
  border-bottom-color: var(--ad-line);
}

/* Compact header: one grid for phones and touch tablets. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  header {
    display: grid;
    overflow: visible;
  }

  .logo {
    grid-column: 1;
    grid-row: 1;
    gap: 4px;
    font-size: calc(13px * var(--text-scale, 1));
    white-space: nowrap;
    letter-spacing: -0.4px;
  }

  .logo span {
    font-size: calc(18px * var(--text-scale, 1));
  }

  .header-note {
    display: none;
  }

  .mobile-character-row {
    display: contents;
  }

  .game-header .logo {
    justify-self: start;
    align-items: center;
    gap: 6px;
  }

  .game-header .logo {
    grid-column: 1;
    grid-row: 1;
  }

  .game-header {
    grid-template-rows: minmax(44px, auto);
    align-items: center;
  }

  .game-header .brand-egg {
    flex: none;
  }

  .game-header .brand-name {
    font-size: calc(clamp(17px, 2.8vw, 21px) * var(--text-scale, 1));
  }

  .game-header .mobile-character-row {
    min-width: 0;
  }
}

/* A persistent balance also opens the album from every activity. */
#star-balance {
  --tile-top: var(--ad-gold-top);
  --tile-face: var(--ad-gold-face);
  --tile-edge: var(--ad-gold-edge);
  --tile-base: var(--ad-gold-base);
  --tile-ink: var(--ad-gold-ink);
  flex: none;
  gap: 5px;
  width: auto;
  min-width: calc(var(--header-control-size) * 2.2);
  height: var(--header-control-size);
  min-height: var(--header-control-size);
  padding: 6px 12px;
  border: 1px solid var(--tile-edge);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--tile-top), var(--tile-face));
  color: var(--tile-ink);
  font: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
#star-balance > :is(span, output) {
  font-size: max(24px, calc(var(--header-icon-size) - 6px));
  line-height: 1;
}
#star-balance > span {
  font-size: var(--header-icon-size);
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .game-header .brand-name {
    display: none;
  }
  #star-balance {
    width: auto;
    min-width: 64px;
  }
}

/* Keep both window controls together without adding a header row. */
.game-header {
  height: 48px;
  padding-block: 0;
}
.game-header .header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
/* Both utility controls own their mouse surface above neighbouring header content. */
.header-actions :is(#fullscreen-toggle, #fullscreen-restore, #settings-toggle) {
  position: relative;
  z-index: 1;
  isolation: isolate;
  pointer-events: auto;
  cursor: pointer;
  -webkit-app-region: no-drag;
}
:is(#fullscreen-toggle, #fullscreen-restore) {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--header-control-size);
  height: var(--header-control-size);
  min-height: var(--header-control-size);
  padding: 0;
  border: 1px solid var(--ad-line);
  border-radius: 12px;
  background: var(--ad-soft);
  color: #3772ae;
  box-shadow:
    inset 0 2px 0 #ffffffb0,
    0 3px 0 #cddfee;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
:is(#fullscreen-toggle, #fullscreen-restore, .fullscreen-dialog-exit) svg {
  pointer-events: none;
  width: var(--header-icon-size, 30px);
  height: var(--header-icon-size, 30px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(#fullscreen-toggle, #fullscreen-restore):disabled {
  opacity: 0.5;
  cursor: default;
}
html[data-appearance="dark"] :is(#fullscreen-toggle, #fullscreen-restore) {
  background: var(--ad-soft);
  border-color: #668eaf;
  color: #e2f2ff;
  box-shadow:
    inset 0 1px 0 #ffffff28,
    0 3px 0 #172d3e;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .game-header {
    --header-icon-size: 30px;
    height: auto;
    min-height: 56px;
    padding: calc(1px + env(safe-area-inset-top, 0px)) max(6px, env(safe-area-inset-right, 0px)) 2px
      max(6px, env(safe-area-inset-left, 0px));
    gap: 4px;
    /* Columns hug their controls and the picker takes the free space up to 240px; any surplus is
       shared evenly between controls, so hiding full screen (installed app) leaves no hole. */
    grid-template-columns: max-content minmax(0, 240px) max-content;
    justify-content: space-between;
  }
  .game-header .brand-egg {
    width: var(--header-control-size);
    height: var(--header-control-size);
  }
  #star-balance {
    max-width: none;
    gap: 3px;
    padding-inline: 4px;
    font-size: 12px;
  }
  #star-balance > span {
    font-size: 24px;
  }
  #star-balance > output {
    font-size: 20px;
  }
  .game-header .header-actions {
    grid-column: 3;
  }
}

@media (max-width: 360px) {
  #star-balance {
    gap: 3px;
    padding-inline: 2px;
  }
}

/* Landscape tablets need a visible destination, not just a small brand mark. */
.brand-menu {
  display: none;
}
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px),
  (pointer: coarse) and (min-width: 768px) and (min-height: 501px) and (orientation: landscape) {
  .game-header {
    --header-control-size: 64px;
    --header-icon-size: 40px;
    height: 76px;
    min-height: 76px;
    padding-block: 4px;
  }
  .game-header #activity-home {
    height: var(--header-control-size);
    min-height: var(--header-control-size);
    padding: 0 12px 0 5px;
    gap: 10px;
    border: 2px solid #d5a841;
    border-radius: 16px;
    background: linear-gradient(#fff7d9, #ffe6a0);
    box-shadow: 0 3px 0 #c69c39;
    color: #634617;
    cursor: pointer;
  }
  .game-header #activity-home:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #c69c39;
  }
  .game-header .brand-egg {
    width: calc(var(--header-control-size) - 10px);
    height: calc(var(--header-control-size) - 10px);
  }
  .game-header .brand-name {
    display: none;
  }
  .game-header .brand-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(20px * var(--text-scale, 1));
    line-height: 1.2;
  }
  .game-header #star-balance {
    max-width: none;
  }
  html[data-appearance="dark"] .game-header #activity-home {
    background: linear-gradient(#66522b, #493b25);
    border-color: #caa253;
    color: #fff0c1;
    box-shadow: 0 3px 0 #927039;
  }
  /* On My missions the egg stands alone: no outer frame around its own tile. */
  body[data-missions-header] .game-header #activity-home,
  html[data-appearance="dark"] body[data-missions-header] .game-header #activity-home {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-missions-header] .game-header #activity-home:active {
    transform: none;
  }
}

/* The balance and, under it, the level share the button without changing its size: the star and
   the number on one row, the level badge centered on the next. */
#star-balance {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: 5px;
  row-gap: 1px;
  padding-block: 2px;
}
#star-balance > .star-count {
  display: contents;
}
#star-balance > span:first-child {
  grid-row: 1;
  grid-column: 1;
}
#star-balance .star-count output {
  grid-row: 1;
  grid-column: 2;
  font-size: max(20px, calc(var(--header-icon-size) - 6px));
  line-height: 1;
}
#star-balance .star-count .star-level {
  grid-row: 2;
  grid-column: 1 / -1;
  justify-self: stretch;
  min-width: 52px;
  padding: 0 6px;
  border-radius: 8px;
  /* The pill is also the level meter: gold fills from the left as stars are earned toward the next level. */
  background: linear-gradient(
    90deg,
    #e6a417 var(--level-progress, 0%),
    #365d80 var(--level-progress, 0%)
  );
  color: var(--ad-on-accent);
  text-align: center;
  text-shadow: 0 1px 1px rgb(0 0 0 / 55%);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

/* Dialogs have an independent restore action; header controls never move. */
.game-header .header-actions {
  justify-content: flex-end;
  position: relative;
  z-index: 30;
  order: 4;
}
.dialog-window-actions {
  display: flex;
  flex: none;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.fullscreen-dialog-exit {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--ad-line);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-ink-control);
  font: inherit;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* A native popover escapes modal inertness at the header control's actual hit area. */
.dialog-window-actions[popover] {
  position: fixed;
  inset: auto;
  left: var(--window-control-left);
  top: var(--window-control-top);
  width: var(--window-control-width);
  height: var(--window-control-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.dialog-window-actions[popover] .fullscreen-dialog-exit {
  width: 100%;
  height: 100%;
}
.dialog-window-actions[popover]::backdrop {
  background: transparent;
  pointer-events: none;
}

/* Window controls use the far-right slot; the settings panel anchors to the whole group. */
.game-header .header-actions > .settings-wrap {
  order: 0;
  position: static;
}

/* Desktop missions uses the shared header for its real page heading. */
.missions-header-title[hidden] {
  display: none;
}
body[data-missions-header] .game-header :is(.brand-name, .brand-menu, .header-note) {
  display: none;
}
.missions-header-title {
  order: 2;
  min-width: 0;
  flex: 1;
}
.missions-header-title #album-title {
  margin: 0;
  color: var(--color-ink-control);
  font-size: calc(26px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.missions-header-title #album-title small {
  margin-left: 8px;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 500;
  color: var(--ad-ink-muted);
}
/* The heading receives navigation focus for assistive technology, not as a control. */
.missions-header-title #album-title:focus {
  outline: none;
}
html[data-appearance="dark"] .missions-header-title #album-title {
  color: var(--ad-ink-steel);
}
html[data-appearance="dark"] .missions-header-title #album-title small {
  color: var(--ad-ink-muted);
}
@media (max-width: 1100px) {
  .missions-header-title #album-title {
    font-size: calc(22px * var(--text-scale, 1));
  }
  .missions-header-title #album-title small {
    font-size: calc(12px * var(--text-scale, 1));
  }
}

/* Compact header: the title takes the free column between the brand egg and the character picker. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  body[data-missions-header] .game-header {
    /* The first column fits the home button, which is wider than a square on tablets in landscape. */
    grid-template-columns:
      max-content minmax(0, 1fr) clamp(64px, 28vw, 200px) max-content;
  }
  body[data-missions-header] .game-header :is(#mobile-character, #character-picker) {
    grid-column: 3;
  }
  body[data-missions-header] .game-header .header-actions {
    grid-column: 4;
  }
  .game-header .missions-header-title {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
  }
  .game-header .missions-header-title #album-title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(clamp(12px, 3.5vw, 20px) * var(--text-scale, 1));
  }
}
@media (max-width: 599px) {
  .game-header .missions-header-title #album-title small {
    display: none;
  }
}

/* Installed iOS apps can soften the content edge below the status bar even with a zero inset. */
@media (display-mode: standalone) and (max-width: 850px),
  (display-mode: standalone) and (pointer: coarse) and (max-width: 1100px) {
  .game-header {
    height: auto;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* Header refresh: the controls sit on one floating pill (white to sky, blue rim and glow) drawn behind them,
   so the header keeps its size and layout; settings and fullscreen are flat icons on it, with a thin divider.
   "My missions" stays in English only (its Spanish gloss remains in the accessible name of the home button). */
html:not([data-appearance="dark"]) .game-header {
  /* A stacking context keeps the pill behind the controls; its z-index keeps the whole header (and the
     settings panel and pickers it opens) above the stage, as before the pill. isolation alone painted it
     under the stage, hiding the settings panel on phones. */
  position: relative;
  z-index: 40;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
}
html:not([data-appearance="dark"]) .game-header::before {
  content: "";
  position: absolute;
  inset: 2px 6px;
  z-index: -1;
  border: 2px solid var(--refresh-line);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-white), var(--refresh-eef6ff));
  box-shadow: 0 6px 16px rgb(59 134 198 / 0.18);
  pointer-events: none;
}
html:not([data-appearance="dark"])
  .game-header
  .header-actions
  :is(#settings-toggle, #fullscreen-toggle, #fullscreen-restore) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
html:not([data-appearance="dark"]) .game-header .header-actions {
  padding-left: 10px;
  border-left: 2px solid var(--refresh-line);
}
#album-title small {
  display: none;
}
/* Wide screens: the character picker is flat on the pill too, after its own divider, like the proposal. */
@media (min-width: 600px) {
  html:not([data-appearance="dark"]) .game-header #character-picker {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  html:not([data-appearance="dark"]) .game-header #character-picker {
    border-left: 2px solid var(--refresh-line);
    border-right: 2px solid var(--refresh-line);
    border-radius: 0;
  }
}
@media (min-width: 600px) and (max-width: 1100px) {
  html:not([data-appearance="dark"]) .game-header {
    padding-inline: 14px;
  }
}
/* Phones: the controls fill the width, so the pill becomes a tray with rounded bottom corners instead. */
@media (max-width: 599px) {
  html:not([data-appearance="dark"]) .game-header::before {
    inset: 0;
    border-top: 0;
    border-inline: 0;
    border-radius: 0 0 22px 22px;
  }
  html:not([data-appearance="dark"]) .game-header .header-actions {
    padding-left: 0;
    border-left: 0;
  }
}
/* Inside the pill the tallest tiles (home egg, star balance) leave 4 px of rim above and below, and the
   content keeps clear of the pill's rounded ends, so nothing seems to stick out of the bar. The header's
   own height does not change, and the tiles stay above the 44 px touch minimum. */
@media (min-width: 600px) {
  html:not([data-appearance="dark"]) .game-header {
    padding-inline: 24px;
  }
  html:not([data-appearance="dark"]) .game-header :is(.brand-egg, #star-balance) {
    height: calc(var(--header-control-size) - 8px);
    min-height: 0;
  }
  html:not([data-appearance="dark"]) .game-header .brand-egg {
    width: calc(var(--header-control-size) - 8px);
  }
}