/* ==========================================================================
   Math Memory — the child's home: four tabs
   --------------------------------------------------------------------------
   For children of six to ten, some of whom cannot read yet. So: big, bright
   and obvious. Every tap target is at least 56px, every tab is a picture
   with one word, and the tab you are on is gold, bigger, and bounces.

   The same purple, Fredoka and Nunito, and Quackers as the rest of the game.

   LOGICAL PROPERTIES ONLY — inline/block, start/end — so right-to-left can
   be switched on later without touching this file.

   Every animation here stops in Calm mode ([data-calm] on <html>) and for
   anyone who has asked their device for reduced motion.
   ========================================================================== */

/* ---- The frame ------------------------------------------------------------ */

.app-shell[data-area="kid"] .app-main { max-width: none; }

/* A column the height of the screen: top bar, tabs, one scrolling area, and
   (on a phone) the bottom bar as the last row — not position: fixed, so the
   game's screen shake can never shift it. */
.kid {
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  color: #fff;
}

/* Components here set their own display, which would otherwise beat the
   hidden attribute — and show a "0" badge that means nothing. */
.kid [hidden], .kid-confirm [hidden] { display: none !important; }

.kid a:focus-visible,
.kid button:focus-visible,
.kid-confirm button:focus-visible {
  outline: 4px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Top bar: who, stars, streak ------------------------------------------ */

.kid-top {
  flex: none;
  padding-block-start: env(safe-area-inset-top);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.kid-top__inner {
  max-inline-size: 1040px;
  margin-inline: auto;
  min-block-size: 68px;
  padding-inline: var(--s4);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
}
.kid-top__who { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.kid-top__face {
  flex: none;
  inline-size: 46px; block-size: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px; line-height: 1;
  background: rgba(255, 255, 255, .14);
}
.kid-top__name {
  font: 600 22px/1.1 var(--font-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kid-top__pills { display: flex; gap: 8px; flex: none; }
.kid-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-block-size: 44px;
  padding-inline: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .26);
  font: 800 18px var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.kid-pill__icon { font-size: 18px; line-height: 1; }
.kid-pill__icon--star { color: var(--gold); font-size: 20px; }

/* ---- Tabs: a row on wide screens ------------------------------------------ */

.kid-tabs { display: none; flex: none; }
.kid-tabs__inner {
  max-inline-size: 860px;
  margin-inline: auto;
  padding: 4px var(--s4) 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.kid-tab {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-block-size: 76px;
  padding-inline: 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .09);
  border: 2px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.kid-tab:hover { background: rgba(255, 255, 255, .16); }
.kid-tab:active { transform: scale(.97); }
.kid-tab__art { position: relative; display: grid; place-items: center; }
.kid-tab__icon { font-size: 34px; line-height: 1; display: inline-block; }
.kid-tab__label { font: 600 24px/1 var(--font-display); }
.kid-tab.is-on {
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  border-color: transparent;
  color: #5b2c00;
  box-shadow: 0 6px 0 var(--cta-shadow);
}
.kid-tab.is-on .kid-tab__icon { transform: scale(1.12); }

/* ---- Tabs: a bar along the bottom of a phone ------------------------------ */

.kid-nav {
  flex: none;
  background: rgba(24, 10, 64, .97);
  border-block-start: 1px solid rgba(255, 255, 255, .12);
  padding-block-end: env(safe-area-inset-bottom);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.kid-nav__list {
  list-style: none; margin: 0; padding: 6px 6px 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.kid-navlink {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-block-size: 72px;
  border-radius: 18px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
}
.kid-navlink__art {
  position: relative;
  inline-size: 60px; block-size: 40px;
  border-radius: 20px;
  display: grid; place-items: center;
  transition: background .15s ease;
}
.kid-navlink__icon { font-size: 28px; line-height: 1; display: inline-block; }
.kid-navlink__label { font: 800 14px/1 var(--font-ui); }
.kid-navlink.is-on { color: var(--gold); }
.kid-navlink.is-on .kid-navlink__art {
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  box-shadow: 0 3px 0 var(--cta-shadow);
}
.kid-navlink.is-on .kid-navlink__icon { transform: scale(1.12); }
.kid-navlink.is-on .kid-navlink__label { font-weight: 900; }

@media (min-width: 768px) {
  .kid-tabs { display: block; }
  .kid-nav { display: none; }
  .kid-top__inner { padding-inline: 32px; }
}

/* The bounce on the tab just tapped. */
@keyframes kidbounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) translateY(-5px); }
  65%  { transform: scale(.94); }
  100% { transform: scale(1.12); }
}
.is-bounce { animation: kidbounce .45s cubic-bezier(.3, 1.4, .5, 1); }

/* ---- The one badge -------------------------------------------------------
   Something new to go and see: an egg to hatch, a trophy not looked at yet.
   A plain coloured circle with a number. It does not glow and it does not
   blink. */
.kid-badge {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: -10px;
  min-inline-size: 24px; block-size: 24px;
  padding-inline: 6px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #ff4f8b;
  color: #fff;
  font: 900 13px/1 var(--font-ui);
  border: 2px solid #1b0c46;
}

/* ---- The scrolling area ---------------------------------------------------- */

.kid-main {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.kid-panel {
  max-inline-size: 660px;
  margin-inline: auto;
  padding: 6px var(--s4) 36px;
}

/* The map keeps its own scroller, as it always has — its table headers stick
   inside it. So on the map the area around it does not scroll. */
.kid-main.is-map { overflow: hidden; }
.kid-main.is-map .kid-panel { block-size: 100%; padding-block: 0; display: flex; flex-direction: column; }
.kid-map.screen--map { max-block-size: none; max-height: none; block-size: 100%; flex: 1 1 auto; padding-block-start: 0; }

.kid-page {
  display: flex; flex-direction: column; gap: 18px;
  animation: kidin .25s ease-out both;
}
@keyframes kidin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kid-title { margin: 0; font: 600 32px/1.15 var(--font-display); }

.kid-card {
  background: rgba(255, 255, 255, .1);
  border: 2px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  padding: 18px;
}

.kid-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kid-section__title { margin: 0; font: 600 26px/1.2 var(--font-display); }
.kid-section__count { font: 800 17px var(--font-ui); color: var(--gold); }

/* A big, friendly row button: a picture, a word, and an arrow. */
.kid-bigbtn {
  inline-size: 100%;
  display: flex; align-items: center; gap: 14px;
  min-block-size: 76px;
  padding: 12px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .18);
  color: #fff;
  text-align: start;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.kid-bigbtn:hover { background: rgba(255, 255, 255, .18); }
.kid-bigbtn:active { transform: scale(.98); }
.kid-bigbtn__icon { font-size: 36px; line-height: 1; flex: none; }
.kid-bigbtn__word { flex: 1 1 auto; font: 600 24px/1.1 var(--font-display); }
.kid-bigbtn__chev { font: 400 36px/1 var(--font-ui); opacity: .6; }

.kid-subhead { display: flex; align-items: center; gap: 12px; }
.kid-back { inline-size: 56px; block-size: 56px; font-size: 26px; border-radius: 18px; }

/* ==========================================================================
   Quiz
   ========================================================================== */

.kid-game {
  inline-size: 100%;
  display: flex; align-items: center; gap: 16px;
  min-block-size: 140px;
  padding: 18px;
  border-radius: 30px;
  border: 0;
  color: #fff;
  text-align: start;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kid-game:active { transform: translateY(5px); }
.kid-game--quiz {
  background: linear-gradient(160deg, #9a55ff, #5b2bd6);
  box-shadow: 0 8px 0 #36178c;
}
.kid-game--quiz:active { box-shadow: 0 3px 0 #36178c; }
.kid-game--speed {
  background: linear-gradient(160deg, var(--teal-2), #1f7fd6);
  box-shadow: 0 8px 0 #0d4f86;
}
.kid-game--speed:active { box-shadow: 0 3px 0 #0d4f86; }
.kid-game__art {
  flex: none;
  inline-size: 92px; block-size: 92px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .2);
  overflow: hidden;
}
.kid-game__emoji { font-size: 54px; line-height: 1; }
.kid-game__words { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
.kid-game__title { font: 600 30px/1.05 var(--font-display); }
.kid-game__line { font: 700 16px/1.3 var(--font-ui); color: rgba(255, 255, 255, .9); }
.kid-game__best {
  align-self: flex-start;
  margin-block-start: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .24);
  color: var(--gold);
  font: 800 15px var(--font-ui);
}
.kid-game__best.is-new { background: #fff; color: #5b2bd6; }
.kid-game__go {
  flex: none;
  inline-size: 68px; block-size: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  box-shadow: 0 5px 0 var(--cta-shadow);
  color: #5b2c00;
  font: 700 24px/1 var(--font-display);
}
@media (max-width: 420px) {
  .kid-game { gap: 12px; padding: 16px 14px; }
  .kid-game__art { inline-size: 72px; block-size: 72px; }
  .kid-game__art .dk { --duck: 60px; }
  .kid-game__emoji { font-size: 42px; }
  .kid-game__title { font-size: 25px; }
  .kid-game__go { inline-size: 56px; block-size: 56px; font-size: 20px; }
}

/* ==========================================================================
   Pond
   ========================================================================== */

.kid-pond__duck { align-self: center; margin-block-start: 30px; }
.kid-pond__age { margin-block-start: -6px; }

.kid-eggs { display: flex; flex-direction: column; gap: 14px; }
.kid-eggs.is-ready { border-color: var(--gold); background: rgba(255, 215, 106, .14); }
.kid-eggs__row { display: flex; align-items: center; gap: 14px; }
.kid-eggs__art { flex: none; font-size: 58px; line-height: 1; }
.kid-eggs__art.is-quiet { opacity: .6; }
.kid-eggs__words { min-inline-size: 0; }
.kid-eggs__title { margin: 0; font: 600 25px/1.15 var(--font-display); }
.kid-eggs__line { margin: 4px 0 0; font: 700 16px/1.35 var(--font-ui); color: rgba(255, 255, 255, .8); }
.kid-eggs__go { font-size: 26px; }

.kid-prizes { display: flex; flex-direction: column; gap: 12px; }
.kid-prize {
  inline-size: 100%;
  display: flex; align-items: center; gap: 14px;
  min-block-size: 104px;
  padding: 14px;
  border-radius: 26px;
  text-align: start;
  cursor: pointer;
  transition: transform .12s ease;
}
.kid-prize:active { transform: scale(.98); }
.kid-prize__art {
  flex: none;
  inline-size: 76px; block-size: 76px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 44px; line-height: 1;
  background-size: cover; background-position: center;
}
.kid-prize__words { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.kid-prize__tag { font: 900 13px var(--font-ui); letter-spacing: .08em; }
.kid-prize__title { font: 600 25px/1.15 var(--font-display); overflow-wrap: anywhere; }
.kid-prize__line { font: 700 15px/1.3 var(--font-ui); }

/* A real prize, won: the loudest card in the Pond. */
.kid-prize.is-won {
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  border: 0;
  box-shadow: 0 7px 0 var(--cta-shadow);
  color: #4a2400;
}
.kid-prize.is-won .kid-prize__art { background-color: rgba(255, 255, 255, .6); }
.kid-prize.is-won .kid-prize__tag { color: #a3470c; }
.kid-prize.is-ahead {
  background: rgba(255, 255, 255, .07);
  border: 2px dashed rgba(255, 255, 255, .3);
  color: #fff;
}
.kid-prize.is-ahead .kid-prize__art { background-color: rgba(255, 255, 255, .12); }
.kid-prize.is-ahead .kid-prize__line { color: rgba(255, 255, 255, .78); }

.kid-hats { display: flex; flex-direction: column; gap: 12px; }
.kid-hats__grid .hat-tile { min-block-size: 124px; border-radius: 22px; }
.kid-hats__grid .hat-tile__name { font-size: 14px; }
@media (min-width: 560px) {
  .kid-hats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Me — pictures and numbers
   ========================================================================== */

.kid-me__top { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-start: 8px; }
.kid-me__face {
  inline-size: 132px; block-size: 132px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 80px; line-height: 1;
  background: rgba(255, 255, 255, .14);
  border: 5px solid var(--gold);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: transform .12s ease;
}
.kid-me__face:active { transform: scale(.95); }
.kid-me__name { margin: 0; font: 600 38px/1.1 var(--font-display); text-align: center; overflow-wrap: anywhere; }

.kid-faces {
  inline-size: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(0, 0, 0, .2);
}
.kid-faces__pick {
  min-block-size: 72px;
  border-radius: 20px;
  font-size: 42px; line-height: 1;
  background: rgba(255, 255, 255, .08);
  border: 3px solid transparent;
  cursor: pointer;
}
.kid-faces__pick[aria-checked="true"] { border-color: var(--gold); background: rgba(255, 215, 106, .22); }

/* Trophies as pictures only. */
.kid-trophy-grid {
  list-style: none; margin: 0; padding: 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .08);
}
.kid-trophy {
  aspect-ratio: 1;
  border-radius: 20px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .06);
}
.kid-trophy.is-on { background: linear-gradient(160deg, rgba(255, 215, 106, .45), rgba(255, 171, 29, .3)); box-shadow: inset 0 0 0 2px rgba(255, 215, 106, .6); }
.kid-trophy.is-locked { opacity: .35; }
.kid-trophy.is-locked .kid-trophy__icon { filter: grayscale(1); }
.kid-trophy.is-new { box-shadow: inset 0 0 0 4px var(--gold); animation: mmpop .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.kid-trophy__icon { font-size: 38px; line-height: 1; }

/* Settings and goodbye: big picture tiles with one word. A switch is lit
   teal when on and dim when off, so on/off reads without any text. */
.kid-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kid-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-block-size: 108px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .1);
  border: 3px solid transparent;
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.kid-tile:active { transform: scale(.95); }
.kid-tile__icon { font-size: 44px; line-height: 1; }
.kid-tile__word { font: 600 20px/1 var(--font-display); }
.kid-tile[aria-checked="false"] { opacity: .55; }
.kid-tile[aria-checked="false"] .kid-tile__icon { filter: grayscale(.8); }
.kid-tile[aria-checked="true"] { background: rgba(52, 209, 192, .28); border-color: var(--teal); }
.kid-tile--bye { background: rgba(255, 79, 139, .16); }

/* More: plain rows, one word and a switch. */
.kid-toggles { display: flex; flex-direction: column; gap: 12px; }
.kid-toggle {
  inline-size: 100%;
  display: flex; align-items: center; gap: 14px;
  min-block-size: 80px;
  padding: 12px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  text-align: start;
  cursor: pointer;
}
.kid-toggle__icon { flex: none; font-size: 36px; line-height: 1; }
.kid-toggle__label { flex: 1 1 auto; font: 600 23px/1.15 var(--font-display); }
.kid-toggle__track { inline-size: 64px; block-size: 38px; border-radius: 19px; padding: 4px; }
.kid-toggle__track .toggle__knob { inline-size: 30px; block-size: 30px; }
.kid-toggle[aria-checked="true"] .kid-toggle__track { background: var(--teal); justify-content: flex-end; }

/* ---- "Sign out?" ---------------------------------------------------------- */

.kid-confirm__card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.kid-confirm__card .dk-stage { align-self: center; }
.kid-confirm__title { margin: 4px 0 0; font: 600 32px/1.1 var(--font-display); color: var(--ink-2); }
.kid-confirm__no { font-size: 28px; margin-block-start: 8px; }
.kid-confirm__yes {
  min-block-size: 60px;
  border-radius: 20px;
  background: transparent;
  border: 2px solid rgba(42, 19, 80, .22);
  color: #8e1d4e;
  font: 800 18px var(--font-ui);
  cursor: pointer;
}

/* ---- Calm mode and reduced motion: nothing moves on its own --------------- */

[data-calm] .kid-page,
[data-calm] .is-bounce,
[data-calm] .kid-trophy.is-new { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .kid-page, .is-bounce, .kid-trophy.is-new { animation: none; }
  .kid-tab, .kid-bigbtn, .kid-game, .kid-prize, .kid-tile, .kid-me__face { transition: none; }
}