@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);
}
.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);
}
.youtube {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 19px;
  flex-shrink: 0;
  border-radius: 30px;
  color: white;
  background: var(--red);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}
.youtube:hover {
  background: var(--ink);
}
.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 42px 6% 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.875rem;
  font-weight: 700;
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.copyright {
  flex-basis: 100%;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  padding-top: 14px;
}
.not-found {
  min-height: 65vh;
}
.not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* A SLIM BAR, NOT A CARD. The bar is legal furniture and it should read as furniture: one line of
   text and two answers on a single row from about 700px up, and a two row stack on a phone. It
   used to be a paragraph on a chunky pair of buttons, which measured 237px on a 320px phone and
   103px on a desktop, and a notice that size stops being furniture and starts being a takeover.

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

.drawing-room {
  max-width: var(--page);
  margin: 10px auto 40px;
  padding: 30px 6% 40px;
  background: var(--blue);
  border-block: 3px solid var(--ink);
}
.drawing-room [hidden] {
  display: none !important;
}
.drawing-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
}
.drawing-intro h1 {
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  margin-bottom: 12px;
}
.drawing-intro p:last-child {
  margin: 0;
}
.drawing-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;
}
.drawing-mode-links {
  display: flex;
  gap: 14px;
  margin: 6px 0 28px;
  flex-wrap: wrap;
}
.drawing-mode-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  font-weight: 700;
  padding: 14px 24px;
  min-height: 56px;
  box-shadow: 0 4px 0 var(--ink);
}
.drawing-mode-links a[aria-current] {
  background: var(--ink);
  color: var(--paper);
}
.drawing-mode-links a > span {
  font: 1.25rem var(--heading);
  opacity: 0.8;
}
.drawing-section-heading {
  margin-bottom: 20px;
}
.drawing-section-heading h2 {
  font-size: 1.6rem;
  margin: 0 0 6px;
}
.drawing-section-heading p {
  margin: 0;
}
.guide-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.guide-art {
  position: relative;
  background: #fff;
  border-right: 3px solid var(--ink);
  padding: 50px 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paper-label {
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--muted);
}
.guide-drawing svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 385px;
}
.guide-legend {
  margin: 16px 0 0;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.guide-legend > span {
  width: 20px;
  height: 3px;
  background: var(--red);
}
.guide-instructions {
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.guide-reference {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.guide-reference img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.guide-reference > span {
  font-size: 0.9375rem;
  line-height: 1.45;
}
.guide-copy h3 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  margin-bottom: 15px;
}
.guide-copy .eyebrow {
  color: var(--red);
  font-size: 0.875rem;
  margin-bottom: 12px;
}
.drawing-tip {
  padding: 14px 18px;
  border-left: 4px solid var(--yellow);
  background: #fff0c1;
  font-size: 0.9375rem;
}
.guide-navigation {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}
.drawing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 18px;
  font-weight: 700;
  line-height: 1.4;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.drawing-button.primary {
  background: var(--yellow);
}
.drawing-button:disabled {
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
}
.drawing-button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.drawing-button:not(:disabled):hover {
  transform: translateY(-2px);
}
.guide-navigation .primary {
  flex: 1;
}
.guide-step-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0 20px;
}
.guide-step-list button {
  overflow-wrap: anywhere;
  min-width: 0;
  position: relative;
  padding: 0 0 10px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 13px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
}
.guide-step-list button > span:first-child {
  display: block;
  position: relative;
  padding: 5px 18px;
}
.guide-step-list svg {
  display: block;
  width: 100%;
  height: auto;
}
.guide-step-list b {
  position: absolute;
  top: 6px;
  left: 8px;
  font: 1.1rem var(--heading);
}
.guide-step-list [aria-current] {
  background: var(--yellow);
  box-shadow: 0 4px 0 var(--ink);
}
.all-drawing-steps {
  margin-top: 24px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.all-drawing-steps > h3 {
  padding: 16px 22px;
  cursor: pointer;
  font-weight: 700;
}
.all-drawing-steps ol {
  list-style: none;
  margin: 0;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  border-top: 2px solid var(--ink);
}
.all-drawing-steps svg {
  display: block;
  background: white;
  width: 100%;
}
.all-drawing-steps h3 {
  font-size: 1.4rem;
  margin-top: 16px;
  margin-bottom: 10px;
}
.all-drawing-steps li p {
  margin-bottom: 0;
}
.online-pad {
  margin-top: 28px;
}
.paint-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.paint-tools {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink);
}
.paint-colours {
  padding: 0;
  border: 0;
  margin: 0;
  min-width: 0;
}
.paint-colours legend {
  font-weight: 700;
  margin-bottom: 12px;
}
.paint-colours > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.paint-colours button {
  display: grid;
  place-items: center;
  padding: 4px;
  min-height: 44px;
  min-width: 0;
  border-radius: 9px;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
}
.paint-colours button > span {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--swatch);
}
.paint-colours [data-paint-colour='#5b4718'] {
  --swatch: #5b4718;
}
.paint-colours [data-paint-colour='#d4af4a'] {
  --swatch: #d4af4a;
}
.paint-colours [data-paint-colour='#9d7f2f'] {
  --swatch: #9d7f2f;
}
.paint-colours [data-paint-colour='#f08a70'] {
  --swatch: #f08a70;
}
.paint-colours [data-paint-colour='#fffbe8'] {
  --swatch: #fffbe8;
}
.paint-colours [data-paint-colour='#ad4437'] {
  --swatch: #ad4437;
}
.paint-colours [data-paint-colour='#467cb5'] {
  --swatch: #467cb5;
}
.paint-colours [data-paint-colour='#4caa93'] {
  --swatch: #4caa93;
}
.paint-colours button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--butter);
}
.paint-tool-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.paint-tool-pair button {
  padding-inline: 8px;
}
.paint-size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.paint-size input {
  width: calc(100% - 40px);
  min-height: 44px;
  accent-color: var(--ink);
}
.paint-size output {
  min-width: 28px;
  font-size: 0.875rem;
  text-align: right;
}
.paint-guide-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  min-height: 44px;
}
.paint-guide-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.paint-note {
  font-size: 0.875rem;
  line-height: 1.45;
  margin: -6px 0 0;
  color: var(--muted);
}
.paint-paper {
  position: relative;
  width: 100%;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: white;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.paint-paper canvas {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  touch-action: none;
  cursor: crosshair;
}
.paint-paper canvas[data-tool='eraser'] {
  cursor: cell;
}
.paint-tracing {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  pointer-events: none;
}
.paint-tracing svg {
  display: block;
  width: 100%;
  height: 100%;
}
.paint-status {
  font-size: 0.875rem;
  margin: 16px 0 0;
  min-height: 2.8em;
}
.drawing-endnote {
  text-align: center;
  font-size: 0.9375rem;
  margin: 30px 0 0;
}
.drawing-share {
  max-width: 640px;
  margin: 36px auto 0;
  padding: 24px 20px;
  border: 3px solid var(--ink);
  border-radius: 24px;
  background: var(--butter);
}
.drawing-share h2 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.drawing-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.drawing-room input:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 4px;
}
@media (max-width: 800px) {
  .drawing-sticker {
    display: none;
  }
  .guide-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide-art {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
    padding: 38px 22px 18px;
  }
  .guide-drawing svg {
    max-height: 300px;
  }
  .guide-instructions {
    padding: 22px;
  }
  .guide-reference {
    display: none;
  }
  .guide-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .all-drawing-steps ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .paint-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .paint-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 16px;
  }
  .paint-colours {
    grid-column: 1 / -1;
  }
  .paint-colours > div {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .paint-tools > .paint-note {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .drawing-room {
    padding-inline: 5%;
    padding-top: 22px;
  }
  .drawing-mode-links {
    gap: 10px;
  }
  .drawing-mode-links a {
    flex: 1 1 120px;
    padding: 12px 10px;
    font-size: 0.875rem;
  }
  .drawing-mode-links a > span {
    display: none;
  }
  .guide-drawing svg {
    max-height: 250px;
  }
  .guide-instructions {
    padding: 18px;
  }
  .guide-step-list {
    gap: 10px;
  }
  .all-drawing-steps ol {
    grid-template-columns: minmax(0, 1fr);
  }
  .paint-colours > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .paint-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

.paint-settings summary {
  cursor: pointer;
  font-weight: 700;
  padding-block: 10px;
  min-height: 44px;
}
.paint-settings > label {
  margin-top: 10px;
}
.paint-settings .paint-note {
  margin-top: 10px;
}
.paint-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}
.paint-actions > .paint-note {
  flex-basis: 100%;
  margin-top: 4px;
}
.paint-actions > .primary {
  margin-left: auto;
}
@media (max-width: 800px) {
  .paint-settings {
    grid-column: 1 / -1;
  }
  .paint-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .paint-tool-pair {
    gap: 12px;
  }
  .drawing-room {
    scroll-margin-top: 10px;
  }
}
@media (max-width: 480px) {
  .paint-tools {
    padding: 12px;
    gap: 8px;
  }
  .paint-colours legend {
    margin-bottom: 4px;
  }
  .paint-colours > div {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }
  .paint-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .paint-actions > .paint-tool-pair,
  .paint-actions > .paint-note {
    grid-column: 1 / -1;
  }
  .paint-actions > .primary {
    margin-left: 0;
  }
  .paint-actions .drawing-button {
    padding-inline: 10px;
    overflow-wrap: anywhere;
  }
}

.drawing-character-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 22px;
}
.drawing-character-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  font: 1.4rem var(--heading);
  box-shadow: 0 3px 0 var(--ink);
}
.drawing-character-links a[aria-current] {
  background: var(--yellow);
}
.drawing-character-links img {
  width: 46px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
}
.all-drawing-steps > h3 {
  font-family: var(--heading);
  font-size: 1.5rem;
  margin: 0;
  cursor: default;
}
.character-tutorial + .character-tutorial {
  margin-top: 30px;
}
.paint-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
  gap: 10px;
}
.paint-tool-grid .drawing-button {
  padding-inline: 5px;
  white-space: nowrap;
  overflow-wrap: normal;
}
.paint-actions > .paint-note {
  color: var(--ink);
}
@media (max-width: 480px) {
  .drawing-character-links {
    gap: 8px;
  }
  .drawing-character-links a {
    flex: 1 1 70px;
    padding: 8px;
    gap: 4px;
    flex-direction: column;
    font-size: 1.2rem;
  }
  .drawing-character-links img {
    width: 36px;
    height: 40px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ════ /learn/: Kero at his desk ════ */
.learn-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.learn-hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  margin-bottom: 14px;
}
.learn-hero-copy > p:not(.eyebrow) {
  max-width: 40ch;
}
.learn-order {
  padding: 10px 14px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.learn-saved {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.learn-order {
  margin: 18px 0 8px;
}
.learn-new {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  font-weight: 700;
}
/* A returning learner's Continue button is the one yellow button; the newcomer's start goes white. */
.learn-hero-copy:has(.continue-box:not([hidden])) .learn-new .button {
  background: var(--paper);
}
.study-scene {
  margin: 0;
  min-width: 0;
}
.study-scene-inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 3px solid var(--ink);
  border-radius: 26px 22px 28px 24px;
  box-shadow: 6px 6px 0 var(--ink);
  background: #f6e7c8;
  transform: rotate(1deg);
}
.study-scene-inner picture,
.study-scene-room,
.study-scene-desk,
.study-scene-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.study-scene-room,
.study-scene-desk img {
  display: block;
  width: 100%;
  height: 100%;
}
/* 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
   "Hiragana" and "Lessons 1-6" 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;
}

/* ════ Lessons 1-6 ════ */
.learn-room--study {
  /* Pond green, with darker text tones so muted copy and red keep their contrast. */
  --learn-bg: #d9efcb;
  --pond: #8bd1d6;
  --pad: #6fae4f;
  --pad-dark: #3f7a2c;
  --muted: #4a3a2a;
  --red: #8f2a1f;
  --right: #cfeccb;
  --wrong: #f6d2cc;
}
.learn-room--study [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
/* The numbers and time lessons run the same player on their own peach page. */
.learn-room--study.learn-room--numbers {
  --learn-bg: #ffd9c2;
  --red: #8a2a1f;
}
.learn-pick--study {
  background: #e6f5dc;
}
.study-meter {
  display: block;
  height: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.study-meter > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pad);
  transition: width 0.3s;
}
.study-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.study-progress-row .study-meter {
  flex: 1;
  min-width: 80px;
}
.study-progress-row p {
  margin: 0;
  font-weight: 700;
}

/* The six lesson cards */
.study-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-weight: 700;
}
.study-lessons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}
.study-lesson {
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 20px 20px 18px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 24px 18px 22px;
  box-shadow: 0 5px 0 var(--ink);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.study-lesson:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 8px 0 var(--ink);
}
.study-lesson-title {
  font: 1.45rem/1.15 var(--heading);
}
.study-lesson-jp {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--red);
}
.study-lesson-sub {
  color: var(--muted);
  font-size: 0.95rem;
}
.study-lesson .study-meter {
  margin-top: 8px;
}
.study-lesson-progress {
  font-weight: 700;
  font-size: 0.9rem;
}
.study-lesson-progress:empty {
  display: none;
}
.study-lesson.is-done {
  background: #eef8e6;
}
.study-review-banner {
  background: var(--pad-dark);
}
.battle-banner-goro {
  transform: scaleX(-1);
}

