/* GLOBAL VARS */
:root {
    --bg1: #0a0a0a; --bg2: #121212; --pink: #ff69b4; --hot: #ff1493; --gold: #ffd700; --ink: #f0e6ff; --panel: rgba(10,10,10,.8);
    --btn-bg: linear-gradient(145deg, #8b008b, var(--hot)); --btn-txt: var(--gold);
    --p1-color: #B0E0E6; --p2-color: #FFB6C1;
    --font-main: 'Lora', serif;
    --font-story: 'Lora', serif;
    --story-size: 1.15em;
    --line-height: 1.8;
    --letter-spacing: 0.02em;
    --cursor-url: url('cursor-dollar-plane-64.png');
    /* Header height for corridor centering — measured by JS, fallback for initial load */
    --sb-header-height: 80px;
}

/* ═══════════════════════════════════════════════════════════════════
   READING STYLES - SCOPED TO BOOK INTERIOR ONLY
   App UI, cover, and environment are NEVER affected by reading style
   ═══════════════════════════════════════════════════════════════════ */

/* Book Interior Variables (default: Print/Easy - light page) */
:root {
    --page-bg: #faf8f3;
    --page-text: #1a1a1a;
    --page-accent: #444;
}

/* Paper Style: Print (default) - clean white page */
.story-content.paper-print,
.story-content {
    --page-bg: #faf8f3;
    --page-text: #1a1a1a;
    --page-accent: #333;
}

/* Paper Style: Cream - warm easy reading */
.story-content.paper-cream {
    --page-bg: #fffdd0;
    --page-text: #1a1a1a;
    --page-accent: #555;
}

/* Paper Style: Sepia - vintage book feel */
.story-content.paper-sepia {
    --page-bg: #f5e6c8;
    --page-text: #3d2817;
    --page-accent: #5c4033;
}

/* Paper Style: Warm Paper (Night Mode safe) */
.story-content.paper-warm {
    --page-bg: #2c2418;
    --page-text: #d4c8b0;
    --page-accent: #a08060;
}

/* Paper Style: Dark Page (Night Mode safe) */
.story-content.paper-dark {
    --page-bg: #1e1e1e;
    --page-text: #e0e0e0;
    --page-accent: #888;
}

/* Apply paper styles to story text container */
#storyText, .story-pages-container {
    background: var(--page-bg);
    color: var(--page-text);
    border-radius: 4px;
    padding: 20px 30px;
    margin: 10px 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   READER THEMES — Scoped to story content ONLY (does not affect UI)
   ═══════════════════════════════════════════════════════════════════ */
#storyContent.theme-sepia { background: #f5e6c8; color: #3e2f22; }
#storyContent.theme-sepia #storyText, #storyContent.theme-sepia .story-page { background: #f5e6c8; color: #3e2f22; }
#storyContent.theme-midnight { background: #111; color: #ccc; }
#storyContent.theme-midnight #storyText, #storyContent.theme-midnight .story-page { background: #111; color: #ccc; }
#storyContent.theme-print { background: #f8f8f8; color: #111; }
#storyContent.theme-print #storyText, #storyContent.theme-print .story-page { background: #f8f8f8; color: #111; }
#storyContent.theme-easy { background: #fffdd0; color: #000; }
#storyContent.theme-easy #storyText, #storyContent.theme-easy .story-page { background: #fffdd0; color: #000; }

/* LEGACY: body-level theme vars kept for reference but not applied — themes scope to #storyContent only */
body.theme-sepia { --bg1:#2c2218; --bg2:#3e2f22; --pink:#d2b48c; --hot:#8b4513; --gold:#ffa500; --ink:#f5deb3; --panel:rgba(40,30,20,0.8); --btn-bg:#5c4033; --btn-txt:#f5deb3; }
body.theme-midnight { --bg1:#000000; --bg2:#111111; --pink:#444; --hot:#666; --gold:#888; --ink:#ccc; --panel:rgba(20,20,20,0.9); --btn-bg:#333; --btn-txt:#aaa; }
body.theme-print { --bg1:#e0e0e0; --bg2:#f0f0f0; --pink:#333; --hot:#000; --gold:#444; --ink:#111; --panel:rgba(255,255,255,0.95); --btn-bg:#ccc; --btn-txt:#000; }
body.theme-easy { --bg1:#fffdd0; --bg2:#fff8c0; --pink:#333; --hot:#000; --gold:#555; --ink:#000; --panel:rgba(255,255,240,0.95); --btn-bg:#000; --btn-txt:#fff; }

/* Print Fixes (legacy, no longer triggered) */
body.theme-print .fate-card h3, body.theme-easy .fate-card h3 { color: #000 !important; text-shadow: none !important; font-weight: bold; }
body.theme-print .section-title, body.theme-easy .section-title { text-shadow: none; color: var(--hot); }

html, body { margin:0; padding:0; background:linear-gradient(135deg,var(--bg1),var(--bg2)); color:var(--ink); font-family:var(--font-main); overflow-x:hidden; min-height:100vh; }
body { text-align:center; padding:0; transition: background 0.3s, color 0.3s; }

/* Custom scrollbar — grey/charcoal to match dark theme */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #666; }
* { scrollbar-width: thin; scrollbar-color: #444 #1a1a1a; }

/* ═══════════════════════════════════════════════════════════════════
   NIGHT MODE - Dims app environment only
   Book cover and book object remain unchanged
   ═══════════════════════════════════════════════════════════════════ */

body.night-mode {
    --bg1: #151515;
    --bg2: #1a1a1a;
    --pink: #8a5a6a;
    --hot: #7a4a5a;
    --gold: #a08050;
    --ink: #b0a090;
    --panel: rgba(20, 20, 20, 0.9);
}

/* Night Mode: Subdued UI controls */
body.night-mode button:not(.story-content button) {
    filter: brightness(0.8);
}

body.night-mode .nav-btn,
body.night-mode .settings-btn {
    opacity: 0.7;
}

/* Night Mode: Book object remains untouched */
body.night-mode .book-object,
body.night-mode .book-cover,
body.night-mode .book-cover-image {
    filter: none !important;
}

/* Night Mode: Story content uses selected paper style (unchanged) */
body.night-mode #storyText,
body.night-mode .story-pages-container {
    /* Paper style is controlled by paper-* class, not night mode */
}

/* UTILITY CLASSES */
.hidden { display:none !important; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 3000; display: flex; align-items: center; justify-content: center; flex-direction: column; }

/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*                                                                                 */
/*                    PLAQUE BUTTON MATERIAL REGIME (LOCKED)                       */
/*                                                                                 */
/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*
 * Storybound buttons are objects, not flat UI.
 * They represent plaques, cards, instruments, decisions made visible.
 *
 * MATERIAL: Brushed metal plaque with horizontal grain
 * GEOMETRY: Rectangular, all right angles, no rounding
 * BORDERS: Outer (brighter), Inner (darker/inset)
 * CORNERS: Square caps on all 4 corners
 * DIAMONDS: Center markers at top and bottom
 *
 * STATE CHANGES: Brightness/contrast/saturation ONLY
 * ❌ No glow, no transform, no geometry changes
 *
 * MANTRA: Storybound does not click. Storybound commits.
 */

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PLAQUE MATERIAL VARIABLES                                                       */
/* ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Black Plaque (Default) */
    --plaque-black-base: #0d0d0d;
    --plaque-black-grain: linear-gradient(90deg,
        rgba(40, 40, 40, 0.3) 0%,
        rgba(25, 25, 25, 0.2) 15%,
        rgba(45, 45, 45, 0.25) 30%,
        rgba(20, 20, 20, 0.2) 45%,
        rgba(50, 50, 50, 0.3) 60%,
        rgba(30, 30, 30, 0.2) 75%,
        rgba(40, 40, 40, 0.25) 90%,
        rgba(25, 25, 25, 0.2) 100%
    );
    --plaque-black-outer: #3a3a3a;
    --plaque-black-inner: #000000;
    --plaque-black-text: var(--gold);

    /* Gold Plaque */
    --plaque-gold-base: #8b6914;
    --plaque-gold-grain: linear-gradient(90deg,
        rgba(255, 235, 150, 0.25) 0%,
        rgba(180, 140, 50, 0.2) 15%,
        rgba(255, 220, 120, 0.3) 30%,
        rgba(200, 160, 60, 0.2) 45%,
        rgba(255, 240, 160, 0.25) 60%,
        rgba(190, 150, 55, 0.2) 75%,
        rgba(255, 225, 130, 0.3) 90%,
        rgba(180, 140, 50, 0.2) 100%
    );
    --plaque-gold-outer: #ffd700;
    --plaque-gold-inner: #5a4510;
    --plaque-gold-text: #1a1008;

    /* ═══════════════════════════════════════════════════════════════════════════
       LOCKED PLAQUE STATE — Neutral grey filigree and text
       Material (base + grain) unchanged. Only decoration color shifts to grey.
       No opacity, no grayscale, no filter. Plaque remains physically present.
       ═══════════════════════════════════════════════════════════════════════════ */
    --plaque-locked-border: #555555;      /* Grey filigree (was gold/bright) */
    --plaque-locked-text: #666666;        /* Grey inscribed text */
    --plaque-locked-inner: #222222;       /* Grey inner border */

    /* ═══════════════════════════════════════════════════════════════════════════
       ART DECO PLAQUE GEOMETRY — Exact structural dimensions
       ═══════════════════════════════════════════════════════════════════════════ */

    /* Filigree gold — warm metallic, not neon, not UI yellow */
    --filigree-gold: #d4af37;
    --filigree-gold-dark: #a8892c;

    /* Frame geometry */
    --outer-frame-inset: 3px;           /* Distance from plaque edge to outer filigree */
    --inner-frame-inset: 8px;           /* Distance from plaque edge to inner filigree */
    --outer-frame-thickness: 2px;       /* Outer filigree line weight */
    --inner-frame-thickness: 1px;       /* Inner filigree line weight */
    --frame-spacing: 5px;               /* Space between outer and inner frames */

    /* Corner ornaments */
    --corner-size: 5px;                 /* Small square corner ornaments */

    /* Center diamond */
    --diamond-size: 8px;                /* Diamond width/height before rotation */
}

/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*                                                                                 */
/*                   PNG ASSET INTEGRATION — AUTHORITATIVE RULES                   */
/*                                                                                 */
/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*
 * ASSET LOCATION (LOCKED): /public/assets/ui/
 *
 * CORE RULES (NON-NEGOTIABLE):
 * 1. PNG assets are authoritative — do NOT stretch, scale, slice, or resize
 * 2. Width/height set to asset's natural pixel size
 * 3. If different size needed, swap the asset — do not transform
 * 4. No background-size: cover — use contain only
 * 5. At breakpoints, swap assets, do not scale
 * 6. Gleam overlay allowed as ::after pseudo-element only
 */

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     PNG BUTTON BASE — Asset-First Pattern                        */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn-png {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;

    /* OVERRIDE global button gradients — PNG takes full authority */
    background-color: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* RIGHT EDGE ARTIFACT FIX: Clip 1px from right edge to hide white line in PNG */
    overflow: hidden;
    clip-path: inset(0 1px 0 0);

    cursor: pointer;
    overflow: hidden; /* GLEAM CONTAINMENT: gleam must not escape button bounds */

    /* Typography — Lora for PNG buttons */
    color: var(--filigree-gold);
    font-family: 'Lora', serif;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);

    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* PNG Button — Complete outline/border suppression for all states */
.sb-btn-png:focus,
.sb-btn-png:focus-visible,
.sb-btn-png:focus-within,
.sb-btn-png:active,
.sb-btn-png:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     BLACK-GOLD BUTTONS — Size Variants                           */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* XL: 640x176 @2x → 320x88 display */
.sb-btn-png.xl {
    background-image: url('/assets/ui/Black-Gold-640x176.png') !important;
    width: 320px;
    height: 88px;
}

/* LG: 520x144 @2x → 260x72 display */
.sb-btn-png.lg {
    background-image: url('/assets/ui/Black-Gold-520x144.png') !important;
    width: 260px;
    height: 72px;
}

/* MD: 400x112 @2x → 200x56 display */
.sb-btn-png.md {
    background-image: url('/assets/ui/Black-Gold-400x112.png') !important;
    width: 200px;
    height: 56px;
}

/* SM: 320x88 @2x → 160x44 display */
.sb-btn-png.sm {
    background-image: url('/assets/ui/Black-Gold-320x88.png') !important;
    width: 160px;
    height: 44px;
}

/* XS: 120x36 @2x → 60x18 display */
.sb-btn-png.xs {
    background-image: url('/assets/ui/Black-Gold-120x36.png') !important;
    width: 60px;
    height: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     BLACK-GOLD FLAVOR BUTTON                                     */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Flavor: 440x104 @2x → 220x52 display */
.sb-btn-png.flavor {
    background-image: url('/assets/ui/Black-Gold-Flavor-440x104.png') !important;
    width: 220px;
    height: 52px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     BLACK-GOLD TEXT BUTTONS                                      */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Text LG: 840x128 @2x → 420x64 display */
.sb-btn-png.text-lg {
    background-image: url('/assets/ui/Black-Gold-Text-840x128.png') !important;
    width: 420px;
    height: 64px;
}

/* Text MD: 640x112 @2x → 320x56 display */
.sb-btn-png.text-md {
    background-image: url('/assets/ui/Black-Gold-Text-640x112.png') !important;
    width: 320px;
    height: 56px;
}

/* Text SM: 420x64 @2x → 210x32 display */
.sb-btn-png.text-sm {
    background-image: url('/assets/ui/Black-Gold-Text-420x64.png') !important;
    width: 210px;
    height: 32px;
}

/* TOS Button: 420x64 @2x → 210x32 display */
.sb-btn-png.tos {
    background-image: url('/assets/ui/Black-Gold-Text-420x64.png') !important;
    width: 210px;
    height: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     AGE GATE BUTTONS                                             */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Age Confirm: 320x88 @2x → 160x44 display */
.sb-btn-png.age-confirm {
    background-image: url('/assets/ui/Black-Gold-320x88.png') !important;
    width: 160px;
    height: 44px;
}

/* Age Exit: 120x36 @2x → 60x18 display */
.sb-btn-png.age-exit {
    background-image: url('/assets/ui/Black-Gold-120x36.png') !important;
    width: 60px;
    height: 18px;
    opacity: 0.7;
}

.sb-btn-png.age-exit:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     CONSENT & MODAL BUTTONS                                      */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Consent Primary: 320x88 @2x → 160x44 display */
.sb-btn-png.consent-primary {
    background-image: url('/assets/ui/Black-Gold-320x88.png') !important;
    width: 160px;
    height: 44px;
}

/* Consent Secondary: 320x88 @2x → 160x44 display, reduced opacity */
.sb-btn-png.consent-secondary {
    background-image: url('/assets/ui/Black-Gold-320x88.png') !important;
    width: 160px;
    height: 44px;
    opacity: 0.75;
}

.sb-btn-png.consent-secondary:hover {
    opacity: 0.9;
}

/* Modal Exit: 120x36 @2x → 60x18 display */
.sb-btn-png.modal-exit {
    background-image: url('/assets/ui/Black-Gold-120x36.png') !important;
    width: 60px;
    height: 18px;
    opacity: 0.7;
}

.sb-btn-png.modal-exit:hover {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     BLACK-GOLD TOGGLE BUTTON                                     */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Toggle: 360x96 @2x → 180x48 display */
.sb-btn-png.toggle {
    background-image: url('/assets/ui/Black-Gold-toggle-360x96.png') !important;
    width: 180px;
    height: 48px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     DSP PANELS — Design Semantic Prosody                         */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.dsp-panel {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* DSP Wide: 1800x440 */
.dsp-panel.wide {
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    width: 1800px;
    height: 440px;
}

/* DSP Tall: 720x1040 */
.dsp-panel.tall {
    background-image: url('/assets/ui/DSP-Gold-Blk-720x1040.png');
    width: 720px;
    height: 1040px;
}

/* DSP content overlay */
.dsp-panel .dsp-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    pointer-events: none;
}

.dsp-panel .dsp-content > * {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     GLEAM OVERLAY — Pseudo-Element Animation                     */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn-png::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%; /* Start just off left edge */
    width: 30%; /* Narrow gleam band */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.sb-btn-png:hover:not(:disabled):not(.is-loading)::after {
    opacity: 1;
    animation: gleam-sweep 0.7s ease-out forwards;
}

/* GLEAM-SWEEP: Element-local gleam animation
   - Starts just off left edge (-30%)
   - Travels across to just off right edge (140%)
   - Single pass only, no looping */
@keyframes gleam-sweep {
    0% {
        left: -30%;
        opacity: 1;
    }
    100% {
        left: 140%;
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     PNG BUTTON STATES                                            */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn-png:disabled,
.sb-btn-png.is-disabled,
.sb-btn-png.is-locked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.sb-btn-png:disabled::after,
.sb-btn-png.is-disabled::after,
.sb-btn-png.is-locked::after {
    display: none;
}

/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*                                                                                 */
/*                        .sb-btn — BUTTON MATERIAL AUTHORITY                      */
/*                                                                                 */
/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*
 * .sb-btn is the SOLE AUTHORITY for button material in Storybound.
 *
 * MATERIAL LOCK (CRITICAL):
 *   - Background may NEVER be overridden by any state or variant
 *   - No gradients, images, colors, or shadows may replace the brushed metal
 *   - No inline styles may define button background
 *
 * STATE CHANGES communicate via:
 *   ✓ opacity
 *   ✓ contrast
 *   ✓ saturation
 *   ✓ subtle inner shadow
 *   ✓ text color shift
 *
 * STATE CHANGES may NEVER use:
 *   ✗ new gradients
 *   ✗ glow effects
 *   ✗ background replacement
 *   ✗ box-shadow halos
 *
 * VARIANTS (.sb-btn--gold, .sb-btn--black) may only adjust:
 *   - hue
 *   - brightness
 *   - text contrast
 *
 * They MUST reuse the same brushed metal texture logic.
 */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*                                                                                 */
/*          CANONICAL ART DECO PLAQUE BUTTON — BASE OBJECT (AUTHORITATIVE)         */
/*                                                                                 */
/* ███████████████████████████████████████████████████████████████████████████████ */
/* ███████████████████████████████████████████████████████████████████████████████ */
/*                                                                                 */
/* ONTOLOGY: A button is a ceremonial Art Deco plaque that happens to be          */
/*           clickable. NOT a UI control.                                          */
/*                                                                                 */
/* GEOMETRY (MANDATORY):                                                           */
/*   1. Plaque Face — Perfect rectangle, sharp 90° corners, NO rounding/chamfers  */
/*   2. Inner Filigree Frame — Thin gold line, inset, breaks at top for diamond   */
/*   3. Center Diamond — Rotated 45° square, embedded in top of inner frame       */
/*   4. Outer Filigree Frame — Thin gold line, parallel to inner, slightly thicker*/
/*   5. Corner Ornaments — Small squares at each corner                           */
/*                                                                                 */
/* MATERIAL: Blackened metal (deep charcoal) with directional brushed grain       */
/* FILIGREE: Warm metallic gold (#d4af37)                                          */
/*                                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 44px;
    overflow: hidden; /* GLEAM CONTAINMENT: gleam must not escape button bounds */

    /* ════════════════════════════════════════════════════════════════════════════
       1. PLAQUE FACE — Perfect rectangle, sharp 90° corners
       ════════════════════════════════════════════════════════════════════════════ */
    border-radius: 0 !important;
    clip-path: none !important;
    border: none !important;

    /* ════════════════════════════════════════════════════════════════════════════
       BLACKENED METAL MATERIAL — Brushed horizontal grain, machined finish
       Near-black backing with visible grain contrast (not pure void)
       ════════════════════════════════════════════════════════════════════════════ */
    background-color: #141414;

    /* ════════════════════════════════════════════════════════════════════════════
       BEVEL — Originates from inner filigree edge (carved around ornament)
       ════════════════════════════════════════════════════════════════════════════ */
    box-shadow:
        /* Inner bevel — carved from inner filigree inward */
        inset 0 0 0 var(--inner-frame-inset) rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px var(--inner-frame-inset) rgba(0, 0, 0, 0.5),
        inset -1px -1px 1px var(--inner-frame-inset) rgba(255, 255, 255, 0.03);
    background-image:
        /* ════════════════════════════════════════════════════════════════════════
           5. CORNER ORNAMENTS — Small gold squares at each corner
           ════════════════════════════════════════════════════════════════════════ */
        /* Top-left corner */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Top-right corner */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Bottom-left corner */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Bottom-right corner */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),

        /* ════════════════════════════════════════════════════════════════════════
           4. OUTER FILIGREE FRAME — Slightly thicker gold rectangle
           ════════════════════════════════════════════════════════════════════════ */
        /* Left edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Right edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Top edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Bottom edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),

        /* ════════════════════════════════════════════════════════════════════════
           2. INNER FILIGREE FRAME — Thin gold rectangle, continuous (no diamond gap)
           ════════════════════════════════════════════════════════════════════════ */
        /* Left edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Right edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Top edge — continuous */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Bottom edge */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),

        /* ════════════════════════════════════════════════════════════════════════
           BRUSHED METAL GRAIN — Horizontal directional brushing
           Increased contrast for readability on dark backgrounds
           ════════════════════════════════════════════════════════════════════════ */
        linear-gradient(90deg,
            rgba(70, 70, 70, 0.5) 0%,
            rgba(40, 40, 40, 0.25) 12%,
            rgba(65, 65, 65, 0.45) 25%,
            rgba(35, 35, 35, 0.2) 37%,
            rgba(75, 75, 75, 0.5) 50%,
            rgba(45, 45, 45, 0.3) 62%,
            rgba(60, 60, 60, 0.4) 75%,
            rgba(38, 38, 38, 0.22) 87%,
            rgba(68, 68, 68, 0.45) 100%
        );

    background-size:
        /* Corner ornaments: 5px squares */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame: 2px thick lines */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame: 1px thick lines — continuous rectangle */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Brushed grain: full coverage */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges — continuous rectangle */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Brushed grain */
        0 0;

    background-repeat: no-repeat;

    /* ════════════════════════════════════════════════════════════════════════════
       TYPOGRAPHY — Inscription style, engraved appearance
       ════════════════════════════════════════════════════════════════════════════ */
    color: var(--filigree-gold);
    font-family: 'lust-script-display', 'Playfair Display', 'Times New Roman', serif;
    font-size: 1em;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);

    /* Interaction affordance */
    cursor: pointer;

    /* ════════════════════════════════════════════════════════════════════════════
       FOCUS — Suppress all native browser outlines
       ════════════════════════════════════════════════════════════════════════════ */
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Suppress focus outline absolutely */
.sb-btn:focus,
.sb-btn:focus-visible,
.sb-btn:focus-within {
    outline: none !important;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* DIAMOND ACCENTS — REMOVED for clarity                                          */
/* Previous conic-gradient diamonds had triangular/directional read               */
/* Prefer subtraction over unclear embellishment                                   */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn::before {
    /* Reserved for future use — currently empty */
    content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* GLEAM SYSTEM — Moving light across static metal surface                         */
/* ::after is reserved for gleam — do not use for decoration                       */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -35%; /* Start just off left edge */
    width: 35%; /* Moderate gleam width */
    height: 100%;
    /* Soft metallic highlight — not UI-driven */
    background: linear-gradient(
        100deg,
        transparent 0%,
        transparent 25%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 55%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3; /* Above diamond (z-index: 2) */
}

/* Hover: Gleam sweeps — metallic, not UI-driven */
.sb-btn:hover:not(:disabled):not(.is-loading)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.sb-btn:active:not(:disabled):not(.is-loading)::after {
    left: 110%;
    animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* LOCKED/DISABLED STATE — Grey filigree replaces gold, text greys out             */
/* Material unchanged. No opacity, no grayscale, no filter.                        */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-btn:disabled,
.sb-btn.is-disabled,
.sb-btn.is-locked {
    cursor: not-allowed;
    pointer-events: none;

    /* Grey inscribed text */
    color: var(--plaque-locked-text) !important;

    /* Replace gold filigree with grey in all background layers */
    background-image:
        /* Corner ornaments - grey */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Outer frame - grey */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Inner frame - grey */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Brushed grain - unchanged */
        linear-gradient(90deg,
            rgba(60, 60, 60, 0.4) 0%,
            rgba(35, 35, 35, 0.2) 12%,
            rgba(55, 55, 55, 0.35) 25%,
            rgba(30, 30, 30, 0.2) 37%,
            rgba(65, 65, 65, 0.4) 50%,
            rgba(40, 40, 40, 0.25) 62%,
            rgba(50, 50, 50, 0.3) 75%,
            rgba(35, 35, 35, 0.2) 87%,
            rgba(55, 55, 55, 0.35) 100%
        ) !important;
}

/* Grey diamonds on locked state */
/* Locked state ::before — diamonds removed */
.sb-btn:disabled::before,
.sb-btn.is-disabled::before,
.sb-btn.is-locked::before {
    content: none;
}

/* No gleam on locked plaques */
.sb-btn:disabled::after,
.sb-btn.is-disabled::after,
.sb-btn.is-locked::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PLAQUE GLEAM — Element-local metallic light sweep                               */
/* Single pass from left edge to right edge, no looping                            */
/* Gleam is bound ONLY to its element — never escapes visible bounds               */
/* ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes plaque-gleam {
    0% { left: -35%; opacity: 0; }
    10% { opacity: 1; }
    90% { left: 140%; opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .sb-btn--gold — BRUSHED GOLD PLAQUE VARIANT                                     */
/* Same Art Deco geometry, gold material with dark bronze filigree                 */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn--gold {
    /* Gold brushed metal base */
    background-color: #9a7b2a;
    background-image:
        /* Corner ornaments - dark bronze */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Outer frame - dark bronze */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Inner frame - dark bronze */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Brushed gold grain */
        linear-gradient(90deg,
            rgba(255, 235, 150, 0.35) 0%,
            rgba(180, 140, 50, 0.2) 12%,
            rgba(255, 220, 120, 0.4) 25%,
            rgba(200, 160, 60, 0.25) 37%,
            rgba(255, 240, 160, 0.35) 50%,
            rgba(190, 150, 55, 0.2) 62%,
            rgba(255, 225, 130, 0.4) 75%,
            rgba(180, 140, 50, 0.25) 87%,
            rgba(255, 235, 150, 0.35) 100%
        ) !important;

    /* Dark text for contrast on gold */
    color: var(--plaque-gold-text);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2),
        0 -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

/* Gold variant — diamonds removed */
.sb-btn--gold::before {
    content: none;
}

/* Gold gleam — warmer cream highlight */
.sb-btn--gold::after {
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 240, 0.1) 45%,
        rgba(255, 255, 240, 0.18) 50%,
        rgba(255, 255, 240, 0.1) 55%,
        transparent 65%,
        transparent 100%
    );
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .sb-btn--black — Explicit black plaque (same as default, for semantic clarity)  */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-btn--black {
    /* Inherits default .sb-btn material */
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .sb-btn SEMANTIC STATES — No visual change to material                          */
/* State is communicated by context and text, not by plaque appearance             */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Paywalled: Material unchanged — context communicates restriction */
.sb-btn.is-paywalled {
    /* No visual change — gleam still works */
}

/* Loading: Cursor change only — material unchanged */
.sb-btn.is-loading {
    cursor: wait;
}

.sb-btn.is-loading::after {
    /* Continuous subtle gleam during loading */
    animation: plaque-gleam-slow 2s ease-in-out infinite;
}

/* EXCEPTION: Loading state uses slow continuous gleam for feedback
   Still element-bound, but loops to indicate ongoing activity */
@keyframes plaque-gleam-slow {
    0% { left: -35%; }
    50% { left: 140%; }
    100% { left: 140%; }
}

/* Primary/Warning/Danger: No visual distinction — plaque is plaque */
.sb-btn.is-primary,
.sb-btn.is-warning,
.sb-btn.is-danger {
    /* Material unchanged — context and text communicate meaning */
}

/* Finalized: Material unchanged — text communicates finalization */
.sb-btn.is-finalized {
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* GLOBAL BUTTON STATES — Apply to any button element                              */
/* These extend the Plaque regime to all buttons, not just .sb-btn                 */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Loading state — cursor change + slow gleam */
button.is-loading,
.dsp-btn.is-loading {
    cursor: wait;
}

button.is-loading::after,
.dsp-btn.is-loading::after {
    animation: plaque-gleam-slow 2s ease-in-out infinite;
}

/* Finalized state — cursor change only */
button.is-finalized,
.dsp-btn.is-finalized {
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* LOCKED SECTION — For locking non-button containers                              */
/* No opacity, grayscale, or filter. Section remains visually present but inert.   */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.locked-section {
    pointer-events: none;
    /* NO filter, NO opacity — locked sections stay physically present */
}

/* Grey out text and borders in locked sections */
.locked-section button,
.locked-section .dsp-btn {
    border-color: var(--plaque-locked-border) !important;
    color: var(--plaque-locked-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .sb-btn SIZE VARIANTS — Adjust padding/font, geometry scales automatically      */
/* Sharp 90° corners maintained at all sizes (NO chamfers)                         */
/* ═══════════════════════════════════════════════════════════════════════════════ */

.sb-btn--sm {
    padding: 10px 28px;
    font-size: 0.9em;
}

.sb-btn--lg {
    padding: 18px 52px;
    font-size: 1.15em;
}

.sb-btn--xl {
    padding: 22px 64px;
    font-size: 1.3em;
}

/* Full width */
.sb-btn--full {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* END .sb-btn BUTTON MATERIAL AUTHORITY                                           */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Legacy alias for backward compatibility */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .sb-plaque-btn — ART DECO CEREMONIAL PLAQUE (Background-image filigree system) */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-plaque-btn {
    position: relative;
    overflow: hidden; /* Contain gleam */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;

    /* NO ROUNDING - Rectangular plaque */
    border-radius: 0 !important;
    border: none !important;

    /* MATERIAL LOCK — Brushed metal base with filigree overlay */
    background-color: var(--plaque-black-base);
    background-image:
        /* Corner ornaments: 4 small squares at outer frame corners */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Outer filigree frame */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Inner filigree frame (top split for diamond) */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Brushed metal grain */
        var(--plaque-black-grain);

    background-size:
        /* Corner ornaments */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Grain */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(50% + 6px) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Grain */
        0 0;

    background-repeat: no-repeat;

    /* Typography — engraved appearance */
    color: var(--filigree-gold);
    font-family: var(--font-main);
    font-size: 1em;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);
    letter-spacing: 0.02em;

    cursor: pointer;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Diamond accents removed — prefer subtraction over unclear embellishment */
.sb-plaque-btn::before {
    content: none;
}

/* Focus suppression */
.sb-plaque-btn:focus,
.sb-plaque-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PLAQUE STATE CHANGES — Gleam ONLY, no brightness/opacity changes                */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Gleam element for sb-plaque-btn — element-bound */
.sb-plaque-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps across — material unchanged */
.sb-plaque-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.sb-plaque-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* Disabled: Grey filigree and text — NO filter, NO opacity */
.sb-plaque-btn:disabled {
    cursor: not-allowed;
    color: var(--plaque-locked-text) !important;
    background-image:
        /* Grey corner ornaments */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey outer frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey inner frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        var(--plaque-black-grain);
}

.sb-plaque-btn:disabled::before {
    content: none;
}

.sb-plaque-btn:disabled::after {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* GOLD PLAQUE VARIANT — Dark filigree on gold base                                */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-plaque-btn.plaque-gold {
    background-color: var(--plaque-gold-base);
    background-image:
        /* Dark corner ornaments on gold */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Dark outer frame */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Dark inner frame */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        var(--plaque-gold-grain);
    color: var(--plaque-gold-text);
    text-shadow:
        0 1px 0 rgba(255, 215, 0, 0.3),
        0 -1px 0 rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

.sb-plaque-btn.plaque-gold::before {
    content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PLAQUE SIZE VARIANTS                                                            */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Small plaque */
.sb-plaque-btn.plaque-sm {
    padding: 8px 20px;
    font-size: 0.9em;
    --corner-size: 4px;
    --diamond-size: 5px;
}

/* Large plaque */
.sb-plaque-btn.plaque-lg {
    padding: 14px 40px;
    font-size: 1.2em;
    --corner-size: 6px;
    --diamond-size: 7px;
}

/* Extra large plaque (primary actions) */
.sb-plaque-btn.plaque-xl {
    padding: 16px 48px;
    font-size: 1.4em;
    --corner-size: 7px;
    --diamond-size: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* BREADCRUMB PLAQUE — Scaled down, same material                                  */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-plaque-btn.plaque-breadcrumb {
    padding: 6px 12px;
    font-size: 10em;
    --plaque-corner-size: 3px;
    --plaque-diamond-size: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* END PLAQUE MATERIAL REGIME                                                      */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* STORYPASS DISABLED STATE (Dirty intensity) */
#optUnlock.storypass-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    border-color: #555 !important;
}
#optUnlock.storypass-disabled h4 { color: #777 !important; }
#optUnlock.storypass-disabled button {
    background: #444 !important;
    color: #777 !important;
    cursor: not-allowed;
}

/* TYPOGRAPHY */
h1, h2, .section-title { font-family:'lust-script-display','lust-script',serif !important; color:var(--pink); text-shadow:0 0 15px var(--hot); font-weight:400; }
.section-title { font-size:2.2em; margin:35px 0 15px; border-top:1px solid rgba(255,105,180,0.2); padding-top:20px; }
.section-title .optional-label { font-family: 'Lora', serif; font-size: 0.45em; color: var(--ink); opacity: 0.6; font-style: italic; text-shadow: none; font-weight: normal; margin-left: 8px; }
.flavor-title { margin-top: 15px; border-top: none; padding-top: 0; }
.instruction-text { font-family: 'Lora', serif; font-size: 0.65em; color: var(--ink); opacity: 0.7; vertical-align: middle; margin-left: 8px; letter-spacing: 0; text-shadow: none; font-weight: normal; display:inline-block; }
.subtitle { font-size: 1.2em; color: var(--gold); font-style: italic; opacity: 0.9; margin-bottom: 30px; }

/* LAYOUT GRID */
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 95%; margin: 20px auto 0; }
@media (max-width: 600px) { .grid-2-col { grid-template-columns: 1fr; } }

/* Setup container - override inline max-width */
#setup {
    max-width: none !important;
    width: 100%;
    /* No top spacing - header sits flush */
    padding-top: 0;
    /* Black velvet background — soft, subtle, non-directional */
    background:
        /* Subtle noise texture for velvet feel */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
        /* Solid black base */
        #0a0a0a;
}

/* Story Shape Row - layout owner for character tarot cards + mini-deck */
/* ROW MUST OWN ACTIVE STATE — claim corridor until Continue pressed */
.story-shape-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap; /* Keep cards in single row, shrink to fit */
    padding: 0 20px;
    /* Full viewport height minus header for proper centering */
    min-height: calc(100vh - var(--sb-header-height));
    overflow: hidden;
    width: 100%;
    background: var(--bg-dark, #0a0a0a);
    position: relative;
    z-index: 1;
    isolation: isolate; /* Prevent background bleed */
    box-sizing: border-box;
}

/* Character cards and deck stay in row - allow shrinking to fit */
#characterSectionRow > .character-tarot-card,
#characterSectionRow > .destiny-mini-deck {
    flex-shrink: 1;
}

/* Continue button wrapper - hidden, control plane owns Continue now */
#characterSectionRow > .character-continue-wrapper {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* IDENTITY PLATES — BLACK/GOLD face, NO flip, NO blue gradients                   */
/* These are identity plates, not reveal cards                                      */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.character-tarot-card {
    width: 206px;
    max-width: 45vw; /* Scale down on narrow viewports */
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    /* CHARACTER CARD ART PNG — frame baked into PNG, no CSS border */
    background-image: url('/assets/card-art/cards/Character-face.png');
    background-size: 102%; /* Slightly oversized to hide PNG edge irregularities */
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a0a; /* Match background to hide any gaps */
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    padding: 0; /* Moved to content wrapper for edge-to-edge PNG */
    box-sizing: border-box;
    overflow: hidden; /* Clip any PNG edge irregularities */
    /* Subtle drop shadow only — no gold glow (frame in PNG) */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    /* NO flip, NO perspective, NO rotateY */
    transform: none !important;
    perspective: none !important;
    /* Simple fade/scale selection only */
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}


/* Identity plate selection highlight — subtle glow only, no border */
.character-tarot-card.selected,
.character-tarot-card:focus-within {
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.3), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* NO hover transforms */
.character-tarot-card:hover {
    transform: none !important;
}

/* Love Interest card uses different PNG */
#loveInterestCharacterCard {
    background-image: url('/assets/card-art/cards/Love-Interest-face.png');
}

/* Headers hidden — titles baked into PNG */
.character-tarot-header {
    display: none;
}

.character-tarot-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto; /* Don't stretch - natural height */
    overflow: hidden;
    /* Padding to keep content inside black border lines of PNG */
    padding: 60px 25px 48px 25px;
    background: transparent;
}

.character-tarot-card .character-field {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center label and input */
    flex: 0 0 auto; /* Neutralize legacy row-layout flex-basis (e.g. 90px) that controls height in column */
    width: 100%;
    max-width: none; /* Override legacy .character-field-gender/pronouns 100px cap */
    min-width: 0;    /* Override legacy 80px floor */
    /* No bounding box - only inputs are embossed */
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.character-tarot-card .character-field label {
    font-size: 0.65em;
    margin-bottom: 2px;
    width: 100%;
    text-align: center;
    /* Engraved label: deep charcoal with subtle highlight */
    color: #1a1612;
    text-shadow: 0 1px 0 rgba(218, 165, 32, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.character-tarot-card .character-field input,
.character-tarot-card .character-field select {
    font-size: 0.8em;
    padding: 4px 6px;
    width: 100%; /* Full width of container */
    box-sizing: border-box;
    /* Pressed/embossed input field */
    background: rgba(0, 0, 0, 0.08);
    /* Inset shadow: dark on top/right, highlight on bottom/left */
    border: none;
    border-radius: 3px;
    box-shadow:
        inset 2px 2px 3px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 248, 220, 0.2);
    /* Engraved text: deep charcoal */
    color: #1a1612;
    text-shadow: 0 1px 0 rgba(218, 165, 32, 0.12);
    outline: none;
}

.character-tarot-card .character-field input::placeholder {
    font-size: 0.85em;
    color: rgba(30, 25, 15, 0.35);
}

/* Hide custom gender/pronoun inputs completely - no space taken */
.character-tarot-card .custom-gender-input,
.character-tarot-card .custom-gender-input.hidden,
.character-tarot-card input.hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    border: none !important;
    overflow: hidden !important;
    position: absolute !important;
    visibility: hidden !important;
}

.character-tarot-card .character-field input:focus,
.character-tarot-card .character-field select:focus {
    background: rgba(0, 0, 0, 0.1);
    box-shadow:
        inset 2px 2px 3px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 248, 220, 0.15);
    outline: none;
}

/* Ancestry field rotating placeholder - position within pressed field */
.character-tarot-card .character-field-ancestry {
    position: relative;
}

.character-tarot-card .character-field-ancestry .rotating-placeholder {
    position: absolute;
    top: 14px;  /* Align with input top (label ~12px + 2px margin) */
    left: 6px;
    right: 6px;
    height: 22px;
    font-size: 0.65em;
    color: rgba(30, 25, 15, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* Override global 10px padding-top that pushes text out of small container */
.character-tarot-card .character-field-ancestry .rotating-placeholder-inner {
    padding-top: 4px;
}

/* Hide native placeholder when rotating suggestions are present */
/* Specificity must beat .character-tarot-card .character-field input::placeholder (0-2-2) */
.character-tarot-card .character-field-ancestry input.ancestry-field::placeholder {
    opacity: 0;
}

/* Character tarot card with fate overlay - positioned relatively for absolute children */
.character-tarot-card.has-fate-card {
    position: relative;
}

/* Landing highlight when destiny card fills fields */
.character-tarot-card.fate-landed {
    box-shadow: 0 0 20px rgba(218, 165, 32, 0.6), inset 0 0 15px rgba(218, 165, 32, 0.2);
    transition: box-shadow 0.3s ease;
}

/* Fate overlay on character tarot cards - absolute positioning within card */
/* BLACK / GOLD — No brown/sepia tones */
.character-tarot-card .fate-overlay-card {
    position: absolute;
    inset: 2px; /* Inside the border */
    background: linear-gradient(145deg, #0a0a0a 0%, #121212 50%, #0a0a0a 100%);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    z-index: 5;
    /* Gold inner glow */
    box-shadow: inset 0 0 15px rgba(218, 165, 32, 0.15);
    /* Simple fade/scale entry — NO flip */
    animation: fateOverlayReveal 0.3s ease-out forwards;
}

@keyframes fateOverlayReveal {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.character-tarot-card .fate-overlay-card .fate-card-name {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 8px;
    line-height: 1.2;
}

.character-tarot-card .fate-overlay-card .fate-card-details {
    font-family: 'Lora', serif;
    font-size: 0.75em;
    color: rgba(245, 240, 230, 0.8);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE CHARACTER CARDS — Narrow screens                                     */
/* Move fields up so Ancestry stays visible; shrink Destiny deck 50%              */
/* ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Reduce top padding to push fields up — keeps Ancestry visible */
    .character-tarot-fields {
        padding: 40px 20px 30px 20px;
        gap: 2px;
    }

    .character-tarot-card .character-field label {
        font-size: 0.55em;
        margin-bottom: 1px;
    }

    .character-tarot-card .character-field input,
    .character-tarot-card .character-field select {
        font-size: 0.7em;
        padding: 3px 5px;
    }

    /* Shrink Destiny deck 55% — transform + negative margins to reclaim layout space */
    #characterSectionRow .destiny-mini-deck-stack {
        transform: scale(0.55);
        transform-origin: center center;
        margin: -56px -33px;
    }

    /* Reduce row gap so cards can breathe */
    .story-shape-row {
        gap: 12px;
        padding: 0 8px;
    }

    /* Allow character cards to shrink further */
    #characterSectionRow .character-tarot-card {
        min-width: 110px;
    }
}

@media (max-width: 500px) {
    /* Extra-narrow: even tighter field spacing */
    .character-tarot-fields {
        padding: 30px 15px 20px 15px;
        gap: 1px;
    }

    .character-tarot-card .character-field label {
        font-size: 0.5em;
    }

    .character-tarot-card .character-field input,
    .character-tarot-card .character-field select {
        font-size: 0.65em;
        padding: 2px 4px;
    }

    .story-shape-row {
        gap: 6px;
        padding: 0 4px;
    }

    #characterSectionRow .character-tarot-card {
        min-width: 90px;
    }

    /* Shrink Destiny deck further on extra-narrow */
    #characterSectionRow .destiny-mini-deck-stack {
        transform: scale(0.4);
        transform-origin: center center;
        margin: -74px -44px;
    }
}

/* Continue button wrapper - bottom center */
.character-continue-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* Ensure button z-index works correctly */
    position: relative;
    z-index: 100; /* Above cards (10-50), below button (1000) within same context */
    /* CLIP FIX: Ensure button is not clipped by parent */
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* Story Shape Character - internal layout only, width owned by parent */
.story-shape-character {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    overflow-x: auto;
}

.story-shape-character .destiny-card {
    flex: 0 0 auto;
}

.story-shape-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}

.story-shape-character .character-field-name {
    width: clamp(15ch, 20ch, 30ch);
    flex: 0 0 auto;
    min-width: auto;
}

.story-shape-character .character-field-gender {
    width: 6ch;
    min-width: 4ch;
    flex: 0 0 auto;
}

.story-shape-character .character-field-pronouns {
    width: 6ch;
    min-width: 4ch;
    flex: 0 0 auto;
}

.story-shape-character .character-field-ancestry {
    width: calc(20ch + 3ch + 10px);
    flex: 0 0 auto;
    min-width: auto;
}

/* Neutralize legacy overrides within story-shape-character */
.story-shape-row > .character-block-horizontal.story-shape-character {
    width: auto;
    max-width: max-content;
    margin: 0;
    flex: 0 0 auto;
}

.story-shape-character .character-fields-side {
    flex: 0 0 auto;
}

.story-shape-character .character-fields-row {
    flex-direction: row;
    flex-wrap: wrap;
    /* Match Row 1 (Name + Age + gap) exactly to constrain intrinsic width */
    max-width: calc(20ch + 3ch + 10px);
}

.story-shape-character .character-field {
    width: auto;
}

/* Neutralize media query overrides within story-shape-character */
@media (max-width: 600px) {
    .story-shape-row > .character-block-horizontal.story-shape-character {
        flex-direction: row;
        align-items: flex-start;
        width: auto;
        max-width: max-content;
    }

    .story-shape-character .character-destiny-side {
        margin-bottom: 0;
    }

    /* Prevent legacy rules from forcing column layout on fields */
    .story-shape-character .character-fields-row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .story-shape-character .character-field {
        width: auto;
    }
}

/* STORY READING EXPERIENCE */
#storyText {
    text-align: left;
    max-width: 100%;
    min-height: 300px;
    margin-bottom: 20px;
    font-size: var(--story-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-family: var(--font-story);
    position: relative;
    overflow: hidden;
}
#storyText p { margin-bottom: 1.5em; }

/* PAGINATED STORY PAGES */
.story-pages-container {
    position: relative;
    width: 100%;
    min-height: 300px;
}

.story-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition: none;
    padding: 10px 5px;
    box-sizing: border-box;
    background: transparent;
    border-radius: 8px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.1);
}

.story-page.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
}

.story-page.page-prev {
    transform: translateX(-30px);
    z-index: 1;
}

.story-page.page-next {
    transform: translateX(30px);
    z-index: 1;
}

/* Page Turn Animation - Forward */
.story-page.turning-out {
    animation: pageTurnOut 500ms ease-in-out forwards;
}

.story-page.turning-in {
    animation: pageTurnIn 500ms ease-in-out forwards;
}

/* Page Turn Animation - Backward */
.story-page.turning-out-reverse {
    animation: pageTurnOutReverse 500ms ease-in-out forwards;
}

.story-page.turning-in-reverse {
    animation: pageTurnInReverse 500ms ease-in-out forwards;
}

@keyframes pageTurnOut {
    0% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
        transform-origin: left center;
    }
    50% {
        box-shadow: -5px 0 20px rgba(0,0,0,0.3);
    }
    100% {
        opacity: 0;
        transform: translateX(-50px) rotateY(-5deg);
        transform-origin: left center;
    }
}

@keyframes pageTurnIn {
    0% {
        opacity: 0;
        transform: translateX(50px) rotateY(5deg);
        transform-origin: right center;
        visibility: visible;
    }
    50% {
        box-shadow: 5px 0 20px rgba(0,0,0,0.2);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
        transform-origin: right center;
    }
}

@keyframes pageTurnOutReverse {
    0% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
        transform-origin: right center;
    }
    50% {
        box-shadow: 5px 0 20px rgba(0,0,0,0.3);
    }
    100% {
        opacity: 0;
        transform: translateX(50px) rotateY(5deg);
        transform-origin: right center;
    }
}

@keyframes pageTurnInReverse {
    0% {
        opacity: 0;
        transform: translateX(-50px) rotateY(-5deg);
        transform-origin: left center;
        visibility: visible;
    }
    50% {
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
        transform-origin: left center;
    }
}

/* Page Navigation Controls */
.page-nav-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
    padding: 10px;
}

/* DSP MATERIAL: Page nav button — Ceremonial Metal Plaque */
.page-nav-btn {
    position: relative;
    overflow: hidden; /* Contain gleam */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 0 !important;
    border: none !important;
    font-size: 0.9em;
    cursor: pointer;

    /* MATERIAL LOCK — Brushed metal with Art Deco filigree */
    background-color: var(--plaque-black-base);
    background-image:
        /* Corner ornaments */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Outer filigree frame */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Inner filigree frame (top split for diamond) */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Brushed metal grain */
        var(--plaque-black-grain);

    background-size:
        /* Corner ornaments */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Grain */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(50% + 6px) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Grain */
        0 0;

    background-repeat: no-repeat;

    /* Typography — engraved */
    color: var(--filigree-gold);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);

    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Diamond accents removed — prefer subtraction over unclear embellishment */
.page-nav-btn::before {
    content: none;
}

/* Focus suppression */
.page-nav-btn:focus,
.page-nav-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Gleam element for page-nav-btn — element-bound */
.page-nav-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps across — material unchanged */
.page-nav-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.page-nav-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* Disabled: Grey filigree and text — NO filter, NO opacity */
.page-nav-btn:disabled {
    cursor: not-allowed;
    color: var(--plaque-locked-text) !important;
    background-image:
        /* Grey corner ornaments */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey outer frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey inner frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        var(--plaque-black-grain);
}

.page-nav-btn:disabled::before {
    content: none;
}

.page-nav-btn:disabled::after {
    display: none;
}

.page-indicator {
    font-size: 0.85em;
    color: var(--ink);
    opacity: 0.7;
    font-family: var(--font-main);
    min-width: 80px;
    text-align: center;
}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .story-page,
    .story-page.turning-out,
    .story-page.turning-in,
    .story-page.turning-out-reverse,
    .story-page.turning-in-reverse {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }

    .story-page.turning-out,
    .story-page.turning-out-reverse {
        opacity: 0;
    }

    .story-page.turning-in,
    .story-page.turning-in-reverse {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }
}

.story-image {
    max-width: 100%;
    border-radius: 10px;
    margin: 14px 0;
    border: 1px solid rgba(255,105,180,0.25);
    box-shadow: 0 0 18px rgba(0,0,0,0.35);
}

/* DECISION SNAPSHOTS */
.decision-snapshot {
    text-align: center;
    color: var(--gold);
    font-style: italic;
    border-top: 1px solid var(--pink);
    border-bottom: 1px solid var(--pink);
    padding: 15px 10px;
    margin: 25px 0;
    background: rgba(0,0,0,0.3);
    font-family: 'lust-script-display', serif;
    font-size: 1.2em;
    line-height: 1.4;
}
.decision-snapshot span {
    display: block;
    font-family: var(--font-main);
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-bottom: 5px;
    color: var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* TITLE + SCENE — Printed-book elements inside page (AUTHORITATIVE)          */
/* Typography: Lora font, lower visual salience, no UI decoration             */
/* ═══════════════════════════════════════════════════════════════════════════ */
.story-page-title {
    font-family: 'Lora', serif;
    font-size: 1.8em;
    font-weight: 400;
    color: rgba(245, 240, 230, 0.7); /* Lower salience than body text */
    text-align: center;
    margin: 0 0 8px 0;
    padding: 0;
    letter-spacing: 0.02em;
    /* No glow, no gradients, no UI decoration */
}

.story-page-title.compact {
    font-size: 1.2em;
}

.story-page-scene {
    font-family: 'Lora', serif;
    font-size: 0.9em;
    font-weight: 400;
    color: rgba(160, 160, 160, 0.7); /* Grey, lower salience */
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0;
    letter-spacing: 0.6em;
    font-variant: small-caps;
    text-transform: none;
    /* No glow, no gradients, no UI decoration */
}

/* Synopsis inherits printed-book typography */
#storyText .scene-synopsis {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 0.95em;
    color: rgba(245, 240, 230, 0.6);
    text-align: center;
    margin: 0 20px 20px;
    line-height: 1.5;
}

/* DIALOGUE */
.dialogue-block { display: block; margin: 15px 0; padding-left: 20px; border-left: 3px solid rgba(255,255,255,0.2); font-style: italic; font-weight: 500; font-size: 1.1em; }
.p1-dia { color: var(--p1-color); border-color: var(--p1-color); }
.p2-dia { color: var(--p2-color); border-color: var(--p2-color); }

/* STORY DIALOGUE — Solo mode renders as plain text (no styling needed) */
/* Couple mode uses .p1-dia and .p2-dia for speaker-identified dialogue only */

body.lgbtq-mode .p1-dia { color: #bf55ec !important; border-color: #bf55ec !important; }
body.lgbtq-mode .p2-dia { color: #ffae00 !important; border-color: #ffae00 !important; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DSP MATERIAL: Buttons — Matte black metal, 2px double gold border, no radius */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* GLOBAL BUTTON STYLES — Art Deco Ceremonial Plaque                               */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/*
 * All <button> elements inherit the Art Deco filigree plaque material.
 * This ensures visual consistency across the entire application.
 *
 * MATERIAL LOCK applies here:
 *   - No state may override material properties
 *   - Filigree drawn via background-image layers
 */
button, .dsp-btn {
    position: relative;
    overflow: hidden; /* Contain gleam */
    padding: 10px 30px;
    border-radius: 0 !important;
    border: none !important;
    font-size: 1em;
    cursor: pointer;
    font-family: var(--font-main);

    /* MATERIAL LOCK — Brushed metal with Art Deco filigree */
    background-color: var(--plaque-black-base);
    background-image:
        /* Corner ornaments */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Outer filigree frame */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Inner filigree frame (top split for diamond) */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Brushed metal grain */
        var(--plaque-black-grain);

    background-size:
        /* Corner ornaments */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Grain */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(50% + 6px) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Grain */
        0 0;

    background-repeat: no-repeat;

    /* Typography — engraved */
    color: var(--filigree-gold);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);

    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Diamond accents removed — prefer subtraction over unclear embellishment */
button::before, .dsp-btn::before {
    content: none;
}

/* Gleam element — element-bound diagonal highlight that sweeps across on hover */
button::after, .dsp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps across — material unchanged */
button:hover:not(:disabled)::after, .dsp-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Focus suppression */
button:focus, .dsp-btn:focus,
button:focus-visible, .dsp-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Active: Gleam holds at edge — pressed state implied by stillness */
button:active:not(:disabled)::after, .dsp-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* LOCKED/DISABLED — Inert plaque with grey filigree and text                      */
/* Material unchanged. No opacity. No grayscale. No filter.                        */
/* ═══════════════════════════════════════════════════════════════════════════════ */
button:disabled, .dsp-btn:disabled {
    cursor: not-allowed;
    color: var(--plaque-locked-text) !important;
    background-image:
        /* Grey corner ornaments */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey outer frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey inner frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        var(--plaque-black-grain);
}

button:disabled::before, .dsp-btn:disabled::before {
    content: none;
}
button:disabled::after, .dsp-btn:disabled::after {
    display: none;
}
/* DSP Secondary Button: Identical material — no opacity differentiation */
.dsp-btn-secondary {
    /* Material inherited from button — identical appearance */
}
.dsp-btn-secondary:hover:not(:disabled)::after {
    /* Inherits gleam behavior */
}
/* Small button variant */
.small-btn {
    font-size: 0.9em;
    padding: 8px 16px;
    /* Material inherited from button — no need to redefine */
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DSP MATERIAL: Corner Squares — Decorative corner caps on buttons/inputs     */
/* Aligned with Plaque Material Regime — uses --plaque-corner-size             */
/* ═══════════════════════════════════════════════════════════════════════════ */
.dsp-corner-btn,
.dsp-corner-input {
    position: relative;
}
/* Corner squares: using plaque corner size */
.dsp-corner-btn::before,
.dsp-corner-btn::after,
.dsp-corner-input::before,
.dsp-corner-input::after {
    content: '';
    position: absolute;
    width: var(--plaque-corner-size, 5px);
    height: var(--plaque-corner-size, 5px);
    background: var(--plaque-black-outer, #3a3a3a);
    pointer-events: none;
    z-index: 1;
}
.dsp-corner-btn::before,
.dsp-corner-input::before {
    top: calc(-1 * var(--plaque-border-outer, 2px));
    left: calc(-1 * var(--plaque-border-outer, 2px));
}
.dsp-corner-btn::after,
.dsp-corner-input::after {
    top: calc(-1 * var(--plaque-border-outer, 2px));
    right: calc(-1 * var(--plaque-border-outer, 2px));
}
/* Bottom corners via inner pseudo-element wrapper */
.dsp-corner-btn .dsp-corners,
.dsp-corner-input .dsp-corners {
    position: absolute;
    inset: calc(-1 * var(--plaque-border-outer, 2px));
    pointer-events: none;
}
.dsp-corner-btn .dsp-corners::before,
.dsp-corner-btn .dsp-corners::after,
.dsp-corner-input .dsp-corners::before,
.dsp-corner-input .dsp-corners::after {
    content: '';
    position: absolute;
    width: var(--plaque-corner-size, 5px);
    height: var(--plaque-corner-size, 5px);
    background: var(--plaque-black-outer, #3a3a3a);
}
.dsp-corner-btn .dsp-corners::before,
.dsp-corner-input .dsp-corners::before {
    bottom: 0;
    left: 0;
}
.dsp-corner-btn .dsp-corners::after,
.dsp-corner-input .dsp-corners::after {
    bottom: 0;
    right: 0;
}

/* Typography: Text sits on plaque, no emboss/bevel — clean contrast only */
.dsp-inset-text,
button,
.dsp-btn,
.small-btn {
    text-shadow: none;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* AUTOFILL FIX: Prevent browser autofill from overriding dark background      */
/* ═══════════════════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1a1a1a inset !important;
    -webkit-text-fill-color: var(--gold) !important;
    background-color: #1a1a1a !important;
    caret-color: var(--gold) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Ancestry/Fate field autofill override */
.fate-field:-webkit-autofill,
.ancestry-field:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0d0d0d inset !important;
    -webkit-text-fill-color: #f5f0e6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* COVER GALLERY → STAGE (TRUST REPAIR PHASE 2)                                */
/* The selected cover is a BOOK OBJECT, not a thumbnail                        */
/* Altar, not shelf — visual dominance, no competing borders                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COVER GALLERY — TWO-COLUMN LAYOUT (AUTHORITATIVE)                          */
/* Desktop: Hero + side thumbnail rail                                         */
/* Mobile: Hero + bottom carousel                                              */
/* Hero NEVER shares vertical space with thumbnails on desktop                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

#coverGalleryModal.overlay {
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.cover-gallery-box {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: 90vw;
    padding: 0 !important;
}

/* Gallery Stage Layout: Two-column on desktop */
.gallery-stage {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "thumbs hero"
        "thumbs label"
        "controls controls";
    gap: 20px;
    align-items: start;
}

/* CENTRAL COVER — Book object with presence */
.gallery-stage-cover {
    grid-area: hero;
    position: relative;
    width: 320px;
    height: 450px;
    /* Book object shadow — presence, not decoration */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 8px 25px rgba(0, 0, 0, 0.4);
    /* Subtle book-edge depth */
    border-left: 6px solid #1a1a1a;
    border-radius: 2px 8px 8px 2px;
    overflow: hidden;
    background: #1a1a1a;
    /* Reserve space before rendering — prevent layout shift */
    min-height: 450px;
}

/* HERO IMAGE CONTAINMENT — Full visibility mandatory (AUTHORITATIVE) */
.gallery-stage-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* NEVER cover — entire image must be visible */
    background: #1a1a1a; /* Letterbox fill */
}

/* Cover placeholder when no image */
.gallery-stage-cover .cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #252525, #1a1a1a);
    color: #666;
}

.gallery-stage-cover .cover-placeholder .book-icon {
    font-size: 4em;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Stage label below central cover — museum-placard hierarchy */
.gallery-stage-label {
    grid-area: label;
    text-align: center;
    padding: 12px 0;
}

.gallery-stage-label .stage-name {
    color: var(--gold);
    font-size: 1em;
    font-weight: 500;
    font-family: var(--font-main);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Sketch Cover label — museum-placard tone, context not content */
.gallery-stage-label .stage-status {
    color: #666;
    font-size: 0.8em;
    font-weight: 400;
    margin-top: 4px;
    font-family: var(--font-main);
    letter-spacing: 0.03em;
}

/* THUMBNAIL RAIL — Side-mounted vertical navigation (desktop) */
.gallery-thumbnails {
    grid-area: thumbs;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
}

.gallery-thumbnail {
    width: 60px;
    height: 85px;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0.5;
    background: #1a1a1a;
    border: 1px solid #333;
    flex-shrink: 0;
}

.gallery-thumbnail:hover {
    opacity: 0.7;
    transform: scale(1.05);
}

.gallery-thumbnail.active {
    opacity: 1;
    border-color: var(--gold);
    /* Single subtle indicator — no competing borders */
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumbnail .thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    font-size: 1.2em;
    color: #555;
}

.gallery-thumbnail.locked .thumb-placeholder {
    color: #444;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CONTROL BAND — Dedicated zone outside hero visual field (AUTHORITATIVE)    */
/* Buttons must NEVER overlap cover image                                      */
/* Buttons must NEVER clip at any viewport size                                */
/* ═══════════════════════════════════════════════════════════════════════════ */
.gallery-control-band {
    grid-area: controls;
    width: 100%;
    padding: 20px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gallery-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 100%;
}

/* Gallery Buttons — Literary typography (matches Fate Cards / book UI) */
.sb-btn--gallery {
    font-family: var(--font-main);
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 16px;
    color: #999;
    background: transparent;
    border: 1px solid #444 !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    /* Visual salience: low → neutral. Never emphasized. */
}

.sb-btn--gallery:hover:not(:disabled) {
    color: var(--gold);
    border-color: #666 !important;
}

.sb-btn--gallery:disabled {
    color: #444;
    border-color: #333 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Progress info — subdued, contextual */
.gallery-progress-info {
    color: #555;
    font-size: 0.75em;
    font-family: var(--font-main);
    letter-spacing: 0.03em;
    text-align: center;
}

.gallery-progress-info .progress-divider {
    margin: 0 8px;
    color: #444;
}

/* Loading state for generating cover */
.gallery-stage-cover.is-generating {
    position: relative;
}

.gallery-stage-cover.is-generating::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-stage-cover .generating-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 3px solid #333;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MOBILE: Bottom carousel — NEVER side rail on mobile                         */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cover-gallery-box {
        padding: 10px !important;
    }

    /* Mobile: Single column, thumbnails below hero */
    .gallery-stage {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "label"
            "thumbs"
            "controls";
        justify-items: center;
    }

    .gallery-stage-cover {
        width: 280px;
        height: 400px;
        min-height: 400px;
    }

    /* Mobile: Horizontal carousel at bottom */
    .gallery-thumbnails {
        flex-direction: row;
        max-height: none;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: center;
        padding: 10px 0;
    }

    .gallery-thumbnail {
        width: 50px;
        height: 70px;
    }
}

/* B. BUTTON LOADING STATE — Shimmer animation */
.btn-loading {
    position: relative;
    overflow: hidden;
}
/* EXCEPTION: Loading shimmer — element-bound but loops for activity feedback */
.btn-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: btn-shimmer 1.5s infinite;
}
@keyframes btn-shimmer {
    0% { left: -35%; }
    100% { left: 140%; }
}

/* COVER LOADING STATE — Placeholder shimmer */
.cover-loading {
    min-height: 200px;
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: cover-shimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes cover-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* COVER GALLERY — Stage tile hover */
.cover-stage-tile:hover {
    border-color: var(--gold) !important;
    background: rgba(212,175,55,0.05) !important;
}

/* STORY WORLD SECTION */
.world-section { margin: 15px 0; }
.world-toggle { margin-bottom: 10px; transition: all 0.3s ease; }
/* DSP: World toggle active uses gold accent */
.world-toggle.active {
    background: linear-gradient(180deg, #2a2518 0%, #1a1508 100%);
    color: var(--gold);
    border-color: var(--gold);
}

/* UTILS — DSP: Box uses 2px double gold border, no radius */
.box { max-width:600px; margin:20px auto; padding:25px; background:var(--panel); border:2px double gold; border-radius:0; box-shadow:0 0 0 1px #0a0a0a, 0 0 20px rgba(0,0,0,0.2); }

/* ═══════════════════════════════════════════════════════════════════════════════ */
/*                     VAULT MENU — Collapsible Tab Panels                         */
/* ═══════════════════════════════════════════════════════════════════════════════ */

#menuOverlay.overlay {
    background: transparent;
    pointer-events: none;
}
#menuOverlay > * {
    pointer-events: auto;
}

.vault-panel {
    position: relative;
    background: var(--panel);
    border: 2px double gold;
    border-radius: 0;
    padding: 20px 24px;
    max-width: 280px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.vault-x {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.4em;
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
    padding: 0;
}
.vault-x:hover { opacity: 1; }

.vault-title {
    font-family: 'Lora', serif;
    font-variant: small-caps;
    color: var(--gold);
    letter-spacing: 0.6em;
    font-size: 1.1em;
    margin-bottom: 10px;
}

.vault-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.vault-sub {
    background: var(--panel);
    border: 2px double gold;
    border-radius: 0;
    padding: 20px 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.vault-sub-title {
    font-family: 'Lora', serif;
    font-variant: small-caps;
    color: var(--gold);
    letter-spacing: 0.4em;
    font-size: 1em;
    margin-bottom: 6px;
}

.vault-label {
    font-family: 'Lora', serif;
    font-variant: small-caps;
    color: var(--gold);
    letter-spacing: 0.2em;
    font-size: 0.85em;
    margin-top: 4px;
}

.vault-theme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.vault-select {
    width: 100%;
    padding: 6px 8px;
    background: var(--bg1);
    color: var(--ink);
    border: 1px solid var(--gold);
    font-family: 'Lora', serif;
    font-size: 0.85em;
}

.vault-sub input[type="range"] {
    width: 100%;
}

/* CHOICE BUTTONS - Responsive Stack */
.choice-buttons { 
    display:flex; 
    flex-wrap:wrap; 
    gap:20px; 
    justify-content:center; 
    margin:30px auto; 
    max-width:800px; 
}
.choice-buttons > div {
    flex: 1 1 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 640px) {
    .choice-buttons { flex-direction: column; align-items: center; width: 100%; }
    .choice-buttons > div { width: 100%; max-width: 100%; flex: 1 1 100%; }
    .choice { width: 100%; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* .choice — Large action buttons (Tier selection, etc.)                           */
/* Inherits .sb-btn material — MATERIAL LOCK applies                               */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.choice {
    padding: 15px 40px;
    font-size: 1.4em;
    font-family: 'lust-script-display', serif;
    width: 100%;
    box-sizing: border-box;
    color: var(--gold);
    /* MATERIAL LOCK — Inherits from global button rule, cannot override */
    /* ❌ REMOVED: background: linear-gradient(...) — violates material lock */
    /* ❌ REMOVED: custom border/shadow — use plaque system */
}
.choice-desc { opacity:0.7; max-width:250px; margin:10px auto; }

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* MODE CARDS — Flip cards for Solo/Couple/Stranger selection                       */
/* Click/hover flips to reveal face, click on face to select mode                   */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Mode card row - centers cards on screen */
.mode-card-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 500px) {
    .mode-card-row {
        gap: 16px;
    }
    .mode-card {
        width: 100px;
    }
}

.mode-card {
    width: 150px;
    aspect-ratio: 2.75 / 4.75;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.mode-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.mode-card.flipped .mode-card-inner {
    transform: rotateY(180deg);
}

.mode-card-back,
.mode-card-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 8px;
    overflow: hidden;
}

.mode-card-back img,
.mode-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mode-card-front {
    transform: rotateY(180deg);
}

/* Sparkle container for mode cards */
.mode-card-sparkles {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mode-card.flipped .mode-card-sparkles {
    opacity: 1;
}

/* Selected mode card - no glow, just z-index for layering */
.mode-card.selected {
    z-index: 20;
}

/* Mode cards: no dimming on selection — sparkle-only feedback */

/* Sparkle animation for mode cards */
@keyframes modeSparkle {
    0% {
        opacity: 1;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-10px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* TIER CARD BUTTONS — Tarot-style PNG buttons for Tease/Indulge selection         */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.tier-card-btn {
    width: 160px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    background-image: url('/assets/card-art/cards/Tarot-Gold-Tease-face.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier-card-btn.tier-card-indulge {
    background-image: url('/assets/card-art/cards/Tarot-Gold-Indulge-face.png');
}

.tier-card-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.4);
}

.tier-card-btn:active {
    transform: scale(0.98);
}

.tier-card-btn:focus,
.tier-card-btn:focus-visible {
    outline: none;
    border: none;
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.5);
}

/* INPUTS & LOCKS */
.input-wrapper { position: relative; width: 95%; margin: 0 auto 15px; overflow:hidden; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CEREMONIAL SPARKLE OVERFLOW — Allow sparkles on Say/Do input boxes          */
/* ═══════════════════════════════════════════════════════════════════════════ */
#actionWrapper, #dialogueWrapper {
    overflow: visible;
}
#actionWrapper textarea, #dialogueWrapper textarea {
    position: relative;
    overflow: visible;
}
.input-wrapper label, .setting-label { display:block; text-align:center; color:var(--gold); margin-bottom:5px; font-size:0.9em; font-family:var(--font-main); text-transform:uppercase; letter-spacing:1px; }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* DSP MATERIAL: Text Fields & Selects — Plaque-aligned (no glow)              */
/* ═══════════════════════════════════════════════════════════════════════════ */
textarea, input, select, .dsp-input {
    width: 100%;
    padding: 15px;
    /* Plaque-aligned material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    color: #f5f0e6;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner);
    border-radius: 0;
    font-size: 1em;
    font-family: var(--font-main);
    box-sizing: border-box;
    transition: filter 0.2s ease, border-color 0.2s ease;
}

/* DSP Focus state: brighter gold outline — no glow */
textarea:focus, input:focus, select:focus, .dsp-input:focus {
    outline: none;
    border-color: #ffe066;
    filter: brightness(1.1);
}

/* DSP Placeholder: muted gold / warm gray */
textarea::placeholder, input::placeholder, .dsp-input::placeholder {
    color: rgba(255, 215, 0, 0.35);
}

/* Select dropdown arrow styling */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffd700' fill-opacity='0.5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

/* GHOST TEXT / PILL GRID */
.ghost-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; overflow: hidden; padding: 10px;
    background: rgba(0,0,0,0.2);
}
.ghost-grid {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
    height: 100%; width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* LOCKS & CURSOR — Locked elements remain physically present                      */
/* NO opacity, NO grayscale, NO filter. Grey filigree/text indicates locked state. */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.locked-input, .locked-input textarea, .locked-style, .card.locked, .fate-card.locked, .intensity-btn.locked,
.intensity-btn.locked-tease, .intensity-btn.locked-pass, [data-locked] {
    /* NO opacity, NO filter — element stays physically present */
    cursor: url('/cursor-dollar-plane-64.png'), pointer !important;
    pointer-events: auto !important;
    /* Grey filigree (border) and text */
    border-color: var(--plaque-locked-border) !important;
    color: var(--plaque-locked-text) !important;
}
.locked-input, .locked-style, .card.locked, .fate-card.locked, .intensity-btn.locked,
.intensity-btn.locked-tease, .intensity-btn.locked-pass, [data-locked] {
    position: relative;
}
.locked-style { display: inline-block; }

/* HANDCUFF OVERLAY - SVG (applies to all locked elements) */
.locked-input::after, .locked-style::after, .card.locked::after, .fate-card.locked::after,
.intensity-btn.locked::after, .intensity-btn.locked-tease::after, .intensity-btn.locked-pass::after,
[data-locked]::after {
    content:""; position:absolute;
    top:5px; right:5px;
    width:24px; height:24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 13.5a3.5 3.5 0 1 0-2.5-5.9l-1.5 1.5'%3E%3C/path%3E%3Cpath d='M6.5 10.5a3.5 3.5 0 1 0 2.5 5.9l1.5-1.5'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity:0.9;
    pointer-events:none;
    z-index: 10;
    filter: drop-shadow(0 0 2px black);
}
.locked-input::after { top: 40px; right: 10px; }
.intensity-btn.locked-tease::after, .intensity-btn.locked-pass::after { top: 2px; right: 2px; transform: none; width: 16px; height: 16px; } 

/* STYLE CARDS - Grid layout with centered rows */
.style-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
    justify-content: center;
}

/* Selection card — Plaque regime: no rounding, no glow */
.card {
    background: #252525;
    border-radius: 0;
    padding: 15px;
    cursor: pointer;
    text-align: left;
    border: 2px solid transparent;
    position: relative;
    transition: filter 0.2s, border-color 0.2s;
    width: 200px;
    flex-shrink: 0;
}
/* Hover: Brightness lift only — no transform */
.card:hover { filter: brightness(1.1); border-color: #ff6b6b; }
/* Selected: No glow, brightness lift only */
.card.selected { border-color: var(--gold); background: #333; filter: brightness(1.15); }

/* Responsive */
@media (max-width: 700px) {
    .style-cards { gap: 12px; }
    .card { width: 180px; }
}
@media (max-width: 500px) {
    .card { width: 90%; max-width: 280px; }
}

/* Layer gating states */
.card.layer-locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}
.card.incompatible {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(100, 100, 100, 0.3);
}
.card.auto-cleared {
    animation: autoClearFade 1.5s ease-out forwards;
}
@keyframes autoClearFade {
    0% { opacity: 1; border-color: #ff6b6b; }
    30% { opacity: 0.6; border-color: #666; }
    100% { opacity: 1; border-color: var(--gold); }
}
.layer-helper {
    font-size: 0.7em;
    color: var(--ink);
    opacity: 0.6;
    font-style: italic;
    font-family: var(--font-main);
}

/* =================================
   5×7 SELECTION FLIP CARDS
   Grid layout with centered rows
   ================================= */
.selection-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 15px 0;
    position: relative;
}

/* Responsive */
@media (max-width: 500px) {
    .selection-grid { gap: 10px; }
}

.selection-card {
    width: 85px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    perspective: 1000px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.selection-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.selection-card.flipped .selection-card-inner {
    transform: rotateY(180deg);
}

/* Selection card face — Plaque regime: no rounding */
.selection-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0;
    overflow: hidden;
}

.selection-card-front {
    background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
}

.selection-card-front .card-title {
    font-family: 'lust-script-display', serif;
    font-size: 11px;
    color: var(--gold);
    line-height: 1.2;
    word-wrap: break-word;
}

.selection-card-back {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid var(--pink);
    transform: rotateY(180deg);
    padding: 10px;
    overflow-y: auto;
}

.selection-card-back .card-title {
    font-family: 'lust-script-display', serif;
    font-size: 12px;
    color: var(--pink);
    margin: 0 0 6px;
    text-align: center;
}

.selection-card-back .card-desc {
    font-size: 9px;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 8px;
    text-align: center;
}

.selection-card-back .sub-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
}

.selection-card-back .sub-option {
    padding: 4px 6px;
    font-size: 8px;
    color: var(--ink);
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.selection-card-back .sub-option:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(201, 162, 39, 0.2);
}

.selection-card-back .sub-option.selected {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.15);
}

/* Card states — Plaque regime: no glow */
.selection-card.selected .selection-card-front {
    border-color: var(--gold);
    filter: brightness(1.1);
}

.selection-card.selected .selection-card-front .card-title {
    color: var(--gold);
}

.selection-card.dimmed {
    opacity: 0.3;
    pointer-events: none;
}

.selection-card.layer-locked {
    opacity: 0.25;
    pointer-events: none;
    filter: grayscale(0.6);
}

.selection-card.incompatible {
    opacity: 0.3;
    pointer-events: none;
}

/* Selection card zoom state (uses portal architecture) */
/* Card is MOVED into #sbZoomPortal on zoom */
/* Base positioning now shared with .sb-card.zoomed above */

.selection-card.zoomed .selection-card-front {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(255, 105, 180, 0.3);
}

.card h3 { margin:0 0 5px; color:#ff6b6b; font-size:1.1em; font-family:'lust-script-display',serif; }
.card p { font-size:0.9em; opacity:0.9; margin:0; font-family:var(--font-main); }
.preview-btn { margin-top:10px; font-size:0.75em; padding:4px 10px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); box-shadow:none; z-index:15; position:relative; pointer-events: auto !important; cursor: pointer !important;}
.preview-btn:hover { background:rgba(255,255,255,0.2); }

/* FATE CARDS - Grid layout with centered rows */
.fate-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px auto;
    max-width: 650px;
    justify-content: center;
    perspective: 1000px;
}

.fate-card {
    width: 100px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    position: relative;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    /* Z-INDEX CAP: Cards must never exceed z-index 50 (button is 1000) */
    z-index: 10;
}
/* Fate card — Plaque regime: no rounded corners, no glow */
/* FLIP FIX: Explicit transform-origin center to prevent hinge artifacts */
.fate-card .inner { position:absolute; inset:0; border-radius:0; transform-style:preserve-3d; transition:transform 0.6s; box-shadow:0 5px 15px rgba(0,0,0,0.5); transform-origin: center center; }
.fate-card.flipped .inner { transform:rotateY(180deg); }
.fate-card .front, .fate-card .back { position:absolute; inset:0; backface-visibility:hidden; border-radius:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,215,0,0.3); flex-direction: column; padding: 5px; box-sizing: border-box; }
.fate-card .front {
    background: url('destiny-tree.png') center/cover no-repeat, #111;
    z-index:2;
}
.fate-card .front h3 { display: none; } /* Hide text, image has DESTINY label */
.fate-card .back { background:#2a0033; transform:rotateY(180deg); z-index:1; }
.fate-card h3 { font-size: 0.8em; margin-bottom: 5px; text-transform: uppercase; color: var(--gold); }
.fate-card p { font-size: 0.6em; line-height: 1.2; opacity: 0.9; }
.fate-card.poof { animation: smokePoof 0.6s forwards; }
@keyframes smokePoof { 0%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(0.5); } }
/* Selected: Brightness lift only — no glow */
.fate-card.selected .inner { border: 2px solid var(--gold); filter: brightness(1.15); }
.fate-card.chosen .inner { border: 2px solid var(--pink); }

/* Responsive */
@media (max-width: 700px) {
    .fate-grid { gap: 10px; max-width: 400px; }
    .fate-card { width: 85px; }
}
@media (max-width: 500px) {
    .fate-grid { gap: 8px; max-width: 320px; }
    .fate-card { width: 75px; }
}

/* GOLDEN FLOW - continuous gentle stream from Fate Card to inputs */
.golden-flow-container {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}
.golden-flow-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--gold), 0 0 10px rgba(255,215,0,0.5);
    opacity: 0;
}

/* FATE CARD SEPARATOR IN STORY */
.fate-card-separator { display: flex; justify-content: center; margin: 25px auto; padding: 15px 0; border-top: 1px solid rgba(255,215,0,0.3); border-bottom: 1px solid rgba(255,215,0,0.3); background: rgba(0,0,0,0.2); }
/* Fate mini card — Plaque regime: no rounded corners, no glow */
.fate-card-separator .fate-mini { width: 60px; aspect-ratio: 2.75 / 4.75; background: linear-gradient(145deg, #2a0033, #400020); border: 1px solid var(--gold); border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.fate-card-separator .fate-mini h4 { font-size: 0.6em; color: var(--gold); margin: 0 0 3px; text-transform: uppercase; }

/* INTENSITY BUTTONS — Plaque Material Regime */
.intensity-wrap { margin: 10px 0; }
.intensity-btn { margin: 5px; opacity: 0.6; position: relative; transition: filter 0.15s ease; }
/* Active: Brightness lift only — no glow */
.intensity-btn.active { opacity: 1; border: 2px solid var(--gold); filter: brightness(1.15); }
.intensity-mini { display:flex; gap:5px; justify-content:center; margin: 15px 0; }
.intensity-mini button { padding: 5px 15px; font-size: 0.8em; opacity: 0.6; }
.intensity-mini button.active { opacity: 1; border: 1px solid var(--gold); filter: brightness(1.1); }

/* SAFETY & CONSENT UI — DSP: 2px double gold border, no radius */
.consent-controls { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 15px auto; width: 95%; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 0; border: 2px double gold; box-shadow: 0 0 0 1px #0a0a0a; box-sizing: border-box; }
.consent-controls.horizontal { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; }
.consent-controls label { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); font-size: 0.9em; }
.boundary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; width: 95%; justify-content: center; }
/* DSP MATERIAL: Chip — Plaque Material Regime */
.chip {
    padding: 5px 12px;
    /* Plaque material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner),
                0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 0;
    font-size: 0.8em;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
    opacity: 0.8;
    color: var(--gold);
}
/* Hover: Brightness lift only */
.chip:hover:not(.locked-chip) {
    filter: brightness(1.15);
    opacity: 1;
}
/* Active: Brighter base */
.chip.active {
    background-color: #1a1508;
    border-color: var(--gold);
    color: var(--gold);
    opacity: 1;
    font-weight: bold;
    filter: brightness(1.1);
}
/* Locked: Grey filigree and text — NO filter, NO opacity */
.chip.locked-chip {
    cursor: not-allowed;
    border-color: var(--plaque-locked-border) !important;
    color: var(--plaque-locked-text) !important;
    /* NO filter, NO opacity — chip remains physically present */
}
.chip.locked-chip:hover {
    /* No hover response on locked chips */
    border-color: var(--plaque-locked-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SAFETY TAROT CARDS — Two-card layout matching VQ corridor style
   ═══════════════════════════════════════════════════════════════════ */
.safety-tarot-card {
    width: 206px;
    aspect-ratio: 2.75 / 4.75;
    background-image: url('/assets/card-art/cards/Blank-Black-Face.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a0a;
    border: none;
    border-radius: 0;
    outline: 1px solid rgba(218, 165, 32, 0.5);
    outline-offset: -1px;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    position: relative;
    flex-shrink: 1;
    min-width: 150px;
}

/* Arc container: icon + curved label in card's top half-circle */
.safety-arc-container {
    position: absolute;
    top: calc(1% - 2px);
    left: 15%;
    right: 15%;
    height: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.safety-arc-icon {
    width: 20px;
    height: 20px;
    color: var(--gold);
    opacity: 0.8;
}
.safety-arc-text {
    width: 100%;
    height: 14px;
}

/* Card content area — below the arc */
.safety-card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 20px 20px 25px;
    margin-top: 17%;
    flex: 1;
    align-items: flex-start;
    justify-content: center;
}

/* Scaled-down checkbox for safety cards */
.sb-checkbox-sm {
    gap: 25px;
    padding: 2px 0;
}
.sb-checkbox-visual-sm {
    width: 28px !important;
    height: 28px !important;
}
.sb-checkbox-sm input[type="checkbox"] {
    width: 28px;
    height: 28px;
}
.sb-checkbox-label-sm {
    font-size: 0.85em !important;
    color: #c9a84c;
    text-align: left;
}

/* Boundary chips with Black-Gold-320x88.png background */
.safety-card-content.boundary-chips {
    gap: 6px;
    margin-top: 17%;
    padding: 24px 16px 20px;
    align-items: center;
}
.chip-gold {
    display: inline-block;
    width: auto;
    padding: 6px;
    text-align: center;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid transparent;
    border-radius: 0;
    font-size: 0.7em;
    color: var(--gold);
    cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    opacity: 0.7;
    box-sizing: border-box;
}
.chip-gold:hover {
    filter: brightness(1.15);
    opacity: 1;
}
.chip-gold.active {
    opacity: 1;
    font-weight: bold;
    filter: brightness(0.75);
    border-color: rgba(80, 65, 30, 0.6) rgba(180, 170, 140, 0.45) rgba(180, 170, 140, 0.45) rgba(80, 65, 30, 0.6);
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 255, 255, 0.06),
        inset 0 0 8px rgba(218, 165, 32, 0.2);
}

/* CORRECTIVE: Toast positioned above Begin Story */
/* DSP MATERIAL: Toast — Matte black, 2px double gold, no radius */
.toast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 2px double gold;
    color: var(--gold);
    padding: 12px 24px;
    border-radius: 0;
    box-shadow: 0 0 0 1px #0a0a0a;
    z-index: 10006;
    animation: toastFadeInOut 3s forwards;
    font-size: 1em;
}
@keyframes toastFadeInOut { 0%{opacity:0; transform:translate(-50%, calc(-50% + 20px));} 10%{opacity:1; transform:translate(-50%, -50%);} 90%{opacity:1;} 100%{opacity:0;} }

/* EROTIC PREVIEW TEXT */
#eroticPreviewText { 
    font-family: var(--font-story); font-size: 1.1em; line-height: 1.6; 
    color: var(--p2-color); font-style: italic; border-left: 3px solid var(--pink); 
    padding-left: 15px; margin: 20px 0; text-align: left;
}

/* LOADING BAR — Golden ceremonial glow */
#loadingOverlayInner {
    background: rgba(10, 0, 30, 0.95);
    padding: 18px 26px 14px 26px;
    border-radius: 14px;
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.5), 0 0 60px rgba(184, 134, 11, 0.3);
    min-width: 280px;
    text-align: left;
    font-size: 0.95em;
    position: relative;
    overflow: visible;
}
/* Firefly sparkles for loading overlay */
#loadingOverlayInner::before,
#loadingOverlayInner::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.9) 0%, rgba(212, 175, 55, 0.4) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: loading-firefly 3s ease-in-out infinite;
}
#loadingOverlayInner::before {
    top: -8px;
    left: 20%;
    animation-delay: 0s;
    --lf-dx: 30px;
    --lf-dy: -20px;
}
#loadingOverlayInner::after {
    top: -6px;
    right: 25%;
    animation-delay: 1.5s;
    --lf-dx: -25px;
    --lf-dy: -25px;
}
@keyframes loading-firefly {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    15%  { opacity: 0.8; transform: translate(calc(var(--lf-dx) * 0.1), calc(var(--lf-dy) * 0.1)) scale(1); }
    50%  { opacity: 0.6; transform: translate(calc(var(--lf-dx) * 0.5), calc(var(--lf-dy) * 0.5)) scale(0.9); }
    70%  { opacity: 0.4; transform: translate(calc(var(--lf-dx) * 0.7), calc(var(--lf-dy) * 0.7)) scale(0.7); }
    100% { opacity: 0; transform: translate(var(--lf-dx), var(--lf-dy)) scale(0.3); }
}
#loadingOverlayBar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; margin-top: 8px; }
#loadingOverlayFill { width: 0%; height: 100%; background: linear-gradient(90deg, #b8860b, #d4af37, #ffd700); transition: width 0.25s; }
#loadingPercent { font-size: 0.8em; color: rgba(255,255,255,0.7); margin-top: 4px; text-align: right; }
.loading-cancel-btn { position: absolute; top: 5px; right: 8px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 1.4em; cursor: pointer; padding: 0; line-height: 1; display: none; }
.loading-cancel-btn:hover { color: var(--gold); }
.loading-cancel-btn.visible { display: block; }

/* BURGER & BACK ARROW — Gleam on hover */
#burgerBtn,
#globalBackBtn {
    position: fixed;
    z-index: 10001; /* Above tierGate (9997) and payModal (10000) */
    background: none;
    border: none;
    padding: 0;
    overflow: hidden; /* Clip gleam-sweep within button bounds */
    cursor: pointer;
    box-shadow: none;
    line-height: 0;
    overflow: hidden;
    border-radius: 4px;
}
#burgerBtn { top: 10px; right: 10px; }
#globalBackBtn { top: 15px; left: 15px; }

#burgerBtn::after,
#globalBackBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

#burgerBtn:hover::after,
#globalBackBtn:hover::after {
    opacity: 1;
    animation: gleam-sweep 0.7s ease-out forwards;
}

#burgerBtn:hover,
#globalBackBtn:hover {
    transform: scale(1.1);
    box-shadow: none;
}

#burgerBtn img { filter: none; }

/* Narrow screens: reposition corner buttons but keep full size (32×32) */
@media (max-width: 600px) {
    #burgerBtn {
        top: 4px;
        right: 4px;
    }
    #globalBackBtn {
        top: 4px;
        left: 4px;
    }
}

/* VISUALIZE MODAL — z-index above sparkles (5000) */
#vizModal { z-index: 6000; }
.viz-modal-content { text-align: center; max-width: 650px; width: 95%; max-height:95vh; overflow-y:auto; }
.viz-controls { display:flex; gap:10px; justify-content:center; margin-top:15px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* VISUALIZER BUTTON PLAQUE CONTAINMENT (AUTHORITATIVE)                            */
/* Gleam must be contained within button bounds — never escape to modal/viewport   */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* All visualizer buttons: enforce containment */
#vizModal .sb-btn,
#vizModal button,
.viz-controls button,
.viz-controls .sb-btn {
    position: relative !important;
    overflow: hidden !important;
    /* Reset any inherited positioning that might anchor gleam to parent */
    transform: translateZ(0); /* Create stacking context */
}

/* Gleam containment: ensure ::after is element-bound only */
#vizModal .sb-btn::after,
#vizModal button::after,
.viz-controls button::after,
.viz-controls .sb-btn::after {
    position: absolute;
    top: 0;
    left: -30%; /* Start just off left edge */
    width: 30%;
    height: 100%;
    /* No animation at rest — gleam is idle */
    animation: none;
}

/* Gleam activates ONLY on hover */
#vizModal .sb-btn:hover:not(:disabled)::after,
#vizModal button:hover:not(:disabled)::after,
.viz-controls button:hover:not(:disabled)::after,
.viz-controls .sb-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Ensure viz-modal-content doesn't interfere with button positioning */
.viz-modal-content .sb-btn,
.viz-modal-content button {
    isolation: isolate; /* Prevent blend mode inheritance */
}
#vizPreviewImg { width: 100%; border-radius: 8px; margin-top: 10px; max-height: 400px; object-fit: contain; background:#000; min-height:200px; display:none; }
#vizPlaceholder { width: 100%; height:200px; display:flex; align-items:center; justify-content:center; border:1px dashed #444; margin-top:10px; color:#666; font-style:italic;}
/* DSP MATERIAL: Viz prompt input — inherits DSP field style with gold accent */
#vizPromptInput {
    width: 100%;
    height: 100px;
    font-size: 0.9em;
    margin-bottom: 8px;
    color: var(--gold);
    border: 1px solid rgba(255, 215, 0, 0.4); /* Gold outline */
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%); /* DSP matte metal */
    resize: vertical;
    -webkit-user-select: none;
    user-select: none;
}

/* Visualization prompt loading animation */
#vizPromptInput.viz-loading::placeholder {
    animation: viz-placeholder-pulse 1.5s ease-in-out infinite;
}
@keyframes viz-placeholder-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Fate card preview loading animation */
#actionInput.fate-preview-loading,
#dialogueInput.fate-preview-loading {
    color: rgba(212, 175, 55, 0.5);
    animation: fate-preview-pulse 1.2s ease-in-out infinite;
}
@keyframes fate-preview-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Visualize Modifier Pills */
#vizModifierSection { margin-bottom: 12px; }
.viz-modifier-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-height: 80px;
    overflow-y: auto;
    padding: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 0;
    border: 2px double gold;
    box-shadow: 0 0 0 1px #0a0a0a;
    margin-bottom: 8px;
}
/* DSP MATERIAL: Viz modifier pills — Plaque Material Regime */
.viz-pill {
    /* Plaque material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner);
    color: var(--gold);
    padding: 4px 10px;
    border-radius: 0;
    font-size: 0.75em;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}
/* Hover: Brightness lift only — no glow */
.viz-pill:hover {
    filter: brightness(1.15);
}
.viz-modifier-pills.hidden { display: none; }

/* DSP MATERIAL: Viz modifier input field */
#vizModifierInput {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.85em;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 6px;
    color: var(--gold);
}
#vizModifierInput::placeholder { color: rgba(255,215,0,0.4); }

/* SETTING SHOT — Plaque regime: no rounding, no glow */
#settingShotWrap {
    margin-bottom: 30px; animation: fadeIn 2s ease; border-radius: 0; overflow: hidden;
    border: 1px solid var(--pink);
    position:relative; min-height:250px; background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
}
#settingShotImg { width: 100%; display: none; }
.img-error-msg { font-size:0.9em; color:#ff6b6b; padding:20px; font-style: italic; z-index:5; text-align:center; }

/* META UI */
/* Meta stance — Plaque regime: no glow */
#metaControls .meta-stance { opacity: 0.5; border: 1px solid transparent; }
#metaControls .meta-stance.active { opacity: 1; border: 1px solid var(--gold); filter: brightness(1.1); }

/* COUPLE UI — DSP material */
#coupleRoomCodeWrap { display: flex; align-items: center; justify-content: center; gap: 10px; }
#btnCopyCode { background-color: var(--plaque-black-base); background-image: var(--plaque-black-grain); border: var(--plaque-border-outer) solid var(--plaque-black-outer); padding: 5px; border-radius: 0; cursor: pointer; color: var(--gold); }

/* GOD MODE UI */
#godModeToggle { margin-top:10px; font-size:0.8em; display:flex; align-items:center; justify-content:center; gap:8px; opacity:0.8; cursor:pointer; }
#godModeToggle input { width:auto; margin:0; cursor:pointer; }
#godModeLabel { color: var(--gold); font-family:var(--font-main); letter-spacing:1px; }
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PETITION FATE MODAL                                                          */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.petition-box { background: rgba(10,5,15,0.95); border: 1px solid rgba(218,165,32,0.3); }
.petition-omen { color: var(--gold); font-style: italic; font-family: 'Lora',serif; font-size: 1.1em; margin: 15px 0; opacity: 0; transition: opacity 0.8s ease; }
.petition-omen.fade-in { opacity: 1; }
.petition-result { color: var(--pink); font-family: 'Lora',serif; margin: 15px 0; opacity: 0; transition: opacity 0.8s ease; }
.petition-result.fade-in { opacity: 1; }
.petition-sacrifice-btn { background: rgba(218,165,32,0.15); border: 1px solid rgba(218,165,32,0.4); color: var(--gold); padding: 8px 16px; cursor: pointer; transition: background 0.2s; }
.petition-sacrifice-btn:hover { background: rgba(218,165,32,0.3); }
.petition-fate-card .inner { border: 1px solid rgba(218,165,32,0.5) !important; }
.petition-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.petition-quill-icon { font-size: 1.5em; color: var(--gold); opacity: 0.8; }

/* AUTH PANEL */
#auth-panel { position:fixed; top:10px; right:60px; z-index:2000; background:rgba(0,0,0,0.9); padding:10px; border:1px solid #444; border-radius:0; display:flex; flex-direction:column; gap:5px; }
#auth-panel input { padding:5px; width: 150px; font-size: 0.8em; }
#auth-status { font-size:12px; margin-top:6px; color:#fff; }

/* ARCHETYPE SYSTEM */
.archetype-header-text { font-size: 1.1em; color: var(--ink); opacity: 0.9; margin: 0 0 5px; text-align: center; }
.archetype-subtext { font-size: 0.9em; color: var(--gold); opacity: 0.8; margin: 0 0 20px; text-align: center; font-style: italic; }
.archetype-selection { width: 95%; margin: 0 auto 20px; }
.archetype-group { margin-bottom: 20px; }
.archetype-group-label { display: block; font-size: 0.85em; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; text-align: center; }
.archetype-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* DSP MATERIAL: Archetype pill — Plaque Material Regime */
.archetype-pill {
    padding: 8px 16px;
    /* Plaque material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner),
                0 2px 4px rgba(0, 0, 0, 0.5);
    border-radius: 0;
    font-size: 0.9em;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
    color: var(--gold);
    font-family: var(--font-main);
}
/* Hover: Brightness lift only — no glow, no transform */
.archetype-pill:hover {
    filter: brightness(1.15);
}
/* Selected: No glow, brightness lift only */
.archetype-pill.selected {
    background-color: #1a1508;
    border-color: var(--gold);
    filter: brightness(1.1);
    color: var(--gold);
    font-weight: 600;
}
.archetype-pill.primary-only { border-style: dashed; }
.archetype-pill.primary-only::after { content: " ★"; font-size: 0.7em; opacity: 0.7; }
.archetype-pill.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; border-color: rgba(255, 215, 0, 0.2); }
.archetype-constraint-text { font-size: 0.75em; color: var(--ink); opacity: 0.6; margin: 15px 0 0; text-align: center; font-style: italic; }
/* DSP: Archetype preview panels — 2px double gold, no radius */
.archetype-preview { width: 95%; margin: 15px auto; padding: 15px; background: rgba(0,0,0,0.3); border: 2px double gold; border-radius: 0; box-shadow: 0 0 0 1px #0a0a0a; text-align: left; }
.archetype-preview-name { font-family: 'lust-script-display', serif; font-size: 1.3em; color: var(--gold); margin: 0 0 8px; }
.archetype-preview-summary { font-size: 0.95em; color: var(--ink); line-height: 1.5; margin: 0 0 10px; }
.archetype-preview-shadow { font-size: 0.85em; color: var(--gold); opacity: 0.9; font-style: italic; margin: 0; padding-left: 10px; border-left: 2px solid var(--gold); }
.archetype-preview-modifier { margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255, 215, 0, 0.2); }
.archetype-preview-modifier-label { font-size: 0.8em; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 5px; }
.archetype-preview-modifier-style { font-size: 0.9em; color: var(--ink); opacity: 0.9; margin: 0; }

/* DSP: Selection summary — 2px double gold, no radius */
.archetype-selection-summary {
    width: 95%;
    margin: 10px auto;
    padding: 12px;
    background: rgba(0,0,0,0.3);
    border: 2px double gold;
    border-radius: 0;
    box-shadow: 0 0 0 1px #0a0a0a;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 0.9em;
}
.archetype-selection-summary p { margin: 0; color: var(--ink); }
.archetype-selection-summary span { color: var(--pink); font-weight: 600; }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* ANCESTRY / CULTURE SECTION */
.ancestry-subtext { font-size: 0.9em; color: var(--gold); opacity: 0.8; margin: 0 0 15px; text-align: center; font-style: italic; }
.ancestry-container { width: 95%; margin: 0 auto 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .ancestry-container { grid-template-columns: 1fr; } }
.ancestry-subsection { background: rgba(255,255,255,0.03); border-radius: 0; padding: 15px; }
.ancestry-label { font-size: 0.95em; color: var(--pink); font-family: 'lust-script-display', serif; margin-bottom: 12px; text-align: center; }
.ancestry-pills { min-height: 90px; }
@keyframes pillFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 0.85; transform: scale(1); } }

