/*
  Styles for the public pages only. The game has its own CSS and never
  loads this file, so nothing here can slow a round down or break a game.
*/

/*
  The two typefaces, served from this domain.

  Google's stylesheet blocked the first paint for 780ms: the browser had to
  fetch fonts.googleapis.com, read it, then open a second connection to
  fonts.gstatic.com. These are the same variable files, one hop closer, and
  they also keep the visitor's address off a third-party server.

  latin-ext carries the Polish letters. The unicode-range keeps it out of the
  way until a page actually needs one.
*/

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


:root {
  --paper: #fff8ec;
  --card: #ffffff;
  --ink: #23201c;
  --ink-soft: #5d554b;
  --line: 3px solid var(--ink);
  --line-thin: 2px solid var(--ink);
  --lift: 0 6px 0 var(--ink);
  --lift-sm: 0 4px 0 var(--ink);
  --radius: 18px;
  --radius-lg: 28px;

  --write: #ff8c42;
  --english: #3aa0ff;
  --maths: #38c172;
  --star: #ffb703;
  --polish: #e4495c;
  --world: #14b8a6;
  --logic: #64748b;
  --science: #84cc16;
  --reading: #a855f7;
  --arts: #ec4899;

  --font-display: 'Fredoka', 'Trebuchet MS', Verdana, system-ui, sans-serif;
  --font-body: 'Nunito', Verdana, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 8% 2%, rgba(255, 140, 66, 0.2), transparent 34%),
    radial-gradient(circle at 94% 4%, rgba(58, 160, 255, 0.2), transparent 32%),
    radial-gradient(circle at 78% 92%, rgba(56, 193, 114, 0.18), transparent 36%),
    radial-gradient(circle at 12% 88%, rgba(255, 183, 3, 0.16), transparent 34%);
  background-attachment: fixed;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
}

h3 {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.45rem);
}

p,
li {
  max-width: 62ch;
}

a {
  color: #0b62c4;
  text-underline-offset: 3px;
}

.wrap {
  width: min(1080px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ─── header ─── */

/* Logo, then the links, then the two things a thumb always needs:
   "Play now" and, under 860px, the menu button. */
.site-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem 2.4rem;
  padding-block: 1.4rem;
  flex-wrap: wrap;
}

/* A whisper of the four colours, fading out at both ends. It closes the bar
   without drawing a box around it. */
.site-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  opacity: 0.45;
  background: linear-gradient(
    90deg,
    transparent,
    var(--write) 18%,
    var(--english) 42%,
    var(--maths) 66%,
    var(--star) 86%,
    transparent
  );
}

/* The open menu already sits in its own card; a line under it would box it
   in twice. */
.site-head.is-open::after {
  opacity: 0;
}

.site-head .site-nav {
  margin-left: auto;
}

.site-head__end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* The wordmark alone does not say what the site is. One quiet line does.
   The line starts under the "s" of smarties, not under the sweets: in the
   520x120 artwork the word begins at x=140, which is 1.167 of the height. */
.logo {
  --logo-h: 50px;
  display: block;
  text-decoration: none;
}

/* The wordmark is drawn here, not loaded as an image. An SVG fetched through
   <img> runs in secure static mode: it cannot reach a font, so the word came
   out in Verdana on every page. Inline, it uses the page's Fredoka. */
.logo__mark {
  height: var(--logo-h);
  width: auto;
  display: block;
}

.logo__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 92px;
  letter-spacing: -0.02em;
  fill: var(--ink);
}

.logo__sweet {
  stroke: var(--ink);
  stroke-width: 5;
}

/* textLength holds this to the width of the word above it, so the two lines
   stay the same length whatever the logo is scaled to. */
.logo__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  fill: #8d8478;
}

.site-nav {
  display: flex;
  gap: 0.5rem 1.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45rem 0;
  white-space: nowrap;
}

/* Each subject carries its own colour in the header, the same one the card
   and the game use. It turns a grey word list into a map. */
.site-nav a::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--dot, var(--star));
  flex-shrink: 0;
}

.site-nav .btn::before {
  content: none;
}

/* ─── the menu button ─── */

