/* ── KAMAR AUDIO ── */
.room-screen{
  position:fixed;inset:0;background:linear-gradient(180deg,#10131d,#0a0c12);color:#e7eaf2;
  display:flex;flex-direction:column;z-index:60;font-family:system-ui,sans-serif;
}
.room-top{display:flex;align-items:center;gap:10px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top));border-bottom:1px solid #1d2233;background:rgba(0,0,0,.2);}
.room-top .r-icon{background:#1a1f30;border:1px solid #2a3147;color:#e7eaf2;width:40px;height:40px;border-radius:11px;font-size:18px;cursor:pointer;flex-shrink:0;transition:all .15s;}
.room-top .r-icon:hover{border-color:#d4a017;color:#ffd700;}
.room-title{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.room-title .r-badge{width:38px;height:38px;border-radius:10px;background:#2a2010;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #d4a017;flex-shrink:0;}
.room-title .r-name{font-weight:800;color:#ffd700;font-size:15px;line-height:1.2;}
.room-title .r-sub{font-size:11px;color:#8a93a8;margin-top:2px;}

.seats-area{flex:1;min-height:0;overflow:hidden;padding:6px 10px;display:flex;flex-direction:column;justify-content:space-evenly;gap:2px;
  --sz:clamp(40px,min(15vw,8vh),58px);   /* ukuran kursi normal, menyesuaikan layar */
  --szs:clamp(32px,min(11vw,6vh),46px);  /* ukuran kursi kecil (baris 6) */
}
.seat-section-label{font-size:10px;font-weight:700;letter-spacing:.5px;color:#6f7890;text-transform:uppercase;text-align:center;margin:1px 0;}
.seat-row{display:flex;justify-content:center;gap:clamp(6px,2.5vw,12px);flex-wrap:nowrap;}
.seat-row.small{gap:clamp(4px,1.6vw,8px);}

.seat{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;width:var(--sz);}
.seat.sm{width:var(--szs);}
.seat-circle{
  width:var(--sz);height:var(--sz);border-radius:50%;border:2px solid #d4a017;background:#11151f;
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#5a6378;
  position:relative;overflow:visible;transition:transform .12s,border-color .15s,box-shadow .15s;
}
.seat.sm .seat-circle{width:var(--szs);height:var(--szs);font-size:18px;}
.seat:active .seat-circle{transform:scale(.93);}
.seat.owner .seat-circle{border-color:#ffd700;box-shadow:0 0 16px rgba(255,215,0,.28);}
.seat-circle img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.seat-circle .seat-plus{color:#d4a017;font-size:30px;font-weight:200;line-height:1;}
.seat-circle.filled{color:#e7eaf2;background:#161b28;}
.seat-circle.mine{border-color:#2ecc71;box-shadow:0 0 14px rgba(46,204,113,.55);}
.seat-circle.speaking{animation:seatSpk 1.1s infinite;}
@keyframes seatSpk{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.55);}50%{box-shadow:0 0 0 7px rgba(46,204,113,0);}}
.mic-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid #2ecc71;pointer-events:none;}
.seat-mic{position:absolute;bottom:-2px;right:-2px;background:#27ae60;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid #11151f;}
.seat.sm .seat-mic{width:16px;height:16px;font-size:9px;}

.seat-name{font-size:clamp(9px,2.6vw,11px);color:#cfd4e0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.seat.sm .seat-name{font-size:clamp(8px,2.3vw,10px);}
.seat.owner .seat-name{color:#ffd700;font-weight:600;}
.seat-circle:not(.filled) ~ .seat-name::before{content:'Kosong';color:#4a5268;}

@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.5);}50%{box-shadow:0 0 0 6px rgba(46,204,113,0);}}

/* ── Chat ringkas ── */
.room-chat{flex:none;padding:6px 12px;height:78px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;}
.rc-msg{font-size:12.5px;line-height:1.4;background:rgba(20,25,37,.7);border-radius:10px;padding:6px 10px;align-self:flex-start;max-width:92%;word-break:break-word;}
.rc-msg .rc-name{color:#e8b84b;font-weight:700;margin-right:5px;}
.rc-msg.sys{color:#9aa3b8;background:transparent;font-style:italic;padding:2px 10px;}
.rc-msg.gift{background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.4);color:#ffe08a;}

/* ── Bar bawah ── */
.room-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));border-top:1px solid #1d2233;background:rgba(0,0,0,.35);position:sticky;bottom:0;z-index:10;}
.bar-btn{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:#1a1f30;border:1px solid #2a3147;color:#e7eaf2;font-size:19px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.bar-btn:hover{border-color:#e8b84b;}
.bar-btn:active{transform:scale(.92);}
.bar-btn.off{background:#3a1f1f;border-color:#e74c3c;color:#ff9a9a;}
.bar-btn.on{background:#27ae60;border-color:#2ecc71;color:#fff;animation:micPulse 1.4s infinite;}
.bar-btn.apps{background:linear-gradient(135deg,#e8b84b,#b8860b);color:#1a1300;border:none;}
.bar-input{flex:1;min-width:0;background:#11151f;border:1px solid #2a3147;border-radius:21px;color:#e7eaf2;padding:11px 16px;font-size:13px;font-family:inherit;}
.bar-input:focus{outline:none;border-color:#e8b84b;}

/* ── Panel slide-up ── */
.panel-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;}
.panel-backdrop.show{display:block;}
.room-panel{position:fixed;left:0;right:0;bottom:0;background:#141925;border-top:1px solid #2a3147;border-radius:18px 18px 0 0;z-index:90;padding:16px 16px calc(20px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s;max-height:58vh;overflow-y:auto;}
.room-panel.open{transform:translateY(0);}
.panel-head{font-size:14px;font-weight:700;color:#ffd700;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;}
.panel-coin{font-size:13px;color:#e8b84b;}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.emoji-grid button{background:#1a1f30;border:1px solid #2a3147;border-radius:10px;font-size:24px;padding:8px 0;cursor:pointer;transition:all .12s;}
.emoji-grid button:hover{border-color:#e8b84b;transform:scale(1.08);}
.gift-note{font-size:11px;color:#ffe08a;background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.3);border-radius:10px;padding:8px 11px;margin-bottom:12px;line-height:1.45;}
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gift-item{background:#1a1f30;border:1px solid #2a3147;border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .12s;}
.gift-item:hover{border-color:#e8b84b;}
.gift-item .g-emoji{font-size:30px;}
.gift-item .g-name{font-size:11px;color:#cfd4e0;margin-top:4px;}
.gift-item .g-cost{font-size:11px;color:#e8b84b;margin-top:2px;font-weight:700;}
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.app-item{background:#1a1f30;border:1px solid #2a3147;border-radius:14px;padding:14px 6px;text-align:center;cursor:pointer;transition:all .12s;position:relative;}
.app-item:hover{border-color:#e8b84b;}
.app-item.soon{opacity:.45;cursor:not-allowed;}
.app-item .a-emoji{font-size:30px;}
.app-item .a-name{font-size:11px;color:#e7eaf2;margin-top:5px;}
.app-item .a-badge{position:absolute;top:5px;right:5px;background:#e74c3c;color:#fff;font-size:8px;font-weight:700;padding:1px 5px;border-radius:6px;}

/* ── Animasi kado melayang ── */
.gift-fly{position:fixed;left:50%;top:50%;transform:translateX(-50%);font-size:84px;z-index:200;pointer-events:none;animation:giftFly 1.9s ease-out forwards;}
@keyframes giftFly{0%{opacity:0;transform:translateX(-50%) scale(.3);}18%{opacity:1;transform:translateX(-50%) scale(1.25);}70%{opacity:1;transform:translateX(-50%) scale(1);}100%{opacity:0;transform:translateX(-50%) scale(1) translateY(-70px);}}

/* ── Popup profil pemain ── */
.profile-pop-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;}
.profile-pop-backdrop.show{display:block;}
.profile-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  width:min(86vw,330px);background:linear-gradient(180deg,#1b2030,#141925);border:1px solid #2a3147;border-radius:20px;
  z-index:110;padding:22px 20px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.5);transition:opacity .2s,transform .2s;}
.profile-pop.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;}
.pp-avatar{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;border:3px solid #e8b84b;background:#11151f;display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;}
.pp-avatar img{width:100%;height:100%;object-fit:cover;}
.pp-name{font-size:18px;font-weight:800;color:#ffd700;}
.pp-tag{font-size:12px;color:#9aa3b8;margin-top:4px;}
.pp-tag .pp-badge{display:inline-block;background:#6c5ce7;color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;margin-top:6px;}
.pp-actions{display:flex;gap:12px;margin-top:18px;}
.pp-btn{flex:1;background:#1a1f30;border:1px solid #2a3147;border-radius:13px;color:#e7eaf2;padding:12px 6px;font-size:12px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:all .15s;}
.pp-btn span{font-size:12px;}
.pp-btn:hover{border-color:#e8b84b;}
.pp-btn.gift{background:linear-gradient(135deg,#ff7eb3,#ff4d8d);color:#fff;border:none;font-size:22px;}
.pp-btn.leave{font-size:20px;}

/* ── Banner kado berjalan (marquee) ── */
.gift-banner{position:fixed;left:0;right:0;top:calc(58px + env(safe-area-inset-top));z-index:120;pointer-events:none;display:none;overflow:hidden;}
.gift-banner.show{display:block;}
.gift-banner .gb-inner{display:inline-block;white-space:nowrap;background:linear-gradient(90deg,rgba(232,184,75,.95),rgba(255,77,141,.95));color:#1a1300;font-weight:800;font-size:13px;padding:8px 18px;border-radius:20px;margin-left:100%;box-shadow:0 4px 14px rgba(0,0,0,.4);animation:gbRun 5s linear forwards;}
@keyframes gbRun{from{transform:translateX(0);}to{transform:translateX(-220%);}}

/* ── Texas Cowboy sebagai PANEL BAWAH (bottom sheet) di atas room ── */
#gameScreen.sheet{
  position:fixed; left:50%; bottom:0; width:100%; max-width:480px;
  height:94vh; height:94dvh; z-index:70;
  transform:translateX(-50%) translateY(100%); transition:transform .3s ease;
  border-radius:20px 20px 0 0; overflow:hidden; box-shadow:0 -12px 40px rgba(0,0,0,.65);
}
#gameScreen.sheet.open{ transform:translateX(-50%) translateY(0); }
#gameScreen.sheet .game-container{ height:100%; border-radius:20px 20px 0 0; }
/* Perkecil area tabel di dalam panel → zona taruhan dapat ruang lebih besar (tidak gepeng) */
#gameScreen.sheet .table-area{ height:26vh; min-height:150px; max-height:230px; }

/* ── Layar pendek: rapatkan agar semua kursi tetap muat tanpa scroll ── */
@media(max-height:680px){
  .seats-area{gap:0;padding:4px 8px;}
  .seat-section-label{font-size:9px;margin:0;}
  .room-chat{height:60px;}
}
/* ── Desktop: batasi lebar & tetap di tengah ── */
@media(min-width:700px){
  .seats-area,.room-top,.room-chat,.room-bar{max-width:560px;margin-left:auto;margin-right:auto;width:100%;}
}