:root {
  --bg: #15181c; --panel: #1e2228; --panel2: #262b33; --line: #343a44;
  --text: #e6e8eb; --muted: #9aa3ad; --accent: #e0a526; --red: #d9413d; --green: #4caf6e; --blue: #4d9be6;
  --skin: #5d6672; --skin2: #6e7885; --radius: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.4; display: flex; flex-direction: column; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
h2 { font-size: 15px; margin: 0; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
h2 small { text-transform: none; font-weight: normal; margin-left: 6px; }
.mono { font-variant-numeric: tabular-nums; }
.btn { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 600; }
.btn.small { padding: 4px 10px; font-size: 13px; }

/* top bar */
#topbar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 800; letter-spacing: .12em; color: var(--accent); font-size: 18px; }
.status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px; white-space: nowrap; }
.chip.warn { border-color: var(--red); color: #ff9b98; }
.chip.ok { border-color: var(--green); }
.hpwrap { display: flex; align-items: center; gap: 8px; }
.hpbar { width: 140px; height: 12px; background: #0e1013; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
#hpfill { height: 100%; width: 100%; background: var(--green); transition: width .4s, background .4s; }
#hplabel { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vitals { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.vitals .chip { font-size: 12px; }
.vitals .chip b { color: var(--text); font-weight: 600; }
.vitals .chip i { color: var(--muted); font-style: normal; }
.controls { display: flex; gap: 6px; margin-left: auto; }

/* layout */
#layout { display: grid; grid-template-columns: 320px minmax(320px, 1fr) 320px; gap: 12px; padding: 12px; flex: 1; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line); gap: 8px; }
.panel-body { padding: 10px 12px; overflow: auto; flex: 1; }
#cardTab { display: none; }

/* flip */
.flip { perspective: 1400px; background: transparent; border: 0; }
.flip-inner { position: relative; height: 100%; min-height: 560px; transition: transform .6s; transform-style: preserve-3d; }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; }
.face.back { transform: rotateY(180deg); }

/* hints */
.hint-block { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hint-block > h3 { margin: 0; padding: 8px 10px; font-size: 14px; background: var(--panel2); cursor: pointer; display: flex; justify-content: space-between; }
.hint-block.current > h3 { background: #3a3016; color: var(--accent); }
.hint-block ul { margin: 0; padding: 8px 10px 8px 26px; font-size: 13.5px; color: #cfd4da; }
.hint-block li { margin-bottom: 4px; }
.hint-block.collapsed ul { display: none; }

/* kit */
.kit-group { margin-bottom: 10px; }
.kit-group h3 { font-size: 12px; color: var(--muted); margin: 8px 0 4px; text-transform: uppercase; }
.kit-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 5px; cursor: pointer; background: var(--panel2); }
.kit-item:hover, .kit-item.selected { border-color: var(--accent); }
.kit-item.empty { opacity: .4; }
.kit-item .qty { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.kit-item .ico { width: 26px; height: 26px; border-radius: 6px; background: #0e1013; display: grid; place-items: center; font-size: 14px; }
.kit-info { font-size: 13px; color: #cfd4da; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panel2); margin-bottom: 10px; border-radius: 0 8px 8px 0; }

/* scene */
#scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.bubble { min-height: 44px; max-width: 420px; background: #fff; color: #111; border-radius: 14px; padding: 8px 14px; font-size: 14px; position: relative; opacity: 0; transition: opacity .3s; }
.bubble.show { opacity: 1; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }
.figure-wrap { position: relative; width: min(100%, 330px); }
#body { width: 100%; height: auto; display: block; }
.mark { pointer-events: none; }
.mark.blood { fill: var(--red); opacity: .85; }
.mark.tq { fill: #111; stroke: var(--accent); stroke-width: 1.5; }
.mark.tq.loose { stroke: var(--red); }
.mark.dress { fill: #f1f1f1; stroke: #999; }
.mark.seal { fill: #3a74b5; stroke: #cfe3ff; }
.mark.shield { fill: #ccc; }
.mark.label { font-size: 11px; fill: #fff; font-weight: 700; }
.blanket-outline { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 8 5; opacity: .9; }
.overlays { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 4px; }
.overlays .chip { font-size: 12px; }
.log { width: 100%; max-width: 640px; font-size: 13px; max-height: 190px; overflow: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.log div { padding: 2px 0; color: #cfd4da; }
.log .t { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.log .warn { color: #ffb3b0; } .log .death { color: var(--red); font-weight: 600; } .log .ok { color: #9fe0b4; } .log .find { color: #f3d58a; } .log .say { color: #fff; font-style: italic; } .log .sys { color: var(--muted); }

/* popover */
.popover { position: fixed; z-index: 30; max-height: calc(100vh - 16px); overflow-y: auto; background: var(--panel2); border: 1px solid var(--accent); border-radius: 10px; padding: 8px; width: 290px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.popover h4 { margin: 0 0 6px; font-size: 13px; color: var(--accent); display: flex; justify-content: space-between; }
.popover .close { cursor: pointer; color: var(--muted); }
.popover .seen { font-size: 12.5px; color: #cfd4da; margin-bottom: 6px; }
.busy { position: absolute; inset: 0; background: rgba(21,24,28,.75); z-index: 16; display: grid; place-items: center; }
.busy-label { font-size: 16px; margin-bottom: 10px; text-align: center; }
.busy-bar { width: 240px; height: 10px; background: #0e1013; border-radius: 5px; overflow: hidden; }
#busyFill { height: 100%; width: 0; background: var(--accent); }

/* casualty card */
.card-body label { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.card-body input[type=text], .card-body textarea, .card-body select { width: 100%; background: #0e1013; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin-top: 2px; }
.card-body textarea { min-height: 60px; resize: vertical; }
.card-body .checks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.card-body .checks label { display: inline-flex; gap: 4px; align-items: center; color: var(--text); margin: 0; }
.card-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.card-body td { padding: 2px; }
.card-body td input { width: 100%; }
.card-body .hintline { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: grid; place-items: center; z-index: 50; padding: 12px; overflow: auto; }
.modal[hidden] { display: none; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; width: min(560px, 100%); }
.modal-box.wide { width: min(860px, 100%); max-height: 95vh; overflow: auto; }
.modal-box h1 { margin: 0 0 6px; color: var(--accent); letter-spacing: .12em; }
.modal-box label { display: block; margin: 12px 0 8px; color: var(--muted); font-size: 13px; }
.modal-box input[type=text] { width: 100%; background: #0e1013; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 16px; margin-top: 4px; }
.modal-box .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.howto { color: #cfd4da; font-size: 14px; padding-left: 20px; }

/* debrief */
.debrief-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.score { font-size: 42px; font-weight: 800; color: var(--accent); }
.outcome { font-size: 22px; font-weight: 700; } .outcome.dead { color: var(--red); } .outcome.alive { color: var(--green); }
.debrief h3 { margin: 16px 0 6px; font-size: 15px; }
.finding { padding: 6px 10px; border-left: 3px solid var(--line); margin-bottom: 5px; font-size: 14px; background: var(--panel2); border-radius: 0 6px 6px 0; }
.finding.critical { border-color: var(--red); } .finding.major { border-color: #e98b3a; } .finding.minor { border-color: #b8b8b8; } .finding.good { border-color: var(--green); }
.finding .sev { font-size: 11px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.timeline { width: 100%; font-size: 13px; border-collapse: collapse; }
.timeline td { padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.timeline tr.bad td:first-child { color: var(--red); }

/* tabs (mobile) */
#tabs { display: none; }
@media (max-width: 900px) {
  #layout { display: block; padding: 8px; }
  #tabs { display: flex; position: sticky; top: 0; z-index: 25; background: var(--panel); border-bottom: 1px solid var(--line); }
  #tabs button { flex: 1; background: none; border: 0; color: var(--muted); padding: 10px 4px; border-bottom: 3px solid transparent; }
  #tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
  #topbar { position: static; padding: 6px 10px; gap: 8px; }
  .brand { display: none; }
  .hpbar { width: 90px; }
  .controls { margin-left: 0; }
  #layout > [data-tab] { display: none !important; }
  #layout > [data-tab].active-tab { display: flex !important; }
  #rightPanel, #leftPanel { display: none !important; }
  #cardTab.active-tab { display: flex !important; }
  .flipBtn { display: none; }
  #leftPanel.active-tab, #rightPanel.active-tab { display: block !important; }
  .flip-inner { min-height: 0; height: auto; transform: none !important; }
  .face { position: static; } .face.back { display: none; }
  .panel { max-height: none; }
  .popover { width: min(92vw, 320px); }
  .bubble { max-width: 100%; }
  .log { max-height: 150px; }
}

@media (min-width: 901px) {
  body { height: 100vh; overflow: hidden; }
  #layout { overflow: hidden; }
  #layout > aside, #scene { min-height: 0; height: 100%; }
  #scene { overflow-y: auto; overflow-x: hidden; }
  .flip-inner { min-height: 0; }
  .figure-wrap { width: min(100%, 330px, calc((100vh - 330px) * 0.52)); min-width: 220px; }
}

/* body silhouette */
.zone { stroke: #0e1013; stroke-width: 2; cursor: pointer; transition: filter .15s; }
.zone:hover { filter: brightness(1.25); stroke: var(--accent); stroke-width: 2.5; }
.zone.applicable { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 3; }
.zone.amputated { stroke: #d9413d; stroke-dasharray: 6 4; }
.mark.stain { fill: #6e1414; }
.mark.blood { fill: #d9413d; }
.mark.blood.pulse { animation: bleed 1s ease-in-out infinite; }
@keyframes bleed { 50% { opacity: .45; } }
.mark.tq { fill: #121212; stroke: #e0a526; stroke-width: 1.5; }
.mark.tq.loose { stroke: #d9413d; stroke-dasharray: 3 2; }
.mark.tq-rod { fill: #e0a526; }
.mark.label { font-size: 12px; fill: #fff; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.figure-wrap { position: relative; }
.view-btn { position: absolute; right: 0; top: 0; z-index: 2; display: inline-flex; align-items: center; gap: 4px; }

/* icon tiles */
.icon { flex: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 8px 4px 6px; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); cursor: pointer; }
.tile:hover { border-color: var(--accent); color: var(--accent); }
.tile .cap { font-size: 11.5px; line-height: 1.15; text-align: center; }
.tile .dur { position: absolute; top: 3px; right: 5px; font-size: 9.5px; color: var(--muted); }
.tile.cat-CUF { border-color: #7a3a2a; }
.tile.end { border-color: var(--green); color: #9fe0b4; }
.popover { width: 300px; }
.popover .tiles { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.popover .muted { color: var(--muted); }
.kit-item .ico { color: var(--accent); }
.modal-box label.inline { display: flex; gap: 8px; align-items: center; color: var(--text); }

/* casualty card: paper form */
.paper { background: #efe9da; color: #1d1d1b; border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.paper input[type=text], .paper textarea { background: #fbf8f0 !important; color: #1d1d1b !important; border: 1px solid #b9b19c !important; border-radius: 4px; padding: 4px 6px; }
.paper label { color: #4a463c !important; }
.paper .checks label { color: #1d1d1b !important; }
.paper-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1d1d1b; padding-bottom: 4px; margin-bottom: 4px; letter-spacing: .05em; }
.paper-head .auto { display: inline-flex !important; gap: 4px; margin: 0 !important; font-size: 12px; letter-spacing: 0; }
.prow { display: flex; gap: 8px; } .prow > label { flex: 1; } .prow > label.narrow { flex: 0 0 90px; }
.plabel { margin-top: 10px; font-size: 11px; text-transform: uppercase; color: #4a463c; font-weight: 700; }
.tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.tool { font-size: 11.5px; padding: 3px 7px; border-radius: 4px; border: 1px solid #b9b19c; background: #fbf8f0; color: #1d1d1b; cursor: pointer; }
.tool.on { background: #1d1d1b; color: #efe9da; border-color: #1d1d1b; }
.cfigs { display: flex; gap: 6px; margin-top: 6px; }
.cfig { flex: 1; text-align: center; }
.cfig svg { width: 100%; height: auto; max-height: 260px; }
.cfig-cap { font-size: 11px; color: #4a463c; }
.cz { fill: #fbf8f0; stroke: #1d1d1b; stroke-width: 2; cursor: pointer; }
.cz:hover { fill: #f1dca3; }
.cm { fill: none; stroke: #1d1d1b; stroke-width: 3; pointer-events: none; }
.cm.red { stroke: #b3261e; } .cm.thick { stroke-width: 5; } .cm.blue { stroke: #1f5fa8; fill: rgba(31,95,168,.15); }
.cm.fillink { fill: #1d1d1b; } .cm.hatch { fill: rgba(29,29,27,.15); stroke-width: 2; }
.ct { font-size: 15px; font-weight: 700; fill: #1d1d1b; text-anchor: middle; pointer-events: none; }
.ct.red { fill: #b3261e; } .ct.small { font-size: 12px; }
.tqrow { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .tqrow input { width: 80px !important; }
.vit { width: 100%; border-collapse: collapse; margin-top: 4px; } .vit th { font-size: 11px; text-align: left; color: #4a463c; } .vit td { padding: 1px; } .vit input { width: 100%; }
.addrow { margin-top: 4px; font-size: 12px; background: none; border: 1px dashed #8d8673; color: #1d1d1b; border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.card-body { padding: 8px; }

@media (max-width: 900px) {
  #topbar { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; }
  #topbar .status { gap: 5px; }
  #topbar .chip { font-size: 12px; padding: 2px 8px; }
  #topbar .controls { grid-column: 2; grid-row: 1; align-self: start; }
  #topbar .vitals { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #topbar .vitals::-webkit-scrollbar { display: none; }
  .hpbar { width: 64px; }
  #tabs button { padding: 8px 4px; font-size: 14px; }
  .bubble { min-height: 0; font-size: 13px; padding: 5px 10px; }
  .figure-wrap { width: min(100%, 250px, calc((100vh - 330px) * 0.5)); min-width: 170px; }
  .view-btn { right: -6px; }
  .tile { min-height: 58px; }
}

/* scene: feed on top, actions either side of the figure, log below */
#scene { gap: 8px; }
.feed { width: 100%; max-width: 760px; min-height: 56px; max-height: 28vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; flex: none; }
.feed-item { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 7px; padding: 3px 9px; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.feed-item .t { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; font-size: 12px; }
.feed-item.find { border-left-color: #f3d58a; } .feed-item.warn { border-left-color: #ff9b98; color: #ffd0ce; }
.feed-item.death { border-left-color: var(--red); color: #ff9b98; font-weight: 600; } .feed-item.ok { border-left-color: var(--green); }
.feed-item.sys { border-left-color: var(--line); color: var(--muted); }
.feed-item.new { animation: feedIn .3s ease-out; }
.feed-item.leaving { animation: feedOut .45s ease-in forwards; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes feedOut { to { opacity: 0; transform: translateY(48px); } }
.log .arrived { background: rgba(224,165,38,.16); border-radius: 4px; }
.log { flex: 1 1 auto; min-height: 60px; max-height: none; }

.stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; width: 100%; align-items: start; flex: none; }
.side-actions { display: grid; grid-template-columns: repeat(2, 70px); gap: 6px; align-content: start; }
#actionsLeft { justify-content: end; } #actionsRight { justify-content: start; }
.side-actions .tile { min-height: 62px; }
.figure-wrap { position: relative; width: clamp(190px, calc((100vh - 310px) * 0.52), 300px); }
.bubble { position: absolute; top: -10px; left: 65%; max-width: 200px; min-height: 0; z-index: 3; padding: 6px 12px; font-size: 13.5px; pointer-events: none; }
.bubble::after { left: 16px; transform: none; }
.figure-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); padding: 2px 8%; }
.view-btn { position: static; display: inline-flex; align-items: center; gap: 4px; }
.overlays { top: 0; left: -4px; }

@media (max-width: 1180px) and (min-width: 901px) {
  .side-actions { grid-template-columns: 70px; }
}
@media (max-width: 900px) {
  .feed { max-height: 24vh; min-height: 44px; }
  .feed-item { font-size: 13px; padding: 4px 8px; }
  .stage { grid-template-columns: 60px 1fr 60px; gap: 6px; }
  .side-actions { grid-template-columns: 60px; gap: 5px; }
  .side-actions .tile { min-height: 54px; padding: 6px 2px 4px; }
  .side-actions .tile .cap { font-size: 10px; }
  .figure-wrap { width: auto; max-width: calc((100vh - 290px) * 0.52); justify-self: center; min-width: 0; }
  .bubble { left: 50%; max-width: 160px; font-size: 12.5px; }
  .log { max-height: 160px; }
}
.mark.tq.loosened { fill: #555; stroke: #999; stroke-dasharray: 2 2; opacity: .7; }
.figure-wrap.far #body { opacity: .45; transform: scale(.82); transform-origin: 50% 30%; transition: opacity .4s, transform .4s; }
.figure-wrap #body { transition: opacity .4s, transform .4s; }
.far-label { position: absolute; left: 50%; top: 46%; transform: translateX(-50%); z-index: 2; background: rgba(14,16,19,.85); border: 1px dashed #d9413d; color: #ffb3b0; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.chip.pos { font-weight: 600; }

/* blood, burns */
.pool { fill: #5e0f0f; opacity: .85; }
.pool.growing { animation: poolPulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes poolPulse { 50% { transform: scale(1.06); } }
.mark.stain { fill: #6e1414; opacity: .6; }
.mark.stain.wet { opacity: .9; fill: #8a1717; animation: soak 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mark.stain.wet.fast { animation-duration: .8s; }
@keyframes soak { 50% { transform: scale(1.12); fill: #a51c1c; } }
.mark.blood.ooze { animation: bleed 2.2s ease-in-out infinite; }
.spurt .drop { fill: #d9413d; transform-box: fill-box; transform-origin: center; animation: .72s ease-out infinite; opacity: 0; }
.spurt .drop-a { animation-name: spurtA; } .spurt .drop-b { animation-name: spurtB; } .spurt .drop-c { animation-name: spurtC; }
@keyframes spurtA { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(-18px, -6px) scale(.5); } }
@keyframes spurtB { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(4px, -20px) scale(.5); } }
@keyframes spurtC { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(18px, -4px) scale(.5); } }
.mark.seep { fill: #b3261e; opacity: .75; animation: bleed 1.4s ease-in-out infinite; }
.mark.dress.light { fill: rgba(241,241,241,.85); }
.mark.burn { fill: #e07a45; stroke: #b9472a; stroke-width: 1.5; opacity: .92; }
.mark.burn.deep { fill: #8d4a2c; stroke: #3b1d10; }
.mark.blister { fill: #f6d7a8; stroke: #c98a5a; stroke-width: .8; }
.mark.char { fill: #231710; stroke: #c25a24; stroke-width: 2; stroke-dasharray: 3 2; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .spurt .drop, .pool.growing, .mark.stain.wet, .mark.seep, .mark.blood.pulse, .mark.blood.ooze { animation: none; } .spurt .drop { opacity: .8; } }
.mark.label.small { font-size: 9.5px; }
.pool.growing { animation: poolBeat .9s ease-in-out infinite; }
@keyframes poolBeat { 0%, 100% { transform: scale(1); opacity: .8; } 35% { transform: scale(1.07); opacity: .97; } }
.tile.nag { border-color: #e0c026; color: #ffe066; background: #3a3410; animation: nag 1s ease-in-out infinite; }
@keyframes nag { 50% { box-shadow: 0 0 0 4px rgba(224,192,38,.35); } }

/* auto-help */
.autohelp { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); margin-right: 6px; cursor: pointer; white-space: nowrap; }
.autohelp input { accent-color: var(--accent); }
.tile.hint, .btn.hint, .popover button.hint { position: relative; border-color: #4dd2ff !important; color: #bdf0ff !important; animation: hintBlink .8s ease-in-out infinite; }
.tile.hint::before { content: "➜"; position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: #4dd2ff; font-size: 16px; animation: hintNudge .8s ease-in-out infinite; }
#actionsLeft .tile.hint::before { left: auto; right: -16px; transform: translateY(-50%) scaleX(-1); }
@keyframes hintBlink { 50% { box-shadow: 0 0 0 4px rgba(77,210,255,.45); } }
@keyframes hintNudge { 50% { margin-left: -4px; } }
.zone.hint-zone { stroke: #4dd2ff !important; stroke-width: 4 !important; stroke-dasharray: none !important; animation: zoneBlink .8s ease-in-out infinite; }
@keyframes zoneBlink { 50% { stroke-opacity: .25; } }
.hint-arrow { fill: #4dd2ff; animation: zoneBlink .8s ease-in-out infinite; }
@media (max-width: 900px) { .autohelp { font-size: 11px; } }

/* printable report: hidden on screen, the only thing printed */
#printReport { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  body { background: #fff !important; color: #111 !important; height: auto !important; overflow: visible !important; display: block; }
  body > *:not(#printReport) { display: none !important; }
  #printReport { display: block !important; font-size: 10.5pt; line-height: 1.35; }
  .rep h1 { font-size: 16pt; margin: 0 0 4px; color: #111; letter-spacing: 0; }
  .rep h2 { font-size: 12pt; margin: 14px 0 4px; border-bottom: 1px solid #999; padding-bottom: 2px; color: #111; text-transform: none; }
  .rep-meta { color: #444; font-size: 9pt; }
  .rep-result { display: flex; gap: 14px; align-items: center; margin-top: 8px; border: 1px solid #999; padding: 6px 10px; }
  .rep-score { font-size: 26pt; font-weight: 800; } .rep-score small { font-size: 11pt; color: #555; }
  .rep ul { margin: 2px 0; padding-left: 18px; } .rep li { margin: 1px 0; }
  .rep .sev-critical b { color: #b3261e; } .rep .sev-major b { color: #b85c00; }
  .rep table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  .rep th, .rep td { border: 1px solid #bbb; padding: 2px 5px; text-align: left; vertical-align: top; }
  .rep tr { break-inside: avoid; } .rep tr.bad td:first-child { color: #b3261e; font-weight: 700; }
  .rep-log .k-death td, .rep-log .k-warn td { color: #b3261e; } .rep-log .k-find td { font-weight: 600; }
  .rep-card { display: flex; gap: 12px; break-inside: avoid; } .rep-figs { display: flex; gap: 4px; width: 46%; }
  .rep .cfig svg { width: 100%; max-height: 300px; } .rep .cfig-cap { font-size: 8pt; text-align: center; }
  .rep .cz { fill: #fff; stroke: #111; } .rep .cm { stroke: #111; }
}
@media print {
  .rep h3 { font-size: 10.5pt; margin: 8px 0 3px; }
  .rep-seed { font-size: 12pt; margin: 2px 0; }
  .rep-snaps { display: flex; gap: 10px; justify-content: center; break-inside: avoid; }
  .rep .snap { width: 42%; text-align: center; } .rep .snap svg { width: 100%; height: auto; max-height: 120mm; }
  .rep .snap-cap { font-size: 8pt; color: #444; }
  .rep .snap .spurt, .rep .snap [class*="hint"] { display: none; }
  * { animation: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- compact top bar: icons, progress, clock, buttons; details live in tooltips ---- */
#topbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 4px 10px; min-height: 0; }
#topbar .brand { font-size: 12px; letter-spacing: .14em; margin-right: 2px; }
#topbar .status { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
#topbar .chip.ic { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 12px; line-height: 1.2; height: 24px; }
#topbar .chip.ic b { font-weight: 600; font-variant-numeric: tabular-nums; }
#topbar .chip.ic .icon { flex: none; }
#topbar .chip.ok { border-color: var(--green); color: #9fe0b4; }
#topbar .vitals { display: flex; gap: 4px; flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
#topbar .vitals::-webkit-scrollbar { display: none; }
#topbar .vitals .chip { flex: none; }
#topbar .vitals[hidden] { display: none; }
#topbar .hpwrap { display: inline-flex; align-items: center; gap: 4px; color: var(--red); }
#topbar .hpbar { width: 56px; height: 8px; }
#topbar .controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
#topbar .btn.small { padding: 2px 8px; font-size: 13px; height: 24px; line-height: 1; }
.autohelp { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 24px; margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--muted); cursor: pointer; }
.autohelp input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.autohelp:has(input:checked) { color: #bdf0ff; border-color: #4dd2ff; background: #10303b; }
.autohelp:has(input:focus-visible) { outline: 2px solid var(--accent); }

/* ---- toasts: overlay at the bottom of the screen, never moving the figure ---- */
#toasts { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(760px, calc(100vw - 20px)); z-index: 28; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#toasts .feed { width: 100%; max-width: none; min-height: 0; max-height: 42vh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; -webkit-mask-image: none; mask-image: none; }
#toasts .feed-item { background: rgba(38,43,51,.96); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
#toasts .feed-item.new { animation: toastIn .28s ease-out; }
#toasts .feed-item.leaving { animation: toastOut .45s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(28px); } }
.hint-toast { align-self: center; max-width: 100%; background: #10303b; border: 1px solid #4dd2ff; border-radius: 999px; color: #d6f6ff; padding: 6px 14px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.5); animation: toastIn .25s ease-out; }
.hint-toast[hidden] { display: none; }
.hint-toast b { color: #4dd2ff; margin-right: 4px; }

/* the figure is no longer pushed by a feed above it, so it can use that height */
@media (min-width: 901px) { .figure-wrap { width: clamp(190px, calc((100vh - 250px) * 0.52), 300px); } }

@media (max-width: 900px) {
  #topbar { display: flex; flex-wrap: wrap; padding: 4px 8px; gap: 4px 6px; }
  #topbar .brand { display: none; }
  #topbar .status { gap: 4px; }
  #topbar .hpbar { width: 44px; }
  #topbar .vitals { order: 3; flex: 1 1 100%; }
  #topbar .controls { margin-left: auto; }
  #toasts { bottom: calc(6px + env(safe-area-inset-bottom)); }
  #toasts .feed { max-height: 30vh; }
  .hint-toast { font-size: 13px; padding: 5px 12px; border-radius: 12px; }
}

/* debrief: buttons always fit, the chronology is a collapsed block below them */
.modal-box .debrief-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.modal-box .debrief-actions .btn { flex: 1 1 140px; max-width: 220px; text-align: center; padding: 8px 10px; }
.timeline-box { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; }
.timeline-box > summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 14px; list-style: none; }
.timeline-box > summary::-webkit-details-marker { display: none; }
.timeline-box > summary::before { content: "▸"; display: inline-block; margin-right: 8px; color: var(--accent); transition: transform .15s; }
.timeline-box[open] > summary::before { transform: rotate(90deg); }
.timeline-box .timeline { margin: 0 8px 8px; width: calc(100% - 16px); font-size: 13px; }
@media (max-width: 900px) {
  .modal-box { padding: 14px; }
  .modal-box .debrief-actions .btn { flex: 1 1 calc(50% - 8px); max-width: none; }
  .timeline td { padding: 3px 4px; }
}
@media (max-width: 900px) {
  #topbar .chip.ic { padding: 2px 5px; gap: 3px; font-size: 11.5px; }
  #topbar .status { flex: 0 1 auto; min-width: 0; }
  #topbar .hpwrap .icon { display: none; }
  #topbar .hpbar { width: 34px; }
  #topbar .controls { flex: none; }
}
.weapon-rect { fill: #e8862a; stroke: #8a4b10; stroke-width: 2; }
.weapon-label { fill: #231100; font-size: 15px; font-weight: 800; letter-spacing: .02em; }

/* toasts are light cards: they must not melt into the dark log underneath */
#toasts .feed-item { background: #f4f1e8; color: #16191d; border: 1px solid #fff; border-left: 5px solid var(--accent); font-weight: 500; box-shadow: 0 6px 18px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.45); }
#toasts .feed-item .t { color: #5b6168; }
#toasts .feed-item.find { background: #fff1c4; border-left-color: #d79a00; }
#toasts .feed-item.warn { background: #ffe1de; border-left-color: #d9413d; color: #4a0f0c; }
#toasts .feed-item.ok { background: #dcf3e3; border-left-color: #2e9b57; }
#toasts .feed-item.sys { background: #e4e7ea; color: #3b4148; border-left-color: #8a9199; }
#toasts .feed-item.death { background: #d9413d; color: #fff; border-left-color: #7d1512; }
#toasts .feed-item.death .t { color: #ffd9d6; }
.hint-toast { background: #0b2a35; border-width: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.65), 0 0 0 3px rgba(77,210,255,.2); }

/* kit panel: description opens inside the item; two sections in the casualty-kit mode */
.kit-item { display: block; }
.kit-row { display: flex; align-items: center; gap: 8px; }
.kit-use { margin: 8px 0 2px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 13px; color: #d9dde1; line-height: 1.4; }
.kit-item.selected { background: #2b2f26; }
.kit-title { margin: 10px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.kit-sec:first-child .kit-title { margin-top: 0; }
.kit-locked { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; }
.kit-empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* the casualty's own kit lying on the ground */
.kit-mark { cursor: pointer; }
.kit-rect { fill: #2f8f55; stroke: #12391f; stroke-width: 2.5; }
.kit-mark:hover .kit-rect { fill: #38a363; }
.kit-mark.open .kit-rect { fill: #1d5236; stroke-dasharray: 5 3; }
.kit-cross { stroke: #fff; stroke-width: 6; stroke-linecap: round; fill: none; }
.kit-label { fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none; }
.kit-mark.hint-zone .kit-rect { stroke: #4dd2ff; stroke-width: 4; animation: zoneBlink .8s ease-in-out infinite; }
.weapon-mark { cursor: pointer; }
.weapon-mark:hover .weapon-rect { fill: #f29a3d; }
.weapon-mark.hint-zone .weapon-rect { stroke: #4dd2ff; stroke-width: 4; animation: zoneBlink .8s ease-in-out infinite; }
.mark.splint { fill: #f2e6bf; stroke: #5a3a10; stroke-width: 2; }
.mark.strap { fill: #2f6fb5; stroke: #cfe3ff; stroke-width: 1; }
.mark.joint { fill: #fff; stroke: #2f6fb5; stroke-width: 2.5; }

/* phone browsers: vh includes the toolbars, so size by the visible viewport, keep clear of the notch and
   the toolbars, and centre "safely" (margin auto) so a tall box is never clipped at the top */
.modal { display: flex; place-items: initial; align-items: flex-start; justify-content: center; height: 100vh; height: 100dvh; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-box { margin: auto; flex: none; max-width: 100%; }
.modal-box.wide { max-height: none; overflow: visible; }
body { min-height: 100vh; min-height: 100dvh; }
#topbar { padding-top: max(4px, env(safe-area-inset-top)); }
@media (max-width: 900px) {
  /* the last log lines must be able to scroll clear of the browser toolbar and of the toasts */
  #layout { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* start window: the buttons wrap instead of pushing the box wider than the screen */
.modal-box { min-width: 0; overflow-wrap: anywhere; }
.modal-box .row { flex-wrap: wrap; }
.modal-box .row .btn { flex: 1 1 auto; }

.figure-foot { justify-content: space-between; }
.tile .zl { font-size: 9.5px; color: var(--muted); line-height: 1; }

/* measurements table beside the figure and on the card */
.left-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
.mbox-scene { width: 100%; display: flex; justify-content: flex-end; }
.mbox { display: flex; flex-direction: column; gap: 6px; background: rgba(38,43,51,.96); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; font-size: 11.5px; max-width: 100%; }
.mbox .mt { width: 100%; border-collapse: collapse; }
.mbox th { font-size: 9.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 1px 3px; line-height: 1.1; }
.mbox td { padding: 2px 3px; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.mbox .xfer { display: none; }
body[data-card-open="1"] .mbox .xfer, .mbox.forcard .xfer { display: table-cell; }
.xbtn { background: var(--accent); color: #111; border: 0; border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; cursor: pointer; }
.paper .mbox { background: #fbf8f0; border-color: #b9b19c; margin: 6px 0 2px; }
.paper .mbox th { color: #4a463c; } .paper .mbox td { color: #1d1d1b; }
.paper .xbtn { background: #1d1d1b; color: #efe9da; }
.cz.off { fill: #d9d3c0; cursor: not-allowed; opacity: .55; }
.cz.off:hover { fill: #d9d3c0; }
@media (max-width: 900px) {
  .mbox { padding: 3px 4px; font-size: 10.5px; }
  .mbox th { font-size: 8.5px; }
  .mbox td { padding: 1px 2px; }
  .xbtn { padding: 2px 4px; font-size: 9.5px; }
}

/* the flip tile leads the left column; the toasts sit at the bottom edge again */
#toasts { bottom: calc(10px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) { #toasts { bottom: calc(6px + env(safe-area-inset-bottom)); } #layout { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }
.tile.flip { color: #cfe3ff; }

/* top bar: one row, the health bar takes all the room that is left */
#topbar { flex-wrap: nowrap; gap: 8px; }
#topbar .hpwrap { flex: 1 1 auto; min-width: 90px; display: flex; align-items: center; gap: 6px; color: var(--red); }
#topbar .hpbar { flex: 1; width: auto; height: 20px; border-radius: 10px; position: relative; background: #0e1013; border: 1px solid var(--line); overflow: hidden; }
#hpfill { height: 100%; border-radius: 9px 0 0 9px; transition: width .5s linear, background .5s; }
#hpnum { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
@media (max-width: 900px) { #topbar { flex-wrap: nowrap; } #topbar .hpbar { width: auto; } #topbar .hpwrap .icon { display: inline; } }

/* kit: a matrix of square tiles, spent items fade out */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.kit-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); color: var(--accent); cursor: pointer; }
.kit-tile:hover, .kit-tile.selected { border-color: var(--accent); background: #2b2f26; }
.kit-tile .qty { position: absolute; right: 4px; bottom: 2px; font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.kit-tile.empty { opacity: .3; }
.kit-tile.empty .qty { display: none; }
.kit-grid + .kit-use { margin-top: 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 8px 10px; background: var(--panel2); }

/* casualty card as printed: two sheets one under the other */
.sheets { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.sheet { background: #fff; color: #1d1d1b; border: 2px solid #1d1d1b; border-radius: 4px; padding: 8px 10px; font-size: 13px; }
.sheet label { display: inline-flex; align-items: center; gap: 4px; color: #1d1d1b !important; margin: 0 !important; font-size: 13px !important; }
.sheet input[type=text], .sheet textarea { background: transparent !important; border: 0 !important; border-bottom: 1px solid #1d1d1b !important; border-radius: 0 !important; color: #1d1d1b !important; padding: 2px 3px; min-width: 0; font-size: 13px; }
.sheet textarea { border: 1px solid #1d1d1b !important; width: 100%; min-height: 70px; margin-top: 4px; }
.sh-title { font-weight: 800; font-size: 14px; letter-spacing: .02em; border-bottom: 2px solid #1d1d1b; padding-bottom: 4px; margin-bottom: 6px; }
.sh-cross { font-size: 18px; margin-right: 6px; }
.sh-prio { display: flex; gap: 10px; align-items: flex-start; border-bottom: 2px solid #1d1d1b; padding-bottom: 6px; }
.sh-prio > b { flex: 0 0 90px; font-size: 12px; }
.sh-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; }
.sh-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 6px; }
.sh-row .grow, .sh-th .grow { flex: 1 1 140px; } .sh-row .grow input, .sh-th .grow input { flex: 1; width: 100%; }
.sh-row .inn input { width: 120px; letter-spacing: .15em; } .w110 { width: 105px; } .w60 { width: 56px; }
.sh-inl { display: inline-flex; gap: 8px; align-items: center; }
.cbx { cursor: pointer; } .cbx input { width: 17px; height: 17px; accent-color: #1d1d1b; margin: 0; flex: none; }
.sh-sec { border-top: 2px solid #1d1d1b; margin-top: 8px; padding-top: 6px; }
.sh-sec h3, .sheet h3.sub { margin: 0 0 4px; font-size: 14px; font-weight: 800; letter-spacing: .01em; }
.sh-sec h3 small { font-weight: 500; font-size: 11.5px; }
.sh-mech { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.sh-body { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2.2fr) minmax(90px, 1fr); gap: 6px; align-items: stretch; }
.sh-tqcol { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.sh-tq { border: 2px solid #1d1d1b; padding: 4px 6px; font-size: 12px; } .sh-tq b { display: block; font-size: 12px; }
.sh-tq label { display: flex !important; font-size: 12px !important; } .sh-tq input { width: 100%; flex: 1; }
.sheet .cfigs { display: flex; gap: 4px; margin-top: 0; } .sheet .cfig svg { max-height: 300px; }
.sheet .cz { fill: #fff; stroke: #1d1d1b; stroke-width: 2.5; cursor: pointer; } .sheet .cz:hover { fill: #e9e2cc; }
.sh-scroll { overflow-x: auto; }
.sh-vit, .sh-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sh-vit th, .sh-tbl th { font-size: 11.5px; font-weight: 600; text-align: right; padding: 2px 4px; width: 32%; border: 1.5px solid #1d1d1b; }
.sh-tbl th { text-align: center; width: auto; } .sh-tbl th:first-child { text-align: right; width: 32%; }
.sh-vit td, .sh-tbl td { border: 1.5px solid #1d1d1b; padding: 0; min-width: 52px; } .sh-vit td input, .sh-tbl td input { width: 100%; border: 0 !important; }
.sh-vit tr.g th, .sh-vit tr.g td { background: #cfcfcf; }
.sh-th { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; margin-top: 5px; }
.sheet .notes { display: block !important; }
.sheet .addrow { margin-top: 4px; }
.sheets.ro input, .sheets.ro textarea { opacity: 1; -webkit-text-fill-color: #1d1d1b; } .sheets.ro .cz { cursor: default; }
@media (max-width: 520px) { .sh-body { grid-template-columns: 1fr 1fr; } .sh-body .cfigs { grid-column: 1 / -1; order: -1; } .sh-prio { flex-direction: column; } }
@media print { .sheets { gap: 8mm; } .sheet { break-inside: avoid; page-break-inside: avoid; } }
@media (max-width: 520px) { .sh-prio > b { flex: none; } }

/* the newest message on top, older ones sink and fade */
#toasts .feed { justify-content: flex-start; }
#toasts .feed-item:nth-child(2) { opacity: .82; transform: scale(.985); }
#toasts .feed-item:nth-child(3) { opacity: .62; transform: scale(.97); }

/* under fire: the background pulses slightly red; in cover it is neutral */
body.underfire { animation: firePulse 2.2s ease-in-out infinite; }
@keyframes firePulse { 0%, 100% { background-color: #1a1214; } 50% { background-color: #3a1517; } }
@media (prefers-reduced-motion: reduce) { body.underfire { animation: none; background-color: #2a1416; } }
/* status badges collect in the lower right corner, clear of the silhouette */
.overlays, .overlays { left: auto !important; top: auto !important; right: -12px; bottom: 22px; align-items: flex-end; flex-direction: column-reverse; z-index: 3; pointer-events: none; }
.overlays .chip { font-size: 11.5px; padding: 3px 8px; }
/* measurement table beside the figure: small type, one-letter headers */
.mbox-scene .mbox { padding: 3px 5px; font-size: 11px; }
.mbox-scene .mbox th { font-size: 10px; text-align: center; }
.mbox-scene .mbox td { font-size: 12px; padding: 1px 4px; }

.kit-tile { grid-template-rows: auto auto; align-content: center; gap: 2px; }
.kit-tile .kname { font-size: 9.5px; line-height: 1; color: #cfd4da; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.kit-tile.empty .kname { color: inherit; }

/* the MARCH stage indicator under the right-hand actions, the active letter outlined */
.march-bar { display: flex; gap: 3px; }
.march-bar span { width: 21px; height: 23px; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted); border: 2px solid transparent; border-radius: 6px; }
.march-bar span.on { color: var(--accent); border-color: var(--accent); background: rgba(230,184,76,.12); }
.march-bar { flex-direction: column; gap: 2px; align-items: center; }
.march-bar span { width: 28px; height: 28px; font-size: 15px; }

.right-col { display: flex; flex-direction: column; align-self: stretch; align-items: flex-end; gap: 8px; }
.right-col .march-bar { margin-top: auto; padding-right: 2px; }

.hint-toast.off-tab { display: none !important; }
/* the box grows to what is in it, so the numbers never stick out of the frame */
.mbox-scene { justify-content: flex-start; }
.mbox-scene .mbox { width: max-content; max-width: none; box-sizing: border-box; }
.mbox-scene .mbox .mt { width: auto; }
.mbox-scene .mbox td, .mbox-scene .mbox th { padding-left: 5px; padding-right: 5px; }
/* wide screen: the box sits against the actions, next to the figure; on a phone it grows to the right instead */
@media (min-width: 901px) { .mbox-scene { justify-content: flex-end; } }
@media (max-width: 900px) { .mbox-scene { justify-content: flex-start; } }
/* the measurement box lines up with the left edge of the tiles above it */
.left-col { align-items: flex-start; }
.mbox-scene { justify-content: flex-start !important; width: auto; }
@media (min-width: 901px) { .left-col { justify-self: end; } }

#toasts .feed-item, #toasts .hint-toast { pointer-events: auto; cursor: pointer; }

/* pop-up messages hang under the feet (zero-height anchor: nothing shifts), and dock to the bottom edge only when there is no room */
.toast-anchor { position: relative; height: 0; width: 100%; z-index: 28; }
#scene .toast-anchor #toasts { position: absolute; left: 50%; right: auto; top: 6px; bottom: auto; transform: translateX(-50%); width: min(760px, 100%); }
#scene .toast-anchor #toasts.dock { position: fixed; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(760px, calc(100vw - 20px)); }

/* MARCH finished: the whole bar gets a green frame and the evacuation tile blinks green */
.march-bar { padding: 3px; border: 2px solid transparent; border-radius: 10px; }
.march-bar.done { border-color: var(--green); box-shadow: 0 0 10px rgba(76,175,110,.55); }
body.march-done button[data-id="handover"] { animation: evacBlink 1.1s ease-in-out infinite; }
@keyframes evacBlink { 0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,110,.0); border-color: var(--green); } 50% { box-shadow: 0 0 14px 3px rgba(76,175,110,.85); border-color: #8be0a8; background: rgba(76,175,110,.18); } }
@media (prefers-reduced-motion: reduce) { body.march-done button[data-id="handover"] { animation: none; box-shadow: 0 0 10px 2px rgba(76,175,110,.8); } }
/* debrief buttons: an even 2x2 grid at any width, one column only on the narrowest screens */
.modal-box .debrief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-content: stretch; }
.modal-box .debrief-actions .btn { flex: none; max-width: none; width: 100%; min-width: 0; text-align: center; white-space: normal; line-height: 1.2; }
@media (max-width: 340px) { .modal-box .debrief-actions { grid-template-columns: 1fr; } }

.kit-label { font-size: 11.5px; }

.tile.hintbtn { color: var(--accent); }

/* the card: the rescuer's name gets its own full-width line; no double rule; the medicine table header fits */
.sh-row.helper { flex-direction: column; align-items: stretch; }
.sh-row.helper .grow.stack { display: flex !important; flex-direction: column; align-items: stretch; gap: 2px; }
.sh-row.helper .grow.stack input { width: 100%; }
.sh-prio { border-bottom: 0; padding-bottom: 2px; }
.sheet .sh-sec { margin-top: 6px; }
.sh-tbl th { font-size: 10.5px; padding: 2px 2px; overflow-wrap: anywhere; hyphens: auto; }

/* the result: a fifth tab on a phone, an overlay on a wide screen */
#resultTab .result-body { padding: 14px; overflow-y: auto; }
#resultTabBtn[hidden], #resultBtn[hidden] { display: none; }
#resultTab { display: none; }
@media (min-width: 901px) {
  body.result-open #resultTab { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow: hidden; }
  body.result-open #resultTab .result-body { width: min(900px, 100%); margin: 0 auto; flex: 1; }
  #resultTab .panel-head { max-width: 900px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) { #resultClose { display: none; } #tabs button { font-size: 13px; padding: 10px 2px; } }
.runcode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--muted); font-size: 13px; }
.runcode b { color: var(--accent); font-size: 20px; letter-spacing: .18em; font-family: ui-monospace, Menlo, monospace; }
.runcode.bad { border-color: var(--red); color: #ffb3b0; }
.codebox { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.codebox input { text-transform: uppercase; letter-spacing: .2em; font-family: ui-monospace, Menlo, monospace; }
.codebox .btn { margin-top: 6px; }
.codemsg { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 1em; } .codemsg.bad { color: #ffb3b0; }
/* the debrief buttons now live in the result tab, not in a modal */
.debrief-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.debrief-actions .btn { width: 100%; min-width: 0; text-align: center; white-space: normal; line-height: 1.2; padding: 9px 10px; }
@media (max-width: 340px) { .debrief-actions { grid-template-columns: 1fr; } }

.kit-spent { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); font-size: 13px; line-height: 1.5; }
.kit-spent .kit-title { margin: 0 0 4px; }

@media (max-width: 900px) { #resultBtn { display: none !important; } }

/* MARCH in the corner is the way home: white on orange, larger than a tile */
#topbar .brand.home, .brand.home { display: inline-flex !important; align-items: center; justify-content: center; flex: none; background: #f07d1a; color: #fff; border: 0; border-radius: 9px; padding: 8px 12px; font-size: 14px; font-weight: 800; letter-spacing: .12em; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.brand.home:hover { background: #ff8e2e; } .brand.home:active { transform: translateY(1px); }
/* the home button: a third lower, still unmissable */
#topbar .brand.home, .brand.home { align-self: center; padding: 4px 12px; line-height: 1.15; font-size: 13px; height: auto; }
#topbar .brand.home { height: 24px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }