/* /var/www/Poker/frontend/poker.css
   Production table-locked layout (pro casino baseline)
*/

:root{
  /* Theme */
  --bg0:#070a12;
  --text:#e9eef2;
  --muted:#9aa6b2;
  --border:rgba(255,255,255,.10);

  /* Assets */
  --table-img: url("./assets/PokerTable.png");
  --kaspa-logo: url("./assets/KaspaLogo.png");
  --card-back: url("./Cards/Back.png");
  --sb-img: url("./Blinds/SB.png");
  --bb-img: url("./Blinds/BB.png");
  --dealer-img: url("./Blinds/Dealer.png");

  /* Design stage */
  --stage-w: 1920px;
  --stage-h: 1080px;
  --kasplay-nav-h: 64px;

  /* Card sizing */
  --board-w: 126px;
  --board-h: 180px;
  --hand-w: 86px;
  --hand-h: 124px;
  --peek: 50px;

  /* Seat pills */
  --seat-w: 220px;
  --seat-h: 62px;

  /* Chips */
  /* IMPORTANT: if chipsAnim uses big chips, this MUST be big too or you’ll clip */
  --chip-size: 64px;
  --chip-gap: 2px;

  /* 3 cols grid width */
  --chip-grid-w: calc((var(--chip-size) * 3) + (var(--chip-gap) * 2));
  /* 3 rows (main pot + bet zones) */
  --chip-grid-h-3: calc((var(--chip-size) * 3) + (var(--chip-gap) * 2));
  /* 2 rows (side pots) */
  --chip-grid-h-2: calc((var(--chip-size) * 2) + (var(--chip-gap) * 1));

  /* Zones */
  --bet-w: 340px;
  --bet-h: 200px;

  --pot-w: 300px;
  --pot-h: 260px;

  /* Tiny side pots left/right of main pot */
  --sidepot-w: 240px;
  --sidepot-h: 190px;

  /* Anchors */
  --pot-x: 0.50;
  --pot-y: 0.58; /* moved UP a bit */

  /* Side pots sit left/right of main pot */
  --sidepot-gap: 18px;

  /* Bet zone anchors */
  --bz1-x: 0.35; --bz1-y: 0.28;
  --bz2-x: 0.65; --bz2-y: 0.28;

  --bz3-x: 0.80; --bz3-y: 0.45;
  --bz4-x: 0.70; --bz4-y: 0.69;
  --bz5-x: 0.30; --bz5-y: 0.70;  /* tiny nudge to center bottom chips better */
  --bz6-x: 0.20; --bz6-y: 0.45;

  /* Blind badge */
  --blind-size: 44px;
  --blind-shadow: 0 14px 28px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: url("/assets/kaspa_carpet.png") center center / cover no-repeat fixed #000;
  color:var(--text);
  overflow:hidden;
}

/* Stage scaling wrapper */
#viewport{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

#stage{
  width: var(--stage-w);
  height: var(--stage-h);
  position: absolute;
  left: 50%;
  top: var(--kasplay-nav-h);
  transform-origin: top center;
  transform: translateX(-50%) translateZ(0) scale(var(--stage-scale, 1));
}

/* App container */
.app{ height:100%; display:flex; flex-direction:column; }

/* Topbar */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
}
.brand{ font-weight:700; letter-spacing:.2px; }
.status{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  background:rgba(255,255,255,.03);
}

/* Table wrapper */
.tableWrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  position:relative;
}

/* Table container */
.table{
  width: 1680px;
  aspect-ratio: 3 / 2;
  position:relative;
  overflow:visible;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.55));
  isolation: isolate;
}

/* Table art */
.table::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--table-img) no-repeat center / contain;
  z-index: 5;
  pointer-events:none;
}