/* PILL SYSTEM - FIXED WIDTH CLASSES (MANDATORY) */
.pill-tray {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
    min-height: 90px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; /* Layout safety - prevent pill explosions */
}
@media (max-width: 500px) {
    .pill-tray { grid-template-columns: repeat(3, 1fr); max-width: 380px; }
}
@media (max-width: 380px) {
    .pill-tray { grid-template-columns: repeat(2, 1fr); max-width: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DSP MATERIAL: Pill — Plaque Material Regime (no rounding)                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
.pill {
    padding: 5px 10px;
    /* Plaque material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner);
    /* NO ROUNDING */
    border-radius: 0;
    font-size: 0.72em;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease;
    color: #f5f0e6;
    opacity: 0.9;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Hover: Brightness lift only */
.pill:hover {
    filter: brightness(1.15);
    opacity: 1;
}

/* Fixed width classes - pills may NOT resize dynamically */
.pill.pill-small { width: 85px; min-width: 85px; max-width: 85px; }
.pill.pill-medium { width: 115px; min-width: 115px; max-width: 115px; }
.pill.pill-large { width: 145px; min-width: 145px; max-width: 145px; }

/* Leading + indicator */
.pill::before { content: "+ "; opacity: 0.7; }

.pill.fade-out { opacity: 0; pointer-events: none; transform: scale(0.95); }
.pill.fade-in { animation: pillFadeIn 0.3s ease forwards; }
.pill.fading { opacity: 0.4; }

/* PAYWALLED ELEMENTS - CURSOR AND VISIBILITY */
.locked-input, .locked-style, .card.locked, .fate-card.locked, .intensity-btn.locked,
.intensity-btn.locked-tease, .intensity-btn.locked-pass, [data-locked] {
    cursor: url('/cursor-dollar-plane-64.png'), pointer !important;
}
.card.locked:hover, .fate-card.locked:hover, .intensity-btn.locked:hover,
.intensity-btn.locked-tease:hover, .intensity-btn.locked-pass:hover,
[data-locked]:hover {
    cursor: url('/cursor-dollar-plane-64.png'), pointer !important;
}
.card.locked *, .fate-card.locked *, .intensity-btn.locked *, [data-locked] * {
    pointer-events: none;
}
.card.locked .preview-btn, [data-locked] .preview-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ========================================
   FATE HAND SYSTEM & ROTATING PLACEHOLDERS
   ======================================== */

/* Ancestry container - responsive side-by-side */
.ancestry-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.ancestry-subsection {
    flex: 1;
    min-width: 280px;
}
@media (max-width: 640px) {
    .ancestry-container { flex-direction: column; }
    .ancestry-subsection { min-width: 100%; }
}

/* Fate input row - contains input + fate hand */
.fate-input-row {
    display: flex;
    align-items: flex-start; /* Align to top to prevent vertical collision */
    gap: 12px;
    position: relative;
}

.fate-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    overflow: hidden; /* Contain rotating placeholder within bounds */
}

/* Ensure Destiny's Choice card doesn't get pushed by input content */
.fate-input-row .destiny-flip-card {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 3px; /* Align with textarea top padding */
}

/* DSP MATERIAL: Fate fields — Plaque-aligned (no glow) */
.fate-field {
    width: 100%;
    /* Plaque-aligned material */
    background-color: var(--plaque-black-base);
    background-image: var(--plaque-black-grain);
    background-size: 100% 100%;
    border: var(--plaque-border-outer) solid var(--plaque-black-outer);
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-black-inner);
    border-radius: 0;
    padding: 10px 12px;
    color: #f5f0e6;
    font-family: var(--font-main);
    font-size: 0.95em;
}
/* Focus: Brightness lift only — no glow */
.fate-field:focus {
    outline: none;
    border-color: #ffe066;
    filter: brightness(1.1);
}
textarea.fate-field {
    resize: none;
    min-height: 50px;
}

/* Rotating placeholder - matches sb-zoom-rotating-placeholder structure */
.rotating-placeholder {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    overflow: hidden;
    pointer-events: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.9em;
    font-style: italic;
    white-space: nowrap;
}
.rotating-placeholder.textarea-placeholder {
    top: 14px;
    transform: none;
}
.rotating-placeholder.hidden { display: none; }

.rotating-placeholder-inner {
    display: inline-block;
    padding-top: 10px;
    animation: scrollPlaceholder 39s linear infinite;
}
.rotating-placeholder-inner .suggestion {
    display: inline;
}
.rotating-placeholder-inner .separator {
    display: inline;
    margin: 0 8px;
    opacity: 0.5;
}
.rotating-placeholder-inner .glow {
    /* No highlight — match surrounding placeholder text */
    transition: all 0.5s ease;
}

@keyframes scrollPlaceholder {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =================================
   DESTINY FLIP CARD
   Same style as Ancestry card
   ================================= */
.destiny-flip-card {
    /* 2.75 × 4.75 card proportions */
    width: 55px;
    height: 95px;
    perspective: 1000px;
    cursor: pointer;
    flex-shrink: 0;
}
.destiny-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.destiny-flip-card.flipped .destiny-card-inner {
    transform: rotateY(180deg);
}
.destiny-card-back,
.destiny-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0; /* PLAQUE MATERIAL — square corners */
}
.destiny-card-back {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid var(--gold);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.destiny-card-back::after {
    content: "Destiny's Choice";
    font-family: 'lust-script-display', serif;
    font-size: 10px;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
}
.destiny-card-front {
    background: url('image_62.png') center/contain no-repeat, #0d0d0d;
    border: 1px solid var(--gold);
    transform: rotateY(180deg);
}

/* Card flip state */
.fate-hand-card.flipping {
    animation: cardFlip 0.45s ease-in-out forwards;
}
.fate-hand-card.fading {
    animation: cardFadeOut 0.3s ease forwards;
}

@keyframes cardFlip {
    0% { transform: rotateY(0deg) rotate(0deg); }
    50% { transform: rotateY(90deg) rotate(0deg) scale(1.1); }
    100% { transform: rotateY(180deg) rotate(0deg) scale(1); }
}
@keyframes cardFadeOut {
    to { opacity: 0; transform: scale(0.8); }
}

/* Fate Tree Card (revealed oracle) - uses image_62.png */
/* 3× original size, using transform for responsiveness */
.fate-tree-card {
    width: 96px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    background: url('image_62.png') center/contain no-repeat;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: visible;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
    transition: transform 0.3s ease;
    transform-origin: center center;
}
.fate-tree-card:hover {
    transform: scale(1.08);
    box-shadow: none;
}
.fate-tree-card.hidden { display: none; }

/* Tree silhouette - hidden when using image_62.png */
.tree-silhouette {
    display: none;
}

/* Falling leaf - REMOVED for now, using static PNG only */
.falling-leaf {
    display: none;
}

/* Stage 1: Fall from mid-air to ground */
.falling-leaf.leaf-fall-1 {
    animation: leafFallStage1 1.2s ease-in forwards;
}
@keyframes leafFallStage1 {
    0%   { top: 23px; right: 7px; transform: rotate(35deg); }
    20%  { right: 9px; transform: rotate(50deg); }
    40%  { right: 5px; transform: rotate(20deg); }
    60%  { right: 10px; transform: rotate(45deg); }
    80%  { right: 6px; transform: rotate(30deg); }
    100% { top: 38px; right: 11px; transform: rotate(40deg); }
}

/* Instant reset to lower branch position */
.falling-leaf.leaf-reset-2 {
    top: 16px;
    right: 5px;
    transform: rotate(25deg);
    animation: none;
}

/* Stage 2: Fall from lower branch to mid-air stop */
.falling-leaf.leaf-fall-2 {
    animation: leafFallStage2 1s ease-in forwards;
}
@keyframes leafFallStage2 {
    0%   { top: 16px; right: 5px; transform: rotate(25deg); }
    25%  { right: 8px; transform: rotate(45deg); }
    50%  { right: 4px; transform: rotate(15deg); }
    75%  { right: 9px; transform: rotate(40deg); }
    100% { top: 27px; right: 7px; transform: rotate(32deg); }
}

/* Final resting state after stage 2 */
.falling-leaf.leaf-final {
    top: 27px;
    right: 7px;
    transform: rotate(32deg);
    animation: none;
}

/* =================================
   ANCESTRY FLIP CARD
   ================================= */
.ancestry-flip-card {
    width: 96px;
    height: 138px;
    perspective: 1000px;
    cursor: pointer;
    flex-shrink: 0;
}
.ancestry-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.ancestry-flip-card.flipped .ancestry-card-inner {
    transform: rotateY(180deg);
}
.ancestry-card-back,
.ancestry-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0; /* PLAQUE MATERIAL — square corners */
}
.ancestry-card-back {
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid var(--gold);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.ancestry-card-back::after {
    content: "Destiny's Choice";
    font-family: 'lust-script-display', serif;
    font-size: 12px;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
}
.ancestry-card-front {
    background: url('image_62.png') center/contain no-repeat, #0d0d0d;
    border: 1px solid var(--gold);
    transform: rotateY(180deg);
}

/* =================================
   CHARACTER SECTION HEADER & DESTINY CARDS
   ================================= */
.character-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.character-section-title {
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 1.3em;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.character-destiny-card {
    width: 40px;
    height: 56px;
    perspective: 800px;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.character-destiny-card:hover {
    transform: scale(1.1);
}

.character-destiny-card.flipped .character-destiny-inner {
    transform: rotateY(180deg);
}

.character-destiny-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.character-destiny-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0; /* PLAQUE MATERIAL — square corners */
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO glow — plaque material regime */
}

.character-destiny-back {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid var(--gold);
}

.character-destiny-back::after {
    content: "⚜";
    font-size: 16px;
    color: var(--gold);
    /* NO glow — plaque material regime */
}

.character-destiny-front {
    background: linear-gradient(135deg, #2d1810 0%, #4a2c17 50%, #6b3a1f 100%);
    border: 1px solid var(--gold);
    transform: rotateY(180deg);
}

.character-destiny-front::after {
    content: "✦";
    font-size: 14px;
    color: var(--gold);
    text-shadow: 0 0 6px rgba(218, 165, 32, 0.5);
}

/* =================================
   PASS 9B: HORIZONTAL CHARACTER BLOCKS
   Destiny card LEFT, fields in responsive row
   ================================= */
.fate-shortcut-vertical {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

/* PASS 9F: Unified horizontal container rule for all sections */
.sb-section-container {
    width: 95%;
    margin-inline: auto;
    box-sizing: border-box;
}

.character-block-horizontal {
    display: flex;
    align-items: stretch;
    gap: 12px;
    width: 95%;
    max-width: none;
    margin: 0 auto 15px;
    padding: 0;
    box-sizing: border-box;
}

.character-destiny-side {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 55px;
    padding-left: 4px;
}

.character-destiny-card-tall {
    /* 2.75 × 4.75 card proportions */
    width: 55px;
    height: 95px;
    perspective: 800px;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.character-destiny-card-tall:hover {
    transform: scale(1.05);
}

.character-destiny-card-tall .character-destiny-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.character-destiny-card-tall.flipped .character-destiny-inner {
    transform: rotateY(180deg);
}

.character-destiny-card-tall .character-destiny-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0; /* PLAQUE MATERIAL — square corners */
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO glow — plaque material regime */
}

.character-destiny-card-tall .character-destiny-back {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid var(--gold);
}

.character-destiny-card-tall .character-destiny-back::after {
    content: "Destiny's Choice";
    font-family: 'lust-script-display', serif;
    font-size: 10px;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
    /* NO glow — plaque material regime */
}

.character-destiny-card-tall .character-destiny-front {
    background: linear-gradient(135deg, #2d1810 0%, #4a2c17 50%, #6b3a1f 100%);
    border: 1px solid var(--gold);
    transform: rotateY(180deg);
}

.character-destiny-card-tall .character-destiny-front::after {
    content: "Destiny's Choice";
    font-family: 'lust-script-display', serif;
    font-size: 10px;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* DESTINY'S CHOICE DECK — Separate from card system, heavier presence             */
/* This is a DECK, not a card. NO flip, NO sb-card inheritance.                    */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.destiny-mini-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    padding: 15px;
    /* NO hover transforms — simple opacity change */
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
}

.destiny-mini-deck:hover {
    /* NO scale transform — just glow */
    opacity: 1;
}

.destiny-mini-deck:active {
    opacity: 0.9;
}

.destiny-mini-deck-stack {
    position: relative;
    /* 5-card stack needs extra space for offsets - 25% larger */
    width: 148px;  /* 138px + 10px offset */
    height: 248px; /* ~238px (138 × 4.75/2.75) + 10px offset */
}

.destiny-mini-card {
    position: absolute;
    width: 138px; /* 25% larger than 110px */
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    /* PNG has frame baked in */
    background: transparent;
    border: none;
    border-radius: 8px; /* Match PNG rounded corners */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO transform transitions for flip */
    transition: box-shadow 0.15s ease;
    /* Subtle drop shadow only */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Fleur-de-lis removed - using text label instead */

/* "Destiny's Choice" label on card back */
.destiny-card-back-label {
    font-family: 'Cinzel', serif;
    font-size: 0.5em;
    color: var(--gold);
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* Stacked card offsets for depth illusion — 5 cards for thicker deck */
.destiny-mini-card.deck-card-1 {
    top: 0;
    left: 0;
    z-index: 5;
}

.destiny-mini-card.deck-card-2 {
    top: 2px;
    left: 2px;
    z-index: 4;
}

.destiny-mini-card.deck-card-3 {
    top: 4px;
    left: 4px;
    z-index: 3;
}

.destiny-mini-card.deck-card-4 {
    top: 6px;
    left: 6px;
    z-index: 2;
}

.destiny-mini-card.deck-card-5 {
    top: 8px;
    left: 8px;
    z-index: 1;
}

/* Hover glow effect — NO transform, outer glow only (PNG has frame) */
.destiny-mini-deck:hover .deck-card-1 {
    box-shadow: 0 0 15px rgba(218, 165, 32, 0.3), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* External label removed - text now on card back */
.destiny-mini-deck-label {
    display: none;
}

/* Retracted/faded state after Continue */
.destiny-mini-deck.retracted {
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Ambient sparkle emitter for destiny deck - inside deck stack, scales with deck */
.destiny-deck-sparkle-emitter {
    position: absolute;
    inset: -50%;
    pointer-events: none;
    z-index: 0;
    /* Sparkles inherit deck's scale transform */
}

/* Sparkles inside deck use relative sizing */
.destiny-deck-sparkle-emitter .authorship-sparkle {
    /* Scale sparkle size relative to deck (smaller for mini-deck) */
    width: 0.15em;
    height: 0.15em;
    font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* DESTINY FLYING CARDS — Animated cards that fly from deck to character positions */
/* PEEL-OPEN FLIP with PNG art — Gold-Tarot-Card-DESTINY-X.png back                */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.destiny-flying-card {
    position: fixed;
    /* Width/height set dynamically by JS for grow animation */
    z-index: 2000;
    pointer-events: none;
    perspective: 1200px;
    /* No background, border, or box-shadow on container — PNG provides visuals */
    background: transparent;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* Flying card inner — 3D flip container, transform controlled by JS */
.destiny-flying-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    /* No CSS transition — JS handles smooth animation */
}

/* Card faces — positioned for 3D flip */
.destiny-flying-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(218, 165, 32, 0.3);
}

/* BACK — Black-DestinyChoice-back.png (peels from Destiny's Choice deck) */
.destiny-flying-card-back {
    background-image: url('/assets/card-art/cards/Black-DestinyChoice-back.png');
    /* No border, no gradient — PNG only */
}

/* FRONT — Character or Love Interest face PNG (set via data attribute) */
.destiny-flying-card-front {
    transform: rotateY(180deg);
    /* Default to Character-face.png, JS sets data-face for Love Interest */
    background-image: url('/assets/card-art/cards/Character-face.png');
}

/* Love Interest face variant */
.destiny-flying-card-front[data-face="love-interest"] {
    background-image: url('/assets/card-art/cards/Love-Interest-face.png');
}

/* Live front face — cloned character card with actual fields */
.destiny-flying-card-front-live {
    transform: rotateY(180deg);
    overflow: hidden;
    background: transparent;
}

/* Ensure cloned card fills the flying card face */
.destiny-flying-card-front-live .character-tarot-card {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    outline: none !important;
}

/* No text overlays — PNG has baked text */
.destiny-flying-card-name,
.destiny-flying-card-details {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CORRIDOR-SCOPED FIX: Character/Identity corridor (#characterSectionRow)         */
/* Prevents flex compression of character cards and destiny deck                   */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Character cards: Proportional sizing, allow shrinking to fit viewport */
#characterSectionRow .character-tarot-card {
    flex-shrink: 1;
    min-width: 120px; /* Minimum readable size */
    border: none !important; /* PNG has frame baked in */
}

/* Destiny mini-deck: Centered between cards */
#characterSectionRow .destiny-mini-deck {
    flex-shrink: 1;
    align-self: center;
}

/* Destiny deck back art: Black-DestinyChoice-back.png */
#characterSectionRow .destiny-mini-card {
    background: url('/assets/card-art/cards/Black-DestinyChoice-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(218, 165, 32, 0.5);
    border-radius: 8px;
    box-sizing: border-box;
}

/* Hide text label since PNG has baked text */
#characterSectionRow .destiny-card-back-label {
    display: none;
}

/* Character card with fate overlay */
.character-destiny-card-tall.has-fate-card {
    position: relative;
}

.character-destiny-card-tall .fate-overlay-card {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2d1810 0%, #4a2c17 50%, #6b3a1f 100%);
    border: 1px solid var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
    text-align: center;
    z-index: 5;
}

.fate-overlay-card .fate-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.6em;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 4px;
    line-height: 1.2;
}

.fate-overlay-card .fate-card-details {
    font-family: 'Lora', serif;
    font-size: 0.5em;
    color: rgba(245, 240, 230, 0.8);
    line-height: 1.3;
}

.character-fields-side {
    flex: 1;
    min-width: 0;
}

.character-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.character-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.character-field label {
    display: block;
    text-align: left;
    color: var(--gold);
    margin-bottom: 4px;
    font-size: 0.8em;
    font-family: var(--font-main);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.character-field input,
.character-field select {
    padding: 6px 8px;
    font-size: 0.95em;
}

/* PASS 9F: Ensure ancestry text is never clipped */
.character-field-ancestry input {
    overflow: visible;
    text-overflow: clip;
}

.character-field-name {
    flex: 3;
    min-width: 140px;
}

.character-field-gender {
    flex: 0 0 90px;
    min-width: 80px;
    max-width: 100px;
}

.character-field-pronouns {
    flex: 0 0 90px;
    min-width: 80px;
    max-width: 100px;
}

.character-field-ancestry {
    flex: 2;
    min-width: 140px;
    position: relative;
}

.character-field-ancestry .rotating-placeholder {
    top: 14px;
}

/* Age field removed — no longer part of character form */

.custom-gender-input {
    margin-top: 5px;
    padding: 8px 10px !important;
    font-size: 0.9em !important;
}

/* Ancestry field — light on dark backgrounds, tarot card rule overrides to dark */
.ancestry-field {
    color: #fff;
}

/* Responsive: Stack fields on narrow screens */
@media (max-width: 600px) {
    .character-block-horizontal {
        flex-direction: column;
        align-items: stretch;
    }

    .character-destiny-side {
        margin-bottom: 10px;
    }

    .character-destiny-card-tall {
        width: 60px;
        height: 84px;
    }

    .character-fields-row {
        flex-direction: column;
    }

    .character-field {
        width: 100%;
    }

    .character-field-name,
    .character-field-gender,
    .character-field-pronouns,
    .character-field-ancestry {
        flex: none;
        min-width: auto;
    }
}

.fate-textarea-wrapper {
    width: 100%;
    overflow: hidden; /* Contain scrolling placeholder */
}

/* Ensure rotating placeholder stays within textarea bounds */
.fate-textarea-wrapper .rotating-placeholder {
    max-width: 100%;
    overflow: hidden;
}

/* Committed Phrases (Debossed/Carved Look) */
.committed-phrases {
    max-height: 120px;
    overflow-y: auto;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.committed-phrases:empty { display: none; }
.committed-phrase {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid rgba(60,60,60,0.5);
    border-radius: 4px;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.8), inset -1px -1px 2px rgba(50,50,50,0.3);
    font-size: 0.85em;
    color: rgba(180,180,180,0.9);
    font-family: var(--font-main);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    letter-spacing: 0.02em;
}
.committed-phrase-text {
    flex: 1;
    line-height: 1.4;
    white-space: pre-wrap;
}
.committed-phrase-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 1.1em;
    padding: 0 0 0 8px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}
.committed-phrase-remove:hover {
    color: var(--pink);
}

/* ═══════════════════════════════════════════════════════════════════
   STORYBOUND CUSTOM RADIO BUTTONS — Gold X imagery
   ═══════════════════════════════════════════════════════════════════ */

/* Container label - makes entire row clickable */
.sb-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    padding: 4px 0;
    user-select: none;
}

/* Hide native radio visually but keep it focusable/accessible */
.sb-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 48px;
    height: 48px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

/* Custom visual - default (unselected) state */
/* DOUBLED SIZE: 24px → 48px for better visibility */
.sb-radio-visual {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-image: url('Square%20Radio%20Button-no-x-200x200.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* Selected state - swap to X image */
.sb-radio input[type="radio"]:checked + .sb-radio-visual {
    background-image: url('Square%20Radio%20Button-x-200x200.jpg');
}

/* Hover state - subtle gold brighten */
.sb-radio:hover .sb-radio-visual {
    filter: brightness(1.15);
}

/* Focus-visible state - thin gold outline for keyboard users */
.sb-radio input[type="radio"]:focus-visible + .sb-radio-visual {
    box-shadow: 0 0 0 2px var(--gold);
    outline: none;
}

/* Disabled state — grey border, NO filter, NO opacity */
.sb-radio input[type="radio"]:disabled + .sb-radio-visual {
    cursor: not-allowed;
    border: 2px solid var(--plaque-locked-border);
    /* NO filter — element stays physically present */
}
.sb-radio:has(input[type="radio"]:disabled) {
    cursor: not-allowed;
    /* NO opacity change */
}
.sb-radio:has(input[type="radio"]:disabled) .sb-radio-label {
    color: var(--plaque-locked-text);
}

/* Label text styling - DOUBLED SIZE */
.sb-radio-label {
    color: var(--ink);
    font-size: 1.4em;
    line-height: 1.3;
}

/* Radio group container - vertical layout */
.sb-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

/* Radio group container - horizontal layout */
.sb-radio-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   STORYBOUND CUSTOM CHECKBOXES — Gold X imagery (same as radios)
   ═══════════════════════════════════════════════════════════════════ */

/* Container label - makes entire row clickable */
.sb-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
    padding: 4px 0;
    user-select: none;
}

/* Hide native checkbox visually but keep it focusable/accessible */
.sb-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 48px;
    height: 48px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

/* Custom visual - default (unchecked) state */
/* DOUBLED SIZE: 24px → 48px for better visibility */
.sb-checkbox-visual {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background-image: url('/assets/ui/Square-Radio-Button-no-x-200x200.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

/* Checked state - swap to X image */
.sb-checkbox input[type="checkbox"]:checked + .sb-checkbox-visual {
    background-image: url('/assets/ui/Square-Radio-Button-x-200x200.jpg');
}

/* Hover state - subtle gold brighten */
.sb-checkbox:hover .sb-checkbox-visual {
    filter: brightness(1.15);
}

/* Focus-visible state - thin gold outline for keyboard users */
.sb-checkbox input[type="checkbox"]:focus-visible + .sb-checkbox-visual {
    box-shadow: 0 0 0 2px var(--gold);
    outline: none;
}

/* Disabled state — grey border, NO filter, NO opacity */
.sb-checkbox input[type="checkbox"]:disabled + .sb-checkbox-visual {
    cursor: not-allowed;
    border: 2px solid var(--plaque-locked-border);
    /* NO filter — element stays physically present */
}
.sb-checkbox:has(input[type="checkbox"]:disabled) {
    cursor: not-allowed;
    /* NO opacity change */
}
.sb-checkbox:has(input[type="checkbox"]:disabled) .sb-checkbox-label {
    color: var(--plaque-locked-text);
}

/* Label text styling - DOUBLED SIZE */
.sb-checkbox-label {
    color: var(--ink);
    font-size: 1.4em;
    line-height: 1.3;
}

/* Checkbox group container */
.sb-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOK COVER PAGE - Physical book object in app environment
   ═══════════════════════════════════════════════════════════════════ */

.book-cover-page {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    perspective: 1500px;
}

.book-cover-page.hidden {
    display: none;
}

/* Night Mode - dims environment only, not book */
.book-cover-page.night-mode {
    background: linear-gradient(135deg, #151515, #1a1a1a);
}

/* Loading State — DECOMMISSIONED: No loading bar for covers */
.cover-loading {
    display: none !important; /* Loading feedback is implicit (image appearance only) */
}

.cover-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    overflow: visible;
    margin-bottom: 20px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    position: relative;
}
/* Loading bar sparkles — JS-driven emitter replaces static pseudo-elements */
.loading-sparkle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 230, 140, 0.95) 0%,
        rgba(255, 215, 0, 0.6) 40%,
        rgba(212, 175, 55, 0.3) 60%,
        transparent 80%
    );
    box-shadow: 0 0 4px rgba(255, 215, 0, 0.7);
    opacity: 0;
    will-change: transform, opacity;
    animation: loading-sparkle-drift var(--ls-duration, 3s) ease-in-out forwards;
}

@keyframes loading-sparkle-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }
    15% {
        opacity: var(--ls-opacity, 0.7);
        transform: translate(
            calc(var(--ls-dx, 0px) * 0.1),
            calc(var(--ls-dy, 0px) * 0.1)
        ) scale(1);
    }
    50% {
        opacity: calc(var(--ls-opacity, 0.7) * 0.8);
        transform: translate(
            calc(var(--ls-dx, 0px) * 0.5 + var(--ls-wobble, 0px)),
            calc(var(--ls-dy, 0px) * 0.5)
        ) scale(0.9);
    }
    75% {
        opacity: calc(var(--ls-opacity, 0.7) * 0.5);
        transform: translate(
            calc(var(--ls-dx, 0px) * 0.75 - var(--ls-wobble, 0px) * 0.5),
            calc(var(--ls-dy, 0px) * 0.75)
        ) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translate(var(--ls-dx, 0px), var(--ls-dy, 0px)) scale(0.3);
    }
}

/* Story/Visualize overlay loading bar sparkles — SEPARATE from cover bar */
.overlay-loading-sparkle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 240, 180, 0.95) 0%,
        rgba(255, 215, 0, 0.7) 35%,
        rgba(212, 175, 55, 0.4) 55%,
        transparent 75%
    );
    box-shadow:
        0 0 6px rgba(255, 215, 0, 0.8),
        0 0 12px rgba(255, 200, 100, 0.4);
    opacity: 0;
    will-change: transform, opacity;
    animation: overlay-sparkle-arc var(--ols-duration, 2.5s) var(--ols-easing, ease-in-out) forwards;
}

@keyframes overlay-sparkle-arc {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3) rotate(0deg);
    }
    12% {
        opacity: var(--ols-opacity, 0.8);
        transform: translate(
            calc(var(--ols-dx, 0px) * 0.08),
            calc(var(--ols-dy, 0px) * 0.12)
        ) scale(1.1) rotate(calc(var(--ols-rot, 0deg) * 0.1));
    }
    35% {
        opacity: var(--ols-opacity, 0.8);
        transform: translate(
            calc(var(--ols-dx, 0px) * 0.35 + var(--ols-sway, 0px)),
            calc(var(--ols-dy, 0px) * 0.4)
        ) scale(1) rotate(calc(var(--ols-rot, 0deg) * 0.4));
    }
    60% {
        opacity: calc(var(--ols-opacity, 0.8) * 0.7);
        transform: translate(
            calc(var(--ols-dx, 0px) * 0.6 - var(--ols-sway, 0px) * 0.6),
            calc(var(--ols-dy, 0px) * 0.65)
        ) scale(0.85) rotate(calc(var(--ols-rot, 0deg) * 0.7));
    }
    85% {
        opacity: calc(var(--ols-opacity, 0.8) * 0.35);
        transform: translate(
            calc(var(--ols-dx, 0px) * 0.85 + var(--ols-sway, 0px) * 0.3),
            calc(var(--ols-dy, 0px) * 0.88)
        ) scale(0.6) rotate(calc(var(--ols-rot, 0deg) * 0.9));
    }
    100% {
        opacity: 0;
        transform: translate(var(--ols-dx, 0px), var(--ols-dy, 0px)) scale(0.25) rotate(var(--ols-rot, 0deg));
    }
}

