/* Mobile menu chrome, based on studio/design/mockups/mobile-menu-concept-v1.png.
   Keep header/navigation outside the scrolling body so close is always reachable. */
@media (max-width:750px), (pointer:coarse) and (max-width:1100px), (max-width:1100px) and (max-height:600px) {
  #game dialog {
    --menu-top:calc(env(safe-area-inset-top,0px) + 8px);
    --menu-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
    --menu-left:calc(env(safe-area-inset-left,0px) + 8px);
    --menu-right:calc(env(safe-area-inset-right,0px) + 8px);
    --menu-height:calc(100dvh - var(--menu-top) - var(--menu-bottom));
    --menu-width:calc(100vw - var(--menu-left) - var(--menu-right));
    position:fixed;
    inset:var(--menu-top) auto auto var(--menu-left);
    margin:0;width:var(--menu-width);max-width:var(--menu-width);
    max-height:var(--menu-height);padding:12px;overflow:auto;overscroll-behavior:contain;
    border:1px solid #c6aa68;border-radius:10px;
    background:linear-gradient(125deg,#14261e,#081410);color:#e8e2cc;
    scrollbar-width:thin;scrollbar-color:#806e42 #0c1b14;
  }
  #game dialog::backdrop {background:#030b0899;backdrop-filter:blur(5px)}
  #game dialog button {min-height:44px;touch-action:manipulation}
  #game dialog input:not([type=checkbox]):not([type=range]),#game dialog select {min-height:44px;font-size:16px;max-width:100%}
  #game dialog h2 {font-size:20px;line-height:1.4;margin:0}
  #game dialog :is(.window-heading,.dialog-heading) {gap:8px;align-items:center;min-width:0}
  #game dialog .dialog-heading {
    position:sticky;top:-12px;z-index:var(--z-local-header);background:#102019;
    margin:-12px -12px 12px;padding:8px 12px;border-bottom:1px solid #bda26766;
  }
  #game dialog :is(.window-close,.dialog-heading>button,#map-close) {
    flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
    font-size:30px;line-height:1;color:#f1dba2;
  }
  #game dialog :is(p,small,strong,h3,dd) {overflow-wrap:anywhere}
  /* Hidden is supported by iOS Safari and prevents the outer dialog from
     scrolling its close button away. Only the body owns vertical scrolling. */
  #game dialog.rpg-window {padding:0;height:var(--menu-height);min-height:0;overflow:hidden;font-size:13px}
  #game dialog.rpg-window[open] {display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
  #game .rpg-window .window-heading {position:relative;top:auto;min-width:0;padding:8px 12px;background:#102019}
  #game .rpg-window .window-heading h2 {min-width:0;overflow-wrap:anywhere}
  #game .rpg-window .window-heading h2 {font-size:20px}
  #game .rpg-window .window-sigil {font-size:25px;width:26px}
  #game .rpg-window .window-subtitle {display:none}
  #game #bag-dialog .window-subtitle {display:block;font-size:11px;border:0;padding:0;margin-left:auto;white-space:nowrap}
  #game .rpg-window .window-close {margin-left:auto}
  #game .rpg-window .window-nav {padding:0 8px;gap:5px}
  #game .rpg-window .window-nav button {min-width:0;flex:1;padding:8px 4px;font-size:12px;min-height:44px}
  #game .rpg-window :is(.character-layout,.skills-layout,.bag-layout) {
    min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;gap:10px;
    grid-template-columns:minmax(0,1fr);align-content:start;
  }
  #game .rpg-window .window-panel {padding:12px;min-width:0}
  #game .rpg-window .window-panel h3 {font-size:17px}
  #game .rpg-window .window-footer {padding:8px 12px;gap:8px;font-size:11px;background:#0c1b14;min-width:0}
  #game .rpg-window .window-footer small {display:none}
  #game .rpg-window .window-footer>span {min-width:0}
  #game .rpg-window .window-footer button {font-size:12px;padding:6px 10px}
  #game .rpg-window .gold-button {font-size:16px}
  #game .rpg-window .window-data-row {min-height:36px;font-size:12px;gap:8px}
  #game .rpg-window .window-data-row strong {font-size:14px;white-space:normal;text-align:right}
  #game .rpg-window .detail-icon {float:left;width:64px;height:64px;margin:0 12px 8px 0}
  #game .rpg-window :is(.item-detail,.skill-detail) {min-height:0;display:flow-root}
  #game .rpg-window :is(.item-detail,.skill-detail) h3 {font-size:18px}
  #game .rpg-window :is(.item-detail,.skill-detail) .window-data-row {clear:both}
  #game .rpg-window :is(.item-detail,.skill-detail)>button {margin-top:8px;clear:both}
  #game .bag-tools {gap:8px;margin-bottom:8px}
  #game .bag-tools input {min-width:0;flex-basis:100%;padding:10px}
  #game .bag-filters {width:100%;min-width:0;gap:5px}
  #game .bag-filters button {flex:1;min-width:0;padding:6px 2px;font-size:12px}
  #game .bag-grid {
    grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:max-content;gap:5px;align-content:start;
    max-height:clamp(110px,25dvh,220px);overflow:auto;overscroll-behavior:contain;padding:2px;
  }
  #game .bag-grid .bag-slot {min-height:44px}
  #game .bag-grid .bag-slot .window-icon {width:100%;height:100%}
  #game #bag-summary {display:none}
  #game .character-stage {min-height:0;display:grid;grid-template-columns:90px minmax(0,1fr)}
  #game .character-stage:after,#game .character-stage .stage-label {display:none}
  #game .character-stage .character-art {width:90px;height:120px;grid-row:1/3}
  #game .character-stage .character-name {width:100%;padding:8px}
  #game .character-name h3 {font-size:20px}
  #game .character-stage .equipment-strip {margin:8px 0 22px;gap:12px;justify-content:center}
  #game .rpg-window .equipment-slot {width:48px;height:48px;padding:3px}
  #game .equipment-slot .window-icon {width:38px;height:38px}
  #game .status-columns {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #game .attribute-row {grid-template-columns:30px minmax(0,1fr) 44px;gap:4px;min-height:46px}
  #game .attribute-row small {display:none}
  #game .rpg-window .attribute-plus {height:44px;min-height:44px}
  #game .window-resource {grid-template-columns:30px minmax(0,1fr) 80px;gap:6px}
  #game .window-resource>span {font-size:11px}
  #game .stat-actions {flex-wrap:wrap}
  #game .stat-actions>span {flex-basis:100%}
  #game .stat-actions button {flex:1;min-width:0}
  #game .skill-sidebar {display:none}
  #game .skill-points-mobile {display:block}
  #game .skill-tree {flex-direction:row;padding:4px 0;gap:6px}
  #game .rpg-window .skill-card {display:flex;flex:1;flex-direction:column;min-width:0;padding:8px 4px;gap:6px;text-align:center}
  #game .skill-card .window-icon {width:44px;height:44px}
  #game .skill-card strong {font-size:12px}
  #game .skill-card small {display:none}
  #game .skill-hint {font-size:12px;line-height:1.6;margin-top:8px}
  #game .skill-detail .skill-rank {margin:10px 0;font-size:17px}
  #game .equipped-skills .window-icon {width:32px;height:32px}
  #game #settings-dialog[open] {grid-template-rows:auto minmax(0,1fr) auto}
  #game .settings-body {min-height:0;padding:10px;overflow:auto}
  #game .settings-toggle {position:relative}
  #game .settings-toggle input[type=checkbox] {right:0;top:50%;transform:translateY(-50%);width:44px;height:44px}
  #game .settings-action {flex-wrap:wrap}
  #game .settings-action button {max-width:100%}
  #game #shop-dialog[open] {grid-template-rows:auto minmax(0,1fr)}
  #game .shop-header {position:static;padding:8px 12px;background:#102019;box-shadow:none;border-bottom:1px solid #bda26766}
  #game .shop-header .dialog-heading {position:static;margin:0;padding:0;border:0}
  #game .shop-header p {margin:4px 0;line-height:1.4;font-size:12px}
  #game .shop-header .shop-status:empty {display:none}
  #game .shop-tools {gap:6px}
  #game .shop-tools button {padding:6px 10px}
  #game .shop-tools input {width:65px}
  #game .shop-list {min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;align-content:start}
  #game .shop-row {grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px}
  #game .shop-row button {grid-column:1/-1}
  #game #catalog-tabs {flex-wrap:nowrap;overflow:auto;overscroll-behavior:contain;gap:6px;padding:2px 0 6px}
  #game #catalog-tabs button {flex-shrink:0;padding:6px 12px}
  #game .catalog-filters {gap:10px}
  #game #catalog-search {min-width:0;width:100%;flex-basis:100%}
  #game dl {grid-template-columns:76px minmax(0,1fr);font-size:12px;line-height:1.7}
  #game dd {min-width:0}
  #game #travel-options {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  #game #npc-actions {display:flex;flex-wrap:wrap;gap:8px}
  #game #npc-actions button {flex:1 1 140px;padding:10px}
  #game #map-dialog {height:var(--menu-height);padding:10px;overflow:hidden}
  #game .map-heading {min-height:44px;display:flex;align-items:center;justify-content:center;padding-right:44px}
  #game #map-close {top:0;right:0}
  #game #map-close kbd {display:none}

  #game .map-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,1fr) auto;gap:8px}
  #game .map-sidebar {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;overflow:auto}
  #game .map-legend {display:none}
  #game .map-area {padding:8px}
  #game .map-area h3 {font-size:12px;margin-bottom:4px}
  #game .map-area p {font-size:11px;margin:4px 0}
  #game .map-tools {margin:0;align-self:center;display:flex;flex-wrap:wrap;justify-content:end;width:142px;gap:5px}
  #game .map-tools button,#game #map-center {width:44px;height:44px;min-width:44px;min-height:44px}
  #game .map-zoom output {min-width:50px}
  #game .map-footer {padding-top:6px;font-size:10px;line-height:1.5}
  #game .map-footer span:last-child {display:none}

}

