:root {
  --canvas-w: 3840px;
  --canvas-h: 2160px;

  /* rectangle defaults */
  --panel-radius: 0px;
  --panel-pad: 0.7em;
  --panel-shadow: 0 10px 22px rgba(0,0,0,.18);

  /* marker defaults */
  --marker-size: 90px;
  --marker-shadow: 0 10px 18px rgba(0,0,0,.20);
  --marker-color: #ff3b30; /* pin color */
  --marker-text: #fff;

  /* optional focus ring for accessibility */
  --focus: 0 0 0 3px rgba(0,128,255,.35);
  
  /* colors */
  --color-red-base: 170 4 6;
  --color-blue-base: 69 104 148;
  --color-green-base: 77 130 48;
  --color-dark-base: 0 0 0;

  --color-red: rgb(var(--color-red-base));
  --color-red-highlight: rgb(var(--color-red-base) / 0.5 );
  --color-green: rgb(var(--color-green-base));
  --color-green-highlight: rgb(var(--color-green-base) / 0.5 );
  --color-blue: rgb(var(--color-blue-base));
  --color-blue-highlight: rgb(var(--color-blue-base) / 0.5 );
  --color-dark: rgb(var(--color-dark-base));
  --color-dark-highlight: rgb(var(--color-dark-base) / 0.5 );
}

body {
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
  /*padding: 24px;*/
  background: #0b1220;
  color: #e9eefc;
  font-size: 30px;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

/* When page is ready */
body.loaded {
  opacity: 1;
}

body.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.wrap {
  max-width: 3840px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

#landing {
  width: 400px;
  height: auto;
  padding: 4% 8%;
  margin: 25% auto;
  background-color: rgba( 255, 255, 255, 0.8);
}

#landing a {
  color: rgba( 0, 0, 0, 1);
  text-decoration: none;
  font-size: 3em;
}

/* The "canvas" */
.map-canvas {
  position: relative;
  width: min(100%, var(--canvas-w));
  aspect-ratio: 3840 / 2160; /* keeps proportions responsive */
  /* border-radius: 18px; */
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  background:
	/* fallback color if image not loaded */
	linear-gradient(135deg, #1b2a4a, #0e1630);
  background-size: cover;
  background-position: center;
  isolation: isolate; /* keep z-index layering predictable */
}

.map-canvas::after {
  /* subtle vignette on top of image (optional) */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events: none;
  z-index: 1;
}

/* Layers (rectangles and markers) should be above vignette */
.layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* let marker links re-enable below */
}

.back {
  cursor: pointer;
}

.back img {
  width: 100%;
  height: auto;
}

.center {
  text-align: center;
}

/* Rectangles / panels */
.panel {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);

  /* ✅ auto-height */
  height: auto;
  min-height: calc(var(--minh, 0) * 1px);

  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
  box-shadow: var(--panel-shadow);
  color: rgba(255,255,255,1);

  pointer-events: auto;
  user-select: text;
}

.panel__title {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0;
  color: rgb(255, 255, 255);
}
.panel__body {
  margin: 0;
  font-size: 1em;
  line-height: 1.35;
  opacity: .9;
}

.panel__body div.startpage-header {
  text-align: right;
  color: var(--color-blue);
  font-size: 2.1em;
}

.panel__body div.startpage-header .bigger {
  font-size: 1.2em;
  font-weight: 900;
  line-height: 0.8em;
}

.panel__body div.startpage-greeting {
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 1em;
}

.highlight-red {
  background: var(--color-red-highlight);
}

.highlight-green {
  background: var(--color-green-highlight);
}

.highlight-blue {
  background: var(--color-blue-highlight);
}

.highlight-dark {
  background: var(--color-dark-highlight);
  color: var(--marker-text) !important;
  padding: 02.em 0.4em;
}

/* Color themes for panels (easy styling) */
.panel--blue        { background: var(--color-blue); }
.panel--green       { background: var(--color-green); }
.panel--red         { background: var(--color-red); }
.panel--transparent { background: transparent; border: none; box-shadow: none; }

.panel img { width: 100%; height: auto;}

.panel .startpage-logos {
  text-align: center;
}

.panel .startpage-logos img {
  width: auto;
  height: 150px;
  margin: 0 1em;
}

.panel--page-header {
  font-size: 2em;
  text-align: center;
}

.panel--page-header-red .panel__title, .panel--page-header .panel__title {
  color: var(--color-red);
}

.panel--page-header-green .panel__title {
  color: var(--color-green);
}

.panel--page-header-blue .panel__title {
  color: var(--color-blue);
}

.panel__body div.page-greeting {
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 1.4em;
}

.panel__body div.page-content {
  color: rgba(0, 0, 0, 1);
  font-size: 1.9em;
}

.panel__body div.page-content a {
  color: rgba(0, 0, 0, 1);
  font-size: 1.9em;
  text-decoration: none;
}

/* Marker link pins */
.marker {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);

  width: var(--marker-size);
  height: var(--marker-size);

  /* center the pin at the coordinate (x,y) */
  transform: translate(-50%, -100%); /* tip at x/y */
  pointer-events: auto;
  text-decoration: none;
  outline: none;
  z-index: 3;

  --pin-color: var(--color-red); /* default = red */
}
/* Marker color themes */
.marker[data-color="red"] { --pin-color: var(--color-red); }
.marker[data-color="green"] { --pin-color: var(--color-green); }
.marker[data-color="blue"] { --pin-color: var(--color-blue); }

.marker__pin {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--marker-text);
  font-weight: 800;
  font-size: 2em;
  line-height: 1;

  /* Pin shape */
  background: var(--pin-color);
  border-radius: 999px 999px 999px 0;
  transform: rotate(-45deg);
  box-shadow: var(--marker-shadow);
  position: relative;
}

/* Un-rotate the number so it reads normally */
.marker__pin > span {
  transform: rotate(45deg);
  display: inline-block;
}

.marker:hover .marker__pin {
  filter: brightness(1.1);
}

.marker:focus-visible .marker__pin {
  box-shadow: var(--marker-shadow), var(--focus);
}

.marker.is-focus {
  z-index: 999;
}

.marker.is-focus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: marker-pulse 900ms ease-out 0ms 2;
  pointer-events: none;
}

.marker.is-focus .marker__pin {
  animation: marker-bounce 650ms cubic-bezier(.2,.9,.2,1) 0ms 1;
  filter: brightness(1.1) saturate(1.2);
  box-shadow: 0 16px 28px rgba(0,0,0,.28);
}

@keyframes marker-bounce {
  0%   { transform: rotate(-45deg) translateY(0); }
  35%  { transform: rotate(-45deg) translateY(-8px); }
  65%  { transform: rotate(-45deg) translateY(2px); }
  100% { transform: rotate(-45deg) translateY(0); }
}

@keyframes marker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.0); }
  25%  { box-shadow: 0 0 0 10px rgba(255,255,255,.30); }
  55%  { box-shadow: 0 0 0 20px rgba(255,255,255,.14); }
  100% { box-shadow: 0 0 0 34px rgba(255,255,255,.0); }
}

/* Responsive: scale coordinates automatically to fit container width.
   We render everything in a fixed "design size" coordinate system (900x520)
   then scale the whole layer to match the current canvas size. */
.layer {
  transform-origin: top left;
}

/* optional small legend */
.hint {
  font-size: 13px;
  opacity: .85;
}
code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 8px; }

.list {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.listitem {
  display: flex;
  align-items: flex-start;
}

.listitem-number {
  font-size: 1.5em;
  font-weight: bold;
  margin-right: 0.3em;
  flex-shrink: 0;
  line-height: 1em;
}

.listitem-body {
  font-size: 0.8em;
  line-height: 1.2em;
}

.right {
  text-align: right;
}

.smaller {
  font-size: 1.5em !important;
}

div.page-greeting.smaller {
  font-size: 1.2em !important;
}

.countdown {
  position: absolute;
  bottom: 1em;
  right: 1.2em;
  z-index: 9999;
  font-size: 2rem;
  font-family: monospace;
  opacity: 1;
  transition: opacity 1s ease;
}

.countdown.fade-out {
  opacity: 0;
}

#arrow {
  position: absolute;
  width: 40px;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: all 1.5s ease-in-out, opacity 1.8s;
}