/* RateMySpanish / RateMyEnglish — one layout for everyone: a thin header, the
   challenge card on the table, a quiet footer. Neutral greys and one indigo
   accent for the chrome; the game surfaces (.pz-*) bring their own inks. */

:root {
  --content-bg: #ffffff;
  --sidebar-bg: #fafafa;
  --fg: #1f2328;
  --muted: #6b7280;
  --faint: #9aa0a6;
  --line: #ececef;
  --line-soft: #f3f3f5;
  --accent: #5b5bd6;        /* indigo */
  --accent-hover: #4d4dc7;
  --accent-soft: #eeeefc;
  --good: #2f9e6b;
  --bad: #d6455b;
  --radius: 10px;
  --radius-lg: 14px;
  --content-max: 900px;
  --sidebar-w: 256px;
  --ground: #e9ebe8;      /* the table every card sits on — the whole page, header to footer */
  --mark-brand: #2e8b57;  /* the "sounds native" green ink */
}

* { box-sizing: border-box; }

/* min-height (not height) so the document grows with content; a fixed 100%
   height caps body at one viewport and breaks the sticky full-height sidebar on
   long pages. */
html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--content-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; }

/* ---------- Flash ---------- */
.flash {
  max-width: var(--content-max);
  margin: 1.5rem auto -0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.flash-notice { background: var(--accent-soft); color: var(--accent-hover); }
.flash-alert { background: #fdecec; color: #a3271f; }

/* ---------- Cards ---------- */
.card {
  background: var(--content-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; }
.card h3 { margin-top: 0; }

/* ---------- Buttons ---------- */
button, .btn, input[type="submit"] {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}
.btn-secondary {
  background: var(--content-bg);
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--line-soft); border-color: var(--line); color: var(--fg); }
.btn.small, .btn-secondary.small, button.small, input.small[type="submit"] {
  padding: 0.3rem 0.7rem;
  font-size: 0.84rem;
}
.link-button {
  background: none;
  border: none;
  color: var(--muted);
  padding: 0;
  font-size: 0.88rem;
}
.link-button:hover { background: none; color: var(--fg); text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; align-items: center; }
/* button_to wraps its button in a <form>; let the button be the flex item so it
   lines up with sibling <a class="btn"> links instead of sitting off-center. */
.actions form { display: contents; }

/* ---------- Forms ---------- */
form .field { margin-bottom: 1rem; }
label { display: block; font-size: 0.88rem; color: var(--muted); margin-bottom: 0.35rem; }
input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--fg);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 7rem; resize: vertical; }

.muted { color: var(--muted); }
.small { font-size: 0.88rem; }

/* ---------- Markdown feedback ---------- */
.feedback h1, .feedback h2, .feedback h3 { font-size: 1rem; margin: 0.8rem 0 0.3rem; }
.feedback ul { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }
.feedback code { background: var(--accent-soft); padding: 0.1rem 0.3rem; border-radius: 4px; }

/* ---------- Highlight-and-annotate feedback ---------- */
/* Colour families: green = done well, amber = sounds-off (naturalness/word
   choice), blue = mechanical (grammar/accent/punctuation). */
.explain {
  --hl-good: var(--good);   --hl-good-soft: rgba(47, 158, 107, 0.16);
  --hl-amber: #c2861a;      --hl-amber-soft: rgba(217, 154, 43, 0.18);
  --hl-blue: var(--accent); --hl-blue-soft: var(--accent-soft);
}
.explain-verdict { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.75rem; }
.explain-verdict-detail { margin: -0.45rem 0 0.9rem; color: #4b5563; font-size: 0.98rem; line-height: 1.45; }

/* The student's sentence with inline marks */
.explain-sentence {
  font-size: 1.2rem;
  line-height: 1.7;
  margin: 0 0 1.1rem;
}
.explain-sentence .hl {
  background: var(--hl-color-soft);
  color: inherit;
  padding: 0.05em 0.18em;
  border-radius: 5px;
  box-shadow: inset 0 -2px 0 var(--hl-color);
  cursor: default;
  transition: box-shadow 0.12s ease, background 0.12s ease;
}
.hl-good  { --hl-color: var(--hl-good);  --hl-color-soft: var(--hl-good-soft); }
.hl-amber { --hl-color: var(--hl-amber); --hl-color-soft: var(--hl-amber-soft); }
.hl-blue  { --hl-color: var(--hl-blue);  --hl-color-soft: var(--hl-blue-soft); }

/* Annotation cards */
.ann-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.1rem; }
.ann {
  display: flex;
  gap: 0.6rem;
  padding: 0.65rem 0.8rem;
  background: var(--line-soft);
  border-left: 3px solid var(--hl-color);
  border-radius: 8px;
  transition: box-shadow 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.ann-icon {
  color: var(--hl-color);
  font-weight: 700;
  line-height: 1.5;
  flex: none;
}
.ann-term { font-weight: 600; }
.ann-note { color: var(--fg); }

/* Hover/focus cross-linking (driven by highlight_controller.js) */
.explain .is-active.hl { box-shadow: inset 0 -2px 0 var(--hl-color), 0 0 0 2px var(--hl-color); }
.explain .is-active.ann {
  background: var(--hl-color-soft);
  box-shadow: 0 2px 10px rgba(31, 35, 40, 0.1);
  transform: translateX(2px);
}
.explain [data-hl] { cursor: pointer; }
.explain .is-dim { opacity: 0.4; }

/* Suggested idiomatic rewrite */
.corrected {
  background: var(--hl-good-soft, rgba(47, 158, 107, 0.16));
  border: 1px solid rgba(47, 158, 107, 0.35);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}
.corrected-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--good);
}
.corrected-label .ann-icon { color: var(--good); }
.corrected-text { margin: 0.3rem 0 0; font-size: 1.1rem; }
.explain-closing { margin: 0; }

/* ---------- Lists ---------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.list li:last-child { border-bottom: none; }
.term { font-weight: 600; }

/* ---------- Spinner ---------- */
.thinking { color: var(--muted); font-style: italic; }
.loading {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-style: italic;
}
.spinner {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
}
button[disabled], input[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Auth ---------- */
.auth { max-width: 400px; margin: 1.5rem auto; }

/* ===================================================================
   Page chrome (header / footer) and the marketing sections (pricing, the
   "sound like a local" pages).
   =================================================================== */
/* Header, then the ground (main) fills whatever the content leaves, then the
   footer — so a short page never shows a white void under the table. */
body.marketing { background: var(--ground); min-height: 100%; display: flex; flex-direction: column; }
.marketing main { display: block; flex: 1 0 auto; }
/* Auto margins on a flex item would collapse it to content width: pin both bars. */
.m-header, .m-footer { width: 100%; }

/* Header: sits on the table like everything else — no bar, no rule. The
   wordmark is the card's serif with the game's ink mark under it (the same
   stroke the grader draws under a word that sounds native). */
.m-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.15rem 1.5rem 0.9rem;
}
.brand { position: relative; display: inline-block; color: var(--fg); line-height: 1; }
.brand__word { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.015em; }
.brand__mark {
  position: absolute; left: 1px; right: 2px; bottom: -6px; height: 5px; border-radius: 3px;
  background: var(--mark-brand); opacity: 0.8; mix-blend-mode: multiply; transform: rotate(-1.2deg);
  transform-origin: left center;
}
.m-header .brand:hover { text-decoration: none; }
.m-header .brand:hover .brand__mark { opacity: 1; }
.m-nav { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.m-nav > * { flex: 0 1 auto; min-width: 0; }
.m-nav .locale-trigger { max-width: 100%; }
.m-nav-link { color: var(--muted); font-weight: 500; }
.m-nav-link:hover { color: var(--fg); text-decoration: none; }

/* The member menu: a <details> popover under the name — no script needed. */
.m-user { position: relative; }
.m-user__name {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.34rem 0.7rem; border: 1px solid rgba(31, 35, 40, 0.16); border-radius: 999px;
  background: rgba(250, 248, 242, 0.75); font-size: 0.85rem; color: var(--muted); max-width: 11rem;
}
.m-user__name::-webkit-details-marker { display: none; }
.m-user__name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-user__name::after { content: ""; width: 6px; height: 6px; flex: none; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: translateY(-2px) rotate(45deg); }
.m-user__name:hover, .m-user[open] .m-user__name { color: var(--fg); border-color: #e2e2e6; background: var(--sidebar-bg); }
.m-user__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  display: flex; flex-direction: column; gap: 1px; padding: 0.3rem;
  background: var(--content-bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 18, 20, 0.13);
}
.m-user__item {
  display: block; width: 100%; padding: 0.46rem 0.6rem; text-align: left;
  font: inherit; font-size: 0.9rem; color: var(--fg); background: transparent; border: 0; border-radius: 7px;
}
.m-user__item:hover { background: var(--line-soft); text-decoration: none; }
.m-user__menu form { display: contents; }
.m-user__button { color: var(--muted); cursor: pointer; }

/* Standalone pages inside the shared main (auth, contact, account): a single
   card centred under the header. */
.marketing main > .auth, .marketing main > .page-card { margin: 2rem auto 3rem; padding-left: 1rem; padding-right: 1rem; }
.page-card { max-width: 560px; }
.page-card .card + .card { margin-top: 1.25rem; }
.page-card > .actions { margin: 1.5rem 0 0; }
.page-card h1 { font-size: 1.5rem; margin: 0 0 1.2rem; letter-spacing: -0.01em; }
.page-card .field label { display: flex; gap: 0.5rem; align-items: center; }
.page-card .field label input[type="checkbox"] { width: auto; }
.plan-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; }
.plan-line strong { font-size: 1.1rem; }

