:root{font-family:system-ui,'PingFang TC',sans-serif;color:#303a35;background:#e7e9df;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1280px;margin:auto;padding:18px 24px}header{display:flex;align-items:center;justify-content:space-between;gap:12px}small{font-size:12px;letter-spacing:.15em;color:#657267}h1{font-size:24px;letter-spacing:.04em;margin:5px 0 14px;font-weight:750}.status{display:flex;gap:15px;font-size:16px}.bar{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:14px}.bar progress{width:110px;accent-color:#808e55}.bar #clock{margin-left:auto}button{font:inherit;border:1px solid #9ca797;background:#f9faf2;color:#3a483e;padding:8px 14px;border-radius:7px;cursor:pointer}button:hover{background:#fff}button:focus-visible{outline:3px solid #a86f32;outline-offset:3px}button:disabled{opacity:.6}.stage{position:relative;height:min(64vh,720px);min-height:360px;border-radius:10px;overflow:hidden;background:#dadccf;box-shadow:0 12px 35px #33453320}#game{display:block;width:100%;height:100%;touch-action:none}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#283c3620;backdrop-filter:blur(2px)}article{width:min(440px,90%);background:#fbfaf0ed;padding:22px;text-align:center;border-radius:14px;box-shadow:0 10px 30px #172c3420}article h2{font-size:25px;margin:4px}article p{font-size:15px;line-height:1.8}#portrait{width:85px;height:85px}#start{background:#9d5936;color:#fff;border:0;padding:11px 26px}#toast{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:#fff9e9ee;padding:10px 16px;border-radius:8px;opacity:0;pointer-events:none;max-width:95%;font-size:15px}#toast.show{opacity:1}.caption{position:absolute;bottom:10px;left:14px;font-size:12px;color:#3d4b3b;background:#f6f5e5d9;padding:5px 9px;border-radius:5px}.bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;padding:10px 0;color:#576459}details{font-size:14px;line-height:1.8;padding:8px 0}summary{cursor:pointer}.controls{display:none;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,44px);gap:5px;justify-content:center}.up{grid-column:2}.left{grid-column:1}.down{grid-column:2}.right{grid-column:3}.ctrl{touch-action:none;user-select:none;font-size:20px}@media(max-width:720px){main{padding:10px}header{flex-wrap:wrap}.status{font-size:14px;margin-bottom:10px}h1{font-size:20px;margin-bottom:6px}.bar{flex-wrap:wrap;gap:7px}.bar label{font-size:13px}.bar #clock{display:none}.stage{height:55dvh;min-height:330px}.bottom>span:nth-child(2){display:none}.controls{display:grid}.caption{font-size:10px}article{padding:12px}article p{font-size:13px}}@media(pointer:coarse){.controls{display:grid}}
#bagPanel{position:absolute;right:10px;top:10px;width:180px;padding:8px 10px;background:#fff9ebed;border:1px solid #b5ad96;border-radius:10px;pointer-events:none;color:#4b4e3b;font-size:12px}#moodPortrait{display:block;width:64px;height:48px;margin:0 auto}#emotionLabel{display:block;text-align:center;margin-bottom:5px}#foodList>div{padding:4px 0;border-top:1px solid #d9d0b7}#foodList small{display:block;font-size:10px;letter-spacing:0}.dropped{opacity:.6}.emptyBag{display:block;text-align:center;color:#7a8069}#toast{z-index:3;top:95px}#overlay{z-index:4}@media(max-width:720px){#bagPanel{width:137px;font-size:10px;padding:5px;right:5px;top:5px}#moodPortrait{width:48px;height:36px}#travelMode{font-size:12px;padding:7px}.caption{max-width:90%}}

/* A fixed, scene-independent frame; only the original PNG is transformed. */
body:has(#homeStory:not([hidden])){overflow:hidden}
#overlay:has(#homeStory:not([hidden])){position:fixed;inset:0;z-index:1000;place-items:center;background:#28251f;backdrop-filter:none;overflow:auto}
#overlay article:has(#homeStory:not([hidden])){width:min(1100px,100vw,calc((100dvh - 210px)*16/9));padding:0 0 16px;background:#fbfaf0;box-shadow:none;border-radius:0;display:flex;flex-direction:column;align-items:center;flex-shrink:0}
#homeStoryFrame:not([hidden]){position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;flex-shrink:0;background:#28251f}
#homeStory:not([hidden]){display:block;width:100%;height:100%;object-fit:cover;object-position:var(--story-position,50% 50%);transform-origin:center;animation:rest-breathe 8s ease-in-out infinite}
#homeStory[hidden],#homeStoryFrame[hidden],#homeStorySelect[hidden]{display:none}
#overlay article:has(#homeStory:not([hidden])) #portrait{display:none}
#overlay article:has(#homeStory:not([hidden])) h2{font-size:clamp(18px,2vw,25px);margin:8px 12px 0}
#overlay article:has(#homeStory:not([hidden])) p{margin:6px 16px 12px;line-height:1.5;font-size:14px}
#homeStorySelect{margin:10px 12px 0;max-width:90%;padding:6px;font:inherit}
@keyframes rest-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:720px){
 #overlay article:has(#homeStory:not([hidden])){width:100%;min-height:100dvh;justify-content:center;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 #homeStoryFrame:not([hidden]){aspect-ratio:4/3;max-height:calc(100dvh - 230px)}
 #homeStory:not([hidden]){object-position:var(--story-mobile-position,50% 50%)}
}
#innPrompt{border:1px solid #a99b80;border-radius:14px;background:#fff9eb;color:#303a35;text-align:center;max-width:90vw}
#innPrompt::backdrop{background:#172c3470}

/* Contextual surprise-cat action, also reachable on touch screens. */
#feedCat{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:8;max-width:90%;padding:12px 18px;border:2px solid #b98151;border-radius:18px;background:#fff3d9;color:#654c36;font-weight:700;box-shadow:0 3px 12px #51463730}
#feedCat[hidden]{display:none}
#feedCat:disabled{opacity:.85}

#carDamagePanel{margin-top:8px;padding-top:6px;border-top:1px solid #c7bba4}
#carDamagePanel[hidden]{display:none}
#carDamagePreview{display:block;width:100%;height:auto}
#carDamageLabel{display:block;font-size:11px;line-height:1.4;color:#755139}

#mapPanel{position:absolute;left:8px;top:8px;z-index:2;padding:6px;background:#fffaf0f5;border:1px solid #b9c0ad;border-radius:10px;box-shadow:0 2px 10px #354d3525;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto;width:max-content}
#cityMap{display:block;cursor:pointer;touch-action:manipulation;border-radius:5px}
.mapModes{display:flex;gap:4px;margin-bottom:5px}.mapModes button{flex:1;font-size:12px;padding:6px 5px;white-space:nowrap}.mapModes button[aria-pressed="true"]{background:#43674f;color:#fff;border-color:#43674f}
#mapShopSelect{display:block;width:100%;max-width:230px;font:inherit;font-size:12px;padding:5px;border:1px solid #aeb8a4;border-radius:4px;background:#fffdf7;color:#36483c}.mapSelectLabel{display:block;font-size:11px;margin:4px 0}
#mapSelection{max-width:230px;font-size:12px;line-height:1.45;margin-top:5px;overflow-wrap:anywhere}.mapLegend{display:block;max-width:230px;font-size:10px;line-height:1.5;letter-spacing:0;margin-top:5px}
#mapPanel.expanded{z-index:3}#mapPanel.expanded #mapShopSelect,#mapPanel.expanded #mapSelection{max-width:100%}
@media(max-width:720px){#mapPanel{left:4px;top:4px;padding:4px}.mapLegend{display:none}#mapShopSelect,#mapSelection{max-width:180px}.mapModes button{font-size:11px;padding:5px 3px}}

.zoomControls{display:inline-flex;gap:3px;white-space:nowrap}.zoomControls button{padding:6px 9px}.zoomControls button:disabled{opacity:.45}

/* Compact translucent radar; explanatory text stays out of the play area. */
#mapPanel{padding:0;background:transparent;border:0;box-shadow:none;overflow:hidden}
#cityMap{border-radius:50%;border:1px solid #f9f6e5b3;box-shadow:0 2px 7px #263c3420}
.mapModes{gap:3px;margin-bottom:4px}.mapModes button{font-size:11px;padding:4px 5px;background:#fffaf099;border-color:#aeb8a477}.mapModes button[aria-pressed="true"]{background:#43674fb3}
#mapPanel .mapLegend,#mapPanel #mapSelection,#mapPanel .mapSelectLabel{display:none}
#mapPanel:not(.expanded) #mapShopSelect{display:none}
#mapPanel.expanded #cityMap{border-radius:10px}
#mapPanel.expanded #mapShopSelect{margin-top:4px;background:#fffaf0b3}
@media(max-width:720px){#mapPanel{padding:0}.mapModes button{font-size:10px;padding:4px}}

/* The game fills the browser viewport; HUD remains accessible above the canvas. */
html,body{width:100%;height:100%;overflow:hidden}
main{max-width:none;margin:0;padding:0}
.stage{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;border-radius:0;box-shadow:none}
header>div:first-child,main>details,.bottom,.caption{display:none}
header .status{position:fixed;bottom:12px;left:12px;z-index:6;background:#fff9e9dc;padding:7px 10px;border-radius:8px;pointer-events:none}
.bar{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:6;max-width:calc(100vw - 20px);width:max-content;margin:0;padding:7px 9px;background:#fff9e9e8;border-radius:9px;gap:8px}
#mapPanel,#bagPanel{top:72px}
.controls{position:fixed;right:12px;bottom:12px;z-index:6}
#toast{top:82px}
@media(max-width:900px){.bar{flex-wrap:wrap;justify-content:center;width:calc(100vw - 12px);top:5px;gap:4px}.bar #mood,.bar #hunger{display:none}.bar #clock{display:block;margin-left:0}.bar button{font-size:12px;padding:6px 8px}#mapPanel,#bagPanel{top:100px}header .status{font-size:12px;gap:8px;bottom:10px;left:8px}#toast{top:110px}}

/* Non-modal arrival prompt: the scene and movement continue until entry is confirmed. */
#innPrompt{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);z-index:8;width:max-content;max-width:calc(100% - 24px);padding:12px 18px;box-shadow:0 5px 20px #27392b30}
#innPrompt[hidden]{display:none}#innPrompt h2{font-size:18px;margin:0 0 4px}#innPrompt p{font-size:14px;margin:4px 0 10px}
header .status{flex-wrap:wrap;max-width:calc(100vw - 24px)}

/* The park uses the existing full-viewport canvas, never a modal card. */
#parkControls{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);z-index:9;display:flex;align-items:center;justify-content:center;gap:8px;max-width:calc(100vw - 24px);width:max-content;padding:10px 14px;border-radius:14px;background:#fff8e8ed;box-shadow:0 4px 16px #25371c30;flex-wrap:wrap}
#parkControls[hidden],#parkControls button[hidden]{display:none}
#parkHint{font-size:14px;color:#3f573c}
.inCentralPark #mapPanel,.inCentralPark #bagPanel,.inCentralPark #feedCat{display:none}
.inCentralPark #travelMode{opacity:.55}
@media(max-width:700px){#parkHint{flex-basis:100%;text-align:center}#parkControls{bottom:72px;font-size:13px;padding:8px}}

#cancelGuide[hidden]{display:none}#cancelGuide{border-color:#ad6735;color:#82451e}

/* Persistent game time and a readable, non-blocking purchase status. */
#clock.worldClock{position:fixed;left:8px;top:72px;z-index:7;padding:8px 12px;background:#fff8e8ed;color:#293a32;border:1px solid #b5aa88;border-radius:9px;font-size:16px;font-weight:750;white-space:nowrap;pointer-events:none}
#mapPanel{top:118px}
#shopPrompt{position:fixed;left:50%;bottom:65px;transform:translateX(-50%);z-index:7;display:grid;gap:6px;width:max-content;max-width:calc(100vw - 32px);padding:14px 22px;border-radius:13px;background:#fffbea;border:3px solid #44845a;box-shadow:0 4px 20px #18271f55;color:#22412d;pointer-events:none;text-align:center}
#shopPrompt[hidden]{display:none}#shopPromptTitle{font-size:22px}#shopPromptDetail{font-size:16px;font-weight:650}
#shopPrompt[data-state="closed"]{border-color:#b8623b;color:#773d24;background:#fff1df}
#shopPrompt[data-state="success"]{border-color:#dba12e;background:#fff2b8;color:#594016}
#shopPrompt[data-state="owned"]{border-color:#78908a;color:#38504b}
.inCentralPark #shopPrompt{display:none}
@media(max-width:900px){#clock.worldClock{top:100px;font-size:13px;padding:6px 9px}#mapPanel{top:140px}#shopPrompt{bottom:126px;padding:10px 14px}#shopPromptTitle{font-size:18px}#shopPromptDetail{font-size:14px}}

/* Nearby interactions share one stack so simultaneous prompts never cover each other. */
#interactionPrompts{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);max-height:calc(100dvh - 160px);overflow-y:auto;pointer-events:none}
#interactionPrompts>#feedCat,#interactionPrompts>#shopPrompt,#interactionPrompts>#innPrompt{position:static;left:auto;bottom:auto;transform:none;flex:none;max-width:100%;margin:0;box-sizing:border-box;pointer-events:auto}
#interactionPrompts>#shopPrompt{pointer-events:none}
@media(max-width:900px){#interactionPrompts{bottom:104px;max-height:calc(100dvh - 225px);gap:8px}}

#interactionPrompts>#shopPrompt{pointer-events:auto}#buyMeal[hidden]{display:none}#buyMeal{background:#53794a;color:#fff;border-color:#45693d;font-weight:750}

#clawEnter{position:absolute;bottom:108px;left:50%;transform:translateX(-50%);z-index:3;background:#fff0bb;border:2px solid #ad6749;white-space:nowrap}
#clawControls{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);z-index:5;background:#fff6e6f5;padding:7px 12px;border-radius:12px;width:min(94%,720px);text-align:center;border:1px solid #65968a}
#clawControls strong{margin-right:12px}#clawMessage{font-size:13px}#clawControls button{margin:4px 2px;padding:7px 12px}#clawDrop{background:#477b73;color:white}#clawLeft,#clawRight{touch-action:none;min-width:44px}
#clawWall{position:absolute;inset:10px;z-index:10;border-radius:16px;padding:18px;overflow:auto;background:#fff7e9;color:#664c36;box-shadow:0 0 0 30px #30282080}#clawWall header{gap:8px}#clawWall h2{font-size:20px}#clawWall p{font-size:13px}#clawShelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}#clawShelf figure{margin:0;padding:12px;background:#ead9bd;border-radius:10px;border-bottom:7px solid #aa8159;text-align:center}#clawShelf img{width:100%;height:105px;object-fit:contain}#clawShelf figcaption{font-size:12px;line-height:1.5}
#clawEnter[hidden],#clawControls[hidden],#clawWall[hidden],#clawNewRound[hidden]{display:none}
.claw-playing #mapPanel,.claw-playing #bagPanel,.claw-playing #parkControls,.claw-playing #parkEnter,.claw-playing #feedCat,.claw-playing #shopPrompt,.claw-playing .caption,.claw-playing #clock,.claw-playing .controls,.claw-playing #home,.claw-playing #travelMode,.claw-playing .zoomControls{visibility:hidden}
@media(max-width:720px){#clawControls{padding:5px}#clawMessage{display:block;font-size:11px}#clawControls button{font-size:12px;padding:6px 9px}#clawWall{padding:10px}#clawShelf{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}}

#guestTask{position:absolute;z-index:12;right:16px;bottom:90px;width:min(320px,calc(100% - 32px));box-sizing:border-box;padding:14px;background:#fff8eaf5;border:2px solid #518992;border-radius:16px;box-shadow:0 5px 22px #233f4333;color:#36575b}
#guestTask[data-phase="ringing"]{left:50%;right:auto;top:22%;bottom:auto;transform:translateX(-50%);border-color:#c68b47}
#guestTask p{font-size:14px;line-height:1.6;margin:8px 0}#guestTask button{margin:4px;padding:8px 10px}#guestAccept,#guestBoard,#guestDeliver{background:#477b73;color:white}
#guestTask[hidden],#guestTask button[hidden],.inCentralPark #guestTask,.claw-playing #guestTask{display:none}
@media(max-width:700px){#guestTask{right:8px;bottom:145px;width:260px;padding:10px}#guestTask p{font-size:12px}}