/* Shared styles for the Odamex Web pages. */
:root { --bg: #0b0b0b; --fg: #e8e8e8; --dim: #8a8a8a; --accent: #d9442b; --line: #2a2a2a; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, sans-serif; overflow: hidden; }
#canvas { display: block; width: 100vw; height: 100vh; object-fit: contain; background: #000; outline: none; }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--bg); }
.overlay[hidden] { display: none; }
.panel { width: 26rem; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
h1 { font: 700 2rem/1 Impact, "Arial Narrow", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
p { color: var(--dim); font-size: .875rem; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--accent); transition: width .1s; }
#status { min-height: 1.5em; }
#error pre { white-space: pre-wrap; font: .8rem/1.4 ui-monospace, monospace; color: var(--fg); background: #161616; padding: 12px; border-radius: 6px; max-height: 50vh; overflow: auto; }
a { color: var(--fg); }

/* Touch controls (touch.js) */
.touch { position: fixed; inset: 0; z-index: 10; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-zone { position: absolute; top: 0; bottom: 0; width: 50%; }
.touch-move { left: 0; }
.touch-look { right: 0; }
.touch-stick-base { display: none; position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); pointer-events: none; }
.touch-stick-knob { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.45); }
.touch-btn { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.35); color: rgba(255,255,255,.85); font: 700 13px/1 Impact, "Arial Narrow", sans-serif; letter-spacing: .05em; }
.touch-btn.down { background: rgba(217,68,43,.6); }
.touch-fire { width: 84px; height: 84px; right: 28px; bottom: 28px; font-size: 16px; }
.touch-jump { width: 60px; height: 60px; right: 128px; bottom: 24px; }
.touch-use  { width: 60px; height: 60px; right: 44px; bottom: 128px; }
.touch-wpn  { width: 52px; height: 52px; right: 20px; top: 20px; }