:root{--ink:#293f36;--bg:#f8f3e8;--card:#fffcf4;--line:#dbd4c2;--g:#456352;--red:#be6b4c;--yel:#d3a259;--serif:"Noto Serif TC","Songti TC","STSong",serif}
body{background:radial-gradient(ellipse at 20% 15%,#3d5144 0,#213a30 52%,#14281f 100%);align-items:center;min-height:100dvh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h120v120H0z'/%3E%3C/svg%3E")}
#app{max-width:480px;max-height:960px;box-shadow:0 32px 100px #07190f66;isolation:isolate}
button{transition:background .16s,transform .16s,box-shadow .16s}button:focus-visible{outline:3px solid #c09243;outline-offset:3px}button:active{transform:translateY(2px)}
#title{isolation:isolate;gap:13px;padding:28px 30px calc(28px + env(safe-area-inset-bottom,0px));background:#f3ecd9;overflow:hidden;align-content:center}
.title-scenery{position:absolute;inset:0;z-index:-2;background:linear-gradient(#f9f2e8ed,#fff8e8a0 36%,#f7efddaa 69%,#f5edddfa 84%),url('assets/room.webp') center center/cover}
#title:after{content:"";position:absolute;inset:15px;border:1px solid #8d977f77;border-radius:150px 150px 10px 10px;z-index:-1;pointer-events:none}
.edition{font-size:11px;font-weight:700;letter-spacing:.22em;color:#6f7a64;padding-top:12px}
#title h1{font-size:clamp(54px,12vw,70px);font-weight:800;letter-spacing:.16em;line-height:1.25;color:#294638;padding-left:.16em;position:relative}
#title h1 span{display:block;font:500 15px var(--sans);letter-spacing:.25em;margin:15px 0 0;padding:0;color:#697258}
#title p{font:500 13px/1.85 var(--sans);color:#6b6755;margin:0 0 7px;position:relative}
#tcv{width:100%;max-width:360px;aspect-ratio:840/480;filter:drop-shadow(0 7px 6px #694e2320);position:relative;margin:2px 0}
.cover-stamp{position:absolute;right:25px;top:42%;font:700 10px/1.7 var(--serif);color:#a86b49;letter-spacing:.12em;width:63px;height:63px;border:1px solid #bb8e65;border-radius:50%;display:grid;place-content:center;transform:rotate(10deg);z-index:2;background:#fff8e770}
.big{background:#3e5f4b;border:1px solid #304c3a;box-shadow:0 4px 0 #2c4936;border-radius:10px;padding:15px 20px;letter-spacing:.04em;font-size:15px;font-weight:700;color:#fffdf3}
.big:hover{background:#4f735b}.big.alt{background:#fffaf1bb;border:1px solid #b9c0aa;color:#47604a;box-shadow:0 3px 0 #d5dac8;font-size:14px}.big.alt:hover{background:#fffdf6}
#title .big{max-width:300px!important}#title .big.alt{box-shadow:none;background:#fff9ec77;font-size:13px}
.hud{top:12px;left:13px;right:13px;padding:env(safe-area-inset-top,0px) 0 0;gap:0;filter:drop-shadow(0 4px 10px #64533517)}
.hrow{background:#fffcefef;border:1px solid #fff;border-radius:15px 15px 0 0;min-height:61px;padding:8px 14px 9px 10px;color:#364638;gap:10px}
.visitor-icon{height:40px;width:40px;background:#dce1cc;border:1px solid #c5ceba;border-radius:50%;background-size:88%;background-position:center 2px;background-repeat:no-repeat;flex-shrink:0}
.visitor-info{display:grid;gap:4px;flex:1;min-width:0}.visitor-info small{font-size:9px;font-weight:600;color:#8c927c;letter-spacing:.14em}#who{font-size:12px;font-weight:700;white-space:nowrap}
#time-left{font:700 26px Georgia,serif;color:#45634c;font-variant-numeric:tabular-nums;min-width:42px;text-align:right}#time-left small{font:500 9px var(--sans);padding-left:3px}
.pbar{height:4px;background:#d3d9c7;border-radius:0 0 12px 12px}.pbar #tb{background:#739171!important;border-radius:0 5px 5px 0;transition:width .1s linear}
.hud:has(#tbar[hidden]){opacity:0}#mute{width:30px;height:30px;right:15px;top:calc(91px + env(safe-area-inset-top,0px));background:#fffbecdd;color:#3f6149;border:1px solid #b5c09b;box-shadow:0 2px 3px #503f2510;font-size:12px}
#tray{gap:7px;padding:8px 12px calc(12px + env(safe-area-inset-bottom,0px));background:#f8f2e6fa;border-top:1px solid #c5c5ac;box-shadow:0 -8px 28px #67522e17;border-radius:19px 19px 0 0}
.tray-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:4px;align-items:center;min-height:20px;padding:0 2px 3px;font-size:10px;color:#81836d}.tray-head #action-status{font-size:9px;padding:3px 6px;border-radius:5px;background:#e6ebda;color:#5f7553;white-space:nowrap}
#tray button{min-height:52px;grid-template-columns:25px 1fr;align-items:center;justify-items:center;gap:5px;padding:9px 11px;background:#fffdf5;border:1px solid #dedfcf;border-bottom:3px solid #d2d8c3;border-radius:10px;color:#6d8159}
#tray button b{font-size:13px;font-weight:700;color:#4b5c41;justify-self:start}#tray button svg{width:23px;height:23px}#tray button:active,#tray button.acting{background:#e3ebd5;border-color:#9cae87}#tray button:disabled{opacity:.55;cursor:default}
#banner{background:#f9f4e8eb;backdrop-filter:blur(9px);padding:28px;color:#40503d;gap:13px}#banner .lv{font-size:34px;font-weight:700}#banner span{font-size:15px;line-height:1.85;color:#656d5a}#banner .no{font-size:10px;color:#ac8150;letter-spacing:.18em}#banner em{color:#7c886d;font:500 12px/1.9 var(--sans);background:#e7ecdc;padding:12px;border-radius:9px}#banner small{color:#fff;opacity:1;font-size:14px;letter-spacing:.08em;background:#49664f;border-radius:9px;padding:13px;box-shadow:0 4px 0 #314b37;margin-top:12px}
.guest-portrait{width:110px;height:135px;justify-self:center;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 3px 3px #4b3c1d14)}
.ov{background:#1e352d66;backdrop-filter:blur(9px)}#card{padding:26px 22px 24px;border-radius:17px;box-shadow:0 12px 50px #0c231c44;background:linear-gradient(145deg,#fffdf6,#f5efe0);border:1px solid #fff;gap:15px;scrollbar-width:thin}#card h2{color:#3b533e;font-size:25px}#card p{font-size:14px;line-height:1.9}.sub{color:#7b806a;font-size:12px!important}#card .no{font-size:10px;letter-spacing:.13em;color:#a68b59}.stars{color:#bc9252;font-size:31px;letter-spacing:4px}.rv{font-size:19px!important;font-weight:500;line-height:1.85!important;padding:6px}.cta{border:1px solid #d6dec5;border-radius:10px;background:#e9eedd;padding:16px;gap:9px}.cta small{font-size:11px;color:#738366}.cta b{font-size:14px;color:#496449}
.toast{top:calc(118px + env(safe-area-inset-top,0px));background:#344c3bea;border:1px solid #ffffff55;box-shadow:0 5px 18px #4e47222b;border-radius:10px;font-weight:500;font-size:12px;line-height:1.7;padding:10px 14px}.toast.big{top:calc(118px + env(safe-area-inset-top,0px));font-size:12px;background:#9b6649ef}
img.full{border-radius:6px;box-shadow:0 4px 15px #63563112}.real{gap:10px}.ra{border-color:#d8ddca;border-radius:9px}.chips button{font-weight:500;border-color:#c9d1b9}
#fc{width:100%!important;max-width:280px;height:auto!important;aspect-ratio:1}#card input{min-width:0;max-width:100%}
#whole-editor{width:100%;max-width:320px;aspect-ratio:1;justify-self:center;border-radius:10px;border:1px solid #b9c8be;touch-action:none;cursor:crosshair}
.photo-steps{font-size:11px;font-weight:700;color:#4d7965;padding:7px;background:#e6eee5;border-radius:6px}.photo-help{min-height:35px}.photo-tools,.photo-brush{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}.photo-tools button,.photo-brush button{border:1px solid #b5c7b8;border-radius:7px;background:#f6faf2;padding:9px;color:#456653;font-size:12px}.photo-brush span{font-size:12px}.photo-brush input{width:90px}#whole-name{padding:12px;border:1px solid #bdcbb8;border-radius:8px;font:500 16px var(--sans);text-align:center}.photo-limit{background:#f0eadc;padding:10px;color:#7a725e;font-size:11px!important;text-align:left;line-height:1.7!important;border-radius:7px}
#context-hint{min-width:0;line-height:1.45;flex:1}.tray-head{min-height:29px;align-items:center}#action-status{flex-shrink:0}
.desktop-note{display:none;color:#e5e6cf;position:fixed;left:calc(50% - 510px);top:30%;max-width:220px}.desktop-note b{font:600 45px var(--serif);letter-spacing:.18em;display:block}.desktop-note span{font:400 21px/1.9 var(--serif);display:block;margin:25px 0;color:#d7ddc5}.desktop-note small{font-size:12px;color:#abbca5;line-height:2}.desktop-note i{font-style:normal;font-size:10px;letter-spacing:.15em;color:#a3b196;display:block;margin-top:70px}
@media(min-width:1000px){#app{margin-left:200px;height:calc(100dvh - 40px);border-radius:20px;border:1px solid #afc4a650}.desktop-note{display:block}}
@media(max-height:700px){#title{gap:8px;padding:18px 30px}#title h1{font-size:46px}#tcv{width:72%;max-height:145px}#title h1 span{font-size:12px;margin-top:8px}#title p{font-size:11px}.edition{font-size:9px}#title .big{padding:11px}.cover-stamp{top:36%;right:27px;width:50px;height:50px;font-size:8px}#tray button{min-height:45px;padding:5px 8px}.hud{top:7px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.toast{animation:none}.fl{animation:none}}
/* The comic edition: ink edges, bouncy buttons, warm paper, and bold captions. */
body{background:#4f7569;background-image:radial-gradient(#d8e4c630 1.4px,transparent 1.4px);background-size:19px 19px}#title h1{font-family:var(--sans);font-weight:900;color:#345847;text-shadow:3px 4px 0 #e2b673;letter-spacing:.1em}#title:after{border:2px solid #4d6755;border-radius:70px 80px 14px 18px}#title h1 span{letter-spacing:.13em}#title .edition{background:#f9cd73;color:#614c32;padding:7px 12px;border:1.5px solid #725f41;transform:rotate(-3deg);border-radius:4px}.cover-stamp{background:#ffc780;border:2px solid #85633c;color:#63452e;transform:rotate(12deg)}.big{border:2px solid #344a38;box-shadow:3px 4px 0 #344a38}.big.alt{border:1.5px solid #748569}#title .big{font-size:15px}#tray{border:2px solid #53644b;border-bottom:0;border-radius:20px 17px 0 0;background:#fff9e8}#tray button{border:1.6px solid #6a7960;border-bottom-width:3px;background:#fffdf4;box-shadow:1px 2px 0 #aebd9c}#tray button[data-a="pee"]{background:#fff3ba}#tray button[data-a="bite"]{background:#ffe3ca}#tray button[data-a="love"]{background:#ffe5e8}.hrow{border:2px solid #657354;border-bottom:0}.pbar{border:2px solid #657354;border-top:0;height:6px}#card{border:2px solid #617052;box-shadow:5px 6px 0 #283a2f55}#card h2{font-family:var(--sans);font-weight:900}#banner .lv{font-family:var(--sans);font-weight:900}.practice{max-width:300px;width:100%;background:#f4cf78;border:1.5px solid #8f733d;border-radius:9px;padding:11px;color:#5c4b2b;font-size:13px;font-weight:700;box-shadow:0 3px 0 #b0914e}#pause-game{position:absolute;z-index:7;right:52px;top:calc(91px + env(safe-area-inset-top,0px));width:30px;height:30px;border:1px solid #71805e;border-radius:50%;background:#fffbea;color:#3d593e;font-weight:900}#app:has(#title:not([hidden])) #pause-game{display:none}#app:has(#tray[hidden]) #pause-game{display:none}#title .big.alt{font-size:12px;padding:10px}#title{gap:10px}
@media(max-height:700px){#title{gap:7px;padding:15px 24px}#title h1{font-size:42px}#title p{font-size:10px;line-height:1.65}#tcv{max-height:112px}.practice{padding:9px;font-size:12px}#title .big{padding:10px}#title .edition{padding:4px 8px;font-size:8px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.book-link{padding:6px;background:none;border:0;color:#667653;font-size:11px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.career-offers{display:grid;gap:10px}.career-offer{text-align:left;display:grid;grid-template-columns:40px 1fr;gap:4px 8px;background:#fff9e6;border:2px solid #89966c;border-radius:11px;padding:13px;color:#42563b;box-shadow:2px 3px 0 #d3d8bb}.career-offer span{grid-row:span 2;font-size:28px;align-self:center;text-align:center}.career-offer b{font-size:15px}.career-offer small{font-size:11px;line-height:1.5;color:#7c7d65}.ending-punch{background:#f8d477;border:1px solid #9b7b3b;transform:rotate(-1deg);padding:9px;font-weight:800;font-size:15px!important;color:#664c26}.fate-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fate-tile{display:grid;gap:7px;padding:13px 7px;background:#e8e8de;border:1px dashed #a6ad98;border-radius:9px;color:#8a907e}.fate-tile.found{background:#fff3cd;border:2px solid #9b975e;color:#45563d}.fate-tile span{font-size:25px}.fate-tile b{font-size:12px}.fate-tile small{font-size:10px}.recipe{text-align:left;background:#eef0e2;border-radius:8px;padding:12px}.recipe summary{cursor:pointer;font-size:12px;font-weight:700}.recipe p{font-size:12px!important}#card h2 small{font-size:16px;color:#929575}
a.download-card{text-decoration:none;display:block;text-align:center}

.photo-header{position:sticky;top:-24px;z-index:3;background:#fffbee;display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #c4cbb4}.photo-header h2{font-size:20px!important;margin:0!important;flex:1}.photo-header button{flex-shrink:0;min-height:44px;border:1.5px solid #667557;border-radius:10px;background:#fff5d6;color:#344a38;padding:9px 12px;font-weight:800}#whole-editor{max-height:36svh;width:100%;object-fit:contain}.photo-help{min-height:0}#card:has(#whole-editor){gap:10px;padding-top:12px}.photo-limit{margin:0!important}.photo-steps{font-size:12px}

.collection-head{display:flex;align-items:center;gap:14px;position:sticky;top:-24px;background:#fffbee;padding:12px 0;z-index:2}.collection-head h2{margin:0!important;flex:1}.collection-head button{min-height:44px;padding:8px 12px;border:1px solid #71805e;background:#fff5d6;border-radius:9px;color:#344a38;font-weight:700}.collection-tabs{display:flex;gap:8px}.collection-tabs button{flex:1;padding:12px 6px;border:2px solid #71805e;background:#f8f5e6;color:#405c46;border-radius:10px;font-weight:800}.collection-tabs button[aria-selected="true"]{background:#405f4d;color:#fff9e6}
.pet-chooser{width:100%;max-width:340px;margin:4px auto 10px}.pet-options{display:flex;gap:8px}.pet-options button{flex:1;border:1.5px solid #7b8769;border-radius:13px;padding:9px 5px;background:#fff9e9;color:#425d4b;font:700 14px inherit;min-height:40px}.pet-options button[aria-pressed=true]{background:#405e4e;color:#fff9e9;box-shadow:0 3px 0 #a1aa83}.pet-chooser input{box-sizing:border-box;width:100%;margin-top:8px;padding:8px 12px;border:1px solid #9aa68a;border-radius:10px;background:#fffdf3;color:#405e4e;font-size:14px}.pet-chooser input[hidden]{display:none}@media(max-height:740px){.pet-chooser{margin:0 auto 6px}.pet-options button{min-height:34px;padding:5px}.pet-chooser input{padding:5px}}
#skill-progress{grid-column:1/-1;color:#687546;font-size:11px;text-align:center;padding:2px}#special-action{grid-column:1/-1;background:#f5cf69;color:#3d4c37;min-height:42px;font-weight:900;border:2px solid #9b813e}#special-action[hidden],#skill-progress[hidden]{display:none}

/* Skill is a full-width text button, not the icon/text grid of regular actions. */
#tray #special-action{display:flex;align-items:center;justify-content:center;grid-column:1/-1;grid-template-columns:none;width:100%;min-width:0;min-height:44px;height:auto;padding:10px 8px;white-space:nowrap;word-break:normal;font-size:14px;line-height:1.4;background:#f5cf69;color:#3d4c37;border:2px solid #9b813e}
#tray #special-action[hidden]{display:none}

/* 防止連點兩下放大 */
html,body,#app{touch-action:manipulation}:where(#app *){touch-action:manipulation}