/**
 * Portal mobile / tablet adaptive layer (P-MOBILE-WEB-1).
 * Include after page-specific CSS on hub, games, cabinet.
 */
:root {
  /* Was 720px; +40% aligned with portal_hub shell */
  --app-max: 1008px;
  --board-ui-width: min(616px, calc(100vw - 24px));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --touch-min: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Phone */
@media (max-width: 599.98px) {
  :root {
    --app-max: 100%;
    --board-ui-width: min(100vw - 16px, 420px);
  }

  .wrap,
  main,
  #app,
  .pgr-wrap {
    width: 100%;
    max-width: min(calc(100% - 24px), var(--app-max)) !important;
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  button,
  .open-btn,
  .choice,
  .btn,
  .tabs button {
    min-height: var(--touch-min);
  }

  /* Landscape phone: keep board usable */
  @media (orientation: landscape) {
    :root {
      --board-ui-width: min(70vh, calc(100vw - 120px));
    }
  }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 1023.98px) {
  :root {
    /* Was 900px; +40% */
    --app-max: 1260px;
    --board-ui-width: min(616px, calc(100vw - 48px));
  }

  .wrap {
    width: 100%;
    max-width: min(calc(100% - 32px), var(--app-max));
  }

  /* Hub: two-column games on tablet */
  .games.tablet-grid,
  .games {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }
  .games .game-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    /* Was 960px; +40% */
    --app-max: 1344px;
    --board-ui-width: 616px;
  }

  .wrap {
    width: 100%;
    max-width: min(calc(100% - 32px), var(--app-max));
  }

  .games {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }
}

/* Admin tablet: list + detail if present */
@media (min-width: 768px) {
  .admin-split,
  #u-hub.admin-split {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 12px;
    align-items: start;
  }
}