/* ---------- Rainbow World: shared styles ---------- */

/* Lets the rainbow borders spin smoothly. */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Soft slide-and-pop when moving between pages. */
@view-transition { navigation: auto; }

:root {
  --red: oklch(70% 0.2 15);
  --orange: oklch(78% 0.17 60);
  --yellow: oklch(89% 0.17 98);
  --green: oklch(78% 0.19 152);
  --blue: oklch(72% 0.15 245);
  --purple: oklch(66% 0.2 295);
  --pink: oklch(75% 0.19 350);
  --ink: oklch(33% 0.09 300);
  --soft: oklch(52% 0.07 300);
  --paper: oklch(100% 0 0);

  --radius: 30px;
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, sans-serif;
  --rainbow-ring: conic-gradient(from var(--angle),
    var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
  /* A bouncy spring for anything that moves. */
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121,
    1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%,
    0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);

  accent-color: var(--purple);
  scrollbar-color: var(--pink) transparent;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--yellow); color: var(--ink); }

body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--body);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-x: clip;
  background:
    radial-gradient(oklch(100% 0 0 / .8) 2px, transparent 3px) 0 0 / 30px 30px,
    radial-gradient(circle at 10% 6%, oklch(91% 0.09 350), transparent 42%),
    radial-gradient(circle at 90% 10%, oklch(92% 0.08 230), transparent 44%),
    radial-gradient(circle at 85% 88%, oklch(95% 0.11 100), transparent 42%),
    radial-gradient(circle at 12% 92%, oklch(93% 0.09 160), transparent 44%),
    oklch(97% 0.03 300);
  background-attachment: fixed;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 7.5vw, 4.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 4px solid var(--purple); outline-offset: 4px; border-radius: 12px; }

main { max-inline-size: 1050px; margin-inline: auto; padding: 1.5rem 16px 3rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; inset-block-start: 10px; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  max-inline-size: 1050px; margin: 10px auto 0; padding: .5rem 1rem;
  inline-size: calc(100% - 20px);
  border: 5px solid transparent; border-radius: 34px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--rainbow-ring) border-box;
  box-shadow: 0 10px 30px oklch(60% 0.15 300 / .25);
  animation: spin 6s linear infinite;
  view-transition-name: site-header;
}
@keyframes spin { to { --angle: 360deg; } }

.logo {
  display: flex; align-items: center; gap: .4rem; margin-inline-end: auto;
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-decoration: none;
}
.logo-icon { display: inline-block; animation: wobble 3s ease-in-out infinite; }

.site-nav {
  display: flex; flex-wrap: wrap; gap: .4rem;

  a {
    --c: var(--blue);
    padding: .35rem .85rem; border-radius: 999px;
    background: color-mix(in oklch, var(--c) 18%, var(--paper));
    font-family: var(--display); font-weight: 600; font-size: 1rem;
    color: var(--ink); text-decoration: none; white-space: nowrap;
    transition: translate .5s var(--spring), rotate .5s var(--spring), background .2s;

    &:hover { translate: 0 -4px; rotate: -3deg; background: color-mix(in oklch, var(--c) 40%, var(--paper)); }
    &[aria-current="page"] {
      background: var(--c); color: var(--paper);
      text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
      box-shadow: 0 4px 0 color-mix(in oklch, var(--c) 70%, black);
    }
  }
}

.sound-toggle {
  inline-size: 2.6rem; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; font-size: 1.2rem;
  background: color-mix(in oklch, var(--purple) 18%, var(--paper));
  transition: scale .5s var(--spring);
  &:hover { scale: 1.2; }
  &:active { scale: .85; }
}

/* Top line: the site name on the left, the sign-in badge and sound button on the right.
   The menu always has the line below to itself, and wraps onto more lines if it needs to. */
.header-tools { display: flex; align-items: center; gap: .5rem; order: 2; }
.site-nav { order: 3; inline-size: 100%; }
/* On phones the menu scrolls away with the page so it doesn't hog the screen. */
@media (width < 720px) {
  .site-header { position: static; }
}

.site-footer { text-align: center; padding: 1.5rem 16px 2.5rem; color: var(--soft); font-family: var(--display); }

/* ---------- Rainbow letters ---------- */
/* Rainbow titles wrap the plain way. The "balanced" wrapping used for other headings can wrongly
   stack a short title onto two lines in Safari while the letters and font are still loading. */
[data-rainbow] { text-wrap: wrap; }
.rb-word { display: inline-block; white-space: nowrap; }
.rb-letter { display: inline-block; animation: wave 1.8s ease-in-out infinite; }
@keyframes wave { 50% { translate: 0 -.14em; } }

/* Big titles look like puffy stickers. */
h1 .rb-letter {
  -webkit-text-stroke: .16em var(--paper);
  paint-order: stroke fill;
  filter: drop-shadow(0 .06em 0 oklch(60% 0.12 300 / .35));
}

