/* =========================================================================== Theme tokens. "Dark" (grayscale) is the default and "Light" is its direct inversion - these two are always visible in the header. Everything else (Midnight/Vault/Paper) is a secondary, colored option tucked under the "..." menu. theme.js swaps the `data-theme` attribute on and persists the choice. =========================================================================== */ :root, :root[data-theme="dark"] { --font-sans: "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Cascadia Mono", "Consolas", ui-monospace, "SFMono-Regular", Menlo, monospace; --radius: 8px; --radius-lg: 14px; --bg: #0a0a0a; --bg-elevated: #151515; --bg-card: #1e1e1e; --border: #363636; --text: #eeeeee; --text-dim: #98989a; --accent: #e8e8e8; --accent-dim: #3a3a3a; --on-accent: #0a0a0a; --green: #8fd0a8; --on-green: #08170f; --yellow: #d0c98f; --orange: #d0ac8f; --red: #d09a9a; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { --bg: #f1f1f1; --bg-elevated: #f8f8f8; --bg-card: #ffffff; --border: #dcdcdc; --text: #161616; --text-dim: #6c6c6c; --accent: #1a1a1a; --accent-dim: #d8d8d8; --on-accent: #f5f5f5; --green: #1f8f5f; --on-green: #f2fbf6; --yellow: #93690a; --orange: #ad5a19; --red: #b23a3a; --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.1); --shadow-md: 0 10px 28px rgba(20, 20, 20, 0.14); } :root[data-theme="paper"] { --bg: #eeece3; --bg-elevated: #f8f7f2; --bg-card: #ffffff; --border: #d5cfbd; --text: #201f1a; --text-dim: #66604f; --accent: #3654cf; --accent-dim: #ccd4f4; --on-accent: #f5f6fd; --green: #1f8f5f; --on-green: #f2fbf6; --yellow: #93690a; --orange: #ad5a19; --red: #b23a3a; --shadow-sm: 0 1px 3px rgba(40, 35, 20, 0.1); --shadow-md: 0 10px 28px rgba(40, 35, 20, 0.14); } :root[data-theme="vault"] { --bg: #120d08; --bg-elevated: #1b140c; --bg-card: #261c11; --border: #43301a; --text: #f0e4cc; --text-dim: #b3a181; --accent: #e0a83a; --accent-dim: #4a3b1c; --on-accent: #1a1206; --green: #8bb054; --on-green: #0c1607; --yellow: #e0a83a; --orange: #d9813c; --red: #cf5b45; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.55); } :root[data-theme="midnight"] { --bg: #0d0f16; --bg-elevated: #141826; --bg-card: #1b2032; --border: #2c3346; --text: #e7e9f0; --text-dim: #949ab0; --accent: #6c8cff; --accent-dim: #2c3660; --on-accent: #0a0c12; --green: #49c290; --on-green: #06180f; --yellow: #d9b84f; --orange: #d9904f; --red: #de6068; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45); } /* =========================================================================== Base =========================================================================== */ * { box-sizing: border-box; } /* Belt-and-suspenders: the native `hidden` attribute must always win over any component's own `display` rule, no matter its selector specificity. */ [hidden] { display: none !important; } html { color-scheme: light dark; height: 100%; } body { margin: 0; color: var(--text); font-family: var(--font-sans); height: 100%; display: flex; flex-direction: column; background: radial-gradient(1100px 550px at 50% -14%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 65%), var(--bg); transition: background-color 0.2s ease; } a { color: var(--accent); } h1, h2, h3 { font-weight: 700; letter-spacing: 0.2px; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } button { font-family: inherit; } .btn { display: inline-block; font: inherit; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; text-decoration: none; transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease; } .btn:hover:not(:disabled) { border-color: var(--accent); } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost { background: transparent; } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); } /* =========================================================================== Shared site bar (title + theme picker + sound toggle), used on every page =========================================================================== */ .site-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 32px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .site-bar-title h1 { margin: 0 0 4px; font-size: 1.5rem; } .site-bar-title p { margin: 0; color: var(--text-dim); font-size: 0.92rem; } .back-link { font-size: 0.8rem; text-decoration: none; color: var(--text-dim); transition: color 0.15s ease; } .back-link:hover { color: var(--accent); } .nav-link { display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .nav-link:hover { border-color: var(--accent); color: var(--accent); } .nav-link:active { transform: scale(0.96); } .game-title { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .game-title-icon { width: 34px; height: 34px; flex-shrink: 0; } .game-title h1 { margin: 0; } .site-bar-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; font-size: 1rem; padding: 0; transition: border-color 0.15s ease, transform 0.15s ease; } .icon-btn:hover { border-color: var(--accent); } .icon-btn:active { transform: scale(0.92); } .theme-picker { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .theme-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--swatch-bg); box-shadow: inset 0 0 0 1px var(--border); transition: transform 0.15s ease, border-color 0.15s ease; } .theme-swatch:hover { transform: scale(1.15); } .theme-swatch[aria-pressed="true"] { border-color: var(--text-dim); } .theme-more-wrap { position: relative; } .theme-more-btn { font-size: 1.2rem; line-height: 1; color: var(--text-dim); letter-spacing: -1px; } .theme-more-btn.active { border-color: var(--accent); color: var(--accent); } .theme-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 150px; z-index: 50; } .theme-menu[hidden] { display: none; } .theme-menu-item { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: calc(var(--radius) - 2px); padding: 7px 10px; font: inherit; font-size: 0.85rem; color: var(--text); cursor: pointer; text-align: left; } .theme-menu-item:hover { background: var(--bg-elevated); } .theme-menu-item .theme-swatch { pointer-events: none; width: 16px; height: 16px; flex-shrink: 0; } /* =========================================================================== Landing page =========================================================================== */ .game-grid { flex: 1; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 30px 32px; } .game-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: var(--text); display: block; box-shadow: var(--shadow-sm); transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .game-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-md); } .game-card .card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .game-card .card-top img { width: 36px; height: 36px; } .game-card h2 { margin: 0; font-size: 1.15rem; } .game-card p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; } .game-card .tag { display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 999px; padding: 3px 10px; } .game-card .tag.tag-muted { color: var(--text-dim); border-color: var(--border); } .play-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 5px 12px; } .game-card-disabled { background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: none; cursor: default; } .game-card-disabled:hover { transform: none; border-color: var(--border); box-shadow: none; } .game-card-disabled h2, .game-card-disabled p { color: var(--text-dim); } .card-icon-placeholder { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--border); border-radius: 50%; color: var(--text-dim); font-size: 1.1rem; } /* =========================================================================== Site footer: a plain centered bottom bar, landing page only. =========================================================================== */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-elevated); padding: 12px 32px; } .footer-inner { max-width: 640px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; text-align: center; } .footer-legal, .footer-credits { margin: 0; font-size: 0.8rem; color: var(--text-dim); line-height: 1.4; } .footer-legal::after, .footer-credits::after { content: "\2022"; margin-left: 8px; color: var(--border); } .footer-fine-print { margin: 0; font-size: 0.8rem; color: var(--text-dim); } /* =========================================================================== Accordion (used by the Q&A page) =========================================================================== */ .page-content { max-width: 640px; margin: 0 auto; width: 100%; padding: 30px 32px 60px; } .page-content > p { color: var(--text-dim); line-height: 1.55; } .accordion-list details { border-top: 1px solid var(--border); padding: 12px 0; } .accordion-list details:last-child { padding-bottom: 0; } .accordion-list summary { cursor: pointer; font-size: 0.95rem; font-weight: 600; color: var(--text); list-style: none; } .accordion-list summary::-webkit-details-marker { display: none; } .accordion-list summary::before { content: "+"; display: inline-block; width: 16px; color: var(--accent); font-weight: 700; } .accordion-list details[open] summary::before { content: "\2212"; } .accordion-list details p { margin: 8px 0 0 24px; color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }