/* Reverse-type grounds. Stamped Brentt 2026-08-13 from band-lab.
   Field + tile + two breaths. No sheen.
   Load after pbgai.css. Each block needs an empty <div class="pat" aria-hidden="true"></div>. */

.band--green,
.band--brown,
.band--gold{
  position: relative;
  overflow: hidden;
  color: #F5F1E8;
}
.band--green > *:not(.pat),
.band--brown > *:not(.pat),
.band--gold > *:not(.pat){
  position: relative;
  z-index: 1;
}
.band--green .pat,
.band--brown .pat,
.band--gold .pat{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

.band--green{
  background: linear-gradient(143deg, #2a5140 0%, #0f241a 100%);
}
.band--green .pat{
  background-image: url("patterns/webb-dark.png");
  background-size: 500px 500px;
  opacity: 0.40;
  mix-blend-mode: multiply;
}
.band--green::before{
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #9e7e483b;
  filter: blur(46px);
}
.band--green::after{
  content: "";
  position: absolute;
  left: 0;
  top: 88%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #f5f1e80f;
  filter: blur(60px);
}

.band--brown{
  background: linear-gradient(143deg, #322e29 0%, #171512 100%);
}
.band--brown .pat{
  background-image: url("patterns/Brown.png");
  background-size: 508px 508px;
  opacity: 0.10;
  mix-blend-mode: normal;
}
.band--brown::before{
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #9e7e4829;
  filter: blur(46px);
}
.band--brown::after{
  content: "";
  position: absolute;
  left: 0;
  top: 88%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #6e2b2b0f;
  filter: blur(60px);
}

.band--gold{
  background: linear-gradient(143deg, #c28b0a 0%, #b8860b 100%);
}
.band--gold .pat{
  background-image: url("patterns/webb-dark.png");
  background-size: 272px 272px;
  opacity: 0.24;
  mix-blend-mode: multiply;
}
.band--gold::before{
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 64%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #f0b01647;
  filter: blur(46px);
}
.band--gold::after{
  content: "";
  position: absolute;
  left: 0;
  top: 88%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: #f0d4160d;
  filter: blur(60px);
}