/* Mobile/PWA presentation layer. Game logic and desktop layout remain unchanged. */
:root {
  color-scheme: light;
}

html {
  min-width: 0;
  overscroll-behavior-x: none;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(220, 242, 116, .22);
}

button,
summary,
select,
input[type='checkbox'],
input[type='range'] {
  touch-action: manipulation;
}

@media (max-width: 680px) {
  .app-shell {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-inline: max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-left));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .topbar-actions > .ghost-button,
  .topbar-actions > .education-button,
  .topbar-actions > .exit-match-button,
  .speed-control,
  .settings-menu summary {
    min-height: 36px;
  }

  .speed-control,
  .settings-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .score-strip {
    min-height: 64px;
  }

  .table-layout {
    padding-inline: max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-left));
  }

  .seat-bottom .seat-hand {
    padding-inline: 4px;
    scroll-snap-type: x proximity;
  }

  .seat-bottom .seat-hand .hand-tile {
    scroll-snap-align: center;
  }

  /* Keep the player's seven tiles easy to hit without forcing the page wider. */
  .hand-tile {
    width: clamp(48px, 13.2vw, 56px);
    height: clamp(31px, 8.8vw, 36px);
    flex-basis: clamp(48px, 13.2vw, 56px);
  }

  .hand-tile.double-tile {
    width: clamp(31px, 8.8vw, 36px);
    height: clamp(48px, 13.2vw, 56px);
    flex-basis: clamp(31px, 8.8vw, 36px);
  }

  .move-backdrop,
  .result-backdrop,
  .match-backdrop,
  .dramatic-endgame-backdrop,
  .rules-backdrop,
  .training-backdrop,
  .master-backdrop,
  .account-backdrop,
  .cloud-data-backdrop,
  .guest-save-backdrop,
  .idle-timeout-backdrop,
  .audio-start-backdrop,
  .review-backdrop {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
  }

  .move-dialog,
  .result-dialog,
  .match-dialog,
  .dramatic-endgame-dialog,
  .account-dialog,
  .cloud-data-dialog,
  .guest-save-dialog,
  .idle-timeout-dialog,
  .audio-start-dialog,
  .review-dialog,
  .master-dialog,
  .rules-dialog,
  .training-dialog {
    max-height: calc(100dvh - 16px);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .dialog-close {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }

  .primary-button,
  .secondary-button,
  .move-choice,
  .training-option,
  .training-side-choice-button,
  .training-solution-button,
  .training-create-button,
  .account-form button:not(.link-button),
  .account-actions button,
  .cloud-data-tabs button,
  .cloud-card-actions button,
  .google-auth-button {
    min-height: 44px;
  }

  .main-menu-dialog {
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .main-menu-button {
    min-height: 44px;
  }

  .settings-popover {
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }

  .education-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  .education-header > div:first-child {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .education-header > .dialog-close {
    grid-column: 2;
    grid-row: 1;
    position: static;
  }

  .education-header > .education-back-button {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    order: 0;
  }

  .training-header .education-header-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .training-header .education-header-actions > * {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .training-header .education-header-actions .education-back-button {
    order: 0;
  }

  .education-header-actions .dialog-close {
    position: static;
  }

  .education-header-actions .primary-button,
  .education-header-actions .secondary-button,
  .education-header-actions .education-back-button {
    white-space: normal;
  }

  .account-dialog .link-button,
  .cloud-data-dialog .link-button {
    color: #855e16;
  }

  .account-google-setup-note {
    color: #5f6f64 !important;
  }

  /* Keyboard hints are not actionable on touch screens. */
  .training-shortcuts {
    display: none;
  }

  .review-controls .secondary-button,
  .review-round-controls .secondary-button,
  .review-analysis-actions button {
    min-height: 40px;
  }
}

@media (max-width: 360px) {
  .topbar-actions > .ghost-button,
  .topbar-actions > .education-button,
  .topbar-actions > .exit-match-button,
  .speed-control,
  .settings-menu summary {
    min-height: 34px;
  }

  .topbar-actions > .ghost-button,
  .topbar-actions > .education-button,
  .topbar-actions > .exit-match-button {
    padding-inline: 6px;
  }
}