/* games.css */
:root {
  --video-opacity: 0.5;
  --accent:        #a3e635;
  --muted:         #5a8a5a;
  --text:          #b0e0a0;
  --topbar-bg:     rgba(6,13,6,0.85);
  --topbar-border: rgba(163,230,53,0.1);
  --topbar-hover:  rgba(163,230,53,0.05);
}

body { font-family: 'Space Mono', monospace; background: #060d06; color: #b0e0a0; }

/* Background layers */
.bg-video    { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--video-opacity); }
.bg-overlay  { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(6,13,6,0.7), rgba(6,13,6,0.5) 40%, rgba(6,13,6,0.8) 80%, rgba(6,13,6,0.95)); }
.bg-scanlines{ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(163,230,53,0.015) 2px, rgba(163,230,53,0.015) 4px); }
.bg-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.5) 100%); }

/* Game rows */
.game        { display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; background: rgba(163,230,53,0.03); border: 1px solid rgba(163,230,53,0.08); border-radius: 4px; transition: border-color 0.15s; }
.game:hover  { border-color: rgba(163,230,53,0.3); }
.game-name   { font-size: 0.85rem; font-weight: 700; color: #b0e0a0; }
.game-name a { color: inherit; text-decoration: none; }
.game-note   { font-size: 0.7rem; color: #5a8a5a; margin-top: 0.15rem; }
.game-status { font-family: 'Press Start 2P', monospace; font-size: 0.4rem; color: #a3e635; padding: 0.2rem 0.5rem; border: 1px solid rgba(163,230,53,0.3); border-radius: 3px; white-space: nowrap; }

@media (max-width: 500px) { .game { grid-template-columns: 2rem 1fr auto; } }
@media (max-width: 768px) { html { font-size: 15px; } }