/* Device-specific table sizing. Keep phone defaults in styles.css. */

/* Full-size iPads use the portrait table instead of the compact 5:2 phone table. */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1024px) {
  :root {
    --tile-w: 48px;
    --tile-h: 64px;
    --open-tile-w: 36px;
    --open-half-tile-w: 18px;
    --open-tile-h: 48px;
    --sideways-tile-shift: 12px;
    --sideways-tile-offset: 6px;
    --human-hand-row-h: 132px;
    --portrait-human-area-h: 234px;
    --human-river-shift: 42px;
  }

  .river-top {
    top: calc(10dvh + 76px);
  }

  .river-bottom {
    top: auto;
    bottom: calc(var(--portrait-human-area-h) - 50px + max(4px, env(safe-area-inset-bottom)));
  }

  .center-console {
    top: calc(34dvh + 116px);
  }

  .corner-table-status {
    top: calc(25dvh + 82px);
    left: 50%;
    flex-direction: row;
    transform: translateX(calc(-50% + var(--portrait-status-right-shift) - var(--portrait-status-wide-correction)));
  }

  .human-id,
  .turn-message {
    top: 70px;
  }

  .result-card {
    width: min(820px, calc(100vw - 24px));
  }

  .result-eyebrow,
  .result-yaku {
    font-size: 19px;
  }

  .result-card h1 {
    font-size: 38px;
  }

  .result-score {
    font-size: 25px;
  }
}

/* Use the full 4:3 canvas on iPad landscape and enlarge the active table. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 600px) and (max-width: 1366px) {
  :root {
    --tile-w: 52px;
    --tile-h: calc(var(--tile-w) * 1.333);
    --open-tile-w: 36px;
    --open-half-tile-w: 18px;
    --open-tile-h: 48px;
    --sideways-tile-shift: 12px;
    --sideways-tile-offset: 6px;
    --human-hand-row-h: 94px;
    --human-river-shift: 22px;
  }

  .app-shell,
  .table {
    width: 100vw;
    height: var(--app-visible-height);
  }

  .table {
    aspect-ratio: auto;
  }

  .opponent-left,
  .opponent-right,
  .river-left,
  .river-right,
  .river-right.wanpai-kan-pair-1,
  .river-right.wanpai-kan-pair-2 {
    top: 44%;
  }

  .river-top {
    top: 70px;
  }

  .river-bottom {
    bottom: calc(112px + max(5px, env(safe-area-inset-bottom)));
  }

  .center-console {
    top: 40%;
  }

  .human-area {
    height: 126px;
  }

  .result-card {
    width: min(820px, calc(100vw - 150px));
    max-height: calc(var(--app-visible-height) - 40px);
    padding: 24px 30px;
  }

  .result-eyebrow,
  .result-yaku {
    font-size: 19px;
  }

  .result-card h1 {
    font-size: 38px;
  }

  .result-score {
    font-size: 25px;
  }

  .result-hand img {
    width: 34px;
    height: 46px;
  }
}

@media (orientation: portrait) and (max-width: 380px) {
  .table-wanpai {
    --wanpai-tile-w: calc(var(--open-tile-w) - 3px);
    --wanpai-tile-h: calc(var(--open-tile-h) - 4px);
  }

  .human-id {
    width: 64px;
  }

  .turn-message {
    left: calc(50% - var(--tile-w) * 3.5 + 67px);
    width: 54px;
    max-width: 54px;
    padding-inline: 3px;
    font-size: 9px;
  }

}

/* Older iOS and memory constrained devices avoid costly compositing layers. */
.is-lightweight-device *,
.is-lightweight-device *::before,
.is-lightweight-device *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

.is-lightweight-device .settings-sheet,
.is-lightweight-device .result-sheet,
.is-lightweight-device .character-profile-sheet,
.is-lightweight-device .half-start-sheet,
.is-lightweight-device .network-status-layer {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.is-lightweight-device .table-character-popup,
.is-lightweight-device .profile-dialog,
.is-lightweight-device .half-start-seat {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.34) !important;
}

.is-lightweight-device .point-chart {
  filter: none !important;
}