/* Base tokens shared by the landing page and both games. Only tokens + the
   handful of primitives that would otherwise be copy-pasted twice. Each game
   keeps its own style.css for anything with personality. */

:root {
  --bg:        #0b0d10;
  --bg-panel:  #13171d;
  --bg-raise:  #1b212a;
  --line:      #2a323e;
  --line-hot:  #3c4a5c;
  --fg:        #d8dee8;
  --fg-dim:    #8b96a5;
  --fg-faint:  #5b6575;
  --accent:    #ffb020;
  --accent-dim:#7a5410;
  --good:      #4fd18b;
  --bad:       #ff5a52;
  --en:        #4aa8ff;
  --ap:        #ffb020;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); }

.btn {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-raise);
  color: var(--fg);
  border: 1px solid var(--line-hot);
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.btn:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #17130a; font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: #ffc44d; color: #17130a; }

.bar {
  position: relative;
  height: 10px;
  background: #0a0c0f;
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 90ms linear;
}
.bar.over > i { background: var(--bad); }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.delta-up { color: var(--good); }
.delta-down { color: var(--bad); }
.invalid { color: var(--bad); }