@font-face {
  font-family: 'Bitcount Prop Single';
  src: url('/assets/fonts/bitcount-prop-single.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url('/assets/fonts/geist-variable.woff2') format('woff2');
  font-weight: 400 750;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --arcade-bg: #151310;
  --arcade-panel: #211d17;
  --arcade-raised: #2b251d;
  --arcade-recess: #171511;
  --arcade-border: #4d3e2d;
  --arcade-border-bright: #806137;
  --arcade-text: #f5ead6;
  --arcade-muted: #beaf98;
  --arcade-gold: #ffd176;
  --arcade-gold-hover: #ffdf99;
  --arcade-green: #9de2b4;
  --arcade-error: #ffafa0;
  --arcade-display: 'Bitcount Prop Single', ui-monospace, monospace;
  --arcade-sans: Geist, system-ui, sans-serif;
  --arcade-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --arcade-shadow: 0 5px 0 #0e0d0b;
  --arcade-grid: linear-gradient(#eabc6810 1px, transparent 1px), linear-gradient(90deg, #eabc6810 1px, transparent 1px);
}

.arcade-shell { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.arcade-header { background: #1a1712; border-bottom: 1px solid var(--arcade-border); }
.arcade-header-inner { display: flex; align-items: center; min-height: 64px; gap: 38px; }
.arcade-brand { display: inline-flex; align-items: center; gap: 8px; font: 400 23px/1 var(--arcade-display); color: var(--arcade-text); text-decoration: none; }
.arcade-brand img { display: block; flex: none; image-rendering: pixelated; }
.brand-accent { color: var(--arcade-gold); }
.arcade-header nav { display: flex; align-items: stretch; gap: 25px; }
.arcade-header nav a, .nav-event { display: inline-flex; align-items: center; min-height: 48px; font: 500 13px/1.1 var(--arcade-mono); color: var(--arcade-muted); text-decoration: none; white-space: nowrap; }
.arcade-header nav a { position: relative; }
.arcade-header nav a:hover, .nav-event:hover, .arcade-header nav a[aria-current] { color: var(--arcade-gold); }
.arcade-header nav a[aria-current]::after { position: absolute; content: ''; inset: auto 0 2px; height: 2px; background: var(--arcade-gold); }
.nav-event { margin-left: auto; gap: 8px; }
.arcade-footer { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-block: 22px 30px; border-top: 1px solid var(--arcade-border); }
.arcade-footer .footer-brand { font-size: 17px; }
.arcade-footer p, .arcade-footer nav { color: var(--arcade-muted); font-size: 12px; }
.arcade-footer p { max-width: 53ch; }
.arcade-footer nav { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.arcade-footer nav a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .arcade-shell { width: calc(100% - 32px); }
  .arcade-header-inner { min-height: 55px; justify-content: space-between; gap: 7px; }
  .arcade-header .arcade-brand { font-size: clamp(16px, 5vw, 22px); gap: 4px; }
  .arcade-header .arcade-brand img { width: 32px; height: 32px; }
  .arcade-header nav { gap: clamp(9px, 3vw, 19px); }
  .arcade-header nav a { font-size: 12px; }
  .nav-event { display: none; }
  .arcade-footer { flex-wrap: wrap; }
}