* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1c2c; }
canvas { display: block; touch-action: none; }

/* Video-screen iframes (js/screens.js): an overlay tracked to the canvas. Fixed
   + pointer-events:none so it floats above the canvas but never blocks painting
   or the HUD; the HUD comes later in the DOM, so it still paints on top. */
#screenOverlay { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.screenWrap { position: absolute; overflow: hidden; background: #000; border-radius: 2px; }
.screenWrap iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
/* Stick figures over a live screen are repainted here (js/render.js); fixed +
   after #screenOverlay in the DOM so it stacks above the iframes, click-through. */
#fgCanvas { position: fixed; inset: 0; pointer-events: none; }

/* Video-screen controls overlaid on the hovered TV (positioned by js/screens.js).
   The container is click-through; only the search + volume bars take pointer
   events, so resting the mouse on the bare video still idle-hides the controls. */
#screenControls {
  position: fixed; display: none; pointer-events: none;
  color: var(--ink); font: 12px/1.3 system-ui, sans-serif;
}
#screenControls.open { display: block; }
#screenControls .sc-search, #screenControls .sc-vol { pointer-events: auto; }

.sc-search { position: absolute; left: 6px; right: 6px; top: 6px; }
#screenSearch {
  width: 100%; padding: 6px 9px; border-radius: 7px; font-size: 12px; outline: none;
  border: 1px solid var(--ctl-border); background: rgba(16, 18, 28, 0.92); color: var(--ink);
}
#screenSearch:focus { border-color: var(--accent); }
#screenResults {
  margin-top: 4px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  background: rgba(16, 18, 28, 0.96); border-radius: 7px;
}
#screenResults:empty { display: none; }
.screenResult {
  display: flex; gap: 7px; align-items: center; width: 100%; padding: 4px; text-align: left;
  background: transparent; border: 0; border-radius: 6px; color: var(--ink); cursor: pointer;
}
.screenResult:hover { background: rgba(255, 255, 255, 0.1); }
.screenResult img { width: 64px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; background: #000; }
.screenResult .meta { display: flex; flex-direction: column; min-width: 0; }
.screenResult .t { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screenResult .a { font-size: 10px; color: var(--ink-dim); }
.screenMsg { padding: 10px; text-align: center; color: var(--ink-dim); font-size: 11px; }

.sc-vol {
  position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 8px;
  background: rgba(16, 18, 28, 0.82); border-radius: 7px; padding: 4px 9px;
}
#screenControls.blank .sc-vol { display: none; }
#screenMute, #screenPause, #screenPower { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
#screenPower.off { color: var(--accent); }   /* lit when the TV is off for you */

/* Volume: just the speaker shows until you hover it, then the slider slides out */
.sc-volume { display: flex; align-items: center; gap: 6px; }
#screenVolume {
  width: 0; opacity: 0; padding: 0; pointer-events: none;
  transition: width 0.15s ease, opacity 0.15s ease;
  accent-color: var(--accent); cursor: pointer;
}
.sc-volume:hover #screenVolume, #screenVolume:focus { width: 92px; opacity: 1; pointer-events: auto; }

:root {
  --ink: #e8eaf6;
  --ink-dim: #99a0bd;
  --accent: #7aa2ff;
  --accent-soft: rgba(122, 162, 255, 0.18);
  --ctl: rgba(255, 255, 255, 0.06);
  --ctl-border: rgba(255, 255, 255, 0.14);
  --hairline: rgba(255, 255, 255, 0.08);
  --ok: #6fe08b;
}

#hud {
  position: fixed; top: 12px; left: 12px; width: 348px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); line-height: 1.5;
  background: linear-gradient(180deg, rgba(36, 40, 70, 0.88), rgba(20, 22, 40, 0.9));
  border: 1px solid var(--ctl-border);
  border-radius: 14px; padding: 12px;
  user-select: none; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
#hud .dim { color: var(--ink-dim); }
#hud kbd, #shopMenu kbd {
  background: rgba(255,255,255,0.12); border-radius: 4px;
  padding: 0 5px; font-family: inherit;
}
#hud .row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#hud .divider { height: 1px; background: var(--hairline); margin: 10px -12px 0; }

/* shared control styling */
#hud button, #shopMenu button {
  font: inherit; color: var(--ink); cursor: pointer;
  background: var(--ctl); border: 1px solid var(--ctl-border);
  border-radius: 8px; padding: 3px 9px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