/* One lesson: the outline */
.learn-room--study .lesson-head h1.lesson-title {
  font: clamp(2.6rem, 7vw, 4.4rem)/1.05 var(--heading);
  letter-spacing: 0;
}
.study-lesson-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  max-width: 760px;
  margin: 0 auto 22px;
}
.study-lesson-bar .study-progress-row {
  flex: 1 1 260px;
}
.study-noscript {
  max-width: 60ch;
  margin: 0 auto 18px;
  padding: 12px 16px;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: 14px;
  text-align: center;
}
.study-part {
  margin-top: 34px;
  scroll-margin-top: 90px;
}
.study-part > p {
  max-width: 60ch;
}
.study-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.study-section {
  padding: 18px 20px 16px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px 24px 18px 26px;
  box-shadow: 5px 5px 0 var(--ink);
}
.study-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.study-section-head > div {
  flex: 1;
  min-width: 0;
}
.study-section-head h3 {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
}
.study-section-number {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  padding-top: 0.1em;
  font: 1.15rem/1 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.study-section.is-done .study-section-number {
  background: var(--pad);
}
.study-section-pattern {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--red);
}
.study-section-count {
  margin: 0;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: right;
}
.study-sets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
/* Each set has a Play button beside it, straight into its two games. */
.study-set-item {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.study-set-item > .study-set {
  flex: 1 1 auto;
  min-width: 0;
}
.study-set-play {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  padding: 6px 8px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  background: #3f7a2c;
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.15s;
}
.study-set-play[hidden] {
  display: none;
}
.study-set-play:hover {
  transform: translateY(-2px);
}
.study-play-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.study-set {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  height: 100%;
  min-height: 64px;
  padding: 10px 14px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform 0.15s;
}
.study-set:hover {
  transform: translateY(-2px);
}
.study-set-label {
  font: 1.05rem/1.2 var(--heading);
}
.study-set-range {
  grid-column: 1 / -1;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.study-set .study-meter {
  grid-column: 1 / -1;
  height: 8px;
  margin-top: 4px;
}
.study-set-badge {
  grid-row: 1;
  grid-column: 2;
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
}
.study-set-badge:empty {
  display: none;
}
.study-set.is-done {
  background: #e3f3d8;
}
.study-set.is-done .study-set-badge {
  color: #fff;
  border-color: var(--pad-dark);
  background: var(--pad-dark);
}
.study-set--revision {
  background: var(--paper);
  border-style: dashed;
}
.study-set--review {
  background: var(--yellow);
  min-height: 80px;
}
.study-sets--review {
  grid-template-columns: minmax(0, 520px);
}
.study-list {
  margin-top: 12px;
}
.study-list summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.study-list-set {
  scroll-margin-top: 90px;
}
.study-list-set h3,
.study-list-set h4 {
  margin: 12px 0 6px;
  font: 1.1rem/1.2 var(--heading);
}
.study-list-set ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.study-list-set li {
  padding: 8px 12px;
  background: var(--butter);
  border-radius: 12px;
}
.study-list-word,
.study-list-pattern {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.study-list-jp,
.study-pattern-jp {
  font-size: 1.2rem;
  font-weight: 700;
}
.study-list-kanji {
  color: var(--muted);
}
.study-list-romaji {
  font-weight: 700;
  color: var(--red);
}
.study-list-note,
.study-list-example,
.study-list-how {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--muted);
}
.study-list-drill summary {
  cursor: pointer;
}
.study-list-answer {
  margin: 6px 0 0;
  font-weight: 700;
}
.study-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 4px;
}
.study-line-jp {
  font-weight: 700;
}
.study-line-kanji {
  font-size: 0.9rem;
  color: var(--muted);
}
.study-line-romaji {
  color: var(--red);
  font-size: 0.9rem;
}
.study-line-en {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.9rem;
}
.study-speaker {
  font-weight: 700;
}
.study-blank {
  display: inline-block;
  min-width: 2.4em;
  padding: 0 4px;
  margin: 0 2px;
  border-bottom: 3px solid var(--red);
  color: var(--red);
  text-align: center;
}
.study-blank.is-filled {
  background: var(--right);
  border-radius: 6px 6px 0 0;
  color: var(--ink);
  font-weight: 700;
}
.study-review-lessons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}
.study-review-lessons a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ════ The player ════ */
.study-player {
  scroll-margin-top: 4px;
}
.study-player-head {
  text-align: center;
  margin-bottom: 10px;
}
.study-player-head .eyebrow {
  margin-bottom: 4px;
  color: var(--red);
}
.study-player-head h2 {
  margin: 0 0 2px;
  font-size: clamp(1.8rem, 6vw, 3rem);
}
.study-player-head h2:focus {
  outline: none;
}
.study-player-range {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
}
/* A big review covers studied cards; this adds the rest. */
.study-review-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.study-review-all[hidden] {
  display: none;
}
.study-review-all input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
}
.study-player-head .study-progress-row {
  max-width: 420px;
  margin: 0 auto;
}
/* The tabs and the two sound switches share one row above the stage. */
.study-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
}
.study-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.study-tab {
  min-height: 46px;
  padding: 8px 16px;
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.study-tab[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
}
.study-tab:not([aria-selected='true']):hover {
  background: var(--butter);
}
.study-panel {
  padding: 22px 24px 26px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 24px 20px 26px 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
.study-player-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
/* The set buttons are secondary: the round's own answer or Next is the one primary button. */
.study-player-nav .study-player-next {
  margin-left: auto;
}
.study-count {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.study-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.study-count-row .study-count {
  margin: 0;
}
.study-empty {
  margin: 0;
  text-align: center;
  font-weight: 700;
}
.study-done:empty {
  display: none;
}
.study-results h3 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
}
.study-result-detail {
  max-width: 50ch;
}
.study-results.is-record .study-result-kero {
  animation: study-cheer 0.9s ease-in-out 3;
}
.study-tricky-title {
  margin: 0 0 6px;
  font-weight: 700;
}
.study-tricky {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.study-tricky li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 10px;
  background: var(--butter);
  border-radius: 10px;
}
.study-tricky-jp {
  font-weight: 700;
}
.study-tricky-romaji {
  color: var(--red);
}
@keyframes study-cheer {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  30% {
    transform: translateY(-22px) rotate(-8deg);
  }
  60% {
    transform: translateY(0) rotate(6deg);
  }
}

/* ════ Rounds of 4: the round bar, the answer sheet and the round summary ════
 * Shared by Flashcards and Learn (src/client/study-feedback.ts). Props such as cards, choices and
 * the sheet may tilt and squash; Kero only hops and turns as a whole picture.
 */
.learn-room--study {
  --orange: #c9661c;
  --orange-soft: #fde6c8;
  --green-ink: #2f6a24;
}
.round-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  margin: 0 0 12px;
}
.round-bar[hidden] {
  display: none;
}
.round-dots {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.round-dot {
  width: 14px;
  height: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition:
    background 0.2s,
    transform 0.26s var(--ease-spring);
}
.round-dot.is-now {
  background: var(--butter);
  transform: scale(1.3);
}
.round-dot.is-right {
  background: var(--pad);
}
.round-dot.is-again {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 2px var(--orange);
}
.round-dot.is-miss {
  background: var(--orange);
}
.round-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
}
.round-overall {
  font-weight: 700;
}
.round-streak {
  padding: 1px 10px;
  font: 1.05rem/1.4 var(--heading);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
}
.round-streak[hidden] {
  display: none;
}
.round-streak.is-pop {
  animation: round-pop 0.32s var(--ease-spring);
}
@keyframes round-pop {
  from {
    transform: scale(0.5) rotate(-8deg);
  }
  to {
    transform: none;
  }
}

/* The answer sheet: rises from the bottom of the stage after every answer. */
.answer-sheet {
  position: absolute;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 20px 18px 16px 16px;
  box-shadow:
    0 -6px 18px rgb(57 44 32 / 0.12),
    4px 4px 0 var(--ink);
  opacity: 0;
  transform: translateY(18px);
  transition:
    transform 0.26s var(--ease-out),
    opacity 0.18s;
}
.answer-sheet[hidden] {
  display: none;
}
/* Too long for the screen where it sits: docked to the bottom of the screen, scrolling inside. */
.answer-sheet.is-docked {
  position: fixed;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 30;
  max-width: 640px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  margin: 0 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.answer-sheet.is-docked .answer-actions {
  position: sticky;
  bottom: -14px;
  margin: 0 -14px -14px;
  padding: 10px 14px 14px;
  background: inherit;
}
.answer-sheet.is-in {
  opacity: 1;
  transform: none;
}
.answer-sheet.is-right {
  background: #e4f5dc;
}
.answer-sheet.is-wrong {
  background: #fff0e6;
}
.answer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 1.45rem/1.1 var(--heading);
}
.is-right > .answer-head {
  color: var(--green-ink);
}
.is-wrong > .answer-head {
  color: var(--red);
}
.answer-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.is-in .answer-mark {
  animation: round-pop 0.3s var(--ease-spring);
}
.mark-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.answer-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.answer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  font-weight: 700;
}
.answer-line-jp {
  font-size: 1.3rem;
  overflow-wrap: anywhere;
}
.answer-line-romaji,
.answer-romaji {
  color: var(--red);
}
.answer-big {
  display: grid;
  justify-items: start;
  gap: 1px;
}
.answer-kanji {
  font-size: 1rem;
  color: var(--muted);
}
.answer-jp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.answer-jp {
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.answer-romaji {
  font: 1.2rem/1.2 var(--heading);
}
.answer-en {
  font-size: 1.08rem;
  font-weight: 700;
}
.answer-given,
.answer-note {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.answer-given s {
  color: var(--red);
  font-weight: 700;
}
.answer-say {
  width: 34px;
  height: 34px;
  margin: 0;
}
.answer-say .speaker-icon {
  width: 19px;
  height: 19px;
}
.answer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.answer-actions .drawing-button[hidden] {
  display: none;
}
.answer-next {
  position: relative;
  min-width: 132px;
  overflow: hidden;
}
/* A right answer moves on by itself: a thin bar fills along the Next button meanwhile. */
.answer-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--ink);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.answer-sheet.is-auto.is-in .answer-timer {
  opacity: 0.35;
  animation: answer-timer 0.9s linear forwards;
}
@keyframes answer-timer {
  to {
    transform: scaleX(1);
  }
}

/* The round summary: Kero, stars, the four answers, one clear next step. */
.study-done[hidden] {
  display: none;
}
.round-summary {
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
}
.round-summary-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.round-summary-kero {
  flex: none;
  width: 92px;
  height: auto;
}
.round-summary.is-cheer .round-summary-kero {
  animation: kero-cheer 0.8s var(--ease-out) 2;
}
@keyframes kero-cheer {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  35% {
    transform: translateY(-24px) rotate(-8deg);
  }
  65% {
    transform: translateY(0) rotate(5deg);
  }
}
.round-summary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.round-summary-title {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.3rem);
}
.round-summary-title:focus {
  outline: none;
}
.round-summary-detail {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.round-stars {
  display: flex;
  gap: 4px;
  margin: 0;
}
.round-star .hop-star {
  display: block;
  width: 34px;
  height: 32px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.round-star.is-on .hop-star {
  fill: var(--yellow);
}
.round-star {
  animation: round-pop 0.34s var(--ease-spring) both;
}
.round-star:nth-child(2) {
  animation-delay: 0.12s;
}
.round-star:nth-child(3) {
  animation-delay: 0.24s;
}
.round-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.round-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.round-row-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.round-row-mark .mark-icon {
  width: 16px;
  height: 16px;
}
.round-row.is-right .round-row-mark {
  color: var(--green-ink);
  background: var(--right);
}
.round-row.is-again .round-row-mark {
  color: var(--orange);
  background: var(--orange-soft);
}
.round-row-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
}
.round-row-jp {
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.round-row-romaji {
  color: var(--red);
  font-weight: 700;
}
.round-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.round-actions > :first-child {
  flex: 1 1 200px;
}
.round-play {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 2px dashed rgb(57 44 32 / 0.25);
}
.round-play-label {
  margin-right: 4px;
  font: 1.1rem/1 var(--heading);
}
.round-play-link {
  flex: 1 1 0;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}
.round-confetti {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ════ Flashcards: a stack of cards to flip and swipe ════ */
.cards-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.cards-stage[hidden] {
  display: none;
}
.card-deck {
  position: relative;
  display: grid;
  margin-bottom: 8px;
  /* A sorted card flies off sideways. Left unclipped, that overflow plus the next card rising
     made phone browsers scroll the page to the top on every Know it or Still learning. Clip
     sideways only, with room for the cards' offset shadow. */
  overflow-x: clip;
  overflow-clip-margin: 12px;
}
.card-ghost {
  grid-area: 1 / 1;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 4px 4px 0 var(--ink);
}
.card-ghost[hidden] {
  display: none;
}
.card-ghost--1 {
  transform: translateY(7px) rotate(1.6deg) scale(0.975);
}
.card-ghost--2 {
  background: #f4ead2;
  transform: translateY(13px) rotate(-2.2deg) scale(0.95);
}
.flashcard {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  touch-action: pan-y;
}
.flashcard.is-rising {
  animation: card-rise 0.24s var(--ease-out);
}
@keyframes card-rise {
  from {
    transform: translateY(10px) scale(0.95);
  }
}
.flashcard--flyer {
  z-index: 3;
  pointer-events: none;
}
.flashcard--flyer .flashcard-stamp.is-shown {
  opacity: 1;
}
.flashcard.is-flying {
  transition:
    transform 0.22s var(--ease-in),
    opacity 0.22s ease-in;
}
.flashcard.is-back {
  transition: transform 0.26s var(--ease-spring);
}
.flashcard-face {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-align: center;
  background: none;
  border: 0;
  border-radius: 22px 18px 24px 20px;
  cursor: grab;
  touch-action: pan-y;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.flashcard.is-dragging .flashcard-face {
  cursor: grabbing;
}
.flashcard-face:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 4px;
}
.flashcard-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.32s var(--ease-spring);
}
.flashcard.is-flipped .flashcard-inner {
  transform: rotateY(180deg);
}
.flashcard-side {
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  /* Tall enough for most backs (a note included), so the buttons stay put from card to card. */
  min-height: 290px;
  padding: 26px 20px 28px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 6px 6px 0 var(--ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.study-card-back.flashcard-side {
  background: #eef8e6;
  transform: rotateY(180deg);
}
.flashcard-stamp {
  position: absolute;
  top: 62px;
  z-index: 2;
  padding: 4px 12px;
  font: 1.25rem/1.2 var(--heading);
  background: rgb(255 255 255 / 0.88);
  border: 3px solid currentColor;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
}
.flashcard-stamp.is-know {
  left: 16px;
  color: var(--green-ink);
  transform: rotate(-12deg);
}
.flashcard-stamp.is-learning {
  right: 16px;
  color: var(--orange);
  transform: rotate(10deg);
}
.flashcard-again {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--orange-soft);
  border: 2px solid var(--ink);
  border-radius: 999px;
  pointer-events: none;
}
.flashcard-again[hidden] {
  display: none;
}
.study-card-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  gap: 8px;
}
.study-card-hint {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.study-card-jp {
  font-size: clamp(2rem, 9.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.study-card-kanji {
  font-size: 1.3rem;
  color: var(--muted);
}
.study-card-romaji {
  font: 1.7rem/1.1 var(--heading);
  color: var(--red);
}
.study-card-meaning {
  font: clamp(1.6rem, 6vw, 2.2rem)/1.15 var(--heading);
}
.study-card-visual .learn-art,
.study-card-visual .clock,
.study-card-visual .visual {
  width: 104px;
  height: 104px;
}
.study-card-visual .visual--days,
.study-card-visual .visual--span,
.study-card-visual .visual--week {
  width: 170px;
  height: auto;
}
.study-card-kana {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.study-card-example {
  display: grid;
  gap: 2px;
  max-width: 40ch;
  padding: 8px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-size: 0.95rem;
}
.study-card-example-jp {
  font-size: 1.1rem;
  font-weight: 700;
}
.study-card-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.study-card-note {
  max-width: 42ch;
  font-size: 0.95rem;
  color: var(--muted);
}
.study-card-pattern {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 700;
}
.study-card-line {
  display: grid;
  gap: 2px;
}
.study-card-speaker {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
}
.study-card-sentence {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 700;
}
.study-card-romaji-small {
  color: var(--red);
  font-weight: 700;
}
.study-card-english {
  font-size: 1.1rem;
}
.study-piles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.study-pile {
  min-height: 54px;
  gap: 8px;
  padding: 8px 10px;
}
.study-pile--learning {
  background: var(--orange-soft);
}
.study-pile-count {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  font-size: 0.85rem;
  background: rgb(255 255 255 / 0.75);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.study-pile-arrow {
  font-size: 1.1rem;
}
.card-sides {
  justify-self: center;
}
.study-toggle {
  display: inline-flex;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.study-chip {
  min-height: 44px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}
.study-toggle .study-chip {
  border: 0;
  border-radius: 0;
}
.study-toggle .study-chip + .study-chip {
  border-left: 2px solid var(--ink);
}
.study-chip[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
@media (min-width: 720px) {
  .flashcard-side {
    min-height: 320px;
  }
}
@media (max-width: 380px) {
  .study-pile {
    font-size: 0.9rem;
    gap: 6px;
  }
  .study-pile-arrow {
    display: none;
  }
  .flashcard-side {
    min-height: 250px;
  }
}

/* ════ Learn: one question at a time, on a stage that never jumps ════ */
.ask-stage {
  position: relative;
  min-height: 360px;
  max-width: 620px;
  margin: 0 auto;
}
.ask-stage[hidden] {
  display: none;
}
.ask-question {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  text-align: center;
}
.ask-prompt {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.ask-target {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 100px;
  padding: 12px 46px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 20px 16px 22px 18px;
  box-shadow: 4px 4px 0 var(--ink);
}
.ask-target--sentence {
  padding: 12px 14px;
}
.ask-target:focus {
  outline: none;
}
.ask-target:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.ask-target--gap {
  justify-items: stretch;
  padding: 12px 14px;
  text-align: left;
}
.ask-target--listen {
  background: var(--butter);
}
.ask-jp {
  font-size: clamp(1.9rem, 8.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.ask-jp.is-long,
.ask-line-jp.is-very-long {
  font-size: clamp(1.6rem, 6vw, 2.3rem);
}
.ask-jp.is-very-long {
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}
.ask-kanji {
  font-size: 1.1rem;
  color: var(--muted);
}
.ask-romaji {
  font: 1.25rem/1.2 var(--heading);
  color: var(--red);
}
.ask-romaji--line {
  font: 700 1rem/1.3 var(--body);
}
.ask-line--romaji {
  justify-content: center;
}
.ask-en {
  font: clamp(1.5rem, 6vw, 2.1rem)/1.15 var(--heading);
}
.ask-target .ask-say {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}
.ask-visual .learn-art,
.ask-visual .clock,
.ask-visual .visual {
  width: 88px;
  height: 88px;
}
.ask-visual .visual--days,
.ask-visual .visual--span,
.ask-visual .visual--week {
  width: 150px;
  height: auto;
}
.ask-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}
.ask-line-speaker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ask-line-jp {
  font-size: clamp(1.3rem, 5.4vw, 1.8rem);
  font-weight: 700;
}
/* Japanese with spaces between its words wraps at the spaces, never inside a word: everywhere
   in Lessons 1-6 (the Pattern tab, word lists, blocks), not just in the questions. */
.learn-room--study [lang='ja'],
.ask-line-jp,
.ask-jp,
.answer-jp,
.answer-line-jp,
.round-row-jp,
.study-card-sentence,
.study-card-jp,
.study-card-kana,
.ask-choice-jp {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.ask-line--before .ask-line-jp {
  font-size: 1.05rem;
}
.ask-line-en {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--muted);
}
.ask-target .ask-line--main .ask-say {
  position: static;
  width: 32px;
  height: 32px;
}
.ask-choices {
  display: grid;
  gap: 8px;
}
.ask-choices[hidden] {
  display: none;
}
.ask-choices.is-grid {
  grid-template-columns: 1fr 1fr;
}
.ask-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 6px 14px;
  font: 700 1.05rem/1.25 var(--body);
  color: var(--ink);
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  overflow-wrap: anywhere;
  transition:
    transform 90ms,
    box-shadow 90ms,
    background 0.15s;
}
.ask-choice:not(:disabled):hover {
  background: var(--butter);
}
.ask-choice:not(:disabled):active {
  box-shadow: 0 1px 0 var(--ink);
  transform: translateY(3px);
}
.ask-choice:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.ask-choice:disabled {
  cursor: default;
}
.ask-choice:disabled:not(.is-right, .is-wrong) {
  opacity: 0.5;
}
.ask-choice.is-right {
  background: var(--right);
  animation: choice-pop 0.3s var(--ease-spring);
}
.ask-choice.is-wrong {
  background: var(--wrong);
  animation: choice-shake 0.24s;
}
@keyframes choice-pop {
  50% {
    transform: scale(1.05);
  }
}
@keyframes choice-shake {
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}
.ask-choice-key {
  display: none;
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: 0.72rem;
  color: var(--muted);
}
@media (hover: hover) and (pointer: fine) {
  .ask-choice-key {
    display: block;
  }
}
.ask-choice-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.ask-choice-jp {
  font-size: 1.35rem;
}
.ask-choice-jp.is-long {
  font-size: 1.1rem;
}
.ask-dunno {
  min-height: 44px;
  padding: 6px 12px;
  font: 700 0.95rem/1.2 var(--body);
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.ask-dunno:disabled {
  opacity: 0.5;
  cursor: default;
}
.ask-question.is-enter .ask-target,
.ask-question.is-enter .ask-choice {
  animation: learn-in 0.26s var(--ease-out) both;
}
.ask-question.is-enter .ask-choice:nth-child(2) {
  animation-delay: 0.04s;
}
.ask-question.is-enter .ask-choice:nth-child(3) {
  animation-delay: 0.08s;
}
.ask-question.is-enter .ask-choice:nth-child(4) {
  animation-delay: 0.12s;
}
/* Slide and settle without fading, so the question and its answers are readable (and pass the
   contrast audit) from the first frame. */
@keyframes learn-in {
  from {
    transform: translateY(10px) scale(0.96);
  }
}
/* A finished set or run has its own Next button, so the player's set buttons step aside. */
.study-player:has(.study-panel:not([hidden]) .round-play) .study-player-nav {
  display: none;
}
@media (max-width: 520px) {
  /* On a phone the round needs the room; the set's words are on its cards. */
  .study-player-range {
    display: none;
  }
  .ask-question {
    gap: 10px;
  }
}
.study-pattern-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .flashcard-inner,
  .flashcard.is-flipped .flashcard-inner {
    transform: none;
    transition: none;
  }
  .flashcard-side {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transition: opacity 0.15s;
  }
  .study-card-back.flashcard-side {
    visibility: hidden;
    opacity: 0;
    transform: none;
  }
  .flashcard.is-flipped .study-card-back {
    visibility: visible;
    opacity: 1;
  }
  .flashcard.is-flipped .study-card-front {
    visibility: hidden;
    opacity: 0;
  }
  .flashcard.is-rising,
  .ask-question.is-enter .ask-target,
  .ask-question.is-enter .ask-choice,
  .ask-choice.is-right,
  .ask-choice.is-wrong,
  .round-streak.is-pop,
  .round-star,
  .is-in .answer-mark,
  .round-summary.is-cheer .round-summary-kero {
    animation: none;
  }
  .answer-sheet {
    transform: none;
    transition: opacity 0.15s;
  }
  .answer-sheet.is-auto.is-in .answer-timer {
    animation: none;
  }
  .round-dot,
  .ask-choice {
    transition: none;
  }
}
@media (forced-colors: active) {
  .round-dot.is-right,
  .round-dot.is-miss,
  .round-dot.is-now {
    background: Highlight;
  }
  .answer-sheet,
  .flashcard-side,
  .ask-choice {
    border-color: CanvasText;
  }
}

/* Lily pads and Gyoza Grab: see the sections at the end of this file. */

/* Grammar */
.study-patterns {
  display: grid;
  gap: 16px;
}
.study-patterns-intro {
  margin: 0;
  font-weight: 700;
}
.study-pattern-card {
  padding: 18px 20px;
  background: var(--butter);
  border: 3px solid var(--ink);
  border-radius: 18px 22px 16px 20px;
}
.study-pattern-card .eyebrow {
  margin-bottom: 4px;
  color: var(--red);
}
.study-pattern-card .study-pattern-jp {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
}
.study-pattern-romaji {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--red);
}
.study-pattern-meaning {
  margin: 0 0 6px;
  font: 1.3rem/1.2 var(--heading);
}
.study-pattern-how {
  max-width: 62ch;
  margin: 0;
}
.study-examples-title {
  margin: 16px 0 8px;
  font: 1.15rem/1.2 var(--heading);
}
.study-examples {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.study-example {
  padding: 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
}
.study-say {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0 0 8px;
}
.study-say-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.study-say:last-child {
  margin-bottom: 0;
}
.study-say-name {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.study-say-jp {
  font-size: 1.25rem;
  font-weight: 700;
}
.study-say-kanji {
  color: var(--muted);
}
.study-say-romaji {
  color: var(--red);
  font-weight: 700;
}
.study-say-en {
  color: var(--muted);
}
.study-face {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
  object-position: top;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.study-face--text {
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--butter);
}
.study-more-examples,
.study-pattern-fold {
  margin-top: 12px;
}
.study-more-examples summary,
.study-pattern-fold summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-height: 44px;
  padding: 8px 0;
  font-weight: 700;
  cursor: pointer;
}
.study-pattern-fold {
  padding: 4px 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px;
}
.study-pattern-fold[open] {
  padding-bottom: 14px;
}
.study-fold-jp {
  font-size: 1.2rem;
}
.study-fold-en {
  color: var(--muted);
}
.study-gap-hint {
  margin: 6px 0 0;
  font-weight: 700;
  color: var(--red);
}

@media (max-width: 720px) {
  .study-panel {
    padding: 14px 12px 16px;
  }
  .study-section {
    padding: 16px 14px 14px;
  }
  .study-section-head {
    flex-wrap: wrap;
  }
  .study-section-count {
    flex-basis: 100%;
    text-align: left;
  }
  .study-sets {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .study-lesson,
  .study-set,
  .study-meter > span {
    transition: none;
  }
  .study-lesson:hover,
  .study-set:hover,
  .study-tile[aria-pressed='true'] {
    transform: none;
  }
}
@media (forced-colors: active) {
  .study-set,
  .study-section,
  .study-panel,
  .study-card-face,
  .study-tile,
  .study-lesson {
    box-shadow: none;
  }
  .study-tab[aria-selected='true'],
  .study-chip[aria-pressed='true'],
  .study-tile[aria-pressed='true'] {
    outline: 3px solid Highlight;
  }
  .hop-label {
    border-color: CanvasText;
  }
}

/* Long phrases shrink so they still fit a phone. */
.study-card-jp.is-long {
  font-size: clamp(1.6rem, 6vw, 2.3rem);
}
.study-card-jp.is-very-long {
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}
.learn-room--study.is-playing > .learn-back {
  display: none;
}
@media (max-width: 520px) {
  .study-tabs {
    gap: 5px;
  }
  .study-tab {
    min-height: 44px;
    padding: 6px 11px;
    font-size: 0.9rem;
  }
  .study-bar {
    gap: 6px;
  }
  /* On a phone the switches show just their icons; their names stay for screen readers. */
  .study-switch {
    justify-content: center;
    width: 44px;
    padding: 0;
  }
  .study-switch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .study-tab {
    padding: 6px 8px;
    font-size: 0.86rem;
  }
}

/* While a set is open, the lesson title shrinks to one line above the player. */
.learn-room--study.is-playing .study-head {
  margin-bottom: 6px;
}
.learn-room--study.is-playing .study-head h1.lesson-title {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.learn-room--study.is-playing .study-head .eyebrow,
.learn-room--study.is-playing .study-head .lesson-romaji,
.learn-room--study.is-playing .study-head .study-summary {
  display: none;
}

/* ════ Lily pads ════
 * One portrait stage: the painted pond scrolls under a camera, the pads are drawn in code, and
 * Kero and Goro move only as whole pictures (translate, rotate, uniform scale, opacity).
 * JavaScript sets transforms through the CSSOM, never a style attribute.
 */
.learn-room--study,
.play-host {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* The games also run on the kana and numbers lessons, which have their own page colours. */
.play-host {
  --pond: #8bd1d6;
  --pad: #6fae4f;
  --pad-dark: #3f7a2c;
  --right: #cfeccb;
  --wrong: #f6d2cc;
}
.play-host [lang='ja'] {
  font-family: 'Kero Japanese', var(--body);
}
.study-panel[data-panel='play'] {
  padding: 10px;
}
.hop-stage {
  position: relative;
  width: min(100%, 520px);
  height: clamp(460px, calc(100vh - 28px), 720px);
  height: clamp(460px, calc(100svh - 28px), 720px);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #5ed8c3;
  border: 3px solid var(--ink);
  border-radius: 20px;
  scroll-margin-top: 10px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hop-scene,
.hop-fx,
.hop-front {
  position: absolute;
  inset: 0;
}
.hop-scene {
  z-index: 0;
}
.hop-scene.is-arriving {
  animation: hop-fade-in 0.35s ease-out;
}
.hop-fx {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hop-scene.is-shaking {
  animation: hop-shake 0.2s linear;
}
.hop-world {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
}
.hop-water,
.hop-far-water {
  background-color: #5ed8c3;
  background-image: url('/assets/study/pond-water-720.webp');
  background-image: -webkit-image-set(
    url('/assets/study/pond-water-720.webp') 1x,
    url('/assets/study/pond-water.webp') 2x
  );
  background-image: image-set(
    url('/assets/study/pond-water-720.webp') 1x,
    url('/assets/study/pond-water.webp') 2x
  );
  background-repeat: repeat-y;
  background-size: 100% auto;
}
.hop-water {
  position: absolute;
  inset: 0;
}
.hop-far {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.hop-far.is-moving {
  transition: transform 0.42s var(--ease-out);
}
.hop-sky {
  position: relative;
  height: 1600px;
  background: linear-gradient(to bottom, #f1fbff 0%, #d6f2fd 70%, #bcebfe 100%);
}
/* Two soft clouds just above the far bank's roofs, drawn in code. */
.hop-sky::before,
.hop-sky::after {
  content: '';
  position: absolute;
  bottom: 34px;
  width: 30%;
  height: 34px;
  background:
    radial-gradient(circle at 30% 70%, #fff 0 38%, transparent 40%),
    radial-gradient(circle at 55% 45%, #fff 0 44%, transparent 46%),
    radial-gradient(circle at 78% 70%, #fff 0 34%, transparent 36%);
  opacity: 0.9;
}
.hop-sky::before {
  left: 8%;
}
.hop-sky::after {
  right: 6%;
  bottom: 70px;
  width: 24%;
  opacity: 0.75;
}
.hop-far-art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
}
.hop-far-water {
  height: 0;
  margin-top: -1px;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hop-near {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: auto;
}
/* Light glinting on the water: two drifting layers of code-drawn highlights. */
.hop-shimmer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.hop-shimmer::before,
.hop-shimmer::after {
  content: '';
  position: absolute;
  inset: -40px -60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='170'%3E%3Cg fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='2.4'%3E%3Cpath d='M18 30q9-6 18 0'/%3E%3Cpath d='M122 74q11-7 22 0'/%3E%3Cpath d='M58 128q8-5 16 0'/%3E%3Cpath d='M176 146q8-5 16 0'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='92' cy='22' r='1.8'/%3E%3Ccircle cx='172' cy='98' r='1.5'/%3E%3Ccircle cx='34' cy='88' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.32;
  animation: hop-drift 9s ease-in-out infinite alternate;
}
.hop-shimmer::after {
  background-position: 110px 60px;
  opacity: 0.22;
  animation:
    hop-drift 12s ease-in-out -4s infinite alternate-reverse,
    hop-twinkle 3.6s ease-in-out infinite alternate;
}
.hop-rows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hop-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
}
.hop-pad {
  position: absolute;
  bottom: 0;
  width: 29%;
  padding: 0;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  transform: translate(-50%, 50%);
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.hop-row--3 .hop-pad:nth-child(1) {
  left: 20%;
}
.hop-row--3 .hop-pad:nth-child(2) {
  left: 50%;
}
.hop-row--3 .hop-pad:nth-child(3) {
  left: 80%;
}
.hop-row--2 .hop-pad {
  width: 38%;
}
.hop-row--2 .hop-pad:nth-child(1) {
  left: 30%;
}
.hop-row--2 .hop-pad:nth-child(2) {
  left: 70%;
}
.hop-pad:disabled {
  cursor: default;
}
.hop-pad:focus {
  outline: none;
}
.hop-pad-sink,
.hop-pad-float,
.hop-pad-bob {
  position: relative;
  display: block;
}
.hop-pad-float {
  transition:
    transform 0.32s var(--ease-spring),
    opacity 0.28s ease-out;
}
.hop-pad:nth-child(2) .hop-pad-float {
  transition-delay: 60ms;
}
.hop-pad:nth-child(3) .hop-pad-float {
  transition-delay: 120ms;
}
.hop-row.is-submerged .hop-pad-float {
  opacity: 0.45;
  transform: translateY(10px) scale(0.86);
}
.hop-row.is-submerged .hop-label,
.hop-row.is-submerged .hop-lotus {
  visibility: hidden;
}
.hop-pad-bob {
  animation: hop-bob 3s ease-in-out infinite;
}
.hop-pad:nth-child(2) .hop-pad-bob {
  animation-delay: -1s;
}
.hop-pad:nth-child(3) .hop-pad-bob {
  animation-delay: -2s;
}
/* A slow ring of water spreading round each pad. */
.hop-pad-sink::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: 34%;
  height: 52%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  opacity: 0;
  animation: hop-ripple 3.4s ease-out infinite;
}
.hop-pad:nth-child(2) .hop-pad-sink::before {
  animation-delay: -1.2s;
}
.hop-pad:nth-child(3) .hop-pad-sink::before {
  animation-delay: -2.3s;
}
.hop-leaf {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hop-leaf-shadow {
  fill: rgba(12, 74, 78, 0.24);
}
.hop-leaf-under {
  fill: #2f6a25;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.hop-leaf-top {
  fill: #6fb04e;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.hop-leaf-light {
  fill: #93d468;
  opacity: 0.75;
}
.hop-leaf-vein {
  fill: none;
  stroke: #3f7a2c;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.8;
}
.hop-lotus {
  position: absolute;
  top: -30%;
  right: -4%;
  width: 30%;
  height: auto;
  pointer-events: none;
}
.hop-label {
  position: absolute;
  top: 48%;
  left: 50%;
  display: block;
  width: max-content;
  max-width: 92%;
  padding: 3px 7px;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: break-word;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.15s var(--ease-out);
}
.hop-label:empty {
  display: none;
}
.hop-key {
  position: absolute;
  top: -9px;
  left: -9px;
  display: none;
  width: 20px;
  height: 20px;
  font: 700 0.72rem/16px var(--body);
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .hop-key {
    display: block;
  }
}
.hop-label.is-long {
  font-size: 0.8rem;
}
.hop-label.is-very-long {
  font-size: 0.72rem;
}
.hop-label.is-jp {
  max-width: 100%;
  padding-inline: 5px;
}
.hop-label-jp {
  display: block;
  font-size: 1.22rem;
  line-height: 1.15;
  white-space: nowrap;
}
.hop-label.is-long .hop-label-jp {
  font-size: 1.04rem;
}
.hop-label.is-very-long .hop-label-jp {
  font-size: 0.88rem;
}
.hop-label.is-wrap .hop-label-jp {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.hop-pad:not(:disabled):hover .hop-label {
  transform: translate(-50%, -58%);
}
.hop-pad:focus-visible .hop-label {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.hop-pad.is-pressed .hop-pad-float {
  transform: translateY(3px);
  transition-duration: 0.09s;
}
.hop-pad.is-landed .hop-pad-float {
  animation: hop-dip 0.38s var(--ease-out);
}
.hop-pad.is-right .hop-label {
  background: var(--right);
  opacity: 0;
  transition: opacity 0.2s 0.15s;
}
.hop-pad.is-gone .hop-pad-float {
  animation: hop-wobble-sink 0.7s ease-in forwards;
}
.hop-pad.is-tipped .hop-pad-float {
  animation: hop-tip 0.45s var(--ease-in) 0.05s forwards;
}
.hop-pad.is-under .hop-pad-float {
  animation: hop-under 0.4s ease-in forwards;
}
.hop-pad.is-gold .hop-pad-float {
  animation: hop-resurface 0.4s var(--ease-spring) both;
}
.hop-pad.is-gold .hop-label {
  background: #ffe08a;
}
.hop-pad-bob::after {
  content: '';
  position: absolute;
  left: -6%;
  right: -6%;
  top: 8%;
  height: 84%;
  border: 4px solid #ffd23f;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.hop-pad.is-gold .hop-pad-bob::after {
  animation: hop-glow 0.8s ease-in-out 0.4s 2 both;
}
/* A streak of three makes the labels glint. */
.hop-row.is-glinting .hop-label {
  background-image: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 236, 160, 0.9) 48%,
    transparent 66%
  );
  background-size: 260% 100%;
  animation: hop-glint 1.4s ease-in-out 0.3s 1 both;
}

/* Kero and his shadow */
.hop-kero {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--kero-w, 86px);
  will-change: transform;
  pointer-events: none;
}
.hop-kero-sink {
  position: relative;
  display: block;
  transform-origin: 50% 100%;
}
.hop-kero-sink.is-sinking {
  overflow: hidden;
  margin-top: -220px;
  padding-top: 220px;
}
.hop-kero-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
}
.hop-stage[data-state='ready'] .hop-kero-sink,
.hop-stage[data-state='intro'] .hop-kero-sink {
  animation: hop-breathe 2.6s ease-in-out infinite;
}
.hop-kero.is-happy .hop-kero-sink {
  animation: hop-happy 0.46s var(--ease-out) 2;
}
.hop-kero.is-startled .hop-kero-sink {
  animation: hop-startle 0.42s var(--ease-out);
}
.hop-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--kero-w, 86px) * 0.72);
  height: calc(var(--kero-w, 86px) * 0.2);
  background: rgba(16, 58, 52, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

/* Reeds in front, and Goro hiding behind the right-hand clump */
.hop-front {
  overflow: hidden;
  pointer-events: none;
}
.hop-reeds {
  position: absolute;
  bottom: -3%;
  width: auto;
  height: 25%;
  transform-origin: 50% 100%;
  animation: hop-sway 5s ease-in-out infinite alternate;
}
.hop-reeds--left {
  left: -8%;
  height: 22%;
}
.hop-hide {
  position: absolute;
  right: -7%;
  bottom: -3%;
  height: 26%;
  aspect-ratio: 568 / 900;
}
.hop-reeds-clump {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: hop-sway 5s ease-in-out -2.4s infinite alternate;
}
.hop-goro {
  position: absolute;
  left: 6%;
  bottom: 34%;
  width: 84%;
  transform: translateY(110%);
  transition: transform 0.26s var(--ease-spring);
}
.hop-goro.is-peek {
  transform: translateY(6%);
  transition-duration: 0.4s;
  transition-timing-function: var(--ease-out);
}
.hop-goro.is-up {
  transform: translateY(-72%);
}
.hop-goro.is-sulking {
  transform: translateY(70%) rotate(-10deg);
  transition-duration: 0.7s;
  transition-timing-function: var(--ease-in);
}
.hop-goro-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 90%;
}
.hop-goro.is-peek .hop-goro-img {
  animation: hop-look 4.2s ease-in-out infinite;
}
.hop-goro.is-laughing .hop-goro-img {
  animation: hop-laugh 0.5s ease-in-out 2;
}

/* Heads-up: takoyaki, crossing, streak, sound */
.hop-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  pointer-events: none;
}
.hop-hud > * {
  pointer-events: auto;
}
.hop-hud.is-quiet .hop-boat,
.hop-hud.is-quiet .hop-crossing,
.hop-hud.is-quiet .hop-combo,
.hop-stage[data-state='results'] .hop-crossing,
.hop-stage[data-state='results'] .hop-combo {
  visibility: hidden;
}
.hop-boat {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  width: 94px;
  height: 40px;
  padding: 0 8px 7px;
}
.hop-boat-tray {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22px;
}
.hop-boat-wood {
  fill: #ecc98c;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.hop-boat-grain {
  fill: none;
  stroke: #c79a55;
  stroke-width: 1.4;
}
.hop-boat-ball {
  position: relative;
  width: 26px;
  height: 26px;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.hop-boat-ball.is-gone {
  opacity: 0;
  transform: scale(0.4);
}
.hop-tako {
  display: block;
  width: 100%;
  height: 100%;
}
.hop-tako-ball {
  fill: #d99140;
  stroke: var(--ink);
  stroke-width: 2;
}
.hop-tako-shade {
  fill: #b4692a;
}
.hop-tako-sauce {
  fill: #5b2d14;
}
.hop-tako-mayo {
  fill: none;
  stroke: #fffaf0;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hop-tako-nori {
  fill: #3f8a2c;
}
.hop-tako-flake {
  fill: #f0c49a;
}
.hop-tako-shine {
  fill: none;
  stroke: #f3c27c;
  stroke-width: 2;
  stroke-linecap: round;
}
.hop-flyer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.hop-crossing {
  margin: 0 auto;
  padding: 2px 10px;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.hop-crossing:empty {
  visibility: hidden;
}
.hop-combo {
  margin: 0;
  padding: 2px 8px;
  font: 1.05rem/1.2 var(--heading);
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}
.hop-combo:empty {
  display: none;
}
.hop-combo.is-hot {
  color: var(--yellow);
}
.hop-sound {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
}
.hop-sound .speaker-icon {
  width: 24px;
  height: 24px;
}
.hop-sound[aria-pressed='false'] .speaker-waves {
  opacity: 0;
}
.hop-sound[aria-pressed='false']::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
  transform: rotate(-45deg);
}
.hop-sound:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}

/* The prompt card: the question, then the answer in the same place */
.hop-card {
  position: absolute;
  top: 58px;
  left: 10px;
  right: 10px;
  z-index: 3;
  padding: 12px 14px 16px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
}
.hop-card[hidden] {
  display: none;
}
.hop-card:focus {
  outline: none;
}
.hop-card:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.hop-card.is-right {
  background: #effae9;
}
.hop-card.is-wrong {
  background: #fff3ee;
}
.hop-card-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  max-height: calc(var(--stage-h, 600px) - 100px);
  overflow-y: auto;
}
/* A short prompt with no speaker (a sound to pick the kana for, a particle's job) never needs
   scrolling, and with nothing in it to focus it must not become a scroll box at all: a romaji
   sound overflows its line box by a few pixels, which would show a scroll bar on Windows and
   fail the keyboard scroll check. */
.hop-card-body:not(:has(button)) {
  overflow: visible;
}
.hop-card-body.is-new {
  animation: hop-card-in 0.22s var(--ease-out);
}
.hop-clock-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.hop-clock-track {
  fill: none;
  stroke: none;
}
.hop-clock-left {
  fill: none;
  stroke: #f0a63a;
  stroke-width: 5;
  stroke-dasharray: 100 100;
  stroke-linecap: round;
}
.hop-card.is-timed .hop-clock-ring {
  opacity: 1;
}
.hop-card.is-hurry .hop-clock-left {
  stroke: var(--red);
}
.hop-clock-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  display: none;
  height: 5px;
  background: var(--red);
  border-radius: 3px;
  transform-origin: left center;
}
.hop-prompt-kanji {
  font-size: 0.95rem;
  color: var(--muted);
}
.hop-prompt-jp {
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
}
.hop-prompt-jp.is-long {
  font-size: clamp(1.5rem, 6vw, 2rem);
}
.hop-prompt-jp.is-very-long {
  font-size: clamp(1.2rem, 5vw, 1.6rem);
}
.hop-prompt-romaji,
.hop-answer-romaji {
  font: 1.08rem/1.2 var(--heading);
  color: var(--red);
}
/* A particle's sound alone (wa, o, e) is too short to read at the romaji's usual size. */
.hop-prompt-romaji--big {
  font-size: 1.7rem;
}
.hop-prompt-ask {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hop-prompt-en {
  font: clamp(1.3rem, 5.4vw, 1.7rem)/1.15 var(--heading);
}
/* A long meaning stays short enough that the card never reaches the pads on a small phone. */
.hop-prompt-en.is-long {
  font-size: clamp(1.1rem, 4.6vw, 1.45rem);
}
.hop-prompt-en.is-very-long {
  font-size: clamp(1rem, 4.1vw, 1.25rem);
}
/* The English to spell, with the word's picture or clock beside it. */
.hop-prompt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
}
.hop-prompt-visual {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
.hop-prompt-visual > *,
.hop-prompt-visual img,
.hop-prompt-visual svg {
  max-width: 48px;
  max-height: 48px;
  width: auto;
  height: auto;
}
.hop-prompt-visual .time-prompt-text {
  display: none;
}
.hop-context {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.hop-context-name {
  font-weight: 700;
}
.hop-pieces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 2px 0;
}
.hop-piece {
  max-width: 100%;
  padding: 2px 8px;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  /* A piece is a word or two: it moves to the next line whole, never split from its 。 */
  white-space: nowrap;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.hop-piece.has-gap {
  border-style: dashed;
}
.hop-piece.has-gap:has(.hop-filled) {
  border-style: solid;
}
.hop-piece.is-long {
  font-size: 0.98rem;
}
.hop-blank {
  display: inline-block;
  min-width: 2em;
  color: var(--red);
}
.hop-filled {
  color: #1f6b2a;
  text-decoration: underline 3px;
  text-underline-offset: 4px;
}
.hop-prompt-line-en,
.hop-answer-en {
  font-weight: 700;
}
.hop-prompt-line-romaji,
.hop-answer-line-romaji,
.hop-answer-note {
  font-size: 0.86rem;
  color: var(--muted);
}
.hop-picked {
  font: 700 0.9rem/1.2 var(--body);
  color: var(--muted);
}
.hop-picked s {
  text-decoration-thickness: 2px;
}
.hop-hint {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--red);
}
.hop-verdict {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  font: 1.15rem/1.2 var(--heading);
}
.hop-card.is-right .hop-verdict {
  color: #1f6b2a;
}
.hop-card.is-wrong .hop-verdict {
  color: var(--red);
}
.hop-answer-word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 10px;
}
.hop-answer-jp {
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
}
.hop-answer-jp.is-long,
.hop-answer-jp.is-very-long {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
}
.hop-card.is-right .hop-answer-jp {
  font-size: 1.4rem;
}
.hop-answer-kanji {
  font-size: 1.05rem;
  color: var(--muted);
}
.hop-note {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.hop-note-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-right: 6px;
  padding: 0 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.hop-note-chip b {
  font-size: 1.05rem;
}
.hop-note-chip span {
  font-size: 0.8rem;
  color: var(--muted);
}
.hop-note-text {
  font-weight: 700;
}
.hop-next {
  min-width: 150px;
  margin-top: 6px;
}

/* Start card and results */
.hop-intro {
  position: absolute;
  top: 60px;
  left: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 16px 18px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
}
.hop-intro[hidden],
.hop-results[hidden] {
  display: none;
}
.hop-intro-title {
  margin: 0;
  font-size: 1.8rem;
}
.hop-intro-title:focus {
  outline: none;
}
.hop-intro-line {
  max-width: 32ch;
  margin: 0;
  font-weight: 700;
}
.hop-best {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
}
.hop-best[hidden] {
  display: none;
}
.hop-best-stars,
.hop-results-stars {
  display: inline-flex;
  gap: 2px;
}
.hop-best .hop-star {
  width: 22px;
  height: 21px;
}
.hop-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.hop-switch input {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 28px;
  margin: 0;
  background: #d8c9a9;
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.hop-switch input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-sizing: border-box;
  transition: transform 0.15s var(--ease-out);
}
.hop-switch input:checked {
  background: #6fb04e;
}
.hop-switch input:checked::before {
  transform: translateX(20px);
}
.hop-switch input:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.hop-start {
  min-width: 170px;
}
.hop-results {
  position: absolute;
  top: 28%;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: flex-end;
}
.hop-results-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  padding: 12px 14px 14px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
  animation: hop-rise 0.42s var(--ease-spring);
}
.hop-results-stars {
  justify-content: center;
  margin: 0;
}
.hop-star {
  width: 36px;
  height: 34px;
}
.hop-star path {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.hop-star.is-filled path {
  fill: var(--yellow);
}
.hop-results-stars .hop-star {
  animation: hop-star-pop 0.4s var(--ease-spring) both;
}
.hop-results-stars .hop-star:nth-child(2) {
  animation-delay: 0.12s;
}
.hop-results-stars .hop-star:nth-child(3) {
  animation-delay: 0.24s;
}
.hop-results-title {
  margin: 2px 0 0;
  font-size: 1.5rem;
}
.hop-results-title:focus {
  outline: none;
}
.hop-results-sub {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.hop-results-list {
  display: grid;
  flex: 0 1 auto;
  align-content: start;
  gap: 5px;
  min-height: 0;
  margin: 10px 0 12px;
  padding: 2px;
  overflow-y: auto;
  list-style: none;
  text-align: left;
}
.hop-results-list:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.hop-results-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.hop-results-list li.is-missed {
  background: var(--wrong);
}
.hop-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}
.hop-mark--right circle {
  fill: #2f7a3a;
}
.hop-mark--right path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hop-mark--splash path {
  fill: #2f78b5;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.hop-mark--splash .hop-mark-shine {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.hop-verdict .hop-mark {
  margin-top: 0;
}
.hop-results-words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}
.hop-results-jp {
  font-weight: 700;
}
.hop-results-romaji {
  font-size: 0.84rem;
  color: var(--muted);
}
.hop-results-en {
  flex-basis: 100%;
  font-size: 0.9rem;
}
.hop-results-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.hop-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 2px 10px;
  font: 1.5rem/1.1 var(--heading);
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  opacity: 0;
  pointer-events: none;
}
.hop-badge.is-popping {
  animation: hop-badge 0.9s var(--ease-out) forwards;
}

@keyframes hop-bob {
  50% {
    transform: translateY(-2px);
  }
}
@keyframes hop-ripple {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  25% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}
@keyframes hop-dip {
  40% {
    transform: translateY(4px) scale(0.96);
  }
  75% {
    transform: translateY(-1px) scale(1.01);
  }
}
@keyframes hop-wobble-sink {
  20% {
    transform: rotate(-5deg);
  }
  40% {
    transform: rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: translateY(26px) scale(0.84);
    opacity: 0;
  }
}
@keyframes hop-tip {
  to {
    transform: translateY(30px) rotate(25deg);
    opacity: 0;
  }
}
@keyframes hop-under {
  to {
    transform: translateY(18px) scale(0.9);
    opacity: 0;
  }
}
@keyframes hop-resurface {
  from {
    transform: translateY(14px) scale(0.9);
    opacity: 0.2;
  }
}
@keyframes hop-glow {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes hop-glint {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -20% 0;
  }
}
@keyframes hop-breathe {
  50% {
    transform: scale(1.025);
  }
}
@keyframes hop-startle {
  30% {
    transform: translateY(-10px) rotate(-6deg);
  }
  60% {
    transform: translateY(-4px) rotate(5deg);
  }
}
@keyframes hop-happy {
  45% {
    transform: translateY(-18px) rotate(6deg);
  }
}
@keyframes hop-shake {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@keyframes hop-sway {
  from {
    transform: rotate(-1.5deg);
  }
  to {
    transform: rotate(1.5deg);
  }
}
@keyframes hop-laugh {
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes hop-drift {
  from {
    transform: translate(-24px, 0);
  }
  to {
    transform: translate(24px, 10px);
  }
}
@keyframes hop-twinkle {
  from {
    opacity: 0.1;
  }
  to {
    opacity: 0.4;
  }
}
@keyframes hop-card-in {
  from {
    opacity: 0.4;
    transform: scale(0.97);
  }
}
@keyframes hop-look {
  0%,
  55%,
  100% {
    transform: none;
  }
  65% {
    transform: translateY(-4px) rotate(-5deg);
  }
  80% {
    transform: translateY(-4px) rotate(4deg);
  }
}
@keyframes hop-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes hop-rise {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}
@keyframes hop-star-pop {
  from {
    transform: scale(0.4) rotate(-20deg);
    opacity: 0;
  }
}
@keyframes hop-badge {
  0% {
    opacity: 0;
    scale: 0.6;
  }
  25% {
    opacity: 1;
    scale: 1.12;
  }
  40% {
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: 0 -34px;
  }
}

@media (max-width: 720px) {
  .study-panel[data-panel='play'] {
    padding: 6px;
  }
}
@media (max-width: 420px) {
  /* On a phone a game takes most of the page gutter: every pixel helps the pads and tiles. */
  .study-panel[data-panel='play'],
  .learn-play .play-room {
    margin-inline: -14px;
    padding: 4px;
  }
}
@media (max-width: 380px) {
  .hop-crossing-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hop-boat {
    width: 84px;
  }
  .hop-label {
    padding: 2px 5px;
    font-size: 0.84rem;
  }
  .hop-label.is-long {
    font-size: 0.78rem;
  }
  .hop-label.is-very-long {
    font-size: 0.7rem;
  }
  .hop-label-jp {
    font-size: 1.08rem;
  }
  .hop-piece {
    padding: 1px 6px;
    font-size: 1rem;
  }
  .hop-piece.is-long {
    font-size: 0.9rem;
  }
  .hop-pieces {
    gap: 4px;
  }
  .hop-card {
    padding: 10px 10px 12px;
  }
  .hop-label.is-long .hop-label-jp {
    font-size: 0.92rem;
  }
  .hop-label.is-very-long .hop-label-jp {
    font-size: 0.8rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hop-stage *,
  .hop-stage *::before,
  .hop-stage *::after {
    animation: none !important;
    transition: none !important;
  }
  .hop-shimmer {
    display: none;
  }
  .hop-pad.is-gone .hop-pad-float,
  .hop-pad.is-tipped .hop-pad-float,
  .hop-pad.is-under .hop-pad-float {
    opacity: 0;
  }
  .hop-pad.is-gold .hop-pad-bob::after {
    opacity: 1;
  }
  .hop-card.is-timed .hop-clock-ring {
    opacity: 0;
  }
  .hop-card.is-timed .hop-clock-bar {
    display: block;
  }
}
@media (forced-colors: active) {
  .hop-card,
  .hop-intro,
  .hop-results-card,
  .hop-label {
    box-shadow: none;
  }
}

/* ════ The narrator: speaker buttons and the sound switches (docs/study-audio.md) ════ */
.say-button {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 0 0 6px;
  padding: 0;
  vertical-align: middle;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
}
.say-button[hidden] {
  display: none;
}
.say-button .speaker-icon {
  width: 20px;
  height: 20px;
}
.say-button:hover {
  transform: translateY(-1px);
}
.say-button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--ink);
}
.say-button:focus-visible,
.study-switch:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
/* A ring pulses out while the line is speaking. */
.say-button.is-speaking::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  animation: say-pulse 0.9s ease-out infinite;
}
@keyframes say-pulse {
  from {
    opacity: 0.8;
    transform: scale(0.85);
  }
  to {
    opacity: 0;
    transform: scale(1.25);
  }
}
.say-button--big {
  width: 96px;
  height: 96px;
  margin: 4px auto;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink);
}
.say-button--big .speaker-icon {
  width: 48px;
  height: 48px;
}

/* Flashcards: the speaker sits in the top corner; the example's button shows once turned. */
.study-card-say {
  width: 44px;
  height: 44px;
  margin: 0;
}
.study-card-say .speaker-icon {
  width: 24px;
  height: 24px;
}
.study-card:not(.is-flipped) .study-card-say--example {
  display: none;
}
.study-card-say--example {
  width: 36px;
  height: 36px;
  justify-self: center;
  background: var(--paper);
}

/* Grammar: a speaker after the pattern and after each example line */
.study-pattern-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.study-say-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.study-say-line .study-say-jp {
  padding-top: 2px;
}
.study-say-line .say-button,
.study-line .say-button,
.study-list-word .say-button,
.study-list-pattern .say-button,
.study-list-example .say-button,
.study-list-answer .say-button {
  width: 32px;
  height: 32px;
  margin: 0 0 0 4px;
}
/* Before a sentence, the speaker leads the line. */
.study-say-line .say-button,
.study-line .say-button,
.study-list-example .say-button {
  margin: 0 4px 0 0;
}
.study-say-line .say-button .speaker-icon,
.study-line .say-button .speaker-icon,
.study-list-word .say-button .speaker-icon,
.study-list-pattern .say-button .speaker-icon,
.study-list-example .say-button .speaker-icon,
.study-list-answer .say-button .speaker-icon {
  width: 18px;
  height: 18px;
}
.lesson-jp .say-button {
  margin-left: 8px;
}

/* Lily pads: one speaker in the card's top corner, for the prompt or the answer. */
.hop-card-body .hop-say {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  margin: 0;
}
/* Only the lines beside it (the question or verdict, then the English or the word) keep clear of
   the speaker: the romaji and a sentence's pieces below use the card's whole width, so a long
   sentence card stays short enough to leave the pads in view on a small phone. */
.hop-card-body:has(.hop-say) > :nth-child(-n + 2) {
  padding-inline: 42px;
}

/* The Voice and Effects switches under the player title */
.study-switches {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.study-switches[hidden] {
  display: none;
}
.study-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px 4px 8px;
  font: 700 0.95rem/1 var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
  cursor: pointer;
}
.study-switch .speaker-icon {
  width: 22px;
  height: 22px;
}
.study-switch[aria-pressed='true'] {
  background: var(--yellow);
}
.study-switch[aria-pressed='false'] {
  color: var(--muted);
  text-decoration: line-through;
}
.study-switch[aria-pressed='false'] .speaker-icon {
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .say-button.is-speaking::after {
    animation: none;
    opacity: 0.6;
    transform: none;
  }
  .say-button:hover,
  .say-button:active {
    transform: none;
  }
}
@media (forced-colors: active) {
  .say-button,
  .study-switch {
    border-color: ButtonText;
  }
  .study-switch[aria-pressed='true'] {
    outline: 2px solid Highlight;
  }
}

/* ════ Play: the two games side by side ════ */
.play-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.play-picker[hidden],
.play-game[hidden] {
  display: none;
}
.play-tile {
  display: grid;
  grid-template-rows: 150px auto;
  padding: 0;
  overflow: hidden;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition:
    transform 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out);
}
.play-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 var(--ink);
}
.play-tile:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--ink);
}
.play-tile:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.play-tile:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}
.play-tile-art {
  position: relative;
  display: block;
  overflow: hidden;
  background: #8bd1d6 center / cover no-repeat;
  border-bottom: 3px solid var(--ink);
}
.play-tile--hop .play-tile-art {
  background-image: url('/assets/study/pond-strip-720.webp');
  background-position: center 58%;
}
.play-tile--grab .play-tile-art {
  background-color: #fbe7bd;
  background-image: url('/assets/study/picnic-bank-720.webp');
  background-position: center 34%;
}
.play-tile-art img {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 3px 0 rgba(57, 44, 32, 0.22));
  transition: transform 0.2s var(--ease-spring);
}
.play-tile--hop .play-tile-kero {
  bottom: 10px;
  left: 50%;
  width: 92px;
  margin-left: -46px;
}
.play-tile--grab .play-tile-kero {
  bottom: 8px;
  left: 6%;
  width: 26%;
  max-width: 84px;
}
.play-tile-plate {
  top: 30%;
  left: 31%;
  width: 38%;
}
.play-tile-gyoza {
  top: 27%;
  left: 42%;
  width: 16%;
}
.play-tile-goro {
  right: 6%;
  bottom: 6px;
  width: 27%;
  max-width: 86px;
}
.play-tile:hover .play-tile-kero {
  transform: translateY(-8px) rotate(-4deg);
}
.play-tile-words {
  display: grid;
  gap: 2px;
  padding: 12px 16px 14px;
}
.play-tile-name {
  font: 1.45rem/1.1 var(--heading);
}
.play-tile-line {
  font-weight: 700;
  color: var(--muted);
}
.play-tile-best[hidden] {
  display: none;
}
.play-tile-best {
  display: inline-flex;
  gap: 2px;
  margin-top: 4px;
  font-weight: 700;
  font-size: 0.9rem;
}
.play-tile-best .hop-star {
  width: 20px;
  height: 19px;
}
.play-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 0 14px;
  font: 700 0.95rem var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.play-back:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .play-tiles {
    gap: 10px;
  }
  .play-tile {
    grid-template-rows: 112px auto;
    border-radius: 16px;
  }
  .play-tile-words {
    padding: 8px 10px 10px;
  }
  .play-tile-name {
    font-size: 1.15rem;
  }
  .play-tile-line {
    font-size: 0.85rem;
  }
  .play-tile--hop .play-tile-kero {
    width: 70px;
    margin-left: -35px;
  }
}

/* A Play button on each kana and numbers lesson tile */
.learn-tile-item {
  position: relative;
}
/* Room under the tile's words for its Play button. */
.learn-tile-item > .learn-tile {
  padding-bottom: 54px;
}
.learn-tile-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 0 12px;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
  background: #3f7a2c;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink);
}
.learn-tile-play:hover {
  transform: translateY(-1px);
}
.learn-tile-play:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.learn-tile-play .study-play-icon {
  width: 14px;
  height: 14px;
}

/* The Play step on the kana and numbers lessons */
.learn-play {
  margin: 28px 0;
}
.learn-play .learn-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.learn-play .study-switches[hidden],
.play-room[hidden] {
  display: none;
}

/* The hub's Games row: both games with everything learned so far */
.study-games {
  margin-top: 28px;
}
.study-games-title {
  margin: 0 0 4px;
  font-size: 1.4rem;
}
.study-games-note {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--muted);
}
.study-games-note[hidden] {
  display: none;
}
.study-games-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.study-game {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 8px 12px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.15s;
}
.study-game:hover {
  transform: translateY(-2px);
}
.study-game.is-waiting {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.study-game-art {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  width: 56px;
}
.study-game-art img {
  width: 100%;
  height: auto;
}
.study-game--grab .study-game-art img.study-game-gyoza {
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 34px;
}
.study-game--grab .study-game-art img.study-game-goro {
  margin-left: 16px;
  width: 40px;
}
.study-game-words {
  display: grid;
  min-width: 0;
}
.study-game-name {
  font: 1.1rem/1.15 var(--heading);
}
.study-game-line {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
}
@media (max-width: 420px) {
  .study-games-row {
    grid-template-columns: 1fr;
  }
}

/* ════ Gyoza Grab ════
 * A picnic on the pond bank: the painted bank is one world layer, with the table's plate, Kero,
 * Goro, the little plates and Goro's chopsticks placed on it in percentages. Kero and Goro move
 * only as whole pictures; the props (gyoza, tiles, chopsticks) may squash and tilt.
 */
.grab-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  height: clamp(480px, calc(100vh - 28px), 720px);
  height: clamp(480px, calc(100svh - 28px), 720px);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  background: linear-gradient(#c4e8f6 0 34%, #fbe6b9 34% 100%);
  border: 3px solid var(--ink);
  border-radius: 20px;
  scroll-margin-top: 10px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.grab-world {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  pointer-events: none;
  will-change: transform;
}
.grab-bank {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.grab-fx {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The table's plate: four gyoza in a gentle arc */
.grab-plate {
  position: absolute;
  top: 30.4%;
  left: 29%;
  width: 42%;
  aspect-ratio: 512 / 216;
}
.grab-plate.is-arriving {
  animation: grab-plate-in 0.42s var(--ease-spring);
}
.grab-plate-img {
  display: block;
  width: 100%;
  height: auto;
}
.grab-spot {
  position: absolute;
  width: 27%;
  aspect-ratio: 256 / 143;
}
.grab-spot--1 {
  top: 16%;
  left: 5%;
}
.grab-spot--2 {
  top: 2%;
  left: 26%;
}
.grab-spot--3 {
  top: 2%;
  left: 47%;
}
.grab-spot--4 {
  top: 16%;
  left: 68%;
}
.grab-spot--2,
.grab-spot--3 {
  z-index: 0;
}
.grab-spot--1,
.grab-spot--4 {
  z-index: 1;
}
.grab-gyoza {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 0 rgba(57, 44, 32, 0.22));
  transition:
    transform 0.25s var(--ease-out),
    filter 0.25s;
}
.grab-spot.is-current .grab-gyoza {
  transform: translateY(-14%) scale(1.08);
  filter: drop-shadow(0 0 5px #fff4a8) drop-shadow(0 4px 0 rgba(57, 44, 32, 0.25));
  animation: grab-steaming 1.6s ease-in-out infinite;
}
.grab-gyoza.is-hidden,
.grab-tile.is-hidden {
  visibility: hidden;
}
.grab-flying {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}

/* Kero's and Goro's little plates: the live score */
.grab-mine {
  position: absolute;
  top: 44.6%;
  width: 21%;
  aspect-ratio: 512 / 216;
}
.grab-mine--kero {
  left: 5%;
}
.grab-mine--goro {
  right: 5%;
}
.grab-mine-img {
  display: block;
  width: 100%;
  height: auto;
}
.grab-mine-pile {
  position: absolute;
  inset: auto 6% 38%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.grab-mine-pile .grab-gyoza {
  flex: 0 0 auto;
  width: 46%;
  margin: 0 -9%;
}

/* Kero and Goro, standing either side of the table */
.grab-kero,
.grab-goro {
  position: absolute;
  z-index: 1;
}
.grab-kero {
  top: 30%;
  left: 2%;
  width: 27%;
}
.grab-goro {
  top: 29%;
  right: 1%;
  width: 28%;
}
.grab-kero-img,
.grab-goro-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
}
.grab-shadow {
  position: absolute;
  bottom: -2%;
  left: 18%;
  width: 64%;
  height: 11%;
  background: rgba(57, 44, 32, 0.24);
  border-radius: 50%;
  transition: transform 0.3s;
}
.grab-stage[data-state='ready'] .grab-kero-img,
.grab-stage[data-state='intro'] .grab-kero-img {
  animation: grab-breathe 2.6s ease-in-out infinite;
}
.grab-stage[data-state='ready'] .grab-goro-img,
.grab-stage[data-state='intro'] .grab-goro-img {
  animation: grab-breathe 2.9s ease-in-out infinite reverse;
}
.grab-kero.is-hopping .grab-kero-img,
.grab-goro.is-hopping .grab-goro-img {
  animation: grab-hop 0.3s var(--ease-out);
}
.grab-kero.is-hopping .grab-shadow {
  animation: grab-shadow-hop 0.3s var(--ease-out);
}
.grab-kero.is-happy .grab-kero-img {
  animation: grab-hop 0.32s var(--ease-out) 3;
}
.grab-goro.is-reaching .grab-goro-img {
  animation: none;
  transform: translateX(-4%) rotate(-5deg);
  transition: transform 0.3s var(--ease-out);
}
.grab-goro.is-jolting .grab-goro-img {
  animation: grab-jolt 0.24s var(--ease-out);
}
.grab-goro.is-laughing .grab-goro-img {
  animation: grab-wobble 0.32s ease-in-out 2;
}
.grab-goro.is-grumbling .grab-goro-img {
  animation: grab-grumble 0.4s ease-in-out;
}
/* A clean build: the tiles in the answer bounce one after another. */
.grab-build.is-clean .grab-placed {
  animation: grab-cheer 0.42s var(--ease-out) both;
}
.grab-build.is-clean .grab-slot:nth-child(2) .grab-placed {
  animation-delay: 0.05s;
}
.grab-build.is-clean .grab-slot:nth-child(3) .grab-placed {
  animation-delay: 0.1s;
}
.grab-build.is-clean .grab-slot:nth-child(4) .grab-placed {
  animation-delay: 0.15s;
}
.grab-build.is-clean .grab-slot:nth-child(5) .grab-placed {
  animation-delay: 0.2s;
}
.grab-build.is-clean .grab-slot:nth-child(6) .grab-placed {
  animation-delay: 0.25s;
}
.grab-build.is-clean .grab-slot:nth-child(n + 7) .grab-placed {
  animation-delay: 0.3s;
}
.grab-goro.is-fuming .grab-goro-img {
  animation: grab-wobble 0.18s linear 4;
}

/* Goro's chopsticks: the clock, sliding from his hand to the gyoza */
.grab-sticks {
  position: absolute;
  top: 26.4%;
  left: 63%;
  z-index: 2;
  width: 30%;
  aspect-ratio: 600 / 85;
  transform-origin: 88% 50%;
}
/* Held up and ready: the tips tilt up until Goro reaches for the gyoza. */
.grab-sticks-img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(14deg);
  transform-origin: 88% 50%;
}
.grab-sticks.is-snapping .grab-sticks-img {
  animation: grab-snap 0.2s var(--ease-out);
}
.grab-stage[data-clock='off'] .grab-sticks,
.grab-stage[data-clock='waiting'] .grab-sticks {
  transition: transform 0.3s var(--ease-out);
}

/* Heads-up: plate count, streak, sound */
.grab-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  pointer-events: none;
}
.grab-hud > * {
  pointer-events: auto;
}
.grab-hud.is-quiet .grab-plate-count,
.grab-hud.is-quiet .grab-combo,
.grab-stage[data-state='results'] .grab-plate-count,
.grab-stage[data-state='results'] .grab-combo {
  visibility: hidden;
}
.grab-plate-count {
  margin: 0;
  padding: 4px 12px;
  font-weight: 800;
  font-size: 0.9rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.grab-plate-count:empty {
  visibility: hidden;
}
.grab-combo {
  margin: 0 auto 0 0;
  font: 1.3rem/1 var(--heading);
  color: var(--ink);
  text-shadow:
    0 2px 0 var(--paper),
    0 -2px 0 var(--paper),
    2px 0 0 var(--paper),
    -2px 0 0 var(--paper);
}
.grab-combo.is-hot {
  color: #b6382b;
}
.grab-sound {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}
.grab-sound[hidden],
.hop-sound[hidden] {
  display: none;
}
.grab-sound .speaker-icon {
  width: 24px;
  height: 24px;
}
.grab-sound[aria-pressed='false'] .speaker-waves {
  opacity: 0.15;
}
.grab-sound:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}

/* The prompt card: what to build, never the answer */
.grab-card {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 58px 10px 0;
  padding: 8px 14px 12px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink);
}
.grab-card[hidden] {
  display: none;
}
.grab-card:focus {
  outline: none;
}
.grab-card:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 3px;
}
.grab-card-body {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.grab-card-body.is-new {
  animation: hop-card-in 0.22s var(--ease-out);
}
.grab-ask {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.grab-prompt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}
.grab-prompt-en {
  font: 1.35rem/1.2 var(--heading);
  overflow-wrap: anywhere;
}
/* How the thing to build is said: its romaji, under its English. */
.grab-prompt-romaji {
  font: 1.08rem/1.2 var(--heading);
  color: var(--red);
  overflow-wrap: anywhere;
}
.grab-prompt-romaji--big {
  font-size: 1.7rem;
}
/* A sentence: a long English line and its romaji take smaller type, so the tray keeps its room
   on a small phone. */
.grab-prompt-en.is-long {
  font-size: 1.15rem;
}
.grab-prompt-en.is-very-long {
  font-size: 1.02rem;
}
.grab-prompt-romaji--line {
  font-size: 0.95rem;
}
/* A letter gyoza: the sound (or a chain of sounds) to pick the kana for. */
.grab-prompt-sound {
  font: clamp(1.9rem, 8vw, 2.5rem)/1.1 var(--heading);
  color: var(--red);
  overflow-wrap: anywhere;
}
.grab-prompt-hint {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.grab-visual {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}
.grab-visual > *,
.grab-visual img,
.grab-visual svg {
  max-width: 58px;
  max-height: 58px;
  width: auto;
  height: auto;
}
.grab-visual .time-prompt-text {
  display: none;
}
.grab-context {
  display: flex;
  gap: 6px;
  font-size: 0.95rem;
}
.grab-context-name {
  font-weight: 800;
}
.grab-prompt-row .study-face {
  width: 34px;
  height: 34px;
}
.grab-bubble {
  position: absolute;
  top: 4%;
  right: 22%;
  z-index: 4;
  padding: 4px 10px;
  font: 1rem/1.2 var(--heading);
  color: #8f2a1f;
  white-space: nowrap;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px 14px 4px 14px;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 100% 100%;
}
.grab-bubble.is-showing {
  animation: grab-bubble 1.8s var(--ease-spring) forwards;
}
@keyframes grab-bubble {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  12%,
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.grab-clock-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 5px;
  background: #f6c747;
  border-radius: 999px;
  opacity: 0;
  transform-origin: left center;
}
.grab-card.is-timed .grab-clock-bar {
  opacity: 1;
}
.grab-card.is-hurry .grab-clock-bar {
  background: #b6382b;
}

/* The scene shows through this band */
.grab-card[hidden] + .grab-band {
  margin-top: 54px;
}
.grab-band {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 100 / 40;
  pointer-events: none;
}
.grab-badge {
  position: absolute;
  top: 2px;
  left: 22%;
  z-index: 4;
  padding: 2px 10px;
  font: 1.3rem/1.2 var(--heading);
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 999px;
  opacity: 0;
  transform: scale(0.6);
}
.grab-badge.is-popping {
  animation: grab-badge 0.9s var(--ease-spring);
}

/* The build: slots for the answer, the tray of tiles, then the answer once built */
.grab-build {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
  overflow-y: auto;
}
.grab-build[hidden] {
  display: none;
}
.grab-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 66px;
  margin: 0;
  padding: 7px;
  list-style: none;
  background: rgba(255, 250, 240, 0.94);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ink);
}
.grab-build.is-done .grab-slots {
  background: #fff3ee;
}
.grab-build.is-done.is-clean .grab-slots {
  background: #effae9;
}
.grab-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 52px;
  border: 2px dashed #a58c66;
  border-radius: 12px;
}
.grab-slots.is-sentence .grab-slot {
  min-width: 52px;
}
/* The build scrolls as a whole on a small phone; its parts never squash. */
.grab-build > * {
  flex-shrink: 0;
}
.grab-slot.is-next {
  border-style: solid;
  border-color: var(--ink);
  background: #fff4cc;
}
.grab-slot.is-filled {
  border: 0;
}
.grab-slot.is-fixed {
  border: 0;
  min-width: 26px;
  color: var(--muted);
}
.grab-slot.is-awaiting > * {
  visibility: hidden;
}
.grab-slot.is-landing {
  animation: grab-settle 0.16s var(--ease-out);
}
.grab-slot-label {
  position: absolute;
  top: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #8f2a1f;
}
.grab-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}
.grab-tray[hidden] {
  display: none;
}
.grab-tile,
.grab-placed {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 56px;
  padding: 3px 10px;
  font: inherit;
  color: var(--ink);
  background: #fffdf6;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition:
    transform 0.09s var(--ease-out),
    box-shadow 0.09s var(--ease-out);
}
.grab-placed {
  min-width: 46px;
  min-height: 52px;
  background: #fff8dc;
  box-shadow: 0 2px 0 var(--ink);
}
.grab-build.is-done .grab-placed {
  cursor: default;
}
.grab-build.is-done.is-clean .grab-placed {
  background: #dff3d4;
}
.grab-tile:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ink);
}
.grab-tile:focus-visible,
.grab-placed:focus-visible {
  outline: 3px solid #075693;
  outline-offset: 2px;
}
.grab-tile.is-used {
  visibility: hidden;
}
.grab-tile.is-particle,
.grab-placed.is-particle {
  background: var(--butter);
  border-radius: 999px;
}
.grab-tile-jp {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.is-long > .grab-tile-jp {
  font-size: 1.2rem;
}
.is-very-long > .grab-tile-jp {
  font-size: 1rem;
}
.grab-tile.is-hint {
  border-color: #b97a00;
  background: #fff1b8;
  animation: grab-hint 0.9s ease-in-out infinite;
}
.grab-tile.is-shaking {
  animation: grab-shake 0.24s linear;
  background: var(--wrong);
}
.grab-flyer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  margin: 0;
  pointer-events: none;
}
.grab-flyer.is-wrong {
  background: var(--wrong);
}
.grab-key {
  position: absolute;
  top: -9px;
  left: -9px;
  display: none;
  width: 20px;
  height: 20px;
  font: 700 0.72rem/16px var(--body);
  text-align: center;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 50%;
}
@media (hover: hover) and (pointer: fine) {
  .grab-key {
    display: block;
  }
}
.grab-feedback {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 12px 10px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 3px 0 var(--ink);
  animation: hop-card-in 0.22s var(--ease-out);
}
.grab-feedback[hidden] {
  display: none;
}
.grab-feedback p {
  margin: 0;
}
.grab-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 1.15rem/1.2 var(--heading);
}
.grab-verdict svg {
  width: 22px;
  height: 22px;
}
.grab-verdict.is-wrong {
  color: #8f2a1f;
}
.grab-answer {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.grab-answer-jp {
  font-size: 1.5rem;
  font-weight: 700;
}
.grab-answer-kanji {
  font-size: 1.05rem;
  color: var(--muted);
}
.grab-answer-romaji {
  font-weight: 700;
  color: var(--muted);
}
.grab-answer-en {
  font-weight: 700;
}
.grab-answer-note {
  font-size: 0.9rem;
  color: var(--muted);
}
.grab-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  max-width: 34rem;
  font-size: 0.9rem;
  text-align: left;
}
.grab-note-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 0 8px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 999px;
}
.grab-note-chip span {
  font-size: 0.78rem;
  color: var(--muted);
}
.grab-usual {
  font-size: 0.9rem;
}
.grab-usual-label {
  font-weight: 800;
}
.grab-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}
.grab-actions [hidden] {
  display: none;
}
.grab-say {
  flex: 0 0 auto;
}