/* Short landscape screens use both axes: each inventory column scrolls independently. */
@media (orientation:landscape) and (max-width:1100px) and (max-height:600px) {
  #game .rpg-window .window-heading {padding:4px 10px}
  #game .rpg-window .window-nav {padding:0 8px}
  #game .rpg-window .window-footer {padding:4px 10px}
  #game .rpg-window .bag-layout {grid-template-columns:minmax(0,1fr) minmax(210px,36%);overflow:hidden;align-content:stretch;padding:8px}
  #game .bag-items {display:flex;flex-direction:column;min-height:0;overflow:hidden}
  #game .bag-tools {flex-wrap:nowrap;gap:6px;flex-shrink:0}
  #game .bag-tools input {flex:1 1 100px;width:0;min-width:0}
  #game .bag-filters {width:auto;flex:1;gap:4px}
  #game .bag-filters button {padding:4px;font-size:11px}
  #game .bag-grid {max-height:none;min-height:0;flex:1;grid-template-columns:repeat(6,minmax(0,1fr))}
  #game .rpg-window .item-detail {overflow:auto;overscroll-behavior:contain;min-height:0}
  #game .bag-items>.window-muted {margin:2px 0;font-size:10px}
  #game .rpg-window .character-layout {grid-template-columns:155px minmax(0,1fr)}
  #game .character-stage {display:flex;align-self:start}
  #game .character-stage .character-art {width:110px;height:105px}
  #game .character-stage .character-name h3 {font-size:18px}
  #game .character-stage .character-name span {font-size:10px}
  #game .character-stage .equipment-strip {margin:8px 0 22px}
  #game .rpg-window .skills-layout {grid-template-columns:minmax(0,1fr) minmax(210px,45%);overflow:hidden;align-content:stretch}
  #game .skills-layout>.window-panel {min-height:0;overflow:auto;overscroll-behavior:contain}
  #game .skill-tree {flex-direction:column;gap:6px}
  #game .rpg-window .skill-card {display:grid;grid-template-columns:44px minmax(0,1fr);text-align:left;padding:6px;min-height:58px}
  #game .skill-card .window-icon {grid-row:1/3}
  #game .skill-card strong {font-size:13px}
  #game .skill-hint {margin:6px 0}
  #game .shop-header {padding:4px 10px}
  #game .shop-header .shop-tools {position:absolute;right:66px;top:4px}
  #game .shop-header h2 {font-size:18px}
  #game .shop-tools button {font-size:12px}
  #game .shop-row {grid-template-columns:32px minmax(0,1fr) auto}
  #game .shop-row button {grid-column:auto}
  #game .map-layout {grid-template-columns:minmax(0,1fr) 175px;grid-template-rows:minmax(0,1fr)}
  #game .map-sidebar {display:flex;overflow:auto}
  #game .map-tools {width:auto;align-self:stretch;justify-content:start}

  #game #travel-options {grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:360px) {
  #game .rpg-window .window-heading h2 {font-size:18px}
  #game .rpg-window .window-sigil {display:none}
  #game .status-columns {grid-template-columns:minmax(0,1fr)}
  #game .bag-grid {grid-template-columns:repeat(5,minmax(0,1fr))}
}