/* FREE WAY minimap + events (src/ui/minimap.js, src/ui/events-hud.js):
   the GTA-style minimap that replaces the radar in the city, the approach
   chip, the 3-2-1-GO slam, the live event panel and the medal variants of
   the finish card (.fw-card from freeway.css). Only in a FREE WAY drive
   (body.city). Type roles and tokens from ui.css; no gradient text. */

/* ---------- Minimap ---------- */
#minimap { display: none; position: absolute; left: var(--s4); bottom: calc(var(--s4) + var(--safe-b)); width: 232px; height: 182px; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)); }
body.city #minimap { display: block; transition: opacity 0.4s var(--ease); }
#minimap.cine { opacity: 0; }
body.city #radar { display: none; }
/* Life Is A Highway shows the same minimap while you drive (DESIGN "One game, two modes"); arenas keep the radar. */
body:not(.city) #hud[data-state='drive'] #minimap { display: block; }
body:not(.city) #hud[data-state='drive'] #radar { display: none; }
#hud[data-state='dead'] #minimap, body.city-arena #minimap { display: none; }
body.city.city-arena #radar { display: block; }
@media (max-width: 900px) { #minimap { width: 200px; height: 162px; } }
body.touch #minimap { bottom: auto; top: calc(104px + var(--safe-t)); width: 156px; height: 138px; }
@media (max-width: 600px) {
  #minimap, body.touch #minimap { left: var(--s3); bottom: auto; top: calc(60px + var(--safe-t)); width: 128px; height: 118px; }
}

/* ---------- Events ---------- */
#fwe { position: fixed; inset: 0; pointer-events: none; z-index: 6; display: none; }
body.city #fwe.live { display: block; }
body.city[data-state='paused'] #fwe { visibility: hidden; }

.fwe-kind { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--sans); letter-spacing: 0.2em; color: var(--k, var(--cyan)); }
.fwe-kind svg { width: 18px; height: 14px; flex: none; }

