/* DMG Voice V3.4.1 - OKEY rack/per + invite UX */

/* 28-eye real rack: 14 top + 14 bottom */
.opRack{
  width:min(860px,88%)!important;
  height:154px!important;
  padding:25px 14px 10px!important;
}
.opRack:after{top:85px!important}
.opRackTiles{
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(14,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,58px)!important;
  gap:3px 2px!important;
  width:100%!important;
  height:119px!important;
  overflow:visible!important;
  align-content:start!important;
}
.opRackSlot{
  position:relative;
  min-width:0;
  width:100%;
  height:58px;
  padding:0;
  border:1px dashed rgba(255,221,165,.16);
  border-radius:5px;
  background:rgba(52,26,12,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  cursor:pointer;
}
.opRackSlot.empty:hover{background:rgba(255,221,165,.08);border-color:rgba(255,221,165,.32)}
.opRackSlot.dragOver{background:rgba(67,222,164,.16);border-color:#43dea4;box-shadow:inset 0 0 0 2px rgba(67,222,164,.25)}
.opRackSlot.selected{border-color:#8267ff}
.opRackSlot .opTileFace{
  width:min(39px,100%)!important;
  height:56px!important;
  margin:0!important;
  cursor:grab;
}
.opRackSlot .opTileFace:active{cursor:grabbing}
.opSlotGuide{width:6px;height:6px;border-radius:50%;background:rgba(255,219,164,.12)}
.opRackToolbar>span{max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Unified invite window */
.giFastPlayer{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  margin-bottom:10px;
  border:1px solid rgba(122,96,255,.24);
  border-radius:14px;
  background:linear-gradient(90deg,rgba(122,96,255,.12),rgba(40,183,135,.07));
}
.giFastPlayer>div{flex:1;min-width:0}
.giFastPlayer b,.giFastPlayer small{display:block}
.giFastPlayer b{font-size:11px}
.giFastPlayer small{font-size:8px;color:#9aa8bb;margin-top:3px;line-height:1.4}
.giFastPlayer .btn{white-space:nowrap}
.giFastPlayer .btn em{
  margin-left:5px;padding:2px 4px;border-radius:5px;
  background:rgba(255,255,255,.12);font-size:6px;font-style:normal;letter-spacing:.5px
}

/* Natural player presentation */
.botMember .gameMemberInfo small{color:#9aa8bb!important}
.opPlayer.bot .opPlayerInfo em{display:none!important}

@media(max-width:980px){
  .opRack{width:94%!important}
}
@media(max-width:760px){
  .opRack{
    width:97%!important;
    height:124px!important;
    padding:20px 6px 6px!important;
    bottom:14px!important;
  }
  .opRack:after{top:68px!important}
  .opRackTiles{
    grid-template-rows:repeat(2,47px)!important;
    gap:2px 1px!important;
    height:96px!important;
  }
  .opRackSlot{height:47px!important;border-radius:3px}
  .opRackSlot .opTileFace{
    width:100%!important;height:45px!important;min-width:0!important;border-radius:4px!important;
  }
  .opRackSlot .opTileFace b{font-size:clamp(10px,3.5vw,14px)!important}
  .opRackSlot .opTileFace i{width:4px!important;height:4px!important;margin-top:2px!important}
  .opRackToolbar>span{font-size:5px!important;max-width:55%}
  .giFastPlayer{padding:9px;gap:7px}
  .giFastPlayer small{font-size:7px}
  .giFastPlayer .btn{font-size:8px;padding:7px 8px}
}
@media(max-width:390px){
  .opRack{width:99%!important;padding-left:4px!important;padding-right:4px!important}
  .opRackTiles{gap:2px 0!important}
  .opRackSlot{border-left-width:0;border-right-width:0}
}