/* Three bars that become a cross. Hidden on wide screens, where the links
   are already on the bar. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 52px;
  height: 52px;
  padding: 0 13px;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 160ms ease,
    opacity 120ms ease;
}

.site-head.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.site-head.is-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.site-head.is-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-maths { --dot: var(--maths); }
.nav-english { --dot: var(--english); }
.nav-writing { --dot: var(--write); }
.nav-logic { --dot: var(--logic); }
.nav-parents { --dot: var(--polish); }

.site-nav a:hover {
  text-decoration: underline;
}

/* Buttons need air. A word that touches its own border reads as a mistake. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 58px;
  padding: 0.7rem 1.8rem;
  line-height: 1.2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.btn--play {
  background: var(--star);
  font-size: 1.2rem;
  min-height: 68px;
  padding-inline: 2.2rem;
}

/* The header button sits beside text links, so it stays a size smaller. */
.site-nav .btn {
  min-height: 52px;
  padding: 0.55rem 1.5rem;
  font-size: 1.02rem;
}

/* The hero headline gets the game's highlighter treatment. */
.mark {
  display: inline-block;
  padding: 0.05em 0.35em;
  background: var(--star);
  border: var(--line);
  border-radius: 16px;
  box-shadow: var(--lift-sm);
  transform: rotate(-2deg);
}

/* ─── hero ─── */

/* Text on the left, a real screenshot of the game on the right. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  padding-block: clamp(2rem, 1.2rem + 4vw, 4rem);
}

.hero__text {
  display: grid;
  gap: 1.4rem;
}

.hero h1 {
  max-width: 14ch;
}

.hero p.lead {
  max-width: 44ch;
}

/* <picture> carries the layout, not the <img>.
   display:contents looked tidier and was wrong: <source> has no display rule
   of its own, so a grid blockifies it into a real item. It took the second
   column and pushed the picture onto a second row under the text. */
.hero picture {
  justify-self: center;
  width: min(100%, 560px);
  max-width: 100%;
}

.hero__shot {
  display: block;
  width: 100%;
  height: auto;
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  transform: rotate(-1.5deg);
  background: var(--card);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    padding-block: 1.5rem 2.5rem;
  }

  .hero picture {
    width: min(100%, 520px);
  }
}

/* The picture keeps the page gutter on a phone. Run to the edges and the
   frame loses its corners and reads as a mistake. */
@media (max-width: 560px) {
  .hero picture {
    width: 100%;
  }

  .hero__shot {
    border-radius: var(--radius);
    /* A rotated near-full-width box overflows sideways and adds a scrollbar. */
    transform: none;
  }
}

.hero p.lead {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.hero__note {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ─── blocks ─── */

section {
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

section + section {
  border-top: 2px dashed rgba(35, 32, 28, 0.12);
}

/* A section that closes with the sweet rule has already drawn its line. */
section:has(.sweet-rule) + section {
  border-top: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 1.6rem;
  margin-top: 2.2rem;
}

.card {
  padding: 1.9rem 1.7rem;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-sm);
  display: grid;
  gap: 0.75rem;
  align-content: start;
  color: inherit;
  text-decoration: none;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.card__icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.2rem;
}

.card h3 {
  margin: 0;
}

.card p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.card--link:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--lift);
}

/* Cards sit slightly askew, like the tiles in the game. */
.grid .card:nth-child(odd) {
  transform: rotate(-0.8deg);
}

.grid .card:nth-child(even) {
  transform: rotate(0.8deg);
}

/* A wash of the subject's own colour, so the row is not six white boxes. */

.tag {
  justify-self: start;
  margin-top: 0.3rem;
  padding: 0.25rem 0.85rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  background: #f4efe4;
  border: var(--line-thin);
  border-radius: 999px;
}

h2 + p,
h3 + p {
  margin-top: 0.9rem;
}

.prose > * + * {
  margin-top: 1.15rem;
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
  display: grid;
  gap: 0.4rem;
}

.faq {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.faq details {
  padding: 1.1rem 1.4rem;
  background: var(--card);
  border: var(--line-thin);
  border-radius: var(--radius);
}

.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
}

.faq p {
  margin-top: 0.6rem;
}

