@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);
}
/* KEROTOWN ONLINE, named in full (the owner, 28 October 2026): one line wherever the menu is one
   row, KEROTOWN over ONLINE on a phone (below). */
.site-header nav > a.nav-online {
  white-space: nowrap;
}
/* 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;
}
/* Eight places beside the logo need a little less room from here down, and less again near 960px,
   where the menu moves under the logo. Each step starts where the one above it stops fitting on
   one line, KEROTOWN ONLINE in full. */
@media (max-width: 1260px) {
  .site-header {
    gap: 18px;
  }
  .site-header nav {
    gap: 18px;
  }
}
@media (max-width: 1160px) {
  .site-header {
    gap: 14px;
  }
  .site-header nav {
    gap: 14px;
    font-size: 0.875rem;
  }
}
/* Just over 960px the eight places still fit on one line beside the logo, a little closer. */
@media (max-width: 1080px) {
  .site-header {
    gap: 10px;
  }
  .site-header nav {
    gap: 7px;
    font-size: 0.8125rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 11px;
  }
}
/* Two rows from here down: the logo and the Watch tab on top, the eight places under them, spread
   across the whole width so every one shows on a 320px phone without sideways scrolling. Eight
   places only fit beside the logo from 960px. */
@media (max-width: 960px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 14px 5% 6px;
  }
  /* 44 px tall like every other tap target in the menu (audit F24). */
  .site-header .watch-tab {
    margin-left: auto;
    min-height: 44px;
    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;
  }
}
/* Just over 640px the eight places still fit one row under the logo, a little smaller. */
@media (min-width: 641px) and (max-width: 700px) {
  .site-header nav {
    font-size: 0.8125rem;
  }
}
/* Eight places do not fit one row on a phone or a small tablet, so they sit in a row of four over a
   row of four (Learn, Manga, Fan art, Characters over KEROTOWN, KEROTOWN ONLINE, Japan, Ideas),
   spread across the whole width, so the header stays two rows tall and the home page's first tiles
   stay on the first screen. KEROTOWN ONLINE stands as KEROTOWN over ONLINE, no wider than KEROTOWN
   and inside its 44px tap, so the header is no taller. Each column is as wide as its longest name,
   so Characters and KEROTOWN never clip, and every place is a 44px tap. The header is the size
   container, so the menu itself can change its columns: by the header's width in its own em, with
   text at 200% a place is never narrower than its longest name, so the places go three a row, two
   a row or one a row, and none runs into another. */
@media (max-width: 640px) {
  .site-header {
    container: site-header / inline-size;
  }
  .site-header nav {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    justify-items: center;
    gap: 0 4px;
  }
  .site-header nav > a {
    justify-content: center;
    min-width: 44px;
  }
  /* Its current mark is one bar under both words: an underline under KEROTOWN would run into
     ONLINE. */
  .site-header nav > a.nav-online {
    flex-direction: column;
    gap: 0;
    width: min-content;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
  }
  .site-header nav > a.nav-online[aria-current] {
    text-decoration: none;
  }
  .site-header nav > a.nav-online[aria-current]::after {
    content: '';
    align-self: stretch;
    margin-top: 4px;
    border-top: 3px solid;
  }
  @container site-header (width < 18em) {
    .site-header nav {
      grid-template-columns: repeat(3, auto);
    }
  }
  @container site-header (width < 13.5em) {
    .site-header nav {
      grid-template-columns: repeat(2, auto);
    }
  }
  @container site-header (width < 10em) {
    .site-header nav {
      grid-template-columns: auto;
      justify-content: center;
    }
  }
}
@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;
  }
}
/* Four places a row on a 320 px phone, with room to spare. */
@media (max-width: 340px) {
  .site-header nav {
    gap: 0 2px;
    font-size: 0.75rem;
  }
  .site-header nav > a.nav-learn {
    padding: 0 8px;
  }
}
@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;
}

.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--vocab {
  background: #ece4f7;
}
.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;
}
/* The way into the games, part of Learn: a plain link under the order, not a second button. */
.learn-to-games {
  margin-bottom: 2px;
}
/* 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;
}

/* ════ /kerotown/: KEROTOWN, Kero's game, and the way to Google Play ════ */
.kerotown-site h2 > span {
  color: var(--red);
}
/* Headings shrink to fit their box rather than break a word in two, which at 200% text on a phone
   split KEROTOWN, DOMINATION and Japanese down the middle. 21vw keeps Japanese, the longest h2
   word at 4.0em, inside a 320 px screen. */
.kerotown-site h2 {
  font-size: min(clamp(2.5rem, 4.5vw, 4rem), 21vw);
}
.kerotown-heading {
  margin-bottom: 28px;
}
.kerotown-heading h2 {
  margin-bottom: 10px;
}
.kerotown-heading p,
.kerotown-section-line {
  max-width: 40rem;
  margin-bottom: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}
.kerotown-note {
  margin: 22px 0 0;
  font-weight: 700;
}

/* ── The hero: on a phone the store button comes straight after the lead, so it is on the first
   screen above the cookie bar, then the facts and the picture (audit F04); on a wide screen the
   picture moves to the right of the words ── */
.kerotown-hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 32px;
  padding-bottom: 40px;
}
.kerotown-hero .eyebrow {
  color: var(--red);
  margin-bottom: 8px;
}
/* KEROTOWN. is 5.25em wide: never more than its column, so the name and its full stop stay whole. */
.kerotown-hero h1 {
  margin-bottom: 14px;
  font-size: min(clamp(3rem, 7vw, 6rem), 18cqi);
}
.kerotown-hero h1 span {
  color: var(--red);
}
.kerotown-lead {
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}
.kerotown-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}
.kerotown-facts li {
  padding: 4px 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 700;
}
.kerotown-facts li:first-child {
  background: #9bd8ae;
}
/* The town in a postcard frame, with the site's own Kero cutout stepping out of it. */
.kerotown-hero-art {
  position: relative;
  min-width: 0;
  margin: 4px 0 40px;
}
.kerotown-hero .kerotown-lead {
  margin-bottom: 20px;
}
.kerotown-frame {
  display: block;
  padding: 8px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 5px 7px 0 #b88e46;
  transform: rotate(1.5deg);
}
.kerotown-frame img,
.kerotown-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.kerotown-kero {
  position: absolute;
  width: 24%;
  left: -3%;
  bottom: -14%;
  transform: rotate(-10deg);
}

