/* Elevated bowl-stadium treatment: a sunset skyline, continuous seating bowl and fenced outfield. */
.field {
  height: 590px;
  background: radial-gradient(ellipse at 50% 7%, rgba(255, 182, 110, .42), transparent 21%), linear-gradient(180deg, #dc8866 0%, #617e91 17%, #152638 18%, #07121f 100%);
}
.stadium-sky { inset: 0 0 67% 0; opacity: 1; background: linear-gradient(180deg, #f5a677 0%, #d17c61 42%, #718696 100%); }
.stadium-sky:after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 0; height: 25%; background: linear-gradient(90deg, #162534 0 5%, transparent 5% 9%, #1a2b37 9% 19%, transparent 19% 23%, #1d2f38 23% 36%, transparent 36% 41%, #142634 41% 58%, transparent 58% 64%, #1c2c36 64% 79%, transparent 79% 84%, #142431 84% 96%); opacity: .76; }
.grandstand { top: 13%; width: 66%; height: 54%; border: 4px solid #253949; background: repeating-linear-gradient(6deg, #111c27 0 4px, #c2b294 4px 6px, #46505a 6px 9px), repeating-linear-gradient(90deg, transparent 0 16px, #e4c581 16px 18px); box-shadow: inset 0 -20px 28px #060d15, 0 15px 24px #0009; }
.grandstand:after { content: ''; position: absolute; inset: 12% 0 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(220, 236, 237, .18) 6px 8px), repeating-linear-gradient(0deg, transparent 0 11px, rgba(6, 15, 24, .52) 11px 13px); mix-blend-mode: screen; }
.grandstand-left { left: -29%; transform: rotate(18deg) skewY(1deg); }
.grandstand-right { right: -29%; transform: rotate(-18deg) skewY(-1deg); }
.warning-track { left: 1%; bottom: -5%; width: 98%; height: 101%; background: repeating-linear-gradient(135deg, #713826 0 8px, #8d5035 8px 16px); }
.playing-surface { left: 5%; bottom: -1%; width: 90%; height: 97%; background: repeating-linear-gradient(73deg, #1f704d 0 28px, #286f50 28px 56px); box-shadow: inset 0 0 62px #05251f, 0 -8px 30px #0007; }
.playing-surface:after { content: ''; position: absolute; z-index: 0; left: 1%; right: 1%; bottom: 2%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(5, 15, 23, .6), transparent 66%); }
.outfield-grid { background: repeating-linear-gradient(0deg, transparent 0 44px, rgba(255,255,255,.08) 45px 47px), radial-gradient(ellipse at 50% 94%, transparent 0 14%, rgba(6,48,34,.25) 46%, rgba(3,23,18,.62) 100%); }
.outfield-fence { top: 7%; left: 4%; width: 92%; height: 56%; border-color: #144b3e; box-shadow: 0 -3px 0 #d9c879, 0 13px 23px #000b; }
.infield-diamond { top: 66%; width: 232px; height: 232px; background: linear-gradient(135deg, #9e5a35, #bb7547 50%, #8d4e31); box-shadow: 0 0 0 3px #d9b477, 0 0 0 18px #2a704a; }
.mound { top: 69%; }
.scoreboard { top: 8%; width: 198px; min-height: 72px; border-color: #263b44; background: linear-gradient(#10191f, #030a10); box-shadow: 0 9px 18px #000c, 0 0 0 3px #5b4733; }
.card-avatar[style] { background-image: var(--player-photo); background-position: center; background-repeat: no-repeat; background-size: cover; color: transparent; }
.card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 940px) { .field { height: 500px; } }
@media (max-width: 650px) { .field { height: 420px; } }