/* Logo overlay */
.table::after{
  content:"";
  position:absolute;
  left: 150px;
  bottom: 220px;
  width: 500px;
  height: 500px;
  background: var(--kaspa-logo) no-repeat center / contain;
  opacity: 0.92;
  pointer-events:none;
  z-index: 12;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* Felt wrapper neutral */
.felt{
  position:absolute;
  inset:0;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  z-index:auto;
}
.felt::before,
.felt::after{ content:none !important; display:none !important; }

/* Board cards */
.cards.boardCards{
  position:absolute;
  left:50%;
  top:38%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:12px;
  z-index: 60;
  pointer-events:none;
}
.cards.boardCards .card{
  width:var(--board-w);
  height:var(--board-h);
  border-radius: 12px;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
}
.cards.boardCards .card.back{
  background-image: var(--card-back);
  background-size: cover;
}

/* Table surface overlays */
#tableSurface{
  position:absolute;
  inset:0;
  z-index: 35;
  pointer-events:none;
}

/* ─────────────────────────────
   CHIP BAYS (NO CLIPPING)
───────────────────────────── */

/* MAIN POT + BET ZONES use 3 rows */
#potChips,
.betZone .chipRow{
  width: var(--chip-grid-w);
  height: var(--chip-grid-h-3);

  display: grid;
  grid-template-columns: repeat(3, var(--chip-size));
  grid-template-rows: repeat(3, var(--chip-size));
  gap: var(--chip-gap);

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

  overflow: visible;
  position: relative;
}

/* SIDE POTS use 2 rows (6 chips max) */
#sidePots .chipRow{
  width: var(--chip-grid-w);
  height: var(--chip-grid-h-2);

  display: grid;
  grid-template-columns: repeat(3, var(--chip-size));
  grid-template-rows: repeat(2, var(--chip-size));
  gap: var(--chip-gap);

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

  overflow: visible;
  position: relative;
}

.chipRow img.chip,
#potChips img.chip,
#sidePots img.chip{
  width: var(--chip-size);
  height: var(--chip-size);
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* POT ZONE */
#potZone{
  position:absolute;
  left: calc(var(--pot-x) * 100%);
  top:  calc(var(--pot-y) * 100%);
  transform: translate(-50%, -50%);
  width: var(--pot-w);
  height: var(--pot-h);
  border-radius: 18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:12px 12px 12px;
  overflow: visible;
}

#potText{
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;

  font-weight: 1000;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(233,238,242,.95);
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
  white-space: nowrap;
  width: auto;
  margin: 0;
  text-align: center;
}


#potValue{
  display: none !important;
}


#potChips{
  margin-top: 4px;
  justify-content: center;
  align-content: center;
}

/* ─────────────────────────────
   SIDE POTS (ONLY 2)
───────────────────────────── */
#sidePots{
  position:absolute;
  left: calc(var(--pot-x) * 100%);
  top:  calc(var(--pot-y) * 100%);
  transform: translate(-50%, -50%);
  width: 1px;
  height: 1px;
  z-index: 37;
  pointer-events:none;
}

/* plate */
#sidePots .sidePot{
  position:absolute;
  top: 0;
  width: var(--sidepot-w);
  height: var(--sidepot-h);
  border-radius: 14px;

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

  padding:10px 10px 10px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

/* Side 1 LEFT */
#sidePots .sidePot:nth-of-type(1){
  left: calc(
    -1 * (
      (var(--pot-w) / 2) +
      var(--sidepot-gap) +
      (var(--sidepot-w) / 2)
    )
  );
}

/* Side 2 RIGHT */
#sidePots .sidePot:nth-of-type(2){
  left: calc(
    (var(--pot-w) / 2) +
    var(--sidepot-gap) +
    (var(--sidepot-w) / 2)
  );
}

/* Hide any accidental 3+ zones */
#sidePots .sidePot:nth-of-type(n+3){
  display:none !important;
}

/* remove Side labels, keep amount */
#sidePots .sidePotLabel{ display:none !important; }

#sidePots .sidePotAmt{
  font-weight:1000;
  font-size:13px;
  margin-top:2px;
  margin-bottom:8px;
  color: rgba(233,238,242,.95);
  text-align:center;
  width:100%;
}