/* ── Google Play: the one big button, what it means, and the App Store still to come ── */
.kerotown-store {
  display: grid;
  justify-items: start;
  gap: 12px;
}
.button.kerotown-play {
  min-height: 66px;
  padding: 16px 30px;
  font-size: 1.1875rem;
  border-width: 3px;
  box-shadow: 0 5px 0 var(--ink);
}
.button.kerotown-play:hover {
  box-shadow: 0 8px 0 var(--ink);
}
.kerotown-store-line {
  max-width: 30rem;
  margin: 2px 0 0;
  font-size: 1rem;
  line-height: 1.45;
}
/* The pre-registrations, straight under the button: one size, the total in red. */
.kerotown-prereg {
  max-width: 30rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
}
.kerotown-prereg strong {
  color: var(--red);
}
.kerotown-store-soon {
  margin: 0;
  padding: 6px 14px;
  border: 2px dashed var(--muted);
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

/* ── The site's ink card round a capture ── */
.kerotown-shot {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 18px 16px 20px 15px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* ── A word the game shows: hiragana, romaji and English ── */
.kerotown-word {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  line-height: 1.3;
}
/* A word is never broken across two lines: at 200% text on a small phone a long one shrinks to the
   screen instead (ちょうちんおばけ is eight kana). */
.kerotown-word b {
  font:
    700 min(1.375rem, 8.5vw) / 1.3 'Kero Japanese',
    sans-serif;
  white-space: nowrap;
  color: var(--red);
}
.kerotown-site p span[lang='ja'] {
  white-space: nowrap;
}
.kerotown-romaji {
  font-weight: 700;
}
.kerotown-english {
  font-size: 0.9375rem;
  color: var(--muted);
}
.kerotown-word--card {
  display: grid;
  justify-items: center;
  min-width: 96px;
  height: 100%;
  padding: 8px 12px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
  box-shadow: 0 3px 0 var(--ink);
  text-align: center;
}
.kerotown-word--card b {
  font-size: min(1.625rem, 8vw);
}
.kerotown-word--card .kerotown-english {
  color: var(--ink);
}

/* ── The fighters: the game's own picker beside what each power does ── */
.kerotown-fighters {
  padding-top: 40px;
}
.kerotown-fighters-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.kerotown-fighter-list,
.kerotown-mode-list,
.kerotown-map-list,
.kerotown-rungs,
.kerotown-word-list,
.kerotown-way-list,
.kerotown-safe-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kerotown-fighter-list {
  display: grid;
  gap: 14px;
}
/* The name and its power badge share a line while they fit, and the badge drops under the name when
   they do not (200% text on a small phone), so a name is never split. */
.kerotown-fighter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  padding: 14px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-fighter h3 {
  margin: 0;
  font-size: 1.75rem;
}
.kerotown-fighter p,
.kerotown-fighter .kerotown-word {
  flex: 1 0 100%;
}
.kerotown-fighter p {
  margin: 0;
  font-size: 1.0625rem;
}
.kerotown-fighter .kerotown-word {
  margin-top: 6px;
}
.kerotown-power {
  padding: 2px 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 1.125rem/1.4 var(--heading);
  letter-spacing: 0.04em;
}
.kerotown-fighter--kero .kerotown-power {
  background: #7cc8f2;
}
.kerotown-fighter--sensei .kerotown-power {
  background: #e9e2ff;
}
.kerotown-fighter--goro .kerotown-power {
  background: #ff9418;
}

/* ── The modes: the game's own three cards, in their own colours ── */
.kerotown-modes {
  padding-top: 32px;
}
/* Three across from a tablet up (12.5rem is 200 px, so a 768 px screen has no card left alone on a
   second row), and fewer, wider cards when the text is made bigger. */
.kerotown-mode-list {
  container: modes / inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 18px;
}
.kerotown-mode {
  container-type: inline-size;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-mode-top {
  display: grid;
  place-items: center;
  padding: 16px;
  border-bottom: 3px solid var(--ink);
}
.kerotown-mode--gold .kerotown-mode-top {
  background: #ffd260;
}
.kerotown-mode--blue .kerotown-mode-top {
  background: #a5d8f6;
}
.kerotown-mode--green .kerotown-mode-top {
  background: #badf8d;
}
.kerotown-mode-mark {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* DOMINATION, 6.2em, always fits between the card's margins. */
.kerotown-mode h3 {
  margin: 16px 18px 6px;
  font-size: min(1.625rem, calc(16cqi - 7px));
}
.kerotown-mode p {
  margin: 0 18px 18px;
  font-size: 1.0625rem;
}

/* ── The four maps, two a row from a tablet up ── */
.kerotown-maps {
  padding-top: 32px;
}
.kerotown-map-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 28px;
}
.kerotown-map-copy {
  padding: 14px 4px 0;
}
.kerotown-map h3 {
  margin: 0 0 4px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.kerotown-map p {
  margin: 6px 0 0;
  font-size: 1.0625rem;
}

/* ── Bonk in a row: the three rewards beside BIG KERO, then the Oni ── */
.kerotown-streak {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: 40px;
}
.kerotown-streak h2 {
  margin-bottom: 10px;
}
.kerotown-rungs {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.kerotown-rung {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.kerotown-rung-at {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 1.75rem/1 var(--heading);
}
.kerotown-rung h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 4px 0 4px;
  /* OCTOPUS, 4.2em, fits beside the number's 70 px. */
  font-size: min(1.625rem, calc(22cqi - 16px));
}
.kerotown-rung p {
  margin: 0;
  font-size: 1.0625rem;
}
.kerotown-tag {
  padding: 1px 10px;
  background: #ffd260;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 700 0.75rem/1.6 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kerotown-oni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 32px;
  align-items: center;
  margin-top: 12px;
  padding: 18px;
  background: #ffd9d2;
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.kerotown-oni h3 {
  margin: 0 0 6px;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
}
.kerotown-oni p {
  max-width: 28rem;
  margin: 10px 0 0;
  font-size: 1.125rem;
}

/* ── Japanese all around: the butter band the site uses for learning ── */
.kerotown-words {
  margin-block: 32px;
  background: var(--butter);
  border-block: 3px solid var(--ink);
}
.kerotown-words-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 56px;
  align-items: center;
  padding-block: 56px;
}
.kerotown-words h2 {
  margin-bottom: 10px;
}
.kerotown-words h3 {
  margin: 28px 0 14px;
  font-size: 1.625rem;
}
/* Each word card as wide as its word, at least 7.5rem, sharing out what is left of the row. */
.kerotown-word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kerotown-word-list > li {
  flex: 1 1 7.5rem;
}

/* ── Play your way ── */
.kerotown-ways {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 56px;
  align-items: center;
  padding-top: 40px;
}
.kerotown-way-list {
  display: grid;
  gap: 14px;
}
.kerotown-way {
  padding: 14px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-way h3 {
  margin: 0 0 4px;
  font-size: 1.5rem;
}
.kerotown-way p {
  margin: 0;
  font-size: 1.0625rem;
}
.kerotown-way--wifi {
  background: #d9f0e0;
}

/* ── The trailer: its own thumbnail, and the title's link covers the whole card ── */
.kerotown-trailer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 48px;
  padding-top: 32px;
}
.kerotown-trailer-card {
  position: relative;
  display: grid;
  grid-template-columns: min(44%, 220px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  max-width: 640px;
}
.kerotown-trailer-thumb {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  border: 3px solid var(--ink);
  border-radius: 18px 16px 20px 15px;
  box-shadow: 4px 4px 0 var(--ink);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.kerotown-trailer-thumb img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
/* A play mark over the picture: YouTube's red circle with a white triangle, drawn here. */
.kerotown-trailer-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--red);
}
.kerotown-trailer-play::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 14px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent white;
}
.kerotown-trailer-card:hover .kerotown-trailer-thumb {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 4px 7px 0 var(--ink);
}
/* The title's longest word, KEROTOWN (5.2em), always fits the column beside the picture, even at
   200% text: on a phone that column is 0.55 of the screen's 88vw, less the gap. (No container
   here: it would hold the link's full card cover inside the column.) */
.kerotown-trailer-copy h3 {
  margin: 0 0 8px;
  font-size: min(clamp(1.375rem, 2.6vw, 2rem), calc(8.5vw - 2px));
}
.kerotown-trailer-copy p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.kerotown-trailer-link::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: 1;
  border-radius: 20px;
}
.kerotown-trailer-link:focus-visible {
  outline: none;
}
.kerotown-trailer-link:focus-visible::after {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.kerotown-trailer-card:hover .kerotown-trailer-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.kerotown-trailer-link > span[aria-hidden] {
  margin-left: 8px;
}

/* ── Good to know ── */
.kerotown-safety {
  padding-top: 40px;
  padding-bottom: 24px;
}
.kerotown-safe-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.kerotown-safe {
  position: relative;
  padding: 16px 18px 18px 64px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-safe::before {
  content: '✓';
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #9bd8ae;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-weight: 800;
}
.kerotown-safe h3 {
  margin: 2px 0 6px;
  font-size: 1.5rem;
}
.kerotown-safe p {
  margin: 0;
  font-size: 1rem;
}
.kerotown-safety-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  max-width: 44rem;
  margin: 26px 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ── The end: the store again, on the butter card ── */
.kerotown-final {
  padding-top: 40px;
  padding-bottom: 24px;
}
.kerotown-final-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  padding: 32px 24px;
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.kerotown-final h2 {
  margin-bottom: 12px;
}
.kerotown-final-copy p {
  font-size: 1.125rem;
  margin-bottom: 8px;
}

/* ── The news line under the store: the channel, for an iPhone family meanwhile (audit F03) ── */
.kerotown-store-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 12px;
  max-width: 30rem;
  margin: 0;
  font-size: 0.9375rem;
}
.kerotown-store-news .text-link,
.kerotown-channel .text-link {
  gap: 8px;
}

/* ── How to play: each move with its drawn mark, beside a capture of the ink ── */
.kerotown-moves {
  padding-top: 24px;
}
.kerotown-moves-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.kerotown-move-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}
.kerotown-move {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-move-mark {
  width: 52px;
  height: 52px;
  padding: 6px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kerotown-move--ink .kerotown-move-mark {
  background: #a5d8f6;
}
.kerotown-move--capsule .kerotown-move-mark {
  background: #f7b6c8;
}
.kerotown-move h3 {
  margin: 0 0 2px;
  font-size: min(1.5rem, 8vw);
}
.kerotown-move p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* ── A map's card: the whole card opens its page ── */
.kerotown-map {
  position: relative;
}
.kerotown-map-frogs {
  font-weight: 700;
}
.kerotown-map-go::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: 1;
  border-radius: 20px;
}
.kerotown-map-go:focus-visible {
  outline: none;
}
.kerotown-map-go:focus-visible::after {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.kerotown-map:hover .kerotown-map-go {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.kerotown-map:hover .kerotown-shot {
  transform: translateY(-3px) rotate(-0.5deg);
}
.kerotown-map .kerotown-shot {
  transition: transform 0.18s;
}

/* ── Play your way: the cards, and the ONLINE and QUICK PLAY screens ── */
.kerotown-ways-shots {
  display: grid;
  gap: 20px;
}
.kerotown-way--coins {
  background: #fff1c2;
}
.kerotown-way .text-link,
.kerotown-safe .text-link,
.kerotown-help-item .text-link {
  margin-top: 4px;
}

/* ── Kero Town, a later update: the town's green band ── */
.kerotown-town {
  margin-block: 40px 8px;
  background: #d9f0e0;
  border-block: 3px solid var(--ink);
}
.kerotown-town-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 48px;
}
.kerotown-town-inner .kerotown-heading {
  margin-bottom: 0;
}
.kerotown-town-inner .kerotown-word {
  margin-bottom: 10px;
}
.kerotown-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 14px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kerotown-town-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}
.kerotown-town-point {
  padding: 14px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-town-point h3 {
  margin: 0 0 4px;
  font-size: 1.5rem;
}
.kerotown-town-point p {
  margin: 0;
  font-size: 1.0625rem;
}
.kerotown-town-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 18px;
}
.kerotown-town-go {
  justify-self: start;
}

/* ── Fan art: every drawing as the same small tile, with its artist ── */
.kerotown-fans {
  padding-top: 40px;
}
/* More fan art is coming: the owner's word on the butter card, Kero beside it, big enough to
   notice, with the art wall link right there. */
.kerotown-fans-coming {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px 14px;
  align-items: center;
  max-width: 44rem;
  margin: 0 0 28px;
  padding: 16px 20px 14px;
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-fans-coming-kero {
  width: 64px;
  height: auto;
  transform: rotate(-8deg);
}
.kerotown-fans-coming p,
.kerotown-fan-hero-copy .kerotown-fans-coming p {
  max-width: none;
  margin: 0;
}
.kerotown-fans-coming .kerotown-fans-coming-title {
  font: 1.625rem/1.15 var(--heading);
}
.kerotown-fans-coming .kerotown-fans-coming-line,
.kerotown-fans-coming .text-link {
  grid-column: 1 / -1;
}
.kerotown-fans-coming .kerotown-fans-coming-line {
  font-size: 1.0625rem;
  line-height: 1.55;
}
.kerotown-fans-coming .text-link {
  justify-self: start;
}
.kerotown-fan-hero-copy .kerotown-fans-coming {
  margin: 20px 0 22px;
}
.kerotown-fan-tiles,
.kerotown-fan-cards {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Tiles share a row while they are at least 8rem, so bigger text means fewer, wider tiles. */
.kerotown-fan-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: 14px;
}
/* Positioned, so the words only a screen reader hears stay inside the tile, and inside the strip
   a phone swipes along, rather than widening the page. */
.kerotown-fan-tile-link {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  padding: 8px 8px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.18s;
}
.kerotown-fan-tile-link:hover {
  transform: translateY(-2px);
}
.kerotown-fan-tile-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-bottom: 6px;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}
.kerotown-fan-tile-art img,
.kerotown-fan-card-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kerotown-fan-name {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.kerotown-fan-handle {
  display: block;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.kerotown-fans-swipe {
  display: none;
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted);
}
.kerotown-fans-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 18px 0 0;
}

/* ── Where the drawings hang: one card a map, stacked on a phone and two a row from a tablet up,
   each with its count, where to look, a little picture of every drawing and the two ways on ── */
.kerotown-hang {
  padding-top: 40px;
}
.kerotown-hang-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 24px;
  margin: 0;
  padding: 0;
}
.kerotown-hang-map {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
/* The name and its count share a line while they fit; the count drops under the name when they
   do not (200% text on a small phone), so a name is never split. */
.kerotown-hang-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.kerotown-hang-top h3 {
  margin: 0;
  font-size: min(1.75rem, 9vw);
}
.kerotown-hang-count {
  padding: 2px 12px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 800;
  white-space: nowrap;
}
.kerotown-hang-where {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.kerotown-hang-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  margin-bottom: 28px;
}
.kerotown-hang-intro .kerotown-heading {
  margin-bottom: 18px;
}
.kerotown-hang-shot {
  margin: 0;
}
.kerotown-hang-shot figcaption {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}
/* A little picture of every drawing, as many a row as fit and never bigger than 56 px. */
.kerotown-hang-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 56px));
  gap: 6px;
  width: 100%;
}
.kerotown-hang-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px 9px 11px 8px;
}
.kerotown-hang-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kerotown-hang-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
  margin: auto 0 0;
  padding-top: 4px;
}
/* The words and the arrow wrap as one line of text, so on a small phone a long link breaks
   between words and its arrow stays beside the last word instead of floating to the card's edge.
   Still a 44 px tap target. */