/* ---------- Buttons, chips, panels ---------- */
.btn {
  --c: var(--purple);
  --deep: color-mix(in oklch, var(--c) 68%, black);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.3rem; border: 0; border-radius: 999px;
  background: linear-gradient(color-mix(in oklch, var(--c) 78%, white), var(--c) 60%);
  color: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 1.15rem;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .25); text-decoration: none;
  box-shadow: 0 6px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45);
  transition: translate .45s var(--spring), scale .45s var(--spring), box-shadow .1s;

  &:hover { translate: 0 -3px; scale: 1.04; box-shadow: 0 9px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45); }
  &:active { translate: 0 5px; scale: .97; box-shadow: 0 1px 0 var(--deep), inset 0 2px 0 oklch(100% 0 0 / .45); transition-duration: .05s; }
  &.small { font-size: 1rem; padding: .4rem 1rem; }
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.chip {
  --c: var(--blue);
  padding: .4rem .95rem; border: 0; border-radius: 999px;
  background: color-mix(in oklch, var(--c) 16%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 55%, var(--paper));
  font-family: var(--display); font-weight: 500;
  transition: scale .5s var(--spring), rotate .5s var(--spring), background .2s;

  &:hover { scale: 1.08; rotate: -2deg; }
  &[aria-pressed="true"] {
    background: var(--c); color: var(--paper); scale: 1.06;
    box-shadow: 0 4px 0 color-mix(in oklch, var(--c) 68%, black);
    text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
  }
}

.panel {
  --c: var(--purple);
  position: relative;
  padding: clamp(1.1rem, 3vw, 2rem); margin-block-end: 2.2rem;
  border: 5px solid var(--c); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--paper) 55%, color-mix(in oklch, var(--c) 14%, var(--paper)));
  box-shadow: 0 10px 0 color-mix(in oklch, var(--c) 45%, transparent), 0 24px 40px color-mix(in oklch, var(--c) 22%, transparent);

  > h2 { color: color-mix(in oklch, var(--c) 68%, black); }
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.label { font-family: var(--display); font-weight: 600; margin: 0 0 .4rem; }
.hint { color: var(--soft); font-size: 1rem; }
.score { font-family: var(--display); font-weight: 600; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.page-title {
  text-align: center; margin-block: 1.5rem 2rem;
  p { font-size: 1.25rem; color: var(--soft); }
  .big {
    display: inline-block; font-size: clamp(3rem, 10vw, 5rem);
    filter: drop-shadow(0 8px 6px oklch(60% 0.15 300 / .25));
    animation: bob 2.4s ease-in-out infinite;
  }
}

/* ---------- Effects ---------- */
.fx-layer, .bg-layer { position: fixed; inset: 0; pointer-events: none; overflow: clip; }
.fx-layer { z-index: 100; }
.bg-layer { z-index: -1; }
.confetti { position: absolute; inset-block-start: 0; inline-size: 10px; block-size: 16px; border-radius: 4px; }
.spark { position: absolute; font-size: 1.3rem; margin: -.65rem; }
.floater { position: absolute; inset-block-end: -4rem; opacity: .5; animation: floatUp linear infinite; }

@keyframes floatUp {
  from { translate: 0 0; rotate: -12deg; }
  50% { translate: 30px -60vh; rotate: 12deg; }
  to { translate: 0 -120vh; rotate: -12deg; }
}
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes wobble { from, to { rotate: -8deg; } 50% { rotate: 8deg; } }
@keyframes jump {
  40% { translate: 0 -38px; scale: 1.25; rotate: 12deg; }
  70% { translate: 0 0; scale: .9 1.1; }
}
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }
@keyframes popIn { from { scale: 0; } }
@keyframes riseIn { from { opacity: 0; scale: .92; translate: 0 50px; } }
.jump { animation: jump .6s ease !important; }
.shake { animation: shake .4s ease; }

/* Panels and cards pop into place as they scroll into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel, .card {
      animation: riseIn linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* ---------- Home ---------- */
.hero {
  text-align: center; padding-block: 1rem 2rem;
  p { font-size: 1.3rem; color: var(--soft); }
}
.sky-rainbow {
  position: relative; inline-size: min(460px, 86vw); aspect-ratio: 2 / 1; margin: 0 auto 1.4rem;
  background: radial-gradient(circle farthest-side at 50% 100%,
    transparent 0 44%, var(--purple) 44% 53%, var(--blue) 53% 62%, var(--green) 62% 71%,
    var(--yellow) 71% 80%, var(--orange) 80% 89%, var(--red) 89% 99%, transparent 100%);
  filter: drop-shadow(0 0 22px oklch(90% 0.12 90 / .9));
  transform-origin: 50% 100%;
  animation: popIn 1.2s var(--spring);

  span {
    position: absolute; inset-block-end: -1.2rem; font-size: clamp(3rem, 12vw, 5rem);
    animation: bob 3s ease-in-out infinite;
    &:first-child { inset-inline-start: -8%; }
    &:last-child { inset-inline-end: -8%; animation-delay: -1.5s; }
  }
}

