/* book-theme-night.css :: Tron-grid + magenta gaming-rig skin (T104.5). * * Default theme. Activated by body.night class (set by the no-flicker * init script in ). * * Inherits structural rules from book-base.css and overrides the * 5 named palette tokens here. Adds the CRT scanline overlay, * spark animations, glow halos, and silkscreen text-shadows that * make the night skin feel like a gaming rig boot screen. */ body.night { --text-primary: #e8f4fa; --text-secondary: #9fb6c8; --text-muted: #7a93a8; --bg-page: #050810; --bg-card: #0a1018; } body.night { background-image: linear-gradient(135deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px), linear-gradient(45deg, rgba(26, 77, 42, 0.04) 1px, transparent 1px), radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.04), transparent 40%), radial-gradient(circle at 80% 20%, rgba(255, 46, 136, 0.03), transparent 40%); background-size: 24px 24px, 80px 80px, 100% 100%, 100% 100%; } body.night::before { content: ''; position: fixed; top: -40px; right: -40px; width: 280px; height: 280px; background-image: repeating-linear-gradient(60deg, transparent 0 18px, rgba(0, 212, 255, 0.08) 18px 19px), repeating-linear-gradient(-60deg, transparent 0 18px, rgba(0, 212, 255, 0.08) 18px 19px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(0, 212, 255, 0.08) 18px 19px); -webkit-mask-image: radial-gradient(circle at top right, black 10%, transparent 70%); mask-image: radial-gradient(circle at top right, black 10%, transparent 70%); pointer-events: none; z-index: 0; } /* ── CRT layers ────────────────────────────────────────────── */ body.night .crt-scanlines { position: fixed; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0px, rgba(0, 0, 0, 0.18) 1px, transparent 1px, transparent 3px); pointer-events: none; z-index: 9997; } body.night .crt-vignette { position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; z-index: 9998; } body.night .crt-band { position: fixed; left: 0; right: 0; height: 90px; background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.025) 40%, rgba(0, 212, 255, 0.04) 50%, rgba(255, 255, 255, 0.025) 60%, transparent 100%); pointer-events: none; z-index: 9996; animation: band-roll 8s linear infinite; } @keyframes band-roll { 0% { top: -10%; } 100% { top: 110%; } } /* ── Ambient sparks ────────────────────────────────────────── */ body.night .spark { position: fixed; width: 80px; height: 1px; pointer-events: none; z-index: 1; opacity: 0; filter: blur(0.4px); } body.night .spark-1 { top: 14%; left: -100px; background: linear-gradient(90deg, transparent, var(--brand) 50%, transparent); box-shadow: 0 0 8px var(--brand), 0 0 14px rgba(0, 212, 255, 0.5); animation: spark-fly-r 14s linear infinite; } body.night .spark-2 { top: 68%; right: -100px; background: linear-gradient(90deg, transparent, var(--magenta) 50%, transparent); box-shadow: 0 0 8px var(--magenta), 0 0 14px rgba(255, 46, 136, 0.5); animation: spark-fly-l 22s linear infinite; animation-delay: 7s; } @keyframes spark-fly-r { 0%, 88% { opacity: 0; transform: translate(0, 0); } 90% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; transform: translate(110vw, 32vh); } } @keyframes spark-fly-l { 0%, 88% { opacity: 0; transform: translate(0, 0); } 90% { opacity: 1; } 98% { opacity: 1; } 100% { opacity: 0; transform: translate(-110vw, -22vh); } } /* ── Click sparks (JS-driven) ─────────────────────────────── */ .click-spark { position: fixed; width: 2px; height: 2px; border-radius: 50%; pointer-events: none; z-index: 10000; background: var(--brand); box-shadow: 0 0 6px var(--brand), 0 0 10px var(--brand); } .click-spark.magenta { background: var(--magenta); box-shadow: 0 0 6px var(--magenta), 0 0 10px var(--magenta); } /* ── Card glow + corner brackets ─────────────────────────── */ body.night .card { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02); } body.night .card::before, body.night .card::after { content: ''; position: absolute; width: 12px; height: 12px; border: 1px solid var(--brand); opacity: 0.4; } body.night .card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } body.night .card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } @keyframes card-pulse { 0% { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02); } 20% { box-shadow: 0 0 0 2px var(--brand), 0 0 60px rgba(0, 212, 255, 0.6), 0 0 120px rgba(255, 46, 136, 0.3), inset 0 0 40px rgba(0, 212, 255, 0.15); } 100% { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.04), 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02); } } body.night .card.discharge { animation: card-pulse 700ms ease-out; } /* ── Text shadows (silkscreen + headings) ─────────────────── */ body.night .status-dot { box-shadow: 0 0 6px var(--ok); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } body.night .silk-tag { text-shadow: -0.5px 0 0 rgba(255, 46, 136, 0.5), 0.5px 0 0 rgba(0, 212, 255, 0.5); } body.night .silk-tag.clickable:hover { color: var(--brand); border-color: var(--brand); background: rgba(0, 212, 255, 0.08); box-shadow: 0 0 8px rgba(0, 212, 255, 0.3); } body.night h1 { text-shadow: -0.5px 0 0 rgba(255, 46, 136, 0.5), 0.5px 0 0 rgba(0, 212, 255, 0.5); } /* ── Field caret cursor ─────────────────────────────────── */ body.night .field:focus-within label::after, body.night .field-group:focus-within label::after { content: ''; display: inline-block; width: 7px; height: 11px; background: var(--brand); margin-left: 4px; vertical-align: -1px; animation: blink 1.1s steps(1, end) infinite; box-shadow: 0 0 6px var(--brand); } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } body.night .meeting-type-option:hover { color: var(--brand); } body.night select:focus, body.night input:focus, body.night textarea:focus { border-color: var(--brand); background: #0a1420; box-shadow: 0 0 0 1px var(--brand), 0 0 12px rgba(0, 212, 255, 0.35), inset 0 0 12px rgba(0, 212, 255, 0.05); } /* ── Slot button hover/selected glow ─────────────────────── */ body.night .slot-btn:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4), 0 0 10px rgba(0, 212, 255, 0.25); } body.night .slot-btn.selected { border-color: var(--brand); color: var(--brand); background: rgba(0, 212, 255, 0.08); box-shadow: 0 0 0 1px var(--brand), 0 0 14px rgba(0, 212, 255, 0.45), inset 0 0 8px rgba(0, 212, 255, 0.1); font-weight: 700; } body.night .slot-btn.selected::before { content: '●'; position: absolute; top: 3px; right: 5px; font-size: 7px; color: var(--brand); } /* ── Primary button glow chain ───────────────────────────── */ body.night button.primary, body.night button.danger { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2), 0 0 14px rgba(0, 212, 255, 0.25), inset 0 0 12px rgba(0, 212, 255, 0.04); } body.night button.primary:hover:not(:disabled) { color: var(--magenta); border-color: var(--magenta); background: rgba(255, 46, 136, 0.04); box-shadow: 0 0 0 1px var(--magenta), 0 0 24px rgba(255, 46, 136, 0.6), 0 0 48px rgba(255, 46, 136, 0.25), inset 0 0 16px rgba(255, 46, 136, 0.08); } body.night button.primary.charging { box-shadow: 0 0 0 1px var(--magenta), 0 0 32px rgba(255, 46, 136, 0.8), 0 0 80px rgba(255, 46, 136, 0.4), inset 0 0 24px rgba(255, 46, 136, 0.15); } body.night button.primary.confirmed { color: var(--ok); border-color: var(--ok); background: rgba(0, 255, 136, 0.06); cursor: default; box-shadow: 0 0 0 1px var(--ok), 0 0 14px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.08); } body.night button.danger { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 14px rgba(255, 51, 102, 0.25); } body.night #manage-link:hover, body.night [data-testid="manage-link"]:hover { color: var(--brand); } body.night .footnote a:hover { color: var(--brand); border-color: var(--brand); } /* ── Lore panel glow ─────────────────────────────────────── */ body.night .lore-panel { box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.3), 0 0 40px rgba(0, 212, 255, 0.4), 0 30px 80px rgba(0, 0, 0, 0.7); } body.night .lore-panel::before, body.night .lore-panel::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--brand); } body.night .lore-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } body.night .lore-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } body.night .lore-panel .close-x:hover { color: var(--magenta); } /* ── Theme-toggle accents ────────────────────────────────── */ body.night .theme-toggle { box-shadow: 0 0 8px rgba(0, 212, 255, 0.3); } body.night .theme-toggle:hover { color: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 8px rgba(255, 46, 136, 0.4); } @media (prefers-reduced-motion: reduce) { body.night .spark, body.night .crt-band, body.night .status-dot, body.night .field:focus-within label::after { animation: none !important; } body.night .crt-band { display: none; } }