/* ═══════════════════════════════════════════════════════════════════════════
 * bax.css — Baxbet design system
 *
 * Written with **logical properties** throughout (margin-inline, padding-inline,
 * inset-inline, text-align: start/end). That is deliberate: this one sheet
 * serves both the RTL Persian edition and the LTR English one, and the browser
 * mirrors it from `dir` alone. There is no flipped second copy to keep in sync,
 * and no physical left/right to get backwards.
 *
 * Palette taken from the reference skin:
 *   #070c15  page           #10151c  panel
 *   #1b273b  line / card    #2f6fed  accent (logo blue)
 *   #17b26a  positive       rgba(255,255,255,.87) body text
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bx-bg: #070c15;
  --bx-bg-2: #0b121d;
  --bx-panel: #10151c;
  --bx-card: #141c2b;
  --bx-line: #1b273b;
  --bx-line-2: #26344d;
  --bx-accent: #2f6fed;
  --bx-accent-2: #5b94ff;
  --bx-green: #17b26a;
  --bx-txt: rgba(255, 255, 255, .87);
  --bx-txt-2: #9fb0c9;
  --bx-txt-3: #6b7c95;
  --bx-rail: 56px;
  --bx-wrap: 1280px;
  --bx-r: 14px;
  --bx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bx-bg);
  color: var(--bx-txt);
  font-family: var(--bx-font);
  font-size: 15px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--bx-accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; }

/* ── accessibility ───────────────────────────────────────────────────────── */
/* Parked off the top rather than off to the side. Moving it sideways with a
   large negative inline offset is the classic recipe, but it widens the page
   in one of the two directions — which is exactly the kind of bug that only
   shows up after mirroring an RTL layout to LTR. */
.bx-skip {
  position: absolute; inset-inline-start: 12px; top: -64px; z-index: 300;
  background: var(--bx-accent); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; transition: top .15s ease;
}
.bx-skip:focus { top: 0; }
@media (prefers-reduced-motion: reduce) { .bx-skip { transition: none; } }
.bx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--bx-accent-2); outline-offset: 2px; }

/* ── layout shell ────────────────────────────────────────────────────────── */
.bx-wrap { max-width: var(--bx-wrap); margin-inline: auto; padding-inline: 16px; }
.bx-body { padding-inline-end: var(--bx-rail); }
@media (max-width: 860px) { .bx-body { padding-inline-end: 0; } }