/* Glow pulse for story/visualize loading bar */
#loadingOverlayBar.sparkle-active {
    position: relative;
    overflow: visible;
    animation: overlay-bar-glow 4s ease-in-out infinite;
}

@keyframes overlay-bar-glow {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(212, 175, 55, 0.3),
            0 0 8px rgba(255, 215, 0, 0.15);
        filter: brightness(1);
    }
    50% {
        box-shadow:
            0 0 8px rgba(212, 175, 55, 0.5),
            0 0 16px rgba(255, 215, 0, 0.3),
            0 0 24px rgba(255, 200, 100, 0.15);
        filter: brightness(1.08);
    }
}

.cover-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #b8860b, #d4af37, #ffd700);
    border-radius: 999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.cover-status-text {
    font-family: 'lust-script-display', serif;
    font-size: 1.3em;
    color: var(--gold);
    margin: 0;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Cover Abort Button */
.cover-abort-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.cover-abort-btn:hover {
    background: rgba(255, 100, 100, 0.3);
    border-color: rgba(255, 100, 100, 0.5);
    color: #fff;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.name-refining-indicator {
    display: inline;
    margin-left: 8px;
    font-size: 0.85em;
    color: #888;
    font-style: italic;
}

.name-refining-indicator .refining-dot {
    animation: pulse 1s infinite;
    margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   PHYSICAL BOOK OBJECT - 3D book with hinge, thickness, shadows
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   FULL-HEIGHT BOOK OBJECT — 5:7 aspect ratio, height-first sizing
   ═══════════════════════════════════════════════════════════════════
   LAYOUT RULE: Book cover is the PRIMARY visual. It occupies maximum
   vertical space first. UI elements adapt around the book.

   ❌ Do NOT pre-reserve space for buttons
   ❌ Do NOT center-shrink to fit UI
   ❌ Do NOT let UI define the book's size

   If the cover feels small, the layout is wrong — not the image.
   ═══════════════════════════════════════════════════════════════════ */
.book-object {
    position: relative;
    /* Height-first: maximize vertical presence, minimal nav clearance only */
    height: min(90vh, calc(100dvh - 60px));
    /* Width derived from height to maintain 5:7 aspect ratio */
    aspect-ratio: 5 / 7;
    /* Allow book to be large — constrain only on ultra-wide screens */
    max-width: min(92vw, 560px);
    transform-style: preserve-3d;
    cursor: pointer;
    animation: bookAppear 0.8s ease forwards;
}

.book-object.hidden {
    display: none;
}

@keyframes bookAppear {
    from { opacity: 0; transform: scale(0.9) rotateY(-5deg); }
    to { opacity: 1; transform: scale(1) rotateY(0deg); }
}

/* Book cover - the front face that hinges open */
.book-cover {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 10;
    border-radius: 2px 8px 8px 2px;
    overflow: hidden;
    /* Right and bottom edge shadows for depth */
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.4),
        8px 8px 20px rgba(0, 0, 0, 0.3),
        inset -3px 0 8px rgba(0, 0, 0, 0.2);
}

.book-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 2px 8px 8px 2px;
    /* Book-jacket illusion: vignette + right-edge depth */
    background: linear-gradient(to left, rgba(0,0,0,0.12) 0%, transparent 8%);
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.12),
        inset 0 0 100px rgba(0, 0, 0, 0.06);
}

