/* Stationery / ceramic field guide. Keep the margin transparent in both worlds. */
:root{
 --hud-ink:#304934;--hud-muted:#64725c;--hud-line:#7e8b6b48;--hud-paper:#fbf9f0;--hud-accent:#516c53;
 --hud-key:#f7f6ec;--hud-key-light:#fffef8;--hud-key-edge:#a8b399;--hud-key-base:#a0ae90;--hud-key-shade:#34482c21;
 --guide-width:204px;--guide-left:30px;
}
#instructions.exploration-guide{
 --guide-key-size:52px;left:var(--guide-left);top:clamp(142px,calc(50dvh - 190px),290px);bottom:auto;transform:none;
 width:var(--guide-width);padding:0;color:var(--hud-ink);text-shadow:none;
}
#instructions.exploration-guide--park{top:clamp(122px,calc(50dvh - 285px),220px)}
.exploration-guide .guide-heading{display:flex;align-items:center;gap:12px;min-height:40px;margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--hud-line)}
.guide-compass{display:grid;place-items:center;width:29px;height:29px;color:var(--hud-accent);flex:none}
.guide-compass svg{display:block;width:100%;height:100%;stroke:currentColor;stroke-width:1.05;stroke-linejoin:round}
#instructions .guide-heading h2{margin:0;font:400 11px/1.5 Georgia,'Times New Roman',serif;letter-spacing:1.5px;color:var(--hud-ink);white-space:nowrap}
.guide-section{display:block;font:12px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:1.5px;color:var(--hud-ink)}
#instructions #touch-pad{display:grid;grid-template-columns:repeat(3,var(--guide-key-size));grid-template-rows:repeat(2,var(--guide-key-size));gap:10px;margin:14px auto 0}
#instructions #touch-pad button,.guide-shortcuts kbd{
 position:relative;isolation:isolate;border:1px solid var(--hud-key-edge);border-radius:14px;overflow:hidden;
 background:linear-gradient(145deg,var(--hud-key-light),var(--hud-key));background-clip:padding-box;color:var(--hud-ink);
 box-shadow:inset 0 0 0 2px #fff8,inset 0 -3px 5px #7e90621a,0 4px 0 var(--hud-key-base),0 7px 0 -1px var(--hud-key-edge),0 10px 13px -4px var(--hud-key-shade);
 transition:transform .18s cubic-bezier(.2,.75,.3,1),box-shadow .18s ease;
}
/* Fine, static fibres on the keys only: no bitmap, blur filter or full-height panel. */
#instructions #touch-pad button::before,.guide-shortcuts kbd::before{content:'';position:absolute;inset:3px;border-radius:10px;pointer-events:none;z-index:-1;opacity:.3;background:repeating-linear-gradient(25deg,transparent 0 2px,#98a0820d 2px 3px)}
#instructions #touch-pad button{display:grid;place-items:center;padding:0 3px 7px;touch-action:none}
#touch-pad button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.25}
#touch-pad button small{position:absolute;bottom:5px;right:7px;font:9px/1 Arial,sans-serif;color:var(--hud-muted)}
@media(hover:hover){#instructions #touch-pad button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px #fff8,0 6px 0 var(--hud-key-base),0 9px 0 -1px var(--hud-key-edge),0 13px 16px -4px var(--hud-key-shade)}}
#instructions #touch-pad button:active,#instructions #touch-pad button[data-pressed=true],.guide-shortcuts kbd[data-pressed=true]{transform:translateY(4px);box-shadow:inset 0 0 0 2px #fff4,inset 0 2px 4px var(--hud-key-shade),0 1px 0 var(--hud-key-base),0 3px 5px var(--hud-key-shade)}
#instructions .movement-label{display:block;margin:19px 0 24px;text-align:center;font:10px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:1.2px;color:var(--hud-muted)}
.guide-shortcuts{display:grid;gap:19px;border-top:1px solid var(--hud-line);border-bottom:1px solid var(--hud-line);padding:22px 0 24px}
.guide-shortcuts p{display:grid;grid-template-columns:76px 1fr;gap:15px;align-items:center;margin:0;font:13px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:.7px}
.guide-shortcuts small{display:block;margin-top:3px;font:10px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:.3px;color:var(--hud-muted)}
.guide-shortcuts kbd{display:flex;align-items:center;justify-content:space-between;gap:6px;width:76px;min-height:37px;padding:9px 10px;border-radius:10px;font:12px/1 Arial,sans-serif}
.guide-shortcuts kbd svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;flex:none}
.guide-footer{padding-top:18px}
#instructions .guide-note{display:flex;align-items:center;gap:8px;font:10px/1.8 'Microsoft JhengHei',sans-serif;color:var(--hud-muted);margin:0}
.guide-note>svg{width:13px;height:18px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;fill:none;flex:none}
.guide-cat-perch{position:relative;height:29px;margin-left:22px;color:var(--hud-accent);pointer-events:none}
/* Stop the perch beneath the silhouette instead of drawing a rule through its paws. */
.guide-cat-perch::before{content:'';position:absolute;left:0;right:75px;bottom:0;border-bottom:1px solid var(--hud-line)}
.guide-sleeping-cat{position:absolute;width:90px;height:54px;right:-1px;bottom:-6px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.guide-cat-outline{stroke-width:1.25}
.guide-cat-face{stroke-width:1.35}
.guide-cat-paw,.guide-cat-tail{stroke-width:1.1}
.guide-cat-detail,.guide-cat-whiskers{stroke-width:.85;opacity:.72}
.guide-cat-snooze{stroke-width:1;opacity:.65}
#instructions .index-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;padding:12px 0;font:12px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:1px;color:var(--hud-ink);border-bottom:1px solid var(--hud-line);transition:color .2s}
#instructions .index-button:hover{color:var(--hud-accent)}
#instructions button:focus-visible{outline:2px solid var(--hud-accent);outline-offset:6px}
body[data-theme=night]{--hud-ink:#edf0df;--hud-muted:#becab6;--hud-line:#adbe9b45;--hud-accent:#c2d4aa;--hud-key:#394b43;--hud-key-light:#4e6257;--hud-key-edge:#708472;--hud-key-base:#26382f;--hud-key-shade:#081b2266}
body[data-theme=night] #instructions #touch-pad button,body[data-theme=night] .guide-shortcuts kbd{box-shadow:inset 0 0 0 2px #ccd6b714,inset 0 -3px 5px #0b251d22,0 4px 0 var(--hud-key-base),0 7px 0 -1px #1c2e27,0 10px 13px -4px var(--hud-key-shade)}
body[data-theme=night] #instructions #touch-pad button[data-pressed=true],body[data-theme=night] #instructions #touch-pad button:active,body[data-theme=night] .guide-shortcuts kbd[data-pressed=true]{box-shadow:inset 0 2px 5px #0b251d55,0 1px 0 var(--hud-key-base)}
@media(min-width:901px){#room-canvas{left:calc(var(--guide-left) + var(--guide-width) + 12px)}}
@media(min-width:1440px){:root{--guide-width:220px;--guide-left:36px}#instructions.exploration-guide{--guide-key-size:56px}.guide-shortcuts p{grid-template-columns:82px 1fr;gap:18px}.guide-shortcuts kbd{width:82px}#instructions .guide-heading h2{font-size:12px;letter-spacing:1.7px}}
/* Fit the complete park controls on laptop-height screens without scrolling. */
@media(min-width:901px) and (max-height:960px){
 #instructions.exploration-guide--park{--guide-key-size:clamp(45px,5.8dvh,52px);top:clamp(120px,calc(50dvh - 295px),170px)}
 .exploration-guide--park .guide-heading{margin-bottom:12px;padding-bottom:12px}
 #instructions.exploration-guide--park #touch-pad{margin-top:8px;gap:9px}
 #instructions.exploration-guide--park .movement-label{margin:14px 0 14px}
 .exploration-guide--park .guide-shortcuts{gap:14px;padding:14px 0 17px}
 .exploration-guide--park .guide-footer{padding-top:12px}
 .exploration-guide--park .guide-cat-perch{height:24px}
 #instructions.exploration-guide--park .index-button{margin-top:4px;padding:9px 0}
 #instructions .skate-tools{margin-top:8px;padding-top:7px}
 #instructions .skate-actions{display:flex;gap:8px}
 #instructions .skate-actions button{font-size:9px;gap:5px}
 #instructions .skate-actions kbd{min-width:25px;font-size:9px}
}
@media(max-width:900px),(max-height:700px){
 #room-canvas{left:0}
 #instructions.exploration-guide{--guide-key-size:46px;left:20px;top:auto;bottom:calc(24px + env(safe-area-inset-bottom));width:158px;transform:none}
 #instructions .guide-heading,#instructions .guide-section,#instructions .guide-shortcuts,#instructions .guide-footer,#instructions .movement-label{display:none}
 #instructions #touch-pad{gap:10px;margin:0}
 #instructions .index-button{padding:8px 0;margin:14px 0 0;font-size:11px}
 #instructions #skate-tools{position:fixed;right:18px;bottom:calc(150px + env(safe-area-inset-bottom));width:150px;margin:0;padding:0;border:0;pointer-events:auto}
 #instructions #skate-toggle,#instructions #pet-touch,#instructions .skate-actions button{background:var(--hud-key);color:var(--hud-ink)}
 #instructions .skate-actions{grid-template-columns:1fr 1fr;display:grid;gap:6px}
 #instructions .skate-actions button{flex-direction:column;gap:5px;border-radius:9px;font-size:9px;padding:7px 2px}
 #instructions .skate-tools[data-active=false] .skate-actions{display:none}
}
@media(prefers-reduced-motion:reduce){#instructions #touch-pad button,.guide-shortcuts kbd,#instructions .index-button{transition:none}}
/* Paper, ink and a tactile ceramic key. One contour keeps the tail seamless. */
#interact.character-speech{
 --bubble-paper:#fffef7;--bubble-shade:#f7f5e9;--bubble-outline:#6c795b;--bubble-edge:#bdc5a7;
 --bubble-fibre:#879174;--speech-key-face:#fffef7;--speech-key-shade:#f0f0e2;
 width:252px;min-height:0;max-width:calc(100vw - 24px);
 padding:0;gap:0;align-items:stretch;text-align:center;
 border:0;border-radius:36px;background:transparent;color:#35412f;box-shadow:none;
 overflow:visible;backdrop-filter:none;animation:none;isolation:isolate;
 transform-origin:var(--tail-x,50%) bottom;
 transition:none;
}
#interact.character-speech::after{content:none;display:none}
#interact.character-speech[data-kind=welcome]{width:270px}
#interact .speech-shell{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;padding:28px 23px 22px;min-height:126px}
#interact .speech-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none;filter:drop-shadow(0 7px 8px #32482b22);transition:filter .22s}
#interact .speech-paper-light{stop-color:var(--bubble-paper)}
#interact .speech-paper-shade{stop-color:var(--bubble-shade)}
#interact .speech-paper-edge{fill:var(--bubble-edge);stroke:var(--bubble-outline);stroke-width:1;stroke-linejoin:round}
#interact #speech-fibres{fill:var(--bubble-fibre);stroke:var(--bubble-fibre);stroke-width:.4}
#interact .speech-texture{opacity:.05}
#interact .speech-outline{fill:none;stroke:var(--bubble-outline);stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
/* The image's paw baseline overlaps the ink at y=7; no floating shadow or sticker rim. */
#interact .speech-cat-dock{position:absolute;right:22px;top:-46px;width:102px;height:auto;pointer-events:none;user-select:none;z-index:1}
#interact .speech-cat{display:block;width:100%;height:auto}
#interact .speech-copy{display:block;position:relative}
#interact .speech-title{display:block;font:500 18px/1.55 'Noto Serif TC','PMingLiU',serif;letter-spacing:1.2px;overflow-wrap:anywhere;text-wrap:balance}
#interact .speech-description{font:10px/1.8 'Microsoft JhengHei',sans-serif;color:#6c7864;white-space:pre-line;margin:7px -5px 0}
#interact .speech-description[hidden]{display:none}
#interact .speech-footer{display:flex;justify-content:center;align-items:center;gap:0;width:100%;border:0;margin:12px 0 0;padding:0;color:inherit}
#interact .speech-footer kbd{position:relative;display:block;flex:none;box-sizing:border-box;width:112px;height:47px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #929f7e;border-radius:12px;background:linear-gradient(#c7cfb5,#a5b18d);background-clip:padding-box;overflow:visible;box-shadow:inset 0 -2px 0 #7c906548,0 2px 0 #80916b,0 5px 6px #4353361a;color:#3e5234;font:14px/1.2 'Microsoft JhengHei',Arial,sans-serif}
#interact .speech-keycap{position:absolute;inset:0 1px 6px;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 12px;border:1px solid #d5d9c4;border-radius:10px;background:linear-gradient(145deg,var(--speech-key-face),var(--speech-key-shade));box-shadow:inset 0 1px 0 #fff,inset 0 0 0 2px #fff8,inset 0 -2px 3px #8794730c,0 1px 0 #6d805b40;transition:transform .13s cubic-bezier(.2,.7,.3,1),box-shadow .13s}
#interact .speech-footer kbd svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;flex:none}
#interact.character-speech[data-placement=below]{transform-origin:var(--tail-x,50%) top}
#interact.character-speech:hover{background:transparent;box-shadow:none}
#interact.character-speech:hover .speech-frame{filter:drop-shadow(0 8px 10px #32482b2a)}
#interact.character-speech:active .speech-keycap,#interact .speech-footer kbd[data-pressed=true] .speech-keycap{transform:translateY(5px);box-shadow:inset 0 1px 3px #65764f1f,inset 0 0 0 1px #fff7,0 1px 0 #6d805b40;transition-duration:.08s}
#interact.character-speech:focus-visible{outline:2px solid #91a47d;outline-offset:5px}
body[data-theme=night] #interact.character-speech{--bubble-paper:#3c5043;--bubble-shade:#2d4136;--bubble-outline:#b1c29d;--bubble-edge:#23362a;--bubble-fibre:#d5dfbc;--speech-key-face:#f8faeb;--speech-key-shade:#e4e9d5;background:transparent;color:#f3f1df;border:0;box-shadow:none}
body[data-theme=night] #interact .speech-frame{filter:drop-shadow(0 6px 9px #0003)}
body[data-theme=night] #interact .speech-description{color:#c1cdb6}
body[data-theme=night] #interact .speech-texture{opacity:.035}
body[data-theme=night] #interact .speech-footer kbd{background:linear-gradient(#a4b18b,#81936f);color:#304332;border-color:#a8b791;box-shadow:inset 0 -2px 0 #586e4448,0 2px 0 #60744e,0 5px 7px #101e1c44}
@media(max-width:600px){#interact.character-speech{width:234px}#interact.character-speech[data-kind=welcome]{width:258px}#interact .speech-shell{padding:28px 20px 22px}#interact .speech-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){#interact.character-speech,#interact .speech-frame,#interact .speech-keycap{transition:none}}