:root {
  --ink: #3a2620;
  --soft-ink: #6b4e3d;
  --orange: #e07a3f;
  --orange-dark: #c4622b;
  --cream: #f7ede0;
  --paper: #fffdf8;
  --line: #e6d6c3;
  --night: #0b0e1f;
  --green: #5d9b58;
  --red: #c9483c;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 600 17px/1.55 'Nunito', system-ui, sans-serif;
  padding-bottom: 84px;
}
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.wrap { width: min(100% - 32px, 760px); margin-inline: auto; }
a { color: var(--orange-dark); }
h1, h2 { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(44px, 11vw, 76px); font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 7vw, 42px); font-weight: 900; margin-bottom: 14px; }
.small { font-size: 14px; color: var(--soft-ink); }

/* hero */
.hero { padding-block: 28px 12px; }
.brand { font: 900 15px/1 'Nunito', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-dark); margin: 0 0 14px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.brand-row .brand { margin: 0; }
.sound-toggle { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #fff4df; color: var(--orange-dark); box-shadow: 0 0 0 2px #ecc58f; cursor: pointer; }
.sound-toggle:active { transform: scale(.94); }
.sound-toggle .mute { display: none; }
.sound-toggle.off { color: #a8927d; box-shadow: 0 0 0 2px #e3d0b8; background: #f7ede0; }
.sound-toggle.off .waves { display: none; }
.sound-toggle.off .mute { display: inline; }
.lede { font-size: 18px; color: var(--soft-ink); margin: 14px 0 20px; max-width: 34em; }
.progress { background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 14px 16px; margin-bottom: 16px; }
.progress-nums { font-size: 18px; }
.progress-nums strong { font: 900 30px/1 'Nunito', sans-serif; color: var(--ink); }
.bar { height: 16px; border-radius: 99px; background: #efe0cd; overflow: hidden; margin-top: 10px; }
.bar-fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--orange) 0 10px, #ea8c52 10px 20px); border-radius: 99px; transition: width 1s ease; }
.progress-note { margin: 8px 0 0; font-size: 13px; color: var(--soft-ink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: 900 18px/1 'Nunito', sans-serif; border-radius: 99px; padding: 16px 26px; border: 0; cursor: pointer; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 4px 0 var(--orange-dark); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-dark); }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--line); }

