/* ============================================================
   Shock or Not — Nursia theme layer (Frame + UI).

   Wears Nursia: title/levels/help/credits/intro/debrief/clear/end/pause
   screens, the HUD band, coach, toasts, tooltip, hotspot chips, the
   drug drawer.
   Stays as the game draws it: the 3D room, the ECG strips (title trace and
   the defibrillator monitor) and the defibrillator panel itself, whose
   cyan/amber/red buttons carry meaning (sync / charge / shock).
   ============================================================ */

[data-nursia-clinic="shock-or-not"] {
  --mono: var(--nc-font-mono);
  --sans: var(--nc-font-ui);
}

/* --- layout: sit below the 48px bar ------------------------- */
[data-nursia-clinic="shock-or-not"] #app {
  top: var(--nc-bar-h);
}
/* the bar's "All cases" replaces the game's own link */
[data-nursia-clinic="shock-or-not"] #hub {
  display: none;
}

/* --- menus and result screens ------------------------------- */
[data-nursia-clinic="shock-or-not"] #screens {
  --trace: var(--nc-teal);
  --sync: var(--nc-teal);
  --ok: var(--nc-correct);
  --shock: var(--nc-wrong);
  --charge: #8a5a00;
  --text: var(--nc-ink);
  --dim: var(--nc-muted);
}
[data-nursia-clinic="shock-or-not"] #screens .screen {
  color-scheme: light;
  background: var(--nc-paper);
  color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #screens .card {
  background: var(--nc-paper);
}
[data-nursia-clinic="shock-or-not"] #screens h1 {
  font: 700 clamp(40px, 8vw, 64px)/1 var(--nc-font-ui);
  letter-spacing: -0.03em;
  color: var(--nc-ink);
  text-shadow: none;
}
[data-nursia-clinic="shock-or-not"] #screens h2 {
  font: 700 28px/1.15 var(--nc-font-ui);
  letter-spacing: -0.02em;
  color: var(--nc-ink);
}
/* the ECG traces are monitor glass: keep them dark, frame them as a card */
[data-nursia-clinic="shock-or-not"] #titleTrace,
[data-nursia-clinic="shock-or-not"] #loadTrace {
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="shock-or-not"] #screens .lede,
[data-nursia-clinic="shock-or-not"] #screens .rule,
[data-nursia-clinic="shock-or-not"] #sCredits p,
[data-nursia-clinic="shock-or-not"] #screens .help,
[data-nursia-clinic="shock-or-not"] #dbList,
[data-nursia-clinic="shock-or-not"] #words {
  font-family: var(--nc-font-body);
}
[data-nursia-clinic="shock-or-not"] #screens .lede {
  font-size: 18px;
  line-height: 1.5;
  color: var(--nc-ink-2);
}
[data-nursia-clinic="shock-or-not"] #screens .fine {
  color: var(--nc-muted);
}
[data-nursia-clinic="shock-or-not"] #screens .kicker {
  font: 600 12px/1.2 var(--nc-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-teal);
}
[data-nursia-clinic="shock-or-not"] #screens .rule {
  color: var(--nc-ink);
  font-weight: 600;
  border-left: 3px solid var(--nc-teal);
  padding-left: 12px;
  text-align: left;
}
[data-nursia-clinic="shock-or-not"] #dbList .bad { color: var(--nc-wrong); }
[data-nursia-clinic="shock-or-not"] #dbList .mild { color: #8a5a00; }
[data-nursia-clinic="shock-or-not"] #dbList .good { color: var(--nc-correct); }
[data-nursia-clinic="shock-or-not"] #sCredits a { color: var(--nc-teal); }
[data-nursia-clinic="shock-or-not"] #words dt {
  font-family: var(--nc-font-ui);
  color: var(--nc-ink);
}

/* help cards */
[data-nursia-clinic="shock-or-not"] .hcard {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-top: 3px solid;
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  padding: 12px;
}
[data-nursia-clinic="shock-or-not"] .hcard.sh { border-top-color: var(--nc-wrong); }
[data-nursia-clinic="shock-or-not"] .hcard.no { border-top-color: var(--nc-correct); }
[data-nursia-clinic="shock-or-not"] .hcard.aw { border-top-color: var(--nc-teal); }
[data-nursia-clinic="shock-or-not"] .hcard b {
  font: 600 13px var(--nc-font-mono);
  letter-spacing: 0.06em;
}
[data-nursia-clinic="shock-or-not"] .hcard p {
  font-family: var(--nc-font-body);
  font-size: 15px;
  color: var(--nc-ink-2);
}

/* end-of-run bars */
[data-nursia-clinic="shock-or-not"] .bar {
  font: 500 13px var(--nc-font-mono);
}
[data-nursia-clinic="shock-or-not"] .bar i {
  border-radius: 2px;
}
[data-nursia-clinic="shock-or-not"] .stars {
  color: #b07a00;
}

/* --- buttons (screens, coach, drug drawer, HUD icons) -------- */
[data-nursia-clinic="shock-or-not"] #screens button,
[data-nursia-clinic="shock-or-not"] #medTray button,
[data-nursia-clinic="shock-or-not"] #hud button.icon {
  font: 600 15px/1.15 var(--nc-font-ui);
  letter-spacing: -0.01em;
  color: var(--nc-ink);
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius-btn);
  box-shadow: none;
}
[data-nursia-clinic="shock-or-not"] #screens button:hover,
[data-nursia-clinic="shock-or-not"] #medTray button:hover,
[data-nursia-clinic="shock-or-not"] #hud button.icon:hover {
  border-color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #screens button.ghost,
