/* One title-bar geometry for every game sheet. 44px control + 10px on each
   side = 64px. Wallets and filters live in their own row below that bar. */
:root {
  --popup-bar-height: 64px;
  --popup-control-size: 44px;
  --popup-control-gap: 10px;
  --popup-title-gutter: 64px;
}

/* Direct children are anchored to the sheet's inner edge, not its content
   padding. Icons have the same optical and hit-area center everywhere. */
dialog:not(.art-viewer) > .dialog-close,
.profile-sheet > .dialog-close {
  position: absolute;
  inset: var(--popup-control-gap) var(--popup-control-gap) auto auto;
  width: var(--popup-control-size);
  height: var(--popup-control-size);
  min-width: var(--popup-control-size);
  min-height: var(--popup-control-size);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 0;
  z-index: 8;
}

/* A heading may be sticky inside its scroll body, but the title bar itself
   always has the same measured height as the non-scrolling sheet headers. */
#settings-body > .sheet-title,
#log-body > .sheet-title {
  height: var(--popup-bar-height);
  min-height: var(--popup-bar-height);
  display: grid;
  align-items: center;
  padding: 0 var(--popup-title-gutter);
  margin-top: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Deck titles occupy the first row. Balances never move the title or close
   control; a zone count is centered in the separate left-hand gutter. */
#deck-body[data-mode] > .deck-sheet-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: var(--popup-bar-height);
  grid-auto-rows: auto;
  align-items: center;
  gap: 0;
  min-height: var(--popup-bar-height);
  padding: 0;
  margin: 0;
}
#deck-body[data-mode] > .deck-sheet-header .sheet-title {
  grid-area: 1 / 1;
  display: block;
  line-height: var(--popup-bar-height);
  height: var(--popup-bar-height);
  min-height: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 var(--popup-title-gutter);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#deck-body[data-mode] > .deck-sheet-header .currency-chips {
  grid-area: 2 / 1;
  justify-self: end;
  max-width: calc(100% - 40px);
  margin: 0 20px 16px;
}
#deck-body[data-mode=zone] > .deck-sheet-header .sheet-title {
  padding-inline: 76px;
}
#deck-body[data-mode=zone] > .deck-sheet-header .zone-card-count {
  position: absolute;
  left: var(--popup-control-gap);
  top: 15px;
  margin: 0;
}

/* Card collection: the back arrow joins the title bar; only the wallet is
   below it, keeping large balances out of long localized card names. */
#library-grid > .collection-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: var(--popup-bar-height) auto;
  align-items: center;
  gap: 0;
  min-height: var(--popup-bar-height);
  margin: 0;
  padding: 0;
}
#library-grid > .collection-heading .collection-title-row { display: contents; }
#library-grid > .collection-heading .sheet-title {
  grid-area: 1 / 1;
  display: block;
  line-height: var(--popup-bar-height);
  height: var(--popup-bar-height);
  min-height: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 var(--popup-title-gutter);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#library-grid > .collection-heading .currency-chips {
  grid-area: 2 / 1;
  justify-self: end;
  max-width: calc(100% - 40px);
  margin: 0 20px 16px;
}
#library-grid .collection-heading > .collection-back {
  position: absolute;
  grid-area: auto;
  inset: var(--popup-control-gap) auto auto var(--popup-control-gap);
  display: grid;
  place-items: center;
  width: var(--popup-control-size);
  height: var(--popup-control-size);
  min-width: var(--popup-control-size);
  min-height: var(--popup-control-size);
  max-width: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  z-index: 2;
}
.collection-back .button-icon { width: 24px; height: 24px; }

/* Simple title bars share one central cell with two symmetric control slots. */
.profile-sheet > .profile-sheet-header,
.item-details-dialog > .item-details-header,
.shop-content > .shop-header,
.cosmetics-picker > .cosmetics-picker-header {
  position: relative;
  display: grid;
  grid-template-columns: var(--popup-control-size) minmax(0,1fr) var(--popup-control-size);
  align-items: center;
  column-gap: var(--popup-control-gap);
  height: var(--popup-bar-height);
  min-height: var(--popup-bar-height);
  padding: 0 var(--popup-control-gap);
  margin: 0;
}
.profile-sheet-header > .sheet-title,
.item-details-header > .sheet-title,
.shop-header > .sheet-title,
.cosmetics-picker-header > h2 {
  grid-area: 1 / 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-header > .shop-back,
.cosmetics-picker-header > .cosmetics-picker-back {
  position: absolute;
  inset: var(--popup-control-gap) auto auto var(--popup-control-gap);
}
.shop-header > .shop-close,
.cosmetics-picker-header > .cosmetics-picker-close {
  position: absolute;
  inset: var(--popup-control-gap) var(--popup-control-gap) auto auto;
}
.shop-header > .icon-button,
.cosmetics-picker-header > button {
  display: grid;
  place-items: center;
  width: var(--popup-control-size);
  height: var(--popup-control-size);
  min-width: var(--popup-control-size);
  min-height: var(--popup-control-size);
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Image-only and result sheets have no additional title text. Their clear
   64px top strip still keeps close controls away from the artwork/content. */
#inspect-dialog {
  padding-top: var(--popup-bar-height);
}
#inspect-dialog > #inspect-body {
  max-height: calc(100dvh - 112px);
}
#inspect-body .inspect-art-stage > .game-card {
  width: min(100%,350px,calc((100dvh - 195px) / 1.5));
}
#inspect-body.has-battle-spec .inspect-art-stage > .game-card {
  width: min(100%,300px,calc((100dvh - 315px) / 1.5));
}
#result-dialog { padding-top: var(--popup-bar-height); }

/* Fullscreen viewers and mobile shop sheets include safe-area insets before
   the same 64px title bar. They do not put a close button in the left slot. */
.art-viewer > .art-viewer-close {
  left: auto;
  right: calc(env(safe-area-inset-right,0px) + var(--popup-control-gap));
  top: calc(env(safe-area-inset-top,0px) + var(--popup-control-gap));
  width: var(--popup-control-size);
  height: var(--popup-control-size);
}
@media(max-width:480px) {
  .shop-content > .shop-header {
    margin-top: env(safe-area-inset-top,0px);
  }
}