/* ============================================================================ IT GURUJAN — "ARCADE" EDITION A retro 80s/90s arcade cabinet screen, viewed through an old CRT monitor. Layout contract: every selector below maps to markup that already exists in index.html. Nothing here requires new HTML hooks. Font roles (all three already linked in ): Press Start 2P -> chrome only: titles, labels, buttons, badges (never body copy) VT323 -> readouts: scores, specs, HUD, marquee (terminal-legible) Inter -> every paragraph of real prose Stacking order (fixed layers): header/marquee 100 · HUD 300 · toasts 600 · lightbox 800 CRT glass 900 (sits over everything — it IS the monitor) · boot 1000 ========================================================================== */ /* ============================================================ 1 · TOKENS ============================================================ */ :root { /* ground */ --bg: #07030c; /* body — near-black with a violet bias */ --ink: #0a0410; /* panel fill. MUST match the #0a0410 "knockout" colour baked into the inline pixel SVGs, or the holes in the icons stop reading as holes. */ --ink-2: #120724; --line: rgba(255, 255, 255, .10); /* cabinet-art palette — saturated, not pastel */ --magenta: #ff2e88; /* primary accent */ --cyan: #22e8ff; /* secondary accent */ --purple: #a855ff; --amber: #ffc233; --green: #4dff9e; /* type */ --txt: #f4eefb; --txt-dim: rgba(244, 238, 251, .72); --txt-mute: rgba(244, 238, 251, .48); --pixel: 'Press Start 2P', 'Courier New', monospace; --term: 'VT323', 'Courier New', monospace; --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --wrap: 1180px; --ease: cubic-bezier(.16, .8, .3, 1); /* the signature chunky 8-bit frame: hard rings, zero blur, offset drop */ --bevel: 0 0 0 2px var(--ink), 0 0 0 4px rgba(255, 46, 136, .30), 7px 7px 0 0 rgba(255, 46, 136, .13); --bevel-cyan: 0 0 0 2px var(--ink), 0 0 0 4px rgba(34, 232, 255, .30), 7px 7px 0 0 rgba(34, 232, 255, .13); } /* ============================================================ 2 · RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { /* overflow-x: clip (not hidden) — hidden on body/html would create a scroll container and break the sticky header. clip does not. */ overflow-x: clip; background: var(--bg); background-image: radial-gradient(900px 520px at 50% -8%, rgba(168, 85, 255, .16), transparent 70%), radial-gradient(760px 460px at 92% 26%, rgba(255, 46, 136, .10), transparent 70%), radial-gradient(700px 440px at 4% 76%, rgba(34, 232, 255, .08), transparent 70%); background-attachment: fixed; color: var(--txt); font-family: var(--body); font-size: 16px; line-height: 1.72; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--magenta); color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* the header is sticky — stop in-page anchors from landing behind it */ section[id] { scroll-margin-top: 82px; } /* grid/flex children never establish a wider-than-parent min size */ .coop-copy, .coop-visual, .level-visual, .level-copy, .player-card, .player-copy, .power, .cart, .map-node, .coin-card { min-width: 0; } /* ============================================================ 3 · TYPE PRIMITIVES Pixel type is set once here with the guards it needs everywhere: generous line-height (glyphs are square and touch otherwise) and break-word so a long heading can never force a horizontal scrollbar. ============================================================ */ .title-logo, .stage-title, .power h3, .level-copy h3, .cart h3, .map-node h3, .player-name, .go-line, .cabinet-name, .stage-label, .btn, .badge, .tag, .logo-text, .coin-key, .cab-menu-head, .mobile-cabs-label, .footer-cabs-label, .power-id, .power-rank, .level-num, .map-num, .cart-id, .toast b { font-family: var(--pixel); font-weight: 400; letter-spacing: .02em; overflow-wrap: break-word; } .stage-title { font-size: clamp(1.05rem, 3.2vw, 1.9rem); line-height: 1.5; color: #fff; text-shadow: 0 0 16px rgba(255, 46, 136, .45), 3px 3px 0 rgba(168, 85, 255, .35); } .power h3, .level-copy h3, .cart h3, .map-node h3 { font-size: clamp(.72rem, 1.5vw, .86rem); line-height: 1.75; color: #fff; } .stage-sub, .power p, .level-copy p, .cart p, .map-node p, .player-copy p, .title-sub, .ability-list p { font-family: var(--body); color: var(--txt-dim); } /* ============================================================ 4 · BUTTONS · TAGS · BADGES ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; text-align: center; font-size: clamp(.52rem, 2.2vw, .66rem); line-height: 1.7; padding: 15px 22px; position: relative; transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s; } /* "Insert coin" — a chunky beveled cabinet button. The bevel is drawn with hard-edged rings + a solid offset drop so it reads as pressed pixel art, not as a soft modern shadow. */ .btn-coin { background: var(--magenta); color: #14000a; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--magenta), 0 6px 0 0 #a3134f, 0 6px 26px -6px rgba(255, 46, 136, .8); } .btn-coin:hover, .btn-coin:focus-visible { background: #ff56a0; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #ff56a0, 0 8px 0 0 #a3134f, 0 12px 34px -6px rgba(255, 46, 136, .95); } .btn-coin:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--magenta), 0 2px 0 0 #a3134f; } .btn-ghost { color: var(--cyan); background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(34, 232, 255, .55), 0 6px 0 0 rgba(34, 232, 255, .18); } .btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; background: rgba(34, 232, 255, .12); transform: translateY(-2px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--cyan), 0 8px 0 0 rgba(34, 232, 255, .25), 0 12px 30px -8px rgba(34, 232, 255, .6); } .btn-ghost:active { transform: translateY(3px); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tag { font-size: .5rem; line-height: 1; padding: 8px 10px; color: var(--cyan); background: var(--ink); box-shadow: inset 0 0 0 2px rgba(34, 232, 255, .35); } .badge { display: inline-flex; align-items: center; gap: .5em; font-size: .5rem; line-height: 1; padding: 7px 9px; background: var(--ink); } .badge-current { color: var(--amber); box-shadow: inset 0 0 0 2px rgba(255, 194, 51, .5); } .badge-live { color: var(--green); box-shadow: inset 0 0 0 2px rgba(77, 255, 158, .5); } .badge-dev { color: var(--purple); box-shadow: inset 0 0 0 2px rgba(168, 85, 255, .5); } .badge-live, .badge-current { animation: badgePulse 2.4s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } } .link-arrow { font-family: var(--term); font-size: 1.15rem; color: var(--cyan); border-bottom: 2px solid rgba(34, 232, 255, .3); transition: color .18s, border-color .18s, text-shadow .18s; } .link-arrow:hover { color: #fff; border-color: var(--cyan); text-shadow: 0 0 12px rgba(34, 232, 255, .9); } /* ============================================================ 5 · CRT GLASS + POWER-ON BURST Four stacked fixed layers make the "old monitor" read: scanlines, a rolling refresh band, a curved-glass sheen, and an edge vignette. All are pointer-events:none so they never eat a click. ============================================================ */ .crt-scan, .crt-roll, .crt-glass, .crt-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 900; } /* Scanlines: 1px dark line every 3px. Kept at .35 alpha — dark enough to read as a CRT, light enough that Inter body copy stays crisp. */ .crt-scan { background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, .34) 1px, transparent 1px, transparent 3px ); opacity: .5; } /* The slow vertical "refresh roll" you get on a mistuned CRT. */ .crt-roll { background: linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, .035) 42%, rgba(34, 232, 255, .05) 50%, rgba(255, 255, 255, .035) 58%, transparent 100% ); top: 0; bottom: auto; height: 46vh; animation: crtRoll 8.5s linear infinite; } @keyframes crtRoll { 0% { transform: translateY(-50vh); } 100% { transform: translateY(150vh); } } /* Curved-glass sheen + a faint chromatic fringe at the left/right edges. */ .crt-glass { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .055), transparent 55%), linear-gradient(90deg, rgba(255, 46, 136, .07), transparent 9%, transparent 91%, rgba(34, 232, 255, .07)); } .crt-vignette { background: radial-gradient(125% 110% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 88%, rgba(0, 0, 0, .82) 100%); } /* ---- power-on burst ------------------------------------------------------- Signature load moment: static hiss -> the classic CRT beam (a hairline that snaps open horizontally then blooms vertically) -> white flash -> gone. Every animation is `forwards` and ends hidden, so even with JS disabled the overlay clears itself and the page is never left behind a black sheet. */ .boot { position: fixed; inset: 0; z-index: 1000; background: #000; pointer-events: none; animation: bootOut 1.15s steps(1, end) forwards; } @keyframes bootOut { 0%, 78% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .boot-static { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 1px 2px), repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 2px, transparent 2px 5px); opacity: 0; animation: bootStatic .5s steps(3) 2; } @keyframes bootStatic { 0% { opacity: .5; transform: translateY(0); } 50% { opacity: .2; transform: translateY(3px); } 100% { opacity: .45; transform: translateY(-2px); } } .boot-beam { position: absolute; top: 50%; left: 50%; width: 100vw; height: 3px; background: linear-gradient(90deg, transparent, #fff 12%, var(--cyan) 50%, #fff 88%, transparent); box-shadow: 0 0 30px 6px rgba(34, 232, 255, .75); transform: translate(-50%, -50%) scaleX(0) scaleY(1); animation: bootBeam .95s var(--ease) forwards; } @keyframes bootBeam { 0% { transform: translate(-50%, -50%) scaleX(0) scaleY(1); opacity: 0; } 16% { transform: translate(-50%, -50%) scaleX(.04) scaleY(1); opacity: 1; } 46% { transform: translate(-50%, -50%) scaleX(1) scaleY(1); opacity: 1; } 78% { transform: translate(-50%, -50%) scaleX(1) scaleY(260); opacity: .5; } 100% { transform: translate(-50%, -50%) scaleX(1) scaleY(320); opacity: 0; } } .boot-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: bootFlash .5s ease-out .68s forwards; } @keyframes bootFlash { 0% { opacity: .55; } 100% { opacity: 0; } } /* Content itself gets a one-shot phosphor flicker as the tube warms up. */ body.booting main, body.booting .cab-header, body.booting .marquee { animation: powerFlicker .95s steps(1, end) both; } @keyframes powerFlicker { 0%, 34% { opacity: 0; } 38% { opacity: .85; } 42% { opacity: .1; } 50% { opacity: .95; } 56% { opacity: .35; } 64% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: 1; } } /* Konami easter egg — a brief full-screen hue sweep. */ body.konami .crt-glass { animation: konamiSweep 1.6s linear 1; } @keyframes konamiSweep { 0% { filter: hue-rotate(0deg); opacity: 1; } 50% { filter: hue-rotate(180deg); opacity: 1; } 100% { filter: hue-rotate(360deg); opacity: 1; } } /* ============================================================ 6 · MARQUEE (cabinet header strip) ============================================================ */ .marquee { overflow: hidden; background: linear-gradient(90deg, #16002b, #2b0038 40%, #16002b); border-bottom: 2px solid rgba(255, 46, 136, .45); } .marquee-track { display: flex; width: max-content; animation: marqueeRun 46s linear infinite; } .marquee-track span { flex: none; padding: 6px 2rem 5px 0; font-family: var(--term); font-size: 1.15rem; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; color: var(--amber); text-shadow: 0 0 10px rgba(255, 194, 51, .5); } @keyframes marqueeRun { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ 7 · HEADER · NAV · CABINET PICKER ============================================================ */ .cab-header { position: sticky; top: 0; z-index: 100; background: rgba(7, 3, 12, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid rgba(255, 255, 255, .07); transition: background-color .25s, border-color .25s, box-shadow .25s; } .cab-header.scrolled { background: rgba(7, 3, 12, .95); border-bottom-color: rgba(255, 46, 136, .4); box-shadow: 0 10px 34px -18px rgba(255, 46, 136, .8); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 66px; } .logo { display: inline-flex; align-items: center; gap: 10px; } .logo img { width: 30px; height: 30px; image-rendering: auto; } .logo-text { font-size: .72rem; color: #fff; text-shadow: 0 0 12px rgba(255, 46, 136, .7); } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav a { position: relative; font-family: var(--term); font-size: 1.22rem; line-height: 1; letter-spacing: .05em; padding: 10px 12px; color: var(--txt-mute); transition: color .18s, text-shadow .18s; } .main-nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--magenta); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); } .main-nav a:hover, .main-nav a.active { color: #fff; text-shadow: 0 0 12px rgba(34, 232, 255, .8); } .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); } .main-nav a.active::after { background: var(--cyan); } .nav-actions { display: flex; align-items: center; gap: 10px; } .nav-cta { padding: 11px 16px; } /* ---- cabinet (edition) picker ---- */ .cab-picker { position: relative; } .cab-toggle { display: grid; place-items: center; width: 40px; height: 40px; color: var(--amber); background: var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 194, 51, .45); transition: color .18s, box-shadow .18s, transform .18s; } .cab-toggle:hover, .cab-toggle[aria-expanded="true"] { color: var(--magenta); box-shadow: inset 0 0 0 2px var(--magenta), 0 0 20px -4px rgba(255, 46, 136, .9); transform: translateY(-1px); } .cab-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 20; width: 230px; max-height: min(70vh, 520px); overflow-y: auto; padding: 12px; background: var(--ink); box-shadow: 0 0 0 2px rgba(255, 46, 136, .5), 0 24px 50px -18px #000; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; } .cab-menu.open { opacity: 1; visibility: visible; transform: translateY(0); } .cab-menu-head { font-size: .5rem; color: var(--amber); padding: 4px 8px 10px; border-bottom: 2px solid rgba(255, 255, 255, .08); margin-bottom: 8px; } .cab-option { display: flex; align-items: center; gap: 10px; font-family: var(--term); font-size: 1.18rem; line-height: 1; padding: 9px 8px; color: var(--txt-dim); transition: color .16s, background-color .16s, transform .16s; } .cab-option:hover { color: #fff; background: rgba(255, 46, 136, .16); transform: translateX(3px); } .cab-option.is-active { color: var(--magenta); } .pip { flex: none; width: 11px; height: 11px; background: #666; box-shadow: 0 0 10px -1px currentColor; } .pip-arcade { background: #ff2e88; } .pip-cinematic { background: #2b7fd1; } .pip-voyage { background: #a46bff; } .pip-kinetic { background: #ff5a3c; } .pip-terminal { background: #3dff8f; } .pip-orbit { background: #ffb020; } .pip-vault { background: #c7a24a; } .pip-hud { background: #00e5ff; } .pip-circuit { background: #7dff5a; } .pip-blueprint { background: #5fc3e8; } .pip-light { background: #ffffff; } .pip-all { background: linear-gradient(135deg, #ff2e88, #22e8ff); } /* ---- hamburger ---- */ .nav-toggle { display: none; width: 42px; height: 42px; padding: 11px 9px; flex-direction: column; justify-content: space-between; background: var(--ink); box-shadow: inset 0 0 0 2px rgba(34, 232, 255, .45); } .nav-toggle span { display: block; height: 3px; background: var(--cyan); transition: transform .24s var(--ease), opacity .18s; } .nav-toggle.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } /* ---- mobile drawer ---- */ .mobile-nav { max-height: 0; overflow: hidden; background: var(--ink); border-top: 0 solid rgba(255, 46, 136, .4); transition: max-height .38s var(--ease), border-width .2s; } .mobile-nav.open { max-height: min(78vh, 700px); overflow-y: auto; border-top-width: 2px; } .mobile-nav > a { display: block; font-family: var(--term); font-size: 1.35rem; line-height: 1; letter-spacing: .05em; padding: 15px 24px; color: var(--txt-dim); border-bottom: 1px solid rgba(255, 255, 255, .06); } .mobile-nav > a:hover { color: #fff; background: rgba(255, 46, 136, .12); } /* The drawer's CTA is also a .btn. `.mobile-nav > a` outranks `.btn` on specificity, so restore the button's own type/colour/box explicitly. */ .mobile-nav > a.mobile-cta { display: flex; margin: 18px 24px; padding: 15px 22px; font-family: var(--pixel); font-size: clamp(.52rem, 2.2vw, .66rem); line-height: 1.7; color: #14000a; border-bottom: 0; } .mobile-nav > a.mobile-cta:hover { color: #14000a; background: #ff56a0; } .mobile-cabs { padding: 6px 24px 26px; display: flex; flex-wrap: wrap; gap: 8px; } .mobile-cabs-label { width: 100%; font-size: .5rem; color: var(--amber); padding-bottom: 6px; } .mobile-cabs a { font-family: var(--term); font-size: 1.05rem; line-height: 1; padding: 8px 10px; color: var(--txt-mute); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } .mobile-cabs a.is-active { color: var(--magenta); box-shadow: inset 0 0 0 2px var(--magenta); } /* ============================================================ 8 · SCROLL-REVEAL ENGINE JS adds .is-visible; per-item delay comes from [data-stagger]. ============================================================ */ [data-reveal] { opacity: 0; transition: opacity .62s var(--ease), transform .62s var(--ease), filter .62s ease; } [data-reveal="up"] { transform: translateY(30px) scale(.985); filter: blur(2px); } [data-reveal].is-visible { opacity: 1; transform: none; filter: blur(0); } /* ============================================================ 9 · TITLE SCREEN (hero) ============================================================ */ .title-screen { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 104px) 0 0; min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: center; isolation: isolate; } /* starfield — two offset layers for parallax depth */ .stars { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-image: radial-gradient(1.5px 1.5px at 6% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 18% 34%, rgba(34,232,255,.95), transparent), radial-gradient(1px 1px at 27% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 39% 26%, rgba(255,46,136,.9), transparent), radial-gradient(1px 1px at 48% 6%, #fff, transparent), radial-gradient(1.5px 1.5px at 61% 18%, rgba(168,85,255,.95), transparent), radial-gradient(1px 1px at 72% 32%, #fff, transparent), radial-gradient(1.5px 1.5px at 83% 10%, rgba(255,194,51,.9), transparent), radial-gradient(1px 1px at 92% 28%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 52%, rgba(34,232,255,.7), transparent), radial-gradient(1px 1px at 88% 48%, #fff, transparent); animation: twinkle 4.2s steps(2, end) infinite; } .stars::after { content: ''; position: absolute; inset: 0; background-repeat: no-repeat; background-image: radial-gradient(1px 1px at 33% 44%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 55% 38%, rgba(34,232,255,.8), transparent), radial-gradient(1.5px 1.5px at 68% 50%, rgba(255,46,136,.7), transparent), radial-gradient(1px 1px at 22% 22%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 78% 20%, rgba(255,194,51,.7), transparent); animation: twinkle 3.1s steps(2, end) infinite reverse; } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* synthwave sun, behind the wordmark */ .sun { position: absolute; left: 50%; top: 46%; z-index: 0; width: min(58vw, 460px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: /* horizontal slits across the lower half */ repeating-linear-gradient(to bottom, transparent 0 7px, var(--bg) 7px 11px) 0 100% / 100% 46% no-repeat, linear-gradient(to bottom, #ffd93d 0%, #ff8a3d 34%, var(--magenta) 68%, var(--purple) 100%); opacity: .28; filter: blur(.4px); animation: sunBreath 7s ease-in-out infinite; } @keyframes sunBreath { 0%, 100% { opacity: .26; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .36; transform: translate(-50%, -50%) scale(1.035); } } /* infinite perspective floor grid */ .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; overflow: hidden; perspective: 250px; perspective-origin: 50% 0%; } .floor-grid { position: absolute; inset: -10% -50% -60%; transform: rotateX(74deg); transform-origin: 50% 0%; background-image: repeating-linear-gradient(to right, rgba(255, 46, 136, .55) 0 2px, transparent 2px 84px), repeating-linear-gradient(to bottom, rgba(34, 232, 255, .45) 0 2px, transparent 2px 84px); animation: floorRun 2.6s linear infinite; } @keyframes floorRun { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 84px; } } /* fade the grid out at the horizon so it doesn't fight the copy */ .floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(7, 3, 12, .55) 26%, transparent 60%); } /* drifting pixel sprites */ .sprite { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 12px currentColor); } .sprite-a { top: 16%; left: 6%; color: var(--magenta); animation: spriteA 9s ease-in-out infinite; } .sprite-b { top: 62%; right: 8%; color: var(--cyan); animation: spriteB 11s ease-in-out infinite; } @keyframes spriteA { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(26px, -16px); } 50% { transform: translate(8px, 20px); } 75% { transform: translate(-20px, -6px); } } @keyframes spriteB { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-26px, 18px); } 66% { transform: translate(16px, -22px); } } .title-inner { position: relative; z-index: 3; text-align: center; padding-top: 10px; padding-bottom: 46px; } /* ---- 1UP / HI-SCORE readout strip ---- */ .score-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 0 auto 30px; } .score-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: rgba(10, 4, 16, .72); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); } .score-cell .k { font-family: var(--pixel); font-size: .46rem; line-height: 1.5; color: var(--amber); } .score-cell .v { font-family: var(--term); font-size: 1.15rem; line-height: 1.1; letter-spacing: .04em; color: var(--cyan); text-shadow: 0 0 10px rgba(34, 232, 255, .55); } .eyebrow { font-family: var(--term); font-size: 1.25rem; line-height: 1.3; letter-spacing: .06em; color: var(--green); text-shadow: 0 0 12px rgba(77, 255, 158, .55); margin-bottom: 14px; } .title-logo { font-size: clamp(1.15rem, 6.2vw, 3.4rem); line-height: 1.3; color: #fff; margin-bottom: 16px; text-shadow: 0 0 24px rgba(255, 46, 136, .55), 4px 4px 0 rgba(168, 85, 255, .55), -3px -3px 0 rgba(34, 232, 255, .35); } /* chromatic-aberration glitch on the wordmark. Offsets stay ≤3px so the pseudo-elements can never push the layout wide. */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; mix-blend-mode: screen; text-shadow: none; } .glitch::before { color: var(--cyan); animation: glitchA 5.5s steps(1, end) infinite; } .glitch::after { color: var(--magenta); animation: glitchB 5.5s steps(1, end) infinite; } /* mostly idle (invisible) with short violent bursts — a constant jitter reads as broken rather than as a CRT. */ @keyframes glitchA { 0%, 86% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); } 87% { opacity: .9; transform: translate(-3px, -1px); clip-path: inset(8% 0 62% 0); } 89% { opacity: .9; transform: translate(2px, 1px); clip-path: inset(58% 0 18% 0); } 91% { opacity: .9; transform: translate(-2px, 0); clip-path: inset(30% 0 44% 0); } 93%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); } } @keyframes glitchB { 0%, 86% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); } 88% { opacity: .9; transform: translate(3px, 1px); clip-path: inset(22% 0 50% 0); } 90% { opacity: .9; transform: translate(-2px, -1px); clip-path: inset(66% 0 8% 0); } 92% { opacity: .9; transform: translate(2px, 0); clip-path: inset(4% 0 74% 0); } 94%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 100% 0); } } .title-tag { font-family: var(--pixel); font-size: clamp(.55rem, 1.9vw, .8rem); line-height: 1.9; letter-spacing: .12em; color: var(--amber); margin-bottom: 22px; text-shadow: 0 0 14px rgba(255, 194, 51, .6); } .title-sub { max-width: 660px; margin: 0 auto 30px; font-size: 1rem; line-height: 1.85; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 26px; } .blink-line { font-family: var(--term); font-size: 1.2rem; line-height: 1.4; letter-spacing: .05em; color: var(--txt-mute); } .blink { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 46, 136, .8); animation: blink 1.1s steps(1, end) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .1; } } /* ---- tech strip along the cabinet bezel ---- */ .cab-strip { position: relative; z-index: 3; margin-top: auto; /* pin to the bottom bezel even though the hero centres */ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; padding: 14px 24px; background: rgba(10, 4, 16, .82); border-top: 2px solid rgba(255, 46, 136, .3); border-bottom: 2px solid rgba(255, 46, 136, .3); } .cab-strip span { font-family: var(--term); font-size: 1.05rem; line-height: 1.2; letter-spacing: .08em; color: var(--txt-mute); padding: 0 clamp(10px, 2.4vw, 26px); position: relative; } .cab-strip span + span::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--magenta); } /* ============================================================ 10 · STAGE SHELL Each
is a "level". The data-stage value is printed down the left bezel on wide screens — free chrome, no extra markup. ============================================================ */ .stage { position: relative; overflow: hidden; padding: clamp(64px, 9vw, 108px) 0; border-top: 2px solid rgba(255, 255, 255, .06); } .stage-alt { background: linear-gradient(180deg, rgba(168, 85, 255, .09), transparent 30%, transparent 70%, rgba(34, 232, 255, .06)), rgba(18, 7, 36, .45); } .stage::before { content: attr(data-stage); position: absolute; left: 16px; top: 96px; writing-mode: vertical-rl; font-family: var(--pixel); font-size: .52rem; letter-spacing: .3em; color: rgba(255, 46, 136, .32); pointer-events: none; } .stage::after { /* faint pixel-grid texture, so "empty" areas still feel like a game screen */ content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px); } .stage > .wrap { position: relative; z-index: 1; } .stage-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 54px); } .stage-label { font-size: .55rem; line-height: 1.8; color: var(--cyan); margin-bottom: 16px; text-shadow: 0 0 12px rgba(34, 232, 255, .6); } .stage-title { margin-bottom: 18px; } .stage-sub { font-size: 1rem; line-height: 1.85; } /* ============================================================ 11 · STAGE 01 — POWER-UP GRID (services) ============================================================ */ .power-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 22px; } .power { position: relative; padding: 22px; background: var(--ink); box-shadow: var(--bevel); transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .power:hover { transform: translate(-3px, -4px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--magenta), 11px 12px 0 0 rgba(255, 46, 136, .22), 0 20px 44px -18px rgba(255, 46, 136, .85); } .power-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .power-id { font-size: .5rem; color: var(--txt-mute); } .power-rank { font-size: .58rem; color: var(--amber); width: 26px; height: 26px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(255, 194, 51, .55); } .power-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; background: #0a0410; /* matches the SVG knockout colour */ box-shadow: inset 0 0 0 2px currentColor; filter: drop-shadow(0 0 10px currentColor); } .power-icon svg { width: 34px; height: 34px; } .i-magenta { color: var(--magenta); } .i-cyan { color: var(--cyan); } .i-amber { color: var(--amber); } .i-green { color: var(--green); } .i-purple { color: var(--purple); } .power h3 { margin-bottom: 10px; } .power p { font-size: .92rem; line-height: 1.75; } /* ============================================================ 12 · CABINET — shared screenshot frame (chat bot + work + carts) ============================================================ */ .cabinet { background: var(--ink); padding: 12px; box-shadow: var(--bevel-cyan); } .cabinet-bar { display: flex; align-items: center; gap: 7px; padding: 0 4px 11px; } .cabinet-dot { width: 9px; height: 9px; background: rgba(255, 255, 255, .18); } .cabinet-dot:nth-child(1) { background: var(--magenta); } .cabinet-dot:nth-child(2) { background: var(--amber); } .cabinet-dot:nth-child(3) { background: var(--green); } .cabinet-name { margin-left: auto; font-size: .46rem; line-height: 1.6; color: var(--txt-mute); } /* the "screen": black inset + its own scanline pass + glass sheen */ .cabinet-screen { position: relative; overflow: hidden; background: #000; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); } .cabinet-screen img { width: 100%; cursor: zoom-in; transition: transform .4s var(--ease), filter .3s; } .cabinet-screen:hover img { transform: scale(1.025); filter: saturate(1.15); } .cabinet-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .09), transparent 60%), repeating-linear-gradient(to bottom, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px); } .cabinet-thumbs { display: flex; align-items: center; gap: 10px; padding-top: 10px; } .cabinet-thumbs img { width: 116px; flex: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; cursor: zoom-in; background: #000; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); transition: box-shadow .18s, transform .18s var(--ease); } .cabinet-thumbs img:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cyan), 0 8px 20px -8px rgba(34, 232, 255, .9); } .cabinet-thumbs.thumbs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; } .cabinet-thumbs.thumbs-row img { width: 100%; } .cabinet-hint { font-family: var(--term); font-size: 1.05rem; line-height: 1.3; color: var(--txt-mute); } .cabinet-foot { display: flex; justify-content: space-between; gap: 10px; padding: 11px 4px 2px; margin-top: 10px; border-top: 2px solid rgba(255, 255, 255, .07); font-family: var(--term); font-size: 1.02rem; line-height: 1.2; letter-spacing: .05em; color: var(--txt-mute); } .cabinet-foot .ok { color: var(--green); animation: blinkSoft 1.8s steps(1, end) infinite; } @keyframes blinkSoft { 0%, 69% { opacity: 1; } 70%, 100% { opacity: .35; } } /* ============================================================ 13 · STAGE 02 — CO-OP (chat bot) ============================================================ */ .coop-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(26px, 4vw, 48px); align-items: center; } .ability-list { display: grid; gap: 16px; } .ability-list li { display: flex; gap: 14px; padding: 15px 16px; background: rgba(10, 4, 16, .7); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); transition: box-shadow .2s, transform .2s var(--ease); } .ability-list li:hover { transform: translateX(4px); box-shadow: inset 0 0 0 2px rgba(168, 85, 255, .6), 0 10px 26px -14px rgba(168, 85, 255, .9); } .ability-pip { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 3px; color: var(--purple); filter: drop-shadow(0 0 8px currentColor); } .ability-pip svg { width: 18px; height: 18px; } .ability-list strong { display: block; font-family: var(--pixel); font-weight: 400; font-size: .62rem; line-height: 1.8; color: #fff; margin-bottom: 7px; } .ability-list p { font-size: .9rem; line-height: 1.7; } /* ============================================================ 14 · STAGE 03 — HIGH SCORE TABLE (work) ============================================================ */ .levels { display: grid; gap: clamp(44px, 6vw, 76px); } .level { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 46px); align-items: center; } .level-flip .level-visual { order: 2; } .level-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .level-num { font-size: .8rem; color: var(--magenta); text-shadow: 0 0 14px rgba(255, 46, 136, .8); } .level-copy h3 { margin-bottom: 14px; } .level-copy p { font-size: .95rem; line-height: 1.8; margin-bottom: 14px; } .spec { display: grid; gap: 9px; margin: 18px 0; padding: 15px 16px; background: rgba(10, 4, 16, .68); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); } .spec > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; } .spec dt { font-family: var(--term); font-size: 1.08rem; line-height: 1.35; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); } .spec dd { font-size: .88rem; line-height: 1.6; color: var(--txt-dim); } /* ============================================================ 15 · STAGE 04 — CARTRIDGES (in-house apps) ============================================================ */ .cart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 26px; } .cart { display: flex; flex-direction: column; transition: transform .22s var(--ease); } .cart:hover { transform: translateY(-6px); } /* the cartridge: label plate up top, screen below, connector pins at the foot */ .cart-shell { position: relative; padding: 12px 12px 22px; margin-bottom: 18px; background: linear-gradient(180deg, #1a0b2e, var(--ink)); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(168, 85, 255, .35), 7px 7px 0 0 rgba(168, 85, 255, .14); transition: box-shadow .22s var(--ease); } .cart:hover .cart-shell { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--purple), 11px 12px 0 0 rgba(168, 85, 255, .25), 0 22px 46px -20px rgba(168, 85, 255, .9); } /* connector pins */ .cart-shell::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 7px; height: 8px; background: repeating-linear-gradient(to right, rgba(255, 194, 51, .65) 0 4px, transparent 4px 9px); } .cart-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 11px; } .cart-id { font-size: .5rem; color: var(--txt-mute); } .cart-shell img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: top center; background: #000; cursor: zoom-in; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); } .cart h3 { margin-bottom: 10px; } .cart > p { font-size: .92rem; line-height: 1.7; margin-bottom: 14px; } .mini-list { display: grid; gap: 8px; } .mini-list li { position: relative; padding-left: 20px; font-size: .86rem; line-height: 1.6; color: var(--txt-dim); } .mini-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 8px rgba(34, 232, 255, .9); } /* ============================================================ 16 · STAGE 05 — LEVEL MAP (process) ============================================================ */ .map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .map-node { position: relative; padding: 24px 20px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(34, 232, 255, .25), 7px 7px 0 0 rgba(34, 232, 255, .1); transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .map-node:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--cyan), 9px 10px 0 0 rgba(34, 232, 255, .2), 0 20px 40px -18px rgba(34, 232, 255, .8); } /* dashed route to the next checkpoint */ .map-node::after { content: ''; position: absolute; top: 46px; right: -20px; width: 20px; height: 3px; background: repeating-linear-gradient(to right, rgba(34, 232, 255, .8) 0 4px, transparent 4px 8px); } .map-node:last-child::after { display: none; } .map-flag { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; background: #0a0410; color: var(--amber); box-shadow: inset 0 0 0 2px rgba(255, 194, 51, .5); filter: drop-shadow(0 0 8px currentColor); } .map-flag svg { width: 22px; height: 22px; } .map-num { display: block; font-size: 1.25rem; line-height: 1; color: rgba(255, 46, 136, .55); margin-bottom: 12px; } .map-node h3 { margin-bottom: 10px; } .map-node p { font-size: .88rem; line-height: 1.7; } /* ============================================================ 17 · STAGE 06 — PLAYER SELECT (about) ============================================================ */ .player-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; } .player-card { padding: 20px; background: var(--ink); box-shadow: var(--bevel); } .player-frame { position: relative; margin-bottom: 18px; background: #000; overflow: hidden; } .player-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(1.05) contrast(1.05); } /* pixel L-bracket corners */ .corner { position: absolute; width: 16px; height: 16px; border: 3px solid var(--magenta); box-shadow: 0 0 12px rgba(255, 46, 136, .8); } .corner.tl { top: 7px; left: 7px; border-right: 0; border-bottom: 0; } .corner.tr { top: 7px; right: 7px; border-left: 0; border-bottom: 0; } .corner.bl { bottom: 7px; left: 7px; border-right: 0; border-top: 0; } .corner.br { bottom: 7px; right: 7px; border-left: 0; border-top: 0; } .player-name { font-size: clamp(.66rem, 1.8vw, .82rem); line-height: 1.7; color: #fff; margin-bottom: 8px; text-shadow: 0 0 14px rgba(255, 46, 136, .6); } .player-role { font-family: var(--term); font-size: 1.12rem; line-height: 1.4; color: var(--txt-mute); margin-bottom: 22px; } /* ---- 8-bit stat bars ---- */ .stats { display: grid; gap: 14px; } .stat-k { display: block; font-family: var(--term); font-size: 1.05rem; line-height: 1.3; letter-spacing: .06em; color: var(--amber); margin-bottom: 6px; } .stat-track { position: relative; display: block; height: 14px; background: #000; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1); overflow: hidden; } .stat-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 14px rgba(255, 46, 136, .7); transition: width 1.1s var(--ease); } /* notch the bar into discrete blocks so it reads as a game meter */ .stat-track::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to right, transparent 0 7px, var(--ink) 7px 10px); } .player-copy p { font-size: 1rem; line-height: 1.85; margin-bottom: 18px; } .pull-quote { position: relative; margin: 26px 0; padding: 22px 24px; font-size: 1.05rem; line-height: 1.75; color: #fff; background: rgba(10, 4, 16, .75); border-left: 5px solid var(--magenta); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 0 34px -18px rgba(255, 46, 136, .9); } .location-line { font-family: var(--term); font-size: 1.2rem; line-height: 1.4; letter-spacing: .06em; color: var(--green); text-shadow: 0 0 12px rgba(77, 255, 158, .5); } /* ============================================================ 18 · FINAL STAGE — CONTINUE? (contact) ============================================================ */ .continue-head { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; } .countdown { display: inline-block; min-width: 1.3em; color: var(--magenta); text-shadow: 0 0 20px rgba(255, 46, 136, .95); animation: countPulse 1s steps(1, end) infinite; } @keyframes countPulse { 0%, 59% { opacity: 1; } 60%, 100% { opacity: .35; } } .coin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: 18px; margin-bottom: clamp(44px, 6vw, 68px); } .coin-card { display: flex; flex-direction: column; gap: 9px; padding: 20px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(255, 255, 255, .1), 6px 6px 0 0 rgba(255, 255, 255, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } a.coin-card:hover { transform: translate(-3px, -4px); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--amber), 10px 11px 0 0 rgba(255, 194, 51, .2), 0 20px 40px -18px rgba(255, 194, 51, .85); } .coin-key { font-size: .5rem; line-height: 1.6; color: var(--amber); } .coin-val { font-family: var(--term); font-size: 1.24rem; line-height: 1.35; letter-spacing: .03em; color: #fff; overflow-wrap: anywhere; } .coin-static { opacity: .78; } .game-over { text-align: center; padding: clamp(34px, 5vw, 52px) 24px; background: rgba(10, 4, 16, .78); box-shadow: inset 0 0 0 2px rgba(255, 46, 136, .35), 0 0 60px -30px rgba(255, 46, 136, .9); } .go-line { font-size: clamp(.85rem, 3.2vw, 1.5rem); line-height: 1.6; color: var(--magenta); margin-bottom: 26px; text-shadow: 0 0 24px rgba(255, 46, 136, .8), 3px 3px 0 rgba(168, 85, 255, .5); animation: goPulse 2.6s ease-in-out infinite; } @keyframes goPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } } /* ============================================================ 19 · FOOTER ============================================================ */ .cab-footer { border-top: 2px solid rgba(255, 46, 136, .3); background: rgba(10, 4, 16, .85); padding: 44px 0 84px; /* extra bottom room so the fixed HUD never covers it */ } .footer-row { display: grid; gap: 22px; justify-items: center; text-align: center; } .footer-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: .66rem; color: #fff; } .footer-line { font-family: var(--term); font-size: 1.15rem; line-height: 1.5; letter-spacing: .04em; color: var(--txt-mute); } .footer-cabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; } .footer-cabs-label { width: 100%; font-size: .5rem; color: var(--amber); margin-bottom: 4px; } .footer-cabs a { font-family: var(--term); font-size: 1.05rem; line-height: 1; padding: 7px 10px; color: var(--txt-mute); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: color .16s, box-shadow .16s, transform .16s; } .footer-cabs a:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cyan); } .footer-cabs a.is-active { color: var(--magenta); box-shadow: inset 0 0 0 2px var(--magenta); } /* ============================================================ 20 · PERSISTENT ARCADE HUD Decorative (aria-hidden in the markup). Slides up once you leave the title screen and tracks scroll as SCORE / STAGE / progress. ============================================================ */ .hud { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: rgba(10, 4, 16, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 2px solid rgba(255, 46, 136, .45); transform: translateY(110%); transition: transform .32s var(--ease); pointer-events: none; } .hud.show { transform: translateY(0); } .hud-progress { height: 4px; background: rgba(255, 255, 255, .07); } .hud-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--amber)); box-shadow: 0 0 14px rgba(255, 46, 136, .9); } .hud-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--wrap); margin: 0 auto; padding: 7px 24px 8px; } .hud-cell { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; } .hud-cell b { font-family: var(--pixel); font-weight: 400; font-size: .46rem; line-height: 1.6; color: var(--amber); } .hud-cell i { font-family: var(--term); font-style: normal; font-size: 1.16rem; line-height: 1.2; letter-spacing: .07em; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 10px rgba(34, 232, 255, .6); } .hud-stage { flex: 1 1 auto; justify-content: center; min-width: 0; } .hud-stage i { color: #fff; } .hud-lives i { color: var(--magenta); text-shadow: 0 0 12px rgba(255, 46, 136, .9); animation: livesPulse 2.2s ease-in-out infinite; } @keyframes livesPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } /* ============================================================ 21 · ACHIEVEMENT TOASTS (injected by JS into #toasts) ============================================================ */ .toasts { position: fixed; right: 20px; bottom: 76px; z-index: 600; display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none; max-width: min(340px, calc(100vw - 40px)); } .toast { display: flex; align-items: center; gap: 13px; padding: 13px 16px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--amber), 7px 7px 0 0 rgba(255, 194, 51, .2), 0 22px 44px -18px rgba(0, 0, 0, .95); animation: toastIn .42s var(--ease) both; } .toast.out { animation: toastOut .34s var(--ease) both; } @keyframes toastIn { 0% { opacity: 0; transform: translateX(46px) scale(.9); } 60% { opacity: 1; transform: translateX(-6px) scale(1.02); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes toastOut { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(46px) scale(.94); } } .toast-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--amber); filter: drop-shadow(0 0 9px currentColor); animation: toastSpark .9s steps(2, end) 3; } .toast-icon svg { width: 22px; height: 22px; } @keyframes toastSpark { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .toast-body { display: grid; gap: 5px; min-width: 0; } .toast b { font-weight: 400; font-size: .46rem; line-height: 1.6; color: var(--amber); } .toast i { font-family: var(--term); font-style: normal; font-size: 1.2rem; line-height: 1.25; letter-spacing: .04em; color: #fff; } /* ============================================================ 22 · LIGHTBOX ============================================================ */ .lightbox { display: none; position: fixed; inset: 0; z-index: 800; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 1, 6, .96); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } .lightbox.open { display: flex; } .lightbox-content { display: flex; flex-direction: column; align-items: center; max-width: min(94vw, 1020px); max-height: 92vh; } .lightbox-screen { position: relative; overflow: hidden; background: #000; padding: 8px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--magenta), 0 30px 70px -24px #000; } .lightbox-screen img { max-width: min(92vw, 990px); max-height: 68vh; width: auto; height: auto; } .lightbox-screen::after { content: ''; position: absolute; inset: 8px; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); } .lightbox-info { margin-top: 18px; text-align: center; max-width: 720px; } .lightbox-info h4 { font-family: var(--pixel); font-weight: 400; font-size: .68rem; line-height: 1.7; color: #fff; margin-bottom: 9px; } .lightbox-info p { font-size: .88rem; line-height: 1.6; color: var(--txt-dim); margin-bottom: 8px; } .lightbox-counter { font-family: var(--term); font-size: 1.1rem; letter-spacing: .1em; color: var(--amber); } .lightbox-close, .lightbox-nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; color: var(--cyan); background: var(--ink); box-shadow: inset 0 0 0 2px rgba(34, 232, 255, .5); transition: color .16s, box-shadow .16s, transform .16s; } .lightbox-close:hover, .lightbox-nav:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--cyan), 0 0 24px -6px rgba(34, 232, 255, .95); } .lightbox-close { top: 20px; right: 20px; font-size: 1.2rem; } .lightbox-nav { top: 50%; margin-top: -23px; font-size: 2rem; line-height: 1; } .lightbox-nav:hover { transform: translateY(-2px); } .lightbox-prev { left: 14px; } .lightbox-next { right: 14px; } /* ============================================================ 23 · RESPONSIVE ============================================================ */ @media (max-width: 1320px) { .stage::before { display: none; } /* no bezel room left for the side label */ } @media (max-width: 1040px) { .coop-grid, .level, .player-grid { grid-template-columns: 1fr; } .level-flip .level-visual { order: 0; } .player-card { max-width: 420px; } .map { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map-node:nth-child(2)::after { display: none; } } @media (max-width: 900px) { .main-nav, .nav-cta { display: none; } .nav-toggle { display: flex; } .cab-picker { display: none; } /* the drawer carries the cabinet list */ } @media (max-width: 760px) { body { font-size: 15.5px; } .wrap { padding: 0 18px; } .title-screen { min-height: auto; padding-top: 44px; } .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .map { grid-template-columns: 1fr; } .map-node::after { display: none; } .cta-row { flex-direction: column; align-items: stretch; } .cta-row .btn { width: 100%; } .spec > div { grid-template-columns: 1fr; gap: 2px; } .sprite-a { top: 8%; left: 2%; opacity: .55; } .sprite-b { top: 70%; right: 2%; opacity: .55; } .cabinet-thumbs { flex-wrap: wrap; } .cabinet-thumbs img { width: 96px; } .hud-row { padding: 6px 16px 7px; } .toasts { right: 12px; left: 12px; bottom: 70px; max-width: none; } } @media (max-width: 460px) { .hud-lives { display: none; } .hud-cell i { font-size: 1.05rem; } .lightbox { padding: 12px; } .lightbox-close { top: 10px; right: 10px; width: 40px; height: 40px; } .lightbox-nav { width: 38px; height: 38px; margin-top: -19px; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } .player-frame img { aspect-ratio: 4 / 3; } } /* Coarse pointers get no hover-lift (it sticks after a tap) */ @media (hover: none) { .power:hover, .cart:hover, .map-node:hover, a.coin-card:hover, .ability-list li:hover { transform: none; } .cabinet-screen:hover img { transform: none; } } /* ============================================================ 24 · REDUCED MOTION Everything decorative stops. The page still reads exactly the same — only the movement is removed. ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boot { display: none; } body.booting main, body.booting .cab-header, body.booting .marquee { animation: none; opacity: 1; } .crt-roll { display: none; } .stars, .stars::after, .sun, .floor-grid, .sprite-a, .sprite-b, .blink, .badge-live, .badge-current, .cabinet-foot .ok, .go-line, .countdown, .hud-lives i, .glitch::before, .glitch::after, .toast-icon, .marquee-track { animation: none !important; } .glitch::before, .glitch::after { opacity: 0; } .marquee-track { transform: none; } [data-reveal] { transition: opacity .25s ease; transform: none !important; filter: none !important; } .stat-track i { transition: none; } .toast, .toast.out { animation: none; } .toast.out { opacity: 0; transition: opacity .2s ease; } * { scroll-behavior: auto !important; } }