/* Keep the header from overflowing on phones (the "Get started" button was
   getting clipped off the right edge). Drop the redundant "Sign in" link
   (also in the hero + footer) and tighten spacing so brand + language + CTA fit. */
@media (max-width: 820px) {
  .m-header { padding: 0.9rem 1rem 0.7rem; gap: 0.5rem; }
  .m-header .brand { white-space: nowrap; flex: none; }
  .m-header .brand__word { font-size: 1.25rem; }
  /* The language pill keeps only its globe: locale names like "Español
     (Latinoamérica)" would otherwise push the page wider than the phone. */
  .m-header .locale-current, .m-header .locale-chevron { display: none; }
  .m-header .locale-trigger { padding: 0.34rem 0.5rem; }
  .m-header .locale-trigger .locale-globe { width: 17px; height: 17px; }
  .m-nav { gap: 0.55rem; }
  .m-nav .m-nav-link { display: none; }
  .m-nav .btn { flex: none; white-space: nowrap; padding: 0.45rem 0.8rem; }
  .m-user__name { max-width: 7.5rem; }
}
/* Belt and braces: nothing in the chrome may ever widen the page. */
body.marketing { overflow-x: clip; }

/* Shared section rhythm */
.marketing main > section { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
.section-title { text-align: center; font-size: 1.7rem; margin: 0 0 2rem; letter-spacing: -0.02em; }
.btn-lg { padding: 0.7rem 1.4rem; font-size: 1.02rem; border-radius: 10px; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
  padding-top: 3.5rem !important;
  padding-bottom: 4rem !important;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.hero h1 {
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.lede { font-size: 1.18rem; color: var(--muted); margin: 0 0 1.6rem; max-width: 36ch; }
.lede strong { color: var(--fg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.hero-cta__form { display: contents; }

/* Feature grid */
.features { padding-top: 2rem !important; padding-bottom: 3rem !important; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.4rem;
  background: var(--content-bg);
}
.feature-icon {
  width: 2.1rem; height: 2.1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 9px; font-weight: 700; margin-bottom: 0.7rem;
}
.feature h3 { margin: 0 0 0.35rem; }
.feature p { margin: 0; color: var(--muted); }
.feature strong { color: var(--fg); }

/* Final CTA */
.final-cta { text-align: center; padding: 3rem 1.5rem 4rem !important; }
.final-cta h2 { font-size: 1.9rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.final-cta p { margin: 0 0 1.4rem; }

/* Footer */
.m-footer {
  border-top: 1px dashed rgba(31, 35, 40, 0.28);
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 2.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.m-footer .brand .brand__word { font-size: 1.1rem; }
.m-footer-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.m-footer-links a { white-space: nowrap; }
@media (max-width: 640px) {
  .m-footer { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .m-footer-links { margin-left: 0; flex-direction: column; gap: 0.55rem; }
  .m-footer-links .m-footer-sister { margin-top: 0.4rem; }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 2.4rem !important; }
  .hero h1 { font-size: 2.3rem; }
  /* Lead with the headline + CTA on mobile; the demo follows (DOM order). */
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Language switcher (globe pill + popover) ---------- */
.locale-switcher { position: relative; display: inline-block; }

.locale-trigger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  width: auto; max-width: 100%;
  padding: 0.34rem 0.6rem;
  font: inherit; font-size: 0.85rem; color: var(--muted);
  background: rgba(250, 248, 242, 0.75);
  border: 1px solid rgba(31, 35, 40, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.locale-trigger:hover { background: var(--sidebar-bg); color: var(--fg); border-color: #e2e2e6; }
.locale-trigger[aria-expanded="true"] { color: var(--fg); border-color: var(--accent); }
.locale-trigger .locale-globe { width: 15px; height: 15px; flex: none; color: var(--faint); }
.locale-trigger .locale-chevron { width: 13px; height: 13px; flex: none; color: var(--faint); }
.locale-trigger .locale-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.locale-menu {
  position: absolute; left: 0; z-index: 60;
  min-width: 220px; margin: 0; padding: 0.3rem;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--content-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(17, 18, 20, 0.13);
}
.locale-menu[hidden] { display: none; }
.locale-menu--down { top: calc(100% + 6px); }
.locale-menu--up { bottom: calc(100% + 6px); }

.locale-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 0.46rem 0.6rem;
  font: inherit; font-size: 0.9rem; text-align: left; color: var(--fg);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
}
.locale-option:hover { background: var(--line-soft); }
.locale-option:focus-visible { outline: none; background: var(--line-soft); }
.locale-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.locale-option .locale-check { width: 15px; height: 15px; flex: none; color: var(--accent); }

/* Right-edge placements: anchor the menu to the right so it stays on-screen. */
.m-nav .locale-menu { left: auto; right: 0; }

/* Plan cards (pricing + account) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.plan-card { display: flex; flex-direction: column; gap: .5rem; }
.plan-card--current { outline: 2px solid var(--accent, #5b5bd6); }
.plan-card .plan-price { font-size: 1.4rem; font-weight: 600; margin: 0; }
.plan-card .btn { margin-top: auto; }
.plan-card .plan-alt { margin: -0.3rem 0 0; }
.plan-card .plan-buy { margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.plan-card .plan-buy .btn { width: 100%; margin-top: 0; }

/* --- Marketing page furniture (region pages, pricing) -------------------- */
.exam-demands { max-width: 46rem; }
.exam-demands p { color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid #e2e2e6;
  border-radius: 999px; font-size: 0.85rem; color: var(--muted);
  background: #fff; text-decoration: none;
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.faq-list { display: grid; gap: 1.1rem; max-width: 46rem; }
.faq-list h3 { margin: 0 0 0.3rem; }
.faq-list p { margin: 0; color: var(--muted); }
.hero--single { grid-template-columns: 1fr; max-width: 46rem; }

/* --- Public pricing page --- */
.pricing-note { max-width: 46rem; margin-top: 1.2rem; }

/* --- "Sound like a local" region pages (app/views/regions/show) ---------- */
.phrase-table-wrap { overflow-x: auto; max-width: 52rem; margin-top: 1rem; }
.phrase-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.phrase-table th, .phrase-table td { text-align: left; padding: 0.55rem 0.7rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.phrase-table th { font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.phrase-table td .small { display: block; }
.region-changes { max-width: 46rem; padding-left: 1.2rem; display: grid; gap: 0.6rem; color: var(--muted); }
.region-changes strong { color: var(--fg); }

/* ===================================================================
   The daily challenge — stamps. A card on a table: card stock, a serif
   sentence, ink marks under the words, and the score as a distressed round
   stamp in the variety's ink (--ink, set inline). The app's indigo chrome
   stays around it; nothing on the card uses it.
   =================================================================== */
:root {
  --table: #e9ebe8;
  --stock: #faf8f2;
  --stock-line: rgba(31, 35, 40, 0.18);
  --ink: #b8322a;
  --ink-soft: rgba(184, 50, 42, 0.12);
  --mark-g: #2e8b57; --mark-y: #d29a1b; --mark-r: #b8322a;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --narrow: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', sans-serif;
}
.btn-ink, .btn.btn-ink, input[type="submit"].btn-ink, button.btn-ink {
  background: #1f2328; border-color: #1f2328; color: var(--stock);
  font-family: var(--narrow); font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 4px; min-height: 44px; padding: 0 1.2rem;
}
.btn-ink:hover, .btn.btn-ink:hover, input[type="submit"].btn-ink:hover, button.btn-ink:hover { background: #000; border-color: #000; color: #fff; }

.pz-game, .marketing main > section.pz-game { max-width: 560px; margin: 0 auto; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; gap: 14px; }
.marketing main > section.pz-game { padding-top: 1.5rem; padding-bottom: 2rem; }
.marketing main { background: var(--table); }
.app .pz-game { padding-top: 0; }
.pz-muted { color: #6b7280; font-size: 0.9rem; }
.pz-table-head { margin: 0; padding: 0 4px; font-family: var(--narrow); font-size: 0.95rem; letter-spacing: 0.02em; }

/* The card */
.pz-card {
  position: relative; background: var(--stock);
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  border-radius: 6px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 14px 28px -14px rgba(31, 35, 40, 0.45), 0 30px 50px -30px rgba(31, 35, 40, 0.35);
}
.pz-card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stock-line); border-radius: 3px; pointer-events: none; }
.pz-card > * { position: relative; }
.pz-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pz-card__id { display: flex; flex-direction: column; gap: 2px; }
.pz-card__no { font-family: var(--narrow); font-size: 0.82rem; letter-spacing: 0.12em; color: #6b7280; text-transform: uppercase; }
.pz-typical { font-family: var(--narrow); font-size: 0.78rem; color: #6b7280; border: 1px solid rgba(31, 35, 40, 0.25); border-radius: 3px; padding: 2px 6px; white-space: nowrap; }
.pz-instruction { margin: 0.4rem 0 0; font-size: 0.95rem; color: #6b7280; }
.pz-instruction strong { color: var(--ink); }
.pz-sentence { font-family: var(--serif); font-size: 1.7rem; line-height: 1.22; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: #1f2328; text-wrap: pretty; }
.pz-sentence--result { font-size: 1.35rem; }
.pz-label { margin: 0.4rem 0 0; font-size: 0.85rem; color: #6b7280; }
.pz-card__foot { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 12px; margin-top: 4px; }
/* The picker: a strip of variety seals and a difficulty dial, set into the
   card below the dashed rule like the stamp tray of a passport desk. */
.pz-config { display: flex; flex-direction: column; gap: 16px; margin-top: 2px; }
.pz-config fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pz-config__label {
  display: block; font-family: var(--narrow); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(31, 35, 40, 0.55); margin: 0 0 6px; padding: 0;
}
.pz-flags__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 0 -4px; padding: 2px 0 0; }
.pz-flag {
  position: relative; flex: 0 0 25%; max-width: 96px; min-width: 74px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px 4px;
  border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pz-flag__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* The cloth: a 3:2 flag with a hairline edge and a whisper of a shadow, so it
   sits on the card like a printed sticker rather than a flat icon. */
.pz-flag__cloth {
  display: block; width: 54px; height: 36px; border-radius: 3px; overflow: hidden; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 1px 2px rgba(31, 35, 40, 0.18);
  transform: scale(0.94); opacity: 0.6; filter: saturate(0.75);
  transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.pz-flag__cloth .flag { display: block; width: 100%; height: 100%; }
.pz-flag__name {
  font-family: var(--narrow); font-weight: 600; font-size: 0.72rem; line-height: 1.1; text-align: center;
  color: rgba(31, 35, 40, 0.55); max-width: 88px; transition: color 0.2s ease;
}
.pz-flag:hover .pz-flag__cloth { opacity: 0.9; filter: none; transform: scale(1); }
.pz-flag__input:checked ~ .pz-flag__cloth {
  opacity: 1; filter: none; transform: scale(1.1);
  box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 0 0 2px var(--stock), 0 0 0 3.5px var(--flag-ink), 0 3px 8px rgba(31, 35, 40, 0.25);
}
.pz-flag__input:checked ~ .pz-flag__name { color: var(--flag-ink); font-weight: 700; }
.pz-flag__input:focus-visible ~ .pz-flag__cloth { box-shadow: inset 0 0 0 1px rgba(31, 35, 40, 0.18), 0 0 0 2px var(--stock), 0 0 0 4px #1f2328; }
.pz-flag__cloth { position: relative; overflow: visible; }
/* Wide cards seat every flag in a single row (up to seven). */
@media (min-width: 520px) { .pz-flag { flex-basis: calc(100% / 7); min-width: 0; max-width: none; } }

.pz-dial { --dial-pct: 0%; }
.pz-dial__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pz-dial__value {
  font-family: var(--narrow); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); line-height: 1;
}
.pz-dial__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 2px 0 0; background: transparent; cursor: pointer;
  --track: linear-gradient(to right, var(--ink) 0 var(--dial-pct), transparent var(--dial-pct) 100%),
           repeating-linear-gradient(to right, rgba(31, 35, 40, 0.38) 0 6px, transparent 6px 10px);
}
.pz-dial__range::-webkit-slider-runnable-track { height: 2px; background: var(--track); border-radius: 1px; }
.pz-dial__range::-moz-range-track { height: 2px; background: var(--track); border-radius: 1px; }
.pz-dial__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--stock); box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(31, 35, 40, 0.35);
  transition: transform 0.15s ease;
}
.pz-dial__range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--stock); box-shadow: 0 0 0 1px var(--ink), 0 2px 6px rgba(31, 35, 40, 0.35);
}
.pz-dial__range:active::-webkit-slider-thumb, .pz-dial__range:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }
.pz-dial__range:focus { outline: none; }
.pz-dial__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px var(--ink-soft); }
/* Tick labels sit under the slider's stops: the thumb travels between
   11px insets, so the label row is inset the same and each tick is placed
   at its stop's percentage (--tick-pos), edges anchored to the ends. */
.pz-dial__ticks { position: relative; height: 1rem; margin: 2px 11px 0; }
.pz-dial__tick {
  position: absolute; top: 0; left: var(--tick-pos, 0%); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--narrow); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(31, 35, 40, 0.42); transition: color 0.2s ease;
}
.pz-dial__tick:first-child { transform: translateX(-11px); }
.pz-dial__tick:last-child { transform: translateX(calc(-100% + 11px)); }
.pz-dial__tick.is-on { color: var(--ink); font-weight: 700; }
.pz-dial.is-dealing { opacity: 0.6; pointer-events: none; }
/* Phones: only the two ends; the current name already sits above the dial. */
@media (max-width: 420px) { .pz-dial__tick:not(:first-child):not(:last-child) { visibility: hidden; } }

/* Answer box */
.pz-play { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pz-play form { display: flex; flex-direction: column; gap: 8px; }
.pz-input {
  width: 100%; font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; padding: 0.7rem 0.85rem;
  border: 1px solid rgba(31, 35, 40, 0.35); border-radius: 4px; background: #fff; resize: vertical;
  background-image: repeating-linear-gradient(transparent 0 30px, rgba(31, 35, 40, 0.08) 30px 31px);
}
.pz-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.pz-play__row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* Words with ink marks */
.pz-words { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.pz-word { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pz-word__text { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.pz-mark { height: 6px; border-radius: 2px; opacity: 0.85; mix-blend-mode: multiply; }
.pz-mark--g { background: var(--mark-g); }
.pz-mark--y { background: var(--mark-y); }
.pz-mark--r { background: var(--mark-r); }
[data-controller~="reveal"] .pz-mark { opacity: 0; transform: scaleX(0.2) !important; transition: opacity 0.25s ease, transform 0.3s ease; }
[data-controller~="reveal"] .pz-mark.is-on { opacity: 0.85; transform: none !important; }

/* Verdict + stamp */
.pz-result { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 150px; margin-top: 4px; }
.pz-result__text { display: flex; flex-direction: column; gap: 6px; max-width: 58%; padding-top: 14px; }
.pz-verdict { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.pz-reaction { font-family: var(--serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: #1f2328; }
.pz-result--top .pz-reaction, .pz-result--good .pz-reaction { color: var(--mark-g); }
.pz-result--low .pz-reaction { color: #6b7280; }
.pz-stamp { position: absolute; right: -6px; top: -2px; width: 150px; height: 150px; }
.pz-stamp .stamp { width: 100%; height: 100%; display: block; }
[data-controller~="reveal"] .pz-stamp { opacity: 0; transform: scale(1.6) rotate(6deg); }
[data-controller~="reveal"] .pz-stamp.is-on { opacity: 1; transform: none; transition: opacity 0.18s ease-out, transform 0.28s cubic-bezier(0.2, 1.4, 0.4, 1); }
.pz-trap, .pz-focus { margin: 0; }
.pz-beat { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.pz-beat .btn-ink { display: inline-flex; align-items: center; }
.pz-beat h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.6rem; font-weight: 600; }

/* The weekly review quiz: options as full-width buttons on the card stock;
   after an answer the right one takes the green wash, a wrong pick the red,
   and the progress row records the run in the mark inks. */
.pz-quiz__progress { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; gap: 5px; flex-wrap: wrap; }
.pz-quiz__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed rgba(31, 35, 40, 0.35); }
.pz-quiz__dot--right { background: var(--mark-g); border-color: var(--mark-g); }
.pz-quiz__dot--wrong { background: var(--mark-r); border-color: var(--mark-r); }
.pz-quiz__dot--now { border: 2px solid var(--ink); }
.pz-quiz__prompt { font-size: 1.45rem; margin-top: 0.9rem; }
.pz-quiz__hl { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.pz-quiz__options { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pz-quiz__option { display: flex; align-items: baseline; gap: 0.7rem; width: 100%; text-align: left; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: #1f2328; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(31, 35, 40, 0.25); border-radius: 6px; padding: 0.7rem 0.85rem; }
button.pz-quiz__option--pick { cursor: pointer; }
button.pz-quiz__option--pick:hover { border-color: #1f2328; background: #fff; }
.pz-quiz__option--right { background: rgba(46, 139, 87, 0.14); border-color: var(--mark-g); }
.pz-quiz__option--wrong { background: rgba(184, 50, 42, 0.12); border-color: var(--mark-r); }
.pz-quiz__letter { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--narrow); font-weight: 700; font-size: 0.8rem; color: #faf8f2; background: #1f2328; transform: translateY(0.2rem); }
.pz-quiz__option--right .pz-quiz__letter, .pz-quiz__letter--right { background: var(--mark-g); }
.pz-quiz__option--wrong .pz-quiz__letter { background: var(--mark-r); }
.pz-quiz__verdict { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.pz-quiz__verdict--right .pz-verdict { color: var(--mark-g); }
.pz-quiz__verdict--wrong .pz-verdict { color: var(--mark-r); }
.pz-quiz__why { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; }
.pz-quiz .btn-ink { margin-top: 1rem; display: inline-flex; align-items: center; }
.pz-quiz__missed { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; margin-top: 0.5rem; }
.pz-quiz__missed h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.6rem; font-weight: 600; }
.pz-quiz__missed-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 1rem; }
.pz-quiz__missed-list li p { margin: 0.15rem 0; }
.pz-quiz__missed-prompt { font-family: var(--serif); font-size: 1.1rem; }
.pz-quiz__missed-answer { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-family: var(--serif); font-size: 1.05rem; }

/* Challenge a friend: the standings (who is in the challenge, best first,
   the winner's rosette in gold), then the name, the link and the email row. */
.pz-challenge { border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 1rem; }
.pz-challenge__ask { display: flex; flex-direction: column; gap: 2px; }
.pz-challenge__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0; }
.pz-challenge__body { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.pz-challenge__form { display: flex; flex-direction: column; gap: 10px; }
.pz-challenge__name { display: flex; flex-direction: column; gap: 4px; }
.pz-challenge__name .pz-label { margin: 0; }
.pz-challenge__name .pz-subscribe__input, .pz-play__name .pz-subscribe__input { flex: none; width: 100%; max-width: 280px; }
.pz-challenge__row { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-challenge__row .btn { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pz-challenge__row .btn[hidden] { display: none; }
.pz-challenge .btn-secondary, .pz-challenge input[type="submit"].btn-secondary { background: transparent; border: 1px solid rgba(31, 35, 40, 0.3); border-radius: 4px; color: #1f2328; font-family: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pz-challenge .btn-secondary:hover, .pz-challenge input[type="submit"].btn-secondary:hover { border-color: #1f2328; background: rgba(255, 255, 255, 0.6); }
.pz-challenge__link { flex: none; width: 100%; font-size: 0.9rem; }
.pz-challenge__link[hidden] { display: none; }
.pz-challenge__note { margin: 0; }
.pz-challenge__waiting { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--narrow); }
.pz-challenge__email { color: #1f2328; overflow-wrap: anywhere; }
.pz-play__name { display: flex; flex-direction: column; gap: 4px; }
.pz-play__name .pz-label { margin: 0; }
.pz-standings { display: flex; flex-direction: column; gap: 6px; }
.pz-standings__head { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; }
.pz-standings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pz-standings__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; padding: 7px 6px; border-top: 1px dashed rgba(31, 35, 40, 0.18); font-family: var(--narrow); }
.pz-standings__row:first-child { border-top: 0; }
.pz-standings__row.is-you { background: var(--ink-soft); border-radius: 6px; border-top-color: transparent; }
.pz-standings__row.is-you + .pz-standings__row { border-top-color: transparent; }
.pz-standings__mark { display: flex; justify-content: center; }
.pz-standings__name { font-size: 1.02rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-standings__name a { color: inherit; text-decoration: underline; text-decoration-color: rgba(31, 35, 40, 0.3); text-underline-offset: 3px; }
.pz-standings__score { grid-column: 4; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-standings .pz-grid { grid-column: 3; flex-wrap: wrap; max-width: 150px; justify-content: flex-end; }
/* Another player's translation, marked up, under their name: it is read, not revealed. */
.pz-standings__words { grid-column: 2 / -1; margin-top: 2px; }
.pz-words--sm { gap: 4px 9px; }
.pz-words--sm .pz-word { gap: 2px; }
.pz-words--sm .pz-word__text { font-size: 1.05rem; }
.pz-words--sm .pz-mark { height: 4px; }
[data-controller~="reveal"] .pz-words--sm .pz-mark { opacity: 0.85; transform: none !important; transition: none; }
/* A friend's translation before the visitor has played: the marks alone. */
.pz-words--hidden { gap: 8px 10px; padding-top: 6px; }
.pz-words--hidden .pz-mark { height: 12px; border-radius: 3px; }
.pz-words__note { margin: 0; }
.pz-grid { display: inline-flex; gap: 3px; }
.pz-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--line); }
.pz-cell--g { background: var(--mark-g); } .pz-cell--y { background: var(--mark-y); } .pz-cell--r { background: var(--mark-r); }

/* The strip under the card: seal + streak + link to your page */
.pz-strip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.pz-strip .stamp--seal { width: 34px; height: 34px; flex: none; }
.pz-strip__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pz-strip__text strong { font-family: var(--narrow); font-size: 1rem; font-weight: 700; }
.pz-strip__link { font-family: var(--narrow); font-weight: 600; color: #2f4d9c; white-space: nowrap; }
.pz-links { max-width: 560px; margin: 0 auto; padding: 0 1rem 1.5rem; }
.pz-next { max-width: 560px; margin: 0 auto; padding: 0 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.pz-cta .btn { margin-right: 0.5rem; }

/* Guest "how it works" */
.pz-how, .marketing main > section.pz-how { max-width: 560px; margin: 0 auto; padding: 0.5rem 1rem 2.5rem; }
.pz-how h2 { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 0.5rem; font-weight: 600; }
.pz-how ol { margin: 0 0 0.8rem; padding-left: 1.3rem; color: #6b7280; line-height: 1.5; }
.pz-how li { margin-bottom: 0.35rem; }

/* Your page: the month of stamps */
.pz-card--page { background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px), repeating-linear-gradient(0deg, rgba(47, 77, 156, 0.06) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, rgba(47, 77, 156, 0.04) 0 1px, transparent 1px 9px); background-size: 6px 6px, auto, auto; padding: 20px 16px 22px; gap: 12px; }
.pz-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pz-page__month { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.1; margin: 0; }
.pz-page__streak { display: flex; flex-direction: column; align-items: flex-end; }
.pz-page__streak-n { font-family: var(--narrow); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--mark-r); }
.pz-page__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.pz-slot { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.pz-slot__day { position: absolute; left: 6px; top: 4px; font-family: var(--narrow); font-size: 0.72rem; color: #9aa0a6; }
.pz-slot__stamp, .pz-slot__stamp .stamp { display: block; width: 62px; height: 62px; }
.pz-slot__empty { width: 40px; height: 40px; border-radius: 50%; border: 1px dashed rgba(31, 35, 40, 0.2); display: block; }
.pz-slot__empty--link:hover { border-color: var(--ink); border-style: solid; }
.pz-slot--future { opacity: 0.45; }
.pz-page__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed rgba(31, 35, 40, 0.3); padding-top: 12px; }
.pz-page__inks { display: flex; align-items: center; gap: 10px; }
.pz-page__ink { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: -6px; }
.pz-page__note { margin: 0 6px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  [data-controller~="reveal"] .pz-mark, [data-controller~="reveal"] .pz-stamp { transition: none; }
}
@media (max-width: 420px) {
  .pz-card { padding: 18px 16px 16px; }
  .pz-sentence { font-size: 1.5rem; }
  .pz-stamp { width: 132px; height: 132px; right: -8px; }
  .pz-result__text { max-width: 55%; }
}
/* Marketing header on game pages: no competing call to action. */
.m-header--quiet .m-nav .btn { display: none; }
.m-header--quiet .m-nav .m-nav-link--signin { display: inline; }

/* Grading in flight: the answer box dims under card stock and an ink ring
   turns while the stepped messages walk (demo_progress_controller). */
.pz-play .demo-busy { display: none; }
.pz-play.is-busy .demo-busy {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  position: absolute; inset: -6px; border-radius: 6px; background: rgba(250, 248, 242, 0.9);
  font-family: var(--narrow); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.pz-play.is-busy .demo-busy .spinner {
  width: 46px; height: 46px; border: 3px dashed var(--ink); border-top-color: transparent; border-radius: 50%;
  animation: pz-ink-spin 1.1s linear infinite; opacity: 0.85; mix-blend-mode: multiply;
}
@keyframes pz-ink-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pz-play.is-busy .demo-busy .spinner { animation: none; } }

/* Below the card: the account ask and the tutor's notes, on the same card
   stock as the card (scoped so practice mode keeps the app's own cards). */
.pz-next .card {
  background: var(--stock); border: none; border-radius: 6px; padding: 20px 20px 18px; position: relative;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4);
}
.pz-next .card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stock-line); border-radius: 3px; pointer-events: none; }
.pz-next .card > * { position: relative; }
.pz-next .card h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.pz-next .card p.muted { color: #6b7280; }
.pz-next .btn { background: #1f2328; border-color: #1f2328; color: var(--stock); font-family: var(--narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 4px; min-height: 44px; padding: 0 1.1rem; display: inline-flex; align-items: center; }
.pz-next .btn:hover { background: #000; color: #fff; }
.pz-next .btn-secondary { background: transparent; color: #1f2328; border: 1px solid rgba(31, 35, 40, 0.35); }
.pz-next .btn-secondary:hover { background: rgba(31, 35, 40, 0.06); color: #1f2328; }
.pz-next .actions { align-items: center; }

/* The tutor as proofreader: ink-wash highlights with small circled numbers
   on the sentence, and a numbered list of notes keyed to them — no boxes,
   no rules. The corrected line sits in a soft green wash. */
.pz-next .explain { --hl-good: var(--mark-g); --hl-amber: var(--mark-y); --hl-blue: #2f4d9c; }
.pz-next .explain-verdict { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.9rem; }
.pz-next .explain-verdict-detail { font-family: var(--serif); font-size: 1.05rem; margin-top: -0.6rem; }
.pz-next .explain-sentence { font-family: var(--serif); font-size: 1.35rem; line-height: 1.7; margin: 0 0 1.1rem; }
.pz-next .explain-sentence mark.hl {
  background: transparent; border: none; box-shadow: none; text-decoration: none; border-radius: 3px; padding: 0.05em 0.12em; margin: 0 -0.04em; color: inherit;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; mix-blend-mode: multiply;
}
.pz-next .explain-sentence mark.hl-good  { background: rgba(46, 139, 87, 0.22); }
.pz-next .explain-sentence mark.hl-amber { background: rgba(210, 154, 27, 0.28); }
.pz-next .explain-sentence mark.hl-blue  { background: rgba(47, 77, 156, 0.16); }
.pz-next .explain-sentence mark.hl[data-n]::after {
  content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; vertical-align: super;
  width: 1.05rem; height: 1.05rem; margin-left: 0.15rem; border-radius: 50%; font-family: var(--narrow); font-size: 0.68rem; font-weight: 700;
  color: #fff; line-height: 1; mix-blend-mode: normal;
}
.pz-next .explain-sentence mark.hl-good[data-n]::after  { background: var(--mark-g); }
.pz-next .explain-sentence mark.hl-amber[data-n]::after { background: var(--mark-y); }
.pz-next .explain-sentence mark.hl-blue[data-n]::after  { background: #2f4d9c; }
.pz-next .explain-sentence mark.hl.is-active { outline: 2px solid rgba(31, 35, 40, 0.35); outline-offset: 1px; }

.pz-next .ann-list { display: flex; flex-direction: column; gap: 0.85rem; margin: 0 0 1.1rem; }
.pz-next .ann { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.7rem; align-items: start; background: transparent; border: none; border-radius: 0; padding: 0; }
.pz-next .ann-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: 0.1rem;
  font-family: var(--narrow); font-weight: 700; font-size: 0.85rem; color: #fff; background: #6b7280;
}
.pz-next .ann-icon[data-n] { font-size: 0; }
.pz-next .ann-icon[data-n]::after { content: attr(data-n); font-size: 0.85rem; }
.pz-next .ann.hl-good .ann-icon  { background: var(--mark-g); }
.pz-next .ann.hl-amber .ann-icon { background: var(--mark-y); }
.pz-next .ann.hl-blue .ann-icon  { background: #2f4d9c; }
.pz-next .ann-body { line-height: 1.5; }
.pz-next .ann-term { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.pz-next .ann.is-dim { opacity: 0.45; }
.pz-next .ann.is-active .ann-body { text-decoration: none; }

.pz-next .corrected { background: rgba(46, 139, 87, 0.12); border: none; border-radius: 6px; padding: 0.85rem 1rem; margin: 0 0 1rem; }
.pz-next .corrected-label { font-family: var(--narrow); letter-spacing: 0.08em; font-size: 0.75rem; color: var(--mark-g); }
.pz-next .corrected-label .ann-icon { display: none; }
.pz-next .corrected-text { font-family: var(--serif); font-size: 1.25rem; margin: 0.25rem 0 0; }
.pz-next .explain-closing { font-family: var(--serif); font-style: italic; color: #4b5563; }

/* A correction the player hasn't opened: a small ink padlock, how many things
   the tutor marked (one dot each, in the ink of the mark under the word),
   and the way in. No notes are in the markup, so nothing is blurred. */
.pz-next turbo-frame.card { display: block; }
.pz-locked-note { display: flex; flex-direction: column; gap: 0.7rem; }
.pz-locked-note p { margin: 0; line-height: 1.45; }
.pz-locked-note__lead { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; display: flex; align-items: flex-start; gap: 0.5rem; }
.pz-lock { flex: none; color: #1f2328; opacity: 0.75; margin-top: 0.3em; }
.pz-locked-note__kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-family: var(--narrow); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; color: #4b5563; }
.pz-locked-note__kinds li { display: inline-flex; align-items: center; gap: 0.4rem; }
.pz-locked-note__dots { display: inline-flex; gap: 3px; }
.pz-dot { width: 10px; height: 10px; border-radius: 50%; mix-blend-mode: multiply; }
.pz-dot--y { background: var(--mark-y); }
.pz-dot--r { background: var(--mark-r); }
.pz-locked-note .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0.15rem 0 0; }
.pz-locked-note .pz-subscribe__form { margin-top: 0.1rem; }

/* "Play another" under the result: the deal button behind the same ink-ring
   overlay as grading (demo_progress_controller). */
.pz-more .pz-play--deal { position: relative; margin-top: 0.4rem; }
.pz-more .pz-play--deal form { display: inline-block; }

/* The retention ask: tomorrow's challenge by email, no password. */
/* The gate: a guest's first look at their result is a short card with
   nothing on it but the ask — a serif question, the email field, and the
   wave-off underneath in the same quiet narrow face as the strip links. */
.pz-gate { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 2px; }
.pz-gate__title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: pretty; }
.pz-gate__body { margin: 0; font-size: 0.95rem; color: #6b7280; line-height: 1.45; }
.pz-gate__form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pz-gate__form .pz-subscribe__input { flex: 1 1 200px; }
.pz-gate form:has(.pz-gate__skip) { display: inline-flex; align-self: flex-start; }
.pz-gate__skip, button.pz-gate__skip {
  align-self: flex-start; background: none; border: 0; border-radius: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--narrow); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: #6b7280;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(31, 35, 40, 0.3); text-decoration-thickness: 1px;
}
.pz-gate__skip:hover, button.pz-gate__skip:hover { color: #1f2328; text-decoration-color: #1f2328; background: none; border: 0; }
@media (max-width: 420px) { .pz-gate__title { font-size: 1.5rem; } }

.pz-subscribe { display: flex; flex-direction: column; gap: 0.6rem; }
.pz-subscribe--result { padding: 0; }
.pz-subscribe__text { display: flex; flex-direction: column; gap: 0.15rem; }
.pz-subscribe__text strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.pz-subscribe__form { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-subscribe__input {
  flex: 1 1 200px; min-height: 44px; font: inherit; font-size: 1.05rem; padding: 0 0.85rem;
  border: 1px solid rgba(31, 35, 40, 0.35); border-radius: 4px; background: #fff;
}
.pz-subscribe__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.pz-subscribe .btn-ink { white-space: nowrap; }
.pz-subscribe--home {
  margin-top: 0.25rem; padding: 14px 16px; background: var(--stock); border-radius: 6px;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4);
}
.pz-next .pz-subscribe--result { padding: 18px 20px; background: var(--stock); border-radius: 6px;
  background-image: radial-gradient(rgba(31, 35, 40, 0.035) 0.6px, transparent 0.6px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.08), 0 10px 22px -12px rgba(31, 35, 40, 0.4); }

/* Vocabulary hints: tappable words in the sentence, and the tray of hints
   bought (a Turbo frame under the sentence). */
.pz-sentence--tappable .pz-hint-word { cursor: pointer; border-bottom: 1px dotted rgba(31, 35, 40, 0.22); border-radius: 2px; transition: background 0.15s ease; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pz-sentence--tappable .pz-hint-word:hover, .pz-sentence--tappable .pz-hint-word.is-picked { background: var(--ink-soft); border-bottom-style: solid; border-bottom-color: var(--ink); }
/* An expression ("break room") is one tap: the underline runs under the whole
   of it, spaces included, so it reads as a unit before it is touched. */
.pz-sentence--tappable .pz-hint-word--unit { border-bottom-style: dashed; border-bottom-color: rgba(31, 35, 40, 0.4); }
.pz-hints { display: block; }
.pz-hints:empty { display: none; }
.pz-hints__prompt { margin: 0.35rem 0 0; font-size: 0.85rem; }
.pz-hints__left { white-space: nowrap; }
.pz-hints__alert { margin: 0.35rem 0 0; font-size: 0.9rem; color: #b8322a; }
.pz-hints__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-top: 0.5rem; padding: 0.55rem 0.7rem; background: var(--ink-soft); border-radius: 4px; }
.pz-hints__ask[hidden] { display: none; }
.pz-hints__question { font-family: var(--serif); font-size: 1.05rem; }
.pz-hints__busy { display: none; margin: 0.4rem 0 0; font-size: 0.9rem; align-items: center; gap: 0.5rem; }
.pz-hints[busy] .pz-hints__form { display: none; }
.pz-hints[busy] .pz-hints__busy { display: flex; }
.pz-hint { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 4px; background: rgba(255, 255, 255, 0.55); border: 1px dashed rgba(31, 35, 40, 0.25); }
.pz-hint__head { margin: 0; font-size: 0.9rem; }
.pz-hint__unit { font-family: var(--serif); font-size: 1.05rem; }
.pz-hint__sense { margin: 0.15rem 0 0; font-size: 0.95rem; }
.pz-hint__options { margin: 0.35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.pz-hint__options li { font-size: 0.95rem; }
.pz-hint__term { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.pz-hint__note { margin: 0.3rem 0 0; font-size: 0.85rem; }
.pz-hints-used { margin: 0; }
.pz-hints-used__item { white-space: nowrap; }

/* Legal pages (privacy): a readable column on the table. */
.legal { max-width: 46rem; margin: 2rem auto 4rem; padding: 2rem clamp(1rem, 4vw, 2.5rem); background: var(--stock, #faf8f2); border-radius: 6px; line-height: 1.6; }
.legal h1 { font-family: var(--serif); font-size: 2.2rem; margin: 0 0 .25rem; }
.legal h2 { font-family: var(--serif); font-size: 1.35rem; margin: 2rem 0 .5rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .4rem 0; }

/* Grammar courses (Course): lessons are sheets of card stock on the table,
   the explanation in the serif, the sentences to translate as a numbered list
   with the play button (or the inked score) at the end of each line. */
.crs-catalog, .crs-body { max-width: 46rem; margin: 0 auto; padding: 0 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.crs-catalog .card, .crs-body .card, .pz-next .crs-next {
  background: var(--stock); border: none; border-radius: 6px; padding: 22px 22px 18px; position: relative;
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.08), 0 6px 18px rgba(31, 35, 40, 0.06);
}
.crs-catalog .card::before, .crs-body .card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stock-line); border-radius: 3px; pointer-events: none; }
.crs-catalog .card > *, .crs-body .card > * { position: relative; }
.crs-row__meta, .crs-lesson__meta, .crs-offer__eyebrow { margin: 0 0 0.35rem; font-family: var(--narrow); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.crs-offer__eyebrow a { color: inherit; }
.crs-row__title, .crs-lesson__title { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 0.4rem; }
.crs-row__title a { color: var(--fg); text-decoration: none; }
.crs-row__title a:hover { text-decoration: underline; }
.crs-row p { margin: 0 0 0.4rem; }
.crs-row__status { margin: 0.2rem 0 0 !important; }
.crs-buy h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 0.4rem; }
.crs-buy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.8rem 0 0.4rem; }
.crs-buy__actions form { margin: 0; }
.crs-lesson__text { font-family: var(--serif); font-size: 1.12rem; line-height: 1.55; }
.crs-lesson__text p { margin: 0 0 0.8rem; }
.crs-lesson__text ul { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.crs-lesson__text li { margin: 0.25rem 0; }
.crs-examples { list-style: none; margin: 0.4rem 0 1rem; padding: 0.7rem 0.9rem; border-radius: 4px; background: rgba(255, 255, 255, 0.6); border: 1px dashed rgba(31, 35, 40, 0.22); display: flex; flex-direction: column; gap: 0.45rem; }
.crs-examples__es { font-family: var(--serif); font-size: 1.12rem; display: block; }
.crs-examples__en { font-size: 0.92rem; display: block; }
.crs-practice__head { font-family: var(--narrow); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 1.1rem 0 0.4rem; }
.crs-sentences { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; }
.crs-sentence { padding: 0.55rem 0; border-bottom: 1px dashed rgba(31, 35, 40, 0.18); }
.crs-sentence:last-child { border-bottom: none; }
.crs-sentence { display: list-item; }
.crs-sentence__text { font-family: var(--serif); font-size: 1.08rem; }
.crs-sentence__action { float: right; margin-left: 0.8rem; }
.crs-sentence__action form { display: inline; margin: 0; }
.crs-sentence::after { content: ""; display: block; clear: both; }
.crs-score { display: inline-block; min-width: 3.2rem; text-align: center; font-family: var(--narrow); font-weight: 700; font-size: 0.95rem; color: var(--score); border: 2px solid var(--score); border-radius: 999px; padding: 0.05rem 0.5rem; transform: rotate(-4deg); }
.crs-card-lesson { margin: 0.6rem 0 0; }
.crs-pricing { max-width: 46rem; margin: 0 auto; }
.crs-pricing h2 { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 0.4rem; }
.crs-pricing__list { columns: 2 16rem; padding-left: 1.1rem; margin: 0.6rem 0 1.2rem; }
.crs-pricing__list li { margin: 0.25rem 0; break-inside: avoid; }
@media (max-width: 560px) {
  .crs-sentence__action { float: none; display: block; margin: 0.35rem 0 0; }
  .crs-row__title, .crs-lesson__title { font-size: 1.3rem; }
}
/* Recommended courses (CourseRecommendation): on the review's score page and atop /courses. */
.crs-recs h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 0.5rem; }
.crs-recs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crs-recs__item { padding: 0.6rem 0; border-bottom: 1px dashed rgba(31, 35, 40, 0.18); display: flex; flex-direction: column; gap: 0.15rem; }
.crs-recs__item:last-child { border-bottom: none; }
.crs-recs__title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--fg); }
.pz-next .crs-recs { background: var(--stock); border: none; border-radius: 6px; padding: 20px 20px 16px; }
/* The course pitch inside the tutor's correction: a ruled-off section of the same card. */
.pz-correction .crs-offer { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed rgba(31, 35, 40, 0.25); }
.crs-offer__title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 0 0 0.3rem; }
.pz-correction .crs-offer .actions { margin: 0.6rem 0 0.4rem; }

/* ===================================================================
   Situations — manga. One frame at a time: the day's panel with the
   native's face in the state the referee chose, the dialogue in bubbles,
   your bubble the input. Context beside the frame as cards (a column on a
   wide screen, a strip on a phone). Rounded friendly type (Nunito) for
   the bubbles; the app's narrow caps for labels; the stamp at the end.
   =================================================================== */
:root { --bubble: 'Nunito', 'Segoe UI', system-ui, sans-serif; --panel: #fdfcf8; }
.mg, .marketing main > section.mg { max-width: 1120px; margin: 0 auto; padding: 1rem 1rem 2.5rem; display: flex; flex-direction: column; gap: 14px; }
.mg-muted { color: #6b7280; }
.mg-strip, .mg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--narrow); font-size: 0.95rem; color: #6b7280; flex-wrap: wrap; }
.mg-head__title strong { color: #1f2328; font-family: var(--bubble); font-weight: 800; font-size: 1.05rem; }
.mg-note { margin: 0; font-family: var(--narrow); color: #1f2328; }
.mg-eyebrow { font-family: var(--bubble); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #6b7280; }
.mg-card__lbl { margin: 0 0 4px; font-family: var(--narrow); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; }
.mg-card { background: #fff; border: 2px solid #1f2328; border-radius: 14px; padding: 10px 12px; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 3px 0 rgba(31, 35, 40, 0.12); }
.mg-card p { margin: 0; }
.mg-card--catch { border-style: dashed; }
.mg-card--now { background: #fff8e6; }
.mg-card--face { display: flex; gap: 10px; align-items: center; }
.mg-card--face img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #1f2328; object-fit: cover; flex: none; background: var(--panel); }
.mg-btn, input[type="submit"].mg-btn, button.mg-btn, a.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.3rem; border: 2px solid #1f2328; border-radius: 999px;
  background: #1f2328; color: #fff; font-family: var(--bubble); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
}
.mg-btn:hover, button.mg-btn:hover, a.mg-btn:hover, input[type="submit"].mg-btn:hover { background: #000; color: #fff; }
.mg-btn--ghost, button.mg-btn--ghost, a.mg-btn--ghost, input[type="submit"].mg-btn--ghost { background: #fff; color: #1f2328; }
.mg-btn--ghost:hover, button.mg-btn--ghost:hover, a.mg-btn--ghost:hover { background: #f3f2ee; color: #1f2328; }
.mg-btn--small, input[type="submit"].mg-btn--small { min-height: 38px; padding: 0 1rem; font-size: 0.85rem; }
.mg-link { background: none; border: 0; padding: 0; font-family: var(--narrow); font-weight: 600; font-size: 0.9rem; color: #6b7280; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mg-input { width: 100%; box-sizing: border-box; font-family: var(--bubble); font-weight: 700; font-size: 1rem; padding: 0.5rem 0.7rem; border: 2px solid #1f2328; border-radius: 10px; background: #fff; color: #1f2328; }
.mg-inline-form { display: inline; }
.mg-foot { margin: 0; padding: 0 6px; font-family: var(--narrow); font-size: 0.9rem; color: #6b7280; }

/* The cover */
.mg--cover { max-width: 560px; }
.mg-cover { position: relative; border: 3px solid #1f2328; border-radius: 10px; overflow: hidden; background: var(--panel); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: 0 8px 0 rgba(31, 35, 40, 0.08); }
.mg-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.mg-cover__title { position: relative; padding: 22px 18px 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-height: 290px; }
.mg-title { margin: 0; font-family: var(--bubble); font-weight: 900; font-size: 2.4rem; line-height: 0.95; letter-spacing: -0.02em; color: #1f2328; text-shadow: 3px 3px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; text-transform: uppercase; max-width: 80%; }
.mg-goal { margin: 6px 0 0; font-family: var(--bubble); font-weight: 700; font-size: 1rem; line-height: 1.3; background: #fff; border: 2px solid #1f2328; border-radius: 10px; padding: 6px 10px; max-width: 86%; }
/* Phone: the art on top (its empty title band cropped off), the text below. */
@media (max-width: 719px) {
  .mg-cover__art { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-position: center bottom; }
  .mg-cover__title { min-height: 0; padding: 16px 16px 18px; }
  .mg-cover--blank .mg-cover__title { min-height: 220px; }
}
.mg-setup { margin: 4px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.45; color: var(--fg); background: rgba(253, 252, 248, 0.92); border-radius: 8px; padding: 6px 10px; }
.mg-card--setup p { font-size: 0.95rem; line-height: 1.45; }
/* Wide screens: the cover stands beside the title as a real portrait (the
   art's empty top band is for the phone, where the title sits over it). */
@media (min-width: 720px) {
  .mg-cover { flex-direction: row; min-height: 0; }
  .mg-cover--blank { flex-direction: column; min-height: 300px; }
  .mg-cover__art { position: static; flex: 0 0 auto; width: 38%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; object-position: center bottom; }
  .mg-cover--blank .mg-cover__art { display: none; }
  .mg-cover__title { flex: 1; justify-content: center; padding: 28px 28px 24px; min-height: 0; }
}
.mg-cover__drawing { position: absolute; right: 10px; bottom: 8px; margin: 0; font-family: var(--narrow); font-size: 0.8rem; color: #6b7280; background: rgba(255,255,255,0.85); border-radius: 6px; padding: 2px 8px; }
.mg-brief { display: flex; flex-direction: column; gap: 10px; }
.mg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-chip { display: inline-flex; align-items: center; gap: 6px; border: 2px solid #1f2328; border-radius: 999px; padding: 4px 12px 4px 4px; font-family: var(--bubble); font-weight: 800; font-size: 0.85rem; background: #fff; }
.mg-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid #1f2328; }
.mg-chip em { font-style: normal; font-weight: 600; color: #6b7280; }
.mg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.mg-cards .mg-card { font-size: 0.9rem; }
.mg-moves { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 4px; font-family: var(--bubble); font-weight: 700; }
.mg-action { display: flex; flex-direction: column; gap: 10px; }
.mg-action__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-gender { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mg-gender__summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.mg-gender__summary::-webkit-details-marker { display: none; }
.mg-gender[open] .mg-gender__summary .mg-link { display: none; }
.mg-gender__opt--face { padding-left: 4px; }
.mg-gender__opt img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid #1f2328; }
.mg-gender__remember { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: #6b7280; cursor: pointer; }
.mg-gender__remember input { accent-color: #1f2328; margin: 0; }
.mg-gender__matters { color: var(--mark-r); text-transform: none; letter-spacing: 0; font-weight: 400; }
.mg-gender__row { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-gender__opt { display: inline-flex; align-items: center; gap: 6px; border: 2px solid rgba(31, 35, 40, 0.35); border-radius: 999px; padding: 5px 10px; cursor: pointer; font-family: var(--bubble); font-weight: 700; font-size: 0.85rem; background: #fff; }
.mg-gender__opt input { accent-color: #1f2328; margin: 0; }
.mg-gender__opt:has(input:checked) { border-color: #1f2328; }
.mg-mine { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px 0; }
.mg-mine__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--narrow); font-size: 0.95rem; }
.mg-mine__list a { color: #1f2328; font-weight: 700; }

/* Dots */
.mg-dots { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 8px; }
.mg-dots li, .mg-dots i { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #1f2328; background: #fff; display: inline-grid; place-items: center; font-family: var(--bubble); font-weight: 800; font-size: 0.74rem; line-height: 1; color: #1f2328; cursor: pointer; }
.mg-dots li span { display: block; transform: translateY(0.5px); }
.mg-dots li.is-done { background: var(--mark-g); border-color: var(--mark-g); color: #fff; }
.mg-dots li.is-current { background: #1f2328; color: #fff; }
.mg-dots li:not(.is-done):not(.is-current) { color: rgba(31, 35, 40, 0.45); border-color: rgba(31, 35, 40, 0.35); cursor: default; }
.mg-dots--empty i { width: 12px; height: 12px; cursor: default; }

/* The stage: rail + panel */
.mg-stage { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.mg-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; }
.mg-rail .mg-card { font-size: 0.88rem; }
.mg-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mg-panel--solo { max-width: 760px; width: 100%; margin: 0 auto; position: relative; }
.mg-frames { position: relative; }
.mg-frame { position: relative; margin: 0; aspect-ratio: 4 / 3; border: 3px solid #1f2328; border-radius: 8px; overflow: hidden; background: var(--panel); box-shadow: 0 8px 0 rgba(31, 35, 40, 0.08); animation: mg-in 0.35s ease-out; }
.mg-frame[hidden] { display: none; }
.mg-frame--blank { background: repeating-linear-gradient(135deg, #fdfcf8 0 14px, #f3f2ee 14px 28px); }
.mg-frame__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-frame__no:empty { display: none; }
.mg-frame__no { position: absolute; left: 10px; top: 8px; font-family: var(--bubble); font-weight: 900; font-size: 0.8rem; color: #1f2328; background: #fff; border: 2px solid #1f2328; border-radius: 6px; padding: 1px 7px; }
@keyframes mg-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-frame { animation: none; } }
.mg-bubble { position: absolute; max-width: 46%; background: #fff; border: 2.5px solid #1f2328; border-radius: 20px; padding: 10px 14px; font-family: var(--bubble); font-weight: 800; font-size: 1.05rem; line-height: 1.3; color: #1f2328; box-shadow: 0 4px 0 rgba(31, 35, 40, 0.12); margin: 0; }
.mg-bubble::after { content: ""; position: absolute; width: 18px; height: 18px; background: #fff; border-right: 2.5px solid #1f2328; border-bottom: 2.5px solid #1f2328; transform: rotate(45deg); bottom: -11px; }
.mg-bubble--them { right: 4%; top: 5%; }
.mg-bubble--them::after { right: 30px; }
.mg-bubble--you { left: 4%; top: 5%; }
.mg-bubble--you::after { left: 30px; }
.mg-bubble--said { font-weight: 600; font-size: 0.9rem; background: var(--panel); max-width: 40%; }
.mg-bubble--them.mg-bubble--english { border-style: double; border-width: 4px; }
.mg-bubble__who { display: block; font-family: var(--narrow); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; margin-bottom: 2px; }
.mg-sfx { position: absolute; right: 22%; top: 42%; font-family: var(--bubble); font-weight: 900; font-size: 1rem; letter-spacing: 0.1em; color: #1f2328; background: #fff; border: 2px solid #1f2328; border-radius: 6px; padding: 2px 8px; transform: rotate(-6deg); }
.mg-caption { position: absolute; left: 10px; bottom: 10px; margin: 0; max-width: 70%; background: #fff; border: 2px solid #1f2328; padding: 4px 8px; font-family: var(--narrow); font-weight: 600; font-size: 0.85rem; color: #1f2328; }
/* Your bubble: the input under the frame, drawn as a bubble pointing up at you. */
.mg-bubble-wrap { position: relative; }
.mg-bubble-wrap.is-leafing { opacity: 0.35; pointer-events: none; }
.mg-take { position: relative; }
.mg-bubble--input { position: relative; max-width: none; border-style: dashed; border-color: var(--mark-r); box-shadow: none; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.mg-bubble--input::after { display: none; }
.mg-bubble--input::before { content: ""; position: absolute; left: 36px; top: -12px; width: 18px; height: 18px; background: #fff; border-left: 2.5px dashed var(--mark-r); border-top: 2.5px dashed var(--mark-r); transform: rotate(45deg); }
.mg-textarea { width: 100%; box-sizing: border-box; font-family: var(--bubble); font-weight: 700; font-size: 1.1rem; line-height: 1.3; border: 0; background: transparent; resize: none; color: #1f2328; padding: 0; }
.mg-textarea::placeholder { color: #b0b4b9; font-weight: 600; }
.mg-textarea:focus { outline: none; }
.mg-bubble__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mg-prompted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mg-prompter__note { margin: 0; font-family: var(--narrow); font-size: 0.85rem; color: #6b7280; font-style: italic; }
.mg-alert { margin: 0 0 6px; font-family: var(--narrow); color: var(--mark-r); font-size: 0.9rem; }
.mg-prompter { margin-top: 8px; }
.mg-prompter[hidden] { display: none; }
.mg-prompter__tray { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #fff; border: 2px solid rgba(31, 35, 40, 0.35); border-radius: 14px; font-size: 0.9rem; }
.mg-prompter__form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mg-prompter__form .mg-input { flex: 1 1 200px; }
/* While the referee is drawing the next frame: the input bubble goes quiet
   and a manga THOUGHT bubble (cloud with a trail of little circles) pops up
   at the frame's edge with three ink dots blinking in turn — the native is
   thinking it over, not the app spinning. */
.mg-take .demo-busy, .mg-prompter__tray .demo-busy { display: none; }
.mg-take.is-busy .mg-bubble--input, .mg-prompter__tray.is-busy .mg-prompter__form { opacity: 0.45; }
.mg-take.is-busy .demo-busy, .mg-prompter__tray.is-busy .demo-busy { display: inline-flex; align-items: center; gap: 10px; position: absolute; right: 18px; top: -26px; z-index: 2; background: #fff; border: 2.5px solid #1f2328; border-radius: 999px; padding: 8px 16px 8px 14px; font-family: var(--bubble); font-weight: 800; font-size: 0.92rem; color: #1f2328; box-shadow: 0 3px 0 #1f2328; }
.mg-take.is-busy .demo-busy::before, .mg-take.is-busy .demo-busy::after { content: ""; position: absolute; background: #fff; border: 2.5px solid #1f2328; border-radius: 50%; }
.mg-take.is-busy .demo-busy::before { width: 12px; height: 12px; right: -4px; top: -16px; }
.mg-take.is-busy .demo-busy::after { width: 7px; height: 7px; right: -14px; top: -28px; }
.mg-think { display: inline-flex; gap: 4px; align-items: flex-end; height: 14px; }
.mg-think i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #1f2328; animation: mg-think 1.1s ease-in-out infinite; }
.mg-think i:nth-child(2) { animation-delay: 0.18s; }
.mg-think i:nth-child(3) { animation-delay: 0.36s; }
@keyframes mg-think { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mg-think i { animation: none; opacity: 0.8; } }
/* THE END */
.mg-end { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 0 2px; }
.mg-end__title { margin: 0; font-family: var(--bubble); font-weight: 900; font-size: 1.5rem; line-height: 1.15; }
.mg-end__which { margin: 0; font-family: var(--bubble); font-weight: 700; color: #6b7280; }
/* The result: the stamp beside the ending in one card, then the strip as a
   page — every frame in order, nothing to leaf. */
.mg-verdict { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; max-width: 720px; margin: 0 auto 16px; border: 3px solid #1f2328; border-radius: 10px; background: var(--panel); padding: 14px 20px 14px 14px; box-shadow: 0 8px 0 rgba(31, 35, 40, 0.08); }
.mg-verdict__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mg-verdict__line { margin: 6px 0 0; color: #4b5563; font-size: 0.98rem; line-height: 1.4; }
.mg-page { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 720px; margin: 0 auto 18px; }
.mg-page .mg-frame { width: 100%; animation: none; }
.mg-stamp { width: 150px; height: 150px; flex: none; }
/* Phone frames: the bubbles can't share the sky side by side, so the frame
   becomes a strip — the bubbles stacked in a cream band, the art under them
   (cropped from the bottom, where the people are). */
@media (max-width: 560px) {
  .mg-frame { aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; padding: 34px 10px 10px; }
  .mg-frame__art { position: static; order: 2; width: calc(100% + 20px); margin: 0 -10px -10px; height: min(52vw, 300px); aspect-ratio: auto; object-fit: cover; object-position: center bottom; }
  .mg-frame--blank .mg-frame__art { display: none; }
  .mg-bubble--you, .mg-bubble--them { position: static; max-width: 86%; order: 1; }
  .mg-bubble--them { align-self: flex-end; }
  .mg-bubble--said { max-width: 86%; }
  .mg-sfx { top: auto; bottom: 26%; right: 8%; }
  .mg-caption { max-width: 80%; }
  .mg-verdict { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .mg-stamp { width: 110px; height: 110px; }
  .mg-end__title { font-size: 1.25rem; }
}
.mg-stamp .stamp { width: 100%; height: 100%; display: block; }
/* Result cards */
.mg--result .mg-card { max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.mg-beats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-beats li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 7px 0; border-top: 1px dashed rgba(31, 35, 40, 0.18); }
.mg-beats li:first-child { border-top: 0; }
.mg-beats__mark { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px dashed rgba(31, 35, 40, 0.3); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: #fff; }
.mg-beats li.is-hit .mg-beats__mark { border: 0; background: var(--mark-g); }
.mg-cast { display: flex; flex-direction: column; gap: 8px; }
.mg-cast__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mg-cast__list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed rgba(31, 35, 40, 0.14); flex-wrap: wrap; font-family: var(--bubble); font-weight: 700; }
.mg-cast__list li:first-child { border-top: 0; }
.mg-cast__list li.is-me span:first-child { font-weight: 900; }
.mg-notes { display: flex; flex-direction: column; gap: 10px; max-width: 760px; width: 100%; margin: 0 auto; --hl-good: var(--mark-g); --hl-amber: var(--mark-y); --hl-blue: #2f4d9c; }
.mg-note { display: flex; flex-direction: column; gap: 8px; }
.mg-notes .explain-sentence { font-family: var(--bubble); font-weight: 700; font-size: 1.05rem; line-height: 1.7; margin: 0; }
.mg-notes .explain-sentence mark.hl { background: transparent; border: none; box-shadow: none; border-radius: 3px; padding: 0.05em 0.12em; margin: 0 -0.04em; color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; mix-blend-mode: multiply; }
.mg-notes .explain-sentence mark.hl-good { background: rgba(46, 139, 87, 0.22); }
.mg-notes .explain-sentence mark.hl-amber { background: rgba(210, 154, 27, 0.28); }
.mg-notes .explain-sentence mark.hl-blue { background: rgba(184, 50, 42, 0.18); }
.mg-notes .explain-sentence mark.hl[data-n]::after { content: attr(data-n); display: inline-flex; align-items: center; justify-content: center; vertical-align: super; width: 1rem; height: 1rem; margin-left: 0.15rem; border-radius: 50%; font-family: var(--narrow); font-size: 0.65rem; font-weight: 700; color: #fff; line-height: 1; mix-blend-mode: normal; }
.mg-notes .explain-sentence mark.hl-good[data-n]::after { background: var(--mark-g); }
.mg-notes .explain-sentence mark.hl-amber[data-n]::after { background: var(--mark-y); }
.mg-notes .explain-sentence mark.hl-blue[data-n]::after { background: var(--mark-r); }
.mg-note__fix { margin: 0; background: rgba(46, 139, 87, 0.13); border-radius: 8px; padding: 6px 10px; font-family: var(--bubble); font-weight: 700; }
.mg-note__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; line-height: 1.5; }
.mg-note__items li { display: grid; grid-template-columns: 1.3rem 1fr; gap: 8px; align-items: start; cursor: pointer; }
.mg-note__n { display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; margin-top: 2px; font-family: var(--narrow); font-weight: 700; font-size: 0.75rem; color: #fff; background: #6b7280; }
.mg-note__items li.hl-good .mg-note__n { background: var(--mark-g); }
.mg-note__items li.hl-amber .mg-note__n { background: var(--mark-y); }
.mg-note__items li.hl-blue .mg-note__n { background: var(--mark-r); }
.mg-note__items li.is-dim { opacity: 0.45; }
.mg-note__note { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.mg-course__title { font-family: var(--bubble); font-weight: 800; font-size: 1.05rem; }
.mg-card--wait { max-width: 760px; width: 100%; margin: 0 auto; box-sizing: border-box; }
@media (max-width: 760px) {
  .mg-stage { grid-template-columns: 1fr; gap: 10px; }
  .mg-rail { position: static; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; order: -1; }
  .mg-rail .mg-card { flex: 0 0 auto; max-width: 240px; font-size: 0.82rem; padding: 8px 10px; }
  .mg-bubble { max-width: 58%; font-size: 0.92rem; padding: 8px 11px; }
  .mg-bubble--said { max-width: 50%; font-size: 0.8rem; }
  .mg-title { font-size: 2rem; }
  .mg-stamp { width: 110px; height: 110px; }
}