/* THE HOSTAGE: vault door, one status bar, the hostage, the phone, the expert console */

/* ---------- the vault: brushed steel door, heavy bolts round the edge ---------- */
#bomb.hostage .face-metal { background: var(--grain), var(--speck), linear-gradient(165deg, #8e969e 0%, #6b737b 40%, #4b5259 100%);
  box-shadow: inset 0 0 0 6px #2a2e33, inset 0 0 0 10px #a7aeb5, inset 0 0 0 14px #3a3f45, inset 0 0 80px rgba(0,0,0,.55); }
#bomb.hostage .face.side { border-radius: 22px; }
#bomb.hostage .face.top .face-metal, #bomb.hostage .face.bottom .face-metal { background: var(--grain), linear-gradient(180deg, #737b83, #4b5259); }
#bomb.hostage .face .screw { width: 30px; height: 30px; background: radial-gradient(circle at 35% 30%, #f1f3f5, #9aa1a8 50%, #4b5259); }
#bomb.hostage .face .screw::after { display: none; }
#bomb.hostage .slot .plate { display: block; top: auto; bottom: 12px; padding: 3px 16px; font: 800 15px var(--sans); letter-spacing: 3px; color: #202327;
  background: var(--grain), linear-gradient(180deg, #e3e6ea, #a3aab2); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.6); }
#bomb.hostage .mod-well { background: var(--grain), linear-gradient(170deg, #5c6168 0%, #3f444a 50%, #2d3136 100%); box-shadow: inset 0 0 0 3px #1a1c1f, inset 0 0 0 5px #6b7178, 0 6px 14px rgba(0,0,0,.6); border-radius: 12px; }
#bomb.hostage .slot .led { top: 58px; right: 34px; width: 16px; height: 16px; z-index: 3; }
#bomb.hostage .slot { transition: opacity 300ms; }
#bomb.hostage.zoomed .slot:not(.focus) { opacity: .35; }
#bomb.hostage .stamp { font-size: 30px; }

/* the engine's own HUD timer is replaced by the one status bar */
#stage[data-game="hostage"] .hud-timer { visibility: hidden; }

/* ---------- the one status bar ---------- */
.hb-bar { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 12px; z-index: 6;
  background: linear-gradient(180deg, #1b1e22, #0e1012); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.6), 0 0 0 2px #2c3036; pointer-events: none; }
.hb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 110px; padding: 6px 16px; border-radius: 8px; background: #07090a; box-shadow: inset 0 2px 8px #000; }
.hb-item small { font: 800 11px var(--mono); letter-spacing: 3px; color: #8b9198; }
.hb-item b { font: 800 40px/1.1 var(--mono); color: #ff5a4e; text-shadow: 0 0 10px rgba(255,90,78,.6); font-variant-numeric: tabular-nums; }
.hb-power b { min-width: 130px; text-align: center; }
.hb-panic b { color: #f0c14b; text-shadow: 0 0 10px rgba(240,193,75,.6); }
.hb-panic.p4 b, .hb-panic.p5 b { color: #ff6b5e; text-shadow: 0 0 12px rgba(255,107,94,.8); }
.hb-serial b { color: #e9e6dc; text-shadow: none; font-size: 30px; letter-spacing: 3px; }
.hb-alarms { display: flex; gap: 10px; padding: 9px 0 7px; }
.hb-alarms i { width: 26px; height: 26px; border-radius: 50%; background: #3a1210; box-shadow: inset 0 0 4px #000; }
.hb-alarms i.on { background: radial-gradient(circle at 35% 30%, #ffd2cc, #ff3b30 45%, #7a1410); box-shadow: 0 0 14px #ff3b30; }

/* ---------- the hostage ---------- */
.hg-wrap { position: absolute; left: 18px; bottom: 50px; width: 270px; z-index: 5; pointer-events: none; transition: opacity 300ms; }
#hud.zoomed ~ .hg-wrap, .hg-wrap.dim { opacity: .9; }
.hg-svg { width: 270px; height: 368px; overflow: visible; filter: drop-shadow(0 10px 14px rgba(0,0,0,.6)); }
.hg-chair { fill: #5a3b26; }
.hg-legs { fill: #2f3d5c; }
.hg-shoe { fill: #1b1b1d; }
.hg-torso { fill: #d9d4c7; stroke: #a9a395; stroke-width: 2; }
.hg-arm { fill: none; stroke: #d9d4c7; stroke-width: 16; stroke-linecap: round; }
.hg-skin { fill: #e8b98f; }
.hg-hair { fill: #3a2a1e; }
.hg-rope rect { fill: #c9a25a; stroke: #8a6a2c; stroke-width: 2; }
.hg-eye { fill: #1d1d1d; }
.hg-line, .hg-brow { fill: none; stroke: #1d1d1d; stroke-width: 3; stroke-linecap: round; }
.hg-mouth { fill: none; stroke: #6b2b22; stroke-width: 3; stroke-linecap: round; }
.hg-mouth.panic, .hg-mouth.happy { fill: #6b2b22; stroke: none; }
.hg-sweat { fill: #8fd3ff; opacity: 0; }
.hg-arms-up, .hg-shut, .hg-mouth.panic, .hg-mouth.happy { display: none; }
/* panic: worry in the brows, trembling, sweat */
.hg-svg.p2 .hg-brow.l { transform: rotate(-8deg); transform-origin: 99px 30px; }
.hg-svg.p2 .hg-brow.r { transform: rotate(8deg); transform-origin: 121px 30px; }
.hg-svg.p3 .hg-sweat.s1, .hg-svg.p4 .hg-sweat, .hg-svg.p5 .hg-sweat { opacity: 1; }
.hg-svg.p3 .hg-mouth.calm, .hg-svg.p4 .hg-mouth.calm, .hg-svg.p5 .hg-mouth.calm { display: none; }
.hg-svg.p3 .hg-mouth.panic, .hg-svg.p4 .hg-mouth.panic, .hg-svg.p5 .hg-mouth.panic { display: inline; }
.hg-svg.p3 .hg-body { animation: hg-tremble 260ms infinite; }
.hg-svg.p4 .hg-body { animation: hg-tremble 170ms infinite; }
.hg-svg.p5 .hg-body { animation: hg-tremble 110ms infinite; }
@keyframes hg-tremble { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.hg-svg.p5 .hg-body { animation-name: hg-tremble5; }
@keyframes hg-tremble5 { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
/* reactions */
.hg-svg.flinch .hg-eyes { display: none; }
.hg-svg.flinch .hg-shut { display: inline; }
.hg-svg.flinch .hg-head { animation: hg-flinch 600ms; transform-origin: 110px 70px; }
@keyframes hg-flinch { 0% { transform: rotate(0); } 20% { transform: rotate(-10deg) translateY(4px); } 60% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
.hg-svg.cheer .hg-mouth, .hg-svg.freed .hg-mouth { display: none; }
.hg-svg.cheer .hg-mouth.happy, .hg-svg.freed .hg-mouth.happy { display: inline; }
.hg-svg.cheer .hg-sweat, .hg-svg.freed .hg-sweat { opacity: 0; }
.hg-svg.cheer .hg-body, .hg-svg.freed .hg-body { animation: hg-hop 500ms; }
@keyframes hg-hop { 30% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
.hg-svg.freed .hg-arms-down { display: none; }
.hg-svg.freed .hg-arms-up { display: inline; }
.hg-svg.freed .hg-rope { transform: translateY(120px); opacity: 0; transition: transform 800ms ease-in, opacity 800ms; }
.hg-svg.lost { opacity: .25; filter: grayscale(1) blur(1px); transition: opacity 1.4s, filter 1.4s; }
.hg-tag { margin: 0 auto; width: max-content; padding: 2px 12px; border-radius: 3px; font: 800 12px var(--mono); letter-spacing: 3px; color: #202327; background: linear-gradient(180deg, #e3e6ea, #a3aab2); }
.hg-bubble { position: absolute; left: 160px; top: -30px; width: max-content; max-width: 260px; padding: 10px 14px; border-radius: 14px; background: #fffdf6; color: #1b1b1d; font: 700 18px/1.25 var(--sans);
  box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity 150ms, transform 150ms; }
.hg-bubble::after { content: ''; position: absolute; left: 18px; bottom: -10px; border: 10px solid transparent; border-top-color: #fffdf6; border-bottom: 0; }
.hg-bubble.show { opacity: 1; transform: none; }

/* ---------- RANSOM: the phone ---------- */
.hr-mod { position: absolute; inset: 0; border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.hr-top { display: flex; gap: 18px; align-items: center; }
.hr-phone { position: relative; width: 150px; height: 110px; border-radius: 16px; background: linear-gradient(180deg, #2b2f34, #16181b); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 #0b0b0b, 0 8px 14px rgba(0,0,0,.6); }
.hr-phone::before { content: ''; position: absolute; left: 34px; right: 34px; top: 52px; bottom: 12px; border-radius: 8px; background: repeating-linear-gradient(90deg, #0b0c0e 0 6px, #24282c 6px 9px); box-shadow: inset 0 2px 5px #000; }
.hr-handset { position: absolute; left: 6px; right: 6px; top: 10px; height: 30px; border-radius: 10px 10px 16px 16px; background: linear-gradient(180deg, #4a5057, #1d2024); box-shadow: 0 4px 5px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
.hr-handset::before, .hr-handset::after { content: ''; position: absolute; top: 8px; width: 34px; height: 30px; border-radius: 8px 8px 14px 14px; background: linear-gradient(180deg, #3a3f45, #121417); box-shadow: 0 3px 4px rgba(0,0,0,.7); }
.hr-handset::before { left: -2px; } .hr-handset::after { right: -2px; }
.hr-mod.ringing .hr-handset { animation: hr-ring 160ms infinite; }
@keyframes hr-ring { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3px); } }
.hr-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.hr-lcd { font-size: 24px; text-align: center; }
.hr-ledrow { display: flex; align-items: center; gap: 10px; font: 800 13px var(--mono); letter-spacing: 2px; color: #c9ced4; }
.hr-note { flex: 1; border-radius: 6px; padding: 12px 14px; background: #f3efe2; color: #1b1b1d; box-shadow: inset 0 0 0 1px #c9c2ad, 0 3px 6px rgba(0,0,0,.4); font: 600 16px/1.35 var(--sans); min-height: 110px; transform: rotate(-.6deg); }
.hr-note:empty { background: repeating-linear-gradient(0deg, #2a2e33 0 2px, #24282c 2px 4px); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
.hr-from { font: 700 13px var(--mono); letter-spacing: 1px; color: #555; }
.hr-msg { margin: 6px 0; font-size: 18px; }
.hr-num { font: 800 22px var(--mono); letter-spacing: 2px; }
.hr-done { font-size: 18px; font-weight: 800; color: #1d5c32; }
.hr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hr-btns .k-btn { height: 64px; font-size: 22px; letter-spacing: 3px; }

/* ---------- expert console ---------- */
.hx-live { margin: 6px 0 18px; padding: 12px 14px 16px; border-radius: 12px; background: #0f1214; border: 2px solid #f0c14b; color: #e9ebee; }
.hx-live-h { font: 800 12px var(--mono); letter-spacing: 3px; color: #f0c14b; margin-bottom: 8px; }
.hx-sound { margin-top: 14px; border: 2px solid #f0c14b !important; }
.hx-sound.on { border-color: #7fd48a !important; }
.hx-photo .photo-wrap { max-width: 520px; }
.hx-maprow { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin: 12px 0; }
.hx-map { width: 440px; max-width: 100%; }
.hx-map svg { width: 100%; height: auto; }

/* MAP on the vault: a bigger dial, and the mirror note fits inside it */
#bomb.hostage .mod-hmap .cal-drift { font-size: 6.4px !important; letter-spacing: 0 !important; }
#bomb.hostage .mod-hmap .cal-dial { width: 168px; height: 168px; }