/* {
  outline: 1px solid rgba(255,0,0,.2);
}
*/

/* ===============================
   GLOBAL RESET
================================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body{
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: #cfd6ff;
}

body{

  background:

    radial-gradient(
      circle at 50% 25%,
      rgba(255,255,255,.03),
      transparent 35%
    ),

    radial-gradient(
      circle at 50% 70%,
      rgba(63,169,245,.04),
      transparent 55%
    ),

    linear-gradient(
      180deg,
      #2c2f34 0%,
      #1f2227 45%,
      #14171b 100%
    );
}
/* ===============================
   ROOM 
================================ */
.room {
  position: absolute;

  width: 1600px;
  height: 900px;

  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transform-origin: top center;

  pointer-events: auto;
}
.room-stage{
  position: relative;
  width: 100%;
  height: 100%;
}
/* ===============================
   ROOM
   UPC COOL CHARCOAL PASS
================================ */

.room{

  background:

    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,.06),
      transparent 34%
    ),

    radial-gradient(
      circle at top,
      rgba(140,145,155,.10),
      transparent 42%
    ),

    linear-gradient(
      180deg,
      #4b4d52 0%,
      #34363b 42%,
      #23262b 78%,
      #1a1c20 100%
    );

  overflow:hidden;
}

/* ambient room haze */
.room::before{

  content:"";

  position:absolute;
  inset:0;

  background:

    radial-gradient(
      circle at 50% 10%,
      rgba(255,255,255,.06),
      transparent 24%
    ),

    radial-gradient(
      circle at 18% 28%,
      rgba(212,180,131,.035),
      transparent 18%
    ),

    radial-gradient(
      circle at 82% 28%,
      rgba(212,180,131,.035),
      transparent 18%
    );

  pointer-events:none;
}



/* ===============================
   TABLE FRAME 
   On 3:2 aspect ratio
================================ */
.table-wrap{
  position: absolute;

  width: 1200px;
  height: 800px;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);

  border-radius: 28px;
  overflow: visible;
  isolation: isolate;
}



.table-felt{

  position:absolute;

  inset:80px 125px 150px 125px;

  border-radius:44% / 58%;

  overflow:hidden;

  background:

radial-gradient(
  circle at 50% 38%,
  rgba(255,0,200,.045),
  transparent 34%
),

radial-gradient(
  circle at 50% 62%,
  rgba(0,229,255,.04),
  transparent 42%
),

linear-gradient(
  180deg,
  #141922 0%,
  #0b1018 52%,
  #05070c 100%
);

  box-shadow:

  inset 0 0 0 2px rgba(255,255,255,.08),

  inset 0 0 34px rgba(0,0,0,.18),

  inset 0 0 80px rgba(0,0,0,.10),

  0 0 0 2px rgba(0,0,0,.28),

  0 14px 30px rgba(0,0,0,.28);

  z-index:1;
}

/* cloth texture */
.table-felt::before{

  content:"";

  position:absolute;
  inset:0;

  opacity:.05;

  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 4px
    );

  mix-blend-mode:multiply;

  pointer-events:none;
}

/* =====================================
   UPC FELT LOGOS
===================================== */

.table-felt::after{

  content:"";
  position:absolute;
  inset:0;

  background-image:
    url('/upc/game_tables/holdem/dirtydogslog.png'),
    url('/upc/game_tables/showdown/feltlogoSD.png'),
    url('/upc/game_tables/holdem/zonelogtrans.png'),
    url('/upc/game_tables/holdem/lamperttran.png');

  background-repeat:no-repeat;

  background-position:
    calc(50% - 270px) center,
    center center,
    calc(50% + 270px) center,
    center calc(50% + 170px);

  background-size:
    160px,
    500px,
    160px,
    220px;

  opacity:1;
  pointer-events:none;

  filter:
    brightness(.92)
    contrast(1.05);

  z-index:1;
}


.table-rail{

  position:absolute;

  inset:18px 48px 68px 48px;

  border-radius:50% / 65%;

  overflow:hidden;

  background:

linear-gradient(
  180deg,
  #202634 0%,
  #171d29 45%,
  #10151f 100%
);

  box-shadow:

  inset 0 0 0 2px rgba(255,255,255,.03),

  inset 0 0 40px rgba(0,0,0,.92),

  inset 0 -12px 26px rgba(0,0,0,.55),

  0 22px 46px rgba(0,0,0,.88);
}

/* subtle texture */
.table-rail::before{

  content:"";

  position:absolute;
  inset:0;

  opacity:.12;

  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.04) 1px, transparent 1px);

  background-size:24px 24px;

  pointer-events:none;
}

/* inner gold trim */
.table-rail::after{

  content:"";

  position:absolute;

  inset:14px;

  border-radius:48% / 63%;

  border:1px solid rgba(212,180,131,.16);

  pointer-events:none;
}


/* =========================================
   DEALER STATION
========================================= */
.dealer-station{
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);

  width: 200px;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  z-index: 30;
}

/* Avatar */
.dealer-avatar{
  position: relative;
  top: -100px;

  width: 190px;
  height: 175px;
  border-radius: 100%;

  overflow: hidden;
}

.dealer-avatar img{
  width: 90%;
  height: 90%;
  object-fit: cover;
}

/* =========================================
        BLINDS TIMER
========================================= */
.dealer-hud{

  position:absolute;
  top:8%;
  left:50%;

  transform:translateX(-50%);

  display:flex;
  align-items:center;
  gap:20px;

  padding:10px 24px;

  border-radius:999px;

  background:

    linear-gradient(
      180deg,
      rgba(34,28,22,.96),
      rgba(12,10,8,.98)
    );

  border:1px solid rgba(212,180,131,.28);

  box-shadow:

    0 12px 30px rgba(0,0,0,.72),

    inset 0 1px 0 rgba(255,255,255,.05),

    0 0 24px rgba(212,180,131,.08);

  z-index:32;
}
.hud-level{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: rgba(255,255,255,.6);
}

.hud-blinds{
  font-size: 18px;
  font-weight: 900;
  color: #f3d28a;
  letter-spacing: .5px;
}

.hud-timer{
  font-size: 16px;
  font-weight: 900;
  color: #e7c27d;
}
.dealer-hud > div:not(:last-child)::after{
  content:"";
  display:inline-block;
  width:1px;
  height:18px;
  margin-left:20px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(120,160,255,.6),
    transparent
  );
}
.hud-timer.low-time{
  color:#ff4d4d;
  text-shadow:0 0 8px rgba(255,60,60,.7);
}
.dealer-timer{
  margin-top: 8px;

  padding: 8px 14px;
  border-radius: 14px;

  background: rgba(10,15,30,.85);
  border: 1px solid rgba(120,160,255,.35);

  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 6px 16px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.dt-level{
  font-size: 11px;
  opacity: .6;
}

.dt-blinds{
  font-size: 15px;
  font-weight: 800;
  color: #ffd166;
}

.dt-clock{
  font-size: 14px;
  font-weight: 800;
  color: #00d4ff;
}

/* ===============================
   SEATS LAYER
================================ */
.seat{
  position: absolute;
  width: var(--seat-w);
  height: var(--seat-h);
  z-index: 20;
}
.seat-bg{
    position:absolute;
    inset:0;

    border-radius:16px;
    overflow:hidden;

  background:

  linear-gradient(
    180deg,
    rgba(34,28,22,.94),
    rgba(12,10,8,.96)
  );
  z-index: 20;
}






:root{
  --seat-radius: 42%; 
  --seat-w: 150px;
  --seat-h: 88px;
}


.seat{ width: var(--seat-w); height: var(--seat-h); }



/* 12 o’clock is dealer; seats start around it */
.seat-1 { top: 7%;  left: 75%; transform: translate(-50%, -50%); } 
.seat-2 { top: 27%; left: 95%; transform: translate(-50%, -50%); } 
.seat-3 { top: 62%; left: 95%; transform: translate(-50%, -50%); } 
.seat-4 { top: 85%; left: 75%; transform: translate(-50%, -50%); } 
.seat-5 { top: 89%; left: 50%; transform: translate(-50%, -50%); } 
.seat-6 { top: 85%; left: 25%; transform: translate(-50%, -50%); } 
.seat-7 { top: 62%; left: 5%;  transform: translate(-50%, -50%); } 
.seat-8 { top: 27%; left: 5%;  transform: translate(-50%, -50%); }
.seat-9 { top: 7%;  left: 25%; transform: translate(-50%, -50%); }  

/* ===============================
   DEALER BUTTON ORBIT
   Aligned to bet ring
================================ */

.dealer-seat-1 { top: 17%; left: 62%; }
.dealer-seat-2 { top: 30%; left: 76%; }
.dealer-seat-3 { top: 53%; left: 82%; }
.dealer-seat-4 { top: 64%; left: 77%; }

.dealer-seat-5 { top: 67%; left: 54%; }

.dealer-seat-6 { top: 64%; left: 26%; }
.dealer-seat-7 { top: 53%; left: 13%; }
.dealer-seat-8 { top: 31%; left: 18%; }
.dealer-seat-9 { top: 17%; left: 28%; }

/* ===============================
   DEBUG HELPER
================================ */
.center-dot{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,209,102,0.9);
  transform: translate(-50%, -50%);
  z-index: 6;
}
/* ===============================
   SEAT LAYOUT
================================ */

.seat{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
}
.seat-bg{

  position:absolute;
  inset:0;

  border-radius:16px;

  background:

    linear-gradient(
      180deg,
      rgba(34,28,22,.94),
      rgba(12,10,8,.96)
    );

  border:1px solid rgba(212,180,131,.18);

  box-shadow:

    0 8px 18px rgba(0,0,0,.55),

    inset 0 1px 0 rgba(255,255,255,.04),

    inset 0 -10px 20px rgba(0,0,0,.35);

  z-index:20;
}

/* =========================================
   PLAYER PROFILE IMAGE SEAT
========================================= */

/*
 * Keep the normal seat background intact.
 * The avatar gets its own inset layer.
 */
.seat.has-avatar .seat-bg{
  overflow:hidden;
}

/* Avatar image layer */
.seat.has-avatar .seat-bg::before{
  content:"";

  position:absolute;

  /* keep avatar inside the visible seat face */
  top:7px;
  bottom:7px;
  left:3px;
  right:3px;

  border-radius:13px;

  background-image:
    linear-gradient(
      180deg,
      rgba(10,12,16,.48) 0%,
      rgba(8,10,14,.56) 40%,
      rgba(5,7,10,.74) 72%,
      rgba(3,4,7,.92) 100%
    ),
    var(--seat-avatar);

  background-size:
    100% 100%,
    95% auto;

  background-position:
    center,
    center center;

  background-repeat:
    no-repeat;

  filter:
    saturate(.72)
    contrast(.92);

  pointer-events:none;
}

/* Header */
.seat-header{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #ffffff;
  opacity: 0.95;
}


/* Cards container */
.seat-cards{
  position: absolute;
  top: -65px;
  left: 50%;
  transform: translateX(-50%) scale(1.60);  
margin-left: -43px;  
transform-origin: center bottom;
  z-index: 10;
  pointer-events: none;
}
.seat.is-folded .seat-cards {
  opacity: 0.85;
  filter: grayscale(10%);
  transform: translateY(2px) scale(1.60);
}
.seat.is-folded::after {
  content: "FOLDED";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font-size: 12px;
  color: rgba(255,80,80,0.8);
}


/* Individual card placeholder */
/* SVG card images */
.seat-cards .card-img{
  position: absolute;
  width: 54px;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.55));
  pointer-events: none;
}

/* LEFT CARD */
.seat-cards .card-img:nth-child(1){
  transform: translateX(-22px) rotate(-6deg);
  z-index: 1;
}

/* RIGHT CARD */
.seat-cards .card-img:nth-child(2){
  transform: translateX(22px) rotate(6deg);
  z-index: 2;
}
.card-back{
    width: 54px;
  height: auto;
}

/* =========================================
   SHOWDOWN — SELECTABLE HOLE CARDS
========================================= */