.book-cover-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Preserve full cover — no cropping */
    object-position: center;
    border-radius: 2px 8px 8px 2px;
    display: block;
    backface-visibility: hidden;
    /* Book-jacket illusion: subtle inner shadow for pressed-in feel */
    filter: contrast(1.02) saturate(0.97);
}

/* Container provides jacket-like background when contain leaves letterbox space */
.book-cover {
    background:
        /* Paper texture grain */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        /* Subtle warm-black jacket backing */
        linear-gradient(180deg, #1a1816 0%, #0f0e0c 100%);
}

/* Neutral parchment backface — shown when cover hinges open */
.book-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(210,180,140,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #e8dcc8 0%, #d9c9a8 40%, #c8b896 100%);
    border-radius: 2px 8px 8px 2px;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   COVER ART LAYERS — fallback, erotic border, keyhole takeover
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FALLBACK COVER — Intentional Empty-State Design
   ═══════════════════════════════════════════════════════════════════════════
   Shown when cover image is null/loading/failed. NEVER blocks progression.
   Design: Textured background, thin gold Art Deco border, title + author,
   faint embossed symbolic watermark. No error messaging, no placeholders.
   ═══════════════════════════════════════════════════════════════════════════ */
.cover-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 2px 8px 8px 2px;
    /* Rich textured background — dark with subtle warmth */
    background:
        /* Paper texture grain (inline SVG noise) */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        /* Warm vignette gradient */
        radial-gradient(ellipse at center, rgba(30, 25, 20, 0.95) 0%, rgba(12, 10, 8, 1) 100%);
    background-blend-mode: soft-light, normal;
    overflow: hidden;
    backface-visibility: hidden;
    color: #b9995a;
}
.cover-fallback.hidden { display: none; }

/* Art Deco border frame */
.cover-fallback .fallback-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #b9995a;
    opacity: 0.6;
    pointer-events: none;
}

/* Embossed watermark — faint symbolic key */
.cover-fallback .fallback-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 28%;
    max-width: 100px;
    opacity: 0.06;
    pointer-events: none;
}
.cover-fallback .fallback-watermark svg {
    width: 100%;
    height: auto;
    color: #d4af37;
    filter: none;
}

/* Title text — elegant embossed gold, scales with full-height cover */
.cover-fallback .fallback-title {
    position: absolute;
    /* Positioned to allow 2-line titles without clipping */
    bottom: 18%;
    left: 8%;
    right: 8%;
    /* Explicit height constraint to prevent overflow from parent's hidden */
    max-height: 25%;
    font-family: var(--font-story, Georgia, serif);
    /* Responsive font size based on container height */
    font-size: clamp(0.85em, 2.2cqh, 1.3em);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.4;
    color: #d4af37;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.9),
        0 -1px 0 rgba(255, 255, 255, 0.04);
    /* Embossed metallic gradient */
    background: linear-gradient(180deg, #e8d5a0 0%, #c4a860 40%, #9a7d35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Allow wrapping, prevent overflow */
    overflow: hidden;
    word-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Author line — subtle, elegant */
.cover-fallback .fallback-author {
    position: absolute;
    bottom: 14%;
    left: 14%;
    right: 14%;
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.65em;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    text-align: center;
    color: #8a7a5a;
    opacity: 0.75;
}

/* Subtle inner glow and vignette overlay */
.cover-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Soft warm glow at center */
        radial-gradient(ellipse at 50% 45%, rgba(212, 175, 55, 0.025) 0%, transparent 45%),
        /* Darker vignette at edges */
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

/* Responsive adjustments for narrow screens */
@media (max-width: 400px) {
    .cover-fallback .fallback-title {
        font-size: clamp(0.7em, 1.8cqh, 0.95em);
        letter-spacing: 0.05em;
        bottom: 16%;
        left: 6%;
        right: 6%;
        max-height: 28%;
    }
    .cover-fallback .fallback-author {
        font-size: 0.55em;
        bottom: 12%;
    }
    .cover-fallback .fallback-watermark {
        width: 24%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 2: EROTIC BORDER — World-Specific Image Assets
   ═══════════════════════════════════════════════════════════════════════════
   CONDITION: Applied ONLY when arousal_tier === "Erotic"
   ASSET PATH: /assets/borders/erotic/{world}_base.png

   WORLDS (6 total, no Mythic):
   - modern_base.png      → Modern
   - fantasy_base.png     → Fantasy
   - scifi_base.png       → SciFi (Sci-Fi)
   - historical_base.png  → Historical
   - postapocalyptic_base.png → PostApocalyptic (Post-Apocalyptic)
   - dystopia_base.png    → Dystopia

   FLAVOR: Affects SURFACE CONDITION only (damage, aging, corrosion), never geometry.
   Applied via CSS filters on the image element.

   FAILURE: If asset unavailable, border is suppressed entirely.
   Log: "Erotic border asset unavailable — border suppressed"
   ═══════════════════════════════════════════════════════════════════════════ */
.cover-erotic-border {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    border-radius: 2px 8px 8px 2px;
    overflow: hidden;
    backface-visibility: hidden;
}
.cover-erotic-border.hidden { display: none; }

/* Border image fills frame absolutely */
.cover-erotic-border .erotic-border-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

/* Inner vignette shadow to frame the base image */
.cover-erotic-border::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px 8px 8px 2px;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.5),
        inset 0 0 80px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Subtle outer glow */
.cover-erotic-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 4px 10px 10px 4px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.15);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORLD-SPECIFIC TINTS — Applied to container, affects vignette/glow
   Border geometry is defined by the asset, not CSS.
   ═══════════════════════════════════════════════════════════════════════════ */
.cover-erotic-border.world-fantasy::before {
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.2);
}
.cover-erotic-border.world-scifi::before {
    box-shadow: 0 0 14px rgba(64, 224, 208, 0.15);
}
.cover-erotic-border.world-scifi::after {
    box-shadow:
        inset 0 0 45px rgba(0, 10, 20, 0.6),
        inset 0 0 80px rgba(0, 5, 10, 0.25);
}
.cover-erotic-border.world-historical::before {
    box-shadow: 0 0 10px rgba(180, 150, 100, 0.15);
}
.cover-erotic-border.world-historical::after {
    box-shadow:
        inset 0 0 50px rgba(20, 15, 5, 0.55),
        inset 0 0 90px rgba(0, 0, 0, 0.2);
}
.cover-erotic-border.world-postapocalyptic::before {
    box-shadow: 0 0 8px rgba(140, 100, 60, 0.12);
}
.cover-erotic-border.world-postapocalyptic::after {
    box-shadow:
        inset 0 0 55px rgba(30, 20, 10, 0.65),
        inset 0 0 100px rgba(0, 0, 0, 0.3);
}
.cover-erotic-border.world-dystopia::before {
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.1);
}
.cover-erotic-border.world-dystopia::after {
    box-shadow:
        inset 0 0 50px rgba(10, 10, 10, 0.6),
        inset 0 0 85px rgba(0, 0, 0, 0.25);
}

/* Soulmates modifier: warmer glow, richer vignette */
.cover-erotic-border.soulmates::before {
    box-shadow: 0 0 18px rgba(218, 165, 32, 0.25);
}
.cover-erotic-border.soulmates::after {
    box-shadow:
        inset 0 0 35px rgba(0, 0, 0, 0.4),
        inset 0 0 70px rgba(0, 0, 0, 0.15),
        inset 0 0 6px rgba(218, 165, 32, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLAVOR SURFACE CONDITIONS — CSS Filters on Border Image
   ═══════════════════════════════════════════════════════════════════════════
   Flavor affects SURFACE CONDITION only:
   - Damage (scratches, dents, chips)
   - Aging (patina, fading, foxing)
   - Corrosion (rust, verdigris, tarnish)

   Applied via filter combinations on the image element.
   These do NOT change geometry, only visual surface treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* AGED: Sepia warmth, slight desaturation, reduced contrast */
.cover-erotic-border.flavor-aged .erotic-border-img {
    filter: sepia(0.15) saturate(0.85) contrast(0.95) brightness(0.97);
}

/* WEATHERED: More pronounced aging, cool desaturation */
.cover-erotic-border.flavor-weathered .erotic-border-img {
    filter: sepia(0.08) saturate(0.7) contrast(0.9) brightness(0.92);
}

/* CORRODED: Green-blue tint (verdigris), reduced saturation */
.cover-erotic-border.flavor-corroded .erotic-border-img {
    filter: sepia(0.05) hue-rotate(15deg) saturate(0.75) contrast(0.88) brightness(0.9);
}

/* RUSTED: Warm reddish-brown shift, gritty */
.cover-erotic-border.flavor-rusted .erotic-border-img {
    filter: sepia(0.25) hue-rotate(-5deg) saturate(0.8) contrast(0.92) brightness(0.88);
}

/* TARNISHED: Silver/gold darkening, low saturation */
.cover-erotic-border.flavor-tarnished .erotic-border-img {
    filter: saturate(0.6) contrast(0.85) brightness(0.85);
}

/* PRISTINE: Slightly enhanced, no damage (default, no class needed) */
.cover-erotic-border.flavor-pristine .erotic-border-img {
    filter: saturate(1.05) contrast(1.02) brightness(1.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Layer 3: DIRTY KEYHOLE TAKEOVER — World-Specific Mask Assets
   ═══════════════════════════════════════════════════════════════════════════
   CONDITION: Applied ONLY when arousal_tier === "Dirty"
   ASSET PATH: /assets/keyholes/{world}_mask.png

   GEOMETRY (NON-NEGOTIABLE):
   - Cover format: Portrait, 5:7 aspect ratio
   - Top of aperture: 8% from top of cover
   - Bottom of aperture: 8% from bottom of cover
   - Aperture height: ~84% of cover height
   - Crown width: 55-65% of cover width
   - Stem minimum width: ≥22% of cover width

   KEYHOLE IS A MASK, NOT AN OBJECT:
   - Dominant alpha mask
   - Primary compositional frame
   - Defining geometry of the cover
   - Everything INSIDE = scene (symbolic objects only)
   - Everything OUTSIDE = solid material

   WORLDS (6 total, one silhouette each):
   - modern_mask.png       → Clean industrial keyhole, machined steel
   - historical_mask.png   → Ornate metalwork, filigree, aged brass
   - fantasy_mask.png      → Hand-forged, rune-etched, slight asymmetry
   - scifi_mask.png        → Geometric crown (octagonal), titanium/carbon fiber
   - dystopia_mask.png     → Brutalist geometry, industrial locking plate
   - postapocalyptic_mask.png → Salvaged construction, bolts, weld seams

   FLAVOR: Affects SURFACE CONDITION only (wear, corrosion, fracture), never aperture geometry.

   FAILURE: If constraint cannot be satisfied, suppress cover and log:
   "Dirty keyhole constraint failed — cover suppressed"
   ═══════════════════════════════════════════════════════════════════════════ */
.cover-keyhole-overlay {
    position: absolute;
    inset: 0;
    z-index: 13;
    border-radius: 2px 8px 8px 2px;
    overflow: hidden;
    backface-visibility: hidden;
}
.cover-keyhole-overlay.hidden { display: none; }

.keyhole-plate {
    position: absolute;
    inset: 0;
    /* Default material: aged bronze/brass metal surface */
    background:
        radial-gradient(ellipse at 50% 35%, rgba(60,50,40,1) 0%, rgba(30,25,20,1) 50%, rgba(15,12,10,1) 100%);
    /* Keyhole mask: loaded via JS based on world */
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* Filigree texture on the plate */
.keyhole-plate::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-conic-gradient(
            from 0deg at 50% 35%,
            rgba(180,150,100,0.04) 0deg,
            transparent 3deg,
            transparent 12deg
        ),
        radial-gradient(ellipse at 50% 35%, transparent 45px, rgba(180,150,100,0.08) 50px, rgba(180,150,100,0.03) 120px, transparent 200px);
    pointer-events: none;
}

/* Keyhole rim glow — positioned around aperture */
.keyhole-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.25) 0%, rgba(212,175,55,0.08) 60%, transparent 80%);
    pointer-events: none;
}

/* Title + author engraved into metalwork (MUST be on material, NOT floating in aperture) */
.keyhole-title {
    position: absolute;
    bottom: 3%; /* Inside the 8% bottom margin */
    left: 10%;
    right: 10%;
    text-align: center;
    font-family: var(--font-story, Georgia, serif);
    color: rgba(180, 150, 100, 0.6);
    text-shadow:
        0 1px 0 rgba(0,0,0,0.8),
        0 -1px 0 rgba(255,255,255,0.05);
    pointer-events: none;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.keyhole-title-text {
    font-size: 0.95em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.keyhole-author {
    font-size: 0.55em;
    font-variant: small-caps;
    letter-spacing: 0.22em;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORLD-SPECIFIC KEYHOLE MATERIALS — Material treatment per world
   Silhouette is defined by mask asset, material defines plate appearance.
   ═══════════════════════════════════════════════════════════════════════════ */

/* MODERN: Clean industrial, machined steel/brushed aluminum */
.cover-keyhole-overlay.world-modern .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(90,90,95,1) 0%, rgba(55,55,60,1) 50%, rgba(25,25,28,1) 100%);
}
.cover-keyhole-overlay.world-modern .keyhole-plate::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.02) 0%, transparent 1%, transparent 99%, rgba(255,255,255,0.02) 100%),
        repeating-linear-gradient(90deg, rgba(180,180,190,0.03) 0px, transparent 1px, transparent 3px);
}
.cover-keyhole-overlay.world-modern .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 40%, rgba(200,200,210,0.15) 0%, rgba(180,180,190,0.05) 60%, transparent 80%);
}
.cover-keyhole-overlay.world-modern .keyhole-title {
    color: rgba(180, 180, 190, 0.65);
}

/* HISTORICAL: Ornate metalwork, aged brass/bronze/iron, filigree */
.cover-keyhole-overlay.world-historical .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(70,55,35,1) 0%, rgba(40,32,22,1) 50%, rgba(18,14,10,1) 100%);
}
.cover-keyhole-overlay.world-historical .keyhole-plate::before {
    background:
        repeating-conic-gradient(
            from 0deg at 50% 35%,
            rgba(200,160,80,0.05) 0deg,
            transparent 3deg,
            transparent 10deg
        ),
        radial-gradient(ellipse at 50% 35%, transparent 40px, rgba(180,140,70,0.1) 50px, rgba(160,120,60,0.04) 120px, transparent 200px);
}
.cover-keyhole-overlay.world-historical .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 38%, rgba(212,175,55,0.28) 0%, rgba(180,140,60,0.1) 60%, transparent 80%);
}
.cover-keyhole-overlay.world-historical .keyhole-title {
    color: rgba(200, 160, 80, 0.6);
}

/* FANTASY: Hand-forged, rune-etched, mystical but mechanical */
.cover-keyhole-overlay.world-fantasy .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(55,50,45,1) 0%, rgba(30,28,25,1) 50%, rgba(15,14,12,1) 100%);
}
.cover-keyhole-overlay.world-fantasy .keyhole-plate::before {
    background:
        repeating-conic-gradient(
            from 15deg at 50% 35%,
            rgba(180,150,100,0.05) 0deg,
            transparent 2deg,
            transparent 15deg
        ),
        radial-gradient(ellipse at 50% 35%, transparent 35px, rgba(140,120,80,0.08) 45px, rgba(120,100,70,0.03) 110px, transparent 180px);
}
.cover-keyhole-overlay.world-fantasy .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 38%, rgba(180,150,90,0.22) 0%, rgba(150,120,70,0.08) 55%, transparent 75%);
}
.cover-keyhole-overlay.world-fantasy .keyhole-title {
    color: rgba(170, 140, 90, 0.6);
}

/* SCI-FI: Geometric, titanium/carbon fiber/polymer, LED seams allowed */
.cover-keyhole-overlay.world-scifi .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(35,40,50,1) 0%, rgba(20,24,32,1) 50%, rgba(10,12,18,1) 100%);
}
.cover-keyhole-overlay.world-scifi .keyhole-plate::before {
    background:
        linear-gradient(180deg, rgba(64,224,208,0.03) 0%, transparent 5%, transparent 95%, rgba(64,224,208,0.03) 100%),
        repeating-linear-gradient(90deg, rgba(64,224,208,0.02) 0px, transparent 1px, transparent 4px);
}
.cover-keyhole-overlay.world-scifi .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 42%, rgba(64,224,208,0.18) 0%, rgba(64,224,208,0.06) 50%, transparent 75%);
}
.cover-keyhole-overlay.world-scifi .keyhole-title {
    color: rgba(64, 200, 190, 0.6);
}

/* DYSTOPIA: Brutalist geometry, industrial locking plate, oppressive */
.cover-keyhole-overlay.world-dystopia .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 38%, rgba(50,48,45,1) 0%, rgba(32,30,28,1) 50%, rgba(15,14,13,1) 100%);
}
.cover-keyhole-overlay.world-dystopia .keyhole-plate::before {
    background:
        repeating-linear-gradient(0deg, rgba(80,75,70,0.04) 0px, transparent 1px, transparent 8px),
        repeating-linear-gradient(90deg, rgba(80,75,70,0.03) 0px, transparent 1px, transparent 12px);
}
.cover-keyhole-overlay.world-dystopia .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 40%, rgba(120,110,100,0.12) 0%, rgba(100,90,80,0.04) 60%, transparent 80%);
}
.cover-keyhole-overlay.world-dystopia .keyhole-title {
    color: rgba(130, 120, 110, 0.55);
}

