:root{
  --bg:#0b1016;
  --bg-2:#0e151d;
  --panel:#121b25;
  --panel-2:#16212d;
  --panel-3:#1c2a38;
  --line:#26384a;
  --line-soft:#1d2c3a;
  --text:#dce8f2;
  --muted:#8095a6;
  --muted-2:#5f7385;

  --teal:#2dd4bf;
  --green:#3ddc84;
  --amber:#f6b948;
  --red:#fb6f6f;
  --blue:#5fa8ff;
  --violet:#a78bfa;

  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;

  --r:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);

  /* shared game / start-screen frame */
  --game-frame-w:1180px;
  --game-frame-h:820px;
  --game-frame-max-w:96vw;
  --game-frame-max-h:94vh;

  /* patient skin tokens — animated per condition */
  --skin:#e4b48c;
  --skin-shade:#cf9a72;
  --lip:#c4756a;
  --hand:#e4b48c;
}

/* ============================================================
   EMR PATIENT SIMULATOR  —  organized stylesheet
   Sections: tokens · base · layout · sidebar · stage · svg
             monitor · panels · popover · dialog · anim · resp
   ============================================================ */

/* ---------- design tokens (see :root at top of file) ---------- */

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 50% -10%, #15212e 0%, transparent 60%),
    var(--bg);
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:100%;
}

/* ---------- game frame ---------- */
#gameShell{
  position:relative;
  width:min(var(--game-frame-w),var(--game-frame-max-w));
  height:min(var(--game-frame-h),var(--game-frame-max-h));
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 18px 56px rgba(0,0,0,.55);
  background:var(--bg);
}
#gameShell .app{
  flex:1;
  min-height:0;
  height:auto;
}
button{font-family:inherit;color:inherit;cursor:pointer}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2a3a4b;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- top bar ---------- */
.topbar{
  height:52px;display:flex;align-items:center;gap:14px;
  padding:0 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 12px var(--teal);animation:pulseDot 2.4s infinite}
.brand small{font-weight:500;color:var(--muted);letter-spacing:2px;font-size:11px}
.clock{margin-left:auto;font-family:var(--mono);color:var(--muted);font-size:13px}
.scenario-tag{
  font-family:var(--mono);font-size:12px;color:var(--teal);
  border:1px solid var(--line);padding:4px 10px;border-radius:20px;background:var(--panel-3);
}
.scen-tag-btn{
  font-family:var(--mono);font-size:12px;color:var(--teal);
  border:1px solid var(--line);padding:4px 10px;border-radius:20px;background:var(--panel-3);
  cursor:pointer;line-height:1.25;transition:border-color .18s,box-shadow .18s;
}
.scen-tag-btn:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.scen-tag-inner{
  display:inline-grid;grid-template-columns:1fr 0fr;align-items:center;
  transition:grid-template-columns .28s cubic-bezier(.2,.8,.3,1);
}
.scen-tag-btn.expanded .scen-tag-inner{grid-template-columns:0fr 1fr}
.scen-tag-call,.scen-tag-detail{overflow:hidden;white-space:nowrap;min-width:0}
.scen-tag-detail{opacity:0;transition:opacity .2s}
.scen-tag-btn.expanded .scen-tag-call{opacity:0}
.scen-tag-btn.expanded .scen-tag-detail{opacity:1}
.btn-top{
  border:1px solid var(--line);background:var(--panel-3);color:var(--text);
  padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
  transition:.18s;
}
.btn-top:hover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.btn-top.primary{background:linear-gradient(180deg,#2dd4bf,#16a394);color:#04221d;border-color:transparent}
.btn-top.primary:hover{box-shadow:0 6px 18px rgba(45,212,191,.35)}
.btn-top.end-score-glow{
  border-color:var(--teal);
  color:var(--teal);
  box-shadow:0 0 0 1px rgba(45,212,191,.45),0 0 18px rgba(45,212,191,.35);
  animation:endScoreGlow 1.4s ease-in-out infinite;
}
@keyframes endScoreGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(45,212,191,.4),0 0 12px rgba(45,212,191,.25)}
  50%{box-shadow:0 0 0 2px rgba(45,212,191,.7),0 0 22px rgba(45,212,191,.55)}
}

/* ALS arrival — call finished banner (player may still click around) */
.als-call-finished-banner{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  gap:10px;padding:10px 16px;
  background:linear-gradient(90deg,rgba(8,40,36,.96),rgba(16,70,62,.98),rgba(8,40,36,.96));
  border-bottom:1px solid rgba(45,212,191,.45);
  color:#dffaf4;font-weight:800;font-size:14px;letter-spacing:.02em;
  text-align:center;
}
.als-call-finished-banner[hidden]{display:none!important}
.als-call-finished-text{text-shadow:0 0 12px rgba(45,212,191,.35)}

/* ---------- main layout ---------- */
.app{display:grid;grid-template-columns:172px 1fr 360px;height:calc(100% - 52px)}

/* ---------- sidebar ---------- */
.sidebar{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border-right:1px solid var(--line);
  padding:8px 6px;overflow-y:auto;
}
.sb-title{font-size:9px;letter-spacing:1.2px;color:var(--muted-2);text-transform:uppercase;margin:2px 2px 4px}
.sb-btn{
  width:100%;display:flex;align-items:center;gap:6px;
  background:var(--panel-2);border:1px solid var(--line-soft);
  padding:5px 7px;border-radius:6px;margin-bottom:4px;
  font-size:11px;font-weight:600;line-height:1.2;text-align:left;transition:.16s;
  position:relative;
}
.sb-btn .ic,.sb-btn .pic,.sb-btn svg{width:13px;height:13px;flex:0 0 13px;color:var(--teal);opacity:.9}
.sb-btn:hover{transform:translateX(3px);border-color:var(--teal);background:var(--panel-3)}
.sb-btn:active{transform:translateX(1px) scale(.99)}
.sb-btn.flash{animation:flashBtn .5s}

