/* ============================================================ Arcade design system — shared by the hub and every game page. Dark neon-arcade theme. No external fonts, no dependencies. ============================================================ */ :root { --bg: #0a0d18; --bg-2: #0e1322; --panel: #131a30; --panel-2: #182140; --line: #26304f; --line-bright: #35426e; --text: #e9edff; --muted: #98a1c4; --faint: #6b7396; --green: #3ee97f; --yellow: #fde047; --violet: #a78bfa; --pink: #f472b6; --orange: #fb923c; --cyan: #38dff0; --red: #f87171; --accent: var(--cyan); --radius: 14px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* Per-page accent, set via */ body[data-accent="green"] { --accent: var(--green); } body[data-accent="yellow"] { --accent: var(--yellow); } body[data-accent="violet"] { --accent: var(--violet); } body[data-accent="pink"] { --accent: var(--pink); } body[data-accent="orange"] { --accent: var(--orange); } body[data-accent="cyan"] { --accent: var(--cyan); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: radial-gradient(1100px 500px at 15% -10%, rgba(167, 139, 250, 0.10), transparent 60%), radial-gradient(900px 480px at 90% -5%, rgba(56, 223, 240, 0.08), transparent 55%), var(--bg); color: var(--text); min-height: 100vh; line-height: 1.55; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------- Shared game-page shell (injected by Arcade.mountShell) ---------- */ .shell-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: rgba(10, 13, 24, 0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .shell-bar .back { color: var(--muted); font-weight: 600; font-size: 14px; white-space: nowrap; } .shell-bar .back:hover { color: var(--text); text-decoration: none; } .shell-bar .game-title { font-size: 17px; font-weight: 800; letter-spacing: 0.02em; margin: 0; flex: 1; text-align: center; } .shell-bar .game-title::after { content: ""; display: block; width: 34px; height: 3px; margin: 2px auto 0; border-radius: 2px; background: var(--accent); } .shell-bar .shell-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .shell-bar .best { font-family: var(--mono); font-size: 13px; color: var(--muted); } .shell-bar .best strong { color: var(--accent); font-weight: 700; } .icon-btn { appearance: none; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; width: 36px; height: 36px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, transform 0.15s; } .icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); } .icon-btn[aria-pressed="true"] { opacity: 0.45; } /* ---------- Game stage layout ---------- */ .game-stage { max-width: 1060px; margin: 0 auto; padding: 26px 20px 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .game-wrap { position: relative; max-width: 100%; } .game-wrap canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-bright); border-radius: var(--radius); background: var(--bg-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 42px -14px color-mix(in srgb, var(--accent) 45%, transparent); } /* Overlay panel games can show over the canvas (start / pause / game over) */ .game-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; background: rgba(8, 10, 20, 0.78); backdrop-filter: blur(4px); border-radius: var(--radius); z-index: 5; } .game-overlay h2 { margin: 0; font-size: clamp(26px, 5vw, 40px); letter-spacing: 0.03em; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); } .game-overlay p { margin: 0; color: var(--muted); font-size: 15px; } .game-overlay .big-score { font-family: var(--mono); font-size: 22px; color: var(--text); } .game-overlay .new-best { color: var(--yellow); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; } .game-overlay.hidden { display: none; } /* ---------- HUD / controls ---------- */ .hud { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; color: var(--muted); } .hud b, .hud strong { color: var(--text); font-weight: 700; } .controls-hint { color: var(--faint); font-size: 13px; text-align: center; margin: 0; } .controls-hint kbd { font-family: var(--mono); font-size: 11.5px; background: var(--panel); border: 1px solid var(--line-bright); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; color: var(--text); margin: 0 2px; } /* ---------- Buttons, selects, panels ---------- */ .btn { appearance: none; font: inherit; font-weight: 700; font-size: 14px; color: #0a0d18; background: var(--accent); border: none; border-radius: 10px; padding: 10px 22px; cursor: pointer; letter-spacing: 0.02em; transition: transform 0.15s, box-shadow 0.15s, filter 0.15s; box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .btn:active { transform: translateY(0); } .btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line-bright); box-shadow: none; } .btn.ghost:hover { border-color: var(--accent); } .select, select.select { font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line-bright); border-radius: 10px; padding: 8px 12px; cursor: pointer; } .select:hover { border-color: var(--accent); } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; } /* ---------- Score table (game pages) ---------- */ .scores { width: 100%; max-width: 460px; } .scores h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); text-align: center; } .scores ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .scores li { display: flex; justify-content: space-between; padding: 9px 16px; font-family: var(--mono); font-size: 14px; color: var(--muted); background: var(--panel); } .scores li:nth-child(odd) { background: var(--bg-2); } .scores li .v { color: var(--text); font-weight: 600; } .scores li:first-child .v { color: var(--accent); } .scores .empty { justify-content: center; color: var(--faint); } /* ============================================================ Hub (index.html) ============================================================ */ .hub-header { max-width: 1160px; margin: 0 auto; padding: 54px 24px 8px; text-align: center; } .hub-header .logo { font-size: clamp(38px, 7vw, 62px); font-weight: 900; letter-spacing: 0.04em; margin: 0; background: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 45%, var(--pink) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(167, 139, 250, 0.35)); } .hub-header .tagline { color: var(--muted); font-size: 16px; margin: 10px 0 0; } .hub-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 28px auto 6px; padding: 0 24px; } .chip { appearance: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 18px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .chip:hover { color: var(--text); border-color: var(--line-bright); } .chip.active { color: #0a0d18; background: var(--cyan); border-color: var(--cyan); font-weight: 700; } .hub-grid { max-width: 1160px; margin: 22px auto 0; padding: 0 24px 70px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } .game-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .game-card:hover { transform: translateY(-4px); text-decoration: none; border-color: var(--card-accent, var(--cyan)); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.9), 0 0 34px -12px color-mix(in srgb, var(--card-accent, var(--cyan)) 55%, transparent); } .game-card .thumb { aspect-ratio: 16 / 10; background: linear-gradient(150deg, color-mix(in srgb, var(--card-accent, var(--cyan)) 26%, var(--bg-2)), var(--bg-2) 70%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); } .game-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .game-card .thumb .glyph { font-size: 54px; } .game-card .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .game-card h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.01em; } .game-card .blurb { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1; } .game-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; } .game-card .cat { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--card-accent, var(--cyan)); border: 1px solid color-mix(in srgb, var(--card-accent, var(--cyan)) 45%, transparent); border-radius: 999px; padding: 3px 10px; } .game-card .best { font-family: var(--mono); font-size: 12.5px; color: var(--faint); } .game-card .best strong { color: var(--text); font-weight: 600; } .game-card .badge-last { position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(10, 13, 24, 0.8); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 50%, transparent); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(4px); } .game-card .badge-lock { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(10, 13, 24, 0.85); color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 50%, transparent); border-radius: 999px; padding: 3px 10px; backdrop-filter: blur(4px); } .game-card.locked .thumb img { filter: saturate(0.35) brightness(0.7); } .hub-footer { border-top: 1px solid var(--line); color: var(--faint); font-size: 13px; text-align: center; padding: 26px 20px 40px; } .hub-footer a { color: var(--muted); } /* Ad containers (rendered by shared/ads.js only when ads are enabled) */ .ad-box { width: 100%; max-width: 1112px; margin: 22px auto 0; padding: 10px 12px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-height: 110px; } .ad-box .ad-label { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } .game-stage .ad-box, .shop-main .ad-box { max-width: 860px; } @media (max-width: 560px) { .shell-bar { padding: 8px 12px; gap: 10px; } .shell-bar .best { display: none; } .game-stage { padding: 16px 10px 40px; } }