/* ===== Team detail layout using the same "gamecard" language ===== */
:root{
  --td-panel: rgba(255,255,255,.04);
  --td-stroke: rgba(255,255,255,.08);
  --td-text: rgba(233,241,255,.92);
  --td-muted: rgba(233,241,255,.62);
}

.tdg-wrap{ max-width: 1260px; margin: 0 auto; padding: 22px 24px 90px; position: relative; z-index: 1; }
@media (max-width: 520px){ .tdg-wrap{ padding: 18px 14px 70px; } }

.tdg-subtabs{ display:flex; gap:8px; flex-wrap:wrap; margin: 4px 0 18px; }
.tdg-subtab{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  color: rgba(220,235,255,.88); text-decoration:none; font-family: Orbitron, sans-serif;
  font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.tdg-subtab:hover{ border-color: rgba(87,242,154,.45); color: #57f29a; }
.tdg-subtab.on{ background: rgba(87,242,154,.10); border-color: rgba(87,242,154,.35); color:#57f29a; }

/* Hero card spacing */
.tdg-hero{ margin-top: 6px; }
.tdg-hero .gc-media{ aspect-ratio: 16/9; }
.tdg-hero-ph{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family: Orbitron, sans-serif;
  font-weight: 900;
  font-size: 54px;
  color: rgba(233,241,255,.18);
  background: radial-gradient(900px 280px at 30% 10%, rgba(124,92,255,.22), transparent 60%),
              radial-gradient(700px 260px at 85% 30%, rgba(34,197,94,.16), transparent 55%),
              rgba(0,0,0,.18);
}
.tdg-meta{ color: var(--td-muted); font-weight: 700; font-size: 13px; }
.tdg-meta b{ color: #57f29a; }

.tdg-ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top: 14px; }
.tdg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px; border-radius: 14px; border:1px solid var(--td-stroke);
  text-decoration:none; font-weight: 900; font-size: 12px; letter-spacing:.08em;
  text-transform: uppercase; }
.tdg-btn.primary{ background:#57f29a; color:#0a1324; border-color: rgba(0,0,0,.18); }
.tdg-btn.ghost{ background: rgba(255,255,255,.03); color: var(--td-text); }
.tdg-btn.discord{ background: rgba(88,101,242,.14); border-color: rgba(88,101,242,.32); color:#cdd6ff; }
.tdg-btn:hover{ filter: brightness(1.05); }

/* Content layout */
.tdg-grid{ display:grid; grid-template-columns: 1fr 340px; gap: 22px; margin-top: 22px; }
@media (max-width: 980px){ .tdg-grid{ grid-template-columns: 1fr; } }

.tdg-panel{ background: var(--td-panel); border:1px solid var(--td-stroke); border-radius: 18px; overflow:hidden; }
.tdg-phd{ padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tdg-phd h2{ margin:0; font-family: Orbitron, sans-serif; font-size: 12px; font-weight: 900;
  letter-spacing:.18em; text-transform:uppercase; color: #e9f1ff; }
.tdg-pbd{ padding: 16px; }

.tdg-about{ color: rgba(233,241,255,.78); line-height: 1.8; font-size: 15px; }

/* Roster grid */
.tdg-roster{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 12px; }
@media (max-width: 520px){ .tdg-roster{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.tdg-m{ text-decoration:none; color: inherit; background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius: 16px; overflow:hidden; }
.tdg-m:hover{ border-color: rgba(87,242,154,.35); transform: translateY(-1px); transition: transform .15s ease; }
.tdg-mimg{ height: 108px; background: rgba(0,0,0,.25); position: relative; }
.tdg-mimg img{ width:100%; height:100%; object-fit: cover; display:block; }
.tdg-minit{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family: Orbitron, sans-serif; font-weight: 900; color:#57f29a; font-size: 26px;
  background: linear-gradient(135deg, rgba(87,242,154,.10), rgba(124,58,237,.10)); }
.tdg-cap{ position:absolute; top:8px; right:8px; font-family: Orbitron, sans-serif; font-size: 9px;
  font-weight: 900; letter-spacing:.12em; padding: 4px 8px; border-radius: 999px;
  background: #ffcc3a; color:#0a1324; }
.tdg-mbd{ padding: 10px 10px 12px; text-align:center; }
.tdg-mname{ font-family: Orbitron, sans-serif; font-weight: 900; letter-spacing:.08em;
  font-size: 11px; text-transform: uppercase; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tdg-mrole{ margin-top: 4px; color: rgba(233,241,255,.62); font-size: 11px; }

/* Sidebar info */
.tdg-kv{ display:flex; justify-content:space-between; align-items:center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.tdg-kv:last-child{ border-bottom:none; }
.tdg-k{ color: rgba(233,241,255,.62); font-size: 11px; font-weight: 800; letter-spacing:.12em;
  text-transform: uppercase; }
.tdg-v{ color:#e9f1ff; font-weight: 900; }
.tdg-v.green{ color:#57f29a; }
.tdg-v.yellow{ color:#ffcc3a; }
.tdg-v.pink{ color:#ff4d79; }