.callout {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding: clamp(1.8rem, 1.2rem + 3vw, 3rem);
  background: linear-gradient(140deg, #fff7e3 0%, #ffe9a8 100%);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
}

.callout p {
  max-width: 46ch;
}

/* Four sweets from the logo on a dashed line, closing a block of cards.
   A plain <hr> would have been a grey line; this one belongs to the brand. */
.sweet-rule {
  border: 0;
  margin: 2.6rem 0 0;
  height: 18px;
  background:
    radial-gradient(circle 9px at calc(50% - 30px) 50%, #ff8c42 0 6.5px, var(--ink) 6.5px 8.5px, transparent 8.5px),
    radial-gradient(circle 9px at calc(50% - 10px) 50%, #3aa0ff 0 6.5px, var(--ink) 6.5px 8.5px, transparent 8.5px),
    radial-gradient(circle 9px at calc(50% + 10px) 50%, #38c172 0 6.5px, var(--ink) 6.5px 8.5px, transparent 8.5px),
    radial-gradient(circle 9px at calc(50% + 30px) 50%, #ffb703 0 6.5px, var(--ink) 6.5px 8.5px, transparent 8.5px),
    linear-gradient(rgba(35, 32, 28, 0.16) 0 0) left center / calc(50% - 46px) 2px no-repeat,
    linear-gradient(rgba(35, 32, 28, 0.16) 0 0) right center / calc(50% - 46px) 2px no-repeat;
}

/* The row of sweets from the logo, used as a divider. */
.sweets {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  padding-block: 0.5rem;
}

.sweets span {
  width: 18px;
  height: 18px;
  border: var(--line-thin);
  border-radius: 50%;
}

/* ─── footer ─── */

/*
  The footer is the last thing on every page, so it is built as an ending
  rather than as a leftover. One centred column: what this is, every subject,
  the rest of the site, and the small print.

  It was three ragged columns before. Three columns put the long paragraph
  hard against the left edge and left the third column half empty, which read
  as a table that had come apart rather than as a design. A single centred
  column has one axis, and everything sits on it.
*/

.site-foot {
  margin-top: 3.5rem;
  padding-block: 3rem 2.4rem;
  border-top: var(--line);
  background: linear-gradient(180deg, #fff3dc, #ffe7c2);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.foot-inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.foot-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 46ch;
}

.foot-lead {
  max-width: 68ch;
  line-height: 1.6;
  margin: 0;
}

/* Every subject on every page. Nine chips wrap into two or three rows and
   stay centred, which is the shape the nine cards on the home page already
   have — the footer repeats it small rather than inventing a new one. */
.foot-subjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 44rem;
}

.foot-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem 0.42rem 0.5rem;
  border: var(--line-thin);
  border-radius: 999px;
  background: linear-gradient(160deg, #fff 58%, color-mix(in oklab, var(--tint, var(--star)) 28%, #fff));
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 140ms var(--ease, ease), box-shadow 140ms ease;
}

.foot-chip:hover,
.foot-chip:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--ink);
}

.foot-chip:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}

.foot-chip__icon {
  font-size: 1rem;
  line-height: 1;
}

/* The count is a fact, not a label: small, quiet, and pinned to the chip. */
.foot-count {
  min-width: 1.5rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(35, 32, 28, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.9rem;
  font-family: var(--font-display);
}

.foot-links a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

.foot-links a:hover,
.foot-links a:focus-visible {
  border-bottom-color: var(--ink);
}

/* A separating dot between the links, drawn rather than typed, so it is not
   read out and cannot be selected with the text.

   It trails the link rather than leading the next one. The row wraps on a
   phone, and a dot that leads the next link starts the second line with a
   floating dot; one that trails the previous link ends a line instead, where
   nobody sees it. */
.foot-links a:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 0.9rem;
  border-radius: 50%;
  background: rgba(35, 32, 28, 0.3);
  vertical-align: 0.2em;
}

/* Below this the row wraps whatever is done to it, and a dot left hanging at
   the end of a line is worse than no dot at all. The gap separates them. */
@media (max-width: 700px) {
  .foot-links {
    gap: 0.5rem 1.2rem;
  }

  .foot-links a:not(:last-child)::after {
    content: none;
  }
}

.foot-note {
  max-width: 74ch;
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.6;
  opacity: 0.8;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8rem 1.2rem;
  width: 100%;
  margin-top: 0.4rem;
  padding-top: 1.4rem;
  border-top: 2px dashed rgba(35, 32, 28, 0.16);
}

.foot-bottom .lang-switch {
  margin-left: 0;
  font-size: 0.9rem;
}

.foot-bottom .lang-switch::after {
  content: none;
}

address {
  font-style: normal;
}

/* Five links, a language switch, a logo and a button stop fitting on one bar
   at about 1160px — and they are cramped for a while before that. The links
   fold into the menu; "Play now" never does. */
@media (max-width: 1160px) {
  .nav-toggle {
    display: flex;
  }

  .site-head__end {
    margin-left: auto;
  }

  .site-head .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    display: none;
  }

  .site-head.is-open .site-nav {
    display: grid;
    gap: 0;
    padding: 0.4rem 0.4rem 0.6rem;
    background: var(--card);
    border: var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--lift-sm);
  }

  /* Full-width rows, so the whole line is the target, not the word. */
  .site-head.is-open .site-nav a {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    font-size: 1.15rem;
  }

  .site-head.is-open .site-nav a:hover,
  .site-head.is-open .site-nav a:focus-visible {
    background: var(--paper);
    text-decoration: none;
  }

  .site-head.is-open .site-nav a + a {
    border-top: 2px dashed rgba(35, 32, 28, 0.12);
  }

  .site-head .btn--play {
    min-height: 52px;
    padding-inline: 1.3rem;
    font-size: 1.05rem;
  }
}

