/* The board must shrink to its viewport, never to the min-content width of 14 tiles. */
.game-view {
  width: 100%;
  height: 100vh;
  height: var(--game-height, 100dvh);
  margin: 0;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  position: fixed;
  inset: 0;
}
.game-root {
  height: 100%;
  overflow: hidden;
}
.game-view #app {
  /* Pin the game to the part Safari actually exposes, including a zoom/pan offset. */
  position: absolute;
  left: var(--game-left, 0px);
  top: var(--game-top, 0px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: var(--game-width, 100%);
  height: var(--game-height, 100dvh);
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.game-view .game-header {
  height: auto;
  min-height: 54px;
  min-width: 0;
  padding: calc(8px + env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px)) 8px
    max(16px, env(safe-area-inset-left, 0px));
}
.game-view .game-shell {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 220px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(100px, 1fr) auto;
}
.game-view .table-scene {
  margin-left: env(safe-area-inset-left, 0px);
  margin-right: env(safe-area-inset-right, 0px);
}
.game-view .hand-dock {
  width: 100%;
  min-width: 0;
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}
.game-view .hand,
.dock-heading,
.dock-bottom,
.self-player,
.dock-status,
.action-bar {
  min-width: 0;
  max-width: 100%;
}
.game-view .hand {
  width: min(100%, 1240px);
  scrollbar-width: thin;
  touch-action: pan-x;
}
.self-player > strong {
  min-width: 0;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-status {
  flex-shrink: 0;
}
.scene-panel {
  min-width: 0;
  min-height: 0;
  max-width: calc(100% - 24px);
}
.scene-panel-body {
  overflow-wrap: anywhere;
}
.scene-panel-body input,
.scene-panel-body select,
.scene-panel-body textarea {
  font-size: 16px;
}
.compose-panel {
  bottom: calc(var(--hand-dock-height, 210px) + 8px);
}
.scene-turn {
  max-width: calc(100% - 24px);
}
.scene-turn strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.play-owner {
  max-width: 100%;
}
.table-judgement {
  min-width: 0;
  min-height: 0;
}
.seat-view-button {
  margin-left: 4px;
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.2;
}
.seat-state {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.seat-status-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-state > .compact-count,
.seat-state > .seat-view-button {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 1000px), (max-height: 560px) {
  /* While typing an explanation, give the keyboard's remaining viewport to the editor. */
  .game-view.text-input-active .compose-panel {
    bottom: 8px;
  }
  .game-view.text-input-active .hand-dock {
    visibility: hidden;
  }
}

.viewport-narrow .game-view .game-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: calc(6px + env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px)) 5px
    max(10px, env(safe-area-inset-left, 0px));
  min-height: 62px;
}
.viewport-narrow .game-header .game-room {
  margin: 0;
  font-size: 11px;
}
.viewport-narrow .game-header .game-brand {
  font-size: 18px;
}
.viewport-narrow .game-header .game-room strong {
  font-size: 14px;
}
.viewport-narrow .game-header nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  min-width: 0;
}
.viewport-narrow .game-view .game-header nav .game-tool {
  padding: 6px 1px;
  font-size: 10px;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
}
.viewport-narrow .game-view .hand-dock {
  padding-top: 8px;
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
}
.viewport-narrow .game-view .dock-heading {
  gap: 6px;
}
.viewport-narrow .self-player {
  flex: 1;
}
.viewport-narrow .self-player > strong {
  max-width: 100%;
  font-size: 11px;
}
.viewport-narrow .self-player > strong > span {
  font-size: 10px;
  margin-left: 5px;
}
.viewport-narrow .game-view .dock-status {
  gap: 4px;
}
.viewport-narrow .game-view .dock-status button {
  font-size: 10px;
  padding: 6px 7px;
}
.viewport-narrow /* Two rows keep every physical tile visible in portrait. No page or hand sideways scroll. */
  .game-view .hand {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  justify-content: initial;
  gap: 7px 5px;
  padding: 12px 2px 3px;
  margin: 2px auto 7px;
  max-width: 480px;
  overflow: visible;
  touch-action: manipulation;
}
.viewport-narrow .game-view .hand .tile {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: clamp(45px, 12vw, 61px);
  font-size: clamp(25px, 7.5vw, 35px);
  flex: initial;
}
.viewport-narrow .game-view .hand .tile.selected {
  transform: translateY(-6px);
}
.viewport-narrow .dock-bottom {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
}
.viewport-narrow .hand-hint {
  min-height: 26px;
  font-size: 10px;
  line-height: 1.3;
  max-width: none;
}
.viewport-narrow .action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 0.8fr;
  gap: 6px;
  width: 100%;
}
.viewport-narrow .game-view .action-bar button,
.viewport-narrow .game-view .action-bar button.primary,
.viewport-narrow .game-view .action-bar button.hu-button {
  min-width: 0;
  width: 100%;
  padding: 10px 4px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
}
.viewport-narrow .game-view .action-bar button:disabled {
  padding: 9px 3px;
}
.viewport-narrow .scene-turn {
  top: auto;
  bottom: 10px;
  gap: 8px;
  max-width: 84%;
}
.viewport-narrow .center-play {
  top: 52%;
  max-width: 44%;
}
.viewport-narrow .table-round {
  top: 7px;
  font-size: 10px;
}
.viewport-narrow .pos-north {
  top: 27px;
}
.viewport-narrow .pos-north .opponent-cards,
.viewport-narrow .pos-north .seat-score {
  display: none;
}
.viewport-narrow .pos-north .compact-count {
  display: inline;
  font-size: 9px;
}
.viewport-narrow .pos-north .seat-state {
  white-space: nowrap;
}
.viewport-narrow .table-footnote {
  display: none;
}
.viewport-narrow .pos-west-high,
.viewport-narrow .pos-east-high {
  top: 15%;
}
.viewport-narrow .pos-west-low,
.viewport-narrow .pos-east-low {
  top: 66%;
}
.viewport-narrow .pos-west,
.viewport-narrow .pos-east {
  top: 48%;
}
.viewport-narrow .your-turn-mark {
  display: none;
}
.viewport-narrow .table-judgement {
  top: 93px;
  bottom: 36px;
  width: calc(100% - 24px);
}
.viewport-narrow .scene-panel {
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
}
.viewport-narrow .compose-panel {
  bottom: calc(var(--hand-dock-height, 250px) + 6px);
}
.viewport-narrow .pause-notice {
  bottom: 34px;
}
.viewport-narrow .self-bubble {
  bottom: 30px;
}

