/* ============================================================ LORE MAP — GRIMOIRE TREATMENT (layered on top of style.css) ------------------------------------------------------------ Adds: - Leather frame surface around .map-frame - Single subtle spine binding line on left - Floating .lore-toolbar overlay (.lore-tb-*) - Theme tokens (--lore-*) on body.lore-theme-grimoire-dark/light 2026-05-10 cleanup: - Decorative striped page-edges DELETED (read as red/ember ridges) - Corner Enochian sigil ornaments DELETED Does NOT touch: - Map widget interaction (pan, zoom, click) - Zone overlay logic - Original .map-frame layout flow ============================================================ */ /* ---------- Theme tokens ---------- PALETTE DECISION 2026-05-10: drop the mahogany/cordovan wine-tilt — it reads as burgundy ("looks awful" — owner). Unified gold design across Codex / Lore Map / Timeline: warm obsidian leather (#1f1612 → #15100c) on dark, deep umber (#3a2818 → #2a1810) on light parchment. Gold + ember accents now carry the eye unopposed. Avoid wine-reds entirely. */ body.lore-theme-grimoire-dark { --lore-bg: #0a0806; --lore-leather: #1f1612; --lore-leather-mid: #15100c; --lore-spine-seam: rgba(0, 0, 0, .85); --lore-ember: #ff7a4a; --lore-ember-dim: rgba(255, 122, 74, .22); --lore-ember-faint: rgba(255, 122, 74, .12); --lore-gold: #d4a44a; --lore-gold-bright: #e8c870; --lore-gold-dim: rgba(212, 164, 74, .35); --lore-text: #e8dcc4; --lore-text-dim: #b6a382; --lore-text-mute: #7a6a52; --lore-edge-light: #d6a44a; --lore-edge-dark: #3a2818; --lore-tb-bg: linear-gradient(180deg, rgba(20, 16, 28, .92), rgba(7, 5, 10, .96)); --lore-tb-border: rgba(248, 233, 184, .22); --lore-tb-text: #e8dcc4; --lore-tb-text-hover: #ffffff; --lore-tb-bracket: #f4d27a; --lore-glyph: rgba(212, 164, 74, .32); } body.lore-theme-grimoire-light { --lore-bg: #f5e8c2; --lore-leather: #3a2818; --lore-leather-mid: #2a1810; --lore-spine-seam: rgba(20, 8, 0, .55); --lore-ember: #b53020; --lore-ember-dim: rgba(181, 48, 32, .32); --lore-ember-faint: rgba(181, 48, 32, .14); --lore-gold: #8a5e1a; --lore-gold-bright: #6b1a1a; --lore-gold-dim: rgba(107, 26, 26, .35); --lore-text: #2a1f12; --lore-text-dim: #5a3a2a; --lore-text-mute: #8a6a3a; --lore-edge-light: #d6b078; --lore-edge-dark: #5a3e22; --lore-tb-bg: linear-gradient(180deg, rgba(255, 246, 219, .92), rgba(245, 232, 200, .96)); --lore-tb-border: rgba(74, 32, 14, .35); --lore-tb-text: #4a200e; --lore-tb-text-hover: #1f0a02; --lore-tb-bracket: #8a2418; --lore-glyph: rgba(107, 26, 26, .32); } /* ---------- Body backdrop swap (light theme) ---------- */ body.lore-theme-grimoire-light { background: radial-gradient(ellipse at top, #fff5d6 0%, #e8d8b0 50%, #c9a876 100%); } body.lore-theme-grimoire-light #starfield { /* Issue 3 (2026-05-10): light-theme ink-spatter dots DELETED. They read as bottom-left/right artifacts (small dots floating around the legend area) per UAT. The parchment body radial-gradient is enough atmosphere on its own — kill #starfield in light mode. */ display: none; } /* ============================================================ LEATHER FRAME CHROME (.lore-frame*) Layered on top of the existing .map-frame. Page edges + spine are absolutely positioned children that decorate the frame without changing its layout. ============================================================ */ /* Override the original frame palette using lore tokens. The frame itself stays as the load-bearing layout container — we just restyle its surface. */ body.lore-theme-grimoire-dark .map-frame, body.lore-theme-grimoire-light .map-frame { background: linear-gradient(135deg, var(--lore-ember-faint), transparent 40%), linear-gradient(180deg, var(--lore-leather) 0%, var(--lore-leather-mid) 50%, var(--lore-leather) 100%); border: 2px solid var(--lore-gold-dim); box-shadow: inset 0 0 0 1px var(--lore-ember-faint), 0 0 0 1px var(--lore-ember-dim), 0 0 80px -10px rgba(0, 0, 0, .65), inset 0 0 60px rgba(0, 0, 0, .35); } /* Map body needs to be relative so the spine binding line is bounded to the map area only (not escaping into title bar / legend bar). */ .map-frame { --lore-cover-w: 14px; --lore-cover-h: 10px; } body.lore-theme-grimoire-dark .map-body, body.lore-theme-grimoire-light .map-body { position: relative; } /* Issue 2 (2026-05-10): decorative striped page-edges DELETED. Previous `.lore-frame__edge` rules used a repeating-linear-gradient(180deg, edge-light, edge-dark) at 5px width which read as glowing red/ember "ridges" along the map sides. JS no longer creates those nodes. The leather frame border + gold piping carry the bound-book read. */ /* Spine — single subtle binding line on the LEFT edge. The page is a single-canvas surface (not a two-page spread), so the spine reads as the bound side of a folio. Simplified to a thin gold line — no ember glow gradient, no wide visible spine column that competed with map content. */ .lore-frame__spine { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 24; pointer-events: none; background: var(--lore-gold-dim); opacity: .55; } /* In light theme, dim the existing gold corner accents that the original .map-frame::before/::after draw. */ body.lore-theme-grimoire-light .map-frame::before, body.lore-theme-grimoire-light .map-frame::after { border-color: var(--lore-gold-bright); opacity: .6; } /* Title bar palette swap */ body.lore-theme-grimoire-dark .frame-title-bar { background: linear-gradient(90deg, transparent, var(--lore-ember-faint), transparent); border-bottom-color: var(--lore-gold-dim); } body.lore-theme-grimoire-dark .frame-title { color: var(--lore-gold); text-shadow: 0 0 18px var(--lore-ember-faint); } body.lore-theme-grimoire-light .frame-title-bar { background: linear-gradient(90deg, transparent, rgba(107, 26, 26, .08), transparent); border-bottom-color: var(--lore-gold-dim); } body.lore-theme-grimoire-light .frame-title { color: var(--lore-gold-bright); text-shadow: none; } body.lore-theme-grimoire-light .frame-title-ornament, body.lore-theme-grimoire-light .layer-label { color: var(--lore-gold-bright); } body.lore-theme-grimoire-light .frame-close-btn { color: var(--lore-gold-bright); border-color: var(--lore-gold-dim); } body.lore-theme-grimoire-light .frame-close-btn:hover { background: var(--lore-gold-bright); color: #fff5d6; } /* Map viewport background swap for light theme — parchment instead of starfield. */ body.lore-theme-grimoire-light .map-viewport { background: radial-gradient(ellipse at center, #fff5d6 0%, #e8d8b0 100%); } body.lore-theme-grimoire-light .map-layer-bar { background: rgba(255, 246, 219, .55); border-bottom-color: rgba(74, 32, 14, .15); } body.lore-theme-grimoire-light .map-controls { background: rgba(255, 246, 219, .55); border-top-color: rgba(74, 32, 14, .15); } body.lore-theme-grimoire-light .ctrl-btn { background: rgba(107, 26, 26, .08); border-color: var(--lore-gold-dim); color: var(--lore-gold-bright); } body.lore-theme-grimoire-light .ctrl-btn:hover { background: rgba(107, 26, 26, .18); } /* Zone panel palette swap (light theme only — dark already matches) */ body.lore-theme-grimoire-light .zone-panel { background: linear-gradient(180deg, #fff5d6 0%, #f1ce7a 100%); color: var(--lore-text); } body.lore-theme-grimoire-light .zp-name { color: var(--lore-gold-bright); text-shadow: none; } body.lore-theme-grimoire-light .zp-desc { color: var(--lore-text); } body.lore-theme-grimoire-light .zp-features li { color: var(--lore-text-dim); border-bottom-color: rgba(107, 26, 26, .08); } body.lore-theme-grimoire-light .zp-features li::before { color: var(--lore-gold-bright); } body.lore-theme-grimoire-light .zp-divider { background: linear-gradient(90deg, transparent, var(--lore-gold-dim), transparent); } body.lore-theme-grimoire-light .zp-drill { background: rgba(107, 26, 26, .08); border-color: var(--lore-gold-dim); color: var(--lore-gold-bright); } body.lore-theme-grimoire-light .zp-drill:hover { background: rgba(107, 26, 26, .18); } /* Issue 3 (2026-05-10): legend bar layout cleanup. Original style.css uses `.leg-suggest-group { margin-left:auto }` AND `.legend-nav { margin-left:auto }` (inline) which collapsed the dot items to the left and squeezed the Backer group + nav cluster against the right edge unevenly. Re-balance to a clean 3-zone row: [ 4 dot legend items ── LEFT ] [ Backer Creations ── CENTER ] [ Map/Timeline/Codex ── RIGHT ] The frame-legend already has `display:flex; justify-content:center` so we only need to override the auto margins and let the spacers grow. */ .frame-legend { /* Drop the heavy 316px right-padding from style.css that biased the row leftward to clear the 300px sidebar. The toolbar lives in its own fixed-position layer now, and the sidebar overlaps the legend bar naturally — we want the legend visually balanced across the full row. */ padding-right: 16px !important; gap: 16px; flex-wrap: wrap; } .frame-legend .leg-suggest-group { /* 2026-05-30 (Issue 6 follow-up): the centered position sat directly beneath the fixed-bottom floating toolbar at map-center, hiding the submission chips behind it. Push Backer Creations to the right half of the legend bar so the toolbar at map-center has clear airspace. Codex nav still hugs the far right via its own margin-left override. */ margin-left: auto; margin-right: 20px; } .frame-legend .legend-nav { margin-left: 0 !important; /* keep the 1px divider on the left of legend-nav from inline css */ } /* Legend bar palette swap (light theme) */ body.lore-theme-grimoire-light .frame-legend { background: rgba(255, 246, 219, .55); border-top-color: rgba(74, 32, 14, .15); } body.lore-theme-grimoire-light .leg-item { color: var(--lore-text-dim); } body.lore-theme-grimoire-light .legend-nav a { color: var(--lore-gold-bright); } body.lore-theme-grimoire-light .legend-nav a.active, body.lore-theme-grimoire-light .legend-nav a:hover { color: var(--lore-ember); } body.lore-theme-grimoire-light .leg-suggest-link { color: var(--lore-gold-bright); border-color: var(--lore-gold-dim); } /* ============================================================ FLOATING TOOLBAR (.lore-toolbar / .lore-tb-*) Fixed bottom-center bar — single source of truth for map controls (Reset / Zoom+ / Zoom- / Theme / FX). Strategy A: the legacy in-frame zoom buttons are hidden whenever a grimoire theme is active, so users see only the floating toolbar. The toolbar buttons forward clicks to the legacy controls under the hood (see grimoire.js → wireToolbar) so MapEngine integration is preserved. On mobile the toolbar moves to fixed top-right, away from the bottom-sheet zone panel. ============================================================ */ body.lore-theme-grimoire-dark .map-controls, body.lore-theme-grimoire-light .map-controls { display: none !important; } .lore-toolbar { position: fixed; /* Issue 4 (2026-05-11): Option A — toolbar sits at viewport bottom, fully below the map frame's bottom edge so it never overlaps the map content or the in-frame legend bar at any viewport size. 2026-05-30 revert: the toolbar position was correct; the overlap fix lives on Backer Creations now (pushed right via leg-suggest margin), not here. */ bottom: 1rem; /* Dead-center over the MAP area, not the viewport: the 300px zone-panel sidebar sits on the right, so shift the center point left by 150px. */ left: calc(50% - 150px); transform: translateX(-50%) translateY(8px); z-index: 60; display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--lore-tb-bg); border: 1px solid var(--lore-tb-border); border-radius: 4px; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); color: var(--lore-tb-text); font-family: 'Rajdhani', system-ui, sans-serif; font-size: 12px; letter-spacing: .04em; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset; opacity: 0; transition: opacity .35s ease, transform .35s ease; } .lore-toolbar.is-ready { opacity: 1; transform: translateX(-50%); } /* Corner brackets — same Hellreach pattern */ .lore-toolbar::before, .lore-toolbar::after { content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid var(--lore-tb-bracket); pointer-events: none; opacity: .8; } .lore-toolbar::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .lore-toolbar::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .lore-tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--lore-tb-text); background: transparent; border: 1px solid transparent; border-radius: 3px; font: inherit; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .3s ease; white-space: nowrap; } .lore-tb-btn:hover { color: var(--lore-tb-text-hover); background: rgba(255, 255, 255, .05); border-color: var(--lore-tb-border); } .lore-tb-btn[data-active="1"] { color: var(--lore-tb-bracket); background: rgba(248, 233, 184, .08); border-color: rgba(248, 233, 184, .35); } body.lore-theme-grimoire-light .lore-tb-btn:hover { background: rgba(74, 32, 14, .08); } body.lore-theme-grimoire-light .lore-tb-btn[data-active="1"] { background: rgba(138, 36, 24, .1); border-color: rgba(138, 36, 24, .35); } .lore-tb-btn .lore-tb-state { color: var(--lore-tb-bracket); font-weight: 600; margin-left: 2px; font-size: 10px; letter-spacing: .08em; } .lore-tb-sep { width: 1px; height: 18px; background: var(--lore-tb-border); margin: 0 4px; opacity: .55; } /* Tiny icon stroke shorthand */ .lore-tb-btn svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ FX TOGGLE — turns off the heavier gradient/shadow effects. Lets the user kill atmospheric noise on slow devices without breaking the map. ============================================================ */ body.lore-fx-off .map-frame { box-shadow: 0 0 0 1px var(--lore-gold-dim, rgba(212, 164, 74, .35)); } /* FX-off: spine is already a thin gold line; just dim it slightly. */ body.lore-fx-off .lore-frame__spine { opacity: .35; } body.lore-fx-off .frame-title { text-shadow: none; } body.lore-fx-off #starfield { display: none; } body.lore-fx-off .zone-area.has-drill::before { animation: none; opacity: .25; } body.lore-fx-off .lore-toolbar { backdrop-filter: none; -webkit-backdrop-filter: none; } /* ============================================================ MOBILE — keep map usable, move toolbar out of the bottom sheet. ============================================================ */ @media (max-width: 700px) { .map-frame { --lore-cover-w: 8px; --lore-cover-h: 6px; } .lore-frame__spine { width: 1px; } /* Toolbar: top-right, compact, never overlaps map content. */ .lore-toolbar { bottom: auto; top: 8px; right: 8px; left: auto; transform: translateY(-4px); gap: 3px; padding: 5px 8px; border-radius: 3px; font-size: 10.5px; } .lore-toolbar.is-ready { transform: translateY(0); } .lore-tb-btn { padding: 5px 7px; } .lore-tb-sep { height: 14px; margin: 0 2px; } /* Hide button labels on the smallest screens — keep icons + state. */ .lore-tb-btn .lore-tb-label { display: none; } } /* Wider phones (375-414): keep labels visible. */ @media (min-width: 360px) and (max-width: 700px) { .lore-tb-btn .lore-tb-label { display: inline; } } /* Very narrow (320 and under): icons only. */ @media (max-width: 359px) { .lore-tb-btn .lore-tb-label, .lore-tb-btn .lore-tb-state { display: none; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .lore-toolbar { transition: none; } .lore-tb-btn { transition: none; } }