/* Lobby pop-up (js/casino-lobby.js): a provider's / category's games over the home page. Header like the Casino Balance
   pop-up (black gradient, gold title); the grid reuses the casino page's .casino-card tiles. Full screen on phones,
   a centred panel on wider screens. */
.cl-sheet[hidden] { display: none; }
.cl-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s; }
.cl-panel { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; top: 0; display: flex; flex-direction: column; background: #eee;
  transform: translateY(100%); transition: transform .25s ease; }
.cl-sheet.open .cl-mask { opacity: 1; }
.cl-sheet.open .cl-panel { transform: none; }
html.cl-open, html.cl-open body { overflow: hidden; }

.cl-head { flex: none; display: flex; align-items: center; height: 46px; padding: 0 0 0 14px; background: linear-gradient(180deg, #474747, #070707); }
.cl-head h2 { flex: 1; margin: 0; color: #ffb200; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-close { width: 46px; height: 46px; border: 0; border-left: 1px solid #000; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }

.cl-search { flex: none; padding: 8px 10px; background: #dfe4e7; border-bottom: 1px solid #c5ccd0; }
.cl-search input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #b9c2c7; border-radius: 4px; background: #fff; font-size: 15px; outline: 0; }
.cl-search input:focus { border-color: #ffb200; }

.cl-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 calc(16px + env(safe-area-inset-bottom)); }
.cl-msg { margin: 0; padding: 14px 10px; color: #555; font-size: 14px; text-align: center; }
.cl-msg:empty { display: none; }
.cl-more { display: block; margin: 6px auto 0; padding: 9px 22px; border: 1px solid #000; border-radius: 4px; background: linear-gradient(#444, #080808); color: #ffc219; font-size: 14px; font-weight: 700; cursor: pointer; }
.cl-more[hidden] { display: none; }

@media (min-width: 760px) {
  .cl-panel { top: 6vh; bottom: 6vh; left: 50%; right: auto; width: min(960px, 94vw); border-radius: 6px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    transform: translate(-50%, 30px); opacity: 0; transition: transform .25s ease, opacity .25s; }
  .cl-sheet.open .cl-panel { transform: translate(-50%, 0); opacity: 1; }
}