/* ==========================================================================
   Drop Bears — game layer
   Joel: official WARDOGS art rather than my invented chrome, the three team
   colours (green / blue / red), and enough imagery that the page stops being
   an unbroken sheet of black.
   ========================================================================== */

:root {
  /* the three WARDOGS factions */
  --t-green: #4FA355;
  --t-blue:  #3E86C9;
  --t-red:   #E05453;   /* lifted from #C8403F for 5.4:1 on the panel */
}

/* ------------------------------------------------- full-bleed photo band -- */

.band {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: #07070A;
}
@media (min-width: 900px) { .band { min-height: 76vh; } }

.band__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.band::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg,
    rgba(7, 7, 10, .96) 0 14%,
    rgba(7, 7, 10, .72) 38%,
    rgba(7, 7, 10, .30) 70%,
    rgba(7, 7, 10, .45) 100%);
}
.band__in { position: relative; z-index: 2; width: 100%; padding-block: var(--s6); }
.band h2 { text-shadow: 0 2px 28px rgba(0, 0, 0, .7); }
.band .lede { color: #E4E0E8; text-shadow: 0 1px 18px rgba(0, 0, 0, .8); }

/* slow push so the stills are not dead on the page */
@keyframes db-push-in { from { transform: scale(1.06); } to { transform: scale(1); } }
.band__img { animation: db-push-in 18s ease-out both; }

.band__credit {
  position: absolute; right: var(--gut); bottom: var(--s2); z-index: 3;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(239, 233, 221, .82);
}

/* ------------------------------------------------------- the three teams -- */

.teams {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.team { background: var(--char); padding: var(--s4) var(--s3); position: relative; }
@media (min-width: 900px) { .team { padding: var(--s5) var(--s4); } }
.team::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.team--g::before { background: var(--t-green); }
.team--b::before { background: var(--t-blue); }
.team--r::before { background: var(--t-red); }

.team__n {
  font-family: var(--display); font-weight: 900; font-stretch: 100%;
  text-transform: uppercase; font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  line-height: 1;
}
.team--g .team__n { color: var(--t-green); }
.team--b .team__n { color: var(--t-blue); }
.team--r .team__n { color: var(--t-red); }
.team__d { font-size: .9375rem; color: var(--soft); margin-top: var(--s2); }

/* three-colour hairline used as a divider */
.tri-rule {
  height: 3px; width: 100%;
  background: linear-gradient(90deg,
    var(--t-green) 0 33.33%, var(--t-blue) 33.33% 66.66%, var(--t-red) 66.66% 100%);
}

/* ------------------------------------------------- the air-assets strike -- */

.nope { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 760px) { .nope { grid-template-columns: 1fr 1fr; } }

.nope__cell { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--char); }
.nope__cell img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.nope__cell::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(224, 84, 83, .9) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top left,  transparent calc(50% - 1px), rgba(224, 84, 83, .9) 50%, transparent calc(50% + 1px));
}
.nope__lbl {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2;
  font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bone);
  background: rgba(11, 11, 16, .82); padding: 6px 10px;
  border-left: 3px solid var(--t-red);
}

/* ------------------------------------------------------- game credit bar -- */

.gamebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  border: 1px solid var(--line); background: var(--char);
  padding: var(--s3);
}
.gamebar img { width: 180px; height: auto; flex: none; border: 1px solid var(--line-soft); }
.gamebar p { margin: 0; font-family: var(--mono); font-size: .75rem; line-height: 1.7; color: var(--mute); max-width: 56ch; }
.gamebar .btn { margin-left: auto; }

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  .band__img { animation: none; }
}