/* Illustrated nine-slice surfaces keep corners crisp at every panel size. */
:root{color-scheme:light;--paper:#efdfc0;--ink:#3d2d20;--muted:#735b42;--green:#345f52;--wood:#986537;--frame:url('./assets/ui/storybook/frame.webp?v=shift-run-20260910-1');--trees:url('./assets/ui/storybook/trees.webp?v=shift-run-20260910-1');font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
body{color:var(--ink)}
body .panel,body #voyage-hud,body #environment-panel,body #sea-map,body #progression-dialog,body #npc-dialogue,body #protocol-panel{
  border:26px solid transparent!important;border-image:var(--frame) 175 fill stretch!important;background:transparent!important;border-radius:8px!important;color:var(--ink);box-shadow:0 5px 12px #37281835!important;padding:12px 16px;
}
button,select,input{font-family:inherit}button{transition:filter .15s,transform .15s}button:hover{filter:brightness(1.08)}button:active{transform:translateY(1px)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #437e6d!important;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}
body #brand{left:28px;top:20px;padding:8px 16px;border-width:14px!important;box-shadow:0 3px 6px #39271930!important}
#brand strong{font-size:17px;letter-spacing:.04em;color:var(--ink)}#brand span,.art-edition{display:none}
body #defense-status{left:28px;top:90px;width:320px;padding:9px 12px 15px 61px;min-height:143px}
#defense-status:before{content:"";position:absolute;left:3px;top:10px;width:58px;height:74px;background:var(--trees) center/contain no-repeat}
#defense-status strong{color:var(--ink);font-size:15px;line-height:1.6;margin-bottom:7px}#defense-status span{color:var(--ink);font-size:12px}#defense-status small{color:var(--muted);font-size:11px;margin-top:7px}
body #environment-controls{top:246px;left:32px;width:290px}
body #environment-toggle,body #sea-map-button,body #share,body #progression-actions button{border:17px solid transparent;border-image:var(--frame) 175 fill stretch;background:transparent;color:var(--ink);padding:9px 14px;border-radius:5px;box-shadow:0 3px 5px #47301b30;font-weight:700}
#environment-toggle{width:255px;min-height:63px;font-size:14px;letter-spacing:0}.weather-chevron{color:var(--ink)}.weather-icon{color:#b98632}
#environment-panel header,.time-label,.time-label output,.cycle-label,.quality-label,#environment-perf{color:var(--muted)}
body #quest{right:28px;top:28px;width:365px;padding:12px 16px 17px}#quest b{font-size:19px;color:var(--ink)}#quest p,#core-state{color:var(--muted);line-height:1.8}#quest p{font-size:13px}#core-state{font-size:11px}.progress-track{height:8px;border:1px solid #766c4c;background:#d7ccb1}#chapter-progress{background:#527763}
body #voyage-hud{top:26px;right:26px;width:378px;padding:9px 13px 21px;font-family:inherit;font-size:14px}
#voyage-hud>small:first-child{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;padding-bottom:12px;border-bottom:1px solid #aa8e6566;color:var(--ink)}
#voyage-hud>small:first-child:before{content:"";width:31px;height:31px;background:var(--ink);mask:url('./assets/ui/storybook/anchor.svg') center/contain no-repeat}
#voyage-hud h2{font-size:24px;margin:15px 0 12px;padding-right:54px;background:var(--trees) right center/53px no-repeat;color:var(--ink)}#voyage-hud p{line-height:1.8;margin:10px 0;color:var(--ink)}#voyage-hud .voyage-hint{color:var(--muted);font-size:13px}#voyage-hud small{color:var(--muted)}#voyage-hud .voyage-controls{font-size:11px;line-height:1.8;display:block}
.voyage-actions{gap:9px;margin:16px 0}.voyage-actions button{flex:1;min-height:48px;font-size:14px;white-space:nowrap}
body .voyage-actions button,body #pet-panel .pet-action,body #pet-panel .pet-name,body #pet-panel .pet-scarf,body #start button,body #progression-dialog button,body #npc-dialogue button{background:var(--green)!important;color:#fff3dc!important;border:2px solid #244439!important;box-shadow:inset 0 0 0 2px #b1c5a247,0 3px 0 #213c32;border-radius:7px;padding:10px 13px;font-weight:700}
body .voyage-actions [data-voyage=return]{background:#a0703d!important;border-color:#744b28!important;box-shadow:inset 0 0 0 2px #e4c58e66,0 3px 0 #684424}
body #voyage-hud select,body #account-panel input,body #account-panel select,body #pet-panel input,body .quality-label select{background:#f6ead4;color:var(--ink);border:1px solid #b99e76;box-shadow:inset 0 1px 3px #8c663322;border-radius:5px;min-height:42px;padding:8px 12px}
#voyage-hud select{margin-top:17px;max-width:80%;font-weight:700}#voyage-hud:after,body #pet-panel:after{content:"";position:absolute;right:4px;bottom:0;width:65px;height:55px;background:var(--trees) center/contain no-repeat;pointer-events:none}
body #pet-panel{left:24px;bottom:63px;width:270px;padding:7px 10px 8px;max-height:calc(100dvh - 390px);overflow:auto}
body #pet-panel .pet-toggle{background:none;border:0;box-shadow:none;color:var(--ink);font-size:15px;display:flex;align-items:center;gap:7px;min-height:32px;padding:0}
#pet-panel .pet-toggle:before{content:"";flex:none;width:27px;height:27px;background:var(--ink);mask:url('./assets/ui/storybook/paw-print.svg') center/contain no-repeat}
body #pet-panel p{font-size:11px;color:var(--muted);margin:6px 0 9px;line-height:1.65}body #pet-panel .pet-action{min-height:39px;font-size:12px}body #pet-panel .pet-action:before{content:"";display:inline-block;vertical-align:middle;margin-right:8px;width:17px;height:17px;background:#f9efd4;mask:url('./assets/ui/storybook/gift.svg') center/contain no-repeat}
body #pet-panel #voyage-wallet{position:static!important;inset:auto!important;display:table;width:auto;margin:13px 0 0;padding:5px 12px 5px 8px;font:700 13px/1.5 inherit;background:#e9d5b4;color:var(--ink);border:1px solid #c5a780;border-radius:6px;box-shadow:inset 0 1px 0 #fff5}
#voyage-wallet:before{content:"";display:inline-block;vertical-align:middle;width:22px;height:22px;margin-right:8px;background:#b17c20;mask:url('./assets/ui/storybook/coins.svg') center/contain no-repeat}
body #hotbar{bottom:45px;width:min(800px,calc(100vw - 690px));min-width:570px;gap:5px;padding:5px 7px;border:23px solid transparent;border-image:var(--frame) 175 fill stretch;box-shadow:0 4px 10px #35231840;overflow:visible}
body #hotbar .slot{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;flex:1;min-width:0;width:auto;min-height:59px;padding:5px 3px;background:#f3e5cc!important;border:1px solid #bca482!important;border-radius:6px!important;color:var(--ink);font-size:12px;box-shadow:inset 0 1px 0 #fff9;transform:none}
.slot-icon{display:block;flex:0 0 33px;width:33px;height:45px;background-image:url('./assets/ui/storybook/items.webp?v=shift-run-20260910-1');background-size:700% auto;background-position:calc(var(--item) * 100% / 6) center;background-repeat:no-repeat}.slot-copy{display:flex;flex-direction:column;gap:3px;text-align:left}.slot-name{white-space:nowrap}.slot i{color:var(--ink);font-size:12px}.slot-key{position:absolute;top:2px;left:4px;font-size:8px;color:#927d60}
body #hotbar .slot.selected{outline:2px solid #548467;outline-offset:2px;background:#f9edd7!important}#hotbar .slot.selected:after{content:"";position:absolute;top:-26px;width:22px;height:22px;background:#386650;mask:url('./assets/ui/storybook/leaf.svg') center/contain no-repeat;filter:drop-shadow(0 1px 1px white)}
body #sea-map-button,body #share{right:26px;width:173px;min-height:66px;font-size:14px;padding:7px 8px;display:flex;align-items:center;justify-content:center;gap:12px}body #share{bottom:42px}body #sea-map-button{bottom:122px}
#sea-map-button:before,#share:before{content:"";width:25px;height:25px;flex:none;background:var(--ink);mask:center/contain no-repeat}#sea-map-button:before{mask-image:url('./assets/ui/storybook/map.svg')}#share:before{mask-image:url('./assets/ui/storybook/settings.svg')}
body #ability{left:28px;bottom:15px;padding:5px 9px;border-width:10px!important;font-size:11px;color:var(--ink)}#help{bottom:7px;font-size:9px;color:#fff6e2;padding:0 210px 0 335px;max-width:none}#status{bottom:160px;font-size:11px}body #interact,body #voyage-marker{bottom:191px;background:#345f52ef;color:#fff0d5;border:1px solid #efdab1;border-radius:5px;font-size:13px}
#progression-actions{right:28px;top:320px;width:365px}body #progression-actions button{font-size:12px;padding:8px 12px;border-width:11px}
body #start{background:#152b2b80!important;backdrop-filter:blur(4px)}body #start-card{width:min(455px,calc(100vw - 28px));padding:20px 24px;max-height:94dvh;overflow:auto}#start-card h1{color:var(--ink);font-size:28px}#start-card p,#start-card .account-note,#account-panel label,#account-panel .account-message,#account-panel .account-session strong{color:var(--muted)}
body #account-panel .account-tabs button:not(.active){background:#dfcaab!important;color:var(--ink)!important;border-color:#ac8e64!important;box-shadow:none}#start button{min-height:44px}
body #reward{padding:14px 22px;color:var(--ink)}#reward span,#reward p{color:var(--muted)}#reward strong{color:var(--ink)}
body #sea-map{padding:16px 20px}#sea-map svg{background:#b1cbd0;border:1px solid #9baaa0}#sea-map footer,#sea-map p{color:var(--muted)}
.progression-lead,.upgrade-option p,.signal-record,.signal-destination p,#progression-dialog footer{color:var(--muted)}.upgrade-option,.signal-destination{background:#e6d5b8!important;border-color:#b59a72}.upgrade-option small,.upgrade-option strong,.signal-destination h3,.signal-destination small,.signal-quote{color:var(--ink)}
body #environment-close{color:var(--ink)}.weather-options button,.time-presets button{background:#e6d5b8;color:var(--ink);border-color:#bea27d;min-height:35px}.weather-options button[aria-pressed=true]{background:var(--green);color:#fff0d5}#environment-time{accent-color:var(--green)}
@media(max-width:1250px){body #hotbar{width:calc(100vw - 600px);min-width:520px}body #pet-panel{width:285px}body #hotbar .slot{flex-direction:column;gap:0;min-height:60px;padding:2px}.slot-icon{height:31px;flex-basis:31px;width:31px}.slot-copy{flex-direction:row;gap:4px;font-size:10px}.slot i{font-size:10px}body #voyage-hud,body #quest{width:335px}}
@media(max-width:1000px) and (pointer:fine){body #hotbar{width:calc(100vw - 50px);min-width:0;bottom:25px}body #pet-panel{bottom:146px;width:275px}body #share{bottom:145px}body #sea-map-button{bottom:218px}body #ability{bottom:4px}#help{display:none}body #environment-controls{top:236px}body #interact{bottom:154px}#status{bottom:133px}}
/* Mobile keeps the existing touch controls and drawer behavior. */
.touch-game #brand{left:10px;top:var(--safe-top);padding:7px 9px;border-width:10px!important;max-width:calc(100vw - 115px)}.touch-game #brand strong{font-size:13px}
body.touch-game #pet-panel{left:10px;top:calc(var(--safe-top) + 64px);bottom:auto;width:min(226px,calc(100vw - 120px));border-width:15px!important;padding:6px 8px;max-height:38dvh}
body.touch-game #pet-panel .pet-toggle{font-size:12px;gap:4px;min-height:28px}body.touch-game #pet-panel .pet-toggle:before{width:20px;height:20px}body.touch-game #pet-panel p{font-size:10px;line-height:1.6;margin:4px 0 7px}body.touch-game #pet-panel .pet-action{font-size:11px;min-height:40px;padding:5px}body.touch-game #pet-panel #voyage-wallet{font-size:10px;margin-top:9px;padding:2px 5px}body.touch-game #pet-panel:after{width:40px;height:40px;right:0}body.touch-game #pet-panel .pet-details{max-height:18dvh;overflow:auto}
body.touch-game:not([data-expedition=home]) #pet-panel{top:calc(var(--safe-top) + 165px)}
body.touch-game #hotbar{bottom:var(--safe-bottom);width:calc(100vw - 16px);min-width:0;padding:3px;border-width:12px;gap:3px}body.touch-game #hotbar .slot{min-height:45px;padding:2px;flex-direction:column}.touch-game .slot-copy{font-size:9px}.touch-game .slot-icon{height:25px;width:27px;flex-basis:25px}.touch-game .slot-key{display:none}.touch-game #hotbar .slot.selected:after{top:-20px;width:17px;height:17px}
body.touch-game #sea-map-button{right:12px;top:calc(var(--safe-top) + 109px);bottom:auto;width:94px;min-height:47px;border-width:11px;padding:4px;font-size:11px;gap:5px}.touch-game #sea-map-button:before{width:18px;height:18px}
body.touch-game #touch-controls button,body.touch-game #touch-utilities button{background:#efdfc0f2;color:var(--ink);border:2px solid #96734c;box-shadow:inset 0 0 0 2px #fff2;border-radius:9px}body.touch-game #touch-stick{background:#e6d2ad60;border:2px solid #99734599}body.touch-game #touch-stick span{background:#416957c9;border:2px solid #ecddbe}
body.touch-game #touch-voyage-summary{background:#efdfc0ed;color:var(--ink);border:1px solid #ac8a61;top:calc(var(--safe-top) + 65px);max-width:calc(100vw - 125px)}
body.touch-game.touch-menu-open #ui{background:#e9d9bcf5}.touch-game.touch-menu-open #environment-controls{padding:0}.touch-game.touch-menu-open #environment-toggle{width:100%}body.touch-game.touch-menu-open #quest,body.touch-game.touch-menu-open #defense-status,body.touch-game.touch-menu-open #voyage-hud,body.touch-game.touch-menu-open #progression-actions,body.touch-game.touch-menu-open #share{position:relative;inset:auto;width:100%;margin:12px auto;max-width:550px}body.touch-game.touch-menu-open #defense-status{padding-left:65px}body.touch-game.touch-menu-open #share{min-height:55px}body.touch-game #start-card{padding:12px 16px;border-width:19px!important}body.touch-game #start-card p{font-size:12px;margin:12px 0}
@media(orientation:landscape) and (max-height:550px){body.touch-game #pet-panel{left:10px;top:calc(var(--safe-top) + 51px);width:205px;max-height:42dvh}body.touch-game:not([data-expedition=home]) #pet-panel{left:225px;top:var(--safe-top)}body.touch-game #hotbar{width:43vw;bottom:var(--safe-bottom)}body.touch-game #hotbar .slot{min-height:36px}.touch-game .slot-icon{height:20px;flex-basis:20px;width:23px}.touch-game .slot-name{font-size:8px}body.touch-game #pet-panel #voyage-wallet{margin-top:5px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Final reference proportions and live status hierarchy. */
body #defense-status{padding:9px 13px 10px 63px;min-height:180px}
#defense-status strong{font-size:21px;margin-bottom:8px}#defense-status span{font-size:13px;line-height:1.7}#defense-status small{line-height:1.6;font-size:10px;margin-top:8px}
.camp-health{height:8px;margin-top:10px;background:#cfc2a4;border:1px solid #82775b;border-radius:5px;overflow:hidden}.camp-health div{height:100%;background:#517962}
body #environment-controls{top:296px}body:not(.touch-game):has(#defense-status:not([hidden])) #brand{display:none}body #defense-status{top:80px}
body #voyage-wallet{color:var(--ink);background:var(--paper);border-color:#b89b71}
@media(min-width:1450px){body #defense-status{width:360px;padding-bottom:14px}body #pet-panel{width:290px;padding:8px 11px 9px}body #pet-panel p{font-size:12px}body #pet-panel .pet-toggle{font-size:16px}body #voyage-hud{width:404px;font-size:15px;padding:12px 16px 23px}body #voyage-hud h2{font-size:25px}body #hotbar .slot{font-size:13px;gap:6px}.slot-icon{flex-basis:40px;width:40px;height:49px}.slot i{font-size:13px}body #hotbar{border-width:28px}}

#language-toggle{position:fixed;z-index:65;top:auto;bottom:202px;right:26px;min-width:126px;min-height:48px;padding:5px 10px;border:14px solid transparent;border-image:var(--frame) 175 fill stretch;background:transparent;color:var(--ink);font:800 13px/1.1 var(--ui-font);letter-spacing:.03em;cursor:pointer;pointer-events:auto!important;touch-action:manipulation;display:flex;align-items:center;justify-content:center;gap:4px;filter:drop-shadow(0 3px 2px #48351b42)}
#language-toggle [data-language]{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:6px 7px;border-radius:6px;color:#6f5b42;transition:background .14s ease,color .14s ease,box-shadow .14s ease}
#language-toggle [data-language].is-active{background:var(--green);color:#fff4dc;box-shadow:inset 0 0 0 1px #d7e6c655,0 2px 0 #28463b}
#language-toggle .language-divider{color:#9a7c57;font-weight:600}
#language-toggle:hover{transform:translateY(-1px);filter:brightness(1.04) drop-shadow(0 4px 3px #48351b52)}
@media(max-width:1000px){#language-toggle{top:auto;bottom:291px;right:12px;min-width:112px;min-height:42px;border-width:11px;font-size:11px}}
.touch-game #language-toggle{top:calc(var(--safe-top) + 54px);bottom:auto;right:10px;min-width:106px;min-height:40px;border-width:9px;font-size:10px}.touch-game #language-toggle [data-language]{min-width:32px;padding:5px}.touch-game.touch-menu-open #language-toggle{display:none}
.touch-game.touch-menu-open #brand{display:none!important}
body[data-at-dock=true]:not(.touch-menu-open) #progression-actions{display:none}
#sea-map svg text{fill:#394f47}#sea-map svg ellipse{stroke:#637d63}
body.touch-game #touch-actions{bottom:calc(var(--safe-bottom) + 96px)}body.touch-game #touch-stick{bottom:calc(var(--safe-bottom) + 97px)}body.touch-game #touch-tip{bottom:calc(var(--safe-bottom) + 228px)}
@media(orientation:landscape) and (max-height:550px){body.touch-game #touch-actions{bottom:calc(var(--safe-bottom) + 10px)}body.touch-game #touch-stick{bottom:calc(var(--safe-bottom) + 15px)}}
body #protocol-panel{color:var(--ink)}.lab-eyebrow,.lab-intro,#lab-health,#lab-result,#lab-data,#protocol-log li,#protocol-panel summary,.protocol-card small,.protocol-card p{color:var(--muted)}
.protocol-card{background:#e8d7b9;border-color:#b49b77}.protocol-card.executing{background:#cee0c6;border-color:#618169;box-shadow:none}#protocol-panel button,#protocol-panel #arm-defense{background:var(--green);color:#fff0d5;border-color:#29483d;min-height:38px}
body #settlement-sign{border:17px solid transparent;border-image:var(--frame) 175 fill stretch;background:transparent;color:var(--ink);text-shadow:none;padding:8px 12px}
#defense-status:after,#voyage-hud:before{content:"";position:absolute;width:45px;height:85px;background:url('./assets/ui/storybook/lantern.webp?v=shift-run-20260910-1') center/contain no-repeat;pointer-events:none}#defense-status:after{left:-48px;top:15px}#voyage-hud:before{right:-46px;top:30px}
.touch-game #defense-status:after,.touch-game #voyage-hud:before{display:none}
.touch-game.touch-menu-open #defense-status[hidden]{display:none!important}
.touch-game #hotbar .slot-copy{flex-direction:column;gap:0;line-height:10px;text-align:center}.touch-game #hotbar .slot i{display:inline;font-size:9px}
@media(orientation:landscape) and (max-height:550px){.touch-game #hotbar .slot-name{display:none}}
.touch-game #waypoint{left:50%!important;top:auto!important;bottom:calc(var(--safe-bottom) + 280px);transform:translateX(-50%)!important;max-width:90vw;font-size:10px;pointer-events:none}.touch-game #touch-tip{bottom:calc(var(--safe-bottom) + 250px)!important}
@media(orientation:landscape) and (max-height:550px){.touch-game #waypoint{bottom:125px}}
#start{z-index:50}#adventure-test-harness{z-index:70!important}