/* =========================================================================== Layover — pixel / "modern indie" theme Mobile-first, light/dark via [data-theme] on . Square edges, hard offset shadows, self-hosted pixel fonts. No trackers. ======================================================================== */ @font-face { font-family: "Press Start 2P"; src: url("/fonts/press-start-2p.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "VT323"; src: url("/fonts/vt323.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* warm cream "paper" light theme */ --bg: #f2e9d0; --bg-elev: #fbf6e9; --bg-soft: #e7dabb; --text: #26233a; --text-soft: #6f6885; --border: #26233a; --shadow: #26233a; --accent: #ef476f; --accent-text: #fff6ea; --accent2: #3a86ff; --accent3: #06d6a0; --accent4: #ffd166; --danger: #ef476f; --success: #06d6a0; --warning: #ffd166; --radius: 0px; /* pixel = no rounding */ --font-display: "Press Start 2P", "Courier New", monospace; --font-body: "VT323", "Courier New", monospace; --maxw: 960px; --shadow-hard: 4px 4px 0 0 var(--shadow); } [data-theme="dark"] { --bg: #1a1c2c; --bg-elev: #262a40; --bg-soft: #333856; --text: #f2e9d0; --text-soft: #9b96b8; --border: #0d0e18; --shadow: #0d0e18; --accent: #ff5d7a; --accent-text: #16101a; --accent2: #5b9bff; --accent3: #1ee0a8; --accent4: #ffd970; --danger: #ff5d7a; --success: #1ee0a8; --warning: #ffd970; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.35rem; /* VT323 has a small x-height */ background: var(--bg); /* subtle pixel-grid texture */ background-image: linear-gradient( color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px ), linear-gradient( 90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px ); background-size: 24px 24px; color: var(--text); line-height: 1.35; min-height: 100vh; min-height: 100dvh; transition: background-color 0.2s steps(2), color 0.2s steps(2); } a { color: var(--accent); text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.5; margin: 0 0 0.6em; text-transform: uppercase; } img, .pixelated { image-rendering: pixelated; } /* ---- Layout ---- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } .site-header { position: sticky; top: 0; z-index: 20; background: var(--bg-elev); border-bottom: 3px solid var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 12px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--text); text-transform: uppercase; } .brand .logo { font-size: 1.4rem; line-height: 1; } .header-spacer { flex: 1; } .back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.6rem; color: var(--text); border: 3px solid var(--border); background: var(--bg); box-shadow: 3px 3px 0 0 var(--shadow); padding: 8px 10px; text-transform: uppercase; } .back-link:hover { background: var(--accent); color: var(--accent-text); } .back-link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--shadow); } /* ---- Theme toggle / icon buttons ---- */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 3px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-size: 1.2rem; box-shadow: 3px 3px 0 0 var(--shadow); -webkit-tap-highlight-color: transparent; } .icon-btn:hover { background: var(--accent4); } .icon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--shadow); } /* ---- Buttons ---- */ .btn { appearance: none; border: 3px solid var(--border); background: var(--bg-elev); color: var(--text); font-family: var(--font-display); font-size: 0.7rem; line-height: 1.4; padding: 14px 18px; cursor: pointer; text-transform: uppercase; box-shadow: var(--shadow-hard); transition: transform 0.04s steps(1), box-shadow 0.04s steps(1); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--accent4); } .btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--shadow); } .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: var(--shadow-hard); transform: none; } .btn-primary { background: var(--accent); color: var(--accent-text); } .btn-primary:hover { background: var(--accent); filter: brightness(1.08); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ---- Cards / panels ---- */ .panel { background: var(--bg-elev); border: 3px solid var(--border); box-shadow: var(--shadow-hard); padding: 18px; } /* ---- Game page scaffold ---- */ .game-main { padding: 28px 0 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; } .game-title { text-align: center; } .game-title h1 { font-size: 1.1rem; margin-bottom: 12px; color: var(--accent); } .game-title p { margin: 0; color: var(--text-soft); font-size: 1.15rem; } /* ---- Stats row (arcade scoreboard) ---- */ .stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .stat { background: var(--bg-elev); border: 3px solid var(--border); box-shadow: var(--shadow-hard); padding: 12px 18px; text-align: center; min-width: 88px; } .stat .label { display: block; font-family: var(--font-display); font-size: 0.5rem; letter-spacing: 0.04em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 8px; } .stat .value { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--text); } /* ---- Homepage hero ---- */ .hero { text-align: center; padding: 44px 0 8px; } .hero h1 { font-size: clamp(1.4rem, 6vw, 2.4rem); color: var(--accent); /* hard pixel drop shadow on the wordmark */ text-shadow: 4px 4px 0 var(--shadow); margin-bottom: 18px; } .hero p { color: var(--text-soft); max-width: 460px; margin: 0 auto; font-size: 1.2rem; } /* ---- Homepage grid ---- */ .section-title { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; color: var(--text); margin: 30px 0 0; padding-bottom: 10px; border-bottom: 3px solid var(--border); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; padding: 18px 0 8px; } @media (min-width: 560px) { .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; } } .game-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: var(--bg-elev); border: 3px solid var(--border); box-shadow: var(--shadow-hard); color: var(--text); transition: transform 0.06s steps(1), box-shadow 0.06s steps(1), background-color 0.1s steps(2); } .game-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--shadow); background: var(--accent4); color: #26233a; } .game-card .emoji { font-size: 2.2rem; line-height: 1; width: 56px; height: 56px; display: grid; place-items: center; background: var(--bg-soft); border: 3px solid var(--border); margin-bottom: 6px; } .game-card:hover .emoji { background: var(--bg-elev); } .game-card h2 { font-size: 0.8rem; margin: 6px 0 4px; } .game-card p { margin: 0; font-size: 1.1rem; color: var(--text-soft); } .game-card:hover p { color: #26233a; } /* play-count badge (bottom-right of each tile) */ .game-card { position: relative; } .play-count { position: absolute; bottom: 8px; right: 8px; font-family: var(--font-display); font-size: 0.42rem; line-height: 1; color: var(--text-soft); background: var(--bg-soft); border: 2px solid var(--border); padding: 3px 5px; } .game-card:hover .play-count { background: var(--bg-elev); color: #26233a; } /* "Buy me a coffee" support link */ .support-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.5rem; text-transform: uppercase; border: 3px solid var(--border); background: var(--accent4); color: #26233a; box-shadow: 3px 3px 0 0 var(--shadow); padding: 9px 11px; } .support-link:hover { filter: brightness(1.05); } .support-link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--shadow); } /* ---- Featured "special" section (World Cup) ---- */ .special { margin: 22px 0 8px; border: 4px solid var(--border); box-shadow: var(--shadow-hard); background-color: #1f8a4c; background-image: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.07) 0 28px, transparent 28px 56px ); padding: 18px; } .special-head { text-align: center; margin-bottom: 16px; } .special-tag { display: inline-block; font-family: var(--font-display); font-size: 0.5rem; text-transform: uppercase; background: var(--accent4); color: #26233a; border: 3px solid var(--border); box-shadow: 3px 3px 0 0 var(--shadow); padding: 6px 10px; margin-bottom: 12px; } .special-head h2 { color: #fff; text-shadow: 3px 3px 0 #0a3d22; font-size: 1.1rem; margin: 6px 0; } .special-head p { margin: 0; color: #eafff0; font-size: 1.1rem; } .special-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 560px) { .special-grid { gap: 20px; } } /* widescreen trivia card spanning both columns */ .trivia-card { grid-column: 1 / -1; background: var(--bg-elev); border: 3px solid var(--border); box-shadow: var(--shadow-hard); padding: 16px 18px; text-align: center; } .trivia-tag { display: inline-block; font-family: var(--font-display); font-size: 0.45rem; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; } .trivia-q { margin: 0 0 6px; font-size: 1.25rem; color: var(--text); min-height: 1.4em; } .trivia-a { margin: 0 0 10px; font-family: var(--font-display); font-size: 0.8rem; color: var(--accent3); line-height: 1.5; } /* ---- Footer ---- */ .site-footer { padding: 28px 0 40px; text-align: center; color: var(--text-soft); font-size: 1.1rem; border-top: 3px solid var(--border); } .site-footer .badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; } .badge { background: var(--bg-elev); border: 3px solid var(--border); box-shadow: 3px 3px 0 0 var(--shadow); padding: 6px 12px; font-family: var(--font-display); font-size: 0.5rem; text-transform: uppercase; color: var(--text); } /* ---- Form controls ---- */ select.field { appearance: none; font-family: var(--font-display); font-size: 0.65rem; text-transform: uppercase; padding: 12px 36px 12px 14px; border: 3px solid var(--border); background: var(--bg-elev) url("data:image/svg+xml;utf8,") no-repeat right 12px center; color: var(--text); cursor: pointer; box-shadow: 3px 3px 0 0 var(--shadow); } /* ---- Utility ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .center { text-align: center; } .muted { color: var(--text-soft); } /* Disable double-tap-to-zoom on interactive controls (fixes mobile rotate zooming the page) while still allowing normal pinch-zoom on content. */ button, .btn, .back-link, .icon-btn, .game-card, select.field, .sq, .scell { touch-action: manipulation; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }