/* Black and crimson palette. Loaded after the responsive layout. */
:root {
  color-scheme: dark;
  --cream: #0c0c0f;
  --ink: #f2f0f2;
  --teal: #ff4051;
  --gold: #ff4051;
  --sand: #82404a;
  --muted: #a6a2ab;
  --line: #2b262e;
}
body { background: radial-gradient(ellipse at 15% 15%, #350b141f, transparent 45%), var(--cream); }
::selection { background: #b51c35; color: #fff; }
.announcement { background: #9f152a; color: #fff; }
.announcement span { color: #ffbec6; }
.brand, h1, h2 { color: #f7f3f5; }
.brand-light { color: #ff4051; }
.button, .filters button.selected { background: #d91e38; color: #fff; }
.button:hover { background: #f02c46; }
.button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #ff7a88; }
.hero-copy > p, .hero-notes, .experience > div > p { color: #aaa5af; }
.play-icon { border-color: #63404b; }
.arch { background: linear-gradient(125deg, #7e172b, #380c19 58%, #190b13); border-color: #421d29; box-shadow: 0 0 0 2px #7a3345, 0 0 0 11px #171016, 0 20px 65px #d9182920; }
.arch-inner { border-color: #ff68764d; }
.arch-pattern { background-image: repeating-conic-gradient(from 45deg, transparent 0% 25%, #ff809409 0% 50%); }
.arch-caption { color: #e4a3ad; }
.sunburst { color: #ff4051; }
.card { background: #f7f0f1; border-color: #fff8fa; outline-color: #c7a2ae; color: #231620; box-shadow: 4px 17px 20px #0007; }
.card-front { background: linear-gradient(125deg, #fff9fa, #dfd1d7); }
.card-back { color: #b51c35; background: repeating-linear-gradient(45deg, #f7edef 0px 8px, #ecdfe3 8px 9px); }
.card-spade { text-shadow: 1px 3px 0 #b08e9c; }
.card-king { border-color: #bd6c80; }
.chip { background: repeating-conic-gradient(#d52740 0deg 22deg, #ffe0e6 22deg 32deg); box-shadow: 4px 10px 0 #6f1528, 7px 17px 15px #0008; }
.chip span { border-color: #ffc3cd; outline-color: #7c2537; background: linear-gradient(120deg, #ef566d, #a50d2a); color: #fff0f4; }
.art-floor { background: linear-gradient(#17071100, #170711); }
.orbit { border-color: #ff405126; }
.floating-label { background: #1b141c; border-color: #51303c; box-shadow: 0 10px 35px #0005; }
.art-index { color: #aaa0aa; }
.filters button { color: #b8b0bc; }
.search { background: #151318; }
.search input::placeholder { color: #aaa2ae; }
.tag { background: #3e1423; color: #ffb4c0; }
.art-title { color: #fff0f4; }
.treasure { background: radial-gradient(ellipse at 50% 30%, #9c334c, #300b19); }
.treasure:before { border-color: #e5759566; }
.jewel { color: #ff7c97; text-shadow: 0 7px 0 #992c4d, 0 12px 30px #ff235c70; }
.blackjack { background: radial-gradient(at top, #51404f, #1b111d); }
.mini-card { background: #f5eaf0; border-color: #fff5fa; color: #2a1828; }
.mini-card.second { color: #b81d3d; }
.roulette { background: radial-gradient(at top, #84283b, #240c15); }
.roulette-wheel { border-color: #bc7a8b; background: repeating-conic-gradient(#251724 0 12deg, #c42a48 12deg 24deg, #edcad7 24deg 25deg); box-shadow: 0 0 0 4px #4d2536, 0 8px 0 5px #6d3045; }
.roulette-wheel span { border-color: #d9a1b3; background: radial-gradient(#c55b78, #68243c); color: #ffe5ed; }
.flight { background: radial-gradient(at top, #582137, #180f1d); }
.flight:before { color: #e3a4bf70; }
.bird { color: #ff8baa; text-shadow: -7px 8px 0 #a43256; }
.flight-trail { border-color: #f17199; box-shadow: 0 5px 13px -7px #ffb1cf; }
.game-launch { background: #35061488; }
.experience { background: #181218; border-color: #39232e; }
.experience-symbol { color: #bd2845; }
.experience-symbol span { color: #fff1f5; }
.experience-decoration { color: #ff405114; }
.closing { background: linear-gradient(115deg, #631126, #2c0f1c); border: 1px solid #752438; }
.closing h2 { color: #fff4f7; }
.closing p { color: #d1a9b7; }
.button.gold { background: #e52b46; color: #fff; }
.button.gold:hover { background: #ff4058; }
.age { color: #e0a0b1; }
dialog { background: #171118; border-color: #783347; box-shadow: 0 30px 100px #0009; }
dialog::backdrop { background: #090509dd; }
.demo-reels span { background: #2a1723; border-color: #753046; }

/* Persian-inspired interlaced stars and woven border details. */
.announcement {
  background-image: linear-gradient(#9f152ae8, #9f152ae8), url('assets/persian-tile.svg');
  background-size: auto, 60px;
}
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: '';
  position: absolute;
  inset: 20px 48% 25px -4%;
  background: url('assets/persian-tile.svg') center / 110px;
  opacity: .13;
  mask-image: radial-gradient(ellipse, #000 15%, transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.arch-pattern {
  background: url('assets/persian-tile.svg') center top / 88px;
  opacity: .38;
  mask-image: linear-gradient(#000 25%, #0005 90%);
}
.arch-inner::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid #e45a702e;
  border-radius: inherit;
}
.arch-caption { top: 52px; letter-spacing: 3px; }
.feature-strip { position: relative; margin-top: 14px; }
.feature-strip::before {
  content: '';
  position: absolute;
  top: -21px;
  inset-inline: 0;
  height: 14px;
  background: url('assets/persian-border.svg') center / 80px 14px repeat-x;
  opacity: .45;
  pointer-events: none;
}
.experience { isolation: isolate; }
.experience::before {
  content: '';
  position: absolute;
  inset: 0 0 0 52%;
  background: url('assets/persian-tile.svg') center / 96px;
  opacity: .16;
  mask-image: linear-gradient(to left, #000, #000 55%, transparent);
  z-index: -1;
  pointer-events: none;
}
.experience-symbol {
  font-size: 0;
  height: 230px;
  display: grid;
  place-items: center;
}
.experience-symbol::before {
  content: '';
  width: 220px;
  height: 220px;
  background: url('assets/persian-tile.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 18px #f02c4626);
}
.experience-symbol span {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, #301320, #181218 72%);
  font-size: 12px;
}
.experience-decoration { display: none; }
.closing { isolation: isolate; }
.closing::after {
  content: '';
  inset: 0;
  background: url('assets/persian-tile.svg') center / 100px;
  opacity: .18;
  mask-image: linear-gradient(to left, transparent 25%, #000 60%, transparent);
  z-index: -1;
}
.footer-bottom {
  border-top: 0;
  background: url('assets/persian-border.svg') center top / 80px 14px repeat-x;
  padding-top: 32px;
}
@media (max-width: 760px) {
  .hero::before { inset: 40% -4% 0; opacity: .12; }
  .experience::before {
    inset: 0 0 45%;
    mask-image: linear-gradient(#000, transparent);
  }
  .experience-symbol { height: 180px; }
  .experience-symbol::before { width: 176px; height: 176px; }
  .experience-symbol span { width: 86px; height: 86px; font-size: 10px; }
  .closing::after { mask-image: linear-gradient(transparent, #000); }
}

/* Keep the language switch available on every screen size. */
.header-actions .language { display: inline-flex; white-space: nowrap; }
@media (max-width: 760px) { .header-actions { gap: 10px; } .header-actions .button { display: none; } }

/* Shared language control, including mobile layouts. */
.language.language-switch { display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.language-switch:hover { color: var(--gold); border-color: var(--sand); }
.language.language-switch { gap: 6px; }
.language-icon { width: 16px; height: 16px; flex-shrink: 0; }
.page-header > .brand { margin-inline-end: auto; }
@media (max-width: 760px) {
  .page-header { height: auto; min-height: 85px; padding-block: 16px; flex-wrap: wrap; gap: 12px; }
  .page-header > .brand { flex-grow: 1; }
  .page-header > .text-link { font-size: 11px; }
}

/* Shared navigation for both language versions. */
html { scroll-padding-top: 128px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
  grid-template-areas: "brand navigation language";
  align-items: center;
  direction: ltr;
  height: auto;
  min-height: 108px;
  padding-block: 20px;
  gap: 20px;
  background: var(--cream);
  box-shadow: 0 10px 24px #0003;
}
.site-header .brand { grid-area: brand; justify-self: start; margin: 0; }
.site-header .site-navigation { grid-area: navigation; justify-self: center; }
.site-header .language-switch { grid-area: language; justify-self: end; }
html[lang="fa"] .site-header .site-navigation,
html[lang="fa"] .site-header .language-switch { direction: rtl; }
.site-header .site-navigation { display: flex; position: static; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 0; border: 0; box-shadow: none; background: transparent; }
.site-header .menu-toggle { display: none; }
.site-header .site-navigation .active::after { content: none; }
.information-page { min-height: 60vh; padding-block: 60px; }
.information-page h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.5; letter-spacing: -1px; }
.information-intro { color: var(--muted); font-size: 16px; line-height: 2; }
.information-card { margin-top: 35px; padding: 30px; border: 1px solid var(--line); border-radius: 14px; background: #171118; }
.information-card h2 { font-size: 24px; }
.information-card p { max-width: 780px; color: var(--muted); font-size: 16px; line-height: 2; }
@media (max-width: 1050px) {
  html { scroll-padding-top: 180px; }
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "brand language" "navigation navigation"; }
  .site-header .site-navigation { gap: 10px 20px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 100px; }
  .site-header { width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand language toggle"; min-height: 85px; padding: 15px 5%; gap: 12px; }
  .site-header .menu-toggle { grid-area: toggle; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; border-radius: 6px; color: var(--ink); }
  .menu-toggle svg { display: block; width: 22px; height: 22px; }
  .menu-toggle .menu-close { display: none; }
  .menu-toggle[aria-expanded="true"] { color: var(--gold); }
  .menu-toggle[aria-expanded="true"] .menu-lines { display: none; }
  .menu-toggle[aria-expanded="true"] .menu-close { display: block; }
  .site-header .site-navigation { display: none; position: absolute; top: 100%; left: 0; right: 0; grid-area: auto; width: 100%; max-height: calc(100dvh - 100px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0 5% 12px; border: 0; border-radius: 0; background: var(--cream); box-shadow: 0 18px 30px #0006; }
  .site-header .site-navigation.open { display: flex; animation: mobile-menu-open 180ms ease-out; }
  .site-header .site-navigation a { font-size: 15px; font-weight: 600; line-height: 1.5; padding: 17px 0; text-align: start; border-bottom: 1px solid var(--line); transition: color 150ms, background-color 150ms; }
  .site-header .site-navigation a:hover,
  .site-header .site-navigation a:active { color: var(--gold); background-color: #ff405108; }
  .site-header .brand-logo { width: min(150px, 100%); }
  .site-header .brand { min-width: 0; }
  .information-page { padding-block: 30px; }
  .information-card { padding: 22px; }
}
@keyframes mobile-menu-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-navigation.open { animation: none; }
  .site-header .site-navigation a { transition: none; }
}

/* Shared XpariBet logo. */
.site-footer { position: relative; isolation: isolate; margin-top: 64px; padding: 48px 0 0; border-top: 1px solid #682332; background: #100d11; overflow: hidden; }
.site-footer::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/assets/persian-tile.svg') center / 110px; opacity: .06; }
.site-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 56px; padding-bottom: 40px; }
.site-footer-brand p { max-width: 320px; margin: 20px 0 0; font-size: 13px; line-height: 1.9; color: var(--muted); }
.site-footer-column h2 { margin: 0 0 18px; font-size: 15px; line-height: 1.5; letter-spacing: 0; color: #f5edf0; }
.site-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer-links a { font-size: 13px; line-height: 1.6; color: #c5b7bf; transition: color .2s; }
.site-footer-links a:hover { color: #ff405d; }
.site-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-block: 24px; border-top: 1px solid #38212b; color: var(--muted); font-size: 11px; }
.site-footer-responsible { display: flex; align-items: center; gap: 12px; }
.site-footer-responsible p { margin: 0; line-height: 1.8; }
.site-footer-age { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid #68303e; border-radius: 50%; color: #ff9bad; font-weight: 700; }
.site-footer-legal { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 20px; color: #c5b7bf; font-size: 12px; }
.site-footer-legal a:hover { color: #ff405d; }
.information-card p a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .site-footer { margin-top: 40px; padding-top: 32px; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}
.brand { flex-shrink: 0; }
.image-caption { color: var(--muted); font-size: 12px; line-height: 1.7; text-align: center; }
.breadcrumbs { padding-block: 12px; color: var(--muted, #c5b7bf); font-size: 13px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: '/'; margin-inline-end: 8px; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }
main p a[data-anchor-type] { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main p a[data-anchor-type]:hover { color: var(--ink); }
.brand-logo { display: block; width: 200px; max-width: 100%; height: auto; }
.phone-logo { display: block; width: 200px; max-width: 100%; height: auto; margin-block: 22px 35px; }
.hero-main-image { width: 100%; max-width: 520px; min-width: 0; justify-self: center; }
.hero-main-image img { display: block; width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 760px) {
  .hero-main-image { margin-top: 24px; }
}
@media (max-width: 760px) {
  .brand-logo { width: 150px; }
}