/* DEATH EVENTUALLY
   Layout: a single column of sticker-cards on lavender "bone" paper; the hero is a tombstone
   with a draining hourglass beside it. Chunky ink outlines + hard offset shadows, marigold
   (the flower of the dead) and embalmer pink as the two accents. */
:root {
  --bg: #f1edf7;
  --surface: #ffffff;
  --surface-2: #e9e3f2;
  --ink: #1f1830;
  --ink-soft: #6b6080;
  --line: #d5cce3;
  --accent: #ff4f7b;
  --accent-ink: #ffffff;
  --marigold: #ffb020;
  --marigold-ink: #2a1a00;
  --good: #11a176;
  --bad: #e2364f;
  --shadow: #1f1830;
  --blob-a: rgba(255, 79, 123, 0.22);
  --blob-b: rgba(255, 176, 32, 0.24);
  --blob-c: rgba(120, 92, 220, 0.16);
  --glass: rgba(241, 237, 247, 0.82);

  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 22px;
  --radius-sm: 12px;
  --btn-radius: var(--radius-sm); /* buttons and chips: brutal slabs with the text fields' corners */
  --g-surface: rgba(255, 255, 255, 0.5); --g-sheen: rgba(255, 255, 255, 0.55); --g-blur: blur(12px) saturate(1.6);
  --border: 2px solid var(--ink);
  --pop: 4px 4px 0 var(--shadow);
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #120f1a; --surface: #1c1727; --surface-2: #272038; --ink: #f3eefa; --ink-soft: #a79dbb; --line: #3a3150;
    --accent: #ff6a90; --accent-ink: #1a0710; --marigold: #ffc24a; --marigold-ink: #2a1a00; --good: #3cd39e; --bad: #ff5c70;
    --shadow: #000000; --blob-a: rgba(255, 106, 144, 0.16); --blob-b: rgba(255, 194, 74, 0.12); --blob-c: rgba(140, 110, 255, 0.18);
    --glass: rgba(18, 15, 26, 0.82); --g-surface: rgba(34, 27, 50, 0.5); --g-sheen: rgba(243, 238, 250, 0.12); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #120f1a; --surface: #1c1727; --surface-2: #272038; --ink: #f3eefa; --ink-soft: #a79dbb; --line: #3a3150;
  --accent: #ff6a90; --accent-ink: #1a0710; --marigold: #ffc24a; --marigold-ink: #2a1a00; --good: #3cd39e; --bad: #ff5c70;
  --shadow: #000000; --blob-a: rgba(255, 106, 144, 0.16); --blob-b: rgba(255, 194, 74, 0.12); --blob-c: rgba(140, 110, 255, 0.18);
  --glass: rgba(18, 15, 26, 0.82); --g-surface: rgba(34, 27, 50, 0.5); --g-sheen: rgba(243, 238, 250, 0.12); color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-body);
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--glass); }

/* ---------- Ambient blobs ---------- */
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); animation: drift 26s ease-in-out infinite alternate; }
.blobs i:nth-child(1) { background: var(--blob-a); top: -18vmax; left: -12vmax; }
.blobs i:nth-child(2) { background: var(--blob-b); top: 30vh; right: -20vmax; animation-duration: 32s; animation-delay: -8s; }
.blobs i:nth-child(3) { background: var(--blob-c); bottom: -24vmax; left: 20vw; animation-duration: 38s; animation-delay: -16s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vmax, 4vmax) scale(1.08); }
  100% { transform: translate(-4vmax, 8vmax) scale(0.95); }
}

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; font-variation-settings: "wdth" 80; line-height: 0.98; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 750; font-variation-settings: "wdth" 85; line-height: 1.08; }
h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.eyebrow { font: 600 0.7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); margin: 0 0 10px; }
.lede { font-size: 0.925rem; color: var(--ink-soft); max-width: 60ch; margin: 12px 0 0; }
.soft { color: var(--ink-soft); }
.small { font-size: 0.735rem; }
a { color: var(--accent); }

/* ---------- Shell ---------- */
main {
  max-width: 1080px; margin: 0 auto; padding-block: 20px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-block: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--ink);
}
/* Logo: a geometric hourglass mark + a two-weight wordmark. Hovering flips the hourglass. */
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand-mark { width: 32px; height: 32px; flex: none; transition: transform 0.7s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(180deg); }
.bm-bg { fill: var(--ink); }
.bm-glass { fill: var(--bg); }
.bm-sand { fill: var(--marigold); }
.bm-grain { fill: var(--accent); animation: grain 2.4s ease-in infinite; }
@keyframes grain { 0%, 30% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(6px); opacity: 0; } 100% { opacity: 0; } }
.brand-word {
  font: 400 1.18rem/1 var(--font-display); font-variation-settings: "wdth" 80; letter-spacing: 0.06em; white-space: nowrap;
}
.brand-word b { font-weight: 800; letter-spacing: 0.02em; }
.brand-word i { font-style: normal; font-weight: 800; color: var(--accent); }
nav { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--btn-radius); border: 2px solid var(--ink); }
nav .link {
  font: 600 0.755rem var(--font-body); background: none; border: 0; color: var(--ink-soft);
  padding: 6px 14px; border-radius: var(--btn-radius); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap;
}
nav .link.active { background: var(--ink); color: var(--bg); }

/* ---------- Views & reveal motion ---------- */
.view { display: flex; flex-direction: column; gap: 22px; }
.view-enter .reveal { animation: rise 0.7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
::view-transition-old(root) { animation: 0.25s ease both fade-out; }
::view-transition-new(root) { animation: 0.35s ease both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Cards & controls ---------- */
.card {
  background: var(--surface); border: var(--border); border-radius: var(--radius); box-shadow: var(--pop);
  padding: 22px; min-width: 0; position: relative;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 0.735rem; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
input, select {
  background: var(--surface-2); color: var(--ink); border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 12px; font: 500 1rem var(--font-body); width: 100%; /* 16px: smaller makes phones zoom on focus */ transition: border-color 0.2s, background 0.2s;
}
input:hover, select:hover { border-color: var(--line); }
input:focus, select:focus { outline: none; border-color: var(--accent); background: var(--surface); }
input[type="range"] { padding: 0; background: none; border: 0; accent-color: var(--accent); height: 28px; }
input:disabled { opacity: 0.5; }
input.invalid { border-color: var(--bad); animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

button { font: 600 0.82rem var(--font-body); cursor: pointer; border-radius: var(--btn-radius); padding: 10px 20px; color: var(--ink); }
/* Brutal slabs in frosted glass: square, heavy outline, deep offset shadow, condensed caps, and a
   see-through fill that blurs whatever sits behind it. */
button.primary, button.ghost, .danger-btn {
  border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--shadow);
  font: 800 0.92rem var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.04em;
  background-image: linear-gradient(180deg, var(--g-sheen), transparent 60%);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background-color 0.2s;
}
button.primary { background-color: color-mix(in srgb, var(--accent) 90%, transparent); color: var(--accent-ink); }
button.ghost { background-color: var(--g-surface); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button.primary:hover, button.ghost:hover, .danger-btn:hover:not(:disabled) { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--shadow); }
button.primary:active, button.ghost:active, .danger-btn:active:not(:disabled) { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--shadow); }
/* Press glow (see initPressFx): blurred light just behind the button, which sits above it. */
:is(button.primary, button.ghost, .danger-btn, .chip > span, .icon-btn, .counter button) { position: relative; z-index: 1; }
.saver-btn, .find-btn { z-index: 1; }
.press-glow { position: absolute; z-index: 0; pointer-events: none; opacity: 0; will-change: transform, filter, opacity; }
button:disabled { opacity: 0.6; cursor: progress; transform: none !important; }
.btn-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Chips (checkboxes) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { flex-direction: row; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  padding: 7px 12px; border-radius: var(--btn-radius); border: 2px solid var(--ink); background-color: var(--g-surface);
  background-image: linear-gradient(180deg, var(--g-sheen), transparent 60%); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  color: var(--ink); font: 700 0.8rem var(--font-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s var(--ease-out);
}
.chip:hover span { box-shadow: 2px 2px 0 var(--shadow); }
.chip input:checked + span { background-color: color-mix(in srgb, var(--bad) 75%, transparent); color: #fff; transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--shadow); }
.chip.good input:checked + span { background-color: color-mix(in srgb, var(--good) 75%, transparent); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Segmented control */
.units-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.735rem; font-weight: 600; color: var(--ink-soft); }
.segmented { display: inline-flex; background: var(--surface-2); border: 2px solid var(--ink); border-radius: var(--btn-radius); padding: 3px; }
.segmented label { flex-direction: row; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { padding: 5px 14px; border-radius: var(--btn-radius); color: var(--ink-soft); transition: all 0.25s var(--ease-out); }
.segmented input:checked + span { background: var(--ink); color: var(--bg); }
.segmented input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }

/* Stickers */
.sticker {
  position: absolute; font: 800 0.8rem/1.05 var(--font-display); text-transform: uppercase; text-align: center;
  background: var(--marigold); color: var(--marigold-ink); border: var(--border); border-radius: 99px;
  padding: 10px 12px; box-shadow: 2px 2px 0 var(--shadow); pointer-events: none;
}
.sticker small { font: 600 0.6rem var(--font-mono); text-transform: lowercase; }
.sticker-flat { position: static; display: inline-block; transform: rotate(-3deg); margin-right: 8px; }

/* ---------- Wizard ---------- */
.intake-head { padding-top: 12px; }
.wizard-progress { display: flex; flex-direction: column; gap: 12px; }
.wizard-bar { height: 10px; background: var(--surface-2); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; }
#wizard-fill { height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--marigold) 10px 20px); background-size: 28px 28px; transition: width 0.6s var(--ease-out); animation: stripes 1s linear infinite; }
@keyframes stripes { to { background-position: 28px 0; } }
.wizard-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; }
.wizard-steps button {
  font: 600 0.78rem var(--font-mono); padding: 5px 11px; border: 2px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: all 0.2s var(--ease-out);
}
.wizard-steps button:disabled { cursor: not-allowed; opacity: 0.5; }
.wizard-steps button.done { border-color: var(--ink); color: var(--ink); }
.wizard-steps button[aria-current="step"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.wizard { position: relative; }
.step {
  border: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--pop);
  padding: 26px 22px 22px; margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.step legend {
  font: 800 1.5rem var(--font-display); font-variation-settings: "wdth" 82; padding: 4px 14px;
  background: var(--marigold); color: var(--marigold-ink); border: var(--border); border-radius: 99px; transform: rotate(-2deg);
}
.step.in-right { animation: step-in-right 0.45s var(--ease-out) both; }
.step.in-left { animation: step-in-left 0.45s var(--ease-out) both; }
@keyframes step-in-right { from { opacity: 0; transform: translateX(48px) rotate(1.5deg); } }
@keyframes step-in-left { from { opacity: 0; transform: translateX(-48px) rotate(-1.5deg); } }
.range-label input { margin-top: 4px; }
.range-ends { display: flex; justify-content: space-between; font: 500 0.72rem var(--font-mono); color: var(--ink-soft); }
.wizard-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.wizard-quip { flex: 1; min-width: 160px; font-style: italic; color: var(--ink-soft); font-size: 0.795rem; }
.wizard-quip.swap { animation: fade-up 0.4s var(--ease-out); }
/* Save sits on its own row, full width, under Back / Next. */
#wizard-submit { order: 10; flex: 1 0 100%; justify-content: center; text-align: center; padding-block: 14px; font-size: 0.875rem; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Edit Expiration: live meter ---------- */
/* Section headers only show when editing; in the wizard each step shows its legend instead. */
.acc-btn { display: none; }
.acc-inner { display: flex; flex-direction: column; gap: 16px; }
.live-meter { display: none; }
.live .wizard-progress, .live #wizard-back, .live #wizard-next, .live .wizard-quip { display: none; }
.live .live-meter {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; position: sticky; z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + 76px); margin: 4px 0 18px; padding: 14px 18px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 2.5px solid var(--ink); border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius-sm); box-shadow: 5px 5px 0 var(--accent);
}
.live-meter small { display: block; font: 600 0.6rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.7; }
.lm-age { display: block; font: 800 3.4rem/0.9 var(--font-display); font-stretch: 72%; font-variant-numeric: tabular-nums; }
.lm-left { font: 600 0.75rem var(--font-mono); opacity: 0.8; text-align: right; }
.lm-delta { position: absolute; right: 14px; top: 10px; font: 800 0.85rem var(--font-mono); padding: 2px 8px; border-radius: 8px; opacity: 0; pointer-events: none; }
.lm-delta.up { background: var(--good); color: #04140e; }
.lm-delta.down { background: var(--bad); color: #fff; }
.lm-delta.show { animation: lm-delta 1.6s ease-out both; }
@keyframes lm-delta {
  0% { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  15%, 75% { opacity: 1; transform: none; filter: blur(0); }
  100% { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}
.live-meter.flash-up { animation: lm-flash-up 0.8s ease-out; }
.live-meter.flash-down { animation: lm-flash-down 0.8s ease-out; }
@keyframes lm-flash-up { 0% { transform: scale(1.03); box-shadow: 5px 5px 0 var(--good); } }
@keyframes lm-flash-down { 0% { transform: scale(1.03); box-shadow: 5px 5px 0 var(--bad); } }

.live .wizard { display: flex; flex-direction: column; gap: 10px; }
.live .step { padding: 0; gap: 0; border-width: 2px; border-radius: var(--radius-sm); box-shadow: 3px 3px 0 var(--shadow); overflow: hidden;
  background: var(--g-surface); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); transition: box-shadow 0.25s var(--ease-out), background 0.25s; }
.live .step.open { background: var(--surface); box-shadow: 5px 5px 0 var(--shadow); }
.live .step legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
.live .acc-btn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; text-align: left; border: 0; border-radius: 0;
  background: none; color: var(--ink); padding: 14px 16px; cursor: pointer; font: inherit;
}
.acc-btn b { font: 800 1.02rem var(--font-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.02em; }
.acc-btn .acc-sum { grid-column: 1; font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-btn i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 800 1.2rem var(--font-mono); font-style: normal; transition: rotate 0.3s var(--ease-out); }
.live .step.open .acc-btn i { rotate: 45deg; }
.live .step.open .acc-sum { white-space: normal; }
.acc-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.live .acc-panel { height: 0; overflow: hidden; }
.live .step.open .acc-panel { height: auto; }
.live .acc-inner { padding: 2px 16px 20px; }
.live #wizard-submit { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .lm-delta.show, .live-meter.flash-up, .live-meter.flash-down { animation: none; } .lm-delta.show { opacity: 1; } }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 22px; align-items: stretch; }
.tombstone {
  position: relative; text-align: center; background: var(--surface); border: var(--border); box-shadow: 6px 6px 0 var(--shadow);
  border-radius: 220px 220px var(--radius) var(--radius); padding: 30px 22px 26px; min-width: 0;
}
/* Countdown: split-flap tiles. Sized off the tombstone's width (container units) so it never overflows. */
.tombstone { container-type: inline-size; scroll-margin-top: 84px; }
/* Years get their own giant row; days/hrs/min/sec sit underneath. */
.ticker { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3cqi, 26px); perspective: 700px; }
.ticker-rest { display: flex; justify-content: center; gap: clamp(8px, 2.4cqi, 22px); }
.ticker .unit { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ticker .num {
  display: inline-flex; gap: 0.08em; font: 800 clamp(1.4rem, 5.4cqi, 3.2rem)/1 var(--font-mono);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.unit-years .num { font-size: clamp(3.6rem, 19cqi, 9.5rem); gap: 0.06em; }
.unit-years .d { box-shadow: 0 0.05em 0 var(--shadow), 0 0 0 0.03em var(--ink); }
.unit-years small { font-size: 0.82rem; letter-spacing: 0.3em; color: var(--accent); margin-top: 12px; }
.ticker.mod-gain .unit-years .d { animation: year-gain 1.6s var(--ease-out); }
.ticker.mod-loss .unit-years .d { animation: year-loss 1.6s ease-out; }
@keyframes year-gain { 20% { transform: translateY(-0.12em) scale(1.08); background: var(--good); box-shadow: 0 0 0.4em var(--good); } }
@keyframes year-loss { 10%, 30% { transform: translateX(-0.06em) rotate(-2deg); background: var(--bad); } 20%, 40% { transform: translateX(0.06em) rotate(2deg); background: var(--bad); } }
.ticker .d {
  position: relative; display: inline-grid; place-items: center; padding: 0.16em 0.1em 0.12em;
  min-width: 0.92em; border-radius: 0.16em; background: var(--ink); color: var(--bg);
  box-shadow: 0 0.07em 0 var(--shadow), inset 0 -0.5em 0 rgba(255, 255, 255, 0.06); transform-origin: 50% 50%;
}
.ticker .d::after { content: ""; position: absolute; inset: 50% 0 auto; height: 0.04em; min-height: 1px; background: var(--bg); opacity: 0.45; }
.ticker .unit-years .d { background: var(--accent); color: var(--accent-ink); }
.ticker .unit-secs .d { background: var(--marigold); color: var(--marigold-ink); }
.ticker .d.roll { animation: flap 0.5s var(--ease-out); }
@keyframes flap { 0% { transform: rotateX(-95deg); filter: brightness(1.6); } 60% { transform: rotateX(12deg); } 100% { transform: none; } }
.ticker small { font: 700 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); margin-top: 10px; }
.ticker.scramble .d { background: var(--marigold); color: var(--marigold-ink); }

/* A bar that sweeps across once per second, like a second hand. */
.sweep { height: 4px; max-width: 520px; margin: 18px auto 0; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.sweep i { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 99px; transform-origin: left; transform: scaleX(0); }
.sweep i.go { animation: sweep 1s linear forwards; }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.death-date { margin: 16px 0 12px; font-size: 0.955rem; }

/* What's left, in units you can feel. */
.life-left { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 14px; max-width: 640px; }
.life-left span {
  display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1 1 120px;
  padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2);
  font: 600 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft);
}
.life-left b { font: 800 0.895rem var(--font-mono); letter-spacing: -0.02em; color: var(--ink); text-transform: none; font-variant-numeric: tabular-nums; }
.life-left .beat b { display: inline-block; animation: heartbeat 0.83s ease-in-out infinite; }
@keyframes heartbeat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.12); color: var(--accent); } 25% { transform: scale(1.02); } }
.death-date strong { font-family: var(--font-display); font-weight: 750; }
.lifebar { height: 14px; background: var(--surface-2); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; max-width: 520px; margin: 0 auto 10px; }
#lifebar-fill {
  height: 100%; width: 0; border-right: 2px solid var(--ink);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, var(--marigold) 8px 16px);
  background-size: 22px 22px; animation: stripes 1.4s linear infinite; transition: width 1.2s var(--ease-out);
}
.tombstone p.small { margin: 4px auto; max-width: 52ch; }