/* Approach chip (and "event over"): top centre, the live panel's slot. */
.fwe-near { position: absolute; left: 50%; top: calc(var(--s4) + var(--safe-t)); translate: -50% 0; display: grid; justify-items: center; gap: 4px; padding: 10px 22px 10px; background: var(--panel); border-radius: var(--r2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k, #29e0ff) 70%, transparent), 0 0 24px color-mix(in srgb, var(--k, #29e0ff) 35%, transparent), var(--lift); opacity: 0; text-align: center; }
.fwe-near b { font: 400 clamp(24px, 2.6vw, 34px)/0.95 var(--display); text-transform: uppercase; color: #fff; letter-spacing: 0.01em; }
.fwe-near em { font: 800 12px/1.2 var(--mono); font-style: normal; color: var(--ink); letter-spacing: 0.06em; }
.fwe-near i { font: 800 12px/1 var(--sans); font-style: normal; letter-spacing: 0.2em; color: var(--k, var(--cyan)); }
.fwe-near.show { animation: fwe-near 3.6s var(--ease) forwards; }
@keyframes fwe-near { 0% { opacity: 0; transform: translateY(-12px); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Countdown slam. */
.fwe-count { position: absolute; left: 50%; top: 36%; translate: -50% -50%; font: 400 clamp(96px, 16vw, 220px)/0.8 var(--display); color: #fff; opacity: 0; transform: skewX(-8deg); text-shadow: 0.05em 0.05em 0 var(--pink), 0 0 50px rgba(255, 61, 139, 0.5); }
.fwe-count.show { animation: fwe-slam 0.58s var(--spring) forwards; }
.fwe-count.go { color: var(--gold); text-shadow: 0.05em 0.05em 0 #29e0ff, 0 0 60px rgba(255, 210, 63, 0.6); animation: fwe-go 0.9s var(--ease) forwards; }
@keyframes fwe-slam { 0% { opacity: 0; transform: skewX(-8deg) scale(2.4); } 30% { opacity: 1; transform: skewX(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: skewX(-8deg) scale(0.9); } }
@keyframes fwe-go { 0% { opacity: 0; transform: skewX(-8deg) scale(2.6); } 25% { opacity: 1; transform: skewX(-8deg) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: skewX(-8deg) scale(1.5); } }

/* Live panel. */
.fwe-live { position: absolute; left: 50%; top: calc(var(--s3) + var(--safe-t)); translate: -50% 0; display: none; min-width: 300px; padding: 10px 18px 8px; background: var(--panel); border-radius: var(--r2); box-shadow: inset 0 3px 0 var(--k, #29e0ff), var(--lift); text-align: center; }
.fwe-live.show { display: grid; gap: 4px; animation: fwe-in 0.4s var(--spring); }
.fwe-top { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.fwe-top b { font: 800 13px/1 var(--sans); letter-spacing: 0.14em; color: #fff; }
.fwe-mid { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.fwe-big { font: 800 40px/1 var(--mono); color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--k, #29e0ff) 50%, transparent); font-variant-numeric: tabular-nums; }
.fwe-big small { font: 800 12px/1 var(--sans); letter-spacing: 0.14em; color: var(--dim); }
.fwe-side { font: 800 13px/1 var(--mono); color: var(--ink-2); letter-spacing: 0.06em; }
.fwe-side em { font-style: normal; margin-left: 6px; padding: 2px 6px; border-radius: var(--r1); }
.fwe-side em.ahead { background: rgba(92, 255, 138, 0.18); color: var(--cash); }
.fwe-side em.behind { background: rgba(255, 64, 88, 0.18); color: var(--red); }
.fwe-ladder { display: flex; justify-content: center; gap: 6px; }
.fwe-m { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; font: 800 11px/1 var(--mono); color: var(--dim); background: rgba(255, 255, 255, 0.04); }
.fwe-m i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.fwe-m[data-m='gold'] i { color: var(--gold); }
.fwe-m[data-m='silver'] i { color: #d6dbe6; }
.fwe-m[data-m='bronze'] i { color: #d98a4e; }
.fwe-m.on { color: #0b0a12; }
.fwe-m.on[data-m='gold'] { background: var(--gold); }
.fwe-m.on[data-m='silver'] { background: #d6dbe6; }
.fwe-m.on[data-m='bronze'] { background: #d98a4e; }
.fwe-m.on i { background: #0b0a12; }
.fwe-foot { font: 700 9.5px/1 var(--sans); letter-spacing: 0.22em; color: var(--dim); margin-top: 2px; }
@keyframes fwe-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } }

/* Finish card: the stunt card (freeway.css) in medal colours. */
.fw-card.fwe-done .fw-k { letter-spacing: 0.02em; }
.fw-card.m-gold .fw-k { color: var(--gold); text-shadow: 0.05em 0.05em 0 #ff3d8b, 0 0 40px rgba(255, 210, 63, 0.55), 0 4px 0 rgba(0, 0, 0, 0.5); }
.fw-card.m-silver .fw-k { color: #e9edf5; text-shadow: 0.05em 0.05em 0 #29e0ff, 0 4px 0 rgba(0, 0, 0, 0.5); }
.fw-card.m-bronze .fw-k { color: #f0a46a; text-shadow: 0.05em 0.05em 0 #6b2f12, 0 4px 0 rgba(0, 0, 0, 0.5); }
.fw-card.m-none .fw-k { font-size: clamp(24px, 3vw, 40px); }
.fw-card.fwe-done .fw-n { color: #fff; }
.fw-card.m-gold .fw-n { color: var(--gold); }
.fw-card .fwe-tally { color: var(--dim); font-size: 12px; }

@media (max-width: 700px) {
  .fwe-live { min-width: 0; width: min(92vw, 340px); top: calc(var(--s2) + var(--safe-t)); padding: 8px 12px 6px; }
  .fwe-big { font-size: 30px; }
  .fwe-foot { display: none; }
  .fwe-near { width: min(92vw, 360px); padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fwe-count.show, .fwe-count.go, .fwe-near.show { animation-duration: 0.01s; }
}

/* ---------- Events polish + Burnout layer (DESIGN "Events polish (built)") ---------- */
/* Clear of the cops/damage meter (spectacle.css .spx-heat) when it's up. */
body.city:has(.spx-heat.on) :is(.fwe-near, .fwe-live) { top: calc(var(--s3) + var(--safe-t) + 60px); }
.fwe-near p { margin: 2px 0 0; max-width: 46ch; font: 700 11px/1.35 var(--sans); letter-spacing: 0.08em; color: var(--ink-2); }
.fwe-kind u { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 4px; }
.fwe-kind u.m-gold { background: var(--gold); } .fwe-kind u.m-silver { background: #d6dbe6; } .fwe-kind u.m-bronze { background: #d98a4e; }
/* First-time rule card: under the live panel. */
.fwe-rule { position: absolute; left: 50%; top: calc(var(--s3) + var(--safe-t) + 150px); translate: -50% 0; display: none; max-width: min(92vw, 560px); padding: 8px 16px; border-radius: var(--r2); background: var(--panel); box-shadow: inset 3px 0 0 var(--k, #29e0ff), var(--lift); font: 700 12px/1.4 var(--sans); letter-spacing: 0.08em; color: var(--ink); text-align: center; }
.fwe-rule b { display: block; font: 800 10px/1 var(--sans); letter-spacing: 0.24em; color: var(--k, #29e0ff); margin-bottom: 4px; }
.fwe-rule.show { display: block; animation: fwe-in 0.4s var(--spring); }
body.city:has(.spx-heat.on) .fwe-rule { top: calc(var(--s3) + var(--safe-t) + 210px); }
/* TAKEDOWN / WRECKED / medal slam across the middle. */
.fwe-slam { position: absolute; left: 50%; top: 40%; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; opacity: 0; pointer-events: none; }
.fwe-slam b { font: 400 clamp(64px, 11vw, 150px)/0.85 var(--display); transform: skewX(-8deg); color: #fff; text-shadow: 0.05em 0.05em 0 var(--k2, #ff4058), 0 0 50px rgba(255, 64, 88, 0.5); }
.fwe-slam i { font: 800 14px/1 var(--sans); font-style: normal; letter-spacing: 0.22em; color: #fff; background: rgba(9, 8, 14, 0.75); padding: 6px 12px; border-radius: var(--r1); }
.fwe-slam.td b { color: #fff; --k2: #ff4058; }
.fwe-slam.wr b { color: #c9c6d4; --k2: #3a3848; text-shadow: 0.05em 0.05em 0 #3a3848; }
.fwe-slam.m-gold b { color: var(--gold); --k2: #ff3d8b; }
.fwe-slam.m-silver b { color: #e9edf5; --k2: #29e0ff; }
.fwe-slam.m-bronze b { color: #f0a46a; --k2: #6b2f12; }
.fwe-slam.m-none b { font-size: clamp(48px, 7vw, 96px); --k2: #29e0ff; }
.fwe-slam.show { animation: fwe-big 1.3s var(--ease) forwards; }
/* TAKEDOWN lands with a crunch: a hard jolt as the word hits (fun pass). */
.fwe-slam.td.show { animation: fwe-big 1.3s var(--ease) forwards, fwe-crunch 0.3s 0.17s linear; }
@keyframes fwe-crunch { 0% { translate: -50% -50%; } 20% { translate: calc(-50% + 10px) calc(-50% - 6px); } 40% { translate: calc(-50% - 8px) calc(-50% + 4px); } 60% { translate: calc(-50% + 5px) calc(-50% + 2px); } 80% { translate: calc(-50% - 2px) -50%; } 100% { translate: -50% -50%; } }
@media (prefers-reduced-motion: reduce) { .fwe-slam.td.show { animation-duration: 0.01s; } }
@keyframes fwe-big { 0% { opacity: 0; transform: scale(2.2); } 14% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
.fwe-side em.chain { background: rgba(180, 92, 255, 0.2); color: #e0c4ff; }
/* Finish card extras: unlocks, RETRY and the next event. */
.fw-card .fwe-unlock { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); }
.fw-card .fwe-unlock i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.fw-card .fwe-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; font: 800 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--ink-2); }
.fw-card .fwe-acts span { padding: 6px 10px; border-radius: var(--r1); background: rgba(255, 255, 255, 0.06); }
.fw-card .fwe-acts span[style] { box-shadow: inset 2px 0 0 var(--k); color: #fff; }
.fw-card .fwe-acts kbd { font: inherit; padding: 1px 5px; border-radius: 3px; background: #f4f1e8; color: #0b0a12; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .fwe-slam.show { animation-duration: 0.01s; opacity: 1; } }
/* Event pointers: a tag over a start on screen, an arrow on the edge when it's off. */
.fwe-ptr { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.fwe-ptr.on { display: block; }
.fwe-ptr span { position: absolute; left: 0; top: 0; translate: -50% -130%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(9, 8, 14, 0.82); box-shadow: inset 0 0 0 1.5px var(--k), 0 0 16px color-mix(in srgb, var(--k) 40%, transparent); white-space: nowrap; color: var(--k); }
.fwe-ptr span svg { width: 16px; height: 13px; }
.fwe-ptr b { font: 800 12px/1 var(--sans); letter-spacing: 0.14em; color: #fff; }
.fwe-ptr em { font: 800 12px/1 var(--mono); font-style: normal; color: var(--ink); }
.fwe-ptr u { width: 8px; height: 8px; border-radius: 50%; }
.fwe-ptr u.m-gold { background: var(--gold); } .fwe-ptr u.m-silver { background: #d6dbe6; } .fwe-ptr u.m-bronze { background: #d98a4e; }
.fwe-ptr .fwe-ptr-a { display: none; }
.fwe-ptr:not(.edge) .fwe-ptr-a { display: block; position: absolute; left: -6px; top: -10px; width: 12px; height: 12px; background: var(--k); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fwe-ptr.edge span { translate: -50% -50%; }
.fwe-ptr.edge .fwe-ptr-a { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; rotate: var(--ang); }
.fwe-ptr.edge .fwe-ptr-a::after { content: ''; position: absolute; left: 0; top: -9px; translate: 34px 0; width: 14px; height: 18px; background: var(--k); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fwe-ptr.far span { opacity: 0.72; scale: 0.9; }
.fwe-ptr.edge.far b { display: none; }
@media (max-width: 700px) { .fwe-ptr b { display: none; } }