/* ═══════════════════════════════════════════════════════════════════════════
   ZONFLYTT EFTER RÄD – banner på /zon, kartanimation (Leaflet-lager) och chip i räd-UI:t.
   Färger: /zon-sidans mörkblå (#0d1117 / #1976d2 / #42a5f5) + rädens guld/röd (#e8c15a / #ff5c7a).
   Bara CSS/SVG. prefers-reduced-motion stänger av all rörelse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Banner på /zon ── */
.zr-banner {
  --zr-red: #ff5c7a; --zr-gold: #e8c15a; --zr-blue: #42a5f5; --zr-txt: #e8f5e9; --zr-dim: #90a4ae;
  position: relative; display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; align-items: center;
  margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; overflow: hidden; color: var(--zr-txt);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 92, 122, .16) 0%, transparent 55%),
    linear-gradient(135deg, #1a0d14 0%, #0d1117 55%, #0a1628 100%);
  border: 1px solid rgba(255, 92, 122, .35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: zr-slide .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.zr-banner::before {           /* tunn rörlig glans längs överkanten */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--zr-red), var(--zr-gold), var(--zr-blue), transparent);
  background-size: 200% 100%; animation: zr-sheen 3.5s linear infinite;
}
.zr-banner.read { border-color: rgba(66, 165, 245, .25); }
.zr-art { width: 132px; height: 72px; display: block; }
.zr-art .route { fill: none; stroke: var(--zr-gold); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 7; animation: zr-flow 1.1s linear infinite; }
.zr-art .route-glow { fill: none; stroke: var(--zr-gold); stroke-width: 7; opacity: .14; }
.zr-art .old circle { fill: rgba(255, 92, 122, .12); stroke: var(--zr-red); stroke-dasharray: 3 3; }
.zr-art .old path { stroke: var(--zr-red); stroke-width: 2.4; stroke-linecap: round; }
.zr-art .new circle.ring { fill: none; stroke: var(--zr-blue); stroke-width: 2; transform-origin: 112px 22px; animation: zr-ripple 2s ease-out infinite; }
.zr-art .new circle.dot { fill: #1976d2; stroke: #fff; stroke-width: 2; }
.zr-art .runner { fill: var(--zr-gold); filter: drop-shadow(0 0 4px var(--zr-gold)); }
.zr-kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--zr-red); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.zr-kicker .live { width: 7px; height: 7px; border-radius: 50%; background: var(--zr-red); box-shadow: 0 0 0 0 rgba(255, 92, 122, .6); animation: zr-blip 1.6s infinite; }
.zr-banner.read .zr-kicker { color: var(--zr-dim); }
.zr-banner.read .zr-kicker .live { background: var(--zr-dim); animation: none; }
.zr-title { font-size: 18px; font-weight: 900; line-height: 1.25; margin: 2px 0 4px; }
.zr-title b { color: var(--zr-gold); }
.zr-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--zr-dim); }
.zr-meta span { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.zr-meta span.dist { color: var(--zr-gold); border-color: rgba(232, 193, 90, .35); }
.zr-actions { display: flex; flex-direction: column; gap: 8px; }
.zr-btn { appearance: none; border: 0; cursor: pointer; border-radius: 10px; padding: 9px 14px; font-weight: 800; font-size: 13px; white-space: nowrap; transition: transform .12s, filter .12s; }
.zr-btn:hover { filter: brightness(1.1); } .zr-btn:active { transform: translateY(1px); }
.zr-btn.gold { background: linear-gradient(180deg, #ffdf8a, var(--zr-gold) 60%, #9c7a2a); color: #2a1f08; box-shadow: 0 3px 0 #6b5018; }
.zr-btn.ghost { background: transparent; color: var(--zr-dim); border: 1px solid rgba(255, 255, 255, .14); }
.zr-btn:focus-visible { outline: 2px solid var(--zr-blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .zr-banner { grid-template-columns: 92px 1fr; gap: 10px 12px; padding: 12px; }
  .zr-art { width: 92px; height: 52px; }
  .zr-title { font-size: 16px; }
  .zr-meta span { white-space: normal; max-width: 100%; }
  .zr-actions { grid-column: 1 / -1; flex-direction: row; }
  .zr-actions .zr-btn { flex: 1; }
}

/* ── Leaflet-lager under animationen ── */
.zr-icon { background: none !important; border: 0 !important; }
.zr-burst { font-size: 40px; line-height: 44px; text-align: center; filter: drop-shadow(0 0 10px rgba(255, 92, 122, .8)); animation: zr-burst .7s cubic-bezier(.2, 1.6, .4, 1) both, zr-fadeout 1s 5s forwards; }
.zr-ring { width: 120px; height: 120px; border-radius: 50%; position: relative; }
.zr-ring::before, .zr-ring::after, .zr-ring { box-sizing: border-box; }
.zr-ring::before, .zr-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #42a5f5; animation: zr-ring 1.8s ease-out 3; opacity: 0; }
.zr-ring::after { animation-delay: .6s; border-color: #e8c15a; }
path.zr-path { animation: zr-flow 1.1s linear infinite; filter: drop-shadow(0 0 3px rgba(232, 193, 90, .8)); }
path.zr-glow { animation: zr-fadein .6s both; }
path.zr-ghost { transition: opacity 1.6s ease, stroke-opacity 1.6s ease, fill-opacity 1.6s ease; }
path.zr-ghost.zr-fade { opacity: .35; }
.zr-tag { position: absolute; transform: translateX(-50%); white-space: nowrap; font: 800 11px/1 Roboto, sans-serif; padding: 4px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); animation: zr-fadein .5s .3s both; }
.zr-tag.old { background: rgba(74, 15, 13, .92); color: #ffb3bf; border: 1px solid #ff5c7a; }
.zr-tag.new { background: rgba(10, 22, 40, .94); color: #bbdefb; border: 1px solid #42a5f5; }
.zr-pop { animation: zr-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }

/* ── Chip i räd-UI:t (anfallare + försvarare) ── */
.zr-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: var(--rd-blue, #5ab0e8); background: rgba(90, 176, 232, .10); border: 1px solid rgba(90, 176, 232, .45); text-decoration: none; }
.zr-chip.big { font-size: .9rem; padding: 6px 12px 6px 8px; }
.zr-chip svg { width: 34px; height: 14px; flex: none; }
.zr-chip svg .route { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 5; animation: zr-flow 1.1s linear infinite; }
.zr-chip svg .a { fill: #ff5c7a; } .zr-chip svg .b { fill: currentColor; }
a.zr-chip:hover { background: rgba(90, 176, 232, .18); }

@keyframes zr-slide { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes zr-sheen { to { background-position: -200% 0; } }
@keyframes zr-flow { to { stroke-dashoffset: -16; } }
@keyframes zr-ripple { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes zr-blip { 70% { box-shadow: 0 0 0 7px rgba(255, 92, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 92, 122, 0); } }
@keyframes zr-burst { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes zr-ring { 0% { transform: scale(.25); opacity: .95; } 100% { transform: scale(1); opacity: 0; } }
@keyframes zr-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes zr-fadeout { to { opacity: 0; } }
@keyframes zr-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .zr-banner, .zr-banner::before, .zr-art *, .zr-kicker .live, .zr-burst, .zr-ring::before, .zr-ring::after,
  path.zr-path, .zr-tag, .zr-pop, .zr-chip svg .route { animation: none !important; transition: none !important; }
  .zr-ring::before { opacity: .8; transform: scale(.6); }
}