/* ─────────────────────────────
   BET ZONES
───────────────────────────── */
#betZones{ position:absolute; inset:0; }

.betZone{
  position:absolute;
  width: var(--bet-w);
  height: var(--bet-h);
  border-radius: 18px;

  background: transparent;
  border: 0;
  box-shadow: none;

  overflow: visible;

  transform: translate(-50%, -50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  padding:14px 10px 10px;
}

/* baseline chip placement (leave room for betAmt at top) */
.betZone .chipRow{ margin-top: 52px; }

/* bet zone anchors */
.betZone[data-seat="1"]{ left: calc(var(--bz1-x) * 100%); top: calc(var(--bz1-y) * 100%); }
.betZone[data-seat="2"]{ left: calc(var(--bz2-x) * 100%); top: calc(var(--bz2-y) * 100%); }
.betZone[data-seat="3"]{ left: calc(var(--bz3-x) * 100%); top: calc(var(--bz3-y) * 100%); }
.betZone[data-seat="4"]{ left: calc(var(--bz4-x) * 100%); top: calc(var(--bz4-y) * 100%); }
.betZone[data-seat="5"]{ left: calc(var(--bz5-x) * 100%); top: calc(var(--bz5-y) * 100%); }
.betZone[data-seat="6"]{ left: calc(var(--bz6-x) * 100%); top: calc(var(--bz6-y) * 100%); }

/* ─────────────────────────────────────────────
   BET AMOUNT TEXT
───────────────────────────────────────────── */
.betZone .betAmt{
  position:absolute;
  left:50%;
  transform:translateX(-50%);

  /* default position for non-top seats */
  bottom: 10px;
  top: auto;

  display:none;                 /* JS should enable only when > 0 */
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;

  text-shadow: 0 2px 8px rgba(0,0,0,.65);
  color: rgba(233,238,242,.95);
  font-weight: 1000;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: .2px;
  white-space: nowrap;
  pointer-events:none;
  text-align:center;

  z-index: 90;                  /* MUST sit above chips */
}

.betZone .betAmt:empty{ display:none !important; }
.betZone .betAmt::before{ content:none !important; display:none !important; }
.betZone .betAmt *{ display:inline !important; margin:0 !important; padding:0 !important; }

/* ─────────────────────────────────────────────
   TOP BET ZONES (seats 1 & 2)
───────────────────────────────────────────── */
.betZone[data-seat="1"],
.betZone[data-seat="2"]{
  height: 150px;                 /* tune 140–170 */
  transform: translate(-50%, 0); /* top-anchored */
}

.betZone[data-seat="1"]{
  top: calc((var(--bz1-y) * 100%) - (var(--bet-h) / 2));
}
.betZone[data-seat="2"]{
  top: calc((var(--bz2-y) * 100%) - (var(--bet-h) / 2));
}

.betZone[data-seat="1"] .betAmt,
.betZone[data-seat="2"] .betAmt{
  top: -14px;                    /* tune -24px to -6px */
  bottom: auto;
}

.betZone[data-seat="1"] .chipRow,
.betZone[data-seat="2"] .chipRow{
  margin-top: 40px;              /* tune 32–48 */
  height: auto;
  grid-template-rows: none;
  grid-auto-rows: var(--chip-size);
  align-content: start;
}

/* blind icons inside bet zones */
.betZone .blindIcon{
  position:absolute;
  left: 10px;
  top: 10px;
  width: var(--blind-size);
  height: var(--blind-size);
  display:none;
  pointer-events:none;
  filter: drop-shadow(var(--blind-shadow));
  z-index: 5;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.betZone .blindIcon.sb{ background-image: var(--sb-img); }
.betZone .blindIcon.bb{ background-image: var(--bb-img); }
.betZone .blindIcon.btn{ background-image: var(--dealer-img); }
.betZone.sb .blindIcon.sb { display:block; }
.betZone.bb .blindIcon.bb { display:block; }
.betZone.btn .blindIcon.btn { display:block; }


/* --- Per-seat blind/dealer position (ALL icons share same coords) --- */

/* Seat 6: push ALL blind/dealer icons right */
.betZone[data-seat="6"] .blindIcon{
  left: 34px;
  top: 10px;
}

/* Seat 3: mirror — keep away from the hole cards */
.betZone[data-seat="3"] .blindIcon{
  left: auto;
  right: 52px;  /* was 46px; increase = move LEFT (away from cards) */
  top: 10px;
}





/* SEATS */
/* Media query for mobile screens (max-width: 768px) */
@media (max-width: 768px) {
  .seat {
    position: absolute;
    width: var(--seat-w);
    height: var(--seat-h);
    border-radius: 999px;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    overflow: visible;
    z-index: 80;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  /* Center the seats horizontally */
  .seat.s1,
  .seat.s2,
  .seat.s3,
  .seat.s4,
  .seat.s5,
  .seat.s6 {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  /* Adjust vertical spacing if necessary */
  .seat.s1 {
    top: 15%;
  }
  .seat.s2 {
    top: 25%;
  }
  .seat.s3 {
    top: 35%;
  }
  .seat.s4 {
    top: 55%;
  }
  .seat.s5 {
    top: 65%;
  }
  .seat.s6 {
    top: 45%;
  }
}
.seat{
  position:absolute;
  width: var(--seat-w);
  height: var(--seat-h);
  border-radius: 999px;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  overflow:visible;
  z-index: 80;
  pointer-events:auto;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.seat::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: rgba(10,14,22,.68);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  z-index: 0;
}
.seatInner, .seatTop{
  position:relative;
  z-index:10;
  width:100%;
  height:100%;
  display:flex !important;
  align-items:center;
  justify-content:center;
}

/* show stacks, hide player names */
.seat .name,
.seat [id$="Name"]{ display:none !important; }
.seat .stack,
.seat [id$="Stack"]{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  width:100%;
  text-align:center !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  font-weight:900;
  color:rgba(233,238,242,.95);
}

/* remove sit down */
.seatCta,
.seat .seatCta,
.seat .cta,
.seat .sitDown,
.seat .sitdown{ display:none !important; }

/* empty seat styling */
.seat.empty{ opacity:.82; }
.seat.empty .stack,
.seat.empty [id$="Stack"]{
  font-size:12px;
  font-weight:800;
  color: rgba(233,238,242,.70);
}

/* seat anchors */
.seat.s1{ left: 35%; top: 12.9%; transform: translate(-50%, -50%); }
.seat.s2{ left: 65%; top: 7.3%; transform: translate(-50%, -50%); }
.seat.s3{ left: 93%; top: 35%;   transform: translate(-50%, -50%); }
.seat.s4{ left: 65%; top: 63%; transform: translate(-50%, -50%); }
.seat.s5{ left: 35%; top: 57.5%; transform: translate(-50%, -50%); }
.seat.s6{ left: 6.5%; top: 18%;  transform: translate(-50%, -50%); }

/* Turn glow */
.seat.isToAct{ position:relative; isolation:isolate; }
.seat.isToAct::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.26),
    0 0 16px rgba(120,255,170,0.70),
    0 0 34px rgba(120,255,170,0.35);
  animation: seatTurnPulse 0.95s ease-in-out infinite;
}
@keyframes seatTurnPulse{
  0%,100%{ opacity:0.28; }
  50%    { opacity:1.00; }
}

/* Hole cards */
.hole{
  position:absolute;
  display:flex;
  gap:10px;
  z-index: 120;
  width: calc((var(--hand-w) * 2) + 10px);
  height: var(--peek);
  overflow: hidden;
  pointer-events:none;
}
.miniCard{
  width:var(--hand-w);
  height:var(--hand-h);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.miniCard.back{ background-image: var(--card-back); }

/* hide "ghost" placeholders when cardsUI marks a miniCard as empty */

/* folded viewer cards: keep visible but greyed out */
.miniCard.foldedGrey{
  filter: grayscale(1) brightness(.55);
  opacity: .55 !important;
}

.miniCard.empty{
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  opacity: 0 !important;
}


.seat .hole{
  left:50%;
  bottom: calc(100% + 1px);
  transform: translateX(-50%);
}
.seat.empty .hole{ display:none !important; }

/* ─────────────────────────────────────────────
   CONTROLS BAR
────────────────────────────────────────────── */
.controls{
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;

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

  pointer-events: none;
}

.controlsLeft{
  display: flex;
  gap: 12px;
  align-items: center;
  pointer-events: auto;
}

.controlsMid{
  pointer-events: none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}


/* Buttons */
.controls button{
  height: 46px;
  min-width: 112px;
  padding: 0 16px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);

  color: rgba(233,238,242,.95);
  font-weight: 800;
  letter-spacing: .2px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.controls button:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

.controls button:disabled{
  opacity: .45;
  cursor: default;
}

.controls button.accent{
  background: rgba(0,180,255,.16);
  border-color: rgba(0,180,255,.40);
}
.controls button.danger{
  background: rgba(255,70,70,.16);
  border-color: rgba(255,70,70,.42);
}
.controls button.ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}






/* Center timer (global) */
.timerBar{
  width: 360px;
  max-width: 42vw;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
}
.timerFill{
  width: 120%;
  height: 120%;
  transform-origin: left center;
  transform: scaleX(1);
  background: rgba(0, 200, 255, 0.85);
}

/* ─────────────────────────────────────────────
   HARD OVERRIDE vs legacy poker.table.css
───────────────────────────────────────────── */

/* Force top bet-zone anchors even if legacy #betZone0/#betZone1 exists */
#tableSurface #betZone0{
  left: calc(var(--bz1-x) * 100%);
  top:  calc(var(--bz1-y) * 100%);
}
#tableSurface #betZone1{
  left: calc(var(--bz2-x) * 100%);
  top:  calc(var(--bz2-y) * 100%);
}

