@font-face { font-family: Outfit; src: url(/fonts/outfit.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Cinzel; src: url(/fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }

/* Chip the black cat · noir + amber */
:root {
  --bg: #050404; --bg2: #0c0a08; --card: rgba(22,18,14,.88); --card2: #1b1612; --line: rgba(255,214,150,.09); --line2: rgba(255,178,62,.28);
  --amber: #ffb23e; --amber2: #ff8a1c; --amber3: #ffe1a6; --ember: #ff6a1a; --ink: #1a0f02;
  --txt: #f6efe4; --mut: #a39788; --mut2: #6f665c; --ok: #7fd36b; --red: #ff5a4f;
  --grad: linear-gradient(180deg, #ffd27a 0%, #ffb23e 45%, #ff8a1c 100%);
  --r: 18px; --safe-b: env(safe-area-inset-bottom, 0px); --tabs-h: 76px; --vh: 100vh;
  --ease: cubic-bezier(.16,1,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); overflow: hidden; overscroll-behavior: none; }
body { font: 15px/1.35 Outfit, -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 1em; height: 1em; flex: none; }
img { -webkit-user-drag: none; }
.num { font-variant-numeric: tabular-nums; }
a { color: var(--amber); }
.amber-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

#app { position: fixed; inset: 0; max-width: 480px; margin: 0 auto; height: var(--vh); display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
@media (max-width: 480px) { #app { border: 0; } }
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #050404 url(/media/pet/bg.webp) center top / cover no-repeat; }
.scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,4,4,.55) 0%, rgba(5,4,4,.15) 30%, rgba(5,4,4,.35) 62%, rgba(5,4,4,.92) 88%); }
.moonglow { position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,60,.22), rgba(255,140,40,.06) 55%, transparent 72%); }

/* ---------- home ---------- */
.home { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 14px calc(var(--tabs-h) + var(--safe-b) + 8px); min-height: 0; }
.topbar { width: 100%; display: flex; gap: 8px; }
.squad-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 16px; text-align: left; background: rgba(14,11,9,.72); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.squad-ic { width: 36px; height: 36px; }
.squad-txt { min-width: 0; display: flex; flex-direction: column; }
.squad-txt b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.squad-txt small { color: var(--mut); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.league-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 7px; border-radius: 16px; font-weight: 700; font-size: 13.5px; background: rgba(14,11,9,.72); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.league-btn img { width: 30px; height: 30px; }

.balance { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.bal-coin { width: 44px; height: 44px; filter: drop-shadow(0 4px 12px rgba(255,170,60,.35)); }
.bal-coin.pulse { animation: balPulse .35s var(--spring); }
@keyframes balPulse { 40% { transform: scale(1.22) rotate(-10deg); } }
#bal { font-size: clamp(40px, 11.5vw, 54px); font-weight: 800; letter-spacing: -.025em; line-height: 1; background: linear-gradient(180deg, #fff8ea 0%, #ffd27a 40%, #ff9a2a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 16px rgba(255,150,40,.3)); }
.status { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--amber3); letter-spacing: .02em; min-height: 20px; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.status b { color: var(--amber); }

/* stage: the cat, the bowl, the ring timer */
.stage { position: relative; flex: 1; width: 100%; min-height: 0; display: grid; place-items: center; }
.cat { position: relative; width: min(78vw, 44vh, 340px); aspect-ratio: 1; touch-action: none; transform-origin: 50% 88%; will-change: transform; }
.cat .p { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0; }
.cat[data-pose=idle] .p-idle, .cat[data-pose=blink] .p-blink, .cat[data-pose=eat] .p-eat, .cat[data-pose=happy] .p-happy, .cat[data-pose=wow] .p-wow, .cat[data-pose=sleep] .p-sleep { opacity: 1; }
.cat.soft .p { transition: opacity .35s ease; }
.cat.breathe { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.015, 1.03); } }
.bowl { position: absolute; left: 50%; bottom: calc(50% - min(78vw, 44vh, 340px) * .5 - 30px); width: min(30vw, 18vh, 130px); height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.ring { position: absolute; width: min(94vw, 54vh, 410px); height: min(94vw, 54vh, 410px); pointer-events: none; opacity: 0; transition: opacity .4s; transform: rotate(-90deg); }
.eating .ring { opacity: 1; }
.ring circle { fill: none; stroke-width: 5; }
.ring-bg { stroke: rgba(255,178,62,.12); }
.ring-fg { stroke: var(--amber); stroke-linecap: round; }
.ring-glow { stroke: rgba(255,170,60,.28); stroke-width: 12 !important; stroke-linecap: round; }
.ring.late .ring-fg { stroke: var(--ember); } .ring.late .ring-glow { stroke: rgba(255,106,26,.3); }
.combo { position: absolute; right: 6%; top: 8%; text-align: center; pointer-events: none; }
.combo[hidden] { display: none; }
.combo b { display: block; font: 900 30px/1 Outfit; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0,0,0,.8)); }
.combo small { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--amber3); }
.combo.pop b { animation: comboPop .22s var(--spring); }
@keyframes comboPop { 40% { transform: scale(1.35); } }

.fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.treat { position: absolute; left: 0; top: 0; width: 42px; height: 42px; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.plus { position: absolute; font-weight: 900; font-size: 30px; letter-spacing: -.02em; pointer-events: none; will-change: transform, opacity; color: #fff2d4; text-shadow: 0 0 12px rgba(255,150,40,.9), 0 2px 4px rgba(0,0,0,.8); animation: plusUp .9s var(--ease) forwards; }
.plus.big { font-size: 40px; color: #fff; }
@keyframes plusUp { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 18% { transform: translate(-50%, -90%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -220%) scale(.9); opacity: 0; } }
.flycoin { position: absolute; z-index: 8; width: 26px; height: 26px; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }

/* dock: feed button / next meal */
.dock { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 104px; justify-content: flex-end; }
.feed-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 360px); padding: 17px 22px; border-radius: 22px; font-weight: 800; font-size: 19px; color: var(--ink);
  background: linear-gradient(180deg, #ffe0a0, #ffb23e 45%, #ff8a1c); box-shadow: 0 14px 34px rgba(255,138,28,.35), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.18); overflow: hidden; animation: feedGlow 1.8s ease-in-out infinite; }
.feed-btn img { width: 40px; height: 40px; margin: -8px 0; }
.feed-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite; }
.feed-btn:active { transform: scale(.97); }
.feed-btn[hidden] { display: none; }
@keyframes feedGlow { 50% { transform: scale(1.025); } }
@keyframes sheen { to { transform: translateX(100%); } }
.full-box { width: min(100%, 380px); padding: 12px; border-radius: 22px; background: rgba(14,11,9,.8); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.full-box[hidden] { display: none; }
.next { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--mut); font-weight: 600; }
.next svg { font-size: 18px; color: var(--amber); }
.next b { font-size: 22px; color: var(--txt); font-weight: 800; letter-spacing: .01em; }
.dock-row { display: flex; gap: 8px; margin-top: 10px; }
.pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 12px; border-radius: 15px; font-weight: 700; font-size: 14px; background: var(--card2); border: 1px solid var(--line); transition: transform .15s; }
.pill img { width: 28px; height: 28px; margin: -6px 0; }
.pill:active { transform: scale(.96); }
.pill:disabled { opacity: .4; }
.pill.gold { background: linear-gradient(180deg, rgba(255,178,62,.22), rgba(255,138,28,.1)); border-color: var(--line2); color: var(--amber3); }
.pill.catnip { flex: none; padding: 9px 16px; background: rgba(14,11,9,.85); border-color: var(--line2); }
.pill.catnip[hidden] { display: none; }
.pill.catnip i { font-style: normal; display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 900; }

/* golden fish */
.fish-wrap { position: absolute; z-index: 6; left: 0; top: 0; width: 110px; height: 110px; will-change: transform; filter: drop-shadow(0 0 16px rgba(255,190,70,.8)); }
.fish-wrap[hidden] { display: none; }
.goldfish { width: 110px; height: 110px; touch-action: none; cursor: pointer; animation: wiggle .5s ease-in-out infinite alternate; }
@keyframes wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* turbo states */
.eating.catnip .moonglow { background: radial-gradient(closest-side, rgba(150,255,120,.18), rgba(255,170,60,.08) 55%, transparent 72%); }
.eating.golden .moonglow { background: radial-gradient(closest-side, rgba(255,215,90,.5), rgba(255,150,40,.15) 55%, transparent 72%); }
.flash { position: absolute; inset: 0; z-index: 19; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,226,150,.65), rgba(255,170,60,.15) 45%, transparent 70%); animation: flash .6s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- tabs ---------- */
.tabs { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: calc(8px + var(--safe-b)); height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(14,11,9,.9); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 -8px 30px rgba(0,0,0,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tab-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 17px; background: radial-gradient(80% 90% at 50% 0%, rgba(255,178,62,.24), rgba(255,138,28,.06)); border: 1px solid var(--line2); transition: transform .4s var(--spring); pointer-events: none; }
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mut2); font-size: 11.5px; font-weight: 600; transition: color .2s; }
.tabs button svg { font-size: 23px; transition: transform .3s var(--spring); }
.tabs button.on { color: var(--amber3); }
.tabs button.on svg { color: var(--amber); transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 8px rgba(255,170,60,.6)); }
.badge { position: absolute; top: 7px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px rgba(255,90,79,.8); }
.badge[hidden] { display: none; }