.parade {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem;

  button {
    border: 0; background: none; padding: .1rem .3rem;
    font-size: clamp(2.4rem, 8vw, 3.6rem);
    filter: drop-shadow(0 8px 5px oklch(60% 0.15 300 / .25));
    animation: bob 2s ease-in-out infinite;
    transition: scale .5s var(--spring);
    &:hover { scale: 1.25; }
  }
}
.bubble-says {
  display: inline-block; min-block-size: 2.8rem; margin: 0 auto 1rem; padding: .45rem 1.2rem;
  border: 4px solid transparent; border-radius: 999px;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--rainbow-ring) border-box;
  font-family: var(--display); font-weight: 600;
  animation: spin 5s linear infinite;
}

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; margin-block: 2rem; }
.card {
  --c: var(--blue);
  display: block; padding: 1.3rem 1rem; text-align: center; text-decoration: none; color: var(--ink);
  border: 5px solid var(--c); border-radius: var(--radius);
  background: linear-gradient(170deg, var(--paper) 50%, color-mix(in oklch, var(--c) 22%, var(--paper)));
  box-shadow: 0 9px 0 color-mix(in oklch, var(--c) 68%, black), 0 22px 30px color-mix(in oklch, var(--c) 25%, transparent);
  transition: translate .6s var(--spring), rotate .6s var(--spring);

  &:hover { translate: 0 -8px; rotate: -2deg; }
  &:nth-child(even):hover { rotate: 2deg; }
  &:hover .card-icon { animation: jump .6s ease; }
  &:active { translate: 0 4px; transition-duration: .05s; }

  h3 { font-size: 1.4rem; color: color-mix(in oklch, var(--c) 68%, black); margin: .5rem 0 .2rem; }
  p { margin: 0; font-size: 1rem; color: var(--soft); }
  &.soon { border-style: dashed; box-shadow: none; opacity: .8; translate: none; rotate: none; }
}
.card-icon {
  display: grid; place-items: center; inline-size: 5.4rem; aspect-ratio: 1; margin-inline: auto;
  border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  background: color-mix(in oklch, var(--c) 28%, var(--paper));
  font-size: 3.2rem;
}

.joke {
  font-family: var(--display); font-size: 1.35rem; min-block-size: 4.2rem;
  strong { display: block; color: var(--red); animation: popIn .6s var(--spring); }
}

/* ---------- Reading ---------- */
.story {
  min-block-size: 7rem; padding: 1rem 1.2rem; margin-block-start: 1rem; font-size: 1.25rem;
  background: color-mix(in oklch, var(--yellow) 22%, var(--paper));
  border: 3px dashed var(--orange); border-radius: 22px;
}
.results { display: grid; gap: .6rem; margin-block: .9rem; }
.result {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: .9rem; padding: .5rem .7rem;
  border-radius: 18px; background: color-mix(in oklch, var(--green) 10%, var(--paper));
  animation: riseIn .4s ease backwards;
  strong, small { display: block; }
  small { color: var(--soft); }
}
.cover {
  --c: var(--blue);
  position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 2 / 3; overflow: clip;
  border-radius: 6px 12px 12px 6px; padding: .4rem;
  background: linear-gradient(90deg, color-mix(in oklch, var(--c) 70%, black) 0 8%, var(--c) 8%, color-mix(in oklch, var(--c) 75%, white));
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 55%, black), 0 10px 16px oklch(40% 0.1 300 / .2);
  color: var(--paper); font-family: var(--display); font-weight: 600; font-size: .85rem; line-height: 1.15; text-align: center;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .3); overflow-wrap: anywhere;
  img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
}
.result .cover { font-size: 0; padding: 0; }
.bookcase {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 150px)); justify-content: center; gap: 1.2rem 1rem; align-items: start;
  margin-block: 1rem 1.4rem; padding: 1.2rem 1rem; border-radius: 22px;
  border-block-end: 16px solid oklch(68% 0.1 60);
  background: linear-gradient(oklch(97% 0.03 80), oklch(93% 0.06 75));
  > .hint { grid-column: 1 / -1; margin: 0; }
}
.book-card {
  display: grid; gap: .35rem; padding: 0; border: 0; background: none; text-align: center;
  font-family: var(--display); line-height: 1.2;
  transition: translate .5s var(--spring), rotate .5s var(--spring);
  animation: popIn .5s var(--spring) backwards;
  &:hover { translate: 0 -6px; rotate: -2deg; }
  &[aria-pressed="true"] { translate: 0 -8px; .cover { outline: 5px solid var(--purple); outline-offset: 3px; } }
  strong { font-weight: 600; font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
  small { font-family: var(--body); font-size: .8rem; color: var(--soft); }
}
.book-detail {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; align-items: start;
  margin-block-start: 1rem; padding: 1rem; border-radius: 22px;
  background: color-mix(in oklch, var(--purple) 10%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--purple) 35%, var(--paper));
  animation: riseIn .4s ease;
  @media (width < 520px) { grid-template-columns: 1fr; #book-cover { max-inline-size: 130px; } }
}
.book-fields {
  display: grid; gap: .7rem; justify-items: start;
  .text-input { inline-size: 100%; }
  label { display: grid; gap: .2rem; inline-size: 100%; font-family: var(--display); font-weight: 600; }
  .hint { margin: 0; }
}
.fold {
  margin-block-start: 1rem;
  summary { display: inline-block; cursor: pointer; padding: .35rem .9rem; border-radius: 999px; font-family: var(--display); font-weight: 600; background: color-mix(in oklch, var(--c) 16%, var(--paper)); }
  &[open] summary { margin-block-end: .9rem; }
}
.text-input {
  flex: 1 1 220px; padding: .6rem 1.1rem; border: 4px solid var(--green); border-radius: 999px; background: var(--paper);
  transition: box-shadow .2s;
  &::placeholder { color: var(--soft); opacity: .7; }
  &:focus { outline: 0; box-shadow: 0 0 0 6px color-mix(in oklch, var(--green) 35%, transparent); }
}
.badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.badge {
  padding: .3rem .85rem; border-radius: 999px; background: oklch(93% 0 0); color: oklch(65% 0 0);
  font-family: var(--display); font-weight: 600; filter: grayscale(1);

  &.earned {
    background: linear-gradient(120deg, var(--yellow), var(--orange)); color: var(--ink); filter: none;
    box-shadow: 0 4px 0 color-mix(in oklch, var(--orange) 70%, black);
    animation: popIn .6s var(--spring);
  }
}
.word { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 7vw, 3.2rem); margin-block-end: .2em; }

