/* bhd-ars base styles. Tokens follow the game's HTML layer (game/src/ui/styles.css); values copied, not imported.
   No inline styles anywhere (CSP style-src 'self'). Phones must read at 320 px wide. */
/* Self-hosted fonts (SIL OFL 1.1; licences in /fonts/OFL-*.txt). Copied byte-identical from the game's
   @fontsource packages (5.3.0), latin subset only. No Google Fonts request, so no phone IP goes to Google. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
}
:root {
  --bg: #10141f;
  --bg-2: #171d2c;
  --ink: #f4efe2;
  --ink-2: #c9cfdc;
  --gold: #e8c15a;
  --focus: #ffd166;
  --btn-ink: #1d2547;
  --tap: 56px;
  --font-ui: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.45;
  min-height: 100vh;
}
main { max-width: 40rem; margin: 0 auto; padding: 16px; }
h1 { font-family: var(--font-pixel); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--gold); }
a { color: var(--gold); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* dialogue frame (game: dlg-a-blue 9-slice) */
.frame {
  border: 12px solid transparent;
  border-image: url('/art/dlg-a-blue-9s.png') 36 fill / 12px stretch;
  padding: 8px 12px;
  margin: 16px 0;
}
.frame-gold { border-image: url('/art/dlg-a-gold-9s.png') 40 fill / 13px stretch; border-width: 13px; }

/* cream choice button (game: btn-choice 9-slice states) */
.btn {
  display: block;
  width: 100%;
  min-height: var(--tap);
  margin: 10px 0;
  padding: 8px 14px;
  border: 14px solid transparent;
  border-width: 14px 14px 16px 14px;
  border-image: url('/art/btn-choice-normal-9s.png') 44 fill / 14px 14px 16px 14px stretch;
  background: none;
  color: var(--btn-ink);
  font: 700 18px/1.3 var(--font-ui);
  text-align: left;
  cursor: pointer;
}
.btn:hover { border-image-source: url('/art/btn-choice-hover-9s.png'); }
.btn:active, .btn[aria-pressed='true'] { border-image-source: url('/art/btn-choice-pressed-9s.png'); }
.btn:disabled { border-image-source: url('/art/btn-choice-disabled-9s.png'); color: #4b4f6e; cursor: default; }

label { display: block; margin: 12px 0 4px; }
input[type='text'] {
  width: 100%;
  min-height: var(--tap);
  font: 700 28px/1 var(--font-pixel);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 12px;
  background: var(--bg-2);
  color: var(--ink);
  border: 2px solid var(--ink-2);
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }