/**
* oma-games — Shared CSS for all pages (v2: content-forward redesign, 2026-08-09).
*
* See DESIGN.md (project root) for the full design system.
*
* Aesthetic: refined dark, hairline borders, single warm-orange accent.
* INSPIRED BY Steam / Netflix / Spotify / Linear content-forward model.
* EXPLICITLY REJECTS neon-arcade / cyberpunk-grid / synthwave maximalism
* (those read as AI-generated per smoothui.dev/blog/ai-design-slop).
*
* Usage:
*/
/* ===== Reset ===== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text-primary);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv11', 'ss01', 'ss03';
transition: background-color 0.25s ease, color 0.25s ease;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: none;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* ===== Brand tokens (v2 — single source of truth) ===== */
:root {
/* Surface ramp (warm off-black, never pure #000) */
--bg: #0E0E10;
--bg-elevated: #16161A;
--bg-hover: #1D1D22;
--bg-active: #232328;
/* Borders (hairline) */
--border: #232328;
--border-strong: #38383F;
--border-accent: var(--accent);
/* Text ramp */
--text-primary: #E8E8EA;
--text-secondary: #9A9AA2;
--text-dim: #5C5C62;
/* Brand accent (single site-wide color) */
--accent: #E85D3C;
--accent-hover: #F17352;
--accent-pressed: #C94A2B;
--accent-contrast: #0E0E10;
/* Event colors (semantic, used sparingly) */
--danger: #E54848;
--success: #3EC47B;
--warning: #E8B43C;
/* Spacing ramp (4-base) */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-4xl: 64px;
/* Radius (semantic) */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-pill: 9999px;
/* Motion (one quiet language) */
--ease-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
--ease-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
--ease-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
/* Container widths */
--container-max: 1280px;
--container-wide: 1440px;
/* Layout aliases */
--panel-pad: 20px;
--hud-pad: 12px;
/* Per-game accent slots (override --accent via class on /) */
--accent-tank: #A47535;
--accent-snake: #3EC47B;
--accent-pong: #E8E8EA;
--accent-dino: #A8895C;
--accent-space-invaders: #5FB85F;
--accent-gomoku: #A47535;
--accent-minesweeper: #7C9FB8;
--accent-tower-climb: #D4682C;
--accent-breakout: #C83A8A;
--accent-2048: #EDC53F;
--accent-gold-miner: #D4A017;
--accent-angry-birds: #D22424;
--accent-fireboy-watergirl: #EE6C4F;
--accent-typhoon: #5CC8FF;
/* Header (sticky) */
--header-height: 56px;
}
[data-theme='light'] {
--bg: #FAFAF8;
--bg-elevated: #FFFFFF;
--bg-hover: #F0F0EE;
--bg-active: #E5E5E1;
--border: #E0E0DC;
--border-strong: #C0C0BC;
--text-primary: #1A1A1F;
--text-secondary: #5C5C62;
--text-dim: #9A9AA2;
--accent: #C94A2B;
--accent-hover: #B33E22;
--accent-pressed: #8E3219;
--accent-contrast: #FFFFFF;
--danger: #C73838;
--success: #2E9E5F;
--warning: #B8841C;
/* Per-game accents slightly darkened for accessibility on light */
--accent-tank: #7A5828;
--accent-snake: #2E9E5F;
--accent-pong: #5C5C62;
--accent-dino: #7A6042;
--accent-space-invaders: #3E8E3E;
--accent-gomoku: #7A5828;
--accent-minesweeper: #4A6E88;
--accent-tower-climb: #A04E1F;
--accent-breakout: #9C2C6A;
--accent-2048: #B8901F;
--accent-gold-miner: #A07812;
--accent-angry-birds: #9E1C1C;
--accent-fireboy-watergirl: #B04A30;
--accent-typhoon: #2E8CC2;
}
/* Per-game accent rebinders — apply via class on */
.game-tank { --accent: var(--accent-tank); }
.game-snake { --accent: var(--accent-snake); }
.game-pong { --accent: var(--accent-pong); }
.game-dino { --accent: var(--accent-dino); }
.game-space-invaders { --accent: var(--accent-space-invaders); }
.game-gomoku { --accent: var(--accent-gomoku); }
.game-minesweeper { --accent: var(--accent-minesweeper); }
.game-tower-climb { --accent: var(--accent-tower-climb); }
.game-breakout { --accent: var(--accent-breakout); }
.game-2048 { --accent: var(--accent-2048); }
.game-gold-miner { --accent: var(--accent-gold-miner); }
.game-angry-birds { --accent: var(--accent-angry-birds); }
.game-fireboy-watergirl { --accent: var(--accent-fireboy-watergirl); }
.game-typhoon { --accent: var(--accent-typhoon); }
/* ===== Page containers ===== */
.oma-page-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-xl);
}
.oma-page-container--wide {
max-width: var(--container-wide);
}
/* ===== Page header (sticky brand header) ===== */
.oma-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(14, 14, 16, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
[data-theme='light'] .oma-header {
background: rgba(250, 250, 248, 0.85);
}
/* Transparent variant — used on detail pages so the hero gets visual priority.
* Apple TV+/Netflix pattern: navbar recedes but stays functional.
* Additive: only overrides background + border, inherits position/z-index. */
.oma-header--transparent {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
}
/* When navbar is transparent AND user has scrolled, content goes under it.
* Use a subtle gradient mask on body to keep navbar readable.
* Apply via .has-transparent-header class on or . */
.has-transparent-header {
/* No body bg change — body is already dark; navbar text stays legible */
}
/* Scroll-aware version (optional): toggle .is-scrolled on via JS
* to bring back bg + border once user scrolls past hero. */
.oma-header--transparent.is-scrolled {
background: rgba(14, 14, 16, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
[data-theme='light'] .oma-header--transparent.is-scrolled {
background: rgba(250, 250, 248, 0.85);
}
.oma-header-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: var(--space-md) var(--space-2xl);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-xl);
}
.oma-logo {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-primary);
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
}
.oma-logo-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--bg-elevated);
color: var(--accent);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 14px;
}
.oma-nav {
display: flex;
gap: var(--space-lg);
align-items: center;
}
.oma-nav a {
color: var(--text-secondary);
font-size: 14px;
font-weight: 500;
transition: color var(--ease-fast);
}
.oma-nav a:hover {
color: var(--text-primary);
}
.oma-header-controls {
display: flex;
gap: var(--space-sm);
}
/* ===== Icon button (header chrome) ===== */
.oma-icon-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 500;
transition: color var(--ease-fast), border-color var(--ease-fast),
background-color var(--ease-fast);
}
.oma-icon-btn:hover {
color: var(--text-primary);
border-color: var(--border-strong);
background: var(--bg-hover);
}
/* ===== Focus ring (real, accessible) ===== */
*:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ===== Game layout (two-column) ===== */
.oma-game-layout {
display: flex;
gap: var(--space-xl);
align-items: flex-start;
position: relative;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-xl) var(--space-xl) var(--space-2xl);
}
.oma-game-area {
flex: 1 1 auto;
min-width: 0;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.oma-config-panel {
flex: 0 0 320px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--panel-pad);
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
@media (max-width: 900px) {
.oma-game-layout {
flex-direction: column;
padding: var(--space-lg) var(--space-md);
}
.oma-config-panel {
flex: 0 0 auto;
width: 100%;
}
}
/* ===== HUD strip (in-game) ===== */
.oma-hud {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.oma-hud-block {
display: flex;
flex-direction: column;
gap: 2px;
}
.oma-hud-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
}
.oma-hud-value {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
font-weight: 600;
line-height: 1.1;
color: var(--accent);
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1;
transition: color var(--ease-fast);
}
/* ===== Config panel internals ===== */
.oma-panel-title {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-primary);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border);
}
.oma-panel-subtitle {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: -8px;
margin-bottom: var(--space-md);
}
.oma-config-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.oma-config-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.oma-config-hint {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--text-dim);
margin-top: 2px;
line-height: 1.4;
}
/* ===== Difficulty button group ===== */
.oma-diff-group {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.oma-diff-btn {
flex: 1;
padding: 10px 14px;
background: transparent;
color: var(--text-secondary);
border: none;
border-right: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--ease-fast), color var(--ease-fast);
}
.oma-diff-btn:last-child {
border-right: none;
}
.oma-diff-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.oma-diff-btn.active {
background: var(--accent);
color: var(--accent-contrast);
}
/* ===== Count stepper (− input +) ===== */
.oma-count {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.oma-count-btn {
width: 36px;
height: 36px;
background: transparent;
color: var(--text-secondary);
border: none;
border-right: 1px solid var(--border);
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
transition: background-color var(--ease-fast), color var(--ease-fast);
}
.oma-count-btn:last-child {
border-right: none;
}
.oma-count-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.oma-count-input {
width: 56px;
height: 36px;
text-align: center;
background: transparent;
border: none;
border-right: 1px solid var(--border);
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 600;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.oma-count-input::-webkit-outer-spin-button,
.oma-count-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ===== Primary button ===== */
.oma-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 12px var(--space-xl);
background: var(--accent);
color: var(--accent-contrast);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
cursor: pointer;
transition: background-color var(--ease-fast), border-color var(--ease-fast),
transform var(--ease-fast);
text-decoration: none;
}
.oma-btn-primary:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
.oma-btn-primary:active {
background: var(--accent-pressed);
border-color: var(--accent-pressed);
}
.oma-btn-primary:disabled {
background: var(--bg-active);
color: var(--text-dim);
border-color: var(--border);
cursor: not-allowed;
}
/* ===== Secondary button ===== */
.oma-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 10px var(--space-lg);
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color var(--ease-fast), border-color var(--ease-fast);
text-decoration: none;
}
.oma-btn-secondary:hover {
background: var(--bg-hover);
border-color: var(--text-dim);
}
/* ===== Keyboard key cap ===== */
.oma-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 6px;
background: var(--bg);
color: var(--text-primary);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
line-height: 1;
}
/* ===== Tag (small chip) ===== */
.oma-tag {
display: inline-flex;
align-items: center;
padding: 3px var(--space-sm);
background: var(--bg);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.oma-tag--accent {
color: var(--accent);
border-color: var(--accent);
}
/* ===== Canvas frame (focal point of game page) ===== */
.oma-canvas-frame {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
padding: var(--space-md);
}
.oma-canvas-frame canvas {
display: block;
max-width: 100%;
height: auto;
}
/* ===== Cards (game cards on landing, animation hub) ===== */
.oma-card {
display: block;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: background-color var(--ease-base), border-color var(--ease-base);
}
.oma-card:hover {
background: var(--bg-hover);
border-color: var(--border-strong);
}
.oma-card-thumb {
aspect-ratio: 16 / 9;
background: var(--bg);
overflow: hidden;
position: relative;
}
.oma-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.oma-card-content {
padding: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.oma-card-title {
font-family: 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--text-primary);
}
.oma-card-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
}
.oma-card-desc {
font-family: 'Inter', sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
/* ===== Inline icon (Lucide SVG) ===== */
.oma-icon {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.oma-icon--sm { width: 14px; height: 14px; }
.oma-icon--lg { width: 24px; height: 24px; }
/* ===== Stat grid (used in config panels) ===== */
.oma-stat-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-xs) var(--space-md);
padding: var(--space-md);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.oma-stat-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
}
.oma-stat-value {
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ===== Section heading ===== */
.oma-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--space-xl);
padding-bottom: var(--space-md);
border-bottom: 1px solid var(--border);
}
.oma-section-title {
font-family: 'Inter', sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.oma-section-meta {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-dim);
}
/* ===== Utility ===== */
.oma-mono { font-family: 'JetBrains Mono', monospace; }
.oma-tabular { font-variant-numeric: tabular-nums; }
.oma-dim { color: var(--text-dim); }
.oma-muted { color: var(--text-secondary); }