/* ── header ──────────────────────────────────────────────────────────────── */
.bx-hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(7, 12, 21, .92);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--bx-line);
}
.bx-hdr__in {
  display: flex; align-items: center; gap: 14px;
  height: 58px; max-width: var(--bx-wrap); margin-inline: auto; padding-inline: 16px;
}
.bx-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bx-logo__t {
  font-size: 20px; font-weight: 800; letter-spacing: .5px; color: #fff;
}
.bx-logo__t em { color: var(--bx-accent); font-style: normal; }
.bx-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: 10px; flex: 1 1 auto; }
.bx-nav a {
  color: var(--bx-txt-2); padding: 8px 12px; border-radius: 9px;
  font-size: 14px; white-space: nowrap;
}
.bx-nav a:hover { background: var(--bx-card); color: #fff; text-decoration: none; }
.bx-hdr__cta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1px solid var(--bx-line-2); color: var(--bx-txt); background: var(--bx-card);
  cursor: pointer; white-space: nowrap;
}
.bx-btn:hover { border-color: var(--bx-accent); text-decoration: none; }
.bx-btn--go { background: var(--bx-accent); border-color: var(--bx-accent); color: #fff; }
.bx-btn--go:hover { background: var(--bx-accent-2); border-color: var(--bx-accent-2); }
.bx-lang {
  font-size: 12px; font-weight: 700; color: var(--bx-txt-3);
  border: 1px solid var(--bx-line-2); border-radius: 8px; padding: 5px 9px;
}
.bx-burger {
  display: none; width: 40px; height: 36px; border-radius: 9px;
  border: 1px solid var(--bx-line-2); background: var(--bx-card); cursor: pointer;
}
.bx-burger i, .bx-burger i::before, .bx-burger i::after {
  display: block; width: 16px; height: 2px; background: var(--bx-txt);
  margin-inline: auto; position: relative;
}
.bx-burger i::before { content: ""; position: absolute; top: -5px; }
.bx-burger i::after { content: ""; position: absolute; top: 5px; }

@media (max-width: 1000px) {
  .bx-nav { display: none; }
  .bx-burger { display: block; }
}

/* The header row is the one place where the English labels are materially
   longer than the Persian ones, and at 375px the logo + chip + two pills +
   burger simply do not fit — the row stops shrinking and widens the document
   instead. Below 760px the language chip and the secondary pill drop; the
   primary call to action and the burger are enough, and both of the dropped
   links are in the drawer underneath. */
@media (max-width: 760px) {
  .bx-hdr__in { gap: 10px; }
  .bx-hdr__cta .bx-lang,
  .bx-hdr__cta .bx-btn:not(.bx-btn--go) { display: none; }
}
@media (max-width: 420px) {
  .bx-logo__t { font-size: 18px; }
  .bx-hdr__cta .bx-btn--go { padding: 9px 12px; }
}

/* mobile drawer */
.bx-drawer {
  display: none; border-block-end: 1px solid var(--bx-line); background: var(--bx-panel);
}
.bx-drawer.is-open { display: block; }
.bx-drawer a {
  display: block; padding: 12px 18px; color: var(--bx-txt);
  border-block-end: 1px solid var(--bx-line);
}

/* ── right icon rail ─────────────────────────────────────────────────────── */
.bx-rail {
  position: fixed; inset-block: 58px 0; inset-inline-end: 0; width: var(--bx-rail);
  background: var(--bx-panel); border-inline-start: 1px solid var(--bx-line);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-block: 12px; z-index: 80;
}
.bx-rail a {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; color: var(--bx-txt-2);
}
.bx-rail a:hover { background: var(--bx-card); color: #fff; }
.bx-rail svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 860px) { .bx-rail { display: none; } }

/* ── hero ────────────────────────────────────────────────────────────────── */
.bx-hero {
  position: relative; overflow: hidden; border-radius: var(--bx-r);
  margin-block: 18px; min-height: 260px;
  background:
    radial-gradient(120% 140% at 70% 20%, #16213a 0%, #0c1324 55%, #070c15 100%);
  border: 1px solid var(--bx-line);
  display: grid; place-items: center; text-align: center; padding: 42px 20px;
}
.bx-hero__k {
  color: var(--bx-accent-2); font-size: 13px; font-weight: 800;
  letter-spacing: 3px; margin: 0 0 10px;
}
.bx-hero__h { font-size: clamp(26px, 4.4vw, 44px); font-weight: 800; color: #fff; margin: 0 0 10px; }
.bx-hero__s { color: var(--bx-txt-2); margin: 0 0 20px; }

/* ── panels ──────────────────────────────────────────────────────────────── */
.bx-row2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .bx-row2 { grid-template-columns: 1fr; } }

.bx-panel {
  background: var(--bx-panel); border: 1px solid var(--bx-line);
  border-radius: var(--bx-r); padding: 20px;
}
.bx-panel__h { font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.bx-panel__s { color: var(--bx-txt-2); margin: 0 0 16px; }

.bx-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 520px) { .bx-tiles { grid-template-columns: repeat(2, 1fr); } }
.bx-tile {
  display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 16px 8px; border-radius: 12px;
  background: var(--bx-card); border: 1px solid var(--bx-line);
  color: var(--bx-txt); font-size: 13px; font-weight: 600;
}
.bx-tile:hover { border-color: var(--bx-accent); text-decoration: none; }
.bx-tile svg { width: 26px; height: 26px; fill: var(--bx-accent-2); }

/* ── sections ────────────────────────────────────────────────────────────── */
.bx-sec { margin-block: 30px; }
.bx-sec__h {
  font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
}
.bx-sec__h::before {
  content: ""; width: 4px; height: 20px; border-radius: 3px;
  background: var(--bx-accent); flex: 0 0 auto;
}
.bx-sec__s { color: var(--bx-txt-2); margin: 0 0 14px; }

/* ── game grid + cards ───────────────────────────────────────────────────── */
.bx-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.bx-gcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bx-card); border: 1px solid var(--bx-line);
  border-radius: 12px; color: var(--bx-txt); text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}
