/* Ink wash landscape + table (v20260814j) — phone vertical stadium */
.xp-screen,
.xp-screen.is-portrait {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 88%),
    url('/table-bg-inkwash.jpg') center / cover no-repeat !important;
  background-color: #0a0a0c !important;
}

.bt-screen {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%),
    url('/big-two-table-bg.png') center / cover no-repeat !important;
  background-color: #0a1428 !important;
}

.xp-top {
  padding: 5px 12px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.xp-stage::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 44%, transparent 32%, rgba(0, 0, 0, 0.28) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.xp-stage > * {
  position: relative !important;
  z-index: 1 !important;
}

.xp-table {
  width: min(940px, 100%) !important;
  aspect-ratio: 2.12 / 1 !important;
  max-height: min(66vh, 600px) !important;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.65)) !important;
}

.xp-table__rail {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 236, 190, 0.14), transparent 48%),
    radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.5), transparent 50%),
    linear-gradient(168deg, #6a3a28 0%, #4a2418 32%, #301610 62%, #1a0c08 100%) !important;
  border: 1px solid rgba(212, 176, 96, 0.78) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.68),
    inset 0 2px 5px rgba(255, 226, 157, 0.16),
    inset 0 -5px 14px rgba(0, 0, 0, 0.5) !important;
}

.xp-table__felt {
  inset: 7.8% !important;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.08) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, #2e6e4e 0%, #1d4a34 32%, #143626 62%, #0c2218 100%) !important;
  border: 1.5px solid rgba(212, 176, 96, 0.82) !important;
  box-shadow:
    inset 0 0 64px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

.xp-pot__amt {
  padding: 4px 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: none !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.xp-seat-empty {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: radial-gradient(circle at 40% 35%, #3a3e42, #181a1c) !important;
  color: transparent !important;
  font-size: 0 !important;
}

.xp-seat-empty::after {
  content: '' !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

.xp-msg--pill {
  padding: 6px 18px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

@media (max-width: 900px) and (orientation: portrait) {
  .xp-screen.is-portrait {
    background:
      radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.38) 88%),
      url('/table-bg-inkwash.jpg') center / cover no-repeat !important;
    background-color: #0a0a0c !important;
  }

  .xp-screen.is-portrait .xp-stage {
    padding: 4px 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .xp-screen.is-portrait .xp-table {
    width: min(calc(100vw - 12px), calc((100dvh - 56px) * 0.62)) !important;
    max-width: calc(100vw - 12px) !important;
    aspect-ratio: 5 / 8 !important;
    flex: 0 1 auto !important;
    max-height: calc(100dvh - 56px) !important;
    height: auto !important;
  }

  .xp-screen.is-portrait.has-actions .xp-table {
    width: min(calc(100vw - 12px), calc((100dvh - 150px) * 0.62)) !important;
    max-height: calc(100dvh - 150px) !important;
  }

  .xp-screen.is-portrait .xp-table__rail {
    inset: 3% 7% !important;
    border-radius: 50% !important;
  }

  .xp-screen.is-portrait .xp-table__felt {
    inset: 8% 15% !important;
    border-radius: 50% !important;
  }
}