/* ==========================================================================
   USERS – bridge layout
   Mobile-first: normal document flow. From 1000px landscape the page becomes
   a fixed 16:9 "stage" (container) and every element is positioned on it.
   --u = horizontal unit (1% of stage width on desktop, 16px on mobile)
   --v = vertical unit   (1% of stage height on desktop, 8px on mobile)
   ========================================================================== */

:root {
  --bg: #04080f;
  --ink: #e8f2ff;
  --ink-dim: #b3c5dc;
  --muted: #7f95b0;
  --cyan: #4fd8ff;
  --cyan-2: #9ae9ff;
  --teal: #2ee6c5;
  --amber: #ffb454;
  --red: #ff6b6b;
  --green: #7bea7b;
  --line: rgba(120, 200, 255, 0.28);
  --line-strong: rgba(120, 200, 255, 0.55);
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .6s;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.focus { overflow: hidden; }
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
a { color: var(--cyan); }
button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--cyan); color: #04080f; padding: .5rem 1rem; border-radius: .4rem; }
.skip:focus { left: .5rem; }

.ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-lg { width: 2.6em; height: 2.6em; }
.ico-xs { width: .9em; height: .9em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em 1.05em; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 22, 44, .6); color: var(--ink);
  font-size: calc(.82 * var(--u)); letter-spacing: .04em; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { background: rgba(79, 216, 255, .14); border-color: var(--cyan); box-shadow: 0 0 calc(1 * var(--u)) rgba(79, 216, 255, .28); }
.btn:focus-visible, .panel:focus-visible, .monitor:focus-visible, .chip:focus-visible, .reg-arrow:focus-visible, .lang button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(90deg, rgba(79, 216, 255, .32), rgba(46, 230, 197, .24));
  border-color: var(--cyan); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: calc(.74 * var(--u));
}
.btn-primary:hover { background: linear-gradient(90deg, rgba(79, 216, 255, .5), rgba(46, 230, 197, .36)); }
.btn-ghost { background: rgba(6, 16, 32, .45); }
.btn-secondary { background: rgba(6, 16, 32, .5); }

/* ---------- Stage & background ---------- */
/* The window mask (img/earth/window-mask.png) embedded as data URI: a CSS mask image loaded from a file is blocked
   by Chrome when the page is opened directly from disk (file://). Rebuild: base64 of the PNG. */
:root { --window-mask: url("data:image/png;base64,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"); }

.bridge { position: relative; }
.stage { --u: 16px; --v: 8px; position: relative; display: flex; flex-direction: column; min-height: 100svh; }

