/*
 * Shared "menu screen" layer for Aprendo Mates static pages (home +
 * section pages). Sits on top of shared/shell.css (which owns the design
 * tokens, the Claire font, the cloud layer and the language switcher) and
 * adds the pieces the non-game screens need: the wordmark, the green
 * category buttons, the "blackboard" of game tiles with the kid as the
 * teacher, one red action button, and the SEO "about" band below the fold.
 *
 * Nothing here re-declares a token or component already in shell.css.
 * Every visible string is set from the page's own STRINGS dictionary via
 * shared/menu.js - never hardcode copy in the markup.
 */

/* the static pages scroll; shell.css locks only the in-game screens */
html, body { overflow: visible; height: auto; min-height: 100%; }
#game { height: auto; min-height: 100dvh; overflow: visible; }

/* ---------- the menu screen: fills one viewport, no scroll needed ---------- */
.menu-screen {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vh, 30px);
  padding: clamp(14px, 3.4vh, 34px) clamp(14px, 4vw, 44px) clamp(18px, 3vh, 40px);
  text-align: center;
}
.menu-screen > * { min-width: 0; }

/* ---------- 1. the wordmark: the horizontal two-box logo ---------- */
.menu-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.menu-head .wordmark-link { display: inline-block; line-height: 0; }
.wordmark {
  width: min(520px, 82vw);
  height: auto;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.16));
  animation: dropIn .55s cubic-bezier(.34,1.56,.64,1) backwards;
}
/* section pages carry a smaller wordmark - the game grid is the star there */
.menu-screen.is-section .wordmark { width: min(380px, 62vw); }
/* hover the logo -> a quick jelly wobble */
.wordmark-link:hover .wordmark { animation: logoJelly .55s ease; }
@keyframes logoJelly {
  0%,100% { transform: scale(1) rotate(0); }
  25%     { transform: scale(1.06, .92) rotate(-1.5deg); }
  55%     { transform: scale(.96, 1.05) rotate(1.5deg); }
  80%     { transform: scale(1.02, .99); }
}
/* Keep the wordmark clear of the top-right corner chrome (lang/records
   bubbles + the "Iniciar sesión" button - shared/account.css's
   .identity-login) up through tablet/small-laptop widths. The centered
   wordmark used to only collide with that corner on narrow phones (hence
   the old 560px cutoff), but .identity-login's text button is wide enough
   that the same collision reappears at plain tablet/landscape widths too -
   confirmed by screenshotting every width from 375 to 1440; nothing
   overlaps once this reservation runs through 1100px. */
@media (max-width: 1100px) {
  .menu-head { padding-top: 46px; }
  .wordmark { width: min(400px, 66vw); }
  .menu-screen.is-section .wordmark { width: min(320px, 56vw); }
}
@keyframes dropIn {
  0%   { transform: translateY(-16px); opacity: 0; }
  60%  { transform: translateY(4px);   opacity: 1; }
  100% { transform: translateY(0); }
}
/* real SEO <h1>, shown as the friendly tagline (never hidden) */
.menu-tagline {
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: normal;
  color: var(--purple-dark);
  text-shadow: 1px 1px 0 #fff;
  margin: 0;
  max-width: 26ch;
}

/* ---------- 2. the green category buttons: the site nav on every page.
     The old site swapped to a lighter-green image on hover; here the pill
     lifts, brightens and sprouts little white "sparkle" wings at two
     corners (the old sprite's second frame). ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.6vw, 14px);
  width: min(620px, 94vw);
}
.pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(52px, 7vw, 64px);      /* single- & double-line pills match */
  font-family: inherit;
  font-size: clamp(15px, 2.2vw, 21px);
  text-decoration: none;
  color: #1c1c1c;
  background: #75b157;                      /* the exact green of the old sprite */
  border-radius: 999px;
  padding: 8px 20px;
  box-shadow: 0 6px 0 #4f8a3c;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1),
              background .12s, box-shadow .12s;
  animation: dropIn .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.pill:nth-child(1) { animation-delay: .10s; }
