/* Poker Tables page styles — scoped to #poker-tables-main */
#poker-tables-main {
  width: 100%;
  overflow-x: hidden;
  background-color: var(--color-felt);
}

.poker-tables-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.poker-table-panel {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.panel-table-rail .panel-bg {
  background-image: url('/public/media/poker-table-rail.webp');
}

.panel-hands .panel-bg {
  background-image: url('/public/media/hands-on-poker-table.webp');
}

.panel-full-table .panel-bg {
  background-image: url('/public/media/full-poker-table-scene.webp');
}

.panel-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 61, 46, 0.8);
  z-index: 1;
}

.panel-content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--page-margin-mobile);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

.panel-content-left-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 100vh;
  padding-bottom: var(--space-2xl);
}

.panel-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
}

.panel-content-center .panel-lead,
.panel-content-center .panel-support,
.panel-content-center .panel-quote {
  max-width: 600px;
  margin-inline: auto;
}

.panel-kicker {
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-rust);
  margin-block-end: var(--space-xs);
}

.surface-felt .panel-kicker,
.panel-table-rail .panel-kicker,
.panel-hands .panel-kicker,
.panel-full-table .panel-kicker {
  color: var(--color-rust);
}

.surface-limestone .panel-kicker {
  color: var(--color-rust);
}

.panel-content h1,
.panel-content h2 {
  color: var(--color-cream);
  margin-block-end: var(--space-md);
}

.surface-limestone .panel-content h1,
.surface-limestone .panel-content h2 {
  color: var(--color-charcoal);
}

.panel-lead {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-cream);
  margin-block-end: var(--space-md);
  max-width: 480px;
}

.surface-limestone .panel-lead {
  color: var(--color-charcoal);
}

.panel-support {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-muted-on-felt);
  margin-block-end: var(--space-md);
  max-width: 480px;
}

.surface-limestone .panel-support {
  color: var(--color-muted);
}

.panel-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.panel-list li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-cream);
  padding-inline-start: var(--space-md);
  position: relative;
}

.panel-list-timber li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background-color: var(--color-timber);
}

.panel-list-rust li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background-color: var(--color-rust);
}

.panel-quote {
  border-inline-start: 2px solid var(--color-timber);
  padding-inline-start: var(--space-md);
  margin-block-end: 0;
  max-width: 600px;
  text-align: left;
}

.panel-quote p {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  font-style: italic;
  color: var(--color-cream);
}

.panel-comparison {
  border: 1px solid var(--color-timber);
  padding: var(--space-md);
  margin-block-start: var(--space-md);
  max-width: 480px;
}

.panel-comparison p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-cream);
  margin-block-end: 0;
}

.panel-narrative {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  font-style: italic;
  color: var(--color-charcoal);
  margin-block-start: var(--space-md);
  margin-block-end: 0;
}

.panel-cta {
  margin-block-start: var(--space-lg);
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--section-padding-mobile) var(--page-margin-mobile);
  align-items: center;
}

.panel-figure {
  margin-block-end: 0;
  width: 100%;
  min-width: 0;
}

.panel-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.panel-text {
  min-width: 0;
  width: 100%;
}

.panel-text-right-top,
.panel-text-right-bottom {
  text-align: left;
}

.panel-text-left-bottom,
.panel-text-left-top {
  text-align: left;
}

.scroll-cue {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-xl);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  opacity: 1;
  transition: opacity var(--transition-reveal);
  pointer-events: none;
}

.scroll-cue-line {
  width: 2px;
  height: 40px;
  background-color: var(--color-cream);
  animation: scroll-cue-pulse 2s ease-in-out infinite;
}

.scroll-cue-text {
  font-family: var(--font-body);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-cream);
  writing-mode: vertical-rl;
}

.scroll-cue.is-hidden {
  opacity: 0;
}

@keyframes scroll-cue-pulse {
  0%, 100% {
    transform: scaleY(1);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1.4);
    opacity: 1;
  }
}

/* Tablet and desktop horizontal scroll */
@media (min-width: 768px) {
  .poker-tables-scroll {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .poker-tables-scroll::-webkit-scrollbar {
    display: none;
  }

  .poker-table-panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
  }

  .panel-content {
    padding: var(--space-2xl) var(--page-margin-tablet);
  }

  .panel-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    padding: var(--section-padding-tablet) var(--page-margin-tablet);
  }

  .panel-grid-empty-seat {
    grid-template-columns: 1fr 1fr;
  }

  .panel-grid-cards {
    grid-template-columns: 45fr 55fr;
  }

  .panel-grid-chips {
    grid-template-columns: 40fr 60fr;
  }

  .panel-grid-player {
    grid-template-columns: 1fr 1fr;
  }

  .panel-grid-opponent {
    grid-template-columns: 45fr 55fr;
  }

  .panel-figure-empty-seat,
  .panel-figure-player {
    order: 1;
  }

  .panel-text-right-top,
  .panel-text-right-bottom {
    order: 2;
  }

  .panel-text-left-bottom,
  .panel-text-left-top {
    order: 1;
  }

  .panel-figure-cards,
  .panel-figure-chips,
  .panel-figure-opponent {
    order: 2;
  }

  .panel-content-left-bottom {
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: var(--space-3xl);
  }

  .panel-content-center {
    justify-content: center;
  }

  .panel-lead {
    max-width: 480px;
  }

  .panel-content-left-bottom .panel-lead,
  .panel-content-left-bottom .panel-support {
    max-width: 480px;
  }

  .panel-text-right-top {
    text-align: left;
    justify-self: end;
  }

  .panel-text-right-bottom {
    text-align: left;
    justify-self: end;
  }

  .panel-text-left-bottom,
  .panel-text-left-top {
    text-align: left;
    justify-self: start;
  }

  .scroll-cue {
    right: var(--space-xl);
    bottom: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .panel-content {
    padding: var(--space-3xl) var(--page-margin-desktop);
  }

  .panel-grid {
    gap: var(--space-2xl);
    padding: var(--section-padding-desktop) var(--page-margin-desktop);
  }

  .panel-content-left-bottom {
    padding-bottom: var(--space-4xl);
  }

  .panel-lead {
    font-size: var(--text-body-large);
  }

  .panel-content-center .panel-lead,
  .panel-content-center .panel-support {
    max-width: 600px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poker-tables-scroll {
    scroll-behavior: auto;
  }

  .scroll-cue-line {
    animation: none;
  }

  .poker-table-panel {
    scroll-snap-align: none;
  }
}