:root {
  --bg: #120d0b;
  --panel: rgba(18, 14, 12, 0.88);
  --ink: #f1e6d4;
  --muted: #a8977f;
  --accent: #ffc23d;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: none; image-rendering: pixelated; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.35); }
#overlay.hidden, .hidden { display: none !important; }
.panel { width: min(520px, 100%); background: var(--panel); border: 1px solid #3a2e24; padding: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
h1 { margin: 0; font-size: clamp(28px, 7vw, 44px); letter-spacing: 0.08em; }
h1 span { color: var(--accent); }
.tag { margin: 4px 0 20px; color: var(--muted); }
label { display: flex; align-items: center; gap: 12px; margin: 10px 0; color: var(--muted); }
label input { flex: 1; min-width: 0; padding: 10px; font: inherit; color: var(--ink); background: #0c0908; border: 1px solid #4a3a2c; }
button { width: 100%; margin-top: 12px; padding: 14px; font: inherit; font-size: 18px; font-weight: bold; letter-spacing: 0.1em; color: #1a1208; background: var(--accent); border: 0; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: wait; }
#status { min-height: 1.4em; margin-top: 12px; color: var(--accent); }
#install { margin-top: 8px; text-align: center; color: var(--muted); font-size: 12px; }
#install button { margin-top: 0; padding: 9px; font-size: 13px; color: var(--ink); background: transparent; border: 1px solid #4a3a2c; }
#install span { display: block; margin-top: 6px; }
#install span:empty { display: none; }
#rooms { min-height: 1.2em; color: var(--muted); font-size: 12px; }
.help { width: 100%; margin-top: 16px; font-size: 12px; color: var(--muted); border-collapse: collapse; }
.help td { padding: 3px 4px; }
.help td:nth-child(odd) { color: var(--ink); white-space: nowrap; }
.hint { font-size: 12px; color: var(--muted); }
#chat { position: fixed; left: 16px; bottom: 50px; width: min(480px, calc(100vw - 32px)); padding: 8px; font: inherit; color: var(--ink); background: rgba(0, 0, 0, 0.7); border: 1px solid #555; }

/* Touch controls (src/client/touch.ts). */
.touch-help { display: none; }
body.touch .touch-help { display: table; }
body.touch .help:not(.touch-help) { display: none; }
#touch { position: fixed; inset: 0; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch button { pointer-events: auto; touch-action: none; margin: 0; padding: 0; display: grid; place-items: center; align-content: center; color: rgba(255, 244, 230, 0.9); background: rgba(10, 10, 14, 0.38); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; font: 16px/1 ui-monospace, Menlo, monospace; letter-spacing: 0; cursor: default; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
#touch button small { font-size: 7px; font-weight: bold; margin-top: 3px; letter-spacing: 0.08em; color: rgba(255, 244, 230, 0.55); }
#touch button.down { background: rgba(255, 194, 61, 0.38); }
#touch button.on { border-color: var(--accent); color: var(--accent); }
/* Left half: the move stick floats to wherever the thumb lands (it rests bottom-left; placed by touch.ts). */
.stick-base { position: fixed; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.16); background: rgba(10, 10, 14, 0.16); opacity: 0.55; }
.stick-base.active { opacity: 1; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.3); }
/* Right half: the fire pad, a thin crosshair ring centred in the half (placed and sized by touch.ts). */
.fire-pad { position: fixed; border-radius: 50%; border: 1.5px solid rgba(255, 90, 60, 0.32); background: radial-gradient(circle, rgba(255, 90, 60, 0.07), rgba(10, 10, 14, 0.12) 70%); opacity: 0.7; }
.fire-pad .tick { position: absolute; background: rgba(255, 120, 90, 0.45); }
.fire-pad .tick.n, .fire-pad .tick.s { left: 50%; width: 1.5px; height: 10px; margin-left: -0.75px; }
.fire-pad .tick.e, .fire-pad .tick.w { top: 50%; height: 1.5px; width: 10px; margin-top: -0.75px; }
.fire-pad .tick.n { top: 6px; } .fire-pad .tick.s { bottom: 6px; } .fire-pad .tick.w { left: 6px; } .fire-pad .tick.e { right: 6px; }
.fire-pad.firing { opacity: 1; border-color: rgba(255, 80, 50, 0.85); }
.fire-knob { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(255, 120, 90, 0.3); }
.fire-pad.firing .fire-knob { background: rgba(200, 200, 210, 0.5); box-shadow: none; }
/* Locked on: the pad goes hot (held, it fires). Not locked: a cool grey knob that only aims. */
.fire-pad.locked { border-color: rgba(255, 80, 50, 0.7); }
.fire-pad.firing.locked .fire-knob { background: rgba(255, 70, 40, 0.9); box-shadow: 0 0 12px rgba(255, 70, 40, 0.7); }
/* The item block: 2 by 2 in the bottom-right corner (◀ ▶ over zoom and pick up). */
.tbtns { --btn: 52px; position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(2, var(--btn)); gap: 8px; }
#touch .tbtns button { width: var(--btn); height: var(--btn); }
/* Scores and chat: small pills top-left, under the HUD. */
.ttop { position: absolute; top: 92px; left: max(12px, env(safe-area-inset-left)); display: flex; gap: 6px; }
#touch .ttop button { width: auto; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 9px; font-weight: bold; letter-spacing: 0.1em; color: rgba(255, 244, 230, 0.7); }
@media (max-height: 430px) {
  .ttop { top: 68px; }
  .stick-base { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
}
@media (orientation: portrait) {
  body.touch #overlay .panel::after { content: 'Tip: turn your phone sideways to play.'; display: block; margin-top: 12px; color: var(--accent); font-size: 12px; }
}