@font-face { font-family: 'Patrick Hand'; src: url('fonts/PatrickHand-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --paper: #f6f1e6; --paper2: #efe7d6; --ink: #2b2622; --ink2: #6b6156; --faint: #b6ab98;
  --accent: #e4574b; --gold: #d9a520; --can: #4fa05a;
  --hand: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --col-l: 290px; --col-r: 350px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--hand); font-size: 18px; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.hand { font-family: var(--hand); }
.off { display: none !important; }

#app { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; }
#paper { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.5), rgba(0,0,0,0) 70%), var(--paper-tex, none), var(--paper);
  background-size: auto, 256px 256px, auto; transition: filter 4s, background-color 4s; }

/* ---------- HUD ---------- */
#hud { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; gap: 48px; padding: 10px 16px 0; min-height: 70px; }
.hud-block { text-align: center; animation: appear .9s ease-out; }
.hud-block .big { font-size: 38px; line-height: 1; }
.hud-block .unit { font-size: 20px; color: var(--ink2); }
.hud-block .sub { font-size: 16px; color: var(--ink2); }
#lives { color: var(--accent); }
@keyframes appear { from { opacity: 0; translate: 0 -10px; } }

/* ---------- columns ---------- */
#cols { position: relative; z-index: 1; display: grid; grid-template-columns: var(--col-l) 1fr var(--col-r); min-height: 0; }
.col { overflow-y: auto; overflow-x: hidden; padding: 6px 12px 80px; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
#stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding: 4px 8px; }
#frame { position: relative; width: 100%; max-width: 980px; transition: all 1.2s cubic-bezier(.2,.8,.2,1); }
#screen { position: relative; width: 100%; aspect-ratio: 1000 / 640; overflow: hidden; border-radius: 6px; }
.act1 #screen { -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 72%, transparent 100%); }
#scene { width: 100%; height: 100%; display: block; cursor: pointer; transition: filter 3s; }
#scene text.hand { font-family: var(--hand); }
#scene text.brand { font-family: var(--sans); font-weight: 800; fill: #fff; letter-spacing: .5px; }
#caption { text-align: center; font-size: 26px; min-height: 36px; margin-top: 4px; color: var(--ink); transition: opacity .6s; }
#caption.fade { opacity: 0; }
#agebox { position: absolute; top: 8px; left: 12px; font-size: 22px; color: var(--ink2); }
#age { font-size: 30px; color: var(--ink); }
#hint { position: absolute; left: 50%; top: 24%; translate: -50% 0; font-size: 34px; color: var(--ink2); animation: hint 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes hint { 50% { translate: -50% -8px; opacity: .5; } }
#actions { display: flex; justify-content: center; gap: 14px; min-height: 52px; flex-wrap: wrap; }
#letgo { font-size: 24px; padding: 8px 26px; border: 2.5px solid var(--ink); border-radius: 40px 34px 42px 30px / 30px 40px 32px 38px; background: #fffdf8; box-shadow: 3px 4px 0 rgba(43,38,34,.15); animation: breatheBtn 2.6s ease-in-out infinite; }
#letgo:hover { background: #fff6e0; }
#letgo b { color: var(--accent); font-weight: normal; }
@keyframes breatheBtn { 50% { scale: 1.04; box-shadow: 4px 6px 0 rgba(43,38,34,.12), 0 0 30px rgba(247,201,72,.5); } }
#stream-btn { font-family: var(--sans); font-weight: 800; color: #fff; background: linear-gradient(90deg, #ff2b6d, #ff2bd6); padding: 10px 22px; border-radius: 999px; box-shadow: 0 6px 24px rgba(255,43,109,.45); animation: nag 1.2s ease-in-out infinite; font-size: calc(16px + var(--nag, 0) * 2px); }
#stream-btn .dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #fff; margin-right: 8px; animation: blink 1s infinite; }
#stream-btn .say { display: block; font-size: 12px; font-weight: 500; opacity: .9; }
@keyframes nag { 50% { scale: calc(1.04 + var(--nag, 0) * .015); } }
@keyframes blink { 50% { opacity: .2; } }

#flow { position: absolute; right: 12px; top: 10px; width: 120px; height: 12px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: #fffdf8; }
#flowbar { height: 100%; width: 0; background: linear-gradient(90deg, #f2c230, #e4574b, #e877a7); transition: width .15s; }
#flow.hot { animation: hot .5s ease-in-out infinite alternate; }
#flow.hot #flowbar { filter: saturate(1.4) brightness(1.08); }
@keyframes hot { from { box-shadow: 0 0 4px 1px rgba(228,87,75,.45); } to { box-shadow: 0 0 12px 4px rgba(242,194,48,.75); } }

/* ---------- panels ---------- */
.sec { margin: 4px 0 16px; }
.sec.appear { animation: appear 1s ease-out; }
.enter { animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; scale: .97; } }
.sec h3 { font-weight: normal; font-size: 24px; margin: 6px 4px 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sec h3 .n { font-size: 16px; color: var(--ink2); }
.sec h3 .tools { margin-left: auto; display: flex; gap: 4px; font-size: 15px; }
.sec h3 .tools button { padding: 0 7px; border: 1.5px solid var(--faint); border-radius: 10px; color: var(--ink2); }
.sec h3 .tools button.on { border-color: var(--ink); color: var(--ink); background: #fffdf8; }
.card { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 7px 10px 9px; margin: 6px 0; background: #fffdf8;
  border: 2px solid var(--ink); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; box-shadow: 2px 3px 0 rgba(43,38,34,.12); cursor: pointer; transition: transform .12s, opacity .4s, filter .4s; overflow: hidden; }
.card:hover { transform: translateY(-2px); box-shadow: 3px 5px 0 rgba(43,38,34,.14); }
.card:active { transform: scale(.97); }
.card.cant { opacity: .62; }
.card.cant .cost { color: var(--ink2); }
.card.can { border-color: var(--ink); }
.card.can .cost { color: var(--can); }
.card.can::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 0 rgba(247,201,72,.0); animation: canGlow 2.4s ease-in-out infinite; }
@keyframes canGlow { 50% { box-shadow: inset 0 0 18px 2px rgba(247,201,72,.45); } }
.card.locked { opacity: .45; cursor: default; border-style: dashed; }
.card.owned { opacity: .55; cursor: default; }
.card.flash { animation: flash .5s ease-out; }
@keyframes flash { 0% { background: #fff3b0; scale: 1.04; } }
.card .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; position: relative; }
.card .ic::before { content: ''; position: absolute; inset: 2px; border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; background: var(--c, #ddd); opacity: .45; filter: blur(1px); }
.card .ic span { position: relative; filter: grayscale(1) contrast(1.2) sepia(.3); opacity: .85; }
.card.owned .ic span, .card.lived .ic span { filter: none; opacity: 1; }
.card .nm { font-size: 19px; line-height: 1.1; }
.card .nm .cnt { float: right; font-size: 22px; color: var(--ink2); margin-left: 6px; }
.card .ds { font-size: 14.5px; color: var(--ink2); line-height: 1.15; }
.card .fx { font-size: 14px; color: var(--accent); }
.card .cost { font-size: 17px; text-align: right; white-space: nowrap; }
.card .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold); opacity: .7; width: 0; transition: width .2s; }
.ups { display: flex; gap: 5px; flex-wrap: wrap; margin: -2px 0 8px 10px; }
.up { font-size: 14px; padding: 2px 9px; border: 1.8px solid var(--ink); border-radius: 12px 9px 13px 10px; background: #fffdf8; cursor: pointer; }
.up.cant { opacity: .5; }
.up.can { background: #fff3c4; animation: canGlow 2.4s infinite; }
.friends { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fr { position: relative; text-align: center; padding: 6px 2px 4px; border: 2px solid var(--ink); border-radius: 50% 50% 14px 14px / 40% 40% 14px 14px; background: #fffdf8; cursor: pointer; font-size: 15px; line-height: 1.05; }
.fr .face { width: 30px; height: 30px; margin: 0 auto 2px; border-radius: 50%; background: var(--c); opacity: .75; display: grid; place-items: center; font-size: 14px; color: #fff; }
.fr .lv { font-size: 12.5px; color: var(--ink2); }
.fr .hearts { color: var(--accent); font-size: 11px; letter-spacing: -1px; height: 12px; }
.fr.empty { border-style: dashed; opacity: .5; }
.fr.empty .face { background: none; border: 2px dashed var(--faint); opacity: 1; color: var(--faint); }
.fr.can { animation: canGlow 2.4s infinite; opacity: 1; }
.fr.gone { opacity: .35; filter: grayscale(1); }
.fr .no { display: none; }
.note { font-size: 15px; color: var(--ink2); margin: 2px 6px 8px; line-height: 1.2; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px; }
.toggles button { font-size: 14px; padding: 2px 10px; border: 1.8px solid var(--faint); border-radius: 12px; color: var(--ink2); }
.toggles button.on { border-color: var(--ink); color: var(--ink); background: #e9f5df; }
.memo-btn { width: 100%; padding: 8px; font-size: 19px; border: 2px dashed var(--ink); border-radius: 14px; background: #fffdf8; }

/* ---------- scene animation (individual transform properties keep SVG transform attributes) ---------- */
#scene g, #scene path { transform-box: fill-box; }
#scene #kite, #kite g { transform-box: view-box; } /* its SMIL sways turn around drawing coordinates: the line stays in your hand */
.me-inner { transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; }
.me-inner.squash { animation: squash .22s ease-out, breathe 3.2s ease-in-out .22s infinite; }
@keyframes breathe { 50% { scale: 1 1.015; } }
@keyframes squash { 0% { scale: 1.06 .9; } 50% { scale: .96 1.06; } 100% { scale: 1 1; } }
.rock { transform-origin: 50% 100%; animation: rock 2.6s ease-in-out infinite; }
@keyframes rock { 25% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
.baby-hands { transform-origin: 50% 100%; animation: wiggle .9s ease-in-out infinite; }
@keyframes wiggle { 50% { translate: 0 -3px; } }
.eyes { transform-origin: 50% 50%; animation: blinkEye 5s infinite; }
@keyframes blinkEye { 0%, 94%, 100% { scale: 1 1; } 97% { scale: 1 .1; } }
.fbody { transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
.fbody.hop { animation: hop .32s ease-out, breathe 3.6s ease-in-out .32s infinite; }
@keyframes hop { 40% { translate: 0 -14px; rotate: 4deg; } }
.friend { transition: opacity 1.5s; }
.friend.leaving .fbody { animation: none; }
.friend.leaving.left { animation: walkL 5s ease-in forwards; }
.friend.leaving.right { animation: walkR 5s ease-in forwards; }
@keyframes walkL { 20% { translate: 0 0; } 100% { translate: -700px 0; opacity: 0; filter: grayscale(1); } }
@keyframes walkR { 20% { translate: 0 0; } 100% { translate: 700px 0; opacity: 0; filter: grayscale(1); } }
.sway { transform-origin: 50% 0; animation: sway 4s ease-in-out infinite; }
@keyframes sway { 50% { rotate: 6deg; } }
.float { animation: float 4s ease-in-out infinite; }
.float.f1 { animation-delay: -1s; } .float.f2 { animation-delay: -2s; } .float.f3 { animation-delay: -3s; }
@keyframes float { 50% { translate: 0 -12px; } }
.twinkle { transform-origin: 50% 50%; animation: twinkle 3s ease-in-out infinite; }
.twinkle.t1 { animation-delay: -.7s; } .twinkle.t2 { animation-delay: -1.5s; } .twinkle.t3 { animation-delay: -2.2s; }
@keyframes twinkle { 50% { scale: .6; opacity: .5; } }
.wave { animation: wave 3s ease-in-out infinite; }
.wave.w1 { animation-delay: -1s; } .wave.w2 { animation-delay: -2s; }
@keyframes wave { 50% { translate: 14px 0; } }
.bird { animation: birdfly 14s linear infinite; }
.bird.b1 { animation-delay: -3s; } .bird.b2 { animation-delay: -6s; } .bird.b3 { animation-delay: -9s; } .bird.b4 { animation-delay: -11s; }
@keyframes birdfly { 0% { translate: -300px 10px; } 50% { translate: 200px -20px; } 100% { translate: 700px 10px; } }
.no-birds .bird { display: none; }
.leaf { animation: leaf 7s linear infinite; }
.leaf.l1 { animation-delay: -1.2s; } .leaf.l2 { animation-delay: -2.4s; } .leaf.l3 { animation-delay: -3.5s; } .leaf.l4 { animation-delay: -4.6s; } .leaf.l5 { animation-delay: -5.8s; }
@keyframes leaf { 0% { translate: 0 0; rotate: 0deg; opacity: 0; } 10% { opacity: 1; } 100% { translate: 80px 170px; rotate: 300deg; opacity: 0; } }
.flake { animation: flake 9s linear infinite; }
.flake.s1 { animation-delay: -2s; } .flake.s2 { animation-delay: -4s; } .flake.s3 { animation-delay: -6s; } .flake.s4 { animation-delay: -8s; }
@keyframes flake { 0% { translate: 0 0; } 100% { translate: 40px 680px; rotate: 360deg; } }
.wag { transform-origin: 100% 100%; animation: wag .5s ease-in-out infinite; }
@keyframes wag { 50% { rotate: 18deg; } }
.tail { transform-origin: 0 100%; animation: wag 2.4s ease-in-out infinite; }
.smoke { animation: smoke 3s ease-in-out infinite; }
@keyframes smoke { 50% { translate: 4px -6px; opacity: .5; } }
.ripple { transform-origin: 50% 50%; animation: ripple 2.5s ease-out infinite; }
@keyframes ripple { 0% { scale: .3; opacity: 1; } 100% { scale: 2.6; opacity: 0; } }
.sun { transform-origin: 50% 50%; animation: sunspin 40s linear infinite; }
@keyframes sunspin { to { rotate: 360deg; } }
.crown { transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.exp.bloom { animation: bloom 1.6s cubic-bezier(.2,.9,.3,1.2); }
@keyframes bloom { 0% { opacity: 0; scale: .7; filter: saturate(0); } 60% { opacity: 1; } 100% { scale: 1; filter: saturate(1); } }
.exp.replaced { animation: drain 2.5s forwards; }
@keyframes drain { to { opacity: 0; filter: grayscale(1); } }
.prod.slam { animation: slam .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes slam { 0% { scale: 1.6; opacity: 0; } 100% { scale: 1; opacity: 1; } }
.buzz { animation: buzz 3s ease-in-out infinite; }
@keyframes buzz { 50% { opacity: .85; } }
.hover { animation: float 1.2s ease-in-out infinite; }
.fly { animation: birdfly 18s linear infinite; }
.rocket { animation: rocket 6s ease-in infinite; }
@keyframes rocket { 0% { translate: 0 600px; } 100% { translate: 0 -200px; } }
.blink { animation: blink 2s infinite; } .blink.b1 { animation-delay: -.6s; } .blink.b2 { animation-delay: -1.3s; }
.balloon { animation: float 6s ease-in-out infinite; }
.fire { transform-origin: 50% 100%; animation: fire .4s ease-in-out infinite alternate; }
@keyframes fire { to { scale: 1.1 .92; } }
.far-friend { animation: float 3s ease-in-out infinite; }
#scene.hold .me-inner { animation-play-state: paused; }

/* ---------- pops, toasts ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 19; }
.pop { position: absolute; translate: -50% -50%; font-size: calc(24px * var(--s, 1)); white-space: nowrap; animation: rise 1s cubic-bezier(.2,.8,.3,1) forwards; text-shadow: 0 1px 0 #fffdf8, 1px 0 0 #fffdf8, -1px 0 0 #fffdf8, 0 -1px 0 #fffdf8; }
.pop.paint { font-family: var(--hand); }
.pop.neon { font-family: var(--sans); font-weight: 900; text-shadow: 0 0 10px currentColor, 0 2px 0 #000; -webkit-text-stroke: 1px rgba(0,0,0,.4); }
.pop.sepia { font-family: var(--hand); }
.pop.crit { animation: riseCrit 1.4s cubic-bezier(.2,.8,.3,1) forwards; }
.pop.big { font-size: calc(40px * var(--s, 1)); }
.pop.minus { color: var(--ink2) !important; font-size: 18px; }
.pop.year { font-family: var(--sans); font-weight: 900; color: #ff2b6d !important; text-shadow: 0 0 12px #ff2b6d, 0 2px 0 #000; }
@keyframes rise { 0% { opacity: 0; scale: .5; } 15% { opacity: 1; scale: 1.15; } 100% { opacity: 0; translate: calc(-50% + var(--dx)) -140%; transform: translateY(-70px); scale: .9; } }
@keyframes riseCrit { 0% { opacity: 0; scale: .3; rotate: -12deg; } 20% { opacity: 1; scale: 1.5; rotate: 6deg; } 40% { scale: 1.2; rotate: 0deg; } 100% { opacity: 0; transform: translateY(-110px); } }
#toasts { position: fixed; left: 50%; translate: -50% 0; top: 80px; z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(380px, 92vw); pointer-events: none; }
.toast { background: #fffdf8; border: 2px solid var(--ink); border-radius: 16px 12px 18px 14px; padding: 8px 12px; font-size: 17px; box-shadow: 3px 4px 0 rgba(43,38,34,.15); animation: toastIn .5s cubic-bezier(.2,1.4,.4,1); }
.toast b { font-weight: normal; color: var(--accent); }
.toast small { display: block; color: var(--ink2); font-size: 14px; }
.toast.out { animation: toastOut .5s forwards; }
@keyframes toastIn { from { translate: 0 -40px; rotate: -2deg; opacity: 0; } }
@keyframes toastOut { to { translate: 0 -20px; opacity: 0; } }
.toast.neon { font-family: var(--sans); background: rgba(20,14,40,.92); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; box-shadow: 0 8px 30px rgba(124,77,255,.4); font-size: 14px; }
.toast.neon b { color: #ff2bd6; font-weight: 800; }
.toast.neon small { color: #b9b3d6; }
.toast.memory { border-color: var(--gold); }
#whisper { position: fixed; left: 50%; bottom: 7%; translate: -50% 0; z-index: 25; font-size: 30px; color: var(--ink); text-align: center; max-width: 80vw; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
#whisper.on { opacity: 1; }
#curtain { position: fixed; inset: 0; z-index: 40; background: #fffdf8; opacity: 0; pointer-events: none; transition: opacity 1.8s ease-in-out; }
#curtain.on { opacity: 1; }

/* ---------- golden moments ---------- */
.golden { position: fixed; z-index: 22; width: 64px; height: 64px; cursor: pointer; animation: goldPulse 1s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(247,201,72,.9)); }
.golden svg { width: 100%; height: 100%; }
@keyframes goldPulse { 50% { scale: 1.15; } }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 50; background: rgba(43,38,34,.35); display: grid; place-items: center; }
#modal .box { width: min(860px, 94vw); max-height: 86vh; overflow: auto; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 22px 18px 24px 16px; padding: 16px 20px 22px; box-shadow: 6px 8px 0 rgba(43,38,34,.2); }
#modal h2 { font-weight: normal; font-size: 32px; margin: 0 0 8px; }
#modal .close { float: right; font-size: 28px; }
.mems { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mem { border: 2px solid var(--ink); border-radius: 12px; padding: 6px 8px; background: #fffdf8; font-size: 16px; line-height: 1.1; }
.mem small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.mem.no { border-style: dashed; opacity: .4; }
.mem.s2 { font-family: var(--sans); font-size: 13px; background: #f0eaff; }
.menu p { font-size: 18px; }
.menu a { color: var(--ink); }
.menu .row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.menu .row button { border: 2px solid var(--ink); border-radius: 14px; padding: 4px 14px; background: #fffdf8; }
.menu .danger { color: var(--accent); border-color: var(--accent) !important; }

#corner { position: fixed; right: 12px; top: 12px; z-index: 45; display: flex; gap: 6px; }
#corner button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: #fffdf8; font-size: 20px; }
#corner button.muted { opacity: .4; text-decoration: line-through; }

/* ================= ACT II: the stream ================= */
.act2 { --col-l: 300px; --col-r: 370px; }
.act2 #paper { filter: saturate(1.2); }
body.s2 { background: #0e0a1a; }
.act2 #paper { background: radial-gradient(ellipse at 50% 0%, #3a1e6e 0%, #140c26 55%, #0b0814 100%); }
.act2 #hud { gap: 18px; font-family: var(--sans); color: #fff; padding-top: 10px; }
#hud-stream { display: flex; gap: 22px; align-items: center; animation: appear .8s; }
#hud-stream .stat { text-align: center; min-width: 110px; }
#hud-stream .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #b9b3d6; }
#hud-stream .val { font-size: 30px; font-weight: 900; line-height: 1.05; background: linear-gradient(90deg, #fff, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
#hud-stream .money .val { background: linear-gradient(90deg, #ffe600, #ffb800); -webkit-background-clip: text; background-clip: text; font-size: 34px; }
#hud-stream .rate { font-size: 12px; color: #39ff88; font-weight: 700; }
#hud-stream .age .val { font-size: 18px; background: none; color: #8a84a6; }
#hud-stream .age .lbl { color: #6d6789; }
.pill.live { font-weight: 800; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #ff2b4b; color: #fff; box-shadow: 0 0 20px rgba(255,43,75,.6); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 6px; animation: blink 1s infinite; vertical-align: 1px; }

.act2 #frame { max-width: 760px; padding: 14px; border-radius: 42px; background: linear-gradient(145deg, #2a2340, #0d0a17); box-shadow: 0 0 0 2px #4b3f74, 0 30px 80px rgba(124,77,255,.35), inset 0 0 0 2px #000; }
.act2 #screen { border-radius: 28px; }
.act2 #scene { filter: saturate(1.35) brightness(1.06) contrast(1.05); }
#beauty { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(255,220,240,.18), rgba(0,0,0,0) 40%); mix-blend-mode: screen; }
#live-badge { position: absolute; top: 12px; left: 14px; font-family: var(--sans); font-weight: 800; font-size: 13px; color: #fff; background: #ff2b4b; border-radius: 6px; padding: 3px 8px; }
#filter-age { position: absolute; top: 12px; right: 14px; font-family: var(--sans); font-weight: 700; font-size: 13px; color: #fff; background: rgba(0,0,0,.45); padding: 3px 9px; border-radius: 10px; }
#chat { position: absolute; right: 10px; bottom: 10px; width: 36%; max-height: 62%; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; overflow: hidden; pointer-events: none; font-family: var(--sans); font-size: 12.5px; mask-image: linear-gradient(transparent, #000 30%); -webkit-mask-image: linear-gradient(transparent, #000 30%); }
#chat div { background: rgba(0,0,0,.42); color: #fff; padding: 3px 8px; border-radius: 10px; align-self: flex-end; animation: chatIn .3s ease-out; max-width: 100%; }
#chat div b { color: var(--c, #9ff); font-weight: 700; margin-right: 4px; }
@keyframes chatIn { from { translate: 0 12px; opacity: 0; } }
.act2 #caption { color: #fff; font-family: var(--sans); font-size: 15px; font-weight: 600; opacity: .8; }
.act2 #agebox, .act2 #flow, .act2 #letgo { display: none !important; }

.act2 .col { font-family: var(--sans); color: #eee; }
.act2 .sec h3 { font-family: var(--sans); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 1.5px; color: #c9b8ff; }
.act2 .sec h3 .n { color: #8a84a6; }
.act2 .sec h3 .tools button { border-color: #4b3f74; color: #b9b3d6; }
.act2 .sec h3 .tools button.on { background: #7c4dff; color: #fff; border-color: #7c4dff; }
.act2 .card { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.3); color: #fff; }
.act2 .card:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(124,77,255,.35); }
.act2 .card .nm { font-size: 15px; font-weight: 700; }
.act2 .card .nm .cnt { font-size: 18px; color: #c9b8ff; font-weight: 900; }
.act2 .card .ds { font-size: 12px; color: #a59fc4; }
.act2 .card .fx { color: #39ff88; font-size: 12px; font-weight: 700; }
.act2 .card .cost { font-size: 14px; font-weight: 800; }
.act2 .card.can .cost { color: #ffe600; }
.act2 .card.can { border-color: rgba(255,230,0,.5); }
.act2 .card.can::after { animation: canGlowNeon 1.6s ease-in-out infinite; }
@keyframes canGlowNeon { 50% { box-shadow: inset 0 0 22px rgba(255,43,214,.35); } }
.act2 .card.locked { border-style: solid; opacity: .4; }
.act2 .card .ic::before { opacity: .9; filter: none; background: linear-gradient(135deg, var(--c, #7c4dff), #ff2bd6); border-radius: 12px; }
.act2 .card .ic span { filter: none; opacity: 1; }
.act2 .card.sponsored { background: linear-gradient(135deg, rgba(255,43,214,.18), rgba(0,229,255,.12)); }
.act2 .card.sponsored .tag { position: absolute; top: 4px; right: 8px; font-size: 9px; letter-spacing: 1px; color: #ffe600; font-weight: 800; }
.act2 .card .bar { background: linear-gradient(90deg, #ff2bd6, #00e5ff); height: 3px; opacity: 1; }
.act2 .up { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: #fff; background: rgba(124,77,255,.25); border: 1px solid #7c4dff; border-radius: 8px; }
.act2 .up.can { background: #7c4dff; }
.act2 .note { color: #a59fc4; font-size: 12.5px; }
.act2 .toast { font-family: var(--sans); }
.act2 #corner button { background: #1b1430; color: #fff; border-color: #4b3f74; }
.act2 #whisper { color: #fff; font-family: var(--sans); font-size: 20px; font-weight: 600; }

.day { margin: 4px 4px 10px; }
.daybar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.daybar div { display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: rgba(0,0,0,.7); transition: flex .8s; overflow: hidden; white-space: nowrap; }
.daybar .sleep { background: #3d3a6b; color: #b9b3d6; }
.daybar .people { background: linear-gradient(90deg, #ff9f6b, #ffd36b); }
.daybar .family { background: #ff6b8a; }
.daybar .stream { background: linear-gradient(90deg, #ff2bd6, #7c4dff); color: #fff; }
.daylegend { font-size: 12px; color: #a59fc4; margin-top: 4px; }
.people-list { display: flex; flex-direction: column; gap: 5px; }
.person { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13.5px; }
.person .face { width: 24px; height: 24px; border-radius: 50%; background: var(--c); }
.person .ln { font-size: 11.5px; color: #a59fc4; font-style: italic; }
.person button.no { font-size: 11px; font-weight: 800; color: #fff; padding: 4px 9px; border-radius: 999px; background: rgba(255,43,75,.25); border: 1px solid #ff2b4b; }
.person button.no:hover { background: #ff2b4b; }
.person.gone { opacity: .35; }
.person.gone .face { filter: grayscale(1); }

#ad { position: absolute; left: 12px; bottom: 12px; width: 230px; font-family: var(--sans); color: #fff; background: linear-gradient(135deg, #ff2bd6, #7c4dff); border-radius: 16px; padding: 10px 12px 12px; box-shadow: 0 10px 40px rgba(255,43,214,.5); animation: adIn .5s cubic-bezier(.2,1.5,.4,1); z-index: 5; }
@keyframes adIn { from { scale: .3; opacity: 0; rotate: -8deg; } }
#ad .t { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; opacity: .85; }
#ad .n { font-size: 17px; font-weight: 900; }
#ad .l { font-size: 12px; opacity: .9; margin: 2px 0 8px; }
#ad .buy { width: 100%; font-weight: 900; font-size: 14px; padding: 7px; border-radius: 10px; background: #ffe600; color: #1b1430; animation: nag 0.8s infinite; }
#ad .x { position: absolute; top: 6px; right: 8px; font-size: 10px; opacity: .55; }
#ad .timer { height: 3px; background: rgba(255,255,255,.3); border-radius: 2px; margin-top: 6px; overflow: hidden; }
#ad .timer div { height: 100%; background: #fff; }

.cursor { position: fixed; z-index: 21; width: 26px; height: 26px; pointer-events: none; transition: translate 1.6s cubic-bezier(.5,0,.2,1), rotate 1s; }
.cursor svg { width: 100%; height: 100%; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.4)); }
.cursor.live { pointer-events: auto; cursor: pointer; }
.cursor.flick { transition: translate .6s ease-in, rotate .6s; }

/* ================= ACT III ================= */
.act3 #paper { filter: sepia(.7) saturate(.6); }
.act3 #scene { filter: none; }
.act3 #world > g:not(#hill) { filter: sepia(.45) saturate(.6); transition: filter 3s; }
.act3.far #world > g:not(#hill) { filter: sepia(.8) saturate(.3) brightness(.92); }
#hill { filter: saturate(1.3); }
.aged { filter: sepia(.8) contrast(.85) !important; }
.aged1 { rotate: -1.5deg; }
.aged2 { rotate: 2.5deg; translate: 3px 6px; filter: sepia(1) blur(.3px) !important; }
.cracked { background-image: linear-gradient(115deg, transparent 48%, rgba(43,38,34,.55) 49%, transparent 51%), linear-gradient(35deg, transparent 60%, rgba(43,38,34,.45) 61%, transparent 62%) !important; }
.falling { transition: translate 2.2s cubic-bezier(.5,0,.9,.5), rotate 2.2s ease-in, opacity 2.2s !important; translate: var(--fx, 0) 120vh !important; rotate: var(--fr, 20deg) !important; opacity: .2; pointer-events: none !important; }
.mirror #frame { padding: 18px; border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px; background: linear-gradient(135deg, #e9e4d6, #b3ab98 40%, #f4efe4 60%, #9c9480); box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 3px #7a7262; }
.mirror #screen { border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; }
.mirror #screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,.18) 75%, rgba(255,255,255,0) 90%); }
.mirror #scene { transform: scaleX(-1); filter: sepia(.3) saturate(.5) contrast(.9) !important; }
#cracks { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.act3 #hud-stream .val { transition: all 1s; }
.act3 .col { transition: opacity 2s; }
.notforsale .cost { color: #ff2b4b !important; text-decoration: line-through; }

#ending { position: fixed; inset: 0; z-index: 60; background: var(--paper); overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 8vh 20px 12vh; font-size: 24px; text-align: center; color: var(--ink); }
#ending p { max-width: 640px; margin: 10px 0; opacity: 0; transition: opacity 2.4s; line-height: 1.35; }
#ending p.on { opacity: 1; }
#ending .huge { font-size: 46px; }
#ending .small { font-size: 18px; color: var(--ink2); }
#ending ul { list-style: none; padding: 0; margin: 6px 0; }
#ending li { margin: 4px 0; }
#ending .friends-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 20px; }
#ending .friends-row span { padding: 2px 10px; border-radius: 12px; border: 2px solid var(--ink); }
#ending .friends-row span.lost { opacity: .35; border-style: dashed; }
#ending button { border: 2px solid #cfc7b8; border-radius: 18px; padding: 6px 18px; background: #fffdf8; color: #9a9184; margin: 8px; font-size: 20px; }
#ending svg { width: min(560px, 90vw); height: auto; }

#dev { position: fixed; left: 8px; bottom: 8px; z-index: 70; font: 12px var(--sans); background: rgba(0,0,0,.75); color: #fff; padding: 6px; border-radius: 8px; display: flex; gap: 4px; flex-wrap: wrap; max-width: 420px; }
#dev button { background: #333; color: #fff; padding: 2px 6px; border-radius: 4px; }

.shake { animation: shake .35s; }
@keyframes shake { 20% { translate: -4px 2px; } 40% { translate: 4px -2px; } 60% { translate: -3px -1px; } 80% { translate: 2px 1px; } }
.bigshake { animation: bigshake .6s; }
@keyframes bigshake { 15% { translate: -10px 4px; rotate: -.5deg; } 30% { translate: 9px -5px; rotate: .5deg; } 50% { translate: -6px 3px; } 70% { translate: 5px -2px; } }

/* ---------- small screens ---------- */
@media (max-width: 1100px) { :root { --col-l: 240px; --col-r: 300px; } .act2 { --col-l: 250px; --col-r: 310px; } }
@media (max-width: 860px) {
  body { overflow: auto; }
  #app { position: static; display: block; }
  #hud { gap: 20px; min-height: 0; padding: 8px 96px 0 16px; justify-content: flex-start; }
  #corner button { width: 36px; height: 36px; font-size: 18px; }
  .hud-block .big { font-size: 28px; }
  #cols { display: flex; flex-direction: column; }
  #stage { order: 0; padding: 0 16px 4px; position: sticky; top: 0; z-index: 5; background: var(--paper); }
  .act2 #stage { background: #140c26; }
  #toasts { top: auto; bottom: 10px; }
  #caption { min-height: 28px; }
  #actions { min-height: 0; }
  #left { order: 2; } #right { order: 1; }
  .col { overflow: visible; padding: 0 16px 20px; }
  #caption { font-size: 21px; }
  #hud-stream { gap: 10px; flex-wrap: wrap; justify-content: center; }
  #hud-stream .stat { min-width: 80px; }
  #hud-stream .val { font-size: 22px; } #hud-stream .money .val { font-size: 24px; }
  .act2 #frame { padding: 8px; border-radius: 26px; }
  #ad { width: 180px; }
}

.me-inner.lie { animation: none !important; rotate: -84deg; translate: 0 -6px; transition: rotate 5s ease-in-out, translate 5s; }
#scene.glitch { filter: hue-rotate(140deg) contrast(1.5) saturate(2) !important; translate: 3px 0; }
.toast.sepia { font-family: var(--hand); background: #f3ead6; color: #4a4030; border-color: #8a7a5c; }
.late .card { animation: drift 7s ease-in-out infinite; }
.late .card:nth-child(2n) { animation-delay: -3s; }
@keyframes drift { 50% { translate: 3px 2px; rotate: .6deg; } }
.cursor.big { width: 44px; height: 44px; }

/* counters: a fixed box so changing digit widths don't shove the label around */
#moments { display: inline-block; min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; }
#lives { display: inline-block; min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; }
#hud-stream .val, #hud-stream .rate, #viewers { font-variant-numeric: tabular-nums; }
#hud-stream .stat { min-width: 150px; }

/* act I right column: experiences on top and habits below, each with its own scrollbar */
.col.split { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
.col.split .box { min-height: 0; overflow-y: auto; margin: 0 0 10px; padding: 0 4px 6px 0; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }
.col.split .box h3 { position: sticky; top: 0; z-index: 2; background: var(--paper); margin-top: 0; padding: 4px 0 4px; }
.col.split .box-exp { flex: 0 1 auto; max-height: 34%; border-bottom: 2px dashed var(--faint); }
.col.split .box-hab { flex: 1 1 0; }
@media (max-width: 860px) {
  .col.split { display: block; overflow: visible; }
  .col.split .box { overflow: visible; max-height: none; }
}

/* experiences boost everything: make them hard to miss */
.box-exp .card .fx { font-size: 15.5px; font-weight: bold; }
.box-exp .card.can { background: #fff8e2; border-width: 2.5px; }
.box-exp .card.can::after { animation: canGlowExp 1.6s ease-in-out infinite; }
@keyframes canGlowExp { 50% { box-shadow: inset 0 0 22px 4px rgba(247,201,72,.6); } }
.box-exp.ready h3 .n { color: var(--accent); }

/* ---------- active effects ---------- */
#buffs { position: absolute; left: 50%; bottom: 10px; translate: -50% 0; z-index: 6; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; pointer-events: none; width: max-content; max-width: 70%; }
.buff { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 12px 7px 8px; background: #fffdf8; border: 2px solid var(--ink); border-radius: 16px 13px 17px 12px; box-shadow: 2px 3px 0 rgba(43,38,34,.15); font-size: 18px; animation: buffIn .5s cubic-bezier(.2,1.6,.4,1); overflow: hidden; }
.buff .bi { font-size: 20px; animation: buffIcon 1s ease-in-out infinite; }
.buff .bt { color: var(--ink2); font-size: 15px; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }
.buff .bb { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(43,38,34,.08); }
.buff .bb div { height: 100%; background: linear-gradient(90deg, #f2c230, #e4574b, #e877a7); transition: width .1s linear; }
.buff.ending { animation: buffBlink .5s ease-in-out infinite; }
.buff.gone { animation: buffOut .4s forwards; }
@keyframes buffIn { from { scale: .2; opacity: 0; rotate: -8deg; } }
@keyframes buffOut { to { scale: .6; opacity: 0; translate: 0 10px; } }
@keyframes buffBlink { 50% { opacity: .45; } }
@keyframes buffIcon { 50% { scale: 1.2; rotate: 8deg; } }
.act2 .buff { font-family: var(--sans); font-weight: 800; font-size: 13px; color: #fff; background: rgba(20,14,40,.85); border: 1px solid #ff2bd6; border-radius: 999px; box-shadow: 0 0 18px rgba(255,43,214,.55); }
.act2 .buff .bt { color: #ffe600; font-size: 12px; }
.act2 .buff .bb div { background: linear-gradient(90deg, #ff2bd6, #00e5ff); }

/* the look of each effect on the drawing */
#screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .8s; border-radius: inherit; }
#screen.fx-joy::before { opacity: 1; background: radial-gradient(ellipse at 50% 55%, rgba(255,214,90,.0) 35%, rgba(255,196,60,.42) 100%); animation: joyGlow 2.2s ease-in-out infinite; }
@keyframes joyGlow { 50% { filter: brightness(1.25); background-size: 115% 115%; } }
#screen.fx-joy #scene { filter: saturate(1.35) brightness(1.04); }
#fxring { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 48%, rgba(242,194,48,.38) 62%, rgba(232,119,167,.42) 74%, rgba(92,184,230,.4) 86%); }
#screen.fx-laughter #fxring { opacity: 1; animation: laughEdge 1.4s linear infinite; }
@keyframes laughEdge { to { filter: hue-rotate(360deg); } }
#screen.fx-laughter .me-inner { animation: breathe 3.2s ease-in-out infinite, giggle .35s ease-in-out infinite; }
@keyframes giggle { 50% { rotate: 2deg; } }
#screen.fx-goodday #L-friends { filter: drop-shadow(0 0 6px rgba(247,201,72,.95)) drop-shadow(0 0 2px #fff); }
.pop.rainbow { animation: rise 1s cubic-bezier(.2,.8,.3,1) forwards, rainbow .6s linear infinite; }
@keyframes rainbow { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.act2 #screen.fx-joy::before { background: radial-gradient(ellipse at 50% 55%, rgba(255,43,214,0) 40%, rgba(255,43,214,.38) 100%); }
.act2 #frame:has(#screen.fx-joy) { box-shadow: 0 0 0 2px #ff2bd6, 0 0 60px rgba(255,43,214,.75), inset 0 0 0 2px #000; animation: viral .8s ease-in-out infinite; }
@keyframes viral { 50% { box-shadow: 0 0 0 2px #00e5ff, 0 0 90px rgba(0,229,255,.7), inset 0 0 0 2px #000; } }
.act2 #screen.fx-ad::before { opacity: 1; background: radial-gradient(ellipse at 50% 50%, rgba(255,230,0,0) 55%, rgba(255,230,0,.22) 100%); }

/* fixed price column: with "max" the amount changes all the time and must not reflow the card */
.card { grid-template-columns: 40px minmax(0, 1fr) 84px; }
.act2 .card { grid-template-columns: 40px minmax(0, 1fr) 92px; }
.card .cost { white-space: nowrap; overflow: hidden; text-overflow: clip; font-variant-numeric: tabular-nums; }
.card .cost .qty { display: block; font-size: 13px; line-height: 1; color: var(--ink2); min-height: 13px; }
.card .cost .amt { display: block; }
.card .nm .cnt { min-width: 2.4em; text-align: right; font-variant-numeric: tabular-nums; }
.card:has(.qty) .fx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* growing closer to a friend: the price on the tile, a pulsing badge when you can afford it */
.fr .closer { font-size: 12.5px; color: var(--ink2); margin-top: 1px; white-space: nowrap; }
.fr .closer.done { color: var(--accent); }
.fr .plus { display: none; position: absolute; top: -8px; right: -6px; font-size: 13px; padding: 1px 6px; border-radius: 10px; background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgba(228,87,75,.45); animation: plusPulse 1.1s ease-in-out infinite; }
.fr.bondable .plus { display: block; }
.fr.bondable { border-color: var(--accent); }
.fr.bondable .closer { color: var(--accent); }
@keyframes plusPulse { 50% { scale: 1.18; } }
.act2 .card.teaser.secret { opacity: .75; border-style: dashed; border-color: #ffe600; }
.act2 .card.teaser.secret .nm { color: #ffe600; }

/* after the end: the way out */
#corner.over-ending { z-index: 63; }
#corner.over-ending button { background: rgba(255,253,248,.85); color: #9a9184; border-color: #cfc7b8; }
#ending { padding-bottom: 120px; }
#modal { z-index: 70; }
#ending a { color: #9a9184; text-decoration-color: #cfc7b8; }
#ending a:hover { color: #6b6156; }