@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
/*
* buildstarted.games — Design System
* ====================================
* Single source of truth for color, typography, layout, and components.
* Every game imports this file and then adds only game-specific overrides.
*
* Table of contents
* -----------------
* 1. Tokens (CSS variables)
* 2. Reset
* 3. Base layout (body → header → board-wrap → controls)
* 4. Header
* 5. HUD
* 6. Board wrap
* 7. Controls bar
* 8. Game buttons
* 9. Dialog / new-game modal
* 10. Result panel (slide-up)
* 11. Stat cards
* 12. Primary & secondary buttons
* 13. Animations & keyframes
* 14. Utility
*/
/* ─────────────────────────────────────────────────────────────────────────────
1. Tokens
───────────────────────────────────────────────────────────────────────────── */
:root {
/* Brand blues — used for header, controls bar, primary buttons, active cells */
--color-blue: #3b88c3;
--color-blue-dark: #3272a3;
/* Semantic state colors */
--color-win: #28a745; /* success / win */
--color-win-dark: #1e7035;
--color-loss: #d94040; /* error / mine hit / loss */
--color-loss-dark: #a82020;
--color-warn: #ffc107; /* caution / hint */
/* Surface & background */
--color-bg: #f0f0f0; /* light surface wash (pads, chips) — NOT the page */
--color-surface: #ffffff; /* card / panel / dialog surface */
/* Page backdrop — deep blue gradient every game floats on */
--color-deep-1: #2c5f8f;
--color-deep-2: #1c4066;
--color-deep-3: #122b45;
--bg-page: radial-gradient(120% 90% at 50% 0%, var(--color-deep-1) 0%, var(--color-deep-2) 48%, var(--color-deep-3) 100%);
/* Light text for anything sitting directly on the backdrop */
--color-text-on-deep: #e9f1f7;
--color-text-on-deep-soft: rgba(233,241,247,.65);
/* Text */
--color-text: #1c2d3a; /* primary text */
--color-text-soft: #888888; /* secondary / label text */
/* Borders */
--color-border: #e0e0e0;
--color-border-mid:#cccccc;
/* Elevation — box-shadow presets */
--shadow-sm: 0 2px 5px rgba(0,0,0,.18);
--shadow-md: 0 4px 14px rgba(0,0,0,.18);
--shadow-card: 0 4px 14px rgba(50,114,163,.40), inset 0 1px 0 rgba(255,255,255,.15);
--shadow-up: 0 -4px 24px rgba(0,0,0,.18); /* slide-up panel */
/* Typography — emoji/symbol fonts stay in the stack so glyphs like
🚩 ⚑ ⏱ ⚓ ✕ never dead-end in the webfont */
--font: 'Nunito', 'Segoe UI', system-ui, -apple-system,
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
/* For icon-only elements: symbol fonts first so pictographs win */
--font-symbols: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', var(--font);
/* Radii */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
}
/* ─────────────────────────────────────────────────────────────────────────────
2. Reset
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
3. Base layout
─────────────────────────────────────────────────────────────────────────────
Every game uses a full-viewport flex column:
…… ← flex: 1, scrollable
…
← result panel, fixed bottom
───────────────────────────────────────────────────────────────────────────── */
body {
background: var(--color-deep-3);
background-image: var(--bg-page);
display: flex;
flex-direction: column;
font-family: var(--font);
height: 100dvh;
overflow: hidden;
user-select: none;
}
/* ─────────────────────────────────────────────────────────────────────────────
4. Header
─────────────────────────────────────────────────────────────────────────────
Blue bar at the top. Contains game title (left) and HUD (right).