/* Bt10x Mono: subset of JuliaMono (SIL OFL 1.1), see web/fonts/OFL.txt.
   Regenerate with scripts/subset-juliamono.py. Hangul and anything outside
   unicode-range falls through to the system fonts below. */
@font-face {
  font-family: "Bt10x Mono";
  src: url("fonts/bt10x-mono-0.63.2-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+03A3, U+2000-200A, U+2010-2027, U+202F-205F, U+2190-2319, U+231C-2328, U+232B-23E8, U+23ED-23EF, U+23F1-23F2, U+23F4-23FF, U+2500-25FC, U+25FF-2613, U+2616-2647, U+2654-267E, U+2680-2692, U+2694-26A0, U+26A2-26A9, U+26AC-26BC, U+26BF-26C3, U+26C6-26CD, U+26CF-26D3, U+26D5-26E9, U+26EB-26F1, U+26F4, U+26F6-26F9, U+26FB-26FC, U+26FE-26FF, U+27C0-27FF, U+2900-2B1A, U+2B1D-2B4F, U+2B51-2B54, U+2B56-2B73, U+2B76-2BFF;
}
@font-face {
  font-family: "Bt10x Mono";
  src: url("fonts/bt10x-mono-0.63.2-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+03A3, U+2000-200A, U+2010-2027, U+202F-205F, U+2190-2319, U+231C-2328, U+232B-23E8, U+23ED-23EF, U+23F1-23F2, U+23F4-23FF, U+2500-25FC, U+25FF-2613, U+2616-2647, U+2654-267E, U+2680-2692, U+2694-26A0, U+26A2-26A9, U+26AC-26BC, U+26BF-26C3, U+26C6-26CD, U+26CF-26D3, U+26D5-26E9, U+26EB-26F1, U+26F4, U+26F6-26F9, U+26FB-26FC, U+26FE-26FF, U+27C0-27FF, U+2900-2B1A, U+2B1D-2B4F, U+2B51-2B54, U+2B56-2B73, U+2B76-2BFF;
}
:root {
  color-scheme: dark;
  /* Board rendering knobs (edit to restyle game boards only). */
  --mono-ff: "Bt10x Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --board-ff: var(--mono-ff);
  /* 1.175em = JuliaMono ascent + descent: block elements tile exactly. Must be
     a length (em), since it also sets row heights in the css-grid renderer. */
  --board-lh: 1.175em;
  --board-fs: 1em;
  --c-red: #e07a6a;
  --c-green: #8fd08f;
  --c-yellow: #d8c26a;
  --c-blue: #7aa7d8;
  --c-magenta: #c88fd0;
  --c-cyan: #6ac9c0;
  --c-white: #d7e4d7;
  --c-dim: #5a6a5a;
  --cb-red: #3a1712;
  --cb-green: #16301b;
  --cb-yellow: #383012;
  --cb-blue: #152838;
  --cb-magenta: #2e1a33;
  --cb-cyan: #12302e;
  --cb-white: #243024;
  --cb-dim: #161d16;
  /* Page chrome: background, body text, italic hints, rules and borders,
     button and panel fills. */
  --c-bg: #0c0f0c;
  --c-text: #b8c9b8;
  --c-hint: #b9c9b0;
  --c-line: #233023;
  --c-button: #1a1f1a;
  --c-panel: #0f140f;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--mono-ff);
  font-variant-ligatures: none;
  font-size: 13px;
  line-height: 1.175;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
@supports (height: 100dvh) {
  body {
    height: 100dvh;
  }
}
/* Scrollbars in the terminal palette: dark track, muted green thumb. */
html {
  scrollbar-color: var(--c-dim) var(--c-bg);
}
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-line);
  border-radius: 1px;
  border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-dim);
}
::-webkit-scrollbar-thumb:active {
  background: var(--c-green);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
#legal {
  flex: none;
  border-top: 1px solid var(--c-line);
  padding: 4px 12px 6px;
  font-size: 10px;
  color: var(--c-dim);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: pre;
}

.hint {
  color: var(--c-hint);
  font-style: italic;
}

/* Pages carry both locales; only the `<html lang>` match stays visible. The
   language buttons are exempt so both labels always show. */
:root:lang(en) :lang(ko):not(#lang button) {
  display: none;
}
:root:lang(ko) :lang(en):not(#lang button) {
  display: none;
}

.link-button {
  text-decoration: none;
  color: var(--c-green);
  background: var(--c-button);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 6px 12px;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
/* Hover, and the pressed / current / open states of toggles, tabs and
   disclosure buttons. */
.link-button:hover,
.link-button[aria-pressed="true"],
.link-button[aria-current="page"],
.link-button[aria-expanded="true"] {
  background-color: var(--cb-green);
  color: var(--c-white);
  border-color: var(--c-green);
}
.link-button:focus-visible {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 2px var(--cb-yellow);
}

/* Language toggle (landing, creator, gallery, 404). */
#lang {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
#lang button {
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}