.kerotown-hang-links .text-link {
  display: block;
  padding-block: 10px;
  line-height: 1.5;
}
.kerotown-hang-links .text-link span {
  margin-left: 6px;
}

/* ── The trailer's side: the card, then the channel ── */
.kerotown-trailer-side {
  display: grid;
  gap: 18px;
}
.kerotown-channel {
  display: grid;
  justify-items: start;
  gap: 0;
  margin: 0;
  font-size: 0.9375rem;
}

/* ── Good to know: the heading beside the ready-made messages, then the cards ── */
.kerotown-safety-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 48px;
  align-items: center;
  margin-bottom: 28px;
}
.kerotown-safety-line .text-link {
  margin-left: 4px;
}

/* ── Help (audit F01): the store listings' Support URL lands here ── */
.kerotown-help {
  padding-top: 40px;
  scroll-margin-top: 90px;
}
.kerotown-help-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.kerotown-help-item {
  padding: 16px 18px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
  scroll-margin-top: 90px;
}
.kerotown-help-item h3 {
  margin: 2px 0 8px;
  font-size: 1.375rem;
}
.kerotown-help-item p {
  margin: 0;
  font-size: 1rem;
}
.kerotown-help-item--email {
  grid-column: 1 / -1;
  background: var(--butter);
}
.kerotown-email {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.kerotown-ideas {
  margin: 16px 0 0;
  font-size: 1rem;
}

/* ════ The pages under /kerotown/: a map, Kero Town and the fan art ════ */
.kerotown-sub-top {
  padding-top: 18px;
  padding-bottom: 0;
}
.kerotown-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
}
.kerotown-back:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.kerotown-map-hero {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 24px;
}
.kerotown-map-hero h1 {
  margin-bottom: 10px;
  font-size: min(clamp(3rem, 7vw, 5.5rem), 15cqi);
}
.kerotown-map-hero h1 span,
.kerotown-fan-hero h1 span {
  color: var(--red);
}
.kerotown-map-hero .eyebrow,
.kerotown-fan-hero .eyebrow {
  color: var(--red);
  margin-bottom: 8px;
}
.kerotown-word--big b {
  font-size: min(2rem, 11vw);
}
.kerotown-word--big {
  margin-bottom: 12px;
}
.kerotown-map-title .kerotown-lead {
  margin-bottom: 18px;
}
.kerotown-map-big {
  box-shadow: 6px 6px 0 var(--ink);
}
.kerotown-features {
  padding-top: 24px;
}
.kerotown-feature-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
}
.kerotown-feature {
  padding: 16px 18px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-feature h3 {
  margin: 0 0 6px;
  font-size: 1.625rem;
}
.kerotown-feature p {
  margin: 8px 0 0;
  font-size: 1.0625rem;
}
.kerotown-map-more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 20px;
}
.kerotown-sub-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  padding-top: 8px;
  padding-bottom: 32px;
}

