@charset "UTF-8";

:root {
  --ink: #4b4a40;
  --muted: #858173;
  --paper: #fffdf5;
  --paper-deep: #f3ead7;
  --green: #78956f;
  --green-dark: #526b50;
  --green-light: #dbe6cf;
  --apricot: #d98e68;
  --red: #bd6658;
  --gold: #d9ad51;
  --line: rgba(76, 70, 58, .13);
  --shadow: 0 16px 40px rgba(73, 63, 47, .18);
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #dfe7d7;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body {
  background:
    radial-gradient(circle at 16% 5%, rgba(255,255,255,.65), transparent 28%),
    linear-gradient(145deg, #e8eedf, #cfdcc8);
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid rgba(189,102,88,.45); outline-offset: 2px; }

.app {
  position: relative;
  width: min(640px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #efe8d8;
  box-shadow: 0 0 50px rgba(60, 71, 55, .2);
}

.topbar {
  position: fixed;
  z-index: 300;
  top: 0;
  left: 50%;
  display: flex;
  width: min(640px, 100%);
  height: calc(66px + env(safe-area-inset-top));
  align-items: flex-end;
  justify-content: space-between;
  padding: env(safe-area-inset-top) 14px 9px;
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(80,73,59,.12);
  background: rgba(255,253,245,.93);
  box-shadow: 0 4px 18px rgba(74,65,52,.09);
  backdrop-filter: blur(16px);
}
.title-lockup { display: flex; align-items: center; gap: 8px; }
.title-lockup strong { display: block; font-size: 19px; letter-spacing: .06em; }
.title-lockup small { display: block; margin-top: -1px; color: var(--muted); font-size: 9px; letter-spacing: .2em; }
.title-paw { position: relative; width: 29px; height: 29px; border-radius: 50% 50% 47% 47%; color: transparent; background: var(--green); transform: rotate(-8deg); }
.title-paw::before { content: ""; position: absolute; left: 1px; top: -5px; width: 9px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 9px -4px 0 -1px var(--green), 18px 0 0 -1px var(--green); }
.paper-button, .fish-wallet { min-height: 42px; border: 1px solid var(--line); border-radius: 15px; background: #fffaf0; box-shadow: 0 4px 10px rgba(76,67,53,.08); }
.sound-button { width: 42px; cursor: pointer; font-size: 18px; font-weight: 800; }
.sound-button.is-muted { color: #aaa394; }
.fish-wallet { position: relative; display: flex; min-width: 74px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; cursor: pointer; font-family: ui-rounded, system-ui, sans-serif; }
.fish-icon { position: relative; width: 22px; height: 11px; border-radius: 50% 60% 60% 50%; background: var(--gold); transform: rotate(-4deg); }
.fish-icon::before { content: ""; position: absolute; left: -7px; top: 1px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid var(--gold); }
.fish-icon::after { content: ""; position: absolute; right: 4px; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: #6d5936; }
.gift-badge { position: absolute; right: -2px; top: -3px; display: none; width: 13px; height: 13px; border: 2px solid white; border-radius: 50%; background: var(--red); }
.gift-badge.is-visible { display: block; animation: bob .9s ease-in-out infinite alternate; }

.view { display: none; min-height: 100vh; padding-top: calc(66px + env(safe-area-inset-top)); padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
.view.is-active { display: block; }
.scroll-view { height: 100vh; overflow-y: auto; background: #eee5d2; }

.yard-shell { padding: 10px 10px 8px; }
.yard {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 9 / 13.25;
  min-height: 590px;
  overflow: hidden;
  border: 5px solid #fbf5e8;
  border-radius: 8px 8px 28px 28px;
  background: #bdcf9c;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(80,73,54,.1);
}
.yard::after { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); pointer-events: none; mix-blend-mode: multiply; }
.sky-glow { position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 80% 9%, rgba(255,247,190,.9), transparent 26%); }
.house-wall { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 31%; border-bottom: 6px solid #9b755a; background: linear-gradient(96deg, #e8d8bd, #f7eedb 60%, #e1cfb1); }
.house-wall::before { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(121,102,74,.18) 18.5% 19%); }
.round-window { position: absolute; top: 16%; left: 10%; width: 28%; aspect-ratio: 1; overflow: hidden; border: 8px solid #8b674f; border-radius: 50%; background: #bcd0c2; box-shadow: inset 0 0 0 3px #f2e8d2, 0 6px 14px rgba(70,52,39,.16); }
.round-window::before, .round-window::after { content: ""; position: absolute; background: #8b674f; }
.round-window::before { left: 48%; top: 0; width: 5%; height: 100%; }
.round-window::after { left: 0; top: 48%; width: 100%; height: 5%; }
.round-window span { position: absolute; left: 12%; bottom: -2%; width: 32%; height: 42%; border-radius: 50% 50% 4px 4px; background: #7e9877; box-shadow: 28px -3px 0 -8px #9bb28c; }
.hanging-chime { position: absolute; right: 16%; top: 14%; width: 30px; height: 68px; }
.hanging-chime::before { content: ""; position: absolute; left: 14px; width: 2px; height: 28px; background: #7e6f5d; }
.hanging-chime i { position: absolute; top: 24px; left: 3px; width: 27px; height: 24px; border: 2px solid #8ca8a0; border-radius: 50% 50% 42% 42%; background: rgba(207,232,225,.7); box-shadow: inset 0 -6px 0 rgba(89,130,123,.11); }
.hanging-chime b { position: absolute; top: 49px; left: 11px; width: 12px; height: 20px; background: #c96d5b; clip-path: polygon(20% 0,100% 10%,76% 100%,0 88%); }
.veranda { position: absolute; z-index: 2; left: 0; right: 0; top: 27%; height: 21%; border-bottom: 7px solid #805e48; background: repeating-linear-gradient(90deg, #ba8a68 0 15.8%, #8d644c 16% 16.8%, #c1926d 17% 32%); box-shadow: 0 7px 13px rgba(74,55,39,.18); transform: perspective(440px) rotateX(4deg); transform-origin: bottom; }
.veranda-line { position: absolute; left: 0; right: 0; height: 3px; background: rgba(82,58,43,.36); }.veranda-line.one { top: 34%; }.veranda-line.two { top: 68%; }
.garden-ground { position: absolute; z-index: 0; inset: 44% 0 0; background: radial-gradient(ellipse at 20% 30%, rgba(216,222,161,.62), transparent 30%), repeating-linear-gradient(104deg, transparent 0 8%, rgba(75,104,66,.06) 8.3% 8.7%), #aabe86; }
.maple { position: absolute; z-index: 4; top: 34%; right: -3%; width: 28%; height: 33%; pointer-events: none; }
.maple b { position: absolute; left: 52%; top: 40%; width: 13%; height: 60%; border-radius: 60% 40% 20% 20%; background: #806047; transform: rotate(5deg); }
.maple i { position: absolute; width: 58%; height: 44%; border-radius: 52% 48% 55% 45%; background: #7d9d64; box-shadow: inset -8px -8px 0 rgba(61,94,57,.13); }
.maple i:nth-child(1) { left: 9%; top: 17%; }.maple i:nth-child(2) { left: 39%; top: 4%; transform: rotate(24deg); background:#91aa71; }.maple i:nth-child(3) { left: 42%; top: 29%; transform: rotate(-18deg); background:#6f8f5d; }
.hydrangea { position: absolute; z-index: 4; left: -1%; bottom: 12%; width: 24%; height: 22%; pointer-events: none; }
.hydrangea b { position: absolute; left: 43%; top: 38%; width: 11%; height: 61%; background: #537557; }
.hydrangea i { position: absolute; width: 54%; height: 50%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #cad5df 0 7%, transparent 8%), radial-gradient(circle at 60% 60%, #9fb5cf 0 9%, transparent 10%), #aabdd4; box-shadow: 20px 8px 0 -8px #779d72; }
.hydrangea i:nth-child(2) { left: 39%; top: 17%; transform: scale(.9); }.hydrangea i:nth-child(3) { left: 12%; top: 44%; transform: scale(.8); }
.stepping-stones { position: absolute; z-index: 1; left: 25%; right: 20%; bottom: 4%; height: 21%; pointer-events: none; }
.stepping-stones i { position: absolute; width: 21%; height: 30%; border-radius: 50%; background: #c8c0a6; box-shadow: inset 3px 4px 0 rgba(255,255,255,.25), 0 3px 5px rgba(71,71,53,.12); transform: rotate(-6deg); }
.stepping-stones i:nth-child(1){left:0;bottom:0}.stepping-stones i:nth-child(2){left:26%;bottom:22%;transform:rotate(8deg)}.stepping-stones i:nth-child(3){left:54%;bottom:45%;transform:rotate(-5deg)}.stepping-stones i:nth-child(4){left:79%;bottom:68%;transform:rotate(6deg)}

.toy-slot {
  position: absolute;
  z-index: 6;
  display: grid;
  width: 19%;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 2px dashed rgba(76,84,61,.4);
  border-radius: 50%;
  background: rgba(255,253,226,.25);
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.toy-slot::after { content: "+"; color: rgba(70,84,58,.48); font-family: system-ui,sans-serif; font-size: 24px; font-weight: 300; }
.toy-slot.has-toy { border-color: transparent; background: transparent; }
.toy-slot.has-toy::after { display: none; }
.toy-slot:active { transform: scale(.95); }
.toy-slot.slot-porch { left: 11%; top: 33%; }.toy-slot.slot-deck { left: 44%; top: 31%; }.toy-slot.slot-lawn { left: 18%; top: 54%; }.toy-slot.slot-stone { left: 48%; top: 55%; }.toy-slot.slot-tree { right: 7%; top: 52%; }

.food-place { position: absolute; z-index: 7; left: 38%; top: 70%; display: grid; width: 23%; aspect-ratio: 1.1; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.food-place::before { content: ""; position: absolute; inset: 28% 8% 8%; border-radius: 50%; background: #d8ccb0; box-shadow: inset 0 -6px 0 #b7aa8f, 0 5px 8px rgba(73,64,48,.16); }
.food-place small { position: absolute; bottom: -2px; padding: 3px 8px; border-radius: 99px; background: rgba(255,252,237,.88); color: #706b5d; font-size: 9px; font-weight: 700; }
.food-art { position: relative; z-index: 2; display: block; width: 64%; aspect-ratio: 1.5; }
.food-place.is-empty .food-art::before { content: "+"; position: absolute; inset: 0; display: grid; place-items:center; color:#9a927e; font-family:system-ui,sans-serif;font-size:28px; }

.toy-art { position: relative; display: block; width: 78%; height: 78%; filter: drop-shadow(0 5px 3px rgba(57,50,40,.16)); }
.toy-art.toy-yarn::before { content:""; position:absolute; inset:15%; border-radius:50%; background: repeating-radial-gradient(ellipse at 35% 40%,#c95f57 0 3px,#e28a76 4px 7px); box-shadow: inset -7px -8px 0 rgba(122,50,45,.13); }
.toy-art.toy-yarn::after { content:""; position:absolute; left:70%; top:62%; width:38%; height:25%; border-bottom:3px solid #c45b55; border-radius:50%; transform:rotate(22deg); }
.toy-art.toy-cushion::before { content:"";position:absolute;inset:18% 5%;border-radius:48%;background:#e3b35f;box-shadow:inset 0 -9px 0 rgba(152,105,39,.14);transform:rotate(-5deg)}
.toy-art.toy-box::before { content:"";position:absolute;inset:16% 8% 8%;background:#c69a68;border:3px solid #8e6744;clip-path:polygon(7% 16%,86% 4%,100% 84%,12% 100%)}
.toy-art.toy-tunnel::before { content:"";position:absolute;left:3%;right:3%;top:28%;bottom:14%;border-radius:50% 50% 16% 16%;background:#6fa2ad;box-shadow:inset 0 -8px 0 rgba(55,108,119,.2)}
.toy-art.toy-tunnel::after {content:"";position:absolute;right:8%;top:37%;width:38%;height:38%;border-radius:50%;background:#365d67;box-shadow:inset 5px 2px 0 rgba(255,255,255,.1)}
.toy-art.toy-scratcher::before {content:"";position:absolute;left:41%;top:12%;width:18%;height:67%;border-radius:9px;background:repeating-linear-gradient(#b58c59 0 4px,#d2aa71 5px 8px)}
.toy-art.toy-scratcher::after {content:"";position:absolute;left:17%;right:17%;bottom:4%;height:22%;border-radius:50%;background:#8f765a}
.toy-art.toy-butterfly::before {content:"";position:absolute;left:17%;top:14%;width:50%;height:44%;background:#d9a34f;clip-path:polygon(49% 50%,0 10%,16% 84%,50% 58%,85% 92%,100% 17%)}
.toy-art.toy-butterfly::after {content:"";position:absolute;left:59%;top:47%;width:4px;height:52%;background:#6e5b45;transform:rotate(-22deg);transform-origin:top}
.toy-art.toy-castle::before {content:"";position:absolute;inset:11% 7% 5%;background:#b88358;border:3px solid #79573f;clip-path:polygon(0 18%,16% 18%,16% 0,32% 0,32% 18%,68% 18%,68% 0,84% 0,84% 18%,100% 18%,100% 100%,0 100%)}
.toy-art.toy-basket::before {content:"";position:absolute;left:8%;right:8%;top:31%;bottom:7%;border-radius:13px 13px 45% 45%;background:repeating-linear-gradient(15deg,#aa8155 0 4px,#d1a875 5px 9px);border:3px solid #765b41}
.toy-art.toy-basket::after {content:"";position:absolute;left:25%;right:25%;top:10%;height:43%;border:4px solid #8d6744;border-bottom:0;border-radius:50% 50% 0 0}

.visitor { position: absolute; z-index: 12; display: grid; width: 19%; aspect-ratio: .86; place-items: center; border: 0; background: transparent; cursor: pointer; animation: cat-arrive .65s cubic-bezier(.2,.8,.2,1.2); }
.visitor.slot-porch { left: 11%; top: 29%; }.visitor.slot-deck { left: 44%; top: 27%; }.visitor.slot-lawn { left: 18%; top: 50%; }.visitor.slot-stone { left: 48%; top: 51%; }.visitor.slot-tree { right: 7%; top: 48%; }
.cat-sprite { --fur:#e8d5b5; --mark:#b7794b; position: relative; display:block; width:70%; height:78%; filter:drop-shadow(0 5px 4px rgba(58,53,43,.16)); animation:cat-breathe 2.3s ease-in-out infinite; }
.cat-sprite .body {position:absolute;left:12%;right:8%;bottom:3%;height:57%;border:3px solid #625c50;border-radius:50% 50% 40% 44%;background:var(--fur)}
.cat-sprite .head {position:absolute;left:14%;top:3%;width:72%;aspect-ratio:1;border:3px solid #625c50;border-radius:46% 46% 50% 50%;background:var(--fur)}
.cat-sprite .head::before,.cat-sprite .head::after{content:"";position:absolute;top:-18%;width:37%;height:43%;background:var(--fur);border:3px solid #625c50;z-index:-1;clip-path:polygon(50% 0,100% 100%,0 89%)}.cat-sprite .head::before{left:0;transform:rotate(-9deg)}.cat-sprite .head::after{right:0;transform:rotate(9deg)}
.cat-sprite .face {position:absolute;left:27%;top:40%;width:46%;height:25%;border-top:4px dotted #554f46;border-radius:50%}
.cat-sprite .face::before {content:"";position:absolute;left:45%;top:18%;width:6px;height:5px;border-radius:50%;background:#8f6257;box-shadow:-12px -9px 0 -1px #514c45,12px -9px 0 -1px #514c45}
.cat-sprite .tail {position:absolute;right:-5%;bottom:8%;width:38%;height:47%;border:9px solid var(--fur);border-left:0;border-radius:0 70% 70% 0;filter:drop-shadow(2px 0 0 #625c50);transform:rotate(12deg)}
.cat-sprite .patch {position:absolute;z-index:2;left:22%;top:9%;width:35%;height:31%;border-radius:50% 35% 60% 22%;background:var(--mark);opacity:var(--mark-opacity,1)}
.cat-sprite .stripe {position:absolute;z-index:2;left:39%;top:4%;width:9%;height:26%;border-radius:20px;background:var(--mark);box-shadow:13px 5px 0 -2px var(--mark),-13px 5px 0 -2px var(--mark);opacity:var(--stripe-opacity,0)}
.cat-sprite.cat-black {--fur:#4c514f;--mark:#333735}.cat-sprite.cat-gray{--fur:#b8bab4;--mark:#777d7b;--stripe-opacity:1;--mark-opacity:0}.cat-sprite.cat-orange{--fur:#e9bd7a;--mark:#c47743;--stripe-opacity:1;--mark-opacity:0}.cat-sprite.cat-calico{--fur:#f0dfc4;--mark:#b76845}.cat-sprite.cat-tuxedo{--fur:#424846;--mark:#f2ead8}.cat-sprite.cat-white{--fur:#f1eadc;--mark:#d9cfc0;--mark-opacity:0}.cat-sprite.cat-brown{--fur:#b39877;--mark:#6e5847;--stripe-opacity:1;--mark-opacity:0}.cat-sprite.cat-silver{--fur:#d5d8d2;--mark:#8d9795;--patch-opacity:0}.cat-sprite.cat-tortie{--fur:#6c594d;--mark:#c78355}.cat-sprite.cat-siamese{--fur:#e7d5b9;--mark:#625852}.cat-sprite.cat-rare::after{content:"";position:absolute;z-index:4;left:17%;top:-7%;width:74%;height:28%;border-radius:50%;background:#b85d4e;box-shadow:inset 0 -5px 0 rgba(91,41,34,.2)}
.visitor-name {position:absolute;left:50%;bottom:-13px;min-width:max-content;padding:3px 7px;border:1px solid rgba(83,73,57,.12);border-radius:99px;background:rgba(255,252,236,.9);font-size:9px;font-weight:700;transform:translateX(-50%)}

.wait-button { position:absolute;z-index:15;right:4%;bottom:4%;display:flex;min-width:127px;min-height:49px;align-items:center;gap:8px;padding:7px 10px;border:2px solid rgba(255,255,255,.7);border-radius:17px;background:rgba(82,107,80,.91);color:white;box-shadow:0 7px 16px rgba(54,70,52,.25);cursor:pointer;text-align:left; }
.wait-button b,.wait-button small{display:block}.wait-button b{font-size:12px}.wait-button small{margin-top:1px;font-size:8px;opacity:.78}.wait-sun{position:relative;display:block;width:30px;height:30px;border-radius:50%;background:#f2d879;box-shadow:0 0 0 5px rgba(242,216,121,.14)}
.yard-message{position:absolute;z-index:14;left:6%;right:6%;bottom:12%;padding:8px 11px;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(255,252,236,.78);box-shadow:0 4px 13px rgba(71,64,48,.1);backdrop-filter:blur(8px);color:#656354;font-size:10px;font-weight:700;text-align:center;pointer-events:none}

.paper-page { min-height: calc(100vh - 140px); padding: 20px 16px 40px; background: radial-gradient(circle at 8% 2%,rgba(255,255,255,.8),transparent 25%), repeating-linear-gradient(0deg,transparent 0 31px,rgba(121,104,75,.055) 31px 32px), #f8f2e4; }
.page-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:5px 4px 16px;border-bottom:2px solid rgba(93,80,59,.16)}
.page-heading h1{margin:0;font-size:24px;letter-spacing:.08em}.page-heading p{margin:3px 0 0;color:var(--muted);font-size:11px}.stamp{display:grid;width:54px;height:54px;place-items:center;border:3px double var(--red);border-radius:10px;color:var(--red);font-size:14px;font-weight:800;transform:rotate(-4deg)}
.shop-tabs{display:grid;grid-template-columns:1fr 1fr;margin:0 0 17px;padding:4px;border-radius:16px;background:#e5ddca}.shop-tabs button{min-height:43px;border:0;border-radius:12px;background:transparent;color:#817866;cursor:pointer;font-weight:700}.shop-tabs button.is-active{background:#fffaf0;color:var(--ink);box-shadow:0 3px 9px rgba(72,62,48,.12)}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.shop-card{position:relative;min-height:188px;padding:12px;border:1px solid rgba(92,77,57,.13);border-radius:18px;background:#fffaf0;box-shadow:0 7px 18px rgba(75,63,46,.09)}.shop-art{display:grid;height:90px;place-items:center;border-radius:14px;background:#eef0dc}.shop-art .toy-art{width:76px;height:76px}.shop-card h3{margin:9px 0 2px;font-size:14px}.shop-card p{margin:0;color:var(--muted);font-size:9px;line-height:1.5}.buy-button{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;min-height:35px;padding:0 10px;border:0;border-radius:11px;background:var(--green);color:white;cursor:pointer;font-family:system-ui,sans-serif;font-size:11px;font-weight:800}.buy-button[disabled]{background:#d5d0c3;color:#8f8879;cursor:default}.owned-ribbon{position:absolute;right:9px;top:9px;padding:3px 7px;border-radius:99px;background:#76986f;color:white;font-size:8px;font-weight:700}

.book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.book-card{position:relative;min-height:145px;padding:10px 7px;border:1px solid rgba(93,78,57,.13);border-radius:15px;background:#fffaf0;text-align:center}.book-card .cat-sprite{width:64px;height:76px;margin:0 auto}.book-card h3{margin:5px 0 1px;font-size:12px}.book-card p{margin:0;color:var(--muted);font-family:system-ui,sans-serif;font-size:8px}.book-card.is-unknown{background:#e4ded0}.book-card.is-unknown .cat-sprite{filter:grayscale(1) brightness(.55) opacity(.3)}.book-card.is-unknown h3{color:#aaa293}.rare-mark{position:absolute;right:6px;top:6px;color:var(--gold);font-size:13px}.memento-dot{position:absolute;left:7px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px white}
.section-title{margin:23px 2px 10px;font-size:15px;letter-spacing:.12em}.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.photo-card{position:relative;padding:8px 8px 25px;background:white;box-shadow:0 6px 15px rgba(61,53,42,.13);transform:rotate(var(--tilt,-1deg))}.photo-scene{display:grid;height:145px;place-items:center;background:linear-gradient(#d8e4ca,#b4ca92 66%,#c49a71 67%)}.photo-scene .cat-sprite{width:82px;height:98px}.photo-card small{position:absolute;left:12px;bottom:6px;color:#777164;font-size:10px}.empty-album{grid-column:1/-1;padding:38px 15px;border:2px dashed #cec5b2;border-radius:17px;color:#999180;text-align:center;font-size:12px}.memento-list{display:grid;gap:10px}.memento-card{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid var(--line);border-radius:15px;background:#fffaf0}.memento-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#e6dec9}.memento-icon::before{content:"";width:22px;height:22px;border:3px solid #8d7457;border-radius:50% 45% 55% 40%;transform:rotate(-12deg)}.memento-card h3{margin:0;font-size:13px}.memento-card p{margin:2px 0 0;color:var(--muted);font-size:9px}.memento-card.is-locked{filter:grayscale(1);opacity:.45}

.bottom-nav{position:fixed;z-index:300;left:50%;bottom:0;display:grid;width:min(640px,100%);height:calc(70px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,1fr);padding:6px 8px env(safe-area-inset-bottom);transform:translateX(-50%);border-top:1px solid rgba(75,68,54,.13);background:rgba(255,253,245,.95);box-shadow:0 -5px 20px rgba(70,61,48,.1);backdrop-filter:blur(16px)}
.bottom-nav button{display:grid;place-items:center;gap:2px;border:0;border-radius:14px;background:transparent;color:#9b9587;cursor:pointer;font-size:9px}.bottom-nav button.is-active{color:var(--green-dark);background:#e5eddb}.bottom-nav span{position:relative;display:block;width:25px;height:25px}.nav-yard::before{content:"";position:absolute;left:2px;right:2px;bottom:3px;height:14px;border:2px solid currentColor;border-radius:3px}.nav-yard::after{content:"";position:absolute;left:3px;top:1px;width:17px;height:17px;border-left:3px solid currentColor;border-top:3px solid currentColor;transform:rotate(45deg)}.nav-shop::before{content:"";position:absolute;inset:8px 2px 2px;border:2px solid currentColor}.nav-shop::after{content:"";position:absolute;left:1px;right:1px;top:2px;height:9px;border:2px solid currentColor;border-radius:5px 5px 2px 2px}.nav-book::before{content:"";position:absolute;inset:2px;border:2px solid currentColor;border-radius:3px;box-shadow:inset 9px 0 0 transparent}.nav-book::after{content:"";position:absolute;left:11px;top:3px;bottom:3px;border-left:2px solid currentColor}.nav-album::before{content:"";position:absolute;inset:4px 2px 2px;border:2px solid currentColor;border-radius:3px;transform:rotate(-4deg)}.nav-album::after{content:"";position:absolute;left:8px;top:0;width:12px;height:14px;border:2px solid currentColor;border-radius:2px;transform:rotate(9deg)}

.scrim{position:fixed;z-index:500;inset:0;visibility:hidden;opacity:0;background:rgba(56,53,44,.42);backdrop-filter:blur(3px);transition:.25s}.scrim.is-visible{visibility:visible;opacity:1}.sheet{position:fixed;z-index:510;left:50%;bottom:0;visibility:hidden;pointer-events:none;width:min(640px,100%);max-height:77vh;overflow:hidden;padding:12px 14px calc(18px + env(safe-area-inset-bottom));border-radius:25px 25px 0 0;background:#fbf5e8;box-shadow:0 -18px 50px rgba(48,44,36,.23);transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s}.sheet.is-visible{visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.sheet-handle{display:block;width:52px;height:6px;margin:0 auto 10px;border:0;border-radius:99px;background:#d4cbb9;cursor:pointer}.sheet header{padding:0 5px 10px}.sheet header h2{margin:1px 0 0;font-size:23px}.sheet-kicker{color:var(--red);font-size:9px;font-weight:800;letter-spacing:.18em}.sheet-content{max-height:calc(77vh - 95px);overflow-y:auto;padding:4px 1px}.choice-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.choice-card{position:relative;min-height:121px;padding:8px 5px;border:1px solid var(--line);border-radius:15px;background:#fffdf6;cursor:pointer;text-align:center}.choice-card.is-active{border-color:var(--green);box-shadow:0 0 0 3px rgba(120,149,111,.15)}.choice-card .toy-art{width:66px;height:66px;margin:0 auto}.choice-card h3{margin:5px 0 1px;font-size:10px}.choice-card small{color:var(--muted);font-size:8px}.food-choice-art{position:relative;width:68px;height:58px;margin:5px auto}.food-choice-art::before{content:"";position:absolute;left:5px;right:5px;bottom:3px;height:32px;border-radius:50%;background:#d6c5a3;box-shadow:inset 0 -7px 0 #af9b78}.food-choice-art::after{content:"";position:absolute;left:15px;right:15px;bottom:16px;height:17px;border-radius:50%;background:var(--food,#a87543);box-shadow:inset 0 5px 0 rgba(255,255,255,.15)}.gift-list{display:grid;gap:9px}.gift-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fffdf6}.gift-row .cat-sprite{width:45px;height:55px;flex:0 0 auto}.gift-row p{flex:1;margin:0;font-size:11px}.gift-row strong{font-family:system-ui,sans-serif}.collect-button{display:block;width:100%;min-height:48px;margin-top:12px;border:0;border-radius:15px;background:var(--green);color:white;cursor:pointer;font-weight:800}

.intro{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:18px;visibility:hidden;opacity:0;background:rgba(68,69,57,.52);backdrop-filter:blur(10px);transition:.28s}.intro.is-visible{visibility:visible;opacity:1}.intro-card{width:min(410px,100%);overflow:hidden;padding:0 28px 27px;border:1px solid rgba(255,255,255,.75);border-radius:25px;background:#fffaf0;box-shadow:0 25px 70px rgba(44,43,34,.3);text-align:center}.intro-art{position:relative;height:180px;margin:0 -28px 22px;background:linear-gradient(#e9dac0 0 45%,#b98765 46% 58%,#aabe86 59%);overflow:hidden}.intro-art::before{content:"";position:absolute;left:12%;top:18%;width:90px;height:90px;border:8px solid #8b674f;border-radius:50%;background:#cbdacb}.intro-art::after{content:"";position:absolute;right:8%;top:25%;width:120px;height:120px;border-radius:50%;background:#799963;box-shadow:-35px 10px 0 -12px #8faa72,14px 38px 0 -15px #688759}.intro-art .cat-sprite{position:absolute;z-index:2;left:50%;bottom:3px;width:95px;height:112px;transform:translateX(-50%)}.intro-kicker{display:block;color:var(--red);font-size:10px;font-weight:800;letter-spacing:.22em}.intro-card h1{margin:8px 0 12px;font-size:34px;line-height:1.3;letter-spacing:.05em}.intro-card p{margin:0 0 20px;color:var(--muted);font-size:12px;line-height:1.8}.start-button{width:100%;min-height:50px;border:0;border-radius:16px;background:var(--green);color:white;box-shadow:inset 0 -4px 0 rgba(52,73,50,.2),0 9px 20px rgba(75,104,70,.22);cursor:pointer;font-weight:800}.intro-card small{display:block;margin-top:12px;color:#aaa18f;font-size:8px}
.notice{position:fixed;z-index:1200;left:50%;bottom:calc(85px + env(safe-area-inset-bottom));max-width:calc(100vw - 30px);padding:9px 14px;border-radius:99px;background:rgba(66,67,55,.92);color:white;box-shadow:0 8px 22px rgba(45,44,36,.2);font-size:10px;font-weight:700;text-align:center;opacity:0;transform:translate(-50%,12px);transition:.2s;pointer-events:none}.notice.is-visible{opacity:1;transform:translate(-50%,0)}.flash{position:fixed;z-index:1300;inset:0;background:white;opacity:0;pointer-events:none}.flash.fire{animation:flash .45s ease-out}

@keyframes cat-arrive{0%{opacity:0;transform:translateY(38px) scale(.55)}70%{transform:translateY(-3px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes cat-breathe{50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes bob{to{transform:translateY(-3px)}}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}

@media(max-width:390px){.yard{min-height:565px}.toy-slot,.visitor{width:20%}.shop-card{min-height:180px}.book-grid{gap:7px}.book-card{min-height:137px}.intro-card h1{font-size:30px}}
@media(min-width:520px){.yard-shell{padding-inline:24px}.yard{min-height:760px}.paper-page{padding-inline:30px}.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}