/* runforsomething.us site UI package.
   The house look for the site itself (homepage and any shared pages), taken
   from Open Borders: Press Start 2P for headings and buttons, VT323 for text,
   sky-and-gold palette, outlined panels with hard drop shadows.
   Individual games keep their own themes and don't load this file. */

@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/vt323.woff2") format("woff2");
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/press-start-2p.woff2") format("woff2");
}

:root {
  --bg: #BFE3F7; --bg2: #B2DCF3;
  --ink: #1E2A3A; --muted: #566277; --line: #1E2A3A; --shadow: #1E2A3A;
  --panel: #FFF8E1; --panel2: #FFEDB8; --paper: #FFFDF3; --grid: #EADFBF;
  --red: #E0483E; --blue: #2D6BD8; --green: #2E9E4F; --gold: #F5A623; --gold2: #FFD35C;
  --yellow: rgba(255,211,92,.75);
  --hud: #22395A; --hud2: #152841; --hudtx: #FFFFFF;
  --font-px: "Press Start 2P", ui-monospace, Menlo, monospace;
  --font-text: "VT323", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1A2B; --bg2: #0B1624;
    --ink: #EAF1F8; --muted: #9FB0C6; --line: #5A6E8E; --shadow: #04070C;
    --panel: #1B2638; --panel2: #243349; --paper: #131D2C; --grid: #2A3852;
    --red: #FF6B5E; --blue: #7EA8FF; --green: #5AD68F; --gold: #FFB938; --gold2: #FFD35C;
    --yellow: rgba(255,200,70,.32);
    --hud: #16263D; --hud2: #0A1321;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1A2B; --bg2: #0B1624;
  --ink: #EAF1F8; --muted: #9FB0C6; --line: #5A6E8E; --shadow: #04070C;
  --panel: #1B2638; --panel2: #243349; --paper: #131D2C; --grid: #2A3852;
  --red: #FF6B5E; --blue: #7EA8FF; --green: #5AD68F; --gold: #FFB938; --gold2: #FFD35C;
  --yellow: rgba(255,200,70,.32);
  --hud: #16263D; --hud2: #0A1321;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--bg);
  background-image:
    linear-gradient(45deg, var(--bg2) 25%, transparent 25%, transparent 75%, var(--bg2) 75%),
    linear-gradient(45deg, var(--bg2) 25%, transparent 25%, transparent 75%, var(--bg2) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  font-family: var(--font-text); font-size: 22px; line-height: 1.3;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.px { font-family: var(--font-px); font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.muted { color: var(--muted); }
mark, .hl { background: var(--yellow); color: inherit; padding: 0 3px; }

/* Top bar, the Open Borders HUD */
.rfs-bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--hud); color: var(--hudtx); border-bottom: 4px solid var(--hud2);
  padding-top: env(safe-area-inset-top, 0px);
}
.rfs-bar-in { max-width: 880px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rfs-mark { font-family: var(--font-px); font-size: 13px; color: var(--gold2); text-decoration: none; white-space: nowrap; }
@media (max-width: 420px) { .rfs-mark { font-size: 10px; } .rfs-bar-in { gap: 8px; } }

/* Panels and buttons */
.rfs-panel {
  background: var(--panel); border: 3px solid var(--line); border-radius: 6px;
  box-shadow: 0 5px 0 var(--shadow); padding: 16px;
}
.rfs-btn {
  display: inline-block; appearance: none; cursor: pointer; text-decoration: none; text-align: center;
  border: 3px solid var(--shadow); border-radius: 6px; background: var(--gold); color: #1E2A3A;
  font-family: var(--font-px); font-size: 13px; line-height: 1.3; padding: 14px 16px;
  box-shadow: 0 5px 0 var(--shadow), inset 0 -4px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.4);
  transition: transform .06s, box-shadow .06s;
}
.rfs-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--shadow), inset 0 -4px 0 rgba(0,0,0,.14); }
.rfs-mini {
  appearance: none; cursor: pointer; font-family: var(--font-px); font-size: 10px; line-height: 1;
  padding: 9px 10px; background: var(--gold2); color: #1E2A3A;
  border: 3px solid var(--shadow); border-radius: 5px; box-shadow: 0 3px 0 var(--shadow);
}
.rfs-mini:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .rfs-btn, .rfs-mini { transition: none; }
}