/* ═══════════════════════════════════════════════════════════════════════════
   Tournament List — Enhanced cards & toolbar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page container ──────────────────────────────────────────────────────── */
.tournaments-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-4) var(--space-16);
}

/* ── Page eyebrow (visible orientation cue above the tabs) ───────────────── */
.tournaments-page__eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-warm);
  text-align: center;
  margin: 0 0 var(--space-3);
}

/* ── Tabs row (page now starts here — no visible heading; <h1> is sr-only) ── */
.tournaments-tabs {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.tournaments-tabs__btn {
  position: relative;
  padding: var(--space-4) var(--space-4);
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color var(--duration) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tournaments-tabs__btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%) scale(0);
  transition: transform var(--duration) var(--ease-out);
}

.tournaments-tabs__btn:hover {
  color: var(--text-secondary);
}

.tournaments-tabs__btn.is-active {
  color: var(--accent);
}

.tournaments-tabs__btn.is-active::after {
  transform: translateX(-50%) scale(1);
}

.tournaments-tabs__btn--live.is-active {
  color: var(--success);
}

.tournaments-tabs__count {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: var(--weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-secondary);
  letter-spacing: 0;
  line-height: 1.4;
  min-width: 22px;
  text-align: center;
}

.tournaments-tabs__btn.is-active .tournaments-tabs__count {
  background: var(--accent);
  color: var(--bg-deep);
}

.tournaments-tabs__btn--live.is-active .tournaments-tabs__count {
  background: var(--success);
  color: var(--text-primary);
}

.tournaments-tabs__btn[data-empty="true"] .tournaments-tabs__count {
  opacity: 0.4;
}

/* ── Tournament Grid (2 per row, with featured hero) ─────────────────────── */
.tournaments-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.tournaments-grid--featured-first .tcard:first-child {
  grid-column: 1 / -1;
}