/* ---------- panels ---------- */
.panel { position: absolute; z-index: 3; inset: 0; background: radial-gradient(100% 38% at 50% 0%, rgba(255,170,60,.08), transparent 70%), var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(var(--tabs-h) + var(--safe-b) + 24px); display: none; overscroll-behavior: contain; }
.panel.on { display: block; animation: panelIn .35s var(--ease); }
@keyframes panelIn { from { transform: translateY(14px); } }
.ph { text-align: center; margin: 0 0 16px; }
.art { position: relative; width: 140px; height: 140px; margin: 0 auto 6px; display: grid; place-items: center; }
.art::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,60,.3), transparent 72%); }
.art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,.65)); animation: artIn .6s var(--spring) both; }
@keyframes artIn { from { transform: scale(.5) rotate(-10deg); opacity: 0; } }
.ph h1 { font: 700 26px/1.15 Cinzel, Georgia, serif; margin: 0 0 6px; letter-spacing: .01em; }
.ph p { margin: 0; color: var(--mut); }
.ph .bal-line { display: inline-flex; align-items: center; gap: 8px; font-size: 32px; font-weight: 800; }
.ph .bal-line img { width: 34px; height: 34px; }
h2.sec { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 24px 4px 10px; font-weight: 700; }
h2.sec::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.list { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; text-align: left; width: 100%; background: linear-gradient(135deg, rgba(30,24,18,.92), rgba(16,13,10,.92)); border: 1px solid var(--line);
  animation: rowIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .15s, border-color .2s; }
