/* ═══════════════════════════════════════════════════════════
   Mortalité — feuille de style unique
   Sombre, saturé, typo lourde. Tout est en flux, rien en px fixe.
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg: #0b0b12;
  --bg-soft: #14141f;
  --ink: #f5f3ff;
  --ink-dim: rgba(245, 243, 255, .62);
  --ink-faint: rgba(245, 243, 255, .38);
  --good: #22c55e;
  --bad: #ef4444;
  --accent: #ff2d6f;
  --radius: 18px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* dégradés par catégorie */
  --c-maladies:  linear-gradient(155deg, #ff3f6c 0%, #8e0038 100%);
  --c-risques:   linear-gradient(155deg, #ff9f1c 0%, #b03a00 100%);
  --c-accidents: linear-gradient(155deg, #a855f7 0%, #4c1d95 100%);
  --c-animaux:   linear-gradient(155deg, #2bd47d 0%, #065f46 100%);
  --c-nature:    linear-gradient(155deg, #38bdf8 0%, #0c4a6e 100%);
  --c-transport: linear-gradient(155deg, #60a5fa 0%, #1e3a8a 100%);
  --c-sport:     linear-gradient(155deg, #a3e635 0%, #3f6212 100%);
  --c-medecine:  linear-gradient(155deg, #22d3ee 0%, #0e7490 100%);
  --c-metier:    linear-gradient(155deg, #fbbf24 0%, #92400e 100%);
  --c-quotidien: linear-gradient(155deg, #fb7185 0%, #881337 100%);
  --c-cancers:   linear-gradient(155deg, #c084fc 0%, #581c87 100%);
  --c-infections: linear-gradient(155deg, #f97316 0%, #7c2d12 100%);
  --c-monde:     linear-gradient(155deg, #64748b 0%, #1e293b 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Indispensable : une règle d'auteur qui pose display (ici .overlay { display: grid })
   bat la feuille du navigateur qui applique display:none à [hidden]. Sans ce reset,
   les overlays restent visibles en permanence malgré leur attribut hidden. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.screen { display: none; position: fixed; inset: 0; }
.screen.is-active { display: block; }

/* ═══════════════════ ACCUEIL ═══════════════════ */

#screen-home {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(255, 45, 111, .22), transparent 60%),
    radial-gradient(900px 600px at 95% 110%, rgba(56, 189, 248, .16), transparent 60%),
    var(--bg);
}

.home-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 5vh, 56px) clamp(16px, 5vw, 24px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-head { text-align: center; max-width: 640px; }

.skull {
  font-size: clamp(44px, 11vw, 76px);
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(255, 45, 111, .45));
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

.home-head h1 {
  font-size: clamp(42px, 12vw, 84px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
  margin-top: 8px;
  background: linear-gradient(100deg, #fff 10%, #ff8fb0 55%, #ff2d6f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: clamp(14px, 3.6vw, 18px);
  font-weight: 500;
}

.home-body { width: 100%; max-width: 720px; margin-top: clamp(24px, 5vh, 44px); }

.pitch {
  text-align: center;
  font-size: clamp(15px, 4vw, 18px);
  color: var(--ink-dim);
  line-height: 1.55;
  margin-bottom: clamp(24px, 5vh, 40px);
}
.pitch strong { color: var(--ink); font-weight: 800; }

.section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 26px 0 12px;
}

.modes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .modes { grid-template-columns: 1fr 1fr; } }

.mode-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border: 2px solid rgba(255, 255, 255, .07);
  transition: border-color .18s, transform .18s, background .18s;
}
.mode-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .2); }
.mode-card.is-selected {
  border-color: var(--accent);
  background: linear-gradient(160deg, rgba(255, 45, 111, .18), rgba(255, 45, 111, .04));
}
.mode-emo { font-size: 28px; line-height: 1; }
.mode-title { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.mode-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.mode-count { font-size: 12px; color: var(--ink-faint); font-weight: 700; margin-top: 2px; }

.decks { display: flex; flex-wrap: wrap; gap: 8px; }

.deck-chip {
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 2px solid rgba(255, 255, 255, .07);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .16s, background .16s, color .16s;
}
.deck-chip:hover { border-color: rgba(255, 255, 255, .22); }
.deck-chip.is-selected { border-color: var(--ink); background: var(--ink); color: #0b0b12; }
.deck-chip small { font-weight: 600; opacity: .6; margin-left: 5px; }

.play {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(100deg, #ff2d6f, #ff7a45);
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 10px 32px rgba(255, 45, 111, .32);
  transition: transform .14s, box-shadow .14s;
}
.play:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 45, 111, .45); }
.play:active { transform: translateY(1px); }

.best-line {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-dim);
  font-weight: 600;
}
.best-line b { color: var(--ink); }

.home-links {
  margin-top: 32px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.linkish {
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
.linkish:hover { color: var(--ink); }

/* ═══════════════════ JEU ═══════════════════ */

#screen-game { background: var(--bg); }

.hud {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  backdrop-filter: blur(8px);
  font-size: 16px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.hud-btn:hover { background: rgba(0, 0, 0, .55); }

.hud-mode {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-score { text-align: right; line-height: 1; }
.hud-score-val {
  display: block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .7);
}
.hud-score-best {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.board { position: absolute; inset: 0; overflow: hidden; }

.track {
  display: flex;
  flex-direction: row;
  width: 150%;
  height: 100%;
  transform: translateX(0);
}
.track.is-sliding { transition: transform .62s cubic-bezier(.65, 0, .2, 1); }
.track.is-shifted { transform: translateX(-33.3333%); }

.panel {
  position: relative;
  flex: 0 0 33.3333%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 76px 20px 28px;
  text-align: center;
  overflow: hidden;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(0, 0, 0, .45) 100%);
  pointer-events: none;
}

.panel[data-cat="maladies"]  { background: var(--c-maladies); }
.panel[data-cat="risques"]   { background: var(--c-risques); }
.panel[data-cat="accidents"] { background: var(--c-accidents); }
.panel[data-cat="animaux"]   { background: var(--c-animaux); }
.panel[data-cat="nature"]    { background: var(--c-nature); }
.panel[data-cat="transport"] { background: var(--c-transport); }
.panel[data-cat="sport"]     { background: var(--c-sport); }
.panel[data-cat="medecine"]  { background: var(--c-medecine); }
.panel[data-cat="metier"]    { background: var(--c-metier); }
.panel[data-cat="quotidien"] { background: var(--c-quotidien); }
.panel[data-cat="cancers"]   { background: var(--c-cancers); }
.panel[data-cat="infections"] { background: var(--c-infections); }
.panel[data-cat="monde"]     { background: var(--c-monde); }

.p-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  width: 100%;
}

.p-emo {
  font-size: clamp(40px, 8vh, 68px);
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .4));
}

.p-nom {
  font-size: clamp(21px, 4.6vh, 34px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.p-expo {
  font-size: clamp(12px, 1.7vh, 14px);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.p-valwrap { margin-top: 4px; min-height: 1px; }

.p-val {
  font-size: clamp(34px, 7.4vh, 62px);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}
.p-val.is-pop { animation: pop .34s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { 0% { transform: scale(1) } 45% { transform: scale(1.14) } 100% { transform: scale(1) } }

.p-unit {
  font-size: clamp(11px, 1.6vh, 13.5px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  margin-top: 6px;
}

.p-mystery {
  font-size: clamp(34px, 7.4vh, 62px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(255, 255, 255, .5);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

.p-choice {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(340px, 92%);
  margin-top: 14px;
}

.p-hint {
  font-size: clamp(11.5px, 1.6vh, 13.5px);
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.p-hint b { font-weight: 800; color: #fff; }

.p-btns { display: flex; flex-direction: column; gap: 9px; }

.p-btns .p-btn { flex: 1; }

.p-btn {
  padding: 14px 18px;
  border-radius: 999px;
  border: 2.5px solid rgba(255, 255, 255, .92);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .14);
  backdrop-filter: blur(4px);
  transition: transform .13s, background .16s, color .16s;
}
.p-btn:hover { background: #fff; color: #111; transform: scale(1.035); }
.p-btn:active { transform: scale(.98); }
.p-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.p-reveal {
  margin-top: 14px;
  width: min(440px, 94%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s .1s, transform .3s .1s;
}
.p-reveal.is-shown { opacity: 1; transform: none; }

.p-note {
  font-size: clamp(13px, 1.95vh, 15.5px);
  line-height: 1.5;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
  background: rgba(0, 0, 0, .3);
  padding: 12px 14px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.p-src {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}
.p-src-link {
  display: inline-block;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .78);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .3);
  transition: color .15s, text-decoration-color .15s;
}
.p-src-link:hover { color: #fff; text-decoration-color: #fff; }
.p-src-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }

.p-verdict {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.4);
  font-size: clamp(72px, 19vh, 160px);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
}
/* le tampon frappe fort, tient une demi-seconde, puis disparaît complètement :
   sinon il masque le nom et le chiffre, c'est-à-dire tout ce qu'on veut lire */
.p-verdict.is-shown { animation: stamp 1.35s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes stamp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(-14deg); }
  17%  { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(4deg); }
  27%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  55%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
}

.vs {
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 3px solid rgba(255, 255, 255, .92);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
}
.flash.is-good { background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, .55), transparent 70%); animation: flash .55s ease-out; }
.flash.is-bad  { background: radial-gradient(circle at 50% 50%, rgba(239, 68, 68, .6), transparent 70%); animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: 0 } 22% { opacity: 1 } 100% { opacity: 0 } }

.board.is-wrong { animation: shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px) }
  20%, 80% { transform: translateX(4px) }
  30%, 50%, 70% { transform: translateX(-7px) }
  40%, 60% { transform: translateX(7px) }
}

@media (min-width: 768px) {
  .p-btns { flex-direction: row; gap: 10px; }
}

/* mobile : empilement vertical.
   Chaque carte ne dispose que de la moitié de la hauteur d'écran, et elle doit y
   loger l'emoji, le nom, le chiffre, deux boutons et la note. Tout est donc
   dimensionné en vh et la note est tronquée plutôt que de déborder. */
@media (max-width: 767px) {
  .track { flex-direction: column; width: 100%; height: 150%; transform: translateY(0); }
  .track.is-shifted { transform: translateY(-33.3333%); }
  .panel { flex: 0 0 33.3333%; width: 100%; height: auto; padding: 14px 14px; }
  .panel:first-child { padding-top: 62px; }
  .p-in { gap: 5px; }
  .p-emo { font-size: clamp(24px, 5vh, 42px); }
  .p-nom { font-size: clamp(17px, 3.2vh, 25px); }
  .p-expo { font-size: clamp(10px, 1.5vh, 12.5px); }
  .p-val, .p-mystery { font-size: clamp(26px, 5.4vh, 44px); }
  .p-unit { font-size: clamp(9.5px, 1.4vh, 12px); margin-top: 4px; }
  .p-choice { margin-top: 8px; gap: 7px; width: min(360px, 100%); }
  .p-btns { flex-direction: row; gap: 8px; }
  .p-btn { flex: 1; padding: 11px 6px; font-size: 14px; letter-spacing: .03em; }
  .p-reveal { margin-top: 9px; }
  .p-note {
    font-size: clamp(11.5px, 1.75vh, 13.5px);
    line-height: 1.42;
    padding: 9px 11px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .p-src { font-size: 9.5px; margin-top: 5px; }
  .p-verdict { font-size: clamp(56px, 15vh, 104px); }
  .vs { width: 46px; height: 46px; font-size: 13.5px; }
}

/* téléphones courts : on sacrifie la source et une ligne de note plutôt que
   de laisser le contenu passer sous le bord de la carte */
@media (max-width: 767px) and (max-height: 700px) {
  .p-hint { display: none; }
  .p-note { -webkit-line-clamp: 3; }
  .p-src { display: none; }
  .p-emo { font-size: clamp(20px, 4.4vh, 32px); }
}

/* écran de bureau bas de plafond */
@media (min-width: 768px) and (max-height: 700px) {
  .panel { padding-top: 62px; }
  .p-note { -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ═══════════════════ FIN DE PARTIE + MODALES ═══════════════════ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(6, 6, 12, .82);
  backdrop-filter: blur(10px);
  animation: fadeIn .26s ease-out;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.over-card, .modal-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: min(88vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-soft);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  padding: clamp(22px, 5vw, 34px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.over-card { text-align: center; }
.over-emo { font-size: 54px; line-height: 1; }
.over-card h2 {
  font-size: clamp(28px, 7vw, 38px);
  font-weight: 900;
  letter-spacing: -.035em;
  margin-top: 6px;
}
.over-detail { margin-top: 10px; color: var(--ink-dim); font-size: 15px; line-height: 1.55; }
.over-detail b { color: var(--ink); }

.over-scores {
  display: flex;
  justify-content: center;
  gap: 42px;
  margin: 24px 0 18px;
}
.over-scores .big {
  display: block;
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.over-scores .lbl {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.over-fact {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, .05);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  text-align: left;
}

.over-actions { margin-top: 22px; display: grid; gap: 9px; }
.over-actions .play { margin-top: 0; }

.ghost {
  padding: 13px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, .16);
  font-size: 14.5px;
  font-weight: 700;
  transition: border-color .16s, background .16s;
}
.ghost:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .05); }

.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.modal-close:hover { background: rgba(255, 255, 255, .2); }

.modal-card h2 {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: 14px;
  padding-right: 40px;
}
.modal-card h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 22px 0 8px;
}
.modal-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); margin-bottom: 12px; }
.modal-card p strong { color: var(--ink); }
.modal-card a { color: #ff8fb0; }
.modal-card .fine-print { font-size: 13px; opacity: .6; margin-top: 20px; }
.modal-card code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px;
  background: rgba(255, 255, 255, .08);
  padding: 1px 5px;
  border-radius: 5px;
}

.src-list { list-style: none; }
.src-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.src-list .s-nom { font-size: 14px; font-weight: 700; }
.src-list .s-src { font-size: 11.5px; color: var(--ink-faint); display: block; margin-top: 2px; }
.src-list .s-link { color: #ff8fb0; text-decoration: underline; text-underline-offset: 2px; }
.src-list .s-link:hover { color: #ffd0dd; }
.src-list .s-dom { opacity: .65; white-space: nowrap; }
.src-list .s-val {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.fatal { padding: 40px; color: var(--ink); font-family: var(--font); }
.fatal h1 { font-size: 26px; font-weight: 900; margin-bottom: 10px; }
.fatal p { color: var(--ink-dim); font-size: 15px; }