.card-img.show-selectable {
    cursor: pointer;
    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

/* Give selectable cards a subtle "available" cue */
.card-img.show-selectable:hover {
    filter:
        brightness(1.08)
        drop-shadow(0 0 6px rgba(255,255,255,.35));
}

/* Selected card */
.card-img.show-selectable.show-selected {
    filter:
        brightness(1.15)
        drop-shadow(0 0 8px rgba(255,255,255,.7))
        drop-shadow(0 0 14px rgba(255,215,0,.55));
}

.seat-content{
  overflow: visible;

  height: auto !important;
  max-height: none !important;

  position: relative;
  z-index: 30;
  padding: 1px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   
  gap: 6px;

  color: #eaf0ff;
  font-weight: 600;
  text-align: center;
}


/* Meta info */
.seat-header{
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.seat-meta{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #cfd6ff;
}


.seat-chips{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color:#8fdcff;

  display: flex;
  align-items: center;
  gap: 4px;
}

.seat-chips::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #fca311);
  box-shadow: 0 0 6px rgba(252,163,17,0.6);
}
.seat-folded-banner{

  position:absolute;

  top:-8px;
  right:-8px;

  padding:4px 8px;

  border-radius:999px;

  font-size:10px;
  font-weight:800;
  letter-spacing:.6px;

  color:#ffd6d6;

  background:linear-gradient(
    145deg,
    rgba(90,20,20,.95),
    rgba(180,40,40,.95)
  );

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

  box-shadow:
    0 0 8px rgba(255,60,60,.35),
    inset 0 0 4px rgba(255,255,255,.08);

  display:none;

  z-index:40;

  pointer-events:none;
}

.seat-status,
.seat-action{

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

  min-width:62px;
  height:20px;

  padding:0 12px;

  border-radius:999px;

  background:

    linear-gradient(
      180deg,
      rgba(42,32,22,.96) 0%,
      rgba(18,12,8,.98) 100%
    );

  border:1px solid rgba(212,180,131,.22);

  color:#f5deb3;

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

  letter-spacing:.7px;
  text-transform:uppercase;

  white-space:nowrap;

  margin-top:0;

  box-shadow:

    0 4px 10px rgba(0,0,0,.35),

    inset 0 1px 0 rgba(255,255,255,.04),

    inset 0 -6px 10px rgba(0,0,0,.28);

  position:relative;
  z-index:40;

  opacity:.98;
}
/* =========================================
   SHARED NETWORK HIGHLIGHT
========================================= */

.seat.shared-network .seat-bg{

    background:
        linear-gradient(
            180deg,
            rgba(82,52,12,.98),
            rgba(34,18,6,1)
        );

    border:1px solid rgba(255,170,40,.90);

    box-shadow:
        0 0 14px rgba(255,170,40,.55),
        0 0 30px rgba(255,170,40,.18),
        inset 0 1px 0 rgba(255,230,180,.08),
        inset 0 -10px 20px rgba(0,0,0,.35);
}
.action-btn{
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 4px 10px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  color: #fff;
  cursor: pointer;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 2px 6px rgba(0,0,0,0.35);
}

.action-btn.fold{
  color: #ffb3b6;
  border-color: rgba(255,179,182,0.6);
}

.action-btn:hover{
  background: rgba(255,255,255,0.25);
}

.seat-timer{
  width: 100%;
  height: 6px;
  margin-top: 4px;

  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}

.seat-timer-fill{
  height: 100%;
  width: 100%;
  background: #4cc9f0;

  transform-origin: left center;
  transform: scaleX(1);
}

/* animated state */
.seat-timer-fill.running{
  animation: seatTimerLinear var(--turn-ms, 15000ms) linear forwards;
}

@keyframes seatTimerLinear {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.seat.winner{

  box-shadow:
    0 0 28px rgba(76,255,122,1),
    0 0 60px rgba(76,255,122,.7),
    inset 0 0 18px rgba(76,255,122,.5);

  animation:winnerGlow 1.5s ease-in-out infinite;
}

@keyframes winnerGlow{

  0%{
    box-shadow:
      0 0 18px rgba(76,255,122,.65),
      0 0 40px rgba(76,255,122,.35),
      inset 0 0 12px rgba(76,255,122,.25);
  }

  50%{
    box-shadow:
      0 0 30px rgba(76,255,122,1),
      0 0 70px rgba(76,255,122,.85),
      inset 0 0 22px rgba(76,255,122,.55);
  }

  100%{
    box-shadow:
      0 0 18px rgba(76,255,122,.65),
      0 0 40px rgba(76,255,122,.35),
      inset 0 0 12px rgba(76,255,122,.25);
  }
}
/* ==========BOUNTY STYLING=============*/
.seat-bounty-side{
  position: absolute;

  bottom: 6px;
  right: -28px;

  width: 45px;
  height: 55px;

  border-radius: 12px;

  background: linear-gradient(
    180deg,
    rgba(255,160,60,0.35),
    rgba(120,40,0,0.35)
  );

  border: 1px solid rgba(255,180,120,0.7);

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

  box-shadow:
    0 6px 14px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 12px rgba(255,140,0,0.6);

  z-index: 25;
}
/* right side seats */
.seat-1 .seat-bounty-side,
.seat-2 .seat-bounty-side,
.seat-3 .seat-bounty-side,
.seat-4 .seat-bounty-side,
.seat-5 .seat-bounty-side{
  left: -28px;
  right: auto; 
}

/* left side seats */
.seat-6 .seat-bounty-side,
.seat-7 .seat-bounty-side,
.seat-8 .seat-bounty-side,
.seat-9 .seat-bounty-side{
  right: -28px;
  left: auto; 
}


.bounty-icon{
  font-size: 20px;
  line-height: 26px;

  opacity: 0.9;

  text-shadow:
    0 0 6px rgba(255,120,0,0.8);
}
.bounty-value{
  font-size: 20px;
  font-weight: 800;

  color: #fff0cc;

  line-height: 24px;

  text-shadow:
    0 0 6px rgba(255,200,100,0.8),
    0 0 12px rgba(255,140,0,0.6);
}
.seat-bounty-side{
  outline: 2px solid red;
}
.seat-bounty-side{
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
} /*----THIS LINE TURNS BOUNTY OFF UNTIL TRIPPED BY JS LATER-----*/
 .bounty-mode .seat-bounty-side{
  opacity: 1;
  transform: scale(1);
} 
/* ===============================
   SEAT BET PILE 
================================ */

.seat-bet{
  position: absolute;
  width: 28px;
  height: 24px;

  pointer-events: none;
  z-index: 22;

  display: none; 
}


.seat .seat-bet{
  bottom: -14px;   
  left: 50%;
  transform: translateX(-50%);
}
/* ===============================
   BET LAYER (TABLE SPACE)
================================ */
.bet-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 21; 
}

.bet{
  position: absolute;
  width: 32px;
  height: 32px;
  min-height: 32px;
  display: none;

  overflow: visible; 
}
/* ===============================
   BET RING
================================ */

.bet-seat-1 { top: 17%; left: 67%; }
.bet-seat-2 { top: 33%; left: 82%; }
.bet-seat-3 { top: 61%; left: 82%; }
.bet-seat-4 { top: 64%; left: 72%; }
.bet-seat-5 { top: 67%; left: 50%; }
.bet-seat-6 { top: 64%; left: 31%; }
.bet-seat-7 { top: 61%; left: 15%; }
.bet-seat-8 { top: 31%; left: 15%; }
.bet-seat-9 { top: 17%; left: 33%; }

/* ===============================
   BET RING CHIP STYLE
================================ */

.bet-amount{
  position: absolute;
  top: 18px;              
  left: 50%;
  transform: translateX(-50%);

  font-size: 12px;
  font-weight: 800;
  color: #ffd166;

  text-shadow: 0 2px 4px rgba(0,0,0,0.75);
  white-space: nowrap;
  pointer-events: none;
}


/* ===============================
   BOARD (COMMUNITY CARDS)
================================ */

.board{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15; /* under seats, above felt */
  pointer-events: none;
}

.board-cards{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.board-card{
  width: 140px;
  height: auto;
  border-radius: 10px;

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));

  background: #0b1020;
}
/* ===============================
   DEALER LANE (POT/ACTION)
================================ */

.dealer-lane{
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 48%;
  height: 80px;

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

  z-index: 14; /* below board (15), above felt (1) */
  pointer-events: none;
}