/* ── The fan art page: the cards, one per drawing, all alike ── */
.kerotown-fan-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-top: 8px;
}
.kerotown-fan-hero h1 {
  margin-bottom: 10px;
}
.kerotown-fan-hero-copy p {
  max-width: 36rem;
  font-size: 1.0625rem;
}
.kerotown-fan-hero-art {
  margin: 0;
}
.kerotown-fan-hero-art figcaption {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
}
.kerotown-fan-jump ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.kerotown-fan-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-weight: 700;
}
.kerotown-fan-jump a span {
  padding: 0 8px;
  background: var(--yellow);
  border-radius: 999px;
}
.kerotown-fan-jump a:hover {
  background: var(--butter);
}
.kerotown-fan-map {
  padding-top: 40px;
  scroll-margin-top: 90px;
}
.kerotown-fan-map .kerotown-word {
  margin-bottom: 8px;
}
.kerotown-fan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.kerotown-fan-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
  scroll-margin-top: 90px;
}
.kerotown-fan-card:target {
  outline: 4px solid var(--red);
  outline-offset: 3px;
}
.kerotown-fan-card-art {
  aspect-ratio: 1;
  padding: 10px;
  background: #fff;
  border-bottom: 3px solid var(--ink);
}
.kerotown-fan-card-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 16px 12px;
}
.kerotown-fan-card-copy h3 {
  margin: 0;
  font-size: 1.375rem;
}
.kerotown-fan-credit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
}
.kerotown-fan-avatar {
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.kerotown-fan-where {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ── Kero Town's page ── */
.kerotown-town-when {
  display: inline-block;
  margin: 0;
  padding: 8px 14px;
  background: #d9f0e0;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-weight: 700;
}
.kerotown-town-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding-top: 40px;
}
.kerotown-town-part-copy p {
  max-width: 36rem;
  font-size: 1.125rem;
}
.kerotown-town-words {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
}
.kerotown-town-part-shots {
  display: grid;
  gap: 18px;
}
.kerotown-sights {
  padding-top: 40px;
}
.kerotown-sight-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}
.kerotown-sight {
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-sight .kerotown-shot {
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.kerotown-sight-copy {
  padding: 14px 18px 18px;
}
.kerotown-sight-copy h3 {
  margin: 0 0 6px;
  font-size: min(1.5rem, 7.5vw);
}
.kerotown-sight-copy p {
  margin: 8px 0 0;
}
.kerotown-sight--words {
  background: var(--butter);
}

@media (min-width: 700px) {
  .kerotown-map-list,
  .kerotown-hang-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 860px) {
  .kerotown-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    column-gap: 56px;
    padding-top: 48px;
  }
  .kerotown-hero > * {
    grid-column: 1;
  }
  /* The words' column is 0.45 of the hero less the gap. */
  .kerotown-hero h1 {
    font-size: min(clamp(3rem, 7vw, 6rem), calc(8.4cqi - 5px));
  }
  .kerotown-hero > .eyebrow {
    grid-row: 2;
  }
  .kerotown-hero > h1 {
    grid-row: 3;
  }
  .kerotown-hero > .kerotown-lead {
    grid-row: 4;
  }
  .kerotown-hero > .kerotown-store {
    grid-row: 5;
  }
  .kerotown-hero > .kerotown-facts {
    grid-row: 6;
    margin: 22px 0 0;
  }
  .kerotown-hero > .kerotown-hero-art {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    margin-bottom: 18px;
  }
  .kerotown-fighters-body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
  }
  .kerotown-streak {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: 48px;
    align-items: center;
  }
  .kerotown-oni {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    padding: 24px;
  }
  .kerotown-words-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .kerotown-ways {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
  .kerotown-trailer {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  .kerotown-trailer .kerotown-heading {
    margin-bottom: 0;
  }
  /* Two equal halves: an auto store column grew with bigger text and squeezed Be first to play. */
  .kerotown-final-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 40px 44px;
  }
}
/* On a phone the drawings are a strip of two rows to swipe along, so 34 of them do not make the
   page five screens longer; every tile is still a link a keyboard reaches in order. */
@media (max-width: 699px) {
  .kerotown-fan-tiles {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(8.5rem, 40%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 4px 14px;
  }
  .kerotown-fan-tile {
    scroll-snap-align: start;
  }
  .kerotown-fans-swipe {
    display: block;
  }
}
/* On a phone each mode is a row: its mark on the left in the card's colour, its words beside. With
   the text made big there is no room beside the mark, so the card keeps its mark on top. */
@media (max-width: 699px) {
  @container modes (min-width: 17rem) {
    .kerotown-mode {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      grid-template-rows: auto 1fr;
    }
    .kerotown-mode-top {
      grid-row: 1 / -1;
      border-bottom: 0;
      border-right: 3px solid var(--ink);
    }
    .kerotown-mode-mark {
      width: 44px;
      height: 44px;
    }
    .kerotown-mode h3 {
      margin: 14px 16px 2px;
      font-size: min(1.375rem, calc(16cqi - 18px));
    }
    .kerotown-mode p {
      margin: 0 16px 14px;
      font-size: 1rem;
    }
  }
  .kerotown-hero-art {
    margin-bottom: 32px;
  }
}
/* On a phone the facts sit between the store and the picture. */
@media (max-width: 859px) {
  .kerotown-hero > .kerotown-facts {
    margin: 20px 0 22px;
  }
}
@media (max-width: 520px) {
  .kerotown-store,
  .button.kerotown-play {
    width: 100%;
  }
  .button.kerotown-play {
    padding-inline: 18px;
    font-size: 1.0625rem;
  }
  .kerotown-trailer-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
  }
  .kerotown-safe {
    padding-left: 60px;
  }
}
@media (min-width: 860px) {
  .kerotown-moves-body {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 40px;
  }
  .kerotown-town-inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 48px;
    align-items: center;
  }
  .kerotown-town-shots,
  .kerotown-town-go {
    grid-column: 1 / -1;
  }
  .kerotown-town-shots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kerotown-safety-top,
  .kerotown-hang-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .kerotown-hang-intro {
    align-items: center;
  }
  .kerotown-map-hero,
  .kerotown-fan-hero {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 48px;
  }
  .kerotown-map-hero h1 {
    font-size: min(clamp(3rem, 7vw, 5.5rem), calc(6.4cqi - 4px));
  }
  .kerotown-town-part {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }
  .kerotown-town-part:nth-of-type(even) .kerotown-town-part-copy {
    order: 1;
  }
}
/* ── Easier on the eye on a phone (the owner, 23 October 2026): text at full size, the drawings
   strip one row of wider tiles so names stay whole, fewer screens of stacked pictures, and more
   room inside the cards ── */
@media (max-width: 699px) {
  .kerotown-note {
    font-size: 1rem;
    line-height: 1.55;
  }
  .kerotown-english {
    font-size: 1rem;
  }
  /* One row to swipe, each tile wide enough for its artist's name and handle. */
  .kerotown-fan-tiles {
    grid-template-rows: auto;
    /* A fixed share, not minmax: with 34 tracks there is no free space to grow into, so a
       minmax track would sit at its minimum. */
    grid-auto-columns: max(min(10rem, 85%), 56%);
    gap: 12px;
  }
  .kerotown-fan-handle {
    font-size: 0.9375rem;
  }
  .kerotown-fans-coming {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 14px 18px 12px;
  }
  .kerotown-fans-coming-kero {
    width: 52px;
  }
  .kerotown-fans-coming .kerotown-fans-coming-title {
    font-size: min(1.5rem, 7.5vw);
  }
  /* Kero Town's three pictures: the first across the card, the other two side by side. */
  .kerotown-town-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .kerotown-town-shots > :first-child {
    grid-column: 1 / -1;
  }
  .kerotown-final-inner {
    gap: 28px;
    padding: 28px 20px;
  }
  .kerotown-final .kerotown-ideas {
    margin-top: 22px;
  }
  /* The ideas link on a line of its own, like the link above it, so it never props the
     sentence's lines apart. */
  .kerotown-final .kerotown-ideas .text-link {
    display: flex;
    width: fit-content;
  }
  /* The fan art page: the four maps close under the hero, and shorter picture wells. */
  .kerotown-fan-jump {
    padding-top: 8px;
    padding-bottom: 24px;
  }
  .kerotown-fan-card-art {
    aspect-ratio: 4 / 3;
  }
  .kerotown-fan-where {
    font-size: 1rem;
    line-height: 1.5;
  }
  .kerotown-fan-hero-art figcaption {
    font-size: 1rem;
  }
}
/* In a contrast theme the drawn marks take the theme's own text colour, so they stay visible on a
   black card (audit C05). */
@media (forced-colors: active) {
  .kerotown-mode-mark,
  .kerotown-move-mark {
    stroke: CanvasText;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kerotown-trailer-thumb,
  .kerotown-map .kerotown-shot,
  .kerotown-fan-tile-link {
    transition: none;
  }
}

/* ════ /kerotown/online/: KEROTOWN online, a local mockup with example players
   (content/kerotown-online.ts). Phones first: big words, roomy rows, nothing tiny, and nothing
   wider than the screen at 360 px. ════ */

/* ── The top of every page: the breadcrumbs, then the section's own menu ── */
.online-top {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 0;
}
.online-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 700;
}
.online-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.online-crumbs li + li::before {
  content: '›';
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
.online-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 2px;
  overflow-wrap: anywhere;
}
.online-crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.online-crumbs a[aria-current] {
  color: var(--muted);
}
/* Six places: three over three on a phone, one row from 760 px. */
.online-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
/* LEADERBOARD is the longest name: 3.6vw keeps it inside its third of a 320 px screen. */
.online-nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: min(0.9375rem, 3.6vw) / 1.15 var(--heading);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}
/* KEROTOWN ONLINE, the section's name in full, goes onto two lines where its third is too narrow,
   still inside its 44px pill. */
