:root {
  --bg: #0d0d0d;
  --bg2: #161616;
  --card: #1e1e1e;
  --card-h: #262626;
  --input: #1a1a1a;
  --t1: #f0e6d3;
  --t2: #a89880;
  --t3: #6b5e50;
  --accent: #d4a853;
  --accent-h: #e0b860;
  --border: #2a2a2a;
  --border-l: #333;
  --r: 8px;
  --rl: 12px;
  --font: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mw: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body { font-family:var(--font); background:var(--bg); color:var(--t1); line-height:1.7; min-height:100vh; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-h); }

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; padding:1rem 2rem; background:var(--bg2); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.logo { font-size:1.5rem; font-weight:bold; color:var(--accent)!important; }
.header nav { display:flex; gap:1.5rem; }
.header nav a { color:var(--t2); font-family:var(--sans); font-size:.9rem; }
.header nav a:hover { color:var(--t1); }
.auth { font-family:var(--sans); font-size:.85rem; display:flex; gap:1rem; align-items:center; }
.auth span { color:var(--t2); }
.btn-login { background:var(--accent); color:#0d0d0d!important; padding:.4rem 1rem; border-radius:var(--r); font-weight:600; }

/* Library */
.library { max-width:var(--mw); margin:0 auto; padding:2rem; }
.library-header { text-align:center; margin-bottom:3rem; }
.library-header h1 { font-size:2.5rem; color:var(--accent); margin-bottom:.5rem; }
.subtitle { color:var(--t2); font-style:italic; }
.story-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.story-card { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; transition:all .2s; color:var(--t1)!important; height:360px; }
.story-card:hover { background:var(--card-h); border-color:var(--accent); transform:translateY(-2px); }
.story-card .card-body { padding:1rem 1.5rem; flex:1; display:flex; flex-direction:column; overflow:hidden; }
.story-card.has-artwork .card-body { padding:1rem 1.5rem; }
.card-artwork { width:100%; height:180px; overflow:hidden; flex-shrink:0; }
.card-artwork-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.story-card:hover .card-artwork-img { transform:scale(1.03); }
.card-number { font-family:var(--sans); font-size:.75rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.5rem; }
.story-card h3 { font-size:1.2rem; margin-bottom:.3rem; }
.title-ru { color:var(--t3); font-style:italic; font-size:.9rem; margin-bottom:.5rem; }
.summary { color:var(--t2); font-size:.9rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex-shrink:1; }

/* Reader */
.reader { max-width:var(--mw); margin:0 auto; display:flex; }
.reader.with-panel .reader-content { flex:1; max-width:calc(100% - 380px); }
.reader-content { flex:1; padding:2rem; }
.reader-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; font-family:var(--sans); }
.back { color:var(--t2)!important; font-size:.9rem; }
.reader-controls { display:flex; gap:.5rem; align-items:center; }
.btn-sm { background:var(--card); border:1px solid var(--border); color:var(--t2); padding:.4rem .8rem; border-radius:var(--r); cursor:pointer; font-family:var(--sans); font-size:.85rem; transition:all .2s; }
.btn-sm:hover,.btn-sm.active { border-color:var(--accent); color:var(--accent); }
.btn-sm.btn-disabled { opacity:.4; cursor:not-allowed; }
.btn-sm.btn-disabled:hover { border-color:var(--border); color:var(--t2); }

article h1 { font-size:2rem; color:var(--accent); margin-bottom:.3rem; }
.title-ru-large { color:var(--t3); font-style:italic; font-size:1.2rem; margin-bottom:2rem; }
.story-text p { margin-bottom:1.2rem; font-size:1.1rem; text-indent:1.5em; text-align:justify; }
.story-text p:first-child { text-indent:0; }
.story-text p:first-child::first-letter { font-size:3em; float:left; line-height:.8; padding-right:.1em; color:var(--accent); font-weight:bold; }

/* Chapter headings */
.chapter-block { margin-bottom:2rem; }
.chapter-heading { font-size:1.4rem; color:var(--accent); margin:2rem 0 1rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }

