/* ─────────────────────────────────────────────────────────────────────────
   RECATOOLS · Oriental (水墨) theme — shared across the Art of War series
   (36-stratagems-flashcards, art-of-war-strategy-finder, /art-of-war/ hub).

   Aesthetic: rice paper 宣纸 + ink wash 水墨 + one cinnabar seal 朱砂印.
   The rule that keeps it authentic: paper and ink do the work, red is used
   ONCE per view as the seal/accent — never as a UI colour.

   Self-hosted only: the paper grain and ornaments are inline SVG data URIs,
   and the hanzi face is a SYSTEM 宋体 stack (Songti/SimSun) — shipping a full
   CJK serif webfont would cost several MB on a tool page for no real gain.

   Scope: every rule is namespaced under .o-scope so nothing leaks into the
   platform shell. Wrap a tool's root in <div class="o-scope">.
   ───────────────────────────────────────────────────────────────────────── */

.o-scope {
    /* ink */
    --o-ink: #16150f;
    --o-ink-2: #322e26;
    --o-ink-soft: #5d574c;
    --o-ink-faint: #8d8578;
    /* paper */
    --o-paper: #f2ebda;
    --o-paper-2: #e7dec8;
    --o-paper-3: #ddd2b8;
    /* cinnabar seal + antique gold */
    --o-seal: #9d2b25;
    --o-seal-2: #bf3a2b;
    --o-gold: #a8873c;
    --o-jade: #4d6b58;
    /* structure */
    --o-line: rgba(22, 21, 15, .22);
    --o-line-soft: rgba(22, 21, 15, .1);
    --o-shadow: 0 18px 44px rgba(22, 21, 15, .17);
    /* type */
    --o-han: 'Songti SC', 'Songti TC', 'STSong', 'SimSun', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Noto Serif SC', serif;
    --o-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --o-mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;
}

.o-scope * { box-sizing: border-box; }

/* ── Paper ──────────────────────────────────────────────────────────────
   Warm rice-paper ground with a fibrous grain. The grain is one tiny inline
   SVG turbulence tile, multiplied over a soft two-stop wash so the sheet
   reads as handmade rather than as a flat swatch. */
.o-paper {
    position: relative;
    background-color: var(--o-paper);
    background-image:
        radial-gradient(120% 80% at 12% 0%, rgba(255, 253, 246, .85) 0%, rgba(255, 253, 246, 0) 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(200, 186, 155, .32) 0%, rgba(200, 186, 155, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
    background-blend-mode: normal, normal, multiply;
    background-size: auto, auto, 180px 180px;
}

/* Ink-wash ground — the dark counterpart (card backs, hero bands). */
.o-inkwash {
    position: relative;
    color: var(--o-paper);
    background-color: #14140f;
    background-image:
        radial-gradient(130% 90% at 20% 0%, rgba(84, 88, 80, .55) 0%, rgba(20, 20, 15, 0) 62%),
        radial-gradient(90% 80% at 90% 100%, rgba(56, 62, 58, .5) 0%, rgba(20, 20, 15, 0) 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.24'/%3E%3C/svg%3E");
    background-size: auto, auto, 180px 180px;
}

/* ── Frame: hairline rule + inset keyline, with 回纹 corner marks ─────── */
.o-frame {
    border: 1px solid var(--o-line);
    box-shadow: inset 0 0 0 1px rgba(255, 253, 246, .5), inset 0 0 0 7px transparent, inset 0 0 0 8px var(--o-line-soft);
    border-radius: 2px;
}
.o-corners::before,
.o-corners::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 1px solid var(--o-gold);
    opacity: .65;
    pointer-events: none;
}
.o-corners::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.o-corners::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ── Seal 印章 — cinnabar chop. Carries a number or 2–4 hanzi. ────────── */
.o-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    font-family: var(--o-han);
    font-weight: 700;
    color: #fdf6ec;
    background: linear-gradient(150deg, var(--o-seal-2), var(--o-seal));
    border-radius: 3px;
    letter-spacing: .04em;
    line-height: 1.06;
    /* worn-stone edge: the chop never prints perfectly flat */
    box-shadow: inset 0 0 0 2px rgba(253, 246, 236, .55), 0 2px 6px rgba(157, 43, 37, .3);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.o-seal--sm { width: 42px; height: 42px; font-size: 15px; padding: 4px; }
.o-seal--md { width: 58px; height: 58px; font-size: 19px; padding: 5px; }
.o-seal--stack { writing-mode: vertical-rl; text-orientation: upright; }

/* ── Brush stroke divider ───────────────────────────────────────────────
   A tapered sweep — thick in the middle, dry at the ends, like a loaded
   brush lifting off the page. */
.o-brush {
    height: 10px;
    border: 0;
    margin: 1.4rem 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M4 6.2c60-3 120-4.4 196-4.1 78 .3 150 2.6 226 3.4 62 .7 122 .2 170-1.3-46 3.4-104 5-166 5.3-78 .4-152-1.6-230-2.1C124 7 62 7.4 4 9.4c-2 .1-3-3-0-3.2z' fill='%2316150f' opacity='.72'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: .55;
}
.o-brush--light { filter: invert(1); opacity: .3; }

/* ── Vertical rubric — set names and labels read top-to-bottom ────────── */
.o-vtext {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--o-han);
    letter-spacing: .22em;
    line-height: 1;
}

/* ── Type ───────────────────────────────────────────────────────────────── */
.o-han { font-family: var(--o-han); font-weight: 700; }
.o-title {
    font-family: var(--o-serif);
    color: var(--o-ink);
    line-height: 1.12;
    letter-spacing: .01em;
}
.o-eyebrow {
    font-family: var(--o-mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--o-seal);
}
.o-pinyin {
    font-family: var(--o-serif);
    font-style: italic;
    color: var(--o-ink-soft);
    letter-spacing: .06em;
}

/* ── Buttons — pressed-ink, not material ────────────────────────────────── */
.o-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .62rem 1.25rem;
    font-family: var(--o-serif);
    font-size: .98rem;
    color: var(--o-paper);
    background: linear-gradient(160deg, var(--o-ink-2), var(--o-ink));
    border: 1px solid var(--o-ink);
    border-radius: 2px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 2px 0 rgba(22, 21, 15, .25);
}
.o-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(22, 21, 15, .22); }
.o-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(22, 21, 15, .3); }
.o-btn--seal { background: linear-gradient(150deg, var(--o-seal-2), var(--o-seal)); border-color: var(--o-seal); }
.o-btn--ghost {
    background: transparent;
    color: var(--o-ink);
    border-color: var(--o-line);
    box-shadow: none;
}
.o-btn--ghost:hover { border-color: var(--o-ink); background: rgba(22, 21, 15, .04); }

/* ── Chip / tag ─────────────────────────────────────────────────────────── */
.o-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .7rem;
    font-family: var(--o-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--o-ink-soft);
    background: rgba(255, 253, 246, .6);
    border: 1px solid var(--o-line-soft);
    border-radius: 999px;
}

/* ── Motion: ink bleeding into paper ────────────────────────────────────── */
@keyframes o-bleed {
    from { opacity: 0; filter: blur(6px); transform: translateY(6px); }
    to { opacity: 1; filter: blur(0); transform: none; }
}
.o-bleed-in { animation: o-bleed .5s cubic-bezier(.22, .68, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .o-scope *,
    .o-bleed-in { animation: none !important; transition: none !important; }
}