/* In-game HUD (MD §25, §27 palette; layout from design/refs/fp_house_exterior.png + fp_interior_rescue.png). */
:root {
  --bg: #0B1420; --panel: #172536; --accent: #D94132; --amber: #F5AE32; --blue: #39A8E8; --ok: #43B87A;
  --text: #F5F7FA; --muted: #9DAFBE; --danger: #F15B50;
  --glass: rgba(11, 20, 32, 0.72); --glass2: rgba(23, 37, 54, 0.78);
  --font: 'Bahnschrift SemiCondensed', 'Bahnschrift', 'Arial Narrow', 'Segoe UI', sans-serif;
}
html { font-size: clamp(11px, 1.5vh, 19px); }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0B1420; font-family: var(--font); color: var(--text); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.hidden { display: none !important; }

#boot { position: fixed; inset: 0; background: #0B1420; z-index: 50; }
.boot-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
#boot::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,rgba(4,10,18,.85)); pointer-events: none; }
.boot-box { position: absolute; left: 50%; bottom: max(5vh,env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(34rem,calc(100% - 3rem)); z-index: 1; }
.boot-track { width: 100%; height: .5rem; background: #101c2bcc; border: 1px solid #d4dfed42; border-radius: 1rem; margin: 0 auto .9rem; overflow: hidden; box-shadow: 0 2px 12px #0008; }
#boot-bar { height: 100%; width: 5%; background: linear-gradient(90deg, var(--accent), var(--amber)); transition: width .2s; }
#boot-text { min-height: 2.6em; text-align: center; color: #e0e8f0; letter-spacing: .15em; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; text-shadow: 0 2px 5px #000; }
@media (max-aspect-ratio: 1/1) { .boot-art { object-fit: contain; object-position: center 22%; } }
@media (prefers-reduced-motion: reduce) { #boot-bar { transition: none; } }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel { background: var(--glass); border: 1px solid rgba(157, 175, 190, 0.18); border-radius: 0.45rem; box-shadow: 0 0.3rem 1.2rem rgba(0,0,0,.35); }

/* top-left objectives */
.obj { position: absolute; left: 1.2rem; top: 1.2rem; width: 30rem; }
.obj .main { padding: 0.7rem 1rem 0.8rem; }
.obj h3 { margin: 0 0 0.4rem; font-size: 1.35rem; color: var(--amber); letter-spacing: 0.04em; display: flex; gap: 0.5rem; align-items: center; }
.obj h4 { margin: 0.2rem 0 0.35rem; font-size: 1.05rem; color: var(--amber); letter-spacing: 0.05em; }
.obj .opt { margin-top: 0.4rem; padding: 0.55rem 1rem 0.7rem; }
.obj .row { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1.15rem; line-height: 1.35; margin: 0.15rem 0; }
.obj .row i { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; border: 2px solid var(--text); border-radius: 50%; margin-top: 0.22rem; }
.obj .row.done { color: var(--ok); } .obj .row.done i { background: var(--ok); border-color: var(--ok); }
.obj .row.failed { color: var(--danger); text-decoration: line-through; } .obj .row.failed i { border-color: var(--danger); }
.obj .why { margin: 0.1rem 0 0.25rem 1.7rem; color: var(--warn, #f2c318); font-size: 0.95rem; font-weight: 700; line-height: 1.2; }   /* PT5-06: the fix under a failed optional */
.obj .row.now { color: var(--text); font-weight: 600; }
.obj .step { margin-top: 0.4rem; padding-top: 0.45rem; border-top: 1px solid rgba(157,175,190,.2); color: var(--blue); font-size: 1.1rem; }

/* top-centre incident phase + time */
.phase { position: absolute; left: 50%; top: 1.2rem; transform: translateX(-50%); text-align: center; padding: 0.4rem 1.4rem 0.5rem; min-width: 12rem; }
.phase small { display: block; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.12em; }
.phase b { font-size: 1.9rem; letter-spacing: 0.04em; }
.phase .bar { height: 0.3rem; background: #22324a; border-radius: 1rem; margin-top: 0.3rem; overflow: hidden; }
.phase .bar div { height: 100%; background: var(--ok); width: 0; }

/* minimap */
.mini { position: absolute; right: 1.2rem; top: 1.2rem; width: 15rem; padding: 0.3rem; }
.mini canvas { width: 100%; display: block; border-radius: 0.3rem; }
.mini .label { text-align: center; font-size: 0.95rem; letter-spacing: 0.08em; padding: 0.25rem 0 0.1rem; color: var(--text); }

/* crew list */
.crew { position: absolute; left: 1.2rem; top: 46vh; width: 13.5rem; }
.crew .m { display: grid; grid-template-columns: 1.6rem 1.8rem 1fr; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; margin-bottom: 0.3rem; }
.crew .m b { font-size: 1.15rem; font-weight: 600; }
.crew .m .n { font-size: 1.05rem; color: var(--muted); }
.crew .m .hp { grid-column: 3; height: 0.32rem; background: #22324a; border-radius: 1rem; overflow: hidden; }
.crew .m .hp div { height: 100%; background: var(--ok); }
.crew .m .st { grid-column: 3; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.06em; }
.crew svg { width: 1.6rem; height: 1.6rem; grid-row: span 3; }

/* vitals */
.vitals { position: absolute; left: 1.2rem; bottom: 1.2rem; width: 22rem; padding: 0.6rem 0.9rem; }
.vit { display: grid; grid-template-columns: 1.8rem 4.6rem 1fr; align-items: center; gap: 0.4rem; margin: 0.25rem 0; }
.vit b { white-space: nowrap; overflow: hidden; }   /* PT4-06: the O2 number overflowed under the bar */
.vit b .u { font-size: 0.8rem; color: var(--muted); margin-right: 0.2rem; }
.vit b .nomask { font-size: .8rem; color: #9DAFBE; }
.vit svg { width: 1.5rem; height: 1.5rem; }
.vit b { font-size: 1.55rem; }
.vit .track { height: 0.62rem; background: #22324a; border-radius: 1rem; overflow: hidden; }
.vit .track div { height: 100%; border-radius: 1rem; transition: width .15s; }
.vit.small b { font-size: 1.05rem; color: var(--muted); }
.vit.small .track { height: 0.38rem; }
.vit.warn b { color: var(--danger); animation: blink .6s steps(2) infinite; }

/* tool slots */
.slots { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; gap: 0.55rem; }
.slot { width: 6.2rem; text-align: center; position: relative; }
.slot .box { height: 5.2rem; display: grid; place-items: center; background: var(--glass); border: 2px solid rgba(157,175,190,.25); border-radius: 0.4rem; }
.slot .box svg { width: 3.3rem; height: 3.3rem; }
.raster-icon { border-radius: .22rem; overflow: hidden; flex-shrink: 0; }
.slot .box .raster-icon { width: 4.15rem; height: 4.15rem; }
.slot .slot-lock { position: absolute; top: .15rem; right: .15rem; display: grid; place-items: center; border: 1px solid #697b8c; border-radius: .2rem; }
.slot .box .slot-lock .raster-icon { width: 1.05rem; height: 1.05rem; }
.slot .box { background: linear-gradient(145deg,rgba(27,43,60,.94),rgba(11,20,32,.9)); box-shadow: 0 .25rem .7rem #0004; }
.slot.sel .box { border-color: #f2bc62; box-shadow: 0 0 1rem #e8a34333; }
.slot .nm { padding: .12rem 0; background: linear-gradient(transparent, #0b1420ee); }
.slot .nm { position: absolute; left: 0; right: 0; bottom: 1.85rem; font-size: 0.95rem; text-shadow: 0 1px 2px #000; }
.slot .k { display: inline-block; margin-top: 0.25rem; min-width: 1.4rem; padding: 0.05rem 0.3rem; background: var(--text); color: var(--bg); border-radius: 0.2rem; font-weight: 700; font-size: 0.95rem; }
.slot.sel .box { border-color: var(--amber); box-shadow: 0 0 0.9rem rgba(245,174,50,.45); }
.slot.locked { opacity: 0.45; } .slot.locked .nm::after { content: ' (locked)'; color: var(--muted); }

/* supply readout (bottom right) */
/* right stack under the minimap (PT1-11): supply readout + control hints, upper half of the screen */
.rstack { position: absolute; right: 1.2rem; top: 19rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.supply { width: 17rem; padding: 0.6rem 0.9rem; order: -1; }
.supply .t { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.1em; }
.supply .v { font-size: 1.35rem; font-weight: 600; margin-bottom: 0.25rem; }
.supply .track { height: 0.5rem; background: #22324a; border-radius: 1rem; overflow: hidden; margin-bottom: 0.4rem; }
.supply .track div { height: 100%; background: var(--blue); }
.supply .bad { color: var(--danger); }

/* control hints (right) */
.hints { display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }
.hints .h { display: flex; align-items: center; gap: 0.55rem; font-size: 1.1rem; text-shadow: 0 1px 3px #000; }
.key { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.35rem; background: var(--text); color: var(--bg); border-radius: 0.25rem; font-weight: 700; font-size: 0.95rem; box-shadow: 0 2px 0 #7b8a98; }
.key.mouse { background: none; box-shadow: none; }

/* radio feed (top right, below map) */
.radio { position: absolute; right: 17.5rem; top: 9.5rem; width: 19rem; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; }
.radio .msg { background: var(--glass2); border-left: 3px solid var(--blue); padding: 0.35rem 0.7rem; font-size: 1.05rem; border-radius: 0.25rem; animation: slidein .25s ease-out; }
.radio .msg b { color: var(--amber); margin-right: 0.35rem; }
.radio .msg.warn { border-left-color: var(--amber); } .radio .msg.danger { border-left-color: var(--danger); }

/* centre: crosshair, prompt with hold ring, toast */
.cross { position: absolute; left: 50%; top: 50%; width: 0.35rem; height: 0.35rem; margin: -0.175rem; border-radius: 50%; background: rgba(245,247,250,.85); box-shadow: 0 0 2px #000; }
.prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.prompt .p { display: flex; align-items: center; gap: 0.55rem; background: var(--glass); padding: 0.45rem 0.9rem; border-radius: 0.35rem; font-size: 1.25rem; border: 1px solid rgba(57,168,232,.45); }
.prompt .sub { color: var(--muted); font-size: 0.95rem; }
.prompt .ring { width: 2.1rem; height: 2.1rem; }
.prompt .secs { color: #9fd4f5; font-variant-numeric: tabular-nums; font-size: 1.05rem; min-width: 3.2em; text-align: right; }
.toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; text-shadow: 0 2px 8px #000; text-align: center; transition: opacity .4s; }
.toast small { display: block; font-size: 1.1rem; font-weight: 400; color: var(--muted); }
.warnbar { position: absolute; left: 50%; top: 9.5rem; transform: translateX(-50%); padding: 0.4rem 1rem; background: rgba(241,91,80,.85); border-radius: 0.3rem; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.05em; animation: blink 1s steps(2) infinite; }

/* world markers */
.wmark { position: absolute; left: 0; top: 0; text-align: center; transform-origin: 0 0; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.wmark .ic { width: 2.6rem; height: 2.6rem; margin: 0 auto 0.2rem; display: grid; place-items: center; background: var(--glass); border: 2px solid var(--amber); border-radius: 0.4rem; }
.wmark .ic svg { width: 1.9rem; height: 1.9rem; }
.wmark b { display: block; font-size: 1.15rem; } .wmark span { font-size: 1.3rem; color: var(--amber); font-weight: 700; }
.wmark.safe .ic { border-color: var(--ok); } .wmark.safe span { color: var(--ok); }
.wmark.blue .ic { border-color: var(--blue); } .wmark.blue span { color: var(--blue); }
.wmark.danger .ic { border-color: var(--danger); animation: blink .8s steps(2) infinite; } .wmark.danger b, .wmark.danger span { color: var(--danger); }
.wmark.thru { opacity: 0.62; } .wmark.thru .ic { background: transparent; border-style: dashed; animation: none; transform: scale(0.8); }   /* PT5-07: out of sight = a distance pin */
.wmark.guide .ic { border-color: #FFC83D; box-shadow: 0 0 0.6rem #FFC83D; } .wmark.guide b { color: #FFE7A0; } .wmark.guide span { color: #FFC83D; }
.coach .skip { border: 1px solid var(--muted); border-radius: 0.25rem; padding: 0 0.3rem; }
.wmark.hot .ic { border-color: #FF7A2E; } .wmark.hot span { color: #FF7A2E; }
/* fire progress (PT3-03): every burning room with a strength bar that drops under the stream */
.obj .fire { margin-top: 0.45rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 0.35rem; }
.obj .fire .hd { display: flex; justify-content: space-between; font-size: 0.95rem; color: #FF9A4A; letter-spacing: 0.08em; font-weight: 700; }
.obj .fire .fr { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: 0.5rem; align-items: center; font-size: 1rem; margin: 0.15rem 0; }
.obj .fire .fr .tr { height: 0.55rem; background: #22324a; border-radius: 1rem; overflow: hidden; }
.obj .fire .fr .tr div { height: 100%; background: linear-gradient(90deg,#F5AE32,#F15B50); transition: width .25s linear; }
.obj .fire .fr b { text-align: right; color: #FFB27A; }

/* vehicle HUD */
.veh { position: absolute; right: 1.2rem; bottom: 1.2rem; width: 17rem; padding: 0.7rem 1rem; }
.veh .spd { font-size: 3rem; font-weight: 700; line-height: 1; } .veh .spd small { font-size: 1rem; color: var(--muted); margin-left: 0.3rem; }
.veh .row { display: flex; justify-content: space-between; font-size: 1.05rem; margin-top: 0.35rem; }
.veh .on { color: var(--amber); }

/* fire-cell debug overlay */
/* debug cell table: bottom-left between the crew cards and the vitals, clear of objectives, toasts and radio (lead audit c1) */
.dbg { position: absolute; left: 1.2rem; bottom: 10rem; pointer-events: none; font: 11px/1.3 Consolas, monospace; background: rgba(0,0,0,.6); padding: 0.4rem 0.6rem; white-space: pre; border-radius: 0.3rem; }
.perf { position: absolute; left: 50%; bottom: 8rem; transform: translateX(-50%); font: 12px Consolas, monospace; background: rgba(0,0,0,.55); padding: 0.2rem 0.5rem; border-radius: 0.2rem; }

.smoke { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(48, 40, 34, 0.55) 0%, rgba(30, 25, 22, 0.92) 70%); opacity: 0; transition: opacity .35s; }
.damage { position: absolute; inset: 0; box-shadow: inset 0 0 12rem rgba(241, 91, 80, 0); transition: box-shadow .2s; }
.heatfx { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 110, 30, 0)); }

@keyframes blink { 50% { opacity: 0.45; } }
@keyframes slidein { from { transform: translateX(1rem); opacity: 0; } }

/* Q crew order wheel (ai.wheel) */
.wheel { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.wheel .hub { position: absolute; transform: translate(-50%, -50%); width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: rgba(11,20,32,.85); border: 2px solid var(--amber); font-weight: 700; letter-spacing: .06em; }
.wheel .hub small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); letter-spacing: 0; margin-top: .3rem; padding: 0 .6rem; }
.wheel .slice { position: absolute; left: 0; top: 0; min-width: 7.5rem; padding: .45rem .7rem; text-align: center; background: var(--glass2); border: 1px solid rgba(157,175,190,.3);
  border-radius: .4rem; font-size: 1.05rem; white-space: nowrap; }
.wheel .slice small { display: block; font-size: .75rem; color: var(--danger); }
.wheel .slice.sel { border-color: var(--blue); background: #1d3b58; box-shadow: 0 0 .8rem rgba(57,168,232,.5); }
.wheel .slice.off { opacity: .55; }
.veh .hyd { margin-top: 0.45rem; padding: 0.35rem 0.5rem; border-radius: 0.25rem; background: rgba(245,174,50,.16); color: var(--amber); font-size: 1rem; font-weight: 600; }
.veh .hyd.ok { background: rgba(67,184,122,.18); color: var(--ok); }
/* first-call coach (MD §36): one short line under the phase banner, key chip first */
.coach { position: absolute; left: 50%; top: 5.6rem; transform: translateX(-50%); display: flex; gap: 0.6rem; align-items: center; max-width: min(46rem, 70vw);
  padding: 0.45rem 0.9rem; border-radius: 0.4rem; background: rgba(11,20,32,.82); border: 1px solid rgba(245,174,50,.55); font-size: 1.15rem; font-weight: 600; }
.coach .kbd { flex: 0 0 auto; min-width: 1.6rem; text-align: center; padding: 0.1rem 0.4rem; border-radius: 0.25rem; background: var(--amber); color: #111; font-weight: 800; }
.coach small { color: var(--muted); font-weight: 400; margin-left: 0.3rem; }

/* short windows (824x466 class): the right stack keeps to the upper half - hints in two columns, tighter supply card */
@media (max-height: 560px) {
  .rstack { top: 18.6rem; gap: 0.4rem; }   /* the minimap is ~17.5rem tall here */
  .hints { display: grid; grid-template-columns: auto auto; column-gap: 0.9rem; row-gap: 0.25rem; }
  .supply { padding: 0.35rem 0.7rem; }
  .supply .v { font-size: 1.15rem; margin-bottom: 0.1rem; }
}