:root{color-scheme:dark;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;color:#fff0d1;background:#152b35;--gold:#daca91;--ink:#203640;--mint:#aada9a}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{touch-action:manipulation;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #f9dd83;outline-offset:3px}button:disabled{cursor:default;opacity:.42}#game{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate;overflow:hidden;touch-action:none;background:#1b343d}canvas{display:block;width:100%;height:100%;outline:0;image-rendering:pixelated}.hud{position:absolute;inset:0;pointer-events:none;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.hud button{pointer-events:auto}.top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.pet-hud{display:flex;align-items:center;gap:9px;min-width:190px;background:#17313adb;border:1px solid #daca91a0;border-radius:12px;padding:7px 12px 7px 6px;box-shadow:0 4px 15px #14252b55}.portrait{width:44px;height:44px;object-fit:contain}.pet-hud b{font-size:13px}.pet-hud small{display:block;font-size:10px;color:#d4e1c2}.meters{display:flex;gap:3px;margin-top:5px}.meter{height:5px;width:55px;background:#102632;border-radius:3px;overflow:hidden}.meter i{display:block;height:100%;background:#e69b83}.meter.stamina i{background:#a8d38b}.meter.bond i{background:#8ccddd}.icons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:330px}.hud-icon,.action{border:1px solid #dfce9c;background:#203b43e8;color:#fff2ce;box-shadow:0 3px 0 #102a35,0 4px 8px #0b25243b;text-shadow:0 1px #102a35;min-width:44px;min-height:44px;border-radius:11px}.hud-icon{font-size:20px;position:relative}.hud-icon small{display:block;font-size:9px;line-height:10px}.hud-icon:hover,.action:hover{background:#41615c}.objective{position:absolute;left:50%;top:20px;transform:translateX(-50%);text-align:center;max-width:36%;color:#fff0c4;font-size:13px;text-shadow:0 2px 4px #102a35}.objective small{display:block;font-size:10px;opacity:.8;margin-top:4px}.bottom{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;gap:15px}.actions{display:grid;grid-template-columns:repeat(3,60px);gap:9px;pointer-events:auto}.action{height:60px;font-size:20px;position:relative;user-select:none;-webkit-user-select:none;touch-action:none}.action span{display:block;font-size:10px}.action:active,.action.held{transform:translateY(3px);background:#638177;box-shadow:none}.action.skill{color:#bfe6df}.action.primary{background:#b0c687;color:#263d34;border-color:#d7e1b3}.action sup{font-size:9px;position:absolute;right:5px;top:3px}.joystick{width:125px;height:125px;border-radius:50%;background:#17364099;border:1px solid #daca9170;position:relative;pointer-events:auto;touch-action:none;user-select:none}.stick{position:absolute;left:41px;top:41px;width:42px;height:42px;background:#bbd2a2bb;border:2px solid #e3e7be;border-radius:50%;pointer-events:none}.joystick:after{content:'移動';position:absolute;bottom:7px;width:100%;text-align:center;font-size:10px;opacity:.7}.dpad{width:135px;height:135px;display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(3,45px);pointer-events:auto}.dpad button{border:1px solid #dac88d;background:#213b43;color:#fff0ca;border-radius:10px;font-size:22px;min-width:44px;min-height:44px;touch-action:none}.context{position:absolute;bottom:185px;left:50%;transform:translateX(-50%);max-width:75%;text-align:center;background:#16323acc;color:#eee2c2;border:1px solid #b2c78b55;border-radius:7px;padding:7px 12px;font-size:12px;pointer-events:none}.context.home{bottom:30px}.save-note{position:absolute;left:14px;bottom:8px;font-size:9px;opacity:.65}.toast{position:absolute;left:50%;top:145px;transform:translateX(-50%) translateY(-8px);background:#f3dfb7;color:#263a38;border:2px solid #9e9472;border-radius:8px;padding:10px 16px;max-width:80%;font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:8}.toast.visible{opacity:1;transform:translateX(-50%)}.loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#19323a;gap:12px}.loading b{font-size:26px;color:#e7d4a2}.loading small{color:#bccdb5}
dialog{width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 32px);padding:0;border:3px solid #87775b;border-radius:12px;color:#f5e7c7;background:#21383f;box-shadow:0 10px 80px #07171999;overflow:hidden;background-image:linear-gradient(#2c474af2,#1a303af9)}dialog::backdrop{background:#071e2caf;backdrop-filter:blur(3px)}dialog header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d0c39155;padding:13px 18px;background:#162d34}dialog h2{font-size:18px;margin:0;color:#ecdaad}dialog .close{border:1px solid #d3c296;border-radius:9px;width:44px;height:44px;color:#f8eccc;background:#2c4447;font-size:22px}.menu-body{padding:20px 22px;overflow:auto;max-height:calc(100dvh - 120px);overscroll-behavior:contain}.intro{font-size:14px;line-height:1.85;color:#d7dfc9;margin:0 0 16px}.muted{font-size:12px;line-height:1.7;color:#b1c3b5}.button{min-height:44px;padding:11px 16px;border:1px solid #cfbb87;border-radius:8px;background:#789366;color:#ffffe1;box-shadow:0 3px #10282a;font-weight:600;font-size:14px}.button.secondary{background:#324d51;color:#eadfbb}.button.danger{background:#775451}.button.wide{width:100%;margin-top:10px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.chapter{padding:18px 0;border-bottom:1px solid #dac48e33}.chapter:first-child{padding-top:0}.chapter h3{margin:0 0 8px;color:#eed9a4}.chapter p{font-size:13px;line-height:1.8;color:#c9d8c3}.chapter .route{display:flex;gap:6px;font-size:11px;color:#b9d5ba;margin:12px 0}.route span{background:#193239;padding:7px;border-radius:6px}.route i{font-style:normal;align-self:center}.pet-panel{display:grid;grid-template-columns:170px 1fr;gap:20px}.pet-panel img{width:170px;object-fit:contain}.pet-panel h3{margin:5px 0;font-size:20px}.pet-panel input{width:130px;min-height:36px;border:1px solid #aca077;border-radius:5px;padding:5px 8px;background:#142c35;color:#fff0c9}.skill-choice{display:flex;gap:7px}.skill-choice button{flex:1;padding:9px 5px;min-height:70px;background:#19343c;border:1px solid #617d75;border-radius:7px;color:#d8e2c7;font-size:12px}.skill-choice button.selected{background:#617c62;border-color:#e6d4a2}.skill-choice span{font-size:25px;display:block}.talent{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #c1c49525;padding:14px 0}.talent b{font-size:14px}.talent p{font-size:12px;line-height:1.6;color:#b9cbbb;margin:5px 0}.talent button{white-space:nowrap}.resources{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.resources span{background:#162f38;padding:8px 12px;border-radius:6px;font-size:12px}.recipe{border-bottom:1px solid #bcc18d33;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}.recipe h3{margin:0;color:#f1db9f;font-size:15px}.recipe p{margin:6px 0;font-size:12px;line-height:1.7;color:#bbd0bd}.recipe small{font-size:11px;color:#d3c29c}.recipe button{min-width:90px}.history{padding:12px 0;border-bottom:1px solid #acb58633;font-size:13px;line-height:1.8}.offer{margin:12px 0;border:1px dashed #b6c2a488;padding:12px;border-radius:8px}.offer b{font-size:13px}.offer p,.offer small{font-size:11px;line-height:1.7;color:#c3d0bd}.offer button{width:100%;min-height:40px;background:#213a3f;color:#b0baac;border:1px solid #617b6d;border-radius:7px}.setting{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid #cad3a222}.setting input[type=checkbox]{width:22px;height:22px;accent-color:#abd199}.setting label{font-size:13px}.setting small{display:block;font-size:11px;margin-top:5px;color:#b7c7b8}.setting input[type=range]{max-width:150px;accent-color:#abd199}.file-label{display:block;position:relative;text-align:center}.file-label input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.story{text-align:center}.story img{height:170px;max-width:70%;object-fit:contain}.story h3{font-size:24px;line-height:1.6;color:#f2dfa8;margin:8px 0}.story p{text-align:left;font-size:14px;line-height:1.95;color:#d3dfcc}.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.guide section{background:#142f3688;padding:12px;border-radius:8px}.guide h4{margin:0 0 7px;color:#eddaa7}.guide p{font-size:12px;line-height:1.7;margin:0;color:#ccdbc5}.pause-note{font-size:15px;line-height:1.9;text-align:center}.a11y-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.mini-sky{height:140px;background:#122d3b;border-radius:9px;position:relative;overflow:hidden;touch-action:none}.mini-orb{position:absolute;border-radius:50%;width:44px;height:44px;background:#ead889;border:3px solid #fff0c9;box-shadow:0 0 20px #fff0b099;color:#26473a}.mini-sky p{text-align:center;color:#d5e2c6;font-size:12px}
@media(max-width:680px){.hud{padding-top:max(10px,env(safe-area-inset-top));padding-left:10px;padding-right:10px}.pet-hud{min-width:145px;padding:5px;gap:4px}.portrait{width:34px;height:34px}.pet-hud b{font-size:11px}.pet-hud small{font-size:9px}.meter{width:30px}.icons{max-width:160px;gap:4px}.hud-icon{min-width:44px;min-height:44px;font-size:17px;border-radius:9px}.hud-icon small{font-size:8px}.objective{top:73px;max-width:90%;font-size:12px;width:90%}.objective small{font-size:10px}.actions{grid-template-columns:repeat(3,49px);gap:6px}.action{height:49px;min-width:49px;font-size:19px}.action span{font-size:9px}.joystick{width:108px;height:108px}.stick{left:33px;top:33px}.bottom{left:12px;right:12px;bottom:max(23px,env(safe-area-inset-bottom))}.context{bottom:162px;max-width:95%;width:max-content;font-size:10px;padding:6px 9px}.menu-body{padding:16px 15px}.pet-panel{grid-template-columns:95px 1fr;gap:10px}.pet-panel img{width:95px}.pet-panel h3{font-size:17px}.guide{grid-template-columns:1fr}.story h3{font-size:20px}.story img{height:130px}.recipe{gap:8px}.recipe button{min-width:80px;padding:8px 10px}.toast{top:140px;font-size:12px}}
@media(max-height:500px){.pet-hud{min-width:150px}.portrait{width:32px;height:32px}.objective{top:14px;max-width:40%;width:auto}.icons{max-width:290px}.hud-icon{min-width:44px;min-height:44px}.hud-icon small{display:none}.actions{grid-template-columns:repeat(3,44px);gap:5px}.action{min-width:44px;height:44px}.action span{font-size:8px}.joystick{width:92px;height:92px}.stick{left:25px;top:25px}.context{bottom:119px;max-width:65%;font-size:10px}.bottom{bottom:14px}.dpad{width:132px;height:132px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px)}.menu-body{max-height:calc(100dvh - 105px)}dialog header{padding:7px 12px}.story img{height:70px}.story h3{font-size:19px;margin:0}.story p{font-size:12px}.toast{top:70px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.icons{max-width:400px}.pause-links{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.pause-links .button{flex:1;min-width:100px}@media(max-width:680px){.icons{max-width:145px}.icons [data-menu=craft],.icons [data-menu=pet],.icons [data-menu=journal],.icons [data-menu=settings]{display:none}}