/* Seat 1/2 bet amount HIGH */
#tableSurface .betZone[data-seat="1"] .betAmt,
#tableSurface .betZone[data-seat="2"] .betAmt,
#tableSurface #betZone0 .betAmt,
#tableSurface #betZone1 .betAmt{
  top: 6px;          /* tune 0–14px */
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  white-space: nowrap;
}

/* Push top-seat chips DOWN */
#tableSurface .betZone[data-seat="1"] .chipRow,
#tableSurface .betZone[data-seat="2"] .chipRow,
#tableSurface #betZone0 .chipRow,
#tableSurface #betZone1 .chipRow{
  margin-top: 44px;  /* tune 34–54px */
}

/* Responsive tuning */
@media (max-width: 1200px){
  :root{
    --seat-w: 210px;
    --seat-h: 60px;

    --hand-w: 82px;
    --hand-h: 118px;
    --board-w: 120px;
    --board-h: 172px;

    --chip-size: 58px;
    --chip-gap: 7px;

    --bet-w: 320px;
    --bet-h: 190px;

    --pot-w: 280px;
    --pot-h: 240px;

    --sidepot-w: 230px;
    --sidepot-h: 180px;
  }
}

@media (max-width: 1100px){
  nav.nav{ display:none !important; }
  #global-nav{ display:none !important; }
  #viewport{ padding-top: 0 !important; }

  :root{ --kasplay-nav-h: 0px !important; }
  #stage{ top: 0 !important; }

  .topbar{ display:none !important; }
  .table::after{ display:none !important; }

  :root{
    --chip-size: 52px;
    --chip-gap: 6px;

    --bet-w: 300px;
    --bet-h: 180px;

    --pot-w: 260px;
    --pot-h: 220px;

    --sidepot-w: 220px;
    --sidepot-h: 170px;
  }

  .controlsRight{
    grid-template-columns: repeat(2, max-content);
  }
}