/* ---------- Music ---------- */
/* On a narrow screen the keyboard keeps its size and slides sideways instead of squashing. */
.piano-scroll { overflow-x: auto; padding-block-end: 14px; }
.piano { position: relative; display: flex; gap: 6px; block-size: 230px; min-inline-size: 540px; touch-action: pan-x; user-select: none; }
.key {
  --deep: color-mix(in oklch, var(--c) 65%, black);
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem;
  padding-block-end: .8rem; border: 0; border-radius: 12px 12px 22px 22px;
  background: linear-gradient(color-mix(in oklch, var(--c) 70%, white), var(--c) 45%);
  color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 1.2rem;
  text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  box-shadow: 0 8px 0 var(--deep), inset 0 3px 0 oklch(100% 0 0 / .45);
  transition: translate .08s, box-shadow .08s, filter .08s;

  small { font-size: .8rem; opacity: .85; }
  &.playing { translate: 0 7px; box-shadow: 0 1px 0 var(--deep), inset 0 3px 0 oklch(100% 0 0 / .45); filter: brightness(1.2) saturate(1.2); }
}
.band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem;

  button {
    --c: var(--pink);
    padding: .7rem .6rem; border: 0; border-radius: 26px;
    background: color-mix(in oklch, var(--c) 20%, var(--paper));
    box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 60%, var(--paper));
    font-family: var(--display); font-weight: 600;
    transition: scale .5s var(--spring);
    &:hover { scale: 1.06; }
    span { display: block; font-size: 3rem; }
  }
}

/* ---------- Lab ---------- */
.question { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 10vw, 4.5rem); text-align: center; margin-block: .5rem; }
.answers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; margin-block: 1rem 1.4rem;
  .btn { justify-content: center; font-size: 1.8rem; border-radius: 24px; animation: popIn .5s var(--spring) backwards; }
  .btn:nth-child(2) { animation-delay: .06s; }
  .btn:nth-child(3) { animation-delay: .12s; }
  .btn:nth-child(4) { animation-delay: .18s; }
  .btn.shake { animation: shake .4s ease; }
  .btn:disabled { opacity: .35; cursor: default; }
}

.mixer { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; }
.beaker {
  position: relative; inline-size: 150px; block-size: 190px; flex: none; overflow: clip;
  border: 6px solid oklch(84% 0.03 250); border-block-start: 0; border-radius: 6px 6px 44px 44px;
  background: oklch(98% 0.01 250);
  box-shadow: 0 0 40px var(--mix, transparent);
  transition: box-shadow .3s;
}
.liquid {
  position: absolute; inset: auto 0 0; block-size: 72%;
  background: linear-gradient(oklch(100% 0 0 / .35), transparent 30%), var(--mix, gray);
  border-radius: 40% 60% 0 0 / 12px 16px 0 0;
  transition: background .2s;

  i {
    position: absolute; inset-block-end: 0; inline-size: 14px; aspect-ratio: 1; border-radius: 50%;
    background: oklch(100% 0 0 / .6); animation: bubbleUp 2.4s ease-in infinite;
    &:nth-child(1) { inset-inline-start: 18%; }
    &:nth-child(2) { inset-inline-start: 48%; animation-delay: -.8s; inline-size: 9px; }
    &:nth-child(3) { inset-inline-start: 74%; animation-delay: -1.6s; }
  }
}
@keyframes bubbleUp { to { translate: 0 -130px; opacity: 0; } }

