/* Styles for the content area: promo banners, featured events, legal pages, Apple sign-in, sign-in methods. */

/* ---- banner carousel: design area 320×100 (16:5) ---- */
.pbn{position:relative;display:flex;flex-direction:column;gap:8px}
.pbn-track{display:flex;direction:ltr;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:16px;
  aspect-ratio:16/5;width:100%;background:#0c0c0e;border:1px solid rgba(242,193,78,.35);
  box-shadow:0 0 0 1px rgba(242,193,78,.08),0 10px 26px rgba(0,0,0,.55),0 0 24px rgba(242,193,78,.08);overscroll-behavior-x:contain}
.pbn-track::-webkit-scrollbar{display:none}
.pbn-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;overflow:hidden;display:block;padding:0;margin:0;border:0;border-radius:0;background:linear-gradient(110deg,#141416 30%,#1d1d22 50%,#141416 70%);background-size:200% 100%;animation:shm 1.4s linear infinite}
.pbn-slide.sk{min-height:0;margin:0;border:0;border-radius:0}
.pbn-slide img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
.pbn-slide img.in{opacity:1}
.pbn-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 28%,rgba(0,0,0,0) 72%,rgba(0,0,0,.22))}
button.pbn-slide:active img{transform:scale(.985)}
.pbn-dots{display:flex;direction:ltr;justify-content:center;gap:6px;height:8px}
.pbn-dot{width:7px;height:7px;border-radius:4px;background:#3a3a42;transition:width .25s ease,background .25s ease}
.pbn-dot.on{width:22px;background:var(--gold);box-shadow:0 0 8px rgba(242,193,78,.5)}
.store-scr .pbn,.games-scr .pbn{margin-bottom:2px}

/* ---- featured event (#/event/<id>) ---- */
.ev-scr{gap:12px}
.ev-hero{aspect-ratio:16/5;border-radius:18px;overflow:hidden;border:1px solid rgba(242,193,78,.45);background:#0c0c0e;box-shadow:0 0 30px rgba(242,193,78,.12),0 12px 28px rgba(0,0,0,.6)}
.ev-hero.sk{margin:0;min-height:0}
.ev-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ev-hero-ph{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(80% 140% at 50% 0%,rgba(242,193,78,.35),transparent 70%)}
.ev-tag{align-self:flex-start}
.ev-desc{line-height:1.7;white-space:pre-line}
.ev-cd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid #26262b}
.ev-cd.ended{justify-content:center;color:var(--rd)}
.ev-cd-n{direction:ltr;gap:6px}
html[lang=ar] .ev-cd-n{direction:rtl}
.ev-u{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:5px 4px;border-radius:10px;background:var(--dark);border:1px solid #3A3A42}
.ev-u b{font-size:18px;line-height:1.1;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.ev-u i{font-style:normal;font-size:10px;color:var(--mu)}
.ev-ch{gap:12px}
.ev-ch .gi{flex:none}
.ev-grid{gap:10px}
.ev-it{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;overflow:hidden;padding:22px 8px 8px;border-radius:16px;
  background:radial-gradient(90% 60% at 50% 0%,rgba(242,193,78,.14),transparent 70%),var(--panel);border:1px solid var(--ln);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ev-it .it-img{margin:2px 0}
.ev-it.own{border-color:rgba(61,220,151,.4)}
.ev-it b{max-width:100%;font-size:12px}
.ev-it s{display:block;min-height:12px}
.ev-it s{line-height:1}
.ev-kind{position:absolute;top:6px;inset-inline-start:8px}
.ev-off{position:absolute;top:0;inset-inline-end:0;background:linear-gradient(180deg,#FF6B7A,#C92C3F);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-end-start-radius:10px}
.ev-buy{height:38px;width:100%;font-size:13px;border-radius:10px;padding:0 6px;gap:4px}
.ev-it .chip{height:34px;justify-content:center;width:100%}
.ev-it.sk{min-height:170px;margin:0}

/* ---- legal pages ---- */
.lg-tabs{flex:none}
.lg-pn{padding:16px 18px;border-color:var(--hair)}
.lg-sk{gap:10px;padding:4px 0}
.lg-sk i{display:block;height:11px;width:100%;border-radius:6px;background:linear-gradient(90deg,#17171A 0%,#26262C 50%,#17171A 100%) 0 0/200% 100%;animation:soSk 1.3s linear infinite}
.lg-sk i:first-child{height:15px}
.lg-upd{margin-bottom:10px}
.lg-doc{line-height:1.85;font-size:14px;color:#E6E6EC;overflow-wrap:anywhere}
.lg-doc h1,.lg-doc h2,.lg-doc h3{color:var(--gd);margin:18px 0 8px;font-size:16px}
.lg-doc h2:first-child,.lg-doc p:first-child{margin-top:0}
.lg-doc p{margin:0 0 10px}
.lg-doc ul,.lg-doc ol{margin:0 0 10px;padding-inline-start:20px}
.lg-doc li{margin-bottom:4px}
.lg-doc a{color:var(--gd);text-decoration:underline}
.lg-doc em{color:var(--mu)}
.lg-doc strong{color:#fff}
.lg-doc img{max-width:100%;height:auto;border-radius:10px}
.lg-doc table{width:100%;border-collapse:collapse;font-size:13px}
.lg-doc td,.lg-doc th{border:1px solid var(--ln);padding:6px}
.lg-md .lg-sheet{max-height:min(70vh,640px);overflow:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.lg-agree{line-height:1.8}
.lg-agree .link{font-size:inherit;text-decoration:underline;text-underline-offset:3px}
.lg-links{justify-content:center;gap:8px;margin-top:-4px}
.lg-links .link{color:var(--mu);font-weight:500}
.lg-links .link:hover,.lg-links .link:focus-visible{color:var(--gd)}

/* ---- Sign in with Apple (Apple's black button style) ---- */
.btn.apl{background:#000;color:#fff;border:1px solid #3d3d44;border-radius:24px;font-weight:600;font-size:15px;gap:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.btn.apl:hover{border-color:#5a5a62}
.btn.apl svg{margin-top:-2px}
.social-in .gbox .btn{border-radius:24px}

/* ---- sign-in methods (settings) ---- */
.lk-row .chip{height:30px;padding:0 12px}
.lk-apl{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:#fff}
.lk-row .g .num{direction:ltr}
@media (min-width:900px){
  .home:has(>.pbn:not([hidden])){grid-template-areas:"fav fav fr" "ban ban fr" "game chal fr" "game free fr" "game . fr"}
  .home>.pbn{grid-area:ban}
}
@media (min-width:900px){
  /* desktop: two banners side by side, each keeping the 320×100 proportions */
  .pbn-track{aspect-ratio:auto;gap:12px;background:none;border:0;box-shadow:none;border-radius:0}
  .pbn-slide{flex:0 0 calc(50% - 6px);aspect-ratio:16/5;height:auto;border-radius:16px;border:1px solid rgba(242,193,78,.35);box-shadow:0 10px 26px rgba(0,0,0,.5)}
  .pbn-slide:only-child{flex-basis:calc(50% - 6px)}
}
.pbn-fit .pbn-dots{display:none}