/* ─────────────────────────────────────────────
   Turn indicators (everyone sees): seat glow + timer bar
   Created by wireHandlers.js (applyTurnIndicatorsFromSnap)
   DOM: .seat.isToAct + .seatTimerBar > .seatTimerFill
───────────────────────────────────────────── */

/* ✅ Timer is invisible by default */
.seat .seatTimerBar,
.seat .seatTimer{
  display: none !important;
}

/* ✅ Only show timer on the active seat */
.seat.isToAct .seatTimerBar,
.seat.isToAct .seatTimer{
  display: block !important;
}

.seatTimerBar,
.seatTimer{
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
  pointer-events: none;
  z-index: 250; /* IMPORTANT: above seatInner and overlays */
}

.seatTimerFill{
  width: 120%;
  height: 120%;
  transform-origin: left center;
  transform: scaleX(1);
  background: rgba(0, 200, 255, 0.95);
}

.seat.turnUrgent .seatTimerFill{
  background: rgba(255, 80, 80, 0.95);
}
/* Sit Down overlay button (only shown when eligible) */
.seat,
.playerSeat {
  position: relative; /* safe: enables absolute children */
}

.sitDownBtn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;

  display: none;              /* JS toggles this */
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.sitDownBtn:hover { filter: brightness(1.1); }
.sitDownBtn:active { transform: translate(-50%, -50%) scale(0.98); }