@media (max-width: 720px) {
  .site-head {
    padding-block: 1rem;
    gap: 0.9rem;
  }

  .site-nav {
    gap: 0.6rem 1.1rem;
    font-size: 1rem;
  }

  .hero__actions .btn,
  .callout .btn {
    width: 100%;
  }

  .logo {
    --logo-h: 41px;
  }

}

/* At phone width the bar carries the logo, "Play now" and the menu button on
   one row. The age range is the first thing to go. */
@media (max-width: 560px) {
  /* The wordmark is 520x120, so every pixel of height costs 4.3 of width.
     At 33px the logo, the button and the menu still share one row at 390px. */
  .logo {
    --logo-h: 36px;
  }


  .site-head {
    gap: 0.6rem;
  }

  .site-head__end {
    gap: 0.5rem;
  }

  .site-head .btn--play {
    min-height: 48px;
    padding-inline: 0.95rem;
    font-size: 0.98rem;
  }

  .nav-toggle {
    width: 48px;
    height: 48px;
    padding: 0 11px;
  }
}

/* 360px — the narrowest phone still in use. The logo, the button and the menu
   have to share 305px of content width, so every part gives up a few pixels. */
@media (max-width: 400px) {
  .site-head {
    gap: 0.5rem;
  }

  .logo {
    --logo-h: 33px;
  }

  .site-head__end {
    gap: 0.4rem;
  }

  .site-head .btn--play {
    padding-inline: 0.75rem;
    font-size: 0.9rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ─────────── Subpages ─────────── */

/* The page header: the section, the title at a readable width, the
   description as a standfirst. It also carries the subject's own colour, so
   a guide and a games page do not open with the same grey slab. */
.page-head {
  position: relative;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.6rem) clamp(1.4rem, 1rem + 2vw, 2.6rem);
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-sm);
  overflow: hidden;
}

/* A wash of the section's colour across the top edge. */
.page-head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--tone, var(--star));
}

.page-head--maths { --tone: var(--maths); }
.page-head--english { --tone: var(--english); }
.page-head--writing { --tone: var(--write); }
.page-head--logic { --tone: var(--logic); }
.page-head--world { --tone: var(--world); }
.page-head--polish { --tone: var(--polish); }
.page-head--parents { --tone: #8b5cf6; }
.page-head--star { --tone: var(--star); }

.page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  background: color-mix(in oklab, var(--tone, var(--star)) 26%, white);
  border: var(--line-thin);
  border-radius: 999px;
}

.page-head h1 {
  max-width: 18ch;
}

.page-head__lead {
  margin-top: 1rem;
  max-width: 54ch;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Prose on the left, a way forward on the right. */
.page-body {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  padding-block: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem) clamp(2rem, 1.4rem + 2vw, 3.25rem);
}

@media (min-width: 900px) {
  .page-body {
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items: start;
  }

  .page-aside {
    position: sticky;
    top: 1.5rem;
  }
}

