/* =====================================================================
   SIGNAL COMBAT 1.0 · THE MAP (js/map.js)
   The SAN world's own CSS (combat.css) draws the scene. This file fits
   the mount to the box it is given and adds the game's reading of it:
   roads lit or still dark, lands asleep until their door opens, the
   next fight's beacon, the first trial's drone, and the Wardens' drones
   (locked: dark, eye out; beaten: eye in the land's own light).
   Every loop here reads the page clock (--t0) like the live world, so a
   re-render never restarts it; a change of progress plays once (--mt).
   ===================================================================== */

/* the mount fills its box (map.js falls back to the screen's height when the box has none) */
.scm.sc.g.fit { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; }
.scm.sc.g.fit.scm-vh { height: 100vh; height: 100svh; }
.scm .g-tip { z-index: 8; }

/* ---------- roads: lit toward the Source and the doors you've opened, dark toward the rest ---------- */
.scm .m-veil { fill: url(#m-gnd); opacity: .8; }
.scm .m-glow { fill: var(--c); opacity: .06; }
.scm .m-glow.m-next { opacity: .1; }
/* the next fight: a comet of its land's light running the road from the crossroads (static and faint without motion) */
.scm .m-flow { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
  .scm .m-flow { opacity: .9; stroke-dasharray: 80 var(--gap); stroke-dashoffset: 80;
    animation: m-flow var(--dur) cubic-bezier(.4, .1, .6, .9) infinite; animation-delay: var(--t0, 0s); }
}
@keyframes m-flow { 0% { stroke-dashoffset: 80; } 70%, 100% { stroke-dashoffset: var(--end); } }
/* 3.0 · THE ROAD: the fissure the Transience left, in this world's own ground (js/map.js fissureHTML). Light from below, worn
   walkways on both banks, camps and lamps, ferries crossing on nothing, the hum running toward the mountain */
.scm .rd-road polygon, .scm .rd-road polyline, .scm .rd-road path { stroke-linejoin: round; }
.scm .rd-haze { fill: #FF8A3D; opacity: .035; }
.scm .rd-haze2 { fill: #FF8A3D; opacity: .05; }
.scm .rd-bank { fill: #24232E; opacity: .95; }
.scm .rd-pave { fill: none; stroke: #45424F; stroke-width: 1.2; stroke-dasharray: 6 3 2 5; opacity: .8; }
.scm .rd-drop { fill: #050407; }
.scm .rd-rim { fill: none; stroke: #3B3542; stroke-width: 1.1; opacity: .9; }
.scm .rd-strata { fill: none; stroke: #16121B; stroke-width: 1.2; opacity: .7; }
.scm .rd-l1 { fill: #3A1A0E; opacity: .85; }
.scm .rd-l2 { fill: #A8501C; opacity: .45; }
.scm .rd-bridge path, .scm .rd-bridge line { fill: none; stroke: #0B0A10; }
.scm .rd-bridge .rd-rail { stroke: #2A2732; }
.scm .rd-l3 { fill: #FFC690; opacity: .75; }
.scm .rd-core { fill: none; stroke: #FFF8F0; stroke-width: 1.1; opacity: .95; stroke-linecap: round; }
.scm .rd-hum { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 990; opacity: 0; }
.scm .rd-ring { fill: none; stroke: #FFD9B0; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.scm .rd-camp polygon, .scm .rd-camp rect { fill: #0A0A11; }
.scm .rd-camp line { stroke: #0A0A11; }
.scm .rd-door { fill: #FFB27F !important; opacity: .6; }
.scm .rd-lamp { fill: #FFC690; }
.scm .rd-pool { fill: #FFB27F; opacity: .08; }
.scm .rd-win { fill: #FFD9A8 !important; opacity: .9; }
.scm .rd-ruin rect, .scm .rd-ruin polygon { fill: #13111A; }
.scm .rd-ferry path, .scm .rd-ferry rect { fill: #0C0A10; }
.scm .rd-under { fill: #FFC690; opacity: .1; }
.scm .rd-woods { pointer-events: auto; cursor: pointer; }
.scm .rd-woods polygon { fill: #06070B; }
.scm .rd-woods:hover polygon { fill: #0E0F16; }
.scm .rd-hit { fill: transparent; }
.scm .rd-net { fill: none; stroke: #77707F; stroke-width: .8; }
.scm .rd-eyes circle { fill: #FF2A2A; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scm .rd-hum { opacity: .8; animation: rd-hum 5.5s linear infinite; }
  .scm .rd-hum.b { animation-duration: 7.5s; animation-delay: -3s; stroke-width: 1.5; }
  .scm .rd-l3, .scm .rd-core { animation: rd-breathe 4.8s ease-in-out infinite; }
  .scm .rd-ring { animation: rd-ring 6.5s ease-out var(--del) infinite; }
  .scm .rd-ferry { animation: rd-ferry var(--dur) ease-in-out var(--del) infinite alternate; }
  .scm .rd-lamp { animation: rd-flicker 3.2s ease-in-out infinite; }
  .scm .rd-eyes.on circle { animation: rd-eyes 7s ease-in-out infinite; }
}
@keyframes rd-hum { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes rd-breathe { 50% { opacity: .55; } }
@keyframes rd-ferry { from { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)); } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes rd-flicker { 50% { opacity: .55; } }
@keyframes rd-ring { 0% { transform: scale(.3); opacity: 0; } 12% { opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes rd-eyes { 0%, 62%, 100% { opacity: 0; } 66%, 74% { opacity: .9; } 70% { opacity: .1; } }
/* a lamp on a road to a locked door is out; a land behind a locked door is asleep (its lights low, its art a step darker) */
.scm .wl-routes .m-off { display: none; }
.scm .lt.m-dim { animation: none !important; opacity: .16 !important; }
.scm .lt-sign.m-dim { opacity: .1 !important; }
.scm .wa.m-asleep { filter: brightness(.6) saturate(.5); }

/* ---------- drones ---------- */
.scm .wd.m-locked .dr img { filter: brightness(.34) saturate(.35) drop-shadow(0 0 1px rgba(190, 205, 235, 0)); }
.scm .wd.m-locked .dr-eye { opacity: 0; animation: none; }
.scm .wd.m-beaten .dr-eye { background: var(--f); box-shadow: 0 0 6px 2px var(--f); animation: none; opacity: .9; }
/* the first trial: a sentinel low over the crossroads, a warm light on the stones; done, it waits up by the Source, dim */
.scm .cone.m-trial { fill: url(#m-cone); }
.scm .cone.m-trial.m-next { animation-duration: 9s; }
.scm .wd-pool.m-trial { background: radial-gradient(closest-side, rgba(255, 238, 220, .34), rgba(255, 226, 200, .1) 62%, transparent); }
.scm .wd-pool.m-trial.m-next { background: radial-gradient(closest-side, rgba(255, 238, 220, .46), rgba(255, 220, 190, .14) 62%, transparent); }
.scm .wd.m-trial .dr-eye { background: var(--f); box-shadow: 0 0 7px 2px rgba(255, 178, 122, .7); }
.scm .wd.m-trial.m-done .dr img { filter: brightness(.66) saturate(.7) drop-shadow(0 0 1px rgba(190, 205, 235, .3)); }
.scm .wd.m-trial.m-done .dr-eye { opacity: .7; animation: none; }

/* ---------- the next fight: a pillar of the land's light behind the Warden, a pulse on the ground ---------- */
.scm .m-beacon { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scm .m-pool { position: absolute; left: -22%; right: -22%; bottom: -7%; height: 26%; border-radius: 50%; opacity: .34;
  background: radial-gradient(closest-side, var(--f), transparent); }
.scm .m-beam { position: absolute; left: 31%; right: 31%; bottom: 12%; height: 240%; opacity: .42; transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--f), transparent 92%); filter: blur(5px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 35%, #000 65%, transparent); }
.scm .m-pulse { position: absolute; left: -4%; right: -4%; bottom: -2%; height: 20%; border-radius: 50%; opacity: .5;
  box-shadow: 0 0 0 1.5px var(--f), 0 0 16px 2px var(--f); transform: scale(.8); }
@media (prefers-reduced-motion: no-preference) {
  .scm .m-beam { animation: m-beam 3.2s ease-in-out infinite; animation-delay: var(--t0, 0s); }
  .scm .m-pulse { animation: m-pulse 3.2s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: var(--t0, 0s); }
}
@keyframes m-beam { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }
@keyframes m-pulse { 0% { opacity: .9; transform: scale(.3); } 75%, 100% { opacity: 0; transform: scale(1.2); } }

/* ---------- your history with a Warden: a small tally under their feet (won – lost) ---------- */
.scm .m-rec { position: absolute; left: 50%; bottom: -12%; z-index: 2; transform: translateX(-50%); display: flex; gap: .28em; align-items: baseline;
  font: 600 10px/1 var(--f-disp, system-ui), system-ui, sans-serif; letter-spacing: .1em; font-style: normal; color: rgba(255, 255, 255, .55);
  text-shadow: 0 1px 6px #000, 0 0 2px #000; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.scm .m-rec b { color: var(--f); font-weight: 700; }
.scm .m-rec i, .scm .m-rec em { font-style: normal; }

/* ---------- a change of progress, played once ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* a road wakes: its veil lifts, its lamps catch one by one from the crossroads out */
  .scm .m-veil.m-t-out { animation: m-out 1.6s ease both; animation-delay: calc(var(--mt, 0s) + .2s); }
  .scm .wl-routes .lt-lamp.m-t-on { animation: m-lamp .9s ease both; animation-delay: calc(var(--mt, 0s) + .5s + var(--li, 0) * .42s); }
  .scm .wl-routes .fx-pool.m-t-on { animation: m-in .9s ease both; animation-delay: calc(var(--mt, 0s) + .55s + var(--li, 0) * .42s); }
  .scm .lt.m-t-wake { animation: m-wake 1.8s ease both; animation-delay: calc(var(--mt, 0s) + .4s); }
  .scm .wa.m-t-wake { animation: m-art 2.2s ease both; animation-delay: calc(var(--mt, 0s) + .3s); }
  /* a Warden wakes behind a door that just opened; the beacon comes up after the road */
  .scm .w-ch.foe.m-t-wake .w-fig .sav { animation: m-bust 1.6s ease both; animation-delay: calc(var(--mt, 0s) + 1.2s); }
  .scm .wd.m-t-wake .dr img { animation: m-drone 1.6s ease both; animation-delay: calc(var(--mt, 0s) + 1s); }
  .scm .cone.m-t-in, .scm .wd-pool.m-t-in { animation: cone 7s cubic-bezier(.6, 0, .4, 1) infinite alternate, m-in 1.4s ease both;
    animation-delay: calc(var(--t0) - var(--o)), calc(var(--mt, 0s) + 1.2s); }
  .scm .wd-pool.m-t-in { animation-name: pool, m-in; }
  .scm .m-beacon.m-t-in { animation: m-in 1.4s ease both; animation-delay: calc(var(--mt, 0s) + 1.7s); }
  /* you walk on; the trial's drone goes back up */
  .scm .w-ch.m-t-move { animation: m-move 1.8s cubic-bezier(.45, .05, .2, 1) both; animation-delay: var(--mt, 0s); }
  .scm .wd.m-t-rise { animation: m-rise 2.2s cubic-bezier(.5, 0, .2, 1) both; animation-delay: var(--mt, 0s); }
}
@keyframes m-out { to { opacity: 0; } }
@keyframes m-in { from { opacity: 0; } }
@keyframes m-lamp { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: .35; } 60% { opacity: .95; } 100% { opacity: .8; } }
@keyframes m-wake { from { opacity: .16; } to { opacity: .85; } }
@keyframes m-art { from { filter: brightness(.6) saturate(.5); } to { filter: brightness(1) saturate(1); } }
@keyframes m-bust { from { filter: brightness(.34) saturate(.15) sepia(0); } }
@keyframes m-drone { from { filter: brightness(.34) saturate(.35) drop-shadow(0 0 1px rgba(190, 205, 235, 0)); }
  to { filter: brightness(.82) saturate(1) drop-shadow(0 0 1px rgba(190, 205, 235, .4)); } }
@keyframes m-move { from { left: var(--x0); top: var(--y0); width: calc(var(--s0) * 10.5%); } }
@keyframes m-rise { from { left: var(--x0); top: var(--y0); width: var(--w0); } }

/* belt and braces: the live rule (.ws * { animation: none }) already stops all of the above */
@media (prefers-reduced-motion: reduce) {
  .scm .m-flow, .scm .m-beam, .scm .m-pulse, .scm .rd-hum, .scm .rf-hum, .scm .rf-glow ellipse, .scm .m-guide, .scm .rd-l3, .scm .rd-core, .scm .rd-ring, .scm .rd-ferry, .scm .rd-lamp, .scm .rd-eyes circle { animation: none !important; }
}

/* 3.1 · THE ROAD as geology. The world's own route network (world.js: asphalt-style roads, the ring of stones, lamp posts) is a
   coded layer, not SAN art: on the Road it gives way to the rift. The art (volcano, lands, drones, Wardens) is untouched */
.scm .m-rift svg.w-routes > g[mask], .scm .m-rift svg.w-routes > g.rt-post,
.scm .m-rift .wl-routes > .lt-lamp, .scm .m-rift .wl-routes > .fx-pool { display: none; }
.scm .rf-apron { fill: #07080D; opacity: .32; filter: blur(3px); }
.scm .rf-apron2 { fill: #050509; opacity: .45; }
.scm .rf-crack polyline { fill: none; stroke: #040407; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.scm .rf-drop { fill: #030305; }
.scm .rf-wall { fill: #15121B; opacity: .95; }
.scm .rf-wall.r { fill: #110F17; }
.scm .rf-ledge { fill: #262130; opacity: .8; }
.scm .rf-strata { fill: none; stroke: #0A090E; stroke-width: 1; opacity: .8; }
/* the Road's light, deep down: a cool shimmer (sound, not lava), never brighter than the eruption */
.scm .rf-l1 { fill: #08121A; opacity: .9; }
.scm .rf-glow ellipse { fill: #CDEFFF; opacity: calc(var(--a) * .24); filter: blur(1.5px); }
.scm .rf-hum { fill: none; stroke: #D9F7FF; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 18 982; opacity: 0; }
.scm .rf-slab .a { fill: #151824; stroke: #050508; stroke-width: 1; }
.scm .rf-slab .b { fill: #10131C; stroke: #050508; stroke-width: 1; }
.scm .rf-slab .c { fill: #1B1A24; stroke: #07070B; stroke-width: .6; }
.scm .rf-rim { fill: none; stroke: #3E4A5A; stroke-width: 1.2; stroke-linejoin: bevel; opacity: .9; }
.scm .rf-rock polygon { fill: #0C0B11; stroke: #2E2836; stroke-width: .5; }
.scm .m-guide { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .scm .rf-hum { opacity: .55; animation: rd-hum 7s linear infinite; }
  .scm .rf-hum.b { animation-duration: 10s; animation-delay: -4s; stroke-width: 1.1; }
  .scm .rf-glow ellipse { animation: rf-shimmer 6s ease-in-out var(--d) infinite; }
  .scm .m-guide { animation: m-guide 1.6s linear infinite; }
}
@keyframes m-guide { to { stroke-dashoffset: -20; } }
@keyframes rf-shimmer { 50% { opacity: calc(var(--a) * .08); } }

/* you, on the map: a marker the size of a place, not a portrait */
.scm .m-pin { position: absolute; width: 3.1%; aspect-ratio: 1; transform: translate(-50%, -150%); z-index: 6; pointer-events: none; }
.scm .m-pin-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0B0B10; box-shadow: 0 0 0 2px var(--f), 0 2px 10px rgba(0,0,0,.7); }
.scm .m-pin-face .sav { position: absolute; left: -45%; top: -6%; width: 190%; height: auto; display: block; }
.scm .m-pin-face .sav img, .scm .m-pin-face .sav-l { width: 100%; height: auto; display: block; }
.scm .m-pin-stem { position: absolute; left: 50%; top: 100%; width: 2px; height: 55%; background: var(--f); transform: translateX(-50%); }
.scm .m-pin-stem::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 10px; height: 4px; border-radius: 50%; background: var(--f); opacity: .5; transform: translateX(-50%); }
.scm .m-pin-glow { position: absolute; left: 50%; top: 155%; width: 260%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--f) 35%, transparent), transparent); }
.scm .m-pin-tag { position: absolute; left: 50%; bottom: 112%; transform: translateX(-50%); font: 700 10px/1 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--f); text-shadow: 0 1px 3px #000; }
@media (max-width: 860px) { .scm .m-pin { width: 3.4%; } }