.teaminfo-card {
  align-items: center;
  text-align: center;
}

.teaminfo-intro {
  max-width: 560px;
  margin: 0 auto clamp(20px, 3vh, 36px);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.teaminfo-note {
  max-width: 560px;
  margin: -14px auto clamp(18px, 3vh, 28px);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.teaminfo-note strong { color: var(--silver); }
[data-theme="light"] .teaminfo-note { color: rgba(30, 41, 59, 0.85); }
[data-theme="light"] .teaminfo-note strong { color: #1e293b; }

/* ── Division tabs ── */
.div-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(18px, 3vh, 30px);
}
.div-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
[data-theme="light"] .div-tab { background: rgba(255, 255, 255, 0.28); }
.div-tab:hover { transform: translateY(-2px); }
.div-tab__label {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
[data-theme="light"] .div-tab__label { color: #1e293b; }
.div-tab__count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-theme="light"] .div-tab__count { color: rgba(30, 41, 59, 0.78); }

/* Each division keeps the colour it has on the group stage schedule. */
.div-tab--upper.active { border-color: #d4af37; box-shadow: 0 0 14px rgba(212, 175, 55, 0.28); }
.div-tab--mid.active   { border-color: #4f9e8f; box-shadow: 0 0 14px rgba(79, 158, 143, 0.28); }
.div-tab--lower.active { border-color: #d4665c; box-shadow: 0 0 14px rgba(212, 102, 92, 0.28); }
.div-tab.active { background: rgba(0, 0, 0, 0.34); }
[data-theme="light"] .div-tab.active { background: rgba(255, 255, 255, 0.5); }

.div-panel { display: none; }
.div-panel.active { display: block; }

/* Three tabs wrap to two rows inside the card's padding on narrow phones —
   tighten them so they stay on one line. */
@media (max-width: 480px) {
  .div-tabs { gap: 6px; }
  .div-tab { padding: 7px 11px; }
  .div-tab__label { font-size: 0.8rem; letter-spacing: 0.05em; }
  .div-tab__count { font-size: 0.54rem; }
}

.team-wheel__trophy-count {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Wheel ── */
.team-wheel {
  position: relative;
  width: 640px;
  height: 640px;
  max-width: 100%;
  margin: 0 auto clamp(12px, 2vh, 24px);
}

.team-wheel__trophy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 212px;
  height: 212px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: radial-gradient(circle at 50% 35%, rgba(212, 175, 55, 0.18), var(--panel) 70%);
  border: 2px solid #d4af37;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.35), inset 0 0 20px rgba(212, 175, 55, 0.12);
}
.team-wheel__trophy-icon {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
}
.team-wheel__trophy-text {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: #d4af37;
  text-align: center;
  text-transform: uppercase;
  padding: 0 14px;
}

.team-wheel__ring {
  position: absolute;
  inset: 0;
}

.team-node {
  position: absolute;
  top: 50%;
  left: 50%;
  /* --node-size is set on the ring by teaminfo.js, which shrinks the circles as
     the slot count grows so they never overlap. The 84px fallback is the size
     used at 16 slots or fewer. */
  width: var(--node-size, 84px);
  height: var(--node-size, 84px);
  margin-top: calc(var(--node-size, 84px) / -2);
  margin-left: calc(var(--node-size, 84px) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Real teams render as <button>, so strip the UA button chrome
     (grey face + white outset border) that would box in the round logo. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}
.team-node:focus-visible { outline: none; }
/* Nodes sit close together once the ring is busy, and :hover scales them up —
   lift the active one so it grows over its neighbours rather than under them. */
.team-node:hover,
.team-node:focus-within { z-index: 2; }

.team-node__circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  /* Pinned dark in both themes: several team logos are white/pale with transparent
     backgrounds and would vanish against the light theme's cream --bg. */
  background: #191410;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.team-node__circle:hover,
.team-node__circle:focus-visible {
  transform: scale(1.14);
  border-color: var(--silver);
  box-shadow: 0 0 18px var(--silver-glow);
  outline: none;
}
.team-node__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-node__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  /* Scales with the circle so initials still fit once nodes shrink. */
  font-size: calc(var(--node-size, 84px) * 0.28);
  color: var(--silver);
  background: linear-gradient(135deg, var(--accent-brown), var(--bg));
}

.team-node--empty .team-node__circle {
  opacity: 0.32;
  border-style: dashed;
  cursor: default;
  box-shadow: none;
}
.team-node--empty .team-node__circle:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}
.team-node--empty .team-node__fallback {
  background: transparent;
  color: var(--muted);
  font-size: calc(var(--node-size, 84px) * 0.34);
}

.teaminfo-empty {
  padding: 40px 20px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ── Mobile fallback: collapse ring into a grid ── */
@media (max-width: 860px) {
  .team-wheel {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .team-wheel__trophy {
    position: static;
    transform: none;
    width: 168px;
    height: 168px;
    flex-shrink: 0;
  }
  .team-wheel__trophy-icon { width: 58px; height: 58px; }
  .team-wheel__trophy-text { font-size: 0.9rem; }

  .team-wheel__ring {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 16px;
    width: 100%;
  }
  .team-node {
    position: static;
    margin: 0;
    transform: none !important;
    width: auto;
    height: auto;
    /* The grid wraps instead of crowding a ring, so nodes stay full size here.
       Declared on the node so it beats the ring's inline value by inheritance. */
    --node-size: 84px;
  }
  .team-node__circle {
    width: 84px;
    height: 84px;
    margin: 0 auto;
  }
}