.sitDownBtn[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}


/* ─────────────────────────────────────────────
   Seat CTA: ONLY style the real "Sit down" button
   (prevents styling injected/debug buttons)
   ───────────────────────────────────────────── */
.seat .seatCta{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #16a34a;          /* solid green */
  color: #fff;
  opacity: 1;

  border: 1px solid #22c55e;
  border-radius: 999px;

  padding: 10px 16px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;

  box-shadow: 0 12px 28px rgba(0,0,0,.55),
              0 0 0 2px rgba(34,197,94,.25);

  cursor: pointer;
  z-index: 50;
}

/* hover/press feedback */
.seat .seatCta:hover{
  filter: brightness(1.08) saturate(1.05);
}
.seat .seatCta:active{
  transform: translateY(1px);
}





/* ─────────────────────────────────────────────
   ONE Seat CTA only: show .seatCta, hide any other injected seat buttons
   ───────────────────────────────────────────── */

/* Hide any extra seat buttons that are NOT the real seatCta */
.seat button:not(.seatCta){
  display: none !important;
}

/* Force the real CTA visible + make it solid green */
.seat .seatCta{
  display: none; /* js controls visibility */
  align-items: center;
  justify-content: center;

  background: #16a34a !important;
  color: #ffffff !important;
  opacity: 1 !important;

  border: 1px solid #22c55e !important;
  border-radius: 999px !important;

  padding: 10px 16px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;

  box-shadow: 0 12px 28px rgba(0,0,0,.55),
              0 0 0 2px rgba(34,197,94,.25) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  cursor: pointer;
  z-index: 50 !important;
}

.seat .seatCta:hover{ filter: brightness(1.08) saturate(1.05); }
.seat .seatCta:active{ transform: translateY(1px); }

/* ─────────────────────────────────────────────
   Seat CTA: ONE button only + make it solid green
   ───────────────────────────────────────────── */

/* If seatButtons.js injected another <button>, hide any extra buttons in a seat */
.seat .seatInner button + button{
  display: none !important;
}

/* Style ONLY the real seat CTA */
.seat .seatCta{
  display: none; /* js controls visibility */
  align-items: center;
  justify-content: center;

  background: #16a34a !important;
  color: #ffffff !important;
  opacity: 1 !important;

  border: 1px solid #22c55e !important;
  border-radius: 999px !important;

  padding: 10px 16px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;

  box-shadow: 0 12px 28px rgba(0,0,0,.55),
              0 0 0 2px rgba(34,197,94,.25) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  cursor: pointer;
  z-index: 50 !important;
}

.seat .seatCta:hover{ filter: brightness(1.08) saturate(1.05); }
.seat .seatCta:active{ transform: translateY(1px); }

/* =========================================================
   HARD GATE: Sit buttons must ONLY show when verified AND not seated
   (seatButtons.js toggles body.isVerified + body.hasSeat)
   ========================================================= */