#hud button:hover, #shopMenu button:hover { background: rgba(255, 255, 255, 0.12); }
#hud button:active, #shopMenu button:active { transform: translateY(1px); }
#hud button:focus-visible, #hud input:focus-visible, #hud select:focus-visible,
#shopMenu button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* header: title, connection badge, help toggle */
#hud .head { display: flex; align-items: center; gap: 8px; }
#hud .title { font-weight: 700; font-size: 13px; margin-right: auto; }
#netStatus { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-dim); }
#netStatus::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #777e99; }
#netStatus.online { color: var(--ok); }
#netStatus.online::before { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
#accountBtn { width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1; }
#accountBtn.on { background: var(--accent-soft); border-color: var(--accent); }
#sfxMute { width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 12px; line-height: 1; }
#helpBtn { width: 22px; height: 22px; padding: 0; border-radius: 50%; color: var(--ink-dim); }
#helpBtn.on { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); }

/* collapsible account / login panel */
#accountPanel { margin-top: 8px; }
#accountPanel:not(.open) { display: none; }
#accountPanel .accountrow { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#accountPanel input {
  flex: 1; min-width: 0;
  background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid var(--ctl-border);
  border-radius: 8px; padding: 4px 8px; font: inherit;
}
#accountPanel input::placeholder { color: var(--ink-dim); }
#accountPanel .accounthint { margin-top: 6px; font-size: 11px; color: var(--ink-dim); }
.hidden { display: none; }

/* collapsible controls help */
#helpPanel { margin-top: 8px; color: var(--ink-dim); line-height: 1.9; }
#hud:not(.help) #helpPanel { display: none; }
#hud:not(.help) .helponly { display: none; }  /* fps meter + cap live behind ? too */

/* segmented controls: one selected option, color-coded per meaning */
#hud .seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--ctl-border); border-radius: 9px;
}
#hud .seg button { background: transparent; border: none; border-radius: 7px; color: var(--ink-dim); }
#hud .seg button:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
#hud .seg button.selected {
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(122, 162, 255, 0.5);
}
#hud #playBtn.selected { background: rgba(111, 224, 139, 0.14); box-shadow: inset 0 0 0 1px rgba(111, 224, 139, 0.5); }
#hud #buildBtn.selected { background: rgba(255, 191, 99, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 191, 99, 0.55); }
#hud #eraserBtn.selected { background: rgba(255, 122, 122, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 122, 122, 0.55); }

#nameInput {
  flex: 1; min-width: 0;
  background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid var(--ctl-border);
  border-radius: 8px; padding: 4px 8px; font: inherit;
}
#nameInput::placeholder { color: var(--ink-dim); }

/* build tools */
#hud.play .buildonly { display: none; }
#hud .palette:not(.visible) { display: none; }
.blocktype, .bgtype { display: inline-flex; align-items: center; gap: 4px; }
.blocktype kbd { font-size: 10px; opacity: 0.5; padding: 0 3px; }
.blocktype.selected, .bgtype.selected { background: var(--accent-soft); border-color: var(--accent); }
#solidColors { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 2px; }
#solidColors.visible { display: flex; }
#rampControls { display: none; flex-basis: 100%; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 2px; }
#rampControls.visible { display: flex; }
#rampControls label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #cfd6e6; }
#rampControls input[type="range"] { width: 88px; }
#rampEditBar { display: flex; align-items: center; gap: 8px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--ctl-border); }
#rampEditBar[hidden] { display: none; }
.rampInfo { font-size: 11px; color: #8fe0ff; font-variant-numeric: tabular-nums; }
.miniBtn { font-size: 11px; padding: 2px 7px; }
#hud .swatch {
  width: 20px; height: 20px; border-radius: 6px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.1s;
}
#hud .swatch:hover { transform: scale(1.15); background: none; }
#hud .swatch.selected { outline: 2px solid #fff; outline-offset: 2px; }

/* footer: perf readout */
#hud .foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; }
#fpsMeter { margin-left: auto; color: var(--ink-dim); }
#zombieMeter { color: #9ccc5a; font-weight: 700; }
#fpsCap {
  background: rgba(0, 0, 0, 0.3); color: var(--ink); border: 1px solid var(--ctl-border);
  border-radius: 6px; padding: 2px 4px; font: inherit; cursor: pointer;
}

/* build tools slide in when entering build mode */
@keyframes hud-rise { from { opacity: 0; transform: translateY(-4px); } }
#hud:not(.play) .buildonly { animation: hud-rise 0.18s ease both; }