.sliders {
  flex: 1 1 260px;
  label { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-weight: 600; margin-block-end: .9rem; }
  output { inline-size: 2.6rem; text-align: end; font-variant-numeric: tabular-nums; }

  input {
    flex: 1; appearance: none; block-size: 1.1rem; border-radius: 999px;
    background: linear-gradient(90deg, oklch(25% 0.02 300), var(--c));
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--c) 25%, var(--paper));

    &::-webkit-slider-thumb {
      appearance: none; inline-size: 2.1rem; aspect-ratio: 1; border-radius: 50%;
      background: var(--paper); border: 7px solid var(--c);
      box-shadow: 0 4px 0 oklch(0% 0 0 / .18); cursor: grab;
    }
    &::-moz-range-thumb {
      inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%;
      background: var(--paper); border: 7px solid var(--c);
      box-shadow: 0 4px 0 oklch(0% 0 0 / .18); cursor: grab;
    }
  }
}

/* ---------- Flip cards (facts + memory game) ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem; }
.flip {
  position: relative; border: 0; background: none; padding: 0; perspective: 700px;
  transition: scale .5s var(--spring), rotate .5s var(--spring);
  &:hover { scale: 1.05; rotate: -1.5deg; }
  &.flipped .flip-inner { transform: rotateY(180deg); }
}
.flip-inner { position: absolute; inset: 0; transition: transform .7s var(--spring); transform-style: preserve-3d; }
.flip-face {
  position: absolute; inset: 0; display: grid; place-items: center; padding: .7rem;
  border-radius: 24px; backface-visibility: hidden;
}
.flip-front {
  background: radial-gradient(circle at 30% 25%, color-mix(in oklch, var(--c) 55%, white), var(--c) 70%);
  box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 65%, black);
  color: var(--paper); font-size: 3.2rem;
}
.flip-back {
  background: color-mix(in oklch, var(--c) 12%, var(--paper));
  box-shadow: inset 0 0 0 4px var(--c);
  transform: rotateY(180deg);
}
.fact {
  block-size: 180px;
  .flip-back { font-size: .98rem; font-weight: 800; line-height: 1.3; text-wrap: balance; }
}

/* ---------- Games ---------- */
.memory {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-inline-size: 480px; margin: 1rem auto;

  .flip { aspect-ratio: 1; }
  .flip-front {
    background: conic-gradient(from 45deg, var(--pink), var(--purple), var(--blue), var(--purple), var(--pink));
    font-size: 1.8rem;
  }
  .flip-back { font-size: clamp(1.8rem, 8vw, 3rem); }
  .matched .flip-back {
    background: color-mix(in oklch, var(--green) 25%, var(--paper));
    box-shadow: inset 0 0 0 4px var(--green), 0 0 22px var(--green);
  }
}
.arena {
  position: relative; block-size: 360px; overflow: clip; margin-block-start: 1rem;
  border-radius: 26px; user-select: none;
  background: linear-gradient(oklch(88% 0.08 230), oklch(96% 0.04 200));
  box-shadow: inset 0 0 0 4px oklch(100% 0 0 / .7);
}
.arena-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-family: var(--display); font-size: 1.5rem; padding: 1rem; }
.pop-bubble {
  position: absolute; inset-block-end: -80px; inline-size: 72px; aspect-ratio: 1; padding: 0;
  border: 3px solid oklch(100% 0 0 / .9); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, oklch(100% 0 0), oklch(100% 0 0 / .25) 40%, color-mix(in oklch, var(--purple) 35%, transparent));
  box-shadow: inset -6px -8px 14px color-mix(in oklch, var(--pink) 45%, transparent);
  font-size: 2rem;

  span { display: block; transition: scale .18s, opacity .18s; }
  &.popped {
    border-color: transparent; background: none; box-shadow: none;
    span { scale: 2; opacity: 0; }
  }
}

/* ---------- Story Machine ---------- */
.text-input.mini {
  --c: var(--green);
  flex: 1 1 240px; padding: .35rem .9rem; font-size: 1rem; border-width: 3px; border-style: dashed;
  border-color: color-mix(in oklch, var(--c) 60%, var(--paper));
  &:focus { border-style: solid; box-shadow: 0 0 0 5px color-mix(in oklch, var(--c) 30%, transparent); }
}
.story {
  h3 { font-size: 1.5rem; color: color-mix(in oklch, var(--orange) 60%, black); }
  p { margin-block-end: .9em; animation: riseIn .6s ease backwards; }
  p:last-child { margin-block-end: 0; }
  .chapter {
    margin-block: 1.2em .3em; font-family: var(--display); font-weight: 600; font-size: 1rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
  }
}
#story-tools { margin-block-start: 1rem; }
.saved { display: grid; gap: .6rem; }
.saved-row { display: flex; align-items: center; gap: .5rem; .chip { text-align: start; } }
.icon-btn {
  inline-size: 2.4rem; aspect-ratio: 1; flex: none; border: 0; border-radius: 50%; padding: 0;
  background: color-mix(in oklch, var(--red) 15%, var(--paper));
  transition: scale .5s var(--spring);
  &:hover { scale: 1.2; }
}
.word-example { font-style: italic; color: var(--soft); }