/* Not verified -> hide any sit CTA buttons */
body:not(.isVerified) .seat .seatCta,
body:not(.isVerified) .seatCta,
body:not(.isVerified) .seat .seatSitBtnWrap,
body:not(.isVerified) .seatSitBtnWrap {
  display: none !important;
}

/* Already seated -> hide any sit CTA buttons */
body.hasSeat .seat .seatCta,
body.hasSeat .seatCta,
body.hasSeat .seat .seatSitBtnWrap,
body.hasSeat .seatSitBtnWrap {
  display: none !important;
}
/* ─────────────────────────────────────────────
   Controls: ALWAYS pinned to viewport (not scaled)
   Action bar ALWAYS bottom-right
   ───────────────────────────────────────────── */

.controls{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;

  /* iPhone safe area */
  padding-bottom: env(safe-area-inset-bottom, 0px);

  z-index: 1000000;

  display: flex;
  align-items: flex-end;
  gap: 12px;

  pointer-events: none; /* let only children receive clicks */
}

.controlsLeft,
.controlsMid,
.controlsRight{
  pointer-events: auto;
}

/* Push action area to bottom-right */
.controlsRight{
  margin-left: auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;        /* phones can wrap buttons instead of going off-screen */
  justify-content: flex-end;
  max-width: min(520px, 92vw);
}

/* Optional: keep left side from colliding too hard on small screens */
.controlsLeft{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  max-width: 50vw;
}

.controlsMid{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 160px;
}

/* If you have a global nav that overlays, this guarantees we sit ABOVE it */
#global-nav, .global-nav, .nav, .navbar{
  z-index: 999999; /* lower than controls */
}
/* ─────────────────────────────────────────────
   Action bar: put Fold left of Check/Call
   Timer stays on its own row above buttons
   ───────────────────────────────────────────── */
.controlsRight{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}


:root{
  --action-btn-w: 128px; /* tweak until perfect */
  --action-gap: 12px;
}

.controlsRight #foldBtn,
.controlsRight #checkBtn,
.controlsRight #betBtn{
  width: var(--action-btn-w);
}

/* Action timer: same width as the 3 buttons row, centered */
.controlsRight #actionTimer{
  flex: 0 0 100%;           /* force its own row */
  order: 0;

  width: 120%;
  max-width: calc((var(--action-btn-w) * 3) + (var(--action-gap) * 2));
  margin-left: auto;
  margin-right: 0;
  padding: 0 !important;



  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45) inset;
}

.controlsRight #actionTimerFill{
  height: 120%;
  transform-origin: left center;

  background: linear-gradient(90deg,
    rgba(0, 200, 255, 0.95),
    rgba(0, 255, 170, 0.95)
  );

  box-shadow: 0 0 12px rgba(0, 220, 255, 0.35);
}


/* Button order: Fold, Check/Call, (All-in if shown), Bet/Raise */
.controlsRight #foldBtn{
  order: 1;
  margin-left: 0 !important;   /* kills any “push to the right” rules */
}

.controlsRight #checkBtn{ order: 2; }
.controlsRight #allInBtn{ order: 3; }
.controlsRight #betBtn{  order: 4; }

/* === Stickers v1 === */
.seatStickerBtn{
  display: none !important;
  pointer-events: none !important;

  position:absolute;
  right:6px;
  top:6px;
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  padding:0;
}
.seatStickerBtn:hover{
  transform: translateY(-1px);
}

