/* AI IMPOSTOR: SPACE SHIP — in-game HUD (owner: hud) */
#hud.hud-root > * { display: none; }
#hud.hud-root.hud-on > *:not(.hidden) { display: block; }
#hud.hud-root.hud-on > .hud-top, #hud.hud-root.hud-on > .hud-actions { display: flex; }
#hud.hud-root.hud-lobby > .hud-top { display: flex; }
#hud.hud-root.hud-lobby .hud-top > :first-child { display: none; }
.hud-tasks { position: absolute; left: 10px; top: 10px; width: min(330px, 46vw); background: rgba(10, 14, 30, .78); border: 2px solid rgba(255,255,255,.12); border-radius: 14px; padding: 8px; font-size: 14px; }
.hud-tasks-head { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff; font-weight: 900; font-size: 15px; cursor: pointer; padding: 4px 2px; }
.hud-tasks-head svg { width: 20px; height: 20px; }
.hud-tasks.collapsed .hud-tasks-body { display: none; }
.hud-tasks-body { max-height: 40vh; overflow: auto; }
.hud-task { padding: 2px 4px; color: #fff; }
.hud-task.partial { color: var(--yellow); }
.hud-task.done { color: #50e070; text-decoration: none; opacity: .8; }
.hud-imp { color: var(--red); font-weight: 900; }
.hud-fake { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.hud-ghost { color: #bcd; font-style: italic; margin-bottom: 4px; }
.hud-comms { color: var(--red); font-weight: 800; }
.hud-total { margin-bottom: 6px; }
.hud-total.hidden { display: none; }
.hud-total-label { font-size: 12px; font-weight: 800; color: var(--text-dim); }
.hud-total-bar { height: 16px; border-radius: 8px; background: #1d2a1d; border: 2px solid #10131f; overflow: hidden; }
.hud-total-bar i { display: block; height: 100%; background: linear-gradient(#5ff07a, #2fae4a); transition: width .4s; }
.hud-top { position: absolute; right: 10px; top: 10px; gap: 8px; }
.hud-btn-sm { width: 48px; height: 48px; border-radius: 14px; background: rgba(10,14,30,.8); border: 2px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; padding: 8px; }
.hud-btn-sm svg { width: 100%; height: 100%; display: block; }
.hud-actions { position: absolute; right: 14px; bottom: 14px; gap: 10px; align-items: flex-end; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 60vw; }
.hud-act { position: relative; width: 96px; height: 96px; border-radius: 22px; border: 3px solid #10131f; background: rgba(230, 236, 250, .92); color: #10131f; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; box-shadow: 0 5px 0 #10131f; transition: transform .08s, opacity .15s; }
.hud-act:active { transform: translateY(3px); box-shadow: 0 2px 0 #10131f; }
.hud-act.hidden { display: none; }
.hud-act.off { opacity: .35; filter: grayscale(.8); }
.hud-act .ico svg { width: 52px; height: 52px; display: block; }
.hud-act .lbl { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.hud-act .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 40px var(--font-display); color: #fff; -webkit-text-stroke: 2px #10131f; pointer-events: none; }
.hud-act--kill { background: rgba(255, 120, 120, .95); }
.hud-act--sabotage { background: rgba(255, 150, 150, .95); }
.hud-act--report { background: rgba(255, 200, 120, .95); }
.hud-act--vent { background: rgba(180, 190, 220, .95); }
.hud-alert { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(160, 20, 30, .9); border: 3px solid #10131f; border-radius: 14px; padding: 8px 16px; color: #fff; font-weight: 900; font-size: 17px; text-align: center; animation: hud-pulse 1s infinite; max-width: 60vw; }
.hud-alert .ico svg { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; color: var(--yellow); }
.hud-alert small { display: block; font-size: 13px; font-weight: 700; }
.hud-alert.hidden, .hud-edges.hidden { display: none !important; }
@keyframes hud-pulse { 50% { background: rgba(220, 40, 50, .95); } }
.hud-edges { position: absolute; inset: 0; box-shadow: inset 0 0 90px 30px rgba(255, 0, 30, .5); animation: hud-edge 1s infinite; }
@keyframes hud-edge { 50% { opacity: .3; } }
.hud-room { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 700 26px var(--font-display); color: #fff; -webkit-text-stroke: 1.5px #10131f; opacity: 0; transition: opacity .4s; }
.hud-room.show { opacity: 1; }
.hud-vents { position: absolute; inset: 0; pointer-events: none !important; }
.hud-vent-arrow { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid #10131f; background: rgba(255,255,255,.9); transform: rotate(var(--a)); cursor: pointer; padding: 10px; pointer-events: auto; }
.hud-vent-arrow svg { width: 100%; height: 100%; }
/* overlays */
.hud-ov { z-index: 2; }
.hud-ov-box { width: min(1000px, 96vw); height: min(680px, 90vh); display: flex; flex-direction: column; padding: 10px; }
.hud-ov-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; font: 700 22px var(--font-display); }
.hud-ov-area { position: relative; flex: 1; min-height: 0; }
.hud-ov-area > canvas { width: 100%; height: 100%; display: block; }
.hud-cams { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.hud-cams canvas { width: 100%; height: 100%; border-radius: 10px; border: 2px solid #10131f; background: #000; }
.hud-sab-layer { position: absolute; inset: 0; pointer-events: none; }
.hud-sab-btn { position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 3px solid #10131f; background: #ff5b5b; color: #10131f; pointer-events: auto; cursor: pointer; padding: 8px; }
.hud-sab-btn svg { width: 100%; height: 100%; display: block; }
.hud-sab-btn--door { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: #ffb35b; padding: 6px; }
.hud-sab-btn i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 18px var(--font-display); color: #fff; -webkit-text-stroke: 1px #000; font-style: normal; }
.hud-sab-btn.off { filter: grayscale(1); opacity: .55; }
@media (max-height: 500px), (max-width: 700px) {
  .hud-act { width: 72px; height: 72px; border-radius: 18px; }
  .hud-act .ico svg { width: 38px; height: 38px; }
  .hud-act .lbl { font-size: 11px; }
  .hud-tasks { font-size: 12px; width: 40vw; }
  .hud-tasks-body { max-height: 30vh; }
}