* {
  box-sizing: border-box;
}

:root {
  --bg: #07100d;
  --panel: #101b17;
  --panel-2: #16241e;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f3f7f5;
  --muted: #91a39a;
  --accent: #d5a93f;
  --accent-hover: #e5bb54;
  --green: #126b45;
  --green-dark: #07452d;
  --danger: #a93636;
  --danger-hover: #c24343;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, #123328 0%, #07100d 45%, #030806 100%);
  color: var(--text);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body {
  min-height: 100vh;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

[hidden] {
  display: none !important;
}

.screen {
  min-height: 100vh;
}

/* ---------------------------------------------------------
   AUTH
--------------------------------------------------------- */

.auth-screen {
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px, 100%);
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(13, 25, 20, 0.94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.brand {
  text-align: center;
  margin-bottom: 28px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border: 1px solid rgba(213, 169, 63, 0.4);
  border-radius: 50%;
  background: rgba(213, 169, 63, 0.08);
  color: var(--accent);
  font-size: 42px;
}

.brand h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -1px;
}

.brand p {
  margin: 6px 0 0;
  color: var(--muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: #08120e;
}

.auth-tab {
  padding: 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
}

.auth-tab.active {
  background: var(--panel-2);
  color: var(--text);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-form label,
.modal label {
  display: grid;
  gap: 7px;
  color: #cbd5d0;
  font-size: 14px;
}

input,
select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #08120e;
  color: var(--text);
}

input:focus,
select:focus {
  border-color: rgba(213, 169, 63, 0.65);
  box-shadow: 0 0 0 3px rgba(213, 169, 63, 0.08);
}

.primary-btn,
.secondary-btn,
.action-btn {
  border: 0;
  border-radius: 10px;
  font-weight: 700;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease;
}

.primary-btn {
  padding: 13px 18px;
  background: var(--accent);
  color: #171205;
}

.primary-btn:hover {
  background: var(--accent-hover);
}

.secondary-btn {
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.primary-btn:active,
.secondary-btn:active,
.action-btn:active {
  transform: translateY(1px);
}

/* ---------------------------------------------------------
   TOP BAR
--------------------------------------------------------- */

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 13, 10, 0.92);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}

.brand-symbol {
  color: var(--accent);
  font-size: 30px;
}

.account-area {
  display: flex;
  align-items: center;
  gap: 18px;
}

.balance-box,
.user-box {
  display: grid;
  gap: 2px;
}

.balance-box span,
.user-box small {
  color: var(--muted);
  font-size: 12px;
}

.balance-box strong {
  color: var(--accent);
}

/* ---------------------------------------------------------
   GENERAL VIEW
--------------------------------------------------------- */

.view {
  width: min(1400px, 100%);
  margin: 0 auto;
  padding: 30px 24px;
}

.view-heading,
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

.view-heading h2,
.table-title h2 {
  margin: 0;
}

.view-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.empty-state {
  grid-column: 1 / -1;
  padding: 50px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}

/* ---------------------------------------------------------
   LOBBY TABLE CARDS
--------------------------------------------------------- */

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.table-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.table-card h3 {
  margin: 0 0 8px;
}

.table-card-meta {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
}

.table-card-meta strong {
  color: var(--text);
}

.table-card-actions {
  display: flex;
  gap: 10px;
}

.table-card-actions button {
  flex: 1;
}

/* ---------------------------------------------------------
   TABLE TOOLBAR
--------------------------------------------------------- */

.table-title {
  text-align: center;
}

.table-title span {
  color: var(--muted);
  font-size: 13px;
}

.connection-status {
  color: var(--muted);
  font-size: 13px;
}

.connection-status.connected {
  color: #6ed59b;
}

/* ---------------------------------------------------------
   POKER ROOM
--------------------------------------------------------- */

.poker-room {
  display: grid;
  gap: 20px;
}

.poker-table {
  position: relative;
  width: min(100%, 1050px);
  aspect-ratio: 16 / 9;
  margin: 50px auto 40px;
  border: 16px solid #24170f;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at center,
      #178052 0%,
      #0e6842 48%,
      #08462e 100%
    );
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    inset 0 0 70px rgba(0, 0, 0, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.45);
}

.poker-table::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 2px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.pot-display {
  position: absolute;
  top: 27%;
  left: 50%;
  display: grid;
  transform: translateX(-50%);
  text-align: center;
}

.pot-display span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pot-display strong {
  color: #ffe49a;
  font-size: 22px;
}

/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.community-cards {
  position: absolute;
  top: 43%;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.playing-card {
  width: clamp(44px, 6vw, 70px);
  aspect-ratio: 0.7;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  background: #f8f8f3;
  color: #111;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 800;
}

.playing-card.red {
  color: #c52626;
}

.playing-card.placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      #172d24,
      #172d24 5px,
      #203d31 5px,
      #203d31 10px
    );
  border-color: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------
   SEATS
--------------------------------------------------------- */

.seat {
  position: absolute;
  width: 150px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(8, 18, 14, 0.96);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
  text-align: center;
  transform: translate(-50%, -50%);
}

.seat.empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  color: var(--muted);
  background: rgba(8, 18, 14, 0.72);
}

.seat.active-turn {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(213, 169, 63, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.32);
}

.seat.folded {
  opacity: 0.55;
}

.seat-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seat-stack {
  margin-top: 4px;
  color: var(--accent);
  font-size: 13px;
}

.seat-bet {
  margin-top: 3px;
  color: #d2ded8;
  font-size: 12px;
}

.seat-1 {
  left: 50%;
  top: 100%;
}

.seat-2 {
  left: 13%;
  top: 78%;
}

.seat-3 {
  left: 13%;
  top: 22%;
}

.seat-4 {
  left: 50%;
  top: 0;
}

.seat-5 {
  left: 87%;
  top: 22%;
}

.seat-6 {
  left: 87%;
  top: 78%;
}

/* ---------------------------------------------------------
   TIMER
--------------------------------------------------------- */

.action-timer {
  position: absolute;
  top: 62%;
  left: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: rgba(5, 15, 11, 0.9);
  box-shadow: 0 0 25px rgba(213, 169, 63, 0.25);
}

.action-timer span {
  color: #ffe49a;
  font-size: 19px;
  font-weight: 800;
}

/* ---------------------------------------------------------
   MY HAND
--------------------------------------------------------- */

.my-hand-panel {
  width: min(800px, 100%);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.panel-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.my-cards {
  display: flex;
  gap: 8px;
}

.my-cards .playing-card {
  width: 54px;
}

.hand-info {
  display: grid;
  gap: 5px;
  text-align: right;
}

.hand-info span {
  color: var(--muted);
  font-size: 13px;
}

/* ---------------------------------------------------------
   ACTION BUTTONS
--------------------------------------------------------- */

.action-controls {
  width: min(900px, 100%);
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.action-btn {
  min-width: 110px;
  padding: 13px 20px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
}

.action-btn:hover:not(:disabled) {
  background: #20332a;
}

.action-btn.danger {
  background: var(--danger);
  border-color: transparent;
}

.action-btn.danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

.action-btn.accent {
  background: var(--accent);
  border-color: transparent;
  color: #171205;
}

.bet-control {
  display: flex;
  gap: 8px;
}

.bet-control input {
  width: 120px;
}

/* ---------------------------------------------------------
   MODAL
--------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

.modal {
  width: min(420px, 100%);
  padding: 26px;
  display: grid;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal h3,
.modal p {
  margin: 0;
}

.modal p {
  color: var(--muted);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---------------------------------------------------------
   TOAST
--------------------------------------------------------- */

.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 2000;
  max-width: min(500px, calc(100% - 30px));
  padding: 12px 18px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #16241e;
  box-shadow: var(--shadow);
}

.toast.error {
  background: #4b1d1d;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
    padding: 12px 14px;
  }

  .topbar-brand strong {
    display: none;
  }

  .account-area {
    gap: 10px;
  }

  .user-box {
    display: none;
  }

  .view {
    padding: 20px 12px;
  }

  .poker-table {
    width: 100%;
    margin-top: 70px;
    border-width: 9px;
  }

  .seat {
    width: 105px;
    min-height: 58px;
    padding: 7px;
    font-size: 12px;
  }

  .community-cards {
    gap: 4px;
  }

  .playing-card {
    width: clamp(34px, 10vw, 52px);
  }

  .action-timer {
    width: 44px;
    height: 44px;
  }

  .my-hand-panel {
    padding: 12px;
  }

  .action-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .action-btn {
    min-width: 0;
    padding: 12px 8px;
  }

  .bet-control {
    grid-column: 1 / -1;
  }

  .bet-control input,
  .bet-control button {
    flex: 1;
    width: auto;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 25px 20px;
  }

  .balance-box span {
    display: none;
  }

  .table-toolbar {
    align-items: flex-start;
  }

  .connection-status {
    display: none;
  }

  .seat {
    width: 88px;
  }

  .seat-stack,
  .seat-bet {
    font-size: 10px;
  }

  .poker-table {
    margin-top: 60px;
    margin-bottom: 55px;
  }
}


/* =========================================================
   MOBILE PORTRAIT ORIENTATION GATE
   ========================================================= */

.rotate-device {
  display: none;
}

/*
  On phones held vertically, cover the complete application
  with an app-style orientation screen.

  Landscape automatically restores the normal interface.
*/
@media (max-width: 760px) and (orientation: portrait) {

  .rotate-device {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background:
      radial-gradient(
        circle at 50% 25%,
        #063b2d 0%,
        #03281f 30%,
        #011711 62%,
        #000b08 100%
      );

    color: #ffffff;

    overflow: hidden;

    /* Prevent the underlying poker UI from being touched. */
    touch-action: none;

    -webkit-user-select: none;
    user-select: none;
  }

  .rotate-device-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    padding:
      max(24px, env(safe-area-inset-top))
      24px
      max(24px, env(safe-area-inset-bottom));

    text-align: center;

    transform: translateY(-2vh);
  }

  .rotate-brand-mark {
    color: #22d3a6;

    font-size: 58px;
    line-height: 1;

    margin-bottom: 20px;

    text-shadow:
      0 0 28px rgba(34, 211, 166, 0.12);
  }

  .rotate-brand-name {
    font-size: 23px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 42px;
  }

  .rotate-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    font-size: 20px;
    font-weight: 700;
  }

  .rotate-phone {
    display: inline-block;

    font-size: 25px;
    line-height: 1;

    transform: rotate(0deg);

    animation:
      snoop-phone-rotate 2.4s
      ease-in-out infinite;
  }

  .rotate-arrow {
    display: inline-block;

    font-size: 24px;
    line-height: 1;

    animation:
      snoop-arrow-rotate 2.4s
      ease-in-out infinite;
  }
}


@keyframes snoop-phone-rotate {

  0%,
  25% {
    transform: rotate(0deg);
  }

  65%,
  100% {
    transform: rotate(90deg);
  }
}


@keyframes snoop-arrow-rotate {

  0%,
  25% {
    transform: rotate(0deg);
  }

  65%,
  100% {
    transform: rotate(180deg);
  }
}


/*
  Respect users who disable motion animations.
*/
@media (prefers-reduced-motion: reduce) {

  .rotate-phone,
  .rotate-arrow {
    animation: none;
  }
}


/* SnoopPoker: seats outside table max_players must never render */
.seat[hidden] {
  display: none !important;
}


/* =========================================================
   SHOWDOWN RESULT
   ========================================================= */

/*
  Finished-hand hole cards are rendered inside each occupied
  seat. These cards deliberately use their own compact sizing
  rather than the normal community-card dimensions.
*/

.seat-showdown {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 7px;
}

.seat-showdown-cards {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.showdown-card {
  width: 28px;
  aspect-ratio: 0.7;

  display: grid;
  place-items: center;

  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 5px;

  background: #f8f8f3;
  color: #111;

  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.28);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.showdown-card.red {
  color: #c52626;
}

.seat-showdown-hand {
  display: block;

  max-width: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: #d2ded8;

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.seat-showdown-winner {
  display: block;

  color: #ffe49a;

  font-size: 10px;
  font-weight: 900;

  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/*
  Highlight winning seats without changing their geometry.
*/
.seat.showdown-winner {
  border-color: #d5a93f;

  box-shadow:
    0 0 0 3px rgba(213, 169, 63, 0.20),
    0 0 24px rgba(213, 169, 63, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.32);
}


/* ---------------------------------------------------------
   SHOWDOWN RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 760px) {

  .seat-showdown {
    gap: 3px;
    margin-top: 5px;
  }

  .seat-showdown-cards {
    gap: 3px;
  }

  .showdown-card {
    width: 22px;
    border-radius: 4px;
    font-size: 10px;
  }

  .seat-showdown-hand {
    font-size: 8px;
  }

  .seat-showdown-winner {
    font-size: 9px;
  }
}


@media (max-width: 480px) {

  .showdown-card {
    width: 19px;
    font-size: 9px;
  }

  .seat-showdown-hand {
    font-size: 7px;
    letter-spacing: 0;
  }

  .seat-showdown-winner {
    font-size: 8px;
    letter-spacing: 0;
  }
}


/* =========================================================
   SNOOP LANDING V2
========================================================= */

.landing-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;

  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  color: #fff;

  background:
    #020b08
    url("/assets/landing/snoop-landing.png")
    center center / cover no-repeat;
}

.landing-overlay {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(1, 10, 8, .97) 0%,
      rgba(1, 10, 8, .90) 22%,
      rgba(1, 10, 8, .58) 43%,
      rgba(1, 10, 8, .16) 70%,
      rgba(1, 10, 8, .10) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0, 7, 5, .88) 0%,
      transparent 40%,
      rgba(0, 6, 5, .38) 100%
    );
}

.landing-header {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: space-between;

  height: 82px;

  padding:
    0
    clamp(22px, 5vw, 76px);

  border-bottom:
    1px solid rgba(255,255,255,.09);

  background:
    linear-gradient(
      180deg,
      rgba(1,8,6,.80),
      rgba(1,8,6,.14)
    );
}

.landing-logo {
  display: flex;
  align-items: center;
  gap: 12px;

  border: 0;
  padding: 0;

  color: #fff;
  background: transparent;

  font: inherit;
  font-size: 19px;
  font-weight: 900;

  letter-spacing: 3px;

  cursor: pointer;
}

.landing-spade {
  display: grid;
  place-items: center;

  width: 39px;
  height: 39px;

  border:
    1px solid rgba(61,238,180,.46);

  border-radius: 50%;

  color: #41eab2;

  background:
    rgba(4,31,23,.70);

  box-shadow:
    0 0 28px rgba(38,226,164,.16);
}

.landing-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-header-actions button {
  min-height: 42px;

  border-radius: 9px;

  padding: 0 17px;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  letter-spacing: 1px;

  cursor: pointer;
}

.landing-text-button {
  border:
    1px solid rgba(255,255,255,.18);

  color: #fff;

  background:
    rgba(2,17,13,.48);
}

.landing-create-button {
  border:
    1px solid #42e9b1;

  color: #06130e;

  background: #42e9b1;
}

.landing-hero {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  min-height:
    calc(100vh - 152px);

  min-height:
    calc(100dvh - 152px);

  padding:
    20px
    clamp(24px, 7vw, 108px)
    82px;
}

.landing-content {
  width: min(600px, 48vw);

  text-shadow:
    0 3px 30px rgba(0,0,0,.78);
}

.landing-eyebrow {
  margin-bottom: 18px;

  color: #45eab1;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 5px;
}

.landing-title {
  margin: 0;

  font-size:
    clamp(68px, 8.1vw, 132px);

  font-weight: 1000;

  line-height: .79;

  letter-spacing: -5px;
}

.landing-title span {
  display: block;

  margin-top: 18px;

  color: #40e9af;

  text-shadow:
    0 0 40px rgba(32,224,158,.19);
}

.landing-content h2 {
  margin:
    34px
    0
    0;

  font-size:
    clamp(20px, 2vw, 30px);

  line-height: 1.16;

  letter-spacing: 2px;
}

.landing-description {
  max-width: 500px;

  margin:
    19px
    0
    0;

  color:
    rgba(229,241,236,.72);

  font-size: 14px;

  line-height: 1.7;
}

.landing-buttons {
  display: flex;
  gap: 12px;

  margin-top: 29px;
}

.landing-play {
  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 250px;
  min-height: 66px;

  padding:
    10px
    23px;

  border: 0;
  border-radius: 11px;

  color: #06130e;

  background:
    linear-gradient(
      135deg,
      #55efbc,
      #28ce96
    );

  box-shadow:
    0 14px 42px rgba(20,198,139,.23);

  cursor: pointer;
}

.landing-play:hover {
  transform: translateY(-2px);

  box-shadow:
    0 18px 48px rgba(20,198,139,.32);
}

.landing-play-spade {
  font-size: 28px;
}

.landing-play strong,
.landing-play small {
  display: block;

  text-align: left;
}

.landing-play strong {
  font-size: 16px;

  letter-spacing: 1.2px;
}

.landing-play small {
  margin-top: 3px;

  opacity: .65;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 2px;
}

.landing-secondary {
  min-width: 105px;

  padding: 0 20px;

  border:
    1px solid rgba(255,255,255,.20);

  border-radius: 11px;

  color: #fff;

  background:
    rgba(2,16,12,.56);

  font: inherit;
  font-weight: 900;

  letter-spacing: 1px;

  backdrop-filter: blur(10px);

  cursor: pointer;
}

.landing-secondary:hover,
.landing-text-button:hover {
  border-color: #40e9af;
}

.landing-footer {
  position: absolute;
  z-index: 3;

  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
  justify-content: center;

  gap:
    clamp(20px, 5vw, 76px);

  min-height: 70px;

  padding:
    25px
    25px;

  border-top:
    1px solid rgba(255,255,255,.08);

  color:
    rgba(220,239,231,.56);

  background:
    rgba(1,10,8,.78);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 2px;

  backdrop-filter: blur(12px);
}

.back-to-landing {
  margin:
    -8px
    0
    18px;

  padding: 6px 0;

  border: 0;

  color: #8ea69d;

  background: transparent;

  font: inherit;
  font-size: 12px;
  font-weight: 900;

  letter-spacing: 1px;

  cursor: pointer;
}

.back-to-landing:hover {
  color: #40e9af;
}


@media (max-width: 900px) {

  .landing-screen {
    background-position:
      58% center;
  }

  .landing-content {
    width:
      min(550px, 66vw);
  }
}


@media (max-width: 650px) {

  .landing-screen {
    overflow-y: auto;

    background-position:
      62% center;
  }

  .landing-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(1,10,8,.93),
        rgba(1,10,8,.72) 58%,
        rgba(1,10,8,.34)
      ),
      linear-gradient(
        0deg,
        rgba(0,7,5,.96),
        rgba(0,7,5,.30) 68%,
        rgba(0,7,5,.50)
      );
  }

  .landing-header {
    height: 69px;

    padding:
      0
      17px;
  }

  .landing-logo {
    font-size: 13px;

    letter-spacing: 2px;
  }

  .landing-spade {
    width: 33px;
    height: 33px;
  }

  .landing-header-actions {
    gap: 6px;
  }

  .landing-header-actions button {
    min-height: 35px;

    padding:
      0
      9px;

    font-size: 9px;
  }

  .landing-text-button {
    display: none;
  }

  .landing-hero {
    align-items: flex-end;

    min-height:
      calc(100dvh - 69px);

    padding:
      78px
      21px
      105px;
  }

  .landing-content {
    width: 100%;
  }

  .landing-eyebrow {
    font-size: 9px;

    letter-spacing: 3px;
  }

  .landing-title {
    font-size:
      clamp(56px, 20vw, 90px);

    letter-spacing: -3px;
  }

  .landing-content h2 {
    margin-top: 26px;

    font-size: 19px;
  }

  .landing-description {
    max-width: 420px;

    font-size: 12px;
  }

  .landing-buttons {
    width: 100%;
  }

  .landing-play {
    flex: 1;

    min-width: 0;
  }

  .landing-secondary {
    min-width: 86px;
  }

  .landing-footer {
    justify-content:
      space-around;

    gap: 8px;

    min-height: 56px;

    padding:
      19px
      10px;

    font-size: 7px;

    letter-spacing: 1px;
  }

  .landing-footer span:nth-child(3),
  .landing-footer span:nth-child(4) {
    display: none;
  }
}


/* =========================================================
   SNOOP LANDING V3 OVERRIDES
========================================================= */

.landing-v3 {
  background:
    #020a08
    url("/assets/landing/snoop-clean-bg.png")
    center center / cover no-repeat;
}

.landing-v3 .landing-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(0, 8, 6, .96) 0%,
      rgba(0, 8, 6, .84) 19%,
      rgba(0, 8, 6, .49) 37%,
      rgba(0, 8, 6, .10) 60%,
      rgba(0, 8, 6, .03) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0, 7, 5, .79) 0%,
      transparent 37%,
      rgba(0, 6, 5, .30) 100%
    );
}

.landing-v3 .landing-header {
  height: 76px;

  padding:
    0
    clamp(22px, 3.3vw, 58px);

  gap: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(0, 8, 6, .94),
      rgba(0, 8, 6, .42)
    );

  backdrop-filter: blur(8px);
}

.landing-v3 .landing-logo {
  flex: 0 0 auto;
}

.landing-brand-text {
  display: flex;
  flex-direction: column;

  text-align: left;

  line-height: .95;
}

.landing-brand-text strong {
  font-size: 17px;

  letter-spacing: 3px;
}

.landing-brand-text small {
  margin-top: 5px;

  color: #40e9af;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 5px;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 1;

  gap:
    clamp(12px, 1.7vw, 28px);
}

.landing-nav button {
  position: relative;

  padding: 28px 0 25px;

  border: 0;

  color:
    rgba(236, 246, 242, .67);

  background: transparent;

  font: inherit;
  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1.2px;

  white-space: nowrap;

  cursor: pointer;
}

.landing-nav button:hover,
.landing-nav button.active {
  color: #fff;
}

.landing-nav button.active::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 16px;
  left: 0;

  height: 2px;

  border-radius: 2px;

  background: #42e9b1;

  box-shadow:
    0 0 12px rgba(66, 233, 177, .65);
}

.landing-v3 .landing-header-actions {
  flex: 0 0 auto;

  gap: 7px;
}

.landing-music,
.landing-sound,
.landing-signin {
  min-height: 38px;

  border:
    1px solid rgba(255,255,255,.13);

  border-radius: 8px;

  color:
    rgba(239,248,244,.82);

  background:
    rgba(2, 18, 13, .48);

  font: inherit;
  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1px;

  cursor: pointer;
}

.landing-music {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 0 11px;
}

.landing-music > span:first-child {
  color: #40e9af;

  font-size: 15px;
}

.landing-sound {
  width: 38px;

  padding: 0;
}

.landing-signin {
  padding: 0 13px;
}

.landing-v3 .landing-create-button {
  min-height: 38px;

  padding: 0 14px;

  font-size: 9px;
}

.landing-music:hover,
.landing-sound:hover,
.landing-signin:hover {
  border-color:
    rgba(64, 233, 175, .60);

  color: #fff;
}

.landing-v3 .landing-hero {
  min-height:
    calc(100vh - 146px);

  min-height:
    calc(100dvh - 146px);

  padding:
    25px
    clamp(30px, 6vw, 100px)
    82px;
}

.landing-v3 .landing-content {
  width:
    min(590px, 45vw);
}

.landing-v3 .landing-eyebrow {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

  font-size: 11px;
}

.landing-v3 .landing-title {
  font-size:
    clamp(65px, 7.4vw, 122px);

  line-height: .80;
}

.landing-v3 .landing-content h2 {
  margin-top: 31px;

  font-size:
    clamp(19px, 1.7vw, 27px);
}

.landing-v3 .landing-description {
  max-width: 475px;

  font-size: 13px;
}

.landing-v3 .landing-buttons {
  margin-top: 27px;
}

.landing-v3 .landing-play {
  min-width: 235px;
  min-height: 62px;
}

.landing-v3 .landing-secondary {
  min-width: 120px;

  color: #fff;
}

.landing-v3 .landing-footer {
  justify-content: space-evenly;

  gap: 0;

  min-height: 70px;

  padding:
    17px
    clamp(15px, 4vw, 60px);
}

.landing-v3 .landing-footer div {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 130px;

  text-align: center;
}

.landing-v3 .landing-footer strong {
  color:
    rgba(238, 248, 244, .82);

  font-size: 9px;

  letter-spacing: 1.6px;
}

.landing-v3 .landing-footer span {
  margin-top: 4px;

  color:
    rgba(196, 219, 210, .43);

  font-size: 7px;

  letter-spacing: 1.5px;
}


/* Medium desktop */

@media (max-width: 1250px) {

  .landing-nav {
    gap: 13px;
  }

  .landing-nav button {
    font-size: 8px;
  }

  .landing-music span:last-child {
    display: none;
  }

  .landing-music {
    width: 38px;

    justify-content: center;

    padding: 0;
  }
}


/* Tablet */

@media (max-width: 980px) {

  .landing-nav {
    display: none;
  }

  .landing-v3 .landing-header {
    gap: 12px;
  }

  .landing-v3 .landing-content {
    width:
      min(550px, 62vw);
  }

  .landing-v3 {
    background-position:
      58% center;
  }
}


/* Mobile */

@media (max-width: 650px) {

  .landing-v3 {
    background-position:
      62% center;
  }

  .landing-v3 .landing-header {
    height: 68px;

    padding:
      0
      14px;
  }

  .landing-brand-text strong {
    font-size: 12px;
  }

  .landing-brand-text small {
    font-size: 7px;

    letter-spacing: 3px;
  }

  .landing-v3 .landing-spade {
    width: 31px;
    height: 31px;
  }

  .landing-music,
  .landing-sound,
  .landing-signin {
    display: none;
  }

  .landing-v3 .landing-create-button {
    min-height: 34px;

    padding:
      0
      10px;
  }

  .landing-v3 .landing-hero {
    min-height:
      calc(100dvh - 68px);

    padding:
      75px
      20px
      105px;
  }

  .landing-v3 .landing-content {
    width: 100%;
  }

  .landing-v3 .landing-title {
    font-size:
      clamp(55px, 19vw, 88px);
  }

  .landing-v3 .landing-description {
    max-width: 390px;
  }

  .landing-v3 .landing-footer div {
    min-width: 0;

    flex: 1;
  }

  .landing-v3 .landing-footer div:nth-child(4),
  .landing-v3 .landing-footer div:nth-child(5) {
    display: none;
  }
}


/* =========================================================
   SNOOP LANDING V3 COMPOSITION FIX
   Keep the character visible and separate from the UI.
========================================================= */

@media (min-width: 981px) {

  .landing-v3 {
    /*
     * Move the artwork slightly right.
     * Character remains visible instead of sitting directly
     * behind the hero typography.
     */
    background-position: 54% center;
  }

  .landing-v3 .landing-overlay {
    /*
     * Much lighter treatment.
     * Only the far-left text zone receives strong contrast.
     */
    background:
      linear-gradient(
        90deg,
        rgba(0, 8, 6, .91) 0%,
        rgba(0, 8, 6, .76) 15%,
        rgba(0, 8, 6, .34) 27%,
        rgba(0, 8, 6, .08) 40%,
        rgba(0, 8, 6, 0) 58%
      ),
      linear-gradient(
        0deg,
        rgba(0, 7, 5, .55) 0%,
        rgba(0, 7, 5, 0) 35%
      );
  }

  .landing-v3 .landing-hero {
    align-items: center;

    padding-left:
      clamp(42px, 5vw, 88px);

    padding-right:
      clamp(42px, 5vw, 88px);
  }

  .landing-v3 .landing-content {
    /*
     * Critical change:
     * narrow UI column so it no longer spreads across
     * the seated character.
     */
    width:
      clamp(330px, 25vw, 440px);

    max-width: 440px;

    transform: translateY(-4px);
  }

  .landing-v3 .landing-eyebrow {
    margin-bottom: 15px;

    font-size: 10px;

    letter-spacing: 4px;
  }

  .landing-v3 .landing-title {
    /*
     * Current title is simply too large for the artwork.
     */
    font-size:
      clamp(58px, 5vw, 86px);

    line-height: .82;

    letter-spacing: -3px;
  }

  .landing-v3 .landing-content h2 {
    margin-top: 25px;

    font-size:
      clamp(18px, 1.35vw, 23px);

    line-height: 1.15;
  }

  .landing-v3 .landing-description {
    max-width: 390px;

    font-size: 12px;

    line-height: 1.65;
  }

  .landing-v3 .landing-buttons {
    gap: 10px;

    margin-top: 23px;
  }

  .landing-v3 .landing-play {
    min-width: 205px;
    min-height: 57px;
  }

  .landing-v3 .landing-secondary {
    min-width: 112px;
    min-height: 57px;
  }
}


/*
 * Large screens have enough room to show more artwork,
 * but the typography must still stay out of the character.
 */
@media (min-width: 1500px) {

  .landing-v3 {
    background-position: center center;
  }

  .landing-v3 .landing-content {
    width: 410px;
  }

  .landing-v3 .landing-title {
    font-size: 82px;
  }
}


/* =========================================================
   SNOOP POKER FINAL HERO COMPOSITION
========================================================= */

.landing-v3 {
  background:
    #07110e
    url("/assets/landing/snoop-final-bg.png")
    center center / cover no-repeat;
}


/*
 * Keep the artwork colorful.
 * The previous overlay was intentionally much darker.
 */
.landing-v3 .landing-overlay {
  background:
    linear-gradient(
      90deg,
      rgba(3, 12, 9, .20) 0%,
      rgba(3, 12, 9, .08) 28%,
      rgba(3, 12, 9, .05) 55%,
      rgba(3, 12, 9, .16) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 10, 7, .52) 0%,
      rgba(2, 10, 7, 0) 32%
    );
}


/*
 * Slight glass treatment keeps the real navigation readable
 * without killing the colors behind it.
 */
.landing-v3 .landing-header {
  background:
    linear-gradient(
      180deg,
      rgba(2, 12, 9, .78),
      rgba(2, 12, 9, .30)
    );

  backdrop-filter: blur(9px);
}


/*
 * Hero UI occupies the clean center-right part of the art.
 * It no longer covers the seated character.
 */
@media (min-width: 981px) {

  .landing-v3 {
    background-position: center center;
  }

  .landing-v3 .landing-hero {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    padding:
      80px
      clamp(45px, 5vw, 90px)
      100px;
  }

  .landing-v3 .landing-content {
    width: 405px;
    max-width: 405px;

    margin-left:
      clamp(430px, 38vw, 650px);

    transform: translateY(-5px);

    padding:
      25px 28px 27px;

    border:
      1px solid rgba(255,255,255,.08);

    border-radius: 18px;

    background:
      linear-gradient(
        135deg,
        rgba(2, 17, 12, .67),
        rgba(2, 14, 10, .31)
      );

    box-shadow:
      0 25px 80px rgba(0,0,0,.24);

    backdrop-filter: blur(8px);
  }
}


.landing-game-badges {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 18px;
}

.landing-game-badges span {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 10px;

  border:
    1px solid rgba(66,233,177,.28);

  border-radius: 999px;

  color: #dff9ef;

  background:
    rgba(3, 29, 20, .48);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 1.3px;
}

.landing-game-badges span:last-child {
  border-color:
    rgba(218, 174, 79, .32);

  color: #f2d28a;
}


.landing-hero-brand {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 19px;
}

.hero-brand-spade {
  display: grid;

  width: 57px;
  height: 57px;

  place-items: center;

  border:
    1px solid rgba(62,239,180,.40);

  border-radius: 15px;

  color: #0b1914;

  background:
    linear-gradient(
      145deg,
      #72f2c3,
      #25bd88
    );

  box-shadow:
    0 0 28px rgba(42,214,155,.25);

  font-size: 31px;

  transform: rotate(-5deg);
}

.landing-hero-brand > div {
  display: flex;
  flex-direction: column;

  line-height: .82;
}

.landing-hero-brand strong {
  color: #fff;

  font-size:
    clamp(42px, 4vw, 61px);

  font-weight: 950;

  letter-spacing: -2px;

  text-shadow:
    0 3px 20px rgba(0,0,0,.42);
}

.landing-hero-brand > div > span {
  margin-top: 9px;

  color: #48e8ae;

  font-size:
    clamp(27px, 2.5vw, 39px);

  font-weight: 950;

  letter-spacing: 9px;

  text-shadow:
    0 0 22px rgba(41,220,157,.20);
}


.landing-v3 .landing-content h2 {
  margin-top: 0;

  color: #fff;

  font-size: 20px;

  line-height: 1.15;

  letter-spacing: 1px;
}

.landing-v3 .landing-description {
  max-width: 350px;

  color:
    rgba(235,245,240,.73);

  font-size: 12px;

  line-height: 1.65;
}

.landing-v3 .landing-buttons {
  margin-top: 21px;
}


/*
 * Make PLAY CHIPS ONLY especially clear in the footer.
 */
.landing-v3 .landing-footer div:nth-child(3) strong {
  color: #f0cb73;
}


/* =========================================================
   FINAL HERO TABLET
========================================================= */

@media (max-width: 1200px) and (min-width: 981px) {

  .landing-v3 .landing-content {
    width: 360px;
    max-width: 360px;

    margin-left: 42vw;

    padding: 22px;
  }

  .landing-hero-brand strong {
    font-size: 46px;
  }

  .landing-hero-brand > div > span {
    font-size: 30px;
  }
}


/* =========================================================
   FINAL HERO MOBILE / TABLET
========================================================= */

@media (max-width: 980px) {

  .landing-v3 .landing-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(2,10,7,.60),
        rgba(2,10,7,.12)
      ),
      linear-gradient(
        0deg,
        rgba(2,10,7,.75),
        transparent 48%
      );
  }

  .landing-v3 .landing-content {
    width:
      min(440px, calc(100vw - 36px));

    max-width: 440px;

    margin: auto 0 0;

    padding: 20px;

    border:
      1px solid rgba(255,255,255,.08);

    border-radius: 16px;

    background:
      rgba(2,16,11,.58);

    backdrop-filter: blur(7px);
  }

  .landing-hero-brand strong {
    font-size: 44px;
  }

  .landing-hero-brand > div > span {
    font-size: 28px;

    letter-spacing: 7px;
  }
}


/* =========================================================
   SNOOP POKER OPEN HERO V1
   No glass card over the character.
========================================================= */

@media (min-width: 981px) {

  /*
   * Preserve the final artwork exactly.
   */
  .landing-v3 {
    background-position: center center;
  }


  /*
   * Remove the large glass/card appearance completely.
   */
  .landing-v3 .landing-content {
    position: absolute;

    /*
     * Place UI in the natural opening between
     * the character and the car.
     */
    left: 47%;
    top: 46%;

    width: 390px;
    max-width: 390px;

    margin: 0;
    padding: 0;

    transform: translate(-50%, -50%);

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    text-align: center;
  }


  /*
   * We already have a SNOOP POKER brand in the header.
   * Don't put another huge logo over the artwork.
   */
  .landing-v3 .landing-hero-brand {
    display: none;
  }


  /*
   * Small game identity floating naturally in the scene.
   */
  .landing-v3 .landing-game-badges {
    justify-content: center;

    gap: 8px;

    margin: 0 0 14px;
  }

  .landing-v3 .landing-game-badges span {
    min-height: 28px;

    padding: 0 12px;

    border-color:
      rgba(75, 236, 182, .38);

    background:
      rgba(0, 13, 9, .70);

    box-shadow:
      0 5px 20px rgba(0,0,0,.22);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }


  /*
   * Main message. Text-shadow gives readability without
   * covering the artwork with a rectangle.
   */
  .landing-v3 .landing-content h2 {
    margin: 0;

    color: #fff;

    font-size:
      clamp(24px, 1.75vw, 31px);

    line-height: 1.05;

    font-weight: 950;

    letter-spacing: 1.5px;

    text-shadow:
      0 3px 4px rgba(0,0,0,.90),
      0 8px 25px rgba(0,0,0,.75);
  }


  .landing-v3 .landing-description {
    max-width: 355px;

    margin: 13px auto 0;

    color:
      rgba(255,255,255,.90);

    font-size: 12px;

    line-height: 1.55;

    text-shadow:
      0 2px 5px rgba(0,0,0,.95),
      0 5px 18px rgba(0,0,0,.80);
  }


  /*
   * CTA area.
   */
  .landing-v3 .landing-buttons {
    justify-content: center;

    gap: 10px;

    margin-top: 18px;
  }


  .landing-v3 .landing-play {
    min-width: 220px;
    min-height: 58px;

    box-shadow:
      0 12px 35px rgba(0,0,0,.32),
      0 0 28px rgba(53,224,165,.16);
  }


  /*
   * HOW TO PLAY already exists in navigation.
   * Remove duplicate LEARN MORE from the hero visually.
   */
  .landing-v3 .landing-secondary {
    display: none;
  }
}


/* =========================================================
   WIDE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  .landing-v3 .landing-content {
    left: 48.5%;
    top: 45%;

    width: 410px;
    max-width: 410px;
  }
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) and (min-width: 981px) {

  .landing-v3 .landing-content {
    left: 51%;
    top: 47%;

    width: 340px;
    max-width: 340px;
  }

  .landing-v3 .landing-content h2 {
    font-size: 23px;
  }

  .landing-v3 .landing-description {
    max-width: 320px;
  }
}


/* =========================================================
   SNOOP POKER FULL ART FIX V1
   Preserve the complete artwork instead of cropping it.
========================================================= */

@media (min-width: 981px) {

  .landing-v3 {
    /*
     * Show the complete 1672x941 composition.
     * No more cover-cropping of artwork at top/bottom.
     */
    background-color: #020b08;

    background-image:
      url("/assets/landing/snoop-final-bg.png");

    background-repeat: no-repeat;

    background-position:
      center center;

    background-size:
      contain;
  }


  /*
   * Keep the header independent from the artwork.
   */
  .landing-v3 .landing-header {
    background:
      rgba(1, 12, 9, .88);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }


  /*
   * Keep the CTA in the open center area.
   * We can fine-tune this after seeing the uncropped artwork.
   */
  .landing-v3 .landing-content {
    left: 50%;
    top: 46%;
  }
}


/* =========================================================
   SNOOP POKER FULL WIDTH ART V2
   Full browser width without side black bars.
========================================================= */

@media (min-width: 981px) {

  .landing-v3 {
    background-color: #020b08;

    background-image:
      url("/assets/landing/snoop-final-bg.png");

    background-repeat: no-repeat;

    /*
     * Fill the complete browser WIDTH.
     * Unlike contain, this removes the black side columns.
     */
    background-size: 100% auto;

    /*
     * Anchor artwork immediately below the navigation.
     * This gives us control over which tiny vertical portion
     * may fall outside the viewport.
     */
    background-position: center 72px;
  }


  /*
   * Keep navigation above the artwork.
   */
  .landing-v3 .landing-header {
    background:
      rgba(1, 12, 9, .91);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }


  /*
   * Hero stays in the opening between character and car.
   */
  .landing-v3 .landing-content {
    left: 50%;
    top: 45%;
  }
}


/* =========================================================
   SNOOP POKER PREMIUM HEADER LOGO V1
   Logo only - landing artwork untouched.
========================================================= */

.landing-v3 .landing-premium-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 190px;
  height: 64px;
  min-width: 190px;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  overflow: visible;

  background: transparent;
  box-shadow: none;

  cursor: pointer;
}

.landing-v3 .landing-premium-logo-image {
  display: block;

  width: 184px;
  height: auto;
  max-width: 100%;

  object-fit: contain;
  object-position: left center;

  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.30));

  pointer-events: none;
  user-select: none;
}

@media (max-width: 1350px) and (min-width: 981px) {

  .landing-v3 .landing-premium-logo {
    width: 165px;
    min-width: 165px;
  }

  .landing-v3 .landing-premium-logo-image {
    width: 160px;
  }
}

@media (max-width: 980px) {

  .landing-v3 .landing-premium-logo {
    width: 145px;
    height: 58px;
    min-width: 145px;
  }

  .landing-v3 .landing-premium-logo-image {
    width: 140px;
  }
}


/* =========================================================
   SNOOP POKER JAZZ HEADER V1
   Audio controls only. Landing artwork is untouched.
========================================================= */

@media (min-width: 981px) {

  .landing-v3 .landing-header-actions {
    display: flex;
    align-items: center;
  }

  .landing-v3 .landing-music,
  .landing-v3 .landing-sound {
    box-sizing: border-box;
    align-self: center;
  }

  .landing-v3 .landing-music {
    height: 40px;
    min-height: 40px;
  }

  .landing-v3 .landing-sound {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    line-height: 1;
    font-size: 14px;
  }

  .landing-v3 .landing-sound.is-muted {
    opacity: .72;
  }
}


/* =========================================================
   SNOOP POKER JAZZ PLAY HINT V1
========================================================= */

.landing-v3 .landing-jazz-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  line-height: 1;
}

.landing-v3 .landing-jazz-label > span {
  line-height: 1.05;
}

.landing-v3 #landingJazzHint {
  display: block;

  margin-top: 3px;

  font-size: 7px;
  line-height: 1;

  letter-spacing: 1.15px;

  opacity: .62;

  white-space: nowrap;

  animation:
    snoopJazzHintPulse 1.8s ease-in-out infinite;
}

.landing-v3 #landingJazzHint[hidden] {
  display: none;
}

@keyframes snoopJazzHintPulse {

  0%,
  100% {
    opacity: .38;
  }

  50% {
    opacity: .88;
  }
}


/* =========================================================
   SNOOP POKER PREMIUM AUTH V1
   Visual layer only.
   Auth logic / routing / backend untouched.
========================================================= */

#authScreen.auth-screen {
  position: relative;
  isolation: isolate;

  min-height: 100vh;
  min-height: 100dvh;

  padding: 42px 24px;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(13, 91, 65, .18) 0%,
      rgba(4, 38, 28, .08) 34%,
      transparent 62%
    ),
    radial-gradient(
      circle at 50% 115%,
      rgba(201, 160, 69, .07),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #06150f 0%,
      #020a07 48%,
      #010504 100%
    );
}


/*
 * Very subtle ambient light behind the card.
 */
#authScreen.auth-screen::before {
  content: "";

  position: absolute;
  z-index: -1;

  width: min(700px, 90vw);
  height: min(700px, 90vw);

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(25, 138, 97, .10),
      transparent 66%
    );

  filter: blur(18px);

  pointer-events: none;
}


#authScreen .auth-card {
  position: relative;

  width: min(470px, 100%);

  padding:
    28px
    38px
    34px;

  overflow: hidden;

  border:
    1px solid rgba(209, 169, 80, .42);

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 28, 21, .97),
      rgba(3, 15, 11, .985)
    );

  box-shadow:
    0 34px 90px rgba(0, 0, 0, .55),
    0 0 45px rgba(15, 117, 81, .08),
    inset 0 1px 0 rgba(255, 255, 255, .035);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}


/*
 * Premium top accent.
 */
#authScreen .auth-card::before {
  content: "";

  position: absolute;

  left: 14%;
  right: 14%;
  top: -1px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(231, 197, 111, .9),
      rgba(42, 183, 128, .55),
      transparent
    );

  box-shadow:
    0 0 16px rgba(221, 183, 91, .28);

  pointer-events: none;
}


#authScreen .back-to-landing {
  position: relative;

  margin: 0 0 14px;

  padding: 5px 0;

  border: 0;

  background: transparent;

  color: rgba(221, 229, 225, .62);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.5px;

  transition:
    color .18s ease,
    transform .18s ease;
}


#authScreen .back-to-landing:hover {
  color: #e2bd66;
  transform: translateX(-2px);
}


/* ---------- BRAND ---------- */

#authScreen .auth-premium-brand {
  margin:
    -2px
    0
    24px;

  text-align: center;
}


#authScreen .auth-premium-logo {
  display: block;

  width: min(245px, 76%);
  height: auto;

  margin:
    0 auto 9px;

  object-fit: contain;

  filter:
    drop-shadow(0 8px 20px rgba(0, 0, 0, .34))
    drop-shadow(0 0 9px rgba(205, 167, 72, .09));
}


#authScreen .auth-premium-tagline {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  color: rgba(220, 188, 105, .76);
}


#authScreen .auth-premium-tagline strong {
  flex: 0 0 auto;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 2.7px;
}


#authScreen .auth-premium-tagline span {
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(213, 177, 84, .48)
    );
}


#authScreen .auth-premium-tagline span:last-child {
  transform: scaleX(-1);
}


/* ---------- TABS ---------- */

#authScreen .auth-tabs {
  gap: 0;

  padding: 4px;

  margin-bottom: 25px;

  border:
    1px solid rgba(255, 255, 255, .045);

  border-radius: 11px;

  background:
    rgba(0, 8, 6, .67);

  box-shadow:
    inset 0 1px 8px rgba(0, 0, 0, .28);
}


#authScreen .auth-tab {
  min-height: 38px;

  padding: 9px 12px;

  border-radius: 8px;

  color: rgba(207, 219, 214, .52);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1.6px;

  text-transform: uppercase;

  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


#authScreen .auth-tab.active {
  color: #dff8ec;

  background:
    linear-gradient(
      180deg,
      rgba(17, 103, 75, .76),
      rgba(9, 69, 50, .76)
    );

  box-shadow:
    inset 0 0 0 1px rgba(45, 189, 133, .18),
    0 5px 14px rgba(0, 0, 0, .18);
}


/* ---------- FORMS ---------- */

#authScreen .auth-form {
  gap: 17px;
}


#authScreen .auth-form label {
  gap: 7px;

  color: rgba(221, 230, 226, .72);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.25px;

  text-transform: uppercase;
}


#authScreen .auth-form input {
  min-height: 47px;

  padding:
    12px
    14px;

  border:
    1px solid rgba(184, 161, 94, .21);

  border-radius: 9px;

  background:
    rgba(1, 11, 8, .72);

  color: #f1f6f3;

  font-size: 14px;

  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, .22);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


#authScreen .auth-form input:hover {
  border-color:
    rgba(206, 173, 83, .34);
}


#authScreen .auth-form input:focus {
  border-color:
    rgba(224, 188, 92, .78);

  background:
    rgba(2, 15, 11, .88);

  box-shadow:
    0 0 0 3px rgba(211, 170, 69, .07),
    0 0 22px rgba(205, 167, 72, .055),
    inset 0 2px 8px rgba(0, 0, 0, .18);
}


/* ---------- PRIMARY AUTH CTA ---------- */

#authScreen .auth-form .primary-btn {
  position: relative;

  min-height: 48px;

  margin-top: 3px;

  padding:
    13px
    18px;

  overflow: hidden;

  border:
    1px solid rgba(53, 213, 151, .24);

  border-radius: 9px;

  background:
    linear-gradient(
      135deg,
      #08774f,
      #0a9a68
    );

  color: #f3fff9;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 2.1px;

  text-transform: uppercase;

  box-shadow:
    0 10px 24px rgba(0, 102, 68, .20),
    inset 0 1px 0 rgba(255, 255, 255, .13);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}


#authScreen .auth-form .primary-btn::after {
  content: "♠";

  margin-left: 10px;

  color: #dfbd67;

  font-size: 13px;
}


#authScreen .auth-form .primary-btn:hover {
  transform: translateY(-1px);

  filter: brightness(1.07);

  box-shadow:
    0 13px 30px rgba(0, 117, 78, .26),
    0 0 22px rgba(19, 152, 103, .08),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}


#authScreen .auth-form .primary-btn:active {
  transform: translateY(0);
}


/* ---------- REGISTER ---------- */

#authScreen #registerForm {
  gap: 13px;
}


#authScreen #registerForm input {
  min-height: 43px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 560px) {

  #authScreen.auth-screen {
    padding:
      18px
      14px;
  }

  #authScreen .auth-card {
    padding:
      22px
      20px
      26px;

    border-radius: 18px;
  }

  #authScreen .auth-premium-logo {
    width:
      min(215px, 78%);
  }

  #authScreen .auth-premium-brand {
    margin-bottom: 20px;
  }

  #authScreen .auth-tabs {
    margin-bottom: 20px;
  }

}


/* =========================================================
   SNOOP POKER LOBBY V2
========================================================= */

#lobbyView {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 34px;
  padding-bottom: 70px;
}


#lobbyView .lobby-heading-v2 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  margin-bottom: 26px;
}


.lobby-heading-copy {
  min-width: 0;
}


.lobby-eyebrow {
  display: block;

  margin-bottom: 7px;

  color: #dcae3b;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2.4px;
}


#lobbyView .lobby-heading-copy h2 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(26px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.8px;
}


#lobbyView .lobby-heading-copy p {
  margin: 9px 0 0;

  color: rgba(214, 231, 224, .68);

  font-size: 14px;
}


.lobby-refresh-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  min-height: 40px;

  padding: 0 15px;
}


.lobby-refresh-icon {
  color: #24d5a4;

  font-size: 17px;
  line-height: 1;
}


/* Grid */

#tablesGrid.tables-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;

  align-items: stretch;
}


/* Card */

#tablesGrid .lobby-table-v2 {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 286px;

  padding: 21px;

  overflow: hidden;

  border:
    1px solid rgba(113, 148, 133, .20);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(16, 39, 31, .94),
      rgba(7, 25, 19, .98)
    );

  box-shadow:
    0 14px 34px rgba(0,0,0,.18);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


#tablesGrid .lobby-table-v2:hover {
  transform: translateY(-2px);

  border-color:
    rgba(42, 207, 159, .32);

  box-shadow:
    0 18px 42px rgba(0,0,0,.25);
}


/* Featured Whiskey Room */

#tablesGrid .lobby-table-v2.is-featured {
  border-color:
    rgba(220, 174, 59, .48);

  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(218, 168, 49, .11),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(15, 45, 34, .98),
      rgba(5, 27, 20, .99)
    );

  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.025);
}


#tablesGrid .lobby-table-v2.is-featured::before {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #dfb23e,
      #22cfa0,
      transparent
    );
}


/* Card header */

.lobby-table-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 14px;
}


.lobby-table-identity {
  min-width: 0;
}


.lobby-table-name-row {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;
}


.lobby-room-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 25px;
  height: 25px;

  font-size: 15px;
}


#tablesGrid .lobby-table-name-row h3 {
  margin: 0;

  overflow: hidden;

  color: #fff;

  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.lobby-table-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 6px;

  margin-top: 10px;
}


.lobby-featured-badge,
.lobby-game-badge {
  display: inline-flex;
  align-items: center;

  min-height: 21px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
}


.lobby-featured-badge {
  color: #f0c752;

  border:
    1px solid rgba(224, 180, 59, .27);

  background:
    rgba(218, 169, 43, .08);
}


.lobby-game-badge {
  color: rgba(211, 229, 221, .70);

  border:
    1px solid rgba(130, 159, 146, .15);

  background:
    rgba(0,0,0,.12);
}


/* Open status */

.lobby-table-status {
  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 6px;

  padding-top: 3px;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.1px;
}


.lobby-table-status span {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


.lobby-table-status.is-open {
  color: #38dcae;
}


.lobby-table-status.is-open span {
  background: #28d7a5;

  box-shadow:
    0 0 9px rgba(40,215,165,.65);
}


.lobby-table-status.is-full {
  color: #c8a454;
}


.lobby-table-status.is-full span {
  background: #c8a454;
}


/* Stats */

.lobby-table-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 27px;
  margin-bottom: 21px;
}


.lobby-stat {
  min-width: 0;

  padding-right: 10px;

  border-right:
    1px solid rgba(255,255,255,.07);
}


.lobby-stat:last-child {
  padding-right: 0;

  border-right: 0;
}


.lobby-stat-label {
  display: block;

  margin-bottom: 8px;

  color: rgba(183, 207, 196, .48);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.35px;
}


.lobby-stat strong {
  display: block;

  overflow: hidden;

  color: #ffffff;

  font-size: 17px;
  line-height: 1.15;
  font-weight: 850;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.lobby-stat strong small {
  color: rgba(203, 222, 213, .43);

  font-size: .68em;
  font-weight: 700;
}


/* Player occupancy */

.lobby-occupancy {
  width: 100%;
  max-width: 68px;
  height: 3px;

  margin-top: 9px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.07);
}


.lobby-occupancy span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #168d6b,
      #2bd4a5
    );
}


/* Seat button */

#tablesGrid .lobby-take-seat {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 45px;

  margin-top: auto;

  padding:
    0
    16px;

  border-radius: 10px;

  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.35px;
}


#tablesGrid .is-featured .lobby-take-seat {
  background:
    linear-gradient(
      90deg,
      #07926b,
      #14b98a
    );

  color: #fff;
}


.lobby-seat-arrow {
  color: #f1c44b;

  font-size: 16px;
}


#tablesGrid .lobby-take-seat:disabled {
  cursor: not-allowed;

  opacity: .42;
}


/* =========================================================
   LOBBY V2 TABLET
========================================================= */

@media (max-width: 1000px) {

  #tablesGrid.tables-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   LOBBY V2 MOBILE
========================================================= */

@media (max-width: 650px) {

  #lobbyView {
    width: calc(100% - 28px);

    padding-top: 22px;
    padding-bottom: 42px;
  }


  #lobbyView .lobby-heading-v2 {
    align-items: center;

    margin-bottom: 18px;
  }


  #lobbyView .lobby-heading-copy h2 {
    font-size: 25px;
  }


  #lobbyView .lobby-heading-copy p {
    max-width: 230px;

    font-size: 12px;
    line-height: 1.4;
  }


  .lobby-refresh-v2 {
    width: 40px;
    min-width: 40px;

    padding: 0;
  }


  .lobby-refresh-v2 > span:last-child {
    display: none;
  }


  #tablesGrid.tables-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  #tablesGrid .lobby-table-v2 {
    min-height: 0;

    padding: 17px;

    border-radius: 14px;
  }


  #tablesGrid .lobby-table-name-row h3 {
    font-size: 17px;
  }


  .lobby-table-stats {
    gap: 7px;

    margin-top: 22px;
    margin-bottom: 18px;
  }


  .lobby-stat-label {
    margin-bottom: 6px;

    font-size: 7px;
  }


  .lobby-stat strong {
    font-size: 15px;
  }


  #tablesGrid .lobby-take-seat {
    min-height: 44px;
  }

}


/* Very small phones */

@media (max-width: 380px) {

  .lobby-table-stats {
    grid-template-columns:
      1fr 1fr;
  }


  .lobby-stat-buyin {
    grid-column: 1 / -1;

    padding-top: 10px;

    border-top:
      1px solid rgba(255,255,255,.06);

    border-right: 0;
  }

}



/* =========================================================
   SNOOP POKER LOBBY V3
   Featured Whiskey Room + compact poker table browser
========================================================= */

#lobbyView {
  width: min(1180px, calc(100% - 48px));

  margin:
    0
    auto;

  padding:
    38px
    0
    70px;
}


.lobby-heading-v2 {
  align-items: flex-end;

  margin-bottom: 24px;
}


.lobby-heading-copy h2 {
  margin-top: 5px;

  font-size:
    clamp(30px, 3vw, 42px);

  letter-spacing: -1.1px;
}


.lobby-heading-copy p {
  margin-top: 6px;

  color:
    rgba(198, 218, 208, .68);
}


#tablesGrid.tables-grid {
  display: block;
}


/* =========================================================
   FEATURED ROOM
========================================================= */

.lobby-v3-featured {
  display: grid;

  grid-template-columns:
    minmax(0, 1.58fr)
    minmax(310px, .72fr);

  min-height: 370px;

  overflow: hidden;

  border:
    1px solid rgba(218, 177, 58, .36);

  border-radius: 19px;

  background:
    linear-gradient(
      135deg,
      rgba(5, 31, 24, .98),
      rgba(3, 19, 15, .99)
    );

  box-shadow:
    0 26px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025);
}


.lobby-v3-featured-art {
  position: relative;

  min-height: 370px;

  overflow: hidden;

  background: #071710;
}


.lobby-v3-room-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.01);
}


.lobby-v3-art-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2, 12, 9, .08) 0%,
      rgba(2, 12, 9, .06) 48%,
      rgba(2, 12, 9, .88) 100%
    ),
    linear-gradient(
      0deg,
      rgba(2, 12, 9, .82) 0%,
      transparent 50%
    );
}


.lobby-v3-art-copy {
  position: absolute;

  left: 30px;
  bottom: 27px;

  z-index: 2;
}


.lobby-v3-featured-kicker,
.lobby-v3-room-label {
  color: #e0b43d;

  font-size: 9px;
  font-weight: 950;
  letter-spacing: 1.8px;
}


.lobby-v3-art-copy h3 {
  margin:
    7px
    0
    3px;

  color: #fff;

  font-size:
    clamp(25px, 2.3vw, 34px);

  line-height: 1;
}


.lobby-v3-art-copy p {
  margin: 0;

  color:
    rgba(231, 238, 234, .72);

  font-size: 12px;
}


.lobby-v3-featured-info {
  display: flex;

  flex-direction: column;

  padding:
    30px
    28px
    27px;
}


.lobby-v3-featured-head {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;
}


.lobby-v3-featured-head h3 {
  margin:
    6px
    0
    0;

  color: #fff;

  font-size: 24px;
  line-height: 1.05;
}


.lobby-v3-featured-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0;

  margin:
    40px
    0
    30px;
}


.lobby-v3-featured-stats > div {
  min-width: 0;

  padding:
    0
    13px;

  border-right:
    1px solid rgba(255,255,255,.07);
}


.lobby-v3-featured-stats > div:first-child {
  padding-left: 0;
}


.lobby-v3-featured-stats > div:last-child {
  padding-right: 0;

  border-right: 0;
}


.lobby-v3-featured-stats > div > span {
  display: block;

  margin-bottom: 9px;

  color:
    rgba(183, 207, 196, .47);

  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1.25px;
}


.lobby-v3-featured-stats strong {
  display: block;

  overflow: hidden;

  color: #fff;

  font-size: 16px;
  font-weight: 900;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v3-featured-stats strong small {
  color:
    rgba(210, 224, 217, .4);

  font-size: .7em;
}


.lobby-v3-featured-seat {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 52px;

  margin-top: auto;

  padding:
    0
    19px;

  border-radius: 11px;

  background:
    linear-gradient(
      90deg,
      #078f69,
      #16b98b
    );

  color: #fff;

  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.45px;
}


.lobby-v3-featured-seat:disabled {
  cursor: not-allowed;

  opacity: .45;
}


/* =========================================================
   ALL TABLES
========================================================= */

.lobby-v3-all {
  margin-top: 32px;
}


.lobby-v3-section-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;

  padding:
    0
    3px;
}


.lobby-v3-section-heading span {
  color: #d9ad38;

  font-size: 8px;
  font-weight: 950;
  letter-spacing: 1.65px;
}


.lobby-v3-section-heading h3 {
  margin:
    3px
    0
    0;

  color: #fff;

  font-size: 20px;
}


.lobby-v3-section-heading small {
  color:
    rgba(187, 207, 198, .5);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.1px;
}


.lobby-v3-table-list {
  overflow: hidden;

  border:
    1px solid rgba(134, 170, 153, .15);

  border-radius: 14px;

  background:
    rgba(7, 26, 20, .72);
}


.lobby-v3-table-row {
  display: grid;

  grid-template-columns:
    minmax(220px, 1.7fr)
    minmax(100px, .7fr)
    minmax(100px, .7fr)
    minmax(135px, .9fr)
    72px
    46px;

  align-items: center;

  gap: 18px;

  min-height: 76px;

  padding:
    13px
    17px;

  border-bottom:
    1px solid rgba(255,255,255,.055);

  transition:
    background .18s ease,
    border-color .18s ease;
}


.lobby-v3-table-row:last-child {
  border-bottom: 0;
}


.lobby-v3-table-row:hover {
  background:
    rgba(18, 65, 49, .22);
}


.lobby-v3-table-main {
  display: flex;

  align-items: center;

  min-width: 0;

  gap: 12px;
}


.lobby-v3-spade {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border:
    1px solid rgba(221, 178, 58, .2);

  border-radius: 9px;

  background:
    rgba(218, 174, 51, .055);

  color: #dfb23c;

  font-size: 15px;
}


.lobby-v3-table-main h4 {
  overflow: hidden;

  margin: 0;

  color: #fff;

  font-size: 14px;
  font-weight: 850;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v3-table-main div > span {
  display: block;

  margin-top: 4px;

  color:
    rgba(181, 204, 193, .45);

  font-size: 8px;
  font-weight: 850;
  letter-spacing: .85px;
}


.lobby-v3-row-stat {
  min-width: 0;
}


.lobby-v3-row-stat > span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(178, 201, 190, .4);

  font-size: 7px;
  font-weight: 950;
  letter-spacing: 1.1px;
}


.lobby-v3-row-stat strong {
  display: block;

  overflow: hidden;

  color:
    rgba(244, 248, 246, .9);

  font-size: 12px;
  font-weight: 850;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v3-row-stat .lobby-occupancy {
  max-width: 55px;

  margin-top: 6px;
}


.lobby-v3-table-row .lobby-table-status {
  justify-content: flex-start;

  white-space: nowrap;
}


.lobby-v3-row-seat {
  display: grid;

  place-items: center;

  width: 38px;
  height: 38px;

  border:
    1px solid rgba(218, 177, 58, .25);

  border-radius: 9px;

  background:
    rgba(218, 177, 58, .07);

  color: #e0b43d;

  cursor: pointer;

  font-size: 17px;

  transition:
    background .18s ease,
    transform .18s ease;
}


.lobby-v3-row-seat:hover {
  background:
    rgba(218, 177, 58, .14);

  transform: translateX(2px);
}


.lobby-v3-row-seat:disabled {
  cursor: not-allowed;

  opacity: .35;

  transform: none;
}


/* =========================================================
   LOBBY V3 TABLET
========================================================= */

@media (max-width: 900px) {

  .lobby-v3-featured {
    grid-template-columns: 1fr;
  }


  .lobby-v3-featured-art {
    min-height: 330px;
  }


  .lobby-v3-featured-info {
    padding:
      25px
      24px;
  }


  .lobby-v3-table-row {
    grid-template-columns:
      minmax(190px, 1.5fr)
      minmax(90px, .7fr)
      minmax(90px, .7fr)
      minmax(120px, .9fr)
      42px;
  }


  .lobby-v3-table-row > .lobby-table-status {
    display: none;
  }

}


/* =========================================================
   LOBBY V3 MOBILE
========================================================= */

@media (max-width: 650px) {

  #lobbyView {
    width: calc(100% - 24px);

    padding:
      23px
      0
      45px;
  }


  .lobby-heading-v2 {
    align-items: flex-start;

    gap: 16px;
  }


  .lobby-heading-copy h2 {
    font-size: 29px;
  }


  .lobby-heading-copy p {
    max-width: 250px;

    font-size: 12px;
    line-height: 1.5;
  }


  .lobby-refresh-v2 {
    min-height: 38px;

    padding:
      0
      12px;
  }


  .lobby-v3-featured {
    border-radius: 16px;
  }


  .lobby-v3-featured-art {
    min-height: 225px;
  }


  .lobby-v3-room-image {
    object-position: center;
  }


  .lobby-v3-art-copy {
    left: 19px;
    bottom: 18px;
  }


  .lobby-v3-art-copy h3 {
    font-size: 25px;
  }


  .lobby-v3-art-copy p {
    font-size: 10px;
  }


  .lobby-v3-featured-info {
    padding:
      20px
      18px
      18px;
  }


  .lobby-v3-featured-head h3 {
    font-size: 20px;
  }


  .lobby-v3-featured-stats {
    margin:
      27px
      0
      24px;
  }


  .lobby-v3-featured-stats > div {
    padding:
      0
      9px;
  }


  .lobby-v3-featured-stats strong {
    font-size: 14px;
  }


  .lobby-v3-featured-seat {
    min-height: 49px;
  }


  .lobby-v3-all {
    margin-top: 27px;
  }


  .lobby-v3-table-list {
    overflow: visible;

    border: 0;

    background: transparent;
  }


  .lobby-v3-table-row {
    grid-template-columns:
      minmax(0, 1fr)
      42px;

    gap:
      15px
      10px;

    min-height: 0;

    margin-bottom: 10px;

    padding:
      16px;

    border:
      1px solid rgba(134, 170, 153, .14);

    border-radius: 13px;

    background:
      rgba(7, 27, 21, .78);
  }


  .lobby-v3-table-row:last-child {
    border-bottom:
      1px solid rgba(134, 170, 153, .14);
  }


  .lobby-v3-table-main {
    grid-column:
      1 / 2;
  }


  .lobby-v3-row-seat {
    grid-column: 2;

    grid-row: 1;

    align-self: center;
  }


  .lobby-v3-row-stat {
    display: inline-block;
  }


  .lobby-v3-table-row {
    grid-template-areas:
      "main button"
      "stats stats";
  }


  .lobby-v3-table-main {
    grid-area: main;
  }


  .lobby-v3-row-seat {
    grid-area: button;
  }


  .lobby-v3-row-stat {
    display: none;
  }


  .lobby-v3-table-row::after {
    content: "Tap arrow to view table";

    grid-area: stats;

    color:
      rgba(180, 203, 192, .42);

    font-size: 9px;
    font-weight: 750;
    letter-spacing: .4px;
  }

}


/* =========================================================
   LOBBY V3 SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .lobby-v3-featured-art {
    min-height: 205px;
  }


  .lobby-v3-featured-stats strong {
    font-size: 12px;
  }


  .lobby-v3-featured-stats > div > span {
    font-size: 7px;
  }

}



/* =========================================================
   SNOOP POKER LANDING MOBILE FOUNDATION V1

   Desktop >= 981px: untouched
   Tablet 651-980px: responsive
   Mobile <= 650px: portrait-first
========================================================= */


/* =========================================================
   TABLET + MOBILE FOUNDATION
========================================================= */

@media (max-width: 980px) {

  html,
  body {
    max-width: 100%;

    overflow-x: hidden;
  }


  .landing-v3 {
    width: 100%;
    min-height: 100svh;

    overflow-x: hidden;

    background-color: #020b08;

    background-image:
      url("/assets/landing/snoop-final-bg.png");

    background-repeat: no-repeat;

    /*
     * Mobile/tablet gets its own composition.
     * Desktop artwork rules remain untouched.
     */
    background-size: cover;

    background-position:
      48% center;
  }


  /*
   * Header becomes an independent mobile navigation layer.
   */
  .landing-v3 .landing-header {
    position: relative;
    z-index: 20;

    display: flex;

    align-items: center;

    width: 100%;
    height: 64px;

    padding:
      0
      16px;

    gap: 10px;

    background:
      linear-gradient(
        180deg,
        rgba(1, 12, 9, .96),
        rgba(1, 12, 9, .82)
      );

    border-bottom:
      1px solid rgba(255,255,255,.055);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }


  .landing-v3 .landing-nav {
    display: none;
  }


  /*
   * Real premium logo.
   */
  .landing-v3 .landing-premium-logo {
    width: 142px;
    height: 54px;
    min-width: 142px;

    flex: 0 0 142px;
  }


  .landing-v3 .landing-premium-logo-image {
    width: 137px;
    height: auto;

    max-width: 137px;
  }


  .landing-v3 .landing-header-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    min-width: 0;

    margin-left: auto;

    gap: 7px;
  }


  /*
   * Tablet keeps useful controls.
   */
  .landing-v3 .landing-music,
  .landing-v3 .landing-sound,
  .landing-v3 .landing-signin {
    display: inline-flex;

    align-items: center;
    justify-content: center;
  }


  .landing-v3 .landing-music {
    width: 38px;
    height: 38px;
    min-width: 38px;

    padding: 0;
  }


  .landing-v3 .landing-music > span:first-child {
    display: inline-block;
  }


  .landing-v3 .landing-jazz-label {
    display: none;
  }


  .landing-v3 .landing-sound {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;

    padding: 0;
  }


  .landing-v3 .landing-signin {
    min-height: 38px;

    padding:
      0
      11px;

    white-space: nowrap;
  }


  .landing-v3 .landing-create-button {
    min-height: 38px;

    padding:
      0
      12px;

    white-space: nowrap;
  }


  /*
   * Hero has its own mobile composition instead of inheriting
   * the desktop absolute positioning.
   */
  .landing-v3 .landing-hero {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    width: 100%;

    min-height:
      calc(100svh - 64px);

    padding:
      90px
      24px
      112px;
  }


  .landing-v3 .landing-content {
    position: relative;

    left: auto;
    top: auto;

    width:
      min(440px, 100%);

    max-width: 440px;

    margin: 0;

    padding:
      20px
      20px
      21px;

    transform: none;

    border:
      1px solid rgba(255,255,255,.085);

    border-radius: 17px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 18, 12, .77),
        rgba(1, 14, 10, .58)
      );

    box-shadow:
      0 18px 55px rgba(0,0,0,.28);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    text-align: center;
  }


  /*
   * Header already carries the SnoopPoker identity.
   */
  .landing-v3 .landing-hero-brand {
    display: none;
  }


  .landing-v3 .landing-game-badges {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin:
      0
      0
      13px;
  }


  .landing-v3 .landing-game-badges span {
    min-height: 25px;

    padding:
      0
      9px;

    font-size: 7px;

    letter-spacing: 1px;
  }


  .landing-v3 .landing-content h2 {
    margin: 0;

    color: #fff;

    font-size:
      clamp(22px, 5vw, 28px);

    line-height: 1.08;

    letter-spacing: .8px;

    text-shadow:
      0 3px 15px rgba(0,0,0,.75);
  }


  .landing-v3 .landing-description {
    max-width: 360px;

    margin:
      11px
      auto
      0;

    color:
      rgba(245, 250, 247, .86);

    font-size: 11px;

    line-height: 1.55;

    text-shadow:
      0 2px 10px rgba(0,0,0,.75);
  }


  .landing-v3 .landing-buttons {
    display: flex;

    justify-content: center;

    width: 100%;

    margin-top: 17px;
  }


  .landing-v3 .landing-play {
    width: min(260px, 100%);

    min-width: 0;
    min-height: 50px;

    margin: 0;
  }


  .landing-v3 .landing-secondary {
    display: none;
  }


  /*
   * Footer remains readable rather than forcing five columns
   * into a phone-sized viewport.
   */
  .landing-v3 .landing-footer {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 10;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    min-height: 70px;

    padding:
      10px
      14px;

    background:
      linear-gradient(
        0deg,
        rgba(1, 11, 8, .98),
        rgba(1, 11, 8, .76)
      );

    border-top:
      1px solid rgba(255,255,255,.055);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }


  .landing-v3 .landing-footer div {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;

    padding:
      0
      7px;

    text-align: center;
  }


  .landing-v3 .landing-footer div:nth-child(4),
  .landing-v3 .landing-footer div:nth-child(5) {
    display: none;
  }


  .landing-v3 .landing-footer strong {
    font-size: 9px;

    white-space: nowrap;
  }


  .landing-v3 .landing-footer span {
    margin-top: 3px;

    font-size: 7px;

    white-space: nowrap;
  }

}


/* =========================================================
   PHONE PORTRAIT
========================================================= */

@media (max-width: 650px) {

  .landing-v3 {
    /*
     * Show the character / central composition without trying
     * to squeeze the complete desktop artwork into portrait.
     */
    background-size: auto 100%;

    background-position:
      44% center;
  }


  .landing-v3 .landing-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(1,10,7,.12) 0%,
        rgba(1,10,7,.08) 35%,
        rgba(1,10,7,.52) 72%,
        rgba(1,10,7,.90) 100%
      );
  }


  .landing-v3 .landing-header {
    height: 60px;

    padding:
      0
      11px;

    gap: 6px;
  }


  .landing-v3 .landing-premium-logo {
    width: 118px;
    height: 50px;
    min-width: 118px;

    flex-basis: 118px;
  }


  .landing-v3 .landing-premium-logo-image {
    width: 114px;

    max-width: 114px;
  }


  .landing-v3 .landing-header-actions {
    gap: 5px;
  }


  /*
   * Keep music accessible on mobile.
   * Sound is hidden because music itself is the mute/play control.
   */
  .landing-v3 .landing-music {
    display: inline-flex;

    width: 34px;
    height: 34px;
    min-width: 34px;

    border-radius: 9px;
  }


  .landing-v3 .landing-sound {
    display: none;
  }


  /*
   * Login remains accessible.
   */
  .landing-v3 .landing-signin {
    display: inline-flex;

    min-height: 34px;

    padding:
      0
      8px;

    font-size: 8px;

    letter-spacing: .5px;
  }


  .landing-v3 .landing-create-button {
    min-height: 34px;

    padding:
      0
      8px;

    font-size: 8px;

    letter-spacing: .35px;
  }


  .landing-v3 .landing-hero {
    min-height:
      calc(100svh - 60px);

    padding:
      56px
      13px
      88px;
  }


  .landing-v3 .landing-content {
    width: 100%;

    max-width: 390px;

    padding:
      16px
      15px
      17px;

    border-radius: 15px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 17, 12, .80),
        rgba(1, 13, 9, .66)
      );
  }


  .landing-v3 .landing-game-badges {
    margin-bottom: 10px;
  }


  .landing-v3 .landing-game-badges span {
    min-height: 23px;

    padding:
      0
      8px;

    font-size: 6.5px;
  }


  .landing-v3 .landing-content h2 {
    font-size:
      clamp(20px, 6.1vw, 26px);

    letter-spacing: .45px;
  }


  .landing-v3 .landing-description {
    max-width: 315px;

    margin-top: 9px;

    font-size: 10px;

    line-height: 1.5;
  }


  .landing-v3 .landing-buttons {
    margin-top: 14px;
  }


  .landing-v3 .landing-play {
    width: 100%;

    min-height: 47px;

    font-size: 10px;

    letter-spacing: 1.1px;
  }


  .landing-v3 .landing-footer {
    min-height: 66px;

    padding:
      8px
      7px;
  }


  .landing-v3 .landing-footer div {
    padding:
      0
      4px;
  }


  .landing-v3 .landing-footer strong {
    font-size: 8px;
  }


  .landing-v3 .landing-footer span {
    font-size: 6px;

    letter-spacing: .25px;
  }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {

  .landing-v3 .landing-header {
    padding:
      0
      8px;
  }


  .landing-v3 .landing-premium-logo {
    width: 105px;
    min-width: 105px;

    flex-basis: 105px;
  }


  .landing-v3 .landing-premium-logo-image {
    width: 101px;

    max-width: 101px;
  }


  .landing-v3 .landing-signin {
    padding:
      0
      6px;

    font-size: 7px;
  }


  .landing-v3 .landing-create-button {
    padding:
      0
      6px;

    font-size: 7px;
  }


  .landing-v3 .landing-hero {
    padding-left: 10px;
    padding-right: 10px;
  }


  .landing-v3 .landing-content {
    padding:
      14px
      13px
      15px;
  }


  .landing-v3 .landing-description {
    font-size: 9.5px;
  }

}


/* =========================================================
   SHORT PHONE / SAFARI LANDSCAPE-SAFE HEIGHT
========================================================= */

@media (max-width: 980px) and (max-height: 620px) {

  .landing-v3 .landing-hero {
    min-height: 560px;
  }

}


/* =========================================================
   SAFE AREA SUPPORT - iPHONE
========================================================= */

@supports (
  padding:
  max(0px)
) {

  @media (max-width: 980px) {

    .landing-v3 .landing-header {
      padding-left:
        max(16px, env(safe-area-inset-left));

      padding-right:
        max(16px, env(safe-area-inset-right));
    }


    .landing-v3 .landing-footer {
      padding-bottom:
        max(10px, env(safe-area-inset-bottom));
    }

  }


  @media (max-width: 650px) {

    .landing-v3 .landing-header {
      padding-left:
        max(11px, env(safe-area-inset-left));

      padding-right:
        max(11px, env(safe-area-inset-right));
    }


    .landing-v3 .landing-footer {
      padding-bottom:
        max(8px, env(safe-area-inset-bottom));
    }

  }

}



/* =========================================================
   SNOOP POKER TABLE-ONLY ROTATE GATE V1

   Landing  -> portrait allowed
   Login    -> portrait allowed
   Register -> portrait allowed
   Lobby    -> portrait allowed
   Table    -> landscape required on phone
========================================================= */


/*
 * Disable the legacy global portrait gate.
 * The old rule displayed rotateDevice on every phone screen.
 */
.rotate-device {
  display: none !important;
}


/*
 * Only show the orientation gate when the actual poker
 * table view is currently active.
 */
@media (max-width: 760px) and (orientation: portrait) {

  body:has(#tableView:not([hidden])) .rotate-device {
    display: flex !important;
  }

}


/*
 * Landscape always removes the gate.
 */
@media (max-width: 760px) and (orientation: landscape) {

  .rotate-device {
    display: none !important;
  }

}


/* =========================================================
   SNOOP POKER MOBILE LANDING V2

   Portrait phone:
   - dedicated 941x1672 artwork
   - portrait-first composition
   - music + sound accessible
   - compact premium header

   Desktop:
   - untouched
========================================================= */


@media (max-width: 650px) and (orientation: portrait) {

  /* -------------------------------------------------------
     PAGE / ARTWORK
  ------------------------------------------------------- */

  .landing-v3 {
    position: relative;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background-color: #020b08;

    background-image:
      url("/assets/landing/snooppoker-mobile.png");

    background-repeat: no-repeat;

    /*
     * Artwork itself is portrait.
     * Cover fills the phone without stretching it.
     */
    background-size: cover;

    /*
     * Keep the main character / table composition centered.
     */
    background-position: center top;
  }


  .landing-v3 .landing-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 9, 6, .06) 0%,
        rgba(0, 9, 6, .02) 35%,
        rgba(0, 9, 6, .22) 58%,
        rgba(0, 9, 6, .72) 82%,
        rgba(0, 9, 6, .94) 100%
      );
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .landing-v3 .landing-header {
    position: relative;
    z-index: 30;

    width: 100%;
    height: 58px;

    padding:
      0
      10px;

    gap: 5px;

    background:
      linear-gradient(
        180deg,
        rgba(1, 12, 9, .96),
        rgba(1, 12, 9, .84)
      );

    border-bottom:
      1px solid rgba(255,255,255,.055);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }


  .landing-v3 .landing-premium-logo {
    width: 108px;
    height: 48px;
    min-width: 108px;

    flex:
      0
      0
      108px;

    padding: 0;
  }


  .landing-v3 .landing-premium-logo-image {
    display: block;

    width: 104px;
    max-width: 104px;
    height: auto;
  }


  .landing-v3 .landing-header-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    min-width: 0;

    margin-left: auto;

    gap: 4px;
  }


  /*
   * Music starts/controls Poker Jazz.
   */
  .landing-v3 .landing-music {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;

    padding: 0;

    border-radius: 9px;
  }


  .landing-v3 .landing-music > span:first-child {
    display: inline-block;
  }


  .landing-v3 .landing-jazz-label {
    display: none;
  }


  /*
   * IMPORTANT:
   * V1 deliberately hid this control.
   * V2 restores real mute/unmute access.
   */
  .landing-v3 .landing-sound {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;

    padding: 0;

    border-radius: 9px;

    font-size: 13px;
  }


  .landing-v3 .landing-signin {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
      0
      7px;

    font-size: 7px;

    letter-spacing: .55px;

    white-space: nowrap;
  }


  /*
   * Registration remains available without allowing the
   * header to dominate the phone screen.
   */
  .landing-v3 .landing-create-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    padding:
      0
      7px;

    font-size: 7px;

    letter-spacing: .35px;

    white-space: nowrap;
  }


  /* -------------------------------------------------------
     HERO
  ------------------------------------------------------- */

  .landing-v3 .landing-hero {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    width: 100%;

    min-height:
      calc(100svh - 58px);

    padding:
      0
      12px
      82px;
  }


  .landing-v3 .landing-content {
    position: relative;

    left: auto;
    top: auto;

    width: 100%;
    max-width: 380px;

    margin: 0;

    padding:
      15px
      14px
      16px;

    transform: none;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius: 16px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 18, 12, .82),
        rgba(1, 12, 9, .70)
      );

    box-shadow:
      0 18px 50px rgba(0,0,0,.34);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    text-align: center;
  }


  .landing-v3 .landing-game-badges {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;

    margin:
      0
      0
      9px;
  }


  .landing-v3 .landing-game-badges span {
    min-height: 22px;

    padding:
      0
      7px;

    font-size: 6px;

    letter-spacing: .9px;
  }


  .landing-v3 .landing-content h2 {
    margin: 0;

    font-size:
      clamp(21px, 7vw, 28px);

    line-height: 1.04;

    letter-spacing: .35px;
  }


  .landing-v3 .landing-description {
    max-width: 310px;

    margin:
      8px
      auto
      0;

    font-size: 9.5px;

    line-height: 1.45;
  }


  .landing-v3 .landing-buttons {
    width: 100%;

    margin-top: 12px;
  }


  .landing-v3 .landing-play {
    width: 100%;

    min-width: 0;
    min-height: 48px;

    margin: 0;
  }


  /* -------------------------------------------------------
     FOOTER
  ------------------------------------------------------- */

  .landing-v3 .landing-footer {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 20;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    min-height: 66px;

    padding:
      8px
      5px;

    background:
      linear-gradient(
        0deg,
        rgba(1, 11, 8, .98),
        rgba(1, 11, 8, .78)
      );

    border-top:
      1px solid rgba(255,255,255,.055);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }


  .landing-v3 .landing-footer div {
    min-width: 0;

    padding:
      0
      3px;
  }


  .landing-v3 .landing-footer strong {
    font-size: 8px;

    white-space: nowrap;
  }


  .landing-v3 .landing-footer span {
    font-size: 5.8px;

    letter-spacing: .2px;

    white-space: nowrap;
  }

}


/* =========================================================
   EXTRA NARROW PHONE
========================================================= */

@media (max-width: 380px) and (orientation: portrait) {

  .landing-v3 .landing-header {
    padding-left: 7px;
    padding-right: 7px;

    gap: 3px;
  }


  .landing-v3 .landing-premium-logo {
    width: 94px;
    min-width: 94px;

    flex-basis: 94px;
  }


  .landing-v3 .landing-premium-logo-image {
    width: 91px;

    max-width: 91px;
  }


  .landing-v3 .landing-music,
  .landing-v3 .landing-sound {
    width: 29px;
    height: 29px;
    min-width: 29px;
    min-height: 29px;
  }


  .landing-v3 .landing-signin,
  .landing-v3 .landing-create-button {
    min-height: 29px;

    padding:
      0
      5px;

    font-size: 6.2px;
  }


  .landing-v3 .landing-hero {
    padding-left: 9px;
    padding-right: 9px;
  }

}


/* =========================================================
   iPHONE SAFE AREAS - MOBILE LANDING V2
========================================================= */

@supports (
  padding:
  max(0px)
) {

  @media (max-width: 650px) and (orientation: portrait) {

    .landing-v3 .landing-header {
      padding-left:
        max(8px, env(safe-area-inset-left));

      padding-right:
        max(8px, env(safe-area-inset-right));
    }


    .landing-v3 .landing-footer {
      padding-bottom:
        max(8px, env(safe-area-inset-bottom));
    }

  }

}



/* =========================================================
   SNOOP POKER MOBILE PORTRAIT V3 — ARTWORK FIT

   Goal:
   - show more of the dedicated portrait artwork
   - reduce the zoomed/cropped feeling
   - preserve current header / CTA / footer
   - portrait phones only
========================================================= */

@media (max-width: 650px) and (orientation: portrait) {

  /*
   * The source artwork is 941 x 1672.
   *
   * V2 used "cover", which zoomed the artwork until the
   * complete viewport was filled and therefore cropped the
   * sides on many iPhones.
   *
   * V3 sizes from WIDTH instead. This preserves the complete
   * horizontal composition and lets the dark SnoopPoker
   * background continue naturally below the artwork.
   */
  .landing-v3 {
    background-color: #020b08;

    background-image:
      url("/assets/landing/snooppoker-mobile.png");

    background-repeat: no-repeat;

    background-size:
      100% auto;

    background-position:
      center 58px;
  }


  /*
   * Header owns the first 58px.
   * Artwork begins directly underneath it rather than being
   * hidden behind the navigation.
   */
  .landing-v3 .landing-header {
    position: relative;

    z-index: 30;
  }


  /*
   * Give the artwork slightly more visual breathing room
   * before the CTA card.
   */
  .landing-v3 .landing-hero {
    min-height:
      calc(100svh - 58px);

    padding:
      0
      12px
      82px;
  }


  /*
   * Keep the premium card compact so it does not cover too
   * much of the character / table artwork.
   */
  .landing-v3 .landing-content {
    max-width: 370px;

    padding:
      14px
      14px
      15px;
  }


  .landing-v3 .landing-content h2 {
    font-size:
      clamp(20px, 6.6vw, 27px);
  }


  .landing-v3 .landing-description {
    max-width: 300px;

    font-size: 9px;
  }


  /*
   * Footer remains part of the landing experience but stays
   * compact so artwork receives maximum available height.
   */
  .landing-v3 .landing-footer {
    min-height: 62px;

    padding:
      7px
      5px;
  }

}


/* =========================================================
   TALL PHONE PORTRAIT

   On taller modern phones we can show the artwork naturally
   without enlarging it just to fill vertical space.
========================================================= */

@media
  (max-width: 650px)
  and (orientation: portrait)
  and (min-height: 760px) {

  .landing-v3 {
    background-size:
      100% auto;

    background-position:
      center 58px;
  }

}


/* =========================================================
   VERY NARROW PHONE PORTRAIT
========================================================= */

@media
  (max-width: 390px)
  and (orientation: portrait) {

  .landing-v3 .landing-content {
    width: calc(100% - 4px);

    max-width: 350px;
  }

}




/* =========================================================
   SNOOP POKER MOBILE LANDING V4 — NATIVE ARTWORK

   Desktop:
   - unchanged
   - mobile artwork element hidden

   Portrait phone:
   - dedicated artwork is a real IMG
   - complete artwork width preserved
   - no background-cover crop
   - CTA lives in normal document flow
========================================================= */


/* Desktop / default */
.landing-mobile-art {
  display: none;
}


@media (max-width: 650px) and (orientation: portrait) {

  /*
   * IMPORTANT:
   * Stop using the artwork as a CSS background on portrait.
   * The real IMG below now controls its own aspect ratio.
   */
  .landing-v3 {
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: visible;

    background:
      #020b08 !important;
  }


  /*
   * Overlay was designed for background artwork.
   * Mobile IMG no longer needs that global layer.
   */
  .landing-v3 .landing-overlay {
    display: none;
  }


  /*
   * Header stays at the top in normal flow.
   */
  .landing-v3 .landing-header {
    position: relative;

    z-index: 30;

    height: 58px;
  }


  /*
   * Hero becomes a vertical mobile composition.
   *
   * IMAGE
   *   ↓
   * CTA CARD
   *   ↓
   * FOOTER
   */
  .landing-v3 .landing-hero {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    width: 100%;

    min-height: 0;

    padding: 0 0 74px;

    overflow: visible;
  }


  /*
   * REAL PORTRAIT ARTWORK
   *
   * 941 × 1672 source ratio remains intact.
   * width:100% + height:auto means the browser cannot
   * horizontally crop the character.
   */
  .landing-v3 .landing-mobile-art {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    line-height: 0;

    overflow: hidden;

    background: #020b08;
  }


  .landing-v3 .landing-mobile-art img {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center top;
  }


  /*
   * CTA is no longer positioned over the character.
   *
   * Small negative margin gives us a premium layered look,
   * but only overlaps the very bottom of the artwork.
   */
  .landing-v3 .landing-content {
    position: relative;

    z-index: 10;

    left: auto;
    top: auto;

    width:
      calc(100% - 24px);

    max-width: 390px;

    margin:
      -74px
      auto
      0;

    padding:
      14px
      14px
      15px;

    transform: none;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius: 16px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 18, 12, .96),
        rgba(1, 12, 9, .93)
      );

    box-shadow:
      0 18px 50px rgba(0,0,0,.42);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    text-align: center;
  }


  .landing-v3 .landing-game-badges {
    margin-bottom: 9px;
  }


  .landing-v3 .landing-content h2 {
    margin-top: 0;

    font-size:
      clamp(20px, 6.6vw, 27px);

    line-height: 1.04;
  }


  .landing-v3 .landing-description {
    max-width: 310px;

    margin:
      8px
      auto
      0;

    font-size: 9.5px;

    line-height: 1.45;
  }


  .landing-v3 .landing-buttons {
    width: 100%;

    margin-top: 12px;
  }


  .landing-v3 .landing-play {
    width: 100%;

    min-width: 0;
    min-height: 48px;

    margin: 0;
  }


  /*
   * Footer remains available at the bottom but no longer
   * covers the artwork/CTA composition.
   */
  .landing-v3 .landing-footer {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    z-index: 20;

    width: 100%;

    margin-top: 0;
  }

}


/*
 * Small phones receive slightly less card overlap.
 */
@media (max-width: 390px) and (orientation: portrait) {

  .landing-v3 .landing-content {
    width:
      calc(100% - 20px);

    margin-top: -58px;
  }

}




/* =========================================================
   SNOOP POKER MOBILE LANDING V5 — COMPACT COMPOSITION

   Goals:
   - keep the character visible
   - preserve the portrait artwork
   - bring CTA into the first-screen composition
   - remove excessive empty space
   - keep footer directly below CTA
   - portrait phones only

   V4 native <img> foundation is preserved.
========================================================= */


@media (max-width: 650px) and (orientation: portrait) {

  /* -------------------------------------------------------
     PAGE
  ------------------------------------------------------- */

  .landing-v3 {
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: auto;

    background: #020b08 !important;
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .landing-v3 .landing-header {
    position: relative;

    z-index: 30;

    height: 58px;
    min-height: 58px;

    flex: 0 0 58px;
  }


  /* -------------------------------------------------------
     HERO

     V4 let the full 941x1672 image determine the page
     height. That preserved everything, but made the landing
     unnecessarily tall.

     V5 gives the artwork its own visual stage.
  ------------------------------------------------------- */

  .landing-v3 .landing-hero {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    width: 100%;

    min-height: 0;

    padding: 0;

    overflow: visible;
  }


  /* -------------------------------------------------------
     ARTWORK STAGE

     The source image stays a real <img>.

     We are NOT using object-fit: cover.

     Instead the image is width-driven and the stage clips
     only the lower poker-table continuation — not the
     character.

     This is intentional:
     character / chair / whiskey / city remain visible,
     while the very long lower-table portion becomes the
     transition underneath the CTA.
  ------------------------------------------------------- */

  .landing-v3 .landing-mobile-art {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;

    height:
      clamp(520px, 126vw, 610px);

    margin: 0;

    overflow: hidden;

    background: #020b08;

    line-height: 0;
  }


  .landing-v3 .landing-mobile-art::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 125px;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(2, 11, 8, 0) 0%,
        rgba(2, 11, 8, .12) 35%,
        rgba(2, 11, 8, .72) 82%,
        #020b08 100%
      );
  }


  .landing-v3 .landing-mobile-art img {
    display: block;

    width: 100%;
    max-width: none;

    height: auto;

    margin: 0;

    object-fit: contain;
    object-position: center top;
  }


  /* -------------------------------------------------------
     CTA CARD

     Pull the CTA upward over the LOWER TABLE AREA.

     We deliberately do not pull it over the character.
  ------------------------------------------------------- */

  .landing-v3 .landing-content {
    position: relative;

    z-index: 10;

    left: auto;
    top: auto;

    width:
      calc(100% - 24px);

    max-width: 390px;

    margin:
      -92px
      auto
      0;

    padding:
      13px
      14px
      14px;

    transform: none;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius: 16px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 18, 12, .97),
        rgba(1, 12, 9, .94)
      );

    box-shadow:
      0 18px 50px rgba(0,0,0,.42);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    text-align: center;
  }


  .landing-v3 .landing-game-badges {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    margin:
      0
      0
      8px;
  }


  .landing-v3 .landing-content h2 {
    margin: 0;

    font-size:
      clamp(20px, 6.4vw, 27px);

    line-height: 1.03;

    letter-spacing: .25px;
  }


  .landing-v3 .landing-description {
    max-width: 315px;

    margin:
      7px
      auto
      0;

    font-size: 9.5px;

    line-height: 1.4;
  }


  .landing-v3 .landing-buttons {
    width: 100%;

    margin-top: 11px;
  }


  .landing-v3 .landing-play {
    width: 100%;

    min-width: 0;
    min-height: 48px;

    margin: 0;
  }


  /* -------------------------------------------------------
     FOOTER

     V4 inherited spacing from earlier mobile versions.
     Reset it completely so there is no giant dark hole
     between CTA and footer.
  ------------------------------------------------------- */

  .landing-v3 .landing-footer {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    z-index: 20;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    min-height: 64px;

    margin:
      14px
      0
      0;

    padding:
      10px
      5px;

    background:
      linear-gradient(
        0deg,
        rgba(1, 11, 8, .99),
        rgba(1, 11, 8, .90)
      );

    border-top:
      1px solid rgba(255,255,255,.055);
  }

}


/* =========================================================
   SMALL iPHONE TUNING
========================================================= */

@media (max-width: 390px) and (orientation: portrait) {

  .landing-v3 .landing-mobile-art {
    height:
      clamp(500px, 128vw, 555px);
  }


  .landing-v3 .landing-content {
    width:
      calc(100% - 20px);

    margin-top: -82px;

    padding:
      12px
      12px
      13px;
  }


  .landing-v3 .landing-content h2 {
    font-size:
      clamp(20px, 6.3vw, 25px);
  }

}


/* =========================================================
   SHORT PORTRAIT PHONE

   Helps Safari devices where browser chrome leaves a
   particularly short visual viewport.
========================================================= */

@media
  (max-width: 650px)
  and (orientation: portrait)
  and (max-height: 750px) {

  .landing-v3 .landing-mobile-art {
    height:
      clamp(470px, 118vw, 540px);
  }


  .landing-v3 .landing-content {
    margin-top: -88px;
  }

}




/* =========================================================
   SNOOP POKER MOBILE LANDING V5 — COMPACT CINEMATIC

   Portrait phones only.

   Goals:
   - preserve full-width portrait artwork
   - no cover crop
   - character remains visible
   - remove oversized mobile CTA card feeling
   - compact PLAY POKER bar
   - reduce unnecessary vertical empty space
   - keep desktop completely untouched
========================================================= */

@media (max-width: 650px) and (orientation: portrait) {

  /* -------------------------------------------------------
     PAGE
  ------------------------------------------------------- */

  .landing-v3 {
    width: 100%;
    min-height: 100svh;

    overflow-x: hidden;
    overflow-y: visible;

    background: #020b08 !important;
  }


  .landing-v3 .landing-overlay {
    display: none !important;
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .landing-v3 .landing-header {
    position: relative;
    z-index: 40;

    height: 58px;

    background:
      linear-gradient(
        180deg,
        rgba(1, 13, 10, .99),
        rgba(1, 12, 9, .96)
      );

    border-bottom:
      1px solid rgba(255,255,255,.055);
  }


  /* -------------------------------------------------------
     HERO

     V4 correctly changed the portrait artwork into a real
     IMG. V5 keeps that architecture.

     Do NOT use background-cover here.
  ------------------------------------------------------- */

  .landing-v3 .landing-hero {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    width: 100%;

    min-height: 0 !important;

    padding: 0 !important;

    overflow: visible;
  }


  /* -------------------------------------------------------
     REAL PORTRAIT ARTWORK
  ------------------------------------------------------- */

  .landing-v3 .landing-mobile-art {
    position: relative;

    display: block !important;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    line-height: 0;

    background: #020b08;
  }


  .landing-v3 .landing-mobile-art img {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    margin: 0;

    object-fit: contain;

    object-position: center top;
  }


  /* -------------------------------------------------------
     CTA CARD

     The old mobile version behaves like a second giant hero.
     V5 converts it into a compact action area and slightly
     overlaps the bottom of the artwork.
  ------------------------------------------------------- */

  .landing-v3 .landing-content {
    position: relative !important;

    left: auto !important;
    top: auto !important;

    z-index: 25;

    width:
      calc(100% - 32px);

    max-width: 620px;

    margin:
      -112px
      auto
      0 !important;

    padding:
      12px
      12px
      13px !important;

    transform: none !important;

    border:
      1px solid rgba(68, 230, 185, .16);

    border-radius: 17px;

    background:
      linear-gradient(
        145deg,
        rgba(1, 20, 14, .96),
        rgba(1, 13, 10, .94)
      );

    box-shadow:
      0 18px 42px rgba(0,0,0,.38);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    text-align: center;
  }


  /* -------------------------------------------------------
     BADGES
  ------------------------------------------------------- */

  .landing-v3 .landing-game-badges {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 6px;

    margin:
      0
      0
      9px;
  }


  .landing-v3 .landing-game-badges span {
    min-height: 22px;

    padding:
      0
      8px;

    font-size: 6px;

    letter-spacing: 1px;
  }


  /* -------------------------------------------------------
     MOBILE:
     remove the large marketing headline/description.

     Header + artwork already tell the story.
     The primary mobile job is PLAY.
  ------------------------------------------------------- */

  .landing-v3 .landing-content h2,
  .landing-v3 .landing-description {
    display: none !important;
  }


  /* -------------------------------------------------------
     PLAY BUTTON
  ------------------------------------------------------- */

  .landing-v3 .landing-buttons {
    width: 100%;

    margin: 0 !important;
  }


  .landing-v3 .landing-play {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-width: 0;
    min-height: 58px;

    margin: 0 !important;

    border-radius: 13px;
  }


  .landing-v3 .landing-play-main {
    font-size: 17px;

    letter-spacing: 1.2px;
  }


  .landing-v3 .landing-play-sub {
    font-size: 7px;

    letter-spacing: 2px;
  }


  /* -------------------------------------------------------
     FOOTER / FEATURE STRIP

     Put it directly after CTA instead of leaving a large
     dead dark section.
  ------------------------------------------------------- */

  .landing-v3 .landing-footer {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 20;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    min-height: 66px;

    margin:
      0
      0
      0;

    padding:
      10px
      5px
      max(10px, env(safe-area-inset-bottom));

    background:
      linear-gradient(
        180deg,
        rgba(1, 15, 11, .98),
        rgba(1, 10, 8, 1)
      );

    border-top:
      1px solid rgba(255,255,255,.05);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }


  .landing-v3 .landing-footer div {
    min-width: 0;

    padding:
      0
      3px;
  }


  .landing-v3 .landing-footer strong {
    font-size: 8px;

    white-space: nowrap;
  }


  .landing-v3 .landing-footer span {
    font-size: 5.5px;

    white-space: nowrap;
  }

}


/* =========================================================
   SMALL PHONE V5
========================================================= */

@media (max-width: 390px) and (orientation: portrait) {

  .landing-v3 .landing-content {
    width:
      calc(100% - 24px);

    margin-top:
      -92px !important;

    padding:
      10px
      10px
      11px !important;
  }


  .landing-v3 .landing-play {
    min-height: 54px;
  }


  .landing-v3 .landing-play-main {
    font-size: 15px;
  }

}




/* =========================================================
   SNOOP POKER MOBILE LANDING FINAL V1

   Portrait phone only.

   Architecture:
   - viewport-driven mobile landing
   - no long empty section
   - artwork preserves aspect ratio
   - character remains visible
   - compact floating CTA
   - footer stays directly below composition
   - desktop untouched
========================================================= */

@media (max-width: 650px) and (orientation: portrait) {

  html,
  body {
    width: 100%;
    max-width: 100%;

    overflow-x: hidden;
  }


  /* -------------------------------------------------------
     COMPLETE LANDING
  ------------------------------------------------------- */

  .landing-v3 {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;

    min-height: 100svh;
    min-height: 100dvh;

    overflow-x: hidden;
    overflow-y: hidden;

    background: #020b08 !important;
  }


  .landing-v3 .landing-overlay {
    display: none !important;
  }


  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  .landing-v3 .landing-header {
    position: relative;

    z-index: 50;

    flex:
      0
      0
      58px;

    width: 100%;
    height: 58px;

    background:
      linear-gradient(
        180deg,
        rgba(1, 13, 10, 1),
        rgba(1, 12, 9, .98)
      );
  }


  /* -------------------------------------------------------
     HERO

     This area owns everything between header and footer.
  ------------------------------------------------------- */

  .landing-v3 .landing-hero {
    position: relative !important;

    display: block !important;

    flex:
      1
      1
      auto;

    width: 100%;

    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    background: #020b08;
  }


  /* -------------------------------------------------------
     ARTWORK STAGE

     The IMG is NOT cover-cropped.

     It gets the available hero area and preserves its
     original aspect ratio.
  ------------------------------------------------------- */

  .landing-v3 .landing-mobile-art {
    position: absolute !important;

    inset:
      0
      0
      0
      0;

    display: flex !important;

    align-items: flex-start;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    background: #020b08;
  }


  .landing-v3 .landing-mobile-art img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none !important;

    margin: 0;

    object-fit: contain !important;

    object-position:
      center
      top !important;
  }


  /*
   * Soft fade at the bottom lets the CTA sit over the
   * artwork without looking like a separate page section.
   */
  .landing-v3 .landing-mobile-art::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 31%;

    pointer-events: none;

    background:
      linear-gradient(
        180deg,
        rgba(2,11,8,0),
        rgba(2,11,8,.28) 40%,
        rgba(2,11,8,.88) 100%
      );
  }


  /* -------------------------------------------------------
     CTA

     Overlay instead of document-flow block.
     Therefore it cannot create a long page.
  ------------------------------------------------------- */

  .landing-v3 .landing-content {
    position: absolute !important;

    left: 16px !important;
    right: 16px !important;

    top: auto !important;
    bottom: 16px !important;

    z-index: 30;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      10px
      10px
      11px !important;

    transform: none !important;

    border:
      1px solid rgba(68,230,185,.17);

    border-radius: 16px;

    background:
      linear-gradient(
        145deg,
        rgba(1,20,14,.94),
        rgba(1,13,10,.91)
      );

    box-shadow:
      0
      16px
      38px
      rgba(0,0,0,.40);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }


  /* Mobile doesn't need duplicate marketing copy. */

  .landing-v3 .landing-content h2,
  .landing-v3 .landing-description,
  .landing-v3 .landing-hero-brand,
  .landing-v3 .landing-secondary {
    display: none !important;
  }


  /*
   * The footer already says PLAY CHIPS ONLY.
   * Remove duplicate badges to give the artwork more room.
   */
  .landing-v3 .landing-game-badges {
    display: none !important;
  }


  .landing-v3 .landing-buttons {
    width: 100%;

    margin: 0 !important;
  }


  .landing-v3 .landing-play {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-width: 0;
    min-height: 58px;

    margin: 0 !important;

    border-radius: 13px;
  }


  .landing-v3 .landing-play-main {
    font-size: 17px;

    letter-spacing: 1.2px;
  }


  .landing-v3 .landing-play-sub {
    font-size: 7px;

    letter-spacing: 2px;
  }


  /* -------------------------------------------------------
     FOOTER

     Fixed part of the flex composition.
     No dead black space underneath it.
  ------------------------------------------------------- */

  .landing-v3 .landing-footer {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 40;

    flex:
      0
      0
      auto;

    display: grid;

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    width: 100%;

    min-height: 66px;

    margin: 0 !important;

    padding:
      9px
      5px
      max(9px, env(safe-area-inset-bottom));

    background:
      linear-gradient(
        180deg,
        rgba(1,15,11,.99),
        rgba(1,10,8,1)
      );

    border-top:
      1px solid rgba(255,255,255,.05);
  }


  .landing-v3 .landing-footer div {
    min-width: 0;

    padding:
      0
      3px;
  }


  .landing-v3 .landing-footer strong {
    font-size: 8px;

    white-space: nowrap;
  }


  .landing-v3 .landing-footer span {
    font-size: 5.5px;

    white-space: nowrap;
  }

}


/* =========================================================
   SHORT iPHONE FINAL
========================================================= */

@media
  (max-width: 650px)
  and (orientation: portrait)
  and (max-height: 760px) {

  .landing-v3 .landing-header {
    flex-basis: 54px;

    height: 54px;
  }


  .landing-v3 .landing-content {
    left: 12px !important;
    right: 12px !important;

    bottom: 10px !important;

    padding:
      8px !important;
  }


  .landing-v3 .landing-play {
    min-height: 52px;
  }


  .landing-v3 .landing-footer {
    min-height: 58px;

    padding-top: 6px;
    padding-bottom:
      max(6px, env(safe-area-inset-bottom));
  }

}




/* =========================================================
   SNOOP POKER MOBILE ART EDGE FILL V1

   Portrait phone only.

   Main artwork:
   - remains contain
   - remains completely visible
   - no character crop

   Side gaps:
   - filled with enlarged blurred copy of same artwork
   - darkened so main artwork remains dominant
========================================================= */

@media (max-width: 650px) and (orientation: portrait) {

  .landing-v3 .landing-mobile-art {
    isolation: isolate;

    background: #020b08;
  }


  /*
   * Ambient enlarged copy behind the real artwork.
   * This fills the narrow side columns without changing
   * the geometry of the foreground image.
   */
  .landing-v3 .landing-mobile-art::before {
    content: "";

    position: absolute;

    inset: -22px;

    z-index: -2;

    background-image:
      linear-gradient(
        rgba(1, 10, 7, .36),
        rgba(1, 10, 7, .36)
      ),
      url("/assets/landing/snooppoker-mobile.png");

    background-repeat:
      no-repeat,
      no-repeat;

    background-position:
      center center,
      center center;

    background-size:
      cover,
      cover;

    filter:
      blur(15px)
      brightness(.62)
      saturate(.82);

    transform: scale(1.08);

    pointer-events: none;
  }


  /*
   * Keep the real image above the ambient background.
   */
  .landing-v3 .landing-mobile-art img {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    object-fit: contain !important;

    object-position:
      center
      top !important;
  }


  /*
   * Existing bottom fade stays above both artwork layers.
   */
  .landing-v3 .landing-mobile-art::after {
    z-index: 2;
  }

}




/* =========================================================
   SNOOP POKER MOBILE ART OVERSCAN V1

   Portrait phone only.

   Goal:
   - remove visible side columns
   - preserve artwork proportions
   - controlled 108% horizontal overscan
   - keep character / CTA / footer unchanged
========================================================= */

@media (max-width: 650px) and (orientation: portrait) {

  /*
   * The artwork container clips only the tiny overscan.
   */
  .landing-v3 .landing-mobile-art {
    overflow: hidden;

    width: 100%;
  }


  /*
   * Slight controlled enlargement.
   *
   * 108% means only ~4% is lost from each side.
   * This removes the poster-like side gutters without
   * returning to background-size: cover.
   */
  .landing-v3 .landing-mobile-art > img {
    display: block;

    width: 108% !important;
    max-width: none !important;
    height: auto !important;

    margin-left: -4%;

    object-fit: unset !important;

    transform: none !important;
  }


  /*
   * Ambient blur is no longer visually necessary.
   * Keep it disabled so there is one continuous artwork.
   */
  .landing-v3 .landing-mobile-art::before,
  .landing-v3 .landing-mobile-art::after {
    display: none !important;
  }

}

/* =========================================================
   SNOOP POKER LANDSCAPE MASTER V4

   ONE authoritative landscape layout.

   Scope:
   - <= 980px
   - landscape
   - <= 620px height

   Rules:
   - portrait untouched
   - desktop untouched
   - no document scroll
   - footer always visible
   - artwork never cropped
   - source aspect ratio preserved
   - Safari short-height aware
========================================================= */

.landing-landscape-art {
  display: none;
}


@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  html,
  body {
    width: 100% !important;

    height:
      var(--snoop-lvh, 100dvh) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overscroll-behavior: none !important;

    background: #020b08 !important;
  }


  body {
    position: fixed !important;
    inset: 0 !important;
  }


  /* ================= PAGE ================= */

  .landing-v3 {
    position: fixed !important;

    inset: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      var(--snoop-header-h, 42px)
      minmax(0, 1fr)
      var(--snoop-footer-h, 44px) !important;

    width: 100% !important;

    height:
      var(--snoop-lvh, 100dvh) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
    background-image: none !important;
  }


  /* ================= HEADER ================= */

  .landing-v3 .landing-header {
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    z-index: 50 !important;

    width: 100% !important;

    height:
      var(--snoop-header-h, 42px) !important;

    min-height:
      var(--snoop-header-h, 42px) !important;

    max-height:
      var(--snoop-header-h, 42px) !important;

    margin: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    flex: none !important;
  }


  /* ================= HERO ================= */

  .landing-v3 .landing-hero {
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 2 !important;

    z-index: 1 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
    background-image: none !important;
  }


  .landing-v3 .landing-overlay,
  .landing-v3 .landing-mobile-art {
    display: none !important;
  }


  /* ================= ART ================= */

  .landing-v3 .landing-landscape-art {
    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    background: #020b08 !important;
  }


  /*
   * Real source image.
   *
   * Height drives the scale on very short Safari screens.
   * Width is allowed up to the viewport.
   *
   * contain guarantees ZERO crop.
   */
  .landing-v3 .landing-landscape-art > img {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    transform:
      translate(-50%, -50%) !important;
  }


  /*
   * Fill unused side area without changing/cropping
   * the authoritative foreground artwork.
   */
  .landing-v3 .landing-landscape-art::before {
    content: "" !important;

    position: absolute !important;
    inset: -24px !important;

    display: block !important;

    z-index: -1 !important;

    background-image:
      url("/assets/landing/snoop-final-bg.png") !important;

    background-position:
      center center !important;

    background-repeat:
      no-repeat !important;

    background-size:
      cover !important;

    filter:
      blur(18px)
      brightness(.38) !important;

    transform:
      scale(1.06) !important;

    opacity: .82 !important;
  }


  .landing-v3 .landing-landscape-art::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    z-index: 0 !important;

    background:
      linear-gradient(
        90deg,
        rgba(2,11,8,.38) 0%,
        rgba(2,11,8,0) 18%,
        rgba(2,11,8,0) 82%,
        rgba(2,11,8,.38) 100%
      ) !important;

    pointer-events: none !important;
  }


  .landing-v3 .landing-landscape-art > img {
    z-index: 1 !important;
  }


  /* ================= CTA ================= */

  .landing-v3 .landing-content {
    position: absolute !important;

    z-index: 20 !important;

    left: auto !important;

    right:
      max(
        var(--snoop-cta-right, 8px),
        env(safe-area-inset-right)
      ) !important;

    top: 50% !important;
    bottom: auto !important;

    width:
      min(
        var(--snoop-cta-w, 40vw),
        420px
      ) !important;

    max-width: 420px !important;

    max-height:
      calc(100% - 8px) !important;

    margin: 0 !important;

    padding:
      var(--snoop-cta-py, 7px)
      var(--snoop-cta-px, 9px) !important;

    box-sizing: border-box !important;

    transform:
      translateY(-50%) !important;

    overflow: hidden !important;
  }


  .landing-v3 .landing-description,
  .landing-v3 .landing-hero-brand,
  .landing-v3 .landing-secondary {
    display: none !important;
  }


  .landing-v3 .landing-game-badges {
    margin:
      0
      0
      var(--snoop-badge-gap, 3px) !important;
  }


  .landing-v3 .landing-content h2 {
    margin:
      var(--snoop-title-mt, 2px)
      0
      var(--snoop-title-mb, 4px) !important;

    font-size:
      var(
        --snoop-title-size,
        clamp(15px, 2.5vw, 24px)
      ) !important;

    line-height: 1.02 !important;
  }


  .landing-v3 .landing-buttons {
    width: 100% !important;

    margin:
      var(--snoop-buttons-mt, 3px)
      0
      0 !important;
  }


  .landing-v3 .landing-play {
    width: 100% !important;

    min-width: 0 !important;

    min-height:
      var(--snoop-play-h, 42px) !important;

    margin: 0 !important;
  }


  /* ================= FOOTER ================= */

  .landing-v3 .landing-footer {
    position: relative !important;

    grid-column: 1 !important;
    grid-row: 3 !important;

    z-index: 100 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    align-items: center !important;

    width: 100% !important;

    height:
      var(--snoop-footer-h, 44px) !important;

    min-height:
      var(--snoop-footer-h, 44px) !important;

    max-height:
      var(--snoop-footer-h, 44px) !important;

    margin: 0 !important;

    padding:
      2px
      max(12px, env(safe-area-inset-right))
      max(2px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left))
      !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background:
      linear-gradient(
        180deg,
        rgba(1,15,11,.99),
        rgba(1,9,7,1)
      ) !important;

    border-top:
      1px solid rgba(255,255,255,.06) !important;
  }


  .landing-v3 .landing-footer > div:nth-child(n+4) {
    display: none !important;
  }


  .landing-v3 .landing-footer > div:nth-child(-n+3) {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 3px !important;
  }


  .landing-v3 .landing-footer strong {
    display: block !important;

    font-size:
      clamp(7px, 1.25vw, 10px) !important;

    line-height: 1.05 !important;

    white-space: nowrap !important;
  }


  .landing-v3 .landing-footer span {
    display: block !important;

    margin-top: 2px !important;

    font-size:
      clamp(5px, .8vw, 6.5px) !important;

    line-height: 1 !important;

    white-space: nowrap !important;
  }

}


/* =========================================================
   <= 330px — iPhone 13 Safari short landscape
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 330px) {

  :root {
    --snoop-header-h: 38px;
    --snoop-footer-h: 40px;

    --snoop-cta-w: 37vw;
    --snoop-cta-right: 6px;

    --snoop-cta-py: 4px;
    --snoop-cta-px: 7px;

    --snoop-title-size:
      clamp(12px, 2.15vw, 17px);

    --snoop-title-mt: 1px;
    --snoop-title-mb: 2px;

    --snoop-badge-gap: 1px;
    --snoop-buttons-mt: 2px;

    --snoop-play-h: 34px;
  }

}


/* =========================================================
   331px — 390px
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (min-height: 331px)
  and (max-height: 390px) {

  :root {
    --snoop-header-h: 40px;
    --snoop-footer-h: 42px;

    --snoop-cta-w: 39vw;

    --snoop-cta-py: 5px;
    --snoop-cta-px: 8px;

    --snoop-title-size:
      clamp(14px, 2.35vw, 20px);

    --snoop-play-h: 38px;
  }

}


/* =========================================================
   391px — 620px
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (min-height: 391px)
  and (max-height: 620px) {

  :root {
    --snoop-header-h: 44px;
    --snoop-footer-h: 44px;

    --snoop-cta-w: 40vw;

    --snoop-cta-py: 7px;
    --snoop-cta-px: 10px;

    --snoop-title-size:
      clamp(16px, 2.6vw, 26px);

    --snoop-play-h: 44px;
  }

}


/* =========================================================
   SNOOP POKER LANDSCAPE MASTER V5 OVERRIDE

   Goal:
   - Safari landscape
   - header always visible
   - footer always visible
   - no document scroll
   - remove huge side gaps from V4 contain mode
   - artwork fills available WIDTH
   - crop only vertically inside hero when necessary
   - CTA remains on right
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  /*
   * Keep V4 viewport architecture.
   * Header + hero + footer must stay inside --snoop-lvh.
   */
  .landing-v3 {
    grid-template-rows:
      var(--snoop-header-h, 42px)
      minmax(0, 1fr)
      var(--snoop-footer-h, 44px) !important;

    overflow: hidden !important;
  }


  /* =====================================================
     HERO
  ===================================================== */

  .landing-v3 .landing-hero {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
  }


  /* =====================================================
     LANDSCAPE ART CONTAINER
  ===================================================== */

  .landing-v3 .landing-landscape-art {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: #020b08 !important;
  }


  /*
   * IMPORTANT:
   *
   * V4 used:
   * width:100%;
   * height:100%;
   * object-fit:contain;
   *
   * On iPhone 13:
   * hero ~= 750 x 221.
   *
   * The 1672x941 source therefore became only ~393px wide.
   *
   * V5 instead scales the REAL IMG from viewport WIDTH.
   *
   * Source ratio remains untouched.
   * No horizontal crop.
   * Excess source height is clipped by hero only.
   */
  .landing-v3 .landing-landscape-art > img {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    min-width: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: initial !important;
    object-position: initial !important;

    transform:
      translate(-50%, -50%) !important;
  }


  /*
   * V4 blurred side filler is no longer required because
   * foreground artwork now reaches both horizontal edges.
   */
  .landing-v3 .landing-landscape-art::before,
  .landing-v3 .landing-landscape-art::after {
    display: none !important;
    content: none !important;
  }


  /* =====================================================
     CTA
  ===================================================== */

  .landing-v3 .landing-content {
    z-index: 20 !important;

    right:
      max(
        var(--snoop-cta-right, 8px),
        env(safe-area-inset-right)
      ) !important;

    top: 50% !important;

    transform:
      translateY(-50%) !important;
  }


  /* =====================================================
     FOOTER

     Keep it above artwork and inside the viewport.
  ===================================================== */

  .landing-v3 .landing-footer {
    position: relative !important;

    z-index: 50 !important;

    grid-column: 1 !important;
    grid-row: 3 !important;

    width: 100% !important;

    height:
      var(--snoop-footer-h, 44px) !important;

    min-height:
      var(--snoop-footer-h, 44px) !important;

    max-height:
      var(--snoop-footer-h, 44px) !important;

    margin: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
  }

}


/*
 * Extra-short Safari landscape.
 *
 * Preserve more useful image content by biasing the
 * vertical crop slightly upward.
 */
@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 350px) {

  .landing-v3 .landing-landscape-art > img {
    top: 47% !important;
  }

}


/* =========================================================
   SNOOP POKER LANDSCAPE V5.3
   MICRO ARTWORK FRAME

   Based on V5.2 GOOD TABLE.

   ONLY CHANGE:
   Move artwork 10px downward.

   DO NOT CHANGE:
   - artwork scale
   - artwork width
   - hero height
   - landing position
   - header
   - footer
   - CTA
   - viewport controller
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  .landing-v3 .landing-landscape-art > img {
    transform:
      translate(-50%, calc(-50% + 10px)) !important;
  }

}


/* =========================================================
   SNOOP POKER V5.4
   DESKTOP / LAPTOP TABLE FOCUS

   IMPORTANT:
   - MOBILE V5.3 UNTOUCHED
   - landscape mobile untouched
   - portrait mobile untouched
   - artwork scale untouched
   - artwork width untouched
   - CTA untouched
   - header untouched

   Desktop only:
   Raise the full-width artwork slightly so more of the
   poker table is visible on laptop screens.
========================================================= */

@media (min-width: 981px) {

  .landing-v3 {
    /*
     * Previous final desktop rule:
     * background-position: center 72px;
     *
     * Move artwork upward by 32px.
     * 72px -> 40px
     *
     * This exposes more of the lower poker-table area
     * without changing artwork scale or aspect ratio.
     */
    background-position:
      center 40px !important;
  }

}


/*
 * Short laptop screens need slightly more table.
 * Examples: 1366x768, 1440x800-ish browser viewports.
 */
@media
  (min-width: 981px)
  and (max-height: 820px) {

  .landing-v3 {
    background-position:
      center 24px !important;
  }

}


/* =========================================================
   SNOOP POKER V5.9
   TRUE DESKTOP ARTWORK FRAME

   BASE: CLEAN V5.4

   Desktop only.

   PRINCIPLE:
   - artwork stays 100% browser width
   - original 1672x941 ratio preserved
   - complete artwork gets enough vertical space
   - top poster / handwriting preserved
   - poker table preserved
   - footer stays in normal document flow
   - mobile <=980px untouched
========================================================= */

@media (min-width: 981px) {

  /*
   * The artwork itself belongs to the HERO.
   *
   * At 100vw width its natural displayed height is:
   *
   *   100vw × 941 / 1672
   *
   * Therefore give the hero exactly that geometry.
   */
  .landing-v3 .landing-hero {
    position: relative !important;

    width: 100% !important;

    height:
      calc(100vw * 941 / 1672) !important;

    min-height:
      calc(100vw * 941 / 1672) !important;

    overflow: hidden !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  /*
   * IMPORTANT:
   * Put desktop artwork on HERO rather than LANDING.
   *
   * This means header no longer consumes/crops part
   * of the artwork's vertical composition.
   */
  .landing-v3 {
    background-image: none !important;

    min-height: 0 !important;
    height: auto !important;

    overflow: visible !important;

    background-color: #020b08 !important;
  }


  .landing-v3 .landing-hero {
    background-color: #020b08 !important;

    background-image:
      url("/assets/landing/snoop-final-bg.png") !important;

    background-repeat:
      no-repeat !important;

    background-size:
      100% auto !important;

    background-position:
      center top !important;
  }


  /*
   * Landscape IMG is for <=980px mobile landscape.
   * Desktop uses the HERO background above.
   */
  .landing-v3 .landing-landscape-art {
    display: none !important;
  }


  /*
   * Keep CTA relative to the artwork itself.
   */
  .landing-v3 .landing-content {
    left: 50% !important;
    top: 43% !important;

    transform:
      translate(-50%, -50%) !important;
  }


  /*
   * Footer MUST NOT overlay/crop the artwork.
   * It follows the completed hero naturally.
   */
  .landing-v3 .landing-footer {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;

    margin: 0 !important;

    z-index: 30 !important;
  }

}


/*
 * Small desktop CTA adjustment only.
 * Artwork geometry remains identical.
 */
@media
  (min-width: 981px)
  and (max-width: 1200px) {

  .landing-v3 .landing-content {
    left: 51% !important;
    top: 43% !important;
  }

}


/*
 * Wide desktop CTA adjustment only.
 */
@media (min-width: 1500px) {

  .landing-v3 .landing-content {
    left: 48.5% !important;
    top: 43% !important;
  }

}

/* =========================================================
   SNOOP POKER FINAL DESKTOP
   VIEWPORT FIT - SINGLE SOURCE OF TRUTH

   DESKTOP >= 981px

   RESULT:
   - header visible
   - artwork fills complete browser width
   - no side bars
   - no crop
   - table visible
   - footer visible
   - everything fits in one viewport
   - mobile untouched
========================================================= */

@media (min-width: 981px) {

  html,
  body {
    overflow-x: hidden !important;
  }


  /* ==============================================
     COMPLETE LANDING = EXACTLY ONE VIEWPORT
  ============================================== */

  .landing-v3 {
    position: relative !important;

    display: grid !important;

    grid-template-rows:
      76px
      minmax(0, 1fr)
      64px !important;

    width: 100% !important;

    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
  }


  /* ==============================================
     HEADER
  ============================================== */

  .landing-v3 .landing-header {
    position: relative !important;

    grid-row: 1 !important;

    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;

    margin: 0 !important;

    z-index: 100 !important;
  }


  /* ==============================================
     HERO = ALL SPACE BETWEEN HEADER + FOOTER
  ============================================== */

  .landing-v3 .landing-hero {
    position: relative !important;

    grid-row: 2 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #020b08 !important;
    background-image: none !important;
  }


  /* ==============================================
     LANDSCAPE ART FRAME
  ============================================== */

  .landing-v3 .landing-landscape-art {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 1 !important;

    background: none !important;

    pointer-events: none !important;
  }


  /*
   * IMPORTANT:
   *
   * Fill BOTH available dimensions.
   *
   * This intentionally allows a small amount of
   * non-uniform scaling on desktop.
   *
   * That is what makes these four things possible
   * simultaneously:
   *
   * 1. no side bars
   * 2. no crop
   * 3. complete table visible
   * 4. header + footer visible in one viewport
   */
  .landing-v3 .landing-landscape-art > img {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: fill !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    z-index: 1 !important;
  }


  .landing-v3 .landing-landscape-art::before,
  .landing-v3 .landing-landscape-art::after {
    content: none !important;
    display: none !important;
  }


  /* ==============================================
     CTA
  ============================================== */

  .landing-v3 .landing-content {
    position: absolute !important;

    left: 52% !important;
    top: 45% !important;

    right: auto !important;
    bottom: auto !important;

    transform:
      translate(-50%, -50%) !important;

    z-index: 20 !important;
  }


  /* ==============================================
     FOOTER
     NORMAL GRID ROW - NOT FIXED
  ============================================== */

  .landing-v3 .landing-footer {
    position: relative !important;

    grid-row: 3 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-evenly !important;

    width: 100% !important;

    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 24px !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: hidden !important;

    z-index: 100 !important;

    background: #020b08 !important;

    border-top:
      1px solid rgba(64, 233, 175, .14) !important;

    transform: none !important;
  }


  .landing-v3 .landing-footer > div {
    display: flex !important;

    flex: 1 1 0 !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;
  }


  .landing-v3 .landing-footer strong {
    display: block !important;

    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }


  .landing-v3 .landing-footer span {
    display: block !important;

    margin: 4px 0 0 !important;

    font-size: 7px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

}


/* =========================================================
   SHORT LAPTOP
========================================================= */

@media
  (min-width: 981px)
  and (max-height: 800px) {

  .landing-v3 {
    grid-template-rows:
      68px
      minmax(0, 1fr)
      56px !important;
  }


  .landing-v3 .landing-header {
    height: 68px !important;
    min-height: 68px !important;
  }


  .landing-v3 .landing-footer {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }

}

/* =========================================================
   SNOOP POKER LANDSCAPE HIDDEN STATE FIX

   Landscape layout uses:
     .landing-v3 { display:grid !important; }

   That rule must NEVER override HTML [hidden].

   This restores the application's real screen state.
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  #landingScreen[hidden] {
    display: none !important;
  }

}



/* =========================================================
   SNOOP POKER STABLE IOS LANDSCAPE AUTH

   IMPORTANT:
   Landing owns the fixed landscape architecture.
   Auth does NOT.

   AUTH:
   - normal document flow
   - no fixed body
   - no fixed auth screen
   - native Safari touch handling
   - 16px inputs prevent focus zoom
   - Login normally fits
   - Register may scroll naturally on very short screens
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  /*
   * The global landscape landing architecture fixes
   * HTML/BODY. Release both while AUTH is visible.
   */
  html:has(body #authScreen:not([hidden])) {
    width: 100% !important;

    height: auto !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: auto !important;
  }


  body:has(#authScreen:not([hidden])) {
    position: static !important;
    inset: auto !important;

    width: 100% !important;

    height: auto !important;
    min-height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: auto !important;

    touch-action: auto !important;
  }


  /*
   * Auth itself is NOT a fixed viewport.
   */
  body:has(#authScreen:not([hidden]))
  #authScreen.auth-screen {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;

    height: auto !important;
    min-height: 100dvh !important;

    overflow: visible !important;

    padding:
      max(8px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left)) !important;

    touch-action: manipulation !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-card {
    width: min(620px, 94vw) !important;

    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;

    padding: 8px 20px 10px !important;

    overflow: visible !important;

    border-radius: 13px !important;
  }


  /*
   * Make all interactive AUTH controls native-touch friendly.
   */
  body:has(#authScreen:not([hidden]))
  #authScreen button,
  body:has(#authScreen:not([hidden]))
  #authScreen input {
    pointer-events: auto !important;

    touch-action: manipulation !important;

    -webkit-user-select: auto !important;
    user-select: auto !important;

    -webkit-tap-highlight-color: transparent;
  }


  /* ---------- BACK ---------- */

  body:has(#authScreen:not([hidden]))
  #authScreen .back-to-landing {
    margin-bottom: 4px !important;

    padding: 4px 0 !important;
  }


  /* ---------- BRAND ---------- */

  body:has(#authScreen:not([hidden]))
  #authScreen .auth-premium-brand {
    margin:
      -1px
      0
      5px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-premium-logo {
    display: block !important;

    width: min(125px, 27vw) !important;
    height: auto !important;

    max-height: 40px !important;

    margin:
      0
      auto
      3px !important;

    object-fit: contain !important;
  }


  /* ---------- TABS ---------- */

  body:has(#authScreen:not([hidden]))
  #authScreen .auth-tabs {
    margin-bottom: 5px !important;

    padding: 3px !important;
    gap: 3px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-tab {
    min-height: 30px !important;

    padding: 5px 9px !important;

    font-size: 11px !important;
    line-height: 1.1 !important;

    cursor: pointer !important;
  }


  /* ---------- FORMS ---------- */

  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form {
    gap: 5px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form label {
    gap: 2px !important;

    font-size: 9px !important;
    line-height: 1.05 !important;
  }


  /*
   * IMPORTANT:
   * Keep input font >= 16px.
   * iOS Safari otherwise auto-zooms on focus.
   */
  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form input {
    box-sizing: border-box !important;

    width: 100% !important;

    height: 32px !important;
    min-height: 32px !important;

    padding: 3px 9px !important;

    font-size: 16px !important;
    line-height: 20px !important;

    touch-action: manipulation !important;
  }


  /* ---------- SUBMIT ---------- */

  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form .primary-btn {
    box-sizing: border-box !important;

    min-height: 32px !important;

    margin-top: 1px !important;

    padding: 5px 12px !important;

    font-size: 11px !important;
    line-height: 1.1 !important;

    cursor: pointer !important;

    touch-action: manipulation !important;
  }


  /* ---------- REGISTER ---------- */

  body:has(#authScreen:not([hidden]))
  #registerForm {
    gap: 4px !important;
  }


  body:has(#authScreen:not([hidden]))
  #registerForm input {
    height: 31px !important;
    min-height: 31px !important;

    font-size: 16px !important;
  }

}


/* =========================================================
   EXTRA SHORT IOS LANDSCAPE

   Compact further, but DO NOT force everything into a
   clipped fixed viewport. Natural vertical overflow wins.
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 390px) {

  body:has(#authScreen:not([hidden]))
  #authScreen.auth-screen {
    padding-top:
      max(4px, env(safe-area-inset-top)) !important;

    padding-bottom:
      max(7px, env(safe-area-inset-bottom)) !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-card {
    width: min(650px, 96vw) !important;

    padding:
      5px
      18px
      8px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .back-to-landing {
    margin-bottom: 2px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-premium-brand {
    margin-bottom: 3px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-premium-logo {
    width: min(105px, 23vw) !important;

    max-height: 31px !important;

    margin-bottom: 1px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-tabs {
    margin-bottom: 3px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-tab {
    min-height: 27px !important;

    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form {
    gap: 3px !important;
  }


  body:has(#authScreen:not([hidden]))
  #registerForm {
    gap: 2px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form input {
    height: 30px !important;
    min-height: 30px !important;

    /*
     * NEVER lower this below 16px on iOS.
     */
    font-size: 16px !important;
  }


  body:has(#authScreen:not([hidden]))
  #authScreen .auth-form .primary-btn {
    min-height: 29px !important;

    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

}


/* =========================================================
   SNOOP POKER SCREEN STATE CONTRACT

   HTML [hidden] is authoritative.

   No responsive / landscape / desktop layout rule is ever
   allowed to resurrect an inactive application screen.
========================================================= */

#landingScreen[hidden],
#bootScreen[hidden],
#authScreen[hidden],
#appScreen[hidden] {
  display: none !important;
}


/* =========================================================
   AUTH DOCUMENT RESET

   When AUTH owns the screen:
   - landing contributes ZERO layout
   - app contributes ZERO layout
   - document starts at the AUTH screen
========================================================= */

body:has(#authScreen:not([hidden])) {
  margin: 0 !important;
}


/* =========================================================
   APP DOCUMENT RESET

   When APP owns the screen:
   - landing contributes ZERO layout
   - auth contributes ZERO layout
   - lobby/table begins at document origin
========================================================= */

body:has(#appScreen:not([hidden])) {
  margin: 0 !important;
}



/* =========================================================
   SNOOP POKER LOBBY V4
   WHISKEY ROOM + ROOM UNIVERSE

   Presentation only.
   Poker engine / table IDs / API untouched.
========================================================= */

.lobby-v4-room-note {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 12px;

  color: rgba(186, 211, 199, .48);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.35px;
}

.lobby-v4-room-note i {
  width: 1px;
  height: 10px;

  background: rgba(255,255,255,.10);
}

.lobby-v4-live-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #21e2ad;

  box-shadow:
    0 0 8px rgba(33,226,173,.65);
}


/* =========================================================
   ROOM COLLECTION
========================================================= */

.lobby-v4-room-universe {
  margin-top: 31px;
}

.lobby-v4-room-universe-head {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;
}

.lobby-v4-room-universe-head > div > span {
  display: block;

  margin-bottom: 5px;

  color: #d8ae36;

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.lobby-v4-room-universe-head h3 {
  margin: 0;

  color: #f6f8f7;

  font-size: 19px;
  line-height: 1.1;
}

.lobby-v4-room-universe-head > small {
  color: rgba(174, 200, 187, .43);

  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
}


/* =========================================================
   ROOM STRIP
========================================================= */

.lobby-v4-room-strip {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 9px;
}

.lobby-v4-mini-room {
  position: relative;

  display: flex;

  align-items: center;

  min-width: 0;
  min-height: 72px;

  padding:
    13px
    14px;

  gap: 11px;

  overflow: hidden;

  border:
    1px solid rgba(131, 166, 149, .13);

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      rgba(10, 35, 27, .92),
      rgba(4, 20, 15, .94)
    );
}

.lobby-v4-mini-room::before {
  content: "";

  position: absolute;

  inset:
    0
    auto
    0
    0;

  width: 2px;

  background: transparent;
}

.lobby-v4-mini-room.is-whiskey {
  border-color:
    rgba(205, 164, 49, .27);

  background:
    radial-gradient(
      circle at 0 0,
      rgba(186, 137, 30, .13),
      transparent 58%
    ),
    linear-gradient(
      135deg,
      rgba(11, 38, 29, .97),
      rgba(4, 21, 16, .96)
    );
}

.lobby-v4-mini-room.is-whiskey::before {
  background: #d8ae36;

  box-shadow:
    0 0 14px rgba(216,174,54,.35);
}

.lobby-v4-mini-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  flex:
    0
    0
    32px;

  width: 32px;
  height: 32px;

  border:
    1px solid rgba(216,174,54,.22);

  border-radius: 9px;

  color: #d8ae36;

  background:
    rgba(216,174,54,.055);

  font-size: 14px;
  font-style: normal;
}

.lobby-v4-mini-room > div {
  min-width: 0;
}

.lobby-v4-mini-room strong {
  display: block;

  overflow: hidden;

  color: rgba(244,248,246,.91);

  font-size: 11px;
  line-height: 1.2;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-v4-mini-room small {
  display: block;

  margin-top: 5px;

  color: rgba(166, 194, 180, .38);

  font-size: 7px;
  font-weight: 850;
  letter-spacing: 1px;
}

.lobby-v4-mini-room.is-whiskey small {
  color: #28d9a7;
}

.lobby-v4-mini-room.is-locked {
  opacity: .58;
}


/* =========================================================
   WHISKEY FEATURED POLISH
========================================================= */

.lobby-v3-featured {
  box-shadow:
    0 24px 80px rgba(0,0,0,.20);
}

.lobby-v3-featured-art {
  overflow: hidden;
}

.lobby-v3-room-image {
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .55s ease;
}

.lobby-v3-featured:hover .lobby-v3-room-image {
  transform: scale(1.018);

  filter:
    brightness(1.035)
    saturate(1.035);
}

.lobby-v3-featured-seat {
  letter-spacing: .8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .lobby-v4-room-strip {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .lobby-v4-mini-room.is-whiskey {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   MOBILE / iPHONE PORTRAIT
========================================================= */

@media (max-width: 650px) {

  .lobby-v4-room-universe {
    margin-top: 24px;
  }

  .lobby-v4-room-universe-head {
    align-items: flex-start;
  }

  .lobby-v4-room-universe-head h3 {
    font-size: 18px;
  }

  .lobby-v4-room-universe-head > small {
    display: none;
  }

  /*
   * Native horizontal room rail.
   *
   * No JS carousel:
   * smoother and more reliable on iOS Safari.
   */
  .lobby-v4-room-strip {
    display: flex;

    width:
      calc(100% + 12px);

    margin-right: -12px;

    padding:
      0
      12px
      7px
      0;

    gap: 9px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x proximity;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width: none;
  }

  .lobby-v4-room-strip::-webkit-scrollbar {
    display: none;
  }

  .lobby-v4-mini-room,
  .lobby-v4-mini-room.is-whiskey {
    grid-column: auto;

    flex:
      0
      0
      176px;

    min-height: 68px;

    scroll-snap-align: start;
  }

  .lobby-v4-room-note {
    margin-top: 10px;

    gap: 7px;

    font-size: 7px;

    letter-spacing: .9px;
  }

  /*
   * Touch devices do not need desktop hover zoom.
   */
  .lobby-v3-featured:hover .lobby-v3-room-image {
    transform: none;

    filter: none;
  }

}


/* =========================================================
   PHONE LANDSCAPE
========================================================= */

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .lobby-v4-room-universe {
    margin-top: 20px;
  }

  .lobby-v4-room-strip {
    display: flex;

    gap: 8px;

    overflow-x: auto;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }

  .lobby-v4-room-strip::-webkit-scrollbar {
    display: none;
  }

  .lobby-v4-mini-room,
  .lobby-v4-mini-room.is-whiskey {
    flex:
      0
      0
      168px;

    min-height: 61px;

    padding:
      10px
      12px;
  }

}




/* =========================================================
   SNOOP POKER LOBBY V5
   COMPACT VISUAL ROOM COLLECTION

   - replaces giant featured banner
   - Whiskey = first real visual room card
   - future rooms = placeholders only
   - desktop + iOS responsive
   - poker engine untouched
========================================================= */

.lobby-v5-rooms {
  margin-top: 2px;
}


.lobby-v5-room-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 13px;

  padding:
    0
    3px;
}


.lobby-v5-room-heading > div > span {
  display: block;

  margin-bottom: 5px;

  color: #d9ad38;

  font-size: 8px;
  font-weight: 950;

  letter-spacing: 1.7px;
}


.lobby-v5-room-heading h3 {
  margin: 0;

  color: #fff;

  font-size: 21px;
  line-height: 1.1;

  letter-spacing: -.25px;
}


.lobby-v5-room-heading p {
  margin:
    5px
    0
    0;

  color:
    rgba(187, 207, 198, .53);

  font-size: 10px;
}


.lobby-v5-room-heading > small {
  color:
    rgba(187, 207, 198, .42);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 1.2px;
}


/* =========================================================
   ROOM RAIL
========================================================= */

.lobby-v5-room-rail {
  display: grid;

  grid-template-columns:
    minmax(245px, 1.45fr)
    repeat(4, minmax(145px, .78fr));

  gap: 10px;

  align-items: stretch;
}


/* =========================================================
   COMMON CARD
========================================================= */

.lobby-v5-room-card {
  position: relative;

  min-width: 0;

  overflow: hidden;

  margin: 0;
  padding: 0;

  border:
    1px solid rgba(132, 167, 151, .14);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(8, 31, 24, .96),
      rgba(4, 20, 15, .98)
    );

  color: inherit;

  text-align: left;

  box-shadow:
    0 14px 38px rgba(0,0,0,.14);

  appearance: none;
  -webkit-appearance: none;
}


/* =========================================================
   WHISKEY LIVE CARD
========================================================= */

button.lobby-v5-whiskey {
  cursor: pointer;

  border-color:
    rgba(218, 177, 58, .31);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


button.lobby-v5-whiskey:hover {
  transform: translateY(-2px);

  border-color:
    rgba(218, 177, 58, .50);

  box-shadow:
    0 18px 46px rgba(0,0,0,.22);
}


button.lobby-v5-whiskey:disabled {
  cursor: not-allowed;

  opacity: .66;
}


.lobby-v5-room-art {
  position: relative;

  height: 132px;

  overflow: hidden;

  background: #071710;
}


.lobby-v5-room-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
   * Existing Whiskey art is panoramic.
   * Slightly left-of-center keeps the important
   * visual content alive inside the compact crop.
   */
  object-position: 43% center;

  transform: scale(1.02);

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1);
}


button.lobby-v5-whiskey:hover
.lobby-v5-room-image {
  transform: scale(1.045);
}


.lobby-v5-room-art-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(2, 14, 10, .78) 0%,
      rgba(2, 14, 10, .06) 58%,
      rgba(2, 14, 10, .15) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 14, 10, .10),
      transparent 55%
    );
}


.lobby-v5-room-kicker {
  position: absolute;

  left: 13px;
  bottom: 10px;

  color:
    rgba(242, 207, 105, .90);

  font-size: 7px;
  font-weight: 950;

  letter-spacing: 1.45px;
}


.lobby-v5-room-status {
  position: absolute;

  top: 10px;
  right: 10px;

  display: flex;

  align-items: center;

  gap: 6px;

  min-height: 22px;

  padding:
    0
    8px;

  border:
    1px solid rgba(44, 225, 170, .20);

  border-radius: 999px;

  background:
    rgba(3, 18, 13, .73);

  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  color: #42dfb1;

  font-size: 7px;
  font-weight: 950;

  letter-spacing: .9px;
}


.lobby-v5-room-status i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #2ae0ad;

  box-shadow:
    0 0 8px rgba(42,224,173,.65);
}


.lobby-v5-room-status.is-full {
  color:
    rgba(221, 226, 223, .58);

  border-color:
    rgba(255,255,255,.12);
}


.lobby-v5-room-status.is-full i {
  background:
    rgba(221, 226, 223, .50);

  box-shadow: none;
}


/* =========================================================
   WHISKEY BODY
========================================================= */

.lobby-v5-room-body {
  padding:
    13px
    14px
    14px;
}


.lobby-v5-room-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.lobby-v5-room-title > div {
  min-width: 0;
}


.lobby-v5-room-title strong {
  display: block;

  overflow: hidden;

  color: #fff;

  font-size: 15px;
  font-weight: 900;

  line-height: 1.1;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v5-room-title > div > span {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color:
    rgba(190, 210, 200, .52);

  font-size: 8px;
  font-weight: 750;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v5-room-arrow {
  display: grid;

  place-items: center;

  flex:
    0
    0
    29px;

  width: 29px;
  height: 29px;

  border:
    1px solid rgba(41, 213, 162, .20);

  border-radius: 8px;

  background:
    rgba(27, 184, 137, .10);

  color: #35d7a7;

  font-size: 14px;
  font-weight: 700;
}


/* =========================================================
   WHISKEY STATS
========================================================= */

.lobby-v5-room-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  margin-top: 13px;

  padding-top: 11px;

  border-top:
    1px solid rgba(255,255,255,.06);
}


.lobby-v5-room-stats > div {
  min-width: 0;

  padding:
    0
    9px;

  border-right:
    1px solid rgba(255,255,255,.055);
}


.lobby-v5-room-stats > div:first-child {
  padding-left: 0;
}


.lobby-v5-room-stats > div:last-child {
  padding-right: 0;

  border-right: 0;
}


.lobby-v5-room-stats span {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(175, 199, 187, .42);

  font-size: 6px;
  font-weight: 950;

  letter-spacing: .95px;
}


.lobby-v5-room-stats strong {
  display: block;

  overflow: hidden;

  color:
    rgba(247, 250, 248, .94);

  font-size: 10px;
  font-weight: 900;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v5-room-stats strong small {
  color:
    rgba(209, 224, 216, .38);

  font-size: .72em;
}


.lobby-v5-occupancy {
  display: block;

  width: 100%;
  height: 2px;

  margin-top: 5px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,.06);
}


.lobby-v5-occupancy b {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    #24c99a;
}


/* =========================================================
   COMING SOON CARDS
========================================================= */

.lobby-v5-room-coming {
  display: flex;

  flex-direction: column;

  min-height: 227px;

  opacity: .62;
}


.lobby-v5-coming-art {
  position: relative;

  display: grid;

  place-items: center;

  flex: 1;

  min-height: 146px;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(203, 163, 49, .09),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(12, 42, 32, .80),
      rgba(4, 20, 15, .96)
    );
}


.lobby-v5-coming-icon {
  display: grid;

  place-items: center;

  width: 43px;
  height: 43px;

  border:
    1px solid rgba(218, 174, 54, .20);

  border-radius: 12px;

  background:
    rgba(218, 174, 54, .045);

  color:
    rgba(218, 174, 54, .72);

  font-size: 17px;
}


.lobby-v5-coming-art small {
  position: absolute;

  top: 11px;
  right: 11px;

  color:
    rgba(188, 208, 198, .40);

  font-size: 6px;
  font-weight: 950;

  letter-spacing: 1px;
}


.lobby-v5-coming-body {
  padding:
    12px
    12px
    13px;

  border-top:
    1px solid rgba(255,255,255,.045);
}


.lobby-v5-coming-body strong {
  display: block;

  overflow: hidden;

  color:
    rgba(242, 247, 244, .77);

  font-size: 11px;
  font-weight: 850;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.lobby-v5-coming-body span {
  display: block;

  margin-top: 4px;

  color:
    rgba(177, 200, 189, .32);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: 1px;
}


/* =========================================================
   ALL TABLES SPACING
========================================================= */

.lobby-v5-rooms + .lobby-v3-all {
  margin-top: 29px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .lobby-v5-room-rail {
    grid-template-columns:
      minmax(235px, 1.25fr)
      repeat(4, minmax(135px, .72fr));

    gap: 8px;
  }


  .lobby-v5-room-art {
    height: 122px;
  }


  .lobby-v5-room-coming {
    min-height: 217px;
  }

}


/* =========================================================
   iPHONE / MOBILE
========================================================= */

@media (max-width: 700px) {

  .lobby-v5-room-heading {
    align-items: flex-start;
  }


  .lobby-v5-room-heading h3 {
    font-size: 19px;
  }


  .lobby-v5-room-heading > small {
    display: none;
  }


  /*
   * Native iOS horizontal room rail.
   * No JS carousel.
   */
  .lobby-v5-room-rail {
    display: flex;

    width:
      calc(100% + 12px);

    margin-right: -12px;

    padding:
      0
      12px
      8px
      0;

    gap: 9px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x proximity;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width: none;
  }


  .lobby-v5-room-rail::-webkit-scrollbar {
    display: none;
  }


  .lobby-v5-room-card {
    flex:
      0
      0
      242px;

    scroll-snap-align: start;
  }


  .lobby-v5-room-coming {
    flex-basis: 155px;

    min-height: 221px;
  }


  .lobby-v5-room-art {
    height: 125px;
  }


  /*
   * No desktop hover movement on touch.
   */
  button.lobby-v5-whiskey:hover {
    transform: none;
  }


  button.lobby-v5-whiskey:hover
  .lobby-v5-room-image {
    transform: scale(1.02);
  }

}


/* =========================================================
   iPHONE LANDSCAPE
========================================================= */

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .lobby-v5-room-heading {
    margin-bottom: 9px;
  }


  .lobby-v5-room-heading p {
    display: none;
  }


  .lobby-v5-room-rail {
    display: flex;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width: none;
  }


  .lobby-v5-room-rail::-webkit-scrollbar {
    display: none;
  }


  .lobby-v5-room-card {
    flex:
      0
      0
      224px;
  }


  .lobby-v5-room-coming {
    flex-basis: 145px;

    min-height: 192px;
  }


  .lobby-v5-room-art {
    height: 105px;
  }


  .lobby-v5-coming-art {
    min-height: 112px;
  }


  .lobby-v5-room-body {
    padding:
      10px
      12px
      11px;
  }


  .lobby-v5-room-stats {
    margin-top: 9px;

    padding-top: 8px;
  }

}


@media (pointer: coarse) {

  button.lobby-v5-whiskey {
    touch-action: manipulation;

    -webkit-tap-highlight-color:
      transparent;
  }

}


/* =========================================================
   SNOOP POKER WHISKEY V5.1
   PREMIUM COMPACT READABILITY PASS

   GOAL:
   - keep compact room lobby
   - Whiskey remains the visual hero
   - NOT a giant banner
   - larger panoramic art
   - readable blinds / players / buy-in
   - future rooms remain secondary
   - iOS horizontal rail preserved
========================================================= */


/* =========================================================
   DESKTOP ROOM PROPORTIONS
========================================================= */

@media (min-width: 981px) {

  .lobby-v5-room-rail {
    grid-template-columns:
      minmax(390px, 1.75fr)
      repeat(4, minmax(150px, .68fr));

    gap: 11px;
  }


  /* Whiskey gets a proper premium visual window. */

  .lobby-v5-room-art {
    height: 178px;
  }


  .lobby-v5-room-image {
    object-position: 43% center;
  }


  .lobby-v5-room-body {
    padding:
      16px
      17px
      17px;
  }


  /* Room title */

  .lobby-v5-room-title strong {
    font-size: 19px;
    line-height: 1.08;
    letter-spacing: -.25px;
  }


  .lobby-v5-room-title > div > span {
    margin-top: 5px;

    font-size: 10px;
    line-height: 1.2;
  }


  .lobby-v5-room-arrow {
    flex:
      0
      0
      34px;

    width: 34px;
    height: 34px;

    font-size: 16px;
  }


  /* Whiskey visual labels */

  .lobby-v5-room-kicker {
    left: 15px;
    bottom: 12px;

    font-size: 8px;
    letter-spacing: 1.55px;
  }


  .lobby-v5-room-status {
    top: 12px;
    right: 12px;

    min-height: 25px;

    padding:
      0
      10px;

    font-size: 8px;
  }


  .lobby-v5-room-status i {
    width: 6px;
    height: 6px;
  }


  /* =======================================================
     IMPORTANT DATA
     BLINDS / PLAYERS / BUY-IN
  ======================================================= */

  .lobby-v5-room-stats {
    margin-top: 16px;
    padding-top: 14px;
  }


  .lobby-v5-room-stats > div {
    padding:
      0
      13px;
  }


  .lobby-v5-room-stats span {
    margin-bottom: 7px;

    color:
      rgba(188, 211, 200, .64);

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 1.15px;
  }


  .lobby-v5-room-stats strong {
    overflow: visible;

    color: #ffffff;

    font-size: 13px;
    font-weight: 950;

    line-height: 1.1;

    text-overflow: clip;
  }


  .lobby-v5-room-stats strong small {
    color:
      rgba(220, 231, 225, .55);

    font-size: .78em;
  }


  .lobby-v5-occupancy {
    height: 3px;

    margin-top: 7px;
  }


  /*
   * Future rooms stay deliberately quieter/smaller.
   * Whiskey is the room we are building now.
   */

  .lobby-v5-room-coming {
    min-height: 279px;
  }


  .lobby-v5-coming-art {
    min-height: 190px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media
  (min-width: 701px)
  and (max-width: 980px) {

  .lobby-v5-room-rail {
    grid-template-columns:
      minmax(330px, 1.55fr)
      repeat(4, minmax(145px, .72fr));
  }


  .lobby-v5-room-art {
    height: 158px;
  }


  .lobby-v5-room-title strong {
    font-size: 17px;
  }


  .lobby-v5-room-title > div > span {
    font-size: 9px;
  }


  .lobby-v5-room-stats span {
    font-size: 7px;

    color:
      rgba(188, 211, 200, .60);
  }


  .lobby-v5-room-stats strong {
    font-size: 12px;

    color: #fff;
  }

}


/* =========================================================
   iPHONE / MOBILE PORTRAIT

   Whiskey uses most of viewport width.
   Other rooms remain horizontally discoverable.
========================================================= */

@media
  (max-width: 700px)
  and (orientation: portrait) {

  .lobby-v5-room-card {
    flex:
      0
      0
      min(84vw, 330px);
  }


  .lobby-v5-room-coming {
    flex-basis: 165px;
  }


  .lobby-v5-room-art {
    height: 158px;
  }


  .lobby-v5-room-body {
    padding:
      14px
      14px
      15px;
  }


  .lobby-v5-room-title strong {
    font-size: 17px;
  }


  .lobby-v5-room-title > div > span {
    font-size: 9px;
  }


  .lobby-v5-room-stats {
    margin-top: 14px;

    padding-top: 12px;
  }


  .lobby-v5-room-stats > div {
    padding:
      0
      8px;
  }


  .lobby-v5-room-stats span {
    margin-bottom: 6px;

    color:
      rgba(188, 211, 200, .64);

    font-size: 7px;
    letter-spacing: .85px;
  }


  .lobby-v5-room-stats strong {
    overflow: visible;

    color: #fff;

    font-size: 12px;

    text-overflow: clip;
  }


  .lobby-v5-occupancy {
    height: 3px;
  }

}


/* =========================================================
   iPHONE LANDSCAPE

   Compact vertically, but data must remain readable.
========================================================= */

@media
  (max-height: 520px)
  and (orientation: landscape)
  and (pointer: coarse) {

  .lobby-v5-room-card {
    flex:
      0
      0
      300px;
  }


  .lobby-v5-room-coming {
    flex-basis: 150px;
  }


  .lobby-v5-room-art {
    height: 132px;
  }


  .lobby-v5-room-title strong {
    font-size: 16px;
  }


  .lobby-v5-room-title > div > span {
    font-size: 8px;
  }


  .lobby-v5-room-stats span {
    color:
      rgba(188, 211, 200, .62);

    font-size: 7px;
  }


  .lobby-v5-room-stats strong {
    overflow: visible;

    color: #fff;

    font-size: 11px;

    text-overflow: clip;
  }

}



/* =========================================================
   WHISKEY ENTER ROOM CTA
========================================================= */

.lobby-v5-enter-room {
  width: auto !important;
  min-width: 108px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 0 13px !important;

  white-space: nowrap;
}

.lobby-v5-enter-room span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .11em;
}

.lobby-v5-enter-room i {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
}


@media (max-width: 600px) {

  .lobby-v5-enter-room {
    min-width: 94px !important;
    padding: 0 10px !important;
    gap: 6px;
  }

  .lobby-v5-enter-room span {
    font-size: 8px;
  }

}


/* =========================================================
   SNOOP POKER PREMIUM APP HEADER V1

   - real brand artwork
   - premium chip balance
   - clean player identity
   - no visible @username
   - compact desktop
   - compact iOS landscape
   - existing JS IDs preserved
========================================================= */

.snoop-app-header {
  position: relative;
  z-index: 40;

  min-height: 68px;

  padding:
    9px
    clamp(16px, 2vw, 30px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  border-bottom:
    1px solid rgba(196, 165, 72, .14);

  background:
    linear-gradient(
      180deg,
      rgba(4, 14, 11, .98),
      rgba(3, 12, 9, .96)
    );

  box-shadow:
    0 10px 34px rgba(0, 0, 0, .16);
}


/* =========================================================
   REAL BRAND
========================================================= */

.snoop-header-brand {
  display: flex;
  align-items: center;

  min-width: 0;
}

.snoop-header-logo {
  display: block;

  width: auto;
  height: 44px;

  max-width: 190px;

  object-fit: contain;
  object-position: left center;

  filter:
    drop-shadow(
      0 4px 12px rgba(0, 0, 0, .28)
    );
}


/* kill old placeholder symbol if an old cached DOM survives */
.snoop-app-header .brand-symbol {
  display: none !important;
}


/* =========================================================
   ACCOUNT CLUSTER
========================================================= */

.snoop-header-account {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-left: auto;
}


/* =========================================================
   CHIP BALANCE
========================================================= */

.snoop-header-balance {
  min-height: 46px;

  display: flex;
  align-items: center;

  gap: 10px;

  padding: 6px 13px 6px 8px;

  border:
    1px solid rgba(202, 172, 76, .18);

  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(15, 39, 30, .82),
      rgba(7, 24, 18, .88)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 20px rgba(0,0,0,.14);
}


.snoop-header-chip {
  position: relative;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  border:
    2px solid rgba(225, 190, 76, .82);

  background:
    radial-gradient(
      circle at 38% 32%,
      #f4d77c 0 8%,
      #c49a32 9% 27%,
      #80601b 28% 31%,
      #142d23 32% 62%,
      #091a14 63%
    );

  box-shadow:
    0 0 0 2px rgba(198, 162, 53, .08),
    0 5px 14px rgba(0, 0, 0, .28);
}


.snoop-header-chip::before,
.snoop-header-chip::after,
.snoop-header-chip i::before,
.snoop-header-chip i::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 3px;
  height: 7px;

  border-radius: 2px;

  background: rgba(245, 214, 111, .85);

  transform-origin: 50% 50%;
}


.snoop-header-chip::before {
  transform:
    translate(-50%, -15px);
}

.snoop-header-chip::after {
  transform:
    translate(-50%, 8px);
}

.snoop-header-chip i::before {
  transform:
    translate(-15px, -50%)
    rotate(90deg);
}

.snoop-header-chip i::after {
  transform:
    translate(8px, -50%)
    rotate(90deg);
}


.snoop-header-balance > div {
  display: grid;

  gap: 1px;

  white-space: nowrap;
}


.snoop-header-balance small {
  color: rgba(151, 180, 166, .72);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .15em;
}


.snoop-header-balance strong {
  color: #f1c84b;

  font-size: 14px;
  line-height: 1.1;

  font-weight: 900;

  letter-spacing: .025em;

  text-shadow:
    0 0 14px rgba(223, 184, 59, .10);
}


/* =========================================================
   PLAYER
========================================================= */

.snoop-header-player {
  min-height: 46px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 6px 12px 6px 7px;

  border:
    1px solid rgba(112, 153, 133, .16);

  border-radius: 13px;

  background:
    rgba(8, 27, 20, .72);
}


.snoop-header-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  color: #e3bd45;

  font-size: 17px;

  border:
    1px solid rgba(204, 171, 63, .22);

  background:
    linear-gradient(
      145deg,
      rgba(25, 58, 44, .88),
      rgba(8, 27, 20, .92)
    );
}


.snoop-header-player-copy {
  display: grid;

  gap: 1px;

  min-width: 78px;
}


.snoop-header-player-copy > small {
  color: rgba(151, 180, 166, .66);

  font-size: 8px;
  line-height: 1;

  font-weight: 800;

  letter-spacing: .15em;
}


.snoop-header-player-copy > strong {
  overflow: hidden;

  max-width: 145px;

  color: #f5f6f2;

  font-size: 13px;
  line-height: 1.25;

  font-weight: 800;

  white-space: nowrap;
  text-overflow: ellipsis;
}


.snoop-header-hidden-username {
  display: none !important;
}


/* =========================================================
   LOGOUT
========================================================= */

.snoop-header-logout {
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 0 14px;

  border-radius: 13px;

  border:
    1px solid rgba(133, 169, 151, .20);

  color: rgba(241, 245, 241, .90);

  background:
    linear-gradient(
      145deg,
      rgba(17, 42, 32, .90),
      rgba(8, 25, 19, .94)
    );

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .09em;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease;
}


.snoop-header-logout i {
  color: #d9b843;

  font-size: 12px;

  font-style: normal;
}


.snoop-header-logout:hover {
  transform: translateY(-1px);

  border-color:
    rgba(210, 177, 66, .34);

  background:
    linear-gradient(
      145deg,
      rgba(22, 51, 39, .96),
      rgba(10, 31, 23, .98)
    );
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

  .snoop-app-header {
    min-height: 60px;

    padding: 7px 12px;

    gap: 10px;
  }

  .snoop-header-logo {
    height: 38px;
    max-width: 150px;
  }

  .snoop-header-account {
    gap: 6px;
  }

  .snoop-header-balance,
  .snoop-header-player,
  .snoop-header-logout {
    min-height: 42px;
  }

  .snoop-header-chip,
  .snoop-header-avatar {
    width: 30px;
    height: 30px;

    flex-basis: 30px;
  }

  .snoop-header-balance {
    padding:
      5px 9px 5px 6px;
  }

  .snoop-header-player {
    padding:
      5px 9px 5px 6px;
  }

  .snoop-header-balance strong {
    font-size: 12px;
  }

  .snoop-header-player-copy > strong {
    max-width: 100px;

    font-size: 12px;
  }

}


/* =========================================================
   PHONE / IOS LANDSCAPE

   Keep the app header useful without stealing poker space.
========================================================= */

@media (max-width: 760px) {

  .snoop-app-header {
    min-height: 52px;

    align-items: center !important;

    padding:
      max(5px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      5px
      max(8px, env(safe-area-inset-left));
  }

  .snoop-header-logo {
    height: 32px;
    max-width: 112px;
  }

  .snoop-header-balance,
  .snoop-header-player,
  .snoop-header-logout {
    min-height: 36px;

    border-radius: 10px;
  }

  .snoop-header-chip,
  .snoop-header-avatar {
    width: 27px;
    height: 27px;

    flex-basis: 27px;
  }

  .snoop-header-balance {
    gap: 6px;

    padding:
      4px 7px 4px 5px;
  }

  .snoop-header-balance small {
    display: none;
  }

  .snoop-header-balance strong {
    font-size: 10px;
  }

  .snoop-header-player {
    gap: 6px;

    padding:
      4px 7px 4px 5px;
  }

  .snoop-header-player-copy {
    min-width: 0;
  }

  .snoop-header-player-copy > small {
    display: none;
  }

  .snoop-header-player-copy > strong {
    max-width: 78px;

    font-size: 10px;
  }

  .snoop-header-logout {
    width: 36px;

    padding: 0;
  }

  .snoop-header-logout span {
    display: none;
  }

  .snoop-header-logout i {
    font-size: 13px;
  }

}


/* =========================================================
   VERY NARROW PHONE LANDSCAPE
========================================================= */

@media (max-width: 620px) {

  .snoop-header-logo {
    height: 29px;
    max-width: 94px;
  }

  .snoop-header-player-copy {
    display: none;
  }

  .snoop-header-player {
    padding: 4px;
  }

  .snoop-header-balance strong {
    font-size: 9px;
  }

}


/* =========================================================
   SNOOP POKER LOBBY SCENE V1

   Real cinematic background artwork.
   UI remains real HTML above the artwork.

   - no CSS fake spotlight
   - no extra objects
   - no layout changes
   - no room dimension changes
========================================================= */


/* ---------------------------------------------------------
   APPLICATION BASE
--------------------------------------------------------- */

#appScreen {
  position: relative;

  min-height: 100vh;

  background:
    #020b08;
}


/* ---------------------------------------------------------
   LOBBY CONTENT

   Keep the original content geometry.
--------------------------------------------------------- */

#lobbyView {
  position: relative;
  z-index: 0;

  isolation: isolate;
}


/* ---------------------------------------------------------
   CINEMATIC ARTWORK

   Escapes the 1180px content container and fills viewport.
   The artwork contains the actual stage lighting.
--------------------------------------------------------- */

#lobbyView::before {
  content: "";

  position: absolute;

  z-index: -2;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 100vw;

  transform:
    translateX(-50%);

  background-image:
    url('/assets/lobby/poker-lobby-scene.png');

  background-repeat:
    no-repeat;

  background-position:
    center top;

  background-size:
    cover;

  pointer-events:
    none;
}


/* ---------------------------------------------------------
   VERY LIGHT UI PROTECTION

   This is NOT another spotlight.
   It only keeps text/cards readable.
--------------------------------------------------------- */

#lobbyView::after {
  content: "";

  position: absolute;

  z-index: -1;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 100vw;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      rgba(0, 8, 6, .20) 0%,
      rgba(0, 8, 6, .04) 24%,
      rgba(0, 8, 6, .02) 50%,
      rgba(0, 8, 6, .04) 76%,
      rgba(0, 8, 6, .20) 100%
    );

  pointer-events:
    none;
}


/* Real interface always above artwork */
#lobbyView > * {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   TABLE AREA

   Keep the lower browser readable without hiding the scene.
--------------------------------------------------------- */

.lobby-v3-all {
  position: relative;

  background:
    rgba(1, 17, 12, .58);

  border-radius:
    16px;

  box-shadow:
    0 18px 55px rgba(0, 0, 0, .16);
}


/* ---------------------------------------------------------
   MOBILE / TABLET

   Keep center of artwork aligned with UI.
--------------------------------------------------------- */

@media (max-width: 900px) {

  #lobbyView::before {
    background-position:
      center top;

    background-size:
      auto 100%;
  }

}


@media (max-width: 650px) {

  #lobbyView::after {
    background:
      rgba(1, 12, 9, .18);
  }

}


/* =========================================================
   END SNOOP POKER LOBBY SCENE V1
========================================================= */


/* =========================================================
   SNOOP POKER PREMIUM HEADER CHIP V1

   Replace CSS-drawn balance icon with real SP poker chip.
   Balance logic / HTML / wallet system untouched.
========================================================= */


/* ---------------------------------------------------------
   DESKTOP CHIP
--------------------------------------------------------- */

.snoop-header-chip {
  position: relative !important;

  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;

  display: block !important;

  border: 0 !important;
  border-radius: 50% !important;

  background:
    url('/assets/header/snoop-poker-chip.png')
    center / contain
    no-repeat !important;

  box-shadow:
    0 0 0 1px rgba(235, 198, 77, .12),
    0 0 13px rgba(215, 177, 52, .16),
    0 5px 14px rgba(0, 0, 0, .28) !important;

  overflow: visible !important;
}


/*
 * Remove every piece of the old CSS-drawn chip.
 */
.snoop-header-chip::before,
.snoop-header-chip::after,
.snoop-header-chip i,
.snoop-header-chip i::before,
.snoop-header-chip i::after {
  content: none !important;
  display: none !important;
}


/* Give the balance module slightly better visual presence */
.snoop-header-balance {
  gap: 9px !important;

  padding:
    5px 11px
    5px 7px !important;

  border-color:
    rgba(194, 157, 48, .24) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 7px 20px rgba(0, 0, 0, .14),
    0 0 18px rgba(174, 139, 35, .035) !important;
}


/* Keep balance hierarchy crisp */
.snoop-header-balance small {
  color:
    rgba(171, 196, 183, .78) !important;
}


.snoop-header-balance strong {
  color: #f1c84b !important;

  text-shadow:
    0 0 12px rgba(223, 184, 59, .12) !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {

  .snoop-header-chip {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
  }

  .snoop-header-balance {
    gap: 7px !important;

    padding:
      5px 9px
      5px 6px !important;
  }

}


/* ---------------------------------------------------------
   PHONE / IOS LANDSCAPE
--------------------------------------------------------- */

@media (max-width: 760px) {

  .snoop-header-chip {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;

    box-shadow:
      0 0 0 1px rgba(235, 198, 77, .10),
      0 0 8px rgba(215, 177, 52, .10),
      0 3px 8px rgba(0, 0, 0, .22) !important;
  }

  .snoop-header-balance {
    gap: 6px !important;

    padding:
      4px 7px
      4px 5px !important;
  }

}


/* =========================================================
   END SNOOP POKER PREMIUM HEADER CHIP V1
========================================================= */


/* =========================================================
   SNOOP POKER PREMIUM HEADER CHIP V1.1

   Fine tune only:
   - larger SP chip
   - slightly stronger balance module
   - header height unchanged
   - player/logout untouched
========================================================= */


/* Larger premium chip without increasing header height */
.snoop-header-chip {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;

  background:
    url('/assets/header/snoop-poker-chip.png')
    center / contain
    no-repeat !important;

  box-shadow:
    0 0 0 1px rgba(238, 202, 82, .14),
    0 0 15px rgba(221, 181, 52, .18),
    0 6px 16px rgba(0, 0, 0, .30) !important;

  filter:
    contrast(1.05)
    saturate(1.06)
    brightness(1.04);
}


/* Balance container gets presence without becoming bulky */
.snoop-header-balance {
  gap: 9px !important;

  padding:
    3px 12px
    3px 5px !important;

  border-color:
    rgba(205, 170, 57, .29) !important;

  background:
    linear-gradient(
      145deg,
      rgba(14, 42, 31, .92),
      rgba(5, 24, 17, .95)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 18px rgba(32, 111, 75, .035),
    0 7px 20px rgba(0,0,0,.16),
    0 0 18px rgba(190,151,38,.045) !important;
}


/* Slightly cleaner hierarchy */
.snoop-header-balance small {
  color: rgba(169, 198, 183, .82) !important;

  letter-spacing: .16em !important;
}


.snoop-header-balance strong {
  color: #f4ca49 !important;

  text-shadow:
    0 0 10px rgba(237, 194, 57, .14) !important;
}


/* Tablet */
@media (max-width: 980px) {

  .snoop-header-chip {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .snoop-header-balance {
    padding:
      4px 9px
      4px 5px !important;
  }

}


/* Phone / landscape */
@media (max-width: 760px) {

  .snoop-header-chip {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;

    filter:
      contrast(1.04)
      saturate(1.04)
      brightness(1.03);
  }

  .snoop-header-balance {
    padding:
      4px 7px
      4px 5px !important;
  }

}


/* =========================================================
   END SNOOP POKER PREMIUM HEADER CHIP V1.1
========================================================= */


/* =========================================================
   SNOOP POKER PREMIUM HEADER FAMILY V1

   Balance:
   - existing Premium Chip V1.1 preserved

   Player:
   - emerald / gold medallion treatment

   Logout:
   - matching premium surface and gold action detail

   Lobby / wallet / JS untouched
========================================================= */


/* =========================================================
   PLAYER MODULE
========================================================= */

.snoop-header-player {
  min-height: 46px !important;

  gap: 9px !important;

  padding:
    4px 12px
    4px 5px !important;

  border:
    1px solid rgba(205, 170, 57, .20) !important;

  border-radius: 13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(14, 42, 31, .90),
      rgba(5, 24, 17, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 16px rgba(32,111,75,.025),
    0 7px 20px rgba(0,0,0,.14),
    0 0 16px rgba(190,151,38,.025) !important;
}


/*
 * Player medallion.
 * Intentionally calmer than the real SP balance chip.
 */
.snoop-header-avatar {
  position: relative !important;

  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 50% !important;

  border:
    1px solid rgba(224, 188, 66, .48) !important;

  color: #e7bd3e !important;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(54, 126, 89, .95) 0%,
      rgba(18, 66, 46, .98) 42%,
      rgba(7, 31, 22, 1) 74%
    ) !important;

  box-shadow:
    inset 0 0 0 3px rgba(224,188,66,.055),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 10px rgba(211,171,48,.09),
    0 4px 10px rgba(0,0,0,.25) !important;

  font-size: 17px !important;
  line-height: 1 !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 0 8px rgba(226,183,52,.12) !important;
}


/* PLAYER label */
.snoop-header-player-copy > small {
  color:
    rgba(169, 198, 183, .80) !important;

  letter-spacing: .16em !important;
}


/* Username */
.snoop-header-player-copy > strong {
  color: #f5f6f2 !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.28) !important;
}


/* =========================================================
   LOGOUT MODULE
========================================================= */

.snoop-header-logout {
  position: relative !important;

  min-height: 46px !important;

  gap: 9px !important;

  padding:
    0 13px
    0 14px !important;

  border-radius: 13px !important;

  border:
    1px solid rgba(205, 170, 57, .20) !important;

  color:
    rgba(245, 246, 242, .92) !important;

  background:
    linear-gradient(
      145deg,
      rgba(14, 42, 31, .90),
      rgba(5, 24, 17, .94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 16px rgba(32,111,75,.025),
    0 7px 20px rgba(0,0,0,.14),
    0 0 16px rgba(190,151,38,.025) !important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}


/*
 * Gold action icon.
 * Keep existing HTML arrow; style it as part of the family.
 */
.snoop-header-logout i {
  width: 22px !important;
  height: 22px !important;

  display: grid !important;
  place-items: center !important;

  flex: 0 0 22px !important;

  border-radius: 7px !important;

  border:
    1px solid rgba(220, 181, 58, .20) !important;

  color: #e4bb3e !important;

  background:
    rgba(24, 58, 43, .58) !important;

  font-size: 11px !important;
  line-height: 1 !important;

  text-shadow:
    0 0 7px rgba(225,181,51,.14) !important;
}


/* Logout typography */
.snoop-header-logout span {
  font-size: 10px !important;
  font-weight: 900 !important;

  letter-spacing: .09em !important;
}


/* Controlled hover — premium, not flashy */
.snoop-header-logout:hover {
  transform: translateY(-1px) !important;

  border-color:
    rgba(222, 185, 65, .36) !important;

  background:
    linear-gradient(
      145deg,
      rgba(18, 50, 36, .96),
      rgba(7, 30, 21, .98)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 8px 22px rgba(0,0,0,.18),
    0 0 18px rgba(203,161,40,.055) !important;
}


.snoop-header-logout:hover i {
  border-color:
    rgba(225, 187, 62, .34) !important;

  background:
    rgba(32, 72, 53, .70) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

  .snoop-header-avatar {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;

    font-size: 15px !important;
  }

  .snoop-header-player {
    padding:
      5px 9px
      5px 5px !important;
  }

  .snoop-header-logout {
    padding:
      0 10px !important;
  }

}


/* =========================================================
   PHONE / IOS LANDSCAPE
========================================================= */

@media (max-width: 760px) {

  .snoop-header-avatar {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;

    font-size: 13px !important;
  }

  .snoop-header-player {
    gap: 6px !important;

    padding:
      4px 7px
      4px 4px !important;
  }

  .snoop-header-logout {
    width: 36px !important;

    padding: 0 !important;
  }

  .snoop-header-logout span {
    display: none !important;
  }

  .snoop-header-logout i {
    width: 24px !important;
    height: 24px !important;

    flex-basis: 24px !important;

    margin: auto !important;
  }

}


/* =========================================================
   END SNOOP POKER PREMIUM HEADER FAMILY V1
========================================================= */


/* =========================================================
   SNOOP POKER WHISKEY ROOM POLISH V1

   Visual polish only.

   PRESERVED:
   - room dimensions
   - artwork dimensions
   - real table data
   - room ID
   - ENTER ROOM behavior
   - routing
   - occupancy
   - JS
========================================================= */


/* =========================================================
   FEATURED LIVE ROOM SURFACE
========================================================= */

button.lobby-v5-whiskey {
  border-color:
    rgba(210, 173, 57, .27) !important;

  background:
    linear-gradient(
      145deg,
      rgba(9, 33, 25, .97),
      rgba(4, 20, 15, .99)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 15px 38px rgba(0,0,0,.17),
    0 0 24px rgba(177,139,35,.025) !important;
}


button.lobby-v5-whiskey:hover {
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(221, 183, 63, .42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 19px 46px rgba(0,0,0,.22),
    0 0 28px rgba(191,151,38,.045) !important;
}


/* =========================================================
   ARTWORK
========================================================= */

.lobby-v5-room-art {
  background:
    #06140f !important;
}


/*
 * Keep the exact existing crop and dimensions.
 * Only calm the image slightly so UI wins over artwork.
 */
.lobby-v5-room-image {
  filter:
    brightness(.92)
    saturate(.91)
    contrast(1.035);

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .35s ease !important;
}


button.lobby-v5-whiskey:hover
.lobby-v5-room-image {
  transform:
    scale(1.035) !important;

  filter:
    brightness(.96)
    saturate(.95)
    contrast(1.035);
}


/*
 * Stronger lower fade creates a clean handoff
 * from photography into the real room information.
 */
.lobby-v5-room-art-shade {
  background:

    linear-gradient(
      0deg,
      rgba(2, 14, 10, .88) 0%,
      rgba(2, 14, 10, .30) 28%,
      rgba(2, 14, 10, .04) 62%,
      rgba(2, 14, 10, .14) 100%
    ),

    linear-gradient(
      90deg,
      rgba(2, 14, 10, .16) 0%,
      transparent 58%
    ) !important;
}


/* =========================================================
   SNOOP POKER KICKER
========================================================= */

.lobby-v5-room-kicker {
  color:
    rgba(239, 202, 91, .92) !important;

  text-shadow:
    0 1px 4px rgba(0,0,0,.55),
    0 0 10px rgba(221,177,51,.08) !important;
}


/* =========================================================
   OPEN / FULL STATUS
========================================================= */

.lobby-v5-room-status {
  border-color:
    rgba(48, 221, 169, .24) !important;

  background:
    rgba(3, 20, 14, .82) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 4px 12px rgba(0,0,0,.14) !important;
}


.lobby-v5-room-status i {
  box-shadow:
    0 0 9px rgba(42,224,173,.55) !important;
}


/* =========================================================
   ROOM BODY
========================================================= */

.lobby-v5-room-body {
  background:
    linear-gradient(
      180deg,
      rgba(7, 29, 22, .88) 0%,
      rgba(4, 20, 15, .98) 100%
    ) !important;
}


/* Room name */
.lobby-v5-room-title strong {
  color:
    rgba(250, 251, 249, .98) !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.35) !important;
}


/* Game type */
.lobby-v5-room-title > div > span {
  color:
    rgba(177, 204, 190, .58) !important;
}


/* =========================================================
   ENTER ROOM CTA
========================================================= */

.lobby-v5-enter-room {
  min-height: 31px !important;

  border:
    1px solid rgba(49, 215, 165, .26) !important;

  border-radius:
    9px !important;

  color:
    #43ddb0 !important;

  background:
    linear-gradient(
      145deg,
      rgba(23, 112, 81, .20),
      rgba(11, 63, 45, .17)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 4px 12px rgba(0,0,0,.10) !important;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease !important;
}


button.lobby-v5-whiskey:hover
.lobby-v5-enter-room {
  border-color:
    rgba(58, 224, 174, .42) !important;

  background:
    linear-gradient(
      145deg,
      rgba(28, 137, 98, .27),
      rgba(12, 78, 55, .23)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 14px rgba(38,203,151,.055) !important;
}


.lobby-v5-enter-room span {
  color:
    rgba(105, 230, 191, .94) !important;
}


.lobby-v5-enter-room i {
  color:
    #e3bd43 !important;

  text-shadow:
    0 0 8px rgba(226,187,59,.10) !important;
}


/* =========================================================
   ROOM STATS
========================================================= */

.lobby-v5-room-stats {
  border-top:
    1px solid rgba(181, 210, 195, .07) !important;
}


.lobby-v5-room-stats span {
  color:
    rgba(161, 191, 176, .48) !important;
}


.lobby-v5-room-stats strong {
  color:
    rgba(247, 250, 248, .96) !important;
}


/* Player occupancy keeps the live emerald language */
.lobby-v5-occupancy {
  background:
    rgba(255,255,255,.055) !important;
}


.lobby-v5-occupancy b {
  background:
    linear-gradient(
      90deg,
      #1bb887,
      #39d6a8
    ) !important;

  box-shadow:
    0 0 7px rgba(42,205,157,.12);
}


/* =========================================================
   MOBILE

   No dimensions changed.
   Only reduce hover-related visual treatment.
========================================================= */

@media (max-width: 650px) {

  button.lobby-v5-whiskey:hover {
    transform:
      none !important;
  }

  button.lobby-v5-whiskey:hover
  .lobby-v5-room-image {
    transform:
      scale(1.02) !important;
  }

}


/* =========================================================
   END SNOOP POKER WHISKEY ROOM POLISH V1
========================================================= */


/* =========================================================
   SNOOP POKER HEADER LOGO FINE TUNE V1

   Desktop brand presence only.

   - 44px -> 52px
   - header layout preserved
   - tablet/mobile preserved
   - account modules untouched
========================================================= */

@media (min-width: 821px) {

  .snoop-header-logo {
    height: 52px !important;
    max-width: 225px !important;

    filter:
      drop-shadow(
        0 5px 14px rgba(0, 0, 0, .32)
      );
  }

}


/* =========================================================
   END SNOOP POKER HEADER LOGO FINE TUNE V1
========================================================= */


/* =========================================================
   SNOOP POKER PREMIUM HEADER CHIP V1.2

   Fine balance adjustment:
   - desktop chip 46px -> 43px
   - premium artwork preserved
   - balance module dimensions preserved
   - tablet/mobile preserved
========================================================= */

@media (min-width: 821px) {

  .snoop-header-chip {
    width: 43px !important;
    height: 43px !important;
    flex: 0 0 43px !important;
  }

}


/* =========================================================
   END SNOOP POKER PREMIUM HEADER CHIP V1.2
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LOBBY LANDSCAPE FOUNDATION V1

   Scope:
   - PHONE LANDSCAPE LOBBY ONLY
   - desktop/laptop untouched
   - poker table untouched
   - JS untouched

   Goals:
   - restore natural vertical scrolling
   - remove inherited viewport-height traps
   - keep lobby inside viewport width
   - preserve current visual family
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  /*
   * Lobby must behave like a normal document in landscape.
   * Do not force the whole application into one viewport.
   */
  html,
  body {
    min-height: 100% !important;
    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior-y: auto;
  }


  /*
   * Critical:
   * old landscape/table rules may lock the app to viewport height.
   * Lobby must be allowed to grow vertically.
   */
  #appScreen:has(#lobbyView:not([hidden])) {
    width: 100% !important;

    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;

    overflow: visible !important;
  }


  /*
   * Lobby itself owns its natural document height.
   */
  #lobbyView:not([hidden]) {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: calc(100dvh - 52px) !important;
    max-height: none !important;

    margin: 0 !important;

    overflow: visible !important;
  }


  /*
   * Never allow generated lobby content to create
   * accidental viewport-width overflow.
   */
  #lobbyView:not([hidden]) > * {
    max-width: 100%;
  }


  /*
   * Keep cinematic scene attached to the entire lobby,
   * including content below the first landscape viewport.
   */
  #lobbyView::before,
  #lobbyView::after {
    top: 0 !important;
    bottom: 0 !important;

    height: auto !important;
    min-height: 100% !important;
  }


  /*
   * Landscape scene:
   * cover is safer here than the previous auto 100%
   * treatment because lobby can now grow vertically.
   */
  #lobbyView::before {
    background-size: cover !important;
    background-position: center top !important;
  }


  /*
   * Main generated lobby grid must never inherit
   * fixed viewport-height behavior.
   */
  #lobbyView #tablesGrid {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }

}


/* =========================================================
   END SNOOP POKER MOBILE LOBBY LANDSCAPE FOUNDATION V1
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LOBBY LANDSCAPE V2

   PHONE LANDSCAPE ONLY

   Goals:
   - preserve natural vertical page scroll
   - compact premium header
   - reduce wasted vertical space
   - turn room collection into horizontal swipe rail
   - keep All Tables below the room rail
   - desktop / laptop / portrait untouched
   - no JS changes
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* =======================================================
     APP / PAGE
  ======================================================= */

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #appScreen {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;

    overflow: visible !important;
  }

  #lobbyView {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;

    overflow: visible !important;
  }


  /* =======================================================
     PREMIUM HEADER — LANDSCAPE COMPACT
  ======================================================= */

  .snoop-app-header {
    min-height: 46px !important;
    height: auto !important;

    padding:
      4px
      max(8px, env(safe-area-inset-right))
      4px
      max(8px, env(safe-area-inset-left)) !important;

    gap: 7px !important;
  }


  .snoop-header-logo {
    height: 34px !important;
    width: auto !important;
    max-width: 132px !important;
  }


  .snoop-header-account {
    gap: 5px !important;
  }


  .snoop-header-balance,
  .snoop-header-player,
  .snoop-header-logout {
    min-height: 36px !important;
    height: 36px !important;

    border-radius: 10px !important;
  }


  .snoop-header-balance {
    gap: 6px !important;

    padding: 3px 8px 3px 4px !important;
  }


  .snoop-header-chip {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
  }


  .snoop-header-balance small {
    font-size: 6px !important;
    line-height: 1 !important;

    letter-spacing: .12em !important;
  }


  .snoop-header-balance strong {
    font-size: 10px !important;
    line-height: 1.05 !important;
  }


  .snoop-header-player {
    gap: 5px !important;

    padding: 3px 8px 3px 4px !important;
  }


  .snoop-header-avatar {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;

    border-radius: 50% !important;

    font-size: 12px !important;
  }


  .snoop-header-player-copy {
    min-width: 55px !important;
  }


  .snoop-header-player-copy > small {
    font-size: 6px !important;

    letter-spacing: .12em !important;
  }


  .snoop-header-player-copy > strong {
    max-width: 82px !important;

    font-size: 10px !important;
  }


  .snoop-header-logout {
    gap: 5px !important;

    padding: 0 9px !important;

    font-size: 8px !important;
  }


  .snoop-header-logout i {
    font-size: 9px !important;
  }


  /* =======================================================
     LOBBY CONTENT WIDTH
  ======================================================= */

  #lobbyView {
    box-sizing: border-box !important;

    padding-left:
      max(12px, env(safe-area-inset-left)) !important;

    padding-right:
      max(12px, env(safe-area-inset-right)) !important;

    padding-bottom:
      max(20px, env(safe-area-inset-bottom)) !important;
  }


  /* =======================================================
     CASH GAMES HEADING
  ======================================================= */

  .lobby-heading-v2 {
    margin-top: 12px !important;
    margin-bottom: 13px !important;

    gap: 12px !important;
  }


  .lobby-heading-copy {
    min-width: 0 !important;
  }


  .lobby-eyebrow {
    font-size: 7px !important;

    letter-spacing: .18em !important;
  }


  .lobby-heading-copy h2 {
    margin-top: 3px !important;

    font-size: 25px !important;
    line-height: 1 !important;
  }


  .lobby-heading-copy p {
    margin-top: 6px !important;

    font-size: 10px !important;
    line-height: 1.3 !important;
  }


  /* Refresh stays useful but no longer dominates */
  .lobby-heading-v2 .secondary-btn,
  .lobby-heading-v2 button {
    min-height: 34px !important;

    padding: 0 11px !important;

    border-radius: 9px !important;

    font-size: 10px !important;
  }


  /* =======================================================
     ROOM SECTION
  ======================================================= */

  .lobby-v5-room-universe,
  .lobby-v4-room-universe {
    width: 100% !important;
    max-width: none !important;

    margin-top: 10px !important;

    overflow: visible !important;
  }


  .lobby-v5-room-universe-head,
  .lobby-v4-room-universe-head {
    margin-bottom: 8px !important;
  }


  .lobby-v5-room-universe-head h3,
  .lobby-v4-room-universe-head h3 {
    font-size: 17px !important;
    line-height: 1.1 !important;
  }


  /*
   * Room collection becomes a native horizontal rail.
   *
   * Page itself remains vertical.
   * Rooms swipe horizontally.
   */
  .lobby-v5-room-grid,
  .lobby-v5-room-strip,
  .lobby-v4-room-strip {
    display: flex !important;

    grid-template-columns: none !important;

    width:
      calc(
        100% +
        max(12px, env(safe-area-inset-right))
      ) !important;

    max-width: none !important;

    gap: 9px !important;

    margin-right:
      calc(
        -1 *
        max(12px, env(safe-area-inset-right))
      ) !important;

    padding:
      0
      max(12px, env(safe-area-inset-right))
      8px
      0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x proximity !important;
    scroll-behavior: smooth;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }


  .lobby-v5-room-grid::-webkit-scrollbar,
  .lobby-v5-room-strip::-webkit-scrollbar,
  .lobby-v4-room-strip::-webkit-scrollbar {
    display: none;
  }


  /* =======================================================
     WHISKEY — LANDSCAPE FEATURE CARD
  ======================================================= */

  button.lobby-v5-whiskey,
  .lobby-v5-whiskey,
  .lobby-v3-featured {
    flex:
      0
      0
      clamp(330px, 48vw, 380px) !important;

    width:
      clamp(330px, 48vw, 380px) !important;

    max-width:
      clamp(330px, 48vw, 380px) !important;

    min-width: 0 !important;

    scroll-snap-align: start;

    align-self: stretch;
  }


  /*
   * Do not change artwork crop logic.
   * Only constrain the landscape card footprint.
   */
  .lobby-v5-whiskey img,
  .lobby-v3-room-image {
    max-width: 100% !important;
  }


  /* =======================================================
     COMING SOON CARDS
  ======================================================= */

  .lobby-v5-mini-room,
  .lobby-v5-room-card,
  .lobby-v4-mini-room {
    grid-column: auto !important;

    flex:
      0
      0
      clamp(150px, 22vw, 178px) !important;

    width:
      clamp(150px, 22vw, 178px) !important;

    min-width: 0 !important;

    scroll-snap-align: start;
  }


  /* =======================================================
     ALL TABLES
  ======================================================= */

  .lobby-v5-tables,
  .lobby-tables,
  .tables-section {
    width: 100% !important;
    max-width: none !important;

    margin-top: 14px !important;
  }


  /* =======================================================
     TOUCH
  ======================================================= */

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }


  /*
   * Desktop hover animation has no purpose on phone.
   */
  .lobby-v3-featured:hover .lobby-v3-room-image {
    transform: none !important;
  }

}


/* =========================================================
   END SNOOP POKER MOBILE LOBBY LANDSCAPE V2
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LOBBY LANDSCAPE V2.1
   REAL DOM FIX

   Real runtime DOM:
   .lobby-v5-rooms
   .lobby-v5-room-heading
   .lobby-v5-room-rail
   .lobby-v5-room-card
   .lobby-v5-whiskey
   .lobby-v5-room-coming

   PHONE LANDSCAPE ONLY.

   Goals:
   - page scroll remains vertical
   - room collection becomes true horizontal swipe rail
   - Whiskey footprint reduced
   - coming rooms narrower
   - next room remains partially visible
   - All Tables stays below rail
   - desktop / laptop / portrait untouched
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* =======================================================
     REAL ROOM SECTION
  ======================================================= */

  .lobby-v5-rooms {
    width: 100% !important;
    max-width: none !important;

    margin-top: 8px !important;

    overflow: visible !important;
  }


  .lobby-v5-room-heading {
    width: 100% !important;

    margin-bottom: 7px !important;
  }


  .lobby-v5-room-heading h3 {
    font-size: 17px !important;
    line-height: 1.08 !important;
  }


  .lobby-v5-room-heading p {
    margin-top: 3px !important;

    font-size: 8px !important;
    line-height: 1.25 !important;
  }


  .lobby-v5-room-heading > small {
    font-size: 6px !important;
    letter-spacing: .16em !important;
  }


  /* =======================================================
     REAL HORIZONTAL ROOM RAIL
  ======================================================= */

  .lobby-v5-room-rail {
    display: flex !important;

    grid-template-columns: none !important;

    width:
      calc(
        100% +
        max(12px, env(safe-area-inset-right))
      ) !important;

    max-width: none !important;

    gap: 9px !important;

    margin-right:
      calc(
        -1 *
        max(12px, env(safe-area-inset-right))
      ) !important;

    padding:
      0
      max(24px, env(safe-area-inset-right))
      8px
      0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x proximity !important;
    scroll-padding-left: 0 !important;

    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }


  .lobby-v5-room-rail::-webkit-scrollbar {
    display: none !important;
  }


  /* =======================================================
     ALL CARDS — RELEASE DESKTOP GRID RULES
  ======================================================= */

  .lobby-v5-room-rail > .lobby-v5-room-card {
    grid-column: auto !important;
    grid-row: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    scroll-snap-align: start;
  }


  /* =======================================================
     WHISKEY — LANDSCAPE FEATURE CARD

     Large enough to remain premium,
     small enough to clearly communicate horizontal swipe.
  ======================================================= */

  .lobby-v5-room-rail > button.lobby-v5-whiskey {
    flex:
      0
      0
      clamp(300px, 43vw, 350px) !important;

    width:
      clamp(300px, 43vw, 350px) !important;

    max-width:
      clamp(300px, 43vw, 350px) !important;

    align-self: stretch !important;
  }


  /*
   * Reduce artwork footprint without changing
   * the image itself or JS.
   */
  .lobby-v5-whiskey .lobby-v5-room-art {
    height: clamp(118px, 22vw, 150px) !important;

    min-height: 0 !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
  }


  /* =======================================================
     WHISKEY BODY COMPACTION
  ======================================================= */

  .lobby-v5-whiskey .lobby-v5-room-body {
    padding: 10px 11px 9px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-title {
    gap: 8px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-title strong {
    font-size: 15px !important;
    line-height: 1.05 !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-title > div > span {
    margin-top: 3px !important;

    font-size: 7px !important;
  }


  .lobby-v5-whiskey .lobby-v5-enter-room {
    min-height: 31px !important;

    padding: 0 9px !important;

    border-radius: 8px !important;
  }


  .lobby-v5-whiskey .lobby-v5-enter-room span {
    font-size: 7px !important;
    letter-spacing: .11em !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats {
    margin-top: 9px !important;
    padding-top: 8px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats span {
    font-size: 6px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats strong {
    margin-top: 3px !important;

    font-size: 10px !important;
  }


  /* =======================================================
     COMING SOON CARDS
  ======================================================= */

  .lobby-v5-room-rail > .lobby-v5-room-coming {
    flex:
      0
      0
      clamp(132px, 19vw, 154px) !important;

    width:
      clamp(132px, 19vw, 154px) !important;

    max-width:
      clamp(132px, 19vw, 154px) !important;

    align-self: stretch !important;
  }


  /*
   * Match Whiskey's compact landscape footprint.
   * This keeps the rail visually coherent.
   */
  .lobby-v5-room-coming .lobby-v5-coming-art {
    min-height: 0 !important;
  }


  /* =======================================================
     ALL TABLES — NATURAL FLOW BELOW RAIL
  ======================================================= */

  .lobby-v5-rooms + .lobby-v3-all {
    clear: both !important;

    width: 100% !important;
    max-width: none !important;

    margin-top: 13px !important;

    position: relative !important;
  }


  /* =======================================================
     TOUCH / HOVER
  ======================================================= */

  button.lobby-v5-whiskey:hover {
    transform: none !important;
  }


  button.lobby-v5-whiskey:hover
  .lobby-v5-room-image {
    transform: none !important;
    filter: none !important;
  }

}


/* =========================================================
   END SNOOP POKER MOBILE LOBBY LANDSCAPE V2.1
========================================================= */



/* =========================================================
   SNOOP POKER MOBILE LOBBY LANDSCAPE V2.2
   FINAL VISUAL POLISH

   PHONE LANDSCAPE ONLY

   V2.1 structure preserved:
   - vertical page scroll
   - horizontal room rail
   - real runtime DOM
   - Whiskey width
   - coming-room widths
   - All Tables flow

   V2.2:
   - reduce vertical footprint
   - tighten heading rhythm
   - shorten Whiskey artwork
   - compact Whiskey body
   - compact Coming Soon cards

   UNTOUCHED:
   - desktop / laptop
   - portrait mobile
   - header
   - All Tables
   - JS
   - routing
   - poker engine
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* =======================================================
     CASH GAMES — VERTICAL RHYTHM ONLY
  ======================================================= */

  .lobby-heading-v2 {
    margin-top: 8px !important;
    margin-bottom: 9px !important;

    gap: 8px !important;
  }


  .lobby-heading-copy h2 {
    margin-top: 2px !important;

    font-size: 23px !important;
    line-height: 1 !important;
  }


  .lobby-heading-copy p {
    margin-top: 4px !important;

    font-size: 9px !important;
    line-height: 1.25 !important;
  }


  /* =======================================================
     ROOM SECTION HEADING
  ======================================================= */

  .lobby-v5-rooms {
    margin-top: 5px !important;
  }


  .lobby-v5-room-heading {
    margin-bottom: 6px !important;
  }


  .lobby-v5-room-heading h3 {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }


  .lobby-v5-room-heading p {
    margin-top: 2px !important;

    font-size: 7px !important;
    line-height: 1.2 !important;
  }


  /* =======================================================
     ROOM RAIL

     Keep horizontal behavior from V2.1.
     Only tighten lower breathing room.
  ======================================================= */

  .lobby-v5-room-rail {
    gap: 9px !important;

    padding-bottom: 6px !important;
  }


  /* =======================================================
     WHISKEY — SHORTER LANDSCAPE FEATURE

     Width deliberately NOT changed.
  ======================================================= */

  .lobby-v5-whiskey .lobby-v5-room-art {
    height: clamp(102px, 18vw, 128px) !important;
    min-height: 0 !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
  }


  /* OPEN badge remains readable */
  .lobby-v5-whiskey .lobby-v5-room-live {
    top: 8px !important;
    right: 8px !important;

    min-height: 23px !important;

    padding: 0 8px !important;

    font-size: 6px !important;
    letter-spacing: .12em !important;
  }


  /* =======================================================
     WHISKEY BODY
  ======================================================= */

  .lobby-v5-whiskey .lobby-v5-room-body {
    padding:
      8px
      10px
      8px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-title {
    gap: 7px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-title strong {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }


  .lobby-v5-whiskey
  .lobby-v5-room-title
  > div
  > span {
    margin-top: 2px !important;

    font-size: 6.5px !important;
    line-height: 1.2 !important;
  }


  /* =======================================================
     ENTER ROOM
  ======================================================= */

  .lobby-v5-whiskey .lobby-v5-enter-room {
    min-height: 28px !important;

    padding: 0 8px !important;

    gap: 6px !important;

    border-radius: 8px !important;
  }


  .lobby-v5-whiskey .lobby-v5-enter-room span {
    font-size: 6.5px !important;
    line-height: 1 !important;

    letter-spacing: .10em !important;
  }


  .lobby-v5-whiskey .lobby-v5-enter-room i {
    font-size: 10px !important;
  }


  /* =======================================================
     WHISKEY STATS
  ======================================================= */

  .lobby-v5-whiskey .lobby-v5-room-stats {
    margin-top: 7px !important;
    padding-top: 7px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats > div {
    min-height: 30px !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats span {
    font-size: 5.5px !important;
    line-height: 1 !important;

    letter-spacing: .12em !important;
  }


  .lobby-v5-whiskey .lobby-v5-room-stats strong {
    margin-top: 3px !important;

    font-size: 9.5px !important;
    line-height: 1 !important;
  }


  /* =======================================================
     COMING SOON

     Width from V2.1 preserved.
     Height follows the compact Whiskey card.
  ======================================================= */

  .lobby-v5-room-rail > .lobby-v5-room-coming {
    min-height: 0 !important;

    align-self: stretch !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-art {
    min-height: 0 !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-top {
    top: 9px !important;
    right: 9px !important;

    font-size: 5px !important;
    letter-spacing: .13em !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-icon {
    width: 34px !important;
    height: 34px !important;

    border-radius: 9px !important;

    font-size: 12px !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-copy {
    padding:
      8px
      9px
      8px !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-copy strong {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }


  .lobby-v5-room-coming .lobby-v5-coming-copy small {
    margin-top: 3px !important;

    font-size: 5px !important;
    letter-spacing: .12em !important;
  }


}


/* =========================================================
   END SNOOP POKER MOBILE LOBBY LANDSCAPE V2.2
========================================================= */



/* =========================================================
   SNOOP POKER MOBILE LOBBY LANDSCAPE V2.3
   PREMIUM SWIPE HINT

   PHONE LANDSCAPE ONLY

   - CSS only
   - no scrollbar
   - no JS
   - no routing changes
   - no room behavior changes
   - desktop / laptop untouched
   - portrait untouched
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* Anchor for the visual swipe affordance */
  .lobby-v5-rooms {
    position: relative !important;
  }


  /*
   * Premium swipe hint.
   *
   * Attached to the room section rather than the
   * scrolling rail so it does not become another card.
   */
  .lobby-v5-rooms::after {
    content: "SWIPE  ›";

    position: absolute;
    z-index: 20;

    right:
      max(
        7px,
        env(safe-area-inset-right)
      );

    top: 39px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding:
      0
      9px
      0
      10px;

    border:
      1px solid rgba(211, 177, 60, .22);

    border-radius: 999px;

    color:
      rgba(224, 190, 68, .82);

    background:
      linear-gradient(
        145deg,
        rgba(5, 31, 22, .82),
        rgba(2, 20, 15, .74)
      );

    box-shadow:
      0 8px 22px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .025);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    font-size: 6px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .16em;

    pointer-events: none;

    opacity: .78;

    animation:
      snoopLandscapeSwipeHint
      1.9s
      ease-in-out
      infinite;
  }


  /*
   * Very small horizontal movement.
   * Enough to communicate direction without looking
   * like an animated advertisement.
   */
  @keyframes snoopLandscapeSwipeHint {

    0%,
    100% {
      transform: translateX(0);
      opacity: .68;
    }

    50% {
      transform: translateX(4px);
      opacity: .94;
    }

  }


  /*
   * Respect reduced-motion preference.
   */
  @media (prefers-reduced-motion: reduce) {

    .lobby-v5-rooms::after {
      animation: none !important;
      opacity: .80;
    }

  }

}


/* =========================================================
   END SNOOP POKER MOBILE LOBBY LANDSCAPE V2.3
========================================================= */



/* =========================================================
   SNOOP POKER MOBILE LANDSCAPE SWIPE HINT V2.3.1

   Fix:
   - remove SWIPE badge appearance
   - move affordance to right edge of room rail
   - vertically center against room cards
   - premium chevron only
   - pointer events disabled
   - no scrollbar
   - no JS
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /*
   * Room section remains positioning context.
   */
  .lobby-v5-rooms {
    position: relative !important;
  }


  /*
   * Override V2.3 SWIPE badge.
   *
   * This is deliberately a simple chevron.
   * The partially visible next card already communicates
   * horizontal continuation.
   */
  .lobby-v5-rooms::after {
    content: "›" !important;

    position: absolute !important;
    z-index: 30 !important;

    /*
     * Keep it at the physical right edge of the viewport,
     * not over the heading and not attached to a room card.
     */
    right:
      max(
        5px,
        env(safe-area-inset-right)
      ) !important;

    /*
     * Heading is above the rail.
     * 50% puts the control into the card field instead
     * of the COMING SOON / heading area.
     */
    top: 56% !important;

    transform:
      translateY(-50%) !important;

    width: 30px !important;
    height: 46px !important;
    min-height: 0 !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border:
      1px solid rgba(211, 177, 60, .24) !important;

    border-radius: 999px !important;

    color:
      rgba(229, 194, 67, .92) !important;

    background:
      linear-gradient(
        145deg,
        rgba(5, 31, 22, .90),
        rgba(2, 18, 14, .82)
      ) !important;

    box-shadow:
      0 8px 24px rgba(0, 0, 0, .26),
      0 0 18px rgba(210, 177, 60, .045),
      inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;

    /*
     * Pure visual hint.
     * It must never block swipe gestures or room clicks.
     */
    pointer-events: none !important;

    animation:
      snoopLandscapeSwipeHint 1.8s ease-in-out infinite;
  }


  @keyframes snoopLandscapeSwipeHint {

    0%,
    100% {
      transform:
        translateY(-50%)
        translateX(0);

      opacity: .72;
    }

    50% {
      transform:
        translateY(-50%)
        translateX(3px);

      opacity: 1;
    }

  }

}


/* =========================================================
   END MOBILE LANDSCAPE SWIPE HINT V2.3.1
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LANDSCAPE SWIPE HINT V2.3.2

   Fine tune only:
   - keep V2.3.1 architecture
   - compact circular premium arrow
   - anchor visually to right edge of room rail
   - no SWIPE text
   - no scrollbar
   - no JS
   - no room/layout changes
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {

  .lobby-v5-rooms::after {
    content: "›" !important;

    /*
     * Right-edge affordance.
     * Slightly inset so the full control remains visible
     * around mobile safe areas.
     */
    right:
      max(
        8px,
        env(safe-area-inset-right)
      ) !important;

    /*
     * Place it inside the actual card field,
     * away from MORE ROOMS COMING.
     */
    top: 61% !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;

    padding: 0 !important;

    border:
      1px solid rgba(211, 177, 60, .25) !important;

    border-radius: 50% !important;

    color:
      rgba(229, 194, 67, .92) !important;

    background:
      linear-gradient(
        145deg,
        rgba(6, 34, 24, .91),
        rgba(2, 18, 14, .86)
      ) !important;

    box-shadow:
      0 8px 22px rgba(0, 0, 0, .24),
      0 0 16px rgba(210, 177, 60, .045),
      inset 0 1px 0 rgba(255, 255, 255, .035) !important;

    font-size: 27px !important;
    line-height: 1 !important;

    pointer-events: none !important;

    animation:
      snoopLandscapeSwipeEdgeHint
      1.9s
      ease-in-out
      infinite !important;
  }


  @keyframes snoopLandscapeSwipeEdgeHint {

    0%,
    100% {
      transform:
        translateY(-50%)
        translateX(0);

      opacity: .70;
    }

    50% {
      transform:
        translateY(-50%)
        translateX(3px);

      opacity: .96;
    }

  }


  @media (prefers-reduced-motion: reduce) {

    .lobby-v5-rooms::after {
      animation: none !important;

      transform:
        translateY(-50%) !important;

      opacity: .84 !important;
    }

  }

}


/* =========================================================
   END MOBILE LANDSCAPE SWIPE HINT V2.3.2
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LANDSCAPE SWIPE HINT V2.4

   PHONE LANDSCAPE ONLY

   Fix:
   - remove floating arrow from card field
   - preserve horizontal room swipe
   - preserve hidden scrollbar
   - move affordance into room heading zone
   - subtle premium chevron only
   - no JS
   - no room/card sizing changes
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* -------------------------------------------------------
     KILL OLD CARD-FIELD AFFORDANCE
  ------------------------------------------------------- */

  .lobby-v5-rooms::after {
    content: none !important;

    display: none !important;

    animation: none !important;
  }


  /* -------------------------------------------------------
     HEADING BECOMES THE AFFORDANCE ANCHOR
  ------------------------------------------------------- */

  .lobby-v5-room-heading {
    position: relative !important;

    padding-right: 30px !important;
  }


  /*
   * Small directional cue beside the room heading metadata.
   * It lives ABOVE the rail, never on top of a room card.
   */
  .lobby-v5-room-heading::after {
    content: "›" !important;

    position: absolute !important;

    right:
      max(
        5px,
        env(safe-area-inset-right)
      ) !important;

    bottom: 1px !important;

    width: 22px !important;
    height: 22px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border:
      1px solid rgba(211, 177, 60, .20) !important;

    border-radius: 50% !important;

    color:
      rgba(229, 194, 67, .82) !important;

    background:
      rgba(5, 28, 20, .52) !important;

    box-shadow:
      0 4px 14px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .025) !important;

    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    pointer-events: none !important;

    animation:
      snoopLandscapeHeadingHint
      1.9s
      ease-in-out
      infinite !important;
  }


  @keyframes snoopLandscapeHeadingHint {

    0%,
    100% {
      transform: translateX(0);
      opacity: .58;
    }

    50% {
      transform: translateX(3px);
      opacity: .92;
    }

  }


  @media (prefers-reduced-motion: reduce) {

    .lobby-v5-room-heading::after {
      animation: none !important;
      transform: none !important;
      opacity: .78 !important;
    }

  }

}


/* =========================================================
   END MOBILE LANDSCAPE SWIPE HINT V2.4
========================================================= */


/* =========================================================
   SNOOP POKER MOBILE LANDSCAPE SWIPE HINT V2.5
   FINAL SMALL-ELEMENT ANCHOR

   PHONE LANDSCAPE ONLY

   - kill V2.4 heading pseudo arrow
   - anchor swipe hint directly to MORE ROOMS COMING
   - arrow follows label naturally
   - never overlays room cards
   - no scrollbar
   - no JS
   - no room sizing changes
========================================================= */

@media
  (max-width: 980px)
  and (orientation: landscape)
  and (max-height: 620px) {


  /* Kill previous heading-level arrow */
  .lobby-v5-room-heading::after {
    content: none !important;
    display: none !important;
    animation: none !important;
  }


  /*
   * MORE ROOMS COMING becomes the exact anchor.
   * Inline-flex keeps label + hint together.
   */
  .lobby-v5-room-heading > small {
    display: inline-flex !important;
    align-items: center !important;

    gap: 9px !important;

    position: relative !important;

    white-space: nowrap !important;
  }


  /*
   * Premium swipe affordance.
   * Because this pseudo-element belongs to <small>,
   * it always stays immediately after MORE ROOMS COMING.
   */
  .lobby-v5-room-heading > small::after {
    content: "›" !important;

    width: 22px !important;
    height: 22px !important;

    flex: 0 0 22px !important;

    display: inline-grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    padding: 0 !important;

    border:
      1px solid rgba(211, 177, 60, .20) !important;

    border-radius: 50% !important;

    color:
      rgba(229, 194, 67, .84) !important;

    background:
      rgba(5, 28, 20, .52) !important;

    box-shadow:
      0 4px 14px rgba(0, 0, 0, .18),
      inset 0 1px 0 rgba(255, 255, 255, .025) !important;

    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    letter-spacing: 0 !important;

    pointer-events: none !important;

    animation:
      snoopLandscapeSmallSwipeHint
      1.9s
      ease-in-out
      infinite !important;
  }


  @keyframes snoopLandscapeSmallSwipeHint {

    0%,
    100% {
      transform: translateX(0);
      opacity: .60;
    }

    50% {
      transform: translateX(3px);
      opacity: .94;
    }

  }


  @media (prefers-reduced-motion: reduce) {

    .lobby-v5-room-heading > small::after {
      animation: none !important;
      transform: none !important;
      opacity: .80 !important;
    }

  }

}


/* =========================================================
   END MOBILE LANDSCAPE SWIPE HINT V2.5
========================================================= */


/* =========================================================
   SNOOP POKER IPHONE SHORT LANDSCAPE V1

   Intended for shorter phone landscape viewports,
   including iPhone 13-class landscape heights.

   IMPORTANT:
   - existing 14 Plus landscape presentation preserved
   - room horizontal swipe preserved
   - swipe hint preserved
   - Whiskey dimensions preserved
   - All Tables preserved
   - desktop / laptop preserved
   - portrait preserved
   - JS untouched

   Goal:
   Give short landscape Safari more natural vertical
   document movement with less wasted space.
========================================================= */

@media
  (max-width: 900px)
  and (orientation: landscape)
  and (max-height: 405px) {


  /* =======================================================
     DOCUMENT / SAFARI SCROLL
  ======================================================= */

  html,
  body {
    min-height: 100% !important;
    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }


  #appScreen,
  #lobbyView {
    min-height: 0 !important;
    height: auto !important;

    overflow: visible !important;
  }


  /*
   * Keep real document taller than the visible Safari
   * viewport and preserve a natural bottom scroll runway.
   */
  #lobbyView {
    padding-bottom:
      max(
        28px,
        env(safe-area-inset-bottom)
      ) !important;
  }


  /* =======================================================
     HEADER — SHORT LANDSCAPE ONLY
  ======================================================= */

  .snoop-app-header {
    min-height: 43px !important;

    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }


  .snoop-header-logo {
    height: 31px !important;
    max-width: 124px !important;
  }


  .snoop-header-balance,
  .snoop-header-player,
  .snoop-header-logout {
    min-height: 34px !important;
    height: 34px !important;
  }


  .snoop-header-chip {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }


  .snoop-header-avatar {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }


  /* =======================================================
     CASH GAMES — REDUCE ONLY EMPTY VERTICAL SPACE
  ======================================================= */

  .lobby-heading-v2 {
    margin-top: 8px !important;
    margin-bottom: 9px !important;
  }


  .lobby-heading-copy h2 {
    margin-top: 2px !important;

    font-size: 23px !important;
  }


  .lobby-heading-copy p {
    margin-top: 4px !important;

    line-height: 1.2 !important;
  }


  /* =======================================================
     ROOM SECTION RHYTHM
  ======================================================= */

  .lobby-v5-rooms {
    margin-top: 6px !important;
  }


  .lobby-v5-room-heading {
    margin-bottom: 6px !important;
  }


  /*
   * DO NOT alter the rail/card geometry.
   * V2.1/V2.2/V2.5 remain responsible for it.
   */
  .lobby-v5-room-rail {
    margin-top: 0 !important;
  }


  /* =======================================================
     TOUCH / SAFARI
  ======================================================= */

  button,
  a {
    touch-action: manipulation;
  }

}


/* =========================================================
   END SNOOP POKER IPHONE SHORT LANDSCAPE V1
========================================================= */


/* =========================================================


/* =========================================================
   SNOOP RESPONSIVE GAME CANVAS V1
   Artwork coordinate system: 1672 x 941
   Desktop / laptop
========================================================= */

@media (min-width: 900px) {

  /* ===== VIEW ===== */

  #tableView.table-view {
    position: relative;
    width: 100%;
    height: calc(100vh - 68px);
    min-height: 600px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #040705;
  }


  /* ===== TOOLBAR ===== */

  #tableView .table-toolbar {
    position: absolute;
    top: 10px;
    left: 50%;

    width: min(1100px, calc(100vw - 70px));
    height: 50px;

    margin: 0;
    transform: translateX(-50%);

    z-index: 500;
  }


  /* ===== ROOM ===== */

  #tableView .poker-room {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #040705;
  }


  /* =======================================================
     MASTER CANVAS

     The background AND all poker elements use this exact
     1672:941 coordinate system.

     Browser size changes -> canvas scales as one object.
  ======================================================= */

  #tableView #pokerTable {
    position: absolute;

    left: 50%;
    top: 50%;

    width: min(
      100vw,
      calc((100vh - 68px) * 1672 / 941)
    );

    aspect-ratio: 1672 / 941;
    height: auto;

    margin: 0;
    padding: 0;

    transform: translate(-50%, -50%);

    overflow: visible;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    background:
      url('/assets/snoop-whiskey-table-v3.png')
      center / 100% 100%
      no-repeat;

    isolation: isolate;
  }

  #tableView #pokerTable::before,
  #tableView #pokerTable::after {
    display: none !important;
  }


  /* =======================================================
     SEAT ANCHOR

     .seat is no longer a visual box.
     It is only an anchor point.
  ======================================================= */

  #tableView #pokerTable .seat,
  #tableView #pokerTable .seat.occupied,
  #tableView #pokerTable .seat.current-turn,
  #tableView #pokerTable .seat.folded,
  #tableView #pokerTable .seat.all-in {
    position: absolute;

    width: 0;
    height: 0;
    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible;

    transform: none;

    z-index: 30;
  }


  /* =======================================================
     SIX ARTWORK ANCHORS

                3
          2           4

       1                 5

                6

     We tune THESE ONCE.
  ======================================================= */

  #tableView #pokerTable .seat[data-visual-seat="1"] {
    left: 27%;
    top: 67%;
  }

  #tableView #pokerTable .seat[data-visual-seat="2"] {
    left: 35%;
    top: 40%;
  }

  #tableView #pokerTable .seat[data-visual-seat="3"] {
    left: 50%;
    top: 35%;
  }

  #tableView #pokerTable .seat[data-visual-seat="4"] {
    left: 65%;
    top: 40%;
  }

  #tableView #pokerTable .seat[data-visual-seat="5"] {
    left: 73%;
    top: 67%;
  }

  #tableView #pokerTable .seat[data-visual-seat="6"] {
    left: 50%;
    top: 81%;
  }


  /* ===== OCCUPIED PLAYER POD ===== */

  #tableView #pokerTable .seat-player {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 116px;
    min-width: 116px;

    box-sizing: border-box;

    transform: translate(-50%, -50%);

    padding: 6px 8px;

    border: 1px solid rgba(221,176,72,.72);
    border-radius: 9px;

    background:
      linear-gradient(
        180deg,
        rgba(29,26,20,.98),
        rgba(9,9,8,.98)
      );

    box-shadow:
      0 6px 14px rgba(0,0,0,.5);

    color: #f6f0e3;

    text-align: center;

    z-index: 5;
  }

  #tableView #pokerTable .seat-player strong {
    display: block;
  }

  #tableView #pokerTable .seat.current-turn .seat-player {
    border-color: #f1c85c;

    box-shadow:
      0 0 0 2px rgba(241,200,92,.14),
      0 0 16px rgba(241,200,92,.24),
      0 6px 14px rgba(0,0,0,.5);
  }


  /* ===== EMPTY SEAT ===== */

  #tableView #pokerTable .empty-seat {
    position: absolute;

    left: 50%;
    top: 50%;

    width: max-content;
    min-width: 76px;
    height: 27px;

    transform: translate(-50%, -50%);

    padding: 0 10px;

    border: 1px solid rgba(221,176,72,.58);
    border-radius: 999px;

    background: rgba(12,12,10,.90);

    box-shadow:
      0 5px 12px rgba(0,0,0,.4);

    color: #ebca78;

    z-index: 5;
  }

  #tableView #pokerTable .empty-seat span {
    display: none;
  }

  #tableView #pokerTable .empty-seat strong {
    font-size: 10px;
    color: #ebca78;
    text-transform: uppercase;
  }

  #tableView #pokerTable .empty-seat strong::before {
    content: "+ ";
  }


  /* =======================================================
     HERO POCKET

       CARDS
       PLAYER POD
       CHAIR

     All attached to seat 6.
  ======================================================= */

  #tableView #pokerTable .seat.hero-seat > .my-hand-panel {
    position: absolute;

    left: 50%;
    bottom: 17px;

    width: 90px;
    height: 68px;

    transform: translateX(-50%);

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;
    box-shadow: none;

    overflow: visible;

    z-index: 12;

    pointer-events: none;
  }

  #tableView #pokerTable .seat.hero-seat .panel-label,
  #tableView #pokerTable .seat.hero-seat .hand-info {
    display: none !important;
  }

  #tableView #pokerTable .seat.hero-seat .my-cards {
    position: relative;

    display: block;

    width: 80px;
    height: 66px;

    margin: 0 auto;
  }

  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card {
    position: absolute;

    bottom: 0;

    width: 46px;
    height: 64px;

    margin: 0;

    transform-origin: 50% 100%;

    border-radius: 6px;

    box-shadow:
      0 5px 12px rgba(0,0,0,.48);
  }

  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card:nth-child(1) {
    left: 3px;
    transform: rotate(-5deg);
    z-index: 1;
  }

  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card:nth-child(2) {
    right: 3px;
    transform: rotate(5deg);
    z-index: 2;
  }


  /* ===== DEALER ===== */

  #tableView #pokerTable .dealer-button {
    position: absolute;

    right: -70px;
    top: -10px;

    z-index: 20;
  }


  /* ===== POT ===== */

  #tableView #pokerTable .pot-display {
    position: absolute;

    left: 50%;
    top: 43%;

    transform: translate(-50%, -50%);

    z-index: 20;
  }


  /* ===== COMMUNITY BOARD ===== */

  #tableView #pokerTable #communityCards {
    position: absolute;

    left: 50%;
    top: 52%;

    transform: translate(-50%, -50%);

    z-index: 20;
  }


  /* ===== SHOWDOWN POCKET ===== */

  #tableView #pokerTable .seat-showdown {
    position: absolute;

    left: 50%;
    bottom: 17px;

    width: 88px;

    transform: translateX(-50%);

    z-index: 15;
  }

  #tableView #pokerTable .seat-showdown-cards {
    position: relative;

    width: 80px;
    height: 66px;

    margin: 0 auto;
  }

  #tableView #pokerTable
  .seat-showdown-cards > :nth-child(1) {
    position: absolute;

    left: 3px;
    bottom: 0;

    transform: rotate(-5deg);

    transform-origin: 50% 100%;

    z-index: 1;
  }

  #tableView #pokerTable
  .seat-showdown-cards > :nth-child(2) {
    position: absolute;

    right: 3px;
    bottom: 0;

    transform: rotate(5deg);

    transform-origin: 50% 100%;

    z-index: 2;
  }


  /* =======================================================
     ACTION DOCK

     Screen UI, not part of seat coordinates.
  ======================================================= */

  #tableView #actionControls {
    position: absolute;

    left: 50%;
    bottom: 7px;

    width: min(710px, calc(100vw - 40px));

    margin: 0;

    transform: translateX(-50%);

    z-index: 600;
  }

}


/* =========================================================
   SNOOP HERO TRUE POCKET V2
   Cards rise from BEHIND player pod
========================================================= */

@media (min-width: 900px) {

  /* Hero anchor remains only a coordinate point */
  #tableView #pokerTable .seat.hero-seat {
    overflow: visible !important;
    z-index: 80 !important;
  }


  /* PLAYER POD = foreground pocket */
  #tableView #pokerTable .seat.hero-seat .seat-player {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 122px !important;
    min-width: 122px !important;

    transform: translate(-50%, -50%) !important;

    padding: 7px 9px !important;

    overflow: visible !important;

    z-index: 30 !important;
  }


  /* Card assembly lives BEHIND player pod */
  #tableView #pokerTable .seat.hero-seat > .my-hand-panel {
    position: absolute !important;

    left: 50% !important;
    top: auto !important;
    bottom: 5px !important;

    width: 96px !important;
    height: 82px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;

    z-index: 10 !important;

    pointer-events: none !important;
  }


  #tableView #pokerTable .seat.hero-seat .my-cards {
    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    display: block !important;

    width: 88px !important;
    height: 76px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    z-index: 10 !important;
  }


  /* Full cards - no clipping */
  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card {
    position: absolute !important;

    bottom: 0 !important;

    width: 48px !important;
    height: 68px !important;

    margin: 0 !important;

    overflow: visible !important;

    transform-origin: 50% 100% !important;

    border-radius: 6px !important;

    z-index: 10 !important;
  }


  /* Left pocket card */
  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card:nth-child(1) {
    left: 4px !important;

    transform:
      translateY(-32px)
      rotate(-4deg) !important;

    z-index: 10 !important;
  }


  /* Right pocket card */
  #tableView #pokerTable .seat.hero-seat
  .my-cards .playing-card:nth-child(2) {
    right: 4px !important;

    transform:
      translateY(-32px)
      rotate(4deg) !important;

    z-index: 11 !important;
  }


  /*
   * Important:
   * player pod is ABOVE the bottom of the cards.
   * This creates the "cards coming out of pocket" effect
   * without actually clipping the cards.
   */
  #tableView #pokerTable .seat.hero-seat .seat-player {
    z-index: 30 !important;
  }


  /* No PRE-FLOP / HIGH CARD text around hero pocket */
  #tableView #pokerTable .seat.hero-seat .panel-label,
  #tableView #pokerTable .seat.hero-seat .hand-info,
  #tableView #pokerTable .seat.hero-seat #handStatus,
  #tableView #pokerTable .seat.hero-seat #handName {
    display: none !important;
  }

}


/* =========================================================
   SNOOP FIXED 1672x941 DESKTOP STAGE V1
   Desktop/laptop use ONE virtual coordinate system.
========================================================= */

@media (min-width: 900px) {

  /*
   * Game viewport.
   * Main site header remains outside the game.
   */
  #tableView.table-view {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    top: 68px !important;
    bottom: 0 !important;

    width: 100vw !important;
    height: calc(100dvh - 68px) !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #040705 !important;
  }


  #tableView .poker-room {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #040705 !important;
  }


  /*
   * REAL MASTER STAGE
   *
   * Internally ALWAYS 1672 x 941.
   * Browser size only changes --stage-scale.
   */
  #tableView #pokerTable {
    --snoop-stage-scale: 1;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 1672px !important;
    height: 941px !important;

    min-width: 1672px !important;
    min-height: 941px !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
      translate(-50%, -50%)
      scale(var(--snoop-stage-scale)) !important;

    transform-origin: center center !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    background:
      url('/assets/snoop-whiskey-table-v3.png')
      center center / 1672px 941px
      no-repeat !important;

    isolation: isolate;
  }


  /*
   * Seat anchors now refer to exact points
   * in the 1672x941 virtual artwork.
   *
   * These values are equivalent to our current percentages.
   * We will tune ONLY these six coordinates next.
   */
  #tableView #pokerTable .seat[data-visual-seat="1"] {
    left: 451px !important;
    top: 630px !important;
  }

  #tableView #pokerTable .seat[data-visual-seat="2"] {
    left: 585px !important;
    top: 376px !important;
  }

  #tableView #pokerTable .seat[data-visual-seat="3"] {
    left: 836px !important;
    top: 329px !important;
  }

  #tableView #pokerTable .seat[data-visual-seat="4"] {
    left: 1087px !important;
    top: 376px !important;
  }

  #tableView #pokerTable .seat[data-visual-seat="5"] {
    left: 1221px !important;
    top: 630px !important;
  }

  #tableView #pokerTable .seat[data-visual-seat="6"] {
    left: 836px !important;
    top: 762px !important;
  }


  /*
   * Toolbar is screen UI.
   * It does NOT affect table coordinates.
   */
  #tableView .table-toolbar {
    position: absolute !important;

    left: 50% !important;
    top: 8px !important;

    width: min(1100px, calc(100vw - 40px)) !important;
    height: 50px !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 1000 !important;
  }


  /*
   * Betting dock is also screen UI.
   */
  #tableView #actionControls {
    position: absolute !important;

    left: 50% !important;
    bottom: 6px !important;

    width: min(710px, calc(100vw - 32px)) !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 1100 !important;
  }

}


/* =========================================================
   SNOOP SEAT CHAIR ANCHORS V2
   1672x941 artwork chair positions
========================================================= */

@media (min-width: 900px) {

  /* LEFT LOWER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="1"] {
    left: 205px !important;
    top: 535px !important;
  }

  /* LEFT UPPER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="2"] {
    left: 475px !important;
    top: 330px !important;
  }

  /* TOP CENTER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="3"] {
    left: 836px !important;
    top: 275px !important;
  }

  /* RIGHT UPPER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="4"] {
    left: 1197px !important;
    top: 330px !important;
  }

  /* RIGHT LOWER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="5"] {
    left: 1467px !important;
    top: 535px !important;
  }

  /* HERO / BOTTOM CENTER CHAIR */
  #tableView #pokerTable .seat[data-visual-seat="6"] {
    left: 836px !important;
    top: 795px !important;
  }

}


/* =========================================================
   SNOOP UNIFIED SEAT UNIT V1
   One anchor -> cards / bet / player / result / dealer
========================================================= */

@media (min-width: 900px) {

  /* -------------------------------------------------------
     COMPLETE OCCUPIED PLAYER ASSEMBLY
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-unit {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 126px !important;
    height: 128px !important;

    transform: translate(-50%, -50%) !important;

    overflow: visible !important;

    pointer-events: none !important;

    z-index: 20 !important;
  }


  /* -------------------------------------------------------
     PLAYER POD
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-unit > .seat-player {
    position: absolute !important;

    left: 50% !important;
    top: 68px !important;

    width: 122px !important;
    min-width: 122px !important;

    transform: translateX(-50%) !important;

    box-sizing: border-box !important;

    padding: 6px 9px !important;

    border: 1px solid rgba(221,176,72,.78) !important;
    border-radius: 9px !important;

    background:
      linear-gradient(
        180deg,
        rgba(29,26,20,.98),
        rgba(8,8,7,.98)
      ) !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.50) !important;

    text-align: center !important;

    z-index: 30 !important;
  }


  #tableView #pokerTable
  .seat-unit > .seat-player strong {
    display: block !important;

    line-height: 1.15 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  #tableView #pokerTable
  .seat-unit > .seat-player span {
    display: block !important;

    margin-top: 2px !important;

    white-space: nowrap !important;
  }


  /* -------------------------------------------------------
     CARD ZONE
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-card-zone {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    width: 86px !important;
    height: 76px !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;

    z-index: 20 !important;
  }


  #tableView #pokerTable
  .seat-card-zone .opponent-hole-cards {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    width: 82px !important;
    height: 70px !important;

    transform: translateX(-50%) !important;

    pointer-events: none !important;
  }


  #tableView #pokerTable .opponent-card-back {
    position: absolute !important;

    bottom: 0 !important;

    display: block !important;

    width: 45px !important;
    height: 63px !important;

    box-sizing: border-box !important;

    border: 2px solid rgba(229,190,82,.94) !important;
    border-radius: 6px !important;

    background:
      radial-gradient(
        circle at center,
        rgba(39,205,162,.70) 0 4px,
        transparent 5px
      ),
      repeating-linear-gradient(
        45deg,
        #063f35 0 4px,
        #07594a 4px 8px
      ) !important;

    box-shadow:
      inset 0 0 0 3px rgba(4,24,21,.86),
      0 5px 12px rgba(0,0,0,.48) !important;

    transform-origin: 50% 100% !important;
  }


  #tableView #pokerTable
  .opponent-card-back:nth-child(1) {
    left: 3px !important;

    transform: rotate(-5deg) !important;

    z-index: 1 !important;
  }


  #tableView #pokerTable
  .opponent-card-back:nth-child(2) {
    right: 3px !important;

    transform: rotate(5deg) !important;

    z-index: 2 !important;
  }


  /* -------------------------------------------------------
     SHOWDOWN OPEN CARDS
     Same physical card zone — no second pocket.
  ------------------------------------------------------- */

  #tableView #pokerTable
  .opponent-hole-cards.showdown-open
  .showdown-card {
    position: absolute !important;

    bottom: 0 !important;

    width: 45px !important;
    height: 63px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    transform-origin: 50% 100% !important;
  }


  #tableView #pokerTable
  .opponent-hole-cards.showdown-open
  .showdown-card:nth-child(1) {
    left: 3px !important;

    transform: rotate(-5deg) !important;
  }


  #tableView #pokerTable
  .opponent-hole-cards.showdown-open
  .showdown-card:nth-child(2) {
    right: 3px !important;

    transform: rotate(5deg) !important;
  }


  /* -------------------------------------------------------
     BET — separate from player pod
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-bet {
    position: absolute !important;

    left: 50% !important;
    top: -20px !important;

    transform: translateX(-50%) !important;

    padding: 3px 7px !important;

    border-radius: 999px !important;

    background: rgba(4,8,6,.90) !important;

    color: #f0cf77 !important;

    font-size: 10px !important;
    font-weight: 700 !important;

    white-space: nowrap !important;

    z-index: 40 !important;
  }


  /* -------------------------------------------------------
     SHOWDOWN RESULT
     Never inside player pod.
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-result-zone {
    position: absolute !important;

    left: 50% !important;
    top: 111px !important;

    width: 160px !important;

    transform: translateX(-50%) !important;

    text-align: center !important;

    z-index: 45 !important;
  }


  #tableView #pokerTable
  .seat-result-zone .seat-showdown {
    position: static !important;

    width: auto !important;

    margin: 0 !important;

    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }


  #tableView #pokerTable
  .seat-result-zone .seat-showdown-hand {
    display: block !important;

    font-size: 9px !important;

    white-space: nowrap !important;
  }


  #tableView #pokerTable
  .seat-result-zone .seat-showdown-winner {
    display: block !important;

    margin-top: 2px !important;

    font-size: 11px !important;

    white-space: nowrap !important;
  }


  /* -------------------------------------------------------
     DEALER belongs to the seat unit.
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat-unit > .dealer-button {
    position: absolute !important;

    right: -5px !important;
    top: 59px !important;

    z-index: 50 !important;
  }


  /* -------------------------------------------------------
     TURN
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat.current-turn .seat-unit > .seat-player {
    border-color: #f1c85c !important;

    box-shadow:
      0 0 0 2px rgba(241,200,92,.14),
      0 0 16px rgba(241,200,92,.26),
      0 6px 14px rgba(0,0,0,.50) !important;
  }


  /* -------------------------------------------------------
     IMPORTANT:
     no per-seat occupied transforms anymore.
     The whole unit uses the seat anchor.
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat.occupied > .seat-unit {
    transform: translate(-50%, -50%) !important;
  }


  /*
   * HERO keeps its existing open-card my-hand-panel.
   * Do not show opponent card zone for hero.
   */
  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone {
    display: none !important;
  }

}


/* =========================================================
   SNOOP TRUE TABLE FULLSCREEN V1
   Fullscreen affects game viewport only.
   1672x941 master coordinates remain unchanged.
========================================================= */

@media (min-width: 900px) {

  #tableView:fullscreen,
  #tableView:-webkit-full-screen {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    background: #040705 !important;
  }

  #tableView:fullscreen .poker-room,
  #tableView:-webkit-full-screen .poker-room {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
  }

  /*
   * Screen UI stays above the artwork.
   */
  #tableView:fullscreen .table-toolbar,
  #tableView:-webkit-full-screen .table-toolbar {
    top: 10px !important;
  }

  #tableView:fullscreen #actionControls,
  #tableView:-webkit-full-screen #actionControls {
    bottom: 8px !important;
  }

  /*
   * Fullscreen control:
   * subtle normally, brighter on hover.
   */
  #tableView .snoop-fullscreen-btn {
    transition:
      border-color .18s ease,
      background .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
  }

  #tableView .snoop-fullscreen-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(218, 180, 95, .85);
    background: rgba(76, 57, 25, .72);
    box-shadow:
      0 0 0 1px rgba(218, 180, 95, .18),
      0 5px 18px rgba(0, 0, 0, .32);
  }
}


/* =========================================================
   SNOOP TABLE HUD GRID V1
   Whiskey Room desktop toolbar layout
   Visual only — no game/state logic.
========================================================= */

@media (min-width: 900px) {

  /*
   * Full-width HUD layer.
   * It floats above the 1672x941 artwork and does not
   * participate in the table coordinate system.
   */
  #tableView .table-toolbar {
    position: absolute !important;

    left: 24px !important;
    right: 24px !important;
    top: 12px !important;

    width: auto !important;
    height: 58px !important;

    margin: 0 !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns:
      minmax(440px, 1fr)
      minmax(280px, 420px)
      minmax(180px, 1fr) !important;

    align-items: start !important;
    column-gap: 18px !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: none;
    z-index: 1200 !important;
  }


  /* -------------------------
     LEFT CONTROL GRID
  ------------------------- */

  #tableView .table-nav-controls {
    grid-column: 1;

    justify-self: start;

    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;

    align-items: center !important;
    gap: 7px !important;

    padding: 5px !important;

    border: 1px solid rgba(185, 139, 48, .22);
    border-radius: 12px;

    background:
      linear-gradient(
        180deg,
        rgba(5, 13, 11, .88),
        rgba(3, 8, 7, .72)
      );

    box-shadow:
      0 8px 28px rgba(0, 0, 0, .30),
      inset 0 1px rgba(255, 255, 255, .025);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    pointer-events: auto;
  }


  #tableView .table-nav-controls .secondary-btn {
    min-width: 94px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border:
      1px solid rgba(194, 151, 60, .38) !important;
    border-radius: 8px !important;

    background:
      linear-gradient(
        180deg,
        rgba(24, 37, 32, .94),
        rgba(10, 19, 16, .94)
      ) !important;

    box-shadow:
      inset 0 1px rgba(255, 255, 255, .04),
      0 3px 10px rgba(0, 0, 0, .20) !important;

    color: #f5f0e5 !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    cursor: pointer;

    transition:
      color .16s ease,
      border-color .16s ease,
      background .16s ease,
      box-shadow .16s ease,
      transform .16s ease !important;
  }


  /*
   * Mouse hover = gold illumination.
   */
  #tableView .table-nav-controls
  .secondary-btn:not(.danger):hover {
    color: #fff7d7 !important;

    border-color:
      rgba(231, 188, 83, .92) !important;

    background:
      linear-gradient(
        180deg,
        rgba(91, 67, 24, .96),
        rgba(48, 35, 13, .96)
      ) !important;

    box-shadow:
      0 0 0 1px rgba(232, 189, 82, .13),
      0 0 18px rgba(213, 164, 55, .18),
      0 6px 16px rgba(0, 0, 0, .30) !important;

    transform: translateY(-1px);
  }


  /*
   * Leave Table gets its own red state.
   */
  #tableView .table-nav-controls
  .secondary-btn.danger {
    border-color:
      rgba(166, 71, 57, .55) !important;

    background:
      linear-gradient(
        180deg,
        rgba(71, 31, 27, .95),
        rgba(38, 17, 15, .95)
      ) !important;
  }


  #tableView .table-nav-controls
  .secondary-btn.danger:hover {
    border-color:
      rgba(232, 99, 77, .95) !important;

    background:
      linear-gradient(
        180deg,
        rgba(145, 49, 38, .98),
        rgba(86, 27, 21, .98)
      ) !important;

    box-shadow:
      0 0 18px rgba(199, 63, 45, .20),
      0 6px 16px rgba(0, 0, 0, .30) !important;

    transform: translateY(-1px);
  }


  /* -------------------------
     CENTER ROOM TITLE
  ------------------------- */

  #tableView .table-title {
    grid-column: 2;

    justify-self: center;

    min-width: 280px !important;

    margin: 0 !important;
    padding: 4px 22px 7px !important;

    text-align: center !important;

    border: 0 !important;
    border-radius: 0 0 12px 12px;

    background:
      linear-gradient(
        180deg,
        rgba(3, 10, 9, .84),
        rgba(3, 10, 9, .38),
        transparent
      ) !important;

    pointer-events: none;
  }


  #tableView .table-title h2 {
    margin: 0 !important;

    color: #f7f2e7 !important;

    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;

    letter-spacing: -.25px !important;

    text-shadow:
      0 2px 8px rgba(0, 0, 0, .80) !important;
  }


  #tableView .table-title span {
    display: block !important;

    margin-top: 5px !important;

    color: #d8c89d !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: .35px !important;

    text-shadow:
      0 2px 6px rgba(0, 0, 0, .85) !important;
  }


  /* -------------------------
     RIGHT CONNECTION STATE
  ------------------------- */

  #tableView .connection-status {
    grid-column: 3;

    justify-self: end;

    margin: 7px 0 0 !important;
    padding: 7px 11px !important;

    border:
      1px solid rgba(167, 135, 66, .22) !important;
    border-radius: 999px !important;

    background:
      rgba(4, 12, 10, .72) !important;

    color: #c9c9c9 !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    box-shadow:
      0 4px 16px rgba(0, 0, 0, .24) !important;

    pointer-events: auto;
  }


  #tableView .connection-status.connected {
    color: #9de7ba !important;
  }


  /*
   * Fullscreen uses exactly the same grid.
   * Only move it a few pixels away from the screen edge.
   */
  #tableView:fullscreen .table-toolbar,
  #tableView:-webkit-full-screen .table-toolbar {
    left: 24px !important;
    right: 24px !important;
    top: 12px !important;

    width: auto !important;
  }

}


/* =========================================================
   SNOOP TABLE HUD GRID V1.1
   Final toolbar geometry + hidden-state fix
========================================================= */

@media (min-width: 900px) {

  /* CRITICAL:
     Never allow toolbar styling to override HTML hidden state. */
  #tableView .table-nav-controls [hidden] {
    display: none !important;
  }

  /*
   * Give the HUD breathing room from screen edges.
   */
  #tableView .table-toolbar {
    left: 32px !important;
    right: 32px !important;
    top: 16px !important;

    grid-template-columns:
      minmax(470px, 1fr)
      360px
      minmax(170px, 1fr) !important;

    column-gap: 22px !important;
  }

  /*
   * Slightly more compact control group.
   */
  #tableView .table-nav-controls {
    gap: 6px !important;
    padding: 4px !important;
  }

  #tableView .table-nav-controls .secondary-btn {
    min-width: 96px !important;
    height: 40px !important;
    padding: 0 14px !important;
  }

  /*
   * Whiskey Room plate.
   */
  #tableView .table-title {
    width: 330px !important;
    min-width: 330px !important;

    padding: 7px 18px 10px !important;

    border-left:
      1px solid rgba(190, 150, 66, .10) !important;
    border-right:
      1px solid rgba(190, 150, 66, .10) !important;
    border-bottom:
      1px solid rgba(190, 150, 66, .16) !important;

    border-radius: 0 0 14px 14px !important;

    background:
      linear-gradient(
        180deg,
        rgba(2, 9, 8, .94) 0%,
        rgba(3, 12, 10, .82) 68%,
        rgba(3, 12, 10, .30) 100%
      ) !important;

    box-shadow:
      0 9px 22px rgba(0, 0, 0, .20) !important;
  }

  #tableView .table-title h2 {
    font-size: 25px !important;
  }

  /*
   * Connection badge belongs to HUD rather than screen edge.
   */
  #tableView .connection-status {
    margin-top: 5px !important;
    margin-right: 4px !important;

    min-width: 92px !important;

    text-align: center !important;
  }

  #tableView:fullscreen .table-toolbar,
  #tableView:-webkit-full-screen .table-toolbar {
    left: 32px !important;
    right: 32px !important;
    top: 16px !important;
  }

}



/* =========================================================
   SNOOP POKER CLIENT TOP HUD V2
   Lobby left / Room patch center / Full Screen right
========================================================= */

@media (min-width: 900px) {

  #tableView .table-toolbar {
    position: absolute !important;
    inset: auto !important;

    left: 24px !important;
    right: 24px !important;
    top: 18px !important;

    width: auto !important;
    height: 72px !important;

    display: grid !important;
    grid-template-columns: 1fr 430px 1fr !important;
    align-items: start !important;

    column-gap: 20px !important;

    transform: none !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;

    z-index: 1500 !important;
  }


  /* -----------------------------------------------
     LEFT
  ------------------------------------------------ */

  #tableView .table-nav-controls {
    grid-column: 1 !important;

    justify-self: start !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;

    pointer-events: auto !important;
  }


  /*
   * During this layout stage only Lobby remains in
   * the left corner. Sit/Leave controls will receive
   * their permanent game location later.
   */
  #tableView #sitOutBtn,
  #tableView #sitInBtn,
  #tableView #leaveTableBtn {
    display: none !important;
  }


  #tableView #backToLobbyBtn {
    min-width: 104px !important;
    height: 42px !important;

    padding: 0 17px !important;

    border:
      1px solid rgba(188, 151, 73, .35) !important;
    border-radius: 22px !important;

    background:
      linear-gradient(
        180deg,
        rgba(14, 25, 21, .90),
        rgba(5, 12, 10, .88)
      ) !important;

    color: #eee7d7 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.28),
      inset 0 1px rgba(255,255,255,.04) !important;
  }


  #tableView #backToLobbyBtn:hover {
    color: #fff4ca !important;

    border-color:
      rgba(225, 183, 85, .92) !important;

    background:
      linear-gradient(
        180deg,
        rgba(79, 59, 24, .96),
        rgba(36, 28, 13, .96)
      ) !important;

    box-shadow:
      0 0 18px rgba(213,164,55,.18),
      0 6px 18px rgba(0,0,0,.34) !important;

    transform: translateY(-1px) !important;
  }


  /* -----------------------------------------------
     CENTER — ROOM PATCH
  ------------------------------------------------ */

  #tableView .table-title {
    grid-column: 2 !important;

    justify-self: center !important;

    box-sizing: border-box !important;

    width: 430px !important;
    min-width: 430px !important;

    margin: -18px 0 0 !important;
    padding: 18px 24px 15px !important;

    text-align: center !important;

    border:
      1px solid rgba(176, 137, 57, .30) !important;
    border-top: 0 !important;

    border-radius: 0 0 18px 18px !important;

    background:
      linear-gradient(
        180deg,
        rgba(4, 13, 11, .97) 0%,
        rgba(5, 17, 14, .94) 62%,
        rgba(4, 13, 11, .88) 100%
      ) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.40),
      inset 0 -1px rgba(221,177,77,.08) !important;

    pointer-events: none !important;
  }


  #tableView .table-title h2 {
    margin: 0 !important;

    color: #f1e5c8 !important;

    font-family:
      Georgia,
      "Times New Roman",
      serif !important;

    font-size: 31px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;

    letter-spacing: .2px !important;

    text-shadow:
      0 2px 8px rgba(0,0,0,.85) !important;
  }


  #tableView .table-title span {
    display: block !important;

    margin-top: 7px !important;

    color: #d4c19a !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;

    letter-spacing: .2px !important;

    text-shadow:
      0 2px 5px rgba(0,0,0,.90) !important;
  }


  /* -----------------------------------------------
     RIGHT — FULL SCREEN
  ------------------------------------------------ */

  #tableView #fullscreenTableBtn {
    position: fixed !important;

    top: 86px !important;
    right: 30px !important;

    min-width: 132px !important;
    height: 42px !important;

    padding: 0 17px !important;

    border:
      1px solid rgba(188,151,73,.35) !important;
    border-radius: 22px !important;

    background:
      linear-gradient(
        180deg,
        rgba(14,25,21,.90),
        rgba(5,12,10,.88)
      ) !important;

    color: #eee7d7 !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    box-shadow:
      0 5px 18px rgba(0,0,0,.28),
      inset 0 1px rgba(255,255,255,.04) !important;

    z-index: 1600 !important;
  }


  #tableView #fullscreenTableBtn:hover {
    color: #fff4ca !important;

    border-color:
      rgba(225,183,85,.92) !important;

    background:
      linear-gradient(
        180deg,
        rgba(79,59,24,.96),
        rgba(36,28,13,.96)
      ) !important;

    box-shadow:
      0 0 18px rgba(213,164,55,.18),
      0 6px 18px rgba(0,0,0,.34) !important;

    transform: translateY(-1px) !important;
  }


  /*
   * Connection status is useful but should not compete
   * with the poker HUD.
   */
  #tableView .connection-status {
    position: fixed !important;

    right: 35px !important;
    top: 135px !important;

    margin: 0 !important;

    min-width: 0 !important;

    padding: 5px 9px !important;

    font-size: 10px !important;

    opacity: .82;

    pointer-events: none !important;

    z-index: 1500 !important;
  }


  /* -----------------------------------------------
     TRUE FULLSCREEN
  ------------------------------------------------ */

  #tableView:fullscreen .table-toolbar,
  #tableView:-webkit-full-screen .table-toolbar {
    left: 24px !important;
    right: 24px !important;
    top: 18px !important;
  }


  #tableView:fullscreen #fullscreenTableBtn,
  #tableView:-webkit-full-screen #fullscreenTableBtn {
    top: 18px !important;
    right: 24px !important;
  }


  #tableView:fullscreen .connection-status,
  #tableView:-webkit-full-screen .connection-status {
    top: 68px !important;
    right: 29px !important;
  }

}


/* =========================================================
   SNOOP TOP HUD FINAL CLEANUP
========================================================= */

@media (min-width: 900px) {
  #tableView .connection-status {
    display: none !important;
  }
}



/* =========================================================
   SNOOP STAGE-BOUND TOP CONTROLS V1

   Lobby and Full Screen follow the visible boundaries of
   the scaled 1672x941 Whiskey artwork instead of viewport.
========================================================= */

@media (min-width: 900px) {

  /*
   * Toolbar itself begins/ends inside the artwork.
   * 16px = safe inset from the scaled stage boundary.
   */
  #tableView .table-toolbar {
    left:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;

    width: auto !important;
  }


  /*
   * Lobby remains inside the left edge of Whiskey stage.
   */
  #tableView #backToLobbyBtn {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }


  /*
   * Full Screen previously used position:fixed/right:30px.
   * Anchor it to the scaled stage's right edge instead.
   */
  #tableView #fullscreenTableBtn {
    position: fixed !important;

    left: auto !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;

    top: 86px !important;
  }


  /*
   * In true fullscreen there is no website header.
   * Same stage-bound horizontal positioning, higher Y.
   */
  #tableView:fullscreen .table-toolbar,
  #tableView:-webkit-full-screen .table-toolbar {
    left:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;
  }


  #tableView:fullscreen #fullscreenTableBtn,
  #tableView:-webkit-full-screen #fullscreenTableBtn {
    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 16px
      ) !important;

    top: 18px !important;
  }

}


/* =========================================================
   SNOOP FULLSCREEN TITLE CONTROL V1
   Fullscreen control lives beside the centered room patch.
========================================================= */

@media (min-width: 900px) {

  /*
   * Full Screen no longer occupies the artwork's
   * right-hand SNOOP POKER sign.
   *
   * 50% = viewport center
   * 215px = half of the 430px room-title patch
   * 12px = breathing room
   */
  #tableView #fullscreenTableBtn {
    position: fixed !important;

    top: 84px !important;

    left:
      calc(50% + 215px + 12px) !important;

    right: auto !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 50% !important;

    font-size: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 1600 !important;
  }

  /*
   * Stable fullscreen icon.
   * We do not depend on the text inside the button.
   */
  #tableView #fullscreenTableBtn::before {
    content: "⛶";

    display: block;

    color: #eee7d7;

    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
  }

  #tableView #fullscreenTableBtn:hover::before {
    color: #fff4ca;
  }


  /*
   * True fullscreen:
   * header disappears, so the title moves upward.
   * Keep the icon beside that same title patch.
   */
  #tableView:fullscreen #fullscreenTableBtn,
  #tableView:-webkit-full-screen #fullscreenTableBtn {
    top: 18px !important;

    left:
      calc(50% + 215px + 12px) !important;

    right: auto !important;
  }

}


/* =========================================================
   SNOOP FULLSCREEN CORNER CONTROL V2
   Fullscreen icon follows the top-right corner
   of the scaled Whiskey stage.
========================================================= */

@media (min-width: 900px) {

  #tableView #fullscreenTableBtn {
    position: fixed !important;

    /*
     * Stay INSIDE the scaled 1672x941 stage.
     * 18px inset from its right edge.
     */
    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 18px
      ) !important;

    left: auto !important;

    /*
     * Normal mode begins below the 68px website header.
     */
    top: 78px !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;

    padding: 0 !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    font-size: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background:
      rgba(4, 14, 11, .82) !important;

    border:
      1px solid rgba(205, 164, 74, .38) !important;

    box-shadow:
      0 5px 16px rgba(0,0,0,.30) !important;

    z-index: 1600 !important;
  }

  #tableView #fullscreenTableBtn::before {
    content: "⛶";

    color: #eee7d7 !important;

    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  #tableView #fullscreenTableBtn:hover {
    border-color:
      rgba(225,183,85,.90) !important;

    background:
      rgba(73,54,21,.94) !important;

    box-shadow:
      0 0 16px rgba(213,164,55,.20),
      0 5px 16px rgba(0,0,0,.34) !important;

    transform: translateY(-1px) !important;
  }

  /*
   * No website header in true fullscreen.
   */
  #tableView:fullscreen #fullscreenTableBtn,
  #tableView:-webkit-full-screen #fullscreenTableBtn {
    top: 10px !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 18px
      ) !important;

    left: auto !important;
  }

}


/* =========================================================
   SNOOP FULLSCREEN CORNER CONTROL V2.1
   Top-right 90-degree corner final position
========================================================= */

@media (min-width: 900px) {

  #tableView #fullscreenTableBtn {
    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 5px
      ) !important;

    top: 72px !important;
  }

  #tableView:fullscreen #fullscreenTableBtn,
  #tableView:-webkit-full-screen #fullscreenTableBtn {
    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 5px
      ) !important;

    top: 5px !important;
  }

}


/* =========================================================
   SNOOP DIRECTIONAL TABLE BET POSITIONS V1
   Bet belongs on felt, separate from cards/player pod.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-bet {
    position: absolute !important;

    width: max-content !important;
    min-width: 0 !important;

    padding: 4px 8px !important;

    border: 1px solid rgba(226, 181, 67, .58) !important;
    border-radius: 999px !important;

    background: rgba(5, 13, 10, .94) !important;

    color: #ffd95b !important;

    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    box-shadow:
      0 3px 10px rgba(0, 0, 0, .42) !important;

    z-index: 20 !important;

    pointer-events: none !important;
  }


  /*
   * Visual seat 1 — left/lower chair.
   * Bet goes inward: right + up onto felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 112px !important;
    top: -40px !important;

    right: auto !important;
    bottom: auto !important;

    transform: none !important;
  }


  /*
   * Visual seat 2 — left/upper chair.
   * Bet goes right/down onto felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 105px !important;
    top: 92px !important;

    right: auto !important;
    bottom: auto !important;

    transform: none !important;
  }


  /*
   * Visual seat 3 — top chair.
   * Bet goes straight down onto felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    top: 128px !important;

    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
  }


  /*
   * Visual seat 4 — right/upper chair.
   * Bet goes left/down onto felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 105px !important;
    top: 92px !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;
  }


  /*
   * Visual seat 5 — right/lower chair.
   * Bet goes left/up onto felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 112px !important;
    top: -40px !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;
  }


  /*
   * Visual seat 6 — HERO / bottom center.
   *
   * Cards stay with player.
   * Bet moves ABOVE them and onto the felt.
   */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    top: -102px !important;

    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP VISUAL SEAT 5 BET FELT FIX V1
   Right-side player's chips belong on the felt :-)
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 178px !important;
    top: -52px !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;
  }

}


/* =========================================================
   SNOOP VISUAL SEAT 5 BET FELT FIX V1.1
   Move right-side bet deeper onto green felt
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 223px !important;
    top: -27px !important;

    left: auto !important;
    bottom: auto !important;

    transform: none !important;
  }

}


/* =========================================================
   SNOOP TABLE READABILITY V1
   Cards / player pods / pot / showdown readability
========================================================= */

@media (min-width: 900px) {

  /* ---------- POT ---------- */

  #tableView #pokerTable .pot-display {
    min-width: 92px !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }

  #tableView #pokerTable .pot-display span {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    color: rgba(255,255,255,.88) !important;
  }

  #tableView #pokerTable .pot-display strong {
    display: block !important;
    margin-top: 3px !important;
    font-size: 23px !important;
    line-height: 1 !important;
    color: #f2cf67 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.75) !important;
  }


  /* ---------- PLAYER POD ---------- */

  #tableView #pokerTable .seat-unit > .seat-player,
  #tableView #pokerTable .seat.hero-seat .seat-player {
    width: 132px !important;
    min-width: 132px !important;
    padding: 7px 10px !important;
  }

  #tableView #pokerTable .seat-unit > .seat-player strong,
  #tableView #pokerTable .seat.hero-seat .seat-player strong {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  #tableView #pokerTable .seat-unit > .seat-player span,
  #tableView #pokerTable .seat.hero-seat .seat-player span {
    margin-top: 4px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
  }



  /* ---------- OPPONENT CARDS ---------- */

  #tableView #pokerTable .seat-card-zone {
    width: 94px !important;
    height: 82px !important;
  }

  #tableView #pokerTable
  .seat-card-zone .opponent-hole-cards {
    width: 90px !important;
    height: 78px !important;
  }

  #tableView #pokerTable .opponent-card-back,
  #tableView #pokerTable
  .opponent-hole-cards.showdown-open .showdown-card {
    width: 49px !important;
    height: 69px !important;
  }


  /* ---------- SHOWDOWN RESULT ---------- */

  #tableView #pokerTable
  .seat-result-zone .seat-showdown-hand {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.85) !important;
  }

  #tableView #pokerTable
  .seat-result-zone .seat-showdown-winner {
    margin-top: 3px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #f2cf67 !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.90) !important;
  }


  /* ---------- DEALER BUTTON ---------- */

  #tableView #pokerTable .seat-unit > .dealer-button {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;
    border: 2px solid rgba(202,165,77,.90) !important;

    background: #f4f0df !important;
    color: #17130c !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    box-shadow: 0 3px 8px rgba(0,0,0,.55) !important;
  }

}


/* =========================================================
   SNOOP HERO CARDS VISIBILITY FIX V1
   Restore hero cards above player pod
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat.hero-seat > .my-hand-panel {
    width: 110px !important;
    height: 90px !important;

    left: 50% !important;
    bottom: 10px !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
    z-index: 40 !important;
  }

  #tableView #pokerTable
  .seat.hero-seat .my-cards {
    position: absolute !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 100px !important;
    height: 82px !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
    z-index: 41 !important;
  }

  #tableView #pokerTable
  .seat.hero-seat .my-cards .playing-card {
    position: absolute !important;

    bottom: 0 !important;

    width: 54px !important;
    height: 76px !important;

    margin: 0 !important;

    border-radius: 7px !important;

    z-index: 42 !important;
  }

  #tableView #pokerTable
  .seat.hero-seat .my-cards .playing-card:nth-child(1) {
    left: 3px !important;
    right: auto !important;

    transform: rotate(-3deg) !important;
  }

  #tableView #pokerTable
  .seat.hero-seat .my-cards .playing-card:nth-child(2) {
    left: auto !important;
    right: 3px !important;

    transform: rotate(3deg) !important;
  }

}


/* =========================================================
   SNOOP HERO CARDS POCKET POSITION V1
   Lift hero cards above player pod
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat.hero-seat > .my-hand-panel {
    bottom: 35px !important;
  }

}


/* =========================================================
   SNOOP HERO POCKET FINAL POSITION V1
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat.hero-seat > .my-hand-panel {
    bottom: 24px !important;
  }

}


/* =========================================================
   SNOOP 6-SEAT FELT BET GEOMETRY V2
   One symmetric inward betting line for all six seats.
   Later the real chip stack + amount will use these anchors.
========================================================= */

@media (min-width: 900px) {

  /* LEFT LOWER -> inward / upper-right */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 170px !important;
    right: auto !important;
    top: -42px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* LEFT UPPER -> inward / lower-right */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 150px !important;
    right: auto !important;
    top: 105px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* TOP CENTER -> straight inward / down */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 145px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* RIGHT UPPER -> inward / lower-left */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 150px !important;
    left: auto !important;
    top: 105px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* RIGHT LOWER -> inward / upper-left */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 170px !important;
    left: auto !important;
    top: -42px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* HERO -> straight inward / up */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -125px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP FELT CHIP BETS V1
   Absolute-style chip stack + numeric street contribution
========================================================= */

@media (min-width: 900px) {

  /* ---------- BET UNIT ---------- */

  #tableView #pokerTable .seat-bet {
    position: absolute !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    width: max-content !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    white-space: nowrap !important;

    z-index: 36 !important;
    pointer-events: none !important;
  }


  /* ---------- CHIP STACK ---------- */

  #tableView #pokerTable .bet-chip-stack {
    position: relative !important;

    display: block !important;

    width: 31px !important;
    height: 31px !important;

    flex: 0 0 31px !important;
  }

  #tableView #pokerTable .bet-chip {
    position: absolute !important;

    left: 0 !important;

    display: block !important;

    width: 29px !important;
    height: 29px !important;

    border-radius: 50% !important;

    background:
      url('/assets/header/snoop-poker-chip.png')
      center center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.70)) !important;
  }

  #tableView #pokerTable .bet-chip-1 {
    bottom: 0 !important;
    z-index: 4 !important;
  }

  #tableView #pokerTable .bet-chip-2 {
    bottom: 4px !important;
    z-index: 3 !important;
  }

  #tableView #pokerTable .bet-chip-3 {
    bottom: 8px !important;
    z-index: 2 !important;
  }

  #tableView #pokerTable .bet-chip-4 {
    bottom: 12px !important;
    z-index: 1 !important;
  }


  /* ---------- AMOUNT ---------- */

  #tableView #pokerTable .bet-chip-amount {
    display: block !important;

    min-width: 20px !important;

    color: #f7e2a0 !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    letter-spacing: .1px !important;

    text-shadow:
      0 2px 2px rgba(0,0,0,.95),
      0 0 5px rgba(0,0,0,.65) !important;
  }


  /* =======================================================
     FINAL FELT ANCHORS
     Push all bets deeper inside the green playing surface.
  ======================================================= */

  /* LEFT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 205px !important;
    right: auto !important;
    top: -65px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* LEFT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 180px !important;
    right: auto !important;
    top: 118px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* TOP */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 165px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* RIGHT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 180px !important;
    left: auto !important;
    top: 118px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* RIGHT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 205px !important;
    left: auto !important;
    top: -65px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* HERO */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -155px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP BET ANCHORS INSIDE FELT V3
   All six street-bet positions live inside green felt.
========================================================= */

@media (min-width: 900px) {

  /* 1 — LEFT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 255px !important;
    right: auto !important;
    top: -85px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 2 — LEFT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 215px !important;
    right: auto !important;
    top: 135px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 3 — TOP CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 185px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* 4 — RIGHT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 215px !important;
    left: auto !important;
    top: 135px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 5 — RIGHT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 255px !important;
    left: auto !important;
    top: -85px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 6 — HERO */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -185px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP FELT BET GEOMETRY V4
   Bet coordinates are LOCAL to the 126x128 seat-unit.
   Keep every wager inside the green felt.
========================================================= */

@media (min-width: 900px) {

  /*
   * seat-unit center is roughly (63,64).
   * Each bet travels only toward the table center.
   */

  /* 1 — LEFT LOWER -> upper-right */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 145px !important;
    right: auto !important;
    top: -45px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 2 — LEFT UPPER -> lower-right */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 140px !important;
    right: auto !important;
    top: 105px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 3 — TOP CENTER -> down */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 135px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* 4 — RIGHT UPPER -> lower-left */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 140px !important;
    left: auto !important;
    top: 105px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 5 — RIGHT LOWER -> upper-left */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 145px !important;
    left: auto !important;
    top: -45px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 6 — HERO -> up */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -105px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP FELT BET GEOMETRY V5
   Fine tune after live 3-player test.
========================================================= */

@media (min-width: 900px) {

  /* 1 — LEFT LOWER: deeper onto felt */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 205px !important;
    right: auto !important;
    top: -20px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 2 — LEFT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 175px !important;
    right: auto !important;
    top: 115px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 3 — TOP CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 150px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* 4 — RIGHT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 175px !important;
    left: auto !important;
    top: 115px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 5 — RIGHT LOWER: deeper onto felt */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 205px !important;
    left: auto !important;
    top: -20px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 6 — HERO: closer to hero, away from board */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -65px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP SIX PLAYER BETTING LANES V6
   Symmetric wager positions for all 6 visual seats.
========================================================= */

@media (min-width: 900px) {

  /* 1 — LEFT LOWER
     player -> upper/right -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 245px !important;
    right: auto !important;
    top: -35px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 2 — LEFT UPPER
     player -> lower/right -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 225px !important;
    right: auto !important;
    top: 145px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 3 — TOP CENTER
     player -> down -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 180px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* 4 — RIGHT UPPER
     player -> lower/left -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 225px !important;
    left: auto !important;
    top: 145px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 5 — RIGHT LOWER
     player -> upper/left -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 245px !important;
    left: auto !important;
    top: -35px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* 6 — HERO
     player -> up -> felt */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -115px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP TABLE CONTROL HIDDEN SAFETY V1
   HTML hidden state always wins over temporary desktop rules.
========================================================= */
#tableView #sitOutBtn[hidden],
#tableView #sitInBtn[hidden],
#tableView #leaveTableBtn[hidden] {
  display: none !important;
}


/* =========================================================
   SNOOP TEMP LEAVE TABLE TEST CONTROL V1
   Temporary desktop control for spectator / seat-flow testing.
========================================================= */
@media (min-width: 900px) {

  #tableView #leaveTableBtn:not([hidden]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 110px !important;
    height: 42px !important;
    padding: 0 16px !important;

    border-radius: 22px !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

}


/* =========================================================
   SNOOP TABLE CONTROL MENU V1
   Gear beside fullscreen; Sit/Leave live inside dropdown.
========================================================= */

#tableView #tableControlMenu[hidden] {
  display: none !important;
}

@media (min-width: 900px) {

  #tableView #tableMenuBtn {
    position: fixed !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 49px
      ) !important;

    left: auto !important;
    top: 72px !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;

    padding: 0 !important;
    border-radius: 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #f1d17b !important;
    font-size: 19px !important;
    line-height: 1 !important;

    background: rgba(4,14,11,.88) !important;
    border: 1px solid rgba(205,164,74,.46) !important;

    box-shadow:
      0 5px 16px rgba(0,0,0,.30) !important;

    z-index: 1602 !important;
  }

  #tableView #tableMenuBtn:hover,
  #tableView #tableMenuBtn[aria-expanded="true"] {
    color: #fff4ca !important;
    border-color: rgba(225,183,85,.90) !important;
    background: rgba(73,54,21,.94) !important;
    box-shadow:
      0 0 16px rgba(213,164,55,.20),
      0 5px 16px rgba(0,0,0,.34) !important;
  }

  #tableView #tableControlMenu {
    position: fixed !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 5px
      ) !important;

    left: auto !important;
    top: 118px !important;

    width: 210px !important;
    padding: 9px !important;

    border-radius: 12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(7,24,19,.98),
        rgba(3,12,10,.98)
      ) !important;

    border:
      1px solid rgba(214,171,70,.70) !important;

    box-shadow:
      0 14px 34px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(255,224,142,.04) !important;

    z-index: 1700 !important;
  }

  #tableView .snoop-table-control-title {
    padding: 5px 8px 9px !important;

    color: #e8bd58 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
  }

  /*
   * Existing controls are reused.
   * No new Leave/Sit behavior is created here.
   */
  #tableView #tableControlMenu #sitOutBtn:not([hidden]),
  #tableView #tableControlMenu #sitInBtn:not([hidden]),
  #tableView #tableControlMenu #leaveTableBtn:not([hidden]) {
    position: static !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;

    margin: 0 0 5px !important;
    padding: 0 12px !important;

    border-radius: 8px !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    transform: none !important;
  }

  #tableView #tableControlMenu #sitOutBtn:not([hidden]),
  #tableView #tableControlMenu #sitInBtn:not([hidden]) {
    color: #eee8d8 !important;
    background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(205,164,74,.18) !important;
  }

  #tableView #tableControlMenu #sitOutBtn:not([hidden]):hover,
  #tableView #tableControlMenu #sitInBtn:not([hidden]):hover {
    background: rgba(205,164,74,.12) !important;
    border-color: rgba(205,164,74,.48) !important;
  }

  #tableView #tableControlMenu #leaveTableBtn:not([hidden]) {
    margin-bottom: 0 !important;

    color: #fff1e8 !important;

    background:
      linear-gradient(
        180deg,
        rgba(123,32,27,.96),
        rgba(77,17,17,.98)
      ) !important;

    border:
      1px solid rgba(205,82,65,.78) !important;

    box-shadow:
      inset 0 0 12px rgba(255,96,72,.07) !important;
  }

  #tableView #tableControlMenu #leaveTableBtn:not([hidden]):hover {
    background:
      linear-gradient(
        180deg,
        rgba(151,42,34,.98),
        rgba(92,20,18,.98)
      ) !important;
  }

  #tableView:fullscreen #tableMenuBtn,
  #tableView:-webkit-full-screen #tableMenuBtn {
    top: 5px !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 49px
      ) !important;
  }

  #tableView:fullscreen #tableControlMenu,
  #tableView:-webkit-full-screen #tableControlMenu {
    top: 51px !important;

    right:
      calc(
        var(--snoop-stage-side-gap, 0px) + 5px
      ) !important;
  }
}


/* =========================================================
   SNOOP CENTER POT CHIP PILE V1
   Absolute-Poker-style visual pile.
   Separate from authoritative numeric POT display.
========================================================= */

#tableView #potChipPile[hidden] {
  display: none !important;
}

@media (min-width: 900px) {

  #tableView #pokerTable .pot-chip-pile {
    position: absolute !important;

    /*
     * Board is around 52%.
     * POT label is around 43%.
     * Put chips below the board, not over either one.
     */
    left: 50% !important;
    top: 64% !important;

    width: 150px !important;
    height: 52px !important;

    transform: translate(-50%, -50%) !important;

    pointer-events: none !important;
    z-index: 19 !important;
  }

  #tableView #pokerTable .pot-pile-chip {
    position: absolute !important;

    width: 30px !important;
    height: 30px !important;

    border-radius: 50% !important;

    background:
      url('/assets/header/snoop-poker-chip.png')
      center / contain
      no-repeat !important;

    filter:
      drop-shadow(0 3px 3px rgba(0,0,0,.78)) !important;
  }

  /*
   * Compact irregular pile.
   * These are visual chips, not literal chip-count accounting.
   */
  #tableView #pokerTable .pot-pile-chip-1 {
    left: 35px !important;
    top: 18px !important;
  }

  #tableView #pokerTable .pot-pile-chip-2 {
    left: 58px !important;
    top: 20px !important;
  }

  #tableView #pokerTable .pot-pile-chip-3 {
    left: 81px !important;
    top: 17px !important;
  }

  #tableView #pokerTable .pot-pile-chip-4 {
    left: 47px !important;
    top: 7px !important;
  }

  #tableView #pokerTable .pot-pile-chip-5 {
    left: 70px !important;
    top: 5px !important;
  }

  #tableView #pokerTable .pot-pile-chip-6 {
    left: 93px !important;
    top: 9px !important;
  }

  #tableView #pokerTable .pot-pile-chip-7 {
    left: 24px !important;
    top: 8px !important;
  }

  #tableView #pokerTable .pot-pile-chip-8 {
    left: 104px !important;
    top: 20px !important;
  }

  #tableView #pokerTable .pot-pile-chip-9 {
    left: 61px !important;
    top: -4px !important;
  }
}


/* =========================================================
   SNOOP CENTER POT CHIP PILE POSITION V2
   Collected chips sit immediately below the community board.
========================================================= */
@media (min-width: 900px) {
  #tableView #pokerTable .pot-chip-pile {
    left: 50% !important;
    top: 60.5% !important;
    width: 150px !important;
    height: 52px !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* =========================================================
   SNOOP SIX PLAYER BET SPOTS V7
   Absolute Poker style:
   wagers stay on felt, close to their physical player.
========================================================= */

@media (min-width: 900px) {

  /* Seat 1 — left/lower */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 155px !important;
    right: auto !important;
    top: -28px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 2 — left/upper */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 145px !important;
    right: auto !important;
    top: 125px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 3 — top/center */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 125px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Seat 4 — right/upper */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 145px !important;
    left: auto !important;
    top: 125px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 5 — right/lower */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 155px !important;
    left: auto !important;
    top: -28px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 6 — bottom/center */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -82px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   SNOOP CENTER MONEY LAYOUT V3
   Separate:
     1) authoritative POT amount
     2) community board
     3) collected physical chip pile
========================================================= */

@media (min-width: 900px) {

  /*
   * TOTAL POT
   * Keep it away from Seat 3's wager lane.
   * This number always represents server hand.pot.
   */
  #tableView #pokerTable .pot-display {
    position: absolute !important;

    left: 39% !important;
    top: 48% !important;

    transform: translate(-50%, -50%) !important;

    min-width: 105px !important;

    text-align: center !important;

    z-index: 22 !important;
    pointer-events: none !important;
  }

  /*
   * BOARD
   * Preserve the visual center of the table.
   */
  #tableView #pokerTable .community-cards {
    position: absolute !important;

    left: 50% !important;
    top: 50.5% !important;

    transform: translate(-50%, -50%) !important;

    z-index: 21 !important;
  }

  /*
   * COLLECTED POT CHIPS
   * Previous-street chips accumulate here.
   */
  #tableView #pokerTable .pot-chip-pile {
    position: absolute !important;

    left: 50% !important;
    top: 59% !important;

    width: 150px !important;
    height: 52px !important;

    transform: translate(-50%, -50%) !important;

    z-index: 20 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   SNOOP CENTER POT LAYOUT V4
   Board centered.
   Collected chips below board.
   Total POT belongs visually to the center pile.
========================================================= */

@media (min-width: 900px) {

  /* Community board stays in the true center. */
  #tableView #pokerTable .community-cards {
    left: 50% !important;
    top: 49% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 21 !important;
  }

  /* Collected street chips form the central pile. */
  #tableView #pokerTable .pot-chip-pile {
    left: 50% !important;
    top: 58.5% !important;
    width: 150px !important;
    height: 52px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }

  /*
   * Authoritative total.
   * Attached to the center-pot area, not floating at the left
   * and not in Seat 3's betting lane.
   */
  #tableView #pokerTable .pot-display {
    left: 50% !important;
    top: 64.5% !important;
    transform: translate(-50%, -50%) !important;

    min-width: 90px !important;
    width: auto !important;

    text-align: center !important;
    z-index: 22 !important;
    pointer-events: none !important;
  }

  #tableView #pokerTable .pot-display span {
    display: inline !important;
    margin-right: 6px !important;
  }

  #tableView #pokerTable .pot-display strong {
    display: inline !important;
  }
}


/* =========================================================
   SNOOP CENTER POT LAYOUT V5
   Final center relationship:
   BOARD
   collected chip pile + POT total
========================================================= */

@media (min-width: 900px) {

  /* Board stays centered. */
  #tableView #pokerTable .community-cards {
    left: 50% !important;
    top: 49% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Collected chips directly below the board. */
  #tableView #pokerTable .pot-chip-pile {
    left: 48% !important;
    top: 58% !important;

    width: 150px !important;
    height: 52px !important;

    transform: translate(-50%, -50%) !important;
  }

  /* Total pot belongs beside the physical pile. */
  #tableView #pokerTable .pot-display {
    left: 56% !important;
    top: 58.5% !important;

    transform: translate(-50%, -50%) !important;

    min-width: 100px !important;
    width: auto !important;

    text-align: left !important;
    white-space: nowrap !important;
  }

  #tableView #pokerTable .pot-display span,
  #tableView #pokerTable .pot-display strong {
    display: inline !important;
  }

  #tableView #pokerTable .pot-display span {
    margin-right: 7px !important;
  }
}


/* =========================================================
   SNOOP STREET BET -> POT ANIMATION V1
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .street-bet-flyer {
    position: absolute !important;

    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;

    z-index: 90 !important;
    pointer-events: none !important;

    transition:
      transform 420ms cubic-bezier(.22,.72,.25,1),
      opacity 420ms ease !important;

    will-change: transform, opacity;
  }
}


/* =========================================================
   SNOOP SIX PLAYER BET SPOTS V8
   Felt-safe physical wager positions.
   Every wager sits between its player and table center.
========================================================= */

@media (min-width: 900px) {

  /* Seat 1 — LEFT LOWER
     Move clearly inward from the rail. */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 205px !important;
    right: auto !important;
    top: -55px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 2 — LEFT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 185px !important;
    right: auto !important;
    top: 135px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 3 — TOP CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 145px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Seat 4 — RIGHT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 185px !important;
    left: auto !important;
    top: 135px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 5 — RIGHT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 205px !important;
    left: auto !important;
    top: -55px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Seat 6 — BOTTOM CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -110px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }
}


/* =========================================================
   SNOOP SIX PLAYER BET SPOTS V9
   Physical-seat based wager positions.
   Coordinates are LOCAL to each 126x128 seat-unit.
   Never depend on which user/hero occupies the seat.
========================================================= */

@media (min-width: 900px) {

  /*
   * Seat 1 — LEFT LOWER
   * Player -> upper/right -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 135px !important;
    right: auto !important;
    top: -35px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /*
   * Seat 2 — LEFT UPPER
   * Player -> lower/right -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 125px !important;
    right: auto !important;
    top: 125px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /*
   * Seat 3 — TOP CENTER
   * Player -> straight down -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: 140px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /*
   * Seat 4 — RIGHT UPPER
   * Player -> lower/left -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 125px !important;
    left: auto !important;
    top: 125px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /*
   * Seat 5 — RIGHT LOWER
   * Player -> upper/left -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 135px !important;
    left: auto !important;
    top: -35px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /*
   * Seat 6 — BOTTOM CENTER
   * Player -> straight up -> green felt
   */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 50% !important;
    right: auto !important;
    top: -75px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}


/* =========================================================
   SNOOP BET SPOT SEAT 1 FIX V10
   Left/lower chair -> diagonally inward onto green felt.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 175px !important;
    right: auto !important;

    top: -85px !important;
    bottom: auto !important;

    transform: none !important;
  }

}

/* =========================================================
   SNOOP BET SPOT SEAT 1 FIX V11
   Seat 1: move RIGHT + DOWN onto the green felt.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 230px !important;
    right: auto !important;

    top: 5px !important;
    bottom: auto !important;

    transform: none !important;
  }

}

/* =========================================================
   SNOOP BET SPOT SEAT 1 FINAL TUNE V12
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 260px !important;
    right: auto !important;

    top: 15px !important;
    bottom: auto !important;

    transform: none !important;
  }

}

/* =========================================================
   SNOOP PHYSICAL FELT BET SPOTS V13
   MASTER STAGE: 1672 x 941

   Bet targets belong to PHYSICAL SEATS, never to a username
   or hero position.

   Global target points:
     Seat 1 -> 545,500
     Seat 2 -> 650,405
     Seat 3 -> 836,390
     Seat 4 -> 1022,405
     Seat 5 -> 1127,500
     Seat 6 -> 836,625

   .seat-unit is 126x128 centered on each seat anchor.
   Therefore these are local seat-unit coordinates.
========================================================= */

@media (min-width: 900px) {

  /* LEFT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 403px !important;
    right: auto !important;
    top: 29px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* LEFT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 238px !important;
    right: auto !important;
    top: 139px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* TOP CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 63px !important;
    right: auto !important;
    top: 179px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

  /* RIGHT UPPER */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    right: 238px !important;
    left: auto !important;
    top: 139px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* RIGHT LOWER */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    right: 403px !important;
    left: auto !important;
    top: 29px !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* BOTTOM CENTER */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 63px !important;
    right: auto !important;
    top: -106px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }

}

/* =========================================================
   SNOOP HERO / OPPONENT SEAT ALIGNMENT V1
   Hero identity must NOT change the physical seat geometry.
========================================================= */

@media (min-width: 900px) {

  /*
   * Hero cards use the same seat anchor as opponent cards.
   * Do not move the physical seat itself.
   */
  #tableView #pokerTable
  .seat.hero-seat > .my-hand-panel {
    left: 50% !important;
    top: -18px !important;
    bottom: auto !important;

    width: 110px !important;
    height: 90px !important;

    transform: translateX(-50%) !important;
  }

}

/* =========================================================
   SNOOP GLOBAL PHYSICAL CARD GEOMETRY V1

   ONE desktop/laptop coordinate system.

   Hero identity does NOT affect geometry.
   Hero and opponent cards occupy the SAME seat-card-zone.

   Device differences are handled only by scaling the
   complete 1672x941 poker stage.
========================================================= */

@media (min-width: 900px) {

  /* -------------------------------------------------------
     PHYSICAL CARD POCKET
  ------------------------------------------------------- */

  #tableView #pokerTable .seat-card-zone {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;

    width: 100px !important;
    height: 86px !important;

    transform: translateX(-50%) !important;

    display: block !important;
    overflow: visible !important;

    z-index: 20 !important;
  }


  /*
   * Old rule hid the card-zone whenever the seat was hero.
   * That architecture is now retired.
   */
  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone {
    display: block !important;
  }


  /* -------------------------------------------------------
     HERO PANEL
     It now lives INSIDE .seat-card-zone.
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone > .my-hand-panel {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 100px !important;
    height: 86px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    display: block !important;
    overflow: visible !important;

    z-index: 25 !important;
    pointer-events: none !important;
  }


  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .panel-label,

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .hand-info {
    display: none !important;
  }


  /* -------------------------------------------------------
     HERO CARDS
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone .my-cards {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 100px !important;
    height: 82px !important;

    transform: translateX(-50%) !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    z-index: 26 !important;
  }


  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .my-cards .playing-card {
    position: absolute !important;

    top: auto !important;
    bottom: 0 !important;

    width: 54px !important;
    height: 76px !important;

    margin: 0 !important;

    border-radius: 7px !important;

    transform-origin: 50% 100% !important;

    z-index: 27 !important;
  }


  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .my-cards .playing-card:nth-child(1) {
    left: 3px !important;
    right: auto !important;

    transform: rotate(-3deg) !important;
  }


  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .my-cards .playing-card:nth-child(2) {
    left: auto !important;
    right: 3px !important;

    transform: rotate(3deg) !important;
  }


  /* -------------------------------------------------------
     OPPONENT CARDS
     Same physical pocket.
  ------------------------------------------------------- */

  #tableView #pokerTable
  .seat-card-zone .opponent-hole-cards {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 90px !important;
    height: 78px !important;

    transform: translateX(-50%) !important;

    overflow: visible !important;
    pointer-events: none !important;
  }

}

/* =========================================================
   SNOOP GLOBAL PHYSICAL CARD CHILDREN V2

   FINAL child-card geometry inside the shared physical
   seat-card-zone.

   Closed opponent cards and open showdown cards use the
   SAME coordinates. Hero uses the same pocket container.
========================================================= */

@media (min-width: 900px) {

  /* =======================================================
     OPPONENT POCKET CONTAINER
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards {
    position: absolute !important;

    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 90px !important;
    height: 78px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    overflow: visible !important;

    z-index: 22 !important;
  }


  /* =======================================================
     CLOSED CARD 1
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards
  > .opponent-card-back:nth-child(1) {
    position: absolute !important;

    left: 1px !important;
    right: auto !important;

    top: 0 !important;
    bottom: auto !important;

    width: 49px !important;
    height: 69px !important;

    margin: 0 !important;

    transform: rotate(-3deg) !important;
    transform-origin: 50% 100% !important;

    z-index: 1 !important;
  }


  /* =======================================================
     CLOSED CARD 2
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards
  > .opponent-card-back:nth-child(2) {
    position: absolute !important;

    left: auto !important;
    right: 1px !important;

    top: 0 !important;
    bottom: auto !important;

    width: 49px !important;
    height: 69px !important;

    margin: 0 !important;

    transform: rotate(3deg) !important;
    transform-origin: 50% 100% !important;

    z-index: 2 !important;
  }


  /* =======================================================
     SHOWDOWN / OPEN CARD BASE
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open
  > .showdown-card {
    position: absolute !important;

    top: 0 !important;
    bottom: auto !important;

    width: 49px !important;
    height: 69px !important;

    margin: 0 !important;

    transform-origin: 50% 100% !important;

    z-index: 3 !important;
  }


  /* =======================================================
     OPEN CARD 1 = EXACT SAME POCKET AS CLOSED CARD 1
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open
  > .showdown-card:nth-child(1) {
    left: 1px !important;
    right: auto !important;

    transform: rotate(-3deg) !important;
  }


  /* =======================================================
     OPEN CARD 2 = EXACT SAME POCKET AS CLOSED CARD 2
  ======================================================= */

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open
  > .showdown-card:nth-child(2) {
    left: auto !important;
    right: 1px !important;

    transform: rotate(3deg) !important;
  }


  /* =======================================================
     HERO POCKET
     Same physical top edge as opponent pocket.
  ======================================================= */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone > .my-hand-panel {
    left: 50% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
  }

}

/* =========================================================
   SNOOP GLOBAL CARD POCKET OFFSET V3

   ONE card-pocket position for every physical seat.
   User / hero / opponent / showdown do not affect geometry.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-unit > .seat-card-zone {
    left: 50% !important;

    /*
     * Player pod begins at y=68 in the same seat-unit.
     * Lift the shared card pocket so cards emerge cleanly
     * above the pod instead of being buried behind it.
     */
    top: -10px !important;

    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;
  }

}

/* =========================================================
   SNOOP PHYSICAL SEAT UNIT OFFSETS V1

   MASTER 1672x941 PHYSICAL PLAYER GEOMETRY.

   Seat anchors stay fixed on their physical chairs.
   Only the occupied player assembly moves inward.

   Applies identically to hero and opponents.
   Bet spots remain independent on the felt.
========================================================= */

@media (min-width: 900px) {

  /* Seat 1 — left lower -> inward/right + slightly up */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] > .seat-unit {
    left: calc(50% + 58px) !important;
    top: calc(50% - 24px) !important;
  }

  /* Seat 2 — left upper -> inward/right + down */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] > .seat-unit {
    left: calc(50% + 42px) !important;
    top: calc(50% + 30px) !important;
  }

  /* Seat 3 — top center -> inward/down */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] > .seat-unit {
    left: 50% !important;
    top: calc(50% + 42px) !important;
  }

  /* Seat 4 — right upper -> inward/left + down */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] > .seat-unit {
    left: calc(50% - 42px) !important;
    top: calc(50% + 30px) !important;
  }

  /* Seat 5 — right lower -> inward/left + slightly up */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] > .seat-unit {
    left: calc(50% - 58px) !important;
    top: calc(50% - 24px) !important;
  }

  /* Seat 6 — bottom center -> inward/up */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] > .seat-unit {
    left: 50% !important;
    top: calc(50% - 48px) !important;
  }

}

/* =========================================================
   SNOOP FINAL SHARED CARD POCKET V1

   ONE physical pocket for:
   - hero face-up cards
   - opponent card backs
   - showdown face-up cards

   Player pod sits IN FRONT of lower part of cards.
========================================================= */

@media (min-width: 900px) {

  /* Shared pocket container */
  #tableView #pokerTable .seat-unit > .seat-card-zone {
    position: absolute !important;

    left: 50% !important;
    top: 4px !important;
    right: auto !important;
    bottom: auto !important;

    width: 96px !important;
    height: 76px !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    display: block !important;

    z-index: 20 !important;
  }


  /* Player pod is the FRONT edge of the pocket */
  #tableView #pokerTable .seat-unit > .seat-player {
    position: absolute !important;

    left: 50% !important;
    top: 68px !important;

    transform: translateX(-50%) !important;

    z-index: 40 !important;
  }


  /* ---------------- HERO WRAPPER ---------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone > .my-hand-panel {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 96px !important;
    height: 76px !important;

    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;

    z-index: 20 !important;
  }


  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone .my-cards {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 96px !important;
    height: 76px !important;

    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ---------------- ALL FACE-UP CARDS ---------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone .my-cards > .playing-card,

  #tableView #pokerTable
  .seat-card-zone
  > .opponent-hole-cards.showdown-open
  > .showdown-card {
    position: absolute !important;

    top: 0 !important;
    bottom: auto !important;

    width: 54px !important;
    height: 76px !important;

    margin: 0 !important;

    transform-origin: 50% 100% !important;
  }


  /* ---------------- CARD BACKS ---------------- */

  #tableView #pokerTable
  .seat-card-zone
  > .opponent-hole-cards
  > .opponent-card-back {
    position: absolute !important;

    top: 0 !important;
    bottom: auto !important;

    width: 54px !important;
    height: 76px !important;

    margin: 0 !important;

    transform-origin: 50% 100% !important;
  }


  /* Opponent/showdown wrapper */
  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width: 96px !important;
    height: 76px !important;

    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    z-index: 20 !important;
  }


  /* ---------------- LEFT CARD ---------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .my-cards > .playing-card:nth-child(1),

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards
  > .opponent-card-back:nth-child(1),

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open
  > .showdown-card:nth-child(1) {
    left: 0 !important;
    right: auto !important;

    transform: rotate(-3deg) !important;

    z-index: 21 !important;
  }


  /* ---------------- RIGHT CARD ---------------- */

  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone
  .my-cards > .playing-card:nth-child(2),

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards
  > .opponent-card-back:nth-child(2),

  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open
  > .showdown-card:nth-child(2) {
    left: 42px !important;
    right: auto !important;

    transform: rotate(3deg) !important;

    z-index: 22 !important;
  }


  /*
   * Pocket effect:
   * card bottom extends behind player pod.
   * Pod starts at y=68 while cards run y=10..86.
   * Therefore roughly 18px of card is behind the pod.
   */
  #tableView #pokerTable .seat-unit > .seat-player {
    overflow: visible !important;
  }

}

/* =========================================================
   SNOOP OPEN CARD FACE CLEAN V4

   ONE authoritative open-card face rule.
   Typography/colors only.

   Physical seat/card-pocket/bet geometry untouched.
========================================================= */

@media (min-width: 900px) {

  /* ---------- OPEN CARD FACE ---------- */

  #tableView #pokerTable
  .seat-card-zone .playing-card,

  #tableView #pokerTable
  .seat-card-zone .showdown-card {
    background: #fffdf7 !important;
    color: #111 !important;

    border: 1px solid rgba(0,0,0,.30) !important;
    border-radius: 7px !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }


  /* ---------- RED SUITS ---------- */

  #tableView #pokerTable
  .seat-card-zone .playing-card.red-card,

  #tableView #pokerTable
  .seat-card-zone .showdown-card.red-card {
    color: #c51f2d !important;
  }


  /* ---------- RANK ---------- */

  #tableView #pokerTable
  .seat-card-zone .playing-card > .card-rank,

  #tableView #pokerTable
  .seat-card-zone .showdown-card > .card-rank {
    position: absolute !important;

    left: 6px !important;
    top: 3px !important;
    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    line-height: 21px !important;
    font-weight: 900 !important;

    color: inherit !important;

    transform: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 50 !important;
  }


  /* ---------- SUIT ---------- */

  #tableView #pokerTable
  .seat-card-zone .playing-card > .card-suit,

  #tableView #pokerTable
  .seat-card-zone .showdown-card > .card-suit {
    position: absolute !important;

    left: 7px !important;
    top: 25px !important;
    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 22px !important;
    line-height: 22px !important;
    font-weight: 700 !important;

    color: inherit !important;

    transform: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 51 !important;
  }

}



/* =========================================================
   SNOOP OPEN CARD SUIT FINAL V5

   Keep rank AND suit inside the permanently visible
   upper portion of every face-up pocket card.

   Geometry untouched.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat-card-zone .playing-card > .card-rank,

  #tableView #pokerTable
  .seat-card-zone .showdown-card > .card-rank {
    left: 6px !important;
    top: 2px !important;

    font-size: 20px !important;
    line-height: 20px !important;
  }


  #tableView #pokerTable
  .seat-card-zone .playing-card > .card-suit,

  #tableView #pokerTable
  .seat-card-zone .showdown-card > .card-suit {
    left: 7px !important;
    top: 20px !important;

    font-size: 18px !important;
    line-height: 18px !important;

    transform: none !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 60 !important;
  }

}


/* =========================================================
   SNOOP FACE-UP CARD POCKET LIFT V1

   Closed opponent cards keep the normal pocket depth.
   Only hero/showdown face-up cards rise for readability.

   Seat/player/bet geometry untouched.
========================================================= */

@media (min-width: 900px) {

  /* Hero face-up hand */
  #tableView #pokerTable
  .seat.hero-seat .seat-card-zone > .my-hand-panel {
    top: -14px !important;
  }

  /* Opponent face-up cards at showdown */
  #tableView #pokerTable
  .seat-card-zone > .opponent-hole-cards.showdown-open {
    top: -14px !important;
  }

}

/* SNOOP COMMUNITY CARD SUIT COLOR FIX V1 */
#tableView #pokerTable #communityCards .playing-card {
  color: #111 !important;
}

#tableView #pokerTable #communityCards .playing-card.red-card {
  color: #c51f2d !important;
}

#tableView #pokerTable #communityCards .playing-card.red-card .card-rank,
#tableView #pokerTable #communityCards .playing-card.red-card .card-suit {
  color: #c51f2d !important;
}

/* =========================================================
   SNOOP FULLSCREEN JOIN MODAL FIX V1
   Keep the buy-in modal above every table layer while
   #tableView is the browser fullscreen element.
========================================================= */

#tableView:fullscreen > #joinModal,
#tableView:-webkit-full-screen > #joinModal {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 20px !important;

  display: grid !important;
  place-items: center !important;

  z-index: 2147483647 !important;

  overflow: auto !important;

  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(5px) !important;

  pointer-events: auto !important;

  transform: none !important;
}

#tableView:fullscreen > #joinModal[hidden],
#tableView:-webkit-full-screen > #joinModal[hidden] {
  display: none !important;
}

#tableView:fullscreen > #joinModal > .modal,
#tableView:-webkit-full-screen > #joinModal > .modal {
  position: relative !important;
  z-index: 1 !important;

  width: min(420px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 40px) !important;

  pointer-events: auto !important;
}


/* =========================================================
   SNOOP SP CARD BACK VISUAL V1
   VISUAL ONLY — geometry and animations remain unchanged
========================================================= */

#tableView #pokerTable .opponent-card-back {
  background:
    url('/assets/Sp_card_design.png')
    center center / cover
    no-repeat !important;
}


/* =========================================================
   SNOOP COMMUNITY REVEAL V1
   Temporary SP-backed board delivery cards only.
   Existing community-card geometry remains untouched.
========================================================= */

.snoop-board-flyer {
  position: fixed;
  z-index: 2147483000;
  pointer-events: none;

  perspective: 700px;

  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    rotate(var(--snoop-board-start-rotate, 0deg));

  transition:
    transform 280ms cubic-bezier(.20,.78,.24,1),
    opacity 160ms ease;

  will-change: transform, opacity;
}

#tableView:fullscreen .snoop-board-flyer,
#tableView:-webkit-full-screen .snoop-board-flyer {
  position: absolute;
}

.snoop-board-flyer.snoop-board-flyer-arrive {
  transform:
    translate3d(
      var(--snoop-board-target-x),
      var(--snoop-board-target-y),
      0
    )
    rotate(var(--snoop-board-end-rotate, 0deg));
}

.snoop-board-flyer-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;

  transition:
    transform 190ms cubic-bezier(.32,.72,.35,1);

  will-change: transform;
}

.snoop-board-flyer.snoop-board-flyer-flipped
.snoop-board-flyer-inner {
  transform: rotateY(180deg);
}

.snoop-board-flyer-back,
.snoop-board-flyer-face {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border-radius: 7px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  box-sizing: border-box;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.38);
}

.snoop-board-flyer-back {
  background:
    url('/assets/Sp_card_design.png')
    center center / cover
    no-repeat;

  border:
    1px solid rgba(218, 177, 70, 0.58);
}

.snoop-board-flyer-face {
  display: grid;
  place-items: center;

  background: #f8f8f3;
  color: #111;

  border:
    1px solid rgba(0, 0, 0, 0.22);

  font-weight: 800;

  transform: rotateY(180deg);
}

.snoop-board-flyer-face.red-card,
.snoop-board-flyer-face.red-card .card-rank,
.snoop-board-flyer-face.red-card .card-suit {
  color: #c51f2d;
}

.snoop-board-flyer-face .card-rank {
  position: absolute;

  left: 7px;
  top: 4px;

  font-size: 22px;
  line-height: 22px;
}

.snoop-board-flyer-face .card-suit {
  position: absolute;

  left: 8px;
  top: 27px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 22px;
  line-height: 22px;
}

/*
 * Small depth difference makes the flop feel like
 * one physical packet rather than three unrelated cards.
 */
.snoop-board-flyer:nth-last-child(3) {
  filter: brightness(0.96);
}

/* =========================================================
   SNOOP DEALER PHYSICAL COMMUNITY FLIP V4
   One physical card:
   SP back -> edge -> face.
   Outer flop fan/delivery motion remains unchanged.
========================================================= */

.snoop-board-flyer {
  perspective: 4000px !important;
}

.snoop-board-flyer-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;

  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;

  transform: rotateY(0deg) !important;
  transform-origin: 50% 50% !important;

  transition:
    transform 240ms cubic-bezier(.45,.05,.20,1) !important;

  will-change: transform;
}

.snoop-board-flyer-back,
.snoop-board-flyer-face {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  box-sizing: border-box !important;

  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;

  transform-origin: 50% 50% !important;

  opacity: 1 !important;

  -webkit-font-smoothing: antialiased;
}

.snoop-board-flyer-back {
  transform: rotateY(0deg) translateZ(0.2px) !important;
  z-index: 2 !important;
}

.snoop-board-flyer-face {
  transform: rotateY(180deg) translateZ(0.2px) !important;
  z-index: 1 !important;
}

.snoop-board-flyer.snoop-board-flyer-flipped
.snoop-board-flyer-inner {
  transform: rotateY(180deg) !important;
}



/* =========================================================
   SNOOP COMMUNITY FLYER FACE MATCH V1
   Match the revealed flyer face to the permanent board card.
   V4 dealer flip/fan geometry remains untouched.
========================================================= */

.snoop-board-flyer-face {
  font-size: clamp(18px, 2.4vw, 28px) !important;
  font-weight: 800 !important;

  background: #f8f8f3 !important;

  border:
    1px solid rgba(0, 0, 0, 0.22) !important;

  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.28) !important;
}

.snoop-board-flyer-face .card-rank,
.snoop-board-flyer-face .card-suit {
  position: static !important;

  left: auto !important;
  top: auto !important;

  font-size: inherit !important;
  line-height: normal !important;
}

.snoop-board-flyer-face .card-suit {
  font-family: inherit !important;
}


/* =========================================================
   SNOOP GLOBAL BET SPOTS FINAL V14
   MASTER STAGE: 1672 x 941

   Physical felt betting positions.
   Same coordinates for every desktop/laptop and every user.

   Seat 1 -> 500,535
   Seat 2 -> 625,435
   Seat 3 -> 836,405
   Seat 4 -> 1047,435
   Seat 5 -> 1172,535
   Seat 6 -> 836,655

   Player/card geometry is intentionally untouched.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-bet {
    margin: 0 !important;
  }

  /* Seat 1 — left lower */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 295px !important;
    top: 0px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 2 — left upper */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 150px !important;
    top: 105px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 3 — top center */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 0px !important;
    top: 130px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 4 — right upper */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    left: -150px !important;
    top: 105px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 5 — right lower */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    left: -295px !important;
    top: 0px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 6 — bottom center */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 0px !important;
    top: -140px !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

}


/* =========================================================
   SNOOP GLOBAL BET SPOTS V15
   Player-proximal physical betting positions.
   Refines V14 only; player/card geometry untouched.
========================================================= */

@media (min-width: 900px) {

  /* Seat 1 — closer to left-lower player */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 225px !important;
    top: 5px !important;
  }

  /* Seat 2 — closer to left-upper player */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 115px !important;
    top: 95px !important;
  }

  /* Seat 3 — closer to top player */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 0px !important;
    top: 105px !important;
  }

  /* Seat 4 — mirror of seat 2 */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    left: -115px !important;
    top: 95px !important;
  }

  /* Seat 5 — mirror of seat 1 */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    left: -225px !important;
    top: 5px !important;
  }

  /* Seat 6 — closer to bottom player */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 0px !important;
    top: -105px !important;
  }

}


/* =========================================================
   SNOOP GLOBAL PLAYER-FRONT BET SPOTS V16
   MASTER STAGE: 1672 x 941

   seat-bet is a CHILD of the 126x128 seat-unit.
   Therefore all positions below are local to seat-unit.

   Physical seat only. No hero/user/device rotation.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-bet {
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  /* Seat 1 — chips inward/right + slightly up */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 150px !important;
    top: 42px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 2 — chips inward/right + down */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 140px !important;
    top: 112px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 3 — chips directly inward/down */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 63px !important;
    top: 145px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 4 — mirror of Seat 2 */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    left: -14px !important;
    top: 112px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 5 — mirror of Seat 1 */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    left: -24px !important;
    top: 42px !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Seat 6 — chips directly inward/up */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 63px !important;
    top: -18px !important;
    transform: translate(-50%, -50%) !important;
  }

}


/* =========================================================
   SNOOP GLOBAL FELT PLAYER-FRONT BET SPOTS V17
   Physical Seat 1-6.
   Chips stay on felt immediately in front of player pod.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-bet {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 36 !important;
  }

  /* 1 — LEFT LOWER: right/up toward felt */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] .seat-bet {
    left: 150px !important;
    top: 48px !important;
  }

  /* 2 — LEFT UPPER: right/down toward felt */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] .seat-bet {
    left: 143px !important;
    top: 105px !important;
  }

  /* 3 — TOP CENTER: directly below player */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] .seat-bet {
    left: 63px !important;
    top: 137px !important;
  }

  /* 4 — RIGHT UPPER: left/down toward felt */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] .seat-bet {
    left: -17px !important;
    top: 105px !important;
  }

  /* 5 — RIGHT LOWER: left/up toward felt */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] .seat-bet {
    left: -24px !important;
    top: 48px !important;
  }

  /* 6 — BOTTOM CENTER: directly above player */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] .seat-bet {
    left: 63px !important;
    top: 38px !important;
  }

}


/* =========================================================
   SNOOP GLOBAL PHYSICAL BET SPOTS V18
   seat-bet is now a DIRECT CHILD of physical .seat
   Coordinates are relative to fixed 1672x941 seat anchors.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat > .seat-bet {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 36 !important;
  }

  /* Seat 1: global 365,500 */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] > .seat-bet {
    left: 160px !important;
    top: -35px !important;
  }

  /* Seat 2: global 585,405 */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] > .seat-bet {
    left: 110px !important;
    top: 75px !important;
  }

  /* Seat 3: global 836,390 */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] > .seat-bet {
    left: 0 !important;
    top: 115px !important;
  }

  /* Seat 4: global 1087,405 */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] > .seat-bet {
    left: -110px !important;
    top: 75px !important;
  }

  /* Seat 5: global 1307,500 */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] > .seat-bet {
    left: -160px !important;
    top: -35px !important;
  }

  /* Seat 6: global 836,665 */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] > .seat-bet {
    left: 0 !important;
    top: -130px !important;
  }

}


/* =========================================================
   SNOOP GLOBAL PHYSICAL PLAYER-FRONT BET SPOTS V19
   FINAL GEOMETRY MODEL:
   physical seat anchor + visible seat-unit offset -> felt.
   Player identity / hero / device independent.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat > .seat-bet {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 36 !important;
    pointer-events: none !important;
  }

  /* Seat 1
     anchor 205,535 -> target felt 365,495 */
  #tableView #pokerTable
  .seat[data-visual-seat="1"] > .seat-bet {
    left: 160px !important;
    top: -40px !important;
  }

  /* Seat 2
     anchor 475,330 -> target felt 590,425 */
  #tableView #pokerTable
  .seat[data-visual-seat="2"] > .seat-bet {
    left: 115px !important;
    top: 95px !important;
  }

  /* Seat 3
     anchor 836,275 -> target felt 836,415 */
  #tableView #pokerTable
  .seat[data-visual-seat="3"] > .seat-bet {
    left: 0px !important;
    top: 140px !important;
  }

  /* Seat 4
     anchor 1197,330 -> target felt 1082,425 */
  #tableView #pokerTable
  .seat[data-visual-seat="4"] > .seat-bet {
    left: -115px !important;
    top: 95px !important;
  }

  /* Seat 5
     anchor 1467,535 -> target felt 1307,495 */
  #tableView #pokerTable
  .seat[data-visual-seat="5"] > .seat-bet {
    left: -160px !important;
    top: -40px !important;
  }

  /* Seat 6
     anchor 836,795 -> target felt 836,645 */
  #tableView #pokerTable
  .seat[data-visual-seat="6"] > .seat-bet {
    left: 0px !important;
    top: -150px !important;
  }

}



/* =========================================================
   SNOOP GLOBAL TABLE BET LAYER V20
   Direct 1672x941 table coordinates.
   Independent of player/card/legacy seat box geometry.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable > .global-seat-bet {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    z-index: 36 !important;
    pointer-events: none !important;
  }

  #tableView #pokerTable > .global-seat-bet > .seat-bet {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Physical Seat 1 */
  #tableView #pokerTable > .global-seat-bet-1 {
    left: 365px !important;
    top: 495px !important;
  }

  /* Physical Seat 2 */
  #tableView #pokerTable > .global-seat-bet-2 {
    left: 590px !important;
    top: 425px !important;
  }

  /* Physical Seat 3 */
  #tableView #pokerTable > .global-seat-bet-3 {
    left: 836px !important;
    top: 415px !important;
  }

  /* Physical Seat 4 */
  #tableView #pokerTable > .global-seat-bet-4 {
    left: 1082px !important;
    top: 425px !important;
  }

  /* Physical Seat 5 */
  #tableView #pokerTable > .global-seat-bet-5 {
    left: 1307px !important;
    top: 495px !important;
  }

  /* Physical Seat 6 */
  #tableView #pokerTable > .global-seat-bet-6 {
    left: 836px !important;
    top: 645px !important;
  }

}

/* =========================================================
   SNOOP REAL CHIP ART V1
   Real denomination artwork for player bet stacks
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable .bet-chip {
    width: 31px !important;
    height: 31px !important;

    background-image: var(--chip-image) !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    border-radius: 50% !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.78))
      drop-shadow(0 0 1px rgba(220,178,72,.25)) !important;
  }

  #tableView #pokerTable .bet-chip-stack {
    width: 33px !important;
    height: 48px !important;
    flex: 0 0 33px !important;
  }

  #tableView #pokerTable .bet-chip-1 { bottom:0px !important; }
  #tableView #pokerTable .bet-chip-2 { bottom:4px !important; }
  #tableView #pokerTable .bet-chip-3 { bottom:8px !important; }
  #tableView #pokerTable .bet-chip-4 { bottom:12px !important; }
  #tableView #pokerTable .bet-chip-5 { bottom:16px !important; }
  #tableView #pokerTable .bet-chip-6 { bottom:20px !important; }
  #tableView #pokerTable .bet-chip-7 { bottom:24px !important; }
  #tableView #pokerTable .bet-chip-8 { bottom:28px !important; }
  #tableView #pokerTable .bet-chip-9 { bottom:32px !important; }

}

/* =========================================================
   SNOOP CASINO BET PILE V2
   Larger visible chips + compact Absolute-style felt pile
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable .bet-chip-stack {
    position: relative !important;
    width: 72px !important;
    height: 52px !important;
    flex: 0 0 72px !important;
  }

  #tableView #pokerTable .bet-chip {
    width: 42px !important;
    height: 42px !important;
    left: 0 !important;
    bottom: 0 !important;

    background-image: var(--chip-image) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    filter:
      drop-shadow(0 3px 3px rgba(0,0,0,.82))
      drop-shadow(0 0 1px rgba(231,190,83,.35)) !important;
  }

  #tableView #pokerTable .bet-chip-1 {
    left: 0px !important;
    bottom: 0px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable .bet-chip-2 {
    left: 15px !important;
    bottom: 1px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable .bet-chip-3 {
    left: 30px !important;
    bottom: 0px !important;
    z-index: 13 !important;
  }

  #tableView #pokerTable .bet-chip-4 {
    left: 8px !important;
    bottom: 10px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable .bet-chip-5 {
    left: 23px !important;
    bottom: 11px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable .bet-chip-6 {
    left: 15px !important;
    bottom: 20px !important;
    z-index: 16 !important;
  }

  #tableView #pokerTable .bet-chip-7 {
    left: 30px !important;
    bottom: 20px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable .bet-chip-8 {
    left: 4px !important;
    bottom: 20px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable .bet-chip-9 {
    left: 19px !important;
    bottom: 29px !important;
    z-index: 19 !important;
  }

  #tableView #pokerTable .seat-bet {
    gap: 6px !important;
  }

  #tableView #pokerTable .bet-chip-amount {
    position: relative !important;
    z-index: 25 !important;
  }

}

/* =========================================================
   SNOOP ORDERED CASINO STACK V3
   Compact organized chip stacks
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable .bet-chip-stack {
    position: relative !important;
    width: 78px !important;
    height: 58px !important;
    flex: 0 0 78px !important;
  }

  #tableView #pokerTable .bet-chip {
    width: 40px !important;
    height: 40px !important;
    bottom: auto !important;

    background-image: var(--chip-image) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    filter:
      drop-shadow(0 3px 3px rgba(0,0,0,.82))
      drop-shadow(0 0 1px rgba(231,190,83,.30)) !important;
  }

  /* LEFT STACK */
  #tableView #pokerTable .bet-chip-1 {
    left: 0px !important;
    top: 18px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable .bet-chip-2 {
    left: 0px !important;
    top: 10px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable .bet-chip-3 {
    left: 0px !important;
    top: 2px !important;
    z-index: 13 !important;
  }

  /* RIGHT STACK */
  #tableView #pokerTable .bet-chip-4 {
    left: 32px !important;
    top: 18px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable .bet-chip-5 {
    left: 32px !important;
    top: 10px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable .bet-chip-6 {
    left: 32px !important;
    top: 2px !important;
    z-index: 16 !important;
  }

  /* THIRD MINI STACK — only larger bets reach these chips */
  #tableView #pokerTable .bet-chip-7 {
    left: 16px !important;
    top: 8px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable .bet-chip-8 {
    left: 16px !important;
    top: 0px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable .bet-chip-9 {
    left: 16px !important;
    top: -8px !important;
    z-index: 19 !important;
  }

  #tableView #pokerTable .seat-bet {
    gap: 7px !important;
  }

}

/* =========================================================
   SNOOP ABSOLUTE STYLE BET STACK V4
   Smaller compact two-column casino stacks
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable .bet-chip-stack {
    position: relative !important;
    width: 59px !important;
    height: 48px !important;
    flex: 0 0 59px !important;
  }

  #tableView #pokerTable .bet-chip {
    width: 34px !important;
    height: 34px !important;
    bottom: auto !important;

    background-image: var(--chip-image) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.82))
      drop-shadow(0 0 1px rgba(231,190,83,.25)) !important;
  }

  /* LEFT COLUMN */
  #tableView #pokerTable .bet-chip-1 {
    left: 0px !important;
    top: 14px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable .bet-chip-2 {
    left: 0px !important;
    top: 8px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable .bet-chip-3 {
    left: 0px !important;
    top: 2px !important;
    z-index: 13 !important;
  }

  #tableView #pokerTable .bet-chip-7 {
    left: 0px !important;
    top: -4px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable .bet-chip-9 {
    left: 0px !important;
    top: -10px !important;
    z-index: 19 !important;
  }

  /* RIGHT COLUMN */
  #tableView #pokerTable .bet-chip-4 {
    left: 25px !important;
    top: 14px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable .bet-chip-5 {
    left: 25px !important;
    top: 8px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable .bet-chip-6 {
    left: 25px !important;
    top: 2px !important;
    z-index: 16 !important;
  }

  #tableView #pokerTable .bet-chip-8 {
    left: 25px !important;
    top: -4px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable .seat-bet {
    gap: 5px !important;
  }

}

/* =========================================================
   SNOOP REAL CENTER POT STACK V1
   Compact organized 3-column center pot
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable #potChipPile {
    width: 86px !important;
    height: 52px !important;
    overflow: visible !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip {
    position: absolute !important;

    width: 34px !important;
    height: 34px !important;

    background-image: var(--pot-chip-image) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    border: 0 !important;
    border-radius: 50% !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.82))
      drop-shadow(0 0 1px rgba(231,190,83,.25)) !important;
  }

  /* LEFT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-1 {
    left: 0px !important;
    top: 15px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-2 {
    left: 0px !important;
    top: 8px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-3 {
    left: 0px !important;
    top: 1px !important;
    z-index: 13 !important;
  }

  /* CENTER STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-4 {
    left: 25px !important;
    top: 15px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-5 {
    left: 25px !important;
    top: 8px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-6 {
    left: 25px !important;
    top: 1px !important;
    z-index: 16 !important;
  }

  /* RIGHT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-7 {
    left: 50px !important;
    top: 15px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-8 {
    left: 50px !important;
    top: 8px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-9 {
    left: 50px !important;
    top: 1px !important;
    z-index: 19 !important;
  }

}

/* =========================================================
   SNOOP CENTER POT STACK V2
   Cleaner separated 3-column casino pot
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable #potChipPile {
    width: 96px !important;
    height: 56px !important;
    overflow: visible !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip {
    width: 34px !important;
    height: 34px !important;
  }

  /* LEFT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-1 {
    left: 0px !important;
    top: 20px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-2 {
    left: 0px !important;
    top: 12px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-3 {
    left: 0px !important;
    top: 4px !important;
    z-index: 13 !important;
  }

  /* CENTER STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-4 {
    left: 31px !important;
    top: 20px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-5 {
    left: 31px !important;
    top: 12px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-6 {
    left: 31px !important;
    top: 4px !important;
    z-index: 16 !important;
  }

  /* RIGHT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-7 {
    left: 62px !important;
    top: 20px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-8 {
    left: 62px !important;
    top: 12px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-9 {
    left: 62px !important;
    top: 4px !important;
    z-index: 19 !important;
  }

}

/* =========================================================
   SNOOP CENTER POT COMPACT STACK V3
   Tight overlapping Absolute-style pot pile
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable #potChipPile {
    width: 72px !important;
    height: 50px !important;
    overflow: visible !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip {
    width: 34px !important;
    height: 34px !important;
  }

  /* LEFT MINI STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-1 {
    left: 0px !important;
    top: 15px !important;
    z-index: 11 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-2 {
    left: 0px !important;
    top: 10px !important;
    z-index: 12 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-3 {
    left: 0px !important;
    top: 5px !important;
    z-index: 13 !important;
  }

  /* CENTER MINI STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-4 {
    left: 18px !important;
    top: 15px !important;
    z-index: 14 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-5 {
    left: 18px !important;
    top: 10px !important;
    z-index: 15 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-6 {
    left: 18px !important;
    top: 5px !important;
    z-index: 16 !important;
  }

  /* RIGHT MINI STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-7 {
    left: 36px !important;
    top: 15px !important;
    z-index: 17 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-8 {
    left: 36px !important;
    top: 10px !important;
    z-index: 18 !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-9 {
    left: 36px !important;
    top: 5px !important;
    z-index: 19 !important;
  }

}

/* =========================================================
   SNOOP CENTER POT STACK V4
   Separate towers, stacked chips
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable #potChipPile {
    width: 94px !important;
    height: 50px !important;
    overflow: visible !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip {
    width: 34px !important;
    height: 34px !important;
  }

  /* LEFT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-1 {
    left: 0px !important;
    top: 15px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-2 {
    left: 0px !important;
    top: 10px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-3 {
    left: 0px !important;
    top: 5px !important;
  }

  /* CENTER STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-4 {
    left: 29px !important;
    top: 15px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-5 {
    left: 29px !important;
    top: 10px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-6 {
    left: 29px !important;
    top: 5px !important;
  }

  /* RIGHT STACK */
  #tableView #pokerTable #potChipPile .pot-pile-chip-7 {
    left: 58px !important;
    top: 15px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-8 {
    left: 58px !important;
    top: 10px !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip-9 {
    left: 58px !important;
    top: 5px !important;
  }

}

/* =========================================================
   SNOOP WINNER POT FLIGHT V2
   Preserve accepted center-pot V4 artwork while flying
========================================================= */
@media (min-width: 900px) {

  #tableView #pokerTable .snoop-winner-pot-flight {
    width: 94px !important;
    height: 50px !important;
    overflow: visible !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip {
    position: absolute !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    background-image: var(--pot-chip-image) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-1 {
    left: 0px !important; top: 15px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-2 {
    left: 0px !important; top: 10px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-3 {
    left: 0px !important; top: 5px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-4 {
    left: 29px !important; top: 15px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-5 {
    left: 29px !important; top: 10px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-6 {
    left: 29px !important; top: 5px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-7 {
    left: 58px !important; top: 15px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-8 {
    left: 58px !important; top: 10px !important;
  }

  #tableView #pokerTable .snoop-winner-pot-flight .pot-pile-chip-9 {
    left: 58px !important; top: 5px !important;
  }
}

/* =========================================================
   SNOOP LEGACY GREEN POT CHIP DISABLE V1
   Old header-chip artwork must never appear as table payout.
   Real pot artwork is supplied by #potChipPile V1/V4.
========================================================= */
@media (min-width: 900px) {
  #tableView #pokerTable .pot-pile-chip {
    background: none !important;
  }

  #tableView #pokerTable #potChipPile .pot-pile-chip {
    background-image: var(--pot-chip-image) !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================================================
   SNOOP WINNER POT STACK VISIBILITY V3
   Keep payout flyer identical to accepted center pot V4.
========================================================= */

@media (min-width: 900px) {
  #tableView #pokerTable .snoop-winner-pot-flight {
    position: absolute !important;
    width: 94px !important;
    height: 50px !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 80 !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip {
    position: absolute !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;

    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

    filter:
      drop-shadow(0 2px 2px rgba(0,0,0,.55))
      drop-shadow(0 5px 5px rgba(0,0,0,.25)) !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* LEFT STACK */
  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-1 {
    left: 0 !important;
    top: 15px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-2 {
    left: 0 !important;
    top: 10px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-3 {
    left: 0 !important;
    top: 5px !important;
  }

  /* CENTER STACK */
  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-4 {
    left: 29px !important;
    top: 15px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-5 {
    left: 29px !important;
    top: 10px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-6 {
    left: 29px !important;
    top: 5px !important;
  }

  /* RIGHT STACK */
  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-7 {
    left: 58px !important;
    top: 15px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-8 {
    left: 58px !important;
    top: 10px !important;
  }

  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip-9 {
    left: 58px !important;
    top: 5px !important;
  }
}


/* =========================================================
   SNOOP WINNER POT STACK ART FIX V4
   Override legacy background:none on payout flyer chips.
========================================================= */

@media (min-width: 900px) {
  #tableView #pokerTable
  .snoop-winner-pot-flight
  .pot-pile-chip {
    background:
      var(--pot-chip-image)
      center / contain
      no-repeat !important;
  }
}

/* =========================================================
   SNOOP CURRENT TURN FINAL V1
   Refined whiskey-table active player indicator.
   Visual only. No geometry changes.
   ========================================================= */

#tableView #pokerTable
.seat.occupied.current-turn
.seat-unit > .seat-player {
  border-color: rgba(245, 201, 82, .98) !important;

  animation:
    snoop-current-turn-final 1.55s ease-in-out infinite
    !important;
}

@keyframes snoop-current-turn-final {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 222, 126, .72),
      0 0 7px rgba(224, 169, 47, .34),
      0 0 14px rgba(224, 169, 47, .16),
      0 6px 14px rgba(0, 0, 0, .55);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(255, 226, 137, .95),
      0 0 10px rgba(235, 183, 55, .52),
      0 0 20px rgba(224, 157, 31, .25),
      0 6px 14px rgba(0, 0, 0, .55);
  }
}


/* =========================================================
   SNOOP ACTION BUBBLE FINAL V6

   GLOBAL FOR ALL 6 SEATS

   Placement:
   centered directly ABOVE the two hole cards,
   with a clean air gap so the bubble never enters the cards.

   JS timing/lifecycle remains V5:
   6 sec hold + slow fade,
   interrupted quickly by the next action.
   ========================================================= */

#tableView #pokerTable
.seat-unit > .snoop-action-bubble {
  position: absolute !important;

  /*
   * seat-unit is 126px wide.
   * Bubble is centered on the same axis as the card pocket.
   */
  /*
   * ACTION BUBBLE POSITION V7
   *
   * Stay centered on the player's HOLE-CARD pocket.
   * Lift farther upward so the bubble body stays clear of:
   * - bet chips
   * - bet amount/value text
   * - the cards themselves
   */
  left: 50% !important;
  top: -78px !important;

  z-index: 96 !important;

  min-width: 84px !important;
  max-width: 150px !important;

  padding:
    10px 16px 11px !important;

  box-sizing: border-box !important;

  /*
   * Slightly irregular comic shape:
   * not a normal UI pill.
   */
  border:
    3px solid rgba(225, 174, 57, .98) !important;

  border-radius:
    52% 48% 55% 45% /
    47% 55% 45% 53% !important;

  background:
    radial-gradient(
      ellipse at 42% 27%,
      rgba(87, 61, 27, .99) 0%,
      rgba(48, 32, 16, .995) 38%,
      rgba(25, 18, 11, 1) 72%,
      rgba(12, 9, 7, 1) 100%
    ) !important;

  color: #ffe5a0 !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  letter-spacing: .7px !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow:
    0 1px 1px rgba(0,0,0,1),
    0 0 5px rgba(244,191,72,.12) !important;

  box-shadow:
    0 2px 0 rgba(255,239,180,.20) inset,
    0 -3px 7px rgba(0,0,0,.42) inset,
    0 7px 16px rgba(0,0,0,.62),
    0 0 10px rgba(221,159,35,.20) !important;

  pointer-events: none !important;
  overflow: visible !important;

  opacity: 0;

  filter: blur(.6px);

  transform:
    translateX(-50%)
    translateY(5px)
    scale(.82)
    rotate(-1deg) !important;

  transform-origin:
    50% 100% !important;

  transition:
    opacity .18s ease-out,
    transform .26s cubic-bezier(.18,.89,.32,1.30),
    filter .18s ease-out !important;
}


/* =========================================================
   CLASSIC COMIC TAIL

   Bubble body stays above cards.
   Tail alone extends downward toward the card/player unit.
   ========================================================= */

#tableView #pokerTable
.seat-unit > .snoop-action-bubble::before {
  content: '';

  position: absolute;

  left: 50%;
  bottom: -18px;

  width: 0;
  height: 0;

  /*
   * Outer gold tail.
   */
  border-left:
    10px solid transparent;

  border-right:
    3px solid transparent;

  border-top:
    21px solid rgba(225,174,57,.98);

  transform:
    translateX(-58%)
    rotate(8deg);

  transform-origin:
    50% 0;

  pointer-events: none;
}


#tableView #pokerTable
.seat-unit > .snoop-action-bubble::after {
  content: '';

  position: absolute;

  left: 50%;
  bottom: -12px;

  width: 0;
  height: 0;

  /*
   * Inner dark fill makes the tail look
   * connected to the bubble instead of a line.
   */
  border-left:
    7px solid transparent;

  border-right:
    2px solid transparent;

  border-top:
    16px solid rgba(29,20,11,.995);

  transform:
    translateX(-57%)
    rotate(8deg);

  transform-origin:
    50% 0;

  pointer-events: none;
}


/* ---------------------------------------------------------
   COMIC POP-IN
   --------------------------------------------------------- */

#tableView #pokerTable
.seat-unit > .snoop-action-bubble.is-visible {
  opacity: 1;

  filter: blur(0);

  transform:
    translateX(-50%)
    translateY(0)
    scale(1)
    rotate(-1deg) !important;
}


/* ---------------------------------------------------------
   NORMAL END
   JS starts this after 6 seconds.
   Slow floating fade.
   --------------------------------------------------------- */

#tableView #pokerTable
.seat-unit > .snoop-action-bubble.is-leaving {
  opacity: 0 !important;

  filter: blur(1.6px) !important;

  transform:
    translateX(-50%)
    translateY(-8px)
    scale(.94)
    rotate(1deg) !important;

  transition:
    opacity 1.2s ease-out,
    transform 1.2s ease-out,
    filter 1.2s ease-out !important;
}


/* ---------------------------------------------------------
   NEXT PLAYER ACTED
   Previous bubble disappears quickly.
   --------------------------------------------------------- */

#tableView #pokerTable
.seat-unit > .snoop-action-bubble.is-interrupted {
  opacity: 0 !important;

  filter: blur(1.8px) !important;

  transform:
    translateX(-50%)
    translateY(-4px)
    scale(.82) !important;

  transition:
    opacity .24s ease-out,
    transform .24s ease-out,
    filter .24s ease-out !important;
}


/* FOLD */

#tableView #pokerTable
.snoop-action-bubble.snoop-action-fold {
  color: #d8d0bd !important;

  border-color:
    rgba(184,163,119,.90) !important;
}


/* ALL-IN */

#tableView #pokerTable
.snoop-action-bubble.snoop-action-all-in {
  color: #fff2bc !important;

  border-color:
    rgba(255,207,72,1) !important;

  transform-origin:
    50% 100% !important;

  box-shadow:
    0 2px 0 rgba(255,244,198,.24) inset,
    0 -3px 7px rgba(0,0,0,.40) inset,
    0 8px 19px rgba(0,0,0,.66),
    0 0 17px rgba(238,174,35,.32) !important;
}


/* =========================================================
   SNOOP ACTION BUBBLE SEAT 6 OFFSET V1

   Bottom physical seat only.
   Other five seats keep the accepted global position.
   ========================================================= */

#tableView #pokerTable
.seat[data-visual-seat="6"]
.seat-unit > .snoop-action-bubble {
  top: -102px !important;
}


/* =========================================================
   SNOOP SHOWDOWN RESULT POD V1
   Presentation only.
   Keeps physical seat/card-pocket geometry untouched.
   ========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable .seat-result-zone {
    width: 132px !important;
  }

  #tableView #pokerTable
  .seat-result-zone .seat-showdown {
    box-sizing: border-box !important;

    width: 132px !important;

    padding: 5px 8px 6px !important;

    gap: 2px !important;

    background:
      linear-gradient(
        180deg,
        rgba(29,26,20,.98),
        rgba(8,8,7,.98)
      ) !important;

    border:
      1px solid rgba(221,176,72,.78) !important;

    border-radius: 0 0 9px 9px !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.50) !important;
  }

  #tableView #pokerTable
  .seat-result-zone .seat-showdown-hand {
    display: block !important;

    max-width: 100% !important;

    margin: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    letter-spacing: .25px !important;
  }

  #tableView #pokerTable
  .seat-result-zone .seat-showdown-winner {
    display: block !important;

    max-width: 100% !important;

    margin: 3px 0 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #f2cf67 !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;

    letter-spacing: .25px !important;
  }
}


/* =========================================================
   SNOOP SHOWDOWN RESULT POD V2
   Losers: quiet hand label
   Winner: compact result panel
   Geometry/game logic untouched
   ========================================================= */

@media (min-width: 900px) {

  /* Default showdown player: hand name only */
  #tableView #pokerTable
  .seat:not(.showdown-winner)
  .seat-result-zone .seat-showdown {
    width: 132px !important;
    padding: 3px 6px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #tableView #pokerTable
  .seat:not(.showdown-winner)
  .seat-result-zone .seat-showdown-hand {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    color: #d2ded8 !important;

    text-shadow:
      0 2px 4px rgba(0,0,0,.95) !important;
  }


  /* Winner: stronger compact result panel */
  #tableView #pokerTable
  .seat.showdown-winner
  .seat-result-zone .seat-showdown {
    box-sizing: border-box !important;

    width: 132px !important;
    padding: 5px 8px 6px !important;

    background:
      linear-gradient(
        180deg,
        rgba(29,26,20,.98),
        rgba(8,8,7,.98)
      ) !important;

    border:
      1px solid rgba(221,176,72,.78) !important;

    border-radius: 0 0 9px 9px !important;

    box-shadow:
      0 6px 14px rgba(0,0,0,.50) !important;
  }

  #tableView #pokerTable
  .seat.showdown-winner
  .seat-result-zone .seat-showdown-hand {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    color: #d2ded8 !important;
  }

  #tableView #pokerTable
  .seat.showdown-winner
  .seat-result-zone .seat-showdown-winner {
    margin-top: 3px !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;

    color: #f2cf67 !important;

    text-shadow:
      0 2px 5px rgba(0,0,0,.90) !important;
  }
}


/* =========================================================
   SNOOP SHOWDOWN RESULT POD V3
   Hide losing hand labels on table.
   Winner keeps hand name + WINNER payout.
   ========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat:not(.showdown-winner)
  .seat-result-zone {
    display: none !important;
  }

}


/* =========================================================
   SNOOP SMART BETTING BAR V1
   Desktop only.
   Outer action dock geometry remains frozen.
   Mobile intentionally untouched.
   ========================================================= */

/* New smart controls must never enter the existing mobile UI. */
.snoop-bet-tools {
  display: none;
}

@media (min-width: 900px) {

  #tableView #actionControls {
    /* FROZEN SCREEN-UI ANCHOR */
    left: 50% !important;
    bottom: 6px !important;
    width: min(710px, calc(100vw - 32px)) !important;
    transform: translateX(-50%) !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 5px !important;

    padding: 6px !important;

    border: 1px solid rgba(184, 151, 74, .42) !important;
    border-radius: 12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(13, 21, 17, .96),
        rgba(5, 10, 8, .97)
      ) !important;

    box-shadow:
      0 8px 24px rgba(0, 0, 0, .48),
      0 1px 0 rgba(255, 255, 255, .04) inset !important;

    backdrop-filter: blur(7px);
  }


  /* ---------- QUICK AMOUNTS + SLIDER ---------- */

  #tableView #actionControls .snoop-bet-tools {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  #tableView #actionControls .snoop-bet-presets {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  #tableView #actionControls .snoop-bet-preset,
  #tableView #actionControls .snoop-bet-step {
    height: 27px !important;
    min-width: 0 !important;
    padding: 0 5px !important;

    border: 1px solid rgba(184, 151, 74, .34) !important;
    border-radius: 7px !important;

    background: rgba(25, 35, 29, .96) !important;
    color: #e8e1cf !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    cursor: pointer;
  }

  #tableView #actionControls .snoop-bet-preset:hover:not(:disabled),
  #tableView #actionControls .snoop-bet-step:hover:not(:disabled) {
    border-color: rgba(218, 180, 95, .82) !important;
    background: rgba(50, 61, 48, .98) !important;
  }

  #tableView #actionControls .snoop-bet-adjust {
    display: grid !important;
    grid-template-columns: 28px minmax(80px, 1fr) 28px 76px !important;
    align-items: center !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  #tableView #actionControls .snoop-bet-step {
    width: 28px !important;
    padding: 0 !important;
    font-size: 16px !important;
  }

  #tableView #betSlider {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #d8b45f;
  }

  #tableView #betAmount {
    box-sizing: border-box !important;
    width: 76px !important;
    height: 27px !important;
    min-width: 0 !important;

    padding: 2px 6px !important;

    border: 1px solid rgba(218, 180, 95, .55) !important;
    border-radius: 7px !important;

    background: rgba(4, 9, 7, .96) !important;
    color: #f0d77d !important;

    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
  }


  /* ---------- PRIMARY ACTION ROW ---------- */

  #tableView #actionControls .snoop-primary-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #tableView #actionControls .snoop-primary-actions > .action-btn,
  #tableView #actionControls .bet-control {
    min-width: 0 !important;
  }

  #tableView #actionControls .action-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;

    padding: 0 10px !important;

    border-radius: 8px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #tableView #actionControls .bet-control {
    display: block !important;
  }

  #tableView #actionControls .bet-control .action-btn {
    width: 100% !important;
  }

  /*
   * ALL-IN is moving to the quick-amount row.
   * Keep the proven legacy button/function in the DOM,
   * but remove only its desktop visual slot.
   */
  #tableView #actionControls #allInBtn.snoop-legacy-allin {
    display: none !important;
  }


  #tableView:fullscreen #actionControls,
  #tableView:-webkit-full-screen #actionControls {
    bottom: 8px !important;
  }

}


/* =========================================================
   SNOOP SMART BETTING ALL-IN ACTION MODE V1
   Desktop only.
   Normal mode keeps BET / RAISE.
   Selected ALL-IN mode exposes the proven legacy ALL-IN action.
   ========================================================= */
@media (min-width: 900px) {

  #tableView #actionControls.all-in-selected
  .bet-control {
    display: none !important;
  }

  #tableView #actionControls.all-in-selected
  #allInBtn.snoop-legacy-allin {
    display: block !important;
    grid-column: 3 !important;
    width: 100% !important;
  }

}

/* =========================================================
   SNOOP PRE-DECISION MINI BAR V3
   DESKTOP ONLY.

   Compact two-choice presentation:
   CHECK/FOLD | CHECK

   Normal betting-bar geometry remains unchanged.
   Only PRE-DECISION mode uses the compact width.
   ========================================================= */

.snoop-predecision {
  display: none;
}

@media (min-width: 900px) {

  #tableView #actionControls.predecision-active {
    width: 290px !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 6px !important;
  }

  #tableView #actionControls.predecision-active
  .snoop-bet-tools,

  #tableView #actionControls.predecision-active
  .snoop-primary-actions {
    display: none !important;
  }

  #tableView #actionControls.predecision-active
  #preDecisionPanel:not([hidden]) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #tableView #actionControls.predecision-active
  #preDecisionPanel .snoop-predecision-options {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #tableView #actionControls.predecision-active
  #preDecisionPanel .snoop-predecision-option {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(184,151,74,.42) !important;
    border-radius: 8px !important;
    background: rgba(25,35,29,.96) !important;

    color: #f0eadc !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;

    cursor: pointer;
    user-select: none;
  }

  #tableView #actionControls.predecision-active
  #preDecisionPanel .snoop-predecision-option input {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
    flex: 0 0 13px !important;
    accent-color: #d8b45f;
  }

}

/* =========================================================
   SNOOP PRE-DECISION FRAMELESS V4
   DESKTOP ONLY.
   Removes only the outer pre-decision shell.
   Normal betting bar remains untouched.
   ========================================================= */
@media (min-width: 900px) {

  #tableView #actionControls.predecision-active {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

}

/* =========================================================
   SNOOP JAZZ ROOM LOBBY CARD V1
   Desktop presentation only.
   Mobile/tablet room rail remains untouched.
========================================================= */

@media (min-width: 981px) {

  .lobby-v5-room-rail {
    grid-template-columns:
      minmax(245px, 1.35fr)
      minmax(245px, 1.35fr)
      repeat(3, minmax(120px, .70fr));
  }

  .lobby-v5-jazz {
    cursor: default;

    border-color:
      rgba(218, 177, 58, .27);

    background:
      linear-gradient(
        145deg,
        rgba(8, 28, 25, .98),
        rgba(3, 17, 16, .99)
      );
  }

  .lobby-v5-jazz-art-placeholder {
    position: absolute;
    inset: 0;

    display: grid;
    place-items: center;

    background:
      radial-gradient(
        circle at 50% 40%,
        rgba(214, 174, 66, .14),
        transparent 34%
      ),
      linear-gradient(
        135deg,
        rgba(6, 35, 31, .96),
        rgba(3, 15, 16, .99)
      );
  }

  .lobby-v5-jazz-art-placeholder span {
    color:
      rgba(224, 188, 83, .72);

    font-size: 34px;

    text-shadow:
      0 0 24px rgba(218, 177, 58, .20);
  }

}

/* =========================================================
   SNOOP JAZZ ROOM SKIN V1
   Artwork only. Shared 1672x941 poker geometry is untouched.
========================================================= */

@media (min-width: 900px) {
  #tableView.room-jazz #pokerTable {
    background:
      url('/assets/snoop-jazz-table-v1.png')
      center center / 1672px 941px
      no-repeat !important;
  }
}

/* =========================================================
   SNOOP JAZZ LOBBY INTERACTION V1
   Match Whiskey hover behavior without changing Jazz styling.
========================================================= */

button.lobby-v5-jazz:not(:disabled) {
  cursor: pointer;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

button.lobby-v5-jazz:not(:disabled):hover {
  transform: translateY(-2px) !important;
}

button.lobby-v5-jazz:not(:disabled):hover
.lobby-v5-room-image {
  transform: scale(1.035) !important;
}

button.lobby-v5-jazz:disabled {
  cursor: not-allowed;
}

/* =========================================================
   SNOOP MIDNIGHT CLUB LOBBY CARD V1
   Three equal LIVE rooms + two compact future rooms.
   Desktop only. Poker table geometry is untouched.
========================================================= */

@media (min-width: 981px) {

  .lobby-v5-room-rail {
    grid-template-columns:
      repeat(3, minmax(230px, 1.35fr))
      repeat(2, minmax(120px, .70fr));
  }

  .lobby-v5-midnight {
    border-color:
      rgba(218, 177, 58, .27);

    background:
      linear-gradient(
        145deg,
        rgba(8, 20, 31, .98),
        rgba(3, 11, 19, .99)
      );
  }

  button.lobby-v5-midnight:not(:disabled) {
    cursor: pointer;

    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }

  button.lobby-v5-midnight:not(:disabled):hover {
    transform: translateY(-2px) !important;
  }

  button.lobby-v5-midnight:not(:disabled):hover
  .lobby-v5-room-image {
    transform: scale(1.035) !important;
  }

  button.lobby-v5-midnight:disabled {
    cursor: not-allowed;
  }

}

/* =========================================================
   SNOOP LIVE ROOM TITLE FIT V1
   Keep all three LIVE room names fully visible.
   Desktop lobby only.
========================================================= */

@media (min-width: 981px) {

  .lobby-v5-whiskey .lobby-v5-room-title,
  .lobby-v5-jazz .lobby-v5-room-title,
  .lobby-v5-midnight .lobby-v5-room-title {
    gap: 6px !important;
  }

  .lobby-v5-whiskey .lobby-v5-room-title > div,
  .lobby-v5-jazz .lobby-v5-room-title > div,
  .lobby-v5-midnight .lobby-v5-room-title > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .lobby-v5-whiskey .lobby-v5-room-title strong,
  .lobby-v5-jazz .lobby-v5-room-title strong,
  .lobby-v5-midnight .lobby-v5-room-title strong {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    font-size: 15px !important;
    letter-spacing: -.15px !important;
  }

  .lobby-v5-whiskey .lobby-v5-enter-room,
  .lobby-v5-jazz .lobby-v5-enter-room,
  .lobby-v5-midnight .lobby-v5-enter-room {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 7px !important;
    gap: 4px !important;
  }

  .lobby-v5-whiskey .lobby-v5-enter-room span,
  .lobby-v5-jazz .lobby-v5-enter-room span,
  .lobby-v5-midnight .lobby-v5-enter-room span {
    font-size: 6px !important;
    letter-spacing: .07em !important;
    white-space: nowrap !important;
  }

  .lobby-v5-whiskey .lobby-v5-enter-room i,
  .lobby-v5-jazz .lobby-v5-enter-room i,
  .lobby-v5-midnight .lobby-v5-enter-room i {
    font-size: 9px !important;
  }

}

/* SNOOP LIVE ROOM ENTER BUTTON RESTORE V1 */
@media (min-width: 981px) {
  .lobby-v5-whiskey .lobby-v5-enter-room span,
  .lobby-v5-jazz .lobby-v5-enter-room span,
  .lobby-v5-midnight .lobby-v5-enter-room span {
    font-size: 7px !important;
    letter-spacing: .10em !important;
  }
}

/* SNOOP LIVE ROOM ENTER BUTTON POLISH V1 */
@media (min-width: 981px) {
  .lobby-v5-whiskey .lobby-v5-enter-room,
  .lobby-v5-jazz .lobby-v5-enter-room,
  .lobby-v5-midnight .lobby-v5-enter-room {
    min-height: 30px !important;
    padding: 0 9px !important;
    gap: 5px !important;
  }

  .lobby-v5-whiskey .lobby-v5-enter-room i,
  .lobby-v5-jazz .lobby-v5-enter-room i,
  .lobby-v5-midnight .lobby-v5-enter-room i {
    font-size: 10px !important;
  }
}

/* =========================================================
   SNOOP LIVE ROOM HOVER UNIFIED V1
   Match Whiskey premium hover across all LIVE rooms.
   Desktop only.
========================================================= */

@media (min-width: 981px) {

  button.lobby-v5-jazz:not(:disabled):hover,
  button.lobby-v5-midnight:not(:disabled):hover {
    transform: translateY(-2px) !important;

    border-color:
      rgba(221, 183, 63, .42) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 19px 46px rgba(0,0,0,.22),
      0 0 28px rgba(191,151,38,.045) !important;
  }

  button.lobby-v5-jazz:not(:disabled):hover
  .lobby-v5-room-image,
  button.lobby-v5-midnight:not(:disabled):hover
  .lobby-v5-room-image {
    transform: scale(1.035) !important;

    filter:
      brightness(.96)
      saturate(.95)
      contrast(1.035) !important;
  }

}

/* =========================================================
   SNOOP LIVE ROOM CTA FINAL V1
   Unified Whiskey-style CTA glow + clearer label.
   Desktop only.
========================================================= */

@media (min-width: 981px) {

  .lobby-v5-whiskey .lobby-v5-enter-room span,
  .lobby-v5-jazz .lobby-v5-enter-room span,
  .lobby-v5-midnight .lobby-v5-enter-room span {
    font-size: 8px !important;
    letter-spacing: .09em !important;
  }

  button.lobby-v5-jazz:not(:disabled):hover
  .lobby-v5-enter-room,
  button.lobby-v5-midnight:not(:disabled):hover
  .lobby-v5-enter-room {
    border-color:
      rgba(58, 224, 174, .42) !important;

    background:
      linear-gradient(
        145deg,
        rgba(28, 137, 98, .27),
        rgba(12, 78, 55, .23)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 14px rgba(38,203,151,.055) !important;
  }

}

/* =========================================================
   SNOOP MIDNIGHT CLUB ROOM SKIN V1
   Artwork only. Shared 1672x941 poker geometry is untouched.
========================================================= */

@media (min-width: 900px) {
  #tableView.room-midnight #pokerTable {
    background:
      url('/assets/snoop-midnight-table-v1.png?v=8')
      center center / 1672px 941px
      no-repeat !important;
  }
}

/* =========================================================
   SNOOP PLAYER ACTION TIMER V1
   Desktop presentation only.
   Seat / card / bet / pot geometry untouched.
========================================================= */

@media (min-width: 900px) {

  #tableView #pokerTable
  .seat-unit > .seat-player > .seat-action-timer {
    position: absolute !important;

    right: -42px !important;
    top: 50% !important;

    width: 36px !important;
    height: 36px !important;

    transform: translateY(-50%) !important;

    display: none;

    border-radius: 50% !important;

    background:
      conic-gradient(
        #f1c85c var(--snoop-timer-progress, 100%),
        rgba(241,200,92,.14) 0
      ) !important;

    box-shadow:
      0 0 0 1px rgba(241,200,92,.35),
      0 0 12px rgba(241,200,92,.24),
      0 4px 10px rgba(0,0,0,.55) !important;

    z-index: 60 !important;

    pointer-events: none !important;
  }


  #tableView #pokerTable
  .seat.current-turn
  .seat-action-timer.is-active {
    display: grid !important;
    place-items: center !important;
  }


  #tableView #pokerTable
  .seat-action-timer::after {
    content: "" !important;

    position: absolute !important;
    inset: 4px !important;

    border-radius: 50% !important;

    background:
      radial-gradient(
        circle at 50% 38%,
        rgba(38,34,24,.98),
        rgba(8,8,7,.99)
      ) !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05) !important;

    z-index: 1 !important;
  }


  #tableView #pokerTable
  .seat-action-timer-track,
  #tableView #pokerTable
  .seat-action-timer-fill {
    display: none !important;
  }


  #tableView #pokerTable
  .seat-action-timer-seconds {
    position: relative !important;

    z-index: 2 !important;

    display: block !important;

    color: #fff3c4 !important;

    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    overflow: visible !important;

    text-shadow:
      0 1px 2px rgba(0,0,0,.85) !important;
  }


  #tableView #pokerTable
  .seat-action-timer.is-urgent {
    background:
      conic-gradient(
        #ff4b3e var(--snoop-timer-progress, 25%),
        rgba(255,75,62,.13) 0
      ) !important;

    box-shadow:
      0 0 0 1px rgba(255,75,62,.48),
      0 0 15px rgba(255,75,62,.42),
      0 4px 10px rgba(0,0,0,.55) !important;
  }


  #tableView #pokerTable
  .seat-action-timer.is-urgent
  .seat-action-timer-seconds {
    color: #fff !important;
  }


  #tableView #pokerTable
  .seat-action-timer.is-critical {
    animation:
      snoopActionTimerPulse .72s ease-in-out infinite !important;
  }


  @keyframes snoopActionTimerPulse {
    0%, 100% {
      transform:
        translateY(-50%)
        scale(1);
    }

    50% {
      transform:
        translateY(-50%)
        scale(1.08);
    }
  }

}


/* =========================================================
   SNOOP LEGACY CENTER TIMER DESKTOP HIDE V1
   Desktop only. Mobile untouched.
========================================================= */

@media (min-width: 900px) {
  #tableView #pokerTable > .action-timer,
  #tableView #actionTimer {
    display: none !important;
  }
}



/* =========================================================
   SNOOP ADMIN PANEL DESKTOP V1
   Desktop only. Poker table geometry untouched.
========================================================= */

@media (min-width: 900px) {

  .snoop-header-admin {
    height: 42px;
    min-width: 72px;
    padding: 0 14px;

    border: 1px solid rgba(255, 72, 72, .58);
    border-radius: 11px;

    background:
      linear-gradient(
        145deg,
        rgba(120, 16, 20, .96),
        rgba(65, 7, 10, .98)
      );

    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .13em;

    cursor: pointer;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 18px rgba(220, 30, 38, .14),
      0 7px 18px rgba(0,0,0,.20);

    transition:
      transform .15s ease,
      border-color .15s ease,
      box-shadow .15s ease;
  }

  .snoop-header-admin:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 100, 100, .9);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 22px rgba(235, 35, 45, .25),
      0 8px 20px rgba(0,0,0,.24);
  }

  .snoop-header-admin[hidden] {
    display: none !important;
  }


  .snoop-admin-backdrop {
    position: fixed;
    inset: 0;

    z-index: 2147483001 !important;

    display: grid;
    place-items: center;

    padding: 32px;

    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(29, 66, 51, .24),
        transparent 45%
      ),
      rgba(2, 8, 6, .88);

    backdrop-filter: blur(9px);
  }

  .snoop-admin-backdrop[hidden] {
    display: none !important;
  }


  .snoop-admin-panel {
    width: min(1180px, calc(100vw - 64px));
    height: min(760px, calc(100vh - 64px));

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid rgba(202, 172, 76, .27);
    border-radius: 20px;

    background:
      linear-gradient(
        145deg,
        rgba(13, 32, 25, .99),
        rgba(5, 17, 13, .995)
      );

    box-shadow:
      0 35px 100px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.035);
  }


  .snoop-admin-panel-header {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 24px;

    border-bottom: 1px solid rgba(202, 172, 76, .15);

    background:
      linear-gradient(
        90deg,
        rgba(26, 58, 44, .55),
        rgba(8, 24, 18, .25)
      );
  }

  .snoop-admin-panel-header small {
    color: #d84b50;

    font-size: 9px;
    font-weight: 950;
    letter-spacing: .22em;
  }

  .snoop-admin-panel-header h2 {
    margin: 3px 0 1px;

    color: #f2cc59;

    font-size: 24px;
    line-height: 1;
    letter-spacing: .06em;
  }

  .snoop-admin-panel-header p {
    margin: 5px 0 0;

    color: rgba(201, 215, 208, .62);

    font-size: 11px;
    letter-spacing: .04em;
  }


  .snoop-admin-close {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;

    background: rgba(255,255,255,.035);

    color: rgba(255,255,255,.75);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
  }

  .snoop-admin-close:hover {
    color: #fff;
    border-color: rgba(216,75,80,.50);
    background: rgba(120,16,20,.24);
  }


  .snoop-admin-toolbar {
    display: flex;
    align-items: end;
    gap: 18px;

    padding: 18px 24px;

    border-bottom: 1px solid rgba(255,255,255,.055);
  }


  .snoop-admin-search {
    flex: 1;

    display: grid;
    gap: 7px;
  }

  .snoop-admin-search > span,
  .snoop-admin-count > span {
    color: rgba(151,180,166,.72);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
  }

  .snoop-admin-search input {
    width: 100%;
    height: 42px;

    padding: 0 13px;

    border: 1px solid rgba(202,172,76,.17);
    border-radius: 10px;
    outline: none;

    background: rgba(0,0,0,.20);

    color: #f3f5f4;

    font: inherit;
    font-size: 13px;
  }

  .snoop-admin-search input:focus {
    border-color: rgba(226,190,71,.55);

    box-shadow:
      0 0 0 3px rgba(226,190,71,.055);
  }


  .snoop-admin-count {
    min-width: 90px;

    display: grid;
    gap: 4px;

    padding: 8px 13px;

    border-left: 1px solid rgba(202,172,76,.15);
  }

  .snoop-admin-count strong {
    color: #f1c84b;

    font-size: 20px;
    line-height: 1;
  }


  .snoop-admin-status {
    margin: 14px 24px 0;
    padding: 10px 13px;

    border: 1px solid rgba(202,172,76,.16);
    border-radius: 9px;

    background: rgba(0,0,0,.18);

    color: rgba(235,240,237,.82);

    font-size: 12px;
  }

  .snoop-admin-status.is-error {
    border-color: rgba(230,65,70,.35);
    color: #ff9a9d;
  }

  .snoop-admin-status.is-success {
    border-color: rgba(77,190,122,.30);
    color: #82e1a7;
  }


  .snoop-admin-table-wrap {
    flex: 1;

    margin: 16px 24px 24px;

    overflow: auto;

    border: 1px solid rgba(255,255,255,.055);
    border-radius: 12px;

    background: rgba(0,0,0,.12);
  }


  .snoop-admin-table {
    width: 100%;

    border-collapse: collapse;

    color: #e8eeeb;

    font-size: 12px;
  }

  .snoop-admin-table th {
    position: sticky;
    top: 0;

    z-index: 2;

    padding: 12px 14px;

    text-align: left;

    background: #0b2119;

    color: rgba(165,190,178,.78);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;

    border-bottom: 1px solid rgba(202,172,76,.14);
  }

  .snoop-admin-table td {
    padding: 11px 14px;

    border-bottom: 1px solid rgba(255,255,255,.045);

    vertical-align: middle;
  }

  .snoop-admin-table tbody tr:hover {
    background: rgba(255,255,255,.025);
  }


  .snoop-admin-player-name {
    display: grid;
    gap: 2px;
  }

  .snoop-admin-player-name strong {
    color: #fff;

    font-size: 13px;
  }

  .snoop-admin-player-name span {
    color: rgba(163,184,174,.60);

    font-size: 10px;
  }


  .snoop-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .snoop-admin-badge.is-active {
    color: #7fe0a4;
    background: rgba(57,164,99,.11);
    border: 1px solid rgba(57,164,99,.22);
  }

  .snoop-admin-badge.is-inactive {
    color: #ff9296;
    background: rgba(190,49,55,.10);
    border: 1px solid rgba(190,49,55,.22);
  }


  .snoop-admin-balance {
    color: #f1c84b;

    font-size: 14px;
    font-weight: 950;

    white-space: nowrap;
  }


  .snoop-admin-chip-control {
    display: flex;
    align-items: center;
    gap: 7px;

    min-width: 240px;
  }

  .snoop-admin-chip-control input {
    width: 110px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid rgba(202,172,76,.20);
    border-radius: 8px;
    outline: none;

    background: rgba(0,0,0,.24);

    color: #fff;

    font: inherit;
    font-size: 12px;
    font-weight: 800;
  }

  .snoop-admin-chip-control input:focus {
    border-color: rgba(226,190,71,.58);
  }


  .snoop-admin-add-btn {
    height: 34px;

    padding: 0 12px;

    border: 1px solid rgba(226,190,71,.40);
    border-radius: 8px;

    background:
      linear-gradient(
        145deg,
        #d2aa38,
        #8c6918
      );

    color: #07130e;

    font: inherit;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .07em;

    cursor: pointer;

    white-space: nowrap;
  }

  .snoop-admin-add-btn:hover {
    filter: brightness(1.08);
  }

  .snoop-admin-add-btn:disabled {
    opacity: .45;
    cursor: wait;
  }


  /*
   * SNOOP ADMIN BOT GUI V1
   * Desktop admin presentation only.
   */
  .snoop-admin-bot-row {
    background: rgba(202,172,76,.025);
  }

  .snoop-admin-bot-badge {
    display: inline-flex;
    align-items: center;

    margin-left: 6px;
    padding: 2px 6px;

    border: 1px solid rgba(104,181,255,.30);
    border-radius: 999px;

    background: rgba(56,126,190,.12);

    color: #8fcaff;

    font-size: 8px;
    font-weight: 950;
    letter-spacing: .10em;

    vertical-align: middle;
  }

  .snoop-admin-bot-meta {
    margin-top: 6px;

    color: rgba(143,202,255,.72);

    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;

    white-space: nowrap;
  }

  .snoop-admin-bot-bankroll,
  .snoop-admin-bot-seat-state {
    display: grid;
    gap: 2px;
  }

  .snoop-admin-bot-bankroll strong {
    color: #f1c84b;

    font-size: 13px;
    font-weight: 950;

    white-space: nowrap;
  }

  .snoop-admin-bot-bankroll span,
  .snoop-admin-bot-seat-state span {
    color: rgba(163,184,174,.62);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
  }

  .snoop-admin-bot-seat-state {
    margin-top: 8px;
  }

  .snoop-admin-bot-seat-state strong {
    color: #dce8e2;

    font-size: 10px;
    font-weight: 900;

    white-space: nowrap;
  }

  .snoop-admin-bot-controls {
    display: grid;
    gap: 8px;

    min-width: 300px;
  }

  .snoop-admin-bot-controls .snoop-admin-chip-control {
    min-width: 0;
  }

  .snoop-admin-bot-seat-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .snoop-admin-bot-seat-controls input {
    height: 34px;

    padding: 0 8px;

    border: 1px solid rgba(104,181,255,.22);
    border-radius: 8px;
    outline: none;

    background: rgba(0,0,0,.24);

    color: #fff;

    font: inherit;
    font-size: 11px;
    font-weight: 800;
  }

  /*
   * SNOOP ADMIN BOT MANAGER V2
   * Desktop-only tabs and dynamic seating controls.
   */
  .snoop-admin-tabs {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 10px;
  }

  .snoop-admin-tab {
    min-width: 86px;
    height: 32px;

    padding: 0 14px;

    border: 1px solid rgba(202,172,76,.18);
    border-radius: 8px;

    background: rgba(0,0,0,.18);

    color: rgba(220,232,226,.62);

    font: inherit;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .08em;

    cursor: pointer;
  }

  .snoop-admin-tab:hover {
    border-color: rgba(202,172,76,.34);
    color: #e8eee9;
  }

  .snoop-admin-tab.is-active {
    border-color: rgba(202,172,76,.52);
    background: rgba(202,172,76,.10);
    color: #f1c84b;
  }

  .snoop-admin-bot-seat-controls select {
    height: 34px;

    padding: 0 8px;

    border: 1px solid rgba(104,181,255,.22);
    border-radius: 8px;
    outline: none;

    background: rgba(0,0,0,.24);

    color: #fff;

    font: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
  }

  .snoop-admin-bot-seat-controls select:first-child {
    width: 132px;
  }

  .snoop-admin-bot-seat-controls select:nth-child(2) {
    width: 78px;
  }

  .snoop-admin-bot-seat-controls input {
    width: 82px;
  }

  .snoop-admin-bot-seat-controls input:focus,
  .snoop-admin-bot-seat-controls select:focus {
    border-color: rgba(104,181,255,.58);
  }

  .snoop-admin-bot-seat-controls select:disabled,
  .snoop-admin-bot-seat-controls input:disabled {
    opacity: .45;
    cursor: not-allowed;
  }

  .snoop-admin-bot-action {
    height: 34px;

    padding: 0 10px;

    border: 1px solid rgba(104,181,255,.35);
    border-radius: 8px;

    background: rgba(44,105,160,.22);

    color: #a9d8ff;

    font: inherit;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .055em;

    cursor: pointer;

    white-space: nowrap;
  }

  .snoop-admin-bot-action:hover {
    border-color: rgba(104,181,255,.60);
    background: rgba(44,105,160,.32);
  }

  .snoop-admin-bot-action.is-remove {
    border-color: rgba(230,65,70,.34);
    background: rgba(150,34,39,.16);
    color: #ff9a9d;
  }

  .snoop-admin-bot-action.is-remove:hover {
    border-color: rgba(230,65,70,.58);
    background: rgba(150,34,39,.25);
  }

  .snoop-admin-bot-action:disabled {
    opacity: .45;
    cursor: wait;
  }

}



/* SNOOP POKER - isolated leave confirmation */
#leaveTableModal[hidden] { display: none !important; }
#leaveTableModal {
  z-index: 2147483000;
  background: rgba(0, 9, 7, .82);
}
#leaveTableModal .snoop-leave-modal {
  width: min(440px, 100%);
  box-sizing: border-box;
  text-align: center;
  gap: 15px;
  padding: 30px 26px;
  border: 1px solid #a88638;
  border-radius: 20px;
  background: linear-gradient(155deg, #173328, #071711);
  box-shadow: 0 25px 75px rgba(0,0,0,.7), 0 0 30px rgba(180,140,50,.12);
}
#leaveTableModal .snoop-leave-icon {
  font-size: 34px;
  color: #dbb653;
}
#leaveTableModal h3 {
  color: #e5bd59;
  letter-spacing: 2px;
  font-size: 22px;
}
#leaveTableModal .snoop-leave-subtitle { color: #f0eee5; line-height: 1.5; }
#leaveTableModal .snoop-leave-notice {
  padding: 16px;
  display: grid;
  gap: 12px;
  text-align: left;
  border: 1px solid rgba(202,165,76,.22);
  border-radius: 12px;
  background: rgba(4,19,13,.65);
}
#leaveTableModal .snoop-leave-notice p {
  color: #d4ded5;
  font-size: 13px;
  line-height: 1.6;
}
#leaveTableModal .snoop-leave-actions {
  justify-content: stretch;
  gap: 10px;
}
#leaveTableModal .snoop-leave-actions button {
  flex: 1;
  min-width: 0;
  padding: 13px 8px;
  border-radius: 10px;
  border: 1px solid #426451;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
#stayAtTableBtn { background: #244535; color: #fff; }
#confirmLeaveTableBtn {
  background: linear-gradient(135deg, #ebc569, #b8892c);
  color: #101810;
  border-color: #d6ad4c !important;
}
#leaveTableModal button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


/* SNOOP POKER - leave popup logo */
#leaveTableModal .snoop-leave-logo {
  display: block;
  width: min(230px, 78%);
  height: auto;
  max-height: 105px;
  object-fit: contain;
  margin: 0 auto;
}