.hourglass-wrap {
  position: relative; display: grid; place-items: center; background: var(--surface); border: var(--border);
  border-radius: var(--radius); box-shadow: var(--pop); padding: 18px 18px 26px;
}
.hourglass { width: 100%; max-width: 140px; height: auto; animation: hg-tilt 7s ease-in-out infinite; }
@keyframes hg-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.hg-frame { fill: var(--ink); }
.hg-glass { fill: var(--surface-2); stroke: var(--ink); stroke-width: 3; }
.hg-sand { fill: var(--marigold); transition: y 1.2s var(--ease-out), height 1.2s var(--ease-out); }
.hg-stream { stroke: var(--marigold); stroke-width: 3; stroke-dasharray: 4 6; animation: sand-fall 0.6s linear infinite; }
@keyframes sand-fall { to { stroke-dashoffset: -10; } }
.sticker-pct { bottom: -14px; left: 50%; transform: translateX(-50%) rotate(-4deg); white-space: nowrap; background: var(--accent); color: var(--accent-ink); }

/* Marquee */
.marquee { overflow: hidden; border: var(--border); border-radius: 99px; background: var(--ink); color: var(--bg); box-shadow: var(--pop); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span { font: 700 0.735rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 0; white-space: nowrap; }
.marquee-track span::after { content: "✦"; color: var(--marigold); margin: 0 18px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Verdict ---------- */
.verdict { display: flex; flex-direction: column; gap: 12px; }
.verdict-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.verdict h2 .w { display: inline-block; animation: word-in 0.5s var(--ease-out) both; animation-delay: calc(var(--w) * 45ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(0.4em) rotate(4deg); } }
.today-delta {
  font: 800 1.5rem var(--font-mono); white-space: nowrap; padding: 8px 14px; border-radius: 99px; border: var(--border);
  background: var(--surface-2); box-shadow: 3px 3px 0 var(--shadow); transform: rotate(2deg);
}
.today-delta.good { background: var(--good); color: #fff; }
.today-delta.bad { background: var(--bad); color: #fff; }
.today-delta.bump { animation: bump 0.4s var(--ease-out); }
@keyframes bump { 40% { transform: rotate(-3deg) scale(1.12); } }
#verdict-roast { margin: 0; font-size: 0.925rem; max-width: 70ch; }
.tip { margin: 0; padding: 10px 14px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 4px solid var(--marigold); }
.tip:empty, #verdict-roast:empty { display: none; }
.fresh { animation: fade-up 0.5s var(--ease-out) both; }
.ml-items { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ml-items li { border-radius: 99px; padding: 4px 11px; font-size: 0.82rem; font-weight: 600; border: 2px solid; }
.ml-items.fresh li { animation: pop-in 0.35s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 30ms); }
.ml-items li.good { border-color: var(--good); color: var(--good); }
.ml-items li.bad { border-color: var(--bad); color: var(--bad); }
.ml-items li b { font-family: var(--font-mono); font-size: 0.78rem; }
@keyframes pop-in { from { opacity: 0; transform: scale(0.7); } }
#roast-btn { align-self: flex-start; }

/* ---------- Log ---------- */
.log-form { display: flex; flex-direction: column; gap: 12px; }
.counter { display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px 84px 40px; align-items: center; gap: 8px; font-weight: 600; }
.counter .ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); }
.counter .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.counter button {
  padding: 0; height: 40px; border: var(--border); background: var(--surface); font: 700 1.2rem var(--font-mono);
  box-shadow: 2px 2px 0 var(--shadow); transition: transform 0.12s var(--ease-out), box-shadow 0.12s, background 0.2s;
}
.counter button:hover { background: var(--marigold); color: var(--marigold-ink); }
.counter button:active { transform: translate(2px, 2px) scale(0.92); box-shadow: 0 0 0 var(--shadow); }
.counter .c-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counter output { text-align: center; font: 700 0.775rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter output.bump { animation: bump-out 0.35s var(--ease-out); }
@keyframes bump-out { 40% { transform: scale(1.35); color: var(--accent); } }

/* ---------- Meals ---------- */
.meal-form { display: flex; flex-direction: column; gap: 10px; }
.dropzone {
  flex-direction: row; align-items: center; gap: 14px; cursor: pointer; color: var(--ink);
  border: 2px dashed var(--ink-soft); border-radius: var(--radius); padding: 18px; transition: all 0.25s var(--ease-out);
  background: var(--surface-2);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); border-style: solid; transform: rotate(-1deg) scale(1.01); }
.dropzone input { display: none; }
.dropzone span { display: flex; flex-direction: column; }
.dropzone b { font: 700 0.925rem var(--font-display); }
.dropzone small { color: var(--ink-soft); font-weight: 500; }
.dz-ico { width: 44px; height: 44px; padding: 9px; border-radius: 14px; background: var(--accent); stroke: var(--accent-ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dropzone.busy .dz-ico { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.manual summary { cursor: pointer; color: var(--ink-soft); font-size: 0.755rem; font-weight: 600; margin-top: 4px; }
.manual-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.manual-form .chip { align-self: flex-start; }
.manual-form button { align-self: flex-start; }
.meals { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.meals li { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 40px 12px 14px; position: relative; }
.meals li.new { animation: slide-in 0.55s var(--ease-out) both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-24px) rotate(-2deg); } }
.meals li.meals-empty { background: none; border: 2px dashed var(--line); text-align: center; color: var(--ink-soft); padding: 28px 16px; }
.meals li.meals-empty b { display: block; font: 700 0.925rem var(--font-display); color: var(--ink); }
.meals li .quip { font-style: italic; color: var(--ink-soft); font-size: 0.755rem; margin: 6px 0 0; }
.meals li .macro { font: 500 0.74rem var(--font-mono); color: var(--ink-soft); margin-top: 2px; }
.meals li .x { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--ink-soft); padding: 4px 8px; }
.meals li .x:hover { color: var(--bad); }
.score { font: 700 0.78rem var(--font-mono); padding: 2px 8px; border-radius: 99px; color: #fff; background: var(--good); }
.score.mid { background: var(--marigold); color: var(--marigold-ink); }
.score.low { background: var(--bad); }

/* ---------- Environment ---------- */
.env-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.env-stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; }
.env-stat b { display: block; font: 800 1.45rem var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.env-stat span { color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; }
.env-actions { margin-top: 14px; flex-wrap: wrap; }

/* ---------- History ---------- */
@keyframes grow-y { from { transform: scaleY(0); } }

/* ---------- Impacts ---------- */
.impacts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.impacts li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 72px; gap: 14px; align-items: center; }
.impacts .label { font-weight: 600; }
.impacts .label small { display: block; color: var(--ink-soft); font-size: 0.78rem; font-weight: 500; }
.impacts .track { height: 12px; background: var(--surface-2); border-radius: 99px; position: relative; }
.impacts .track::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; border-left: 2px solid var(--line); }
.impacts .fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.impacts .fill.good { background: var(--good); left: 50%; transform-origin: left; }
.impacts .fill.bad { background: var(--bad); right: 50%; transform-origin: right; }
.view-enter .impacts .fill { animation: grow-x 0.8s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 50ms + 400ms); }
@keyframes grow-x { from { transform: scaleX(0); } }
.impacts .yrs { text-align: right; font: 700 0.775rem var(--font-mono); font-variant-numeric: tabular-nums; }
.yrs.good { color: var(--good); }
.yrs.bad { color: var(--bad); }

.disclaimer { color: var(--ink-soft); font-size: 0.82rem; text-align: center; max-width: 70ch; margin: 8px auto 0; }
.disclaimer-tag { color: var(--accent); font-weight: 800; }
.disclaimer a, .legal-links a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.legal-links { margin: 0; }

/* ---------- Account menu ---------- */
.topbar-right { display: flex; align-items: center; gap: 10px; }
.signed-out .topbar-right { display: none; }
.me { position: relative; }
.me-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: var(--border); background: var(--surface); overflow: hidden; box-shadow: 2px 2px 0 var(--shadow); transition: transform 0.2s var(--ease-out); }
.me-btn:hover { transform: rotate(-8deg) scale(1.06); }
.me-btn .avatar { width: 100%; height: 100%; display: block; }
.me-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: var(--border); border-radius: var(--radius-sm); box-shadow: var(--pop); padding: 8px;
  animation: menu-in 0.25s var(--ease-out);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
