.battlefield{background:radial-gradient(circle at 20% 80%,rgba(10,147,150,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(174,32,18,.1) 0%,transparent 50%),linear-gradient(135deg,var(--color-linen)0%,var(--color-champagne-pink)100%);border:.125rem solid var(--color-timberwolf);height:18rem;position:relative;overflow:hidden}@media (min-width:768px){.battlefield{height:25rem}}.battlefield__unit{cursor:pointer;border-radius:.25rem;justify-content:center;align-items:center;transition:all .5s;display:flex;position:absolute;box-shadow:0 2px 8px rgba(0,0,0,.2)}.battlefield__unit--phalanx{border:.125rem solid var(--color-black)}.battlefield__unit--cavalry{border:.125rem solid var(--color-black);border-radius:.5rem}.battlefield__unit--macedonian.battlefield__unit--phalanx,.battlefield__unit--macedonian.battlefield__unit--cavalry{background:linear-gradient(135deg,var(--color-rust),var(--color-auburn));color:var(--color-white)}.battlefield__unit--enemy.battlefield__unit--phalanx{background:linear-gradient(135deg,var(--color-midnight-green),var(--color-dark-cyan));color:var(--color-white)}.battlefield__unit--enemy.battlefield__unit--cavalry{background:linear-gradient(135deg,var(--color-tiffany-blue),var(--color-dark-cyan));color:var(--color-white)}.battlefield__unit--seizure{z-index:10;animation:1.5s infinite alternate seizure-glow;transform:scale(1.1)}@keyframes seizure-glow{0%{box-shadow:0 0 20px var(--color-gamboge),0 0 30px var(--color-gamboge),0 0 40px var(--color-gamboge)}to{box-shadow:0 0 10px var(--color-gamboge),0 0 15px var(--color-gamboge),0 0 20px var(--color-gamboge)}}.battlefield__unit-label{text-align:center;padding:.125rem;font-size:.8rem;line-height:1.1}@media (min-width:768px){.battlefield__unit-label{font-size:1rem}}.battlefield__movement{z-index:5;align-items:center;height:.25rem;display:flex;position:absolute}.battlefield__movement--charge,.battlefield__movement--retreat{background:linear-gradient(90deg,var(--color-alloy-orange),transparent)}.battlefield__movement--advance{background:linear-gradient(90deg,var(--color-black),transparent)}.battlefield__arrow{z-index:10;font-size:1.2rem;animation:2s infinite arrow-move;position:absolute;right:0}.battlefield__arrow--charge,.battlefield__arrow--retreat{color:var(--color-alloy-orange)}.battlefield__arrow--advance{color:var(--color-black)}@keyframes arrow-move{0%,to{transform:translate(0)}50%{transform:translate(.625rem)}}.battlefield__seizure-indicator{background:var(--color-gamboge);color:var(--color-white);z-index:20;border-radius:1.25rem;padding:.375rem .75rem;font-size:1rem;animation:2s infinite seizure-pulse;position:absolute;top:.5rem;left:50%;transform:translate(-50%)}.battlefield__phase-info{background:var(--color-isabelline);padding:1rem}.battlefield__phase-name{color:var(--color-black);margin-bottom:.375rem;font-size:1rem}.battlefield__phase-description{color:var(--color-black);opacity:.7;font-size:1rem;line-height:1.4}@media (min-width:768px){.battlefield__seizure-indicator{padding:.5rem 1rem;top:.625rem}.battlefield__phase-info{padding:1.25rem}.battlefield__phase-name{margin-bottom:.5rem;font-size:1.2rem}.battlefield__phase-description{line-height:1.5}}
.battle-panel{background:var(--color-isabelline);border-radius:.75rem;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1)}.battle-panel__header{background:linear-gradient(135deg,var(--color-timberwolf)0%,var(--color-pale-dogwood)100%);color:var(--color-black);text-align:center;padding:1rem}.battle-panel__title{margin-bottom:.25rem;font-size:1.2rem}@media (min-width:768px){.battle-panel__header{padding:1.25rem}.battle-panel__title{margin-bottom:.3125rem;font-size:1.4rem}}.battle-panel__commanders{color:var(--color-black);margin-bottom:0}.battle-panel__details{flex-direction:column;justify-content:center;align-items:center;display:flex}.battle-panel__details-button{cursor:pointer;background:rgba(237,237,233,.5);border:none;border-radius:.375rem;gap:.25rem;margin-top:.5rem;padding:.375rem .75rem;transition:all .3s;display:flex}.battle-panel__details-button--open{border-radius:.375rem .375rem 0 0}.battle-panel__details-content{opacity:0;text-align:left;background:rgba(237,237,233,.5);border-radius:0 0 .375rem .375rem;max-height:0;padding:0 1rem;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease-in-out,padding .4s cubic-bezier(.4,0,.2,1);overflow:hidden}.battle-panel__details-content--open{opacity:1;max-height:40vh;padding:1rem;overflow-y:auto}.battle-panel__details-content-item{margin-bottom:1rem}.battle-panel__details-content-item-heading{margin-bottom:.5rem;font-size:1.2rem;font-weight:400}.battle-panel__phase-controls{background:var(--color-linen);grid-template-columns:1fr 1fr 1fr 1fr;justify-content:center;gap:.375rem;padding:.75rem;display:grid}.battle-panel__phase-button{background:var(--color-isabelline);border:.125rem solid var(--color-champagne-pink);color:var(--color-black);cursor:pointer;border-radius:.375rem;padding:.375rem .75rem;font-size:1rem;transition:all .3s}@media (min-width:768px){.battle-panel__phase-controls{gap:.5rem;padding:.9375rem}.battle-panel__phase-button{padding:.5rem 1rem}}.battle-panel__phase-button:hover{border-color:var(--color-timberwolf);background:var(--color-champagne-pink)}.battle-panel__phase-button--active{background:var(--color-timberwolf);color:var(--color-black);border-color:var(--color-timberwolf)}.battle-panel__phase-button--seizure{border-color:var(--color-rust)}.battle-panel__phase-button--seizure.battle-panel__phase-button--active{background:var(--color-rust);border-color:var(--color-rust);color:var(--color-white);animation:2s infinite seizure-pulse}@keyframes seizure-pulse{0%,to{box-shadow:0 0 rgba(231,76,60,.7)}50%{box-shadow:0 0 0 10px rgba(231,76,60,0)}}.battle-panel__phase-info{background:var(--color-isabelline);padding:1rem}.battle-panel__phase-name{color:var(--color-black);margin-bottom:.375rem;font-size:1rem}.battle-panel__phase-description{color:var(--color-black);opacity:.7;margin-bottom:0;font-size:1rem;line-height:1.4}@media (min-width:768px){.battle-panel__phase-info{padding:1.25rem}.battle-panel__phase-name{margin-bottom:.5rem;font-size:1.2rem}.battle-panel__phase-description{line-height:1.5}}
.battle-visualization{max-width:100%;min-height:100vh;margin:0 auto;padding:1rem}.battle-visualization__header{text-align:center;margin-bottom:1.5rem}.battle-visualization__title{color:var(--color-black);margin-bottom:.5rem;font-size:1.8rem}.battle-visualization__panels{grid-template-columns:1fr;gap:1.25rem;margin-bottom:1.5rem;display:grid}@media (min-width:768px){.battle-visualization{max-width:75rem;padding:1.25rem}.battle-visualization__header{margin-bottom:1.875rem}.battle-visualization__title{margin-bottom:.625rem;font-size:2.5rem}.battle-visualization__panels{grid-template-columns:1fr 1fr;gap:1.875rem;margin-bottom:1.875rem}}.battle-visualization__legend{background:var(--color-isabelline);border-radius:.75rem;flex-wrap:wrap;justify-content:center;gap:1rem;padding:1rem;display:flex;box-shadow:0 5px 15px rgba(0,0,0,.1)}@media (min-width:768px){.battle-visualization__legend{gap:1.875rem;padding:1.25rem}}.battle-visualization__legend-item{color:var(--color-black);align-items:center;gap:.625rem;display:flex}.battle-visualization__legend-item .battle-panel__unit{width:1.875rem;height:1.25rem;position:static}