/* Shared play surfaces: keep navigation and the map usable at every window size. */
@media(min-width:781px){
  .sidebar{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden!important}
  .sidebar>.brand,.sidebar>.nav-label,.sidebar>.hq-menu-tools,.sidebar>.sidebar-bottom{flex:0 0 auto}
  .sidebar #nav{flex:1 1 0;min-height:0;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-width:thin;padding-right:3px}
  .sidebar>.hq-menu-tools{padding-top:6px;border-top:1px solid var(--line)}
  .sidebar>.sidebar-bottom{margin-top:8px;padding-top:8px}
  .sidebar .alpha-box{font-size:8px;padding:7px 6px}
}
@media(max-width:780px){
  .game-menu-open .sidebar{display:flex;flex-direction:column;overflow:hidden!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  .sidebar>.brand,.sidebar>.hq-menu-tools,.sidebar>.sidebar-bottom{flex:0 0 auto}
  .sidebar #nav{height:auto!important;flex:1 1 0;min-height:0;overflow-y:auto!important;overflow-x:hidden!important}
  .sidebar .hq-menu-tools .nav-item{display:flex;flex-direction:row;justify-content:flex-start;width:100%;max-width:none;min-height:44px;gap:10px;padding:8px 12px;font-size:13px;text-align:left}
  .sidebar>.sidebar-bottom{margin-top:8px;padding-top:8px}
}
/* The status rail is useful only while it leaves enough width to play. */
@media(min-width:781px) and (max-width:1399px){
  .hq-world-view .content-grid{display:block!important;max-width:1180px;gap:0}
  .hq-world-view #right-rail{display:none!important}
  .hq-world-view #mobile-status{display:block!important;max-width:none;margin:10px 20px 0!important}
  .hq-world-view #mobile-status .world-player-card{padding:0;margin:0}
  .hq-world-view #mobile-status .world-player-summary{padding:8px 12px}
  .hq-world-view #mobile-status .world-player-meters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .hq-world-view #mobile-status .world-player-disclosure{flex-wrap:nowrap;margin-top:6px;padding-top:5px}
  .hq-world-view #mobile-status .world-player-toggle{width:auto;min-height:36px;font-size:11px}
}
.hq-world-view #main-content{min-width:0}
#world-play-panel{container-type:inline-size;min-width:0}
#world-play-panel .map-stage{min-width:0;min-height:220px}
#world-play-panel #tile-map{touch-action:none;cursor:grab}
#world-play-panel #tile-map:active{cursor:grabbing}
.map-camera-toolbar{display:flex;align-items:center;gap:5px;padding:5px 9px;border-block:1px solid var(--line);background:#09251f;min-width:0;grid-column:1/-1}
.map-camera-toolbar button{min-height:36px;min-width:36px;border:1px solid #3d6050;border-radius:6px;background:#102f25;color:var(--gold);padding:5px 9px;font-size:12px;line-height:1;white-space:nowrap;touch-action:manipulation}
.map-camera-toolbar button[data-map-camera="in"],.map-camera-toolbar button[data-map-camera="out"]{font-size:22px;padding:3px 8px}
.map-camera-toolbar button[aria-pressed="true"]{border-color:var(--gold);background:#34402b;color:#f6df9b}
.map-camera-toolbar output{font-size:11px;min-width:36px;display:inline-block;text-align:center}
.map-camera-mode{margin-left:auto;color:var(--muted);font-size:10px;overflow-wrap:anywhere;text-align:right}
#world-play-panel .world-toolbar{flex-wrap:wrap}
#world-play-panel .map-controls{min-width:0}
#world-play-panel .map-selection{min-width:0}
@media(max-width:1099px){
  #world-play-panel{display:block}
  #world-play-panel .map-stage{min-height:260px}
}
/* Keep independent controls below a narrow map, including short split windows. */
@container(max-width:620px){
  #world-play-panel .map-controls{grid-template-columns:140px minmax(0,1fr);gap:9px;padding:9px}
  #world-play-panel .direction-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:3px}
  #world-play-panel .direction-pad button{min-width:44px;min-height:44px;font-size:21px;padding:0}
  #world-play-panel .map-selection{padding-left:9px;min-height:126px}
  #world-play-panel .selected-icon{display:none}
  #world-play-panel .selected-info h3{font-size:17px}
  #world-play-panel .selected-info .eyebrow{font-size:10px}
  #world-play-panel .selected-info p{display:none}
  #world-play-panel .selected-info small{font-size:11px}
  #world-play-panel .selected-action{width:100%;margin-left:0}
  #world-play-panel .selected-action .button{min-height:40px;font-size:11px;padding:7px}
  #world-play-panel #world-teleport>.button{min-height:40px;padding:5px;font-size:11px;width:100%}
}
@media(max-width:780px){
  .map-camera-toolbar{padding:4px 6px;gap:4px}
  .map-camera-toolbar button{min-height:44px;min-width:44px;padding:5px 7px}
  .map-camera-mode{font-size:9px;max-width:56px;line-height:1.25}
  #world-play-panel .world-toolbar{padding:7px 9px;gap:5px}
  #world-play-panel .world-toolbar>div{flex-basis:auto;flex:1}
  #world-play-panel .world-toolbar .world-coordinates{font-size:10px}
  #world-play-panel .world-target-label{flex:1 1 100%}
  #world-play-panel #world-target-select{min-height:32px;padding:4px 7px}
  .hq-world-view #mobile-status .world-player-summary{padding:6px 8px}
  .hq-world-view #mobile-status .world-player-resource-label{font-size:10px}
  .hq-world-view #mobile-status .world-player-toggle{min-height:36px;font-size:11px;padding:5px 7px}
  .hq-world-view #mobile-status .world-player-location{font-size:10px}
  .hq-world-view #mobile-status .world-player-location small{display:none}
  .hq-world-view #mobile-status .world-player-disclosure{margin-top:5px;padding-top:4px}
}
/* Item imagery supplements compact names and actions instead of occupying a card. */
#main-content .inventory-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:9px}
#main-content .storage-item{padding:10px;min-height:0;border-radius:9px}
#main-content .storage-item .item-emblem{margin:0 0 5px;min-height:0}
#main-content .storage-item .item-emblem>.hq-art,#main-content .market-emblem>.hq-art{--hq-art-size:34px}
#main-content .storage-item h4{font-size:13px;line-height:1.35;min-height:0;margin:5px 0}
#main-content .storage-item .storage-rarity{font-size:9px;margin-top:5px}
#main-content .storage-item .storage-equipped{margin:4px 0;font-size:10px}
#main-content .storage-item .ui-item-info>summary{min-height:30px;padding:5px 0}
#main-content .storage-item .item-actions{margin-top:7px;gap:5px}
#main-content .storage-item .item-actions>.button{min-height:34px;font-size:10px;padding:6px;min-width:52px}
#main-content .recipe-card,#main-content .market-card{padding:11px;min-height:0}
#main-content .recipe-icon>.hq-art{--hq-art-size:34px}
#main-content .ui-profile .dossier-slot{min-height:88px;padding:8px 5px}
#main-content .dossier-equipment .dossier-slot .slot-symbol>.hq-art{--hq-art-size:36px}
#main-content .ui-profile .dossier-slot .slot-symbol{margin-bottom:5px}
#main-content .ui-profile .dossier-slot .slot-label{font-size:11px}
#main-content .ui-bag-tile{min-height:80px;padding:9px 5px}
#main-content .ui-bag-tile>.hq-art{--hq-art-size:32px;margin-bottom:5px!important}
@media(max-width:780px){
  #main-content .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #main-content .storage-item{padding:9px}
  #main-content .storage-item .item-actions>.button{min-height:40px}
  #main-content .recipe-card,#main-content .market-card{padding:10px}
  #main-content .ui-profile .dossier-slot{min-height:84px}
}

@media(max-width:640px){.map-camera-mode{display:none}}
@container(max-width:300px){#world-play-panel .selected-info h3{font-size:15px}#world-play-panel .map-selection .eyebrow{font-size:9px}#world-play-panel .selected-action .button{padding:6px 3px;font-size:10px}}

@media(min-width:600px) and (max-width:780px){#main-content .inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phone status cards use one padding layer; reserve height for play controls. */
.hq-world-view #mobile-status .world-player-card{padding:0;margin:0}
@media(max-width:640px){#world-play-panel .map-stage{min-height:220px}}
@media(max-width:780px){
  .sidebar{top:var(--hq-menu-top,60px)!important;height:calc(100dvh - var(--hq-menu-top,60px))!important;max-height:calc(100dvh - var(--hq-menu-top,60px))!important}
  .game-menu-open .game-menu-backdrop{inset:var(--hq-menu-top,60px) 0 0!important}
}
/* Compact optional explanations without shrinking working controls. */
.ui-filter-disclosure{margin:9px 0 0;border:0;background:transparent}
.ui-filter-disclosure>summary{padding:5px 0;min-height:36px;font-size:11px;color:var(--gold)}
.ui-filter-disclosure>.ui-disclosure-body{padding:0}
.ui-filter-disclosure .collection-facets{margin-top:5px}
.ui-disclosure-body>.forge-notice,.ui-disclosure-body>.world-planning{margin:0}
#main-content .pvp-banner h2{font-size:22px}
#main-content .bounty-intro{padding:12px;gap:10px;align-items:center}
#main-content .bounty-intro>.ui-disclosure{flex:1;margin:0}
#main-content .bounty-intro>.button{flex:none}
@media(max-width:780px){
  .collection-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:7px}
  .collection-toolbar>.storage-search{grid-column:1/-1}
  .collection-toolbar>.text-button{min-height:40px}
  #main-content .storage-filters.collection-filters{padding:10px;margin:10px 0 8px}
  #main-content .summary-strip{padding:10px;gap:10px;flex-wrap:wrap;font-size:10px;margin-bottom:10px}
  #main-content .ui-disclosure{margin-bottom:9px}
  #main-content .ui-disclosure>summary{padding:9px 12px;min-height:40px}
  #main-content .ui-filter-disclosure>summary{padding:4px 0;min-height:36px}
  #main-content .world-player-toggle,#main-content .ui-profile-actions>.button{min-height:44px}
}
/* Short wide windows use horizontal play space; the menu replaces the dock. */
@media(min-width:700px) and (max-height:650px){
  .hq-world-view .ui-bottom-nav{display:none}
  .hq-world-view .topbar{min-height:52px;padding:4px 12px!important}
  .hq-world-view .content-grid{display:block!important;padding:8px 12px 24px!important}
  .hq-world-view #right-rail{display:none!important}
  .hq-world-view #mobile-status{display:block!important;margin:6px 12px 0!important;max-width:none}
  .hq-world-view #mobile-status .world-player-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 8px}
  .hq-world-view #mobile-status .world-player-meters{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hq-world-view #mobile-status .world-player-resource-label{display:block;font-size:10px;line-height:1.2}
  .hq-world-view #mobile-status .world-player-value{display:block;text-align:left;font-size:10px}
  .hq-world-view #mobile-status .world-player-disclosure{margin:0;padding:0 0 0 8px;border-top:0;border-left:1px solid var(--line);gap:8px;flex-wrap:nowrap}
  .hq-world-view #mobile-status .world-player-location{font-size:10px;white-space:nowrap}
  .hq-world-view #mobile-status .world-player-location small{display:none}
  .hq-world-view #mobile-status .world-player-toggle{min-height:44px;padding:5px 8px;max-width:none;width:auto;font-size:11px}
  #world-play-panel{display:grid;grid-template-columns:minmax(0,1fr) 288px;align-items:start;padding:0}
  #world-play-panel .world-toolbar,#world-play-panel .map-camera-toolbar,#world-route-state,#world-elite-strip,#hunt-strip,#map-crew-list{grid-column:1/-1}
  #world-play-panel .world-toolbar{flex-wrap:nowrap;padding:6px 9px;min-height:42px}
  #world-play-panel .world-toolbar>div{flex:1 1 auto;flex-basis:auto}
  #world-play-panel .world-target-label{flex:0 1 240px;margin-left:auto;min-width:100px}
  #world-play-panel .world-target-label>span,#world-play-panel #map-presence-count{display:none}
  #world-play-panel #world-target-select{min-height:32px;width:100%;font-size:11px!important}
  #world-play-panel .map-stage{min-height:220px;height:max(220px,min(var(--world-map-height,280px),calc(100dvh - 225px)));border-radius:0}
  #world-play-panel .map-controls{display:grid;grid-template-columns:140px minmax(0,1fr);align-self:stretch;padding:8px;gap:8px;border-top:0;border-left:1px solid var(--line);border-radius:0}
  #world-play-panel .map-selection{display:block;padding-left:8px;min-height:0}
  #world-play-panel .map-selection .selected-icon,#world-play-panel .map-selection .selected-info p{display:none}
  #world-play-panel .map-selection .eyebrow{font-size:10px}
  #world-play-panel .selected-info h3{font-size:16px}
  #world-play-panel .selected-info small{font-size:10px}
  #world-play-panel .selected-action{width:100%;margin-left:0}
  #world-play-panel .selected-action .button{width:100%;min-height:44px;padding:6px 4px;font-size:11px}
  #world-play-panel .map-corner-label{display:none}
  #world-play-panel .map-key{font-size:10px;left:6px;bottom:6px}
}
/* The map has its own toolbar and control padding; avoid a second card inset. */
#world-play-panel{padding:0}
#world-play-panel #world-route-state .button{min-height:44px}
@media(min-width:700px) and (max-height:650px){#world-play-panel .map-camera-toolbar{padding-block:0}}
#world-play-panel #world-route-state{padding:0 8px;min-height:44px;font-size:11px;gap:6px}
#world-play-panel .selection-empty p{display:none}
/* Inventory cards pair the picture with the item heading, then keep all actions
   in two columns. Long names, requirements, prices and ownership stay visible. */
#main-content .inventory-grid{align-items:start}
#main-content .storage-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 7px;align-content:start}
#main-content .storage-item>.inventory-bulk-pick{grid-column:1/-1;margin:0 0 3px;padding-bottom:5px}
#main-content .storage-item>.item-emblem{grid-column:1;grid-row:2/span 2;align-self:start;justify-self:start;margin:0;width:34px;height:34px}
#main-content .storage-item>.storage-rarity{grid-column:2;grid-row:2;margin:0;line-height:1.3;letter-spacing:.035em}
#main-content .storage-item>h4{grid-column:2;grid-row:3;margin:0;line-height:1.3}
#main-content .storage-item>.ui-item-info,#main-content .storage-item>p,#main-content .storage-item>small,#main-content .storage-item>.storage-equipped,#main-content .storage-item>.item-actions{grid-column:1/-1}
#main-content .storage-item>.ui-item-info{margin:0;border:0;background:transparent}
#main-content .storage-item>.ui-item-info>summary{padding:5px 0;min-height:44px}
#main-content .storage-item>.item-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:5px}
#main-content .storage-item>.item-actions>.button{min-width:0;min-height:44px;padding:6px 4px;white-space:normal;overflow-wrap:anywhere}
#main-content .storage-item>.item-actions>.button:only-child{grid-column:1/-1}
#main-content .storage-item .inventory-bulk-pick label{min-height:44px}
#main-content .storage-item .inventory-bulk-pick input[type=number]{min-height:44px}
/* The sprite is already visible on the map; its selected action panel does not
   need a second portrait before the player's name and controls. */
#world-play-panel .map-selection[data-entity-type="player"]>canvas{display:none}
#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions>.button{min-width:0;min-height:44px;padding:6px 4px;font-size:11px;white-space:normal;overflow-wrap:anywhere}
#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions>.friend-tag{grid-column:1/-1;width:auto}
@container(max-width:620px){
  #world-play-panel .map-selection[data-entity-type="player"] .eyebrow{display:none}
  #world-play-panel .map-selection[data-entity-type="player"] h3{font-size:15px;margin-bottom:5px}
  #world-play-panel .map-selection[data-entity-type="player"] .map-player-actions>.button{font-size:10px;line-height:1.25}
}
#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
@media(max-width:640px),(min-width:700px) and (max-height:650px){#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){#world-play-panel .map-selection[data-entity-type="player"] .map-player-actions>.button{padding-inline:2px;overflow-wrap:normal;word-break:normal}}