/* Start card and results */
.grab-intro,
.grab-results {
  position: absolute;
  z-index: 6;
  left: 12px;
  right: 12px;
}
.grab-intro {
  bottom: 14px;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 16px 18px;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
}
.grab-intro[hidden],
.grab-results[hidden] {
  display: none;
}
.grab-intro-title {
  margin: 0;
  font-size: 1.8rem;
}
.grab-intro-title:focus {
  outline: none;
}
.grab-intro-line {
  max-width: 32ch;
  margin: 0;
  font-weight: 700;
}
.grab-best {
  margin: 0;
  font-weight: 700;
}
.grab-best[hidden] {
  display: none;
}
.grab-results {
  top: 56px;
  bottom: 12px;
  display: flex;
  align-items: flex-start;
}
.grab-results-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  max-height: 100%;
  padding: 14px 14px 16px;
  overflow-y: auto;
  text-align: center;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--ink);
  animation: hop-card-in 0.3s var(--ease-spring);
}
.grab-results-title {
  margin: 0;
  font-size: 1.6rem;
}
.grab-results-title:focus {
  outline: none;
}
.grab-results-sub {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.grab-score {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.grab-score-side {
  display: grid;
  justify-items: center;
  gap: 2px;
}
.grab-score-face {
  width: 58px;
  height: auto;
}
.grab-score-pile {
  display: flex;
  justify-content: center;
  min-height: 22px;
}
.grab-score-gyoza {
  width: 34px;
  margin: 0 -6px;
}
.grab-score-num {
  font: 1.4rem/1 var(--heading);
}

/* Motion */
@keyframes grab-breathe {
  50% {
    transform: translateY(-2%) scale(1.02);
  }
}
@keyframes grab-hop {
  40% {
    transform: translateY(-18px) rotate(6deg);
  }
  75% {
    transform: translateY(0) rotate(-2deg);
  }
}
@keyframes grab-shadow-hop {
  40% {
    transform: scale(0.7);
  }
}
@keyframes grab-jolt {
  40% {
    transform: translateX(-10%) rotate(-8deg);
  }
}
@keyframes grab-wobble {
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
@keyframes grab-grumble {
  30% {
    transform: rotate(-4deg) translateY(2%);
  }
  65% {
    transform: rotate(3deg);
  }
}
@keyframes grab-cheer {
  45% {
    transform: translateY(-7px);
  }
}
@keyframes grab-snap {
  50% {
    transform: rotate(14deg) scale(1, 0.5);
  }
}
@keyframes grab-steaming {
  50% {
    transform: translateY(-20%) scale(1.08);
  }
}
@keyframes grab-plate-in {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.9);
  }
}
@keyframes grab-badge {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  25%,
  70% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1);
  }
}
@keyframes grab-settle {
  50% {
    transform: translateY(1px);
  }
}
@keyframes grab-hint {
  50% {
    transform: scale(1.08);
  }
}
@keyframes grab-shake {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}
@media (max-width: 380px) {
  .grab-plate-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .grab-tile {
    min-width: 48px;
    padding-inline: 8px;
  }
  .grab-tile-jp {
    font-size: 1.35rem;
  }
}
/* On a short phone a kana gap, word gap or sentence gap card (English, romaji and the pieces) is
   tighter, so it never reaches the pads. */
