/*! * css/arcade.css * Sal's Galaxy Zone Arcade — the ONE design system for every page: the * homepage grid, game-page cabinet chrome, and story pages. See * docs/DESIGN.md for the full rationale behind these tokens and classes. * * Depends on the Google Fonts "Press Start 2P" in each page's ; * every rule below falls back to Courier New / monospace so the whole site * still looks correct completely offline. */ /* ============================== TOKENS ================================= */ :root { --gz-bg: #07070c; --gz-panel: #12121c; --gz-cyan: #00f0ff; --gz-magenta: #ff2ec4; --gz-yellow: #ffe600; --gz-lime: #39ff6a; --gz-orange: #ff8a00; --gz-red: #ff3355; --gz-violet: #a94dff; --gz-white: #eaf6ff; --gz-accent: var(--gz-cyan); /* each page overrides this to its game's color */ --gz-font-display: 'Press Start 2P', 'Courier New', monospace; --gz-font-body: 'Courier New', monospace; --gz-radius: 10px; --gz-border: rgba(234, 246, 255, 0.14); } /* ============================== RESET =================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--gz-bg); background-image: radial-gradient(1px 1px at 10% 20%, rgba(234,246,255,.5) 0, transparent 60%), radial-gradient(1px 1px at 30% 70%, rgba(234,246,255,.35) 0, transparent 60%), radial-gradient(1.5px 1.5px at 60% 15%, rgba(234,246,255,.4) 0, transparent 60%), radial-gradient(1px 1px at 80% 55%, rgba(234,246,255,.3) 0, transparent 60%), radial-gradient(1.5px 1.5px at 92% 80%, rgba(234,246,255,.45) 0, transparent 60%), radial-gradient(1px 1px at 45% 90%, rgba(234,246,255,.3) 0, transparent 60%); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; color: var(--gz-white); font-family: var(--gz-font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } img, canvas, svg { max-width: 100%; display: block; } a { color: var(--gz-accent); } h1, h2, h3, h4 { font-family: var(--gz-font-display); line-height: 1.4; margin: 0 0 .75em; } p { margin: 0 0 1em; } button { font-family: inherit; } kbd.gz-kbd { font-family: var(--gz-font-display); font-size: .7em; background: rgba(234,246,255,.08); border: 1px solid var(--gz-border); border-bottom-width: 2px; border-radius: 4px; padding: .25em .45em; color: var(--gz-white); } /* Accessible focus rings everywhere, on every interactive element. */ :focus-visible { outline: 3px solid var(--gz-accent); outline-offset: 2px; border-radius: 2px; } .gz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================= GAME PAGE CHROME ============================= */ #gz-root { display: flex; flex-direction: column; min-height: 100vh; } .gz-nav { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; background: rgba(7,7,12,.9); border-bottom: 1px solid var(--gz-border); position: sticky; top: 0; z-index: 20; font-family: var(--gz-font-display); font-size: .7rem; } .gz-nav-back { text-decoration: none; white-space: nowrap; } .gz-nav-back:hover { text-decoration: underline; } .gz-nav-title { flex: 1; text-align: center; color: var(--gz-accent); text-shadow: 0 0 8px var(--gz-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gz-nav-actions { display: flex; align-items: center; gap: .75rem; } .gz-nav-link { text-decoration: none; white-space: nowrap; } .gz-nav-link:hover { text-decoration: underline; } .gz-mute-btn { background: rgba(234,246,255,.06); border: 1px solid var(--gz-border); border-radius: 6px; color: var(--gz-white); cursor: pointer; font-size: 1rem; line-height: 1; padding: .4rem .55rem; } .gz-mute-btn:hover { background: rgba(234,246,255,.14); } .gz-cabinet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem 1rem 2rem; } .gz-marquee { font-family: var(--gz-font-display); color: var(--gz-accent); font-size: clamp(.85rem, 2.4vw, 1.4rem); text-shadow: 0 0 6px var(--gz-accent), 0 0 18px var(--gz-accent), 0 0 2px #fff; padding: .6rem 1.4rem; border: 2px solid var(--gz-accent); border-radius: 999px; background: rgba(255,255,255,.02); text-align: center; } .gz-bezel { width: 100%; max-width: 960px; padding: 14px; border-radius: 18px; background: linear-gradient(155deg, #1a1a26, #0c0c14 60%); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 50px rgba(0,0,0,.55); } .gz-stage { position: relative; width: 100%; max-width: min(100%, calc((100vh - 300px) * 4 / 3)); aspect-ratio: 4 / 3; margin: 0 auto; background: #000; border-radius: var(--gz-radius); overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.05), 0 0 60px rgba(0,0,0,.7) inset; } .gz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Scanline + vignette overlay. Purely decorative, never intercepts input. */ .gz-crt { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px), radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); background-size: 100% 4px, 100% 100%; mix-blend-mode: multiply; animation: gz-scanline-drift 10s linear infinite; } @keyframes gz-scanline-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 200px, 0 0; } } .gz-overlay { position: absolute; inset: 0; z-index: 10; /* Overlays are informational only — taps must fall through to the canvas so "tap to start" reaches the pointer listener in gz-input.js. */ pointer-events: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(3,3,9,.82); backdrop-filter: blur(1.5px); } .gz-overlay:not([hidden]) { display: flex; } .gz-stage.gz-dimmed .gz-canvas { filter: brightness(.55) saturate(.8); } .gz-overlay-panel { font-family: var(--gz-font-display); text-align: center; background: var(--gz-panel); border: 2px solid var(--gz-accent); border-radius: var(--gz-radius); box-shadow: 0 0 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; padding: 1.4rem 1.6rem; max-width: 92%; max-height: 92%; overflow: auto; } .gz-overlay-title { color: var(--gz-accent); text-shadow: 0 0 8px var(--gz-accent); font-size: clamp(.9rem, 3vw, 1.3rem); margin-bottom: 1rem; } .gz-overlay-controls { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.1rem; font-size: .65rem; } .gz-overlay-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .gz-overlay-row-desc { color: var(--gz-white); opacity: .85; text-align: right; } .gz-overlay-prompt { font-size: .7rem; margin: .5rem 0; letter-spacing: .02em; } .gz-overlay-score { font-size: .7rem; color: var(--gz-yellow); margin: .35rem 0; } .gz-overlay-record { font-size: .75rem; color: var(--gz-yellow); text-shadow: 0 0 10px var(--gz-yellow); animation: gz-pulse 1s ease-in-out infinite; margin: .6rem 0; } @keyframes gz-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .8; } } .gz-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; } .gz-chip { display: flex; align-items: center; gap: .5rem; background: var(--gz-panel); border: 1px solid var(--gz-border); border-radius: 6px; padding: .4rem .7rem; font-family: var(--gz-font-display); font-size: .65rem; } .gz-chip-label { opacity: .55; } .gz-chip-value { color: var(--gz-accent); } .gz-controls-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.2rem; font-size: .68rem; opacity: .85; max-width: 960px; text-align: center; } .gz-control-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } /* ---- touch controls: DOM buttons, coarse pointers only ---- */ .gz-touch-controls { display: none; width: 100%; max-width: 960px; align-items: center; justify-content: center; gap: 1.5rem; padding: .5rem 0; } @media (pointer: coarse) { .gz-touch-controls { display: flex; } } .gz-touch-btn { min-width: 48px; min-height: 48px; border-radius: 10px; border: 1px solid var(--gz-border); background: rgba(234,246,255,.1); color: var(--gz-white); font-family: var(--gz-font-display); font-size: .9rem; touch-action: none; user-select: none; -webkit-user-select: none; } .gz-touch-btn:active { background: rgba(234,246,255,.28); } .gz-touch-hint { font-family: var(--gz-font-display); font-size: .65rem; opacity: .6; text-align: center; } .gz-dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 4px; } .gz-dpad-up { grid-area: 1 / 2; } .gz-dpad-left { grid-area: 2 / 1; } .gz-dpad-right { grid-area: 2 / 3; } .gz-dpad-down { grid-area: 3 / 2; } .gz-lr, .gz-ud { display: flex; gap: 4px; } .gz-ud { flex-direction: column; } .gz-btn-a { min-width: 64px; min-height: 64px; border-radius: 50%; background: rgba(0,240,255,.18); border-color: var(--gz-accent); color: var(--gz-accent); font-size: 1.1rem; } .gz-btn-b { min-width: 56px; min-height: 56px; border-radius: 50%; background: rgba(255,46,196,.14); border-color: var(--gz-magenta); color: var(--gz-magenta); font-size: 1rem; align-self: flex-end; } /* ============================== HOMEPAGE ================================= */ .gz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; padding: 1rem; max-width: 1400px; margin: 0 auto; } @media (max-width: 1100px) { .gz-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .gz-grid { grid-template-columns: 1fr; } } .gz-card { position: relative; display: block; text-decoration: none; color: var(--gz-white); background: var(--gz-panel); border: 1px solid var(--gz-border); border-radius: var(--gz-radius); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; animation: gz-fade-in-up .5s ease both; } .gz-card:hover, .gz-card:focus-visible { transform: translateY(-6px); border-color: var(--gz-accent); box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 24px color-mix(in srgb, var(--gz-accent) 45%, transparent); } .gz-card-cover { aspect-ratio: 4 / 3; width: 100%; background: #0a0a14; } .gz-card-body { padding: .9rem 1rem 1.1rem; } .gz-card-title { font-family: var(--gz-font-display); font-size: .8rem; color: var(--gz-accent); margin-bottom: .5rem; } .gz-card-inspired { font-size: .78rem; opacity: .65; margin-bottom: .6rem; } .gz-card-hiscore { display: inline-flex; gap: .4rem; font-family: var(--gz-font-display); font-size: .6rem; background: rgba(234,246,255,.08); border-radius: 4px; padding: .3rem .5rem; } .gz-card-badge-new { position: absolute; top: .6rem; right: .6rem; font-family: var(--gz-font-display); font-size: .55rem; background: var(--gz-magenta); color: #1a0010; padding: .3rem .5rem; border-radius: 4px; box-shadow: 0 0 12px var(--gz-magenta); } @keyframes gz-fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Stagger the gallery's entrance one card at a time. */ .gz-grid > *:nth-child(1) { animation-delay: .02s; } .gz-grid > *:nth-child(2) { animation-delay: .06s; } .gz-grid > *:nth-child(3) { animation-delay: .10s; } .gz-grid > *:nth-child(4) { animation-delay: .14s; } .gz-grid > *:nth-child(5) { animation-delay: .18s; } .gz-grid > *:nth-child(6) { animation-delay: .22s; } .gz-grid > *:nth-child(7) { animation-delay: .26s; } .gz-grid > *:nth-child(8) { animation-delay: .30s; } .gz-grid > *:nth-child(9) { animation-delay: .34s; } .gz-grid > *:nth-child(10) { animation-delay: .38s; } .gz-grid > *:nth-child(11) { animation-delay: .42s; } .gz-grid > *:nth-child(12) { animation-delay: .46s; } .gz-grid > *:nth-child(13) { animation-delay: .50s; } .gz-grid > *:nth-child(14) { animation-delay: .54s; } .gz-grid > *:nth-child(15) { animation-delay: .58s; } .gz-grid > *:nth-child(16) { animation-delay: .62s; } /* Delivery-crate reveal: homepage JS toggles .gz-crate-open on load/click. */ .gz-crate { position: absolute; inset: 0; z-index: 5; background: repeating-linear-gradient(0deg, #6b4a2a 0 14px, #5a3d22 14px 16px), linear-gradient(90deg, #4a3018, #7a5330 50%, #4a3018); border: 2px solid #3a2410; transform-origin: left center; transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .5s ease .1s; overflow: hidden; } .gz-crate::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: gz-crate-sweep 1.4s ease-in-out infinite; } .gz-crate-open { transform: rotateY(-100deg); opacity: 0; pointer-events: none; } @keyframes gz-crate-sweep { 0% { left: -40%; } 100% { left: 130%; } } /* ============================== STORY PAGES =============================== */ .gz-story { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 4rem; font-size: 1rem; line-height: 1.7; } .gz-story h1 { color: var(--gz-accent); text-shadow: 0 0 10px var(--gz-accent); font-size: clamp(1.1rem, 3vw, 1.6rem); } .gz-story h2 { color: var(--gz-white); font-size: 1rem; margin-top: 2rem; } .gz-story p { opacity: .92; } .gz-story .gz-story-byline { font-family: var(--gz-font-display); font-size: .7rem; color: var(--gz-accent); opacity: .8; } .gz-prompt-box { background: var(--gz-panel); border: 1px solid var(--gz-border); border-left: 4px solid var(--gz-accent); border-radius: 6px; padding: 1rem 1.2rem; font-family: var(--gz-font-body); font-size: .92rem; color: var(--gz-lime); white-space: pre-wrap; margin: 1.2rem 0; } .gz-prompt-box::before { content: '> PROMPT'; display: block; font-family: var(--gz-font-display); font-size: .6rem; color: var(--gz-accent); opacity: .7; margin-bottom: .6rem; } .gz-timeline { list-style: none; margin: 1.5rem 0; padding: 0; border-left: 2px solid var(--gz-border); } .gz-timeline li { position: relative; padding: 0 0 1.4rem 1.4rem; } .gz-timeline li::before { content: ''; position: absolute; left: -6.5px; top: .3rem; width: 11px; height: 11px; border-radius: 50%; background: var(--gz-accent); box-shadow: 0 0 8px var(--gz-accent); } .gz-timeline-year { font-family: var(--gz-font-display); font-size: .7rem; color: var(--gz-accent); display: block; margin-bottom: .3rem; } .gz-ascii { font-family: var(--gz-font-body); color: var(--gz-accent); background: rgba(0,0,0,.35); border: 1px solid var(--gz-border); border-radius: 6px; padding: 1rem; overflow-x: auto; text-shadow: 0 0 6px currentColor; font-size: .8rem; line-height: 1.3; } .gz-back-links { display: flex; gap: 1.2rem; margin-top: 2rem; font-family: var(--gz-font-display); font-size: .7rem; } /* ========================= REDUCED MOTION ================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .gz-crt { animation: none !important; } }