@font-face { font-family: "Pixelify Sans"; src: url("../assets/fonts/PixelifySans.ttf"); font-display: swap; }
:root {
  --bg: #120e1a; --panel: #1e1628; --panel2: #2c2038; --line: #5a4a70; --text: #f2e8d8; --dim: #b9a9c4;
  --gold: #ffd54a; --ok: #4ade80; --bad: #f87171; --accent: #e8943a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Pixelify Sans", "Courier New", monospace; font-size: 16px; overflow: hidden; touch-action: none; user-select: none; }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: var(--text); background: var(--panel2); border: 2px solid var(--line); border-radius: 0; padding: 8px 12px; min-height: 40px; cursor: pointer; box-shadow: 0 3px 0 #120e1a, inset 0 2px 0 #ffffff14; }
button:hover:not(:disabled) { background: #3d2d4a; border-color: #8a6aa0; }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #120e17; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.on { background: #5a3a1a; border-color: var(--accent); }
button.primary { background: #a85a1a; border-color: #ffb066; font-weight: normal; }
button.danger { background: #6a2020; border-color: #d05050; }
b, strong, h1, h2, h3 { font-weight: normal; }