.pot-area{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* POT DISPLAY PILL */
.pot-chips{
  min-width:60px;
  justify-content:center;
  pointer-events: none;
  padding: 10px 16px;
  border-radius: 999px;
  transform: translateY(10px);

  background: rgba(15,20,40,0.85);
  border: 1px solid rgba(120,160,255,0.35);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 18px rgba(0,0,0,0.55);

  display: flex;
  align-items: center;
  gap: 10px;

  color: #ffd166;
  font-weight: 800;
  letter-spacing: 0.4px;

  transition:
    transform 0.6s cubic-bezier(.22,.61,.36,1),
    opacity   0.3s ease;
}

.pot-label{
  font-size: 11px;
  opacity: 0.75;
}

.pot-amount{
  font-size: 18px;
}
.pot-side{
  position: relative;
}

.pot-area{
  display:flex;
  flex-direction:column; /* default = single pot */
  align-items:center;
  gap:6px;
}
.pot-area.has-sidepots{
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.pot-chips.main{
  border:1px solid rgba(120,200,255,.45);
  color:#9fe3ff;
}

.pot-chips.side{
  border:1px solid rgba(255,180,120,.45);
  color:#ffd6a0;
}
/* ===============================
   BET LAYER
================================ */

.bet-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* 🔥 FIX: above seats (seats are z ~20) */
  z-index: 35;
}

.bet{
  position: absolute;
  width: 28px;
  height: 24px;
  display: none;
  overflow: visible; /* chips can stack outside the 32px box */
}

/* text label under the chips */
.bet-amount{
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 12px;
  font-weight: 800;
  color: #ffd166;

  text-shadow: 0 2px 4px rgba(0,0,0,0.75);
  white-space: nowrap;
  pointer-events: none;
}

/* ===============================
   CHIP BASE
================================ */

.chip{
  position: absolute;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  left: 50%;
  transform: translateX(-50%);

  background: radial-gradient(circle at 35% 30%, #2e6bff, #0f1c3f 70%);
  border: 2px solid #6ea8ff;

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.2),
    inset 0 -3px 4px rgba(0,0,0,0.6),
    0 3px 8px rgba(0,0,0,0.7);
}

/* ===============================
   SYNDICATE DENOMINATION COLORS
================================ */

/* 1 */
.chip.v1{
  background: radial-gradient(circle at 35% 30%, #2e6bff, #0f1c3f 70%);
  border: 3px solid #6ea8ff;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 4px 10px rgba(0,0,0,0.7),
    0 0 8px rgba(46,107,255,0.4);
}

/* 5 */
.chip.v5{
  background: radial-gradient(circle at 35% 30%, #7a5cff, #1a1038 70%);
  border: 3px solid #a78bfa;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 0 8px rgba(122,92,255,0.4);
}

/* 25 */
.chip.v25{
  background: radial-gradient(circle at 35% 30%, #1dd1a1, #08261e 70%);
  border: 3px solid #6ee7b7;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 0 8px rgba(29,209,161,0.4);
}

/* 100 */
.chip.v100{
  background: radial-gradient(circle at 35% 30%, #ff4757, #2a060c 70%);
  border: 3px solid #ff6b81;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.15),
    inset 0 -4px 6px rgba(0,0,0,0.6),
    0 0 8px rgba(255,71,87,0.4);
}

/* 500 */
.chip.v500{
  background: radial-gradient(circle at 35% 30%, #444, #000 80%);
  border: 3px solid #2e6bff;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.1),
    inset 0 -4px 6px rgba(0,0,0,0.8),
    0 0 12px rgba(46,107,255,0.6);
}

/* ===============================
   SEAT BET
================================ */

.seat-bet{
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;

  /* above seat bg */
  z-index: 28;

  display: none;
  overflow: visible;
}

.seat .seat-bet{
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
}

/* ===============================
   POT FLOAT STACK (ANIM TARGET)
================================ */

.pot-chips-float{
  position: absolute;
  left: 50%;
  top: -18px;

  --dx: 0px;
  --dy: 0px;
  --scale: 1;

  transform:
    translateX(-50%)
    translate(var(--dx), var(--dy))
    scale(var(--scale));

  transition:
  transform 1.8s cubic-bezier(.1,.8,.2,1),
  opacity 0.3s ease 1.4s;

  pointer-events: none;
  z-index: 16;
}


.chip-stack{
  position: relative;
  width: 26px;
  height: 10px;              
  transform-origin: bottom center;
  transition: height 0.25s ease;
}



/* ===============================
   BURN CARDS
================================ */

.burn-area{
  position: absolute;
  top: 27%;
  left: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0px;
  z-index: 13;
  pointer-events: none;
}

.burn-card{
  width: 64px;
  height: 90px;
  border-radius: 10px;
  background: linear-gradient(180deg, #10172f, #070b18);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border: 1px solid rgba(120,160,255,0.25);
  margin-left: -26px;

  opacity: 0;
  transform: translateY(-26px) scale(0.78) rotate(0deg);

  transition:
    transform 420ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease;
}

.burn-1.show{ transform: rotate(-5.7deg) translate(1px, 3px) scale(1); opacity: 0.9; }
.burn-2.show{ transform: rotate(1.9deg)  translate(-1px, -1px) scale(1); opacity: 0.9; }
.burn-3.show{ transform: rotate(-3.4deg) translate(2px, 1px) scale(1); opacity: 0.9; }

.burn-card.show{
  animation: burnDrop 380ms cubic-bezier(.22,.61,.36,1);
}

@keyframes burnDrop {
  0%   { transform: translateY(-32px) scale(0.75) rotate(0deg); }
  70%  { transform: translateY(4px)  scale(1.03); }
  100% { transform: none; }
}

/* ===============================
   DEALER BUTTON
================================ */

.dealer-button{
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd166;
  color: #000;
  font-weight: 900;
  font-size: 14px;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.4);
  z-index: 25;
  transition: top 0.35s ease, left 0.35s ease;
}
/* =========================================================
   LANDSCAPE — PREMIUM DEALER PUCK
========================================================= */

@media (orientation: landscape) {

  .dealer-button {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    /* Pearl / ivory casino puck face */
    background:
      radial-gradient(
        circle at 34% 27%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.96) 12%,
        rgba(238,241,244,1) 34%,
        rgba(197,203,211,1) 68%,
        rgba(118,126,138,1) 100%
      );

    color: transparent;

    border: 3px solid #cbd2dc;

    box-sizing: border-box;

    box-shadow:

      /* physical shadow on felt */
      0 7px 9px rgba(0,0,0,.70),

      /* UPC blue ambient glow */
      0 0 9px rgba(80,175,255,.70),
      0 0 20px rgba(50,130,255,.35),

      /* chrome lip */
      inset 0 0 0 2px rgba(25,31,42,.95),
      inset 0 0 0 4px rgba(225,232,240,.95),

      /* puck depth */
      inset 0 -7px 10px rgba(35,43,55,.32),

      /* top reflection */
      inset 0 5px 7px rgba(255,255,255,.95);

    z-index: 40;

    transition:
      top .35s ease,
      left .35s ease,
      transform .25s ease,
      filter .25s ease;
  }


  /* DEALER lettering */
  .dealer-button::before {

    content: "DEALER";

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
      translate(-50%, -50%)
      rotate(-8deg);

    font-family:
      "Arial Narrow",
      "Segoe UI",
      sans-serif;

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

    letter-spacing: .8px;

    color: #111722;

    text-shadow:
      0 1px 0 rgba(255,255,255,.9),
      0 -1px 0 rgba(0,0,0,.25);

    z-index: 2;
  }


  /* polished glass / metal reflection */
  .dealer-button::after {

    content: "";

    position: absolute;

    top: 6px;
    left: 9px;

    width: 27px;
    height: 12px;

    border-radius: 50%;

    transform: rotate(-18deg);

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.82),
        rgba(255,255,255,.18) 60%,
        transparent
      );

    filter: blur(.3px);

    pointer-events: none;
  }


  /* Give the puck a little life */
  .dealer-button {
    animation:
      dealerPuckGlow 3.2s ease-in-out infinite;
  }


  @keyframes dealerPuckGlow {

    0%, 100% {

      filter:
        brightness(1)
        drop-shadow(
          0 0 2px rgba(80,170,255,.35)
        );
    }

    50% {

      filter:
        brightness(1.08)
        drop-shadow(
          0 0 7px rgba(80,175,255,.72)
        );
    }
  }

}
/* ===============================
   CHIPS (ANIMATED-- SYNDICATE-- ROUND)
================================ */

.chip-token{
  position: fixed;

  width: 18px;
  height: 18px;
  border-radius: 50%;

  pointer-events: none;
  z-index: 50;

  background: radial-gradient(circle at 35% 30%, #2e6bff, #0f1c3f 70%);
  border: 2px solid #6ea8ff;

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.2),
    inset 0 -3px 4px rgba(0,0,0,0.6),
    0 3px 8px rgba(0,0,0,0.7);

  transform: translate(-50%, -50%);
  transition:
    left 0.45s cubic-bezier(.22,.61,.36,1),
    top  0.45s cubic-bezier(.22,.61,.36,1),
    opacity 0.2s ease;
}
.chip-token.v1   { background: radial-gradient(circle at 35% 30%, #2e6bff, #0f1c3f 70%); border-color:#6ea8ff; }
.chip-token.v5   { background: radial-gradient(circle at 35% 30%, #7a5cff, #1a1038 70%); border-color:#a78bfa; }
.chip-token.v25  { background: radial-gradient(circle at 35% 30%, #1dd1a1, #08261e 70%); border-color:#6ee7b7; }
.chip-token.v100 { background: radial-gradient(circle at 35% 30%, #ff4757, #2a060c 70%); border-color:#ff6b81; }
.chip-token.v500 { background: radial-gradient(circle at 35% 30%, #444, #000 80%);       border-color:#2e6bff; }


/* .seat.dealer {
  outline: 2px solid gold;
} */

.seat.turn .seat-bg{

  background:
    linear-gradient(
      180deg,
      rgba(28,72,125,.98),
      rgba(8,18,35,1)
    );

  border:1px solid rgba(90,180,255,.95);

  box-shadow:
  /* tight bright edge */
  0 0 8px rgba(63,169,245,.95),

  /* strong rounded glow */
  0 0 20px rgba(63,169,245,.70),

  /* broad ambient glow */
  0 0 38px rgba(63,169,245,.38),

  /* seat surface */
  inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 0 16px rgba(63,169,245,.16),
  inset 0 -8px 14px rgba(0,0,0,.35);
}

.seat.turn{
  box-shadow:none;
}
.seat.me {
  outline: 0px solid #ffd166;
  box-shadow: 0 0 10px rgba(255, 209, 102, 0.6);
}
.seat.is-folded {
  opacity: 0.65;
  filter: grayscale(0.2);
}

.seat.is-allin {
  outline: 3px solid #ff3b3b;
  box-shadow: 0 0 18px rgba(255,60,60,0.9);
}

.raise-panel{
  position: fixed;
  inset: 0;

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

  padding: 20px;
  padding-bottom: 0;

  background: rgba(0,0,0,.55);

  z-index: 10000;

  /* 👇 ADD THIS */
  --panel-scale: 1;
}

.raise-panel[hidden]{
  display: none !important;
}

/* ===============================
   RAISE BOX (MATCH ACTION BAR)
================================ */
.raise-box{
  background: linear-gradient(
    180deg,
    #1a1a1e,
    #0c0c10
  );

display: flex;
  flex-direction: column;
  gap: 6px;

  border:1px solid rgba(200,200,210,.25);
  border-radius: 18px;

  padding: 16px;
  width: 260px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.05),
    inset 0 -6px 16px rgba(0,0,0,.9),
    0 12px 30px rgba(0,0,0,.9);
}

/* ===============================
   TITLE
================================ */
.raise-title{
  color: #9ecbff;
  font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
}

/* ===============================
   INPUT (STRONG FOCAL POINT)
================================ */
.raise-input{
  font-size: 22px;
  font-weight: 900;

  text-align: center;
  padding: 10px;

  border-radius: 12px;

  border: 1px solid rgba(200,200,210,.25);

  background: linear-gradient(
    180deg,
    #05070c,
    #0a0d14
  );

  color: #ffd166;

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.9);
}

/* ===============================
   QUICK BUTTON GRID
================================ */
.raise-quick{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}

/* ===============================
   BUTTON BASE (MATCHES ACTION BAR)
================================ */
.raise-quick button{
  padding:14px 0;

  font-size:13px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;

  border-radius:8px;

  border:1px solid rgba(200,200,210,.2);

  background:linear-gradient(
    180deg,
    #3b3b3f,
    #1e1e22
  );

  color:#d6d6db;

  cursor:pointer;

  transition:all .12s ease;

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.08),
    inset 0 -6px 12px rgba(0,0,0,.7);
}

/* hover = same language as action bar */
.raise-quick button:hover{
  background:linear-gradient(
    180deg,
    #4c4c50,
    #2a2a2f
  );
}

/* ===============================
   ALL-IN BUTTON (DANGER)
================================ */
.allin-btn{
  grid-column: span 3;

  padding:16px 0;

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

  border-radius:10px;

  background:linear-gradient(
    180deg,
    #7a1c1c,
    #2a0000
  );

  color:#ffb3b3;

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

  box-shadow:
    0 0 10px rgba(255,0,0,.4),
    inset 0 2px 4px rgba(255,255,255,.2);
}

/* ===============================
   ACTION ROW
================================ */
.raise-actions{
  display:flex;
  gap:10px;
}

/* CANCEL (FOLD STYLE) */
#raiseCancelBtn{
  flex:1;

  padding:14px 0;

  background:linear-gradient(
    180deg,
    #3a161c,
    #19070b
  );

  color:#ff9a9a;

  font-weight:800;

  border-radius:10px;
}

/* CONFIRM (MAIN ACTION STYLE) */
#raiseConfirmBtn{
  flex:1;

  padding:14px 0;

  background:linear-gradient(
    180deg,
    #6ea85f,
    #7f8288
  );

  color:#000;

  font-weight:900;

  border-radius:10px;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(0,0,0,.65),
    0 6px 20px rgba(0,0,0,.6);
}
/* ===============================
   GLOBAL ACTION BAR
================================ */

.action-dock{
  position:fixed;
  bottom: 20px;
  right:20px;
  transform: none;

  z-index: 9999;

  display: flex;
  justify-content: center;

  padding: 6px;

  border-radius: 12px;

  background: linear-gradient(
    180deg,
    #0e0e10,
    #000000
  );

  border: 1px solid rgba(200,200,210,.25);

  box-shadow:
    0 12px 30px rgba(0,0,0,.9),
    inset 0 2px 6px rgba(255,255,255,.05),
    inset 0 -10px 20px rgba(0,0,0,.85);

  opacity: 0;
  pointer-events: none;
}

/* visible when it's your turn */

.action-dock.is-active{
  opacity:1;
  transform:none;   
  pointer-events:auto;
}
.raise-panel{
  position: fixed;
  inset: 0;

  display: flex;

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

  padding: 20px;
  padding-bottom: 0px;     

  background: rgba(0,0,0,.55);

  z-index: 10000;
}
.raise-slider{
  width:100%;
  appearance:none;
  height:6px;

  border-radius:999px;

  background:linear-gradient(
    90deg,
    #2a2f45,
    #6ea8ff
  );

  outline:none;
}

.raise-slider::-webkit-slider-thumb{
  appearance:none;

  width:16px;
  height:16px;

  border-radius:50%;

  background:#ffd166;

  cursor:pointer;

  box-shadow:
    0 0 10px rgba(255,200,80,.7);
}
.raise-input-wrap{

    display:flex;
    align-items:center;

    width:100%;

    gap:6px;

}

.raise-step-btn{

    flex:0 0 36px;

    width:36px;
    height:36px;

    border:none;
    border-radius:10px;

    background:#1f355f;

    color:#fff;

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

    cursor:pointer;

    transition:.15s;
}

.raise-step-btn:hover{

    background:#2d5bb8;

}

.raise-input{

    flex:1 1 auto;
    min-width:0;
    width:100%;
    box-sizing:border-box;

    text-align:center;

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

}
.raise-input::-webkit-outer-spin-button,
.raise-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.raise-input{
    -moz-appearance:textfield;
}
.raise-panel *{
  pointer-events: auto;
}
/* ===============================
   ACTION BUTTON BAR
================================ */

.global-action-bar{
  display:flex;
  flex-direction:row;

  width:360px;
  padding:6px;
  gap:6px;

  border-radius:14px;

  /* DARK INNER PANEL */
  background:linear-gradient(
    180deg,
    #1a1a1e,
    #0c0c10
  );

  border:1px solid rgba(200,200,210,.25);

  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.05),
    inset 0 -6px 16px rgba(0,0,0,.9);
}


/* ===============================
   ACTION BUTTON BASE
================================ */

.global-action-bar .action-btn{
  flex:1;

  position:relative;

  border:none;
  border-right:1px solid rgba(200,200,210,.15);

  background:linear-gradient(
    180deg,
    #3b3b3f,
    #1e1e22
  );

  color:#d6d6db;

  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;

  cursor:pointer;

  transition:all .15s ease;
}

.global-action-bar .action-btn:last-child{
  border-right:none;
}


/* subtle metal shine */

.global-action-bar .action-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:6px;

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.08),
    inset 0 -6px 12px rgba(0,0,0,.7);

  pointer-events:none;
}


/* ===============================
   FOLD BUTTON
================================ */

.global-action-bar .action-btn:nth-child(3){

  padding:20px 0;
  font-size:16px;

  color:#ff9a9a;

  background:linear-gradient(
    180deg,
    #3a161c,
    #19070b
  );
}


/* ===============================
   MAIN ACTION BUTTON
================================ */

.global-action-bar .action-btn:nth-child(2){

  padding:20px 0;
  font-size:16px;

  color:#ffffff;

  background:linear-gradient(
    180deg,
    #c5c8ce,
    #7f8288
  );

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(0,0,0,.65),
    0 6px 20px rgba(0,0,0,.6);
}


/* ===============================
   RAISE BUTTON
================================ */

.global-action-bar .action-btn:nth-child(1){

  padding:20px 0;
  font-size:16px;

  background:linear-gradient(
    180deg,
    #3b3b3f,
    #1e1e22
  );
}


/* ===============================
   HOVER EFFECT
================================ */

.global-action-bar .action-btn:hover{

  background:linear-gradient(
    180deg,
    #4c4c50,
    #2a2a2f
  );
}

/*==============================
   UPC ONLINE RESULTS OVERLAY
===============================*/

.tourney-overlay{

  position:fixed;
  inset:0;

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

  padding:20px;

  background:
    radial-gradient(
      circle at top,
      rgba(255,63,207,.16),
      rgba(0,0,0,.94) 55%
    ),
    rgba(0,0,0,.96);

  backdrop-filter:blur(8px);

  z-index:9999;
}

/* =========================
   MAIN CARD
========================= */

.tourney-card{

  position:relative;

  width:min(560px, 100%);

  max-height:88vh;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-radius:28px;

  padding:26px 24px 22px;

  color:#eef7ff;

  background:
    linear-gradient(
      180deg,
      rgba(10,12,18,.985) 0%,
      rgba(5,7,11,.985) 100%
    );

  border:
    1px solid rgba(111,252,255,.18);

  box-shadow:
    0 25px 80px rgba(0,0,0,.75),
    0 0 30px rgba(111,252,255,.08),
    0 0 60px rgba(255,63,207,.05);
}

/* subtle neon edge */

.tourney-card::before{

  content:"";

  position:absolute;
  inset:0;

  border-radius:28px;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(111,252,255,.06),
      transparent 30%,
      transparent 70%,
      rgba(255,63,207,.06)
    );

  mix-blend-mode:screen;
}

/* =========================
   HEADER IMAGE
========================= */

.tourney-banner{

  width:calc(100% + 12px);

  margin:-6px -6px 18px -6px;

  display:block;

  border-radius:18px;
}

/* =========================
   TITLE TEXT
========================= */

.tourney-logo{

  font-size:28px;

  font-weight:900;

  letter-spacing:2px;

  text-transform:uppercase;

  color:#6ffcff;

  margin-bottom:4px;

  text-shadow:
    0 0 14px rgba(111,252,255,.18);
}

.tourney-sub{

  font-size:12px;

  letter-spacing:1.5px;

  text-transform:uppercase;

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

  margin-bottom:20px;
}

/* =========================
   META STRIP
========================= */

.tourney-meta{

  display:flex;

  justify-content:space-between;

  gap:10px;

  margin-bottom:18px;

  padding:12px 14px;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.015)
    );

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

  font-size:11px;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:rgba(255,255,255,.68);
}

/* =========================
   PLAYER ROWS
========================= */

.tourney-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  padding:14px 16px;

  margin-bottom:8px;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.03),
      rgba(255,255,255,.01)
    );

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

  transition:.18s ease;
}

.tourney-row:hover{

  transform:translateY(-1px);

  border-color:
    rgba(111,252,255,.10);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );
}

/* =========================
   WINNER ROW
========================= */

.tourney-row.first{

  background:
    linear-gradient(
      135deg,
      rgba(255,63,207,.16),
      rgba(111,252,255,.10)
    );

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

  box-shadow:
    0 0 24px rgba(255,63,207,.08);

  color:#ffffff;

  font-weight:800;
}

/* =========================
   PLAYER TEXT
========================= */

.tourney-player{

  font-size:15px;

  font-weight:700;

  color:#f5f7ff;
}

/* =========================
   UPC POINTS
========================= */

.upc-points-cell{

  display:flex;
  flex-direction:column;

  align-items:flex-end;
}

