@font-face {
  font-family: 'Lilita One';
  src: url('/assets/lilita-one-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/barlow-condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/dm-sans-700.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Japanese';
  src: url('/assets/noto-sans-jp.woff2') format('woff2');
  font-display: swap;
}
/* The comic fonts load only on pages that use them. */
@font-face {
  font-family: 'Kero Comic';
  src: url('/assets/fonts/comic-neue-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Comic';
  src: url('/assets/fonts/comic-neue-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Kero Impact';
  src: url('/assets/fonts/bangers-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #392c20;
  --paper: #fffaf0;
  --yellow: #f6c747;
  --butter: #ffe6a3;
  --red: #b6382b;
  --blue: #8bd1d6;
  --muted: #685844;
  --line: #d8c9a9;
  --heading: 'Lilita One', sans-serif;
  --body: 'DM Sans', sans-serif;
  --page: 1380px;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 var(--body);
}
a {
  color: inherit;
  text-decoration: none;
}
button,
select {
  font: inherit;
  color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
h2 {
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  margin-bottom: 24px;
}
h3 {
  font-size: 2rem;
}
h1 em,
h2 em {
  font-style: normal;
  color: var(--red);
}
p {
  margin-bottom: 18px;
}
a,
summary,
select,
button {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
summary:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 5px;
}
a:hover .link-label,
.text-link:hover,
.quiet-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.nowrap {
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: var(--ink);
  color: white;
  padding: 14px 20px;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: none;
}
.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: 80px 6%;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-heading h2 {
  margin: 0;
}
.section-heading h2 > span {
  color: var(--red);
}
.eyebrow {
  display: block;
  font: 700 0.8125rem/1.5 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  max-width: 100%;
  padding: 15px 24px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 18px 21px 17px 23px;
  box-shadow: 0 4px 0 var(--ink);
  font-weight: 700;
  line-height: 1.4;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.button:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 7px 0 var(--ink);
}
/* A button that lifts when hovered keeps a strip of its old place under it while it is up, so a
   pointer resting on its bottom edge never makes it flicker up and down (a Start button that
   appears under a still mouse did, every frame). No specificity, so a button placed by its own
   class keeps its place. */
:where(.button:hover, .drawing-button:not(:disabled):hover) {
  position: relative;
}
:where(.button:hover, .drawing-button:not(:disabled):hover)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 4px;
}
.button.white {
  background: var(--paper);
}
.button span {
  flex-shrink: 0;
}
.watch-button {
  background: var(--red);
  color: white;
}
.play-icon {
  font-size: 0.875rem;
}
/* TikTok's note (src/components/channel-marks.ts), white on an ink circle, the size of the
   YouTube play circle beside it. */
.tiktok-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
}
.tiktok-icon svg {
  display: block;
  width: 17px;
  height: 17px;
}
.quiet-link {
  display: block;
  width: fit-content;
  padding: 14px 0 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  min-height: 44px;
}
.text-link,
.link-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  min-height: 44px;
}
.page-intro {
  padding-top: 52px;
  padding-bottom: 28px;
}
.page-intro h1 {
  margin: 0 0 18px;
}
.page-intro > p {
  max-width: 560px;
}
.site-header {
  max-width: var(--page);
  margin: 0 auto;
  padding: 22px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-frog {
  width: 54px;
  height: 56px;
  position: relative;
}
.brand-frog img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-8deg);
}
.brand-name {
  font: 400 2.15rem/0.9 var(--heading);
  letter-spacing: -0.025em;
}
.brand-name small {
  display: block;
  font: 700 0.625rem/1.5 var(--body);
  letter-spacing: 0.055em;
  margin-top: 5px;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 700;
}
.site-header nav > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
}
.site-header nav > a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}
/* The way into learning stands out: Learn comes first, as a butter pill. */
.site-header nav > a.nav-learn {
  padding: 0 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.site-header nav > a.nav-learn:hover {
  background: var(--yellow);
}
/* The red Watch tab (src/render/layout.ts): the site's own /watch/ page, so no outside-link
   arrow. On /watch/ it is the current page: underlined like the menu, with an ink ring. */
.watch-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 19px 0 12px;
  flex-shrink: 0;
  border-radius: 30px;
  color: white;
  background: var(--red);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.watch-tab:hover {
  background: var(--ink);
}
.watch-tab[aria-current] {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.watch-tab-icon {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: white;
  color: var(--red);
}
.watch-tab-icon svg {
  display: block;
  width: 62%;
  height: 62%;
  fill: currentColor;
}
.watch-tab:hover .watch-tab-icon {
  color: var(--ink);
}
.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 42px 6% 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.875rem;
  font-weight: 700;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.copyright {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  padding-top: 14px;
}
.not-found {
  min-height: 65vh;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* A SLIM BAR, NOT A CARD. The bar is legal furniture and it should read as furniture: one line of
   text and two answers on a single row from about 700px up, and a two row stack on a phone. It
   used to be a paragraph on a chunky pair of buttons, which measured 237px on a 320px phone and
   103px on a desktop, and a notice that size stops being furniture and starts being a takeover.

   The bar is capped and scrolls: at 200% text on a small phone an uncapped one filled the screen
   and buried the page behind it. src/client/consent.ts reserves its measured height at the foot
   of the body so the footer never sits underneath it. */
.consent-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 6%;
  background: var(--butter);
  border-top: 3px solid var(--ink);
}
.consent-banner[hidden] {
  display: none;
}
.consent-banner:focus-visible {
  outline: 3px solid #075693;
  outline-offset: -8px;
}
/* The basis is what decides the two layouts, and it is the only thing that does. Wider than about
   700px there is room for the line and both answers, so nothing wraps; narrower, the line claims
   its own row and the answers drop under it. No media query is needed for either. */
.consent-copy {
  flex: 1 1 340px;
  max-width: 640px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}
/* Grows into whatever the line leaves, so the answers sit at the far end of the bar on a wide
   screen and at the right of their own row on a phone. */
.consent-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
/* ONE RULE FOR BOTH ANSWERS, AND NO VARIANT. Same size, same fill, same weight, and the decline
   is first: see the note in src/components/consent-banner.ts. The site's own button, cut down to
   the bar's scale. These two sit at 44px rather than the 56px .button floor, because the bar has
   to read as furniture and a 56px pair pushes it back towards the card it replaced; 44px is the
   floor the site's smaller controls keep and it still clears WCAG 2.5.5 at AAA. The wobble is
   scaled, not flattened: a perfect pill would make the only two buttons a first time visitor
   meets the only two that are not in the site's hand drawn voice. The rest plus the lift equals
   the hover offset, as it does on .button, so the shadow's bottom edge stays put. */
.consent-actions .button {
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 14px 17px 13px 19px;
  box-shadow: 0 3px 0 var(--ink);
  font-size: 0.875rem;
  cursor: pointer;
}
.consent-actions .button:hover {
  box-shadow: 0 6px 0 var(--ink);
}
.consent-choice {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.consent-choice[hidden] {
  display: none;
}
.consent-choice:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width: 1100px) {
  .site-header {
    gap: 18px;
  }
  .site-header nav {
    gap: 18px;
  }
}
/* Two rows from here down: the logo and the Watch tab on top, the six places under them, spread
   across the whole width so every one shows on a 320px phone without sideways scrolling. Six
   places only fit beside the logo from 900px. */
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 14px 5% 6px;
  }
  .site-header .watch-tab {
    margin-left: auto;
    min-height: 40px;
    padding: 0 14px 0 9px;
    gap: 7px;
    font-size: 0.8125rem;
  }
  .site-header nav {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 2px 10px;
    margin-left: 0;
    font-size: 0.875rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 12px;
  }
  .brand-name {
    font-size: 1.9rem;
  }
  .brand-frog {
    width: 45px;
    height: 47px;
  }
  .brand-name small {
    font-size: 0.5625rem;
  }
}
/* Six places do not fit one row on a phone, so they sit in two even rows of three. With text
   at 200% a column is never narrower than its longest name (Characters): then they sit in rows of
   two, or one, and never run into each other. */
