/* Layout: phone-first game shell — gradient identity header, scrolling feed, floating round Age button in a tab bar */
/* Flag emoji: Windows has no flag glyphs, so a small Twemoji flag font (CC-BY 4.0, via country-flag-emoji-polyfill) covers just the flag code points. */
@font-face { font-family: "Twemoji Country Flags"; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; src: url("TwemojiCountryFlags.woff2") format("woff2"); font-display: swap; }
:root {
  --bg: #eef1f7;
  --surface: #ffffff;
  --sunk: #e8ecf5;
  --ink: #171b2e;
  --muted: #687089;
  --line: #dde2ee;
  --accent: #10b981;
  --accent-ink: #ffffff;
  --accent-2: #ff5d73;
  --gold: #f59f00;
  --sky: #4c8dff;
  --violet: #8b5cf6;
  --good: #12a150;
  --bad: #e5484d;
  --warn: #e69500;
  --head-1: #0ea47a;
  --head-2: #13b5a6;
  --felt: #0f6b4f;
  --felt-ink: #eaf7ef;
  --p0: #ff5d73; --p1: #10b981; --p2: #4c8dff; --p3: #f5b400;
  --shadow: 0 1px 2px rgb(23 27 46 / .06), 0 8px 24px -12px rgb(23 27 46 / .25);
  --shadow-lg: 0 24px 60px -20px rgb(23 27 46 / .45);
  --f-display: "Twemoji Country Flags", "Fredoka", "Segoe UI", system-ui, sans-serif;
  --f-body: "Twemoji Country Flags", "Nunito", "Segoe UI", system-ui, sans-serif;
  --r: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d111c; --surface: #161b2b; --sunk: #1e2538; --ink: #edf0f8; --muted: #9aa3bd; --line: #262e45;
    --accent: #2fd39b; --accent-ink: #062418; --accent-2: #ff6f83; --gold: #ffbb33; --sky: #6ea3ff; --violet: #a78bfa;
    --good: #3fd17f; --bad: #ff6b6f; --warn: #ffb547; --head-1: #0b5a46; --head-2: #0d6e66; --felt: #0b4a37;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -12px rgb(0 0 0 / .7); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d111c; --surface: #161b2b; --sunk: #1e2538; --ink: #edf0f8; --muted: #9aa3bd; --line: #262e45;
  --accent: #2fd39b; --accent-ink: #062418; --accent-2: #ff6f83; --gold: #ffbb33; --sky: #6ea3ff; --violet: #a78bfa;
  --good: #3fd17f; --bad: #ff6b6f; --warn: #ffb547; --head-1: #0b5a46; --head-2: #0d6e66; --felt: #0b4a37;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -12px rgb(0 0 0 / .7); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .85);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--f-body); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; font-weight: 600; }

#app { max-width: 560px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); position: relative; box-shadow: 0 0 0 1px var(--line); }

/* ---------- header ---------- */
#top { padding: 14px 16px 12px; background: linear-gradient(135deg, var(--head-1), var(--head-2)); color: #fff; display: grid; gap: 12px; border-radius: 0 0 26px 26px; box-shadow: var(--shadow); position: relative; z-index: 2; }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .22); font-size: 34px; flex: none; position: relative; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35); }
.avatar em { position: absolute; right: -4px; bottom: -2px; font-style: normal; font-size: 13px; background: #fff; color: var(--head-1); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow); }
#top { grid-template-columns: minmax(0, 1fr); }
.who-txt { flex: 1; min-width: 0; }
.who-txt h1 { font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-txt p { margin: 2px 0 0; font-size: 13px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-txt .status { font-weight: 700; opacity: 1; }
.icon-btn { width: 42px; height: 42px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .2); font-size: 20px; display: grid; place-items: center; transition: transform .15s; }
.icon-btn:hover { transform: rotate(30deg); }
.money-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; }
.pill-money { background: rgb(0 0 0 / .14); border-radius: 14px; padding: 6px 10px; display: grid; min-width: 0; }
.pill-money span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 700; }
.pill-money b { font: 700 18px var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-money b.down { color: #ffd1d6; }
.econ { display: grid; place-items: center; border-radius: 14px; padding: 4px 10px; font: 600 12.5px var(--f-display); background: rgb(255 255 255 / .2); white-space: nowrap; }
.econ.boom { background: #fff; color: var(--good); }
.econ.recession { background: #ffe1e4; color: #c22a33; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 12px; }
.stats .stat { grid-column: span 2; } .stats .stat:nth-child(n+4) { grid-column: span 3; }
.stat { display: grid; grid-template-columns: 20px 1fr 26px; align-items: center; gap: 6px; position: relative; font-size: 14px; }
.stat em { font: 700 12px var(--f-body); font-style: normal; text-align: right; }
.stat .bar { background: rgb(0 0 0 / .18); height: 8px; }
.stat .float { position: absolute; right: -4px; top: -10px; font: 700 12px var(--f-display); padding: 0 6px; border-radius: 99px; background: #fff; animation: floatUp 1.8s ease-out forwards; pointer-events: none; }
.stat .float.up { color: var(--good); } .stat .float.down { color: var(--bad); }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: translateY(0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

.bar { height: 7px; background: var(--sunk); border-radius: 99px; overflow: hidden; min-width: 40px; flex: 1; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bar.good i { background: linear-gradient(90deg, #22c55e, #4ade80); } .bar.warn i { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .bar.bad i { background: linear-gradient(90deg, #ef4444, #fb7185); }
#top .bar.good i { background: #b7f7c9; } #top .bar.warn i { background: #ffe08a; } #top .bar.bad i { background: #ffb3bb; }

/* ---------- main view ---------- */
#view { flex: 1; overflow-y: auto; padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
#view > *, .modal-body > * { flex-shrink: 0; min-width: 0; }
.card { background: var(--surface); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; min-width: 0; box-shadow: var(--shadow); animation: cardIn .3s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } }
.card > header { display: flex; align-items: center; gap: 10px; }
.card h3 { font-size: 17px; }
.ci { font-style: normal; font-size: 20px; width: 34px; height: 34px; border-radius: 11px; background: var(--sunk); display: grid; place-items: center; flex: none; }
.card.flat { background: transparent; box-shadow: none; padding: 4px 2px; }
.card.flat .ci { background: var(--surface); }
.card.list { gap: 0; }
.card.list > header { margin-bottom: 8px; }
.card.job-card { border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.card.jail { background: repeating-linear-gradient(90deg, var(--surface) 0 26px, var(--sunk) 26px 30px); }
.card.society { background: linear-gradient(135deg, #1a1530, #2b1f4a); color: #efe8ff; }
.card.society .ci { background: rgb(255 255 255 / .1); }
.card.society .sub, .card.society .kv > span { color: #c7b9f0; }
.card.society.locked { filter: saturate(.6); }
.card.mafia { border-left: 5px solid #444; }
.card.gov { border: 2px solid color-mix(in srgb, var(--sky) 45%, transparent); }
.card.insider { border: 2px dashed color-mix(in srgb, var(--warn) 55%, transparent); }
.card.crime .tile { border-color: color-mix(in srgb, var(--bad) 20%, var(--line)); }
.sub { color: var(--muted); font-size: 13px; margin: 0; }
.sub.pad { padding: 0 4px; }
.sub-h { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.center { text-align: center; }
.lead { margin: 0; font-size: 15px; font-weight: 600; }
.title { font-size: 21px; }
.big-emoji { font-size: 52px; text-align: center; line-height: 1; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .15)); }
.art-hero { width: 132px; height: 132px; margin: 0 auto 6px; border-radius: 28px; overflow: hidden; background: var(--sunk); box-shadow: 0 8px 22px rgb(0 0 0 / .12); }
.art-hero svg { width: 100%; height: 100%; display: block; }
.jicon.artic { width: 48px; height: 48px; border-radius: 13px; overflow: hidden; }
.jicon.artic svg { width: 100%; height: 100%; display: block; }
.job.locked .jicon.artic { filter: grayscale(.85); }
.bignum { font: 700 30px var(--f-display); }
.empty { color: var(--muted); margin: 0; font-size: 14px; }
.warn-text { color: var(--warn) !important; font-weight: 700; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; min-width: 0; }
.kv.wrap { flex-wrap: wrap; }
.kv > span { color: var(--muted); min-width: 0; }
.kv > b { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.kv > .bar { max-width: 58%; }
.kv > em { font-style: normal; font-weight: 800; font-size: 13px; }
.kv.total { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; }
.kv.total > span { color: var(--ink); font-weight: 700; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.grid3 .kv { display: grid; gap: 0; }
.grid3 .kv > b { text-align: left; font-size: 14px; }
.grid3 .kv > span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 16px; padding: 12px 14px; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.up { color: var(--good); font-weight: 800; } .down { color: var(--bad); font-weight: 800; }
.alloc { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.alloc > span { color: var(--muted); }
.alloc b { font-variant-numeric: tabular-nums; }
.meter { display: grid; gap: 4px; }
.meter-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.meter-top b { color: var(--ink); }
.card.society .meter-top b { color: #fff; }
.tipnote { margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 15%, transparent); font-weight: 700; }

/* tiles: the main action buttons */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.tile { border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; padding: 10px 6px 9px; display: grid; justify-items: center; gap: 3px; text-align: center; transition: transform .12s, box-shadow .15s, border-color .15s; min-width: 0; }
.tile i { font-style: normal; font-size: 26px; line-height: 1.1; }
.tile span { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.tile small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.tile:active:not(:disabled) { transform: scale(.95); }
.tile:disabled { opacity: .4; filter: grayscale(.6); }
.card.society .tile { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14); color: #fff; }
.card.society .tile small { color: #c7b9f0; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions.col { flex-direction: column; }
.btn { border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 14px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; transition: transform .1s, background .15s, box-shadow .15s; }
.btn small { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.btn:hover:not(:disabled) { background: var(--sunk); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); border-color: transparent; color: var(--accent-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000), var(--shadow); }
.btn.primary small { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); }
.btn.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 11px; }
.btn.big { padding: 15px 22px; font-size: 17px; align-items: center; }
.btn:disabled { opacity: .45; }

.seg { display: flex; background: var(--sunk); border-radius: 14px; padding: 4px; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1 0 auto; border: 0; background: transparent; padding: 7px 11px; border-radius: 11px; font-size: 13px; font-weight: 800; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.kv .seg { flex: none; max-width: 100%; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1.5px solid var(--line); background: var(--surface); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill { font: 800 10px var(--f-body); font-style: normal; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 99px; background: var(--sunk); color: var(--muted); vertical-align: 2px; }
.pill.gold { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.pill.good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.pill.bad { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.pill.warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.tags li { background: var(--sunk); padding: 4px 11px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.tags li.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.tags li.gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.search { width: 100%; font: 600 15px var(--f-body); padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }

/* rows */
.row-item { width: 100%; display: grid; grid-template-columns: 1fr 72px auto; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 0; border-radius: var(--r); text-align: left; box-shadow: var(--shadow); transition: transform .12s; }
.row-item:hover { transform: translateY(-1px); }
.row-item.noch { grid-template-columns: auto 1fr auto; }
.row-item.person { grid-template-columns: auto 1fr auto; }
.card .row-item { box-shadow: none; border-radius: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
.card .row-item:last-child { border-bottom: 0; }
.row-item.dead { opacity: .5; }
.face { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--sunk); border-radius: 50%; }
.ri-main { min-width: 0; display: grid; }
.ri-main b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-main small.hold { color: var(--accent); font-weight: 800; }
.ri-num { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.ri-num b { font-weight: 800; font-size: 14px; }
.ri-num small { color: var(--muted); font-size: 11.5px; }
.ri-num span { font-size: 12.5px; }
.bond { width: 90px; }
canvas.mini { width: 72px; height: 30px; display: block; }
canvas.chart { width: 100%; height: 140px; display: block; }
canvas.chart.big { height: 200px; }
.list-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; padding: 0 14px; font-weight: 800; }
.jicon { font-style: normal; font-size: 24px; width: 40px; height: 40px; border-radius: 12px; background: var(--sunk); display: grid; place-items: center; flex: none; }
.job { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.job:last-child { border-bottom: 0; }
.job > div:not(.job-r) { min-width: 0; display: grid; flex: 1; }
.job small { color: var(--muted); font-size: 12.5px; }
.job small.req { color: var(--warn); font-weight: 700; }
.job.locked b { color: var(--muted); }
.job.locked .jicon { filter: grayscale(1); opacity: .6; }
.job-r { display: flex; align-items: center; gap: 8px; flex: none; }
.job-r > span { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.stepper { display: flex; gap: 4px; }

/* life feed */
.ledger summary { cursor: pointer; font: 600 16px var(--f-display); display: flex; justify-content: space-between; list-style: none; gap: 8px; }
.ledger summary::-webkit-details-marker { display: none; }
.ledger summary b { margin-left: auto; }
.ledger summary::after { content: '▾'; color: var(--muted); }
.ledger[open] summary::after { content: '▴'; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-family: var(--f-body); font-weight: 800; margin-bottom: 4px; }
.cols .kv { font-size: 13px; }
.news { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.news li { display: grid; grid-template-columns: 42px 1fr; gap: 8px; }
.news li span { font-weight: 800; color: var(--muted); font-size: 12px; padding-top: 1px; }
.news li.good { color: var(--good); } .news li.bad { color: var(--bad); }
.log { display: grid; gap: 12px; }
.log-year { background: var(--surface); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow); }
.log-year.latest { border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: pop .4s ease; }
@keyframes pop { from { transform: scale(.97); opacity: .4; } }
.log-year h4 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.age-chip { background: var(--accent); color: var(--accent-ink); font: 600 14px var(--f-display); padding: 2px 12px; border-radius: 99px; }
.log-year h4 > span:last-child { font: 700 12px var(--f-body); color: var(--muted); }
.log-year p { margin: 0 0 6px; display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-size: 14.5px; align-items: start; }
.log-year p i { font-style: normal; font-size: 17px; line-height: 1.25; text-align: center; }
.log-year p.good span { color: var(--good); font-weight: 700; }
.log-year p.bad span { color: var(--bad); font-weight: 700; }
.log-year p.warn span { color: var(--warn); font-weight: 700; }
.credit { display: flex; align-items: baseline; gap: 10px; }
.credit b { font: 700 36px var(--f-display); }
.uhnw { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, #7b5cff 14%, var(--sunk)), color-mix(in srgb, #3fa6ff 12%, var(--sunk))); }
.uhnw > b { display: block; margin-bottom: 4px; }
.uhnw ul { margin: 0 0 6px; padding-left: 18px; font-size: 13px; }
.credit span { color: var(--muted); font-weight: 800; }
.bigprice { display: flex; align-items: baseline; gap: 10px; }
.bigprice b { font: 700 30px var(--f-display); }
.bigprice small { color: var(--muted); }
.cand { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cand > div { display: grid; flex: 1; min-width: 0; }
.cand small { color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; font-size: 11px; color: var(--muted); margin-top: 4px; }
.help p { margin: 0 0 10px; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.field b { color: var(--ink); }
.field input[type=number], .field input:not([type]), .field input[type=password], .acct .pw input[type=text], .plan .field input[type=text] { font: 700 17px var(--f-body); padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ribbon.main { display: grid; justify-items: center; font-size: 46px; gap: 2px; padding: 10px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 25%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent)); }
.ribbon.main b { font: 600 20px var(--f-display); }
.ribbons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ribbons span { background: var(--sunk); padding: 5px 11px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.ribbons.big span { font-size: 15px; background: color-mix(in srgb, var(--gold) 18%, var(--sunk)); }
.ribbons span.dim { opacity: .6; }
.grave { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); }
.grave small { color: var(--muted); }

/* ---------- tab bar + age button ---------- */
#tabs { display: grid; grid-template-columns: repeat(3, 1fr) 76px repeat(3, 1fr); align-items: end; background: var(--surface); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px -16px rgb(0 0 0 / .4); position: relative; z-index: 3; border-radius: 22px 22px 0 0; }
#tabs > button:not(.age-btn) { border: 0; background: none; padding: 6px 0 4px; font-size: 10px; letter-spacing: -.01em; font-weight: 800; color: var(--muted); display: grid; justify-items: center; gap: 2px; min-width: 0; transition: color .15s, transform .15s; }
#tabs > button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
#tabs > button.on { color: var(--accent); }
#tabs > button.on svg { transform: translateY(-2px) scale(1.1); fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.age-btn { justify-self: center; width: 72px; height: 72px; margin-top: -30px; border-radius: 50%; border: 5px solid var(--surface); background: radial-gradient(circle at 35% 30%, #ff8a9a, var(--accent-2) 60%, #d63a52); color: #fff; display: grid; place-content: center; justify-items: center; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent-2) 80%, #000), 0 0 0 0 color-mix(in srgb, var(--accent-2) 50%, transparent); animation: breathe 2.6s ease-in-out infinite; transition: transform .1s; }
.age-btn b { font: 700 32px/0.9 var(--f-display); }
.age-btn span { font: 700 11px var(--f-display); text-transform: uppercase; letter-spacing: .08em; }
.age-btn:active:not(:disabled) { transform: scale(.92); }
.age-btn:disabled { filter: grayscale(.7); animation: none; opacity: .7; }
.age-btn.spin b { animation: spin .6s linear infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent-2) 80%, #000), 0 0 0 0 color-mix(in srgb, var(--accent-2) 45%, transparent); } 50% { box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--accent-2) 80%, #000), 0 0 0 10px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- modals ---------- */
#modalRoot { position: relative; z-index: 50; }
.modal-wrap { position: fixed; inset: 0; background: rgb(10 14 26 / .55); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 12px 10px calc(10px + env(safe-area-inset-bottom, 0px)); animation: fade .18s ease; }
.modal-wrap.leaving { animation: fade .14s ease reverse forwards; }
.modal { width: 100%; max-width: 520px; max-height: calc(100% - env(safe-area-inset-top, 0px) - 30px); overflow-y: auto; background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-lg); animation: rise .28s cubic-bezier(.2, 1.2, .3, 1); position: relative; }
.modal.has-hero { padding-top: 6px; }
.hero { display: grid; place-items: center; padding-top: 16px; }
.hero span { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--sunk))); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .06), var(--shadow); animation: bounceIn .5s cubic-bezier(.2, 1.6, .4, 1); }
.hero.good span { background: radial-gradient(circle at 35% 30%, #d9fbe6, #aef0c8); }
.hero.bad span { background: radial-gradient(circle at 35% 30%, #ffe1e4, #ffc2c8); }
@keyframes bounceIn { from { transform: scale(.3) rotate(-15deg); opacity: 0; } }
.modal-head { position: sticky; top: 0; display: flex; justify-content: center; align-items: center; padding: 10px 52px 6px; background: var(--surface); z-index: 1; text-align: center; }
.modal-head h2 { font-size: 22px; }
.x { position: absolute; right: 14px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--sunk); font-size: 14px; }
.modal-body { padding: 6px 18px 20px; display: grid; gap: 12px; }
.ev-text { font-size: 16px; margin: 0; text-align: center; line-height: 1.5; }
.choices { display: grid; gap: 9px; }
.choices.row { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
.btn.choice { width: 100%; padding: 13px 16px; font-size: 15px; align-items: center; text-align: center; border-radius: 16px; }
.btn.choice small { text-align: center; }
@keyframes rise { from { transform: translateY(40px) scale(.98); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (min-width: 600px) { .modal-wrap { align-items: center; } }
.modal.death .modal-head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.epitaph { margin: 0; font: 600 30px/1.1 var(--f-display); display: grid; text-align: center; }
.epitaph span { font: 700 14px var(--f-body); color: var(--muted); margin-top: 4px; }

/* ---------- mini-games ---------- */
.mg-intro { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.mg-msg { margin: 0; font-weight: 800; text-align: center; font-size: 15px; }
.mg-msg.good { color: var(--good); } .mg-msg.bad { color: var(--bad); }
.mg-cash, .pot { text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; }
.mg-cash b, .pot b { color: var(--ink); }
.pot b { font: 700 24px var(--f-display); }
.fine { font-size: 12px; color: var(--muted); margin: 0; text-align: center; font-weight: 700; }
.felt { background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--felt) 80%, #fff), var(--felt)); color: var(--felt-ink); border-radius: 18px; padding: 14px; display: grid; gap: 8px; box-shadow: inset 0 0 0 4px rgb(0 0 0 / .12); }
.felt .mg-msg { color: var(--felt-ink); }
.hand-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 800; }
.hand { display: flex; gap: 6px; flex-wrap: wrap; min-height: 76px; }
.hand.big { justify-content: center; }
.pcard { width: 52px; height: 76px; background: #fbfaf6; color: #1a1a1a; border-radius: 8px; display: grid; place-content: center; text-align: center; font: 700 21px var(--f-display); line-height: 1; box-shadow: 0 3px 8px rgb(0 0 0 / .3); animation: deal .25s ease both; }
.hand.big .pcard { width: 76px; height: 108px; font-size: 32px; }
.pcard small { font-size: 17px; }
.pcard.red { color: #d0312d; }
.pcard.back { background: repeating-linear-gradient(45deg, #b8323b 0 6px, #8f2028 6px 12px); }
@keyframes deal { from { transform: translateY(-20px) rotate(-8deg); opacity: 0; } }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: linear-gradient(180deg, #2b1d47, #1a1030); padding: 14px; border-radius: 18px; box-shadow: inset 0 0 0 4px #f5b400; }
.reel { background: #fffdf5; color: #1a1a1a; border-radius: 12px; height: 90px; display: grid; place-items: center; font: 700 38px var(--f-display); box-shadow: inset 0 -6px 10px rgb(0 0 0 / .12); }
.reel.spinning { filter: blur(1.5px); }
.reel.seven { color: #d0312d; }
.wheel { width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font: 700 40px var(--f-display); background: var(--sunk); border: 7px solid var(--gold); box-shadow: var(--shadow); }
.wheel.red { background: #d0312d; color: #fff; } .wheel.black { background: #1d1d1d; color: #fff; } .wheel.green { background: #12a150; color: #fff; }
.chipgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.chipgrid button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 2px; font-size: 12px; font-weight: 800; display: grid; }
.chipgrid button small { font-weight: 600; color: var(--muted); font-size: 10.5px; }
.chipgrid button.on { background: var(--ink); color: var(--bg); }
.chipgrid button.on small { color: var(--bg); opacity: .7; }
.race { display: grid; gap: 6px; }
.lane { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.lane.mine { color: var(--accent-2); }
.lane span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track { position: relative; height: 30px; background: repeating-linear-gradient(90deg, #c8a171 0 18px, #bb9566 18px 20px); border-radius: 8px; }
.track i { position: absolute; top: 2px; font-style: normal; font-size: 22px; transform: scaleX(-1); transition: left .09s linear; }
.pins { display: flex; justify-content: center; gap: 8px; }
.pins i { width: 16px; height: 32px; border-radius: 5px; background: var(--sunk); border: 1.5px solid var(--line); transition: background .2s; }
.pins i.on { background: var(--good); border-color: var(--good); }
.lock-bar { position: relative; height: 58px; background: var(--sunk); border-radius: 16px; overflow: hidden; cursor: pointer; border: 1.5px solid var(--line); }
.lock-zone { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--good) 40%, transparent); border-left: 3px solid var(--good); border-right: 3px solid var(--good); }
.lock-needle { position: absolute; top: 5px; bottom: 5px; width: 5px; margin-left: -2.5px; background: var(--ink); border-radius: 3px; }
.vault { display: flex; justify-content: center; gap: 12px; }
.dial { display: grid; justify-items: center; gap: 4px; background: var(--sunk); border-radius: 14px; padding: 6px 12px; }
.dial b { font: 700 36px var(--f-display); }
.dial button { border: 0; background: transparent; font-size: 18px; padding: 4px 10px; }
.vhist { display: grid; gap: 3px; font-weight: 800; max-height: 150px; overflow-y: auto; }
.vhist div { display: flex; justify-content: space-between; padding: 4px 12px; background: var(--sunk); border-radius: 8px; }
.timer { height: 8px; background: var(--sunk); border-radius: 99px; overflow: hidden; }
.timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--warn), var(--accent-2)); transition: width 1s linear; }
.timer i.drain { width: 100%; animation: drain linear forwards; }
@keyframes drain { to { width: 0; } }
.quiz-q { text-align: center; font: 700 38px var(--f-display); padding: 10px 0; }
.quiz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quiz-grid .btn { align-items: center; font: 700 22px var(--f-display); padding: 14px; }
.neg { display: grid; grid-template-columns: 1fr auto; gap: 10px; background: var(--sunk); padding: 12px 14px; border-radius: 14px; }
.neg div { display: grid; }
.neg span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }
.neg b { font: 700 20px var(--f-display); }
.fighters { display: flex; justify-content: center; align-items: center; gap: 20px; font: 700 18px var(--f-display); color: var(--muted); }
.fighter { font-size: 52px; transition: transform .1s; }
.fighter.hit { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-8px) rotate(-6deg); } 75% { transform: translateX(8px) rotate(6deg); } }
.hp { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.hp span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .bar { height: 14px; }
.fightlog { min-height: 74px; background: var(--sunk); border-radius: 14px; padding: 8px 12px; font-size: 14px; }
.fightlog p { margin: 0 0 3px; }
.fightlog p:last-child { font-weight: 800; }
.simon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(260px, 100%); margin: 0 auto; }
.spad { aspect-ratio: 1; border-radius: 22px; border: 0; opacity: .35; transition: opacity .1s, transform .1s; max-width: 100%; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .15); }
.spad.p0 { background: var(--p0); } .spad.p1 { background: var(--p1); } .spad.p2 { background: var(--p2); } .spad.p3 { background: var(--p3); }
.spad.lit, .spad:active:not(:disabled) { opacity: 1; transform: scale(1.05); }
.spad:disabled { cursor: default; }
.seq { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.seq span { font-size: 30px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--sunk); border-radius: 12px; animation: deal .3s ease both; }
.seq span.hidden-slot { color: var(--muted); font: 700 22px var(--f-display); }
.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick-grid .btn { font-size: 28px; align-items: center; padding: 10px; }
.odd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.odd-grid button { aspect-ratio: 1; border: 0; border-radius: 8px; background: var(--sunk); font: 700 20px ui-monospace, Consolas, monospace; }
.odd-grid button:hover { background: color-mix(in srgb, var(--sky) 25%, var(--sunk)); }
.range { position: relative; height: 240px; border-radius: 18px; background: linear-gradient(180deg, #cfe8ff, #e9f4ff 60%, #b9d99a 60%, #9cc77a); overflow: hidden; }
.target { position: absolute; border: 0; background: none; font-size: 40px; padding: 0; animation: popIn .2s ease; cursor: crosshair; }
.target.pop { transform: scale(1.6); opacity: 0; transition: all .15s; }
@keyframes popIn { from { transform: scale(0); } }
.rhythm { position: relative; width: 180px; height: 180px; margin: 0 auto; display: grid; place-items: center; }
.ring { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 5px solid var(--accent-2); }
.core { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; background: color-mix(in srgb, var(--accent-2) 18%, var(--sunk)); }
.core.pulse { animation: pulse .25s ease; }
@keyframes pulse { 50% { transform: scale(1.18); } }
.script { margin: 0; font: 500 20px/1.35 var(--f-display); text-align: center; padding: 10px; background: #fffbe8; color: #3a3220; border-radius: 12px; box-shadow: var(--shadow); }
.goal { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; border: 6px solid #f4f4f4; border-bottom: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 2px, transparent 2px 14px), #2e9e5b; }
.goal button { height: 56px; border: 2px dashed rgb(255 255 255 / .6); background: rgb(255 255 255 / .1); color: #fff; border-radius: 10px; font-size: 22px; }
.goal button:hover { background: rgb(255 255 255 / .3); }
.keeper { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 30px; pointer-events: none; }
canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 16px; font-size: 14px; font-weight: 800; max-width: min(92vw, 480px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.4, .4, 1); z-index: 100; text-align: center; box-shadow: var(--shadow-lg); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.good { background: var(--good); color: #fff; }
#toast.bad { background: var(--bad); color: #fff; }

@media (max-width: 420px) {
  .pill-money b { font-size: 16px; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: 1fr; gap: 10px; }
  .row-item { grid-template-columns: 1fr 56px auto; gap: 8px; }
  canvas.mini { width: 56px; }
  .chipgrid { grid-template-columns: repeat(4, 1fr); }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .alloc { grid-template-columns: 90px 1fr auto; }
  .lane { grid-template-columns: 84px 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- special careers, countries, politics meters, new mini-games ---------- */
.who-txt .where { font-weight: 700; }
.tiles.special .tile { position: relative; }
.tiles.special .tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.tiles.special .tile.locked i { filter: grayscale(1); opacity: .55; }
.tiles.special .tile.locked small { color: var(--warn); font-weight: 700; }
.how { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 12.5px; font-weight: 700; }
.ladder span { display: grid; justify-items: center; background: var(--sunk); border-radius: 12px; padding: 5px 8px; text-align: center; }
.ladder span small { font-weight: 600; color: var(--muted); font-size: 10.5px; }
.ladder span.dim { opacity: .5; }
.ladder b { color: var(--muted); }
.kv > .bar + em { min-width: 24px; text-align: right; }
.meter-impeach .bar { background-image: linear-gradient(90deg, transparent calc(100% - 3px), var(--bad) 0); }
.warn-text { color: var(--warn); font-weight: 700; }

.flag { font-size: 26px; line-height: 1; }
.co-pick { display: flex; gap: 8px; align-items: stretch; }
.co-btn { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--line); background: var(--bg); border-radius: 14px; padding: 8px 12px; color: var(--ink); }
.co-btn > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.co-btn b { font-size: 16px; } .co-btn small { color: var(--muted); font-weight: 600; }
.co-btn i { font-style: normal; color: var(--muted); }
.co-list { display: grid; max-height: min(52vh, 460px); overflow-y: auto; margin: 0 -6px; }
.co { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border: 0; background: none; text-align: left; border-radius: 12px; }
.co:hover { background: var(--sunk); }
.co.on { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.co .flag { font-size: 28px; flex: none; width: 36px; text-align: center; }
.co-n { flex: 1; display: grid; min-width: 0; }
.co-n b { font-size: 15px; } .co-n small { color: var(--muted); font-size: 12.5px; }
.co-s { color: var(--muted); font-weight: 700; font-size: 12.5px; flex: none; }

.poll { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.react { margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; text-align: center; padding: 8px 12px; border-radius: 14px; background: var(--sunk); animation: popIn .25s ease; }
.react span { font-size: 22px; }
.react.good { color: var(--good); } .react.bad { color: var(--bad); } .react.warn { color: var(--warn); }

.crowd-hud { display: flex; justify-content: space-around; font-weight: 800; font-size: 15px; }
.crowd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; border-radius: 18px; background: linear-gradient(180deg, #ffe7b3, #ffd27a); }
.spot { aspect-ratio: 1; border: 0; border-radius: 50%; background: rgb(255 255 255 / .45); font-size: 40px; display: grid; place-items: center; padding: 0; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .08); }
.spot.up { animation: popIn .18s ease; }
.spot.h { background: rgb(239 68 68 / .25); } .spot.p { background: rgb(76 141 255 / .3); }
.spot.tapped { transform: scale(.9); }

.customer { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; background: linear-gradient(180deg, #1d2337, #2b3352); color: #f2f4fb; animation: popIn .2s ease; }
.customer span { font-size: 52px; line-height: 1; }
.customer p { margin: 0; text-align: center; font-weight: 700; }

.launch { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.launch .sky { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #0b1026, #283a8c 55%, #7fb3ff); }
.launch .rocket { position: absolute; left: 50%; font-size: 32px; transform: translateX(-50%) rotate(-45deg); transition: bottom .5s cubic-bezier(.2, .8, .2, 1); }
.launch h4 { font-size: 20px; }

/* ---------- v1.2: folding cards, scroll arrows, creator mini-games ---------- */
.card.fold { gap: 0; }
.card.fold > summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.card.fold > summary::-webkit-details-marker { display: none; }
.card.fold > summary > header { display: flex; align-items: center; gap: 10px; }
.card.fold > summary h3 { flex: 1; min-width: 0; }
.card.fold .chev { font-style: normal; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; flex: none; }
.card.fold[open] .chev { transform: rotate(90deg); }
.card.fold[open] > summary { margin-bottom: 10px; }
.card.fold > .fold-body { display: grid; gap: 10px; min-width: 0; }
.card.fold.list > .fold-body { gap: 0; }
.card.fold:not([open]):hover { box-shadow: var(--shadow-lg); }
.card.flat.fold > summary .ci { background: var(--surface); }
.card.society.fold .chev { color: #c7b9f0; }
.fold-all { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: -4px; }
.fold-all button { border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 8px; }
.fold-all button:hover { color: var(--ink); background: var(--sunk); }

.scroller { position: relative; min-width: 0; max-width: 100%; }
.kv > .scroller { flex: none; max-width: 100%; }
.sc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font: 800 20px/1 var(--f-display); display: none; place-items: center; padding: 0 0 2px; }
.sc-arrow.l { left: -4px; } .sc-arrow.r { right: -4px; }
.scroller.can-l > .sc-arrow.l, .scroller.can-r > .sc-arrow.r { display: grid; }
.scroller.can-r::after, .scroller.can-l::before { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 1; }
.scroller.can-r::after { right: 0; background: linear-gradient(90deg, transparent, var(--bg)); }
.scroller.can-l::before { left: 0; background: linear-gradient(270deg, transparent, var(--bg)); }
.card .scroller.can-r::after { background: linear-gradient(90deg, transparent, var(--surface)); }
.card .scroller.can-l::before { background: linear-gradient(270deg, transparent, var(--surface)); }

.mini-skill .bar { height: 5px; margin-top: 4px; max-width: 160px; }
.timeline { display: flex; gap: 4px; min-height: 40px; padding: 6px; border-radius: 12px; background: var(--sunk); overflow-x: auto; align-items: center; }
.timeline span { font-size: 22px; background: var(--surface); border-radius: 8px; padding: 2px 4px; flex: none; }
.timeline span.bad { outline: 2px solid var(--bad); }
.timeline em { color: var(--muted); font-size: 12px; font-style: normal; }
.clip-card { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #1e2235, #31395c); color: #f2f4fb; animation: cardIn .2s ease both; }
.clip-card span { font-size: 54px; line-height: 1; }
.clip-card p { margin: 0; font-weight: 700; text-align: center; }
.live-hud { display: flex; justify-content: space-between; font-weight: 800; }
.live-hud .live { color: #fff; background: #e5484d; padding: 1px 8px; border-radius: 6px; animation: pulseLive 1.2s infinite; }
@keyframes pulseLive { 50% { opacity: .6; } }
.chatbox { display: grid; gap: 4px; height: 232px; overflow: hidden; align-content: start; padding: 6px; border-radius: 14px; background: var(--sunk); }
.chatmsg { display: flex; gap: 6px; align-items: baseline; text-align: left; border: 0; border-radius: 10px; padding: 6px 8px; background: var(--surface); font-size: 13px; animation: cardIn .15s ease both; }
.chatmsg i { font-style: normal; }
.chatmsg b { color: var(--sky); flex: none; }
.chatmsg.don { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
.chatmsg.q { background: color-mix(in srgb, var(--sky) 16%, var(--surface)); }
.chatmsg.troll { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }
.chatmsg.done { opacity: .45; } .chatmsg.done::after { content: '✓'; margin-left: auto; color: var(--good); font-weight: 800; }
.chatmsg.banned { opacity: .35; text-decoration: line-through; }
.chatmsg.old { opacity: .55; }
.card.illum { background: linear-gradient(135deg, #2a2108, #4a3a0c); color: #fff5d6; }
.card.illum .sub, .card.illum .kv > span { color: #e8d79c; }
.card.illum .tile { background: rgb(255 255 255 / .07); border-color: rgb(255 215 100 / .25); color: #fff5d6; }
.card.illum .tile small { color: #e8d79c; }
.card.positions { border: 2px solid color-mix(in srgb, var(--sky) 40%, transparent); }
.job.pos small b { font-weight: 800; }
.job-r.col { flex-direction: column; align-items: stretch; }
.pro-badge { font: 800 11px var(--f-body); font-style: normal; vertical-align: middle; background: linear-gradient(135deg, #ffd34d, #ff9f1c); color: #3b2500; padding: 2px 7px; border-radius: 99px; margin-left: 6px; letter-spacing: .04em; }
.btn.pro-btn { background: linear-gradient(135deg, #ffd34d, #ff9f1c); color: #3b2500; border-color: transparent; }
.pro-stats { display: grid; gap: 6px; }
.pstat { display: grid; grid-template-columns: 9.5em 1fr 2.2em; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pstat input { width: 100%; accent-color: var(--gold); }
.pstat b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- v1.4 crime mini-games ---------- */
.mark { display: grid; justify-items: center; gap: 2px; padding: 12px; border-radius: 18px; background: var(--sunk); transition: background .2s; }
.mark span { font-size: 54px; line-height: 1; }
.mark small { font-weight: 800; }
.mark.look { background: color-mix(in srgb, var(--bad) 25%, var(--sunk)); } .mark.look small { color: var(--bad); }
.mark.turn { background: color-mix(in srgb, var(--warn) 25%, var(--sunk)); } .mark.turn small { color: var(--warn); }
.mark.away small { color: var(--good); }
.pocket { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.loot { display: grid; justify-items: center; gap: 2px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 14px; padding: 8px 2px; }
.loot span { font-size: 28px; } .loot small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.loot.taken { opacity: .25; }
.sneak { display: grid; gap: 4px; padding: 6px; border-radius: 14px; background: #1b2033; }
.sneak .cell { aspect-ratio: 1; border-radius: 8px; background: #2a3150; display: grid; place-items: center; font-size: 24px; transition: background .2s; }
.sneak .cell.beam { background: linear-gradient(180deg, #fff3a6, #ffd75a); }
.sneak .cell.cover { background: #3d3424; }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; justify-content: center; }
.dpad button { border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; font-size: 20px; font-weight: 800; }
.dpad [data-k="u"] { grid-column: 2; } .dpad [data-k="l"] { grid-column: 1; grid-row: 2; } .dpad [data-k="d"] { grid-column: 2; grid-row: 2; } .dpad [data-k="r"] { grid-column: 3; grid-row: 2; }
.wires { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 30px; min-height: 48px; }
.wires b { font-size: 16px; color: var(--muted); }
.wires span.done { filter: drop-shadow(0 0 6px gold); }
.btn.wire { font-size: 24px; }
.safe { display: grid; justify-items: center; gap: 6px; }
.safe .dial { width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, #d9dde8 0 35%, #8a93a8 36% 60%, #4b536b 61%); position: relative; box-shadow: var(--shadow); transition: transform .12s; }
.safe .dial i { position: absolute; left: 50%; top: 6px; width: 4px; height: 26px; margin-left: -2px; background: #e5484d; border-radius: 2px; }
.safe b { font: 800 28px var(--f-display); font-variant-numeric: tabular-nums; }
.terminal { display: flex; justify-content: space-between; font: 700 14px ui-monospace, Consolas, monospace; background: #0b1410; color: #43f08a; padding: 10px 12px; border-radius: 12px; }
.terminal b { color: #b8ffd4; letter-spacing: .1em; }
.hexgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hexgrid button { font: 700 15px ui-monospace, Consolas, monospace; border: 1px solid #1f3a2a; background: #0f1d16; color: #43f08a; border-radius: 10px; padding: 10px 0; }
.seq span.lit { transform: scale(1.25); filter: drop-shadow(0 0 8px gold); transition: transform .1s; }
/* fishing, skydiving, street racing, climbing */
.pond { height: 120px; border-radius: 16px; background: linear-gradient(180deg, #8fd3ff, #2d7fc1); display: grid; place-items: center; }
.pond .bobber { font-size: 34px; animation: bob 1.6s ease-in-out infinite; }
.pond.bite .bobber { animation: dip .25s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes dip { 50% { transform: translateY(16px); } }
.sky-dive { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.alt-scale { position: relative; height: 200px; border-radius: 16px; background: linear-gradient(180deg, #3d6fd8, #9fd0ff 88%, #6fbf5a 88%, #4a9a3c); overflow: hidden; }
.alt-scale .zone { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--good) 45%, transparent); border-top: 2px dashed #fff; border-bottom: 2px dashed #fff; }
.alt-scale .diver { position: absolute; left: 50%; transform: translate(-50%, 50%); font-size: 28px; }
.sky-dive b { font: 700 24px var(--f-display); min-width: 90px; text-align: right; }
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 6px; border-radius: 14px; background: #2b2f3a; }
.road .cell { height: 34px; display: grid; place-items: center; font-size: 24px; border-left: 2px dashed rgba(255, 255, 255, .12); }
.road .cell:nth-child(3n+1) { border-left: 0; }
.wall { position: relative; height: 170px; border-radius: 16px; background: linear-gradient(180deg, #dfe8f5, #8a8f99 30%, #6b6258); overflow: hidden; }
.wall .me { position: absolute; left: 50%; transform: translateX(-50%); font-size: 30px; transition: bottom .4s cubic-bezier(.2, .8, .2, 1); }
.wall .peak { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 22px; }
.btn.hold { font-size: 26px; align-items: center; padding: 10px; }
.btn.hold.lit { background: color-mix(in srgb, var(--good) 45%, var(--surface)); border-color: var(--good); }
.prison-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.prison-head .big { font-size: 40px; }
.sec-min { color: var(--good); } .sec-med { color: var(--warn); } .sec-max { color: var(--bad); }
.risk-list { display: grid; gap: 6px; }
.risk-list div { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; }
.risk-list em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--sunk); }
.risk-list em.high { background: color-mix(in srgb, var(--bad) 22%, var(--sunk)); color: var(--bad); }
.risk-list em.med { background: color-mix(in srgb, var(--warn) 22%, var(--sunk)); color: var(--warn); }
/* pump and dump */
.rp-stage { position: relative; overflow: hidden; border-radius: 14px; background: var(--sunk); }
.rp-coin { position: absolute; font-size: 22px; transition: left .25s linear, top .25s linear; pointer-events: none; animation: rpSpin 1.2s linear infinite; }
@keyframes rpSpin { 50% { transform: scaleX(.2); } }
.rp-float { position: absolute; bottom: 0; font-size: 22px; pointer-events: none; animation: rpFloat 1.5s ease-out forwards; }
@keyframes rpFloat { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px) scale(1.2); opacity: 0; } }
.rp-now b { font-size: 24px; } .rp-now b.up { color: var(--good); } .rp-now b.down { color: var(--bad); }
.neg.rp-3 { grid-template-columns: 1fr auto auto; }
#rpP.flash-up { color: var(--good); animation: rpPop .3s; } #rpP.flash-down { color: var(--bad); animation: rpPop .3s; }
@keyframes rpPop { 50% { transform: scale(1.15); } }
.poll.danger .bar { animation: rpDanger .6s ease-in-out infinite; }
@keyframes rpDanger { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 35%, transparent); } }
#rpM.pop { animation: rpPop .35s; }
.rp-dump { animation: rpGlow 1.6s ease-in-out infinite; }
@keyframes rpGlow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--good) 30%, transparent); } }
.shake { animation: rpShake .4s; }
@keyframes rpShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
/* drawn portraits */
.av { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #e9f4ff, #cfe3f7); }
.av svg { width: 100%; height: 100%; display: block; }
.av.dead { display: grid; place-items: center; background: var(--sunk); font-size: 70%; }
.avatar .av { width: 54px; height: 54px; background: linear-gradient(160deg, #fff6d8, #ffd7a8); box-shadow: 0 0 0 2px rgb(255 255 255 / .55); }
.face { overflow: hidden; }
.face .av { width: 44px; height: 44px; }
.big-avatar { width: 110px; height: 110px; margin: 0 auto; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .15)); }
.big-avatar .av { width: 110px; height: 110px; font-size: 56px; }
.fighter .av.fight { width: 64px; height: 64px; }
.with-av { display: inline-flex; align-items: center; gap: 10px; }
.with-av .av.sm { width: 34px; height: 34px; flex: none; }
.cand .face .av { width: 44px; height: 44px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .av:not(.dead) { background: linear-gradient(160deg, #33415c, #26314a); } }
:root[data-theme="dark"] .av:not(.dead) { background: linear-gradient(160deg, #33415c, #26314a); }
/* garage */
.car-badge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 26px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--paint) 55%, #fff), var(--paint)); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), 0 4px 10px color-mix(in srgb, var(--paint) 40%, transparent); }
.car-badge.big { width: 84px; height: 84px; border-radius: 24px; font-size: 48px; }
.car-head { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; margin-bottom: 6px; }
.car-head .perf { display: block; font: 800 30px var(--f-display); line-height: 1; }
.car-head small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.car-quick { display: grid; gap: 2px; justify-items: end; font-weight: 800; font-size: 13px; }
.car-hero { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: 8px; }
.car-hero .car-badge { animation: carIdle 2.4s ease-in-out infinite; }
.car-art { display: inline-block; width: 64px; height: 64px; border-radius: 16px; background: var(--sunk); overflow: hidden; flex: none; }
.car-art.big { width: 112px; height: 112px; border-radius: 24px; }
.car-art svg { width: 100%; height: 100%; display: block; }
.car-hero .car-art svg { animation: carIdle 2.4s ease-in-out infinite; }
@keyframes carIdle { 50% { transform: translateY(-3px) rotate(-2deg); } }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; border: 1.5px solid rgb(0 0 0 / .2); }
.job.maxed { opacity: .7; }
/* the rite of candles and soul contracts */
.modal.ritual { background: radial-gradient(circle at 50% 35%, #2a1a14, #0c0808 75%); color: #f1e3cf; }
.modal.ritual .modal-head h2, .modal.ritual .ritual-msg { color: #f6e6c8; text-shadow: 0 0 12px rgb(255 140 60 / .45); }
.modal.ritual .hero { background: #1c1210; }
.modal.ritual .ritual-fine { color: #b9a58a; }
.modal.ritual .btn.choice { background: #1e1513; color: #f1e3cf; border-color: #5a3a2a; }
.altar { position: relative; aspect-ratio: 1; width: min(100%, 320px); flex: none; margin: 4px auto; border-radius: 50%; background: radial-gradient(circle, #3a1f16 0%, #160d0b 70%); box-shadow: inset 0 0 40px #000; }
.altar .sigil { position: absolute; inset: 0; display: grid; place-items: center; font-size: 110px; color: #7a1d1d; opacity: .45; animation: sigil 6s linear infinite; pointer-events: none; }
@keyframes sigil { to { transform: rotate(360deg); } }
.candle { position: absolute; transform: translate(-50%, -50%); width: 54px; height: 54px; border: 0; background: none; font-size: 32px; cursor: pointer; }
.candle .flame { display: block; filter: drop-shadow(0 0 8px rgb(255 170 60 / .8)); animation: flick 1.3s ease-in-out infinite; }
.candle.blood .flame { filter: drop-shadow(0 0 12px #ff1f1f) hue-rotate(-25deg) saturate(2); animation: flickFast .25s ease-in-out infinite; }
.candle.eye .flame { filter: drop-shadow(0 0 10px #9be7ff); animation: blink 1.4s ease-in-out infinite; }
.candle.out .flame { opacity: .35; }
@keyframes flick { 50% { transform: scale(1.06) translateY(-1px); } }
@keyframes flickFast { 50% { transform: scale(1.18) rotate(4deg); } }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.1); } 55% { transform: scaleY(1); } }
.masks { font-size: 64px; text-align: center; filter: drop-shadow(0 0 16px rgb(255 120 60 / .4)); animation: flick 3s ease-in-out infinite; }
.contract { display: block; background: linear-gradient(#f6ecd4, #e9d9b4); color: #3b2a1a; border-radius: 10px; padding: 14px 16px; text-align: left; font-family: Georgia, serif; box-shadow: inset 0 0 30px rgb(120 80 30 / .35); }
.contract .seal { display: block; text-align: center; font-size: 34px; color: #8b1a1a; }
.contract .cl { display: block; margin: 6px 0; font-size: 14px; }
.contract .sig { display: block; text-align: right; margin-top: 10px; color: #8b1a1a; }
.modal.ritual .modal-head, .modal.ritual .modal-body { background: transparent; }
.modal.ritual .hero span { background: radial-gradient(circle, #3b2318, #120a08); box-shadow: 0 0 24px rgb(255 120 40 / .35); }
.modal.ritual .modal-body { overflow-x: hidden; }
/* space mini-games */
.modal.space { background: radial-gradient(circle at 50% 20%, #1c2650, #070a18 80%); color: #e6ecff; }
.modal.space .modal-head, .modal.space .modal-body { background: transparent; }
.modal.space .modal-head h2, .modal.space .mg-msg, .modal.space .crowd-hud { color: #e6ecff; }
.modal.space .hero span { background: radial-gradient(circle, #2a3570, #0b1028); }
.dock-view, .lander-view { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #cfe, transparent), radial-gradient(1px 1px at 85% 15%, #fff, transparent), #0a0f26; }
.dock-view .port { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px; border: 3px dashed #7cf; border-radius: 50%; box-shadow: 0 0 18px #39f; }
.dock-view .port::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: #7cf; font-weight: 800; }
.dock-view .ship { position: absolute; font-size: 30px; transition: left .1s linear, top .1s linear; }
.lander-view { background-color: #05070f; }
.lander-view .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 6%; background: linear-gradient(#bdbdbd, #7d7d7d); }
.lander-view .lander { position: absolute; left: 50%; transform: translateX(-50%); font-size: 30px; transition: bottom .1s linear; }
.space-grid { background: #0a0f26; }
.space-grid .cell { background: #141c40; }
.space-grid .cell.debris { background: #3b2338; }
.road.starfield { background: #0a0f26; }
.road.starfield .cell { border-left-color: transparent; }
/* driving test, approach, harvest, fire */
.road-scene { display: flex; justify-content: center; align-items: center; gap: 18px; height: 90px; border-radius: 16px; background: linear-gradient(#bfe3ff 55%, #5b6270 55%); font-size: 40px; }
.road-scene .car { font-size: 34px; animation: carIdle 2.4s ease-in-out infinite; }
.exam-sheet { display: flex; justify-content: space-between; align-items: center; background: #fffbe8; color: #3b2a1a; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; border: 1px dashed #c9b27a; }
.park-grid { background: #5b6270; }
.park-grid .cell { background: #6b7280; }
.park-grid .cell.curb { background: #8a909c; border-top: 4px solid #e8e8e8; }
.park-grid .cell.spot { outline: 2px dashed #ffd84d; outline-offset: -4px; }
.approach { position: relative; height: 190px; border-radius: 16px; overflow: hidden; background: linear-gradient(#7cc4ff, #cfeaff 75%, #6fbf5a 75%); }
.approach .slope { position: absolute; left: 0; bottom: 4%; width: 92%; height: 76%; background: linear-gradient(to top right, transparent calc(50% - 14px), rgb(255 255 255 / .55) calc(50% - 14px), rgb(255 255 255 / .55) calc(50% + 14px), transparent calc(50% + 14px)); pointer-events: none; }
.approach .plane { position: absolute; font-size: 26px; transition: left .16s linear, bottom .16s linear, transform .16s; }
.approach .runway { position: absolute; right: 2%; bottom: 12%; font-size: 22px; }
.harvest-field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; border-radius: 14px; background: #7b5a3c; }
.harvest-field .plot { aspect-ratio: 1; border: 0; border-radius: 10px; background: #5d4228; font-size: 28px; }
.house .cell { border: 0; font-size: 24px; background: #e9dcc6; }
.house .cell.burning { background: #ffb36b; animation: flickFast .3s infinite; }
.house .cell.ash { background: #444; }
.dock-view.water { background: repeating-linear-gradient(170deg, #2f86c9 0 14px, #3b95d6 14px 28px); }
.dock-view.water .port { border-color: #fff; box-shadow: 0 0 10px #fff; }
.tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.sec-title { font: 700 17px var(--f-display); margin: 18px 4px 6px; }
.emp-range { width: 100%; margin: 2px 0 10px; }

/* =====================================================================
   v1.13 visual refresh: aurora header, labelled stats, coloured cards,
   sliding tab glow, screen transitions, new-year burst, money counters
   ===================================================================== */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root { --head-3: #3b82f6; --glass: rgb(255 255 255 / .16); --glass-line: rgb(255 255 255 / .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --head-1: #0c6b55; --head-2: #0f5f74; --head-3: #3b2f8f; } }
:root[data-theme="dark"] { --head-1: #0c6b55; --head-2: #0f5f74; --head-3: #3b2f8f; }

body { background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); }
#app { background: radial-gradient(500px 380px at 0% 40%, color-mix(in srgb, var(--violet) 7%, transparent), transparent), radial-gradient(500px 400px at 100% 80%, color-mix(in srgb, var(--sky) 7%, transparent), transparent), var(--bg); }

/* ---------- header ---------- */
#top { overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--head-1), var(--head-2) 62%, var(--head-3)); border-radius: 0 0 28px 28px; padding: 14px 16px 14px; gap: 11px; box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--head-2) 80%, #000); }
#top::before { content: ''; position: absolute; inset: -70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 30% 38%, var(--glow-1, rgb(20 210 160 / .45)), transparent), radial-gradient(closest-side at 70% 58%, var(--glow-2, rgb(110 80 240 / .42)), transparent), radial-gradient(closest-side at 46% 72%, var(--glow-3, rgb(240 70 140 / .22)), transparent);
  animation: aurora 26s linear infinite; }
#top::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgb(255 255 255 / .8), transparent), radial-gradient(1px 1px at 38% 12%, rgb(255 255 255 / .7), transparent), radial-gradient(1.5px 1.5px at 64% 30%, rgb(255 255 255 / .6), transparent), radial-gradient(1px 1px at 86% 16%, rgb(255 255 255 / .8), transparent), radial-gradient(1px 1px at 92% 64%, rgb(255 255 255 / .6), transparent), radial-gradient(1.5px 1.5px at 22% 70%, rgb(255 255 255 / .5), transparent);
  animation: twinkle 3.5s ease-in-out infinite alternate; }
@keyframes aurora { to { transform: rotate(360deg); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
.who-txt h1 { font-size: 23px; text-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.who-txt p { opacity: .92; }
.age-txt { display: inline-block; font-weight: 800; }
.age-txt { transform-origin: 0 60%; }
.age-txt.bump { animation: bump .8s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-3deg); color: #fff7b0; } 100% { transform: scale(1); } }
.avatar { width: 60px; height: 60px; background: rgb(255 255 255 / .18); }
.avatar::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, #fff, rgb(255 255 255 / .05) 25%, #9ff3d8 50%, rgb(255 255 255 / .05) 75%, #fff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: spin 7s linear infinite; }
.avatar.pro::before { background: conic-gradient(from 0deg, #ffd34d, #ff9f1c 25%, #fff3b0 50%, #ff9f1c 75%, #ffd34d); }
.avatar em { z-index: 1; }
.icon-btn { background: var(--glass); border: 1px solid var(--glass-line); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), background .2s; }
.icon-btn:hover { transform: rotate(90deg) scale(1.06); background: rgb(255 255 255 / .28); }
.pro-badge { animation: proShine 3s ease-in-out infinite; background-size: 200% 100%; background-image: linear-gradient(110deg, #ffd34d 30%, #fff6c9 45%, #ff9f1c 60%); }
@keyframes proShine { 50% { background-position: 100% 0; } }

.money-row { gap: 8px; }
.pill-money { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; padding: 7px 12px 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pill-money span { display: flex; align-items: center; gap: 4px; font-size: 9.5px; letter-spacing: .03em; opacity: .9; white-space: nowrap; overflow: hidden; }
.pill-money span i { font-style: normal; font-size: 12px; letter-spacing: 0; }
.pill-money b { font-size: 20px; letter-spacing: .01em; text-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.pill-money.gain { animation: gainFlash 1.1s ease; }
.pill-money.loss { animation: lossFlash .9s ease; }
.pill-money.gain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%); transform: translateX(-110%); animation: sweepX 1s ease forwards; pointer-events: none; }
@keyframes gainFlash { 25% { background: rgb(150 255 190 / .35); box-shadow: 0 0 0 2px rgb(190 255 210 / .8), 0 0 26px rgb(120 255 170 / .55); } }
@keyframes lossFlash { 20% { background: rgb(255 120 140 / .35); transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } }
@keyframes sweepX { to { transform: translateX(110%); } }
.econ { display: grid; justify-items: center; align-content: center; gap: 0; padding: 4px 8px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 16px; font-size: 11px; min-width: 58px; }
.econ i { font-style: normal; font-size: 18px; line-height: 1.1; }
.econ.boom { background: #fff; color: var(--good); border-color: #fff; animation: econGlow 2.4s ease-in-out infinite; }
.econ.boom i { animation: hop 1.6s ease-in-out infinite; }
.econ.recession { background: #ffe1e4; color: #c22a33; border-color: #ffc2c8; animation: econBad 2.4s ease-in-out infinite; }
@keyframes econGlow { 50% { box-shadow: 0 0 18px rgb(140 255 190 / .75); } }
@keyframes econBad { 50% { box-shadow: 0 0 18px rgb(255 110 130 / .7); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* stats: five labelled chips */
.stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stats .stat, .stats .stat:nth-child(n+4) { grid-column: auto; }
.stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; background: rgb(0 0 0 / .16); border: 1px solid rgb(255 255 255 / .1); border-radius: 13px; padding: 5px 6px 4px; }
/* emoji and number sit on their own line above the bar: iPhone draws emoji taller than their line, so the line gets room */
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 2px; min-height: 20px; padding-bottom: 1px; overflow: visible; }
.st-top span { font-size: 14px; line-height: 20px; height: 20px; display: inline-flex; align-items: center; }
.stat em, .st-top em { font: 700 15px/20px var(--f-display); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.stat small { font-size: 10px; font-weight: 800; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.stat .bar { height: 6px; min-width: 0; margin-top: 1px; }
.stat.rose { animation: statRose 1.3s ease; }
.stat.fell { animation: statFell 1.3s ease; }
@keyframes statRose { 25% { background: rgb(140 255 190 / .3); box-shadow: 0 0 14px rgb(140 255 190 / .5); } }
@keyframes statFell { 25% { background: rgb(255 120 140 / .32); box-shadow: 0 0 14px rgb(255 120 140 / .45); } }
.stat .float { top: -13px; right: -3px; font-size: 12px; box-shadow: 0 4px 10px rgb(0 0 0 / .2); z-index: 2; }
.bar i { position: relative; overflow: hidden; }
#top .bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); transform: translateX(-100%); animation: barShine 4s ease-in-out infinite; }
@keyframes barShine { 60%, 100% { transform: translateX(100%); } }

/* ---------- tab bar ---------- */
#tabs { background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); border-radius: 24px 24px 0 0; }
#tabs::before { content: ''; position: absolute; top: 6px; left: var(--tx, -100px); width: 54px; height: 34px; margin-left: -27px; border-radius: 13px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: left .5s cubic-bezier(.3, 1.45, .45, 1), opacity .25s; }
#tabs.has-on::before { opacity: 1; }
#tabs > button:not(.age-btn) { position: relative; padding-top: 10px; }
#tabs > button:not(.age-btn):hover { color: var(--ink); }
#tabs > button:not(.age-btn):hover svg { transform: translateY(-2px); }
#tabs > button.on svg { animation: tabHop .55s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes tabHop { 0% { transform: scale(.7); } 60% { transform: translateY(-4px) scale(1.2); } 100% { transform: translateY(-2px) scale(1.1); } }

.age-btn { position: relative; width: 76px; height: 76px; margin-top: -34px; background: radial-gradient(circle at 35% 28%, #ffb6c1, var(--accent-2) 52%, #c9284a); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent-2) 85%, #000), inset 0 -5px 0 rgb(0 0 0 / .14), inset 0 3px 0 rgb(255 255 255 / .35); }
.age-btn::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 12%, #ff5d73 26%, #ffc145 40%, transparent 54%, transparent 62%, #b06cff 76%, #4c8dff 88%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: spin 3.2s linear infinite; }
.age-btn:hover:not(:disabled) { transform: scale(1.06) rotate(-3deg); }
.age-btn:hover:not(:disabled) b { animation: spin .6s cubic-bezier(.3, 1.4, .5, 1); }
.age-btn:disabled::before { animation-duration: .6s; }
.age-btn b { text-shadow: 0 2px 6px rgb(0 0 0 / .25); }

/* ---------- screen title ---------- */
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 0; min-width: 0; }
.view-head h2 { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--ink) 40%, color-mix(in srgb, var(--accent) 80%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.view-head h2 svg { width: 26px; height: 26px; flex: none; fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view-head .fold-all { margin: 0; flex: none; gap: 6px; }
.fold-all button { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 3px 9px; font-size: 11px; white-space: nowrap; transition: transform .15s, color .15s, background .15s; }
.fold-all button:hover { transform: translateY(-1px); color: var(--accent); background: var(--surface); }

/* ---------- cards: each section gets its own colour ---------- */
.card { animation: none; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 20px; }
.card.flat { background: var(--surface); box-shadow: var(--shadow); padding: 14px; }
.ci { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1);
  background: linear-gradient(140deg, hsl(var(--h, 160) 95% 93%), hsl(var(--h, 160) 80% 83%)); box-shadow: inset 0 -2px 0 hsl(var(--h, 160) 60% 60% / .35); }
.card.flat .ci, .card.flat.fold > summary .ci { background: linear-gradient(140deg, hsl(var(--h, 160) 95% 93%), hsl(var(--h, 160) 80% 83%)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ci, :root:not([data-theme="light"]) .card.flat .ci { background: linear-gradient(140deg, hsl(var(--h, 160) 45% 30%), hsl(var(--h, 160) 50% 18%)); box-shadow: inset 0 0 0 1px hsl(var(--h, 160) 60% 55% / .35); } }
:root[data-theme="dark"] .ci, :root[data-theme="dark"] .card.flat .ci { background: linear-gradient(140deg, hsl(var(--h, 160) 45% 30%), hsl(var(--h, 160) 50% 18%)); box-shadow: inset 0 0 0 1px hsl(var(--h, 160) 60% 55% / .35); }
.card.society .ci, .card.illum .ci { background: rgb(255 255 255 / .1); box-shadow: none; }
.card h3 { font-size: 17.5px; }
.card.fold { transition: box-shadow .25s, transform .25s; }
.card.fold[open] { box-shadow: var(--shadow), inset 4px 0 0 hsl(var(--h, 160) 75% 50%); }
.card.fold:not([open]):hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px hsl(var(--h, 160) 60% 35% / .55); }
.card.fold > summary:hover .ci { transform: rotate(-10deg) scale(1.1); }
.card.fold .chev { width: 28px; height: 28px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; font-size: 19px; padding-bottom: 2px; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s; }
.card.fold[open] .chev { background: hsl(var(--h, 160) 80% 50% / .18); color: hsl(var(--h, 160) 70% 45%); }
.card.fold.just-opened > .fold-body > * { animation: foldIn .45s cubic-bezier(.2, .9, .3, 1.15) both; }
.card.fold.just-opened > .fold-body > :nth-child(2) { animation-delay: .04s; } .card.fold.just-opened > .fold-body > :nth-child(3) { animation-delay: .08s; }
.card.fold.just-opened > .fold-body > :nth-child(4) { animation-delay: .12s; } .card.fold.just-opened > .fold-body > :nth-child(n+5) { animation-delay: .16s; }
.card.fold.just-opened canvas.chart { animation: wipe 1s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes foldIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ledger.card { border-radius: 20px; }

/* ---------- screen transitions ---------- */
#view { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent; }
#view.enter > * { animation: viewIn .5s cubic-bezier(.2, .9, .25, 1.08) both; }
#view.enter.from-r > * { --fx: 34px; --fy: 0px; } #view.enter.from-l > * { --fx: -34px; --fy: 0px; }
#view.enter > :nth-child(2) { animation-delay: .04s; } #view.enter > :nth-child(3) { animation-delay: .08s; } #view.enter > :nth-child(4) { animation-delay: .12s; }
#view.enter > :nth-child(5) { animation-delay: .16s; } #view.enter > :nth-child(6) { animation-delay: .2s; } #view.enter > :nth-child(n+7) { animation-delay: .24s; }
#view.enter canvas.chart { animation: wipe 1.1s .15s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes viewIn { from { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 16px)) scale(.985); } }

/* ---------- life story: a timeline ---------- */
.log { position: relative; padding-left: 22px; gap: 14px; }
.log::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--violet) 50%, transparent) 40%, transparent); }
.log-year { position: relative; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: 20px; }
.log-year::before { content: ''; position: absolute; left: -21px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line)); box-sizing: border-box; }
.log-year.latest { border: 2px solid transparent; animation: angSpin 7s linear infinite;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ang), var(--accent), var(--sky), var(--violet), var(--accent-2), var(--gold), var(--accent)) border-box;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--accent) 65%, transparent); }
.log-year.latest::before { left: -22px; background: var(--accent); border-color: var(--surface); animation: dotPulse 1.8s ease-out infinite; }
@keyframes angSpin { to { --ang: 360deg; } }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.age-chip { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--sky))); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent); }
.log-year p { grid-template-columns: 28px 1fr; gap: 8px; margin-bottom: 7px; }
.log-year p i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--sunk); }
.log-year p.good i { background: color-mix(in srgb, var(--good) 18%, var(--sunk)); }
.log-year p.bad i { background: color-mix(in srgb, var(--bad) 18%, var(--sunk)); }
.log-year p.warn i { background: color-mix(in srgb, var(--warn) 20%, var(--sunk)); }
.log-year p span { padding-top: 3px; }
#view.aged .log-year.latest p { animation: logIn .5s cubic-bezier(.2, .9, .3, 1.2) both; }
#view.aged .log-year.latest p:nth-of-type(1) { animation-delay: .25s; } #view.aged .log-year.latest p:nth-of-type(2) { animation-delay: .37s; }
#view.aged .log-year.latest p:nth-of-type(3) { animation-delay: .49s; } #view.aged .log-year.latest p:nth-of-type(4) { animation-delay: .61s; }
#view.aged .log-year.latest p:nth-of-type(5) { animation-delay: .73s; } #view.aged .log-year.latest p:nth-of-type(n+6) { animation-delay: .85s; }
@keyframes logIn { from { opacity: 0; transform: translateX(-14px); } }

/* ---------- tiles and buttons ---------- */
.tile { position: relative; overflow: hidden; border-radius: 18px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s, border-color .2s; }
.tile i { transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 24px -12px hsl(var(--h, 160) 70% 38% / .6); border-color: hsl(var(--h, 160) 70% 55% / .75); }
.tile:hover:not(:disabled) i { transform: scale(1.2) rotate(-7deg); }
.tile::after, .btn.primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .45), transparent); transform: skewX(-20deg); }
.tile:hover:not(:disabled)::after, .btn.primary:hover:not(:disabled)::after { animation: sweep .75s ease; }
@keyframes sweep { to { left: 130%; } }
.btn.primary { position: relative; overflow: hidden; }
.btn { transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background .15s, box-shadow .15s, border-color .15s; }
.btn:hover:not(:disabled):not(.primary) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.seg button.on { animation: segOn .35s cubic-bezier(.3, 1.6, .5, 1); color: var(--accent); }
@keyframes segOn { from { transform: scale(.9); } }

/* ---------- pop-ups ---------- */
.modal-wrap { background: radial-gradient(circle at 50% 40%, rgb(30 40 80 / .42), rgb(5 8 18 / .68)); -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15); }
.modal { animation: modalIn .5s cubic-bezier(.2, 1.25, .3, 1); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
@keyframes modalIn { from { transform: translateY(70px) scale(.9); opacity: 0; } 50% { opacity: 1; } }
.hero { position: relative; }
.hero::before { content: ''; position: absolute; left: 50%; top: 54px; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 30%, transparent) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: spin 16s linear infinite, fade .6s ease both; }
.hero.good::before { background: repeating-conic-gradient(color-mix(in srgb, var(--gold) 45%, transparent) 0 9deg, transparent 9deg 22.5deg); animation-duration: 9s, .6s; }
.hero.bad::before { background: repeating-conic-gradient(color-mix(in srgb, var(--bad) 30%, transparent) 0 9deg, transparent 9deg 22.5deg); }
.hero span { position: relative; z-index: 1; }
.hero.good span { animation: bounceIn .55s cubic-bezier(.2, 1.6, .4, 1), heroFloat 2.6s 0.6s ease-in-out infinite; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 22%, transparent), var(--shadow); }
.hero.bad span { animation: bounceIn .5s cubic-bezier(.2, 1.6, .4, 1), heroShake .5s .5s; }
@keyframes heroFloat { 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes heroShake { 20% { transform: translateX(-7px) rotate(-6deg); } 40% { transform: translateX(7px) rotate(6deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.modal-head h2 { animation: titleIn .45s .08s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(8px) scale(.95); } }
.modal-body > .ev-text + .choices > .btn { animation: choiceIn .4s cubic-bezier(.2, 1.3, .4, 1) both; }
.modal-body > .ev-text + .choices > .btn:nth-child(1) { animation-delay: .12s; } .modal-body > .ev-text + .choices > .btn:nth-child(2) { animation-delay: .18s; }
.modal-body > .ev-text + .choices > .btn:nth-child(3) { animation-delay: .24s; } .modal-body > .ev-text + .choices > .btn:nth-child(n+4) { animation-delay: .3s; }
@keyframes choiceIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.btn.choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.x { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), background .15s; }
.x:hover { transform: rotate(90deg); background: color-mix(in srgb, var(--bad) 18%, var(--sunk)); }

/* ---------- toast ---------- */
#toast { display: flex; align-items: center; gap: 10px; text-align: left; padding: 11px 16px 13px 12px; overflow: hidden; transform: translate(-50%, 30px) scale(.9); border: 1px solid rgb(255 255 255 / .12); }
#toast.show { transform: translate(-50%, 0) scale(1); }
#toast i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--f-display); font-style: normal; background: rgb(255 255 255 / .22); }
#toast.show i { animation: bounceIn .5s cubic-bezier(.2, 1.6, .4, 1); }
#toast::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgb(255 255 255 / .45); transform-origin: left; transform: scaleX(0); }
#toast.show::after { animation: toastTime 2.8s linear forwards; }
@keyframes toastTime { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- effects layer ---------- */
.tap-fx { position: fixed; z-index: 300; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; border: 2px solid var(--accent); animation: tapFx .55s ease-out forwards; }
.tap-fx.big { border-color: var(--accent-2); border-width: 3px; animation: tapFxBig .7s ease-out forwards; }
@keyframes tapFx { from { transform: scale(.3); opacity: .9; } to { transform: scale(5); opacity: 0; } }
@keyframes tapFxBig { from { transform: scale(.5); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.pop-at { position: fixed; z-index: 300; transform: translate(-50%, 0); pointer-events: none; font: 700 14px var(--f-display); padding: 3px 10px; border-radius: 99px; background: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .25); white-space: nowrap; animation: popAt 1.6s cubic-bezier(.2, .9, .3, 1) forwards; }
.pop-at.up { color: #12a150; } .pop-at.down { color: #e5484d; }
@keyframes popAt { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 15% { opacity: 1; transform: translate(-50%, 6px) scale(1.12); } 70% { opacity: 1; transform: translate(-50%, 14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, 26px); } }

/* the new-year burst */
.age-fx { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; pointer-events: none; animation: afBg 1.5s ease forwards;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%); }
.age-fx > * { grid-area: 1 / 1; }
.af-num { display: grid; justify-items: center; line-height: 1; color: #fff; animation: afNum 1.5s cubic-bezier(.2, 1.4, .3, 1) forwards; filter: drop-shadow(0 6px 22px rgb(0 0 0 / .35)); }
.af-num small { font: 700 16px var(--f-display); text-transform: uppercase; letter-spacing: .3em; opacity: .9; }
.af-num b { font: 700 108px/1 var(--f-display); background: linear-gradient(180deg, #fff, #c8ffe9 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-num span { font: 700 15px var(--f-display); opacity: .85; letter-spacing: .12em; }
.af-ring { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--accent); animation: afRing 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
.af-ring.r2 { border-color: var(--accent-2); border-width: 2px; animation-delay: .12s; opacity: 0; }
.af-p { width: 10px; height: 10px; border-radius: 3px; background: var(--gold); transform: rotate(var(--a)) translateY(0); animation: afP 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
.af-p:nth-child(3n) { background: var(--accent-2); border-radius: 50%; } .af-p:nth-child(3n+1) { background: var(--sky); }
.age-fx.milestone .af-num b { background: linear-gradient(180deg, #fff8d6, #ffd34d 55%, #ff9f1c); -webkit-background-clip: text; background-clip: text; }
.age-fx.milestone .af-ring { border-color: var(--gold); }
.age-fx.milestone { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 60%); }
@keyframes afBg { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes afNum { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 22% { opacity: 1; transform: scale(1.12) rotate(2deg); } 34% { transform: scale(1); } 72% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(.55) translateY(-38vh); } }
@keyframes afRing { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(4.2); opacity: 0; } }
@keyframes afP { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.3) rotate(180deg); opacity: 0; } }

/* ---------- emblems: Square and Compasses, Eye of Providence ---------- */
.emb { display: block; width: 100%; height: 100%; overflow: visible; }
.emb-wrap { display: grid; place-items: center; width: 100%; height: 100%; }
.ci .emb-wrap { width: 34px; height: 34px; }
.card .ci:has(.emb-wrap) { background: none; box-shadow: none; }
.hero span:has(.emb-wrap) { background: radial-gradient(circle, #2a2410, #0e0c06); box-shadow: 0 0 26px rgb(242 199 90 / .45); }
.hero span .emb-wrap { width: 70px; height: 70px; }
.log-year p i:has(.emb-wrap) { background: none; }
.log-year p i .emb-wrap { width: 26px; height: 26px; }
.emb.eye .eye-ball { transform-origin: 50px 36px; animation: blink 6s ease-in-out infinite; }
.emb.eye .rays { animation: raysPulse 3s ease-in-out infinite; }
@keyframes raysPulse { 50% { opacity: .4; } }
.crest { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; background: radial-gradient(circle at 14% 50%, rgb(242 199 90 / .28), transparent 55%), rgb(255 255 255 / .05); border: 1px solid rgb(242 199 90 / .25); }
.crest > .emb { width: 76px; height: 76px; flex: none; animation: crestGlow 3.6s ease-in-out infinite; }
.crest > div { display: grid; min-width: 0; }
.crest b { font: 700 22px var(--f-display); color: #f2c75a; }
.crest span { font-size: 13px; opacity: .85; }
@keyframes crestGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgb(242 199 90 / .35)); } 50% { filter: drop-shadow(0 0 16px rgb(242 199 90 / .75)); } }
.card.masons { background: linear-gradient(135deg, #0f1d44, #1c2f68); color: #eef2ff; border-color: rgb(231 184 76 / .3); }
.card.masons .sub, .card.masons .kv > span, .card.masons .fine { color: #c3cdf0; }
.card.masons .tile { background: rgb(255 255 255 / .06); border-color: rgb(231 184 76 / .22); color: #eef2ff; }
.card.masons .tile small { color: #c3cdf0; }
.card.masons .chev, .card.society .chev, .card.illum .chev { background: rgb(255 255 255 / .1); color: #f2c75a; }
.card.masons[open], .card.illum[open] { box-shadow: var(--shadow), inset 4px 0 0 #e7b84c; }
.card.masons .btn.primary { --accent: #e7b84c; --accent-ink: #2a1c00; }

/* ---------- Alzheimer's: the screen fades with the mind (--fog goes 0 → 1) ---------- */
/* light on the phone: no blur, no full-screen filter on the scrolling view, nothing that animates forever (the question
   marks in the text do most of the work) */
body.alz #top, body.alz #tabs { filter: saturate(calc(1 - var(--fog) * .9)) sepia(calc(var(--fog) * .3)); }
body.alz #top, body.alz #view { opacity: calc(1 - var(--fog) * .4); }
body.alz #app::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgb(200 200 210 / calc(var(--fog) * .18)) calc(78% - var(--fog) * 55%), rgb(200 200 210 / calc(var(--fog) * .9)) 100%); }
body.alz #view > :nth-child(odd):not(.view-head) { rotate: calc(var(--fog) * var(--fog) * -1.2deg); translate: calc(var(--fog) * var(--fog) * -6px) 0; }
body.alz #view > :nth-child(even):not(.view-head) { rotate: calc(var(--fog) * var(--fog) * 1.2deg); translate: calc(var(--fog) * var(--fog) * 6px) 0; }
body.alz .log-year:not(.latest) { opacity: calc(1 - var(--fog) * .65); }
body.alz .avatar .av { filter: grayscale(var(--fog)); }
body.alz .modal { filter: saturate(calc(1 - var(--fog) * .7)); }
body.alz .age-fx { filter: grayscale(var(--fog)); opacity: calc(1 - var(--fog) * .6); }
.age-btn.lost { background: radial-gradient(circle at 35% 28%, #d9d9de, #9a9aa5 60%, #6d6d78); opacity: .45; animation: none; }
.age-btn.lost::before { opacity: .25; }

/* the game is a full-screen app: only #view and pop-ups scroll, never the page (the Age ring pokes past the bottom edge) */
html, body { overflow: hidden; }

/* ---------- v1.14: fitness plans, the presidency, Minerval ---------- */
.fit-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fit-plan { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 10px 6px; border-radius: 16px; border: 1.5px solid hsl(var(--h, 160) 60% 55% / .45); background: linear-gradient(160deg, hsl(var(--h, 160) 90% 50% / .1), transparent 70%), var(--surface); min-width: 0; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s; }
.fit-plan:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px hsl(var(--h, 160) 70% 38% / .6); }
.fit-plan > i { font-style: normal; font-size: 28px; line-height: 1.1; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.fit-plan:hover > i { transform: scale(1.18) rotate(-6deg); }
.fit-plan span { display: grid; gap: 1px; min-width: 0; }
.fit-plan small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fit-plan b { font-size: 12.5px; line-height: 1.2; }
.fit-plan em { font-style: normal; font-size: 11px; font-weight: 800; color: hsl(var(--h, 160) 60% 42%); }
.job small.fx { color: var(--ink); font-weight: 700; opacity: .8; }
.job.fit-opt.cur { background: color-mix(in srgb, var(--good) 9%, transparent); border-radius: 12px; padding-left: 6px; padding-right: 6px; }
.pres-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(242 199 90 / .25); }
.pres-head > div { display: grid; flex: 1; min-width: 0; }
.pres-head b { font: 700 18px var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pres-head small { color: #e8d79c; font-weight: 700; }
.pres-ic { font-size: 34px; filter: drop-shadow(0 0 10px rgb(242 199 90 / .5)); animation: hop 2.4s ease-in-out infinite; }
.card.illum .cand-row { border-bottom-color: rgb(255 255 255 / .1); }
.card.illum .cand-row small { color: #e8d79c; }
.card.illum .jicon { background: rgb(255 255 255 / .08); }
.card.illum .sub-h { color: #e8d79c; }
.crest.owl .owl-ic { font-size: 54px; line-height: 1; width: 76px; text-align: center; flex: none; animation: crestGlow 3.6s ease-in-out infinite, owlTilt 5s ease-in-out infinite; }
@keyframes owlTilt { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-8deg); } 55% { transform: rotate(6deg); } }
@media (max-width: 420px) { .fit-plan b { font-size: 11.5px; } .fit-plans { gap: 6px; } }

/* ---------- v1.15: money in politics ---------- */
.pres-head { background: var(--sunk); border: 1px solid var(--line); }
.pres-head small { color: var(--muted); }
.card.illum .pres-head { background: rgb(255 255 255 / .06); border-color: rgb(242 199 90 / .25); }
.card.illum .pres-head small { color: #e8d79c; }
.cand-row .bar { margin-top: 4px; max-width: 200px; height: 6px; }
.card.elections .chips { margin-top: 2px; }

/* ---------- v1.15: PRO face designer ---------- */
.av-maker { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: start; }
.av-prev { display: grid; gap: 8px; position: sticky; top: 60px; }
.av-prev figure { margin: 0; display: grid; justify-items: center; gap: 2px; }
.av-prev .av { width: 80px; height: 80px; box-shadow: var(--shadow); }
.av-prev figcaption { font-size: 11px; font-weight: 800; color: var(--muted); }
.av-opts { display: grid; gap: 8px; min-width: 0; }
.av-row { display: grid; gap: 4px; }
.av-row > span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.av-opts .chips .chip { padding: 4px 10px; font-size: 12px; }
.swatch-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); background: var(--c); padding: 0; transition: transform .2s; }
.swatch-btn.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); transform: scale(1.1); }
@media (max-width: 420px) { .av-maker { grid-template-columns: 1fr; } .av-prev { grid-template-columns: 1fr 1fr; position: static; } }

/* ---------- v1.17.1: coin boxes ---------- */
.coin-box { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--sunk); border: 1px solid var(--line); }
.coin-head { display: flex; align-items: center; gap: 10px; }
.coin-head i { font-style: normal; font-size: 28px; }
.coin-head div { display: grid; }
.coin-head em { margin-left: auto; }
.coin-box .chart { height: 110px; margin: 6px 0 4px; }
.coin-head b { font: 700 18px var(--f-display); }
.coin-head small { color: var(--muted); font-weight: 700; }
.coin-row { display: grid; gap: 4px; }
.coin-row > span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.coin-row .chip { font-size: 12px; padding: 4px 10px; }
.trade-btns .btn { flex: 1; align-items: center; }
#tLev, #tAmt { margin-top: 6px; }

/* ---------- color themes (Menu › Colors). html:root beats the dark-mode rules so each palette works in light and dark ---------- */
html:root[data-palette="ocean"] { --accent: #1e88e5; --accent-2: #ff7a59; --head-1: #1565c0; --head-2: #26a5d8; --felt: #0d4f7a; --accent-ink: #ffffff; }
html:root[data-palette="sunset"] { --accent: #f97316; --accent-2: #e11d48; --head-1: #ea580c; --head-2: #f43f5e; --felt: #7c2d12; --accent-ink: #ffffff; }
html:root[data-palette="forest"] { --accent: #16a34a; --accent-2: #d97706; --head-1: #14532d; --head-2: #4d7c0f; --felt: #14532d; --accent-ink: #ffffff; }
html:root[data-palette="royal"] { --accent: #8b5cf6; --accent-2: #f59e0b; --head-1: #4c1d95; --head-2: #9333ea; --felt: #3b0764; --accent-ink: #ffffff; }
html:root[data-palette="rose"] { --accent: #ec4899; --accent-2: #8b5cf6; --head-1: #be185d; --head-2: #f472b6; --felt: #831843; --accent-ink: #ffffff; }
html:root[data-palette="gold"] { --accent: #d4a017; --accent-2: #e11d48; --head-1: #1c1c28; --head-2: #4a3b12; --felt: #1c1c28; --accent-ink: #1a1205; }
/* Halloween: always dark, pumpkin orange and witch purple, bats in the header */
html:root[data-palette="halloween"] {
  --bg: #120c19; --surface: #1d1427; --sunk: #2a1c38; --ink: #f6ecff; --muted: #b9a1d1; --line: #3a2a4b;
  --accent: #ff7a1a; --accent-ink: #1f0c00; --accent-2: #a463ff; --gold: #ffb020; --good: #7ed957; --bad: #ff5468; --warn: #ffb020;
  --head-1: #3b0d5c; --head-2: #d9480f; --felt: #2a0e3d; color-scheme: dark;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 26px -12px rgb(0 0 0 / .8);
}
html:root[data-palette="halloween"] body {
  background: radial-gradient(circle at 85% -10%, rgb(255 122 26 / .18), transparent 40%), var(--bg);
  background-image: radial-gradient(circle at 85% -10%, rgb(255 122 26 / .16), transparent 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M30 40c4-6 8-6 10-2 2-4 6-4 10 2-4-1-6 1-7 4-1-2-3-3-3-3s-2 1-3 3c-1-3-3-5-7-4z' fill='%23a463ff' opacity='.08'/%3E%3Cpath d='M100 105c4-6 8-6 10-2 2-4 6-4 10 2-4-1-6 1-7 4-1-2-3-3-3-3s-2 1-3 3c-1-3-3-5-7-4z' fill='%23ff7a1a' opacity='.07'/%3E%3C/svg%3E");
  background-color: var(--bg);
}
html:root[data-palette="halloween"] .card { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
html:root[data-palette="halloween"] .tile:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); }
/* the swatches in the Menu */
.pal-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pal-pick button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: linear-gradient(135deg, var(--a), var(--b)); display: grid; place-items: center; font-size: 15px; }
.pal-pick button.on { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
/* achievements */
.ach-head { display: grid; gap: 6px; margin-bottom: 8px; }
.ach-cat { margin: 14px 0 6px; font: 800 12px var(--f-body); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--sunk); }
.ach i { font-style: normal; font-size: 24px; }
.ach b { display: block; font-size: 13px; line-height: 1.2; }
.ach small { display: block; font-size: 11px; color: var(--muted); line-height: 1.25; }
.ach.locked i { filter: grayscale(1); opacity: .35; }
.ach.locked b { color: var(--muted); }
.ach.got { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, var(--sunk)), var(--sunk)); }
/* birth screen: the family wealth options wrap into a grid so every one is visible (no hidden sideways scroll) */
.kv.wrap:has(#nlW) { flex-wrap: wrap; }
#nlW { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); width: 100%; overflow: visible; }
#nlW button { white-space: normal; display: grid; gap: 1px; text-align: center; }
#nlW button small { font-weight: 700; font-size: 11px; opacity: .8; }

/* ---------- living themes: header glows, backgrounds and ambience per palette ---------- */
html:root[data-palette="ocean"] { --glow-1: rgb(60 200 255 / .5); --glow-2: rgb(20 90 220 / .45); --glow-3: rgb(120 255 230 / .25); }
html:root[data-palette="sunset"] { --glow-1: rgb(255 190 80 / .55); --glow-2: rgb(255 70 120 / .45); --glow-3: rgb(170 60 200 / .3); }
html:root[data-palette="forest"] { --glow-1: rgb(140 220 90 / .45); --glow-2: rgb(30 120 70 / .5); --glow-3: rgb(230 200 90 / .25); }
html:root[data-palette="royal"] { --glow-1: rgb(190 120 255 / .5); --glow-2: rgb(80 40 200 / .5); --glow-3: rgb(255 200 80 / .3); }
html:root[data-palette="rose"] { --glow-1: rgb(255 150 200 / .55); --glow-2: rgb(220 60 140 / .45); --glow-3: rgb(255 220 240 / .35); }
html:root[data-palette="gold"] { --glow-1: rgb(255 210 90 / .35); --glow-2: rgb(120 90 20 / .5); --glow-3: rgb(255 240 180 / .2); }
html:root[data-palette="halloween"] { --glow-1: rgb(255 120 20 / .55); --glow-2: rgb(130 40 220 / .55); --glow-3: rgb(60 255 120 / .18); }
html:root[data-palette="ocean"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #26a5d8 18%, var(--bg)), var(--bg)); }
html:root[data-palette="sunset"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #f97316 16%, var(--bg)), color-mix(in srgb, #f43f5e 6%, var(--bg))); }
html:root[data-palette="forest"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #4d7c0f 16%, var(--bg)), var(--bg)); }
html:root[data-palette="royal"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #9333ea 16%, var(--bg)), var(--bg)); }
html:root[data-palette="rose"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #f472b6 18%, var(--bg)), var(--bg)); }
html:root[data-palette="gold"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #d4a017 14%, var(--bg)), var(--bg)); }
html:root[data-palette] #app { background: transparent; }
html:root[data-palette] .card { border-color: color-mix(in srgb, var(--accent) 16%, var(--line)); }

/* the ambience layer: drifting particles above the page, below the tab bar, never catching taps */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.fx-p { position: absolute; left: var(--x); top: 0; opacity: .5; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; }
.fx-rise { animation-name: fxRise; }
.fx-fall { animation-name: fxFall; }
.fx-float { top: var(--y); animation-name: fxFloat; animation-timing-function: ease-in-out; }
.fx-twinkle { top: var(--y); animation-name: fxTwinkle; animation-timing-function: ease-in-out; opacity: 0; }
.fx-bat { top: calc(var(--y) * .45); left: -40px; opacity: .55; animation-name: fxBat; }
@keyframes fxRise { from { transform: translate(0, 105vh); } 50% { transform: translate(18px, 50vh); } to { transform: translate(-6px, -8vh); } }
@keyframes fxFall { from { transform: translate(0, -8vh) rotate(0deg); } 50% { transform: translate(-30px, 50vh) rotate(180deg); } to { transform: translate(20px, 105vh) rotate(360deg); } }
@keyframes fxFloat { 0%, 100% { transform: translate(0, 0); opacity: .15; } 50% { transform: translate(14px, -26px); opacity: .55; } }
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(.6); } 50% { opacity: .7; transform: scale(1.1); } }
@keyframes fxBat { 0% { transform: translate(0, 0) scale(1, 1); } 10% { transform: translate(12vw, -14px) scale(1, .6); } 20% { transform: translate(24vw, 8px) scale(1, 1); } 35% { transform: translate(42vw, -18px) scale(1, .6); } 50% { transform: translate(60vw, 10px) scale(1, 1); } 65% { transform: translate(78vw, -12px) scale(1, .6); } 80% { transform: translate(96vw, 6px) scale(1, 1); } 100% { transform: translate(115vw, -20px) scale(1, .6); } }

/* ---------- Halloween, all the way ---------- */
/* a spider dangles from the corner on a silk thread */
.fx-spider { position: absolute; right: 18px; top: 0; width: 2px; height: 120px; background: linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .15)); transform-origin: top center; animation: fxSpider 7s ease-in-out infinite; }
.fx-spider i { position: absolute; bottom: -16px; left: -9px; font-style: normal; font-size: 20px; opacity: .8; }
@keyframes fxSpider { 0%, 100% { height: 90px; transform: rotate(3deg); } 50% { height: 150px; transform: rotate(-3deg); } }
/* low mist rolling above the tab bar */
.fx-mist { position: absolute; left: -20%; right: -20%; bottom: 60px; height: 170px; opacity: .55;
  background: radial-gradient(40% 60% at 20% 70%, rgb(160 110 220 / .28), transparent), radial-gradient(35% 55% at 65% 80%, rgb(120 80 190 / .25), transparent), radial-gradient(30% 50% at 90% 60%, rgb(255 140 60 / .12), transparent);
  animation: fxMist 18s ease-in-out infinite alternate; filter: blur(6px); }
@keyframes fxMist { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* cards glow like candlelight */
html:root[data-palette="halloween"] .card { box-shadow: 0 0 0 1px rgb(255 122 26 / .08), 0 10px 30px -18px rgb(255 122 26 / .45), var(--shadow); }
html:root[data-palette="halloween"] .log-year.latest { animation: candle 3.2s ease-in-out infinite; }
@keyframes candle { 0%, 100% { box-shadow: 0 0 22px -6px rgb(255 122 26 / .55); } 45% { box-shadow: 0 0 28px -4px rgb(255 150 40 / .7); } 52% { box-shadow: 0 0 16px -8px rgb(255 110 20 / .45); } }
html:root[data-palette="halloween"] #top { box-shadow: 0 14px 40px -16px rgb(255 100 20 / .55); }
html:root[data-palette="halloween"] #tabs { background: linear-gradient(180deg, #1f1430, #170f22); }
/* birth screen (PRO): appearance and stats fold away; hairstyle and beard step with arrows */
.nl-fold { margin: 10px 0; border-radius: 16px; background: var(--sunk); padding: 0 12px; }
.nl-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 0; font-weight: 800; cursor: pointer; }
.nl-fold > summary::-webkit-details-marker { display: none; }
.nl-fold > summary > span:first-child { flex: 1; }
.nl-fold[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.nl-arrow { font-style: normal; transition: transform .2s; color: var(--muted); }
.nl-fold[open] .nl-arrow { transform: rotate(180deg); }
.nl-mini .av { width: 30px; height: 30px; }
.nl-fold[open] .nl-mini { display: none; }
.av-cyc { display: flex; align-items: center; gap: 8px; }
.av-cyc b { min-width: 96px; text-align: center; font-size: 14px; }
.av-cyc .chip { width: 34px; height: 30px; padding: 0; justify-content: center; font-size: 18px; font-weight: 800; }
/* the age button: a drawn pumpkin everywhere is hidden, except in Halloween where it replaces the round button */
.age-btn .pk { display: none; }
html:root[data-palette="halloween"] .age-btn {
  position: relative; width: 92px; height: 86px; margin-top: -40px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  animation: pkBob 3.2s ease-in-out infinite;
}
html:root[data-palette="halloween"] .age-btn .pk { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 12px rgb(255 130 20 / .55)) drop-shadow(0 8px 10px rgb(0 0 0 / .55)); }
html:root[data-palette="halloween"] .age-btn .pk-face { animation: pkFlicker 2.6s steps(1, end) infinite; }
html:root[data-palette="halloween"] .age-btn b { display: none; }
html:root[data-palette="halloween"] .age-btn span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 10px; letter-spacing: .14em; color: #fff3c4; text-shadow: 0 1px 3px #3a1300, 0 0 6px rgb(0 0 0 / .6); }
html:root[data-palette="halloween"] .age-btn:hover:not(:disabled) .pk { filter: drop-shadow(0 0 20px rgb(255 160 40 / .85)) drop-shadow(0 8px 10px rgb(0 0 0 / .55)); }
html:root[data-palette="halloween"] .age-btn:active:not(:disabled) { transform: scale(.92); }
html:root[data-palette="halloween"] .age-btn.spin { animation: pkWobble .5s ease-in-out infinite; }
html:root[data-palette="halloween"] .age-btn:disabled .pk-face { animation: none; opacity: .35; }
@keyframes pkBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pkWobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pkFlicker { 0% { opacity: 1; } 18% { opacity: .82; } 22% { opacity: 1; } 47% { opacity: .9; } 52% { opacity: .7; } 55% { opacity: 1; } 80% { opacity: .88; } }
html:root[data-palette="halloween"] #tabs .age-btn svg.pk { width: 100%; height: 100%; fill: initial; stroke: none; transform: none; }
html:root[data-palette="halloween"] .age-btn::before, html:root[data-palette="halloween"] .age-btn::after { display: none; }
/* phones: no double-tap or pinch zoom inside the game, and taps register instantly where the finger is */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, summary, .row-item, .tile, .chip { touch-action: manipulation; }

/* ---------- account (js/cloud.js) ---------- */
.acct .modal-body { display: grid; gap: 12px; }
.acct-form { display: grid; gap: 12px; }
.acct-form .btn.big { width: 100%; align-items: center; }
.acct-tabs button { flex: 1 1 0; }
.acct .pw { position: relative; display: block; }
.acct .pw input { padding-right: 48px; }
.acct .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-size: 18px; padding: 6px; line-height: 1; }
.acct-check { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; cursor: pointer; }
.acct-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.acct-err { margin: 0; min-height: 0; color: var(--bad); font-weight: 800; font-size: 13px; text-align: center; }
.acct-err:empty { display: none; }
.acct-link { border: 0; background: transparent; color: var(--accent); font-weight: 800; font-size: 13px; padding: 4px; justify-self: center; text-decoration: underline; }
.acct-link.danger { color: var(--bad); }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; }
.acct-or::before, .acct-or::after { content: ''; flex: 1; height: 1.5px; background: var(--line); }
.acct-g { width: 100%; flex-direction: row; justify-content: center; align-items: center; gap: 10px; background: #fff; color: #1f1f1f; border-color: #dadce0; }
.acct-g:hover:not(:disabled) { background: #f8f9fa; }
.acct-me { display: flex; align-items: center; gap: 12px; }
.acct-me div { display: grid; min-width: 0; }
.acct-me b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-me small { color: var(--muted); font-weight: 700; }
.acct-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 22px var(--f-display); color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.acct .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acct .choices .btn { align-items: center; }
.acct-nl { width: 100%; flex-direction: row; justify-content: center; margin-bottom: 4px; }
[hidden] { display: none !important; }

/* ---------- Hall of Trophies (achieve.js) ---------- */
.modal.hall { --wood1: #7a4a26; --wood2: #4f2e16; }
.hall .modal-body { display: grid; gap: 12px; }
.hall-top { display: flex; align-items: stretch; gap: 10px; }
.hall-rank { flex: 1; display: grid; gap: 1px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 26%, var(--sunk)), var(--sunk)); }
.hall-rank span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hall-rank b { font: 700 21px var(--f-display); }
.hall-rank small { font-size: 12px; color: var(--muted); font-weight: 700; }
.hall-count { display: grid; place-items: center; align-content: center; padding: 8px 16px; border-radius: 16px; background: var(--sunk); }
.hall-count b { font: 700 26px var(--f-display); line-height: 1; }
.hall-count b small { font-size: 14px; color: var(--muted); }
.hall-count span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hall-tiers { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.hall-tiers span, .tro-tier { display: inline-flex; align-items: center; gap: 5px; }
.hall-tiers i, .tro-tier i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.hall-tiers .t-d i, .tro-tier.t-d i { background: linear-gradient(135deg, #5ad8f0, #f2fdff, #a493ff); } .hall-tiers .t-g i, .tro-tier.t-g i { background: linear-gradient(135deg, #b07d0c, #ffe887); }
.hall-tiers .t-s i, .tro-tier.t-s i { background: linear-gradient(135deg, #7d8896, #f6f8fb); } .hall-tiers .t-b i, .tro-tier.t-b i { background: linear-gradient(135deg, #7e431b, #eeb07c); }
.hall-wait { border-radius: 18px; padding: 10px 10px 4px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%), var(--sunk); border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.hall-wait-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 6px; }
.hall-wings { position: sticky; top: -2px; z-index: 2; box-shadow: 0 6px 10px -8px rgb(0 0 0 / .4); }
.wing h4 { margin: 4px 2px 0; display: flex; justify-content: space-between; align-items: baseline; font: 700 15px var(--f-display); }
.wing h4 small { font: 800 12px var(--f-body); color: var(--muted); }
/* a wooden shelf under each row of trophies, with a soft spotlight from above */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0 4px; padding: 10px 4px 0;
  background: radial-gradient(60% 50% at 50% 0%, rgb(255 236 180 / .14), transparent 70%),
  repeating-linear-gradient(to bottom, transparent 0 110px, var(--wood1) 110px 117px, var(--wood2) 117px 122px, transparent 122px 124px); border-radius: 12px; }
.tro { border: 0; background: transparent; padding: 0 0 14px; height: 124px; display: grid; justify-items: center; align-content: end; gap: 2px; min-width: 0; color: var(--ink); cursor: pointer; }
.tro b { font-size: 10.5px; line-height: 1.15; font-weight: 800; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 24px; }
.tro.locked b { color: var(--muted); opacity: .7; }
.cup { position: relative; width: 52px; height: 68px; display: block; transition: transform .2s; }
.cup svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .35)); }
.cup i { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font-style: normal; font-size: 17px; line-height: 1; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35)); }
.cup.locked i { color: #9aa1ad; font: 800 16px var(--f-display); top: 14px; }
.tro:hover .cup { transform: translateY(-3px); }
.tro.got.t-d .cup::after { content: ''; position: absolute; inset: -6px -6px 14px; background: radial-gradient(circle, rgb(140 230 255 / .35), transparent 65%); z-index: -1; }
/* waiting to be collected: it floats and glows on its pedestal */
.tro.new .cup { animation: troFloat 1.6s ease-in-out infinite; }
.tro.new .cup::before { content: ''; position: absolute; inset: -8px -10px 10px; background: radial-gradient(circle, rgb(255 220 120 / .55), transparent 65%); z-index: -1; animation: troGlow 1.6s ease-in-out infinite; }
.tro.new b::after { content: ' ✨'; }
.tro.collecting .cup { animation: troCollect .65s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes troFloat { 50% { transform: translateY(-4px); } }
@keyframes troGlow { 50% { opacity: .5; transform: scale(1.12); } }
@keyframes troCollect { 40% { transform: scale(1.35) rotate(-6deg); filter: brightness(1.6); } 100% { transform: scale(1) rotate(0); } }
.tro-pop .modal-body { display: grid; justify-items: center; gap: 6px; }
.tro-big .cup { width: 120px; height: 158px; }
.tro-big .cup i { top: 30px; font-size: 40px; }
.tro-big.got .cup { animation: troFloat 2.4s ease-in-out infinite; }
.tro-tier { justify-content: center; font-weight: 800; font-size: 13px; color: var(--muted); margin: 0; }
.hall-badge { font-style: normal; color: var(--gold); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .tro.new .cup, .tro.new .cup::before, .tro-big.got .cup { animation: none; } }
.scene-pick .btn { flex: 1; align-items: center; }
.scene-emo { font-size: 30px; line-height: 1.1; }

/* ---------- products and rivals (company.js) ---------- */
.prod { border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; margin-bottom: 8px; }
.prod-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mshare { display: flex; height: 14px; border-radius: 99px; overflow: hidden; gap: 2px; margin: 6px 0; }
.mshare i { display: block; min-width: 4px; }
.plan-sum { display: grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--sunk); }

/* ---------- auction house (auction.js) ---------- */
.au-pic { display: block; width: 46px; height: 46px; flex: none; border-radius: 6px; overflow: hidden; border: 3px solid #c9a227; box-shadow: 0 2px 6px rgb(0 0 0 / .35); background: #222; }
.au-pic img, .au-photo img, .au-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-pic.big { width: 120px; height: 120px; border-width: 5px; }
.jicon.au-photo { overflow: hidden; border-radius: 6px; border: 2px solid #c9a227; padding: 0; }
.art-hero.au-hero { width: 220px; height: 220px; margin: 0 auto; border: 8px solid #c9a227; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgb(0 0 0 / .4); }
.au-row.t-masterpiece { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent); border-radius: 12px; }
.au-lot { display: flex; gap: 12px; align-items: center; }
.au-lot > div { display: grid; gap: 3px; min-width: 0; }
.au-lot small { color: var(--muted); font-weight: 700; }
.au-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.au-board > div { background: var(--sunk); border-radius: 14px; padding: 8px 12px; display: grid; }
.au-board span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.au-board b { font: 700 20px var(--f-display); }
.au-call { text-align: center; font: 700 17px var(--f-display); color: var(--gold); min-height: 22px; margin: 4px 0; }
.au-feed { display: grid; gap: 2px; min-height: 96px; font-size: 13px; font-weight: 700; }
.au-feed p { margin: 0; }
.au-feed p:first-child { color: var(--ink); } .au-feed p:not(:first-child) { color: var(--muted); }
.au-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.au-btns .btn { align-items: center; }
.au-btns #auBid, .au-btns #auDone { grid-column: 1 / -1; }

/* ---------- wedding planner and prenup (marriage.js) ---------- */
.wedding .modal-body { display: grid; gap: 10px; }
.wd-row { display: grid; gap: 5px; }
.wd-row > span { font-weight: 800; font-size: 13px; color: var(--muted); }
.wd-row .seg.wrap { flex-wrap: wrap; overflow: visible; }
.wd-row .seg button { display: grid; justify-items: center; line-height: 1.15; }
.wd-row .seg button small { font-size: 10.5px; font-weight: 700; opacity: .8; }

/* ---------- online friends (friends.js) ---------- */
.friends .modal-body h4 { margin: 12px 0 4px; font: 700 15px var(--f-display); }
.fr-code { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--sunk); }
.fr-code span { color: var(--muted); font-weight: 800; font-size: 13px; }
.fr-code b { font: 700 18px var(--f-display); user-select: all; }
.fr-add { display: flex; gap: 8px; margin: 10px 0; }
.fr-add input { flex: 1; min-width: 0; font: 700 16px var(--f-body); padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
.fr-row .job-r { display: flex; gap: 6px; }

/* ---------- play together (coop.js) ---------- */
.coop-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 12px; border-radius: 14px; background: rgb(0 0 0 / .22); color: #fff; font-size: 12.5px; font-weight: 800; }
.coop-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coop-nw { font: 700 14px var(--f-display); }
.coop-st { padding: 3px 8px; border-radius: 99px; background: rgb(255 255 255 / .16); white-space: nowrap; }
.coop-st.up { background: #2bb56a; }

/* ---------- livelier theme backgrounds (G.themeFx in state.js) ---------- */
.fx-drift { animation-name: fxDrift; }
.fx-swirl { animation-name: fxSwirl; }
.fx-swim { top: calc(25% + var(--y) * .7); left: -60px; animation-name: fxSwim; opacity: .45; }
.fx-fly { top: var(--y); animation-name: fxFly; animation-timing-function: ease-in-out; opacity: .6; }
@keyframes fxDrift { from { transform: translate(0, -8vh) rotate(-10deg); } 25% { transform: translate(40px, 25vh) rotate(10deg); } 50% { transform: translate(-10px, 50vh) rotate(-8deg); } 75% { transform: translate(50px, 78vh) rotate(12deg); } to { transform: translate(10px, 108vh) rotate(-6deg); } }
@keyframes fxSwirl { from { transform: translate(0, -8vh) rotate(0deg) scale(.8); } 33% { transform: translate(60px, 30vh) rotate(240deg) scale(1); } 66% { transform: translate(-40px, 66vh) rotate(480deg) scale(.9); } to { transform: translate(30px, 108vh) rotate(720deg) scale(.8); } }
@keyframes fxSwim { 0% { transform: translate(0, 0) scaleX(-1); } 25% { transform: translate(30vw, -12px) scaleX(-1); } 50% { transform: translate(60vw, 8px) scaleX(-1); } 75% { transform: translate(90vw, -8px) scaleX(-1); } 100% { transform: translate(120vw, 0) scaleX(-1); } }
@keyframes fxFly { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(40px, -30px) rotate(8deg); } 50% { transform: translate(-20px, -60px) rotate(-6deg); } 75% { transform: translate(-50px, -20px) rotate(10deg); } }
/* soft light orbs */
.fx-orb { position: absolute; left: var(--ox); top: var(--oy); width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; border-radius: 50%; background: radial-gradient(circle, var(--c), transparent 62%); opacity: .13; filter: blur(30px); animation: fxOrb ease-in-out infinite alternate; }
@keyframes fxOrb { from { transform: translate(-8vw, -6vh) scale(.9); } to { transform: translate(8vw, 7vh) scale(1.15); } }
/* shooting stars */
.fx-shoot { position: absolute; left: var(--sx); top: var(--sy); width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgb(255 255 255 / .9), transparent); opacity: 0; transform: rotate(-28deg); animation: fxShoot 13s ease-in infinite; }
@keyframes fxShoot { 0%, 88% { opacity: 0; transform: translate(0, 0) rotate(-28deg) scaleX(.3); } 90% { opacity: .9; } 96% { opacity: 0; transform: translate(-46vw, 24vh) rotate(-28deg) scaleX(1); } 100% { opacity: 0; } }
/* ocean light rays */
.fx-ray { position: absolute; left: var(--rx); top: -10vh; width: 90px; height: 120vh; background: linear-gradient(rgb(255 255 255 / .18), transparent 80%); transform: skewX(-14deg); opacity: .5; animation: fxRay 9s ease-in-out infinite alternate; }
@keyframes fxRay { from { opacity: .15; transform: skewX(-14deg) translateX(-20px); } to { opacity: .55; transform: skewX(-10deg) translateX(30px); } }
/* sunset sun glow */
.fx-sun { position: absolute; right: -12vmax; bottom: 8vh; width: 40vmax; height: 40vmax; border-radius: 50%; background: radial-gradient(circle, rgb(255 190 90 / .5), rgb(255 120 80 / .15) 45%, transparent 70%); animation: fxSun 12s ease-in-out infinite alternate; }
@keyframes fxSun { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
/* forest fireflies */
.fx-firefly { position: absolute; left: var(--x); top: var(--y); width: 5px; height: 5px; border-radius: 50%; background: #f7ff9a; box-shadow: 0 0 10px 3px rgb(240 255 120 / .7); opacity: 0; animation: fxFirefly ease-in-out infinite; }
@keyframes fxFirefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 50% { opacity: .3; transform: translate(18px, -24px); } 70% { opacity: .85; transform: translate(-12px, -10px); } }
/* halloween moon */
.fx-moon { position: absolute; right: 8vw; top: 46vh; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff8d6, #f3d98b 60%, #c9a54a); box-shadow: 0 0 40px 12px rgb(255 230 150 / .25); opacity: .22; animation: fxSun 10s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { #fx { display: none; } }

/* the theme effects live behind the game: they show in the gaps between cards, never over text or buttons */
#fx { z-index: 0; }
#app { z-index: 1; background: radial-gradient(500px 380px at 0% 40%, color-mix(in srgb, var(--violet) 7%, transparent), transparent), radial-gradient(500px 400px at 100% 80%, color-mix(in srgb, var(--sky) 7%, transparent), transparent); }
html:root[data-palette] #app { background: transparent; }

/* ---------- co-op final comparison (coop.js) ---------- */
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 7px 6px; border-bottom: 1px solid var(--line); text-align: right; }
.cmp thead th { font: 700 14px var(--f-display); vertical-align: bottom; }
.cmp thead th small { display: block; font: 700 11px var(--f-body); color: var(--muted); }
.cmp tbody th { text-align: left; color: var(--muted); font-weight: 800; font-size: 13px; }
.cmp td { font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp td.up { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.cmp td.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.cmp td small { font-size: 11px; font-weight: 800; }

/* ---------- your co-op friend: together or against (duo.js) ---------- */
.duo-card h3 small { font: 700 12px var(--f-body); color: var(--muted); margin-left: 6px; }
.duo-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.duo-head .face .av { width: 52px; height: 52px; }
.duo-head div { display: grid; }
.duo-head small { color: var(--muted); font-weight: 700; }

/* ---------- who's online (friends.js) ---------- */
.fr-face { position: relative; }
.fr-light { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #8a8f99; border: 2px solid var(--surface); box-shadow: inset 0 -2px 3px rgb(0 0 0 / .25); vertical-align: middle; }
.fr-face .fr-light { position: absolute; right: -2px; bottom: -2px; }
.fr-light.on { background: radial-gradient(circle at 35% 35%, #b7ffcf, #22c55e 55%, #15803d); box-shadow: 0 0 8px 2px rgb(34 197 94 / .6); animation: frPulse 2s ease-in-out infinite; }
@keyframes frPulse { 50% { box-shadow: 0 0 2px 1px rgb(34 197 94 / .4); } }
.fr-online { font-style: normal; color: var(--good); font-weight: 800; }
.fr-status { display: inline-flex; align-items: center; gap: 5px; }
.fr-status .fr-light { width: 10px; height: 10px; border-width: 1.5px; flex: none; }
.fr-light.dnd { background: radial-gradient(circle at 35% 35%, #ffc2c2, #ef4444 55%, #b91c1c); box-shadow: 0 0 8px 2px rgb(239 68 68 / .55); }
.fr-dnd { font-style: normal; color: var(--bad); font-weight: 800; }

/* ---------- the family tree (family.js) ---------- */
.ft-modal { max-width: 640px; }
.ft { --ft-gold: #ffc53d; --ft-gold-2: #ff9f1c; min-width: 0; overflow-x: hidden; }
.ft-hero { text-align: center; padding: 4px 0 8px; }
.ft-crest { width: 64px; height: 64px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6d6, var(--ft-gold) 60%, var(--ft-gold-2)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ft-gold) 30%, transparent), 0 10px 24px -8px rgb(255 159 28 / .7); animation: ftCrest 4s ease-in-out infinite; }
@keyframes ftCrest { 50% { transform: translateY(-3px) rotate(-3deg); } }
.ft-hero h3 { font: 800 22px var(--f-display); margin: 0; }
.ft-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; margin: 6px 0 10px; }
.ft-stat { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--sunk); border: 1px solid var(--line); min-width: 0; }
.ft-stat i { grid-row: span 3; font-style: normal; font-size: 22px; }
.ft-stat span { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ft-stat b { font: 800 16px var(--f-display); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-stat small { font-size: 11px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-legend { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--muted); font-weight: 700; text-align: center; margin: 0 0 6px; }
.ft-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe0, var(--ft-gold) 55%, var(--ft-gold-2)); box-shadow: 0 0 8px 2px rgb(255 197 61 / .8); }
.ft-tree { position: relative; padding: 6px 0 14px; }
/* the golden trail through every life you played, and the spark that travels it */
.ft-trail { position: absolute; width: 6px; margin-left: -3px; border-radius: 6px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--ft-gold), var(--ft-gold-2)); box-shadow: 0 0 10px 1px rgb(255 197 61 / .65); }
.ft-trail::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(180deg, rgb(255 255 255 / .55) 0 6px, transparent 6px 16px); animation: ftFlow 1.2s linear infinite; }
@keyframes ftFlow { to { background-position: 0 16px; } }
.ft-spark { position: absolute; left: 50%; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #fff3b0 35%, var(--ft-gold) 65%, transparent 72%); box-shadow: 0 0 16px 6px rgb(255 205 70 / .85); animation: ftSpark calc(1.6s + var(--n, 2) * .7s) cubic-bezier(.45, .05, .55, .95) infinite; }
.ft-trail.solo .ft-spark { animation: ftBeat 1.8s ease-in-out infinite; }
@keyframes ftSpark { 0% { top: 0; opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1); } 92% { opacity: 1; transform: scale(1); } 100% { top: 100%; opacity: 0; transform: scale(1.6); } }
@keyframes ftBeat { 50% { transform: scale(1.35); } }
.ft-gen { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: center; padding: 10px 0 4px; animation: ftIn .5s both; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes ftIn { from { opacity: 0; transform: translateY(12px); } }
.ft-gen + .ft-gen { margin-top: 4px; }
.ft-label { position: relative; z-index: 2; font-size: 12px; font-weight: 800; color: var(--muted); padding: 3px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ft-label b { color: var(--ink); font-family: var(--f-display); }
.ft-gen.now .ft-label { border-color: var(--ft-gold); background: color-mix(in srgb, var(--ft-gold) 18%, var(--surface)); }
.ft-couple, .ft-kids { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 4px; }
.ft-side { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ft-side.l { justify-content: flex-end; }
.ft-side.r { justify-content: flex-start; }
.ft-mid { display: flex; align-items: center; justify-content: center; gap: 4px; }
.ft-heart { color: var(--accent-2); font-size: 16px; animation: ftHeart 1.6s ease-in-out infinite; }
@keyframes ftHeart { 30% { transform: scale(1.25); } }
.ft-rib { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--ft-gold) 16%, var(--sunk)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 24px; }
.ft-node { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 1px; width: 92px; padding: 4px 2px 6px; border-radius: 16px; text-align: center; transition: transform .15s, background .15s; }
.ft-node:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); transform: translateY(-2px); }
.ft-node:focus-visible { outline: 2px solid var(--accent); }
.ft-node b { font: 800 13px var(--f-display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-node small { font-size: 11px; color: var(--muted); font-weight: 700; }
.ft-pic { position: relative; display: block; width: 58px; height: 58px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line); }
.ft-pic .av { width: 100%; height: 100%; }
.ft-node.sm { width: 74px; }
.ft-node.sm .ft-pic { width: 42px; height: 42px; }
.ft-node.gone .ft-pic .av { filter: grayscale(.55) brightness(.97); }
.ft-rip { position: absolute; right: -4px; bottom: -4px; font-style: normal; font-size: 14px; line-height: 1; background: var(--surface); border-radius: 50%; padding: 2px; box-shadow: var(--shadow); }
.ft-unknown { display: grid !important; place-items: center; font: 800 20px var(--f-display); color: var(--muted); background: var(--sunk) !important; }
/* the lives you played wear the golden ring; you glow */
.ft-node.played .ft-pic { width: 66px; height: 66px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ft-gold), 0 6px 18px -4px rgb(255 159 28 / .7); }
.ft-node.played b { color: color-mix(in srgb, var(--ft-gold-2) 70%, var(--ink)); }
.ft-node.you .ft-pic { animation: ftYou 2.2s ease-in-out infinite; }
@keyframes ftYou { 50% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--ft-gold), 0 0 26px 8px rgb(255 197 61 / .75); } }
.ft-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin: 0; font-size: 12px; font-weight: 700; max-width: 100%; }
.ft-facts span { position: relative; z-index: 1; padding: 2px 8px; border-radius: 99px; background: var(--sunk); border: 1px solid var(--line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-facts .ft-here { background: color-mix(in srgb, var(--ft-gold) 28%, var(--surface)); border-color: var(--ft-gold); }
/* the branch: a bar across the children, with a stub down to each one */
.ft-kids { padding-top: 16px; margin-top: 2px; }
.ft-kids .ft-side { flex-wrap: wrap; }
.ft-bar { position: absolute; top: 4px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.ft-kids .ft-node { position: relative; }
.ft-kids .ft-node::before { content: ''; position: absolute; top: -12px; left: 50%; margin-left: -1px; width: 2px; height: 14px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.ft-heir-tag { position: relative; z-index: 1; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 99px; background: linear-gradient(135deg, #ffe08a, var(--ft-gold-2)); color: #3b2500; box-shadow: 0 0 12px 2px rgb(255 197 61 / .6); }
.ft-roots .ft-mid { gap: 2px; }
.ft-next { position: relative; z-index: 1; text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; margin: 14px auto 0; max-width: 360px; padding: 10px 12px; border-radius: 14px; background: var(--sunk); border: 1px dashed var(--line); }
.ft-detail .big-avatar .av { font-size: 48px; }
@media (max-width: 420px) {
  .ft-node { width: 80px; } .ft-node.sm { width: 62px; } .ft-node.sm .ft-pic { width: 38px; height: 38px; }
  .ft-rib { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ft-spark, .ft-trail::before, .ft-crest, .ft-heart, .ft-node.you .ft-pic, .ft-gen { animation: none !important; } }

/* ---------- the first-life guide (guide.js) ---------- */
.card.guide { position: relative; overflow: hidden; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--sky) 55%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--sky) 14%, var(--surface)), var(--surface) 60%); animation: ftIn .4s both; }
.gd-head { display: flex; align-items: center; gap: 8px; font: 800 14px var(--f-display); }
.gd-head small { margin-left: auto; color: var(--muted); font: 800 12px var(--f-body); }
.gd-x { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.gd-x:hover { background: var(--sunk); }
.gd-bar { height: 6px; border-radius: 6px; background: var(--sunk); margin: 8px 0 6px; overflow: hidden; }
.gd-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sky), var(--accent)); transition: width .6s; }
.gd-dots { display: flex; gap: 5px; margin-bottom: 8px; }
.gd-dot { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font: 900 10px var(--f-body); font-style: normal; background: var(--sunk); border: 1.5px solid var(--line); color: #fff; }
.gd-dot.done, .gd-dot.skip { background: var(--accent); border-color: var(--accent); }
.gd-dot.skip { opacity: .5; }
.gd-dot.cur { border-color: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 30%, transparent); }
.gd-step { display: flex; gap: 10px; align-items: flex-start; }
.gd-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: color-mix(in srgb, var(--sky) 18%, var(--sunk)); }
.gd-step b { font: 800 15px var(--f-display); }
.gd-step p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.gd-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* "Show me": the button you're looking for glows */
.guide-glow { position: relative; z-index: 5; animation: gdGlow 1s ease-in-out 4; outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 14px; }
@keyframes gdGlow { 50% { outline-color: transparent; box-shadow: 0 0 0 10px color-mix(in srgb, var(--sky) 30%, transparent); } }

/* ---------- the co-op feed (duo.js) ---------- */
.duo-feed { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.duo-feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--sunk); font-size: 13px; font-weight: 700; animation: ftIn .35s both; }
.duo-feed li i { font-style: normal; font-size: 18px; }
.duo-feed li small { color: var(--muted); font-size: 11px; }
.duo-feed li.them { background: color-mix(in srgb, var(--sky) 14%, var(--sunk)); border-left: 3px solid var(--sky); }
.duo-feed li.me { border-left: 3px solid var(--accent); }
.ft-node.played b, .ft-node.played small { position: relative; z-index: 1; padding: 0 7px; border-radius: 99px; background: var(--surface); }
.ft-roots::after { content: ''; display: block; width: 2px; height: 18px; margin: -2px auto -12px; background: color-mix(in srgb, var(--muted) 45%, transparent); }

/* ---------- the painted tree behind the family (family.js FA.grow): always green ---------- */
.ft-tree { border-radius: 22px; margin: 4px -6px 0; padding: 62px 6px 34px; overflow: hidden; background:
  radial-gradient(120% 40% at 50% 0%, rgb(255 255 255 / .75), transparent 70%),
  linear-gradient(180deg, #dff3ff 0%, #eefaf0 55%, #e3f5d6 100%); box-shadow: inset 0 0 0 1px rgb(46 125 54 / .15); }
:root[data-theme="dark"] .ft-tree, html:root[data-palette="halloween"] .ft-tree { background: radial-gradient(90% 30% at 50% 0%, rgb(140 200 255 / .14), transparent 70%), linear-gradient(180deg, #13243a 0%, #142a26 60%, #12301c 100%); box-shadow: inset 0 0 0 1px rgb(120 200 120 / .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ft-tree { background: radial-gradient(90% 30% at 50% 0%, rgb(140 200 255 / .14), transparent 70%), linear-gradient(180deg, #13243a 0%, #142a26 60%, #12301c 100%); box-shadow: inset 0 0 0 1px rgb(120 200 120 / .12); } }
.ft-wood { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.ft-bar, .ft-kids .ft-node::before, .ft-roots::after { display: none; }
/* names stay readable on the leaves */
.ft-node b, .ft-node small { position: relative; z-index: 1; padding: 0 7px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.ft-node small { margin-top: 1px; }
.ft-node:hover { background: transparent; }
.ft-node:hover .ft-pic { transform: scale(1.06); }
.ft-pic { transition: transform .15s; }
.ft-label, .ft-facts span, .ft-rib { box-shadow: 0 2px 8px -2px rgb(0 0 0 / .25); }
/* a few green leaves drifting down */
.ft-fall { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ft-fall i { position: absolute; top: -20px; left: 6%; width: 11px; height: 14px; border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #9be36a, #2f8f3a); opacity: .85; animation: ftLeaf 12s linear infinite; }
.ft-fall i:nth-child(2) { left: 22%; animation-duration: 15s; animation-delay: -4s; }
.ft-fall i:nth-child(3) { left: 40%; animation-duration: 13s; animation-delay: -9s; }
.ft-fall i:nth-child(4) { left: 64%; animation-duration: 16s; animation-delay: -2s; }
.ft-fall i:nth-child(5) { left: 80%; animation-duration: 14s; animation-delay: -6s; }
.ft-fall i:nth-child(6) { left: 92%; animation-duration: 17s; animation-delay: -11s; }
@keyframes ftLeaf { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(18px, 25vh) rotate(90deg); } 50% { transform: translate(-10px, 50vh) rotate(200deg); } 75% { transform: translate(14px, 75vh) rotate(290deg); } 100% { transform: translate(0, 105vh) rotate(380deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ft-fall { display: none; } }

/* ---------- the tree grows upward: founders at the roots, you in the crown ---------- */
.ft-tree { display: flex; flex-direction: column-reverse; padding: 92px 6px 40px; }
.ft-gen { display: flex; flex-direction: column; align-items: center; padding: 44px 0 26px; gap: 8px; }
.ft-gen > .ft-kids { order: 1; margin-bottom: 10px; }
.ft-gen > .ft-couple { order: 2; }
.ft-gen > .ft-facts { order: 3; }
.ft-gen > .ft-label { order: 4; margin-top: 4px; }
.ft-roots { padding: 18px 0 30px; }
.ft-next { margin: 0 auto 6px; }
/* growing: the trunk rises out of the ground, branches reach out, then the leaves burst open */
.ft-wood.grow .trunk-g { clip-path: inset(100% 0 0 0); animation: ftRise var(--grow, 1.6s) cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes ftRise { to { clip-path: inset(0 0 0 0); } }
.ft-wood.grow .ext { opacity: 0; animation: ftExt .6s ease-out both; }
@keyframes ftExt { from { opacity: 0; } to { opacity: 1; } }
.ft-wood .pop { transform-box: fill-box; transform-origin: 50% 70%; }
.ft-wood.grow .pop { animation: ftPop .65s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ftPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
/* the spark climbs the trail from the founder up to you */
.ft-spark { animation-name: ftSparkUp; }
@keyframes ftSparkUp { 0% { top: 100%; opacity: 0; transform: scale(.6); } 8% { opacity: 1; transform: scale(1); } 92% { opacity: 1; transform: scale(1); } 100% { top: 0; opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .ft-wood.grow .trunk-g, .ft-wood.grow .ext, .ft-wood.grow .pop { animation: none !important; clip-path: none; opacity: 1; } }
.ft-roots > .ft-label { order: 0; margin: 0 0 4px; }

/* ---------- the gravestone death screen (main.js tombstone) ---------- */
.tomb-scene { position: relative; display: grid; justify-items: center; padding: 6px 0 0; margin: 0 -6px 6px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 30%, rgb(255 255 255 / .55), transparent 70%), linear-gradient(180deg, #c9d6e6 0%, #dfe6ee 55%, #a9c98a 78%, #7fae5c 100%); }
:root[data-theme="dark"] .tomb-scene, html:root[data-palette="halloween"] .tomb-scene { background: radial-gradient(60% 45% at 50% 25%, rgb(170 190 255 / .2), transparent 70%), linear-gradient(180deg, #121a2c 0%, #1b2438 55%, #233a22 80%, #1a2e18 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tomb-scene { background: radial-gradient(60% 45% at 50% 25%, rgb(170 190 255 / .2), transparent 70%), linear-gradient(180deg, #121a2c 0%, #1b2438 55%, #233a22 80%, #1a2e18 100%); } }
.tomb { position: relative; z-index: 1; width: min(270px, 84%); margin-top: 14px; padding: 16px 16px 20px; text-align: center; border-radius: 135px 135px 10px 10px / 120px 120px 10px 10px;
  background: radial-gradient(120% 80% at 30% 15%, #eef0f2 0%, #c9ccd1 45%, #9da2a9 100%); color: #3b3f46;
  box-shadow: inset 0 0 0 6px rgb(255 255 255 / .18), inset 0 -18px 30px -12px rgb(0 0 0 / .35), inset 10px 0 20px -14px rgb(255 255 255 / .8), 0 18px 30px -12px rgb(0 0 0 / .55);
  animation: tombRise .9s cubic-bezier(.2, .9, .3, 1) both; }
.tomb::before { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .35; pointer-events: none; background:
  radial-gradient(3px 3px at 20% 30%, #6b7078, transparent), radial-gradient(2px 2px at 70% 22%, #6b7078, transparent), radial-gradient(2px 3px at 40% 70%, #70757d, transparent), radial-gradient(3px 2px at 82% 64%, #6b7078, transparent), radial-gradient(2px 2px at 12% 82%, #6b7078, transparent); }
.tomb::after { content: ''; position: absolute; left: -8%; right: -8%; bottom: -10px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, #4f8f3a, #2f6a26 70%, transparent); }
@keyframes tombRise { from { opacity: 0; transform: translateY(30px); } }
.tomb-cameo { display: block; width: 74px; height: 74px; margin: 0 auto 6px; border-radius: 50%; padding: 3px; background: linear-gradient(145deg, #e9e2c8, #a8975f); box-shadow: inset 0 2px 4px rgb(0 0 0 / .4), 0 2px 0 rgb(255 255 255 / .6); }
.tomb-cameo .av { width: 100%; height: 100%; filter: sepia(.55) grayscale(.35) contrast(.95); }
.tomb-here { display: block; font: 800 11px var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: #5a5f67; text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.tomb-name { margin: 2px 0 2px; font: 800 24px/1.15 Georgia, "Times New Roman", serif; letter-spacing: .02em; color: #3a3e45; text-shadow: 0 1px 0 rgb(255 255 255 / .75), 0 -1px 0 rgb(0 0 0 / .25); overflow-wrap: anywhere; }
.tomb-years { margin: 0; font: 700 17px Georgia, serif; letter-spacing: .12em; color: #474b52; text-shadow: 0 1px 0 rgb(255 255 255 / .7); }
.tomb-years i { font-style: normal; font-size: 11px; vertical-align: 2px; color: #6b7078; }
.tomb-epi { margin: 8px 0 2px; font: italic 600 13.5px/1.35 Georgia, serif; color: #4e535a; }
.tomb-cause { margin: 4px 0 0; font: 700 12px var(--f-body); color: #5f646b; }
.tomb-ground { position: relative; z-index: 2; display: flex; gap: 10px; justify-content: center; margin: 2px 0 6px; font-size: 20px; }
.tomb-ground i { font-style: normal; animation: ftIn .5s both; }
.tomb-ground i:nth-child(2), .tomb-ground i:nth-child(4) { animation: tombFlicker 1.6s ease-in-out infinite; }
@keyframes tombFlicker { 50% { filter: brightness(1.35) drop-shadow(0 0 6px #ffb84d); transform: scale(1.06); } }
.tomb-h { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .tomb, .tomb-ground i { animation: none !important; } }

/* the shot: a white flash, then the screen goes dark */
.gun-flash { position: fixed; inset: 0; z-index: 9999; pointer-events: none; animation: gunFlash 2.1s ease-out forwards; }
@keyframes gunFlash { 0% { background: #fff; } 5% { background: #fff; } 14% { background: #000; } 70% { background: rgb(0 0 0 / .92); } 100% { background: transparent; } }
.help-line { display: block; margin-top: 10px; padding: 8px 10px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; background: color-mix(in srgb, var(--sky) 14%, var(--sunk)); color: var(--ink); }

/* ---------- naming a new baby (people.js) ---------- */
.baby-pop .big-avatar { animation: tombRise .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.baby-l { display: block; font: 800 12px var(--f-body); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }
.baby-name { display: flex; gap: 8px; }
.baby-name input { flex: 1; min-width: 0; font: 800 20px var(--f-display); padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--sunk); color: var(--ink); }
.baby-name input:focus { outline: none; border-color: var(--accent); }
.baby-name input.bad { border-color: var(--bad); }
.baby-pop .chips { margin-top: 8px; }
.baby-last { width: 100%; }
.baby-last button { flex: 1; }
.baby-only { margin: 0; font: 800 16px var(--f-display); }
.baby-full { margin: 12px 0 2px; font: 800 18px var(--f-display); color: var(--accent); }

/* ---------- party night (party.js) ---------- */
.pt-modal { max-width: 560px; }
.pt-venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pt-venue { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 14px; background: var(--sunk); border: 2px solid transparent; text-align: center; }
.pt-venue i { font-style: normal; font-size: 22px; }
.pt-venue b { font: 800 12px var(--f-display); }
.pt-venue small { font-size: 11px; color: var(--muted); font-weight: 700; }
.pt-venue.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--sunk)); }
.pt-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: 11px; color: var(--muted); font-weight: 700; margin: 6px 0 0; }
.pt-list { display: grid; gap: 6px; }
.pt-item { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--sunk); border: 2px solid transparent; transition: background .15s, border-color .15s; }
.pt-item[disabled] { opacity: .45; cursor: not-allowed; }
.pt-item.on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--sunk)); }
.pt-ic { grid-row: span 3; font-style: normal; font-size: 26px; width: 38px; text-align: center; }
.pt-main { display: grid; min-width: 0; }
.pt-main b { font: 800 14px var(--f-display); }
.pt-main small { font-size: 12px; color: var(--muted); }
.pt-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-stats em { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.pt-price { color: var(--ink); }
.pt-fun { color: var(--good); }
.pt-add.mid, .pt-od.mid { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.pt-add.hi, .pt-od.hi { color: #fff; background: var(--bad); border-color: var(--bad); }
.pt-laced { grid-column: 2; font-size: 11px; font-weight: 800; color: var(--bad); }
.pt-sum { position: sticky; bottom: -1px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 -8px 20px -10px rgb(0 0 0 / .3); }
.pt-sum.mid { border-color: var(--warn); }
.pt-sum.hi { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.pt-mix { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--bad); }
.pt-tot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-weight: 800; font-size: 13.5px; }

/* ---------- addictions (party.js PA.card) ---------- */
.addictions { display: grid; gap: 6px; margin-bottom: 10px; }
.addict { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--bad) 10%, var(--sunk)); }
.addict > i { grid-row: span 2; font-style: normal; font-size: 24px; }
.addict span { display: flex; justify-content: space-between; gap: 8px; }
.addict b { font: 800 14px var(--f-display); }
.addict small { font-weight: 800; color: var(--bad); font-size: 12px; }
.addict-bar { height: 7px; border-radius: 7px; background: var(--surface); overflow: hidden; }
.addict-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--warn), var(--bad)); }

/* ---------- the speedometer (ride.js) ---------- */
.gauge-modal { max-width: 300px; }
.gauge-modal .modal-head { display: none; }
.gauge { width: 100%; max-width: 240px; display: block; margin: 0 auto; }
.gauge .g-arc { fill: none; stroke: var(--sunk); stroke-width: 7; stroke-linecap: round; }
.gauge .g-hot { fill: none; stroke: url(#none); stroke: var(--bad); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: gHot 1.4s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes gHot { to { stroke-dashoffset: calc(100 - var(--to)); } }
.gauge line { stroke: var(--muted); stroke-width: 1.4; }
.gauge text { font: 700 5px var(--f-body); fill: var(--muted); text-anchor: middle; }
.gauge .g-needle { transform-origin: 50px 55px; transform: rotate(-120deg); animation: gNeedle 1.4s cubic-bezier(.2, .8, .3, 1) forwards; }
.gauge .g-needle line { stroke: var(--bad); stroke-width: 2.4; stroke-linecap: round; }
.gauge .g-needle circle { fill: var(--ink); }
@keyframes gNeedle { to { transform: rotate(var(--a)); } }
.g-read { text-align: center; margin: 0; font: 700 14px var(--f-body); color: var(--muted); }
.g-read b { font: 800 40px var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- the living tree: animals, weather, fruit (family.js FA.eco) ---------- */
.ft-eco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; animation: ecoIn 1.2s ease-out forwards; animation-delay: var(--after, 0ms); }
@keyframes ecoIn { to { opacity: 1; } }
.eco { position: absolute; font-style: normal; font-size: 18px; line-height: 1; translate: -50% -50%; will-change: transform; }
.eco b { display: inline-block; font-weight: normal; }
.ft-wood .fruit { transform-box: fill-box; }
.ft-wood .ripple { animation: ecoRipple 3.5s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ecoRipple { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
/* sky */
.eco.sun { font-size: 34px; filter: drop-shadow(0 0 14px rgb(255 200 60 / .9)); animation: ecoPulse 6s ease-in-out infinite; }
.eco.moon { font-size: 30px; filter: drop-shadow(0 0 12px rgb(255 240 180 / .7)); }
@keyframes ecoPulse { 50% { transform: scale(1.08); } }
.eco.star { font-size: 8px; color: #fff8d6; animation: ecoTwinkle 3s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ecoTwinkle { 50% { opacity: .2; } }
.eco.cloud { font-size: 34px; opacity: .85; animation: ecoAcross var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes ecoAcross { from { transform: translateX(0); } to { transform: translateX(var(--w)); } }
/* birds (bats at night) cross the sky, flapping */
.eco.fly { animation: ecoAcross var(--d) linear infinite; animation-delay: var(--dl); font-size: 16px; }
.eco.fly b { transform: scaleX(-1); animation: ecoFlap .5s ease-in-out infinite alternate; }
@keyframes ecoFlap { from { transform: scaleX(-1) translateY(-3px) rotate(-6deg); } to { transform: scaleX(-1) translateY(3px) rotate(6deg); } }
.eco.perch { font-size: 17px; animation: ecoBob 2.8s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ecoBob { 50% { transform: translateY(-3px) rotate(4deg); } }
.eco.flutter { font-size: 15px; animation: ecoFlutter 7s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ecoFlutter { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(26px, -18px) rotate(10deg); } 50% { transform: translate(-6px, -34px) rotate(-12deg); } 75% { transform: translate(-28px, -10px) rotate(8deg); } }
.eco.firefly { width: 5px; height: 5px; border-radius: 50%; background: #fff38a; box-shadow: 0 0 8px 3px rgb(255 236 120 / .8); animation: ecoFirefly var(--d) ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ecoFirefly { 0%, 100% { transform: translate(0, 0); opacity: .1; } 30% { opacity: 1; } 50% { transform: translate(14px, -18px); opacity: .9; } 80% { transform: translate(-10px, -6px); opacity: .2; } }
/* the squirrel runs up the trunk and back down */
.eco.squirrel { font-size: 16px; animation: ecoClimb var(--d) ease-in-out infinite; }
@keyframes ecoClimb { 0%, 8% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-10px) rotate(-70deg); } 45% { transform: translateY(var(--up)) rotate(-70deg); } 50%, 58% { transform: translateY(var(--up)) rotate(0); } 62% { transform: translateY(var(--up)) rotate(70deg) scaleX(-1); } 92% { transform: translateY(0) rotate(70deg) scaleX(-1); } 100% { transform: translateY(0) rotate(0); } }
/* the rabbit hops back and forth on the hill */
.eco.hop { animation: ecoRun 9s ease-in-out infinite; }
.eco.hop b { animation: ecoBounce .45s ease-in-out infinite alternate; }
@keyframes ecoRun { 0% { transform: translateX(0) scaleX(-1); } 46% { transform: translateX(var(--run)) scaleX(-1); } 50% { transform: translateX(var(--run)) scaleX(1); } 96% { transform: translateX(0) scaleX(1); } 100% { transform: translateX(0) scaleX(-1); } }
@keyframes ecoBounce { from { transform: translateY(0); } to { transform: translateY(-9px); } }
/* a deer (or a fox) wanders across now and then */
.eco.walk { font-size: 22px; animation: ecoAcross var(--d) linear infinite; animation-delay: var(--dl); }
.eco.walk b { transform: scaleX(-1); animation: ecoStep .6s ease-in-out infinite alternate; }
@keyframes ecoStep { from { transform: scaleX(-1) translateY(0); } to { transform: scaleX(-1) translateY(-2px) rotate(-3deg); } }
.eco.duck { font-size: 15px; animation: ecoDuck 6s ease-in-out infinite; }
@keyframes ecoDuck { 0%, 100% { transform: translateX(-8px) rotate(-4deg); } 50% { transform: translateX(10px) rotate(4deg) scaleX(-1); } }
.eco.bee { font-size: 11px; animation: ecoBee 4s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ecoBee { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, -10px); } 50% { transform: translate(-4px, -16px); } 75% { transform: translate(-14px, -4px); } }
.eco.shroom { font-size: 13px; }
/* now and then, a ripe fruit drops */
.eco.drop { font-size: 12px; opacity: 0; animation: ecoDrop 14s ease-in infinite 4s; }
@keyframes ecoDrop { 0%, 70% { transform: translateY(0) rotate(0); opacity: 0; } 72% { opacity: 1; } 84% { transform: translateY(var(--fall)) rotate(200deg); opacity: 1; } 87% { transform: translateY(calc(var(--fall) - 8px)) rotate(230deg); } 90% { transform: translateY(var(--fall)) rotate(240deg); opacity: 1; } 100% { transform: translateY(var(--fall)) rotate(240deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ft-eco .eco, .ft-eco .eco b, .ft-wood .ripple { animation: none !important; } .eco.drop { display: none; } .ft-eco { opacity: 1; animation: none; } }

/* ---------- karma in the tree: a withering tree, dead branches, falling dead leaves ---------- */
.ft-wood.dying { filter: saturate(.35) sepia(.35) brightness(.9); }
.ft-wood .dead path { opacity: .95; }
.eco.drop.leaf { animation-duration: 9s; animation-delay: 1s; }
.eco.hop.slow { animation-duration: 18s; }
/* a withering tree under a gloomy sky; a burning one glows from below */
.ft-tree.withered { background: linear-gradient(180deg, #8d96a3 0%, #b3b0a6 60%, #a39a84 100%); }
:root[data-theme="dark"] .ft-tree.withered, html:root[data-palette="halloween"] .ft-tree.withered { background: linear-gradient(180deg, #14161c 0%, #1d1c1f 60%, #241d17 100%); }
.ft-tree.burning { box-shadow: inset 0 -90px 80px -40px rgb(255 90 20 / .55), inset 0 0 0 1px rgb(255 90 20 / .3); }
.ft-wood .broken path { opacity: .95; }
.eco.fire { font-size: 22px; animation: ecoFire .7s ease-in-out infinite alternate; animation-delay: var(--dl); filter: drop-shadow(0 0 8px rgb(255 120 30 / .9)); transform-origin: 50% 100%; }
@keyframes ecoFire { from { transform: scale(.85, .9) rotate(-4deg); } to { transform: scale(1.1, 1.25) rotate(4deg); } }
.eco.smoke { font-size: 22px; opacity: .6; animation: ecoSmoke 4s ease-out infinite; animation-delay: var(--dl); }
@keyframes ecoSmoke { from { transform: translateY(0) scale(.6); opacity: .6; } to { transform: translateY(-90px) scale(1.6); opacity: 0; } }

/* ---------- save slots and backups (saves.js) ---------- */
.sv-list { display: grid; gap: 6px; }
.sv-slot { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--sunk); border: 2px solid transparent; }
.sv-slot.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--sunk)); }
.sv-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); font: 800 16px var(--f-display); }
.sv-main { display: grid; min-width: 0; }
.sv-main b { font: 800 14px var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-main small { color: var(--muted); font-size: 12px; font-weight: 700; }
.sv-btns { display: flex; gap: 4px; align-items: center; }

/* ---------- animated moments (scenes.js) ---------- */
.scene { position: fixed; inset: 0; z-index: 9000; display: grid; place-content: center; gap: 10px; padding: 16px; background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); animation: scIn .25s ease-out both; cursor: pointer; }
.scene.out { animation: scOut .26s ease-in forwards; }
@keyframes scIn { from { opacity: 0; } }
@keyframes scOut { to { opacity: 0; } }
.sc-stage { position: relative; width: min(92vw, 520px); aspect-ratio: 16 / 11; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px -16px rgb(0 0 0 / .7), inset 0 0 0 2px rgb(255 255 255 / .12); animation: scPop .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes scPop { from { transform: scale(.85); opacity: 0; } }
.sc-cap { margin: 0; text-align: center; color: #fff; font: 800 16px var(--f-display); text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
.sc-it { position: absolute; font-style: normal; line-height: 1; translate: -50% -50%; animation-duration: var(--dur); animation-fill-mode: both; animation-timing-function: ease-in-out; }
/* actors */
.sc-lift { animation-name: scLift; animation-duration: .7s; animation-iteration-count: infinite; }
@keyframes scLift { 50% { transform: translateY(-14%) scale(1.05); } }
.sc-drip { animation-name: scDrip; animation-duration: 1s; animation-iteration-count: infinite; }
@keyframes scDrip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } }
.sc-pop { animation-name: scPopIn; animation-duration: .6s; }
@keyframes scPopIn { from { transform: scale(0) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.25); } }
.sc-scroll { animation-name: scScroll; animation-timing-function: linear; }
.sc-scroll.fast { animation-duration: calc(var(--dur) * .6); animation-iteration-count: 2; }
@keyframes scScroll { from { transform: translateX(40vw); } to { transform: translateX(-60vw); } }
.sc-step { animation-name: scStep; animation-duration: .5s; animation-iteration-count: infinite; }
.sc-step.fast { animation-duration: .28s; }
@keyframes scStep { 50% { transform: translateY(-8%) rotate(4deg); } }
.sc-fly { animation-name: scFly; animation-timing-function: linear; }
@keyframes scFly { from { transform: translateX(-40%) translateY(0); } 50% { transform: translateX(80%) translateY(-20%); } to { transform: translateX(200%) translateY(0); } }
.sc-pulse { animation-name: scPulse; animation-duration: 1.4s; animation-iteration-count: infinite; }
@keyframes scPulse { 50% { transform: scale(1.12); filter: brightness(1.2); } }
.sc-swim { animation-name: scSwim; }
@keyframes scSwim { to { transform: translateX(260%); } }
.sc-rise { animation-name: scRise; animation-duration: 1.6s; animation-iteration-count: infinite; }
.sc-rise.fast { animation-duration: .8s; }
.sc-rise.slow { animation-duration: var(--dur); animation-iteration-count: 1; }
@keyframes scRise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-160%); opacity: 0; } }
.sc-bob { animation-name: scBob; animation-duration: 1s; animation-iteration-count: infinite; }
@keyframes scBob { 50% { transform: translateY(-8%) rotate(-3deg); } }
.sc-breathe { animation-name: scBreathe; animation-duration: 1.8s; animation-iteration-count: infinite; }
@keyframes scBreathe { 50% { transform: scale(1.08); } }
.sc-twinkle { animation-name: scTwinkle; animation-duration: .9s; animation-iteration-count: infinite; }
@keyframes scTwinkle { 50% { transform: scale(.4) rotate(90deg); opacity: .3; } }
.sc-flicker { animation-name: scFlicker; animation-duration: .4s; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes scFlicker { to { transform: scale(1.06, .94); filter: brightness(1.3); } }
.sc-flicker.out { animation: scFlickerOut var(--dur) ease-in forwards; }
@keyframes scFlickerOut { 0%, 60% { filter: brightness(1.3); } 100% { filter: brightness(.2) grayscale(1); opacity: .4; } }
.sc-nod { animation-name: scNod; animation-duration: .9s; animation-iteration-count: infinite; }
@keyframes scNod { 50% { transform: rotate(6deg) translateY(3%); } }
.sc-grow { animation-name: scGrow; }
@keyframes scGrow { from { transform: scale(0); } 70% { transform: scale(1.1); } }
.sc-flutter { animation-name: scFlutter; animation-duration: 1.6s; animation-iteration-count: infinite; }
@keyframes scFlutter { 25% { transform: translate(30%, -30%) rotate(10deg); } 50% { transform: translate(60%, 0); } 75% { transform: translate(20%, 30%) rotate(-10deg); } }
.sc-punch { animation-name: scPunch; animation-duration: .45s; animation-iteration-count: infinite; }
@keyframes scPunch { 50% { transform: translateX(20%) rotate(-8deg) scale(1.1); } }
.sc-snip { animation-name: scSnip; animation-duration: .3s; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes scSnip { to { transform: rotate(18deg); } }
.sc-swing { animation-name: scSwing; animation-duration: 1.2s; animation-iteration-count: infinite; transform-origin: 50% 0; }
@keyframes scSwing { 50% { transform: rotate(14deg); } }
.sc-float { animation-name: scFloat; animation-duration: 2s; animation-iteration-count: infinite; }
@keyframes scFloat { 50% { transform: translateY(-14%) translateX(6%); } }
.sc-flyacross { animation-name: scFlyAcross; animation-timing-function: cubic-bezier(.4, .1, .4, 1); }
@keyframes scFlyAcross { to { transform: translateX(105vw) translateY(10%) rotate(8deg); } }
.sc-spin { animation-name: scSpin; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-dance { animation-name: scDance; animation-duration: .5s; animation-iteration-count: infinite; }
@keyframes scDance { 25% { transform: rotate(-12deg) translateY(-6%); } 75% { transform: rotate(12deg) translateY(-6%); } }
.sc-loop { animation-name: scLoop; }
@keyframes scLoop { 50% { transform: rotate(-20deg) scale(1.1); } }
.sc-jump { animation-name: scJump; animation-duration: 1.1s; }
@keyframes scJump { 0% { transform: translateY(0) rotate(0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translateY(-120%) rotate(-40deg); } 100% { transform: translateY(0) rotate(-90deg); opacity: 0; } }
.sc-clink-l { animation-name: scClinkL; animation-duration: .8s; animation-iteration-count: 2; }
.sc-clink-r { animation-name: scClinkR; animation-duration: .8s; animation-iteration-count: 2; }
@keyframes scClinkL { 50% { transform: translateX(25%) rotate(18deg); } }
@keyframes scClinkR { 50% { transform: translateX(-25%) rotate(-18deg) scaleX(-1); } 0%, 100% { transform: scaleX(-1); } }
.sc-sway { animation-name: scSway; animation-duration: 1.6s; animation-iteration-count: infinite; }
@keyframes scSway { 25% { transform: rotate(-10deg) translateX(-8%); } 75% { transform: rotate(10deg) translateX(8%); } }
.sc-bungee { animation-name: scBungee; }
@keyframes scBungee { 0% { transform: translateY(0); } 45% { transform: translateY(420%) rotate(180deg); } 65% { transform: translateY(220%) rotate(180deg); } 80% { transform: translateY(330%) rotate(180deg); } 100% { transform: translateY(280%) rotate(180deg); } }
.sc-climb { animation-name: scClimb; }
@keyframes scClimb { to { transform: translate(10%, -380%); } }
.sc-zoom-across { animation-name: scZoomAcross; animation-duration: calc(var(--dur) * .5); animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
@keyframes scZoomAcross { from { transform: translateX(0) scaleX(-1); } to { transform: translateX(65vw) scaleX(-1); } }
.sc-puff { animation-name: scPuff; animation-duration: 1.4s; animation-iteration-count: infinite; }
@keyframes scPuff { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8) translateY(-40%); opacity: 0; } }
/* substances */
.sc-melt { animation-name: scMelt; animation-duration: 1.6s; animation-iteration-count: infinite; }
@keyframes scMelt { 50% { transform: scale(1.2, .75) skewX(12deg); } }
.sc-jitter { animation-name: scJitter; animation-duration: .12s; animation-iteration-count: infinite; }
@keyframes scJitter { 25% { transform: translate(2px, -2px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(1px, 2px); } }
.sc-heartbeat { animation-name: scHeart; animation-duration: .45s; animation-iteration-count: infinite; }
.sc-heartbeat.slow { animation-duration: 1.4s; animation-iteration-count: 2; }
@keyframes scHeart { 30% { transform: scale(1.3); } 60% { transform: scale(.95); } }
.sc-droop { animation-name: scDroop; }
@keyframes scDroop { to { transform: rotate(-24deg) translateY(10%); filter: grayscale(.5); } }
.sc-shrink { animation-name: scShrink; }
@keyframes scShrink { to { transform: scale(.2); opacity: .2; } }
/* deaths */
.sc-boom { animation-name: scBoom; animation-duration: .9s; }
@keyframes scBoom { from { transform: scale(0); opacity: 0; } 30% { transform: scale(1.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.sc-siren { animation-name: scSiren; animation-duration: .5s; animation-iteration-count: infinite; }
@keyframes scSiren { 50% { filter: hue-rotate(200deg) brightness(1.5); } }
.sc-spiral { animation-name: scSpiral; animation-timing-function: ease-in; }
@keyframes scSpiral { to { transform: translate(140%, 420%) rotate(540deg); } }
.sc-sink { animation-name: scSink; animation-timing-function: ease-in; }
@keyframes scSink { 0% { transform: translateY(0); } 30% { transform: translateY(-6%); } 100% { transform: translateY(160%); opacity: 0; } }
.sc-flame { animation-name: scFlame; animation-duration: .35s; animation-iteration-count: infinite; animation-direction: alternate; transform-origin: 50% 100%; }
@keyframes scFlame { to { transform: scale(1.15, 1.35) rotate(5deg); } }
.sc-bolt { animation-name: scBolt; animation-duration: .9s; }
@keyframes scBolt { 0%, 40% { opacity: 0; } 45% { opacity: 1; transform: scale(1.4); } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: 0; } }
.sc-scatter { animation-name: scScatter; animation-timing-function: ease-out; }
@keyframes scScatter { from { transform: translate(0, 0) rotate(0); } to { transform: translate(40%, 280%) rotate(400deg); } }
.sc-fall { animation-name: scFall; animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
.sc-fall.slow { animation-timing-function: ease-in-out; }
@keyframes scFall { to { transform: translateY(560%) rotate(110deg); } }
.sc-lunge { animation-name: scLunge; }
@keyframes scLunge { 0% { transform: scale(.4); opacity: 0; } 50% { transform: scale(.9); opacity: 1; } 70% { transform: scale(2.6); } 100% { transform: scale(3.4); opacity: .9; } }
.sc-meteor { animation-name: scMeteor; animation-duration: 1.1s; animation-timing-function: ease-in; }
@keyframes scMeteor { to { transform: translate(380%, 520%) rotate(20deg); } }
.sc-tornado { animation-name: scTornado; animation-timing-function: linear; }
@keyframes scTornado { 0% { transform: translateX(0) rotate(0); } 50% { transform: translateX(60%) rotate(10deg) scale(1.3); } 100% { transform: translateX(120%) rotate(-10deg) scale(1.8); } }
.sc-shake { animation-name: scShakeIt; animation-duration: .18s; animation-iteration-count: infinite; }
@keyframes scShakeIt { 25% { transform: translate(-3px, 2px) rotate(-1deg); } 75% { transform: translate(3px, -2px) rotate(1deg); } }
.sc-ecg { position: absolute; left: 6%; right: 6%; top: 32%; height: 22%; width: 88%; }
.sc-ecg path { fill: none; stroke: #33e07a; stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; animation: scEcg calc(var(--dur) * .8) linear forwards; filter: drop-shadow(0 0 4px #33e07a); }
@keyframes scEcg { to { stroke-dashoffset: 0; } }
.sc-water { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(rgb(40 120 200 / .55), rgb(10 40 90 / .9)); animation: scWater var(--dur) ease-in forwards; }
@keyframes scWater { to { height: 100%; } }
.sc-flames { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(60% 100% at 50% 100%, rgb(255 160 40 / .8), rgb(255 60 0 / .4) 50%, transparent 75%); animation: scFlicker .3s infinite alternate; }
.sc-dark { position: absolute; inset: 0; background: #000; opacity: 0; animation: scDark var(--dur) ease-in forwards; pointer-events: none; }
@keyframes scDark { 0%, 70% { opacity: 0; } 100% { opacity: .92; } }
/* whole-screen feelings */
.fx-strobe .sc-stage { animation: scPop .45s both, fxStrobe .5s steps(2) infinite; }
@keyframes fxStrobe { 50% { filter: hue-rotate(140deg) brightness(1.25); } }
.fx-drunk .sc-stage { animation: scPop .45s both, fxDrunk 2.2s ease-in-out infinite; }
@keyframes fxDrunk { 25% { transform: rotate(-3deg) translateX(-2%); filter: blur(1.5px); } 75% { transform: rotate(3deg) translateX(2%); filter: blur(2px); } }
.fx-stoned .sc-stage { animation: scPop .45s both, fxStoned 3s ease-in-out infinite; }
@keyframes fxStoned { 50% { filter: saturate(1.6) blur(1px) hue-rotate(-20deg); transform: scale(1.03); } }
.fx-trip .sc-stage { animation: scPop .45s both, fxTrip 1.6s linear infinite; }
@keyframes fxTrip { 0% { filter: hue-rotate(0) saturate(2); } 50% { filter: hue-rotate(180deg) saturate(3); transform: skewX(4deg) scale(1.04); } 100% { filter: hue-rotate(360deg) saturate(2); } }
.fx-jitter .sc-stage { animation: scPop .45s both, scJitter .1s infinite; filter: contrast(1.3) saturate(1.4); }
.fx-nod .sc-stage { animation: scPop .45s both, fxNod var(--dur) ease-in forwards; }
@keyframes fxNod { to { filter: blur(3px) brightness(.45) grayscale(.6); } }
.fx-tunnel .sc-stage { animation: scPop .45s both, fxTunnel var(--dur) ease-in-out forwards; }
@keyframes fxTunnel { to { filter: grayscale(.9) contrast(1.4); transform: scale(.7); border-radius: 50%; } }
.fx-wah .sc-stage { animation: scPop .45s both, fxWah .6s ease-in-out infinite; }
@keyframes fxWah { 50% { transform: scale(1.05, .95); filter: brightness(1.2); } }
.fx-flicker .sc-stage { animation: scPop .45s both, fxFlicker .2s steps(2) infinite; }
@keyframes fxFlicker { 50% { filter: brightness(1.4); } }
.fx-speed .sc-stage { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .12) 0 8px, transparent 8px 60px) !important; animation: scPop .45s both, fxSpeed .3s linear infinite; }
@keyframes fxSpeed { to { background-position: -60px 0; } }
.fx-impact .sc-stage { animation: scPop .45s both, fxImpact .5s ease-out calc(var(--dur) * .3) 1; }
.fx-impact-late .sc-stage { animation: scPop .45s both, fxImpact .5s ease-out calc(var(--dur) * .45) 1; }
@keyframes fxImpact { 10% { transform: translate(-8px, 6px) rotate(-2deg); } 30% { transform: translate(8px, -4px) rotate(2deg); } 50% { transform: translate(-5px, 2px); } }
.fx-quake .sc-stage { animation: scPop .45s both, scShakeIt .14s infinite; }
.fx-flash::after { content: ''; position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: fxFlash calc(var(--dur) * .4) ease-out .3s 1; }
@keyframes fxFlash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.fx-red .sc-stage { box-shadow: inset 0 0 120px 30px rgb(160 0 0 / .7), 0 24px 60px -16px rgb(0 0 0 / .7); }
@media (prefers-reduced-motion: reduce) { .scene .sc-it, .scene .sc-stage { animation-iteration-count: 1 !important; } .fx-quake .sc-stage, .fx-jitter .sc-stage, .fx-strobe .sc-stage { animation: none; } }
.sc-crash { animation-name: scCrash; animation-duration: calc(var(--dur) * .45); animation-timing-function: cubic-bezier(.6, 0, 1, .5); }
@keyframes scCrash { 0% { transform: translateX(0) scaleX(-1); } 92% { transform: translateX(var(--hit, 66vw)) scaleX(-1); } 100% { transform: translateX(calc(var(--hit, 66vw) - 6px)) scaleX(-1) rotate(-14deg) scale(.92, .8); } }
@media (min-width: 560px) { .sc-crash { --hit: 270px; } }
@media (max-width: 559px) { .sc-crash { --hit: 60vw; } }
/* the golden fruit of a perfect life */
.ft-wood .gold-fruit .gf-glow { transform-box: fill-box; transform-origin: center; animation: gfGlow 2.2s ease-in-out infinite; }
.ft-wood .gold-fruit .gf-spark { transform-box: fill-box; transform-origin: center; animation: gfSpark 1.6s ease-in-out infinite; }
@keyframes gfGlow { 50% { transform: scale(1.5); opacity: .7; } }
@keyframes gfSpark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.ft-wood .gold-fruit { filter: drop-shadow(0 0 6px rgb(255 210 60 / .9)); }

/* ---------- where your worth is (hover or tap the net worth) ---------- */
.pill-money.nw { cursor: pointer; }
.nw-pop { display: none; position: fixed; z-index: 800; padding: 12px; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); border: 1px solid var(--line); text-transform: none; letter-spacing: 0; max-height: 70vh; overflow-y: auto; animation: ftIn .18s both; }
[data-nwpop].open .nw-pop { display: grid; gap: 6px; }
.nw-pop .nw-h { font: 800 14px var(--f-display); white-space: normal; }
.nw-row { position: relative; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; padding: 3px 0 7px; }
.nw-row span { opacity: 1; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--muted); }
.nw-row em { font-style: normal; font-variant-numeric: tabular-nums; }
.nw-row i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--sky)); }
.nw-row.debt em { color: var(--bad); }
.nw-row.tot { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; }
.nw-row.tot span { color: var(--ink); }

/* ---------- k / m / b / t shortcut buttons under money boxes ---------- */
.sfx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.sfx .chip { display: grid; justify-items: center; gap: 0; padding: 6px 4px; border-radius: 12px; }
.sfx .chip b { font: 800 16px var(--f-display); }
.sfx .chip small { font-size: 10px; color: var(--muted); font-weight: 700; }

/* ---------- the karma tree: fire, hanging branches, falling leaves, blossoms, and the scene (family.js) ---------- */
.ft-wood .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: ftFlame .45s ease-in-out infinite alternate; filter: drop-shadow(0 0 5px rgb(255 120 30 / .9)); }
@keyframes ftFlame { 0% { transform: scale(.9, .85) skewX(-4deg); opacity: .9; } 100% { transform: scale(1.08, 1.2) skewX(5deg); opacity: 1; } }
.ft-wood .ember { animation: ftEmber 1.8s ease-out infinite; }
@keyframes ftEmber { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-34px) translateX(6px); opacity: 0; } }
.ft-wood .hang { animation: ftHang 3.2s ease-in-out infinite; }
@keyframes ftHang { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
.ft-wood .fall-leaf { transform-box: fill-box; transform-origin: center; animation: ftLeafFall 7s ease-in infinite; }
@keyframes ftLeafFall { 0%, 55% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(18px, 140px) rotate(320deg); opacity: 0; } }
.ft-wood .bloom { transform-box: fill-box; transform-origin: center; animation: ftBloom .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ftBloom { from { transform: scale(0) rotate(-60deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* the scene follows the family's karma */
.ft-tree[data-env="paradise"] { background: radial-gradient(120% 45% at 50% 0%, rgb(255 255 255 / .85), transparent 70%), linear-gradient(180deg, #bfe6ff 0%, #e8fff0 55%, #d8f7c0 100%); }
.ft-tree[data-env="harsh"] { background: linear-gradient(180deg, #9aa4b0 0%, #c9cfd6 60%, #b8b4a4 100%) !important; }
.ft-tree[data-env="blight"] { background: linear-gradient(180deg, #2c2f36 0%, #4a4a4a 55%, #3a3226 100%) !important; }
.ft-tree[data-env="hell"] { background: radial-gradient(90% 40% at 50% 100%, rgb(255 80 20 / .55), transparent 70%), linear-gradient(180deg, #3a0c08 0%, #5a1a0e 50%, #1c0c08 100%) !important; }
.eco.ash { width: 4px; height: 4px; border-radius: 50%; background: #9a8a80; opacity: .8; animation: ecoAsh var(--d) linear infinite; animation-delay: var(--dl); }
@keyframes ecoAsh { from { transform: translate(0, 0); } to { transform: translate(var(--x), 110vh); opacity: .2; } }
.eco.snow { width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgb(255 255 255 / .8); animation: ecoAsh var(--d) linear infinite; animation-delay: var(--dl); }
.eco.bones { font-size: 18px; }
.eco.rainbow { font-size: 60px; opacity: .85; }
.eco.moon.blood { filter: drop-shadow(0 0 10px rgb(200 40 40 / .8)) sepia(1) saturate(4) hue-rotate(-20deg); }
.eco.sun.pale { filter: grayscale(.4); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .ft-wood .flame, .ft-wood .ember, .ft-wood .hang, .ft-wood .fall-leaf, .ft-wood .bloom, .eco.ash, .eco.snow { animation: none !important; } }
/* a dying tree fades, but its fire stays bright; no fresh green leaves drifting through a dead scene */
.ft-wood.dying { filter: none; }
.ft-wood.dying .trunk-g { filter: saturate(.35) sepia(.35) brightness(.9); }
.ft-tree[data-env="harsh"] .ft-fall, .ft-tree[data-env="blight"] .ft-fall, .ft-tree[data-env="hell"] .ft-fall { display: none; }

/* a clean tree: the details are one tap away, in each person's story */
.ft-tree .ft-label, .ft-tree .ft-facts, .ft-tree .ft-rib, .ft-tree .ft-heir-tag { display: none; }
.ft-tree .ft-gen { padding-top: 34px; }
/* the golden apple of a perfect life: impossible to miss */
.ft-wood .gold-fruit { filter: drop-shadow(0 0 8px rgb(255 214 60 / 1)) drop-shadow(0 0 18px rgb(255 190 40 / .8)); }
.ft-wood .gold-fruit .gf-rays { transform-box: fill-box; transform-origin: center; opacity: .75; animation: gfRays 6s linear infinite; }
@keyframes gfRays { to { transform: rotate(360deg); } }
.ft-wood .gold-fruit .gf-glow { animation: gfGlow2 1.6s ease-in-out infinite; }
@keyframes gfGlow2 { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.35); opacity: 1; } }
.ft-wood .gold-fruit .gf-spark { animation: gfSpark 1.4s ease-in-out infinite; }
.card.warn { border: 1px solid var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.bj-hand { border-radius: 10px; padding: 2px 6px; margin: 2px 0; opacity: .75; } .bj-hand.on { opacity: 1; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,214,102,.7); }

.mg-react { font-style: italic; opacity: .85; margin: 0 0 6px; } .bold-ans { border-style: dashed !important; } .bold-ans small { opacity: .7; margin-left: 4px; }

.diary-pages { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.diary-e { background: color-mix(in srgb, #f6e7c1 70%, var(--card, #fff)); color: #3b2f1e; border-radius: 10px; padding: 10px 12px; box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .25); font-family: Georgia, 'Times New Roman', serif; }
.diary-e h5 { margin: 0 0 4px; font-size: .8rem; letter-spacing: .04em; opacity: .7; text-transform: uppercase; }
.diary-e p { margin: 0; line-height: 1.5; }
.diary-last { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--warn, #d9a43a); font-family: Georgia, serif; font-style: italic; opacity: .9; }

.talent-badge { font-size: .85em; margin-left: 4px; filter: drop-shadow(0 0 4px rgba(255, 210, 90, .8)); }
#nlTal .chip.on { background: var(--accent, #2d8f6f); color: #fff; }

.admin-tag { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 6px; background: #e0242f; color: #fff; font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .06em; vertical-align: middle; box-shadow: 0 0 8px rgba(224, 36, 47, .55); }

.homeless-alert { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card, #fff)); animation: haPulse 2.4s ease-in-out infinite; }
.homeless-alert.soon { border-color: var(--warn, #f59e0b); background: color-mix(in srgb, var(--warn, #f59e0b) 12%, var(--card, #fff)); animation: none; }
.homeless-alert .ha-ic { font-size: 2rem; line-height: 1; } .homeless-alert p { margin: 4px 0 6px; } .homeless-alert .actions { margin: 0; }
@keyframes haPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 0%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bad) 25%, transparent); } }

.fr-uid code { font-size: .72rem; word-break: break-all; opacity: .85; user-select: all; }

.fx-feast .sc-stage { animation: scPop .45s both, fxFeast 2.6s ease-in-out infinite; }
.fx-feast .sc-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, transparent 35%, rgba(60, 0, 10, .65) 100%); }
@keyframes fxFeast { 0%, 100% { filter: brightness(.9) saturate(1.1); } 50% { filter: brightness(1.08) saturate(1.3); } }

/* holographic and infinite trophies */
.cup.holo svg { animation: holoShift 3.5s linear infinite; filter: drop-shadow(0 0 6px rgba(160, 255, 255, .7)); }
@keyframes holoShift { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 5px #7af5ff); } 50% { filter: hue-rotate(180deg) drop-shadow(0 0 9px #ffb3f6); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 5px #7af5ff); } }
.cup.holo::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size: 250% 100%; animation: holoSheen 2.6s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes holoSheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.cup.infinite { animation: infFloat 3s ease-in-out infinite; }
.cup.infinite svg { animation: infHue 4s linear infinite; }
@keyframes infFloat { 0%, 100% { transform: translateY(0) rotateY(0deg) scale(1); } 25% { transform: translateY(-4px) rotateY(20deg) scale(1.04); } 50% { transform: translateY(0) rotateY(0deg) scale(1.08); } 75% { transform: translateY(-4px) rotateY(-20deg) scale(1.04); } }
@keyframes infHue { 0% { filter: hue-rotate(0deg) saturate(1.4) drop-shadow(0 0 6px #ff3cac); } 33% { filter: hue-rotate(120deg) saturate(1.6) drop-shadow(0 0 12px #ffe66d); } 66% { filter: hue-rotate(240deg) saturate(1.4) drop-shadow(0 0 9px #2bd2ff); } 100% { filter: hue-rotate(360deg) saturate(1.4) drop-shadow(0 0 6px #ff3cac); } }
.cup .morph { display: grid; } .cup .morph b { grid-area: 1 / 1; opacity: 0; animation: infMorph 7.5s infinite; font-weight: normal; }
.cup .morph b:nth-child(2) { animation-delay: 1.5s; } .cup .morph b:nth-child(3) { animation-delay: 3s; } .cup .morph b:nth-child(4) { animation-delay: 4.5s; } .cup .morph b:nth-child(5) { animation-delay: 6s; }
@keyframes infMorph { 0% { opacity: 0; transform: scale(.4) rotate(-90deg); } 6%, 18% { opacity: 1; transform: scale(1) rotate(0); } 24%, 100% { opacity: 0; transform: scale(1.6) rotate(90deg); } }
.ult-banner { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: linear-gradient(120deg, #1b1033, #2b1b4d); color: #e9e4ff; border: 1px dashed rgba(200, 180, 255, .4); }
.ult-banner.got { background: linear-gradient(120deg, #ff3cac, #784ba0, #2b86c5, #ffe66d, #ff3cac); background-size: 300% 300%; animation: ultBg 6s ease infinite; border: none; color: #fff; cursor: pointer; box-shadow: 0 0 22px rgba(255, 60, 172, .45); }
@keyframes ultBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.ult-banner b { display: block; font-size: 1.05rem; } .ult-banner small { opacity: .85; } .ult-banner .cup { width: 54px; flex: none; } .ult-lock { font-size: 2rem; opacity: .35; filter: grayscale(1); }
.hall-tiers .t-h i { background: linear-gradient(90deg, #7af5ff, #ffb3f6, #b8ff9e) !important; }
.holo-wing h4 { background: linear-gradient(90deg, #7af5ff, #ffb3f6, #b8ff9e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.showcase { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 6px auto 10px; padding: 6px 12px; border-radius: 12px; background: rgba(127, 127, 127, .1); width: fit-content; }
.showcase .cup { width: 44px; } .showcase small { display: block; opacity: .7; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }

/* holographic trophies: a light TV glitch every few seconds (the Infinite keeps its own look) */
.cup.holo { position: relative; }
.cup.holo svg { animation: holoShift 3.5s linear infinite, holoGlitch 4.4s steps(1) infinite; }
.cup.holo > i { animation: holoRgb 4.4s steps(1) infinite; }
.cup.holo::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 8px; opacity: .18;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px); animation: holoScan 4.4s steps(1) infinite; }
.tro:nth-child(3n+1) .cup.holo svg, .tro:nth-child(3n+1) .cup.holo > i, .tro:nth-child(3n+1) .cup.holo::before { animation-delay: 0s, -1.3s; }
.tro:nth-child(3n+2) .cup.holo svg, .tro:nth-child(3n+2) .cup.holo > i, .tro:nth-child(3n+2) .cup.holo::before { animation-delay: 0s, -2.7s; }
@keyframes holoGlitch {
  0%, 86%, 100% { transform: none; clip-path: none; }
  87% { transform: translate(-2px, 0) skewX(-8deg); clip-path: inset(0 0 38% 0); }
  88% { transform: translate(3px, 1px); clip-path: inset(30% 0 0 0); }
  89% { transform: translate(-1px, -1px) skewX(5deg); clip-path: inset(12% 0 18% 0); }
  90% { transform: translate(2px, 0); clip-path: none; }
  91% { transform: none; }
}
@keyframes holoRgb {
  0%, 86%, 100% { text-shadow: none; transform: none; }
  87% { text-shadow: -2px 0 rgba(255, 0, 90, .85), 2px 0 rgba(0, 235, 255, .85); transform: translateX(2px); }
  88% { text-shadow: 3px 0 rgba(255, 0, 90, .85), -3px 0 rgba(0, 235, 255, .85); transform: translateX(-2px); }
  89% { text-shadow: -1px 0 rgba(255, 0, 90, .8), 1px 0 rgba(0, 235, 255, .8); transform: none; }
  90% { text-shadow: none; }
}
@keyframes holoScan { 0%, 86%, 100% { opacity: .14; transform: none; } 87% { opacity: .55; transform: translateY(2px); } 89% { opacity: .4; transform: translateY(-1px); } 91% { opacity: .14; } }
@media (prefers-reduced-motion: reduce) { .cup.holo svg { animation: holoShift 3.5s linear infinite; } .cup.holo > i, .cup.holo::before { animation: none; } }

/* the creator's divine avatar */
.av.divine { animation: divinePulse 3.2s ease-in-out infinite; overflow: visible; }
@keyframes divinePulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 240, 170, .8)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 250, 220, 1)) drop-shadow(0 0 22px rgba(255, 215, 90, .55)); } }
.divine-tile i { filter: drop-shadow(0 0 6px #ffe680); }
@media (prefers-reduced-motion: reduce) { .av.divine { animation: none; filter: drop-shadow(0 0 8px rgba(255, 240, 170, .9)); } }

/* heirlooms: shining keepsakes */
.heirlooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.heirloom { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(214, 170, 60, .6); background: linear-gradient(145deg, #fff7da, #f3d27a 55%, #fff1c2); color: #4a3510; cursor: pointer; text-align: center; }
.heirloom i { font-style: normal; font-size: 28px; filter: drop-shadow(0 0 6px rgba(255, 210, 90, .9)); }
.heirloom b { font-size: .78rem; } .heirloom small { font-size: .68rem; opacity: .8; }
.heirloom::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 48%, transparent 60%); background-size: 250% 100%; animation: holoSheen 3.2s ease-in-out infinite; pointer-events: none; }
.heirloom-big { font-size: 64px; text-align: center; filter: drop-shadow(0 0 14px rgba(255, 210, 90, .95)); animation: divinePulse 3s ease-in-out infinite; }
/* seasons and leaderboards */
.season-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; } .season-card .season-ic { font-size: 30px; } .season-card div { flex: 1; min-width: 0; } .season-card p { margin: 2px 0 0; font-size: .8rem; opacity: .85; } .season-card small { opacity: .7; }
.board-list { margin: 0 0 8px; padding-left: 22px; } .board-list li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; } .board-list li.me { font-weight: 800; color: var(--accent, #2d8f6f); }
.turf .bar { margin: 3px 0; }

/* ---------- prestige rings: 40 drawn rings (SVG) around the avatar, richer and livelier with every level ---------- */
.pfw2 { position: relative; border-radius: 50%; }
.pfw2 > .pr-svg { position: absolute; left: -18.2%; top: -18.2%; width: 136.4%; height: 136.4%; pointer-events: none; overflow: visible; z-index: 1; }
.avatar.pfw2::before, .avatar.pfw2.pro::before { display: none; }
.avatar.pfw2 em { z-index: 3; }
.pr-hue { animation: pfHue 6s linear infinite; }
.pr-breathe { animation: prBreathe 3.2s ease-in-out infinite; }
.pr-vivid { filter: saturate(1.25) brightness(1.05); }
.pr-hue.pr-breathe { animation: pfHue 6s linear infinite, prBreathe 3.2s ease-in-out infinite; }
@keyframes prBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes pfHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.avatar[data-act] { cursor: pointer; }
/* the Prestige window */
.modal.prestige, .modal.prestige .modal-body { overflow-x: hidden; }
.pr-hero { position: relative; display: flex; align-items: center; gap: 22px; margin: 4px -4px 14px; padding: 26px 18px 26px 30px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle at 25% 50%, rgb(255 215 120 / .35), transparent 55%), linear-gradient(135deg, #1c1238, #3a1f5c 55%, #0f1a3a); color: #fff; box-shadow: 0 10px 30px rgb(30 10 60 / .35); }
.pr-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, #fff 0 1px, transparent 2px), radial-gradient(circle at 60% 80%, #fff 0 1px, transparent 2px), radial-gradient(circle at 92% 70%, #fff 0 1px, transparent 2px), radial-gradient(circle at 45% 15%, #fff 0 1px, transparent 2px); opacity: .7; pointer-events: none; }
.pr-hero-ring { flex: none; padding: 16px; }
.pr-big { width: 84px; height: 84px; } .pr-big .av { width: 84px; height: 84px; font-size: 46px; }
.pr-hero-txt { min-width: 0; position: relative; z-index: 1; } .pr-hero-txt small { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; opacity: .75; }
.pr-hero-txt b { display: block; font-size: 1.55rem; line-height: 1.1; margin: 2px 0 8px; background: linear-gradient(90deg, #fff6c8, #ffd84a, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-lvl { display: inline-block; padding: 4px 12px; border-radius: 99px; background: rgb(255 255 255 / .14); font-weight: 800; font-size: .85rem; } .pr-lvl em { font-style: normal; opacity: .6; font-weight: 600; }
.pr-xp { margin: 0 2px 8px; } .pr-xp-top { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; font-weight: 700; margin-bottom: 6px; } .pr-xp-top span:last-child { opacity: .7; text-align: right; }
.pr-xp-bar { height: 12px; border-radius: 99px; background: rgb(127 127 127 / .2); overflow: hidden; box-shadow: inset 0 1px 3px rgb(0 0 0 / .2); }
.pr-xp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb000, #ffe66d, #ff7ad9, #7fd8ff); background-size: 200% 100%; animation: prBar 3s linear infinite; }
@keyframes prBar { to { background-position: -200% 0; } }
.pr-fam { margin: 14px 0 4px; } .pr-fam h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.pr-fam h4 small { letter-spacing: 0; font-weight: 700; opacity: .7; }
.pr-row2 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pr-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 8px; border-radius: 14px; min-width: 0; border: 0; cursor: pointer; color: inherit; font: inherit;
  background: linear-gradient(160deg, rgb(127 127 127 / .08), rgb(127 127 127 / .16)); box-shadow: inset 0 0 0 1px rgb(127 127 127 / .18); transition: transform .15s, box-shadow .15s; }
.pr-card:not(.locked):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgb(255 215 90 / .6), 0 6px 16px rgb(0 0 0 / .12); }
.pr-card.on { background: linear-gradient(160deg, rgb(255 215 90 / .22), rgb(255 150 60 / .14)); box-shadow: inset 0 0 0 2px rgb(255 200 60 / .85), 0 0 16px rgb(255 200 60 / .35); }
.pr-card b { font-size: .7rem; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pr-card small { font-size: .6rem; opacity: .7; white-space: nowrap; } .pr-card.on small { opacity: 1; font-weight: 800; color: #d98a00; }
.pr-card.locked { cursor: default; } .pr-card.locked .pr-mini { filter: grayscale(1) brightness(.75); opacity: .55; }
.pr-prev { position: relative; padding: 10px; display: grid; place-items: center; }
.pr-mini { width: 40px; height: 40px; display: grid; place-items: center; } .pr-mini .av { width: 40px; height: 40px; font-size: 22px; }
.pr-shadow { width: 40px; height: 40px; border-radius: 50%; background: rgb(127 127 127 / .35); }
.pr-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; z-index: 2; filter: none; }
.big-avatar .pr-friend { width: 110px; height: 110px; margin: 0 auto; } .big-avatar:has(> .pr-friend) { margin: 24px auto 30px; } .big-avatar .pr-friend .av { width: 110px; height: 110px; }
/* the face always fills its ring and sits dead centre in it, whatever size the card gives the avatar (the profile ID card makes it 96px) */
.big-avatar .pfw2.pr-friend { display: grid; place-items: center; }
html .big-avatar .pfw2.pr-friend > .av { width: 100%; height: 100%; margin: 0; }
html .rk-id .big-avatar .pfw2.pr-friend { width: 96px; height: 96px; }
@media (prefers-reduced-motion: reduce) { .pr-svg, .pr-svg * { animation: none !important; } }
.pr-row { width: 44px; height: 44px; flex: none; margin: 3px 2px; } .pr-row .face { width: 44px; height: 44px; }
/* the friend row: a ring wrapper is a div, and `.job > div` would stretch it across the row (ring off the avatar) */
.job > div.pfw2.pr-row { flex: 0 0 44px; display: block; min-width: 44px; margin: 6px 8px 6px 6px; }
/* ---------- prestige themes (themes.js), unlocked with trophy XP. Dark ones set the full palette like Halloween ---------- */
html:root[data-palette="aurora"] {
  --bg: #061420; --surface: #0c2130; --sunk: #12303f; --ink: #e8fff8; --muted: #93c8bd; --line: #1d4252;
  --accent: #2ee6b0; --accent-ink: #032419; --accent-2: #b45cff; --gold: #ffd84a; --good: #5eead4; --bad: #ff6b8a; --warn: #fcd34d;
  --head-1: #0b3a5a; --head-2: #1fa98a; --felt: #0b3a4a; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 26px -12px rgb(0 0 0 / .8);
  --glow-1: rgb(46 230 176 / .55); --glow-2: rgb(124 58 237 / .5); --glow-3: rgb(56 189 248 / .35);
}
html:root[data-palette="aurora"] body { background: radial-gradient(1200px 600px at 50% -10%, rgb(46 230 176 / .14), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgb(180 92 255 / .12), transparent 60%), var(--bg); }
html:root[data-palette="neon"] {
  --bg: #0b0418; --surface: #160a2b; --sunk: #21103d; --ink: #fbeaff; --muted: #c3a3e0; --line: #3b1d5e;
  --accent: #ff2bd6; --accent-ink: #1a0016; --accent-2: #22e4ff; --gold: #ffe14d; --good: #3cffb4; --bad: #ff4d6d; --warn: #ffd23f;
  --head-1: #2a0845; --head-2: #c026d3; --felt: #1e0636; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(255 43 214 / .55); --glow-2: rgb(34 228 255 / .45); --glow-3: rgb(124 58 237 / .4);
}
html:root[data-palette="neon"] body { background: radial-gradient(1000px 500px at 50% 110%, rgb(255 43 214 / .16), transparent 60%), radial-gradient(900px 500px at 50% -10%, rgb(34 228 255 / .1), transparent 60%), var(--bg); }
html:root[data-palette="neon"] .card { box-shadow: 0 0 0 1px rgb(255 43 214 / .12), 0 10px 30px -18px rgb(34 228 255 / .5), var(--shadow); }
html:root[data-palette="ember"] {
  --bg: #160604; --surface: #230c08; --sunk: #33140d; --ink: #fff0e6; --muted: #e0a98f; --line: #4a1d12;
  --accent: #ff5a1f; --accent-ink: #210700; --accent-2: #ffc23d; --gold: #ffc23d; --good: #a3e635; --bad: #ff4d4d; --warn: #ffb020;
  --head-1: #3a0a00; --head-2: #d9380f; --felt: #3a0e06; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(255 90 31 / .6); --glow-2: rgb(255 194 61 / .45); --glow-3: rgb(185 28 28 / .45);
}
html:root[data-palette="ember"] body { background: radial-gradient(1200px 500px at 50% 115%, rgb(255 90 31 / .22), transparent 60%), var(--bg); }
html:root[data-palette="ember"] .card { box-shadow: 0 0 0 1px rgb(255 90 31 / .1), 0 10px 30px -18px rgb(255 90 31 / .5), var(--shadow); }
html:root[data-palette="glacier"] { --accent: #0ea5e9; --accent-2: #8b5cf6; --head-1: #0c4a6e; --head-2: #38bdf8; --felt: #0c4a6e; --accent-ink: #ffffff;
  --glow-1: rgb(165 243 252 / .6); --glow-2: rgb(56 189 248 / .5); --glow-3: rgb(167 139 250 / .35); }
html:root[data-palette="glacier"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #7dd3fc 22%, var(--bg)), var(--bg)); }
html:root[data-palette="glacier"] .card { border-color: color-mix(in srgb, #7dd3fc 30%, var(--line)); }
html:root[data-palette="cosmic"] {
  --bg: #05031a; --surface: #0e0a2c; --sunk: #17123d; --ink: #f0ecff; --muted: #a9a1d8; --line: #2a2260;
  --accent: #a78bfa; --accent-ink: #120a2e; --accent-2: #f472b6; --gold: #fcd34d; --good: #6ee7b7; --bad: #fb7185; --warn: #fcd34d;
  --head-1: #0a0630; --head-2: #5b21b6; --felt: #120a3a; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(167 139 250 / .55); --glow-2: rgb(244 114 182 / .45); --glow-3: rgb(29 78 216 / .45);
}
html:root[data-palette="cosmic"] body { background: radial-gradient(800px 500px at 20% 0%, rgb(91 33 182 / .25), transparent 60%), radial-gradient(800px 500px at 90% 90%, rgb(244 114 182 / .12), transparent 60%), var(--bg); }
/* the Themes window (Menu) */
.th-fam { margin: 14px 0 4px; } .th-fam h4 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; opacity: .85; }
.th-fam h4 small { letter-spacing: 0; font-weight: 700; opacity: .7; } .th-fam .fine { margin: -2px 4px 10px; }
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.th-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 14px; border: 0; cursor: pointer; color: inherit; font: inherit; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, box-shadow .15s; }
.th-card:not(.locked):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--accent), 0 6px 16px rgb(0 0 0 / .15); }
.th-card.on { box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.th-card b { font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .th-card small { font-size: .62rem; opacity: .75; white-space: nowrap; }
.th-card.on small { opacity: 1; font-weight: 800; color: var(--accent); }
.th-card.locked { cursor: default; } .th-card.locked .th-prev { filter: grayscale(.85) brightness(.7); }
.th-prev { position: relative; width: 100%; height: 58px; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--a) 35%, #111), color-mix(in srgb, var(--b) 25%, #111)); }
.th-prev .th-top { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(90deg, var(--a), var(--b)); }
.th-prev .th-dot { position: absolute; left: 7px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: var(--b); box-shadow: 0 0 8px var(--b); }
.th-prev .th-line { position: absolute; left: 27px; right: 8px; top: 26px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .55); } .th-prev .th-line.s { top: 34px; right: 30px; opacity: .6; }
.th-prev em { position: absolute; right: 6px; bottom: 3px; font-style: normal; font-size: 17px; }
.th-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; background: var(--sunk); font-size: .78rem; font-weight: 700; }
.th-chip i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }

/* ---------- back to the top (long lists) ---------- */
#toTop { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--accent-ink, #fff); box-shadow: var(--shadow-lg); font: 900 22px/1 var(--f-display, inherit); opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
#toTop.on { opacity: .95; transform: none; pointer-events: auto; }
#toTop:hover { opacity: 1; transform: translateY(-2px); }
#toTop span { animation: toTopBob 1.6s ease-in-out infinite; }
@keyframes toTopBob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { #toTop span { animation: none; } }

/* ---------- Hall of Trophies: order and rarity filter ---------- */
.hall-order { margin: 4px 0 2px; }
.hall-tiers button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.hall-tiers button:hover { background: var(--sunk); }
.hall-tiers button.on { border-color: var(--accent); color: var(--ink); background: var(--sunk); }

/* ---------- family tree: golden apples above everything, a life still being lived elsewhere ---------- */
.ft-goldlayer { z-index: 2; }
.ft-node.hidden-life .ft-pic { filter: grayscale(.6); }

/* =====================================================================================================================
   Living prestige themes (v1.19). Every prestige and legendary theme gets: a slowly moving painted background (#fx
   .fx-bg), its own scenery, slower particles, a slowly flowing header, and an Age button dressed for the theme
   (.ab-skin layers inside #ageBtn). Movements are slow on purpose: 20 to 90 seconds per cycle.
   ===================================================================================================================== */
/* the five Legendary palettes */
html:root[data-palette="abyss"] {
  --bg: #010d1a; --surface: #04192b; --sunk: #072338; --ink: #e0fbff; --muted: #7fb8c9; --line: #0e3550;
  --accent: #00e5ff; --accent-ink: #001a20; --accent-2: #1de9b6; --gold: #ffe082; --good: #64ffda; --bad: #ff6b8a; --warn: #ffd54f;
  --head-1: #011627; --head-2: #0077b6; --head-3: #00b4d8; --felt: #032536; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(0 229 255 / .55); --glow-2: rgb(29 233 182 / .45); --glow-3: rgb(106 0 244 / .4);
}
html:root[data-palette="sakura"] {
  --bg: #120818; --surface: #1d0f27; --sunk: #2a1636; --ink: #fff0f7; --muted: #d6a7c4; --line: #3d2350;
  --accent: #ff8fc8; --accent-ink: #2a0018; --accent-2: #b39dff; --gold: #ffd59e; --good: #9ff0c8; --bad: #ff6f91; --warn: #ffd59e;
  --head-1: #1a0b2e; --head-2: #6b2a6e; --head-3: #c24d8f; --felt: #24102e; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(255 143 200 / .55); --glow-2: rgb(179 157 255 / .45); --glow-3: rgb(255 213 158 / .35);
}
html:root[data-palette="empire"] {
  --bg: #0b0905; --surface: #16120a; --sunk: #211a0e; --ink: #fff6dc; --muted: #cdb98a; --line: #3a2e14;
  --accent: #f5c542; --accent-ink: #241a00; --accent-2: #e8d5a3; --gold: #ffd36b; --good: #b5e48c; --bad: #ff6b6b; --warn: #ffd36b;
  --head-1: #0d0a05; --head-2: #5c4510; --head-3: #c9a227; --felt: #1c160a; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(245 197 66 / .55); --glow-2: rgb(255 241 193 / .35); --glow-3: rgb(184 134 11 / .45);
}
html:root[data-palette="storm"] {
  --bg: #070a18; --surface: #0f1428; --sunk: #171e3a; --ink: #eef2ff; --muted: #9aa7d6; --line: #262f57;
  --accent: #7aa2ff; --accent-ink: #050a20; --accent-2: #c4b5fd; --gold: #fde68a; --good: #86efac; --bad: #fb7185; --warn: #fde68a;
  --head-1: #0b1026; --head-2: #1e2a66; --head-3: #4f6fd8; --felt: #0f1633; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(122 162 255 / .55); --glow-2: rgb(196 181 253 / .45); --glow-3: rgb(43 45 110 / .5);
}
html:root[data-palette="eternity"] {
  --bg: #0a0016; --surface: #140828; --sunk: #1e0f3a; --ink: #fff4ff; --muted: #c8b0e6; --line: #34205c;
  --accent: #ff5ec4; --accent-ink: #26001a; --accent-2: #5ee7ff; --gold: #ffe45e; --good: #7dffb3; --bad: #ff6b8a; --warn: #ffe45e;
  --head-1: #120024; --head-2: #5a1aa0; --head-3: #ff5ec4; --felt: #1a0833; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(255 94 196 / .55); --glow-2: rgb(94 231 255 / .45); --glow-3: rgb(255 228 94 / .35);
}
html:root[data-palette="abyss"] body { background: linear-gradient(180deg, #02213a, var(--bg) 55%, #000710); }
html:root[data-palette="sakura"] body { background: linear-gradient(180deg, #1c0b2e, var(--bg) 60%, #0c0510); }
html:root[data-palette="empire"] body { background: radial-gradient(1000px 600px at 50% -10%, rgb(245 197 66 / .16), transparent 60%), var(--bg); }
html:root[data-palette="storm"] body { background: linear-gradient(180deg, #0d1330, var(--bg) 60%, #04060f); }
html:root[data-palette="eternity"] body { background: radial-gradient(900px 600px at 30% 0%, rgb(255 94 196 / .18), transparent 60%), radial-gradient(900px 600px at 80% 100%, rgb(94 231 255 / .14), transparent 60%), var(--bg); }
html:root[data-palette="empire"] .card, html:root[data-palette="eternity"] .card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 10px 30px -18px color-mix(in srgb, var(--accent) 50%, transparent), var(--shadow); }

/* the header flows slowly in every prestige theme */
html:root[data-prestige] #top { background-size: 220% 220%; animation: thHead 26s ease-in-out infinite alternate; }
@keyframes thHead { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* ---------- the slowly moving painted background ---------- */
.fx-bg { position: absolute; inset: -25%; pointer-events: none; animation: fxBgDrift 70s ease-in-out infinite alternate; will-change: transform; }
@keyframes fxBgDrift { 0% { transform: translate(-3%, -2%) rotate(-2deg) scale(1); } 50% { transform: translate(2%, 3%) rotate(1.5deg) scale(1.06); } 100% { transform: translate(4%, -3%) rotate(3deg) scale(1.02); } }
.fx-bg-aurora { background: radial-gradient(40% 30% at 30% 20%, rgb(46 230 176 / .22), transparent 70%), radial-gradient(35% 28% at 75% 30%, rgb(124 58 237 / .2), transparent 70%), radial-gradient(50% 40% at 50% 90%, rgb(56 189 248 / .12), transparent 70%); }
.fx-bg-neon { background: radial-gradient(45% 30% at 50% 85%, rgb(255 43 214 / .22), transparent 70%), radial-gradient(40% 25% at 50% 10%, rgb(34 228 255 / .14), transparent 70%); animation-duration: 50s; }
.fx-bg-ember { background: radial-gradient(50% 35% at 50% 100%, rgb(255 90 31 / .3), transparent 70%), radial-gradient(30% 25% at 20% 30%, rgb(185 28 28 / .18), transparent 70%), radial-gradient(30% 25% at 80% 40%, rgb(255 194 61 / .12), transparent 70%); }
.fx-bg-glacier { background: radial-gradient(45% 35% at 25% 15%, rgb(165 243 252 / .3), transparent 70%), radial-gradient(40% 30% at 80% 70%, rgb(167 139 250 / .16), transparent 70%); }
.fx-bg-cosmic { background: radial-gradient(35% 28% at 25% 25%, rgb(91 33 182 / .35), transparent 70%), radial-gradient(30% 25% at 80% 70%, rgb(244 114 182 / .18), transparent 70%), radial-gradient(25% 20% at 60% 15%, rgb(29 78 216 / .25), transparent 70%); }
.fx-bg-abyss { background: radial-gradient(45% 30% at 50% 0%, rgb(0 180 216 / .3), transparent 70%), radial-gradient(35% 30% at 20% 70%, rgb(29 233 182 / .12), transparent 70%), radial-gradient(35% 30% at 85% 80%, rgb(106 0 244 / .16), transparent 70%); animation-duration: 90s; }
.fx-bg-sakura { background: radial-gradient(40% 30% at 70% 20%, rgb(255 143 200 / .2), transparent 70%), radial-gradient(45% 35% at 20% 80%, rgb(179 157 255 / .16), transparent 70%), radial-gradient(30% 25% at 50% 50%, rgb(255 213 158 / .08), transparent 70%); animation-duration: 80s; }
.fx-bg-empire { background: radial-gradient(45% 35% at 50% 10%, rgb(245 197 66 / .22), transparent 70%), radial-gradient(35% 30% at 15% 85%, rgb(184 134 11 / .18), transparent 70%), radial-gradient(35% 30% at 85% 85%, rgb(255 241 193 / .08), transparent 70%); animation-duration: 90s; }
.fx-bg-storm { background: radial-gradient(50% 30% at 50% 0%, rgb(91 140 255 / .2), transparent 70%), radial-gradient(40% 30% at 15% 60%, rgb(43 45 110 / .4), transparent 70%), radial-gradient(40% 30% at 85% 50%, rgb(160 196 255 / .1), transparent 70%); animation-duration: 60s; }
.fx-bg-eternity { background: conic-gradient(from 0deg at 50% 50%, rgb(255 94 196 / .16), rgb(94 231 255 / .14), rgb(255 228 94 / .1), rgb(125 255 179 / .12), rgb(167 94 255 / .16), rgb(255 94 196 / .16)); filter: blur(60px); animation: fxBgSpin 120s linear infinite; }
@keyframes fxBgSpin { to { transform: rotate(360deg) scale(1.1); } }
/* prestige emoji drift slower and softer */
html:root[data-prestige] #fx .fx-p { opacity: .55; }
html:root[data-prestige] .fx-orb { opacity: .18; }
html:root[data-prestige="legend"] .fx-orb { opacity: .22; }

@keyframes fxScan { from { transform: translateY(-30vh); } to { transform: translateY(110vh); } }
/* ---------- the five Legendary themes: live canvas scenes (legendfx.js); the cards turn slightly glassy so the world shows through ---------- */
.fx-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; } /* above the blurred, spinning painted background (Eternity's could cover it) */
html:root[data-prestige="legend"] .card { background: color-mix(in srgb, var(--surface) 80%, transparent); }
/* keyframes the Legendary Age buttons still use */
@keyframes fxJellyPulse { 50% { transform: scale(1.12, .88); } }
@keyframes fxJellyTent { 50% { transform: scaleY(.8) skewX(6deg); } }
@keyframes fxFlash { 0%, 86%, 89%, 91%, 100% { opacity: 0; } 87% { opacity: .9; } 90% { opacity: .5; } }
/* ---------- the Age button, dressed for each prestige theme ---------- */
.age-btn .ab-skin { display: none; }
html:root[data-prestige] .age-btn .ab-skin { display: block; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 0; }
html:root[data-prestige] .age-btn .ab-skin > i { position: absolute; inset: 0; border-radius: 50%; }
html:root[data-prestige] .age-btn b, html:root[data-prestige] .age-btn span { position: relative; z-index: 1; text-shadow: 0 1px 3px rgb(0 0 0 / .6), 0 0 10px rgb(0 0 0 / .35); }
html:root[data-prestige] .age-btn { animation: thBreathe 5s ease-in-out infinite; }
html:root[data-prestige] .age-btn::before { animation-duration: 9s; }
@keyframes thBreathe { 50% { box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--glow-1, var(--accent)) 50%, transparent), 0 0 9px 0 color-mix(in srgb, var(--glow-2, transparent) 35%, transparent); } }
@keyframes abSpin { to { transform: rotate(360deg); } }
@keyframes abSlide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes abPulse { 50% { opacity: .45; transform: scale(.92); } }
@keyframes abSweep { 0%, 60% { transform: translateX(-120%) rotate(25deg); } 85%, 100% { transform: translateX(120%) rotate(25deg); } }
@keyframes abRise { from { transform: translateY(40%); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-60%); opacity: 0; } }
@keyframes abFlicker { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 44% { opacity: .35; } 46% { opacity: 1; } 71% { opacity: .8; } 72% { opacity: .3; } 73% { opacity: 1; } }
/* aurora: northern lights flowing across a night sky */
html:root[data-palette="aurora"] .age-btn { background: radial-gradient(circle at 50% 120%, #0b3a5a, #04121d 70%); }
html:root[data-palette="aurora"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 10%, #2ee6b0 25%, #7c3aed 45%, transparent 60%, #38bdf8 80%, transparent); }
html:root[data-palette="aurora"] .ab-a { background: linear-gradient(115deg, transparent 20%, rgb(46 230 176 / .85) 38%, rgb(124 58 237 / .7) 55%, rgb(56 189 248 / .6) 70%, transparent 85%); background-size: 260% 100%; filter: blur(4px); animation: abSlide 9s ease-in-out infinite alternate; }
html:root[data-palette="aurora"] .ab-b { background: radial-gradient(1.5px 1.5px at 20% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 18%, #fff, transparent), radial-gradient(1px 1px at 82% 60%, #fff, transparent), radial-gradient(1px 1px at 30% 75%, #fff, transparent); animation: abPulse 4s ease-in-out infinite; }
/* neon: a buzzing neon ring, a scan line, pink and cyan tubes */
html:root[data-palette="neon"] .age-btn { background: radial-gradient(circle, #2a0845, #0b0418 75%); border-color: #160a2b; box-shadow: 0 0 8px rgb(255 43 214 / .3), 0 0 16px -6px rgb(34 228 255 / .5); }
html:root[data-palette="neon"] .age-btn::before { background: conic-gradient(from 0deg, #ff2bd6, #22e4ff, #ff2bd6, #22e4ff, #ff2bd6); }
html:root[data-palette="neon"] .ab-a { inset: 9px !important; border: 2.5px solid #ff2bd6; box-shadow: 0 0 10px #ff2bd6, inset 0 0 10px #ff2bd6; animation: abFlicker 6s infinite; }
html:root[data-palette="neon"] .ab-b { inset: 15px !important; border: 2px solid #22e4ff; box-shadow: 0 0 8px #22e4ff, inset 0 0 8px #22e4ff; animation: abFlicker 7.3s infinite reverse; }
html:root[data-palette="neon"] .ab-c { border-radius: 0 !important; background: linear-gradient(180deg, transparent 45%, rgb(34 228 255 / .35) 50%, transparent 55%); animation: fxScan 4s linear infinite; }
html:root[data-palette="neon"] .age-btn b { color: #fff; text-shadow: 0 0 6px #ff2bd6, 0 0 14px #ff2bd6; }
/* ember: a ball of cooling magma, its cracks glowing and breathing */
html:root[data-palette="ember"] .age-btn { background: radial-gradient(circle at 35% 30%, #5a1a0a, #200602 70%); }
html:root[data-palette="ember"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 15%, #ff5a1f 30%, #ffc23d 42%, transparent 55%, #b91c1c 75%, transparent); }
html:root[data-palette="ember"] .ab-a { background: conic-gradient(from 20deg at 45% 55%, transparent 0 8%, #ff7a1a 9% 10%, transparent 11% 30%, #ffb02e 31% 32%, transparent 33% 52%, #ff5a1f 53% 54%, transparent 55% 74%, #ffc23d 75% 76%, transparent 77%); filter: blur(.6px) drop-shadow(0 0 4px #ff5a1f); animation: abPulse 3.6s ease-in-out infinite; }
html:root[data-palette="ember"] .ab-b { background: radial-gradient(circle at 50% 110%, rgb(255 140 40 / .9), transparent 60%); animation: abPulse 5s ease-in-out infinite reverse; }
html:root[data-palette="ember"] .ab-c { background: radial-gradient(3px 3px at 30% 80%, #ffd27a, transparent), radial-gradient(2px 2px at 60% 85%, #ffb02e, transparent), radial-gradient(2px 2px at 72% 70%, #ffd27a, transparent); animation: abRise 3s linear infinite; }
/* glacier: a cut ice crystal with light sliding across its facets */
html:root[data-palette="glacier"] .age-btn { background: radial-gradient(circle at 35% 30%, #f0fdff, #7dd3fc 45%, #0369a1); color: #04304a; }
html:root[data-palette="glacier"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 15%, #ffffff 28%, #a5f3fc 40%, transparent 55%, #c4b5fd 78%, transparent); }
html:root[data-palette="glacier"] .ab-a { background: conic-gradient(from 0deg, rgb(255 255 255 / .35) 0 12.5%, transparent 12.5% 25%, rgb(255 255 255 / .2) 25% 37.5%, transparent 37.5% 50%, rgb(255 255 255 / .3) 50% 62.5%, transparent 62.5% 75%, rgb(255 255 255 / .18) 75% 87.5%, transparent 87.5%); animation: abSpin 40s linear infinite; }
html:root[data-palette="glacier"] .ab-b { inset: -20% !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent 40%, rgb(255 255 255 / .85) 50%, transparent 60%); animation: abSweep 6s ease-in-out infinite; }
html:root[data-palette="glacier"] .age-btn b, html:root[data-palette="glacier"] .age-btn span { color: #fff; text-shadow: 0 1px 3px #0c4a6e, 0 0 8px #0369a1; }
/* cosmic: a ringed planet with a moon in orbit */
html:root[data-palette="cosmic"] .age-btn { background: radial-gradient(circle at 32% 28%, #c4b5fd, #6d28d9 45%, #1e1b4b 80%); }
html:root[data-palette="cosmic"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 10%, #a78bfa 25%, #f472b6 40%, transparent 55%, #60a5fa 80%, transparent); }
html:root[data-palette="cosmic"] .ab-a { background: repeating-linear-gradient(170deg, transparent 0 7px, rgb(255 255 255 / .08) 7px 9px); animation: abSlide 20s linear infinite; background-size: 200% 200%; }
html:root[data-palette="cosmic"] .ab-b { inset: 38% -10% !important; border-radius: 50% !important; border: 2.5px solid rgb(244 114 182 / .8); transform: rotate(-16deg); box-shadow: 0 0 8px rgb(244 114 182 / .6); }
html:root[data-palette="cosmic"] .ab-c { animation: abSpin 7s linear infinite; background: radial-gradient(5px 5px at 50% 8%, #fde68a 70%, transparent 75%); }

/* the five Legendary buttons */
html:root[data-prestige="legend"] .age-btn { width: 80px; height: 80px; margin-top: -38px; }
html:root[data-prestige="legend"] .age-btn::after { content: ''; position: absolute; inset: -18px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 58%, var(--glow-1) 62%, transparent 66%); opacity: .45; animation: abPulse 6s ease-in-out infinite; }
/* abyss: a glowing jellyfish bell, bubbles drifting up through it */
html:root[data-palette="abyss"] .age-btn { background: radial-gradient(circle at 50% 35%, #0a4f6e, #021a2c 70%); }
html:root[data-palette="abyss"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 12%, #00e5ff 28%, #1de9b6 42%, transparent 58%, #6a00f4 80%, transparent); }
html:root[data-palette="abyss"] .ab-a { inset: 10px 12px 26px !important; border-radius: 50% 50% 35% 35% !important; background: radial-gradient(circle at 50% 75%, rgb(180 255 252 / .95), rgb(0 229 255 / .55) 55%, transparent 75%); box-shadow: 0 0 16px rgb(0 229 255 / .7); animation: fxJellyPulse 3.2s ease-in-out infinite; }
html:root[data-palette="abyss"] .ab-b { inset: 46% 30% 6% !important; border-radius: 0 !important; background: repeating-linear-gradient(90deg, rgb(140 255 250 / .6) 0 1.5px, transparent 1.5px 5px); -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); animation: fxJellyTent 3.2s ease-in-out infinite; transform-origin: 50% 0; }
html:root[data-palette="abyss"] .ab-c { background: radial-gradient(2.5px 2.5px at 25% 80%, rgb(200 255 255 / .9), transparent), radial-gradient(2px 2px at 70% 85%, rgb(200 255 255 / .8), transparent), radial-gradient(3px 3px at 55% 95%, rgb(200 255 255 / .7), transparent); animation: abRise 5s linear infinite; }
/* sakura: a paper lantern glowing warm, petals circling it */
html:root[data-palette="sakura"] .age-btn { background: radial-gradient(circle at 50% 50%, #ffe6b8, #ff8a5c 45%, #b3264f 85%); }
html:root[data-palette="sakura"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 10%, #ff8fc8 25%, #ffd6e8 38%, transparent 52%, #b39dff 78%, transparent); }
html:root[data-palette="sakura"] .ab-a { inset: 6px 13px !important; border-radius: 44% 44% 40% 40% / 50% 50% 50% 50% !important; box-shadow: inset 0 0 10px rgb(120 20 40 / .45); background: repeating-linear-gradient(90deg, transparent 0 9px, rgb(120 20 40 / .35) 9px 11px), linear-gradient(180deg, rgb(60 10 20 / .5) 0 10%, transparent 10% 90%, rgb(60 10 20 / .5) 90%); }
html:root[data-palette="sakura"] .ab-b { background: radial-gradient(circle, rgb(255 240 200 / .7), transparent 60%); animation: abFlicker 5s infinite, abPulse 4s ease-in-out infinite; }
html:root[data-palette="sakura"] .ab-c { animation: abSpin 14s linear infinite; background: radial-gradient(3px 2px at 50% 5%, #ffc1df 80%, transparent), radial-gradient(3px 2px at 95% 50%, #ffd6e8 80%, transparent), radial-gradient(3px 2px at 50% 95%, #ff9fcf 80%, transparent), radial-gradient(3px 2px at 5% 50%, #ffe3ef 80%, transparent), radial-gradient(2px 2px at 82% 18%, #ffc1df 80%, transparent), radial-gradient(2px 2px at 18% 82%, #ffd6e8 80%, transparent); }
/* empire: a gold medallion, an engraved rim, a sunburst turning, light sliding across */
html:root[data-palette="empire"] .age-btn { background: radial-gradient(circle at 35% 30%, #fff1c1, #f5c542 35%, #b8860b 70%, #6b4a05); color: #3a2800; }
html:root[data-palette="empire"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 15%, #fff1c1 30%, #f5c542 42%, transparent 55%, #b8860b 78%, transparent); }
html:root[data-palette="empire"] .ab-a { inset: 6px !important; border: 2px dashed rgb(90 60 0 / .55); animation: abSpin 60s linear infinite; }
html:root[data-palette="empire"] .ab-b { background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .18) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 62%); mask: radial-gradient(circle, #000 30%, transparent 62%); animation: abSpin 30s linear infinite reverse; }
html:root[data-palette="empire"] .ab-c { inset: -20% !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent 40%, rgb(255 255 255 / .8) 50%, transparent 60%); animation: abSweep 7s ease-in-out infinite; }
html:root[data-palette="empire"] .age-btn b, html:root[data-palette="empire"] .age-btn span { color: #fff8e1; text-shadow: 0 1px 2px #5c3d00, 0 0 8px rgb(90 60 0 / .6); }
/* storm: an orb of lightning crackling inside */
html:root[data-palette="storm"] .age-btn { background: radial-gradient(circle at 50% 50%, #3b4fa8, #10163a 70%); box-shadow: 0 0 9px rgb(122 162 255 / .3); }
html:root[data-palette="storm"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 10%, #a0c4ff 22%, #ffffff 28%, transparent 40%, #c4b5fd 70%, transparent 80%); animation-duration: 5s; }
html:root[data-palette="storm"] .ab-a { background: conic-gradient(from 0deg, transparent 0 9%, #cfe0ff 9.5% 10.5%, transparent 11% 34%, #e8f0ff 34.5% 35.5%, transparent 36% 61%, #cfe0ff 61.5% 62.5%, transparent 63% 85%, #e8f0ff 85.5% 86.5%, transparent 87%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); filter: drop-shadow(0 0 3px #a0c4ff); animation: abSpin 9s steps(24) infinite, abFlicker 2.7s infinite; }
html:root[data-palette="storm"] .ab-b { background: radial-gradient(circle, rgb(220 235 255 / .85), transparent 45%); animation: fxFlash 6s linear infinite; }
html:root[data-palette="storm"] .ab-c { background: radial-gradient(circle, rgb(160 196 255 / .5), transparent 70%); animation: abPulse 2.4s ease-in-out infinite; }
/* eternity: an iridescent jewel of every color with a galaxy turning inside */
html:root[data-palette="eternity"] .age-btn { background: conic-gradient(from 0deg, #ff5ec4, #ffe45e, #7dffb3, #5ee7ff, #a75eff, #ff5ec4); }
html:root[data-palette="eternity"] .age-btn::before { background: conic-gradient(from 0deg, #ff5ec4, #ffe45e, #7dffb3, #5ee7ff, #a75eff, #ff5ec4); animation-duration: 12s; }
html:root[data-palette="eternity"] .ab-a { background: conic-gradient(from 0deg, #ff5ec4, #ffe45e, #7dffb3, #5ee7ff, #a75eff, #ff5ec4); animation: abSpin 18s linear infinite; }
html:root[data-palette="eternity"] .ab-b { inset: 8px !important; background: conic-gradient(from 0deg, transparent, rgb(255 255 255 / .55), transparent 25%, rgb(10 0 22 / .0) 40%, rgb(255 255 255 / .4), transparent 75%), radial-gradient(circle, #fff 4%, rgb(40 0 70 / .85) 20%, #12002a 70%); animation: abSpin 10s linear infinite reverse; }
html:root[data-palette="eternity"] .ab-c { background: radial-gradient(1.5px 1.5px at 30% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 68% 40%, #fff, transparent), radial-gradient(1px 1px at 45% 70%, #fff, transparent), radial-gradient(1px 1px at 62% 62%, #fff, transparent); animation: abPulse 3s ease-in-out infinite; }

/* ---------- live previews in the Themes window ---------- */
.th-prev .th-bgp { position: absolute; inset: 0; }
.th-prev.th-live .th-bgp { inset: -50%; background: radial-gradient(30% 30% at 30% 30%, color-mix(in srgb, var(--b) 70%, transparent), transparent 70%), radial-gradient(30% 30% at 70% 70%, color-mix(in srgb, var(--a) 90%, #fff 10%), transparent 70%); animation: fxBgSpin 16s linear infinite; opacity: .8; }
.th-prev.th-live .th-top { background-size: 200% 100%; animation: abSlide 6s ease-in-out infinite alternate; background-image: linear-gradient(90deg, var(--a), var(--b), var(--a)); }
.th-legend .th-card { background: linear-gradient(var(--sunk), var(--sunk)) padding-box, conic-gradient(from var(--thA, 0deg), #ff5ec4, #ffe45e, #7dffb3, #5ee7ff, #a75eff, #ff5ec4) border-box; border: 1.5px solid transparent; }
.th-legend .th-card:not(.locked) { box-shadow: 0 0 14px -4px color-mix(in srgb, var(--b) 70%, transparent); }
.th-legend h4 span { background: linear-gradient(90deg, #ffd36b, #ff5ec4, #5ee7ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { html:root[data-prestige] #top, html:root[data-prestige] .age-btn, html:root[data-prestige] .age-btn *, html:root[data-prestige] .age-btn::before, html:root[data-prestige] .age-btn::after, .th-prev.th-live * { animation: none !important; } }

/* ---------- common themes (themes.js): unlocked at the first prestige levels, they work in light and dark like the free ones ---------- */
html:root[data-palette="tropic"] { --accent: #0d9488; --accent-2: #f59e0b; --head-1: #0f766e; --head-2: #22c55e; --felt: #115e59; --accent-ink: #ffffff; --glow-1: rgb(45 212 191 / .5); --glow-2: rgb(250 204 21 / .35); --glow-3: rgb(34 197 94 / .3); }
html:root[data-palette="candy"] { --accent: #db2777; --accent-2: #06b6d4; --head-1: #db2777; --head-2: #a78bfa; --felt: #831843; --accent-ink: #ffffff; --glow-1: rgb(244 114 182 / .55); --glow-2: rgb(167 139 250 / .45); --glow-3: rgb(103 232 249 / .3); }
html:root[data-palette="arcade"] { --accent: #16a34a; --accent-2: #f43f5e; --head-1: #1e1b4b; --head-2: #7c3aed; --felt: #1e1b4b; --accent-ink: #ffffff; --glow-1: rgb(34 197 94 / .5); --glow-2: rgb(124 58 237 / .5); --glow-3: rgb(244 63 94 / .3); }
html:root[data-palette="coffee"] { --accent: #b45309; --accent-2: #65a30d; --head-1: #3f2a1d; --head-2: #92400e; --felt: #3f2a1d; --accent-ink: #ffffff; --glow-1: rgb(217 119 6 / .45); --glow-2: rgb(120 53 15 / .5); --glow-3: rgb(253 230 138 / .25); }
html:root[data-palette="lavender"] { --accent: #7c3aed; --accent-2: #db2777; --head-1: #6d28d9; --head-2: #a78bfa; --felt: #4c1d95; --accent-ink: #ffffff; --glow-1: rgb(196 181 253 / .55); --glow-2: rgb(139 92 246 / .45); --glow-3: rgb(240 171 252 / .35); }
html:root[data-palette="tropic"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #22c55e 16%, var(--bg)), color-mix(in srgb, #14b8a6 6%, var(--bg))); }
html:root[data-palette="candy"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #f472b6 18%, var(--bg)), color-mix(in srgb, #a78bfa 8%, var(--bg))); }
html:root[data-palette="arcade"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #7c3aed 18%, var(--bg)), var(--bg)); }
html:root[data-palette="coffee"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #b45309 16%, var(--bg)), var(--bg)); }
html:root[data-palette="lavender"] body { background: radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, #a78bfa 20%, var(--bg)), color-mix(in srgb, #f0abfc 6%, var(--bg))); }
.th-common h4 span { color: var(--accent); }

/* prestige themes now have live scenes too: their cards are a little glassy so the scene shows through */
html:root[data-prestige="prestige"] .card { background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* ---------- Eternity: pitch black, like real space ---------- */
html:root[data-palette="eternity"] { --bg: #000000; --surface: #08070d; --sunk: #111019; --line: #24202f; --head-1: #000000; --head-2: #1a1030; --head-3: #3a2a5a; --felt: #0a0812; }
html:root[data-palette="eternity"] body { background: #000; }
.fx-bg-eternity { display: none; }

/* ---------- five more Legendary palettes ---------- */
html:root[data-palette="fairy"] {
  --bg: #03100a; --surface: #0a1e15; --sunk: #102a1e; --ink: #eafff2; --muted: #9fcfb4; --line: #1d3d2c;
  --accent: #3ddc84; --accent-ink: #00170a; --accent-2: #ffd36b; --gold: #ffd36b; --good: #7dffb3; --bad: #ff6b8a; --warn: #ffd36b;
  --head-1: #04140c; --head-2: #145a32; --head-3: #3ddc84; --felt: #08241a; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .45), 0 10px 26px -12px rgb(0 0 0 / .85);
  --glow-1: rgb(61 220 132 / .5); --glow-2: rgb(255 211 107 / .35); --glow-3: rgb(150 240 255 / .3);
}
html:root[data-palette="sky"] {
  --bg: #0b1430; --surface: #142048; --sunk: #1c2a5a; --ink: #f4f7ff; --muted: #b6c2e8; --line: #2b3a72;
  --accent: #f59e0b; --accent-ink: #241400; --accent-2: #7dd3fc; --gold: #fde68a; --good: #86efac; --bad: #fb7185; --warn: #fde68a;
  --head-1: #1e3a8a; --head-2: #6d4fb8; --head-3: #f59e0b; --felt: #142048; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 26px -12px rgb(0 0 0 / .8);
  --glow-1: rgb(245 158 11 / .5); --glow-2: rgb(125 211 252 / .45); --glow-3: rgb(255 200 150 / .35);
}
html:root[data-palette="desert"] {
  --bg: #0e0904; --surface: #1a1209; --sunk: #241a0e; --ink: #fff4e0; --muted: #d0b98e; --line: #3d2d18;
  --accent: #e0a43a; --accent-ink: #231400; --accent-2: #2dd4bf; --gold: #ffd36b; --good: #a3e635; --bad: #ff6b6b; --warn: #ffd36b;
  --head-1: #1c1208; --head-2: #7a4b12; --head-3: #e0a43a; --felt: #1c140a; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(224 164 58 / .5); --glow-2: rgb(45 212 191 / .35); --glow-3: rgb(255 230 190 / .3);
}
html:root[data-palette="matrix"] {
  --bg: #000805; --surface: #03130b; --sunk: #062012; --ink: #d9ffe9; --muted: #7fcf9f; --line: #0c3a20;
  --accent: #22ff88; --accent-ink: #001a0b; --accent-2: #00e5ff; --gold: #d4ff5e; --good: #22ff88; --bad: #ff4d6d; --warn: #d4ff5e;
  --head-1: #001a0d; --head-2: #00663a; --head-3: #22ff88; --felt: #021209; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(34 255 136 / .5); --glow-2: rgb(0 229 255 / .35); --glow-3: rgb(0 100 50 / .5);
}
html:root[data-palette="phoenix"] {
  --bg: #120402; --surface: #1e0905; --sunk: #2a0f08; --ink: #fff2e6; --muted: #e0a98f; --line: #4a1a0c;
  --accent: #ff7a1a; --accent-ink: #250a00; --accent-2: #ffd23f; --gold: #ffd23f; --good: #b5e48c; --bad: #ff5468; --warn: #ffd23f;
  --head-1: #2a0700; --head-2: #a1240a; --head-3: #ff7a1a; --felt: #240804; color-scheme: dark; --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 10px 26px -12px rgb(0 0 0 / .9);
  --glow-1: rgb(255 122 26 / .55); --glow-2: rgb(255 210 63 / .4); --glow-3: rgb(200 30 10 / .45);
}
html:root[data-palette="fairy"] body { background: linear-gradient(180deg, #06180f, var(--bg) 60%, #010804); }
html:root[data-palette="sky"] body { background: linear-gradient(180deg, #0e1c46, #3b3f86 50%, #d9785a); }
html:root[data-palette="desert"] body { background: linear-gradient(180deg, #0a0c1c, var(--bg) 70%); }
html:root[data-palette="matrix"] body { background: #000805; }
html:root[data-palette="phoenix"] body { background: linear-gradient(180deg, #120201, #3a0702 60%, #7a1a05); }
.fx-bg-fairy { background: radial-gradient(45% 35% at 50% 20%, rgb(61 220 132 / .14), transparent 70%), radial-gradient(35% 30% at 20% 80%, rgb(255 211 107 / .08), transparent 70%); animation-duration: 90s; }
.fx-bg-sky, .fx-bg-phoenix { display: none; } /* their canvas paints the whole sky */
.fx-bg-desert { background: radial-gradient(45% 30% at 75% 15%, rgb(255 230 190 / .12), transparent 70%); animation-duration: 90s; }
.fx-bg-matrix { background: radial-gradient(45% 35% at 50% 30%, rgb(0 229 255 / .08), transparent 70%); animation-duration: 60s; }

/* their Age buttons */
/* fairy: a glowing mushroom cap with fireflies circling it */
html:root[data-palette="fairy"] .age-btn { background: radial-gradient(circle at 50% 30%, #3ddc84, #0d6b3c 55%, #03200f 90%); }
html:root[data-palette="fairy"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 12%, #3ddc84 28%, #ffd36b 40%, transparent 55%, #96f0ff 80%, transparent); }
html:root[data-palette="fairy"] .ab-a { background: radial-gradient(4px 4px at 30% 35%, rgb(255 255 255 / .85), transparent), radial-gradient(3px 3px at 62% 28%, rgb(255 255 255 / .8), transparent), radial-gradient(3px 3px at 50% 55%, rgb(255 255 255 / .7), transparent); animation: abPulse 4s ease-in-out infinite; }
html:root[data-palette="fairy"] .ab-b { background: radial-gradient(circle, rgb(180 255 200 / .55), transparent 60%); animation: abPulse 3s ease-in-out infinite reverse; }
html:root[data-palette="fairy"] .ab-c { animation: abSpin 9s linear infinite; background: radial-gradient(3px 3px at 50% 6%, #f2ffa0 80%, transparent), radial-gradient(2.5px 2.5px at 92% 60%, #f2ffa0 80%, transparent), radial-gradient(2.5px 2.5px at 15% 75%, #f2ffa0 80%, transparent); filter: drop-shadow(0 0 3px #e6ff8a); }
/* sky: a bright sky with clouds drifting through it and the sun behind */
html:root[data-palette="sky"] .age-btn { background: linear-gradient(180deg, #4f7be0, #f2a65a); color: #fff; }
html:root[data-palette="sky"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 12%, #fde68a 28%, #ffffff 40%, transparent 55%, #7dd3fc 80%, transparent); }
html:root[data-palette="sky"] .ab-a { background: radial-gradient(circle at 70% 70%, rgb(255 240 200 / .95), rgb(255 200 120 / .4) 25%, transparent 45%); animation: abPulse 5s ease-in-out infinite; }
html:root[data-palette="sky"] .ab-b { inset: 30% -40% 25% !important; border-radius: 50% !important; background: radial-gradient(closest-side, rgb(255 255 255 / .9), rgb(255 255 255 / 0)), radial-gradient(closest-side at 30% 60%, rgb(255 255 255 / .8), transparent); animation: abDrift 8s linear infinite; }
html:root[data-palette="sky"] .ab-c { inset: 55% -40% 0 !important; border-radius: 50% !important; background: radial-gradient(closest-side, rgb(255 236 230 / .8), transparent); animation: abDrift 11s linear infinite reverse; }
@keyframes abDrift { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
/* desert: a golden pyramid with its capstone shining, a sweep of light */
html:root[data-palette="desert"] .age-btn { background: radial-gradient(circle at 50% 30%, #3a2a5a, #0e0a1a 75%); }
html:root[data-palette="desert"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 12%, #e0a43a 28%, #ffd36b 40%, transparent 55%, #2dd4bf 80%, transparent); }
html:root[data-palette="desert"] .ab-a { inset: 22% 14% 14% !important; border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #e9c27a 50%, #8a5a20 50%); }
html:root[data-palette="desert"] .ab-b { inset: 18% 40% 68% !important; border-radius: 0 !important; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: #ffd36b; box-shadow: 0 0 8px #ffd36b; animation: abPulse 2.6s ease-in-out infinite; }
html:root[data-palette="desert"] .ab-c { inset: -20% !important; border-radius: 0 !important; background: linear-gradient(90deg, transparent 40%, rgb(255 240 200 / .6) 50%, transparent 60%); animation: abSweep 7s ease-in-out infinite; }
/* matrix: green code falling through a dark screen, a scan line */
html:root[data-palette="matrix"] .age-btn { background: radial-gradient(circle, #03301a, #000805 75%); box-shadow: 0 0 8px rgb(34 255 136 / .3); }
html:root[data-palette="matrix"] .age-btn::before { background: conic-gradient(from 0deg, #22ff88, transparent 30%, #00e5ff 55%, transparent 75%, #22ff88); }
html:root[data-palette="matrix"] .ab-a { border-radius: 0 !important; background: repeating-linear-gradient(90deg, transparent 0 5px, rgb(34 255 136 / .55) 5px 7px, transparent 7px 12px), repeating-linear-gradient(180deg, rgb(0 0 0 / .7) 0 4px, transparent 4px 8px); background-size: 100% 100%, 100% 16px; animation: abRain 1.4s linear infinite; }
html:root[data-palette="matrix"] .ab-b { border-radius: 0 !important; background: linear-gradient(180deg, transparent 45%, rgb(150 255 200 / .45) 50%, transparent 55%); animation: fxScan 3s linear infinite; }
html:root[data-palette="matrix"] .ab-c { background: radial-gradient(circle, rgb(34 255 136 / .3), transparent 65%); animation: abPulse 2s ease-in-out infinite; }
html:root[data-palette="matrix"] .age-btn b { color: #eafff2; text-shadow: 0 0 6px #22ff88, 0 0 12px #22ff88; }
@keyframes abRain { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 16px; } }
/* phoenix: a ball of fire turning, embers rising out of it */
html:root[data-palette="phoenix"] .age-btn { background: radial-gradient(circle at 50% 60%, #ffd23f, #ff7a1a 35%, #a1240a 70%, #2a0700); color: #2a0700; }
html:root[data-palette="phoenix"] .age-btn::before { background: conic-gradient(from 0deg, transparent 0 10%, #ff7a1a 25%, #ffd23f 38%, transparent 52%, #ff3b0a 75%, transparent); animation-duration: 6s; }
html:root[data-palette="phoenix"] .ab-a { background: conic-gradient(from 0deg, rgb(255 210 63 / .0), rgb(255 240 180 / .55), rgb(255 122 26 / .0) 30%, rgb(255 210 63 / .5) 55%, rgb(255 122 26 / 0) 80%); animation: abSpin 4s linear infinite; filter: blur(3px); }
html:root[data-palette="phoenix"] .ab-b { background: radial-gradient(3px 3px at 30% 80%, #fff2b0, transparent), radial-gradient(2px 2px at 62% 85%, #ffd23f, transparent), radial-gradient(2.5px 2.5px at 75% 72%, #fff2b0, transparent); animation: abRise 2.4s linear infinite; }
html:root[data-palette="phoenix"] .ab-c { background: radial-gradient(circle, rgb(255 240 180 / .6), transparent 50%); animation: abPulse 1.8s ease-in-out infinite; }
html:root[data-palette="phoenix"] .age-btn b, html:root[data-palette="phoenix"] .age-btn span { color: #fff8e6; text-shadow: 0 1px 2px #7a1a05, 0 0 8px #a1240a; }

/* Only what you look at moves (iPhones lag otherwise): in the Themes window only the theme you wear is animated, and while a
   window is open everything behind it holds still (a full-screen blur over moving things is very slow on phones) */
.th-card:not(.on) .th-prev *, .th-card:not(.on) .th-prev::before, .th-card:not(.on) .th-prev::after { animation-play-state: paused !important; }
body:has(#modalRoot > .modal-wrap:not(.leaving)) :is(#app, #fx) :is(*, *::before, *::after) { animation-play-state: paused !important; }

/* ---------- home descriptions (homedesc.js): the property view and the estates and islands rows ---------- */
.hd-desc { margin: 4px 12px 2px; font: italic 600 13.5px/1.4 Georgia, "Times New Roman", serif; color: var(--ink); opacity: .85; }
.hd-feat { margin: 4px 12px 6px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.hd-feat b { color: var(--ink); }
.hd-line { font-style: italic; opacity: .9; }

/* the cryo thaw (mind.js LO.thaw): your face behind frost; as --k goes 0 → 1 the frost melts, cracks spread, steam
   rises and the colour comes back. Tap to skip. */
.thaw { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(circle at 50% 42%, #10324a, #04101c 70%); --k: 0; animation: rpIn .3s ease-out both; cursor: pointer; }
.thaw.thaw-out { opacity: 0; transition: opacity .45s; }
.thaw-box { position: relative; width: min(62vw, 260px); aspect-ratio: 1; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 2px rgb(190 230 255 / calc(.7 - var(--k) * .5)), 0 0 60px rgb(120 200 255 / calc(.55 - var(--k) * .4)); background: linear-gradient(160deg, #cfeaff, #7fb8e0); }
.thaw-av { position: absolute; inset: 8%; display: grid; place-items: center; filter: grayscale(calc(1 - var(--k))) hue-rotate(calc((1 - var(--k)) * 170deg)) brightness(calc(.75 + var(--k) * .3)) contrast(calc(1.2 - var(--k) * .2)); }
.thaw-av svg, .thaw-av span { width: 100%; height: 100%; display: block; }
.thaw-frost { position: absolute; inset: 0; opacity: calc(1 - var(--k) * 1.1); background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .85), transparent 40%), repeating-linear-gradient(35deg, rgb(255 255 255 / .35) 0 2px, transparent 2px 9px), repeating-linear-gradient(-55deg, rgb(220 240 255 / .4) 0 1px, transparent 1px 7px), linear-gradient(160deg, rgb(225 245 255 / .85), rgb(150 200 240 / .6)); backdrop-filter: blur(calc((1 - var(--k)) * 6px)); }
.thaw-cracks { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(255 255 255 / .9); stroke-width: .7; stroke-dasharray: 60; stroke-dashoffset: calc(60 - var(--k) * 120); opacity: calc(1 - max(0, var(--k) - .7) * 3.3); filter: drop-shadow(0 0 2px #bfe8ff); }
.thaw-steam { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--k) * 1.2); }
.thaw-steam i { position: absolute; bottom: -10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgb(255 255 255 / .55), transparent 70%); animation: thawSteam 2.4s ease-out infinite; }
.thaw-steam i:nth-child(1) { left: 5%; } .thaw-steam i:nth-child(2) { left: 18%; animation-delay: .3s; } .thaw-steam i:nth-child(3) { left: 32%; animation-delay: .6s; } .thaw-steam i:nth-child(4) { left: 46%; animation-delay: .9s; }
.thaw-steam i:nth-child(5) { left: 60%; animation-delay: 1.2s; } .thaw-steam i:nth-child(6) { left: 72%; animation-delay: 1.5s; } .thaw-steam i:nth-child(7) { left: 84%; animation-delay: 1.8s; } .thaw-steam i:nth-child(8) { left: 40%; animation-delay: 2.1s; }
@keyframes thawSteam { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-140%) scale(1.6); opacity: 0; } }
.thaw-temp { text-align: center; color: #e6f6ff; font-family: var(--font-display, inherit); }
.thaw-temp b { display: block; font-size: 2.2rem; letter-spacing: .02em; text-shadow: 0 0 18px rgb(140 210 255 / .8); }
.thaw-temp small { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .thaw-steam i { animation: none; } }
/* heredity.js: Family genes card (gift genes green, carriers and treated genes amber) */
.tags li.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.tags li.mid { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.genes-card .tags li small { opacity: .75; margin-left: 4px; }
/* sfx.js: Menu › Sound pack */
.sfx-pack { grid-template-columns: auto 1fr auto; align-items: center; }
.sfx-pack.on { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
.sfx-ic { font-style: normal; font-size: 1.6rem; width: 40px; text-align: center; }
.sfx-btns { display: flex; gap: 6px; }
.sfx-btns .btn { min-width: 44px; padding: 8px 10px; }
.sfx-vol input[type=range] { flex: 1; min-width: 140px; accent-color: var(--accent); }
.sfx-vol em { min-width: 3em; text-align: right; font-style: normal; }
.sfx-open { margin-left: auto; }
.sfx-pack > div:nth-child(2) { flex: 1; min-width: 0; }
.sfx-pack.on { padding-left: 8px; padding-right: 8px; }

/* ---------- violent deaths (hatred.js): assassins, bombs, kidnappers and the crowd ---------- */
/* knife: a dark alley, a street lamp, someone sneaking up */
.ht-alley { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .65), transparent 30% 70%, rgb(0 0 0 / .65)), repeating-linear-gradient(0deg, transparent 0 22px, rgb(255 255 255 / .03) 22px 24px); }
.ht-lamp { position: absolute; left: 62%; top: 0; width: 60%; height: 100%; translate: -50% 0; background: radial-gradient(40% 70% at 50% 0%, rgb(255 210 120 / .35), transparent 70%); animation: htLamp 1.2s steps(2) 3; }
@keyframes htLamp { 50% { opacity: .5; } }
.ht-sneak { animation-name: htSneak; }
@keyframes htSneak { 0% { transform: translateX(0); } 60% { transform: translateX(300%); } 70% { transform: translateX(330%) rotate(-8deg); } 100% { transform: translateX(330%); } }
.ht-stab { opacity: 0; animation-name: htStab; animation-duration: .5s !important; }
@keyframes htStab { 0% { opacity: 0; transform: translateX(-30px) rotate(-30deg); } 40% { opacity: 1; transform: translateX(14px) rotate(10deg); } 100% { opacity: 1; transform: translateX(4px) rotate(0); } }
.ht-victim { animation-name: htVictim; }
@keyframes htVictim { 0%, 55% { transform: none; } 70% { transform: translateX(6px) rotate(6deg); } 100% { transform: translate(10%, 18%) rotate(84deg); filter: grayscale(.6); } }
.ht-victim.late { animation-name: htVictimLate; }
@keyframes htVictimLate { 0%, 62% { transform: none; } 70% { transform: translateX(-10px) rotate(-10deg); } 100% { transform: translate(-6%, 20%) rotate(-86deg); filter: grayscale(.6); } }
.ht-pool { opacity: 0; transform: scale(.2); animation-name: htPool; }
@keyframes htPool { to { opacity: .9; transform: scale(1.6, .5); } }
.ht-late-red .sc-stage { animation: htRedIn var(--dur) ease-in both; }
@keyframes htRedIn { 0%, 40% { box-shadow: 0 24px 60px -16px rgb(0 0 0 / .7); } 100% { box-shadow: inset 0 0 140px 40px rgb(160 0 0 / .75), 0 24px 60px -16px rgb(0 0 0 / .7); } }
/* gun: a sniper scope drifts onto you, a flash, and you fall */
.ht-scope { position: absolute; left: 50%; top: 46%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .72); border: 3px solid rgb(0 0 0 / .8); animation: htScope calc(var(--dur) * .62) cubic-bezier(.4, 0, .2, 1) both; }
.ht-scope::before, .ht-scope::after { content: ''; position: absolute; background: rgb(0 0 0 / .85); }
.ht-scope::before { left: 50%; top: 0; bottom: 0; width: 2px; translate: -1px 0; } .ht-scope::after { top: 50%; left: 0; right: 0; height: 2px; translate: 0 -1px; }
.ht-scope b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 10px #ff2a2a; }
@keyframes htScope { 0% { transform: translate(-60%, -30%) scale(1.15); } 40% { transform: translate(30%, 20%) scale(1.05); } 75% { transform: translate(-6%, -4%); } 100% { transform: none; opacity: 1; } }
.ht-shot .ht-scope { animation: htScope calc(var(--dur) * .62) cubic-bezier(.4, 0, .2, 1) both, htScopeOut .2s calc(var(--dur) * .64) forwards; }
@keyframes htScopeOut { to { opacity: 0; } }
.ht-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: htFlash .35s calc(var(--dur) * .63) ease-out both; }
@keyframes htFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
/* bomb: a parked car, a timer beeping faster, then the blast and the shockwave */
.ht-car { animation-name: none; }
.ht-beep { animation: htBeep .5s ease-in-out 0s 4, htBeepFast .2s ease-in-out 2s 6; }
@keyframes htBeep { 50% { transform: scale(1.3); filter: drop-shadow(0 0 8px #ff3030); } }
@keyframes htBeepFast { 50% { transform: scale(1.4); filter: drop-shadow(0 0 12px #ff3030); } }
.ht-boom { opacity: 0; animation-name: htBoom; animation-duration: 1.2s !important; }
@keyframes htBoom { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; transform: scale(1.4); } 100% { opacity: .85; transform: scale(2.2); } }
.ht-shock { position: absolute; left: 50%; top: 58%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; border: 6px solid rgb(255 220 150 / .8); opacity: 0; animation: htShock 1s calc(var(--dur) * .48) ease-out both; }
@keyframes htShock { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(40); } }
.ht-blast .sc-stage { animation: htQuake .6s calc(var(--dur) * .48) linear 2; }
@keyframes htQuake { 25% { translate: -8px 4px; } 50% { translate: 7px -5px; } 75% { translate: -5px -3px; } }
/* kidnapping: headlights sweep in, a van stops, and you are gone */
.ht-headlights { position: absolute; left: -20%; top: 40%; width: 70%; height: 40%; background: radial-gradient(60% 50% at 0% 50%, rgb(255 250 200 / .55), transparent 70%); opacity: 0; animation: htLights calc(var(--dur) * .5) ease-out both; }
@keyframes htLights { 0% { opacity: 0; transform: translateX(-30%); } 60% { opacity: 1; } 100% { opacity: .8; transform: translateX(60%); } }
.ht-van { animation: htVan var(--dur) cubic-bezier(.3, .8, .4, 1) both; }
@keyframes htVan { 0% { transform: translateX(0); } 35% { transform: translateX(300%); } 60% { transform: translateX(300%); } 100% { transform: translateX(700%); } }
.ht-grabbed { animation-name: htGrab; }
@keyframes htGrab { 0%, 38% { opacity: 1; transform: none; } 48% { transform: translateX(-12px) scale(.9); } 55%, 100% { opacity: 0; transform: translateX(-20px) scale(.6); } }
/* poison: the glass, the sickness, a green tint creeping in */
.ht-glass { animation-name: htGlass; }
@keyframes htGlass { 0% { transform: rotate(0); } 30% { transform: rotate(-30deg) translate(10px, -10px); } 50%, 100% { transform: rotate(0); } }
.ht-sick { opacity: 0; animation-name: htSick; }
@keyframes htSick { 0% { opacity: 1; transform: none; } 40% { transform: rotate(-6deg); } 60% { transform: rotate(8deg); filter: hue-rotate(60deg); } 100% { opacity: 1; transform: rotate(-70deg) translate(-10%, 30%); filter: hue-rotate(80deg) grayscale(.4); } }
.ht-green .sc-stage { animation: htGreen var(--dur) ease-in both; }
@keyframes htGreen { 0%, 30% { box-shadow: 0 24px 60px -16px rgb(0 0 0 / .7); } 100% { box-shadow: inset 0 0 140px 40px rgb(40 160 60 / .6), 0 24px 60px -16px rgb(0 0 0 / .7); } }
/* the public execution: gallows, torches and a crowd that cheers */
.ht-gallows { position: absolute; left: 50%; top: 8%; width: 46%; height: 70%; translate: -50% 0;
  background: linear-gradient(#3a2414, #3a2414) 18% 0 / 8% 100% no-repeat, linear-gradient(#3a2414, #3a2414) 18% 0 / 70% 7% no-repeat, linear-gradient(#2a1a0e, #2a1a0e) 0 100% / 100% 12% no-repeat; }
.ht-rope { opacity: 0; transform-origin: 50% 0; animation-name: htRope; }
@keyframes htRope { 0% { opacity: 0; transform: translateY(-30%); } 30% { opacity: 1; transform: none; } 60% { transform: rotate(6deg); } 80% { transform: rotate(-4deg); } 100% { opacity: 1; transform: rotate(1deg); } }
.ht-crowd { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: space-around; font-size: 34px; }
.ht-crowd i { font-style: normal; animation: htCheer .7s ease-in-out infinite alternate; }
@keyframes htCheer { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.ht-crowd.rush { animation: htRush var(--dur) ease-in both; }
@keyframes htRush { 0% { transform: translateY(40%) scale(.7); opacity: .4; } 60% { opacity: 1; } 100% { transform: translateY(-10%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .ht-crowd i, .ht-lamp, .ht-beep { animation: none !important; } }
.ht-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(#1a2638, #1a2638) 0 100% / 100% 30% no-repeat; clip-path: polygon(0 40%, 8% 40%, 8% 10%, 16% 10%, 16% 50%, 24% 50%, 24% 0, 30% 0, 30% 35%, 40% 35%, 40% 55%, 48% 55%, 48% 20%, 56% 20%, 56% 45%, 66% 45%, 66% 5%, 72% 5%, 72% 38%, 82% 38%, 82% 15%, 90% 15%, 90% 50%, 100% 50%, 100% 100%, 0 100%); background: #1a2638; opacity: .9; }
/* the drawn death films (hatredfx.js) */
.hx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene.hx-film .sc-stage { background: #000 !important; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .9), inset 0 0 0 1px rgb(255 255 255 / .08); }
.scene.hx-film .sc-cap { opacity: 0; animation: hxCap .8s calc(var(--dur) * .62) ease-out forwards; letter-spacing: .02em; }
@keyframes hxCap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Menu › Language: every language by its own name, two columns on a phone */
.lang-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lang-pick .btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding: 12px 14px; font-size: 16px; }
.lang-pick .btn i { font-style: normal; font-size: 20px; }
.lang-pick .btn span { flex: 1; text-align: left; }
/* withdrawal mini-game: the craving meter */
.resist-bar { height: 10px; margin: 6px 8px 0; border-radius: 6px; background: rgb(0 0 0 / .12); overflow: hidden; }
.resist-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f7b733, #e2412b); transition: width .3s; }
.resist-field { background: #3c4a5c; }
.resist-field .plot { background: #2c3746; }

/* the job board: this year's offers, the ones for your degree in blue, and the whole board folded under them */
.job.degree { border-left: 3px solid #2f7bff; padding-left: 8px; margin-left: -8px; background: linear-gradient(90deg, rgb(47 123 255 / .14), transparent 70%); }
.job.degree b { color: #2f7bff; }
.job.degree .deg { color: #2f7bff; font-weight: 700; }
.job-all { margin-top: 8px; } .job-all > summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--accent); }

/* phones: the five stats (happy, health, looks, smarts, fame) share one narrow row, so the emoji and the number shrink
   with the screen and sit centered, never running into each other or past the card's edge */
@media (max-width: 440px) {
  .stats { gap: 4px; }
  .stat { padding: 4px 3px 3px; min-width: 0; }
  .st-top { justify-content: center; gap: 2px; min-width: 0; }
  .st-top span { font-size: clamp(10px, 3.2vw, 14px); flex: none; }
  .stat em, .st-top em { font-size: clamp(11px, 3.6vw, 15px); letter-spacing: -.02em; min-width: 0; }
  .stat small { font-size: 9px; text-align: center; }
}