@media (max-height: 720px) {
  .hop-card {
    padding: 8px 12px 12px;
  }
  .hop-card .hop-card-body {
    gap: 1px;
  }
  .hop-card[data-ask='chunk'] .hop-prompt-ask,
  .hop-card[data-ask='line'] .hop-prompt-ask {
    font-size: 0.7rem;
  }
  .hop-card[data-ask='chunk'] .hop-prompt-en,
  .hop-card[data-ask='chunk'] .hop-prompt-en.is-long {
    font-size: 1.15rem;
  }
  .hop-card[data-ask='chunk'] .hop-prompt-en.is-very-long {
    font-size: 1rem;
  }
  .hop-card[data-ask='chunk'] .hop-prompt-romaji,
  .hop-card[data-ask='line'] .hop-prompt-romaji,
  .hop-card[data-ask='gap'] .hop-prompt-romaji {
    font-size: 0.95rem;
  }
  .hop-card .hop-piece {
    padding: 1px 6px;
    font-size: 1rem;
  }
  .hop-card .hop-card-body .hop-say {
    width: 34px;
    height: 34px;
  }
  .hop-card .hop-card-body:has(.hop-say) > :nth-child(-n + 2) {
    padding-inline: 38px;
  }
}
@media (max-height: 620px) {
  .grab-card {
    margin-top: 54px;
    padding-block: 6px 10px;
  }
  .grab-prompt-en {
    font-size: 1.2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grab-plate.is-arriving,
  .grab-spot.is-current .grab-gyoza,
  .grab-stage .grab-kero-img,
  .grab-stage .grab-goro-img,
  .grab-kero.is-hopping .grab-shadow,
  .grab-tile.is-hint,
  .grab-tile.is-shaking,
  .grab-slot.is-landing,
  .grab-build.is-clean .grab-placed,
  .grab-sticks.is-snapping .grab-sticks-img,
  .grab-card-body.is-new,
  .grab-feedback,
  .grab-results-card,
  .play-tile,
  .play-tile-art img {
    animation: none !important;
    transition: none !important;
  }
  .grab-goro.is-reaching .grab-goro-img {
    transform: none;
  }
  .grab-badge.is-popping,
  .grab-bubble.is-showing {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .grab-tile.is-hint {
    outline: 3px solid #b97a00;
    outline-offset: 2px;
  }
  .grab-tile.is-shaking {
    outline: 3px solid #8f2a1f;
  }
}

/* ════ Sentence blocks (docs/study-design.md section 3.2) ════ */
.learn-room--study,
.play-room {
  --role-topic: #ffe6a3;
  --role-topic-ink: #6b4e00;
  --role-time: #d3e8f7;
  --role-time-ink: #164e78;
  --role-place: #d6efc7;
  --role-place-ink: #2f5f1f;
  --role-with: #f8d7e4;
  --role-with-ink: #8a2550;
  --role-how: #e4dcf6;
  --role-how-ink: #4f3591;
  --role-object: #ffdcbf;
  --role-object-ink: #8a4300;
  --role-noun: #fffaf0;
  --role-noun-ink: #392c20;
  --role-lead: #ece4d4;
  --role-lead-ink: #4a3a2a;
  --role-end: #f6d2cc;
  --role-end-ink: #8f2a1f;
}
.block-lines {
  display: grid;
  gap: 8px;
}
.blocks {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.block {
  --fill: var(--paper);
  --ink-role: var(--ink);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 44px;
  padding: 5px 9px 6px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  text-align: left;
  line-height: 1.2;
}
.block--topic {
  --fill: var(--role-topic);
  --ink-role: var(--role-topic-ink);
}
.block--time {
  --fill: var(--role-time);
  --ink-role: var(--role-time-ink);
}
.block--place,
.block--goal {
  --fill: var(--role-place);
  --ink-role: var(--role-place-ink);
}
.block--with {
  --fill: var(--role-with);
  --ink-role: var(--role-with-ink);
}
.block--how {
  --fill: var(--role-how);
  --ink-role: var(--role-how-ink);
}
.block--object {
  --fill: var(--role-object);
  --ink-role: var(--role-object-ink);
}
.block--noun {
  --fill: var(--role-noun);
  --ink-role: var(--role-noun-ink);
}
.block--lead {
  --fill: var(--role-lead);
  --ink-role: var(--role-lead-ink);
}
.block--end {
  --fill: var(--role-end);
  --ink-role: var(--role-end-ink);
}
.block--plain {
  --fill: var(--paper);
}
.block-role {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-role);
}
.block-jp {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.block-joint {
  color: var(--ink-role);
}
.block-p {
  margin-left: 4px;
  padding-left: 5px;
  border-left: 2px solid currentColor;
  color: var(--ink-role);
  font-weight: 900;
}
.block-blank {
  display: inline-block;
  min-width: 1.4em;
  border-bottom: 3px dashed var(--ink);
  color: transparent;
}
.block-blank.block-p {
  border-left: 2px solid var(--ink);
}
.block-blank.is-filled {
  color: var(--ink-role);
  border-bottom-style: solid;
}
.block-romaji {
  font-size: 0.8rem;
  color: var(--muted);
}
.block-en {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-role);
}
.block.is-marked {
  outline: 3px dashed var(--red);
  outline-offset: 2px;
}
.block-lines.is-compact .block {
  padding: 3px 7px 4px;
  border-width: 2px;
  border-radius: 10px;
}
.block-lines.is-compact .block-jp {
  font-size: 1rem;
}
.block-lines.is-compact .block-role {
  font-size: 0.6rem;
}
@media (max-width: 380px) {
  .block {
    padding: 4px 7px 5px;
  }
  .block-jp {
    font-size: 1.05rem;
  }
}

/* ════ Questions about sentences: blocks, Tap the part, Build it ════ */
.ask-sentence {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: 100%;
}
.ask-sentence .study-face {
  flex: 0 0 auto;
}
.ask-sentence .block-lines {
  justify-items: center;
}
.ask-sentence .blocks {
  justify-content: center;
}
.ask-sentence--en .ask-en {
  text-align: center;
}
.ask-en--small {
  font-size: 0.95rem;
  color: var(--muted);
  text-align: center;
}
.ask-en--job {
  max-width: 30ch;
  font-size: 1.1rem;
  text-align: center;
}
.ask-target--part,
.ask-target--build,
.ask-target--pgap,
.ask-target--sentence {
  padding-inline: 12px;
}
/* A word to build or a sentence to pick has a speaker in the corner: keep the English clear of it. */
.ask-target--build:has(.ask-say),
.ask-target--sentence:has(.ask-say) {
  padding-inline: 46px;
}
.ask-particle {
  display: grid;
  justify-items: center;
  min-width: 96px;
  padding: 6px 18px 8px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--fill, var(--paper));
}
.ask-particle .ask-jp {
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--ink-role, var(--ink));
}
.ask-choices.is-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ask-block {
  position: relative;
  min-height: 56px;
  padding-top: 16px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition:
    transform 90ms var(--ease-out, ease-out),
    background 0.15s;
}
.ask-block:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
.ask-block .ask-choice-key {
  position: absolute;
  top: 3px;
  right: 6px;
  left: auto;
}
.ask-block.is-right {
  background: var(--right);
}
.ask-block.is-wrong {
  background: var(--wrong);
}
.ask-build {
  display: grid;
  gap: 10px;
}
.ask-build[hidden] {
  display: none;
}
.ask-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgb(255 255 255 / 0.55);
  border: 2px dashed var(--ink);
  border-radius: 14px;
}
.ask-slot {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  padding: 4px 8px;
  border: 2px dashed rgb(57 44 32 / 0.45);
  border-radius: 10px;
  background: var(--paper);
}
.ask-slot.is-next {
  border-color: var(--ink);
  border-style: solid;
  box-shadow: 0 0 0 3px rgb(246 199 71 / 0.7);
}
.ask-slot.is-filled {
  border: 3px solid var(--ink);
  background: var(--fill, var(--paper));
  animation: slot-pop 220ms var(--ease-spring, ease-out);
}
.ask-slot.is-shown {
  animation: none;
}
/* A piece the learner does not place: the ～ of a suffix card. */
.ask-slot.is-fixed {
  border: 0;
  background: none;
  animation: none;
}
.ask-slot-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.role-ink--topic {
  color: var(--role-topic-ink);
}
.role-ink--time {
  color: var(--role-time-ink);
}
.role-ink--place,
.role-ink--goal {
  color: var(--role-place-ink);
}
.role-ink--with {
  color: var(--role-with-ink);
}
.role-ink--how {
  color: var(--role-how-ink);
}
.role-ink--object {
  color: var(--role-object-ink);
}
.role-ink--noun {
  color: var(--role-noun-ink);
}
.role-ink--end {
  color: var(--role-end-ink);
}
.ask-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ask-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 48px;
  padding: 8px 12px 8px 14px;
  color: var(--ink);
  font: inherit;
  background: var(--fill, var(--paper));
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  transition:
    transform 90ms var(--ease-out, ease-out),
    opacity 0.15s;
}
.ask-tile.block {
  flex-direction: row;
}
.ask-tile:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
.ask-tile .ask-choice-key {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.65rem;
}
.ask-tile-jp {
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}
.ask-tile.is-particle .ask-tile-jp {
  font-weight: 900;
}
.ask-tile.is-used {
  opacity: 0.25;
  box-shadow: none;
}
.ask-tile.is-shake {
  animation: tile-shake 240ms ease-in-out;
}
.ask-tile.is-hint {
  animation: tile-hint 0.9s ease-in-out infinite;
}
.ask-build-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.answer-usual {
  margin: 6px 0 0;
  font-size: 0.9rem;
}
.answer-usual-label {
  font-weight: 700;
}
.answer-sheet .block-lines {
  margin-top: 8px;
}
@keyframes slot-pop {
  from {
    transform: scale(0.85);
  }
  to {
    transform: scale(1);
  }
}
@keyframes tile-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px) rotate(-3deg);
  }
  75% {
    transform: translateX(6px) rotate(3deg);
  }
}
@keyframes tile-hint {
  0%,
  100% {
    box-shadow: 0 3px 0 var(--ink);
  }
  50% {
    box-shadow:
      0 3px 0 var(--ink),
      0 0 0 5px rgb(246 199 71 / 0.9);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-slot.is-filled,
  .ask-tile.is-shake,
  .ask-tile.is-hint {
    animation: none;
  }
  .ask-tile.is-hint {
    outline: 4px solid var(--yellow);
  }
}

/* Cards: blocks on the back, particle cards */
.study-card-line--blocks {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.study-card-example--blocks {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.flashcard-side .block-lines,
.flashcard-side .blocks {
  justify-content: center;
}
.flashcard-side .block-lines.is-compact .block {
  padding: 2px 6px 3px;
}
.study-card-particle {
  display: grid;
  justify-items: center;
  padding: 4px 18px 6px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--fill, var(--paper));
}
.study-card-particle .study-card-jp {
  color: var(--ink-role, var(--ink));
}

/* Pattern tab: the template and examples in blocks */
.study-pattern-card .block-lines {
  margin: 8px 0;
}
.study-pattern-title {
  margin: 2px 0 6px;
  font: 1.3rem/1.2 var(--heading);
}
.study-say-body .block-lines {
  margin: 4px 0;
}

/* The word lists: blocks under each line, particles and order cards */
.study-line {
  margin: 0 0 8px;
}
.study-line-text {
  margin: 0 0 4px;
}
.study-list-particle p,
.study-list-pattern-head {
  margin: 0 0 4px;
}
.study-list-particle-jp {
  display: inline-grid;
  place-items: center;
  min-width: 2.2em;
  padding: 0 6px;
  font-size: 1.3rem;
  font-weight: 900;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--fill, var(--paper));
  color: var(--ink-role, var(--ink));
}
.study-list-order {
  display: block;
  font-family: var(--heading);
  font-weight: 400;
}
.study-list-answer p {
  margin: 0 0 4px;
}

/* ════ Lesson pages: folding sections, the next step ════ */
.study-section {
  padding: 0;
}
.study-section-fold > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.study-section-fold > summary::-webkit-details-marker {
  display: none;
}
.study-section-fold > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.study-section-fold[open] > summary::after {
  transform: rotate(45deg);
}
.study-section-fold > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.study-section-name {
  flex: 1;
  min-width: 0;
}
.study-section-name h3 {
  margin: 0;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}
.study-section-pattern {
  display: block;
}
.study-section-fold > .study-sets,
.study-section-fold > .study-list {
  margin: 0 18px 16px;
}
.study-section-fold > .study-sets {
  margin-top: 4px;
}
.study-section--structure .study-section-number {
  background: var(--role-time);
}
.study-set.is-next {
  background: var(--yellow);
  box-shadow: 0 3px 0 var(--ink);
}
.study-set.is-next .study-set-badge {
  background: var(--ink);
  color: var(--paper);
}
.study-due-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink);
}
.study-due-link[hidden] {
  display: none;
}
.lesson-next .drawing-button {
  text-decoration: none;
  color: var(--ink);
}
@media (max-width: 520px) {
  /* On a phone the count sits under the section name, so a name like "Jobs and workplaces"
     keeps whole words on a 320 px screen instead of breaking inside them. */
  .study-section-fold > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'number name chevron'
      'number count chevron';
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 14px;
  }
  .study-section-fold > summary .study-section-number {
    grid-area: number;
  }
  .study-section-fold > summary .study-section-name {
    grid-area: name;
  }
  .study-section-fold > summary .study-section-count {
    grid-area: count;
    max-width: none;
    text-align: left;
  }
  .study-section-fold > summary::after {
    grid-area: chevron;
  }
  .study-section-fold > .study-sets,
  .study-section-fold > .study-list {
    margin: 0 12px 14px;
  }
}

