/* DMG Voice V3.6.0 - split social pane, free rack, tea, camera, rewards */

/* Desktop: Okey left, people/chat/media right */
@media(min-width:981px){
  .gameRoomShell.okeyLiveMode{
    display:grid!important;
    grid-template-columns:minmax(0,3.05fr) minmax(310px,.95fr)!important;
    height:100%!important;gap:8px!important;padding:8px!important;background:#090c11!important
  }
  .gameRoomShell.okeyLiveMode>.gameMembersPane{display:none!important}
  .gameRoomShell.okeyLiveMode>.gameBoardPane{display:flex!important;border-radius:17px!important;overflow:hidden!important}
  .gameRoomShell.okeyLiveMode>.gameChatPane{
    display:flex!important;position:relative!important;inset:auto!important;width:auto!important;height:auto!important;
    border-radius:17px!important;background:#0b111a!important;overflow:hidden!important
  }
  body.okey-game-live .gameMobileTabs{display:none!important}
  .gameRoomShell.okeyLiveMode .gameBoard{overflow:hidden!important}
  .gameRoomShell.okeyLiveMode .okeyLounge{min-height:650px!important;padding:72px 12px 64px!important}
}
.gameSocialControls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:7px;border-bottom:1px solid rgba(255,255,255,.07)}
.gameSocialControls .btn{min-width:0;padding:7px 5px;font-size:7px}.gameSocialControls .teaBtn{background:linear-gradient(135deg,#714419,#9a6127);color:#ffe4ad;border-color:#b88243}
.gameSocialPlayers{flex:0 0 auto;max-height:190px;overflow:auto;padding:5px 7px!important}
.socialTitle{padding:6px 9px 4px!important}
.gameVideoDock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px 7px;max-height:180px;overflow-y:auto}
.gameVideoDock:empty{display:none}
.gameVideoCard{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#05090f;aspect-ratio:16/10}
.gameVideoStage,.gameVideoStage video{width:100%;height:100%;object-fit:cover}.gameVideoCard small{position:absolute;left:4px;bottom:4px;padding:2px 5px;border-radius:6px;background:#0009;color:#fff;font-size:5px}

/* True 28 fixed positions. Any tile can occupy any point of the rack. */
.okeyLounge .opRackRow{
  display:grid!important;grid-template-columns:repeat(14,minmax(0,1fr))!important;
  gap:1px!important;width:100%!important
}
.okeyLounge .opRackSlot.filled,.okeyLounge .opRackSlot.empty{
  width:auto!important;min-width:0!important;margin:0!important
}
.okeyLounge .opRackSlot.empty{
  background:transparent!important;border-color:transparent!important
}
.okeyLounge .opRackSlot.empty:hover,.okeyLounge .opRackSlot.dragOver{
  background:rgba(66,222,164,.12)!important;border:1px dashed rgba(66,222,164,.55)!important
}
.okeyLounge .opRackSlot .opTileFace{width:100%!important;max-width:43px!important}

/* Discard / finish exactly in front of bottom player */
.opPlayerQuickActions{
  position:absolute;z-index:24;left:50%;bottom:139px;transform:translateX(72px);
  display:flex;gap:5px
}
.opPlayerQuickActions button{
  height:34px;padding:0 9px;border-radius:9px;border:1px solid rgba(255,255,255,.13);
  color:#fff;font-size:6px;font-weight:900;box-shadow:0 7px 16px #0007;cursor:pointer
}
.opPlayerQuickActions .quickDiscard{background:linear-gradient(135deg,#11844d,#0b6038)}
.opPlayerQuickActions .quickWin{background:linear-gradient(135deg,#293445,#151d28)}
.opPlayerQuickActions button:disabled{opacity:.4;cursor:not-allowed}

/* Okey bottom contains only draw controls/history */
.okeyLounge .opBottomBar{grid-template-columns:1fr auto!important}
.okeyLounge .opBottomBar .opActions{justify-self:center}
.okeyLounge .opHistoryBtn{justify-self:end}

/* Tea popup */
.gameTeaOverlay{position:fixed;z-index:999;inset:0;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.08)}
.gameTeaOverlay.hidden{display:none!important}
.teaCartoon{
  min-width:250px;padding:18px 25px;border-radius:24px;text-align:center;
  background:linear-gradient(160deg,#fff3d5,#e5a85c);border:4px solid #7d421c;
  color:#562d16;box-shadow:0 25px 70px #0008;transform:rotate(-3deg)
}
.teaCartoon .teaTray{font-size:42px;filter:drop-shadow(0 8px 7px #8b4b2855);animation:teaWobble .55s ease-in-out infinite alternate}
.teaCartoon b,.teaCartoon span{display:block}.teaCartoon b{font-size:22px}.teaCartoon span{font-size:10px;margin-top:5px}
.gameTeaOverlay.teaPop .teaCartoon{animation:teaArrival .45s cubic-bezier(.2,.8,.25,1)}
@keyframes teaArrival{0%{transform:translateY(80px) scale(.35) rotate(12deg);opacity:0}75%{transform:translateY(-8px) scale(1.08) rotate(-5deg)}100%{transform:translateY(0) scale(1) rotate(-3deg);opacity:1}}
@keyframes teaWobble{from{transform:rotate(-2deg) translateY(0)}to{transform:rotate(2deg) translateY(-3px)}}
.teaChoiceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.teaChoiceGrid button{display:flex;min-height:110px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:14px;border:1px solid #ffffff18;background:#111a27;color:#fff;cursor:pointer;font-size:20px}
.teaChoiceGrid b{font-size:9px}.teaChoiceGrid small{font-size:6px;color:#91a2b6}
.teaTargetBox{margin-top:10px;padding:10px;border-radius:12px;background:#101722}.teaTargetBox select{width:100%;margin:5px 0 8px}

/* Result reward */
.gameRewardLine{margin:10px auto;padding:8px 12px;width:max-content;max-width:100%;border-radius:10px;background:rgba(241,190,65,.12);border:1px solid rgba(241,190,65,.25);color:#ffd86b;font-size:9px;font-weight:900}

/* On small screens use existing Masa/Sohbet tabs. Right pane contains people + media + chat. */
@media(max-width:980px){
  body.okey-game-live .gameMobileTabs{display:grid!important}
  .gameRoomShell.okeyLiveMode{padding:0 0 calc(64px + env(safe-area-inset-bottom))!important}
  .gameRoomShell.okeyLiveMode>.gameMembersPane{display:none!important}
  .gameRoomShell.okeyLiveMode.mobile-view-board>.gameBoardPane{display:flex!important}
  .gameRoomShell.okeyLiveMode.mobile-view-board>.gameChatPane{display:none!important}
  .gameRoomShell.okeyLiveMode.mobile-view-chat>.gameBoardPane,
  .gameRoomShell.okeyLiveMode.mobile-view-members>.gameBoardPane{display:none!important}
  .gameRoomShell.okeyLiveMode.mobile-view-chat>.gameChatPane,
  .gameRoomShell.okeyLiveMode.mobile-view-members>.gameChatPane{display:flex!important}
  .gameVideoDock{max-height:140px}
  .opPlayerQuickActions{bottom:108px;transform:translateX(43px);gap:3px}
  .opPlayerQuickActions button{height:27px;padding:0 5px;font-size:5px}
  .okeyLounge .opRackSlot .opTileFace{max-width:none!important}
}
@media(max-width:520px){
  .teaChoiceGrid{grid-template-columns:1fr}
  .opPlayerQuickActions{left:auto;right:4px;bottom:108px;transform:none}
}