.upc-earned{

  color:#9dff59;

  font-size:18px;

  font-weight:900;

  text-shadow:
    0 0 12px rgba(157,255,89,.22);
}

.upc-total{

  margin-top:2px;

  color:#6ffcff;

  font-size:11px;

  letter-spacing:.06em;
}

/* =========================
   LIVE BONUS
========================= */

.live-bonus{

  margin-top:7px;

  padding:5px 10px;

  border-radius:999px;

  font-size:10px;

  font-weight:800;

  letter-spacing:.08em;

  display:inline-flex;

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

.live-bonus.final{

  background:
    rgba(255,63,207,.14);

  color:#ff7fe0;

  box-shadow:
    0 0 14px rgba(255,63,207,.10);
}

.live-bonus.participation{

  background:
    rgba(157,255,89,.12);

  color:#baff8a;
}

/* =========================
   BOUNTY TEXT
========================= */

.bounty-win{

  font-size:11px;

  font-weight:800;

  margin-top:3px;

  letter-spacing:.05em;

  color:#ff7fe0;

  text-shadow:
    0 0 10px rgba(255,63,207,.20);
}

/* =========================
   RETURN BUTTON
========================= */

.return-btn{

  margin-top:20px;

  width:100%;

  padding:15px 18px;

  border:none;

  border-radius:16px;

  cursor:pointer;

  font-size:14px;

  font-weight:900;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:#041018;

  background:
    linear-gradient(
      180deg,
      #6ffcff 0%,
      #27c8ff 100%
    );

  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 22px rgba(111,252,255,.18);

  transition:.18s ease;
}

.return-btn:hover{

  transform:translateY(-2px);

  filter:brightness(1.04);
}

.return-btn:active{

  transform:translateY(1px);
}

/* =========================
   MOBILE
========================= */

@media (max-width:700px){

  .tourney-card{

    padding:20px 16px 18px;

    border-radius:22px;
  }

  .tourney-logo{

    font-size:22px;
  }

  .tourney-row{

    padding:12px;
  }
.tourney-overlay{
  align-items:flex-start;
  overflow-y:auto;
  padding-top:4vh;
  padding-bottom:4vh;
}

.tourney-card{
  max-height:90vh;
}

.tourney-row{
  padding:10px 12px;
  margin-bottom:6px;
}

.tourney-player{
  font-size:13px;
}

.upc-earned{
  font-size:15px;
}

.live-bonus{
  font-size:9px;
  padding:4px 8px;
}
  .upc-earned{

    font-size:16px;
  }
}
.seat-bet-dot {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow:
    0 0 6px #00d4ff,
    0 0 14px rgba(0,212,255,0.8);
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s ease;
  pointer-events: none;
}

.seat.has-bet .seat-bet-dot {
  opacity: 1;
  transform: scale(1);
}
/* =========================================
   TOURNAMENT HUD (TOP RIGHT)
========================================= */
.tourney-hud{
  position: absolute;
  top: 18px;
  left: 18px;

  z-index: 45;

  display: flex;
  flex-direction: column;
  gap: 6px;

  padding: 10px 16px;
  border-radius: 16px;

  background: rgba(8,12,25,0.85);
  border: 1px solid rgba(120,160,255,0.4);

  box-shadow:
    0 10px 24px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(6px);
}

.tourney-level{
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .7;
}

.tourney-blinds{
  font-size: 16px;
  font-weight: 800;
  color: #ffd166;
}

.tourney-timer{
  font-size: 14px;
  font-weight: 800;
  color: #00d4ff;
}
/* =========================================
   TABLE INFO HUD BOX (TOP LEFT)
========================================= */
.table-hud{

  position:absolute;

  top:0px;
  left:0px;

  width:170px;

  padding:16px 14px;

  border-radius:14px;

  background:

    linear-gradient(
      180deg,
      rgba(18,22,34,.94),
      rgba(8,10,18,.96)
    );

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

  box-shadow:

    0 18px 40px rgba(0,0,0,.82),

    inset 0 1px 0 rgba(255,255,255,.04),

    inset 0 -10px 20px rgba(0,0,0,.30),

    0 0 18px rgba(63,169,245,.08);
}
.hud-row{

  display:flex;
  justify-content:space-between;

  font-size:12px;

  padding:4px 0;

  color:#cfd6ff;

  letter-spacing:.5px;
}
.hud-label{

  color:#8fb0ff;

  opacity:.72;

  font-weight:700;

  letter-spacing:.5px;
}
.hud-value{

  color:#6ffcff;

  font-weight:800;
}
.hud-logo{

    display:block;

    width:100%;
    height:auto;

    margin:0 auto 10px;

    opacity:.9;

    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
/* =========================================
   TABLE INFO HUD STYLE (TOP LEFT)
========================================= */
.table-info{

  position:absolute;
  top:0px;
  right:0px;

  width:170px;

  padding:16px;

  border-radius:12px;

  background:

    linear-gradient(
      180deg,
      rgba(18,22,34,.94),
      rgba(8,10,18,.96)
    );

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

  box-shadow:

    0 18px 40px rgba(0,0,0,.82),

    inset 0 1px 0 rgba(255,255,255,.04),

    inset 0 -10px 20px rgba(0,0,0,.30),

    0 0 18px rgba(63,169,245,.08);
}
.info-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  padding:4px 0;
  color:#cfd6ff;
}
.info-title{
  font-weight:800;
  font-size:13px;
  margin-bottom:10px;
  text-align:center;
  color:#8fb0ff;
  letter-spacing:1px;
}

.game-panel{

  position:absolute;

  top:0;
  right:0;

  width:210px;

  border-radius:14px;

  background:
    linear-gradient(
      180deg,
      rgba(18,22,34,.94),
      rgba(8,10,18,.96)
    );

  border:1px solid rgba(90,185,255,.25);

  box-shadow:
    0 20px 50px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -10px 20px rgba(0,0,0,.30),
    0 0 18px rgba(0,180,255,.10);

  padding:16px;

  color:#d8e9ff;

  backdrop-filter:blur(4px);
}
.game-title{

  text-align:center;

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

  color:#6de0ff;

  letter-spacing:1.2px;

  margin-bottom:12px;

  border-bottom:1px solid rgba(90,185,255,.15);

  padding-bottom:8px;

  text-shadow:
      0 0 10px rgba(0,200,255,.25);
}
.game-meta{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.meta-block{

  text-align:center;

  background:rgba(255,255,255,.03);

  border-radius:10px;

  padding:8px 4px;

  border:1px solid rgba(90,185,255,.10);

  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.03);
}
.meta-label{

  font-size:10px;

  color:#8fb0ff;

  opacity:.75;

  letter-spacing:.08em;

  font-weight:700;
}
.meta-value{

    color:#6de0ff;

    font-weight:800;

    text-shadow:
        0 0 10px rgba(0,210,255,.25);
}

.meta-value.prize{
  color:#6de0ff;
  text-shadow:0 0 10px rgba(0,200,255,.35);
}

.upc-points-cell{

    display:flex;
    flex-direction:column;

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

    line-height:1.1;
}

.upc-earned{

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

    color:#6dff9f;

    text-shadow:
      0 0 10px rgba(109,255,159,.35);
}

.upc-total{

    font-size:10px;
    opacity:.75;

    letter-spacing:.08em;
}
.prize-pool-value {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  margin: 5px 0 10px;
}

.prize-row {
  align-items: center;
}

.prize-result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}

.prize-amount {
  font-size: 14px;
  font-weight: 800;
}

.prize-points {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  opacity: .6;
}

/* =========================================
   MOBILE LANDSCAPE — COMPACT RESULTS MODAL
========================================= */
@media (orientation: landscape) and (max-width: 900px){

  .tourney-card{
  width: 50vw;
  max-width: none;
  max-height: 85vh;
  overflow-y: auto;
       

    padding: 16px;
    border-radius: 14px;
  
  
}
  .tourney-logo{
    font-size: 15px;
    margin-bottom: 2px;
  }

  .tourney-sub{
    font-size: 11px;
    margin-bottom: 12px;
  }

  .tourney-meta{
    font-size: 11px;
    margin-bottom: 12px;
  }

  .tourney-row{
    padding: 6px 10px;
    font-size: 12px;
  }

  .return-btn{
    margin-top: 14px;
    padding: 8px 14px;
    font-size: 13px;
  }


}
/* =========================================
   TABLE CHAT
========================================= */


.chat-drawer{
  position:fixed;
  left:0px;
  bottom:10px;
  width:370px;
  height:27%;
  background:#0f1116;
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-12px 0 40px rgba(0,0,0,.85);
  transition:right .25s ease;
  display:flex;
  flex-direction:column;
  z-index:120;
}

.chat-drawer.open{
  left:0;
}

/* header */

.chat-header{
  padding:9px;
  font-weight:600;
  letter-spacing:1px;
  background:#151821;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#d7dbef;
}

/* message container */

.chat-messages{
  flex:1;
  overflow-y:auto;
  padding:14px;
  font-size:16px;
  color:#cfd6ff;
}

/* individual message */

.chat-message{
  margin-bottom:8px;
  line-height:1.35;
}

/* player name */

.chat-name{
  color:#7ea9ff;
  font-weight:500;
  margin-right:6px;
}

/* input bar */

.chat-input-bar{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.06);
  background:#151821;
}

.chat-input-bar input{
  width:98%;
  padding:1px;
  border:none;
  border-radius:3px;
  background:#0c0e13;
  color:#ffffff;
  font-size:20px;
}

/* chat button */

.chat-open-btn{
  position:fixed;
  left:20px;
  bottom:120px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#2f6cff;
  border:none;
  color:white;
  font-size:20px;
  cursor:pointer;
  z-index:110;
}





/* =========================================
   PLAYER TEXT — AVATAR READABILITY
========================================= */

.seat-name{
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,.95);
}

.seat-chips{
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 4px rgba(0,0,0,.85);
}
/* =========================================
   MOBILE PORTRAIT — UPC / PN-STYLE TABLE
   First pass geometry only
========================================= */

@media (orientation: portrait) and (max-width: 900px){

/* =====================================
   PORTRAIT DEALER BUTTON
===================================== */

.dealer-button{
    display:none !important;
}
.seat.dealer::before{

    content:"DEALER";

    position:absolute;

    top:-8px;
    left:50%;

    transform:translateX(-50%);

    padding:2px 8px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #ffe9a0,
            #d5a83e
        );

    border:1px solid rgba(255,235,170,.65);

    color:#18130a;

    font-size:7px;
    font-weight:900;
    letter-spacing:.10em;

    box-shadow:
        0 2px 4px rgba(0,0,0,.70),
        0 0 5px rgba(235,190,75,.45),
        inset 0 1px 0 rgba(255,255,255,.65);

    text-shadow:
        0 1px 0 rgba(255,255,255,.35);

    z-index:120;
}
/* =====================================
   PORTRAIT VISUAL SEAT SYSTEM
   VISUAL ONLY — DOES NOT CHANGE ENGINE SEATS
===================================== */

