/* File: src/styles/packs.css ────────────────────────────────────────────────────────────────────────── Visual-pack overrides for the DOM overlays. packs/UiTheme.js stamps the active pack id onto and lays down the pack's --vp-* custom properties; this sheet turns those into DOM chrome. Scoping through the attribute keeps the default pack byte-identical (no attribute → no rule matches → the shipped stylesheets stand), and `html[...]` outranks the class-only rules the JS-injected overlay styles use, whatever order they landed in . Chrome only: panel grounds, borders, container ink. Semantic color — vitals, rarity, ailment identity — stays with the shipped rules. */ /* ── HUD badges and header ────────────────────────────────────────────── */ html[data-visual-pack="neon"] .ailment-badge, html[data-visual-pack="neon"] .effect-badge { background: linear-gradient(rgba(10, 6, 32, 0.55), rgba(10, 6, 32, 0.85)); border-color: var(--vp-panel-border, #3b2a7a); } html[data-visual-pack="neon"] .hud-header { color: var(--vp-ink, #dff4ff); } /* ── Equip bar ────────────────────────────────────────────────────────── */ html[data-visual-pack="neon"] .eb-weapon, html[data-visual-pack="neon"] .eb-gear, html[data-visual-pack="neon"] .eb-bag, html[data-visual-pack="neon"] .eb-special, html[data-visual-pack="neon"] .eb-weapon-section { background: var(--vp-well-bg, rgba(6, 3, 22, 0.85)); border-color: var(--vp-panel-border, #3b2a7a); } html[data-visual-pack="neon"] .eb-gear-row { border-color: rgba(59, 42, 122, 0.55); } /* ── Inventory ────────────────────────────────────────────────────────── */ html[data-visual-pack="neon"] .inv-panel { background: rgba(8, 4, 26, 0.96); border-color: var(--vp-panel-border, #3b2a7a); } html[data-visual-pack="neon"] .inv-tooltip { background: rgba(8, 4, 26, 0.97); border-color: var(--vp-accent, #00e5ff); } /* ── Pickup prompt ────────────────────────────────────────────────────── */ html[data-visual-pack="neon"] .pickup-prompt { background: var(--vp-well-bg, rgba(6, 3, 22, 0.85)); border-color: var(--vp-panel-border, #3b2a7a); color: var(--vp-ink, #dff4ff); } /* ── Narrative + dialog cards ─────────────────────────────────────────── */ html[data-visual-pack="neon"] .nar-body, html[data-visual-pack="neon"] .nar-chip { background-color: rgba(8, 4, 26, 0.92); border-color: var(--vp-panel-border, #3b2a7a); } html[data-visual-pack="neon"] .dialog-card, html[data-visual-pack="neon"] .dialog-panel { background-color: rgba(8, 4, 26, 0.95); border-color: var(--vp-panel-border, #3b2a7a); }