html { scroll-behavior: smooth; }
  body { font-family: 'Vazirmatn', sans-serif; background:#0A0C0F; }
  [v-cloak] { display: none; }

  /* responsive safeguards: layout-only, content untouched */
  @media (max-width: 767px) {
    .footer-glow { opacity: .7; }
    .yellow-diamond { transform: rotate(45deg) scale(.72); }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
    .tournament-card:hover { transform: translateY(-6px) scale(1.005); }
  }

  ::selection { background: #F2A93B; color: #0A0C0F; }

  /* ---------- floating background elements ---------- */
  .float-shape {
    position: absolute;
    pointer-events: none;
    opacity: .16;
    filter: blur(.3px);
  }
  @keyframes drift-a { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(18px,-26px) rotate(8deg); } }
  @keyframes drift-b { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-24px,20px) rotate(-10deg); } }
  @keyframes drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10px,14px) scale(1.06); } }
  @keyframes spin-slow { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }
  .anim-a { animation: drift-a 9s ease-in-out infinite; }
  .anim-b { animation: drift-b 11s ease-in-out infinite; }
  .anim-c { animation: drift-c 7s ease-in-out infinite; }
  .anim-spin { animation: spin-slow 40s linear infinite; }

  @keyframes pulse-glow {
    0%,100% { opacity:.35; } 50% { opacity:.8; }
  }
  .pulse-dot { animation: pulse-glow 2.4s ease-in-out infinite; }

  /* ---------- game card hover glow (per game color, via CSS var) ---------- */
  .game-card {
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .game-card:hover {
    transform: translateY(-6px);
    border-color: var(--glow);
    box-shadow: 0 0 0 1px var(--glow), 0 30px 60px -25px var(--glow);
  }
  .game-card .glow-wash {
    position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(120% 100% at 50% 0%, var(--glow) 0%, transparent 60%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
  }
  .game-card:hover .glow-wash { opacity: .18; }
  .game-card .game-icon-ring { transition: box-shadow .35s ease, color .35s ease; }
  .game-card:hover .game-icon-ring { box-shadow: 0 0 26px var(--glow); }

  /* ---------- brutal / yellow contrast section shadows ---------- */
  .shadow-black-glow {
    box-shadow: 0 0 55px 8px rgba(0,0,0,.55), 10px 10px 0 0 #0A0C0F;
  }
  .step-num {
    font-variant-numeric: tabular-nums;
  }

  /* ---------- enhanced site atmosphere ---------- */
  body {
    position: relative;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 8%, rgba(124,92,252,.08), transparent 24%),
      radial-gradient(circle at 88% 18%, rgba(242,169,59,.07), transparent 22%),
      radial-gradient(circle at 50% 72%, rgba(179,39,58,.055), transparent 28%),
      #0A0C0F;
  }
  body::before {
    content:"";
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events:none;
    opacity:.36;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at center, black 15%, transparent 90%);
  }
  body::after {
    content:"";
    position: fixed;
    width: 520px;
    height: 520px;
    right: -180px;
    top: 18%;
    border: 1px solid rgba(242,169,59,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(124,92,252,.025), 0 0 0 68px rgba(242,169,59,.018);
    pointer-events:none;
    z-index:-4;
    animation: orbitFloat 18s ease-in-out infinite;
  }
  @keyframes orbitFloat {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
    50% { transform: translate3d(-24px,20px,0) rotate(7deg); }
  }

  /* header/nav hover system */
  .nav-link {
    position:relative;
    color: rgba(255,255,255,.55);
    font-weight: 600;
    transition: color .2s ease, background-color .2s ease;
  }
  .nav-link:hover {
    color:#fff;
    background: rgba(255,255,255,.06);
  }
  .nav-link.router-active,
  .nav-link[aria-current="page"] {
    color: #F2A93B;
    background: rgba(242,169,59,.1);
  }

  .reveal-up {
    animation: revealUp .75s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes revealUp {
    from { opacity:0; transform:translateY(22px); }
    to { opacity:1; transform:translateY(0); }
  }
  .section-hover {
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .section-hover:hover {
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.16);
    box-shadow:0 22px 55px -35px rgba(0,0,0,.9);
  }

  /* how-it-works step cards */
  .step-card {
    transition: transform .3s ease, border-color .3s ease, box-shadow .35s ease;
  }
  .step-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242,169,59,.6);
    box-shadow: 0 20px 45px -28px rgba(242,169,59,.55);
  }
  .step-num {
    transition: color .3s ease, text-shadow .3s ease;
  }
  .step-card:hover .step-num {
    color: #F2A93B;
    text-shadow: 0 0 22px rgba(242,169,59,.5);
  }

  /* animated accordion */
  .faq-item {
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  }
  .faq-item:hover {
    border-color:rgba(242,169,59,.32);
    transform:translateY(-1px);
  }
  .faq-item.is-open {
    border-color:rgba(242,169,59,.42);
    box-shadow:0 16px 42px -30px rgba(242,169,59,.4);
  }
  .faq-answer {
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    opacity:0;
  }
  .faq-answer > div {
    overflow:hidden;
    min-height:0;
  }
  .faq-answer.is-open {
    grid-template-rows:1fr;
    opacity:1;
  }
  .faq-chevron { transition:transform .35s cubic-bezier(.22,1,.36,1); }
  .faq-chevron.is-open { transform:rotate(180deg); }

  /* yellow feature decoration */
  .yellow-grid {
    background-image:
      linear-gradient(rgba(10,12,15,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10,12,15,.08) 1px, transparent 1px);
    background-size:32px 32px;
  }
  .yellow-ring {
    position:absolute;
    border:1px solid rgba(10,12,15,.14);
    border-radius:50%;
    pointer-events:none;
  }
  .yellow-diamond {
    position:absolute;
    width:90px;
    height:90px;
    border:2px solid rgba(10,12,15,.12);
    transform:rotate(45deg);
    pointer-events:none;
    animation: diamondFloat 8s ease-in-out infinite;
  }
  @keyframes diamondFloat {
    0%,100% { transform:rotate(45deg) translateY(0); }
    50% { transform:rotate(55deg) translateY(-10px); }
  }

  /* tournament redesign */
  .tournament-card {
    position:relative;
    overflow:hidden;
  }
  .progress-track { background:rgba(255,255,255,.07); }
  .progress-fill {
    background:linear-gradient(90deg, rgba(242,169,59,.35), #F2A93B);
    box-shadow:0 0 14px rgba(242,169,59,.4);
  }
  .live-pulse { animation:livePulse 1.8s ease-in-out infinite; }
  @keyframes livePulse {
    0%,100% { box-shadow:0 0 0 0 rgba(52,211,153,.18); }
    50% { box-shadow:0 0 0 7px rgba(52,211,153,0); }
  }

  /* footer */
  .footer-glow {
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(124,92,252,.13),transparent 68%);
    filter:blur(10px);
    pointer-events:none;
  }
  .footer-link {
    transition:color .35s ease, transform .35s ease;
  }
  .footer-link:hover { color:#fff; transform:translateX(-3px); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  }

  /* ---------- scroll reveal animation ---------- */
  .scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 38px, 0) scale(.985);
    transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
    will-change: opacity, transform;
  }
  .scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  .scroll-reveal[data-delay="1"] { transition-delay: .08s; }
  .scroll-reveal[data-delay="2"] { transition-delay: .16s; }
  .scroll-reveal[data-delay="3"] { transition-delay: .24s; }
  .scroll-reveal[data-delay="4"] { transition-delay: .32s; }

  /* scrollbar (subtle) */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-track { background: #0A0C0F; }
  ::-webkit-scrollbar-thumb { background: #262B33; border-radius: 8px; }

  /* marquee for "coming soon" ribbon */
  @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
  .shimmer-text {
    background: linear-gradient(90deg, currentColor 0%, #fff 50%, currentColor 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 3.5s linear infinite;
  }

  /* tournament card: entrance + hover, merged into one rule set (was duplicated) */
  .tournament-card {
    isolation: isolate;
    opacity: 0;
    transform: translateY(35px) scale(.97);
    animation: tournamentReveal .75s cubic-bezier(.16,1,.3,1) forwards;
    animation-delay: var(--delay);
    transition:
      transform .35s cubic-bezier(.19,1,.22,1),
      border-color .35s ease,
      box-shadow .4s ease;
  }

  @keyframes tournamentReveal {
    from { opacity: 0; transform: translateY(35px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  .tournament-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(80% 70% at 50% 0%, rgba(242,169,59,.22), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
  }

  .tournament-card:hover {
    transform: translateY(-8px) scale(1.015);
    border-color: rgba(242,169,59,.6);
    box-shadow:
      0 0 0 1px rgba(242,169,59,.35),
      0 22px 55px -22px rgba(242,169,59,.65),
      0 0 42px -6px rgba(242,169,59,.4);
  }

  .tournament-card:hover::before { opacity: 1; }

  .tournament-visual {
    transition: transform .5s cubic-bezier(.16,1,.3,1), background .4s ease;
  }
  .tournament-card:hover .tournament-visual { transform: scale(1.025); }

  .tournament-icon {
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
  }
  .tournament-card:hover .tournament-icon {
    transform: translateY(-5px) rotate(-3deg);
    box-shadow: 0 0 30px rgba(242,169,59,.18), inset 0 0 20px rgba(255,255,255,.03);
  }

  .tournament-button {
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .tournament-button:hover {
    background: #F2A93B;
    color: #0A0C0F;
    border-color: #F2A93B;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -12px #F2A93B;
  }

  .progress-fill {
    transform-origin: right center;
    animation: progressReveal 1.2s cubic-bezier(.16,1,.3,1) .35s both;
  }
  @keyframes progressReveal {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* =========================================================
     FAQ ACCORDION — فقط یک آیتم می‌تواند باز باشد
     ========================================================= */
  .faq-item {
    opacity: 0;
    transform: translateY(18px);
    animation: faqReveal .6s cubic-bezier(.16,1,.3,1) forwards;
    transition:
      border-color .35s ease,
      box-shadow .35s ease,
      transform .3s ease,
      background .35s ease;
  }
  .faq-item:nth-child(1) { animation-delay: .08s; }
  .faq-item:nth-child(2) { animation-delay: .16s; }
  .faq-item:nth-child(3) { animation-delay: .24s; }
  .faq-item:nth-child(4) { animation-delay: .32s; }
  .faq-item:nth-child(5) { animation-delay: .40s; }
  @keyframes faqReveal {
    to { opacity: 1; transform: translateY(0); }
  }

  .faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(242,169,59,.3);
  }
  .faq-item.is-open {
    border-color: rgba(242,169,59,.45);
    background:
      linear-gradient(135deg, rgba(242,169,59,.055), rgba(124,92,252,.025)),
      #14171C;
    box-shadow: 0 18px 50px -35px rgba(242,169,59,.45);
  }

  /* Smooth height animation */
  .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }
  .faq-answer-inner { overflow: hidden; min-height: 0; }
  .faq-answer.is-open { grid-template-rows: 1fr; opacity: 1; }

  /* Arrow animation */
  .faq-chevron {
    transition: transform .4s cubic-bezier(.16,1,.3,1), color .3s ease;
  }
  .faq-chevron.is-open { transform: rotate(180deg); color: #F2A93B; }

  .faq-icon { transition: background .3s ease, transform .3s ease; }
  .faq-item.is-open .faq-icon { background: rgba(242,169,59,.1); transform: scale(1.05); }

  /* Mobile */
  @media (max-width: 640px) {
    .tournament-card:hover { transform: translateY(-5px); }
    .tournament-card:hover .tournament-icon { transform: translateY(-3px); }
  }

  /* Accessibility */
  @media (prefers-reduced-motion: reduce) {
    .tournament-card,
    .faq-item {
      animation: none;
      opacity: 1;
      transform: none;
    }
    .faq-answer,
    .faq-chevron,
    .tournament-card,
    .tournament-icon {
      transition: none;
    }
  }

/* =========================================================
   IR_SPC — TRUE SEAMLESS NEWS TICKER
   LEFT → RIGHT
   ========================================================= */

.ticker {
  --ticker-gap: 140px;

  width: 100%;
  height: 48px;

  position: relative;
  overflow: hidden;

  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);

  background: rgba(10,12,15,.30);
}


/* =========================================================
   FADE
   ========================================================= */

.ticker::before,
.ticker::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  width: 100px;

  z-index: 20;

  pointer-events: none;
}

.ticker::before {
  left: 0;

  background:
    linear-gradient(
      to right,
      #0A0C0F 0%,
      rgba(10,12,15,.75) 40%,
      transparent 100%
    );
}

.ticker::after {
  right: 0;

  background:
    linear-gradient(
      to left,
      #0A0C0F 0%,
      rgba(10,12,15,.75) 40%,
      transparent 100%
    );
}


/* =========================================================
   TRACK
   ========================================================= */

.ticker-track {
  --loop-width: 0px;

  position: absolute;

  left: 0;
  top: 0;

  height: 100%;

  display: flex;
  align-items: center;

  width: max-content;

  /*
   * خیلی مهم:
   * فاصله بین set ها با خود track محاسبه می‌شود.
   */
  gap: var(--ticker-gap);

  /*
   * از یک set عقب‌تر شروع می‌کنیم.
   */
  transform:
    translate3d(
      calc(var(--loop-width) * -1),
      0,
      0
    );

  animation:
    tickerLoop 28s linear infinite;

  will-change: transform;
}


/* =========================================================
   SET
   ========================================================= */

.ticker-set {
  display: flex;
  align-items: center;

  width: max-content;

  flex-shrink: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

.ticker-item {
  display: flex;
  align-items: center;

  gap: 48px;

  padding-right: 48px;

  flex-shrink: 0;

  white-space: nowrap;
}


/* =========================================================
   TEXT
   ========================================================= */

.ticker-item span {
  color: #777;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .18em;

  white-space: nowrap;
}


/* =========================================================
   DIAMOND
   ========================================================= */

.ticker-item b {
  color: #FFD400;

  font-size: 9px;

  flex-shrink: 0;

  text-shadow:
    0 0 10px rgba(255,212,0,.4);
}


/* =========================================================
   SEAMLESS ANIMATION
   ========================================================= */

@keyframes tickerLoop {

  from {
    transform:
      translate3d(
        calc(var(--loop-width) * -1),
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

}


/* =========================================================
   HOVER
   ========================================================= */

.ticker:hover .ticker-track {
  animation-play-state: paused;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .ticker {
    height: 44px;

    --ticker-gap: 90px;
  }

  .ticker-item {
    gap: 30px;
    padding-right: 30px;
  }

  .ticker-item span {
    font-size: 9px;
  }

  .ticker::before,
  .ticker::after {
    width: 55px;
  }

  .ticker-track {
    animation-duration: 20s;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ticker-track {
    animation: none;
  }

}