button.row:active { transform: scale(.98); border-color: var(--line2); }
@keyframes rowIn { from { opacity: 0; transform: translateY(12px); } }
.row .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: var(--amber); flex: none; background: radial-gradient(circle at 50% 30%, rgba(255,178,62,.14), rgba(255,255,255,.02)); border: 1px solid var(--line); font-weight: 800; }
.row .ic img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); }
.row .mid { flex: 1; min-width: 0; }
.row .mid b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .mid small { color: var(--mut); display: flex; align-items: center; gap: 5px; font-size: 13px; }
.row .mid small img { width: 15px; height: 15px; }
.row .end { flex: none; color: var(--mut); font-size: 13px; display: flex; align-items: center; gap: 4px; }
.row.done { opacity: .5; }
.row.soon { opacity: .6; }
.row .ok { color: var(--ok); font-size: 22px; }
.soon-tag { padding: 4px 9px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: var(--mut); background: rgba(255,255,255,.06); }
.coin { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--amber); }
.coin img { width: 16px; height: 16px; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 18px; border-radius: 17px; font-weight: 800; font-size: 16px; color: var(--ink);
  background: linear-gradient(180deg, #ffe0a0, #ffb23e 45%, #ff8a1c); box-shadow: 0 10px 26px rgba(255,138,28,.28), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.15); transition: transform .15s; }
.btn:active { transform: scale(.97); }
.btn.ghost { background: var(--card2); color: var(--txt); box-shadow: none; border: 1px solid var(--line); }
.btn.small { width: auto; padding: 8px 14px; font-size: 13.5px; border-radius: 12px; }
.btn:disabled { opacity: .45; }
.btn svg { font-size: 18px; }
.btns { display: flex; gap: 8px; margin-top: 14px; }
.card { padding: 16px; border-radius: var(--r); background: linear-gradient(135deg, rgba(30,24,18,.92), rgba(16,13,10,.92)); border: 1px solid var(--line); }
.card + .card { margin-top: 10px; }
.mut { color: var(--mut); }
.center { text-align: center; }
.pill-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); margin-bottom: 14px; }
.pill-tabs button { padding: 10px; border-radius: 11px; font-weight: 600; color: var(--mut); }
.pill-tabs button.on { background: linear-gradient(180deg, rgba(255,178,62,.2), rgba(255,138,28,.06)); color: var(--amber3); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.days div { border-radius: 13px; padding: 8px 2px; text-align: center; background: var(--card2); border: 1px solid var(--line); font-size: 11px; color: var(--mut); }
.days div b { display: block; font-size: 12px; color: var(--txt); margin-top: 2px; }
.days div.got { border-color: rgba(127,211,107,.4); background: rgba(127,211,107,.08); }
.days div.now { border-color: var(--amber); background: rgba(255,178,62,.14); color: var(--amber3); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-row .card { padding: 14px; }
.stat-row .card b { display: block; font-size: 23px; font-weight: 800; }
.stat-row .card small { color: var(--mut); }
.share-bar { position: sticky; bottom: 0; padding-top: 14px; display: flex; gap: 8px; background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.share-bar .btn.ghost { width: 58px; flex: none; }
.boost-free { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boost-free button { padding: 12px 14px 14px; border-radius: 18px; text-align: left; border: 1px solid var(--line); background: radial-gradient(120% 100% at 0% 0%, rgba(255,178,62,.16), transparent 60%), linear-gradient(135deg, rgba(30,24,18,.92), rgba(16,13,10,.92)); }
.boost-free img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.boost-free b { display: block; margin-top: 4px; }
.boost-free small { color: var(--mut); }
.pips { display: flex; gap: 4px; margin-top: 6px; }
.pips i { width: 18px; height: 5px; border-radius: 4px; background: rgba(255,255,255,.1); }
.pips i.on { background: var(--grad); box-shadow: 0 0 8px rgba(255,170,60,.6); }
.lead-head { display: flex; align-items: center; gap: 14px; }
.lead-head img { width: 84px; height: 84px; object-fit: contain; flex: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.progress { height: 10px; border-radius: 10px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; position: relative; }
.progress i { position: absolute; inset: 0; background: var(--grad); transform-origin: left; border-radius: 10px; }
.rank { width: 30px; text-align: center; font-weight: 800; color: var(--mut); flex: none; }
.rank.r1 { color: var(--amber); } .rank.r2 { color: #d8d2c8; } .rank.r3 { color: #d98a4a; }
.me-row { position: sticky; bottom: 0; margin-top: 10px; border-color: var(--line2) !important; background: linear-gradient(135deg, #2a1d0e, #160f08) !important; }
.ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #111; flex: none; }
.mini-badge { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; }

/* wheel */
.wheel-wrap { position: relative; width: min(80vw, 320px); aspect-ratio: 1; margin: 10px auto 16px; }
.wheel-wrap svg.wheel { width: 100%; height: 100%; transition: transform 5s cubic-bezier(.12,.72,.08,1); filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
.wheel-ptr { position: absolute; top: -10px; left: 50%; margin-left: -17px; z-index: 2; width: 34px; height: 44px; transform-origin: 50% 20%; }
.spinning .wheel-ptr { animation: tick .14s ease-in-out infinite; }
@keyframes tick { 50% { transform: rotate(-16deg); } }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: url(/media/coin-160.webp) center / 86% no-repeat, #120d08; box-shadow: 0 0 0 4px #3a2610, 0 6px 16px rgba(0,0,0,.6); }
.bulb { animation: bulb 1s steps(1) infinite; } .bulb.b2 { animation-delay: .5s; }
.spinning .bulb { animation-duration: .24s; } .spinning .bulb.b2 { animation-delay: .12s; }
@keyframes bulb { 0% { fill: #fff1cc; } 50% { fill: #5a3a10; } }

/* meal summary + celebrations */
.summary { text-align: center; }
.summary .art { width: 170px; height: 170px; }
.summary h1 { font: 700 28px/1.1 Cinzel, serif; margin: 2px 0 8px; }
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.sum-grid div { padding: 12px 6px; border-radius: 16px; background: var(--card2); border: 1px solid var(--line); }
.sum-grid b { display: block; font-size: 20px; font-weight: 800; color: var(--amber3); }
.sum-grid small { color: var(--mut); font-size: 12px; }
.big-coins { font-size: 40px; font-weight: 900; margin-top: 4px; }
.fall { position: absolute; top: -40px; width: 30px; height: 30px; will-change: transform; }
.fxlayer { position: absolute; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; }

/* sheet + toast */
.sheet-bg { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.66); animation: fadeIn .2s; }
.sheet { position: absolute; z-index: 21; left: 0; right: 0; bottom: 0; max-height: 90%; overflow-y: auto; padding: 24px 18px calc(22px + var(--safe-b)); border-radius: 28px 28px 0 0; background: radial-gradient(100% 50% at 50% 0%, rgba(255,170,60,.12), transparent 70%), linear-gradient(180deg, #1a140f, #0b0907); border-top: 1px solid var(--line2); box-shadow: 0 -20px 60px rgba(0,0,0,.6); animation: sheetUp .38s var(--ease); }
.sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255,255,255,.18); }
.sheet[hidden], .sheet-bg[hidden] { display: none; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--card2); color: var(--mut); font-size: 15px; z-index: 2; }
@keyframes sheetUp { from { transform: translateY(40%); } }
@keyframes fadeIn { from { opacity: 0; } }
.sheet input, .card input { width: 100%; padding: 15px; border-radius: 14px; border: 1px solid var(--line); background: #0a0806; color: var(--txt); font: inherit; font-size: 15px; user-select: text; -webkit-user-select: text; }
.sheet input:focus, .card input:focus { outline: 2px solid rgba(255,178,62,.5); }
.toast { position: absolute; z-index: 30; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 11px 16px; border-radius: 15px; background: rgba(30,24,18,.97); border: 1px solid var(--line); font-weight: 600; box-shadow: 0 12px 34px rgba(0,0,0,.55); animation: toastIn .35s var(--spring); text-align: center; }
@keyframes toastIn { from { transform: translate(-50%, -20px) scale(.9); opacity: 0; } }
.toast.err { border-color: rgba(255,90,79,.55); } .toast.good { border-color: rgba(127,211,107,.5); }
.toast[hidden] { display: none; }
.demo-tag { position: absolute; z-index: 4; left: 0; right: 0; top: 0; padding: 5px 16px; text-align: center; font-size: 11.5px; color: var(--mut); background: rgba(255,178,62,.07); border-bottom: 1px solid var(--line); }
.demo-tag[hidden] { display: none; }
.demo-tag a { display: inline-block; padding: 8px 4px; margin: -8px 0; }
body.demo .home { padding-top: 36px; } body.demo .panel { padding-top: 40px; }
.boot { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(60% 40% at 50% 45%, rgba(255,150,40,.18), transparent 70%), var(--bg); transition: opacity .45s, visibility .45s; }
.boot img { width: 170px; height: 170px; animation: breathe 2.4s ease-in-out infinite; }
.boot b { font: 800 26px Cinzel, serif; letter-spacing: .16em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot small { color: var(--mut); }
#app:not(.loading) .boot { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-height: 660px) { .balance { margin-top: 8px; } #bal { font-size: 36px; } .dock { min-height: 92px; } .squad-txt small { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- character animation: video clips blended into the night sky (black = see-through) ---------- */
.stage::before { content: ''; position: absolute; width: min(110vw, 64vh, 480px); height: min(110vw, 64vh, 480px); border-radius: 50%; background: radial-gradient(closest-side, #000 46%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.3) 76%, transparent 90%); pointer-events: none; }
.cat .v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0; transition: opacity .25s;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-composite: intersect; }
.cat[data-anim]:not([data-anim=""]) .p { opacity: 0 !important; transition: opacity .25s; }
.cat[data-anim=idle] .v[data-v=idle], .cat[data-anim=greet] .v[data-v=greet], .cat[data-anim=eat] .v[data-v=eat], .cat[data-anim=bliss] .v[data-v=bliss], .cat[data-anim=frenzy] .v[data-v=frenzy], .cat[data-anim=full] .v[data-v=full], .cat[data-anim=sleep] .v[data-v=sleep], .cat[data-anim=angry] .v[data-v=angry] { opacity: 1; }
.bubble { position: absolute; z-index: 4; left: 50%; top: calc(50% - min(78vw, 44vh, 340px) * .52); transform: translateX(-10%); padding: 8px 14px; border-radius: 16px 16px 16px 4px; font-weight: 800; font-size: 15px; color: var(--ink);
  background: linear-gradient(180deg, #ffe7b5, #ffc25e); box-shadow: 0 8px 20px rgba(0,0,0,.5); pointer-events: none; white-space: nowrap; animation: bubbleIn .35s var(--spring); }
.bubble[hidden] { display: none; }
.bubble.angry { background: linear-gradient(180deg, #ff9a8a, #ff5a4f); color: #fff; }
@keyframes bubbleIn { from { transform: translateX(-10%) scale(.4) translateY(10px); opacity: 0; } }
.heart { position: absolute; z-index: 4; width: 22px; height: 22px; pointer-events: none; color: #ff7a59; will-change: transform, opacity; }
.cat.hiss { animation: hiss .45s ease-in-out; }
@keyframes hiss { 15% { transform: translateX(-6px) scale(1.04); } 30% { transform: translateX(6px) scale(1.04); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

/* sound toggle + early access pill */
.snd-btn { flex: none; width: 44px; display: grid; place-items: center; border-radius: 16px; background: rgba(14,11,9,.72); border: 1px solid var(--line, rgba(255,178,62,.18)); color: var(--amber); }
.snd-btn svg { width: 20px; height: 20px; }
.snd-btn.off { color: rgba(244,231,210,.45); }
.ea-pill { display: inline-flex; align-items: center; gap: 8px; margin: 8px auto 0; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #ffe1a6; background: rgba(255,178,62,.12); border: 1px solid rgba(255,178,62,.4); }
.ea-pill[hidden] { display: none; }
.ea-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); animation: eaDot 1.6s ease-in-out infinite; }
.ea-pill b { color: #fff; font-weight: 800; }
@keyframes eaDot { 50% { opacity: .35; } }
/* per-bite reactions: emoji pops */
.pop-emo { position: absolute; z-index: 4; font-size: 26px; pointer-events: none; will-change: transform, opacity; }
.cat.breathe[data-anim]:not([data-anim=""]) { animation: none; }
.ea-card { margin-top: 10px; display: grid; gap: 4px; border-color: rgba(255,178,62,.45) !important; background: linear-gradient(180deg, rgba(255,178,62,.14), rgba(255,178,62,.04)) !important; }
.ea-card .num { color: var(--amber); font-weight: 800; font-size: 20px; }
.claim-card { margin-top: 10px; display: grid; gap: 8px; border-color: rgba(255,178,62,.45) !important; }
.claim-card .btn[disabled] { opacity: .55; filter: grayscale(.4); }
.cl-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
.cl-row a { text-decoration: none; font-weight: 700; }