/* Size actual hit targets, never transform the game coordinate system. */
body{--ui-scale:1;--view-height:100dvh}
html:fullscreen,html:-webkit-full-screen{width:100%;height:100%;background:#112626}
body.world-camp main,body.game-live main,body.world-camp main>.arena,body.game-live main>.arena{height:var(--view-height);min-height:0}
#title-screen{position:fixed;z-index:12000;inset:0;height:var(--view-height);isolation:isolate;overflow:hidden;background:#152c30;display:grid;place-items:center;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#title-screen::before{content:'';position:absolute;z-index:-2;inset:-24px;background:url('start-cover-dark.png') center/cover no-repeat;filter:blur(16px) brightness(.6)}
#title-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
#title-fallback{position:absolute;top:12%;left:0;right:0;text-align:center;font:bold clamp(38px,7vw,110px) 'Songti SC',serif;color:#ffdda2;text-shadow:0 4px 8px #172a23}
#title-actions{position:absolute;left:50%;top:73%;transform:translateX(-50%);display:grid;justify-items:center;gap:12px}
#title-enter{position:relative;min-width:clamp(210px,23vw,350px);min-height:clamp(56px,8vh,88px);padding:12px 28px;border:3px solid #f2d498;border-radius:10px;color:#ffefc2;background:linear-gradient(#836238,#342c21 60%,#4c3c26);box-shadow:inset 0 0 0 3px #3a3022,inset 0 0 0 5px #b39358,0 7px 0 #1e2b28,0 14px 24px #112b2acc;font:900 clamp(24px,2.8vw,40px)/1.1 'Songti SC','Noto Serif SC',serif;letter-spacing:6px;text-shadow:0 2px 2px #101b19;transition:filter .15s,translate .15s;white-space:nowrap}
#title-enter:hover{filter:brightness(1.2)}#title-enter:active{translate:0 4px;box-shadow:inset 0 0 0 3px #3a3022,inset 0 0 0 5px #b39358,0 3px 0 #1e2b28}
#title-options{background:#17352ce6;border:1px solid #d5d9a866;border-radius:6px;padding:0 14px;color:#fff5d9;box-shadow:0 3px 12px #16382877}
#title-options label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font:14px system-ui}
#title-auto-fullscreen{width:19px;height:19px;margin:0;padding:0;accent-color:#d9ba70}
.display-fullscreen{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 13px;background:#172e31e6;border:1px solid #c1ba8e99;border-radius:6px;color:#fff0c6;font:14px system-ui;touch-action:manipulation}
.display-fullscreen .display-icon{width:22px;height:22px;display:block}.display-icon svg{width:100%;height:100%;display:block}
#title-fullscreen{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));box-shadow:0 4px 12px #142a3155}
#title-screen-status{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:90%;margin:0;color:#fff8df;font-size:14px;text-align:center;text-shadow:0 2px 3px #12292a;background:#142c2ecc;border-radius:5px;padding:5px 10px}
#title-screen-status:empty,#display-status:empty{display:none}
#display-settings{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}#display-settings h3{margin:0}#display-status{width:100%;margin:0;font-size:14px;line-height:1.5;color:#d9cda9}
body.title-screen-open{overflow:hidden}body.title-screen-open #touch{display:none!important}
#rotate-prompt{position:fixed;z-index:13000;inset:0;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));background:#08191dcc;backdrop-filter:blur(8px);touch-action:manipulation}
#rotate-card{width:min(360px,100%);padding:26px 22px 16px;display:grid;justify-items:center;gap:16px;border:1px solid #c7b77a;border-radius:16px;background:linear-gradient(145deg,#264540,#11282b);box-shadow:0 24px 80px #0009;color:#f5e7c8}
#rotate-card>.display-icon{width:120px;height:100px;color:#edce84}#rotate-title{font:600 23px/1.4 'Songti SC',serif;margin:0;text-align:center;letter-spacing:1px}#rotate-note{margin:0;color:#bbd2ca;font-size:14px}
#rotate-try,#rotate-skip{min-height:46px;width:100%;font-size:16px}#rotate-try{background:#d8bc7b;border:1px solid #ffdc96;color:#17312f;font-weight:700}#rotate-skip{border:0;background:transparent;color:#cbd8cd}
.rotate-phone{transform-origin:48px 38px;animation:turn-phone 2.5s ease-in-out infinite}
@keyframes turn-phone{0%,15%{transform:rotate(0)}60%,90%{transform:rotate(90deg)}100%{transform:rotate(0)}}
body.rotation-prompt-open #touch{visibility:hidden!important;pointer-events:none!important}
body[data-device=desktop] #touch{display:none!important}
/* Atlas icons and desktop battle UI grow together on large displays. */
body[data-device=desktop] #world-nav>button{min-width:calc(84px * var(--ui-scale));min-height:calc(76px * var(--ui-scale));font-size:calc(16px * var(--ui-scale));padding:calc(8px * var(--ui-scale)) calc(13px * var(--ui-scale))}
body[data-device=desktop] #world-nav>button>.world-icon{width:calc(32px * var(--ui-scale));height:calc(32px * var(--ui-scale))}
body[data-device=desktop] #world-nav>.world-chest{min-height:calc(94px * var(--ui-scale));min-width:calc(112px * var(--ui-scale))}
body[data-device=desktop] #world-nav>.world-chest .world-icon{width:calc(43px * var(--ui-scale));height:calc(43px * var(--ui-scale))}
body[data-device=desktop] .world-pin-number{width:calc(48px * var(--ui-scale));height:calc(48px * var(--ui-scale));font-size:calc(23px * var(--ui-scale))}
body[data-device=desktop] .world-pin-name{font-size:calc(17px * var(--ui-scale));padding:calc(5px * var(--ui-scale)) calc(17px * var(--ui-scale))}
body[data-device=desktop] #battle-tactics{width:calc(170px * var(--ui-scale))}
body[data-device=desktop] #battle-controls button{min-height:calc(42px * var(--ui-scale));font-size:calc(14px * var(--ui-scale));padding:calc(9px * var(--ui-scale)) calc(13px * var(--ui-scale))}
body[data-device=desktop].game-live #player-vitals{width:calc(270px * var(--ui-scale));padding:calc(8px * var(--ui-scale)) calc(14px * var(--ui-scale))}
body[data-device=desktop] #player-vitals>#hptext{font-size:calc(13px * var(--ui-scale))}
body[data-device=desktop] #route-guide button{min-height:calc(38px * var(--ui-scale));font-size:calc(14px * var(--ui-scale))}
/* Mobile detection uses input capability as well as device hints; a narrow PC
   window never receives a phone's touch overlay. */
body[data-device=mobile] #world-nav>button{min-height:54px;font-size:calc(14px * var(--ui-scale))}
body[data-device=mobile] #world-nav>button>.world-icon{width:calc(30px * var(--ui-scale));height:calc(30px * var(--ui-scale))}
body[data-device=mobile] #world-tools .world-button{min-height:44px;font-size:13px}
body[data-device=mobile] .world-shortcut{width:44px;height:44px;min-height:44px;font-size:18px}
body[data-device=mobile] #battle-controls button{min-height:44px;font-size:14px}
body[data-device=mobile] #touch{position:fixed;z-index:12;left:0;right:0;bottom:0;display:block;padding:0;height:280px;pointer-events:none;touch-action:none;--pad-left:calc(env(safe-area-inset-left) + clamp(24px,4vw,62px));--pad-right:calc(env(safe-area-inset-right) + clamp(24px,4vw,62px));--pad-bottom:calc(env(safe-area-inset-bottom) + 72px)}
body[data-device=mobile].game-live #touch{opacity:1;transform:none}
body[data-device=mobile] #touch .joystick-zone{position:absolute;left:var(--pad-left);bottom:var(--pad-bottom);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;width:calc(116px * var(--ui-scale));height:calc(138px * var(--ui-scale));transform:none;pointer-events:auto;touch-action:none;font-size:13px;color:#e4f1da}
body[data-device=mobile] #touch .joystick-ring{position:relative;width:calc(108px * var(--ui-scale));height:calc(108px * var(--ui-scale));border:2px solid #d9e9c491;border-radius:50%;background:radial-gradient(circle,#234a4877,#071316df);box-shadow:inset 0 0 28px #9dd5c51a,0 10px 32px #0009}
body[data-device=mobile] #touch .joystick-stick{position:absolute;left:50%;top:50%;width:calc(52px * var(--ui-scale));height:calc(52px * var(--ui-scale));border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 28%,#d9eee3,#79a9a0 38%,#315b58 72%);border:2px solid #d6eee299}
body[data-device=mobile] #touch .touch-actions{position:absolute;right:var(--pad-right);bottom:var(--pad-bottom);width:calc(162px * var(--ui-scale));height:calc(202px * var(--ui-scale));transform:none;pointer-events:none}
body[data-device=mobile] #touch .touch-action{position:absolute;margin:0!important;min-width:0!important;min-height:0!important;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;border:2px solid #b5d7ca73;background:linear-gradient(145deg,#315753f2,#13282bf0);box-shadow:0 6px 16px #0008;color:#e8f2ea;pointer-events:auto;touch-action:none}
body[data-device=mobile] #touch .attack-action{right:0;bottom:0;width:calc(82px * var(--ui-scale));height:calc(82px * var(--ui-scale));background:radial-gradient(circle at 34% 25%,#bdd3c9,#5b827a 40%,#213f3e 75%);border-color:#e4f4e2b8}
body[data-device=mobile] #touch .dash-action{right:0;bottom:calc(102px * var(--ui-scale));width:calc(60px * var(--ui-scale));height:calc(60px * var(--ui-scale));background:#2c4352ed}
body[data-device=mobile] #touch .heal-action{right:calc(82px * var(--ui-scale));bottom:calc(82px * var(--ui-scale));width:calc(54px * var(--ui-scale));height:calc(54px * var(--ui-scale));background:#294e38ed}
body[data-device=mobile] #touch .loot-action{right:calc(82px * var(--ui-scale));bottom:calc(148px * var(--ui-scale));width:calc(54px * var(--ui-scale));height:calc(54px * var(--ui-scale));background:#5b492fed}
body[data-device=mobile] #touch .touch-action b{font:600 calc(24px * var(--ui-scale))/1 'Songti SC',serif}body[data-device=mobile] #touch .attack-action b{font-size:calc(32px * var(--ui-scale))}body[data-device=mobile] #touch .touch-action small{font-size:11px;color:#edf4e8;margin-top:4px;opacity:1}
body[data-device=mobile][data-orientation=landscape] #touch{--pad-bottom:calc(env(safe-area-inset-bottom) + 24px);height:220px}
body[data-device=mobile][data-orientation=landscape] #touch .touch-actions{height:calc(160px * var(--ui-scale));width:calc(166px * var(--ui-scale))}
body[data-device=mobile][data-orientation=landscape] #touch .dash-action{right:calc(100px * var(--ui-scale));bottom:0}
body[data-device=mobile][data-orientation=landscape] #touch .heal-action{right:calc(100px * var(--ui-scale));bottom:calc(90px * var(--ui-scale))}
body[data-device=mobile][data-orientation=landscape] #touch .loot-action{right:0;bottom:calc(103px * var(--ui-scale))}
body[data-device=mobile][data-orientation=landscape] #world-nav{bottom:max(12px,env(safe-area-inset-bottom));gap:8px}
body[data-device=mobile][data-orientation=landscape] #world-nav>button,body[data-device=mobile][data-orientation=landscape] #world-nav>.world-chest{min-height:50px;min-width:70px;flex-direction:row;padding:7px 10px;font-size:14px}
body[data-device=mobile][data-orientation=landscape] #world-nav>button>.world-icon{width:28px;height:28px}
body[data-device=mobile][data-orientation=landscape] #world-rail{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 64px)}
body[data-device=mobile][data-orientation=landscape] #world-hint{display:none}
body[data-device=mobile][data-orientation=landscape] #battle-tactics{width:116px;top:calc(env(safe-area-inset-top) + 12px);left:calc(env(safe-area-inset-left) + 18px)}
body[data-device=mobile][data-orientation=landscape] #battle-clock{top:calc(env(safe-area-inset-top) + 12px);left:50%;right:auto;transform:translateX(-50%)}
body[data-device=mobile][data-orientation=landscape].game-live #player-vitals{width:200px;bottom:calc(env(safe-area-inset-bottom) + 8px)}
body[data-device=mobile] #route-guide button{min-height:38px;font-size:13px}
@media(max-width:560px){#title-art{object-position:center 34%}#title-actions{top:auto;bottom:max(80px,16%)}#title-enter{font-size:28px;min-width:230px}body[data-device=desktop] #world-nav>button,body[data-device=desktop] #world-nav>.world-chest{min-width:0;min-height:64px;padding:6px;font-size:13px}body[data-device=desktop] #world-nav>button>.world-icon{width:28px;height:28px}}
@media(max-height:500px) and (min-width:561px){#title-actions{top:auto;bottom:calc(env(safe-area-inset-bottom) + 10px);gap:7px}#title-enter{min-width:220px;min-height:54px;font-size:27px;padding:10px 26px}#title-options label{min-height:36px;font-size:13px}#title-fullscreen{top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}#title-screen-status{font-size:12px}}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg)}#title-enter{transition:none}}