@charset "UTF-8";

:root{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;color:#3d4438;background:#dfe8d1;font-synthesis:none;--ink:#344432;--muted:#838674;--green:#56745b;--cream:#fffdf4;--line:rgba(87,103,73,.14);--running:#4b9476;--idle:#d7a858;--error:#d36b63}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #5c8a70;outline-offset:4px}button svg{pointer-events:none}button:disabled{cursor:default}svg{display:block}p,h1,h2,h3{margin:0}button{border:0}button[hidden],[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#game{position:absolute;inset:0;isolation:isolate;background:#dfe8d1}#game>canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;z-index:2}.hud button,.minimap-card,.help-card{pointer-events:auto}
.park-heading{position:absolute;top:30px;left:32px;max-width:430px;padding:0 18px 18px 0}.brand-row{display:flex;gap:14px;align-items:center}.brand-mark{width:57px;height:61px;display:grid;place-items:center;background:#56745b;border:1px solid #fff7;border-radius:19px 19px 22px 19px;box-shadow:0 5px 16px #3f513320;transform:rotate(-5deg)}.brand-mark svg{width:39px;fill:#fff8e8;transform:rotate(5deg)}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.5px;color:#65735d;margin:0 0 5px 1px;text-shadow:0 1px 5px #fff9}.eyebrow-dot{margin:0 2px}h1{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-size:34px;font-weight:700;letter-spacing:1.5px;line-height:1.25;color:#36492f;text-shadow:0 1px 10px #f9f9e999}h1 span{display:inline-block;position:relative;top:-3px;margin-left:5px;padding:3px 7px;border:1px solid #8a9b7880;border-radius:5px;font-family:inherit;font-size:11px;font-weight:500;letter-spacing:.5px;vertical-align:middle}.park-subtitle{margin:12px 0 0 73px;font-size:12px;letter-spacing:1.5px;color:#64745b;text-shadow:0 1px 5px #fff}.example-banner{width:max-content;margin:17px 0 0 73px;padding:7px 11px;border:1px solid #d4b87e80;border-radius:6px;background:rgba(255,247,220,.93);box-shadow:0 3px 12px #6762370a;color:#8f713c;font-size:10px;font-weight:600;letter-spacing:.4px;backdrop-filter:blur(10px)}.fetch-error{max-width:330px;margin:9px 0 0 73px;padding:9px 12px;border:1px solid #dcafa470;border-radius:7px;background:#fff3edee;color:#a75d4c;font-size:11px;line-height:1.7;pointer-events:auto}
.minimap-card{position:absolute;right:28px;top:28px;width:246px;border:1px solid #ffffffb3;background:rgba(255,253,244,.91);border-radius:16px;box-shadow:0 8px 30px #4b5c3520,0 1px 2px #fff7 inset;padding:15px 12px 10px;backdrop-filter:blur(15px)}.map-heading{display:flex;align-items:center;justify-content:space-between;margin:0 3px 11px}.map-heading h2{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:1px;font-weight:700}.map-heading svg{width:15px;fill:none;stroke:#6e8061;stroke-width:1.2;stroke-linejoin:round}.map-count{font-size:11px;color:#607254;font-weight:700}.map-count>span{font-size:9px;font-weight:400;margin-left:2px;color:#92957f}#minimap{display:block;width:220px;height:172px;border-radius:9px;background:#ebeddb}.map-legend{display:flex;gap:10px;justify-content:space-between;margin:12px 3px 11px;font-size:9px;color:#7a826c;white-space:nowrap}.map-legend>span{display:flex;align-items:center;gap:4px}.map-legend b{font-size:9px;font-weight:500;color:#657057}.status-dot{width:6px;height:6px;flex-shrink:0;display:inline-block;border-radius:50%;background:#9ba78d}.status-dot.running{background:var(--running)}.status-dot.idle{background:var(--idle)}.status-dot.error{background:var(--error)}.map-refresh{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line);padding:8px 2px 0;color:#8d937e;font-size:8px;white-space:nowrap}.live-dot{width:4px;height:4px;background:#89a27d;border-radius:100%}.refresh-interval{margin-left:auto;color:#a3a68f}
.zone-indicator{position:absolute;left:28px;bottom:27px;display:flex;align-items:center;gap:10px;min-width:163px;padding:12px 15px 12px 12px;background:#fffdf4e8;border:1px solid #fff9;border-radius:12px;box-shadow:0 5px 22px #3b4b3014;backdrop-filter:blur(15px)}.zone-icon{display:grid;place-items:center;width:30px;height:33px;border-radius:9px;background:#ecf0df;color:#718663}.zone-icon svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.2}.zone-caption{display:block;font-size:8px;letter-spacing:2px;color:#949b84;margin-bottom:3px}.zone-indicator strong{display:block;font-size:12px;font-weight:600;letter-spacing:1px}.zone-decoration{margin-left:10px;font-size:12px;color:#a4b78b}.controls-guide{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);height:45px;display:flex;align-items:center;gap:13px;padding:0 18px;background:#fffdf4eb;border:1px solid #fff9;border-radius:12px;box-shadow:0 5px 22px #3b4b3012;backdrop-filter:blur(15px);white-space:nowrap;color:#737c65;font-size:10px}.controls-guide>span{display:flex;align-items:center;gap:6px}.controls-guide>i{height:12px;width:1px;background:var(--line)}kbd{display:inline-block;padding:3px 5px;border:1px solid #cbd1ba;border-bottom-width:2px;border-radius:4px;background:#fbfbf0;color:#66745b;font-family:inherit;font-size:9px;line-height:1.2;white-space:nowrap}.control-or{font-size:8px;color:#b6bba9}.controls-guide svg{width:14px;fill:none;stroke:#869179;stroke-width:1.2}.utility-buttons{position:absolute;right:28px;bottom:28px;display:flex;gap:8px}.utility-button{display:flex;gap:7px;align-items:center;justify-content:center;height:45px;padding:0 13px;border:1px solid #fff9;border-radius:12px;background:#fffdf4eb;box-shadow:0 5px 22px #3b4b3012;backdrop-filter:blur(15px);font-size:10px;color:#68785c;transition:background .2s,transform .2s}.utility-button:hover{background:#fffdf8;transform:translateY(-2px)}.utility-button svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.help-button{width:43px;padding:0}.help-card{position:absolute;right:28px;bottom:85px;width:310px;padding:19px 20px 0;border:1px solid #fff;border-radius:15px;background:#fffdf5f7;box-shadow:0 10px 50px #344b3333;backdrop-filter:blur(18px);font-size:12px;line-height:1.9;color:#748169}.help-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.help-title h2{font-family:"Noto Serif TC","Songti TC",serif;font-size:17px;color:#4b6042}.help-title button{font-size:23px;background:transparent;color:#7f8b72;width:25px;height:25px;display:grid;place-items:center;line-height:1}.help-card p+p{margin-top:10px}.help-footer{display:flex;justify-content:space-between;margin-top:17px;padding:12px 0;border-top:1px solid var(--line);font-size:9px;color:#99a288;letter-spacing:.5px}.help-footer span{font-size:13px;color:#aaba91}
.nearby-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);display:flex;align-items:center;gap:8px;max-width:90vw;padding:11px 15px;border:1px solid #fff;border-radius:10px;background:#fffdf4f5;box-shadow:0 5px 25px #3a4e312b;white-space:nowrap;transition:background .2s;will-change:left,top;z-index:3}.nearby-tag:after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:#fffdf4;border-right:1px solid #fff;border-bottom:1px solid #fff}.nearby-tag strong{font-size:12px;font-weight:600;letter-spacing:.5px}.nearby-tag .status-dot{width:7px;height:7px}.interact-hint{border-left:1px solid var(--line);margin-left:3px;padding-left:10px;font-size:10px;color:#81916f}.interact-hint kbd{margin:0 2px;background:#e9eedb;border-color:#d7dec9;color:#6e815d}.interact-hint>span{margin-left:5px;color:#8fa77b}.nearby-tag:hover{background:#fff}.joystick,.action-button,.jump-button{display:none}
.panel-backdrop{position:absolute;inset:0;background:rgba(33,48,30,.13);backdrop-filter:blur(1.2px);z-index:5}.animal-panel{position:absolute;top:18px;bottom:18px;right:18px;z-index:6;width:365px;max-width:calc(100% - 24px);padding:24px 28px 0;border:1px solid #fff9;border-radius:19px;background:#fffdf5fa;box-shadow:0 12px 75px #2c452e40;overflow-y:auto;overscroll-behavior:contain;outline:none;scrollbar-width:thin;scrollbar-color:#c6cdb6 transparent;animation:panel-enter .25s ease-out;backdrop-filter:blur(20px)}@keyframes panel-enter{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.panel-top{display:flex;align-items:center;justify-content:space-between}.panel-eyebrow{font-size:9px;color:#8d997c;letter-spacing:3px}.close-panel{display:flex;align-items:center;gap:9px;background:transparent;padding:4px 0 4px 10px;color:#89947a}.close-panel>span{font-size:9px;border:1px solid #d9dfcb;border-radius:4px;padding:2px 4px}.close-panel svg{width:18px;stroke:currentColor;stroke-width:1.2}.panel-avatar{position:relative;display:grid;place-items:center;width:82px;height:82px;margin:26px auto 18px;border-radius:28px;background:#e8edda;transform:rotate(-6deg)}.panel-avatar>svg{width:73px;height:73px;transform:rotate(6deg);fill:#a6b397;stroke:#7b8c6f;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.panel-avatar .avatar-ear{fill:#ddd6ba;stroke:none}.panel-avatar .avatar-face{fill:none;stroke:#5a7052;stroke-width:2.1}.avatar-spark{position:absolute;right:-11px;top:0;font-size:21px;color:#c4ae6a}.panel-zone{font-size:9px;letter-spacing:2px;text-align:center;color:#8c997b;margin-bottom:9px}.animal-panel h2{font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;font-weight:600;font-size:25px;line-height:1.5;text-align:center;letter-spacing:1px;color:#435b3d;overflow-wrap:anywhere}.panel-breed{text-align:center;font-size:11px;color:#929a85;letter-spacing:.7px;margin:4px 0 12px}.panel-status{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;margin:0 auto;padding:5px 10px;border:1px solid #e2e9d5;background:#f1f4e8;border-radius:20px;font-size:9px;color:#64835e}.panel-status[data-status=error]{color:#ae6e61;border-color:#f0d7cb;background:#fff1e8}.panel-status[data-status=idle]{color:#ab8a4b;border-color:#ede2bd;background:#faf3df}.animal-facts{margin:26px 0 23px;border-top:1px solid var(--line);padding-top:11px}.animal-facts>div{display:grid;grid-template-columns:90px 1fr;gap:10px;margin:13px 0;font-size:11px;line-height:1.6}.animal-facts dt{color:#9a9f8c}.animal-facts dd{margin:0;text-align:right;color:#5d6e53;overflow-wrap:anywhere}.animal-facts>div:last-child dd{font-size:10px}.activity-section{padding-top:4px}.activity-section h3{display:flex;align-items:center;gap:7px;font-size:12px;color:#5c7252;letter-spacing:1px}.activity-section h3 span{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:5px;background:#edf0e1;color:#9aa48c;font-size:9px;font-weight:400;letter-spacing:0}.activity-list{list-style:none;margin:18px 0 0;padding:0 0 0 13px}.activity-list li{position:relative;padding:0 0 20px 16px;border-left:1px solid #e0e6d4}.activity-list li:last-child{padding-bottom:0;border-left-color:transparent}.activity-list li:before{content:"";position:absolute;left:-3px;top:5px;width:5px;height:5px;background:#9eaf8c;border-radius:50%;box-shadow:0 0 0 3px #fffdf5}.activity-list time{display:block;font-size:9px;color:#a1a68f;margin-bottom:6px}.activity-list p{font-size:11px;color:#718165;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.activity-empty{font-size:11px;color:#a0a88e;padding:20px 0;line-height:1.7}.panel-error{margin-bottom:24px;padding:13px 14px;border:1px solid #eed5c9;background:#fff1e8;border-radius:9px}.panel-error h3{display:flex;align-items:center;gap:6px;color:#ab6b59;font-size:11px;margin-bottom:7px}.panel-error h3>span{display:grid;place-items:center;width:13px;height:13px;border:1px solid #c88d76;border-radius:50%;font-size:9px}.panel-error p{color:#b3806f;font-size:11px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.panel-footer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:27px;padding:17px 0 20px;border-top:1px solid var(--line);text-align:center;font-size:9px;letter-spacing:.8px;color:#a4ac96}.panel-footer span{color:#b0ba9e;font-size:12px}
.loading{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f2f2e7;color:#718065;transition:opacity .3s}.loading-leaf{display:grid;place-items:center;width:70px;height:70px;border-radius:24px;background:#e3e9d6;margin-bottom:25px;transform:rotate(-7deg)}.loading-leaf svg{width:43px;height:43px;fill:none;stroke:#809a6b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(7deg)}.loading-title{font-family:"Noto Serif TC","Songti TC",serif;font-size:21px;letter-spacing:2px;margin-bottom:11px}#loading-message{font-size:11px;color:#a0a68e;letter-spacing:1px}.loading-dots{display:flex;gap:6px;margin-top:25px}.loading-dots i{width:4px;height:4px;background:#b0bf9b;border-radius:50%;animation:loading-dot 1.2s infinite}.loading-dots i:nth-child(2){animation-delay:.15s}.loading-dots i:nth-child(3){animation-delay:.3s}@keyframes loading-dot{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}.noscript-message{position:absolute;inset:40% 20%;z-index:12;padding:30px;border-radius:15px;background:#fffdf4;text-align:center;font-size:16px;color:#5c7252}
@media(max-width:1200px){.controls-guide{gap:9px;padding:0 12px;font-size:9px}.controls-guide>span{gap:4px}.utility-button>span:not(.sr-only){display:none}.utility-button{width:43px;padding:0}.zone-indicator{min-width:145px}.park-heading{top:25px;left:25px}h1{font-size:31px}.minimap-card{top:24px;right:24px}}
@media(max-width:950px){.controls-guide{gap:9px;bottom:25px}.controls-guide>span:first-child kbd:first-child,.controls-guide .control-or{display:none}.controls-guide>span:nth-of-type(3){display:none}.controls-guide>i:nth-of-type(2){display:none}.zone-indicator{left:23px;bottom:24px}.utility-buttons{right:23px;bottom:25px}.minimap-card{width:210px;padding:13px 10px 9px}#minimap{width:188px;height:147px}.map-legend{font-size:8px;gap:5px}.map-legend b{font-size:8px}.map-legend .status-dot{width:5px;height:5px}.map-refresh{font-size:7px}.map-count{font-size:10px}.map-count>span{font-size:8px}.map-heading h2{font-size:11px}}
@media(max-width:650px){.park-heading{top:max(19px,env(safe-area-inset-top));left:18px;max-width:calc(100% - 90px)}.brand-row{gap:10px}.brand-mark{width:44px;height:47px;border-radius:14px 14px 17px 14px}.brand-mark svg{width:30px}.eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:4px}h1{font-size:25px;letter-spacing:1px}h1 span{font-size:9px;top:-1px;padding:2px 4px;margin-left:2px}.park-subtitle{font-size:9px;letter-spacing:1px;margin:10px 0 0 54px}.example-banner{margin:11px 0 0 0;font-size:9px;padding:6px 9px}.fetch-error{margin-left:0;max-width:265px;font-size:10px}.minimap-card{top:133px;right:15px;width:132px;padding:9px 7px 7px;border-radius:11px}.map-heading{margin:0 1px 7px}.map-heading h2{font-size:9px;gap:4px;letter-spacing:.4px}.map-heading svg{width:11px}.map-count{font-size:9px}.map-count>span{display:none}#minimap{width:116px;height:91px;border-radius:6px}.map-legend{gap:5px;margin:7px 0 0;font-size:0}.map-legend>span{gap:3px}.map-legend b{font-size:8px}.map-legend .status-dot{width:5px;height:5px}.map-refresh{display:none}.controls-guide{display:none}.zone-indicator{left:17px;bottom:21px;min-width:135px;padding:9px 11px;border-radius:10px;gap:8px}.zone-icon{width:26px;height:29px}.zone-icon svg{width:17px}.zone-caption{font-size:7px}.zone-indicator strong{font-size:11px}.zone-decoration{font-size:10px;margin-left:6px}.utility-buttons{top:max(23px,env(safe-area-inset-top));right:17px;bottom:auto;flex-direction:column;gap:7px}.utility-button{width:33px;height:33px;border-radius:10px}.utility-button svg{width:15px}.help-card{right:17px;top:105px;bottom:auto;width:min(310px,calc(100vw - 34px));padding:17px 18px 0;font-size:11px}.help-title h2{font-size:16px}.nearby-tag{padding:9px 11px;gap:6px;max-width:94vw}.nearby-tag strong{font-size:10px}.interact-hint{font-size:9px;padding-left:7px;margin-left:1px}.interact-hint kbd{font-size:8px}.animal-panel{top:10px;bottom:10px;right:10px;padding:21px 23px 0;border-radius:16px;width:340px;max-width:calc(100% - 20px)}.panel-avatar{margin-top:21px;width:73px;height:73px;border-radius:24px}.panel-avatar>svg{width:65px;height:65px}.animal-panel h2{font-size:23px}.animal-facts{margin-top:22px}.panel-footer{margin-top:23px}.loading-title{font-size:17px;letter-spacing:1px}#loading-message{font-size:10px}}
.touch-controls .joystick{display:grid;place-items:center;position:absolute;bottom:max(31px,env(safe-area-inset-bottom));left:28px;width:106px;height:106px;border-radius:50%;background:#fffdf433;border:1px solid #fffffff0;box-shadow:0 5px 25px #43532b17,inset 0 0 0 9px #fffdf422;pointer-events:auto;touch-action:none}.touch-controls .joystick-ring{position:absolute;width:66px;height:66px;border:1px dashed #ffffffe0;border-radius:50%;pointer-events:none}.touch-controls .joystick-knob{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #fff;background:#fffdf4e6;box-shadow:0 3px 10px #52623926;will-change:transform;pointer-events:none}.touch-controls .joystick-knob svg{width:20px;stroke:#8fa17d;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}.touch-controls .action-button,.touch-controls .jump-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:absolute;right:30px;bottom:max(44px,env(safe-area-inset-bottom));width:73px;height:73px;border:1px solid #fff;border-radius:50%;background:#fffdf4eb;color:#617a53;box-shadow:0 5px 20px #43532b20;font-size:10px;touch-action:manipulation}.touch-controls .action-button svg,.touch-controls .jump-button svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;fill:none}.touch-controls .action-button:disabled,.touch-controls .jump-button:disabled{opacity:.5}.touch-controls .action-button:active,.touch-controls .jump-button:active{transform:scale(.95)}.touch-controls .jump-button{right:116px;touch-action:none}.touch-controls .zone-indicator{bottom:160px;left:28px;min-width:130px;padding:8px 10px}.touch-controls .zone-icon{width:25px;height:27px}.touch-controls .zone-caption{font-size:7px}.touch-controls .zone-indicator strong{font-size:10px}.touch-controls .zone-decoration{font-size:10px}.touch-controls .controls-guide{display:none}.touch-controls .utility-buttons{bottom:140px;right:30px}.touch-controls .interact-hint kbd{display:none}.touch-controls .interact-hint{font-size:0}.touch-controls .interact-hint:before{content:"輕觸互動";font-size:10px}.touch-controls .interact-hint>span{font-size:10px}.touch-controls .help-card{bottom:85px}
@media(max-width:650px){.touch-controls .utility-buttons{bottom:auto;right:17px}.touch-controls .help-card{bottom:auto}.touch-controls .zone-indicator{left:20px;bottom:157px}.touch-controls .joystick{left:22px}.touch-controls .action-button{right:22px}.touch-controls .jump-button{right:108px}}
@media(max-height:550px){.park-heading{top:17px;left:20px}.brand-mark{width:42px;height:45px}.brand-mark svg{width:29px}h1{font-size:25px}.eyebrow{font-size:8px}.park-subtitle{margin:8px 0 0 56px;font-size:9px}.example-banner{margin:9px 0 0 56px;font-size:8px;padding:5px 8px}.minimap-card{top:16px;right:19px;transform:scale(.8);transform-origin:top right}.zone-indicator{bottom:17px}.controls-guide,.utility-buttons{bottom:18px}.animal-panel{top:10px;bottom:10px}.panel-avatar{margin-top:12px;margin-bottom:12px;width:58px;height:58px;border-radius:20px}.panel-avatar>svg{width:52px;height:52px}.animal-panel h2{font-size:22px}.panel-zone{margin-bottom:4px}.panel-breed{margin:2px 0 9px}.animal-facts{margin-top:18px}.help-card{bottom:73px}.loading-leaf{width:55px;height:55px;margin-bottom:18px}.loading-title{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.dragon-glyph{font-family:"Noto Serif TC","Songti TC",serif;font-size:43px;color:#759886;transform:rotate(6deg);line-height:1}

/* Safari keeps the page fixed while the cards retain native vertical scrolling. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body{position:fixed;inset:0;height:100vh;height:100dvh}
#game,.hud{height:100%}
#game{touch-action:none}
.hud button,.joystick{touch-action:none}
.touch-help{display:none}
.touch-controls .touch-help{display:block}
.animal-panel,.help-card{touch-action:pan-y;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.animal-panel{top:calc(18px + var(--safe-top));right:calc(18px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));max-width:calc(100% - 24px - var(--safe-left) - var(--safe-right));scroll-padding-top:60px}
.panel-top{position:sticky;top:0;z-index:2;min-height:44px;background:#fffdf5}
.close-panel{min-width:44px;min-height:44px;justify-content:flex-end}
.help-card{max-height:calc(100vh - 120px - var(--safe-top) - var(--safe-bottom));max-height:calc(100dvh - 120px - var(--safe-top) - var(--safe-bottom));overflow-y:auto}
.help-title{position:sticky;top:0;z-index:1;background:#fffdf5}
.help-title button{min-width:44px;min-height:44px}
.touch-controls .joystick{left:calc(28px + var(--safe-left));bottom:calc(24px + var(--safe-bottom))}
.touch-controls .action-button,.touch-controls .jump-button{bottom:calc(35px + var(--safe-bottom));touch-action:none}
.touch-controls .action-button{right:calc(30px + var(--safe-right))}
.touch-controls .jump-button{right:calc(116px + var(--safe-right))}
.touch-controls .zone-indicator{left:calc(28px + var(--safe-left));bottom:calc(146px + var(--safe-bottom))}
.touch-controls .utility-buttons{right:calc(30px + var(--safe-right))}
.touch-controls .action-button:disabled{opacity:.35;filter:saturate(.35);box-shadow:none}
.panel-open .joystick,.panel-open .action-button,.panel-open .jump-button{pointer-events:none;opacity:.3}
@media(max-width:650px){
  .park-heading{top:calc(19px + var(--safe-top));left:calc(18px + var(--safe-left))}
  .utility-buttons,.touch-controls .utility-buttons{top:calc(19px + var(--safe-top));right:calc(17px + var(--safe-right));bottom:auto}
  .minimap-card{top:calc(133px + var(--safe-top));right:calc(15px + var(--safe-right))}
  .help-card{top:calc(105px + var(--safe-top));right:calc(17px + var(--safe-right));bottom:auto;width:min(310px,calc(100vw - 34px - var(--safe-left) - var(--safe-right)));max-height:calc(100dvh - 140px - var(--safe-top) - var(--safe-bottom))}
  .animal-panel{top:calc(10px + var(--safe-top));right:calc(10px + var(--safe-right));bottom:calc(10px + var(--safe-bottom));max-width:calc(100% - 20px - var(--safe-left) - var(--safe-right))}
  .touch-controls .joystick{left:calc(22px + var(--safe-left))}
  .touch-controls .action-button{right:calc(22px + var(--safe-right))}
  .touch-controls .jump-button{right:calc(108px + var(--safe-right))}
  .touch-controls .zone-indicator{left:calc(20px + var(--safe-left))}
}