/* AMPYR'S TOP 1% — shared tokens.
   No web fonts: the game must run with no internet. Bahnschrift ships with
   Windows 10/11; the stack falls back to DIN-style faces on Mac/iOS/Android. */
:root {
  --ink: #060B17;
  --navy: #0C1630;
  --navy-2: #13214A;
  --line: #273A66;
  --gold: #E9B949;
  --gold-deep: #B88A27;
  --gold-wash: rgba(233, 185, 73, 0.12);
  --blue: #5B9BFF;
  --blue-wash: rgba(91, 155, 255, 0.16);
  --white: #F3F5FA;
  --mute: #93A0BD;
  --out: #F07178;
  --ok: #7BD88F;
  --display: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --r-sm: 6px;
  --r-md: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(30, 58, 128, 0.45), transparent 70%),
    linear-gradient(180deg, var(--ink), #040812);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: 0.005em; margin: 0; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
p { line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Wordmark: the brand lockup. "1%" sits inside a thin gold ring. */
.wordmark { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--display); line-height: 1; }
.wordmark .wm-name { font-size: 0.7em; color: var(--white); letter-spacing: 0.08em; }
.wordmark .wm-top { font-weight: 700; color: var(--gold); letter-spacing: 0.02em; }
.wordmark .wm-ring {
  display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  border: 0.08em solid var(--gold); color: var(--gold); font-weight: 700; font-size: 0.62em;
}

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--navy-2); color: var(--white);
  border-radius: var(--r-sm); padding: 0.7em 1.1em; font-weight: 600; cursor: pointer;
  min-height: 44px; transition: background 120ms, border-color 120ms, transform 80ms;
}
.btn:hover:not(:disabled) { border-color: var(--blue); background: #182a5c; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1A1406; }
.btn-gold:hover:not(:disabled) { background: #F3C862; border-color: #F3C862; }
.btn-danger { border-color: rgba(240, 113, 120, 0.5); color: #FFC9CC; }
.btn-danger:hover:not(:disabled) { border-color: var(--out); background: rgba(240, 113, 120, 0.14); }
.btn-ghost { background: transparent; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.field { display: grid; gap: 6px; }
.field label { font-size: 0.85rem; color: var(--mute); font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; background: #0A1328; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.7em 0.8em; min-height: 46px; color: var(--white);
}
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-wash); }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.banner-offline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; text-align: center; padding: 8px;
  background: #3A1F0C; color: #FFD9A8; font-weight: 600; font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}