.hud-details-toggle{display:none}
#minimap:focus-visible{outline:2px solid #ead39b;outline-offset:3px}

@media(max-width:760px), (max-width:1100px) and (max-height:500px) and (pointer:coarse){
  /* Focus/scrollIntoView must never pan the entire game sideways. Drawers and
     the atlas keep their own scroll containers. */
  html,body{overflow:clip}
  #game-shell{--mobile-hud-top:72px;--mobile-map-width:96px;--mobile-edge: max(8px,env(safe-area-inset-left,0px));--mobile-nav-height:calc(58px + env(safe-area-inset-bottom,0px))}
  /* ID selectors also override the older scene-specific training HUD. */
  #game-shell:has(#world) #player-card{top:var(--mobile-hud-top);left:var(--mobile-edge);width:calc(100% - var(--mobile-map-width) - var(--mobile-edge) - max(8px,env(safe-area-inset-right,0px)) - 8px);max-width:224px;padding:8px 10px;border-radius:8px;background:#111b16e8}
  #game-shell:has(#world) #player-card .hud-details-toggle{display:block;position:absolute;inset:0 0 auto;width:100%;height:44px;padding:0 10px;text-align:right;color:#dbc38e;z-index:1;border-radius:8px}
  #game-shell:has(#world) #player-card .hud-details-toggle span{display:inline-block;font-size:22px}
  #game-shell:has(#world) #player-card.hud-expanded .hud-details-toggle span{transform:rotate(180deg)}
  #game-shell:has(#world) #player-card .player-heading{min-height:28px;padding-right:24px;gap:0}
  #game-shell:has(#world) #player-card .player-heading>div:nth-child(2){width:100%;min-width:0}
  #game-shell:has(#world) #player-card .player-heading h2{font-size:14px;line-height:1.5;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #game-shell:has(#world) #player-card :is(.portrait,.signal,.player-heading small,.status-label){display:none}
  /* A critical condition stays visible even while the details are collapsed. */
  #game-shell:has(#world) #player-card .status-label.starvation-debuff{display:block;padding:2px 4px;margin-top:4px;font-size:11px;line-height:1.5}
  #game-shell:has(#world) #player-card .hp-label{margin:4px 0 5px;font-size:12px;line-height:1.5}
  #game-shell:has(#world) #player-card .hp-label strong{font-size:13px}
  #game-shell:has(#world) #player-card .bar.hp{height:5px}
  #game-shell:has(#world) #player-card:not(.hud-expanded) :is(.vitals,.buff-list,.xp-label,.bar.xp){display:none}
  #game-shell:has(#world) #player-card.hud-expanded{z-index:7;max-height:calc(100dvh - var(--mobile-hud-top) - var(--combat-hud-bottom) - var(--combat-hud-height) - 16px);overflow-y:auto;overscroll-behavior:contain}
  #game-shell:has(#world) #player-card.hud-expanded .player-heading h2{white-space:normal;overflow-wrap:anywhere}
  #game-shell:has(#world) #player-card.hud-expanded .vitals{margin-top:8px;padding-top:8px;gap:4px}
  #game-shell:has(#world) #player-card.hud-expanded .vitals label{font-size:12px;line-height:1.5}
  #game-shell:has(#world) #player-card.hud-expanded .vitals strong{font-size:14px;margin-top:2px}
  #game-shell:has(#world) #player-card.hud-expanded .xp-label{display:flex;font-size:11px;gap:4px;margin:8px 0 5px}
  #game-shell:has(#world) #player-card.hud-expanded .bar.xp{display:block}
  #game-shell:has(#world) #player-card.hud-expanded .buff-list:not(:empty){margin-top:8px;padding-top:8px;max-height:none}
  #game-shell:has(#world) .right-column{top:var(--mobile-hud-top);right:max(8px,env(safe-area-inset-right,0px));width:var(--mobile-map-width);gap:0}
  #game-shell .minimap-panel{padding:5px;border-radius:8px;background:#111b16de}
  #game-shell .minimap-panel .panel-eyebrow{font-size:11px;line-height:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #game-shell .minimap-panel :is(.live-clock,.map-key){display:none}
  #game-shell .minimap-panel #minimap{width:100%;height:auto;aspect-ratio:280 / 154;min-height:44px;margin:3px 0 0}
  #game-shell .quest-card{display:none}
  #game-shell .target-card{top:calc(var(--mobile-hud-top) + 122px)}
  #game-shell #drawer{top:var(--mobile-hud-top);bottom:calc(var(--mobile-nav-height) + 8px);left:var(--mobile-edge);right:max(8px,env(safe-area-inset-right,0px));width:auto;padding:12px 14px;overscroll-behavior:contain;scroll-padding-top:48px}
  #game-shell #drawer.atlas-drawer{transform:none;height:auto;margin:0;max-height:none}
  #game-shell #drawer .drawer-close{position:sticky;top:0;float:right;display:grid;place-items:center;width:44px;height:44px;margin:0 0 -44px 0;border-radius:6px;background:#17251ef5;z-index:2;font-size:26px}
  #game-shell #drawer-content>h2,#game-shell #drawer-content>.eyebrow,#game-shell .atlas-heading{padding-right:44px}
  #game-shell .nav-tabs{display:none}
  #game-shell .mobile-tabs{display:flex;position:absolute;inset:auto 0 0;height:var(--mobile-nav-height);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overflow-x:auto;background:#111a15;border-top:1px solid #414b36;z-index:6}
  #game-shell .mobile-tabs button{color:#8e9b82}
  #game-shell .mobile-tabs button.active{color:#d3b780;border-top:2px solid #bea16a}
}

