@font-face {
  font-family: "Permanent Marker";
  src: url("/assets/permanent-marker.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root { --display-font: "Permanent Marker", "Tw Cen MT", sans-serif; }
header { padding-top: 2.4rem; padding-bottom: .5rem; }
.badge-top { margin-bottom: 1rem; box-shadow: 5px 5px 0 #1e40af; }
.main-title { font-size: clamp(2.6rem, 6.8vw, 5.6rem); line-height: 1.12; }
.main-title .line1, .team-name, .vs-circle, .sponsors-title, .footer-tagline {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: .015em;
}
.main-title .line1 {
  transform: rotate(-2deg);
  text-shadow: 3px 4px 0 #071631, 5px 6px 0 #1553b8;
}
.main-title .line1 + .line1 { color: #fff4c7; text-shadow: 3px 4px 0 #071631, 5px 6px 0 #b52232; }
.main-title .line2 { font-family: var(--font); font-weight: 700; margin-top: 1.2rem; }
.subtitle { margin-top: .5rem; }

.vs-section {
  position: relative;
  max-width: 1080px;
  margin: 1.8rem auto 3rem;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  border: 1px solid #ffffff25;
  background: #020617;
  box-shadow: -20px 0 70px #123eb322, 20px 0 70px #b51c2522;
}
.match-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.vs-container {
  position: absolute;
  inset: auto 0 0;
  padding: 4rem 2rem 1.4rem;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: 1rem;
  background: linear-gradient(transparent, #020617d9 55%, #020617);
  align-items: end;
}
.team-card, .team-card.apoca, .team-card.ataliba {
  border: none;
  border-radius: 0;
  background: none;
  padding: .3rem;
  overflow: visible;
}
.team-card:hover { transform: none; }
.team-card::before { display: none; }
.team-name { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; }
.apoca .team-name { text-shadow: 3px 3px 0 #174bbc, 0 2px 12px #000; transform: rotate(-3deg); }
.ataliba .team-name { text-shadow: 3px 3px 0 #ba202b, 0 2px 12px #000; transform: rotate(2deg); }
.team-name small { display: block; font-family: var(--font); font-size: .75rem; letter-spacing: .22em; line-height: 1.6; color: #ffc7cc; text-shadow: none; }
.team-squad { color: #f1f5f9; font-size: .9rem; margin-top: .6rem; letter-spacing: .06em; }
.vs-circle { width: 56px; height: 56px; margin: 0 auto .5rem; font-size: 1.5rem; animation: none; background: #fbbf24; box-shadow: 3px 3px 0 #fff4c7; transform: rotate(-8deg); }
.sponsors-title { font-size: 2.5rem; transform: rotate(-2deg); }
.footer-tagline { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.35; }

@media (max-width: 1120px) {
  .vs-section { margin-left: 1rem; margin-right: 1rem; }
}
@media (max-width: 640px) {
  header { padding-top: 1.7rem; }
  .main-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .vs-section { margin: 1.5rem .65rem 2rem; border-radius: 16px; }
  .vs-container { position: relative; padding: .5rem .4rem 1.1rem; margin-top: -1px; gap: .2rem; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr); background: #020617; align-items: center; }
  .team-name { font-size: clamp(1.3rem, 5.4vw, 2rem); }
  .team-name small { font-size: .6rem; }
  .team-squad { font-size: .68rem; letter-spacing: 0; }
  .vs-circle { width: 32px; height: 32px; font-size: 1rem; margin: 0 auto; }
}