@media (max-width: 520px) {
  .site-header nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(5.6em, calc((100% - 16px) / 3)), 1fr));
    justify-items: center;
    gap: 0 8px;
  }
  .site-header nav > a {
    min-height: 40px;
  }
}
@media (max-width: 360px) {
  .site-header nav {
    font-size: 0.8125rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 9px;
  }
  .brand-name {
    font-size: 1.7rem;
  }
}
@media (max-width: 700px) {
  .section {
    padding: 48px 6%;
  }
  .section-heading {
    gap: 8px;
    margin-bottom: 20px;
  }
  .page-intro {
    padding-top: 28px;
    padding-bottom: 18px;
  }
  .site-footer {
    padding-top: 32px;
  }
  .site-footer nav {
    gap: 4px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .button,
  .cast-card,
  .portrait,
  .manga-page,
  .manga-panel {
    box-shadow: none;
    border: 2px solid CanvasText;
  }
  a:focus-visible,
  summary:focus-visible,
  select:focus-visible,
  button:focus-visible {
    outline: 3px solid Highlight;
  }
}
/* How a drawing gets onto the art wall: Fan art and Draw. */
.share-steps {
  overflow-wrap: anywhere;
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: share-step;
  font-size: 1rem;
  line-height: 1.5;
}
.share-steps li {
  position: relative;
  padding-left: 44px;
  counter-increment: share-step;
}
.share-steps li::before {
  content: counter(share-step);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fffaf0;
  font-weight: 800;
}
.share-steps a {
  display: inline-block;
  padding: 4px 0;
  font-weight: 700;
  text-decoration: underline;
}
/* The Continue button: home, /learn/ and /study/. */
.continue-box {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}
.continue-box[hidden] {
  display: none;
}
.continue-box .continue-go {
  max-width: 100%;
  text-align: left;
}
.continue-go span:first-child {
  flex-shrink: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.kero-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 20px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 30px 6% 50px;
  min-height: 540px;
  background: var(--butter);
  border-radius: 36px 36px 16% 4%;
  /* The tilted blob behind Kero grows with the hero; at 200% text the hero is tall enough for
     its corner to poke past the right edge and scroll the page sideways. */
  overflow-x: clip;
}
.kero-hero::before {
  content: '';
  position: absolute;
  width: 52%;
  height: 82%;
  right: 3%;
  top: 8%;
  z-index: -1;
  background: #f9d578;
  border-radius: 44% 56% 61% 39% / 49% 35% 65% 51%;
  transform: rotate(-7deg);
}
.hero-copy,
.hero-scene {
  min-width: 0;
}
.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-copy h1 {
  margin: 0 0 18px;
}
.hero-lead {
  max-width: 32ch;
  margin-bottom: 26px;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  text-wrap: pretty;
}
/* One link to the site's own Watch page, where both channels are (the owner, 20 October 2026). */
.hero-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.hero-watch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
}
.hero-watch:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.hero-watch .play-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding-left: 2px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.6875rem;
}
.hero-kicker {
  display: block;
  font: 700 1.375rem/1.4 var(--body);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.hero-name {
  display: block;
  font: 400 clamp(6rem, 13vw, 11.5rem)/0.94 var(--heading);
  letter-spacing: -0.055em;
}
.hero-name > span {
  color: var(--red);
}
.hero-actions {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
}
.hero-actions .button {
  padding: 15px 21px;
}
/* A returning learner's long label ("Continue: Lesson 1, Food and language, Cards") wraps inside
   the button at every width; the base .button span rule would otherwise keep it on one line. */
.hero-actions .learn-button > [data-continue-hero-label] {
  flex-shrink: 1;
  min-width: 0;
  text-wrap: balance;
}
.hero-scene {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 470px;
}
.hero-kero {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 500px;
  margin-top: 40px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 15px 0 #6e4b2215);
  animation: frog-arrives 0.75s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
/* Sensei joins Kero on phones only (see the 700px query). */
.hero-sensei {
  display: none;
}
.scene-orbit {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border: 2px dashed #ab782c66;
  border-radius: 50%;
  transform: rotate(-15deg) scaleX(1.12);
}
.frog-shadow {
  position: absolute;
  bottom: 0;
  width: 63%;
  height: 28px;
  background: #a57a3233;
  border-radius: 50%;
  transform: rotate(-5deg);
}
.hero-bubble {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 8px;
  border: 3px solid var(--ink);
  border-radius: 55% 45% 49% 51% / 48% 58% 42% 52%;
  background: var(--paper);
  padding: 19px 27px;
  transform: rotate(8deg);
  text-align: center;
  box-shadow: 2px 4px 0 #392c2020;
}
.hero-bubble::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: -10px;
  left: 40px;
  transform: rotate(45deg);
  background: var(--paper);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.hero-bubble-text {
  display: block;
}
.hero-bubble b {
  display: block;
  font:
    700 clamp(1.15rem, 2.2vw, 1.8rem)/1.4 'Kero Japanese',
    sans-serif;
}
.hero-bubble-text > span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 3px;
}
/* Tap to hear the narrator say あぶない (shown once the script runs). */
.hero-hear.sound-button {
  position: absolute;
  right: -14px;
  bottom: -16px;
  width: 44px;
  height: 44px;
  transform: rotate(-8deg);
}
.hero-hear .speaker-icon {
  width: 22px;
  height: 22px;
}
@keyframes sensei-pops {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(8deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(8deg);
  }
}
@keyframes frog-arrives {
  from {
    opacity: 0;
    transform: translateY(22px) rotate(-13deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-8deg);
  }
}
.episode-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: center;
  padding-block: 74px;
}
.episode-spotlight h2 {
  font-size: clamp(3rem, 5.2vw, 4.8rem);
  max-width: 460px;
}
.episode-spotlight .eyebrow {
  color: var(--red);
}
.spotlight-art {
  position: relative;
  border: 3px solid var(--ink);
  border-radius: 32px 40px 30px 38px;
  box-shadow: 0 8px 0 var(--ink);
  transform: rotate(2deg);
  transition: transform 0.2s;
}
.spotlight-art > img {
  width: 100%;
  border-radius: 29px 37px 27px 35px;
}
.spotlight-art:hover {
  transform: rotate(0);
}
.read-sticker {
  position: absolute;
  bottom: -18px;
  right: 25px;
  padding: 11px 18px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 13px;
  transform: rotate(-6deg);
  font: 400 1.125rem/1.3 var(--heading);
}
.cast-preview {
  padding-top: 42px;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
}
.cast-card {
  min-width: 0;
}
.cast-picture {
  position: relative;
  height: 370px;
  padding-top: 42px;
}
.cast-blob {
  position: absolute;
  inset: 80px 0 0;
  background: var(--butter);
  border-radius: 47% 53% 31% 69% / 57% 40% 60% 43%;
  transform: rotate(-6deg);
}
.cream .cast-blob {
  display: none;
}
.blue .cast-blob {
  background: #f5a282;
  border-radius: 38% 62% 50% 50% / 47% 49% 51% 53%;
}
.cast-picture > img {
  position: absolute;
  width: 100%;
  height: 83%;
  bottom: 0;
  object-fit: contain;
  object-position: bottom center;
  transition: transform 0.25s;
}
.cast-card.cream img {
  height: 84%;
  width: auto;
  inset-inline: 0;
  margin-inline: auto;
  border: 2px solid var(--ink);
  border-radius: 24px;
}
.cast-card:hover .cast-picture > img,
.cast-card:focus-visible .cast-picture > img {
  transform: translateY(-7px) rotate(-3deg);
}
.cast-quote {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 17px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 24px 20px 25px 4px;
  font: 700 0.9375rem/1.4 var(--body);
  transform: rotate(-5deg);
}
.cast-card:nth-child(2) .cast-quote {
  transform: rotate(5deg);
}
.cast-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 18px 0;
}
.cast-label h3 {
  font-size: 2.5rem;
  margin: 0;
}
.cast-label h3 > span {
  display: block;
  font:
    700 0.875rem/1.7 'Kero Japanese',
    sans-serif;
  color: var(--muted);
  margin-top: 7px;
}
.cast-label > span {
  width: 43px;
  height: 43px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 1.4rem;
}
.world-links {
  max-width: var(--page);
  margin: 15px auto 25px;
  padding: 0 6%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
}
.world-links--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 980px;
  margin-top: 40px;
}
.home-artwork {
  margin-block: 32px 54px;
  border-block: 1px solid #d8c9a9;
  background: #fff0cc;
}
.home-artwork-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
  padding-block: 66px;
}
.home-artwork-copy h2 {
  font-size: clamp(3rem, 5.2vw, 4.8rem);
  line-height: 1.05;
  margin-bottom: 24px;
}
.home-artwork-copy h2 span,
.home-artwork-copy .eyebrow {
  color: var(--red);
}
.home-artwork-copy > p:not(.eyebrow) {
  font-size: 1.25rem;
  max-width: 27rem;
  margin-bottom: 30px;
}
.home-artwork-preview {
  min-width: 0;
  margin: 0;
}
.home-artwork-frame {
  display: block;
  padding: 9px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: #fffaf0;
  box-shadow: 5px 7px 0 #b88e46;
  transform: rotate(2deg);
}
.home-artwork-frame img {
  width: 100%;
}
.home-artwork-preview figcaption a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  font-size: 1rem;
}
.home-artwork-preview strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.home-artwork-preview .home-artwork-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.world-link {
  position: relative;
  isolation: isolate;
  border: 2px solid var(--ink);
  border-radius: 30px;
  min-height: 270px;
  padding: 35px;
  overflow: hidden;
}
.world-link h2 {
  font-size: clamp(2.5rem, 3.7vw, 3.5rem);
  margin: 0 0 20px;
}
.world-link.watch {
  background: var(--yellow);
  display: flex;
  align-items: center;
}
.world-link.watch > div {
  position: relative;
  z-index: 1;
  max-width: 62%;
}
.world-kero {
  position: absolute;
  width: 43%;
  right: -2%;
  bottom: -20%;
  transform: rotate(-15deg);
  z-index: -1;
}
.world-link.play {
  background: var(--blue);
  display: flex;
  align-items: end;
  padding: 0;
}
.world-link.play > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.world-link.play > div {
  position: relative;
  z-index: 1;
  margin: 18px;
  padding: 17px 23px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
}
.world-link.play h2 {
  font-size: 2.5rem;
  margin: 0 0 4px;
}
.world-link.play .eyebrow {
  margin-bottom: 5px;
}
.world-link:hover .link-label {
  text-decoration: underline;
}
@media (min-width: 1600px) {
  .kero-hero {
    padding-inline: 110px;
  }
}
@media (max-width: 1000px) {
  .kero-hero {
    min-height: 520px;
  }
  .hero-scene {
    min-height: 410px;
  }
  .hero-bubble {
    padding: 12px 20px;
    right: -8px;
  }
  .episode-spotlight {
    gap: 36px;
  }
  .cast-grid {
    gap: 20px;
  }
  .cast-picture {
    height: 310px;
  }
  .world-link {
    padding: 28px;
  }
}
@media (max-width: 700px) {
  .home-artwork-inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 42px;
  }
  .home-artwork-preview {
    margin-inline: 6px;
  }
  /* On a phone the first screen is a picture (the owner, 13 October 2026): the name, then Kero
     with Goro peeking over his shoulder and Sensei watching, then the one Start button, then the
     six picture tiles. The line, the second button, the YouTube link and the bubble are for wider
     screens; the Watch and Kerotown tiles stand in for them. */
  .kero-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'title'
      'scene'
      'actions';
    min-height: 0;
    padding: 14px 5% 18px;
    overflow: hidden;
    border-radius: 24px 24px 40px 18px;
  }
  .kero-hero::before {
    top: auto;
    bottom: 64px;
    right: -14%;
    width: 92%;
    height: 62%;
  }
  .hero-copy {
    display: contents;
  }
  .hero-copy h1 {
    grid-area: title;
    position: relative;
    z-index: 3;
    width: fit-content;
    margin: 0;
  }
  .hero-kicker {
    margin-bottom: 4px;
    font-size: 1rem;
  }
  .hero-name {
    font-size: clamp(3.6rem, 18vw, 5.5rem);
  }
  .hero-lead,
  .hero-actions .button.white,
  .hero-channels,
  .hero-bubble,
  .frog-shadow,
  .scene-orbit {
    display: none;
  }
  .hero-actions {
    grid-area: actions;
    position: relative;
    z-index: 3;
    margin-top: 12px;
  }
  .hero-actions .learn-button {
    flex: 1 1 100%;
    gap: 12px;
    min-height: 58px;
    padding: 12px 16px;
    font-size: 1.125rem;
    text-align: center;
  }
  .hero-scene {
    grid-area: scene;
    position: relative;
    display: block;
    width: 100%;
    max-width: 440px;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
  }
  /* A soft burst of comic speed lines behind Kero. */
  .hero-scene::before {
    content: '';
    position: absolute;
    left: 11%;
    bottom: -30%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(#f6c74780 0deg 7deg, transparent 7deg 18deg);
    mask: radial-gradient(circle, black 30%, transparent 70%);
  }
  /* Kero alone, in the middle, small enough to fit the scene whole: his feet clear the Start
     button and his head stays under the name (the owner, 13 October 2026). */
  .hero-kero {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 4px;
    width: 56%;
    max-width: none;
    margin: 0 auto;
    filter: drop-shadow(0 8px 0 #6e4b2218);
  }
  /* Sensei watches from beside the name. */
  .hero-sensei {
    display: block;
    position: absolute;
    z-index: 2;
    top: -42%;
    right: 5%;
    width: 21%;
    max-width: 92px;
    aspect-ratio: 1;
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 4px 0 var(--ink);
    transform: rotate(8deg);
    animation: sensei-pops 0.5s 0.5s cubic-bezier(0.2, 0.7, 0.25, 1) both;
  }
  .episode-spotlight {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding-block: 48px 60px;
  }
  .episode-spotlight h2 {
    font-size: 2.75rem;
    margin-bottom: 22px;
  }
  .spotlight-art {
    margin-right: 7px;
  }
  .cast-preview {
    padding-top: 12px;
  }
  .cast-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .cast-card {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
  }
  .cast-picture {
    height: 230px;
    padding-top: 16px;
  }
  .cast-blob {
    inset: 40px 0 0;
  }
  .cast-quote {
    font-size: 0.8125rem;
    padding: 8px 12px;
  }
  .cast-label {
    padding: 0 0 0 18px;
    flex-wrap: wrap;
    gap: 14px;
  }
  .cast-label h3 {
    font-size: 2.25rem;
  }
  .cast-label h3 > span {
    font-size: 0.875rem;
  }
  .cast-label > span {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }
  .world-links {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .world-link {
    min-height: 245px;
    padding: 27px;
  }
  .world-kero {
    width: 45%;
    bottom: -8%;
  }
}
@media (max-width: 360px) {
  .cast-label h3 {
    font-size: 2rem;
  }
  .world-link.watch > div {
    max-width: 68%;
  }
}
/* "The story": the crew, then the World & lore block, on one paper band. */
.home-story {
  margin-block: 28px;
  border-block: 1px solid var(--line);
  background: #fff0cc;
}
.home-story .cast-preview {
  padding-top: 64px;
  padding-bottom: 12px;
}
.home-lore {
  color: var(--ink);
}
.home-lore-copy h3 {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  margin-bottom: 20px;
}
.home-lore-inner {
  max-width: var(--page);
  margin-inline: auto;
  padding: 40px 6% 72px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(35px, 5vw, 72px);
}
.home-lore-copy {
  min-width: 0;
}
.home-lore-copy .eyebrow,
.home-lore-copy h3 > span {
  color: var(--red);
}
.home-lore-intro {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.home-lore-spoilers {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 18px 0 0;
}
.home-lore-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  min-width: 0;
  padding: 5px 6px 15px;
}
.home-lore-picture {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 26px 30px 24px 28px;
  box-shadow: 0 6px 0 var(--ink);
  transform: rotate(-1deg);
  transition: transform 160ms ease;
}
.home-lore-picture > img {
  width: 100%;
  height: auto;
  border-radius: 23px 27px 0 0;
}
.home-lore-picture--wide {
  grid-column: 1 / -1;
  width: 94%;
  justify-self: end;
  transform: rotate(2deg);
}
.home-lore-picture:last-child:not(.home-lore-picture--wide) {
  margin-top: 8px;
  transform: rotate(2deg);
}
.home-lore-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 15px;
  font: 700 1rem/1.4 var(--body);
  overflow-wrap: anywhere;
}
.home-lore-caption > span {
  flex-shrink: 0;
  font-size: 1.25rem;
}
.home-lore-picture:hover {
  transform: rotate(0);
}
@media (max-width: 800px) {
  .home-lore-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
    padding: 48px 6% 60px;
  }
  .home-lore-art {
    gap: 18px;
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
  }
  .home-lore-caption {
    padding: 12px 10px;
  }
  .home-lore-intro {
    max-width: 40ch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-lore-picture {
    transition: none;
  }
}

/* ════ Pick your path: one tile for each thing people come for ════ */
.path-tiles {
  max-width: var(--page);
  margin: 22px auto 0;
  padding: 0 6%;
}
.path-tiles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 18px;
}
.path-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 10px 10px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s;
}
.path-tile:hover {
  transform: translateY(-3px) rotate(-0.5deg);
}
.path-tile-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
}
.path-tile-art > img,
.path-tile-art > svg {
  width: 100%;
  height: 100%;
}
.path-tile--manga .path-tile-art > img {
  object-fit: contain;
}
.path-tile-kana {
  font:
    700 clamp(2.6rem, 6vw, 4rem)/1 'Kero Japanese',
    var(--heading);
  color: var(--red);
}
.path-tile--learn .path-tile-art {
  background: var(--yellow);
}
.path-tile--play .path-tile-art {
  background: #8fd0c4;
}
.path-tile--play .path-tile-art > img {
  position: absolute;
  width: auto;
  height: auto;
}
.path-tile--play .path-tile-art > .path-tile-lotus {
  width: 46%;
  left: 27%;
  bottom: -6%;
}
.path-tile--play .path-tile-art > .path-tile-kero {
  width: 42%;
  left: 29%;
  bottom: 18%;
  transform: rotate(-8deg);
}
.path-tile--manga .path-tile-art > .path-tile-kero {
  width: 54%;
  height: auto;
}
.path-tile--art .path-tile-art {
  background: #fff0cc;
}
.path-tile--art .path-tile-art > svg {
  padding: 4px;
}
.path-tile-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-inline: 4px;
  font: 1.35rem/1.15 var(--heading);
}
.path-tile-line {
  padding-inline: 4px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted);
}
@media (max-width: 860px) {
  .path-tiles ul {
    gap: 12px;
  }
}
/* The Watch and Kerotown tiles are for phones (the hero and the end of the page link them on
   wider screens). */
