/* Persian typography.

   Vazirmatn, served from this origin rather than a font CDN: the audience for
   the Persian build is largely in Iran, where Google Fonts is unreliable, and a
   webfont that does not arrive is worse than none — the page reflows into the
   fallback after the timeout, mid-read.

   `unicode-range` keeps it to the Arabic block, so an English reader never
   downloads 199 KB of Persian glyphs they will not see. `font-display: swap`
   means text is readable immediately and sharpens when the face lands. */

@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-500.woff2') format('woff2');
  font-weight: 500 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-700.woff2') format('woff2');
  font-weight: 651 749;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('assets/fonts/Vazirmatn-800.woff2') format('woff2');
  font-weight: 750 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF, U+0660-0669;
}

/* ---------------------------------------------------------------- setting */
[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] {
  /* Persian has no capitals, so tracking meant for uppercase Latin just pulls
     the letters apart and breaks the joins. */
  --fa-tracking: 0;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .nav-label,
[dir="rtl"] .hero-label,
[dir="rtl"] small,
[dir="rtl"] .pay-note,
[dir="rtl"] .stake-balance small,
[dir="rtl"] .amount-label,
[dir="rtl"] .race-caption { letter-spacing: 0; text-transform: none; }

/* Persian sits lower and needs more room between lines than Latin at the same
   size, and it has no ascender/descender rhythm to lean on. */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .hero p,
[dir="rtl"] .fair-hero p { line-height: 2; }

/* Headings: the Latin scale is tuned with negative tracking, which closes up
   Persian joins until the word looks misspelled. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] .hero h1,
[dir="rtl"] .stake-head h2 { letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] .hero h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.35; }
/* The italic serif accent is a Latin device; in Persian it just looks broken. */
[dir="rtl"] .hero h1 em { font-family: inherit; font-style: normal; font-weight: 700; }

/* Numbers keep the Latin face: Vazirmatn's Persian digits are lovely but the
   figures here sit in tables and score plates that were spaced for tabular
   Latin, and mixing the two in one column is worse than either. */
[dir="rtl"] .tabular,
[dir="rtl"] time,
[dir="rtl"] .stack-count { font-feature-settings: 'tnum'; }

/* ---------------------------------------------------------- directional marks */
/* A "↗" points away from the reader in English. In Persian the reader travels
   the other way, so the same glyph points back at the text it belongs to.
   Mirroring the glyph is right where the arrow means "onward", which is what
   these two mean. Arrows written into translated strings are already the
   correct way round and are left alone. */
[dir="rtl"] #homeQuickMatch > span,
[dir="rtl"] .lobby-status > span:last-child {
  display: inline-block;
  transform: scaleX(-1);
}

/* ================================================================= polish ===
   Small refinements that apply in both languages. Nothing structural — these
   are the details that separate a layout that works from one that feels
   finished. */

/* A focus ring you can actually see, on the shape of the thing focused. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 10px;
}
/* …but not a doubled ring on things that already draw their own. */
.stake-chip:focus-visible,
.amount-chip:focus-visible { outline-offset: 1px; }

/* Buttons acknowledge a press. Without this the interface feels unresponsive on
   a phone, where there is no hover state to tell you anything happened. */
.btn:active:not(:disabled),
.stake-chip:active,
.amount-chip:active,
.shop-tabs button:active,
.tournament-tabs button:active { transform: translateY(1px); }

/* The gold accent is the brand's one strong colour; panels that matter get a
   whisper of it along the top edge rather than another border. */
.stake-card,
.featured-tourney,
.coach-hero {
  position: relative;
  overflow: hidden;
}
.stake-card::before,
.featured-tourney::before,
.coach-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 187, 87, .5), transparent);
}

/* Cards lift very slightly under the cursor. 2px, not 8px: this is a table of
   real options, not a carousel. */
@media (hover: hover) {
  .product-card,
  .tournament-card,
  .training-card,
  .game-mode {
    transition: transform .18s ease, border-color .18s ease;
  }
  .product-card:hover,
  .tournament-card:hover,
  .training-card:hover,
  .game-mode:hover {
    transform: translateY(-2px);
    border-color: var(--line2);
  }
}

/* Long figures line up in columns when they are tabular. */
.leaderboard-table b,
.leaderboard-table span,
.stake-record-row b,
.live-stat b,
.hero-proof b { font-variant-numeric: tabular-nums; }

/* Selection in the brand colour rather than the browser's blue. */
::selection { background: rgba(231, 187, 87, .3); color: #fff; }

/* A scrollbar that belongs to the page. */
* { scrollbar-width: thin; scrollbar-color: #2a4452 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #23404e;
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #33566a; background-clip: content-box; }