.stickerPopover{
  position:fixed;
  z-index:9999;
  width:240px;
  max-width:70vw;
  background:#fff;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.22);
  padding:10px;
}
.stickerPopover.hidden{
  display:none;
}
.stickerPopTitle{
  font-weight:700;
  font-size:13px;
  margin:0 0 8px 0;
}
.stickerGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.stickerItem{
  border:1px solid rgba(0,0,0,0.12);
  border-radius:10px;
  padding:8px 6px;
  cursor:pointer;
  user-select:none;
  background: rgba(250,250,250,1);
}
.stickerItem:hover{
  transform: translateY(-1px);
}
.stickerItemName{
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stickerItemMeta{
  font-size:10px;
  opacity:0.75;
  margin-top:2px;
}

.stickerFx{
  position:absolute;
  right:6px;
  bottom:6px;
  padding:6px 8px;
  border-radius:10px;
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.15);
  font-size:12px;
  font-weight:800;
  animation: stickerFxPop 1.35s ease forwards;
  pointer-events:none;
}
@keyframes stickerFxPop{
  0%{ transform: translateY(10px) scale(0.95); opacity:0; }
  15%{ transform: translateY(0px) scale(1.02); opacity:1; }
  70%{ transform: translateY(0px) scale(1.0); opacity:1; }
  100%{ transform: translateY(-10px) scale(0.98); opacity:0; }
}


/* === Chat button: bottom-middle === */
.chatBtnMid{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;

  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;

  background-image: url("./assets/PokerComButton.png?v=3");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  cursor: pointer;
  z-index: -1;
  pointer-events: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
.chatBtnMid:hover{
  transform: translateX(-50%) translateY(-1px);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.62));
}
.chatBtnMid:active{
  transform: translateX(-50%) scale(0.98);
}


/* --- HARD KILL: hide sticker seat emoji buttons entirely --- */
.stickerSeatBtn{
  display:none !important;
  pointer-events:none !important;
}
.stickerPopover{
  display:none !important;
}

/* --- Action bar: hidden unless it's your turn --- */
#actionBar{
  display: none !important;
}
/* --- Action bar: SHOW only on my turn (actionBarUI toggles body.myTurn) --- */
body.myTurn #actionBar{
  display: flex !important;
    background: rgba(0,0,0,.84) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px !important;
    padding: 12px 14px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  
}

/* --- AFK "I'm back" button (only shown when AFK) --- */
.imBackBtn{
  background: #17c964 !important;
  color: #071b10 !important;
  border: 1px solid rgba(0,0,0,0.35) !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(23,201,100,0.35) !important;
}
.imBackBtn:hover{ filter: brightness(1.05); }
.imBackBtn:active{ transform: translateY(1px); }


/* --- NAVBAR MODE: hide legacy topbar under #global-nav --- */
.topbar{
  display: none !important;
}

/* Reserve space for sticky navbar (prevents overlap) */
#viewport{
  padding-top: 74px; /* tweak to match your nav height */
}

/* ─────────────────────────────────────────────
   SHORT VIEWPORT: hide KasPlay navbar earlier
   so it never covers top-seat cards.
   ───────────────────────────────────────────── */
@media (max-height: 780px){
  /* hide the injected navbar */
  #global-nav,
  nav.nav{
    display: none !important;
  }

  /* remove reserved space for navbar */
  #viewport{
    padding-top: 0 !important;
  }

  /* stop stage from starting below navbar height */
  :root{
    --kasplay-nav-h: 0px !important;
  }
  #stage{
    top: 0 !important;
  }
}

/* ─────────────────────────────────────────────
   iOS SAFARI ONLY: stop phantom rectangle over table
   (does NOT change layout; only prevents backgrounds from painting)
   ───────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {

  /* Board container must never paint a fill */
  .cards.boardCards {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Board cards themselves must be transparent except their image */
  .cards.boardCards .card {
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Common overlay layers sometimes render as a solid block on iOS */
  #tableSurface,
  #betZones,
  #potZone,
  #sidePots {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* iOS bug with backdrop-filter turning into a solid slab */
  #tableSurface {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ===== Seat companion test ===== */
.seat.companion-anchor,
.player-seat.companion-anchor,
.seatwrap.companion-anchor{
  overflow: visible !important;
}

.seatCompanion{
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,0.35);

  position: absolute;
  width: 84px;
  height: 84px;
  left: -42px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 8;
}

.seatCompanion img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes companionFloat{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
  100%{ transform: translateY(0); }
}