/* Dark arcade theme — CSS custom properties for the entire app.
   All game pages link this file to inherit the theme automatically.
   Self-hosted font: Press Start 2P (OFL license, no CDN at runtime). */

@font-face {
  font-family: 'ArcadeFont';
  src: url('/fonts/arcade.woff2') format('woff2'),
       url('/fonts/arcade.ttf') format('truetype');
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Color palette — dark arcade */
  --color-bg:           #1a1a2e;
  --color-surface:      #16213e;
  --color-border:       #0f3460;
  --color-accent-teal:  #00d4aa;
  --color-accent-amber: #f5a623;
  --color-accent-red:   #e74c3c;
  --color-text:         #e0e0e0;
  --color-text-muted:   #888888;

  /* Typography */
  --font-primary:    'ArcadeFont', monospace;
  --font-size-base:  16px;
  --font-size-sm:    12px;
  --font-size-lg:    20px;

  /* Shell layout */
  --shell-top-bar-height:    56px;
  --shell-bottom-bar-height: 64px;
  --touch-target-min:        44px;

  /* Transitions */
  --transition-fast: 150ms ease;
}

html, body {
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

a {
  color: var(--color-accent-teal);
  text-decoration: none;
}