.path-tiles .path-tile-phone {
  display: none;
}
/* On a phone: six picture tiles, three a row, each a picture and a word or two. */
@media (max-width: 700px) {
  .path-tiles {
    margin-top: 14px;
    padding-inline: 5%;
  }
  .path-tiles ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .path-tiles .path-tile-phone {
    display: block;
  }
  .path-tile {
    gap: 5px;
    padding: 6px 6px 7px;
    border-radius: 18px 15px 19px 16px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .path-tile-art {
    aspect-ratio: 5 / 4;
    margin-bottom: 0;
    border-radius: 12px 10px 13px 11px;
  }
  .path-tile-name {
    justify-content: center;
    padding-inline: 0;
    font-size: 1.0625rem;
    text-align: center;
  }
  .path-tile-name > [aria-hidden='true'],
  .path-tile-line {
    display: none;
  }
  .path-tile-kana {
    font-size: 2.75rem;
  }
  .path-tile--manga .path-tile-art > img,
  .path-tile--town .path-tile-art > img {
    object-fit: cover;
  }
  .path-tile--play .path-tile-art > .path-tile-lotus {
    width: 66%;
    left: 17%;
    bottom: -10%;
  }
  .path-tile--play .path-tile-art > .path-tile-kero {
    width: 58%;
    left: 21%;
    bottom: 24%;
  }
}
@media (max-width: 340px) {
  .path-tiles ul {
    gap: 8px;
  }
  .path-tile-name {
    font-size: 0.9375rem;
  }
}
/* The Watch tile: a play button on YouTube red. */
.path-tile--watch .path-tile-art {
  background: var(--red);
}
.path-tile-play {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.path-tile-play::before {
  content: '';
  width: 36%;
  aspect-ratio: 6 / 7;
  margin-left: 10%;
  background: var(--red);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.path-tile--town .path-tile-art {
  background: var(--blue);
}

/* ════ The home page's Learn, manga, Play and fan art sections ════ */
.new-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--red);
  color: white;
  letter-spacing: 0.08em;
}
.episode-spotlight-copy .text-link {
  margin-top: 14px;
}
.home-play {
  padding-block: 40px 56px;
}
.home-draw-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 27rem;
  margin-top: 26px;
  padding: 10px 16px 10px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px 16px 19px 15px;
  transition: transform 0.18s;
}
.home-draw-card:hover {
  transform: translateY(-2px);
}
.home-draw-card b {
  display: block;
  font: 400 1.25rem/1.2 var(--heading);
}
.home-draw-art {
  flex: 0 0 74px;
  background: white;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.home-draw-art svg {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .path-tile,
  .home-draw-card {
    transition: none;
  }
  .path-tile:hover,
  .home-draw-card:hover {
    transform: none;
  }
}
/* On a phone the sections under the tiles lead with their pictures and names; the explaining lines
   are for wider screens (the owner, 13 October 2026). */
@media (max-width: 700px) {
  .learn-preview--compact .learn-preview-copy > p:not([data-continue]),
  .home-play .game-what,
  .home-artwork-copy > p:not(.eyebrow),
  .home-draw-line,
  .home-lore-intro {
    display: none;
  }
  .home-draw-card {
    margin-top: 18px;
  }
}

.learn-room {
  --learn-bg: var(--butter);
  max-width: var(--page);
  margin: 10px auto 40px;
  padding: 30px 6% 48px;
  background: var(--learn-bg);
  border-block: 3px solid var(--ink);
}
.learn-room--katakana {
  --learn-bg: var(--blue);
  /* Darker text tones keep contrast on the blue background. */
  --muted: #3f3224;
  --red: #7f2219;
}
.learn-room--numbers {
  --learn-bg: #ffd9c2;
  --muted: #4a3a2a;
  --red: #8a2a1f;
}
.learn-room--index {
  --learn-bg: var(--butter);
}
.learn-room [hidden] {
  display: none !important;
}
.learn-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
}
.learn-intro h1 {
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  margin-bottom: 12px;
}
.learn-intro h1 [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
  color: var(--red);
}
.learn-intro p:last-child {
  margin: 0;
  max-width: 46ch;
}
.learn-sticker {
  padding: 16px 22px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(7deg);
  font: 1.3rem/1.1 var(--heading);
  flex-shrink: 0;
  text-align: center;
}
.learn-room--katakana .learn-sticker {
  background: var(--paper);
}
.learn-switch {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 26px;
}
.learn-switch a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.learn-switch a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}
.learn-switch [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}

