/* ============================================================== Theme showcase — per-theme identity element A single

sits at level just after #site-header. Its height is slim (32px) by default and grows to a full hero (220px) only when the menu screen is visible, via a :has() selector. Per-theme content comes from src/client/modules/theme-showcase.js templates; theme-specific overrides live in public/styles/themes.css. ============================================================== */ .theme-showcase { width: 100%; height: 32px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text); /* The .sc-* children below are absolute-positioned within it. */ } /* The menu screen gets the full hero size. :has() is supported in Chrome/Edge 105+, Firefox 121+, Safari 15.4+. Browsers without support see the slim version everywhere — acceptable fallback. */ body:has(#screen-menu:not(.hidden)) .theme-showcase { height: 220px; } @media (max-width: 1024px) { body:has(#screen-menu:not(.hidden)) .theme-showcase { height: 180px; } } @media (max-width: 720px) { .theme-showcase { height: 24px; } body:has(#screen-menu:not(.hidden)) .theme-showcase { height: 140px; } } /* Hide on /library (which doesn't use themes) by hiding when the showcase is inside a body that happens to be on the library page. The library is a separate page, so typically the element won't render there at all — this is a defensive default. */ .theme-showcase.hidden { display: none; } /* Hide the showcase entirely on the game screen — the emulator canvas + chat sidebar need the full vertical viewport, and even the slim 32-px band pushes the layout into scroll territory on shorter displays. All other screens keep the showcase. */ body:has(#screen-game:not(.hidden)) .theme-showcase, body:has(#screen-lobby:not(.hidden)) .theme-showcase { display: none; } /* ========== Shared primitive parts kit ========== Each showcase template composes these; individual themes tweak them via html[data-theme="X"] .sc-* {...} in themes.css. */ /* Panel — framed plane, used as the showcase backdrop */ .sc-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; } /* Knob — circular concentric dial with a pointer. The rotation is controlled by the --sc-knob-angle custom property (0–270deg). */ .sc-knob { --sc-knob-size: 64px; --sc-knob-bg: linear-gradient(145deg, var(--surface2) 0%, var(--surface) 60%, #000 100%); --sc-knob-pointer: var(--accent); --sc-knob-angle: 135deg; width: var(--sc-knob-size); height: var(--sc-knob-size); border-radius: 50%; background: var(--sc-knob-bg); border: 1px solid var(--border); box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.12), inset 0 -3px 6px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.4); position: relative; flex-shrink: 0; } .sc-knob::before { /* The pointer notch */ content: ''; position: absolute; left: 50%; top: 12%; transform: translateX(-50%) rotate(var(--sc-knob-angle)); transform-origin: 50% 136%; width: 3px; height: 28%; background: var(--sc-knob-pointer); box-shadow: 0 0 6px var(--sc-knob-pointer); border-radius: 2px; } .sc-knob::after { /* Inner cap */ content: ''; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.5)); } /* Knob label — tiny tracked label under the knob */ .sc-knob-group { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; } .sc-knob-group .sc-label { font-size: 9px; } /* Switch — chrome toggle, two states */ .sc-switch { width: 34px; height: 16px; background: linear-gradient(180deg, #D8D4CC 0%, #B8B4AC 45%, #6A6660 100%); border: 1px solid #201F1C; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.5); position: relative; flex-shrink: 0; } .sc-switch::after { content: ''; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 13px; background: linear-gradient(180deg, #F8F5ED 0%, #A8A49C 100%); border: 1px solid #333; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); transition: left 0.2s ease; } .sc-switch.on::after { left: auto; right: 2px; } /* LED — small glowing circle */ .sc-led { --sc-led-color: var(--accent); width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), var(--sc-led-color) 60%, rgba(0, 0, 0, 0.5) 100%); box-shadow: 0 0 10px var(--sc-led-color), inset 0 1px 1px rgba(255, 255, 255, 0.4); flex-shrink: 0; } /* Screen — rectangular area, used for LCD-like readouts */ .sc-screen { background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.65); padding: 8px 14px; color: var(--accent); font-family: var(--font-pixel); font-size: 14px; letter-spacing: 2px; text-align: right; min-width: 90px; } /* Ridge — grip-texture band (used on Game Boy cart top, arcade bezels) */ .sc-ridge { height: 8px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 4px); } /* Label — tiny tracked pixel-font label */ .sc-label { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); } /* Cursor — blinking terminal cursor */ .sc-cursor { display: inline-block; width: 0.6em; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 2px; } @media (prefers-reduced-motion: no-preference) { .sc-cursor { animation: sc-cursor-blink 1s steps(2) infinite; } } /* D-pad — shared primitive. Four-arm cross rendered via two overlapping rounded rects in ::before/::after + a center cap. Per-theme overrides (e.g. lighter cross on NES plastic, darker on GB) tweak the colors. */ .sc-dpad { --sc-dpad-size: 52px; --sc-dpad-arm: 12px; --sc-dpad-bg-a: #3A362D; --sc-dpad-bg-b: #1A1813; position: relative; width: var(--sc-dpad-size); height: var(--sc-dpad-size); flex-shrink: 0; } .sc-dpad::before, .sc-dpad::after { content: ''; position: absolute; background: linear-gradient(180deg, var(--sc-dpad-bg-a) 0%, var(--sc-dpad-bg-b) 100%); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 #000; } .sc-dpad::before { /* vertical arm */ top: calc(50% - var(--sc-dpad-size) / 2 + var(--sc-dpad-arm) / 2); left: calc(50% - var(--sc-dpad-arm) / 2); width: var(--sc-dpad-arm); height: calc(var(--sc-dpad-size) - var(--sc-dpad-arm)); } .sc-dpad::after { /* horizontal arm */ top: calc(50% - var(--sc-dpad-arm) / 2); left: calc(50% - var(--sc-dpad-size) / 2 + var(--sc-dpad-arm) / 2); width: calc(var(--sc-dpad-size) - var(--sc-dpad-arm)); height: var(--sc-dpad-arm); } .sc-dpad > i { /* center cap */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--sc-dpad-arm); height: var(--sc-dpad-arm); background: radial-gradient(circle at 30% 30%, #4A463C, var(--sc-dpad-bg-b)); border: 1px solid #000; z-index: 1; } /* VU meter — horizontal gradient bar of cells */ .sc-vu { width: 200px; height: 14px; display: flex; gap: 2px; padding: 1px; background: var(--surface2); border: 1px solid var(--border); border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); } .sc-vu > i { flex: 1; background: rgba(255, 255, 255, 0.08); border-radius: 1px; transition: background 0.3s; } .sc-vu > i.on { background: var(--accent); box-shadow: 0 0 4px var(--accent); } /* ========== Default (Aurora) showcase — aurora borealis ========== Layered composition: - Starfield (tiny radial dots) behind everything - Three blurred, mix-blend-mode:screen color bands drifting at different speeds (mint, cyan, magenta-tinted rose) - Vertical "ray" streaks lit against the bands - Horizon gradient at the bottom to ground the scene Animated via staggered keyframes; frozen under reduced-motion. */ .sc-default { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 120% 80% at 50% 110%, #0E1F3A 0%, #060B1A 60%, #01020A 100%); } .sc-aurora-stars { position: absolute; inset: 0; /* a handful of stars at varying brightness + position */ background-image: radial-gradient(1px 1px at 8% 18%, #FFFFFF, transparent 60%), radial-gradient(1px 1px at 17% 34%, rgba(255,255,255,0.75), transparent 60%), radial-gradient(1.4px 1.4px at 24% 12%, #FFFFFF, transparent 60%), radial-gradient(1px 1px at 36% 28%, rgba(255,255,255,0.6), transparent 60%), radial-gradient(1px 1px at 44% 9%, #FFFFFF, transparent 60%), radial-gradient(1.2px 1.2px at 52% 24%, rgba(255,255,255,0.85), transparent 60%), radial-gradient(1px 1px at 62% 14%, #FFFFFF, transparent 60%), radial-gradient(1px 1px at 71% 32%, rgba(255,255,255,0.7), transparent 60%), radial-gradient(1.3px 1.3px at 79% 10%, #FFFFFF, transparent 60%), radial-gradient(1px 1px at 87% 26%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(1px 1px at 94% 16%, rgba(255,255,255,0.55), transparent 60%); } .sc-aurora-band { position: absolute; left: -18%; right: -18%; top: 10%; bottom: 18%; filter: blur(22px); mix-blend-mode: screen; pointer-events: none; will-change: transform; } .sc-aurora-band-1 { background: radial-gradient(ellipse 46% 40% at 24% 55%, rgba(0, 229, 160, 0.95), transparent 72%), radial-gradient(ellipse 54% 38% at 68% 48%, rgba(0, 210, 180, 0.75), transparent 72%); } .sc-aurora-band-2 { background: radial-gradient(ellipse 38% 30% at 50% 58%, rgba(0, 184, 255, 0.70), transparent 72%), radial-gradient(ellipse 42% 32% at 88% 52%, rgba(0, 240, 210, 0.50), transparent 72%); opacity: 0.9; } .sc-aurora-band-3 { background: radial-gradient(ellipse 34% 28% at 15% 42%, rgba(150, 100, 255, 0.40), transparent 72%), radial-gradient(ellipse 40% 30% at 62% 56%, rgba(255, 80, 180, 0.28), transparent 72%); opacity: 0.85; } .sc-aurora-rays { /* Thin vertical rays suggesting cascading aurora curtains */ position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: repeating-linear-gradient(88deg, transparent 0 22px, rgba(180, 255, 220, 0.04) 22px 23px, transparent 23px 44px, rgba(180, 255, 220, 0.07) 44px 46px, transparent 46px 78px); -webkit-mask-image: linear-gradient(to bottom, transparent 18%, rgba(0,0,0,0.85) 55%, transparent 95%); mask-image: linear-gradient(to bottom, transparent 18%, rgba(0,0,0,0.85) 55%, transparent 95%); } .sc-aurora-horizon { /* Subtle deep-blue ground at the bottom grounds the sky */ position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(to top, rgba(4, 18, 40, 0.9) 0%, rgba(4, 18, 40, 0.45) 40%, transparent 100%); pointer-events: none; } /* Observatory readout — lives on top of the animated aurora. Static (no animation) so values stay legible against the flowing backdrop. */ .sc-aurora-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; z-index: 2; text-align: center; } .sc-aurora-title { font-family: 'Press Start 2P', monospace; font-size: 16px; letter-spacing: 4px; color: #F4FFFB; text-shadow: 0 0 12px rgba(0, 229, 160, 0.7), 0 0 28px rgba(0, 184, 255, 0.45); text-transform: uppercase; } .sc-aurora-coords { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 3px; color: rgba(190, 255, 225, 0.75); text-transform: uppercase; } .sc-aurora-readout { margin-top: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; } .sc-aurora-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: rgba(6, 18, 32, 0.55); border: 1px solid rgba(0, 229, 160, 0.35); border-radius: 4px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sc-aurora-pill em { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9px; letter-spacing: 2px; color: rgba(190, 255, 225, 0.65); text-transform: uppercase; } .sc-aurora-pill b { font-family: 'Press Start 2P', monospace; font-weight: 400; font-size: 10px; color: #F4FFFB; letter-spacing: 1px; text-shadow: 0 0 6px rgba(0, 229, 160, 0.6); } .sc-aurora-pill-active { border-color: rgba(0, 229, 160, 0.7); background: rgba(0, 229, 160, 0.12); } .sc-aurora-pill-active b { color: #00E5A0; text-shadow: 0 0 10px rgba(0, 229, 160, 0.85); } /* Slim variant (non-menu pages): hide everything except the title so the 32 px bar stays informative without being cluttered. */ html[data-theme="default"]:not(:has(#screen-menu:not(.hidden))) .sc-aurora-coords, html[data-theme="default"]:not(:has(#screen-menu:not(.hidden))) .sc-aurora-readout { display: none; } html[data-theme="default"]:not(:has(#screen-menu:not(.hidden))) .sc-aurora-title { font-size: 10px; letter-spacing: 2px; } @media (prefers-reduced-motion: no-preference) { .sc-aurora-band-1 { animation: sc-aurora-drift-1 9s ease-in-out infinite alternate; } .sc-aurora-band-2 { animation: sc-aurora-drift-2 13s ease-in-out infinite alternate-reverse; } .sc-aurora-band-3 { animation: sc-aurora-drift-3 17s ease-in-out infinite alternate; } } /* ========== Keyframes (shared) ========== */ @keyframes sc-cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes sc-led-pulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.55; filter: brightness(0.75); } } @keyframes sc-aurora-drift-1 { 0% { transform: translateX(-4%) skewX(-1.5deg); } 100% { transform: translateX(4%) skewX(1.5deg); } } @keyframes sc-aurora-drift-2 { 0% { transform: translate(3%, -2%) skewX(2.5deg); } 100% { transform: translate(-3%, 2%) skewX(-2.5deg); } } @keyframes sc-aurora-drift-3 { 0% { transform: translateX(-5%) skewY(-1deg); } 100% { transform: translateX(5%) skewY(1deg); } } @keyframes sc-rain-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } /* Pause showcase animations on subpages — only animate on the homepage */ body:not(:has(#screen-menu:not(.hidden))) .theme-showcase *, body:not(:has(#screen-menu:not(.hidden))) .theme-showcase *::before, body:not(:has(#screen-menu:not(.hidden))) .theme-showcase *::after { animation-play-state: paused !important; } /* Reduced-motion: freeze every animation in the showcase */ @media (prefers-reduced-motion: reduce) { .theme-showcase *, .theme-showcase *::before, .theme-showcase *::after { animation: none !important; } } /* ============= Responsive hero compactions ============= At ≤720px, hide the most horizontally-hungry elements per theme so the hero still reads without overflow. The slim variant styles already handle non-menu screens; these rules only trim the menu-screen hero on mobile. */ @media (max-width: 720px) { .sc-panel { gap: 12px; padding: 0 12px; } } /* Narrower breakpoint for extreme trimming */ @media (max-width: 520px) { /* Super Power: hide the tagline text at narrow widths. */ html[data-theme="super"]:has(#screen-menu:not(.hidden)) .sc-super-bar .sc-label { display: none; } /* Arcade: hide the coin slot + credits, keep marquee only. */ html[data-theme="arcade"]:has(#screen-menu:not(.hidden)) .sc-arcade-coin, html[data-theme="arcade"]:has(#screen-menu:not(.hidden)) .sc-arcade-credits { display: none; } /* Blueprint: hide the title block, keep dimensions + stamp. */ html[data-theme="blueprint"]:has(#screen-menu:not(.hidden)) .sc-blueprint-block { display: none; } /* Modular: drop to 2 knobs (hide third) + readout. */ html[data-theme="modular"]:has(#screen-menu:not(.hidden)) .sc-knob-group:nth-of-type(3) { display: none; } /* Heavy Sixer: hide the joystick on very narrow screens, keep the console drawing as the sole identity element. */ html[data-theme="woodgrain"]:has(#screen-menu:not(.hidden)) .sc-joystick { display: none; } /* Game Boy: hide branding on narrow screens. */ html[data-theme="gameboy"]:has(#screen-menu:not(.hidden)) .sc-gameboy-copy { display: none; } /* Swiss: handled in themes.css (stacked 3-row layout keeps the date). */ /* Front-Loader: hide A/B buttons on narrow, keep door + LED. */ html[data-theme="frontloader"]:has(#screen-menu:not(.hidden)) .sc-frontloader-btns { display: none; } /* Trinitron: drop the second knob, keep one + readout + LED. */ html[data-theme="trinitron"]:has(#screen-menu:not(.hidden)) .sc-trinitron-knob-vol { display: none; } }