.online-nav-link--hub {
  white-space: normal;
}
.online-nav-link:hover {
  background: var(--butter);
}
.online-nav-link[aria-current] {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--ink);
}
@media (min-width: 760px) {
  .online-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .online-nav-link {
    padding: 6px 18px;
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
}

/* ── Headings, the head of each page, COMING SOON and EXAMPLE ── */
.kerotown-online h1 {
  margin-bottom: 12px;
  font-size: min(clamp(2.75rem, 6vw, 4.75rem), 12.5vw);
  overflow-wrap: normal;
}
.kerotown-online h1:not(.online-title) > span,
.kerotown-online h2 > span {
  color: var(--red);
}
.kerotown-online h2 {
  font-size: min(clamp(2rem, 3.6vw, 3rem), 11vw);
  overflow-wrap: normal;
}
.online-strip-row {
  padding-top: 14px;
  padding-bottom: 0;
}
.online-page-head {
  padding-top: 16px;
  padding-bottom: 8px;
}
.online-page-head .kerotown-lead {
  margin-bottom: 8px;
}
.online-section-line {
  max-width: 42rem;
  margin: -4px 0 16px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.online-soon-badge {
  display: inline-block;
  padding: 1px 10px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font: 800 0.8125rem/1.5 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.online-soon-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  max-width: 50rem;
  margin: 0;
  padding: 10px 14px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}
.online-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.45;
}
.online-example-badge {
  padding: 3px 12px;
  background: var(--ink);
  border-radius: 8px;
  color: var(--paper);
  font: 800 0.875rem/1.45 var(--body);
  letter-spacing: 0.06em;
}
.online-example-line {
  color: var(--muted);
  font-weight: 700;
}
.online-panel-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

/* ── A name and its small grey tag, a look, a status ── */
.online-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}
.online-name--stack {
  display: grid;
  gap: 0;
}
.online-handle {
  font: 1.25rem/1.15 var(--heading);
  letter-spacing: 0.02em;
}
.online-tag {
  color: var(--muted);
  font: 700 0.9375rem/1.4 var(--body);
  letter-spacing: 0.04em;
}
.online-look {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.online-look--chip {
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.online-look--aqua {
  background: #8fdcd6;
}
.online-look--blue {
  background: #a9c4f2;
}
.online-look--gold {
  background: #f6c747;
}
.online-look--mint {
  background: #a6e0b9;
}
.online-look--plum {
  background: #cfb3e6;
}
.online-look--red {
  background: #f6a99c;
}
.online-look--tango {
  background: #f8bf85;
}
.online-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 2px 12px 2px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 800 0.875rem/1.6 var(--body);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.online-status-dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.online-status--online .online-status-dot {
  background: #3dbb6c;
}
.online-status--town .online-status-dot {
  background: #3fb6c4;
}
.online-status--match .online-status-dot {
  background: #f08a24;
}
.online-status--offline .online-status-dot {
  background: #cfc6b8;
}
.online-status--offline {
  color: var(--muted);
}

/* ── The game's round headshots, and a portrait inside its frame ── */
.online-face {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.online-portrait {
  --portrait: 72px;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--portrait);
  height: var(--portrait);
}
.online-portrait--m {
  --portrait: 120px;
}
.online-portrait--l {
  --portrait: clamp(132px, 34vw, 176px);
}
.online-portrait .online-portrait-face {
  width: 100%;
  height: 100%;
}
/* Every frame's hole is the same circle: the face at 58.6% of the frame fits each one. */
.online-portrait--framed .online-portrait-face {
  position: absolute;
  top: 20.7%;
  left: 20.7%;
  width: 58.6%;
  height: 58.6%;
}
.online-portrait-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.online-portrait-frame[hidden] {
  display: none;
}

/* ── Medals: gold, silver and bronze in the site's colours ── */
.online-medal {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 1.5rem/1 var(--heading);
}
.online-medal--1 {
  background: var(--yellow);
}
.online-medal--2 {
  background: #dfe3e8;
}
.online-medal--3 {
  background: #e7a873;
}

/* ── The avatar: a 4:3 stage, every layer placed in the stage's own width (cqw), so it is the
   same picture on any screen. The wall and the floor take the player's colour. ── */
.avatar {
  --wall: #fff0c2;
  --floor: #f2cf6b;
  position: relative;
  min-width: 0;
}
.avatar--aqua {
  --wall: #dcf4f1;
  --floor: #9fdbd4;
}
.avatar--blue {
  --wall: #e1e9fb;
  --floor: #a9bdf0;
}
.avatar--gold {
  --wall: #fff0c2;
  --floor: #f2cf6b;
}
.avatar--mint {
  --wall: #e0f5e8;
  --floor: #a6dfbe;
}
.avatar--plum {
  --wall: #efe3f6;
  --floor: #cdb0e0;
}
.avatar--red {
  --wall: #fde3df;
  --floor: #f2aaa1;
}
.avatar--tango {
  --wall: #ffe9d6;
  --floor: #f7b98a;
}
/* Where each fighter's hand is, measured on the game's 960 x 880 full-body pictures and turned
   into the stage's units (the fighter drawn 58cqw wide from 19cqw, 16.7cqw down):
   Kero's raised right paw at (880, 418), Goro's right claw at (690, 575). Sensei has no hands in
   the game, so his staff stands behind his robe at (640, 500) and leans over his shoulder.
   The stick is gripped a quarter of the way up: the point (28.5%, 71.5%) of every stick picture,
   which all lie at 45 degrees with the rod's middle in the middle. */
.avatar--kero {
  --hand-x: 72cqw;
  --hand-y: 42cqw;
  --stick-turn: -16deg;
  --body-x: 48cqw;
  --body-y: 41cqw;
}
.avatar--goro {
  --hand-x: 60.7cqw;
  --hand-y: 51.4cqw;
  --stick-turn: -12deg;
  --body-x: 46cqw;
  --body-y: 42cqw;
}
.avatar--sensei {
  --hand-x: 58cqw;
  --hand-y: 47cqw;
  --stick-turn: -30deg;
  --body-x: 48cqw;
  --body-y: 40cqw;
}
.avatar-stage {
  --stick-size: 31cqw;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--wall) 0 86%,
    rgb(57 44 32 / 0.55) 86% calc(86% + 3px),
    var(--floor) calc(86% + 3px) 100%
  );
  border: 3px solid var(--ink);
  border-radius: 22px 20px 24px 21px;
  box-shadow: 5px 5px 0 var(--ink);
}
.avatar-layer {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.avatar-layer[hidden] {
  display: none;
}
/* The card hangs on the wall behind, a little crooked, like behind your seat in the lobby. */
.avatar-card {
  z-index: 1;
  top: 4.5cqw;
  left: 3.5cqw;
  width: 22cqw;
  border-radius: 1.5cqw;
  transform: rotate(-5deg);
  filter: drop-shadow(0.8cqw 0.9cqw 0 rgb(57 44 32 / 0.3));
}
.avatar-burst {
  z-index: 2;
  top: calc(var(--body-y) - 30cqw);
  left: calc(var(--body-x) - 30cqw);
  width: 60cqw;
}
/* The trail runs in from the left and ends at the fighter's feet. */
.avatar-trail {
  z-index: 3;
  top: 42.5cqw;
  left: -5cqw;
  width: 46cqw;
}
.avatar-fighter {
  z-index: 5;
  top: 16.7cqw;
  left: 19cqw;
  width: 58cqw;
}
.avatar-stick {
  z-index: 6;
  top: calc(var(--hand-y) - var(--stick-size) * 0.715);
  left: calc(var(--hand-x) - var(--stick-size) * 0.285);
  width: var(--stick-size);
  transform-origin: 28.5% 71.5%;
  transform: rotate(var(--stick-turn));
}
.avatar--sensei .avatar-stick {
  z-index: 4;
}
/* The framed portrait, in the stage's bottom right corner, clear of Kero's foot. It sits all the
   way inside: the stage clips what spills over its edge, and a frame's bow or petals hang at the
   bottom. */
.avatar-corner {
  position: absolute;
  z-index: 8;
  right: 1.5%;
  bottom: 2.5%;
  width: 24.5%;
}
.avatar-corner .online-portrait {
  --portrait: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* ── The section's page: the hero, six doors and how it works ── */
.online-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px 48px;
  padding-top: 18px;
  padding-bottom: 20px;
}
.online-hero .eyebrow {
  margin-bottom: 6px;
  color: var(--red);
}
.online-hero .kerotown-lead {
  margin-bottom: 18px;
}
.online-hero-shot {
  margin: 0;
}
.online-hero-shot figcaption {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}
.online-soon {
  max-width: 46rem;
  padding: 18px 20px 18px;
  background: #ffd260;
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.online-soon h2 {
  margin: 0 0 8px;
  font-size: min(clamp(2.25rem, 4vw, 3.25rem), 12vw);
}
.online-soon p {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}
.online-soon .online-soon-example {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 700;
}
.online-doors-section {
  padding-top: 16px;
  padding-bottom: 16px;
}
.online-doors,
.online-how-list,
.online-player-grid,
.online-worn-list,
.online-friend-list,
.online-sign-list,
.online-rows,
.online-item-grid,
.online-counts,
.online-top3,
.online-about-lines,
.online-pinned,
.online-creation-list,
.online-chip-list,
.online-steps,
.online-maker-list,
.online-maker-items,
.online-today-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.online-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 18px;
}
.online-door-link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
  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,
    box-shadow 0.18s;
}
.online-door-link:hover {
  transform: translateY(-3px);
  box-shadow: 4px 7px 0 var(--ink);
}
.online-door-art {
  display: grid;
  place-items: center;
  min-height: 172px;
  padding: 16px;
  border-bottom: 3px solid var(--ink);
}
.online-door--players .online-door-art {
  background: #a5d8f6;
}
.online-door--leaderboard .online-door-art {
  background: #ffd260;
}
.online-door--items .online-door-art {
  background: #badf8d;
}
.online-door--avatar .online-door-art {
  padding: 14px 22px 22px;
  background: #f6c3d4;
}
.online-door--creators .online-door-art {
  background: #c6c3f2;
}
.online-door--rewards .online-door-art {
  background: #8fdcd6;
}
.online-door-copy {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 16px 18px 18px;
}
.online-door-title {
  font: min(1.875rem, 8.5vw) / 1.05 var(--heading);
  letter-spacing: 0.02em;
}
.online-door-text {
  font-size: 1.0625rem;
  line-height: 1.45;
}
.online-door-go {
  margin-top: 4px;
  font-weight: 700;
}
.online-door-link:hover .online-door-go {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.online-door-faces {
  display: flex;
  justify-content: center;
}
.online-door-faces .online-portrait {
  --portrait: min(96px, 21vw);
}
.online-door-faces .online-portrait + .online-portrait {
  margin-left: -16px;
}
.online-door-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.online-door-items .online-tile-pic {
  width: min(84px, 22vw);
}
.online-door-avatar {
  width: min(100%, 260px);
}
.online-door-avatar .avatar-stage {
  border-width: 2px;
  box-shadow: 3px 3px 0 var(--ink);
}
/* The real top three this week, 1, 2 and 3 from the top. */
.online-top3 {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 24rem;
}
.online-top3-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.online-top3-row .online-face {
  width: 44px;
  height: 44px;
}
.online-top3-row .online-medal {
  width: 40px;
  height: 40px;
  font-size: 1.375rem;
}
.online-top3-name {
  min-width: 0;
}
.online-top3-name .online-handle {
  font-size: 1.0625rem;
}
.online-top3-name .online-tag {
  font-size: 0.8125rem;
}
.online-top3-score {
  font-size: 0.875rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.online-top3-score b {
  display: block;
  font: 1.25rem/1 var(--heading);
}
.online-how {
  padding-top: 24px;
  padding-bottom: 32px;
}
.online-how-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
}
.online-how-item {
  padding: 14px 18px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-how-item h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}
.online-how-item p {
  margin: 0;
  font-size: 1.0625rem;
}
.online-how-item--friends {
  background: #d9f0e0;
}

/* ── The players: one card each, a row on a phone ── */
.online-players {
  padding-top: 8px;
  padding-bottom: 32px;
}
.online-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 16px;
}
.online-player-link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 10px 14px 10px 8px;
  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,
    box-shadow 0.18s;
}
.online-player-link:hover {
  transform: translateY(-3px);
  box-shadow: 4px 7px 0 var(--ink);
}
.online-player-link .online-portrait {
  --portrait: 112px;
}
.online-player-copy {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}
.online-party-line {
  max-width: 42rem;
  margin: 24px 0 0;
  padding: 12px 16px;
  background: #d9f0e0;
  border: 2px solid var(--ink);
  border-radius: 16px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}
