/* La Tour — pastilles propres à la Tour (robots balayeurs, empreintes, conduit), panneau
   de sécurité et ballon du Hangar. Les pastilles de base viennent de css/components/spots.css. */

/* robot balayeur : un coup de balai quand on l'aide */
.spot[data-secret="sweep"].found svg { animation: sweep .45s ease-in-out 3; }
@keyframes sweep { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-3px) rotate(-12deg); } 70% { transform: translateX(3px) rotate(12deg); } }

/* empreintes : seule la suivante de la piste est visible */
.spot--paw { color: var(--city); border-color: rgba(156, 200, 234, .5); animation: paw-in .6s var(--ease); }
@keyframes paw-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.5); } }

/* conduit d'aération : toujours là, à peine visible */
.spot--vent { width: 40px; height: 40px; opacity: .55; border-style: dashed; }
.spot--vent svg { width: 24px; height: 24px; }
.spot--vent:hover, .spot--vent:focus-visible, .spot--vent.found { opacity: 1; }

/* ---------- Panneau de sécurité du Hangar ---------- */
.safety {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 10px; background: #1c1a12; border: 1px solid #e8c14a; box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.safety span { max-width: 78px; font-size: .56rem; font-weight: 800; letter-spacing: .12em; line-height: 1.25; text-transform: uppercase; color: #e8c14a; }
.safety b { padding: 2px 6px; background: #000; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 1.15rem; letter-spacing: .12em; color: #ff5a3c; text-shadow: 0 0 8px rgba(255, 90, 60, .7); }
.safety.reset b { animation: safety-blink .35s steps(1) 5; }
@keyframes safety-blink { 50% { opacity: .15; } }

/* ---------- Ballon et filet caché du Hangar ---------- */
.pitch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 20%; pointer-events: none; }
.pitch .net {
  position: absolute; right: 4%; bottom: 14%; width: 9%; height: 78%;
  border: 1px solid rgba(110, 255, 150, 0); background: repeating-linear-gradient(90deg, rgba(110, 255, 150, 0) 0 5px, rgba(110, 255, 150, 0) 5px 6px);
  transition: border-color .5s, box-shadow .5s, background .5s;
}
.pitch.near .net { border-color: rgba(110, 255, 150, .35); }
.pitch.scored .net {
  border-color: rgba(110, 255, 150, .9); box-shadow: 0 0 26px rgba(110, 255, 150, .6), inset 0 0 18px rgba(110, 255, 150, .4);
  background: repeating-linear-gradient(90deg, rgba(110, 255, 150, .16) 0 5px, rgba(110, 255, 150, .5) 5px 6px);
}
.spot--ball { width: 30px; height: 30px; color: #fff; background: rgba(6, 10, 22, .65); transition: left .55s cubic-bezier(.2, .8, .3, 1), color .25s, border-color .25s, background .25s, transform .3s var(--ease); }
.spot--ball svg { width: 20px; height: 20px; transition: transform .55s cubic-bezier(.2, .8, .3, 1); }
.spot--ball[data-kicks="1"] { left: 64%; } .spot--ball[data-kicks="1"] svg { transform: rotate(200deg); }
.spot--ball[data-kicks="2"] { left: 78%; } .spot--ball[data-kicks="2"] svg { transform: rotate(420deg); }
.spot--ball[data-kicks="3"] { left: 91.500%; } .spot--ball[data-kicks="3"] svg { transform: rotate(640deg); }

@media (max-width: 680px) {
  .safety { left: 8px; top: 8px; padding: 4px 6px; }
  .safety b { font-size: .95rem; }
}