/* disable desktop seat geometry */
@media (orientation: portrait) and (max-width: 900px){

  .seat{
    transform:none !important;
  }

  /* HERO */
  .vseat-hero{

    top:78% !important;
    left:50% !important;

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

    z-index:50;
  }

  /* BOTTOM LEFT */
  .vseat-left1{

    top:68% !important;
    left:18% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* UPPER LEFT */
  .vseat-left2{

    top:48% !important;
    left:10% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* TOP LEFT */
  .vseat-left3{

    top:24% !important;
    left:20% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* TOP CENTER */
  .vseat-top{

    top:14% !important;
    left:50% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* TOP RIGHT */
  .vseat-right3{

    top:24% !important;
    left:80% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* UPPER RIGHT */
  .vseat-right2{

    top:48% !important;
    left:90% !important;

    transform:translate(-50%, -50%) !important;
  }

  /* LOWER RIGHT */
  .vseat-right1{

    top:68% !important;
    left:82% !important;

    transform:translate(-50%, -50%) !important;
  }

}
/* =====================================
   PORTRAIT SEAT UNIFORM SCALE
===================================== */

@media (orientation: portrait) and (max-width: 900px){

  .seat{

    transform-origin:center center !important;

    transition:
      top .25s ease,
      left .25s ease,
      transform .25s ease,
      opacity .25s ease;

    scale:.82;
    opacity:1;
  }

  /* hero stays same size for now */
  .vseat-hero{
    scale:.82;
    z-index:60;
  }

  .vseat-left1,
  .vseat-right1,
  .vseat-left2,
  .vseat-right2,
  .vseat-left3,
  .vseat-right3,
  .vseat-top{

    scale:.82;
    opacity:1;
  }

}
  html,
  body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 28%, rgba(80,55,25,.28), transparent 46%),
      linear-gradient(180deg, #1a1715 0%, #090807 100%);
  }

  body::before{
    display:none !important;
    content:none !important;
  }

  .room{

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    min-width:100vw !important;
    max-width:100vw !important;

    left:0 !important;
    top:0 !important;

    transform:none !important;

    overflow:hidden !important;

    margin:0 !important;
    padding:0 !important;

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

    background:

  radial-gradient(
    circle at 50% 38%,
    rgba(255,255,255,.06),
    transparent 34%
  ),

  radial-gradient(
    circle at top,
    rgba(140,145,155,.10),
    transparent 42%
  ),

  linear-gradient(
    180deg,
    #4b4d52 0%,
    #34363b 42%,
    #23262b 78%,
    #1a1c20 100%
  ) !important;
}

  .room-stage{
    display:block !important;
    position:relative;
    width:100%;
    height:100%;
  }
.room-stage{
    position:relative !important;

    width:100vw !important;
    height:100dvh !important;

    overflow:hidden !important;

    display:flex;
    align-items:center;
    justify-content:center;
}
  /* main portrait table shell */
  .table-wrap{
    width:86vw;
    height:88dvh;

    top:44%;
    left:50%;

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

    border-radius:999px;
    overflow:visible;
  }

  /* thick outside racetrack rail */
  /* =====================================
   UPC PORTRAIT TABLE RAIL
   Inspired by real live UPC table
===================================== */

.table-rail{

    position:absolute;

    inset:0;

    border-radius:46% / 18%;

    overflow:hidden;

    background:

      linear-gradient(
        180deg,
        #202634 0%,
        #171d29 48%,
        #10151f 100%
      );

    box-shadow:

      inset 0 0 0 2px rgba(255,255,255,.03),

      inset 0 0 24px rgba(0,0,0,.88),

      0 14px 34px rgba(0,0,0,.84),

      0 0 18px rgba(0,229,255,.05);

}

/* subtle ornamental texture */
.table-rail::before{

    content:"";

    position:absolute;
    inset:0;

    opacity:.14;

    background-image:
      radial-gradient(circle at 25% 25%, rgba(255,255,255,.06) 1px, transparent 1px),
      radial-gradient(circle at 75% 75%, rgba(255,255,255,.05) 1px, transparent 1px);

    background-size:22px 22px;

    mix-blend-mode:soft-light;

    pointer-events:none;
}

/* subtle inner gold trim */
.table-rail::after{

    content:"";

    position:absolute;

    inset:14px;

    border-radius:44% / 17%;

    border:1px solid rgba(212,180,131,.18);

    pointer-events:none;
}

/* =====================================
   PORTRAIT BET CHIP SCALE
===================================== */

@media (orientation: portrait) and (max-width:900px){

    .bet{
        width:24px;
        height:20px;
    }

    .chip{

        width:10px;
        height:10px;

        border-width:2px;

        box-shadow:
            inset 0 1px 2px rgba(255,255,255,.20),
            inset 0 -2px 3px rgba(0,0,0,.60),
            0 2px 5px rgba(0,0,0,.60);
    }

    .bet-amount{

        top:20px;
        font-size:11px;
    }

}

/* =====================================
   UPC PLAY SURFACE
   Smaller inset cream field
===================================== */

.table-felt{

    position:absolute;

    inset:75px 65px 75px 65px;

    border-radius:40% / 15%;

    overflow:hidden;

    background:

      radial-gradient(
        circle at 50% 38%,
        rgba(255,0,200,.025),
        transparent 34%
      ),

      radial-gradient(
        circle at 50% 62%,
        rgba(0,229,255,.045),
        transparent 42%
      ),

      linear-gradient(
  180deg,
  #141922 0%,
  #0b1018 52%,
  #05070c 100%
);

    box-shadow:

      inset 0 0 0 2px rgba(255,255,255,.06),

      inset 0 0 28px rgba(0,0,0,.22),

      0 0 0 2px rgba(0,0,0,.30),

      0 10px 18px rgba(0,0,0,.26);
}

/* subtle cloth texture */
.table-felt::before{

    content:"";

    position:absolute;
    inset:0;

    opacity:.045;

    background-image:
      repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.05) 0px,
        rgba(255,255,255,.05) 1px,
        transparent 1px,
        transparent 4px
      );

    mix-blend-mode:multiply;

    pointer-events:none;
}

/* =====================================
   PORTRAIT UPC FELT LOGOS
===================================== */

.table-felt::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:100%;
    height:100%;

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

    background-image:

  /* TOP VENUE ZONE 
  url('/upc/game_tables/holdem/zonelogotrans.png'), */

/* TOP VENUE DD'S 
 url('/upc/game_tables/holdem/dirtydogslogo.png'), */

  /* MAIN UPC */
  url('/upc/game_tables/showdown/feltlogoSD.png'),

  /* MAJOR SPONSOR 
  url('/upc/game_tables/holdem/lamperttrans.png'); */

background-repeat:
  no-repeat,
  no-repeat,
  no-repeat;

    background-position:

  /* TOP VENUE */
  center 18%,

  /* MAIN UPC */
  center center,

  /* LAMPERT */
  center 67%;

    background-size:

  /* TOP VENUE */
  40% auto,

  /* MAIN UPC */
  95% auto,

  /* LAMPERT */
  42% auto;

    opacity:.90;

    pointer-events:none;

    filter:
      grayscale(.02)
      brightness(.96)
      contrast(1.08)
      drop-shadow(
        0 0 14px
        rgba(0,229,255,.10)
      );

    z-index:1;
}

  /* =====================================
   UPC PORTRAIT SEATS
   CLEAN SCALE PASS
===================================== */

:root{
  --seat-w: 102px;
  --seat-h: 72px;
}

.seat{

  width:var(--seat-w);
  height:var(--seat-h);

  padding:4px;

  transform:translate(-50%, -50%) !important;
}

/* solid seat panel */
.seat-bg{

    border-radius:12px;

    background:
      linear-gradient(
        180deg,
        rgba(28,28,28,.96),
        rgba(10,10,10,.98)
      );

    border:1px solid rgba(212,180,131,.18);

    box-shadow:
      0 4px 14px rgba(0,0,0,.32),
      inset 0 0 0 1px rgba(255,255,255,.02);
}


/* =========================================
   PORTRAIT PLAYER PROFILE IMAGE
========================================= */

/*
 * Do NOT paint the avatar directly onto .seat-bg.
 * The global ::before avatar layer handles it.
 */
.seat.has-avatar .seat-bg{
  overflow:hidden;
}

/* Portrait sizing for the existing avatar layer */
.seat.has-avatar .seat-bg::before{

  top:4px;
  bottom:4px;
  left:2px;
  right:2px;

  border-radius:10px;

  background-size:
    100% 100%,
    82% auto;

  background-position:
    center,
    center center;
}
.seat-content{
    gap:3px;
    padding:2px;
}

.seat-name{
    font-size:10px;
    letter-spacing:.7px;
}
.seat-name{
  font-weight:800;

  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,.95);
}
.seat-chips{
    font-size:11px;
}

.seat-action{

    height:15px;

    min-width:42px;

    font-size:8px;

    padding:0 6px;
}

  .seat-timer{
    height:4px;
    margin-top:1px;
    background:rgba(255,255,255,.20);
  }

  .seat-timer-fill{
    background:#d4b483;
  }

/* =====================================
   HERO SEAT PROTOTYPE
===================================== */



/* centered hero seat */
.seat.hero-seat{

    position:absolute !important;

    left:50% !important;

    bottom:118px !important;

    top:auto !important;

    transform:translateX(-50%) !important;

    width:148px !important;
    height:92px !important;

    z-index:60;
}

/* stronger hero panel */
.seat.hero-seat .seat-bg{

    border-radius:16px;

    background:
      linear-gradient(
        180deg,
        rgba(36,36,36,.98),
        rgba(12,12,12,.99)
      );

    border:1px solid rgba(212,180,131,.32);

    box-shadow:
      0 8px 26px rgba(0,0,0,.42),
      0 0 18px rgba(212,180,131,.10);
}

/* hero cards */
.seat.hero-seat .seat-cards{

    top:-46px;

    margin-left:-38px;

    transform:
      translateX(-50%)
      scale(1.28) !important;
}

/* hero text */
.seat.hero-seat .seat-name{

    font-size:12px;

    font-weight:700;

    letter-spacing:.9px;

    color:#f7e2b2;

    text-shadow:
      0 1px 0 rgba(0,0,0,.85),
      0 0 10px rgba(212,180,131,.18);
}

.seat.hero-seat .seat-chips{

    font-size:14px;

    font-weight:700;

    color:#ffffff;
}

.seat.hero-seat .seat-chips{
    font-size:13px;
}





  /* =====================================
   PORTRAIT CARD SCALE
===================================== */

.seat-cards{

    top:-34px;

    left:50%;

    margin-left:-28px;

    transform:
      translateX(-50%)
      scale(1.05) !important;
}

.seat-cards .card-img,
.card-back{

    width:40px;

    border-radius:6px;
}

  /* =====================================
   UPC PORTRAIT SEATING
   HERO SEAT LAYOUT
===================================== */

/* TOP LEFT */
.seat-pos-9{ top:17%; left:11%; }

/* TOP RIGHT */
.seat-pos-1{ top:17%; left:89%; }

/* MID SIDES */
.seat-pos-8{ top:36%; left:8%; }
.seat-pos-2{ top:36%; left:92%; }

/* LOWER MID */
.seat-pos-7{ top:68%; left:10%; }
.seat-pos-3{ top:68%; left:90%; }

/* LOWER CORNERS */
.seat-pos-6{ top:85%; left:10%; }
.seat-pos-4{ top:85%; left:90%; }

/* =====================================
   HERO SEAT
===================================== */

.seat-pos-5{

    left:50% !important;

    bottom:20px !important;

    top:auto !important;

    transform:translateX(-50%) !important;

    width:148px !important;
    height:82px !important;

    z-index:60;
}

/* tighter hero panel */
.seat-pos-5 .seat-bg{

    border-radius:14px;

    border:1px solid rgba(212,180,131,.34);

    box-shadow:
      0 8px 22px rgba(0,0,0,.42),
      0 0 14px rgba(212,180,131,.10);

    overflow:hidden;
}

/* tighten internal spacing */
.seat-pos-5 .seat-content{

    gap:1px;

    padding:2px 4px;

    transform:translateY(-2px);
}

/* =====================================
   PORTRAIT BOUNTY BADGES
   Follow visual seats, not engine seats
===================================== */

@media (orientation: portrait) and (max-width: 900px){

  /* Smaller portrait bounty badge */
  .seat-bounty-side{
    width:34px;
    height:42px;

    bottom:8px;

    border-radius:9px;

    box-shadow:
      0 4px 10px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 8px rgba(255,140,0,.40);
  }

  .bounty-icon{
    font-size:14px;
    line-height:17px;
  }

  .bounty-value{
    font-size:13px;
    line-height:16px;
  }


  /* Reset desktop seat-number positioning */
  .seat .seat-bounty-side{
    left:auto;
    right:auto;
  }


  /* VISUAL LEFT-SIDE SEATS
     Badge hangs from right side of seat */
  .vseat-left1 .seat-bounty-side,
  .vseat-left2 .seat-bounty-side,
  .vseat-left3 .seat-bounty-side{
    right:-21px;
    left:auto;
  }


  /* VISUAL RIGHT-SIDE SEATS
     Badge hangs from left side of seat */
  .vseat-right1 .seat-bounty-side,
  .vseat-right2 .seat-bounty-side,
  .vseat-right3 .seat-bounty-side{
    left:-21px;
    right:auto;
  }


  /* TOP CENTER
     Keep badge attached to lower-right edge */
  .vseat-top .seat-bounty-side{
    right:-18px;
    left:auto;
    bottom:5px;
  }


  /* HERO
     Put bounty above/right so it does not
     crowd the action controls below */
  .vseat-hero .seat-bounty-side{
    right:-20px;
    left:auto;

    top:-16px;
    bottom:auto;
  }

}

/* =====================================
   HERO CARDS
===================================== */

.seat-pos-5 .seat-cards{

    top:-46px;

    margin-left:-38px;

    transform:
      translateX(-50%)
      scale(1.28) !important;
}

/* =====================================
   HERO NAME
===================================== */

.seat-pos-5 .seat-name{

    font-size:12px;

    font-weight:700;

    letter-spacing:.9px;

    color:#f7e2b2;

    text-shadow:
      0 1px 0 rgba(0,0,0,.85),
      0 0 10px rgba(212,180,131,.18);
}

/* =====================================
   HERO CHIPS
===================================== */

.seat-pos-5 .seat-chips{

    font-size:14px;

    font-weight:700;

    color:#ffffff;
}

/* =====================================
   HERO TIMER
===================================== */

.seat-pos-5 .seat-timer{

    height:6px;

    margin-top:3px;

    border-radius:999px;
}

/* =====================================
   HERO ACTION PILL
===================================== */

.seat-pos-5 .seat-action{

    height:18px;

    min-width:58px;

    padding:0 10px;

    font-size:9px;

    font-weight:700;

    border-radius:999px;
}
/* =====================================
   DEALER BUTTON ORBIT
===================================== */

/* TOP LEFT / RIGHT */
.dealer-pos-seat-9{ top:22%; left:24%; }
.dealer-pos-seat-1{ top:22%; left:76%; }

/* MID SIDES */
.dealer-pos-seat-8{ top:41%; left:16%; }
.dealer-pos-seat-2{ top:41%; left:84%; }

/* LOWER MID */
.dealer-pos-seat-7{ top:63%; left:21%; }
.dealer-pos-seat-3{ top:63%; left:79%; }

/* LOWER CORNERS */
.dealer-pos-seat-6{ top:80%; left:31%; }
.dealer-pos-seat-4{ top:80%; left:69%; }

/* HERO */
.dealer-pos-seat-5{

    bottom:118px !important;

    left:50% !important;

    top:auto !important;

    transform:translateX(-50%);
}

 /* =====================================
   PORTRAIT BET RING
===================================== */

/* TOP LEFT / RIGHT */
.bet-pos-9{ top:20%; left:28%; }
.bet-pos-1{ top:20%; left:72%; }

/* MID SIDES */
.bet-pos-8{ top:38%; left:28%; }
.bet-pos-2{ top:38%; left:72%; }

/* LOWER MID */
.bet-pos-7{ top:61%; left:30%; }
.bet-pos-3{ top:61%; left:70%; }

/* LOWER CORNERS */
.bet-pos-6{ top:76%; left:26%; }
.bet-pos-4{ top:76%; left:74%; }

/* HERO */
.bet-pos-5{

    bottom:148px !important;

    left:50% !important;

    top:auto !important;

    transform:translateX(-50%);
}

  .board-cards{
    gap:5px;
  }

  .board-card{
    width:48px;
    border-radius:6px;
  }

 .dealer-lane{

    position:absolute;

    top:16% !important;

    left:50%;

    width:70%;

    height:120px;

    transform:translateX(-50%);

    display:flex;
    flex-direction:column;

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

    gap:8px;

    z-index:20;

    pointer-events:none;
}

  .pot-chips{

    padding:6px 14px;

    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(34,34,34,.92),
        rgba(12,12,12,.94)
      );

    border:1px solid rgba(212,180,131,.22);

    color:#f3d28a;

    box-shadow:
      0 6px 14px rgba(0,0,0,.35);

    gap:8px;
}

  .pot-label{
    font-size:10px;
  }

  .pot-amount{
    font-size:18px;
  }
