/* Suffix Snap — Nursia theme layer (Frame + UI).
   Start, pause, debrief, end and sources cards, buttons and the HUD wear Nursia.
   The play surface keeps its job: the belt, capsules and the drug-class colours on
   each bin's lid (set inline from data.js) stay as they are. The amber "stem"
   highlight is deepened so the lit suffix reads at 4.5:1 on white. */

:root {
  --wall: var(--nc-paper);
  --bench: #dcd8cd;
  --bench-dark: #bdb8aa;
  --ink: var(--nc-ink);
  --ink-soft: var(--nc-ink-2);
  --paper: var(--nc-card);
  --amber: #b45309;
  --mint: var(--nc-correct);
  --coral: var(--nc-wrong);
  --radius: var(--nc-radius);
  --shadow: var(--nc-shadow);
  --font: var(--nc-font-ui);
}

/* Fit below the 48px bar. */
[data-nursia-clinic="suffix-snap"] #app {
  height: calc(100dvh - var(--nc-bar-h));
}

/* ---- cards ---- */
[data-nursia-clinic="suffix-snap"] .card {
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
}
[data-nursia-clinic="suffix-snap"] :is(h1, h2) {
  font-family: var(--nc-font-ui);
  font-weight: 700;
  letter-spacing: -0.02em;
}
[data-nursia-clinic="suffix-snap"] :is(.pitch, .stats, .sources, .miss-list li, .glossary div) {
  font-family: var(--nc-font-body);
  font-weight: 400;
}
[data-nursia-clinic="suffix-snap"] .pitch { font-size: 17px; }
[data-nursia-clinic="suffix-snap"] :is(.best, .level-tag, .tray-label, .level-list li, .bin .key, .sticker .key) {
  font-family: var(--nc-font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-nursia-clinic="suffix-snap"] :is(.best, .level-tag, .tray-label, .level-list li) { font-size: 12px; }
[data-nursia-clinic="suffix-snap"] .hint { font-family: var(--nc-font-body); font-weight: 400; font-size: 14px; }
[data-nursia-clinic="suffix-snap"] :is(.score, .final, .tray-count) {
  font-family: var(--nc-font-mono);
  font-weight: 600;
}
[data-nursia-clinic="suffix-snap"] .final { letter-spacing: -0.03em; }
[data-nursia-clinic="suffix-snap"] .miss-list li {
  background: var(--nc-paper);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius-btn);
}
[data-nursia-clinic="suffix-snap"] .glossary .g { border-top-color: var(--nc-rule); }
[data-nursia-clinic="suffix-snap"] .screen.overlay { background: rgba(20, 22, 26, 0.45); }

/* title capsule */
[data-nursia-clinic="suffix-snap"] .logo .pill {
  background: linear-gradient(90deg, #fff 0 50%, var(--nc-paper-2) 50% 100%);
  box-shadow: none;
}

/* ---- buttons ---- */
[data-nursia-clinic="suffix-snap"] .btn {
  border-radius: var(--nc-radius-btn);
  border: 1px solid var(--nc-ink);
  background: var(--nc-card);
  color: var(--nc-ink);
  font-family: var(--nc-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-nursia-clinic="suffix-snap"] .btn:hover { transform: none; background: var(--nc-ink); color: var(--nc-paper); }
[data-nursia-clinic="suffix-snap"] .btn.primary {
  background: var(--nc-teal);
  border-color: var(--nc-teal);
  color: #fff;
  font-weight: 700;
}
[data-nursia-clinic="suffix-snap"] .btn.primary:hover { background: var(--nc-teal-dark); border-color: var(--nc-teal-dark); color: #fff; }
[data-nursia-clinic="suffix-snap"] .btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--nc-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-nursia-clinic="suffix-snap"] .btn.ghost:hover { color: var(--nc-ink); background: transparent; }
[data-nursia-clinic="suffix-snap"] .btn:focus-visible { outline: 3px solid var(--nc-teal); outline-offset: 2px; }
[data-nursia-clinic="suffix-snap"] .glossary summary:focus-visible { outline: 3px solid var(--nc-teal); outline-offset: 2px; }

/* ---- HUD ---- */
[data-nursia-clinic="suffix-snap"] .timer { background: var(--nc-rule); border-radius: 0; height: 4px; }
[data-nursia-clinic="suffix-snap"] .timer-fill { background: var(--nc-teal); border-radius: 0; }
[data-nursia-clinic="suffix-snap"] .guide {
  background: var(--nc-card);
  border: 1px solid var(--nc-rule);
  border-radius: var(--nc-radius);
  margin-bottom: 4px;
}
[data-nursia-clinic="suffix-snap"] .guide p { font-family: var(--nc-font-body); }
[data-nursia-clinic="suffix-snap"] .guide b { background: var(--nc-highlight); color: var(--nc-ink); padding: 0 2px; }

/* ---- play surface: bins/belt keep shape, corners flatten to match ---- */
[data-nursia-clinic="suffix-snap"] .bin {
  border-radius: var(--nc-radius);
  box-shadow: inset 0 0 0 1px var(--nc-rule);
}
[data-nursia-clinic="suffix-snap"] .bin .name { font-family: var(--nc-font-ui); letter-spacing: -0.01em; }
[data-nursia-clinic="suffix-snap"] .belt { border-radius: var(--nc-radius); }
[data-nursia-clinic="suffix-snap"] .capsule {
  background: linear-gradient(90deg, #fff 0 50%, var(--nc-paper-2) 50% 100%);
  font-family: var(--nc-font-ui);
}
[data-nursia-clinic="suffix-snap"] .stickers { background: rgba(251, 250, 246, 0.97); border-radius: var(--nc-radius); }
[data-nursia-clinic="suffix-snap"] .sticker { border-radius: var(--nc-radius-btn); }
[data-nursia-clinic="suffix-snap"] .sticker.right { background: #e7f3ec; }