.prose h2 {
  margin-top: 2.2rem;
  padding-left: 0.85rem;
  border-left: 6px solid var(--tone, var(--star));
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose li strong {
  color: var(--ink);
}

.prose__play {
  margin-top: 2.4rem;
}

.page-aside {
  display: grid;
  gap: 1.2rem;
}

.page-cta {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  transform: rotate(-1deg);
}

.page-cta--maths { background: linear-gradient(160deg, #fff 55%, rgba(56, 193, 114, 0.26)); }
.page-cta--english { background: linear-gradient(160deg, #fff 55%, rgba(58, 160, 255, 0.26)); }
.page-cta--writing { background: linear-gradient(160deg, #fff 55%, rgba(255, 140, 66, 0.26)); }
.page-cta--logic { background: linear-gradient(160deg, #fff 55%, rgba(47, 128, 237, 0.24)); }
.page-cta--world { background: linear-gradient(160deg, #fff 55%, rgba(20, 184, 166, 0.26)); }
.page-cta--polish { background: linear-gradient(160deg, #fff 55%, rgba(228, 73, 92, 0.24)); }
.page-cta--parents { background: linear-gradient(160deg, #fff 55%, rgba(139, 92, 246, 0.22)); }
.page-cta--star { background: linear-gradient(160deg, #fff 55%, rgba(255, 183, 3, 0.3)); }

.page-cta__icon {
  font-size: 2.4rem;
  line-height: 1;
}

.page-cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}

.page-cta__note {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.page-cta .btn {
  margin-top: 0.7rem;
}

.page-more {
  display: grid;
  gap: 0;
  padding: 0.4rem 0.5rem 0.6rem;
  background: var(--card);
  border: var(--line-thin);
  border-radius: var(--radius-lg);
}

.page-more__title {
  padding: 0.6rem 0.75rem 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.page-more__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius);
}

.page-more__link + .page-more__link {
  border-top: 2px dashed rgba(35, 32, 28, 0.1);
}

.page-more__link:hover {
  background: var(--paper);
}

/* ─────────── The games on a subject page ─────────── */

/* They were a bulleted list. A page about games should show the games. */
.page-games {
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.page-games__title {
  margin-bottom: 1.4rem;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}

.game-card {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  min-height: 170px;
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-sm);
  transition: transform 140ms ease;
}

.game-card:nth-child(odd) { transform: rotate(-0.6deg); }
.game-card:nth-child(even) { transform: rotate(0.6deg); }

.game-card__icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.35rem;
}

.game-card__name {
  font-size: 1.25rem;
}

.game-card__note {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}


/* The levels note is a finished card, not a stray line with a bar. */
.page-games__levels {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.4rem;
  padding: 1.15rem 1.4rem 1.2rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(140deg, #fff7e3 0%, #ffeaa8 100%);
  border: var(--line-thin);
  border-radius: var(--radius-lg);
  max-width: none;
}

.page-games__levels::before {
  content: '🎚️';
  font-size: 1.5rem;
  line-height: 1.2;
  flex-shrink: 0;
}

/* The prose was set at the same size as everything else and ran tight. */
.prose {
  font-size: 1.08rem;
  line-height: 1.65;
}

.prose .lead {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
}

.prose > * + * {
  margin-top: 1.25rem;
}

.prose h2 + p {
  margin-top: 1rem;
}

.page-more__name {
  flex: 1;
}

.page-more__count {
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: var(--line-thin);
  border-radius: 999px;
}


/* One hue per subject, used by the landing cards and the game cards alike. */
.card--writing, .game-card--write, .foot-chip--writing { --tint: var(--write); }
.card--english, .game-card--english, .foot-chip--english { --tint: var(--english); }
.card--maths, .game-card--maths, .foot-chip--maths { --tint: var(--maths); }
.card--polish, .game-card--polish, .foot-chip--polish { --tint: var(--polish); }
.card--world, .game-card--world, .foot-chip--world { --tint: var(--world); }
.card--logic, .game-card--logic, .foot-chip--logic { --tint: var(--logic); }
.card--science, .game-card--science, .foot-chip--science { --tint: var(--science); }
.card--reading, .game-card--reading, .foot-chip--reading { --tint: var(--reading); }
.card--arts, .game-card--arts, .foot-chip--arts { --tint: var(--arts); }

.card--link,
.game-card {
  background: linear-gradient(160deg, #fff 56%, color-mix(in oklab, var(--tint, var(--star)) 30%, #fff));
}

.page-cta--maths { --tint: var(--maths); }
.page-cta--english { --tint: var(--english); }
.page-cta--writing { --tint: var(--write); }
.page-cta--logic { --tint: var(--logic); }
.page-cta--world { --tint: var(--world); }
.page-cta--polish { --tint: var(--polish); }
.page-cta--science { --tint: var(--science); }
.page-cta--reading { --tint: var(--reading); }
.page-cta--arts { --tint: var(--arts); }
.page-cta--parents { --tint: #8b5cf6; }
.page-cta--star { --tint: var(--star); }

.page-cta {
  background: linear-gradient(160deg, #fff 52%, color-mix(in oklab, var(--tint, var(--star)) 34%, #fff));
}

.page-head--science { --tone: var(--science); }
.page-head--reading { --tone: var(--reading); }
.page-head--arts { --tone: var(--arts); }
.nav-science { --dot: var(--science); }
.nav-reading { --dot: var(--reading); }
.nav-arts { --dot: var(--arts); }

/* ─────────── The language switch ─────────── */

/* It sits at the end of the nav, marked as a language rather than another
   subject, because it is not one. */
/* It is not a subject, so it does not sit in the run of subjects. The space
   on its left and the divider before it say that, and without them it read
   as another link that had been squeezed. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 40px;
  margin-left: 0.9rem;
  padding: 0.35rem 1.05rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: var(--line-thin);
  border-radius: 999px;
}

/* A hairline between the subjects and the switch.
   The padding is repeated here on purpose: `.site-nav a` sets
   `padding: 0.45rem 0` and is more specific than `.lang-switch`, so without
   this the pill had no horizontal padding at all and the word ran out
   through its own border. */
.site-nav .lang-switch {
  position: relative;
  padding: 0.35rem 1.05rem;
}

.site-nav .lang-switch::after {
  content: '';
  position: absolute;
  left: -0.9rem;
  top: 50%;
  width: 2px;
  height: 22px;
  transform: translateY(-50%);
  background: rgba(35, 32, 28, 0.16);
  border-radius: 2px;
}

/* The nav gives every link a coloured dot. The switch is not a subject, so
   it gets no dot — it carries a globe of its own in the markup. */
.site-nav .lang-switch::before {
  content: none;
}

.lang-switch__globe {
  font-size: 1.1rem;
  line-height: 1;
}

.lang-switch:hover {
  background: var(--paper);
  text-decoration: none;
}

/* Inside the open menu it is a full row like every other link. */
.site-head.is-open .site-nav .lang-switch {
  justify-content: flex-start;
  margin-left: 0;
  padding: 0.85rem 1rem;
  font-size: 1.15rem;
  border: 0;
  border-radius: var(--radius);
}

.site-head.is-open .site-nav .lang-switch::after {
  content: none;
}

/* The English name of a game, under the Polish one: the screen says the
   English name, so the page that sent a parent there shows both. */
.game-card__en {
  margin-top: -0.2rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ─────────── Cookie consent ─────────── */

/* Fixed to the bottom, so it can never move the page it is asking about.
   Built by script only when there is a question to ask, so a visitor who has
   already answered gets no markup and no layout to shift. */
.consent {
  position: fixed;
  left: 50%;
  bottom: clamp(0.75rem, 0.4rem + 1.5vw, 1.5rem);
  transform: translateX(-50%);
  z-index: 60;
  width: min(560px, 100% - 1.5rem);
  display: grid;
  gap: 0.5rem;
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--card);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 0 var(--ink), 0 20px 40px rgba(35, 32, 28, 0.25);
  animation: consent-in 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes consent-in {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

.consent__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

.consent__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: none;
}

.consent__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

/* Both buttons are the same size and the same weight. A decline hidden
   behind a link is a dark pattern, and this is a site for parents. */
.consent__btn {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: 1rem;
  padding-inline: 1.1rem;
}

.consent__btn--yes {
  background: var(--star);
}

.consent__state {
  font-family: var(--font-display);
  font-weight: 600;
}

#cookie-choice {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--card);
  border: var(--line-thin);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .consent {
    animation: none;
  }
}