/* world */
.world { padding-block: 6px 8px; }
/* the frame shows only the room (art pixels 19..282 × 19..234), scaled to fill the width */
.world-frame { position: relative; width: min(100%, calc(70vh * 264 / 216)); aspect-ratio: 264 / 216; margin-inline: auto; background: #2a1f1a; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(58, 38, 32, .18); }
.scene { position: absolute; left: 0; top: 0; width: 320px; height: 249px; background: url(assets/scene-dark.png) 0 0/320px 249px no-repeat; transform-origin: 0 0; }
.layer { position: absolute; inset: 0; background: 0 0/320px 249px no-repeat; }
.lit { opacity: 0; transition: opacity 1.6s steps(8); }
.scene.is-lit .lit { opacity: 1; }
.lit-img { background-image: url(assets/scene-lit.png); animation: breathe 4.5s ease-in-out infinite; }
.flame { position: absolute; left: 230px; top: 72px; width: 22px; height: 16px; background: url(assets/flame-strip6.png) 0 0/132px 16px no-repeat; animation: strip 1.5s steps(6) infinite; --strip-end: -132px; opacity: 0; transition: opacity .8s steps(4); }
.scene.is-lit .flame { opacity: 1; }

.item { position: absolute; background-repeat: no-repeat; cursor: pointer; filter: brightness(.82) saturate(.9); transition: filter 1.4s steps(7), opacity .4s steps(3); }
.scene.is-lit .item { filter: brightness(.95) sepia(.25) saturate(1.1); }
/* unfunded items are faint "waiting" outlines with a + badge, funded ones twinkle now and then */
.item.ghost { opacity: .38; filter: grayscale(1) brightness(1.7) contrast(.6); animation: waiting 2.4s steps(6) infinite; }
.item-fire.ghost { opacity: 1; filter: none; animation: none; }
.item-plus { position: absolute; right: -5px; top: -7px; width: 9px; height: 9px; background: var(--orange); color: #fff; font: 7px/9px 'Press Start 2P', monospace; text-align: center; border-radius: 2px; box-shadow: 0 0 0 1px #2a1a14; opacity: 1; filter: none; }
.item.ghost .item-plus { filter: none; }
.item-fire .item-plus { right: 18px; top: 42px; }
.item.funded::after { content: ''; position: absolute; right: -2px; top: -2px; width: 3px; height: 3px; background: #fff6c9; box-shadow: 0 0 2px #ffe27a; opacity: 0; animation: twinkle 3.6s steps(1) infinite; }
.item.previewing { filter: drop-shadow(0 0 3px #ffd36b) brightness(1.05); opacity: 1; }
.item.pop { animation: pop .7s steps(6); }
.item-hit { position: absolute; inset: -6px; }
@keyframes waiting { 0%, 100% { opacity: .38; } 50% { opacity: .6; } }
@keyframes twinkle { 0%, 88%, 100% { opacity: 0; } 90%, 96% { opacity: 1; } }

.cat { position: absolute; width: 32px; height: 32px; cursor: pointer; }
.cat-sprite { width: 32px; height: 32px; background-repeat: no-repeat; animation: strip var(--dur) steps(var(--frames)) infinite; filter: brightness(.82) saturate(.9); transition: filter 1.4s steps(7); }
.scene.is-lit .cat-sprite { filter: brightness(.95) sepia(.25) saturate(1.1); }
.cat.flip .cat-sprite { transform: scaleX(-1); }
.cat-tag { position: absolute; left: 50%; bottom: 33px; transform: translateX(-50%); font: 5px/1 'Press Start 2P', monospace; color: #f4e7c8; background: rgba(11, 14, 31, .75); padding: 2px 3px; white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
.cat:hover .cat-tag, .cat.show-tag .cat-tag { opacity: 1; }
.bubble { position: absolute; font: 8px/1 'Press Start 2P', monospace; color: #fff; text-shadow: 1px 1px 0 var(--night); animation: floatUp 1.6s steps(8) forwards; pointer-events: none; }
.name-pop { position: absolute; font: 5px/1.2 'Press Start 2P', monospace; color: #f4e7c8; background: rgba(11, 14, 31, .82); padding: 3px 4px; white-space: nowrap; transform: translateX(-50%); animation: floatUp 3.2s steps(12) forwards; pointer-events: none; }

.world-caption { font-size: 14px; color: var(--soft-ink); margin: 10px 2px 0; }
.world-caption strong { color: var(--ink); }
.world-caption span { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }
.plus-chip { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--orange); color: #fff; border-radius: 4px; font: 10px/18px 'Press Start 2P', monospace; box-shadow: 0 0 0 2px #2a1a14; vertical-align: 1px; }

/* blocks */
.block { padding-block: 34px 6px; }
.estimate-note { font-size: 14px; background: #fff4df; border: 2px dashed #ecc58f; border-radius: 12px; padding: 10px 12px; color: var(--soft-ink); }
.needs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.need { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 12px 12px 12px 12px; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform .12s ease, box-shadow .12s ease, border-color .2s; }
.need:hover { border-color: #e0b98f; }
.need:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.need-icon { width: 56px; height: 56px; border-radius: 14px; background: #2a1f1a no-repeat center; }
.need-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.need-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.need-title { font-weight: 900; font-size: 17px; line-height: 1.2; }
.need-sub { font-size: 14px; color: var(--soft-ink); line-height: 1.3; }
.need-meta { font-size: 13px; color: var(--soft-ink); }
.need-meta strong { color: var(--ink); }
.need-cta { align-self: center; background: var(--orange); color: #fff; font-weight: 900; font-size: 15px; padding: 10px 14px; border-radius: 99px; box-shadow: 0 3px 0 var(--orange-dark); white-space: nowrap; }
.need-cta::after { content: ' ›'; }
.need.done { border-color: #bcd9b6; box-shadow: 0 3px 0 #bcd9b6; }
.need.done .need-cta { background: var(--green); box-shadow: 0 3px 0 #467a42; }
.need.done .need-cta::after { content: ''; }

.badge { font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 99px; letter-spacing: .02em; white-space: nowrap; }
.badge.urgent { background: #fde3dc; color: #9b3325; }
.badge.close { background: #fff0c2; color: #8a6200; }
.badge.for { background: #efe6da; color: var(--soft-ink); }

/* gauges: stripes slide so the bar feels alive; segments show units (e.g. 6 foster weeks) */
.gauge { position: relative; display: block; height: 14px; margin-top: 6px; background: #efe0cd; border-radius: 99px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(58, 38, 32, .15); }
.gauge-big { height: 22px; }
.gauge-fill, .gauge-preview { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.gauge-fill { width: max(var(--pct), 0%); background: repeating-linear-gradient(-45deg, var(--orange) 0 8px, #ec9058 8px 16px); background-size: 22.6px 22.6px; animation: slide 1.2s linear infinite; transition: width .8s ease; z-index: 2; }
.gauge.full .gauge-fill { background: repeating-linear-gradient(-45deg, var(--green) 0 8px, #72b06c 8px 16px); background-size: 22.6px 22.6px; }
.gauge-preview { width: var(--preview, 0%); background: repeating-linear-gradient(-45deg, rgba(224, 122, 63, .35) 0 8px, rgba(224, 122, 63, .18) 8px 16px); transition: width .45s cubic-bezier(.2, .9, .3, 1.2); z-index: 1; }
.gauge-seg { position: absolute; inset: 0; z-index: 3; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--seg) - 2px), var(--paper) calc(100% / var(--seg) - 2px) calc(100% / var(--seg))); }
@keyframes slide { to { background-position: 22.6px 0; } }

.cat-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.cat-card { background: var(--paper); border: 2px solid var(--line); border-radius: 16px; overflow: hidden; }
.cat-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.cat-card-body { padding: 10px 12px 12px; }
.cat-name { font-weight: 900; font-size: 17px; line-height: 1.2; }
.status { display: inline-block; font-size: 12px; font-weight: 900; padding: 3px 9px; border-radius: 99px; margin: 6px 0 4px; }
.status.outside { background: #fde3dc; color: #9b3325; }
.status.care { background: #e1f0dd; color: #3c6b37; }
.status.vet { background: #e0ecf7; color: #2d5a82; }
.status.star { background: #ece6f6; color: #5a4a82; }
.cat-desc { font-size: 14px; color: var(--soft-ink); line-height: 1.35; }

/* the wall: one card per person, gold for whoever finished something */
.wall-count { margin: -4px 0 12px; font-weight: 800; color: var(--soft-ink); }
.wall-count:empty { display: none; }
.wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.wall .person { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 2px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.wall .person.finisher { background: #fffaf0; border-color: #efcf73; box-shadow: 0 3px 0 #efcf73; }
.wall .avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--av); color: #fff; font: 900 18px/1 'Nunito', sans-serif; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.wall .person-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wall .person-name { font-weight: 900; font-size: 16px; overflow-wrap: anywhere; }
.wall .person-name small { font-weight: 700; color: var(--soft-ink); }
.wall .person-items { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; font-weight: 700; color: var(--soft-ink); }
.wall .person-item { display: inline-flex; align-items: center; gap: 4px; }
.wall .person-item i { width: 18px; height: 18px; background: no-repeat center / contain; }
.wall .finished-badge { align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 900; color: #7a5200; background: #ffe7a3; border-radius: 99px; padding: 2px 9px; }
.wall .empty { grid-column: 1 / -1; background: var(--paper); border: 2px dashed var(--line); border-radius: 16px; padding: 14px; font-weight: 800; color: var(--soft-ink); }
/* finishing an item */
.need-meta .finished-by { color: #7a5200; font-weight: 900; }
.need-meta .finish-hint { color: #8a5a00; font-weight: 800; }
.finisher-ribbon { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; background: #fff3cf; border: 2px solid #efcf73; border-radius: 14px; font-weight: 800; color: #6d4c00; }
.finisher-ribbon .ribbon-star { flex: none; font-size: 22px; line-height: 1; color: #d9a21b; } /* not .star: that's the memorial star in the room */
.helpers { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.helpers li { background: var(--paper); border: 1.5px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 800; }
.helpers li.finisher { background: #fff3cf; border-color: #efcf73; }
.helpers li.finisher::before { content: '★ '; color: #d9a21b; }
.finish-note { margin: 10px 0 0; padding: 8px 11px; font-size: 14px; font-weight: 800; color: #6d4c00; background: #fff7df; border-radius: 10px; }
.finish-note.you { background: #ffe7a3; }
/* "How donations work" */
.promises h4 { margin: 16px 0 4px; font: 900 16px/1.3 'Nunito', sans-serif; color: var(--ink); }
.promises p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft-ink); }
.promise-link { margin: 6px 0 0; text-align: left; font-size: 14px; }
/* "show more" for long walls and ledgers */
.more-btn { display: block; margin: 14px auto 0; font: 800 15px 'Nunito', sans-serif; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 99px; padding: 10px 18px; cursor: pointer; }
.more-btn span { font-weight: 700; color: var(--soft-ink); }
.helpers li.more { background: none; border-style: dashed; color: var(--soft-ink); }

.ledger-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.ledger-totals div { background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 10px; }
.ledger-totals strong { display: block; font-size: 22px; font-weight: 900; }
.ledger-totals span { font-size: 13px; color: var(--soft-ink); }
.table-scroll { overflow-x: auto; }
/* "Every dollar": a scrolling list that never grows past a comfortable height */
.ledger-scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--paper); border: 2px solid var(--line); border-radius: 16px; }
.ledger-list { list-style: none; margin: 0; padding: 2px 0; }
.ledger-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ledger-list li:last-child { border-bottom: 0; }
.ledger-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: #e7f2e3; }
.ledger-list li.out .ledger-dot { background: #fde8e1; }
.ledger-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ledger-what { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.ledger-when { font-size: 13px; font-weight: 700; color: var(--soft-ink); }
.ledger-amt { flex: none; font-weight: 900; font-size: 16px; color: #3c7a37; }
.ledger-list li.out .ledger-amt { color: #9b3325; }
.ledger-list li.empty { justify-content: center; color: var(--soft-ink); font-weight: 700; }
/* the simpler give sheet */
.pick-label { margin: 14px 0 8px; font-size: 14px; font-weight: 800; color: var(--soft-ink); }
.word-line { margin: 14px 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--soft-ink); }
.type-hint { margin: 8px 0 0; text-align: center; font-size: 13.5px; font-weight: 800; color: var(--orange-dark); }
.type-hint:empty { display: none; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--paper); border-radius: 14px; overflow: hidden; }
.ledger-table th, .ledger-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.ledger-table th { font-size: 13px; color: var(--soft-ink); }
.ledger-table .num { text-align: right; white-space: nowrap; }
.ledger-table .out { color: #9b3325; }

.story p { max-width: 36em; }
.footer { padding-block: 34px 20px; text-align: center; }

.sticky-donate { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 20; background: var(--orange); color: #fff; font: 900 18px/1 'Nunito', sans-serif; text-decoration: none; padding: 16px 34px; border-radius: 99px; box-shadow: 0 4px 0 var(--orange-dark), 0 8px 24px rgba(58, 38, 32, .25); transition: transform .3s ease; }
.sticky-donate.show { transform: translate(-50%, 0); }
@media (min-width: 760px) { .sticky-donate { display: none; } body { padding-bottom: 0; } }

/* sheet: pinned to the bottom on phones, centered card on wider screens */
.sheet { border: 0; padding: 0; background: transparent; width: min(100%, 520px); max-width: 100%; max-height: 92vh; }
.sheet[open] { position: fixed; inset: auto 0 0 0; margin: 0 auto; }
.sheet::backdrop { background: rgba(11, 14, 31, .55); }
.sheet-inner { position: relative; background: var(--paper); border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; }
@media (min-width: 560px) { .sheet[open] { inset: 0; margin: auto; } .sheet-inner { border-radius: 22px; } }
/* always visible, even over a photo */
.sheet-close { position: absolute; right: 12px; top: 12px; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 253, 248, .95); box-shadow: 0 2px 8px rgba(58, 38, 32, .25), 0 0 0 2px var(--line); font: 700 26px/40px 'Nunito', sans-serif; color: var(--ink); cursor: pointer; padding: 0; }
.sheet h3 { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100; font-size: 28px; line-height: 1.05; margin: 0 36px 4px 0; }
.sheet-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.sheet-icon { width: 64px; height: 64px; flex: none; border-radius: 14px; background: #2a1f1a no-repeat center; }
.sheet-covers { margin: 0; font-size: 15px; color: var(--soft-ink); line-height: 1.3; }
.appears { margin: 6px 0 12px; font-size: 14px; font-weight: 800; color: #8a6200; background: #fff4d6; border-radius: 10px; padding: 7px 10px; }
.sheet-gauge { background: #fbf4ea; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.sheet-gauge p { margin: 6px 0 0; }
.sheet-gauge-nums { font-size: 15px; }
.sheet-gauge-nums strong { font-size: 22px; font-weight: 900; }
.gauge-delta { font-weight: 900; color: var(--orange-dark); }
.no-full { font-size: 15px; margin: 12px 0 10px; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 900 16px/1 'Nunito', sans-serif; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: 99px; padding: 11px 16px; cursor: pointer; }
.chip.finish { border-style: dashed; border-color: #8bbf85; color: #3c6b37; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; border-style: solid; }
/* the cat photos are square: show the whole square (ears included) instead of cropping it short */
.sheet-photo { display: block; width: min(100%, 340px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin: 0 auto 12px; }
.steps { list-style: none; padding: 0; margin: 14px 0 14px; display: grid; gap: 6px; font-size: 15px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.steps .n { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.word { font: 11px/1 'Press Start 2P', monospace; background: #2a1f1a; color: #f4e7c8; padding: 4px 6px; border-radius: 6px; }
.sheet .btn { width: 100%; }
.btn-go { font-size: 19px; padding: 18px 20px; }
.link-btn { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--orange-dark); font: 800 15px 'Nunito', sans-serif; text-decoration: underline; cursor: pointer; }
.trust { font-size: 12px; color: var(--soft-ink); text-align: center; margin: 10px 0 0; }
.copied { font-size: 14px; color: var(--green); font-weight: 800; min-height: 1.2em; margin: 6px 0 0; text-align: center; }

/* ---------- item art ---------- */
.item { background-repeat: no-repeat; background-size: 100% 100%; }
.need-icon, .sheet-icon { background-color: #f1e4d2; background-repeat: no-repeat; background-size: contain; background-position: center; background-origin: content-box; padding: 6px; box-sizing: border-box; image-rendering: pixelated; box-shadow: inset 0 0 0 2px #e3d0b8; }
.need-icon.waiting { filter: grayscale(.35); box-shadow: inset 0 0 0 2px rgba(214, 72, 58, .45); }
.need-icon.complete { background-color: #e7f2e2; box-shadow: inset 0 0 0 2px #8fc486; }
/* fully funded: just a soft green glow, not an outline */
.scene .item.complete { filter: brightness(.95) drop-shadow(0 0 1.5px rgba(150, 220, 130, .55)); }
.scene.is-lit .item.complete { filter: drop-shadow(0 0 1.5px rgba(160, 230, 140, .5)); }
.item-bar { position: absolute; left: 18%; right: 18%; bottom: -4px; height: 2px; background: rgba(42, 26, 20, .8); box-shadow: 0 0 0 .5px rgba(42, 26, 20, .8); }
.item-bar span { display: block; height: 100%; background: #f0a35e; }
.draft-note { margin: 6px 0 0; font-size: 13px; color: #8a6200; }
.need-icon.noart::after { content: '🐾'; display: flex; height: 100%; align-items: center; justify-content: center; font-size: 22px; }
.status.home { background: #fff0c2; color: #8a6200; }

/* cats who aren't in the room: a note under it, and a star in the window for a cat that died */
.away-note { margin: 10px 2px 0; padding: 10px 12px; background: var(--paper); border: 2px solid var(--line); border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.stars { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.star { position: absolute; width: 7px; height: 7px; padding: 0; border: 0; background: transparent no-repeat center / 7px 7px; cursor: pointer; pointer-events: auto; animation: twinkleStar 2.1s steps(3) infinite; }
.star::before { content: ''; position: absolute; inset: -5px; } /* bigger tap target */
@keyframes twinkleStar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- life in the room ---------- */
.bar { position: relative; }
.bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 253, 248, .9) calc(25% - 1px) 25%); pointer-events: none; }
.milestone { margin: 8px 0 0; font-weight: 900; font-size: 15px; color: var(--ink); }

/* unfunded items: faint, with a soft red outline and a + badge */
.scene .item.ghost { opacity: .6; filter: grayscale(1) brightness(1.55) contrast(.55) drop-shadow(1px 0 0 rgba(214, 72, 58, .95)) drop-shadow(-1px 0 0 rgba(214, 72, 58, .95)) drop-shadow(0 1px 0 rgba(214, 72, 58, .95)) drop-shadow(0 -1px 0 rgba(214, 72, 58, .95)); animation: waiting 2.4s steps(6) infinite; }
.scene .item-fire.ghost { opacity: 1; filter: none; outline: 1px dashed rgba(214, 72, 58, .8); outline-offset: -3px; animation: none; }
/* items that aren't in the room yet never hide a cat: they sit underneath every cat */
.scene .item.ghost { z-index: 1 !important; }
@keyframes waiting { 0%, 100% { opacity: .5; } 50% { opacity: .78; } }

/* how the cats feel: sick cats are grey and small-moving, cold ones shiver */
/* sick cats are washed-out but still clearly visible */
.scene .cat.unwell .cat-sprite { filter: brightness(.95) saturate(.4) contrast(.9); }
.scene.is-lit .cat.unwell .cat-sprite { filter: brightness(1) saturate(.55) sepia(.12); }

/* The cold tint is painted into the room's own background (via --cold), not as a separate
   see-through layer: any translucent tint layer drew a box around each animated cat in Chrome. */
.scene { background: linear-gradient(rgb(38 62 120 / var(--cold, 0)), rgb(38 62 120 / var(--cold, 0))), url(assets/scene-dark.png) 0 0/320px 249px no-repeat; }
.warmth { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 62% 42%, rgba(255, 190, 110, .2), transparent 62%); opacity: 0; transition: opacity 2s ease; }
.warmth.on { opacity: 1; }
.lights { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.2s steps(6); }
.lights.on { opacity: 1; }
.lights::before { content: ''; position: absolute; left: 24px; top: 23px; width: 184px; height: 1px; background: rgba(42, 26, 20, .7); }
.lights span { position: absolute; width: 2px; height: 2px; background: currentColor; box-shadow: 0 0 3px currentColor; animation: blink 1.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

#pops { position: absolute; inset: 0; z-index: 900; pointer-events: none; }
#pops .name-pop, #pops .bubble { z-index: 5; }
.thought { position: absolute; transform: translate(-50%, -100%); min-width: 11px; height: 13px; padding: 2px 3px; background: #fffdf8; border: 1px solid #2a1a14; border-radius: 3px; font: 7px/9px 'Press Start 2P', monospace; color: #c9483c; display: flex; align-items: center; justify-content: center; animation: bubbleIn .3s steps(3); pointer-events: none; }
.thought.needs { pointer-events: auto; cursor: pointer; height: auto; min-height: 13px; box-shadow: 0 0 0 1px rgba(214, 72, 58, .55); }
.thought::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 3px; height: 3px; background: #fffdf8; border-right: 1px solid #2a1a14; border-bottom: 1px solid #2a1a14; transform: translateX(-50%) rotate(45deg); }
.thought-ico { display: block; background-repeat: no-repeat; background-size: 100% 100%; }

/* while a cat sleeps, its thought turns into a soft dream cloud with little trailing bubbles */
.thought.dream { border-radius: 7px; padding: 3px 5px; border-color: rgba(42, 26, 20, .4); background: rgba(250, 247, 255, .92);
  box-shadow: -3px 2px 0 -1px rgba(250, 247, 255, .92), 3px 2px 0 -1px rgba(250, 247, 255, .92), 0 0 3px rgba(190, 200, 255, .45);
  animation: bubbleIn .4s steps(4), dreamBob 2.8s steps(4) .4s infinite; }
.thought.dream::after { left: 62%; bottom: -5px; width: 3px; height: 3px; border: 1px solid rgba(42, 26, 20, .4); border-radius: 50%; transform: none; background: rgba(250, 247, 255, .92); }
.thought.dream::before { content: ''; position: absolute; left: 76%; bottom: -9px; width: 2px; height: 2px; border-radius: 50%; background: rgba(250, 247, 255, .92); box-shadow: 0 0 0 1px rgba(42, 26, 20, .35); }
.thought.dream .thought-ico { opacity: .85; }
@keyframes dreamBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1px; } }

.zzz { position: absolute; z-index: 5; font: 6px/1 'Press Start 2P', monospace; color: #eef2ff; text-shadow: 1px 1px 0 rgba(42, 26, 20, .6); opacity: 0; pointer-events: none; animation: zRise 2.1s steps(12) forwards; }
@keyframes zRise { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(5px, -14px) scale(1.4); } }
@keyframes bubbleIn { from { transform: translate(-50%, -80%) scale(.6); opacity: 0; } to { transform: translate(-50%, -100%) scale(1); opacity: 1; } }
.thought.out, .thought.dream.out { animation: bubbleOut .35s steps(3) forwards; pointer-events: none; }
@keyframes bubbleOut { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -115%); } }

.confetti { position: absolute; width: 2px; height: 2px; animation-name: fall; animation-timing-function: steps(24); animation-fill-mode: forwards; }
@keyframes fall { to { transform: translate(6px, 230px) rotate(180deg); opacity: .2; } }

/* the chimney pokes up out of the room's frame onto the page, and smokes when the fire is lit */
.world { position: relative; }
.chimney { position: absolute; left: 0; top: 0; width: 37px; height: 43px; transform-origin: 0 0; z-index: 3; pointer-events: none; }
.chimney canvas { display: block; width: 37px; height: 43px; image-rendering: pixelated; image-rendering: crisp-edges; }
.smoke { position: absolute; left: 0; top: 0; width: 37px; height: 1px; overflow: visible; }
.puff { position: absolute; width: 5px; height: 5px; background: #b9aca3; box-shadow: 1px 1px 0 #8f8078, -1px 0 0 #cfc4bc; opacity: 0; animation: puff 3.6s steps(18) forwards; }
.puff.small { width: 3px; height: 3px; background: #c7bbb2; }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--drift, 10px), -36px) scale(1.9); }
}

@keyframes strip { from { background-position-x: 0; } to { background-position-x: var(--strip-end); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .9; } }
@keyframes pop { 0% { transform: translateY(-14px) scale(1.3); } 60% { transform: translateY(1px) scale(.95); } 100% { transform: none; } }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -18px); } }