/* ---------- Math Zone, quiz and word games ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-block-end: 1.2rem; }
.tile {
  --c: var(--blue);
  display: grid; justify-items: center; gap: .1rem; padding: .8rem .5rem; border: 0; border-radius: 24px;
  background: color-mix(in oklch, var(--c) 16%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 50%, var(--paper)), 0 5px 0 color-mix(in oklch, var(--c) 45%, var(--paper));
  font-family: var(--display); line-height: 1.2;
  transition: translate .5s var(--spring), rotate .5s var(--spring), background .2s;

  &:hover { translate: 0 -4px; rotate: -1.5deg; }
  strong { font-weight: 600; font-size: 1.1rem; }
  small { font-family: var(--body); font-size: .85rem; color: var(--soft); text-wrap: balance; }
  &[aria-pressed="true"] {
    background: var(--c); color: var(--paper); text-shadow: 0 1px 0 oklch(0% 0 0 / .25);
    box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 65%, black);
    small { color: inherit; opacity: .92; }
  }
}
.tile-icon { font-size: 2.2rem; text-shadow: none; }
.tip {
  padding: .7rem 1rem; border-radius: 18px; font-size: 1rem;
  background: color-mix(in oklch, var(--yellow) 30%, var(--paper));
  border-inline-start: 6px solid var(--orange);
}
.play {
  margin-block-start: 1.2rem; padding: clamp(1rem, 3vw, 1.6rem); border-radius: 26px; text-align: center;
  background: color-mix(in oklch, var(--c) 9%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 30%, var(--paper));
}
.lead { margin: 0; font-family: var(--display); font-weight: 600; color: var(--soft); }
.word-problem { max-inline-size: 34em; margin: .6rem auto 0; font-size: 1.25rem; }
.question {
  &.long { font-size: clamp(1.8rem, 6.5vw, 3.2rem); }
  &.text { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 600; }
  .sub { display: block; margin-block-start: .4em; font-size: .55em; color: var(--soft); }
}
.frac {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  margin-inline: .12em; font-size: .72em; line-height: 1.12;
  span:first-child { padding-inline: .22em; border-block-end: .09em solid currentColor; }
}
.slot {
  display: inline-block; min-inline-size: 1.3em; padding: 0 .22em; border-radius: .25em; vertical-align: middle;
  border: .07em dashed var(--purple); color: var(--purple);
  background: color-mix(in oklch, var(--purple) 10%, var(--paper));
  &.filled { border-style: solid; }
  &.right {
    border: .07em solid var(--green); color: color-mix(in oklch, var(--green) 55%, black);
    background: color-mix(in oklch, var(--green) 20%, var(--paper));
    animation: popIn .5s var(--spring);
  }
}
.shape {
  inline-size: 2.6em; vertical-align: middle; overflow: visible;
  path, rect { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
  &.bar { inline-size: min(5.5em, 80%); }
}
.type-row {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  .text-input { flex: 0 1 260px; border-color: var(--purple); font-size: 1.5rem; text-align: center; }
}
.answers .btn .frac { font-size: .8em; }

.letters { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; min-block-size: 3.4rem; margin-block: .8rem; }
.letter {
  --c: var(--blue);
  inline-size: 2.9rem; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px;
  background: var(--c); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase;
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 65%, black);
  transition: scale .4s var(--spring), opacity .2s;
  animation: popIn .4s var(--spring) backwards;
  &:hover { scale: 1.12; }
  &:disabled { opacity: .18; cursor: default; scale: 1; }
}
.letters.built {
  padding: .5rem; border-radius: 18px; border: 3px dashed color-mix(in oklch, var(--purple) 45%, var(--paper));
  .letter { --c: var(--purple); }
  .letter:disabled { --c: var(--green); opacity: 1; }
}

.answers.wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  .btn { font-size: 1.1rem; line-height: 1.25; padding-block: .8rem; text-align: center; }
}
.answers .btn.correct { opacity: 1; outline: 5px solid var(--green); outline-offset: 3px; }
.pads { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* ---------- Game menu and new games ---------- */
#hub-groups h2 { margin-block: 1.6rem .8rem; }
a.tile { text-decoration: none; color: var(--ink); text-align: center; }
.tiles.big { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); .tile { padding-block: 1.1rem; } .tile-icon { font-size: 2.8rem; } }
.game .back { margin-block-end: 1rem; }
.reset-bar { text-align: center; margin-block-start: 1rem; opacity: .85; }

.type-box {
  display: block; inline-size: min(300px, 100%); margin: 1rem auto 0; text-align: center; font-size: 1.3rem;
  border-color: var(--c);
  &.wide { inline-size: 100%; text-align: start; }
}
.pop-bubble.letter-bubble {
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--ink);
}
.arena.sea {
  background:
    radial-gradient(circle at 20% 110%, oklch(80% 0.12 150 / .7) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 112%, oklch(78% 0.13 160 / .7) 0 14%, transparent 15%),
    linear-gradient(oklch(86% 0.08 215), oklch(68% 0.12 245));
}
.fish {
  position: absolute; inset-inline-start: 100%; display: flex; align-items: center; gap: .15rem; white-space: nowrap;
  transition: opacity .3s, scale .3s;
  &.caught { opacity: 0; scale: 1.5; }
  &.aimed .fish-word { box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 oklch(0% 0 0 / .15); }
}
.fish-emoji { font-size: 2.6rem; }
.fish-word {
  padding: .1rem .7rem; border-radius: 999px; background: var(--paper);
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: .03em;
  box-shadow: 0 4px 0 oklch(0% 0 0 / .15);
  b { color: color-mix(in oklch, var(--green) 60%, black); }
}
.sprint-text {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.3rem, 3.6vw, 1.9rem); line-height: 1.7;
  text-align: start; white-space: pre-wrap; cursor: text;
  .ok { color: color-mix(in oklch, var(--green) 55%, black); }
  .bad { background: color-mix(in oklch, var(--red) 35%, var(--paper)); border-radius: 5px; }
  .now { box-shadow: inset 0 -.16em 0 var(--purple); }
}

