/* DARK OKEY · mobile lobby redesign */
@media(max-width:900px){
 html body #root{background:#0b1220!important;color:#edf2fa!important}
 html body #root .mobileLobbyTopbar{
  position:relative!important;z-index:3!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:42px 42px!important;
  gap:8px 10px!important;padding:12px 14px!important;background:linear-gradient(115deg,#111c2e,#101827 70%,#181b38)!important;
  border-bottom:1px solid #26364c!important;box-shadow:0 8px 24px #02061755!important
 }
 html body #root .mobileLobbyBrand{grid-column:1!important;grid-row:1!important}
 html body #root .mobileLobbyBrand :is(b,strong,h1){font-size:20px!important;letter-spacing:-.04em!important}
 html body #root .mobileLobbyOnline{grid-column:2!important;grid-row:1!important;color:#9eacc0!important}
 html body #root .mobileSettingsButton{grid-column:3!important;grid-row:1!important;width:40px!important;height:40px!important;min-height:40px!important;border-radius:13px!important}
 html body #root .mobileLobbyTopbar .darkMobileTools{grid-column:4!important;grid-row:1!important;position:relative!important;inset:auto!important;margin:0!important}
 html body #root .mobileLobbyTopbar .darkMobileTools button{min-height:40px!important;border-radius:13px!important;padding:0 14px!important}
 html body #root .mobileLobbyTopbar .darkPeopleToggle{grid-column:4!important;grid-row:2!important;min-height:40px!important;border-radius:13px!important;margin:0!important}
 html body #root .mobileLobbyTopbar .mobileRadioToggle{grid-column:1!important;grid-row:2!important;justify-self:start!important}
 html body #root .mobileLobbyTopbar .mobileSoundToggle{grid-column:2!important;grid-row:2!important;justify-self:start!important}
 html body #root .mobileLobbyTopbar .mobileRadioToggle,html body #root .mobileLobbyTopbar .mobileSoundToggle{
  box-sizing:border-box!important;height:38px!important;min-height:38px!important;padding:0 12px!important;border:1px solid #34465e!important;
  border-radius:12px!important;background:#17243a!important;color:#dce8f7!important;font-size:12px!important;font-weight:700!important
 }
 html body #root .mobileTablesPanel{
  box-sizing:border-box!important;padding:13px 14px!important;max-height:min(34dvh,290px)!important;
  background:#101b2d!important;border-bottom:1px solid #27364c!important
 }
 html body #root .mobileTablesHead{align-items:center!important;gap:9px!important;margin-bottom:11px!important}
 html body #root .mobileTablesHead b{font-size:14px!important;letter-spacing:.08em!important}
 html body #root .mobileTablesHead small{color:#8999b0!important}
 html body #root .mobileTableHeadActions{gap:7px!important}
 html body #root .mobileTableHeadActions button{height:38px!important;min-height:38px!important;border-radius:12px!important;font-weight:700!important}
 html body #root .mobileTablesScroller{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;
  align-content:start!important;min-height:0!important;overflow:auto!important;padding:1px 2px 8px!important;
  overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
 }
 html body #root .mobileTableCard{
  width:auto!important;min-width:0!important;border:1px solid #30425b!important;border-radius:14px!important;
  background:linear-gradient(145deg,#19283e,#121d30)!important;box-shadow:0 5px 14px #02061735!important
 }
 html body #root .mobileEmptyTable{
  grid-column:1/-1!important;width:100%!important;height:64px!important;min-height:64px!important;
  border:1px dashed #41516a!important;border-radius:14px!important;background:#111a29!important;
  color:#9aa9bd!important;font-size:13px!important
 }
 html body #root .mobileEmptyTable::before{content:"♢"!important;color:#a78bfa!important;font-size:18px!important}
 html body #root .mobileEmptyTable::after{content:"Yeni masa açmak için + düğmesine dokunun."!important;color:#8190a5!important;font-size:11px!important}
 html body #root .mobileLobbyChat{display:flex!important;flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;background:#0b1421!important}
 html body #root .mobileLobbyChat .mobileChatTitle{
  box-sizing:border-box!important;min-height:54px!important;padding:8px 14px!important;border-bottom:1px solid #26364c!important;background:#111c2e!important
 }
 html body #root .mobileChatTitle b{font-size:15px!important;font-weight:800!important}
 html body #root .mobileChatTitle span{font-size:11px!important;color:#94a5ba!important}
 html body #root .mobileChatTitleActions button{height:38px!important;min-height:38px!important;border-radius:12px!important;padding:0 12px!important;font-size:12px!important}
 html body #root .mobileLobbyChat .richChat{display:flex!important;flex:1 1 auto!important;min-height:0!important;flex-direction:column!important;overflow:hidden!important;background:transparent!important}
 html body #root .mobileLobbyChat .socialToolBar{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding:9px 12px!important;background:#101b2d!important}
 html body #root .mobileLobbyChat .socialToolBar button,html body #root .mobileLobbyChat .chatTabs button{
  min-height:38px!important;border-radius:12px!important;font-size:12px!important;font-weight:700!important
 }
 html body #root .mobileLobbyChat .chatTabs{gap:8px!important;padding:0 12px 9px!important;background:#101b2d!important}
 html body #root .mobileLobbyChat .chatMessages{
  display:flex!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;overflow:auto!important;
  justify-content:flex-start!important;align-content:flex-start!important;padding:14px!important;gap:9px!important;
  overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;background:#0c1522!important
 }
 html body #root .mobileLobbyChat .chatEmpty{
  width:min(100%,340px)!important;margin:8px auto 0!important;padding:18px 16px!important;border:1px solid #26364c!important;
  border-radius:18px!important;background:linear-gradient(145deg,#111c2a,#0e1724)!important;color:#e8eef7!important;text-align:center!important
 }
 html body #root .mobileLobbyChat .chatEmpty::before{content:"◌"!important;display:block!important;margin:0 auto 7px!important;color:#a78bfa!important;font-size:27px!important}
 html body #root .mobileLobbyChat .chatEmpty::after{content:"Mesajlar burada görünecek."!important;display:block!important;margin-top:4px!important;color:#8999b0!important;font-size:12px!important}
 html body #root .mobileLobbyChat .chatComposer{
  box-sizing:border-box!important;flex:none!important;min-height:64px!important;padding:9px 12px calc(9px + env(safe-area-inset-bottom))!important;
  border-top:1px solid #26364c!important;background:#111c2e!important
 }
 html body #root .mobileLobbyChat .chatComposer .chatSend{grid-template-columns:42px minmax(0,1fr) 72px!important;gap:8px!important;padding:0!important}
 html body #root .mobileLobbyChat .chatComposer .emojiButton{width:42px!important;height:42px!important;border-radius:13px!important}
 html body #root .mobileLobbyChat .chatComposer .chatSend input{height:42px!important;min-width:0!important;border-radius:13px!important}
 html body #root .mobileLobbyChat .chatComposer .chatSend button{height:42px!important;min-width:72px!important;border-radius:13px!important;font-weight:800!important}
}
@media(max-width:390px){
 html body #root .mobileLobbyTopbar{gap:7px 6px!important;padding:10px!important}
 html body #root .mobileLobbyTopbar .darkPeopleToggle{padding:0 8px!important;font-size:12px!important}
 html body #root .mobileLobbyChat .chatComposer .chatSend{grid-template-columns:38px minmax(0,1fr) 64px!important}
 html body #root .mobileLobbyChat .chatComposer .emojiButton{width:38px!important}
 html body #root .mobileLobbyChat .chatComposer .chatSend button{min-width:64px!important}
}
/* Keep the mobile emoji picker compact; scroll its contents inside the panel. */
@media(max-width:700px) and (orientation:portrait){
 html body #root .mobileLobbyChat .chatComposer{position:relative!important;overflow:visible!important}
 html body #root .mobileLobbyChat .emojiPicker{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;min-height:0!important;
  max-height:min(27dvh,220px)!important;overflow:hidden!important;padding:6px!important;
  border-radius:14px 14px 0 0!important
 }
 html body #root .mobileLobbyChat .emojiPicker .emojiTabs,
 html body #root .mobileLobbyChat .emojiPicker .emojiSubTabs{
  display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:5px!important;
  min-height:32px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important
 }
 html body #root .mobileLobbyChat .emojiPicker .emojiTabs button,
 html body #root .mobileLobbyChat .emojiPicker .emojiSubTabs button{
  flex:0 0 auto!important;min-height:30px!important;padding:0 9px!important;font-size:11px!important
 }
 html body #root .mobileLobbyChat .emojiPicker .emojiGrid{
  display:grid!important;flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
  overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
  align-content:start!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important;padding:5px!important
 }
 html body #root .mobileLobbyChat .emojiPicker .emojiGrid button{
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;
  min-width:0!important;min-height:44px!important;max-height:48px!important;padding:3px!important;overflow:hidden!important
 }
 html body #root .mobileLobbyChat .emojiPicker .gifGrid button img{
  display:block!important;width:100%!important;height:40px!important;max-width:48px!important;max-height:40px!important;
  object-fit:contain!important
 }
}