.bx-gcard:hover { border-color: var(--bx-accent); transform: translateY(-3px); text-decoration: none; }
.bx-gcard__img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--bx-bg-2); }
.bx-gcard__b { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 5px; }
.bx-gcard__t { font-size: 15px; font-weight: 700; color: #fff; }
.bx-gcard__d { font-size: 12.5px; line-height: 1.6; color: var(--bx-txt-3); }
.bx-gcard__cta { font-size: 12.5px; font-weight: 700; color: var(--bx-accent-2); margin-top: 2px; }

/* ── link grids ──────────────────────────────────────────────────────────── */
.bx-links { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.bx-links a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: 12px; color: var(--bx-txt); font-weight: 600;
  background: var(--bx-panel); border: 1px solid var(--bx-line);
}
.bx-links a:hover { border-color: var(--bx-accent); text-decoration: none; }
.bx-links span { font-size: 12.5px; font-weight: 400; color: var(--bx-txt-3); }

/* ── search ──────────────────────────────────────────────────────────────── */
.bx-find { display: flex; align-items: center; gap: 10px; margin-block: 16px; }
.bx-find input {
  flex: 1 1 auto; min-width: 0;
  background: var(--bx-panel); border: 1px solid var(--bx-line-2);
  border-radius: 11px; padding: 11px 14px; color: var(--bx-txt);
  font-family: inherit; font-size: 14px;
}
.bx-find input::placeholder { color: var(--bx-txt-3); }
.bx-find__n { font-size: 13px; color: var(--bx-txt-3); white-space: nowrap; }

/* ── prose ───────────────────────────────────────────────────────────────── */
.bx-prose { color: var(--bx-txt-2); }
.bx-prose p { margin: 0 0 1em; }
.bx-prose h2 { font-size: 18px; color: #fff; margin: 1.4em 0 .5em; }
.bx-prose ul, .bx-prose ol { margin: 0 0 1em; padding-inline-start: 1.3em; }
.bx-prose li { margin-bottom: .45em; }
.bx-prose b { color: var(--bx-txt); }

.bx-h1 { font-size: clamp(23px, 3.4vw, 32px); font-weight: 800; color: #fff; margin: 0 0 10px; }
.bx-lead { color: var(--bx-txt-2); font-size: 16px; margin: 0 0 18px; }

.bx-note {
  background: var(--bx-panel); border: 1px solid var(--bx-line);
  border-inline-start: 3px solid var(--bx-accent);
  border-radius: 10px; padding: 14px 16px; margin-block: 16px; color: var(--bx-txt-2);
}
.bx-warn {
  background: #1a1410; border: 1px solid #4a3418;
  border-inline-start: 3px solid #d08a1e;
  border-radius: 10px; padding: 14px 16px; margin-block: 16px; color: #e8d9c0;
}

/* ── spec table ──────────────────────────────────────────────────────────── */
.bx-specs { display: grid; gap: 0; margin: 0; }
.bx-specs > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-block-end: 1px solid var(--bx-line);
}
.bx-specs dt { color: var(--bx-txt-3); font-size: 13.5px; margin: 0; }
.bx-specs dd { color: var(--bx-txt); font-size: 13.5px; margin: 0; text-align: end; font-weight: 600; }

/* ── breadcrumb ──────────────────────────────────────────────────────────── */
.bx-crumb { margin-block: 14px 8px; font-size: 13px; color: var(--bx-txt-3); }
.bx-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.bx-crumb li + li::before { content: "›"; margin-inline-end: 6px; color: var(--bx-txt-3); }

/* ── game stage ──────────────────────────────────────────────────────────── */
.bx-stagewrap { margin-block: 18px; }
.bx-stagebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bx-panel); border: 1px solid var(--bx-line);
  border-radius: var(--bx-r) var(--bx-r) 0 0; border-block-end: 0; padding: 10px 14px;
}
.bx-stagebar__tag {
  font-size: 12.5px; font-weight: 700; color: var(--bx-green);
  background: rgba(23, 178, 106, .1); border: 1px solid rgba(23, 178, 106, .3);
  border-radius: 999px; padding: 4px 11px;
}
.bx-stagebar__sp { flex: 1 1 auto; }
.bx-stagebar button, .bx-stagebar a {
  font-size: 13px; font-weight: 600; color: var(--bx-txt);
  background: var(--bx-card); border: 1px solid var(--bx-line-2);
  border-radius: 9px; padding: 6px 12px; cursor: pointer; font-family: inherit;
}
.bx-stagebar button:hover, .bx-stagebar a:hover { border-color: var(--bx-accent); text-decoration: none; }

