/* pixel font, self-hosted (VT323, SIL Open Font License: fonts/OFL.txt); no third-party requests */
@font-face { font-family:"VT323"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/VT323-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"VT323"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/VT323-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root { --line:color-mix(in srgb,var(--ink) 12%,transparent); --r-sm:6px; --r-md:12px; --r-lg:16px; --pill:999px; }
/* Neon dusk (dark): dusk purple, peach lamp light, lavender and teal neon */
:root, :root[data-theme="dark"] { color-scheme:dark; --bg:#171329; --bg1:#171329; --bg2:#2a1f4d; --bg3:#3a2550; --panel:#221a40; --panel2:#2f2658; --card:rgba(255,255,255,.055); --ink:#efe6d8; --ink2:#d6cce4; --dim:#a79bbd; --accent:#ffb38a; --good:#7fd6d0; --bad:#ff8fa0; --gold:#ffd2a8; --lav:#b9a6ff; --pink:#ff8fb0; --glow:1;
  --track:#140f2b; --kbd:#352b5e; --stripe1:#3a2f66; --stripe2:#2e2558; --life1:#7a62d6; --overlay:#0b0720b8; --toast:#1b1434ee; --toast-up:#3b2a4eee; --lvl-bg:#3b2a4e; }
/* Neon dawn (light): lilac and peach pastels, deep indigo ink, the same neon accents turned down to read on light */
:root[data-theme="light"] { color-scheme:light; --bg:#efe6f7; --bg1:#f1e8f8; --bg2:#fbe5de; --bg3:#f6d9e6; --panel:#fbf6fc; --panel2:#f0e4f6; --card:rgba(255,255,255,.62); --ink:#2a2046; --ink2:#4a3f6a; --dim:#7b6f9a; --accent:#c9562d; --good:#1d8f86; --bad:#c9374f; --gold:#b8742a; --lav:#7a62d6; --pink:#d9467f; --glow:0;
  --track:#e3d8f0; --kbd:#e8def3; --stripe1:#d9cdea; --stripe2:#cdbfe3; --life1:#b9a6ff; --overlay:#2a204680; --toast:#fbf6fcf2; --toast-up:#fbe7dcf2; --lvl-bg:#fbe3d0; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(160deg,var(--bg1),var(--bg2) 60%,var(--bg3)) fixed; color:var(--ink); font-family:"VT323","IBM Plex Mono",ui-monospace,Menlo,Consolas,"Courier New",monospace; font-size:21px; line-height:1.25; font-synthesis:none; font-variant-ligatures:none; min-height:100vh; overflow-x:hidden; }
main { display:grid; grid-template-columns:minmax(360px,460px) 1fr; gap:24px; max-width:1100px; margin:0 auto; padding:24px; align-items:start; }
@media (max-width:800px) { main { grid-template-columns:1fr; } }
#panel { background:var(--panel); padding:18px; border-radius:var(--r-lg); border:1px solid var(--line); }
header { display:flex; justify-content:space-between; align-items:center; }
h1 { margin:0; font-size:26px; color:var(--accent); }
.hdr-right { display:flex; gap:8px; align-items:center; }
#theme, #sound, #share, #newgame, #coach button { display:inline-grid; place-items:center; background:var(--panel2); border:1px solid var(--line); color:var(--dim); border-radius:var(--pill); width:28px; height:28px; padding:0; font-size:21px; cursor:pointer; transition:color .15s, border-color .15s; }
#theme:hover, #sound:hover, #share:hover, #newgame:hover, #coach button:hover { color:var(--accent); border-color:var(--accent); }
#season { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--pill); padding:3px 12px 3px 10px; font-size:17px; color:var(--dim); height:28px; }
#season .icon { color:var(--accent); font-size:20px; }
.label { color:var(--dim); margin-right:8px; font-size:16px; text-transform:uppercase; letter-spacing:.08em; }
kbd { display:inline-block; min-width:1.7em; text-align:center; background:var(--kbd); border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-sm); padding:0 6px; margin:0 2px; color:var(--ink); font:inherit; font-size:.92em; line-height:1.5; }
kbd .icon { vertical-align:-0.16em; }

/* life timeline */
#life { margin:14px 0 4px; }
#life .track { position:relative; height:8px; background:var(--track); border-radius:4px; }
#lifefill { height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--life1),var(--accent)); transition:width .6s ease; }
#avatar { position:absolute; top:-8px; left:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--bg); font-size:20px; transform:translateX(-50%); transition:left .6s ease; box-shadow:0 0 0 3px var(--panel); }
#avatar .icon .f { fill-opacity:.35; }
#life .ages { display:flex; justify-content:space-between; font-size:14px; color:var(--dim); margin-top:6px; }
#life .ages b { color:var(--ink); }

/* net worth */
#networth { margin:12px 0 4px; }
.nwtop { display:flex; justify-content:space-between; align-items:baseline; }
#nw { font-size:44px; font-weight:bold; color:var(--good); display:block; letter-spacing:-.02em; }
#delta { font-size:16px; border-radius:var(--pill); padding:1px 9px; }
#delta.up { background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
#delta.down { background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad); }
#stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:8px 0 10px; }
.stat .srow { display:flex; align-items:center; gap:6px; font-size:16px; color:var(--dim); }
.stat .srow i[data-icon] { color:var(--accent); font-size:20px; }
.stat .slabel { text-transform:uppercase; letter-spacing:.08em; font-size:14px; }
.stat .srow b { margin-left:auto; color:var(--ink); font-size:18px; }
.stat .srow small { font-size:14px; margin-left:auto; }
.stat .srow small + b { margin-left:4px; }
.stat .srow small.up { color:var(--good); } .stat .srow small.down { color:var(--bad); }
.stat .srow small .icon { font-size:.7em; vertical-align:0; margin-right:1px; }
.smeter { height:6px; border-radius:3px; background:var(--track); margin-top:5px; overflow:hidden; }
.smeter i { display:block; height:100%; width:0; border-radius:3px; background:var(--good); transition:width .6s ease; }
#kr-bar { background:var(--accent); }
.sword { font-size:14px; color:var(--dim); margin-top:3px; }
#chart { width:100%; height:70px; background:var(--track); border-radius:var(--r-md); }

/* budget: income split into bill / allocated / free, plus 5 press pips */
#budget { margin:12px 0; }
#bar { display:flex; height:16px; background:var(--track); border-radius:8px; overflow:hidden; }
#bar i { display:block; height:100%; width:0; transition:width .3s ease; }
#seg-bill { background:repeating-linear-gradient(45deg,var(--stripe1),var(--stripe1) 6px,var(--stripe2) 6px,var(--stripe2) 12px); }
#seg-alloc { background:var(--accent); }
#seg-free { background:var(--good); }
#bar.short { outline:2px solid var(--bad); }
#budgethead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; font-size:16px; color:var(--dim); }
#budgethead .label { margin-right:6px; }
#budgethead #total { font-size:23px; color:var(--ink); }
#budgethead .pay { white-space:nowrap; }
#budgethead .pay b { color:var(--ink); }
#budgethead .pay i[data-icon] { color:var(--dim); }
#legend { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; font-size:17px; }
#legend .lg { display:grid; grid-template-columns:12px 1fr; column-gap:6px; align-items:center; }
#legend .lg em { font-style:normal; font-size:14px; color:var(--dim); white-space:nowrap; }
#legend .lg b { grid-column:2; font-size:20px; }
#legend .sw { width:12px; height:12px; border-radius:4px; border:1px solid var(--line); }
#legend .sw.bill { background:repeating-linear-gradient(45deg,var(--stripe1),var(--stripe1) 3px,var(--stripe2) 3px,var(--stripe2) 6px); }
#legend .sw.alloc { background:var(--accent); }
#legend .sw.free { background:var(--good); }
#legend b { font-weight:bold; }
#freewrap.short b { color:var(--bad); }
#pips { display:flex; gap:6px; margin-top:8px; }
#pips i { flex:1; height:8px; border-radius:4px; background:var(--track); transition:background .2s, box-shadow .2s; }
#pips i.on { background:var(--accent); box-shadow:0 0 8px color-mix(in srgb,var(--accent) 60%,transparent); }

/* category rows */
#catwrap { position:relative; overflow-x:clip; }
#cats { list-style:none; margin:0; padding:0; transition:filter .25s, opacity .25s; }
#catwrap.busy #cats { filter:blur(2px) grayscale(.5); opacity:.45; }
#cats li { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:var(--r-md); border:2px solid transparent; transition:background .15s, border-color .15s; }
#cats li.sel { border-color:var(--accent); background:var(--panel2); }
#cats .ic { width:44px; height:44px; display:grid; place-items:center; font-size:34px; border-radius:var(--r-md); color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
#cats .top { display:flex; align-items:baseline; gap:8px; }
#cats .name { font-weight:bold; white-space:nowrap; }
#cats .lv { flex:1; font-size:16px; color:var(--accent); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cats .badges { margin:3px 0 5px; display:flex; flex-wrap:wrap; gap:5px; }
#cats .badge { display:inline-grid; font-size:20px; color:var(--dim); opacity:.4; transition:color .3s, opacity .3s; }
#cats .badge.got { color:var(--accent); opacity:1; }
#cats .badge.next { color:var(--ink); opacity:.85; animation:pulse 1.6s steps(6) infinite; }
#cats .prog { position:relative; height:7px; background:var(--track); border-radius:4px; overflow:hidden; }
#cats .prog i { position:absolute; top:0; bottom:0; display:block; transition:width .35s ease, left .35s ease; }
#cats .prog .b { left:0; background:linear-gradient(90deg,color-mix(in srgb,var(--good) 70%,#000),var(--good)); }
#cats .prog .s { background:var(--accent); }
#cats li.full .prog .b { background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 55%,#fff)); }
#cats .hint { display:none; font-size:16px; color:var(--dim); margin-top:5px; line-height:1.5; }
#cats .hint .icon, #cats .amt small .icon { font-size:1.05em; margin:0 1px; }
#cats li.sel .hint { display:block; }
#cats .amt { text-align:right; min-width:64px; }
#cats .amt b { display:block; font-size:21px; }
#cats .amt small { display:block; color:var(--accent); font-size:16px; font-weight:bold; min-height:14px; }
#cats .amt small.chg { display:block; font-size:14px; font-weight:normal; color:var(--dim); min-height:14px; white-space:nowrap; }
#cats .amt small.chg.up { color:var(--good); }
#cats .amt small.chg.down { color:var(--bad); }
#legend small, #budgethead small { font-size:14px; margin-left:3px; }
.chg .icon, #delta .icon, #incchg .icon, .chip .icon, #extras small .icon, #legend small .icon, #budgethead small .icon { font-size:.7em; vertical-align:0; margin-right:2px; }
#legend small.up, #budgethead small.up { color:var(--good); }
#legend small.down, #budgethead small.down { color:var(--bad); }
#cats li.gain { animation:gain 1.2s ease-out; }
#cats li.loss { animation:loss 1.2s ease-out; }
#cats li.flash { animation:levelup 1.1s ease-out; }
#cats li.flash .ic { animation:bounce .8s ease-out; }
#cats li.bump .amt b { animation:bump .25s ease-out; }
#extras { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; min-height:0; }
#extras:empty { display:none; }
#extras span { display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--pill); padding:3px 11px 3px 9px; font-size:17px; }
#extras span > .icon { color:var(--accent); font-size:21px; }
#extras small { font-size:14px; }
#extras small.up { color:var(--good); }
#extras small.down { color:var(--bad); }
footer { color:var(--dim); font-size:16px; margin-top:12px; line-height:1.9; transition:opacity .2s; }
#panel.busy footer { opacity:.35; }

/* "quarter is closing" lock-out */
#advance { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:color-mix(in srgb,var(--panel) 80%,transparent); border-radius:var(--r-md); z-index:2; }
#advance[hidden] { display:none; }
#advance .spin { font-size:52px; color:var(--accent); animation:flip 1s ease-in-out infinite; }
#advance .advtxt { color:var(--ink); font-size:18px; }
#advance .advbar { width:70%; height:8px; background:var(--track); border-radius:4px; overflow:hidden; }
#advance .advbar i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:4px; }
#advance .advbar i.run { animation:fill linear forwards; }
#panel.busy #pips i.on { background:var(--gold); }

/* scene + toasts */
#scene { position:relative; }
#scene > svg { width:100%; max-height:92vh; border-radius:var(--r-lg); border:1px solid var(--line); background:#000; display:block; }
#toasts { position:absolute; left:12px; right:12px; bottom:12px; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { align-self:flex-start; max-width:92%; display:flex; gap:8px; align-items:center; background:var(--toast); border:1px solid var(--line); border-radius:var(--r-md); padding:7px 12px; font-size:17px; line-height:1.35; animation:toastIn .35s ease-out both, toastOut .6s ease-in 7s forwards; }
.toast.stay { animation:toastIn .35s ease-out both; }
.toast .ti { display:inline-grid; font-size:26px; color:var(--accent); }
.toast .icon.inl { font-size:1.1em; color:var(--accent); vertical-align:-0.18em; }
.toast.up { border-color:var(--gold); background:var(--toast-up); }
.toast.up .ti { animation:bounce .8s ease-out; }

/* modal (life events, end card) */
#modal { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
#modal[hidden] { display:none; }
#modal-card { background:var(--panel); border:2px solid var(--accent); border-radius:var(--r-lg); padding:22px; max-width:500px; width:100%; text-align:center; animation:pop .25s ease-out; }
#modal-card.good { border-color:var(--good); }
#modal-card.bad { border-color:var(--bad); }
#modal-card .hero { width:84px; height:84px; margin:-58px auto 8px; border-radius:50%; background:var(--panel2); border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:55px; color:var(--accent); animation:bounce .8s ease-out; }
#modal-card.good .hero { color:var(--good); }
#modal-card.bad .hero { color:var(--bad); }
#modal-card h2 { margin:4px 0 6px; font-size:29px; }
#modal-card p { line-height:1.5; margin:6px 0 12px; color:var(--ink2); }
#modal-card ul { list-style:none; margin:14px 0 8px; padding:0; display:grid; gap:8px; text-align:left; }
#modal-card li { display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:center; padding:10px 12px; border-radius:var(--r-md); border:2px solid var(--line); background:var(--panel2); transition:transform .12s, border-color .12s; }
#modal-card li > span:last-child .icon { font-size:1.15em; margin-right:6px; color:var(--accent); vertical-align:-0.2em; }
#modal-card li .n { width:26px; height:26px; border-radius:50%; background:var(--track); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--dim); }
#modal-card li.sel { border-color:var(--accent); transform:scale(1.02); }
#modal-card li.sel .n { background:var(--accent); color:var(--bg); font-weight:bold; }
#modal-card li.no { opacity:.4; }
#modal-card .result { font-size:21px; color:var(--ink); }
#modal-card .chip { display:inline-block; border-radius:var(--pill); padding:4px 14px; font-size:20px; font-weight:bold; margin:2px 0 10px; }
#modal-card .chip.up { background:color-mix(in srgb,var(--good) 14%,transparent); color:var(--good); }
#modal-card .chip.down { background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad); }
#modal-card .lvl .icon { font-size:1.2em; margin-right:6px; vertical-align:-0.22em; }
#modal-card .lvl { margin:8px auto; padding:6px 12px; border-radius:var(--r-md); background:var(--lvl-bg); border:1px solid var(--gold); color:var(--gold); font-size:18px; }
#modal-card .big { font-size:57px; font-weight:bold; color:var(--good); margin:6px 0; }
#modal-card .sharecard { display:block; width:100%; border-radius:var(--r-md); margin:10px 0; }
#modal-card .hint { color:var(--dim); font-size:16px; margin-top:10px; }

/* ambient animation layer of the scene (rebuilt only when the season / window changes) */
#fx .fall { animation:fall var(--d,2s) steps(20) infinite; animation-delay:var(--dl,0s); }
#fx .sway { animation:sway 1.8s steps(8) infinite alternate; }
#fx .tw { animation:twinkle var(--d,3s) steps(6) infinite; animation-delay:var(--dl,0s); }
#fx .steam { animation:steam 2.6s steps(9) infinite; animation-delay:var(--dl,0s); opacity:0; }
#fx .note { animation:note 5s steps(30) infinite; animation-delay:var(--dl,0s); opacity:0; }
#fx .tail2 { transform-origin:142px 339px; animation:wag 1.9s steps(8) infinite alternate; }
#fx .drift { animation:drift var(--d,12s) steps(48) infinite; animation-delay:var(--dl,0s); }   /* flying traffic */
@keyframes fall { from { transform:translateY(-14px); } to { transform:translateY(var(--h,120px)); } }
@keyframes sway { from { transform:translateX(-5px); } to { transform:translateX(5px); } }
@keyframes twinkle { 0%,100% { opacity:.15; } 50% { opacity:1; } }
@keyframes steam { 0% { transform:translateY(0); opacity:0; } 25% { opacity:.8; } 100% { transform:translateY(-14px); opacity:0; } }
@keyframes note { 0% { transform:translate(0,0); opacity:0; } 15% { opacity:1; } 100% { transform:translate(24px,-56px); opacity:0; } }
@keyframes drift { from { transform:translateX(-30px); } to { transform:translateX(430px); } }
@keyframes wag { from { transform:rotate(-14deg); } to { transform:rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { #fx * { animation:none !important; } #fx .tw { opacity:.7; } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
@keyframes levelup { 0% { background:color-mix(in srgb,var(--gold) 40%,transparent); box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 67%,transparent); } 60% { box-shadow:0 0 0 12px transparent; } 100% { background:transparent; } }
@keyframes gain { 0% { background:color-mix(in srgb,var(--good) 27%,transparent); } 100% { background:transparent; } }
@keyframes loss { 0% { background:color-mix(in srgb,var(--bad) 27%,transparent); } 100% { background:transparent; } }
@keyframes bounce { 0% { transform:scale(.4); } 55% { transform:scale(1.35); } 100% { transform:scale(1); } }
@keyframes bump { 0% { transform:scale(1.25); color:var(--accent); } 100% { transform:scale(1); } }
@keyframes flip { 0% { transform:rotate(0); } 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }
@keyframes fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateY(-6px); } }
@keyframes pop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---- shipping: loading state, first-run tip, touch controls, content section, ad slot ---- */
#boot { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--bg); color:var(--dim); font-size:18px; }
#boot .spin { font-size:47px; color:var(--accent); animation:flip 1s ease-in-out infinite; }
html.ready #boot { display:none; }
.nojs { max-width:520px; margin:40px auto; padding:16px; background:var(--panel); border-radius:var(--r-md); }

#coach { display:flex; align-items:flex-start; gap:10px; margin:0 0 10px; padding:10px 12px; border-radius:var(--r-md); background:var(--panel2); border:1px solid color-mix(in srgb,var(--accent) 45%,transparent); font-size:17px; line-height:1.5; }
#coach[hidden] { display:none; }
#coach span { flex:1; }
#coach button { flex:none; width:24px; height:24px; font-size:18px; }

button { touch-action:manipulation; }
#cats li { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:pan-y; user-select:none; -webkit-user-select:none; transition:transform .18s ease, background .15s, border-color .15s; }
#cats li.dragging { transition:background .15s, border-color .15s; }
#cats li.drag-add { background:color-mix(in srgb,var(--good) 16%,var(--panel2)); border-color:var(--good); }
#cats li.drag-sub { background:color-mix(in srgb,var(--bad) 14%,var(--panel2)); border-color:var(--bad); }
#modal-card li { cursor:pointer; }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid var(--line); margin-top:8px; }
#modal-card .snippet { text-align:left; font-size:16px; line-height:1.5; color:var(--ink2); background:var(--track); border-radius:var(--r-md); padding:9px 12px; margin:10px 0; white-space:pre-wrap; word-break:break-word; user-select:all; }
#modal-card .sharecard.small { max-width:360px; margin:8px auto 4px; }
#modal-card .meet h2 { margin-top:12px; }
#modal-card .meet .thumb { max-width:300px; margin:0 auto; }
#modal-card .meet .thumb svg { width:100%; display:block; border-radius:var(--r-lg); border:1px solid var(--line); }
#modal-card .traitline, #modal-card .startline { font-size:17px; line-height:1.45; color:var(--dim); margin:4px 0; }
#modal-card .traitline b, #modal-card .startline b { color:var(--accent); }
#modal-card .meet .dots { display:flex; justify-content:center; gap:7px; margin:4px 0 10px; }
#modal-card .meet .dots i { width:8px; height:8px; border-radius:50%; background:var(--track); }
#modal-card .meet .dots i.on { background:var(--accent); }
#modal-card .chip + .chip { margin-left:6px; }
.btn { display:block; width:100%; margin:12px 0 4px; padding:13px 16px; border-radius:var(--r-md); border:0; background:var(--accent); color:var(--bg); font:inherit; font-weight:bold; font-size:20px; cursor:pointer; }
#touchbar { display:none; }

.landing { content-visibility:auto; contain-intrinsic-size:auto 2600px; max-width:760px; margin:8px auto 0; padding:8px 24px; line-height:1.4; font-size:20px; }
.landing h2 { font-size:29px; color:var(--accent); margin:26px 0 8px; }
.landing h3 { font-size:22px; margin:22px 0 6px; color:var(--lav); }
.landing ul { padding-left:20px; }
.landing li { margin-bottom:8px; }
.landing details { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px; margin:8px 0; }
.icon.inl:is(i) { display:inline-block; }
.landing summary { cursor:pointer; font-weight:bold; }
.landing details p { margin:8px 0 2px; }
.landing .small, .sitefoot { color:var(--dim); font-size:17px; }
.landing a, .sitefoot a { color:var(--accent); }
.sitefoot { max-width:760px; margin:6px auto 32px; padding:0 24px; text-align:center; }
#ad-bottom { max-width:970px; margin:18px auto 0; min-height:100px; }
#ad-bottom[hidden] { display:none; }
html.paused *, html.paused svg * { animation-play-state:paused !important; }
html.scene-off #fx * { animation-play-state:paused !important; }

/* phones and tablets: the scene on top, tap controls, and a sticky action bar (never next to an ad) */
@media (max-width:800px), (pointer:coarse) {
  main { grid-template-columns:1fr; padding:10px 10px 12px; gap:10px; }
  #scene { order:-1; }
  #scene > svg { height:34vh; max-height:none; background:transparent; }
  #panel { padding:12px; }
  #nw { font-size:36px; }
  #toasts { left:6px; right:6px; top:6px; bottom:auto; }   /* the sky is empty: keep the toasts off the city */
  .toast { font-size:16px; padding:5px 9px; }
  .toast:nth-child(n+3) { display:none; }
  #keys, .keyhint { display:none; }
  #touchbar { display:flex; position:fixed; left:0; right:0; bottom:0; gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); z-index:5; }
  #touchbar button { flex:1; min-height:50px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel2); color:var(--ink); font:inherit; font-weight:bold; font-size:21px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  #touchbar button .icon, #touchbar button [data-icon] { font-size:23px; }
  #touchbar button.primary { flex:1.4; background:var(--accent); border-color:var(--accent); color:var(--bg); }
  body { padding-bottom:76px; }
  #cats li { padding:10px; }
  #modal-card { padding:18px 16px; max-height:92vh; overflow:auto; }
  #modal-card .hero { margin:0 auto 8px; }   /* inside the card, so the scrolling card can't clip it */
}

/* icons (icons.js): inline svg that takes its size from font-size and its colour from currentColor */
.icon { width:1em; height:1em; flex:none; vertical-align:-0.14em; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icon .f { fill:currentColor; fill-opacity:.16; }
.icon .d { fill:currentColor; stroke:none; }
.icon.inl { margin:0 .15em; }
i[data-icon] { display:inline-grid; font-style:normal; vertical-align:-0.14em; }

/* ===== lofi cyberpunk: dusk-purple night, neon accents, glass panels, grain and scanlines ================================== */
html::before { content:""; position:fixed; left:0; right:0; bottom:0; height:38vh; z-index:0; pointer-events:none; opacity:calc(.9 * var(--glow) + .35);   /* a neon horizon grid */
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--lav) 22%,transparent) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--lav) 22%,transparent) 0 1px,transparent 1px 30px);
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%); mask-image:linear-gradient(to top,#000,transparent 85%); }
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none;                              /* lamp light, neon haze and a few stars */
  background:radial-gradient(circle at 90% -6%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 40%),radial-gradient(circle at 6% 104%,color-mix(in srgb,var(--good) 16%,transparent),transparent 42%),radial-gradient(circle at 52% 112%,color-mix(in srgb,var(--pink) 20%,transparent),transparent 46%),
  radial-gradient(1.5px 1.5px at 12% 18%,#fff8 50%,transparent),radial-gradient(1.5px 1.5px at 28% 62%,#fff6 50%,transparent),radial-gradient(1px 1px at 47% 30%,#fff9 50%,transparent),radial-gradient(1.5px 1.5px at 66% 12%,#fff7 50%,transparent),radial-gradient(1px 1px at 82% 48%,#fff8 50%,transparent),radial-gradient(1.5px 1.5px at 91% 80%,#fff6 50%,transparent),radial-gradient(1px 1px at 8% 85%,#fff7 50%,transparent); }
:root[data-theme="light"] body::before { background:radial-gradient(circle at 90% -6%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 40%),radial-gradient(circle at 6% 104%,color-mix(in srgb,var(--good) 14%,transparent),transparent 42%),radial-gradient(circle at 52% 112%,color-mix(in srgb,var(--pink) 18%,transparent),transparent 46%); }
body::after { content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.09;                                                          /* film grain + faint scanlines */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
:root[data-theme="dark"] body::after { opacity:.1; box-shadow:inset 0 0 160px #0b0720; }
main, .landing, .sitefoot { position:relative; z-index:1; }
#boot, #modal { z-index:70; }

/* glass panels */
#panel { background:var(--card); border:1px solid color-mix(in srgb,var(--lav) 22%,transparent);
  box-shadow:0 12px 44px #0b072055, inset 0 0 44px color-mix(in srgb,var(--lav) calc(7% * var(--glow)),transparent); }
.landing details, .nojs { background:var(--card); border-color:color-mix(in srgb,var(--lav) 22%,transparent); }
#touchbar { background:color-mix(in srgb,var(--panel) 88%,transparent); }
.toast { }

/* title and numbers glow like signs */
.brand { display:flex; flex-direction:column; gap:0; }
header { flex-wrap:wrap; gap:8px 10px; }
h1 { white-space:nowrap; }
.hdr-right { gap:6px; }
h1 { font-size:36px; font-weight:400; letter-spacing:1px; color:var(--accent); line-height:1; text-shadow:0 0 calc(18px * var(--glow)) color-mix(in srgb,var(--accent) 55%,transparent); }
h1 [data-icon] { color:var(--lav); font-size:.7em; vertical-align:.05em; filter:drop-shadow(0 0 calc(6px * var(--glow)) var(--lav)); }
#vibe { color:var(--dim); font-size:18px; margin-top:2px; }
#nw { font-size:52px; font-weight:400; color:var(--accent); line-height:1; text-shadow:0 0 calc(20px * var(--glow)) color-mix(in srgb,var(--accent) 50%,transparent); letter-spacing:0; }
#budgethead #total { font-size:30px; color:var(--good); text-shadow:0 0 calc(12px * var(--glow)) color-mix(in srgb,var(--good) 45%,transparent); }
.label, .stat .slabel { letter-spacing:.14em; }
#cats .amt b { color:var(--ink); }
#cats li.sel .amt b { color:var(--accent); text-shadow:0 0 calc(10px * var(--glow)) color-mix(in srgb,var(--accent) 45%,transparent); }

/* header buttons, chips, keycaps */
#theme, #sound, #share, #newgame, #coach button { background:var(--card); border-color:color-mix(in srgb,var(--lav) 28%,transparent); color:var(--lav); width:30px; height:30px; font-size:19px; }
#theme:hover, #sound:hover, #share:hover, #newgame:hover, #coach button:hover { color:var(--accent); border-color:var(--accent); box-shadow:0 0 calc(14px * var(--glow)) color-mix(in srgb,var(--accent) 40%,transparent); }
#season { background:var(--card); border-color:color-mix(in srgb,var(--lav) 28%,transparent); height:30px; }
kbd { background:var(--card); border:1px solid var(--dim); border-bottom-width:2px; border-radius:5px; color:var(--ink); }
#extras span { background:var(--card); border-color:color-mix(in srgb,var(--lav) 22%,transparent); }

/* rows: the selected one is lit */
#cats li { border-radius:var(--r-md); }
#cats li.sel { background:color-mix(in srgb,var(--accent) 9%,transparent); border-color:color-mix(in srgb,var(--accent) 80%,transparent); box-shadow:0 0 calc(22px * var(--glow)) color-mix(in srgb,var(--accent) 22%,transparent), inset 0 0 calc(22px * var(--glow)) color-mix(in srgb,var(--accent) 8%,transparent); }
#cats .ic { color:var(--accent); background:color-mix(in srgb,var(--lav) 14%,transparent); border-color:color-mix(in srgb,var(--lav) 32%,transparent); }
#cats .ic .icon, #modal-card .hero .icon { filter:drop-shadow(0 0 calc(5px * var(--glow)) currentColor); }
#cats .badge.got { color:var(--accent); }
#cats .prog .b { background:linear-gradient(90deg,var(--good),var(--lav)); }
#cats .prog .s { background:linear-gradient(90deg,var(--accent),var(--pink)); box-shadow:0 0 calc(8px * var(--glow)) color-mix(in srgb,var(--accent) 60%,transparent); }
#cats li.full .prog .b { background:linear-gradient(90deg,var(--accent),var(--gold)); }
#seg-alloc { background:linear-gradient(90deg,var(--accent),var(--pink)); }
#seg-free { background:linear-gradient(90deg,var(--good),var(--lav)); }
#legend .sw.alloc { background:linear-gradient(135deg,var(--accent),var(--pink)); }
#legend .sw.free { background:linear-gradient(135deg,var(--good),var(--lav)); }
#lifefill { background:linear-gradient(90deg,var(--life1),var(--accent)); box-shadow:0 0 calc(8px * var(--glow)) color-mix(in srgb,var(--accent) 50%,transparent); }
#avatar { background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--panel) 80%,transparent), 0 0 calc(14px * var(--glow)) color-mix(in srgb,var(--accent) 70%,transparent); }
.smeter i { background:linear-gradient(90deg,var(--good),var(--lav)); }
#kr-bar { background:linear-gradient(90deg,var(--accent),var(--pink)); }
#pips i.on { background:linear-gradient(90deg,var(--accent),var(--pink)); box-shadow:0 0 calc(10px * var(--glow)) color-mix(in srgb,var(--accent) 65%,transparent); }
#chart { background:color-mix(in srgb,var(--track) 80%,transparent); border:1px solid color-mix(in srgb,var(--lav) 18%,transparent); }

/* the room: a neon-lit window onto the night */
#scene > svg { border-color:color-mix(in srgb,var(--lav) 38%,transparent); box-shadow:0 0 calc(46px * var(--glow)) color-mix(in srgb,var(--lav) 24%,transparent), 0 0 calc(90px * var(--glow)) color-mix(in srgb,var(--pink) 12%,transparent), 0 16px 50px #0b072060; }

/* cards, buttons, pop-ups */
#modal-card { --tone:var(--accent); background:var(--panel); border:1px solid color-mix(in srgb,var(--tone) 55%,transparent); box-shadow:0 0 calc(34px * var(--glow)) color-mix(in srgb,var(--tone) 24%,transparent) inset, 0 0 calc(30px * var(--glow)) color-mix(in srgb,var(--tone) 20%,transparent), 0 18px 60px #0b072080; }
#modal-card.good { --tone:var(--good); border-color:color-mix(in srgb,var(--tone) 55%,transparent); }
#modal-card.bad { --tone:var(--bad); border-color:color-mix(in srgb,var(--tone) 55%,transparent); }
#modal-card .hero { border:1px solid currentColor; box-shadow:0 0 calc(22px * var(--glow)) color-mix(in srgb,currentColor 45%,transparent); }
#modal-card li { background:var(--card); border-color:color-mix(in srgb,var(--lav) 22%,transparent); }
#modal-card li.sel { border-color:var(--accent); box-shadow:0 0 calc(16px * var(--glow)) color-mix(in srgb,var(--accent) 30%,transparent); }
#modal-card li.sel .n { background:linear-gradient(135deg,var(--accent),var(--pink)); }
.btn, #touchbar button.primary { background:linear-gradient(135deg,var(--accent),var(--pink)); color:#1a1030; box-shadow:0 0 calc(18px * var(--glow)) color-mix(in srgb,var(--accent) 35%,transparent); border-color:transparent; }
:root[data-theme="light"] .btn, :root[data-theme="light"] #touchbar button.primary { color:#fff; }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 55%,transparent); box-shadow:none; }
.btn:hover { filter:brightness(1.08); }
#touchbar button { background:var(--card); border-color:color-mix(in srgb,var(--lav) 28%,transparent); }
#coach { background:var(--card); border-color:color-mix(in srgb,var(--lav) 40%,transparent); }
.landing h2 { text-shadow:0 0 calc(14px * var(--glow)) color-mix(in srgb,var(--accent) 40%,transparent); font-weight:400; }
.landing a, .sitefoot a { color:var(--accent); }
#budgethead .label { letter-spacing:.06em; }
@media (max-width:800px), (pointer:coarse) { h1 { font-size:36px; } #nw { font-size:44px; } html::before { height:26vh; } .toast { font-size:17px; padding:3px 8px; } #budgethead { flex-wrap:wrap; } }