/* 14 October 2026 (package combat): the chaser (red) and legendary monsters (gold). js/oct14_combat.js, js/roadgames.js.
   The outlines are !important so they win over the Bloodmoon's thin red outline and the Apocalypse's glowing animation
   (an animated filter would otherwise replace them), while the attack and hurt animations (transforms) still play. */
:root { --chaser: #ff2a1a; --legend: #ffc53a; }

/* On the road: the card */
.pe-chaser .pe-pic { border-color: var(--chaser); box-shadow: 0 0 12px rgba(255,42,26,.65); animation: chaserpulse 1.6s ease-in-out infinite; }
.pe-legend .pe-pic { border-color: var(--legend); box-shadow: 0 0 14px rgba(255,197,58,.7); background: radial-gradient(circle, #3a2a08 0%, #120d0a 70%); }
.pe-chaser .pe-pic .monster { filter: var(--mt, contrast(1)) drop-shadow(1.5px 0 0 var(--chaser)) drop-shadow(-1.5px 0 0 var(--chaser)) drop-shadow(0 1.5px 0 var(--chaser)) drop-shadow(0 -1.5px 0 var(--chaser)) !important; }
.pe-legend .pe-pic .monster { filter: var(--mt, contrast(1)) drop-shadow(1.5px 0 0 var(--legend)) drop-shadow(-1.5px 0 0 var(--legend)) drop-shadow(0 1.5px 0 var(--legend)) drop-shadow(0 -1.5px 0 var(--legend)) drop-shadow(0 0 4px rgba(255,197,58,.8)) !important; }
.pe-chaser .pe-top small { color: #ff8a7a; }
.pe-legend .pe-top small { color: var(--legend); }
@keyframes chaserpulse { 50% { box-shadow: 0 0 20px rgba(255,42,26,.95); } }

/* The Pursuit's own card (something following you): a black shape with a red outline */
.pshadow.chaserpic .monster { filter: brightness(0) drop-shadow(1.5px 0 0 var(--chaser)) drop-shadow(-1.5px 0 0 var(--chaser)) drop-shadow(0 1.5px 0 var(--chaser)) drop-shadow(0 -1.5px 0 var(--chaser)) drop-shadow(0 0 4px rgba(255,40,30,.7)) !important; }
.pe-pursuit .pe-pic { border-color: var(--chaser); box-shadow: 0 0 12px rgba(255,42,26,.5); }

/* In the fight */
.fighter.foe.chaser .monster { filter: var(--mt, contrast(1)) drop-shadow(2.5px 0 0 var(--chaser)) drop-shadow(-2.5px 0 0 var(--chaser)) drop-shadow(0 2.5px 0 var(--chaser)) drop-shadow(0 -2.5px 0 var(--chaser)) drop-shadow(0 0 8px rgba(255,42,26,.8)) !important; }
.fighter.foe.legend .monster { filter: var(--mt, contrast(1)) drop-shadow(2px 0 0 var(--legend)) drop-shadow(-2px 0 0 var(--legend)) drop-shadow(0 2px 0 var(--legend)) drop-shadow(0 -2px 0 var(--legend)) drop-shadow(0 0 10px rgba(255,197,58,.85)) !important; }
.fighter.foe.chaser > b { color: #ff8a7a; }
.fighter.foe.legend > b { color: var(--legend); }
.fighter.foe.chaser::before, .fighter.foe.legend::before { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: bold; white-space: nowrap; pointer-events: none; }
.fighter.foe.chaser::before { content: 'Hunting you'; background: #5a0d08; color: #ffd0c8; border: 1px solid var(--chaser); }
.fighter.foe.legend::before { content: 'Legendary'; background: #4a3505; color: #ffe9a8; border: 1px solid var(--legend); }

/* Collections > Bestiary */
.beast .blegend { color: var(--legend); font-weight: bold; }

/* 14 October fixes (fix2): the big road picture above the card. The chaser is bigger, darker, red-outlined, with a red glow
   at its feet and the scene darkening round it; the hidden pursuer (class stalking: .pursuit is the running card) is a black shape with a red outline (you've only seen its
   eyes); a legendary monster has its gold outline and a little more size. The bob animation (a transform) still plays. */
.foe-in-scene.chaser .scenefoe, .foe-in-scene.stalking .scenefoe { height: 128px; max-width: 200px; }
.foe-in-scene.legend .scenefoe { height: 108px; max-width: 180px; }
.foe-in-scene.chaser, .foe-in-scene.stalking { right: 3%; } /* a little further from the hero, as it is bigger */
.foe-in-scene.chaser .monster { filter: brightness(.62) saturate(.75) contrast(1.25) drop-shadow(2px 0 0 var(--chaser)) drop-shadow(-2px 0 0 var(--chaser)) drop-shadow(0 2px 0 var(--chaser)) drop-shadow(0 -2px 0 var(--chaser)) drop-shadow(0 0 9px rgba(255,42,26,.85)) !important; }
.foe-in-scene.stalking .monster { filter: brightness(0) drop-shadow(2px 0 0 var(--chaser)) drop-shadow(-2px 0 0 var(--chaser)) drop-shadow(0 2px 0 var(--chaser)) drop-shadow(0 -2px 0 var(--chaser)) drop-shadow(0 0 9px rgba(255,42,26,.8)) !important; opacity: .92; }
.foe-in-scene.legend .monster { filter: var(--mt, contrast(1)) drop-shadow(2px 0 0 var(--legend)) drop-shadow(-2px 0 0 var(--legend)) drop-shadow(0 2px 0 var(--legend)) drop-shadow(0 -2px 0 var(--legend)) drop-shadow(0 0 10px rgba(255,197,58,.85)) !important; }
.foe-in-scene.chaser::before, .foe-in-scene.stalking::before, .foe-in-scene.legend::before { content: ''; position: absolute; left: -35%; right: -35%; bottom: -10px; height: 55%; z-index: -1; pointer-events: none; border-radius: 50%; }
.foe-in-scene.chaser::before, .foe-in-scene.stalking::before { background: radial-gradient(ellipse at 50% 100%, rgba(255,30,20,.55), rgba(255,30,20,0) 70%); animation: chaserglow 1.6s ease-in-out infinite; }
.foe-in-scene.legend::before { background: radial-gradient(ellipse at 50% 100%, rgba(255,197,58,.5), rgba(255,197,58,0) 70%); }
.scene:has(.foe-in-scene.chaser)::after, .scene:has(.foe-in-scene.stalking)::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 78% 78%, rgba(90,0,0,.1) 15%, rgba(25,0,0,.55) 100%); }
@keyframes chaserglow { 50% { opacity: .55; } }
/* In the fight it is drawn bigger too, like a boss */
.fighter.foe.chaser .fightimg { width: 180px; max-width: 180px; max-height: 180px; }
@media (prefers-reduced-motion: reduce) { .foe-in-scene.chaser::before, .foe-in-scene.stalking::before { animation: none; } }