:root{--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
.mobile-controls,.mobile-topbar,.mobile-orientation{display:none}
.mobile-mode body,.mobile-mode{overscroll-behavior:none}
body.mobile-mode{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding-left:var(--safe-l);padding-right:var(--safe-r);overflow-y:auto;overscroll-behavior-y:auto}
body.mobile-mode .touchpad{display:none!important}
body.mobile-mode .viewport{touch-action:none;min-height:0}
body.mobile-mode #game{touch-action:none}
body.mobile-mode .mobile-controls{display:block;position:absolute;inset:0;z-index:15;pointer-events:none}
.mobile-joystick{position:absolute;left:calc(18px + var(--safe-l));bottom:calc(18px + var(--safe-b));width:132px;height:132px;border-radius:50%;background:#09111272;border:2px solid #d7bd8270;box-shadow:inset 0 0 26px #0008;pointer-events:auto;touch-action:none}
.mobile-joystick:after{content:'';position:absolute;inset:28%;border:1px solid #d7bd8245;border-radius:50%}
.mobile-joystick-knob{position:absolute;left:50%;top:50%;margin:-27px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d6c69a,#5e5946);border:2px solid #f3dda6bb;box-shadow:0 5px 18px #0009;will-change:transform}
.mobile-combat{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));width:226px;height:176px;pointer-events:none}
.mobile-btn{pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;min-width:48px;min-height:48px;border-radius:50%;background:#10191cdc;border:1px solid #c3a968aa;color:#f2e8ce;font-weight:800;box-shadow:0 3px 14px #0009;padding:0}
.mobile-btn:active,.mobile-btn.pressed{transform:scale(.94);background:#5a3a2b}
.mobile-btn:disabled,.mobile-btn.not-ready{opacity:.42}
.mobile-attack{position:absolute;right:0;bottom:0;width:76px;height:76px;font-size:31px;background:radial-gradient(circle at 40% 30%,#78463b,#2a1918 70%)}
.mobile-skills{position:absolute;right:69px;bottom:54px;width:154px;height:116px}
.mobile-skill{position:absolute;width:52px;height:52px;font-size:16px}.mobile-skill:nth-child(1){right:2px;bottom:0}.mobile-skill:nth-child(2){right:50px;bottom:18px}.mobile-skill:nth-child(3){right:96px;bottom:48px}.mobile-skill:nth-child(4){right:44px;bottom:66px}.mobile-skill:nth-child(5){right:0;bottom:62px}
.mobile-utility{position:absolute;right:82px;bottom:0;display:flex;gap:6px}.mobile-utility .mobile-btn{width:44px;height:44px;min-width:44px;min-height:44px;font-size:12px}
body.mobile-mode .mobile-topbar{display:flex;position:relative;z-index:25;gap:6px;align-items:center;justify-content:flex-end;margin:0 0 5px;pointer-events:auto;padding-left:var(--safe-l);padding-right:var(--safe-r)}
.mobile-topbar .mobile-btn{border-radius:10px;width:46px;height:38px;min-height:38px;min-width:46px;font-size:17px}
.mobile-orientation{position:fixed;z-index:9999;top:calc(10px + var(--safe-t));left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));display:flex;justify-content:center;text-align:center;padding:0;pointer-events:none}.mobile-orientation:not([hidden]){display:flex}.mobile-orientation[hidden]{display:none!important;pointer-events:none!important}.mobile-orientation div{position:relative;max-width:360px;border:1px solid #bfa36c;background:#142126ed;padding:14px 48px 14px 18px;border-radius:14px;box-shadow:0 8px 24px #0008;pointer-events:auto}.mobile-orientation strong,.mobile-orientation span,.mobile-orientation small{display:block}.mobile-orientation strong{font:21px Georgia;color:#e5c88d;margin-bottom:4px}.mobile-orientation span,.mobile-orientation small{color:#cbd2cc;font-size:13px}.mobile-orientation-close{position:absolute;right:5px;top:5px;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;border-radius:10px;font-size:25px;line-height:1}
@media (orientation:landscape) and (max-height:540px){body.mobile-mode header{display:none}body.mobile-mode main{display:block;max-width:none;padding:4px calc(6px + var(--safe-r)) 4px calc(6px + var(--safe-l));margin:0}body.mobile-mode .play{width:100%}body.mobile-mode .map-heading{display:none}body.mobile-mode #tutorial{position:absolute;z-index:20;top:44px;left:8px;max-width:310px;padding:8px 10px;font-size:11px;background:#10191de6}body.mobile-mode .viewport{height:calc(100dvh - 50px - var(--safe-t) - var(--safe-b));max-height:none;border-radius:8px}body.mobile-mode .viewport>canvas#game{width:100%!important;height:100%!important;object-fit:contain}body.mobile-mode .actionbar,body.mobile-mode .under,body.mobile-mode #skillBar,body.mobile-mode .journal{display:none!important}body.mobile-mode .character,body.mobile-mode .quests{display:none;position:fixed;z-index:100;inset:calc(8px + var(--safe-t)) calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));max-width:none!important;overflow:auto;padding:14px;background:#101a1ff7}body.mobile-mode .character.mobile-open,body.mobile-mode .quests.mobile-open{display:block}body.mobile-mode .character .portrait-frame{display:none}body.mobile-mode .character .stats{grid-template-columns:repeat(4,1fr)}body.mobile-mode .equipment-grid{grid-template-columns:repeat(4,minmax(0,1fr))}body.mobile-mode #inventory{max-height:none}body.mobile-mode .map-badge{left:8px;bottom:8px;font-size:10px;max-width:45%}body.mobile-mode #toast{top:7px;font-size:11px;padding:6px 10px}body.mobile-mode #corruptionHud{transform:scale(.82);transform-origin:top right}}

/* HUD and Phaser must use the same full-viewport scaling. Letterboxing only the
   HUD confines weather/night grading to a central rectangle on wide phones. */
body.mobile-mode .viewport>canvas#game{object-fit:fill!important}
#chatPanel[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
#chatClose{float:right;min-width:48px;min-height:48px;font-size:28px;line-height:1}
body.mobile-mode #chatPanel h2{padding-right:56px;font-size:18px}
body.mobile-mode #chatClose{position:absolute;right:8px;top:8px;z-index:2}
/* CP2 — touch-first panels and keyboard-safe UI */
.mobile-status-hud,.mobile-chat-peek,.mobile-quick-menu{display:none}
body.mobile-mode .mobile-status-hud{display:block;position:absolute;z-index:14;left:calc(8px + var(--safe-l));top:8px;width:min(220px,31vw);padding:7px 9px;border:1px solid #7d7257aa;border-radius:9px;background:#091214c9;pointer-events:none;font-size:10px;text-shadow:0 1px 2px #000}
.mobile-hud-row{display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden}.mobile-hud-row strong{color:#f0d69d;max-width:45%;overflow:hidden;text-overflow:ellipsis}.mobile-hud-row span{color:#bdc9c4;overflow:hidden;text-overflow:ellipsis}
.mobile-meter{position:relative;height:9px;margin-top:4px;background:#080d0f;border:1px solid #485552;border-radius:5px;overflow:hidden}.mobile-meter i{position:absolute;inset:0 auto 0 0}.mobile-meter.hp i{background:#b65353}.mobile-meter.mp i{background:#467eb3}.mobile-meter span{position:absolute;inset:-3px 2px auto auto;font-size:8px;color:#fff}.mobile-xp{color:#aebbb7;margin-top:2px;font-size:8px}
body.mobile-mode .mobile-chat-peek{display:block;position:absolute;z-index:14;left:50%;bottom:8px;transform:translateX(-50%);max-width:42%;min-height:30px;padding:5px 9px;border-radius:12px;background:#071013b8;border:1px solid #6c775d;color:#d6ddd8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
body.mobile-mode #chatPanel:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:250;left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));bottom:calc(8px + var(--safe-b));height:min(58dvh,360px);max-width:none;margin:0;padding:12px;background:#101a1ff7;box-shadow:0 -8px 35px #000a}body.mobile-mode #chatLog{flex:1;height:auto;min-height:80px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}body.mobile-mode #chatForm{flex:0 0 auto}body.mobile-mode #chatInput{font-size:16px;min-height:44px}body.mobile-mode #chatForm button{min-height:44px}
body.mobile-mode dialog{position:fixed;inset:calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) calc(6px + var(--safe-b)) calc(6px + var(--safe-l));width:auto;max-width:none;max-height:none;height:auto;margin:0;padding:14px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}body.mobile-mode dialog .close,body.mobile-mode .mobile-drawer-close{position:sticky;float:none;top:0;margin-left:auto;z-index:6;display:block;width:48px;height:48px;min-width:48px;min-height:48px;border-radius:12px;font-size:28px;background:#172428eF}body.mobile-mode #modalBody{max-height:none;overflow:visible}body.mobile-mode button,body.mobile-mode .item button{min-height:44px}body.mobile-mode input,body.mobile-mode select,body.mobile-mode textarea{font-size:16px;min-height:44px}body.mobile-mode .item{padding:10px;touch-action:pan-y}body.mobile-mode #inventory,body.mobile-mode #questList,body.mobile-mode #contracts{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body.mobile-mode .mobile-quick-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:fixed;z-index:400;left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));bottom:calc(10px + var(--safe-b));padding:12px;background:#101a1ff4;border:1px solid #7f7358;border-radius:14px;box-shadow:0 10px 50px #000c}.mobile-quick-menu[hidden]{display:none!important}.mobile-quick-menu .mobile-btn{position:static;width:auto;height:auto;min-height:48px;border-radius:10px;padding:8px}.mobile-menu-close{grid-column:1/-1}
body.mobile-mode.mobile-keyboard-open .mobile-controls,body.mobile-mode.mobile-keyboard-open .mobile-chat-peek{display:none!important}
@media (orientation:landscape) and (max-height:540px){body.mobile-mode .character.mobile-open,body.mobile-mode .quests.mobile-open{padding-top:6px}body.mobile-mode .character h2,body.mobile-mode .quests h2{margin:8px 0 5px;font-size:17px}body.mobile-mode .equipment-slot{min-height:70px}body.mobile-mode .equipment-slot .item-icon{width:36px;height:36px}body.mobile-mode dialog h2{font-size:23px;margin:6px 0}body.mobile-mode dialog p{margin:6px 0}body.mobile-mode .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:380px){.mobile-joystick{width:112px;height:112px}.mobile-combat{transform:scale(.88);transform-origin:right bottom}body.mobile-mode .mobile-status-hud{width:190px}body.mobile-mode #tutorial{display:none}}

.mobile-perf{position:fixed;z-index:9998;right:calc(5px + var(--safe-r));top:calc(5px + var(--safe-t));margin:0;padding:5px 7px;border-radius:6px;background:#000b;color:#bde8c8;font:10px/1.25 monospace;pointer-events:none}
body.mobile-mode[data-mobile-quality="low"] .mobile-controls{filter:none}body.mobile-mode[data-mobile-quality="low"] .mobile-btn{box-shadow:none}body.mobile-mode[data-mobile-quality="low"] .mobile-joystick{box-shadow:none}body.mobile-mode[data-mobile-quality="low"] dialog::backdrop{backdrop-filter:none}

body.mobile-mode #modalBody button{min-height:52px;padding:12px 16px;font-weight:750}

/* The existing dialog is shared by invitations on desktop and touch. */
#modal .invitation-action{min-height:52px;width:100%;margin:8px 0;touch-action:manipulation;font-weight:700}
#modal:not([open]){pointer-events:none}
#modal #close{min-width:44px;min-height:44px;touch-action:manipulation}