.bg {
  position: fixed; inset: 0; z-index: 0;
  background-color: #04080f;
  background-image:
    url("../img/hero_bridge_space.jpg"),
    radial-gradient(ellipse at 50% 68%, rgba(45, 120, 220, .55), rgba(5, 12, 28, 0) 46%),
    linear-gradient(180deg, #071226 0%, #03060d 100%);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* The window starts empty (stars only) so the live Earth appears without a painted Europe first.
   Only when js/earth.js cannot run (no WebGL 2, texture error) the painted Earth is shown instead. */
.earth-off .bg { background-image:
    url("../img/hero_bridge.jpg"),
    radial-gradient(ellipse at 50% 68%, rgba(45, 120, 220, .55), rgba(5, 12, 28, 0) 46%),
    linear-gradient(180deg, #071226 0%, #03060d 100%); }
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 15, .25) 0%, rgba(4, 8, 15, .55) 45%, rgba(4, 8, 15, .9) 100%);
}

/* ---------- Effects ---------- */
.fx { position: fixed; inset: 0; height: 100svh; z-index: 0; pointer-events: none; overflow: hidden; }
.hurricane { display: none; }
.satellite {
  position: absolute; top: 9%; left: 0;
  width: clamp(70px, 14vw, 120px);
  opacity: .95; filter: drop-shadow(0 0 6px rgba(160, 200, 255, .35));
  animation: drift 90s linear infinite;
}
@keyframes drift {
  from { transform: translate(-130%, 0); }
  to   { transform: translate(calc(100vw + 30%), 6vh); }
}
.sat-tumble { transform-origin: 110px 60px; animation: tumble 110s linear infinite; }
@keyframes tumble { to { transform: rotate(360deg); } }
.sat-fragment { transform-origin: 166px 74px; animation: dangle 5.5s ease-in-out infinite alternate; }
@keyframes dangle { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }
.sat-light { animation: blink 2.4s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.deb { animation: debfloat 7s ease-in-out infinite alternate; }
.d2 { animation-delay: -2.3s; } .d3 { animation-delay: -4.6s; }
@keyframes debfloat { to { transform: translate(7px, -9px); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes spin-t { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; order: -1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1rem;
  background: linear-gradient(180deg, rgba(4, 8, 15, .92), rgba(4, 8, 15, .65));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.logo { display: inline-flex; align-items: center; gap: .55em; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: .32em; font-size: calc(.8 * var(--u)); }
.logo img { width: calc(1.9 * var(--u)); height: calc(1.9 * var(--u)); border-radius: 22%; }
.topnav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: rgba(6, 16, 32, .5); }
.lang button { border: 0; background: transparent; color: var(--ink-dim); padding: .5em .8em; font-size: calc(.74 * var(--u)); letter-spacing: .1em; cursor: pointer; }
.lang button[aria-pressed="true"] { background: rgba(79, 216, 255, .25); color: #fff; }
.lang button + button { border-left: 1px solid var(--line); }

/* ---------- Title block ---------- */
.brand {
  position: relative; z-index: 1; order: 0;
  min-height: 74svh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 2.5rem 1rem 2rem;
}
.wordmark {
  margin: 0; font-weight: 200; line-height: 1;
  font-size: clamp(2.8rem, 15vw, 5.4rem); letter-spacing: .42em; text-indent: .42em; color: #fff;
  text-shadow: 0 0 36px rgba(79, 216, 255, .5), 0 0 6px rgba(255, 255, 255, .55);
}
.wordmark span { display: inline-block; animation: letter-in 1s var(--ease) both; }
.wordmark span:nth-child(2) { animation-delay: .08s; } .wordmark span:nth-child(3) { animation-delay: .16s; }
.wordmark span:nth-child(4) { animation-delay: .24s; } .wordmark span:nth-child(5) { animation-delay: .32s; }
@keyframes letter-in { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.subtitle { margin: .9rem 0 0; font-size: clamp(.8rem, 2.8vw, 1.05rem); letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: #fff; text-shadow: 0 0 18px rgba(0, 0, 0, .9); }
.tagline { margin: 1rem 0 0; font-size: clamp(.95rem, 3.4vw, 1.15rem); color: var(--cyan-2); font-weight: 300; letter-spacing: .03em; text-shadow: 0 0 18px rgba(0, 0, 0, .9); }
.cta { margin-top: 1.8rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Panels ---------- */
.column { position: relative; z-index: 1; display: grid; gap: 1rem; padding: 0 1rem; margin-bottom: 1rem; }
.column-left { order: 3; } .column-right { order: 4; }
.panel {
  position: relative; display: flex; flex-direction: column; gap: calc(.7 * var(--v));
  padding: calc(.9 * var(--u)) calc(1 * var(--u)); text-align: left; color: var(--ink);
  background: linear-gradient(180deg, rgba(10, 26, 50, .8), rgba(5, 14, 30, .72));
  border: 1px solid var(--line); border-radius: calc(.6 * var(--u));
  box-shadow: 0 0 calc(1.2 * var(--u)) rgba(79, 216, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer; overflow: hidden; min-height: 0;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .75; }
.panel:hover, .panel:focus-visible { border-color: var(--cyan); box-shadow: 0 0 calc(1.6 * var(--u)) rgba(79, 216, 255, .35); transform: translateY(-2px); }
.panel h2 { margin: 0; display: flex; align-items: center; gap: .45em; font-size: calc(.9 * var(--u)); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #fff; }
.panel h2 .ico { color: var(--cyan); }
.panel-body { display: grid; grid-template-columns: 38% 1fr; gap: calc(.8 * var(--u)); align-items: start; flex: 1; min-height: 0; }
.panel-art {
  aspect-ratio: 4 / 3; border-radius: calc(.4 * var(--u)); overflow: hidden; color: var(--cyan);
  background: #0a1a33 center / cover no-repeat; border: 1px solid rgba(120, 200, 255, .18);
}
.art-threats { background-image: url("../img/panel-threats.jpg"), radial-gradient(circle at 30% 85%, #ff7a2a, #7a1b10 42%, #180910 78%); color: var(--red); }
.art-vision  { background-image: url("../img/panel-vision.jpg"), radial-gradient(circle at 50% 75%, #79d98a, #1b5e3a 45%, #0a2822 82%); color: var(--green); }
.panel-art svg { width: 100%; height: 100%; display: block; padding: 8%; }
.art-strategy .radar { transform-origin: 50px 50px; animation: spin-t 6s linear infinite; }
.art-platform .pulse { transform-origin: 50px 50px; animation: pulse 2.4s ease-in-out infinite; }
.panel ul { margin: 0; padding: 0; list-style: none; font-size: calc(.8 * var(--u)); color: var(--ink-dim); display: grid; gap: calc(.45 * var(--v)); align-content: start; }
.panel li { display: flex; gap: .55em; align-items: flex-start; line-height: 1.35; }
.panel li::before { content: ""; flex: none; width: .42em; height: .42em; margin-top: .5em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.panel-threats li::before { background: var(--red); box-shadow: 0 0 8px var(--red); }
.panel-strategy li::before { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.panel-platform li::before { background: var(--cyan-2); }
.panel p { margin: 0; font-size: calc(.8 * var(--u)); color: var(--ink-dim); line-height: 1.45; }
.panel-more { margin-top: auto; align-self: flex-end; font-size: calc(.66 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.panel-more::after { content: " \2192"; }
.panel-join { cursor: default; }
.panel-join:hover { transform: none; }
.panel-join > p { font-size: calc(.86 * var(--u)); color: var(--ink); }
.join-actions { display: flex; flex-direction: column; gap: calc(.6 * var(--v)); margin-top: auto; }
.join-actions .btn { justify-content: center; }

/* ---------- Monitors ---------- */
.monitors { position: relative; z-index: 1; order: 1; padding: 0 1rem; margin-bottom: 1.5rem; }
.monitor-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.monitor {
  position: relative; display: flex; flex-direction: column; min-height: 0; text-align: left;
  padding: calc(.7 * var(--u)) calc(.8 * var(--u)) calc(.6 * var(--u));
  background: linear-gradient(180deg, rgba(6, 20, 40, .92), rgba(4, 12, 26, .88));
  border: 1px solid var(--line); border-radius: calc(.5 * var(--u)); color: var(--ink);
  box-shadow: 0 0 calc(1.2 * var(--u)) rgba(79, 216, 255, .16); cursor: pointer; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.monitor::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.monitor:hover, .monitor:focus-visible { border-color: var(--cyan); box-shadow: 0 0 calc(1.6 * var(--u)) rgba(79, 216, 255, .38); }
.m-label { font-size: calc(.66 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-value { margin-top: calc(.3 * var(--v)); font-size: calc(1.75 * var(--u)); font-weight: 300; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .25em; }
.m-value small { font-size: calc(.62 * var(--u)); color: var(--ink-dim); letter-spacing: .04em; }
.m-spark { flex: 1; min-height: calc(5 * var(--v)); margin-top: calc(.5 * var(--v)); }
.m-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.spark-dot { animation: pulse 2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.m-sub { margin-top: calc(.3 * var(--v)); font-size: calc(.6 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monitor-holo {
  grid-column: 1 / -1; align-items: center; justify-content: center; text-align: center;
  padding-top: calc(1.2 * var(--u));
  background: radial-gradient(ellipse at 50% 110%, rgba(79, 216, 255, .22), rgba(4, 12, 26, .85) 62%);
}
.monitor-holo { padding: calc(.6 * var(--u)); }
.holo { position: relative; width: clamp(110px, 32vw, 150px); max-width: 100%; max-height: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.holo img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 0 8px rgba(79, 216, 255, .45)); transition: filter .25s, transform .25s; }
.monitor-holo:hover .holo img, .monitor-holo:focus-visible .holo img { filter: drop-shadow(0 0 14px rgba(79, 216, 255, .75)); transform: scale(1.04); }

/* ---------- Register ---------- */
.register { position: relative; z-index: 1; order: 2; padding: 0 1rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: calc(.8 * var(--v)); }
.register.flash .reg-strip { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(79, 216, 255, .7); } 100% { box-shadow: 0 0 0 18px rgba(79, 216, 255, 0); } }
.register-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.register-head h2 { margin: 0; font-size: calc(.86 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.register-count { font-size: calc(.64 * var(--u)); color: var(--cyan); border: 1px solid var(--line); border-radius: 999px; padding: .1em .65em; }
.register-hint { margin: 0; flex-basis: 100%; font-size: calc(.7 * var(--u)); color: var(--muted); }
.register-body { position: relative; display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: stretch; min-height: 0; }
.reg-arrow { display: none; width: calc(2 * var(--u)); border: 1px solid var(--line); border-radius: calc(.4 * var(--u)); background: rgba(6, 18, 36, .75); color: var(--cyan); cursor: pointer; place-items: center; transition: border-color .2s, background .2s; }
.reg-arrow:hover { border-color: var(--cyan); background: rgba(79, 216, 255, .14); }
.reg-arrow .ico { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); }
.reg-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; border-radius: calc(.5 * var(--u)); }
.chip {
  position: relative; display: flex; flex-direction: column; gap: calc(.6 * var(--v)); min-height: 0;
  padding: calc(.65 * var(--u)) calc(.75 * var(--u)); text-align: left; color: var(--ink);
  background: linear-gradient(180deg, rgba(10, 26, 50, .82), rgba(5, 14, 30, .74));
  border: 1px solid var(--line); border-radius: calc(.5 * var(--u)); cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
}
.chip:hover, .chip:focus-visible, .chip[aria-current="true"] { border-color: var(--cyan); box-shadow: 0 0 calc(1.2 * var(--u)) rgba(79, 216, 255, .3); transform: translateY(-2px); }
.chip[aria-current="true"] { background: linear-gradient(180deg, rgba(79, 216, 255, .24), rgba(10, 26, 50, .85)); }
.chip-top { display: flex; justify-content: space-between; align-items: center; }
/* COP 31 events calendar: first card, a direct link into the USERS app (COP31_URL in js/config.js) */
.chip-link { text-decoration: none; }
.chip-cop31 { border-color: rgba(46, 230, 197, .5); background: linear-gradient(180deg, rgba(46, 230, 197, .2), rgba(5, 14, 30, .78)); box-shadow: 0 0 calc(.9 * var(--u)) rgba(46, 230, 197, .18); }
.chip-cop31:hover, .chip-cop31:focus-visible { border-color: var(--teal); box-shadow: 0 0 calc(1.2 * var(--u)) rgba(46, 230, 197, .4); }
.chip-cop31 .chip-top .ico { color: var(--teal); }
.chip-cop31 .chip-tag { color: var(--teal); font-weight: 600; letter-spacing: .08em; }
.chip-cop31 .chip-meta { color: var(--ink-dim); }
.chip-top .ico { width: calc(1.55 * var(--u)); height: calc(1.55 * var(--u)); color: var(--cyan); }
.chip-num { font-family: var(--mono); font-size: calc(.6 * var(--u)); color: var(--muted); }
.chip-title { font-size: calc(.76 * var(--u)); line-height: 1.25; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chip-meta { margin-top: auto; display: flex; gap: .35em; align-items: center; font-size: calc(.58 * var(--u)); color: var(--muted); white-space: nowrap; }
.dot { width: .5em; height: .5em; border-radius: 50%; background: var(--teal); box-shadow: 0 0 6px var(--teal); flex: none; }
.status-idea .dot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.status-planned .dot { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* ---------- Main screen (focus mode) ---------- */
.mainscreen {
  position: fixed; inset: 0; z-index: 50;
  opacity: 0; visibility: hidden; translate: 0 calc(-3 * var(--v)); pointer-events: none;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.mainscreen.is-open { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.ms-frame {
  position: relative; height: 100%; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(8, 22, 44, .95), rgba(4, 12, 26, .97));
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 calc(3 * var(--u)) rgba(79, 216, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden;
}
.ms-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); }
.ms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: calc(1.1 * var(--u)) calc(1.4 * var(--u)) calc(.6 * var(--u)); }
.ms-kicker { margin: 0; font-size: calc(.64 * var(--u)); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.ms-head h2 { margin: calc(.2 * var(--v)) 0 0; font-size: calc(1.6 * var(--u)); font-weight: 500; line-height: 1.15; color: #fff; }
.ms-sub { margin: calc(.5 * var(--v)) 0 0; font-size: calc(.9 * var(--u)); color: var(--ink-dim); line-height: 1.4; }
.ms-close { flex: none; }
.ms-body { flex: 1; min-height: 0; overflow: auto; padding: calc(.4 * var(--u)) calc(1.4 * var(--u)) calc(1 * var(--u)); scrollbar-width: thin; scrollbar-color: rgba(79, 216, 255, .4) transparent; outline: none; }
.ms-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: calc(.5 * var(--u)) calc(1.4 * var(--u)) calc(.8 * var(--u)); border-top: 1px solid rgba(120, 200, 255, .14); }
.ms-pos { font-family: var(--mono); font-size: calc(.7 * var(--u)); color: var(--muted); }

.ms-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.4 * var(--u)); }
.video-box { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: calc(.5 * var(--u)); overflow: hidden; border: 1px solid var(--line); }
.video-box video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.video-poster { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer; background: #0a1a33 center / cover no-repeat; }
.video-poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); }
.video-poster .play { position: relative; z-index: 1; width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(4, 12, 26, .72); border: 1px solid var(--cyan); box-shadow: 0 0 calc(1.5 * var(--u)) rgba(79, 216, 255, .55); transition: transform .2s; }
.video-poster .play .ico { width: 45%; height: 45%; }
.video-poster:hover .play { transform: scale(1.08); }
.video-tabs { display: flex; gap: .4rem; margin-top: calc(.7 * var(--v)); flex-wrap: wrap; }
.video-tab[aria-pressed="true"] { border-color: var(--cyan); background: rgba(79, 216, 255, .18); }
.no-video { aspect-ratio: 16 / 9; display: grid; place-items: center; align-content: center; gap: .5rem; text-align: center; padding: calc(1 * var(--u)); color: var(--ink-dim); border: 1px dashed var(--line); border-radius: calc(.5 * var(--u)); background: radial-gradient(ellipse at 50% 60%, rgba(79, 216, 255, .12), rgba(4, 12, 26, .4) 70%); }
.no-video .ico { color: var(--cyan); }
.no-video p { margin: 0; font-size: calc(.85 * var(--u)); max-width: 30em; }
.ms-desc { font-size: calc(.95 * var(--u)); line-height: 1.55; color: var(--ink); margin: calc(.8 * var(--v)) 0 0; }
.status-pill { display: inline-flex; align-items: center; gap: .45em; font-size: calc(.64 * var(--u)); letter-spacing: .12em; text-transform: uppercase; padding: .3em .8em; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.hint { font-size: calc(.7 * var(--u)); color: var(--muted); margin: calc(.6 * var(--v)) 0 0; }
.tools h3, .blocks h3, .section-title { font-size: calc(.72 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin: calc(1.6 * var(--v)) 0 calc(.6 * var(--v)); font-weight: 600; }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(.5 * var(--v)); }
.tool { display: grid; grid-template-columns: calc(3 * var(--u)) 1fr auto; gap: calc(.6 * var(--u)); align-items: center; padding: calc(.4 * var(--u)) calc(.5 * var(--u)); border: 1px solid rgba(120, 200, 255, .16); border-radius: calc(.4 * var(--u)); background: rgba(255, 255, 255, .025); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; }
a.tool:hover { border-color: var(--cyan); background: rgba(79, 216, 255, .09); }
.tool-img { width: calc(3 * var(--u)); aspect-ratio: 1; border-radius: calc(.3 * var(--u)); object-fit: cover; background: #0a1a33; display: block; }
.tool-name { font-size: calc(.82 * var(--u)); font-weight: 500; color: #fff; }
.tool-desc { font-size: calc(.68 * var(--u)); color: var(--muted); line-height: 1.35; }
.tool .ico { color: var(--cyan); }
.tool.is-soon { opacity: .55; }
.ms-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: calc(1.6 * var(--v)); }

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { fill: var(--muted); font-size: 3.4px; font-family: var(--mono); }
.big-value { font-size: calc(3 * var(--u)); font-weight: 200; line-height: 1; margin: calc(.3 * var(--v)) 0 0; font-variant-numeric: tabular-nums; }
.big-value small { font-size: calc(.9 * var(--u)); color: var(--ink-dim); font-weight: 400; }
.source { font-size: calc(.72 * var(--u)); color: var(--muted); margin-top: calc(1 * var(--v)); }

.blocks p, .blocks li { font-size: calc(.9 * var(--u)); line-height: 1.55; color: var(--ink-dim); }
.blocks p { margin: 0 0 calc(.8 * var(--v)); }
.blocks ol { margin: 0 0 calc(.8 * var(--v)); padding-left: 1.5em; }
.blocks ol li { margin: calc(.5 * var(--v)) 0; padding-left: .2em; }
.blocks ol li::marker { color: var(--cyan); font-family: var(--mono); }
.blocks h3:first-child { margin-top: calc(.6 * var(--v)); }
.acronym { display: flex; gap: calc(1 * var(--u)); flex-wrap: wrap; margin: calc(.8 * var(--v)) 0 calc(1.2 * var(--v)); }
.acronym div { display: flex; flex-direction: column; align-items: center; min-width: 4.5em; }
.acronym b { font-size: calc(2.4 * var(--u)); font-weight: 200; color: var(--cyan); text-shadow: 0 0 16px rgba(79, 216, 255, .55); line-height: 1; }
.acronym span { font-size: calc(.7 * var(--u)); color: var(--ink-dim); margin-top: .3em; text-align: center; }
.sdg-wrap { display: grid; grid-template-columns: minmax(120px, 11em) 1fr; gap: calc(1.2 * var(--u)); align-items: center; margin: calc(.6 * var(--v)) 0; }
.sdg-wheel svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .12)); }
.sdg-list { margin: 0; padding-left: 1.6em; columns: 2; column-gap: 1.5em; font-size: calc(.72 * var(--u)); color: var(--ink-dim); line-height: 1.45; }
.sdg-list li { break-inside: avoid; padding-left: .15em; }
.sdg-list li::marker { color: var(--cyan); font-family: var(--mono); }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); gap: .45rem; margin: calc(.6 * var(--v)) 0 calc(1 * var(--v)); }
.cat { display: flex; align-items: center; gap: .6em; padding: .45em .7em; border: 1px solid rgba(120, 200, 255, .16); border-radius: calc(.4 * var(--u)); font-size: calc(.74 * var(--u)); text-decoration: none; color: var(--ink); transition: border-color .2s, background .2s; }
.cat:hover { border-color: var(--cyan); background: rgba(79, 216, 255, .09); }
.cat b { color: var(--cyan); font-family: var(--mono); font-weight: 500; min-width: 1.6em; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.person { padding: calc(.7 * var(--u)) calc(.8 * var(--u)); border: 1px solid rgba(120, 200, 255, .16); border-radius: calc(.5 * var(--u)); background: rgba(255, 255, 255, .025); }
.person b { display: block; font-size: calc(.9 * var(--u)); color: #fff; margin-bottom: .2em; }
.person span { font-size: calc(.76 * var(--u)); color: var(--ink-dim); line-height: 1.45; }
.partners { display: flex; flex-wrap: wrap; gap: .45rem; }
.partner { padding: .4em .8em; border: 1px solid var(--line); border-radius: 999px; font-size: calc(.74 * var(--u)); }
.partner small { color: var(--muted); }
.voices { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.voice { margin: 0; padding: calc(.8 * var(--u)) calc(1 * var(--u)); border-left: 2px solid var(--cyan); background: rgba(79, 216, 255, .06); font-size: calc(.86 * var(--u)); line-height: 1.5; font-style: italic; color: var(--ink); }
.voice footer { margin-top: .5em; font-size: calc(.68 * var(--u)); font-style: normal; color: var(--muted); }
.dl-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: calc(.6 * var(--v)); }
.dl { display: flex; flex-direction: column; gap: calc(.6 * var(--v)); padding: calc(1 * var(--u)); border: 1px solid var(--line); border-radius: calc(.6 * var(--u)); background: rgba(255, 255, 255, .025); }
.dl h3 { margin: 0; font-size: calc(1 * var(--u)); display: flex; gap: .45em; align-items: center; color: #fff; font-weight: 600; }
.dl h3 .ico { color: var(--cyan); }
.dl p { margin: 0; font-size: calc(.8 * var(--u)); color: var(--ink-dim); line-height: 1.45; }
.dl .meta { font-size: calc(.68 * var(--u)); color: var(--muted); font-family: var(--mono); }
.dl .ms-actions { margin-top: auto; }
.intro-video { max-width: 44em; margin: calc(.6 * var(--v)) 0; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; order: 5; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .5rem; padding: 1rem 1rem 1.5rem; font-size: .75rem; color: var(--muted); text-align: center; }
.footer a { color: var(--ink-dim); text-decoration: none; }
.footer a:hover { color: var(--cyan); }
.footer .note { flex-basis: 100%; opacity: .8; }

@media (min-width: 640px) {
  .reg-strip { grid-template-columns: repeat(3, 1fr); }
  .monitor-row { grid-template-columns: repeat(3, 1fr); }
  .monitor-holo { grid-column: auto; }
  .ms-grid { grid-template-columns: 1.15fr 1fr; }
  .team-grid, .voices, .dl-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   DESKTOP: the 16:9 stage
   ========================================================================== */
@media (min-width: 1000px) and (orientation: landscape) {
  body { overflow: hidden; }
  .bridge { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; background: #000; }
  .stage {
    --u: 1cqw; --v: 1cqh;
    display: block; min-height: 0;
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    container-type: size; overflow: hidden;
  }
  .bg, .vignette, .fx, .glass-dim { position: absolute; height: auto; }
  .vignette { background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, .55) 100%); }

  /* effects clipped to the panoramic window */
  /* Effects (satellites, storms) only on the glass of the window – the window mask cuts away ceiling, frame, chairs.
     The bridge picture (1962x802) covers the 16:9 stage: 137.61cqw wide, cropped by 18.8cqw on each side. */
  .fx {
    transition: opacity var(--dur) var(--ease);
    -webkit-mask-image: var(--window-mask); -webkit-mask-size: 137.61cqw 100cqh; -webkit-mask-position: -18.8cqw 0; -webkit-mask-repeat: no-repeat; -webkit-mask-source-type: luminance;
    mask-image: var(--window-mask); mask-size: 137.61cqw 100cqh; mask-position: -18.8cqw 0; mask-repeat: no-repeat; mask-mode: luminance;
  }
  .hurricane {
    display: block; position: absolute;
    left: calc(var(--hur-left, 46) * 1%); top: calc(var(--hur-top, 44) * 1%);
    width: calc(var(--hur-size, 6) * 1cqw); aspect-ratio: 1;
    translate: -50% -50%; mix-blend-mode: screen; opacity: .9;
    animation: spin 52s linear infinite;
  }
  .satellite { top: calc(var(--sat-top, 17) * 1%); width: calc(var(--sat-size, 5) * 1cqw); animation-duration: var(--sat-sec, 110s); }
  @keyframes drift {
    from { transform: translate(calc(var(--win-left, 0) * 1cqw - 130%), 0); }
    to   { transform: translate(calc((100 - var(--win-right, 0)) * 1cqw + 30%), 5cqh); }
  }

  .topbar { position: absolute; top: 1.6cqh; left: 1.5cqw; right: 1.5cqw; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; z-index: 6; }
  .topnav { gap: .6cqw; flex-wrap: nowrap; }

  .brand { position: absolute; top: 8cqh; left: 50%; translate: -50% 0; width: 50cqw; min-height: 0; padding: 0; z-index: 4; transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease); }
  .wordmark { font-size: 5.6cqw; }
  .subtitle { margin-top: .9cqh; font-size: 1.02cqw; }
  .tagline { margin-top: 1.1cqh; font-size: 1.08cqw; }
  .cta { margin-top: 2.6cqh; gap: .7cqw; }

  .column { position: absolute; top: 11cqh; width: 17.6cqw; height: 74cqh; display: flex; flex-direction: column; gap: 1.6cqh; padding: 0; margin: 0; z-index: 4; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .column-left { left: 1.5cqw; } .column-right { right: 1.5cqw; }
  .panel { flex: 1 1 0; }
  .panel-join .btn { font-size: .74cqw; padding: .5em .8em; }

  .monitors { position: absolute; left: 20.4cqw; right: 20.4cqw; top: 55cqh; height: 23cqh; padding: 0; margin: 0; z-index: 4; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .monitor-row { grid-template-columns: repeat(3, 1fr) 1.3fr repeat(3, 1fr); gap: .7cqw; height: 100%; }
  .monitor-holo { grid-column: auto; padding-top: 1.6cqh; }
  .holo { width: min(9.5cqw, 15cqh); }
  .m-spark { min-height: 0; }

  .register { position: absolute; left: 20.4cqw; right: 20.4cqw; top: 80cqh; height: 16cqh; padding: 0; margin: 0; gap: .7cqh; z-index: 4; }
  .register-head { flex-wrap: nowrap; gap: .8cqw; padding: 0 .2cqw; }
  .register-hint { flex-basis: auto; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .register-body { flex: 1; grid-template-columns: auto 1fr auto; gap: .4cqw; }
  .reg-arrow { display: grid; }
  .reg-strip { display: flex; gap: .6cqw; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .3cqh .15cqw; scroll-behavior: smooth; }
  .reg-strip::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 9.6cqw; scroll-snap-align: start; }

  .mainscreen { position: absolute; left: 20.4cqw; right: 20.4cqw; top: 7cqh; height: 70.5cqh; z-index: 8; }
  .ms-frame { border-radius: .8cqw; }
  .ms-grid { grid-template-columns: 1.15fr 1fr; }
  .team-grid, .voices, .dl-grid { grid-template-columns: 1fr 1fr; }

  .footer { position: absolute; left: 50%; bottom: 1cqh; translate: -50% 0; padding: 0; flex-wrap: nowrap; white-space: nowrap; font-size: .62cqw; gap: .5cqw; z-index: 3; }
  .footer .note { flex-basis: auto; margin-left: .6cqw; }

  /* focus mode: everything else sinks away, the main screen takes the window */
  .focus .column { transform: translateY(42cqh); opacity: 0; pointer-events: none; }
  .focus .monitors { transform: translateY(32cqh); opacity: 0; pointer-events: none; }
  .focus .brand { opacity: 0; translate: -50% -4cqh; pointer-events: none; }
  .focus .fx { opacity: .55; }
}

/* compact desktop stages: drop panel artwork so text keeps room */
@container (max-width: 1400px) {
  .panel-body { grid-template-columns: 1fr; }
  .panel-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .satellite { display: none; }
}

/* ---------- Fit fixes ---------- */
.m-label, .m-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; }
.m-label { letter-spacing: .08em; font-size: calc(.62 * var(--u)); }
.panel-body > p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.panel-join > p { font-size: calc(.8 * var(--u)); }
.join-actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.5 * var(--v)) calc(.4 * var(--u)); }
.join-actions .btn:first-child { grid-column: 1 / -1; }
.join-actions .btn { font-size: calc(.72 * var(--u)); padding: .5em .6em; }
.chip-title { -webkit-line-clamp: 3; }
.hurricane { opacity: .78; }
@media (min-width: 1000px) and (orientation: landscape) {
  .panel-join .btn { font-size: .7cqw; }
  .panel h2 { font-size: .86cqw; }
}
/* wordmark must never wrap on narrow screens */
.wordmark { white-space: nowrap; font-size: clamp(2.1rem, 11.5vw, 5.4rem); letter-spacing: .34em; text-indent: .34em; }
@media (min-width: 1000px) and (orientation: landscape) { .wordmark { font-size: 5.6cqw; letter-spacing: .42em; text-indent: .42em; } }
.tagline { color: #e6faff; font-weight: 400; }

/* ---------- Readability: subtitle & tagline on a dark glass backdrop ---------- */
.subtitle, .tagline {
  display: inline-block; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .8);
  background: rgba(3, 9, 22, .72); border: 1px solid rgba(120, 200, 255, .22);
  border-radius: .55em; padding: .42em 1em; line-height: 1.35;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(0, 0, 0, .45);
}
.subtitle { font-weight: 600; }
.tagline { font-weight: 500; letter-spacing: .02em; }
@media (min-width: 1000px) and (orientation: landscape) {
  .subtitle { margin-top: 1.4cqh; }
  .tagline { margin-top: .9cqh; }
  .cta { margin-top: 2.2cqh; }
}
/* long German monitor labels: break inside the word instead of cutting it */
.m-label { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }

/* ---------- Take part & collect points ---------- */
.play-grid { display: grid; grid-template-columns: 1fr; gap: calc(1.2 * var(--u)); align-items: start; }
.play-map { position: relative; aspect-ratio: 3 / 2; border-radius: calc(.6 * var(--u)); overflow: hidden; background: #04101f url("../img/holo_map.jpg") center / cover no-repeat; border: 1px solid var(--line-strong); box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), 0 0 calc(1.5 * var(--u)) rgba(79, 216, 255, .22); }
.play-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.play-maphint { margin-top: calc(.6 * var(--v)); }
.hotspot { position: absolute; translate: -50% -50%; width: 11%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--cyan); background: rgba(4, 12, 26, .6); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 18px rgba(79, 216, 255, .55); transition: transform .2s, box-shadow .2s; z-index: 1; }
.hotspot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(79, 216, 255, .6); animation: ping 2.4s ease-out infinite; }
.hotspot:hover, .hotspot:focus-visible { transform: scale(1.1); box-shadow: 0 0 28px rgba(79, 216, 255, .85); z-index: 2; }
.hotspot .ico { width: 58%; height: 58%; stroke-width: 1.5; }
.hs-hurricane .ico { animation: spin-t 7s linear infinite; }
.hs-aliens { animation: bob 3.2s ease-in-out infinite; }
.hs-rainforest .ico { animation: shake 2.6s ease-in-out infinite; }
.hs-ice .ico { animation: bob 4s ease-in-out infinite; }
.hotspot.is-done { border-color: var(--teal); box-shadow: 0 0 18px rgba(46, 230, 197, .5); }
.hotspot.is-done::before { animation: none; border-color: rgba(46, 230, 197, .5); }
.hs-check { position: absolute; top: -6%; right: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--teal); color: #04202a; display: grid; place-items: center; }
.hs-check .ico { width: 70%; height: 70%; stroke-width: 2.4; }
.hs-label { position: absolute; top: 108%; left: 50%; translate: -50% 0; white-space: nowrap; font-size: calc(.66 * var(--u)); letter-spacing: .06em; background: rgba(4, 12, 26, .78); border: 1px solid var(--line); border-radius: 999px; padding: .15em .6em; color: var(--ink); pointer-events: none; }
@keyframes ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes bob { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 6px); } }
.hs-aliens { animation-name: bob-hs; }
@keyframes bob-hs { 0%, 100% { translate: -50% -50%; } 50% { translate: -50% calc(-50% - 7px); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-8deg); } 55% { transform: rotate(8deg); } }
.score-badge { display: inline-flex; align-items: center; gap: .6em; padding: .45em .9em; border-radius: calc(.5 * var(--u)); border: 1px solid var(--line-strong); background: linear-gradient(90deg, rgba(79, 216, 255, .18), rgba(46, 230, 197, .12)); color: #fff; }
.score-badge .ico { color: var(--amber); width: 1.5em; height: 1.5em; }
.score-badge span { font-size: calc(.95 * var(--u)); }
.score-badge b { font-size: 1.35em; font-weight: 600; }
.score-badge small { font-size: calc(.62 * var(--u)); color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin-left: .3em; }
.play-intro { font-size: calc(.86 * var(--u)); line-height: 1.5; color: var(--ink-dim); margin: calc(.9 * var(--v)) 0; }
.play-card { padding: calc(.9 * var(--u)) calc(1 * var(--u)); border: 1px solid var(--line); border-radius: calc(.6 * var(--u)); background: rgba(255, 255, 255, .03); margin-top: calc(.9 * var(--v)); }
.play-card h3 { margin: 0 0 .3em; font-size: calc(1 * var(--u)); color: #fff; font-weight: 600; display: flex; gap: .45em; align-items: center; }
.play-card h3 .ico { color: var(--cyan); }
.play-card p { margin: 0 0 .5em; font-size: calc(.8 * var(--u)); color: var(--ink-dim); line-height: 1.5; }
.play-card .ms-actions { margin-top: calc(.5 * var(--v)); align-items: center; }
.play-bet { border-color: rgba(255, 180, 84, .4); background: linear-gradient(180deg, rgba(255, 180, 84, .08), rgba(255, 255, 255, .02)); }
.play-bet h3 { font-size: calc(1.3 * var(--u)); font-weight: 300; letter-spacing: .04em; }
.play-progress { font-family: var(--mono); font-size: calc(.72 * var(--u)); color: var(--muted); }
.linklike { background: none; border: 0; padding: 0; color: var(--cyan); cursor: pointer; font: inherit; text-decoration: underline; }
.station-head { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; margin-bottom: calc(1 * var(--v)); }
.station-head > .ico { width: 1.8em; height: 1.8em; color: var(--cyan); }
.station-head h3 { margin: 0; font-size: calc(1.2 * var(--u)); font-weight: 500; color: #fff; flex: 1; }
.play-question { font-size: calc(1.05 * var(--u)); line-height: 1.5; color: #fff; margin: 0 0 calc(1 * var(--v)); }
.answers { display: grid; gap: calc(.5 * var(--v)); }
.answer { display: grid; grid-template-columns: 2em 1fr; gap: .7em; align-items: center; text-align: left; padding: .7em .9em; border: 1px solid var(--line); border-radius: calc(.5 * var(--u)); background: rgba(255, 255, 255, .03); color: var(--ink); cursor: pointer; font-size: calc(.88 * var(--u)); line-height: 1.4; transition: border-color .2s, background .2s, transform .2s; }
.answer:hover, .answer:focus-visible { border-color: var(--cyan); background: rgba(79, 216, 255, .1); transform: translateX(3px); }
.answer-num { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--cyan); font-family: var(--mono); font-size: .85em; }
.play-feedback { display: flex; gap: .6em; align-items: flex-start; padding: .9em 1em; border-radius: calc(.5 * var(--u)); font-size: calc(.95 * var(--u)); line-height: 1.5; margin: 0 0 calc(.8 * var(--v)); }
.play-feedback .ico { flex: none; width: 1.4em; height: 1.4em; margin-top: .1em; }
.play-feedback.is-right { background: rgba(46, 230, 197, .12); border: 1px solid rgba(46, 230, 197, .5); color: #fff; }
.play-feedback.is-right .ico { color: var(--teal); }
.play-feedback.is-wrong { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .45); color: #fff; }
.play-quiz .station-head, .play-station .station-head { justify-content: space-between; }
@media (min-width: 900px) { .play-grid { grid-template-columns: 1.45fr 1fr; } }
@media (min-width: 1000px) and (orientation: landscape) { .play-grid { grid-template-columns: 1.45fr 1fr; } .hs-label { font-size: .62cqw; } }
.hotspot { width: 9.5%; }

/* panel corner: arrow only */
.panel-more { width: 1.7em; height: 1.7em; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--cyan); background: rgba(79, 216, 255, .08); transition: background .2s, transform .2s; }
.panel-more::after { content: none; }
.panel-more .ico { width: 1em; height: 1em; }
.panel:hover .panel-more, .panel:focus-visible .panel-more { background: rgba(79, 216, 255, .25); transform: translateX(2px); }

/* ---------- several satellites ---------- */
.satellite, .sat-img { animation-delay: var(--sat-delay, 0s); }
.satellite.is-reverse, .sat-img.is-reverse { animation-direction: reverse; }
.sat-img { position: absolute; top: calc(var(--sat-top, 20) * 1%); left: 0; width: clamp(40px, calc(var(--sat-size, 5) * 2.2vw), 120px); animation: drift var(--sat-sec, 120s) linear infinite; filter: drop-shadow(0 0 6px rgba(160, 200, 255, .3)); pointer-events: none; }
.sat-img img { width: 100%; height: auto; display: block; transform: rotate(var(--sat-tilt, 0deg)); animation: sat-wobble 16s ease-in-out infinite alternate; }
.sat-img.is-spin img { animation: sat-spin var(--sat-spin, 60s) linear infinite; }
@keyframes sat-wobble { from { transform: rotate(calc(var(--sat-tilt, 0deg) - 3deg)); } to { transform: rotate(calc(var(--sat-tilt, 0deg) + 3deg)); } }
@keyframes sat-spin { to { transform: rotate(360deg); } }
@media (min-width: 1000px) and (orientation: landscape) {
  .sat-img { width: calc(var(--sat-size, 5) * 1cqw); animation-duration: var(--sat-sec, 120s); }
  .satellite { top: calc(var(--sat-top, 40) * 1%); }
}
@media (prefers-reduced-motion: reduce) { .sat-img { display: none; } }

/* ---------- Live Earth (js/earth.js): canvas over the painted Earth, storm symbols pinned to the globe ---------- */
.bg { overflow: hidden; }
.earth-canvas { position: absolute; display: block; opacity: 0; transition: opacity 2.4s ease; pointer-events: none; }
.earth-live .earth-canvas { opacity: 1; }
html:not(.earth-off) .fx .hurricane { visibility: hidden; animation: none; }  /* painted hurricane only with the painted Earth */
.storm { position: absolute; left: 0; top: 0; width: 100px; height: 100px; opacity: 0; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity; }
.storm-svg { display: block; width: 100%; height: 100%; animation: spin 52s linear infinite; }
/* Mobile Firefox (class set by js/earth.js): the Earth is a still image, and blur/blend layers are off – a live
   canvas underneath backdrop-filter panels flickers there. Panels get a slightly denser background instead. */
html.earth-lite * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.earth-lite .storm, html.earth-lite .fx { display: none; }
html.earth-lite .earth-canvas { transition-duration: .8s; }

/* ---------- Live pill (top bar) ---------- */
.live-pill {
  display: inline-flex; align-items: center; gap: .5em; max-width: 100%;
  padding: .5em .95em; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(6, 16, 32, .5); color: var(--ink-dim); cursor: pointer;
  font-size: calc(.68 * var(--u)); letter-spacing: .05em; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s, background .2s;
}
.live-pill:hover, .live-pill:focus-visible { border-color: var(--cyan); color: #fff; background: rgba(79, 216, 255, .12); }
.live-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.live-pill b { color: #fff; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .92em; }
.live-fires { color: #ffc2a3; overflow: hidden; text-overflow: ellipsis; }
.live-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 8px #ff6a3d; animation: live-blink 2.2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .35; } }
@media (max-width: 640px) { .live-fires { display: none; } }

/* ---------- Monitors: trend charts always complete; the "Show trends" button under the left panels toggles the six monitors ---------- */
.trend-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; flex: none;
  padding: .55em .95em; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(6, 16, 32, .62); color: var(--ink-dim); cursor: pointer;
  font-size: calc(.64 * var(--u)); letter-spacing: .1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s, color .2s, background .2s;
}
.trend-toggle:hover, .trend-toggle:focus-visible { border-color: var(--cyan); color: #fff; background: rgba(79, 216, 255, .14); }
.trend-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.trend-toggle .ico { color: var(--cyan); }
.trend-toggle[aria-expanded="true"] { border-color: rgba(79, 216, 255, .55); color: #fff; }
/* trends hidden: the six monitors disappear, the logo in the middle stays */
.monitor:not(.monitor-holo) { transition: border-color .25s, box-shadow .25s, opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.monitors.trends-hidden .monitor:not(.monitor-holo) { display: none; }
@media (min-width: 1000px) and (orientation: landscape) {
  .monitors { gap: 0; }
  .trend-toggle { font-size: .62cqw; padding: .55em .9em; }
  .monitors.trends-hidden .monitor:not(.monitor-holo) { display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.94); }
  .monitors.trends-hidden .monitor-holo { grid-column: 4; }
}

/* ---------- Main screen = projection on the panoramic window (HUD on the glass, Earth shimmers through) ---------- */
.ms-frame {
  background: linear-gradient(180deg, rgba(4, 14, 32, .56), rgba(3, 10, 24, .68));
  border: 1px solid rgba(120, 200, 255, .3); border-radius: calc(.25 * var(--u));
  box-shadow: 0 0 calc(2.4 * var(--u)) rgba(79, 216, 255, .16), inset 0 0 calc(4 * var(--u)) rgba(79, 216, 255, .07);
  -webkit-backdrop-filter: blur(6px) saturate(1.15); backdrop-filter: blur(6px) saturate(1.15);
}
.ms-frame::before { opacity: .7; }
.ms-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  --c: rgba(110, 225, 255, .95); --l: calc(1.8 * var(--u)); --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l) no-repeat,
    repeating-linear-gradient(0deg, rgba(170, 225, 255, .035) 0 1px, transparent 1px 3px);
  filter: drop-shadow(0 0 4px rgba(79, 216, 255, .6));
}
.ms-head, .ms-body, .ms-foot { position: relative; z-index: 1; }
.ms-head h2, .ms-desc, .blocks p, .blocks li { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }
.mainscreen .tool, .mainscreen .person, .mainscreen .dl, .mainscreen .play-card:not(.play-bet), .mainscreen .cat, .mainscreen .answer { background: rgba(3, 12, 28, .55); }
.mainscreen .voice { background: rgba(4, 18, 38, .6); }
.mainscreen.is-open .ms-frame { animation: hud-on .7s steps(1, end) both; }
@keyframes hud-on { 0% { opacity: .35; } 12% { opacity: .9; } 20% { opacity: .5; } 32%, 100% { opacity: 1; } }

@media (min-width: 1000px) and (orientation: landscape) {
  /* The whole glass of the panoramic window becomes the screen: no frame, no box. The glass itself darkens
     (.glass-dim, cut to the window shape by img/earth/window-mask.png) and the content sits directly on it. */
  .glass-dim {
    inset: 0; z-index: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(5, 18, 40, .66), rgba(2, 8, 20, .82) 75%);
    -webkit-mask-image: var(--window-mask); -webkit-mask-size: cover; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-source-type: luminance;
    mask-image: var(--window-mask); mask-size: cover; mask-position: center; mask-repeat: no-repeat; mask-mode: luminance;
    transition: opacity .55s var(--ease);
  }
  .focus .glass-dim { opacity: 1; }
  .mainscreen {
    left: 5cqw; right: 5cqw; top: 11cqh; height: 46.5cqh;
    translate: none; clip-path: inset(50% -3cqw 50% -3cqw);
    transition: opacity .45s var(--ease), clip-path .55s var(--ease), visibility 0s linear .55s;
    /* the projection stays on the glass: frame above, chairs and console in front of it (mask aligned to the stage) */
    -webkit-mask-image: var(--window-mask); -webkit-mask-size: 137.61cqw 100cqh; -webkit-mask-position: -23.8cqw -11cqh; -webkit-mask-repeat: no-repeat; -webkit-mask-source-type: luminance;
    mask-image: var(--window-mask); mask-size: 137.61cqw 100cqh; mask-position: -23.8cqw -11cqh; mask-repeat: no-repeat; mask-mode: luminance;
  }
  .mainscreen.is-open { clip-path: inset(-3cqw -3cqw -3cqw -3cqw); transition-delay: 0s; }
  .ms-frame { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible; }
  .ms-frame::after { display: none; }
  /* soft dark backing behind the text – blurred, so no edge of a box is visible */
  .ms-frame::before {
    inset: -1.2cqw -1.5cqw -.8cqw; height: auto; z-index: 0; border-radius: 3cqw;
    background: rgba(2, 8, 20, .5); filter: blur(1.8cqw);
  }
  .ms-head { padding: .1cqw .4cqw .25cqw; }
  .ms-body { padding-left: .4cqw; padding-right: .4cqw; -webkit-mask-image: linear-gradient(#000 calc(100% - 1.5cqh), transparent); mask-image: linear-gradient(#000 calc(100% - 1.5cqh), transparent); }
  .ms-foot { padding: .25cqw .4cqw .3cqw; margin: 0 12.5cqw .8cqh; border-top: 0; }  /* between the chairs, a little above the console */
  .ms-head { padding: .9cqw 1.4cqw .4cqw; }
  .ms-head h2 { font-size: 1.5cqw; }
  .ms-sub { font-size: .85cqw; margin-top: .3cqh; }
  .ms-foot { padding: .35cqw 1.4cqw .55cqw; }
  .ms-foot .btn { padding: .4em .9em; }
  .ms-grid { grid-template-columns: minmax(0, 25cqw) minmax(0, 1fr); gap: 1.6cqw; }
  .play-grid { grid-template-columns: 52cqh minmax(0, 1fr); gap: 1.6cqw; }
  .focus .fx { opacity: .4; }
}

/* ---------- Earth info screen ---------- */
.earth-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: calc(.6 * var(--u)); margin: calc(.4 * var(--v)) 0 calc(.6 * var(--v)); }
.estat { padding: calc(.6 * var(--u)) calc(.8 * var(--u)); border: 1px solid var(--line); border-radius: calc(.4 * var(--u)); background: rgba(3, 12, 28, .55); display: flex; flex-direction: column; gap: .2em; }
.estat b { font-size: calc(1.35 * var(--u)); font-weight: 300; color: #fff; font-variant-numeric: tabular-nums; }
.estat:first-child b { color: #ffb08a; }
.estat span { font-size: calc(.62 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.earth-layers { margin: 0; padding-left: 1.2em; }
.earth-layers li { font-size: calc(.8 * var(--u)); color: var(--ink-dim); line-height: 1.5; margin: .2em 0; }
.earth-layers li::marker { color: var(--cyan); }