/* POST-APOCALYPTIC: Salvaged, bolts, weld seams, decay/damage */
.cover-keyhole-overlay.world-postapocalyptic .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(70,55,45,1) 0%, rgba(45,35,28,1) 50%, rgba(22,18,14,1) 100%);
}
.cover-keyhole-overlay.world-postapocalyptic .keyhole-plate::before {
    background:
        repeating-conic-gradient(
            from 0deg at 50% 35%,
            rgba(160,120,80,0.04) 0deg,
            transparent 5deg,
            transparent 18deg
        ),
        radial-gradient(ellipse at 45% 40%, rgba(140,100,60,0.06) 0%, transparent 100px),
        radial-gradient(ellipse at 55% 30%, rgba(100,80,50,0.04) 0%, transparent 80px);
}
.cover-keyhole-overlay.world-postapocalyptic .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 38%, rgba(180,140,90,0.18) 0%, rgba(140,110,70,0.06) 55%, transparent 75%);
}
.cover-keyhole-overlay.world-postapocalyptic .keyhole-title {
    color: rgba(160, 130, 90, 0.55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOULMATES MODIFIER — Warmer, devotional metalwork ("locked by choice")
   ═══════════════════════════════════════════════════════════════════════════ */
.cover-keyhole-overlay.soulmates .keyhole-plate {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(80,60,45,1) 0%, rgba(50,38,28,1) 50%, rgba(28,22,18,1) 100%);
}
.cover-keyhole-overlay.soulmates .keyhole-plate::before {
    background:
        repeating-conic-gradient(
            from 0deg at 50% 35%,
            rgba(218,165,32,0.06) 0deg,
            transparent 3deg,
            transparent 12deg
        ),
        radial-gradient(ellipse at 50% 35%, transparent 45px, rgba(218,165,32,0.12) 50px, rgba(218,165,32,0.05) 120px, transparent 200px);
}
.cover-keyhole-overlay.soulmates .keyhole-plate::after {
    background: radial-gradient(ellipse at 50% 40%, rgba(218,165,32,0.35) 0%, rgba(218,165,32,0.12) 60%, transparent 80%);
}
.cover-keyhole-overlay.soulmates .keyhole-title {
    color: rgba(218, 165, 32, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLAVOR SURFACE CONDITIONS — CSS Filters on Keyhole Plate
   ═══════════════════════════════════════════════════════════════════════════
   Flavor affects SURFACE CONDITION only:
   - Wear (scratches, dents, chips)
   - Corrosion (rust, verdigris, oxidation)
   - Fracture (cracks, breaks)
   - Environmental damage (growth, decay, discoloration)

   These do NOT change aperture geometry, only plate surface treatment.
   ═══════════════════════════════════════════════════════════════════════════ */

/* AGED: Patina, fading, time-worn */
.cover-keyhole-overlay.flavor-aged .keyhole-plate {
    filter: sepia(0.12) saturate(0.88) contrast(0.94) brightness(0.95);
}

/* WEATHERED: Exposure damage, cool desaturation */
.cover-keyhole-overlay.flavor-weathered .keyhole-plate {
    filter: sepia(0.06) saturate(0.72) contrast(0.88) brightness(0.9);
}

/* CORRODED: Verdigris, oxidation, green-blue tint */
.cover-keyhole-overlay.flavor-corroded .keyhole-plate {
    filter: sepia(0.04) hue-rotate(12deg) saturate(0.78) contrast(0.86) brightness(0.88);
}

/* RUSTED: Iron oxide, warm reddish-brown */
.cover-keyhole-overlay.flavor-rusted .keyhole-plate {
    filter: sepia(0.22) hue-rotate(-6deg) saturate(0.82) contrast(0.9) brightness(0.85);
}

/* IRRADIATED: Discoloration, unnatural tint */
.cover-keyhole-overlay.flavor-irradiated .keyhole-plate {
    filter: sepia(0.08) hue-rotate(8deg) saturate(0.7) contrast(0.92) brightness(0.82);
}

/* FRACTURED: Cracked, broken, structural damage (visual only) */
.cover-keyhole-overlay.flavor-fractured .keyhole-plate {
    filter: saturate(0.65) contrast(1.05) brightness(0.88);
}

/* PRISTINE: Clean, well-maintained (default/enhanced) */
.cover-keyhole-overlay.flavor-pristine .keyhole-plate {
    filter: saturate(1.05) contrast(1.02) brightness(1.02);
}

/* Hinge states */
.book-cover.hinge-peek {
    transform: rotateY(-15deg);
}

.book-cover.hinge-open {
    transform: rotateY(-160deg);
    pointer-events: none;
}

/* Book spine - enhanced hardcover feel with visible thickness */
.book-spine {
    position: absolute;
    left: -22px;
    top: 0;
    bottom: 0;
    width: 22px;
    background: linear-gradient(to right, #1a0f08, #2a1a10, #3d2817);
    transform: rotateY(-90deg) translateX(-11px);
    transform-origin: right center;
    border-radius: 3px 0 0 3px;
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.3);
}

/* Book spine text band */
.book-spine::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 4px;
    right: 4px;
    background: linear-gradient(to bottom, rgba(200,170,120,0.2), rgba(200,170,120,0.1));
    border-radius: 1px;
}

/* Book thickness - enhanced bottom/side depth for hardcover */
.book-thickness {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 14px;
    background: linear-gradient(to bottom,
        #ffffff 0%,
        #fafafa 20%,
        #f5f5f5 80%,
        #e8e8e8 100%
    );
    transform: rotateX(90deg) translateY(7px);
    transform-origin: top center;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Page edges visible from the side - PAPER WHITE, not tinted */
.book-pages-preview {
    position: absolute;
    inset: 4px;
    right: 4px;
    background: #ffffff;
    border-radius: 0 6px 6px 0;
    z-index: 5;
    overflow: hidden;
    box-shadow: inset -2px 0 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;
}

/* Inside cover: Title + Synopsis text on white paper (no images) */
.book-inside-cover {
    position: relative;
    flex: 1 1 100%;
    background: #ffffff !important; /* Solid white - prevent any bleed-through */
    background-image: none !important; /* Block inherited cover art */
    border-radius: 0 6px 6px 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    text-align: center;
    color: #333;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    overflow: hidden; /* Contain content */
}

/* Setting plate — full-width image container (first element in storyContent) */
.setting-plate {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: 50vh;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f0e8 0%, #e8e0d4 100%);
    border-radius: 6px;
    margin-bottom: 24px;
}
.setting-plate::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.08);
    border-radius: 6px;
}

/* DEPRECATED: setting-active was fullscreen mode, now use setting-inline */
.setting-plate.setting-active {
    display: none; /* Fullscreen mode disabled */
}

/* Scene 1: Setting plate inline mode (within scene content, not fullscreen) */
.setting-plate.setting-inline {
    position: relative;
    max-height: 50vh;
    min-height: 150px;
    width: 100%;
    z-index: 1; /* Low z-index, inline with content */
    margin: 0 auto 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1814;
}
.setting-plate.setting-inline .book-scene-image {
    max-height: 45vh;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* WRY CONFESSION — INSET-IMAGE RENDERING (AUTHORITATIVE, MANDATORY)           */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* VISUALIZER LAYOUT RULE — WRY CONFESSION (AUTHORITATIVE):                    */
/*                                                                             */
/* On desktop viewports, Wry Confession illustrations MUST render at 50% of    */
/* the standard cover/image width. They MUST be centered with surrounding      */
/* whitespace and MUST NOT function as a dominant hero image.                  */
/*                                                                             */
/* This scaling is MANDATORY for tone correctness.                             */
/*                                                                             */
/* Editorial aside, not focal scene. Text retains narrative primacy.           */
/* TAG: storybound/wry-inset-image-v1                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Wry Confession: Image as inset aside, not hero (MANDATORY SIZING) */
.setting-plate.setting-inline.wry-confession-inset {
    width: 50%; /* MANDATORY: 50% of text column for tone correctness */
    max-width: 60%;
    min-width: 40%;
    max-height: 35vh; /* Reduced from 50vh */
    margin: 1.5em auto; /* MANDATORY: Centered block with whitespace */
    background: transparent;
    border-radius: 4px;
}
.setting-plate.setting-inline.wry-confession-inset .book-scene-image {
    max-height: 30vh; /* Reduced prominence */
    max-width: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25); /* Softer shadow */
}

/* Wry Confession Caption — marginal thought, visually lighter */
.wry-confession-caption {
    display: block;
    max-width: 100%;
    margin-top: 0.5em;
    padding: 0 0.5em;
    font-size: 0.8em;
    font-style: italic;
    color: #888;
    text-align: center;
    line-height: 1.4;
    /* No bold, no emphasis, no quotes */
}

/* Mobile: scale down further, stay centered, no clipping */
@media (max-width: 600px) {
    .setting-plate.setting-inline.wry-confession-inset {
        width: 70%; /* Slightly larger ratio on mobile */
        max-width: 80%;
        min-width: 50%;
    }
    .wry-confession-caption {
        font-size: 0.75em;
    }
}

/* PAGE 1→2: Page flip transition (not fade) */
.setting-plate.page-flip-out {
    animation: pageFlipOut 600ms ease-in forwards;
}
@keyframes pageFlipOut {
    0% {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(1000px) rotateY(-90deg);
        opacity: 0;
    }
}

/* Setting plate hidden on scene pages */
.setting-plate.hidden {
    display: none !important;
}

/* Setting plate title — printed-book style, overlays scene art */
.scene-page-title {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.7em;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(60, 50, 40, 0.7);
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    line-height: 1.3;
    pointer-events: none;
    padding: 6px 4px;
    background: linear-gradient(to bottom, rgba(245,240,232,0.85) 0%, rgba(245,240,232,0.4) 70%, transparent 100%);
    border-radius: 0 0 4px 4px;
}
.scene-page-title:empty { display: none; }

.book-scene-image {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: cover;
    display: none;
    border-radius: 6px;
}

.book-scene-loading {
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.75em;
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

.book-scene-image[src]:not([src=""]) ~ .book-scene-loading {
    display: none;
}

.book-object:hover .book-inside-cover,
.book-cover.hinge-peek + .book-pages-preview .book-inside-cover,
.book-cover.courtesy-peek + .book-pages-preview .book-inside-cover,
.book-cover.hinge-open + .book-pages-preview .book-inside-cover {
    opacity: 1;
}

/* Inside cover title — small, restrained, printed-book feel */
.inside-cover-title {
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #555;
    margin: 0 0 4px;
    padding: 0;
    line-height: 1.3;
    max-width: 85%;
}

/* Inside cover author line — understated, printed-book style */
.inside-cover-author {
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.65em;
    font-weight: 400;
    font-variant: small-caps;
    letter-spacing: 0.22em;
    color: #888;
    margin: 0;
    padding: 0;
}

/* Inside cover synopsis styling */
.inside-cover-synopsis {
    font-family: var(--font-story, Georgia, serif);
    font-size: 0.85em;
    line-height: 1.5;
    color: #2a2a2a;
    max-width: 92%;
    margin: 0 auto;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Inside cover decorative rule */
.inside-cover-rule {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, #999, transparent);
    margin: 12px auto;
}

.page-edge-stack {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 12px;
    background: repeating-linear-gradient(
        to bottom,
        #ffffff 0px,
        #ffffff 1px,
        #f0f0f0 1px,
        #f0f0f0 2px
    );
    border-radius: 0 4px 4px 0;
    box-shadow: inset -1px 0 2px rgba(0,0,0,0.05);
    z-index: 7;
}

/* ═══════════════════════════════════════════════════════════════════
   BOOKMARK RIBBON - Visual indicator for returning readers
   ═══════════════════════════════════════════════════════════════════ */

.bookmark-ribbon {
    position: absolute;
    top: -8px;
    right: 30px;
    width: 20px;
    height: 60px;
    background: linear-gradient(135deg, #8b0000, #a01010);
    z-index: 20;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.bookmark-ribbon.hidden {
    display: none;
}

.bookmark-ribbon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   COURTESY HINGE ANIMATION - One-time learning cue
   ═══════════════════════════════════════════════════════════════════ */

@keyframes courtesyHingePeek {
    0% { transform: rotateY(0deg); }
    40% { transform: rotateY(-18deg); }
    60% { transform: rotateY(-18deg); }
    100% { transform: rotateY(0deg); }
}

.book-cover.courtesy-peek {
    animation: courtesyHingePeek 2s ease-in-out forwards;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE-TURN ANIMATION OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

.page-turn-overlay {
    position: fixed;
    inset: 0;
    z-index: 2500;
    pointer-events: none;
    perspective: 2000px;
}

.page-turn-overlay.hidden {
    display: none;
}

.page-turn-overlay.active {
    pointer-events: auto;
}

.page-turn-left,
.page-turn-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg1), var(--bg2));
    transform-origin: center;
    backface-visibility: hidden;
}

.page-turn-left {
    left: 0;
    transform-origin: right center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset -20px 0 40px rgba(0, 0, 0, 0.3);
}

.page-turn-right {
    right: 0;
    transform-origin: left center;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 20px 0 40px rgba(0, 0, 0, 0.3);
}

/* Page Turn Animation Classes */
.page-turn-overlay.turning .page-turn-left {
    animation: pageTurnLeftOpen 1.2s ease-in-out forwards;
}

.page-turn-overlay.turning .page-turn-right {
    animation: pageTurnRightOpen 1.2s ease-in-out forwards;
}

@keyframes pageTurnLeftOpen {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-120deg);
    }
}

@keyframes pageTurnRightOpen {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(120deg);
    }
}

/* Story Content Container */
.story-content {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.story-content.hidden {
    display: none;
}

.story-content.fade-in {
    animation: storyFadeIn 0.8s ease forwards;
}

@keyframes storyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .cover-status-text {
        animation: none;
    }

    .book-object {
        animation: none;
        opacity: 1;
        transform: scale(1);
    }

    .book-cover {
        transition-duration: 0.2s;
    }

    .book-cover.courtesy-peek {
        animation: none;
    }

    .book-cover.hinge-open {
        transition-duration: 0.3s;
    }

    .page-turn-overlay.turning .page-turn-left,
    .page-turn-overlay.turning .page-turn-right {
        animation-duration: 0.3s;
    }

    .story-content.fade-in {
        animation: none;
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FLOATING SYNOPSIS PANEL - Live-updating story preview
   ═══════════════════════════════════════════════════════════════════

   LOCKED DESIGN RULE:
   The floating synopsis panel must remain visually restrained and literary.
   It should feel like an authorial whisper, not a system notification.
   No glassmorphism, glow effects, or color-coded highlighting.

   CORRECTIVE PASS: Converted to side-mounted floating card (5x7 book jacket)
   - Positioned to the right of main content on desktop
   - Sticky within the 4-axis selection range only
   - Feels like a quiet accompanying object, not page chrome
   ═══════════════════════════════════════════════════════════════════ */

.synopsis-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000; /* Float above everything except modals */
    /* Gold gradient: warm champagne to muted parchment */
    background: linear-gradient(165deg,
        rgba(212, 175, 100, 0.92) 0%,
        rgba(195, 160, 90, 0.88) 35%,
        rgba(180, 150, 85, 0.85) 70%,
        rgba(165, 140, 80, 0.82) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    padding: 8px 16px;
    width: 256px;
    height: 70px;
    min-height: 0;
    max-height: none;
    max-width: none;
    overflow: visible; /* Allow drag handle to extend above panel */
    /* Hidden by default - JS controls visibility based on scroll position */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* DSP DRAG HANDLE — User-positionable floating panel */
/* DSP TAB — full-width bar with handle flush-left, X flush-right */
.dsp-drag-handle {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    width: 100%;
    height: 14px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, rgba(195, 160, 90, 0.95), rgba(180, 150, 85, 0.9));
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.dsp-drag-handle:active,
.synopsis-panel.dsp-dragging .dsp-drag-handle {
    cursor: grabbing;
}

.dsp-drag-dots {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(60, 45, 20, 0.6);
    line-height: 1;
    user-select: none;
    padding-left: 6px;
}

/* DSP COLLAPSE BUTTON — X flush-right inside the tab bar */
.dsp-collapse-btn {
    width: 20px;
    height: 14px;
    background: none;
    border: none;
    color: rgba(60, 45, 20, 0.7);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}
.dsp-collapse-btn:hover {
    color: rgba(60, 45, 20, 1);
}

/* Collapsed state: content hidden, drag handle still visible */
.synopsis-panel.dsp-collapsed {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 0 16px;
    border: none;
    background: transparent;
    box-shadow: none;
    transition: height 0.25s ease, padding 0.25s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.synopsis-panel.dsp-collapsed .synopsis-text,
.synopsis-panel.dsp-collapsed .synopsis-title,
.synopsis-panel.dsp-collapsed .dsp-art-deco-border {
    display: none;
}
.synopsis-panel.dsp-collapsed .dsp-drag-handle {
    top: -14px;
}
.synopsis-panel.dsp-collapsed .dsp-resize-handle {
    display: none;
}

/* DSP RESIZE HANDLES — Corner grips for scaling the panel */
.dsp-resize-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 2;
}
.dsp-resize-handle.dsp-resize-nw { top: -3px; left: -3px; cursor: nw-resize; }
.dsp-resize-handle.dsp-resize-ne { top: -3px; right: -3px; cursor: ne-resize; }
.dsp-resize-handle.dsp-resize-sw { bottom: -3px; left: -3px; cursor: sw-resize; }
.dsp-resize-handle.dsp-resize-se { bottom: -3px; right: -3px; cursor: se-resize; }

/* Subtle corner pips — gold triangles */
.dsp-resize-handle::after {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 4px solid transparent;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.dsp-resize-nw::after { top: 0; left: 0; border-top-color: rgba(180,150,80,0.7); border-left-color: rgba(180,150,80,0.7); }
.dsp-resize-ne::after { top: 0; right: 0; border-top-color: rgba(180,150,80,0.7); border-right-color: rgba(180,150,80,0.7); }
.dsp-resize-sw::after { bottom: 0; left: 0; border-bottom-color: rgba(180,150,80,0.7); border-left-color: rgba(180,150,80,0.7); }
.dsp-resize-se::after { bottom: 0; right: 0; border-bottom-color: rgba(180,150,80,0.7); border-right-color: rgba(180,150,80,0.7); }
.dsp-resize-handle:hover::after { opacity: 0.8; }

/* Prevent text selection while dragging/resizing */
.synopsis-panel.dsp-interacting { user-select: none; }
.synopsis-panel.dsp-interacting * { user-select: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ART DECO DSP BORDER — SVG decorative frame
   ═══════════════════════════════════════════════════════════════════════════
   Design: Double gold line frame with corner sunbursts and center diamonds
   - Double outer gold lines (brushed/plated finish)
   - Top/bottom center: small diamond where lines resolve
   - Corners: 4 stepped angular rays pointing inward
   - No curves, no florals, pure Art Deco geometry
   ═══════════════════════════════════════════════════════════════════════════ */
.dsp-art-deco-border {
    display: none; /* Globally hidden — clean CSS-only decoration used at all widths */
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    pointer-events: none;
    z-index: -1;
}

/* Visible state - controlled by JS when within 4-axis range */
.synopsis-panel.visible {
    opacity: 1;
    visibility: visible;
}

/* DSP CORRIDOR COMPLETE — Fade out after corridor completion (post-Arousal) */
.synopsis-panel.corridor-complete {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DSP DECORATIONS — CSS-only double-line frame with corner marks
   Applied at ALL screen widths (replaces removed SVG art-deco border)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer border of double-line frame */
.synopsis-panel {
    border: 2px solid rgba(90, 70, 30, 0.5);
    border-radius: 0; /* Sharp corners for geometric look */
}

/* Inner border of double-line frame (pressed look) */
.synopsis-panel::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(70, 50, 20, 0.4);
    pointer-events: none;
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.2);
}

/* Corner square marks */
.synopsis-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* Top-left corner */
        linear-gradient(135deg, rgba(70, 50, 20, 0.5) 4px, transparent 4px) no-repeat 0 0,
        /* Top-right corner */
        linear-gradient(225deg, rgba(70, 50, 20, 0.5) 4px, transparent 4px) no-repeat 100% 0,
        /* Bottom-left corner */
        linear-gradient(45deg, rgba(70, 50, 20, 0.5) 4px, transparent 4px) no-repeat 0 100%,
        /* Bottom-right corner */
        linear-gradient(315deg, rgba(70, 50, 20, 0.5) 4px, transparent 4px) no-repeat 100% 100%;
    background-size: 12px 12px;
}

.synopsis-title {
    font-family: 'Lora', 'Georgia', serif;
    font-size: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    /* Near-black with debossed effect */
    color: rgba(45, 35, 25, 0.9);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.3);
    margin-bottom: 2px;
    text-align: center;
}

.synopsis-text {
    font-family: 'Lora', 'Georgia', serif;
    font-size: 0.85em;
    line-height: 1.4;
    /* Near-black with subtle debossed effect */
    color: rgba(40, 30, 20, 0.85);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.25);
    margin: 0;
    font-style: italic;
    letter-spacing: 0.01em;
    /* Single-line marquee: never wrap, clip overflow */
    white-space: nowrap !important;
    overflow: hidden;
    max-height: 1.4em; /* One line only */
}

/* Inner wrapper for scrolling animation */
.synopsis-text-inner {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap !important;
    animation: dsp-scroll 20s linear infinite;
}

@keyframes dsp-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Pause scrolling on hover so user can read */
/* DSP scroll never pauses on hover — always scrolling */

/* All clause spans share the same restrained styling */
.synopsis-text span {
    transition: opacity 0.4s ease;
    color: inherit;
    font-weight: inherit;
}

/* Subtle emphasis when clause updates - slight opacity pulse only */
.synopsis-text span.updating {
    opacity: 1;
    color: rgba(255, 255, 255, 0.95);
}

/* DSP placeholder — shown before any interaction */
.dsp-placeholder {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    text-align: center;
}

/* DSP clause spans — inline flow, no layout impact */
.dsp-clause {
    display: inline;
    transition: color 0.6s ease, opacity 0.6s ease;
}

/* Pending state — greyed, low-contrast, signals unresolved */
.dsp-clause.dsp-pending {
    color: rgba(255, 255, 255, 0.18);
}

/* Golden glow on DSP clause reveal — brief, magical, non-layout-shifting */
.dsp-clause.dsp-glow {
    animation: dsp-clause-glow 0.5s ease-out forwards;
}
@keyframes dsp-clause-glow {
    0%   { text-shadow: 0 0 0 transparent; }
    30%  { text-shadow: 0 0 8px rgba(212, 175, 55, 0.8), 0 0 16px rgba(212, 175, 55, 0.5); }
    100% { text-shadow: 0 0 0 transparent; }
}

/* DSP Phase System — intro, placeholder, live, veto */
.dsp-intro {
    display: block;
    /* Near-black debossed on gold */
    color: rgba(50, 40, 30, 0.7);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.25);
    text-align: center;
    font-style: italic;
}

/* DSP segment spans — inline flow */
.dsp-segment {
    display: inline;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Inactive (placeholder) state — muted, low contrast, no glow */
.dsp-segment.dsp-inactive {
    color: rgba(80, 65, 50, 0.5);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.15);
}

/* Active (selected) state — near-black with subtle warm glow */
.dsp-segment.dsp-active {
    color: rgba(35, 25, 15, 0.95);
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.3), 0 0 6px rgba(180, 140, 60, 0.25);
}

/* Golden glow animation on segment activation */
.dsp-segment.dsp-glow {
    animation: dsp-segment-glow 0.5s ease-out forwards;
}
@keyframes dsp-segment-glow {
    0%   { text-shadow: 0 1px 0 rgba(255, 240, 200, 0.3), 0 0 6px rgba(180, 140, 60, 0.25); }
    30%  { text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4), 0 0 12px rgba(180, 140, 60, 0.6), 0 0 20px rgba(160, 120, 40, 0.4); }
    100% { text-shadow: 0 1px 0 rgba(255, 240, 200, 0.3), 0 0 6px rgba(180, 140, 60, 0.25); }
}