.pill:nth-child(2) { animation-delay: .16s; }
.pill:nth-child(3) { animation-delay: .22s; }
.pill:nth-child(4) { animation-delay: .28s; }
.pill:nth-child(5) { animation-delay: .34s; }
.pill:nth-child(6) { animation-delay: .40s; }
/* "you are here" - the current section's button */
.pill[aria-current="page"] {
  background: #5b9e42;
  box-shadow: 0 3px 0 #3f6f2e;
  transform: translateY(3px);
}
.pill[aria-current="page"]:hover { transform: translateY(1px) scale(1.02) rotate(-1deg); }
/* the sparkle wings (hidden until hover/focus) */
.pill::after {
  content: "";
  position: absolute;
  inset: -24px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='38' y1='38' x2='12' y2='12'/%3E%3Cline x1='46' y1='28' x2='38' y2='2'/%3E%3Cline x1='28' y1='46' x2='2' y2='38'/%3E%3C/g%3E%3C/svg%3E") left top / 62px 62px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23fff' stroke-width='8' stroke-linecap='round'%3E%3Cline x1='62' y1='62' x2='88' y2='88'/%3E%3Cline x1='54' y1='72' x2='62' y2='98'/%3E%3Cline x1='72' y1='54' x2='98' y2='62'/%3E%3C/g%3E%3C/svg%3E") right bottom / 62px 62px no-repeat;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .16s ease, transform .22s cubic-bezier(.34,1.7,.64,1);
}
/* hover is driven only by `transition`, never `animation`, so moving
   between buttons just springs each one back - it never re-runs its
   entrance. Only the wings (a pseudo-element) carry a keyframe. */
.pill:hover, .pill:focus-visible {
  background: #83c162;
  box-shadow: 0 10px 0 #4f8a3c;
  transform: translateY(-3px) scale(1.03) rotate(-1.5deg);
  outline: none;
}
.pill:hover::after, .pill:focus-visible::after {
  opacity: 1;
  transform: scale(1);
  animation: wingTwinkle .6s ease;
}
.pill:active { transform: translateY(4px) scale(1); box-shadow: 0 2px 0 #4f8a3c; }
@keyframes wingTwinkle {
  0%   { rotate: -14deg; }
  60%  { rotate: 6deg; }
  100% { rotate: 0deg; }
}

/* ---------- 3. the blackboard: game tiles, with the kid as teacher ---------- */
.board-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(820px, 100%);
}
.board-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 2vw, 28px);
  width: 100%;
}
.board {
  position: relative;
  flex: 0 1 620px;
  background: #27a7bb;                       /* same teal "pizarra" as today */
  border: 3px solid rgba(255,255,255,.35);
  border-radius: 26px;
  box-shadow: 0 12px 0 #1c8496, 0 18px 30px rgba(0,0,0,.14);
  padding: clamp(16px, 3vw, 26px) clamp(14px, 3vw, 24px) clamp(18px, 3vw, 26px);
}
/* fewer tiles (e.g. multiplication has 3) -> a smaller, tidier board,
   and a smaller teacher so he doesn't tower over it */
.board.tight { flex-basis: 440px; }
.board.tight .sq { aspect-ratio: 1 / 1; }
.board.tight + .board-teacher img { width: clamp(120px, 16vw, 190px); }
.board-title {
  position: relative;
  font-size: clamp(17px, 2.6vw, 24px);
  font-weight: normal;
  color: #fff;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
  margin: 0 0 clamp(14px, 2.4vw, 22px);
}
/* hand-drawn chalk underline under the board title */
.board-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  width: clamp(120px, 40%, 220px);
  height: 7px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 7'%3E%3Cpath d='M2 4 C40 1 70 6 100 3 S160 1 198 4' stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 1.8vw, 15px);
}
.board-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- progreso/index.html: a dense utility page, not a full-viewport
     "screen" like the game menus - the whole point of this page is reading
     a table, so the nav, the "who's playing" strip and the table itself
     should all sit close together instead of being spread across one full
     viewport height with the table scrolled out of view. ---------- */
