@font-face { font-family: "Site Poppins"; src: url("/_s/f/poppins-700.9338e65fc077.woff2") format("woff2"); font-display: swap; font-weight: 700; }
@font-face { font-family: "Site Inter"; src: url("/_s/f/inter-400.8909904ab6c8.woff2") format("woff2"); font-display: swap; font-weight: 400; }
@font-face { font-family: "Site Noto Nastaliq Urdu"; src: url("/_s/f/noto-nastaliq-urdu-400.fecd45d69436.woff2") format("woff2"); font-display: swap; font-weight: 400; unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
.site { --site-font-heading: "Site Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --site-font-body: "Site Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --site-font-urdu: "Site Noto Nastaliq Urdu", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif; --site-radius: 24px; --site-primary: #B8F23C; --site-secondary: #8B7CFF; --site-bg: #0E1220; --site-surface: #171C30; --site-text: #F2F4FA; --site-on-primary: #0F1A0A; --site-link: #B8F23C; --site-primary-deep: #CAF56F; --site-glow: #8B7CFF; color-scheme: dark; }
.site[data-scheme="light"] { --site-primary: #2F6A00; --site-secondary: #5B3FD6; --site-bg: #F4F6FB; --site-surface: #E6EAF5; --site-text: #10142A; --site-on-primary: #FFFFFF; --site-link: #2F6A00; --site-primary-deep: #234E00; --site-glow: #5B3FD6; color-scheme: light; }
.site[data-scheme="dark"] { --site-primary: #B8F23C; --site-secondary: #8B7CFF; --site-bg: #0E1220; --site-surface: #171C30; --site-text: #F2F4FA; --site-on-primary: #0F1A0A; --site-link: #B8F23C; --site-primary-deep: #CAF56F; --site-glow: #8B7CFF; color-scheme: dark; }
.site .viewer-coins::before {
content: "";
display: inline-block;
inline-size: 0.95em;
block-size: 0.95em;
margin-inline-end: 0.3em;
vertical-align: -0.12em;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff6c8 0 12%, #f5c542 32%, #b7791f 100%);
box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.14);
}
.site :is(h1, h2, h3, h4):lang(en) { font-family: var(--site-font-heading); }
.site:not(.site-chrome) {
background-image:
radial-gradient(ellipse 60% 40rem at 0% 100%, color-mix(in srgb, var(--site-primary) 36%, transparent), transparent 72%),
radial-gradient(ellipse 55% 34rem at 100% 0%, color-mix(in srgb, #2b7fff 32%, transparent), transparent 72%),
radial-gradient(ellipse 50% 30rem at 100% 100%, color-mix(in srgb, var(--site-primary) 18%, transparent), transparent 72%);
background-repeat: no-repeat;
}
.site .header {
background: color-mix(in srgb, var(--site-bg) 72%, transparent);
backdrop-filter: blur(14px);
box-shadow: 0 14px 30px -24px rgb(4 8 24 / 0.9);
}
.site nav a { gap: 0.5rem; }
.site nav a .icon { inline-size: 18px; block-size: 18px; flex: none; }
.site .hero.layout-banner {
box-shadow: none;
}
.site .hero.layout-banner .button.primary::before {
content: "";
inline-size: 0.6em;
block-size: 0.7em;
margin-inline-end: 0.65rem;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.site[dir="rtl"] .hero.layout-banner .button.primary::before { scale: -1 1; }
.site .button.primary,
.site .hero.layout-banner .button.primary {
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}
.site h2.statement-heading { font-size: clamp(2.2rem, 1.2rem + 3.2cqi, 3.5rem); }
.site .accent::after {
content: "\2726";
margin-inline-start: 0.2em;
font-size: 0.32em;
font-style: normal;
font-weight: 400;
vertical-align: super;
color: var(--site-primary);
}
.site .tile-art {
box-shadow: none;
}
.site .tile a:hover .tile-art,
.site .tile a:focus-visible .tile-art {
transform: translateY(-4px);
}
.site .chip {
gap: 0.45rem;
border-color: transparent;
background: color-mix(in srgb, var(--site-text) 7%, transparent);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
font-weight: 700;
backdrop-filter: blur(8px);
}
.site .chip .icon { inline-size: 16px; block-size: 16px; flex: none; }
.site .chip:has(:checked) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3); }
@keyframes look-shimmer { from { transform: translateX(calc(var(--dir) * -140%)) skewX(-18deg); } to { transform: translateX(calc(var(--dir) * 140%)) skewX(-18deg); } }
/* Hover or focus sweeps one soft band of light across a button, tile or chip (transform only, once). */
.site .tile-art::after { box-shadow: none; opacity: 1; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.34) 50%, transparent 65%); transform: translateX(calc(var(--dir) * -140%)) skewX(-18deg); }
.site .tile a:is(:hover, :focus-visible) .tile-art::after { animation: look-shimmer 0.9s ease-out; }
.site .chip { position: relative; overflow: hidden; }
.site .chip::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.34) 50%, transparent 65%); transform: translateX(calc(var(--dir) * -140%)) skewX(-18deg); }
.site .chip:is(:hover, :focus-within)::before { animation: look-shimmer 0.9s ease-out; }
.site .hero.layout-banner .button.primary { position: relative; overflow: hidden; }
.site .hero.layout-banner .button.primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.34) 50%, transparent 65%); transform: translateX(calc(var(--dir) * -140%)) skewX(-18deg); }
.site .hero.layout-banner .button.primary:is(:hover, :focus-visible)::after { animation: look-shimmer 0.9s ease-out; }
.site .featured.media-cover {
box-shadow: none;
}
.site .faq details {
background: color-mix(in srgb, var(--site-text) 6%, transparent);
border: 0;
border-radius: 14px;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
backdrop-filter: blur(8px);
}
.site .contact-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
gap: 0.75rem;
}
.site .contact-list li {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem;
border-radius: 16px;
background: color-mix(in srgb, var(--site-text) 6%, transparent);
border: 0;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
backdrop-filter: blur(8px);
}
.site .contact-icon {
display: grid;
place-items: center;
inline-size: 2.6rem;
block-size: 2.6rem;
border-radius: 12px;
color: var(--site-primary);
background: linear-gradient(180deg, color-mix(in srgb, var(--site-primary) 26%, transparent), color-mix(in srgb, var(--site-primary) 12%, transparent));
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 8px 12px -8px rgb(4 8 24 / 0.8);
}
.site .contact-icon .icon { inline-size: 22px; block-size: 22px; }
@container site (min-width: 1024px) { .site .statement-body { padding-inline-start: 2rem; border-inline-start: 1px solid var(--line); } }
@container site (min-width: 900px) { .site .text .rich:has(h2 ~ h2) { max-inline-size: none; column-count: 2; column-gap: 4rem; column-rule: 1px solid var(--line); } }
@container site (min-width: 900px) { .site .text .rich:has(h2 ~ h2) h2:nth-of-type(2) { break-before: column; margin-block-start: 0; } }
.site .brand { font-size: 1.3rem; font-weight: 700; }
.site .header-row .brand { margin-inline-end: 0; }
.site .header-row .language { margin-inline-start: auto; }
.site .nav-wide { margin-inline: 1.5rem 0; }
.site .nav-wide ul { gap: 0.25rem; }
.site .nav-wide a {
min-block-size: 40px;
padding-inline: 1rem;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
color: color-mix(in srgb, var(--site-text) 74%, var(--site-bg));
}
.site .nav-wide a::after { display: none; }
.site .nav-wide a:hover {
color: var(--site-text);
background: color-mix(in srgb, var(--site-text) 9%, transparent);
}
.site .nav-wide a[aria-current="page"] { color: var(--site-primary); background: none; box-shadow: none; }
.site .block-heading::before { display: none; }
.site .block-heading {
font-size: clamp(1.35rem, 1.05rem + 1.2cqi, 1.9rem);
font-weight: 700;
line-height: 1.15;
}
.site main.container { max-inline-size: 80rem; }
.site main { gap: 2rem; padding-block: 1.25rem 2.5rem; }
.site .hero.layout-banner { border-radius: 18px; background: linear-gradient(105deg, color-mix(in srgb, var(--site-secondary) 78%, #000), color-mix(in srgb, var(--site-secondary) 42%, #000)); }
.site h2.hero-heading { font-size: clamp(2rem, 1.4rem + 2.4cqi, 2.9rem); line-height: 1.05; }
.site .hero.layout-banner .accent { color: var(--site-primary); }
.site .hero.layout-banner .button.primary {
background: var(--site-primary);
color: var(--site-on-primary);
border-color: var(--site-primary);
}
.site .strip ul {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(12rem, 1fr);
justify-content: stretch;
gap: 0.6rem;
padding: 0;
border: 0;
mask-image: none;
overflow-x: auto;
scrollbar-width: none;
font-size: 0.9rem;
}
.site:lang(en) .strip ul { text-transform: none; letter-spacing: 0; }
.site .strip ul { padding-block: 1rem; margin-block: -0.25rem; }
.site .strip li {
--ring: #b45cff;
position: relative;
display: flex;
align-items: center;
min-block-size: 5.25rem;
padding-inline: 1.15rem 5.5rem;
border: 0;
border-radius: 20px;
overflow: hidden;
color: #ffffff;
font-weight: 800;
font-size: 1.05rem;
line-height: 1.15;
text-shadow: 0 2px 6px rgb(0 0 0 / 0.4);
background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 52%), linear-gradient(135deg, #4a1fb5, #7a2fe0);
box-shadow: none;
}
.site .strip li::before { content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.34) 50%, transparent 65%); transform: translateX(calc(var(--dir) * -140%)) skewX(-18deg); }
.site .strip li:is(:hover, :focus-within)::before { animation: look-shimmer 0.9s ease-out; }
.site .strip li::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 0 1.5rem color-mix(in srgb, var(--ring) 28%, transparent);
}
.site .strip li > span { position: relative; z-index: 1; max-inline-size: 7rem; }
.site .strip li > img { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: auto; max-inline-size: none; block-size: 100%; object-fit: cover; mask-image: linear-gradient(to right, transparent, #000 40%); }
.site[dir="rtl"] .strip li > img { transform: scaleX(-1); }
.site .strip li:hover { transform: translateY(-3px); }
.site .strip li:active { transform: translateY(2px); }
.site .strip li:nth-child(2) { --ring: #3ddc84; background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 52%), linear-gradient(135deg, #0d6b4a, #16915f); }
.site .strip li:nth-child(3) { --ring: #ff4da6; background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 52%), linear-gradient(135deg, #9c1058, #c8207a); }
.site .strip li:nth-child(4) { --ring: #ffae2b; background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 52%), linear-gradient(135deg, #8f4c08, #c46f0e); }
.site .strip li:nth-child(5) { --ring: #3aa0ff; background: linear-gradient(180deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 52%), linear-gradient(135deg, #0f4aa8, #1f78e0); }
.site .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.site .tile:first-child { grid-column: span 2; grid-row: span 2; }
@container site (min-width: 600px) { .site .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container site (min-width: 1100px) { .site .tiles { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
.site .tile a {
position: relative;
display: block;
overflow: hidden;
border-radius: 14px;
}
.site .tile-art { border-radius: 14px; }
.site .tile-badge { display: none; }
.site .tile .name {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: 1.75rem 0.65rem 0.55rem;
font-size: 0.85rem;
color: #ffffff;
background: linear-gradient(transparent, rgb(6 9 22 / 0.88));
}
@media (hover: hover) {
.site .tile .name { opacity: 0; }
.site .tile a:hover .name,
.site .tile a:focus-visible .name { opacity: 1; }
}
.site .chip { font-size: 0.8rem; }
.site .featured.media-cover { border: 0; border-radius: 18px; }
.site h2.statement-heading { font-size: clamp(1.9rem, 1.2rem + 2.8cqi, 3.2rem); }
.site .featured.media-cover .block-heading { font-size: clamp(1.9rem, 1.3rem + 2.4cqi, 2.9rem); }
.site .footer { border-block-start: 1px solid var(--line); background: none; }
.site .footer::before { display: none; }
@container site (min-width: 600px) { .site .hero.layout-banner { aspect-ratio: auto; min-block-size: 0; block-size: clamp(17rem, 24cqi, 19rem); } }
@container site (min-width: 600px) { .site .hero.layout-banner .hero-body { padding-block: 1.5rem; padding-inline: 2.5rem 0; align-self: center; } }
@container site (min-width: 600px) { .site .hero.layout-banner .hero-media::after { background: linear-gradient(to right, color-mix(in srgb, var(--site-secondary) 70%, #000) 18%, transparent 62%); } }
@container site (min-width: 600px) { .site[dir="rtl"] .hero.layout-banner .hero-media::after { background: linear-gradient(to left, color-mix(in srgb, var(--site-secondary) 70%, #000) 18%, transparent 62%); } }
@container site (min-width: 600px) { .site .hero.layout-banner .hero-media img { object-fit: cover; object-position: 78% 50%; } }
@container site (min-width: 600px) { .site .featured.media-cover { min-block-size: clamp(17rem, 24cqi, 20rem); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1.5rem; row-gap: 0; align-items: start; padding-block-end: 0; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) > *, .site:not(.site-chrome) main:has(.chips) .game-grid > * { grid-column: 2; margin-block-end: 2.5rem; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid { display: contents; } }
/* A signed-in player's header also has the tab row (M19-p4-t16), so the rail starts below both (about 7.9rem instead of 4.1rem). */
.site:has(.player-tabs) { --site-rail-top: 7.9rem; }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips { grid-column: 1; grid-row: 1 / span 24; position: sticky; inset-block-start: var(--site-rail-top, 4.1rem); z-index: 3; box-sizing: border-box; inline-size: 4rem; block-size: calc(100svh - var(--site-rail-top, 4.1rem)); justify-self: start; margin-block: -1.25rem 0; margin-inline-start: calc(-1 * (max(100cqi - 80rem, 0px) / 2 + var(--site-gap))); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.25rem; padding: 0.75rem 0.5rem; overflow-y: auto; scrollbar-width: none; border-radius: 0; background: var(--site-surface); box-shadow: 12px 0 28px -22px rgb(4 8 24 / 0.9); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip { justify-content: center; min-block-size: 44px; padding-inline: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; backdrop-filter: none; font-size: 0.9rem; font-weight: 700; white-space: nowrap; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips :is(.chip-label, .chip-count) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips:is(:hover, :focus-within) { inline-size: 15rem; box-shadow: 0 0 2.5rem rgb(0 0 0 / 0.45); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips:is(:hover, :focus-within) .chip { justify-content: flex-start; padding-inline: 0.85rem; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips:is(:hover, :focus-within) :is(.chip-label, .chip-count) { position: static; inline-size: auto; block-size: auto; overflow: visible; clip-path: none; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips:is(:hover, :focus-within) .chip-count { margin-inline-start: auto; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:hover { background: color-mix(in srgb, var(--site-text) 7%, transparent); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip { position: relative; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:has(:checked) { color: var(--site-link); background: none; box-shadow: none; } }
.site .game-grid .grid-more { display: none; }
.site .game-grid:not(:has(.chip [value]:not([value=""]):checked, .grid-more :checked)) .tiles .tile:nth-child(n + 16) { display: block; }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .icon { inline-size: 1.5rem; block-size: 1.5rem; color: color-mix(in srgb, var(--site-text) 42%, transparent); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:is(:hover, :focus-within) .icon { color: color-mix(in srgb, var(--site-text) 70%, transparent); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:has(:checked) .icon { color: var(--site-link); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip::before { display: none; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:first-child { position: relative; margin-block-end: 0.8rem; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:first-child::after { content: ""; position: absolute; inset-inline: 0.5rem; inset-block-end: -0.5rem; block-size: 1px; background: color-mix(in srgb, var(--site-text) 14%, transparent); } }
@container site (min-width: 1100px) { .site .look-switch { margin-inline-end: 1.5rem; } }
.site .hero::after,
.site .featured.media-icon .featured-media img { animation: none; }
.site .tile a::after {
box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--site-primary) 70%, transparent), 0 0 0 2px var(--site-primary),
0 0 22px -4px color-mix(in srgb, var(--site-secondary) 60%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.site *, .site *::before, .site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.site :is(a, .button):is(:hover, :active, :focus-visible),
.site :is(a, .featured):is(:hover, :focus-visible) :is(img, .initial) { transform: none !important; }
}