/* Poker Responsive Sizing - Mobile Landscape Default */
:root {
  --poker-container-pt: 2.5rem;
  --poker-table-height: 58vh;
  --poker-table-max-width: 95vw;

  --poker-player-card-padding: 3px;
  --poker-avatar-size: 32px;

  --poker-card-width-small: 13px;
  --poker-card-height-small: 19px;
  --poker-card-width-large: 21px;
  --poker-card-height-large: 31px;

  --poker-chip-size: 16px;
  --poker-chip-stack-scale: 0.45;

  --poker-community-gap: 0.125rem;
  --poker-actions-mt: 0.25rem;
  --poker-actions-padding: 0.25rem 0.5rem;
  --poker-actions-font: 0.625rem;

  --poker-font-xs: 8px;
  --poker-font-sm: 9px;
  --poker-font-base: 10px;

  --poker-dealer-size: 4.5rem;
  --poker-pot-font: 0.625rem;
}

/* 390px+ height (iPhone 12-14 landscape) */
@media (min-height: 390px) and (orientation: landscape) {
  :root {
    --poker-container-pt: 3rem;
    --poker-table-height: 62vh;
    --poker-player-card-padding: 4px;
    --poker-avatar-size: 48px;
    --poker-card-width-small: 16px;
    --poker-card-height-small: 24px;
    --poker-card-width-large: 24px;
    --poker-card-height-large: 36px;
    --poker-chip-size: 18px;
    --poker-chip-stack-scale: 0.5;
    --poker-community-gap: 0.25rem;
    --poker-actions-mt: 0.375rem;
    --poker-actions-padding: 0.375rem 0.625rem;
    --poker-actions-font: 0.6875rem;
    --poker-font-xs: 9px;
    --poker-font-sm: 10px;
    --poker-font-base: 11px;
    --poker-dealer-size: 5rem;
    --poker-pot-font: 0.6875rem;
  }
}

/* 480px+ height (larger phones, small tablets) */
@media (min-height: 480px) and (orientation: landscape) {
  :root {
    --poker-container-pt: 4rem;
    --poker-table-height: 65vh;
    --poker-player-card-padding: 5px;
    --poker-avatar-size: 22px;
    --poker-card-width-small: 19px;
    --poker-card-height-small: 29px;
    --poker-card-width-large: 30px;
    --poker-card-height-large: 46px;
    --poker-chip-size: 20px;
    --poker-chip-stack-scale: 0.55;
    --poker-community-gap: 0.375rem;
    --poker-actions-mt: 0.5rem;
    --poker-actions-padding: 0.5rem 0.75rem;
    --poker-actions-font: 0.75rem;
    --poker-font-xs: 10px;
    --poker-font-sm: 11px;
    --poker-font-base: 12px;
    --poker-dealer-size: 2.5rem;
    --poker-pot-font: 0.75rem;
  }
}

/* 600px+ height (tablets) */
@media (min-height: 600px) {
  :root {
    --poker-container-pt: 5rem;
    --poker-table-height: 55vh;
    --poker-player-card-padding: 8px;
    --poker-avatar-size: 36px;
    --poker-card-width-small: 32px;
    --poker-card-height-small: 48px;
    --poker-card-width-large: 56px;
    --poker-card-height-large: 84px;
    --poker-chip-size: 22px;
    --poker-chip-stack-scale: 0.6;
    --poker-community-gap: 0.5rem;
    --poker-actions-mt: 0.75rem;
    --poker-actions-padding: 0.5rem 1rem;
    --poker-actions-font: 0.8125rem;
    --poker-font-xs: 10px;
    --poker-font-sm: 11px;
    --poker-font-base: 13px;
    --poker-dealer-size: 3rem;
    --poker-pot-font: 0.8125rem;
  }
}