/* ════ /study/: Today, Mix it up, the week ════ */
.study-hub-intro {
  margin-bottom: 14px;
}
.study-hub-line {
  max-width: 34rem;
}
/* A first visit: one way in, then the lessons (docs/pm-audit.md B1). */
.study-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  max-width: 560px;
  margin: 0 auto 22px;
  text-align: center;
}
.study-start[hidden] {
  display: none;
}
.study-start-note {
  color: var(--muted);
  font-weight: 700;
}
/*
 * Today, Mix it up and the week are for a learner who has studied here before. Until the script
 * decides (and without it), the inline flag in the hub picks: a first visit hides them, and a
 * returning learner keeps their space, so the lesson list never jumps (CLS). The script then
 * sets each one's hidden attribute.
 */
.study-hub:not(.is-returning) :is(.today-card, .study-mix, .study-week) {
  display: none;
}
.study-hub.is-returning:not(.is-ready) :is(.today-card, .study-mix, .study-week) {
  visibility: hidden;
}
.study-hub.is-returning:not(.is-ready) .study-start {
  display: none;
}
.today-ring-slot {
  display: inline-flex;
  min-height: 40px;
  min-width: 40px;
}
.study-section-example-en {
  display: block;
  font-family: var(--body);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--muted);
}
.today-card {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 18px;
  padding: 16px 18px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 22px 18px 24px 20px;
  box-shadow: 5px 5px 0 var(--ink);
}
.today-card[hidden],
.study-mix[hidden],
.study-scope[hidden],
.study-week[hidden] {
  display: none;
}
.today-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.today-title {
  margin: 0;
  font-size: 1.7rem;
}
.today-streak {
  margin: 0 0 0 auto;
  font-weight: 800;
}
.today-streak:empty {
  display: none;
}
.today-plan {
  margin: 0;
  font-weight: 700;
  color: var(--muted);
}
.today-go {
  justify-self: start;
  text-decoration: none;
}
/* The goal and where new words come from are rarely changed, so they fold away. */
.today-settings {
  padding-top: 8px;
  border-top: 2px dashed rgb(57 44 32 / 0.25);
}
.today-settings[open] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.today-settings-toggle {
  flex: 1 1 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.today-goal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.today-setting-label {
  font-weight: 700;
  font-size: 0.9rem;
}
.today-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.today-from select {
  min-height: 44px;
  max-width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
}
.goal-ring {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.goal-ring-art {
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
}
.goal-ring-track,
.goal-ring-fill {
  fill: none;
  stroke-width: 6;
}
.goal-ring-track {
  stroke: rgb(57 44 32 / 0.15);
}
.goal-ring-fill {
  stroke: var(--pad-dark);
  stroke-linecap: round;
  transition: stroke-dasharray 0.4s;
}
.goal-ring.is-met .goal-ring-fill {
  stroke: #c99a12;
}
.study-mix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  max-width: 560px;
  margin: 0 auto 16px;
}
.study-mix-go {
  text-decoration: none;
  color: var(--ink);
}
.study-mix-go.is-waiting,
.study-game.is-waiting {
  opacity: 0.55;
}
.study-scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.study-scope .study-chip {
  min-width: 44px;
  padding-inline: 10px;
}
.study-scope .study-chip:disabled {
  opacity: 0.4;
  cursor: default;
}
.study-mix-note {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.study-mix-note[hidden] {
  display: none;
}
.study-week {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 22px;
}
.study-week-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
}
.study-week-more {
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
}
.week-pads {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.week-pad {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 0.75rem;
  font-weight: 700;
}
.week-pad-dot,
.study-day {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 18px;
  border-radius: 50% 50% 46% 54% / 60% 60% 40% 40%;
  background: rgb(57 44 32 / 0.1);
  border: 2px solid transparent;
}
.week-pad.is-goal .week-pad-dot,
.study-day.is-goal {
  background: #f1b928;
  border-color: var(--ink);
}
.week-pad.is-some .week-pad-dot,
.study-day.is-some {
  background: #9ccf7f;
  border-color: var(--pad-dark);
}
.week-pad.is-rest .week-pad-dot,
.study-day.is-rest {
  background: transparent;
  border: 2px dotted var(--ink);
}
.week-pad.is-today .week-pad-dot,
.study-day.is-today {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.study-counts {
  margin: 0;
  font-weight: 700;
}
.study-month {
  width: 100%;
  padding: 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px;
}
.study-month[hidden] {
  display: none;
}
.study-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.study-month-title {
  margin: 0;
  font-size: 1.2rem;
}
.study-month-step {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
}
.study-month-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  text-align: center;
}
.study-month-table th {
  padding: 4px 0;
  font-size: 0.8rem;
}
.study-month-table td {
  padding: 3px 0;
}
.study-month-table .study-day {
  width: 34px;
  height: 30px;
  font-size: 0.85rem;
  font-weight: 700;
}
.study-day.is-future {
  background: transparent;
  color: var(--muted);
}
.study-month-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 8px 0 0;
  font-size: 0.85rem;
}
.study-month-key-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.study-day--key {
  width: 18px;
  height: 14px;
}
.study-hub-heading {
  margin: 8px 0 12px;
  font-size: 1.5rem;
}

/* ════ Sessions in the player: Today and Mix it up ════ */
.learn-room--study.is-session .study-bar {
  display: none;
}
.session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 8px;
}
.session-step {
  margin: 0;
  font-weight: 800;
}
.session-step:empty {
  display: none;
}
.session-screen .week-pads {
  justify-content: center;
  margin: 10px 0;
}
.session-stop {
  text-decoration: none;
  color: var(--ink);
}
.learn-room--study.is-session .study-progress-row,
.learn-room--study.is-session .study-player-range {
  display: none;
}
.session-head .goal-ring-art {
  width: 30px;
  height: 30px;
}
.session-head .goal-ring {
  font-size: 0.9rem;
}
@media (max-width: 400px) {
  .study-tab {
    padding: 6px 8px;
    font-size: 0.85rem;
  }
  .study-tabs {
    gap: 4px;
  }
  .study-scope .study-chip {
    min-width: 40px;
    padding-inline: 8px;
  }
}
.study-say--plain {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 400px) {
  .study-bar {
    gap: 4px;
  }
  .study-tab {
    padding-inline: 7px;
  }
  .study-switches {
    gap: 4px;
  }
  .study-switch {
    width: 40px;
  }
}
/* Gyoza Grab: an empty slot shows its block's role colour while the sentence is new. */
.grab-slot.role-slot--topic {
  background: var(--role-topic);
}
.grab-slot.role-slot--time {
  background: var(--role-time);
}
.grab-slot.role-slot--place,
.grab-slot.role-slot--goal {
  background: var(--role-place);
}
.grab-slot.role-slot--with {
  background: var(--role-with);
}
.grab-slot.role-slot--how {
  background: var(--role-how);
}
.grab-slot.role-slot--object {
  background: var(--role-object);
}
.grab-slot.role-slot--noun {
  background: var(--role-noun);
}
.grab-slot.role-slot--end {
  background: var(--role-end);
}
.grab-tile.block,
.grab-placed.block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--fill);
}
.grab-feedback .block-lines {
  margin: 6px 0;
}
.today-card > * {
  min-width: 0;
}
.today-from {
  flex: 1 1 100%;
  min-width: 0;
}
.today-from select {
  flex: 1 1 12rem;
  width: 100%;
  min-width: 0;
}
/* On /study/, while Today, Mix it up or a game is open, the hub's title shrinks to one line. */
.learn-room--study.is-playing .study-hub-intro {
  margin-bottom: 4px;
}
.learn-room--study.is-playing .study-hub-intro .eyebrow {
  display: none;
}
.learn-room--study.is-playing .study-hub-intro h1 {
  font-size: clamp(1.4rem, 4vw, 1.8rem);
}
.study-player-head .eyebrow:empty {
  display: none;
}
/* The smallest phones (320 px): the four tabs and both sound switches share one row. */
@media (max-width: 360px) {
  .study-bar {
    gap: 4px;
  }
  .study-tabs {
    gap: 3px;
  }
  .study-tab {
    padding-inline: 4px;
    font-size: 0.8rem;
  }
  .study-switches {
    gap: 2px;
  }
  .study-switch {
    width: 33px;
  }
  .study-switch .speaker-icon {
    width: 20px;
    height: 20px;
  }
}