/* Layered surfaces retain the club palette and the supplied artwork. */
body { background-image: radial-gradient(ellipse at 85% 8%, #039fdf16, transparent 35%); }
.hero { perspective: 1400px; }
.hero h1 em { text-shadow: 1px 1px 0 #bbac00, 2px 2px 0 #827700, 3px 3px 0 #615900, 5px 8px 18px #0005; }
.hero-art {
  position: relative;
  transform: perspective(1100px) rotateX(var(--tilt-x, 3deg)) rotateY(var(--tilt-y, -7deg)) rotateZ(-2deg);
  transform-style: preserve-3d;
  border-color: #5684b270;
  box-shadow: 1px 1px 0 #1474a1, 3px 3px 0 #0c4269, 6px 6px 0 #082442, 18px 25px 55px #0006;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--light-x, 25%) var(--light-y, 20%), #ffffff20, transparent 65%);
  transform: translateZ(1px);
}
.hero-art .art-heading, .hero-art .art-caption { transform: translateZ(22px); background: #030b29; }
.hero-art img { transform: translateZ(10px); }
.depth-active { transition-duration: .12s; }
.match-board {
  overflow: visible;
  isolation: auto;
  transform-style: preserve-3d;
  transform: perspective(1600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .45s ease;
  background: radial-gradient(ellipse at 50% 0, #15497680, transparent 65%), #09163c;
  box-shadow: 0 3px 0 #132947, 0 7px 0 #030b22, 0 22px 45px #0005;
}
.match-board::after { display: none; }
.match-board .match-versus { transform: translateZ(28px); }
.team-monogram { text-shadow: 1px 2px #005687, 2px 4px #002f5a, 0 12px 20px #0005; }
.versus { text-shadow: 1px 2px #857800, 2px 4px #4e4700, 0 10px 20px #0005; }
.location-card { box-shadow: 6px 6px 0 #d8e0e9, 12px 18px 28px #050e3210; }
.squad-wordmark { text-shadow: 1px 2px 0 #026da4, 2px 4px 0 #033d6b, 0 10px 30px #039fdf20; }
.squad-wordmark span { text-shadow: none; }
.button { box-shadow: 0 4px 0 #a39500, 0 10px 25px #0003; }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 #a39500; }
.art-heading, .art-caption { font-size: 12px; }
.hero-bottom > span, .label-tag { font-size: 12px; }
@media (max-width: 700px) {
  .hero-art { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) rotateZ(-1deg); margin-inline: 4px; }
  .match-board { transform: none; }
  .match-board .match-versus { transform: none; }
  .squad-wordmark { font-size: clamp(42px, 12vw, 64px); overflow-wrap: anywhere; }
  .location-card { box-shadow: 4px 4px 0 #d8e0e9; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .match-board, .button { transform: none; transition: none; }
  .hero-art img, .hero-art .art-heading, .hero-art .art-caption, .match-board .match-versus { transform: none; }
}