.learn-lesson {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  grid-template-areas:
    'guide cards'
    'guide nav';
  gap: 18px 28px;
  align-items: start;
}
.learn-guide {
  grid-area: guide;
  text-align: center;
}
.learn-sensei {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.learn-guide h2 {
  font-size: 1.4rem;
  margin: 12px 0 4px;
}
.learn-count {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.learn-cards {
  grid-area: cards;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.learn-card {
  padding: 24px 28px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 24px 18px 26px;
  box-shadow: 6px 6px 0 var(--ink);
}
.learn-card .eyebrow {
  color: var(--red);
  margin-bottom: 6px;
}
.learn-card h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 10px;
}
.learn-card h3:focus {
  outline: none;
}
.learn-card p {
  font-size: 1.1rem;
  margin: 0 0 14px;
  max-width: 60ch;
}
.learn-outro {
  font-weight: 700;
}
.learn-examples {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.learn-examples li {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 130px;
  flex: 1 1 130px;
  max-width: 260px;
  padding: 14px 12px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px;
  text-align: center;
}
.learn-room--katakana .learn-examples li {
  background: #d9f0f2;
}
.learn-jp {
  font:
    2.2rem/1.2 'Kero Japanese',
    var(--body);
  font-weight: 700;
}
.learn-romaji {
  font-weight: 700;
  color: var(--red);
}
.learn-meaning {
  font-size: 0.95rem;
  color: var(--muted);
}
.learn-nav {
  grid-area: nav;
  display: flex;
  gap: 12px;
}
.learn-nav .primary {
  flex: 1;
}

.learn-quiz {
  margin-top: 44px;
  padding: 26px 28px 30px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 18px;
  box-shadow: 6px 6px 0 var(--ink);
  scroll-margin-top: 90px;
}
.learn-quiz-heading h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 6px;
}
.learn-quiz-heading p:last-child {
  margin: 0 0 18px;
}
.learn-question h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 14px;
}
.learn-question h3:focus,
.learn-results h3:focus {
  outline: none;
}
.learn-choices {
  display: grid;
  gap: 10px;
  max-width: 560px;
}
.learn-choice {
  min-height: 52px;
  padding: 10px 18px;
  font: 700 1.05rem/1.4 var(--body);
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.learn-choice [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
  font-size: 1.25em;
}
.learn-choice:not(:disabled):hover {
  background: var(--butter);
  transform: translateY(-2px);
}
.learn-choice:disabled {
  cursor: default;
  opacity: 0.6;
}
.learn-choice.is-right {
  opacity: 1;
  background: #cfeccb;
}
.learn-choice.is-right::after {
  content: ' ✓';
}
.learn-choice.is-wrong {
  opacity: 1;
  background: #f6d2cc;
}
.learn-choice.is-wrong::after {
  content: ' ✗';
}
.learn-feedback {
  max-width: 560px;
  margin-top: 16px;
}
.learn-feedback p {
  margin: 0 0 12px;
}
.learn-verdict {
  font: 1.3rem/1.2 var(--heading);
  color: var(--red);
}
.learn-verdict.is-right {
  color: #2f7a35;
}
.learn-results {
  display: flex;
  align-items: center;
  gap: 24px;
}
.learn-result-kero {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}
.learn-results h3 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 14px;
  letter-spacing: 0.04em;
}
.learn-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.learn-result-actions [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
.learn-paper details {
  margin-bottom: 10px;
}

@media (max-width: 720px) {
  .learn-intro {
    flex-direction: column;
    align-items: flex-start;
  }
  .learn-sticker {
    display: none;
  }
  .learn-lesson {
    grid-template-columns: 1fr;
    grid-template-areas: 'guide' 'cards' 'nav';
  }
  .learn-guide {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .learn-sensei {
    width: 84px;
  }
  .learn-guide h2 {
    margin: 0;
  }
  .learn-card,
  .learn-quiz {
    padding: 20px;
  }
  .learn-results {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .learn-choice:not(:disabled):hover {
    transform: none;
  }
}

/* ════ Lesson grid ════ */
.learn-back {
  display: inline-flex;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.learn-progress {
  margin: -8px 0 18px;
  font-weight: 700;
}
.learn-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.learn-tile {
  position: relative;
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 18px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px 22px 16px 20px;
  box-shadow: 0 4px 0 var(--ink);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.learn-tile:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 7px 0 var(--ink);
}
.learn-tile--intro {
  background: var(--yellow);
}
.learn-tile-label {
  font: 700 0.8125rem/1.4 var(--body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
}
.learn-tile-kana {
  font:
    700 1.9rem/1.25 'Kero Japanese',
    var(--body);
  letter-spacing: 0.04em;
}
.learn-tile-title {
  font: 1.2rem/1.2 var(--heading);
}
.learn-tile-sub {
  color: var(--muted);
  font-size: 0.95rem;
}
.learn-tile--intro .learn-tile-sub,
.learn-tile--intro .learn-tile-label {
  color: var(--ink);
}
.learn-tile-badge:empty {
  display: none;
}
.learn-tile-badge {
  justify-self: start;
  margin-top: 6px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #cfeccb;
}
.learn-tile.is-next {
  outline: 4px solid var(--red);
  outline-offset: 3px;
}
.learn-tile.is-next .learn-tile-badge {
  background: var(--yellow);
}
.learn-how {
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 18px;
}
.learn-how h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}
.learn-how ol {
  margin: 0 0 10px;
  padding-left: 1.3em;
}
.learn-how li + li {
  margin-top: 6px;
}
.learn-how p {
  margin: 0;
  color: var(--muted);
}

/* ════ Flash cards ════ */
.learn-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.learn-section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.flash-cards {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.learn-flash--stepped .flash-cards {
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
}
.flash-face {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  min-height: 210px;
  padding: 20px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  cursor: pointer;
}
.flash-face:disabled {
  cursor: default;
  opacity: 1;
}
.learn-flash--stepped .flash-face {
  min-height: 300px;
}
.flash-kana {
  font:
    700 clamp(4.5rem, 12vw, 7rem)/1 'Kero Japanese',
    var(--body);
}
.flash-back {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}
.flash-romaji {
  font: 2rem/1 var(--heading);
  color: var(--red);
}
.flash-cue {
  max-width: 30ch;
  color: var(--muted);
}
.flash-hint {
  display: none;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--muted);
}
/* With JavaScript the back is hidden until the card is flipped. */
.learn-flash--stepped .flash-back {
  display: none;
}
.learn-flash--stepped .flash-hint {
  display: block;
}
.learn-flash--stepped .is-flipped .flash-back {
  display: grid;
}
.learn-flash--stepped .is-flipped .flash-hint {
  display: none;
}
.learn-flash--stepped .is-flipped .flash-face {
  background: var(--butter);
}
.learn-room--katakana .learn-flash--stepped .is-flipped .flash-face {
  background: #d9f0f2;
}
.learn-flash .learn-nav {
  max-width: 460px;
  margin: 0 auto;
}

/* ════ Multiple choice ════ */
.mc-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.mc-progress p {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
}
.mc-bar {
  flex: 1;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.mc-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--yellow);
  transition: width 0.3s;
}
.mc-question {
  text-align: center;
}
.mc-prompt {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.mc-target {
  margin: 4px 0 18px;
  font: 2.6rem/1.2 var(--heading);
}
.mc-target:focus {
  outline: none;
}
.mc-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}
.mc-choice {
  min-height: 64px;
  padding: 10px;
  font: 1.6rem/1.2 var(--heading);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
}
.mc-choice--kana {
  font:
    700 2.2rem/1.2 'Kero Japanese',
    var(--body);
}
.mc-choice:not(:disabled):hover {
  background: var(--butter);
  transform: translateY(-2px);
}
.mc-choice:disabled {
  cursor: default;
  opacity: 0.55;
}
.mc-choice.is-right {
  opacity: 1;
  background: #cfeccb;
}
.mc-choice.is-wrong {
  opacity: 1;
  background: #f6d2cc;
}
.mc-question .learn-feedback {
  margin: 18px auto 0;
}
.learn-paper-list {
  columns: 3;
  font-size: 1.1rem;
}

/* ════ Home page section ════ */
.learn-preview {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  background: var(--butter);
  border-block: 3px solid var(--ink);
  margin-block: 35px 0;
}
.learn-preview [hidden] {
  display: none !important;
}
.learn-preview h2 span {
  color: var(--red);
}
.learn-resume {
  display: grid;
  gap: 10px;
  justify-items: start;
  font-weight: 700;
}
.learn-preview-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.learn-preview-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 22px 20px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform 0.18s;
}
.learn-preview-card--katakana {
  background: #d9f0f2;
  transform: rotate(2deg);
}
.learn-preview-card:hover {
  transform: rotate(0) translateY(-4px);
}
.learn-preview-kana {
  font:
    700 clamp(2rem, 4vw, 2.8rem)/1.2 'Kero Japanese',
    var(--body);
}
.learn-preview-name {
  font: 1.5rem/1.2 var(--heading);
}
.learn-preview-name [lang='ja'] {
  white-space: nowrap;
  font-family: 'Kero Japanese', var(--body);
  color: var(--red);
  font-size: 0.85em;
}
.learn-preview-sub {
  color: var(--muted);
}
.learn-preview-go {
  margin-top: 6px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .learn-preview {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .learn-preview-cards {
    grid-template-columns: 1fr;
  }
  .learn-paper-list {
    columns: 2;
  }
  .mc-choice {
    font-size: 1.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-tile,
  .learn-preview-card,
  .mc-bar span {
    transition: none;
  }
  .learn-tile:hover,
  .learn-preview-card:hover,
  .mc-choice:not(:disabled):hover {
    transform: none;
  }
}

/* ════ Simpler lesson layout ════ */
.lesson-head {
  text-align: center;
  margin-bottom: 18px;
}
.lesson-head .eyebrow {
  margin-bottom: 4px;
  color: var(--red);
}
.lesson-head h1 {
  margin: 0;
  font:
    700 clamp(3rem, 9vw, 5.5rem)/1.1 'Kero Japanese',
    var(--heading);
  letter-spacing: 0.06em;
}
.battle-room .lesson-head h1 {
  font: clamp(2.4rem, 6vw, 4rem)/1.1 var(--heading);
  letter-spacing: 0;
}
.battle-vs {
  color: var(--red);
}
.lesson-romaji {
  margin: 4px 0 0;
  font: 1.3rem/1.3 var(--heading);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.lesson-steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.lesson-steps a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lesson-steps b,
.step-title b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 0.1em;
}
.lesson-steps a {
  min-height: 46px;
  padding: 8px 18px;
  font-weight: 700;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
}
.lesson-steps b,
.step-title b {
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  font: 1rem/1 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.learn-flash,
.learn-words,
.learn-draw {
  scroll-margin-top: 90px;
}
.learn-room .learn-quiz {
  margin-top: 36px;
}

/* Sound buttons */
.sound-button {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-size: 1.5rem;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.sound-button:hover {
  transform: translateY(-2px);
}
.flash-card {
  position: relative;
}
.flash-sound {
  position: absolute;
  top: 14px;
  right: 14px;
}
.flash-card audio {
  width: 100%;
  margin-top: 8px;
}
.mc-target-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.mc-target-row .mc-target {
  margin-bottom: 18px;
}
.mc-target-row .sound-button {
  margin-bottom: 18px;
}

/* ════ Stroke order ════ */
.learn-draw {
  margin-top: 36px;
  padding: 26px 28px 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 26px 18px 24px;
  box-shadow: 6px 6px 0 var(--ink);
}
.draw-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.draw-picker button {
  width: 58px;
  height: 58px;
  font:
    700 1.8rem/1 'Kero Japanese',
    var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.draw-picker button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.draw-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.draw-demo,
.draw-pad {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.draw-demo svg,
.draw-paper {
  width: min(100%, 320px);
  aspect-ratio: 1;
  background:
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
}
.draw-demo figcaption,
.draw-pad figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-weight: 700;
}
.draw-under {
  fill: none;
  stroke: #efe4cb;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-stroke 0.9s ease-in-out forwards;
  animation-delay: calc(var(--s) * 1s + 0.3s);
}
.draw-number {
  opacity: 0;
  animation: draw-number 0.2s forwards;
  animation-delay: calc(var(--s) * 1s + 0.3s);
}
.draw-number circle {
  fill: var(--red);
}
.draw-number text {
  font: 700 6.5px/1 var(--body);
  fill: #fff;
}
/* Stroke timing by class, because the live security policy blocks inline styles. */
.draw-s0 {
  --s: 0;
}
.draw-s1 {
  --s: 1;
}
.draw-s2 {
  --s: 2;
}
.draw-s3 {
  --s: 3;
}
.draw-s4 {
  --s: 4;
}
.draw-s5 {
  --s: 5;
}
@keyframes draw-stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-number {
  to {
    opacity: 1;
  }
}
.draw-paper {
  position: relative;
  overflow: hidden;
}
.draw-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.draw-guide path {
  fill: none;
  stroke: #e9dcc0;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw-paper canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
.draw-credit {
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}
.draw-credit a {
  text-decoration: underline;
}

/* ════ Battle ════ */
.battle-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 26px;
  padding: 14px 20px;
  background: var(--red);
  color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--ink);
  font: 1.6rem/1.2 var(--heading);
  text-align: center;
  transition: transform 0.18s;
}
.battle-banner:hover {
  transform: translateY(-3px) rotate(-1deg);
}
.battle-banner span {
  display: grid;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
}
.battle-banner b {
  font: 1.8rem/1.1 var(--heading);
}
.battle-banner img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.battle-banner-sensei {
  border: 3px solid var(--ink);
  border-radius: 50%;
  object-fit: cover !important;
  object-position: top;
  background: var(--paper);
}
.battle-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto 18px;
  padding: 18px 18px 26px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(57, 44, 32, 0.15) 0 40%, transparent 41%),
    linear-gradient(#fff6dc, var(--paper));
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.fighter {
  display: grid;
  gap: 8px;
  justify-items: center;
}
.fighter-art {
  width: min(100%, 220px);
  height: 220px;
  object-fit: contain;
}
.fighter--sensei .fighter-art {
  width: min(100%, 180px);
  object-fit: cover;
  object-position: top;
  border: 3px solid var(--ink);
  border-radius: 20px;
}
.hp {
  display: grid;
  gap: 4px;
  width: min(100%, 200px);
  margin: 0;
  font-weight: 700;
}
.hp-bar {
  display: block;
  height: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.hp-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: #4caf50;
  transition: width 0.4s;
}
.fighter--sensei .hp-bar span {
  background: var(--red);
}
.battle-bubble {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.battle-kana {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  margin: 0;
  font:
    700 4.5rem/1 'Kero Japanese',
    var(--body);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 5px 0 var(--ink);
}
.battle-kana.is-new {
  animation: battle-pop-in 0.35s ease-out;
}
.fighter--kero.is-attacking .fighter-art {
  animation: kero-lunge 0.6s ease-in-out;
}
.fighter--sensei.is-attacking .fighter-art {
  animation: sensei-lunge 0.6s ease-in-out;
}
.fighter.is-hit .fighter-art {
  animation: fighter-shake 0.5s 0.25s ease-in-out;
}
.battle-pop {
  position: absolute;
  top: 30%;
  margin: 0;
  font: 2rem/1 var(--heading);
  color: var(--red);
  opacity: 0;
  pointer-events: none;
}
.battle-pop[data-side='sensei'] {
  right: 18%;
}
.battle-pop[data-side='kero'] {
  left: 18%;
}
.battle-pop.is-popping {
  animation: damage-float 1s ease-out;
}
.battle-choices {
  margin-bottom: 10px;
}
.battle-log {
  min-height: 1.6em;
  margin: 8px 0 0;
  font-weight: 700;
  text-align: center;
}
.battle-using {
  margin: 4px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.battle-won .fighter--sensei .fighter-art {
  transform: rotate(80deg) translateY(30px);
  transition: transform 0.6s;
}
.battle-lost .fighter--kero .fighter-art {
  transform: rotate(-80deg) translateY(30px);
  transition: transform 0.6s;
}
.battle-room .learn-results {
  justify-content: center;
  text-align: center;
}
.battle-room .learn-result-actions {
  justify-content: center;
}
@keyframes kero-lunge {
  40% {
    transform: translateX(90px) rotate(12deg);
  }
}
@keyframes sensei-lunge {
  40% {
    transform: translateX(-90px) rotate(-8deg);
  }
}
@keyframes fighter-shake {
  20%,
  60% {
    translate: -10px 0;
  }
  40%,
  80% {
    translate: 10px 0;
  }
}
@keyframes damage-float {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
@keyframes battle-pop-in {
  0% {
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.1);
  }
}

@media (max-width: 640px) {
  .battle-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'bubble bubble' 'kero sensei';
  }
  .battle-bubble {
    grid-area: bubble;
  }
  .fighter--kero {
    grid-area: kero;
  }
  .fighter--sensei {
    grid-area: sensei;
  }
  .fighter-art {
    height: 140px;
  }
  .battle-kana {
    width: 104px;
    height: 104px;
    font-size: 3.6rem;
  }
  .battle-banner img {
    width: 60px;
    height: 60px;
  }
  .learn-draw {
    padding: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .draw-stroke {
    animation: none;
    stroke-dashoffset: 0;
  }
  .draw-number {
    animation: none;
    opacity: 1;
  }
  .battle-kana.is-new,
  .fighter .fighter-art,
  .battle-pop.is-popping {
    animation: none !important;
  }
  .battle-pop.is-popping {
    opacity: 1;
  }
  .battle-banner,
  .hp-bar span {
    transition: none;
  }
}

/* ════ Read words ════ */
.learn-words {
  margin-top: 36px;
  padding: 26px 28px 26px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 18px 22px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
}
.learn-words .step-title {
  justify-content: flex-start;
}
.word-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 6px auto 14px;
}
.word-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
}
.word-meaning {
  margin: 0;
  font: 1.4rem/1.2 var(--heading);
}
.word-tiles {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 4px;
}
.word-tiles:focus {
  outline: none;
}
.word-tile {
  display: grid;
  place-items: center;
  width: 72px;
  height: 80px;
  font:
    700 2.8rem/1 'Kero Japanese',
    var(--body);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
}
.word-tile.is-blank {
  color: var(--red);
  background: var(--butter);
  border-style: dashed;
}
.word-tile.is-filled {
  background: #cfeccb;
  animation: battle-pop-in 0.35s ease-out;
}
.word-romaji {
  margin: 4px 0 6px;
  font: 1.4rem/1.2 var(--heading);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.learn-words .learn-results {
  justify-content: center;
}
.learn-words .learn-result-actions {
  justify-content: center;
}
.word-list {
  list-style: none;
  padding: 0;
  font-size: 1.2rem;
}
@media (max-width: 520px) {
  .word-tile {
    width: 54px;
    height: 62px;
    font-size: 2.1rem;
  }
  .word-tiles {
    gap: 5px;
  }
  .learn-words {
    padding: 20px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .word-tile.is-filled {
    animation: none;
  }
}

/* ════ Next lesson ════ */
.lesson-next {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ════ In this lesson: a plain table under the games (docs/pm-audit.md C6) ════ */
.lesson-table {
  max-width: 760px;
  margin: 36px auto 0;
}
.lesson-table h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.lesson-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: 0.95rem;
}
.lesson-table th,
.lesson-table td {
  padding: 8px 6px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.lesson-table td:nth-child(3),
.lesson-table td:nth-child(4) {
  overflow-wrap: anywhere;
}
.lesson-table th:first-child,
.lesson-table td:nth-child(2) {
  white-space: nowrap;
}
.lesson-table thead th {
  border-top: 0;
  background: var(--ink);
  color: #fff;
  font-size: 0.85rem;
}
.lesson-table tbody th {
  font-size: 1.6rem;
  line-height: 1.1;
  text-align: center;
}
.lesson-table p {
  margin: 12px 0 0;
}
.learn-chart-link {
  display: flex;
  justify-content: center;
  margin: 22px 0 0;
}
.manga-word-links {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 16px 18px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
}
.manga-word-links h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}
.manga-word-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.manga-word-links a {
  display: inline-block;
  min-height: 44px;
  padding: 10px 0;
  font-weight: 700;
  text-decoration: underline;
}

/* ════ The kana chart: tap to hear, and printable ════ */
.kana-chart-room h1 {
  font-family: var(--heading);
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1;
}
.kana-chart-line {
  max-width: 34rem;
  margin-inline: auto;
}
.kana-chart-wrap {
  max-width: 640px;
  margin: 18px auto 0;
}
.kana-chart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}
.kana-chart thead th {
  font-size: 0.9rem;
  color: var(--muted);
}
.kana-chart .kana-chart-lesson {
  width: 3.4em;
  font-size: 0.7rem;
}
.kana-chart tbody th {
  text-align: center;
}
.kana-chart tbody th a {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 44px;
  font-weight: 800;
}
.kana-chart td {
  padding: 0;
}
.chart-cell {
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: 56px;
  padding: 6px 2px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.chart-cell:hover,
.chart-cell:focus-visible {
  background: var(--yellow);
}
.chart-kana {
  font-size: clamp(1.4rem, 6vw, 2rem);
  line-height: 1.1;
}
.chart-romaji {
  font-size: 0.8rem;
  font-weight: 700;
}
.kana-chart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
@media print {
  .site-header,
  .site-footer,
  .consent-banner,
  .skip-link,
  .learn-back,
  .kana-chart-actions {
    display: none !important;
  }
  .kana-chart-room {
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
  }
  .chart-cell {
    background: #fff;
  }
}

/* ════ Learn landing ════ */
.learn-picks {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.learn-pick {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 26px 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.18s;
}
.learn-pick:hover {
  transform: translateY(-4px) rotate(-1deg);
}
.learn-pick--katakana {
  background: #d9f0f2;
}
.learn-pick--numbers {
  background: #ffe9dc;
}
.learn-pick-big {
  font:
    700 clamp(2.2rem, 5vw, 3rem)/1.15 'Kero Japanese',
    var(--heading);
}
.learn-pick-title {
  font: 1.7rem/1.2 var(--heading);
}
.learn-pick-sub {
  font-weight: 700;
  color: var(--muted);
}

/* ════ Numbers and time ════ */
.learn-group + .learn-group {
  margin-top: 28px;
}
.learn-group-title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.learn-room--numbers .learn-tile-title {
  font-size: 1.35rem;
}
.learn-room--numbers .learn-tile-sub[lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
.lesson-head .lesson-title {
  font: clamp(2.4rem, 7vw, 4rem)/1.1 var(--heading);
  letter-spacing: 0;
}
.lesson-jp {
  font-family: 'Kero Japanese', var(--body);
  letter-spacing: 0.04em;
}
.time-prompt {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.time-prompt--number {
  font: clamp(3.5rem, 11vw, 5.5rem)/1 var(--heading);
}
.time-prompt-visual {
  display: grid;
  place-items: center;
}
.learn-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
}
.time-prompt-text {
  font: 1.7rem/1.2 var(--heading);
}
.clock {
  width: 130px;
  height: 130px;
}
.clock-face {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 4;
}
.clock-tick {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.clock-tick--big {
  stroke-width: 3.5;
}
.clock-hour,
.clock-minute {
  stroke: var(--ink);
  stroke-linecap: round;
}
.clock-hour {
  stroke-width: 6;
}
.clock-minute {
  stroke: var(--red);
  stroke-width: 4;
}
.clock-pin {
  fill: var(--ink);
}
.flash-jp {
  font:
    700 clamp(2.4rem, 8vw, 3.4rem)/1.15 'Kero Japanese',
    var(--body);
}
.mc-choice-main {
  display: block;
}
.mc-choice-main[lang='ja'] {
  font:
    700 1.6rem/1.25 'Kero Japanese',
    var(--body);
}
.learn-quiz .mc-choice {
  font-size: 1.25rem;
}
.battle-kana--text {
  width: auto;
  min-width: 130px;
  height: auto;
  min-height: 130px;
  padding: 12px 18px;
  border-radius: 28px;
  font: 1.6rem/1.2 var(--heading);
  text-align: center;
}
.battle-kana .time-prompt-text {
  font-size: 1rem;
}
.battle-show-main {
  display: block;
}
.battle-kana--text .battle-show-main:not(:has(*)) {
  font-size: 2rem;
  line-height: 1.1;
}
/* How a number's reading is said, under what Sensei shows. */
.battle-romaji {
  display: block;
  margin-top: 4px;
  font: 1.3rem/1.2 var(--heading);
  color: var(--red);
}
/* The kana battle shows a sound in romaji: letters, a little smaller than a kana. */
.battle-kana--sound {
  font: 3.3rem/1 var(--heading);
}
@media (max-width: 640px) {
  .battle-kana--sound {
    font-size: 2.7rem;
  }
}
.battle-kana .clock {
  width: 92px;
  height: 92px;
}
.learn-preview-card--numbers {
  background: #ffe9dc;
  transform: rotate(-1deg);
}
@media (max-width: 520px) {
  .clock {
    width: 110px;
    height: 110px;
  }
  .time-prompt-text {
    font-size: 1.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .learn-pick {
    transition: none;
  }
  .learn-pick:hover {
    transform: none;
  }
}

/* Long "Next lesson: …" labels wrap on narrow phones instead of pushing the page wide. */
.learn-room .button {
  text-align: center;
}
.learn-room .button > span:first-child {
  flex-shrink: 1;
  min-width: 0;
}

.learn-quiz .mc-target-row {
  flex-wrap: wrap;
}
.sound-button--big {
  width: 96px;
  height: 96px;
  font-size: 2.6rem;
  margin-bottom: 18px;
}

/* ════ Drawn visuals ════ */
.speaker-icon {
  width: 26px;
  height: 26px;
}
.speaker-body {
  fill: var(--ink);
}
.speaker-waves {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.sound-button--big .speaker-icon {
  width: 48px;
  height: 48px;
}
.visual {
  display: block;
}
.visual--calendar {
  width: 110px;
  height: 110px;
}
.cal-page {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 3;
}
.cal-top {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 3;
}
.cal-ring {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.cal-day {
  font: 30px var(--heading);
  fill: var(--ink);
}
.visual--days,
.visual--span,
.visual--week {
  width: 250px;
  max-width: 100%;
  height: auto;
}
.tl-label {
  font: 700 11px var(--body);
  fill: var(--red);
}
.tl-box {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.tl-box--on {
  fill: var(--yellow);
}
.tl-today {
  fill: var(--red);
}
.tl-tick {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clock-wedge {
  fill: var(--yellow);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.clock-question {
  font: 48px var(--heading);
  fill: var(--red);
}
.battle-kana .learn-art,
.battle-kana .visual--calendar {
  width: 84px;
  height: 84px;
}
.battle-kana .visual--days,
.battle-kana .visual--span,
.battle-kana .visual--week {
  width: 150px;
}
@media (max-width: 520px) {
  .learn-art,
  .word-art,
  .visual--calendar {
    width: 96px;
    height: 96px;
  }
}

/* ════ The learning path (home page and /learn/) ════ */
.learn-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: none;
}
.learn-path-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'number big go'
    'number title go'
    'number line go'
    'number size go';
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 16px 18px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.18s;
}
.learn-path-step:hover {
  transform: translateY(-3px);
}
.learn-path-step--katakana {
  background: #d9f0f2;
}
.learn-path-step--numbers {
  background: #ffe9dc;
}
.learn-path-step--study {
  background: #e6f5dc;
}
.learn-path-number {
  grid-area: number;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding-top: 0.1em;
  font: 1.3rem/1 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.learn-path-step.is-done .learn-path-number {
  background: #9ccf7f;
}
.learn-path-big {
  grid-area: big;
  font:
    700 clamp(1.6rem, 5vw, 2.2rem)/1.15 'Kero Japanese',
    var(--heading);
}
.learn-path-title {
  grid-area: title;
  margin: 0;
  font: 1.45rem/1.15 var(--heading);
}
.learn-path-line {
  grid-area: line;
  line-height: 1.35;
}
.learn-path-size {
  grid-area: size;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted, #4a3a2a);
}
.learn-path-go {
  grid-area: go;
  font: 1.6rem/1 var(--heading);
}
.learn-preview--path {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.learn-preview--path .learn-path {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.learn-path-does {
  grid-area: does;
  margin-top: 2px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--muted, #4a3a2a);
}
.learn-room--index .learn-path {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 8px 0 0;
}
.learn-room--index .learn-path-step {
  height: 100%;
  grid-template-areas:
    'number big go'
    'number title go'
    'number line go'
    'number does go'
    'number size go';
  align-content: start;
}
.learn-room--index .continue-box {
  margin: 12px 0 0;
}
.learn-steps-title {
  margin: 34px 0 16px;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

/* ════ /learn/: Kero at his desk ════ */
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.learn-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  margin-bottom: 14px;
}
.learn-hero-copy > p:not(.eyebrow) {
  max-width: 40ch;
}
.learn-order {
  padding: 10px 14px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.learn-saved {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.learn-order {
  margin: 18px 0 8px;
}
.learn-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font-weight: 700;
}
/* A returning learner's Continue button is the one yellow button; the newcomer's start goes white. */
.learn-hero-copy:has(.continue-box:not([hidden])) .learn-new .button {
  background: var(--paper);
}
.study-scene {
  margin: 0;
  min-width: 0;
}
.study-scene-inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 3px solid var(--ink);
  border-radius: 26px 22px 28px 24px;
  box-shadow: 6px 6px 0 var(--ink);
  background: #f6e7c8;
  transform: rotate(1deg);
}
.study-scene-inner picture,
.study-scene-room,
.study-scene-desk,
.study-scene-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.study-scene-room,
.study-scene-desk img {
  display: block;
  width: 100%;
  height: 100%;
  /* The room is drawn a hair wider than 3:2: fill the frame without stretching it. */
  object-fit: cover;
}
/* Kero stands behind the desk; the desk's back edge is at 66.5% of the room's height. */
.study-scene-kero {
  position: absolute;
  left: 33.5%;
  top: 38%;
  width: 33%;
  height: auto;
  animation: kero-reads 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* The same room again, drawn only below the desk's back edge, in front of Kero. */
.study-scene-desk {
  clip-path: inset(66.5% 0 0 0);
}
.study-scene-sheet path {
  fill: none;
  stroke: #3f3226;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: kana-write 0.42s ease-in backwards;
}
.study-scene figcaption {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
}
.study-scene figcaption a {
  text-decoration: underline;
  white-space: nowrap;
}
@keyframes kero-reads {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  45% {
    transform: translateY(-4%) rotate(-2deg);
  }
  60% {
    transform: translateY(-3%) rotate(1.5deg);
  }
}
@keyframes kana-write {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 860px) {
  .learn-room--index .learn-path {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 700px) {
  .learn-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .study-scene {
    order: -1;
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}
/* On a phone the picture shows the right three quarters of the room: Kero and the sheet. */
@media (max-width: 560px) {
  .study-scene-inner {
    aspect-ratio: 9 / 8;
    transform: none;
  }
  .study-scene-inner > picture,
  .study-scene-desk,
  .study-scene-sheet {
    width: 133.4%;
    left: -33.4%;
  }
  .study-scene-kero {
    left: calc(33.5% * 1.334 - 33.4%);
    width: calc(33% * 1.334);
  }
}

/* ════ The home page's short Learn block ════ */
.learn-preview--compact {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-top: 40px;
  padding-block: 48px;
}
.learn-preview--compact h2 {
  margin-bottom: 14px;
}
.learn-preview--compact .learn-preview-copy > p {
  max-width: 36ch;
  font-weight: 700;
}
/* Two steps a row up to tablets (four in a row squeezed the names), wider cards beside the copy
   on a desktop. */
.learn-path--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 901px) {
  .learn-path--compact {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
}
.learn-path--compact .learn-path-step {
  grid-template-areas:
    'number title go'
    'number size go';
  padding: 12px 14px;
}
.learn-path--compact .learn-path-number {
  align-self: center;
}
.learn-path--compact .learn-path-title {
  font-size: 1.25rem;
}
@media (max-width: 900px) {
  .learn-preview--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
/* On phones the number and arrow share the top line and the name gets the card's full width, so
   names such as "Hiragana" keep whole words from 320 px up. */
@media (max-width: 560px) {
  .learn-path--compact {
    gap: 10px;
  }
  .learn-path--compact .learn-path-step {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'number go'
      'title title'
      'size size';
    row-gap: 4px;
    padding: 10px 12px;
  }
  .learn-path--compact .learn-path-number {
    justify-self: start;
    width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
  }
  .learn-path--compact .learn-path-go {
    font-size: 1.3rem;
  }
  .learn-path--compact .learn-path-title {
    font-size: 1.15rem;
  }
}
.learn-games {
  margin-top: 40px;
}
.learn-games .section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
@media (max-width: 900px) {
  .learn-preview--path {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .learn-preview--path .learn-path {
    grid-template-columns: 1fr;
  }
  .learn-path-step {
    padding: 14px 14px;
    column-gap: 10px;
  }
}

/* One stroke after another, in stroke order: あ い う え お. */
.study-scene-sheet .stroke-0 {
  animation-delay: 0.8s;
}
.study-scene-sheet .stroke-1 {
  animation-delay: 1.25s;
}
.study-scene-sheet .stroke-2 {
  animation-delay: 1.7s;
}
.study-scene-sheet .stroke-3 {
  animation-delay: 2.15s;
}
.study-scene-sheet .stroke-4 {
  animation-delay: 2.6s;
}
.study-scene-sheet .stroke-5 {
  animation-delay: 3.05s;
}
.study-scene-sheet .stroke-6 {
  animation-delay: 3.5s;
}
.study-scene-sheet .stroke-7 {
  animation-delay: 3.95s;
}
.study-scene-sheet .stroke-8 {
  animation-delay: 4.4s;
}
.study-scene-sheet .stroke-9 {
  animation-delay: 4.85s;
}
.study-scene-sheet .stroke-10 {
  animation-delay: 5.3s;
}
.study-scene-sheet .stroke-11 {
  animation-delay: 5.75s;
}

/* ════ Game cards: /play/, the Games row on /learn/ and the Play row on the home page ════ */
.game-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 16px;
}
.game-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 10px 10px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.18s;
}
.game-card:hover {
  transform: translateY(-3px);
}
.game-art {
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
}
.game-card--pond .game-art {
  background: #8fd0c4;
}
.game-card--picnic .game-art {
  background: repeating-linear-gradient(90deg, #ffe2a8 0 18px, #ffd28a 18px 36px), #ffe2a8;
}
.game-card--gold .game-art {
  background: var(--yellow);
}
.game-card--blue .game-art {
  background: var(--blue);
}
.game-card--peach .game-art {
  background: #ffd9c2;
}
.game-card--paper .game-art {
  background: white;
}
.game-card--town .game-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-art > img {
  position: absolute;
  height: auto;
}
.game-art-lotus {
  width: 40%;
  left: 30%;
  bottom: -4%;
}
.game-art-kero {
  width: 36%;
  left: 32%;
  bottom: 20%;
  transform: rotate(-8deg);
}
.game-art-plate {
  width: 56%;
  left: 8%;
  bottom: 10%;
}
.game-art-gyoza {
  width: 24%;
  left: 24%;
  bottom: 26%;
  transform: rotate(-6deg);
}
.game-art-goro {
  width: 34%;
  right: 6%;
  bottom: 4%;
}
.game-art-bubble {
  position: absolute;
  top: 10%;
  left: 5%;
  padding: 3cqw 6cqw;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 55% 45% 49% 51% / 48% 58% 42% 52%;
  text-align: center;
  transform: rotate(-4deg);
}
.game-art-bubble b {
  display: block;
  font:
    700 1.05rem/1.3 'Kero Japanese',
    sans-serif;
  font-size: 9cqw;
}
.game-art-bubble span {
  display: block;
  font-size: 0.6875rem;
  font-size: 5.5cqw;
  font-weight: 700;
}
.game-art-kero--quiz {
  left: auto;
  right: 4%;
  bottom: -14%;
  width: 34%;
}
.game-card--paper .game-art > svg {
  width: 100%;
  height: 100%;
  padding: 4px;
}
.game-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-inline: 4px;
  font: 1.3rem/1.15 var(--heading);
}
.game-what {
  padding-inline: 4px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--muted);
}

/* ════ /play/ ════ */
.play-intro h1 span {
  color: var(--red);
}
.play-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding-top: 8px;
  padding-bottom: 24px;
}
.play-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.play-card .game-art {
  margin: 0;
}
.play-card h2 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
.play-card-copy > p {
  margin-bottom: 10px;
}
.play-levels-label {
  font-weight: 700;
}
.play-levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.play-levels a {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 8px 12px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.18s;
}
.play-levels a:hover {
  transform: translateY(-2px);
}
.play-level-big {
  font:
    700 1.3rem/1.2 'Kero Japanese',
    var(--heading);
}
.play-level-name {
  font-size: 0.875rem;
  font-weight: 700;
}
.play-more {
  padding-top: 24px;
}
.play-more h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
}
@media (max-width: 760px) {
  .play-featured {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 420px) {
  .game-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .game-card {
    padding: 8px 8px 12px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .game-title {
    font-size: 1.1rem;
  }
  .game-what {
    font-size: 0.8125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .play-levels a {
    transition: none;
  }
}

/* Match on /play/: a word and its meaning on two little cards. */
.game-art-cards {
  position: absolute;
  top: 12%;
  left: 6%;
  display: flex;
  gap: 4cqw;
}
.game-art-card {
  display: grid;
  place-items: center;
  min-width: 22cqw;
  min-height: 30cqw;
  padding: 2cqw 3cqw;
  font:
    700 1.05rem/1.2 'Kero Japanese',
    sans-serif;
  font-size: 9cqw;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-6deg);
}
.game-art-card small {
  display: block;
  font: 700 0.6875rem/1 var(--body, sans-serif);
  font-size: 5cqw;
  color: var(--red, #b6382b);
}
.game-art-card--en {
  font-family: var(--heading, sans-serif);
  font-size: 13cqw;
  background: #fff4d6;
  transform: rotate(5deg);
}
.game-art-kero--match {
  left: auto;
  right: 4%;
  bottom: -12%;
  width: 34%;
  transform: rotate(6deg);
}

/* Three featured games on /play/: three across on a wide screen. */
@media (min-width: 1100px) {
  .play-featured {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}