.online-creators-line {
  margin: 16px 0 0;
  font-size: 1.0625rem;
}

/* ── A player's page ── */
.online-profile-label {
  padding-top: 12px;
  padding-bottom: 0;
}
.online-profile-label .online-example {
  margin: 0;
}
.online-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 12px;
}
.online-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.online-id-copy {
  flex: 1 1 14rem;
  min-width: 0;
}
.kerotown-online .online-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0 0 10px;
  font-size: min(clamp(2.5rem, 5vw, 3.75rem), 11vw);
}
.kerotown-online .online-title .online-handle {
  font: inherit;
  letter-spacing: 0.01em;
}
.online-title .online-tag {
  font-size: 1.125rem;
}
.online-id-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}
.online-joined {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}
.online-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 34rem;
}
.online-counts li {
  display: grid;
  justify-items: center;
  padding: 10px 6px 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  font: 800 0.8125rem/1.3 var(--body);
  letter-spacing: 0.06em;
  text-align: center;
}
.online-counts b {
  font: 1.75rem/1.1 var(--heading);
  letter-spacing: 0;
}
.online-add {
  display: grid;
  justify-items: start;
  gap: 6px;
}
.online-add-button,
.online-buy,
.online-save-button {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  min-height: 48px;
  padding: 8px 16px;
  background: #ece6da;
  border: 2px dashed var(--muted);
  border-radius: 16px;
  color: var(--muted);
  font: 1.1875rem/1.2 var(--heading);
  letter-spacing: 0.03em;
  cursor: not-allowed;
}
.online-buy--big,
.online-save-button {
  min-height: 56px;
  padding: 10px 22px;
  font-size: 1.375rem;
}
.online-add-hint {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.online-channels {
  display: grid;
  gap: 6px;
}
.online-channels-title,
.online-pinned-title,
.online-page-card-label,
.online-pick-legend {
  margin: 0;
  color: var(--muted);
  font: 800 0.875rem/1.3 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.online-channels-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
/* A linked channel, as an EXAMPLE: switched off, and it goes nowhere. */
.online-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px 4px 14px;
  background: #ece6da;
  border: 2px solid var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  cursor: not-allowed;
}
.online-channel::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
}
.online-channel--youtube::before {
  background: #b6382b;
}
.online-channel--tiktok::before {
  background: #392c20;
}
.online-channel-badge {
  padding: 0 8px;
  background: var(--paper);
  border: 2px dashed var(--muted);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.online-panel {
  min-width: 0;
  padding: 16px 16px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kerotown-online .online-panel h2,
.kerotown-online .online-panel h3 {
  margin: 0 0 12px;
  font-size: min(1.875rem, 9vw);
}
.online-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.online-panel-count {
  color: var(--muted);
  font-weight: 700;
}
.online-panel-line {
  margin: -4px 0 12px;
  font-size: 1rem;
}
/* ABOUT ME: picked lines, shown like the game's chips. */
.online-about-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.online-about-lines li {
  padding: 6px 14px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 14px 12px 15px 13px;
  font: 1.0625rem/1.25 var(--heading);
  letter-spacing: 0.02em;
}
.online-favs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.online-favs div {
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
}
.online-favs dt {
  color: var(--muted);
  font: 800 0.8125rem/1.3 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.online-favs dd {
  margin: 2px 0 0;
  font: 1.25rem/1.2 var(--heading);
}
.online-favs dd a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.online-pinned-title {
  margin-top: 14px;
}
.online-pinned {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.online-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 1rem/1.2 var(--heading);
  letter-spacing: 0.02em;
}
.online-pin .online-medal-sign {
  width: 36px;
  height: 36px;
}
/* A sign's medal: a coloured disc with its mark in ink. */
.online-medal-sign {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 -4px 0 rgb(57 44 32 / 0.18);
}
.online-medal-sign svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.online-medal-sign--gold {
  background: #f6c747;
}
.online-medal-sign--red {
  background: #f39c88;
}
.online-medal-sign--teal {
  background: #8fdcd6;
}
.online-medal-sign--pink {
  background: #f4a9c3;
}
.online-medal-sign--blue {
  background: #a9c4f2;
}
.online-medal-sign--green {
  background: #a6e0b9;
}
.online-medal-sign--plum {
  background: #cfb3e6;
}
/* The avatar and what it wears, side by side on a wide screen. */
.online-look-section {
  padding-top: 20px;
  padding-bottom: 16px;
}
.online-look-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.online-worn-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.online-worn-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 6px 10px 6px 6px;
  border: 2px solid var(--line);
  border-radius: 16px;
}
.online-worn-link:hover {
  border-color: var(--ink);
  background: #fff7e2;
}
.online-worn-link .online-tile-pic {
  width: 64px;
}
.online-worn-copy {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}
.online-worn-shelf {
  color: var(--muted);
  font: 800 0.8125rem/1.3 var(--body);
  letter-spacing: 0.08em;
}
.online-worn-name {
  font: 1.25rem/1.15 var(--heading);
}
/* CREATIONS: what a creator made, with sales and coins earned. */
.online-creations {
  padding-top: 16px;
  padding-bottom: 16px;
}
.online-creation-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 14px;
}
.online-creation-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 10px 14px 10px 10px;
  background: #efeefc;
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-creation-link .online-tile-pic {
  width: 104px;
}
.online-creation-copy {
  display: grid;
  justify-items: start;
  gap: 4px;
}
.online-creation-name {
  font: 1.375rem/1.15 var(--heading);
}
.online-creation-sold,
.online-creation-earned {
  font-weight: 700;
}
.online-creation-earned {
  padding: 1px 10px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
}
.online-profile-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 12px;
  padding-bottom: 24px;
}
.online-friend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 10px;
}
.online-friend-link {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 16px;
  text-align: center;
}
.online-friend-link:hover {
  background: #fff1c7;
}
.online-friend-link .online-handle {
  font-size: 1.0625rem;
}
.online-friend-link .online-tag {
  font-size: 0.875rem;
}
.online-sign-list {
  display: grid;
  gap: 10px;
}
.online-sign {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.online-sign--earned {
  background: #fff1c7;
}
.online-sign--locked {
  border-style: dashed;
  border-color: var(--muted);
  color: var(--muted);
}
.online-sign--locked .online-medal-sign {
  background: #ece6da;
  border-color: var(--muted);
  box-shadow: none;
}
.online-sign--locked .online-medal-sign svg {
  stroke: var(--muted);
}
.online-sign-copy {
  display: grid;
  min-width: 0;
}
.online-sign-title {
  font: 1.125rem/1.2 var(--heading);
  letter-spacing: 0.02em;
}
.online-sign-text {
  font-size: 0.9375rem;
  line-height: 1.4;
}
.online-sign-state {
  font: 800 0.75rem/1.3 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.online-stat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.online-stat {
  padding: 8px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
}
.online-stat dt {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.online-stat dd {
  margin: 2px 0 0;
  font: 1.75rem/1.1 var(--heading);
}
.online-fav {
  margin-top: 14px;
}
.online-fav-label {
  margin: 0 0 8px;
  font-weight: 700;
}
.online-fav-link {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.online-plate {
  width: min(100%, 320px);
}
.online-home-line {
  margin: 0 0 10px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.online-visitors {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 14px 4px 10px;
  background: #ece6da;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 800 0.9375rem/1.6 var(--body);
  letter-spacing: 0.05em;
}
.online-lock {
  position: relative;
  width: 14px;
  height: 11px;
  margin-top: 6px;
  background: var(--ink);
  border-radius: 3px;
}
.online-lock::before {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 9px;
  width: 6px;
  height: 7px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.online-foot-nav {
  padding-top: 8px;
  padding-bottom: 24px;
}

/* ── The leaderboard ── */
.online-board {
  padding-top: 12px;
  padding-bottom: 32px;
}
.online-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 40rem;
  margin-bottom: 18px;
}
.online-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 6px 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font: min(1rem, 4.2vw) / 1.15 var(--heading);
  letter-spacing: 0.02em;
  text-align: center;
}
.online-tab:hover {
  background: var(--butter);
}
.online-tab[aria-current] {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--ink);
}
.online-board-head h2 {
  margin: 0 0 4px;
}
.online-board-head p {
  margin: 0 0 14px;
  font-size: 1.0625rem;
}
.online-rows {
  display: grid;
  gap: 10px;
  max-width: 46rem;
}
.online-row-link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
}
.online-row-link:hover {
  background: #fff7e2;
}
.online-row--top .online-row-link {
  padding: 10px 16px 10px 10px;
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-row--1 .online-row-link {
  background: #fff1c7;
}
.online-row--2 .online-row-link {
  background: #f1f3f5;
}
.online-row--3 .online-row-link {
  background: #fbe4d2;
}
.online-row-link .online-face {
  width: 52px;
  height: 52px;
}
.online-row--top .online-row-link .online-face {
  width: 68px;
  height: 68px;
}
.online-rank {
  display: grid;
  place-items: center;
  width: 40px;
  font: 1.375rem/1 var(--heading);
}
.online-rank.online-medal {
  height: 40px;
}
.online-score {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.online-score b {
  display: block;
  font: 1.5rem/1 var(--heading);
}
.online-score span {
  color: var(--muted);
  font-size: 0.875rem;
}

/* ── The items ── */
.online-coins-line,
.online-coins-note {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 44rem;
  margin: 8px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
}
.online-prices-line {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}
.online-items {
  padding-top: 12px;
  padding-bottom: 32px;
}
.online-jump {
  display: flex;
  gap: 8px;
  margin: 0 -6% 22px;
  padding: 2px 6% 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.online-jump a {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 1rem/1.2 var(--heading);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.online-jump a:hover {
  background: var(--butter);
}
.online-jump a[href='#rewards'] {
  background: #8fdcd6;
}
.online-jump a[href='#fans'] {
  background: #c6c3f2;
}
.online-shelf {
  margin-bottom: 34px;
  scroll-margin-top: 16px;
}
.online-shelf-head {
  margin-bottom: 14px;
}
.online-shelf-head h2 {
  margin: 0 0 4px;
}
.online-shelf-head .kerotown-word {
  margin-bottom: 4px;
}
.online-shelf-head p {
  max-width: 44rem;
  margin: 0 0 8px;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.online-shelf-head .online-example {
  margin: 4px 0 8px;
}
/* The rewards shelf stands out at the top: a teal panel. */
.online-shelf--rewards {
  padding: 16px 12px 18px;
  background: #d8f3ef;
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.online-shelf--fans {
  padding: 16px 12px 18px;
  background: #efeefc;
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
/* Two cards a row on any phone, inside the rewards and fans panels too. */
.online-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: 12px;
}
.online-item {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px 16px 19px 15px;
  box-shadow: 3px 3px 0 var(--ink);
}
.online-item-link {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 10px 0;
}
.online-item-link:hover .online-item-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.online-item-link .online-tile-pic {
  width: 100%;
}
.online-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.online-item-title {
  font: 1.1875rem/1.15 var(--heading);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.online-item-copy .kerotown-word {
  gap: 0 6px;
}
.online-item-copy .kerotown-word b {
  font-size: 1.0625rem;
}
.online-item-copy .kerotown-english {
  font-size: 0.875rem;
}
.online-item-foot {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 8px 10px 12px;
}
.online-item-foot .online-buy {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 1.0625rem;
}
.online-item-made {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}
.online-item-made .online-face {
  width: 32px;
  height: 32px;
}
.online-item-sold {
  font-size: 0.9375rem;
  font-weight: 800;
}
.online-item-made a {
  display: inline-block;
  min-height: 24px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.online-item-sale {
  padding: 1px 8px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.4;
}
.online-not-sold {
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 700;
}
.online-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 1.25rem/1.2 var(--heading);
  white-space: nowrap;
}
.online-price--only {
  color: var(--muted);
  font: 700 0.9375rem/1.35 var(--body);
  white-space: normal;
}
.online-price--free {
  padding: 0 12px;
  background: #3dbb6c;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.online-coin {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 50% 50%, #ffe28a 0 38%, #f2b632 39% 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.online-coin--big {
  width: 34px;
  height: 34px;
  border-width: 3px;
}
.online-reward-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--ink);
  border-radius: 10px;
  color: var(--paper);
  font: 800 0.75rem/1.35 var(--body);
  letter-spacing: 0.06em;
}
.online-reward-badge--tester {
  background: #5b3f8c;
}
.online-reward-badge--mystery {
  background: var(--red);
}
/* An item's picture on its tile: a square in its shelf's colour. */
.online-tile-pic {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 14px;
}
.online-tile-pic img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}
.online-tile-pic--poster img {
  width: 100%;
  height: 100%;
}
.online-tile-pic--plate img {
  width: 96%;
  height: auto;
}
.online-tile-pic--plate {
  background: #2f6f5c;
}
.online-tile-pic--frame {
  background: #e5f0fb;
}
.online-tile-pic--stick {
  background: #e3f3d8;
}
.online-tile-pic--voice {
  background: #fde3df;
}
.online-tile-pic--burst {
  background: #3c3150;
}
.online-tile-pic--trail {
  background: #efe3f6;
}
.online-tile-pic--home {
  background: #fbe6cf;
}
.online-tile-pic--world {
  background: #dff1ea;
}
.online-tile-pic--mystery {
  container-type: inline-size;
  background: #fde3ec;
}
/* The mystery reward's big "?", in a gold disc over the box. */
.online-mystery {
  position: absolute;
  right: 5%;
  bottom: 5%;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  font: 30cqw/1 var(--heading);
}

/* ── A page per item ── */
.online-item-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 40px;
  padding-top: 18px;
  padding-bottom: 20px;
}
.online-item-big {
  width: min(100%, 440px);
}
.online-tile-pic--big {
  border-width: 3px;
  border-radius: 24px 20px 26px 22px;
  box-shadow: 6px 6px 0 var(--ink);
}
.online-item-info {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}
.online-item-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.online-shelf-chip {
  padding: 2px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 800 0.8125rem/1.5 var(--body);
  letter-spacing: 0.08em;
}
.online-shelf-chip--fan {
  background: #c6c3f2;
}
.kerotown-online h1.online-item-name {
  margin: 0;
  font-size: min(clamp(2.5rem, 5vw, 4rem), 11vw);
  overflow-wrap: anywhere;
}
.online-item-blurb {
  max-width: 34rem;
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.5;
}
.online-item-kind {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}
.online-item-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 4px;
}
.online-item-buy .online-price {
  font-size: 1.75rem;
}
.online-item-buy .online-coin {
  width: 28px;
  height: 28px;
}
.online-item-free {
  margin: 0;
  font-weight: 700;
}
.online-item-creator {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
  max-width: 34rem;
  padding: 14px 16px;
  background: #efeefc;
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
}
.online-item-creator p {
  margin: 0;
  font-size: 1.0625rem;
}
.online-item-creator .online-example {
  margin: 0;
}
.online-item-creator-title {
  color: var(--muted);
  font: 800 0.875rem/1.3 var(--body) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.online-item-sold {
  font-size: 1.25rem !important;
}
.online-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 4px 14px 4px 4px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.online-chip:hover {
  background: #fff1c7;
}
.online-chip .online-face {
  width: 48px;
  height: 48px;
}
.online-chip .online-handle {
  font-size: 1.0625rem;
}
.online-chip .online-tag {
  font-size: 0.8125rem;
}
.online-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.online-item-try,
.online-worn-by,
.online-more {
  padding-top: 18px;
  padding-bottom: 18px;
}
.online-try h2,
.online-worn-by h2,
.online-more h2 {
  margin: 0 0 8px;
}
.online-try {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.online-try-box {
  position: relative;
  width: min(100%, 560px);
}
/* Three tabs made of radio buttons, so TRY IT ON works with no script. */
.online-try-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.online-try-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.online-try-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font: 1.125rem/1.1 var(--heading);
  letter-spacing: 0.03em;
  cursor: pointer;
}
.online-try-tab:hover {
  background: var(--butter);
}
.online-try-stage {
  display: none;
}
#try-kero:checked ~ .online-try-tabs .online-try-tab--kero,
#try-sensei:checked ~ .online-try-tabs .online-try-tab--sensei,
#try-goro:checked ~ .online-try-tabs .online-try-tab--goro {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--ink);
}
#try-kero:focus-visible ~ .online-try-tabs .online-try-tab--kero,
#try-sensei:focus-visible ~ .online-try-tabs .online-try-tab--sensei,
#try-goro:focus-visible ~ .online-try-tabs .online-try-tab--goro {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
#try-kero:checked ~ .online-try-stages .online-try-stage--kero,
#try-sensei:checked ~ .online-try-stages .online-try-stage--sensei,
#try-goro:checked ~ .online-try-stages .online-try-stage--goro {
  display: block;
}
.online-item-grid--row {
  margin-bottom: 18px;
}

/* ── The avatar editor ── */
.online-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
  padding-top: 12px;
  padding-bottom: 24px;
}
.online-editor-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.kerotown-online .online-editor-title {
  margin: 0;
  font-size: min(1.875rem, 9vw);
}
/* On a phone the choices run far below the preview, so the stage stays pinned at the top of the
   screen while you pick: the preview box steps aside (display: contents) so the avatar can stick
   for the whole editor, and the stage is kept under about 37% of the screen's height. From 860 px
   the whole preview sticks beside the choices instead (below). */
@media (max-width: 859px) {
  .online-editor {
    row-gap: 12px;
  }
  .online-editor-preview {
    display: contents;
  }
  .online-editor-preview .avatar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 0 12px;
    background: var(--paper);
  }
  .online-editor-preview .avatar-stage {
    width: min(100%, 50svh);
    margin-inline: auto;
  }
  .online-editor-picks-box {
    margin-top: 12px;
  }
  /* A choice you reach with the keyboard is scrolled clear of the pinned stage, not left under
     it, and the whole box shows: the radio button sits at the top of its box. */
  .online-editor-picks-box input {
    scroll-margin-top: calc(min(100vw - 32px, 50svh) * 0.75 + 32px);
    scroll-margin-bottom: 12.5rem;
  }
}
.online-editor-picks {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}
.online-save {
  display: grid;
  justify-items: start;
  gap: 6px;
}
.online-save-line {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}
.online-editor-picks-box {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.online-pick {
  min-width: 0;
  margin: 0;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
}
.online-pick legend {
  padding: 0 8px;
  font: min(1.625rem, 8vw) / 1.1 var(--heading);
}
.online-pick-legend {
  margin-bottom: 6px;
}
.online-pick-line {
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 700;
}
.online-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 6.75rem), 1fr));
  gap: 10px;
}
.online-options--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.online-options--colours {
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
}
.online-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}
.online-option input,
.online-tick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.online-option-box {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  height: 100%;
  min-height: 56px;
  padding: 8px 6px 10px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.online-option:hover .online-option-box {
  border-color: var(--ink);
}
.online-option input:checked + .online-option-box {
  background: #fff1c7;
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.online-option input:focus-visible + .online-option-box,
.online-tick input:focus-visible + .online-tick-box {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.online-option-name {
  font: 0.9375rem/1.15 var(--heading);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.online-option-face {
  width: min(72px, 100%);
  height: auto;
  aspect-ratio: 1;
}
.online-option-pic {
  display: grid;
  place-items: center;
  width: min(72px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff7e2;
  border-radius: 12px;
}
.online-option-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.online-option-pic--plate {
  background: #2f6f5c;
}
.online-option--burst .online-option-pic {
  background: #3c3150;
}
.online-option-none {
  width: min(72px, 100%);
  aspect-ratio: 1;
  background:
    linear-gradient(45deg, transparent 47%, var(--muted) 47% 53%, transparent 53%), #f3eee4;
  border: 2px dashed var(--muted);
  border-radius: 12px;
}
.online-option-badge {
  padding: 1px 6px;
  background: var(--ink);
  border-radius: 8px;
  color: var(--paper);
  font: 800 0.625rem/1.3 var(--body);
  letter-spacing: 0.05em;
}
.online-option-badge--fan {
  background: #5b3f8c;
}
.online-swatch {
  width: 44px;
  height: 44px;
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.online-swatch--aqua {
  background: #45c1bd;
}
.online-swatch--blue {
  background: #6f8fe8;
}
.online-swatch--gold {
  background: #f2c14e;
}
.online-swatch--mint {
  background: #8fd9b0;
}
.online-swatch--plum {
  background: #b78ad6;
}
.online-swatch--red {
  background: #f0665a;
}
.online-swatch--tango {
  background: #f3954a;
}
/* EDIT YOUR PAGE: picked lines and signs, and a preview card. */
.online-edit-page {
  padding-top: 12px;
  padding-bottom: 32px;
}
.online-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.online-edit-picks {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.online-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.online-tick {
  position: relative;
  display: block;
  cursor: pointer;
}
.online-tick-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 14px;
  font: 1rem/1.2 var(--heading);
  letter-spacing: 0.02em;
}
.online-tick:hover .online-tick-box {
  border-color: var(--ink);
}
.online-tick input:checked + .online-tick-box {
  background: #fff1c7;
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.online-tick input:disabled + .online-tick-box {
  opacity: 0.55;
  cursor: not-allowed;
}
.online-ticks--signs .online-tick-box {
  padding-left: 4px;
}
.online-ticks--signs .online-medal-sign {
  width: 34px;
  height: 34px;
}
.online-page-preview {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.kerotown-online .online-page-preview h3 {
  margin: 0;
  font-size: min(1.875rem, 9vw);
}
.online-page-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-page-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.online-page-card-name {
  font: min(2.5rem, 11vw) / 1 var(--heading);
}
.online-page-card .online-favs {
  margin: 0;
}
.online-page-card .online-pinned {
  margin: 0;
}

/* ── Creators ── */
.online-make,
.online-makers,
.online-today {
  padding-top: 18px;
  padding-bottom: 22px;
}
.online-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.online-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 18px 22px 17px;
  box-shadow: 4px 4px 0 var(--ink);
}
.online-step--coins {
  background: #fff1c7;
}
.online-step-number {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #c6c3f2;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 1.625rem/1 var(--heading);
}
.online-step-copy {
  display: grid;
  gap: 2px;
}
.online-step-title {
  font: 1.375rem/1.15 var(--heading);
}
.online-step-text {
  font-size: 1rem;
  line-height: 1.4;
}
.online-coins-note {
  max-width: 46rem;
  padding: 12px 16px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.online-maker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 18px;
}
.online-maker {
  display: grid;
  gap: 14px;
  padding: 14px;
  background: #efeefc;
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 19px;
  box-shadow: 5px 5px 0 var(--ink);
}
.online-maker-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.online-maker-head:hover .online-handle {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.online-maker-copy {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}
.online-maker-sum {
  font-weight: 700;
}
.online-maker-earned {
  padding: 1px 10px;
  background: #fff1c7;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 800;
}
.online-maker-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.online-maker-item {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 8px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.online-maker-item:hover {
  background: #fff7e2;
}
.online-maker-item-name {
  font: 1.0625rem/1.15 var(--heading);
}
.online-maker-item-sold {
  font-size: 0.9375rem;
  font-weight: 700;
}
.online-today-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.online-today-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 18px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  font: 1.125rem/1.2 var(--heading);
}
.online-today-link:hover {
  background: var(--butter);
}

/* ── The COMING SOON card on /kerotown/ that leads here ── */
.kerotown-online-soon {
  padding-top: 24px;
  padding-bottom: 24px;
}
.kerotown-online-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  max-width: 52rem;
  padding: 18px 20px;
  background: #fff1c7;
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 19px;
  box-shadow: 5px 5px 0 var(--ink);
}
.kerotown-online-faces {
  display: flex;
}
.kerotown-online-faces .online-face {
  width: 64px;
  height: 64px;
}
.kerotown-online-faces .online-face + .online-face {
  margin-left: -12px;
}
.kerotown-online-copy {
  flex: 1 1 18rem;
  min-width: 0;
}
.kerotown-online-card .kerotown-badge {
  margin-bottom: 8px;
}
.kerotown-site .kerotown-online-card h2 {
  margin: 0 0 6px;
  font-size: min(2.25rem, 10vw);
}
.kerotown-online-card p {
  margin: 0 0 8px;
  font-size: 1.0625rem;
}

/* ── Wider screens ── */
@media (min-width: 560px) {
  .online-item-grid {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  /* Four rewards fill their row. */
  .online-shelf--rewards .online-item-grid {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .online-shelf--rewards,
  .online-shelf--fans {
    padding: 22px 24px 24px;
  }
  .online-maker-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 860px) {
  .online-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
  .online-profile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'id about'
      'counts about'
      'add about'
      'channels about';
    align-items: start;
    column-gap: 40px;
  }
  .online-id {
    grid-area: id;
  }
  .online-counts {
    grid-area: counts;
  }
  .online-add {
    grid-area: add;
  }
  .online-channels {
    grid-area: channels;
  }
  .online-about {
    grid-area: about;
  }
  .online-look-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
  }
  .online-profile-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .online-friends {
    grid-column: 1 / -1;
  }
  .online-item-hero {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    align-items: start;
  }
  .online-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
  .online-editor-preview {
    position: sticky;
    top: 16px;
  }
  .online-edit-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .online-page-preview {
    position: sticky;
    top: 16px;
  }
}
@media (min-width: 1100px) {
  .online-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .online-shelf--rewards .online-item-grid {
    grid-template-columns: repeat(4, minmax(0, 15rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .online-door-link,
  .online-player-link {
    transition: none;
  }
  .online-door-link:hover,
  .online-player-link:hover {
    transform: none;
  }
}