:root{
  color-scheme: light;
  --bg:#eef1f4;
  --page:#e7ebef;
  --surface:#ffffff;
  --surface-2:#f4f6f8;
  --ink:#11161c;
  --ink-2:#48515c;
  --muted:#7a8390;
  --border:rgba(17,22,28,0.13);
  --border-strong:rgba(17,22,28,0.26);
  --accent:#1d5fd1;
  --accent-ink:#ffffff;
  --accent-wash:rgba(29,95,209,0.10);
  --good:#0ca30c;
  --tri-green:#1f7a3d;
  --tri-green-ink:#ffffff;
  --tri-yellow:#f2b705;
  --tri-yellow-ink:#1a1a1a;
  --tri-red:#c0272d;
  --tri-red-ink:#ffffff;
  --tri-black:#1a1b1d;
  --tri-black-ink:#ffffff;
  --shadow: 0 1px 2px rgba(17,22,28,0.06), 0 8px 24px -12px rgba(17,22,28,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0e1116;
    --page:#0a0c10;
    --surface:#161b22;
    --surface-2:#1d242c;
    --ink:#f2f4f7;
    --ink-2:#c2cad4;
    --muted:#8793a1;
    --border:rgba(255,255,255,0.12);
    --border-strong:rgba(255,255,255,0.22);
    --accent:#5b8fe8;
    --accent-ink:#0a1322;
    --accent-wash:rgba(91,143,232,0.16);
    --good:#2fbf4f;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0e1116;
  --page:#0a0c10;
  --surface:#161b22;
  --surface-2:#1d242c;
  --ink:#f2f4f7;
  --ink-2:#c2cad4;
  --muted:#8793a1;
  --border:rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.22);
  --accent:#5b8fe8;
  --accent-ink:#0a1322;
  --accent-wash:rgba(91,143,232,0.16);
  --good:#2fbf4f;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.6);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  padding-inline:18px;
}
h1,h2,h3{text-wrap:balance; margin:0;}
.stencil{
  font-family:"Big Shoulders Stencil","IBM Plex Sans",sans-serif;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
.tabular{font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px;}
[hidden]{display:none!important;}

#app{max-width:1040px; margin:0 auto; padding-block:26px 60px;}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; margin-bottom:22px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-badge{
  width:40px; height:40px; border-radius:7px; background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;
}
.brand-text h1{font-size:19px; line-height:1.1;}
.brand-text p{margin:2px 0 0; font-size:12.5px; color:var(--muted);}
.topbar-actions{display:flex; gap:8px; flex-wrap:wrap;}

.btn{
  appearance:none; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink);
  padding:9px 14px; border-radius:8px; font-size:13.5px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; line-height:1.2;
}
.btn:hover{border-color:var(--accent);}
.btn-primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-sm{padding:6px 10px; font-size:12.5px;}

/* ---------- cards / layout helpers ---------- */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:22px; box-shadow:var(--shadow);
}
.stack{display:flex; flex-direction:column; gap:16px;}
.row-wrap{display:flex; gap:10px; flex-wrap:wrap;}
.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.lede{color:var(--ink-2); font-size:15px; line-height:1.55; max-width:62ch;}

/* ---------- intro screen ---------- */
.hero{
  display:flex; flex-direction:column; gap:10px; padding-block:6px 4px;
}
.hero h2{font-size:clamp(28px,5vw,42px); line-height:1.02;}
.option-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.option-card{
  border:1.5px solid var(--border); border-radius:10px; padding:14px 16px; cursor:pointer;
  background:var(--surface-2); text-align:left; display:flex; flex-direction:column; gap:4px;
}
.option-card h4{font-size:14.5px; margin:0;}
.option-card p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.4;}
.option-card[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash);}
.field-label{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:8px; display:block;}

/* ---------- triage colors (fixed semantic, same both themes) ---------- */
.tag{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:5px; font-size:12px; font-weight:700;}
.tag-zielony{background:var(--tri-green); color:var(--tri-green-ink);}
.tag-zolty{background:var(--tri-yellow); color:var(--tri-yellow-ink);}
.tag-czerwony{background:var(--tri-red); color:var(--tri-red-ink);}
.tag-czarny{background:var(--tri-black); color:var(--tri-black-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);}

