/* letter cursor hides system pointer */ /** * glow.css — Latis Glow theme (shared). Wall, labels, buttons, marks, panels, cards, pills. * TTG game chrome (HUD slots, title flicker, board tubes) lives in tictacglow/tictacglow.css. * Zero-JS neon baseline always works; when glow.js activates a GPU pass, * keeps the CSS marble photo; the canvas multiplies shade. * Used by many games — theme via CSS variables. * * Tokens (override per brand / ionic.games theme): * --glow-bg, --glow-pink, --glow-lime, --glow-cyan, --glow-ambient, * --glow-title, --glow-bg-albedo, --glow-mark, --glow-mark-bloom*, * --glow-mark-bloom-x/o, --glow-mark-halo-x, --glow-mark-gain-x, --glow-mark-sat-x, * --glow-mark-filter, --glow-ink-shadow */ /* Exo 2 ExtraLight (200) — Natanael Gama / The Exo 2 Project Authors, SIL OFL 1.1. Self-hosted latin subset so game HTML never loads Google Fonts. */ @font-face { font-family: "Exo 2"; font-style: normal; font-weight: 200; font-display: optional; src: url("./exo-2-200.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --score-px: clamp(14px, 5vmin, 72px); /* First-paint type — same clamp as lux RESET / title CSS before JS writes. */ --slot: 33vw; --title-px: clamp(22px, 9vmin, 120px); /* Reserved first slot under neon bloom. Scores keep this a no-op (no ink halo). */ --glow-ink-shadow: 0 0 0 transparent; --glow-bg: #0c0810; --glow-pink: #ff2d55; --glow-magenta: #bc00ff; --glow-lime: #39ff14; --glow-cyan: #00f2ff; --glow-ambient: 0.22; --glow-title: #1a6cff; /* X: tight core + faded wash. Opaque 36–52px shadows fill the glyph AABB (a box). */ --glow-mark-bloom-x: #ff4d72; --glow-mark-bloom-x-soft: #ff8a9c; --glow-mark-bloom-x-deep: #ff24585c; --glow-mark-halo-x: #ff2d5520; --glow-mark-gain-x: 1.16; --glow-mark-sat-x: 1.18; --glow-mark-bloom-o: #39ff14; --glow-mark-bloom-o-soft: #b8ff9a; --glow-mark-bloom-o-deep: #39ff1499; /* Shared piece bloom — .glow-mark and .glow-cursor (not a hotter cursor stack). Small core, one thin outer wash (halo is ~transparent on O). */ --glow-mark-filter: brightness(var(--glow-mark-gain, 1)) saturate(var(--glow-mark-sat, 1)) drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px var(--glow-mark-bloom-soft)) drop-shadow(0 0 7px var(--glow-mark-bloom)) drop-shadow(0 0 13px var(--glow-mark-bloom-deep)) drop-shadow(0 0 24px var(--glow-mark-halo, transparent)); } /* CSS fallback wall (apps can replace via --glow-bg-albedo) */ .glow-wall, html.glow-app::before, html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--glow-bg); background-image: radial-gradient(ellipse 90% 75% at 50% 38%, transparent 12%, #000000d8 100%), linear-gradient(180deg, #1a0a28aa 0%, #0c0810cc 100%), var(--glow-bg-albedo, none); background-size: auto, auto, cover; background-repeat: no-repeat; background-position: center, center, center; filter: saturate(0.15) brightness(1.05) contrast(1.1); } html { background-color: #1a1a1e; } html.glow-app { cursor: none; } /* Utility: additive tube text */ .glow-text { color: #fff; text-shadow: 0 0 4px #fff, 0 0 12px var(--glow-cyan), 0 0 28px var(--glow-cyan); } .glow-text-pink { text-shadow: 0 0 4px #fff, 0 0 12px var(--glow-pink), 0 0 28px var(--glow-pink); } .glow-text-lime { text-shadow: 0 0 4px #fff, 0 0 12px var(--glow-lime), 0 0 28px var(--glow-lime); } /* CSS bloom pool (fallback / no GPU) */ .glow-bloom { position: relative; } .glow-bloom::before { content: ""; position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; z-index: -1; mix-blend-mode: plus-lighter; background: radial-gradient( circle closest-side, color-mix(in srgb, var(--glow-bloom-color, var(--glow-cyan)) 70%, #fff) 0%, color-mix(in srgb, var(--glow-bloom-color, var(--glow-cyan)) 30%, transparent) 50%, transparent 72% ); } @supports not (mix-blend-mode: plus-lighter) { .glow-bloom::before { mix-blend-mode: screen; } } /* GPU canvas: full viewport / LUX shell (head+body+tail), not the board box. Portrait: tail under the board. Landscape: tail title strip beside it. */ .glow-canvas { position: fixed; inset: 0; width: 100%; height: 100%; width: 100dvw; height: 100dvh; /* 0 = above html::before marble, below lux-head/body/tail */ z-index: 0; pointer-events: none; display: block; mix-blend-mode: multiply; /* Mid-drag: buffer stays frozen; CSS box tracks the viewport so last shade stays on screen. */ object-fit: fill; } /* Mid-drag: keep last GL frame visible (do not hide — marble-only looks different). */ html[data-resizing] .glow-canvas { visibility: visible; } /* GPU shade multiplies this full-res cover photo — do not hide the marble. */ html[data-glow="gpu"]::before { background-image: var(--glow-bg-albedo, none) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; filter: brightness(0.92) saturate(0.88) contrast(1.12) !important; background-color: #1a1a1e !important; } html[data-glow="gpu"] .glow-bloom::before { opacity: 0.35; /* keep a little CSS tube, main light is shader */ } html[data-glow="css"] { /* explicit fallback mode */ } /* ── Neon HUD / board kit (titles, tubes, marks, chrome) ── */ /* Body grid must not paint over the wall in the head/tail strips. */ body { background: transparent !important; } lux-body { background: transparent !important; /* Spine RESET uses overflow:hidden — that clips CSS bloom at the board and would clip a misplaced glow canvas. Wash must fall off by distance into lux-head (top / wide-left) and lux-tail (bottom / wide-right). */ overflow: visible !important; z-index: 1; } lux-body::before, lux-body::after { content: none !important; } /* Head/tail above body so title + chrome aren't covered by body paint */ lux-head, lux-tail { background: transparent !important; z-index: 2; overflow: visible !important; } :is(lux-cell,lux-box,lux) { padding: 0.35em; } :is(lux-cell,lux-box,lux)[max], :is(lux-cell,lux-box,lux):has(> :is(lux-cell,lux-box,lux)) { padding: 0; } /* ── Head — three upright title cells (tic/tac/toe); equalStrip stacks in wide ── */ /* Rare subtle dips — very long steady stretches; dip only ~half as deep */ @keyframes glow-flicker { 0%, 93%, 97%, 100% { opacity: 1; } 95%, 96% { opacity: 0.78; } } /* Shared neon pulse — same stack as .glow-label (animation replaces text-shadow while running, so keyframes must not use a weaker special-case recipe). */ @keyframes glow-title-flicker { 0%, 93%, 97%, 100% { text-shadow: var(--glow-ink-shadow), -0.08em -0.08em 0.4em #fff, 0.08em 0.08em 0.4em #fff, 0 0 4px #fff, 0 0 0.5em var(--glow-title-neon, #08f), 0 0 10px var(--glow-title-neon, #08f), 0 0 1em var(--glow-title-neon, #08f), 0 0 1.5em var(--glow-title-neon, #08f), 0 0 18px var(--glow-title-neon, #08f), 0 0 2em var(--glow-title-neon, #08f), 0 0 2.75em var(--glow-title-neon, #08f); } 95%, 96% { text-shadow: var(--glow-ink-shadow), -0.04em -0.04em 0.22em #fff9, 0.04em 0.04em 0.22em #fff9, 0 0 2px #fff6, 0 0 0.35em color-mix(in srgb, var(--glow-title-neon, #08f) 55%, transparent), 0 0 6px color-mix(in srgb, var(--glow-title-neon, #08f) 45%, transparent), 0 0 0.75em color-mix(in srgb, var(--glow-title-neon, #08f) 40%, transparent), 0 0 12px color-mix(in srgb, var(--glow-title-neon, #08f) 30%, transparent); } } /* HUD scores — same neon hue, shorter / lower-alpha bloom than titles. */ @keyframes glow-score-flicker { 0%, 93%, 97%, 100% { text-shadow: -0.02em -0.02em 0.1em #fff6, 0.02em 0.02em 0.1em #fff6, 0 0 1px #fffa, 0 0 0.14em color-mix(in srgb, var(--glow-title-neon, #08f) 52%, transparent), 0 0 3px color-mix(in srgb, var(--glow-title-neon, #08f) 32%, transparent), 0 0 0.26em color-mix(in srgb, var(--glow-title-neon, #08f) 18%, transparent); } 95%, 96% { text-shadow: -0.014em -0.014em 0.07em #fff5, 0.014em 0.014em 0.07em #fff5, 0 0 1px #fff8, 0 0 0.1em color-mix(in srgb, var(--glow-title-neon, #08f) 36%, transparent), 0 0 2px color-mix(in srgb, var(--glow-title-neon, #08f) 22%, transparent), 0 0 0.16em color-mix(in srgb, var(--glow-title-neon, #08f) 12%, transparent); } } lux-tail > :is(lux-cell,lux-box,lux).glow-label { --glow-title-neon: #1a6cff; /* electric blue gas — shared with grid tubes */ /* Fight spine equalStrip inline overflow:hidden (clips glow) */ overflow: visible !important; padding: 0; margin: 0; /* Exo 2 regular 200 — upright neon titles */ font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-style: normal; letter-spacing: 0.02em; line-height: 1; text-align: center; text-transform: uppercase; user-select: none; white-space: nowrap; writing-mode: horizontal-tb; text-orientation: mixed; transform: none; /* Slot token when JS writes it; vmin clamp before first writeLiveType */ font-size: var(--title-px, clamp(22px, 9vmin, 120px)); color: #fff; -webkit-text-fill-color: #fff; /* Same shared halo as .glow-label / glow-title-flicker (no weaker GLOW recipe) */ text-shadow: var(--glow-ink-shadow), -0.08em -0.08em 0.4em #fff, 0.08em 0.08em 0.4em #fff, 0 0 4px #fff, 0 0 0.5em var(--glow-title-neon), 0 0 10px var(--glow-title-neon), 0 0 1em var(--glow-title-neon), 0 0 1.5em var(--glow-title-neon), 0 0 18px var(--glow-title-neon), 0 0 2em var(--glow-title-neon), 0 0 2.75em var(--glow-title-neon); animation: glow-title-flicker var(--glow-flicker-dur, 2.2s) infinite alternate; animation-delay: var(--glow-flicker-delay, 0s); opacity: 1; } /* ── Head chrome (HUD) ── */ lux-head > :is(lux-cell,lux-box,lux) { /* Visible so shared .glow-label / .glow-btn halos are not clipped */ overflow: visible !important; gap: 0.12em; padding: 0.16em 0.22em; /* Fit into fixed --e track — never grow upstream chrome */ min-width: 0; min-height: 0; } /* Neon copy — titles, HUD, scores, FPS */ .glow-label { --glow-title-neon: #1a6cff; font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-style: normal; font-size: clamp(18px, 4.2vmin, 42px); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: #fff; -webkit-text-fill-color: #fff; /* Content-sized — wrap only with explicit [wrap]. */ flex: 0 0 auto; align-self: center; height: auto; max-height: none; white-space: nowrap; user-select: none; /* Shared HUD/title neon — em layers scale with type; px floors keep small labels (FPS) readable without a separate glow recipe. */ text-shadow: var(--glow-ink-shadow), -0.08em -0.08em 0.4em #fff, 0.08em 0.08em 0.4em #fff, 0 0 4px #fff, 0 0 0.5em var(--glow-title-neon), 0 0 10px var(--glow-title-neon), 0 0 1em var(--glow-title-neon), 0 0 1.5em var(--glow-title-neon), 0 0 18px var(--glow-title-neon), 0 0 2em var(--glow-title-neon), 0 0 2.75em var(--glow-title-neon); } /* HUD X / O / TIE: same neon tokens, weaker bloom than titles (no ink / stroke). */ .glow-label.is-score { --glow-ink-shadow: 0 0 0 transparent; -webkit-text-stroke: 0; paint-order: normal; text-shadow: -0.02em -0.02em 0.1em #fff6, 0.02em 0.02em 0.1em #fff6, 0 0 1px #fffa, 0 0 0.14em color-mix(in srgb, var(--glow-title-neon) 52%, transparent), 0 0 3px color-mix(in srgb, var(--glow-title-neon) 32%, transparent), 0 0 0.26em color-mix(in srgb, var(--glow-title-neon) 18%, transparent); animation: glow-score-flicker var(--glow-flicker-dur, 3.6s) infinite alternate; } .glow-label.is-x { --glow-title-neon: var(--glow-mark-bloom-x); } .glow-label.is-o { --glow-title-neon: var(--glow-mark-bloom-o); } .glow-label.is-gold, .glow-label.is-win, .glow-label.is-draw, .glow-label.is-tie { --glow-title-neon: #f0d27a; } /* hue only — same .is-score stack as X/O */ .glow-label.is-hi { --glow-title-neon: #39ff14; } .glow-label.is-mid { --glow-title-neon: #f0d27a; } .glow-label.is-lo { --glow-title-neon: #ff2d55; } .glow-label.is-win { animation: glow-flicker 0.9s ease-in-out 2; } @keyframes glow-mark-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .glow-mark { display: grid; place-items: center; width: clamp(22px, 5vmin, 48px); height: clamp(22px, 5vmin, 48px); overflow: visible; } /* Placement fade — board + HUD hosts add .is-in on insert */ .glow-mark.is-in { animation: glow-mark-in 240ms ease both; } .glow-mark > .glow-core { width: 100%; height: 100%; display: block; overflow: visible; filter: var(--glow-mark-filter); animation: glow-mark-pulse 2.4s ease-in-out infinite; } .glow-mark.is-x, .glow-label.is-x .glow-mark { --glow-mark-bloom: var(--glow-mark-bloom-x); --glow-mark-bloom-soft: var(--glow-mark-bloom-x-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-x-deep); --glow-mark-halo: var(--glow-mark-halo-x); --glow-mark-gain: var(--glow-mark-gain-x); --glow-mark-sat: var(--glow-mark-sat-x); } .glow-mark.is-o, .glow-label.is-o .glow-mark { --glow-mark-bloom: var(--glow-mark-bloom-o); --glow-mark-bloom-soft: var(--glow-mark-bloom-o-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-o-deep); } .glow-mark > .glow-core line, .glow-mark > .glow-core circle { fill: none; stroke: #fffef8; stroke-width: 3.5; stroke-linecap: round; } /* Floating cursor = exact board piece (same strokes + bloom vars), stacked for fade */ .glow-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 64px; height: 64px; display: grid; place-items: center; overflow: visible; will-change: transform; background: transparent; border: none; box-shadow: none; outline: none; } .glow-cursor[hidden] { display: none !important; } .glow-cursor.is-x { --glow-mark: var(--glow-mark-bloom-x); --glow-mark-bloom: var(--glow-mark-bloom-x); --glow-mark-bloom-soft: var(--glow-mark-bloom-x-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-x-deep); --glow-mark-halo: var(--glow-mark-halo-x); --glow-mark-gain: var(--glow-mark-gain-x); --glow-mark-sat: var(--glow-mark-sat-x); } .glow-cursor.is-o { --glow-mark: #5cff3a; --glow-mark-bloom: var(--glow-mark-bloom-o); --glow-mark-bloom-soft: var(--glow-mark-bloom-o-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-o-deep); } .glow-cursor > .glow-core { grid-area: 1 / 1; width: 100%; height: 100%; display: block; overflow: visible; background: transparent; opacity: 1; transition: opacity 0.14s ease; /* Same bloom recipe as .glow-mark (shared --glow-mark-filter; no hotter cursor). */ filter: var(--glow-mark-filter); animation: glow-mark-pulse 2.4s ease-in-out infinite; } .glow-cursor > .glow-core.is-leaving, .glow-cursor > .glow-core.is-entering { animation: none; filter: var(--glow-mark-filter); } .glow-cursor > .glow-core.is-leaving { opacity: 0; pointer-events: none; } .glow-cursor > .glow-core.is-entering { opacity: 0; } .glow-cursor > .glow-core line, .glow-cursor > .glow-core circle { fill: none; stroke: #fffef8; stroke-width: 3.5; stroke-linecap: round; } /* Glowing system-style pointer (off-board) */ .glow-cursor-ptr { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 28px; height: 28px; overflow: visible; will-change: transform; } .glow-cursor-ptr[hidden] { display: none !important; } .glow-cursor-ptr-svg { display: block; width: 28px; height: 28px; overflow: visible; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 4px #7ec8ff) drop-shadow(0 0 10px #1a6cff) drop-shadow(0 0 18px #1a6cffaa); } .glow-cursor-ptr-svg path { fill: #eaf4ff; stroke: #1a6cff; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; } .glow-btn { --glow-title-neon: var(--glow-pink, #ff2d55); appearance: none; cursor: none; position: relative; border-radius: 999px; border: 2px solid #fff; padding: 0.55em 1.35em; /* Content-sized pill — never stretch into slot slack. */ flex: 0 0 auto; align-self: center; height: auto; max-height: none; white-space: nowrap; /* Beat base .glow-btn gradient + UA button chrome */ background: none !important; background-color: transparent !important; background-image: none !important; color: #fff; -webkit-text-fill-color: #fff; font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-size: clamp(10px, min(2.8vmin, calc(var(--slot, 33vw) * 0.055)), 20px); letter-spacing: 0.18em; text-transform: uppercase; /* Same shared letter wash as .glow-label (keyframes also use this stack) */ text-shadow: -0.08em -0.08em 0.4em #fff, 0.08em 0.08em 0.4em #fff, 0 0 4px #fff, 0 0 0.5em var(--glow-title-neon), 0 0 10px var(--glow-title-neon), 0 0 1em var(--glow-title-neon), 0 0 1.5em var(--glow-title-neon), 0 0 18px var(--glow-title-neon), 0 0 2em var(--glow-title-neon), 0 0 2.75em var(--glow-title-neon); /* Thin rim bloom only — wide soft shadows read as a filled plate */ box-shadow: 0 0 1px #fff, 0 0 3px color-mix(in srgb, var(--glow-title-neon) 80%, #fff), 0 0 8px var(--glow-title-neon), 0 0 14px color-mix(in srgb, var(--glow-title-neon) 45%, transparent); transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease; } .glow-btn:hover { filter: brightness(1.12); box-shadow: 0 0 2px #fff, 0 0 5px color-mix(in srgb, var(--glow-title-neon) 85%, #fff), 0 0 10px var(--glow-title-neon), 0 0 18px color-mix(in srgb, var(--glow-title-neon) 50%, transparent); } .glow-btn:active { transform: scale(0.97); filter: brightness(0.92); } .glow-brand { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.22em; padding-inline: 0.15em; padding-bottom: env(safe-area-inset-bottom, 0px); text-decoration: none; cursor: none; color: #f2eaff; -webkit-text-fill-color: #f2eaff; opacity: 0.92; transition: opacity 0.15s ease, filter 0.15s ease; } .glow-brand:hover { opacity: 1; filter: brightness(1.12) drop-shadow(0 0 8px #00f2ff66); } .glow-brand img { display: block; width: clamp(72px, 16vmin, 120px); height: auto; pointer-events: none; } /* Wide: HUD labels stay upright (typography — rails live in lux.js). */ html[data-o="w"] lux-head > :is(lux-cell,lux-box,lux) { writing-mode: horizontal-tb; } /* ── Store / multi-product primitives (ionic.games) ── */ .glow-panel { --glow-frame: var(--glow-magenta, var(--glow-pink, #bc00ff)); position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 1rem; border: 1.5px solid color-mix(in srgb, var(--glow-frame) 75%, #fff); background: color-mix(in srgb, var(--glow-bg, #0a0515) 82%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--glow-frame) 45%, transparent), 0 0 24px color-mix(in srgb, var(--glow-frame) 22%, transparent), inset 0 0 24px color-mix(in srgb, var(--glow-frame) 8%, transparent); } .glow-card { --glow-frame: var(--glow-magenta, var(--glow-pink, #bc00ff)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 38%); gap: 0.85rem 1rem; align-items: stretch; padding: 0.85rem 1rem; border-radius: 1rem; border: 1.5px solid color-mix(in srgb, var(--glow-frame) 70%, #fff); background: color-mix(in srgb, #12081c 88%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--glow-frame) 40%, transparent), 0 0 28px color-mix(in srgb, var(--glow-cyan, #00f2ff) 12%, transparent); min-width: 0; } .glow-card > .glow-copy { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .glow-card .glow-title { margin: 0; font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif; font-weight: 200; font-size: clamp(1.1rem, 2.4vmin, 1.65rem); letter-spacing: 0.04em; color: var(--glow-cyan, #00f2ff); text-shadow: 0 0 0.35em var(--glow-cyan, #00f2ff), 0 0 0.85em var(--glow-cyan, #00f2ff); } .glow-card .glow-desc { margin: 0; font: 400 0.85rem/1.35 ui-sans-serif, system-ui, sans-serif; color: color-mix(in srgb, #d8c8f0 70%, #8878a8); } .glow-pill { --glow-frame: var(--glow-magenta, var(--glow-pink, #bc00ff)); appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; padding: 0.4em 1em; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--glow-frame) 70%, #fff); background: color-mix(in srgb, #0c0614 70%, transparent); color: #f2eaff; font: 500 0.85rem/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; box-shadow: 0 0 10px color-mix(in srgb, var(--glow-frame) 35%, transparent); transition: filter 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .glow-pill:hover, .glow-pill.is-on { filter: brightness(1.12); border-color: color-mix(in srgb, var(--glow-cyan, #00f2ff) 55%, var(--glow-frame)); box-shadow: 0 0 12px color-mix(in srgb, var(--glow-frame) 45%, transparent), 0 0 18px color-mix(in srgb, var(--glow-cyan, #00f2ff) 25%, transparent); } .glow-media { --glow-frame: var(--glow-cyan, #00f2ff); display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0.75rem; border: 1.5px solid color-mix(in srgb, var(--glow-frame) 75%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--glow-frame) 40%, transparent), 0 0 20px color-mix(in srgb, var(--glow-frame) 18%, transparent); background: #0a0610; } .glow-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; align-items: center; } .glow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; min-width: 0; } /* Generic accent aliases (TTT keeps is-x / is-o) */ .glow-label.is-a, .glow-mark.is-a { --glow-title-neon: var(--glow-mark-bloom-x); --glow-mark-bloom: var(--glow-mark-bloom-x); --glow-mark-bloom-soft: var(--glow-mark-bloom-x-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-x-deep); --glow-mark-halo: var(--glow-mark-halo-x); --glow-mark-gain: var(--glow-mark-gain-x); --glow-mark-sat: var(--glow-mark-sat-x); } .glow-label.is-b, .glow-mark.is-b { --glow-title-neon: var(--glow-mark-bloom-o); --glow-mark-bloom: var(--glow-mark-bloom-o); --glow-mark-bloom-soft: var(--glow-mark-bloom-o-soft); --glow-mark-bloom-deep: var(--glow-mark-bloom-o-deep); } @media (prefers-reduced-motion: reduce) { .glow-mark.is-in { animation: none; } }