/* ===========================================================================
   Tournaments — ported from design/tournaments.html (source of truth طراحی).
   Dark hero with live counters, discipline chips + status dropdown, a
   featured tournament, and the card grid.
   =========================================================================== */

.t-hero{
  background:linear-gradient(135deg, var(--ink), #2E3133);
  color:#fff; border-radius:var(--r-lg); padding:24px; margin-bottom:18px;
  position:relative; overflow:hidden;
}
.t-hero::before{
  content:""; position:absolute; left:-40px; bottom:-40px;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,185,79,.15), transparent);
}
.t-hero h1{ font-size:24px; font-weight:800; margin:0 0 6px; letter-spacing:-.02em; position:relative; }
.t-hero p{ font-size:13px; opacity:.78; margin:0; line-height:1.7; position:relative; max-width:480px; }
.t-hero .stats{
  display:flex; gap:18px; margin-top:18px; position:relative;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
  flex-wrap:wrap; align-items:center;
}
.t-hero .st{ font-size:11px; opacity:.78; }
.t-hero .st b{ display:block; font-size:18px; font-weight:800; opacity:1; margin-bottom:1px; }
.t-hero .lb-link{
  margin-inline-start:auto; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:#FFD089; text-decoration:none; font-weight:600;
}
.t-hero .lb-link svg{ width:13px; height:13px; }

/* The only way out of this hero into the leaderboard, drawn as a 19px link. */
@media (max-width: 767px) {
  .t-hero .lb-link{ position:relative; }
  .t-hero .lb-link::after{
    content:""; position:absolute; top:50%; left:0; transform:translateY(-50%);
    width:100%; height:44px;
  }
}