/* ---------- game header ---------- */
.incident-bar{
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; justify-content:space-between;
  padding:14px 18px; background:var(--surface); border:1px solid var(--border); border-radius:10px; margin-bottom:16px;
}
.incident-bar .meta{font-size:12.5px; color:var(--muted);}
.incident-bar .meta b{color:var(--ink);}
.progress-track{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; flex:1 1 160px; min-width:120px;}
.progress-fill{height:100%; background:var(--accent); border-radius:4px;}

/* ---------- persistent color tally (session-wide, like reference) ---------- */
.tally-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px;}
.tally-tile{border-radius:12px; padding:16px 8px; text-align:center;}
.tally-tile .n{font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:800; display:block; line-height:1;}
.tally-tile .l{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.9; margin-top:5px; display:block;}
.tally-zielony{background:var(--tri-green); color:var(--tri-green-ink);}
.tally-zolty{background:var(--tri-yellow); color:var(--tri-yellow-ink);}
.tally-czerwony{background:var(--tri-red); color:var(--tri-red-ink);}
.tally-czarny{background:var(--tri-black); color:var(--tri-black-ink); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);}

/* ---------- patient (triage tag) card ---------- */
.tag-card{
  border-radius:12px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--surface);
}
.tag-strip{height:10px; background:repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 26px); opacity:.55;}
.tag-body{padding:22px;}
.tag-top{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.tag-top h3{font-size:21px;}
.tag-top .sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.vignette{font-size:14.5px; color:var(--ink-2); line-height:1.55; margin-bottom:10px;}
.avpu-legend{font-size:11.5px; color:var(--muted); margin-bottom:16px;}

/* ---------- examination log (step-by-step transcript) ---------- */
.exam-log{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.exam-log .entry{
  font-size:12.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
  padding:9px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
}
.exam-log .entry .q{color:var(--ink); font-weight:600;}
.exam-log .entry .a{font-family:"IBM Plex Mono",monospace; color:var(--ink);}
.exam-log .entry .b{margin-left:auto; font-size:11px; font-weight:700; color:var(--accent); white-space:nowrap;}

/* ---------- interactive step area ---------- */
.step-kicker{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px;}
.step-block h4{font-size:16.5px; margin:0 0 12px;}
.choice-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px;}
.step-list{display:flex; flex-direction:column; gap:10px;}
.step-btn{
  border:1.5px solid var(--border-strong); border-radius:10px; padding:14px 12px; cursor:pointer; text-align:center;
  background:var(--surface-2); color:var(--ink); font-weight:600; font-size:14px; transition:transform .08s ease;
}
.step-btn:hover{border-color:var(--accent); background:var(--accent-wash); transform:translateY(-1px);}
.step-btn:disabled{opacity:.4; cursor:not-allowed;}
.retry-prompt{text-align:center; padding:28px 10px;}
.retry-msg{font-size:16px; font-weight:700; margin:0 0 6px; color:var(--ink);}
.retry-msg2{font-size:13.5px; color:var(--ink-2); margin:0 0 18px;}
.retry-actions{display:flex; gap:12px; justify-content:center;}
.retry-actions .btn{min-width:96px; justify-content:center;}
.measure-reveal{display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:16px;}
.measure-reveal .k{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);}
.measure-reveal .v{font-family:"IBM Plex Mono",monospace; font-size:18px; font-weight:700;}

/* ---------- choice buttons for final triage color (legacy reuse not used anymore) ---------- */
.choice-zielony{background:var(--tri-green); color:var(--tri-green-ink);}
.choice-zolty{background:var(--tri-yellow); color:var(--tri-yellow-ink);}
.choice-czerwony{background:var(--tri-red); color:var(--tri-red-ink);}
.choice-czarny{background:var(--tri-black); color:var(--tri-black-ink);}

