/* Mythical Blue · Daylight / Moonlight theme system */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--gold-deep); background: linear-gradient(180deg, rgba(255,253,245,.92), rgba(245,231,198,.92)); color: var(--navy-deep); cursor: pointer; font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: .75px; text-transform: uppercase; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 6px rgba(43,56,102,.10); } .theme-toggle:hover, .theme-toggle:focus-visible { transform: translateY(-1px); outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(43,56,102,.14); } .theme-toggle-icon { font-size: 12px; line-height: 1; } .overview-header-actions { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .theme-toggle-compact { padding-inline: 10px; } @media (max-width: 700px) { .overview-header-actions { width: 100%; justify-content: space-between; } .theme-toggle, .theme-toggle-compact { font-size: 10px; padding: 8px 10px; } .theme-toggle .theme-toggle-label { white-space: nowrap; } } /* Night palette. Every moonlight blue is written as hsl() of --night-hue (plus that shade's own small hue offset, saturation, and lightness), and every gold as hsl() of --night-gold-hue. A theme can recolour its whole moonlight mode by changing these two values; reds, greens, whites, and rarity colours keep their meaning and stay fixed. The comma form of hsl() is used on purpose so gradients keep blending in sRGB. */ html[data-theme="moonlight"] { --night-hue: 205deg; --night-gold-hue: 45deg; } html[data-theme="moonlight"] { --moon-page-bg: linear-gradient(180deg, hsl(calc(var(--night-hue) + 12.1deg), 81%, 8.2%) 0%, hsl(calc(var(--night-hue) + 13.6deg), 74.7%, 15.5%) 40%, hsl(calc(var(--night-hue) + 12.1deg), 63.3%, 23.5%) 100%); --moon-surface: hsl(calc(var(--night-hue) + 13.8deg), 57.1%, 16.5%); --moon-surface-soft: hsla(calc(var(--night-hue) + 14.6deg), 59.5%, 16.5%, .92); --moon-surface-raised: hsla(calc(var(--night-hue) + 15deg), 63.4%, 13.9%, .78); --moon-surface-glass: hsla(calc(var(--night-hue) + 14.6deg), 59.5%, 16.5%, .58); --moon-line: hsla(calc(var(--night-hue) + 3.6deg), 100%, 78.6%, .42); --moon-line-strong: hsla(calc(var(--night-hue) + 1.6deg), 100%, 84.5%, .65); --moon-text: hsl(calc(var(--night-hue) + 6.8deg), 100%, 96.7%); --moon-text-soft: hsl(calc(var(--night-hue) + 10.4deg), 100%, 92.4%); --moon-muted: hsla(calc(var(--night-hue) + 6deg), 100%, 93.9%, .76); --moon-heading: hsl(calc(var(--night-hue) + 10deg), 100%, 97.6%); --moon-accent: hsl(calc(var(--night-hue) + 3.9deg), 100%, 79.2%); --moon-accent-2: hsl(calc(var(--night-hue) + 3.9deg), 100%, 68.6%); --moon-button-from: hsl(calc(var(--night-hue) + 15.9deg), 59.2%, 37.5%); --moon-button-to: hsl(calc(var(--night-hue) + 16.5deg), 70.9%, 21.6%); --moon-button-hover-from: hsl(calc(var(--night-hue) + 15.6deg), 57%, 44.7%); --moon-button-hover-to: hsl(calc(var(--night-hue) + 16.6deg), 65.7%, 26.3%); --moon-chip-bg: hsla(calc(var(--night-hue) + 6.9deg), 59.8%, 58%, .18); --moon-chip-active: hsla(calc(var(--night-hue) + 5.2deg), 100%, 73.1%, .22); } html[data-theme="moonlight"] body { background: var(--moon-page-bg); color: var(--moon-text); } html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .sheet-toolbar, html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .dm-screen-header, html[data-theme="moonlight"] .initiative-panel, html[data-theme="moonlight"] .spell-picker-modal, html[data-theme="moonlight"] .spell-editor-modal, html[data-theme="moonlight"] .library-picker-modal, html[data-theme="moonlight"] .npc-picker-modal { background-color: var(--moon-surface); color: var(--moon-text); border-color: var(--moon-line-strong); box-shadow: 0 10px 42px rgba(0,0,0,.46), inset 0 0 0 1px hsla(calc(var(--night-hue) + 1.9deg), 100%, 88.6%, .08); } html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .dm-screen-header, html[data-theme="moonlight"] .initiative-panel, html[data-theme="moonlight"] .spell-picker-modal, html[data-theme="moonlight"] .spell-editor-modal, html[data-theme="moonlight"] .library-picker-modal, html[data-theme="moonlight"] .npc-picker-modal { background-image: url('../assets/themes/moonlight/backgrounds/parchment-seamless.png'); } html[data-theme="moonlight"] .start-page::before, html[data-theme="moonlight"] .dm-screen-header::before, html[data-theme="moonlight"] .initiative-panel::before { border-color: hsla(calc(var(--night-hue) + 1.4deg), 100%, 88.4%, .20); } html[data-theme="moonlight"] .corner { background-image: url('../assets/themes/moonlight/ornaments/corner.png'); } html[data-theme="moonlight"] .compass-watermark { background-image: url('../assets/themes/moonlight/ornaments/compass.png'); opacity: .42; mix-blend-mode: screen; } html[data-theme="moonlight"] .ship-art { background-image: url('../assets/themes/moonlight/ornaments/ship.png'); opacity: .68; mix-blend-mode: screen; } html[data-theme="moonlight"] .title-banner { filter: drop-shadow(0 0 10px hsla(calc(var(--night-hue) + 2.3deg), 100%, 73.7%, .15)); } html[data-theme="moonlight"] .start-page h1, html[data-theme="moonlight"] .dm-screen-header h1, html[data-theme="moonlight"] .initiative-panel h2, html[data-theme="moonlight"] .ftr-t, html[data-theme="moonlight"] .inline-statblock h3, html[data-theme="moonlight"] .npc-picker-header h2, html[data-theme="moonlight"] .statblock-result-card h3 { color: var(--moon-heading); } html[data-theme="moonlight"] .dm-screen-kicker, html[data-theme="moonlight"] .dm-section-label, html[data-theme="moonlight"] .round-display span, html[data-theme="moonlight"] .tracker-legend, html[data-theme="moonlight"] .cal-season, html[data-theme="moonlight"] .card-condition-label, html[data-theme="moonlight"] .npc-picker-filters span, html[data-theme="moonlight"] .round-display strong, html[data-theme="moonlight"] .cal-day-num { color: var(--moon-accent); } html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .sheet-toolbar, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .character-card, html[data-theme="moonlight"] .card-condition-chip, html[data-theme="moonlight"] .overview-action-link, html[data-theme="moonlight"] .combatant-row, html[data-theme="moonlight"] .inline-statblock, html[data-theme="moonlight"] .inline-statblock-entry, html[data-theme="moonlight"] .statblock-result-card, html[data-theme="moonlight"] .round-display, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .spell-preview-card, html[data-theme="moonlight"] .library-picker-preview, html[data-theme="moonlight"] .spell-picker-results > *, html[data-theme="moonlight"] details.sb-card > summary { border-color: var(--moon-line); } html[data-theme="moonlight"] .character-card, html[data-theme="moonlight"] .combatant-row, html[data-theme="moonlight"] .statblock-result-card, html[data-theme="moonlight"] .inline-statblock, html[data-theme="moonlight"] .inline-statblock-entry, html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .spell-preview-card, html[data-theme="moonlight"] .library-picker-preview, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .calendar-sheet-bar { background: var(--moon-surface-glass); color: var(--moon-text); } html[data-theme="moonlight"] .character-card:hover, html[data-theme="moonlight"] .combatant-row:hover, html[data-theme="moonlight"] .statblock-result-card:hover, html[data-theme="moonlight"] .sb-card:hover { background: hsla(calc(var(--night-hue) + 13.6deg), 59.3%, 23.1%, .76); } html[data-theme="moonlight"] .combatant-row.active-turn { background: hsla(calc(var(--night-hue) + 11.8deg), 49.3%, 44.1%, .28); box-shadow: inset 4px 0 0 var(--moon-accent), inset 0 0 0 1px hsla(calc(var(--night-hue) + 1.3deg), 100%, 93.7%, .12), 0 5px 14px rgba(0,0,0,.18); } html[data-theme="moonlight"] .cal-header, html[data-theme="moonlight"] .round-display, html[data-theme="moonlight"] .card-hp-adj, html[data-theme="moonlight"] .sheet-toolbar button, html[data-theme="moonlight"] .start-page button, html[data-theme="moonlight"] .overview-action-link, html[data-theme="moonlight"] .dm-nav-button, html[data-theme="moonlight"] .dm-primary-button, html[data-theme="moonlight"] .dm-secondary-button, html[data-theme="moonlight"] .add-btn, html[data-theme="moonlight"] .theme-toggle { background: linear-gradient(180deg, var(--moon-button-from), var(--moon-button-to)); color: var(--moon-text); border-color: hsla(calc(var(--night-hue) + 4.3deg), 100%, 83.1%, .58); box-shadow: 0 3px 10px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10); } html[data-theme="moonlight"] .sheet-toolbar button:hover, html[data-theme="moonlight"] .start-page button:hover, html[data-theme="moonlight"] .overview-action-link:hover, html[data-theme="moonlight"] .overview-action-link:focus-visible, html[data-theme="moonlight"] .dm-nav-button:hover, html[data-theme="moonlight"] .dm-primary-button:hover, html[data-theme="moonlight"] .dm-secondary-button:hover, html[data-theme="moonlight"] .theme-toggle:hover, html[data-theme="moonlight"] .theme-toggle:focus-visible, html[data-theme="moonlight"] .add-btn:hover { background: linear-gradient(180deg, var(--moon-button-hover-from), var(--moon-button-hover-to)); } html[data-theme="moonlight"] .dm-subtle-button, html[data-theme="moonlight"] .cal-btn, html[data-theme="moonlight"] .cal-btn-save { background: hsla(calc(var(--night-hue) + 12.5deg), 66.7%, 14.1%, .35); color: var(--moon-text-soft); border-color: var(--moon-line); } html[data-theme="moonlight"] .cal-btn:hover, html[data-theme="moonlight"] .dm-subtle-button:hover, html[data-theme="moonlight"] .cal-btn-save:hover { background: hsla(calc(var(--night-hue) + 3.9deg), 100%, 68.6%, .15); } html[data-theme="moonlight"] .tab, html[data-theme="moonlight"] .cal-month-num, html[data-theme="moonlight"] .cal-month-of, html[data-theme="moonlight"] .cal-week, html[data-theme="moonlight"] .cal-weekday, html[data-theme="moonlight"] .card-hp-text, html[data-theme="moonlight"] .combatant-name, html[data-theme="moonlight"] .combatant-name-input, html[data-theme="moonlight"] .combatant-type, html[data-theme="moonlight"] .active-turn-text, html[data-theme="moonlight"] .combatant-condition-empty, html[data-theme="moonlight"] .inline-statblock-entry p, html[data-theme="moonlight"] .inline-statblock-header p, html[data-theme="moonlight"] .npc-picker-actions span, html[data-theme="moonlight"] .npc-picker-results-header strong, html[data-theme="moonlight"] .statblock-result-card small, html[data-theme="moonlight"] .spell-picker-header p, html[data-theme="moonlight"] .library-picker-placeholder, html[data-theme="moonlight"] .sheet label, html[data-theme="moonlight"] .sheet summary, html[data-theme="moonlight"] .sheet p, html[data-theme="moonlight"] .sheet li, html[data-theme="moonlight"] .sheet div, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .cal-sign, html[data-theme="moonlight"] .cal-sheet-date { color: var(--moon-text-soft); } html[data-theme="moonlight"] .tab.on, html[data-theme="moonlight"] .combatant-condition-open, html[data-theme="moonlight"] .statblock-toggle, html[data-theme="moonlight"] .card-condition-chip, html[data-theme="moonlight"] .inline-statblock-section h4, html[data-theme="moonlight"] .spell-preview-title, html[data-theme="moonlight"] .spell-card-title, html[data-theme="moonlight"] .character-card strong, html[data-theme="moonlight"] .cal-year { color: var(--moon-heading); } html[data-theme="moonlight"] .tab.on, html[data-theme="moonlight"] .tabs, html[data-theme="moonlight"] .start-page-heading-row, html[data-theme="moonlight"] .initiative-panel-header, html[data-theme="moonlight"] .tracker-legend, html[data-theme="moonlight"] .inline-statblock-header, html[data-theme="moonlight"] .inline-statblock-section h4, html[data-theme="moonlight"] .cal-controls, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .card-condition-editor, html[data-theme="moonlight"] .npc-picker-header, html[data-theme="moonlight"] .npc-picker-actions, html[data-theme="moonlight"] .npc-picker-filters, html[data-theme="moonlight"] .npc-picker-results-header { border-color: var(--moon-line); } html[data-theme="moonlight"] .cal-sign, html[data-theme="moonlight"] .calendar-sheet-bar { background: hsla(calc(var(--night-hue) + 14.1deg), 60.5%, 14.9%, .34); } html[data-theme="moonlight"] input, html[data-theme="moonlight"] textarea, html[data-theme="moonlight"] select { color: var(--moon-text); caret-color: var(--moon-accent); } html[data-theme="moonlight"] input::placeholder, html[data-theme="moonlight"] textarea::placeholder { color: hsla(calc(var(--night-hue) + 10.3deg), 100%, 93.3%, .46); } html[data-theme="moonlight"] .sheet input, html[data-theme="moonlight"] .sheet textarea, html[data-theme="moonlight"] .sheet select, html[data-theme="moonlight"] .card-hp-cur, html[data-theme="moonlight"] .card-hp-max, html[data-theme="moonlight"] .combatant-row input[type="text"], html[data-theme="moonlight"] .combatant-row input[type="number"], html[data-theme="moonlight"] .combatant-condition-picker, html[data-theme="moonlight"] .spell-picker-toolbar input, html[data-theme="moonlight"] .spell-picker-toolbar select, html[data-theme="moonlight"] .library-picker-toolbar input, html[data-theme="moonlight"] .library-picker-toolbar select, html[data-theme="moonlight"] .npc-picker-filters input, html[data-theme="moonlight"] .npc-picker-filters select { background: hsla(calc(var(--night-hue) + 15deg), 64.3%, 11%, .26); color: var(--moon-text); border-color: var(--moon-line) !important; } html[data-theme="moonlight"] .combatant-condition-picker, html[data-theme="moonlight"] .card-condition-chip, html[data-theme="moonlight"] .combatant-condition-chip, html[data-theme="moonlight"] .statblock-toggle, html[data-theme="moonlight"] .round-display, html[data-theme="moonlight"] .concentration-rune, html[data-theme="moonlight"] .combatant-order-medallion, html[data-theme="moonlight"] .combatant-remove, html[data-theme="moonlight"] .player-lock-icon { background: var(--moon-chip-bg); border-color: var(--moon-line); color: var(--moon-text-soft); } html[data-theme="moonlight"] .combatant-condition-chip.active { background: var(--moon-chip-active); border-color: var(--moon-line-strong); } html[data-theme="moonlight"] .combatant-condition-info, html[data-theme="moonlight"] .library-picker-preview, html[data-theme="moonlight"] .spell-preview-card { background: hsla(calc(var(--night-hue) + 13.3deg), 64.3%, 11%, .45); color: var(--moon-text-soft); } html[data-theme="moonlight"] .concentration-toggle input:checked + .concentration-rune { background: linear-gradient(180deg, hsl(calc(var(--night-hue) + 14deg), 67.2%, 53.3%), hsl(calc(var(--night-hue) + 16.2deg), 65.2%, 25.9%)); color: #ffffff; border-color: hsla(calc(var(--night-hue) - 0.5deg), 100%, 86.1%, .8); } html[data-theme="moonlight"] .combatant-hp-bwrap, html[data-theme="moonlight"] .card-hp-bwrap { background: hsla(calc(var(--night-hue) + 9.5deg), 100%, 93.5%, .12); } html[data-theme="moonlight"] .hp-divider, html[data-theme="moonlight"] .card-hp-slash, html[data-theme="moonlight"] .cal-month-sep, html[data-theme="moonlight"] .cal-ornament { color: var(--moon-accent); } html[data-theme="moonlight"] svg path[stroke="#b8902c"] { stroke: hsla(calc(var(--night-hue) + 3.6deg), 100%, 79%, .75); } /* ─── Moonlight phase 2: deeper ocean palette, brighter gilding and readable spellbook ─── */ html[data-theme="moonlight"] { --gold: hsl(calc(var(--night-gold-hue) - 0.7deg), 79.3%, 71.6%); --gold-deep: hsl(calc(var(--night-gold-hue) - 3.9deg), 76.1%, 63.9%); --gold-light: hsl(calc(var(--night-gold-hue) - 0.2deg), 100%, 82.2%); --navy: hsl(calc(var(--night-hue) - 2deg), 100%, 78%); --navy-deep: hsl(calc(var(--night-hue) - 0.3deg), 100%, 96.7%); --navy-soft: hsl(calc(var(--night-hue) - 2deg), 100%, 85.7%); --ink: hsl(calc(var(--night-hue) + 1.7deg), 100%, 96.5%); --ink-soft: hsl(calc(var(--night-hue) + 2.2deg), 100%, 89.6%); --moon-page-bg: radial-gradient(circle at 50% -10%, hsl(calc(var(--night-hue) + 9.6deg), 72.9%, 26.1%) 0%, hsl(calc(var(--night-hue) + 13.1deg), 78.8%, 12.9%) 38%, hsl(calc(var(--night-hue) + 15deg), 80%, 5.9%) 100%); --moon-surface: hsl(calc(var(--night-hue) + 11.7deg), 77.8%, 12.4%); --moon-surface-soft: hsla(calc(var(--night-hue) + 13.4deg), 78.1%, 12.5%, .95); --moon-surface-raised: hsla(calc(var(--night-hue) + 12.1deg), 74.1%, 16.7%, .90); --moon-surface-glass: hsla(calc(var(--night-hue) + 12.2deg), 78.4%, 14.5%, .69); --moon-line: hsla(calc(var(--night-hue) - 1.1deg), 100%, 73.9%, .52); --moon-line-strong: hsla(calc(var(--night-gold-hue) - 1.8deg), 100%, 75.5%, .78); --moon-text: hsl(calc(var(--night-hue) + 2.7deg), 100%, 97.5%); --moon-text-soft: hsl(calc(var(--night-hue) + 3.6deg), 100%, 91.8%); --moon-muted: hsla(calc(var(--night-hue) + 6.2deg), 100%, 90.2%, .78); --moon-heading: hsl(calc(var(--night-hue) - 1deg), 100%, 98%); --moon-accent: hsl(calc(var(--night-hue) - 3.6deg), 100%, 80.8%); --moon-accent-2: hsl(calc(var(--night-hue) - 0.5deg), 100%, 69.2%); --moon-gold: hsl(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%); --moon-gold-soft: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .70); --moon-button-from: hsl(calc(var(--night-hue) + 11.1deg), 64.9%, 40.2%); --moon-button-to: hsl(calc(var(--night-hue) + 15.3deg), 79.8%, 19.4%); --moon-button-hover-from: hsl(calc(var(--night-hue) + 10.7deg), 67.1%, 52.4%); --moon-button-hover-to: hsl(calc(var(--night-hue) + 13.8deg), 76.1%, 26.3%); --moon-chip-bg: hsla(calc(var(--night-hue) + 4.6deg), 65.7%, 57.6%, .18); --moon-chip-active: hsla(calc(var(--night-hue) + 2.8deg), 100%, 71.2%, .28); } html[data-theme="moonlight"] body { background: var(--moon-page-bg); background-attachment: fixed; } html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .dm-screen-header, html[data-theme="moonlight"] .initiative-panel, html[data-theme="moonlight"] .spell-picker-modal, html[data-theme="moonlight"] .spell-editor-modal, html[data-theme="moonlight"] .library-picker-modal, html[data-theme="moonlight"] .npc-picker-modal { background-color: hsl(calc(var(--night-hue) + 11.7deg), 77.8%, 12.4%); box-shadow: 0 14px 48px rgba(0, 0, 0, .56), 0 0 28px hsla(calc(var(--night-hue) + 6.8deg), 100%, 63.7%, .12), inset 0 0 0 1px hsla(calc(var(--night-hue) - 2.4deg), 100%, 86.5%, .09); } html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .dm-screen-header, html[data-theme="moonlight"] .initiative-panel { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .74); } html[data-theme="moonlight"] .start-page::before, html[data-theme="moonlight"] .dm-screen-header::before, html[data-theme="moonlight"] .initiative-panel::before { border-color: hsla(calc(var(--night-hue) - 3.2deg), 100%, 78.4%, .34); box-shadow: 0 0 14px hsla(calc(var(--night-hue) + 3.4deg), 100%, 66.5%, .12); } html[data-theme="moonlight"] .title-banner, html[data-theme="moonlight"] .corner, html[data-theme="moonlight"] .compass-watermark, html[data-theme="moonlight"] .ship-art, html[data-theme="moonlight"] .spell-school-icon, html[data-theme="moonlight"] .spell-area-inline img, html[data-theme="moonlight"] .equipped-slot-icon { filter: drop-shadow(0 0 5px hsla(calc(var(--night-hue) - 1.1deg), 100%, 68%, .44)); } html[data-theme="moonlight"] .corner { opacity: .94; } html[data-theme="moonlight"] .compass-watermark { opacity: .52; } html[data-theme="moonlight"] .ship-art { opacity: .78; } /* Switch-style daylight / moonlight control */ .theme-toggle { position: relative; min-width: 174px; min-height: 38px; justify-content: flex-end; overflow: hidden; padding: 7px 15px 7px 49px; border-radius: 999px; letter-spacing: .65px; } .theme-toggle::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(184, 144, 44, .30); border-radius: inherit; pointer-events: none; } .theme-toggle-icon { position: absolute; top: 4px; left: 4px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid rgba(138, 105, 24, .62); border-radius: 50%; background: rgba(255, 248, 222, .82); color: #294575; font-size: 15px; line-height: 1; box-shadow: 0 1px 5px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .62); transition: transform .24s ease, background .24s ease, color .24s ease, box-shadow .24s ease; } .theme-toggle-label { position: relative; z-index: 1; } .theme-toggle-compact { min-width: 134px; min-height: 36px; padding-right: 12px; padding-left: 44px; } html[data-theme="moonlight"] .theme-toggle { justify-content: flex-start; padding-right: 49px; padding-left: 15px; border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .74); background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 7.7deg), 71.9%, 39%, .96), hsla(calc(var(--night-hue) + 14.4deg), 87%, 15.1%, .98)); box-shadow: 0 0 15px hsla(calc(var(--night-hue) + 2.4deg), 100%, 66.1%, .22), inset 0 1px 0 rgba(255,255,255,.12); } html[data-theme="moonlight"] .theme-toggle::before { border-color: hsla(calc(var(--night-hue) - 1.7deg), 100%, 78.8%, .30); } html[data-theme="moonlight"] .theme-toggle-icon { left: auto; right: 4px; background: radial-gradient(circle at 35% 35%, hsl(calc(var(--night-gold-hue) + 6.4deg), 100%, 90.4%) 0%, hsl(var(--night-gold-hue), 85.7%, 72.5%) 58%, hsl(calc(var(--night-gold-hue) - 3.3deg), 61.1%, 55.7%) 100%); color: hsl(calc(var(--night-hue) + 10.7deg), 71.2%, 24.5%); border-color: hsla(calc(var(--night-gold-hue) + 0.9deg), 100%, 80%, .92); box-shadow: 0 0 13px hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .62), inset 0 1px 0 rgba(255,255,255,.62); } @media (max-width: 700px) { .theme-toggle { min-width: 148px; min-height: 36px; } .theme-toggle-compact { min-width: 126px; } } /* Brighten gold and blue accent lines throughout moonlight mode. */ html[data-theme="moonlight"] .tabs, html[data-theme="moonlight"] .tab.on, html[data-theme="moonlight"] .start-page-heading-row, html[data-theme="moonlight"] .initiative-panel-header, html[data-theme="moonlight"] .tracker-legend, html[data-theme="moonlight"] .inline-statblock-header, html[data-theme="moonlight"] .inline-statblock-section h4, html[data-theme="moonlight"] .card-condition-editor, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .spell-toolbar, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .spell-card-topline, html[data-theme="moonlight"] .spell-card-meta-grid, html[data-theme="moonlight"] .spell-card-details, html[data-theme="moonlight"] .spell-card-detail-grid { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .52); } html[data-theme="moonlight"] .overview-action-link, html[data-theme="moonlight"] .dm-nav-button, html[data-theme="moonlight"] .dm-primary-button, html[data-theme="moonlight"] .dm-secondary-button, html[data-theme="moonlight"] .add-btn, html[data-theme="moonlight"] .sheet-toolbar button, html[data-theme="moonlight"] .start-page button { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .88); box-shadow: 0 0 12px hsla(calc(var(--night-hue) + 5.6deg), 100%, 63.5%, .16), inset 0 1px 0 rgba(255,255,255,.12); } html[data-theme="moonlight"] .overview-action-link::before, html[data-theme="moonlight"] .overview-action-link::after, html[data-theme="moonlight"] .spell-prepared-toggle.is-prepared, html[data-theme="moonlight"] .spell-prepared-filter:has(input:checked) span, html[data-theme="moonlight"] .cal-year, html[data-theme="moonlight"] .cal-day-num, html[data-theme="moonlight"] .round-display strong, html[data-theme="moonlight"] .hp-divider, html[data-theme="moonlight"] .card-hp-slash, html[data-theme="moonlight"] .cal-month-sep, html[data-theme="moonlight"] .cal-ornament { color: var(--moon-gold); text-shadow: 0 0 7px hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .22); } /* Spellbook readability: override the daylight low-opacity navy text. */ html[data-theme="moonlight"] .spellbook-subtitle, html[data-theme="moonlight"] .spell-toolbar span, html[data-theme="moonlight"] .spell-picker-toolbar span, html[data-theme="moonlight"] .spell-card-school, html[data-theme="moonlight"] .spell-card-quick strong, html[data-theme="moonlight"] .spell-card-detail-grid strong, html[data-theme="moonlight"] .spell-card-quick span, html[data-theme="moonlight"] .spell-card-detail-grid span, html[data-theme="moonlight"] .spell-area-inline, html[data-theme="moonlight"] .spell-card-teaser, html[data-theme="moonlight"] .spell-card-rule-text, html[data-theme="moonlight"] .spell-property-chip, html[data-theme="moonlight"] .spell-prepared-toggle, html[data-theme="moonlight"] .spell-prepared-filter, html[data-theme="moonlight"] .spell-prepared-filter em, html[data-theme="moonlight"] .srd-license-note, html[data-theme="moonlight"] .spell-picker-header p, html[data-theme="moonlight"] .spell-editor-header p, html[data-theme="moonlight"] .spell-editor-checks, html[data-theme="moonlight"] .library-picker-preview, html[data-theme="moonlight"] .library-picker-placeholder, html[data-theme="moonlight"] .library-picker-preview .library-preview-meta, html[data-theme="moonlight"] .library-picker-preview .library-preview-body, html[data-theme="moonlight"] .library-picker-result, html[data-theme="moonlight"] .library-picker-result em, html[data-theme="moonlight"] .library-picker-result small, html[data-theme="moonlight"] .library-picker-footer, html[data-theme="moonlight"] .spell-picker-result, html[data-theme="moonlight"] .spell-picker-result em, html[data-theme="moonlight"] .spell-picker-result small { color: var(--moon-text-soft); } html[data-theme="moonlight"] .spell-card-title, html[data-theme="moonlight"] .library-picker-preview h3, html[data-theme="moonlight"] .library-picker-result strong, html[data-theme="moonlight"] .spell-picker-result strong { color: var(--moon-heading); text-shadow: 0 0 8px hsla(calc(var(--night-hue) + 1.2deg), 100%, 70.8%, .16); } html[data-theme="moonlight"] .spell-card { background: linear-gradient(145deg, hsla(calc(var(--night-hue) + 10.8deg), 78.3%, 18%, .92), hsla(calc(var(--night-hue) + 13.8deg), 82.8%, 11.4%, .82)); border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .58); box-shadow: 0 3px 11px rgba(0, 0, 0, .19), inset 0 1px 0 hsla(calc(var(--night-hue) + 1deg), 100%, 89.6%, .07); } html[data-theme="moonlight"] .spell-card:hover { border-color: hsla(calc(var(--night-gold-hue) - 0.2deg), 100%, 81.4%, .88); box-shadow: 0 0 16px hsla(calc(var(--night-hue) + 1.1deg), 100%, 68%, .18), inset 0 1px 0 hsla(var(--night-hue), 100%, 92.9%, .10); } html[data-theme="moonlight"] .spell-card-topline, html[data-theme="moonlight"] .spell-card-meta-grid, html[data-theme="moonlight"] .spell-card-subrow { background: hsla(calc(var(--night-hue) + 10.3deg), 75.3%, 19%, .22); } html[data-theme="moonlight"] .spell-school-icon { border-color: hsla(calc(var(--night-hue) - 2deg), 100%, 79%, .62); background: hsla(calc(var(--night-hue) + 10.5deg), 76%, 19.6%, .72); } html[data-theme="moonlight"] .spell-level-badge { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .90); background: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .10); color: var(--moon-gold); } html[data-theme="moonlight"] .spell-property-chip { border-color: hsla(calc(var(--night-hue) + 0.1deg), 100%, 78.4%, .36); background: hsla(calc(var(--night-hue) + 10.8deg), 75.3%, 17.5%, .48); } html[data-theme="moonlight"] .spell-property-chip.active { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .72); background: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .12); color: var(--moon-gold); } html[data-theme="moonlight"] .spell-card-expand, html[data-theme="moonlight"] .spell-card-edit-inline, html[data-theme="moonlight"] .spell-card-btn, html[data-theme="moonlight"] .spell-picker-close { color: var(--moon-gold); border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .66); } html[data-theme="moonlight"] .spell-card-expand:hover, html[data-theme="moonlight"] .spell-card-edit-inline:hover, html[data-theme="moonlight"] .spell-card-btn:hover { color: #ffffff; text-shadow: 0 0 8px hsla(calc(var(--night-hue) - 1.1deg), 100%, 73.9%, .45); } html[data-theme="moonlight"] .spell-picker-result-actions button, html[data-theme="moonlight"] .library-picker-result-actions button { border-color: hsla(calc(var(--night-gold-hue) - 0.4deg), 85%, 73.9%, .58); background: hsla(calc(var(--night-hue) + 10.5deg), 76%, 19.6%, .62); color: var(--moon-text); } html[data-theme="moonlight"] .spell-picker-result-actions button:hover, html[data-theme="moonlight"] .library-picker-result-actions button:hover { background: hsla(calc(var(--night-hue) + 9.2deg), 63.1%, 42.5%, .72); } /* Extra moonlight glow for equipment nodes and active statblock controls. */ html[data-theme="moonlight"] .equipped-slot-icon-wrap, html[data-theme="moonlight"] .statblock-toggle, html[data-theme="moonlight"] .concentration-rune, html[data-theme="moonlight"] .combatant-order-medallion { box-shadow: 0 0 10px hsla(calc(var(--night-hue) + 1.5deg), 100%, 68.4%, .12); } html[data-theme="moonlight"] .equipped-slot-card.is-active .equipped-slot-icon-wrap, html[data-theme="moonlight"] .concentration-toggle input:checked + .concentration-rune, html[data-theme="moonlight"] .active-turn .combatant-order-medallion { box-shadow: 0 0 13px hsla(calc(var(--night-hue) - 0.4deg), 100%, 69.4%, .34); } /* ─── Moonlight phase 3: main-sheet contrast and luminous gilding ─── */ html[data-theme="moonlight"] { --moon-panel-deep: hsla(calc(var(--night-hue) + 13.5deg), 86.7%, 8.8%, .88); --moon-panel: hsla(calc(var(--night-hue) + 12.1deg), 81.8%, 15.1%, .84); --moon-panel-soft: hsla(calc(var(--night-hue) + 9.7deg), 68.6%, 23.7%, .68); --moon-panel-highlight: hsla(calc(var(--night-hue) + 9.6deg), 58.7%, 37.1%, .42); --moon-gold: hsl(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%); --moon-gold-bright: hsl(calc(var(--night-gold-hue) + 3.2deg), 100%, 85.1%); --moon-gold-line: hsla(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%, .88); --moon-gold-soft-line: hsla(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%, .58); } /* Give the main character sheet stronger card separation. */ html[data-theme="moonlight"] .ab, html[data-theme="moonlight"] .bonbox, html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .cbox, html[data-theme="moonlight"] .dsbox, html[data-theme="moonlight"] .condition-control, html[data-theme="moonlight"] .condition-explanation, html[data-theme="moonlight"] .inventory-card, html[data-theme="moonlight"] .inventory-equipment-card, html[data-theme="moonlight"] .inventory-unified-card, html[data-theme="moonlight"] .inventory-filter-card, html[data-theme="moonlight"] .features-traits-main, html[data-theme="moonlight"] .proficiencies-card, html[data-theme="moonlight"] .armor-class-panel, html[data-theme="moonlight"] .equipped-carried-card, html[data-theme="moonlight"] .containers-locations-card, html[data-theme="moonlight"] .journal-note-entry, html[data-theme="moonlight"] .spellbook-card { background: linear-gradient(145deg, var(--moon-panel-soft), var(--moon-panel-deep)); border-color: var(--moon-gold-line) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .20), 0 0 12px hsla(calc(var(--night-hue) + 4.1deg), 100%, 66.5%, .07), inset 0 1px 0 hsla(calc(var(--night-hue) - 2.1deg), 100%, 93.3%, .08); } html[data-theme="moonlight"] .ab::after, html[data-theme="moonlight"] .sb-card::after { border-color: hsla(calc(var(--night-gold-hue) + 0.3deg), 100%, 79.2%, .36); } /* Keep panels dark rather than daylight-grey. */ html[data-theme="moonlight"] .modcircle, html[data-theme="moonlight"] .scorebox input, html[data-theme="moonlight"] .bonbox input, html[data-theme="moonlight"] .hstat input, html[data-theme="moonlight"] .cbox2 input, html[data-theme="moonlight"] .condition-chip, html[data-theme="moonlight"] .armor-class-total, html[data-theme="moonlight"] .armor-class-active, html[data-theme="moonlight"] .equipped-slot-card, html[data-theme="moonlight"] .custom-equipped-slot, html[data-theme="moonlight"] .proficiency-value-row, html[data-theme="moonlight"] .extra-speed-row { background: hsla(calc(var(--night-hue) + 12.4deg), 84.1%, 12.4%, .72) !important; border-color: var(--moon-gold-soft-line) !important; color: var(--moon-text) !important; } html[data-theme="moonlight"] .modcircle, html[data-theme="moonlight"] .scorebox input, html[data-theme="moonlight"] .bonbox input, html[data-theme="moonlight"] .hstat input, html[data-theme="moonlight"] .cbox2 input { box-shadow: inset 0 0 0 1px hsla(calc(var(--night-hue) + 0.8deg), 100%, 84.5%, .08), 0 0 8px hsla(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%, .06); } /* Explicit text hierarchy for the main sheet. */ html[data-theme="moonlight"] .abn, html[data-theme="moonlight"] .sb-hdr, html[data-theme="moonlight"] .dsbox-title, html[data-theme="moonlight"] .wtbl th, html[data-theme="moonlight"] .cbox2 label, html[data-theme="moonlight"] .hfl > label, html[data-theme="moonlight"] .hstat label, html[data-theme="moonlight"] .bonbox label, html[data-theme="moonlight"] .cbox label, html[data-theme="moonlight"] .inventory-subheading, html[data-theme="moonlight"] .equipped-slot-label, html[data-theme="moonlight"] .proficiency-type-label, html[data-theme="moonlight"] .armor-class-panel-title, html[data-theme="moonlight"] .inventory-filter-label, html[data-theme="moonlight"] .spellbook-subtitle, html[data-theme="moonlight"] .tabs .tab { color: var(--moon-gold-bright) !important; opacity: 1 !important; text-shadow: 0 0 7px hsla(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%, .13); } html[data-theme="moonlight"] .tabs .tab.on { color: #ffffff !important; border-bottom-color: var(--moon-gold-bright) !important; text-shadow: 0 0 8px hsla(calc(var(--night-hue) - 0.3deg), 100%, 79%, .38); } html[data-theme="moonlight"] .sn, html[data-theme="moonlight"] .sb, html[data-theme="moonlight"] .wtbl td input, html[data-theme="moonlight"] .sb-card textarea, html[data-theme="moonlight"] .condition-display, html[data-theme="moonlight"] .condition-explanation, html[data-theme="moonlight"] .condition-explanation strong, html[data-theme="moonlight"] .journal-note-entry, html[data-theme="moonlight"] .proficiency-value-row, html[data-theme="moonlight"] .extra-speed-row { color: var(--moon-text) !important; } html[data-theme="moonlight"] .hfl > input, html[data-theme="moonlight"] .hfl > select, html[data-theme="moonlight"] .cbox input, html[data-theme="moonlight"] .hp-cur-input, html[data-theme="moonlight"] .hp-max-input, html[data-theme="moonlight"] .modcircle input, html[data-theme="moonlight"] .scorebox input, html[data-theme="moonlight"] .bonbox input, html[data-theme="moonlight"] .hstat input, html[data-theme="moonlight"] .cbox2 input, html[data-theme="moonlight"] .sb, html[data-theme="moonlight"] .wtbl td input { color: #ffffff !important; border-color: var(--moon-gold-soft-line) !important; } /* Gold borders should remain clearly visible against ocean blue. */ html[data-theme="moonlight"] .ab, html[data-theme="moonlight"] .bonbox, html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .cbox, html[data-theme="moonlight"] .dsbox, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .condition-control, html[data-theme="moonlight"] .condition-explanation, html[data-theme="moonlight"] .inventory-card, html[data-theme="moonlight"] .inventory-equipment-card, html[data-theme="moonlight"] .inventory-unified-card, html[data-theme="moonlight"] .equipped-carried-card, html[data-theme="moonlight"] .features-traits-main, html[data-theme="moonlight"] .proficiencies-card, html[data-theme="moonlight"] .armor-class-panel, html[data-theme="moonlight"] .spellbook-card, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .wtbl th, html[data-theme="moonlight"] .wtbl td { border-color: var(--moon-gold-soft-line) !important; } html[data-theme="moonlight"] .sb-hdr, html[data-theme="moonlight"] .wtbl th { background: hsla(calc(var(--night-hue) + 13.6deg), 87.5%, 9.4%, .60); border-bottom-color: var(--moon-gold-line) !important; } html[data-theme="moonlight"] .sb-hdr::before, html[data-theme="moonlight"] .sb-hdr::after, html[data-theme="moonlight"] .insp, html[data-theme="moonlight"] .dot.on, html[data-theme="moonlight"] .svdie.on, html[data-theme="moonlight"] .condition-chip.active { color: var(--moon-gold-bright); } html[data-theme="moonlight"] .dot, html[data-theme="moonlight"] .svdie { border-color: hsla(calc(var(--night-hue) + 2.5deg), 100%, 88%, .82); } html[data-theme="moonlight"] .dot.on, html[data-theme="moonlight"] .svdie.on { background: var(--moon-gold); border-color: var(--moon-gold-bright); } html[data-theme="moonlight"] .dot.expert { box-shadow: 0 0 0 2px hsl(calc(var(--night-hue) + 10.3deg), 85%, 15.7%), 0 0 0 3.5px var(--moon-gold-bright); } html[data-theme="moonlight"] .sheet .is-manual { color: hsl(calc(var(--night-gold-hue) - 3.3deg), 85.2%, 68.2%) !important; } html[data-theme="moonlight"] .condition-chip.active { background: hsla(calc(var(--night-gold-hue) - 0.9deg), 100%, 77.1%, .22) !important; border-color: var(--moon-gold-bright) !important; } /* Preserve readable editing surfaces in tables and notes. */ html[data-theme="moonlight"] .wtbl td { background: hsla(calc(var(--night-hue) + 12.3deg), 90.2%, 8%, .44); } html[data-theme="moonlight"] .wtbl tr:hover td { background: hsla(calc(var(--night-hue) + 7.8deg), 69.3%, 26.9%, .38); } html[data-theme="moonlight"] .condition-chevron { border-color: var(--moon-gold-bright); } /* Small luminous edge without turning the UI neon. */ html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .ab, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .inventory-unified-card, html[data-theme="moonlight"] .equipped-carried-card { box-shadow: 0 3px 10px rgba(0,0,0,.22), 0 0 11px hsla(calc(var(--night-hue) + 1.5deg), 100%, 71.6%, .06), inset 0 0 0 1px hsla(calc(var(--night-gold-hue) + 2.3deg), 100%, 84.3%, .05); } /* ─── Moonlight phase 4: ghost-blue accents, readable panels, icon navigation ─── */ /* Proper graphical switch: no emoji glyphs. */ .theme-toggle { gap: 8px; padding: 6px 9px; border-radius: 999px; } .theme-toggle-track { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; width: 38px; height: 20px; padding: 2px; border: 1px solid rgba(43,56,102,.35); border-radius: 999px; background: rgba(43,56,102,.12); box-shadow: inset 0 1px 4px rgba(0,0,0,.14); } .theme-toggle-orb { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: #f4cf6b; box-shadow: 0 0 6px rgba(244,207,107,.48); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .theme-toggle-orb::before, .theme-toggle-orb::after { content: ''; position: absolute; inset: -3px; border: 1px solid rgba(244,207,107,.34); border-radius: 50%; } .theme-toggle-orb::after { inset: 3px 1px 3px 5px; border: 0; border-radius: 50%; background: transparent; transition: background .2s ease; } html[data-theme="moonlight"] .theme-toggle-track { border-color: hsla(calc(var(--night-hue) + 0.8deg), 100%, 85.9%, .58); background: hsla(calc(var(--night-hue) + 12.3deg), 91.8%, 9.6%, .70); } html[data-theme="moonlight"] .theme-toggle-orb { transform: translateX(17px); background: hsl(calc(var(--night-hue) - 2.5deg), 100%, 92.2%); box-shadow: 0 0 9px hsla(calc(var(--night-hue) - 2.3deg), 100%, 81.4%, .78); } html[data-theme="moonlight"] .theme-toggle-orb::before { border-color: hsla(calc(var(--night-hue) - 1.8deg), 100%, 85.3%, .46); } html[data-theme="moonlight"] .theme-toggle-orb::after { background: hsl(calc(var(--night-hue) + 10.9deg), 65.4%, 26.1%); } /* Fitting line-art images instead of emoji navigation icons. */ .tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .tab-icon, .nav-icon { display: inline-block; width: 16px; height: 16px; object-fit: contain; flex: 0 0 auto; } .nav-icon { width: 18px; height: 18px; } .overview-action-link::before, .overview-action-link::after { content: none !important; } html[data-theme="moonlight"] .tab-icon, html[data-theme="moonlight"] .nav-icon { filter: drop-shadow(0 0 5px hsla(calc(var(--night-hue) - 3.9deg), 100%, 79.4%, .58)); } /* Mobile switch should stay unobtrusive in crowded toolbars. */ @media (max-width: 700px) { .theme-toggle, .theme-toggle-compact { gap: 5px; padding: 4px 6px; font-size: 8px; letter-spacing: .35px; } .theme-toggle-track { width: 31px; height: 17px; padding: 2px; } .theme-toggle-orb { width: 11px; height: 11px; } html[data-theme="moonlight"] .theme-toggle-orb { transform: translateX(14px); } .sheet-toolbar .theme-toggle-label, .dm-header-actions .theme-toggle-label { display: none; } .tab { gap: 4px; padding-inline: 7px; } .tab-icon { width: 14px; height: 14px; } } html[data-theme="moonlight"] { /* Replace the earlier gold gilding with ghostly cyan-blue line work. */ --moon-ghost: hsl(calc(var(--night-hue) - 2.7deg), 100%, 86.3%); --moon-ghost-bright: hsl(calc(var(--night-hue) - 6.4deg), 100%, 94.3%); --moon-ghost-line: hsla(calc(var(--night-hue) - 1.5deg), 100%, 85.5%, .88); --moon-ghost-soft-line: hsla(calc(var(--night-hue) - 0.4deg), 84.7%, 76.9%, .58); --moon-ghost-faint: hsla(calc(var(--night-hue) - 0.9deg), 80.3%, 70.2%, .24); --gold: hsl(calc(var(--night-hue) - 1.6deg), 100%, 80.4%); --gold-deep: hsl(calc(var(--night-hue) - 1.7deg), 72.5%, 68.6%); --gold-light: hsl(calc(var(--night-hue) - 5.5deg), 100%, 91.6%); --moon-gold: hsl(calc(var(--night-hue) - 1.6deg), 100%, 80.4%); --moon-gold-bright: hsl(calc(var(--night-hue) - 6.4deg), 100%, 94.3%); --moon-gold-line: hsla(calc(var(--night-hue) - 1.5deg), 100%, 85.5%, .88); --moon-gold-soft-line: hsla(calc(var(--night-hue) - 0.4deg), 84.7%, 76.9%, .58); --moon-accent: hsl(calc(var(--night-hue) - 2.7deg), 100%, 86.3%); --moon-accent-2: hsl(calc(var(--night-hue) - 0.7deg), 100%, 72.9%); } html[data-theme="moonlight"] .sheet, html[data-theme="moonlight"] .start-page, html[data-theme="moonlight"] .dm-screen-header, html[data-theme="moonlight"] .initiative-panel { box-shadow: 0 12px 46px rgba(0,0,0,.52), 0 0 28px hsla(calc(var(--night-hue) + 1.2deg), 80.5%, 63.7%, .12), inset 0 0 0 1px hsla(calc(var(--night-hue) - 6.1deg), 100%, 93.1%, .10); } html[data-theme="moonlight"] .corner, html[data-theme="moonlight"] .title-banner { filter: drop-shadow(0 0 8px hsla(calc(var(--night-hue) - 3.7deg), 100%, 79.6%, .42)); } /* Ghostly frame color across the character-sheet UI. */ html[data-theme="moonlight"] .ab, html[data-theme="moonlight"] .bonbox, html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .cbox, html[data-theme="moonlight"] .dsbox, html[data-theme="moonlight"] .calendar-widget, html[data-theme="moonlight"] .calendar-sheet-bar, html[data-theme="moonlight"] .condition-control, html[data-theme="moonlight"] .condition-explanation, html[data-theme="moonlight"] .inventory-card, html[data-theme="moonlight"] .inventory-equipment-card, html[data-theme="moonlight"] .inventory-unified-card, html[data-theme="moonlight"] .equipped-carried-card, html[data-theme="moonlight"] .features-traits-main, html[data-theme="moonlight"] .proficiencies-card, html[data-theme="moonlight"] .armor-class-panel, html[data-theme="moonlight"] .spellbook-card, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .slotbox, html[data-theme="moonlight"] .journal-note-entry, html[data-theme="moonlight"] .journal-imported-notes, html[data-theme="moonlight"] .inventory-item-details, html[data-theme="moonlight"] .inventory-legacy-notes, html[data-theme="moonlight"] .wtbl th, html[data-theme="moonlight"] .wtbl td { border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] .sb-hdr, html[data-theme="moonlight"] .wtbl th, html[data-theme="moonlight"] .slotbox, html[data-theme="moonlight"] .journal-imported-notes > summary, html[data-theme="moonlight"] .inventory-legacy-notes > summary { border-color: var(--moon-ghost-line) !important; } html[data-theme="moonlight"] .sb-hdr, html[data-theme="moonlight"] .wtbl th { color: var(--moon-ghost-bright) !important; background: hsla(calc(var(--night-hue) + 13.6deg), 95.5%, 8.6%, .76) !important; text-shadow: 0 0 8px hsla(calc(var(--night-hue) - 0.1deg), 100%, 75.9%, .26); } /* HP controls: deep-water buttons with ghost-blue edges. */ html[data-theme="moonlight"] .hp-adj, html[data-theme="moonlight"] .card-hp-adj { border-color: var(--moon-ghost-line) !important; background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 5.5deg), 75%, 29.8%, .92), hsla(calc(var(--night-hue) + 10.8deg), 90%, 15.7%, .96)) !important; color: var(--moon-ghost-bright) !important; box-shadow: 0 0 8px hsla(calc(var(--night-hue) + 0.8deg), 100%, 70.8%, .18), inset 0 1px 0 rgba(255,255,255,.10); } html[data-theme="moonlight"] .hp-adj:hover, html[data-theme="moonlight"] .card-hp-adj:hover { background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 5.2deg), 69.8%, 40.2%, .96), hsla(calc(var(--night-hue) + 9.6deg), 87.4%, 21.8%, .98)) !important; box-shadow: 0 0 11px hsla(calc(var(--night-hue) - 2.1deg), 100%, 74.3%, .32), inset 0 1px 0 rgba(255,255,255,.15); } /* Feature buttons: readable but less cyan-flat than the previous pass. */ html[data-theme="moonlight"] .feature-add, html[data-theme="moonlight"] .table-actions .add-btn, html[data-theme="moonlight"] .journal-note-add, html[data-theme="moonlight"] .inventory-add, html[data-theme="moonlight"] .add-btn { border-color: var(--moon-ghost-line) !important; background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 5.5deg), 75%, 29.8%, .94), hsla(calc(var(--night-hue) + 10.8deg), 90%, 15.7%, .96)) !important; color: var(--moon-ghost-bright) !important; box-shadow: 0 0 8px hsla(calc(var(--night-hue) + 0.8deg), 100%, 70.8%, .14), inset 0 1px 0 rgba(255,255,255,.10); } html[data-theme="moonlight"] .feature-add:hover, html[data-theme="moonlight"] .table-actions .add-btn:hover, html[data-theme="moonlight"] .journal-note-add:hover, html[data-theme="moonlight"] .inventory-add:hover, html[data-theme="moonlight"] .add-btn:hover { background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 5.2deg), 69.8%, 40.2%, .96), hsla(calc(var(--night-hue) + 9.6deg), 87.4%, 21.8%, .98)) !important; box-shadow: 0 0 11px hsla(calc(var(--night-hue) - 2.1deg), 100%, 74.3%, .28), inset 0 1px 0 rgba(255,255,255,.15); } /* Spell slots: remove grey daylight shading and create clean deep-water tiles. */ html[data-theme="moonlight"] .slot-grid { gap: 8px; } html[data-theme="moonlight"] .slotbox { background: linear-gradient(180deg, hsla(calc(var(--night-hue) + 8deg), 76.1%, 22.9%, .86), hsla(calc(var(--night-hue) + 12.6deg), 90.8%, 12.7%, .92)) !important; box-shadow: inset 0 0 0 1px hsla(calc(var(--night-hue) - 5deg), 100%, 91.8%, .05), 0 0 8px hsla(calc(var(--night-hue) - 0.4deg), 79.9%, 62.9%, .10); } html[data-theme="moonlight"] .slotbox span { color: var(--moon-ghost-bright) !important; text-shadow: 0 0 7px hsla(calc(var(--night-hue) - 1.8deg), 100%, 75.7%, .22); } html[data-theme="moonlight"] .slotbox input { padding: 3px 2px; border-bottom-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 14.1deg), 92%, 9.8%, .36) !important; color: hsl(calc(var(--night-hue) - 5deg), 100%, 97.6%) !important; } html[data-theme="moonlight"] .slot-btn { border-color: var(--moon-ghost-soft-line); color: var(--moon-ghost-bright); } html[data-theme="moonlight"] .slot-row, html[data-theme="moonlight"] .slot-available { color: hsl(calc(var(--night-hue) - 5deg), 100%, 97.6%); } html[data-theme="moonlight"] .pact-slot-level option, html[data-theme="moonlight"] .hfl > select option { background: hsl(calc(var(--night-hue) + 10.3deg), 85%, 15.7%); } /* Journal / notes: darker surfaces, brighter labels and readable editing text. */ html[data-theme="moonlight"] .journal-note-toolbar, html[data-theme="moonlight"] .journal-note-entry, html[data-theme="moonlight"] .journal-note-body, html[data-theme="moonlight"] .journal-imported-notes, html[data-theme="moonlight"] .inventory-legacy-notes, html[data-theme="moonlight"] .inventory-notes-grid, html[data-theme="moonlight"] .other-inventory-card textarea, html[data-theme="moonlight"] .journal-note-text, html[data-theme="moonlight"] .journal-imported-notes textarea, html[data-theme="moonlight"] .inventory-notes-grid textarea { background: hsla(calc(var(--night-hue) + 13.7deg), 91.8%, 9.6%, .68) !important; color: hsl(calc(var(--night-hue) - 2.1deg), 100%, 95.9%) !important; } html[data-theme="moonlight"] .journal-note-toolbar span, html[data-theme="moonlight"] .journal-note-meta span, html[data-theme="moonlight"] .inventory-notes-grid span, html[data-theme="moonlight"] .journal-imported-notes > summary, html[data-theme="moonlight"] .inventory-legacy-notes > summary { color: var(--moon-ghost-bright) !important; } html[data-theme="moonlight"] .journal-note-toolbar input, html[data-theme="moonlight"] .journal-note-toolbar select, html[data-theme="moonlight"] .journal-note-meta input, html[data-theme="moonlight"] .journal-note-text, html[data-theme="moonlight"] .journal-imported-notes textarea, html[data-theme="moonlight"] .inventory-notes-grid textarea, html[data-theme="moonlight"] .other-inventory-card textarea { border-color: var(--moon-ghost-soft-line) !important; color: hsl(calc(var(--night-hue) - 2.1deg), 100%, 95.9%) !important; } /* Inventory details were still inheriting daylight ink on mobile. */ html[data-theme="moonlight"] .inventory-item-details { background: hsla(calc(var(--night-hue) + 13.7deg), 91.8%, 9.6%, .72) !important; color: hsl(calc(var(--night-hue) - 2.1deg), 100%, 95.9%) !important; border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] .inventory-item-details::placeholder, html[data-theme="moonlight"] .inventory-notes-grid textarea::placeholder, html[data-theme="moonlight"] .journal-note-text::placeholder, html[data-theme="moonlight"] .journal-imported-notes textarea::placeholder { color: hsla(calc(var(--night-hue) - 1.6deg), 100%, 92%, .56) !important; } /* Keep ghost lines visible without filling the whole sheet with bright blocks. */ html[data-theme="moonlight"] .sb-card, html[data-theme="moonlight"] .ab, html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .inventory-unified-card, html[data-theme="moonlight"] .equipped-carried-card, html[data-theme="moonlight"] .features-traits-main, html[data-theme="moonlight"] .journal-notes-card { box-shadow: 0 3px 10px rgba(0,0,0,.22), 0 0 12px hsla(calc(var(--night-hue) - 1.2deg), 91.6%, 72%, .08), inset 0 0 0 1px hsla(calc(var(--night-hue) - 2.8deg), 100%, 87.3%, .05); } /* ─── Moonlight phase 5: final ghost-blue cleanup and compact theme switch ─── */ /* Fixed-width symbol switch. The control no longer shifts when the active theme changes. */ .theme-toggle, .theme-toggle-compact { position: relative; display: inline-flex; flex: 0 0 auto; width: 58px; min-width: 58px; height: 30px; padding: 0 !important; border-radius: 999px; overflow: hidden; } .theme-toggle-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .theme-toggle-track { position: relative; display: block; width: 100%; height: 100%; padding: 3px; border: 0; border-radius: inherit; background: rgba(31, 51, 92, .18); box-shadow: inset 0 1px 5px rgba(0,0,0,.22); } .theme-toggle-track::before, .theme-toggle-track::after { position: absolute; top: 50%; z-index: 0; transform: translateY(-50%); font-family: Georgia, serif; font-size: 13px; line-height: 1; opacity: .78; pointer-events: none; } .theme-toggle-track::before { content: '☼'; left: 7px; color: #d7a84c; } .theme-toggle-track::after { content: '☾'; right: 7px; color: #6d8bb5; } .theme-toggle-orb { position: relative; z-index: 1; display: block; width: 22px; height: 22px; border: 1px solid rgba(142, 104, 35, .40); border-radius: 50%; background: #f4d37a; box-shadow: 0 0 8px rgba(226, 181, 81, .40); transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .theme-toggle-orb::before, .theme-toggle-orb::after { content: none; } html[data-theme="moonlight"] .theme-toggle, html[data-theme="moonlight"] .theme-toggle-compact { border-color: hsla(calc(var(--night-hue) - 1.7deg), 100%, 83.3%, .62) !important; background: hsla(calc(var(--night-hue) + 14deg), 90.9%, 8.6%, .92) !important; box-shadow: 0 0 8px hsla(calc(var(--night-hue) - 1deg), 100%, 72.5%, .18), inset 0 1px 0 rgba(255,255,255,.08) !important; } html[data-theme="moonlight"] .theme-toggle-track { background: hsla(calc(var(--night-hue) + 13.5deg), 95.1%, 8%, .94) !important; } html[data-theme="moonlight"] .theme-toggle-track::before { color: hsla(calc(var(--night-hue) + 4.3deg), 51.2%, 67.8%, .58); } html[data-theme="moonlight"] .theme-toggle-track::after { color: hsl(calc(var(--night-hue) - 5.6deg), 100%, 93.9%); text-shadow: 0 0 6px hsla(calc(var(--night-hue) - 2.9deg), 100%, 79.2%, .60); } html[data-theme="moonlight"] .theme-toggle-orb { transform: translateX(28px); border-color: hsla(calc(var(--night-hue) - 5deg), 100%, 86.5%, .78); background: hsl(calc(var(--night-hue) - 5deg), 100%, 92.4%); box-shadow: 0 0 10px hsla(calc(var(--night-hue) - 2.6deg), 100%, 79%, .64); } @media (max-width: 700px) { .theme-toggle, .theme-toggle-compact { width: 48px; min-width: 48px; height: 26px; } .theme-toggle-track { padding: 3px; } .theme-toggle-track::before, .theme-toggle-track::after { font-size: 11px; } .theme-toggle-track::before { left: 6px; } .theme-toggle-track::after { right: 6px; } .theme-toggle-orb { width: 18px; height: 18px; } html[data-theme="moonlight"] .theme-toggle-orb { transform: translateX(24px); } .overview-header-actions, .dm-header-actions, .sheet-toolbar { align-items: center; } } html[data-theme="moonlight"] { /* One accent language only: spectral blue-white. */ --gold: hsl(calc(var(--night-hue) - 1.3deg), 100%, 83.1%); --gold-deep: hsl(calc(var(--night-hue) - 0.9deg), 88.4%, 76.3%); --gold-light: hsl(calc(var(--night-hue) - 7.2deg), 100%, 94.7%); --moon-ghost: hsl(calc(var(--night-hue) - 4deg), 100%, 87.6%); --moon-ghost-bright: hsl(calc(var(--night-hue) - 10.9deg), 100%, 96.7%); --moon-ghost-line: hsla(calc(var(--night-hue) - 3.8deg), 100%, 87.3%, .92); --moon-ghost-soft-line: hsla(calc(var(--night-hue) - 0.8deg), 81.8%, 76.3%, .66); --moon-ghost-faint: hsla(calc(var(--night-hue) - 0.1deg), 74.5%, 67.6%, .22); --moon-line: hsla(calc(var(--night-hue) - 0.8deg), 81.8%, 76.3%, .66); --moon-line-strong: hsla(calc(var(--night-hue) - 3.8deg), 100%, 87.3%, .92); --moon-accent: hsl(calc(var(--night-hue) - 4deg), 100%, 87.6%); --moon-accent-2: hsl(calc(var(--night-hue) - 3.5deg), 100%, 73.7%); } /* Override the daylight page background itself, not only the parchment sheet. */ html[data-theme="moonlight"], html[data-theme="moonlight"] body, html[data-theme="moonlight"] body.dm-body { background-color: hsl(calc(var(--night-hue) + 14.4deg), 88.9%, 7.1%) !important; background-image: radial-gradient(circle at 50% -10%, hsla(calc(var(--night-hue) + 6.3deg), 65.7%, 41.2%, .28), transparent 42%), linear-gradient(180deg, hsl(calc(var(--night-hue) + 14.4deg), 88.9%, 7.1%) 0%, hsl(calc(var(--night-hue) + 11.5deg), 85.2%, 10.6%) 48%, hsl(calc(var(--night-hue) + 9.3deg), 81.4%, 16.9%) 100%) !important; background-attachment: fixed !important; } /* Eliminate inherited daylight gilding from cards, lines and dotted separators. */ html[data-theme="moonlight"] :where( .start-page, .sheet, .sheet-toolbar, .dm-screen-shell, .spell-picker-modal, .spell-editor-modal, .library-picker-modal, .npc-picker-modal ) * { border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] :where( .sb-hdr, .tracker-legend, .initiative-panel-header, .start-page-heading-row, .tabs, .tab.on, .spell-toolbar, .spell-picker-toolbar, .spell-card-topline, .spell-card-meta-grid, .spell-card-details, .inventory-mobile-sortbar, .inventory-subheading, .journal-imported-notes > summary, .inventory-legacy-notes > summary ) { border-color: var(--moon-ghost-line) !important; } /* DM screen: remove remaining amber borders, chips and glows. */ html[data-theme="moonlight"] .dm-screen-shell :where( .dm-screen-header, .initiative-panel, .round-display, .combatant-row, .combatant-order-medallion, .combatant-condition-chip, .combatant-condition-picker, .combatant-condition-info, .concentration-rune, .combatant-remove, .statblock-toggle, .inline-statblock, .inline-statblock-entry, .npc-picker-modal, .npc-picker-filters input, .npc-picker-filters select, .statblock-result-card ) { border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] .dm-screen-shell :where( .dm-screen-kicker, .dm-section-label, .round-display span, .tracker-legend, .active-turn-text, .inline-statblock-section h4, .statblock-toggle, .combatant-condition-open, .combatant-condition-remove, .npc-picker-close, .inline-statblock-close ) { color: var(--moon-ghost-bright) !important; } html[data-theme="moonlight"] .combatant-row.active-turn { border-color: var(--moon-ghost-line) !important; box-shadow: inset 4px 0 0 hsl(calc(var(--night-hue) - 2.4deg), 100%, 78.6%), inset 0 0 0 1px hsla(calc(var(--night-hue) - 6.1deg), 100%, 93.1%, .14), 0 5px 14px rgba(0,0,0,.20) !important; } /* Character sheet: spectral lines and icons throughout. */ html[data-theme="moonlight"] .sheet :where( .ab, .bonbox, .sb-card, .cbox, .dsbox, .slotbox, .condition-control, .condition-explanation, .spell-card, .inventory-card, .inventory-equipment-card, .inventory-unified-card, .equipped-carried-card, .equipped-slot-card, .equipped-slot-icon-wrap, .inventory-item-details, .journal-note-entry, .journal-imported-notes, .inventory-legacy-notes, .wtbl th, .wtbl td ) { border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] .sheet :where( .sb-hdr, .tab.on, .slotbox span, .inventory-mobile-sortbar label, .inventory-subheading, .equipped-slot-label, .journal-note-toolbar span, .journal-note-meta span ) { color: var(--moon-ghost-bright) !important; } /* Spell cards: convert V/S/M and prepared-state accents from amber to spectral blue. */ html[data-theme="moonlight"] .spell-card, html[data-theme="moonlight"] .spell-picker-result, html[data-theme="moonlight"] .spell-preview-card { border-color: var(--moon-ghost-soft-line) !important; } html[data-theme="moonlight"] .spell-school-icon, html[data-theme="moonlight"] .spell-picker-result img { border-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 5.9deg), 71.2%, 27.3%, .34) !important; box-shadow: 0 0 7px hsla(calc(var(--night-hue) - 2.5deg), 100%, 73.3%, .14); } html[data-theme="moonlight"] .spell-level-badge, html[data-theme="moonlight"] .spell-property-chip, html[data-theme="moonlight"] .spell-prepared-filter, html[data-theme="moonlight"] .spell-prepared-toggle { border-color: var(--moon-ghost-soft-line) !important; color: hsla(calc(var(--night-hue) - 5.5deg), 100%, 92.7%, .82) !important; background: hsla(calc(var(--night-hue) + 5.9deg), 73.4%, 28%, .28) !important; } html[data-theme="moonlight"] .spell-property-chip.active, html[data-theme="moonlight"] .spell-prepared-filter:has(input:checked), html[data-theme="moonlight"] .spell-prepared-toggle.is-prepared { border-color: var(--moon-ghost-line) !important; color: var(--moon-ghost-bright) !important; background: hsla(calc(var(--night-hue) + 1.5deg), 63.3%, 57.3%, .30) !important; text-shadow: 0 0 6px hsla(calc(var(--night-hue) - 4.5deg), 100%, 77.1%, .30) !important; } html[data-theme="moonlight"] .spell-prepared-filter span, html[data-theme="moonlight"] .spell-prepared-toggle span:first-child, html[data-theme="moonlight"] .spell-card-expand, html[data-theme="moonlight"] .spell-card-edit-inline, html[data-theme="moonlight"] .spell-card-btn, html[data-theme="moonlight"] .spell-picker-add, html[data-theme="moonlight"] .spell-picker-close { color: var(--moon-ghost-bright) !important; border-color: var(--moon-ghost-soft-line) !important; text-shadow: 0 0 6px hsla(calc(var(--night-hue) - 4.5deg), 100%, 77.1%, .24) !important; } /* Equipped / carried: remove amber selected-state highlight and grey icon tiles. */ html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card, html[data-theme="moonlight"] .equipped-slot-card { border-color: var(--moon-ghost-soft-line) !important; background: linear-gradient(135deg, hsla(calc(var(--night-hue) + 12.7deg), 88.6%, 13.7%, .78), hsla(calc(var(--night-hue) + 9.7deg), 84.4%, 17.6%, .52)) !important; } html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card.is-active, html[data-theme="moonlight"] .equipped-slot-card.is-active { border-color: var(--moon-ghost-line) !important; background: linear-gradient(135deg, hsla(calc(var(--night-hue) + 6.7deg), 83.1%, 25.5%, .76), hsla(calc(var(--night-hue) + 10.5deg), 87.7%, 15.9%, .68)) !important; box-shadow: inset 3px 0 0 hsl(calc(var(--night-hue) - 3.8deg), 100%, 77.8%), 0 0 9px hsla(calc(var(--night-hue) - 1.2deg), 100%, 70.8%, .12) !important; } html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-icon-wrap, html[data-theme="moonlight"] .equipped-layout.equipped-list-only .equipped-slot-card.is-active .equipped-slot-icon-wrap, html[data-theme="moonlight"] .equipped-slot-icon-wrap { border-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 5.5deg), 72.7%, 30.2%, .34) !important; box-shadow: inset 0 0 0 1px hsla(calc(var(--night-hue) - 7.4deg), 100%, 93.3%, .06), 0 0 6px hsla(calc(var(--night-hue) - 2deg), 100%, 72.4%, .10); } html[data-theme="moonlight"] .equipped-slot-icon { filter: drop-shadow(0 0 4px hsla(calc(var(--night-hue) - 6deg), 100%, 79.6%, .34)); } /* Mobile inventory cards: explicitly override every daylight ink color. */ @media (max-width: 768px) { html[data-theme="moonlight"] .inventory-mobile-sortbar, html[data-theme="moonlight"] .inventory-item-details { border-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 13.2deg), 93.2%, 11.6%, .82) !important; color: hsl(calc(var(--night-hue) - 7.4deg), 100%, 96.7%) !important; } html[data-theme="moonlight"] .inventory-item-details::placeholder { color: hsla(calc(var(--night-hue) - 3.6deg), 100%, 91.8%, .72) !important; } } /* Inline footer waves and other decorative SVG strokes should follow the spectral palette too. */ html[data-theme="moonlight"] svg path[stroke="#b8902c"], html[data-theme="moonlight"] svg path[stroke="#8a6918"], html[data-theme="moonlight"] svg path[stroke="#d6a838"] { stroke: hsl(calc(var(--night-hue) - 4.4deg), 100%, 86.3%) !important; filter: drop-shadow(0 0 3px hsla(calc(var(--night-hue) - 2.5deg), 100%, 76.5%, .26)); } /* ─── Moonlight phase 6: overview frame cleanup + truly compact mobile switch ─── */ /* Make the overview frame unmistakably spectral blue instead of champagne. */ html[data-theme="moonlight"] .start-page { border-color: hsla(calc(var(--night-hue) - 3.8deg), 100%, 77.8%, .92) !important; box-shadow: 0 10px 38px rgba(0, 0, 0, .48), 0 0 16px hsla(calc(var(--night-hue) + 1.8deg), 100%, 68.8%, .14), inset 0 0 0 1px hsla(calc(var(--night-hue) - 4.6deg), 100%, 90.2%, .08) !important; } html[data-theme="moonlight"] .start-page::before { border-color: hsla(calc(var(--night-hue) - 4.6deg), 100%, 82.2%, .58) !important; } html[data-theme="moonlight"] .start-page-heading-row { border-color: hsla(calc(var(--night-hue) - 4.6deg), 100%, 82.2%, .70) !important; } /* Neutralize the generic mobile .start-page button flex rule for the theme switch. */ .start-page button.theme-toggle, .start-page button.theme-toggle-compact, .sheet-toolbar button.theme-toggle, .dm-header-actions button.theme-toggle, .dm-header-actions button.theme-toggle-compact, .home-theme-toggle { flex: 0 0 58px !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 !important; margin: 0 !important; } @media (max-width: 700px) { .overview-header-actions { display: inline-flex !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; } .start-page button.theme-toggle, .start-page button.theme-toggle-compact, .sheet-toolbar button.theme-toggle, .dm-header-actions button.theme-toggle, .dm-header-actions button.theme-toggle-compact, .home-theme-toggle { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; max-width: 46px !important; height: 24px !important; min-height: 24px !important; max-height: 24px !important; padding: 0 !important; } .theme-toggle-track { padding: 3px !important; } .theme-toggle-track::before, .theme-toggle-track::after { font-size: 10px !important; } .theme-toggle-track::before { left: 5px !important; } .theme-toggle-track::after { right: 5px !important; } .theme-toggle-orb { width: 16px !important; height: 16px !important; } html[data-theme="moonlight"] .theme-toggle-orb { transform: translateX(22px) !important; } .index-accessibility-row, .overview-header-actions .accessibility-row { flex: 0 0 auto !important; width: auto !important; } } /* ─── Feature browser and defenses: Moonlight support ─────────────────── */ html[data-theme="moonlight"] .defenses-card, html[data-theme="moonlight"] .feature-browser-toolbar { border-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 13.2deg), 93.2%, 11.6%, .42) !important; } html[data-theme="moonlight"] .feature-browser-toolbar label > span, html[data-theme="moonlight"] .feature-filter-count, html[data-theme="moonlight"] .defense-type-cell .proficiency-type-label { color: var(--moon-ghost-bright) !important; } html[data-theme="moonlight"] .feature-browser-toolbar input, html[data-theme="moonlight"] .feature-browser-toolbar select, html[data-theme="moonlight"] .feature-filter-clear, html[data-theme="moonlight"] .defense-value-row input { border-color: var(--moon-ghost-soft-line) !important; background: hsla(calc(var(--night-hue) + 13.2deg), 93.2%, 11.6%, .66) !important; color: hsl(calc(var(--night-hue) - 7.4deg), 100%, 96.7%) !important; } html[data-theme="moonlight"] .feature-filter-clear:hover, html[data-theme="moonlight"] .feature-filter-clear:focus-visible { border-color: var(--moon-ghost-line) !important; background: hsla(calc(var(--night-hue) + 1.5deg), 63.3%, 57.3%, .22) !important; } /* ─── Feature cards and defenses — refined Moonlight layout ───────────── */ html[data-theme="moonlight"] .defense-type-cell .proficiency-type-label { color: var(--moon-ghost-bright) !important; } html[data-theme="moonlight"] .defense-type-cell .proficiency-add-row { border-color: var(--moon-ghost-soft-line) !important; color: var(--moon-ghost-bright) !important; } /* Feature cards: stable details toggle in Moonlight Mode */ /* ─── MOONLIGHT — NATIVE DROPDOWN OPTION CONTRAST ────────────────────── Browsers often render an opened