/* ============================================================================
   UNIFIED PROVIDER LOBBY  (2026-07-22)
   One template for every game provider. Design = Mz finalized spec; primitives
   (underwater shell, fzRays/fzBubble beams, --fz-* tokens) from the design source.
   RED LINE: this file is skin only — game launch handler/API/auth untouched.
   Structure: .pl-back(overlay) > .pl-modal > .pl-head(fixed) / .pl-tools(fixed)
              / .pl-grid(scroll) / .pl-foot(fixed).
   ============================================================================ */

/* ---- overlay + shell ---- */
.pl-back{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(4,8,12,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:var(--fz-font-body,Inter,-apple-system,sans-serif); }
.pl-back.show{ display:flex; animation:fzFadeIn .18s ease; }

.pl-modal{ position:relative; width:100%; max-width:680px; max-height:88dvh; display:flex; flex-direction:column;
  overflow:hidden; border-radius:18px; color:var(--fz-text,#E8EAEF);
  background:linear-gradient(180deg, rgba(9,38,50,.85) 0%, rgba(4,14,22,.94) 100%),
    url('../img/bg/underwater-modal.jpg') center / cover no-repeat;
  border:1px solid rgba(41,182,232,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 32px rgba(41,182,232,.16), 0 30px 80px rgba(0,0,0,.6);
  animation:fzSheetIn .22s ease; }

/* ============================ 2. provider header band (118px) ============================ */
.pl-head{ position:relative; flex:0 0 118px; height:118px; overflow:hidden;
  border-bottom:1px solid var(--fz-teal-line,rgba(41,182,232,.16)); }
.pl-head__cover{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(6px) saturate(1.3); transform:scale(1.12); opacity:.5; }
.pl-head__wash{ position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(6,17,25,.92) 0%, rgba(41,182,232,.10) 100%),
             linear-gradient(180deg, rgba(41,182,232,.14) 0%, transparent 45%, rgba(4,12,18,.55) 100%); }
.pl-head__topline{ position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(190,235,255,.5), transparent); }
/* light beams (design source fzRays) */
.pl-head__beam{ position:absolute; top:-20px; pointer-events:none;
  background:linear-gradient(180deg, rgba(190,235,255,.26), transparent 80%);
  transform:skewX(-13deg); filter:blur(6px); }
.pl-head__beam.b1{ left:20%; width:44px; height:130px; animation:fzRays 7s ease-in-out infinite; }
.pl-head__beam.b2{ left:62%; width:30px; height:112px; opacity:.5; filter:blur(7px); animation:fzRays 9s ease-in-out 1.2s infinite; }
/* micro bubbles (design source fzBubble) */
.pl-head__bub{ position:absolute; bottom:-8px; border-radius:50%; pointer-events:none;
  border:1px solid rgba(210,240,255,.5);
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), rgba(190,235,255,.08)); }
.pl-head__bub.u1{ left:16%; width:7px; height:7px; animation:fzBubble 5.5s linear infinite; }
.pl-head__bub.u2{ left:78%; width:5px; height:5px; animation:fzBubble 7s linear 2s infinite; }

