/* mobile-play.css — zero-scroll mobile trainer shell
 * Goal: one composition fills the viewport; thumb-zone actions; subtle texture.
 */

/* ---------- Shared tactile press for primary actions ---------- */
.decision-btn,
.feedback-action-btn,
.btn-review,
.hero-btn-row .decision-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.decision-btn.is-pressed:not(:disabled),
.feedback-action-btn.is-pressed:not(:disabled),
.btn-review.is-pressed:not(:disabled) {
  transform: translateY(2px) scale(0.97);
  filter: brightness(0.94);
  border-bottom-width: 1px !important;
  transition-duration: 60ms;
}

/* Subtle noise texture on felt + app chrome */
.table-felt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-image:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, 0.1), transparent 52%),
    radial-gradient(ellipse at 72% 82%, rgba(0, 0, 0, 0.28), transparent 58%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 160px 160px;
  mix-blend-mode: soft-light;
}

.table-felt > * {
  position: relative;
  z-index: 1;
}

/* Soft inset bevel on decision buttons (physical “chip” feel) */
.hero-btn-row .decision-btn {
  position: relative;
  overflow: hidden;
}

.hero-btn-row .decision-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(0, 0, 0, 0.12) 100%
  );
}

/* ---------- Mobile: lock play surface to one viewport ---------- */
@media (max-width: 720px) {
  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(211, 163, 57, 0.08), transparent 50%),
      var(--color-bg);
  }

  /* Compact chrome — reclaim vertical space for the table */
  .site-header {
    padding-block: 0;
    min-height: 0;
    overflow: visible;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--color-surface-offset-2) 92%, black),
      var(--color-surface)
    );
  }

  .header-inner {
    padding-inline: max(var(--space-2), env(safe-area-inset-left, 0px))
      max(var(--space-2), env(safe-area-inset-right, 0px));
    padding-block: 0;
    min-height: 2rem;
    gap: var(--space-1);
    overflow: visible;
  }

  .brand {
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .brand .logo-mark {
    width: 52px;
    height: 52px;
    /* Sit just inside the bar so the upper chip edge is not clipped */
    margin-top: 1px;
    margin-bottom: -21px;
  }

  .icon-btn-round {
    width: 32px;
    height: 32px;
    min-height: 32px;
  }

  /* Signed-in avatar chip matches compact logo size. */
  body.is-signed-in #nav-settings {
    width: 52px;
    height: 52px;
    min-height: 52px;
    margin-top: 1px;
    margin-bottom: -21px;
  }
  body.is-signed-in #nav-settings .nav-settings-avatar-chip {
    width: 52px;
    height: 52px;
  }

  .stats-bar {
    max-width: 7rem;
  }

  .stat-label {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  .stat-value {
    font-size: 0.8125rem;
  }

  /* Trainer fills remaining viewport — no page scroll */
  main#main-content {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  #view-trainer:not([hidden]) {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #view-trainer:not([hidden]) .poker-table {
    flex: 1;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #view-trainer:not([hidden]) .table-rect {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
  }

  #view-trainer:not([hidden]) .table-rail {
    --seat-col: 2.45rem;
    --rail-gap: 0px;
    flex: 1;
    min-height: 0;
    height: 100%;
    /* Edge-to-edge felt; seats sit in the remaining band */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    gap: var(--rail-gap);
    background-color: color-mix(in oklab, var(--color-mahogany) 90%, black);
    background-image:
      linear-gradient(
        165deg,
        color-mix(in srgb, color-mix(in oklab, var(--color-mahogany) 90%, black) 48%, transparent),
        color-mix(in srgb, var(--color-mahogany-2) 32%, transparent)
      ),
      url('../assets/leather-rail.jpg');
    background-size: auto, cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #view-trainer:not([hidden]) .table-felt {
    min-height: 0;
    height: 100%;
    border-radius: 0.65rem;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      inset 0 14px 32px rgba(0, 0, 0, 0.32);
  }

  /* Dealer prompt: max-height comes from the street-badge flex band (table.css) */
  .dealer-prompt {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .dealer-prompt::-webkit-scrollbar {
    display: none;
  }

  /* ---------- Thumb-zone action dock ---------- */
  .hero-zone {
    --decision-btn-h: 2.25rem; /* compact action row */
    --decision-btn-min: 0;
    --decision-btn-gap: 0.375rem;
    gap: 0.25rem;
    padding-inline: max(0.5rem, env(safe-area-inset-left, 0px))
      max(0.5rem, env(safe-area-inset-right, 0px));
    padding-bottom: max(0.3rem, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 28%,
      rgba(0, 0, 0, 0.38) 100%
    );
    z-index: 5;
  }

  .hero-mid-row {
    column-gap: var(--space-1);
  }

  .hero-mid-row .bet-slider-wrap,
  .hero-mid-row .stage-plaque-wrap {
    max-width: none;
  }

  .hero-btn-row {
    gap: var(--decision-btn-gap);
    padding-block: 0.1rem 0.15rem;
  }

  .hero-btn-row .decision-btn {
    min-height: var(--decision-btn-h);
    height: var(--decision-btn-h);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border-radius: 0.625rem;
    border-bottom-width: 2px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 2px 0 rgba(0, 0, 0, 0.35),
      0 4px 8px rgba(0, 0, 0, 0.25);
  }

  .hero-btn-row .decision-btn:active:not(:disabled) {
    transform: translateY(2px) scale(0.98);
    border-bottom-width: 1px;
    box-shadow:
      inset 0 2px 6px rgba(0, 0, 0, 0.35),
      0 1px 2px rgba(0, 0, 0, 0.25);
  }

  .table-felt .btn-review-compact {
    --btn-review-size: 2.5rem;
  }

  .hero-btn-row .feedback-action-compact {
    min-height: var(--decision-btn-h);
    height: var(--decision-btn-h);
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
  }

  /* Hide key hints on touch phones — numbers clutter the dock */
  .hero-btn-row .decision-btn .key-hint {
    display: none;
  }

  /* About, tutorial, profile, and feedback dock footers; body scrolls */
  #view-about:not([hidden]),
  #view-tutorial:not([hidden]),
  #view-profile:not([hidden]),
  #view-avatar-edit:not([hidden]) {
    overflow: hidden;
    padding-bottom: 0;
  }

  #view-about:not([hidden]) .about-body,
  #view-tutorial:not([hidden]) .tutorial-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #view-feedback:not([hidden]) {
    overflow: hidden;
    padding-bottom: 0;
  }

  /* Give teaching copy the viewport; keep chrome tight on phones. */
  #view-feedback:not([hidden]) .feedback-topbar {
    padding-block: var(--space-2);
  }
  #view-profile:not([hidden]) .profile-topbar,
  #view-avatar-edit:not([hidden]) .profile-topbar {
    padding-block: var(--space-2);
  }
  #view-feedback:not([hidden]) .feedback-scroll {
    padding-block: var(--space-2);
  }
  #view-feedback:not([hidden]) .feedback-footer,
  #view-about:not([hidden]) .profile-footer,
  #view-tutorial:not([hidden]) .profile-footer,
  #view-profile:not([hidden]) .profile-footer,
  #view-avatar-edit:not([hidden]) .profile-footer {
    padding-top: var(--space-1);
    padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  }
  #view-feedback:not([hidden]) .feedback-action-icon {
    width: 14px;
    height: 14px;
  }

  body:has(#view-about:not([hidden])),
  body:has(#view-tutorial:not([hidden])),
  body:has(#view-profile:not([hidden])),
  body:has(#view-avatar-edit:not([hidden])),
  body:has(#view-feedback:not([hidden])) {
    overflow: hidden;
  }
}

/* Short phones (iPhone SE / landscape-ish heights) — compress further */
@media (max-width: 720px) and (max-height: 700px) {
  .hero-zone {
    --decision-btn-h: 2rem;
    --hero-card-w: 46px;
    padding-top: calc(var(--felt-bottom-band) * 0.92);
  }

  .dealer-prompt {
    --dealer-prompt-font: 0.5625rem;
  }

  .header-inner {
    min-height: 1.875rem;
  }
}

/* Very narrow (iPhone SE width) */
@media (max-width: 390px) {
  .hero-zone {
    --decision-btn-h: 2.125rem;
    padding-inline: 0.35rem;
  }

  .hero-btn-row .decision-btn {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    padding-inline: 0.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .decision-btn.is-pressed,
  .feedback-action-btn.is-pressed,
  .btn-review.is-pressed {
    transform: none;
  }
}