/* Generated by scripts/fetch_fonts.py from Google Fonts. */
/* latin-ext */
@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/black-ops-one-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/black-ops-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/chakra-petch-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/share-tech-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* UFO ALARM: a submarine control room in an 80s action movie. Ported from
   design/ufoalarm.dc.html. */

:root {
  --bg: #0c0e07;
  --border: #6E6C3E;
  --label: #B9B482;
  --text: #E8E3B8;
  --amber: #F0A84A;
  --value: #FFD08A;
  --green: #3DFF5A;
  --pink: #FF3D9A;
  --violet: rgba(180, 76, 255, 0.6);
  --stencil: 'Black Ops One', Impact, sans-serif;
  /* Chakra Petch only lends the letters Share Tech Mono lacks: ś, ł, ż… */
  --mono: 'Share Tech Mono', 'Chakra Petch', ui-monospace, monospace;

  /* The meter's colour: green, pink from 80% (body.invasion). */
  --on: #3DFF5A;
  --off: rgba(61, 255, 90, 0.07);
  --glow: rgba(61, 255, 90, 0.7);
  --fill-low: #0f7a26;
  --fill-top: #C4FFCF;
  --tube-glow: rgba(61, 255, 90, 0.18);
}

body.invasion {
  --on: #FF3D9A;
  --off: rgba(255, 61, 154, 0.08);
  --glow: rgba(255, 61, 154, 0.75);
  --fill-low: #7a1240;
  --fill-top: #FFC2DD;
  --tube-glow: rgba(255, 61, 154, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--amber);
  font-family: var(--mono);
}

a { color: var(--amber); }
a:hover { color: var(--value); }

.room {
  position: relative;
  min-height: 100vh;
  padding: 24px 16px 28px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(240, 168, 74, 0.12), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(180, 76, 255, 0.12), transparent 50%),
    var(--bg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.room > * { width: 100%; max-width: 1400px; margin: 0 auto; }

/* Every block is the same riveted plate. */
.plate {
  position: relative;
  border-radius: 6px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 10% 15%, rgba(150, 70, 25, 0.30), transparent 18%),
    radial-gradient(circle at 85% 90%, rgba(120, 55, 20, 0.26), transparent 22%),
    linear-gradient(160deg, #4a4a2d, #2e2f1c 60%, #3b3c25);
  box-shadow: inset 0 1px 0 rgba(240, 240, 190, 0.08), inset 0 -2px 6px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d6c98a, #6b5a2c 60%, #23200e);
}
.rivet.tl { left: 7px; top: 7px; }
.rivet.tr { right: 7px; top: 7px; }
.rivet.bl { left: 7px; bottom: 7px; }
.rivet.br { right: 7px; bottom: 7px; }

/* Labels: one size, one spacing, pale khaki. */
.sub, .clocks, .map-head, .map-foot, .label, footer {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--label);
}

/* Header */

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
}

h1 {
  margin: 0;
  font-family: var(--stencil);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(240, 140, 40, 0.45);
}
h1 .ufo { color: var(--green); text-shadow: 0 0 16px rgba(61, 255, 90, 0.6); }

.sub { margin: 10px 0 0; }

.clocks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 16px 24px;
  background:
    radial-gradient(circle at 92% 20%, rgba(150, 70, 25, 0.30), transparent 30%),
    radial-gradient(circle at 6% 85%, rgba(120, 55, 20, 0.24), transparent 26%),
    linear-gradient(160deg, #4a4a2d, #2e2f1c 60%, #3b3c25);
}
.clock { display: flex; flex-direction: column; gap: 6px; }
.value { font-size: 22px; letter-spacing: 0.12em; color: var(--value); }

/* Map and meter, side by side; on a phone the meter drops below. */

.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }

.map-panel {
  flex: 999 1 640px;
  min-width: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.map-foot { text-align: right; }

.screen {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid var(--bg);
  background: radial-gradient(ellipse at center, #10201a 0%, #070b09 78%);
  box-shadow: 0 0 0 1px var(--violet), 0 0 24px rgba(180, 76, 255, 0.35), inset 0 0 40px rgba(0, 0, 0, 0.85);
}
.screen-in { position: relative; width: 100%; aspect-ratio: 541.3 / 263.5; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The sweep turns about 0°, 0°, the middle of the map. */
.sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(61, 255, 90, 0) 0deg, rgba(61, 255, 90, 0) 318deg, rgba(61, 255, 90, 0.08) 350deg, rgba(61, 255, 90, 0.2) 360deg);
  pointer-events: none;
  animation: sweep 7s linear infinite;
}
@keyframes sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }

.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.55));
}

.banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  padding: 8px 0;
  text-align: center;
  font-family: var(--stencil);
  font-size: 22px;
  letter-spacing: 0.18em;
  color: #FFE3F0;
  text-shadow: 0 0 12px var(--pink);
  background: repeating-linear-gradient(-45deg, rgba(255, 61, 154, 0.55) 0 14px, rgba(12, 14, 7, 0.85) 14px 28px);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }

/* The saucer: the map's and the report's, green or pink. */
.saucer { overflow: visible; filter: drop-shadow(0 0 3px var(--s-glow)); }
.saucer path { fill: var(--s-dome); stroke: var(--s-line); stroke-width: 1.8; }
.saucer ellipse { fill: var(--s-hull); stroke: var(--s-line); stroke-width: 1.8; }
.screen, .report {
  --s-line: #3DFF5A;
  --s-glow: rgba(61, 255, 90, 0.8);
  --s-dome: rgba(61, 255, 90, 0.16);
  --s-hull: rgba(8, 36, 14, 0.92);
}
.pink {
  --s-line: #FF3D9A;
  --s-glow: rgba(255, 61, 154, 0.8);
  --s-dome: rgba(255, 61, 154, 0.16);
  --s-hull: rgba(40, 6, 22, 0.92);
}

.numeral {
  font-family: var(--stencil);
  line-height: 1;
  color: var(--green);
  text-shadow: 0 0 6px rgba(61, 255, 90, 0.9);
}

/* A saucer on the map is a button: 44 px to tap, opening its report. */
.hit {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.hit:focus-visible { outline: 2px solid var(--value); outline-offset: -4px; border-radius: 50%; }
.hit .numeral { font-size: 12px; }
.mark { position: relative; display: flex; }

/* Today's contacts pulse; the rings never take a click. */
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--s-line);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: pulse 2.2s ease-out infinite;
}
.ring.late { animation-delay: -1.1s; }
@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

/* The meter */

.meter-panel {
  flex: 1 1 300px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background:
    radial-gradient(circle at 80% 12%, rgba(150, 70, 25, 0.30), transparent 24%),
    radial-gradient(circle at 15% 85%, rgba(120, 55, 20, 0.24), transparent 26%),
    linear-gradient(160deg, #4a4a2d, #2e2f1c 60%, #3b3c25);
}

.readout {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 4px;
  border: 2px solid var(--bg);
  background: #050705;
  box-shadow: 0 0 0 1px var(--violet), 0 0 20px rgba(180, 76, 255, 0.3), inset 0 0 24px rgba(0, 0, 0, 0.9);
}
.digit { display: flex; align-items: flex-end; gap: 5px; }
.digit svg { transform: skewX(-7deg); filter: drop-shadow(0 0 5px var(--glow)); }
.digit polygon { fill: var(--off); }
.digit polygon.on { fill: var(--on); }
.dp { width: 7px; height: 7px; margin-bottom: 1px; border-radius: 1px; background: var(--off); }
.dp.on { background: var(--on); box-shadow: 0 0 6px var(--on); }
.pct { margin-left: 4px; font-size: 30px; line-height: 1; color: var(--on); text-shadow: 0 0 10px var(--glow); }
.lost .pct { color: var(--off); text-shadow: none; }

.gauge {
  position: relative;
  flex: 1 1 0;
  min-height: 320px;
  display: grid;
  grid-template-columns: 40px 60px minmax(0, 1fr);
  column-gap: 12px;
  padding: 8px 0;
  --end: 7px; /* half a scale label: 0 and 100 stand in this far from the tube's ends */
}

.scale, .bands { position: relative; margin: var(--end) 0; }
.minor { position: absolute; right: 0; width: 6px; height: 1px; background: rgba(240, 168, 74, 0.45); }
.major {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #DCD6A6;
}
.major i { width: 12px; height: 2px; background: var(--amber); }

.tube {
  position: relative;
  border-radius: 30px;
  border: 3px solid var(--border);
  background: #070907;
  overflow: hidden;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--bg), 0 0 18px var(--tube-glow);
}
/* The tube's 0 to 100, level with the scale; the zone and the liquid run on into its ends. */
.well { position: absolute; left: 0; right: 0; top: calc(var(--end) - 3px); bottom: calc(var(--end) - 3px); }
.zone {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(3px - var(--end));
  height: calc(20% + var(--end) - 3px);
  border-bottom: 2px solid var(--pink);
  background: repeating-linear-gradient(-45deg, rgba(255, 61, 154, 0.32) 0 8px, transparent 8px 16px);
}
.fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(3px - var(--end));
  box-sizing: content-box;
  padding-bottom: calc(var(--end) - 3px);
  background: linear-gradient(to top, var(--fill-low), var(--on) 80%, var(--fill-top));
  box-shadow: 0 0 22px var(--glow);
}
.bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(230, 255, 235, 0.6);
  animation: rise 6s linear infinite;
}
.bubble:nth-child(1) { left: 30%; width: 6px; height: 6px; background: rgba(230, 255, 235, 0.7); }
.bubble:nth-child(2) { left: 62%; width: 4px; height: 4px; animation-delay: -2.2s; }
.bubble:nth-child(3) { left: 45%; width: 5px; height: 5px; animation-delay: -4.1s; }
@keyframes rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 0.85; }
  100% { transform: translateY(-560px); opacity: 0; }
}
.line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(240, 168, 74, 0.4); }
.glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 32%, transparent 70%, rgba(255, 255, 255, 0.07));
}