.progreso-screen { min-height: 0; }
.progreso-screen .board-area { flex: 0 1 auto; }
.board-compact {
  padding: clamp(14px, 3vw, 20px) clamp(16px, 4vw, 26px);
}
.board-compact .board-title {
  font-size: clamp(15px, 2.2vw, 18px);
  margin-bottom: 6px;
}
.board-compact .board-title::after { display: none; }

/* The results table floats directly on the sky background (no teal card -
   it's already its own white card via .guide-table-wrap's shadow), sitting
   right under .progreso-screen rather than in a separate full-screen
   section. Text uses the page's normal dark ink/purple, not .explainer's
   white-on-teal, since there's no teal background here any more. */
.progreso-results {
  position: relative;
  z-index: 1;
  width: min(760px, 92vw);
  margin: 0 auto clamp(20px, 4vw, 34px);
  text-align: center;
}
.progreso-results h2 {
  color: var(--purple-dark);
  font-size: clamp(19px, 3.2vw, 25px);
  margin: 0 0 8px;
}
.progreso-results p { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.progreso-results .guide-table-wrap { text-align: left; }
.progreso-results .guide-note { text-align: center; opacity: .75; }

/* On the four SECTION menus the level tiles are compact rows, not big
   squares (the home board keeps its larger "Hoy jugamos a..." tiles). The
   :not(.board-grid-variants) keeps the even-smaller OTROS RETOS tiles
   below their own, tighter, rule. */
.is-section .board-grid:not(.board-grid-variants) .sq {
  aspect-ratio: auto;
  min-height: clamp(62px, 11vw, 90px);
  font-size: clamp(13px, 1.9vw, 17px);
  padding: 9px 6px;
}

/* game tiles: hand-lettered white "chalk" text in a chalk-dashed box.
   Each tile carries its own faint white doodle that brightens and pops
   on hover (the old sprites did the same white->colour flip), + a spring. */
.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  aspect-ratio: 1 / 0.8;
  font-size: clamp(14px, 2.1vw, 20px);
  line-height: 1.22;
  color: #fff;
  text-shadow: 0 0 2px rgba(255,255,255,.3);
  padding: 8px 6px;
  border: 2px dashed rgba(255,255,255,.55);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  transition: transform .15s cubic-bezier(.34,1.56,.64,1),
              background .18s, border-color .18s;
  animation: dropIn .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.sq:nth-child(1){animation-delay:.28s} .sq:nth-child(2){animation-delay:.33s}
.sq:nth-child(3){animation-delay:.38s} .sq:nth-child(4){animation-delay:.43s}
.sq:nth-child(5){animation-delay:.48s} .sq:nth-child(6){animation-delay:.53s}
.sq:nth-child(7){animation-delay:.58s} .sq:nth-child(8){animation-delay:.63s}
.sq:nth-child(9){animation-delay:.68s}
.sq:hover, .sq:focus-visible {
  transform: translateY(-3px) rotate(-1.5deg) scale(1.04);
  background: rgba(255,255,255,.14);
  border-color: #fff;
  outline: none;
}
.sq:active { transform: translateY(2px) scale(1); }

.sq-t { position: relative; z-index: 1; }
.sq::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62%;
  height: 62%;
  background: var(--doodle) center/contain no-repeat;
  opacity: .16;
  transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.sq:hover::after, .sq:focus-visible::after {
  opacity: .62;
  animation: sqPop .5s cubic-bezier(.34,1.7,.5,1);
}
@keyframes sqPop {
  0%   { transform: scale(.35) rotate(-22deg); }
  55%  { transform: scale(1.18) rotate(9deg); }
  100% { transform: scale(1) rotate(0); }
}
/* nine white chalk doodles, cycled across however many tiles a page has:
   star · plus · sort-arrows · cross · minus-bars · ring · triangle ·
   squiggle · lightning */
.sq:nth-child(9n+1) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 l2.4 7 7 2.4 -7 2.4 -2.4 7 -2.4 -7 -7 -2.4 7 -2.4z' fill='%23fff'/%3E%3C/svg%3E"); }
.sq:nth-child(9n+2) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/g%3E%3C/svg%3E"); }
.sq:nth-child(9n+3) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='2.8' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 3 18 9'/%3E%3Cpolyline points='6 15 12 21 18 15'/%3E%3C/g%3E%3C/svg%3E"); }
.sq:nth-child(9n+4) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/g%3E%3C/svg%3E"); }
.sq:nth-child(9n+5) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='16' x2='16' y2='16'/%3E%3C/g%3E%3C/svg%3E"); }
.sq:nth-child(9n+6) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' stroke='%23fff' stroke-width='3' fill='none'/%3E%3C/svg%3E"); }
.sq:nth-child(9n+7) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4 L21 20 L3 20 Z' stroke='%23fff' stroke-width='3' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sq:nth-child(9n+8) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 14 C7 6 10 22 14 14 S20 6 22 12' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sq:nth-child(9n+9) { --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 L4 14 h6 l-1 8 9 -12 h-6 z' fill='%23fff'/%3E%3C/svg%3E"); }

/* the teacher stands next to the board and "presents" it */
.board-teacher { flex: 0 0 auto; }
.board-teacher img {
  display: block;
  width: clamp(150px, 20vw, 250px);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.16));
  animation: teacherBob 3.4s ease-in-out infinite;
  transform-origin: bottom center;
  cursor: pointer;
}
@keyframes teacherBob {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%     { transform: translateY(-7px) rotate(1.5deg); }
}
/* hover the kid -> a quick happy jump/wiggle */
.board-teacher img:hover { animation: teacherHi .6s ease; }
@keyframes teacherHi {
  0%,100% { transform: translateY(0) rotate(0); }
  20%     { transform: translateY(-14px) rotate(-6deg); }
  45%     { transform: translateY(0) rotate(5deg); }
  70%     { transform: translateY(-6px) rotate(-3deg); }
}