/* ---------- center stage ---------- */
.stage{
  position:relative;overflow:hidden;
  background:
    radial-gradient(680px 520px at 50% 36%, #16222f 0%, transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.012) 38px 39px);
  display:flex;align-items:center;justify-content:center;
}
.stage::after{ /* floor line */
  content:"";position:absolute;left:6%;right:6%;bottom:9%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.25),transparent);
}
.chief-banner{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  max-width:560px;text-align:center;z-index:4;
  pointer-events:none;
}
.chief-banner .cc{font-size:15px;font-weight:700;color:var(--text)}
.chief-banner .meta{font-size:12px;color:var(--muted);margin-top:3px;font-family:var(--mono)}
.cond-pill{
  display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:4px 12px;border-radius:20px;text-transform:uppercase;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
}
#stage.patient-upright .chief-banner{
  top:10px;left:12px;right:12px;transform:none;max-width:none;
  padding-right:148px;
}
#stage.patient-upright #condPill{
  position:absolute;top:0;right:0;margin-top:0;
}
.cond-pill.normal{color:var(--green);border-color:#234b34}
.cond-pill.resp{color:var(--amber);border-color:#4d3c1a}
.cond-pill.shock{color:var(--violet);border-color:#3a2f56}
.cond-pill.seizure{color:var(--blue);border-color:#1f3a55}
.cond-pill.arrest{color:var(--red);border-color:#4d2222}

.patient-wrap{width:min(560px,92%);height:92%;display:flex;align-items:center;justify-content:center;overflow:visible}
#patientSvg{width:100%;height:100%;overflow:visible;display:block}

/* svg region interactivity */
.region .vis{transition:filter .25s, fill .8s ease}
.region .hit{fill:transparent;cursor:pointer}
.region:hover .vis{filter:drop-shadow(0 0 7px var(--teal)) brightness(1.08)}
.region.sel .vis{filter:drop-shadow(0 0 9px var(--green)) brightness(1.12)}
.region.assessed .vis{filter:drop-shadow(0 0 4px rgba(61,220,132,.55))}

/* ---------- right column ---------- */
.right{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel{border-bottom:1px solid var(--line);padding:12px 14px}
.panel h3{
  margin:0 0 10px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted-2);display:flex;align-items:center;gap:8px;
}
.panel h3 .led{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* monitor / vitals */
.monitor{background:#06100c;border:1px solid #14352a;border-radius:10px;padding:10px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.6)}
.ecg-box{height:62px;position:relative;overflow:hidden;border-bottom:1px solid #103226;margin-bottom:8px}
.ecg-svg{position:absolute;inset:0;width:200%;height:100%}
.ecg-track{animation:ecgScroll 2.2s linear infinite}
.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.vital{background:rgba(0,0,0,.35);border:1px solid #113025;border-radius:8px;padding:7px 9px}
.vital .k{font-size:10px;letter-spacing:1px;color:#5f8a78;text-transform:uppercase}
.vital .v{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--green);line-height:1.1}
.vital .v small{font-size:11px;color:#6fae93;font-weight:600}
.vital.warn .v{color:var(--amber)}
.vital.crit .v{color:var(--red);animation:critBlink 1s steps(2) infinite}
.vital.span2{grid-column:1/3}

.panel-status{
  flex:0 1 auto;min-height:0;max-height:46%;
  display:flex;flex-direction:column;overflow:hidden;
}
.panel-status #statusList{
  overflow-y:auto;flex:1 1 auto;min-height:0;
  padding-right:2px;-webkit-overflow-scrolling:touch;
}
.status-row{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 2px;border-bottom:1px dashed var(--line-soft)}
.status-row:last-child{border-bottom:0}
.status-row .lbl{color:var(--muted)}
.status-row .val{font-family:var(--mono);font-weight:600}

/* log / timeline */
.logwrap{flex:1;overflow-y:auto;padding:10px 14px 18px}
.log-item{display:flex;gap:9px;font-size:12.5px;padding:7px 0;border-bottom:1px solid var(--line-soft);animation:slideIn .3s}
.log-item .t{font-family:var(--mono);color:var(--muted-2);flex:0 0 46px;font-size:11px;padding-top:1px}
.log-item .msg{flex:1;line-height:1.4}
.log-item .msg b{color:var(--teal)}
.log-item.good .dotc{background:var(--green)} .log-item.bad .dotc{background:var(--red)}
.log-item.info .dotc{background:var(--blue)} .log-item.say .dotc{background:var(--violet)}
.log-item .dotc{width:7px;height:7px;border-radius:50%;margin-top:5px;flex:0 0 7px;background:var(--muted)}
.log-empty{color:var(--muted-2);font-size:12.5px;text-align:center;padding:24px 0;font-style:italic}

/* ---------- popover (body & sidebar menus) ---------- */
.popover{
  position:absolute;z-index:30;min-width:200px;max-width:272px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:6px;opacity:0;transform:translateY(8px) scale(.97);
  pointer-events:none;transition:.18s cubic-bezier(.2,.8,.3,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.popover.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.pop-head{display:flex;align-items:center;justify-content:space-between;
  padding:5px 7px 7px;border-bottom:1px solid var(--line-soft);margin-bottom:0;flex-shrink:0}
.pop-body{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;padding:4px 2px 2px;-webkit-overflow-scrolling:touch}
.pop-head .ttl{font-size:12px;font-weight:700;letter-spacing:.4px}
.pop-head .x{border:none;background:none;color:var(--muted);font-size:18px;line-height:1;padding:0 2px}
.pop-head .x:hover{color:var(--red)}
.pop-act{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:9px 10px;font-size:13px;font-weight:600;transition:.13s;
}
.pop-act:hover{background:var(--panel-3);border-color:var(--line)}
.pop-act .pic{width:15px;height:15px;color:var(--teal);flex:0 0 15px}
.pop-result{padding:9px 10px;font-size:12.5px;line-height:1.5;color:var(--text);
  background:#0c1620;border:1px solid var(--line-soft);border-radius:8px;margin:6px 4px 4px;
  animation:slideIn .25s}
.pop-result b{color:var(--teal)}
.pop-result.hidden-find{border-color:#4d3c1a;background:#1a1408}
.pop-result.hidden-find b{color:var(--amber)}

/* Multi-injury pager — Prev/Next between findings on one body segment */
.pop-injury-pager{margin:6px 4px 4px}
.pop-injury-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 2px 6px;font-size:10.5px;letter-spacing:.3px;color:var(--muted)}
.pop-injury-count{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.pop-injury-nav{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;
}
.pop-injury-nav:hover{border-color:var(--teal);color:var(--teal)}
.pop-injury-stage{cursor:pointer}
.pop-injury-card{
  margin:0;box-sizing:border-box;animation:none;
}
.pop-injury-card-title{
  font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--teal);margin-bottom:4px;
}
.pop-injury-card.hidden-find .pop-injury-card-title{color:var(--amber)}
.pop-injury-card-body{font-size:12.5px;line-height:1.5}
.pop-injury-dots{display:flex;justify-content:center;gap:6px;padding:8px 0 2px}
.pop-injury-dot{
  width:7px;height:7px;border-radius:50%;padding:0;border:1px solid var(--line);
  background:transparent;cursor:pointer;
}
.pop-injury-dot.on{background:var(--teal);border-color:var(--teal)}
.pop-injury-dot:hover{border-color:var(--teal)}

/* tooltip */
#tooltip{
  position:fixed;z-index:50;pointer-events:none;
  background:#04111b;border:1px solid var(--teal);color:var(--text);
  font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);
  transition:opacity .12s, transform .12s;white-space:nowrap;
}
#tooltip.show{opacity:1;transform:translateY(0)}

/* toast feedback */
#toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--line);border-left-width:4px;
  padding:12px 18px;border-radius:10px;font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:60;max-width:420px;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.good{border-left-color:var(--green)} #toast.bad{border-left-color:var(--red)}
#toast.info{border-left-color:var(--blue)}

/* primary survey step badges (bottom-right) — hidden */
#surveyBadges{display:none}
.survey-badge{
  background:rgba(4,34,29,.92);border:1px solid #234b34;color:var(--green);
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:700;
  font-family:var(--mono);box-shadow:var(--shadow);
  animation:surveyBadgeIn .3s ease, surveyBadgeOut .4s ease 9.6s forwards;
}
@keyframes surveyBadgeIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes surveyBadgeOut{to{opacity:0;transform:translateX(10px)}}

/* shears / placement mode banners */
.stage.shears-mode{cursor:crosshair}
.rbs-banner{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:14;
  background:rgba(13,20,28,.92);border:1px solid var(--teal);border-radius:10px;padding:8px 16px;
  font-size:12.5px;color:var(--text);display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
.rbs-banner b{color:var(--teal)}
#placementBanner{
  position:absolute;z-index:14;pointer-events:none;
  background:rgba(13,20,28,.94);border:1px solid var(--teal);border-radius:8px;
  padding:5px 9px;font-size:10.5px;line-height:1.35;color:var(--text);
  display:flex;align-items:flex-start;gap:7px;box-shadow:var(--shadow);
  max-width:168px;
}
#placementBanner svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
#placementBanner b{color:var(--teal);font-size:10.5px;font-weight:700}
#placementPutAway{position:absolute;z-index:18;display:flex;align-items:center;gap:7px;padding:8px 18px 8px 12px;
  background:rgba(11,16,22,.92);border:1px solid var(--teal);border-radius:20px;color:var(--teal);font-size:13px;
  font-weight:700;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.5);pointer-events:auto;
  transition:background .15s,border-color .15s;white-space:nowrap;user-select:none}
#placementPutAway:hover{background:rgba(45,212,191,.12);border-color:var(--teal)}
#placementPutAway svg{width:16px;height:16px;flex-shrink:0}
#shearsHud{
  position:absolute;top:12px;right:12px;z-index:18;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  pointer-events:none;max-width:min(180px,42vw);
}
#shearsBanner{
  background:rgba(13,20,28,.94);border:1px solid var(--amber);border-radius:8px;
  padding:5px 9px;font-size:10.5px;line-height:1.35;color:var(--amber);
  display:flex;align-items:flex-start;gap:7px;box-shadow:var(--shadow);
  font-weight:700;pointer-events:none;
}
#shearsBanner svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
#shearsPutAway{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 14px 6px 10px;
  background:rgba(11,16,22,.92);
  border:1px solid var(--teal);
  border-radius:20px;
  color:var(--teal);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
  pointer-events:auto;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
  user-select:none;
}
#shearsPutAway:hover{
  background:rgba(45,212,191,.12);
  border-color:var(--teal);
}
#shearsPutAway svg{
  width:16px;height:16px;flex-shrink:0;
}
.gcs-ao-q{margin-bottom:8px}
.gcs-ao-q button{width:100%;text-align:left}
.gcs-ao-res{font-size:13px;color:var(--muted);margin:6px 0 10px;padding-left:4px}

/* ---------- idle + condition animations ---------- */
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes flashBtn{0%{box-shadow:0 0 0 0 var(--teal)}100%{box-shadow:0 0 0 8px transparent}}
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes critBlink{50%{opacity:.35}}
@keyframes ecgScroll{from{transform:translateX(0)}to{transform:translateX(-100px)}}

/* whole-body subtle sway (idle) */
#bodyRoot{transform-box:fill-box;transform-origin:50% 96%;animation:sway 6.5s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}

/* breathing — upper body (torso + arms + neck) expands as one unit */
#thoraxGroup{transform-box:fill-box;transform-origin:50% 72%;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.035) scaleX(1.02)}}
#breathGroup,#shoulders{transform:none;animation:none}

/* blinking eyelids — default E4 (spontaneous) */
.eyelid{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);animation:blink 5.4s infinite}
@keyframes blink{0%,95%,100%{transform:scaleY(0)}97%,98%{transform:scaleY(1)}}

/* AVPU / GCS eye opening */
#patientSvg[data-eyes="e4"] .eyelid{animation:blink 5.4s infinite;transform:scaleY(0)}
#patientSvg[data-eyes="e3"] .eyelid{animation:drowsyEyes 7s ease-in-out infinite}
@keyframes drowsyEyes{0%,45%,100%{transform:scaleY(.62)}58%,72%{transform:scaleY(.12)}}
#patientSvg[data-eyes="e2"] .eyelid,
#patientSvg[data-eyes="e1"] .eyelid,
#patientSvg[data-eyes="closed"] .eyelid{animation:none;transform:scaleY(1)}
#patientSvg.eyes-flash-open .eyelid{animation:none !important;transform:scaleY(.08) !important}
/* Cluster partial ptosis — Pain-style closed lid on RIGHT only; left keeps blinking; no global data-eyes=e2 */
.eyelid.eyelid-r.cluster-ptosis-closed{animation:none !important;transform:scaleY(1) !important}

/* ===== condition modifiers (applied to #patientSvg) ===== */
/* respiratory distress: fast, deep, accessory muscle use */
.cond-resp #thoraxGroup{animation-duration:1.25s;animation-name:breatheHard}
@keyframes breatheHard{0%,100%{transform:scaleY(1) scaleX(1)}50%{transform:scaleY(1.07) scaleX(1.03)}}

/* shock: shallow weak breathing + faint tremor */
.cond-shock #thoraxGroup{animation-duration:5s;animation-name:breatheShallow}
@keyframes breatheShallow{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
.cond-shock #bodyRoot{animation:sway 6.5s ease-in-out infinite, faintTremor 1.6s ease-in-out infinite}
/* Kill bodyRoot anim while lying — except active seizure (must keep June seize shake) */
#patientSvg.supine:not(.cond-seizure) #bodyRoot{animation:none}
@keyframes faintTremor{0%,100%{translate:0 0}50%{translate:.6px 0}}

/* seizure: convulsive shaking, breath chaotic */
#patientSvg.cond-seizure #bodyRoot{animation:seize .2s linear infinite}
@keyframes seize{
  0%{transform:translate(-0.4px,0) rotate(-0.25deg)}
  25%{transform:translate(0.4px,-0.2px) rotate(0.25deg)}
  50%{transform:translate(-0.4px,0.2px) rotate(-0.2deg)}
  75%{transform:translate(0.4px,0) rotate(0.22deg)}
  100%{transform:translate(-0.4px,0) rotate(-0.25deg)}
}
.cond-seizure #thoraxGroup{animation:breatheHard .6s ease-in-out infinite}
.cond-seizure .eyelid{animation:none !important;transform:scaleY(.35) !important}

#seizureStopwatch{color:var(--green);border-color:var(--line)}
#seizureStopwatch.amber{color:var(--amber);border-color:var(--amber)}
#seizureStopwatch.red{color:var(--red);border-color:var(--red);animation:seizurePulse .6s ease-in-out infinite alternate}
#burnCoolStopwatch{color:var(--teal);border-color:var(--line)}
#burnCoolStopwatch.amber{color:var(--amber);border-color:var(--amber)}
#burnCoolStopwatch.skip-ready{
  color:var(--teal);
  border-color:var(--teal);
  pointer-events:auto !important;
  cursor:pointer;
  animation:seizurePulse .8s ease-in-out infinite alternate;
}
#burnCoolStopwatch.skip-ready:hover{background:rgba(20,40,48,.95)}
@keyframes seizurePulse{
  from{opacity:.8}
  to{opacity:1;box-shadow:0 0 10px rgba(251,111,111,.4)}
}
.seizure-equip-bar,
.burn-cool-equip-bar{
  position:sticky;
  top:0;
  z-index:5;
  margin:-2px -2px 6px -2px;
}
.burn-cool-equip-bar.skip-ready{
  cursor:pointer;
  border-bottom-color:var(--teal) !important;
}
.burn-cool-equip-bar.skip-ready:hover{background:rgba(20,40,48,.55)}

/* cardiac arrest: no breathing, slack */
.cond-arrest #thoraxGroup{animation:none;transform:scaleY(1)}
.cond-arrest #neck{animation:none}
.cond-arrest .eyelid{animation:none !important;transform:scaleY(1) !important}
.cond-arrest #bodyRoot{animation:none;transform:rotate(0)}
.cond-arrest .mouth{transform:scaleY(1.6);transform-box:fill-box;transform-origin:center}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  #bodyRoot,#thoraxGroup{animation:none}
}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .app{grid-template-columns:172px 1fr 320px}
}
@media(max-width:920px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 46vh auto}
  .sidebar{display:flex;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:1px solid var(--line)}
  .sb-title{width:100%}
  .sb-btn{width:auto;flex:1 1 30%;margin:0}
  .right{border-left:0;border-top:1px solid var(--line)}
}