.lives {
  display: flex; justify-content: center; gap: .35rem; margin-block: .8rem;
  span { inline-size: 1.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--c); transition: opacity .4s, scale .4s var(--spring); }
  .lost { opacity: .15; scale: .7; }
}
.mystery-word {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-block: 1rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 5.5vw, 2.6rem); text-transform: uppercase;
  span { inline-size: 1.15em; block-size: 1.4em; border-block-end: .12em solid var(--ink); text-align: center; line-height: 1.3; }
  .missed { color: var(--red); }
}
.keys {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; max-inline-size: 560px; margin: 1rem auto 0;
  .letter { inline-size: 2.5rem; font-size: 1.25rem; animation: none; }
  .letter.hit { --c: var(--green); opacity: 1; }
  .letter.miss { --c: oklch(75% 0 0); opacity: .5; }
}

/* The board is a fixed square and its squares share the space, so nothing can spill out of it. */
.board { display: grid; grid-auto-rows: 1fr; gap: 8px; aspect-ratio: 1; max-inline-size: 360px; margin: 1rem auto 1.4rem; }
.cell {
  --c: var(--blue);
  min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: 18px; background: var(--paper);
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 45%, var(--paper)), 0 4px 0 color-mix(in oklch, var(--c) 35%, var(--paper));
  font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 8vw, 2.8rem); color: var(--ink);
  transition: scale .4s var(--spring);
  &:not(:disabled):hover { scale: 1.06; }
  &.win { background: color-mix(in oklch, var(--green) 30%, var(--paper)); box-shadow: inset 0 0 0 4px var(--green); }
}
.slide .cell {
  background: var(--c); color: var(--paper); text-shadow: 0 1px 0 oklch(0% 0 0 / .3);
  box-shadow: 0 5px 0 color-mix(in oklch, var(--c) 65%, black);
  &.blank { visibility: hidden; }
  &.win { background: var(--green); box-shadow: 0 5px 0 color-mix(in oklch, var(--green) 65%, black); }
}
.sudoku {
  gap: 5px; max-inline-size: 400px;
  .cell { border-radius: 10px; font-size: clamp(1.2rem, 5vw, 1.7rem); color: var(--purple); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--blue) 35%, var(--paper)); }
  .alt { background: color-mix(in oklch, var(--yellow) 30%, var(--paper)); box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--orange) 40%, var(--paper)); }
  .given { color: var(--ink); }
  .sel { outline: 4px solid var(--purple); outline-offset: 1px; z-index: 1; }
  .bad { background: color-mix(in oklch, var(--red) 30%, var(--paper)); color: color-mix(in oklch, var(--red) 60%, black); }
  .win { background: color-mix(in oklch, var(--green) 30%, var(--paper)); }
}

/* ---------- Synth, recorder and metronome ---------- */
.key.black {
  position: absolute; inset-block-start: 0; z-index: 2; flex: none;
  inline-size: 6.4%; block-size: 58%; translate: -50% 0; padding-block-end: .5rem;
  border-radius: 0 0 12px 12px; font-size: .85rem;
  background: linear-gradient(oklch(40% 0.06 300), oklch(22% 0.05 300));
  box-shadow: 0 6px 0 oklch(12% 0.03 300), inset 0 2px 0 oklch(100% 0 0 / .25);
  small { font-size: .7rem; }
  &.playing { translate: -50% 5px; box-shadow: 0 1px 0 oklch(12% 0.03 300); filter: brightness(1.6); }
}
.key { padding-inline: 0; min-inline-size: 0; }
.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; margin-block-start: 1.6rem; }
.studio-box {
  padding: 1rem 1.1rem; border-radius: 24px;
  background: color-mix(in oklch, var(--c) 9%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 30%, var(--paper));
  .score { margin-block: .6rem 0; font-size: 1.05rem; }
  .hint { margin-block: .5rem 0; }
  .btn:disabled { opacity: .4; cursor: default; }
}
.rec-bar {
  block-size: .8rem; margin-block-start: .9rem; border-radius: 999px; overflow: clip;
  background: color-mix(in oklch, var(--red) 15%, var(--paper));
  i { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--red); transition: inline-size .1s linear; }
}
.btn.live { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { scale: 1.08; filter: brightness(1.2); } }
.beats {
  display: flex; gap: .6rem; margin-block-end: .8rem;
  i { inline-size: 1.6rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklch, var(--c) 22%, var(--paper)); transition: scale .25s var(--spring); }
  i.on { background: var(--c); scale: 1.35; box-shadow: 0 0 14px var(--c); }
  i:first-child.on { background: var(--pink); box-shadow: 0 0 14px var(--pink); }
}
.check { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--display); font-weight: 600; cursor: pointer; input { inline-size: 1.3rem; block-size: 1.3rem; } }
.sliders.speed { flex: none; max-inline-size: 420px; margin-block-end: .8rem; }

