@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Inter',sans-serif;background:#0d0a06;color:#3a2410;width:100vw;height:100vh;height:100dvh;}

.game-container{
  display:flex;flex-direction:column;height:100vh;height:100dvh;width:100%;
  max-width:480px;margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#e9d6a6 0%,#e0c88f 60%,#d8bd80 100%);
}

/* ── TOP BAR (dark wood) ── */
.top-bar{
  display:flex;align-items:center;gap:5px;
  padding:5px 8px;background:linear-gradient(180deg,#241606,#140c04);
  flex-shrink:0;border-bottom:1px solid rgba(0,0,0,0.5);height:44px;
}
.icon-btn{
  background:radial-gradient(circle at 50% 35%,#f5d169,#c8902c 70%,#a06a18);
  border:1.5px solid #7a4e12;
  border-radius:50%;width:30px;height:30px;color:#4a2c08;font-size:13px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.5);
}
.room-info{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden;}
.room-info > div{min-width:0;overflow:hidden;}
.room-badge{font-size:12px;flex-shrink:0;}
.room-name{font-size:11px;font-weight:700;color:#ffd24a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-id{font-size:9px;color:#8a7250;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-avatars{display:flex;align-items:center;margin-left:auto;flex-shrink:0;}
.top-avatar{width:20px;height:20px;border-radius:50%;background:#333;border:1px solid #6a4a20;font-size:11px;display:flex;align-items:center;justify-content:center;margin-left:-3px;}
.online-count{font-size:9px;color:#d8c08a;margin-left:3px;}

/* Layar HP sempit: sembunyikan avatar dekoratif + perkecil ikon agar tak menumpuk */
@media (max-width:560px){
  .top-avatars{display:none;}
  .icon-btn{width:27px;height:27px;font-size:12px;}
  .top-icons{gap:2px;}
  .top-bar{gap:4px;padding:5px 6px;}
}
.top-icons{display:flex;gap:3px;flex-shrink:0;}

/* ── TABLE AREA — wooden table ── */
.table-area{
  position:relative;flex-shrink:0;
  height:34vh;min-height:200px;max-height:260px;
  overflow:hidden;
  border-bottom:5px solid #3a2210;
}
/* Polished wood interior */
.table-area::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 125%, #8a5526 0%, #5a3414 45%, #341d0c 80%, #1f1106 100%);
  z-index:0;
}
/* Subtle felt sheen at bottom */
.table-area::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,transparent,rgba(255,180,90,0.5),transparent);
  z-index:1;
}

.table-bg{
  display:flex;align-items:flex-end;justify-content:space-between;
  width:100%;height:100%;padding:0 0 10px;position:relative;z-index:2;
}

/* ── CHARACTERS ── */
.character{
  display:flex;flex-direction:column;align-items:center;
  width:18vw;max-width:92px;min-width:0;flex-shrink:0;
  position:relative;padding-bottom:4px;
}
.char-emoji{
  font-size:clamp(48px,13vw,76px);
  line-height:1;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.8)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transition:filter 0.3s,transform 0.3s;
  transform-origin:bottom center;
}
.winner-glow .char-emoji{
  filter:drop-shadow(0 0 16px #ffd700) drop-shadow(0 0 32px #ff8800) drop-shadow(0 6px 16px rgba(0,0,0,0.8));
  animation:charWin 0.6s ease-in-out infinite alternate;
}
@keyframes charWin{from{transform:scale(1) translateY(0);}to{transform:scale(1.06) translateY(-4px);}}

/* Hole cards */
.char-hole-cards{
  display:flex;gap:0;margin-top:6px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.hole-card{
  width:clamp(28px,7.5vw,40px);height:clamp(40px,10.5vw,56px);
  border-radius:4px;border:2px solid rgba(255,255,255,0.95);
  background-color:#c41e2a;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,0.20) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.20) 75%),
    linear-gradient(45deg,rgba(255,255,255,0.20) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.20) 75%);
  background-size:10px 10px;background-position:0 0,5px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;transition:transform 0.3s;
}
.char-hole-cards .hole-card:first-child{transform:rotate(-8deg) translateX(4px);z-index:1;}
.char-hole-cards .hole-card:last-child{transform:rotate(8deg) translateX(-4px);z-index:2;}
.hole-card.revealed{background:#fff;}
.hole-card.revealed.red-card{color:#cc0000;}
.hole-card.revealed.black-card{color:#111;}
.c-rank{font-size:clamp(10px,2.8vw,15px);line-height:1;}
.c-suit-small{font-size:clamp(12px,3.2vw,18px);line-height:1;}

/* Hand label badge */
.hand-label{
  font-size:clamp(9px,2.5vw,13px);font-weight:800;
  background:linear-gradient(135deg,#d4a017,#f0c040);
  color:#000;padding:2px 8px;border-radius:10px;
  margin-top:4px;min-height:16px;white-space:nowrap;
  display:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
}
.hand-label.visible{display:block;}

/* ── COMMUNITY CARDS ── */
.community-area{
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:6px;flex:1;padding:0 4px 10px;
}
.community-cards{
  display:flex;gap:clamp(4px,1.2vw,8px);justify-content:center;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.6));
}
.comm-card{
  width:clamp(38px,10vw,54px);height:clamp(54px,14vw,76px);
  border-radius:6px;border:2.5px solid rgba(255,255,255,0.95);
  background:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-weight:800;
  box-shadow:0 4px 16px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.5);
}
.comm-card.back{
  background-color:#c41e2a;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,0.22) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.22) 75%),
    linear-gradient(45deg,rgba(255,255,255,0.22) 25%,transparent 25%,transparent 75%,rgba(255,255,255,0.22) 75%);
  background-size:14px 14px;background-position:0 0,7px 7px;
  border-color:rgba(255,255,255,0.85);
}
.comm-card .c-rank{font-size:clamp(15px,4vw,22px);}
.comm-card .c-suit{font-size:clamp(18px,5vw,26px);line-height:1;}
.comm-card.red-card{color:#cc0000;}
.comm-card.black-card{color:#111;}
.comm-card.revealed{animation:flipCard 0.35s ease-out;}
.comm-card.preview-card{box-shadow:0 0 12px rgba(255,200,60,0.95),0 4px 16px rgba(0,0,0,0.7);border-color:#ffd24a;}
@keyframes flipCard{from{transform:rotateY(90deg) scale(0.8);opacity:0;}to{transform:rotateY(0) scale(1);opacity:1;}}

.bonus-bar{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(90deg,rgba(0,0,0,0.85),rgba(50,20,0,0.95),rgba(0,0,0,0.85));
  border:1px solid rgba(255,180,0,0.55);border-radius:20px;
  padding:4px 14px;
}
.bonus-label{color:#ffd700;font-weight:700;font-size:10px;letter-spacing:1px;}
.bonus-amount{color:#ffd700;font-weight:800;font-size:clamp(14px,3.8vw,18px);font-family:'Bebas Neue',sans-serif;letter-spacing:1px;}
.bonus-coin{font-size:14px;}

/* ── COUNTDOWN ── */
.countdown-overlay{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(20,10,0,0.88);border:1.5px solid rgba(255,190,70,0.8);
  border-radius:20px;padding:4px 18px;text-align:center;z-index:10;
  display:none;backdrop-filter:blur(6px);
}
.countdown-overlay.show{display:block;}
.countdown-text{font-size:10px;color:#e8d3a0;}
.countdown-timer{font-size:clamp(15px,4vw,20px);font-weight:800;color:#ffd24a;}

/* ── BET ZONES (parchment) ── */
.bet-zones{
  flex:1;overflow-y:auto;
  background:linear-gradient(180deg,#e3c98c 0%,#d8bb78 100%);
  padding:6px;scrollbar-width:none;
}
.bet-zones::-webkit-scrollbar{display:none;}

.main-bets{display:grid;grid-template-columns:1fr 0.6fr 1fr;gap:5px;margin-bottom:5px;}

.bet-zone{
  background:linear-gradient(180deg,#f6e8c2 0%,#ecd6a0 55%,#e3c88c 100%);
  border:2px solid #bb8c4c;border-radius:9px;
  padding:6px 4px;text-align:center;cursor:pointer;
  position:relative;transition:transform 0.12s;
  user-select:none;-webkit-user-select:none;
  box-shadow:0 2px 5px rgba(60,30,0,0.28),inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -2px 6px rgba(150,100,40,0.25);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.bet-zone:active{transform:scale(0.93);}
/* Crown + WIN pada zona pemenang (saat hasil) */
.win-crown{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(255,180,40,0.28),transparent 70%);
  animation:resultPop 0.45s cubic-bezier(0.175,0.885,0.32,1.275);
}
.win-crown .crown{font-size:clamp(22px,6.5vw,34px);line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.55));animation:crownBounce 0.6s ease-in-out infinite alternate;}
.win-crown .wintxt{font-family:'Bebas Neue',sans-serif;font-weight:900;font-size:clamp(16px,5vw,24px);color:#fff;letter-spacing:1px;line-height:0.9;margin-top:1px;text-shadow:0 0 8px #ff9000,-1.5px -1.5px 0 #a84800,1.5px -1.5px 0 #a84800,-1.5px 1.5px 0 #a84800,1.5px 1.5px 0 #a84800;}
/* Zona yang Anda pasangi taruhan → garis cahaya */
.bet-zone.my-zone{box-shadow:0 0 0 2.5px #ff5a2a, 0 0 12px rgba(255,90,42,0.7), inset 0 1px 0 rgba(255,255,255,0.6);}
/* Tinggi seragam supaya semua kotak & dots sejajar */
.main-bets .bet-zone{min-height:96px;}

.zone-icon{font-size:clamp(20px,5.5vw,30px);line-height:1;}
.zone-label{font-weight:900;font-size:clamp(17px,4.8vw,24px);font-family:'Bebas Neue',sans-serif;letter-spacing:1px;}
.zone-label.red{color:#cc1f10;text-shadow:0 1px 0 rgba(255,255,255,0.4);}
.zone-label.blue{color:#1f5fd0;text-shadow:0 1px 0 rgba(255,255,255,0.4);}
.zone-label.gray{color:#6a512e;text-shadow:0 1px 0 rgba(255,255,255,0.4);}
.zone-mult{font-size:clamp(11px,3vw,14px);font-weight:800;color:#b1310f;}
.zone-name{font-size:clamp(9px,2.3vw,12px);font-weight:800;color:#6a4a24;line-height:1.3;}
/* Total taruhan ORANG LAIN — angka besar putih di atas zona */
.zone-total{
  position:absolute;top:1px;left:50%;transform:translateX(-50%);
  display:none;color:#fff;font-weight:800;line-height:1;
  font-size:clamp(15px,4.4vw,19px);
  text-shadow:-1.5px -1.5px 0 #7a4516,1.5px -1.5px 0 #7a4516,-1.5px 1.5px 0 #7a4516,1.5px 1.5px 0 #7a4516,0 2px 2px rgba(0,0,0,0.4);
  white-space:nowrap;z-index:6;pointer-events:none;
}
.zone-total.show{display:block;}
.zone-total.bump{animation:coinBump 0.35s ease;}
@keyframes coinBump{0%{transform:translateX(-50%) scale(1);}40%{transform:translateX(-50%) scale(1.25);}100%{transform:translateX(-50%) scale(1);}}
.coin-ico{width:14px;height:14px;object-fit:contain;display:inline-block;vertical-align:middle;}
/* Taruhan SENDIRI — koin menutupi dots (di bawah zona) */
.my-bet-badge{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  display:none;align-items:center;gap:3px;
  background:rgba(35,18,0,0.82);color:#ffd24a;font-size:11px;font-weight:800;line-height:1.4;
  padding:1px 8px;border-radius:11px;border:1px solid rgba(255,205,90,0.65);
  box-shadow:0 1px 5px rgba(0,0,0,0.55);white-space:nowrap;z-index:8;
}
.my-bet-badge.show{display:inline-flex;}

.side-bets-row{display:grid;grid-template-columns:1fr 1.45fr;gap:5px;}
.side-col{display:flex;flex-direction:column;gap:5px;}
.side-col-title{
  font-size:clamp(9px,2.3vw,11px);font-weight:800;color:#5a3c18;text-align:center;
  background:rgba(120,80,30,0.16);border-radius:5px;padding:4px 2px;line-height:1.3;
  min-height:34px;display:flex;align-items:center;justify-content:center;
}
.side-zone{padding:5px 4px;min-height:104px;justify-content:center;}
.pattern-row{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.half{min-height:104px;}

/* ── DOTS — green check / red cross ── */
.zone-dots{
  display:flex;flex-wrap:nowrap;gap:3px;justify-content:center;
  align-items:center;min-height:16px;margin-top:auto;padding-top:4px;overflow:hidden;
}
.dot{
  width:13px;height:13px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.dot-win{background:radial-gradient(circle at 50% 35%,#5fd873,#34b54c);border:1px solid #248a37;}
.dot-lose{background:radial-gradient(circle at 50% 35%,#f15a4a,#d8301f);border:1px solid #a8261a;}
/* white checkmark */
.dot-win::before{
  content:'';position:absolute;
  width:26%;height:52%;border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-8%) rotate(45deg);
}
/* white cross */
.dot-lose::before,.dot-lose::after{
  content:'';position:absolute;
  width:58%;height:2px;background:#fff;border-radius:1px;
}
.dot-lose::before{transform:rotate(45deg);}
.dot-lose::after{transform:rotate(-45deg);}
.zone-dots.small .dot{width:11px;height:11px;}
.never-out{font-size:10px;font-weight:800;color:#8a6638;white-space:nowrap;letter-spacing:0.3px;}
.dot-new{animation:slideInDot 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}
@keyframes slideInDot{from{transform:scale(0) translateX(8px);opacity:0;}to{transform:scale(1) translateX(0);opacity:1;}}

/* ── LEADERBOARD ── */
.leaderboard{
  display:flex;gap:6px;padding:4px 10px;
  background:linear-gradient(180deg,#241606,#160d04);flex-shrink:0;
  border-top:1px solid rgba(120,80,30,0.5);
  height:56px;align-items:center;overflow-x:auto;scrollbar-width:none;
}
.leaderboard::-webkit-scrollbar{display:none;}
.lb-item{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:46px;}
.lb-avatar{
  width:30px;height:30px;border-radius:50%;background:#3a2a18;
  border:2px solid #b58438;font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.lb-win{font-size:9px;font-weight:700;color:#5fd873;}

/* ── BOTTOM BAR ── */
.bottom-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 10px;background:linear-gradient(180deg,#2e1d0a,#160d04);flex-shrink:0;
  border-top:1px solid rgba(120,80,30,0.5);height:50px;
  padding-bottom:calc(5px + env(safe-area-inset-bottom, 0px));
  height:calc(50px + env(safe-area-inset-bottom, 0px));
}
.player-info{display:flex;align-items:center;gap:6px;}
.player-avatar{width:30px;height:30px;border-radius:50%;background:#3a2a18;border:2px solid #b58438;font-size:17px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.player-name{font-size:11px;font-weight:600;color:#e8d3a0;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.player-chips{font-size:clamp(12px,3.2vw,15px);font-weight:800;color:#ffd24a;}
.bet-buttons{display:flex;gap:5px;}
.bet-btn{
  background:linear-gradient(180deg,#3fd1ad,#1f9d82);
  border:1.5px solid rgba(255,255,255,0.25);border-radius:9px;color:#fff;
  font-size:clamp(13px,3.5vw,16px);font-weight:800;
  width:clamp(40px,10vw,52px);height:38px;
  cursor:pointer;transition:all 0.12s;
  box-shadow:0 3px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.bet-btn.active{
  background:linear-gradient(180deg,#6cf0cf,#23c79e);
  border-color:#fff;
  box-shadow:0 0 16px rgba(60,220,180,0.7),inset 0 1px 0 rgba(255,255,255,0.5);transform:translateY(-2px);
}
.bet-btn:active{transform:scale(0.88);}

/* ── VS INTRO (standby sebelum ronde) ── */
.vs-overlay{
  position:absolute;inset:0;z-index:60;overflow:hidden;
  display:none;align-items:center;justify-content:center;pointer-events:none;
}
.vs-overlay.show{display:flex;}
.vs-overlay.fade{animation:vsFade 0.45s ease forwards;}
@keyframes vsFade{to{opacity:0;}}
.vs-side{position:absolute;top:0;bottom:0;width:62%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.vs-cowboy{left:0;background:linear-gradient(90deg,rgba(190,40,22,0.95) 30%,rgba(190,40,22,0) 100%);transform:translateX(-105%);}
.vs-bull{right:0;background:linear-gradient(270deg,rgba(28,86,200,0.95) 30%,rgba(28,86,200,0) 100%);transform:translateX(105%);}
.vs-overlay.show .vs-cowboy{animation:vsInL 0.5s cubic-bezier(0.2,0.8,0.3,1) forwards;}
.vs-overlay.show .vs-bull{animation:vsInR 0.5s cubic-bezier(0.2,0.8,0.3,1) forwards;}
@keyframes vsInL{to{transform:translateX(0);}}
@keyframes vsInR{to{transform:translateX(0);}}
.vs-emoji{font-size:clamp(56px,17vw,104px);line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.6));}
.vs-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(26px,8vw,46px);font-weight:900;color:#fff;letter-spacing:2px;text-shadow:0 2px 6px rgba(0,0,0,0.7);}
.vs-text{
  position:relative;z-index:2;font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,15vw,86px);font-weight:900;color:#ffd24a;
  text-shadow:0 0 20px #ff8000,0 4px 0 #8a3000,-2px -2px 0 #8a3000,2px 2px 0 #8a3000,-2px 2px 0 #8a3000,2px -2px 0 #8a3000;
  transform:scale(0);
}
.vs-overlay.show .vs-text{animation:vsPop 0.45s 0.32s cubic-bezier(0.175,0.885,0.32,1.275) forwards;}
@keyframes vsPop{to{transform:scale(1);}}

/* ── RESULT OVERLAY ── */
.result-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:50;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.result-winner{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(42px,12vw,62px);
  text-align:center;padding:0 10px;
  text-shadow:0 0 30px currentColor,-2px -2px 0 #000,2px 2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000;
  animation:resultPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes resultPop{from{transform:scale(0) rotate(-5deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}

/* ── WIN POPUP ── */
.win-popup{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);
}
.win-content{
  text-align:center;position:relative;
  animation:popIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes popIn{from{transform:scale(0) rotate(-10deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}

.win-crown-anim{
  font-size:70px;display:block;
  animation:crownBounce 0.5s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 20px #ffd700);
}
@keyframes crownBounce{from{transform:translateY(0) rotate(-5deg);}to{transform:translateY(-12px) rotate(5deg);}}

.win-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(64px,18vw,88px);
  color:#ffd700;
  text-shadow:0 0 30px #ff8800,0 0 60px #ff4400,0 4px 0 #8B4513;
  letter-spacing:6px;line-height:0.9;
}
.win-amount{
  font-size:clamp(32px,9vw,48px);font-weight:800;
  color:#00ff88;
  text-shadow:0 0 20px #00ff88,0 0 40px #00cc66;
  margin-top:4px;
}
.win-zone-label{font-size:14px;color:#ffd700;margin-top:6px;opacity:0.8;}

/* Coins rain */
.coins-container{
  position:fixed;top:0;left:0;right:0;bottom:0;
  pointer-events:none;z-index:299;overflow:hidden;
}
.rain-coin{
  position:absolute;font-size:24px;
  animation:rainDown 1.2s ease-in forwards;
}
@keyframes rainDown{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1;}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0;}
}

/* Flying coin on bet */
.flying-coin{
  position:fixed;z-index:200;font-size:20px;pointer-events:none;
  animation:flyUp 0.8s ease-out forwards;
}
@keyframes flyUp{0%{transform:translateY(0) scale(1);opacity:1;}100%{transform:translateY(-80px) scale(0.2);opacity:0;}}

/* ── CHAT ── */
.chat-panel{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:400;
  background:rgba(20,12,4,0.96);border-top:1px solid rgba(255,180,0,0.3);
  display:none;flex-direction:column;
  border-radius:16px 16px 0 0;
  max-height:60vh;
}
.chat-panel.open{display:flex;}
.chat-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.1);
  font-size:14px;font-weight:700;color:#ffd24a;flex-shrink:0;
}
.chat-header button{background:none;border:none;color:#888;font-size:18px;cursor:pointer;}
.chat-messages{
  flex:1;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:#333 transparent;
  max-height:35vh;
}
.chat-msg{font-size:12px;line-height:1.4;}
.chat-msg .msg-name{font-weight:700;color:#ffd24a;margin-right:4px;}
.chat-msg .msg-text{color:#ddd;}
.chat-msg.system .msg-text{color:#999;font-style:italic;}
.chat-input-row{
  display:flex;gap:8px;padding:8px 12px;
  border-top:1px solid rgba(255,255,255,0.08);flex-shrink:0;
}
.chat-input{
  flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;padding:8px 14px;color:#fff;font-size:16px;outline:none;
}
.chat-input::placeholder{color:#777;}
.chat-send{
  background:linear-gradient(135deg,#d4a017,#f0c040);color:#000;
  border:none;border-radius:20px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:13px;
}
.chat-badge{
  position:absolute;top:-4px;right:-4px;
  background:#ff4400;color:#fff;font-size:8px;font-weight:800;
  border-radius:8px;padding:1px 4px;display:none;border:1px solid #fff;
}

/* ── Mobile: area taruhan mengisi layar persis, TANPA scroll ── */
@media (max-width:560px){
  .table-area{height:22vh;min-height:138px;max-height:190px;}
  .char-emoji{font-size:clamp(38px,10.5vw,56px);}
  .comm-card{width:clamp(32px,8.5vw,46px);height:clamp(46px,12vw,64px);}
  .bonus-bar{padding:3px 10px;}

  /* bet-zones jadi kolom flex yang mengisi sisa ruang & tidak bisa scroll */
  .bet-zones{overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:5px;}
  .main-bets{margin-bottom:0;gap:4px;flex:0 0 auto;}
  .main-bets .bet-zone{min-height:58px;}
  /* side-bets-row jadi FLEX agar kedua kolom meregang setinggi penuh & sejajar */
  .side-bets-row{display:flex;flex:1 1 auto;min-height:0;gap:4px;align-items:stretch;}
  .side-col{min-height:0;gap:4px;}
  .side-col:first-child{flex:1 1 0;}
  .side-col:last-child{flex:1.45 1 0;}
  .side-col-title{flex:0 0 auto;min-height:24px;font-size:clamp(8px,2.1vw,10px);}
  /* tiap zona/baris mengisi tinggi kolom secara merata → semua sejajar */
  .side-col > .side-zone{flex:1 1 0;min-height:0;}
  .side-col > .pattern-row{flex:1 1 0;min-height:0;gap:4px;}
  .pattern-row > .bet-zone{height:100%;min-height:0;}

  .bet-zone{padding:3px;gap:1px;justify-content:center;}
  .zone-icon{font-size:clamp(15px,4.4vw,21px);}
  .zone-label{font-size:clamp(14px,4.2vw,19px);}
  .zone-mult{font-size:clamp(10px,2.8vw,13px);}
  .zone-name{font-size:clamp(8px,2vw,11px);line-height:1.15;}
  .zone-total{font-size:9px;min-height:0;}
  .never-out{font-size:9px;}
  .dot{width:11px;height:11px;}
  .zone-dots.small .dot{width:9px;height:9px;}
  .zone-dots{gap:2px;padding-top:2px;}

  .leaderboard{height:46px;}
  .lb-avatar{width:26px;height:26px;font-size:14px;}
}

/* Landscape */
@media (orientation:landscape) and (max-height:500px){
  .table-area{height:40vh;min-height:140px;}
  .char-emoji{font-size:clamp(40px,10vw,60px);}
  .comm-card{width:clamp(36px,9vw,52px);height:clamp(50px,12vw,72px);}
  .bet-zones{padding:3px;}
  .bottom-bar{height:42px;}
}