/* === Recall page — game skin =========================================
   Standalone /<script>/recall only. Every rule is scoped to body.recall-app
   (baked inline by lib/page_composers/recall_app.py and re-added by
   js/games/recall-app.js), so the row-page Recall modal, /review and the
   kanji recall pages keep their existing look.

   Loads AFTER css/games/recall.css and overrides its embedded-menu rules.
   Two surfaces:
     1. MENU  — .recall-intro--embedded: a "level path" of ring-gauge nodes
        (families), bold lesson cards with R/W bars, a mastery ring and a
        gradient Start CTA over a soft spotlight backdrop.
     2. DRILL — #canvas-wrap + overlays: spotlight stage with a magenta
        glow ring, a per-row step strip, an XP-style advance bar, a floating
        result pop and hit/miss animations; pill toolbar; restyled KanaNav.
   ====================================================================== */

body.recall-app {
    /* Skin accent = the site's blue (was the magenta recall accent). */
    --ra-accent:   var(--accent, #20507e);
    --ra-glow:     rgba(32, 80, 126, 0.22);
    --ra-tint:     rgba(32, 80, 126, 0.06);
    --ra-line:     rgba(32, 80, 126, 0.30);
    --ra-blue:     var(--accent, #20507e);
    --ra-green:    var(--green, #2f8f5b);
    --ra-green-bg: rgba(47, 143, 91, 0.12);
    --ra-red:      var(--red, #b1322a);
    --ra-gold:     #e0a71a;
    --ra-track:    rgba(35, 32, 38, 0.09);
    --ra-node:     var(--inset, #fcfaf5);
    --ra-card:     var(--card, #faf6ee);
    --ra-shadow:   0 10px 28px rgba(40, 50, 70, 0.08);
    --ra-grad:     linear-gradient(135deg, #20507e 0%, #2f6c9e 50%, #3d9bf0 100%);
}
html.dark body.recall-app {
    --ra-glow:     rgba(110, 167, 216, 0.28);
    --ra-tint:     rgba(110, 167, 216, 0.10);
    --ra-line:     rgba(110, 167, 216, 0.34);
    --ra-grad:     linear-gradient(135deg, #4f8fd0 0%, #6ea7d8 50%, #9ad4ff 100%);
    --ra-track:    rgba(232, 234, 242, 0.11);
    --ra-gold:     #f2c14e;
    --ra-green-bg: rgba(80, 216, 144, 0.16);
    --ra-shadow:   0 10px 28px rgba(0, 0, 0, 0.35);
}

/* ─────────────────────────────────────────────────────────────────────
   0. PAGE FRAME — let the exercise fill the card
   The page <h1> ("Recall — Write From Memory" + script badge) duplicates
   the "Recall Mode" title inside the menu frame, so it is visually hidden
   (kept in the DOM for search engines, translations and screen readers).
   The practice section's padding shrinks to a slim inset and the script
   toggle moves into the frame header's top-right corner.
   ───────────────────────────────────────────────────────────────────── */
body.recall-app .practice--lead .lesson-head--rowhead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
body.recall-app .practice--lead {
    margin-top: 10px;
    padding: 14px 12px 14px;
}
/* Drill screen: the script toggle sits in normal flow, centred above the
   canvas stage (its own inline flex styles centre it). */
body.recall-app .recall-script-toggle {
    margin: 2px 0 14px !important;
}
/* On the menu screen the intro frame IS the panel — drop the practice
   section's own box so there is a single edge, not a frame in a frame —
   and the toggle moves into the frame header's top-right corner. */
body.recall-app.recall-menu-active .practice--lead {
    background: transparent;
    border-color: transparent;
    padding: 0;
}
body.recall-app.recall-menu-active .recall-script-toggle {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 4;
    margin: 0 !important;
}
@media (max-width: 760px) {
    body.recall-app .practice--lead { padding: 8px 6px 10px; }
    body.recall-app.recall-menu-active .recall-script-toggle {
        position: static;
        margin: 2px 0 10px !important;
    }
    /* toggle is above the frame here, so the title needs no clearance */
    body.recall-app .recall-intro--embedded .recall-intro-title { padding-right: 0; }
}

/* Mobile fullscreen (js/game-fs.js pins .practice--lead as .gfs--fs).
   The ⤢ exit button only shows while pinned (GameFS toggles [hidden]). */
body.recall-app .recall-fs-exit {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 1002;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2, #d7cdb6);
    background: var(--ra-node);
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(40, 50, 70, 0.12);
}
body.recall-app .recall-fs-exit[hidden] { display: none; }
body.recall-app .practice--lead.gfs--fs {
    /* pinned: the section is the screen — keep its own panel look off */
    background: var(--page, #ede7da);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
body.recall-app .practice--lead.gfs--fs .recall-menu-host { margin-top: 30px; }
body.recall-app.recall-menu-active .practice--lead.gfs--fs {
    justify-content: flex-start;
    padding-top: 58px;   /* clear the ⤢ button before the centred toggle row */
}
body.recall-app .recall-intro--embedded .recall-intro-title { white-space: nowrap; }
body.recall-app .practice--lead.gfs--fs .recall-intro--embedded { border-radius: 16px; }

/* ─────────────────────────────────────────────────────────────────────
   1. MENU SCREEN
   ───────────────────────────────────────────────────────────────────── */

/* Frame: soft spotlight backdrop + a huge 憶 ("memory") watermark. */
body.recall-app .recall-intro--embedded {
    position: relative;
    overflow: hidden;
    max-width: none;
    padding: 20px 24px 24px;
    border-radius: 22px;
    border: 1px solid var(--line-2, #d7cdb6);
    background:
        radial-gradient(ellipse at 12% 0%,   var(--ra-tint) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, var(--accent-bg, rgba(32,80,126,0.08)) 0%, transparent 50%),
        var(--ra-card);
    column-gap: 30px;
}
body.recall-app .recall-intro--embedded::before {
    content: '憶';
    position: absolute;
    right: -18px;
    top: -34px;
    font-family: var(--font-kana, 'Noto Serif JP', serif);
    font-weight: 700;
    font-size: 250px;
    line-height: 1;
    color: var(--ra-accent);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
}
html.dark body.recall-app .recall-intro--embedded::before { opacity: 0.09; }

/* Header: gradient display title + tagline. */
body.recall-app .recall-intro--embedded .recall-intro-title {
    padding-right: 300px;
    font-family: var(--font-display, 'Newsreader', serif);
    font-weight: 600;
    font-size: 2.15rem;
    letter-spacing: -0.015em;
    line-height: 1.05;
    margin: 0 0 4px;
    background: var(--ra-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    width: max-content;
    max-width: 100%;
}
body.recall-app .recall-intro--embedded .recall-intro-subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-2, #d7cdb6);
}

/* Section labels: small caps chips. */
body.recall-app .recall-intro--embedded .recall-intro-section-label {
    display: inline-block;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    margin-bottom: 10px;
}

/* --- Families → level path ---------------------------------------- */
body.recall-app .recall-intro--embedded #recall-intro-families-section {
    padding-right: 22px;
}
body.recall-app .recall-intro--embedded #recall-intro-families {
    gap: 6px;
    padding: 2px 6px 2px 2px;
    max-height: min(470px, 64vh);
}
body.recall-app .recall-intro--embedded .recall-intro-family {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 7px 10px 12px 8px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* path connector between nodes */
body.recall-app .recall-intro--embedded .recall-intro-family::after {
    content: '';
    position: absolute;
    left: 26px;
    top: calc(100% - 3px);
    width: 2px;
    height: 12px;
    background: var(--ra-track);
    pointer-events: none;
}
body.recall-app .recall-intro--embedded .recall-intro-family:last-child::after { display: none; }
body.recall-app .recall-intro--embedded .recall-intro-family.complete::after { background: var(--ra-green); }

body.recall-app .recall-intro--embedded .recall-intro-family:hover {
    background: var(--ink-hover);
    transform: translateX(2px);
}
body.recall-app .recall-intro--embedded .recall-intro-family.selected,
body.recall-app .recall-intro--embedded .recall-intro-family.untouched.selected {
    background: var(--ra-tint);
    border-color: var(--ra-line);
    box-shadow: 0 0 0 3px var(--ra-glow), var(--ra-shadow);
    opacity: 1;
    transform: translateX(2px);
}
body.recall-app .recall-intro--embedded .recall-intro-family.untouched { opacity: 0.62; border-style: solid; }
body.recall-app .recall-intro--embedded .recall-intro-family.untouched:hover { opacity: 0.95; }

/* the ring node: conic progress with the level number inside */
body.recall-app .recall-intro-family-ring {
    display: grid;
    place-items: center;
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: conic-gradient(var(--ra-accent) calc(var(--p, 0) * 1%), var(--ra-track) 0);
    transition: transform 0.15s;
}
body.recall-app .recall-intro-family-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--ra-node);
}
body.recall-app .recall-intro-family-ring b {
    position: relative;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
body.recall-app .recall-intro-family.complete .recall-intro-family-ring {
    background: var(--ra-green);
    box-shadow: 0 0 0 3px var(--ra-green-bg);
}
body.recall-app .recall-intro-family.complete .recall-intro-family-ring::before { display: none; }
body.recall-app .recall-intro-family.complete .recall-intro-family-ring b { color: #fff; font-size: 15px; }
body.recall-app .recall-intro-family.untouched .recall-intro-family-ring::before {
    border: 1.5px dashed var(--ra-track);
    inset: 3px;
}
body.recall-app .recall-intro-family.selected .recall-intro-family-ring { transform: scale(1.08); }
body.recall-app .recall-intro-family.selected .recall-intro-family-ring b { color: var(--ra-accent); }
body.recall-app .recall-intro-family.selected.complete .recall-intro-family-ring b { color: #fff; }

/* name + count share the second column */
body.recall-app .recall-intro-family-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
body.recall-app .recall-intro--embedded .recall-intro-family-name {
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    text-transform: lowercase;
}
body.recall-app .recall-intro--embedded .recall-intro-family.selected .recall-intro-family-name { color: var(--ra-accent); }
body.recall-app .recall-intro--embedded .recall-intro-family.complete .recall-intro-family-name { color: var(--ra-green); }
body.recall-app .recall-intro--embedded .recall-intro-family-count { font-size: 0.74rem; font-weight: 600; }

/* per-row strip lives under the name column only */
body.recall-app .recall-intro--embedded .recall-intro-family-bar {
    left: 56px;
    right: 10px;
    bottom: 6px;
    height: 3px;
    background: var(--ra-track);
}
body.recall-app .recall-intro-family-bar i { background: var(--ra-accent); }
body.recall-app .recall-intro-family.complete .recall-intro-family-bar i { background: var(--ra-green); }

/* --- Lesson cards --------------------------------------------------- */
body.recall-app .recall-intro--embedded .recall-intro-chars {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 10px;
}
body.recall-app .recall-intro--embedded .recall-intro-char {
    position: relative;
    overflow: hidden;
    min-height: 118px;
    padding: 14px 10px 10px;
    gap: 8px;
    border-radius: 16px;
    border: 1px solid var(--line-2, #d7cdb6);
    background: var(--ra-node);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 4px 14px rgba(40, 50, 70, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
html.dark body.recall-app .recall-intro--embedded .recall-intro-char {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 14px rgba(0, 0, 0, 0.25);
}
body.recall-app .recall-intro--embedded .recall-intro-char:hover {
    transform: translateY(-3px);
    border-color: var(--ra-line);
    box-shadow: 0 12px 26px var(--ra-glow);
    background: var(--ra-node);
}
body.recall-app .recall-intro--embedded .recall-intro-char:active { transform: translateY(-1px) scale(0.98); }
body.recall-app .recall-intro--embedded .recall-intro-char.learned {
    border-color: var(--green-border);
    background: linear-gradient(180deg, var(--ra-green-bg), transparent 70%), var(--ra-node);
}
body.recall-app .recall-intro--embedded .recall-intro-char.due:not(.learned) {
    border-color: var(--orange-border);
    background: linear-gradient(180deg, var(--orange-bg), transparent 70%), var(--ra-node);
}
body.recall-app .recall-intro--embedded .recall-intro-char-glyph {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}
body.recall-app .recall-intro--embedded .recall-intro-char.learned .recall-intro-char-glyph { color: var(--ra-green); }
body.recall-app .ric-star {
    display: block;
    position: absolute;
    top: 6px;
    right: 9px;
    font-size: 13px;
    line-height: 1;
    color: var(--ra-gold);
    filter: drop-shadow(0 1px 2px rgba(224, 167, 26, 0.45));
}
body.recall-app .ric-bars {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 0 4px;
}
body.recall-app .ric-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--ra-track);
    overflow: hidden;
}
body.recall-app .ric-bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
body.recall-app .ric-bar--r i { background: var(--recall-accent, #c0267e); }
body.recall-app .ric-bar--w i { background: var(--ra-blue); }
body.recall-app .recall-intro--embedded .recall-intro-char-scores {
    flex-direction: row;
    gap: 8px;
    margin-top: 0;
}
body.recall-app .recall-intro--embedded .ric-score { font-size: 10px; }
body.recall-app .recall-intro--embedded .recall-intro-gauge-legend { margin-top: 12px; }

/* --- Overall mastery: ring + bar in one tinted panel ---------------- */
body.recall-app .recall-intro--embedded #recall-intro-overall-section {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    align-items: center;
    align-self: start;
    margin: 8px 0 0;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid var(--line-2, #d7cdb6);
    background: linear-gradient(120deg, var(--ra-tint), var(--accent-bg, rgba(32,80,126,0.08)));
}
body.recall-app .recall-intro-overall-ring {
    display: grid;
    place-items: center;
    position: relative;
    grid-row: 1 / span 3;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: conic-gradient(var(--ra-accent) calc(var(--p, 0) * 1%), var(--ra-track) 0);
    box-shadow: 0 6px 16px var(--ra-glow);
}
body.recall-app .recall-intro-overall-ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--ra-card);
}
body.recall-app .recall-intro-overall-ring b {
    position: relative;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
body.recall-app .recall-intro--embedded #recall-intro-overall-section .recall-intro-section-label { margin-bottom: 2px; }
body.recall-app .recall-intro--embedded .recall-intro-overall-row { margin-bottom: 8px; }
body.recall-app .recall-intro--embedded .recall-intro-overall-count { font-size: 1.15rem; font-weight: 800; }
body.recall-app .recall-intro--embedded .recall-intro-overall-pct { display: none; }
body.recall-app .recall-intro--embedded .recall-intro-bar {
    height: 10px;
    border-radius: 5px;
    background: var(--ra-track);
}
body.recall-app .recall-intro--embedded .recall-intro-bar-fill {
    background: var(--ra-grad);
    border-radius: 5px;
    box-shadow: 0 0 10px var(--ra-glow);
}

/* --- Start CTA: gradient, glow, shine sweep ------------------------- */
body.recall-app .recall-intro--embedded .recall-intro-start {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--ra-grad);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 26px var(--ra-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.recall-app .recall-intro--embedded .recall-intro-start::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -40%;
    width: 30%;
    height: 140%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: skewX(-20deg);
    animation: ra-shine 3.4s ease-in-out infinite;
    pointer-events: none;
}
body.recall-app .recall-intro--embedded .recall-intro-start:hover {
    background: var(--ra-grad);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px var(--ra-glow);
}
body.recall-app .recall-intro--embedded .recall-intro-start:active { transform: translateY(0); }
@keyframes ra-shine {
    0%, 55% { left: -40%; }
    100%    { left: 130%; }
}

/* --- Close (back-to-drill) affordance ------------------------------- */
body.recall-app.study-active .recall-intro--embedded .recall-intro-close {
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-2, #d7cdb6);
    background: var(--ra-node);
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 32px;
    text-align: center;
}
body.recall-app.study-active .recall-intro--embedded .recall-intro-close:hover {
    color: var(--ra-accent);
    border-color: var(--ra-line);
}

/* ─────────────────────────────────────────────────────────────────────
   2. DRILL SCREEN
   ───────────────────────────────────────────────────────────────────── */

/* Stage: spotlight backdrop, soft ring at rest, magenta glow in Recall. */
body.recall-app #canvas-wrap {
    border-radius: 24px !important;
    border-color: transparent !important;
    background: radial-gradient(circle at 50% 42%, var(--inset, #fcfaf5) 0%, var(--ra-card) 75%) !important;
    box-shadow: 0 0 0 1px var(--line-2, #d7cdb6), var(--ra-shadow);
    transition: box-shadow 0.35s ease;
}
body.recall-app.study-active #canvas-wrap {
    box-shadow:
        0 0 0 2px var(--ra-accent),
        0 0 0 8px var(--ra-glow),
        0 18px 44px var(--ra-glow);
}
/* hit / miss beats */
body.recall-app #canvas-wrap.is-hit {
    animation: ra-hit 0.75s ease-out;
}
body.recall-app #canvas-wrap.is-miss {
    animation: ra-shake 0.45s ease;
    box-shadow:
        0 0 0 2px var(--ra-red),
        0 0 0 8px rgba(177, 50, 42, 0.18),
        0 18px 44px rgba(177, 50, 42, 0.18);
}
@keyframes ra-hit {
    0%   { box-shadow: 0 0 0 2px var(--ra-green), 0 0 0 4px rgba(47, 143, 91, 0.45), 0 18px 44px var(--ra-glow); }
    100% { box-shadow: 0 0 0 2px var(--ra-green), 0 0 0 26px rgba(47, 143, 91, 0), 0 18px 44px var(--ra-glow); }
}
@keyframes ra-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(7px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

/* Row step strip along the top edge of the stage. */
body.recall-app .recall-stage-steps {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
body.recall-app.study-active .recall-stage-steps { opacity: 1; }
body.recall-app .recall-stage-steps i {
    display: block;
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--ra-track);
    transition: background 0.3s, width 0.3s, box-shadow 0.3s;
}
body.recall-app .recall-stage-steps i.is-done { background: var(--ra-green); }
body.recall-app .recall-stage-steps i.is-current {
    width: 34px;
    background: var(--ra-accent);
    box-shadow: 0 0 0 3px var(--ra-glow);
}

/* Prompt card: big gradient romaji + pulsing pill CTA. */
body.recall-app .study-hint-ready {
    gap: 6px;
    padding: 20px 32px 16px;
    border: none;
    border-radius: 22px;
    background: var(--ra-card);
    box-shadow: 0 0 0 1px var(--line-2, #d7cdb6), 0 14px 36px rgba(40, 50, 70, 0.14);
}
html.dark body.recall-app .study-hint-ready {
    box-shadow: 0 0 0 1px var(--line-2, #3a3f52), 0 14px 36px rgba(0, 0, 0, 0.45);
}
body.recall-app .study-hint-ready:hover {
    background: var(--ra-card);
    box-shadow: 0 0 0 1px var(--ra-line), 0 16px 40px var(--ra-glow);
}
body.recall-app .study-hint-romaji {
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    opacity: 1;
    background: var(--ra-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.recall-app .study-hint-prompt {
    font-size: 0.95rem;
    color: var(--text-muted);
    opacity: 1;
}
body.recall-app .study-hint-cta {
    margin-top: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--ra-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    box-shadow: 0 6px 16px var(--ra-glow);
    animation: ra-pulse 1.7s ease-in-out infinite;
}
@keyframes ra-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 6px 16px var(--ra-glow); }
    50%      { transform: scale(1.05); box-shadow: 0 8px 22px var(--ra-glow), 0 0 0 6px var(--ra-tint); }
}

/* Floating result pop. */
body.recall-app .recall-stage-pop {
    display: block;
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    z-index: 6;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    background: var(--ra-green);
    box-shadow: 0 10px 26px rgba(47, 143, 91, 0.35);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
body.recall-app .recall-stage-pop.is-bad {
    background: var(--ra-red);
    box-shadow: 0 10px 26px rgba(177, 50, 42, 0.35);
}
body.recall-app .recall-stage-pop.show { animation: ra-pop 0.95s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes ra-pop {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    30%  { transform: translate(-50%, -50%) scale(1); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(0.96); }
}

/* XP-style advance bar. */
body.recall-app .study-hint-attempts {
    bottom: 16px;
    padding: 8px 14px;
    max-width: calc(100% - 28px);
    border: none;
    border-radius: 999px;
    background: var(--ra-card);
    box-shadow: 0 0 0 1px var(--line-2, #d7cdb6), 0 8px 22px rgba(40, 50, 70, 0.12);
}
html.dark body.recall-app .study-hint-attempts {
    box-shadow: 0 0 0 1px var(--line-2, #3a3f52), 0 8px 22px rgba(0, 0, 0, 0.4);
}
body.recall-app .advance-bar { width: 150px; height: 18px; }
body.recall-app .advance-bar-track {
    height: 8px;
    border-radius: 4px;
    background: var(--ra-track);
    opacity: 1;
}
body.recall-app .advance-bar-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    border-radius: 4px;
    background: var(--ra-grad);
    box-shadow: 0 0 8px var(--ra-glow);
    pointer-events: none;
    transition: width 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
body.recall-app .advance-bar-tick.dragging ~ .advance-bar-fill,
body.recall-app .advance-bar-tick.dragging + .advance-bar-fill { transition: none; }
body.recall-app .advance-bar-tick {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    background: var(--ra-accent);
    box-shadow: 0 2px 8px var(--ra-glow);
}
html.dark body.recall-app .advance-bar-tick { border-color: var(--ra-card); }
body.recall-app .advance-bar-label {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    opacity: 1;
}

/* Toolbar: one pill group. */
body.recall-app .recall-toolbar {
    width: max-content;
    max-width: 100%;
    gap: 4px;
    margin: 16px auto 10px;
    padding: 5px;
    border-radius: 999px;
    background: var(--inset, #fcfaf5);
    border: 1px solid var(--line-2, #d7cdb6);
    align-items: center;
}
body.recall-app .recall-toolbar__btn {
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    padding: 9px 18px;
    font-weight: 700;
}
body.recall-app .recall-toolbar__btn:hover {
    background: var(--ink-hover, rgba(40, 30, 35, 0.08));
    border-color: transparent;
    color: var(--text);
}
body.recall-app .recall-toolbar__btn.is-active {
    background: var(--ra-blue);
    border-color: transparent;
    color: #fff;
}
body.recall-app #study-btn:not(.is-active) {
    background: transparent;
    border-color: transparent;
    color: var(--ra-accent);
}
body.recall-app #study-btn:not(.is-active):hover { background: var(--ra-tint); }
body.recall-app.study-active #study-btn.is-active,
body.recall-app #study-btn.is-active {
    background: var(--ra-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px var(--ra-glow);
}
body.recall-app .recall-toolbar__btn--hint { color: var(--text-muted); }
body.recall-app .options-dropdown-trigger { border-radius: 999px; }

/* KanaNav under Recall: borderless row, chunkier tiles, magenta active. */
body.recall-app.study-active .kana-nav-row {
    background: transparent !important;
    border-color: transparent !important;
    padding: 8px 0 !important;
    gap: 10px !important;
}
body.recall-app.study-active .kana-nav-row > button[data-romaji] {
    border-radius: 14px !important;
    background: var(--ra-node) !important;
    border: 1px solid var(--line-2, #d7cdb6) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 3px 10px rgba(40, 50, 70, 0.05);
}
body.recall-app.study-active .kana-nav-row > button[data-romaji] .kn-romaji {
    font-weight: 800 !important;
}
body.recall-app.study-active .kana-nav-row > button[data-active="1"] {
    background: var(--ra-tint) !important;
    border-color: var(--ra-accent) !important;
    box-shadow: 0 0 0 3px var(--ra-glow), 0 8px 18px var(--ra-glow) !important;
    transform: translateY(-3px) !important;
}
body.recall-app.study-active .kana-nav-row > button[data-active="1"] .kn-romaji {
    color: var(--ra-accent) !important;
}
body.recall-app.study-active .kana-nav-row > button:not([data-romaji]) {
    border-color: transparent !important;
}

/* Handoff (row complete → Swipe) panel. */
body.recall-app .handoff-panel {
    padding: 22px 34px;
    border-radius: 20px;
    border: 1px solid var(--line-2, #d7cdb6);
    background: linear-gradient(180deg, var(--ra-card), var(--inset, #fcfaf5));
    box-shadow: 0 0 0 6px var(--ra-glow), 0 22px 56px rgba(40, 50, 70, 0.2);
}
body.recall-app .handoff-title { font-size: 1.35rem; font-weight: 800; }
body.recall-app .handoff-panel.tone-success .handoff-title { color: var(--ra-green); }
body.recall-app .handoff-primary-btn {
    padding: 12px 28px;
    font-weight: 800;
    background: var(--ra-grad);
    box-shadow: 0 8px 20px var(--ra-glow);
}
body.recall-app .handoff-primary-btn:hover { background: var(--ra-grad); transform: translateY(-1px); }

/* ─────────────────────────────────────────────────────────────────────
   Responsive + motion
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    body.recall-app .recall-intro--embedded {
        padding: 16px 14px 18px;
        border-radius: 18px;
    }
    body.recall-app .recall-intro--embedded::before { font-size: 180px; right: -24px; top: -30px; }
    body.recall-app .recall-intro--embedded .recall-intro-title { font-size: 1.7rem; }
    body.recall-app .recall-intro--embedded #recall-intro-families-section { padding-right: 0; }
    body.recall-app .recall-intro--embedded #recall-intro-families {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
        gap: 8px;
        max-height: none;
        padding: 0;
    }
    body.recall-app .recall-intro--embedded .recall-intro-family.untouched { opacity: 0.75; }
    /* Start floats at the viewport bottom while the family list scrolls,
       then settles into its slot at the end of the menu. */
    body.recall-app .recall-intro--embedded .recall-intro-start {
        position: sticky;
        bottom: 12px;
        z-index: 5;
        margin-top: 14px;
    }
    body.recall-app .recall-intro--embedded .recall-intro-family {
        border: 1px solid var(--line-2, #d7cdb6);
        background: var(--ra-node);
        transform: none;
    }
    body.recall-app .recall-intro--embedded .recall-intro-family::after { display: none; }
    body.recall-app .recall-intro--embedded .recall-intro-family:hover,
    body.recall-app .recall-intro--embedded .recall-intro-family.selected,
    body.recall-app .recall-intro--embedded .recall-intro-family.untouched.selected { transform: none; }
    body.recall-app .recall-intro--embedded .recall-intro-family.complete {
        background: linear-gradient(180deg, var(--ra-green-bg), transparent 70%), var(--ra-node);
        border-color: var(--green-border);
    }
    body.recall-app .recall-intro--embedded .recall-intro-family.untouched { border-style: dashed; }
    body.recall-app .recall-intro--embedded .recall-intro-family.selected,
    body.recall-app .recall-intro--embedded .recall-intro-family.untouched.selected {
        border-style: solid;
        background: var(--ra-tint);
        border-color: var(--ra-accent);
    }
    body.recall-app .recall-intro--embedded #recall-intro-overall-section { padding: 12px 14px; }
    body.recall-app .study-hint-romaji { font-size: 2.6rem; }
    body.recall-app .study-hint-ready { padding: 16px 24px 12px; }
    body.recall-app .advance-bar { width: 120px; }
}
@media (max-width: 639px) {
    body.recall-app .recall-intro--embedded .recall-intro-chars {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 6px;
    }
    body.recall-app .recall-intro--embedded .recall-intro-char {
        min-height: 84px;
        padding: 10px 5px 8px;
        gap: 6px;
        border-radius: 12px;
    }
    body.recall-app .recall-intro--embedded .recall-intro-char-glyph { font-size: 1.3rem; }
    body.recall-app .recall-intro--embedded .recall-intro-char-scores { display: none; }
    body.recall-app .ric-bars { padding: 0 2px; }
}
@media (prefers-reduced-motion: reduce) {
    body.recall-app .recall-intro--embedded .recall-intro-start::after,
    body.recall-app .study-hint-cta,
    body.recall-app #canvas-wrap.is-hit,
    body.recall-app #canvas-wrap.is-miss { animation: none; }
    body.recall-app .recall-stage-pop.show { animation: ra-pop-still 0.9s ease forwards; }
    @keyframes ra-pop-still { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }
}

/* ─────────────────────────────────────────────────────────────────────
   3. SWIPE (reading check — beat 2 of the arc)
   Same spotlight panel language as the drill stage. The arena's fixed
   size and the bubble/puck positioning are untouched — swipe.js reads
   those for its drag maths — only the skin changes.
   ───────────────────────────────────────────────────────────────────── */
body.recall-app .swipe-game,
body.recall-app .fall-game {
    /* theme.css tokens these games reference that site.css pages lack */
    --puck-bg:      var(--ra-node);
    --puck-border:  var(--line-2, #d7cdb6);
    --overlay-bg:   rgba(250, 246, 238, 0.92);
    --red-bg:       rgba(177, 50, 42, 0.13);
    --close-bg:     var(--ra-node);
    --close-border: var(--line-2, #d7cdb6);
    --close-color:  var(--text-muted);
    --close-hover:  var(--ra-tint);
    --heading:      var(--ra-accent);
    --accent-active: var(--ra-glow);
    --divider:      var(--line-2, #d7cdb6);
    --guide-line:   var(--ra-track);
    --card-bg:      var(--ra-node);
    --card-shadow:  var(--ra-shadow);
    --timer-bg:     var(--ra-track);
    --timer-fill:   var(--ra-blue);
    --timer-urgent: var(--ra-red);
    border: 1px solid var(--line-2, #d7cdb6);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 12% 0%,   var(--ra-tint) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, var(--accent-bg, rgba(32,80,126,0.08)) 0%, transparent 50%),
        var(--ra-card);
    box-shadow: var(--ra-shadow);
}
html.dark body.recall-app .swipe-game,
html.dark body.recall-app .fall-game {
    --overlay-bg: rgba(23, 24, 33, 0.9);
    --red-bg:     rgba(255, 107, 138, 0.2);
}

/* Header chips (score / progress). */
body.recall-app .swipe-score,
body.recall-app .fall-score {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--ra-green);
    background: var(--ra-green-bg);
}
body.recall-app .swipe-progress,
body.recall-app .fall-stats {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--ra-blue);
    background: var(--accent-bg, rgba(32,80,126,0.08));
}
body.recall-app .swipe-score:empty,
body.recall-app .swipe-progress:empty,
body.recall-app .fall-score:empty,
body.recall-app .fall-stats:empty { display: none; }

/* Faint dashed cross under the bubbles — shows the four swipe lanes. */
body.recall-app .swipe-arena::before,
body.recall-app .swipe-arena::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    border: 0 dashed var(--ra-track);
}
body.recall-app .swipe-arena::before {
    left: 50%; top: 8px; bottom: 8px;
    border-left-width: 1.5px;
}
body.recall-app .swipe-arena::after {
    top: 50%; left: 8px; right: 8px;
    border-top-width: 1.5px;
}

/* Answer bubbles: glassy water orbs — translucent body so the backdrop
   shows through, a specular highlight top-left, blue-tinted inner shadow
   along the bottom rim, thin bright edge. */
body.recall-app .swipe-option {
    width: 72px;
    height: 72px;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    /* deep ink blue + a soft white halo so the label reads through the
       glass highlights and the moving backdrop */
    color: #143a60;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.74) 40%,
                        rgba(205, 228, 250, 0.58) 72%, rgba(120, 175, 235, 0.46) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 -8px 14px rgba(46, 143, 230, 0.22),
        inset 0 2px 4px rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(61, 155, 240, 0.22),
        0 10px 22px rgba(32, 80, 126, 0.16);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.95),
        0 0 2px rgba(255, 255, 255, 1),
        0 1px 0 rgba(255, 255, 255, 0.9);
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.25s;
}
/* state fills: white label, dark halo instead of the white one */
body.recall-app .swipe-option.correct,
body.recall-app .swipe-option.wrong {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.recall-app .swipe-option::before,
body.recall-app .swipe-puck::before {
    content: '';
    position: absolute;
    left: 18%;
    top: 10%;
    width: 38%;
    height: 24%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
}
html.dark body.recall-app .swipe-option {
    color: #f2f7ff;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 40%,
                        rgba(111, 192, 255, 0.18) 72%, rgba(111, 192, 255, 0.30) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 -8px 14px rgba(111, 192, 255, 0.28),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(111, 192, 255, 0.25),
        0 10px 22px rgba(0, 0, 0, 0.35);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.8);
}
html.dark body.recall-app .swipe-option::before,
html.dark body.recall-app .swipe-puck::before { opacity: 0.45; }
body.recall-app .swipe-option.top    { top: -36px; }
body.recall-app .swipe-option.right  { right: -36px; }
body.recall-app .swipe-option.bottom { bottom: -36px; }
body.recall-app .swipe-option.left   { left: -36px; }
body.recall-app .swipe-option.correct {
    background: var(--ra-green);
    border-color: var(--ra-green);
    color: #fff;
    box-shadow: 0 0 0 6px var(--ra-green-bg), 0 10px 24px rgba(47, 143, 91, 0.35);
}
body.recall-app .swipe-option.wrong {
    background: var(--ra-red);
    border-color: var(--ra-red);
    color: #fff;
    box-shadow: 0 0 0 6px rgba(177, 50, 42, 0.18), 0 10px 24px rgba(177, 50, 42, 0.3);
}
/* keep the centring translate when the state adds a scale */
body.recall-app .swipe-option.top.correct,
body.recall-app .swipe-option.bottom.correct { transform: translateX(-50%) scale(1.14); }
body.recall-app .swipe-option.left.correct,
body.recall-app .swipe-option.right.correct  { transform: translateY(-50%) scale(1.14); }
body.recall-app .swipe-option.top.wrong,
body.recall-app .swipe-option.bottom.wrong   { transform: translateX(-50%); animation: ra-shake 0.45s ease; }
body.recall-app .swipe-option.left.wrong,
body.recall-app .swipe-option.right.wrong    { transform: translateY(-50%); animation: ra-shake 0.45s ease; }

/* The kana puck: a bigger glass orb — same water treatment as the bubbles
   with a stronger blue rim so it reads as the thing you throw. */
body.recall-app .swipe-puck {
    width: 100px;
    height: 100px;
    font-family: var(--font-kana, 'Noto Serif JP', serif);
    font-size: 2.9rem;
    font-weight: 700;
    color: var(--text);
    border: 2px solid rgba(255, 255, 255, 0.9);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.6) 30%,
                        rgba(205, 228, 250, 0.48) 66%, rgba(110, 170, 235, 0.45) 100%);
    box-shadow:
        inset 0 -12px 22px rgba(46, 143, 230, 0.28),
        inset 0 3px 6px rgba(255, 255, 255, 1),
        0 0 0 3px rgba(61, 155, 240, 0.35),
        0 0 0 8px rgba(61, 155, 240, 0.12),
        0 16px 36px rgba(32, 80, 126, 0.28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: top 0.3s ease-out, left 0.3s ease-out, opacity 0.3s, box-shadow 0.2s;
}
body.recall-app .swipe-puck:active {
    box-shadow:
        inset 0 -12px 22px rgba(46, 143, 230, 0.28),
        inset 0 3px 6px rgba(255, 255, 255, 1),
        0 0 0 4px rgba(61, 155, 240, 0.45),
        0 0 0 12px rgba(61, 155, 240, 0.14),
        0 20px 44px rgba(32, 80, 126, 0.32);
}
html.dark body.recall-app .swipe-puck {
    color: #f2f6ff;
    border-color: rgba(255, 255, 255, 0.4);
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 30%,
                        rgba(111, 192, 255, 0.16) 66%, rgba(111, 192, 255, 0.34) 100%);
    box-shadow:
        inset 0 -12px 22px rgba(111, 192, 255, 0.32),
        inset 0 3px 6px rgba(255, 255, 255, 0.4),
        0 0 0 3px rgba(111, 192, 255, 0.4),
        0 0 0 8px rgba(111, 192, 255, 0.14),
        0 16px 36px rgba(0, 0, 0, 0.45);
    text-shadow: none;
}

/* Round timer + session progress. */
body.recall-app .swipe-timer {
    height: 6px;
    border-radius: 3px;
    margin-top: 3.4rem;
}
body.recall-app .swipe-timer-fill {
    border-radius: 3px;
    background: var(--ra-grad);
    box-shadow: 0 0 8px var(--ra-glow);
}
body.recall-app .swipe-timer-fill.urgent {
    background: var(--ra-red);
    box-shadow: 0 0 8px rgba(177, 50, 42, 0.4);
}
body.recall-app .swipe-overall-progress,
body.recall-app .fall-overall-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--ra-track);
}
body.recall-app .swipe-overall-progress-fill,
body.recall-app .fall-overall-progress-fill {
    border-radius: 3px;
    background: var(--ra-green);
    opacity: 1;
}
body.recall-app .swipe-feedback,
body.recall-app .fall-feedback {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* Close buttons (Swipe + Fall). */
body.recall-app .swipe-close,
body.recall-app .fall-close {
    width: 32px;
    height: 32px;
    top: 10px;
    right: 10px;
    font-size: 1rem;
    font-weight: 700;
    background: var(--ra-node);
    border: 1px solid var(--line-2, #d7cdb6);
    color: var(--text-muted);
    box-shadow: 0 3px 10px rgba(40, 50, 70, 0.08);
}
body.recall-app .swipe-close:hover,
body.recall-app .fall-close:hover {
    background: var(--ra-tint);
    border-color: var(--ra-line);
    color: var(--ra-accent);
}

/* ─────────────────────────────────────────────────────────────────────
   4. FREE FALL (writing under pressure — beat 3 of the arc)
   ───────────────────────────────────────────────────────────────────── */
body.recall-app .fall-prompt {
    font-size: 0.82rem;
    font-weight: 600;
    font-style: normal;
    color: var(--text-muted);
}

/* Writing square = the Recall stage look. */
body.recall-app .fall-canvas-wrap {
    border-radius: 24px;
    border-color: transparent;
    background: radial-gradient(circle at 50% 42%, var(--inset, #fcfaf5) 0%, var(--ra-card) 75%);
    box-shadow:
        0 0 0 2px var(--ra-accent),
        0 0 0 8px var(--ra-glow),
        0 18px 44px var(--ra-glow);
    transition: box-shadow 0.35s ease;
}
body.recall-app .fall-canvas-wrap.shake-wrong {
    animation: ra-shake 0.45s ease;
    box-shadow:
        0 0 0 2px var(--ra-red),
        0 0 0 8px rgba(177, 50, 42, 0.18),
        0 18px 44px rgba(177, 50, 42, 0.18);
}
body.recall-app .fall-canvas-wrap.flash-ok { animation: ra-hit 0.75s ease-out; }
body.recall-app .fall-canvas-wrap::before,
body.recall-app .fall-canvas-wrap::after { border-color: var(--ra-track); }

/* Drop lane = a glass tube with a hot floor. */
body.recall-app .fall-lane {
    border-radius: 16px;
    border: 1px solid var(--line-2, #d7cdb6);
    background:
        linear-gradient(180deg, transparent 0%, transparent 62%, rgba(177, 50, 42, 0.10) 100%),
        var(--ra-node);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 16px rgba(40, 50, 70, 0.06);
}
html.dark body.recall-app .fall-lane {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 6px 16px rgba(0, 0, 0, 0.3);
}
body.recall-app .fall-lane::after {
    height: 3px;
    background: var(--ra-red);
    box-shadow: 0 0 10px rgba(177, 50, 42, 0.55);
}
body.recall-app .fall-char {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    transition: color 0.3s, font-size 0.2s, text-shadow 0.3s;
}
body.recall-app .fall-char.active {
    font-size: 1.35rem;
    color: var(--ra-accent);
    text-shadow: 0 0 12px var(--ra-glow);
}
body.recall-app .fall-char.missed  { color: var(--ra-red); text-shadow: none; }
/* punchier slime for the goo splat on the game-skinned page */
body.recall-app .fall-game  { --goo: #3cc46c; }   /* slime */
body.recall-app .swipe-game { --goo: #2e8fe6; }   /* water */
html.dark body.recall-app .fall-game  { --goo: #5ce09a; }
html.dark body.recall-app .swipe-game { --goo: #6fc0ff; }
/* Animated WebGL backdrops (js/games/game-shader.js reads these; pages
   without them stay static). Tint = the goo colour, alpha = strength. */
body.recall-app .swipe-game { --shader: water; --shader-tint: #3d9bf0; --shader-alpha: 0.6; }
body.recall-app .fall-game  { --shader: slime; --shader-tint: #3cc46c; --shader-alpha: 0.62; }
html.dark body.recall-app .swipe-game { --shader-tint: #6fc0ff; --shader-alpha: 0.65; }
html.dark body.recall-app .fall-game  { --shader-tint: #5ce09a; --shader-alpha: 0.8; }
body.recall-app .fall-char.goo {
    color: var(--goo);
    font-size: 1.35rem;
    text-shadow: 0 0 12px var(--goo);
}
body.recall-app .fall-char.cleared { color: var(--ra-green); }

@media (max-width: 639px) {
    body.recall-app .fall-lane {
        background:
            linear-gradient(90deg, transparent 0%, transparent 62%, rgba(177, 50, 42, 0.10) 100%),
            var(--ra-node);
    }
    body.recall-app .fall-lane::after {
        width: 3px;
        height: auto;
    }
    /* tighter glow ring so it isn't clipped by the 8px panel padding */
    body.recall-app .fall-canvas-wrap {
        box-shadow: 0 0 0 2px var(--ra-accent), 0 0 0 5px var(--ra-glow), 0 12px 30px var(--ra-glow);
    }
    body.recall-app .swipe-option { width: 60px; height: 60px; font-size: 0.95rem; }
    body.recall-app .swipe-option.top    { top: -30px; }
    body.recall-app .swipe-option.right  { right: -30px; }
    body.recall-app .swipe-option.bottom { bottom: -30px; }
    body.recall-app .swipe-option.left   { left: -30px; }
    body.recall-app .swipe-puck { width: 84px; height: 84px; font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    body.recall-app .swipe-option.wrong,
    body.recall-app .fall-canvas-wrap.shake-wrong,
    body.recall-app .fall-canvas-wrap.flash-ok { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   5. KANJI RECALL (/kanji/recall) — kanji-specific additions on top of
   the shared skin. body.recall-app.kanji-recall.
   ───────────────────────────────────────────────────────────────────── */
/* lesson tiles: big serif glyph + meaning underneath */
body.kanji-recall .recall-intro--embedded .recall-intro-char { min-height: 128px; gap: 4px; }
body.kanji-recall .recall-intro--embedded .recall-intro-char-glyph {
    font-family: var(--font-kana, 'Noto Serif JP', serif);
    font-size: 2.1rem;
    font-weight: 700;
}
body.kanji-recall .recall-intro-char-sub {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}
body.kanji-recall .recall-intro--embedded .recall-intro-char.learned .recall-intro-char-sub { color: var(--ra-green); }
/* 45 lessons: give the path more room and denser rows */
body.kanji-recall .recall-intro--embedded #recall-intro-families { max-height: min(560px, 68vh); }
body.kanji-recall .recall-intro--embedded .recall-intro-family { padding: 5px 10px 11px 8px; }
body.kanji-recall .recall-intro--embedded .recall-intro-family-name { text-transform: none; font-size: 0.86rem; }
body.kanji-recall .recall-intro--embedded::before { content: '憶'; }

/* prompt: the meaning is the cue, readings and stroke count support it */
body.kanji-recall .study-hint-romaji {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 280px;
    white-space: normal;
}
body.kanji-recall .study-hint-prompt {
    font-family: var(--font-kana-sans, 'Noto Sans JP', sans-serif);
    font-style: normal;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.04em;
}
body.kanji-recall .study-hint-strokes {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ra-tint);
    color: var(--ra-accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
body.kanji-recall .study-hint-strokes:empty { display: none; }

/* compound card: a word using the kanji, shown after a clean write */
body.recall-app .recall-compound-card {
    display: block;
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translate(-50%, -12px);
    z-index: 7;
    width: max-content;
    max-width: calc(100% - 40px);
    padding: 10px 16px 11px;
    border-radius: 16px;
    background: var(--ra-card);
    box-shadow: 0 0 0 1px var(--line-2, #d7cdb6), 0 12px 30px rgba(40, 50, 70, 0.16);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
body.recall-app .recall-compound-card.show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
    cursor: pointer;
}
body.recall-app .rcc-word {
    font-family: var(--font-kana, 'Noto Serif JP', serif);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
}
body.recall-app .rcc-word mark,
body.recall-app .rcc-sentence mark {
    background: transparent;
    color: var(--ra-accent);
}
body.recall-app .rcc-reading {
    font-family: var(--font-kana-sans, 'Noto Sans JP', sans-serif);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}
body.recall-app .rcc-meaning {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ra-green);
    margin-top: 2px;
}
body.recall-app .rcc-sentence {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line-2, #d7cdb6);
    font-family: var(--font-kana-sans, 'Noto Sans JP', sans-serif);
    font-size: 0.86rem;
    color: var(--text);
}
body.recall-app .rcc-sentence-en {
    display: block;
    font-family: var(--font-ui, system-ui, sans-serif);
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-top: 1px;
}
/* the sets section under the practice card */
body.kanji-recall .kr-sets .vocab-decks-pane { margin-bottom: 18px; }
@media (max-width: 639px) {
    body.kanji-recall .recall-intro--embedded .recall-intro-char { min-height: 96px; }
    body.kanji-recall .recall-intro--embedded .recall-intro-char-glyph { font-size: 1.5rem; }
    body.kanji-recall .recall-intro-char-sub { font-size: 0.6rem; }
    body.kanji-recall .study-hint-romaji { font-size: 1.5rem; max-width: 220px; }
}
/* kanji nav tiles carry English meanings — fit long ones */
body.kanji-recall .kana-nav-row > button[data-romaji] { width: 64px !important; }
body.kanji-recall .kana-nav-row .kn-romaji {
    font-size: 0.62rem !important;
    max-width: 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
body.kanji-recall.study-active .kana-nav-row .kn-romaji { font-size: 0.7rem !important; }

/* ─────────────────────────────────────────────────────────────────────
   6. BUILD — stroke puzzle (js/kanji/stroke-puzzle.js). body.build-active
   while assembling. Pieces float in .card-area-body around the canvas:
   top + bottom bands always, left + right columns when there is room.
   ───────────────────────────────────────────────────────────────────── */
body.recall-app .card-area-body { position: relative; }
body.build-active .card-area-body {
    padding-top: 150px;                             /* top band */
    transition: padding 0.25s ease;
}
body.build-active #canvas-wrap { margin-bottom: 150px !important; }   /* bottom band, above the toolbar */
@media (min-width: 900px) {
    body.build-active .card-area-body { padding-top: 100px; }
    body.build-active #canvas-wrap { margin-bottom: 100px !important; }
}
/* mobile fullscreen: the kanji strip stays visible (it names the kanji), so
   on short screens the canvas gives up a little width and the bands share
   whatever height is left after canvas + toolbar + strip — no scrolling */
body.build-active .practice--lead.gfs--fs #canvas-wrap {
    max-width: min(380px, calc(100vh - 415px)) !important;
    max-width: min(380px, calc(100dvh - 415px)) !important;
    margin-bottom: clamp(90px, calc((100vh - 235px - min(100vw - 12px, 100vh - 415px)) / 2), 170px) !important;
    margin-bottom: clamp(90px, calc((100dvh - 235px - min(100vw - 12px, 100dvh - 415px)) / 2), 170px) !important;
}
body.build-active .practice--lead.gfs--fs .card-area-body {
    padding-top: clamp(90px, calc((100vh - 235px - min(100vw - 12px, 100vh - 415px)) / 2), 170px);
    padding-top: clamp(90px, calc((100dvh - 235px - min(100vw - 12px, 100dvh - 415px)) / 2), 170px);
}
/* the kanji's name sits on the canvas while its strokes are being placed
   (pieces may pass over it — that's fine) */
body.recall-app .sp-name {
    position: absolute;
    left: 50%;
    top: 34px;
    transform: translateX(-50%);
    z-index: 5;
    width: max-content;
    max-width: 80%;
    text-align: center;
    pointer-events: none;
    display: none;
}
body.build-active:not(.reading-active) .sp-name { display: block; }
body.recall-app .sp-name-main {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ra-ink, var(--text, #23283a));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.recall-app .sp-name-sub {
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ra-accent);
    opacity: 0.75;
}
@media (max-width: 700px) {
    body.recall-app .sp-name { top: 30px; }
    body.recall-app .sp-name-main { font-size: 1rem; }
}
/* while dragging, a piece is shown 1:1 (the transform is set inline) */
/* the writing canvas is a drop target only: no drawing, no prompt card */
body.build-active #draw-canvas { pointer-events: none; }
body.build-active .study-hint-overlay { opacity: 0 !important; pointer-events: none !important; }
body.build-active .recall-stage-steps { opacity: 1; }
body.build-active #canvas-wrap {
    box-shadow: 0 0 0 2px var(--ra-accent), 0 0 0 8px var(--ra-glow), 0 18px 44px var(--ra-glow);
}
body.build-active #canvas-wrap::after {
    /* drop-zone hint: a dashed inner outline */
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px dashed var(--ra-line);
    border-radius: 18px;
    pointer-events: none;
    animation: sp-breathe 2.4s ease-in-out infinite;
}
@keyframes sp-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

body.recall-app .sp-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    transition: filter 0.3s ease;
}
body.recall-app .sp-ink.is-complete {
    animation: sp-complete 0.9s ease-out;
}
@keyframes sp-complete {
    0%   { filter: drop-shadow(0 0 0 rgba(47,143,91,0)); transform: scale(1); }
    35%  { filter: drop-shadow(0 0 18px rgba(47,143,91,0.9)); transform: scale(1.04); }
    100% { filter: drop-shadow(0 0 0 rgba(47,143,91,0)); transform: scale(1); }
}
body.recall-app .sp-ink.is-ghost { animation: sp-ghost 0.7s ease-in-out 2; }
@keyframes sp-ghost { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
body.recall-app .sp-progress {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 5;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ra-tint);
    color: var(--ra-accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
body.recall-app .sp-progress:empty { display: none; }
body.recall-app .sp-ring {
    position: absolute;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    border-radius: 50%;
    border: 3px solid var(--ra-green);
    pointer-events: none;
    z-index: 6;
    animation: sp-ring 0.65s ease-out forwards;
}
@keyframes sp-ring {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(3.2); opacity: 0; border-width: 1px; }
}

/* the pieces: outlined tiles with NO fill, so the coloured stroke floats on
   the page inside a thin rounded frame */
body.recall-app .sp-piece {
    position: absolute;
    z-index: 20;
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 0 0 1.5px var(--line-2, #d7cdb6);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow 0.15s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
html.dark body.recall-app .sp-piece { box-shadow: 0 0 0 1.5px var(--line-2, #3a3f52); }
body.recall-app .sp-piece canvas {
    display: block;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(40, 50, 70, 0.16));
}
body.recall-app .sp-piece:hover { box-shadow: 0 0 0 1.5px var(--ra-line), 0 8px 22px var(--ra-glow); }
body.recall-app .sp-piece.is-dragging {
    cursor: grabbing;
    z-index: 60;
    transition: none;
    box-shadow: 0 0 0 2px var(--ra-accent), 0 18px 40px rgba(40, 50, 70, 0.22);
}
body.recall-app .sp-piece.is-returning { transition: left 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1), top 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1), transform 0.4s ease, box-shadow 0.15s ease; }
body.recall-app .sp-piece.is-wrong { animation: ra-shake 0.45s ease; box-shadow: 0 0 0 3px var(--ra-red), 0 0 22px rgba(196, 66, 66, 0.4); }
body.recall-app .sp-piece.is-off { animation: ra-shake 0.45s ease; box-shadow: 0 0 0 3px var(--orange, #bd7a14); }
body.recall-app .sp-piece.is-snap {
    z-index: 30;
    box-shadow: 0 0 0 2px var(--ra-green), 0 0 24px rgba(47, 143, 91, 0.55);
    transition: left 0.22s ease-out, top 0.22s ease-out, transform 0.22s ease-out, box-shadow 0.2s ease;
}
/* toolbar: Build sits between Trace and Recall */
body.recall-app .recall-toolbar__btn--build.is-active,
body.build-active .recall-toolbar__btn--build {
    background: var(--ra-green);
    color: #fff;
    border-color: transparent;
}
body.study-active .recall-toolbar__btn--build { display: none; }

/* ─────────────────────────────────────────────────────────────────────
   7. BUILD part 2 — READING SORT (js/kanji/reading-sort.js). body.reading-active
   while sorting (build-active stays on for the bands). Two boxes sit on the
   canvas; reading chips float in the bands like the stroke pieces.
   ───────────────────────────────────────────────────────────────────── */
body.recall-app .sp-phase {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 9;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ra-accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    box-shadow: 0 4px 12px var(--ra-glow);
}
body.recall-app .sp-phase:empty { display: none; }

body.recall-app .rs-panel { display: none; }
body.reading-active .rs-panel {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 8;
    padding: 44px 16px 14px;
    gap: 10px;
}
body.reading-active #sp-ink { opacity: 0.1; }
body.reading-active .sp-progress { display: none; }
body.reading-active #canvas-wrap::after { display: none; }
body.recall-app .rs-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    color: var(--ra-ink, var(--text, #23283a));
}
body.recall-app .rs-glyph {
    font-size: 2.2rem;
    line-height: 1;
    font-weight: 500;
    color: var(--ra-accent);
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
body.recall-app .rs-meaning { font-size: 0.95rem; font-weight: 700; opacity: 0.8; }
body.recall-app .rs-boxes {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-height: 0;
}
body.recall-app .rs-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 2px dashed var(--ra-line);
    background: var(--ra-tint);
    padding: 10px 10px 26px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
body.recall-app .rs-box--kun { --ra-box: var(--ra-green); }
body.recall-app .rs-box--on  { --ra-box: var(--ra-accent); }
body.recall-app .rs-box-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ra-box);
    margin-bottom: 8px;
}
body.recall-app .rs-box-title small { font-size: 0.7rem; letter-spacing: 0; text-transform: none; opacity: 0.7; margin-left: 4px; }
body.recall-app .rs-box-body { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; flex: 1; }
body.recall-app .rs-box-count {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--ra-box);
    opacity: 0.85;
}
body.recall-app .rs-box.is-over { border-style: solid; border-color: var(--ra-box); background: var(--ra-card, #fff); transform: scale(1.02); box-shadow: 0 8px 22px var(--ra-glow); }
body.recall-app .rs-box.is-hit { animation: rs-box-hit 0.5s ease; }
@keyframes rs-box-hit { 0% { box-shadow: 0 0 0 0 var(--ra-box); } 100% { box-shadow: 0 0 0 14px rgba(0,0,0,0); } }
body.recall-app .rs-box.is-wrong { animation: ra-shake 0.45s ease; border-color: var(--ra-red); }
body.recall-app .rs-box.is-full { border-style: solid; border-color: var(--ra-box); box-shadow: 0 0 0 3px var(--ra-glow), 0 0 22px var(--ra-glow); }
body.recall-app .rs-box.is-empty { opacity: 0.55; }
body.recall-app .rs-hint {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.6;
}
body.recall-app .rs-panel.is-complete .rs-box { border-style: solid; border-color: var(--ra-green); }
body.recall-app .rs-panel.is-complete .rs-boxes { animation: sp-complete 0.9s ease-out; }

/* the reading chips */
body.recall-app .rs-chip {
    position: absolute;
    z-index: 20;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ra-card, #fff);
    color: var(--ra-ink, var(--text, #23283a));
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    white-space: nowrap;
    box-shadow: 0 0 0 1.5px var(--line-2, #d7cdb6), 0 6px 16px rgba(40, 50, 70, 0.12);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow 0.15s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.4s ease;
}
html.dark body.recall-app .rs-chip { box-shadow: 0 0 0 1.5px var(--line-2, #3a3f52), 0 6px 16px rgba(0, 0, 0, 0.4); }
body.recall-app .rs-chip .rs-oku { opacity: 0.55; font-weight: 500; }
body.recall-app .rs-chip:hover { box-shadow: 0 0 0 1.5px var(--ra-line), 0 8px 22px var(--ra-glow); }
body.recall-app .rs-chip.is-dragging { cursor: grabbing; z-index: 60; transition: none; box-shadow: 0 0 0 2px var(--ra-accent), 0 18px 40px rgba(40, 50, 70, 0.22); }
body.recall-app .rs-chip.is-returning { transition: left 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1), top 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1), transform 0.4s ease, box-shadow 0.15s ease; }
body.recall-app .rs-chip.is-wrong { animation: ra-shake 0.45s ease; box-shadow: 0 0 0 3px var(--ra-red), 0 0 22px rgba(196, 66, 66, 0.4); }
body.recall-app .rs-chip.is-hint { animation: rs-hint 1.2s ease-in-out infinite; }
@keyframes rs-hint { 0%, 100% { box-shadow: 0 0 0 1.5px var(--line-2, #d7cdb6), 0 6px 16px rgba(40,50,70,0.12); } 50% { box-shadow: 0 0 0 3px var(--ra-accent), 0 0 22px var(--ra-glow); } }
body.recall-app .rs-chip.is-snap { z-index: 30; box-shadow: 0 0 0 2px var(--ra-green), 0 0 24px rgba(47, 143, 91, 0.55); transform: rotate(0deg) scale(1.08); }
body.recall-app .rs-chip.is-gone { opacity: 0; transform: scale(0.6); pointer-events: none; }
body.recall-app .rs-chip.is-placed {
    position: static;
    padding: 4px 10px;
    font-size: 0.92rem;
    background: var(--ra-card, #fff);
    box-shadow: 0 0 0 1.5px var(--ra-box);
    color: var(--ra-box);
    cursor: default;
    animation: rs-pop-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes rs-pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 700px) {
    body.reading-active .rs-panel { padding: 40px 10px 10px; gap: 8px; }
    body.recall-app .rs-glyph { font-size: 1.8rem; }
    body.recall-app .rs-chip { font-size: 0.95rem; padding: 6px 11px; }
    body.recall-app .rs-box { padding: 8px 8px 24px; }
}

/* completion card after each Build part: Repeat or Continue (nothing
   advances on its own) */
body.recall-app .sp-done {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 40;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    pointer-events: none;
    width: max-content;            /* left:50% would otherwise cap shrink-to-fit at half the canvas */
    min-width: 230px;
    max-width: 86%;
    padding: 18px 20px 16px;
    border-radius: 20px;
    background: var(--ra-card, #fff);
    box-shadow: 0 0 0 2px var(--ra-green), 0 22px 50px rgba(40, 50, 70, 0.28), 0 0 40px var(--ra-glow);
    text-align: center;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
body.recall-app .sp-done.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
body.recall-app .sp-done-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ra-green);
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}
body.recall-app .sp-done-sub { margin-top: 4px; font-size: 0.8rem; font-weight: 700; opacity: 0.65; letter-spacing: 0.04em; }
body.recall-app .sp-done-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
body.recall-app .sp-done-btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
body.recall-app .sp-done-btn:active { transform: scale(0.96); }
body.recall-app .sp-done-btn--repeat {
    background: transparent;
    color: var(--ra-accent);
    box-shadow: 0 0 0 1.5px var(--ra-line);
}
body.recall-app .sp-done-btn--repeat:hover { background: var(--ra-tint); }
body.recall-app .sp-done-btn--continue {
    background: var(--ra-grad, var(--ra-accent));
    color: #fff;
    box-shadow: 0 8px 20px var(--ra-glow);
}
body.recall-app .sp-done-btn--continue:hover { transform: translateY(-1px); box-shadow: 0 12px 26px var(--ra-glow); }
/* the card sits above the sort panel and the ink; keep the pop out of its way */
body.recall-app .sp-done.show ~ .recall-stage-pop { opacity: 0; }