.cup-type-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cup-type-switch > button {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  color: var(--muted, #8d98a8);
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(12,18,28,.76);
}

.cup-type-switch > button.active {
  color: #eafff2;
  border-color: rgba(151,255,94,.42);
  background: linear-gradient(135deg, rgba(151,255,94,.12), rgba(18,27,41,.88));
  box-shadow: inset 0 0 0 1px rgba(151,255,94,.05);
}

.cup-type-switch span { display: grid; gap: 4px; }
.cup-type-switch strong { font-size: .94rem; }
.cup-type-switch small { color: #7f8a99; }
.cup-selector { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; }
.cup-selector button { white-space: nowrap; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: #111a27; color: #9ba7b7; }
.cup-selector button.active { color: #0b1119; background: #9dff62; border-color: #9dff62; font-weight: 800; }

.cup-hero {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 27px;
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 82% 20%, rgba(151,255,94,.15), transparent 28%),
    linear-gradient(135deg, rgba(18,27,40,.98), rgba(9,15,24,.98));
}
.cup-hero::after { content: ""; position: absolute; right: 9%; top: -80px; width: 180px; height: 180px; border: 1px solid rgba(151,255,94,.12); border-radius: 50%; }
.cup-hero h2 { margin: 5px 0 7px; font-size: clamp(1.55rem, 3vw, 2.4rem); }
.cup-hero p { margin: 0; color: #8e9aaa; }
.cup-hero > * { position: relative; z-index: 1; }
.cup-champion { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid rgba(151,255,94,.3); background: rgba(151,255,94,.1); border-radius: 14px; color: #a8ff70; }
.cup-champion span { display: grid; gap: 3px; }
.cup-champion small { color: #84918e; font-size: .66rem; letter-spacing: .13em; }

.cup-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px; overflow-x: auto; padding: 0 0 10px; align-items: start; }
.cup-round { min-height: 170px; padding: 0; overflow: hidden; }
.cup-round > header { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.07); }
.cup-round > header span { color: #dce5ef; font-weight: 800; }
.cup-round > header small { color: #758194; }
.cup-round > div { display: grid; gap: 1px; background: rgba(255,255,255,.045); }
.cup-fixture { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 8px; min-height: 76px; padding: 10px 13px; background: #101925; }
.cup-fixture.own { box-shadow: inset 3px 0 #9dff62; background: linear-gradient(90deg, rgba(151,255,94,.08), #101925 25%); }
.cup-fixture p { min-width: 0; margin: 0; display: flex; align-items: center; gap: 8px; color: #8e9aaa; }
.cup-fixture p:last-child { flex-direction: row-reverse; text-align: right; }
.cup-fixture strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.cup-fixture p.winner { color: #e8fff0; }
.cup-fixture p.winner strong::after { content: " ✓"; color: #9dff62; }
.cup-fixture > b { white-space: nowrap; color: #fff; font-size: .84rem; }

.international-gate { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 42px 24px; background: radial-gradient(circle at 50% 35%, rgba(115,91,255,.16), transparent 35%), #0e1723; }
.cup-orbit { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 18px; color: #b8aaff; border: 1px solid rgba(167,146,255,.3); border-radius: 50%; box-shadow: 0 0 45px rgba(119,91,255,.16); }
.international-gate > small { color: #9788dc; letter-spacing: .15em; }
.international-gate h2 { margin: 9px 0; font-size: 1.65rem; }
.international-gate p { max-width: 660px; margin: 0; color: #8f9bad; line-height: 1.6; }
.international-gate em { margin-top: 20px; color: #6f7a8a; font-size: .78rem; font-style: normal; }
.gate-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.gate-rules span { padding: 8px 11px; color: #b9c2cf; border-radius: 999px; background: rgba(255,255,255,.055); font-size: .74rem; }
.cup-loading { padding: 28px; color: #8d99a9; }
.cup-leaders { margin-top: 16px; padding: 20px; }
.cup-leaders > header h3 { margin: 5px 0 15px; }
.cup-leaders > div { display: grid; gap: 2px; }
.cup-leaders article { min-height: 58px; display: grid; grid-template-columns: 24px 34px minmax(0,1fr) 60px 60px; align-items: center; gap: 10px; padding: 8px 11px; background: rgba(255,255,255,.025); border-radius: 9px; }
.cup-leaders article > b { color: #718093; }
.cup-leaders article p, .cup-leaders article span { margin: 0; display: grid; gap: 2px; }
.cup-leaders article p strong { font-size: .84rem; }
.cup-leaders article small { color: #758194; font-size: .68rem; }
.cup-leaders article > span { text-align: right; }
.cup-leaders article > span strong { color: #dfffd0; }

@media (max-width: 720px) {
  .cup-type-switch { grid-template-columns: 1fr; }
  .cup-hero { align-items: flex-start; flex-direction: column; }
  .cup-hero button { width: 100%; justify-content: center; }
  .cup-bracket { grid-auto-columns: minmax(260px, 87vw); }
  .cup-leaders article { grid-template-columns: 20px 30px minmax(0,1fr) 46px; }
  .cup-leaders article > span:last-child { display: none; }
}