.scroll-hint {
  font-size: 13px;
  color: var(--purple-dark);
  opacity: .8;
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---------- 3b. "there's another game here" callout under the board ----------
   Used on mtablas.html to point at the older streak/trophy "Practica las
   tablas" game (archived at legacy/tablas-aprendomusica/). A pinned-note
   card so it reads as an aside, not a second primary action. */
.more-game {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(560px, 92vw);
  text-align: left;
  text-decoration: none;
  color: var(--purple-dark);
  background: #fff;
  border-radius: 16px;
  padding: 12px 18px 12px 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
  transform: rotate(-1deg);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
}
.more-game:hover, .more-game:focus-visible {
  transform: rotate(-1deg) translateY(-3px) scale(1.02);
  box-shadow: 0 8px 0 rgba(0,0,0,.12), 0 16px 28px rgba(0,0,0,.16);
  outline: none;
}
.more-game:active { transform: rotate(-1deg) translateY(2px) scale(1); }
.more-game-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 4px 10px;
  transform: rotate(3deg);
}
.more-game-text { font-size: 15px; line-height: 1.4; }
.more-game-text b { color: var(--red); }

/* ---------- 3c. "OTROS RETOS" - the themed "quirk" variants, on the SAME
   blackboard as the main level grid, below a chalk divider. Ported in
   spirit from aprendomusica's ambitos (cuadrados perfectos, sumas sin
   llevar, ...). */
/* ---- mPuzles.html only: the "how it works" strip inside the blackboard.
   A mini board diagram beside the three rules, so a visitor knows what the
   game is before opening it. Page-specific, like the .guide-* rules. ---- */
