@charset "UTF-8";
:root{--paper:#fbf5e9;--paper-deep:#f3ead9;--ink:#594c3f;--muted:#766453;--line:#daccb5;--rust:#955b42;--sage:#83906c;--soft:#f0e1c9;--serif:"Iowan Old Style","Palatino Linotype","Songti SC","STSong",serif;--sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color-scheme:light}

*{box-sizing:border-box}
html{min-height:100%;background:#e9e0d1;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,select{touch-action:manipulation}
button{cursor:pointer}
button,a{ -webkit-tap-highlight-color:transparent}
button{border:0;background:none}
a{color:inherit;text-decoration:none}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--rust);outline-offset:4px}
svg{display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600}
h1{font-family:var(--serif);font-size:29px;letter-spacing:.04em}
h2{font-size:17px}
h3{font-size:17px}
.hidden{display:none!important}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.icon,.action-icon,.page-icon{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon{width:22px;height:22px;flex-shrink:0}
.app{max-width:520px;min-height:100svh;margin:0 auto;padding-bottom:calc(84px + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 0 90px #76624b12;overflow:clip}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(9px + env(safe-area-inset-top)) 20px 6px;min-height:65px;background:var(--paper)}
.brand{display:flex;align-items:center;gap:7px;font-size:15px;min-width:0;font-weight:600;letter-spacing:.05em}
.brand #pet-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.brand-paw{width:25px;height:25px;stroke-width:1.3;color:var(--rust)}
.brand-dot{color:#baaa91;font-weight:400}
.brand-home{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap}
.top-actions{display:flex;flex-shrink:0}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--muted);font-size:28px}
.icon-button:hover{background:var(--paper-deep)}
#sound-btn .sound-waves{display:none}
#sound-btn[aria-pressed="true"] .sound-waves{display:initial}
#sound-btn[aria-pressed="true"] .sound-mute{display:none}
.home-hello{padding:13px 26px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-hello h1{font-size:24px;line-height:1.5}
.home-hello p{font-size:12px;color:var(--muted);margin-top:2px}
#today-label{font-size:11px;line-height:1.8;color:var(--muted);text-align:right;white-space:pre-line;flex-shrink:0;font-variant-numeric:tabular-nums}
.room{position:relative;width:100%;aspect-ratio:2/2.65;isolation:isolate;overflow:hidden;background:#eacaa4}
.room-world{position:absolute;bottom:0;width:100%;aspect-ratio:2/3}
.room-art{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;user-select:none;pointer-events:none;transition:filter 1.5s}
.room-world:after{content:"";pointer-events:none;position:absolute;inset:auto 0 -1px;height:8%;background:linear-gradient(transparent,var(--paper));z-index:3}
.room-light{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity 2s;background:linear-gradient(120deg,#564b7c30 10%,#f2c37b00 52%,#f0b77525)}
.room.night .room-art{filter:brightness(.79) saturate(.82)}
.room.night .room-light{opacity:1}
.pet-touch{position:absolute;width:70%;aspect-ratio:1;bottom:18%;left:15%;padding:0;z-index:5;border-radius:40%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.pet-touch.stroking{cursor:grabbing}
.pet-body{display:block;width:100%;height:100%;transform-origin:50% 95%;animation:pixel-breathe 4.5s steps(1,end) infinite}
.pet-sprite{display:block;width:100%;height:100%;background-image:url('/assets/dandan-pixel-poses.webp');background-size:300% 200%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}
.pet-body[data-pose="curious"] .pet-sprite{background-position:50% 0}
.pet-body[data-pose="pet"] .pet-sprite{background-position:100% 0}
.pet-body[data-pose="eat"] .pet-sprite{background-position:0 100%;transform:translateY(8px)}
.pet-body[data-pose="play"] .pet-sprite{background-position:50% 100%;transform:translateY(8px)}
.pet-body[data-pose="sleep"] .pet-sprite{background-position:100% 100%;transform:translateY(8px)}
.pet-body[data-pose="sleep"]{animation-duration:6s}
.pet-body[data-pose="eat"]{animation:pixel-munch .65s steps(1,end) 5}
.pet-body[data-pose="pet"]{animation:pixel-happy 1.4s steps(1,end) infinite}
.pet-shadow{position:absolute;bottom:20%;left:30%;width:42%;height:4%;border-radius:50%;background:#65482f26;filter:blur(7px);z-index:2;pointer-events:none}
.pet-bubble{position:absolute;top:29%;left:50%;transform:translateX(-50%) rotate(-1deg);max-width:76%;width:max-content;padding:9px 16px;background:#fffbf0f2;box-shadow:0 3px 12px #61442b08;color:#6f5943;font-size:13px;text-align:center;border:1px solid #c7aa7c60;border-radius:45% 46% 43% 42%/24% 27% 23% 29%;z-index:7;pointer-events:none;line-height:1.6}
.pet-bubble:after{content:"";position:absolute;width:9px;height:9px;left:43%;bottom:-5px;background:#fffbf0;transform:rotate(45deg);border-right:1px solid #c7aa7c60;border-bottom:1px solid #c7aa7c60}
.room-hint{position:absolute;bottom:8%;width:100%;text-align:center;font-size:11px;color:#795d42;z-index:4;pointer-events:none;letter-spacing:.04em}
.room-time{position:absolute;bottom:3.8%;right:7%;z-index:4;font-size:10px;color:#90785f;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.floating-heart{position:absolute;top:39%;left:65%;font-family:var(--serif);font-size:31px;color:#a9664a;opacity:0;z-index:7;pointer-events:none}
.floating-heart.pop{animation:float-heart 1.7s ease-out forwards}
.hotspot{position:absolute;display:grid;place-items:center;z-index:6;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border-radius:50%;padding:0}
.hotspot-dot{width:7px;height:7px;display:block;background:#fffbecbd;border:1px solid #b69868a8;border-radius:50%;box-shadow:0 0 0 5px #fff8e644;transition:transform .25s}
.hotspot-label{position:absolute;top:calc(50% + 14px);font-size:10px;white-space:nowrap;letter-spacing:.04em;background:#fff7e9db;border:1px solid #ceb18d66;border-radius:3px;padding:1px 6px;color:#795d44;opacity:0;transition:opacity .2s}
.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{opacity:1}
.hotspot:hover .hotspot-dot{transform:scale(1.2)}
.frame-hotspot{left:20%;top:16%;width:15%;height:10%}
.notebook-hotspot{left:88%;top:39%;width:17%;height:8%}
.notebook-hotspot .hotspot-label{opacity:1;left:50%;transform:translateX(-67%)}
.bowl-hotspot{left:10%;top:80%;width:15%;height:9%}
.ball-hotspot{left:82%;top:83%;width:16%;height:9%}
.birthday-present{position:absolute;left:12%;bottom:29%;width:66px;z-index:6;transform:rotate(-7deg);padding:0}
.present-art{width:58px;height:58px}
.birthday-present span{display:inline-block;white-space:nowrap;font-family:var(--serif);font-size:12px;padding:1px 7px;background:var(--paper);border-radius:2px}
.pet-actions{display:grid;grid-template-columns:repeat(3,1fr);padding:0 24px;gap:10px;margin-top:2px}
.pet-actions button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-height:79px;border-radius:22px;font-size:12px;letter-spacing:.05em;transition:background .2s,transform .2s}
.pet-actions button:hover{background:#eee0c65c}
.pet-actions button:active{transform:scale(.95)}
.action-icon{width:29px;height:29px;stroke:#9d7954;stroke-width:1.4}
.under-room{display:flex;justify-content:space-between;gap:8px;padding:11px 28px 23px;font-size:10px;color:var(--muted);letter-spacing:.04em}
.mood-section{margin:0 26px;padding:23px 0 21px;border-top:1px solid #deceb277}
.section-line{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-line h2{font-family:var(--serif);font-size:19px;letter-spacing:.04em}
.text-button{display:inline-flex;gap:7px;align-items:center;min-height:44px;padding:7px 0;font-size:12px;color:var(--muted);border-radius:4px}
.text-button .icon{width:16px;height:16px}
.text-button:hover{color:var(--rust)}
.moods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.moods button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;min-height:77px;border:1px solid transparent;border-radius:40% 44% 42% 37%/34% 38% 35% 41%;font-size:11px;color:var(--muted);transition:background .2s,border-color .2s}
.moods .icon{width:27px;height:27px;stroke-width:1.3}
.moods button[data-mood="happy"] .icon{color:#bb9658}
.moods button[data-mood="tired"] .icon{color:#a69c88}
.moods button[data-mood="miss"] .icon{color:#b47c69}
.moods button[data-mood="sad"] .icon{color:#8a9b9a}
.moods button:hover{background:#f0e7d7}
.moods button[aria-pressed="true"]{background:#efe4ce;border-color:#c8b18c7d;color:#675641}
.mood-response{padding:16px 4px 0}
.mood-response p{font-family:var(--serif);font-size:15px;line-height:1.9;white-space:pre-line}
.mood-links{display:flex;justify-content:space-between;gap:12px;margin-top:7px}
.mood-links .text-button:first-child{color:var(--rust)}
.little-note{display:flex;align-items:center;gap:14px;width:calc(100% - 52px);margin:7px 26px 9px;padding:18px 17px;text-align:left;background:#f0e4ce80;position:relative;border-radius:3px;transform:rotate(-.7deg);box-shadow:0 2px 2px #5c412104}
.little-note:before{content:"";position:absolute;width:45px;height:13px;top:-6px;left:45%;background:#dfcba57d;transform:rotate(3deg)}
.little-note>span:nth-child(2){display:flex;flex:1;flex-direction:column;min-width:0;gap:5px}
.little-note>.icon{width:25px;height:25px;color:#a28561;stroke-width:1.2}
.little-note small{font-size:10px;color:var(--muted);letter-spacing:.1em}
#daily-note{font-family:var(--serif);font-size:15px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-line}
.note-arrow{color:#aa9275}
.install-link{display:flex;justify-content:center;width:max-content;margin:19px auto 0;font-size:11px}
.footer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:24px 20px 8px;color:var(--muted);font-size:10px;letter-spacing:.05em}
.footer .text-button{font-size:10px;color:var(--muted)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:grid;grid-template-columns:repeat(4,1fr);z-index:20;padding:8px 30px calc(8px + env(safe-area-inset-bottom));background:#fbf5e9f5;border-top:1px solid #e3d6c099;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 12px;color:#766453;font-size:10px;min-height:49px;letter-spacing:.12em;border-radius:17px}
.bottom-nav .icon{width:23px;height:23px;stroke-width:1.4}
.bottom-nav a.active{color:var(--rust)}
.bottom-nav a.active .icon{fill:#e6c5a52e;stroke-width:1.7}
.subpage{padding:16px 26px 0;min-height:68svh}
.page-heading{padding:23px 0 30px}
.page-icon{width:38px;height:38px;color:#a98a62;stroke-width:1.1;margin-bottom:16px;transform:rotate(-5deg)}
.page-heading h1{font-size:28px}
.page-heading p{font-size:13px;margin-top:6px;color:var(--muted)}
.back-link{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:12px}
.back-link+.page-heading{padding-top:5px}
.journal-form{padding:22px 20px 18px;background:#fffbf1;border:1px solid #e2d5be;border-radius:3px;box-shadow:3px 4px 0 #eee4d1;position:relative}
.journal-form:before{content:"";position:absolute;left:13px;right:13px;top:-4px;height:7px;background:repeating-linear-gradient(90deg,transparent 0 14px,#bdaa8c 14px 16px,transparent 16px 22px)}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 7px}
.journal-form label{margin-top:0;font-size:13px}
input,textarea,select{width:100%;background:#fffaf0;border:1px solid #d8c7ac;border-radius:7px;padding:11px 12px;font-size:16px;line-height:1.7}
textarea{resize:vertical;min-height:116px}
textarea::placeholder,input::placeholder{color:#ae9b81;font-size:14px}
#journal-note{border:0;padding:7px 0 0;min-height:158px;background:repeating-linear-gradient(transparent 0 31px,#d8c5a640 31px 32px);line-height:32px;font-family:var(--serif)}
.form-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}
.form-bottom select{width:auto;max-width:55%;font-size:13px;border:0;background:transparent;padding:9px 16px 9px 0}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:44px;border-radius:10px;padding:10px 18px;font-size:13px;letter-spacing:.025em}
.primary{background:#967455;color:#fff9ee;border:1px solid #8c6c4e;box-shadow:inset 0 1px 0 #f2dab52e}
.primary:hover{background:#856448}
.secondary{background:#f2e7d5;border:1px solid #ddcbb0;color:#82684d}
.primary:active,.secondary:active{transform:translateY(1px)}
.entry-list{margin-top:32px}
.entry{padding:21px 0;border-bottom:1px solid #e3d6c0}
.entry header{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:var(--muted)}
.entry header button{min-height:44px;padding:0 4px;font-size:10px;color:#a1917d}
.entry p{font-family:var(--serif);font-size:16px;white-space:pre-wrap;word-break:break-word;line-height:1.9}
.empty{text-align:center;padding:38px 16px;color:#9c8b73;font-size:12px;line-height:2.1}
.empty>span{display:block;font-size:27px;color:#b7a17e;margin-bottom:10px}
.memory-map{position:relative;aspect-ratio:1.65;overflow:hidden;background:#f2e8d3;border:1px solid #d9c9a9;margin-bottom:28px;transform:rotate(-1deg);box-shadow:3px 4px 0 #e8dac177}
.memory-map:before,.memory-map:after{content:"";position:absolute;width:43px;height:17px;background:#e1cc9e80;z-index:2;top:0;left:24px;transform:rotate(-24deg)}
.memory-map:after{left:auto;right:10px;top:auto;bottom:3px;transform:rotate(-30deg)}
.map-drawing{position:absolute;inset:0;width:100%;height:100%}
.map-caption{position:absolute;bottom:12px;left:18px;font-family:var(--serif);font-size:11px;color:#9d8767}
.map-pin{position:absolute;transform:translate(-50%,-50%);max-width:44%;min-height:44px;font-size:11px;color:#8e6046;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:9px 8px;background:#fffbf0e8;box-shadow:0 2px 5px #8c694515;border:1px solid #cdb48a;border-radius:4px}
.memory-list{display:flex;flex-direction:column;gap:16px}
.memory-card{display:block;width:100%;text-align:left;padding:18px 19px 21px;background:#fffbf1;box-shadow:1px 3px 0 #e9ddc5;border:1px solid #e8dbc3;border-radius:2px}
.memory-card:nth-child(even){transform:rotate(.5deg)}
.memory-card small,.gift-card small{font-size:10px;color:var(--muted)}
.memory-card h3,.gift-card h3{font-family:var(--serif);margin:8px 0 7px}
.memory-card p,.gift-card p{font-size:13px;line-height:1.9;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.notebook-link{display:flex;align-items:center;gap:12px;margin-top:30px;padding:14px 0;border-top:1px solid #e2d4bd;font-size:12px;color:var(--muted);min-height:55px}
.notebook-link span:last-child{margin-left:auto}
.gacha-area{padding:10px 0 32px}
.gacha-machine{width:200px;height:222px;margin:14px auto 0;position:relative;isolation:isolate;transform:rotate(-5deg)}
.fabric-pocket{position:absolute;inset:43px 0 0;width:100%;background:#b17e5b;border-radius:4px 4px 42% 42%/4px 4px 24% 24%;border:1px solid #9f6e4b;box-shadow:inset 0 8px 0 #8c5e3b13,2px 5px 9px #86613b12;z-index:2;overflow:hidden}
.fabric-pocket:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffe4b108 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#4126090a 0 1px,transparent 1px 3px);pointer-events:none}
.pocket-stitch{position:absolute;inset:11px;border:1px dashed #e6c29a;border-radius:3px 3px 43% 43%/3px 3px 23% 23%;opacity:.8}
.pocket-seam{position:absolute;top:21px;left:0;width:100%;border-top:1px solid #895c3b66;border-bottom:1px solid #e6b28b88;height:3px}
.pocket-paw{position:absolute;left:calc(50% - 23px);top:65px;width:46px;height:46px;fill:none;stroke:#eed9b5;stroke-width:1.15;transform:rotate(7deg)}
.pocket-paper{position:absolute;left:26px;top:14px;width:143px;height:125px;background:#fff9eb;border:1px solid #dbc6a4;transform:rotate(-12deg);font-family:var(--serif);text-align:center;font-size:13px;padding-top:16px;box-shadow:0 2px 3px #79543210;transition:transform .3s}
.paper-two{left:54px;top:0;transform:rotate(16deg);background:#ead3b2;font-size:12px}
.gacha-machine:hover .paper-one{transform:translateY(-7px) rotate(-15deg)}
.gacha-machine.shake{animation:pocket-shake .7s ease-in-out infinite}
.gacha-description{text-align:center;padding-top:21px}
.gacha-description>p:first-child{font-family:var(--serif);font-size:16px;line-height:1.9}
.gacha-description .primary{margin:19px 0 12px}
.small{font-size:11px;color:var(--muted);line-height:1.9}
.gift-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gift-list>.empty{grid-column:1/-1}
.gift-card{padding:16px 16px 18px;background:#f5e9d3;border:1px solid #e5d3b4;border-radius:3px;transform:rotate(-1deg)}
.gift-card:nth-child(even){transform:rotate(1deg);background:#f0ecd9}
.gift-card h3{font-size:16px}
.gift-card p{font-size:12px}
.modal-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.06em}
dialog{position:fixed;padding:18px 25px 28px;width:calc(100% - 32px);max-width:460px;max-height:calc(100svh - 70px);overflow:auto;color:var(--ink);border:1px solid #d3bea1;border-radius:20px;background:var(--paper);box-shadow:0 15px 60px #36281720;overscroll-behavior:contain}
dialog::backdrop{background:#4d3d2c55;backdrop-filter:blur(4px)}
body:has(dialog[open]){overflow:hidden}
#modal-body h2{font-family:var(--serif);font-size:24px;margin-bottom:14px;letter-spacing:.03em}
#modal-body p{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;margin-bottom:14px}
#modal-body p.small{font-size:11px}
#modal-body a{text-decoration:underline;text-underline-offset:3px}
#modal-body ol{font-size:14px;padding-left:23px;line-height:2.1}
.modal-symbol{font-family:var(--serif);font-size:37px;color:#b08b5f;margin:6px 0 17px}
.modal-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:21px}
.modal-buttons>*{flex:1;white-space:nowrap}
.modal-buttons input.hidden{display:none}
.settings-divider{border:0;border-top:1px solid #ddceb6;margin:28px 0 21px}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translate(-50%,8px);width:max-content;max-width:calc(100% - 44px);z-index:60;padding:11px 17px;border-radius:12px;background:#64513ee8;color:#fffaec;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;top:-12px;left:var(--x);width:7px;height:12px;z-index:80;background:var(--c);animation:confetti-fall 3s var(--d) ease-in forwards;pointer-events:none}
.pet-paused .pet-body,.pet-paused .floating-heart{animation-play-state:paused!important}

@keyframes breathe{0%,100%{transform:scale(1,1)}
50%{transform:scale(1.006,.992)}
}
@keyframes happy-munch{0%,100%{transform:rotate(0)}
50%{transform:rotate(-1deg) translateY(1px)}
}
@keyframes happy-lean{0%,100%{transform:rotate(-.3deg)}
50%{transform:rotate(1deg)}
}
@keyframes float-heart{0%{opacity:0;transform:translateY(8px) scale(.6)}
20%{opacity:1}
100%{opacity:0;transform:translateY(-37px) rotate(12deg) scale(1.1)}
}
@keyframes pocket-shake{0%,100%{transform:rotate(-5deg)}
25%{transform:rotate(2deg) translateY(-2px)}
75%{transform:rotate(-9deg) translateY(-3px)}
}
@keyframes confetti-fall{to{transform:translateY(105svh) rotate(440deg)}
}

@media(min-width:700px){.app{margin:25px auto 0;border-radius:24px 24px 0 0;min-height:calc(100svh - 25px)}
.topbar{padding-top:16px}
.home-hello{padding-top:16px}
.bottom-nav{border-radius:0}
.subpage{padding-left:34px;padding-right:34px}
}

@media(max-width:370px){.topbar{padding-left:13px;padding-right:10px}
.brand{font-size:13px;gap:5px}
.brand #pet-label{max-width:115px}
.brand-home{font-size:11px}
.home-hello{padding-left:20px;padding-right:20px}
.home-hello h1{font-size:22px}
.pet-bubble{font-size:12px;max-width:80%}
.pet-actions{padding:0 18px}
.under-room{padding-left:20px;padding-right:20px}
.mood-section{margin:0 20px}
.subpage{padding-left:20px;padding-right:20px}
.little-note{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
.gift-list{grid-template-columns:1fr}
dialog{padding:15px 20px 23px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.floating-heart.pop{opacity:.75}
.room-art{transition:none}
}
/* Birthday: a little memory, a capsule and a letter kept for later. */
.birthday-pocket-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;text-align:left;margin:0 0 24px;padding:13px 15px;border:1px solid #d6b994;border-radius:4px;background:#f1dfc4;transform:rotate(-.6deg);font-family:var(--serif);font-size:15px}
.birthday-pocket-entry>span:last-child{margin-left:auto;color:#a27953}
.birthday-archive-list{display:grid;gap:12px;margin-bottom:24px}
.birthday-archive-card{display:flex;align-items:center;gap:15px;width:100%;padding:15px 16px;min-height:80px;text-align:left;background:#fff9ee;border:1px solid #dac4a3;border-radius:3px;box-shadow:2px 3px 0 #e8d9be}
.birthday-archive-card>.icon{width:30px;height:30px;color:#ab8060;stroke-width:1.2}
.birthday-archive-card>span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0}
.birthday-archive-card small{font-size:10px;color:var(--muted)}
.birthday-archive-card strong{font-family:var(--serif);font-size:16px;font-weight:500;overflow-wrap:anywhere}
.birthday-archive-card>span:last-child{margin-left:auto;color:var(--muted)}
.birthday-preview-badge{padding:6px 10px;background:#e8eadb;color:#6f7959;border-radius:5px;font-size:11px!important;line-height:1.6!important}
.birthday-steps{display:flex;justify-content:space-between;gap:4px;list-style:none!important;padding:0!important;margin:6px 0 24px;font-size:10px!important;color:var(--muted);line-height:1.8!important}
.birthday-steps li{position:relative;padding-bottom:5px}
.birthday-steps li[aria-current]{color:var(--muted);border-bottom:1px solid #b78660}
.birthday-intro{padding:4px 0 19px}
.birthday-intro .page-icon{margin:0 0 17px;width:33px;height:33px}
#birthday-screen .birthday-intro h2{font-size:23px;margin-bottom:9px}
#birthday-screen .birthday-intro p{font-size:12px;color:var(--muted);margin-bottom:0}
.birthday-question-card{padding:21px 17px;background:#fffaf0;border:1px solid #ddccb0;border-radius:3px;box-shadow:3px 4px 0 #eddfc8}
.birthday-question-number{font-size:10px;color:var(--muted);letter-spacing:.08em}
.birthday-question-title{font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.6;margin:12px 0 19px;white-space:pre-wrap;overflow-wrap:anywhere}
#birthday-answer{background:#fbf4e6;border-radius:5px}
#birthday-answer[aria-invalid="true"]{border-color:#b48c6a}
.birthday-question-card .primary{width:100%;margin-top:14px}
.birthday-feedback{font-size:12px;color:var(--muted);line-height:1.8;margin:8px 0 0;min-height:0}
#birthday-screen .birthday-hint{font-size:12px;padding:9px 12px;border-left:2px solid #c0ac83;background:#eee5cf80;color:var(--muted);margin-bottom:5px}
#birthday-screen .birthday-rules{font-size:10px;text-align:center;line-height:1.9;color:var(--muted);margin:20px 0 3px}
.birthday-draw{text-align:center;padding:0 0 8px}
.birthday-ticket{display:inline-block;padding:6px 14px;border:1px dashed #b19a71;border-radius:3px;background:#efe5cb;color:#88734e;font-size:11px;margin:4px 0 20px;transform:rotate(-3deg)}
#birthday-screen .birthday-draw h2{font-size:24px;margin:3px 0 7px}
#birthday-screen .birthday-draw>p{font-size:12px;color:var(--muted)}
.birthday-machine{display:block;width:184px;max-width:70%;padding:0;margin:13px auto 4px;border-radius:45% 45% 12% 12%;transform:rotate(-2deg)}
.birthday-machine-art{width:100%;height:auto;filter:drop-shadow(2px 5px 0 #b59a6520)}
.birthday-machine:hover{transform:rotate(1deg)}
.birthday-machine:active{transform:rotate(2deg) scale(.97)}
.birthday-machine .birthday-knob{transform-origin:100px 173px;transform-box:view-box}
.birthday-machine.is-spinning .birthday-knob{animation:birthday-turn .8s ease-in-out infinite}
.birthday-machine.is-spinning{animation:birthday-rattle .7s ease-in-out infinite}
#birthday-screen .birthday-draw .birthday-rules{font-size:10px;margin:5px 0 17px}
.birthday-draw>.primary{width:100%;margin-bottom:13px}
.birthday-draw .small{font-size:10px!important;margin-bottom:2px!important}
.birthday-miss{display:flex;align-items:center;gap:16px;margin:2px 0 22px;padding:15px 14px;background:#f0e8d6;border-radius:7px}
#birthday-screen .birthday-miss p{margin:0;font-family:var(--serif);font-size:14px;line-height:1.9}
.little-capsule{display:block;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1.5px solid #9f8460;background:linear-gradient(#e1c98f 0 48%,#9f8460 48% 52%,#fff8e7 52%);transform:rotate(-25deg);position:relative}
.little-capsule:after{content:"";position:absolute;top:5px;left:7px;width:14px;height:7px;border-top:2px solid #fff8df;border-radius:50%;transform:rotate(-20deg)}
.birthday-preview-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e1d4bb;margin-top:23px;padding-top:9px}
.birthday-preview-actions .text-button{font-size:11px}
#birthday-screen .birthday-win-message{text-align:center;color:#93703f;font-family:var(--serif);font-size:16px;margin:1px 0 21px}
.birthday-card{position:relative;background:#fffaf0;padding:20px 23px 24px;border:1px solid #ddc8a7;box-shadow:3px 5px 0 #e8d8bc;border-radius:2px;transform:rotate(-.7deg);overflow:hidden}
.birthday-card:before{content:"";position:absolute;top:5px;right:5px;left:5px;bottom:5px;border:1px solid #e4d5bc;pointer-events:none}
.birthday-card-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;color:#a68b65;letter-spacing:.03em}
.birthday-stamp{border:1px dashed #b99470;padding:6px 7px;display:flex;flex-direction:column;align-items:center;font-size:7px;transform:rotate(8deg);color:#ac805d;flex-shrink:0;background:#f1e5cd}
.birthday-stamp .icon{width:23px;height:23px;stroke-width:1.2;margin-bottom:3px}
.birthday-card-flower{font-size:36px;color:#c3aa72;line-height:1;margin:10px 0 20px;font-family:var(--serif)}
#birthday-screen .birthday-card h2{font-size:27px;line-height:1.55;margin:0 0 23px;font-weight:500;overflow-wrap:anywhere}
#birthday-screen .birthday-letter{font-family:var(--serif);font-size:16px;line-height:2.05;white-space:pre-wrap;word-break:break-word;margin:0 0 25px;color:#705a43}
#birthday-screen .birthday-signature{font-family:var(--serif);font-size:16px;text-align:right;margin-top:20px;color:#8f6d4d}
.birthday-card footer{font-size:9px;color:#ae9877;border-top:1px solid #e6d7be;padding-top:13px;line-height:1.8}
#birthday-screen .birthday-kept{text-align:center;font-size:10px;margin:19px 0 8px;color:var(--muted)}
.birthday-card.just-opened{animation:birthday-unfold .7s ease-out both;transform-origin:50% 0}
.birthday-confetti{position:fixed;top:-10px;left:var(--x);width:6px;height:10px;background:var(--c);animation:confetti-fall 2.7s var(--d) ease-in forwards;z-index:2;pointer-events:none}
.birthday-settings{border-top:1px solid #dbcab0;border-bottom:1px solid #dbcab0;margin:25px 0;padding:14px 0}
.birthday-settings summary{font-family:var(--serif);font-size:18px;min-height:44px;cursor:pointer;line-height:1.6;list-style-position:inside}
.birthday-settings summary span{font-family:var(--sans);display:block;font-size:10px;color:var(--muted);padding-left:18px;line-height:1.9}
.birthday-switch{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:13px;margin:14px 0 5px}
.birthday-switch input{width:22px;height:22px;accent-color:#8a9770;cursor:pointer}
.birthday-setting-row{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:23px}
.birthday-setting-row>div{min-width:0}
.birthday-setting-row label{font-size:11px}
.birthday-setting-row input,.birthday-setting-row select{font-size:16px;height:48px;padding:9px 10px}
.birthday-questions-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.birthday-questions-heading h3{font-family:var(--serif);font-size:17px}
#modal-body .birthday-settings p.small{font-size:10px;line-height:1.9}
.birthday-question{border:1px solid #dac5a3;border-radius:6px;background:#f4ebdb;padding:8px 13px 4px;margin:20px 0 0;min-width:0}
.birthday-question legend{font-size:11px;padding:0 7px;color:#9e805a}
.birthday-question label{font-size:11px;margin-top:8px}
.birthday-question input{font-size:16px;padding:9px 10px}
.birthday-question textarea{font-size:16px;min-height:85px;padding:9px 10px}
.birthday-remove-question{margin-left:auto;display:flex;font-size:10px;color:#a18c70}
.birthday-setup-note{padding:9px 10px;background:#ebe7d7;border-radius:5px}
.birthday-quiet{text-align:center;padding:16px 0 20px}
.birthday-quiet .page-icon{margin:0 auto 22px}
.birthday-quiet .secondary{margin-top:15px}
@keyframes birthday-turn{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes birthday-rattle{0%,100%{transform:rotate(-2deg)}25%{transform:rotate(1deg) translateY(-1px)}75%{transform:rotate(-4deg)}}
@keyframes birthday-unfold{0%{opacity:0;transform:translateY(9px) rotate(-2deg) scaleY(.93)}100%{opacity:1;transform:translateY(0) rotate(-.7deg) scaleY(1)}}
@media(max-width:370px){.birthday-card{padding:18px 17px 22px}.birthday-question-card{padding:18px 13px}.birthday-setting-row{gap:9px}.birthday-setting-row label{font-size:10px}#birthday-screen .birthday-card h2{font-size:24px}}
/* Birthday is a permanent destination, with a visible entry before the room. */
.birthday-home-entry{display:flex;align-items:center;gap:12px;min-height:56px;margin:0 26px 16px;padding:9px 13px;background:#f0e1c7;border:1px solid #dac3a1;border-radius:4px;transform:rotate(-.4deg);box-shadow:0 2px 0 #ddc6a326}
.birthday-home-entry>.icon{width:25px;height:25px;color:#ac7b55;stroke-width:1.3}
.birthday-home-entry>span:nth-child(2){display:flex;align-items:center;flex:1;gap:14px;min-width:0}
.birthday-home-entry strong{font-family:var(--serif);font-size:16px;font-weight:500;white-space:nowrap}
.birthday-home-entry small{font-size:10px;color:#6e5c49}
.birthday-home-arrow{font-size:17px;color:#9d7450}
#birthday-view .page-heading{padding-bottom:6px}
.birthday-hub-toy{width:180px;max-width:55%;margin:12px auto 13px;transform:rotate(-3deg)}
.birthday-hub-copy{text-align:center;margin:16px 0 22px}
.birthday-hub-label{display:inline-block;margin-bottom:12px;padding:3px 11px;border:1px dashed #bfaa86;color:#766453;font-size:10px;transform:rotate(-2deg)}
.birthday-hub-copy h2{font-family:var(--serif);font-size:24px;line-height:1.6;font-weight:500}
.birthday-hub-copy p{font-size:12px;line-height:1.9;color:var(--muted);max-width:310px;margin:10px auto 0}
.birthday-hub-actions{display:flex;flex-direction:column;align-items:stretch;gap:11px;max-width:320px;margin:0 auto}
.birthday-hub-actions>.primary{min-height:49px;font-size:14px}
.birthday-hub-actions>.text-button{justify-content:center}
.birthday-hub-rules{font-size:10px;color:var(--muted);text-align:center;line-height:1.9;margin:17px 0 23px}
@media(max-width:370px){.birthday-home-entry{margin-left:20px;margin-right:20px}.birthday-home-entry>span:nth-child(2){gap:8px}.birthday-home-entry strong{font-size:15px}.birthday-home-entry small{font-size:9px}.bottom-nav{padding-left:20px;padding-right:20px}}

@keyframes pixel-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes pixel-munch{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes pixel-happy{0%,100%{transform:translate(0,0)}35%{transform:translate(-2px,-2px)}70%{transform:translate(2px,0)}}
.pet-body[data-pose="play"]{animation:pixel-play .8s steps(1,end) 4}
@keyframes pixel-play{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}70%{transform:translateY(-2px)}}

/* Scale the complete portrait room, including its hotspots, above the desktop dock. */
@media(min-width:700px) and (min-height:650px){
  .room{width:min(100%,calc((100svh - 432px) * .7547169811));margin-inline:auto;border-radius:16px}
  .home-hello{padding-bottom:12px}
  .pet-actions{max-width:390px;width:100%;margin:8px auto 0}
  .under-room{padding-bottom:15px}
}
/* Photo questions stay quiet and readable on narrow phones. */
.birthday-question-photo{margin:0 0 16px;background:#eee4d4;border:1px solid #d9c6aa;border-radius:9px;overflow:hidden}
.birthday-question-photo img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;background:#eee4d4}
.birthday-photo-preview:empty{display:none}
.birthday-photo-preview img{display:block;width:100%;height:auto;max-height:190px;object-fit:contain;background:#eadfcd;border-radius:7px;margin:3px 0 9px}
.birthday-photo-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.birthday-photo-actions button{min-height:44px;padding:9px 12px;font-size:12px}
.birthday-photo-status{overflow-wrap:anywhere}
.birthday-personal,.birthday-advanced,.birthday-question-options{margin:14px 0;border-bottom:1px solid #d9c7ae;padding-bottom:10px}
.birthday-personal summary,.birthday-advanced summary,.birthday-question-options summary{min-height:44px;display:list-item;cursor:pointer;padding:10px 2px;color:var(--muted);font-size:13px;line-height:1.6}
.birthday-settings{border:0;margin:16px 0 8px;padding:0}
.birthday-settings h3,.birthday-editor-section{font-family:var(--serif);font-size:19px;margin:20px 0 10px}
#modal-body .birthday-settings p.small,#modal-body .birthday-advanced p.small{font-size:12px;line-height:1.7}
.birthday-question legend,.birthday-question label,.birthday-remove-question{color:var(--muted);font-size:12px}
.birthday-remove-question,.birthday-preview-actions button{min-height:44px}
.birthday-question textarea{min-height:72px}
.birthday-question-title{overflow-wrap:anywhere}
#birthday-screen .birthday-rules,.birthday-hub-rules{font-size:12px;line-height:1.7}
.birthday-hub-toy{width:145px;margin-top:0}
.birthday-hub-copy{margin:10px 0 18px}
.birthday-hub-label{display:none}
.birthday-hub-actions>.text-button{min-height:44px}
.birthday-machine:hover,.birthday-machine:active{transform:rotate(-2deg)}
.photo-unavailable{padding:15px;font-size:12px;color:var(--muted)}
@media(max-width:420px){
  .birthday-question-photo img{max-height:190px}
  #birthday-screen .birthday-intro{margin-bottom:14px}
  #birthday-screen .birthday-intro .page-icon{display:none}
  #birthday-screen .birthday-intro h2{font-size:20px}
  .birthday-question-card{padding:15px 13px}
  .birthday-steps{font-size:11px;gap:8px}
  .birthday-hub-toy{width:115px}
  .birthday-hub-copy h2{font-size:23px}
  .birthday-setting-row{grid-template-columns:1fr}
}

/* v7 · A quiet pixel room inside a legible, contemporary interface. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:root{--paper:#f7f3ea;--paper-deep:#eee7da;--ink:#403b32;--muted:#73695b;--line:#dfd5c5;--rust:#995f4b;--sage:#8b987a}
html{background:#eae5da}
.app{max-width:1040px;box-shadow:none;background:var(--paper);padding-bottom:calc(100px + env(safe-area-inset-bottom))}
.topbar{padding:calc(10px + env(safe-area-inset-top)) 24px 8px;border-bottom:1px solid #e7dfd2;min-height:64px}
.brand{font-size:14px;letter-spacing:.01em;gap:8px}
.brand-home,.brand-dot{display:none}
.brand-paw{width:21px;height:21px}
.icon-button{border-radius:8px}
h1,h2,h3{letter-spacing:0}
.home-hello{padding:22px 24px 18px;gap:10px}
.home-hello h1{font-family:var(--sans);font-size:23px;line-height:1.45;font-weight:500;letter-spacing:-.03em}
.birthday-home-entry{margin:0 24px 16px;min-height:44px;padding:9px 13px;background:#eee5d4;border-color:#ded0ba;border-radius:8px;transform:none;box-shadow:none}
.birthday-home-entry strong{font-family:var(--sans);font-size:13px;font-weight:500}
.birthday-home-entry>.icon{width:20px;height:20px}
.birthday-home-entry>span:nth-child(2){gap:0}
.birthday-home-arrow{margin-left:auto}
.room{width:calc(100% - 32px);max-width:512px;aspect-ratio:6/7;margin:0 auto;border-radius:8px;background:#d9dccb;border:1px solid #9fae96;overflow:hidden;isolation:isolate}
.room-world{position:relative;inset:0;width:100%;height:100%;aspect-ratio:6/7;overflow:hidden}
.room-world:after{display:none}
.room-art{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transition:none}
.room-light{background:#30383b;opacity:0;transition:none;z-index:1}
.room.night .room-art{filter:brightness(.84) saturate(.88)}
.room.night .room-light{opacity:.05}
.pet-touch{width:56.25%;left:21.875%;bottom:17.85%;border-radius:12px;z-index:5;outline-offset:-5px}
.pet-shadow{bottom:20%;left:36%;width:30%;height:2.7%;border-radius:0;background:#6470523d;filter:none;clip-path:polygon(8% 0,92% 0,92% 20%,100% 20%,100% 80%,92% 80%,92% 100%,8% 100%,8% 80%,0 80%,0 20%,8% 20%)}
.pet-bubble{top:29%;left:50%;max-width:78%;padding:7px 12px;border:1px solid #b99d7b;border-radius:3px;background:#fff9eaf5;box-shadow:2px 2px 0 #9b7c5d22;transform:translateX(-50%);font-size:12px;color:#5b4a39;line-height:1.6}
.pet-bubble:after{width:7px;height:7px;bottom:-5px;left:50%;border-color:#b99d7b;background:#fff9ea}
.floating-heart{top:42%;left:67%;font-family:var(--sans);font-size:25px}
.hotspot{min-width:44px;min-height:44px;border-radius:6px;z-index:6}
.hotspot-dot{width:5px;height:5px;border-radius:0;background:#fff5da;border:1px solid #9b7b5a;box-shadow:0 0 0 3px #fff7df55}
.hotspot:hover .hotspot-dot{transform:none;background:#fff}
.hotspot-label{top:calc(100% - 5px);font-size:10px;font-weight:500;letter-spacing:0;padding:1px 5px;border:1px solid #d2b99a;border-radius:3px;background:#fff5e2f0;color:#66503c;opacity:1;line-height:1.5;pointer-events:none;transition:none}
.frame-hotspot{left:18.75%;top:16.5%;width:18%;height:14%}
.notebook-hotspot{left:86.5%;top:51.5%;width:16%;height:13%}
.notebook-hotspot .hotspot-label{left:50%;transform:translateX(-50%)}
.bowl-hotspot{left:13%;top:86%;width:16%;height:12%}
.ball-hotspot{left:86%;top:86%;width:16%;height:12%}
.birthday-present{left:7%;bottom:22%;width:52px;min-height:56px;z-index:6;transform:none;display:flex;flex-direction:column;align-items:center;padding:0}
.present-art{width:44px;height:44px;image-rendering:pixelated}
.birthday-present span{font-family:var(--sans);font-size:10px;line-height:1.5;padding:1px 5px;background:#fff5e2f0;color:#66503c;border:1px solid #d2b99a;border-radius:3px;box-shadow:none}
.pet-actions{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0 16px;margin:12px auto 0;max-width:512px;width:100%}
.pet-actions button{min-height:64px;gap:6px;border:1px solid transparent;border-radius:8px;font-size:11px;letter-spacing:0;background:#efe9de;transition:background .15s}
.pet-actions button:hover{background:#e6ddcf;border-color:#d8c9b5}
.pet-actions button:active{transform:none;background:#e0d5c5}
.action-icon{width:24px;height:24px;stroke:#89735b;stroke-width:1.5}
.under-room{justify-content:center;padding:10px 24px 18px;font-size:10px;color:#766c5c;letter-spacing:0;min-height:36px}
.mood-section{margin:0 24px;padding:20px 0;border-color:var(--line)}
.section-line{margin-bottom:14px;gap:10px}
.section-line h2{font-family:var(--sans);font-size:16px;font-weight:500;letter-spacing:0}
.text-button{font-size:12px}
.moods{gap:6px}
.moods button{min-height:72px;border:1px solid #e2d9ca;border-radius:8px;font-size:11px;gap:7px;background:#faf7f0}
.moods .icon{width:24px;height:24px}
.moods button[aria-pressed="true"]{background:#e9e9d9;border-color:#a7ae8d}
.mood-response{padding:16px 0 0}
.mood-response p{font-family:var(--sans);font-size:14px}
.mood-links{gap:8px}
.little-note{margin:4px 24px 8px;padding:17px 0;width:calc(100% - 48px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;transform:none;box-shadow:none;border-radius:0;gap:12px}
.little-note:before{display:none}
.little-note small{font-size:10px;letter-spacing:0}
#daily-note{font-size:14px;line-height:1.7;font-family:var(--sans);-webkit-line-clamp:2}
.install-link{font-size:11px;margin:8px auto 0}
.footer{padding-top:8px;letter-spacing:0}
.bottom-nav{max-width:520px;padding:7px 16px calc(7px + env(safe-area-inset-bottom));background:#f7f3eafa;border-color:#dcd1c0;box-shadow:0 -3px 16px #59463208}
.bottom-nav a{min-height:50px;font-size:11px;letter-spacing:0;border-radius:8px;gap:3px}
.bottom-nav a.active{background:#eee4d4;color:#80563e}
.bottom-nav .icon{width:21px;height:21px}
.subpage{max-width:620px;margin:0 auto;padding-top:24px;min-height:67svh}
.page-heading{padding:14px 0 24px}
.page-heading>.page-icon{display:none}
.page-heading h1{font-family:var(--sans);font-size:25px;font-weight:500}
.memory-map{transform:none;box-shadow:none;border-radius:8px}
.memory-map:before,.memory-map:after{display:none}
.memory-card,.memory-card:nth-child(even),.gift-card,.gift-card:nth-child(even),.birthday-pocket-entry,.birthday-card{transform:none;border-radius:8px;box-shadow:none}
.journal-form{border-radius:8px;box-shadow:none}
.journal-form:before{display:none}
.birthday-pocket-entry,.birthday-archive-card{box-shadow:none;border-radius:8px}
.birthday-card:before{border-radius:5px}
.birthday-hub-toy{transform:none}
.birthday-hub-copy h2{font-family:var(--sans);font-weight:500;font-size:22px}
.birthday-hub-copy p{font-size:13px}
.primary,.secondary{border-radius:7px;box-shadow:none;font-size:14px}
.primary{background:#8b6049;border-color:#8b6049}
dialog{border-radius:14px;background:var(--paper);padding-top:14px}
dialog::backdrop{background:#42372a66;backdrop-filter:blur(2px)}
#modal-body h2{font-family:var(--sans);font-size:23px;font-weight:500}
#modal-body p.small,.small{font-size:12px}
.birthday-editor-section,.birthday-settings h3{font-family:var(--sans);font-size:17px;font-weight:500}
@media(min-width:700px){
  .app{margin:24px auto 0;border-radius:16px 16px 0 0;min-height:calc(100svh - 24px);width:calc(100% - 48px)}
  .topbar{padding:15px 32px 12px}
  #home-view{display:grid;grid-template-columns:minmax(280px,1.35fr) minmax(250px,1fr);grid-template-areas:"hello hello" "room birthday" "room mood" "room note" "actions info" "install install";column-gap:32px;row-gap:0;padding:0 32px;align-items:start}
  .home-hello{grid-area:hello;padding:26px 0 22px}
  .home-hello h1{font-size:27px}
  .birthday-home-entry{grid-area:birthday;margin:0 0 20px;min-height:48px}
  .room{grid-area:room;width:100%;max-width:512px;border-radius:8px;margin:0;align-self:start}
  .pet-actions{grid-area:actions;padding:0;max-width:none;margin:12px 0 0}
  .under-room{grid-area:info;justify-content:flex-start;padding:20px 0 0;align-self:end}
  .mood-section{grid-area:mood;margin:0;padding:0 0 20px;border:0}
  .moods{grid-template-columns:repeat(2,1fr);gap:9px}
  .moods button{min-height:80px;font-size:12px}
  .little-note{grid-area:note;margin:0;width:100%;padding:20px 0;align-self:start}
  .install-link{grid-area:install;margin:18px auto 0}
  .bottom-nav{bottom:16px;border:1px solid #ddd0be;border-radius:12px;padding:7px 12px;box-shadow:0 5px 24px #55402c10}
  .subpage{padding-top:32px}
  .footer{padding-top:6px}
}
@media(min-width:700px) and (max-width:850px){
  #home-view{column-gap:22px;padding:0 24px;grid-template-columns:minmax(280px,1.15fr) minmax(240px,1fr)}
}
@media(max-width:370px){
  .topbar{padding-left:18px;padding-right:12px}
  .home-hello{padding:20px 20px 16px}
  .home-hello h1{font-size:21px}
  .birthday-home-entry{margin:0 20px 12px}
  .room{width:calc(100% - 24px)}
  .mood-section{margin:0 20px}
  .little-note{width:calc(100% - 40px);margin-left:20px;margin-right:20px}
  .pet-bubble{font-size:11px;padding:6px 10px}
  .birthday-present{left:5%;width:48px}
  .pet-actions{padding:0 12px}
  .pet-actions button{font-size:10px}
  .bottom-nav{padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.pet-body,.floating-heart,.birthday-confetti{animation:none!important}.room-art,.room-light,.pet-actions button{transition:none!important}}
/* The dog approaches the present, opens it, then bounces beside the letter. */
.card-companion{height:120px;position:relative;margin:-4px auto 16px;width:228px;max-width:100%;border-bottom:2px solid #d2bd97;background:linear-gradient(transparent 94%,#e8dcc4 94%);overflow:visible}
.card-companion-dog{position:absolute;left:24px;bottom:0;width:120px;height:120px;background:url('/assets/dandan-pixel-poses.webp') 100% 0/300% 200% no-repeat;image-rendering:pixelated}
.card-companion-gift{position:absolute;z-index:1;bottom:5px;right:35px;width:41px;height:34px;background:#e2bb81;box-shadow:0 3px 0 #b98960,inset 0 4px 0 #c99d69;border:2px solid #ad7e59}
.card-companion-gift:before{content:"";position:absolute;width:7px;top:0;bottom:0;left:15px;background:#ae6953}
.card-gift-letter{position:absolute;z-index:1;top:-19px;left:9px;width:20px;height:16px;border:2px solid #ad7e59;background:#fff8e7;color:#ae6953;font:10px/12px sans-serif;text-align:center}
.card-gift-lid{position:absolute;z-index:2;width:45px;height:9px;left:5px;top:-20px;background:#dbb078;border:2px solid #ad7e59;box-shadow:0 -2px 0 #ebcb96;transform:translate(8px,3px)}
.card-gift-lid:before{content:"";position:absolute;left:15px;top:-9px;width:8px;height:7px;border:3px solid #ae6953;border-bottom:0;box-shadow:6px 0 0 -1px #ae6953}
.card-companion-spark{position:absolute;right:30px;top:12px;color:#ba8b49;font-size:23px;line-height:1}
.card-companion.is-celebrating .card-gift-lid{animation:card-lid-open 2.6s steps(1,end) both}
.card-companion.is-celebrating .card-gift-letter{animation:card-letter-rise 2.6s steps(1,end) both}
.card-companion.is-celebrating .card-companion-dog{animation:card-dog-celebrate 2.6s steps(1,end) both}
.card-companion.is-celebrating .card-companion-spark{animation:card-spark 2.6s steps(1,end) both}
@keyframes card-lid-open{0%,31%{transform:translate(-7px,18px)}38%{transform:translate(0,-7px) rotate(12deg)}48%,100%{transform:translate(8px,3px)}}
@keyframes card-letter-rise{0%,37%{opacity:0;transform:translateY(14px)}48%,100%{opacity:1;transform:translateY(0)}}
@keyframes card-dog-celebrate{0%{background-position:50% 0;transform:translate(0,0)}12%{transform:translate(12px,0)}24%{transform:translate(24px,0)}31%,42%{background-position:50% 100%;transform:translate(28px,0)}53%{background-position:100% 0;transform:translate(12px,0)}62%{transform:translate(8px,-12px)}70%{transform:translate(8px,0)}78%{transform:translate(4px,-8px)}88%,100%{background-position:100% 0;transform:translate(0,0)}}
@keyframes card-spark{0%,38%{opacity:0}48%,68%{opacity:1}58%{opacity:.35}78%,100%{opacity:1}}
@media(min-width:900px){
  #home-view{grid-template-rows:auto 68px auto 1fr auto auto;grid-template-columns:minmax(340px,1.25fr) minmax(280px,1fr)}
  .room{width:clamp(340px,calc((100svh - 350px) * .857142857),512px);max-width:100%;justify-self:center}
  .pet-actions{width:clamp(340px,calc((100svh - 350px) * .857142857),512px);max-width:100%;justify-self:center}
}
@media(prefers-reduced-motion:reduce){.card-companion.is-celebrating *{animation:none!important;transition:none!important}.card-companion.is-celebrating .card-companion-dog{background-position:100% 0;transform:none}.card-gift-lid{transform:translate(8px,3px)}}
@media(max-width:699px){
  #home-view{position:relative}
  .home-hello{padding-right:137px;min-height:86px;align-items:center}
  .home-hello h1{font-size:21px;overflow-wrap:anywhere}
  .birthday-home-entry{position:absolute;right:20px;top:21px;width:108px;min-height:44px;margin:0;padding:9px 10px;gap:7px;background:transparent;border-color:#d9cbb6}
  .birthday-home-entry strong{font-size:12px}
  .birthday-home-entry>.icon{width:16px;height:16px}
  .birthday-home-arrow{font-size:13px}
}
@media(max-width:370px){.home-hello{padding-right:128px}.home-hello h1{font-size:19px}.birthday-home-entry{right:16px;width:102px}}
[hidden]{display:none!important}
/* Keep the complete room controls above the floating dock on short desktops. */
@media(min-width:900px) and (max-height:850px){
  .moods button{min-height:64px}
  .mood-section{padding-bottom:12px}
}
#birthday-screen .birthday-card h2{text-wrap:balance}

/* The version identifies the served page, not a live deployment status. */
.build-version{font-size:11px;line-height:1.6;color:#655d52;letter-spacing:.02em}

/* v7.7 · A warmer, quieter frame around the pixel room. */
:root{--paper:#f8f4eb;--paper-deep:#eee5d7;--ink:#3f382f;--muted:#685d50;--line:#ded2c0;--rust:#89513c;--sage:#77866b}
html{background:#e9e2d5}
.app{background:var(--paper)}
.topbar{background:var(--paper);border-bottom-color:#e4d8c7}
.brand-paw{color:#89513c}
.icon-button{color:#66584a}
.home-hello h1{font-weight:600;letter-spacing:.01em;color:#40372e}
.birthday-home-entry{background:#f2e7d6;border-color:#d8c6ad;color:#694a38;box-shadow:0 2px 0 #d8c6ad66}
.birthday-home-entry>.icon,.birthday-home-arrow{color:#89513c}
.birthday-home-entry:active{transform:translateY(1px);box-shadow:none}
.room{border:2px solid #8b9a7d;border-radius:5px;box-shadow:0 4px 0 #c8c1a8}
.pet-bubble{background:#fffaf0;color:#4e3c2e;border-color:#a88464;box-shadow:3px 3px 0 #84664a2e}
.hotspot-label,.birthday-present span{background:#fff9eb;color:#513d2e;border-color:#b69a77}
.pet-actions{gap:6px;margin-top:16px}
.pet-actions button{background:#f0e8dc;border:1px solid #ded1bf;border-radius:5px;color:#554638;font-size:12px}
.pet-actions button:hover{background:#e9ddcc;border-color:#c6af95}
.action-icon{stroke:#795e48}
.under-room{color:#685d50;font-size:11px;padding-top:12px}
.mood-section{border-color:#d9cdbb}
.section-line h2{font-weight:600;color:#40372e}
.moods button{background:#fcf9f2;border-color:#dfd1bd;border-radius:5px;color:#584b3d;font-size:12px}
.moods button[aria-pressed="true"]{background:#e3e9d9;border-color:#829274;color:#34452f;box-shadow:inset 0 -3px 0 #9baa8f}
.little-note{border-color:#d9cdbb;color:#514337}
.little-note>.icon{color:#89513c}
.little-note small,.build-version{color:#685d50}
.bottom-nav{background:#f8f4ebf7;border-color:#d8cbb8;box-shadow:0 -3px 14px #59463212}
.bottom-nav a{color:#685748;font-size:12px;border-radius:5px}
.bottom-nav a.active{background:#eadfcc;color:#70452f;font-weight:600;box-shadow:inset 0 -2px 0 #a57859}
.primary{background:#80523e;border-color:#80523e;color:#fffaf1}
.primary:hover{background:#70452f}
.secondary{background:#f2e8da;border-color:#d8c5aa;color:#594435}
input,textarea,select{border-color:#cdb99d;background:#fffaf1;color:#40372e}
textarea::placeholder,input::placeholder{color:#796b5b;opacity:1}
.memory-card,.gift-card,.journal-form,.birthday-pocket-entry,.birthday-archive-card{border-color:#dacbb6;box-shadow:0 3px 0 #e8ddcc}
.birthday-question-card{border-color:#d8c5aa;border-radius:5px;box-shadow:0 3px 0 #e8dbc7}
.birthday-steps{font-size:12px!important}
.birthday-steps li[aria-current]{color:#6d422f;font-weight:600;border-bottom:2px solid #99684d}
.birthday-question-number,.birthday-card-top{font-size:12px;color:#685748}
.birthday-card{border-color:#d7c2a1;background:#fffaf0;box-shadow:0 4px 0 #e7dac6}
#birthday-screen .birthday-letter{color:#534335;line-height:2}
.birthday-stamp{color:#79513a;border-color:#ab8869}
#birthday-screen .birthday-rules,.birthday-hub-rules{font-size:12px;color:#685d50}
dialog{border-color:#cdb99d;box-shadow:0 18px 55px #3d2e2033}
@media(max-width:699px){
  .home-hello{min-height:82px}
  .birthday-home-entry{background:#f2e7d6}
  .pet-actions{gap:5px}
  .pet-actions button{min-height:68px}
  .bottom-nav a{padding-left:4px;padding-right:4px}
}
@media(max-width:370px){.pet-actions button{font-size:11px}.moods button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.birthday-home-entry{transition:none}}

/* Pocket: a quiet paper-and-fabric shelf for the room's little notes. */
#pocket-view .page-heading{margin-bottom:4px}
.pocket-page-intro{margin:0 0 22px;color:#685d50;font-size:13px;line-height:1.8}
#pocket-view .birthday-pocket-entry{margin-bottom:18px;background:#f6eddf;border-color:#d9c6ac;box-shadow:0 2px 0 #e8ddcc;font-family:var(--sans);font-weight:500}
#pocket-view .birthday-pocket-entry:hover,#pocket-view .birthday-archive-card:hover{background:#fff8eb}
#pocket-view .birthday-archive-card{background:#fffaf0;border-color:#d9c8b0}
#pocket-view .gacha-area{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center;gap:12px;padding:20px 17px;margin:0 0 30px;background:#e9ede0;border:1px solid #ced6c3;border-radius:12px;box-shadow:0 3px 0 #dce3d4}
#pocket-view .gacha-machine{width:100%;max-width:150px;height:170px;margin:0;transform:none}
#pocket-view .fabric-pocket{inset:35px 0 0;background:#a97c5c;border-color:#8e664d;box-shadow:inset 0 6px 0 #8c5e3b13,0 3px 0 #947157}
#pocket-view .pocket-paper{left:13%;top:12px;width:72%;height:96px;padding-top:12px;font-size:11px}
#pocket-view .paper-two{left:26%;top:1px;font-size:10px}
#pocket-view .pocket-paw{left:calc(50% - 19px);top:47px;width:38px;height:38px}
#pocket-view .gacha-description{text-align:left;padding:0;min-width:0}
.pocket-kicker{display:block;color:#59694f;font-size:11px;letter-spacing:.08em;margin-bottom:9px}
#pocket-view .gacha-description h2{font-size:21px;font-weight:600;line-height:1.45;color:#473f35;letter-spacing:.03em}
#pocket-view .gacha-description p{font-size:12px;line-height:1.7;color:#655d4f;margin:8px 0 15px}
#pocket-view .gacha-description .primary{margin:0;min-height:44px;padding:9px 12px;gap:8px;white-space:nowrap}
#pocket-view .pocket-collection-heading{margin-bottom:14px}
#pocket-view .gift-list{gap:12px}
#pocket-view .gift-card,#pocket-view .gift-card:nth-child(even){background:#fffaf0;border:1px solid #ded0bc;border-radius:8px;box-shadow:0 2px 0 #e8ddcc;transform:none;padding:18px}
#pocket-view .gift-card small{color:#685d50;font-size:12px}
#pocket-view .gift-card h3{font-family:var(--sans);font-size:16px;font-weight:600;margin:9px 0 6px}
#pocket-view .gift-card p{color:#685d50;font-size:13px;line-height:1.8}
#pocket-view .gift-list>.empty{background:#f6f1e7;border:1px dashed #d7c9b4;border-radius:8px;color:#685d50;padding:26px 16px}
@media(max-width:340px){#pocket-view .gacha-area{grid-template-columns:minmax(0,125px) minmax(0,1fr);gap:8px;padding:16px 12px}#pocket-view .gacha-description h2{font-size:19px}#pocket-view .gacha-description .primary{font-size:12px;padding:9px 8px}}
@media(prefers-reduced-motion:reduce){#pocket-view .pocket-paper{transition:none}#pocket-view .gacha-machine.shake{animation:none}}