/* Phones rotated sideways need a single header row and a shallower control bar. */
@media(max-width:1100px) and (max-height:500px) and (pointer:coarse){
  #game-shell{--mobile-nav-height:calc(44px + env(safe-area-inset-bottom,0px));--combat-hud-bottom:calc(var(--mobile-nav-height) + 6px)}
  #game-shell .topbar,#game-shell .topbar:has(.header-wallet:not(.hidden)){display:flex;height:56px;padding:0 max(8px,env(safe-area-inset-right,0px)) 0 var(--mobile-edge);gap:8px}
  #game-shell .topbar .brand{font-size:18px;gap:6px;flex-shrink:0}
  #game-shell .topbar .brand-mark{width:28px;height:32px;font-size:23px;line-height:32px}
  #game-shell .topbar .brand small,#game-shell:has(#world) .topbar>.connection{display:none}
  #game-shell .topbar .header-wallet{margin-left:auto;gap:5px}
  #game-shell .wallet-balance{padding:5px;font-size:12px}
  #game-shell .wallet-balance strong{max-width:64px}
  #game-shell .wallet-topup{min-height:36px;padding:5px 7px;font-size:12px}
  #game-shell .mobile-tabs button{flex:1;min-width:64px;font-size:13px;white-space:nowrap}
  #game-shell .bottom-hud{left:var(--mobile-edge);right:max(8px,env(safe-area-inset-right,0px))}
  #game-shell .combat-controls{max-width:340px}
  #game-shell .action-dock>button{min-height:48px}
  #game-shell .action-slot{min-height:48px;padding:4px}
  #game-shell .action-dock{padding:4px}
  #game-shell .action-dock :is(.action-slot strong,.attack-button strong){font-size:14px}
  #game-shell .action-dock :is(.action-slot small,.attack-button small){font-size:11px}
  #game-shell .location,#game-shell .coordinate{display:none}
  #game-shell .chat-panel:not(.expanded){left:auto;right:max(8px,env(safe-area-inset-right,0px));top:auto;bottom:calc(var(--mobile-nav-height) + 8px);width:96px}
  #game-shell .chat-panel:not(.expanded) .chat-toggle{gap:4px;padding:8px}
  #game-shell .chat-panel:not(.expanded) .chat-title{font-size:0;gap:0}
  #game-shell .chat-panel:not(.expanded) .chat-title::after{content:'แชท';font-size:13px}
  #game-shell .chat-panel:not(.expanded) .chat-title kbd{display:none}
  #game-shell:has(#world) #player-card.hud-expanded{max-height:calc(100dvh - var(--mobile-hud-top) - var(--mobile-nav-height) - 12px)}
  #game-shell .target-card{top:var(--mobile-hud-top);width:190px;padding:7px 18px}
  #game-shell .atlas-layout{display:flex;flex-direction:column}
}