.pot-area{

    position:relative;

    top:auto;
    left:auto;

    transform:none;

    display:flex;
    flex-direction:column;

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

    gap:4px;

    z-index:30;
}
.dealer-hud{

    position:absolute;

    bottom:80%;

    left:50%;

    width:240px;
    height:40px;

    margin-left:-120px;

    transform:none !important;

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

    gap:18px;

    padding:0 18px;

    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(26,26,26,.94),
        rgba(10,10,10,.96)
      );

    border:1px solid rgba(212,180,131,.22);

    box-shadow:
      0 6px 18px rgba(0,0,0,.35);

    z-index:40;
}  
/* =====================================
   PORTRAIT TOURNAMENT HUD
===================================== */

.portrait-tourney-hud{
    display:none;
}


/* PORTRAIT ONLY */
@media (orientation: portrait){

    .portrait-tourney-hud{
        display:flex;
        flex-direction:column;

        position:absolute;

        top:45px;
        left:50%;
        transform:translateX(-50%);

        width:min(55vw, 600px);

        gap:5px;

        z-index:30;

        pointer-events:none;
    }


    /* SHARED BAR */

    .portrait-hud-bar{
        width:100%;

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

        box-sizing:border-box;

        background:
            linear-gradient(
                180deg,
                rgba(25,25,25,.97),
                rgba(5,5,5,.97)
            );

        border:1px solid rgba(214,178,94,.24);

        box-shadow:
            0 4px 12px rgba(0,0,0,.45),
            inset 0 1px 0 rgba(255,255,255,.04);

        color:#eee;
    }


    /* =========================
       PAYOUT BAR
    ========================= */

    .portrait-payout-bar{
    height:36px;
    border-radius:18px;

    /* 12px is wasting space at 55vw */
    padding:0 4px;
}

.portrait-payout-item{
    flex:1;

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

    gap:2px;

    white-space:nowrap;

    /* WAS 11px */
    font-size:8px;
    font-weight:700;

    min-width:0;
}

.portrait-place{
    /* WAS 13px */
    font-size:9px;
}

.portrait-prize{
    color:#e9cd82;
    font-weight:800;

    /* explicitly inherit the smaller size */
    font-size:8px;
}

.portrait-divider{
    opacity:.35;
    font-size:7px;
}

.portrait-points{
    color:#b7d8f3;
    font-weight:700;

    /* explicitly inherit the smaller size */
    font-size:8px;
}


    /* =========================
   INFO BAR
========================= */

.portrait-info-bar{
    height:24px;

    /* make this pill physically shorter */
    width:85%;

    align-self:center;

    border-radius:12px;
    padding:0 4px;
}

.portrait-info-item{
    flex:1;

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

    gap:2px;

    white-space:nowrap;

    min-width:0;
}

.portrait-info-item + .portrait-info-item{
    border-left:1px solid rgba(214,178,94,.18);
}

.portrait-info-label{
    font-size:7px;
    font-weight:700;

    letter-spacing:.3px;

    color:#aaa;
}

.portrait-info-value{
    font-size:8px;
    font-weight:800;

    color:#eee;
   }
}
/* =====================================
   PORTRAIT DEALER
   Match landscape style
===================================== */

.dealer-station{

    position:absolute;

    top:-2%;
    left:50%;

    transform:translateX(-50%);

    width:150px;
    height:auto;

    z-index:45;

    pointer-events:none;

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

.dealer-avatar{
    display:none !important;
}

.dealer-avatar img{

    width:50%;
    height:auto;

    object-fit:contain;

    display:block;

    filter:
      drop-shadow(0 10px 16px rgba(0,0,0,.55));
}

  .dealer-hud{

    position:absolute;

    top:-5%;

    left:50%;

    width:240px;
    height:40px;

    margin-left:-137px;

    transform:none !important;

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

    gap:18px;

    padding:0 18px;

    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        rgba(26,26,26,.94),
        rgba(10,10,10,.96)
      );

    border:1px solid rgba(212,180,131,.22);

    box-shadow:
      0 6px 18px rgba(0,0,0,.35);

    z-index:40;
}

  .hud-level{
    font-size:10px;
  }

  .hud-blinds{
    font-size:14px;
    color:#f3d28a;
  }

  .hud-timer{
    font-size:13px;
    color:#ffffff;
  }

  .dealer-hud > div:not(:last-child)::after{
    margin-left:12px;
    background:linear-gradient(
      to bottom,
      transparent,
      rgba(212,180,131,.55),
      transparent
    );
  }

  /* =====================================
   PORTRAIT BURN CARDS
===================================== */

.burn-area{

    top:36%;
    left:36%;

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

    opacity:.75;

    z-index:6;
}

/* actual burn cards */
.burn-area .card-img,
.burn-area .card-back{

    width:34px;
    height:auto;

    border-radius:5px;

    display:block;
}

  /* hide side panels in first portrait pass */
  .table-hud,
  .game-panel,
  .table-info,
  .tourney-hud{
    display:none !important;
  }

  /* action bar becomes phone-native */
  .action-dock{
    left:8px;
    right:8px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px);

    width:auto;
    padding:5px;

    border-radius:14px;

    background:rgba(8,8,8,.92);
    border:1px solid rgba(212,180,131,.22);

    transform:none !important;
  }

  .global-action-bar{
    width:100%;
    gap:5px;
    padding:5px;
    border-radius:12px;

    background:linear-gradient(180deg, #26211c, #100e0c);
    border:1px solid rgba(212,180,131,.20);
  }

  .global-action-bar .action-btn{
    padding:16px 0 !important;
    font-size:14px !important;
    border-radius:9px;
  }

  .global-action-bar .action-btn:nth-child(2){
    color:#14100a;
    background:linear-gradient(180deg, #f2d28e, #a57a35);
  }

  .global-action-bar .action-btn:nth-child(3){
    color:#ffd0c8;
    background:linear-gradient(180deg, #5a1d18, #200807);
  }

  /* raise panel mobile */
  .raise-panel{
    align-items:flex-end;
    justify-content:center;
    padding:10px;
    background:rgba(0,0,0,.62);
  }

  .raise-box{
    width:calc(100vw - 28px);
    max-width:390px;
    border-radius:18px 18px 0 0;
  }

  /* portrait chat */

.chat-drawer,
.chat-open-btn{
    display:none !important;
}

.portrait-chat-drawer{

    position:fixed;

    left:12px;
    right:12px;

    bottom:12px;

    height:55vh;

    display:none;

    flex-direction:column;

    border-radius:16px;

    overflow:hidden;

    background:#111821;

    border:1px solid rgba(120,160,255,.25);

    box-shadow:
        0 18px 45px rgba(0,0,0,.8);

    z-index:10000;
}

.portrait-chat-drawer.open{
    display:flex;
}

.portrait-chat-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    background:#1b2535;

    font-weight:700;
}

.portrait-chat-close{

    background:none;

    border:none;

    color:white;

    font-size:22px;

    cursor:pointer;
}

.portrait-chat-input{

    display:flex;

    gap:12px;

    padding:14px;
}

.portrait-chat-input input{

    flex:1;

    height:46px;

    padding:0 14px;

    font-size:18px;

    border-radius:10px;
}

.portrait-chat-input button{

    min-width:90px;

    font-size:16px;

    font-weight:700;

    padding:0 18px;

    border-radius:10px;
}
/* =========================================
   TABLE MENU
========================================= */

.table-menu-button{

    position:fixed;

    left:18px;
    bottom:18px;

    width:52px;
    height:52px;

    border:none;
    border-radius:14px;

    cursor:pointer;

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

    color:#d9e8ff;

    background:
        linear-gradient(
            180deg,
            rgba(20,26,38,.96),
            rgba(8,12,20,.98)
        );

    border:1px solid rgba(120,160,255,.25);

    box-shadow:
        0 12px 30px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.05);

    z-index:9998;

    transition:.15s;
}

.table-menu-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 16px 36px rgba(0,0,0,.8),
        0 0 18px rgba(63,169,245,.25);

}

.table-menu{

    position:fixed;

    left:18px;
    bottom:80px;

    width:250px;

    display:none;

    border-radius:16px;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            rgba(18,22,34,.97),
            rgba(8,10,18,.98)
        );

    border:1px solid rgba(120,160,255,.25);

    box-shadow:
        0 20px 45px rgba(0,0,0,.8);

    z-index:9998;

}

.table-menu.open{

    display:block;

}

.table-menu-title{

    padding:14px;

    text-align:center;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    color:#8fdcff;

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

}

.table-menu-item{

    width:100%;

    padding:14px 18px;

    border:none;

    text-align:left;

    cursor:pointer;

    color:#dce7ff;

    background:transparent;

    font-size:14px;

    transition:.15s;

}

.table-menu-item:hover{

    background:rgba(63,169,245,.15);

}
  /* =====================================
   FULLSCREEN BUTTON
===================================== */

.fullscreen-btn{

    position:fixed;

    right:14px;
    bottom:18px;

    z-index:999;

    width:58px;
    height:58px;

    border:none;
    border-radius:16px;

    cursor:pointer;

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

    line-height:1.05;

    color:#f3d28a;

    background:
      linear-gradient(
        180deg,
        rgba(34,34,34,.96),
        rgba(10,10,10,.98)
      );

    border:1px solid rgba(212,180,131,.24);

    box-shadow:
      0 8px 20px rgba(0,0,0,.42),
      inset 0 0 0 1px rgba(255,255,255,.03);

    backdrop-filter:blur(6px);

    transition:
      transform .15s ease,
      filter .15s ease,
      opacity .15s ease;
}

.fullscreen-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);
}

.fullscreen-btn:active{

    transform:translateY(1px);
}

  #seat-warning,
  #table-cancelled{
    max-width:88vw;
    text-align:center;
  }
}
@media (orientation: portrait) and (max-width: 900px){

  .fullscreen-btn{

      right:12px;

      bottom:
        calc(env(safe-area-inset-bottom, 0px) + 10px);

      width:54px;
      height:54px;

      font-size:11px;

      border-radius:15px;
  }

}
.hud-lobby-btn{
  display:block;

  margin-top:14px;
  padding:8px 12px;

  text-align:center;
  text-decoration:none;

  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;

  color:#3fa9f5;

  border:1px solid rgba(63,169,245,.35);
  border-radius:10px;

  background:rgba(63,169,245,.08);

  transition:.15s ease;
}

.hud-lobby-btn:hover{
  background:rgba(63,169,245,.18);
  border-color:rgba(63,169,245,.65);
}
/* ======================================================
   SMALL LANDSCAPE — STRONG COMPRESSION MODE
====================================================== */

@media (max-aspect-ratio: 3/2){

  .table-wrap{
    transform: translate(-50%, calc(-50% + 40px)) !important;
  }

  :root{
    --seat-w: 120px;
    --seat-h: 65px;
  }

  .seat-content{
    font-size: 11px;
  }

  .seat-cards{
    top: -50px;
  }

  .seat-cards .card-img{
    width: 52px;
  }

  .board-card{
    width: 55px;
  }

  .dealer-lane{
    top: 10%;
  }

  .dealer-hud{
    transform: scale(0.9);
    transform-origin: top center;
  }

  .table-hud{
    top: 10px;
    left: 10px;
    transform: scale(0.85);
    transform-origin: top left;
  }

  .game-panel{
    top: 10px;
    right: 10px;
    transform: scale(0.85);
    transform-origin: top right;
  }

  .action-dock{
    bottom: 10px;
    right: 10px;
  }

}
/* =====================================
   LANDSCAPE FULLSCREEN POSITION
===================================== */

@media (orientation: landscape){

  .fullscreen-btn{

      position:fixed;

      left:400px;

      bottom:14px;

      width:58px;
      height:58px;

      z-index:9999;
  }

}
#seat-warning{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);

  background: linear-gradient(145deg, #0f2a1f, #0a1a14);
  border: 1px solid rgba(100,255,180,.6);

  color: #8fffd1;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;

  padding: 10px 18px;
  border-radius: 10px;

  box-shadow:
    0 0 12px rgba(100,255,180,.4),
    inset 0 0 6px rgba(255,255,255,.1);

  z-index: 9999;
  pointer-events: none;
}
#table-cancelled{
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  background: linear-gradient(145deg, #2a0f0f, #140707);
  border: 1px solid rgba(255,80,80,.6);

  color: #ff9b9b;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1px;

  padding: 20px 30px;
  border-radius: 12px;

  box-shadow:
    0 0 20px rgba(255,80,80,.5),
    inset 0 0 8px rgba(255,255,255,.1);

  z-index: 10000;
}

/* =====================================
   WINNER GLOW
===================================== */

.seat.winner .seat-bg{

  border-color:
    rgba(0,255,140,.95);

  box-shadow:
    0 0 18px rgba(0,255,140,.65),
    0 0 38px rgba(0,255,140,.35),
    inset 0 0 14px rgba(0,255,140,.22);

  animation:
    winnerPulse 1.6s ease-in-out infinite;
}

/* HERO WINNER BOOST */
.seat.me.winner .seat-bg{

  border-color:
    rgba(0,255,180,1);

  box-shadow:
    0 0 22px rgba(0,255,180,.95),
    0 0 52px rgba(0,255,180,.55),
    inset 0 0 18px rgba(0,255,180,.28);
}

.seat.winner .seat-name{
  color:#9dffd0;
}

@keyframes winnerPulse{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.015);
  }

  100%{
    transform:scale(1);
  }

}
/* =========================================
   HARD FIX — RESULTS MODAL MUST FIT SCREEN
========================================= */

.tourney-overlay{
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:16px !important;
}