.me-who { display: flex; flex-direction: column; margin: 4px 8px 8px; padding-bottom: 8px; border-bottom: 2px solid var(--line); min-width: 0; }
.me-who span { font-size: 0.8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.me-menu button { text-align: left; border: 0; background: none; border-radius: 8px; padding: 9px 10px; font-size: 0.795rem; }
.me-menu button:hover { background: var(--surface-2); }
.me-menu button[data-act="signout"] { color: var(--bad); }

/* ---------- Login ---------- */
.login { min-height: calc(100vh - 140px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.login h1 { font-size: clamp(2.8rem, 8vw, 5.4rem); }
.login .hl, .oath .hl { color: var(--accent); }
.login-card {
  display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: var(--border);
  border-radius: var(--radius); box-shadow: 6px 6px 0 var(--shadow); padding: 28px; min-width: 0;
}
.login-mark { width: 56px; height: 56px; animation: mark-flip 6s var(--ease-out) infinite; }
@keyframes mark-flip { 0%, 80% { transform: rotate(0); } 90%, 100% { transform: rotate(180deg); } }
.login-email { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.login-email b { font: 700 0.925rem var(--font-mono); overflow-wrap: anywhere; }
.big-btn { padding: 14px 22px; font-size: 0.925rem; }

/* ---------- Avatar maker ---------- */
.avatar { display: block; }
.avatar-builder { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: start; }
.ab-side { display: flex; flex-direction: column; gap: 12px; align-items: center; position: sticky; top: 90px; }
.ab-preview { width: 180px; height: 180px; border-radius: 50%; border: var(--border); box-shadow: var(--pop); overflow: hidden; background: var(--surface-2); }
.ab-preview .avatar { width: 100%; height: 100%; }
.ab-preview.pop { animation: av-pop 0.35s var(--ease-out); }
.ab-preview.spin { animation: av-spin 0.6s var(--ease-out); }
@keyframes av-pop { 40% { transform: scale(1.07) rotate(-3deg); } }
@keyframes av-spin { from { transform: rotate(-360deg) scale(0.6); } }
.ab-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ab-row { display: flex; flex-direction: column; gap: 6px; }
.ab-row > span { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.ab-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-opts .opt { padding: 6px 12px; border: 2px solid var(--line); background: var(--surface); font-size: 0.725rem; text-transform: capitalize; transition: all 0.15s var(--ease-out); }
.ab-opts .opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.swatch { width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid var(--line); transition: transform 0.15s var(--ease-out); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); transform: scale(1.08); }


/* ---------- Screensaver ---------- */
/* Top-bar slideshow button, with a "live" dot */
.saver-btn {
  position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: var(--btn-radius);
  border: 2px solid var(--ink); background: linear-gradient(180deg, var(--g-sheen), transparent 60%), var(--g-surface); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.saver-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); }
.saver-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Top-bar Together button: a locator that pings, opening Together as a pop-over */
.find-btn {
  position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: var(--btn-radius);
  border: 2px solid var(--ink); background: linear-gradient(180deg, var(--g-sheen), transparent 60%), var(--g-surface); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.find-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); }
.find-btn[aria-expanded="true"] { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }
.find-btn svg { position: relative; z-index: 1; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.find-dot { fill: var(--accent); stroke: none; animation: find-blink 1.8s ease-in-out infinite; }
.find-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; animation: find-ping 1.8s var(--ease-out) infinite; }
@keyframes find-ping { 0% { transform: scale(0.35); opacity: 0.9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes find-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.tg-pop {
  position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px)); width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius);
}
.tg-pop > .card { margin: 0; }
.tg-pop.open { animation: tg-pop-in 0.3s var(--ease-out); transform-origin: calc(100% - 70px) 0; }
@keyframes tg-pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) {
  .find-ping, .find-dot { animation: none; }
  .tg-pop.open { animation: none; }
}
@keyframes live-dot { 50% { transform: scale(0.6); opacity: 0.6; } }
.icon-btn { width: 36px; height: 36px; padding: 0; border: var(--border); background: var(--surface); font-size: 0.775rem; box-shadow: 2px 2px 0 var(--shadow); }
.saver { position: relative; border: var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--pop); cursor: pointer; user-select: none; -webkit-user-select: none; }
.saver-stage { height: 270px; position: relative; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 24px 20px 34px; text-align: center; container-type: inline-size;
}
.slide > * { margin: 0; }
.slide-ink { background: var(--ink); color: var(--bg); }
.slide-accent { background: var(--accent); color: var(--accent-ink); }
.slide-marigold { background: var(--marigold); color: var(--marigold-ink); }
.slide-good { background: var(--good); color: #fff; }
.slide-bad { background: var(--bad); color: #fff; }
.slide-paper { background: var(--surface); color: var(--ink); }
.slide-lilac { background: #b9a8e8; color: #1f1830; }
.s-eyebrow { font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.8; }
.s-huge { font: 800 clamp(2.4rem, 17cqi, 5.6rem)/0.95 var(--font-display); font-variation-settings: "wdth" 78; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.s-huge small { font-size: 0.35em; font-weight: 600; }
.s-date { font-size: clamp(2rem, 13cqi, 4.6rem); }
.s-big { font: 750 clamp(1.2rem, 7cqi, 2rem) var(--font-display); }
.s-ico { margin: 0; } .s-ico svg.ln { width: clamp(36px, 12cqi, 64px); height: clamp(36px, 12cqi, 64px); stroke-width: 1.5; }
.s-mono { font: 800 clamp(1.4rem, 10cqi, 3rem) var(--font-mono); letter-spacing: -0.03em; }
.s-sub { font-size: 0.825rem; opacity: 0.9; max-width: 32ch; }
.s-beat { animation: heartbeat 0.83s ease-in-out infinite; }
.s-ring { position: relative; width: 150px; height: 150px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--used) 100; animation: ring-draw 1.4s var(--ease-out) both; }
@keyframes ring-draw { from { stroke-dasharray: 0 100; } }
.s-face { position: absolute; inset: 18px; border-radius: 50%; overflow: hidden; border: var(--border); }
.s-face .avatar, .s-face .xray { position: absolute; inset: 0; width: 100%; height: 100%; }
.s-face .xray { animation: xray 2.4s steps(1) infinite; }
@keyframes xray { 0%, 62% { opacity: 0; } 64%, 66% { opacity: 1; } 68%, 72% { opacity: 0; } 74%, 90% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Entrances, rotated per slide */
.fx-zoom > * { animation: fx-zoom 0.7s var(--ease-out) both; }
.fx-rise > * { animation: fx-rise 0.7s var(--ease-out) both; }
.fx-spin > * { animation: fx-spin 0.8s var(--ease-out) both; }
.fx-slide > * { animation: fx-slide 0.7s var(--ease-out) both; }
.slide > *:nth-child(2) { animation-delay: 90ms; }
.slide > *:nth-child(3) { animation-delay: 180ms; }
.slide > *:nth-child(4) { animation-delay: 270ms; }
.slide.back > * { animation-name: fx-slide-back; }
@keyframes fx-zoom { from { opacity: 0; transform: scale(0.6); filter: blur(6px); } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes fx-spin { from { opacity: 0; transform: rotate(-12deg) scale(0.8); } }
@keyframes fx-slide { from { opacity: 0; transform: translateX(60px); } }
@keyframes fx-slide-back { from { opacity: 0; transform: translateX(-60px); } }
.saver-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.saver-dots span { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: 0.35; transition: all 0.3s var(--ease-out); color: #fff; mix-blend-mode: difference; }
.saver-dots span.on { width: 18px; opacity: 1; }
.saver-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0, 0, 0, 0.15); }
.saver-timer i { display: block; height: 100%; background: var(--marigold); transform-origin: left; transform: scaleX(0); }
.saver-timer i.run { animation: sweep 4.8s linear forwards; }
.saver.paused .saver-timer i { animation: none; }

/* Fullscreen */
.saver-overlay { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); gap: 12px; }
.saver-overlay.open { animation: fade-in 0.5s ease both; }
.saver-overlay .blobs { position: absolute; z-index: 0; }
.saver-big { flex: 1; z-index: 1; }
.saver-big .saver-stage { height: 100%; min-height: 0; }
.saver-big .s-huge { font-size: clamp(3rem, 22cqi, 9rem); }
.saver-big .s-ring { width: min(62vw, 300px); height: min(62vw, 300px); }
.saver-big .s-face { inset: 26px; }
.saver-hint { z-index: 1; text-align: center; margin: 0; font: 600 0.75rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

/* ---------- Expectancy modifiers ---------- */
.mods { margin: 0 auto 14px; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.mods-head { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.mods-head b { font-size: 0.825rem; letter-spacing: 0; }
.mods-head b.gain, .mods-list .gain b { color: var(--good); }
.mods-head b.loss, .mods-list .loss b { color: var(--bad); }
.mods-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mods-list li { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: var(--btn-radius); border: 2px solid var(--line); background: var(--surface); font-size: 0.82rem; cursor: default; transition: border-color 0.2s; }
.mods-list li:hover, .mods-list li:focus-visible { border-color: var(--ink); outline: none; }
.mods-list li.new { animation: mod-chip-in 0.7s var(--ease-out) both; }
@keyframes mod-chip-in { 0% { transform: scale(0.2) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.12) rotate(3deg); opacity: 1; } }
/* Names collapse to nothing and slide open on hover/focus, or all at once with "Show names". */
.mods-list .mod-name {
  min-width: 0; max-width: 0; opacity: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: max-width 0.4s var(--ease-out), opacity 0.25s ease, margin 0.3s;
}
.mods-list li:hover .mod-name, .mods-list li:focus-within .mod-name, .mods.show-names .mod-name { max-width: 30ch; opacity: 1; }
.mods-toggle { padding: 2px 10px; border: 1.5px solid var(--line); background: var(--surface); font: 600 0.68rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.mods-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mods-list li b { font-family: var(--font-mono); white-space: nowrap; }
.mods-list button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-soft); font-size: 0.8rem; flex: none; }
.mods-list button:hover { background: var(--bad); color: #fff; }

/* The burst over the tombstone when a modifier lands */
.mod-burst { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 6; border-radius: inherit; overflow: hidden; }
.mod-burst .burst-num {
  font: 800 clamp(2.6rem, 15cqi, 7rem)/1 var(--font-display); font-variation-settings: "wdth" 78; letter-spacing: -0.02em;
  padding: 0.12em 0.4em; border-radius: 0.3em; border: var(--border); box-shadow: 6px 6px 0 var(--shadow); color: #fff;
  animation: burst 1.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.mod-burst .burst-num small { display: block; font: 700 0.16em var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; text-align: center; margin-top: 0.3em; }
.mod-burst.gain .burst-num { background: var(--good); }
.mod-burst.loss .burst-num { background: var(--bad); }
.mod-burst .flash { position: absolute; inset: 0; animation: flash 1s ease-out both; }
.mod-burst.gain .flash { background: radial-gradient(circle at 50% 45%, rgba(17, 161, 118, 0.45), transparent 65%); }
.mod-burst.loss .flash { background: radial-gradient(circle at 50% 45%, rgba(226, 54, 79, 0.5), transparent 65%); }
.mod-burst .shard { position: absolute; left: 50%; top: 45%; width: 10px; height: 10px; border-radius: 2px; animation: shard 1.1s cubic-bezier(0.1, 0.8, 0.3, 1) both; }
.mod-burst.gain .shard { background: var(--good); }
.mod-burst.loss .shard { background: var(--bad); }
@keyframes burst { 0% { transform: scale(0.2) rotate(-8deg); opacity: 0; } 18% { transform: scale(1.15) rotate(2deg); opacity: 1; } 30% { transform: scale(1) rotate(0); } 75% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-60%) scale(0.85); opacity: 0; } }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes shard { from { transform: translate(-50%, -50%) rotate(0); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)); opacity: 0; } }
.tombstone.hit-loss { animation: tomb-shake 0.6s ease-out; }
.tombstone.hit-gain { animation: tomb-rise 0.8s var(--ease-out); }
@keyframes tomb-shake { 15%, 45%, 75% { transform: translateX(-6px) rotate(-0.6deg); } 30%, 60%, 90% { transform: translateX(6px) rotate(0.6deg); } }
@keyframes tomb-rise { 35% { transform: translateY(-8px); box-shadow: 10px 14px 0 var(--shadow); } }
#death-date.changed, #death-age.changed { animation: date-flash 1.6s ease-out; border-radius: 4px; }
@keyframes date-flash { 0%, 40% { background: var(--marigold); color: var(--marigold-ink); } }

/* ---------- Overtime ---------- */
.overtime-fx { position: absolute; inset: 0; pointer-events: none; z-index: 7; border-radius: inherit; overflow: hidden; }
.tombstone.overtime .ticker .d { background: var(--good); color: #fff; }
.tombstone.overtime #years-label { color: var(--good); }
.tombstone.overtime #tomb-eyebrow { color: var(--good); }
.tombstone.overtime .life-left i::before { content: "bonus "; }
.tombstone.overtime .sweep i { background: var(--good); }
.tombstone.times-up { animation: times-up 1.5s ease-out; }
@keyframes times-up {
  0% { box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 0 rgba(226, 54, 79, 0); }
  10%, 30%, 50% { transform: translateX(-5px) rotate(-0.5deg); box-shadow: 6px 6px 0 var(--shadow), inset 0 0 80px 10px rgba(226, 54, 79, 0.45); }
  20%, 40%, 60% { transform: translateX(5px) rotate(0.5deg); }
  100% { transform: none; }
}
.ticker.ot-start .d { animation: ot-pop 0.7s var(--ease-out) both; }
.ticker.ot-start .ticker-rest .d { animation-delay: 0.15s; }
@keyframes ot-pop { 0% { transform: scale(0.6) rotateX(80deg); } 60% { transform: scale(1.15); box-shadow: 0 0 0.6em var(--good); } }
.ot-stamp {
  position: absolute; left: 50%; top: 40%; translate: -50% -50%; text-align: center; white-space: nowrap;
  font: 800 clamp(2.6rem, 14cqi, 6.4rem)/0.9 var(--font-display); font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--good); border: 0.07em solid var(--good); border-radius: 0.14em; padding: 0.1em 0.3em 0.14em; background: var(--surface);
  box-shadow: 0.08em 0.08em 0 var(--shadow); animation: stamp 3.6s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.ot-stamp small { display: block; font: 700 0.15em var(--font-mono); letter-spacing: 0.16em; margin-top: 0.5em; color: var(--ink); }
@keyframes stamp {
  0% { transform: scale(3.2) rotate(-18deg); opacity: 0; }
  12% { transform: scale(0.92) rotate(-7deg); opacity: 1; }
  18% { transform: scale(1.04) rotate(-8deg); }
  24%, 82% { transform: scale(1) rotate(-8deg); opacity: 1; }
  100% { transform: scale(0.4) rotate(-8deg) translateY(-40%); opacity: 0; }
}
.ot-badge {
  position: absolute; top: 12px; left: 50%; translate: -50% 0; padding: 5px 12px; border-radius: 99px; border: var(--border);
  background: var(--good); color: #fff; font: 800 0.78rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--shadow); transform: rotate(-4deg); animation: badge-in 0.5s 3.2s var(--ease-out) both;
}
@keyframes badge-in { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.petal {
  position: absolute; top: -24px; width: 14px; height: 18px; background: var(--marigold); border-radius: 80% 0 80% 0;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.12); animation: petal-fall 3.4s linear both;
}
.petal:nth-child(3n) { background: #ff8a1f; width: 11px; height: 14px; }
.petal:nth-child(4n) { background: var(--accent); }
@keyframes petal-fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--sway), 260px) rotate(calc(var(--spin) / 2)); }
  100% { transform: translate(calc(var(--sway) * -0.5), 560px) rotate(var(--spin)); opacity: 0; }
}