/* Mobile table cards list every seated player, including bots. */
@media(max-width:900px){
 html body #root .mobileTableCard .mobileTablePlayers{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px 6px!important;
  width:100%!important;margin:8px 0 6px!important
 }
 html body #root .mobileTableCard .mobileTablePlayers>span{
  display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;
  padding:4px 6px!important;border:1px solid #31425a!important;border-radius:8px!important;
  background:#101b2c!important;color:#d9e4f2!important;font-size:10px!important;font-weight:650!important;
  line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
 }
 html body #root .mobileTableCard .mobileTablePlayers>span.bot{border-color:#66539b!important;background:#211d3b!important}
 html body #root .mobileTableCard .mobileTablePlayers>span em{
  flex:none!important;padding:2px 4px!important;border-radius:5px!important;background:#6b50c9!important;
  color:#fff!important;font-size:8px!important;font-style:normal!important;font-weight:800!important
 }
}

/* Put the Lobi/Özel destination tabs before the Sohbet/Ismarla tools. */
@media(max-width:900px){
 html body #root .mobileLobbyChat .richChat .chatTabs{order:1!important}
 html body #root .mobileLobbyChat .richChat .socialToolBar{order:2!important}
}

/* Compact landscape phone table: keep the felt, seats and rack in separate bands. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
 html body #root main.gameScreen.yuzbirGame{
  box-sizing:border-box!important;width:100vw!important;height:100dvh!important;min-height:0!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame>.topbar{
  position:absolute!important;inset:0 0 auto!important;z-index:180!important;height:38px!important;min-height:38px!important;
  max-height:38px!important;padding:2px 5px!important;overflow:visible!important
 }
 html body #root main.gameScreen.yuzbirGame>.topbar .brand,
 html body #root main.gameScreen.yuzbirGame>.topbar .stats,
 html body #root main.gameScreen.yuzbirGame>.topbar .membershipBadge{display:none!important}
 html body #root main.gameScreen.yuzbirGame>.topbar .topbarRight{
  position:static!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;width:100%!important
 }
 html body #root main.gameScreen.yuzbirGame>.topbar button,
 html body #root main.gameScreen.yuzbirGame>.topbar .tablePointsMenu summary{
  box-sizing:border-box!important;height:32px!important;min-height:32px!important;padding:3px 7px!important;font-size:10px!important
 }
 html body #root main.gameScreen.yuzbirGame>.gameTableWrap{
  position:absolute!important;inset:38px 0 0!important;box-sizing:border-box!important;width:100%!important;height:auto!important;
  min-height:0!important;margin:0!important;padding:3px 5px 0!important;display:block!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .feltTable101{
  position:absolute!important;inset:3px 5px 142px!important;width:auto!important;height:auto!important;min-height:0!important;
  max-height:none!important;border-width:5px!important;border-radius:23px!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .yuzbirMeldBoard{
  left:18%!important;right:auto!important;top:19%!important;bottom:18%!important;width:64%!important;height:auto!important;
  padding:4px!important;border-radius:12px!important
 }
 html body #root main.gameScreen.yuzbirGame .seat{
  box-sizing:border-box!important;min-width:0!important;min-height:0!important;max-width:94px!important;
  height:34px!important;transform:none!important;writing-mode:horizontal-tb!important;z-index:35!important
 }
 html body #root main.gameScreen.yuzbirGame .seat-2{
  top:1%!important;left:50%!important;right:auto!important;bottom:auto!important;width:90px!important;height:28px!important;transform:translateX(-50%)!important
 }
 html body #root main.gameScreen.yuzbirGame .seat-3{
  top:43%!important;left:1%!important;right:auto!important;bottom:auto!important;width:78px!important
 }
 html body #root main.gameScreen.yuzbirGame .seat-1{
  top:43%!important;right:1%!important;left:auto!important;bottom:auto!important;width:78px!important
 }
 html body #root main.gameScreen.yuzbirGame .seat-0{
  top:auto!important;bottom:1%!important;left:50%!important;right:auto!important;width:100px!important;height:30px!important;transform:translateX(-50%)!important
 }
 html body #root main.gameScreen.yuzbirGame .seat .yuzbirSeatCard,
 html body #root main.gameScreen.yuzbirGame .seat .playerCard,
 html body #root main.gameScreen.yuzbirGame .seat .playerName{
  box-sizing:border-box!important;min-height:0!important;height:100%!important;padding:2px 4px!important;font-size:9px!important
 }
 html body #root main.gameScreen.yuzbirGame .discardSpot{
  width:29px!important;min-width:29px!important;height:43px!important;min-height:43px!important;padding:1px!important;z-index:45!important
 }
 html body #root main.gameScreen.yuzbirGame .discard-2{top:7%!important;left:65%!important;right:auto!important;bottom:auto!important}
 html body #root main.gameScreen.yuzbirGame .discard-3{top:48%!important;left:11%!important;right:auto!important;bottom:auto!important}
 html body #root main.gameScreen.yuzbirGame .discard-1{top:48%!important;right:11%!important;left:auto!important;bottom:auto!important}
 html body #root main.gameScreen.yuzbirGame .discard-0{top:auto!important;bottom:4%!important;left:68%!important;right:auto!important}
 html body #root main.gameScreen.yuzbirGame .discardSpot .imageTile.okeyTile.compact{width:100%!important;height:100%!important;min-width:0!important}
 html body #root main.gameScreen.yuzbirGame .rackArea{
  position:fixed!important;inset:auto 0 0!important;box-sizing:border-box!important;z-index:100!important;
  width:100%!important;height:140px!important;min-height:140px!important;max-height:140px!important;margin:0!important;
  padding:3px!important;border-radius:12px 12px 0 0!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .rackHead{position:static!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important}
 html body #root main.gameScreen.yuzbirGame .rackTools{
  position:absolute!important;top:3px!important;left:4px!important;width:calc(50% - 6px)!important;height:27px!important;
  display:flex!important;gap:3px!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .rack101ScoreBar{
  position:absolute!important;top:3px!important;right:4px!important;left:calc(50% + 2px)!important;
  width:auto!important;height:27px!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important
 }
 html body #root main.gameScreen.yuzbirGame .rack101UnifiedActions{
  display:flex!important;align-items:stretch!important;gap:3px!important;width:100%!important;height:27px!important;margin:0!important;padding:0!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .rackTools button,
 html body #root main.gameScreen.yuzbirGame .rack101UnifiedActions>button{
  flex:1 1 0!important;min-width:0!important;height:27px!important;min-height:27px!important;
  padding:0 2px!important;font-size:clamp(8px,1.5vw,10px)!important;white-space:nowrap!important
 }
 html body #root main.gameScreen.yuzbirGame .rackBoardShell{
  position:absolute!important;inset:34px 4px 4px!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .tileRackGrid{
  position:absolute!important;inset:0!important;display:grid!important;grid-template-columns:repeat(18,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:2px 1px!important;width:100%!important;height:100%!important;
  min-height:0!important;padding:2px!important;box-sizing:border-box!important
 }
 html body #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot{position:relative!important;min-width:0!important;min-height:0!important;overflow:hidden!important}
 html body #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot>.imageTile.okeyTile{
  position:absolute!important;inset:0!important;width:100%!important;min-width:0!important;max-width:100%!important;
  height:100%!important;min-height:0!important;max-height:100%!important;margin:0!important;padding:0!important;
  transform:none!important;aspect-ratio:auto!important;overflow:hidden!important
 }
 html body #root main.gameScreen.yuzbirGame .tileRackGrid .rackSlot>.imageTile.okeyTile img{
  display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;transform:none!important
 }
 html body #root main.gameScreen.yuzbirGame .tableChatBubble{right:7px!important;bottom:146px!important;width:38px!important;height:38px!important;min-width:38px!important;padding:5px!important}
}

/* Show the exact text color selected in the nickname and chat color editor. */
html body #root .nameStyleChooser .selectedChatColor{
 display:flex!important;align-items:center!important;gap:8px!important;margin:7px 0 12px!important;
 padding:7px 10px!important;border:1px solid #40516a!important;border-radius:10px!important;
 background:#101b2b!important;color:#dbe6f5!important;font-size:12px!important;font-weight:700!important
}
html body #root .nameStyleChooser .selectedChatColor i{
 display:inline-block!important;flex:none!important;width:18px!important;height:18px!important;
 border:1px solid #fff8!important;border-radius:5px!important;box-shadow:0 0 0 1px #0008!important
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
 html body #root main.gameScreen.yuzbirGame .autoPilotBanner{
  position:fixed!important;left:50%!important;right:auto!important;bottom:142px!important;transform:translateX(-50%)!important;
  z-index:120!important;width:min(420px,64vw)!important;min-height:0!important;margin:0!important;
  padding:5px 8px!important;border-radius:9px!important;font-size:10px!important;line-height:1.2!important
 }
 html body #root main.gameScreen.yuzbirGame .autoPilotBanner button{
  min-height:25px!important;padding:3px 7px!important;font-size:10px!important
 }
 html body .darkMobileToolsItems .darkRadioAdminButton{
  position:static!important;inset:auto!important;box-shadow:none!important;display:block!important;width:100%!important;
  margin:4px 0!important;text-align:left!important
 }
}