.tourney-card{
  width:min(920px, 94vw) !important;
  height:min(760px, 90vh) !important;
  max-height:90vh !important;

  display:grid !important;
  grid-template-rows:auto auto auto 1fr auto !important;

  overflow:hidden !important;
  box-sizing:border-box !important;
  padding:0 0 16px 0 !important;
}

.tourney-banner{

  width:100%;

  height:auto !important;

  display:block;

  border-radius:24px 24px 0 0;
}

.tourney-meta{
  margin:0 !important;
  flex-shrink:0 !important;
}

.tourney-row.header{
  margin:12px 16px 6px !important;
  flex-shrink:0 !important;
}

.tourney-results{
  min-height:0 !important;
  overflow-y:auto !important;
  padding:0 16px !important;
}

.return-btn{
  display:block !important;
  margin:12px 16px 16px !important;
  flex-shrink:0 !important;
  position:relative !important;
  z-index:5 !important;
}

/* mobile keeps full-page scroll */
@media (max-width:700px){
  .tourney-overlay{
    align-items:flex-start !important;
    overflow-y:auto !important;
  }

  .tourney-card{
    height:auto !important;
    max-height:none !important;
  }

  .tourney-results{
    overflow:visible !important;
  }
}
/* =====================================
   OFFLINE (RED)
===================================== */

.seat.player-offline{

    opacity:.45;

    filter:grayscale(1);
}

.offline-badge{

    position:absolute;

    top:-8px;
    right:-8px;

    padding:3px 8px;

    border-radius:12px;

    background:#8b0000;

    color:#fff;

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

    letter-spacing:.5px;

    z-index:50;
}
/* =====================================
   AWAY (YELLOW)
===================================== */

.seat.player-away{

    opacity:.95;
}

.away-badge{

    position:absolute;

    top:-8px;
    right:-8px;

    padding:3px 8px;

    border-radius:12px;

    background:#ffd700;

    color:#000;

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

    letter-spacing:.5px;

    z-index:50;
}
.qualified-badge {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #ffd54a;
    text-transform: uppercase;
}
.board-card.flip-in {
    animation: boardFlip .45s ease;
}

@keyframes boardFlip {

    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}
.table-move-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-move-modal {
  width: min(92vw, 420px);
  padding: 28px 22px;
  border-radius: 18px;
  background: radial-gradient(circle at top, #1b3b2f, #07110e);
  border: 1px solid rgba(0,255,170,.45);
  box-shadow: 0 0 35px rgba(0,255,170,.25);
  text-align: center;
  color: #fff;
}

.table-move-modal h2 {
  margin: 0 0 12px;
  color: #00ffaa;
  font-size: 1.6rem;
}

.table-move-modal p {
  margin: 8px 0;
  color: #d7fff2;
}

.move-sub {
  opacity: .8;
  font-size: .95rem;
}

.move-table-btn {
  margin-top: 18px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: #00ffaa;
  color: #001b13;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(0,255,170,.35);
}

.move-table-btn:hover {
  transform: translateY(-1px);
}
.live-bonus.applied{

    background:#2b2413;
    border:1px solid #b98a1d;
    color:#ffd86b;

}
body.fake-fullscreen{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    overflow:hidden;
}

body.fake-fullscreen .stage,
body.fake-fullscreen .room{
    width:100vw;
    height:100dvh;
    max-width:none;
    max-height:none;
}
@media (orientation: landscape){

  .sound-toggle-btn{
      right:auto;
      left:466px;

      bottom:14px;

      width:72px;
      min-width:0;
      height:58px;

      box-sizing:border-box;
  }

}
.sound-toggle-btn {
    position: fixed;
    z-index: 9999;

    right: 90px;
    bottom: 14px;

    min-width: 72px;
    padding: 7px 10px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 8px;

    background: rgba(0,0,0,.72);
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;

    cursor: pointer;
}

.sound-toggle-btn.is-muted {
    opacity: .55;
}

.points-list{

    margin-top:8px;

}

.points-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:4px 0;

    font-size:15px;

    font-weight:700;

    color:#dce8ff;
}

.points-row span:last-child{

    color:#6dff9f;

    font-weight:900;

    text-shadow:
        0 0 10px rgba(109,255,159,.35);
}
.hud-header{

    min-height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:14px;

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

    padding-bottom:12px;

}

.hud-logo{

    max-width:500px;

    max-height:500px;

    object-fit:contain;

}
.cash-sit-btn {
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 8px;
    padding: 5px 10px;

    background: linear-gradient(
        180deg,
        #2da84f,
        #166d30
    );

    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .4px;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 3px 8px rgba(0,0,0,.45);
}

.cash-sit-btn:hover {
    filter: brightness(1.15);
}

.cash-sit-btn:active {
    transform: translateY(1px);
}

/* =====================================
   CASH BUY-IN MODAL
===================================== */

.modal-overlay{

    position:fixed;
    inset:0;

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

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

    backdrop-filter:blur(6px);

    z-index:20000;
}

.modal-overlay[hidden]{
    display:none !important;
}

.cash-buyin-modal{

    width:380px;
    max-width:90vw;

    padding:24px;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        #1a1a1f,
        #0d0d12
    );

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.8);

    color:#fff;
}

.cash-table-name{

    margin:10px 0 18px;

    color:#9ecbff;
    font-weight:700;
}

.cash-buyin-info{

    display:flex;
    justify-content:space-between;

    margin-bottom:18px;
}

.cash-buyin-label{

    display:block;
    margin-bottom:6px;

    font-weight:700;
}

#cashBuyinAmount{

    width:100%;

    box-sizing:border-box;

    padding:10px;

    margin-bottom:12px;

    font-size:18px;
}

.cash-buyin-limits{

    text-align:center;

    font-size:12px;

    opacity:.75;

    margin-bottom:18px;
}

.cash-buyin-buttons{

    display:flex;
    gap:12px;
}

.cash-buyin-buttons button{

    flex:1;
    padding:12px;

    cursor:pointer;
}

.hud-leave-seat{

    width:100%;
    margin-top:10px;

    padding:10px 12px;

    border:none;
    border-radius:8px;

    background:#8b1e1e;
    color:#fff;

    font-weight:700;
    cursor:pointer;

    transition:.18s;

}

.hud-leave-seat:hover{

    background:#b32626;

}
.upc-game-points {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.58);
    text-transform: none;
    letter-spacing: 0;
}
.upc-bounty-earned{

    font-size:15px;
    font-weight:700;
    color:#ff5a5a;
    margin-top:6px;

}

.upc-bounty-total{

    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.8;
    margin-bottom:6px;

}
/* NEW CHAT WAITING */
@media (orientation: portrait) {

    .table-menu-button.has-unread-chat {
        animation: chatMenuPulse 1.2s ease-in-out infinite;

        box-shadow:
            0 0 8px rgba(255, 170, 0, .95),
            0 0 18px rgba(255, 120, 0, .70);
    }

    .table-menu-button.has-unread-chat::after {
        content: "";

        position: absolute;
        top: 4px;
        right: 4px;

        width: 11px;
        height: 11px;

        border-radius: 50%;

        background: #ff3b30;

        box-shadow:
            0 0 5px rgba(255, 59, 48, 1),
            0 0 10px rgba(255, 59, 48, .7);
    }
}

@keyframes chatMenuPulse {
    0%, 100% {
        box-shadow:
            0 0 6px rgba(255, 170, 0, .65),
            0 0 12px rgba(255, 120, 0, .35);
    }

    50% {
        box-shadow:
            0 0 12px rgba(255, 190, 0, 1),
            0 0 26px rgba(255, 120, 0, .85);
    }
}
.cash-buyin-modal{

    width:430px;

    background:
        linear-gradient(
            180deg,
            #171d27,
            #0d1118
        );

    border:1px solid rgba(0,210,255,.22);

    border-radius:22px;

    padding:26px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.75),
        0 0 30px rgba(0,210,255,.08);

    text-align:center;
}

.cash-buyin-logo{

    width:240px;

    display:block;

    margin:0 auto 12px;
}

.cash-buyin-subtitle{

    color:#c88d4a;

    letter-spacing:.28em;

    font-size:12px;

    font-weight:800;
}

.cash-table-name{

    color:#71d88b;

    font-size:26px;

    font-weight:900;
}

.summary-label{

    color:#b68a54;
}

.summary-value{

    color:#71d88b;
}

.cash-buyin-range{

    color:#c7ccd4;
}

#cashBuyinAmount{

    color:#000000;
}

.cash-buyin-limits{

    color:#9fa7b3;
}

.btn-buyin{

    width:100%;

    padding:16px;

    border:none;

    border-radius:14px;

    font-size:17px;

    font-weight:900;

    background:
        linear-gradient(
            180deg,
            #36d76d,
            #1c9445
        );

    color:#fff;
}

.btn-cancel{

    width:100%;

    margin-top:10px;

    padding:13px;

    border:none;

    border-radius:12px;

    background:#2c3340;

    color:#d0d8e6;
}
/* =========================================
   SHOW ONE — CARD CHOICE BUTTONS
========================================= */

#globalActionBar button.show-card-red,
#globalActionBar button.show-card-black {
    background:
        linear-gradient(
            180deg,
            #fffdf7 0%,
            #eee9df 100%
        );

    border: 2px solid rgba(255,255,255,.75);
    border-radius: 10px;

    box-shadow:
        0 3px 8px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.9);

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

    gap: 1px;
}

#globalActionBar button.show-card-red {
    color: #b31318;
}

#globalActionBar button.show-card-black {
    color: #171717;
}

.show-card-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    opacity: .65;
}

.show-card-value {
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}
/* =========================================================
   PRE-ACTION BAR
   Secondary / queued action appearance
========================================================= */

.pre-action-bar {
    gap: 8px;
    padding: 6px 10px;

    opacity: 0.88;

    transform: scale(0.88);
    transform-origin: center bottom;
}


/* PRE-ACTION BUTTONS ONLY */
.pre-action-bar .action-btn {
    min-width: 110px;
    min-height: 42px;

    padding: 7px 14px;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.4px;

    opacity: 0.62;

    background: rgba(12, 12, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.28);

    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.04);

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


/* Hover / touch feedback */
.pre-action-bar .action-btn:hover {
    opacity: 0.85;
}


/* =========================================================
   SELECTED PRE-ACTION
========================================================= */

.pre-action-bar .action-btn.pre-selected {
    opacity: 1;

    background: rgba(255, 255, 255, 0.16);

    border-color: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.25),
        inset 0 0 8px rgba(255, 255, 255, 0.08);
}
/* Selected CALL pre-action */
#paCall.pre-selected {
    background: linear-gradient(
        180deg,
        #4f765b 0%,
        #35563f 100%
    );

    border-color: #71987c;

    box-shadow:
        0 0 0 1px rgba(113, 152, 124, 0.35),
        0 0 12px rgba(70, 120, 82, 0.35);

    color: #fff;
}
/* Selected CHECK/FOLD pre-action — GOLD */
#paCheckFold.pre-selected {
    background: linear-gradient(
        180deg,
        #9a7628 0%,
        #5f4514 100%
    );

    border-color: #d4ad4f;

    box-shadow:
        0 0 0 1px rgba(212, 173, 79, 0.40),
        0 0 14px rgba(218, 170, 55, 0.45),
        inset 0 1px 0 rgba(255, 235, 170, 0.16);

    color: #fff3c4;
}


/* Selected FOLD pre-action — DARK RED */
#paFold.pre-selected {
    background: linear-gradient(
        180deg,
        #762d35 0%,
        #40151a 100%
    );

    border-color: #a94a54;

    box-shadow:
        0 0 0 1px rgba(169, 74, 84, 0.35),
        0 0 14px rgba(130, 35, 45, 0.42),
        inset 0 1px 0 rgba(255, 180, 180, 0.10);

    color: #ffd4d7;
}
/* =========================================================
   PRE-ACTION LABEL
========================================================= */

.pre-action-label {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 3px);

    transform: translateX(-50%);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;

    white-space: nowrap;

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   MOBILE PORTRAIT — PRE-ACTION BAR
========================================================= */

@media (orientation: portrait) {

    .pre-action-bar {
        /*
         * Override the full-width global action bar.
         */
        width: auto !important;
        max-width: none !important;

        left: 50% !important;
        right: auto !important;

        /*
         * Let the buttons determine the actual bar width.
         */
        display: flex;
        flex: 0 0 auto;
        justify-content: center;

        gap: 5px;

        padding: 5px 7px;

        /*
         * Center it AND make it slightly smaller.
         */
        transform: translateX(-50%) scale(0.82);
        transform-origin: center bottom;

        /*
         * Don't allow inherited stretching.
         */
        box-sizing: content-box;
    }


    .pre-action-bar .action-btn {
        /*
         * CRITICAL:
         * don't let the global action buttons flex-grow.
         */
        flex: 0 0 auto !important;

        width: auto !important;

        min-width: 88px;
        min-height: 38px;

        padding: 5px 9px;

        font-size: 13px;
        letter-spacing: 0.2px;
    }


    /*
     * CHECK/FOLD needs a little more room.
     */
    .pre-action-bar #paCheckFold {
        min-width: 104px;
    }


    .pre-action-label {
        font-size: 9px;
        letter-spacing: 1.2px;

        bottom: calc(100% + 2px);
    }
}
/* =========================================================
   PORTRAIT PRE-ACTION DOCK
   Shrink the actual outer action container.
========================================================= */

@media (orientation: portrait) {

    .action-dock.pre-action-mode {
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;

    left: 50% !important;
    right: auto !important;

    /*
     * Center AND scale the entire dock.
     * This shrinks the outer bar along with its contents.
     */
    transform: translateX(-50%) scale(0.70) !important;
    transform-origin: center bottom;

    padding: 4px !important;

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


    .action-dock.pre-action-mode .pre-action-bar {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    left: auto !important;
    right: auto !important;

    margin: 0 !important;

    /*
     * Outer dock handles scaling now.
     */
    transform: none !important;
}
}
/* =========================================================
   ACTION BAR HIDDEN SAFETY
   JS visibility must always win.
========================================================= */

.global-action-bar[hidden] {
    display: none !important;
}

/* =========================================================
   BET CHIP READABILITY PASS
========================================================= */

.chip {
    width: 20px;
    height: 20px;
}


/* Bet amount pill */
.bet-amount {
    top: 26px;

    min-width: 24px;

    padding: 2px 6px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 900;
    line-height: 16px;

    text-align: center;

    color: #ffd166;

    background: rgba(5, 7, 12, 0.82);

    border: 1px solid rgba(255, 209, 102, 0.30);

    box-shadow:
        0 2px 6px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.06);

    text-shadow: none;

    white-space: nowrap;
}


