/*
 * The Arena Breakout: Infinite page. Everything else comes from site.css; this is the ABI accent
 * (the portal's amber for the game) and the tournament card that abi.js fills from the portal.
 */

.abi { --abi: #f2b233; }
.abi-logo { display: block; width: min(300px, 70vw); height: auto; margin: 0 0 22px; filter: drop-shadow(0 6px 24px rgb(0 0 0 / .6)); }
.abi .hero h1 em { color: var(--abi); text-shadow: 0 0 16px #f2b23326, 0 0 60px #f2b2331f; }
.abi .hero::before {
  background:
    radial-gradient(60% 55% at 16% 24%, #f2b23314, transparent 70%),
    radial-gradient(50% 50% at 84% 62%, #7dff5209, transparent 70%);
}

.abi-cup {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center;
  border: 1px solid var(--line); border-top: 3px solid var(--abi); border-radius: var(--radius);
  background: linear-gradient(120deg, #f2b2330d, transparent 55%), var(--surface); padding: 24px;
}
.abi-cup-main { min-width: 0; }
.abi-cup-when {
  display: block; font-family: var(--meta); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--abi);
}
.abi-cup-name { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: var(--step-4); line-height: .95; margin: 8px 0 10px; color: var(--paper); }
.abi-cup-main p { margin: 0; color: #c6d2c8; max-width: 62ch; line-height: 1.6; }
.abi-cup-stats { display: flex; gap: 26px; }
.abi-cup-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--abi); }
.abi-cup-stats span { font-family: var(--meta); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.abi-cup-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
.abi-cup-actions .button-primary { background: var(--abi); border-color: var(--abi); color: #140f04; }
.abi-cup-actions .button-primary:hover { box-shadow: 0 0 44px #f2b23340; border-color: var(--abi); }

@media (max-width: 720px) {
  .abi-cup { grid-template-columns: 1fr; padding: 18px 16px; }
  .abi-cup-actions .button { flex: 1 1 auto; text-align: center; }
}