/* Shared battlefield units and speech, used by puzzles and the homepage. */
/* Units and hexes share the padded grid, so alignment survives resizing and zoom. */
.puzzle-units, .unit-departures { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.map-unit, .unit-departure { position: absolute; width: 16.353%; aspect-ratio: 139 / 56.282; transform: translate(-50%, -50%); container-type: inline-size; transition: left 320ms ease-in-out, top 320ms ease-in-out; }
.map-unit-content { display: block; pointer-events: none; position: absolute; left: 0; top: 0; width: 139px; height: 56.282px; transform: scale(calc(100cqw / 139px)); transform-origin: top left; }
.map-unit.is-selectable .map-unit-content { animation: unit-select-float 900ms ease-in-out infinite alternate; }
.map-unit.is-striking { z-index: 4; }
.map-unit.is-taking-hit { z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .map-unit:is(.is-striking, .is-attack-source) .unit-attack,
  .map-unit:is(.is-taking-hit, .is-attack-defender) .unit-warrior-count { animation: combat-number-float 600ms ease-in-out infinite alternate; }
}
@keyframes combat-number-float {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}
@keyframes unit-select-float {
  from { translate: 0 -3px; }
  to { translate: 0 3px; }
}
.map-unit-content > span { position: absolute; display: block; }
.unit-victory-laurels { left: -21px; top: 23px; width: 168.3693px; height: 46px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .unit-victory-laurels { animation: unit-select-float 1800ms ease-in-out infinite alternate; }
}
.unit-victory-laurels > * { position: absolute; }
.unit-victory-glow { left: 19px; top: 24px; }
.unit-victory-light { left: 54px; top: 33px; width: 59px; height: 7px; background: linear-gradient(180deg, #eec45e00 7.143%, #eec45e 42.273%, #eec45e00 85.706%); }
.unit-victory-leaf { top: 4.7623px; width: 58px; height: 36px; object-fit: cover; }
.unit-victory-leaf--left { left: 2.6851px; transform: rotate(10deg) scaleX(-1); }
.unit-victory-leaf--right { left: 107.6842px; transform: rotate(-10deg); }
.unit-speech, .unit-speech-replay { position: fixed; z-index: 3; width: max-content; max-width: min(250px, calc(100vw - 24px)); box-sizing: border-box; padding: 9px 12px; border: 1px solid #b89a61; border-radius: 12px; background: #efe0bc; color: #30281e; box-shadow: 0 3px 12px #0008; font: 700 13px/17px var(--nunito); text-align: center; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.unit-speech { min-height: 55px; padding-left: 53px; text-align: left; }
.unit-speech::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 46px; height: 45.3333px; background: url(assets/intro/romans-background.webp?v=3) center / contain no-repeat; pointer-events: none; }
.unit-speech[hidden], .unit-speech-replay[hidden] { display: none; }
.unit-speech-replay { width: 32px; height: 14.4px; padding: 0; border-radius: 5px; font-size: 0; line-height: 0; }
.unit-speech-replay::before { content: ''; position: absolute; inset: -32px -6px 0; }
.puzzle-canvas.is-targeting .unit-speech-replay::before { display: none; }
.unit-speech-replay::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: -6px 0 currentColor, 6px 0 currentColor; transform: translate(-50%, -50%); }
.unit-speech-replay:focus-visible, .unit-speech:focus-visible { outline: none; filter: brightness(1.12) drop-shadow(0 0 4px #e4c073aa); }
.unit-speech::after { content: ''; position: absolute; left: var(--speech-tail, 50%); bottom: -6px; width: 10px; height: 10px; border-right: 1px solid #b89a61; border-bottom: 1px solid #b89a61; background: inherit; transform: translateX(-50%) rotate(45deg); }
.unit-speech[data-placement="below"]::after, .map-tooltip[data-placement="below"]::after { top: -6px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
/* Mobile_Puzzle_V6: live Attack, warrior grid and warrior counter. */
.unit-background { left: 20.4929px; top: 14.6526px; width: 104.227px; height: 46.5957px; background: url(assets/units/background.svg) left top / 104.227px 46.5957px no-repeat; }

.map-unit--dacian .unit-background { background-image: url(assets/units/dacian-background.svg?v=2); }

.unit-nameplate { left: 18.6582px; top: 1.9761px; width: 95.3655px; height: 18.6261px; background: url(assets/units/nameplate.webp) left bottom / 95.3655px 18.699px no-repeat; mask: url(assets/units/nameplate-mask.svg) 3.3418px -1.9761px / 82px 21.4462px no-repeat; }
.unit-name { left: 21.3405px; top: 6.1775px; width: 90.6844px; color: #232323; font: 700 8px/normal var(--trajan); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: .2px -.2px #ffa20040, -.2px .2px #0006; }
.map-unit-content > .unit-strength { left: 33.7688px; top: 20.1839px; display: grid; grid-template-rows: repeat(2, 10.7177px); grid-template-columns: repeat(5, 11.4549px); gap: 2.26px 2.4052px; }
.unit-pip { position: relative; box-sizing: border-box; border: 1px solid #3f3f3f; border-radius: 2px; background: #272727; box-shadow: -1px -1px #d2bf87; }
.unit-pip.is-filled::after, .unit-pip.is-leaving::after { content: ''; position: absolute; left: -3.5091px; top: -3.6097px; width: 12.7129px; height: 12.7128px; background: url(assets/units/dacian-strength.svg) left top / 12.7129px 12.7128px no-repeat; pointer-events: none; }
.map-unit--roman .unit-pip::after { left: -3.2582px; top: -3.1412px; width: 12.7128px; height: 12.7128px; background-image: url(assets/units/roman-strength.svg); background-size: 12.7128px 12.7128px; }
.unit-pip.is-entering::after { animation: troop-enter 340ms cubic-bezier(.2,.8,.2,1) var(--pip-delay, 0ms) both; }
.unit-pip.is-leaving::after { animation: troop-leave 300ms ease-in var(--pip-delay, 0ms) both; }
@keyframes troop-enter {
  from { transform: translateY(-14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes troop-leave {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-pip.is-entering::after, .unit-pip.is-leaving::after { animation: none; }
  .unit-pip.is-leaving::after { content: none; }
}
.unit-warrior-ring { left: 102px; top: 14px; width: 37px; height: 36px; background: url(assets/v6/ring.webp) left top / 99.9% 107.86% no-repeat, url(assets/units/warrior-disc.svg) 6px 7px / 25px 24px no-repeat; }
.map-unit-content > .unit-warrior-count { left: 109px; top: 24px; width: 25px; color: #e4c073; font: 600 18px/1 var(--trajan); text-align: center; }
.unit-warrior-icon { left: 124px; top: 37px; width: 12.7129px; height: 12.7128px; background: url(assets/units/dacian-strength.svg) center / contain no-repeat; }
.map-unit--roman .unit-warrior-icon { left: 126px; top: 37px; width: 10.4658px; height: 10.4654px; background-image: url(assets/units/roman-strength.svg); }
.unit-attack-inset { left: 4px; top: 21px; width: 21px; height: 21px; background: url(assets/units/attack-inset.svg) center / contain no-repeat; }
.unit-attack-ring { left: 0; top: 18.0923px; width: 30px; height: 28px; background: url(assets/units/plate.webp) center / cover no-repeat; }
.unit-sword { left: 10.3085px; top: 31.7265px; width: 26.64px; height: 11.959px; transform: rotate(-61.6deg) skewX(.03deg); background: url(assets/units/sword.webp) center / cover no-repeat; }
.map-unit-content > .unit-attack { left: 8.3228px; top: 25.2803px; width: 10.1898px; height: 17.5942px; display: flex; align-items: center; justify-content: center; color: #e4c073; font: 700 20px/normal var(--trajan); text-align: center; text-shadow: none; }
.map-unit-content > .unit-attack.is-boosted { color: #fff0bf; text-shadow: 0 0 3px #e4c07380; }


.unit-speech[data-faction="dacian"]::before { background-image: url(assets/intro/dacians-background.webp?v=3); }