/** * theme.css — VisionOS-style glass theming system * Activates only when data-theme attribute is set on * Zero impact on default game appearance. */ /* ── Base: make bg transparent when theme active ─────── */ html[data-theme], html[data-theme] body { background: transparent !important; } /* ── Full-screen screens: transparent — wallpaper is the background */ html[data-theme] .screen.th-glass { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; } /* ── Glass surface ────────────────────────────────────── */ html[data-theme] .th-glass { position: relative; z-index: 1; background: var(--th-surface, rgba(15, 15, 25, 0.58)) !important; backdrop-filter: saturate(180%) blur(var(--th-blur, 24px)) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--th-blur, 24px)) !important; border: 1px solid var(--th-border, rgba(255, 255, 255, 0.14)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 32px rgba(0, 0, 0, 0.22) !important; border-radius: 16px !important; } /* Dark tone text */ html[data-tone="dark"] .th-glass { color: var(--th-text, #f1f5f9); } /* Light tone text */ html[data-tone="light"] .th-glass { color: var(--th-text, #1e1b4b); } /* Light tone: slightly brighter highlight line */ html[data-tone="light"] .th-glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 32px rgba(0, 0, 0, 0.10) !important; } /* ── Glass accent button ──────────────────────────────── */ html[data-theme] .th-btn { background: var(--th-accent, #60a5fa) !important; color: var(--th-btn-text, #fff) !important; border: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.20) !important; } html[data-theme] .th-btn:hover, html[data-theme] .th-btn:focus-visible { filter: brightness(1.12) !important; } /* Light tone accent button: dark text for legibility */ html[data-tone="light"] .th-btn { color: #fff !important; } /* ── Input fields inside glass ────────────────────────── */ html[data-theme] .th-glass input, html[data-theme] .th-glass select, html[data-theme] .th-glass textarea { background: rgba(255, 255, 255, 0.10) !important; border: 1px solid var(--th-border, rgba(255, 255, 255, 0.20)) !important; color: inherit !important; border-radius: 8px !important; } html[data-tone="light"] .th-glass input, html[data-tone="light"] .th-glass select, html[data-tone="light"] .th-glass textarea { background: rgba(255, 255, 255, 0.55) !important; } /* ── Accent color helpers ─────────────────────────────── */ html[data-theme] .th-accent-text { color: var(--th-accent) !important; } html[data-theme] .th-accent-border { border-color: var(--th-accent) !important; }