.puz-how {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.4vw, 18px);
  margin: 0 0 clamp(10px, 2vw, 16px);
  padding: clamp(9px, 1.8vw, 14px) clamp(11px, 2.2vw, 16px);
  background: rgba(255, 255, 255, .12);
  border: 2px dashed rgba(255, 255, 255, .45);
  border-radius: 14px;
}
.puz-how-fig {
  flex: none;
  width: clamp(46px, 9vw, 66px);
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .2));
}
.puz-how-steps {
  margin: 0;
  padding-left: 1.15em;
  display: grid;
  gap: 3px;
  font-size: clamp(12px, 1.8vw, 15.5px);
  line-height: 1.3;
  color: #fff;
  text-align: left;
}
.puz-how-steps li { padding-left: 2px; }
.puz-how-steps::marker, .puz-how-steps li::marker { color: rgba(255, 255, 255, .7); }

.board-divider {
  position: relative;
  margin: clamp(16px, 3vw, 26px) 0 clamp(12px, 2vw, 18px);
  padding-top: clamp(14px, 2.4vw, 20px);
  border-top: 2px dashed rgba(255,255,255,.4);
  font-size: clamp(14px, 2.2vw, 20px);
  font-weight: normal;
  color: #fff;
  letter-spacing: .5px;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
.board-grid-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board-grid-variants .sq {
  font-size: clamp(12px, 1.8vw, 15px);
  aspect-ratio: auto;                 /* compact rows, not tall squares */
  min-height: clamp(52px, 9vw, 66px);
}
@media (min-width: 600px) {
  .board-grid-variants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Four columns leaves each variant tile quite narrow - narrow enough
     that a single unbreakable word (English "SUBTRACTING" and friends)
     could overflow a side-by-side icon+text row and sit on top of the
     next tile's icon, even with .sq-op .sq-t already set to shrink/wrap.
     Stacking the icon above the text instead gives the text the tile's
     full width to wrap in, which is what actually fixes it - the
     overflow-wrap on .sq-t above is only the last-resort backstop. */
  .board-grid-variants .sq-op {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-left: 0;
    gap: 4px;
  }
}
.board.tight .board-grid-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.board.tight .board-grid-variants .sq { aspect-ratio: auto; }
/* .board.tight keeps the variants row at 2 columns even above 600px (the
   rule just above), which stays roomy enough for the normal side-by-side
   layout - opt those tiles back out of the stacked treatment. */
.board.tight .board-grid-variants .sq-op {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  padding-left: clamp(8px, 2vw, 14px);
}

/* ---------- por-edades.html: age-chip filter over the same 40 levels the
     game menus link to, grouped by age instead of by game. Page-specific,
     like .guide-* below. ---------- */
.age-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 10px);
  margin-bottom: clamp(10px, 2vw, 16px);
}
.age-chip {
  min-width: 46px;
  padding: 8px 14px;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.age-chip[aria-pressed="true"] {
  background: #5b9e42;
  box-shadow: 0 3px 0 #3f6f2e;
  transform: translateY(3px);
}
.age-chip[aria-pressed="true"]:hover,
.age-chip[aria-pressed="true"]:focus-visible {
  transform: translateY(1px) scale(1.02) rotate(-1deg);
}
/* the small "which game" caption on each age tile - out of its own menu's
   context, a bare level name (e.g. "Unidades") isn't enough on its own */
.sq-game {
  display: block;
  font-size: .68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .8;
  margin-bottom: 2px;
}
/* no extra grid-column rule needed for the age board: it's a plain
   .board-grid inside .is-section, so it already gets the shared compact
   tile sizing above plus the default 3-col / mobile-2-col columns. */

/* ---------- screen 2: the "about" band - SEO prose that belongs here ---------- */
.about {
  position: relative;
  z-index: 1;
  background: #27a7bb;
  color: #fff;
  border-radius: 32px 32px 0 0;
  margin-top: 10px;
  padding: clamp(26px, 6vw, 52px) clamp(20px, 6vw, 64px) 38px;
}
.about-inner { max-width: 760px; margin: 0 auto; }
.about h2 { font-size: clamp(21px, 4vw, 29px); margin: 0 0 14px; text-shadow: 2px 2px 0 rgba(0,0,0,.12); }
.about p { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.about a { color: #fff; text-underline-offset: 3px; }
.about-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin-top: 18px; font-size: 15px; }
.about-foot { text-align: center; font-size: 14px; margin-top: 24px; opacity: .9; }

/* ---------- real content vs. footer-style links, split apart ----------
   Some pages (index.html, guia-didactica.html, progreso/index.html) mixed
   real content (explanatory prose, the teaching-guide table, the results
   table) into .about alongside its nav-links/social-links footer role.
   .explainer is that real content, in its own fully-rounded card - same
   teal as .board (this page's other "content card"), but a visibly
   separate box from .about below it, not a continuation of the footer
   band. Do NOT re-merge these into one band - that was tried and read as
   "the table is still stuck to the footer", which is exactly what this
   split exists to avoid. */
.explainer {
  position: relative;
  z-index: 1;
  background: #27a7bb;
  color: #fff;
  border-radius: 32px;
  margin: 10px 0 26px;
  padding: clamp(26px, 6vw, 52px) clamp(20px, 6vw, 64px);
}
.explainer-inner { max-width: 760px; margin: 0 auto; }
.explainer h2 { font-size: clamp(21px, 4vw, 29px); margin: 0 0 14px; text-shadow: 2px 2px 0 rgba(0,0,0,.12); }
.explainer p { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.explainer a { color: #fff; text-underline-offset: 3px; }

/* ---------- guía didáctica (guia-didactica.html): the intro "blackboard"
     carries prose instead of tiles, and the about band holds one clean
     reference table (levels + recommended age, grouped by game) plus a
     short "at home / in class" list. Page-specific, same as .more-game
     above - nothing here is a shared component. ---------- */
.board .guide-lead {
  color: #fff;
  font-size: clamp(14px, 2.4vw, 17px);
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.guide-table-wrap {
  margin: 22px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.14);
}
.guide-table {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font-size: 14.5px;
}
.guide-table thead th {
  background: #1c8496;
  color: #fff;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 11px 16px;
  white-space: nowrap;
}
.guide-table tbody td {
  padding: 11px 16px;
  border-top: 1px solid #e7eef0;
  line-height: 1.42;
  vertical-align: top;
}
.guide-table .guide-lvl { font-weight: 600; color: var(--purple-dark); }
.guide-table .age {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--purple-dark);
}
.guide-grp th {
  background: #dcedf0;
  color: var(--purple-dark);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px;
  border-top: 3px solid #bfdfe4;
}
.guide-table tbody:first-of-type .guide-grp th { border-top: 0; }
/* the per-game "open the game" link - beat menu.css's/`.about a`'s and
   `.explainer a`'s `color:#fff` on guia-didactica.html (where the table
   still lives in .explainer); progreso/'s own table lives in
   .progreso-results, which has no such override to beat but is listed
   here too so this rule stays the one place that styles this link. */
.about .guide-grp-link, .explainer .guide-grp-link, .progreso-results .guide-grp-link {
  float: right;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.about .guide-grp-link:hover, .about .guide-grp-link:focus-visible,
.explainer .guide-grp-link:hover, .explainer .guide-grp-link:focus-visible,
.progreso-results .guide-grp-link:hover, .progreso-results .guide-grp-link:focus-visible { text-decoration: underline; }
.guide-note { font-size: 13px; opacity: .85; margin: 6px 0 0; text-align: left; }

/* ---- progreso/: the results table's own cells ----
   Page-specific, same as the .guide-* rules above rather than shared
   components. The table reuses .guide-table wholesale; only the trend
   arrow and the "next step" wording need their own colour. */

/* Four columns, not guia-didactica's three. Without a wider floor the
   level names wrap to one word per line on a phone AND the last column
   (the actionable one) still falls off the edge. Give it real room and
   let .guide-table-wrap scroll, which is what that wrapper is for. */
#progress-table { min-width: 500px; }
#progress-table tbody td { padding: 10px 12px; }
#progress-table .guide-lvl { min-width: 8em; }
.progress-ready {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 999px;
}
.progress-keep { color: var(--ink); opacity: .6; font-size: 13px; }

.guide-tips { text-align: left; margin-top: 28px; }
.guide-tips h3 { font-size: clamp(18px, 3vw, 21px); margin: 0 0 10px; }
.guide-tips ul { margin: 0; padding-left: 20px; }
.guide-tips li { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }

/* ---------- adaptive: same markup and links everywhere, only the
     arrangement changes (shape-based, never device-sniffed) ---------- */

/* phones: category buttons stack 1-up; teacher peeks from behind the
   top corner of the blackboard (over the board only, never the buttons) */
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; width: min(400px, 92vw); }
  .board-wrap { display: block; margin-top: 22px; }
  .board { width: 100%; }
  .board-teacher { position: absolute; top: -34px; right: 2px; }
  .board-teacher img, .board.tight + .board-teacher img { width: 66px; }
}
/* very narrow: 2 tiles per row so labels stay readable */
@media (max-width: 380px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* With six categories the two-column default costs two extra rows, so
   tablets get a three-across step (two clean rows of three) before the
   full single row on desktop. */
@media (min-width: 700px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(760px, 94vw); }
}

/* wide desktop: category buttons as a single row */
@media (min-width: 1000px) {
  .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(1180px, 96vw); }
}

/* short landscape (phone on its side): compress; a little scroll is ok */
@media (max-height: 560px) and (orientation: landscape) {
  .menu-screen { min-height: 0; gap: 8px; }
  .menu-head { padding-top: 0; }
  /* No padding-top to spare here (that's the whole point of this
     breakpoint), so lean on width alone: cap the wordmark to whatever
     leaves the identity-login button (shared/account.css, right:116px +
     ~140px wide) clear on both sides of the centered logo. */
  .wordmark, .menu-screen.is-section .wordmark { width: min(320px, 40vw, calc(100vw - 560px)); }
  .menu-tagline { font-size: 13px; }
  .cat-grid { grid-template-columns: repeat(6, minmax(0,1fr)); width: min(980px, 94vw); gap: 8px; }
  .pill { padding: 10px 12px; }
  .board { flex-basis: 460px; padding: 12px; }
  .board-title { margin-bottom: 8px; font-size: 16px; }
  .board-grid { gap: 7px; }
  .sq { font-size: 11px; border-radius: 12px; }
  .board-teacher img { width: clamp(100px, 14vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .wordmark-link:hover .wordmark, .pill, .sq, .sq::after,
  .sq:hover::after, .board-teacher img, .board-teacher img:hover,
  .scroll-hint { animation: none !important; }
}

/* ---------- home page: a static, non-interactive teaser tile for puzles/
     ("Otro tipo de reto") on the board, alongside the level tiles. It's a
     single wide row (not a plain colour square like the other tiles)
     because it carries a tiny reproduction of one real, easy board
     (par 3: puzles/puzzles.js facil pool, "RR.a / RR.a / b..c / b..c") so it
     reads as "the same puzzle", not a generic icon. This rule is
     intentionally last in the cascade so it always wins over the
     .board-grid column-count rules above at every width - a single tile
     doesn't want the 2/3-column treatment the level tiles use. ---------- */
.board-grid-puzzle { grid-template-columns: 1fr; }
.sq-puzzle {
  aspect-ratio: auto;
  min-height: clamp(72px, 12vw, 96px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.4vw, 18px);
  padding: 10px clamp(12px, 2.4vw, 18px);
  text-align: left;
}
/* the mini board itself already carries the visual interest, so the usual
   white chalk doodle behind the tile text would just be clutter here */
.sq-puzzle::after { content: none; }

/* Colours mirror puzles/style.css's --puz-red/--puz-blue/--puz-frame/
   --puz-floor exactly (not shared as CSS custom properties across the two
   stylesheets - this page never loads puzles/style.css). If that palette
   ever changes, update these four too. */
.puzzle-mini {
  --pm-floor: #fbf2e2;
  --pm-frame: #6f4a86;
  --pm-red: #e5453f;
  --pm-blue: #4c8fc4;
  position: relative;
  flex: 0 0 auto;
  width: clamp(56px, 15vw, 74px);
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3px;
  padding: 6px;
  background: var(--pm-floor);
  border-radius: 8px;
  box-shadow: 0 0 0 4px var(--pm-frame), 0 2px 5px rgba(0,0,0,.2);
}
/* the exit gap in the bottom wall, centred, as wide as the red block -
   same idea as puzles/style.css's .puz-gap, just painted in the tile's
   own floor colour instead of the sky */
.puzzle-mini::after {
  content: "";
  position: absolute;
  left: 25%;
  width: 50%;
  bottom: -4px;
  height: 6px;
  background: var(--pm-floor);
  border-radius: 0 0 3px 3px;
}
.puzzle-mini .pm-piece { display: block; border-radius: 3px; }
.puzzle-mini .pm-red  { grid-column: 1 / 3; grid-row: 1 / 3; background: var(--pm-red); }
.puzzle-mini .pm-blue { background: var(--pm-blue); }
.puzzle-mini .pm-blue:nth-of-type(2) { grid-column: 4 / 5; grid-row: 1 / 3; }
.puzzle-mini .pm-blue:nth-of-type(3) { grid-column: 1 / 2; grid-row: 3 / 5; }
.puzzle-mini .pm-blue:nth-of-type(4) { grid-column: 4 / 5; grid-row: 3 / 5; }

.puzzle-mini-text { display: flex; flex-direction: column; gap: 2px; }
.puzzle-mini-cap {
  font-size: .68em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .8;
}
.puzzle-mini-label { font-weight: 600; }

/* ---------- mSumas.html tiles: a small worked-problem icon (paper card,
     operand rows, +/- badge) instead of the generic chalk doodle, so a
     sumas tile reads as sumas and a restas tile reads as restas at a
     glance - same "reproduce the real thing, don't decorate" idea as
     .puzzle-mini above, just laid out icon-left/text-right inside the
     normal .sq tile instead of a dedicated wide row. Column count (2 vs 3
     cells) and the pink carry/borrow flag are drawn straight into each
     tile's inline SVG, not toggled by CSS - see mSumas.html. ---------- */
.sq-op {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 2vw, 14px);
  text-align: left;
  padding-left: clamp(8px, 2vw, 14px);
}
.sq-op::after { content: none; }
/* a flex item's default min-width is its content's width, so a long
   unbroken label (English "Subtracting with borrowing" and friends) was
   overflowing the tile instead of wrapping - min-width lets the flex item
   itself shrink, but that alone only wraps at word boundaries; a single
   word wider than the tile (e.g. "SUBTRACTING" in the 4-column desktop
   "Otros retos" row) still overflowed past the tile and sat on top of the
   next icon. overflow-wrap makes it break mid-word as a last resort
   instead - confirmed against the exact width (1280px) that triggered it. */
.sq-op .sq-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.op-mini {
  flex: 0 0 auto;
  width: clamp(42px, 12vw, 60px);
  height: clamp(42px, 12vw, 60px);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.22));
}
/* the "Otros retos" row is shorter and (at 4 columns on desktop) narrower
   than the main level tiles above, so its icon scales down a step to
   match - same reasoning as .board-grid-variants .sq's own smaller
   min-height/font-size next to the plain-text .sq rule above. */
.board-grid-variants .op-mini {
  width: clamp(34px, 9vw, 46px);
  height: clamp(34px, 9vw, 46px);
}