/* Ceremonial rewrite dissolve / reveal */
.synopsis-text.dsp-dissolving {
    opacity: 0;
    transition: opacity 0.45s ease-out;
}
.synopsis-text.dsp-revealing {
    animation: dsp-reveal-fade 0.65s ease-in forwards;
}
@keyframes dsp-reveal-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DSP RESPONSIVE — Tighter padding on narrow screens (stays at bottom)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .synopsis-panel {
        padding: 6px 10px;
        font-size: 0.8em;
    }

    .synopsis-panel::before {
        inset: 4px;
    }

    .synopsis-panel::after {
        background-size: 10px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DSP CONTAINER & FRAME — Gold background, pressed double-line border
   ═══════════════════════════════════════════════════════════════════ */

/* Base gold gradient background */
.dsp-container {
    background: linear-gradient(180deg, #d4b36a 0%, #b8954f 100%);
}

/* Pressed double-line rectangle frame */
.dsp-frame {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 180, 0.25),
        inset 0 -1px 0 rgba(120, 90, 30, 0.35);
}

.dsp-frame::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Mobile: vertical breathing room + forced gold background */
@media (max-width: 768px) {
    .dsp-container {
        margin-top: 16px;
        padding-top: 12px;
        background: linear-gradient(180deg, #d4b36a 0%, #b8954f 100%) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RELATIONSHIP DYNAMIC GROUPINGS
   Visual organization only - selection logic remains flat/single-select
   ═══════════════════════════════════════════════════════════════════ */

/* PASS 9F: Relationship Dynamics — flat grid, groups removed via display:contents.
   11 cards: 6+5 on wide screens, 4+4+3 on medium, 3-col on narrow. */
.dynamic-grouped {
    display: grid;
    grid-template-columns: repeat(6, minmax(68px, 112px));
    gap: 12px;
    justify-content: center;
    width: 95%;
    max-width: 760px; /* 6×112 + 5×12 = 732, + breathing room */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

/* Flatten group wrappers so .sb-card elements become direct grid children */
.dynamic-group {
    display: contents;
}
.dynamic-group .sb-grid {
    display: contents !important;
}

.dynamic-group-label {
    display: none;
}

@media (max-width: 800px) {
    .dynamic-grouped {
        grid-template-columns: repeat(4, minmax(68px, 112px));
        max-width: 496px; /* 4×112 + 3×12 */
    }
}
@media (max-width: 500px) {
    .dynamic-grouped {
        grid-template-columns: repeat(3, minmax(60px, 90px));
        max-width: 302px;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CANONICAL STORYBOUND CARD SYSTEM (SB-CARD)
   ONE card component used everywhere. 5×7 vertical aspect ratio.
   ═══════════════════════════════════════════════════════════════════ */

/* Grid System - FLEXBOX for TRUE ROW-LEVEL CENTERING (PASS 8M)

   CRITICAL FIX: Using flexbox instead of CSS Grid.
   With flexbox + justify-content: center, EACH WRAPPED ROW is centered.
   Example: 9 cards → 5+4 layout, both rows centered independently.

   RULES:
   - Row lengths must differ by AT MOST 1
   - Never allow layouts like 5+5+1, 6+1, 4+2, 8+3, 3+1
   - EACH ROW is visually centered (not just the container)
   - Cards never shrink before 2-column mode

   SIZE-SPECIFIC CLASSES (apply to grids):
   - .sb-grid-4: 4 cards → Wide: 4, Medium: 2,2, Narrow: 2,2
   - .sb-grid-5: 5 cards → Wide: 5, Medium: 3,2, Narrow: 2,2,1
   - .sb-grid-6: 6 cards → Wide: 6, Medium: 3,3, Narrow: 2,2,2
   - .sb-grid-9: 9 cards → Wide: 5,4, Medium: 3,3,3, Narrow: 2,2,2,2,1

   Column math (card=100px, gap=16px):
   - 6 cols: 680px, 5 cols: 564px, 4 cols: 448px
   - 3 cols: 332px, 2 cols: 216px
   - At narrow: cards=70px, gap=8px, 2 cols: 148px
*/
/* Card grid - 5 cards max per row, centered with margin on ultra-wide */
/* Corridor owns vertical space; grid negotiates within it */
.sb-grid {
    display: flex !important; /* Override corridor-section column flex */
    flex-direction: row !important; /* Force horizontal wrapping */
    flex-wrap: wrap !important;
    gap: 12px;
    justify-content: center;
    align-content: center; /* Center rows vertically within available space */
    align-items: center;
    width: 95%;
    max-width: 748px; /* 5 cards max: 5×140 + 4×12 */
    margin: 0 auto; /* Horizontal center only, vertical handled by parent */
}

/* Explicit flex sizing: width:100% on .sb-card resolves to container-wide
   flex-basis, which can cause wrapping at tight margins. Fix the basis. */
.sb-grid .sb-card {
    flex: 0 0 140px;
}

/* Size-specific grids inherit max-width cap */
.sb-grid-2, .sb-grid-4, .sb-grid-5, .sb-grid-9 {
    width: 95%;
}

/* 2-card grid: cap width to keep cards visually grouped */
.sb-grid-2 {
    max-width: 292px; /* 2×140 + 1×12 */
}

/* 6-card grid: wider to fit all 6 on one row (6×140 + 5×12 = 900px) */
.sb-grid-6 {
    width: 95%;
    max-width: 900px;
}

/* Medium screens */
@media (max-width: 800px) {
    /* 6-card grid: force 3+3 wrapping when 6 won't fit in one row */
    .sb-grid-6 {
        max-width: 432px; /* 3×140 + 2×12 = 444px, slightly under */
    }
}

@media (max-width: 700px) {
    .sb-grid,
    .sb-grid-4,
    .sb-grid-5,
    .sb-grid-6,
    .sb-grid-9 {
        width: 95%;
    }
}

/* Narrow screens: tighter gap */
@media (max-width: 400px) {
    .sb-grid,
    .sb-grid-4,
    .sb-grid-5,
    .sb-grid-6,
    .sb-grid-9 {
        width: 95%;
        gap: 6px;
    }
    .sb-grid .sb-card {
        flex-basis: 100px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ARCHETYPE GRID (8 slots: 7 archetypes + Destiny's Choice)
   Layout: 4x2 on wide, 4x2 on medium, 2x4 on narrow
   ═══════════════════════════════════════════════════════════════════════════════ */
.archetype-grid-8 {
    display: grid !important; /* Override corridor-section flex */
    flex-direction: unset !important;
    grid-template-columns: repeat(4, minmax(85px, 140px));
    gap: 10px;
    justify-content: center;
    align-content: center;
    max-width: 95%;
    margin: 0 auto; /* Horizontal center only, vertical handled by parent */
    position: relative; /* For dissolve sparkle positioning */
    overflow: visible;  /* Allow sparkles to animate outside grid bounds */
}

/* Archetype cards: fill grid cell, grid controls size */
.archetype-grid-8 .sb-card {
    width: 100%;
    max-width: none; /* Grid cell is the constraint */
}

@media (max-width: 700px) {
    .archetype-grid-8 {
        grid-template-columns: repeat(4, minmax(75px, 122px));
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .archetype-grid-8 {
        grid-template-columns: repeat(2, minmax(85px, 140px));
        gap: 8px;
    }
}

@media (max-width: 400px) {
    .archetype-grid-8 {
        grid-template-columns: repeat(2, minmax(75px, 112px));
        gap: 6px;
    }
}

/* POINTER-EVENTS: Ensure cards cannot intercept Continue button clicks */
.archetype-grid-8,
.archetype-card {
    pointer-events: auto;
}

/* When card is zoomed, ensure Continue button remains clickable */
.archetype-card.zoomed ~ .flow-continue-btn {
    pointer-events: auto;
}

/* Archetype card flip state controlled via JS .flipped class
   All cards reveal (flip) together on row entry
   Cards remain flipped permanently — no hover interactions */

/* ═══════════════════════════════════════════════════════════════════════════════
   ARCHETYPE CARD ART — PNG-only cards (no text overlay)
   BACK: Tarot-Black-back-*.png (visible in grid before selection)
   FRONT: Tarot-Gold-front-*.png (visible when zoomed/selected)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base archetype card face styling — PNG has frame baked in, no CSS border */
.archetype-card .sb-card-back,
.archetype-card .sb-card-front {
    background-size: 102%; /* Slightly oversized to hide PNG edge irregularities */
    background-position: center;
    background-repeat: no-repeat;
    border: none !important;
    border-radius: 0;
    overflow: hidden; /* Clip any edge irregularities */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD EDGE MASKING — Handled via background-size: 102% (slightly oversized)
   and overflow: hidden on parent. No clip-path needed (breaks 3D transforms).
   ═══════════════════════════════════════════════════════════════════════════════ */
.archetype-card {
    overflow: hidden; /* Clip any edge artifacts at card level */
}

.character-tarot-card {
    overflow: hidden; /* Clip at card level */
}

/* BACK CARDS — Black tarot backs (visible in grid) */
.archetype-card .sb-card-back[data-archetype="HEART_WARDEN"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-HeartWard.png');
}
.archetype-card .sb-card-back[data-archetype="OPEN_VEIN"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-OpenVein.png');
}
.archetype-card .sb-card-back[data-archetype="SPELLBINDER"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-Spellbinder.png');
}
.archetype-card .sb-card-back[data-archetype="ARMORED_FOX"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-AFox.png');
}
.archetype-card .sb-card-back[data-archetype="DARK_VICE"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-DarkVice.png');
}
.archetype-card .sb-card-back[data-archetype="BEAUTIFUL_RUIN"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-BeauRuin.png');
}
.archetype-card .sb-card-back[data-archetype="ETERNAL_FLAME"] {
    background-image: url('/assets/card-art/cards/Tarot-Black-back-EternalFlame.png');
}

/* FRONT CARDS — Gold tarot fronts (visible when zoomed/selected) */
.archetype-card .sb-card-front[data-archetype="HEART_WARDEN"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-HeartWarden.png');
}
.archetype-card .sb-card-front[data-archetype="OPEN_VEIN"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-OpenVein.png');
}
.archetype-card .sb-card-front[data-archetype="SPELLBINDER"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-Spellbinder.png');
}
.archetype-card .sb-card-front[data-archetype="ARMORED_FOX"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-AFox.png');
}
.archetype-card .sb-card-front[data-archetype="DARK_VICE"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-DarkVice.png');
}
.archetype-card .sb-card-front[data-archetype="BEAUTIFUL_RUIN"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-BRuin.png');
}
.archetype-card .sb-card-front[data-archetype="ETERNAL_FLAME"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-EternalFlame.png');
}

/* Hide card name on archetype cards — PNG art has name baked in */
.archetype-card .sb-card-title {
    display: none !important;
}

/* ARCHETYPE PRINTED DESCRIPTION — visible only when zoomed
   Positioned between mask and dark bar at bottom */
.archetype-printed-desc {
    display: none; /* Hidden in grid view */
    position: absolute;
    bottom: 30%; /* Just below the mask chin */
    left: 8px;
    right: 8px;
    font-family: 'Lora', serif;
    font-size: 7px;
    line-height: 1.25;
    /* Black text faintly pressed into gold surface */
    color: rgba(15, 12, 8, 0.5);
    text-align: center;
    text-shadow: 0 0.5px 0 rgba(255, 235, 180, 0.35); /* Debossed into gold */
    background: transparent;
    padding: 4px 3px;
    border-radius: 2px;
    max-height: 10%;
    overflow: hidden;
}

/* Show description only when card is zoomed — scaled for larger card */
.archetype-card.zoomed .archetype-printed-desc {
    display: block;
    font-size: 5px;
    line-height: 1.15;
    top: auto;
    bottom: calc(22% - 15px); /* positioned in gold zone */
    left: 12px;
    right: 12px;
    padding: 3px 5px;
    max-height: 10%;
    background: transparent;
    color: rgba(15, 12, 8, 0.625); /* 25% darker */
    text-shadow: 0 0.5px 0 rgba(255, 235, 180, 0.35);
}

/* Per-archetype description nudges (+5px = up from default 22% - 15px) */
.archetype-card.zoomed .sb-card-front[data-archetype="SPELLBINDER"] .archetype-printed-desc {
    bottom: calc(22% - 16px);
}
.archetype-card.zoomed .sb-card-front[data-archetype="ARMORED_FOX"] .archetype-printed-desc {
    bottom: calc(22% - 10px);
}
.archetype-card.zoomed .sb-card-front[data-archetype="DARK_VICE"] .archetype-printed-desc {
    bottom: calc(22% - 8px);
}
.archetype-card.zoomed .sb-card-front[data-archetype="ETERNAL_FLAME"] .archetype-printed-desc {
    bottom: calc(22% - 10px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DESTINY'S CHOICE CARD (Slot 8)
   Special deck card with labeled back, triggers random selection sequence
   SIZE: Standard sb-card size in archetype grid (150×210)
   BACK: Black with gold border and label
   FRONT: Gold with embossed styling

   ISOLATION: Destiny's Choice is FULLY ISOLATED from archetype card states.
   - Does NOT participate in zoom/flip/selected/dimmed states
   - Pseudo-elements do NOT transform with other cards
   ═══════════════════════════════════════════════════════════════════════════════ */

/* BASE SIZE: Standard sb-card dimensions in archetype grid */
.archetype-grid-8 .destiny-choice-card {
    position: relative;
    /* Match other cards in grid - fill cell width */
    width: 100%;
    aspect-ratio: 2.75 / 4.75;
    /* Single column slot */
    grid-column: span 1;
    /* DECK PRESENCE: Gold outline + heavy shadow matching naming corridor */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
    /* ISOLATION: Own stacking context, immune to external transforms */
    isolation: isolate;
    transform: none !important;
}

/* Gold outline on the top card face — matches naming corridor deck presence */
.destiny-choice-card .sb-card-back.destiny-choice-back {
    border: 1px solid rgba(218, 165, 32, 0.5);
    box-shadow: 0 0 10px rgba(218, 165, 32, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.4);
}

.destiny-choice-card .sb-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5; /* Above stack layers */
    overflow: visible; /* Allow sparkles to escape */
}

/* 5-CARD DECK STACK: Explicit layers for stability (immune to transform/flip changes) */
.destiny-stack-layer {
    position: absolute;
    inset: 0;
    background: url('/assets/card-art/cards/Black-DestinyChoice-back.png') center/cover no-repeat;
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: 4px;
    pointer-events: none;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Stack offsets via transform — matching naming corridor stacked deck */
.destiny-stack-layer.layer-5 {
    transform: translate(8px, 8px);
    z-index: 1;
    opacity: 0.8;
}

.destiny-stack-layer.layer-4 {
    transform: translate(6px, 6px);
    z-index: 2;
    opacity: 0.85;
}

.destiny-stack-layer.layer-3 {
    transform: translate(4px, 4px);
    z-index: 3;
    opacity: 0.9;
}

.destiny-stack-layer.layer-2 {
    transform: translate(2px, 2px);
    z-index: 4;
    opacity: 0.95;
}

/* BACK SIDE: Black Destiny Choice PNG — DECK face */
/* Higher specificity to override .sb-card-back gradient */
.sb-card-back.destiny-choice-back {
    background-image: url('/assets/card-art/cards/Black-DestinyChoice-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a0a; /* Fallback */
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Heavy, substantial appearance */
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 0, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Hide text on Destiny's Choice — PNG art only */
.destiny-choice-back .sb-card-title,
.destiny-choice-front .sb-card-title {
    display: none !important;
}

/* FRONT SIDE: GOLD with embossed styling */
.destiny-choice-front {
    background: linear-gradient(145deg,
        #c9a227 0%,
        #d4af37 25%,
        #f0d060 50%,
        #d4af37 75%,
        #c9a227 100%
    );
    border: 2px solid #8b7355;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Subtle brushed metal texture */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.destiny-choice-front .sb-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 0.75rem;
    color: #2a1a0a;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4),
        0 -1px 0 rgba(0, 0, 0, 0.2);
    letter-spacing: 0.1em;
    /* Embossed/pressed effect */
    background: linear-gradient(180deg, #3a2a1a 0%, #1a0a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DESTINY'S CHOICE — Decorative Embossed Nameplate (VISUAL ONLY)
   Pressed/engraved into gold surface. No inputs, no interactivity.
   Scaled for standard card size (150×210).
   ═══════════════════════════════════════════════════════════════════════════════ */
.destiny-embossed-nameplate {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 70%;
    pointer-events: none; /* Purely decorative */
}

/* Embossed line — appears pressed into gold surface */
.destiny-embossed-line {
    height: 8px;
    width: 100%;
    border-radius: 1px;
    /* Inset shadow creates pressed/engraved appearance */
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.3);
    /* Darker gold recess */
    background: linear-gradient(180deg,
        rgba(139, 115, 85, 0.6) 0%,
        rgba(169, 135, 85, 0.4) 50%,
        rgba(139, 115, 85, 0.5) 100%
    );
}

.destiny-choice-sparkle-container {
    position: absolute;
    inset: -8px;
    pointer-events: none;
    overflow: visible;
}

/* Responsive sizing for Destiny's Choice — matches standard sb-card sizing */
@media (max-width: 400px) {
    .archetype-grid-8 .destiny-choice-card {
        width: 100%; /* Fill grid cell */
    }
    .destiny-choice-back .sb-card-title,
    .destiny-choice-front .sb-card-title {
        font-size: 0.65rem;
    }
}

/* Destiny sequence: card being chosen */
.archetype-card.destiny-chosen {
    z-index: 200 !important;
}

/* Destiny sequence: cards dissolving */
.archetype-card.dissolving {
    pointer-events: none;
}

/* Last-zoomed card focus indicator (sparkle emitter shows selection intent) */
/* Last-zoomed archetype — no glow, just subtle edge sparkles */
.archetype-card.last-zoomed {
    box-shadow: none;
}

/* Edge sparkles for last-zoomed card */
.archetype-card.last-zoomed::before {
    content: '';
    position: absolute;
    inset: -4px;
    background:
        radial-gradient(circle at 5% 10%, rgba(255, 248, 220, 0.3) 0%, transparent 2%),
        radial-gradient(circle at 95% 10%, rgba(218, 165, 32, 0.25) 0%, transparent 2%),
        radial-gradient(circle at 5% 90%, rgba(218, 165, 32, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 95% 90%, rgba(255, 248, 220, 0.25) 0%, transparent 2%);
    pointer-events: none;
    z-index: -1;
    animation: last-zoomed-sparkle 2s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes last-zoomed-sparkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.archetype-focus-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    border-radius: 8px;
}

/* Allow sparkles to escape card bounds for last-zoomed indicator */
.archetype-card.last-zoomed {
    overflow: visible;
}

/* Dissolve sparkle effect — positioned relative to archetype grid */
.destiny-dissolve-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffd700 0%, rgba(255, 215, 0, 0.5) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MASK ICON BREADCRUMB (Destiny's Choice selection)
   Uses same card structure as text breadcrumbs for visual parity
   ═══════════════════════════════════════════════════════════════════════════════ */
.breadcrumb-card.destiny-breadcrumb .mask-icon-face {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.breadcrumb-card.destiny-breadcrumb .mask-icon-face svg {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

/* Ensure Destiny breadcrumb has equal visual weight to text breadcrumbs */
.breadcrumb-card.destiny-breadcrumb {
    /* Same size as other breadcrumbs */
}

.breadcrumb-card.destiny-breadcrumb:hover .mask-icon-face svg {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CONTINUE BUTTON COMMITMENT TOOLTIP
   Shows on second navigation attempt without Continue
   ═══════════════════════════════════════════════════════════════════════════════ */
.continue-commitment-tooltip {
    position: fixed;
    z-index: 10000;
    background: #1a1a2e;
    color: var(--gold);
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--gold);
    font-size: 0.9rem;
    font-family: 'Cormorant Garamond', serif;
    white-space: nowrap;
    transform: translate(-50%, -100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.continue-commitment-tooltip.visible {
    opacity: 1;
}

.continue-commitment-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MISSING SELECTIONS MODAL
   Shows when Begin Story is pressed with incomplete selections
   ═══════════════════════════════════════════════════════════════════════════════ */
.missing-selections-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.missing-selections-modal.visible {
    opacity: 1;
}

.missing-selections-content {
    background: var(--panel);
    border: 2px double gold;
    border-radius: 0;
    padding: 28px 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 0 1px #0a0a0a, 0 0 20px rgba(0, 0, 0, 0.2);
}

.missing-selections-content h3 {
    color: var(--gold);
    font-family: 'Lora', serif;
    font-variant: small-caps;
    font-size: 1.4rem;
    margin: 0 0 20px 0;
    letter-spacing: 0.1em;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.4),
        1px -1px 0 rgba(218, 165, 32, 0.4),
        -1px 1px 0 rgba(218, 165, 32, 0.4),
        1px 1px 0 rgba(218, 165, 32, 0.4),
        0 0 4px rgba(218, 165, 32, 0.2);
}

.missing-selections-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.missing-selection-item {
    padding: 10px 16px;
    margin: 6px 0;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-radius: 0;
    color: #111;
    font-family: 'Lora', serif;
    font-variant: small-caps;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: filter 0.15s ease;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.4),
        1px -1px 0 rgba(218, 165, 32, 0.4),
        -1px 1px 0 rgba(218, 165, 32, 0.4),
        1px 1px 0 rgba(218, 165, 32, 0.4);
}

.missing-selection-item:hover {
    filter: brightness(1.15);
}

.missing-selections-fate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 56px;
    margin: 0 auto 12px;
    background-image: url('/assets/ui/Black-Gold-400x112.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--filigree-gold);
    font-family: 'Lora', serif;
    font-variant: small-caps;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: filter 0.15s ease;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);
}

.missing-selections-fate-btn:hover {
    filter: brightness(1.1);
}

.missing-selections-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 44px;
    margin: 0 auto;
    background-image: url('/assets/ui/Black-Gold-320x88.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--filigree-gold);
    font-family: 'Lora', serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: filter 0.15s ease;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);
}

.missing-selections-close-btn:hover {
    filter: brightness(1.1);
}

/* Base Card - Tarot proportions, container-constrained (NOT viewport-driven) */
/* Cards are dumb rectangles that fill their grid cell */
.sb-card {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions */
    perspective: 1000px;
    cursor: pointer;
    /* Z-INDEX CAP: Cards must never exceed z-index 50 (button is 1000) */
    position: relative;
    z-index: 10;
    overflow: visible; /* Allow sparkles to show outside card bounds */
}

/* Responsive: smaller max on narrow screens */
@media (max-width: 400px) {
    .sb-card { max-width: 100px; }
}

/* ═══════════════════════════════════════════════════════════════════
   FLAVOR MICRO-TOOLTIPS — Inline hint text beneath flavor cards
   Triggered by data-micro-tip attribute on .sb-card elements.
   ═══════════════════════════════════════════════════════════════════ */
.sb-card[data-micro-tip]::after {
    content: attr(data-micro-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Lora', serif;
    font-size: 8px;
    line-height: 1.2;
    color: rgba(255, 248, 230, 0.82);
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    padding-top: 3px;
    z-index: 5;
    text-align: center;
}
.sb-card[data-micro-tip]:hover::after,
.sb-card[data-micro-tip]:focus-within::after,
.sb-card[data-micro-tip].micro-tip-visible::after {
    opacity: 1;
}
/* Hide tooltip on already-selected/flipped cards */
.sb-card[data-micro-tip].selected::after,
.sb-card[data-micro-tip].flipped::after {
    display: none;
}
/* Subtype grids need slightly more row-gap to accommodate tooltip text */
#dystopiaSubtypeGrid,
#apocalypseSubtypeGrid {
    row-gap: 22px;
}

/* Inner wrapper for 3D flip */
.sb-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

/* Flipped state */
.sb-card.flipped .sb-card-inner {
    transform: rotateY(180deg);
}

/* Both faces share common styles */
.sb-card-face {
    position: absolute;
    inset: 0; /* Fill parent exactly — never participate in flow */
    backface-visibility: hidden;
    border-radius: 0; /* PNG has frame baked in */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

/* BACK FACE - Initially visible (unclicked state), shows TITLE ONLY */
/* Using individual properties to avoid overriding PNG background-images in subclasses */
.sb-card-back {
    background-color: #0d0d0d;
    border: none; /* PNG cards have frame baked in */
    text-align: center;
    justify-content: center;
}

.sb-card-back .sb-card-title {
    font-family: 'lust-script-display', serif;
    font-size: 18px;
    color: var(--gold);
    line-height: 1.2;
    word-wrap: break-word;
    word-spacing: 100vw; /* Force one word per line for multi-word titles */
    text-align: center;
}

/* FRONT FACE - Revealed on flip (clicked state), shows title + description + flavors */
/* Using background-color to avoid overriding PNG background-images in subclasses */
.sb-card-front {
    background-color: #0a0a0a;
    border: none; /* PNG cards have frame baked in */
    transform: rotateY(180deg);
    justify-content: flex-start;
    padding-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CARD GLEAM LAYER — Per-card rotating radial spokes

   Applied to every card type: .sb-card, .authorship-card, .mode-card.
   One .card-gleam-layer per face, inserted as first child at z-index:-1
   (above face background-image, below ALL text/UI content).

   Animation: smooth 10° pendulum — 5° fast through center, 5° decelerating to reversal.
   Mimics a viewer shifting their gaze, not a spinning card.

   Blend: mix-blend-mode: screen — additive light, preserves dark text contrast.
   Max per-spoke opacity: 0.5. Overall multiplier: 0.7–1.0.
   ═══════════════════════════════════════════════════════════════════════════════ */

.card-gleam-layer {
    position: absolute;
    /* Oversized so the rotating rectangle always covers the card area.
       Inscribed circle radius > parent half-diagonal for any card aspect ratio. */
    inset: -75%;
    pointer-events: none;
    z-index: -1;
    mix-blend-mode: screen;
    opacity: var(--gleam-opacity-multiplier, 0.8);
    /* Animation driven by JS — organic sway with random pauses at edges */
    will-change: transform;
}

/* Clip wrapper — non-rotating parent clips the rotating gleam layer */
.card-gleam-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}
.card-gleam-clip > .card-gleam-layer {
    z-index: auto;
}

/* Mode cards: back face has no stacking context (no z-index/transform),
   so z-index:-1 would escape upward. Override to 0 — no text to protect. */
.mode-card .card-gleam-layer,
.mode-card .card-gleam-clip {
    z-index: 0;
}

/* Suppress gleam on breadcrumbs (too small) and transient flying cards */
.breadcrumb-card .card-gleam-layer,
.breadcrumb-card .card-gleam-clip {
    display: none;
}

/* Tier cards (Tease/Indulge) and character tarot cards need position context
   and overflow clipping for the gleam layer */
.tier-card-btn,
.character-tarot-card {
    position: relative;
    overflow: hidden;
}
.tier-card-btn .card-gleam-clip,
.character-tarot-card .card-gleam-clip,
.tier-card-btn .card-gleam-layer,
.character-tarot-card .card-gleam-layer {
    z-index: 0; /* Above background, below all fields/inputs */
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* ARCHETYPE CARD GOLD FRONT FACE — Black + Gold Art Deco, NOT purple/pink        */
/* After flip reveal, archetype cards display their GOLD face                      */
/* NOTE: Using background-color, NOT shorthand, to not override PNG background-image */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.archetype-card .sb-card-front {
    background-color: #0a0a0a; /* Fallback only - PNG covers this */
    border: none !important; /* PNG has frame baked in */
    box-shadow: none; /* PNG provides all visual treatment */
}

.archetype-card .sb-card-front .sb-card-title {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}

.archetype-card .sb-card-front .sb-card-desc {
    color: #f5f5dc; /* Cream/beige for readability on black */
}

.archetype-card .sb-card-front .sb-card-flavors {
    border-top: 1px solid rgba(218, 165, 32, 0.3);
    padding-top: 6px;
}

.archetype-card .sb-card-front .sb-card-flavor {
    background: rgba(218, 165, 32, 0.15);
    border: 1px solid var(--gold);
    color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* STORY PULL (PRESSURE) CARDS — Gold PNG background with black text              */
/* ═══════════════════════════════════════════════════════════════════════════════ */
#pressureGrid .sb-card .sb-card-back {
    background-image: url('/assets/card-art/cards/Tarot-Gold-bdsm-BLANKXL-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    justify-content: flex-start;
    padding: 0;
}

#pressureGrid .sb-card .sb-card-back {
    background-color: transparent;
}
#pressureGrid .sb-card.destiny-choice-card .sb-card-back.destiny-choice-back {
    background-image: url('/assets/card-art/cards/Black-DestinyChoice-back.png');
}

#pressureGrid .sb-card .sb-card-front {
    background-color: transparent;
}

#pressureGrid .sb-card .sb-card-back .sb-card-title {
    position: absolute;
    top: calc(17% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 0.9em;
    font-weight: 400;
    color: #1a1612;
    text-shadow: none;
    word-spacing: normal;
    line-height: 1.15;
    margin: 0;
}

#pressureGrid .sb-card .sb-card-back .sb-card-desc {
    position: absolute;
    top: calc(28% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'Lora', serif;
    font-size: 0.65em;
    color: rgba(30, 25, 20, 0.5);
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.06);
    margin: 0;
}

/* Selected state for pressure cards - sparkles only, no glow */
#pressureGrid .sb-card.selected .sb-card-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* POV CARDS — Gold PNG background with black text                                 */
/* ═══════════════════════════════════════════════════════════════════════════════ */
#povGrid .sb-card .sb-card-back {
    background-image: url('/assets/card-art/cards/Tarot-Gold-bdsm-BLANKXL-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    justify-content: flex-start;
    padding: 0;
}

#povGrid .sb-card .sb-card-back,
#povGrid .sb-card .sb-card-front {
    background-color: transparent;
}

#povGrid .sb-card .sb-card-back .sb-card-title {
    position: absolute;
    top: calc(17% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 0.9em;
    font-weight: 400;
    color: #1a1612;
    text-shadow: none;
    word-spacing: normal;
    line-height: 1.15;
    margin: 0;
}

#povGrid .sb-card .sb-card-back .sb-card-desc {
    position: absolute;
    top: calc(28% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'Lora', serif;
    font-size: 0.65em;
    color: rgba(30, 25, 20, 0.5);
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.06);
    margin: 0;
}

/* Selected state for POV cards - sparkles only, no glow */
#povGrid .sb-card.selected .sb-card-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* POLARITY (DYNAMIC) CARDS — Gold PNG background with black text                  */
/* ═══════════════════════════════════════════════════════════════════════════════ */
#dynamicGrid .sb-card .sb-card-back {
    background-image: url('/assets/card-art/cards/Tarot-Gold-bdsm-BLANKXL-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    justify-content: flex-start;
    padding: 0;
}

#dynamicGrid .sb-card .sb-card-back,
#dynamicGrid .sb-card .sb-card-front {
    background-color: transparent;
}
#dynamicGrid .sb-card.destiny-choice-card .sb-card-back.destiny-choice-back {
    background-image: url('/assets/card-art/cards/Black-DestinyChoice-back.png');
}

#dynamicGrid .sb-card .sb-card-back .sb-card-title {
    position: absolute;
    top: calc(17% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 0.9em;
    font-weight: 400;
    color: #1a1612;
    text-shadow: none;
    word-spacing: normal;
    line-height: 1.15;
    margin: 0;
}

#dynamicGrid .sb-card .sb-card-back .sb-card-desc {
    position: absolute;
    top: calc(28% + 5px);
    left: 12%;
    right: 12%;
    font-family: 'Lora', serif;
    font-size: 0.7em;
    color: rgba(30, 25, 20, 0.5);
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.06);
    margin: 0;
}

/* Selected state for polarity cards - sparkles only, no glow */
#dynamicGrid .sb-card.selected .sb-card-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CORRIDOR CARD FACE PNGs — Black front, Gold back                               */
/* Front (flipped/zoomed): Blank-Black-Face for all 7 corridor grids              */
/* Back (initial view): BLANK1-back for Arousal, Length, Tone, World              */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Front face → Black card with gold Art Deco frame */
#worldGrid .sb-card .sb-card-front,
#toneGrid .sb-card .sb-card-front,
#pressureGrid .sb-card .sb-card-front,
#povGrid .sb-card .sb-card-front,
#lengthGrid .sb-card .sb-card-front,
#dynamicGrid .sb-card .sb-card-front,
#intensityGrid .sb-card .sb-card-front {
    background-image: url('/assets/card-art/cards/Blank-Black-Face.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    justify-content: center;
    padding: 8px 10px;
    outline: 1px solid rgba(218, 165, 32, 0.6);
    outline-offset: -1px;
}

/* Per-card art overrides — replace generic Blank-Black-Face with unique art */
/* Modern world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="Modern"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-MODERN.png');
}
.sb-card.zoomed[data-val="Modern"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-MODERNzoomed.png');
}

/* Dystopia world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="Dystopia"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Dystopia.png');
}
.sb-card.zoomed[data-val="Dystopia"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-DYSTOPIAzoomed.png');
}
/* Historical world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="Historical"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Historical.png');
}
.sb-card.zoomed[data-val="Historical"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-HISTORICALzoomed.png');
}

/* Sci-Fi world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="SciFi"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-SciFi1.png');
}
.sb-card.zoomed[data-val="SciFi"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-SciFizoomed.png');
}

/* Post-Apocalyptic world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="PostApocalyptic"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-POSTAPOC.png');
}
.sb-card.zoomed[data-val="PostApocalyptic"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-PostApoczoomed.png');
}

/* Fantasy world card — unzoomed art in grid, zoomed art with baked flavor labels */
#worldGrid .sb-card[data-val="Fantasy"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Fantasy.png');
}
.sb-card.zoomed[data-val="Fantasy"] .sb-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-FANTASYzoomed.png');
}

/* Back face → Gold card for Arousal, Length, Tone, World */
#worldGrid .sb-card .sb-card-back,
#toneGrid .sb-card .sb-card-back,
#intensityGrid .sb-card .sb-card-back,
#lengthGrid .sb-card .sb-card-back {
    background-image: url('/assets/card-art/cards/Tarot-Gold-bdsm-BLANK1-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    justify-content: flex-start; /* Title positioned via padding */
    padding: 0;
    /* position: absolute inherited from .sb-card-face — still contains positioned children */
}

/* Black text positioned in gold text window on BLANK1 back */
#worldGrid .sb-card .sb-card-back .sb-card-title,
#toneGrid .sb-card .sb-card-back .sb-card-title,
#intensityGrid .sb-card .sb-card-back .sb-card-title,
#lengthGrid .sb-card .sb-card-back .sb-card-title {
    position: absolute;
    top: calc(24% - 5px);
    left: 12%;
    right: 12%;
    color: #000;
    text-shadow: none;
    word-spacing: normal;
    font-size: 14px;
    line-height: 0.9;
}

/* World card back titles sit 10px lower than shared default */
#worldGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(24% + 5px);
}

/* Post-Apocalyptic: back up 4px from world default, 10% smaller text */
#worldGrid .sb-card[data-val="PostApocalyptic"] .sb-card-back .sb-card-title {
    top: calc(24% + 1px);
    font-size: 12.6px;
}

/* Tone card back titles: 10px lower (except Wry Confession) */
#toneGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(24% + 5px);
}
#toneGrid .sb-card[data-val="WryConfession"] .sb-card-back .sb-card-title {
    top: calc(24% + 5px);
}

/* Pressure (Story Pull) card back text: 10px lower */
#pressureGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(17% + 15px);
}
#pressureGrid .sb-card .sb-card-back .sb-card-desc {
    top: calc(28% + 15px);
}
#povGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(17% + 15px);
}
#povGrid .sb-card .sb-card-back .sb-card-desc {
    top: calc(28% + 15px);
}

/* Arousal + Length card back titles: 10px lower */
#intensityGrid .sb-card .sb-card-back .sb-card-title,
#lengthGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(24% + 5px);
}

/* Polarity (dynamic) card back text: 10px lower */
#dynamicGrid .sb-card .sb-card-back .sb-card-title {
    top: calc(17% + 15px);
}
#dynamicGrid .sb-card .sb-card-back .sb-card-desc {
    top: calc(28% + 15px);
}

/* White title in bottom text field on black front cards */
#worldGrid .sb-card .sb-card-front .sb-card-title,
#toneGrid .sb-card .sb-card-front .sb-card-title,
#intensityGrid .sb-card .sb-card-front .sb-card-title,
#lengthGrid .sb-card .sb-card-front .sb-card-title,
#pressureGrid .sb-card .sb-card-front .sb-card-title,
#povGrid .sb-card .sb-card-front .sb-card-title,
#dynamicGrid .sb-card .sb-card-front .sb-card-title {
    position: absolute;
    top: auto;
    bottom: calc(4% + 3px);
    left: 10%;
    right: 10%;
    /* Gold metallic gradient */
    color: #c9a84c;
    background: linear-gradient(180deg, #d4a844 0%, #f5d77e 25%, #c9a84c 50%, #8b6d2c 75%, #d4b44c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    text-align: center;
    word-spacing: normal;
    white-space: nowrap;
    font-size: 10.5px;
    line-height: 1.2;
    margin: 0;
}

/* Pressure + Dynamic front titles: allow wrapping for long names (Transformation, Obsessive Devotion) */
#pressureGrid .sb-card .sb-card-front .sb-card-title,
#dynamicGrid .sb-card .sb-card-front .sb-card-title {
    white-space: normal;
    font-size: 8px;
}

/* Pressure front desc visible (descriptions live on front/black face) */

/* Pressure front desc: above flavor buttons, inside gold text box */
#pressureGrid .sb-card:not(.zoomed) .sb-card-front .sb-card-desc {
    position: absolute;
    top: 17%;
    left: 10%;
    right: 10%;
    z-index: 3;
    font-size: 5px;
    line-height: 1.25;
    flex: none;
}

/* Gold pressed desc on all black card fronts */
#worldGrid .sb-card .sb-card-front .sb-card-desc,
#toneGrid .sb-card .sb-card-front .sb-card-desc,
#pressureGrid .sb-card .sb-card-front .sb-card-desc,
#povGrid .sb-card .sb-card-front .sb-card-desc,
#lengthGrid .sb-card .sb-card-front .sb-card-desc,
#dynamicGrid .sb-card .sb-card-front .sb-card-desc,
#intensityGrid .sb-card .sb-card-front .sb-card-desc {
    color: #c9a84c;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* World desc slightly smaller */
#worldGrid .sb-card:not(.zoomed) .sb-card-front .sb-card-desc {
    font-size: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* PRESSURE FRONT FLAVORS — Miniature flavor buttons on unzoomed card face        */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Show flavor arc (number in half-circle) on unzoomed pressure card fronts */
#pressureGrid .sb-card:not(.zoomed) .sb-card-arc-flavors {
    display: flex;
}
/* Hide the curved "flavors" SVG on unzoomed — only show the count number */
#pressureGrid .sb-card:not(.zoomed) .arc-flavor-svg {
    display: none;
}
/* Smaller number for unzoomed card scale */
#pressureGrid .sb-card:not(.zoomed) .arc-flavor-number {
    font-size: 11px;
}

/* Container for miniature flavor buttons on the front face */
.pressure-front-flavors {
    position: absolute;
    top: calc(28% + 20px);
    left: 8%;
    right: 8%;
    bottom: 14%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: auto;
}
/* Smaller flavor buttons for unzoomed card face */
.pressure-front-flavors .sb-flavor-btn {
    font-size: 4.5px;
    padding: 2px 4px;
    min-height: 8px;
    width: auto;
}
/* Hide unzoomed flavor buttons when card is zoomed — zoom has its own UI */
.sb-card.zoomed .pressure-front-flavors {
    display: none;
}
/* No gleam on unzoomed miniature buttons */
.pressure-front-flavors .sb-flavor-btn .card-gleam-clip {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CARD SELECTION SPARKLES — Sparkle emitter for selected PNG cards               */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.card-selection-sparkles {
    position: absolute;
    inset: -15px; /* Extend beyond card for halo effect */
    pointer-events: none;
    z-index: 10;
    overflow: visible;
    transition: opacity 0.8s ease-out;
}

/* Fade out sparkles when card is deselected */
.card-selection-sparkles.sparkles-fading {
    opacity: 0;
}

.sb-card-front .sb-card-title {
    font-family: 'lust-script-display', serif;
    font-size: 15px;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
    word-spacing: 100vw;
    text-align: center;
}

.sb-card-front .sb-card-desc {
    font-size: 12px;
    color: var(--ink);
    line-height: 1.2;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
}

/* TASK B: Arousal card example - visually separated from description */
.sb-card-front .sb-card-example {
    display: block;
    font-size: 10px;
    font-style: italic;
    color: var(--gold);
    opacity: 0.85;
    margin-top: 4px;
    line-height: 1.3;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   AROUSAL (INTENSITY) FRONT FACE — Custom layout
   Title → bottom text box, desc → centered, example → lower half
   ═══════════════════════════════════════════════════════════════════ */

/* Arousal front face: desc and example need room for absolute example */
#intensityGrid .sb-card .sb-card-front {
    justify-content: flex-start;
    padding-top: 18%;
}

/* Arousal desc: true small caps, centered, clear of gold lines */
#intensityGrid .sb-card .sb-card-front .sb-card-desc {
    flex: 0 0 auto;
    font-family: 'Lora', serif;
    font-variant: small-caps;
    letter-spacing: 0.03em;
    padding: 0 12%;
    text-align: center;
    text-shadow: none;
}

/* Arousal example quote: centered, clear of gold lines */
#intensityGrid .sb-card .sb-card-front .sb-card-example {
    position: absolute;
    bottom: 20%;
    left: 12%;
    right: 12%;
    margin-top: 0;
    text-align: center;
    text-shadow: none;
}

/* Arousal title: clean text in bottom text box */
#intensityGrid .sb-card .sb-card-front .sb-card-title {
    text-shadow: none;
    text-align: center;
}

/* Portal-safe zoomed overrides (cards leave grid for zoom portal) */
.sb-card.zoomed[data-grp="intensity"] .sb-card-front .sb-card-desc {
    position: absolute;
    top: 18%;
    left: 12%;
    right: 12%;
    font-family: 'Lora', serif;
    font-variant: small-caps;
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow: none;
}
.sb-card.zoomed[data-grp="intensity"] .sb-card-front .sb-card-example {
    position: absolute;
    bottom: 22%;
    left: 12%;
    right: 12%;
    margin-top: 0;
    font-size: 5px;
    text-align: center;
    text-shadow: none;
}
.sb-card.zoomed[data-grp="intensity"] .sb-card-front .sb-card-title {
    text-shadow: none;
    text-align: center;
}

/* Zoom uses scale() — text scales with card art. Override sizes to fit gold frame lines */
.sb-card.zoomed .sb-card-front .sb-card-title {
    font-size: 9px;
    line-height: 1.0;
    word-spacing: normal; /* Allow hyphenated words to stay on one line */
}

/* All zoomed black card titles → gold metallic gradient
   Portal-safe: zoomed cards leave their grid, use data-grp */
