/* ── Mundial 2026 Pick'em ─────────────────────────────────────────────────── */

/* Dedicated "stadium" backdrop, only while the Mundial tool is active.
   Painted on the scroll container so it fills the viewport (no flat black area
   when the content is short) and stays put while scrolling. All layers are
   semi-transparent, so the site's ambient particles still show through. */
.app-main:has(#tool-mundial.active) {
  background:
    radial-gradient(130% 75% at 50% -8%,  rgba(57,255,133,.10), transparent 58%),
    radial-gradient(95%  55% at 50% 112%, rgba(245,158,11,.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(57,255,133,.020) 0 64px, transparent 64px 128px),
    linear-gradient(180deg, transparent 55%, rgba(8,12,10,.45) 100%);
}

.mundial-wrap {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* KO bracket expands to use full page width */
.mundial-wrap--bracket {
  max-width: 100%;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.mundial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.mundial-back-link {
  font-size: .78rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  transition: color .15s, border-color .15s;
  flex-shrink: 0;
}
.mundial-back-link:hover { color: var(--accent-bright); border-color: var(--border2); }
/* Login-screen "← EnsaladaDeFruta" link: brighten on hover (was inline JS) */
.mw-home-link:hover { opacity: 1 !important; }
.mundial-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
.mundial-user-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: .3rem .85rem;
  font-size: .875rem;
}
.mundial-logout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  transition: color .15s;
}
.mundial-logout-btn:hover { color: var(--danger, #ef4444); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.mundial-tabs {
  display: flex;
  gap: .375rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.mundial-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.mundial-tab-btn:hover {
  color: var(--text);
  background: var(--surface);
}
.mundial-tab-btn.active {
  color: var(--mw-gold);
  border-bottom-color: var(--mw-gold);
}

/* ── Auth panel ─────────────────────────────────────────────────────────── */
.mundial-auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .mundial-auth-grid { grid-template-columns: 1fr; }
}
.mundial-auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
}
.mundial-auth-card h4 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
}
.mundial-auth-card .form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Loading spinner ─────────────────────────────────────────────────────── */
.mundial-loading {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-muted);
  padding: 2rem 0;
}

