/* S4L map component (map.js). Tokens come from style.css :root; fallbacks keep it usable standalone. */
.s4lmap, .s4m-legend, .s4k, .s4i {
  --s4m-knock: #FF8A3D;  /* knock orange: distinct from the gold accent */
  --s4m-kill: var(--positive, #67D9AC);
  --s4m-elim: var(--danger, #F07878);
  font-variant-numeric: tabular-nums;
}

/* ---- MapView ---- */
.s4lmap {
  position: relative; width: 100%; aspect-ratio: 1; max-height: 78vh; min-height: 280px; overflow: hidden;
  background: #070B10; border: 1px solid var(--line, #2D3B4A); border-radius: var(--radius, 12px);
  user-select: none; -webkit-user-select: none; line-height: normal;
}
.s4lmap:focus-visible { outline: 2px solid var(--accent, #F2B544); outline-offset: 2px; }
.s4lmap-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab;
  touch-action: pan-y;  /* embedded: vertical swipes still scroll the page; fullscreen takes every gesture */
}
.s4lmap.s4m-drag .s4lmap-svg { cursor: grabbing; }
.s4lmap-svg * { vector-effect: non-scaling-stroke; }  /* stroke widths below are screen px */
.s4lmap-bg { fill: #0D1520; }
.s4lmap-tiles { pointer-events: none; }
.s4lmap-grid { fill: none; stroke: #fff; stroke-opacity: .08; stroke-width: 1; pointer-events: none; }
.s4lmap .s4m-s { transform: scale(var(--k, 1)); }  /* --k = map units per screen px, set by map.js */
.s4lmap .s4m-mk[data-k] { cursor: pointer; }
.s4lmap .s4m-mk[data-k]:hover .s4m-s, .s4lmap .s4m-sel .s4m-s { transform: scale(calc(var(--k, 1) * 1.35)); }
.s4lmap-hl { pointer-events: none; }
.s4m-ring-halo { fill: none; stroke: #000; stroke-opacity: .6; stroke-width: 7; }
.s4m-ring { fill: none; stroke: var(--accent, #F2B544); stroke-width: 3; }
@media (prefers-reduced-motion: no-preference) {
  .s4m-ring { animation: s4m-pulse 1.4s ease-in-out infinite; }
}
@keyframes s4m-pulse { 50% { stroke-opacity: .55; } }

.s4lmap-ctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.s4lmap-ctl button {
  min-width: 40px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line, #2D3B4A); border-radius: 10px; background: rgba(20, 28, 38, .92);
  color: var(--text, #F3F6FA); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.s4lmap-ctl button:hover { background: var(--raised, #1C2733); }
.s4lmap-ctl button:focus-visible { outline: 2px solid var(--accent, #F2B544); outline-offset: 2px; }
.s4lmap-ctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s4lmap-ctl [data-a="full"] span { display: none; }
@media (max-width: 720px) {  /* phones: fullscreen is the way to really use the map, so make it obvious */
  .s4lmap-ctl [data-a="full"] { background: var(--accent, #F2B544); color: var(--on-accent, #1A1305); border-color: transparent; }
  .s4lmap-ctl [data-a="full"] span { display: inline; }
}

.s4lmap:fullscreen, .s4lmap.s4lmap--full {
  width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border: 0; border-radius: 0;
}
.s4lmap.s4lmap--full { position: fixed; inset: 0; z-index: 1000; height: 100dvh; }
.s4lmap:fullscreen .s4lmap-svg, .s4lmap--full .s4lmap-svg { touch-action: none; }
html.s4lmap-lock, html.s4lmap-lock body { overflow: hidden; }
.s4m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- markers (screen px; also used in legend icons) ---- */
.s4m-down { fill: var(--s4m-knock); stroke: #000; stroke-width: 1; }
.s4m-knock { fill: #0B1016; stroke: var(--s4m-knock); stroke-width: 2; }
.s4m-kill { fill: var(--s4m-kill); stroke: #000; stroke-width: 1; }
.s4m-elim, .s4m-revive { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.s4m-elim { stroke: var(--s4m-elim); }
.s4m-revive { stroke: var(--s4m-kill); }
.s4m-halo { fill: none; stroke: #000; stroke-opacity: .85; stroke-width: 5; stroke-linecap: round; }
.s4m-fight { fill: #0B1016; stroke: var(--accent, #F2B544); stroke-width: 2; }   /* fight start: square + number */
.s4m-fnum { fill: var(--accent, #F2B544); font: 800 10px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.s4m-hit { fill: transparent; }
.s4m-ol { stroke: #000; stroke-width: 1; }
.s4m-deco { pointer-events: none; }
.s4m-zone { fill: none; stroke: #CBD5E1; stroke-width: 1.2; }
.s4m-zone-last { stroke: #fff; stroke-opacity: .95; stroke-width: 2.2; }
.s4m-path { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-opacity: .9; }
.s4m-gap { stroke-dasharray: 3 5; stroke-opacity: .6; }
.s4m-air { stroke-width: 2; stroke-dasharray: 2 4; stroke-opacity: .95; }  /* jump -> landing */
.s4m-flight { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 8 6; }
.s4m-plane { stroke: #0B1016; stroke-width: 1; }
.s4m-jumps .s4m-note { margin: 6px 0 0; font-size: 12px; }
.s4m-jumps th, .s4m-jumps td.num { white-space: nowrap; }  /* the table scrolls sideways (.tablewrap) instead */
.s4m-ahead { color: var(--positive); }
.s4m-behind { color: var(--danger); }
.s4m-jfig { margin: 14px 0 0; overflow-x: auto; }  /* phones: the chart scrolls sideways, its text stays readable */
.s4m-jfig figcaption { font-size: 13px; color: var(--text2, #B0BDC9); margin-bottom: 4px; }
.s4m-jc { display: block; width: 100%; min-width: 520px; max-width: 680px; height: auto; }
.s4m-jc text { fill: var(--text3, #8796A5); font: 11px system-ui, sans-serif; }
.s4m-jc .s4m-jn { fill: var(--text, #E6EDF3); font-weight: 600; }
.s4m-jg { stroke: var(--line, #24303C); stroke-width: 1; }
.s4m-ja { stroke: var(--text3, #8796A5); stroke-width: 1; }
.s4m-jl { fill: var(--text3, #8796A5); fill-opacity: .5; }
.s4m-jm { stroke: var(--surface, #121A23); stroke-width: 2; }
.s4m-heat rect { fill: var(--accent, #F2B544); }
.s4m-ic { width: 16px; height: 16px; flex: none; overflow: visible; vertical-align: -3px; }

/* ---- match map legend ---- */
.s4m-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--text2, #B0BDC9); }
.s4m-lg { display: inline-flex; align-items: center; gap: 6px; }
.s4m-lg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: none; }
.s4m-lg .s4m-lg-land { border-radius: 50%; background: var(--text2, #B0BDC9); }
.s4m-lg .s4m-lg-final { border-radius: 1px; background: var(--text2, #B0BDC9); }
.s4m-lg .s4m-lg-zone { border-radius: 50%; border: 2px solid #fff; }
.s4m-lg .s4m-lg-flight { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed #fff; opacity: .7; }
.s4m-lg .s4m-lg-air { width: 18px; height: 0; border-radius: 0; border-top: 2px dotted var(--text2, #B0BDC9); }
.s4m-lg .s4m-lg-gap { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--text2, #B0BDC9); }
.s4m-note { color: var(--text3, #8796A5); }

/* ---- "Where do we die?" ---- */
.s4k-intro { color: var(--text2, #B0BDC9); margin: 4px 0 16px; max-width: 72ch; }
.s4k-tabs, .s4k-layers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.s4k-tab, .s4k-chip {
  min-height: 36px; padding: 6px 14px; border: 1px solid var(--line, #2D3B4A); border-radius: 999px;
  background: var(--surface, #141C26); color: var(--text2, #B0BDC9); font: inherit; font-size: 14px; cursor: pointer;
}
.s4k-tab[aria-pressed="true"] { background: var(--accent, #F2B544); color: var(--on-accent, #1A1305); border-color: transparent; font-weight: 700; }
.s4k-tab:focus-visible, .s4k-chip:focus-within, .s4k-row:focus-visible { outline: 2px solid var(--accent, #F2B544); outline-offset: 2px; }
.s4k-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text, #F3F6FA); }
.s4k-chip:has(input:checked) { border-color: var(--accent, #F2B544); background: var(--raised, #1C2733); }
.s4k-chip input { margin: 0; accent-color: var(--accent, #F2B544); }
.s4k-chip small { color: var(--text3, #8796A5); }
.s4k-heatkey {
  display: inline-block; width: 64px; height: 10px; border-radius: 2px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(242, 181, 68, .2), rgba(242, 181, 68, .9));
}
.s4k-heatkey-sm { width: 16px; height: 12px; }
.s4k-status { font-size: 14px; color: var(--text2, #B0BDC9); margin-bottom: 12px; }
.s4k-status p { margin: 0 0 4px; }
.s4k-empty { color: var(--text, #F3F6FA); font-weight: 600; }
.s4k-muted { color: var(--text3, #8796A5); }
.s4k-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .s4k-body { grid-template-columns: minmax(0, 1fr); } }
.s4k-detail {
  background: var(--surface, #141C26); border: 1px solid var(--line, #2D3B4A); border-radius: var(--radius, 12px);
  padding: 16px; font-size: 14px; min-width: 0;
}
.s4k-detail p { margin: 0; }
.s4k-dh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.s4k-detail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 16px 0 0; }
.s4k-detail dt { color: var(--text3, #8796A5); }
.s4k-detail dd { margin: 0; overflow-wrap: anywhere; }
.s4k-detail a { color: var(--accent, #F2B544); }
.s4k-wimg { display: block; margin-bottom: 4px; }
.s4k-wimg img { max-width: 100%; object-fit: contain; }
.s4k-badge {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--danger, #F07878); color: var(--danger, #F07878);
}
.s4k-list { margin-top: 16px; }
.s4k-list summary { cursor: pointer; color: var(--text2, #B0BDC9); padding: 8px 0; }
.s4k-list summary:focus-visible { outline: 2px solid var(--accent, #F2B544); outline-offset: 2px; }
.s4k-tw { overflow-x: auto; }
.s4k-tw table { width: 100%; border-collapse: collapse; font-size: 14px; }
.s4k-tw th, .s4k-tw td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line, #2D3B4A); vertical-align: top; }
.s4k-tw th { color: var(--text3, #8796A5); font-weight: 600; }
.s4k-tw .num { text-align: right; white-space: nowrap; }
.s4k-tw tr[aria-current="true"] { background: var(--raised, #1C2733); }
.s4k-nowrap { white-space: nowrap; }
.s4k-row {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #F2B544); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; text-align: left;
}

/* ---- map intel heat card + secret rooms (SPEC §27) ---- */
.s4m-kde { pointer-events: none; }  /* smooth heat: canvas PNG, browser-upscaled */
.s4i-heatkey, .s4m-lg .s4i-heatkey {
  display: inline-block; width: 72px; height: 10px; border-radius: 2px; vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 232, 90, .3), rgba(255, 160, 30, .55) 35%, rgba(228, 38, 38, .72) 70%, rgba(255, 255, 255, .85));
}
.s4i-heatkey.s4k-heatkey-sm { width: 16px; height: 12px; }  /* chip swatch */
.s4m-drop { fill: #38BDF8; stroke: #000; stroke-width: 1.2; }
.s4m-fin { fill: none; stroke: #fff; stroke-width: 2; }
.s4m-hot { fill: #0B1016; stroke: #fff; stroke-width: 2; }
.s4m-hotn { fill: #fff; font: 800 11px system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.s4m-kline { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 3; }
.s4m-kend { fill: none; stroke: #fff; stroke-width: 2; }
.s4m-ride { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-opacity: .9; }
.s4m-pass { stroke-dasharray: 7 5; }
.s4m-ride-gap { stroke-dasharray: 1.5 5; stroke-opacity: .55; }
.s4m-ride-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.s4m-rideg { cursor: pointer; }
.s4m-rideg:hover .s4m-ride { stroke-width: 3.4; }
.s4m-rideg.s4m-sel .s4m-ride { stroke-width: 4.5; stroke-opacity: 1; }
.s4lmap.s4m-dim .s4m-rideg:not(.s4m-sel) { opacity: .3; }
.s4m-keybg { fill: #0B1016; stroke: var(--accent, #F2B544); stroke-width: 1.5; }
.s4m-keyic { fill: none; stroke: var(--accent, #F2B544); stroke-width: 1.8; stroke-linecap: round; }
.s4m-once { opacity: .5; }
.s4m-once .s4m-keybg { stroke-dasharray: 2 2; }
.s4i-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.s4m-lg .s4i-ln { width: 20px; height: 0; border-radius: 0; border-top: 2.5px solid var(--text2, #B0BDC9); }
.s4m-lg .s4i-ln-pass { border-top-style: dashed; }
.s4m-lg .s4i-ln-gap { border-top: 2px dotted var(--text3, #8796A5); }
.s4i-hotic {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px;
  border: 2px solid #fff; border-radius: 999px; background: #0B1016; color: #fff; font-size: 12px; font-weight: 800; text-decoration: none;
}
.s4i-hots, .s4i-evl { margin: 10px 0 0; padding: 0; list-style: none; }
.s4i-hots li { margin: 0 0 6px; }
.s4i-hots .s4k-row { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.s4i-evl { max-height: 420px; overflow-y: auto; font-size: 13px; }
.s4i-evl li { padding: 6px 0; border-bottom: 1px solid var(--line, #2D3B4A); overflow-wrap: anywhere; }
.s4i-evl a, .s4i a { color: var(--accent, #F2B544); }
.s4i-tag {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line, #2D3B4A); color: var(--text2, #B0BDC9);
}
.s4i-back { display: block; margin-bottom: 10px; font-size: 13px; }

/* ---- care packages (SPEC §33): PUBG red box, the Crate curse as a dashed purple ring, BRDM in steel ---- */
.s4m-crate { fill: var(--crate, #E5484D); stroke: #000; stroke-width: 1.2; }
.s4m-crate-l { fill: none; stroke: #fff; stroke-width: 1.2; stroke-opacity: .85; }
.s4m-crate-far { fill: #0B1016; stroke: var(--crate, #E5484D); stroke-width: 1.5; stroke-opacity: .75; }
.s4m-curse { fill: rgba(11, 16, 22, .55); stroke: var(--curse, #C084FC); stroke-width: 2; stroke-dasharray: 3 2.5; }
.s4m-brdm { fill: #94A3B8; stroke: #000; stroke-width: 1.2; }
.s4m-brdmw { fill: #0B1016; stroke: #94A3B8; stroke-width: 1; }

/* F11: layer checkboxes are 24 px targets with their label */
.s4lmap input[type="checkbox"], .mi-layers input[type="checkbox"] { width: 16px; height: 16px; }

/* drop hotspots tinted by the median team place of the games that landed there */
.s4m-hot.good { fill: #12442F; stroke: #3DDC97; }
.s4m-hot.mid { fill: #4A3712; stroke: #F2B544; }
.s4m-hot.bad { fill: #4A1A1D; stroke: #FF6B6B; }
.s4i-hotic.good { background: #12442F; box-shadow: inset 0 0 0 2px #3DDC97; }
.s4i-hotic.mid { background: #4A3712; box-shadow: inset 0 0 0 2px #F2B544; }
.s4i-hotic.bad { background: #4A1A1D; box-shadow: inset 0 0 0 2px #FF6B6B; }
/* ---- Where do circles end? (renderCircles) ---- */
.s4c-ln { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: 1; }
.s4c-ln.s4c-sel { stroke-opacity: .95; stroke-width: 2; stroke-dasharray: 4 4; }
.s4c-sel-first { stroke: #fff; stroke-opacity: .8; stroke-width: 1.6; stroke-dasharray: 6 5; }
.s4c-pat { margin-top: 20px; }
.s4c-pat h3 { margin: 0 0 12px; }
.s4c-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-bottom: 12px; }
.s4c-figs figure { margin: 0; padding: 12px; border: 1px solid var(--line, #263241); border-radius: 10px; }
.s4c-figs figcaption { font-weight: 650; margin-bottom: 8px; }
.s4c-figs p { font-size: 13px; margin: 8px 0 0; }
.s4c-plot, .s4c-bars { width: 100%; max-width: 300px; height: auto; display: block; }
.s4c-first { fill: none; stroke: var(--text2, #B0BDC9); stroke-width: 1.5; stroke-dasharray: 5 4; }
.s4c-q { fill: none; stroke: var(--text3, #8796A5); stroke-width: 1; stroke-opacity: .7; }
.s4c-axis { stroke: var(--text3, #8796A5); stroke-width: 1; }
.s4c-dot { fill: var(--accent, #F2B544); fill-opacity: .7; }
.s4c-n, .s4c-l, .s4c-v { fill: var(--text3, #8796A5); font: 11px system-ui, sans-serif; text-anchor: middle; }
.s4c-v { fill: var(--text, #E6EDF3); font-weight: 650; }
.s4c-bar { fill: var(--accent, #F2B544); fill-opacity: .85; }
.s4c-rand { fill: none; stroke: var(--text, #E6EDF3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.s4c-tests h4 { margin: 12px 0 6px; font-size: 15px; }
.s4c-tests ul { margin: 0; padding-left: 18px; }
.s4c-tests li { margin: 4px 0; }
.s4c-tests li.s4c-clear b { color: var(--positive, #3DDC97); }
.s4c-how { margin-top: 12px; color: var(--text2, #B0BDC9); font-size: 14px; }
.s4c-how summary { cursor: pointer; color: var(--text, #E6EDF3); font-weight: 600; }
.s4c-modes { margin-bottom: 8px; }
.s4c-odds { fill: var(--accent, #F2B544); stroke: none; }
.s4c-main { fill: none; stroke: #fff; stroke-width: 2.4; }
.s4c-reach { fill: none; stroke: var(--accent, #F2B544); stroke-width: 1.6; stroke-dasharray: 6 5; }
.s4c-pct { fill: #fff; font: 700 12px system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; pointer-events: none; }
.s4c-nh { margin: 0 0 6px; }
.s4c-cks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.s4c-cks .s4k-tab { font-size: 12px; padding: 4px 8px; }
.s4c-oddt { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 10px; }
.s4c-oddt th, .s4c-oddt td { padding: 4px 6px; border-bottom: 1px solid var(--line, #263241); text-align: left; }
.s4c-oddt .num { text-align: right; font-variant-numeric: tabular-nums; }
.s4c-lg-main, .s4c-lg-reach { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
.s4c-lg-main { border: 2px solid #fff; }
.s4c-lg-reach { border: 2px dashed var(--accent, #F2B544); }