.sb-card.zoomed[data-grp="world"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="tone"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="pressure"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="pov"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="length"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="dynamic"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="intensity"] .sb-card-front .sb-card-title {
    color: #c9a84c;
    background: linear-gradient(180deg, #d4a844 0%, #f5d77e 25%, #c9a84c 50%, #8b6d2c 75%, #d4b44c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* World/Tone/Pressure/POV/Polarity/Arousal zoomed: title moves to bottom text box
   Portal-safe: zoomed cards leave their grid, use data-grp */
.sb-card.zoomed[data-grp="world"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="tone"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="pressure"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="pov"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="dynamic"] .sb-card-front .sb-card-title,
.sb-card.zoomed[data-grp="intensity"] .sb-card-front .sb-card-title {
    position: absolute;
    top: auto;
    bottom: 3%;
    left: 10%;
    right: 10%;
    font-size: 8px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
}

/* World zoomed: hide face-up desc (zoom has its own content) */
.sb-card.zoomed[data-grp="world"] .sb-card-front .sb-card-desc {
    display: none;
}

/* Pressure zoomed: desc visible above flavor buttons */
.sb-card.zoomed[data-grp="pressure"] .sb-card-front .sb-card-desc {
    position: absolute;
    top: 18%;
    left: 12%;
    right: 12%;
    font-family: 'Lora', serif;
    font-size: 5px;
    line-height: 1.3;
    color: #c9a84c;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 3;
}

/* Description: 50% smaller, gold pressed into card surface */
.sb-card.zoomed .sb-card-front .sb-card-desc {
    font-size: 6px;
    color: #c9a84c;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* POV zoomed: desc centered on card face, 2× size */
.sb-card.zoomed[data-grp="pov"] .sb-card-front .sb-card-desc {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 14%;
    right: 14%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
    z-index: 2;
}

.sb-card-front .sb-card-flavors {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    margin-top: auto;
    padding-top: 4px;
}

.sb-card-front .sb-card-flavor {
    font-size: 6px;
    padding: 2px 4px;
    background: rgba(255, 105, 180, 0.2);
    border: 1px solid var(--pink);
    border-radius: 3px;
    color: var(--pink);
    cursor: pointer;
}

/* Selected state - glow effect */
.sb-card.selected {
    filter: drop-shadow(0 0 10px var(--gold));
}

/* Black-face corridor cards: sparkles only, no golden glow */
#worldGrid .sb-card.selected,
#toneGrid .sb-card.selected,
#intensityGrid .sb-card.selected,
#lengthGrid .sb-card.selected,
#pressureGrid .sb-card.selected,
#povGrid .sb-card.selected,
#dynamicGrid .sb-card.selected {
    filter: none;
}

/* Portal-safe: grid-scoped filter:none breaks when card moves to zoom portal */
.sb-card.zoomed.selected {
    filter: none;
}

.sb-card.selected .sb-card-back {
    border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* LOCKED CARD STATE — Grey filigree/text, NO opacity, NO grayscale                */
/* Card remains physically present and visible. Only decoration shifts to grey.    */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.sb-card.locked {
    cursor: url('/cursor-dollar-plane-64.png'), pointer !important;
    /* NO opacity, NO filter — card stays physically present */
}

/* Grey filigree on locked card borders */
.sb-card.locked .sb-card-back,
.sb-card.locked .sb-card-front {
    border-color: var(--plaque-locked-border) !important;
    color: var(--plaque-locked-text) !important;
}

/* Lock icon overlay */
.sb-card.locked::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 13.5a3.5 3.5 0 1 0-2.5-5.9l-1.5 1.5'%3E%3C/path%3E%3Cpath d='M6.5 10.5a3.5 3.5 0 1 0 2.5 5.9l1.5-1.5'%3E%3C/path%3E%3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
}

/* Locked card hover preview - flips to show description while staying locked
   Click still triggers paywall modal (no selection occurs). */
.sb-card.locked:hover .sb-card-inner {
    transform: rotateY(180deg);
}

/* No visual change on hover — locked state is static */
.sb-card.locked:hover {
    /* NO opacity change, NO filter change — card remains inert */
}

/* Dimmed state during zoom — CEREMONIAL PLAQUE COMPLIANT
   NO opacity or filter changes. Cards remain physically present but
   pointer-events disabled and pushed back via z-index */
.sb-card.dimmed {
    pointer-events: none;
    z-index: 0;
}

/* Hide gleam on background cards during zoom */
.sb-card.dimmed .card-gleam-layer {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Zoomed black cards: halve gleam opacity + soft blur
   Uses data-grp selectors because zoomed cards live in zoom portal (not inside grid) */
.sb-card.zoomed[data-grp="world"] .card-gleam-layer,
.sb-card.zoomed[data-grp="tone"] .card-gleam-layer,
.sb-card.zoomed[data-grp="pressure"] .card-gleam-layer,
.sb-card.zoomed[data-grp="pov"] .card-gleam-layer,
.sb-card.zoomed[data-grp="length"] .card-gleam-layer,
.sb-card.zoomed[data-grp="dynamic"] .card-gleam-layer,
.sb-card.zoomed[data-grp="intensity"] .card-gleam-layer {
    opacity: calc(var(--gleam-opacity-multiplier, 0.8) / 2);
    filter: blur(3px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DESTINY'S CHOICE COMPLETE ISOLATION
   Never responds to archetype card states: zoom, flip, selected, dimmed
   This card has its own click handler and state machine
   ═══════════════════════════════════════════════════════════════════════════════ */

/* NEVER dim */
.destiny-choice-card.dimmed {
    pointer-events: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    filter: none !important;
}

/* NEVER zoom (has its own interaction) */
.destiny-choice-card.zoomed {
    position: relative !important;
    z-index: auto !important;
    transform: none !important;
}

/* NEVER flip (deck shows back face only until sequence) */
.destiny-choice-card.flipped .sb-card-inner {
    transform: none !important;
}

/* NEVER show selected glow (uses its own visual feedback) */
.destiny-choice-card.selected {
    filter: none !important;
}
.destiny-choice-card.selected .sb-card-back {
    border-color: var(--gold) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRESSURE DESTINY'S CHOICE — Grid positioning (9th card → bottom-right)
   ═══════════════════════════════════════════════════════════════════════════════ */
#pressureGrid .destiny-choice-card {
    grid-column: 4;
}

/* Pressure Destiny animation helper classes */
#pressureGrid .sb-card.destiny-chosen {
    z-index: 200 !important;
}
#pressureGrid .sb-card.dissolving {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DYNAMIC/POLARITY DESTINY'S CHOICE — Grid positioning (bottom-right)
   ═══════════════════════════════════════════════════════════════════════════════ */
#dynamicGrid .destiny-choice-card {
    grid-column: 4;
}
#dynamicGrid .sb-card.destiny-chosen {
    z-index: 200 !important;
}
#dynamicGrid .sb-card.dissolving {
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
   PORTAL-BASED CARD ZOOM ARCHITECTURE
   ═══════════════════════════════════════════════════════════════════
   Structure:
     body
       └─ #sbZoomBackdrop (z:9998, dims background, catches close clicks)
       └─ #sbZoomPortal   (z:9999, holds zoomed card, ABOVE backdrop)
            └─ .sb-card.zoomed (positioned absolute within portal)

   The card is MOVED into the portal on zoom, breaking ALL ancestor
   stacking contexts, filters, and opacity. No !important hacks needed.
   ═══════════════════════════════════════════════════════════════════ */

/* Zoom backdrop - dims background, catches clicks to close zoom */
.sb-zoom-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sb-zoom-backdrop.active {
    opacity: 1;
    pointer-events: auto; /* Catch clicks to close */
}

/* Zoom portal - holds zoomed card ABOVE backdrop, uses flexbox for centering */
.sb-zoom-portal {
    position: fixed;
    inset: 0;
    z-index: 9999; /* ABOVE backdrop */
    pointer-events: none; /* Let clicks through to backdrop by default */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Reserve bottom space for modifier box + Continue button so card centers higher */
    padding-bottom: 50px;
    box-sizing: border-box;
}

/* Zoomed card state - card is INSIDE portal, centered by flexbox */
/* MUST override base card constraints — zoom operates on a fixed-aspect object */
.sb-card.zoomed,
.selection-card.zoomed {
    position: relative; /* Let flexbox handle centering */
    pointer-events: auto; /* Card itself is interactive */
    transition: transform 0.3s ease;
    max-width: none; /* Override base 140px cap — JS sets explicit zoom dimensions */
    overflow: visible; /* Allow sparkles to escape card bounds */
}

/* Ensure zoom content and flavor buttons are fully interactive */
.sb-card.zoomed .sb-zoom-content,
.sb-card.zoomed .sb-zoom-flavors,
.sb-card.zoomed .sb-flavor-btn,
.sb-card.zoomed .sb-zoom-custom-input {
    pointer-events: auto;
    z-index: 1;
}
/* Children need position:relative for z-index stacking, but .sb-zoom-content
   MUST stay position:absolute (top/bottom layout). Don't override it. */
.sb-card.zoomed .sb-zoom-flavors,
.sb-card.zoomed .sb-flavor-btn,
.sb-card.zoomed .sb-zoom-custom-input {
    position: relative;
}

/* When zoomed, keep front face visible.
   IMPORTANT: Do NOT set overflow:hidden here — it flattens transform-style:preserve-3d
   on .sb-card-inner, breaking backface-visibility on child faces. */
.sb-card.zoomed .sb-card-inner {
    transform: rotateY(180deg); /* Keep showing front face */
}

/* Clip zoomed face content to match PNG art rounded corners
   (applied per-face so preserve-3d on .sb-card-inner is unaffected) */
.sb-card.zoomed .sb-card-front {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    outline: 1px solid rgba(218, 165, 32, 0.6);
    outline-offset: -1px;
}
.sb-card.zoomed .sb-card-back {
    border-radius: 8px;
    overflow: hidden;
}

/* ARCHETYPE ZOOMED CARD — No glow, clean presentation */
.archetype-card.zoomed .sb-card-front {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border: none;
}

/* ZOOMED ARCHETYPE: Allow sparkles to escape card bounds */
.archetype-card.zoomed {
    overflow: visible;
}
.archetype-card.zoomed .sb-card-front {
    overflow: visible;
}


/* ARCHETYPE EDGE SPARKLES — Subtle particles around zoomed card */
.archetype-card.zoomed::before {
    content: '';
    position: absolute;
    inset: -8px;
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 248, 220, 0.4) 0%, transparent 3%),
        radial-gradient(circle at 90% 15%, rgba(218, 165, 32, 0.3) 0%, transparent 2%),
        radial-gradient(circle at 85% 80%, rgba(255, 248, 220, 0.35) 0%, transparent 2.5%),
        radial-gradient(circle at 15% 85%, rgba(218, 165, 32, 0.25) 0%, transparent 2%),
        radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.3) 0%, transparent 1.5%),
        radial-gradient(circle at 5% 50%, rgba(218, 165, 32, 0.2) 0%, transparent 2%),
        radial-gradient(circle at 95% 50%, rgba(255, 248, 220, 0.3) 0%, transparent 2%),
        radial-gradient(circle at 50% 95%, rgba(218, 165, 32, 0.25) 0%, transparent 2%);
    pointer-events: none;
    z-index: -1;
    animation: archetype-sparkle-drift 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes archetype-sparkle-drift {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

/* Dynamic sparkle emitter covering full face of zoomed card */
.zoom-card-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════════
   ZOOM NAV ARROWS — Navigate between archetype cards in zoom view
   Positioned in the zoom portal, outside the card's scale transform
   ═══════════════════════════════════════════════════════════════════ */
.zoom-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    color: rgba(255, 215, 0, 0.6);
    cursor: pointer;
    pointer-events: auto;
    z-index: 10000;
    user-select: none;
    transition: color 0.2s ease, transform 0.15s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    font-family: 'Lora', serif;
    line-height: 1;
    padding: 16px 8px;
}
.zoom-nav-arrow:hover {
    color: rgba(255, 215, 0, 0.9);
}
.zoom-nav-arrow:active {
    transform: translateY(-50%) scale(0.9);
}
.zoom-nav-left {
    left: 12px;
}
.zoom-nav-right {
    right: 12px;
}
/* Narrow screens: arrows float semi-transparent over cards */
@media (max-width: 768px) {
    .zoom-nav-arrow {
        font-size: 36px;
        padding: 12px 4px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        opacity: 0.7;
    }
    .zoom-nav-arrow:hover,
    .zoom-nav-arrow:active {
        opacity: 1;
    }
    .zoom-nav-left { left: 4px; }
    .zoom-nav-right { right: 4px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ZOOM CONTINUE BUTTON — Commit selection from zoomed card view
   ═══════════════════════════════════════════════════════════════════ */
.zoom-continue-btn {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 10000;
    /* PNG button background — matches .sb-btn-png.sm (Black-Gold-320x88.png) */
    background-image: url('/assets/ui/Black-Gold-320x88.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    width: 160px;
    height: 44px;
    border: none;
    border-radius: 0;
    color: #ffffff;
    font-family: 'Lora', serif;
    font-size: 0.77rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, filter 0.2s ease;
}
.zoom-continue-btn:hover {
    filter: brightness(1.1);
}
.zoom-continue-btn:active {
    transform: translateX(-50%) scale(0.96);
}

/* Flavor count indicator on face-up cards */
/* OLD flavor pill — hidden globally, replaced by arc display */
.sb-card-front .sb-card-flavor-count {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   FLAVOR ARC — Number + curved "FLAVORS" in the top arch of black face cards
   Positioned inside the decorative U-shaped arch of Blank-Black-Face.png
   ═══════════════════════════════════════════════════════════════════ */
/* Flavor arc hidden on unzoomed cards — only shown inside zoom overlay */
.sb-card-arc-flavors {
    position: absolute;
    top: 1%;
    left: 15%;
    right: 15%;
    height: 20%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    z-index: 1;
}

.arc-flavor-number {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    text-shadow: 0 0 4px rgba(218, 165, 32, 0.3);
    /* Center number inside the arch */
    margin-top: 4%;
}

.arc-flavor-svg {
    width: 100%;
    height: 14px;
    overflow: visible;
    margin-top: 3px; /* 3px gap below the arch */
}

/* Hide arc flavors when card is zoomed — zoom has its own flavor UI */
.sb-card.zoomed .sb-card-arc-flavors {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   WORLD ZOOM CONTENT - Flavor buttons and custom field inside zoomed card
   ═══════════════════════════════════════════════════════════════════ */

/* Container for zoom content inside card front:
   "FLAVORS" label → flavor buttons → custom settings
   Sits between arch (top ~15%) and bottom text box (~86%) */
.sb-zoom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: calc(15% + 3px);  /* 3px below the half-circle arch */
    left: 0;
    right: 0;
    bottom: 16%;           /* stay above card name text box */
    padding: 0 14%;
    overflow-y: hidden;     /* prevent bleeding into title area */
    overflow-x: visible;    /* allow SVG arc to overflow horizontally */
}

/* Zoom flavor arc: number + "FLAVORS" label in the half-circle */
.sb-zoom-flavor-arc {
    position: absolute;
    top: 1%;
    left: 15%;
    right: 15%;
    height: 14%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.sb-zoom-flavor-arc .arc-flavor-number {
    font-size: 8px;
    margin-top: 0;
    color: #c9a84c;
}
/* "FLAVORS" label directly under the number */
.arc-flavor-label {
    font-family: 'Cinzel', serif;
    font-size: 4px;
    font-variant: small-caps;
    letter-spacing: 1.5px;
    color: rgba(218, 165, 32, 0.7);
    margin-top: 1px;
    line-height: 1;
}

/* Flavor buttons grid — evenly distributed to fit all flavors in bounded area */
.sb-zoom-flavors {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.sb-zoom-flavors .sb-flavor-btn {
    width: 80%;
    text-align: center;
}

/* Flavor button — gold plaque with black text */
.sb-flavor-btn {
    font-size: 5px;
    padding: 3px 8px;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    border: none !important;
    border-radius: 3px !important;
    color: #1a1408;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Crimson Text', serif;
    min-height: 9px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    text-shadow: 0 1px 0 rgba(255, 215, 0, 0.15);
    transition: box-shadow 0.08s ease, border-color 0.08s ease, background 0.08s ease, filter 0.08s ease;
}

/* Button text above gleam layer */
.sb-flavor-btn-text {
    position: relative;
    z-index: 1;
}

/* Button gleam — visible and full strength (override zoomed card dimming) */
.sb-flavor-btn .card-gleam-clip {
    z-index: 0;
    border-radius: 0;
}
.sb-card.zoomed .sb-flavor-btn .card-gleam-layer,
.sb-flavor-btn .card-gleam-layer {
    z-index: auto;
    opacity: var(--gleam-opacity-multiplier, 0.8) !important;
    filter: none !important;
    mix-blend-mode: screen;
}

/* Hover: subtle inner glow */
.sb-flavor-btn:hover:not(:disabled):not(.selected) {
    box-shadow: inset 0 0 6px rgba(218, 165, 32, 0.25);
}

/* Selected: Pressed-in bevel matching world flavor hit zones — stays pressed */
.sb-flavor-btn.selected {
    color: #1a1408;
    border: 1px solid transparent !important;
    border-color: rgba(50, 40, 20, 0.8) rgba(220, 210, 180, 0.65) rgba(220, 210, 180, 0.65) rgba(50, 40, 20, 0.8) !important;
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.55),
        inset 1px 1px 3px rgba(0, 0, 0, 0.35),
        inset -1px -1px 2px rgba(255, 255, 255, 0.08),
        inset 0 0 10px rgba(218, 165, 32, 0.3);
    filter: brightness(0.9);
}

/* Flavor button tooltip — literary description, matches World tooltip style */
.sb-flavor-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Lora', serif;
    font-size: 2.75px;
    font-style: italic;
    line-height: 1.15;
    color: rgba(255, 248, 230, 0.88);
    background: rgba(0, 0, 0, 0.72);
    padding: 1.5px 4px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    margin-top: 1px;
    z-index: 10;
    text-align: center;
}
.sb-flavor-btn[data-tooltip]:hover::after,
.sb-flavor-btn[data-tooltip]:focus::after {
    opacity: 1;
}

/* Custom setting wrapper — inset to fit inside gold Art Deco lines */
.sb-zoom-custom {
    margin-top: 3px;
    padding: 0 6px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sb-zoom-custom-label {
    font-size: 5px;
    color: #c9a84c;  /* medium gold */
    text-align: center;
    margin-bottom: 2px;
}

.sb-zoom-custom-wrapper {
    position: relative;
    width: 100%;
}

/* DSP MATERIAL: Zoom custom input — Black-Gold PNG background */
.sb-zoom-custom-input {
    font-size: 5px;
    padding: 4px 6px;
    background-image: url('/assets/ui/Black-Gold-320x88.png');
    background-size: 100% 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0;
    color: #f5f0e6;
    resize: none;
    font-family: 'Crimson Text', serif;
    width: 100%;
    box-sizing: border-box;
    min-height: 14px;
}

/* Rotating placeholder for custom field — scrolling flavor examples */
.sb-zoom-rotating-placeholder {
    position: absolute;
    top: 3px;
    left: 6px;
    right: 6px;
    overflow: hidden;
    pointer-events: none;
    font-size: 5px;
    color: rgba(200, 200, 200, 0.5);
    font-style: italic;
    white-space: nowrap;
    z-index: 2;  /* above textarea's z-index:1 from .sb-card.zoomed rule */
}

.sb-zoom-rotating-placeholder.hidden {
    display: none;
}

.sb-zoom-placeholder-inner {
    display: inline-block;
    animation: scrollPlaceholderZoom 25s linear infinite;
}

.sb-zoom-placeholder-inner .suggestion {
    display: inline;
}

.sb-zoom-placeholder-inner .separator {
    display: inline;
    margin: 0 4px;
    opacity: 0.5;
}

@keyframes scrollPlaceholderZoom {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sb-zoom-custom-input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: inset 0 0 4px rgba(255, 215, 0, 0.1);
}

.sb-zoom-custom-input::placeholder {
    color: rgba(200, 200, 200, 0.4);
    font-style: italic;
}

/* Baked-art cards: hide HTML text overlays on FRONT only — back keeps the name */
/* All world cards now have baked PNG art — title & desc baked into the image */
#worldGrid .sb-card .sb-card-front .sb-card-title,
#worldGrid .sb-card .sb-card-front .sb-card-desc {
    display: none !important;
}

/* Hide baked-art overlay on non-zoomed cards — prevents hit zones from blocking
   card clicks and tooltips from appearing outside zoom view */
.sb-card:not(.zoomed) .sb-zoom-baked-overlay {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   BAKED-ART CARD ZOOM — Hit zones over PNG buttons, scrolling text
   For world cards with custom art (e.g. Modern) where buttons are
   baked into the PNG. No overlay buttons generated; transparent
   click regions map to the art's button positions.
   ═══════════════════════════════════════════════════════════════════ */
.sb-zoom-baked-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none; /* Pass through except on children */
}
.baked-hitzone {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 1px;
    cursor: pointer;
    z-index: 5;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    outline: none;
    box-sizing: border-box;
    transition: box-shadow 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}
.baked-hitzone:hover {
    box-shadow: inset 0 0 6px rgba(218, 165, 32, 0.25);
}
/* Pressed-in bevel: dark top/left edge, light bottom/right edge + inset shadow */
.baked-hitzone.selected {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(50, 40, 20, 0.8) rgba(220, 210, 180, 0.65) rgba(220, 210, 180, 0.65) rgba(50, 40, 20, 0.8);
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.55),
        inset 1px 1px 3px rgba(0, 0, 0, 0.35),
        inset -1px -1px 2px rgba(255, 255, 255, 0.08),
        inset 0 0 10px rgba(218, 165, 32, 0.3);
}
/* Baked-art flavor tooltip microtext — shown on hover/focus/touch beneath hit zone */
.baked-hitzone[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Lora', serif;
    font-size: 2.75px;
    font-style: italic;
    line-height: 1.15;
    color: rgba(255, 248, 230, 0.88);
    background: rgba(0, 0, 0, 0.72);
    padding: 1.5px 4px;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    margin-top: 1px;
    z-index: 5;
    text-align: center;
}
.baked-hitzone[data-tooltip]:hover::after,
.baked-hitzone[data-tooltip]:focus::after {
    opacity: 1;
}

/* Scrolling text zone — positioned over the blank gold button in PNG */
.baked-scroll-zone {
    position: absolute;
    overflow: hidden;
    z-index: 5;
    pointer-events: auto;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 1px;
    transition: border-color 0.15s ease;
}
.baked-scroll-zone:hover {
    border-color: rgba(218, 165, 32, 0.3);
}
/* Active editing state */
.baked-scroll-zone.editing {
    cursor: text;
    border-color: rgba(218, 165, 32, 0.5);
    box-shadow: inset 0 0 4px rgba(218, 165, 32, 0.2);
}
.baked-scroll-input-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.baked-scroll-input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: #1a1a0a;
    font-family: 'Crimson Text', serif;
    font-size: 4.5px;
    padding: 0 2px;
    box-sizing: border-box;
    outline: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    text-align: center;
}
/* Show input only when editing */
.baked-scroll-zone.editing .baked-scroll-input {
    opacity: 1;
    pointer-events: auto;
}
.baked-scroll-input:focus {
    outline: none;
}
/* Committed custom text — same pressed-in bevel as flavor buttons */
.baked-scroll-zone.committed {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(60, 50, 30, 0.7) rgba(210, 200, 170, 0.6) rgba(210, 200, 170, 0.6) rgba(60, 50, 30, 0.7);
    box-shadow:
        inset 3px 3px 5px rgba(0, 0, 0, 0.45),
        inset 1px 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 0 10px rgba(218, 165, 32, 0.35);
}
.baked-scroll-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    z-index: 2;
}
.baked-scroll-placeholder.hidden {
    display: none;
}
.baked-scroll-inner {
    display: inline-block;
    color: #1a1a0a !important;
    font-family: 'Crimson Text', serif;
    font-style: italic !important;
    font-size: 4.5px;
    opacity: 0.55;
    animation: bakedScrollMarquee 20s linear infinite;
    white-space: nowrap;
}
.baked-scroll-inner .separator {
    margin: 0 3px;
    opacity: 0.4;
}
@keyframes bakedScrollMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Incompatible/dimmed state */
.sb-card.incompatible,
.sb-card.layer-locked {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* Hover state */
.sb-card:hover:not(.locked):not(.incompatible):not(.layer-locked) {
    transform: translateY(-3px);
}

.sb-card:hover:not(.locked):not(.incompatible):not(.layer-locked) .sb-card-back {
    border-color: rgba(255, 215, 0, 0.6);
}

/* ========================================
   BREADCRUMB FLOW SYSTEM
   Sequential card selection with committed breadcrumbs
   ======================================== */

/* ═══════════════════════════════════════════════════════════════════════════════
   SHAPE YOUR STORY HEADER — Section title + breadcrumb row
   Breadcrumbs visually belong to this section header.
   NORMAL DOCUMENT FLOW: Header and breadcrumbs push content down, no overlaying.
   ═══════════════════════════════════════════════════════════════════════════════ */
.shape-your-story-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #0a0a0a; /* Solid background to prevent content showing through */
    /* Minimal padding */
    padding-top: 2px;
    padding-bottom: 0;
    /* Normal document flow - pushes content down */
    width: 100%;
}

.shape-your-story-header .section-title {
    margin: 0;
    padding: 4px 0;
    text-align: center;
    font-family: 'Lora', serif !important;
    font-variant: small-caps;
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0.6em;
    /* Realistic gold — layered metallic gradient with highlight and shadow */
    background: linear-gradient(
        180deg,
        #bf953f 0%,
        #fcf6ba 25%,
        #b38728 50%,
        #fbf5b7 75%,
        #aa771c 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #d4a940; /* fallback */
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BREADCRUMB CONTAINER — Inside Shape Your Story header
   Breadcrumbs accumulate left-to-right. Replaces legacy nav entirely.
   LAYOUT: Normal document flow, expands vertically, pushes content down.
   ═══════════════════════════════════════════════════════════════════════════════ */
.breadcrumb-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* No gap — spacing controlled by child margins for negative overlap */
    padding: 4px 10px 6px;
    margin-bottom: 0; /* Explicit — no margin collapse */
    min-height: 0;
    background: transparent;
    flex-wrap: nowrap; /* NEVER wrap to second row */
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.breadcrumb-row:empty {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BREADCRUMB / GHOST CRUMB OVERLAP — Negative margins on narrow screens      */
/* At wide viewports: normal 6px spacing. As viewport narrows, spacing        */
/* reduces to zero then goes negative so cards slide behind each other.       */
/* z-index: leftmost (earliest) on top, newer items slide underneath.         */
/* ═══════════════════════════════════════════════════════════════════════════ */
.breadcrumb-row > :not(:first-child) {
    margin-left: clamp(-38px, calc(6vw - 42px), 4px);
}

/* z-index ordering: leftmost on top (position 1 = highest) */
.breadcrumb-row > :nth-child(1)  { z-index: 13; }
.breadcrumb-row > :nth-child(2)  { z-index: 12; }
.breadcrumb-row > :nth-child(3)  { z-index: 11; }
.breadcrumb-row > :nth-child(4)  { z-index: 10; }
.breadcrumb-row > :nth-child(5)  { z-index: 9; }
.breadcrumb-row > :nth-child(6)  { z-index: 8; }
.breadcrumb-row > :nth-child(7)  { z-index: 7; }
.breadcrumb-row > :nth-child(8)  { z-index: 6; }
.breadcrumb-row > :nth-child(9)  { z-index: 5; }
.breadcrumb-row > :nth-child(10) { z-index: 4; }
.breadcrumb-row > :nth-child(11) { z-index: 3; }
.breadcrumb-row > :nth-child(12) { z-index: 2; }
.breadcrumb-row > :nth-child(13) { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* GHOST STEP PLACEHOLDERS — Pre-breadcrumb progress indicators                */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Ghost steps show remaining steps before selection.                          */
/* They are NOT interactive — purely presentational scaffolding.               */
/* Real breadcrumbs replace ghost steps left-to-right as corridor advances.    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.ghost-step {
    width: 45px;
    height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Subdued dashed outline — minimal */
    border: 1px dashed rgba(218, 165, 32, 0.25);
    border-radius: 4px;
    background: transparent;
    /* Low contrast, ghostly appearance */
    opacity: 0.4;
    pointer-events: none; /* NOT interactive */
    flex-shrink: 0; /* Never shrink — overlap via negative margins instead */
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative; /* For z-index ordering */
}

/* Ghost step label: small all-caps "CHOICE" above numeral */
.ghost-step-label {
    display: none; /* Hidden at compact size */
}

/* Ghost step number: Roman numerals only */
.ghost-step-number {
    font-family: 'Lora', serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    opacity: 0.6;
    font-variant-caps: all-small-caps;
}

/* Ghost step fade-out when being replaced */
.ghost-step.replacing {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hide ghost steps when corridor is complete */
body.corridor-complete .ghost-step {
    display: none;
}

/* Hover on real breadcrumbs should NOT affect ghost steps */
.breadcrumb-card:hover ~ .ghost-step {
    opacity: 0.4; /* Maintain ghost opacity, don't fade further */
    transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* BREADCRUMB INTERACTION — DESTRUCTIVE NAVIGATION (AUTHORITATIVE)             */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Breadcrumbs are clickable. On hover over breadcrumb N:                      */
/*   - Breadcrumb N remains fully opaque                                       */
/*   - All breadcrumbs to the RIGHT visually fade to indicate provisional state */
/* On click: Navigate to section, DESTROY all downstream breadcrumbs           */
/* No confirmation dialogs — visual signaling alone is sufficient              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb Card - Miniature tarot card showing committed selection */
/* Sized to match ghost steps for visual consistency */
.breadcrumb-card {
    width: 45px;
    height: 78px;
    perspective: 500px;
    cursor: pointer; /* CLICKABLE — destructive navigation */
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: relative;
    flex-shrink: 0; /* Never shrink — overlap via negative margins instead */
    border-radius: 4px;
    overflow: hidden;
    /* Miniature card appearance — DSP gold/black background */
    background-image: url('/assets/ui/DSP-Gold-Blk-720x1040.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Solo breadcrumb de-emphasis — slight opacity fade when many breadcrumbs */
.breadcrumb-card:first-child:not(:only-child) {
    opacity: 0.9;
}

.breadcrumb-row:has(.breadcrumb-card:nth-child(4)) .breadcrumb-card:first-child {
    opacity: 0.85;
}

/* DESTRUCTIVE HOVER: When hovering a breadcrumb, fade all siblings to the right */
/* This signals that clicking will destroy downstream choices */
.breadcrumb-card:hover ~ .breadcrumb-card {
    opacity: 0.35;
    transform: scale(0.95);
}

/* Ensure hovered breadcrumb stays fully opaque and prominent */
.breadcrumb-card:hover {
    opacity: 1 !important;
    transform: scale(1.08);
    z-index: 20 !important; /* Above all static z-indices (max 13) */
}

.breadcrumb-card .sb-card-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
    box-sizing: border-box;
}

/* Breadcrumb card border overlay */
.breadcrumb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(218, 165, 32, 0.5);
    border-radius: 4px;
    pointer-events: none;
}

/* No default ::after — hover replaces it with tooltip */
.breadcrumb-card::after {
    content: '';
    display: none;
}

/* Hover: show tooltip below */
.breadcrumb-card:hover::after {
    content: attr(data-breadcrumb-label);
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(218, 165, 32, 0.4);
    color: var(--gold);
    font-size: 10px;
    font-family: 'Lora', serif;
    font-variant-caps: all-small-caps;
    white-space: nowrap;
    border-radius: 4px;
    z-index: 100;
    margin-top: 6px;
}

/* Breadcrumb card inner content — show title as miniature card label */
.breadcrumb-card .sb-card-face { display: none; }
.breadcrumb-card .sb-card-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: transparent; /* Let parent's DSP background show through */
}
.breadcrumb-card .sb-card-front { display: none; }
.breadcrumb-card .sb-card-title {
    display: block;
    font-family: 'Cinzel', 'Lora', serif;
    font-size: 7px;
    font-weight: 700;
    color: #1a1612;
    text-shadow: 0 1px 0 rgba(218, 165, 32, 0.2);
    text-transform: none;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.3px;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
    max-width: 100%;
    padding: 0 2px;
}
.breadcrumb-card .sb-card-desc { display: none; }

/* Breadcrumb Subtitle — Nested label (e.g., flavor inside world) */
.breadcrumb-subtitle {
    display: block;
    font-family: 'Lora', serif;
    font-size: 6px;
    color: var(--ink);
    text-align: center;
    margin-top: 2px;
    opacity: 0.75;
    font-style: italic;
    text-transform: none; /* Title Case, never uppercase */
}

/* Black-card breadcrumbs — World through Arousal use black face PNG */
.breadcrumb-card[data-grp="world"],
.breadcrumb-card[data-grp="tone"],
.breadcrumb-card[data-grp="pressure"],
.breadcrumb-card[data-grp="pov"],
.breadcrumb-card[data-grp="length"],
.breadcrumb-card[data-grp="dynamic"],
.breadcrumb-card[data-grp="intensity"] {
    background-image: url('/assets/card-art/cards/Blank-Black-Face.png');
    background-size: cover;
}

.breadcrumb-card[data-grp="world"] .sb-card-title,
.breadcrumb-card[data-grp="tone"] .sb-card-title,
.breadcrumb-card[data-grp="pressure"] .sb-card-title,
.breadcrumb-card[data-grp="pov"] .sb-card-title,
.breadcrumb-card[data-grp="length"] .sb-card-title,
.breadcrumb-card[data-grp="dynamic"] .sb-card-title,
.breadcrumb-card[data-grp="intensity"] .sb-card-title {
    color: #c9a84c;
    text-shadow:
        0 1px 0 rgba(255, 230, 160, 0.2),
        0 -1px 0 rgba(60, 40, 10, 0.4);
}

/* World breadcrumbs — use per-world unzoomed card art instead of generic black face */
.breadcrumb-card[data-grp="world"][data-val="Modern"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-MODERN.png');
}
.breadcrumb-card[data-grp="world"][data-val="Historical"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Historical.png');
}
.breadcrumb-card[data-grp="world"][data-val="Fantasy"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Fantasy.png');
}
.breadcrumb-card[data-grp="world"][data-val="SciFi"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-SciFi1.png');
}
.breadcrumb-card[data-grp="world"][data-val="Dystopia"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-Dystopia.png');
}
.breadcrumb-card[data-grp="world"][data-val="PostApocalyptic"] {
    background-image: url('/assets/card-art/cards/Tarot-Gold-on-Black-POSTAPOC.png');
}

/* World breadcrumb: hide baked-in title (shown in art), only show flavor subtitle */
.breadcrumb-card[data-grp="world"] .sb-card-title {
    display: none;
}
.breadcrumb-card[data-grp="world"] .breadcrumb-subtitle {
    font-size: 6px;
    color: #c9a84c;
    text-shadow:
        0 1px 0 rgba(255, 230, 160, 0.2),
        0 -1px 0 rgba(60, 40, 10, 0.4);
    opacity: 1;
    font-style: normal;
    font-family: 'Cinzel', 'Lora', serif;
    font-weight: 700;
    font-variant-caps: all-small-caps;
}

/* Ephemeral Breadcrumb — Will dissolve at POV selection */
.breadcrumb-ephemeral {
    opacity: 0.85;
}

/* Breadcrumb Destroying — Destructive navigation removal animation */
.breadcrumb-destroying {
    animation: breadcrumbDestroy 300ms ease-out forwards;
    pointer-events: none;
}

@keyframes breadcrumbDestroy {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.9) translateY(-5px);
    }
    100% {
        opacity: 0;
        transform: scale(0.7) translateY(-15px);
    }
}

.breadcrumb-ephemeral::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed var(--gold);
    opacity: 0.3;
    pointer-events: none;
}

/* Breadcrumb Dissolving Animation — Sparkle dissipate effect */
.breadcrumb-dissolving {
    animation: breadcrumbDissolve 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes breadcrumbDissolve {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        opacity: 0.8;
        transform: scale(1.05);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

/* Card Row - One semantic layer at a time */
.card-flow-row {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    margin: 30px 0;
}

.card-flow-row.flow-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.card-flow-row.flow-entering {
    animation: flowRowEnter 0.6s ease forwards;
}

@keyframes flowRowEnter {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CORRIDOR SYSTEM — 9-row single-screen selection
   Only one row visible at a time until Arousal is selected
   ═══════════════════════════════════════════════════════════════════ */

.corridor-section {
    /* VIEWPORT ISOLATION: Use measured header height for centering */
    min-height: calc(100vh - var(--sb-header-height));
    max-height: calc(100vh - var(--sb-header-height));
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Black velvet background - no bleed from adjacent rows */
    background: #0a0a0a;
    /* Center content both vertically and horizontally within viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
}

/* Story Shape Row needs horizontal layout even when used as corridor */
.story-shape-row.corridor-section {
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
/* Section title in row-layout corridors: full width, centered above cards */
.story-shape-row.corridor-section > .section-title {
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 0;
}
/* Corridor-mode sets justify-content:flex-start on all .corridor-section (0-2-1 specificity).
   Row layouts need center — this selector (0-3-1) beats the generic override. */
body.corridor-mode .story-shape-row.corridor-section,
body.corridor-mode .archetype-grid-8.corridor-section,
body.corridor-mode .authorship-choice-row.corridor-section,
body.corridor-mode .sb-grid.corridor-section {
    justify-content: center !important;
}

/* Section titles inside corridors - SHOW for card-flow-rows, smaller size */
/* Match "Shape Your Story" header styling for visual consistency */
.corridor-section > .section-title,
.card-flow-row > .section-title {
    display: block !important;
    font-size: 1em !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    border-top: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STORYBEAU CORRIDOR — Multi-element stage requires special handling
   These elements share one corridor but should NOT each get 100vh
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Storybeau section title — not full viewport, just centered text */
#archetypeSectionTitle.corridor-section {
    min-height: auto !important;
    max-height: auto !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: unset !important;
}

/* Archetype grid — NOT full viewport, grid owns its height */
#archetypeCardGrid.corridor-section,
.archetype-grid-8.corridor-section {
    min-height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    align-content: start !important;
    padding-bottom: 90px !important; /* Space for fixed control plane (Proceed button) */
    scrollbar-width: none; /* Firefox */
    /* Grid display already set in .archetype-grid-8 */
}
.archetype-grid-8.corridor-section::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   POV CORRIDOR — Multi-element stage (title + grid + continue)
   Same pattern as storybeau: sub-elements share one corridor row
   ═══════════════════════════════════════════════════════════════════════════════ */
#povSectionTitle.corridor-section {
    min-height: auto !important;
    max-height: auto !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: unset !important;
    flex: 0 0 auto !important;
    overflow-y: visible !important;
}

#povGrid.corridor-section {
    min-height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AROUSAL CORRIDOR — Multi-element stage (title + grid + continue)
   ═══════════════════════════════════════════════════════════════════════════════ */
#arousalSectionTitle.corridor-section {
    min-height: auto !important;
    max-height: auto !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: unset !important;
    flex: 0 0 auto !important;
    overflow-y: visible !important;
}

#intensityGrid.corridor-section {
    min-height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
}

.corridor-row,
.corridor-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   KEYHOLE MASK HARD GATE — NEVER apply to corridor selection UI
   Keyhole is ONLY for arousal === 'dirty' + story-mode/cover-render contexts
   ═══════════════════════════════════════════════════════════════════════════════ */
.corridor-section .sb-card,
.corridor-section .archetype-card,
.corridor-section .selection-card,
.corridor-section .character-card,
#archetypeCardGrid .archetype-card,
#archetypeCardGrid .sb-card,
.sb-zoom-portal .sb-card,
.sb-zoom-portal .archetype-card {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    clip-path: none !important;
}

/* ARCHETYPE KEYHOLE SUPPRESSION — No keyhole overlay on archetype cards EVER */
.archetype-card .cover-keyhole-overlay,
.archetype-card.zoomed .cover-keyhole-overlay,
#archetypeCardGrid .cover-keyhole-overlay,
.sb-zoom-portal .archetype-card .cover-keyhole-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.corridor-row.corridor-hidden,
.corridor-section.corridor-hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.corridor-row.corridor-active,
.corridor-section.corridor-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    animation: corridorRowEnter 0.5s ease forwards;
    /* Height inherited from .corridor-section — do not duplicate calc here */
    /* BACKGROUND ISOLATION: Prevent next-row colors bleeding through */
    background: var(--bg-dark, #0a0a0a);
    isolation: isolate;
}

.corridor-row.corridor-completed {
    /* Completed rows are hidden but their state is preserved */
}

@keyframes corridorRowEnter {
    0% {
        opacity: 0;
        transform: translateX(50px); /* Slide in from right (matches arrow direction) */
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* REMOVED: Corridor stage indicator dots
   Breadcrumbs are the ONLY progress indicator */

/* ═══════════════════════════════════════════════════════════════════════════════
   BEGIN STORY ROW — Terminal corridor row
   Clear threshold moment between configuration and story mode
   ═══════════════════════════════════════════════════════════════════════════════ */

.begin-story-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 40px 20px;
    text-align: center;
}

.begin-story-flourish {
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    margin-bottom: 30px;
    opacity: 0.6;
}

.begin-btn-wrapper {
    position: relative;
    display: inline-block;
}

.begin-btn-sparkle-emitter {
    position: absolute;
    inset: -60%;
    pointer-events: none;
    z-index: 0;
}

#beginStoryRow #beginBtn {
    position: relative;
    z-index: 1;
    width: 195px !important;
    height: 72px;
    padding: 16px 36px;
    min-width: 0;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    font-family: 'Lora', serif !important;
    font-variant: small-caps;
    font-size: 1.3em;
    color: #111 !important;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.5),
        1px -1px 0 rgba(218, 165, 32, 0.5),
        -1px 1px 0 rgba(218, 165, 32, 0.5),
        1px 1px 0 rgba(218, 165, 32, 0.5),
        0 0 4px rgba(218, 165, 32, 0.3) !important;
}

#beginStoryRow .story-continue-hint {
    margin-top: 12px;
    font-size: 0.85em;
    color: var(--text-secondary);
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CORRIDOR NAVIGATION ARROWS — Desktop row navigation affordances
   Subtle arrows at row edges for navigating between corridor rows.
   No auto-select, no auto-commit, no bypass of validation.
   ═══════════════════════════════════════════════════════════════════════════════ */
.corridor-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(218, 165, 32, 0.3);
    color: var(--gold);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s ease, background 0.2s ease;
    /* Subtle, not intrusive */
    pointer-events: auto;
}

.corridor-nav-arrow:hover {
    opacity: 0.9;
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--gold);
}

.corridor-nav-arrow:active {
    opacity: 1;
    transform: translateY(-50%) scale(0.95);
}

.corridor-nav-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

.corridor-nav-left {
    left: 30px;
    border-radius: 0 4px 4px 0;
}

.corridor-nav-right {
    right: 30px;
    border-radius: 4px 0 0 4px;
}

/* Narrow screens: reposition corridor arrows but keep full size */
@media (max-width: 768px) {
    .corridor-nav-left { left: 4px; }
    .corridor-nav-right { right: 4px; }
}

/* Hide arrows when zoomed card is open */
.sb-zoom-backdrop.active ~ .corridor-nav-arrow,
body:has(.sb-card.zoomed) .corridor-nav-arrow {
    opacity: 0;
    pointer-events: none;
}

/* CORRIDOR MODE: Prevent body/page scrolling during stages */
body.corridor-mode {
    overflow: hidden;
}

body.corridor-mode #setup {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding-bottom: 0 !important; /* Override inline 50px during corridor */
    /* Strip noise-texture background — prevents grey bleed through margins */
    background: #0a0a0a;
}

body.corridor-mode .shape-your-story-header {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Kill card-flow-row margins in corridor mode — no gap for background to bleed through */
body.corridor-mode .card-flow-row.corridor-section {
    margin: 0;
}

/* Corridor section titles — Lora small caps, white with gold outline */
body.corridor-mode .section-title {
    font-family: 'Lora', serif !important;
    font-variant: small-caps;
    font-size: 1em;
    margin: 0;
    padding: 6px 0;
    border-top: none;
    color: white !important;
    -webkit-text-stroke: 0;
    text-shadow: none !important;
    letter-spacing: 0.6em;
}

/* Corridor sections fill remaining viewport space exactly via flex —
   eliminates calc(100vh - header) mismatch that pushed cards down */
body.corridor-mode .corridor-section {
    flex: 1 1 0%;
    min-height: 0 !important;
    max-height: none !important;
    /* Title right under breadcrumbs, not vertically centered */
    justify-content: flex-start !important;
    padding-top: 4px;
    margin-top: 0; /* Explicit — no margin collapse, flush against header */
    /* Account for fixed Continue button at bottom so cards don't hide behind it */
    padding-bottom: 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Small-grid corridors (few cards) — vertically center instead of flex-start */
body.corridor-mode #lengthSection.corridor-section,
body.corridor-mode #flowRowPressure.corridor-section,
body.corridor-mode #flowRowDynamic.corridor-section {
    justify-content: center !important;
}

/* Archetype sub-sections share a stage — only the grid should flex-grow */
body.corridor-mode #archetypeSectionTitle.corridor-section {
    flex: 0 0 auto !important;
    overflow-y: visible !important;
}
body.corridor-mode .archetype-header-text.corridor-section,
body.corridor-mode .archetype-subtext.corridor-section,
body.corridor-mode #archetypeSelectionSummary.corridor-section {
    flex: 0 0 auto !important;
    padding-bottom: 0 !important;
    overflow-y: visible !important;
}

/* POV sub-sections share a stage — title shrinks, grid grows */
body.corridor-mode #povSectionTitle.corridor-section {
    flex: 0 0 auto !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
}

/* Arousal sub-sections share a stage — title shrinks, grid grows */
body.corridor-mode #arousalSectionTitle.corridor-section {
    flex: 0 0 auto !important;
    overflow-y: visible !important;
    padding-bottom: 0 !important;
}

/* Continue buttons should NEVER consume flex space as corridor sections */
body.corridor-mode .flow-continue-btn.corridor-section {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile: Reduce corridor bottom padding since Continue button is scaled down */
@media (max-width: 600px) {
    body.corridor-mode .corridor-section {
        padding-bottom: 40px;
    }
}

/* Body state when corridor is complete — allow scrolling to Safety/Begin */
body.corridor-complete #setup {
    overflow-y: auto;
}

body.corridor-complete {
    overflow: auto;
}

/* Corridor-complete: corridor sections revert to auto height, no dark bg block */
body.corridor-complete .corridor-section {
    min-height: auto !important;
    max-height: none !important;
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CONTINUE BUTTON — PNG background with real text overlay                         */
/* Uses Black-Gold-400x112.png as background, "Continue" text in Lora white        */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.flow-continue-btn {
    display: none;
    position: relative;
    margin: 25px auto;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;

    /* Z-INDEX AUTHORITY: Button must exceed all cards */
    z-index: 1000;
    pointer-events: auto;

    /* FLEX ISOLATION: Hard-prevent shrinking in flex containers */
    flex: none;
    flex-shrink: 0;
    align-self: center;

    /* SIZING: Base sizing (overridden by .sm variant) */
    width: auto;
    height: auto;

    /* Real text overlay: Lora, white */
    font-family: 'Lora', serif !important;
    font-size: 0.77rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    letter-spacing: 0.05em;
    text-transform: none;

    /* Prevent inherited styles from affecting layout */
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;

    /* GLEAM CONTAINMENT: gleam stays within button bounds */
    overflow: hidden;
}

/* Continue Button PNG asset — fixed dimensions with text centered */
.flow-continue-btn.sb-btn-png {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;

    /* Center text over PNG background */
    display: flex;
    align-items: center;
    justify-content: center;

    /* GLEAM CONTAINMENT: Reinforce on specific selector */
    overflow: hidden !important;
    position: relative;

    /* RIGHT EDGE ARTIFACT FIX: Clip 1px from right edge to hide white line */
    clip-path: inset(0 1px 0 0);
}

/* CONTINUE PNG: Black-Gold-400x112.png — native 400×112, display at 140×39 (30% smaller) */
.flow-continue-btn.sb-btn-png.sm {
    background-image: url('/assets/ui/Black-Gold-400x112.png') !important;
    width: 140px !important;
    height: 39px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    flex: 0 0 140px !important;
    box-sizing: border-box !important;
}

/* NUCLEAR FIX: ID-based rules for maximum specificity on ALL Continue buttons */
#continueFromAuthorship,
#continueFromCharacters,
#continueFromStorybeau,
#continueFromArousal,
#continueFromLength,
#continueFromPov,
#continueFromWorld,
#continueFromTone,
#continueFromPressure,
#continueFromDynamic,
#continueFromSafety {
    width: 140px !important;
    height: 39px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Corridor sections: Ensure buttons don't stretch */
.corridor-section > .flow-continue-btn,
.story-shape-row > .flow-continue-btn,
.authorship-choice-row > .flow-continue-btn {
    width: 140px !important;
    height: 39px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    align-self: center !important;
    flex: 0 0 auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CONTROL PLANE — Fixed layer for Continue button                                 */
/* Floats above ALL content. Never occluded by cards, corridors, or animations.    */
/* Controls are semantic. Content is flexible. These roles never mix.              */
/* ═══════════════════════════════════════════════════════════════════════════════ */

#controlPlane {
    position: fixed;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000; /* Above cards/corridors, below overlays (3000) */
    pointer-events: none; /* Layer doesn't block interaction with content below */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* God Mode plaque — DSP gold background, same size as Continue button */
.god-mode-plaque {
    width: 140px;
    height: 39px;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.god-mode-plaque.hidden {
    display: none;
}
.god-mode-plaque label {
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    color: #111;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.5),
        1px -1px 0 rgba(218, 165, 32, 0.5),
        -1px 1px 0 rgba(218, 165, 32, 0.5),
        1px 1px 0 rgba(218, 165, 32, 0.5),
        0 0 4px rgba(218, 165, 32, 0.3);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.god-mode-plaque input[type="checkbox"] {
    accent-color: var(--gold);
}

/* God Mode reader button — DSP gold plaque in story interface */
.god-mode-reader-btn {
    width: 160px;
    height: 44px;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-family: 'Lora', serif;
    font-variant: small-caps;
    font-size: 0.85em;
    color: #111;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.4),
        1px -1px 0 rgba(218, 165, 32, 0.4),
        -1px 1px 0 rgba(218, 165, 32, 0.4),
        1px 1px 0 rgba(218, 165, 32, 0.4);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: filter 0.15s ease;
}
.god-mode-reader-btn:hover { filter: brightness(1.1); }
.god-mode-reader-btn.hidden { display: none; }

/* God Mode unlock button — DSP gold plaque with Lora small caps */
.god-mode-unlock-btn {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-image: url('/assets/ui/DSP-Gold-Blk-1800x440.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-family: 'Lora', serif;
    font-variant: small-caps;
    font-size: 1.1em;
    color: #111;
    text-shadow:
        -1px -1px 0 rgba(218, 165, 32, 0.4),
        1px -1px 0 rgba(218, 165, 32, 0.4),
        -1px 1px 0 rgba(218, 165, 32, 0.4),
        1px 1px 0 rgba(218, 165, 32, 0.4);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: filter 0.15s ease;
}
.god-mode-unlock-btn:hover {
    filter: brightness(1.1);
}

/* When DSP is visible, move Continue button to very bottom of screen */
body:has(.synopsis-panel.visible) #controlPlane {
    bottom: 8px;
}

#controlPlane #continueButton {
    pointer-events: auto; /* Button itself is clickable */
    display: none; /* Hidden by default, shown by JS when appropriate */
    width: 140px !important;
    height: 39px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    margin: 0;
    /* Subtle halo for visual authority when floating over content */
    box-shadow:
        0 0 0 1px rgba(255, 215, 128, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.65);
}

/* Nuclear transform isolation — NO corridor animation can drag this into warped space */
#controlPlane,
#controlPlane * {
    transform-origin: center center;
    filter: none !important;
    perspective: none !important;
}

/* Override the translateX on the plane itself (needed for centering) */
#controlPlane {
    transform: translateX(-50%);
}

/* When visible */
#controlPlane #continueButton.visible {
    display: flex;
}

