/* Battle Card announcement page */
.battle-intro { overflow: hidden; border-bottom: 1px solid var(--line2); background: radial-gradient(ellipse at 78% 44%, rgba(217, 180, 95, .13), transparent 48%), radial-gradient(ellipse at 18% 100%, rgba(179, 32, 31, .12), transparent 60%); }
.battle-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; padding-block: 70px 78px; }
.battle-copy { max-width: 610px; }
.battle-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid rgba(217, 180, 95, .38); border-radius: 999px; background: rgba(217, 180, 95, .08); color: var(--gold2); font-size: .76rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 26px; }
.battle-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 10px rgba(243, 217, 139, .6); }
.battle-copy .eyebrow { display: block; letter-spacing: .18em; margin: 0 0 12px; }
.battle-copy h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); color: var(--gold2); margin-bottom: 18px; text-shadow: 0 3px 30px rgba(217, 180, 95, .14); }
.battle-tagline { font: 500 clamp(1.35rem, 2.3vw, 1.9rem)/1.4 var(--display); margin: 0 0 20px; color: #fff0dc; }
.battle-lead { color: #c8bcb5; margin: 0 0 28px; max-width: 550px; }
.battle-play { min-width: 148px; }
.battle-play span { font-size: 1.3rem; line-height: 1; }
.battle-launch-note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; }
.battle-art { position: relative; height: 420px; display: grid; place-items: center; isolation: isolate; }
.battle-orbit { position: absolute; width: 360px; height: 360px; border: 1px solid rgba(217, 180, 95, .13); border-radius: 50%; box-shadow: 0 0 0 28px rgba(217, 180, 95, .025), 0 0 0 70px rgba(217, 180, 95, .015); }
.battle-card-back { position: absolute; width: 228px; height: 324px; border: 1px solid #ba9049; border-radius: 18px; background: linear-gradient(145deg, #382321, #160f12 56%, #26191a); box-shadow: 0 24px 45px rgba(0, 0, 0, .5), inset 0 0 0 6px #1d1415, inset 0 0 0 7px rgba(217, 180, 95, .3); display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--gold2); animation: battle-card-float 7.5s ease-in-out infinite; }
@keyframes battle-card-float { 0%, 100% { translate: 0 6px; } 50% { translate: 0 -10px; } }
.battle-card-back::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(217, 180, 95, .2); border-radius: 9px; pointer-events: none; }
.battle-card-left { transform: translate(-90px, 14px) rotate(-17deg); background: linear-gradient(145deg, #40201c, #1b1010); filter: brightness(.75); z-index: -1; animation-delay: -2.5s; }
.battle-card-right { transform: translate(90px, 14px) rotate(17deg); background: linear-gradient(145deg, #393021, #171313); filter: brightness(.75); z-index: -1; animation-delay: -5s; }
.battle-card-mark { font: 500 7rem var(--display); opacity: .45; }
.battle-card-front { transform: rotate(-3deg); background: radial-gradient(ellipse at 50% 32%, rgba(179, 32, 31, .25), transparent 65%), linear-gradient(145deg, #342520, #160f12 65%, #281b1a); }
.battle-card-label { font: 600 .65rem var(--display); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; }
.battle-emblem { width: 91px; height: 106px; filter: drop-shadow(0 0 16px rgba(217, 180, 95, .2)); }
.battle-card-name { font: 700 1.1rem var(--display); margin-top: 20px; }
.battle-card-rule { width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 14px 0 10px; }
.battle-card-caption { color: #bca787; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.battle-details { padding: 60px 0 80px; background: var(--bg2); }
.battle-section-head { margin-bottom: 26px; }
.battle-section-head .eyebrow { margin: 0 0 10px; letter-spacing: .18em; }
.battle-section-head h2 { margin-bottom: 10px; }
.battle-section-head > p:last-child { margin: 0; color: #b8aaa3; }
.battle-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.battle-step { padding: 28px; border: 1px solid var(--line2); border-radius: var(--radius); background: linear-gradient(150deg, rgba(217, 180, 95, .05), transparent), var(--panel); }
.battle-step-number { display: block; font: 700 .95rem var(--display); color: var(--gold); margin-bottom: 20px; }
.battle-step h3 { font-size: 1.05rem; }
.battle-step p { color: #b8aaa3; font-size: .92rem; margin: 12px 0 0; }
.battle-sources { margin-top: 24px; padding: 32px; border: 1px solid var(--line2); border-radius: var(--radius); background: linear-gradient(135deg, rgba(217, 180, 95, .07), transparent 70%), var(--panel); }
.battle-sources h2 { font-size: 1.5rem; margin-bottom: 24px; }
.battle-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; list-style: none; padding: 0; margin: 0; }
.battle-source-list li > strong { display: block; margin-bottom: 6px; color: var(--gold2); }
.battle-source-list li > span { color: #b8aaa3; font-size: .94rem; }
.battle-source-list b { color: var(--text); }
.battle-card-rules { border-top: 1px solid var(--line2); padding-top: 20px; margin: 26px 0 0; color: #c8bcb5; font-size: .92rem; }
.battle-card-rules strong { color: var(--gold2); }
.battle-preview { margin-top: 54px; }
.battle-preview-soon { display: flex; align-items: center; gap: 20px; padding: 28px; border: 1px dashed var(--line2); border-radius: var(--radius); background: rgba(217, 180, 95, .025); }
.battle-preview-soon span { color: var(--gold); font-size: 2.4rem; line-height: 1; }
.battle-preview-soon p { color: var(--muted); margin: 0; }
.battle-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.battle-preview-image { display: grid; place-items: center; overflow: hidden; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); padding: 12px; }
.battle-preview-image:hover { border-color: var(--gold); }
.battle-preview-image img { display: block; max-height: 520px; object-fit: contain; border-radius: 6px; }
@media (max-width: 1000px) { .battle-hero { gap: 24px; } .battle-art { transform: scale(.82); } .battle-step { padding: 22px; } }
@media (max-width: 860px) {
  .battle-hero { grid-template-columns: 1fr; gap: 12px; padding-block: 40px 24px; }
  .battle-copy { max-width: none; } .battle-lead { max-width: none; }
  .battle-art { height: 360px; transform: scale(.85); }
  .battle-steps, .battle-gallery { grid-template-columns: 1fr; }
  .battle-sources { padding: 24px; }
  .battle-source-list { grid-template-columns: 1fr; gap: 20px; }
  .battle-details { padding-block: 40px 60px; } .battle-step-number { margin-bottom: 12px; }
}
@media (max-width: 400px) { .battle-art { transform: scale(.7); height: 300px; } .battle-preview-soon { padding: 20px; gap: 14px; } }