@media (max-width: 880px) {
  .tournaments-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Tournament Card ─────────────────────────────────────────────────────── */
/* Ticket notches: two semicircular cuts on the left/right edges, sitting
   in the gap between the meta row and the action footer (~88px from
   bottom). Implemented as a 2-layer radial-gradient mask combined with
   mask-composite: intersect so each layer punches its own hole while
   the rest of the card stays opaque. Page bg (rgb 2,6,23) shows through
   the holes against the card's rgb(10,15,30) fill — enough contrast to
   read the notch on the dark theme. */
.tcard {
  --tnotch-r: 8px;
  /* 93px = padding-bottom (var(--space-6) = 24) + footer button height (48)
     + flex gap (var(--space-5) = 20) + meta border-bottom (1).
     Anchors the notch centre to the divider line at the meta's bottom
     border — measured delta vs divider Y is 0. If the footer min-height
     ever changes, retune the 48 below. */
  --tnotch-y: calc(100% - 93px);
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
  -webkit-mask:
    radial-gradient(var(--tnotch-r) at 0 var(--tnotch-y), transparent 98%, #000 100%),
    radial-gradient(var(--tnotch-r) at 100% var(--tnotch-y), transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(var(--tnotch-r) at 0 var(--tnotch-y), transparent 98%, #000 100%),
    radial-gradient(var(--tnotch-r) at 100% var(--tnotch-y), transparent 98%, #000 100%);
  mask-composite: intersect;
}

/* Entry animation — opt-in via class so cards never get stuck invisible */
.tcard.tcard--enter {
  animation: tcardIn 0.5s var(--ease-out) both;
}

@keyframes tcardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tcard:hover {
  border-color: var(--accent-20);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

.tcard::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-warm), transparent 50%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.tcard:hover::before { opacity: 1; }

.tcard.is-featured::before {
  opacity: 1;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-warm), transparent 60%);
}

/* ── Card head (status row + title) ─────────────────────────────────────── */
.tcard__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tcard__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tcard__chips {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tcard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);     /* Marcellus single-weight */
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0;
}

.tcard.is-featured .tcard__title {
  font-size: clamp(2rem, 4vw, 3rem);
}

.tcard__game {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* ── Status badge — scoreboard ticker ────────────────────────────────────── */
.tstatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 16px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: 3px;
  border: 1px solid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.tstatus::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.tstatus__dot { display: none; }

.tstatus--upcoming { color: var(--accent-warm); border-color: var(--accent-warm-30); background: var(--accent-warm-10); }
.tstatus--open     { color: var(--success); border-color: var(--success-30); background: var(--success-10); }
.tstatus--live     { color: var(--success); border-color: var(--success-30); background: var(--success-10); }
.tstatus--past     { color: var(--text-muted); border-color: var(--border); background: transparent; }

/* live: full-badge pulse — outer ring radiates and fades, inner tint pulses */
.tstatus--live {
  animation: liveBadgePulse 1.6s var(--ease-out) infinite;
}
@keyframes liveBadgePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    background: var(--success-10);
  }
  50% {
    background: var(--success-20);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    background: var(--success-10);
  }
}

/* open / upcoming: diagonal shine sweep across the badge + softly breathing edge bar */
.tstatus--open {
  background:
    linear-gradient(115deg, transparent 35%, var(--success-20) 50%, transparent 65%) no-repeat,
    var(--success-10);
  background-size: 220% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  animation: statusShine 3.4s ease-in-out infinite;
}
.tstatus--upcoming {
  background:
    linear-gradient(115deg, transparent 35%, var(--accent-warm-20) 50%, transparent 65%) no-repeat,
    var(--accent-warm-10);
  background-size: 220% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  animation: statusShine 3.4s ease-in-out infinite;
}
.tstatus--open::before,
.tstatus--upcoming::before {
  animation: statusBarBreathe 2.6s ease-in-out infinite;
}
@keyframes statusShine {
  0%, 25%   { background-position: 220% 0, 0 0; }
  80%, 100% { background-position: -120% 0, 0 0; }
}
@keyframes statusBarBreathe {
  0%, 100% { box-shadow: 0 0 8px currentColor; }
  50%      { box-shadow: 0 0 18px currentColor, 0 0 3px currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .tstatus--open,
  .tstatus--upcoming,
  .tstatus--open::before,
  .tstatus--upcoming::before,
  .tstatus--live,
  .tcard.tcard--enter,
  .tcard--skeleton .skel { animation: none !important; }

  .tcard,
  .tcard:hover,
  .tcard::before { transition: none !important; transform: none !important; }
}

/* small format chip */
.tchip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ── Meta grid (key info bar) ────────────────────────────────────────────── */
.tcard__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tcard.is-featured .tcard__meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tcard.is-featured .tmeta__label {
  font-size: 0.7rem;
}
.tcard.is-featured .tmeta__value {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

@media (max-width: 540px) {
  .tcard__meta,
  .tcard.is-featured .tcard__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tmeta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.tmeta__label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.tmeta__value {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.tmeta__value svg { color: var(--text-muted); width: 14px; height: 14px; flex-shrink: 0; }
.tmeta__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-normal);
}

/* ── Footer (CTA + quick actions) ────────────────────────────────────────── */
/* All three children (Register, Details, Share) share one row.
   At 3-col homepage width (~368px inner) the previous min-widths
   (160 + 140 + 44 = 344 plus 24 gap) tipped past the available space
   and bumped Share onto its own row. min-width: 0 + flex-wrap: nowrap
   lets the Register CTA absorb whatever space remains. The narrow
   mobile breakpoint at 380px still re-stacks the buttons vertically. */
.tcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.tcard__cta {
  flex: 2 1 0;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--space-4);
  text-align: center;
  white-space: nowrap;
}
/* Primary CTA: deep emerald to echo the "OPEN" status badge.
   Darkened from --success #10b981 → #047857 so white text passes
   WCAG AA contrast (5.0:1 vs 2.54:1). */
.btn-accent.tcard__cta:not(.tcard__cta--secondary) {
  background: #047857;
  color: #fff;
  border: 1px solid transparent;
}
.btn-accent.tcard__cta:not(.tcard__cta--secondary):hover {
  background: #059669;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px var(--success-20);
}
.tcard__cta--secondary {
  flex: 1 1 0;
  min-width: 96px;
}

.tcard__quick-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tcard__qa-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  text-decoration: none;
}
.tcard__qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-surface);
  transform: translateY(-1px);
}
.tcard__qa-btn svg { width: 16px; height: 16px; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.tournaments-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}

.tournaments-empty__art {
  width: 160px;
  height: 120px;
  margin-bottom: var(--space-6);
  opacity: 0.9;
}

.tournaments-empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-normal);     /* Marcellus single-weight */
  font-size: var(--text-3xl);
  letter-spacing: 0.005em;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.tournaments-empty__desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  max-width: 360px;
  margin: 0 0 var(--space-6);
}

/* ── Skeleton state ──────────────────────────────────────────────────────── */
.tcard--skeleton {
  pointer-events: none;
}
.tcard--skeleton .skel {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-surface) 50%, var(--bg-elevated) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
  height: 14px;
  width: 100%;
}
.tcard--skeleton .skel.skel--lg { height: 28px; width: 60%; }
.tcard--skeleton .skel.skel--md { height: 18px; width: 40%; }
.tcard--skeleton .skel.skel--btn { height: 44px; width: 100%; border-radius: var(--radius-sm); }
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .tournaments-page { padding: var(--space-10) var(--space-3) var(--space-12); }
  .tournaments-tabs { gap: var(--space-2); margin-bottom: var(--space-6); }
  .tournaments-tabs__btn { padding: var(--space-4) var(--space-2); font-size: 0.7rem; letter-spacing: 0.06em; }
  .tcard { padding: var(--space-5); }
}

@media (max-width: 380px) {
  .tcard__foot { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .tcard__cta, .tcard__cta--secondary { flex: 1 1 100%; min-width: 0; }
  .tcard__quick-actions { justify-content: center; }
}