.pl-head__row{ position:relative; z-index:2; height:100%; display:flex; align-items:center; gap:16px; padding:0 20px; }
/* 72px logo block with conic sweep halo; teal-gradient base + first-letter fallback */
.pl-logo{ position:relative; flex:0 0 72px; width:72px; height:72px; border-radius:18px; overflow:visible;
  border:2px solid rgba(96,206,238,.6); background:linear-gradient(135deg, var(--fz-teal,#0E4D54), var(--fz-teal-2,#0B3A42));
  box-shadow:0 0 24px rgba(41,182,232,.4), inset 0 1px 0 rgba(255,255,255,.12); }
.pl-logo::before{ content:""; position:absolute; inset:-5px; border-radius:22px; z-index:0; filter:blur(6px);
  background:conic-gradient(from 0deg, rgba(41,182,232,.6), rgba(245,200,66,.3), rgba(41,182,232,.6), rgba(245,200,66,.3), rgba(41,182,232,.6)); }
.pl-logo__ltr{ position:absolute; inset:0; z-index:1; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-family:var(--fz-font-display,Oswald,sans-serif); font-size:30px; font-weight:700; text-transform:uppercase; color:var(--fz-cyan,#29B6E8); }
.pl-logo img{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; display:block; border-radius:16px; }
/* title area — name + type badge on one row, pills below */
.pl-titles{ flex:1; min-width:0; }
.pl-title-row{ display:flex; align-items:center; gap:10px; min-width:0; }
.pl-name{ font-family:var(--fz-font-display,Oswald,sans-serif); font-size:25px; font-weight:700;
  line-height:1.05; text-transform:uppercase; letter-spacing:.03em; color:#fff;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-type{ flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:6px;
  background:var(--fz-cyan-soft,rgba(41,182,232,.12)); color:var(--fz-cyan,#29B6E8); border:1px solid rgba(41,182,232,.35); }
.pl-caps{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.pl-pill-games{ font-family:var(--fz-font-mono,'JetBrains Mono',monospace); font-size:10.5px; font-weight:700;
  letter-spacing:.04em; padding:3px 10px; border-radius:999px; color:var(--fz-gold,#F5C842);
  background:var(--fz-gold-soft,rgba(245,200,66,.12)); border:1px solid rgba(245,200,66,.4); white-space:nowrap; }
.pl-pill-live{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.03em; padding:3px 10px; border-radius:999px; color:var(--fz-green,#1ED571);
  background:rgba(30,213,113,.1); border:1px solid rgba(30,213,113,.3); white-space:nowrap; }
.pl-pill-live i{ width:6px; height:6px; border-radius:50%; background:var(--fz-green,#1ED571);
  box-shadow:0 0 6px var(--fz-green,#1ED571); animation:fzDotBreathe 1.6s ease-in-out infinite; }
/* close X (unify-compatible: reuse the round chip look) */
.pl-x{ align-self:flex-start; margin-top:14px; flex:0 0 auto;
  width:32px; min-width:32px; max-width:32px; height:32px; min-height:32px; max-height:32px;
  aspect-ratio:1/1; box-sizing:border-box; line-height:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; position:relative;
  background:rgba(7,8,13,.4); border:1px solid rgba(210,240,255,.2); color:var(--fz-text-2,#A6B0BC); }
.pl-x:hover{ border-color:var(--fz-cyan,#29B6E8); color:#fff; }
.pl-x::after{ content:""; position:absolute; inset:-6px; }
.pl-x svg{ width:16px; height:16px; }

/* ============================ 3. search + filter row ============================ */
.pl-tools{ flex:0 0 auto; padding:14px 20px 0; display:flex; align-items:center; gap:10px; }
.pl-search{ position:relative; flex:1; min-width:0; }
.pl-search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:15px; height:15px;
  color:var(--fz-cyan,#29B6E8); pointer-events:none; }
.pl-search input{ width:100%; height:38px; box-sizing:border-box; padding:0 14px 0 38px; border-radius:999px;
  font-size:13px; color:var(--fz-text,#E8EAEF); font-family:inherit;
  background:rgba(4,16,24,.65); border:1.5px solid var(--fz-line-2,rgba(255,255,255,.14));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35); outline:none; }
.pl-search input::placeholder{ color:var(--fz-text-3,#6E7B88); }
.pl-search input:focus{ border-color:var(--fz-cyan,#29B6E8); }
.pl-seg{ flex:0 0 auto; display:flex; gap:2px; padding:4px; border-radius:999px;
  background:rgba(4,16,24,.65); border:1px solid var(--fz-line,rgba(255,255,255,.08)); }
.pl-seg button{ height:32px; padding:0 13px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit; background:transparent; color:var(--fz-text-3,#6E7B88); white-space:nowrap; }
.pl-seg button.on{ background:var(--fz-cyan-soft,rgba(41,182,232,.14)); color:var(--fz-cyan,#29B6E8);
  border-color:rgba(41,182,232,.5); }

/* ---- category rail (per-provider game categories, data-driven) ----
   Same pill spec as .pl-seg above so the two rows read as one control family. Separate class
   on purpose: bindTools() clears .pl-seg's active state with an unscoped selector and would
   otherwise wipe this row's selection too. Horizontal scroller copied from .nf-tabs
   (assets/css/notifications-v2.css) — note ::-webkit-scrollbar needs HEIGHT here, not width. */
.pl-cats-wrap{ flex:0 0 auto; padding:10px 20px 0; overflow:hidden; }
.pl-cats{ display:flex; gap:2px; padding:4px; border-radius:999px; width:max-content; max-width:100%;
  background:rgba(4,16,24,.65); border:1px solid var(--fz-line,rgba(255,255,255,.08));
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.pl-cats::-webkit-scrollbar{ height:0; }
.pl-cats button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 13px; border:1px solid transparent; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:800; font-family:inherit; background:transparent;
  color:var(--fz-text-3,#6E7B88); white-space:nowrap; }
.pl-cats button svg{ width:15px; height:15px; flex:0 0 auto; opacity:.9; }
.pl-cats button.on{ background:var(--fz-cyan-soft,rgba(41,182,232,.14)); color:var(--fz-cyan,#29B6E8);
  border-color:rgba(41,182,232,.5); }
.pl-cats__n{ font-size:10px; font-weight:900; padding:1px 6px; border-radius:999px;
  background:rgba(255,255,255,.07); color:var(--fz-text-3,#6E7B88); }
.pl-cats button.on .pl-cats__n{ background:rgba(41,182,232,.2); color:var(--fz-cyan,#29B6E8); }

/* ============================ 4. game tile grid ============================ */
.pl-grid-wrap{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:16px 20px 20px; -webkit-overflow-scrolling:touch; }
.pl-grid-wrap::-webkit-scrollbar{ width:0; }
.pl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:10px; }

.pl-tile{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; cursor:pointer;
  border:1px solid var(--fz-line,rgba(255,255,255,.08)); background:#0B3A42;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation:fzTileIn .32s ease backwards; }
.pl-tile:nth-child(1){ animation-delay:.04s } .pl-tile:nth-child(2){ animation-delay:.08s }
.pl-tile:nth-child(3){ animation-delay:.12s } .pl-tile:nth-child(4){ animation-delay:.16s }
.pl-tile:nth-child(5){ animation-delay:.20s } .pl-tile:nth-child(6){ animation-delay:.24s }
.pl-tile:nth-child(7){ animation-delay:.28s } .pl-tile:nth-child(8){ animation-delay:.32s }
.pl-tile:nth-child(9){ animation-delay:.36s }
.pl-tile--noanim{ animation:none !important; }   /* Show-all appended tiles show directly */
.pl-tile__sk{ position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, #0d2c34 20%, #16414c 40%, #0d2c34 60%); background-size:200% 100%;
  animation:fzShimmer 1.4s linear infinite; }
.pl-tile__img{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease; }
.pl-tile__shade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 40%, rgba(4,12,18,.94) 100%); }
.pl-tile__hover{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .18s ease;
  background:rgba(4,12,18,.32); }
.pl-tile__top{ position:absolute; top:0; left:0; right:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.pl-tile__badge{ position:absolute; top:8px; left:8px; z-index:4; font-size:8.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.4); }
.pl-tile__badge.hot{ background:linear-gradient(180deg,#FF3D64,#A81234); }
.pl-tile__badge.new{ background:linear-gradient(180deg,#1ED571,#0F7A40); color:#04230F; }
.pl-tile__play{ position:absolute; top:50%; left:50%; z-index:4; width:42px; height:42px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.7); opacity:0; transition:opacity .18s ease, transform .18s ease;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--fz-cyan,#29B6E8), var(--fz-cyan-deep,#1B7FA8));
  box-shadow:0 4px 14px rgba(41,182,232,.5); color:var(--fz-on-cyan,#04222E); }
.pl-tile__play svg{ width:16px; height:16px; margin-left:2px; }
.pl-tile__name{ position:absolute; left:0; right:0; bottom:0; z-index:4; padding:8px 9px; }
.pl-tile__t{ font-family:var(--fz-font-display,Oswald,sans-serif); font-size:12.5px; font-weight:700;
  line-height:1.1; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.7);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pl-tile__sub{ margin-top:2px; font-size:8.5px; font-weight:600; color:var(--fz-text-2,#A6B0BC);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* hover triple effect */
.pl-tile:hover{ transform:translateY(-4px); border-color:rgba(41,182,232,.55);
  box-shadow:0 12px 26px rgba(0,0,0,.5), 0 0 16px rgba(41,182,232,.22); }
.pl-tile:hover .pl-tile__img{ transform:scale(1.08); }
.pl-tile:hover .pl-tile__hover{ opacity:1; }
.pl-tile:hover .pl-tile__play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- 5. load more + empty ---- */
.pl-more{ width:100%; height:42px; margin-top:14px; border-radius:12px; cursor:pointer;
  font-size:13px; font-weight:800; font-family:inherit; color:var(--fz-cyan,#29B6E8);
  background:rgba(4,16,24,.55); border:1px solid var(--fz-line-2,rgba(255,255,255,.14)); }
.pl-more:hover{ border-color:var(--fz-cyan,#29B6E8); box-shadow:0 0 16px rgba(41,182,232,.2); }
.pl-empty{ text-align:center; padding:40px 16px; color:var(--fz-text-3,#6E7B88); }
.pl-empty svg{ width:34px; height:34px; opacity:.6; margin-bottom:10px; }
.pl-empty div{ font-size:13px; }

/* ---- enter-lobby mode (direct-launch / live providers, no game list) ---- */
.pl-enter{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:34px 24px 40px; text-align:center; }
.pl-enter__msg{ font-size:13px; color:var(--fz-text-2,#A6B0BC); max-width:340px; line-height:1.5; }
.pl-enter__btn{ min-width:220px; height:52px; padding:0 26px; border-radius:14px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:800; font-family:inherit; letter-spacing:.03em; text-transform:uppercase;
  color:var(--fz-on-cyan,#04222E); background:linear-gradient(180deg, var(--fz-cyan-bright,#0CC0FF), var(--fz-cyan-deep,#1B7FA8));
  box-shadow:0 6px 22px -4px rgba(41,182,232,.55), inset 0 1px 0 rgba(255,255,255,.3); }
.pl-enter__btn:hover{ transform:translateY(-2px); }
.pl-enter__btn:active{ transform:scale(.98); }
.pl-enter__btn svg{ width:18px; height:18px; }

/* ============================ 6. bottom info bar ============================ */
.pl-foot{ flex:0 0 auto; padding:9px 20px calc(9px + env(safe-area-inset-bottom,0px)); text-align:center;
  font-size:10.5px; color:var(--fz-text-3,#6E7B88); border-top:1px solid var(--fz-line,rgba(255,255,255,.08));
  background:rgba(4,12,18,.55); }

/* ============================ keyframes ============================ */
@keyframes fzShimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
@keyframes fzTileIn{ 0%{ opacity:0; transform:translateY(10px) } 100%{ opacity:1; transform:translateY(0) } }
@keyframes fzRays{ 0%,100%{ transform:translateX(-6px) skewX(-13deg); opacity:.8 } 50%{ transform:translateX(10px) skewX(-13deg); opacity:1 } }
@keyframes fzBubble{ 0%{ transform:translateY(0) scale(.7); opacity:0 } 12%{ opacity:.85 } 85%{ opacity:.5 } 100%{ transform:translateY(-120px) translateX(10px) scale(1); opacity:0 } }
@keyframes fzDotBreathe{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
@keyframes fzFadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes fzSheetIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* ============================ mobile <980 = full bottom-sheet ============================ */
@media (max-width:979px){
  .pl-back{ align-items:flex-end; padding:0; }
  .pl-modal{ max-width:none; width:100%; max-height:92dvh; border-radius:18px 18px 0 0; border-bottom:0;
    animation:fzSheetUp .26s cubic-bezier(.22,1,.36,1); }
  /* clamp the header band on small screens */
  .pl-head{ flex-basis:clamp(94px,24vw,118px); height:clamp(94px,24vw,118px); }
  .pl-logo{ flex:0 0 clamp(54px,15vw,72px); width:clamp(54px,15vw,72px); height:clamp(54px,15vw,72px); }
  .pl-name{ font-size:clamp(18px,5.5vw,25px); }
  .pl-head__row{ gap:12px; }
  /* search row may wrap; search keeps a comfortable min */
  .pl-tools{ flex-wrap:wrap; }
  .pl-search{ flex:1 1 190px; }
  /* the rail scrolls instead of wrapping so it never eats a second row of modal height —
     .pl-grid-wrap is the only flex:1 child, every px here comes straight off the grid */
  .pl-cats-wrap{ padding:8px 14px 0; }
  .pl-cats button{ padding:0 11px; }
  .pl-grid{ grid-template-columns:repeat(auto-fill, minmax(122px, 1fr)); }
}
@keyframes fzSheetUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }

/* ── brand preview (enter mode, Mz 2026-07-27) ─────────────────────────────
   Live casino / sportsbook / official-lobby providers: banner + tagline +
   game-type chips + feature tags + one big ENTER. */
.pl-preview{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:22px 24px 26px; text-align:center; overflow-y:auto; }
.pl-prev__banner{ width:100%; max-width:520px; height:150px; border-radius:16px; background-size:cover; background-position:center;
  position:relative; overflow:hidden; flex:0 0 auto; border:1px solid rgba(150,225,250,.18); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.pl-prev__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,12,18,0) 30%, rgba(4,12,18,.72)); }
.pl-prev__live{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:800; letter-spacing:1.2px; color:#fff; padding:4px 10px; border-radius:999px;
  background:rgba(7,10,16,.55); border:1px solid rgba(30,213,113,.45); backdrop-filter:blur(6px); }
.pl-prev__live i{ width:7px; height:7px; border-radius:50%; background:var(--fz-green,#1ED571);
  box-shadow:0 0 6px var(--fz-green,#1ED571); animation:fzDotBreathe 1.6s ease-in-out infinite; }
.pl-prev__tag{ font-size:13.5px; color:var(--fz-text-2,#A6B0BC); max-width:420px; line-height:1.55; }
.pl-prev__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:460px; }
.pl-prev__chip{ font-size:12px; font-weight:700; color:#CFEFFB; padding:7px 14px; border-radius:999px;
  background:linear-gradient(180deg, rgba(14,44,58,.7), rgba(5,16,24,.85)); border:1px solid rgba(150,225,250,.28); }
.pl-prev__tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pl-prev__tagpill{ font-size:10.5px; font-weight:600; letter-spacing:.4px; color:var(--fz-text-3,#7d8aa0);
  padding:4px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
@media (max-width:979px){
  .pl-prev__banner{ height:120px; }
  .pl-preview{ padding:16px 16px 22px; }
}