/* DMG Voice V3.6.2 - Okey rack fit + grouped layout */

/* Rack area wider and cleaner */
.okeyLounge .opRack{width:min(1120px,94%)!important;height:156px!important;padding:24px 12px 10px!important}
.okeyLounge .opRack:after{top:82px!important}
.okeyLounge .opRackToolbar{left:10px!important;right:10px!important}
.okeyLounge .opRackTiles{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;height:auto!important;overflow:visible!important}

/* 14 fixed positions per row so every tile fits and can be grouped anywhere */
.okeyLounge .opRackRow{display:grid!important;grid-template-columns:repeat(14,41px)!important;grid-auto-rows:58px!important;gap:1px!important;min-height:58px!important;width:max-content!important;max-width:100%!important}
.okeyLounge .opRackSlot{width:41px!important;height:58px!important;min-width:41px!important;max-width:41px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important;border-radius:5px!important;cursor:pointer!important;transition:.15s ease!important}
.okeyLounge .opRackSlot.filled{border:1px solid rgba(255,222,173,.14)!important;background:rgba(94,48,13,.10)!important}
.okeyLounge .opRackSlot.empty{border:1px dashed rgba(255,222,173,.13)!important;background:rgba(255,255,255,.025)!important}
.okeyLounge .opRackSlot.dragOver{background:rgba(67,222,164,.16)!important;border-color:#43dea4!important;box-shadow:inset 0 0 0 2px rgba(67,222,164,.24)!important}
.okeyLounge .opRackSlot.selected{border-color:#7f68ff!important;box-shadow:0 0 0 1px rgba(127,104,255,.22)!important}
.okeyLounge .opRackSlot .opTileFace{width:39px!important;height:56px!important;max-width:39px!important;min-width:39px!important;margin:0!important}
.okeyLounge .opRackSlot .opTileFace b{font-size:18px!important}
.okeyLounge .opSlotGuide{width:7px!important;height:7px!important;border-radius:50%!important;background:rgba(255,222,173,.18)!important;box-shadow:0 0 0 4px rgba(255,255,255,.02)!important}

/* Slightly more compact on mid screens */
@media (max-width:1180px){
  .okeyLounge .opRack{width:min(1040px,95%)!important}
  .okeyLounge .opRackRow{grid-template-columns:repeat(14,37px)!important;grid-auto-rows:54px!important;min-height:54px!important}
  .okeyLounge .opRackSlot{width:37px!important;height:54px!important;min-width:37px!important;max-width:37px!important}
  .okeyLounge .opRackSlot .opTileFace{width:35px!important;height:52px!important;max-width:35px!important;min-width:35px!important}
  .okeyLounge .opRackSlot .opTileFace b{font-size:16px!important}
}
@media (max-width:980px){
  .okeyLounge .opRack{width:98%!important;height:124px!important;padding:19px 6px 7px!important}
  .okeyLounge .opRack:after{top:64px!important}
  .okeyLounge .opRackRow{grid-template-columns:repeat(14,30px)!important;grid-auto-rows:45px!important;min-height:45px!important;gap:1px!important}
  .okeyLounge .opRackSlot{width:30px!important;height:45px!important;min-width:30px!important;max-width:30px!important;border-radius:4px!important}
  .okeyLounge .opRackSlot .opTileFace{width:28px!important;height:43px!important;max-width:28px!important;min-width:28px!important}
  .okeyLounge .opRackSlot .opTileFace b{font-size:13px!important}
  .okeyLounge .opSlotGuide{width:5px!important;height:5px!important}
}
@media (max-width:560px){
  .okeyLounge .opRack{width:99%!important;padding:18px 4px 7px!important}
  .okeyLounge .opRackRow{grid-template-columns:repeat(14,27px)!important;grid-auto-rows:42px!important;min-height:42px!important}
  .okeyLounge .opRackSlot{width:27px!important;height:42px!important;min-width:27px!important;max-width:27px!important}
  .okeyLounge .opRackSlot .opTileFace{width:25px!important;height:40px!important;max-width:25px!important;min-width:25px!important}
  .okeyLounge .opRackSlot .opTileFace b{font-size:12px!important}
}