/* ========================================================= GameHub — neo-brutalist retro-arcade theme --------------------------------------------------------- Two themes (light = "paper arcade", dark = "midnight cab") driven by [data-theme] on . Game playfields stay a dark "screen" colour in both themes so the canvas games always read like an arcade monitor. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root, [data-theme="light"] { --bg: #efe2c4; --panel: #fffdf4; --panel-2: #f5ead0; --ink: #17120c; --ink-dim: #6b5f4d; /* cool ocean palette (teal-led, amber pop, no purple) */ --c1: #0ea5a4; /* teal (main) */ --c2: #2563eb; /* blue */ --c3: #16a34a; /* green */ --c4: #f59e0b; /* amber (pop) */ --c5: #06b6d4; /* cyan */ --c6: #3b82f6; /* sky blue */ --c7: #0891b2; /* deep cyan */ --shadow-col: #17120c; --screen: #161310; /* permanent dark playfield */ /* ---- compatibility aliases used by the game pages ---- */ --bg-2: var(--screen); --surface: var(--panel); --surface-2: var(--panel-2); --border: var(--ink); --text: var(--ink); --text-dim: var(--ink-dim); --accent: var(--c1); --accent-2: var(--c6); --accent-3: var(--c5); --good: var(--c3); --bad: #dc2626; --radius: 6px; --font-display: "Press Start 2P", monospace; --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif; } [data-theme="dark"] { --bg: #1b1611; --panel: #2a221b; --panel-2: #352a21; --ink: #f6ead0; --ink-dim: #b6a589; --c1: #2dd4bf; /* bright teal */ --c2: #5b8cff; /* blue */ --c3: #34d27e; /* green */ --c4: #fbbf24; /* amber */ --c5: #22d3ee; /* cyan */ --c6: #60a5fa; /* sky blue */ --c7: #7dd3fc; /* light sky */ --shadow-col: #000000; --screen: #0d1410; } [data-theme="blackout"] { --bg: #000000; --panel: #0d0d0d; --panel-2: #161616; --ink: #f2f2f2; --ink-dim: #8a8a8a; --c1: #2dd4bf; /* teal (main) */ --c2: #4d9fff; /* blue */ --c3: #3ddc84; /* green */ --c4: #ffc53d; /* amber (pop) */ --c5: #33d6f2; /* cyan */ --c6: #6aa7ff; /* sky blue */ --c7: #7ff0dd; /* light teal */ --shadow-col: #1f1f1f; /* subtle charcoal offset */ --screen: #000000; /* pure black playfield */ } [data-theme="synthwave"] { --bg: #081a26; --panel: #0f2a3a; --panel-2: #163c50; --ink: #e8f9ff; --ink-dim: #83b8cc; --c1: #22d3ee; /* neon cyan (main) */ --c2: #38bdf8; /* sky blue */ --c3: #34ff9e; /* neon green */ --c4: #ffd23f; /* yellow (pop) */ --c5: #06b6d4; /* cyan */ --c6: #3b82f6; /* blue */ --c7: #5eead4; /* teal */ --shadow-col: #22d3ee; /* neon cyan glow */ --screen: #04101a; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: var(--font-body); color: var(--ink); background-color: var(--bg); /* dotted grid */ background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px); background-size: 22px 22px; background-position: -11px -11px; } /* tone the dots down without an alpha colour token */ body::before { content: ""; position: fixed; inset: 0; background: var(--bg); opacity: .82; z-index: -1; pointer-events: none; } a { color: inherit; text-decoration: none; } .container { width: min(1140px, 92vw); margin: 0 auto; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 3px solid var(--ink); } .topbar .container { display: flex; align-items: center; gap: 14px; height: 70px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: .95rem; letter-spacing: 1px; } .brand .logo { width: 40px; height: 40px; display: grid; place-items: center; background: var(--c1); color: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-col); font-family: var(--font-display); font-size: 1rem; transform: rotate(-4deg); } .brand b { color: var(--c1); } .spacer { flex: 1; } .nav-link { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; padding: 6px 4px; border-bottom: 3px solid transparent; } .nav-link:hover { border-bottom-color: var(--c1); } /* theme toggle (injected by theme.js) + sound toggle (effects.js) */ .theme-toggle, .sound-toggle, .account-btn { font-family: var(--font-body); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; background: var(--panel); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-col); padding: 8px 12px; cursor: pointer; transition: transform .08s, box-shadow .08s; } .theme-toggle:hover, .sound-toggle:hover, .account-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow-col); } .theme-toggle:active, .sound-toggle:active, .account-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--shadow-col); } /* ---------- Marquee strip ---------- */ .marquee { background: var(--ink); color: var(--bg); border-bottom: 3px solid var(--ink); overflow: hidden; white-space: nowrap; } .marquee div { display: inline-block; padding: 9px 0; font-family: var(--font-display); font-size: .62rem; letter-spacing: 2px; animation: scroll 22s linear infinite; } .marquee span { padding: 0 26px; color: var(--c4); } .marquee span:nth-child(even) { color: var(--bg); } @keyframes scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } } /* ---------- Hero ---------- */ .hero { padding: 46px 0 14px; } .hero .kicker { display: inline-block; font-family: var(--font-display); font-size: .6rem; letter-spacing: 2px; background: var(--c4); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow-col); padding: 7px 10px; transform: rotate(-2deg); margin-bottom: 18px; } .hero h1 { margin: 0 0 16px; font-family: var(--font-display); font-size: clamp(1.4rem, 4.6vw, 3rem); line-height: 1.25; text-shadow: 5px 5px 0 var(--c1); max-width: 16ch; } .hero p { margin: 0; max-width: 52ch; font-size: 1.05rem; color: var(--ink-dim); } /* ---------- Controls ---------- */ .controls { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 34px 0 26px; } .search { flex: 1; min-width: 220px; max-width: 360px; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-col); padding: 11px 14px; } .search input { flex: 1; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 1rem; outline: none; } .search input::placeholder { color: var(--ink-dim); } .chips { display: flex; gap: 10px; flex-wrap: wrap; } .chip { font-family: var(--font-body); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; border: 3px solid var(--ink); background: var(--panel); color: var(--ink); padding: 9px 15px; cursor: pointer; box-shadow: 3px 3px 0 var(--shadow-col); transition: transform .08s, box-shadow .08s; } .chip:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--shadow-col); } .chip.active { background: var(--c1); color: #fff; } /* ---------- Game grid ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px; padding-bottom: 64px; } .card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow-col); overflow: hidden; color: inherit; transition: transform .12s ease, box-shadow .12s ease; /* staggered entrance — `translate` is a separate property from `transform`, so the per-card rotate() and hover transforms still apply cleanly */ animation: cardIn .42s cubic-bezier(.2, .8, .25, 1) both; animation-delay: var(--d, 0ms); } @keyframes cardIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } @media (prefers-reduced-motion: reduce) { .card { animation: none; } } .card:nth-child(odd) { transform: rotate(-1deg); } .card:nth-child(even) { transform: rotate(1deg); } .card:hover { transform: rotate(0) translate(-3px, -3px); box-shadow: 10px 10px 0 var(--shadow-col); } .card .thumb { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; border-bottom: 3px solid var(--ink); /* dark arcade "screen" with a subtle glow tinted by the game's colour */ background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--thumb, var(--c2)) 34%, #0d0a06), #0d0a06 78%); overflow: hidden; } .card .thumb::before { /* CRT scanlines + corner sheen */ content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px), radial-gradient(120% 85% at 20% 8%, rgba(255,255,255,.10), rgba(255,255,255,0) 55%); } .card .thumb svg { position: relative; width: 62%; height: 62%; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.45)); } .card .body { padding: 16px 18px 20px; } .card .body h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: .92rem; line-height: 1.4; } .card .body p { margin: 0; color: var(--ink-dim); font-size: .92rem; } .card .tag { position: absolute; top: 10px; right: 10px; font-family: var(--font-display); font-size: .5rem; letter-spacing: 1px; background: var(--ink); color: var(--bg); padding: 5px 7px; } .empty { grid-column: 1 / -1; text-align: center; color: var(--ink-dim); font-weight: 600; padding: 60px 0; } /* ---------- Footer ---------- */ .footer { border-top: 3px solid var(--ink); background: var(--panel); color: var(--ink-dim); font-weight: 600; font-size: .9rem; padding: 22px 0; text-align: center; } /* ========================================================= Game page shell ========================================================= */ .game-page { padding: 32px 0 64px; } .game-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; } .game-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 3.4vw, 1.5rem); text-shadow: 3px 3px 0 var(--c1); } .game-head .spacer { flex: 1; } .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; border: 3px solid var(--ink); background: var(--panel); color: var(--ink); box-shadow: 4px 4px 0 var(--shadow-col); padding: 11px 18px; cursor: pointer; transition: transform .08s, box-shadow .08s; } .btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--shadow-col); } .btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--shadow-col); } .btn.primary { background: var(--c1); color: #fff; } .game-stage { display: flex; flex-direction: column; align-items: center; gap: 20px; background: var(--panel); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--shadow-col); padding: 30px; } .scoreboard { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .stat { text-align: center; min-width: 96px; background: var(--panel-2); border: 3px solid var(--ink); padding: 10px 14px; } .stat .label { display: block; font-family: var(--font-body); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); margin-bottom: 6px; } .stat .value { font-family: var(--font-display); font-size: 1.3rem; color: var(--c1); } .hint { color: var(--ink-dim); font-size: .92rem; font-weight: 600; text-align: center; max-width: 50ch; } canvas { background: var(--screen); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--shadow-col); touch-action: none; max-width: 100%; } .banner { min-height: 1.4em; font-family: var(--font-display); font-size: .82rem; line-height: 1.5; text-align: center; color: var(--ink); } .banner.win { color: var(--c3); animation: winpop .5s cubic-bezier(.2, .9, .3, 1.5) both; } .banner.lose { color: var(--bad); animation: shake .42s ease both; } @keyframes winpop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } /* ========================================================= Extra "pop" — hover/entrance flourishes (site-wide) ========================================================= */ .hero, .game-stage { animation: rise .5s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .card .thumb svg { transition: transform .18s ease; } .card:hover .thumb svg { transform: scale(1.15) rotate(-5deg); } .card .tag { transition: transform .15s ease; } .card:hover .tag { transform: translateY(-2px) scale(1.05); } .brand .logo { transition: transform .16s ease; } .brand:hover .logo { transform: rotate(0) scale(1.1); } .btn.primary:hover { transform: translate(-1px, -2px) scale(1.03); } .chip.active { animation: chippop .2s ease; } @keyframes chippop { from { transform: scale(.88); } to { transform: scale(1); } } /* ---- daily challenge ---- */ .daily-card { display: flex; align-items: center; gap: 16px; margin: 26px 0 6px; padding: 14px 18px; background: var(--panel); border: 3px solid var(--c4); box-shadow: 6px 6px 0 var(--shadow-col); color: inherit; transition: transform .12s, box-shadow .12s; } .daily-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--shadow-col); color: inherit; } .daily-thumb { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 38%, #12303c, #060f14 78%); } .daily-thumb svg { width: 74%; height: 74%; } .daily-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .daily-kicker { font-family: var(--font-display); font-size: .55rem; letter-spacing: 1px; color: var(--c4); } .daily-title { font-family: var(--font-display); font-size: .95rem; } .daily-sub { color: var(--ink-dim); font-weight: 600; font-size: .8rem; } .daily-top { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: .74rem; color: var(--ink-dim); } .daily-go { flex: none; } @media (max-width: 640px) { .daily-card { flex-wrap: wrap; gap: 10px; padding: 12px; } .daily-top { display: none; } .daily-go { width: 100%; justify-content: center; } } .daily-badge { font-family: var(--font-display); font-size: .55rem; letter-spacing: 1px; background: var(--c4); color: #1a1200; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow-col); padding: 6px 8px; transform: rotate(-2deg); white-space: nowrap; } /* ---- achievement toast ---- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%); z-index: 10000; display: flex; align-items: center; gap: 13px; background: var(--panel); color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--shadow-col); padding: 12px 18px; max-width: 92vw; transition: transform .4s cubic-bezier(.2, .9, .3, 1.4); } .toast.show { transform: translate(-50%, 0); } .toast .toast-ico { font-size: 1.9rem; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--c4); } .toast .toast-txt b { display: block; font-family: var(--font-display); font-size: .56rem; letter-spacing: 1px; color: var(--c1); margin-bottom: 4px; } .toast .toast-txt span { font-weight: 700; } .toast.toast-big { border-color: var(--c1); box-shadow: 6px 6px 0 var(--c1); } .toast.toast-big .toast-ico { background: var(--c1); } .toast.toast-big .toast-txt b { color: var(--c3); } /* ---- account sign-in modal ---- */ .auth-modal { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; background: rgba(0, 0, 0, .55); padding: 16px; } .auth-card { position: relative; width: min(380px, 94vw); background: var(--panel); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--shadow-col); padding: 26px 24px; } .auth-card h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1rem; text-shadow: 3px 3px 0 var(--c1); } .auth-sub { margin: 0 0 18px; color: var(--ink-dim); font-size: .9rem; font-weight: 600; } .auth-card input { width: 100%; margin-bottom: 12px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; background: var(--panel-2); color: var(--ink); border: 3px solid var(--ink); padding: 12px 14px; outline: none; } .auth-err { color: var(--bad); font-weight: 700; font-size: .85rem; min-height: 1.2em; margin-bottom: 8px; } .auth-switch { margin: 14px 0 0; text-align: center; color: var(--ink-dim); font-weight: 600; font-size: .9rem; } .auth-switch a { color: var(--c1); font-weight: 700; } .auth-x { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: var(--ink-dim); font-size: 1.1rem; cursor: pointer; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .hero, .game-stage, .banner.win, .banner.lose, .chip.active { animation: none; } .card:hover .thumb svg, .card:hover .tag { transform: none; } } @media (max-width: 520px) { .game-stage { padding: 18px; } .stat { min-width: 80px; } } /* keep the top bar from overflowing on narrow phones: collapse the brand to its logo tile and tighten the nav */ @media (max-width: 640px) { .topbar .container { width: 94vw; gap: 8px; } .brand { font-size: 0; gap: 0; } /* hides wordmark, logo keeps its own size */ .nav-link { font-size: 1.05rem; letter-spacing: 0; padding: 6px 3px; } /* emoji-only nav */ .nav-link .lbl, .account-btn .lbl { display: none; } /* hide the words */ .theme-toggle, .sound-toggle, .account-btn { font-size: .58rem; padding: 7px 8px; gap: 4px; } .hide-narrow { display: none; } /* stack game headers so the title and controls don't crowd/overlap */ .game-page { padding: 18px 0 50px; } .game-head { gap: 10px; margin-bottom: 16px; } .game-head h1 { width: 100%; font-size: 1rem; } .game-head .spacer { display: none; } .game-head .modes, .game-head .durs, .game-head .diffs { width: 100%; } .game-head .modes .btn, .game-head .durs .btn, .game-head .diffs .btn { flex: 1; } .game-stage { padding: 16px 13px; gap: 14px; } .scoreboard { gap: 8px; } .stat { min-width: 66px; padding: 8px 10px; } .stat .value { font-size: 1.05rem; } .stat .label { font-size: .58rem; margin-bottom: 3px; } .hero { padding: 30px 0 6px; } .hero h1 { text-shadow: 4px 4px 0 var(--c1); } }