/* * torch.css — ShadowDark DM Companion * Torch tracker: the persistent corner widget (position:fixed, top-right of * the viewport, mounted on ) and the click-through management panel * (.action-modal family). No raw hex except * the proposed torch-glow token (flagged for KDL 2026-06-27 — see --color-torch-glow). * * Token proposal (flagged for KDL 2026-06-27, 2026-05-31): * --color-torch-glow — a brighter warm flame amber used ONLY for the lit/ * burning glow + flame fill. Distinct from the muted item amber * (--color-item-light #d39a4a, hue ~36) which marks the [LIGHT] verb on the * sheet: the glow needs to read as "actively burning," hotter and lighter. * Proposed #f0a23c. If KDL 2026-06-27 wants to fold this into the item amber instead, * change the one token below and nothing else moves. */ :root { --color-torch-glow: #f0a23c; /* PROPOSED — flame/ember amber, pending KDL 2026-06-27 */ } /* ============================================================ Corner widget — mounted on , fixed to the viewport top-right so it stays visible on scroll and across #app-content swaps. Stacking: z-index 100 sits ABOVE normal page content + the sticky header/mode-bar (z-index 40/50) but BELOW the overlay layer — modals, confirm dialogs, and the toast region are all z-index 1000, and the crit overlay is 9999 — so the widget never covers a modal or toast, and never gets buried under the header. The toast region is anchored bottom-right; this widget is top-right, so the two corners do not collide. ============================================================ */ .torch-widget { position: fixed; top: var(--space-md); right: var(--space-md); z-index: 100; background: var(--color-bg); /* opaque chip so page content can't show through it on scroll */ border: 1px solid var(--color-border); border-radius: 2px; padding: var(--space-xs) var(--space-sm); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 4.5rem; /* Cap height to the viewport so a long stack of torches scrolls inside the widget rather than running off the bottom of the screen. */ max-height: min(11rem, calc(100vh - 2 * var(--space-md))); overflow-y: auto; transition: border-color var(--transition-fast); /* The widget is a button-like control; reset UA button chrome. */ font: inherit; color: inherit; text-align: center; } .torch-widget:hover { border-color: var(--color-torch-glow); } .torch-widget:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Idle (no torches lit) — dim, unobtrusive, still clickable to open the panel. Lay the icon + "Unlit" out as a single horizontal, vertically-centered row; the active state keeps its default column stack of torch chips. */ .torch-widget.is-idle { opacity: 0.55; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-xs); } .torch-widget.is-idle:hover { opacity: 0.85; } /* Stack of active torch chips inside the widget. */ .torch-widget__list { display: flex; flex-direction: column; gap: var(--space-xs); } .torch-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-xs); row-gap: 0; } .torch-chip__icon { grid-row: 1 / span 2; width: 22px; height: 22px; } .torch-chip__time { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.1; color: var(--color-text); text-align: left; } .torch-chip__owner { font-family: var(--font-heading-ui); font-size: 0.6rem; letter-spacing: var(--ls-cinzel-caps); text-transform: uppercase; color: var(--color-text-muted); line-height: 1.1; text-align: left; /* Clamp long character names so the header layout never blows out. */ max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Idle affordance label, shown when nothing is lit. */ .torch-widget__idle-label { font-family: var(--font-heading-ui); font-size: 0.6rem; letter-spacing: var(--ls-cinzel-caps); text-transform: uppercase; color: var(--color-text-muted); } /* ============================================================ Torch flame glyph — the glow / flicker The flame is filled with the glow token; the stick lines stay stroked. A lit torch flickers; an idle/unlit torch is static and muted. ============================================================ */ .torch-flame { /* The flame path fill — set per-state below. */ fill: var(--color-torch-glow); } .torch-stick { stroke: var(--color-text-muted); fill: none; } /* Lit treatment — glow + gentle flicker on the flame. */ .torch-icon--lit .torch-flame { fill: var(--color-torch-glow); filter: drop-shadow(0 0 3px var(--color-torch-glow)) drop-shadow(0 0 6px rgba(240, 162, 60, 0.5)); animation: torch-flicker 2.4s ease-in-out infinite; transform-origin: 50% 70%; } .torch-icon--lit .torch-stick { stroke: var(--color-text); } /* Unlit / idle treatment — muted, no glow, no motion. */ .torch-icon--unlit .torch-flame { fill: var(--color-text-muted); opacity: 0.5; } @keyframes torch-flicker { 0%, 100% { opacity: 1; transform: scaleY(1) translateY(0); } 25% { opacity: 0.82; transform: scaleY(0.96) translateY(0.4px); } 50% { opacity: 0.94; transform: scaleY(1.04) translateY(-0.3px); } 75% { opacity: 0.78; transform: scaleY(0.98) translateY(0.2px); } } /* Accessibility: respect reduced-motion — static glow, no flicker. */ @media (prefers-reduced-motion: reduce) { .torch-icon--lit .torch-flame { animation: none; } } /* ============================================================ Management panel (opened from the widget) Reuses the .action-modal scrim + card; adds a torch list. ============================================================ */ .torch-panel__intro { font-family: var(--font-body); font-size: 0.95rem; color: var(--color-text-muted); margin: 0; } .torch-panel__light-btn { /* .btn base + a torch-glow accent via the item-light family. */ } /* Panel utility action row — currently just the lit/light verb (amber). */ .torch-panel__actions-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } .torch-panel__empty { font-family: var(--font-body); font-style: italic; color: var(--color-text-muted); margin: 0; padding: var(--space-sm) 0; } .torch-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); max-height: 50vh; overflow-y: auto; } .torch-row { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: 2px; } /* The torch's identity + controls live on one line; the mishap result (when present) stacks underneath, full width of the row. */ .torch-row__main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-sm); } /* Per-torch controls — Roll Mishap beside Extinguish. Wrap on narrow widths. */ .torch-row__controls { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; justify-content: flex-end; } /* "Roll Mishap" — a neutral DM utility, NOT the amber light verb, so it uses the secondary (bordered, transparent) treatment with a torch-glow hover tint. Shares geometry with the extinguish control beside it. */ .torch-row__mishap { background-color: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); font-family: var(--font-heading-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.4rem 0.8rem; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .torch-row__mishap:hover:not(:disabled) { color: var(--color-torch-glow); border-color: var(--color-torch-glow); } .torch-row__mishap:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .torch-row__mishap:disabled { opacity: 0.55; cursor: default; } /* Per-torch mishap result — persists on its own row until that torch is re-rolled. Inline, full width under the torch's main line. */ .torch-row__mishap-result { border: 1px solid var(--color-border); border-left: 3px solid var(--color-torch-glow); border-radius: 2px; padding: var(--space-xs) var(--space-sm); background: var(--color-surface); } .torch-row__mishap-result--error { border-left-color: var(--color-danger); } .torch-panel__mishap-roll { margin: 0 0 0.2rem; font-family: var(--font-heading-ui); font-size: 0.62rem; letter-spacing: var(--ls-cinzel-caps); text-transform: uppercase; color: var(--color-torch-glow); } .torch-panel__mishap-body { margin: 0; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text); line-height: 1.4; } /* Brief reveal pulse on a fresh roll so a repeat reads as new. */ .torch-row__mishap-result.is-rolled { animation: torch-mishap-reveal 0.32s ease-out; } @keyframes torch-mishap-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .torch-row__mishap-result.is-rolled { animation: none; } } .torch-row__icon { width: 28px; height: 28px; } .torch-row__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .torch-row__time { font-family: var(--font-mono); font-size: 1.1rem; color: var(--color-text); line-height: 1.1; } .torch-row__owner { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .torch-row__source { font-family: var(--font-heading-ui); font-size: 0.6rem; letter-spacing: var(--ls-cinzel-caps); text-transform: uppercase; color: var(--color-text-muted); } .torch-row__extinguish { background-color: transparent; color: var(--color-text-muted); border: 1px solid var(--color-border); font-family: var(--font-heading-ui); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.4rem 0.8rem; cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .torch-row__extinguish:hover { color: var(--color-danger); border-color: var(--color-danger); } .torch-row__extinguish:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 2px; } /* On small screens, tuck the fixed widget tighter into the corner and trim it so it shares the top band with the app title without crowding it. The title sits top-left; the widget stays top-right, so they don't overlap. */ @media (max-width: 640px) { .torch-widget { top: var(--space-sm); right: var(--space-sm); min-width: 0; padding: var(--space-xs); } /* Drop the per-chip owner label on narrow screens to keep the chip compact; the owner is still available in the management panel. */ .torch-chip__owner { max-width: 5rem; } }