/* ============================================================ NEON ARCADE — shared design system (CYBERPUNK / NEON GRID) Single source of truth: re-skins index + all 55 games at once. Class names + CSS variables are STABLE — games rely on them. Fonts are loaded from each page's (no @import here). ============================================================ */ :root { /* surfaces */ --bg: #0a0a0f; --bg-2: #0c0d18; --panel: rgba(255, 255, 255, 0.025); --panel-2: rgba(10, 12, 24, 0.85); --line: rgba(0, 240, 255, 0.18); --line-2: rgba(0, 240, 255, 0.42); /* ink */ --ink: #eaf6ff; --ink-soft: #9fb6d4; --ink-dim: #7e93b8; /* AA-compliant on --bg for labels/hints/counts */ /* neon palette (cyberpunk) */ --cyan: #00ffff; --magenta: #ff2d95; --violet: #b14aff; --lime: #4ade80; --amber: #ffd000; --blue: #4d7cff; --red: #ff3b5e; /* default accent — overridable per game/zone via --accent */ --accent: var(--cyan); /* fonts */ --f-logo: 'Press Start 2P', 'Orbitron', 'IBM Plex Sans Thai', system-ui, sans-serif; --f-head: 'Orbitron', 'IBM Plex Sans Thai', system-ui, sans-serif; --f-body: 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif; --f-mono: 'Share Tech Mono', ui-monospace, monospace; /* shape — cyberpunk = angular cut corners, not rounded */ --cut: 14px; /* card / panel corner cut */ --cut-sm: 9px; /* button / chip corner cut */ --r-sm: 6px; --r: 6px; /* legacy tokens (used by some games) — small, suits angular theme */ --r-lg: 8px; /* glow helpers — box-shadow / text-shadow values (kept stable for game back-compat) */ --glow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); --glow-sm: 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); --tglow: 0 0 8px color-mix(in srgb, var(--accent) 75%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); /* filter values for clip-path elements (box-shadow would poke out past the cut corner) */ --fglow: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent)); --fglow-sm: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); /* angular clip-paths */ --clip: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); --clip-sm: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm))); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--f-body); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: radial-gradient(1200px 700px at 78% -8%, rgba(177,74,255,.14), transparent 60%), radial-gradient(1000px 600px at 8% 108%, rgba(0,255,255,.12), transparent 60%), linear-gradient(rgba(0,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,255,.045) 1px, transparent 1px), linear-gradient(180deg, var(--bg-2), var(--bg)); background-size: auto, auto, 64px 64px, 64px 64px, auto; background-attachment: fixed; } @media (prefers-reduced-motion: no-preference) { body { animation: grid-scroll 24s linear infinite; } } @keyframes grid-scroll { 0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 0 0, 0 0, 64px 64px, 64px 64px, 0 0; } } /* sweeping scan beam + vignette */ body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .5; box-shadow: 0 0 14px var(--cyan); } @media (prefers-reduced-motion: no-preference) { body::before { animation: scan-sweep 7s linear infinite; } } @keyframes scan-sweep { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .55; } 92% { opacity: .55; } 100% { transform: translateY(100vh); opacity: 0; } } body::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.12) 3px, transparent 4px); box-shadow: inset 0 0 200px rgba(0,0,0,.8); opacity: .6; mix-blend-mode: multiply; } a { color: inherit; text-decoration: none; } img, svg, canvas { display: block; max-width: 100%; } :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 1px var(--bg) inset; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ===== glitch utility (for wordmark / hero / titles) ===== */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; clip-path: inset(0); } .glitch::before { color: var(--magenta); z-index: -1; } .glitch::after { color: var(--cyan); z-index: -1; } @media (prefers-reduced-motion: no-preference) { .glitch::before { animation: glitch-a 2.6s infinite linear alternate-reverse; } .glitch::after { animation: glitch-b 3.4s infinite linear alternate-reverse; } } @keyframes glitch-a { 0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)} 20%{clip-path:inset(12% 0 58% 0);transform:translate(-2px,1px)} 40%{clip-path:inset(0)} 60%{clip-path:inset(64% 0 6% 0);transform:translate(2px,-1px)} 80%{clip-path:inset(0)} } @keyframes glitch-b { 0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)} 25%{clip-path:inset(58% 0 12% 0);transform:translate(2px,-1px)} 50%{clip-path:inset(0)} 70%{clip-path:inset(8% 0 66% 0);transform:translate(-2px,1px)} 90%{clip-path:inset(0)} } /* ===== game top bar ===== */ .arc-top { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(180deg, rgba(10,10,15,.92), rgba(10,10,15,.66)); border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 16px rgba(0,255,255,.15); backdrop-filter: blur(12px); } .arc-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 10px 16px; min-height: 44px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line-2); clip-path: var(--clip-sm); transition: color .15s, background .15s, filter .15s, transform .15s; } .arc-back:hover { color: var(--cyan); background: rgba(0,255,255,.08); filter: drop-shadow(0 0 8px rgba(0,255,255,.5)); transform: translateX(-2px); } .arc-title { flex: 1; margin: 0; text-align: center; font-family: var(--f-head); font-weight: 900; font-size: clamp(1rem, 3.4vw, 1.35rem); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-shadow: var(--tglow); } .arc-mute { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line-2); clip-path: var(--clip-sm); } .arc-mute[aria-pressed="true"], .arc-mute.is-off { opacity: .42; } /* ===== stage / panels ===== */ .arc-stage { max-width: 760px; margin: 0 auto; padding: 22px 16px 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .arc-panel { position: relative; width: 100%; background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip); padding: 18px; } .arc-panel::before, .arc-board::before, .game-card::before { content: ""; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); opacity: .7; pointer-events: none; } .arc-panel::after, .arc-board::after, .game-card::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); opacity: .7; pointer-events: none; } .arc-board { position: relative; width: 100%; touch-action: none; border: 1px solid var(--line-2); background: rgba(5,7,14,.7); clip-path: var(--clip); overflow: hidden; filter: var(--fglow-sm); } .arc-board canvas { width: 100%; height: auto; display: block; } /* ===== HUD ===== */ .arc-hud { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .arc-stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; padding: 8px 14px; background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip-sm); } .arc-stat .num { font-family: var(--f-mono); font-size: 1.4rem; line-height: 1; color: var(--accent); text-shadow: var(--tglow); } .arc-stat span { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; } /* ===== buttons ===== */ .arc-btn { font-family: var(--f-head); font-weight: 700; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; min-height: 46px; cursor: pointer; color: var(--accent); background: transparent; border: 2px solid var(--accent); clip-path: var(--clip-sm); transition: background .18s, color .18s, filter .18s, transform .12s; } .arc-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); filter: var(--fglow); text-shadow: 0 0 8px var(--accent); transform: translateY(-2px); } .arc-btn:active { transform: translateY(0); } .arc-btn--primary { color: #04060f; background: var(--accent); filter: var(--fglow); } .arc-btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); color: #04060f; } .arc-btn--ghost { border-color: var(--line-2); color: var(--ink-soft); } /* on-screen dpad / controls */ .arc-ctrl { width: 60px; height: 60px; display: grid; place-items: center; font-size: 1.4rem; color: var(--ink); user-select: none; background: var(--panel-2); border: 1px solid var(--line-2); clip-path: var(--clip-sm); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .arc-ctrl:active { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); filter: var(--fglow-sm); } .arc-pad { display: grid; grid-template-columns: repeat(3, 60px); gap: 8px; justify-content: center; } /* ===== overlay (start / game over) ===== */ .arc-overlay { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: rgba(7,8,16,.9); backdrop-filter: blur(4px); } .arc-overlay.is-hidden { display: none; } .arc-overlay h2 { font-family: var(--f-head); font-weight: 900; font-size: 1.5rem; margin: 0; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); text-shadow: var(--tglow); } .arc-overlay p { color: var(--ink-soft); max-width: 38ch; margin: 0; font-size: .95rem; } /* ===== index / landing (zones + cards) ===== */ .arc-shell { max-width: 1180px; margin: 0 auto; padding: 0 18px; } .zone { margin: 0 auto 46px; scroll-margin-top: 92px; } .zone-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; } .zone-badge { width: 50px; height: 50px; flex: none; display: grid; place-items: center; font-size: 1.5rem; border: 1px solid var(--line-2); clip-path: var(--clip-sm); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); filter: var(--fglow-sm); } .zone-head h2 { margin: 0; font-family: var(--f-head); font-weight: 900; font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase; text-shadow: var(--tglow); } .zone-head .zone-sub { font-family: var(--f-body); font-size: .85rem; color: var(--ink-soft); } .zone-head .zone-count { margin-left: auto; font-family: var(--f-mono); font-size: .78rem; color: var(--ink-dim); border: 1px solid var(--line); padding: 4px 12px; clip-path: var(--clip-sm); } .arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; } .game-card { --accent: var(--cyan); position: relative; display: flex; flex-direction: column; padding: 16px; background: var(--panel-2); border: 1px solid var(--line); clip-path: var(--clip); overflow: hidden; transition: background .18s, transform .18s, filter .18s, border-color .18s; animation: card-in .4s ease backwards; } .game-card:hover { transform: translateY(-5px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); filter: var(--fglow); } .game-card.is-hidden { display: none; } .gc-thumb { aspect-ratio: 16/10; display: grid; place-items: center; font-size: 2.8rem; clip-path: var(--clip-sm); margin-bottom: 12px; border: 1px solid var(--line); background: radial-gradient(120px 80px at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%), repeating-linear-gradient(0deg, rgba(0,255,255,.04) 0 1px, transparent 1px 14px), var(--bg-2); text-shadow: var(--tglow); } .gc-tag { align-self: flex-start; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); padding: 3px 10px; border: 1px solid var(--line-2); clip-path: var(--clip-sm); margin-bottom: 8px; } .game-card h3 { margin: 0 0 6px; font-family: var(--f-head); font-weight: 700; font-size: 1.04rem; letter-spacing: .02em; } .game-card p { margin: 0 0 14px; font-size: .85rem; color: var(--ink-soft); flex: 1; } .gc-play { align-self: flex-start; font-family: var(--f-head); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; } .game-card:hover .gc-play { gap: 10px; text-shadow: 0 0 8px var(--accent); } @keyframes card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ===== marquee ticker (index, optional) ===== */ .arc-ticker { overflow: hidden; border-block: 1px solid var(--line); background: rgba(0,255,255,.03); } .arc-ticker-track { display: flex; width: max-content; gap: 48px; padding: 8px 0; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .arc-ticker-track { animation: ticker 32s linear infinite; } } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 560px) { .arc-pad { grid-template-columns: repeat(3, 54px); } .arc-ctrl { width: 54px; height: 54px; } :root { --cut: 11px; --cut-sm: 8px; } }