*{box-sizing:border-box}body{margin:0;background:#f8f4e7;color:#244c44;font-family:"Microsoft JhengHei",system-ui,sans-serif}button,a,input{touch-action:manipulation}button,a{font:inherit}button{cursor:pointer;border:1px solid #bdd3c3;background:#fffdf5;color:#244c44;border-radius:30px;padding:11px 20px;font-weight:700;font-size:16px}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #e99426;outline-offset:4px}header{background:#14685f;color:white;display:flex;align-items:center;justify-content:space-between;padding:16px 4%;gap:14px}header a{color:inherit;text-decoration:none;font-size:16px}header span{display:flex;gap:15px;align-items:center}header b{font-size:19px}header button{background:#ffffff12;color:white;border-color:#ffffff55}main{max-width:1240px;margin:0 auto;padding:24px 28px 12px}.game-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 18px}.eyebrow{font-size:14px;letter-spacing:.12em;color:#637568}h1{margin:5px 0 0;font-size:32px;letter-spacing:.04em}.stats{display:flex;gap:12px}.stats span{background:#fff;padding:12px 20px;border-radius:18px;font-size:16px;white-space:nowrap}.stats b{font-size:30px;margin:0 6px;color:#14685f;font-variant-numeric:tabular-nums}#room{position:relative;isolation:isolate;overflow:hidden;height:clamp(340px,57vw,590px);border-radius:28px;border:5px solid white;box-shadow:0 9px 0 #e0d8bb;background:#6eaba3}.backdrop{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.room-note{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:#fffaf2ec;border-radius:22px;padding:10px 20px;font-size:16px;white-space:nowrap}#cat{position:absolute;width:clamp(110px,19vw,200px);height:auto;bottom:9%;left:40%;pointer-events:none;z-index:4;filter:drop-shadow(0 8px 3px #79502130)}.mouse{position:absolute;bottom:12%;width:82px;height:72px;padding:0;border:0;background:transparent;font-size:58px;line-height:1;z-index:5;filter:drop-shadow(0 5px 2px #79502140);-webkit-tap-highlight-color:transparent;user-select:none}.mouse:focus-visible{outline:4px dashed #14685f;background:#ffffff55}.mouse.targeted{background:#fff8;border-radius:50%;outline:3px solid #efba48}.mouse.caught{pointer-events:none;animation:poof .36s forwards}#paw{position:absolute;bottom:12%;font-size:60px;z-index:6;opacity:0;pointer-events:none}#paw.slap{animation:slap .32s ease-out}.spark{position:absolute;bottom:28%;font-size:25px;font-weight:900;color:#fff;text-shadow:0 2px 3px #744717;animation:float .8s forwards;pointer-events:none;z-index:7}#overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#16413b35;backdrop-filter:blur(3px)}#overlay[hidden]{display:none}.welcome{text-align:center;padding:24px 36px;background:#fffdf3f5;max-width:calc(100% - 28px);border:3px solid white;border-radius:28px;box-shadow:0 14px 45px #193b3b25}.welcome-icon{font-size:45px}.welcome h2{font-size:26px;margin:6px 0 12px}.welcome p{font-size:17px;line-height:1.8;margin:10px 0 18px}fieldset{border:0;padding:0;margin:0 0 20px}legend{margin:0 auto 10px;font-size:14px;color:#64756d}fieldset label{display:inline-block;font-size:16px;margin:0 8px}input{accent-color:#14685f;width:18px;height:18px;vertical-align:middle}.primary{background:#efad35;border:0;color:#44351a;box-shadow:0 5px 0 #cc8721;min-width:190px;padding:14px 25px;font-size:20px}.below{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px}.below p{font-size:17px;line-height:1.6;margin:0}.keyboard{text-align:center;font-size:14px;color:#718075;margin:15px 0}body.paused .mouse,body.paused .spark{animation-play-state:paused}@keyframes slap{0%{opacity:0;transform:translateY(-45px) rotate(-35deg)}45%{opacity:1;transform:translateY(0) rotate(15deg)}100%{opacity:0;transform:translateY(-8px)}}@keyframes poof{to{opacity:0;transform:scale(.3) rotate(20deg)}}@keyframes float{to{opacity:0;transform:translateY(-65px)}}@media(max-width:600px){header{padding:12px 14px;flex-wrap:wrap}header span{font-size:14px;gap:7px}header b{font-size:16px}header button{font-size:14px;padding:8px 12px}main{padding:20px 12px}.game-heading{gap:10px;align-items:flex-start}h1{font-size:25px}.eyebrow{font-size:13px}.stats{gap:6px}.stats span{font-size:13px;padding:8px;text-align:center}.stats b{display:block;font-size:25px;margin:0}#room{height:460px;border-width:3px;border-radius:22px}.backdrop{object-fit:cover}.room-note{font-size:14px;padding:8px 12px}.welcome{padding:20px 16px}.welcome h2{font-size:23px}.mouse{width:70px;height:68px;font-size:52px}.below p{font-size:15px}.below button{white-space:nowrap;padding:10px 14px}.keyboard{font-size:13px}#cat{width:130px}}@media(prefers-reduced-motion:reduce){.spark{animation:none} .mouse.caught{animation:none;opacity:0}#paw.slap{animation:none;opacity:1}}

#cat,.mouse,#paw,.spark{bottom:auto}#overlay{z-index:2000}.room-note{z-index:1000;pointer-events:none}.mouse{transition:opacity .1s}#mice{position:absolute;inset:0;pointer-events:none}.mouse{pointer-events:auto}

#cheese{position:absolute;left:50%;top:65%;transform:translate(-50%,-50%);font-size:64px;line-height:1;z-index:8;pointer-events:none;filter:drop-shadow(0 5px 5px #75511c55);background:#ffedab77;border-radius:50%;padding:8px}#cheese.stolen{filter:grayscale(.7);opacity:.55}.stats .guard-stat b{font-size:20px}.guard-stat{display:flex;align-items:center;gap:5px}@media(max-width:600px){.guard-stat{display:block}.stats .guard-stat b{font-size:17px;margin:6px 0}#cheese{font-size:52px}}

#cheese{width:100px;padding:0;background:none;border-radius:0;font-size:0}#cheese img{display:block;width:100%;height:auto}@media(max-width:600px){#cheese{width:86px}}

#audio-settings{position:relative;font-size:16px}#audio-settings summary{cursor:pointer;list-style:none;border:1px solid #ffffff55;border-radius:24px;padding:10px 16px;white-space:nowrap}#audio-settings summary::-webkit-details-marker{display:none}.audio-panel{position:absolute;z-index:3000;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 28px));background:#fffef7;color:#244c44;padding:20px;border-radius:20px;box-shadow:0 10px 35px #163a4144}.audio-panel label{display:flex;justify-content:space-between;font-size:16px;font-weight:700}.audio-panel input{display:block;width:100%;height:32px;margin:6px 0 15px;accent-color:#14685f}.audio-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}header .audio-buttons button{color:#244c44;background:#edf4eb;border:1px solid #bdd3c3;font-size:14px;padding:10px}#audio-status{font-size:14px;line-height:1.5;margin:10px 0 0}#audio-status:empty{display:none}@media(max-width:600px){header{justify-content:space-between}#audio-settings summary{font-size:14px;padding:8px 12px}}

#cheese{top:75%}

.header-actions{display:flex;gap:8px;align-items:center}.header-actions button{white-space:nowrap}body.fullscreen-fallback{position:fixed;inset:0;overflow:auto;z-index:9999}html:fullscreen{overflow:auto;background:#f8f4e7}html:fullscreen main,.fullscreen-fallback main{max-width:1500px}html:fullscreen #room,.fullscreen-fallback #room{height:clamp(320px,calc(100dvh - 280px),900px)}@media(max-width:600px){header .header-actions{width:100%;justify-content:flex-end}header .header-actions button{font-size:14px;padding:8px 12px}}@media(max-height:600px) and (orientation:landscape){header{padding:6px 16px}main{padding-top:8px}.game-heading{margin-bottom:8px}h1{font-size:22px}.eyebrow,.keyboard{display:none}.stats span{padding:4px 12px}.stats b{font-size:22px}#room,html:fullscreen #room,.fullscreen-fallback #room{height:calc(100dvh - 180px);min-height:210px}.below{padding-top:10px}#cat{width:110px}.welcome{padding:12px 20px}.welcome-icon{display:none}.welcome h2{font-size:20px}.welcome p{font-size:14px;line-height:1.4;margin:6px 0}.welcome fieldset{margin-bottom:10px}.primary{font-size:16px;padding:9px 20px}}

#difficulty-settings{width:min(430px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:3px solid white;border-radius:24px;padding:26px;background:#fffdf3;color:#244c44;box-shadow:0 15px 55px #12352e55}#difficulty-settings::backdrop{background:#123d3977;backdrop-filter:blur(3px)}#difficulty-settings h2{margin:0 0 22px;font-size:25px}#difficulty-settings legend{margin:0 0 12px;font-size:17px;font-weight:700;color:#244c44}#difficulty-settings .difficulty-option{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:16px;border:2px solid #d1e0d3;border-radius:16px;cursor:pointer}#difficulty-settings .difficulty-option:has(input:checked){border-color:#14685f;background:#e8f2e9}.difficulty-option span{display:grid;gap:6px}.difficulty-option b{font-size:18px}.difficulty-option small{font-size:14px;line-height:1.5}#difficulty-settings p{font-size:15px;line-height:1.6}.settings-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:22px}.settings-actions .primary{min-width:0;font-size:17px;padding:12px 18px}.header-actions{flex-wrap:wrap}
/* Fullscreen is a game viewport, with controls floating above the scene. */
html.game-fullscreen-root,html:fullscreen{width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none}
body.game-fullscreen,body.fullscreen-fallback{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden!important;overscroll-behavior:none}
html:fullscreen main,body.game-fullscreen main,body.fullscreen-fallback main{width:100%;height:100%;max-width:none;margin:0;padding:0;overflow:hidden}
html:fullscreen #room,body.game-fullscreen #room,body.fullscreen-fallback #room{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;touch-action:manipulation}
body.game-fullscreen header{position:fixed;inset:0 0 auto;z-index:2500;padding:10px 16px;background:#14685fde;box-shadow:0 2px 12px #173e3420}
body.game-fullscreen .game-heading{position:fixed;top:calc(var(--fullscreen-header-height,64px) + 10px);left:16px;right:auto;z-index:1200;margin:0;pointer-events:none}
body.game-fullscreen .game-heading>div:first-child,body.game-fullscreen .keyboard,body.game-fullscreen .room-note{display:none}
body.game-fullscreen .stats{gap:8px}body.game-fullscreen .stats span{padding:7px 12px;background:#fffdf3ed;font-size:14px;display:flex;align-items:center;gap:4px}
body.game-fullscreen .stats b{display:inline;font-size:22px;margin:0 3px}body.game-fullscreen .stats .guard-stat b{font-size:16px;margin:0}
body.game-fullscreen .below{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;z-index:1200;padding:0;pointer-events:none}
body.game-fullscreen .below p{background:#fffdf3ed;border-radius:16px;padding:9px 14px;font-size:15px;max-width:75%;box-shadow:0 2px 12px #173e3420}
body.game-fullscreen .below button{pointer-events:auto;box-shadow:0 2px 12px #173e3420}
body.game-fullscreen #overlay{padding:calc(var(--fullscreen-header-height,64px) + 10px) 10px 70px}
body.game-fullscreen .welcome{max-height:100%;overflow:auto}
@media(max-height:500px) and (orientation:landscape){body.game-fullscreen header{padding:6px 12px}body.game-fullscreen .stats span{padding:5px 9px}body.game-fullscreen .game-heading{left:12px;top:calc(var(--fullscreen-header-height,54px) + 6px)}body.game-fullscreen .below{bottom:8px;left:12px;right:12px}body.game-fullscreen .below p{font-size:14px;padding:7px 12px}body.game-fullscreen #overlay{padding-bottom:58px}body.game-fullscreen .welcome{padding:10px 20px}body.game-fullscreen .welcome h2{margin:0 0 5px}}
/* Scale the entire captured playfield as one unit; extend scenery outside it. */
body.game-fullscreen{background:#42786c}
body.game-fullscreen::before{content:"";position:fixed;inset:-24px;background:url("assets/kitchen.png?v=2") center/cover;filter:blur(14px) brightness(.72);pointer-events:none}
html:fullscreen #room,body.game-fullscreen #room,body.fullscreen-fallback #room{inset:auto;left:50%;top:50%;width:var(--scene-width);height:var(--scene-height);min-height:0;max-height:none;transform:translate(-50%,-50%) scale(var(--scene-scale,1));transform-origin:center;overflow:hidden}
body.game-fullscreen #cat{width:var(--scene-catWidth)}
body.game-fullscreen #cheese{width:var(--scene-cheeseWidth)}
body.game-fullscreen .mouse{width:var(--scene-mouseWidth);height:var(--scene-mouseHeight);font-size:var(--scene-mouseFont)}
body.game-fullscreen #paw{font-size:var(--scene-pawFont)}
body.game-fullscreen #overlay{padding:12px}
body.game-fullscreen .welcome{max-height:calc(100% - 24px)}