#chatInput {
  position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%);
  width: 320px; display: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; color: var(--ink);
  background: rgba(20, 22, 40, 0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--ctl-border);
  border-radius: 12px; padding: 9px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#chatInput:focus { outline: none; border-color: var(--accent); }
@keyframes chat-pop { from { opacity: 0; transform: translate(-50%, 6px); } }
#chatInput.open { display: block; animation: chat-pop 0.15s ease; }

/* slash-command autocomplete list, floats just above the chat input */
#chatCommands {
  position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
  width: 320px; display: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(20, 22, 40, 0.92); backdrop-filter: blur(12px);
  border: 1px solid var(--ctl-border);
  border-radius: 12px; padding: 5px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
#chatCommands.open { display: block; animation: chat-pop 0.12s ease; }
#chatCommands .cmd {
  display: flex; gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
#chatCommands .cmd.sel { background: rgba(255, 255, 255, 0.1); }
#chatCommands .cmd-name { color: var(--accent); font-weight: 600; }
#chatCommands .cmd-desc { color: var(--ink); opacity: 0.65; margin-left: auto; text-align: right; }

/* vendor shop menu: opened with E next to a vendor NPC */
#shopMenu {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 300px; display: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); line-height: 1.5;
  background: linear-gradient(180deg, rgba(36, 40, 70, 0.88), rgba(20, 22, 40, 0.9));
  border: 1px solid var(--ctl-border);
  border-radius: 14px; padding: 12px;
  user-select: none; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
@keyframes shop-pop { from { opacity: 0; transform: translate(-50%, -47%); } }
#shopMenu.open { display: block; animation: shop-pop 0.15s ease; }
#shopMenu .shoptitle { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#shopMenu #shopMoney { float: right; font-weight: 400; color: var(--ok); }
#shopMenu #shopItems { max-height: 56vh; overflow-y: auto; }
#shopMenu kbd:empty { visibility: hidden; }   /* rows past the digit keys */
#shopMenu .shoprow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--hairline);
}
#shopMenu .shopname { margin-right: auto; }
#shopMenu .shopname small { display: block; color: var(--ink-dim); font-size: 11px; }
/* Already purchased: grey the row out (the button still reads owned/wear/worn) */
#shopMenu .shoprow.owned .shopname, #shopMenu .shoprow.owned kbd { opacity: 0.45; }
#shopMenu button { min-width: 60px; text-align: center; }
#shopMenu button:disabled {
  opacity: 0.45; cursor: default; transform: none;
  background: var(--ctl);
}
#shopMenu .shophint {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline);
  color: var(--ink-dim); font-size: 11px; text-align: center;
}
#shopMenu #shopKills {
  padding: 7px 0 4px; border-top: 1px solid var(--hairline);
  color: var(--ink-dim); font-size: 11px;
}

/* Blueprint library: same glass card as the shop, with a thumbnail grid */
#blueprintMenu {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 340px; display: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); line-height: 1.5;
  background: linear-gradient(180deg, rgba(36, 40, 70, 0.88), rgba(20, 22, 40, 0.9));
  border: 1px solid var(--ctl-border);
  border-radius: 14px; padding: 12px;
  user-select: none; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 20;
}
#blueprintMenu.open { display: block; animation: shop-pop 0.15s ease; }
#blueprintMenu .bptitle { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#blueprintMenu #bpCount { float: right; font-weight: 400; color: var(--ink-dim); }
#blueprintMenu #bpMessage:not(:empty) {
  color: var(--accent); font-size: 11px; margin-bottom: 6px;
}
#blueprintMenu #bpSaveBar { display: flex; gap: 6px; margin-bottom: 8px; }
#blueprintMenu #bpSaveBar.hidden { display: none; }
#blueprintMenu #bpNameInput {
  flex: 1; min-width: 0; padding: 5px 8px; color: var(--ink);
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--ctl-border); border-radius: 8px;
  font-family: inherit; font-size: 12px;
}
#blueprintMenu #bpNameInput:focus { outline: none; border-color: var(--accent); }
#blueprintMenu #bpList { max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#blueprintMenu .bpempty { color: var(--ink-dim); font-size: 11px; padding: 10px 2px; }
#blueprintMenu .bpcard {
  display: flex; gap: 9px; align-items: center;
  padding: 7px; border: 1px solid var(--hairline); border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