/* ---------- Arcade ---------- */
.arcade-screen {
  display: block; inline-size: 100%; margin: 1rem auto 0; border-radius: 22px; touch-action: none; user-select: none;
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--c) 55%, var(--paper)), 0 10px 0 color-mix(in oklch, var(--c) 45%, transparent);
}
.arcade-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block-start: 1.4rem; }
.pad-btn {
  min-inline-size: 4rem; block-size: 4rem; padding-inline: 1rem; border: 0; border-radius: 22px;
  background: color-mix(in oklch, var(--c) 22%, var(--paper));
  box-shadow: 0 6px 0 color-mix(in oklch, var(--c) 55%, var(--paper));
  font-family: var(--display); font-weight: 600; font-size: 1.5rem; touch-action: none; user-select: none;
  &:active { translate: 0 5px; box-shadow: 0 1px 0 color-mix(in oklch, var(--c) 55%, var(--paper)); }
}

/* ---------- Profile and leaderboard ---------- */
.who {
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap; max-inline-size: 11rem; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in oklch, var(--blue) 20%, var(--paper));
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: none;
  transition: scale .5s var(--spring);
  &:hover { scale: 1.08; }
}
.score-table h3, #boards h3 { margin-block: 1.4rem .5rem; font-size: 1.25rem; }
.score-row {
  display: grid; grid-template-columns: 1fr auto 7.5rem; align-items: center; gap: .8rem; padding: .45rem .8rem; border-radius: 14px;
  font-family: var(--display);
  &:nth-child(odd) { background: color-mix(in oklch, var(--purple) 8%, var(--paper)); }
  .score-place { text-align: end; color: var(--soft); font-size: .95rem; }
}
.champions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: .5rem; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; }
.board-card {
  --c: var(--blue);
  padding: .8rem 1rem; border-radius: 22px;
  background: color-mix(in oklch, var(--c) 10%, var(--paper));
  box-shadow: inset 0 0 0 3px color-mix(in oklch, var(--c) 40%, var(--paper));
  h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.1rem; }
  ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
  li { display: flex; justify-content: space-between; gap: .6rem; padding: .15rem .5rem; border-radius: 10px; font-family: var(--display); }
  li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  li.me { background: var(--yellow); }
  .hint { margin: .4rem 0 0; font-size: .85rem; }
}
#board-refresh { margin-block-start: 1.2rem; }

/* ---------- "Are you sure?" screen ---------- */
.ask {
  inline-size: min(460px, calc(100% - 32px)); padding: 0; border: 6px solid var(--red); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 20px 60px oklch(30% 0.1 300 / .45);
  animation: popIn .4s var(--spring);
  &::backdrop { background: oklch(30% 0.1 300 / .55); backdrop-filter: blur(4px); }
  form { display: grid; gap: .9rem; padding: 1.4rem; }
  h2 { margin: 0; color: color-mix(in oklch, var(--red) 70%, black); }
  p { margin: 0; font-size: 1.15rem; }
  label { display: grid; gap: .4rem; font-family: var(--display); font-weight: 600; }
  .row { justify-content: space-between; margin-block-start: .4rem; }
  .btn:disabled { opacity: .35; cursor: default; }
}

/* ---------- Reminder boxes ---------- */
.notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem;
  margin-block: 1rem; padding: .9rem 1.1rem; border-radius: 20px;
  background: color-mix(in oklch, var(--yellow) 35%, var(--paper));
  box-shadow: inset 0 0 0 3px var(--orange);
  p { flex: 1 1 280px; margin: 0; }
}

.link-btn {
  border: 0; background: none; padding: .3rem .2rem; font-family: var(--display); font-weight: 600;
  color: color-mix(in oklch, var(--blue) 70%, black); text-decoration: underline; text-underline-offset: .2em;
}

select.text-input { appearance: auto; font-family: var(--display); font-weight: 500; cursor: pointer; }

.admin-list { display: grid; gap: .5rem; }
.admin-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .5rem .8rem; border-radius: 16px;
  background: color-mix(in oklch, var(--red) 7%, var(--paper));
  strong { font-family: var(--display); font-weight: 600; }
  .hint { margin: 0 auto 0 0; }
}

/* ---------- Page-to-page transitions ---------- */
@keyframes pageOut { to { opacity: 0; scale: .96; translate: 0 -20px; } }
@keyframes pageIn { from { opacity: 0; scale: .96; translate: 0 30px; } }
::view-transition-old(root) { animation: pageOut .25s ease-in both; }
::view-transition-new(root) { animation: pageIn .5s var(--spring) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}