.viewport-compact .game-view .game-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 9px;
  min-height: 36px;
  padding: calc(4px + env(safe-area-inset-top, 0px))
    max(10px, env(safe-area-inset-right, 0px)) 4px
    max(10px, env(safe-area-inset-left, 0px));
}
.viewport-compact .game-header .game-brand {
  font-size: 15px;
}
.viewport-compact .game-header .game-brand span,
.viewport-compact .connection-state {
  display: none;
}
.viewport-compact .game-header .game-room {
  font-size: 10px;
  gap: 4px;
  margin: 0;
}
.viewport-compact .game-header .game-room strong {
  font-size: 12px;
}
.viewport-compact .game-header nav {
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  width: 100%;
  max-width: 540px;
  justify-self: end;
}
.viewport-compact .game-view .game-header nav .game-tool {
  font-size: 10px;
  padding: 6px 1px;
  white-space: nowrap;
  min-width: 0;
}
.viewport-compact .game-view .hand-dock {
  padding-top: 4px;
  padding-bottom: max(5px, env(safe-area-inset-bottom, 0px));
}
.viewport-compact .game-view .dock-heading {
  gap: 8px;
}
.viewport-compact .game-view .self-player > strong {
  font-size: 11px;
}
.viewport-compact .game-view .self-player .game-avatar {
  width: 24px;
  height: 24px;
  font-size: 16px;
}
.viewport-compact .game-view .dock-status button {
  padding: 4px 8px;
  font-size: 10px;
}
.viewport-compact .game-view .hand {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  width: min(100%, 820px);
  max-width: 820px;
  margin: 0 auto 3px;
  gap: 4px;
  padding: 10px 2px 2px;
  overflow: visible;
}
.viewport-compact .game-view .hand .tile {
  width: 100%;
  min-width: 0;
  height: 46px;
  flex: initial;
  font-size: clamp(25px, 3.6vw, 30px);
}
.viewport-compact .game-view .hand .tile.selected {
  transform: translateY(-7px);
}
.viewport-compact .dock-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.viewport-compact .hand-hint {
  min-width: 0;
  min-height: 0;
  line-height: 1.25;
  font-size: 10px;
  max-width: 55ch;
}
.viewport-compact .action-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 0.8fr;
  gap: 5px;
  width: 310px;
}
.viewport-compact .game-view .action-bar button,
.viewport-compact .game-view .action-bar button.primary,
.viewport-compact .game-view .action-bar button.hu-button {
  padding: 7px 5px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.2;
  width: 100%;
}
.viewport-compact .game-view .action-bar button:disabled {
  padding: 6px 4px;
}
.viewport-compact .game-view .table-seat {
  width: 106px;
}
.viewport-compact .seat-person {
  flex-direction: row;
  text-align: left;
  gap: 7px;
}
.viewport-compact .pos-east .seat-person,
.viewport-compact .pos-east-high .seat-person,
.viewport-compact .pos-east-low .seat-person {
  flex-direction: row-reverse;
  text-align: right;
}
.viewport-compact .game-view .game-avatar {
  width: 33px;
  height: 33px;
  font-size: 20px;
}
.viewport-compact .seat-info {
  justify-items: initial;
}
.viewport-compact .seat-info strong {
  font-size: 12px;
  max-width: 65px;
}
.viewport-compact .seat-state {
  font-size: 10px;
}
.viewport-compact .seat-score {
  font-size: 9px;
}
.viewport-compact .opponent-cards {
  margin-top: 4px;
}
.viewport-compact .pos-north {
  top: 6px;
  width: 116px;
}
.viewport-compact .pos-north .opponent-cards,
.viewport-compact .pos-north .seat-score {
  display: none;
}
.viewport-compact .pos-north .compact-count {
  display: inline;
  font-size: 9px;
}
.viewport-compact .pos-north .seat-discard {
  top: 0;
  right: -35px;
}
.viewport-compact .table-round {
  top: 6px;
  left: max(12px, env(safe-area-inset-left, 0px));
  font-size: 10px;
}
.viewport-compact .scene-turn {
  top: auto;
  bottom: 5px;
  font-size: 11px;
}
.viewport-compact .scene-turn strong {
  font-size: 12px;
}
.viewport-compact .game-view .scene-turn .clock {
  font-size: 13px;
}
.viewport-compact .center-play {
  top: 53%;
}
.viewport-compact .latest-tile {
  width: 44px;
  height: 58px;
  font-size: 33px;
}
.viewport-compact .play-owner {
  margin-bottom: 4px;
  font-size: 10px;
}
.viewport-compact .play-owner strong {
  font-size: 12px;
}
.viewport-compact .play-state {
  margin-top: 5px;
  font-size: 9px;
}
.viewport-compact .your-turn-mark,
.viewport-compact .table-footnote {
  display: none;
}
.viewport-compact .table-judgement {
  top: 48px;
  bottom: 25px;
  width: calc(100% - 280px);
}
.viewport-compact .compose-panel {
  top: 6px;
  bottom: calc(var(--hand-dock-height, 135px) + 5px);
}