#blueprintMenu .bpcard.replacing { cursor: pointer; border-color: var(--accent-soft); }
#blueprintMenu .bpthumb {
  width: 96px; height: 64px; flex: none; border-radius: 6px;
  background: rgba(10, 12, 22, 0.6); border: 1px solid var(--hairline);
}
#blueprintMenu .bpcardbody { flex: 1; min-width: 0; }
#blueprintMenu .bpname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#blueprintMenu .bpmeta { color: var(--ink-dim); font-size: 11px; margin-bottom: 4px; }
#blueprintMenu .bpactions { display: flex; gap: 5px; }
#blueprintMenu .bpactions button { min-width: 0; padding: 3px 9px; }
#blueprintMenu .bphint, #bpPanelHint {
  color: var(--ink-dim); font-size: 11px;
}
#blueprintMenu .bphint {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); text-align: center;
}
#bpPanelHint { align-self: center; margin-left: 4px; }

/* Level doors (js/level.js): library / make / scoreboard modals reuse the
   blueprint modal's look. .open toggles them like #blueprintMenu. */
.bpmodal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 360px; display: none;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; color: var(--ink); line-height: 1.5;
  background: linear-gradient(180deg, rgba(36, 40, 70, 0.88), rgba(20, 22, 40, 0.9));
  border: 1px solid var(--ctl-border); border-radius: 14px; padding: 12px;
  user-select: none; backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 21;
}
.bpmodal.open { display: block; animation: shop-pop 0.15s ease; }
.bpmodal .bptitle { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.bpmodal .bptitle span { float: right; font-weight: 400; color: var(--ink-dim); }
.bpmodal #lvMessage:not(:empty), .bpmodal #lvMakeMsg:not(:empty) {
  color: var(--accent); font-size: 11px; margin-bottom: 6px;
}
.bpmodal #lvList, .bpmodal #lvScoreList {
  max-height: 56vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.bpmodal .bpempty { color: var(--ink-dim); font-size: 11px; padding: 10px 2px; }
.bpmodal .bpcard {
  display: flex; gap: 9px; align-items: center;
  padding: 7px; border: 1px solid var(--hairline); border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.bpmodal .bpcardbody { flex: 1; min-width: 0; }
.bpmodal .bpname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bpmodal .bpmeta { color: var(--ink-dim); font-size: 11px; margin-bottom: 4px; }
.bpmodal .bpactions { display: flex; gap: 5px; flex-wrap: wrap; }
.bpmodal .bpactions button { min-width: 0; padding: 3px 9px; }
.bpmodal .lvbadge { font-size: 10px; color: var(--ink-dim); margin-left: 6px; }
.bpmodal .lvfield { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; font-size: 11px; color: var(--ink-dim); }
.bpmodal .lvfield input, .bpmodal .lvfield select {
  padding: 5px 8px; color: var(--ink);
  background: rgba(0, 0, 0, 0.25); border: 1px solid var(--ctl-border); border-radius: 8px;
  font-family: inherit; font-size: 12px;
}
.bpmodal .lvfield input:focus, .bpmodal .lvfield select:focus { outline: none; border-color: var(--accent); }
.bpmodal .lvbtns { display: flex; gap: 6px; }
.bpmodal .lvrow { display: flex; justify-content: space-between; padding: 4px 6px; border-bottom: 1px solid var(--hairline); }
.bpmodal .lvrow .rank { color: var(--ink-dim); width: 24px; }
.bpmodal .lvrow .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bpmodal .lvrow .sc { font-weight: 700; }
.bpmodal .bphint {
  color: var(--ink-dim); font-size: 11px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); text-align: center;
}
.bpmodal .lvsection {
  font-weight: 700; font-size: 11px; color: var(--ink-dim);
  margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid var(--hairline);
}
.bpmodal .lvsection:first-of-type { border-top: none; padding-top: 0; }

/* Floating Save/Cancel bar shown while building a level inside a door */
#levelAuthorBar {
  position: fixed; left: 50%; top: 10px; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px;
  color: var(--ink); background: linear-gradient(180deg, rgba(60,40,90,0.92), rgba(30,20,50,0.94));
  border: 1px solid var(--ctl-border); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 22; max-width: 92vw;
}
#levelAuthorBar.open { display: flex; }
#levelAuthorBar #laHint { color: var(--ink-dim); max-width: 52vw; }
#levelAuthorBar button { padding: 4px 10px; }