[data-nursia-clinic="shock-or-not"] #medTray button.ghost {
  background: transparent;
  border-color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #screens button.ghost:hover,
[data-nursia-clinic="shock-or-not"] #medTray button.ghost:hover {
  background: var(--nc-ink);
  color: var(--nc-paper);
}
[data-nursia-clinic="shock-or-not"] #screens button.big,
[data-nursia-clinic="shock-or-not"] #coachGot {
  background: var(--nc-teal);
  border: 1px solid var(--nc-teal);
  color: #fff;
  font: 700 17px/1.15 var(--nc-font-ui);
  border-radius: var(--nc-radius-btn);
}
[data-nursia-clinic="shock-or-not"] #screens button.big:hover,
[data-nursia-clinic="shock-or-not"] #coachGot:hover {
  background: var(--nc-teal-dark);
  border-color: var(--nc-teal-dark);
  color: #fff;
}
[data-nursia-clinic="shock-or-not"] #screens button:focus-visible,
[data-nursia-clinic="shock-or-not"] #medTray button:focus-visible,
[data-nursia-clinic="shock-or-not"] #hud button:focus-visible,
[data-nursia-clinic="shock-or-not"] #coachGot:focus-visible,
[data-nursia-clinic="shock-or-not"] .hs:focus-visible {
  outline: 2px solid var(--nc-teal);
  outline-offset: 2px;
}
[data-nursia-clinic="shock-or-not"] .lvl small,
[data-nursia-clinic="shock-or-not"] #medList small {
  font-family: var(--nc-font-ui);
  color: var(--nc-muted);
}

/* --- in-play HUD band ---------------------------------------- */
[data-nursia-clinic="shock-or-not"] #hud {
  background: rgba(251, 250, 246, 0.94);
  border-bottom: 1px solid var(--nc-rule);
  padding-bottom: 8px;
  color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #pt { color: var(--nc-ink-2); }
[data-nursia-clinic="shock-or-not"] #pt b {
  font: 700 15px var(--nc-font-ui);
  letter-spacing: -0.01em;
  color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #ptVitals {
  font: 600 13px var(--nc-font-mono);
  color: #8a5a00;
}
[data-nursia-clinic="shock-or-not"] .meter span,
[data-nursia-clinic="shock-or-not"] #timerRow span {
  font: 500 10px var(--nc-font-mono);
  letter-spacing: 0.08em;
  color: var(--nc-muted);
}
[data-nursia-clinic="shock-or-not"] .meter b {
  font-family: var(--nc-font-mono);
  font-weight: 600;
  color: var(--nc-ink);
}
[data-nursia-clinic="shock-or-not"] #timer {
  background: var(--nc-rule);
  border-radius: 2px;
}
[data-nursia-clinic="shock-or-not"] #explainBtn.on {
  background: var(--nc-teal);
  border-color: var(--nc-teal);
  color: #fff;
}

/* --- coach, toasts, banners, tooltip -------------------------- */
[data-nursia-clinic="shock-or-not"] #coach {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-left: 4px solid var(--nc-teal);
  border-radius: var(--nc-radius);
  box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.45);
  font-weight: 500;
}
[data-nursia-clinic="shock-or-not"] #toast div {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-left: 4px solid var(--nc-correct);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="shock-or-not"] #toast div.mild { border-left-color: #b07a00; }
[data-nursia-clinic="shock-or-not"] #toast div.danger {
  border-left-color: var(--nc-wrong);
  background: #fbecea;
}
[data-nursia-clinic="shock-or-not"] #skipCard {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-left: 4px solid var(--nc-correct);
  border-radius: var(--nc-radius);
  font: 600 18px var(--nc-font-mono);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="shock-or-not"] #explainBanner {
  background: var(--nc-teal);
  color: #fff;
  border-radius: var(--nc-radius);
  font-weight: 500;
}
[data-nursia-clinic="shock-or-not"] #tip {
  background: var(--nc-card);
  color: var(--nc-ink);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: 0 10px 24px -12px rgba(20, 22, 26, 0.45);
  font-family: var(--nc-font-ui);
}
[data-nursia-clinic="shock-or-not"] #bubble {
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  font-family: var(--nc-font-body);
  color: var(--nc-ink);
}

/* hotspot chips on the patient: readable labels over the 3D room */
[data-nursia-clinic="shock-or-not"] .hs {
  background: rgba(255, 255, 255, 0.95);
  color: var(--nc-ink);
  border: 1px solid var(--nc-ink);
  border-radius: var(--nc-radius-btn);
  font: 600 14px var(--nc-font-ui);
}

/* --- drug drawer ---------------------------------------------- */
[data-nursia-clinic="shock-or-not"] #medTray {
  color-scheme: light;
  background: var(--nc-paper);
  color: var(--nc-ink);
  border-top: 3px solid var(--nc-teal);
}
[data-nursia-clinic="shock-or-not"] #medTray .order {
  color: var(--nc-ink-2);
  font-family: var(--nc-font-body);
}
@media (min-width: 900px) and (min-height: 560px) {
  [data-nursia-clinic="shock-or-not"] #medTray {
    border: 1px solid var(--nc-rule);
    border-top: 3px solid var(--nc-teal);
    border-radius: var(--nc-radius);
    box-shadow: 0 10px 30px -12px rgba(20, 22, 26, 0.45);
  }
  [data-nursia-clinic="shock-or-not"] #defib {
    border-radius: var(--nc-radius);
  }
}