@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(circle 440px at 0% 100%, transparent 420px, color-mix(in srgb, var(--site-primary) 45%, transparent) 423px, transparent 428px),
radial-gradient(circle 360px at 100% 0%, transparent 340px, color-mix(in srgb, #2bb7ff 40%, transparent) 343px, transparent 348px),
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);
border-block-end: 1px solid color-mix(in srgb, var(--site-text) 10%, transparent);
}
.site nav a { gap: 0.5rem; }
.site nav a .icon { inline-size: 18px; block-size: 18px; flex: none; }
.site .hero.layout-banner {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-primary) 45%, transparent), 0 0 44px -10px color-mix(in srgb, var(--site-primary) 55%, transparent);
}
.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: 0 10px 26px -10px color-mix(in srgb, var(--site-primary) 75%, transparent), 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: 0 0 0 1px color-mix(in srgb, var(--site-text) 14%, transparent), 0 12px 28px -16px color-mix(in srgb, var(--site-primary) 60%, transparent);
}
.site .tile a:hover .tile-art,
.site .tile a:focus-visible .tile-art {
box-shadow: 0 0 0 2px var(--site-primary), 0 14px 34px -12px color-mix(in srgb, var(--site-primary) 75%, transparent);
}
.site .chip {
gap: 0.45rem;
background: color-mix(in srgb, var(--site-text) 5%, transparent);
backdrop-filter: blur(8px);
}
.site .chip .icon { inline-size: 16px; block-size: 16px; flex: none; }
.site .chip:has(:checked) { box-shadow: 0 0 20px -6px var(--site-primary); }
.site .featured.media-cover {
box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-secondary) 45%, transparent), 0 0 46px -14px color-mix(in srgb, var(--site-secondary) 65%, transparent);
}
.site .faq details {
background: color-mix(in srgb, var(--site-text) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent);
border-radius: 14px;
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) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent);
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: color-mix(in srgb, var(--site-primary) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-primary) 35%, transparent);
}
.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-text);
background: color-mix(in srgb, var(--site-primary) 20%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-primary) 45%, transparent);
}
.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: 0 0 1.25rem color-mix(in srgb, var(--ring) 40%, transparent), 0 10px 20px rgb(0 0 0 / 0.35);
}
.site .strip li::before { display: none; }
.site .strip li::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--ring), inset 0 0 1rem color-mix(in srgb, var(--ring) 55%, 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(-2px); }
.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; box-shadow: none; }
.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; } }
@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: 2rem; } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid { display: contents; } }
@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: 4.1rem; z-index: 3; box-sizing: border-box; inline-size: 4rem; block-size: calc(100svh - 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); border-inline-end: 1px solid color-mix(in srgb, var(--site-text) 12%, transparent); } }
@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; font-size: 0.9rem; 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) 8%, transparent); } }
@container site (min-width: 1100px) { .site:not(.site-chrome) main:has(.chips) .game-grid > .chips .chip:has(:checked) { color: var(--site-text); background: color-mix(in srgb, var(--site-primary) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--site-primary) 45%, transparent); } }
.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: var(--site-link); fill: currentColor; stroke: var(--site-surface); stroke-width: 1.6; } }
@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; }
}