/* On-screen touch controls (js/touch.js). The container is click-through; only
   the buttons capture, so canvas grapple-aim / build painting still work in the
   gaps. Hidden on desktop — body.touch is added only on coarse-pointer devices. */
#touch { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: none; }
body.touch #touch { display: block; }

/* Help panel: keyboard hints on desktop, on-screen-button hints on touch. */
body:not(.touch) .touchonly { display: none; }
body.touch .keyonly { display: none; }
#touch .tbtn {
  position: absolute; pointer-events: auto;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--ink);
  background: rgba(28, 32, 58, 0.42); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none;
  transition: background 0.08s, transform 0.08s, border-color 0.08s;
}
#touch .tbtn.txt { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; }
#touch .tbtn.tbtn-big { width: 94px; height: 94px; font-size: 34px; }
#touch .tbtn.pressed {
  background: var(--accent-soft); border-color: var(--accent); transform: scale(0.92);
}
#touch .tbtn.hidden { display: none; }

/* Movement cluster, bottom-left; action cluster, bottom-right. Offsets fold in
   the safe-area insets so nothing hides under a notch or home indicator. */
#tLeft  { left: calc(16px  + env(safe-area-inset-left));  bottom: calc(28px  + env(safe-area-inset-bottom)); }
#tRight { left: calc(100px + env(safe-area-inset-left));  bottom: calc(28px  + env(safe-area-inset-bottom)); }
#tDown  { left: calc(58px  + env(safe-area-inset-left));  bottom: calc(104px + env(safe-area-inset-bottom)); }
#tJump     { right: calc(16px  + env(safe-area-inset-right)); bottom: calc(28px  + env(safe-area-inset-bottom)); }
#tAttack   { right: calc(120px + env(safe-area-inset-right)); bottom: calc(40px  + env(safe-area-inset-bottom)); }
#tInteract { right: calc(28px  + env(safe-area-inset-right)); bottom: calc(132px + env(safe-area-inset-bottom)); }
#tGun      { right: calc(120px + env(safe-area-inset-right)); bottom: calc(120px + env(safe-area-inset-bottom)); }
#tRecruit  { right: calc(120px + env(safe-area-inset-right)); bottom: calc(196px + env(safe-area-inset-bottom)); }
#tEmote    { right: calc(204px + env(safe-area-inset-right)); bottom: calc(40px  + env(safe-area-inset-bottom)); }
#tBlock    { right: calc(204px + env(safe-area-inset-right)); bottom: calc(120px + env(safe-area-inset-bottom)); }

/* Emote tray: a column of choices stacked above the emote button (column-reverse
   keeps the first one nearest the thumb). Children opt back into normal flow. */
#tEmoteTray {
  position: absolute; pointer-events: none;
  right: calc(204px + env(safe-area-inset-right)); bottom: calc(116px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column-reverse; gap: 12px;
}
#tEmoteTray .tbtn { position: relative; right: auto; bottom: auto; pointer-events: auto; }
#touch #tEmoteTray.hidden { display: none; }
/* Chat sits BELOW the canvas-drawn corner HUD (weapon/cash/coords, ~110px tall
   top-right in js/render.js) so it never covers the money or position readout. */
#tChat {
  width: 48px; height: 48px; font-size: 22px;
  top: calc(120px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right));
}

/* Compliance button: shown only while a mugger holds you up (js/touch.js), so a
   phone player can put their hands up — the [C] key prompt has no touch key. */
#tComply { left: calc(50% - 32px); bottom: 36%; }

/* Phone-sized HUD: the 348px panel would swamp a small screen, so let it shrink,
   scroll instead of overflow, and cap the long build-tool palette. */
@media (max-width: 600px) {
  #hud {
    width: auto; max-width: calc(100vw - 16px); left: 8px; top: 8px;
    max-height: 48vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    font-size: 11px; padding: 9px; border-radius: 11px;
  }
  /* One scroll container (the whole HUD) — nested scrollers are unreliable on
     touch. The palette flows at full height and the capped HUD scrolls it, so
     the build menu never swamps the screen: the canvas stays visible to paint. */
  #hud .palette { max-height: none; overflow: visible; }
  #shopMenu { width: calc(100vw - 24px); max-width: 340px; max-height: 80vh; overflow-y: auto; }
  #chatInput, #chatCommands { width: calc(100vw - 24px); max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  #hud, #hud *, #chatInput, #shopMenu { animation: none !important; transition: none !important; }
}