/* Release 320: "Final moments" pictures on the 20-game analysis page (static/js/analysis_shots.js). */
.shots-card{padding:20px 24px}
.shots-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.shots-head h3{margin:0;font-size:15px;font-weight:650;letter-spacing:-.01em}
.shots-head p{margin:4px 0 0;color:var(--muted);max-width:62ch}
.shots-actions{display:flex;align-items:center;gap:12px;color:var(--muted)}
.shots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.shot{position:relative;display:block;padding:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--subtle);aspect-ratio:240/150;cursor:pointer;min-width:0}
.shot canvas{display:block;width:100%;height:100%}
.shot .shot-save{position:absolute;right:6px;bottom:6px;font:600 11px/1 inherit;color:#fff;background:rgba(24,24,27,.72);border-radius:5px;padding:4px 7px;opacity:0;transition:opacity .15s}
.shot:hover .shot-save,.shot:focus-visible .shot-save{opacity:1}
.shot.is-new{animation:shot-in .45s cubic-bezier(.2,.8,.2,1)}
.shot.is-pending,.shot.is-missing{display:grid;place-items:center;cursor:default;color:var(--muted);font-size:12px;text-align:center}
.shot.is-pending{background:linear-gradient(110deg,#f4f4f5 30%,#e9e9ff 50%,#f4f4f5 70%);background-size:220% 100%;animation:shot-wait 1.4s linear infinite}
.shots-legend{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0 0;color:var(--muted);font-size:12px}
.shots-legend span{display:inline-flex;align-items:center;gap:6px}
.shots-legend .dot{width:10px;height:10px;border-radius:50%;display:inline-block;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--border)}
.shots-legend .dot.home{background:#3030ff}.shots-legend .dot.away{background:#f97316}.shots-legend .dot.ball{background:#fff;box-shadow:0 0 0 1px #18181b}
@keyframes shot-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes shot-wait{to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.shot.is-new,.shot.is-pending{animation:none}}
.shots-none{grid-column:1/-1;margin:0;padding:14px 16px;border:1px dashed var(--border);border-radius:8px;color:var(--muted);background:var(--subtle)}