/* Base: tokens, reset, shared widgets (buttons, inputs, sliders). --s = one GUI pixel (set by ui.js). */
:root {
  --s: 3px;
  --font: 'Pixelify Sans', ui-monospace, Menlo, Consolas, monospace;
  --logo-font: 'Press Start 2P', var(--font);
  --text: #ffffff;
  --text-shadow: #3f3f3f;
  --muted: #a0a0a0;
  --yellow: #ffff55;
  --btn: #6f6f6f;
  --btn-hi: #a9a9a9;
  --btn-lo: #4a4a4a;
  --btn-hover: #7e8bd0;
  --panel: #c6c6c6;
  --panel-hi: #ffffff;
  --panel-lo: #555555;
  --slot: #8b8b8b;
  --slot-hi: #ffffff;
  --slot-lo: #373737;
  --overlay: rgba(10, 10, 14, 0.55);
  --danger: #c33;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body {
  font-family: var(--font); font-size: calc(var(--s) * 8); color: var(--text);
  user-select: none; -webkit-user-select: none; -webkit-font-smoothing: none; font-smooth: never;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
html.free-mouse-play #game { cursor: none; } /* no mouse capture available: still hide the cursor while playing */
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > #hud, #ui > #debug { pointer-events: none; }
.hidden { display: none !important; }
input, textarea { -webkit-user-select: text; user-select: text; } /* iOS won't focus fields inside user-select: none */
.shadow, button, h1, h2, label, .muted { text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.muted { color: var(--muted); }
.center { text-align: center; }

#boot-error {
  position: fixed; inset: 0; margin: 0; padding: 40px; background: #1a0d0d; color: #ffb4b4;
  font: 16px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; z-index: 99;
}

/* ---------- MC-style button ---------- */
.mc-btn {
  position: relative; display: block; width: 100%; height: calc(var(--s) * 20); padding: 0 calc(var(--s) * 4);
  font: inherit; color: var(--text); cursor: pointer;
  background: var(--btn); border: var(--s) solid #000;
  box-shadow: inset var(--s) var(--s) 0 var(--btn-hi), inset calc(var(--s) * -1) calc(var(--s) * -2) 0 var(--btn-lo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-btn:hover:not(:disabled) { background: var(--btn-hover); box-shadow: inset var(--s) var(--s) 0 #bcc5f2, inset calc(var(--s) * -1) calc(var(--s) * -2) 0 #525c93; color: #ffffa0; outline: var(--s) solid #fff; outline-offset: calc(var(--s) * -1); }
.mc-btn:active:not(:disabled) { filter: brightness(0.9); }
.mc-btn:disabled { color: #a0a0a0; background: #2c2c2c; box-shadow: none; cursor: default; }
.mc-btn.primary { font-weight: 600; }
.mc-btn.danger:hover { background: var(--danger); }
.mc-btn.conflict { color: #ff5555; }
.mc-btn:focus-visible { outline: var(--s) solid #fff; }

.mc-input {
  display: block; width: 100%; height: calc(var(--s) * 20); margin-top: calc(var(--s) * 2); padding: 0 calc(var(--s) * 4);
  font: inherit; color: #e0e0e0; background: #000; border: var(--s) solid #a0a0a0; outline: none;
}
.mc-input:focus { border-color: #fff; }
.mc-input::placeholder { color: #707070; }

/* sliders look like buttons with a thumb */
.slider-wrap { position: relative; height: calc(var(--s) * 20); }
.slider-wrap span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; text-shadow: var(--s) var(--s) 0 var(--text-shadow); }
.mc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; background: #2c2c2c; border: var(--s) solid #000; cursor: pointer; }
.mc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: calc(var(--s) * 8); height: calc(var(--s) * 18); background: var(--btn); border: var(--s) solid #000; box-shadow: inset var(--s) var(--s) 0 var(--btn-hi), inset calc(var(--s) * -1) calc(var(--s) * -1) 0 var(--btn-lo); }
.mc-slider::-moz-range-thumb { width: calc(var(--s) * 8); height: calc(var(--s) * 18); background: var(--btn); border: var(--s) solid #000; border-radius: 0; }
.mc-slider:hover::-webkit-slider-thumb { background: var(--btn-hover); }
.mc-slider:focus { outline: none; }