/* ============================================================= Theme-swap transition smoothing ------------------------------------------------------------- When the active theme changes (manual pick, hydrateFromServer, or reconcile after a flag change), palette tokens flip instantly which can read as a flash. A short transition on the main surfaces softens the swap into a crossfade. Scoped to common surfaces — not html/body universally because that'd hit every hover/focus state too. ============================================================= */ html, body, .card, .btn, .page-header, .site-header, .lib-topbar, .lib-tile, .lib-nav-link, .theme-showcase, .theme-chip, .theme-popover, .admin-card, .admin-module-card, .admin-theme-card, input, select, textarea { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* Users who request reduced motion get instant swaps (no transition). */ @media (prefers-reduced-motion: reduce) { html, body, .card, .btn, .page-header, .site-header, .lib-topbar, .lib-tile, .lib-nav-link, .theme-showcase, .theme-chip, .theme-popover, .admin-card, .admin-module-card, .admin-theme-card, input, select, textarea { transition: none; } } /* ============================================================= RetroPlay Theme Tokens ------------------------------------------------------------- Each block below overrides the CSS custom properties defined as fallbacks in public/style.css (:root). Gating is on , set by the inline bootstrap script in index.html (before first paint) and kept in sync by src/client/theme.js. Adding a new theme: 1. Copy the TEMPLATE block below. 2. Replace with the theme id (must match THEMES[].id in src/client/theme.js). 3. Override the tokens you care about — anything not set falls through to the :root defaults in style.css. 4. (Optional) Add a decoration layer via `html[data-theme=""] body.app-main::before/::after`. 5. Add the id to THEME_IDS in src/server/routes/profile.js so the server accepts PATCH writes for it. ============================================================= */ /* ============================================================ DEFAULT — the original RetroPlay dark theme ============================================================ */ html[data-theme="default"] { --bg: #0a0a0f; --surface: #13131d; --surface2: #1a1a28; --border: #2a2a3d; --text: #c8c8d4; --text-dim: #6b6b80; --accent: #00e5a0; --accent2: #00b8ff; --danger: #ff4060; --warning: #ffaa00; --glow: 0 0 20px rgba(0, 229, 160, 0.15); --radius: 6px; } /* ============================================================ TRINITRON BROADCAST — navy + RGB sub-pixel motif, broadcast studio ============================================================ */ html[data-theme="trinitron"] { --bg: #07091A; --surface: #0F1428; --surface2: #141A2E; --border: #232B44; --text: #E6ECFA; --text-dim: #7A85A8; --accent: #4A9EFF; --accent2: #3BE08A; --danger: #FF3E5B; --warning: #FFB942; --glow: 0 0 20px rgba(74, 158, 255, 0.20); --radius: 6px; } /* RGB sub-pixel aperture grill — meaningfully visible vertical triads. Wider stripes + higher opacity so the RGB identity reads at normal viewing distance without overwhelming content. */ html[data-theme="trinitron"] body.app-main::before { content: ''; position: fixed; inset: 0; z-index: 9996; pointer-events: none; background: repeating-linear-gradient( 90deg, rgba(255, 62, 91, 0.108) 0 2px, rgba(59, 224, 138, 0.108) 2px 4px, rgba(74, 158, 255, 0.108) 4px 6px ); mix-blend-mode: screen; } /* Faint horizontal scanlines to complete the broadcast feel */ html[data-theme="trinitron"] body.app-main::after { content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 2px 3px ); mix-blend-mode: multiply; } /* Every card gets a 4px R/G/B signal stripe down the left edge — the stripe is painted as a background-image rather than a pseudo-element so it composes cleanly with the card's own .card-label (which hangs outside with position:absolute; top:-8px). */ html[data-theme="trinitron"] .card { background: linear-gradient(to bottom, #FF3E5B 0%, #FF3E5B 33.3%, #3BE08A 33.3%, #3BE08A 66.6%, #4A9EFF 66.6%, #4A9EFF 100% ) left top / 4px 100% no-repeat, var(--surface); padding-left: 24px; } /* SMPTE color-bar strip just under the site header — now painted INSIDE the theme-showcase so it sits flush with the showcase hero. Keeping the former fixed-position :after as a fallback if the showcase isn't rendered (e.g. during load). */ html[data-theme="trinitron"] .site-header::after { content: ''; position: fixed; top: 48px; left: 0; right: 0; height: 4px; z-index: 199; pointer-events: none; background: linear-gradient(90deg, #C0C0C0 0 14.28%, #C0C000 14.28% 28.57%, #00C0C0 28.57% 42.85%, #00C000 42.85% 57.14%, #C000C0 57.14% 71.42%, #C00000 71.42% 85.71%, #0000C0 85.71% 100% ); } /* ── Trinitron showcase ───────────────────────────────────────────── */ html[data-theme="trinitron"] .theme-showcase { background: linear-gradient(180deg, #0A0F22 0%, #07091A 100%); border-top: 1px solid #1E2540; border-bottom: 1px solid #000; } html[data-theme="trinitron"] .sc-trinitron { position: absolute; inset: 0; } /* Inline SMPTE bars at the bottom edge of the showcase so the broadcast signal reads in the hero and slim variants alike. */ html[data-theme="trinitron"] .sc-smpte { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #C0C0C0 0 14.28%, #C0C000 14.28% 28.57%, #00C0C0 28.57% 42.85%, #00C000 42.85% 57.14%, #C000C0 57.14% 71.42%, #C00000 71.42% 85.71%, #0000C0 85.71% 100%); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } html[data-theme="trinitron"] .sc-trinitron-knob { position: relative; z-index: 1; } html[data-theme="trinitron"] .sc-trinitron .sc-knob { --sc-knob-size: 92px; --sc-knob-bg: radial-gradient(circle at 40% 30%, #4A4E5C 0%, #2B2E3A 60%, #0B0D14 100%); --sc-knob-pointer: #E8ECFA; border-color: #000; z-index: 1; } html[data-theme="trinitron"] .sc-trinitron .sc-knob::after { /* Brushed-aluminum inner cap */ background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.5)); } html[data-theme="trinitron"] .sc-trinitron-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; } html[data-theme="trinitron"] .sc-trinitron-readout { background: #020614; color: #3BE08A; border-color: #0B1228; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), inset 0 0 12px rgba(59, 224, 138, 0.2); font-size: 22px; padding: 10px 18px; text-shadow: 0 0 8px rgba(59, 224, 138, 0.55); } html[data-theme="trinitron"] .sc-trinitron-leds { display: flex; align-items: center; gap: 8px; } @media (prefers-reduced-motion: no-preference) { html[data-theme="trinitron"] .sc-led.pulse { animation: sc-led-pulse 2s ease-in-out infinite; } } /* Slim variant (every non-menu screen): hide the knobs and shrink the readout so only the broadcast ID remains. The :not(:has(...)) target sits on the html element so it composes cleanly with the data-theme attribute on the same element. */ html[data-theme="trinitron"]:not(:has(#screen-menu:not(.hidden))) .sc-trinitron-knob { display: none; } html[data-theme="trinitron"]:not(:has(#screen-menu:not(.hidden))) .sc-trinitron-readout { font-size: 12px; padding: 2px 10px; min-width: 0; } html[data-theme="trinitron"]:not(:has(#screen-menu:not(.hidden))) .sc-trinitron-stack { flex-direction: row; gap: 10px; } /* Trinitron — library-specific RGB identity (broadcast feel without the full scanline decoration). Main-app decorations are scoped to body.app-main above; these rules target body.app-library so only the library page gets them. */ html[data-theme="trinitron"] body.app-library .lib-topbar { /* SMPTE color-bar strip painted as a bottom border-image. */ border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, #C0C0C0 0 14.28%, #C0C000 14.28% 28.57%, #00C0C0 28.57% 42.85%, #00C000 42.85% 57.14%, #C000C0 57.14% 71.42%, #C00000 71.42% 85.71%, #0000C0 85.71% 100%) 1; } /* Faint RGB sub-pixel aperture-grill on the library body. Lower opacity than the main app so it reads as a subtle texture, not a dominating effect over cover artwork. */ html[data-theme="trinitron"] body.app-library::before { content: ''; position: fixed; inset: 0; z-index: 9996; pointer-events: none; background: repeating-linear-gradient( 90deg, rgba(255, 62, 91, 0.063) 0 2px, rgba(59, 224, 138, 0.063) 2px 4px, rgba(74, 158, 255, 0.063) 4px 6px ); mix-blend-mode: screen; } /* RGB signal stripe on each library tile's left edge — mirrors the main-app .card stripe. Composes over the existing tile background so cover artwork still renders cleanly. */ html[data-theme="trinitron"] body.app-library .lib-tile { position: relative; } html[data-theme="trinitron"] body.app-library .lib-tile::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, #FF3E5B 0% 33%, #3BE08A 33% 66%, #4A9EFF 66% 100%); border-radius: var(--lib-radius-base) 0 0 var(--lib-radius-base); pointer-events: none; z-index: 2; } /* ── Phosphor showcase ───────────────────────────────────────────── Terminal-style boot log with a blinking cursor at the tail. */ html[data-theme="phosphor"] .theme-showcase { background: #0A0500; border-top: 1px solid #3A2300; border-bottom: 1px solid #3A2300; } html[data-theme="phosphor"] .sc-phosphor { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 clamp(12px, 3vw, 32px); } html[data-theme="phosphor"] .sc-phosphor-log { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--text); text-shadow: 0 0 8px rgba(255, 176, 0, 0.45); white-space: pre; margin: 0; max-width: 560px; width: 100%; } html[data-theme="phosphor"] .sc-phosphor-log::after { content: ''; display: inline-block; width: 0.6em; height: 1em; background: var(--text); vertical-align: -2px; margin-left: 2px; box-shadow: 0 0 8px rgba(255, 176, 0, 0.6); } @media (prefers-reduced-motion: no-preference) { html[data-theme="phosphor"] .sc-phosphor-log::after { animation: sc-cursor-blink 1s steps(2) infinite; } } /* Slim variant: only show the prompt line */ html[data-theme="phosphor"]:not(:has(#screen-menu:not(.hidden))) .sc-phosphor-log { font-size: 11px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="phosphor"]:not(:has(#screen-menu:not(.hidden))) .sc-phosphor-log::first-line, html[data-theme="phosphor"]:not(:has(#screen-menu:not(.hidden))) .sc-phosphor { /* In slim mode the full block is 24–32 px tall so we just show the final prompt line; JS-level text swap isn't worth it, so rely on font-size + ellipsis overflow above. */ } /* ── Matrix showcase ─────────────────────────────────────────────── Falling code columns + "WAKE UP" cursor. */ html[data-theme="matrix"] .theme-showcase { background: #020B02; border-top: 1px solid #0C2E0C; border-bottom: 1px solid #0C2E0C; overflow: hidden; } html[data-theme="matrix"] .sc-matrix { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } html[data-theme="matrix"] .sc-matrix-cols { position: absolute; inset: 0; display: flex; justify-content: center; gap: 18px; overflow: hidden; opacity: 0.75; } html[data-theme="matrix"] .sc-matrix-col { flex: 0 0 auto; width: 10px; height: 100%; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-y; background-size: 14px 240px; opacity: 0.8; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 80%, black 95%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 80%, black 95%); } @media (prefers-reduced-motion: no-preference) { html[data-theme="matrix"] .sc-matrix-col { animation: sc-rain-scroll 6s linear infinite; } } @keyframes sc-rain-scroll { 0% { background-position: 0 -240px; } 100% { background-position: 0 240px; } } html[data-theme="matrix"] .sc-matrix-cursor { position: relative; z-index: 1; font-family: var(--font-pixel); font-size: 18px; color: var(--text); letter-spacing: 4px; text-shadow: 0 0 10px rgba(0, 255, 102, 0.7); padding: 8px 18px; background: rgba(2, 11, 2, 0.78); /* border: 1px solid rgba(0, 255, 102, 0.35); */ display: flex; align-items: center; gap: 2px; --sc-type-pad-1: 52px; --sc-type-pad-2: 76px; --sc-type-pad-3: 80px; } html[data-theme="matrix"] .sc-matrix-line { max-width: 0; overflow: hidden; white-space: nowrap; } html[data-theme="matrix"] .sc-matrix-line-1 { animation: sc-line-flash 5.75s steps(1) 1.5s forwards; } html[data-theme="matrix"] .sc-matrix-line-2 { animation: sc-line-flash 6.65s steps(1) 9.25s forwards; } html[data-theme="matrix"] .sc-matrix-line-3 { animation: sc-line-flash 9999s steps(1) 17.9s forwards; } @keyframes sc-line-flash { from { max-width: 999px; } to { max-width: 0; } } html[data-theme="matrix"] .sc-matrix-text { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; } html[data-theme="matrix"] .sc-matrix-line-1 .sc-matrix-text { animation: sc-type-1 2.25s steps(15) 1.5s forwards; } html[data-theme="matrix"] .sc-matrix-line-2 .sc-matrix-text { animation: sc-type-2 3.15s steps(21) 9.25s forwards; } html[data-theme="matrix"] .sc-matrix-line-3 .sc-matrix-text { animation: sc-type-3 3.75s steps(25) 17.9s forwards; } @keyframes sc-type-1 { to { width: calc(15ch + var(--sc-type-pad-1, 52px)); } } @keyframes sc-type-2 { to { width: calc(21ch + var(--sc-type-pad-2, 76px)); } } @keyframes sc-type-3 { to { width: calc(25ch + var(--sc-type-pad-3, 80px)); } } html[data-theme="matrix"] .sc-matrix-cursor .sc-cursor { width: 1ch; height: 1.2em; flex-shrink: 0; position: relative; top: -3px; } html[data-theme="matrix"]:not(:has(#screen-menu:not(.hidden))) .sc-matrix-cursor { font-size: 11px; padding: 2px 8px; letter-spacing: 2px; background: transparent; border: none; } @media (max-width: 720px) { html[data-theme="matrix"] .sc-matrix-cursor { font-size: 13px; letter-spacing: 2px; padding: 6px 10px; --sc-type-pad-1: 14px; --sc-type-pad-2: 20px; --sc-type-pad-3: 22px; } html[data-theme="matrix"] .sc-matrix-cols { gap: 14px; } } @media (max-width: 480px) { html[data-theme="matrix"] .sc-matrix-cursor { font-size: 10px; letter-spacing: 1px; padding: 4px 6px; --sc-type-pad-1: 4px; --sc-type-pad-2: 6px; --sc-type-pad-3: 6px; } html[data-theme="matrix"] .sc-matrix-cols { gap: 10px; } } /* ── Cyberpunk showcase ─────────────────────────────────────────── Reimagined as a Blade Runner 2049 / Cyberpunk 2077 street scene. Composition (back → front): • Sky + atmospheric haze + distant skyline silhouette (CSS bg) • Animated rain (two parallax tile layers) on the bg as well • Holographic woman billboard — center, animated scan + shimmer • Vertical kanji sign — right depth • Big red BANK!40 neon sign — left • Flying spinner with red taillight trail — drifts upper area • Cyborg silhouette — right edge • Gull-wing DeLorean silhouette — lower-left foreground • SECTOR 7 // NEO TOKYO 2099 banner — bottom-anchored • Wet pavement reflection band — bottom edge Slim variant on non-menu screens collapses to just the banner. */ html[data-theme="cyberpunk"] .theme-showcase { background-image: /* 1. Near rain — subtle droplet streaks (animated). Each streak is drawn at a slight leftward slant so the rain reads as wind-blown; background-position animation is PURE VERTICAL by exactly one tile height → seamless loop. */ url("data:image/svg+xml;utf8,"), /* 2. Far rain — thinner back parallax layer, softer so it reads as depth and the near layer stays dominant. */ url("data:image/svg+xml;utf8,"), /* 3. Base purple sky gradient */ linear-gradient(180deg, #0A0420 0%, #140828 45%, #060210 100%); background-size: 220px 220px, 260px 260px, 100% 100%; background-repeat: repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0; border-bottom: 1px solid #3A1F5C; overflow: hidden; animation: cp-rain 1.8s linear infinite; } /* Translate each rain tile straight down by exactly ONE tile height so the pattern wraps without a visible snap. Horizontal motion is zero — wind is expressed in the slight slant of each drawn streak, not in the tile's translation. Near 220 px tile → 220 px/period; far 260 px tile → 260 px/period (slightly slower perceived pace, parallax). Third layer (sky gradient) stays static. */ @keyframes cp-rain { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 220px, 0 260px, 0 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme="cyberpunk"] .theme-showcase { animation: none; } } html[data-theme="cyberpunk"] .sc-cyberpunk { position: absolute; inset: 0; overflow: hidden; } /* Photo backdrop — the inspiration image used directly. Cropped to focus on the hologram billboard + DeLorean + neon signs in the middle of the frame. The rain animation lives on .theme-showcase itself (lines 508+) and is layered ON TOP via z-index, so the photo stays sharp while raindrops fall over it. */ html[data-theme="cyberpunk"] .sc-cp-photo { position: absolute; inset: 0; background-image: url("/img/cyberpunk.png"); background-size: cover; background-position: center 30%; background-repeat: no-repeat; z-index: 0; } /* Vignette + bottom darkening for the banner legibility. */ html[data-theme="cyberpunk"] .sc-cp-vignette { position: absolute; inset: 0; background: /* Bottom darkening for banner readability */ linear-gradient(180deg, transparent 0% 60%, rgba(0, 0, 0, 0.30) 80%, rgba(0, 0, 0, 0.65) 100%), /* Edge vignette */ radial-gradient(ellipse 110% 110% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); z-index: 1; pointer-events: none; } /* The .theme-showcase rain layers paint at the showcase background level; .sc-cp-photo sits ABOVE that, hiding the rain. Push the rain back in front by inverting: drop the rain off the showcase and run a dedicated rain layer with a higher z-index here. */ html[data-theme="cyberpunk"] .theme-showcase { background-image: none; animation: none; } html[data-theme="cyberpunk"] .sc-cyberpunk::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"), url("data:image/svg+xml;utf8,"); background-size: 220px 220px, 260px 260px; background-repeat: repeat, repeat; animation: cp-rain 1.8s linear infinite; mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { html[data-theme="cyberpunk"] .sc-cyberpunk::after { animation: none; } } /* ── Banner — hidden across all variants (the bitmap is the focus). */ html[data-theme="cyberpunk"] .sc-cp-banner { display: none; } html[data-theme="cyberpunk"] .sc-cp-banner-zone { color: #ff007a; text-shadow: 0 0 8px rgba(255, 0, 122, 0.8); } html[data-theme="cyberpunk"] .sc-cp-banner-div { color: #8E6FC7; } html[data-theme="cyberpunk"] .sc-cp-banner-city { color: #12ffcc; text-shadow: 0 0 8px rgba(18, 255, 204, 0.85); } /* ── Slim variant (non-menu screens): hide photo + vignette + rain, keep only the banner, centred and untransformed. */ html[data-theme="cyberpunk"]:not(:has(#screen-menu:not(.hidden))) .sc-cp-photo, html[data-theme="cyberpunk"]:not(:has(#screen-menu:not(.hidden))) .sc-cp-vignette { display: none; } html[data-theme="cyberpunk"]:not(:has(#screen-menu:not(.hidden))) .sc-cyberpunk::after { display: none; } html[data-theme="cyberpunk"]:not(:has(#screen-menu:not(.hidden))) .sc-cp-banner { position: absolute; bottom: auto; top: 50%; transform: translate(-50%, -50%); font-size: 10px; letter-spacing: 2px; padding: 3px 10px; gap: 8px; background: transparent; border: none; box-shadow: none; } /* ── Mobile hero (≤640 px on menu) — pull banner up a touch. */ @media (max-width: 640px) { html[data-theme="cyberpunk"]:has(#screen-menu:not(.hidden)) .sc-cp-banner { bottom: 4%; font-size: 9px; letter-spacing: 1.5px; padding: 4px 10px; gap: 6px; } html[data-theme="cyberpunk"]:has(#screen-menu:not(.hidden)) .sc-cp-photo { background-position: center 35%; } } /* ── Cartridge Print showcase ───────────────────────────────────── Three stacked angled cartridge labels + gold seal of play sticker. */ html[data-theme="cartridge"] .theme-showcase { /* Same dot pattern as the body below — as a background-image layer on the hero itself, so the dots paint beneath the cartridge SVGs rather than over them (cartridges are child elements of the hero and naturally render on top of its background). Matches the body bg recipe so the dot grid is continuous across the fold. */ background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, rgba(20, 20, 31, 0.18) 1px, transparent 1.5px); background-size: 7px 7px; border-bottom: 2px solid var(--border); } html[data-theme="cartridge"] .sc-cartridge { position: absolute; inset: 0; } /* Each cart is just an SVG wrapper — the cartridge detail lives in the inline SVG itself. These rules size each one to its system's proportions and rotate them slightly so they read as a casually scattered stack rather than a grid. The flex panel already centres horizontally + vertically. */ html[data-theme="cartridge"] .sc-cart { position: relative; flex-shrink: 0; filter: drop-shadow(3px 4px 0 rgba(20, 20, 31, 0.35)); } html[data-theme="cartridge"] .sc-cart svg { width: 100%; height: auto; display: block; } html[data-theme="cartridge"] .sc-cart-nes { width: clamp(86px, 10vw, 130px); transform: rotate(-6deg); z-index: 2; } html[data-theme="cartridge"] .sc-cart-gb { width: clamp(68px, 8vw, 100px); transform: rotate(3deg); margin-left: -16px; z-index: 3; /* Game Boy cart is physically smaller than the NES cart, so bias it slightly downward to anchor the grouping and to give the overlap a natural depth order. */ margin-top: 18px; } html[data-theme="cartridge"] .sc-cart-atari { width: clamp(110px, 13vw, 170px); transform: rotate(-2deg); margin-left: -18px; z-index: 1; /* Atari cart is horizontal — nudge it up so its bottom edge lines up with the NES cart's rather than floating in the middle. */ margin-top: -26px; } /* Slim variant: scale down all three carts for subpages while keeping the scattered-stack look. */ html[data-theme="cartridge"]:not(:has(#screen-menu:not(.hidden))) .sc-cart-nes { width: 26px; transform: rotate(-6deg); filter: none; } html[data-theme="cartridge"]:not(:has(#screen-menu:not(.hidden))) .sc-cart-gb { width: 20px; transform: rotate(3deg); margin-left: -6px; margin-top: 6px; filter: none; } html[data-theme="cartridge"]:not(:has(#screen-menu:not(.hidden))) .sc-cart-atari { width: 34px; transform: rotate(-2deg); margin-left: -6px; margin-top: -8px; filter: none; } /* ── Game Boy showcase ──────────────────────────────────────────── DMG photo hero: hardware image + olive LCD status readout. */ html[data-theme="gameboy"] .theme-showcase { background: radial-gradient(ellipse 52% 90% at 18% 50%, rgba(255, 255, 255, 0.42), transparent 62%), linear-gradient(90deg, #E0DACD 0%, #BFB7A3 44%, #AFA792 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } html[data-theme="gameboy"] .sc-gameboy { position: absolute; inset: 0; overflow: hidden; } html[data-theme="gameboy"] .sc-gameboy::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(191, 183, 163, 0.14), rgba(31, 42, 16, 0.16)), repeating-linear-gradient(0deg, rgba(31, 42, 16, 0.05) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; } html[data-theme="gameboy"] .sc-gameboy-panel { justify-content: center; gap: clamp(18px, 4vw, 42px); z-index: 2; } html[data-theme="gameboy"] .sc-gameboy-hero { filter: drop-shadow(0 4px 10px rgba(31, 28, 18, 0.45)); transform: rotate(-5deg); flex-shrink: 0; } html[data-theme="gameboy"] .sc-gameboy-hero img { max-height: 196px; width: auto; display: block; } html[data-theme="gameboy"] .sc-gameboy-lcd-wrap { display: flex; flex-direction: column; align-items: center; } html[data-theme="gameboy"] .sc-gameboy-lcd { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 3px), linear-gradient(180deg, #B5C380 0%, #98A96A 30%, #85976A 100%); border: 2px solid #1F2A10; border-radius: 4px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.18); min-width: 200px; padding: 14px 22px; text-align: left; color: var(--text); font-family: var(--font-pixel); font-size: 14px; line-height: 1.5; } html[data-theme="gameboy"] .sc-gameboy-lcd-line { display: block; } html[data-theme="gameboy"] .sc-gameboy-lcd-line.sc-gameboy-lcd-dim { color: var(--text-dim); font-size: 10px; } html[data-theme="gameboy"] .sc-gameboy-copy { display: flex; flex-direction: column; gap: 8px; max-width: min(32vw, 360px); color: #313279; } html[data-theme="gameboy"] .sc-gameboy-brand { font-family: Arial, Helvetica, sans-serif; font-size: clamp(24px, 4.6vw, 54px); font-style: italic; font-weight: 800; letter-spacing: 0; line-height: 0.95; white-space: nowrap; } html[data-theme="gameboy"] .sc-gameboy-meta { font-family: var(--font-mono); font-size: clamp(10px, 1.35vw, 14px); font-weight: 700; letter-spacing: 0; color: #5A5660; } /* Slim variant: hide hero + copy, keep compact LCD. */ html[data-theme="gameboy"]:not(:has(#screen-menu:not(.hidden))) .sc-gameboy-hero, html[data-theme="gameboy"]:not(:has(#screen-menu:not(.hidden))) .sc-gameboy-copy { display: none; } html[data-theme="gameboy"]:not(:has(#screen-menu:not(.hidden))) .sc-gameboy-lcd { padding: 2px 12px; font-size: 10px; min-width: 0; } html[data-theme="gameboy"]:not(:has(#screen-menu:not(.hidden))) .sc-gameboy-lcd-line.sc-gameboy-lcd-dim { display: none; } @media (max-width: 1024px) { html[data-theme="gameboy"] .sc-gameboy-hero img { max-height: 150px; } } @media (max-width: 720px) { html[data-theme="gameboy"] .sc-gameboy-hero img { max-height: 110px; } html[data-theme="gameboy"] .sc-gameboy-copy { display: none; } html[data-theme="gameboy"] .sc-gameboy-lcd { min-width: 150px; padding: 10px 14px; font-size: 11px; } } /* ── Neon Arcade showcase ───────────────────────────────────────── Chromatic-aberrated marquee + coin slot + credits readout. */ html[data-theme="arcade"] .theme-showcase { background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255, 45, 149, 0.15), transparent 70%), linear-gradient(180deg, #0B0320 0%, #060010 100%); border-top: 1px solid #2A0F4E; border-bottom: 1px solid #2A0F4E; } html[data-theme="arcade"] .sc-arcade { position: absolute; inset: 0; overflow: hidden; } /* Perspective grid floor — magenta/cyan lines receding into the horizon. The radial mask fades them so the marquee stays readable. */ html[data-theme="arcade"] .sc-arcade::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 220%; height: 75%; transform: translateX(-50%) perspective(400px) rotateX(62deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(255, 45, 149, 0.65) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(0, 240, 255, 0.55) 1.5px, transparent 1.5px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 92%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 92%); filter: drop-shadow(0 0 4px #FF2D95) drop-shadow(0 0 10px rgba(0, 240, 255, 0.35)); pointer-events: none; } @media (prefers-reduced-motion: no-preference) { html[data-theme="arcade"] .sc-arcade::before { animation: sc-arcade-grid 6s linear infinite; } } @keyframes sc-arcade-grid { from { background-position: 0 0; } to { background-position: 0 42px; } } html[data-theme="arcade"] .sc-arcade-marquee { font-family: var(--font-pixel); font-size: clamp(22px, 4vw, 36px); letter-spacing: 4px; color: #FFF; text-shadow: 2px 0 0 #00F0FF, -2px 0 0 #FF2D95, 0 0 24px rgba(255, 45, 149, 0.6), 0 0 48px rgba(0, 240, 255, 0.3); padding: 8px 22px; border: 2px solid #FF2D95; box-shadow: 0 0 22px rgba(255, 45, 149, 0.55), inset 0 0 28px rgba(255, 45, 149, 0.12); background: linear-gradient(180deg, rgba(255, 45, 149, 0.08), transparent); } html[data-theme="arcade"] .sc-arcade-coin { display: flex; flex-direction: column; align-items: center; gap: 8px; } html[data-theme="arcade"] .sc-arcade-coin-slot { width: 80px; height: 14px; background: #000; border: 2px solid var(--text-dim); border-radius: 2px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8); position: relative; } html[data-theme="arcade"] .sc-arcade-coin-slot::after { content: ''; position: absolute; inset: 3px 6px; background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 210, 63, 0.5) 4px 5px); } html[data-theme="arcade"] .sc-arcade-credits { display: flex; flex-direction: column; align-items: center; gap: 6px; } html[data-theme="arcade"] .sc-arcade-credits-val { color: #FFD23F; text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); padding: 6px 14px; min-width: 60px; } /* Slim variant: marquee shrinks, hide coin + credits readout */ html[data-theme="arcade"]:not(:has(#screen-menu:not(.hidden))) .sc-arcade-coin, html[data-theme="arcade"]:not(:has(#screen-menu:not(.hidden))) .sc-arcade-credits .sc-label { display: none; } html[data-theme="arcade"]:not(:has(#screen-menu:not(.hidden))) .sc-arcade-marquee { font-size: 12px; padding: 2px 10px; letter-spacing: 2px; border-width: 1px; box-shadow: 0 0 10px rgba(255, 45, 149, 0.4); } html[data-theme="arcade"]:not(:has(#screen-menu:not(.hidden))) .sc-arcade-credits-val { padding: 1px 8px; font-size: 10px; min-width: 0; } /* ── Modular Panel showcase ────────────────────────────────────── Rack unit with three knobs + VU meter + digit readout + panel screws. */ html[data-theme="modular"] .theme-showcase { background: linear-gradient(180deg, #363B48 0%, #22252D 22%, #22252D 78%, #0E1015 100%); border-top: 1px solid #000; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="modular"] .sc-modular { position: absolute; inset: 0; } /* Panel screws — four corners, primitive for any rack theme */ .sc-screw { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7A7468 0%, #3A3630 60%, #000 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), inset 0 -1px 1px rgba(0, 0, 0, 0.6); } .sc-screw-tl { top: 8px; left: 8px; } .sc-screw-tr { top: 8px; right: 8px; } .sc-screw-bl { bottom: 8px; left: 8px; } .sc-screw-br { bottom: 8px; right: 8px; } html[data-theme="modular"] .sc-modular-readout { display: flex; flex-direction: column; align-items: center; gap: 8px; } html[data-theme="modular"] .sc-modular-screen { color: #FFC857; text-shadow: 0 0 8px rgba(255, 200, 87, 0.5); padding: 10px 18px; font-size: 22px; } /* Slim variant: hide knobs + readout digit, keep just the VU meter */ html[data-theme="modular"]:not(:has(#screen-menu:not(.hidden))) .sc-knob-group, html[data-theme="modular"]:not(:has(#screen-menu:not(.hidden))) .sc-modular-screen, html[data-theme="modular"]:not(:has(#screen-menu:not(.hidden))) .sc-screw { display: none; } html[data-theme="modular"]:not(:has(#screen-menu:not(.hidden))) .sc-vu { width: 160px; height: 10px; } /* ── Neo Swiss showcase ────────────────────────────────────────── Giant typographic masthead + red editorial rule. */ html[data-theme="swiss"] .theme-showcase { background: var(--bg); overflow: hidden; } html[data-theme="swiss"] .sc-swiss { position: absolute; inset: 0; } html[data-theme="swiss"] .sc-swiss-rule { position: absolute; left: 0; right: 0; height: 3px; background: var(--accent); } html[data-theme="swiss"] .sc-swiss-rule-top { top: 0; } html[data-theme="swiss"] .sc-swiss-rule-bot { bottom: 0; } html[data-theme="swiss"] .sc-swiss .sc-panel { justify-content: space-between; padding: 0 clamp(18px, 4vw, 48px); } html[data-theme="swiss"] .sc-swiss-num { font-family: var(--font-pixel); font-size: 16px; letter-spacing: 2px; color: var(--accent); } html[data-theme="swiss"] .sc-swiss-title { font-family: var(--font-mono); font-weight: 700; font-size: clamp(26px, 5vw, 52px); line-height: 0.95; letter-spacing: -1.5px; color: var(--text); text-align: center; flex: 1; min-width: 0; } html[data-theme="swiss"] .sc-swiss-title-accent { color: var(--accent); } html[data-theme="swiss"] .sc-swiss-date { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--text-dim); text-align: right; } /* Slim variant: collapse to a single row, reduce title to one word */ html[data-theme="swiss"]:not(:has(#screen-menu:not(.hidden))) .sc-swiss-title { font-size: 11px; letter-spacing: 2px; font-weight: 500; } html[data-theme="swiss"]:not(:has(#screen-menu:not(.hidden))) .sc-swiss-title br, html[data-theme="swiss"]:not(:has(#screen-menu:not(.hidden))) .sc-swiss-rule-top { display: none; } html[data-theme="swiss"]:not(:has(#screen-menu:not(.hidden))) .sc-swiss-date { font-size: 10px; } /* Mobile: stack the 3 Swiss elements as centered rows */ @media (max-width: 720px) { html[data-theme="swiss"]:has(#screen-menu:not(.hidden)) .sc-swiss .sc-panel { flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 8px 18px; } html[data-theme="swiss"]:has(#screen-menu:not(.hidden)) .sc-swiss-num { font-size: 12px; } html[data-theme="swiss"]:has(#screen-menu:not(.hidden)) .sc-swiss-title { font-size: clamp(20px, 6vw, 34px); line-height: 1; flex: 0; } html[data-theme="swiss"]:has(#screen-menu:not(.hidden)) .sc-swiss-date { display: block; text-align: center; font-size: 9px; } } /* ── Atari 2600 "Heavy Sixer" showcase ─────────────────────────── PNG hero image of the console + CX-40 joystick, sized to fit the showcase band with the orange accent stripe below. */ html[data-theme="woodgrain"] .theme-showcase { background: linear-gradient(180deg, #2A2622 0%, #1A1612 100%); border-top: 1px solid #000; border-bottom: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6); } html[data-theme="woodgrain"] .sc-woodgrain { position: absolute; inset: 0; } html[data-theme="woodgrain"] .sc-woodgrain-hero { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)); } html[data-theme="woodgrain"] .sc-woodgrain-hero img { max-height: 196px; width: auto; display: block; } @media (max-width: 1024px) { html[data-theme="woodgrain"] .sc-woodgrain-hero img { max-height: 160px; } } @media (max-width: 720px) { html[data-theme="woodgrain"] .sc-woodgrain-hero img { max-height: 120px; } } /* Woodgrain bar — sits below the hero in full mode, becomes the primary visual in the 32px slim band on subpages. */ html[data-theme="woodgrain"] .sc-woodgrain-bar { position: absolute; bottom: 4px; left: 0; right: 0; height: 28px; display: flex; flex-direction: column; } html[data-theme="woodgrain"] .sc-woodgrain-bar-wood { flex: 1; background: repeating-linear-gradient(180deg, rgba(42, 22, 8, 0.25) 0px, transparent 1px, transparent 3px), linear-gradient(90deg, #A3653A 0%, #7A4A24 30%, #6A3F1E 50%, #7A4A24 70%, #A3653A 100%); border-top: 1px solid #C89060; border-bottom: 1px solid #3A2412; } html[data-theme="woodgrain"] .sc-woodgrain-bar-panel { height: 14px; background: #0A0806; border-top: 1px solid #E96A1E; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; } html[data-theme="woodgrain"] .sc-fuji { width: 10px; height: 10px; color: #EAE6DE; flex-shrink: 0; } html[data-theme="woodgrain"] .sc-woodgrain-bar-label { font-family: var(--font-pixel); font-size: 7px; color: #EAE6DE; letter-spacing: 1.5px; white-space: nowrap; } html[data-theme="woodgrain"] .sc-woodgrain-stripe { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--accent); box-shadow: 0 0 8px rgba(233, 106, 30, 0.55); } /* Slim variant: hide hero image + asteroids, bar expands to fill */ html[data-theme="woodgrain"]:not(:has(#screen-menu:not(.hidden))) .sc-woodgrain-hero, html[data-theme="woodgrain"]:not(:has(#screen-menu:not(.hidden))) .sc-woodgrain-asteroids { display: none; } /* ── Asteroid field — falling rocks, target rocks, ship, bullets ── */ html[data-theme="woodgrain"] .sc-woodgrain-asteroids { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* --- Falling background asteroids (10 total) --------------------- */ html[data-theme="woodgrain"] .sc-asteroid { position: absolute; background-repeat: no-repeat; background-size: contain; will-change: transform; opacity: 0.30; bottom: 100%; } html[data-theme="woodgrain"] .sc-asteroid-0 { width: 52px; height: 52px; left: 4%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-1 { width: 44px; height: 40px; left: 70%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-2 { width: 30px; height: 30px; left: 35%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-3 { width: 26px; height: 26px; left: 92%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-4 { width: 18px; height: 18px; left: 55%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-5 { width: 38px; height: 38px; left: 18%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-6 { width: 22px; height: 22px; left: 82%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-7 { width: 42px; height: 42px; left: 48%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-8 { width: 24px; height: 24px; left: 28%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-asteroid-9 { width: 16px; height: 16px; left: 62%; background-image: url("data:image/svg+xml;utf8,"); } /* --- Target asteroids (3, drifting, shot by ship) ---------------- */ html[data-theme="woodgrain"] .sc-target { position: absolute; background-repeat: no-repeat; background-size: contain; will-change: transform, opacity; opacity: 0.38; } html[data-theme="woodgrain"] .sc-target-0 { width: 40px; height: 40px; left: 8%; top: 8%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-target-1 { width: 36px; height: 36px; left: 88%; top: 12%; background-image: url("data:image/svg+xml;utf8,"); } html[data-theme="woodgrain"] .sc-target-2 { width: 34px; height: 34px; left: 3%; top: 55%; background-image: url("data:image/svg+xml;utf8,"); } /* --- Ship -------------------------------------------------------- */ html[data-theme="woodgrain"] .sc-ship { position: absolute; width: 20px; height: 24px; opacity: 0.45; left: 48%; top: 65%; background-repeat: no-repeat; background-size: contain; will-change: transform; background-image: url("data:image/svg+xml;utf8,"); } /* --- Bullets ----------------------------------------------------- */ html[data-theme="woodgrain"] .sc-bullet { position: absolute; width: 3px; height: 3px; background: #F2E3B4; border-radius: 1px; opacity: 0; will-change: transform, opacity; } /* ── Falling asteroid keyframes ─────────────────────────────────── */ @keyframes sc-fall-a { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 52px)) rotate(360deg); } } @keyframes sc-fall-b { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 44px)) rotate(-280deg); } } @keyframes sc-fall-c { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 30px)) rotate(420deg); } } @keyframes sc-fall-d { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 26px)) rotate(-300deg); } } @keyframes sc-fall-e { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 18px)) rotate(540deg); } } @keyframes sc-fall-f { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 38px)) rotate(-200deg); } } @keyframes sc-fall-g { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 22px)) rotate(480deg); } } @keyframes sc-fall-h { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 42px)) rotate(-340deg); } } @keyframes sc-fall-i { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 24px)) rotate(260deg); } } @keyframes sc-fall-j { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(100vh + 16px)) rotate(-440deg); } } /* ── Ship flight path (20s loop) ───────────────────────────────── Rotation = travel heading (0°=up, CW positive). Values increase monotonically so CSS always turns clockwise. */ @keyframes sc-ship-fly { 0% { left: 48%; top: 65%; transform: rotate(324deg); } 12% { left: 12%; top: 15%; transform: rotate(324deg); } 14% { left: 12%; top: 15%; transform: rotate(450deg); } 28% { left: 82%; top: 15%; transform: rotate(450deg); } 30% { left: 82%; top: 15%; transform: rotate(536deg); } 43% { left: 85%; top: 56%; transform: rotate(536deg); } 44.5% { left: 85%; top: 58%; transform: rotate(635deg); } 57% { left: 14%; top: 53%; transform: rotate(635deg); } 58% { left: 12%; top: 52%; transform: rotate(635deg); } 60% { left: 12%; top: 52%; transform: rotate(761deg); } 73% { left: 48%; top: 10%; transform: rotate(761deg); } 74.5% { left: 50%; top: 8%; transform: rotate(872deg); } 87% { left: 73%; top: 53%; transform: rotate(872deg); } 88.5% { left: 75%; top: 55%; transform: rotate(970deg); } 99% { left: 49%; top: 64%; transform: rotate(970deg); } 100% { left: 48%; top: 65%; transform: rotate(1044deg); } } /* ── Target drift+explode (all 20s) ────────────────────────────── Single animation per target: drift position AND explode are in one keyframe so the bullet endpoint and explosion position are guaranteed to match. At impact % the target is at a known spot. */ @keyframes sc-target-0 { 0% { left: 10%; top: 10%; transform: scale(1) rotate(0deg); opacity: 0.38; box-shadow: none; } 8% { left: 7%; top: 5%; transform: scale(1) rotate(15deg); opacity: 0.38; } 15.5% { left: 10%; top: 6%; transform: scale(1) rotate(30deg); opacity: 0.38; box-shadow: none; } 16% { left: 10%; top: 6%; transform: scale(1.5) rotate(35deg); opacity: 0.9; box-shadow: -10px -14px 0 1.5px #F2E3B4, 14px -8px 0 1.5px #F2E3B4, -6px 16px 0 1px #F2E3B4, 12px 12px 0 1px #F2E3B4; } 18% { left: 10%; top: 6%; transform: scale(2.2) rotate(40deg); opacity: 0; box-shadow: -24px -32px 0 0 transparent, 32px -18px 0 0 transparent, -14px 38px 0 0 transparent, 28px 28px 0 0 transparent; } 38% { transform: scale(0); opacity: 0; box-shadow: none; } 42% { transform: scale(0.5); opacity: 0.12; } 46% { left: 12%; top: 12%; transform: scale(1) rotate(60deg); opacity: 0.38; box-shadow: none; } 70% { left: 8%; top: 8%; transform: scale(1) rotate(100deg); opacity: 0.38; } 100% { left: 10%; top: 10%; transform: scale(1) rotate(140deg); opacity: 0.38; box-shadow: none; } } @keyframes sc-target-1 { 0% { left: 86%; top: 10%; transform: scale(1) rotate(0deg); opacity: 0.38; box-shadow: none; } 15% { left: 88%; top: 8%; transform: scale(1) rotate(-20deg); opacity: 0.38; } 31.5% { left: 90%; top: 10%; transform: scale(1) rotate(-35deg); opacity: 0.38; box-shadow: none; } 32% { left: 90%; top: 10%; transform: scale(1.5) rotate(-40deg); opacity: 0.9; box-shadow: 12px -16px 0 1.5px #F2E3B4, -14px -10px 0 1.5px #F2E3B4, 10px 14px 0 1px #F2E3B4, -8px 16px 0 1px #F2E3B4; } 34% { left: 90%; top: 10%; transform: scale(2.2) rotate(-45deg); opacity: 0; box-shadow: 28px -36px 0 0 transparent, -32px -22px 0 0 transparent, 24px 32px 0 0 transparent, -18px 36px 0 0 transparent; } 54% { transform: scale(0); opacity: 0; box-shadow: none; } 58% { transform: scale(0.5); opacity: 0.12; } 62% { left: 84%; top: 14%; transform: scale(1) rotate(-80deg); opacity: 0.38; box-shadow: none; } 85% { left: 90%; top: 12%; transform: scale(1) rotate(-120deg); opacity: 0.38; } 100% { left: 86%; top: 10%; transform: scale(1) rotate(-150deg); opacity: 0.38; box-shadow: none; } } @keyframes sc-target-2 { 0% { left: 5%; top: 58%; transform: scale(1) rotate(0deg); opacity: 0.38; box-shadow: none; } 30% { left: 3%; top: 54%; transform: scale(1) rotate(25deg); opacity: 0.38; } 61.5% { left: 5%; top: 58%; transform: scale(1) rotate(50deg); opacity: 0.38; box-shadow: none; } 62% { left: 5%; top: 58%; transform: scale(1.5) rotate(55deg); opacity: 0.9; box-shadow: -12px -12px 0 1.5px #F2E3B4, 16px -6px 0 1.5px #F2E3B4, -10px 14px 0 1px #F2E3B4, 14px 10px 0 1px #F2E3B4; } 64% { left: 5%; top: 58%; transform: scale(2.2) rotate(60deg); opacity: 0; box-shadow: -28px -28px 0 0 transparent, 36px -14px 0 0 transparent, -24px 32px 0 0 transparent, 32px 24px 0 0 transparent; } 82% { transform: scale(0); opacity: 0; box-shadow: none; } 86% { transform: scale(0.5); opacity: 0.12; } 90% { left: 7%; top: 60%; transform: scale(1) rotate(85deg); opacity: 0.38; box-shadow: none; } 100% { left: 5%; top: 58%; transform: scale(1) rotate(100deg); opacity: 0.38; box-shadow: none; } } /* ── Bullets — fire from ship, travel to target's known position ─ Bullet endpoint matches the target's position at impact %. */ @keyframes sc-bullet-0 { 0%, 13% { left: 13%; top: 17%; opacity: 0; } 13.1% { left: 13%; top: 17%; opacity: 0.85; } 16% { left: 12%; top: 8%; opacity: 0.85; } 16.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes sc-bullet-1 { 0%, 29% { left: 83%; top: 17%; opacity: 0; } 29.1% { left: 83%; top: 17%; opacity: 0.85; } 32% { left: 91%; top: 12%; opacity: 0.85; } 32.5% { opacity: 0; } 100% { opacity: 0; } } @keyframes sc-bullet-2 { 0%, 59% { left: 13%; top: 54%; opacity: 0; } 59.1% { left: 13%; top: 54%; opacity: 0.85; } 62% { left: 7%; top: 60%; opacity: 0.85; } 62.5% { opacity: 0; } 100% { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { html[data-theme="woodgrain"] .sc-asteroid-0 { animation: sc-fall-a 13s linear infinite; } html[data-theme="woodgrain"] .sc-asteroid-1 { animation: sc-fall-b 17s linear infinite; animation-delay: -7s; } html[data-theme="woodgrain"] .sc-asteroid-2 { animation: sc-fall-c 11s linear infinite; animation-delay: -3s; } html[data-theme="woodgrain"] .sc-asteroid-3 { animation: sc-fall-d 15s linear infinite; animation-delay: -10s; } html[data-theme="woodgrain"] .sc-asteroid-4 { animation: sc-fall-e 9s linear infinite; animation-delay: -2s; } html[data-theme="woodgrain"] .sc-asteroid-5 { animation: sc-fall-f 12s linear infinite; animation-delay: -5s; } html[data-theme="woodgrain"] .sc-asteroid-6 { animation: sc-fall-g 8s linear infinite; animation-delay: -1s; } html[data-theme="woodgrain"] .sc-asteroid-7 { animation: sc-fall-h 14s linear infinite; animation-delay: -8s; } html[data-theme="woodgrain"] .sc-asteroid-8 { animation: sc-fall-i 10s linear infinite; animation-delay: -4s; } html[data-theme="woodgrain"] .sc-asteroid-9 { animation: sc-fall-j 7s linear infinite; animation-delay: -6s; } html[data-theme="woodgrain"] .sc-ship { animation: sc-ship-fly 20s linear infinite; } html[data-theme="woodgrain"] .sc-bullet-0 { animation: sc-bullet-0 20s linear infinite; } html[data-theme="woodgrain"] .sc-bullet-1 { animation: sc-bullet-1 20s linear infinite; } html[data-theme="woodgrain"] .sc-bullet-2 { animation: sc-bullet-2 20s linear infinite; } html[data-theme="woodgrain"] .sc-target-0 { animation: sc-target-0 20s linear infinite; } html[data-theme="woodgrain"] .sc-target-1 { animation: sc-target-1 20s linear infinite; } html[data-theme="woodgrain"] .sc-target-2 { animation: sc-target-2 20s linear infinite; } } @media (max-width: 1024px) { html[data-theme="woodgrain"] .sc-asteroid-0 { width: 42px; height: 42px; } html[data-theme="woodgrain"] .sc-asteroid-1 { width: 36px; height: 32px; } html[data-theme="woodgrain"] .sc-asteroid-5 { width: 30px; height: 30px; } html[data-theme="woodgrain"] .sc-asteroid-7 { width: 34px; height: 34px; } html[data-theme="woodgrain"] .sc-target { width: 30px !important; height: 30px !important; } html[data-theme="woodgrain"] .sc-ship { width: 16px; height: 20px; } } @media (max-width: 720px) { html[data-theme="woodgrain"] .sc-asteroid-0 { width: 34px; height: 34px; } html[data-theme="woodgrain"] .sc-asteroid-1 { width: 28px; height: 26px; } html[data-theme="woodgrain"] .sc-asteroid-5 { width: 24px; height: 24px; } html[data-theme="woodgrain"] .sc-asteroid-6 { display: none; } html[data-theme="woodgrain"] .sc-asteroid-7 { width: 28px; height: 28px; } html[data-theme="woodgrain"] .sc-asteroid-8 { display: none; } html[data-theme="woodgrain"] .sc-asteroid-9 { display: none; } html[data-theme="woodgrain"] .sc-target { width: 24px !important; height: 24px !important; } html[data-theme="woodgrain"] .sc-ship { width: 14px; height: 18px; } html[data-theme="woodgrain"] .sc-bullet { display: none; } html[data-theme="woodgrain"] .sc-target { animation: none !important; } } /* ── Front-Loader (NES) showcase ────────────────────────────────── Gray plastic body with red-and-black stripe, cart door, power LED. */ html[data-theme="frontloader"] .theme-showcase { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); } html[data-theme="frontloader"] .sc-frontloader { position: absolute; inset: 0; } html[data-theme="frontloader"] .sc-frontloader-stripe { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, #1D1E22 0 40%, #D8242B 40% 55%, #1D1E22 55% 80%, #D8242B 80% 100%); border-top: 1px solid #0E0F12; border-bottom: 1px solid #0E0F12; } /* NES console PNG hero */ html[data-theme="frontloader"] .sc-frontloader-hero { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); } html[data-theme="frontloader"] .sc-frontloader-hero img { max-height: 160px; width: auto; display: block; } @media (max-width: 1024px) { html[data-theme="frontloader"] .sc-frontloader-hero img { max-height: 130px; } } @media (max-width: 720px) { html[data-theme="frontloader"] .sc-frontloader-hero img { max-height: 95px; } } /* Gray plastic bar with LED + label — sits below the hero, becomes the slim-band visual on subpages. */ html[data-theme="frontloader"] .sc-frontloader-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; } html[data-theme="frontloader"] .sc-frontloader-bar-inner { height: 100%; background: linear-gradient(180deg, #B5B0A8 0%, #9A958C 100%); border-top: 1px solid #D0CBC2; border-bottom: 1px solid #1D1E22; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; } html[data-theme="frontloader"] .sc-frontloader-bar-led { width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF5A5A 0%, #D8242B 60%, #7A0F13 100%); border: 1px solid #5A0A0A; box-shadow: 0 0 4px rgba(255, 42, 42, 0.5); flex-shrink: 0; } html[data-theme="frontloader"] .sc-frontloader-bar-label { font-family: var(--font-pixel); font-size: 7px; color: #1D1E22; letter-spacing: 1.5px; white-space: nowrap; } /* Slim variant: hide the hero image; stripe + bar persist */ html[data-theme="frontloader"]:not(:has(#screen-menu:not(.hidden))) .sc-frontloader-hero { display: none; } html[data-theme="frontloader"]:not(:has(#screen-menu:not(.hidden))) .sc-frontloader-stripe { height: 5px; } html[data-theme="frontloader"]:not(:has(#screen-menu:not(.hidden))) .sc-frontloader-bar { bottom: 0; top: 5px; } /* ── Super Power (SNES) showcase ────────────────────────────────── Console hero image + wordmark bar. */ html[data-theme="super"] .theme-showcase { background: linear-gradient(180deg, var(--bg) 0%, #CFC8BA 100%); border-bottom: 1px solid var(--border); } html[data-theme="super"] .sc-super { position: absolute; inset: 0; } /* SNES console PNG hero */ html[data-theme="super"] .sc-super-hero { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); } html[data-theme="super"] .sc-super-hero img { max-height: 196px; width: auto; display: block; } @media (max-width: 1024px) { html[data-theme="super"] .sc-super-hero img { max-height: 160px; } } @media (max-width: 720px) { html[data-theme="super"] .sc-super-hero img { max-height: 120px; } } /* Wordmark bar — sits below the hero, becomes the slim-band visual on subpages. */ html[data-theme="super"] .sc-super-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, #D2CCC0 0%, #B8B0A2 100%); border-top: 1px solid rgba(0, 0, 0, 0.12); } html[data-theme="super"] .sc-super-wordmark { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 3px; color: var(--accent); } html[data-theme="super"] .sc-super-bar .sc-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; color: #4A453D; white-space: nowrap; } /* Slim variant: hide hero image, bar expands to fill */ html[data-theme="super"]:not(:has(#screen-menu:not(.hidden))) .sc-super-hero { display: none; } html[data-theme="super"]:not(:has(#screen-menu:not(.hidden))) .sc-super-bar { top: 0; } /* ── Blueprint showcase ────────────────────────────────────────── Console schematic hero + drafting title block + approved stamp. */ html[data-theme="blueprint"] .theme-showcase { background: var(--bg); background-image: linear-gradient(rgba(234, 244, 251, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 244, 251, 0.08) 1px, transparent 1px); background-size: 10px 10px; border-bottom: 1px solid var(--border); } html[data-theme="blueprint"] .sc-blueprint { position: absolute; inset: 0; } html[data-theme="blueprint"] .sc-blueprint .sc-panel { gap: 32px; padding: 0 clamp(20px, 4vw, 48px); } /* Blueprint console hero — three schematics fanned across the showcase */ html[data-theme="blueprint"] .sc-blueprint-hero { position: relative; width: 620px; height: 100%; flex-shrink: 0; } html[data-theme="blueprint"] .sc-blueprint-hero img { position: absolute; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4)); border: 1px solid rgba(113, 167, 212, 0.3); } html[data-theme="blueprint"] .sc-bp-snes { height: 170px; width: auto; top: 22px; left: 30px; transform: rotate(-4deg); z-index: 2; } html[data-theme="blueprint"] .sc-bp-nes { height: 190px; width: auto; top: 14px; left: 160px; transform: rotate(1deg); z-index: 3; } html[data-theme="blueprint"] .sc-bp-atari { height: 165px; width: auto; top: 20px; right: 160px; transform: rotate(3deg); z-index: 2; } html[data-theme="blueprint"] .sc-bp-gb { height: 180px; width: auto; top: 16px; right: 20px; transform: rotate(-3deg); z-index: 1; } @media (max-width: 1024px) { html[data-theme="blueprint"] .sc-blueprint-hero { width: 500px; } html[data-theme="blueprint"] .sc-bp-nes { height: 130px; left: 95px; } html[data-theme="blueprint"] .sc-bp-snes { height: 112px; } html[data-theme="blueprint"] .sc-bp-atari { height: 108px; right: 95px; } html[data-theme="blueprint"] .sc-bp-gb { height: 120px; } } @media (max-width: 720px) { html[data-theme="blueprint"] .sc-blueprint-hero { width: 340px; } html[data-theme="blueprint"] .sc-bp-nes { height: 95px; top: 12px; left: 60px; } html[data-theme="blueprint"] .sc-bp-snes { height: 78px; top: 18px; left: 0; } html[data-theme="blueprint"] .sc-bp-atari { height: 76px; top: 16px; right: 62px; } html[data-theme="blueprint"] .sc-bp-gb { height: 88px; top: 12px; right: 0; } } html[data-theme="blueprint"] .sc-blueprint-block { border: 1px solid var(--text); padding: 14px 18px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; font-family: var(--font-mono); } html[data-theme="blueprint"] .sc-blueprint-row { display: contents; font-size: 12px; } html[data-theme="blueprint"] .sc-blueprint-row .sc-label { font-size: 9px; color: var(--text-dim); padding-top: 2px; } html[data-theme="blueprint"] .sc-blueprint-row b { color: var(--text); font-weight: 700; letter-spacing: 1px; } html[data-theme="blueprint"] .sc-blueprint-stamp { position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%) rotate(-10deg); z-index: 10; font-family: var(--font-pixel); font-size: 12px; letter-spacing: 3px; color: var(--accent); padding: 10px 16px; border: 3px solid var(--accent); opacity: 0.85; text-shadow: 0 0 10px rgba(243, 211, 93, 0.35); } @media (max-width: 720px) { html[data-theme="blueprint"] .sc-blueprint-block { display: none; } html[data-theme="blueprint"] .sc-blueprint-stamp { font-size: 10px; letter-spacing: 2px; padding: 5px 8px; border-width: 2px; } } /* Slim: hide hero + title block + stamp */ html[data-theme="blueprint"]:not(:has(#screen-menu:not(.hidden))) .sc-blueprint-hero, html[data-theme="blueprint"]:not(:has(#screen-menu:not(.hidden))) .sc-blueprint-block, html[data-theme="blueprint"]:not(:has(#screen-menu:not(.hidden))) .sc-blueprint-stamp { display: none; } /* ============================================================ PHOSPHOR TERMINAL — amber-on-black CRT, monochrome, heavy scanlines ============================================================ */ html[data-theme="phosphor"] { --bg: #0A0500; --surface: #130A00; --surface2: #1D0F00; --border: #5A3A00; --text: #FFB000; --text-dim: #8A5A00; --accent: #FFD88B; --accent2: #FFB000; --danger: #FF6B3D; --warning: #FFD23F; --glow: 0 0 20px rgba(255, 176, 0, 0.25); --radius: 3px; } html[data-theme="phosphor"] body.app-main { /* Phosphor glow on all text — subtle but unmistakable */ text-shadow: 0 0 6px rgba(255, 176, 0, 0.35); } html[data-theme="phosphor"] body.app-main::before { /* Dense CRT scanlines */ content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0, 0, 0, 0.55) 2px 3px ); mix-blend-mode: multiply; } html[data-theme="phosphor"] body.app-main::after { /* CRT barrel vignette */ content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.8), inset 0 0 50px rgba(0, 0, 0, 0.45); background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%); } /* ============================================================ CARTRIDGE PRINT — paper cream, halftone dots, red + navy + gold ink A light theme: inverts the whole dark/light axis. ============================================================ */ html[data-theme="cartridge"] { --bg: #F3E7CF; --surface: #FFF9EA; --surface2: #EEDEB9; --border: #14141F; --text: #14141F; --text-dim: #6E6B5E; --accent: #D62828; --accent2: #1C6BB8; --danger: #D62828; --warning: #D9A441; --glow: 0 0 0 rgba(0, 0, 0, 0); --radius: 8px; } /* Halftone dots + paper noise baked into the body's own background layer so they render BELOW page content (including the hero and its cartridges) instead of as a fixed overlay that paints over everything. This removes the need for any z-index fighting to keep the cartridges unobscured by dots. */ html[data-theme="cartridge"] body.app-main { background-color: var(--bg); background-image: /* Halftone ink dots */ radial-gradient(circle at 1px 1px, rgba(20, 20, 31, 0.18) 1px, transparent 1.5px), /* Paper noise via SVG turbulence */ url("data:image/svg+xml;utf8,"); background-size: 7px 7px, 240px 240px; background-repeat: repeat, repeat; } html[data-theme="cartridge"] .btn:hover { background: color-mix(in srgb, var(--border) 12%, transparent); } html[data-theme="cartridge"] .site-footer { background: var(--bg); opacity: 1; } /* ============================================================ GAME BOY DMG — olive LCD framed by a putty shell Each card IS a Game Boy screen: the card's thick border paints the putty chassis (shell), an inset shadow is the dark LCD bezel line, and the card's own olive background is the LCD. A layered dot-matrix gradient adds the classic screen texture. ============================================================ */ html[data-theme="gameboy"] { --bg: #BFB7A3; /* putty shell */ --surface: #98A96A; /* olive LCD */ --surface2: #85976A; --border: #1F2A10; /* dark bezel / ink */ --text: #1F2A10; --text-dim: #5A6B3A; --accent: #7B0712; --accent2: #1F2A10; --danger: #C62B3C; --warning: #7B0712; --glow: 0 0 0 rgba(0, 0, 0, 0); --radius: 10px; } html[data-theme="gameboy"] .card { background: /* dot-matrix: thin horizontal + vertical pixel lines on olive */ repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 3px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 3px), var(--surface); /* The chunky putty border is the console chassis. */ border: 7px solid var(--bg); /* Thin dark line between shell and screen = the LCD bezel. */ box-shadow: inset 0 0 0 1px var(--border); } html[data-theme="gameboy"] .btn:hover { background: color-mix(in srgb, var(--border) 12%, transparent); } /* ============================================================ NEON ARCADE — maximalist arcade cabinet Hot pink + electric cyan + amber on deep violet-black. Perspective grid floor + scanlines. ============================================================ */ html[data-theme="arcade"] { --bg: #060010; --surface: #110829; --surface2: #0B0320; --border: #2A0F4E; --text: #F6E7FF; --text-dim: #8E7BB5; --accent: #FF2D95; --accent2: #00F0FF; --danger: #FF3350; --warning: #FFD23F; --glow: 0 0 24px rgba(255, 45, 149, 0.40); --radius: 6px; } html[data-theme="arcade"] body.app-main::before { /* Perspective grid floor behind content */ content: ''; position: fixed; left: 50%; bottom: 0; width: 200vw; height: 55vh; transform: translateX(-50%) perspective(600px) rotateX(60deg); transform-origin: 50% 100%; background-image: linear-gradient(rgba(255, 45, 149, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, .18) 1px, transparent 1px); background-size: 60px 60px; opacity: .5; pointer-events: none; mask-image: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .3) 40%, transparent 90%); -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .3) 40%, transparent 90%); z-index: -1; } html[data-theme="arcade"] body.app-main::after { /* Scanline overlay */ content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .3) 2px 3px); mix-blend-mode: multiply; } /* ============================================================ MODULAR PANEL — instrument-grade gunmetal with persimmon accent ============================================================ */ html[data-theme="modular"] { --bg: #15171C; --surface: #22252D; --surface2: #0E1015; --border: #0A0B0E; --text: #EFE9DC; --text-dim: #7A7468; --accent: #FF5A3C; --accent2: #C7F443; --danger: #E63946; --warning: #FFC857; --glow: 0 0 18px rgba(255, 90, 60, 0.35); --radius: 3px; } html[data-theme="modular"] body.app-main::before { /* Warm persimmon glow at the top edge */ content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 90, 60, .08), transparent 70%), linear-gradient(180deg, #15171C 0%, #0F1116 100%); } /* ============================================================ NEO SWISS — editorial magazine, near-white with a single red accent A light theme: inverts the dark/light axis with sharp rules. ============================================================ */ html[data-theme="swiss"] { --bg: #F1EFE8; --surface: #FFFFFF; --surface2: #E4E1D7; --border: #0B0B10; --text: #0B0B10; --text-dim: #6A6A78; --accent: #E6004D; --accent2: #1F3BE6; --danger: #E6004D; --warning: #FFC700; --glow: 0 0 0 rgba(0, 0, 0, 0); --radius: 0; } html[data-theme="swiss"] .btn:hover, html[data-theme="swiss"] .btn-tiny:hover { background: color-mix(in srgb, var(--text) 12%, var(--surface2)); color: var(--text); } html[data-theme="swiss"] body.app-main::before { /* Fine SVG grain — keeps near-white backgrounds from looking sterile */ content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9996; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; } /* ============================================================ ATARI 2600 (Heavy Sixer) — faux-teak woodgrain body, dark plastic cards floating on top with orange trim + chrome accents. ============================================================ */ html[data-theme="woodgrain"] { /* --bg is used as the page background by html/body rules in style.css. We set it to a mid-wood tone; the body.app-main::before paints the grain stripes and lateral shading on top so the whole page reads as veneer. */ --bg: #6A3F1E; --surface: #2A2622; /* dark plastic card */ --surface2: #3D3730; --border: #14100C; --text: #F2E3B4; --text-dim: #C7B48A; --accent: #E96A1E; --accent2: #C0BCB4; --danger: #D62A1E; --warning: #FFD23F; --glow: 0 0 18px rgba(233, 106, 30, 0.45); --radius: 3px; } html[data-theme="woodgrain"] body.app-main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(180, 120, 60, .25) 0%, rgba(140, 90, 45, .10) 20%, transparent 50%, rgba(100, 60, 28, .10) 80%, rgba(50, 30, 12, .25) 100%), url('/img/woodgrain-tile.png'); background-size: 100% 100%, 400px 400px; } /* ============================================================ NES FRONT-LOADER — light gray plastic body + Nintendo red + black ============================================================ */ html[data-theme="frontloader"] { --bg: #B5B0A8; --surface: #D0CBC2; --surface2: #9D988F; --border: #1D1E22; --text: #1D1E22; --text-dim: #3A3C43; --accent: #D8242B; --accent2: #1D1E22; --danger: #D8242B; --warning: #E49A00; --glow: 0 0 14px rgba(216, 36, 43, 0.35); --radius: 6px; } html[data-theme="frontloader"] .btn:hover { background: #807B73; } /* Signature NES red-and-black stripe just under the site header */ html[data-theme="frontloader"] body.app-main::before { content: ''; position: fixed; top: 48px; /* site-header is 48px tall */ left: 0; right: 0; height: 6px; z-index: 199; /* below header sticky (200), above content */ pointer-events: none; background: linear-gradient(90deg, #1D1E22 0 40%, #D8242B 40% 55%, #1D1E22 55% 80%, #D8242B 80% 100%); border-top: 1px solid #0E0F12; border-bottom: 1px solid #0E0F12; } html[data-theme="frontloader"] body.app-main:has(#screen-game:not(.hidden))::before, html[data-theme="frontloader"] body.app-main:has(#screen-lobby:not(.hidden))::before { display: none; } /* ============================================================ SUPER NES — lavender-gray two-tone with deep purple + SMW colors A light theme: soft, friendly, curvy. ============================================================ */ html[data-theme="super"] { --bg: #EAE3D4; --surface: #FFFFFF; --surface2: #CFC8BA; --border: #605A4F; --text: #1A1A24; --text-dim: #3E3D4D; --accent: #4D3789; --accent2: #6F56B2; --danger: #D14646; --warning: #E49A00; --glow: 0 0 14px rgba(77, 55, 137, 0.30); --radius: 10px; } html[data-theme="super"] body.app-main::before { /* Soft violet wash at top — echoes the SNES logo glow */ content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(111, 86, 178, .12), transparent 70%); } /* ============================================================ BLUEPRINT — Prussian-blue paper + chalk ink, grid rule paper, orthogonal schematics of retro consoles tiled behind content. ============================================================ */ html[data-theme="blueprint"] { --bg: #0B3C5D; --surface: #134A74; --surface2: #0E4167; --border: #71A7D4; --text: #EAF4FB; --text-dim: #8FB6D4; --accent: #F3D35D; /* amber drafting stamp */ --accent2: #70C1FF; /* highlight-blue annotation */ --danger: #F36D6D; /* correction red */ --warning: #F3D35D; --glow: 0 0 14px rgba(112, 193, 255, 0.35); --radius: 0; /* sharp technical edges */ } /* Graph paper grid — fine 10px rules + bold 50px rules on Prussian blue */ html[data-theme="blueprint"] body.app-main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(234, 244, 251, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 244, 251, 0.06) 1px, transparent 1px), linear-gradient(rgba(234, 244, 251, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 244, 251, 0.12) 1px, transparent 1px); background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px; } /* Schematic overlay — real blueprint PNGs tiled at low opacity */ html[data-theme="blueprint"] body.app-main::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.08; background-image: url('/img/nes-blueprint.png'), url('/img/snes-blueprint.png'), url('/img/atari-blueprint.png'); background-size: 420px auto, 420px auto, 420px auto; background-position: 40px 20px, 480px 40px, 260px 460px; background-repeat: no-repeat; } /* ============================================================ MATRIX — monochrome phosphor green on pure black, digital rain behind content + scanline overlay + text glow. ============================================================ */ html[data-theme="matrix"] { --bg: #020B02; --surface: #0A160A; --surface2: #071107; --border: #1A3B1A; --text: #00FF66; --text-dim: #008030; --accent: #39FF14; --accent2: #00B840; --danger: #FF0040; --warning: #E6FF00; --glow: 0 0 18px rgba(0, 255, 102, 0.45); --radius: 3px; } /* Phosphor glow on all text */ html[data-theme="matrix"] body.app-main { text-shadow: 0 0 8px rgba(0, 255, 102, 0.45); } /* Digital rain streaks — vertical columns of falling code, approximated with an SVG of katakana-like glyphs painted in green and tiled. Kept low-opacity so UI stays legible. */ html[data-theme="matrix"] body.app-main::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.32; background-image: url("data:image/svg+xml;utf8,"); background-size: 280px 560px; background-repeat: repeat; } /* Dense scanlines for that terminal feel */ html[data-theme="matrix"] body.app-main::after { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0, 0, 0, 0.42) 2px 3px ); mix-blend-mode: multiply; } /* ============================================================ CYBERPUNK — rainy neon alleyway in Japan at night Layers: dark alley walls closing in on the sides + scattered neon sign glows + heavy falling rain + broken asphalt along the bottom edge. Animated rain cycles endlessly. ============================================================ */ html[data-theme="cyberpunk"] { --bg: #05020C; /* nearly black, magenta-tinted sky */ --surface: #1A0A2E; /* deeper violet surfaces */ --surface2: #0C0418; --border: #4A1F6C; /* hologram-violet edge */ --text: #F4E5FF; --text-dim: #A07ED9; --accent: #FF1499; /* hot magenta — leans pinker than before */ --accent2: #12FFCC; /* neon cyan secondary */ --danger: #FF2A52; /* brake-light red */ --warning: #FFB800; --glow: 0 0 22px rgba(255, 20, 153, 0.55); --radius: 2px; } /* Body composition — the inspiration bitmap as a fixed full-bleed backdrop, heavily darkened by stacked overlays so the page content (cards, lists, etc.) reads cleanly while the photo's mood persists in the background. */ html[data-theme="cyberpunk"] body.app-main { background-image: /* Very heavy black overlay — the photo is high-contrast and the bright bitmap regions otherwise bleed through behind cards and hurt readability, especially on mobile where fixed-attachment cover crops aggressively. */ linear-gradient(180deg, rgba(5, 2, 12, 0.92) 0%, rgba(5, 2, 12, 0.95) 50%, rgba(5, 2, 12, 0.97) 100%), /* Magenta-violet wash to tie the body into the showcase mood */ radial-gradient(ellipse 70% 50% at 50% 0%, rgba(110, 30, 140, 0.35), transparent 75%), /* The photo itself */ url("/img/cyberpunk.png"); background-size: 100% 100%, 100% 100%, cover; background-position: 0 0, 0 0, center center; background-attachment: fixed, fixed, fixed; background-repeat: no-repeat, no-repeat, no-repeat; } /* (The body no longer has a cp-rain animation — the rain moved to .theme-showcase. Any reduced-motion override lives with the rain rule above so the two stay in lockstep.) */ /* (The viewport-bottom asphalt-crack SVG was removed — it competed with the bitmap backdrop. body.app-main::before is intentionally left unset for cyberpunk.) */ /* Bright neon reflection on the wet street — a thin glowing line near the horizon where the asphalt meets the alley walls. */ html[data-theme="cyberpunk"] body.app-main::after { content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none; background: /* Reflected sign color on the puddle row */ linear-gradient(180deg, transparent 74%, rgba(255, 0, 122, 0.08) 76% 78%, transparent 78% 82%, rgba(18, 255, 204, 0.06) 83% 85%, transparent 85%); mix-blend-mode: screen; } /* ============================================================ WASTELAND — Fallout Pip-Boy chassis, dirty cracked-glass CRT, rust Muted Pip-Boy green text + Vault-Tec amber + rust-orange secondary. Decoration stack (body.app-main): ::before — rust patches at corners + dust grain + scanlines ::after — CRT vignette + hairline crack overlay ============================================================ */ html[data-theme="wasteland"] { --bg: #2A2420; /* rusted-steel base (warm dark gray) */ --surface: #121A0E; /* Pip-Boy green surfaces (cards/screens) */ --surface2: #0C1209; --border: #3F4F2A; --text: #7AE865; /* slightly muted green, less "fresh" */ --text-dim: #4A7A3A; --accent: #E8C84A; /* Vault-Tec amber */ --accent2: #C86428; /* rust orange */ --danger: #FF4432; --warning: #E8C84A; --glow: 0 0 14px rgba(122, 232, 101, 0.40); --radius: 2px; } html[data-theme="wasteland"] body.app-main { /* Pip-Boy phosphor glow */ text-shadow: 0 0 6px rgba(122, 232, 101, 0.45); /* Rusted-steel content area — the space below the site-header. Layers top → bottom (first in list = highest visual priority): 1. Spider-web crack SVG 2. Rust bloom patches scattered across 3. Vertical rust streaks cascading down 4. Vertical brushed-steel striation (Phillips-head corner screws were removed — they covered menus and content at the four corners.) */ background-image: /* 1. Crack spider-web (keeps its impact at 720, 180 in viewBox) */ url("data:image/svg+xml;utf8,"), /* 2. Rust blooms */ radial-gradient(circle at 20% 18%, rgba(170, 80, 32, 0.38), transparent 24%), radial-gradient(circle at 78% 42%, rgba(190, 88, 36, 0.32), transparent 26%), radial-gradient(circle at 42% 78%, rgba(150, 68, 28, 0.32), transparent 24%), radial-gradient(circle at 88% 85%, rgba(180, 86, 34, 0.30), transparent 22%), radial-gradient(circle at 10% 55%, rgba(140, 64, 26, 0.24), transparent 20%), /* 3. Vertical rust streaks */ linear-gradient(180deg, transparent 0%, rgba(80, 42, 22, 0.10) 60%, rgba(50, 26, 14, 0.18) 100%), /* 4. Brushed-steel vertical striation */ repeating-linear-gradient(180deg, rgba(255, 230, 200, 0.025) 0 1px, transparent 1px 3px, rgba(0, 0, 0, 0.06) 3px 4px, transparent 4px 7px); background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, auto; background-position: center, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; } /* Wasteland site-header — heavier metal plate with Vault-Tec amber trim so it reads as a reinforced bulkhead rather than blending into the rusted-steel body. Overrides the color-mix default that's applied globally in header.css. */ html[data-theme="wasteland"] .site-header { /* Lift above the viewport-wide rust (z:9997) and CRT vignette (z:9999) pseudos so the logo + nav read cleanly. Without this bump the multiply overlay and inset black shadow stack on top of the header, darkening the logo and nav labels into near-illegibility. */ z-index: 10002; background: /* top highlight */ linear-gradient(180deg, #524A42 0%, #3E3830 45%, #2C2720 100%); border-bottom: 3px solid var(--accent); box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.14), 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(232, 200, 74, 0.22); } /* (Header corner screws removed — they covered the hamburger menu and right-side controls. body::before/::after are intentionally left unset for wasteland.) */ /* Header typography — the default --text-dim (#4A7A3A) is a muted Pip-Boy green that has weak contrast against the dark metal plate, so nav labels read as almost illegible. Swap to a warm Vault-Tec cream that pops on the metal, and brighten the logo + slogan. */ html[data-theme="wasteland"] .site-header-logo { color: #F5E6B8; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="wasteland"] .site-header-logo .accent { color: var(--accent); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="wasteland"] .site-header-slogan { color: #C5B288; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html[data-theme="wasteland"] .site-nav-link { color: #D8C68A; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="wasteland"] .site-nav-link:hover { color: #FFE9A8; } html[data-theme="wasteland"] .site-nav-link.active { color: var(--accent); background: var(--surface2); } html[data-theme="wasteland"] .site-header-hamburger { color: #D8C68A; } html[data-theme="wasteland"] .site-header-hamburger:hover { color: #FFE9A8; } /* Rust patches at corners + dust grain — stacked as multiple background layers on a single pseudo so they composite once under multiply. Scanlines live inside the Pip-Boy screen only. */ html[data-theme="wasteland"] body.app-main::before { content: ''; position: fixed; /* Start below the 48-px site-header so the multiply blend doesn't darken the nav + logo into illegibility. */ top: 48px; right: 0; bottom: 0; left: 0; z-index: 9997; pointer-events: none; background: /* Rust/contamination patches at corners and edges */ radial-gradient(ellipse 45% 30% at 0% 0%, rgba(200, 100, 40, 0.24), transparent 65%), radial-gradient(ellipse 55% 40% at 100% 100%, rgba(200, 100, 40, 0.20), transparent 65%), radial-gradient(ellipse 35% 25% at 92% 18%, rgba(138, 70, 25, 0.16), transparent 65%), radial-gradient(ellipse 30% 22% at 8% 85%, rgba(92, 50, 20, 0.18), transparent 65%), /* Dust / dried-oil grain via SVG turbulence */ url("data:image/svg+xml;utf8,"); /* Scanlines intentionally NOT applied here — the CRT effect lives inside the Pip-Boy screen's own background (see .sc-wasteland-screen) so it reads as coming from the monitor. */ mix-blend-mode: multiply; } /* CRT barrel vignette — sits on TOP of content. The broken-glass crack overlay has been moved to body.app-main's background-image layer so it tucks BEHIND content (see above). */ html[data-theme="wasteland"] body.app-main::after { content: ''; position: fixed; /* Start below the 48-px header so the heavy inset black shadow doesn't wash the nav out. */ top: 48px; right: 0; bottom: 0; left: 0; z-index: 9999; pointer-events: none; box-shadow: inset 0 0 170px rgba(0, 0, 0, 0.85), inset 0 0 70px rgba(0, 0, 0, 0.55); background: radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.65) 100%); } /* ── Wasteland showcase — Fallout Pip-Boy 3000 Mk IV chassis ────── Dark-gray plastic/metal housing with left-wing gauge + Pip-Boy plate + chrome wheel, center screen bezel with 4 rivets + amber STATS/ITEMS/DATA buttons beneath, and a rubber accordion connector on the right (where the wrist strap mounts). Screen content keeps the Pip-Boy green palette. */ html[data-theme="wasteland"] .theme-showcase { background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(200, 100, 40, 0.12), transparent 70%), radial-gradient(ellipse 50% 40% at 90% 100%, rgba(138, 70, 25, 0.14), transparent 70%), linear-gradient(180deg, #12170A 0%, #080B05 100%); border-top: 1px solid #3F4F2A; border-bottom: 1px solid #3F4F2A; } html[data-theme="wasteland"] .sc-wasteland { position: absolute; inset: 0; } html[data-theme="wasteland"] .sc-pipboy { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: 0; width: min(840px, 96%); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); } /* Shared chassis styling — dark gray plastic with paint-chip wear */ .sc-pipboy-left, .sc-pipboy-center, .sc-pipboy-right { background: /* Paint-chip wear (sparse darker metal spots) */ radial-gradient(circle at 18% 30%, #161618 0 3px, transparent 4px), radial-gradient(circle at 76% 70%, #161618 0 2.5px, transparent 3.5px), radial-gradient(circle at 46% 82%, #161618 0 2px, transparent 3px), radial-gradient(circle at 88% 20%, #161618 0 3px, transparent 4px), /* Base paint */ linear-gradient(180deg, #4A4A4E 0%, #323236 30%, #26262A 100%); border: 2px solid #0A0A0C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 6px rgba(0, 0, 0, 0.55); } html[data-theme="wasteland"] .sc-pipboy-left { border-radius: 16px 4px 4px 16px; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 82px; border-right: none; } html[data-theme="wasteland"] .sc-pipboy-center { border-radius: 4px; padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; border-left-width: 0; border-right-width: 0; } html[data-theme="wasteland"] .sc-pipboy-right { border-radius: 4px 16px 16px 4px; padding: 10px; display: flex; align-items: center; justify-content: center; min-width: 40px; border-left: none; } /* Left wing — round gauge dial */ html[data-theme="wasteland"] .sc-pipboy-gauge { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D8CBA8 0%, #7A6E50 60%, #2A2414 100%); border: 2px solid #0A0A0C; box-shadow: inset 0 1px 0 rgba(255, 235, 180, 0.35), 0 1px 2px rgba(0, 0, 0, 0.6); } html[data-theme="wasteland"] .sc-pipboy-gauge-ticks { position: absolute; inset: 4px; border-radius: 50%; background: conic-gradient(from 225deg, rgba(0,0,0,0.55) 0 1deg, transparent 1deg 22deg, rgba(0,0,0,0.55) 22deg 23deg, transparent 23deg 44deg, rgba(0,0,0,0.55) 44deg 45deg, transparent 45deg 66deg, rgba(0,0,0,0.55) 66deg 67deg, transparent 67deg 88deg, rgba(0,0,0,0.55) 88deg 89deg, transparent 89deg 270deg); } html[data-theme="wasteland"] .sc-pipboy-gauge-needle { position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: #FF6F1A; transform-origin: 1px 50%; transform: translate(-1px, -1px) rotate(-25deg); box-shadow: 0 0 4px rgba(255, 111, 26, 0.7); border-radius: 1px; } html[data-theme="wasteland"] .sc-pipboy-plate { font-family: 'Georgia', serif; font-style: italic; font-size: 10px; color: #CFCFD2; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); padding: 2px 8px; background: linear-gradient(180deg, #2E2E32 0%, #1A1A1C 100%); border: 1px solid #0A0A0C; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); letter-spacing: 0.5px; } /* Chrome wheel / dial (the big bottom-left gear-like element) */ html[data-theme="wasteland"] .sc-pipboy-wheel { width: 42px; height: 42px; border-radius: 50%; background: /* Gear-tooth pattern via conic gradient */ conic-gradient(from 0deg, #E0DACA 0 8deg, #8A8476 8deg 22deg, #E0DACA 22deg 30deg, #8A8476 30deg 45deg, #E0DACA 45deg 53deg, #8A8476 53deg 67deg, #E0DACA 67deg 75deg, #8A8476 75deg 90deg, #E0DACA 90deg 98deg, #8A8476 98deg 112deg, #E0DACA 112deg 120deg, #8A8476 120deg 135deg, #E0DACA 135deg 143deg, #8A8476 143deg 157deg, #E0DACA 157deg 165deg, #8A8476 165deg 180deg, #E0DACA 180deg 188deg, #8A8476 188deg 202deg, #E0DACA 202deg 210deg, #8A8476 210deg 225deg, #E0DACA 225deg 233deg, #8A8476 233deg 247deg, #E0DACA 247deg 255deg, #8A8476 255deg 270deg, #E0DACA 270deg 278deg, #8A8476 278deg 292deg, #E0DACA 292deg 300deg, #8A8476 300deg 315deg, #E0DACA 315deg 323deg, #8A8476 323deg 337deg, #E0DACA 337deg 345deg, #8A8476 345deg 360deg); border: 2px solid #0A0A0C; box-shadow: inset 0 0 0 4px #2A2A2C, inset 0 0 0 5px #8A8476, 0 1px 2px rgba(0, 0, 0, 0.6); position: relative; } html[data-theme="wasteland"] .sc-pipboy-wheel::after { /* Center pin */ content: ''; position: absolute; inset: 38%; background: radial-gradient(circle at 30% 30%, #2A2A2C 0%, #0A0A0C 100%); border-radius: 50%; border: 1px solid #000; } /* Center — screen bezel */ html[data-theme="wasteland"] .sc-pipboy-bezel { position: relative; padding: 4px; background: linear-gradient(180deg, #26262A 0%, #1A1A1C 100%); border: 2px solid #0A0A0C; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .sc-pipboy-rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #9A9A9D 0%, #2A2A2C 60%, #000 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.55); } .sc-pipboy-rivet-tl { top: 4px; left: 4px; } .sc-pipboy-rivet-tr { top: 4px; right: 4px; } .sc-pipboy-rivet-bl { bottom: 4px; left: 4px; } .sc-pipboy-rivet-br { bottom: 4px; right: 4px; } /* Amber button row below the screen */ html[data-theme="wasteland"] .sc-pipboy-buttons { display: flex; justify-content: center; gap: 10px; padding: 2px 8px; } .sc-pipboy-btn { padding: 5px 12px; background: radial-gradient(circle at 50% 35%, #FFC140 0%, #E08820 50%, #6E3E0A 100%); border: 1px solid #3A1E05; border-radius: 3px; color: #2A1400; font-family: var(--font-pixel); font-size: 7px; letter-spacing: 1px; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 160, 50, 0.55); text-shadow: 0 1px 0 rgba(255, 220, 160, 0.4); } /* Right wing — rubber accordion boot (the wrist-strap connector) */ html[data-theme="wasteland"] .sc-pipboy-boot { display: block; width: 22px; height: 54px; background: repeating-linear-gradient(180deg, #3A3A3C 0 3px, #1A1A1C 3px 5px, #2A2A2C 5px 8px); border: 1px solid #0A0A0C; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 2px 0 4px rgba(0, 0, 0, 0.5); } html[data-theme="wasteland"] .sc-wasteland-screen { background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.4) 2px 3px), radial-gradient(ellipse at center, #16291A 0%, #0B170E 100%); border: 1px solid #000; border-radius: 2px; padding: 8px 12px; box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.75), inset 0 0 32px rgba(0, 60, 0, 0.12); color: #7AE865; text-shadow: 0 0 6px rgba(122, 232, 101, 0.5); font-family: var(--font-mono); font-size: 11px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; } /* Body — Vault Boy silhouette next to the stats column */ html[data-theme="wasteland"] .sc-wasteland-body { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .sc-pipboy-vboy { width: 48px; height: 64px; justify-self: end; filter: drop-shadow(0 0 4px rgba(122, 232, 101, 0.45)); } /* Tabs — Status / S.P.E.C.I.A.L. / Skills / Perks / General */ html[data-theme="wasteland"] .sc-wasteland-tabs { display: flex; justify-content: space-between; font-family: var(--font-pixel); font-size: 7px; letter-spacing: 0.8px; text-transform: uppercase; padding-top: 4px; border-top: 1px dashed rgba(122, 232, 101, 0.3); color: rgba(122, 232, 101, 0.7); } html[data-theme="wasteland"] .sc-wasteland-tab-active { color: #0B170E; background: #7AE865; padding: 2px 6px; margin: -2px -2px; box-shadow: 0 0 6px rgba(122, 232, 101, 0.55); text-shadow: none; } html[data-theme="wasteland"] .sc-wasteland-header-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; color: rgba(122, 232, 101, 0.8); } html[data-theme="wasteland"] .sc-wasteland-header { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-pixel); font-size: 10px; letter-spacing: 1.5px; padding-bottom: 6px; border-bottom: 1px dashed rgba(122, 232, 101, 0.3); } html[data-theme="wasteland"] .sc-wasteland-status { color: #E8C84A; text-shadow: 0 0 6px rgba(232, 200, 74, 0.55); font-size: 9px; } html[data-theme="wasteland"] .sc-wasteland-stats { display: flex; flex-direction: column; gap: 4px; } html[data-theme="wasteland"] .sc-wasteland-stat { display: grid; grid-template-columns: 40px 1fr 50px; gap: 8px; align-items: center; font-size: 10px; } html[data-theme="wasteland"] .sc-wasteland-stat em { font-family: var(--font-pixel); font-style: normal; font-size: 8px; letter-spacing: 1px; color: rgba(122, 232, 101, 0.75); } html[data-theme="wasteland"] .sc-wasteland-stat b { font-family: var(--font-pixel); font-weight: 400; font-size: 9px; text-align: right; letter-spacing: 0.5px; } html[data-theme="wasteland"] .sc-wasteland-bar { height: 7px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(122, 232, 101, 0.3); position: relative; overflow: hidden; } html[data-theme="wasteland"] .sc-wasteland-bar > i { display: block; height: 100%; background: linear-gradient(90deg, rgba(122, 232, 101, 0.95) 0%, rgba(90, 200, 70, 0.85) 100%); box-shadow: 0 0 6px rgba(122, 232, 101, 0.7); } html[data-theme="wasteland"] .sc-wasteland-bar-rad > i { background: linear-gradient(90deg, #E8C84A 0%, #FFC828 100%); box-shadow: 0 0 6px rgba(232, 200, 74, 0.7); } html[data-theme="wasteland"] .sc-wasteland-bar-amber > i { background: linear-gradient(90deg, #E8C84A 0%, #C86428 100%); box-shadow: 0 0 6px rgba(200, 100, 40, 0.7); } html[data-theme="wasteland"] .sc-wasteland-footer { display: flex; justify-content: space-between; font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px; color: rgba(122, 232, 101, 0.75); padding-top: 6px; border-top: 1px dashed rgba(122, 232, 101, 0.3); } /* Slim variant for non-menu pages — hide the wings and buttons + tabs + Vault Boy, keep just the center screen bezel with stats header. */ html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy-left, html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy-right, html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy-buttons, html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy-vboy, html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-wasteland-stats, html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-wasteland-tabs { display: none; } html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy { grid-template-columns: 1fr; width: auto; } html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-pipboy-center { padding: 2px 10px; border-radius: 3px; border: 1px solid #0A0A0C; } html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-wasteland-screen { min-height: 0; padding: 3px 8px; } html[data-theme="wasteland"]:not(:has(#screen-menu:not(.hidden))) .sc-wasteland-header { border: none; padding: 0; } /* Mobile menu hero — narrow the chassis width so it clears the FEEDBACK tab on the right, and scale down so the contents fit the 140px-tall mobile showcase. */ @media (max-width: 640px) { html[data-theme="wasteland"]:has(#screen-menu:not(.hidden)) .sc-pipboy { width: calc(100% - 48px); transform: scale(0.7); transform-origin: center; } } @media (max-width: 420px) { html[data-theme="wasteland"]:has(#screen-menu:not(.hidden)) .sc-pipboy { transform: scale(0.6); width: 167%; } } /* ============================================================ TEMPLATE (copy to add a theme, uncomment, and customize) ============================================================ html[data-theme=""] { --bg: #...; --surface: #...; --surface2: #...; --border: #...; --text: #...; --text-dim: #...; --accent: #...; --accent2: #...; --danger: #...; --warning: #...; --glow: 0 0 20px rgba(R, G, B, 0.15); } html[data-theme=""] body.app-main::before { // Optional full-viewport decoration layer (scanlines, grid, etc.) content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; } ============================================================ */ /* ============================================================ STEAMPUNK — Victorian clockwork, brass gears, copper pipes Aged leather background, parchment text, polished brass accents. Decoration stack (body.app-main): ::before — corner rivet clusters + faint gear watermark ::after — sepia photograph vignette ============================================================ */ html[data-theme="steampunk"] { --bg: #1A1208; --surface: #241A0E; --surface2: #2E2214; --border: #5C4A2E; --text: #E8DCC4; --text-dim: #9A8660; --accent: #D4A030; --accent2: #C06828; --danger: #C83020; --warning: #D4A030; --glow: 0 0 18px rgba(212, 160, 48, 0.30); --radius: 3px; } html[data-theme="steampunk"] body.app-main { text-shadow: 0 0 4px rgba(212, 160, 48, 0.15); background-image: /* Leather grain via SVG fractalNoise */ url("data:image/svg+xml;utf8,"), /* Vertical striation (leather tooling) */ repeating-linear-gradient(180deg, rgba(212, 160, 48, 0.02) 0 1px, transparent 1px 3px, rgba(0, 0, 0, 0.04) 3px 4px, transparent 4px 8px); background-attachment: fixed; } /* Homepage hero bleed — the same random image from the showcase covers the full page behind a semi-transparent brown wash. --steam-hero is set by the showcase template in JS. */ html[data-theme="steampunk"]:has(#screen-menu:not(.hidden)) body.app-main { background-image: /* Keep leather grain on top */ url("data:image/svg+xml;utf8,"), repeating-linear-gradient(180deg, rgba(212, 160, 48, 0.02) 0 1px, transparent 1px 3px, rgba(0, 0, 0, 0.04) 3px 4px, transparent 4px 8px), /* Semi-transparent brown wash over the hero */ linear-gradient(rgba(26, 18, 8, 0.72), rgba(26, 18, 8, 0.72)), /* Hero image */ var(--steam-hero, none); background-size: auto, auto, auto, cover; background-position: center, center, center, center 30%; background-attachment: fixed; } /* Make surfaces translucent on homepage so the hero bleeds through */ html[data-theme="steampunk"]:has(#screen-menu:not(.hidden)) { --surface: rgba(36, 26, 14, 0.78); --surface2: rgba(46, 34, 20, 0.78); } /* ── Steampunk site-header — dark brass plate ────────────────── */ html[data-theme="steampunk"] .site-header { z-index: 10002; background: linear-gradient(180deg, #4A3A1E 0%, #3A2A14 40%, #2A1E0E 100%); border-bottom: 2px solid #D4A030; box-shadow: inset 0 1px 0 rgba(232, 208, 144, 0.18), 0 2px 0 rgba(0, 0, 0, 0.5), 0 0 14px rgba(212, 160, 48, 0.18); } html[data-theme="steampunk"] .site-header-logo { color: #E8DCC4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="steampunk"] .site-header-logo .accent { color: #D4A030; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="steampunk"] .site-header-slogan { color: #B8A078; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } html[data-theme="steampunk"] .site-nav-link { color: #C8B088; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); } html[data-theme="steampunk"] .site-nav-link:hover { color: #E8D8B0; } html[data-theme="steampunk"] .site-nav-link.active { color: #D4A030; background: var(--surface2); } html[data-theme="steampunk"] .site-header-hamburger { color: #C8B088; } html[data-theme="steampunk"] .site-header-hamburger:hover { color: #E8D8B0; } /* ── body::before — corner rivets + gear watermark ──────────── */ html[data-theme="steampunk"] body.app-main::before { content: ''; position: fixed; top: 48px; right: 0; bottom: 0; left: 0; z-index: 9997; pointer-events: none; background: /* Corner rivet clusters */ radial-gradient(circle at 3% 4%, rgba(160, 128, 48, 0.35) 0 3px, transparent 4px), radial-gradient(circle at 97% 4%, rgba(160, 128, 48, 0.35) 0 3px, transparent 4px), radial-gradient(circle at 3% 96%, rgba(160, 128, 48, 0.30) 0 3px, transparent 4px), radial-gradient(circle at 97% 96%, rgba(160, 128, 48, 0.30) 0 3px, transparent 4px), /* Second ring of rivets (slightly offset) */ radial-gradient(circle at 5% 3%, rgba(160, 128, 48, 0.20) 0 2px, transparent 3px), radial-gradient(circle at 95% 3%, rgba(160, 128, 48, 0.20) 0 2px, transparent 3px), radial-gradient(circle at 5% 97%, rgba(160, 128, 48, 0.18) 0 2px, transparent 3px), radial-gradient(circle at 95% 97%, rgba(160, 128, 48, 0.18) 0 2px, transparent 3px), /* Faint gear watermark in lower-right */ url("data:image/svg+xml;utf8,"); background-size: auto, auto, auto, auto, auto, auto, auto, auto, 280px 280px; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, calc(100% - 30px) calc(100% - 30px); background-repeat: no-repeat; opacity: 0.75; } /* ── body::after — sepia vignette ───────────────────────────── */ html[data-theme="steampunk"] body.app-main::after { content: ''; position: fixed; top: 48px; right: 0; bottom: 0; left: 0; z-index: 9999; pointer-events: none; background: radial-gradient(ellipse 85% 85% at 50% 45%, transparent 40%, rgba(26, 18, 8, 0.45) 85%, rgba(10, 6, 2, 0.65) 100%); box-shadow: inset 0 0 120px rgba(26, 18, 8, 0.40), inset 0 0 40px rgba(100, 70, 30, 0.15); } html[data-theme="steampunk"] body.app-main:has(#screen-game:not(.hidden))::before, html[data-theme="steampunk"] body.app-main:has(#screen-game:not(.hidden))::after, html[data-theme="steampunk"] body.app-main:has(#screen-lobby:not(.hidden))::before, html[data-theme="steampunk"] body.app-main:has(#screen-lobby:not(.hidden))::after { display: none; } /* ── Steampunk card treatment — brass left-edge strip ───────── */ html[data-theme="steampunk"] .card { border-left: 3px solid; border-image: linear-gradient(to bottom, #D4A030 0%, #C06828 100%) 1; } /* ── Steampunk showcase ─────────────────────────────────────── */ html[data-theme="steampunk"] .theme-showcase { background: linear-gradient(180deg, #1E160A 0%, #120E06 100%); border-top: 1px solid #5C4A2E; border-bottom: 1px solid #3A2A10; } html[data-theme="steampunk"] .sc-steampunk { position: absolute; inset: 0; } html[data-theme="steampunk"] .sc-steampunk > .sc-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; } /* ── Hero image ─────────────────────────────────────────────── */ html[data-theme="steampunk"] .sc-steam-hero { position: absolute; inset: 0; overflow: hidden; } html[data-theme="steampunk"] .sc-steam-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; opacity: 0.55; filter: sepia(0.2) contrast(1.1); } /* Nameplate — centered over the hero image */ html[data-theme="steampunk"] .sc-steam-nameplate { position: relative; z-index: 2; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 22px; font-weight: bold; letter-spacing: 8px; color: #D4A030; background: linear-gradient(180deg, rgba(58,42,20,0.85) 0%, rgba(36,26,14,0.85) 100%); border: 1px solid #5C4A2E; padding: 6px 28px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 rgba(232, 208, 144, 0.15), 0 0 20px rgba(212, 160, 48, 0.3); box-shadow: inset 0 1px 0 rgba(232, 208, 144, 0.08), 0 2px 8px rgba(0, 0, 0, 0.6); } /* ── Slim variant (sub-pages) ────────────────────────────────── */ html[data-theme="steampunk"]:not(:has(#screen-menu:not(.hidden))) .sc-steam-hero { display: none; } html[data-theme="steampunk"]:not(:has(#screen-menu:not(.hidden))) .sc-steam-nameplate { font-size: 9px; letter-spacing: 3px; background: linear-gradient(180deg, #5C4A2E 0%, #3A2A10 40%, #2E2214 100%); border: none; box-shadow: none; padding: 2px 16px; position: relative; z-index: 1; } html[data-theme="steampunk"]:not(:has(#screen-menu:not(.hidden))) .theme-showcase { background: radial-gradient(circle at 50% 50%, #A08030 0 2px, transparent 2.5px), linear-gradient(180deg, #5C4A2E 0%, #3A2A10 40%, #2E2214 100%); background-size: 24px 24px, 100% 100%; background-position: 0 50%, 0 0; background-repeat: repeat-x, no-repeat; border-top: 1px solid #6A5830; border-bottom: 1px solid #1A1208; }