/* Each square sprite frame shows one existing illustrated environment. */
.compact-arena {
  isolation: isolate;
  background: #0d1726;
}
.scene-post {
  --scenery-image: url('rain-childhood-bg.webp');
  --scenery-position: center;
  --scenery-size: cover;
  --scenery-glow: #d7a860;
}
.scene-stars {
  --scenery-image: url('rain-archive-v57.png');
  --scenery-position: 66.666667% 0%;
  --scenery-size: 400% 400%;
  --scenery-glow: #bfa0ef;
}
.scene-tide {
  --scenery-image: url('moon-harbor-v68.png');
  --scenery-position: 66.666667% 100%;
  --scenery-size: 400% 400%;
  --scenery-glow: #71c8d2;
}
.scene-archive {
  --scenery-image: url('rain-archive-v57.png');
  --scenery-position: 0% 100%;
  --scenery-size: 400% 400%;
  --scenery-glow: #d2b46d;
}
.battle-scenery {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.battle-scenery::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw,100dvh);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  background-image: var(--scenery-image);
  background-position: var(--scenery-position);
  background-size: var(--scenery-size);
  background-repeat: no-repeat;
  opacity: .65;
  filter: saturate(.75);
}
.scene-post .battle-scenery::before {
  width: max(100vw,177.778dvh);
  aspect-ratio: 16 / 9;
}
.battle-scenery::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%,#0d1726b3,transparent 80%),
    linear-gradient(#0b14218c,#0b142133 35%,#0b142133 65%,#0b1421c9);
}
.compact-arena .battle-zone {
  background: radial-gradient(ellipse,#0e182966,#0d18261a 80%);
  border-color: color-mix(in srgb,var(--scenery-glow) 28%,transparent);
  box-shadow: inset 0 0 28px #070e1826;
}
.compact-arena .enemy-row {
  background: #171b2cc4;
  border-color: color-mix(in srgb,var(--scenery-glow) 35%,transparent);
}
.compact-arena .self-row {
  background: #111f2fc4;
  border-color: color-mix(in srgb,var(--scenery-glow) 35%,transparent);
}
.compact-arena .battle-divider {
  color: #ede4ca;
  text-shadow: 0 1px 4px #000,0 0 12px #000;
}
.compact-arena .battle-divider::before,
.compact-arena .battle-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 25%;
  background: linear-gradient(90deg,transparent,var(--scenery-glow));
  opacity: .65;
}
.compact-arena .battle-divider::after { transform: rotate(180deg); }
.compact-arena .empty-field {
  color: #c0ccd2;
  opacity: .65;
  text-shadow: 0 1px 5px #000;
}
.battle-scene-name {
  display: inline-block;
  margin-left: 10px;
  color: var(--scenery-glow);
  font: 10px/1.4 system-ui,sans-serif;
  letter-spacing: .12em;
}
.scene-stars .scenery-lights {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 19%,#f6efff 0 1px,#c6a4ef55 2px,transparent 30px),
    radial-gradient(circle at 88% 23%,#f6efff 0 1px,#c6a4ef55 2px,transparent 24px);
}
@media (max-width: 600px) {
  .battle-scene-name { display: none; }
  .battle-scenery::after {
    background: linear-gradient(#0b14218c,#0b14214d 30%,#0b14214d 70%,#0b1421c9);
  }
  .compact-arena .battle-divider::before,
  .compact-arena .battle-divider::after { max-width: 8%; }
}