/* World Cup 2026 · FlowerWorlds — shared UI kit styles (Builder 2)
 * Soft light theme. Mobile-first. Vanilla CSS only — no libs.
 * Consumed by wc-ui.js AND reused by the squads / odds / forecast modules.
 * Theme tokens (bg #eef1f8, cyan #0a8aa8, purple #8b2fd6, muted #6b6480, ink #16122a)
 * are declared on :root by the page shell; we add only the rating-tier tokens here.
 */
:root {
  --wc-gold: #ffd24a;
  --wc-green: #3ddc84;
  --wc-cyan: #00e5ff;
  --wc-muted: #6b6480;
  --wc-red: #ff6b6b;
}

/* ===== Section headers ===================================================== */
.wc-head {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--cyan, #0a8aa8);
  text-transform: uppercase;
  margin: 18px 2px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wc-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.wc-sub {
  color: var(--muted, #6b6480);
  font-size: 13px;
  line-height: 1.55;
  margin: 2px 2px 14px;
}

/* ===== Rating badge ======================================================== */
.wc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  border: 1.5px solid var(--wc-cyan);
  color: var(--cyan, #0a8aa8);
  background: rgba(0, 229, 255, .12);
  box-shadow: none;
}
.wc-badge--gold  { color: #a87a00;  border-color: var(--wc-gold);  background: rgba(255, 210, 74, .18);  box-shadow: none; }
.wc-badge--green { color: #1b9e5a; border-color: var(--wc-green); background: rgba(61, 220, 132, .16); box-shadow: none; }
.wc-badge--cyan  { color: var(--cyan, #0a8aa8);  border-color: var(--wc-cyan);  background: rgba(0, 229, 255, .12);   box-shadow: none; }
.wc-badge--muted { color: var(--muted, #6b6480); border-color: var(--muted, #6b6480); background: rgba(107, 100, 128, .12); box-shadow: none; }
.wc-badge--red   { color: #d23b3b;   border-color: var(--wc-red);   background: rgba(255, 107, 107, .14); box-shadow: none; }

/* ===== Attribute bar ======================================================= */
.wc-attr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
  font-size: 13px;
}
.wc-attr-label {
  width: 96px;
  flex: 0 0 96px;
  color: var(--ink, #16122a);
  font-weight: 600;
}
.wc-attr-num {
  width: 30px;
  flex: 0 0 30px;
  text-align: right;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 12px;
  color: var(--muted, #6b6480);
}
.wc-attr-track {
  flex: 1;
  height: 9px;
  border-radius: 6px;
  background: var(--surface-2, #f4f6fb);
  overflow: hidden;
}
.wc-attr-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--wc-cyan);
  transition: width .4s ease;
}
.wc-attr--gold  .wc-attr-fill { background: linear-gradient(90deg, #ffd24a, #ffb02a); }
.wc-attr--gold  .wc-attr-num  { color: #a87a00; }
.wc-attr--green .wc-attr-fill { background: linear-gradient(90deg, #3ddc84, #18b463); }
.wc-attr--green .wc-attr-num  { color: #1b9e5a; }
.wc-attr--cyan  .wc-attr-fill { background: linear-gradient(90deg, var(--grad-a), #00a6d6); }
.wc-attr--cyan  .wc-attr-num  { color: var(--cyan, #0a8aa8); }
.wc-attr--muted .wc-attr-fill { background: linear-gradient(90deg, #8b7fb0, #6a5f87); }
.wc-attr--red   .wc-attr-fill { background: linear-gradient(90deg, #ff6b6b, #d64545); }
.wc-attr--red   .wc-attr-num  { color: #d23b3b; }

/* ===== Pill chip =========================================================== */
.wc-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--muted, #6b6480);
  color: var(--muted, #6b6480);
  background: transparent;
  white-space: nowrap;
}
.wc-pill--cyan {
  color: var(--cyan, #0a8aa8);
  border-color: rgba(10, 138, 168, .45);
  background: rgba(0, 229, 255, .10);
  box-shadow: none;
}

/* ===== Player card ========================================================= */
.wc-pcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line, rgba(20, 16, 40, 0.10));
  border-radius: 13px;
  background: var(--surface, #ffffff);
  box-shadow: 0 2px 14px var(--shadow, rgba(30, 25, 60, 0.06));
  margin-bottom: 9px;
}
.wc-pcard__no {
  flex: 0 0 26px;
  width: 26px;
  text-align: center;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 13px;
  color: var(--purple, #8b2fd6);
}
.wc-pcard__body { flex: 1; min-width: 0; }
.wc-pcard__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #16122a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-pcard__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted, #6b6480);
}
.wc-pcard__pos {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--cyan, #0a8aa8);
}
.wc-pcard__rating { flex: 0 0 auto; margin-left: 8px; }

/* ===== Football pitch / formation ========================================== */
.wc-pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 10px;
  min-height: 380px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(20, 16, 40, 0.10));
  box-shadow: 0 2px 14px var(--shadow, rgba(30, 25, 60, 0.06));
  background:
    repeating-linear-gradient(180deg, rgba(10, 138, 168, .06) 0 1px, transparent 1px 56px),
    radial-gradient(120% 70% at 50% 0%, rgba(139, 47, 214, .08), transparent 60%),
    linear-gradient(180deg, #eaf3ec, #e2eee6);
  overflow: hidden;
}
[data-theme="dark"] .wc-pitch {
  background:
    repeating-linear-gradient(180deg, rgba(0, 229, 255, .05) 0 1px, transparent 1px 56px),
    radial-gradient(120% 70% at 50% 0%, rgba(181, 43, 224, .10), transparent 60%),
    linear-gradient(180deg, #14321f, #102a1a);
}
/* centre line + circle markings */
.wc-pitch::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: var(--line, rgba(20, 16, 40, .10));
}
.wc-pitch::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line, rgba(20, 16, 40, .10));
  border-radius: 50%;
}
/* a row of players for one line (GK / DF / MF / FW); top = attack, bottom = keeper */
.wc-pitch__row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wc-pitch__row--gk { order: 4; }
.wc-pitch__row--df { order: 3; }
.wc-pitch__row--mf { order: 2; }
.wc-pitch__row--fw { order: 1; }
/* a single dot/token on the pitch */
.wc-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 88px;
  text-align: center;
}
.wc-spot__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-accent, #04121a);
  background: radial-gradient(circle at 35% 30%, #6cf2ff, var(--grad-a) 70%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 8px rgba(30, 25, 60, .18);
}
.wc-pitch__row--gk .wc-spot__dot {
  background: radial-gradient(circle at 35% 30%, #c87bf0, var(--purple) 70%);
  box-shadow: 0 2px 8px rgba(30, 25, 60, .18);
  color: #fff;
}
.wc-spot__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #16122a);
  line-height: 1.15;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-spot__tag {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .5px;
  color: var(--muted, #6b6480);
}

/* ===== Sortable / odds table =============================================== */
.wc-otable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  border: 1px solid var(--line, rgba(20, 16, 40, 0.10));
  border-radius: 12px;
  overflow: hidden;
}
.wc-otable thead th {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cyan, #0a8aa8);
  text-align: left;
  padding: 11px 12px;
  background: rgba(0, 229, 255, .08);
  border-bottom: 1px solid var(--line, rgba(20, 16, 40, 0.10));
  white-space: nowrap;
}
.wc-otable th.wc-sortable {
  cursor: pointer;
  user-select: none;
}
.wc-otable th.wc-sortable:hover { color: var(--cyan, #0a8aa8); }
/* sort caret — set the column's state via the class on the <th> */
.wc-otable th.wc-sortable::after {
  content: '\2195';            /* up-down arrow, dim by default */
  margin-left: 6px;
  font-size: 10px;
  opacity: .4;
}
.wc-otable th.wc-sort-asc::after  { content: '\25B2'; opacity: 1; }
.wc-otable th.wc-sort-desc::after { content: '\25BC'; opacity: 1; }
.wc-otable tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, rgba(20, 16, 40, 0.10));
  color: var(--ink, #16122a);
  vertical-align: middle;
}
.wc-otable tbody tr:last-child td { border-bottom: none; }
.wc-otable tbody tr:nth-child(even) td { background: var(--surface-2, #f4f6fb); }
.wc-otable tbody tr:hover td { background: rgba(0, 229, 255, .07); }
.wc-otable .wc-otable__team {
  font-weight: 600;
  white-space: nowrap;
}
.wc-otable .wc-otable__num {
  font-family: 'Orbitron', system-ui, sans-serif;
  text-align: right;
  white-space: nowrap;
}
.wc-otable .wc-otable__rank {
  font-family: 'Orbitron', system-ui, sans-serif;
  color: var(--muted, #6b6480);
  width: 30px;
}

/* ===== Mobile-first responsive tweaks ====================================== */
@media (max-width: 480px) {
  .wc-attr-label { width: 76px; flex-basis: 76px; }
  .wc-pitch { min-height: 340px; padding: 16px 4px; }
  .wc-spot__dot { width: 32px; height: 32px; font-size: 12px; }
  .wc-spot__name { font-size: 10px; max-width: 70px; }
  .wc-spot { max-width: 72px; }
  .wc-otable { font-size: 12.5px; }
  .wc-otable thead th,
  .wc-otable tbody td { padding: 9px 8px; }
}
[data-theme="dark"] .wc-pitch{background:repeating-linear-gradient(180deg,rgba(255,255,255,.04) 0 1px,transparent 1px 56px),linear-gradient(180deg,#15321f,#0f2417)}