@font-face {
  font-family: "Press Start 2P";
  src: url("/assets/PressStart2P.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172554;
  background: #4ec0ca;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
a { color: #075985; }
a:focus-visible, button:focus-visible { outline: 3px solid #facc15; outline-offset: 3px; }

.game-page { overflow: hidden; touch-action: manipulation; }
#canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
.difficulty, #modes, .site-nav { position: fixed; z-index: 2; }
.difficulty { top: 10px; left: 10px; display: flex; gap: 6px; }
#modes { top: 48px; left: 10px; }
.option, .mode {
  min-height: 32px;
  border: 2px solid #0f3d8f;
  border-radius: 6px;
  padding: 6px 9px;
  font: 9px/1.2 "Press Start 2P", monospace;
  color: #172554;
  background: rgba(255, 255, 255, .88);
  cursor: pointer;
}
.option:hover, .mode:hover { background: #fff; }
.site-nav {
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-size: 13px;
}
.site-nav a { text-decoration: none; }

.content-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 32px 16px;
  background: linear-gradient(#4ec0ca, #dff7dc);
}
.content-card {
  width: min(92vw, 720px);
  padding: clamp(24px, 5vw, 48px);
  border: 3px solid #172554;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 0 rgba(23, 37, 84, .18);
}
.content-card h1 { margin-top: 0; font-family: "Press Start 2P", monospace; font-size: clamp(20px, 4vw, 34px); line-height: 1.35; }
.content-card p, .content-card li { line-height: 1.7; }
.text-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.text-nav a { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
