/* TriFront Web Stage1062: stable match geometry and centered UI. */

:root{
  --trf-stage1062-gutter:max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  --trf-stage1062-field-height:250px;
}

/*
 * Keep the battlefield's outer geometry constant. Extra cards scroll inside
 * the owner row instead of increasing #fitInner and shrinking the whole game.
 */
#main .zoneCol{
  height:var(--trf-stage1062-field-height) !important;
  min-height:var(--trf-stage1062-field-height) !important;
  max-height:var(--trf-stage1062-field-height) !important;
  grid-template-rows:minmax(0, 1fr) minmax(0, 1fr) !important;
  overflow:hidden !important;
  contain:layout;
}

#main .rowTop,
#main .rowBottom{
  min-height:0 !important;
  height:100% !important;
  max-height:none !important;
  align-content:start !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  overflow-anchor:none;
  touch-action:pan-y !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  isolation:isolate;
}

/* A later card is a later layer. This also keeps its complete frame visible. */
#main .rowTop .card,
#main .rowBottom .card,
#main #meHand .card,
#main #opHand .card{
  box-sizing:border-box !important;
  background-clip:padding-box;
  backface-visibility:hidden;
}

@media (max-height:720px), (max-width:390px){
  :root{
    --trf-stage1062-field-height:230px;
  }
}

/* One optical center line for the title/menu on every safe-area shape. */
#title.trf-title--menu{
  width:100% !important;
  padding-left:var(--trf-stage1062-gutter) !important;
  padding-right:var(--trf-stage1062-gutter) !important;
  align-items:center !important;
}

#title.trf-title--menu #trfTitleFlow{
  width:min(720px, calc(100vw - var(--trf-stage1062-gutter) - var(--trf-stage1062-gutter))) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

@media (min-width:769px){
  #title.trf-title--menu.trf-web-wide-menu #trfTitleFlow{
    width:min(1080px, calc(100vw - var(--trf-stage1062-gutter) - var(--trf-stage1062-gutter))) !important;
  }
}

#title.trf-title--menu .trf-title-step,
#title.trf-title--menu #battleHub,
#title.trf-title--menu #battlePaneLocal,
#title.trf-title--menu #battlePaneOnline{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
}

#title.trf-title--menu .row,
#title.trf-title--menu .trf-online-roomRow,
#title.trf-title--menu .trf-online-roomBtns{
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
}

/* Center popup shells using equal left/right safe-area padding. */
.modal,
#settingsModal,
#myPageModal,
#shopModal{
  padding-left:var(--trf-stage1062-gutter) !important;
  padding-right:var(--trf-stage1062-gutter) !important;
}

.modal > .modalBox,
#settingsModal > .settings-card,
#myPageModal > .mypage-card,
#shopModal > .shop-card{
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.modalBody > .row,
.modalBody > div[style*="display:flex"]{
  justify-content:center;
}

#handover .modalBody,
#result .modalBody,
#onlineWait .modalBody,
#onlineMatched .modalBody,
#trfOnlineReturnPopup .modalBody{
  text-align:center !important;
}

/* Popup headers keep the title on the screen center, not between title/close widths. */
.settings-head,
.mypage-head,
.shop-head{
  position:relative;
  justify-content:center !important;
  text-align:center;
}

.settings-head > .title,
.mypage-head > .title,
.shop-head > .title{
  flex:0 1 auto !important;
  width:100%;
  padding-left:46px;
  padding-right:46px;
  text-align:center;
}

.settings-head > button:last-child,
.mypage-head > button:last-child,
.shop-head > button:last-child{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
}

.settings-foot,
.mypage-foot,
.shop-foot,
.modalFooter{
  justify-content:center !important;
}

#publicRooms .modalBody > div:first-child{
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center;
  text-align:center;
}

#publicRooms .modalBody > div:first-child > div,
#publicRooms .modalBody > div:nth-child(2){
  justify-content:center !important;
}

#publicRoomsStatus,
#publicRoomsDebug{
  text-align:center;
}

/* The in-battle effect popup previously used unequal mobile side offsets. */
#effPop{
  left:var(--trf-stage1062-gutter) !important;
  right:var(--trf-stage1062-gutter) !important;
  margin-left:auto;
  margin-right:auto;
}

#effPopText .effMain{
  text-align:center;
}