/* فیلتر: رشته‌ها + dropdown وضعیت */
.t-filters{ display:flex; align-items:center; gap:10px; padding:4px 0 16px; }
.t-filter-bar{
  display:flex; gap:8px; overflow-x:auto;
  scroll-snap-type:x mandatory; flex:1; min-width:0; scrollbar-width:none;
}
.t-filter-bar::-webkit-scrollbar{ display:none; }
.t-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line);
  padding:7px 14px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color:var(--ink-2);
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  text-decoration:none; scroll-snap-align:start;
}
.t-chip.is-on{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* These chips sit in a horizontal scroller, so an oversized invisible ::after
   would leak into its scroll area. Real padding is the safe way to reach the
   44px touch height here. */
@media (max-width: 767px) {
  .t-chip{ padding-top:12px; padding-bottom:12px; }
}

.t-status-dd{ position:relative; flex-shrink:0; }
.t-status-trigger{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--line);
  padding:7px 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color:var(--ink-2);
  cursor:pointer; font-family:inherit; white-space:nowrap;
}
.t-status-trigger .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.t-status-trigger svg.chev{ width:11px; height:11px; opacity:.7; transition:transform .15s; }
.t-status-dd.open .t-status-trigger{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* The status pill opens the only filter on this page; 35px drawn, 44px tapped. */
@media (max-width: 767px) {
  .t-status-trigger{ position:relative; }
  .t-status-trigger::after{ content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:44px; }
}
.t-status-dd.open .t-status-trigger svg.chev{ transform:rotate(180deg); }
.t-status-menu{
  position:absolute; top:calc(100% + 6px); inset-inline-start:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:6px;
  box-shadow:var(--shadow-md); min-width:180px; z-index:50; display:none;
}
.t-status-dd.open .t-status-menu{ display:block; }
.t-status-menu a{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px;
  font-size:12px; color:var(--ink-2); text-decoration:none; cursor:pointer;
}
.t-status-menu a:hover{ background:var(--bg); }
.t-status-menu a.on{ background:var(--accent-soft); color:var(--accent-deep); font-weight:700; }
.t-status-menu a .d{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.t-status-menu a .d.open{ background:var(--accent); }
.t-status-menu a .d.live{ background:#FFB94F; }
.t-status-menu a .d.full{ background:#E84C5C; }
.t-status-menu a .d.done{ background:var(--muted); }
.t-status-menu a .d.all{ background:var(--ink); }

/* تورنمنت ویژه */
.t-featured{
  background:var(--surface); border:1px solid var(--accent);
  color:inherit; border-radius:var(--r-lg); padding:0; margin-bottom:20px;
  overflow:hidden; position:relative;
  display:grid; grid-template-columns:200px 1fr; gap:0;
  box-shadow:0 6px 26px rgba(31,184,122,.16);
  text-decoration:none;
}
.t-featured::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--accent), #7FE6B7); z-index:3;
}
@media (max-width:640px){ .t-featured{ grid-template-columns:1fr; } }
.t-featured .cover{
  background:#e8f6ef center/cover no-repeat;
  min-height:170px; position:relative;
  display:grid; place-items:center; color:rgba(31,184,122,.45);
}
.t-featured .cover.has-photo svg{ display:none; }
.t-featured .cover svg{ width:44px; height:44px; }
.t-featured .cover::after{
  content:"⭐ تورنمنت ویژه"; position:absolute; top:14px; right:14px;
  background:#fff; padding:5px 12px; border-radius:var(--r-pill);
  font-size:10px; font-weight:800; color:var(--accent-deep);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.t-featured .body{ padding:20px; }
.t-featured .body .badges{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.t-featured .body .b{
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--accent-deep);
}
.t-featured .body h2{ font-size:18px; font-weight:800; margin:0 0 4px; color:var(--ink); }
.t-featured .body p{ font-size:12px; color:var(--muted); margin:0 0 14px; line-height:1.7; }
.t-featured .body .meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:11px; margin-bottom:14px; }
.t-featured .body .meta div{ display:flex; align-items:center; gap:5px; color:var(--ink-2); }
.t-featured .body .meta svg{ width:13px; height:13px; }
.t-featured .body .pr{ color:var(--accent-deep); font-weight:800; }
.t-featured .cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff;
  padding:9px 18px; border-radius:99px;
  font-size:12px; font-weight:800;
}

/* گرید کارت‌ها */
.t-list{ display:grid; gap:12px; grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .t-list{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:540px){ .t-list{ grid-template-columns:1fr; } }

.t-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s;
}
.t-card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.t-card .cover{
  height:128px; position:relative;
  background:var(--bg) center/cover no-repeat;
  display:grid; place-items:center; color:var(--line-strong);
}
.t-card .cover.has-photo svg.dec{ display:none; }
.t-card .cover svg.dec{ width:34px; height:34px; }
.t-card .status{
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,.35); color:#fff;
  font-size:10px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill);
  backdrop-filter:blur(4px);
}
.t-card .status.open{ background:rgba(31,184,122,.9); }
.t-card .status.full{ background:rgba(232,76,92,.9); }
.t-card .status.live{ background:rgba(255,185,79,.95); color:#1A1D1F; }
.t-card .body{ padding:14px; flex:1; display:flex; flex-direction:column; }
.t-card .meta-top{
  font-size:12px; color:var(--muted); margin-bottom:6px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.t-card .ttl{ font-size:15px; font-weight:800; margin:0 0 12px; letter-spacing:-.01em; line-height:1.45; }
.t-card .foot{
  display:flex; align-items:center; gap:8px;
  padding-top:12px; margin-top:auto; border-top:1px solid var(--line);
}
.t-card .foot .prize{
  flex:1; min-width:0; display:flex; align-items:center; gap:5px;
  font-size:13px; font-weight:800; color:var(--ink);
}
.t-card .foot .prize svg{ width:14px; height:14px; color:#F5A623; flex-shrink:0; }
/* Prize escrow (§12, 2026-08-09): marks the prizes the platform is
   actually holding. Sits next to the figure it qualifies, and shrinks
   before the figure does — the amount is the thing that must stay
   readable on a narrow card. */
.t-card .foot .prize .tg-guaranteed{
  font-size:10px; font-weight:800; color:var(--accent-deep);
  background:var(--accent-soft); padding:3px 7px; border-radius:var(--r-pill);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.t-card .foot .cap{
  font-size:11px; font-weight:700; color:var(--accent-deep);
  background:var(--accent-soft); padding:5px 10px; border-radius:var(--r-pill);
  white-space:nowrap; flex-shrink:0;
}

.t-hidden{ display:none !important; }
.t-empty{ padding:32px 20px; text-align:center; color:var(--muted); font-size:13px; }