/* ---------- reveal (leaf result) ---------- */
.reveal{border-radius:12px; padding:20px 22px; margin-top:4px; border:1.5px solid var(--border);}
.reveal.ok{border-color:var(--good); background:color-mix(in oklab, var(--good) 10%, var(--surface));}
.reveal.bad{border-color:var(--tri-yellow); background:color-mix(in oklab, var(--tri-yellow) 10%, var(--surface));}
.reveal-head{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:16px; font-weight:700; flex-wrap:wrap;}
.reveal-head .icon{font-size:20px;}
.steps{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px;}
.steps li{font-size:13.5px; color:var(--ink-2); display:flex; gap:8px; align-items:baseline;}
.steps li .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted); min-width:16px;}
.severity-note{margin-top:12px; font-size:13px; padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border);}

/* ---------- debrief ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.stat-tile{
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
}
.stat-tile .label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.stat-tile .value{font-family:"IBM Plex Mono",monospace; font-size:28px; font-weight:600; margin-top:4px;}
.stat-tile .hint{font-size:11.5px; color:var(--muted); margin-top:3px;}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; margin-top:6px;}
.chip-good{background:color-mix(in oklab, var(--good) 20%, transparent); color:var(--good);}
.chip-warn{background:color-mix(in oklab, var(--tri-yellow) 28%, transparent); color:#8a6400;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip-warn{color:#f2c233;}}
:root[data-theme="dark"] .chip-warn{color:#f2c233;}

.cat-breakdown{display:flex; flex-direction:column; gap:10px;}
.cat-row{display:grid; grid-template-columns:200px 1fr 70px; align-items:center; gap:10px;}
.cat-row .cname{font-size:12.5px; font-weight:700; color:var(--ink);}
.cat-bar-track{height:10px; border-radius:6px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border);}
.cat-bar-fill{height:100%; border-radius:6px; background:var(--accent);}
.cat-row .cnum{font-family:"IBM Plex Mono",monospace; font-size:12px; text-align:right; color:var(--ink-2);}

.mistake-card{border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface-2);}
.mistake-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:6px;}
.mistake-name{font-weight:700; font-size:14px;}
.mistake-compare{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2); margin:6px 0;}
.mistake-note{font-size:12.5px; color:var(--ink-2); line-height:1.5;}
.mistake-list{margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--ink-2); line-height:1.6;}

/* ---------- reference / diagram screen ---------- */
.legend-grid{display:flex; flex-wrap:wrap; gap:8px 16px; font-size:12.5px; color:var(--ink-2); margin-bottom:10px;}
.legend-grid span b{color:var(--ink);}
figure.diagram{margin:0; display:flex; flex-direction:column; gap:10px;}
figure.diagram svg{width:100%; height:auto; display:block;}
figcaption{font-size:12.5px; color:var(--muted);}
.diagram-scroll{overflow-x:auto; border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--surface-2);}
.dx-box{fill:var(--surface); stroke:currentColor; stroke-width:2;}
.dx-box-wide{fill:var(--surface); stroke:currentColor; stroke-width:2; stroke-dasharray:3 3;}
.dx-label{fill:var(--ink); font-family:"IBM Plex Sans",sans-serif;}
.dx-sub{fill:var(--muted); font-family:"IBM Plex Sans",sans-serif;}
.dx-edge{stroke:var(--ink-2); stroke-width:2; fill:none;}
.dx-edge-label{fill:var(--ink-2); font-family:"IBM Plex Mono",monospace;}
.dx-outcome text{font-weight:700; font-family:"IBM Plex Sans",sans-serif;}
.dx-green{fill:var(--tri-green);} .dx-green text{fill:#fff;}
.dx-yellow{fill:var(--tri-yellow);} .dx-yellow text{fill:#1a1a1a;}
.dx-red{fill:var(--tri-red);} .dx-red text{fill:#fff;}
.dx-black{fill:var(--tri-black); stroke:rgba(255,255,255,0.25);} .dx-black text{fill:#fff;}
.tabs{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.tab-btn{border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); padding:8px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;}
.tab-btn[aria-selected="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

footer.note{font-size:12px; color:var(--muted); text-align:center; margin-top:26px; line-height:1.6;}

@media (prefers-reduced-motion:reduce){ .choice-btn, .step-btn{transition:none;} }