/* 768px+ height (desktop) */
@media (min-height: 768px) {
  :root {
    --poker-container-pt: 8rem;
    --poker-table-height: 500px;
    --poker-table-max-width: 1200px;
    --poker-player-card-padding: 12px;
    --poker-avatar-size: 48px;
    --poker-card-width-small: 32px;
    --poker-card-height-small: 48px;
    --poker-card-width-large: 80px;
    --poker-card-height-large: 120px;
    --poker-chip-size: 25px;
    --poker-chip-stack-scale: 0.7;
    --poker-community-gap: 1rem;
    --poker-actions-mt: 1.25rem;
    --poker-actions-padding: 0.5rem 1rem;
    --poker-actions-font: 0.875rem;
    --poker-font-xs: 11px;
    --poker-font-sm: 12px;
    --poker-font-base: 14px;
    --poker-dealer-size: 8rem;
    --poker-pot-font: 0.875rem;
  }
}

/* Poker Container */
.poker-container {
  padding-top: var(--poker-container-pt);
}

/* Community Cards */
.poker-community-cards {
  gap: var(--poker-community-gap);
}

/* Dealer Image */
.poker-dealer-image {
  width: var(--poker-dealer-size);
}

/* Pot Value */
.poker-pot-value {
  font-size: var(--poker-pot-font);
}

/* Action Buttons */
.poker-actions {
  margin-top: var(--poker-actions-mt);
}

.poker-actions button,
.poker-actions input[type="submit"] {
  padding: var(--poker-actions-padding);
  font-size: var(--poker-actions-font);
}

.game-container {
  .animate-fade-in {
    animation: fadeIn 1s ease-in forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Force landscape orientation message */
  .orientation-message {
    display: none;
  }

  @media screen and (orientation: portrait) {
    .orientation-message {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #1a1a1a;
      color: white;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      text-align: center;
      padding: 20px;
      font-size: 1.2rem;
    }
  }

  .game-banner .banner {
    width: 200px;
    min-width: max-content;
    /* background: var(--base-bg-base); */
    background: maroon;
    color: var(--base-text-secondary);
    padding: 4px;
    box-shadow:
      0px 1px 2px -1px rgba(0, 0, 0, 0.1),
      0px 1px 3px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    border-radius: 4px;
    margin: 0 auto;
    &.game_message {
      /* margin: 4px auto 0 auto; */
      position: relative;
      margin-top: 16px;
      z-index: 1000;
      animation: fadeOut 0.5s ease-in forwards;
      animation-delay: 3.5s;
    }
  }
}

.poker-table {
  position: relative;
  background-image: url("https://lbpdev.us-mia-1.linodeobjects.com/poker/assets/table-blue.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  max-width: var(--poker-table-max-width);
  width: 100%;
  height: var(--poker-table-height);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible; /* Ensure children can extend beyond bounds */
}

.player,
.turn,
.poker-table {
  color: white;
}
.seat {
  position: absolute;
  z-index: 1;
}

/* Simplified seat positioning - 6 seat layout */
.seat-1 {
  bottom: -12%;
  left: 50%;
  transform: translateX(-50%);
}

.seat-2 {
  bottom: 0%;
  left: 3%;
}

.seat-3 {
  top: -12%;
  left: 20%;
}

.seat-4 {
  top: -12%;
  right: 20%;
}

.dealer {
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.seat-5 {
  bottom: 0%;
  right: 3%;
}

/* Seat dimensions are now controlled via CSS variables and player-card sizing */

.turn {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.player-actions-container {
  position: relative;
  z-index: 1000;
  pointer-events: auto;
}

/* Mobile landscape optimization - table center adjustments */
@media screen and (max-height: 480px) and (orientation: landscape) {
  .table-center {
    min-width: 120px;
    min-height: 80px;
    padding: 8px;
  }
}

@media screen and (max-height: 360px) and (orientation: landscape) {
  .table-center {
    min-width: 100px;
    min-height: 60px;
    padding: 6px;
  }
}

.felt-bg {
  background: radial-gradient(circle at center, #0f5132 0%, #064e3b 100%);
  min-height: 100vh;
  background-image:
    radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.felt-bg {
  background-image: url("https://lbpdev.us-mia-1.linodeobjects.com/poker/assets/background_green.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Seat position adjustments for mobile landscape */
@media (max-height: 480px) and (orientation: landscape) {
  .seat-1 {
    bottom: -8%;
  }
  .seat-3,
  .seat-4 {
    top: -8%;
  }
  .seat-2,
  .seat-5 {
    bottom: 2%;
  }
}