/* The two authentic Madden fields rest on dimensional citadel chessboards. */
.battle-section{--battle-gold:#e8c47d;position:relative;isolation:isolate;padding:85px 0 66px;overflow:hidden;background:#041327 url('assets/comparison-ground.webp') center/cover no-repeat;color:#edf6ff;border-block:1px solid #b286484a}
.battle-section:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#03112730,transparent 20%,#020d2044 70%,#020b1b80)}
.battle-heading{text-align:center;max-width:1200px;margin:0 auto 12px;padding:0 24px;text-shadow:0 3px 15px #001020}
.battle-heading .section-title{margin:0 0 18px}.battle-heading .section-title span{color:#00d8ed}
.battle-subtitle{font:700 clamp(21px,2.2vw,32px)/1.3 Academy,'Arial Narrow',Arial,sans-serif;color:#e5ba77;margin:0}
.battle-section .battle-arena{position:relative;width:100%;max-width:1880px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:start;background:linear-gradient(180deg,#03112600,#03112655),url('assets/citadel-atmosphere.webp') center/cover no-repeat}
.battle-panel{--battle-color:#ff5b70;--battle-rgb:255,91,112;position:relative;min-width:0;padding:0 8px 20px;text-align:center}
.battle-panel--wolf{--battle-color:#1ce0ed;--battle-rgb:28,224,237}
.battle-stage{position:relative;isolation:isolate;width:100%;height:clamp(310px,29vw,530px);margin:auto}
.battle-stage:before{content:"";position:absolute;inset:30% 2% 0;background:radial-gradient(ellipse at 50% 70%,rgba(var(--battle-rgb),.12),transparent 68%);z-index:-1;pointer-events:none}
.battle-character{position:absolute;top:auto;bottom:0;width:38%;height:90%;object-fit:contain;object-position:center bottom;z-index:1;filter:drop-shadow(0 12px 18px #000b);pointer-events:none}
.battle-panel--minion .battle-character{left:-7%}.battle-panel--wolf .battle-character{right:-7%;width:42%}
.battle-board{position:absolute;inset:auto 0 0;width:100%;aspect-ratio:1768/720;z-index:2}
.battle-field{display:block;width:100%;height:100%;overflow:visible}
.battle-field-photo{filter:brightness(.75) saturate(.88)}
.battle-cell-floor{fill:#a780291a;stroke:#dfbd7880;stroke-width:1;vector-effect:non-scaling-stroke}
.battle-panel--wolf .battle-cell-floor{fill:#03c9dc24;stroke:#44e4e8b8}
.battle-cell.is-gap .battle-cell-floor{fill:#a90033a8;stroke:#ff7a8c;stroke-width:1.8}
.battle-cell-number{fill:#fff1c8;stroke:#061423;stroke-width:4;paint-order:stroke;font-family:Academy,Arial,sans-serif;font-weight:700;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.battle-cell.is-gap .battle-cell-number{fill:#fff0f3;stroke:#3c0014}
.battle-gap-cross{fill:none;stroke:#ff7186;stroke-width:4;stroke-linecap:round;opacity:.9}
.battle-piece{filter:drop-shadow(0 4px 3px #000b)}
.battle-cell-shadow{fill:#01060d;opacity:.8}.battle-cell-aura{fill:#eac0706b}
.battle-panel--wolf .battle-cell-aura{fill:#26eeffa6}
.battle-grid-edge{fill:none;stroke:#e2c78a;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.9}
.battle-panel--wolf .battle-grid-edge{stroke:#7ef4ff}
.battle-meter{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 18px;text-shadow:0 3px 12px #000}
.battle-meter strong{color:var(--battle-color);font:700 clamp(42px,4.2vw,68px)/1 Academy,Arial,sans-serif}
.battle-meter strong small{font-size:.43em;color:#c5d4e5;font-weight:400}.battle-meter>span{font:700 10px/1.55 Arial,sans-serif;text-align:left;max-width:70px;letter-spacing:1.8px;color:#ccd9e7}
.battle-description{max-width:560px;padding:0 24px;margin:auto;font:400 clamp(16px,1.4vw,20px)/1.55 Arial,sans-serif;color:#f0f4fb;text-shadow:0 2px 10px #001020}
.battle-end{text-align:center;margin:28px auto 0}
@media(max-width:1050px){.battle-stage{height:290px}.battle-character{height:88%;width:40%}.battle-panel--wolf .battle-character{width:44%}.battle-meter strong{font-size:46px}.battle-description{padding-inline:12px;font-size:16px}}
@media(max-width:720px){.battle-section{padding:58px 0 46px}.battle-heading{margin-bottom:0}.battle-section .battle-arena{grid-template-columns:1fr;max-width:640px;gap:24px;background-size:auto 100%}.battle-panel{padding:0 4px 18px}.battle-stage{height:clamp(250px,62vw,380px)}.battle-character{width:38%;height:90%;top:auto;bottom:0}.battle-panel--wolf .battle-character{width:42%}.battle-meter{margin-top:4px;margin-bottom:15px}.battle-meter strong{font-size:51px}.battle-description{padding:0 22px;max-width:510px;font-size:17px}.battle-subtitle{font-size:22px}.battle-panel--wolf:before{content:"";position:absolute;left:15%;right:15%;top:-12px;height:1px;background:linear-gradient(90deg,transparent,#b99a6060,transparent)}}
@media(max-width:400px){.battle-stage{height:238px}.battle-character{height:90%;width:40%}.battle-panel--wolf .battle-character{width:44%}.battle-description{font-size:16px}.battle-heading{padding-inline:16px}.battle-subtitle{font-size:20px}}

/* Beveled boards sit above their grounded underlight; all comparison geometry is static. */
.battle-plinth-facade{filter:brightness(.9) saturate(.96)}
.battle-panel--minion .battle-plinth-facade{filter:brightness(.83) saturate(.85)}
.battle-grid-edge{stroke:#ffe0a0;stroke-width:1.8;opacity:1}
.battle-panel--wolf .battle-grid-edge{stroke:#c7f9ed}
.battle-character{bottom:12px;z-index:1}
.battle-panel--minion .battle-character{left:-10%;width:33%}
.battle-panel--wolf .battle-character{right:-10%;width:37%}
.battle-description p{margin:0}
.battle-description p+p{margin-top:18px}
.battle-copy-alert{color:#ffd4ca}
.battle-copy-key{color:#f2d294;text-decoration:underline;text-decoration-color:#b4874a;text-underline-offset:.21em;text-decoration-thickness:1px}
@media(max-width:720px){.battle-stage{height:clamp(265px,65vw,400px)}.battle-panel--minion .battle-character{left:-8%;width:33%}.battle-panel--wolf .battle-character{right:-8%;width:37%}}
@media(max-width:400px){.battle-stage{height:250px}}