/* {
  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/dirtydogslogo.png'),
    url('/upc/assets/tablelogo1.png'),
    url('/upc/game_tables/holdem/zonelogotrans.png'),
    url('/upc/game_tables/holdem/lamperttrans.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;
  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: 33%; left: 87%; }
.dealer-seat-3 { top: 61%; left: 87%; }
.dealer-seat-4 { top: 64%; left: 77%; }

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

.dealer-seat-6 { top: 64%; left: 26%; }
.dealer-seat-7 { top: 61%; left: 10%; }
.dealer-seat-8 { top: 31%; left: 10%; }
.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;
}
.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;
}


/* 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;
}



.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;
}

/* ===============================
   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,.75);

  box-shadow:

    0 0 10px rgba(63,169,245,.45),

    0 0 20px rgba(63,169,245,.18),

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

    inset 0 -8px 14px rgba(0,0,0,.35);
}

.seat.turn{

  box-shadow:

    0 0 18px rgba(63,169,245,.8),

    0 0 40px rgba(63,169,245,.5);
}
.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{

  width:140px;
  display:block;

  margin:0 auto 10px auto;

  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;
}


/* =========================================
   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;
}






/* =========================================
   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:-9px;
    left:50%;

    transform:translateX(-50%);

    padding:2px 10px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #f4d487,
            #bb8d2f
        );

    color:#111;

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

    letter-spacing:.08em;

    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/assets/tablelogo1.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);
}

.seat-content{
    gap:3px;
    padding:2px;
}

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

.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);
}

/* =====================================
   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 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;
  }

  /* chat gets tucked away for now */
  .chat-drawer,
  .chat-open-btn{
    display:none !important;
  }

  /* =====================================
   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;
}
.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:170px;

    max-height:40px;

    object-fit:contain;

}