/* Two tracks approach a shared arrival point inside the battle background. */
.battle-timeline { position: absolute; z-index: 18; top: 6px; right: 12px; left: 12px; height: 52px; padding: 0 12px; background: linear-gradient(180deg, rgb(3 9 14 / 62%), transparent); pointer-events: none; }
.battle-timeline-track { position: absolute; height: 2px; }
.timeline-track-ally { top: 44px; right: calc(50% + 4px); left: 26px; background: linear-gradient(90deg, #455964, #82d4ef 72%, #ecd68a); box-shadow: 0 0 5px rgb(101 194 209 / 30%); }
.timeline-track-enemy { top: 44px; right: 26px; left: calc(50% + 4px); background: linear-gradient(90deg, #ecd68a, #ee8e8e 28%, #65454a); box-shadow: 0 0 5px rgb(209 101 101 / 30%); }
.battle-timeline-track::before { position: absolute; top: -2px; width: 6px; height: 6px; border: 1px solid #8196a0; border-radius: 50%; background: #192c36; content: ""; }
.timeline-track-ally::before { left: -3px; }
.timeline-track-enemy::before { right: -3px; }
.battle-timeline-arrival { position: absolute; z-index: 1; top: 40px; left: 50%; width: 10px; height: 10px; border: 1px solid #eed18a; border-radius: 50%; background: #594b27; transform: translateX(-50%); box-shadow: 0 0 6px rgb(231 196 102 / 55%); }
.battle-timeline-actor { --timeline-color: #82d4ef; position: absolute; z-index: 2; bottom: 5px; width: 26px; height: 28px; transform: translateX(-50%); filter: drop-shadow(0 1px 2px #000); }
.battle-timeline-actor.timeline-enemy { --timeline-color: #ee8e8e; }
.battle-timeline-portrait { position: relative; display: grid; width: 26px; height: 28px; place-items: center; border-bottom: 2px solid var(--timeline-color); border-radius: 4px; background: transparent; transform: translateX(var(--timeline-nudge, 0px)); }
.battle-timeline-portrait .actor-image { width: 25px; height: 26px; object-fit: contain; }
.battle-timeline-portrait .enemy-big-warning { position: absolute; z-index: 2; right: -3px; bottom: -2px; width: 14px; height: 14px; margin: 0; }
.battle-timeline-portrait .enemy-big-warning svg { width: 14px; height: 14px; }
.battle-timeline-portrait .enemy-target-corners { inset: -1px; }
.battle-timeline-portrait .enemy-target-corners i { width: 7px; height: 7px; filter: drop-shadow(0 0 2px #f04455); }
.battle-timeline-actor.targeted .enemy-target-corners { opacity: 1; }
.timeline-enemy .actor-image:not(.enemy-native-facing) { transform: scaleX(-1); transform-origin: center bottom; }
.battle-timeline-actor > i { position: absolute; bottom: -7px; left: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--timeline-color); }
.battle-timeline-actor.current { z-index: 5; }
.battle-timeline-actor.current .battle-timeline-portrait { outline: 1px solid #f2d789; background: transparent; }
.battle-shell.timeline-battle .combatants { padding-top: 62px; }
.battle-shell.timeline-battle .battle-technique-banner { top: 70px; }
.battle-shell.timeline-battle .party-line { top: 0; min-height: 220px; }
.battle-shell.timeline-battle .enemy-line { top: 0; min-height: 248px; grid-template-rows: repeat(2, 116px); }
.battle-shell.timeline-battle .party-member .actor-mark { width: 88px; height: 84px; }
.battle-shell.timeline-battle .party-member .actor-mark .actor-image { height: 80px; }
@media (max-width: 680px) {
  body.battle-active .battle-shell.timeline-battle .combatants { flex-basis: clamp(280px, calc(35dvh - 2px), 320px); min-height: 280px; padding-top: 62px; }
  body.battle-active .battle-shell.timeline-battle .party-line { top: 0; min-height: 206px; }
  body.battle-active .battle-shell.timeline-battle .party-line .formation-rear-upper { top: 0; }
  body.battle-active .battle-shell.timeline-battle .party-line .formation-front-center { top: 63px; }
  body.battle-active .battle-shell.timeline-battle .party-member .actor-mark { width: 76px; height: 75px; }
  body.battle-active .battle-shell.timeline-battle .party-member .actor-mark .actor-image { height: 72px; }
  body.battle-active .battle-shell.timeline-battle .enemy-line { top: 0; min-height: 208px; grid-template-rows: repeat(2, 101px); }
  body.battle-active .battle-shell.timeline-battle .enemy-line.single { top: 0; }
  body.battle-active .battle-shell.timeline-battle .enemy .actor-mark { height: 61px; }
  body.battle-active .battle-shell.timeline-battle .enemy .actor-image { height: 59px; }
}
@media (max-height: 720px) and (max-width: 680px) {
  body.battle-active .battle-shell.timeline-battle .combatants { flex-basis: 268px; min-height: 268px; }
  body.battle-active .battle-shell.timeline-battle .party-line { min-height: 190px; }
  body.battle-active .battle-shell.timeline-battle .party-line .formation-front-center { top: 56px; }
  body.battle-active .battle-shell.timeline-battle .party-member .actor-mark { height: 67px; }
  body.battle-active .battle-shell.timeline-battle .party-member .actor-mark .actor-image { height: 64px; }
  body.battle-active .battle-shell.timeline-battle .enemy-line { min-height: 190px; grid-template-rows: repeat(2, 91px); }
  body.battle-active .battle-shell.timeline-battle .enemy .actor-mark { height: 55px; }
  body.battle-active .battle-shell.timeline-battle .enemy .actor-image { height: 53px; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-timeline-actor { will-change: auto; }
}