/* Safari with both tab and address bars visible can leave less than 300 CSS px. */

.viewport-short .table-round {
  left: 60%;
  top: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
}
.viewport-short .game-view .hand-dock {
  padding-top: 3px;
}
.viewport-short .game-view .hand .tile {
  height: 35px;
  font-size: 25px;
}
.viewport-short .game-view .hand {
  padding-top: 6px;
}
.viewport-short .game-view .hand-hint {
  font-size: 9px;
}
.viewport-short .game-view .table-seat {
  width: 96px;
}
.viewport-short .game-view .table-seat .game-avatar {
  width: 26px;
  height: 26px;
  font-size: 17px;
}
.viewport-short .seat-info strong {
  font-size: 11px;
}
.viewport-short .seat-info .seat-state {
  font-size: 9px;
}
.viewport-short .seat-score,
.viewport-short .opponent-cards,
.viewport-short .seat-no-play {
  display: none;
}
.viewport-short .table-seat .compact-count {
  display: inline;
  font-size: 9px;
}
.viewport-short .table-seat .seat-discard .public-tile {
  width: 24px;
  height: 31px;
  font-size: 19px;
}
.viewport-short .seat-discard small {
  display: none;
}
.viewport-short .pos-west-high,
.viewport-short .pos-east-high {
  top: 10%;
}
.viewport-short .pos-west-low,
.viewport-short .pos-east-low {
  top: auto;
  bottom: 19px;
}
.viewport-short .pos-north {
  left: 35%;
}
.viewport-short .seat-view-button {
  font-size: 9px;
  padding: 1px 3px;
}
.viewport-short .game-view .self-player .game-avatar {
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.viewport-short .game-view .action-bar button,
.viewport-short .game-view .action-bar button.primary,
.viewport-short .game-view .action-bar button.hu-button {
  padding-top: 6px;
  padding-bottom: 6px;
}
.viewport-short .game-view .action-bar button:disabled {
  padding-top: 5px;
  padding-bottom: 5px;
}
.viewport-short .game-view .dock-status button {
  padding-top: 3px;
  padding-bottom: 3px;
}
.viewport-short .game-view .center-play {
  left: 60%;
}
.viewport-short .center-play {
  top: 53%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px;
  grid-template-areas: "owner tile" "state tile";
  align-items: center;
  gap: 3px 9px;
  max-width: 36%;
  width: 195px;
}
.viewport-short .center-play .play-owner {
  grid-area: owner;
  text-align: right;
  margin: 0;
  white-space: normal;
  font-size: 9px;
}
.viewport-short .center-play .latest-tile {
  grid-area: tile;
  width: 35px;
  height: 46px;
  font-size: 28px;
}
.viewport-short .center-play .play-state {
  grid-area: state;
  text-align: right;
  margin: 0;
  white-space: normal;
  font-size: 8px;
}
.viewport-short .scene-turn strong {
  font-size: 10px;
}
.viewport-short .game-view .scene-turn .clock {
  font-size: 11px;
}
.viewport-short .table-judgement {
  top: 5px;
  bottom: 5px;
}

.viewport-small-portrait .pos-west-high,
.viewport-small-portrait .pos-east-high {
  top: 28%;
}
.viewport-small-portrait .game-view .hand .tile {
  height: 40px;
  font-size: 26px;
}
.viewport-small-portrait .game-view .hand {
  gap: 5px;
  padding-top: 10px;
}
.viewport-small-portrait .game-view .hand-hint {
  font-size: 9px;
  min-height: 23px;
}
.viewport-small-portrait .game-view .action-bar button {
  padding-top: 8px;
  padding-bottom: 8px;
}
.viewport-small-portrait .latest-tile {
  width: 44px;
  height: 59px;
  font-size: 33px;
}
.viewport-small-portrait .center-play {
  top: 55%;
}
.viewport-small-portrait .table-scene .game-avatar {
  width: 29px;
  height: 29px;
  font-size: 18px;
}
.viewport-small-portrait .table-seat .seat-score,
.viewport-small-portrait .table-seat .opponent-cards {
  display: none;
}
.viewport-small-portrait .table-seat .compact-count {
  display: inline;
  font-size: 9px;
}
.viewport-small-portrait .table-seat .seat-discard {
  top: 8px;
}