/* The damage diagram in #dmgDiagram (task E2, src/ui/dmgdiagram.js): the aeroplane from above, bottom left
   beside the POWER lever, each part green -> yellow -> red by how hurt it is. styles.css only places the box;
   everything about how it LOOKS is here. It lets every touch through (pointer-events:none comes with the box). */
#dmgDiagram{box-sizing:border-box;padding:5px;border-radius:16px;background:var(--panel);border:1px solid var(--edge);
  opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s linear 0s}
/* Put away: every part has been perfect for ten seconds (or nobody is flying). Faded, then really gone. */
#dmgDiagram.off{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
#dmgDiagram canvas{display:block;width:100%;height:100%}
/* A hit: the box jumps and its edge flares. Two names for one animation - the script swaps them, because an
   animation only starts over when its NAME changes (and this way nothing has to force a layout to restart it). */
#dmgDiagram.hitA{animation:dmgHitA .55s ease-out}
#dmgDiagram.hitB{animation:dmgHitB .55s ease-out}
@keyframes dmgHitA{0%{transform:scale(1.22);border-color:#fff;box-shadow:0 0 18px rgba(255,91,61,.9)}
  100%{transform:scale(1);border-color:var(--edge);box-shadow:0 0 0 rgba(255,91,61,0)}}
@keyframes dmgHitB{0%{transform:scale(1.22);border-color:#fff;box-shadow:0 0 18px rgba(255,91,61,.9)}
  100%{transform:scale(1);border-color:var(--edge);box-shadow:0 0 0 rgba(255,91,61,0)}}
@media (prefers-reduced-motion:reduce){
  #dmgDiagram,#dmgDiagram.off{transition:none}
  #dmgDiagram.hitA,#dmgDiagram.hitB{animation-duration:.01s}
}