:root {
  --bg: #1f1713; --card: #2d2119; --card2: #3a2b20; --ink: #f6ece0; --muted: #b9a594;
  --accent: #f2a93b; --good: #7bd88f; --bad: #ef6a5b; --line: rgba(255,255,255,.08);
  --lid: -64px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("fonts/Fredoka.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 16px/1.35 "Nunito", -apple-system, Roboto, sans-serif; overscroll-behavior: none; }
h2, .btn, .dock button, .tabs button, .coins, .who b { font-family: "Fredoka", "Nunito", sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }

#app { height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }

/* ---------- HUD ---------- */
.hud { display: flex; align-items: center; gap: 12px; padding: 10px 14px 8px; }
.who { flex: 1; min-width: 0; }
.who b { font-size: 18px; }
.who small { color: var(--muted); margin-left: 6px; }
.xp { height: 6px; border-radius: 4px; background: var(--card2); margin-top: 6px; overflow: hidden; }
.xp i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .5s; }
.coins { background: var(--card); padding: 7px 12px; border-radius: 20px; font-weight: 700; white-space: nowrap; }


/* ---------- room: one static scene at a time, no scrolling ---------- */
.room { position: relative; flex: 1; min-height: 200px; margin: 0 10px; border-radius: 22px; overflow: hidden; background: #1f1713; isolation: isolate; }
#scene { position: absolute; inset: 0; transition: opacity .28s; }
#scene.fade { opacity: 0; }
.rm-wall { position: absolute; left: 0; right: 0; top: 0; height: 56%; }
.rm-floor { position: absolute; left: 0; right: 0; top: 56%; bottom: 0; }
.rm-living .rm-wall { background: #ecdcc4 repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 2px, transparent 2px 46px); }
.rm-living .rm-floor { background: #b98957 repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 64px); box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.25); }
.rm-bedroom .rm-wall { background: #d9cdea repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 18px, transparent 18px 36px); }
.rm-bedroom .rm-floor { background: #9b7bb5; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.25); }
.rm-kitchen .rm-wall { background: #d9ecd2; }
.rm-kitchen .rm-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 2px, transparent 2px 30px), repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 2px, #bfe0d2 2px 28px); }
.rm-kitchen .rm-floor { background: repeating-conic-gradient(#f1e6d0 0 25%, #d9c7a4 0 50%) 0 0 / 56px 56px; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.25); }
.rm-bath .rm-wall { background: repeating-linear-gradient(90deg, rgba(255,255,255,.6) 0 2px, transparent 2px 38px), repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 2px, #a9d4ee 2px 38px); }
.rm-bath .rm-floor { background: repeating-conic-gradient(#e8eef2 0 25%, #c9d6de 0 50%) 0 0 / 48px 48px; box-shadow: inset 0 8px 10px -6px rgba(0,0,0,.2); }
.rm-garden .rm-wall { background: linear-gradient(#8fd0ff, #dff3ff); overflow: hidden; }
.rm-garden .rm-floor { background: radial-gradient(rgba(255,255,255,.1) 1.5px, transparent 2px) 0 0 / 22px 22px, linear-gradient(#7bc47f, #54a35c); }
.it { position: absolute; transform: translateX(-50%); }
.it svg { width: 100%; display: block; }
.wallit { z-index: 0; } .floor { z-index: 1; }
.night-overlay { position: absolute; inset: 0; background: #0b1230; opacity: 0; pointer-events: none; transition: opacity 1.2s; z-index: 4; }

.window { position: relative; aspect-ratio: 1; border-radius: 10px 10px 4px 4px; background: linear-gradient(#8fd0ff, #d4efff); border: 6px solid #8a5d36; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.window::before, .window::after { content: ""; position: absolute; background: #8a5d36; }
.window::before { left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; } .window::after { top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; }
.window.night { background: linear-gradient(#10183f, #2a3a7a); }
.curtain { position: absolute; top: -6%; bottom: -10%; width: 26%; background: linear-gradient(90deg, #d96f6f, #c25b5b); border-radius: 0 0 10px 10px; }
.curtain.l { left: -14%; } .curtain.r { right: -14%; transform: scaleX(-1); }
.frame { aspect-ratio: 4/5; background: #f6ede0; border: 5px solid #8a5d36; border-radius: 3px; display: grid; place-items: center; font-size: 26px; }
.clock { font-size: 30px; text-align: center; }
.rug { position: absolute; bottom: 1.5%; height: 13%; transform: translateX(-50%); border-radius: 50%; z-index: 0; opacity: .88;
  background: repeating-radial-gradient(ellipse at center, #c25b4f 0 14%, #e8b04a 14% 22%, #3f6ccb 22% 30%); }
.mat { position: absolute; bottom: 2%; height: 9%; transform: translateX(-50%); border-radius: 12px; background: #f4b8c4; box-shadow: inset 0 0 0 4px #fff3; z-index: 0; }
.doorframe { position: absolute; right: 3%; bottom: 43.6%; width: 16%; max-height: 40%; z-index: 0; display: flex; align-items: flex-end; }
.doorframe svg { width: 100%; max-height: 100%; display: block; }
.sun { position: absolute; right: 12%; top: 10%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: #ffe27a; box-shadow: 0 0 0 10px rgba(255,226,122,.3), 0 0 30px 10px rgba(255,226,122,.5); }
.cloud { position: absolute; top: 14%; left: 0; width: 24%; height: 7%; border-radius: 20px; background: #fff; opacity: .92; animation: drift 70s linear infinite; }
.cloud::before { content: ""; position: absolute; left: 14%; top: -90%; width: 42%; height: 150%; border-radius: 50%; background: #fff; }
.cloud.c2 { top: 28%; width: 18%; animation-duration: 95s; animation-delay: -40s; }
@keyframes drift { from { transform: translateX(-120%); } to { transform: translateX(520%); } }
.fence { position: absolute; left: 0; right: 0; top: calc(56% - 34px); height: 44px; background: repeating-linear-gradient(90deg, #f6ecd9 0 13px, transparent 13px 21px); z-index: 0; }
.fence::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: #e6d7b8; }
.sway svg { transform-origin: 50% 100%; animation: sway 3.4s ease-in-out infinite; } .sway.d2 svg { animation-delay: -1.7s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.bfly { position: absolute; left: 30%; top: 42%; font-size: 24px; animation: flutter 9s ease-in-out infinite; z-index: 2; }
@keyframes flutter { 0% { transform: translate(0,0) rotate(-10deg); } 25% { transform: translate(110px,-50px) rotate(12deg); } 50% { transform: translate(40px,30px) rotate(-6deg); } 75% { transform: translate(-60px,-30px) rotate(10deg); } 100% { transform: translate(0,0) rotate(-10deg); } }
.bird { position: absolute; left: 86%; top: calc(56% - 50px); font-size: 24px; animation: peck 5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes peck { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(25deg) translateY(3px); } 86% { transform: rotate(-4deg); } 94% { transform: rotate(22deg); } }
.steam { position: absolute; font-size: 22px; animation: rise 3s ease-out infinite; opacity: 0; }
.drip { position: absolute; width: 5px; height: 10px; border-radius: 50%; background: #8ec9ff; animation: drip 1.6s ease-in infinite; }
@keyframes drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(60px); opacity: 0; } }
.kibble { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #b8793a; z-index: 4; animation: kfall .8s ease-in forwards; }
@keyframes kfall { from { transform: translateY(0); } to { transform: translateY(var(--drop, 200px)); } }
.vanish { animation: fade 1s forwards; }

/* room switcher */
.rooms { position: absolute; left: 8px; top: 8px; z-index: 9; display: grid; gap: 6px; }
.rooms button { width: 36px; height: 36px; border-radius: 50%; background: rgba(45,33,25,.72); font-size: 17px; line-height: 1; color: #fff; }
.rooms button.cur { outline: 2px solid var(--accent); background: rgba(95,66,40,.9); }
.toggles { position: absolute; right: 8px; top: 8px; z-index: 9; display: grid; gap: 6px; }
.toggles button { width: 36px; height: 36px; border-radius: 50%; background: rgba(45,33,25,.72); font-size: 17px; line-height: 1; color: #fff; }
.toggles button.off { opacity: .45; }
.speech { position: absolute; left: 50%; top: 4%; transform: translateX(-50%) scale(.9); max-width: 86%; z-index: 5;
  background: #fffaf2; color: #3a2b20; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; transition: .25s; pointer-events: none; white-space: pre-line; }
.speech.show { opacity: 1; transform: translateX(-50%) scale(1); }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.fx span { position: absolute; font-size: 28px; animation: rise 1.6s ease-out forwards; }
@keyframes rise { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-120px) scale(1.2); opacity: 0; } }
.fx .prop { animation: none; font-size: 44px; }
.fx .bowl { left: 50%; bottom: 7%; margin-left: -70px; animation: slidein .5s ease-out both; }
@keyframes slidein { from { transform: translateX(-80px); opacity: 0; } to { transform: none; opacity: 1; } }
.fx .yarn { bottom: 6%; animation: yarn 1.6s ease-in-out both; }
@keyframes yarn { 0% { left: -10%; transform: rotate(0); } 50% { left: 55%; bottom: 22%; } 100% { left: 105%; transform: rotate(720deg); } }
.zzz { position: absolute; left: 62%; top: 22%; z-index: 4; font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.4); display: none; }
.zzz i { position: absolute; font-style: normal; animation: zfloat 3s infinite; opacity: 0; }
.zzz i:nth-child(2) { animation-delay: 1s; } .zzz i:nth-child(3) { animation-delay: 2s; }
@keyframes zfloat { 0% { transform: translate(0,20px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(24px,-50px) scale(1.4); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.12); } }

/* ================= Dust ================= */
.cat-wrap { position: absolute; left: 50%; bottom: 3%; width: 46%; transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 100%; z-index: 3; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cat-ride { transform-origin: 50% 100%; }
.cat-flip { transform: scaleX(var(--dir, 1)); }
.cat { width: 100%; display: block; overflow: visible; }
.bubble-need { position: absolute; right: -2%; top: -6%; z-index: 4; font-size: 26px; background: #fffaf2; border-radius: 50%; width: 46px; height: 46px;
  display: none; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: pulse 1s infinite; }
.bubble-need.show { display: grid; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.cat-wrap .zzz { left: 68%; top: 2%; }
.cat-wrap.walking .cat-flip { animation: walk .34s ease-in-out infinite; }
@keyframes walk { 0%, 100% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(-1.5deg); } 50% { transform: scaleX(var(--dir, 1)) translateY(-9px) rotate(1.5deg); } }
.cat .lid { transform: translateY(var(--lid, -64px)); animation: blink 5s infinite; }
.cat .breathe { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.6s ease-in-out infinite; }
.cat .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: wag 3.2s ease-in-out infinite; }
.cat .ear { transform-box: fill-box; }
.cat .ear-l { transform-origin: 80% 90%; animation: twitch 8s infinite; } .cat .ear-r { transform-origin: 20% 90%; animation: twitch 11s 3s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: translateY(var(--lid, -64px)); } 94% { transform: translateY(0); } }
@keyframes breathe { 50% { transform: scale(1.012, 1.03); } }
@keyframes wag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(9deg); } }
@keyframes twitch { 0%, 92%, 100% { transform: rotate(0); } 95% { transform: rotate(-7deg); } 97% { transform: rotate(3deg); } }
.cat .shut, .cat .brow, .cat .tear, .cat .thermo, .cat .mouth, .cat .wave-paw { display: none; }
.cat .mouth-flat { display: inline; }
.state-happy .mouth-smile { display: inline; } .state-happy .mouth-flat { display: none; }
.state-hungry .mouth-open, .state-hungry .brow { display: inline; } .state-hungry .mouth-flat { display: none; } .state-hungry .pupil { transform: scale(1.35, 1.05); transform-box: fill-box; transform-origin: center; }
.state-sad { --lid: -42px; } .state-sad .mouth-sad, .state-sad .brow, .state-sad .tear { display: inline; } .state-sad .mouth-flat { display: none; }
.state-sad .tear { animation: tear 2.6s infinite; } @keyframes tear { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
.state-tired { --lid: -34px; }
.state-sleeping { --lid: 0px; } .state-sleeping .lid { animation: none; } .state-sleeping .shut { display: inline; } .state-sleeping .pupil, .state-sleeping .mouth-flat { display: none; }
.state-sick { --lid: -44px; } .state-sick .thermo, .state-sick .mouth-sad, .state-sick .brow { display: inline; } .state-sick .mouth-flat { display: none; }
.state-sick .breathe { animation: shiver .4s infinite; } @keyframes shiver { 50% { transform: translateX(1.5px); } }
.state-sad .head, .state-tired .head { transform: translateY(8px); } .state-sleeping .head { transform: translateY(14px) rotate(-4deg); }
.cat .head { transform-box: fill-box; transform-origin: 50% 100%; }

/* lying down: the body flattens, the head rests on it */
.pose-lie .torso { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.62); }
.pose-lie .headlift { transform: translateY(62px); } .pose-lie.state-sleeping .head { transform: translateY(6px) rotate(-5deg); }
.pose-lie .tail { transform: translateY(70px) scaleY(.8); } .pose-lie .shadow { opacity: .22; }
.pose-lie .neck { display: none; }

/* inside the basin / bath / litter box */
.vessel-basin .sitter { transform: translateY(30px) scale(.95); }
.vessel-tub .sitter { transform: translateY(24px) scale(.9); }
.vessel-litter .sitter { transform: translateY(38px) scale(.94); }
.cat[class*="vessel-"] .sitter { transform-box: fill-box; transform-origin: 50% 100%; }
.cat[class*="vessel-"] .tail { display: none; }
.vessel-basin .shadow { display: none; }   /* the basin floats when rocked: a shadow under it looked wrong */
.cat[class*="vessel-"] .head, .cat[class*="vessel-"] .ear { animation: none; }

/* one-shot reactions (class set from JS) */
.do-pet .head { animation: purr .18s 8; } @keyframes purr { 50% { transform: rotate(2deg) translateY(3px); } }
.do-pet .mouth-smile { display: inline; } .do-pet .mouth-flat, .do-pet .mouth-open { display: none; }
.do-feed .head { animation: chew .3s 7; } @keyframes chew { 50% { transform: translateY(9px); } }
.do-feed .mouth-open { display: inline; } .do-feed .mouth-flat, .do-feed .mouth-sad { display: none; }
.do-play .head { animation: swat .5s 3; } .do-play .paw { animation: swatpaw .5s 3; }
@keyframes swat { 50% { transform: rotate(5deg) translateX(8px); } } @keyframes swatpaw { 50% { transform: translateY(-26px) rotate(-12deg); } }
.do-buy .breathe { animation: hop .45s 2; } @keyframes hop { 40% { transform: translateY(-22px); } }
.do-toilet .head { animation: sniff .45s 5; } @keyframes sniff { 50% { transform: translateY(12px) rotate(3deg); } }
.do-toilet .torso { animation: dig .3s 8; } @keyframes dig { 50% { transform: translateY(5px) scaleY(.97); } }
.do-wash { animation: shake .22s 12; } @keyframes shake { 25% { transform: translateX(-5px) rotate(-2deg); } 75% { transform: translateX(5px) rotate(2deg); } }
.do-wave .wave-paw { display: inline; transform-box: fill-box; transform-origin: 50% 100%; animation: wave .5s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(22deg); } }

.basin-click { cursor: pointer; }
.room.rainy .window { background: linear-gradient(#8d9db0, #b9c4d0); }
@media (prefers-reduced-motion: reduce) { .cat * { animation: none !important; } }

/* ---------- stats, dock ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 14px 2px; }
.stat { background: var(--card); border-radius: 12px; padding: 5px 8px 6px; }
.stat div { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.stat b { color: var(--ink); }
.bar { height: 8px; border-radius: 5px; background: var(--card2); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--good); transition: width .5s, background .3s; }
.bar i.low { background: var(--bad); } .bar i.mid { background: var(--accent); }

.dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 14px 2px; }
.dock button { background: var(--card2); border-radius: 14px; padding: 6px 2px 5px; display: grid; gap: 2px; justify-items: center; font-size: 12px; color: var(--muted);
  transition: transform .1s, background .2s; }
.dock button span { font-size: 22px; line-height: 1; }
.dock button:active { transform: scale(.93); background: #4a382a; }
.dock button:disabled { opacity: .45; }
.tabs { display: flex; gap: 6px; padding: 4px 14px calc(10px + env(safe-area-inset-bottom)); overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: 1 0 auto; background: var(--card); border-radius: 14px; padding: 9px 12px; font-size: 14px; white-space: nowrap; }
.tabs button:active { background: var(--card2); }

/* ---------- sheet / screens ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.panel { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(40px); } }
.panel h2 { margin: 0 0 12px; font-size: 20px; display: flex; justify-content: space-between; align-items: center; }
.x { background: var(--card); width: 34px; height: 34px; border-radius: 50%; font-size: 16px; }
.list { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; background: var(--card); padding: 11px 12px; border-radius: 14px; }
.row .grow { flex: 1; min-width: 0; } .row small { color: var(--muted); display: block; }
.btn { background: var(--accent); color: #2b1a05; font-weight: 700; padding: 10px 16px; border-radius: 14px; }
.btn.ghost { background: var(--card2); color: var(--ink); } .btn:disabled { opacity: .45; }
.btn.block { width: 100%; margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card { background: var(--card); border-radius: 16px; padding: 14px 10px; text-align: center; font-size: 14px; }
.card span { display: block; font-size: 32px; margin-bottom: 4px; }
.card:active { background: var(--card2); }
.note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card2); white-space: pre-line; }
.center { text-align: center; }
.owned { color: var(--good); font-weight: 700; }

.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.hole { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#0c0805 55%, #3a2b20 56%); font-size: 40px; display: grid; place-items: center; }
.big-choices { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.big-choices button { font-size: 44px; background: var(--card); width: 92px; height: 92px; border-radius: 22px; }
.big-choices button:active { background: var(--card2); }
.die { font-size: 72px; text-align: center; margin: 10px 0; }
.seqbox { display: flex; gap: 10px; justify-content: center; font-size: 46px; margin: 14px 0; min-height: 64px; }
.water { height: 180px; border-radius: 18px; margin: 12px 0; background: linear-gradient(#bfe6ff 0 30%, #3b8fd1 30% 100%); position: relative; overflow: hidden; display: grid; place-items: center; font-size: 56px; }
.water .bob { transition: transform .15s; } .water.bite .bob { animation: dip .25s infinite; }
@keyframes dip { 50% { transform: translateY(18px); } }
.center-big { font-size: 22px; font-weight: 800; text-align: center; min-height: 30px; }

.board-wrap { padding: 6px; border-radius: 14px; background: linear-gradient(#8a5d36, #6a4426); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 8px; overflow: hidden; width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; }
.sq { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; font-size: min(9.4vw, 44px); line-height: 1; transition: background-color .2s, box-shadow .25s; }
.sq.l { background: #eedcbc; } .sq.d { background: #b07d50; }
.sq.lift { z-index: 3; }
.sq.sel { background: #f2c14b !important; }
.sq.last { box-shadow: inset 0 0 0 100px rgba(255, 228, 100, .36); }
.sq.hint::after { content: ""; width: 28%; height: 28%; border-radius: 50%; background: rgba(40, 140, 70, .6); position: absolute; animation: hintpop .2s ease-out; pointer-events: none; }
.sq.hint.cap::after { width: 86%; height: 86%; background: none; border: 4px solid rgba(40, 140, 70, .7); }
@keyframes hintpop { from { transform: scale(0); opacity: 0; } }
.sq.chk { background: radial-gradient(circle, #ff6b5b 0, #e0584b 45%, transparent 75%) !important; animation: chkpulse 1s ease-in-out infinite; }
@keyframes chkpulse { 50% { box-shadow: inset 0 0 18px rgba(255,40,30,.6); } }
.sq em { position: absolute; font: 700 9px/1 system-ui, sans-serif; font-style: normal; opacity: .55; pointer-events: none; }
.sq em.rk { left: 3px; top: 3px; } .sq em.fl { right: 3px; bottom: 2px; }
.sq.l em { color: #8a5d36; } .sq.d em { color: #f4e4c8; }
.pc { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); transition: transform .15s; pointer-events: none; }
.sq.sel .pc { transform: translateY(-6%) scale(1.14); filter: drop-shadow(0 6px 5px rgba(0,0,0,.4)); }
.pc.w { color: #fffaf0; text-shadow: 0 0 2px #2a1d14, 0 0 2px #2a1d14, 0 1px 3px #000; }
.pc.b { color: #1d1411; text-shadow: 0 0 1px rgba(255,255,255,.5); }
.pc.ghost { position: absolute; z-index: 2; animation: ghostout .4s ease-in forwards; }
@keyframes ghostout { to { transform: scale(1.5) rotate(18deg); opacity: 0; } }
.caps { min-height: 20px; margin: 4px 2px; font-size: 16px; letter-spacing: 1px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chkword { color: #ff7a6b; }
.board-end { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: rgba(20, 12, 8, .45); animation: fade .4s; }
.board-end b { padding: 12px 20px; border-radius: 16px; background: var(--card); font-size: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: endpop .5s cubic-bezier(.3,1.6,.5,1); }
.board-end.win b { background: var(--accent); color: #2a1d14; }
@keyframes endpop { from { transform: scale(.4); opacity: 0; } }
.thinking { text-align: center; color: var(--muted); min-height: 22px; margin: 6px 0; }
.thinking.on::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; animation: spin .8s linear infinite; }

.welcome { text-align: center; }
.welcome svg { width: 60%; margin: 6px auto; display: block; }
.welcome h2 { justify-content: center; }
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); background: #fffaf2; color: #2d2119; padding: 10px 16px; border-radius: 14px;
  z-index: 40; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-width: 86%; text-align: center; white-space: pre-line; animation: fade .2s; }
@media (prefers-reduced-motion: reduce) { .cat * { animation: none !important; } }

.welcome .stage { position: relative; width: 78%; margin: 6px auto 0; }
.welcome .hello { position: absolute; right: -4%; top: -2%; background: #fffaf2; color: #3a2b20; padding: 7px 12px; border-radius: 14px;
  font-weight: 800; box-shadow: 0 5px 14px rgba(0,0,0,.3); animation: pulse 1.6s infinite; }
.welcome svg.cat { width: 100%; }
.fine { color: var(--muted); font-size: 13px; line-height: 1.4; }
.privacy p { margin: 8px 0; } .privacy ul { margin: 6px 0 10px; padding-left: 20px; } .privacy li { margin: 3px 0; }
.btn.danger { background: #8e3a33; color: #fff; }
.holes.two { grid-template-columns: repeat(2, 1fr); max-width: 300px; margin-left: auto; margin-right: auto; }
.holes.two .hole { font-size: 56px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.welcome .stage { position: relative; width: 78%; margin: 6px auto 0; }
.state-sleeping-on .zzz { display: block; }

/* ---------- extras: seasons, decor, weather, guest, album, new games ---------- */
.decor-it { position: absolute; font-size: 8.5vw; z-index: 2; pointer-events: none; line-height: 1; }
@media (min-width: 520px) { .decor-it { font-size: 42px; } }
.decor-it.s-season { left: 62%; bottom: 3%; font-size: 10vw; } .decor-it.s-garland { left: 0; right: 0; top: 0; font-size: 6vw; text-align: center; letter-spacing: 2px; }
.fx span.fall { animation: snowfall 5s linear forwards; font-size: 16px; top: -6%; }
@keyframes snowfall { from { transform: translate(0,0) rotate(0); opacity: .9; } to { transform: translate(30px, 420px) rotate(160deg); opacity: .2; } }
.fx span.rain { animation: raindrop .8s linear forwards; font-size: 12px; top: -4%; }
@keyframes raindrop { from { transform: translateY(0); opacity: .8; } to { transform: translateY(380px); opacity: 0; } }
.fx span.bird { animation: birdfly 4s linear forwards; top: 12%; font-size: 22px; left: -8%; }
@keyframes birdfly { to { transform: translate(120vw, -20px); } }
.weather { position: absolute; left: 10px; top: 10px; z-index: 9; background: rgba(45,33,25,.6); border-radius: 14px; padding: 3px 9px; font-size: 14px; }
.room[data-sky="dusk"] .window { background: linear-gradient(#f2a06b, #8a5ca8); }
.room[data-sky="night"] .window { background: linear-gradient(#10183f, #2a3a7a); }
.room[data-wx="rain"] .window, .room[data-wx="snow"] .window { background: linear-gradient(#8d9db0, #b9c4d0); }
.bunny { position: absolute; bottom: 7%; font-size: 22px; z-index: 4; transition: left .7s ease-in-out; pointer-events: none; filter: none; }
.guest { position: absolute; bottom: 3%; font-size: 12vw; z-index: 5; animation: guestin .6s ease-out; background: none; line-height: 1; }
@media (min-width: 520px) { .guest { font-size: 56px; } }
@keyframes guestin { from { transform: translateX(80px); opacity: 0; } }
.guest::after { content: "💬"; position: absolute; right: -6px; top: -10px; font-size: 18px; animation: pulse 1s infinite; }
.snapflash { position: absolute; inset: 0; background: #fff; z-index: 12; pointer-events: none; animation: flash .35s ease-out forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); margin-left: 5px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo { position: relative; border-radius: 14px; overflow: hidden; background: #3a2b20; padding: 6px 6px 8px; }
.photo .pic { height: 110px; border-radius: 8px; display: grid; place-items: end center; overflow: hidden; background: linear-gradient(#e9d7bd, #d6b98f 62%, #a9763f 62%); }
.photo .pic.night { background: linear-gradient(#1a2352, #3b3f7a 62%, #5a4030 62%); }
.photo .pic svg { width: 78%; height: auto; }
.photo small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.photo .del { position: absolute; right: 4px; top: 4px; background: rgba(0,0,0,.45); border-radius: 50%; width: 24px; height: 24px; font-size: 12px; }
.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.col-grid div { background: var(--card); border-radius: 12px; padding: 8px 2px; text-align: center; font-size: 11px; color: var(--muted); }
.col-grid div b { display: block; font-size: 30px; font-weight: 400; }
.col-grid .no b { filter: grayscale(1) brightness(.4); }
.streak { text-align: center; padding: 12px; background: var(--card); border-radius: 16px; margin-bottom: 10px; }
.streak b { font-size: 28px; }
.prog { height: 6px; border-radius: 4px; background: var(--card2); overflow: hidden; margin-top: 5px; } .prog i { display: block; height: 100%; background: var(--good); }
.pairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.pairs button { aspect-ratio: 1; border-radius: 14px; background: var(--card2); font-size: 34px; transition: transform .2s; }
.pairs button.up { background: #fff4de; } .pairs button.gone { visibility: hidden; }
.aqua { position: relative; height: 230px; border-radius: 18px; margin: 12px 0; background: linear-gradient(#7ed0ff, #2a76c0); overflow: hidden; touch-action: manipulation; }
.aqua span { position: absolute; font-size: 38px; transition: left 2.4s linear; user-select: none; }
.maze { position: relative; margin: 10px auto; width: min(100%, 320px); aspect-ratio: 1; border-radius: 12px; overflow: hidden; touch-action: none; user-select: none;
  background: #3a2b20 repeating-conic-gradient(rgba(255,255,255,.035) 0 25%, transparent 0 50%) 0 0 / calc(200% / var(--n)) calc(200% / var(--n)); box-shadow: inset 0 0 0 3px #8a5d36, 0 6px 16px rgba(0,0,0,.3); }
.maze svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.maze svg path { fill: none; stroke: #c99a62; stroke-width: .13; stroke-linecap: round; }
.mz-it, .mz-cat { position: absolute; width: calc(100% / var(--n)); aspect-ratio: 1; display: grid; place-items: center; transform: translate(-50%, -50%);
  font-size: min(calc(250px / var(--n)), 6.4vw); line-height: 1; pointer-events: none; }
.mz-it.goal { animation: bob 1.6s ease-in-out infinite; }
.mz-it.fish { animation: bob 1.3s ease-in-out infinite; transition: transform .25s ease-in, opacity .25s; }
.mz-it.fish.eaten { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
@keyframes bob { 50% { translate: 0 -8%; } }
.mz-cat { z-index: 2; transition: left .14s ease-out, top .14s ease-out; }
.mz-cat b { display: block; transition: transform .14s; }
.mz-cat.left b { transform: scaleX(-1); }
.mz-cat.bump b { animation: mzbump .25s; } @keyframes mzbump { 30% { translate: 0 -12%; scale: 1.12 .9; } }
.mz-cat.win b { animation: mzwin .6s ease-out; } @keyframes mzwin { 40% { translate: 0 -40%; scale: 1.3; } }
.mz-fog { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); z-index: 3; pointer-events: none; }
.mz-fog i { background: #17100c; transition: opacity .45s ease-out; }
.mz-fog i.lit { opacity: 0; }
.dpad { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; justify-content: center; }
.dpad button { height: 48px; border-radius: 12px; background: var(--card2); font-size: 22px; }

.cups { display: flex; justify-content: center; gap: 0; margin: 24px auto; width: 270px; }
.cups button { position: relative; width: 90px; height: 90px; font-size: 64px; transition: transform .45s ease-in-out; line-height: 90px; }
.cups button span { position: absolute; left: 0; right: 0; bottom: -6px; font-size: 34px; line-height: 1; z-index: 0; }
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(100%, 270px); margin: 14px auto; }
.ttt button { aspect-ratio: 1; border-radius: 14px; background: var(--card2); font-size: 38px; }
.simon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 260px); margin: 14px auto; }
.simon button { aspect-ratio: 1; border-radius: 22px; opacity: .55; transition: opacity .1s, transform .1s; } .simon button.lit { opacity: 1; transform: scale(1.05); }

/* ================= v2: livelier graphics and animation ================= */
/* eyes follow your finger; blush; slow blink; head tilt; pounce */
.cat .look { transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px)); transition: transform .22s ease-out; }
.cat .blush { opacity: 0; transition: opacity .4s; }
.state-happy .blush { opacity: .28; } .do-pet .blush, .do-love .blush { opacity: .75; }
.excited .cat .pupil { transform: scale(1.7, 1.08); transform-box: fill-box; transform-origin: center; transition: transform .2s; }
.do-love .lid { animation: slowblink 1.8s ease-in-out 1 !important; }
@keyframes slowblink { 0%, 100% { transform: translateY(var(--lid, -64px)); } 40%, 60% { transform: translateY(0); } }
.do-tilt:not(.pose-lie) .headlift { transform-box: fill-box; transform-origin: 50% 90%; animation: tilt 2.4s ease-in-out 1; }
@keyframes tilt { 20%, 70% { transform: rotate(9deg); } }
.do-pounce .breathe { animation: pounce .65s cubic-bezier(.3,.7,.4,1) 1; }
@keyframes pounce { 0% { transform: none; } 30% { transform: translateY(10px) scale(1.05, .9); } 60% { transform: translateY(-48px) scale(.96, 1.06); } 100% { transform: none; } }
.do-stretch:not(.pose-lie) .torso { animation: stretch 1.6s ease-in-out 1; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes stretch { 30%, 60% { transform: scale(1.12, .82); } }
.state-sleeping .breathe { animation-duration: 5.2s; }
@keyframes breathe { 50% { transform: scale(1.014, 1.035); } }
/* walking: paws step, tail swings faster, the shadow pulses */
.cat-wrap.walking .paw-l { animation: step .34s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.cat-wrap.walking .paw-r { animation: step .34s .17s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes step { 50% { transform: translateY(-10px); } }
.cat-wrap.walking .tail { animation-duration: .7s; }
.cat-wrap.walking .shadow { animation: shadowpulse .34s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes shadowpulse { 50% { transform: scaleX(.86); opacity: .1; } }
.cat-wrap.fast .cat-flip { animation-duration: .22s; }

/* room change: slide instead of a plain fade */
#scene.slide { transition: transform .3s ease-in, opacity .3s ease-in; }

/* windows: sky layer with stars and the moon at night, rain or snow on the glass */
.window { isolation: isolate; }
.window .sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 4px; }
.window .sky::before { content: ""; position: absolute; left: 14%; top: 18%; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 18px 10px #fff, 40px -2px #fffb, 8px 34px #fffa, 56px 26px #fff, 30px 52px #fff9, 66px 6px #fffc, 48px 44px #fff8; animation: twinkle 2.6s ease-in-out infinite alternate; }
.window .sky::after { content: ""; position: absolute; right: 12%; top: 12%; width: 24%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -7px 4px 0 0 #f7efc9; opacity: 0; filter: drop-shadow(0 0 6px #f7efc9aa); }
.room[data-sky="night"] .window .sky::before, .room[data-sky="night"] .window .sky::after, .window.night .sky::before, .window.night .sky::after { opacity: 1; }
.room[data-sky="dusk"] .window .sky::before { opacity: .5; }
@keyframes twinkle { to { opacity: .35; } }
.window .sky b { position: absolute; inset: 0; opacity: 0; }
.room[data-wx="rain"] .window .sky b { opacity: 1; background: repeating-linear-gradient(100deg, transparent 0 8px, rgba(255,255,255,.5) 8px 9px) 0 0 / 36px 36px; animation: winrain .45s linear infinite; }
@keyframes winrain { to { background-position: -6px 36px; } }
.room[data-wx="snow"] .window .sky b { opacity: 1; background: radial-gradient(circle, #fff 1.4px, transparent 2px) 0 0 / 16px 16px, radial-gradient(circle, #fffc 1px, transparent 1.6px) 8px 8px / 22px 22px; animation: winsnow 3s linear infinite; }
@keyframes winsnow { to { background-position: 4px 16px, 12px 30px; } }
/* sunbeam from the window with dust motes (Dust's own dust) */
.beam { position: absolute; left: -8%; top: 92%; width: 125%; height: 230%; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(255,243,196,.34), rgba(255,243,196,0) 92%); clip-path: polygon(14% 0, 86% 0, 130% 100%, 36% 100%); transform-origin: 50% 0; animation: beam 9s ease-in-out infinite; }
@keyframes beam { 50% { opacity: .7; } }
.beam i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff7d6; opacity: .8; animation: mote 7s linear infinite; }
.beam i:nth-child(1) { left: 40%; top: 20%; } .beam i:nth-child(2) { left: 60%; top: 45%; animation-delay: -2s; animation-duration: 9s; }
.beam i:nth-child(3) { left: 52%; top: 70%; animation-delay: -4s; } .beam i:nth-child(4) { left: 72%; top: 30%; animation-delay: -6s; animation-duration: 8s; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(14px, -18px); } 80% { opacity: .7; } 100% { transform: translate(-6px, 10px); opacity: 0; } }
.room:not([data-sky="day"]) .beam, .room[data-wx="rain"] .beam, .room[data-wx="snow"] .beam, .room.rainy .beam { display: none; }
/* lamps glow in the evening (drawn above the night shade) */
.glow-at { position: absolute; width: 1px; height: 1px; pointer-events: none; }
#glows { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#glows i { position: absolute; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity 1.2s;
  background: radial-gradient(circle, rgba(255,222,150,.9), rgba(255,196,110,.38) 30%, rgba(255,180,90,.12) 52%, rgba(255,180,90,0) 70%); mix-blend-mode: screen; animation: flicker 4s ease-in-out infinite; }
.room[data-sky="dusk"] #glows i { opacity: .55; } .room[data-sky="night"] #glows i, .room.state-sleeping-on #glows i { opacity: 1; }
@keyframes flicker { 50% { transform: translate(-50%, -50%) scale(1.04); } }
.night-overlay { background: radial-gradient(ellipse at 50% 65%, rgba(11,18,48,.75), #0b1230 75%); }

/* garden: sun rays, night sky with stars and fireflies, swaying grass in front */
.sun::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: repeating-conic-gradient(rgba(255,236,150,.35) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 32%, #000 34%, transparent 70%); mask: radial-gradient(circle, transparent 32%, #000 34%, transparent 70%); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rm-garden .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1s;
  background: radial-gradient(circle, #fff 1.2px, transparent 1.8px) 0 0 / 46px 38px, radial-gradient(circle, #fffb 1px, transparent 1.6px) 21px 17px / 64px 50px; animation: twinkle 3s ease-in-out infinite alternate; }
.room[data-sky="night"] .rm-garden .rm-wall { background: linear-gradient(#0d1640, #2b3c7c); }
.room[data-sky="dusk"] .rm-garden .rm-wall { background: linear-gradient(#5b4b9a, #f3a26b); }
.room[data-sky="night"] .rm-garden .stars { opacity: 1; }
.room[data-sky="night"] .sun { background: #f4ecc6; box-shadow: 0 0 24px 6px rgba(244,236,198,.35); width: 11%; }
.room[data-sky="night"] .sun::after, .room[data-sky="night"] .cloud, .room[data-wx="rain"] .sun, .room[data-wx="snow"] .sun { display: none; }
.room[data-wx="rain"] .rm-garden .rm-wall, .room[data-wx="snow"] .rm-garden .rm-wall { background: linear-gradient(#8d9db0, #cfd8e2); }
.flies { position: absolute; inset: 30% 0 10%; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 1s; }
.room[data-sky="night"] .flies, .room[data-sky="dusk"] .flies { opacity: 1; }
.flies i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff6a0; box-shadow: 0 0 10px 3px rgba(255,240,120,.7); animation: fly 6s ease-in-out infinite alternate; }
.flies i:nth-child(1) { left: 10%; top: 20%; } .flies i:nth-child(2) { left: 30%; top: 60%; animation-delay: -1s; animation-duration: 7s; }
.flies i:nth-child(3) { left: 55%; top: 30%; animation-delay: -2s; } .flies i:nth-child(4) { left: 70%; top: 70%; animation-delay: -3s; animation-duration: 8s; }
.flies i:nth-child(5) { left: 85%; top: 15%; animation-delay: -4s; } .flies i:nth-child(6) { left: 42%; top: 82%; animation-delay: -5s; animation-duration: 5s; }
.flies i:nth-child(7) { left: 20%; top: 40%; animation-delay: -2.5s; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: .2; } 30% { opacity: 1; } 60% { transform: translate(26px, -22px); opacity: .4; } 100% { transform: translate(-18px, 12px); opacity: 1; } }
.grass { position: absolute; left: -4%; right: -4%; bottom: -2px; height: 9%; z-index: 4; pointer-events: none; transform-origin: 50% 100%; animation: grass 4s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M0 30 Q4 12 6 2 Q8 14 10 30 M12 30 Q15 16 20 6 Q19 18 22 30 M24 30 Q26 10 30 0 Q32 14 34 30 M36 30 Q40 14 44 8 Q43 20 46 30 M48 30 Q50 16 54 4 Q55 18 58 30Z' fill='%233f9a50'/%3E%3C/svg%3E") repeat-x 0 100% / auto 100%; }
@keyframes grass { 50% { transform: skewX(4deg); } }

/* particles */
.fx span.heart { animation: heart 1.7s ease-out forwards; }
@keyframes heart { 0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; } 15% { opacity: 1; transform: translate(0, -10px) scale(1.1) rotate(calc(var(--r, 0deg) / 3)); } 100% { transform: translate(var(--dx, 0px), -140px) scale(.8) rotate(var(--r, 0deg)); opacity: 0; } }
.fx span.leaf { animation: leaf 1.4s cubic-bezier(.2,.7,.4,1) forwards; font-size: 24px; }
@keyframes leaf { from { transform: translate(0, 0) rotate(0) scale(.5); opacity: 1; } to { transform: translate(var(--dx, 0px), var(--dy, -80px)) rotate(var(--r, 180deg)) scale(1); opacity: 0; } }
.fx span.zz { animation: zfloat 2.4s ease-out forwards; font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 6px #0006; }
.sunspot { position: absolute; bottom: 1%; width: 46%; height: 12%; transform: translateX(-50%); border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,236,150,.75), rgba(255,236,150,0) 70%); animation: fade .6s; }
.flycoin { position: fixed; z-index: 50; font-size: 22px; pointer-events: none; will-change: transform; }
.coins.bump { animation: coinbump .35s ease-out; } @keyframes coinbump { 50% { transform: scale(1.18); background: #4a382a; } }
.confetti { position: fixed; top: -12px; z-index: 60; width: 8px; height: 13px; border-radius: 2px; pointer-events: none; }
.lvlup { position: fixed; left: 50%; top: 30%; white-space: nowrap; z-index: 61; transform: translate(-50%, -50%); pointer-events: none; text-align: center;
  font: 800 30px/1.1 "Fredoka", sans-serif; color: #fff4cf; text-shadow: 0 3px 0 #b5700f, 0 8px 22px #0009; animation: lvl 2.4s ease-out forwards; }
.lvlup small { display: block; font-size: 15px; color: #fff; text-shadow: 0 2px 8px #000a; margin-top: 4px; }
@keyframes lvl { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }

/* stats: glossy bars, a gentle pulse when low, floating +N */
.bar i { background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }
.bar i.low { animation: lowpulse 1.2s ease-in-out infinite; } @keyframes lowpulse { 50% { filter: brightness(1.35); } }
.stat { position: relative; }
.stat em { position: absolute; right: 8px; top: -6px; font: 800 13px "Fredoka", sans-serif; font-style: normal; color: var(--good); pointer-events: none; animation: statfloat 1.3s ease-out forwards; }
.stat em.neg { color: var(--bad); }
@keyframes statfloat { from { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-16px); opacity: 0; } }
.stat.flash { animation: statflash .6s ease-out; } @keyframes statflash { 30% { background: #4a3a26; } }

/* buttons and sheets feel springier */
.dock button, .tabs button, .card, .btn { transition: transform .12s cubic-bezier(.3,1.6,.5,1), background .2s; }
.dock button:active, .tabs button:active, .card:active, .btn:active { transform: scale(.92); }
.dock button.pop span { animation: iconpop .45s cubic-bezier(.3,1.6,.5,1); } @keyframes iconpop { 40% { transform: scale(1.35) rotate(-8deg); } }
.dock button.ready { box-shadow: 0 0 0 2px var(--accent) inset; }
.panel { animation: up .38s cubic-bezier(.2,1.25,.4,1); } @keyframes up { from { transform: translateY(70px); opacity: .4; } }
.toast { animation: toastin .3s cubic-bezier(.2,1.3,.4,1); } @keyframes toastin { from { transform: translate(-50%, 20px); opacity: 0; } }
.row.rest { width: 100%; text-align: left; color: var(--ink); }
.row.rest:disabled { opacity: .5; }
.row.rest .ic { font-size: 30px; width: 40px; text-align: center; }
.row.rest .btn { padding: 7px 11px; }
.speech { transition: opacity .25s, transform .3s cubic-bezier(.2,1.5,.4,1); }
.need-bounce { animation: needb .5s ease-out; }
.bubble-need { animation: pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .beam, .beam i, .flies i, .grass, .sun::after, #glows i { animation: none !important; } }

/* ================= v3: scenes that line up with the furniture ================= */
/* eating and drinking: the bowl comes to the front, he crouches behind it and dips his head in */
.room.eating[data-eat="bowl"] #bowl, .room.eating[data-eat="water"] #water { z-index: 4; }
.cat .tongue { display: none; }
.do-eat .headlift { animation: eatdip .9s ease-in-out infinite; }
.do-drink .headlift { animation: eatdip .65s ease-in-out infinite; }
@keyframes eatdip { 0%, 100% { transform: translateY(62px); } 45%, 60% { transform: translateY(104px) rotate(-2deg); } }
.do-eat, .do-drink { --lid: -30px; }
.do-eat .mouth-open { display: inline; } .do-eat .mouth-flat, .do-eat .mouth-smile, .do-eat .mouth-sad { display: none; }
.do-drink .tongue { display: inline; transform-box: fill-box; transform-origin: 50% 0; animation: lap .32s ease-in-out infinite; }
.do-drink .mouth-flat, .do-drink .mouth-sad { display: none; } .do-drink .mouth-smile { display: inline; }
.do-lick .tongue { display: inline; transform-box: fill-box; transform-origin: 50% 0; animation: lap .3s ease-in-out infinite; }
.do-lick .mouth-smile { display: inline; } .do-lick .mouth-flat, .do-lick .mouth-sad, .do-lick .mouth-open { display: none; }
@keyframes lap { 50% { transform: scaleY(.45) translateY(-3px); } }
/* yawn, kneading, grooming */
.do-yawn { --lid: -16px; } .do-yawn .mouth-open { display: inline; transform-box: fill-box; transform-origin: 50% 0; animation: yawn 1.4s ease-in-out 1; }
.do-yawn .mouth-flat, .do-yawn .mouth-smile, .do-yawn .mouth-sad { display: none; }
.do-yawn:not(.pose-lie) .headlift { transform-box: fill-box; transform-origin: 50% 90%; animation: yawnhead 1.4s ease-in-out 1; }
@keyframes yawn { 0% { transform: scale(.4); } 40%, 70% { transform: scale(1.35, 1.6); } 100% { transform: scale(.5); } }
@keyframes yawnhead { 40%, 70% { transform: rotate(-5deg) translateY(-6px); } }
.do-knead .paw-l { animation: knead .4s ease-in-out infinite; } .do-knead .paw-r { animation: knead .4s .2s ease-in-out infinite; }
.do-knead .paw { transform-box: fill-box; transform-origin: 50% 100%; } .do-knead { --lid: -26px; }
@keyframes knead { 50% { transform: translateY(-12px) scaleY(1.1); } }
.do-groom .wave-paw { display: inline; transform-box: fill-box; transform-origin: 50% 100%; animation: groom .45s ease-in-out infinite alternate; }
@keyframes groom { from { transform: translate(-40px, -30px) rotate(-30deg); } to { transform: translate(-58px, -48px) rotate(-12deg); } }
.do-groom { --lid: -22px; } .do-groom .tongue { display: inline; } .do-groom .mouth-flat { display: none; } .do-groom .mouth-smile { display: inline; }
.do-groom:not(.pose-lie) .headlift { transform-box: fill-box; transform-origin: 50% 90%; animation: groomhead .9s ease-in-out infinite; }
@keyframes groomhead { 50% { transform: rotate(6deg); } }
/* bits that pop out of the bowl / litter box / fur */
.fx span.crumb { animation: crumb .8s ease-out forwards; }
@keyframes crumb { 0% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(calc(var(--dx) * .6), var(--dy)); } 100% { transform: translate(var(--dx), 30px); opacity: 0; } }
.fx span.treat { font-size: 34px; animation: treat .7s cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes treat { from { transform: translate(140px, -150px) rotate(-200deg) scale(.6); } to { transform: translate(0, 0) rotate(0) scale(1); } }
/* the yarn ball he chases */
.yarnball { position: absolute; bottom: 4%; font-size: 34px; z-index: 2; transform: translateX(-50%); transition: left .9s cubic-bezier(.2,.7,.3,1), opacity .5s; pointer-events: none; }
.yarnball.roll { animation: roll .9s cubic-bezier(.2,.7,.3,1); } .yarnball.gone { opacity: 0; }
@keyframes roll { from { rotate: 0deg; } to { rotate: var(--spin, 540deg); } }

/* ================= new mini-games ================= */
.field { position: relative; height: 300px; border-radius: 18px; margin: 10px 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.field.sky { background: linear-gradient(#8fd0ff, #dff3ff 70%, #7bc47f 70%); }
.field.road { height: 200px; background: linear-gradient(#8fd0ff 0 72%, #b98957 72%); }
.field .ent { position: absolute; transform: translate(-50%, -50%); font-size: 34px; line-height: 1; pointer-events: none; will-change: left, top; }
.field .me { font-size: 46px; }
.field .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 40px); animation: road .5s linear infinite; }
@keyframes road { to { background-position: -40px 0; } }
.puz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(100%, 270px); margin: 12px auto; }
.puz button { aspect-ratio: 1; border-radius: 14px; background: #fff4de; font-size: 40px; transition: transform .15s; }
.puz button.empty { background: transparent; box-shadow: inset 0 0 0 2px var(--card2); }
.puz button.ok { box-shadow: inset 0 0 0 3px var(--good); }
.oddgrid { display: grid; gap: 6px; width: min(100%, 300px); margin: 12px auto; }
.oddgrid button { aspect-ratio: 1; border-radius: 12px; background: var(--card2); font-size: 26px; padding: 0; }
.oddgrid button.bad { background: #8e3a33; }
.mines { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: min(100%, 300px); margin: 12px auto; }
.mines button { aspect-ratio: 1; border-radius: 8px; background: #6f98ba; font: 800 18px "Fredoka", sans-serif; color: #2b1a05; padding: 0; }
.mines button.open { background: #f1e6d0; } .mines button.boom { background: #ef6a5b; }
.mines button[data-n="1"] { color: #2f6fd6; } .mines button[data-n="2"] { color: #2e8b45; } .mines button[data-n="3"] { color: #c0392b; } .mines button[data-n="4"] { color: #6c3db3; }
.hilo { display: flex; justify-content: center; gap: 14px; margin: 14px 0; }
.hilo .pcard { width: 92px; height: 128px; border-radius: 14px; background: #fffaf2; color: #2d2119; display: grid; place-items: center; font: 800 44px "Fredoka", sans-serif; box-shadow: 0 6px 16px #0006; }
.hilo .pcard.flip { animation: flipin .45s ease-out; } @keyframes flipin { from { transform: rotateY(90deg); } }
.hilo .pcard.red { color: #c0392b; }
.toggle-on { background: var(--accent) !important; color: #2b1a05 !important; }

/* admin panel */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid3 .card { padding: 10px 4px; font-size: 13px; }
.adm-target { display: flex; gap: 8px; align-items: center; background: var(--card2); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.adm-who { flex: 1; min-width: 0; line-height: 1.35; }
.adm-who small { display: block; color: var(--muted); margin-top: 2px; }
.adm-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.adm-line span { width: 58px; font-size: 13px; }
.adm-target .btn { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.chip { border: 0; border-radius: 999px; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 700; background: var(--accent); color: #2a1d14; cursor: pointer; }
.chip:active { transform: scale(.92); }
.chip[data-adm="take"] { background: var(--bad); }
.adm-p { gap: 6px; }
.adm-p.dead { opacity: .7; }
.adm-p .btn { padding: 8px 10px; }

/* ---------- room decor (decor.js) ---------- */
.slot svg { width: 100%; height: auto; display: block; overflow: visible; }
.slot-pic svg.pic { filter: drop-shadow(0 3px 3px rgba(0,0,0,.18)); }
.sill { position: absolute; left: -9%; right: -9%; bottom: -5%; height: 7%; border-radius: 3px; background: linear-gradient(#a37646, #7a5230); box-shadow: 0 3px 4px rgba(0,0,0,.2); z-index: 1; }
.slot-plant { position: absolute; left: 50%; bottom: -2.5%; width: 30%; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.slot-plant svg .leaves { transform-box: fill-box; transform-origin: 50% 100%; animation: leafsway 6s ease-in-out infinite; }
@keyframes leafsway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.slot-toy { position: absolute; transform: translateX(-50%); pointer-events: none; z-index: 1; }
.slot-pic.pop-in { transform-origin: 50% 0; animation: picswing 1.1s ease-out; }
.slot-plant.pop-in svg { transform-origin: 50% 100%; animation: grow .8s cubic-bezier(.3,1.4,.5,1); }
.slot-toy.pop-in svg { animation: drop .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes picswing { 0% { transform: rotate(0) scale(.6); opacity: 0; } 25% { transform: rotate(7deg) scale(1); opacity: 1; } 45% { transform: rotate(-5deg); } 65% { transform: rotate(3deg); } 82% { transform: rotate(-1.5deg); } }
@keyframes grow { from { transform: scaleY(.2) scaleX(.6); opacity: 0; } }
@keyframes drop { 0% { transform: translateY(-70%); opacity: 0; } 60% { transform: translateY(4%) scaleY(.9); opacity: 1; } }
.rm-wall.wp-in { animation: wpin .7s ease-out; } @keyframes wpin { from { filter: brightness(1.5) saturate(.4); } }

/* wallpapers: later in the file than the rooms' own walls, so they win */
.rm-wall.wp-stripes { background: repeating-linear-gradient(90deg, #ead6b8 0 22px, #f4e6cf 22px 44px); }
.rm-wall.wp-dots { background: radial-gradient(circle, #e7a9a0 3px, transparent 3.6px) 0 0 / 28px 28px, radial-gradient(circle, #e7a9a0 3px, transparent 3.6px) 14px 14px / 28px 28px, #f7ead9; }
.rm-wall.wp-flowers { background: #f3ecdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='%23f1a0b0'%3E%3Ccircle cx='12' cy='8' r='3.2'/%3E%3Ccircle cx='16' cy='12' r='3.2'/%3E%3Ccircle cx='12' cy='16' r='3.2'/%3E%3Ccircle cx='8' cy='12' r='3.2'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23f6d34a'/%3E%3Cg fill='%2399c9e8'%3E%3Ccircle cx='36' cy='32' r='3.2'/%3E%3Ccircle cx='40' cy='36' r='3.2'/%3E%3Ccircle cx='36' cy='40' r='3.2'/%3E%3Ccircle cx='32' cy='36' r='3.2'/%3E%3C/g%3E%3Ccircle cx='36' cy='36' r='2.4' fill='%23fff6c8'/%3E%3Cpath d='M26 18 q4 -6 8 -2' stroke='%2385b97a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.rm-wall.wp-stars { background: #2f3d6e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23f6d98a'%3E%3Cpath d='M14 8 l2 5 5 .5 -4 3.4 1.3 5 -4.3-2.8 -4.3 2.8 1.3-5 -4-3.4 5-.5z'/%3E%3Ccircle cx='44' cy='14' r='1.6'/%3E%3Ccircle cx='30' cy='38' r='1.2'/%3E%3Cpath d='M46 40 l1.4 3.4 3.6.4 -2.8 2.4 .9 3.5 -3.1-2 -3.1 2 .9-3.5 -2.8-2.4 3.6-.4z'/%3E%3Ccircle cx='8' cy='48' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.rm-wall.wp-check { background: repeating-linear-gradient(0deg, rgba(201,82,72,.18) 0 14px, transparent 14px 40px), repeating-linear-gradient(90deg, rgba(201,82,72,.18) 0 14px, transparent 14px 40px), #f5e6d3; }
.rm-wall.wp-mint { background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 3px, transparent 3px 30px), linear-gradient(#d5efe4, #c2e5d6); }
.rm-wall.wp-brick { background: #c97b5a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M0 0 H64 M0 16 H64 M0 32 H64 M16 0 V16 M48 0 V16 M0 16 V32 M32 16 V32' stroke='%23e8c9b0' stroke-width='3'/%3E%3C/svg%3E"); }
.rm-wall.wp-sky { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Cellipse cx='30' cy='24' rx='18' ry='8'/%3E%3Ccircle cx='24' cy='20' r='8'/%3E%3Ccircle cx='36' cy='18' r='10'/%3E%3Cellipse cx='92' cy='66' rx='16' ry='7'/%3E%3Ccircle cx='96' cy='60' r='9'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#a9d8f6, #dcf0fc); }
.rm-kitchen .rm-wall[class*="wp-"]::after { opacity: .55; }

/* decor shop */
.room-preview { position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden; margin: 4px 0 10px; box-shadow: inset 0 0 0 2px var(--line); background: #1f1713; }
.dtabs { display: flex; gap: 5px; margin-bottom: 8px; } .dtabs button { flex: 1 1 auto; white-space: nowrap; font-size: 12px; min-width: 0; }
.dtabs .chip { background: var(--card2); color: var(--ink); padding: 8px 6px; } .dtabs .chip.cur { background: var(--accent); color: #2a1d14; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ditem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; background: var(--card2); font: inherit; color: inherit; font-size: 12px; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.ditem:active { transform: scale(.95); }
.ditem .art { width: 64px; height: 64px; display: grid; place-items: center; }
.ditem .art svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.ditem .art.wp { border-radius: 10px; width: 64px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.ditem small { color: var(--muted); }
.ditem.on { box-shadow: inset 0 0 0 3px var(--accent); }
.ditem.on small { color: var(--accent); font-weight: 700; }

#admNews { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 10px; font: inherit; font-size: 14px; background: var(--card); color: var(--ink); resize: vertical; }
.maint { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--bg); text-align: center; animation: fade .3s; }
.maint b { font-size: 64px; display: block; animation: bob 2s ease-in-out infinite; }
.maint p { font-size: 18px; margin: 12px 0 18px; }

/* garden & bath decor */
.slot-tree { position: absolute; left: 60%; top: 46%; width: 32%; pointer-events: none; transform-origin: 50% 0; animation: hangsway 4.5s ease-in-out infinite; }
@keyframes hangsway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.slot-yard { pointer-events: none; z-index: 1; }
.slot-tree.pop-in svg { animation: drop .7s cubic-bezier(.3,1.4,.5,1); }
.slot-yard.pop-in svg { animation: grow .7s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 100%; }
.glowpulse { animation: glowpulse 2.6s ease-in-out infinite; } @keyframes glowpulse { 50% { opacity: .38; } }
.rm-bath .slot-plant { transform: translateX(-50%); }
.founder .hearts path { transform-box: fill-box; transform-origin: center; animation: hatheart 2.4s ease-out infinite; }
.founder .hearts path:nth-child(2) { animation-delay: -.8s; } .founder .hearts path:nth-child(3) { animation-delay: -1.6s; }
@keyframes hatheart { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px) scale(1.1); } }

/* shop tabs, hats grid */
.shoptabs { position: sticky; top: -2px; z-index: 3; padding: 4px 0 6px; background: var(--card); }
.shoptabs .chip { font-size: 13px; padding: 9px 6px; }
.row.promo { width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; background: linear-gradient(135deg, rgba(242,169,59,.28), rgba(242,169,59,.08)); box-shadow: inset 0 0 0 2px rgba(242,169,59,.5); }
.row.promo > span { font-size: 30px; }
.dgrid.hats { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.ditem .art.hatcat { width: 84px; height: 86px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.12), transparent 70%); }
.ditem .art.hatcat svg { width: 84px; height: 86px; }
.ditem.limited { background: linear-gradient(160deg, #5a4318, #3a2b20 70%); box-shadow: inset 0 0 0 2px #f2c230; }
.ltag { position: absolute; top: 6px; right: 6px; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 8px; background: #f2c230; color: #2a1d14; }
.rooms5 .chip { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; padding: 6px 2px; }
.rooms5 .chip span { font-size: 10px; }

/* Котопрыг */
.jumpbox { position: relative; margin: 8px auto; width: min(100%, 360px); height: min(62vh, 470px); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.jumpbox canvas { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.card.new::after { content: "NEW"; position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 900; padding: 2px 5px; border-radius: 6px; background: var(--bad); color: #fff; }
.card.new { position: relative; }

/* game records */
.rchips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rchips::-webkit-scrollbar { display: none; }
.rchips .chip { flex: none; background: var(--card2); color: var(--ink); padding: 8px 10px; white-space: nowrap; }
.rchips .chip.cur { background: var(--accent); color: #2a1d14; }

/* visiting other cats */
.vfind { display: flex; gap: 8px; margin-bottom: 8px; }
.vfind input { flex: 1; min-width: 0; border: 0; border-radius: 12px; padding: 10px 12px; font: inherit; background: var(--card2); color: var(--ink); }
.vchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.vchips:empty { display: none; }
.vchips small { color: var(--muted); width: 100%; }
.vchips .chip { background: var(--card2); color: var(--ink); }
.vcard { margin-top: 12px; background: var(--card); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: 38% 1fr; gap: 6px 10px; align-items: center; }
.vpic { transition: transform .3s; } .vpic.happy { transform: scale(1.08) rotate(-3deg); }
.vhead b { font-size: 18px; } .vhead small { display: block; color: var(--muted); margin-top: 2px; }
.vtag { color: var(--accent); font-weight: 700; }
.vstats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.vstat { display: grid; grid-template-columns: 1fr auto; font-size: 13px; } .vstat .bar { grid-column: 1 / -1; margin-top: 3px; }
.vhelp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.vhelp .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.vhelp .btn small { font-size: 11px; font-weight: 600; opacity: .8; }
.vhelp .btn.off { opacity: .45; }
.vgift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.vgift span { flex: 1 0 100%; font-size: 13px; color: var(--muted); }
.vgift .chip:disabled { opacity: .4; }
.note.bad { color: var(--bad); }