/* 夜班病房（醫師版）: full-screen 3D ward, HUD, and the bedside panel that hosts the real clinical engine.
   Fonts are system stacks on purpose: the site's CSP only allows font-src 'self'. 微軟正黑體 first;
   Macs fall through to 蘋方. */
:root {
  --font-ui: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", "Heiti TC", system-ui, sans-serif;
  --font-voice: var(--font-ui);
  --font-num: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --g-bg: #05080d;
  --g-panel: rgba(8, 14, 22, .84);
  --g-panel-2: rgba(13, 21, 32, .96);
  --g-ink: #eaf2f7;
  --g-dim: #9db0c2;
  --g-line: rgba(160, 200, 230, .2);
  --g-red: #ff4f55;
  --g-amber: #ffb547;
  --g-teal: #45e3cc;
  /* app.js writes a few inline colours with these names */
  --lime: #45e3cc;
  --danger: #ff4f55;
  --muted: #9db0c2;
  color-scheme: dark;
}
html, body { height: 100%; margin: 0; }
body.game-page { background: var(--g-bg); color: var(--g-ink); font-family: var(--font-ui); overflow: hidden; }
[hidden] { display: none !important; }

.frame { position: fixed; inset: 0; overflow: hidden; container-type: inline-size; outline: none; user-select: none; }
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.layer { position: absolute; inset: 0; font-size: clamp(12px, 1.02cqw, 17px); pointer-events: none; }
.layer > * { pointer-events: auto; }
#marks, #marks * { pointer-events: none; }
.loading { position: absolute; inset: 0; display: grid; place-items: center; color: #8fa3b6; font-size: 15px; letter-spacing: .1em; }
.loading.err { color: #ffb9bc; }

/* markers above heads */
.mk { position: absolute; left: -100%; top: -100%; transform: translate(-50%, -100%); white-space: nowrap; display: grid; justify-items: center; gap: .25em; }
.bang { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font: 900 1.35em/1 var(--font-ui); color: #fff; background: var(--g-red); box-shadow: 0 0 0 .22em rgba(255, 79, 85, .35), 0 .4em 1em rgba(0, 0, 0, .45); animation: bob .9s ease-in-out infinite; }
.mk.amber .bang { background: var(--g-amber); color: #3a2300; box-shadow: 0 0 0 .22em rgba(255, 181, 71, .35), 0 .4em 1em rgba(0, 0, 0, .45); }
.mk.busy .bang { background: #3b82c4; box-shadow: 0 0 0 .22em rgba(59, 130, 196, .35); animation: none; font-size: 1em; }
.mk.done .bang { background: #2fbf8f; animation: none; font-size: 1.1em; }
.mk .lbl { font: 700 .74em var(--font-num); padding: .18em .55em; border-radius: 999px; background: var(--g-panel); border: 1px solid var(--g-line); }
.mk.tag .lbl { font-family: var(--font-ui); font-weight: 500; }
.mk.dimlbl .lbl { color: var(--g-dim); font-weight: 500; }
@keyframes bob { 50% { transform: translateY(-.35em); } }
.edge { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .35em; padding: .3em .65em .3em .5em; border-radius: 999px; background: rgba(78, 10, 16, .92); border: 1px solid rgba(255, 79, 85, .65); font: 700 .78em var(--font-num); }
.edge.amber { background: rgba(70, 44, 6, .92); border-color: rgba(255, 181, 71, .6); }
.edge i { width: 0; height: 0; border-left: .6em solid currentColor; border-top: .38em solid transparent; border-bottom: .38em solid transparent; transform: rotate(var(--a)); color: var(--g-red); }
.edge.amber i { color: var(--g-amber); }
.prompt { display: inline-flex; align-items: center; gap: .55em; padding: .42em .9em .42em .45em; border-radius: .6em; background: rgba(4, 30, 28, .92); border: 1px solid rgba(69, 227, 204, .75); box-shadow: 0 0 1.2em rgba(69, 227, 204, .35); font-size: .95em; font-weight: 700; }
.key { display: inline-grid; place-items: center; min-width: 1.75em; height: 1.75em; padding: 0 .45em; border-radius: .35em; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; color: var(--g-ink); font: 700 .86em var(--font-num); }
.prompt .key { background: var(--g-teal); color: #032420; border-color: transparent; }
.mk.zzz { font: 900 1.8em var(--font-num); color: #cfe3ff; letter-spacing: .15em; text-shadow: 0 0 .6em rgba(140, 180, 255, .6); animation: zz 2.4s ease-in-out infinite; }
@keyframes zz { 0% { opacity: .2; margin-top: .6em; } 50% { opacity: 1; } 100% { opacity: 0; margin-top: -.8em; } }

/* HUD */
.hud-time { position: absolute; left: 1.6%; top: 2.6%; padding: .65em 1em .75em; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: .7em; display: grid; gap: .2em; }
.hud-time .ward { font-size: .78em; color: var(--g-dim); letter-spacing: .08em; }
.hud-time .clock { font: 700 2.5em/1.05 var(--font-num); font-variant-numeric: tabular-nums; }
.hud-time .clock small { font-size: .36em; color: var(--g-dim); margin-left: .35em; font-weight: 500; }
.hud-time .sub { font-size: .8em; color: var(--g-teal); }
.hud-right { position: absolute; right: 1.6%; top: 2.6%; width: 20em; display: grid; gap: .5em; }
.meters { padding: .75em .9em; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: .7em; display: grid; gap: .55em; }
.meter { display: grid; grid-template-columns: 2.4em 1fr 4.4em; align-items: center; gap: .55em; font-size: .82em; }
.meter .bar { height: .5em; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.meter .bar i { display: block; height: 100%; width: 50%; background: var(--g-teal); border-radius: inherit; transition: width .4s; }
.meter .bar i.warn { background: var(--g-amber); }
.meter .bar i.bad { background: var(--g-red); }
.meter em { font-style: normal; color: var(--g-dim); font-size: .88em; text-align: right; }
.hud-btns { display: flex; gap: .4em; justify-content: flex-end; }
.hbtn { font: 500 .8em var(--font-ui); color: var(--g-ink); background: var(--g-panel); border: 1px solid var(--g-line); border-radius: .5em; padding: .45em .75em; cursor: pointer; display: inline-flex; gap: .4em; align-items: center; }
.hbtn:hover { border-color: var(--g-teal); }
.hbtn:focus-visible { outline: 2px solid var(--g-teal); }
.hud-calls { position: absolute; right: 1.6%; top: calc(2.6% + 9.5em); width: 20em; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: .7em; overflow: hidden; }
.hud-calls header { display: flex; justify-content: space-between; align-items: baseline; padding: .6em .9em; font-size: .82em; color: var(--g-dim); border-bottom: 1px solid var(--g-line); }
.hud-calls header b { color: var(--g-ink); font: 700 1.15em var(--font-num); }
.hud-calls ol { list-style: none; margin: 0; padding: .35em; display: grid; gap: .25em; }
.hud-calls li { display: grid; grid-template-columns: 3em 1fr; gap: .1em .5em; padding: .5em .6em; border-radius: .45em; border-left: .22em solid rgba(255, 255, 255, .15); }
.hud-calls li b { font: 700 .92em var(--font-num); }
.hud-calls li span { font-size: .8em; line-height: 1.45; }
.hud-calls li time { grid-column: 2; font-size: .7em; color: var(--g-dim); }
.hud-calls li.red { background: rgba(255, 79, 85, .14); border-left-color: var(--g-red); }
.hud-calls li.amber { border-left-color: var(--g-amber); }
.hud-calls li.busy { border-left-color: #3b82c4; background: rgba(59, 130, 196, .12); }
.hud-calls .empty { margin: 0; padding: .8em .9em; font-size: .8em; color: var(--g-dim); }
.goal { position: absolute; left: 50%; bottom: 2.6%; transform: translateX(-50%); display: flex; gap: .7em; align-items: center; padding: .55em 1.1em; background: var(--g-panel); border: 1px solid var(--g-line); border-radius: 999px; font-size: .9em; white-space: nowrap; }
.goal b { color: var(--g-amber); font-weight: 700; }
.toast { position: absolute; left: 50%; top: 2.6%; transform: translateX(-50%); display: flex; gap: .75em; align-items: center; padding: .65em 1.1em; background: rgba(74, 10, 16, .94); border: 1px solid rgba(255, 79, 85, .6); border-radius: .7em; font-size: .92em; max-width: 46%; z-index: 4; }
.toast.soft { background: rgba(8, 40, 37, .95); border-color: rgba(69, 227, 204, .55); }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
/* round head shots: at 165% the whole head, hair included, fits the circle; the chief's head sits a little right of centre */
.avatar { width: 2.8em; height: 2.8em; border-radius: 50%; flex: none; background: #e9eef2 no-repeat 50% 2% / 165% auto; border: 2px solid rgba(255, 255, 255, .8); }
#hChiefAvatar { background-position: 58% 2%; }
body.at-bedside .hud-right, body.at-bedside .hud-calls, body.at-bedside .goal { display: none; }

/* eating and sleeping */
.eat, .sleepcard { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); box-sizing: border-box; width: 36em; max-width: 92%; padding: 1em 1.2em; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: .8em; display: grid; gap: .65em; }
.eat header, .sleepcard header { display: flex; justify-content: space-between; align-items: baseline; }
.eat header span { font: 700 1em var(--font-num); color: var(--g-amber); }
.sleepcard header span { font: 700 1em var(--font-num); color: var(--g-teal); }
.eat .bar, .sleepcard .bar { height: .7em; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.eat .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb547, #ffd27a); border-radius: inherit; }
.sleepcard .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #45e3cc, #8fd8ff); border-radius: inherit; }
.eat p, .sleepcard p { margin: 0; font-size: .82em; color: var(--g-dim); }
.eat.with-me, .sleepcard.with-me { padding-left: 8em; }
.eat .me, .sleepcard .me { position: absolute; left: .5em; bottom: 0; height: 9.4em; aspect-ratio: 3 / 4; object-fit: contain; object-position: bottom; pointer-events: none; filter: drop-shadow(0 .6em 1em rgba(0, 0, 0, .5)); }
.sleepfx { position: absolute; inset: 0; background: radial-gradient(ellipse at 28% 62%, rgba(4, 6, 14, .2), rgba(2, 3, 9, .9) 72%); pointer-events: none; }

/* game overlays (not the clinical engine's .modal, which keeps its own name) */
.gmodal { position: absolute; inset: 0; z-index: 6; }
.gmodal .dim { position: absolute; inset: 0; background: rgba(4, 8, 14, .58); backdrop-filter: blur(3px); }
.btn { font: 500 .9em var(--font-ui); color: var(--g-ink); padding: .62em .95em; border-radius: .55em; border: 1px solid var(--g-line); background: rgba(255, 255, 255, .07); white-space: nowrap; cursor: pointer; }
.btn:hover { border-color: rgba(255, 255, 255, .45); }
.btn:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 1px; }
.btn.go { background: var(--g-teal); color: #032420; font-weight: 700; border-color: transparent; }
.btn.warn { color: #ffc2c5; border-color: rgba(255, 79, 85, .45); }
.btn.red { background: var(--g-red); color: #fff; font-weight: 700; border-color: transparent; }
.gfield { flex: 1; min-width: 0; font: 400 1em var(--font-ui); color: var(--g-ink); padding: .62em .9em; background: rgba(255, 255, 255, .06); border: 1px solid rgba(69, 227, 204, .55); border-radius: .55em; outline: none; }
.gfield:focus { border-color: var(--g-teal); box-shadow: 0 0 0 .15em rgba(69, 227, 204, .25); }
.gorder { display: flex; gap: .5em; align-items: center; margin: 0; }

.portrait { position: absolute; left: 1%; bottom: 0; height: 84%; aspect-ratio: 3 / 4; margin: 0; pointer-events: none; }
.portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; filter: drop-shadow(0 1em 1.6em rgba(0, 0, 0, .6)); }
/* you, the PGY: on the right, opposite whoever is calling or talking */
.portrait.me { left: auto; right: 1%; height: 70%; }
.gmodal.with-me .icard, .gmodal.with-me .callcard { left: 44%; }
@container (max-width: 760px) {
  .portrait.me { display: none; }
  .gmodal.with-me .icard, .gmodal.with-me .callcard { left: 50%; }
}
.gdialog { position: absolute; left: 27%; right: 2.4%; bottom: 4.5%; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: .9em; padding: 1.5em 1.6em 1.15em; display: grid; gap: .9em; box-shadow: 0 1.5em 3em -1em rgba(0, 0, 0, .65); }
.gdialog .name { position: absolute; top: -1.05em; left: 1.3em; padding: .3em .95em; background: #f2f4f7; color: #233244; border-radius: .45em; font-weight: 700; font-size: .9em; }
.gline { margin: 0; font: 1.42em/1.62 var(--font-voice); }
.gline em { font-style: normal; color: var(--g-amber); }
.after { display: flex; justify-content: flex-end; }

/* pause: above every overlay, the bedside and its full-screen films included */
.pause { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(4, 8, 14, .62); backdrop-filter: blur(4px); padding: 1em; }
.pausecard { width: min(26em, 100%); padding: 1.5em 1.6em 1.3em; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: 1em; display: grid; gap: .9em; justify-items: center; text-align: center; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .75); }
.pausecard b { font-size: 1.5em; letter-spacing: .08em; }
.pausecard p { margin: 0; color: var(--g-dim); line-height: 1.6; }
.pausecard small { color: var(--g-dim); font-size: .8em; }
.icard { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -50%); padding: 1.5em 1.6em 1.4em; background: var(--g-panel-2); border: 1px solid rgba(255, 79, 85, .6); border-radius: 1em; display: grid; gap: 1em; box-shadow: 0 2em 4em -1em rgba(0, 0, 0, .75); }
.icard p { margin: 0; }
.icard.pic { grid-template-columns: 32% 1fr; padding: 0 1.6em 0 0; gap: 1.2em; overflow: hidden; }
.icard.wide { width: 56%; }
.icard .ipic { width: 100%; display: block; align-self: end; }
.icard .icol { display: grid; gap: 1em; padding: 1.5em 0 1.4em; align-content: center; }
.icard .row { display: flex; gap: .6em; flex-wrap: wrap; }
.icard small { color: var(--g-dim); font-size: .8em; }
.callhead { display: flex; justify-content: space-between; align-items: center; gap: .8em; font-size: .8em; color: #ff9da1; letter-spacing: .1em; font-weight: 700; }
.callhead .ring { display: inline-flex; align-items: center; gap: .5em; }
.callhead .ring i { width: .6em; height: .6em; border-radius: 50%; background: var(--g-red); animation: ping 1s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 79, 85, .75); } 100% { box-shadow: 0 0 0 .9em rgba(255, 79, 85, 0); } }
.quote { margin: 0; font: 1.45em/1.55 var(--font-voice); color: #fff; }
.step { display: flex; gap: .6em; align-items: center; font-size: .82em; color: var(--g-dim); }
.step b { padding: .2em .6em; border-radius: .35em; background: rgba(255, 79, 85, .18); color: #ffc2c5; font-weight: 700; white-space: nowrap; }

.callcard { position: absolute; left: 50%; top: 50%; width: 62%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 36% 1fr; background: var(--g-panel-2); border: 1px solid rgba(255, 79, 85, .6); border-radius: 1em; overflow: hidden; box-shadow: 0 0 0 .35em rgba(255, 79, 85, .12), 0 2em 4em -1em rgba(0, 0, 0, .75); }
.callcard.shake { animation: jolt .45s ease-in-out; }
@keyframes jolt { 20% { transform: translate(-51%, -50%) rotate(-.6deg); } 40% { transform: translate(-49%, -50%) rotate(.6deg); } 60% { transform: translate(-50.5%, -50%); } 80% { transform: translate(-49.6%, -50%); } }
.callcard .who { position: relative; min-height: 100%; background: repeating-conic-gradient(from 0deg at 50% 38%, rgba(255, 255, 255, .06) 0 2deg, transparent 2deg 9deg), radial-gradient(circle at 50% 38%, #7a1a20, #2a080c 72%); }
.callcard .who img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.callcard .body { padding: 1.5em 1.6em 1.4em; display: grid; gap: .9em; align-content: start; }
.callcard h3 { margin: 0; font-size: 1.5em; }
.callcard h3 small { font-size: .55em; color: var(--g-dim); font-weight: 500; margin-left: .5em; }
.redwash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(120, 0, 12, .2), rgba(70, 0, 8, .72) 78%); }

.handover { position: absolute; left: 50%; top: 50%; width: 80%; max-height: 92%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 20% 1.35fr 1fr; grid-template-rows: minmax(0, 1fr); background: #fbf8f3; color: #1c2430; border-radius: 1em; overflow: hidden; box-shadow: 0 2.2em 4.5em -1.6em rgba(0, 0, 0, .7); }
.handover .who { position: relative; background: linear-gradient(180deg, #e4ecf1, #c8d5de); }
.handover .who img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.handover .main { padding: 1.6em 1.8em 1.4em; display: grid; gap: 1em; align-content: start; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.handover .when { font-size: .8em; color: #c2562a; font-weight: 700; letter-spacing: .12em; }
.handover h3 { margin: 0; font-size: 2.1em; font-weight: 900; line-height: 1.15; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em .8em; }
.stat { display: grid; gap: .15em; padding-top: .55em; border-top: 1px solid #e7e0d5; min-width: 0; }
.stat small { font-size: .74em; color: #7a7f88; }
.stat b { font-size: 1.35em; font-variant-numeric: tabular-nums; }
.stat b span { font-size: .6em; color: #7a7f88; font-weight: 500; margin-left: .15em; }
.caselist { margin: 0; padding: 0; list-style: none; display: grid; gap: .3em; font-size: .85em; }
.caselist li { padding: .35em .5em; border-radius: .4em; background: #f2ede4; }
.caselist summary { display: grid; grid-template-columns: 3.9em 1fr auto 1em; gap: .6em; align-items: baseline; cursor: pointer; list-style: none; }
.caselist summary::-webkit-details-marker { display: none; }
.caselist summary::after { content: '▸'; color: #9a8f80; }
.caselist details[open] summary::after { content: '▾'; }
.caselist details p { margin: .45em 0 .2em; font-size: .95em; line-height: 1.6; color: #4a4038; white-space: pre-line; }
.caselist li b { font-family: var(--font-num); }
.caselist li em { font-style: normal; font-weight: 700; font-family: var(--font-num); }
.caselist li.fail em { color: #c2362a; }
.handover .mark { font-size: .72em; color: #a19a90; letter-spacing: .08em; }
.handover .side { padding: 1.6em 1.6em 1.4em; display: grid; gap: 1em; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; color: #fff; background: linear-gradient(165deg, #18233b 0%, #3b2950 55%, #d76c3a 100%); }
.score { display: flex; align-items: baseline; gap: .4em; }
.score b { font: 700 4.2em/.9 var(--font-num); }
.score span { font-size: .85em; opacity: .8; }
.badge { justify-self: start; padding: .35em .8em; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); font-size: .85em; font-weight: 700; }
/* the note takes what is left and scrolls, so the buttons under it always stay on the card */
.chiefrow { display: flex; gap: .7em; align-items: flex-start; align-self: end; min-height: 0; max-height: 100%; overflow: auto; }
.chief { margin: 0; font: 1.08em/1.6 var(--font-voice); }
.chief small { display: block; font: .72em var(--font-ui); opacity: .7; margin-bottom: .2em; }
.actions { display: flex; flex-wrap: wrap; gap: .45em; }
.actions .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; }
.actions .btn.go { background: #fff; color: #2a1d3a; }

/* 17:00 handover brief, between choosing the doctor and the start of the shift */
.brief { position: absolute; inset: 0; z-index: 8; overflow: auto; padding: 1.8em 2.4em 1.6em; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2em;
  background: radial-gradient(ellipse at 50% 40%, rgba(5, 9, 15, .55), rgba(5, 9, 15, .94)); backdrop-filter: blur(3px); }
.brief-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.brief-head .eyebrow { margin: 0; font-size: .82em; letter-spacing: .22em; color: var(--g-teal); font-weight: 700; }
.brief-head h1 { margin: .25em 0 .15em; font-size: 2.3em; font-weight: 900; }
.brief-head .sub { margin: 0; color: var(--g-dim); }
.brief-clock { text-align: right; }
.brief-clock b { display: block; font: 700 3em/1 var(--font-num); }
.brief-clock span { color: var(--g-dim); font-size: .85em; }
.brief-main { display: grid; grid-template-columns: 17em minmax(0, 1fr) 25em; gap: 1.3em; min-height: 0; }
.brief-you { background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: 1em; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.brief-you .pic { background: linear-gradient(180deg, #23384a, #142230); min-height: 0; overflow: hidden; }
.brief-you img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.brief-main > * { min-height: 0; }
.brief-side { overflow: auto; scrollbar-width: thin; }
.brief-you .who { padding: 1em 1.2em 1.1em; display: grid; gap: .6em; }
.brief-you h3 { margin: 0; font-size: 1.3em; }
.brief-you h3 small { font-size: .65em; color: var(--g-dim); font-weight: 500; margin-left: .4em; }
.bmeter { display: grid; grid-template-columns: 2.5em 1fr 5em; align-items: center; gap: .6em; font-size: .85em; color: var(--g-dim); }
.bmeter i { height: .5em; border-radius: 99px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; }
.bmeter i::after { content: ''; position: absolute; inset: 0; width: var(--v); background: var(--g-teal); border-radius: inherit; }
.bmeter i.warn::after { background: var(--g-amber); }
.bmeter em { font-style: normal; text-align: right; color: var(--g-ink); font-size: .9em; }
.brief .sheet { background: #f7f2e8; color: #22262c; border-radius: .9em; padding: 1.4em 1.6em 1.1em; position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .7em; box-shadow: 0 1.5em 3em -1.2em rgba(0, 0, 0, .8); min-height: 0; }
.brief .sheet::before { content: ''; position: absolute; top: -.85em; left: 50%; width: 7.5em; height: 1.6em; transform: translateX(-50%); background: #9aa3ad; border-radius: .5em; box-shadow: inset 0 -.25em 0 rgba(0, 0, 0, .2); }
.brief .sheet h2 { margin: 0; font-size: 1.5em; font-weight: 900; }
.brief .sheet .from { font-size: .9em; color: #6b6458; display: flex; justify-content: space-between; gap: 1em; border-bottom: 2px solid #e1d8c6; padding-bottom: .6em; }
.brief .pts { overflow: auto; }
.brief .pt { display: grid; grid-template-columns: 5.4em 1fr; gap: .2em .9em; padding: .6em 0; border-bottom: 1px dashed #d9cfbb; }
.brief .pt:last-child { border-bottom: 0; }
.brief .pt b { font: 700 1.15em var(--font-num); color: #0e6a63; grid-row: span 2; align-self: center; }
.brief .pt strong { font-size: 1.05em; }
.brief .pt span { font-size: .92em; color: #4c4a45; line-height: 1.5; }
.brief .sheet footer { font-size: .85em; color: #6b6458; background: #efe6d4; border-radius: .6em; padding: .6em .9em; }
.brief-side { display: grid; grid-template-rows: auto 1fr; gap: 1em; min-height: 0; }
.bcard { background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: 1em; padding: 1.1em 1.3em; }
.bcard .label { font-size: .8em; letter-spacing: .16em; color: var(--g-dim); font-weight: 700; margin-bottom: .7em; }
.bcard .label.rules { margin-top: 1.1em; padding-top: .9em; border-top: 1px solid var(--g-line); }
.brief .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; text-align: center; font-size: .88em; }
.brief .team .av { display: block; width: 4.4em; height: 4.4em; margin: 0 auto .35em; border-radius: 50%; background: #e9eef2 no-repeat 50% 2% / 165% auto; border: 2px solid rgba(255, 255, 255, .7); }
.brief .team b { display: block; font-size: 1.1em; }
.brief .team small { color: var(--g-dim); font-family: var(--font-num); }
.bkeys { display: grid; grid-template-columns: 1fr 1fr; gap: .6em .9em; font-size: .88em; color: #c9d6e2; }
.bkeys div { display: flex; align-items: center; gap: .5em; }
.bkeys .wide { grid-column: 1 / -1; }
.brules { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; font-size: .9em; color: #c9d6e2; }
.brules li::marker { color: var(--g-amber); }
.brules li.care { color: #ffe2b4; }
.brules li.care b { color: var(--g-amber); }
.brief-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.4em; }
.timeline { display: flex; align-items: center; font-size: .85em; color: var(--g-dim); }
.timeline .tl-step { display: grid; justify-items: center; gap: .3em; min-width: 5.5em; }
.timeline .tl-step i { width: .85em; height: .85em; border-radius: 50%; background: #50606e; }
.timeline .tl-step.on i { background: var(--g-teal); box-shadow: 0 0 0 .3em rgba(69, 227, 204, .2); }
.timeline .tl-step b { font: 700 1.1em var(--font-num); color: var(--g-ink); }
.timeline .bar { flex: 1; max-width: 7em; height: 2px; background: #50606e; margin-bottom: 1.6em; }
.cta { display: grid; gap: .4em; justify-items: end; }
.cta .btn.go { font-size: 1.25em; font-weight: 900; padding: .8em 1.6em; border-radius: .7em; box-shadow: 0 .8em 2em -.6em rgba(69, 227, 204, .7); }
.cta small { color: var(--g-dim); font-size: .8em; }
@media (max-height: 820px) { .brief { font-size: .84em; gap: .8em; padding-top: 1.2em; padding-bottom: 1em; } }
@container (max-width: 980px) {
  .brief { padding: 1.2em; }
  .brief-main { grid-template-columns: 1fr; }
  .brief-you { grid-template-columns: 8em 1fr; grid-template-rows: none; }
  .brief-you .pic { max-height: 10em; }
  .brief-go { grid-template-columns: 1fr; }
  .timeline { display: none; }
  .cta { justify-items: stretch; }
}

/* start screen with the clinical setup */
.start { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(5, 9, 15, .55), rgba(5, 9, 15, .9)); z-index: 8; overflow: auto; padding: 1em; }
.start .card { width: min(64em, 96%); padding: 1.8em 2em; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: 1em; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.8em; align-items: start; }
.start .lhs, .start .rhs { display: grid; gap: 1em; min-width: 0; }
.start .eyebrow { margin: 0; font-size: .78em; letter-spacing: .16em; color: var(--g-teal); font-weight: 700; }
.start h1 { margin: 0; font-size: 2em; font-weight: 900; }
.start p { margin: 0; color: var(--g-dim); line-height: 1.7; }
.start dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .45em 1em; font-size: .9em; align-items: center; }
.start dt { display: flex; gap: .3em; }
.start dd { margin: 0; color: var(--g-dim); }
.setup { display: grid; grid-template-columns: 1fr 1fr; gap: .7em .9em; padding-top: .9em; border-top: 1px solid var(--g-line); }
.sf { display: grid; gap: .3em; font-size: .85em; color: var(--g-dim); min-width: 0; }
.sf > span { color: #d6e2ec; font-weight: 700; }
.sf.full { grid-column: 1 / -1; }
.sf select, .sf input { font: 1em var(--font-ui); color: var(--g-ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--g-line); border-radius: .5em; padding: .55em .7em; min-width: 0; }
.sf select:focus, .sf input:focus { outline: 2px solid var(--g-teal); outline-offset: 1px; }
.sf select { font-weight: 700; color: #fff; background-color: #16222f; }
.sf select option { font-weight: 500; color: #f2f7fb; background-color: #16222f; }
.sf-hint { grid-column: 1 / -1; font-size: .82em; }
.sf-hint.err { color: #ffb9bc; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.pick button { display: grid; gap: .4em; justify-items: center; padding: .5em .5em .7em; border-radius: .8em; border: 1px solid var(--g-line); background: rgba(255, 255, 255, .05); color: var(--g-ink); font: 700 .95em var(--font-ui); cursor: pointer; }
.pick button:hover, .pick button:focus-visible { border-color: var(--g-teal); background: rgba(69, 227, 204, .12); outline: none; }
.pick button:disabled { opacity: .5; cursor: progress; }
.pick img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 0; border-radius: .6em; background: linear-gradient(180deg, #2c3d4b, #1a2530); }

/* bedside: the 3D bed stays visible on the left, the clinical engine runs on the right */
.bedside { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bedside > * { pointer-events: auto; }
.bs-portrait { position: absolute; right: 54%; bottom: 0; height: 70%; aspect-ratio: 3 / 4; margin: 0; pointer-events: none; }
.bs-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; filter: drop-shadow(0 1em 1.6em rgba(0, 0, 0, .6)); }
.bs-panel { position: absolute; right: 1.6%; top: 2.6%; bottom: 2.6%; width: 56%; display: flex; flex-direction: column; gap: .8em; padding: 1em 1.1em; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: .9em; box-shadow: 0 1.5em 3em -1em rgba(0, 0, 0, .7); }
.bs-head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.bs-head .bs-bed { font: 700 .82em var(--font-num); padding: .2em .55em; border-radius: .4em; background: var(--g-amber); color: #3a2300; margin-right: .6em; vertical-align: middle; }
.bs-head .bs-bed.red { background: var(--g-red); color: #fff; }
.bs-head b { font-size: 1.1em; }
.bs-head small { display: block; margin-top: .25em; color: var(--g-dim); font-size: .8em; }
.bs-actions { display: flex; gap: .45em; flex: none; }
.bs-engine { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }

/* bedside monitor: the engine's live vital-sign line, drawn like the monitor on the wall */
.vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.4em, 1fr)); gap: .35em .45em; padding: .55em .7em .6em; background: #03070b; border: 1px solid #1d2b37; border-radius: .6em; font-family: var(--font-num); flex: none; }
.vitals header { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: .6em; font: .74em var(--font-ui); color: var(--g-dim); }
.vitals header b { color: var(--g-ink); }
.vitals svg { grid-column: 1 / -1; width: 100%; height: 1.7em; }
.vital { display: grid; gap: .1em; padding: .25em .4em; border-radius: .35em; min-width: 0; }
.vital small { font-size: .66em; letter-spacing: .06em; opacity: .85; }
.vital b { font-size: 1.55em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vital.wide b { font-size: 1.2em; }
.vital.hr { color: #5bff8f; } .vital.spo2 { color: #4fe3ff; } .vital.bp { color: #ff9aa2; } .vital.rr { color: #ffd166; } .vital.bt { color: #ffb2e6; } .vital.gcs { color: #c6d3df; }
.vital.alarm { background: #c81e2a; color: #fff; animation: flash 1.1s steps(1) infinite; }
@keyframes flash { 50% { background: #5a0d13; } }
.bs-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--g-dim); }

/* the clinical engine's own page, re-skinned to sit inside the bedside panel */
#engineRoot .scanlines, #engineRoot #landing, #engineRoot #setupScreen, #engineRoot #releaseModal, #engineRoot #scoreModal,
#engineRoot #endShift, #engineRoot #stableEndShift, #engineRoot #endCase, #engineRoot .shift-header { display: none !important; }
#engineRoot .dialog-shell { flex: 1; min-height: 0; display: flex; }
#engineRoot .dialog-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .7em; }
#engineRoot .conversation { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .55em; padding: .2em .3em .6em; scrollbar-width: thin; }
#engineRoot .log-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55em; align-items: start; max-width: 92%; }
#engineRoot .log-tag { font: 700 .72em var(--font-ui); padding: .3em .6em; border-radius: .4em; background: rgba(255, 255, 255, .08); color: var(--g-dim); white-space: nowrap; margin-top: .2em; }
#engineRoot .log-entry > div:last-child { background: rgba(255, 255, 255, .06); border: 1px solid var(--g-line); border-radius: .7em; padding: .55em .8em; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
#engineRoot .log-entry.who-nurse > div:last-child { background: transparent; color: var(--g-ink); border: 0; border-left: 3px solid var(--g-teal); border-radius: 0; padding: .15em .2em .15em .8em; font-size: 1.05em; }
/* the engine already opens every nurse line with 「護理師：」, so her tag would only repeat it */
#engineRoot .log-entry.who-nurse { grid-template-columns: minmax(0, 1fr); }
#engineRoot .log-entry.who-nurse .log-tag { display: none; }
#engineRoot .log-entry.who-you { align-self: flex-end; grid-template-columns: minmax(0, 1fr) auto; }
#engineRoot .log-entry.who-you .log-tag { order: 2; background: var(--g-teal); color: #032420; }
#engineRoot .log-entry.who-you > div:last-child { background: rgba(69, 227, 204, .14); border-color: rgba(69, 227, 204, .4); }
#engineRoot .log-entry.who-chief .log-tag { background: rgba(255, 79, 85, .22); color: #ffc2c5; }
#engineRoot .log-entry.muted > div:last-child { color: var(--g-dim); background: transparent; border-style: dashed; font-size: .92em; }
#engineRoot .log-entry small { display: block; color: var(--g-dim); font-size: .8em; margin-top: .3em; }
#engineRoot .input-row { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }
#engineRoot .input-row input { flex: 1 1 18em; min-width: 0; font: 1em var(--font-ui); color: var(--g-ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(69, 227, 204, .55); border-radius: .55em; padding: .65em .9em; outline: none; }
#engineRoot .input-row input:focus { border-color: var(--g-teal); box-shadow: 0 0 0 .15em rgba(69, 227, 204, .25); }
#engineRoot button { font: 500 .88em var(--font-ui); color: var(--g-ink); padding: .6em .9em; border-radius: .55em; border: 1px solid var(--g-line); background: rgba(255, 255, 255, .07); cursor: pointer; }
#engineRoot button:hover:not(:disabled) { border-color: rgba(255, 255, 255, .45); }
#engineRoot button:disabled { opacity: .45; cursor: default; }
#engineRoot button:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 1px; }
#engineRoot .send-btn, #engineRoot .primary-btn { background: var(--g-teal); color: #032420; font-weight: 700; border-color: transparent; }
#engineRoot .call-senior-btn { color: #ffc2c5; border-color: rgba(255, 79, 85, .45); }
#engineRoot .primary-btn.danger { background: var(--g-red); color: #fff; }
#engineRoot .full-btn { width: 100%; }
#engineRoot .modal-backdrop { position: absolute; inset: 0; display: none; place-items: center; background: rgba(4, 8, 14, .74); z-index: 5; padding: 1em; border-radius: .6em; }
#engineRoot .modal-backdrop.open { display: grid; }
#engineRoot .modal { position: relative; width: min(100%, 46em); max-height: 100%; overflow: auto; background: var(--g-panel-2); border: 1px solid var(--g-line); border-radius: .9em; padding: 1.3em 1.4em; display: grid; gap: .8em; box-sizing: border-box; }
#engineRoot .close-modal { position: absolute; right: .6em; top: .5em; padding: .15em .6em; font-size: 1.1em; }
#engineRoot .section-label { margin: 0; font-size: .74em; letter-spacing: .14em; font-weight: 700; color: var(--g-teal); }
#engineRoot .section-label.red { color: #ff9da1; }
#engineRoot .modal h3 { margin: 0; font-size: 1.25em; }
/* the ward's own lab sheet (results held for LAB_WAIT, opened from the call list) */
.labcard { width: min(40em, 92%); border-color: rgba(69, 227, 204, .55); max-height: 88%; overflow: auto; }
.labcard h3 { margin: 0; font-size: 1.3em; }
.callhead.lab { color: var(--g-teal); }
.labcard .lab-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.labcard .lab-table th, .labcard .lab-table td { padding: .45em .7em; text-align: left; border-bottom: 1px solid var(--g-line); }
.labcard .lab-table thead th { color: var(--g-dim); font-weight: 600; font-size: .85em; }
.labcard .lab-table td:nth-child(2) { font: 700 1em var(--font-num); }
.labcard .lab-table .lab-group th { padding-top: .8em; color: var(--g-teal); font-size: .82em; letter-spacing: .08em; }
.labcard .lab-table .lab-flag-h td:nth-child(2) { color: #ff8a8f; }
.labcard .lab-table .lab-flag-l td:nth-child(2) { color: #7cc4ff; }
.hud-calls .labhead { margin-top: .5em; }
.hud-calls li.lab { border-left-color: #3b82c4; opacity: .75; }
.hud-calls li.lab.ready { border-left-color: var(--g-teal); background: rgba(69, 227, 204, .14); opacity: 1; cursor: pointer; }
.hud-calls li.lab.ready span { color: var(--g-teal); font-weight: 700; }
#engineRoot .lab-table { width: 100%; border-collapse: collapse; font-size: .92em; }
#engineRoot .lab-table th, #engineRoot .lab-table td { padding: .45em .7em; text-align: left; border-bottom: 1px solid var(--g-line); }
#engineRoot .lab-table thead th { color: var(--g-dim); font-weight: 600; font-size: .85em; }
#engineRoot .lab-table td:nth-child(2) { font: 700 1em var(--font-num); }
#engineRoot .lab-table .lab-group th { padding-top: .8em; color: var(--g-teal); font-size: .82em; letter-spacing: .08em; }
#engineRoot .lab-table .lab-flag-h td:nth-child(2) { color: #ff8a8f; }
#engineRoot .lab-table .lab-flag-l td:nth-child(2) { color: #7cc4ff; }
#engineRoot .lab-open { margin-left: .6em; padding: .15em .7em; border-radius: 999px; border: 1px solid rgba(69, 227, 204, .55); background: transparent; color: var(--g-teal); font: 600 .82em var(--font-ui); cursor: pointer; }
#engineRoot .modal-hint { margin: 0; font-size: .82em; color: var(--g-dim); }
#engineRoot .modal-hint.help-error { color: #ffb9bc; }
#engineRoot .modal input { font: 1em var(--font-ui); color: var(--g-ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--g-line); border-radius: .5em; padding: .6em .8em; }
#engineRoot .study-image-frame { background: #000; border-radius: .5em; overflow: hidden; display: grid; place-items: center; }
#engineRoot .study-image { max-width: 100%; max-height: 48vh; display: block; }
/* imaging opens over the whole screen instead of inside the bedside panel, so a film is
   big enough to read; nothing above the bedside sets a containing block for fixed */
#engineRoot #xrayModal, #engineRoot #ekgModal, #engineRoot #brainCtModal { position: fixed; inset: 0; border-radius: 0; padding: 1.5vh 2vw; background: rgba(2, 5, 9, .9); }
#engineRoot #xrayModal .modal, #engineRoot #ekgModal .modal, #engineRoot #brainCtModal .modal { width: min(96vw, 96em); max-height: 97vh; }
#engineRoot #xrayModal .study-image { max-height: 78vh; }
#engineRoot #xrayModal .modal { width: fit-content; min-width: min(36em, 96vw); }
#engineRoot #ekgModal .study-image { max-height: 54vh; }
#engineRoot #brainCtModal .brain-ct-stage img { max-height: 70vh; }
#engineRoot .order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); gap: .4em; }
#engineRoot .order-option.selected { background: var(--g-teal); color: #032420; border-color: transparent; }
#engineRoot fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .5em; }
#engineRoot legend { font-size: .85em; color: var(--g-dim); margin-bottom: .4em; }
#engineRoot .ekg-choice-list { display: grid; gap: .4em; }
#engineRoot .ekg-choice { display: flex; gap: .6em; text-align: left; align-items: baseline; }
#engineRoot .ekg-choice-letter { font-weight: 700; color: var(--g-teal); }
#engineRoot .ekg-error { border-color: var(--g-red) !important; }
#engineRoot .ekg-success { border-color: var(--g-teal) !important; background: rgba(69, 227, 204, .14) !important; }
#engineRoot .senior-avatar { width: 4.6em; height: 4.6em; border-radius: 50%; background: #e9eef2 url("../assets/game/char/chief_angry.png") no-repeat 58% 2% / 165% auto; color: transparent; border: 2px solid rgba(255, 255, 255, .7); }
#engineRoot .senior-quote { margin: 0; font: 1.2em/1.55 var(--font-voice); }
#engineRoot .stable-actions { display: grid; gap: .5em; }
#engineRoot .stable-message { white-space: pre-line; }
#engineRoot .brain-ct-heading { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
#engineRoot .brain-ct-stage { display: grid; place-items: center; background: #000; border-radius: .5em; }
#engineRoot .brain-ct-image-wrap { position: relative; display: inline-block; max-width: 100%; }
#engineRoot .brain-ct-stage img { display: block; max-width: 100%; max-height: 46vh; }
#engineRoot .brain-ct-mca-marker { position: absolute; left: 64%; top: 47%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px dashed #ffd166; border-radius: 50%; }
#engineRoot .brain-ct-controls { display: grid; grid-template-columns: auto minmax(6em, 1fr) auto; gap: .6em; align-items: center; }
#engineRoot .brain-ct-controls input[type="range"] { width: 100%; accent-color: var(--g-teal); }

/* touch */
.touch { position: absolute; inset: auto 0 0 0; height: 0; display: none; }
.touch .pad { position: absolute; left: 2%; bottom: 14%; display: grid; grid-template-columns: repeat(3, 3.6em); grid-template-rows: repeat(3, 3.6em); gap: .3em; }
.touch button { border-radius: .7em; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 14, 22, .6); color: #fff; font-size: 1.3em; touch-action: none; }
.touch .up { grid-column: 2; grid-row: 1; } .touch .lf { grid-column: 1; grid-row: 2; } .touch .rt { grid-column: 3; grid-row: 2; } .touch .dn { grid-column: 2; grid-row: 3; }
.touch .act { position: absolute; right: 3%; bottom: 16%; width: 5.4em; height: 5.4em; border-radius: 50%; background: rgba(69, 227, 204, .85); color: #032420; font-weight: 900; }
.touch .act2 { position: absolute; right: 4%; bottom: 42%; width: 4.2em; height: 4.2em; border-radius: 50%; background: rgba(255, 79, 85, .85); color: #fff; font-weight: 900; }
@media (pointer: coarse) { .touch { display: block; } body.at-bedside .touch { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .bang, .vital.alarm, .callhead .ring i, .callcard.shake, .mk.zzz { animation: none; }
}

/* ---------- 一般民眾版 ---------- */
.start .alt-mode { justify-self: start; color: var(--g-teal); font-size: .88em; text-decoration: none; border-bottom: 1px solid rgba(69, 227, 204, .4); }
.start .alt-mode:hover { border-bottom-color: var(--g-teal); }
.start .warn-note { color: #ffd59a; }
/* woken by the phone: the ward swims into focus */
.frame.groggy #view { animation: groggy 2.8s ease-out both; }
@keyframes groggy { 0% { filter: blur(7px) brightness(.35); } 45% { filter: blur(3px) brightness(.65); } 100% { filter: none; } }

/* the bedside: the bed on the left, the choices on the right */
.pcase { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pcase > * { pointer-events: auto; }
.pc-monitor { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; gap: .4em .6em; padding: .6em .8em; background: #03070b; border: 1px solid #1d2b37; border-radius: .6em; flex: none; }
.pc-v { display: grid; gap: .1em; align-content: start; min-width: 0; }
.pc-v small { font-size: .72em; color: var(--g-dim); }
.pc-v b { font: 700 1.3em var(--font-num); color: #5bff8f; }
.pc-v em { font-style: normal; font-size: .78em; color: #9fe9b8; }
.pc-v.warn b, .pc-v.warn em { color: var(--g-amber); }
.pc-v.bad b, .pc-v.bad em { color: #ff6b72; }
.pc-v.na b, .pc-v.na em { color: var(--g-dim); }
.pc-v.mind b, .pc-v.txt b { font: 700 .98em var(--font-ui); line-height: 1.35; }
.pc-log { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: .5em; padding-right: .3em; }
.pc-log p { margin: 0; padding: .55em .8em; border-radius: .55em; line-height: 1.65; font-size: .95em; }
.pc-log .nurse { background: rgba(255, 255, 255, .05); border-left: 3px solid var(--g-teal); }
.pc-log .you { align-self: flex-end; max-width: 85%; background: rgba(69, 227, 204, .14); }
.pc-log .why { background: rgba(255, 181, 71, .1); border-left: 3px solid var(--g-amber); color: #ffe1b0; }
.pc-log .alarm { background: rgba(255, 79, 85, .15); border-left: 3px solid var(--g-red); color: #ffc2c5; font-weight: 700; }
.pc-ask { flex: none; display: grid; gap: .6em; padding-top: .2em; border-top: 1px solid var(--g-line); }
.pc-ask > p { margin: .4em 0 0; font-weight: 700; font-size: 1.05em; }
.pc-opts { display: grid; gap: .45em; }
.pc-opt { display: flex; gap: .7em; align-items: center; text-align: left; white-space: normal; padding: .75em .9em; font-size: .95em; line-height: 1.45; }
.pc-opt:hover:not(:disabled) { border-color: var(--g-teal); background: rgba(69, 227, 204, .08); }
.pc-opt:disabled { opacity: .42; text-decoration: line-through; cursor: default; }
.pc-end { justify-self: start; }
.pc-cpr { flex: none; display: grid; gap: .7em; justify-items: center; text-align: center; padding: .9em; border: 1px solid rgba(255, 79, 85, .55); border-radius: .7em; background: rgba(255, 79, 85, .08); }
.pc-cpr p { margin: 0; line-height: 1.65; }
.pc-beat { width: 4.2em; height: 4.2em; border-radius: 50%; background: radial-gradient(circle, #ff8a8f, var(--g-red)); animation: pc-beat .545s ease-in-out infinite; }
@keyframes pc-beat { 0%, 100% { transform: scale(1); } 45% { transform: scale(.7); opacity: .6; } }
.pc-cpr-row { display: flex; gap: 1.2em; align-items: baseline; }
.pc-cpr-row b { font: 700 1.5em var(--font-num); }
.pc-cpr-row span { color: var(--g-dim); }
.pc-press { font-size: 1.15em; padding: .8em 2.6em; touch-action: manipulation; user-select: none; }
.pc-press.hit { background: #ff7a80; }

/* when a patient dies: quiet, then what could have gone differently */
.pdeath { z-index: 7; }
.pdeath .dim { background: rgba(0, 0, 0, .86); backdrop-filter: blur(6px); animation: pd-fade 1.6s ease-out both; }
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
.icard.deathcard { width: min(40em, 92%); max-height: 90%; overflow: auto; border-color: rgba(160, 200, 230, .25); animation: pd-fade 1.4s .7s ease-out both; }
.deathcard .when { font: 700 .85em var(--font-num); color: var(--g-dim); letter-spacing: .1em; }
.deathcard h3 { margin: 0; font-size: 1.5em; }
.deathcard > p { color: #c9d6e2; line-height: 1.75; }
.pd-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: .3em; font-size: .88em; }
.pd-timeline li { display: grid; grid-template-columns: 3.4em 1fr; gap: .6em; padding: .3em .55em; border-radius: .4em; background: rgba(255, 255, 255, .04); }
.pd-timeline time { font-family: var(--font-num); color: var(--g-dim); }
.pd-timeline li.bad span { color: #ffb0b4; }
.pd-timeline li.ok span { color: #ffe1b0; }
.pd-timeline li.warn { background: rgba(255, 79, 85, .13); }
.tipcard { display: grid; gap: .45em; padding: .85em 1em; border-radius: .6em; background: rgba(69, 227, 204, .08); border: 1px solid rgba(69, 227, 204, .35); }
.tipcard b { color: var(--g-teal); }
.tipcard ol { margin: 0; padding-left: 1.3em; display: grid; gap: .35em; line-height: 1.65; font-size: .92em; }
.caselist li.tip { background: #e8f3ef; line-height: 1.65; padding: .45em .65em; }
.caselist li.tiphead { background: none; padding: 0 .1em; font-weight: 800; color: #1d6b5c; }
.caselist li.tip.miss { background: #f6e3df; color: #8a2c1d; }
/* the plain-words reading under a public bed's lab sheet */
.lab-note { margin: 0; padding: .6em .85em; border-left: 3px solid var(--g-teal); background: rgba(69, 227, 204, .08); line-height: 1.7; font-size: .92em; }
@container (max-width: 760px) {
  .pc-monitor { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- choosing a version: same dim navy as the ward at night ---------- */
.modepick { position: absolute; inset: 0; z-index: 9; overflow: auto; font-size: 1.22em; display: grid; place-items: center; padding: 1.5em 1em;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(30, 48, 70, .35), transparent 72%), radial-gradient(ellipse 60% 40% at 50% 115%, rgba(120, 28, 26, .16), transparent 70%), #03060a; }
.mp-shell { width: min(62em, 100%); display: grid; gap: 1.6em; }
.mp-shell header { display: grid; gap: .4em; }
.mp-shell .eyebrow { margin: 0; font-size: .8em; letter-spacing: .2em; color: var(--g-teal); font-weight: 700; opacity: .85; }
.mp-shell h1 { margin: 0; font-size: 2.4em; font-weight: 900; letter-spacing: .05em; color: #dbe5ee; }
.mp-shell header p { margin: 0; color: var(--g-dim); }
.mp-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1em; }
.mp-door { position: relative; overflow: hidden; display: grid; grid-template-columns: 34% 1fr; gap: .4em; min-height: 17em; color: var(--g-ink); text-decoration: none;
  background: linear-gradient(180deg, rgba(12, 19, 30, .95), rgba(5, 8, 13, .97)); border: 1px solid var(--g-line); box-shadow: 0 1.6em 3.6em -1em rgba(0, 0, 0, .7);
  transition: border-color .25s, transform .25s; }
.mp-door::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: #c9a36a; opacity: .5; }
.mp-door.pro::before { background: var(--g-teal); }
.mp-door img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: saturate(.75) brightness(.85); align-self: end; }
.mp-door > div { display: grid; gap: .7em; align-content: start; padding: 1.5em 1.4em 1.3em .6em; }
.mp-tag { justify-self: start; padding: .2em .7em; font-size: .75em; letter-spacing: .14em; color: #d8b98a; border: 1px solid rgba(255, 255, 255, .12); }
.mp-door.pro .mp-tag, .mp-door.pro .mp-go { color: var(--g-teal); }
.mp-door strong { font-size: 1.7em; font-weight: 900; letter-spacing: .04em; color: #e6edf3; }
.mp-door p { margin: 0; color: #a9b8c6; line-height: 1.75; font-size: .95em; }
.mp-go { margin-top: .4em; color: #d8b98a; font-weight: 700; letter-spacing: .05em; }
.mp-door:hover, .mp-door:focus-visible { border-color: rgba(201, 163, 106, .7); transform: translateY(-3px); outline: none; }
.mp-door.pro:hover, .mp-door.pro:focus-visible { border-color: var(--g-teal); }
.mp-back { justify-self: start; color: var(--g-dim); font-size: .88em; text-decoration: none; }
.mp-back:hover { color: var(--g-ink); }
@container (max-width: 760px) {
  .mp-doors { grid-template-columns: 1fr; }
  .mp-door { min-height: 0; grid-template-columns: 28% 1fr; }
  .mp-shell h1 { font-size: 1.9em; }
}