.legacy-worldcup{--surface:var(--panel);--surface-2:var(--panel-2);--ink:var(--text);--ink-dim:var(--muted);--gold-soft:var(--gold-2);--red:var(--loss);--green:var(--win);--body:var(--font);--mono:ui-monospace,monospace;}
.legacy-worldcup *{box-sizing:border-box;margin:0;padding:0}
.legacy-worldcup,.legacy-worldcup{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;min-height:100vh}
.legacy-worldcup{
  background:
    radial-gradient(circle at 15% 0%, rgba(232,179,57,.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(220,44,44,.06) 0%, transparent 40%),
    var(--bg);
}
.legacy-worldcup .hero{
  border-bottom:1px solid var(--line);
  padding:48px 24px 32px;
  position:relative;
  overflow:hidden;
}
.legacy-worldcup .hero::before{
  content:"";
  position:absolute;
  top:-50%;left:-10%;
  width:120%;height:200%;
  background:repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 60px,
    rgba(255,255,255,.012) 60px,
    rgba(255,255,255,.012) 61px
  );
  pointer-events:none;
}
.legacy-worldcup .hero-inner{max-width:1280px;margin:0 auto;position:relative}
.legacy-worldcup .kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:8px;
}
.legacy-worldcup .hero h2{
  font-family:var(--display);
  font-size:clamp(48px,8vw,96px);
  line-height:.95;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.legacy-worldcup .hero h2 .accent{color:var(--gold);font-style:italic}
.legacy-worldcup .hero .sub{
  font-size:14px;
  color:var(--ink-dim);
  max-width:600px;
  line-height:1.6;
}
.legacy-worldcup .hero .meta{
  display:flex;
  gap:24px;
  margin-top:24px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  flex-wrap:wrap;
}
.legacy-worldcup .hero .meta span strong{color:var(--ink);margin-left:4px}
.legacy-worldcup .stepper{
  max-width:1280px;
  margin:32px auto 0;
  padding:0 24px;
  display:flex;
  gap:4px;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  flex-wrap:wrap;
}
.legacy-worldcup .step{padding:6px 12px;border:1px solid var(--line);border-radius:2px;background:var(--surface)}
.legacy-worldcup .step.active{background:var(--gold);color:#000;border-color:var(--gold);font-weight:700}
.legacy-worldcup .step.done{background:var(--surface-2);color:var(--gold);border-color:var(--gold)}
.legacy-worldcup .legacy-main{max-width:1280px;margin:0 auto;padding:32px 24px 80px}
.legacy-worldcup .section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin:32px 0 20px;
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}
.legacy-worldcup .section-head h2{
  font-family:var(--display);
  font-size:32px;
  letter-spacing:.02em;
}
.legacy-worldcup .section-head .hint{
  font-size:12px;
  color:var(--ink-dim);
  font-family:var(--mono);
}
.legacy-worldcup .groups{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.legacy-worldcup .group-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .2s;
}
.legacy-worldcup .group-card:hover{border-color:var(--gold)}
.legacy-worldcup .group-head{
  background:var(--surface-2);
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.legacy-worldcup .group-letter{
  font-family:var(--display);
  font-size:28px;
  letter-spacing:.05em;
  line-height:1;
}
.legacy-worldcup .group-letter .grp{color:var(--ink-dim);font-size:11px;font-family:var(--mono);letter-spacing:.2em;margin-right:6px}
.legacy-worldcup .group-status{
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink-dim);
  letter-spacing:.1em;
}
.legacy-worldcup .group-status.complete{color:var(--green)}
.legacy-worldcup .team-row{
  display:flex;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  gap:10px;
  user-select:none;
}
.legacy-worldcup .team-row:last-child{border-bottom:none}
.legacy-worldcup .team-rank{
  font-family:var(--display);
  font-size:20px;
  width:24px;
  text-align:center;
  color:var(--ink-dim);
}
.legacy-worldcup .team-row.rank-1 .team-rank{color:var(--gold)}
.legacy-worldcup .team-row.rank-2 .team-rank{color:var(--gold-soft)}
.legacy-worldcup .team-row.rank-3 .team-rank{color:#7fa1d9}
.legacy-worldcup .team-row.rank-4 .team-rank{color:var(--red)}
.legacy-worldcup .team-flag{font-size:18px;line-height:1;width:26px}
.legacy-worldcup .team-name{
  flex:1;
  font-size:13px;
  font-weight:500;
}
.legacy-worldcup .team-row.rank-1 .team-name{font-weight:700}
.legacy-worldcup .team-row.rank-4 .team-name{color:var(--ink-dim);text-decoration:line-through}
.legacy-worldcup .rank-controls{display:flex;gap:2px}
.legacy-worldcup .rank-btn{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-dim);
  width:24px;height:24px;
  border-radius:2px;
  cursor:pointer;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .15s;
}
.legacy-worldcup .rank-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.legacy-worldcup .rank-btn:disabled{opacity:.3;cursor:not-allowed}
.legacy-worldcup .action-bar{
  margin-top:32px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.legacy-worldcup .btn{
  background:var(--gold);
  color:#000;
  border:none;
  padding:14px 28px;
  font-family:var(--body);
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:2px;
  cursor:pointer;
  transition:all .15s;
}
.legacy-worldcup .btn:hover{background:var(--gold-soft);transform:translateY(-1px)}
.legacy-worldcup .btn:disabled{background:var(--surface-2);color:var(--ink-dim);cursor:not-allowed;transform:none}
.legacy-worldcup .btn-secondary{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.legacy-worldcup .btn-secondary:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.legacy-worldcup .status-text{font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.legacy-worldcup .thirds-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
  margin-top:16px;
}
.legacy-worldcup .third-card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:12px 14px;
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition:all .15s;
}
.legacy-worldcup .third-card:hover{border-color:var(--gold)}
.legacy-worldcup .third-card.selected{
  background:var(--surface-2);
  border-color:var(--gold);
}
.legacy-worldcup .third-card.selected::after{
  content:"✓";
  margin-left:auto;
  color:var(--gold);
  font-weight:700;
}
.legacy-worldcup .third-card .grp-tag{
  font-family:var(--mono);
  font-size:10px;
  background:var(--surface-2);
  padding:2px 6px;
  border-radius:2px;
  letter-spacing:.1em;
}
.legacy-worldcup .third-card.selected .grp-tag{background:var(--gold);color:#000}
.legacy-worldcup .thirds-counter{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-dim);
  margin-top:8px;
}
.legacy-worldcup .thirds-counter strong{color:var(--gold)}
.legacy-worldcup .bracket-wrap{
  overflow-x:auto;
  margin-top:16px;
  padding-bottom:20px;
}
.legacy-worldcup .bracket{
  display:flex;
  gap:24px;
  min-width:1200px;
  align-items:stretch;
}
.legacy-worldcup .round-col{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  gap:12px;
  flex:1;
  min-width:200px;
}
.legacy-worldcup .round-col.r32{min-width:240px}
.legacy-worldcup .round-label{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:.2em;
  color:var(--gold);
  text-align:center;
  padding:6px 0;
  border-bottom:1px solid var(--line);
  margin-bottom:8px;
}
.legacy-worldcup .match-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.legacy-worldcup .match-slot{
  display:flex;
  align-items:center;
  padding:8px 10px;
  gap:8px;
  cursor:pointer;
  font-size:12px;
  transition:background .12s;
  border-bottom:1px solid var(--line);
  min-height:36px;
}
.legacy-worldcup .match-slot:last-child{border-bottom:none}
.legacy-worldcup .match-slot:hover{background:var(--surface-2)}
.legacy-worldcup .match-slot.pending{color:var(--ink-dim);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.legacy-worldcup .match-slot.pending:hover{background:var(--surface)}
.legacy-worldcup .match-slot.winner{background:rgba(232,179,57,.15);border-left:3px solid var(--gold)}
.legacy-worldcup .match-slot.winner .slot-name{color:var(--gold);font-weight:700}
.legacy-worldcup .match-slot.loser{opacity:.45}
.legacy-worldcup .match-slot .slot-flag{font-size:14px;width:20px}
.legacy-worldcup .match-slot .slot-name{flex:1}
.legacy-worldcup .match-id{
  position:absolute;
  top:2px;right:4px;
  font-family:var(--mono);
  font-size:9px;
  color:var(--ink-dim);
  letter-spacing:.1em;
}
.legacy-worldcup .champion-box{
  text-align:center;
  padding:48px 24px;
  background:
    radial-gradient(ellipse at center, rgba(232,179,57,.2) 0%, transparent 70%),
    var(--surface);
  border:1px solid var(--gold);
  border-radius:4px;
  margin-top:24px;
}
.legacy-worldcup .champion-box .trophy{font-size:64px;margin-bottom:12px}
.legacy-worldcup .champion-box .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.3em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:8px;
}
.legacy-worldcup .champion-box .team{
  font-family:var(--display);
  font-size:64px;
  letter-spacing:.02em;
  line-height:1;
  margin-bottom:12px;
}
.legacy-worldcup .champion-box .team .flag{display:inline-block;margin-right:16px;font-size:56px}
.legacy-worldcup .champion-box .runner{
  font-size:14px;
  color:var(--ink-dim);
  font-family:var(--mono);
}
.legacy-worldcup footer{
  border-top:1px solid var(--line);
  padding:32px 24px;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-dim);
  letter-spacing:.1em;
}
.legacy-worldcup footer a{color:var(--gold);text-decoration:none}
@media (max-width:768px){.legacy-worldcup .hero{padding:32px 16px 24px}
.legacy-worldcup .legacy-main{padding:24px 16px 60px}
.legacy-worldcup .groups{grid-template-columns:1fr}
.legacy-worldcup .bracket{min-width:980px}
.legacy-worldcup .stepper{font-size:9px;gap:2px}
.legacy-worldcup .step{padding:4px 8px}

}
.legacy-worldcup .fade-in{animation:fadeIn .4s ease both}
@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}


.legacy-worldcup .legacy-main {width:100%;padding:16px 0;margin:0;}
.legacy-worldcup .hero {padding:24px 16px;}
.legacy-worldcup .hero h2 {font-size:clamp(28px,5vw,46px);}
.legacy-worldcup .stepper {top:64px;z-index:5;}
.legacy-worldcup .bracket-wrap {max-width:100%;}
.legacy-worldcup .btn {font-family:var(--font);}
.legacy-worldcup footer {margin-top:20px;}