/* Tobeads — PIXEL ARCADE design system Palette: violet #7F00FF · navy #000080 · black #000 · white #FFF (only). Homepage sections use soft “retro handheld” radii (--hh-r-*). */ :root { /* retro handheld corner radii (Game Gear / GBA shell feel) */ --hh-r-xs: 5px; --hh-r-sm: 8px; --hh-r-md: 12px; --hh-r-lg: 18px; --hh-r-xl: 24px; --hh-r-shell: 28px; --hh-r-pill: 999px; --v: #7F00FF; /* violet */ --v2: #9B3DFF; /* lighter violet for hover/glow */ --v3: #B775FF; /* highlight violet */ --vd: #4D0099; /* darker violet shadow */ --vd2:#2E005C; /* deepest violet */ --n: #000080; /* navy */ --n2: #1A1AB0; /* lighter navy */ --n3: #2E2ED8; /* bright navy */ --nd: #00004A; /* deep navy */ --bk: #000000; --wh: #FFFFFF; --gray: #B8B8D0; /* muted text = desaturated violet-white */ --gray2: #6E6E9A; --line: #2A2A55; /* faint navy grid line */ --glow: rgba(127,0,255,0.55); /* controlled arcade accents (used sparingly) */ --ylw: #FFD23D; /* arcade yellow — key CTAs/highlights */ --cyn: #2DE1FF; /* cyan glow — game UI accents */ --pnk: #FF4FC3; /* magenta/pink — bead dots / active states */ /* light surfaces (premium negative space) */ --lt: #EEF0FB; /* soft light blue-gray section bg */ --lt2: #FFFFFF; /* pure white */ --lt3: #E2E5F6; /* slightly deeper light for borders/fills */ --ink: #14143A; /* near-navy ink for text on light */ --ink2:#4A4A78; /* muted ink on light */ --lline-lt: #D5D8EE; /* light grid line */ /* classic arcade hardware colors (controls) */ --red: #E83B3B; /* arcade red — ball top / start */ --red2: #FF5A5A; /* red highlight */ --redd: #9E1B1B; /* red shadow */ --blu: #2D6FE0; /* arcade blue button */ --joybk:#15151C; /* joystick base black */ /* classic arcade CABINET body (charcoal + metallic gray, cyan screen) */ --cab-body: #17171C; /* charcoal cabinet body */ --cab-body2: #202028; /* lighter charcoal */ --cab-frame: #3A3A44; /* metallic gray frame */ --cab-frame2:#56565F; /* metallic highlight */ --cab-frameD:#0D0D11; /* frame deep shadow */ --cab-edge: #060608; /* near-black edge */ --scr-cyan: #2DE1FF; /* CRT cyan screen glow */ --scr-blue: #2D6FE0; /* electric blue screen lines */ --scr-cyanG: rgba(45,225,255,0.55); /* VIOLET 3D cabinet body (matches product-render look) */ --cv-lit: #A24DFF; /* top-lit violet highlight */ --cv-body: #7C1FE8; /* main violet body */ --cv-mid: #6614C9; /* body mid */ --cv-dark: #4C0C9C; /* shaded side / lower */ --cv-edge: #33067A; /* deepest violet edge */ --cv-line: #2A0566; /* seam line */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body.arcade { background-color: var(--lt); color: var(--ink); background-image: linear-gradient(var(--lline-lt) 1px, transparent 1px), linear-gradient(90deg, var(--lline-lt) 1px, transparent 1px); background-size: 28px 28px; background-attachment: fixed; font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; /* guard against sideways scroll from pixel shadows / 3D side panels on mobile. `clip` (not hidden) avoids turning into a scroll container. */ overflow-x: clip; } /* Scroll lock while intro / boot / mobile menu — overflow alone fails on iOS Safari */ html.no-scroll, body.arcade.no-scroll { overflow: hidden !important; height: 100%; overscroll-behavior: none; touch-action: none; } body.arcade.no-scroll { position: fixed; width: 100%; left: 0; right: 0; } .aw-stage-entry { position: fixed; inset: 0; z-index: 9998; overflow: hidden; } .arcade ::selection { background: var(--v); color: var(--wh); } /* ---- Fonts ---- */ .px { font-family: 'Press Start 2P', monospace; line-height: 1.5; } .aw-disp { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.03em; } .aw-mono { font-family: 'Press Start 2P', monospace; } .aw-pixel{ font-family: 'Press Start 2P', monospace; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1,h2,h3,h4 { margin: 0; } p { margin: 0; } /* ===== Pixel grid backdrop ===== */ .aw-stage { position: relative; background: transparent; } .aw-grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; background-position: center top; } .aw-grid-bg-fade { position: relative; } .aw-grid-bg-fade::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); opacity: 0.7; } /* scanline overlay — scoped to dark arcade screens only (not whole page) */ .aw-screen::after, .cart-scan::after { /* defined per-component below */ } body.arcade.no-scan .aw-screen::after { display: none; } body.arcade.reduce-motion .aw-screen::after { display: none; } /* ============ PIXEL PRIMITIVES ============ */ /* Hard pixel border using layered box-shadow (true blocky corners) */ .pxl { position: relative; background: var(--bk); border: 3px solid var(--v); box-shadow: 0 0 0 3px var(--bk), 0 0 0 6px var(--n); } .pxl-flat { background: var(--bk); border: 3px solid var(--v); } .pxl-navy { background: var(--n); border: 3px solid var(--v); } /* corner ticks — tiny pixel squares at the four corners */ .pxl-corners::before, .pxl-corners::after, .pxl-corners > .cnr-tl, .pxl-corners > .cnr-tr { content: ""; position: absolute; width: 6px; height: 6px; background: var(--wh); z-index: 2; } .pxl-corners::before { top: -3px; left: -3px; } .pxl-corners::after { top: -3px; right: -3px; } .pxl-corners > .cnr-bl { content:""; position:absolute; width:6px; height:6px; background: var(--wh); bottom: -3px; left: -3px; } .pxl-corners > .cnr-br { content:""; position:absolute; width:6px; height:6px; background: var(--wh); bottom: -3px; right: -3px; } /* ===== Pixel buttons ===== */ .pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Press Start 2P', monospace; font-size: 12px; padding: 16px 22px; color: var(--wh); background: var(--bk); border: 3px solid var(--v); box-shadow: 4px 4px 0 0 var(--n); border-radius: var(--hh-r-md); transition: none; text-transform: uppercase; } .pbtn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--n); background: var(--v); } .pbtn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--n); } .pbtn-v { background: var(--v); border-color: var(--wh); box-shadow: 4px 4px 0 0 var(--n); } .pbtn-v:hover { background: var(--v2); } .pbtn-lg { font-size: 14px; padding: 20px 28px; } .pbtn-sm { font-size: 10px; padding: 11px 14px; box-shadow: 3px 3px 0 0 var(--n); } .pbtn-sm:hover { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--n); } .pbtn-ghost { background: var(--bk); border-color: var(--n2); box-shadow: 4px 4px 0 0 var(--n); } .pbtn-ghost:hover { background: var(--n); border-color: var(--v); } /* blink */ .blink { animation: aw-blink 1s steps(1) infinite; } @keyframes aw-blink { 50% { opacity: 0; } } .arcade.reduce-motion .blink { animation: none; } /* arcade eyebrow / HUD label */ .aw-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); } .aw-eyebrow .blk { width: 8px; height: 8px; background: var(--v); box-shadow: 0 0 8px var(--v); border-radius: var(--hh-r-xs); } /* small label chips (BEADS, timers, tags on light sections) */ .hh-badge { border-radius: var(--hh-r-sm); } /* small pixel bead dot */ .beaddot { width: 10px; height: 10px; border-radius: 999px; background: var(--v); } /* ============ BOOT LOADER ============ */ .boot { position: fixed; inset: 0; z-index: 10000; background: var(--bk); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; overflow: hidden; } .boot::before { /* scanlines */ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 50%); background-size: 100% 3px; opacity: 0.5; } .boot.flicker { animation: boot-flicker 2.4s steps(1) both; } @keyframes boot-flicker { 0% { opacity: 0; } 2% { opacity: 1; } 4% { opacity: 0.2; } 6% { opacity: 1; } 9% { opacity: 0.6; } 11% { opacity: 1; } 100% { opacity: 1; } } /* CRT power-on horizontal line */ .boot-crt { position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--wh); box-shadow: 0 0 20px 4px var(--wh); animation: crt-open 0.5s cubic-bezier(.5,0,.5,1) forwards; } @keyframes crt-open { 0% { transform: scaleX(0.02); opacity: 1; } 60% { transform: scaleX(1); height: 3px; opacity: 1; } 100% { transform: scaleY(140); opacity: 0; height: 3px; } } .boot-glow { position: absolute; width: 70vmax; height: 70vmax; border-radius: 999px; background: radial-gradient(circle, rgba(127,0,255,0.18), rgba(0,0,128,0.12) 45%, transparent 70%); animation: boot-pulse 1.2s ease-in-out infinite; } @keyframes boot-pulse { 0%,100% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.05); } } .boot-noise { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0.5; pointer-events: none; z-index: 1; mix-blend-mode: screen; } .arcade.reduce-motion .boot-noise { display: none; } .boot-lines { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; gap: 14px; } .boot-line { font-family: 'Press Start 2P', monospace; font-size: 12px; color: var(--gray); } .boot-line.on { color: var(--wh); text-shadow: 0 0 10px var(--v); } .boot-bar { position: relative; z-index: 2; width: 280px; max-width: 70vw; height: 16px; border: 3px solid var(--v); background: var(--bk); } .boot-bar > i { display: block; height: 100%; background: var(--v); box-shadow: 0 0 12px var(--v); width: 0; } .boot-pct { font-family:'Press Start 2P', monospace; font-size: 10px; color: var(--gray2); z-index: 2; } /* wordmark assemble blocks */ .boot-mark { position: relative; z-index: 2; } /* autoplay-safe sound prompt */ .boot-sound { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; cursor: pointer; font-size: 9px; color: var(--wh); background: var(--v); border: 3px solid var(--wh); padding: 10px 16px; box-shadow: 4px 4px 0 var(--n), 0 0 18px var(--glow); display: flex; align-items: center; gap: 8px; animation: bs-pulse 1.1s steps(2) infinite; } .boot-sound .bs-spk { color: var(--ylw); } @keyframes bs-pulse { 0%,100% { box-shadow: 4px 4px 0 var(--n), 0 0 18px var(--glow); } 50% { box-shadow: 4px 4px 0 var(--n), 0 0 30px var(--v3); } } /* ============ TOBEADS WORDMARK (pixel SVG art — assets/TobeadsWordlogo.svg) ==== The SVG is injected inline; its white glyphs are recolored to currentColor so the wordmark adapts to the background (white on dark, ink on light) while the red accent stays fixed. */ .tobeads-logo { display: inline-flex; align-items: center; line-height: 0; color: var(--wh); } .tobeads-logo svg { height: 100%; width: auto; display: block; } .tobeads-logo svg path[fill="white"] { fill: currentColor; } .tobeads-logo.on-light { color: var(--ink); } @keyframes logo-in { 0% { opacity: 0; transform: translateY(-16px) scale(1.18); } 100% { opacity: 1; transform: none; } } .tobeads-logo.boot-wordmark { animation: logo-in .5s steps(6) both; } .arcade.reduce-motion .tobeads-logo.boot-wordmark { animation: none; } /* legacy text wordmark classes retained for any external references */ .tobeads-mark { font-family: 'Press Start 2P', monospace; display: inline-flex; align-items: center; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; } .tb-nav { font-family:'Press Start 2P', monospace; font-size: 14px; } /* ============ HIDDEN TOP NAV (pixel HUD) ============ */ .aw-navzone { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 70; } .aw-hud { position: fixed; top: 0; left: 0; right: 0; z-index: 71; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px; background: var(--bk); border-bottom: 3px solid var(--v); box-shadow: 0 3px 0 0 var(--n); transform: translateY(-110%); transition: transform .18s steps(3); } .aw-hud.show { transform: translateY(0); } .aw-hud-links { display: flex; align-items: center; gap: 2px; } .aw-hud-link { font-family:'Press Start 2P', monospace; font-size: 9px; color: var(--gray); padding: 10px 12px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .aw-hud-link:hover { color: var(--wh); background: var(--v); } .aw-hud-link.on { color: var(--v); } .aw-hud-link.on::before { content: "▸"; color: var(--v); } .aw-navpeek { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 69; display: flex; gap: 4px; align-items: center; padding: 7px 12px 8px; background: var(--bk); border: 3px solid var(--v); border-top: none; transition: opacity .2s ease; } .aw-navpeek .dot { width: 6px; height: 6px; background: var(--v); } .aw-navpeek .dot:nth-child(2){ background: var(--n2); } .aw-navpeek .dot:nth-child(3){ background: var(--wh); } .aw-mob-btn { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); z-index: 72; width: 46px; height: 46px; background: var(--bk); border: 3px solid var(--v); color: var(--wh); display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--n); } .aw-mob-overlay { position: fixed; inset: 0; z-index: 90; background: var(--bk); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .aw-mob-link { font-family:'Press Start 2P', monospace; font-size: 18px; color: var(--wh); padding: 14px 0; } .aw-mob-link .n { color: var(--v); margin-right: 16px; } .aw-mob-link:active { color: var(--v); } /* ============ ARCADE CABINET — coherent charcoal 3D machine ============ */ /* the cabinet is a real 3D object turned slightly (perspective comes from parent) */ /* The whole machine: one connected upright object, turned a few degrees so the right side panel reads as real thickness. All sub-sections are flush so the silhouette stays a single continuous body (no floating slabs / seams). */ .cab3d { position: relative; width: 100%; margin: 0 auto; transform: rotateY(-5deg); transform-style: preserve-3d; } /* ONE continuous right-hand side panel = honest cabinet depth, flush to the body from the marquee cap down to the base, skewed so it recedes into the scene. */ .cab-side { position: absolute; z-index: 1; pointer-events: none; top: 14px; bottom: 16px; right: clamp(-30px, -3.2vw, -16px); width: clamp(18px, 3.2vw, 32px); background: linear-gradient(180deg, #17171D 0%, #0C0C11 55%, #050507 100%); transform: skewY(7deg); border-radius: 0 12px 14px 0; box-shadow: inset 12px 0 24px rgba(0,0,0,0.9), 8px 12px 26px rgba(0,0,0,0.45); } /* brand seam line where the side wraps to the front face */ .cab-side::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--v) 0%, transparent 65%); opacity: 0.55; } /* the cabinet front face: tall, matte-black, rounded shoulders */ .cab { position: relative; z-index: 2; display: flex; flex-direction: column; transform-style: preserve-3d; background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 13%, rgba(255,255,255,0.045) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.5) 100%), linear-gradient(180deg, #24242B 0%, #181820 50%, #0E0E13 100%); border-radius: 26px 26px 10px 10px; box-shadow: inset 0 3px 0 rgba(255,255,255,0.10), inset 2px 0 0 rgba(255,255,255,0.05), inset -3px 0 0 rgba(0,0,0,0.5), 0 30px 54px rgba(0,0,0,0.5); } /* front-left edge bevel highlight → roundness on the near corner */ .cab::after { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; z-index: 3; background: linear-gradient(180deg, rgba(255,255,255,0.16), transparent 72%); border-radius: 26px 0 0 8px; pointer-events: none; } /* ===== MARQUEE — a real head-box with a forward-tilted top cap (thickness) ===== */ .cab-marquee { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; padding: clamp(9px, 1.5vh, 15px) 18px; background: radial-gradient(130% 180% at 50% 125%, rgba(127,0,255,0.22), transparent 70%), linear-gradient(180deg, #232330 0%, #15151D 60%, #0C0C11 100%); border-radius: 26px 26px 4px 4px; border-bottom: 3px solid #050507; box-shadow: inset 0 2px 0 rgba(255,255,255,0.14), inset 0 -12px 18px rgba(0,0,0,0.5), 0 6px 14px rgba(0,0,0,0.5); } /* forward-facing top surface = marquee depth */ .cab-marquee::before { content: ""; position: absolute; left: 8px; right: 8px; top: clamp(-15px, -1.7vh, -9px); height: clamp(9px, 1.5vh, 16px); background: linear-gradient(180deg, #34343F 0%, #20202A 70%, #15151C 100%); border-radius: 16px 16px 2px 2px; transform: perspective(300px) rotateX(34deg); transform-origin: bottom center; box-shadow: inset 0 3px 0 rgba(255,255,255,0.2), 0 8px 12px rgba(0,0,0,0.45); } .cab-marquee .px { font-size: 9px; color: var(--wh); text-shadow: 0 0 8px var(--v); } .cab-bulbs { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; } .cab-bulb { width: 7px; height: 7px; border-radius: 999px; background: var(--scr-cyan); box-shadow: 0 0 8px var(--scr-cyan); } .cab-bulb:nth-child(2){ animation: bulb 1.2s steps(1) .2s infinite; } .cab-bulb:nth-child(3){ animation: bulb 1.2s steps(1) .4s infinite; } .cab-bulb:nth-child(1){ animation: bulb 1.2s steps(1) 0s infinite; } @keyframes bulb { 50% { background: var(--v); box-shadow: none; } } .arcade.reduce-motion .cab-bulb { animation: none; } /* lit nameplate / wordmark inside the marquee */ .cab-nameplate { font-family: 'Press Start 2P', monospace; font-size: clamp(8px, 1.1vw, 11px); color: var(--wh); letter-spacing: 0.16em; text-shadow: 0 0 6px var(--scr-cyan), 0 0 16px var(--v); text-transform: uppercase; line-height: 1; white-space: nowrap; } /* ===== upper body that carries the recessed monitor ===== */ .cab-head { position: relative; z-index: 2; padding: clamp(12px, 1.8vh, 18px) clamp(14px, 2.4vw, 22px) clamp(10px, 1.4vh, 14px); } /* recessed monitor housing — thick frame the CRT visibly sinks into */ .cab-bezel { position: relative; z-index: 2; padding: clamp(12px, 1.8vh, 20px); background: linear-gradient(180deg, #1A1A20 0%, #0C0C11 100%); border-radius: 16px; border: 3px solid #050507; box-shadow: inset 0 8px 18px rgba(0,0,0,0.98), inset 0 -4px 10px rgba(255,255,255,0.05), inset 0 0 0 2px #1E1E26, 0 12px 26px rgba(0,0,0,0.72); } /* CRT screen — sunk inside the bezel, glass + cyan glow */ .aw-screen { position: relative; z-index: 2; overflow: hidden; background: radial-gradient(120% 120% at 50% 35%, #02121C, #000 78%); border: 4px solid #07070A; box-shadow: inset 0 0 0 2px var(--scr-blue), inset 0 0 44px rgba(0,0,0,0.92), inset 0 8px 22px rgba(0,0,0,0.95), 0 0 22px var(--scr-cyanG); border-radius: 16px / 22px; /* gentle CRT bow */ filter: drop-shadow(0 0 8px rgba(45, 225, 255, 0.25)); } .aw-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.22) 50%); background-size: 100% 3px; opacity: 0.5; } .aw-screen::before { /* glass vignette + cyan glare */ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(120% 90% at 50% 0%, rgba(45,225,255,0.12), transparent 50%), linear-gradient(120deg, rgba(255,255,255,0.07), transparent 28%); box-shadow: inset 0 0 50px rgba(0,0,0,0.7); } body.no-scan .aw-screen::after, .arcade.reduce-motion .aw-screen::after { display: none; } .aw-screen-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-family:'Press Start 2P', monospace; font-size: 9px; pointer-events: none; } /* CRT inner safe zone container to isolate flex boundaries & padding */ .screen-padding { position: absolute; inset: 0; padding: clamp(28px, 4.4vh, 40px) clamp(14px, 2.2vw, 24px) clamp(14px, 2.4vh, 24px); box-sizing: border-box; z-index: 2; } /* Viewport inside screen-padding that ensures the maze fits perfectly and is not cropped */ .maze-viewport { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .maze-viewport canvas { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; display: block; } .maze-viewport canvas.maze-canvas--full { aspect-ratio: 13 / 15; } .maze-viewport canvas.maze-canvas--fit { aspect-ratio: unset !important; object-fit: unset !important; } .maze-viewport canvas.maze-canvas--compact { aspect-ratio: 1 / 1; } /* structural lip where the screen body meets the control deck — spans full width so the two halves read as one molded body, never a gap. */ .deck-joint { position: relative; z-index: 5; height: clamp(10px, 1.4vh, 16px); background: linear-gradient(90deg, rgba(0,0,0,0.6), transparent 15%, transparent 85%, rgba(0,0,0,0.6)), linear-gradient(180deg, #43434F 0%, #20202A 46%, #07070A 100%); border-top: 2px solid #54545F; box-shadow: 0 8px 14px rgba(0,0,0,0.6), inset 0 -3px 6px rgba(0,0,0,0.82); } /* ============ CONTROL DECK — slanted panel that juts out of the body ============ */ .deck-3d { position: relative; z-index: 6; transform-style: preserve-3d; transform: perspective(1100px) rotateX(22deg); transform-origin: top center; } .deck-top { position: relative; z-index: 2; padding: clamp(12px, 1.9vh, 20px) clamp(16px, 3.2vw, 26px) clamp(10px, 1.6vh, 16px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 1.8vw, 18px); background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 22%, rgba(0,0,0,0.34) 100%), repeating-linear-gradient(135deg, #20202A 0 6px, #15151B 6px 12px); border-top: 3px solid #3A3A46; box-shadow: inset 0 3px 0 rgba(255,255,255,0.10), inset 0 12px 20px rgba(0,0,0,0.6); } /* vertical front face of the deck (drops toward the lower body) */ .deck-front { position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(20px, 3vh, 32px)); height: clamp(20px, 3vh, 32px); background: linear-gradient(180deg, #18181F 0%, #08080C 100%); border-top: 2px solid #2C2C36; transform-origin: top center; transform: rotateX(-90deg); box-shadow: 0 16px 30px rgba(0,0,0,0.85), inset 0 2px 0 rgba(255,255,255,0.06); z-index: 1; } /* side faces connecting the deck to the cabinet sides */ .deck-side-l, .deck-side-r { position: absolute; top: 0; bottom: calc(-1 * clamp(20px, 3vh, 32px)); width: clamp(16px, 2.4vw, 26px); background: linear-gradient(180deg, #1A1A22, #0A0A0E); z-index: 1; } .deck-side-l { left: 0; transform-origin: left center; transform: rotateY(-90deg); } .deck-side-r { right: 0; transform-origin: right center; transform: rotateY(90deg); } .deck-top > * { transform: translateZ(2px); } .deck-label { font-family:'Press Start 2P', monospace; font-size: 7px; color: var(--gray2); text-align: center; margin-top: 9px; letter-spacing: 0.06em; } /* deep circular sockets to mount the control components */ .joy-socket { position: relative; width: clamp(96px, 15vw, 114px); height: clamp(100px, 16vh, 120px); border-radius: 12px; background: radial-gradient(circle at 50% 30%, #060608 0%, #0F0F14 60%, #1F1F2A 100%); border: 3px solid #030304; box-shadow: inset 0 6px 12px rgba(0,0,0,0.98), 0 3px 6px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; padding: 8px; } .start-btn-socket { position: relative; display: inline-flex; padding: clamp(6px, 1.2vw, 10px); background: radial-gradient(circle at 50% 30%, #030304 0%, #121218 65%, #22222E 100%); border: 4px solid #000; border-radius: 999px; box-shadow: inset 0 4px 8px rgba(0,0,0,0.9), 0 3px 5px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.05); } /* ball-top joystick — classic black base, red ball, deep mounting socket */ .joy { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .joy::before { display: none; } /* Socket handles depth now */ .joy-base { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 76px; height: 30px; background: radial-gradient(circle at 50% 28%, #34343C, #0A0A0E 75%); border: 3px solid #000; border-radius: 50%; box-shadow: 0 8px 12px rgba(0,0,0,0.8), 0 4px 0 #000, inset 0 -5px 8px rgba(0,0,0,0.95), inset 0 3px 5px rgba(255,255,255,0.22); touch-action: none; z-index: 1; } .joy-shaft { position: absolute; bottom: 22px; left: 50%; width: 13px; height: 46px; margin-left: -6.5px; background: linear-gradient(90deg, #1A1A1E, #C8C8D2 42%, #6A6A74 60%, #141418); box-shadow: inset 0 0 2px rgba(255,255,255,0.4); transform-origin: bottom center; transition: transform .08s steps(2); z-index: 2; } .joy-ball { position: absolute; top: 6px; left: 50%; width: 48px; height: 48px; margin-left: -24px; border-radius: 999px; background: radial-gradient(circle at 36% 28%, #FFA0A0 0 12%, var(--red2) 30%, var(--red) 55%, var(--redd) 100%); border: 3px solid #1A0606; box-shadow: 0 8px 12px rgba(0,0,0,0.55), 0 0 18px rgba(232,59,59,0.5), inset -5px -6px 10px rgba(0,0,0,0.55), inset 4px 4px 8px rgba(255,255,255,0.5); transform-origin: center bottom; transition: transform .08s steps(2); cursor: grab; touch-action: none; z-index: 3; } .joy-ball:active { cursor: grabbing; } .joy-ball::after { /* pixel glint */ content: ""; position: absolute; top: 9px; left: 11px; width: 8px; height: 8px; background: var(--wh); opacity: 0.95; } /* big tactile START button — classic arcade red, deep socket */ .start-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .start-btn { position: relative; width: 90px; height: 90px; border-radius: 999px; border: 4px solid var(--wh); background: radial-gradient(circle at 50% 30%, #FF8F8F 0 30%, var(--red2) 50%, var(--red) 70%, var(--redd) 100%); color: var(--wh); font-family:'Press Start 2P', monospace; font-size: 12px; box-shadow: 0 0 0 5px #0C0C10, 0 12px 14px rgba(0,0,0,0.55), 0 9px 0 var(--redd), inset 0 -4px 8px rgba(0,0,0,0.45), inset 4px 4px 9px rgba(255,255,255,0.5), 0 0 22px rgba(232,59,59,0.5); transition: transform .06s steps(1), box-shadow .06s steps(1); text-shadow: 0 2px 0 var(--redd); } .start-btn:hover { background: radial-gradient(circle at 50% 30%, #FFB0B0 0 30%, #FF7A7A 50%, var(--red2) 70%, var(--red) 100%); box-shadow: 0 0 0 5px #0C0C10, 0 12px 14px rgba(0,0,0,0.55), 0 9px 0 var(--redd), inset 4px 4px 9px rgba(255,255,255,0.5), 0 0 36px var(--red2); } .start-btn.press, .start-btn:active { transform: translateY(8px) scale(0.95); box-shadow: 0 0 0 5px #050508, 0 2px 4px rgba(0,0,0,0.7), 0 1px 0 var(--redd), inset 0 6px 10px rgba(0,0,0,0.8), 0 0 24px rgba(255,90,90,0.4); } .start-ring { position: absolute; inset: -10px; border: 3px dashed var(--ylw); border-radius: 999px; opacity: 0.6; animation: ring-spin 8s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } .arcade.reduce-motion .start-ring { animation: none; } .start-label { font-family:'Press Start 2P', monospace; font-size: 7px; color: var(--red); } /* entry START — larger, pulsing, blinking ring, clear call to action */ .cab-xl .start-btn { width: 104px; height: 104px; font-size: 13px; animation: start-pulse 1.3s ease-in-out infinite; } .cab-xl .start-btn:hover, .cab-xl .start-btn.press { animation: none; } .cab-xl .start-ring { inset: -12px; border-width: 4px; border-style: dashed; border-color: var(--ylw); animation: ring-spin 12s linear infinite, ring-pulse-blink 2.2s ease-in-out infinite; } .cab-xl .start-label { font-size: 8px; } @keyframes start-pulse { 0%, 100% { box-shadow: 0 0 0 5px #0C0C10, 0 12px 14px rgba(0,0,0,0.55), 0 9px 0 var(--redd), inset 0 -4px 8px rgba(0,0,0,0.45), inset 4px 4px 9px rgba(255,255,255,0.5), 0 0 22px rgba(232,59,59,0.5); } 50% { box-shadow: 0 0 0 5px #0C0C10, 0 12px 14px rgba(0,0,0,0.55), 0 9px 0 var(--redd), inset 0 -4px 8px rgba(0,0,0,0.45), inset 4px 4px 9px rgba(255,255,255,0.5), 0 0 40px rgba(255,90,90,0.9); } } @keyframes ring-pulse-blink { 0%, 100% { opacity: 0.95; transform: scale(1); filter: drop-shadow(0 0 8px var(--ylw)); } 50% { opacity: 0.2; transform: scale(1.05); filter: drop-shadow(0 0 2px var(--ylw)); } } .arcade.reduce-motion .cab-xl .start-btn { animation: none; } .arcade.reduce-motion .cab-xl .start-ring { animation: ring-spin 8s linear infinite; } /* secondary arcade buttons cluster — recessed sockets + glossy raised tops */ .btn-cluster { display: grid; grid-template-columns: repeat(2, 30px); grid-template-rows: repeat(2, 30px); gap: 12px; } .arc-btn { position: relative; width: 30px; height: 30px; border-radius: 999px; border: 2px solid #0A0A0A; /* outer ring = socket rim sunk into the panel; inner = glossy dome */ box-shadow: 0 0 0 4px #08080C, 0 2px 0 4px #1A1A22, 0 8px 10px rgba(0,0,0,0.8), 0 6px 0 #000, inset 0 -4px 6px rgba(0,0,0,0.65), inset 3px 3px 5px rgba(255,255,255,0.6); transition: transform .06s steps(1), box-shadow .06s steps(1); } .arc-btn::after { /* pixel gloss highlight */ content: ""; position: absolute; top: 5px; left: 6px; width: 7px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.7); } .arc-btn.red { background: radial-gradient(circle at 38% 28%, #FF8585, var(--red) 55%, var(--redd)); } .arc-btn.blue { background: radial-gradient(circle at 38% 28%, #7FB4FF, #2D6FE0 55%, #143F9E); } .arc-btn.yellow { background: radial-gradient(circle at 38% 28%, #FFEFA0, #FFD23D 55%, #C99500); } .arc-btn.white { background: radial-gradient(circle at 38% 28%, #FFFFFF, #D0D0D8 55%, #8C8C98); } .arc-btn:hover { transform: translateY(-1px); filter: brightness(1.1); } .arc-btn:active { transform: translateY(3px) scale(0.96); box-shadow: 0 0 0 4px #08080C, 0 1px 0 4px #0C0C10, 0 2px 4px rgba(0,0,0,0.95), inset 0 4px 8px rgba(0,0,0,0.85); } /* coin slot */ .coin-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; } .coin-slot .slot { width: 34px; height: 8px; background: var(--bk); border: 2px solid var(--ylw); box-shadow: inset 0 0 4px rgba(255,210,61,0.5); } .coin-slot .px { font-size: 6px; color: var(--gray2); } /* dpad (mobile controls) */ .aw-dpad { display: grid; grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); gap: 3px; } .aw-dpad button { border: 3px solid var(--v); background: var(--bk); color: var(--wh); display: flex; align-items: center; justify-content: center; } .aw-dpad button:active { background: var(--v); } /* audio toggle */ .aw-audio-toggle { position: fixed; left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 75; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--bk); border: 3px solid var(--v); color: var(--wh); box-shadow: 3px 3px 0 var(--nd); } .aw-audio-toggle:hover { background: var(--v); } .aw-audio-toggle:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--nd); } .aw-audio-ico { display: inline-flex; color: var(--v3); } .aw-audio-toggle:hover .aw-audio-ico { color: var(--wh); } .aw-audio-label { font-size: 7px; color: var(--gray); } .aw-audio-toggle:hover .aw-audio-label { color: var(--wh); } /* phones: icon-only audio toggle so it stays compact and out of content's way */ @media (max-width: 560px) { .aw-audio-label { display: none; } .aw-audio-toggle { padding: 9px; gap: 0; } } /* ============ FULLSCREEN ARCADE ENTRY ============ */ .entry { /* fixed fullscreen gate — must press START (homepage is not mounted until then). iOS CRT uses html.ios-webkit rules to flatten 3D so the maze still paints. */ position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(8px, 1.5vh, 20px); overflow: hidden; /* Lock scroll on intro */ height: 100dvh; min-height: 100vh; width: 100vw; background: radial-gradient(120% 90% at 50% 12%, #16162A 0%, #0A0A14 45%, #050507 100%); } .entry-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(46% 44% at 50% 44%, rgba(45,225,255,0.16), transparent 70%), radial-gradient(60% 50% at 50% 40%, rgba(127,0,255,0.12), transparent 72%); } /* perspective floor grid for arcade-room depth */ .entry-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 52%; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(45,111,224,0.34) 2px, transparent 2px), linear-gradient(90deg, rgba(45,111,224,0.20) 2px, transparent 2px); background-size: 46px 46px; transform: perspective(340px) rotateX(66deg); mask-image: linear-gradient(transparent, #000 55%); -webkit-mask-image: linear-gradient(transparent, #000 55%); opacity: 0.75; } /* Subtle cyan glow reflection on the floor */ .entry-floor::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 60%, rgba(45,225,255,0.25), transparent 75%); pointer-events: none; } /* hide loose sticker decals in the entry — they read as floating debris */ .entry .gtag, .entry .gdot { display: none; } .entry-cab-wrap { position: relative; z-index: 3; flex: 1 1 0; min-height: 0; width: 100%; /* upright proportions: width tracks available height so the whole machine stays taller-than-wide and never needs scrolling */ max-width: min(86vw, calc((100dvh - 44px) * 0.56), 440px); margin: auto; perspective: 1700px; perspective-origin: 50% 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transform-origin: center center; will-change: transform; } /* tall lower cabinet body below the control deck → upright stance + coin door. Connected directly to the deck-front via the overhang shadow, no gap. */ .cab-lower { position: relative; z-index: 4; margin-top: clamp(18px, 2.6vh, 32px); /* room for the deck-front depth */ padding: clamp(16px, 3vh, 40px) clamp(16px, 2.4vw, 22px) clamp(12px, 1.6vh, 18px); background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 13%, rgba(255,255,255,0.03) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.55) 100%), linear-gradient(180deg, #1A1A20 0%, #111116 60%, #0A0A0D 100%); box-shadow: inset 0 16px 24px rgba(0,0,0,0.85); /* cast from the deck overhang */ display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 1.6vh, 16px); } .coin-module { position: relative; width: clamp(96px, 13vw, 124px); height: clamp(40px, 6vh, 60px); background: linear-gradient(180deg, #0A0A0E, #050507); border: 3px solid #000; border-radius: 6px; box-shadow: inset 0 0 16px rgba(0,0,0,0.9), 0 2px 0 rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; } .coin-led { position: absolute; top: 8px; left: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--scr-cyan); box-shadow: 0 0 8px var(--scr-cyan); } .coin-slit { width: 7px; height: clamp(18px, 3vh, 28px); background: #000; border: 2px solid var(--ylw); border-radius: 3px; box-shadow: inset 0 0 6px rgba(255,210,61,0.5); margin-right: 14px; } .coin-return { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 44px; height: 10px; background: #000; border: 2px solid #2A2A30; border-radius: 3px; } .cab-base-tag { font-size: 7px; color: var(--gray2); letter-spacing: 0.16em; } /* base plinth — slightly proud of the body, sits the cabinet on the floor */ .cab-base { position: relative; z-index: 4; margin: 0 clamp(-14px, -1.6vw, -8px); padding: clamp(8px, 1.2vh, 14px) 20px clamp(9px, 1.3vh, 15px); background: linear-gradient(180deg, #0C0C10 0%, #050507 100%); border-top: 4px solid #050507; border-radius: 0 0 14px 14px; box-shadow: 0 22px 30px rgba(0,0,0,0.55), inset 0 -4px 10px rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; } /* floor cast-shadow ellipse under the cabinet */ .cab-floor-shadow { position: absolute; left: 4%; right: 4%; bottom: clamp(-34px, -4vh, -22px); height: clamp(40px, 6vh, 64px); z-index: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.6) 48%, transparent 75%); filter: blur(8px); opacity: 0.92; } /* ===== large INTRO cabinet sizing — height-aware so it fits one viewport ===== */ .cab-xl .cab-head { padding: clamp(14px, 2vh, 20px) clamp(16px, 3vw, 26px) clamp(10px, 1.4vh, 14px); } .cab-xl .aw-screen { height: clamp(170px, 28vh, 320px); min-height: auto; } .cab-xl .cab-side { width: clamp(22px, 3.4vw, 34px); } /* ============ iOS Safari — CRT canvas renders black inside 3D cabinets ============ WebKit fails to composite