/* =========================================================
   PORTRAIT — BET CHIP SCALE
========================================================= */

@media (orientation: portrait) and (max-width: 900px) {

    .chip {
        width: 14px;
        height: 14px;
    }

    .bet-amount {
        top: 22px;

        min-width: 22px;
        padding: 2px 5px;

        font-size: 12px;
        line-height: 15px;
    }
}
#connectionWarning {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translate(-50%, -20px);

    z-index: 20000;

    min-width: 260px;
    max-width: calc(100vw - 32px);

    padding: 10px 18px;

    background: rgba(125, 20, 20, 0.96);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;

    color: #fff;
    text-align: center;

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

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

#connectionWarning.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.connection-warning-title {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .8px;
}

.connection-warning-text {
    margin-top: 2px;
    font-size: 11px;
    opacity: .85;
}
/* TEMPORARY GPU RENDERING DIAGNOSTIC */

.table-felt::before {
    display: none !important;
}

.table-felt::after {
    filter: none !important;
}

.board-card {
    filter: none !important;
}
/* ==========================================
   SHOWDOWN — HEADS-UP TABLE
   Only seats 3 and 7 are visible
========================================== */

.seat-1,
.seat-2,
.seat-4,
.seat-5,
.seat-6,
.seat-8,
.seat-9 {
    display: none !important;
}

/* ==========================================
   SHOWDOWN — PRE-MATCH READY CONTROLS
========================================== */

.showdown-ready-controls {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);

    width: 170px;
    text-align: center;
    z-index: 50;
}

.showdown-ready-controls[hidden] {
    display: none !important;
}

.showdown-ready-status {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.7px;
    color: #ffd166;
    text-shadow: 0 2px 4px #000;
    white-space: nowrap;
}

.showdown-ready-btn {
    width: 100%;
    padding: 9px 12px;

    border: 1px solid #7dffae;
    border-radius: 8px;

    background: linear-gradient(
        180deg,
        #16834c,
        #06482a
    );

    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.6px;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0,0,0,.65),
        0 0 14px rgba(35,220,110,.35);
}

.showdown-ready-btn.is-ready {
    background: linear-gradient(
        180deg,
        #a52c35,
        #59121b
    );

    border-color: #ff8585;

    box-shadow:
        0 3px 10px rgba(0,0,0,.65),
        0 0 12px rgba(255,65,65,.3);
}

.showdown-ready-btn:disabled {
    opacity: .55;
    cursor: wait;
}
/* =====================================================
   THE POKERGHOST'S SHOWDOWN
   HEADS-UP MATCH RESULTS
===================================================== */

.tourney-card.showdown-results-card {
  width: min(540px, 100%);
  padding: 34px 28px 28px;
  text-align: center;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(29, 92, 160, .30),
      transparent 65%
    ),
    linear-gradient(180deg, #101827, #05080f 85%);

  border: 1px solid rgba(222, 183, 91, .65);

  box-shadow:
    0 28px 80px rgba(0, 0, 0, .85),
    0 0 32px rgba(35, 132, 255, .16),
    inset 0 0 30px rgba(222, 183, 91, .05);
}

.showdown-results-title {
  color: #eac778;
  font-size: clamp(20px, 4.5vw, 30px);
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;

  text-shadow: 0 2px 16px rgba(234, 199, 120, .24);
}

.showdown-results-subtitle {
  margin-top: 9px;
  color: #91bce8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.showdown-results-winner-label {
  margin-top: 34px;
  color: #f4d58b;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .18em;
}

.showdown-results-winner {
  margin-top: 13px;
  padding: 22px 12px;

  color: #fff4d4;
  font-size: clamp(27px, 6vw, 42px);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(222, 183, 91, .12),
    transparent
  );

  border-top: 1px solid rgba(222, 183, 91, .25);
  border-bottom: 1px solid rgba(222, 183, 91, .25);

  text-shadow:
    0 0 20px rgba(234, 199, 120, .32),
    0 3px 6px rgba(0, 0, 0, .8);
}

.showdown-results-versus {
  margin-top: 22px;
  color: #6b91b9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
}

.showdown-results-loser {
  margin-top: 10px;
  color: #c1c9d6;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.showdown-results-status {
  margin-top: 30px;
  padding: 11px 14px;
  border-radius: 8px;

  color: #88c9ff;
  background: rgba(45, 133, 222, .09);
  border: 1px solid rgba(77, 157, 238, .20);

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .25em;
}

.showdown-results-card .return-btn {
  margin-top: 24px;
  color: #101827;
  background: linear-gradient(
    180deg,
    #f8dc99,
    #c79a45
  );

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .4),
    0 0 20px rgba(222, 183, 91, .16);
}

.showdown-results-card .return-btn:hover {
  filter: brightness(1.12);
}

@media (max-width: 700px) {
  .tourney-card.showdown-results-card {
    padding: 26px 17px 22px;
  }

  .showdown-results-winner-label {
    margin-top: 24px;
  }

  .showdown-results-winner {
    padding: 17px 8px;
  }

  .showdown-results-status {
    margin-top: 23px;
  }
}
/* SHOWDOWN BRACKET DESTINATIONS */

.showdown-results-destinations {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  text-align: left;
}

.showdown-results-destination {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(35, 70, 110, .15);
  border: 1px solid rgba(111, 180, 255, .18);
}

.showdown-results-destination strong {
  color: #eac778;
  font-size: 13px;
}

.showdown-results-destination span {
  color: #b8d5ef;
  font-size: 12px;
  line-height: 1.4;
}
/* =========================================
   SHOWDOWN RESULTS — INTEGRATED PROGRESSION
========================================= */

.showdown-results-advance {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .11em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.winner-advance {
  color: #8be0b3;
  text-shadow: 0 0 12px rgba(90, 225, 160, .20);
}

.loser-advance {
  color: #91bce8;
}

.showdown-results-divider {
  height: 1px;
  margin: 27px 0 23px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(222, 183, 91, .38),
    transparent
  );
}

.showdown-results-loser-label {
  color: #9eabbc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.showdown-results-loser {
  margin-top: 12px;
}

.showdown-results-status {
  margin-top: 28px;
}

@media (max-width: 700px) {
  .showdown-results-divider {
    margin: 21px 0 19px;
  }

  .showdown-results-advance {
    font-size: 11px;
    letter-spacing: .07em;
  }
}
/* =========================================
   SHOWDOWN RESULTS HEADER BANNER
========================================= */

.showdown-results-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 18px;
  border-radius: 12px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .showdown-results-banner {
    margin-bottom: 12px;
    border-radius: 8px;
  }
}
/* =====================================================
   SHOWDOWN RESULTS — LAYOUT AND VISUAL REFINEMENT
===================================================== */

.tourney-overlay:has(.showdown-results-card) {
  overflow-y: auto;
  align-items: safe center;
  padding: 14px;
  background:
    radial-gradient(
      ellipse at center,
      rgba(8, 42, 77, .45),
      rgba(0, 0, 0, .96) 75%
    );
}

.tourney-card.showdown-results-card {
  width: min(680px, 100%);
  max-height: calc(100dvh - 28px);
  min-height: 0;
  padding: 12px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
  gap: 0;

  background:
    linear-gradient(145deg, #081525, #060810 65%, #1b080e);

  border: 1px solid rgba(62, 164, 255, .65);
  border-radius: 18px;

  box-shadow:
    0 20px 70px rgba(0, 0, 0, .9),
    -4px 0 28px rgba(0, 137, 255, .16),
    4px 0 28px rgba(255, 34, 54, .16);
}

.showdown-results-banner {
  width: 100%;
  height: auto;
  margin: 0 0 10px;
  border-radius: 10px;
  flex-shrink: 0;
}

.showdown-results-winner-label {
  margin-top: 8px;
  color: #77caff;
  font-size: 13px;
  letter-spacing: .2em;
}

.showdown-results-winner {
  margin-top: 7px;
  padding: 10px 8px;
  color: #ffffff;
  font-size: clamp(26px, 5vw, 38px);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 135, 255, .13),
      rgba(255, 37, 65, .10),
      transparent
    );
  border-top: 1px solid rgba(57, 154, 255, .25);
  border-bottom: 1px solid rgba(255, 55, 80, .25);
  text-shadow: 0 0 16px rgba(71, 172, 255, .3);
}

.showdown-results-advance {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
}

.winner-advance {
  color: #67d7ff;
}

.showdown-results-divider {
  margin: 15px 0 12px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(67, 154, 255, .65),
      rgba(255, 56, 73, .65),
      transparent
    );
}

.showdown-results-loser-label {
  color: #ff7181;
  font-size: 12px;
  letter-spacing: .2em;
}

.showdown-results-loser {
  margin-top: 7px;
  color: #d7dce7;
  font-size: clamp(21px, 4vw, 27px);
}

.loser-advance {
  color: #ff9ba7;
}

.showdown-results-status {
  margin-top: 16px;
  padding: 9px 12px;
  color: #b3dfff;
  background: rgba(20, 64, 103, .20);
  border: 1px solid rgba(69, 152, 241, .28);
  letter-spacing: .17em;
}

.showdown-results-card .return-btn {
  flex-shrink: 0;
  margin-top: 12px;
  padding: 13px 16px;
  color: #fff;
  background:
    linear-gradient(100deg, #087ce0, #182e59 50%, #c51b37);
  border: 1px solid rgba(132, 198, 255, .35);
  box-shadow:
    0 0 16px rgba(0, 123, 255, .17),
    0 0 16px rgba(255, 35, 63, .12);
}

.showdown-results-card .return-btn:hover {
  filter: brightness(1.2);
}

@media (max-width: 700px) {
  .tourney-overlay:has(.showdown-results-card) {
    padding: 8px;
  }

  .tourney-card.showdown-results-card {
    max-height: calc(100dvh - 16px);
    padding: 10px 12px 14px;
  }

  .showdown-results-banner {
    margin-bottom: 7px;
  }

  .showdown-results-winner-label {
    margin-top: 5px;
  }

  .showdown-results-divider {
    margin: 12px 0 10px;
  }
}
/* =========================================
   SHOWDOWN RESULTS — FINAL TEXT / BUTTON TUNING
========================================= */

/* Make advancement destinations prominent */

.showdown-results-advance {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

.winner-advance {
  color: #65dfff;
  text-shadow: 0 0 12px rgba(0, 190, 255, .35);
}

.loser-advance {
  color: #ff8495;
  text-shadow: 0 0 12px rgba(255, 50, 80, .25);
}

/* Keep the return button comfortably inside the card */

.showdown-results-card .return-btn {
  display: block;
  width: calc(100% - 32px);
  max-width: 100%;
  margin: 14px auto 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Mobile adjustments */

@media (max-width: 700px) {
  .showdown-results-advance {
    font-size: 13px;
    letter-spacing: .05em;
  }

  .showdown-results-card .return-btn {
    width: calc(100% - 16px);
  }
}
/* ==========================================
   SHOWDOWN — LANDSCAPE READY POSITION
========================================== */

@media (orientation: landscape) {

    .showdown-ready-controls {
        top: auto;
        bottom: calc(100% + 8px);
    }

}
/* ==========================================
   POKERGHOST'S SHOWDOWN
   CHAMPIONSHIP FELT
========================================== */

.table-felt {
    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(255,255,255,.055) 0%,
            transparent 65%
        ),
        linear-gradient(
            90deg,
            #06366b 0%,
            #104d91 22%,
            #171b38 50%,
            #8c1834 78%,
            #a31425 100%
        );

    box-shadow:
        inset 0 0 0 2px rgba(220,230,255,.14),
        inset 0 0 45px rgba(0,0,0,.28),
        inset 0 0 95px rgba(0,0,0,.20),
        0 0 0 2px rgba(0,0,0,.35),
        0 14px 30px rgba(0,0,0,.35);
}
/* ==========================================
   POKERGHOST'S SHOWDOWN
   CHAMPIONSHIP RACETRACK
========================================== */

.table-rail {
    background:
    radial-gradient(
        ellipse at 18% 48%,
        rgba(15,65,130,.08),
        transparent 45%
    ),
    radial-gradient(
        ellipse at 82% 48%,
        rgba(130,15,40,.07),
        transparent 45%
    ),
    linear-gradient(
        180deg,
        #11141b 0%,
        #090b11 50%,
        #030407 100%
    );

    box-shadow:
        inset 0 0 0 2px rgba(195,210,230,.16),
        inset 0 0 28px rgba(0,0,0,.65),
        inset 0 -12px 28px rgba(0,0,0,.55),
        0 18px 42px rgba(0,0,0,.85);
}

/* Brushed silver inner trim */
.table-rail::after {
    border: 2px solid rgba(175,195,220,.32);

    box-shadow:
        0 0 7px rgba(75,145,255,.14),
        inset 0 0 8px rgba(255,255,255,.05);
}
/* ==========================================
   SHOWDOWN — ILLUMINATED FELT EDGE
========================================== */

.table-felt {
    box-shadow:
        /* Thin metallic silver felt outline */
        inset 0 0 0 2px rgba(190,205,225,.60),

        /* Gentle blue/red reflections */
        inset 3px 0 12px rgba(40,135,255,.22),
        inset -3px 0 12px rgba(255,45,80,.20),

        /* Depth inside the felt */
        inset 0 0 45px rgba(0,0,0,.25),
        inset 0 0 95px rgba(0,0,0,.16),

        /* Outside separation */
        0 0 0 2px rgba(0,0,0,.70),
        0 10px 26px rgba(0,0,0,.40);
}