: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: #c9a56a; stroke: #6b4a1c; stroke-width: 1.5; }
.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; }