/* ============================================================
   v2 ADDITIONS — backgrounds · boxes · med flow · quiz · GCS · debrief
   ============================================================ */

/* ---------- scenario background layer ---------- */
.scene-bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.95}
.scene-bg svg{width:100%;height:100%}
#groundEquipLayer{
  /* Above patient-wrap (z-index 2) so sprites receive clicks; layer itself is click-through */
  position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible;
}
#groundEquipLayer .ground-equip-item{
  pointer-events:auto;position:absolute;transform:translate(-50%,-50%);z-index:1;
}
#ovl-cloth{pointer-events:none}
#ovl-cloth .garment{pointer-events:none;transition:transform .22s ease,opacity .22s ease}
#ovl-cloth .garment.garment-lifted{opacity:.42}
#ovl-cloth .cloth-peek-handle{pointer-events:all}
#ovl-cloth .cloth-peek-handle:hover{stroke:rgba(120,180,255,.35);stroke-width:2;fill:rgba(120,180,255,.08)}
.stage.cloth-peek-mode #patientSvg .region .hit{cursor:default}
.stage.ground-carry-mode{cursor:crosshair}
.stage.ground-drag-mode{cursor:grab}
.stage.ground-drag-mode .ground-equip-item.dragging{cursor:grabbing}
#groundCarryCursor,.ground-carry-cursor{
  position:fixed;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.55));opacity:.88;
}
.ground-equip-item{
  position:absolute;transform:translate(-50%,-50%);cursor:pointer;user-select:none;touch-action:none;
  transition:left .3s ease,top .3s ease;
}
.ground-equip-sprite-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:0;padding:0;
  box-shadow:none;min-width:0;pointer-events:none;
}
.ground-sprite-art{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.ground-sprite-art svg{display:block;height:auto}
.ground-sprite-shears svg{width:64px}
.ground-sprite-saline-bottle svg{width:42px}
.ground-sprite-bag-full-trauma svg{width:88px}
.ground-sprite-bag-wound svg{width:76px}
.ground-sprite-bag-splinting svg{width:80px}
.ground-sprite-bag-thermal svg{width:82px}
.ground-sprite-aed svg{width:72px}
.ground-sprite-o2tank svg{width:48px}
.ground-sprite-o2-side svg{width:80px}
.ground-sprite-bvm svg{width:68px}
.ground-sprite-suction svg{width:68px}
.ground-sprite-scoop-stretcher svg{width:92px}
.ground-sprite-opa svg{width:56px}
.ground-ejected-item{pointer-events:none!important;cursor:default!important}
.ground-ejected-item:hover .ground-sprite-art{filter:drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.patient-vomit-flag{
  display:none;position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:20;
  pointer-events:none;padding:8px 16px;border-radius:10px;
  background:rgba(180,30,30,.94);border:1px solid #ff5555;color:#fff;
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.patient-vomit-flag.show{display:block;animation:vomit-flag-in .35s ease}
@keyframes vomit-flag-in{from{opacity:0;transform:translateX(-50%) translateY(-6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.ground-equip-item:hover .ground-sprite-art{filter:drop-shadow(0 4px 14px rgba(45,212,191,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.55))}
.ground-equip-item.dragging .ground-sprite-art{filter:drop-shadow(0 8px 18px rgba(0,0,0,.65));opacity:.92}
.ground-equip-sprite-fallback span{font-size:10px;font-weight:700;color:var(--text);padding:8px 12px;background:rgba(11,16,22,.9);border:1px solid var(--teal);border-radius:8px}
.ground-stage-pull{cursor:grab}
.ground-stage-on-scene{opacity:.45!important;pointer-events:none!important}
.ground-on-scene-tag{margin-left:6px;color:var(--teal)!important}
.ground-pull-hint{display:block;font-size:10px;color:var(--muted);font-weight:500;margin-top:2px;opacity:.75}
.sb-btn.ground-stow-target{border-color:var(--teal)!important;box-shadow:0 0 0 2px rgba(45,212,191,.35);color:var(--teal)!important}
.sidebar.ground-stow-target{border-right-color:var(--teal);box-shadow:inset -3px 0 12px rgba(45,212,191,.12)}
details.bag > summary.ground-stage-pull{cursor:grab}
.patient-wrap{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}
#patientSvg{height:86%;max-height:660px;width:auto;transition:transform .6s cubic-bezier(.4,0,.2,1),filter .5s}
/* supine (lying) for trauma / unresponsive patients */
#patientSvg.supine{transform:rotate(-90deg) translateY(2%) scale(.92)}
#patientSvg.supine.pos-head-30{transform:rotate(-87deg) translateY(1.5%) scale(.92)}
#patientSvg.pos-semifowlers:not(.supine){transform:rotate(-16deg) scale(.94)}
#patientSvg.pos-fowlers:not(.supine){transform:none}
.stage.has-scene::after{opacity:0}

/* ---------- region disabled until scene active ---------- */
.region.locked{pointer-events:none}

/* ---------- popover: scrollable, wider for forms ---------- */
.popover.wide{width:min(280px,calc(100% - 20px))}
.popover.creator-wide{width:min(420px,92vw)}
.pop-sub{font-size:11px;letter-spacing:.4px;color:var(--muted);margin:2px 2px 8px;text-transform:uppercase}
.pop-divider{height:1px;background:var(--line-soft);margin:10px 0}

/* H+E popover — hazards scroll, environment pinned at bottom */
.pop-body:has(.he-pop){
  display:flex;flex-direction:column;overflow:hidden;padding:0;
}
.he-pop{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.he-hazards-scroll{flex:1 1 auto;overflow-y:auto;min-height:0;padding:4px 2px 2px;-webkit-overflow-scrolling:touch}
.he-env-footer{flex-shrink:0;padding:4px 2px 6px}
.he-env-footer .pop-result{margin-top:0}

/* ---------- generic small button rows ---------- */
.opt-row{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.opt{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:var(--panel-2);border:1px solid var(--line-soft);
  padding:7px 9px;border-radius:7px;font-size:12px;font-weight:600;transition:.14s;color:var(--text)
}
.opt:hover{border-color:var(--teal);background:var(--panel-3);transform:translateX(2px)}
.opt .tag{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.opt.sel{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset;background:rgba(45,212,191,.08)}
.opt.disabled{opacity:.4;pointer-events:none}
.opt-subnote{display:block;margin-top:3px;opacity:.6;font-weight:400;font-size:11px}

/* timed assessment (count respirations / carotid pulse) */
.pop-body{
  --pop-opt-min-h:88px;
}
.pop-body > .opt:not(.opt-timed) > .pic,
.pop-body > .opt:not(.opt-timed) > svg.pic{
  width:calc(var(--pop-opt-min-h) - 18px);height:calc(var(--pop-opt-min-h) - 18px);
  flex:0 0 calc(var(--pop-opt-min-h) - 18px);
}
.pop-body > .opt,
.pop-body > .opt-timed{
  min-height:var(--pop-opt-min-h);
  box-sizing:border-box;
}
.opt-timed{
  flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;
  padding:7px 9px;cursor:default;
}
.opt-timed:hover{border-color:var(--line-soft);background:var(--panel-2);transform:none}
.opt-timed-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;flex:1 1 0;min-height:0}
.opt-timed-head .ic,.opt-timed-head .pic{width:18px;height:18px;flex:0 0 18px;color:var(--teal)}
.opt-dur-row{display:flex;gap:6px;align-items:stretch;flex:1 1 0;min-height:0;margin-top:0}
.opt-dur{
  flex:1;height:100%;min-height:34px;padding:5px 4px;border-radius:6px;
  border:1px solid var(--line-soft);background:var(--panel);
  font-size:11px;font-weight:700;font-family:var(--mono);color:var(--text);
  cursor:pointer;transition:.14s;line-height:1.2;
}
.opt-dur:hover,.opt-dur:focus{border-color:var(--teal);background:rgba(45,212,191,.12);outline:none}
.opt-dur.rec{border-color:var(--teal);box-shadow:0 0 0 1px rgba(45,212,191,.35) inset}

/* ---------- expandable bag (equipment) ---------- */
.bag{border:1px solid var(--line-soft);border-radius:9px;margin-bottom:8px;overflow:hidden;background:var(--panel-2)}
.bag>summary{
  list-style:none;cursor:pointer;padding:10px 12px;font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:9px;color:var(--text);background:var(--panel-3)
}
.bag>summary::-webkit-details-marker{display:none}
.bag>summary .chev{margin-left:auto;transition:.2s;color:var(--muted)}
.bag[open]>summary .chev{transform:rotate(90deg)}
.bag .bag-body{padding:8px}
.bag .ic{width:16px;height:16px;color:var(--teal)}

/* ---------- checkbox quiz ---------- */
.quiz-list{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.qopt{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-soft);padding:9px 11px;border-radius:8px;
  font-size:12.5px;line-height:1.35;transition:.12s;color:var(--text)
}
.qopt:hover{border-color:var(--blue)}
.qopt .box{
  flex:0 0 18px;width:18px;height:18px;border:2px solid var(--muted);border-radius:5px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#04221d;transition:.12s
}
.qopt.on{border-color:var(--teal);background:rgba(45,212,191,.07)}
.qopt.on .box{background:var(--teal);border-color:var(--teal)}
.qopt.on .box::after{content:"✓"}
.quiz-actions{display:flex;gap:8px;margin-top:10px}
.pop-body .quiz-actions{
  position:sticky;bottom:0;z-index:2;margin-top:12px;padding:8px 0 2px;
  background:linear-gradient(180deg,transparent,var(--panel-2) 24%);
  border-top:1px solid var(--line-soft);
}
.btn{
  flex:1;border:1px solid var(--line);background:var(--panel-3);color:var(--text);
  padding:10px;border-radius:8px;font-size:13px;font-weight:700;transition:.16s
}
.btn:hover{border-color:var(--teal)}
.btn.go{background:linear-gradient(180deg,#2dd4bf,#16a394);color:#04221d;border-color:transparent}
.btn.go:hover{box-shadow:0 6px 16px rgba(45,212,191,.3)}
.btn.warn{background:linear-gradient(180deg,#f6b948,#d99a26);color:#2a1c00;border-color:transparent}
.btn.ghost{background:transparent}

/* ---------- cautions window ---------- */
.cautions{background:rgba(246,185,72,.08);border:1px solid rgba(246,185,72,.35);border-radius:8px;padding:10px 12px;margin:8px 0}
.cautions .ch{font-size:11px;letter-spacing:1px;color:var(--amber);text-transform:uppercase;font-weight:800;margin-bottom:5px}
.cautions ul{margin:0;padding-left:18px;font-size:12.5px;color:var(--text);line-height:1.45}

/* ---------- GCS panel ---------- */
.gcs-cat{margin-bottom:8px}
.gcs-cat h5{margin:0 0 4px;font-size:11px;color:var(--blue);letter-spacing:.4px}
.gcs-opts{display:flex;flex-direction:column;gap:3px}
.gcs-o{display:flex;gap:8px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line-soft);
  border-radius:7px;padding:5px 8px;font-size:11px;line-height:1.35;cursor:pointer;transition:.12s;color:var(--text)}
.gcs-o:hover{border-color:var(--blue)}
.gcs-o.sel{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.gcs-o .sc{font-family:var(--mono);font-weight:800;color:var(--teal);width:14px;flex-shrink:0;font-size:10px}
.gcs-total{font-family:var(--mono);font-size:13px;font-weight:800;text-align:center;
  padding:6px;border:1px solid var(--line);border-radius:7px;background:var(--panel-3);margin-top:4px}

/* ---------- vitals locked styling ---------- */
.vital.locked .v{color:var(--muted-2)}
.vital.locked .v small{display:none}
.vital .lockhint{font-size:9.5px;color:var(--muted-2);font-family:var(--mono);letter-spacing:.3px}

/* ---------- toast variants reused; add score badge ---------- */
.flag-strip{margin-top:6px}

/* ---------- end-screen / debrief overlay ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(4,8,12,.72);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px
}
.overlay.show{display:flex}
.debrief{
  width:min(720px,94vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0
}
.debrief-head{
  display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:linear-gradient(180deg,var(--panel-2),rgba(18,27,37,.96));z-index:2
}
.scorewheel{position:relative;width:92px;height:92px;flex:0 0 92px}
.scorewheel svg{transform:rotate(-90deg)}
.scorewheel .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.scorewheel .num b{font-size:26px;font-family:var(--mono);line-height:1}
.scorewheel .num span{font-size:10px;color:var(--muted);letter-spacing:1px}
.debrief-head .verdict h2{margin:0 0 3px;font-size:21px}
.debrief-head .verdict .sub{font-size:13px;color:var(--muted)}
.verdict .pass{color:var(--green)} .verdict .fail{color:var(--red)}
.debrief-body{padding:18px 24px 26px}
.db-sec{margin-bottom:18px}
.db-sec h4{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 9px;border-bottom:1px solid var(--line-soft);padding-bottom:6px}
.db-findings-sub{margin-top:14px !important}
.db-finding .nm{font-weight:500}
.score-line{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;border-bottom:1px solid rgba(38,56,74,.4)}
.score-line .stars{font-size:11px;color:var(--amber);width:34px;letter-spacing:-1px}
.score-line .nm{flex:1}
.score-line .pts{font-family:var(--mono);font-weight:700}
.score-line.ok .mk{color:var(--green)} .score-line.miss .mk{color:var(--red)} .score-line.part .mk{color:var(--amber)}
.score-line .mk{width:18px;text-align:center;font-weight:800}
.score-line .ded-amt{font-family:var(--mono);font-size:12px;color:var(--amber);white-space:nowrap}
.score-line .ded-amt.red,.score-line.miss .ded-amt{color:var(--red)}
.score-line.j2-group{padding-left:12px;font-weight:600;border-bottom:none;padding-bottom:2px}
.score-line.j2-detail{padding-left:28px;padding-top:2px;font-size:12px;color:var(--muted);border-bottom:1px solid rgba(38,56,74,.25)}
.score-line.j2-detail .nm{color:var(--muted);font-weight:400}
.crit-box{background:rgba(251,111,111,.09);border:1px solid rgba(251,111,111,.4);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.crit-box h4{color:var(--red);border:none;margin:0 0 8px}
.crit-item{font-size:13px;padding:5px 0;display:flex;gap:9px}
.crit-item::before{content:"⚠";color:var(--red)}
.debrief-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.debrief-actions .btn{flex:0 1 auto;min-width:150px;padding:11px 16px}

/* quiz result inline */
.quiz-feedback{font-size:12.5px;padding:8px 10px;border-radius:7px;margin-top:8px;line-height:1.4}
.quiz-feedback.good{background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.4)}
.quiz-feedback.bad{background:rgba(251,111,111,.1);border:1px solid rgba(251,111,111,.4)}

/* small note */
.muted-note{font-size:11.5px;color:var(--muted);line-height:1.4;margin:4px 2px}

/* ---------- voice / speech bubbles ---------- */
.speech-bubble-anchor{
  position:absolute;z-index:9;pointer-events:none;
  max-width:min(260px,44vw);
}
.speech-bubble-anchor.anchor-upright{transform:translateY(-50%)}
.speech-bubble-anchor.anchor-supine{transform:translate(-50%,-100%)}

/* patient speech — anchored beside (upright) or above (supine) patient */
.speech-bubble{
  position:relative;
  max-width:100%;min-width:90px;padding:8px 11px;border-radius:12px;
  background:linear-gradient(180deg,#f4f7fb,#e7edf5);color:#10202c;
  font-size:12px;line-height:1.35;font-weight:600;text-align:left;
  box-shadow:0 8px 22px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  transform:translateY(6px) scale(.97);
}
#stage.patient-upright .speech-bubble::after{
  content:"";position:absolute;top:50%;left:-9px;right:auto;bottom:auto;
  transform:translateY(-50%);
  border-width:8px 10px 8px 0;border-style:solid;
  border-color:transparent #e7edf5 transparent transparent;
  filter:drop-shadow(-2px 0 2px rgba(0,0,0,.15));
}
#stage.patient-supine .speech-bubble::after{
  content:"";position:absolute;bottom:-9px;left:50%;right:auto;top:auto;
  transform:translateX(-50%);
  border-width:10px 8px 0 8px;border-style:solid;
  border-color:#e7edf5 transparent transparent transparent;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.15));
}
.speech-bubble.show{opacity:1;transform:translateY(0) scale(1)}
.speech-bubble.fbao-cue{font-size:13px;letter-spacing:.3px;text-transform:lowercase}
.speech-bubble.pain{background:linear-gradient(180deg,#ffe9e3,#ffd6cc);color:#5a1c0e;font-style:italic}
#stage.patient-upright .speech-bubble.pain::after{border-color:transparent #ffd6cc transparent transparent}
#stage.patient-supine .speech-bubble.pain::after{border-top-color:#ffd6cc}

/* scene figures — bystander / ALS on stage right margin (beside monitor column) */
#sceneFiguresLayer{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible;
}
.scene-figure-slot{
  position:absolute;right:2px;bottom:9%;
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
  transition:opacity .45s ease, transform .45s ease;
}
.scene-figure-slot.hidden{display:none}
.scene-figure-slot.left-behind{opacity:0;transform:translateX(24px)}
.scene-figure-slot.scene-figure-enter{transform:translateX(72px);opacity:.4}
.scene-figure-slot.scene-figure-pulse .scene-figure-btn{
  animation:sceneFigPulse 2s ease-in-out infinite;
}
@keyframes sceneFigPulse{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 10px rgba(45,212,191,.55))}
}
.scene-figure-btn{
  pointer-events:all;
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .15s ease;
}
.scene-figure-btn:hover{transform:scale(1.04)}
.scene-figure-btn:disabled{cursor:default;opacity:.55}
.scene-figure-svg{width:72px;height:auto;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.45))}
.scene-figure-label{
  font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:capitalize;
  color:var(--muted);max-width:80px;text-align:center;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.scene-figure-slot.riding .scene-figure-label::after{
  content:' · with crew';color:var(--teal);font-weight:600;
}
.bystander-speech-anchor{
  position:absolute;bottom:100%;right:0;margin-bottom:6px;
  max-width:min(200px,38vw);pointer-events:none;z-index:2;
}
.bystander-bubble{
  position:relative;
  background:linear-gradient(180deg,#d8f7f0,#b6ebe0);color:#0a2a28;
  font-size:11px;font-weight:600;line-height:1.35;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  border:1px solid rgba(45,212,191,.55);
}
.bystander-bubble::after{
  content:"";position:absolute;bottom:-7px;right:18px;
  border-width:8px 7px 0 7px;border-style:solid;
  border-color:#b6ebe0 transparent transparent transparent;
}

/* provider + player stack — bottom-right of stage */
.voice-stack{
  position:absolute;z-index:8;right:12px;bottom:48px;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px;
  max-width:min(260px,52%);max-height:42%;
  overflow-y:auto;overflow-x:hidden;pointer-events:none;
  -webkit-overflow-scrolling:touch;
}

/* partner hand icons on patient SVG */
#patientSvg .region.amputation-separated { transition: transform .4s ease; }
#ovl-amputation { pointer-events: none; }
#ovl-amputation .region .hit { pointer-events: all; cursor: pointer; }
.partner-hold-icon { pointer-events:none; }
.partner-hold-icon.pressure { color:#e21b1b; }
.partner-hold-icon.stabilize { color:#f5d76e; }
.partner-hold-icon.seal { color:#4a9eff; }
.partner-hold-icon.cool { color:#6ab4e8; }
.partner-hold-icon.suction { color:#a78bfa; }

#partnerPlacementCursor{
  position:fixed;pointer-events:none;z-index:9999;opacity:.9;
  transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
#partnerPlacementCursor svg{width:36px;height:36px;color:var(--teal)}

/* partner popup */
.partner-cmd-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.partner-cmd-btn { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; text-align:left; font-size:13px; }
.partner-cmd-btn:hover { background:var(--hover); }
.partner-cmd-btn .cmd-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.partner-cmd-btn.pressure .cmd-dot { background:#e21b1b; }
.partner-cmd-btn.stabilize .cmd-dot { background:#f5d76e; }
.partner-cmd-btn.seal .cmd-dot { background:#4a9eff; }
.partner-active-list { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; }
.partner-hold-row { display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:12px; border-bottom:1px solid var(--line); }
.partner-hold-row:last-child { border-bottom:none; }
.partner-cancel-btn { font-size:11px; padding:3px 8px; border-radius:4px; border:1px solid var(--line); background:transparent; cursor:pointer; color:var(--muted); }
.partner-cancel-btn:hover { background:var(--hover); }
.partner-status { font-size:11px; color:var(--muted); margin-top:4px; }

/* player speech bubble — EMR (you) */
.player-bubble{
  position:relative;flex-shrink:0;
  max-width:100%;min-width:80px;padding:8px 11px;border-radius:12px;
  background:linear-gradient(180deg,#0d2d3a,#0a2030);
  color:#7de8d8;border:1px solid rgba(45,212,191,.45);
  font-size:12px;line-height:1.35;font-weight:600;text-align:left;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  transform:translateY(6px) scale(.97);
}
.player-bubble::before{
  content:"";position:absolute;top:50%;right:-10px;left:auto;transform:translateY(-50%);
  border-width:7px 0 7px 10px;border-style:solid;
  border-color:transparent transparent transparent rgba(45,212,191,.45);
}
.player-bubble::after{
  content:"";position:absolute;top:50%;right:-8px;left:auto;transform:translateY(-50%);
  border-width:6px 0 6px 9px;border-style:solid;
  border-color:transparent transparent transparent #0a2030;
}
.player-bubble .pb-label{
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(45,212,191,.6);margin-bottom:4px;
}
.player-bubble.show{opacity:1;transform:translateY(0) scale(1)}

/* partner speech bubble — compressions / BVM partner feedback */
.partner-bubble{
  position:relative;flex-shrink:0;
  max-width:100%;min-width:80px;padding:8px 11px;border-radius:12px;
  background:linear-gradient(180deg,#1a2e1a,#0f2010);
  color:#9ae6b0;border:1px solid rgba(74,222,128,.4);
  font-size:12px;line-height:1.35;font-weight:600;text-align:left;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  transform:translateY(6px) scale(.97);
}
.partner-bubble.urgent{
  background:linear-gradient(180deg,#3d1a0a,#2a1008);
  color:#ffb380;border-color:rgba(255,140,60,.55);
}
.partner-bubble::before{
  content:"";position:absolute;top:50%;right:-10px;left:auto;transform:translateY(-50%);
  border-width:7px 0 7px 10px;border-style:solid;
  border-color:transparent transparent transparent rgba(74,222,128,.4);
}
.partner-bubble.urgent::before{border-left-color:rgba(255,140,60,.55)}
.partner-bubble::after{
  content:"";position:absolute;top:50%;right:-8px;left:auto;transform:translateY(-50%);
  border-width:6px 0 6px 9px;border-style:solid;
  border-color:transparent transparent transparent #0f2010;
}
.partner-bubble.urgent::after{border-left-color:#2a1008}
.partner-bubble .pt-label{
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(74,222,128,.65);margin-bottom:4px;
}
.partner-bubble.urgent .pt-label{color:rgba(255,160,80,.75)}
.partner-bubble.show{opacity:1;transform:translateY(0) scale(1)}

/* environment sidebar button */
.sb-btn.env-applied{border-color:var(--green);color:var(--green)}

/* non-diagnostic live pill */
.cond-pill.live{background:rgba(95,168,255,.14);color:#bcd6f5;border-color:rgba(95,168,255,.35)}

/* ---------- patient overlays (clothing · fx · bleeding) ---------- */
.garment{transition:opacity .35s ease}
.garment.cloth-gone{opacity:0}
.scissors-fx .sc-move{animation:scsweep .85s ease-in-out forwards}
@keyframes scsweep{from{transform:translateX(0)}to{transform:translateX(140px)}}
.cut-line{animation:cutgrow .85s ease-in-out forwards}
@keyframes cutgrow{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.bleed .spurt{animation:spurt 1.1s ease-in-out infinite}
@keyframes spurt{0%,100%{r:5;opacity:.85}50%{r:9;opacity:1}}
.bleed .pool{animation:pool 3s ease-out infinite}
@keyframes pool{0%{rx:8;ry:4;opacity:.5}100%{rx:16;ry:7;opacity:.85}}
.bleed.ven .pool2{animation:pool 5s ease-out infinite}
.aaa-mass .aaa-mass-bulge,.aaa-mass .aaa-mass-core{animation:aaaMassPulse 1.15s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.aaa-mass .aaa-mass-highlight{animation:aaaMassPulse 1.15s ease-in-out infinite;animation-delay:.12s;transform-box:fill-box;transform-origin:center}
@keyframes aaaMassPulse{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.05);opacity:.9}}
/* Flail free segment — sinks on inspiration (paradoxical to chest rise) */
.find-mark .flail-free-rib{
  animation:flailParadox 2.4s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.find-mark .flail-segment-box{
  animation:flailParadoxBox 2.4s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes flailParadox{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2.8px)}
}
@keyframes flailParadoxBox{
  0%,100%{transform:translateY(0); opacity:.9}
  50%{transform:translateY(2.2px); opacity:.75}
}
.equip-on{animation:equippop .3s ease-out}
@keyframes equippop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ---------- patient care report ---------- */
.pcr{font-size:12.5px}
.pcr-head{padding:4px 2px 8px;border-bottom:1px solid var(--line-soft);margin-bottom:8px;line-height:1.4}
.pcr-sec{margin-bottom:10px}
.pcr-sec h6{margin:0 0 5px;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--teal)}
.pcr-line{display:flex;gap:8px;padding:3px 0;border-bottom:1px solid rgba(38,56,74,.35);line-height:1.35}
.pcr-k{flex:0 0 132px;color:var(--muted);font-weight:600}
.pcr-t{flex:0 0 44px;font-family:var(--mono);color:var(--blue);font-size:11px}
.pcr-tabs{display:flex;gap:0;margin:-4px -4px 10px;border-bottom:1px solid var(--line-soft)}
.pcr-tab{flex:1;padding:9px 6px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;font-family:inherit}
.pcr-tab.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700}
.pcr-tab:hover{color:var(--text)}
.pcr-notes-pad{width:100%;min-height:220px;box-sizing:border-box;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#0c1620;color:var(--text);font-family:inherit;font-size:13px;line-height:1.45}
.pcr-notes-pad:focus{outline:none;border-color:var(--teal)}
.pcr-badge{display:inline-block;min-width:16px;padding:0 5px;margin-left:4px;background:var(--amber);color:#111;border-radius:8px;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.pcr-vitals-grid-wrap{margin-bottom:12px}
.pcr-vitals-grid-scroll{overflow-x:auto;border:1px solid var(--line-soft);border-radius:6px;background:#0a1218}
.pcr-vitals-grid{border-collapse:collapse;width:100%;min-width:720px;font-size:10.5px}
.pcr-vitals-grid th,.pcr-vitals-grid td{border:1px solid rgba(38,56,74,.55);padding:4px 5px;text-align:center;white-space:nowrap;min-width:36px;height:22px;color:var(--text)}
.pcr-vitals-grid th{background:#0f1a24;color:var(--muted);font-size:9.5px;letter-spacing:.03em;text-transform:uppercase;font-weight:700}
.pcr-vitals-grid td.pcr-vg-time{font-family:var(--mono);color:var(--blue);font-weight:600}
.pcr-vitals-grid td.pcr-vg-cell{vertical-align:top;line-height:1.15}
.pcr-vitals-grid .pcr-vg-cell-t{font-size:8.5px;color:var(--blue);font-family:var(--mono);font-weight:600;margin-top:1px;opacity:.85}
.pcr-vitals-grid tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.pcr-pending-card{padding:10px;margin-bottom:10px;border:1px solid var(--line);border-radius:6px;background:#0c1620}
.pcr-pending-banner{padding:8px 10px;margin-bottom:12px;border:1px solid var(--line);border-radius:6px;background:#0f1a24}
.pcr-pending-item{font-size:12px;padding:3px 0;border-bottom:1px solid rgba(38,56,74,.35)}
.pcr-pending-item:last-child{border-bottom:none}
.vdoc-time-block{padding:8px 10px;margin-bottom:10px;border:1px solid var(--teal);border-radius:6px;background:#0a1a22}
.vdoc-time-row .vdoc-time-input{font-family:var(--mono);font-size:14px;letter-spacing:.5px}
.vdoc-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.vdoc-lbl{flex:0 0 120px;font-size:11px;color:var(--muted)}
.vdoc-input{flex:1;background:#0c1620;border:1px solid var(--line);border-radius:4px;color:var(--text);padding:6px 8px;font-family:var(--mono);font-size:12px}
.vdoc-row-selectable{cursor:pointer;border-radius:4px;margin:0 -4px;padding:2px 4px}
.vdoc-row-selectable:hover{background:rgba(255,255,255,.03)}
.vdoc-row.vdoc-selected{outline:2px solid var(--amber);outline-offset:1px;background:rgba(240,180,80,.08)}
.vdoc-stepper{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
.vdoc-val{flex:1;font-family:var(--mono);font-size:12px;text-align:center;min-width:36px;color:var(--text)}
.vdoc-val-input{flex:1;min-width:0;text-align:center}
.vdoc-step{flex:0 0 28px;height:28px;padding:0;border:1px solid var(--line);border-radius:4px;background:#0c1620;color:var(--muted);cursor:pointer;font-size:11px;line-height:1}
.vdoc-step:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- flow tab ---------- */
.flow-step{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--panel-2);border:1px solid var(--line-soft);padding:9px 11px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--text);transition:.14s;margin-bottom:6px}
.flow-step:hover{border-color:var(--teal);transform:translateX(2px)}
.flow-step .fnum{width:20px;height:20px;border-radius:50%;background:var(--panel-3);color:var(--muted);
  font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 20px}
.flow-step.done .fnum{background:var(--green);color:#04221d}
.flow-step .fmk{margin-left:auto;font-weight:800}
.flow-step.done .fmk{color:var(--green)} .flow-step.todo .fmk{color:var(--muted-2)}


#cprRateMeter{
  width:100%;
  max-width:360px;
  height:10px;
  background:var(--panel-3);
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
}
#cprRateFill{
  height:100%;
  border-radius:6px;
  transition:width .15s,background .2s;
  background:var(--green);
}

#cprRateLabel{
  font-family:var(--mono);
  font-size:22px;
  font-weight:800;
  color:var(--green);
  letter-spacing:1px;
  min-width:90px;
  text-align:center;
}

/* ---------- FBAO conscious relief bar ---------- */
#fbaoReliefBar{
  position:absolute;
  top:52px;
  left:50%;
  transform:translateX(-50%);
  z-index:41;
  width:min(420px,92%);
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  background:rgba(11,16,22,.94);
  border:1px solid var(--amber);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
#fbaoReliefBar .cpr-bar-phase{color:var(--amber)}

/* ---------- CPR 2-minute cycle bar ---------- */
#cprCycleBar{
  position:absolute;
  top:52px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  width:min(420px,92%);
  flex-direction:column;
  gap:6px;
  padding:10px 14px;
  background:rgba(11,16,22,.94);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.cpr-bar-ratio{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
  text-transform:uppercase;
}
.cpr-bar-track{
  height:8px;
  background:var(--panel-3);
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--line);
}
.cpr-bar-fill{
  height:100%;
  width:100%;
  background:var(--green);
  border-radius:4px;
  transition:width .1s linear, background .3s;
}
.cpr-bar-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.cpr-bar-timer{
  font-family:var(--mono);
  font-size:18px;
  font-weight:800;
  color:var(--text);
}
.cpr-bar-phase{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  color:var(--green);
  text-align:right;
}
.cpr-skip-btn{
  margin-top:4px;
  padding:6px 10px;
  border-radius:8px;
  background:var(--panel-3);
  border:1px solid var(--amber);
  color:var(--amber);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  align-self:flex-end;
}
.cpr-skip-btn:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- Suction full-screen ---------- */
#suctionScreen{display:none}
#suctionTimer.warning{color:var(--amber)}
#suctionTimer.critical{color:var(--red);animation:timerPulse .4s infinite alternate}
@keyframes timerPulse{from{opacity:1}to{opacity:.4}}
#suctionDoneBtn:hover{border-color:var(--teal)}

.bvm-tap-target{
  filter:drop-shadow(0 0 8px var(--teal)) drop-shadow(0 0 16px var(--teal));
  animation:bvmPulse 1s ease-in-out infinite;
  cursor:pointer !important;
}
@keyframes bvmPulse{
  0%,100%{filter:drop-shadow(0 0 6px var(--teal))}
  50%{filter:drop-shadow(0 0 18px var(--teal)) drop-shadow(0 0 32px var(--teal))}
}
.bvm-flash{filter:brightness(2.5) !important;transition:filter .1s}
#patientSvg .region[data-region="head"].bvm-tap-region circle,
#patientSvg .region[data-region="head"].bvm-tap-region ellipse{
  filter:drop-shadow(0 0 10px var(--teal));
  animation:bvmPulse 1s ease-in-out infinite;
}

.cpr-bar-fill.analyze-pulse{
  animation:cprAnalyzePulse .8s ease-in-out infinite alternate;
}
#cprCycleBar.cpr-analyzing{
  border-color:rgba(255,80,80,.55);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 18px rgba(255,60,60,.25);
}
#cprCycleBar.cpr-analyzing .cpr-bar-timer{color:var(--red)}
#cprCycleBar.cpr-analyzing .cpr-bar-phase{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@keyframes cprAnalyzePulse{
  from{opacity:.75;filter:brightness(.95)}
  to{opacity:1;filter:brightness(1.15)}
}
#aedBanner{
  display:none;
  position:absolute;
  top:108px;
  left:50%;
  transform:translateX(-50%);
  z-index:55;
  width:min(420px,92%);
  pointer-events:none;
  background:linear-gradient(180deg,rgba(180,20,20,.97) 0%,rgba(120,10,10,.93) 100%);
  padding:14px 20px;
  text-align:center;
  border:2px solid #ff4444;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 24px rgba(255,60,60,.35);
}
#aedBanner.pulse-warn{animation:aedPulse .6s ease-in-out infinite alternate}
@keyframes aedPulse{
  from{opacity:.9}
  to{opacity:1;box-shadow:0 0 24px rgba(255,60,60,.6)}
}
@keyframes shockBtnPulse{
  from{box-shadow:0 0 20px rgba(255,60,60,.5),0 4px 12px rgba(0,0,0,.5)}
  to{box-shadow:0 0 48px rgba(255,60,60,.9),0 8px 24px rgba(0,0,0,.7)}
}
.shock-flash{animation:shockFlash .3s ease-out}
@keyframes shockFlash{
  0%{filter:brightness(1)}
  30%{filter:brightness(3) saturate(.2)}
  100%{filter:brightness(1)}
}

#partnerHands.compressing #partnerHandGroup{animation:partnerComp .5s ease-in-out}
@keyframes partnerComp{
  0%{transform:translate(100px,50px)}
  40%{transform:translate(100px,62px)}
  100%{transform:translate(100px,50px)}
}
#partnerHands.clearing{animation:handsSlide .5s ease-in forwards}
@keyframes handsSlide{
  from{opacity:.92;transform:translate(-50%,-50%)}
  to{opacity:0;transform:translate(30%,-50%)}
}
/* HEMP ABCs pre-scene */
/* HEMP ABCs pre-scene — steps fill sidebar height */
.sidebar.hemp-sidebar{
  padding:6px 4px;overflow-y:auto;
  display:flex;flex-direction:column;height:100%;box-sizing:border-box;
}
.sidebar.hemp-sidebar .sb-title{
  flex:0 0 auto;font-size:8px;letter-spacing:.8px;margin:0 0 6px;
}
.sidebar.hemp-sidebar .hemp-steps{
  flex:1 1 auto;display:flex;flex-direction:column;gap:4px;min-height:0;
}
.sidebar.hemp-sidebar .hemp-steps .sb-btn{
  flex:1 1 0;min-height:34px;max-height:60px;margin-bottom:0;
  padding:8px 6px;border-radius:5px;
  font-size:10px;font-weight:600;line-height:1.2;gap:5px;
}
.sidebar.hemp-sidebar .hemp-steps .sb-btn .pic,
.sidebar.hemp-sidebar .hemp-steps .sb-btn svg{width:12px;height:12px;flex:0 0 12px}
.sidebar.hemp-sidebar #hemp-go-btn{
  flex:1 1 0;padding:8px 6px;font-size:10px;min-height:34px;max-height:60px;
}
.sidebar.hemp-sidebar #hemp-go-btn:disabled{
  opacity:.45;cursor:not-allowed;animation:none;
  background:var(--panel-2)!important;color:var(--muted)!important;
  border-color:var(--line-soft)!important;
}
#hemp-go-btn {
  animation: hempGlowPulse 2s ease-in-out infinite;
}
@keyframes hempGlowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); }
  50%      { box-shadow: 0 0 16px 4px rgba(45,212,191,0.4); }
}
.hemp-step-done {
  border-color: var(--teal) !important;
  color: var(--teal);
}

/* ── START SCREEN ── */
#startScreen{
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#060d14;
  overflow:hidden;
  border-radius:12px;
}
#startScreen.hidden{ display:none; }

.start-settings-btn{
  position:absolute;top:12px;right:12px;z-index:12;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  border-radius:8px;
  font-size:18px;line-height:1;
  cursor:pointer;
  color:var(--teal);
  transition:border-color .15s, background .15s, color .15s;
}
.start-settings-btn:hover{
  border-color:var(--teal);
  background:rgba(45,212,191,.12);
  color:#fff;
}

#startMountains{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}

.start-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;
  padding:20px 24px;
  width:100%;
  height:100%;
  max-height:100%;
  box-sizing:border-box;
  overflow-y:auto;
}

.start-title{
  text-align:center;
  line-height:1.2;
  flex:0 0 auto;
}
.start-title h1{
  font-size:clamp(18px,2.8vw,30px);
  font-weight:900;
  letter-spacing:2px;
  color:#fff;
  margin:0 0 4px;
  text-shadow:0 2px 24px rgba(45,212,191,.4);
}
.start-title p{
  font-size:11px;
  color:var(--muted);
  letter-spacing:1px;
  margin:0;
  text-transform:uppercase;
}

.start-modes{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  max-width:380px;
  flex:0 1 auto;
  min-height:0;
}

.start-btn{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:4px;
  padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
  text-align:left;
  width:100%;
}
.start-btn:hover{
  background:rgba(45,212,191,.08);
  border-color:var(--teal);
  transform:translateY(-2px);
}
.start-btn.licensing:hover{ border-color:#5fa8ff; background:rgba(95,168,255,.08); }
.start-btn .btn-title{
  font-size:15px;font-weight:800;color:#fff;letter-spacing:.5px;
}
.start-btn.licensing .btn-title{ color:#7ec8ff; }
.start-btn.teaching .btn-title{ color:var(--teal); }
.start-btn .btn-desc{
  font-size:11px;color:var(--muted);line-height:1.45;
}
.start-btn .btn-tags{
  display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;
}
.start-btn .tag-pill{
  font-size:10px;font-weight:700;letter-spacing:.5px;
  padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.07);color:var(--muted);
  text-transform:uppercase;
}
.start-btn.licensing .tag-pill{ background:rgba(95,168,255,.12);color:#7ec8ff; }
.start-btn.teaching .tag-pill{ background:rgba(45,212,191,.12);color:var(--teal); }
.start-btn.creator .btn-title{ color:#c4b5fd; }
.start-btn.creator:hover{ border-color:#a78bfa; background:rgba(167,139,250,.08); }
.start-btn.creator .tag-pill{ background:rgba(167,139,250,.14);color:#c4b5fd; }
.btn-top.creator-active{ border-color:#a78bfa;color:#c4b5fd; }
.btn-top.creator-active:hover{ box-shadow:0 0 0 1px #a78bfa inset; }
.creator-roll-block{ margin-bottom:12px; padding:10px 12px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; }
.creator-roll-block h4{ margin:0 0 6px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#c4b5fd; }
.creator-roll-block p,.creator-roll-block li{ margin:0 0 4px; font-size:12px; line-height:1.45; color:var(--text); }
.creator-roll-block ul{ margin:0; padding-left:16px; }
.creator-moi-opt{ text-align:left; }
.creator-moi-opt small{ display:block; margin-top:3px; opacity:.65; font-weight:400; font-size:11px; line-height:1.35; }
.creator-scen-pick{ max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.creator-scen-pick .opt{ padding:8px 10px; font-size:12px; }
.creator-scen-pick .opt.active{ border-color:#a78bfa; background:rgba(167,139,250,.1); }

/* Teaching mode freeze popup */
.teaching-popup{
  position:fixed;inset:0;z-index:8000;
  background:rgba(6,13,20,.82);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.teaching-popup.hidden{ display:none; }
.teaching-popup-inner{
  background:var(--card);
  border:1px solid var(--amber);
  border-radius:14px;
  padding:24px 28px;
  max-width:480px;
  width:90%;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
}
.teaching-popup-inner .tp-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.teaching-popup-inner .tp-icon{
  font-size:22px;flex:0 0 auto;
}
.teaching-popup-inner .tp-title{
  font-size:15px;font-weight:800;color:var(--amber);
}
.teaching-popup-inner .tp-body{
  font-size:13px;color:var(--text);line-height:1.65;
  margin-bottom:18px;
}
.teaching-popup-inner .tp-critical{
  background:rgba(251,111,111,.1);
  border:1px solid var(--red);
  border-radius:8px;
  padding:10px 14px;
  color:var(--red);
  font-size:12px;
  font-weight:700;
  margin-bottom:14px;
}
.teaching-popup-inner .tp-continue{
  width:100%;padding:10px;
  background:var(--amber);color:#1a1000;
  border:none;border-radius:8px;
  font-size:13px;font-weight:800;cursor:pointer;
  transition:opacity .15s;
}
.teaching-popup-inner .tp-continue:hover{ opacity:.88; }

/* Teaching mode progress bar */
#teachingProgressBar{
  display:none;
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  background:#0c1620;
  border-bottom:1px solid var(--amber);
  padding:8px 16px;
  font-size:12px;
  color:var(--amber);
  font-weight:700;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:12px;
}
#teachingProgressBar .t-step-label{
  flex:1;
  font-size:13px;
  color:var(--text);
  font-weight:400;
}
#teachingProgressBar .t-step-num{
  color:var(--amber);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}
#teachingProgressTrack{
  height:3px;
  background:rgba(251,191,36,.15);
  border-radius:2px;
  overflow:hidden;
  flex:1;
  min-width:80px;
}
#teachingProgressFill{
  height:100%;
  background:var(--amber);
  border-radius:2px;
  transition:width .4s ease;
}
/* Popover button highlight in teaching mode */
.popover-btn.teaching-pop-highlight,
button.opt.teaching-pop-highlight{
  border-color:var(--amber) !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.6),0 0 20px rgba(251,191,36,.4) !important;
  background:rgba(251,191,36,.12) !important;
  position:relative;
  z-index:9999;
  animation:teachingPulse 1.8s ease-in-out infinite;
}
/* Block all non-highlighted interactions in teaching mode */
.teaching-blocked{
  pointer-events:none !important;
  opacity:.35 !important;
}
/* Teaching mode sidebar highlight */
.sb-btn.teaching-highlight{
  border-color:var(--amber) !important;
  box-shadow:0 0 0 2px rgba(251,191,36,.25), 0 0 16px rgba(251,191,36,.15);
  animation:teachingPulse 1.8s ease-in-out infinite;
}
@keyframes teachingPulse{
  0%,100%{ box-shadow:0 0 0 2px rgba(251,191,36,.25), 0 0 16px rgba(251,191,36,.15); }
  50%     { box-shadow:0 0 0 4px rgba(251,191,36,.40), 0 0 28px rgba(251,191,36,.30); }
}

/* Teaching mode SVG region highlight */
.region.teaching-region .hit{
  fill:rgba(251,191,36,.18) !important;
  stroke:var(--amber) !important;
  stroke-width:2 !important;
  animation:teachingRegionPulse 1.8s ease-in-out infinite;
}
@keyframes teachingRegionPulse{
  0%,100%{ fill:rgba(251,191,36,.12) !important; }
  50%     { fill:rgba(251,191,36,.28) !important; }
}

/* Teaching mode log entries */
.log-entry.teaching{ color:var(--amber); }

/* ── Teaching Scenario Selector ───────────────────────────────────────── */
#teachingSelector{
  position:fixed;inset:0;z-index:9998;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#060d14;
  overflow:hidden;
}
#teachingSelector.hidden{ display:none; }
#teachingSelector .ts-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:20px;
  padding:32px 24px;
  width:100%;max-width:520px;
}
#teachingSelector h2{
  font-size:22px;font-weight:900;letter-spacing:2px;
  color:var(--teal);margin:0;text-align:center;
  text-shadow:0 2px 24px rgba(45,212,191,.4);
}
#teachingSelector .ts-sub{
  font-size:12px;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;margin:0;text-align:center;
}
#teachingSelector .ts-custom-btn{
  width:100%;padding:11px 18px;
  border:1px solid rgba(251,191,36,.35);
  border-radius:12px;
  background:rgba(251,191,36,.08);
  color:var(--amber);
  font-size:13px;font-weight:700;letter-spacing:.4px;
  cursor:pointer;text-align:center;
  transition:background .18s,border-color .18s,color .18s;
}
#teachingSelector .ts-custom-btn:hover{
  background:rgba(251,191,36,.14);
  border-color:var(--amber);
}
#teachingSelector .ts-custom-btn.active{
  border-color:rgba(45,212,191,.4);
  background:rgba(45,212,191,.08);
  color:var(--teal);
}
.ts-custom-badge{
  font-size:9px;color:#3ddc84;
  background:rgba(29,158,117,.15);
  padding:1px 5px;border-radius:3px;margin-left:4px;
  font-weight:600;vertical-align:middle;
}
.ts-empty{
  text-align:center;padding:24px 16px;
  font-size:12px;color:var(--muted);line-height:1.6;
}
#teachingSelector .ts-list{
  display:flex;flex-direction:column;gap:8px;
  width:100%;max-height:60vh;overflow-y:auto;
  padding-right:4px;
}
#teachingSelector .ts-list::-webkit-scrollbar{ width:4px; }
#teachingSelector .ts-list::-webkit-scrollbar-track{ background:transparent; }
#teachingSelector .ts-list::-webkit-scrollbar-thumb{ background:rgba(45,212,191,.3);border-radius:2px; }
.ts-item{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:3px;padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;cursor:pointer;text-align:left;width:100%;
  transition:background .18s,border-color .18s,transform .12s;
}
.ts-item:hover{
  background:rgba(45,212,191,.09);
  border-color:var(--teal);
  transform:translateY(-1px);
}
.ts-item .ts-label{
  font-size:14px;font-weight:700;color:#fff;
}
.ts-item .ts-teaches{
  font-size:11px;color:var(--muted);line-height:1.4;
}
#teachingSelector .ts-back{
  font-size:12px;color:var(--muted);background:none;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;
  padding:8px 20px;cursor:pointer;letter-spacing:.5px;
  transition:border-color .15s,color .15s;
}
#teachingSelector .ts-back:hover{ border-color:var(--muted);color:#fff; }

/* ── Provider Finding Bubble (magenta) ─────────────────────────────────── */
.provider-bubble{
  position:relative;flex-shrink:0;
  max-width:100%;min-width:80px;padding:8px 11px;border-radius:12px;
  background:linear-gradient(180deg,#2d0a2e,#1e0620);
  color:#f0a0f8;border:1px solid rgba(220,80,240,.5);
  font-size:11px;line-height:1.35;font-weight:600;text-align:left;
  box-shadow:0 8px 22px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s ease, transform .3s ease;
  transform:translateY(6px) scale(.97);
}
.provider-bubble::before{
  content:"";position:absolute;top:50%;right:-10px;left:auto;transform:translateY(-50%);
  border-width:7px 0 7px 10px;border-style:solid;
  border-color:transparent transparent transparent rgba(220,80,240,.5);
}
.provider-bubble::after{
  content:"";position:absolute;top:50%;right:-8px;left:auto;transform:translateY(-50%);
  border-width:6px 0 6px 9px;border-style:solid;
  border-color:transparent transparent transparent #1e0620;
}
.provider-bubble .pf-label{
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(220,80,240,.6);margin-bottom:4px;
}
.provider-bubble.show{opacity:1;transform:translateY(0) scale(1)}

/* ── Firebase Auth gate (session overlay; does not restyle the simulator) ── */
#authGate{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 700px at 50% -10%, #15212e 0%, transparent 60%),
    rgba(7,12,18,.96);
}
#authGate[hidden]{display:none!important}
.auth-card{
  width:min(420px,100%);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:22px 22px 20px;
}
.auth-card h1{
  margin:0 0 4px;
  font-size:20px;
  letter-spacing:.4px;
}
.auth-card .auth-lead{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.auth-banner{
  margin:0 0 14px;
  padding:10px 12px;
  border-radius:8px;
  font-size:12px;
  line-height:1.45;
  border:1px solid var(--line);
  background:var(--panel-3);
  color:var(--text);
}
.auth-banner-blocker{
  border-color:#4d2222;
  background:rgba(251,111,111,.08);
  color:#ffc9c9;
}
.auth-banner-ok{
  border-color:#234b34;
  background:rgba(61,220,132,.08);
  color:#c8f5d8;
}
.auth-note{
  margin:0 0 12px;
  font-size:11px;
  line-height:1.4;
  color:var(--muted-2);
}
.auth-form{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.auth-form label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
}
.auth-form input{
  font:inherit;
  text-transform:none;
  letter-spacing:0;
  color:var(--text);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 10px;
}
.auth-form input:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal) inset;
}
.auth-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.auth-actions .btn{flex:1 1 140px}
.auth-google{
  width:100%;
  margin-top:2px;
}
.auth-form-error{
  margin:0;
  min-height:1.2em;
  font-size:12px;
  color:var(--red);
}
.auth-form-error[hidden]{display:none}
.auth-provider-hint{
  margin:10px 0 0;
  font-size:11px;
  color:var(--muted-2);
}
#authSessionChip{
  position:fixed;
  top:10px;
  right:12px;
  z-index:9000;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px 6px 12px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);
  font-size:12px;
  color:var(--muted);
}
#authSessionChip[hidden]{display:none!important}
#authUserLabel{
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#authSignOutBtn{
  border:1px solid var(--line);
  background:var(--panel-3);
  color:var(--text);
  border-radius:999px;
  padding:5px 10px;
  font-size:12px;
  font-weight:600;
}
#authSignOutBtn:hover{border-color:var(--teal)}