/* Apply button in a séance answer */
.br-apply { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; }
.br-apply b { font-family: var(--font-mono); }
.br-apply.applied { background: transparent; color: #f3eefa; border-color: rgba(243, 238, 250, 0.5); }

/* ---------- Split-flap numbers (screensaver, séance) ---------- */
.flipnum { display: flex; justify-content: center; align-items: center; margin: 0; font: 800 var(--fit, 14cqi)/1 var(--font-mono); letter-spacing: 0; }
.flipnum.sm { font-size: min(var(--fit, 9cqi), 9cqi); }
.ff {
  position: relative; display: inline-block; width: 0.8em; height: 1.18em; margin: 0 0.035em;
  perspective: 3.2em; border-radius: 0.12em; box-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.35);
}
.ff > span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 0.12em;
  background: var(--tile-bg, var(--ink)); color: var(--tile-fg, var(--bg)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ff-t, .ff-ft { clip-path: inset(0 0 50% 0); }
.ff-b, .ff-fb { clip-path: inset(50% 0 0 0); }
.ff-t, .ff-ft { background-image: linear-gradient(rgba(255, 255, 255, 0.08), transparent); }
.ff-ft { z-index: 2; transform-origin: 50% 50%; animation: ff-down 0.24s cubic-bezier(0.55, 0, 0.9, 0.4) both; }
.ff-fb { z-index: 3; transform-origin: 50% 50%; animation: ff-up 0.46s cubic-bezier(0.25, 1.6, 0.45, 1) both; }
.ff::after { content: ""; position: absolute; inset: calc(50% - 0.02em) 0 auto; height: 0.04em; min-height: 1px; background: rgba(0, 0, 0, 0.45); z-index: 4; }
@keyframes ff-down { from { transform: rotateX(0); } to { transform: rotateX(-90deg); filter: brightness(0.55); } }
@keyframes ff-up { from { transform: rotateX(90deg); filter: brightness(1.7); } to { transform: rotateX(0); } }
.ff-sep { display: inline-block; padding: 0 0.06em; font-size: 0.82em; opacity: 0.9; }
.slide-ink { --tile-bg: var(--bg); --tile-fg: var(--ink); }
.slide-accent, .slide-marigold, .slide-paper, .slide-lilac { --tile-bg: #1f1830; --tile-fg: #f3eefa; }
.slide-good, .slide-bad { --tile-bg: rgba(0, 0, 0, 0.3); --tile-fg: #fff; }
.slide-grave { background: #0d0a12; color: #f3eefa; --tile-bg: #f3eefa; --tile-fg: #0d0a12; }
.slide .flipnum { margin: 4px 0; }

/* ---------- Ask from beyond the grave ---------- */
.beyond {
  position: relative; overflow: hidden; border: var(--border); border-radius: var(--radius); box-shadow: var(--pop);
  padding: 26px 22px 22px; color: #f3eefa; display: flex; flex-direction: column; gap: 16px;
  background: radial-gradient(ellipse at 85% 0%, rgba(255, 176, 32, 0.22), transparent 55%),
              radial-gradient(ellipse at 0% 100%, rgba(140, 110, 255, 0.25), transparent 60%), #120e1a;
  --tile-bg: #f3eefa; --tile-fg: #120e1a;
}
.beyond::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06) 0 1px, transparent 2px) 0 0 / 22px 22px; animation: drift-dust 30s linear infinite; }
@keyframes drift-dust { to { background-position: 220px -440px; } }
.beyond > * { position: relative; }
.beyond .eyebrow { color: #b9a8e8; }
.beyond h2 { color: #f3eefa; font-size: clamp(1.7rem, 4.6vw, 2.6rem); }
.beyond-sub { margin: 8px 0 0; color: #c9c4d6; max-width: 56ch; }
.beyond-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.candles { display: flex; gap: 10px; align-items: flex-end; padding-top: 8px; flex: none; }
.candles i { position: relative; display: block; width: 12px; height: 34px; background: #eeeae4; border-radius: 3px 3px 2px 2px; }
.candles i:nth-child(2) { height: 46px; }
.candles i::before { content: ""; position: absolute; left: 50%; top: -16px; width: 10px; height: 16px; margin-left: -5px;
  background: radial-gradient(ellipse at 50% 70%, #fff6c8 0 25%, #ffb020 50%, rgba(255, 79, 123, 0.6) 75%, transparent 76%);
  border-radius: 50% 50% 45% 45%; animation: flicker 1.6s ease-in-out infinite alternate; transform-origin: 50% 100%; filter: drop-shadow(0 0 8px #ffb020); }
.candles i:nth-child(2)::before { animation-duration: 1.1s; }
.candles i:nth-child(3)::before { animation-duration: 1.9s; }
@keyframes flicker { 0% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(0.9, 1.08) rotate(2deg); } 100% { transform: scale(1.05, 0.95) rotate(-1deg); } }
.beyond-prompts { display: flex; flex-wrap: wrap; gap: 8px; }
.beyond-prompts.fresh .omen { animation: pop-in 0.4s var(--ease-out) both; }
.beyond-prompts .omen:nth-child(2) { animation-delay: 60ms; }
.beyond-prompts .omen:nth-child(3) { animation-delay: 120ms; }
.beyond-prompts .omen:nth-child(4) { animation-delay: 180ms; }
.omen {
  text-align: left; border: 1.5px solid rgba(243, 238, 250, 0.3); background: rgba(243, 238, 250, 0.06); color: #f3eefa;
  padding: 8px 14px; font-size: 0.755rem; font-weight: 500; transition: all 0.2s var(--ease-out);
}
.omen:hover { border-color: #ffb020; background: rgba(255, 176, 32, 0.14); transform: translateY(-2px) rotate(-1deg); }
.beyond-form { display: flex; flex-direction: column; gap: 10px; }
.beyond-form textarea {
  font: 500 0.925rem var(--font-body); color: #f3eefa; background: rgba(243, 238, 250, 0.08); border: 2px solid rgba(243, 238, 250, 0.25);
  border-radius: var(--radius-sm); padding: 12px 14px; resize: vertical; min-height: 56px; width: 100%;
}
.beyond-form textarea::placeholder { color: #8a8494; }
.beyond-form textarea:focus { outline: none; border-color: #ffb020; }
.beyond-form textarea.invalid { border-color: var(--bad); animation: shake 0.35s; }
.beyond-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
button.ghost-dark { background: transparent; color: #f3eefa; border-color: #f3eefa; box-shadow: 3px 3px 0 #000; }
.beyond .primary { box-shadow: 3px 3px 0 #000; border-color: #f3eefa; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.beyond-result { border-top: 1.5px dashed rgba(243, 238, 250, 0.25); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.beyond-result.rise-in > * { animation: fx-rise 0.6s var(--ease-out) both; }
.beyond-result.rise-in > *:nth-child(2) { animation-delay: 80ms; }
.beyond-result.rise-in > *:nth-child(3) { animation-delay: 700ms; }
.beyond-result.rise-in > *:nth-child(4) { animation-delay: 820ms; }
.beyond-result.rise-in > *:nth-child(5) { animation-delay: 940ms; }
.beyond-result.rise-in > *:nth-child(6) { animation-delay: 1060ms; }
.br-q { margin: 0; color: #c9c4d6; font-style: italic; }
.br-impact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.br-num { justify-content: flex-start; font-size: min(var(--fit, 12cqi), 4.2rem); }
.beyond-result.gain { --tile-bg: var(--good); --tile-fg: #fff; }
.beyond-result.loss { --tile-bg: var(--bad); --tile-fg: #fff; }
.br-unit { display: flex; flex-direction: column; font: 800 1.4rem/1.05 var(--font-display); font-variation-settings: "wdth" 80; text-transform: uppercase; }
.br-unit small { font: 600 0.72rem var(--font-mono); letter-spacing: 0.12em; color: #b9a8e8; }
.br-head { color: #f3eefa; font-size: 1.5rem; margin: 4px 0 0; }
.br-rundown { margin: 0; max-width: 70ch; color: #e6e1ef; }
.br-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: 600 0.78rem var(--font-mono); padding: 5px 11px; border-radius: 99px; border: 1.5px solid rgba(243, 238, 250, 0.3); }
.pill b { color: #ffb020; }
.conf-high { border-color: var(--good); color: #7ee8bf; }
.conf-medium { border-color: #ffb020; color: #ffd27a; }
.conf-low { border-color: #8a8494; color: #c9c4d6; }
.br-quip { margin: 0; font-style: italic; color: #ffd27a; }
.br-error { margin: 0; color: #ffb3bd; }
.seance { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0; color: #c9c4d6; }
.seance p { margin: 0; animation: blink 1.6s ease-in-out infinite; }
.ouija { position: relative; width: 180px; height: 70px; border-radius: 50%; border: 1.5px solid rgba(243, 238, 250, 0.25); background: radial-gradient(ellipse, rgba(255, 176, 32, 0.12), transparent 70%); }
.planchette { position: absolute; left: 50%; top: 50%; width: 30px; height: 36px; margin: -18px 0 0 -15px; background: #eeeae4;
  clip-path: polygon(50% 0, 100% 75%, 80% 100%, 20% 100%, 0 75%); animation: planchette 2.4s ease-in-out infinite; }
.planchette::after { content: ""; position: absolute; left: 50%; top: 52%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #120e1a; box-shadow: inset 0 0 0 2px #ffb020; }
@keyframes planchette { 0% { transform: translate(-60px, -6px) rotate(-14deg); } 25% { transform: translate(0, 10px) rotate(4deg); } 50% { transform: translate(60px, -6px) rotate(14deg); } 75% { transform: translate(0, -12px) rotate(-4deg); } 100% { transform: translate(-60px, -6px) rotate(-14deg); } }
.beyond-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.beyond-history:empty { display: none; }
.beyond-history button { width: 100%; display: flex; justify-content: space-between; gap: 12px; text-align: left; background: rgba(243, 238, 250, 0.05);
  border: 1px solid rgba(243, 238, 250, 0.15); border-radius: var(--radius-sm); color: #c9c4d6; font-weight: 500; font-size: 0.735rem; padding: 8px 12px; }
.beyond-history button:hover { border-color: #ffb020; color: #f3eefa; }
.beyond-history b { font-family: var(--font-mono); white-space: nowrap; }
.beyond-history b.gain { color: #7ee8bf; }
.beyond-history b.loss { color: #ff8a98; }

/* Glowing avatar eyes */
.glow-eye { animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 0.45; } }

/* ---------- Line icons (icons.js): same stroke style as the sprite ---------- */
svg.ln { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }

/* ---------- Segment pager: everything under the countdown swipes sideways ---------- */
.pager { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: 84px; min-height: calc(100svh - 84px - 92px); } /* a full screen, so it can always snap flush to the top */
.pager-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.pager-tabs {
  position: relative; display: flex; gap: 2px; padding: 0; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none;
}

/* Floating frosted-glass dock at the bottom of the screen; the page scrolls underneath it. */
.dock {
  position: fixed; z-index: 40; left: 50%; translate: -50% 0; bottom: max(14px, env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100% - 24px); display: flex; padding: 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: 0 12px 32px rgba(20, 10, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: dock-in 0.6s var(--ease-out) 0.3s both;
}
.dock[hidden] { display: none; }
@keyframes dock-in { from { opacity: 0; translate: -50% 24px; } }
.dock { transition: transform 0.5s var(--ease-out), opacity 0.4s ease; }
.dock.away { transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.dock .pager-ink { box-shadow: 0 4px 12px rgba(20, 10, 40, 0.25); }
#view-dashboard { padding-bottom: 92px; } /* room to scroll the last card clear of the dock */
.pager-tabs::-webkit-scrollbar { display: none; }
.pager-tabs [role="tab"] {
  position: relative; z-index: 1; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; background: none; padding: 7px 10px; border-radius: 99px;
  font: 600 0.74rem var(--font-body); color: var(--ink-soft); white-space: nowrap; transition: color 0.3s;
}
.pager-tabs [role="tab"] svg.ln { width: 18px; height: 18px; }
.pager-tabs [role="tab"][aria-selected="true"] { color: var(--bg); }
.pager-ink { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 60px; border-radius: 99px; background: var(--ink);
  transition: translate 0.45s var(--ease-out), width 0.45s var(--ease-out); }
.pager-hint { margin: 0; flex: none; font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); transition: opacity 0.4s; }
.pager-hint span { display: inline-block; animation: nudge 1.4s ease-in-out infinite; }
.pager-hint.gone { opacity: 0; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.pager-track {
  display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; /* snapping is done in motion.js */
  overscroll-behavior-x: contain; scrollbar-width: none; transition: height 0.45s var(--ease-out);
  margin: 0 -10px; padding: 0 10px; scroll-padding: 0 10px; cursor: grab; outline: none;
}
.pager-track::-webkit-scrollbar { display: none; }
.pager-track:focus-visible { box-shadow: 0 0 0 3px var(--accent); border-radius: var(--radius); }
.seg {
  position: relative; flex: 0 0 100%; min-width: 0;
  padding: clamp(46px, 9vw, 86px) 0 12px; transform-origin: 50% 30%; will-change: opacity, scale;
}
.seg[hidden] { display: none; }
.seg > .card, .seg > .beyond { position: relative; z-index: 1; }
.seg-ghost {
  position: absolute; z-index: 0; left: 0; top: 0; pointer-events: none; user-select: none; white-space: nowrap;
  font: 800 clamp(3.6rem, 15vw, 8.4rem)/0.9 var(--font-display); font-variation-settings: "wdth" 75; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px var(--accent); opacity: 0.55; will-change: translate;
}
.seg h2, .seg h3 { will-change: translate; transition: letter-spacing 0.2s; }
.pager-foot { display: flex; justify-content: center; align-items: center; gap: 12px; }
.pager-arrow {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.2s, opacity 0.2s;
}
.pager-arrow:hover:not(:disabled) { border-color: var(--ink); }
.pager-arrow svg.ln { width: 16px; height: 16px; }
.pager-arrow:disabled { opacity: 0.3; cursor: default; }
.pager-dots { display: flex; gap: 7px; align-items: center; }
.pager-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background 0.3s, transform 0.3s; }
.pager-dots span.on { background: var(--ink); transform: scale(1.35); }
@media (max-width: 720px) {
  .dock { width: calc(100% - 24px); }
  .pager-tabs { overflow: hidden; }
  .pager-tabs [role="tab"] { flex: 1 1 0; min-width: 0; padding: 10px 0; }
  .pager-tabs .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pager-hint { display: none; }
}

/* ---------- Kinetic text ---------- */
.kinetic.armed .kw { display: inline-block; opacity: 0; translate: 0 0.7em; rotate: 6deg; filter: blur(4px);
  transition: opacity 0.5s ease, translate 0.7s var(--ease-out), rotate 0.7s var(--ease-out), filter 0.5s ease; transition-delay: calc(var(--k) * 70ms); }
.kinetic.armed.in .kw { opacity: 1; translate: 0 0; rotate: 0deg; filter: none; }

/* Hero eases back as it scrolls away (motion.js sets --hero-p) */
.unit-years { scale: calc(1 - var(--hero-p, 0) * 0.2); transform-origin: 50% 0; transition: scale 0.1s linear; }
.blobs i, [data-speed] { will-change: translate; }

/* ---------- Clean slate ---------- */
.slate-link { align-self: flex-start; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--ink-soft); font: 600 0.735rem var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
.slate-link:hover { color: var(--bad); }
.me-menu button[data-act="slate"] { color: var(--ink); }
.slate-modal {
  /* Centred when it fits, scrollable when it doesn't (margin: auto on the card does both). */
  position: fixed; inset: 0; z-index: 70; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
  background: rgba(18, 15, 26, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.slate-modal.open { animation: fade-in 0.25s ease both; }
.slate-modal.open .slate-card { animation: card-drop 0.45s var(--ease-out) both; }
@keyframes card-drop { from { transform: translateY(24px) rotate(-1.5deg) scale(0.96); opacity: 0; } }
.slate-card {
  margin: auto; width: min(100%, 480px); display: flex; flex-direction: column; gap: 14px; background: var(--surface);
  border: var(--border); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--shadow); padding: 24px;
}
.slate-card h2 { font-size: 2rem; }
.slate-card > p { margin: 0; }
.slate-options { display: flex; flex-direction: column; gap: 8px; }
.slate-opt { flex-direction: row; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); transition: border-color 0.2s, background 0.2s; }
.slate-opt:has(input:checked) { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.slate-opt input { width: auto; margin-top: 3px; accent-color: var(--bad); }
.slate-opt span { display: flex; flex-direction: column; gap: 2px; }
.slate-opt small { color: var(--ink-soft); font-weight: 500; font-size: 0.82rem; }
.slate-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.slate-hold { position: relative; overflow: hidden; background: var(--bad); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none; }
.slate-hold .hold-fill { position: absolute; inset: 0; background: #7a1222; transform-origin: left; transform: scaleX(0); transition: transform 0.2s ease; }
.slate-hold.holding .hold-fill { transform: scaleX(1); transition: transform 1.2s linear; }
.slate-hold .hold-label { position: relative; }
.slate-hold.holding { animation: hold-shake 0.12s linear infinite; }
@keyframes hold-shake { 50% { translate: 1px 0; } }

.upload-link { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer; color: var(--ink); font-weight: 600; font-size: 0.775rem; text-decoration: underline; text-underline-offset: 3px; }
.upload-link:hover { color: var(--accent); }
.upload-link input { display: none; }
.upload-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.cam-modal video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--border); border-radius: var(--radius-sm); background: #120f1a; }
.cam-modal #cam-note:empty { display: none; }
.cam-modal #cam-note b { display: block; color: var(--ink); margin-bottom: 6px; }
.cam-modal.blocked video { display: none; }
.cam-help { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.cam-modal #cam-retry:not([hidden]) ~ #cam-snap, .cam-modal:has(#cam-retry:not([hidden])) #cam-snap { display: none; }
/* Phones: a portrait viewfinder, with Snap as the big button on top of the rest. */
@media (max-width: 520px) {
  .cam-modal video { aspect-ratio: 3 / 4; max-height: 58vh; }
  .cam-modal .slate-actions { justify-content: center; }
  .cam-modal #cam-snap, .cam-modal #cam-retry { order: -1; flex-basis: 100%; }
  .cam-modal .slate-actions { gap: 6px; }
  .cam-modal .slate-actions .ghost { padding: 8px 12px; font-size: 0.82rem; }
}

/* ---------- Log: meals sit right under the drink counters ---------- */
.log-sub { margin: 18px 0 8px; font: 600 0.7rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); }
.log-meals { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--line); }
.log-meals .meals { margin-top: 10px; }

/* ---------- Calendar: progress day by day ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-head h3 { flex: 1; text-align: center; }
.cal-nav { flex: none; }
.cal-summary { text-align: center; margin: 6px 0 12px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-dow { text-align: center; font: 600 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); padding-bottom: 2px; }
.cal-day {
  position: relative; aspect-ratio: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 0; border: 2px solid transparent; border-radius: 12px; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent); font: 600 0.82rem var(--font-body); transition: transform 0.15s, border-color 0.2s;
}
.cal-day b { font-weight: 700; }
.cal-day small { font: 600 0.55rem var(--font-mono); opacity: 0.85; white-space: nowrap; }
.cal-day.good { background: color-mix(in srgb, var(--good) calc(var(--a) * 70%), var(--surface)); }
.cal-day.bad { background: color-mix(in srgb, var(--bad) calc(var(--a) * 70%), var(--surface)); }
.cal-day.future { opacity: 0.3; cursor: default; }
.cal-day.today { border-color: var(--ink); }
.cal-day[aria-pressed="true"] { border-color: var(--accent); transform: scale(1.06); z-index: 1; }
.cal-day:not(.future):hover { transform: scale(1.06); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 12px 0 0; }
.cal-legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: -4px; }
.cal-legend .sw.good { background: var(--good); }
.cal-legend .sw.bad { background: var(--bad); }
.cal-legend .sw.none { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.cal-detail { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.cal-detail:empty { display: none; }
.cal-detail h4 { margin: 0 0 6px; font: 700 0.875rem var(--font-display); display: flex; justify-content: space-between; gap: 8px; }
.cal-detail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.735rem; }
.cal-detail li { display: flex; justify-content: space-between; gap: 10px; }
.cal-detail .up { color: var(--good); font-weight: 700; }
.cal-detail .down { color: var(--bad); font-weight: 700; }
@media (max-width: 420px) { .cal-day small { display: none; } .cal-grid { gap: 4px; } }

/* ---------- Before you proceed (after sign-in) ---------- */
.oath {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--bg)), var(--bg) 70%);
}
.oath[hidden] { display: none; }
.oath-inner { width: min(100%, 560px); display: flex; flex-direction: column; gap: 18px; }
.oath-inner > * { margin: 0; animation: oath-rise 0.8s var(--ease-out) both; }
.oath-inner > :nth-child(2) { animation-delay: 0.08s; }
.oath-inner > :nth-child(3) { animation-delay: 0.2s; }
.oath-inner > :nth-child(4) { animation-delay: 0.36s; }
.oath-inner > :nth-child(5) { animation-delay: 0.52s; }
.oath-inner > :nth-child(6) { animation-delay: 0.6s; }
@keyframes oath-rise { from { opacity: 0; translate: 0 18px; filter: blur(6px); } }
.oath h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1; }
.oath-fine { color: var(--ink); line-height: 1.6; }
.oath-fine strong { color: var(--accent); }
.oath-purpose { padding: 18px 20px; border: var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 6px 6px 0 var(--shadow); }
.oath-purpose .eyebrow { margin-bottom: 8px; }
.oath-purpose blockquote { margin: 0; font: 700 clamp(1.25rem, 4.6vw, 1.6rem)/1.25 var(--font-display); letter-spacing: -0.01em; }
.oath .big-btn { align-self: stretch; }
.oath a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.oath.leaving { animation: oath-leave 0.5s ease both; }
@keyframes oath-leave { to { opacity: 0; filter: blur(8px); scale: 1.03; } }
@media (prefers-reduced-motion: reduce) { .oath-inner > *, .oath.leaving { animation: none; } }

/* ---------- Customize menu ---------- */
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 460px); overflow-y: auto; }
.menu-list li {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 4px; border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); transition: opacity 0.2s, border-color 0.2s, scale 0.15s;
}
.menu-list li.off { opacity: 0.5; border-style: dashed; }
.menu-list li.lifting { border-color: var(--accent); scale: 1.02; box-shadow: 0 8px 20px rgba(20, 10, 40, 0.18); position: relative; z-index: 2; }
.menu-list .ln { width: 20px; height: 20px; flex: none; }
.menu-list .mc-label { flex: 1; font-weight: 600; }
.menu-list button { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--btn-radius); background: none; color: var(--ink); cursor: pointer; }
.menu-list button:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.menu-list button:disabled { opacity: 0.25; cursor: default; background: none; }
.menu-list .mc-grip { cursor: grab; touch-action: none; color: var(--ink-soft); }
.menu-list .mc-eye[aria-pressed="false"] { color: var(--ink-soft); }
.menu-modal #menu-note:empty { display: none; }
.dock.pressing { scale: 0.97; transition: scale 0.4s ease; }

/* ---------- Account ---------- */
.account-modal label small { display: block; font-weight: 500; margin-top: 2px; }
.account-email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.account-email p { flex-basis: 100%; margin: 0; }
.account-row { display: flex; gap: 8px; margin-top: 6px; }
.account-row input { flex: 1; min-width: 0; }
.account-modal #account-note:empty { display: none; }
.account-danger { border-top: 1px solid var(--line); padding-top: 12px; }
.account-danger summary { cursor: pointer; color: var(--bad); font-weight: 700; font-size: 0.775rem; }
.account-danger[open] { display: flex; flex-direction: column; gap: 10px; }
.account-danger p { margin: 0; }
.account-warn { padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.danger-btn { align-self: flex-start; padding: 10px 18px; border-radius: var(--btn-radius); background-color: color-mix(in srgb, var(--bad) 85%, transparent); color: #fff; cursor: pointer; }
.danger-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Reaper Account ---------- */
.meal-quota { margin: 0; }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font-family: var(--font-body); font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
.reaper-price { font-size: 0.795rem; }
.reaper-price b { font: 700 1.3rem var(--font-display); }
.reaper-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.reaper-perks li { display: flex; gap: 12px; align-items: flex-start; }
.reaper-perks svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reaper-perks span { display: flex; flex-direction: column; gap: 2px; }
.reaper-perks small { color: var(--ink-soft); font-size: 0.82rem; }
.reaper-modal .slate-card > p:last-child:empty { display: none; }
.reaper-restore { align-self: flex-start; font-size: 0.725rem; color: var(--ink-soft); }

/* The eraser sweeps across the screen while the data is wiped underneath. */
.slate-wipe { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.slate-wipe .eraser {
  position: absolute; top: 0; bottom: 0; left: -150vw; width: 150vw;
  background: linear-gradient(90deg, transparent, var(--bg) 18%, var(--bg) 82%, transparent),
              repeating-linear-gradient(0deg, rgba(31, 24, 48, 0.05) 0 2px, transparent 2px 7px);
}
.slate-wipe.go .eraser { animation: erase 1.5s cubic-bezier(0.6, 0, 0.35, 1) both; }
@keyframes erase { from { transform: translateX(0); } to { transform: translateX(300vw); } }
.slate-word {
  position: absolute; left: 50%; top: 45%; translate: -50% -50%; margin: 0; white-space: nowrap;
  font: 800 clamp(2.8rem, 12vw, 7rem)/1 var(--font-display); font-variation-settings: "wdth" 78; color: var(--ink); opacity: 0;
}
.slate-wipe.go .slate-word { animation: slate-word 1.5s ease both; }
@keyframes slate-word { 25% { opacity: 0; transform: scale(0.9); } 45%, 62% { opacity: 1; transform: none; } 85%, 100% { opacity: 0; transform: scale(1.05); } }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .counter { grid-template-columns: 28px minmax(0, 1fr) 34px 70px 34px; gap: 6px; }
  .counter button { height: 34px; }
  .pager-hint { display: none; }
  .login { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; }
  .avatar-builder { grid-template-columns: 1fr; }
  .ab-side { position: static; }
  .hero { grid-template-columns: 1fr; }
  .hourglass-wrap { display: none; }
  .tombstone { border-radius: 150px 150px var(--radius) var(--radius); padding-top: 26px; }
}
@media (max-width: 560px) {
  .candles { display: none; }
  .br-unit { font-size: 0.975rem; }
  /* Stack the wordmark so the nav and avatar fit beside it. */
  .brand-word { display: flex; flex-direction: column; font-size: 0.735rem; line-height: 1.02; letter-spacing: 0.05em; }
  .topbar-right { gap: 6px; }
  .me-btn, .saver-btn, .find-btn { width: 36px; height: 36px; }
  .saver-btn svg { width: 19px; height: 19px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand { gap: 8px; }
  nav .link { padding: 6px 10px; font-size: 0.8rem; }
  .unit-years .num { font-size: 27cqi; }
  .ticker-rest { gap: 3cqi; }
  .ticker-rest .num { font-size: 7.6cqi; }
  .life-left span { flex-basis: 40%; }
  .verdict-head { flex-direction: column; }
  .impacts li { grid-template-columns: 1fr 64px; }
  .impacts .track { display: none; }
  .row { flex-wrap: wrap; }
  .row > * { flex: 1 1 130px; }
  .counter { grid-template-columns: 30px minmax(0, 1fr) 36px 76px 36px; gap: 6px; }
  .counter output { font-size: 0.8rem; }
  .brand-eventually { font-size: 0.62rem; }
}

/* Narrow phones: tighten the top bar so the slideshow button fits beside the wordmark. */
@media (max-width: 420px) {
  nav .link { padding: 6px 9px; font-size: 0.78rem; }
}
@media (max-width: 340px) {
  .brand-word { display: none; } /* logo mark only on the tiniest phones */
}
@media (max-width: 380px) {
  .brand { gap: 6px; }
  .brand-word { font-size: 0.74rem; letter-spacing: 0.03em; }
  .topbar-right { gap: 4px; }
  nav { padding: 3px; }
  nav .link { padding: 6px 8px; font-size: 0.76rem; }
}

/* ---------- Together ---------- */
.together { display: flex; flex-direction: column; gap: 14px; }
.tg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.tg-head h3 { margin-bottom: 4px; }
.tg-head .primary { flex: none; }
.tg-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.tg-list[hidden] { display: none; }
.tg-list button { flex: none; border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--btn-radius); padding: 7px 14px; font: 600 0.715rem var(--font-body); cursor: pointer; }
.tg-list button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.tg-body { display: flex; flex-direction: column; gap: 16px; }
.tg-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.tg-empty p { margin: 0; }
.tg-ghosts { display: flex; align-items: center; }
.tg-ghosts span { width: 64px; height: 64px; border-radius: 50%; border: var(--border); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.tg-ghosts span + span { margin-left: -14px; }
.tg-ghosts .q { font: 800 1.6rem var(--font-display); border-style: dashed; color: var(--ink-soft); animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(8deg) translateY(-3px); } }
.tg-ghosts svg, .tg-face svg { width: 100%; height: 100%; display: block; }

.tg-pair { display: flex; align-items: center; gap: 14px; }
.tg-faces { display: flex; align-items: center; flex: none; }
.tg-face { width: 58px; height: 58px; border-radius: 50%; border: var(--border); overflow: hidden; background: var(--surface-2); }
.tg-hg svg.ln { width: 16px; height: 16px; }
.tg-hg { font-size: 1.3rem; margin: 0 -6px; z-index: 1; background: var(--marigold); color: var(--marigold-ink); border: var(--border); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; animation: hg-flip 4s ease-in-out infinite; }
@keyframes hg-flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.tg-names { min-width: 0; flex: 1; }
.tg-names .eyebrow { margin-bottom: 6px; }
.tg-title { width: 100%; font: 700 1.25rem var(--font-display); border: 0; border-bottom: 2px dashed var(--line); background: transparent; color: var(--ink); padding: 2px 0 4px; }
.tg-title:focus { outline: none; border-bottom-color: var(--accent); }

.tg-time { border: var(--border); border-radius: 16px; padding: 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.tg-time p { margin: 0; }
.tg-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tg-big b { font: 800 clamp(2.6rem, 12vw, 3.6rem)/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--accent); }
.tg-big span { font-weight: 650; }
.tg-lines { position: relative; display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; }
.tg-line { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 3em; gap: 8px; align-items: center; font-size: 0.82rem; font-weight: 600; }
.tg-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-until { font: 600 0.72rem var(--font-mono); text-align: right; color: var(--ink-soft); }
.tg-track { height: 12px; border-radius: 99px; background: var(--surface); border: 1.5px solid var(--line); overflow: hidden; }
.tg-track i { display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: inherit; transform-origin: left; animation: grow-x 1s var(--ease-out) both; }
.tg-line.short .tg-track i { background: var(--bad); }
.tg-verdict { font-weight: 600; }

.tg-sec { display: flex; flex-direction: column; gap: 10px; }
.tg-sec h4 { margin: 0; font-size: 0.975rem; }
.tg-sec > p { margin: -4px 0 0; }
.tg-interests { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-int { display: inline-flex; gap: 6px; align-items: center; border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--btn-radius); padding: 6px 12px; font: 600 0.82rem var(--font-body); cursor: pointer; transition: transform 0.15s var(--ease-out), background 0.2s; }
.tg-int:hover { transform: translateY(-1px); }
.tg-int[aria-pressed="true"] { border-color: var(--ink); background: var(--marigold); color: var(--marigold-ink); box-shadow: 2px 2px 0 var(--shadow); }
.tg-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tg-counts li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); animation: pop-in 0.4s var(--ease-out) both; }
.tg-n b { font: 800 1.15rem var(--font-display); }
.tg-step { display: inline-flex; align-items: center; gap: 4px; font: 600 0.72rem var(--font-mono); }
.tg-step button, .g-btns button { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 0.875rem/1 var(--font-body); cursor: pointer; }
.tg-step span { min-width: 3.6em; text-align: center; }

.tg-goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tg-goal { border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.tg-goal.done { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
.tg-goal.done .g-title { text-decoration: line-through; text-decoration-thickness: 2px; }
.tg-goal.pop { animation: goal-pop 0.6s var(--ease-out); }
@keyframes goal-pop { 40% { transform: scale(1.04) rotate(-1deg); } }
.g-top { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.g-title { overflow-wrap: anywhere; }
.g-del { border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 0.775rem; padding: 4px; }
.g-del:hover { color: var(--bad); }
.g-check { align-self: flex-start; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); border-radius: var(--btn-radius); padding: 6px 14px; font: 700 0.8rem var(--font-body); cursor: pointer; }
.g-check[aria-pressed="true"] { background: var(--good); border-color: var(--good); color: #fff; }
.g-bar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.g-bar i { display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: inherit; transition: width 0.5s var(--ease-out); }
.tg-goal.done .g-bar i { background: var(--good); }
.g-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.g-count { font: 700 0.735rem var(--font-mono); }
.g-btns { display: inline-flex; gap: 6px; }
.g-btns button[data-act="inc"] { width: auto; padding: 0 12px; border-radius: var(--btn-radius); background: var(--ink); color: var(--surface); }
.g-btns button:disabled { opacity: 0.35; cursor: default; }
.g-pace { margin: 0; }
.tg-goal-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.tg-goal-form input, .tg-goal-form select { font: 500 0.825rem var(--font-body); border: 2px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--surface); color: var(--ink); min-width: 0; }
.tg-goal-form input:focus, .tg-goal-form select:focus { outline: none; border-color: var(--ink); }
.tg-goal-form .tg-times { display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 4px; margin: 0; font-weight: 700; }
.tg-times input { width: 4.6em; }
.tg-goal-form select { grid-column: 1; }
.tg-goal-form .primary { grid-column: 2; }
.tg-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-idea { border: 1.5px dashed var(--line); background: transparent; color: var(--ink-soft); border-radius: var(--btn-radius); padding: 5px 10px; font: 600 0.76rem var(--font-body); cursor: pointer; }
.tg-idea:hover { border-color: var(--ink); color: var(--ink); }
.tg-wait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.tg-wait .slate-link { align-self: center; }

.pair-card { gap: 12px; }
.pair-top { display: flex; justify-content: space-between; align-items: center; }
.pair-top .eyebrow { margin: 0; }
.pair-x { width: 34px; height: 34px; }
.pair-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--btn-radius); background: var(--surface-2); border: 2px solid var(--line); }
.pair-tabs button { border: 0; background: none; border-radius: var(--btn-radius); padding: 9px 8px; font: 700 0.715rem var(--font-body); color: var(--ink-soft); cursor: pointer; }
.pair-tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.pair-pane[hidden] { display: none; }
.pair-make { display: flex; flex-direction: column; gap: 8px; }
.pair-make[hidden] { display: none; }
.pair-make label { font-weight: 650; font-size: 0.775rem; }
.pair-make input:not([type=file]) { font: 500 0.875rem var(--font-body); border: 2px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--surface); color: var(--ink); }
.pair-make input:focus { outline: none; border-color: var(--ink); }
.pair-input { font: 700 1.5rem var(--font-mono) !important; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; }
.pair-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pair-scan { display: inline-flex; align-items: center; cursor: pointer; }
.pair-code-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.pair-code-box[hidden] { display: none; }
.pair-code-box p { margin: 0; }
.pair-code { display: flex; gap: 6px; justify-content: center; margin: 0; }
.pair-code span {
  width: 2.1ch; padding: 8px 0; text-align: center; font: 800 clamp(1.5rem, 7vw, 2rem)/1 var(--font-mono);
  background: var(--ink); color: var(--surface); border-radius: 8px; box-shadow: 2px 2px 0 var(--accent);
  animation: tile-in 0.5s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 70ms);
}
@keyframes tile-in { from { transform: rotateX(90deg); opacity: 0; } }
.pair-qr { width: min(220px, 62vw); aspect-ratio: 1; display: grid; place-items: center; border: var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.pair-qr svg { width: 100%; height: 100%; display: block; }
.pair-error { margin: 0; color: var(--bad); font-weight: 650; }
.pair-error[hidden] { display: none; }
@media (max-width: 420px) {
  .tg-head { flex-direction: column; }
  .tg-head .primary { align-self: stretch; }
}

/* ---------- Numb ---------- */
/* Numb: a small switch at the top of the tombstone's arch. The knob's eye closes when you go numb. */
.numb-switch {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 16px; /* in the flow: text can't slide under it */
  padding: 4px 4px 4px 12px; border: 1.5px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-soft);
  font: 700 0.62rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.4s;
}
.numb-switch:hover { color: var(--ink); border-color: var(--ink); }
.numb-switch:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ns-track { position: relative; width: 46px; height: 24px; border-radius: 99px; background: var(--surface-2); border: 1.5px solid var(--ink); overflow: hidden; }
.ns-track::before { /* black ink that floods in behind the knob */
  content: ""; position: absolute; inset: 0; background: #0c0c0d; border-radius: inherit; transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(.7, 0, .2, 1);
}
.ns-knob {
  position: absolute; top: 1px; left: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--ink); display: grid; place-items: center; transition: left 0.45s cubic-bezier(.4, 1.6, .5, 1), background 0.3s, color 0.3s;
}
.ns-knob svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ns-open, .ns-shut { transition: opacity 0.2s, transform 0.25s; transform-origin: 12px 12px; }
.ns-pupil { fill: currentColor; stroke: none; }
.ns-shut { opacity: 0; transform: scaleY(0.4); }
.numb-switch[aria-checked="true"] { background: #0c0c0d; border-color: #0c0c0d; color: #f2f2f2; }
.numb-switch[aria-checked="true"] .ns-track { border-color: #f2f2f2; }
.numb-switch[aria-checked="true"] .ns-track::before { transform: scaleX(1); }
.numb-switch[aria-checked="true"] .ns-knob { left: 23px; background: #f2f2f2; color: #0c0c0d; border-color: #f2f2f2; animation: ns-squash 0.45s ease; }
.numb-switch[aria-checked="true"] .ns-open { opacity: 0; transform: scaleY(0.1); }
.numb-switch[aria-checked="true"] .ns-shut { opacity: 1; transform: none; transition-delay: 0.15s; }
@keyframes ns-squash { 40% { scale: 1.35 0.8; } }
/* The idle eye blinks now and then, so it reads as an eye. */
.numb-switch[aria-checked="false"] .ns-open { animation: ns-blink 6s infinite; }
@keyframes ns-blink { 0%, 96%, 100% { transform: none; } 98% { transform: scaleY(0.1); } }

/* "GOING DARK": the screen goes black from the switch outward, the word flickers in over a flatline. */
.going-dark {
  position: fixed; inset: 0; z-index: 65; background: #050506; color: #f2f2f2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px; pointer-events: none; clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
}
.going-dark.play { animation: gd-spread 0.75s cubic-bezier(.7, 0, .3, 1) both; }
.going-dark.out { clip-path: none; animation: gd-out 0.6s ease both; }
@keyframes gd-spread { to { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); } }
@keyframes gd-out { to { opacity: 0; } }
/* Set exactly like the logo: condensed display face, bold first word, accent full stop. */
.gd-word {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.04em; text-transform: uppercase;
  font: 400 clamp(2.6rem, 13vw, 6rem)/0.92 var(--font-display); font-variation-settings: "wdth" 80; letter-spacing: 0.06em;
  opacity: 0;
}
.gd-word b { font-weight: 800; letter-spacing: 0.02em; }
.gd-word i { font-style: normal; font-weight: 800; color: var(--accent); }
.going-dark.play .gd-word { animation: gd-in 0.7s var(--ease-out) 0.35s both; }
@keyframes gd-in { from { opacity: 0; transform: scale(0.94); letter-spacing: 0.2em; } to { opacity: 1; transform: none; } }
.going-dark.out .gd-word { opacity: 1; animation: gd-leave 0.45s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes gd-leave { to { opacity: 0; transform: scale(1.04); } }

/* The rest of the app loses its colour behind the overlay. */
body > :not(.numb):not(.going-dark) { transition: filter 1.2s ease; }
html.numb-on body > :not(.numb):not(.going-dark) { filter: grayscale(1) brightness(0.55); }
html.numb-on { overflow: hidden; }

.numb {
  --n-bg: #0b0b0c; --n-ink: #ececec; --n-soft: #8a8a8f; --n-line: #262629; --n-bad: #ff5c70; --n-good: #9fe3c6;
  position: fixed; inset: 0; z-index: 60; background: var(--n-bg); color: var(--n-ink);
  display: flex; flex-direction: column; animation: numb-in 1.1s ease both; outline: none;
}
@keyframes numb-in { from { opacity: 0; } }
.numb.instant { animation: none; }
.numb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--n-line);
}
.numb-mark { font: 700 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.4em; color: var(--n-soft); }
.numb-off {
  font: 600 0.72rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--n-ink);
  background: transparent; border: 1px solid var(--n-line); border-radius: 99px; padding: 9px 14px; cursor: pointer;
}
.numb-off:hover, .numb-off:focus-visible { border-color: var(--n-ink); }
.numb-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px max(40px, env(safe-area-inset-bottom, 0px)); scroll-behavior: auto; }
.numb-scroll > * { max-width: 620px; margin-inline: auto; }
.numb-intro { padding: 14vh 0 12vh; }
.numb-kicker { font: 600 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--n-soft); margin: 0 0 14px; }
.numb-intro h2 { font: 300 clamp(2.4rem, 11vw, 4.6rem)/0.98 var(--font-display); letter-spacing: -0.04em; margin: 0 0 16px; color: var(--n-ink); }
.numb-sub { color: var(--n-soft); margin: 0; max-width: 34ch; }
.numb-h {
  font: 600 0.68rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.3em; color: var(--n-soft);
  margin: 0; padding: 26px 0 12px; border-top: 1px solid var(--n-line); position: sticky; top: 0; background: var(--n-bg); z-index: 1;
}
.numb-sec { margin-bottom: 8vh; }
.numb-item, .numb-intro { will-change: opacity, filter, transform; transform-origin: left center; }
.numb-item { padding: 9vh 0; position: relative; --glow: 0; --glow-c: 236, 236, 236; }
.numb-item.bad { --glow-c: 255, 92, 112; }
.numb-item.good { --glow-c: 159, 227, 198; }
.numb-item::before {
  content: ""; position: absolute; z-index: -1; left: -8%; right: 10%; top: 4vh; bottom: 4vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow-c), 0.16), transparent 75%); opacity: var(--glow);
}
.numb-n { text-shadow: 0 0 calc(var(--glow) * 34px) rgba(var(--glow-c), calc(var(--glow) * 0.5)); }
.numb-ico { display: block; color: var(--n-soft); margin-bottom: 10px; }
.numb-ico svg { width: 28px; height: 28px; }
.numb-sec { position: relative; z-index: 0; }
.numb-n {
  font: 200 clamp(3.4rem, 19vw, 7.5rem)/0.9 var(--font-display); letter-spacing: -0.05em; margin: 0;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.numb-item.bad .numb-n { color: var(--n-bad); }
.numb-item.good .numb-n { color: var(--n-good); }
.numb-unit { font: 600 clamp(1.05rem, 4.4vw, 1.4rem)/1.2 var(--font-display); margin: 10px 0 0; text-wrap: balance; }
.numb-line { color: var(--n-soft); margin: 14px 0 0; max-width: 40ch; line-height: 1.5; }
.numb-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; max-width: 420px; }
.numb-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--n-ink); }
.numb-dots i.gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-line); }
.numb-item.seen .numb-dots i:not(.gone) { animation: dot-in 0.5s ease both; animation-delay: calc(var(--d) * 40ms + 300ms); }
@keyframes dot-in { from { opacity: 0; transform: scale(0.2); } }
.numb-bar-gone { margin-top: 18px; max-width: 420px; }
.numb-bar-gone i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--n-line) var(--gone), var(--n-ink) var(--gone)); }
.numb-bar-gone span { display: block; margin-top: 8px; font: 600 0.66rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--n-soft); }
.numb-empty { color: var(--n-soft); padding: 4vh 0; margin: 0; }
.numb-link { background: none; border: 0; padding: 0; color: var(--n-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Who's still around: a small collapsible row at the top of Numb. */
.numb-people { border-bottom: 1px solid var(--n-line); padding: 12px 0; margin-top: 4px; scroll-margin-top: 10px; }
.numb-people summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font: 600 0.68rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--n-soft);
}
.numb-people summary::-webkit-details-marker { display: none; }
.numb-people summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.25s ease;
}
.numb-people[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.numb-people summary:hover, .numb-people[open] summary { color: var(--n-ink); }
.numb-people summary:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 4px; border-radius: 4px; }
.np-count { color: var(--n-soft); letter-spacing: 0.1em; opacity: 0.8; }
.numb-people[open] > :not(summary) { animation: np-open 0.3s ease both; }
@keyframes np-open { from { opacity: 0; transform: translateY(-6px); } }
.numb-people .numb-sub { margin: 10px 0 12px; font-size: 0.82rem; }
.np-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.np-row {
  display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 4.2em; grid-template-areas: "rel name age" "days days x";
  gap: 6px 8px; align-items: center; padding: 10px; border: 1px solid var(--n-line); border-radius: 14px; background: #121214;
  transition: opacity 0.3s, transform 0.3s;
}
.np-row.new { animation: np-in 0.35s ease both; }
.np-row.leaving { opacity: 0; transform: translateX(40px) rotate(2deg); }
@keyframes np-in { from { opacity: 0; transform: translateY(8px); } }
.np-rel { grid-area: rel; } .np-name { grid-area: name; } .np-age { grid-area: age; }
.np-days, .np-hint { grid-area: days; }
.np-row:has(.np-days) { grid-template-areas: "rel name age" "days unit x"; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 4.2em; }
.np-unit { grid-area: unit; color: var(--n-soft); font: 600 0.66rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; }
.np-hint { color: var(--n-soft); font-size: 0.8rem; font-style: italic; }
.np-x { grid-area: x; justify-self: end; background: none; border: 1px solid var(--n-line); color: var(--n-soft); border-radius: 99px; width: 32px; height: 32px; cursor: pointer; }
.np-x:hover, .np-x:focus-visible { color: var(--n-bad); border-color: var(--n-bad); }
.np-row select, .np-row input, .np-add, .np-books input {
  font: 500 0.825rem var(--font-body); color: var(--n-ink); background: #18181b; border: 1px solid var(--n-line);
  border-radius: 10px; padding: 9px 10px; min-width: 0; width: 100%;
}
.np-row :focus-visible, .np-add:focus-visible, .np-books input:focus-visible { outline: 2px solid var(--n-ink); outline-offset: 1px; }
.np-empty { color: var(--n-soft); padding: 6px 0; }
.np-add { cursor: pointer; border-style: dashed; color: var(--n-ink); }
.np-foot { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.np-books { display: flex; flex-direction: column; gap: 6px; font: 600 0.66rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--n-soft); }
.np-books input { width: 7em; }
.np-toast { color: var(--n-soft); font-size: 0.735rem; min-height: 1.3em; margin: 10px 0 0; }
.numb-save {
  background: var(--n-ink); color: var(--n-bg); border: 0; border-radius: 99px;
  padding: 13px 22px; font: 700 0.78rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer;
}

/* Hobby picker (profile wizard) */
.hobby-picker { display: flex; flex-direction: column; gap: 12px; }
.hp-group h4 { margin: 0 0 6px; font: 700 0.7rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); }
.hp-group[data-g="risk"] h4 { color: var(--bad); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--btn-radius); border: 2px solid var(--line);
  background: var(--surface); color: var(--ink); font: 600 0.715rem var(--font-body); cursor: pointer; transition: transform 0.15s var(--ease-out);
}
.hp-chip:hover { border-color: var(--ink); }
.hp-chip[aria-pressed="true"] { background: var(--good); border-color: var(--ink); color: #fff; transform: rotate(-2deg); box-shadow: 2px 2px 0 var(--shadow); }
.hp-group[data-g="risk"] .hp-chip[aria-pressed="true"] { background: var(--bad); }
.hobby-picked { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hobby-picked li {
  display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--surface-2); animation: pop-in 0.35s var(--ease-out) both;
}
.hobby-picked .hp-ico { grid-row: span 2; display: grid; place-items: center; }
.hobby-picked .hp-ico svg.ln { width: 24px; height: 24px; }
.hobby-picked b { font-weight: 700; }
.hobby-picked .hp-fact { grid-column: 2 / -1; font-size: 0.8rem; color: var(--ink-soft); }
.hp-freq { display: flex; flex-direction: row; align-items: center; gap: 6px; font: 600 0.74rem var(--font-mono); color: var(--ink-soft); white-space: nowrap; }
.hp-freq input { width: 4.2em; padding: 6px 8px; border: 2px solid var(--line); border-radius: 8px; font: 600 0.825rem var(--font-body); background: var(--surface); color: var(--ink); }

.numb-foot { color: var(--n-soft); font-size: 0.715rem; padding: 6vh 0 4vh; border-top: 1px solid var(--n-line); }

/* ---------- Coroner's report ---------- */
.coroner { display: flex; flex-direction: column; gap: 10px; }
.cert {
  position: relative; overflow: hidden; padding: 18px 18px 14px; border-radius: 14px;
  background: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--line) 55%, transparent) 27px 28px), var(--surface-2);
  border: 2px dashed var(--ink); margin-bottom: 8px;
}
.cert-kicker, .cert-title { padding-right: 92px; }
.cert-kicker { font: 600 0.62rem/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); margin: 0 0 4px; }
.cert-title { margin: 0 0 12px; font-size: clamp(1.25rem, 5vw, 1.6rem); letter-spacing: -0.02em; }
.cert-fields { margin: 0; display: grid; gap: 6px; }
.cert-fields div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.cert-fields dt { font: 600 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); }
.cert-fields dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.cert-fields em { font: 600 0.72rem var(--font-mono); font-style: normal; color: var(--accent); margin-left: 4px; }
.play .cert-fields div { animation: cert-type 0.5s var(--ease-out) both; animation-delay: calc(var(--k) * 90ms + 150ms); }
@keyframes cert-type { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.cert-stamp {
  position: absolute; right: 10px; top: 16px; transform: rotate(-12deg);
  font: 800 0.72rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--bad); border: 3px double currentColor; border-radius: 8px; padding: 6px 8px; opacity: 0.85; pointer-events: none;
}
.cert[data-manner="accident"] .cert-stamp { color: var(--marigold); }
.cert[data-manner="misadventure"] .cert-stamp { color: var(--accent); }
.play .cert-stamp { animation: stamp-in 0.45s cubic-bezier(.2, 1.6, .4, 1) 0.9s both; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-30deg) scale(2.4); } to { opacity: 0.85; transform: rotate(-12deg) scale(1); } }