/* Hide Continue button when card is zoomed */
.sb-zoom-backdrop.active ~ #controlPlane,
body:has(.sb-card.zoomed) #controlPlane {
    display: none !important;
}

/* Mobile: Scale Continue button down — never below screen bottom */
@media (max-width: 600px) {
    #controlPlane {
        transform: translateX(-50%) scale(0.65);
        bottom: 8px;
    }
    #controlPlane #continueButton {
        box-shadow:
            0 0 0 2px rgba(255, 215, 128, 0.35),
            0 16px 48px rgba(0, 0, 0, 0.65);
    }
}

/* Hide control plane during gate screens (age, TOS, tier) */
/* Hide control plane on gate and mode-select screens */
#ageGate:not(.hidden) ~ #controlPlane,
#tosGate:not(.hidden) ~ #controlPlane,
#tierGate:not(.hidden) ~ #controlPlane,
body:has(#ageGate:not(.hidden)) #controlPlane,
body:has(#tosGate:not(.hidden)) #controlPlane,
body:has(#tierGate:not(.hidden)) #controlPlane,
body:has(#modeSelect:not(.hidden)) #controlPlane {
    display: none !important;
}

/* Hide legacy per-corridor Continue buttons — control plane owns Continue now */
.corridor-section > .flow-continue-btn:not(#continueButton),
.story-shape-row > .flow-continue-btn:not(#continueButton),
.authorship-choice-row > .flow-continue-btn:not(#continueButton),
#continueFromAuthorship,
#continueFromCharacters,
#continueFromStorybeau,
#continueFromWorld,
#continueFromTone,
#continueFromPressure,
#continueFromPov,
#continueFromLength,
#continueFromDynamic,
#continueFromArousal,
#continueFromSafety {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CONTINUE BUTTON GLEAM — Element-bound LEFT→RIGHT sweep                          */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Gleam pseudo-element — positioned relative to button bounds */
.flow-continue-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -35%; /* Start OFFSCREEN to the LEFT */
    width: 35%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.12) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.12) 55%,
        transparent 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps LEFT → RIGHT */
.flow-continue-btn:hover:not(:disabled)::after {
    animation: continue-btn-gleam 0.7s ease-out forwards;
}

/* Active: Gleam holds at right edge */
.flow-continue-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* Continue button gleam keyframes — LEFT to RIGHT motion */
@keyframes continue-btn-gleam {
    0% {
        left: -35%;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        left: 110%; /* Exit OFFSCREEN to the RIGHT */
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CONTINUE BUTTON STATES — Opacity-based with gleam on hover                      */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Idle state: full opacity, no transforms */
.flow-continue-btn.sb-btn-png {
    opacity: 1;
    transform: none;
    transition: opacity 0.15s ease-out, transform 0.1s ease-out;
}

/* Hover state: button slightly brighter, gleam animates */
.flow-continue-btn.sb-btn-png:hover:not(:disabled) {
    opacity: 1; /* Keep full opacity so gleam is visible */
}

/* Pressed/Active state: slight scale down */
.flow-continue-btn.sb-btn-png:active:not(:disabled) {
    transform: scale(0.98);
    opacity: 0.95;
}

/* Disabled state: reduced opacity, no gleam */
.flow-continue-btn.sb-btn-png:disabled,
.flow-continue-btn.sb-btn-png.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.flow-continue-btn.sb-btn-png:disabled::after,
.flow-continue-btn.sb-btn-png.is-disabled::after {
    display: none; /* No gleam on disabled */
}

/* Focus suppression */
.flow-continue-btn:focus,
.flow-continue-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.flow-continue-btn.visible {
    display: flex; /* Flex for text centering over PNG background */
}

/* Navigation blocked feedback - shake only (no glow for PNG buttons) */
.flow-continue-btn.navigation-blocked {
    animation: continueButtonShake 0.5s ease-out;
}

@keyframes continueButtonShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Card Dissipation Animation */
.sb-card.dissipating {
    animation: cardDissipate 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes cardDissipate {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.9) translateY(-10px);
        filter: blur(2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-30px);
        filter: blur(8px);
    }
}

/* Sparkle burst on dissipation */
.dissipate-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkleFloat 1s ease-out forwards;
    z-index: 1000;
}

@keyframes sparkleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--sparkle-dx, 50px), var(--sparkle-dy, -80px)) scale(0.3);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SPARKLE TELEPORT ANIMATION — Card dissolves, sparkles travel, breadcrumb appears
   The card does not travel. The decision does.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Phase 1: Card dissolving in place */
.dissolving-to-breadcrumb {
    animation: cardDissolve 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes cardDissolve {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.98);
        filter: blur(1px) brightness(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
        filter: blur(4px) brightness(1.5);
    }
}

/* Dissolution sparkles — appear on card surface */
.dissolution-sparkle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(255, 248, 220, 0.95) 0%, var(--gold) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    animation: dissolutionGlow 0.4s ease-out forwards;
}

@keyframes dissolutionGlow {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(-20px);
    }
}

/* Phase 2: Traveling sparkles — arc from card to breadcrumb */
.traveling-sparkle {
    position: fixed;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, var(--gold) 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1001;
    animation: sparkleTravel 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.6);
}

@keyframes sparkleTravel {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    30% {
        opacity: 1;
        transform: translate(var(--arc-x, 0), var(--arc-y, -50px)) scale(1.3);
    }
    100% {
        opacity: 0.8;
        transform: translate(var(--target-x, 0), var(--target-y, 0)) scale(0.6);
    }
}

/* Phase 3: Convergence sparkles — appear at breadcrumb during reveal */
.convergence-sparkle {
    position: fixed;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 248, 220, 1) 0%, var(--gold) 60%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1002;
    animation: convergenceGlow 0.5s ease-out forwards;
}

@keyframes convergenceGlow {
    0% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(0);
    }
}

/* Breadcrumb materializing — fades in with glow */
.breadcrumb-card.materializing {
    animation: breadcrumbMaterialize 0.4s ease-out forwards;
}

@keyframes breadcrumbMaterialize {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter: brightness(2) blur(2px);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
        filter: brightness(1.3) blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
}

/* Active breadcrumb sparkles — surrounds the most recent breadcrumb */
.breadcrumb-active-sparkles {
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 15;
    overflow: visible;
}

/* Legacy — keep for compatibility but no longer used */
.sb-card.becoming-breadcrumb {
    position: fixed !important;
    z-index: 600;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Row Section Title in Flow */
.card-flow-row .section-title {
    text-align: center;
    /* Smaller consistent margin - matches corridor section titles */
}

/* Flow Stage Indicator — HIDDEN
   Breadcrumbs are the ONLY progress indicator */
.flow-stage-indicator {
    display: none !important;
}

.flow-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(218, 165, 32, 0.3);
    transition: all 0.3s ease;
}

.flow-stage-dot.completed {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
}

.flow-stage-dot.active {
    background: var(--gold);
    animation: stageDotPulse 1.5s ease-in-out infinite;
}

@keyframes stageDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* AUTHORSHIP CHOICE ROW — Two-card selection (Choose Your Hand vs Guided Fate)   */
/* ═══════════════════════════════════════════════════════════════════════════════ */
.authorship-choice-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    /* Height inherited from .corridor-section — do not duplicate calc here */
    overflow: hidden;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 20px; /* Minimal padding - centering handles vertical */
    box-sizing: border-box;
    transition: opacity 0.4s ease;
    background: var(--bg-dark, #0a0a0a);
    position: relative;
    z-index: 1;
}

/* Cards container — keeps cards side by side */
.authorship-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: nowrap;
    /* Prevent vertical stretching of children */
    flex-shrink: 0;
}

/* Continue button positioning */
.authorship-choice-row > .flow-continue-btn {
    margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* AUTHORSHIP CORRIDOR LAYOUT (#authorshipChoiceRow)                               */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Row layout: column flex, cards centered */
#authorshipChoiceRow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

/* Cards container: no shrink, maintains size */
#authorshipChoiceRow .authorship-cards-container {
    flex-shrink: 0;
}

/* Selected-static: Freezes layout when clone is animating */
#authorshipChoiceRow .authorship-card.selected-static {
    visibility: hidden; /* Hide but preserve layout space */
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* CORRIDOR-SCOPED FIX: Archetype corridor (storybeau)                             */
/* Prevents Continue button squishing                                              */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Archetype Continue button: Canonical 200×56 enforced via .flow-continue-btn.sb-btn-png.sm */
#continueFromStorybeau {
    display: inline-flex;
    align-self: center;
    margin-top: 20px;
    /* No dimension overrides - canonical spec is 200×56 */
}

/* Collapse row after choice is made and breadcrumb created */
.authorship-choice-row.collapsed {
    opacity: 0;
    max-height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.authorship-card {
    width: 140px;
    /* Explicit height from tarot ratio: 140 * (4.75/2.75) = 241.8px */
    height: 242px;
    aspect-ratio: 2.75 / 4.75; /* Canonical tarot proportions (fallback) */
    /* Prevent flex stretching */
    flex-shrink: 0;
    flex-grow: 0;
    align-self: center;
    perspective: 800px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.4s ease;
}

.authorship-card:hover:not(.selected):not(.dissipating) {
    transform: scale(1.05);
}

.authorship-card.selected {
    transform: scale(1.08);
    opacity: 1 !important; /* Ensure selected card is fully visible */
    filter: none !important; /* No grayscale on selected */
    pointer-events: auto; /* Ensure clickable */
    z-index: 10; /* Above dimmed cards */
}

.authorship-card.dissipating {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.authorship-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.authorship-card.flipped .authorship-card-inner {
    transform: rotateY(180deg);
}

.authorship-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center text within constrained gold box area */
    align-items: center;
    text-align: center;
    /* Pixel padding constrains content to the gold text box on the PNG.
       Card is 242px tall; gold box spans ~42px to ~97px from top.
       CSS %-padding resolves against WIDTH not height, so use px. */
    padding: 42px 15px 148px 15px;
    box-sizing: border-box;
    /* Use the gold tarot card PNG as background */
    background-image: url('/assets/card-art/cards/Tarot-Gold-bdsm-BLANKXL-back.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.authorship-card-back {
    transform: rotateY(0deg);
}

.authorship-card-front {
    transform: rotateY(180deg);
    padding: 0;
}

/* Art PNGs for flipped authorship cards — image fills entire face */
#chooseYourHandCard .authorship-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-Choose.png');
}
#guidedFateCard .authorship-card-front {
    background-image: url('/assets/card-art/cards/Tarot-Gold-front-Guided.png');
}
/* Hide text overlays on front face — art has text baked in */
.authorship-card-front .authorship-card-title,
.authorship-card-front .authorship-card-desc {
    display: none;
}

.authorship-card-title {
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 1.1em;
    font-weight: 400;
    color: #1a1612; /* Black text */
    text-shadow: none;
    margin-bottom: 4px;
    margin-top: 15px;
}

.authorship-card-desc {
    font-family: 'Lora', serif;
    font-size: 0.75em;
    color: #2a2520; /* Dark brown/black text */
    line-height: 1.3;
}

/* Selected state for authorship cards - sparkles only, no glow */
.authorship-card.selected .authorship-card-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* AUTHORSHIP CARD SPARKLE EMITTER — Calm ambient halo (UI affordance)             */
/* - Constant size (no size variance)                                              */
/* - Perimeter halo emission (outside card bounds)                                 */
/* - Slow continuous motion (no start-stop)                                        */
/* ═══════════════════════════════════════════════════════════════════════════════ */
/* NOTE: .authorship-card-face MUST remain position: absolute (set at line 10937).
   Setting position: relative here broke the 3D flip — faces rendered in flow
   instead of stacked, causing the front face to appear below the back face.
   overflow: visible is safe to set without changing position. */
.authorship-card-face {
    overflow: visible; /* Allow sparkles to render outside card bounds */
}

/* Sparkle emitter container — extends beyond card for halo effect */
.authorship-sparkle-emitter {
    position: absolute;
    inset: -20px; /* Extend beyond card for perimeter halo */
    pointer-events: none;
    z-index: 10;
    overflow: visible; /* Never clip sparkles */
}

/* Individual sparkle particle — constant size, alpha-only variance */
.authorship-sparkle {
    position: absolute;
    width: var(--sparkle-size, 4px);
    height: var(--sparkle-size, 4px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 140, 0.95) 0%, rgba(255, 215, 0, 0.6) 50%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    /* Linear timing for smooth continuous motion (not ease-in-out) */
    animation: authorship-sparkle-drift var(--sparkle-duration, 4s) linear forwards;
}

/* Continuous drift animation — no scale changes, smooth linear motion */
@keyframes authorship-sparkle-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10% {
        opacity: var(--sparkle-opacity, 0.5);
    }
    90% {
        opacity: var(--sparkle-opacity, 0.5);
    }
    100% {
        opacity: 0;
        transform: translate(
            var(--sparkle-drift-x, 10px),
            var(--sparkle-drift-y, 10px)
        );
    }
}

/* Sparkle flicker animation — occasional brightness pulse */
.authorship-sparkle.sparkle-flicker {
    animation:
        authorship-sparkle-drift var(--sparkle-duration, 4s) linear forwards,
        sparkle-flicker-pulse 0.3s ease-in-out infinite;
}

@keyframes sparkle-flicker-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.8); }
}

/* Authorship cards: no dimming on selection — sparkle-only feedback */

/* ========================================
   FATE DESTINY CARD - Let Fate Decide (Legacy)
   ======================================== */
.fate-shortcut-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 10px 0 25px;
    flex-wrap: wrap;
}

/* "Choose Manually" button in Guided Fate row */
.fate-shortcut-row .flow-continue-btn {
    margin-top: 10px;
}

.fate-shortcut-text {
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 1.4em;
    color: var(--gold);
    font-style: italic;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.3);
}

.fate-destiny-card {
    width: 80px;
    height: 112px;
    perspective: 800px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.fate-destiny-card:hover {
    transform: scale(1.05);
}

.fate-destiny-card.flipped .fate-destiny-inner {
    transform: rotateY(180deg);
}

.fate-destiny-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.fate-destiny-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.fate-destiny-back {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 2px solid var(--gold);
    padding: 10px;
}

.fate-destiny-title {
    font-family: 'lust-script-display', 'lust-script', serif;
    font-size: 0.9em;
    color: var(--gold);
    text-align: center;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
    line-height: 1.2;
}

.fate-destiny-front {
    background: linear-gradient(135deg, #2d1810 0%, #4a2c17 50%, #6b3a1f 100%);
    border: 2px solid var(--gold);
    transform: rotateY(180deg);
}

.fate-golden-tree {
    width: 60px;
    height: 80px;
    background: radial-gradient(ellipse at center bottom, var(--gold) 0%, transparent 70%),
                linear-gradient(to top, var(--gold) 0%, transparent 40%);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 5 L45 25 L38 25 L50 45 L40 45 L55 70 L5 70 L20 45 L10 45 L22 25 L15 25 Z M27 70 L27 80 L33 80 L33 70 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M30 5 L45 25 L38 25 L50 45 L40 45 L55 70 L5 70 L20 45 L10 45 L22 25 L15 25 Z M27 70 L27 80 L33 80 L33 70 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    filter: drop-shadow(0 0 8px var(--gold));
    animation: tree-glow 2s ease-in-out infinite alternate;
}

@keyframes tree-glow {
    from { filter: drop-shadow(0 0 5px var(--gold)); opacity: 0.9; }
    to { filter: drop-shadow(0 0 15px var(--gold)); opacity: 1; }
}

/* =================================
   TASK F: Submit Turn Feedback
   Immediate visual feedback on click
   ================================= */
#submitBtn.submitting {
    animation: submit-pulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes submit-pulse {
    0%, 100% {
        box-shadow: 0 0 8px var(--pink), 0 0 16px var(--pink);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px var(--pink), 0 0 40px var(--pink), 0 0 60px rgba(255, 20, 147, 0.4);
        transform: scale(1.02);
    }
}

/* =================================
   GUIDED FATE FILL ENGINE
   Step-by-step reveal animations
   ================================= */

/* Gold glow effect for text inputs during fate fill */
.fate-typing {
    color: var(--gold) !important;
    text-shadow: 0 0 8px var(--gold), 0 0 16px rgba(255, 215, 0, 0.6);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* After typing completes, fade to normal */
.fate-typed {
    animation: fate-glow-settle 0.8s ease-out forwards;
}

@keyframes fate-glow-settle {
    0% {
        color: var(--gold);
        text-shadow: 0 0 8px var(--gold), 0 0 16px rgba(255, 215, 0, 0.6);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

/* Card reveal animation for guided fate */
.sb-card.fate-revealing {
    animation: fate-card-reveal 0.4s ease-out forwards;
    z-index: 50;
}

@keyframes fate-card-reveal {
    0% {
        transform: scale(1) rotateY(0deg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    30% {
        transform: scale(1.05) rotateY(0deg);
        box-shadow: 0 0 20px var(--gold), 0 8px 20px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
}

/* Begin Story button highlighting after fate fill completes */
#beginBtn.fate-ready {
    animation: fate-begin-pulse 1.5s ease-in-out infinite;
    position: relative;
}

#beginBtn.fate-ready::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--gold), var(--pink), var(--gold));
    z-index: -1;
    animation: fate-border-spin 3s linear infinite;
    opacity: 0.8;
}

@keyframes fate-begin-pulse {
    0%, 100% {
        box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px var(--gold), 0 0 60px rgba(255, 215, 0, 0.6), 0 0 80px rgba(255, 215, 0, 0.3);
        transform: scale(1.03);
    }
}

@keyframes fate-border-spin {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Section highlight during reveal */
.section-title.fate-active {
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Character field highlight during reveal */
.character-field.fate-active input {
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px var(--gold);
}

/* Golden echo on downstream inputs while Guided Fate visuals are active */
.guided-fate-glow {
    position: relative;
    box-shadow:
        0 0 14px rgba(255, 200, 90, 0.45),
        0 0 28px rgba(255, 180, 60, 0.25);
    border-radius: 12px;
}

/* In-story selection aura — subtle golden glow on focused cards/inputs */
.selection-aura {
    box-shadow:
        0 0 10px rgba(255, 200, 90, 0.3),
        0 0 20px rgba(255, 180, 60, 0.15);
    border-radius: 8px;
}

/* Sparkle particles render above cards and inputs */
.fate-edge-sparkle {
    z-index: 5000;
    pointer-events: none;
}

/* Fate Resolution — brief gold pulse on in-story Fate card click */
.fate-resolve-pulse {
    animation: fateResolvePulse 350ms ease-out;
}
@keyframes fateResolvePulse {
    0% { filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 200, 90, 0.5)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* Fate Resolution — brief glow on Say/Do inputs when Fate populates them */
.fate-resolve-glow {
    animation: fateResolveGlow 350ms ease-out;
}
@keyframes fateResolveGlow {
    0% { box-shadow: 0 0 10px rgba(255, 200, 90, 0.5), 0 0 20px rgba(255, 180, 60, 0.25); }
    100% { box-shadow: 0 0 0 transparent; }
}

/* =================================
   GUIDED FATE OPENING CEREMONY
   Golden vignette + visual effects
   ================================= */

/* Golden vignette overlay during Guided Fate */
#fateVignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    background: radial-gradient(
        ellipse at center,
        transparent 40%,
        rgba(255, 215, 0, 0.14) 60%,
        rgba(255, 215, 0, 0.25) 80%,
        rgba(255, 215, 0, 0.39) 100%
    );
}

#fateVignette.active {
    opacity: 1;
    animation: fate-vignette-pulse 4s ease-in-out infinite,
               fate-vignette-breathe 7s ease-in-out infinite;
}

#fateVignette.fading {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    animation: none;
}

/* Sinusoidal pulse - soft brightness oscillation */
@keyframes fate-vignette-pulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.25);
    }
}

/* Subtle radial breathing - barely perceptible scale drift */
@keyframes fate-vignette-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* =================================
   FAIRY DUST PARTICLES
   Sparse, ethereal gold specks
   ================================= */

/* Sparkle anchor container — inserted inside source elements, allows perimeter overflow */
.sparkle-anchor-container {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 2500; /* Below modals (z-index: 3000) */
}

.fate-dust-particle {
    position: absolute;
    pointer-events: none;
    z-index: 2500; /* Below modals (z-index: 3000) */
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(255, 235, 150, 0.95) 0%,
        rgba(255, 215, 80, 0.6) 35%,
        rgba(255, 200, 50, 0.3) 55%,
        transparent 75%
    );
    opacity: 0;
    will-change: transform, opacity;
    animation: fate-dust-drift var(--dust-duration, 6s) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    /* Add sparkle glow */
    box-shadow: 0 0 6px rgba(255, 220, 100, 0.8), 0 0 12px rgba(255, 200, 50, 0.5);
}

/* Viewport-based sparkles (vignette effect) — use fixed positioning */
.fate-dust-particle--viewport {
    position: fixed;
}

/* Anchored sparkles — fixed position updated by rAF to track owner element */
.fate-dust-particle--anchored {
    position: fixed;
}

/* Starfield sparkle variation */
.fate-dust-particle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 60%);
    border-radius: 50%;
    animation: fate-dust-twinkle 1.5s ease-in-out infinite;
}

@keyframes fate-dust-twinkle {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

@keyframes fate-dust-drift {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.3);
    }
    10% {
        opacity: calc(var(--dust-opacity, 0.5) * 0.5);
        transform: translate(calc(var(--dust-dx, 10px) * 0.08), calc(var(--dust-dy, -30px) * 0.08)) scale(0.7);
    }
    25% {
        opacity: var(--dust-opacity, 0.5);
        transform: translate(calc(var(--dust-dx, 10px) * 0.2), calc(var(--dust-dy, -30px) * 0.2)) scale(1);
    }
    70% {
        opacity: calc(var(--dust-opacity, 0.5) * 0.8);
        transform: translate(calc(var(--dust-dx, 10px) * 0.75), calc(var(--dust-dy, -60px) * 0.75)) scale(0.9);
    }
    90% {
        opacity: calc(var(--dust-opacity, 0.5) * 0.3);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dust-dx, 10px), var(--dust-dy, -60px)) scale(0.2);
    }
}

/* Golden glow radiating from fate card */
.fate-destiny-card.fate-activating {
    animation: fate-card-radiate 1.5s ease-out forwards;
}

@keyframes fate-card-radiate {
    0% {
        box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    }
    30% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.5), 0 0 100px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 0 30px rgba(255, 215, 0, 0.2);
    }
}

/* Character block highlight during opening ceremony */
.character-block.fate-ceremony {
    position: relative;
    border-color: var(--gold) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

/* Character section title during ceremony */
.character-section-title.fate-ceremony {
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold);
}

/* Fate firefly emanation — gentle drift animation */
@keyframes fate-firefly {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    15%  { opacity: var(--ff-opacity, 0.3); transform: translate(calc(var(--ff-dx) * 0.1), calc(var(--ff-dy) * 0.1)) scale(1); }
    70%  { opacity: var(--ff-opacity, 0.3); transform: translate(calc(var(--ff-dx) * 0.7), calc(var(--ff-dy) * 0.7)) scale(0.8); }
    /* 100%: Keep opacity at peak — JS transition handles the 2s fade-out after animation ends */
    100% { opacity: var(--ff-opacity, 0.3); transform: translate(var(--ff-dx), var(--ff-dy)) scale(0.3); }
}

/* Fate card disintegration — radial burst on commit */
@keyframes fate-disintegrate {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    50%  { opacity: 0.85; transform: translate(calc(var(--dis-x) * 0.5), calc(var(--dis-y) * 0.5)) scale(0.7); }
    100% { opacity: 0; transform: translate(var(--dis-x), var(--dis-y)) scale(0.2); }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTON SPARKLE FX — Cover generation button (one-shot burst)
   NOT Fate card FX — scoped to button bounds only
   ═══════════════════════════════════════════════════════════════════ */

.cover-btn-sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, var(--gold) 0%, #ffaa00 50%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    /* No animation — JS handles fade via transition */
}

/* ═══════════════════════════════════════════════════════════════════════════════ */
/* BEGIN STORY — CEREMONIAL ACTIVATION STATE                                        */
/* Filigree etches itself complete. Text appears more deeply engraved.              */
/* No glow. No highlight. No UI effects. The plaque is "finished", not "activated". */
/* ═══════════════════════════════════════════════════════════════════════════════ */

/* Pre-ready state: Begin button filigree awaits etching (faint appearance) */
.cover-view-btn.begin-btn:not(.begin-story-ready),
#beginBtn:not(.begin-story-ready),
.setting-begin-btn:not(.begin-story-ready) {
    /* Filigree appears faint, not yet fully engraved */
    filter: contrast(0.85);
}

.cover-view-btn.begin-btn:not(.begin-story-ready)::before,
#beginBtn:not(.begin-story-ready)::before,
.setting-begin-btn:not(.begin-story-ready)::before {
    /* Diamond also faint */
    opacity: 0.4;
}

/* Ready state: Filigree etches to full visibility */
.begin-story-ready {
    /* Trigger etching animation */
    animation: filigree-etch 1.2s ease-out forwards;

    /* Deeper engraved text — pronounced inset effect */
    text-shadow:
        0 2px 1px rgba(0, 0, 0, 0.95),
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 -1px 0 rgba(90, 69, 16, 0.15);
}

/* Diamond fully visible when ready */
.begin-story-ready::before {
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

/* Filigree etching animation — from faint to fully engraved */
@keyframes filigree-etch {
    0% {
        filter: contrast(0.85);
    }
    40% {
        filter: contrast(0.95);
    }
    100% {
        filter: contrast(1);
    }
}

/* Begin Story ready: same gleam-sweep as Continue on hover (no ceremonial override) */
.begin-story-ready::after {
    /* Inherits .sb-btn-png::after gleam — no override needed */
    animation: none;
}

/* Focus suppression for Begin Story plaque */
.begin-story-ready:focus,
.begin-story-ready:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* STORY CONTINUE HINT — Passive save affordance                               */
/* ═══════════════════════════════════════════════════════════════════════════ */
.story-continue-hint {
    font-size: 0.8em;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-top: 8px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.story-continue-hint.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COVER VIEW BUTTONS                                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */
.cover-view-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 0 20px;
}

/* Cover View Buttons — Ceremonial Metal Plaque */
.cover-view-btn {
    position: relative;
    overflow: hidden; /* Contain gleam */
    width: auto;
    padding: 10px 24px;
    font-size: 0.95em;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer;
    white-space: nowrap;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Focus suppression */
.cover-view-btn:focus,
.cover-view-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Setting Button: Black plaque — Art Deco filigree */
.cover-view-btn.setting-btn {
    background-color: var(--plaque-black-base);
    background-image:
        /* Corner ornaments */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Outer filigree frame */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Inner filigree frame (top split for diamond) */
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        linear-gradient(var(--filigree-gold), var(--filigree-gold)),
        /* Brushed metal grain */
        var(--plaque-black-grain);

    background-size:
        /* Corner ornaments */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Grain */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(50% + 6px) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Grain */
        0 0;

    background-repeat: no-repeat;

    color: var(--filigree-gold);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 215, 0, 0.1);
}

/* Diamond accents removed — prefer subtraction over unclear embellishment */
.cover-view-btn.setting-btn::before {
    content: none;
}

/* Gleam element for cover-view-btn — element-bound */
.cover-view-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps across — material unchanged */
.cover-view-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.cover-view-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* Disabled: Grey filigree and text — NO filter, NO opacity */
.cover-view-btn.setting-btn:disabled {
    cursor: not-allowed;
    color: var(--plaque-locked-text) !important;
    background-image:
        /* Grey corner ornaments */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey outer frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        /* Grey inner frame */
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        linear-gradient(var(--plaque-locked-border), var(--plaque-locked-border)),
        var(--plaque-black-grain);
}

.cover-view-btn.setting-btn:disabled::before {
    content: none;
}

.cover-view-btn:disabled::after {
    display: none;
}

.setting-disabled-notice {
    font-size: 0.75em;
    color: #888;
    margin-top: -8px;
}

/* Premium-locked: Button remains clickable */
.cover-view-btn.setting-btn.premium-locked {
    opacity: 1;
    cursor: pointer;
}

.cover-view-btn.setting-btn.premium-locked::after {
    content: ' ✨';
    font-size: 0.85em;
}

/* Begin Button: Gold plaque — MATERIAL LOCK */
/* Begin Button: Gold plaque — Art Deco filigree (dark on gold) */
.cover-view-btn.begin-btn {
    background-color: var(--plaque-gold-base);
    background-image:
        /* Dark corner ornaments on gold */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Dark outer frame */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        /* Dark inner frame */
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        linear-gradient(var(--plaque-gold-inner), var(--plaque-gold-inner)),
        var(--plaque-gold-grain);

    background-size:
        /* Corner ornaments */
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        /* Outer frame */
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        var(--outer-frame-thickness) calc(100% - var(--outer-frame-inset) * 2),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        calc(100% - var(--outer-frame-inset) * 2) var(--outer-frame-thickness),
        /* Inner frame */
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        var(--inner-frame-thickness) calc(100% - var(--inner-frame-inset) * 2),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(50% - var(--inner-frame-inset) - 6px) var(--inner-frame-thickness),
        calc(100% - var(--inner-frame-inset) * 2) var(--inner-frame-thickness),
        /* Grain */
        100% 100%;

    background-position:
        /* Corner ornaments */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        calc(100% - var(--outer-frame-inset)) calc(100% - var(--outer-frame-inset)),
        /* Outer frame edges */
        var(--outer-frame-inset) var(--outer-frame-inset),
        calc(100% - var(--outer-frame-inset)) var(--outer-frame-inset),
        var(--outer-frame-inset) var(--outer-frame-inset),
        var(--outer-frame-inset) calc(100% - var(--outer-frame-inset)),
        /* Inner frame edges */
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(100% - var(--inner-frame-inset)) var(--inner-frame-inset),
        var(--inner-frame-inset) var(--inner-frame-inset),
        calc(50% + 6px) var(--inner-frame-inset),
        var(--inner-frame-inset) calc(100% - var(--inner-frame-inset)),
        /* Grain */
        0 0;

    background-repeat: no-repeat;

    color: var(--plaque-gold-text);
    text-shadow:
        0 1px 0 rgba(255, 215, 0, 0.3),
        0 -1px 0 rgba(0, 0, 0, 0.4);
    font-weight: 600;
}

/* Diamond accents removed — prefer subtraction over unclear embellishment */
.cover-view-btn.begin-btn::before {
    content: none;
}

/* Gold gleam — warmer highlight */
.cover-view-btn.begin-btn::after {
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 248, 220, 0.12) 45%,
        rgba(255, 248, 220, 0.22) 50%,
        rgba(255, 248, 220, 0.12) 55%,
        transparent 65%,
        transparent 100%
    );
}

/* Hover: Gleam sweeps across — material unchanged */
.cover-view-btn.begin-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.cover-view-btn.begin-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* COVER$ CREDIT DISPLAY                                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */
#coverCreditDisplay {
    transition: color 0.3s ease, opacity 0.3s ease;
}

#coverCreditDisplay.god-mode {
    color: #b8860b;
    font-weight: bold;
}

#coverCreditDisplay.exhausted {
    color: var(--pink);
    font-weight: bold;
}

/* Cover$ Purchase Modal styles */
#coverPurchaseModal .box {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid var(--gold);
}

#coverPurchaseModal textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SETTING VIEW                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.setting-view {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.98);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.setting-view-loading {
    text-align: center;
    color: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.setting-status-text {
    font-size: 1.1em;
    color: rgba(255, 215, 0, 0.8);
    margin: 0;
}

/* Ellipsis animation for non-blocking status */
.setting-ellipsis::after {
    content: '';
    animation: settingEllipsis 1.5s steps(4, end) infinite;
}

@keyframes settingEllipsis {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

.setting-long-wait-hint {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}
.setting-long-wait-hint.hidden { display: none; }

.setting-skip-btn {
    margin-top: 20px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 12px 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.2s ease;
}
.setting-skip-btn:hover {
    background: rgba(255, 215, 0, 0.15);
}

/* Legacy progress bar — kept but unused */
.setting-progress-bar {
    display: none;
    width: 200px;
    height: 4px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.setting-progress-fill {
    width: 100%;
    height: 100%;
    background: var(--gold);
    animation: settingProgressFill 2s ease-in-out infinite;
}

@keyframes settingProgressFill {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

.setting-view-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    cursor: pointer;
}

.setting-view-image {
    max-width: 90vw;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.setting-view-hint {
    color: var(--gold);
    font-size: 0.9em;
    opacity: 0.8;
    animation: settingHintPulse 2s ease-in-out infinite;
}

@keyframes settingHintPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.setting-back-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.setting-back-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Setting View Fallback — Intentional design when image fails */
.setting-view-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    padding: 40px;
}
.setting-view-fallback.hidden { display: none; }

.setting-fallback-inner {
    text-align: center;
    padding: 60px 40px;
    background:
        radial-gradient(ellipse at center, rgba(30, 25, 20, 0.95) 0%, rgba(12, 10, 8, 0.98) 100%);
    border: 1px solid rgba(185, 153, 90, 0.4);
    border-radius: 12px;
    max-width: 400px;
}

.setting-fallback-text {
    font-family: var(--font-story, Georgia, serif);
    font-size: 1.3em;
    font-style: italic;
    color: #b9995a;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Setting Begin Button — Gold Plaque Material */
.setting-begin-btn {
    position: relative;
    overflow: hidden; /* Contain gleam */
    background-color: var(--plaque-gold-base) !important;
    background-image: var(--plaque-gold-grain) !important;
    background-size: 100% 100% !important;
    border: var(--plaque-border-outer) solid var(--plaque-gold-outer) !important;
    box-shadow: inset 0 0 0 var(--plaque-border-inner) var(--plaque-gold-inner),
                0 2px 4px rgba(0, 0, 0, 0.5) !important;
    color: var(--plaque-gold-text);
    padding: 14px 32px;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.08em;
    /* NO ROUNDING */
    border-radius: 0 !important;
    cursor: pointer;
    /* NO TRANSITIONS — plaque is inert */
}

/* Gold gleam for setting-begin-btn — element-bound */
.setting-begin-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 248, 220, 0.12) 45%,
        rgba(255, 248, 220, 0.22) 50%,
        rgba(255, 248, 220, 0.12) 55%,
        transparent 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Hover: Gleam sweeps across — material unchanged */
.setting-begin-btn:hover:not(:disabled)::after {
    animation: plaque-gleam 0.6s ease-out forwards;
}

/* Active: Gleam holds at edge */
.setting-begin-btn:active:not(:disabled)::after {
    left: 110%;
    animation: none;
}

.setting-retry-btn {
    display: block;
    margin-top: 12px;
    background: transparent;
    border: none;
    color: rgba(185, 153, 90, 0.7);
    padding: 8px 16px;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}
.setting-retry-btn:hover {
    color: rgba(185, 153, 90, 1);
}

/* LEGACY BREADCRUMB CSS REMOVED: "Shape > Cover > Setting > Story" component deleted */

/* Cover generation loading bar — animated left→right fill */
@keyframes coverGenBarFill {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* ═══════════════════════════════════════════════════════════════════
   DEV HUD — Developer console (toggled with backtick key)
   ═══════════════════════════════════════════════════════════════════ */

.dev-hud {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    transform: translateY(100%);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.dev-hud.dev-hud-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.dev-hud-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.88);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dev-hud-label {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(212, 175, 55, 0.7);
    padding: 2px 6px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 3px;
    flex-shrink: 0;
}

.dev-hud-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8em;
    padding: 4px 0;
    caret-color: rgba(212, 175, 55, 0.7);
}

.dev-hud-bar input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}

.dev-hud-log {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.7em;
    color: rgba(64, 224, 208, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}
/* Spin animation for loading spinner */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}