/* ==========================================================================
   Word Panel — ことばの間 (.wpn-*) the word as a supporting glance
   The mirror of the kanji drawer (css/kanji-page.css .kjp-*): a right-anchored
   washi sheet soaked 7% in the word's own pigment, sliding in as a fusuma
   over the kanji page, carrying the word page condensed to 図録 catalog form
   (owner pick 2026-07-03) at the kanji drawer's width.
   Palette = 和の感性 tokens: washi #FAF7EF · warm sumi ink · stone · indigo
   var(--color-accent) · gold var(--color-gold) (earned only).
   ========================================================================== */

.wpn-overlay {
    position: fixed;
    inset: 0;
    z-index: 9300; /* above the kanji page (9100) + its family aside (9200) */
    display: none;
    opacity: 0;
    transition: opacity 0.32s ease;

    --wpn-ink: #3A3633;           /* warm structural sumi — never cold #000 */
    --wpn-ink-wet: #2f2b28;
    --wpn-prose: #44403c;
    --wpn-stone: var(--color-stone, #57534e);
    --wpn-ghost: #8c857b;
    --wpn-rule: rgba(64, 53, 40, 0.11);
    --wpn-indigo: var(--color-accent, #3D5A80);
    --wpn-gold: var(--color-gold, #C9A96E);
    --wpn-seal: #9e3b2c;          /* hanko red — the 対 opposite mark only */
    --wpn-paper: #FAF7EF;
    --wpn-sheetbg: color-mix(in srgb, #FAF7EF 93%, var(--wpn-tone, #b0a090) 7%);
    --wpn-jp: 'Klee One', 'Noto Sans JP', serif;
    --wpn-ui: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
}
body.wpn-open .wpn-overlay { display: block; }
body.wpn-open { overflow: hidden; }
.wpn-overlay.wpn-in { opacity: 1; }
/* keep painted through the slide-out (kanji page beneath is live meanwhile) */
.wpn-overlay.wpn-out { display: block; pointer-events: none; }

/* the pill/lift trap (components.css bare <button>) dies at the door —
   every button in this room RESTS; each class restates its own look */
.wpn-overlay button {
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.wpn-overlay button:hover,
.wpn-overlay button:active {
    transform: none;
    box-shadow: none;
}
.wpn-overlay :focus-visible {
    outline: 2px solid var(--wpn-indigo);
    outline-offset: 2px;
    border-radius: 2px;
}

/* translucent scrim — the kanji page stays visible beside the glance */
.wpn-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, rgba(44, 44, 44, 0.42) 88%, var(--wpn-tone, #b0a090) 12%);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.wpn-overlay.wpn-in .wpn-scrim { opacity: 1; }

/* the fusuma sheet — exact house motion (mirror .kjp-sheet) */
.wpn-sheet {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: min(760px, 64vw);
    display: flex;
    flex-direction: column;
    background: var(--wpn-sheetbg);
    border-left: 1px solid var(--wpn-rule);
    box-shadow: -14px 0 40px rgba(15, 11, 7, 0.25);
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.33, 0, 0.2, 1);
}
.wpn-overlay.wpn-in .wpn-sheet { opacity: 1; transform: translateX(0); }
.wpn-sheet:focus, .wpn-sheet:focus-visible { outline: none; }

/* 和紙 grain — the app's shared paper, content rides above it */
.wpn-sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.wpn-bar, .wpn-body { position: relative; z-index: 1; }

/* ── bar: a single quiet chevron ─────────────────────────────────────────── */

.wpn-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 12px 0;
}
.wpn-overlay .wpn-back {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-ink);
    transition: background-color 0.18s ease;
}
.wpn-overlay .wpn-back:hover { background: rgba(58, 54, 51, 0.05); }
.wpn-overlay .wpn-back svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── scrolling body ──────────────────────────────────────────────────────── */

.wpn-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 28px 64px;
    color: var(--wpn-ink);
    font-family: var(--wpn-ui);
}

/* inline-JP illumination (the word page's law, panel copy) */
.wpn-jp {
    font-family: var(--wpn-jp);
    font-size: 1.22em;
    color: var(--wpn-ink);
}

/* gated kanji doors minted by tapKanji (.wp-kt) — word-page.css scopes its
   rules to .wp-root, so the panel dresses its own: quiet at rest, indigo
   awake under a pointer (the same "characters are doors" affordance) */
.wpn-overlay .wp-kt { cursor: pointer; transition: color 0.16s ease; }
@media (hover: hover) and (pointer: fine) {
    .wpn-overlay .wp-kt:hover { color: var(--wpn-indigo); }
}

/* provenance whisper for in-panel hops — 縁 — <word> より */
.wpn-overlay .wpn-via {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin: 14px 0 0;
    font: 500 12.5px var(--wpn-jp);
    color: var(--wpn-stone);
    transition: color 0.16s ease;
}
.wpn-overlay .wpn-via:hover { color: var(--wpn-ink); }
.wpn-overlay .wpn-via .dash { color: var(--wpn-ghost); }

/* ── the head (shared by both takes) ─────────────────────────────────────── */

.wpn-head { padding: 20px 0 0; }
.wpn-eyebrow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 12px;
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-eyebrow .pj { font: 500 13px var(--wpn-jp); letter-spacing: 0; text-transform: none; margin-right: 2px; }
.wpn-eyebrow .sep { color: var(--wpn-ghost-soft, #b3aca3); }
.wpn-eyebrow .wpn-regtag { color: var(--wpn-gold-deep, #8a6e35); }

.wpn-word {
    margin: 0;
    font: 600 clamp(30px, 4.6vw, 42px)/1.35 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-word.long { font-size: clamp(26px, 3.8vw, 34px); }
.wpn-word.verylong { font-size: clamp(21px, 3vw, 27px); }
.wpn-word rt {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--wpn-stone);
    letter-spacing: 0.06em;
}
.wpn-say {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
.wpn-say .ro {
    font: 500 13.5px var(--wpn-ui);
    letter-spacing: 0.05em;
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-oto {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-stone);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.wpn-overlay .wpn-oto:hover { background: rgba(58, 54, 51, 0.07); color: var(--wpn-ink); }
.wpn-overlay .wpn-oto svg { width: 17px; height: 17px; }
.wpn-overlay .wpn-oto.playing { color: var(--wpn-indigo); }
.wpn-gloss {
    margin: 12px 0 0;
    font: 400 16.5px/1.55 var(--wpn-ui);
    color: var(--wpn-prose);
    max-width: 52ch;
}
.wpn-acts {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.wpn-overlay .wpn-verb {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding: 9px 18px 10px;
    border: 1.5px solid color-mix(in srgb, var(--vac, var(--wpn-ink)) 55%, transparent);
    border-radius: 3px;
    color: var(--wpn-ink);
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.wpn-overlay .wpn-save { --vac: color-mix(in srgb, var(--color-amber, #A07850) 55%, var(--wpn-ink) 45%); }
.wpn-overlay .wpn-skip { --vac: color-mix(in srgb, var(--color-moss, #6B7F5C) 55%, var(--wpn-ink) 45%); }
.wpn-overlay .wpn-verb:hover {
    border-color: var(--vac, var(--wpn-ink));
    background: color-mix(in srgb, var(--vac, var(--wpn-ink)) 10%, transparent);
}
.wpn-overlay .wpn-verb.active {
    border-color: var(--vac, var(--wpn-ink));
    background: color-mix(in srgb, var(--vac, var(--wpn-ink)) 20%, transparent);
}
.wpn-overlay .wpn-verb .cap { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.wpn-overlay .wpn-verb .jp { font: 400 14px var(--wpn-jp); color: var(--wpn-stone); }

/* ── 一瞥 GLANCE: the mounted print ──────────────────────────────────────── */

.wpn-mount {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    padding: 20px;
    border-radius: 4px;
    background: linear-gradient(150deg,
        color-mix(in srgb, var(--wpn-paper) 96%, #fff) 0%,
        var(--wpn-paper) 42%,
        color-mix(in srgb, var(--wpn-paper) 92%, var(--wpn-tone, #b0a090) 8%) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 251, 243, 0.85),
        inset 0 0 0 1px rgba(120, 90, 60, 0.10),
        0 1px 2px rgba(58, 40, 20, 0.04),
        0 6px 18px rgba(58, 40, 20, 0.05);
}
.wpn-plate {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    overflow: hidden;
    background: color-mix(in srgb, var(--wpn-tone, #b0a090) 11%, var(--wpn-paper));
    box-shadow:
        inset 1px 1px 0 rgba(255, 251, 243, 0.55),
        inset -1px -1px 0 rgba(58, 40, 20, 0.10),
        inset 0 2px 10px rgba(58, 40, 20, 0.10);
}
.wpn-plate .art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.wpn-plate .art.loaded { opacity: 1; }
.wpn-plate .bevel {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 2px;
    box-shadow:
        inset 1px 1px 0 rgba(255, 251, 243, 0.40),
        inset -1px -1px 0 rgba(58, 40, 20, 0.18),
        inset 0 0 0 1px rgba(120, 90, 60, 0.14);
}

/* ── the kanji GLANCE (in-panel view, both takes) ────────────────────────
   Tapping a kanji inside the panel swaps to this compact "what is this
   character?" view — the base kanji page never moves. kun indigo / on
   terracotta follow the kanji page's own reading hues. */
.wpn-kglyph {
    font: 400 84px/1.15 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-kreads {
    display: flex;
    flex-wrap: wrap;
    column-gap: 22px;
    row-gap: 6px;
    margin-top: 10px;
}
.wpn-kreads .kr {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font: 500 15.5px var(--wpn-jp);
}
.wpn-kreads .kr .tag {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-kreads .kun [lang="ja"] { color: var(--wpn-indigo); }
.wpn-kreads .on [lang="ja"] { color: #9E5E43; }
.wpn-kstory {
    margin: 26px 0 0;
    font: 400 14.5px/1.75 var(--wpn-ui);
    color: var(--wpn-prose);
    max-width: 56ch;
}

/* ── 図録 CATALOG: the painting band with the placard set on it ──────────── */

.wpn-band {
    position: relative;
    margin: 14px -28px 0;   /* full-bleed across the sheet */
    /* a MIN height: a long gloss / tall verbs GROW the band instead of
       clipping out of a fixed box (the placard is real content, not overlay) */
    min-height: clamp(300px, 42vh, 420px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.wpn-paint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.wpn-paint.loaded { opacity: 1; }
.wpn-bscrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            var(--wpn-scrimC, rgba(20, 16, 12, 0.84)) 0%,
            var(--wpn-scrimB, rgba(20, 16, 12, 0.55)) 34%,
            transparent 62%);
}
.wpn-band .wpn-head {
    position: relative;   /* above the absolute paint + scrim */
    z-index: 1;
    padding: 96px 28px 20px;   /* the top gap keeps art visible over a tall head */
}
/* placard ink regimes on the painting (safe halo, mirrors the word page) */
.wpn-band.wpn-rg-dark .wpn-head { --wpn-hink: #F6F1E7; }
.wpn-band.wpn-rg-light .wpn-head { --wpn-hink: var(--wpn-ink-wet); }
.wpn-band .wpn-head { text-shadow: 0 1px 14px rgba(14, 10, 6, 0.35); }
.wpn-band .wpn-eyebrow,
.wpn-band .wpn-say .ro { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 82%, transparent); }
.wpn-band .wpn-word { color: var(--wpn-hink, #F6F1E7); }
.wpn-band .wpn-word rt { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 78%, transparent); }
.wpn-band .wpn-rank { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 62%, transparent); }
.wpn-band .wpn-rank b { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 88%, transparent); }
.wpn-band .wpn-gloss { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 92%, transparent); }
.wpn-band .wpn-oto { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 85%, transparent); }
.wpn-band .wpn-oto:hover { background: rgba(250, 247, 239, 0.14); color: var(--wpn-hink, #F6F1E7); }
.wpn-band .wpn-verb { color: var(--wpn-hink, #F6F1E7); text-shadow: none; }
.wpn-band .wpn-verb .jp { color: color-mix(in srgb, var(--wpn-hink, #F6F1E7) 75%, transparent); }
.wpn-band.wpn-rg-dark .wpn-verb {
    border-color: color-mix(in srgb, #F6F1E7 45%, transparent);
    background: rgba(20, 16, 12, 0.18);
}
.wpn-band.wpn-rg-dark .wpn-verb:hover,
.wpn-band.wpn-rg-dark .wpn-verb.active {
    border-color: color-mix(in srgb, #F6F1E7 80%, transparent);
    background: rgba(250, 247, 239, 0.16);
}
.wpn-band .wp-kt:hover { color: inherit; }   /* doors keep placard ink on art */

.wpn-entry { padding-top: 4px; }

/* ── sections (shared grammar) ───────────────────────────────────────────── */

.wpn-sec { margin-top: 36px; }
.wpn-sechead {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin-bottom: 14px;
}
.wpn-ink {
    font: 600 15px var(--wpn-jp);
    color: var(--wpn-ink);
}
.wpn-seclabel {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}

/* 字 built from */
.wpn-anats { display: flex; flex-direction: column; }
.wpn-overlay .wpn-anat {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 11px 8px;
    border-radius: 3px;
    text-align: left;
    transition: background-color 0.18s ease;
}
.wpn-overlay .wpn-anat + .wpn-anat { border-top: 1px solid var(--wpn-rule); }
.wpn-overlay button.wpn-anat:hover { background: rgba(58, 54, 51, 0.045); }
.wpn-overlay .wpn-anat .ak {
    flex: 0 0 auto;
    font: 400 38px/1 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-overlay .wpn-anat.still .ak { color: var(--wpn-stone); }
.wpn-overlay .wpn-anat .atx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 3px;
}
.wpn-overlay .wpn-anat .akw {
    font: 600 13.5px var(--wpn-ui);
    color: var(--wpn-ink);
}
.wpn-overlay .wpn-anat .ard {
    font: 400 12.5px var(--wpn-ui);
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-anat .ard b { font-family: var(--wpn-jp); font-weight: 600; color: var(--wpn-ink); }
.wpn-overlay .wpn-anat .astory {
    flex-basis: 100%;
    font: 400 13px/1.6 var(--wpn-ui);
    color: var(--wpn-prose);
}
.wpn-overlay .wpn-anat .asim {
    flex-basis: 100%;
    font: 400 12px var(--wpn-ui);
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-anat .asim .sj { font-family: var(--wpn-jp); margin-right: 6px; color: var(--wpn-seal); }
.wpn-overlay .wpn-anat .asim b { font-family: var(--wpn-jp); font-weight: 600; }
.wpn-overlay .wpn-anat .ago {
    flex: 0 0 auto;
    align-self: center;
    color: var(--wpn-ghost);
    transition: color 0.18s ease, transform 0.18s ease;
}
.wpn-overlay button.wpn-anat:hover .ago { color: var(--wpn-indigo); transform: translateX(2px); }

/* 例 examples */
.wpn-exs { display: flex; flex-direction: column; gap: 20px; }
.wpn-ex-jp {
    font: 400 19px/2 var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-ex-jp rt { font-size: 9.5px; color: var(--wpn-stone); }
.wpn-ex-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.wpn-ex-foot .ro {
    font: 400 12.5px var(--wpn-ui);
    letter-spacing: 0.04em;
    color: var(--wpn-ghost);
}
.wpn-ex-foot .en {
    font: 400 13.5px/1.5 var(--wpn-ui);
    color: var(--wpn-prose);
}

/* 話 story (catalog) */
.wpn-paper { display: flex; flex-direction: column; gap: 18px; }
.wpn-story-sec { display: flex; gap: 16px; }
.wpn-story-mark {
    flex: 0 0 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}
.wpn-story-mark .sub {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-story-body {
    flex: 1;
    min-width: 0;
    font: 400 14.5px/1.75 var(--wpn-ui);
    color: var(--wpn-prose);
}

/* 活用 conjugation (catalog) */
.wpn-conj { display: flex; flex-direction: column; }
.wpn-conj-row {
    display: grid;
    grid-template-columns: 120px 1fr 34px;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
}
.wpn-conj-row + .wpn-conj-row { border-top: 1px solid var(--wpn-rule); }
.wpn-conj-form { display: flex; flex-direction: column; gap: 1px; }
.wpn-conj-form .jp { font: 500 13.5px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-conj-form .en {
    font: 600 9.5px var(--wpn-ui);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-conj-kana { font: 500 16px var(--wpn-jp); color: var(--wpn-ink-wet); }
.wpn-conj-kana .ro {
    font: 400 12px var(--wpn-ui);
    color: var(--wpn-ghost);
    margin-left: 10px;
}
.wpn-overlay .wpn-conj-on {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-stone);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.wpn-overlay .wpn-conj-on:hover { background: rgba(58, 54, 51, 0.07); color: var(--wpn-ink); }
.wpn-overlay .wpn-conj-on svg { width: 15px; height: 15px; }
.wpn-overlay .wpn-conj-on.playing { color: var(--wpn-indigo); }

/* 数 counting (catalog) */
.wpn-cnt {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.wpn-cnt-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 6px 8px;
    border: 1px solid var(--wpn-rule);
    border-radius: 3px;
}
.wpn-cnt-cell .n { font: 600 10px var(--wpn-ui); color: var(--wpn-ghost); }
.wpn-cnt-cell .kj { font: 500 17px var(--wpn-jp); color: var(--wpn-ink-wet); }
.wpn-cnt-cell .kn { font: 400 12px var(--wpn-jp); color: var(--wpn-stone); }

/* 礼 politeness (catalog) */
.wpn-reg-anchor {
    margin: -4px 0 12px;
    font: 400 13px var(--wpn-ui);
    color: var(--wpn-stone);
}
.wpn-reg-ladder { display: flex; flex-direction: column; }
.wpn-reg-rung {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 3px;
}
.wpn-reg-rung + .wpn-reg-rung { border-top: 1px solid var(--wpn-rule); }
.wpn-reg-rung.wpn-rel { cursor: pointer; transition: background-color 0.18s ease; }
.wpn-reg-rung.wpn-rel:hover { background: rgba(58, 54, 51, 0.045); }
.wpn-reg-rung.is-current {
    background: color-mix(in srgb, var(--wpn-indigo) 7%, transparent);
}
.wpn-reg-role { display: flex; flex-direction: column; gap: 1px; }
.wpn-reg-role .tag {
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wpn-ink);
}
.wpn-reg-role .who { font: 400 11.5px var(--wpn-ui); color: var(--wpn-stone); }
.wpn-reg-word .jp { font: 500 17px var(--wpn-jp); color: var(--wpn-ink-wet); }
.wpn-reg-word .jp rt { font-size: 9px; color: var(--wpn-stone); }
.wpn-reg-word .ro {
    font: 400 12px var(--wpn-ui);
    color: var(--wpn-ghost);
    margin-left: 10px;
}

/* 縁 related rows */
.wpn-rel-grp + .wpn-rel-grp { margin-top: 16px; }
.wpn-rel-m {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 4px;
}
.wpn-rel-m .g { font: 600 15px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-rel-m .g.tai { color: var(--wpn-seal); }
.wpn-rel-m .c {
    font: 600 10px var(--wpn-ui);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-rels { display: flex; flex-direction: column; }
.wpn-rel {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 50px;
    padding: 8px;
    border-radius: 3px;
    text-align: left;
}
.wpn-rel + .wpn-rel { border-top: 1px solid var(--wpn-rule); }
.wpn-rel[role="button"] { cursor: pointer; transition: background-color 0.18s ease; }
.wpn-rel[role="button"]:hover { background: rgba(58, 54, 51, 0.045); }
.wpn-rel-g {
    flex: 0 0 auto;
    font: 600 14px var(--wpn-jp);
    color: var(--wpn-stone);
}
.wpn-rel-g.tai { color: var(--wpn-seal); }
.wpn-rel-tx { flex: 1 1 auto; min-width: 0; }
.wpn-rel-tx .l1 { display: flex; align-items: center; gap: 9px; }
.wpn-rel-tx .lw {
    font: 600 19px var(--wpn-jp);
    color: var(--wpn-ink-wet);
}
.wpn-rel.is-frame .lw { font-weight: 500; color: var(--wpn-ink); }
.wpn-rel-tx .lr { font: 400 12.5px var(--wpn-jp); color: var(--wpn-stone); }
.wpn-rel-tx .l2 {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 1px;
    font: 400 12.5px var(--wpn-ui);
    color: var(--wpn-stone);
    overflow: hidden;
    white-space: nowrap;
}
.wpn-rel-tx .l2 .gl {
    color: var(--wpn-prose);
    overflow: hidden;
    text-overflow: ellipsis;
}
.wpn-rel-tx .l2 .dash { color: var(--wpn-ghost); }
.wpn-overlay .wpn-rel-on {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wpn-stone);
    transition: background-color 0.18s ease, color 0.18s ease;
}
.wpn-overlay .wpn-rel-on:hover { background: rgba(58, 54, 51, 0.07); color: var(--wpn-ink); }
.wpn-overlay .wpn-rel-on svg { width: 14px; height: 14px; }
.wpn-overlay .wpn-rel-on.playing { color: var(--wpn-indigo); }
.wpn-rel-chip {
    flex: 0 0 auto;
    width: 54px;
    height: 40px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(58, 40, 20, 0.10);
}
.wpn-rel-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.wpn-rel-chip img.loaded { opacity: 1; }
.wpn-rel-chip.is-frame {
    background:
        repeating-linear-gradient(135deg, transparent 0 5px, rgba(58, 40, 20, 0.05) 5px 6px),
        color-mix(in srgb, var(--wpn-paper) 88%, var(--wpn-tone, #b0a090) 12%);
}
.wpn-rank {
    flex: 0 0 auto;
    font: 500 10.5px var(--wpn-ui);
    letter-spacing: 0.04em;
    color: var(--wpn-ghost);
}
.wpn-rank b { font-weight: 600; color: var(--wpn-stone); }
.wpn-rank.is-rare { font-style: italic; }

/* ── foot: the honest door to the full page + colophon ──────────────────── */

.wpn-foot { margin-top: 40px; }
.wpn-overlay .wpn-fullpage {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--wpn-rule);
    border-radius: 3px;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.wpn-overlay .wpn-fullpage:hover {
    border-color: color-mix(in srgb, var(--wpn-ink) 30%, transparent);
    background: rgba(58, 54, 51, 0.03);
}
.wpn-overlay .wpn-fullpage .jp { font: 500 14px var(--wpn-jp); color: var(--wpn-ink); }
.wpn-overlay .wpn-fullpage .tx {
    font: 600 11px var(--wpn-ui);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-overlay .wpn-fullpage .go {
    margin-left: auto;
    color: var(--wpn-ghost);
    transition: color 0.18s ease, transform 0.18s ease;
}
.wpn-overlay .wpn-fullpage:hover .go { color: var(--wpn-indigo); transform: translateX(2px); }
.wpn-colo {
    margin-top: 12px;
    font: 500 10.5px var(--wpn-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpn-stone);
}
.wpn-colo .dim { color: var(--wpn-ghost); }

/* ── homecoming glow on the kanji page's reading row ─────────────────────── */

#kanjiPage .kjw-row.wpn-home {
    animation: wpnHome 1.1s ease-out;
}
@keyframes wpnHome {
    0% { background-color: color-mix(in srgb, var(--kjp-indigo, #3D5A80) 16%, transparent); }
    100% { background-color: transparent; }
}

/* ── responsive + reduced motion ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .wpn-sheet { width: 100vw; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wpn-overlay,
    .wpn-scrim,
    .wpn-sheet { transition: none; }
    .wpn-sheet { transform: none; }
    .wpn-plate .art,
    .wpn-paint,
    .wpn-rel-chip img { transition: none; opacity: 1; }
    #kanjiPage .kjw-row.wpn-home { animation: none; }
}