/* Chrono Cleavers web theme. Tokens are lifted from the game's game/utils/ui/theme.tres and
   game/ui/main_menu/main_menu.tscn; change them there first. */
@font-face {
  font-family: "Mago";
  src: url("/static/mago1.woff2?v=c3e4ad5c") format("woff2");
  font-display: swap;
}
:root {
  --bg: #050a0a;           /* menu dim colour, Color(0.02, 0.03, 0.04) */
  --panel: #1a1d22;        /* Panel style, Color(0.10, 0.11, 0.13) */
  --panel-hi: #272b31;     /* Button normal, Color(0.15, 0.17, 0.19) */
  --pressed: #007988;      /* Button pressed, Color(0, 0.475, 0.53) */
  --line: #00e5ff;         /* Button border, Color(0, 0.9, 1) */
  --line-dim: rgba(0, 229, 255, .28);
  --amber: #f2ba61;        /* titles and focus ring, Color(0.95, 0.73, 0.38) */
  --amber-fill: rgba(242, 186, 97, .16);
  --amber-hi: #ffdb99;     /* hover/focus text, Color(1, 0.86, 0.6) */
  --text: #f2e8d1;         /* pale title text, Color(0.95, 0.91, 0.82) */
  --muted: #a8bdc4;        /* subtitle text, Color(0.66, 0.74, 0.77) */
  --font: "Mago", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 var(--font);
  -webkit-font-smoothing: none;
  font-smooth: never;
}
main { flex: 1; outline: none; }
a { color: var(--amber); text-underline-offset: .2em; }
a:hover { color: var(--amber-hi); }
h1, h2 { margin: 0 0 .5rem; font-weight: normal; line-height: 1.15; color: var(--amber); }
h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.amber { color: var(--amber); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Focus ring: the game's 2px amber outline over a 16% amber fill. */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; background-color: var(--amber-fill); }

.skip { position: absolute; left: .5rem; top: -4rem; z-index: 10; padding: .5rem 1rem; background: var(--panel); border: 1px solid var(--line); }
.skip:focus { top: .5rem; }

.bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  padding: .75rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line-dim);
}
.brand { color: var(--text); text-decoration: none; font-size: 1.25rem; }
.brand:hover { color: var(--text); }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-block; padding: .5rem 0; min-height: 2.75rem; color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--amber-hi); border-bottom-color: var(--line-dim); }

.wrap { width: min(100% - 2rem, 60rem); margin-inline: auto; padding-block: 2rem; }
.narrow { max-width: 28rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.panel { display: block; margin: 0 0 1.5rem; padding: 1rem; background: var(--panel); border: 1px solid var(--line-dim); }
.panel > :last-child { margin-bottom: 0; }
.status { padding: .5rem .75rem; border-left: 2px solid var(--amber); color: var(--muted); }

/* The game sets every control label in capitals. */
h1, h2, .btn, .nav a, label, .hero .muted, .foot { text-transform: uppercase; }

/* Buttons: normal / hover / pressed / focus mirror Button styles in theme.tres. */
.btn {
  display: inline-block; min-height: 2.75rem; padding: .5rem 1.25rem;
  font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--panel-hi); border: 1px solid var(--line);
}
.btn:hover { color: var(--amber-hi); background: rgba(50, 50, 50, .6); }
.btn:active { background: var(--pressed); }
/* The game's focused button: amber border and text on the normal fill. */
.btn.primary { color: var(--amber-hi); border-color: var(--amber); border-width: 2px; padding-block: calc(.5rem - 1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Fields: the game's LineEdit is a bare underline. */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
label { display: block; margin: 0 0 .25rem; color: var(--muted); }
input {
  display: block; width: 100%; min-height: 2.75rem; margin: 0 0 1rem; padding: .5rem .25rem;
  font: inherit; color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-dim); border-radius: 0;
}
input:focus { border-bottom-color: var(--line); outline-offset: 0; }
input:disabled { opacity: .5; }

/* Home hero: the splash art under a 50% dim, with the splash title lock-up. */
.hero { position: relative; display: grid; place-items: center; min-height: min(80vh, 40rem); overflow: hidden; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: rgba(5, 8, 10, .5); }
.hero-body { position: relative; width: min(100% - 2rem, 20rem); padding-block: 2rem; text-align: center; }
.hero .title { margin: 0 0 .25rem; font-size: clamp(1.75rem, 8vw, 2rem); }
.menu { display: grid; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.menu .btn { display: block; }

.foot { padding: 1rem; text-align: center; color: var(--muted); border-top: 1px solid var(--line-dim); }
.foot p { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav a { transition: background-color .12s steps(3), color .12s steps(3); }
}
@media (forced-colors: active) {
  .btn, input, .panel { border-color: ButtonText; }
}

/* Recovery forms (#565): an error line, and the CAPTCHA widget's room. */
.status.error { border-left-color: #ff6b6b; color: var(--text); }
.cf-turnstile { min-height: 4.1rem; margin: 0 0 1rem; }

.downloads { max-width: 42rem; }
.release-meta { margin: 0 0 1rem; }
.release-meta dt { color: var(--muted); }
.release-meta dd { margin: 0 0 .75rem; }
.checksum { overflow-wrap: anywhere; }
.downloads pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.downloads ol { padding-left: 1.5rem; }
.downloads li { margin-bottom: .75rem; }

/* Lifetime stats (#567): counters wrap instead of truncating, however large. */
.stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin: 0 0 1.5rem; }
.stat { min-width: 0; padding: .5rem .75rem; border: 1px solid var(--line-dim); }
.stat dt { color: var(--muted); text-transform: uppercase; }
.stat dd { margin: 0; color: var(--amber-hi); font-size: 1.5rem; overflow-wrap: anywhere; }