/* The bands beside the tube, the current one lit in its colour. */
.b5, .b4 { --hot: #FFD08A; }
.b3 { --hot: #FFB347; }
.b2 { --hot: #C77DFF; }
.b1 { --hot: #FF3D9A; }
.band {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  padding-left: 10px;
  border-left: 2px solid rgba(240, 168, 74, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  color: var(--label);
}
.band b { font-family: var(--stencil); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; }
.band span { font-size: 12px; letter-spacing: 0.14em; }
.band.active { color: var(--hot); border-left-color: var(--hot); }
.band.active b { text-shadow: 0 0 10px var(--hot); }
.pointer {
  position: absolute;
  left: -11px;
  transform: translateY(50%);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 10px solid var(--hot);
  filter: drop-shadow(0 0 4px var(--hot));
}

/* Footer */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 22px;
}
.hosted { display: inline-flex; align-items: center; gap: 7px; }
.hosted svg { overflow: visible; filter: drop-shadow(0 0 4px var(--glow)); }
.hosted path { fill: var(--on); fill-opacity: 0.22; stroke: var(--on); stroke-width: 2; stroke-linejoin: round; }

/* The contact report, over the page. */

.report {
  --r-line: #3DFF5A;
  --r-glow: rgba(61, 255, 90, 0.4);
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 170px auto auto;
  padding: 18px 20px 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--amber);
  font-family: var(--mono);
  background:
    radial-gradient(circle at 88% 10%, rgba(150, 70, 25, 0.30), transparent 26%),
    linear-gradient(160deg, #4a4a2d, #2e2f1c 60%, #3b3c25);
  box-shadow: 0 0 0 1px var(--r-line), 0 0 32px var(--r-glow), 0 24px 60px rgba(0, 0, 0, 0.7);
}
.report.pink { --r-line: #FF3D9A; --r-glow: rgba(255, 61, 154, 0.45); }
.report:popover-open { display: flex; flex-direction: column; gap: 14px; }
.report::backdrop { background: rgba(5, 6, 3, 0.62); }

.report-head { display: flex; align-items: center; gap: 14px; }
.report-head .saucer { flex: 0 0 auto; }
.report-title { flex: 1 1 auto; min-width: 0; }
.report h2 {
  margin: 0;
  font-family: var(--stencil);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--r-line);
  text-shadow: 0 0 10px var(--r-glow);
}
.kind { margin-top: 4px; font-size: 12px; letter-spacing: 0.18em; color: #DCD6A6; }
.close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(12, 14, 7, 0.6);
  color: var(--value);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close path { stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

.fields {
  margin: 0;
  padding: 14px 16px;
  border-radius: 4px;
  border: 2px solid var(--bg);
  background: radial-gradient(ellipse at center, #0f1d16 0%, #070b09 85%);
  box-shadow: 0 0 0 1px var(--violet), 0 0 18px rgba(180, 76, 255, 0.3), inset 0 0 24px rgba(0, 0, 0, 0.85);
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.fields dt { font-size: 13px; letter-spacing: 0.22em; color: var(--label); }
.fields dd { margin: 0; }
.ago, .coords { display: block; }
.ago { color: var(--value); }
.coords { color: var(--label); white-space: pre; }

.go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid var(--r-line);
  color: var(--r-line);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.22em;
  box-shadow: 0 0 12px var(--r-glow);
}
.go:hover { color: var(--r-line); background: rgba(255, 255, 255, 0.06); }
.go path { fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .sweep, .ring, .banner, .bubble { animation: none; }
}