/* Shared BrushBlocks styles: page shell, site navigation and the feedback widget. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; color: #1f2328; background: #fbf8f3; line-height: 1.5; }
header, main, footer { max-width: 960px; margin: 0 auto; padding: 1rem 1.25rem; }
footer { color: #6b6b6b; font-size: .9rem; text-align: center; padding-bottom: 5rem; }
/* Read out by screen readers, not drawn. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Site header + navigation (wraps onto its own row on narrow phones) */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.home-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: inherit; text-decoration: none; }
.brand { font-weight: 700; font-size: 1.25rem; }
.brand-mark { font-size: 1.6rem; color: #b3261e; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .9rem; border-radius: 999px; color: #1f2328; font-weight: 600; text-decoration: none; }
.site-nav a:hover { background: #f3ebe0; }
.site-nav a[aria-current="page"] { background: #fdecea; color: #8c1d18; }
.site-nav a:focus-visible, .home-link:focus-visible { outline: 3px solid #8c1d18; outline-offset: 2px; }

/* Sound match badge: how closely a character follows its sound part, in words (the colour only backs it up). */
.match { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.match-exact { background: #e3f1e6; color: #1e5e2f; }
.match-tone { background: #fdf0d8; color: #6b4200; }
.match-different { background: #fdecea; color: #8c1d18; }

/* Feedback widget */
.fb-launch { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 10; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: #b3261e; color: #fff; font: inherit; font-weight: 600; box-shadow: 0 4px 14px rgba(140, 29, 24, .3); cursor: pointer; }
.fb-launch:hover { background: #8c1d18; }
/* The launcher must sit beside the 960px content column, never over it. By default it is a 48px round 💬 button, which fits
   the side margin from 1064px up; narrower screens keep it that small and the footer's bottom padding lets every page's end
   scroll clear of it. The full labelled pill only shows where the margin is wide enough to hold it (180px + offset). */
.fb-launch > [aria-hidden] { font-size: 1.35rem; line-height: 1; }
.fb-launch .fb-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1340px) {
  .fb-launch { width: auto; height: auto; min-height: 48px; padding: .7rem 1.15rem; }
  .fb-launch > [aria-hidden] { font-size: inherit; }
  .fb-launch .fb-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
}
.fb-launch:focus-visible, .fb-dialog :focus-visible { outline: 3px solid #8c1d18; outline-offset: 2px; }
.fb-dialog { width: min(100% - 2rem, 28rem); max-height: calc(100% - 2rem); padding: 0; border: 1px solid #eadfcf; border-radius: 12px; background: #fbf8f3; color: inherit; box-shadow: 0 12px 40px rgba(31, 35, 40, .25); }
.fb-dialog::backdrop { background: rgba(31, 35, 40, .45); }
.fb-dialog form { display: grid; gap: .9rem; padding: 1.25rem; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fb-head h2 { margin: 0; font-size: 1.2rem; }
.fb-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: #6b6b6b; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.fb-close:hover { background: #f3ebe0; }
.fb-dialog label { display: grid; gap: .3rem; font-weight: 600; font-size: .95rem; }
.fb-dialog .optional { font-weight: 400; color: #6b6b6b; }
.fb-dialog select, .fb-dialog input, .fb-dialog textarea { width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid #d8cbb8; border-radius: 8px; background: #fff; color: inherit; font: inherit; font-weight: 400; }
.fb-dialog textarea { resize: vertical; }
.fb-submit { min-height: 48px; border: 0; border-radius: 999px; background: #b3261e; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.fb-submit:disabled { background: #d9b3b0; cursor: not-allowed; }
.fb-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-count { margin: -.6rem 0 0; font-size: .85rem; color: #8c1d18; }
.fb-count[hidden] { display: none; }
.fb-field-err { margin: -.6rem 0 0; font-size: .85rem; font-weight: 600; color: #8c1d18; }
.fb-field-err[hidden] { display: none; }
.fb-dialog input[aria-invalid="true"] { border: 2px solid #b3261e; background: #fdecea; }
.fb-attach { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: -.3rem; }
.fb-capture { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid #d8cbb8; border-radius: 999px; background: #fff; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.fb-capture:hover { background: #f3ebe0; }
.fb-capture:disabled { color: #6b6b6b; background: #f3ebe0; cursor: not-allowed; }
.fb-hint { flex: 1 1 10rem; min-width: 0; font-size: .85rem; color: #6b6b6b; }
.fb-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fb-thumbs[hidden] { display: none; }
.fb-thumbs li { position: relative; }
.fb-thumbs img { display: block; width: 72px; height: 54px; object-fit: cover; border: 1px solid #d8cbb8; border-radius: 6px; background: #fff; }
.fb-remove { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; padding: 0; border: 2px solid #fbf8f3; border-radius: 999px; background: #8c1d18; color: #fff; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.fb-remove:hover { background: #b3261e; }
.fb-attach-status { margin: -.6rem 0 0; font-size: .85rem; color: #4a4a4a; }
.fb-attach-status:empty { display: none; }
.fb-msg { margin: 0; padding: .65rem .85rem; border-radius: 8px; font-weight: 600; }
.fb-msg[hidden] { display: none; }
.fb-msg.ok { background: #e6f4ea; color: #1e5e2f; }
.fb-msg.err { background: #fdecea; color: #8c1d18; }
@media (max-width: 480px) {
  .fb-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; }
}

/* Building-block animation (block-animation.js): block → its new shape → its slot → the whole character.
   Without .play (or with reduced motion) only the finished character shows. */
.bb-anim { position: relative; width: 10rem; height: 10rem; flex: none; border: 1px solid #eadfcf; border-radius: 12px; overflow: hidden; color: #1f2328; background-color: #fff;
  /* faint centre lines, like the 田 practice grid learners write in */
  background-image: linear-gradient(to right, transparent calc(50% - .5px), #f0e6d8 calc(50% - .5px), #f0e6d8 calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), #f0e6d8 calc(50% - .5px), #f0e6d8 calc(50% + .5px), transparent calc(50% + .5px)); }
.bb-anim > span { position: absolute; display: grid; place-items: center; inset: 0; font-size: 7rem; line-height: 1; }
.bb-solo, .bb-form, .bb-slot { opacity: 0; }
.bb-solo, .bb-form, .bb-slot.mine { color: #b3261e; }
.bb-glyph { display: block; }
.layout-lr .s0 { right: 50%; --fx: 50%; } .layout-lr .s1 { left: 50%; --fx: -50%; }
.layout-lr .bb-glyph { transform: scaleX(.55); }
.layout-tb .s0 { bottom: 50%; --fy: 50%; } .layout-tb .s1 { top: 50%; --fy: -50%; }
.layout-tb .bb-glyph { transform: scaleY(.55); }
.layout-tri .s0 { bottom: 50%; left: 25%; right: 25%; --fy: 50%; }
.layout-tri .s1 { top: 50%; right: 50%; --fx: 50%; --fy: -50%; } .layout-tri .s2 { top: 50%; left: 50%; --fx: -50%; --fy: -50%; }
.layout-tri .bb-glyph { transform: scale(.5); }
.bb-anim.play .bb-solo { animation: bb-solo 4.2s ease both; }
.bb-anim.play .bb-form { animation: bb-form 4.2s ease both; }
.bb-anim.play .bb-slot.mine { animation: bb-mine 4.2s ease both; }
.bb-anim.play .bb-slot:not(.mine) { animation: bb-other 4.2s ease both; }
.bb-anim.play .bb-whole { animation: bb-whole 4.2s ease both; }
@keyframes bb-solo { 0% { opacity: 0; transform: scale(.6); } 8%, 24% { opacity: 1; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(1); } }
@keyframes bb-form { 0%, 24% { opacity: 0; transform: scaleX(1.4); } 34%, 44% { opacity: 1; transform: scaleX(1); } 52%, 100% { opacity: 0; } }
@keyframes bb-mine { 0%, 40% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); } 54%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes bb-other { 0%, 54% { opacity: 0; transform: translateY(35%); } 66%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes bb-whole { 0%, 82% { opacity: 0; } 94%, 100% { opacity: 1; } }
/* !important: the stage rules above are more specific, and motion must stop for learners who ask. */
@media (prefers-reduced-motion: reduce) { .bb-anim.play > span { animation: none !important; } }
.bb-steps { margin: .5rem 0 0; font-size: 1.15rem; letter-spacing: .05em; }

/* "History" / "Memory aid" labels on every illustration */
.label { display: inline-block; margin-right: .4rem; padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; vertical-align: .1em; }
.label-history { background: #e6f4ea; color: #1e5e2f; }
.label-memory { background: #fff4d6; color: #6b4e00; }
.label-clue { background: #fdecea; color: #8c1d18; }

/* Shared buttons for the explorer, review and paths pages */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid #d8cbb8; border-radius: 999px; background: #fff; color: #1f2328; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: #f3ebe0; }
.btn.primary { border-color: #b3261e; background: #b3261e; color: #fff; }
.btn.primary:hover { background: #8c1d18; }
.btn:focus-visible { outline: 3px solid #8c1d18; outline-offset: 2px; }

/* Phone navigation (site-nav.js): links fold behind a ☰ Menu button and open as a drawer. */
.nav-toggle { display: none; }
@media (max-width: 600px) {
  .js-nav .site-header { position: relative; flex-wrap: nowrap; }
  .js-nav .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem; border: 1px solid #d8cbb8; border-radius: 999px; background: #fff; color: #1f2328; font: inherit; font-weight: 600; cursor: pointer; }
  .js-nav .nav-toggle:focus-visible { outline: 3px solid #8c1d18; outline-offset: 2px; }
  .js-nav .site-nav ul { display: none; }
  .js-nav .site-nav.open ul { position: absolute; left: .75rem; right: .75rem; top: 100%; z-index: 20; display: grid; gap: .15rem; padding: .5rem; border: 1px solid #eadfcf; border-radius: 12px; background: #fbf8f3; box-shadow: 0 12px 30px rgba(31, 35, 40, .18); }
  .js-nav .site-nav.open a { display: flex; }
}

/* Simplified / Traditional switch (site-nav.js): one character set at a time, chosen in the header. */
.script-toggle { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; padding: .2rem; border: 1px solid #eadfcf; border-radius: 999px; background: #fff; }
.script-toggle .script-label { padding: 0 .5rem 0 .6rem; font-size: .85rem; font-weight: 600; color: #4a4a4a; }
.script-toggle .script-options { display: inline-flex; gap: .25rem; }
.script-toggle button { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .4rem .85rem; border: 0; border-radius: 999px; background: transparent; color: #1f2328; font: inherit; font-weight: 600; cursor: pointer; }
.script-toggle button [lang] { font-size: 1.15rem; }
.script-toggle button:hover { background: #f3ebe0; }
.script-toggle button[aria-pressed="true"] { background: #b3261e; color: #fff; }
.script-toggle button:focus-visible { outline: 3px solid #8c1d18; outline-offset: 2px; }
/* Side-by-side comparison: a character's simplified and traditional forms. */
.script-compare { display: flex; width: fit-content; max-width: min(100%, 20rem); flex-wrap: wrap; gap: .25rem .9rem; margin: 0 0 .6rem; padding: .35rem .75rem; border-radius: 10px; background: #fff; border: 1px solid #f0e6d8; }
.script-compare .form { display: inline-flex; align-items: baseline; gap: .4rem; font-size: .9rem; color: #4a4a4a; }
.script-compare .form [lang] { font-size: 1.6rem; line-height: 1.2; color: #1f2328; }
.script-compare .note { flex-basis: 100%; font-size: .85rem; color: #4a4a4a; }
[data-charset="simplified"] .script-compare .simp [lang], [data-charset="traditional"] .script-compare .trad [lang] { color: #b3261e; }
/* Traditional saved: Chinese stays hidden until /site-nav.js has converted it, so it is never drawn in simplified first (see the first-paint script in each page's <head>). */
.charset-pending [lang^="zh"]:not([lang^="zh-Latn"], [data-script], [data-script] *) { visibility: hidden; }
.when-traditional { display: none; }
[data-charset="traditional"] .when-traditional { display: revert; }
@media (max-width: 600px) {
  .js-nav .site-header { flex-wrap: wrap; }
  /* The buttons move as one item, so on the narrowest phones (320px) they wrap under the label together instead of running off the screen. */
  .script-toggle { order: 3; width: 100%; flex-wrap: wrap; justify-content: center; border-radius: 26px; }
  .script-toggle .script-options { display: flex; flex: 1 1 auto; }
  .script-toggle button { flex: 1; justify-content: center; padding: .4rem; }
  .script-toggle .script-label { padding: 0 .25rem 0 .5rem; }
}