/* PatientZero v0 — podział ekranu.
   Lewo: ciemny, organiczny świat bakterii. Prawo: sterylna, jasna karta lekarza.
   Kontrast dwóch światów jest celowy — każdy gracz widzi inną grę. */
:root {
  /* świat lekarza */
  --paper: #e8efec;
  --panel: #f6f9f7;
  --ink: #10302a;
  --muted: #56706a;
  --line: #c6d5cf;
  --trace: #11795a;
  --amber: #9c6209;
  --alert: #b0362a;
  /* świat bakterii */
  --abyss: #070102;
  --hud: #f7e9e4;
  --hud-dim: rgba(247, 233, 228, 0.62);
  --microbe: #6fe3b4;
  --biofilm: #c6e66a;
  --heat: #ff9b6a;
  --cold: #a9d4ff;

  --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --r-s: 6px;
  --r-m: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--abyss);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
kbd {
  font: inherit; font-size: 0.78em; font-weight: 700;
  display: inline-block; min-width: 1.7em; padding: 0.05em 0.4em; margin-right: 0.2em;
  text-align: center; border-radius: 4px;
  border: 1px solid currentColor; opacity: 0.85;
}

.split { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.half { position: relative; min-width: 0; min-height: 0; overflow: hidden; }

/* ---------- LEWA: bakteria ---------- */
.half-bact { background: var(--abyss); color: var(--hud); }
.view { position: absolute; inset: 0; }
.view canvas { display: block; }
.hud { position: absolute; z-index: 2; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.hud-top { top: 18px; left: 20px; right: 260px; }
.hud-who { margin: 0; color: var(--hud-dim); font-size: 13px; }
.hud-place { margin: 2px 0 0; font-size: 26px; font-weight: 700; line-height: 1.15; text-wrap: balance; }
.hud-map { top: 16px; right: 16px; }
.minimap {
  display: block; width: min(220px, 36vw) !important; height: auto !important;
  border-radius: var(--r-s); background: rgba(10, 2, 3, 0.55);
  box-shadow: 0 0 0 1px rgba(247, 233, 228, 0.15), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.sound-btn {
  pointer-events: auto; cursor: pointer; padding: 0; border: 0; background: none;
  color: var(--hud-dim); font-size: 12px; text-shadow: inherit;
}
.sound-btn:hover { color: var(--hud); }
.hud-mut {
  right: 16px; bottom: 64px; width: min(270px, calc(50% - 24px)); pointer-events: auto;
  padding: 10px 12px; border-radius: var(--r-m); background: rgba(14, 3, 4, 0.62); backdrop-filter: blur(4px);
  font-size: 12px; display: grid; gap: 6px;
}
.mut-head { margin: 0; display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; }
.mut-pts { font-weight: 400; color: var(--hud-dim); }
.mut-pts b { color: var(--biofilm); font-variant-numeric: tabular-nums; }
.mut-list { display: grid; gap: 3px; }
.mut-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; text-align: left;
  padding: 3px 6px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--hud); font-size: 12px; cursor: pointer;
}
.mut-row:hover:not(:disabled) { border-color: rgba(198, 230, 106, 0.5); }
.mut-row:disabled { cursor: default; opacity: 0.55; }
.mut-row[data-afford="1"] { opacity: 1; }
.mut-row kbd { margin: 0; }
.mut-lvl { letter-spacing: 2px; color: var(--biofilm); }
.mut-ability { margin: 0; color: var(--hud-dim); }
.mut-ability b { color: var(--hud); }
.hud-bars { left: 20px; bottom: 54px; width: min(340px, calc(100% - 40px)); display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; }
.bar-label { color: var(--hud-dim); }
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.bar-fill { display: block; height: 100%; transform-origin: left; transform: scaleX(0); transition: transform 0.15s linear; }
.fill-hp { background: var(--microbe); box-shadow: 0 0 10px var(--microbe); transform: scaleX(1); }
.fill-cond { background: #ff8a78; box-shadow: 0 0 10px #ff8a78; transform: scaleX(1); }
.fill-food { background: #f2c94c; box-shadow: 0 0 10px #f2c94c; transform: scaleX(0); }
.fill-inf { background: var(--biofilm); box-shadow: 0 0 10px var(--biofilm); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.hud-note { margin: 0; font-size: 13px; color: var(--biofilm); }
.chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); border: 1px solid; }
.chip-fever { color: var(--heat); }
.chip-slow { color: var(--cold); }
.chip-ab { color: #f3dfaa; }
.chip-res { color: var(--microbe); }
.hud-keys { left: 20px; bottom: 18px; display: flex; gap: 18px; font-size: 12px; color: var(--hud-dim); }
.transit {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; text-align: center;
  pointer-events: none; color: var(--hud);
}
.transit-title { margin: 0; font-size: 13px; color: var(--hud-dim); }
.transit-text { margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.gl-error { position: absolute; inset: auto 20px 50% 20px; z-index: 4; padding: 16px; border-radius: var(--r-m); background: #2a0c0c; color: var(--hud); }

/* ---------- PRAWA: lekarz ---------- */
.half-doc {
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  padding: 22px clamp(16px, 3vw, 36px) 28px;
  display: flex; flex-direction: column; gap: 22px;
  border-left: 1px solid #000;
}
.half-doc > * { flex-shrink: 0; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.doc-who { margin: 0; color: var(--muted); font-size: 13px; }
.doc-title { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.doc-clock { margin: 0; font-variant-numeric: tabular-nums; font-size: 15px; }
.doc-clock time { font-weight: 700; }
.muted { color: var(--muted); }

.monitor {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.ecg { --grid: #dfe8e4; --trace: #11795a; display: block; width: 100%; height: 92px; border-bottom: 1px solid var(--line); }
.vitals { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vital:nth-child(3) { border-left: 0; } .vital:nth-child(n+3) { border-top: 1px solid var(--line); } }
.vital { padding: 12px 16px 14px; min-width: 0; }
.vital + .vital { border-left: 1px solid var(--line); }
.vital dt { font-size: 13px; color: var(--muted); }
.vital dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 4px; }
.vital-num { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.unit { color: var(--muted); font-size: 14px; }
.vital-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.vital[data-state="warm"] .vital-num { color: var(--amber); }
.vital[data-state="high"] .vital-num { color: var(--alert); }
.vital[data-state="unknown"] .vital-num { color: var(--line); }

.block { display: grid; gap: 10px; }
.block-title { margin: 0; font-size: 17px; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }

.test-btn {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: var(--r-m);
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--panel);
  font-weight: 700; font-size: 16px;
}
.test-btn:hover:not(:disabled) { background: #1b4a40; }
.test-btn:disabled { cursor: default; background: var(--panel); color: var(--ink); border-color: var(--line); }
.test-bar { position: absolute; inset: 0; pointer-events: none; }
.test-bar span { position: absolute; inset: 0; background: #d3e6dd; transform-origin: left; transform: scaleX(0); }
.test-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.actions { display: grid; gap: 8px; }
.action {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  display: grid; gap: 2px; padding: 12px 16px;
  background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--r-m);
}
.action-cd { position: absolute; inset: 0; background: #e2ebe7; transform-origin: left; transform: scaleX(0); pointer-events: none; }
.action > :not(.action-cd) { position: relative; }
.action-head { display: flex; justify-content: space-between; align-items: center; }
.action-name { font-weight: 700; font-size: 16px; }
.action-desc { font-size: 13px; color: var(--muted); }
.action-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.action-state { font-size: 13px; font-weight: 700; }
.action-eff { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.action-eff[data-level="mid"] { color: var(--amber); font-weight: 700; }
.action-eff[data-level="low"] { color: var(--alert); font-weight: 700; }
.action[data-state="ready"] { border-color: var(--trace); }
.action[data-state="ready"] .action-state { color: var(--trace); }
.action[data-state="ready"]:hover { background: #eef6f2; }
.action[data-state="locked"] { cursor: not-allowed; }
.action[data-state="locked"] .action-name, .action[data-state="locked"] .action-desc { opacity: 0.55; }
.action[data-state="cooldown"] .action-state { color: var(--amber); }
.action:disabled { cursor: default; }

.block-log { flex: 1; min-height: 120px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.log li { display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.log li[data-who="sys"] span { font-weight: 700; }

button:focus-visible, .organ:focus-visible { outline: 3px solid #2a9d77; outline-offset: 2px; }

/* ---------- nakładki ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 30% 40%, rgba(70, 8, 10, 0.55), rgba(5, 1, 2, 0.88));
  overflow-y: auto;
}
.overlay-card {
  width: min(760px, 100%);
  background: var(--paper); color: var(--ink);
  border-radius: 14px; padding: clamp(20px, 4vw, 40px);
  display: grid; gap: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.overlay-card-small { width: min(440px, 100%); text-align: left; }
.version-tag { margin: -12px 0 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.logo { margin: 0; font-size: clamp(44px, 7vw, 68px); line-height: 0.95; letter-spacing: -0.03em; }
.lead { margin: 0; font-size: 17px; color: var(--muted); max-width: 52ch; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role { padding: 16px 18px; border-radius: var(--r-m); min-width: 0; }
.role h2 { margin: 0 0 6px; font-size: 19px; }
.role p { margin: 0; font-size: 14px; }
.role .keys { margin-top: 10px; font-size: 13px; }
.role-bact { background: #1a0607; color: var(--hud); }
.role-bact h2 { color: var(--microbe); }
.role-doc { background: var(--panel); border: 1px solid var(--line); }
.role-doc h2 { color: var(--trace); }
.pick-title { margin: 6px 0 0; font-size: 17px; }
.organs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.organ {
  display: grid; gap: 2px; padding: 12px 10px; border-radius: var(--r-m); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--panel); text-align: left;
}
.organ span { font-weight: 700; }
.organ small { font-size: 12px; color: var(--muted); }
.organ:not(:disabled) { border-color: #7c1d1f; background: #7c1d1f; color: #fff2ef; }
.organ:not(:disabled) small { color: #f3c6bf; }
.organ:not(:disabled):hover { background: #962528; }
.organ:disabled { cursor: not-allowed; opacity: 0.6; }
.end-title { margin: 0; font-size: 32px; line-height: 1.1; }
.overlay-end p { margin: 0; }
.primary {
  justify-self: start; cursor: pointer; padding: 12px 20px; border-radius: var(--r-m);
  border: 0; background: var(--ink); color: var(--panel); font-weight: 700;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; }
  .half-bact { height: 62vh; }
  .half-doc { border-left: 0; overflow: visible; }
  .roles { grid-template-columns: 1fr; }
  .organs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hud-place { font-size: 20px; }
  .hud-top { right: 40vw; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
}

/* ---------- gra przez sieć ---------- */
.net-ready { margin: 0; padding: 12px 14px; border-radius: var(--r-m); background: #dcefe6; color: var(--ink); font-weight: 700; }
.net-ready:empty { display: none; }
body[data-net] .local-only { display: none; }
.net-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.secondary {
  cursor: pointer; padding: 11px 18px; border-radius: var(--r-m);
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700;
}
.secondary:hover:not(:disabled) { background: #dfe9e5; }
.secondary:disabled, .primary:disabled { opacity: 0.45; cursor: default; }
.link-btn { justify-self: start; cursor: pointer; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink); }

.lobby-card { width: min(620px, 100%); }
.lobby-title { margin: 0 0 4px; font-size: 28px; line-height: 1.1; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; counter-reset: step; }
.steps li { display: grid; gap: 8px; counter-increment: step; }
.step-title::before { content: counter(step) ". "; color: var(--trace); }
.steps .primary, .steps .secondary { justify-self: start; }
.step-title { margin: 0; font-weight: 700; }
.code {
  width: 100%; resize: vertical; min-height: 4.5em;
  font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; word-break: break-all;
  padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
}
.code:focus { outline: 3px solid #2a9d77; outline-offset: 1px; border-color: transparent; }
.role-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.role-pick button {
  cursor: pointer; padding: 11px 22px; border-radius: var(--r-m); font-weight: 700;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
}
.role-pick button[data-host-role="bact"][aria-pressed="true"] { background: #1a0607; border-color: #1a0607; color: var(--microbe); }
.role-pick button[data-host-role="doc"][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.lobby-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--muted); }
.lobby-status[data-kind="error"] { color: var(--alert); font-weight: 700; }
.lobby-status[data-kind="info"] { color: var(--trace); }

/* jeden gracz = jedna połowa na cały ekran */
body[data-role="bact"] .split, body[data-role="doc"] .split { grid-template-columns: 1fr; grid-template-rows: 1fr; height: 100%; }
body[data-role="bact"] .half-doc { display: none; }
body[data-role="bact"] .half-bact { height: 100%; }
body[data-role="doc"] .half-bact { display: none; }
body[data-role="doc"] .half-doc {
  border-left: 0; height: 100%; overflow-y: auto;
  padding-inline: max(16px, calc((100% - 820px) / 2));
}

/* ---------- wybór trybu ---------- */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode {
  display: grid; gap: 10px; align-content: start; min-width: 0;
  padding: 18px; border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--panel);
}
.mode h2 { margin: 0; font-size: 19px; }
.mode p { margin: 0; font-size: 14px; color: var(--muted); }
.mode .primary, .mode .net-buttons { align-self: end; }
.mode-duo { border-color: var(--trace); }
.organ-pick { display: grid; gap: 10px; }
.kind-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kind-label { font-weight: 700; margin-right: 4px; }
.kind-pick button {
  cursor: pointer; padding: 8px 16px; border-radius: 999px; font-weight: 700;
  border: 1.5px solid var(--line); background: var(--panel); color: var(--ink);
}
.kind-pick button[data-kind="bacteria"][aria-pressed="true"] { background: #1a0607; border-color: #1a0607; color: var(--microbe); }
.kind-pick button[data-kind="virus"][aria-pressed="true"] { background: #1c0b2e; border-color: #1c0b2e; color: #d6b8ff; }
.kind-pick .hint { margin-left: 4px; }
.organ-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
@media (max-width: 900px) { .modes { grid-template-columns: 1fr; } }

/* ---------- stan połączenia ---------- */
.net-badge {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; font-size: 13px;
  background: rgba(16, 48, 42, 0.92); color: #eef6f2; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.net-badge kbd { opacity: 0.6; margin: 0; }
.nb-num { font-variant-numeric: tabular-nums; color: #b9d3ca; }
.nb-dot { width: 9px; height: 9px; border-radius: 50%; background: #4fd39a; box-shadow: 0 0 8px #4fd39a; }
.net-badge[data-q="weak"] .nb-dot { background: #f0b03e; box-shadow: 0 0 8px #f0b03e; }
.net-badge[data-q="stalled"] .nb-dot, .net-badge[data-q="lost"] .nb-dot { background: #ff5a48; box-shadow: 0 0 8px #ff5a48; }
.net-details {
  position: fixed; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  width: min(380px, calc(100vw - 32px)); padding: 16px 18px; border-radius: var(--r-m);
  background: var(--paper); color: var(--ink); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.net-details h2 { margin: 0 0 10px; font-size: 16px; }
.net-details dl { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.net-details dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.net-details dt { color: var(--muted); }
.net-details dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; }
.nd-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.net-weak {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 7;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r-m);
  background: #5a1610; color: #ffe9e4; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- podgląd lekarza ---------- */
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.doc-cam {
  position: relative; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; max-height: 270px;
  border-radius: var(--r-m); overflow: hidden; background: #140405;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.doc-cam canvas { position: absolute; inset: 0; display: block; }
.cam-msg { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 16px; text-align: center; color: #e9cfc9; font-size: 14px; z-index: 1; }
.cam-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: rgba(0, 0, 0, 0.55); color: #ffd9cf;
}
.test-photo { margin: 0; display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: 14px; align-items: center; }
.test-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); display: block; background: #140405; }
.test-photo figcaption { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.test-photo figcaption b { font-size: 17px; }
@media (max-width: 520px) { .test-photo { grid-template-columns: 1fr; } }

/* ---------- ekran końcowy ---------- */
.end-card { width: min(720px, 100%); }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.end-stats section { min-width: 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); }
.es-title { margin: 0 0 8px; font-size: 16px; }
.es-bact { color: #1f7a5a; }
.es-doc { color: var(--ink); }
.end-stats dl { margin: 0; display: grid; gap: 5px; font-size: 13px; }
.end-stats dl > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e3ebe7; padding-bottom: 4px; }
.end-stats dl > div:last-child { border-bottom: 0; }
.end-stats dt { color: var(--muted); }
.end-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.end-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 640px) { .end-stats { grid-template-columns: 1fr; } }

/* ---------- badania i wyniki ---------- */
.tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tests .test-btn { display: grid; gap: 2px; padding: 12px 14px; font-size: 14px; font-weight: 400; }
.tests .test-btn[data-state="ready"] { background: var(--ink); color: var(--panel); }
.tests .test-btn[data-state="ready"] .test-desc { color: #b8cfc8; }
.test-name { font-weight: 700; font-size: 15px; }
.test-desc { font-size: 12px; color: var(--muted); position: relative; }
.test-state { font-size: 12px; font-weight: 700; position: relative; }
.tests .test-btn[data-state="running"] .test-state { color: var(--trace); }
.tests .test-btn[data-state="cooldown"] .test-state { color: var(--amber); }
.tests .test-btn[data-state="locked"] { opacity: 0.6; }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.result { min-width: 0; padding: 12px 14px; border-radius: var(--r-m); background: var(--panel); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.result-wide { grid-column: 1 / -1; }
.result h3 { margin: 0; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.res-time { font-weight: 400; font-size: 12px; }
.res-big { margin: 0; font-size: 15px; }
.res-big b { font-size: 26px; font-variant-numeric: tabular-nums; }
.res-note { margin: 0; font-size: 13px; color: var(--muted); }
.echo-canvas { display: block; width: 240px; max-width: 100%; height: auto; border-radius: var(--r-s); background: #000; }
.abg { margin: 0; display: grid; gap: 4px; font-size: 13px; }
.abg > div { display: flex; justify-content: space-between; gap: 8px; }
.abg dt { color: var(--muted); }
.abg dd { margin: 0; font-weight: 700; }
.abg dd[data-state="ok"] { color: var(--trace); }
.abg dd[data-state="warm"] { color: var(--amber); }
.abg dd[data-state="high"] { color: var(--alert); }
@media (max-width: 640px) { .tests, .results { grid-template-columns: 1fr; } }

/* ---------- operacja zastawki ---------- */
.surgery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.surg-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 6px; cursor: pointer;
  padding: 10px 12px; border-radius: var(--r-m); font-weight: 700; font-size: 14px;
  border: 1.5px solid var(--alert); background: var(--panel); color: var(--alert);
}
.surg-btn:hover:not(:disabled) { background: #f8e7e3; }
.surg-btn:disabled { cursor: default; opacity: 0.5; border-color: var(--line); color: var(--muted); }
.surg-btn[data-active="1"] { opacity: 1; background: var(--alert); color: #fff; border-color: var(--alert); }
@media (max-width: 640px) { .surgery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- sala z pacjentem ---------- */
.room-block { display: grid; gap: 8px; }
.room { display: block; width: 100%; border-radius: var(--r-m); border: 1px solid var(--line); background: #e6eeeb; }
.symptoms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.symptoms li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); }
.symptoms li[data-level="warm"] { border-color: var(--amber); color: var(--amber); font-weight: 700; }
.symptoms li[data-level="high"] { border-color: var(--alert); color: var(--alert); font-weight: 700; }
.symptoms li[data-level="ok"] { color: var(--muted); }
.monitor[data-alarm="on"] { animation: alarm-pulse 0.9s ease-in-out infinite; }
@keyframes alarm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(176, 54, 42, 0); border-color: var(--line); } 50% { box-shadow: 0 0 0 4px rgba(176, 54, 42, 0.35); border-color: var(--alert); } }
@media (prefers-reduced-motion: reduce) { .monitor[data-alarm="on"] { animation: none; border-color: var(--alert); } }

/* ---------- mecz ---------- */
.end-match { padding: 12px 16px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel); display: grid; gap: 6px; }
.end-match .es-title { margin: 0; }
.end-match-rounds { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 3px; font-size: 14px; }
.end-match-verdict { margin: 0; font-weight: 700; }
.end-buttons { display: flex; gap: 8px; flex-wrap: wrap; }