.coroner-h { margin: 6px 0 0; font-size: 0.975rem; }
.causes { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cause details { border: 2px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color 0.2s; }
.cause details[open] { border-color: var(--ink); }
.cause.top details { box-shadow: 3px 3px 0 var(--shadow); }
.cause summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto 3.4em;
  align-items: center; gap: 8px; padding: 9px 10px 12px; position: relative;
}
.cause summary::-webkit-details-marker { display: none; }
.cause summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.c-ico { display: grid; place-items: center; color: var(--ink); }
.c-ico svg.ln { width: 20px; height: 20px; }
.c-name { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-pct { font: 700 0.735rem var(--font-mono); text-align: right; }
.vs { font: 600 0.6rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 99px; background: var(--surface-2); color: var(--ink-soft); }
.vs.worse { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.vs.better { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.c-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.c-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--ink); transform-origin: left; }
.cause.top .c-bar i { background: var(--accent); }
.play .c-bar i { animation: grow-x 0.8s var(--ease-out) both; animation-delay: calc(var(--k) * 60ms + 200ms); }
.c-blurb { margin: 0 12px 8px; font-size: 0.755rem; }
.c-drivers { list-style: none; margin: 0 12px 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.c-drivers li { font-size: 0.76rem; font-weight: 600; padding: 4px 8px; border-radius: 99px; background: color-mix(in srgb, var(--bad) 14%, transparent); }
.c-drivers li.down { background: color-mix(in srgb, var(--good) 16%, transparent); }
.c-drivers b { font: 700 0.66rem var(--font-mono); margin-left: 2px; }

.odds-card { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.odds-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.odds-tile { border: var(--border); border-radius: 12px; padding: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odds-tile .eyebrow { margin: 0 0 4px; font-size: 0.58rem; }
.odds-tile b { font: 800 clamp(1.3rem, 6vw, 1.9rem)/1 var(--font-display); letter-spacing: -0.03em; }
.odds-tile small { font-size: 0.7rem; color: var(--ink-soft); }
.odds-tile.worse b { color: var(--bad); }
.odds-tile.better b { color: var(--good); }
.play .odds-tile { animation: pop-in 0.5s var(--ease-out) both; animation-delay: calc(var(--k) * 80ms + 100ms); }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }

.surv { margin: 0 auto; width: 100%; max-width: 520px; }
.surv svg { width: 100%; height: auto; display: block; overflow: visible; }
.sv-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.sv-lab { font: 500 8px var(--font-mono); fill: var(--ink-soft); }
.sv-area { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.sv-you { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sv-avg { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 0.012 0.012; }
.play .sv-you { stroke-dasharray: 1; animation: draw 1.2s var(--ease-out) 0.2s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sv-med { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 2 3; }
.sv-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.surv figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.76rem; margin-top: 6px; }
.key::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.key.avg::before { background: repeating-linear-gradient(90deg, var(--ink-soft) 0 3px, transparent 3px 6px); }
.sv-med-note { margin-left: auto; }
.odds-before { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.odds-before li { display: grid; grid-template-columns: 8.2em minmax(0, 1fr) 3.4em; gap: 10px; align-items: center; font-size: 0.735rem; font-weight: 600; }
.odds-before b { font: 700 0.715rem var(--font-mono); text-align: right; }
.ob-track { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); }
.ob-you { position: absolute; inset: 0 auto 0 0; width: var(--you); border-radius: inherit; background: var(--bad); transform-origin: left; }
.ob-avg { position: absolute; top: -3px; bottom: -3px; left: var(--avg); width: 2px; background: var(--ink); }
.play .ob-you { animation: grow-x 0.8s var(--ease-out) 0.3s both; }
@media (max-width: 380px) {
  .cause summary { grid-template-columns: 1.4em minmax(0, 1fr) 3.2em; }
  .cause summary .vs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}