/* The live map (templates/_map.html, static/live.js). Colours come from the palette in style.css.
   Three stacked layers in one frame: the world (viewBox 0 0 1000 500, windowed by live.js to the
   frame's shape), the night side (same viewBox) and the heroes (CSS pixels, so dots, droplets and text
   keep their size on a phone). The frame is 2:1 on a phone and fills the screen under the nav above
   600 px (.screen, base.html's shell block). */
.livemap {
  --land: #15151c; --coast: var(--accent-2); --night: #020207;
  --dot: 10px;
  margin: 0 0 .2rem;
}
.mapframe { position: relative; width: 100%; aspect-ratio: 2 / 1; max-width: 100%; }

/* The map page: header + map + totals are exactly one screen; your line and the rest scroll below. */
.screen .livemap { margin: 0; }
.screen .livetotals, .screen .protonote { box-sizing: border-box; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
.screen .protonote { margin-top: .5rem; margin-bottom: .5rem; }
@media (min-width: 601px) {
  .screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 420px; }
  .screen .livemap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .screen .mapframe { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
  .screen .livetotals { margin-top: .35rem; margin-bottom: .35rem; width: 100%; }
}
.mapframe > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapframe .heroes { overflow: visible; pointer-events: none; }
.heroes .hero, .heroes .labels a { pointer-events: auto; }

/* Friends: countries glow by their heroes' last 10 minutes (--glow 0..1, set by live.js): from a hair above
   the page towards the accent, the coastline brightening with it. Quiet countries stay dark outlines.
   Global: a country with 3 or more counted players is .counted, one fixed light, never by activity. */
.mapframe { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mapframe.zoomed { touch-action: none; cursor: grab; }
.world .land { --glow: 0;
  fill: color-mix(in srgb, var(--accent) calc(var(--glow) * 38%), var(--land));
  stroke: var(--coast); stroke-opacity: calc(.32 + var(--glow) * .5); stroke-width: .6px;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; outline: none;
  transition: fill 1.2s ease, stroke-opacity 1.2s ease; }
.world .land.lit { stroke: color-mix(in srgb, var(--accent) 60%, var(--coast)); }
.world .land.counted { fill: color-mix(in srgb, var(--accent) 30%, var(--land));
  stroke: color-mix(in srgb, var(--accent) 60%, var(--coast)); stroke-opacity: .8; }
.world .land:focus-visible { stroke: var(--gold); stroke-opacity: 1; stroke-width: 1.6px; }
.world .flashes { pointer-events: none; }
.world .flash { fill: color-mix(in srgb, var(--accent) 55%, #fff); opacity: 0; }
.night { pointer-events: none; }
.night .dark { fill: var(--night); }
.night .twilight { fill-opacity: .28; }
.night .core { fill-opacity: .36; }
.night .lat { stroke: var(--accent-2); stroke-opacity: .09; stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.night .tropic { stroke-dasharray: 2 5; }

.heroes .sundot { fill: var(--gold); }
.heroes .sun { pointer-events: none; }

/* A hero: glow behind, avatar, a ring. Quiet heroes sit at 40% and never leave. */
.hero { cursor: pointer; outline: none; transition: opacity .6s ease; }
.hero.quiet, .glow.quiet { opacity: .4; }
.hero .hit { fill: transparent; }
.hero .face { fill: url(#nobody); }
.hero .initial { fill: var(--ink); font: 600 10px var(--mono); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.hero .ring { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.hero .mering { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-opacity: .9; }
.hero:hover .ring, .hero.open .ring { stroke-opacity: .95; }
.hero:focus-visible .ring { stroke: var(--gold); stroke-opacity: 1; stroke-width: 2; }
.hero:focus-visible .focus { stroke: var(--gold); stroke-opacity: .5; }
.hero .focus { fill: none; stroke: transparent; stroke-width: 1; }

.glow { pointer-events: none; transition: opacity .6s ease; }
/* A lit country's badge at its centre: Friends, how many of its heroes are awake; Global, how many players. */
.badge circle { fill: var(--page); fill-opacity: .82; stroke: var(--accent); stroke-opacity: .85; stroke-width: 1; }
.badge text { fill: var(--ink); font: 600 9.5px var(--mono); text-anchor: middle; dominant-baseline: central; }

/* Friends / Global, and the way back from a zoom. HTML buttons over the map, 36 px targets. */
.mapctl { position: absolute; top: 8px; display: flex; z-index: 2; }
.mapmode { right: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgb(13 13 17 / .78); padding: 2px; }
.mapworld { left: 8px; }
.mapctl button { min-height: 36px; min-width: 36px; padding: 0 .85rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font: .75rem var(--mono); letter-spacing: .03em; cursor: pointer; }
.mapctl button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.mapctl button:hover { color: var(--ink); }
.mapctl button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.mapworld button { border: 1px solid var(--line); background: rgb(13 13 17 / .78); color: var(--ink-2); }
.mapctl[hidden] { display: none; }
/* Logged out, in Friends: "Log in to see your friends", in the middle of the map. */
.mapnote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; margin: 0;
  max-width: calc(100% - 32px); box-sizing: border-box; padding: .6rem 1rem; border: 1px solid var(--line);
  border-radius: 10px; background: rgb(13 13 17 / .85); color: var(--ink-2); font-size: .9rem; text-align: center; }
.mapnote a { color: var(--gold); }
.mapnote[hidden] { display: none; }

/* Your local time, bottom left over the southern sea. */
.mapclock { position: absolute; left: 12px; bottom: 8px; margin: 0; z-index: 1; pointer-events: none;
  font: 600 1.05rem var(--mono); letter-spacing: .04em; color: var(--ink-2); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px var(--page), 0 0 2px var(--page); }

/* One hero open: the rest step back so its droplets read. */
.heroes.has-open .dots .hero, .heroes.has-open .glows .glow { opacity: .22; }
.glow .pulse { transform-box: fill-box; transform-origin: center; animation: livepulse var(--beat, 2.6s) ease-in-out infinite;
  animation-delay: var(--phase, 0s); transition: transform 1.2s ease; }
.glow .hot { transition: opacity 1.2s ease; }
@keyframes livepulse { 0%, 100% { transform: scale(var(--lo, .82)); opacity: .7; } 50% { transform: scale(var(--hi, 1.1)); opacity: 1; } }

/* Droplets: shapes under the goo filter, text outside it so it stays crisp. */
.goo .blob { fill: var(--accent); }
.goo .blob.gold { fill: var(--gold); }
.labels text { font: 12px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--page); stroke-width: 3.5px;
  stroke-linejoin: round; pointer-events: none; }
.labels .dlabel { transition: opacity .18s ease; }
.labels .dlabel .k { fill: var(--muted); }
.labels .dnum { font-weight: 700; font-size: 11px; fill: var(--page); stroke: none; text-anchor: middle; dominant-baseline: central; }
.labels .shine { fill: #fff; opacity: .55; pointer-events: none; }
.labels a { cursor: pointer; pointer-events: all; outline: none; }
.labels a .dlabel { fill: var(--gold); }
.labels a:hover .dlabel, .labels a:focus-visible .dlabel { text-decoration: underline; }
.labels a:focus-visible .target { stroke: var(--gold); stroke-width: 1.5; }
.labels .target { fill: transparent; pointer-events: all; }
.labels .hover { font-size: 12px; }
.labels .hover .k { fill: var(--muted); }
.labels .hover .ttl { fill: var(--muted); font-style: italic; }     /* round 5: the title after the name */
.labels .nowhere { fill: var(--muted); font-size: 10px; letter-spacing: .04em; }

.livetotals { margin: .55rem 0 0; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.livetotals b { color: var(--ink); font-weight: 600; }
.livetotals, .livestrip { transition: opacity .25s ease; }
.livemap.has-open .livetotals, .livemap.has-open ~ .livestrip, .screen:has(.livemap.has-open) ~ main .livestrip,
.heroes.has-open .nowhere { opacity: .1; }
.livestrip { margin: 1.4rem 0 1.6rem; font-size: .95rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.livestrip a { color: var(--gold); }
.protonote { margin: 0 0 .8rem; letter-spacing: .04em; }
.tiny { font-size: .72rem; }

/* Phone: the map runs to the screen edges, 2:1 (outside main, so it has no gutter to escape); text keeps
   the gutter. */
@media (max-width: 600px) {
  .labels text { font-size: 11px; }
  .mapclock { left: 8px; bottom: 4px; font-size: .8rem; }
  .mapctl { top: 6px; }
  .mapmode { right: 6px; } .mapworld { left: 6px; }
  .mapctl button { padding: 0 .6rem; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .glow .pulse { animation: none; transition: none; }
  .world .land { transition: none; }
  .hero, .glow, .labels .dlabel { transition: none; }
}