/* Language Toggle */
.lang-toggle { display:inline-flex; gap:2px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2px; margin-right:.5rem; }
.lang-toggle .btn-sm { border:none; border-radius:6px; padding:.3rem .6rem; font-size:.8rem; }
.lang-toggle .btn-sm.active { background:var(--accent); color:#0d0d0d; border-color:transparent; }
.lang-toggle .btn-sm:disabled { opacity:.35; cursor:not-allowed; }

.text-ru { font-style:italic; color:var(--t2); }
.text-ru.bilingual { background:var(--bg2); border-left:3px solid var(--accent); padding:.5rem .8rem; margin-left:0; border-radius:0 var(--r) var(--r) 0; font-style:italic; color:var(--t2); margin-bottom:1.2rem; }
.text-en { margin-bottom:.3rem; }
.title-en-sub { color:var(--t3); font-size:1rem; margin-bottom:2rem; }

/* AI Panel */
.ai-panel { width:380px; background:var(--bg2); border-left:1px solid var(--border); padding:1.5rem; overflow-y:auto; height:calc(100vh - 60px); position:sticky; top:60px; }
.ai-panel h3 { font-family:var(--sans); margin-bottom:1rem; color:var(--accent); }
.ai-tabs { display:flex; margin-bottom:1rem; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); }
.ai-tabs button { flex:1; padding:.5rem; background:var(--card); border:none; color:var(--t2); cursor:pointer; font-family:var(--sans); font-size:.85rem; }
.ai-tabs button.active { background:var(--accent); color:#0d0d0d; }
.ai-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.ai-actions button { background:var(--card); border:1px solid var(--border); color:var(--t1); padding:.5rem .8rem; border-radius:var(--r); cursor:pointer; font-family:var(--sans); font-size:.85rem; transition:all .2s; }
.ai-actions button:hover:not(:disabled) { border-color:var(--accent); }
.ai-actions button:disabled { opacity:.5; cursor:not-allowed; }
.ai-loading { color:var(--accent); font-family:var(--sans); padding:1rem 0; }
.ai-result { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1rem; font-size:.9rem; line-height:1.6; white-space:pre-wrap; }
.generated-art { width:100%; border-radius:var(--r); margin:1rem 0; border:1px solid var(--border); }

/* Search */
.search-page { max-width:800px; margin:0 auto; padding:3rem 2rem; }
.search-page h1 { text-align:center; color:var(--accent); margin-bottom:.5rem; }
.search-page .subtitle { text-align:center; margin-bottom:2rem; }
.search-form { display:flex; gap:.5rem; margin-bottom:1rem; }
.search-input { flex:1; background:var(--input); border:1px solid var(--border); color:var(--t1); padding:.8rem 1rem; border-radius:var(--r); font-family:var(--sans); font-size:1rem; outline:none; }
.search-input:focus { border-color:var(--accent); }
.search-input::placeholder { color:var(--t3); }
.btn { background:var(--accent); color:#0d0d0d; border:none; padding:.8rem 1.5rem; border-radius:var(--r); cursor:pointer; font-weight:600; font-family:var(--sans); font-size:.95rem; }
.btn:hover { background:var(--accent-h); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.search-answer { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:1.5rem; line-height:1.7; white-space:pre-wrap; }

/* Search filters */
.search-filters { display:flex; gap:.5rem; margin-bottom:1.5rem; justify-content:center; }
.filter-chip { background:var(--card); border:1px solid var(--border); color:var(--t2); padding:.4rem 1rem; border-radius:20px; cursor:pointer; font-family:var(--sans); font-size:.85rem; transition:all .2s; }
.filter-chip:hover { border-color:var(--accent); color:var(--t1); }
.filter-chip.active { background:var(--accent); color:#0d0d0d; border-color:var(--accent); font-weight:600; }
.search-status { text-align:center; color:var(--t2); font-family:var(--sans); font-size:.9rem; margin-bottom:1.5rem; }

/* Search results */
.search-results { display:flex; flex-direction:column; gap:1rem; }
.search-result-card { display:flex; gap:1rem; background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; transition:all .2s; text-decoration:none; color:var(--t1); }
.search-result-card:hover { border-color:var(--accent); background:var(--card-h); transform:translateY(-1px); color:var(--t1); }
.search-result-art { width:120px; min-height:100px; flex-shrink:0; }
.search-result-art img { width:100%; height:100%; object-fit:cover; }
.search-result-body { padding:1rem; flex:1; min-width:0; }
.search-result-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.search-score { font-family:var(--sans); font-size:.75rem; color:var(--accent); background:rgba(212,168,83,.1); padding:.2rem .6rem; border-radius:10px; }
.search-result-body h3 { font-size:1.1rem; margin-bottom:.2rem; }
.search-result-body .title-ru { font-size:.85rem; color:var(--t2); margin-bottom:.3rem; }
.search-result-body .summary { font-size:.85rem; color:var(--t2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Auth gate */
.auth-gate { text-align:center; padding:3rem 2rem; }
.auth-gate p { color:var(--t2); font-family:var(--sans); font-size:1rem; margin-bottom:1.5rem; }
.auth-gate .btn { display:inline-block; text-decoration:none; color:#0d0d0d!important; }

/* Share Button & Toast */
.btn-share { position:relative; }
.btn-share:hover { border-color:var(--accent); color:var(--accent); }
.share-toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:var(--accent); color:#0d0d0d; padding:.6rem 1.2rem; border-radius:var(--r); font-family:var(--sans); font-size:.9rem; font-weight:600; opacity:0; transition:all .3s ease; pointer-events:none; z-index:1000; }
.share-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* Story Artwork in Reader */
.story-artwork { margin:1.5rem 0 2.5rem; text-align:center; }
.story-illustration { max-width:100%; max-height:500px; border-radius:var(--rl); border:2px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,.4); }
.artwork-caption { color:var(--t3); font-family:var(--sans); font-size:.8rem; font-style:italic; margin-top:.5rem; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.gallery-card { display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; transition:all .2s; color:var(--t1)!important; }
.gallery-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.gallery-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.gallery-info { padding:1rem; position:relative; }
.gallery-info h3 { font-size:1rem; margin-bottom:.2rem; }
.gallery-info .title-ru { margin-bottom:0; }

/* Gallery tabs */
.gallery-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; justify-content:center; flex-wrap:wrap; }
.gallery-tab { background:var(--card); border:1px solid var(--border); color:var(--t2); padding:.5rem 1.2rem; border-radius:20px; cursor:pointer; font-family:var(--sans); font-size:.9rem; transition:all .2s; }
.gallery-tab:hover { border-color:var(--accent); color:var(--t1); }
.gallery-tab.active { background:var(--accent); color:#0d0d0d; border-color:var(--accent); font-weight:600; }

/* Gallery type badges */
.gallery-type-badge { display:inline-block; font-family:var(--sans); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.15rem .5rem; border-radius:4px; margin-bottom:.4rem; }
.original-badge { background:rgba(180,140,60,.2); color:#d4a853; border:1px solid rgba(180,140,60,.3); }
.ai-badge { background:rgba(100,140,200,.15); color:#7ba8d4; border:1px solid rgba(100,140,200,.2); }
.gallery-artist { font-family:var(--sans); font-size:.75rem; color:var(--t3); font-style:italic; margin-top:.3rem; }

/* Original artwork gallery card */
.gallery-original { border-color:rgba(180,140,60,.3); }
.gallery-original:hover { border-color:var(--accent); }
.gallery-original .gallery-img { aspect-ratio:auto; max-height:400px; object-fit:contain; background:#1a1710; padding:.5rem; }

/* Card placeholder for stories without artwork */
.card-placeholder { background:linear-gradient(135deg, #1a1710 0%, #2a2218 40%, #1e1a12 70%, #252015 100%); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.card-placeholder::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(212,168,83,.04) 10px, rgba(212,168,83,.04) 11px); }
.card-placeholder::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(212,168,83,.03) 10px, rgba(212,168,83,.03) 11px); }
.placeholder-pattern { position:relative; z-index:1; text-align:center; }
.placeholder-icon { font-family:var(--font); font-size:2.5rem; color:rgba(212,168,83,.15); font-weight:bold; }

/* Original artwork in reader */
.story-artwork-section { margin:1.5rem 0 2.5rem; }
.original-artwork { text-align:center; margin-bottom:1.5rem; position:relative; }
.original-illustration { max-width:100%; max-height:600px; border-radius:var(--rl); border:3px solid rgba(180,140,60,.4); box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(180,140,60,.15), inset 0 0 40px rgba(0,0,0,.1); background:#1a1710; padding:4px; }
.original-caption { color:var(--accent); font-family:var(--sans); font-size:.8rem; font-style:italic; margin-top:.5rem; }

/* Utils */
.loading,.empty,.error { text-align:center; padding:4rem 2rem; color:var(--t2); font-family:var(--sans); }
.empty h2 { color:var(--t1); margin-bottom:.5rem; }
.empty .btn { margin-top:1rem; }

/* Similar Tales (POS-262) */
.similar-section { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); }
.similar-section h2 { color:var(--accent); font-size:1.4rem; margin-bottom:1rem; }
.similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
.similar-card { display:block; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1rem; transition:all .2s; color:var(--t1)!important; }
.similar-card:hover { background:var(--card-h); border-color:var(--accent); transform:translateY(-2px); }
.similar-card h4 { font-size:1rem; margin-bottom:.2rem; }
.similar-card .summary { font-size:.8rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.loading-sm { color:var(--t3); font-family:var(--sans); font-size:.9rem; }

/* ── Narration Player (inline, minimal) ── */
.narration-player { display:inline-flex; align-items:center; gap:.4rem; }
.narration-player.active { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2px 8px 2px 2px; }

.narration-btn { width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; flex-shrink:0; }
.narration-btn:hover:not(:disabled) { border-color:var(--accent); background:var(--card-h); }
.narration-btn:disabled { opacity:.4; cursor:not-allowed; }
.narration-btn.playing { border-color:var(--accent); box-shadow:0 0 8px rgba(212,168,83,.35); animation:narrate-pulse 2s ease-in-out infinite; }
.narration-btn.error { color:var(--t3); border-color:var(--border); }

@keyframes narrate-pulse {
  0%, 100% { box-shadow:0 0 4px rgba(212,168,83,.2); }
  50% { box-shadow:0 0 12px rgba(212,168,83,.5); }
}

.narration-spinner {
  width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin-loader .6s linear infinite; display:block;
}
@keyframes spin-loader { to { transform:rotate(360deg); } }

.narration-track { display:flex; align-items:center; gap:.4rem; min-width:0; }

.narration-progress { width:80px; height:4px; background:var(--border); border-radius:2px; cursor:pointer; position:relative; overflow:hidden; }
.narration-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .1s linear; }

.narration-time { font-family:var(--sans); font-size:.7rem; color:var(--t3); white-space:nowrap; letter-spacing:.02em; min-width:60px; }

/* Characters Page (POS-261) */
.characters-layout { display:flex; gap:2rem; align-items:flex-start; }
.character-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; flex:1; }
.character-card { background:var(--card); border:1px solid var(--border); border-radius:var(--rl); padding:1.2rem; cursor:pointer; transition:all .2s; }
.character-card:hover { background:var(--card-h); border-color:var(--accent); }
.character-card.active { border-color:var(--accent); background:var(--card-h); box-shadow:0 0 0 1px var(--accent); }
.char-archetype { font-family:var(--sans); font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.4rem; }
.character-card h3 { font-size:1.1rem; margin-bottom:.2rem; }
.char-desc { color:var(--t2); font-size:.85rem; line-height:1.4; margin:.5rem 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.char-story-count { font-family:var(--sans); font-size:.75rem; color:var(--t3); margin-top:.5rem; }

.character-detail { position:sticky; top:80px; width:360px; min-width:360px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--rl); padding:1.5rem; max-height:calc(100vh - 100px); overflow-y:auto; }
.detail-header { margin-bottom:1rem; }
.detail-header h2 { color:var(--accent); font-size:1.5rem; margin-bottom:.2rem; }
.detail-archetype { font-family:var(--sans); font-size:.8rem; color:var(--t3); background:var(--card); padding:.2rem .6rem; border-radius:var(--r); display:inline-block; margin-top:.3rem; }
.detail-desc { color:var(--t2); line-height:1.6; margin-bottom:1.2rem; font-size:.95rem; }
.character-detail h3 { font-family:var(--sans); font-size:.9rem; color:var(--t1); margin-bottom:.8rem; }
.detail-stories { display:flex; flex-direction:column; gap:.5rem; }
.detail-story-link { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:.8rem; color:var(--t1)!important; transition:all .2s; }
.detail-story-link:hover { border-color:var(--accent); background:var(--card-h); }
.story-role { font-family:var(--sans); font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.2rem; }
.empty-sm { color:var(--t3); font-style:italic; font-size:.9rem; }

/* ── Character Portraits & Modal ── */
.char-grid-portraits { grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem; }
.char-card-portrait { display:flex; flex-direction:column; overflow:hidden; padding:0; cursor:pointer; }
.char-portrait-wrap { width:100%; aspect-ratio:1/1; overflow:hidden; }
.char-portrait-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease, filter .3s ease; }
.char-card-portrait:hover .char-portrait-img { transform:scale(1.08); filter:brightness(1.1); }
.char-portrait-placeholder { width:100%; aspect-ratio:1/1; background:linear-gradient(135deg, #1a1508, #2a1f10); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.char-initial { font-size:4rem; color:var(--accent); font-family:Georgia, serif; font-weight:bold; text-shadow:0 2px 12px rgba(212,168,83,.3); }
.char-card-info { padding:1rem; }

/* Character Modal (slide-in from right) */
.char-modal-overlay { position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.char-modal-overlay.open { opacity:1; pointer-events:auto; }
.char-modal { position:absolute; right:0; top:0; bottom:0; width:min(520px, 90vw); background:var(--bg2); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; display:flex; flex-direction:column; }
.char-modal.open { transform:translateX(0); }
.char-modal-close { position:absolute; top:1rem; right:1rem; z-index:310; background:rgba(30,30,30,.8); border:1px solid var(--border); border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t2); transition:all .2s; }
.char-modal-close:hover { color:var(--accent); border-color:var(--accent); }
.char-modal-portrait { width:100%; max-height:400px; overflow:hidden; }
.char-modal-portrait img { width:100%; height:100%; object-fit:cover; display:block; }
.char-modal-portrait-placeholder { width:100%; height:300px; background:linear-gradient(135deg, #1a1508, #2a1f10); display:flex; align-items:center; justify-content:center; }
.char-initial-lg { font-size:8rem; color:var(--accent); font-family:Georgia, serif; font-weight:bold; text-shadow:0 4px 20px rgba(212,168,83,.3); }
.char-modal-body { padding:1.5rem; flex:1; }
.char-modal-body h2 { color:var(--accent); font-size:1.8rem; margin-bottom:.2rem; }
.char-modal-body h3 { font-family:var(--sans); font-size:.9rem; color:var(--t1); margin:1.2rem 0 .8rem; }

/* Bookmark remove button */
.bookmark-remove { background:transparent !important; border-color:transparent !important; }
.bookmark-remove:hover { color:var(--accent) !important; }

/* Gallery hover transitions */
.gallery-img { transition:transform .5s ease; }
.gallery-card:hover .gallery-img { transform:scale(1.05); }

/* POS-213: No translation fallback */
.no-translation { text-align:center; color:var(--t3); font-style:italic; font-family:var(--sans); font-size:.9rem; padding:1rem; background:var(--bg2); border-radius:var(--r); border:1px dashed var(--border); margin-top:1rem; }

/* POS-212: Brooke's Library */
.brooke-logo { color:var(--accent)!important; }

/* POS-212: Bedtime Mode */
.bedtime-toggle { font-size:1rem; line-height:1; padding:.3rem .5rem; }
body.bedtime-mode { --bg:#120e08; --bg2:#1a1408; --card:#211a0e; --card-h:#2a2012; --accent:#e8a832; --accent-h:#f0b840; --t1:#f5ead8; --t2:#bfaa8a; --border:#2d2518; }
body.bedtime-mode .story-text p { font-size:1.3rem; line-height:1.9; }
body.bedtime-mode article h1 { font-size:2.3rem; }

.story-end-marker { text-align:center; padding:2rem; margin-top:2rem; }
.bedtime-next { color:var(--t3); font-family:var(--sans); font-size:.9rem; font-style:italic; animation:pulse-soft 2s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100%{opacity:.5} 50%{opacity:1} }

/* POS-212: Random Tale */
.random-tale-btn { margin-top:1rem; display:inline-flex; align-items:center; gap:.4rem; }
.random-tale-btn.spinning .random-icon { display:inline-block; animation:spin-firebird .3s linear infinite; }
@keyframes spin-firebird { from{transform:rotate(0)} to{transform:rotate(360deg)} }

.random-pick-card { text-align:center; margin-bottom:2rem; animation:fade-in .5s ease; }
.random-pick-label { font-family:var(--sans); color:var(--accent); font-size:.9rem; margin-bottom:.5rem; font-style:italic; }
.story-card.featured { border-color:var(--accent); background:var(--card-h); display:inline-block; min-width:300px; animation:glow-pulse 1.5s ease-in-out; }
@keyframes glow-pulse { 0%{box-shadow:0 0 0 rgba(212,168,83,0)} 50%{box-shadow:0 0 30px rgba(212,168,83,.3)} 100%{box-shadow:0 0 0 rgba(212,168,83,0)} }
@keyframes fade-in { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* POS-212: Firebird Animation (Konami Code) */
.firebird-overlay { position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
.firebird-sprite { position:absolute; font-size:4rem; animation:fly-across 3s ease-in-out forwards; filter:drop-shadow(0 0 20px rgba(255,160,0,.6)); }
@keyframes fly-across {
  0% { left:-10%; top:60%; transform:rotate(-20deg) scale(1); }
  25% { left:25%; top:30%; transform:rotate(-10deg) scale(1.3); }
  50% { left:50%; top:20%; transform:rotate(0deg) scale(1.5); }
  75% { left:75%; top:35%; transform:rotate(10deg) scale(1.3); }
  100% { left:110%; top:15%; transform:rotate(20deg) scale(1); }
}
.sparkle-field { position:absolute; inset:0; }
.sparkle { position:absolute; animation:sparkle-float 2s ease-in-out infinite; opacity:0; }
@keyframes sparkle-float {
  0% { opacity:0; transform:translateY(0) scale(0); }
  25% { opacity:1; transform:translateY(-20px) scale(1); }
  75% { opacity:1; transform:translateY(-40px) scale(1.2); }
  100% { opacity:0; transform:translateY(-60px) scale(0); }
}

/* Hamburger Menu */
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px; z-index:102; }
.hamburger-line { display:block; width:24px; height:2px; background:var(--accent); border-radius:2px; transition:all .3s ease; }
.hamburger-line.open:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger-line.open:nth-child(2) { opacity:0; }
.hamburger-line.open:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Full-screen mobile overlay menu */
.mobile-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.7); opacity:0; transition:opacity .2s ease; pointer-events:none; }
.mobile-overlay.open { opacity:1; pointer-events:auto; }
.mobile-overlay-menu { position:absolute; right:0; top:0; bottom:0; width:min(320px, 85vw); background:var(--bg2); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .25s ease; }
.mobile-overlay-menu.open { transform:translateX(0); }
.mobile-overlay-header { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); }
.mobile-overlay-title { font-family:var(--sans); font-size:1rem; color:var(--t2); font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.mobile-close-btn { background:none; border:none; color:var(--accent); cursor:pointer; padding:4px; display:flex; align-items:center; justify-content:center; }
.mobile-overlay-links { flex:1; display:flex; flex-direction:column; padding:1rem 0; overflow-y:auto; }
.mobile-overlay-link { display:flex; align-items:center; padding:1rem 1.5rem; color:var(--t1)!important; font-family:var(--sans); font-size:1.1rem; min-height:48px; transition:background .15s, color .15s; border-left:3px solid transparent; }
.mobile-overlay-link:hover, .mobile-overlay-link:active { background:var(--card); border-left-color:var(--accent); color:var(--accent)!important; }
.mobile-overlay-footer { padding:1.2rem 1.5rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.8rem; }
.mobile-bedtime-btn { background:var(--card); border:1px solid var(--border); color:var(--t2); padding:.6rem 1rem; border-radius:var(--r); cursor:pointer; font-family:var(--sans); font-size:.95rem; text-align:center; transition:all .2s; }
.mobile-bedtime-btn.active { border-color:var(--accent); color:var(--accent); }
.mobile-overlay-user { display:flex; justify-content:space-between; align-items:center; font-family:var(--sans); font-size:.9rem; color:var(--t2); }
.mobile-logout { color:var(--accent)!important; font-size:.9rem; }
.mobile-signin-btn { display:block; background:var(--accent); color:#0d0d0d!important; text-align:center; padding:.7rem 1rem; border-radius:var(--r); font-family:var(--sans); font-weight:600; font-size:1rem; }

/* Library toolbar */
.library-stats { font-family:var(--sans); font-size:.9rem; color:var(--t3); margin-top:.3rem; }
.library-toolbar { display:flex; gap:.8rem; margin-bottom:1.5rem; align-items:center; flex-wrap:wrap; }
.library-search { flex:1; min-width:200px; background:var(--input); border:1px solid var(--border); color:var(--t1); padding:.65rem 1rem; border-radius:var(--r); font-family:var(--sans); font-size:.95rem; outline:none; }
.library-search:focus { border-color:var(--accent); }
.library-search::placeholder { color:var(--t3); }
.library-sort { display:flex; gap:2px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2px; }
.sort-btn { background:none; border:none; color:var(--t3); padding:.45rem .7rem; border-radius:6px; cursor:pointer; font-family:var(--sans); font-size:.8rem; font-weight:600; transition:all .15s; }
.sort-btn:hover { color:var(--t1); }
.sort-btn.active { background:var(--accent); color:#0d0d0d; }
.filter-count { font-family:var(--sans); font-size:.85rem; color:var(--t3); margin-bottom:1rem; }

/* ── Storybook / Picture Book Mode ── */
.storybook-overlay {
  position:fixed; inset:0; z-index:500; background:#0a0a0a;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.storybook-exit {
  position:absolute; top:1rem; right:1rem; z-index:510;
  background:rgba(30,30,30,.8); border:1px solid var(--border); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:all .2s;
}
.storybook-exit:hover { color:var(--accent); border-color:var(--accent); }

.storybook-loading {
  text-align:center; color:var(--t2); font-family:var(--sans);
}
.storybook-loading-icon { font-size:4rem; margin-bottom:1rem; animation:pulse-soft 2s ease-in-out infinite; }
.storybook-loading p { font-size:1.1rem; margin-bottom:1.5rem; }
.storybook-progress-bar { width:200px; height:4px; background:var(--border); border-radius:2px; margin:0 auto; overflow:hidden; }
.storybook-progress-fill { width:30%; height:100%; background:var(--accent); border-radius:2px; animation:progress-indeterminate 1.5s ease-in-out infinite; }
@keyframes progress-indeterminate {
  0% { transform:translateX(-100%); width:30%; }
  50% { width:60%; }
  100% { transform:translateX(400%); width:30%; }
}

.storybook-container {
  flex:1; display:flex; align-items:center; justify-content:center;
  width:100%; max-width:700px; padding:1rem; cursor:default; position:relative;
  perspective:1200px;
}

.storybook-book {
  width:100%; max-height:calc(100vh - 100px); aspect-ratio:3/4;
  position:relative; transition:transform .15s ease-out;
}

.sb-page-wrapper {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d;
  transition:transform .4s ease, opacity .4s ease;
}
.sb-page-wrapper.turn-next {
  animation:page-turn-next .4s ease forwards;
}
.sb-page-wrapper.turn-prev {
  animation:page-turn-prev .4s ease forwards;
}
@keyframes page-turn-next {
  0% { transform:rotateY(0); opacity:1; }
  40% { transform:rotateY(-30deg); opacity:.8; }
  100% { transform:rotateY(0); opacity:1; }
}
@keyframes page-turn-prev {
  0% { transform:rotateY(0); opacity:1; }
  40% { transform:rotateY(30deg); opacity:.8; }
  100% { transform:rotateY(0); opacity:1; }
}

/* Page base */
.sb-page {
  width:100%; height:100%; border-radius:4px; overflow:hidden; position:relative;
  background:linear-gradient(135deg, #f5ead0 0%, #ede0c8 30%, #e8d8b8 60%, #f0e4cc 100%);
  box-shadow:0 4px 24px rgba(0,0,0,.5), inset 0 0 60px rgba(139,119,80,.1);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#2a1f0e;
}

/* Gold ornamental corners */
.sb-ornament-tl, .sb-ornament-tr, .sb-ornament-bl, .sb-ornament-br {
  position:absolute; width:40px; height:40px; z-index:2; pointer-events:none;
}
.sb-ornament-tl { top:8px; left:8px; border-top:2px solid #c4a24e; border-left:2px solid #c4a24e; border-radius:4px 0 0 0; }
.sb-ornament-tr { top:8px; right:8px; border-top:2px solid #c4a24e; border-right:2px solid #c4a24e; border-radius:0 4px 0 0; }
.sb-ornament-bl { bottom:8px; left:8px; border-bottom:2px solid #c4a24e; border-left:2px solid #c4a24e; border-radius:0 0 0 4px; }
.sb-ornament-br { bottom:8px; right:8px; border-bottom:2px solid #c4a24e; border-right:2px solid #c4a24e; border-radius:0 0 4px 0; }

/* Title page */
.sb-title-page { padding:2rem; text-align:center; gap:1rem; }
.sb-title-img { max-width:60%; max-height:40%; object-fit:contain; border-radius:8px; border:2px solid #c4a24e; box-shadow:0 4px 16px rgba(0,0,0,.2); }
.sb-title { font-family:Georgia, serif; font-size:clamp(1.4rem, 4vw, 2.2rem); color:#5a3a10; line-height:1.2; margin:0 1rem; }
.sb-title-sub { font-style:italic; color:#8a7050; font-size:clamp(.9rem, 2.5vw, 1.1rem); }
.sb-title-line { width:80px; height:2px; background:linear-gradient(90deg, transparent, #c4a24e, transparent); }
.sb-title-from { font-family:var(--sans); font-size:.75rem; color:#a08a6a; letter-spacing:.05em; }

/* Text page */
.sb-text-page { padding:2.5rem 2rem; }
.sb-text-content { width:100%; max-width:520px; overflow-y:auto; max-height:calc(100% - 2rem); }
.sb-text-content p {
  font-family:Georgia, serif; font-size:clamp(1rem, 2.5vw, 1.3rem); line-height:2;
  color:#2a1f0e; margin-bottom:1.2rem; text-indent:1.5em; text-align:justify;
}
.sb-text-content p:first-child { text-indent:0; }
.sb-text-content p.sb-drop-cap::first-letter {
  font-size:3.5em; float:left; line-height:.75; padding-right:.08em;
  color:#8a5a10; font-weight:bold;
  text-shadow:1px 1px 0 #c4a24e;
}

/* Illustration page */
.sb-illust-page { padding:1.5rem; }
.sb-scene-img {
  max-width:calc(100% - 2rem); max-height:calc(100% - 2rem); object-fit:contain;
  border-radius:6px; border:2px solid #c4a24e;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}

/* End page */
.sb-end-page { text-align:center; }
.sb-end-content { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.sb-end-text { font-family:Georgia, serif; font-size:clamp(2rem, 5vw, 3rem); color:#5a3a10; }
.sb-end-ru { font-style:italic; font-size:clamp(1.2rem, 3vw, 1.8rem); color:#8a7050; }
.sb-end-ornament { color:#c4a24e; font-size:1.5rem; letter-spacing:.5rem; }

/* Navigation hints */
.sb-nav-hint {
  position:absolute; top:50%; transform:translateY(-50%);
  color:rgba(200,180,140,.3); transition:color .2s; pointer-events:none;
}
.sb-nav-left { left:.5rem; }
.sb-nav-right { right:.5rem; }
.storybook-container:hover .sb-nav-hint { color:rgba(200,180,140,.7); }

/* Footer progress */
.storybook-footer {
  padding:.5rem 2rem 1rem; width:100%; max-width:700px;
  display:flex; align-items:center; gap:1rem;
}
.sb-progress-bar { flex:1; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.sb-progress-fill { height:100%; background:var(--accent); border-radius:2px; transition:width .4s ease; }
.sb-page-num { font-family:var(--sans); font-size:.75rem; color:var(--t3); white-space:nowrap; }

/* Desktop wide: two-page spread */
@media (min-width:1100px) {
  .storybook-container { max-width:900px; }
  .storybook-book { aspect-ratio:4/3; }
}

/* Responsive — tablet */
@media(max-width:1024px) and (min-width:769px) {
  .story-grid { grid-template-columns:repeat(2, 1fr); gap:1.2rem; }
}

/* Responsive — mobile */
@media(max-width:768px) {
  .header { padding:.8rem 1rem; }
  .nav-desktop { display:none !important; }
  .hamburger { display:flex; }
  .mobile-overlay { display:block; }
  .library { padding:1rem; }
  .library-header h1 { font-size:1.8rem; }
  .story-grid { grid-template-columns:1fr; gap:1rem; }
  .story-card .card-body { padding:1rem; }
  .story-card .summary { font-size:.85rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .card-artwork { height:160px; }
  .reader { flex-direction:column; }
  .reader.with-panel .reader-content { max-width:100%; }
  .reader-content { padding:1rem; }
  .reader-header { flex-wrap:wrap; gap:.5rem; }
  .reader-controls { flex-wrap:wrap; gap:.4rem; }
  .ai-panel { width:100%; height:auto; position:static; border-left:none; border-top:1px solid var(--border); }
  .search-form { flex-direction:column; }
  .characters-layout { flex-direction:column; }
  .character-detail { position:static; width:100%; min-width:0; max-height:none; }
  .char-grid-portraits { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem; }
  .char-modal { width:100%; }
  .char-modal-portrait { max-height:280px; }
  .character-grid { grid-template-columns:1fr 1fr; }
  .similar-grid { grid-template-columns:1fr; }
  .narration-progress { width:60px; }
  .library-toolbar { flex-direction:column; }
  .library-search { min-width:0; width:100%; }
  /* Storybook mobile */
  .storybook-container { padding:.5rem; }
  .storybook-book { max-height:calc(100vh - 80px); }
  .sb-page { border-radius:2px; }
  .sb-title-page { padding:1.5rem 1rem; }
  .sb-title-img { max-width:75%; }
  .sb-text-page { padding:1.5rem 1.2rem; }
  .sb-text-content p { font-size:1rem; line-height:1.8; }
  .sb-ornament-tl, .sb-ornament-tr, .sb-ornament-bl, .sb-ornament-br { width:24px; height:24px; }
  .sb-nav-hint { display:none; }
  .storybook-footer { padding:.3rem 1rem .8rem; }
  .bookmark-drawer { width:100%!important; }
}

/* ═══════════════════════════════════════════════════
   VISUAL BOOKMARK SYSTEM
   ═══════════════════════════════════════════════════ */

/* ── Bookmark Drawer ── */
.bookmark-drawer-overlay {
  position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.bookmark-drawer-overlay.open { opacity:1; pointer-events:auto; }
.bookmark-drawer {
  position:absolute; right:0; top:0; bottom:0; width:min(360px, 90vw);
  background:linear-gradient(180deg, #1a1710 0%, #141210 100%);
  border-left:1px solid rgba(212,168,83,.2);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.bookmark-drawer-overlay.open .bookmark-drawer { transform:translateX(0); }

.bkd-header {
  padding:1.2rem 1.5rem; border-bottom:1px solid rgba(212,168,83,.15);
  display:flex; justify-content:space-between; align-items:center;
}
.bkd-title {
  font-family:Georgia,'Times New Roman',serif; font-size:1.2rem;
  color:#d4a853; text-shadow:0 1px 4px rgba(212,168,83,.3);
}
.bkd-close {
  background:none; border:1px solid var(--border); border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--t2); transition:all .2s;
}
.bkd-close:hover { color:#d4a853; border-color:#d4a853; }

.bkd-list { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:1rem; }

.bkd-empty {
  text-align:center; color:var(--t3); font-family:var(--sans); font-size:.9rem;
  padding:3rem 1.5rem; line-height:1.6;
}
.bkd-empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.3; }

/* Individual bookmark card in drawer */
.bkd-card {
  display:flex; gap:.8rem; background:rgba(30,28,24,.6); border:1px solid rgba(212,168,83,.1);
  border-radius:8px; padding:.8rem; transition:all .2s; cursor:pointer; text-decoration:none; color:var(--t1);
  position:relative;
}
.bkd-card:hover { border-color:rgba(212,168,83,.3); background:rgba(40,36,28,.8); }

.bkd-card-info { flex:1; min-width:0; }
.bkd-card-title { font-size:.95rem; font-weight:600; margin-bottom:.2rem; }
.bkd-card-date { font-family:var(--sans); font-size:.75rem; color:var(--t3); }
.bkd-card-remove {
  position:absolute; top:.5rem; right:.5rem; background:none; border:none;
  color:var(--t3); cursor:pointer; padding:2px; opacity:0; transition:opacity .2s;
}
.bkd-card:hover .bkd-card-remove { opacity:1; }
.bkd-card-remove:hover { color:#d4a853; }

/* ── Style Picker section ── */
.bkd-style-section {
  border-top:1px solid rgba(212,168,83,.15); padding:1rem 1.5rem 1.5rem;
}
.bkd-style-title {
  font-family:var(--sans); font-size:.8rem; color:var(--t3);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem;
}
.bkd-style-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem;
}
.bkd-style-option {
  background:rgba(30,28,24,.6); border:2px solid transparent; border-radius:8px;
  padding:.6rem; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:.3rem; transition:all .2s;
}
.bkd-style-option:hover { border-color:rgba(212,168,83,.3); }
.bkd-style-option.selected { border-color:#d4a853; background:rgba(212,168,83,.08); }
.bkd-style-label { font-family:var(--sans); font-size:.65rem; color:var(--t3); text-align:center; }

/* ── Visual Bookmark Base ── */
.vbm {
  width:40px; height:120px; position:relative; flex-shrink:0;
  border-radius:3px 3px 0 0; overflow:visible;
  box-shadow:2px 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .2s;
}
.vbm::after {
  content:''; position:absolute; bottom:-12px; left:0; right:0;
  height:12px; clip-path:polygon(0 0, 50% 100%, 100% 0);
}

/* Mini bookmark for style picker */
.vbm-mini { width:28px; height:72px; border-radius:2px 2px 0 0; }
.vbm-mini::after { height:8px; bottom:-8px; }

/* Bookmark text (vertical) */
.vbm-text {
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:Georgia,serif; font-size:.5rem; color:rgba(255,255,255,.6);
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-height:80px;
  letter-spacing:.03em; text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.vbm-mini .vbm-text { font-size:.4rem; top:5px; max-height:48px; }

/* ── 1. Classic Gold ── */
.vbm-classic-gold {
  background:linear-gradient(180deg, #c9a84c 0%, #d4a853 20%, #b8932e 80%, #a07d20 100%);
  border:1px solid rgba(255,220,120,.3);
  box-shadow:2px 3px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,240,180,.4), inset 0 -1px 0 rgba(0,0,0,.2), inset 2px 0 0 rgba(255,220,120,.15), inset -2px 0 0 rgba(255,220,120,.15);
}
.vbm-classic-gold::before {
  content:''; position:absolute; inset:4px; border:1px solid rgba(255,220,120,.25);
  border-radius:2px; pointer-events:none;
}
.vbm-classic-gold::after { background:linear-gradient(180deg, #c9a84c, #a07d20); }
.vbm-classic-gold .vbm-text { color:rgba(80,50,10,.7); text-shadow:0 1px 0 rgba(255,220,120,.4); }

/* ── 2. Emerald & Gold ── */
.vbm-emerald-gold {
  background:linear-gradient(180deg, #1a5c3a 0%, #1e6b44 30%, #165230 70%, #0f3d22 100%);
  border:1px solid rgba(212,168,83,.3);
  box-shadow:2px 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(100,200,140,.15), inset 2px 0 0 rgba(212,168,83,.2), inset -2px 0 0 rgba(212,168,83,.2);
}
.vbm-emerald-gold::before {
  content:''; position:absolute; inset:3px; border:1px solid rgba(212,168,83,.35);
  border-radius:2px; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(212,168,83,.06) 8px, rgba(212,168,83,.06) 9px);
}
.vbm-emerald-gold::after { background:linear-gradient(180deg, #1a5c3a, #0f3d22); }
.vbm-emerald-gold .vbm-text { color:rgba(212,168,83,.7); }

/* ── 3. Firebird Feather ── */
.vbm-firebird {
  background:linear-gradient(180deg, #d4a853 0%, #e8842e 35%, #d4432e 65%, #a02020 100%);
  border:1px solid rgba(255,200,100,.3);
  clip-path:polygon(15% 0%, 85% 0%, 95% 15%, 100% 40%, 90% 70%, 75% 90%, 50% 100%, 25% 90%, 10% 70%, 0% 40%, 5% 15%);
  box-shadow:2px 3px 10px rgba(200,80,20,.4);
  overflow:hidden;
}
.vbm-firebird::before {
  content:''; position:absolute; left:48%; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(255,220,100,.5), rgba(255,100,50,.3), transparent);
  pointer-events:none;
}
.vbm-firebird::after { display:none; }
.vbm-firebird .vbm-text { color:rgba(255,255,255,.7); text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* ── 4. Slavic Ornament ── */
.vbm-slavic {
  background:linear-gradient(180deg, #f5ead0 0%, #ede0c8 50%, #e8d8b8 100%);
  border:1px solid rgba(180,50,50,.2);
  box-shadow:2px 3px 8px rgba(0,0,0,.3), inset 0 0 0 3px #f5ead0, inset 0 0 0 5px rgba(180,50,50,.3);
}
.vbm-slavic::before {
  content:''; position:absolute; inset:6px 6px 20px; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 6px, rgba(180,50,50,.15) 6px, rgba(180,50,50,.15) 7px),
    repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(212,168,83,.15) 6px, rgba(212,168,83,.15) 7px);
}
.vbm-slavic::after { background:linear-gradient(180deg, #f5ead0, #e8d8b8); }
.vbm-slavic .vbm-text { color:rgba(120,40,40,.6); text-shadow:none; }

/* ── 5. Night Forest ── */
.vbm-night-forest {
  background:linear-gradient(180deg, #0a0e1a 0%, #101830 40%, #0d1220 70%, #080c18 100%);
  border:1px solid rgba(150,180,220,.15);
  box-shadow:2px 3px 8px rgba(0,0,0,.6), inset 0 0 20px rgba(80,120,200,.05);
  overflow:hidden;
}
.vbm-night-forest::before {
  content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #e8e4d8 0%, #c8c0a8 40%, transparent 70%);
  box-shadow:0 0 8px rgba(232,228,216,.3),
    -8px 14px 0 1px rgba(200,200,180,.4), 6px 20px 0 0 rgba(200,200,180,.3),
    -4px 28px 0 0 rgba(200,200,180,.25), 10px 10px 0 0 rgba(200,200,180,.2),
    -12px 22px 0 0 rgba(200,200,180,.15), 2px 34px 0 0 rgba(200,200,180,.2);
}
.vbm-night-forest::after { background:linear-gradient(180deg, #0a0e1a, #060810); }
.vbm-night-forest .vbm-text { color:rgba(180,200,240,.5); }

/* Tree silhouettes at bottom of night forest */
.vbm-night-forest .vbm-trees {
  position:absolute; bottom:0; left:0; right:0; height:30px; pointer-events:none;
  background:
    linear-gradient(135deg, transparent 40%, #0a1210 40%, #0a1210 42%, transparent 42%),
    linear-gradient(225deg, transparent 40%, #0a1210 40%, #0a1210 42%, transparent 42%),
    linear-gradient(165deg, transparent 35%, #081210 35%, #081210 38%, transparent 38%),
    linear-gradient(195deg, transparent 35%, #081210 35%, #081210 38%, transparent 38%);
  background-size:16px 30px, 16px 30px, 12px 24px, 12px 24px;
  background-position:4px bottom, 4px bottom, 20px bottom, 20px bottom;
  background-repeat:no-repeat;
}

/* ── 6. Royal Crest ── */
.vbm-royal-crest {
  background:linear-gradient(180deg, #5a1020 0%, #6b1828 30%, #4a0c18 70%, #3a0810 100%);
  border:1px solid rgba(212,168,83,.3);
  box-shadow:2px 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,180,180,.1), inset 0 0 0 2px rgba(212,168,83,.15);
}
.vbm-royal-crest::before {
  content:'♛'; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  font-size:14px; color:rgba(212,168,83,.5); text-shadow:0 1px 3px rgba(0,0,0,.5);
  pointer-events:none;
}
.vbm-royal-crest::after {
  background:linear-gradient(180deg, #5a1020, #3a0810);
  clip-path:polygon(0 0, 20% 70%, 35% 40%, 50% 100%, 65% 40%, 80% 70%, 100% 0);
  height:16px; bottom:-16px;
}
.vbm-royal-crest .vbm-text { color:rgba(212,168,83,.6); top:28px; }
.vbm-mini.vbm-royal-crest .vbm-text { top:18px; }
.vbm-mini.vbm-royal-crest::before { font-size:10px; top:4px; }
.vbm-mini.vbm-royal-crest::after { height:10px; bottom:-10px; }

/* ── Reader Ribbon (top-right of reader) ── */
.reader-ribbon-wrap {
  position:fixed; top:56px; right:24px; z-index:150; cursor:pointer;
  transition:transform .3s ease;
}
.reader-ribbon-wrap:hover { transform:scale(1.05); }

.reader-ribbon {
  width:36px; height:0; overflow:visible; position:relative;
  transition:height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,.5));
}
.reader-ribbon.active { height:90px; }
.reader-ribbon.inactive { height:28px; opacity:.5; }
.reader-ribbon.inactive:hover { opacity:.8; }

.reader-ribbon .vbm {
  width:36px; height:100%; border-radius:0;
  box-shadow:none; transition:height .4s;
}
.reader-ribbon .vbm::after { display:none; }
.reader-ribbon-notch {
  position:absolute; bottom:-10px; left:0; right:0; height:10px;
}

/* Sway animation for active bookmark ribbon */
@keyframes ribbon-sway {
  0%, 100% { transform:rotate(0deg); }
  25% { transform:rotate(.5deg); }
  75% { transform:rotate(-.5deg); }
}
.reader-ribbon.active { animation:ribbon-sway 4s ease-in-out infinite; transform-origin:top center; }
.reader-ribbon.active:hover { animation:none; }

/* ── Library Card Bookmark Indicator ── */
.card-bookmark-ribbon {
  position:absolute; top:0; right:12px; width:24px; height:40px; z-index:5;
  filter:drop-shadow(1px 2px 4px rgba(0,0,0,.4));
  transition:transform .2s;
}
.story-card:hover .card-bookmark-ribbon { transform:translateY(-2px); }
.card-bookmark-ribbon .vbm {
  width:24px; height:40px; border-radius:0;
  box-shadow:none;
}
.card-bookmark-ribbon .vbm::before { display:none; }
.card-bookmark-ribbon .vbm::after {
  height:8px; bottom:-8px;
}
.card-bookmark-ribbon .vbm-text { display:none; }

/* Story card needs relative positioning for ribbon */
.story-card { position:relative; }

/* PWA Install Banner */
.pwa-banner { position:fixed; bottom:0; left:0; right:0; z-index:1000; padding:1rem; background:linear-gradient(180deg, transparent, rgba(0,0,0,.3)); pointer-events:none; animation:pwa-slide-up .4s ease; }
.pwa-banner-content { pointer-events:all; max-width:500px; margin:0 auto; background:var(--bg2); border:1px solid var(--accent); border-radius:var(--rl); padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem; box-shadow:0 -4px 24px rgba(0,0,0,.5); }
.pwa-banner-icon { font-size:2rem; flex-shrink:0; }
.pwa-banner-text { flex:1; font-family:var(--sans); }
.pwa-banner-text strong { display:block; color:var(--t1); font-size:1rem; margin-bottom:.15rem; }
.pwa-banner-text span { color:var(--t2); font-size:.85rem; }
.pwa-banner-install { background:var(--accent); color:#0d0d0d; border:none; padding:.6rem 1.2rem; border-radius:var(--r); font-weight:700; font-family:var(--sans); font-size:.9rem; cursor:pointer; flex-shrink:0; }
.pwa-banner-install:hover { background:var(--accent-h); }
.pwa-banner-close { background:none; border:none; color:var(--t3); font-size:1.2rem; cursor:pointer; padding:.3rem; flex-shrink:0; }
@keyframes pwa-slide-up { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Mobile bookmark ribbon fix */
@media(max-width:768px) {
  .reader-ribbon-wrap { top:48px; right:12px; }
  .reader-ribbon .vbm { width:28px; }
  .reader-ribbon.active { height:60px; }
  .reader-ribbon.inactive { height:20px; }
  .reader-ribbon .vbm-text { font-size:.35rem; max-height:40px; }
}