/* A shared set of anchors keeps the touch HUD aligned across phone sizes. */
@media (max-width:650px), (pointer:coarse) and (max-width:1100px) {
 #app {height:100dvh;max-height:100dvh;}
 #hud {--mobile-edge:10px;--frame-inset:max(10px,env(safe-area-inset-top));--map-size:94px;--frame-width:calc(100% - var(--map-size) - 30px);--dock-bottom:max(10px,env(safe-area-inset-bottom));--action-dock-height:96px;--tools-top:calc(var(--frame-inset) + max(var(--player-frame-height),126px) + 8px);}
 .player-hud {left:max(var(--mobile-edge),env(safe-area-inset-left));width:var(--frame-width);max-width:320px;padding:8px;gap:6px;grid-template-columns:minmax(0,1fr) 25px;}
 .player-hud .portrait-button,.player-hud .identity>span {display:none;}
 .player-hud .identity strong {font-size:11px;max-width:100%;}
 .player-hud .stat-bar {height:16px;}.player-hud .mana {height:12px;}
 .player-hud .status-line {font-size:9px;gap:8px;}
 .damage-meter summary {min-height:22px;}.damage-meter summary small {display:none;}
 .compass {top:var(--frame-inset);right:max(var(--mobile-edge),env(safe-area-inset-right));width:var(--map-size);}
 .compass>button,.compass canvas {width:calc(var(--map-size) - 2px);height:calc(var(--map-size) - 2px);margin:0;}
 .compass:after {height:calc(var(--map-size) - 1px);}
 .compass>div:not(.minimap-tools) {display:none;}
 .compass .minimap-tools {height:30px;gap:0;padding:0 2px;}
 .minimap-tools button {width:30px;height:30px;}.minimap-tools>span {font-size:9px;}
 .online-hud,.game-menu {top:var(--tools-top);bottom:auto;height:40px;margin:0;border-radius:6px;}
 .online-hud {left:max(var(--mobile-edge),env(safe-area-inset-left));width:132px;min-width:0;padding:5px 8px;}
 #online-state {font-size:8px;line-height:10px;}#local-chat summary {font-size:10px;line-height:16px;padding:0;margin:0;min-height:20px;}
 #local-chat summary kbd {display:none;}
 .online-hud:has(details[open]) {width:min(320px,calc(100% - 20px));height:auto;z-index:20;}
 .online-hud #chat-log {max-height:min(180px,25dvh);}
 #chat-input {font-size:16px;min-height:42px;}#chat-form button {min-height:42px;}
 .game-menu {right:max(var(--mobile-edge),env(safe-area-inset-right));padding:2px;gap:0;}
 .game-menu button {width:40px;height:34px;min-height:34px;padding:0;}
 .game-menu button>span,.game-menu button:hover>span,.game-menu button:focus-visible>span,.game-menu button>kbd {display:none;}
 .game-menu button .icon {width:19px;height:19px;}
 .action-dock {bottom:var(--dock-bottom);left:50%;width:min(420px,calc(100% - 20px));transform:translateX(-50%);}
 .action-dock .hotbar {gap:5px;padding:5px;}.action-dock .ability {height:62px;}
 .action-dock .ability>kbd {display:none;}.action-dock .ability .action-art {width:34px;height:35px;top:5px;}
 .action-dock .ability .ability-name {display:none;}.action-dock .ability .ability-cost {bottom:4px;font-size:9px;}
 .action-dock .ability.locked .ability-timer {top:20px;}.action-dock .control-hint {display:none;}
 .action-dock .experience {margin:0 5px 7px;}.action-dock .experience>span {font-size:8px;}
 .action-dock .stamina-line {margin:0 5px 4px;}
 .rune-dock {position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);margin:0;max-width:calc(100% - 210px);}
 .rune-button {min-height:36px;min-width:36px;padding:5px;}.rune-button kbd,.rune-button span {display:none;}
 .touch-controls {display:block;pointer-events:none;}.touch-controls>* {pointer-events:auto;}
 .touch-controls #joystick {position:absolute;display:grid;place-items:center;border-radius:50%;border:1px solid #d1c1905c;background:radial-gradient(#30463a70,#192f3270);touch-action:none;backdrop-filter:blur(6px);left:max(18px,env(safe-area-inset-left));bottom:calc(var(--dock-bottom) + var(--action-dock-height) + 16px);width:88px;height:88px;}
 #joystick i {width:34px;height:34px;border-radius:50%;background:#b3b39842;border:1px solid #dfce9d64;pointer-events:none;}
 #touch-interact,#touch-target {position:absolute;display:grid;place-items:center;border-radius:50%;border:1px solid #d8c58c68;background:#233b3bbf;color:var(--gold);bottom:calc(var(--dock-bottom) + var(--action-dock-height) + 34px);width:50px;height:50px;min-height:50px;margin:0;font-size:15px;}
 #touch-interact {right:max(16px,env(safe-area-inset-right));}#touch-target {right:76px;}
 .interaction,.gather-progress {bottom:calc(var(--dock-bottom) + var(--action-dock-height) + 116px);left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);width:max-content;padding:7px 12px;font-size:11px;gap:6px;text-align:center;}
 .interaction kbd {display:none;}.interaction:before {content:'Tap interact ·';color:var(--gold);white-space:nowrap;}
 .quest-tracker {top:calc(var(--tools-top) + 48px);width:calc(100% - 20px);max-width:320px;padding:7px 9px;}
 .quest-tracker>.eyebrow {display:none;}.quest-tracker strong {font-size:10px;}.quest-tracker>span:last-child {font-size:9px;}
 .target-hud {top:calc(var(--tools-top) + 48px);left:var(--mobile-edge);transform:none;width:calc(100% - 20px);max-width:320px;}
 .zone-banner {top:35%;}.zone-banner h2 {font-size:20px;}.zone-banner p {display:none;}
 #toasts {top:auto;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 245px);right:10px;width:min(280px,calc(100% - 20px));}
}
@media (max-width:359px) {
 #hud {--map-size:78px;--frame-width:calc(100% - 108px);--tools-top:calc(var(--frame-inset) + max(var(--player-frame-height),110px) + 8px);}
 .online-hud {width:112px;}.game-menu button {width:36px;}
 .action-dock .ability {height:57px;}#joystick {width:80px;height:80px;left:14px;}
 #touch-interact,#touch-target {width:46px;height:46px;min-height:46px;}#touch-target {right:70px;}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px) {
 #hud {--map-size:72px;--frame-width:220px;--tools-top:calc(var(--frame-inset) + max(var(--player-frame-height),104px) + 6px);}
 .action-dock {width:350px;}.action-dock .ability {height:52px;}
 .touch-controls #joystick {bottom:var(--dock-bottom);}#touch-interact,#touch-target {bottom:calc(var(--dock-bottom) + 19px);}
 .interaction,.gather-progress {bottom:calc(var(--dock-bottom) + var(--action-dock-height) + 9px);}
 .quest-tracker {display:none;}.target-hud {left:50%;top:var(--frame-inset);width:240px;transform:translateX(-50%);}
 #toasts {bottom:145px;}
}