/* ── Leaderboard ─────────────────────────────────────────────────────────── */
.mundial-leaderboard {
  width: 100%;
  border-collapse: collapse;
}
.mundial-leaderboard th {
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .5rem .75rem;
  border-bottom: 2px solid var(--border);
}
.mundial-leaderboard td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.mundial-leaderboard tr:hover td {
  background: var(--surface);
}
.mundial-leaderboard .rank-1 td:first-child { color: #f59e0b; font-weight: 700; }
.mundial-leaderboard .rank-2 td:first-child { color: #9ca3af; font-weight: 700; }
.mundial-leaderboard .rank-3 td:first-child { color: #cd7f32; font-weight: 700; }
.mundial-pts-big {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mw-gold);
}
.mundial-me-row td {
  background: rgba(57,255,133,.08) !important;
}

/* Movement indicator (↑/↓/=) */
.mw-trend-cell { width: 2.5rem; }
.mw-delta {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.mw-delta i { font-size: .7rem; }
.mw-delta-up   { color: var(--accent-bright); }
.mw-delta-down { color: #f87171; }
.mw-delta-same { color: var(--text-muted); }
.mw-delta-new  { color: var(--text-muted); opacity: .6; }

/* ── Group cards (quiniela) ──────────────────────────────────────────────── */
.mundial-stage-header {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 1.5rem 0 .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.mundial-stage-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mundial-group-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.mundial-group-title {
  background: var(--surface2, var(--surface));
  border-bottom: 1px solid var(--border);
  padding: .6rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

/* ── Match row ───────────────────────────────────────────────────────────── */
.mundial-match-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.mundial-match-row:last-child { border-bottom: none; }
.mundial-match-row:hover:not(.mundial-pred-locked) { background: rgba(57,255,133,.04); }

.mundial-match-teams {
  font-weight: 600;
  font-size: .9rem;
  min-width: 0;
}
.mundial-match-teams span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mundial-match-date {
  font-size: .78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.mundial-match-vs {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  padding: .1rem 0;
}

/* ── Prediction inputs ───────────────────────────────────────────────────── */
.mundial-pred-input {
  display: flex;
  align-items: center;
  gap: .375rem;
}
.mundial-pred-input input[type=number] {
  width: 46px;
  text-align: center;
  padding: .3rem .25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface2, #1a2038);
  color: var(--text);
  font-size: .95rem;
  font-weight: 700;
  -moz-appearance: textfield;
}
.mundial-pred-input input[type=number]::-webkit-inner-spin-button,
.mundial-pred-input input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mundial-pred-input input[type=number]:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 2px rgba(57,255,133,.25);
}
.mundial-pred-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
}
.mundial-pred-btn {
  font-size: .78rem;
  padding: .3rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2, #1a2038);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.mundial-pred-btn:hover {
  border-color: var(--accent-bright);
  background: rgba(57,255,133,.1);
  color: var(--accent-bright);
}
.mundial-pred-btn.saving {
  opacity: .6;
  pointer-events: none;
}

/* ── Lock state ──────────────────────────────────────────────────────────── */
.mundial-pred-locked {
  opacity: .7;
}
.mundial-pred-locked .mundial-pred-input {
  pointer-events: none;
  opacity: .55;
}
.mundial-lock-icon {
  font-size: .82rem;
  color: var(--text-muted);
}
.mundial-score-actual {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Prediction feedback ─────────────────────────────────────────────────── */
.mundial-pred-correct {
  background: rgba(34,197,94,.08);
}
.mundial-pred-correct .mundial-match-teams span:first-child { color: #22c55e; }
.mundial-pred-result-tag {
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .4rem;
  border-radius: 4px;
  white-space: nowrap;
}
.mundial-pred-result-tag.exact {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}
.mundial-pred-result-tag.correct {
  background: rgba(59,130,246,.15);
  color: #3b82f6;
}
.mundial-pred-result-tag.wrong {
  background: rgba(239,68,68,.13);
  color: #ef4444;
}
.mundial-pred-result-tag.pending {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
}

/* ── Right side of match row ─────────────────────────────────────────────── */
.mundial-match-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3rem;
  min-width: 130px;
}

/* ── Awards grid ─────────────────────────────────────────────────────────── */
.mundial-awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.mundial-award-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.mundial-award-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.mundial-award-input-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.mundial-award-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--surface2, #1a2038);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: .35rem .6rem;
  font-size: .88rem;
}
.mundial-award-input-row input:focus {
  outline: none;
  border-color: #3b82f6;
}
.mundial-award-input-row button {
  font-size: .78rem;
  padding: .35rem .65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2, #1a2038);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.mundial-award-input-row button:hover {
  border-color: #3b82f6;
  background: rgba(59,130,246,.1);
  color: #3b82f6;
}

/* ── Subtabs ─────────────────────────────────────────────────────────────── */
.mundial-subtabs {
  display: flex;
  gap: .25rem;
  margin-bottom: 1rem;
}
.mundial-subtab-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .35rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
}
.mundial-subtab-btn.active {
  background: rgba(59,130,246,.12);
  border-color: #3b82f6;
  color: #3b82f6;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.mundial-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}
.mundial-toast-item {
  padding: .6rem 1rem;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  animation: mundialToastIn .2s ease;
  pointer-events: auto;
}
.mundial-toast-item.success { background: #16a34a; }
.mundial-toast-item.error   { background: #dc2626; }
@keyframes mundialToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Info note ───────────────────────────────────────────────────────────── */
.mundial-info-note {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  line-height: 1.5;
}
/* The leading icon stays inline so the text (incl. <strong>) flows naturally */
.mundial-info-note > .bi:first-child { color: var(--accent-bright); }

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mundial-match-row {
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .mundial-match-right {
    align-items: flex-start;
  }
  .mundial-header { flex-direction: column; align-items: flex-start; }
}

/* ─── Tournament banner ─────────────────────────────────────────────────────── */
.mundial-banner {
  padding: .75rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: .9rem;
  font-weight: 500;
}
.mundial-banner--open {
  background: var(--mw-gold-dim);
  border: 1px solid rgba(245,158,11,.35);
  color: #fcd34d;
}
.mundial-banner--closed {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
}

/* ─── Knockout bracket team slots ───────────────────────────────────────────── */
.mundial-ko-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mundial-ko-row:last-child { border-bottom: none; }
.mundial-ko-center {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.mundial-ko-team {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 0 0 auto;
  width: 130px;
  padding: .4rem .6rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  border: 1.5px dashed rgba(99,102,241,.35);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: left;
  overflow: hidden;
}
.mundial-ko-team.filled {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
}
.mundial-ko-team.empty {
  color: #94a3b8;
}
.mundial-ko-team:not(.locked):hover {
  border-color: #6366f1;
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
}
.mundial-ko-team.locked { cursor: default; }
div.mundial-ko-team { cursor: default; }
.mundial-ko-ph { font-size: .72rem; opacity: .7; }
.mundial-flag-sm {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.mundial-ko-score-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;
  margin-top: .35rem;
}
.mundial-ko-score-row input {
  width: 42px;
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: inherit;
  padding: .18rem .25rem;
  font-size: .88rem;
}
.mundial-ko-save-btn {
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.4);
  color: #a5b4fc;
  border-radius: 6px;
  padding: .18rem .5rem;
  font-size: .85rem;
  cursor: pointer;
}
.mundial-ko-save-btn:hover { background: rgba(99,102,241,.35); }
.mundial-ko-actual-score {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-top: .2rem;
}

/* ─── Team picker modal ──────────────────────────────────────────────────────── */
.mundial-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.mundial-picker-modal {
  background: #1e293b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.mundial-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 600;
  font-size: .95rem;
  flex-shrink: 0;
}
.mundial-picker-header button {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 1rem;
  padding: .2rem .45rem;
  border-radius: 6px;
  line-height: 1;
}
.mundial-picker-header button:hover { background: rgba(255,255,255,.1); color: #fff; }
.mundial-picker-list {
  overflow-y: auto;
  padding: .5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
}
.mundial-team-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .65rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  font-size: .82rem;
  transition: background .12s, border-color .12s;
}
.mundial-team-option:hover {
  background: rgba(99,102,241,.2);
  border-color: #6366f1;
  color: #fff;
}
.mundial-team-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.mundial-flag-ph { font-size: 1.1rem; }

@media (max-width: 480px) {
  .mundial-ko-team { width: 100px; font-size: .75rem; }
  .mundial-picker-list { grid-template-columns: 1fr; }
}

/* ─── Award select dropdown ──────────────────────────────────────────────────── */
.mundial-award-select {
  flex: 1;
  background: var(--bg-input, #1e1e2e);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: inherit;
  font-size: .82rem;
  padding: .35rem .5rem;
  min-width: 0;
}
.mundial-award-select:focus { outline: none; border-color: rgba(99,102,241,.6); }
.mundial-award-btn {
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: .35rem .75rem;
  font-size: .82rem;
  cursor: pointer;
  flex-shrink: 0;
}
.mundial-award-btn:hover { background: #4338ca; }
.mundial-award-value {
  font-size: .88rem;
  color: var(--text-muted, #9ca3af);
}

/* ─── Award points badge (leaderboard column) ───────────────────────────────── */
.award-pts-badge {
  display: inline-block;
  background: rgba(251,191,36,.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 4px;
  font-size: .75rem;
  padding: .1rem .35rem;
  font-weight: 600;
}

/* ─── Award result badges (in premios cards) ─────────────────────────────────── */
.award-pts-label {
  font-size: .7rem;
  color: #fbbf24;
  font-weight: 600;
  opacity: .8;
}
.award-result-badge {
  display: inline-block;
  margin-top: .35rem;
  padding: .25rem .55rem;
  border-radius: 5px;
  font-size: .8rem;
  font-weight: 600;
}
.award-result-badge em { font-style: normal; opacity: .75; margin-left: .3rem; }
.award-result-hit  { background: rgba(34,197,94,.18); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.award-result-miss { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.3); }

/* ─── Admin row to set actual award results ──────────────────────────────────── */
.award-admin-row {
  display: flex;
  gap: .4rem;
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px dashed rgba(255,255,255,.1);
}
.award-admin-input {
  flex: 1;
  background: rgba(251,191,36,.07);
  border: 1px dashed rgba(251,191,36,.4);
  border-radius: 5px;
  color: #fbbf24;
  font-size: .78rem;
  padding: .28rem .5rem;
  min-width: 0;
}
.award-admin-input:focus { outline: none; border-color: #fbbf24; }
.award-admin-btn {
  background: rgba(251,191,36,.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.4);
  border-radius: 5px;
  padding: .28rem .65rem;
  font-size: .78rem;
  cursor: pointer;
  flex-shrink: 0;
}
.award-admin-btn:hover { background: rgba(251,191,36,.3); }

/* ─── Award combobox (searchable) ────────────────────────────────────────────── */
.award-combo {
  position: relative;
  flex: 1;
  min-width: 0;
}
.award-combo-input {
  width: 100%;
  background: var(--bg-input, #1e1e2e);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: inherit;
  font-size: .82rem;
  padding: .35rem .5rem;
  box-sizing: border-box;
}
.award-combo-input:focus {
  outline: none;
  border-color: rgba(99,102,241,.6);
}
.award-combo-list {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #1a2035;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.award-combo-opt {
  padding: .4rem .6rem;
  font-size: .82rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.award-combo-opt:hover {
  background: rgba(99,102,241,.25);
}
.award-combo-sub {
  font-size: .74rem;
  color: var(--text-muted, #9ca3af);
  flex-shrink: 0;
}

/* ─── Bracket visual ─────────────────────────────────────────────────────────── */

/* Stage accent colours: R32 blue · R16 teal · QF orange · SF purple · Final gold */
:root {
  --bk-r32:  #3b82f6;
  --bk-r16:  #06b6d4;
  --bk-qf:   #f97316;
  --bk-sf:   #a855f7;
  --bk-fin:  #fbbf24;
  --bk-bro:  #94a3b8;
  --bk-line: rgba(148,163,184,.35);
  --bk-card: #161b27;
  --bk-card-border: rgba(255,255,255,.1);
}

.bk-outer {
  background: linear-gradient(160deg, #0b1120 0%, #111827 50%, #0d1a2d 100%);
  border-radius: 14px;
  padding: 18px 16px 24px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  /* Break out of parent max-width container to use full viewport */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
}

.bk-wrap {
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}

/* ── Stage header labels row ── */
.bk-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* min-width set dynamically by JS */
  padding: 0 6px 10px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.bk-labels span { flex: 1; text-align: center; }

/* Per-stage colour on labels */
.bk-lbl-r32  { color: var(--bk-r32); }
.bk-lbl-r16  { color: var(--bk-r16); }
.bk-lbl-qf   { color: var(--bk-qf); }
.bk-lbl-sf   { color: var(--bk-sf); }
.bk-lbl-final {
  flex: 0 0 170px !important;
  text-align: center;
  color: var(--bk-fin);
  font-size: .8rem;
  letter-spacing: .12em;
}

.bk-tree {
  display: flex;
  align-items: stretch;
  /* height and min-width set dynamically by JS based on bracket depth */
}

/* ── Halves ── */
.bk-half {
  flex: 1;
  display: flex;
  min-width: 0;
}
.bk-half--right {
  flex-direction: row-reverse;
}

/* ── Stages ── */
.bk-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 100px;
  max-width: 165px;
  position: relative;
  /* height set by JS */
}

/* Stage left border accent by data-stage attribute */
.bk-stage[data-stage="ROUND_OF_32"]    .bk-match { border-left: 3px solid var(--bk-r32); }
.bk-stage[data-stage="ROUND_OF_16"]    .bk-match { border-left: 3px solid var(--bk-r16); }
.bk-stage[data-stage="QUARTER_FINALS"] .bk-match { border-left: 3px solid var(--bk-qf);  }
.bk-stage[data-stage="SEMI_FINALS"]    .bk-match { border-left: 3px solid var(--bk-sf);  }

/* Right half: accent on right instead */
.bk-half--right .bk-stage[data-stage="ROUND_OF_32"]    .bk-match { border-left: none; border-right: 3px solid var(--bk-r32); }
.bk-half--right .bk-stage[data-stage="ROUND_OF_16"]    .bk-match { border-left: none; border-right: 3px solid var(--bk-r16); }
.bk-half--right .bk-stage[data-stage="QUARTER_FINALS"] .bk-match { border-left: none; border-right: 3px solid var(--bk-qf);  }
.bk-half--right .bk-stage[data-stage="SEMI_FINALS"]    .bk-match { border-left: none; border-right: 3px solid var(--bk-sf);  }

/* ── Slots ── */
.bk-slot {
  /* flex-basis and height set by JS for pixel-perfect symmetry */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 2px 5px;
  position: relative;
  box-sizing: border-box;
}

/* ── Connector lines — Left half → RIGHT ── */
.bk-half--left .bk-stage:not(:last-child) .bk-slot--top::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1px;
  width: 9px;
  height: calc(50% + 2px);
  border-top: 1px solid var(--bk-line);
  border-right: 1px solid var(--bk-line);
  pointer-events: none;
}
.bk-half--left .bk-stage:not(:last-child) .bk-slot--bot::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  width: 9px;
  height: calc(50% + 2px);
  border-bottom: 1px solid var(--bk-line);
  border-right: 1px solid var(--bk-line);
  pointer-events: none;
}
.bk-half--left .bk-stage + .bk-stage .bk-slot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -9px;
  width: 9px;
  border-top: 1px solid var(--bk-line);
  pointer-events: none;
}

/* ── Connector lines — Right half → LEFT (mirrored) ── */
.bk-half--right .bk-stage:not(:last-child) .bk-slot--top::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -1px;
  width: 9px;
  height: calc(50% + 2px);
  border-top: 1px solid var(--bk-line);
  border-left: 1px solid var(--bk-line);
  pointer-events: none;
}
.bk-half--right .bk-stage:not(:last-child) .bk-slot--bot::after {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 9px;
  height: calc(50% + 2px);
  border-bottom: 1px solid var(--bk-line);
  border-left: 1px solid var(--bk-line);
  pointer-events: none;
}
.bk-half--right .bk-stage + .bk-stage .bk-slot::before {
  content: '';
  position: absolute;
  top: 50%;
  right: -9px;
  width: 9px;
  border-top: 1px solid var(--bk-line);
  pointer-events: none;
}

/* ── Match cards ── */
.bk-match {
  width: 100%;
  background: var(--bk-card);
  border: 1px solid var(--bk-card-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: .68rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: box-shadow .15s;
}
.bk-match:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.bk-match--empty {
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 8px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.15);
  font-size: .68rem;
  width: 100%;
}

.bk-date {
  font-size: .6rem;
  color: rgba(148,163,184,.6);
  padding: 3px 6px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height: 1.2;
  background: rgba(255,255,255,.02);
}

.bk-team {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 5px;
  min-height: 22px;
  border: none;
  background: transparent;
  color: #e2e8f0;
  width: 100%;
  text-align: left;
  cursor: default;
  font-size: .68rem;
  position: relative;
  transition: background .12s;
}
.bk-team + .bk-team {
  border-top: 1px solid rgba(255,255,255,.06);
}
.bk-team--win {
  background: rgba(34,197,94,.12);
  font-weight: 700;
  color: #86efac;
}
.bk-team--win .bk-name { color: #86efac; }
.bk-team--pick {
  cursor: pointer;
}
.bk-team--pick:hover {
  background: rgba(99,102,241,.2);
  color: #c7d2fe;
}

.bk-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.bk-flag-ph {
  width: 18px;
  height: 12px;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
}
.bk-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: 500;
}
.bk-ph {
  font-style: italic;
  color: rgba(148,163,184,.55);
  font-size: .68rem;
  font-weight: 400;
}
.bk-sc {
  font-weight: 800;
  font-size: .75rem;
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
  color: #f1f5f9;
}
.bk-sc--pred { color: #c4b5fd; }
.bk-pick-icon {
  font-size: .55rem;
  opacity: .45;
  flex-shrink: 0;
  color: #94a3b8;
}

/* ── Center column (Final + Bronze) ── */
.bk-center {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 4px;
}
.bk-fin-wrap, .bk-bro-wrap {
  width: 100%;
}

/* Final card: gold glow */
.bk-fin-wrap .bk-match {
  border: 1px solid rgba(251,191,36,.35);
  border-left: 3px solid var(--bk-fin);
  box-shadow: 0 0 18px rgba(251,191,36,.18), 0 4px 12px rgba(0,0,0,.4);
}

/* Bronze card */
.bk-bro-wrap .bk-match {
  border-left: 3px solid var(--bk-bro);
}

.bk-fin-lbl {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--bk-fin);
  text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(251,191,36,.5);
}
.bk-bro-lbl {
  font-size: .62rem;
  font-weight: 700;
  color: var(--bk-bro);
  text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

@media (max-width: 768px) {
  .bk-outer { padding: 10px 4px 12px; border-radius: 10px; }
  .bk-wrap { font-size: .64rem; }
  .bk-stage { min-width: 80px; max-width: 115px; }
  .bk-center { flex: 0 0 100px; }
  .bk-lbl-final { flex: 0 0 100px !important; font-size: .7rem; }
  .bk-flag { width: 16px; height: 11px; }
  .bk-flag-ph { width: 16px; height: 11px; }
  .bk-team { padding: 4px 4px; min-height: 20px; gap: 3px; }
  .bk-match { border-radius: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   MUNDIAL 2026 — Stadium Redesign
   ═══════════════════════════════════════════════════════════════ */

/* Font system */
:root {
  --mw-font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mw-font-body: 'Barlow', system-ui, sans-serif;
  --mw-gold: #f59e0b;                 /* World-Cup identity accent (kept) */
  --mw-gold-dim: rgba(245,158,11,.15);
  --mw-blue: var(--primary);          /* harmonised with the site palette */
  --mw-blue-dim: rgba(29,185,84,.12);
  --mw-green: var(--accent-bright);   /* site green #39ff85 (was #22c55e) */
  --mw-surface: var(--surface);       /* site dark-green canvas (was slate #111827) */
  --mw-surface2: var(--surface2);     /* (was #1e293b) */
  --mw-border: var(--border);         /* (was rgba white .08) */
  --mw-text: var(--text);
  --mw-muted: var(--text-muted);      /* greenish muted (was slate #64748b) */
}

/* Override header to be more stadium-like */
.mundial-header h2 {
  font-family: var(--mw-font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--mw-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tab buttons — bolder */
.mundial-tab-btn {
  font-family: var(--mw-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mundial-tab-btn.active {
  color: var(--mw-gold);
  border-bottom-color: var(--mw-gold);
}

/* Subtabs */
.mundial-subtab-btn {
  font-family: var(--mw-font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .45rem 1.1rem;
  border-radius: 8px;
}
.mundial-subtab-btn.active {
  background: var(--mw-gold-dim);
  border-color: var(--mw-gold);
  color: var(--mw-gold);
}

/* ── Group Tabs A-L ──────────────────────────────────────────── */
.mw-group-tabs-bar {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .5rem;
  background: #0a0e1a;
  border-radius: 10px;
  border: 1px solid var(--mw-border);
}

.mw-group-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .55rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mw-muted);
  cursor: pointer;
  transition: all .15s;
  line-height: 1.1;
  min-width: 44px;
}
.mw-group-tab-btn:hover {
  background: var(--mw-surface2);
  color: var(--mw-text);
}
.mw-group-tab-btn.active {
  background: var(--mw-gold-dim);
  border-color: var(--mw-gold);
  color: var(--mw-gold);
}
.mw-gt-label {
  font-family: var(--mw-font-display);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .7;
  text-transform: uppercase;
}
.mw-gt-letter {
  font-family: var(--mw-font-display);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

/* ── Two-column group layout ─────────────────────────────────── */
.mw-group-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 820px) {
  .mw-group-layout { grid-template-columns: 1fr; }
}

/* ── Panel (card container) ──────────────────────────────────── */
.mw-panel {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: 12px;
  overflow: hidden;
}
.mw-panel-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: #0a0e1a;
  border-bottom: 1px solid var(--mw-border);
}
.mw-panel-badge {
  font-family: var(--mw-font-display);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mw-gold);
  background: var(--mw-gold-dim);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 6px;
  padding: .15rem .55rem;
}
.mw-panel-title {
  font-family: var(--mw-font-display);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mw-muted);
}
.mw-matches-list {
  /* No padding — match rows have their own */
}

/* Override group card to use new panel style */
.mundial-group-card {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
}
.mundial-group-title {
  font-family: var(--mw-font-display);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--mw-gold);
  background: #0a0e1a;
  border-bottom-color: var(--mw-border);
}

/* Override match rows inside new panel */
.mw-matches-list .mundial-match-row {
  border-bottom-color: var(--mw-border);
}
.mw-matches-list .mundial-match-teams {
  font-family: var(--mw-font-body);
  font-weight: 600;
}

/* ── Standings table ─────────────────────────────────────────── */
.mw-standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
}
.mw-standings-table thead tr {
  background: #0a0e1a;
  border-bottom: 2px solid var(--mw-border);
}
.mw-standings-table th {
  font-family: var(--mw-font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mw-muted);
  padding: .55rem .5rem;
  text-align: center;
}
.mw-standings-table th:nth-child(2) { text-align: left; padding-left: .75rem; }
.mw-standings-table td {
  padding: .45rem .5rem;
  text-align: center;
  border-bottom: 1px solid var(--mw-border);
  color: var(--mw-text);
  vertical-align: middle;
}
.mw-standings-table td:nth-child(2) { text-align: left; }
.mw-standings-table tbody tr:last-child td { border-bottom: none; }
.mw-standings-table tbody tr:hover td { background: rgba(255,255,255,.03); }

/* Qualified / Third place indicator — all rows get 3px transparent border so
   content stays aligned regardless of whether the color is shown */
.mw-standings-table tbody tr { border-left: 3px solid transparent; }
.mw-standings-table tbody tr.mw-qual  { border-left-color: var(--mw-green); }
.mw-standings-table tbody tr.mw-third { border-left-color: var(--mw-blue); }

.mw-pos {
  font-family: var(--mw-font-display);
  font-weight: 800;
  font-size: .9rem;
  color: var(--mw-muted);
  width: 22px;
}
.mw-qual .mw-pos { color: var(--mw-green); }
.mw-third .mw-pos { color: var(--mw-blue); }

.mw-team-cell {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
}
.mw-team-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mw-flag-xs {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.mw-pts {
  font-family: var(--mw-font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--mw-gold);
}
.mw-qual .mw-pts { color: var(--mw-green); }
.mw-dg-pos { color: var(--mw-green); font-weight: 700; }
.mw-dg-neg { color: #f87171; }
.mw-no-data { color: var(--mw-muted); font-size: .85rem; padding: 1rem; text-align: center; margin: 0; }

/* ── Accordion (tournament explanation) ──────────────────────── */
.mw-accordion {
  background: var(--mw-surface);
  border: 1px solid rgba(56,189,248,.2);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.mw-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  cursor: pointer;
  font-family: var(--mw-font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--mw-blue);
  list-style: none;
  user-select: none;
}
.mw-accordion-header::-webkit-details-marker { display: none; }
.mw-accordion-chevron { font-size: .9rem; transition: transform .2s; }
details.mw-accordion[open] .mw-accordion-chevron { transform: rotate(180deg); }
.mw-accordion-body {
  padding: .75rem 1rem 1rem;
  border-top: 1px solid var(--mw-border);
  font-size: .85rem;
  color: #94a3b8;
  line-height: 1.55;
}
.mw-accordion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .mw-accordion-grid { grid-template-columns: 1fr; }
}
.mw-acc-section-title {
  font-family: var(--mw-font-display);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mw-blue);
  margin-bottom: .4rem;
  margin-top: 0;
}
.mw-accordion-body p { margin: 0 0 .4rem; }
.mw-crosses-list {
  margin: .35rem 0 0 1rem;
  padding: 0;
  font-size: .8rem;
  line-height: 1.7;
}

/* ── Leaderboard improvements ────────────────────────────────── */
.mundial-leaderboard th {
  font-family: var(--mw-font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.mundial-leaderboard .rank-1 td { background: rgba(245,158,11,.06); }
.mundial-leaderboard .rank-1 td:first-child { color: var(--mw-gold); }

/* ── KO bracket visual polish ────────────────────────────────── */
.bk-outer {
  background: radial-gradient(ellipse at 50% 0%, rgba(245,158,11,.06) 0%, transparent 65%);
}
.bk-fin-lbl {
  font-family: var(--mw-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mw-gold) !important;
}
.bk-sf-lbl {
  font-family: var(--mw-font-display);
  font-weight: 800 !important;
  letter-spacing: .06em;
}
.bk-date {
  font-family: var(--mw-font-display);
  font-weight: 600;
}
.bk-name {
  font-family: var(--mw-font-body);
  font-weight: 600;
}
.bk-lbl-r32, .bk-lbl-r16, .bk-lbl-qf, .bk-lbl-sf {
  font-family: var(--mw-font-display);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .8rem;
}
.bk-team--win {
  background: rgba(34,197,94,.1) !important;
  border-left: 3px solid var(--mw-green) !important;
}

/* ── Banner tweaks ───────────────────────────────────────────── */
.mundial-banner {
  font-family: var(--mw-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ── Admin panel ─────────────────────────────────────────────── */
.admin-panel { max-width: 900px; }
.admin-panel h3 {
  font-family: var(--mw-font-display);
  font-size: 1.15rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: var(--mw-gold);
  margin: 0 0 .85rem;
}
.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; font-size: .85rem;
}
.admin-table th {
  text-align: left; padding: .55rem .7rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 700;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
.admin-table td {
  padding: .5rem .7rem; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-td-id { color: var(--text-muted); width: 2.5rem; }
.admin-td-actions { white-space: nowrap; text-align: right; }

.admin-table input,
.admin-table select,
.admin-new-cat input,
.admin-new-cat select {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: .4rem .6rem;
  font-size: .85rem; font-family: inherit; transition: border-color .15s;
}
.admin-table input:focus,
.admin-table select:focus,
.admin-new-cat input:focus,
.admin-new-cat select:focus {
  outline: none; border-color: var(--accent-bright);
}
.admin-pw-input { width: 100%; min-width: 9rem; }

.admin-btn {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); border-radius: 7px; padding: .4rem .8rem;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  margin-left: .35rem;
}
.admin-btn:first-child { margin-left: 0; }
.admin-btn:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.admin-btn:disabled { opacity: .5; cursor: default; }
.admin-btn-del:hover, .admin-btn-cat-del:hover,
.admin-btn-danger:hover {
  border-color: #ef4444 !important; color: #fca5a5 !important;
  background: rgba(239,68,68,.1) !important;
}

/* ── Admin stats dashboard ─────────────────────────────────────────────── */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: .65rem; margin-bottom: .5rem;
}
.admin-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: .75rem .9rem;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  text-align: center;
}
.admin-stat-num {
  font-family: var(--mw-font-display); font-size: 1.6rem; font-weight: 900;
  color: var(--accent-bright); line-height: 1;
}
.admin-stat-lbl {
  font-size: .72rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Admin tools row ───────────────────────────────────────────────────── */
.admin-tools-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem;
}
.admin-tool-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: .9rem 1.1rem;
}
.admin-tool-block > strong {
  display: block; font-size: .85rem; font-weight: 700;
  color: var(--mw-gold); margin-bottom: .4rem;
}
.admin-tool-help {
  font-size: .78rem; color: var(--text-muted); margin: 0 0 .65rem; line-height: 1.4;
}
.admin-tool-state {
  font-size: .78rem; color: var(--text-muted); margin: .55rem 0 0; line-height: 1.4;
}
.admin-btn-danger { border-color: #7f1d1d !important; color: #fca5a5 !important; }
.admin-btn-danger:hover { border-color: #ef4444 !important; color: #fca5a5 !important; background: rgba(239,68,68,.1) !important; }
.admin-btn-sm { padding: .25rem .55rem; font-size: .75rem; }
.admin-picks-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.admin-table-users td { font-size: .82rem; }

@media (max-width: 700px) {
  .admin-tools-row { grid-template-columns: 1fr; }
  .admin-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 440px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.admin-new-cat {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .85rem 1rem;
  background: var(--surface); border: 1px dashed var(--border2);
  border-radius: 12px;
}
.admin-new-cat strong {
  font-family: var(--mw-font-display); text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted); font-size: .8rem;
}
@media (max-width: 600px) {
  .admin-td-actions { text-align: left; }
  .admin-btn { margin: .2rem .35rem .2rem 0; }
}

/* ── Eliminatorias: groups-phase projection + KO placeholder ──────────────── */
.mw-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.mw-proj-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: .5rem .6rem .55rem;
}
.mw-proj-card-incomplete { opacity: .72; border-style: dashed; }
.mw-proj-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border);
}
.mw-proj-grp {
  font-family: var(--mw-font-display); font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; font-size: .82rem; color: var(--mw-gold);
}
.mw-proj-pending { font-size: .68rem; color: var(--text-muted); font-style: italic; }
.mw-proj-row {
  display: flex; align-items: center; gap: .4rem;
  padding: .22rem 0; font-size: .82rem;
}
.mw-proj-row + .mw-proj-row { border-top: 1px solid rgba(255,255,255,.04); }
.mw-proj-pos {
  width: 1.1rem; text-align: center; color: var(--text-muted);
  font-weight: 700; font-size: .75rem; flex-shrink: 0;
}
.mw-proj-name {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mw-proj-pts { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.mw-proj-q   .mw-proj-name { font-weight: 600; }
.mw-proj-q   .mw-proj-pos  { color: var(--accent-bright); }
.mw-proj-out { opacity: .5; }
.mw-proj-tag {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; flex-shrink: 0;
}
.mw-proj-tag-q    { background: rgba(57,255,133,.14); color: var(--accent-bright); }
.mw-proj-tag-3,
.mw-proj-tag-3out { background: rgba(245,158,11,.12); color: #fcd34d; }
.mw-proj-tag-3out { background: rgba(255,255,255,.06); color: var(--text-muted); }
.mw-proj-tag-3in  { background: rgba(245,158,11,.18); color: #fbbf24; }

.mw-ko-empty {
  text-align: center; padding: 3rem 1rem; color: var(--text-muted);
}
.mw-ko-empty i { font-size: 2.4rem; color: var(--mw-gold); opacity: .8; }
.mw-ko-empty h3 {
  font-family: var(--mw-font-display); text-transform: uppercase; letter-spacing: .04em;
  margin: .6rem 0 .4rem; color: var(--text);
}
.mw-ko-empty p { max-width: 460px; margin: 0 auto; font-size: .9rem; }

/* ── Admin: phase toggle ──────────────────────────────────────────────────── */
.admin-phase {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem; max-width: 560px;
}
.admin-phase-state { font-size: .9rem; margin-bottom: .4rem; }
.admin-phase-badge {
  margin-left: .4rem; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
}
.admin-phase-groups   { background: var(--mw-gold-dim); color: #fcd34d; }
.admin-phase-knockout { background: rgba(57,255,133,.14); color: var(--accent-bright); }
.admin-phase-help { font-size: .8rem; color: var(--text-muted); margin: .3rem 0 .7rem; line-height: 1.45; }
.admin-phase-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-phase-btn:disabled { opacity: 1; border-color: var(--accent-bright); color: var(--accent-bright); cursor: default; }

/* ── Knockout bracket (phase 2, user prediction) ──────────────────────────── */
.mw-ko-board {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px;
  align-items: flex-start;
}
.mw-ko-col { flex: 0 0 auto; width: 168px; display: flex; flex-direction: column; gap: 10px; }
.mw-ko-col-hdr {
  font-family: var(--mw-font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: .8rem; font-weight: 800; color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.mw-ko-w { color: var(--mw-gold); font-size: .72rem; }
.mw-ko-match {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.mw-ko-team {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .55rem; font-size: .82rem; cursor: pointer;
  border: none; background: none; color: var(--text); width: 100%; text-align: left;
  transition: background .12s;
}
.mw-ko-team + .mw-ko-team { border-top: 1px solid var(--border); }
.mw-ko-team[data-pick]:hover { background: rgba(57,255,133,.08); }
.mw-ko-team-tbd { color: var(--text-muted); cursor: default; opacity: .6; }
.mw-ko-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-ko-mark { color: var(--accent-bright); font-size: .9rem; }
.mw-ko-picked { background: rgba(57,255,133,.12); font-weight: 700; }
.mw-ko-correct { background: rgba(57,255,133,.18); font-weight: 700; }
.mw-ko-correct .mw-ko-mark { color: var(--accent-bright); }
.mw-ko-wrong { background: rgba(239,68,68,.12); color: #fca5a5; text-decoration: line-through; }
.mw-ko-match-locked .mw-ko-team { cursor: default; }

.mw-ko-champ {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--mw-gold-dim); border: 1px solid rgba(245,158,11,.35);
  border-radius: 12px; padding: .6rem 1rem; margin-bottom: 1rem;
}
.mw-ko-champ > .bi { color: var(--mw-gold); font-size: 1.3rem; }
.mw-ko-champ-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mw-ko-champ-name { font-family: var(--mw-font-display); font-weight: 800; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .4rem; }

/* ── Admin: KO editor ─────────────────────────────────────────────────────── */
.admin-ko { max-width: 720px; }
.admin-ko-actions { margin-bottom: .6rem; }
.admin-ko-subhdr {
  font-family: var(--mw-font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: .95rem; color: var(--text); margin: 1.2rem 0 .6rem;
}
.admin-ko-round { margin-bottom: .9rem; }
.admin-ko-round-hdr {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--mw-gold); margin-bottom: .35rem;
}
.admin-ko-winrow {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); margin-bottom: .35rem; flex-wrap: wrap;
}
.admin-ko-match { font-size: .82rem; }
.admin-ko-match em { color: var(--text-muted); font-style: normal; margin: 0 .25rem; }
.admin-ko-winbtns { display: flex; gap: .35rem; flex-wrap: wrap; }
.admin-ko-win-on { border-color: var(--accent-bright) !important; color: var(--accent-bright) !important; background: rgba(57,255,133,.1) !important; }
.admin-ko-clear { padding: .3rem .55rem !important; }

/* ── Match card: flag-row redesign ───────────────────────────── */
/* Override the old 3-column grid with a simple block layout */
.mw-matches-list .mundial-match-row {
  display: block;
  padding: .65rem 1rem;
}
/* Top bar: date (gold) on left, feedback badge on right */
.mw-mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.mundial-match-date {
  color: var(--mw-gold);
  font-family: var(--mw-font-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .02em;
}
/* Main row: teams left, score inputs right */
.mw-mc-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* Teams column: two rows, each with flag + name */
.mw-matches-list .mundial-match-teams {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.mw-mc-team {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  min-width: 0;
}
.mw-mc-team > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mw-mc-flag {
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.mw-mc-flag-ph {
  width: 26px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
  background: rgba(255,255,255,.07);
}
/* Score/prediction column: stays right-aligned on all screen sizes */
.mw-matches-list .mundial-match-right {
  flex-shrink: 0;
  align-items: flex-end;
}
@media (max-width: 640px) {
  .mw-matches-list .mundial-match-right {
    align-items: flex-end;
  }
}