#bx-stage {
  position: relative; background: var(--bx-panel);
  border: 1px solid var(--bx-line); border-radius: 0 0 var(--bx-r) var(--bx-r);
  overflow: hidden;
}
.bx-stageload {
  position: absolute; inset: 0; display: grid; place-content: center;
  gap: 12px; justify-items: center; background: var(--bx-panel); z-index: 5;
  color: var(--bx-txt-2);
}
.bx-stageload__ring {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bx-line-2); border-top-color: var(--bx-accent);
  animation: bx-spin .9s linear infinite;
}
@keyframes bx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bx-stageload__ring { animation: none; } }
#bx-stage[data-ready="1"] .bx-stageload { display: none; }
.bx-stageload__err { color: #ff8e8e; font-weight: 700; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.bx-faq__list { display: grid; gap: 8px; }
.bx-faq__item {
  background: var(--bx-panel); border: 1px solid var(--bx-line); border-radius: 11px;
}
.bx-faq__item summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; color: var(--bx-txt);
  list-style: none;
}
.bx-faq__item summary::-webkit-details-marker { display: none; }
.bx-faq__item summary::after { content: "+"; float: inline-end; color: var(--bx-txt-3); }
.bx-faq__item[open] summary::after { content: "−"; }
.bx-faq__a { padding: 0 16px 14px; color: var(--bx-txt-2); }
.bx-faq__a p { margin: 0; }

/* ── steps ───────────────────────────────────────────────────────────────── */
.bx-steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 10px; }
.bx-steps li {
  counter-increment: s; position: relative;
  padding: 14px 16px; padding-inline-start: 56px;
  background: var(--bx-panel); border: 1px solid var(--bx-line); border-radius: 12px;
}
.bx-steps li::before {
  content: counter(s); position: absolute; inset-inline-start: 16px; top: 13px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--bx-accent); color: #fff; font-weight: 800; font-size: 13px;
}
.bx-steps b { display: block; color: #fff; }
.bx-steps span { color: var(--bx-txt-3); font-size: 13.5px; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.bx-foot {
  margin-top: 40px; background: var(--bx-panel);
  border-block-start: 1px solid var(--bx-line); padding-block: 32px 22px;
}
.bx-foot__grid {
  display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr);
  max-width: var(--bx-wrap); margin-inline: auto; padding-inline: 16px;
}
@media (max-width: 760px) { .bx-foot__grid { grid-template-columns: repeat(2, 1fr); } }
.bx-foot__h { font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.bx-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bx-foot a { color: var(--bx-txt-3); font-size: 13.5px; }
.bx-foot a:hover { color: var(--bx-txt); }
.bx-foot__bot {
  max-width: var(--bx-wrap); margin-inline: auto; padding: 22px 16px 0;
  margin-top: 22px; border-block-start: 1px solid var(--bx-line);
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  color: var(--bx-txt-3); font-size: 12.5px;
}
.bx-foot__bot p { margin: 0; flex: 1 1 320px; }
.bx-age {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--bx-txt-3); display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--bx-txt-3);
}