/* MiniGames — shared theme. Fast, system fonts, no external assets. * Light is the default; add data-theme="dark" on for dark mode. * All colors are CSS variables so both themes cascade to every game. */ :root { --bg: #eceff5; --bg-2: #ffffff; --bg-3: #e4e9f1; --fg: #1b2433; --fg-dim: #5a6678; --accent: #2f6fe0; --accent-2: #7a3ff0; --good: #128a54; --bad: #d33150; --warn: #b26a0c; --border: #d3dae6; --border-2: #e0e5ee; --border-hover: #b5c1d4; --hover-bg: #edf1f8; --canvas-bg: #e4e9f1; --overlay-bg: rgba(225, 230, 240, .72); --tag-online-border: #a6d9c0; --tag-ai-border: #e3cd97; --radius: 12px; --shadow: 0 6px 24px rgba(35, 50, 75, .13); } :root[data-theme="dark"] { --bg: #0b0e14; --bg-2: #121722; --bg-3: #1a2130; --fg: #e8ecf3; --fg-dim: #9aa5b5; --accent: #4f8cff; --accent-2: #9d5cff; --good: #3ddc84; --bad: #ff5470; --warn: #ffb347; --border: #2a3345; --border-2: #1f2634; --border-hover: #33405a; --hover-bg: #222b3d; --canvas-bg: #000000; --overlay-bg: rgba(5, 8, 14, .72); --tag-online-border: #1f4d38; --tag-ai-border: #4d3d1f; --shadow: 0 6px 24px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button, .btn { appearance: none; border: 1px solid var(--border); background: var(--bg-3); color: var(--fg); font: inherit; padding: .5rem 1rem; border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s, transform .06s; } button:hover, .btn:hover { background: var(--hover-bg); border-color: var(--border-hover); text-decoration: none; } button:active, .btn:active { transform: translateY(1px); } button.primary, .btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: #fff; font-weight: 600; } button.primary:hover, .btn.primary:hover { filter: brightness(1.08); } button:disabled { opacity: .45; cursor: default; } input, select { font: inherit; color: var(--fg); background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; } input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } /* ---------- Theme toggle (injected by theme.js) ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 999px; font-size: 1.05rem; line-height: 1; flex: none; background: var(--bg-3); border: 1px solid var(--border); color: var(--fg); cursor: pointer; } .theme-toggle:hover { background: var(--hover-bg); border-color: var(--border-hover); } .theme-toggle.floating { position: fixed; right: 14px; bottom: 14px; z-index: 100; box-shadow: var(--shadow); } /* ---------- Hub (index) ---------- */ .hub { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 4rem; } .hub-head { text-align: center; margin-bottom: 2rem; } .hub-head h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .5rem 0 .25rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hub-head p { color: var(--fg-dim); margin: 0; } .hub-tools { display: flex; gap: .75rem; justify-content: center; align-items: center; flex-wrap: wrap; margin: 1.25rem 0 1.75rem; } .hub-tools input[type="search"] { min-width: min(320px, 80vw); } #net-status { font-size: .85rem; color: var(--fg-dim); } #net-status.online { color: var(--good); } .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; } .game-card { display: flex; flex-direction: column; gap: .5rem; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 1.1rem 1.1rem 1rem; color: var(--fg); box-shadow: var(--shadow); transition: transform .12s, border-color .12s, box-shadow .12s; } .game-card:hover { transform: translateY(-3px); border-color: var(--border-hover); box-shadow: var(--shadow); text-decoration: none; } .game-card .icon { font-size: 2.2rem; line-height: 1; } .game-card h2 { font-size: 1.1rem; margin: 0; } .game-card p { margin: 0; font-size: .85rem; color: var(--fg-dim); flex: 1; } .tags { display: flex; gap: .35rem; flex-wrap: wrap; } .tag { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-dim); white-space: nowrap; } .tag.online { color: var(--good); border-color: var(--tag-online-border); } .tag.ai { color: var(--warn); border-color: var(--tag-ai-border); } .hub-foot { margin-top: 2.5rem; text-align: center; color: var(--fg-dim); font-size: .85rem; } .hub-foot code { background: var(--bg-3); padding: .1rem .4rem; border-radius: 6px; } /* ---------- Game pages ---------- */ body.game-page { display: flex; flex-direction: column; min-height: 100vh; } .topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--bg-2); border-bottom: 1px solid var(--border-2); flex: none; } .topbar .back { color: var(--fg-dim); font-size: .9rem; white-space: nowrap; } .topbar .back:hover { color: var(--fg); text-decoration: none; } .topbar h1 { font-size: 1.05rem; margin: 0; flex: 1; text-align: center; } .topbar-right { min-width: 90px; display: flex; gap: .5rem; justify-content: flex-end; align-items: center; font-size: .85rem; color: var(--fg-dim); } main#game { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; gap: 1rem; min-height: 0; } canvas.game-canvas { background: var(--canvas-bg); border-radius: 8px; max-width: 100%; touch-action: none; image-rendering: pixelated; } .hud { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; justify-content: center; color: var(--fg-dim); font-size: .95rem; } .hud b { color: var(--fg); } /* Menu / dialog panels used by games (mode select, game over, online lobby) */ .panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; max-width: 420px; width: 100%; display: flex; flex-direction: column; gap: .75rem; text-align: center; } .panel h2 { margin: 0 0 .25rem; } .panel .row { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; } .panel .note { font-size: .82rem; color: var(--fg-dim); } /* Back-to-home button used inside game popups */ .home-btn::before { content: "\1F3E0"; margin-right: .35rem; } .overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .hidden { display: none !important; } @media (max-width: 600px) { .topbar h1 { font-size: .95rem; } main#game { padding: .5rem; } }