/* Full-HD and windowed desktop layout. The layout uses 16:9 coordinates.
   Keep percentage positions tied to that sheet even when browser chrome
   reduces the viewport height. Larger Surface layouts retain their rules. */
@media screen and (max-width: 2200px) {
  html.hero-sheet {
    position: relative;
    height: 56.25vw;
    min-height: 0;
  }
  .hero-sheet body {
    background-size: 100vw auto;
    background-attachment: scroll;
  }
  #upleft-tabs, #left-tabs {
    left: 3%;
    width: 17.5%;
    box-sizing: border-box;
    z-index: 20;
  }
  #upleft-tabs { top: 20px; transform: none; }
  #left-tabs {
    top: 100px;
    bottom: 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
  #left-tabs br { display: none; }
  #left-tabs .tab, #upleft-tabs .tab {
    box-sizing: border-box;
    margin: 0;
    padding: 10px 8px;
    font-size: clamp(13px, .83vw, 16px);
    line-height: 1.25;
    flex-shrink: 0;
    overflow-wrap: anywhere;
  }
  #left-tabs .tab:nth-of-type(9), #left-tabs .tab:last-child { margin-top: 18px; }
  #zustaende-container { width: 16%; font-size: clamp(12px, .83vw, 16px); }
  #zustaende { width: 100%; }
  #zustaende th, #zustaende td { padding: 3px; }
  #zustaende select { max-width: 100%; font-size: inherit !important; }
  #zustaende img { max-width: 20px; height: auto; }
  .ui-dialog { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); box-sizing: border-box; }
  .ui-dialog .ui-dialog-content { max-height: calc(100vh - 130px) !important; overflow: auto; }
  .ui-dialog-content img { max-width: 100%; height: auto; }

  /* Replace negative table margins with bounded columns on the parchment. */
  :is(#allgemeinesonder-columns-container, #kampfsonder-columns-container, #talent-columns-container, #magischesonder-columns-container, #karmalesonder-columns-container, #zaubertricks-columns-container, #segnungen-columns-container, #vorteile-columns-container, #nachteile-columns-container, #sprachen-columns-container, #schriften-columns-container) {
    position: absolute;
    top: 15%; left: 25.6%; width: 50%; height: 80%;
    margin: 0;
    display: block;
    overflow: auto;
    box-sizing: border-box;
  }
  :is(#allgemeinesonder-columns-container, #kampfsonder-columns-container, #talent-columns-container, #magischesonder-columns-container, #karmalesonder-columns-container, #zaubertricks-columns-container, #segnungen-columns-container, #vorteile-columns-container, #nachteile-columns-container, #sprachen-columns-container, #schriften-columns-container) > div { width: 100%; margin: 0; min-width: 0; }
  :is(#allgemeinesonder-columns-container, #kampfsonder-columns-container, #talent-columns-container, #magischesonder-columns-container, #karmalesonder-columns-container, #zaubertricks-columns-container, #segnungen-columns-container, #vorteile-columns-container, #nachteile-columns-container, #sprachen-columns-container, #schriften-columns-container) table { margin: 0; padding: 0; width: 100%; }
  :is(#allgemeinesonder-columns-container, #kampfsonder-columns-container, #talent-columns-container, #magischesonder-columns-container, #karmalesonder-columns-container, #zaubertricks-columns-container, #segnungen-columns-container, #vorteile-columns-container, #nachteile-columns-container, #sprachen-columns-container, #schriften-columns-container) select { max-width: 100%; min-width: 0; }
  body[data-page="talents"] #talent-columns-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2%; }
  body[data-page="talents"] #talent-columns-container table { font-size: 12px; }
  #allgemeinesonder-columns-container, #kampfsonder-columns-container,
  #vorteile-columns-container, #nachteile-columns-container,
  #magischesonder-columns-container, #karmalesonder-columns-container,
  #sprachen-columns-container, #schriften-columns-container,
  #zaubertricks-columns-container, #segnungen-columns-container { width: 24.5%; }
  #kampfsonder-columns-container, #nachteile-columns-container,
  #karmalesonder-columns-container, #schriften-columns-container,
  #segnungen-columns-container { left: 51.1%; }
  #vorteile-columns-container, #nachteile-columns-container,
  #magischesonder-columns-container, #karmalesonder-columns-container { top: 18.5%; height: 52.5%; }
  #allgemeinesonder-columns-container, #kampfsonder-columns-container { top: 18.5%; height: 76.5%; }
  #sprachen-columns-container, #schriften-columns-container,
  #zaubertricks-columns-container, #segnungen-columns-container { top: 74.5%; height: 20.5%; }
  /* Anchor combat sections to the background image, independent of browser chrome. */
  body[data-page="combat"] #talent-columns-container {
    left: 25.6vw; top: 8.45vw; width: 30vw; height: 22vw;
  }
  body[data-page="combat"] #meleeweaponsContainer,
  body[data-page="combat"] #rangedweaponsContainer,
  body[data-page="combat"] #armorContainer,
  body[data-page="combat"] #shieldContainer {
    position: absolute; overflow: auto; box-sizing: border-box;
  }
  body[data-page="combat"] #meleeweaponsContainer {
    left: 26.3vw; top: 33vw; width: 49.5vw; height: 9.5vw;
  }
  body[data-page="combat"] #rangedweaponsContainer {
    left: 26.3vw; top: 44vw; width: 49.5vw; height: 9.5vw;
  }
  body[data-page="combat"] #armorContainer {
    left: 58vw; top: 10.1vw; width: 17.8vw; height: 9vw;
  }
  body[data-page="combat"] #shieldContainer {
    left: 58vw; top: 21vw; width: 17.8vw; height: 9.5vw;
  }
  body[data-page="combat"] :is(#meleeweaponsTable, #rangedweaponsTable, #armorTable, #shieldTable) {
    position: relative; top: 0; left: 0; margin: 0; padding: 0;
  }

  /* Explicit anchors prevent personal data from moving the derived values. */
  /* Match the background's viewport-based width, including with a scrollbar. */
  body[data-page="hero"] #circle-container { left: 63.2vw; }
  body[data-page="hero"] #zustaende-container { left: 81.85vw; width: 16vw; }
  body[data-page="hero"] #attribute-table table { width: 100%; margin: 0; }
  body[data-page="hero"] #attribute-table { position: absolute; left: 25%; top: 37%; width: 34%; margin: 0; }
  body[data-page="hero"] [class^="Charakter-"][class$="-Container"] {
    position: absolute !important; left: 64% !important; width: 12% !important; height: 4.4% !important;
  }
  body[data-page="hero"] .Charakter-LE-Container { top: 38% !important; }
  body[data-page="hero"] .Charakter-AE-Container { top: 44% !important; }
  body[data-page="hero"] .Charakter-KE-Container { top: 50% !important; }
  body[data-page="hero"] .Charakter-SK-Container { top: 56% !important; }
  body[data-page="hero"] .Charakter-ZK-Container { top: 62% !important; }
  body[data-page="hero"] .Charakter-AW-Container { top: 68% !important; }
  body[data-page="hero"] .Charakter-INI-Container { top: 74% !important; }
  body[data-page="hero"] .Charakter-GS-Container { top: 80% !important; }
  body[data-page="hero"] .Charakter-SP-Container { top: 86% !important; }
  #le-container, #le-containerAE, #le-containerKE { width: 34%; max-height: 10%; overflow: auto; }
  #le-container { top: 49%; }
  #le-containerAE { top: 65.5%; }
  #le-containerKE { top: 82%; }
  .le-box, .le-boxAE, .le-boxKE { width: clamp(22px, 1.33vw, 34px); height: clamp(22px, 1.33vw, 34px); font-size: 14px; }

  /* Inventory cells follow the drawn slots instead of fixed pixel grids. */
  :is(#inventory-container, #backpack-container, #shoulderbag-container, #fannypack-container, #herbalbag-container, #scroll-container, #casket-container, #linenbag-container, #grocer-container, #herbdealer-container, #weapondealer-container, #temple-container, #mageacademy-container, #medicus-container, #bankhouse-container, #inn-container, #bathhouse-container, #saddlebag-container, #packingbasket-container, #barrel-container, #leatherbag-container, #woodenchest-container, #meshframe-container, #carriage-container, #house1-container, #house2-container, #house3-container, #house4-container, #house5-container, #house6-container) {
    box-sizing: border-box;
    display: grid;
    position: absolute;
    left: 27.6%; top: 70.5%; width: 46.9%; height: 20%;
    margin: 0; padding: 0; border: 0;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: .9vw;
    background-color: transparent;
    overflow: auto;
  }
  body[data-page="storage"] :is(#carriage-container, #house1-container, #house2-container, #house3-container, #house4-container, #house5-container, #house6-container),
  body[data-page="market"] :is(#grocer-container, #herbdealer-container, #weapondealer-container, #temple-container, #mageacademy-container, #medicus-container, #bankhouse-container, #inn-container, #bathhouse-container) {
    top: 27.7%; height: 62.6%;
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .loot {
    box-sizing: border-box;
    left: 84.6%; right: auto; top: 20.4%; width: 10.8%; height: 72.5%;
    margin: 0; padding: 0; border: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: .9vw;
    background-color: transparent;
    overflow: auto;
  }
  .smallcontainer { box-sizing: border-box; width: 5.1vw; height: 5.1vw; padding: .3vw; margin: .13vw; }
  .draggable-container .item { box-sizing: border-box; min-width: 0; min-height: 0; }
  .itemTab { box-sizing: border-box; gap: 1vw; height: 7%; padding: .4vw; }
  .itemTab img { max-width: 10%; max-height: 100%; object-fit: contain; cursor: pointer; }
  #capacityDisplay { left: 45.5%; width: 10.4%; font-size: clamp(26px, 2.2vw, 42px); }

  body[data-page="start"] { box-sizing: border-box; min-height: 56.25vw; height: auto; padding: 0; }
  body[data-page="start"] .content { position: absolute; top: 40%; left: 28%; width: 44%; box-sizing: border-box; padding: 0; gap: 24px; }
  body[data-page="start"] .content > br { display: none; }
  body[data-page="start"] .button { width: 100%; height: auto; min-height: 100px; padding: 24px; font-size: clamp(22px, 1.8vw, 36px); margin: 0; }
  body[data-page="start"] #heroSelector { width: 100%; margin: 0; box-sizing: border-box; }
  body[data-page="start"] .invisible-button { max-width: 100%; }
}
@media screen and (max-width: 2200px) and (max-height: 800px) {
  #left-tabs { justify-content: flex-start; }
}

/* Merchant offers are paginated: all eight columns fit without an inner scrollbar. */
body[data-page="market"] :is(#grocer-container, #herbdealer-container,
    #weapondealer-container, #temple-container, #mageacademy-container,
    #medicus-container, #bankhouse-container, #inn-container, #bathhouse-container) {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
}
body[data-page="market"] .draggable-container > .item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

/* Taller Surface screens need less downward offset than the Full-HD sheet.
   Aspect ratio also covers Windows display scaling. Container controls stay put. */
@media screen and (max-aspect-ratio: 17/10) {
  body[data-page="mount"] :is(.tab-horse, .tab-horse2, .horse-attribute-table,
      .horse-attack-defense-table, .horse-talents, .horse-skills, .horse-skills2) {
    position: relative;
    top: -.5vw;
  }
}
@media screen and (max-width: 2200px) and (max-aspect-ratio: 17/10) {
  body[data-page="mount"] :is(.tab-horse, .tab-horse2, .horse-attribute-table,
      .horse-attack-defense-table, .horse-talents, .horse-skills, .horse-skills2) {
    top: .15vw;
  }
}