/* Full mobile game layout: the desktop feature set stays available. */

/* Chronicle rows must scroll, never shrink into empty coloured strips. */
.game-log-panel.np-visible-chronicle .game-event-list{
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

.game-log-panel.np-visible-chronicle .game-event{
  display:grid!important;
  flex:0 0 auto!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  grid-auto-rows:auto!important;
  min-height:48px!important;
  height:auto!important;
  overflow:visible!important;
}

.game-log-panel.np-visible-chronicle .game-event p{
  display:block!important;
  min-width:0!important;
  height:auto!important;
  overflow:visible!important;
  visibility:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* nth-child coordinates belong to the old board-ring layout. Once the cards
   live in the header they must all share one baseline. */
.game-page .game-player-header>.table-player-card,
.game-page .game-player-header>.table-player-card:nth-child(n){
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  margin-top:0!important;
  align-self:start!important;
  transform:none!important;
}

@media (max-width:1180px){
  .game-page{
    box-sizing:border-box!important;
    min-width:0!important;
    min-height:100dvh!important;
    padding-bottom:max(70px,calc(env(safe-area-inset-bottom) + 62px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .game-page .game-topbar{
    position:sticky!important;
    top:0!important;
    z-index:70!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-height:62px!important;
    height:auto!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:max(5px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) 5px max(7px,env(safe-area-inset-left))!important;
  }

  .game-page .game-menu-button{
    min-width:82px!important;
    min-height:44px!important;
    padding:7px 10px!important;
    font-size:.7rem!important;
  }

  .game-page .game-title{
    min-width:0!important;
  }

  .game-page .game-title img{
    width:min(25vw,132px)!important;
    max-height:50px!important;
    object-fit:contain!important;
  }

  .game-page .turn-indicator{
    min-width:112px!important;
    max-width:30vw!important;
    padding-left:8px!important;
  }

  .game-page .turn-indicator strong{
    max-width:100%!important;
    font-size:.66rem!important;
  }

  /* Every player remains available in a swipeable strip. */
  .game-page .game-player-header.table-player-ring,
  .game-page .np-stable-player-header{
    position:relative!important;
    inset:auto!important;
    z-index:28!important;
    display:flex!important;
    box-sizing:border-box!important;
    width:calc(100% - 12px)!important;
    height:90px!important;
    min-height:90px!important;
    margin:6px auto!important;
    padding:4px 3px 6px!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    pointer-events:auto!important;
  }

  .game-page .game-player-header>.table-player-card,
  .game-page .game-player-header>.table-player-card:nth-child(n){
    position:relative!important;
    flex:0 0 clamp(178px,42vw,224px)!important;
    width:clamp(178px,42vw,224px)!important;
    max-width:none!important;
    height:78px!important;
    min-height:78px!important;
    max-height:78px!important;
    scroll-snap-align:start!important;
  }

  /* A large square board comes first. The side column follows below instead
     of squeezing the board into an unusable thumbnail. */
  .game-page .game-layout{
    display:flex!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0 6px 10px!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:10px!important;
    overflow:visible!important;
  }

  .game-page .board-shell{
    display:flex!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-height:0!important;
    padding:4px!important;
    flex:0 0 auto!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }

  .game-page .game-board{
    flex:0 0 auto!important;
    width:min(760px,calc(100vw - 20px))!important;
    min-width:min(760px,calc(100vw - 20px))!important;
    max-width:760px!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1!important;
  }

  .game-page .board-sector{
    min-height:0!important;
  }

  .game-page .board-sector>strong{
    display:block!important;
    font-size:clamp(.5rem,1.35vw,.72rem)!important;
    line-height:1.05!important;
  }

  .game-page .board-sector>small{
    display:block!important;
    font-size:clamp(.44rem,1.05vw,.62rem)!important;
    line-height:1.05!important;
  }

  .game-page .game-sidebar{
    display:grid!important;
    box-sizing:border-box!important;
    width:min(760px,calc(100vw - 20px))!important;
    min-width:0!important;
    max-width:760px!important;
    min-height:360px!important;
    max-height:none!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto minmax(320px,65dvh) auto!important;
    gap:10px!important;
    overflow:visible!important;
  }

  .game-page .game-log-panel.np-visible-chronicle{
    box-sizing:border-box!important;
    width:100%!important;
    min-height:320px!important;
    height:min(65dvh,540px)!important;
    max-height:540px!important;
    overflow:hidden!important;
  }

  /* Restore the complete desktop action set as a swipeable bottom dock. */
  .game-page .game-action-dock{
    position:fixed!important;
    right:4px!important;
    bottom:max(4px,env(safe-area-inset-bottom))!important;
    left:4px!important;
    z-index:1000!important;
    display:flex!important;
    box-sizing:border-box!important;
    width:auto!important;
    max-width:none!important;
    height:58px!important;
    transform:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
  }

  .game-page .game-action-dock button{
    flex:0 0 92px!important;
    min-width:92px!important;
    min-height:54px!important;
  }

  .game-page .trade-launcher{
    display:none!important;
  }
}

@media (orientation:landscape) and (max-height:520px){
  .game-page .game-board{
    width:min(760px,calc(100vw - 20px))!important;
    min-width:min(760px,calc(100vw - 20px))!important;
  }

  .game-page .game-sidebar{
    grid-template-rows:auto minmax(300px,80dvh) auto!important;
  }
}

@media (orientation:portrait) and (max-width:760px){
  body:has(.game-page)::before{
    display:none!important;
    content:none!important;
  }

  .game-page .board-shell{
    justify-content:flex-start!important;
  }

  .game-page .game-board{
    width:700px!important;
    min-width:700px!important;
    max-width:700px!important;
  }

  .game-page .board-sector>strong,
  .game-page .board-sector>small{
    display:block!important;
  }
}