/* STRATA :: DRIFT (/stratadrift) — procedural isometric city (WebGL2).
   Unlike the other pages this one keeps its own look: a palette-driven
   gradient background, Barlow Condensed HUD and glassy buttons, all themed
   per-city through the --ink / --accent / --panel / --line custom
   properties that stratadrift.js rewrites on every newCity(). Only the
   site top-bar is shared. Every rule is scoped under .mega-page / .mega so
   the global style.css (h1 pinstripes, p margins) doesn't bleed in either
   direction. The page skips the site's context.js wiki menu: it behaves like
   an app, with no text selection and no right-click menu (stratadrift.js). */

.mega-page {
  --ink: #f4eefc;
  --panel: rgba(23, 22, 43, .55);
  --line: rgba(244, 238, 252, .28);
  --accent: #45f0ff;
  height: 100%;
  overflow: hidden;
  /* Initial colour before the first city paints; newCity() replaces it
     with an inline gradient from the active palette. */
  background: #17162b;
  color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  transition: background .6s ease;
  /* The canvas owns drag / pinch / wheel — kill browser scroll, zoom and
     callouts, same as /zone. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  /* an app, not a document: nothing to select, no tap flashes, no image drags */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mega-page ::selection { background: transparent; color: inherit; }
.mega-page img,
.mega-page canvas { -webkit-user-drag: none; }

/* The city has its own vignette + VHS pass in the shader, so the site's
   green CRT scanlines and vignette would just double up. */
.mega-page::before,
.mega-page::after { display: none; }

/* the shared top-bar, back to how it looks on the other pages: style.css sizes it
   from the body's 22px (this page's 16px shrank it); its scanlines (style.css) are
   the only ones here, where they don't fight the city's own tube. */
.mega-page .top-bar {
  font-size: 18.7px;
  line-height: 1.2;
}

/* Layout: under the top-bar, one centred column holding the city view and the HUD
   panel. JS (layout()) sets --side to the largest square that fits above the HUD, and
   both the stage and the HUD are sized from it. Same composition on desktop and mobile. */
.mega {
  position: fixed;
  inset: var(--top, 33px) 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.mega .stagewrap { flex: none; }

/* Fullscreen (#fs) and the Home-Screen web-app shell (same as /zone): the top-bar
   goes and the view takes its room. In the shell the status bar is translucent and
   sits over the page, so the top inset keeps clear of it. .ios-standalone is set by
   stratadrift.js from navigator.standalone, for iOS shells where the media query
   doesn't match. Prefixed rule kept apart: an unknown selector drops a whole list. */
:fullscreen .mega-page .top-bar { display: none; }
:-webkit-full-screen .mega-page .top-bar { display: none; }
:fullscreen .mega { --top: 0px; }
:-webkit-full-screen .mega { --top: 0px; }
@media (display-mode: standalone) {
  .mega-page .top-bar { display: none; }
  .mega { --top: env(safe-area-inset-top, 0px); }
}
html.ios-standalone .mega-page .top-bar { display: none; }
html.ios-standalone .mega { --top: env(safe-area-inset-top, 0px); }
.mega .stage {
  position: relative;
  width: var(--side, 300px);
  height: var(--side, 300px);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .12);
}
/* targeting-frame corners */
.mega .stage::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) top left / 18px 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 18px,
    linear-gradient(var(--c), var(--c)) top right / 18px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 18px,
    linear-gradient(var(--c), var(--c)) bottom left / 18px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 18px,
    linear-gradient(var(--c), var(--c)) bottom right / 18px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 18px;
  background-repeat: no-repeat;
}
.mega__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.mega__canvas:active { cursor: grabbing; }
/* the city canvas' wrapper: only there to carry the /gb filter (see the end of the file) */
.mega__view { position: absolute; inset: 0; }
.mega .gbdefs { position: absolute; width: 0; height: 0; }
.mega__canvas.recording { object-fit: contain; }

.mega .vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .22) 100%);
}
/* ad break (playAd()): covers the view, above the feed and the mailbox; the HUD goes inert */
.mega .interlude { position: absolute; inset: 0; z-index: 3; background: #000; cursor: default; }
.mega .interlude[hidden] { display: none; }
/* the dreamy break draws its liquid in the city canvas underneath: only its text is up here */
.mega .interlude--dream { background: none; }
.mega .interlude canvas { display: block; width: 100%; height: 100%; }
body.interlude-on .mega .hud { pointer-events: none; }
/* the fullscreen toggle stays reachable through a break (the welcome one runs 20s) */
body.interlude-on .mega .fs { z-index: 4; }
/* consciousness programmes: the stray text over the trip (tripText()), under the breaks */
.mega .triptext { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.mega .triptext[hidden] { display: none; }
/* photo flash (takePhoto()): restarts on each .snap */
.mega .shutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
.mega .shutter.snap { animation: shutter .45s ease-out; }
@keyframes shutter { from { opacity: .85; } to { opacity: 0; } }
.mega .stage__tag {
  position: absolute;
  top: 8px;
  pointer-events: none;
  font-family: vtFont, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 4px rgba(0, 0, 0, .8);
  opacity: .75;
}
.mega .stage__tag--tr { right: 10px; display: flex; align-items: center; gap: 6px; }
.mega .stage__tag--tr b { font-weight: normal; }
.mega .stage__tag--tr i { width: 7px; height: 7px; border-radius: 50%; background: #ff3355; box-shadow: 0 0 6px #ff3355; animation: hud-blink 1.2s steps(1) infinite; }
/* fullscreen toggle (#fs), the LIVE tag's twin in the other corner */
.mega .fs {
  left: 4px;
  top: 4px;
  z-index: 1;
  padding: 4px 6px;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}
.mega .fs:hover, .mega .fs:focus-visible { opacity: 1; }
.mega .fs[hidden] { display: none; }
.mega .fs svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.mega .fs .fs__off,
.mega .fs.on .fs__on { display: none; }
.mega .fs.on .fs__off { display: inline; }
@keyframes hud-blink { 50% { opacity: 0; } }

/* street view: the snapped spot while choosing; a targeting ring centred on the point */
.mega .reticle {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}
.mega .reticle i {
  position: absolute;
  left: -13px;
  top: -13px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent), inset 0 0 6px var(--accent);
  animation: reticle-pulse 1.1s ease-in-out infinite;
}
.mega .reticle i::before,
.mega .reticle i::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
.mega .reticle i::before { left: 50%; top: -9px; bottom: -9px; width: 2px; margin-left: -1px; }
.mega .reticle i::after { top: 50%; left: -9px; right: -9px; height: 2px; margin-top: -1px; }
@keyframes reticle-pulse { 50% { transform: scale(.78); } }
.street-pick .mega__canvas { cursor: crosshair; }
/* street view: a VHS tracking glitch masks the jump to a new spot */
.mega__canvas.jump { animation: street-jump .35s steps(6) 1; }
@keyframes street-jump {
  0% { filter: brightness(1.8) contrast(1.4); transform: translateX(-6px) skewX(4deg); }
  35% { filter: brightness(.4) hue-rotate(40deg); transform: translateX(5px); }
  70% { filter: brightness(1.3) saturate(1.6); transform: translateX(-2px) skewX(-2deg); }
  100% { filter: none; transform: none; }
}

/* HUD panel */
.mega .hud {
  flex: none;
  width: max(var(--side, 100%), min(100%, 340px));
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 12px 10px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
    var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  container-type: inline-size;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mega .hud__strip,
.mega .hud__lbl,
.mega .hud__data dt,
.mega .hud__data dd,
.mega .hint {
  font-family: vtFont, "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mega .hud__strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -12px;
  padding: 2px 12px;
  font-size: 13px;
  color: #000;
  background: var(--accent);
  white-space: nowrap;
  overflow: hidden;
}
.mega .hud__main { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; min-width: 0; }
.mega .ident { min-width: 0; }
.mega .hud__lbl { display: block; font-size: 13px; color: var(--accent); opacity: .9; }

/* Reset style.css's pinstriped title-bar h1. */
.mega .ident h1 {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  /* long names wrap to a second line rather than being cut */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  font-weight: 600;
  font-size: clamp(20px, calc(var(--side, 500px) * .055), 34px);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-shadow: -.03em 0 rgba(255, 30, 90, .35), .03em 0 rgba(0, 220, 255, .35);
}
.mega .ident h1::before,
.mega .ident h1::after { content: none; }

.mega .hud__right { display: flex; gap: 6px; flex: none; }
.mega .hud__data { display: flex; gap: 6px; margin: 0; }
.mega .hud__data div { border: 1px solid var(--line); padding: 3px 7px 4px; min-width: 56px; }
.mega .hud__data dt { font-size: 12px; opacity: .6; }
.mega .hud__data dd { margin: 0; font-size: 19px; line-height: 1; color: var(--accent); }

.mega .hud__toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 3px 8px 4px;
  min-width: 62px;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  font-family: vtFont, "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mega .hud__toggle .dt { font-size: 12px; opacity: .6; display: flex; gap: 5px; align-items: center; }
.mega .hud__toggle kbd { font: inherit; padding: 0 3px; color: #000; background: var(--ink); }
.mega .hud__toggle .dd { font-size: 19px; line-height: 1; color: var(--ink); opacity: .7; }
.mega .hud__toggle--mail.has-new[aria-pressed="false"] .dd { color: var(--accent); opacity: 1; animation: hud-blink 1.6s steps(1) infinite; }
.mega .hud__toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #000; }
.mega .hud__toggle[aria-pressed="true"] .dd { color: #000; opacity: 1; }
.mega .hud__toggle[aria-pressed="true"] .dt { opacity: .75; }
.mega .hud__toggle[aria-pressed="true"] kbd { background: #000; color: var(--accent); }

.mega .flybar { height: 3px; background: var(--line); }
.mega .flybar span { display: block; height: 100%; width: 0; background: var(--accent); box-shadow: 0 0 6px var(--accent); }

.mega .radio { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.mega .radio__lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .6;
  white-space: nowrap;
}
.mega .radio__lbl kbd { font: inherit; padding: 0 3px; color: #000; background: var(--ink); }
.mega .radio__btn {
  flex: none;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 0;
  color: var(--accent);
}
.mega .radio__dial {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  font-family: vtFont, "Courier New", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mega .radio__fq { flex: none; font-size: 14px; opacity: .7; }
.mega .radio__fq b { font-weight: normal; font-size: 19px; color: var(--accent); text-shadow: 0 0 .4em var(--accent); }
.mega .radio__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.mega .radio__eq { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.mega .radio__eq i { width: 3px; height: 20%; background: var(--accent); }
.mega .radio.on .radio__eq i { animation: radio-eq .9s steps(5) infinite alternate; }
.mega .radio.on .radio__eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.mega .radio.on .radio__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.mega .radio.on .radio__eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
.mega .radio.on .radio__eq i:nth-child(5) { animation-duration: 1.3s; animation-delay: -.7s; }
@keyframes radio-eq { from { height: 15%; } to { height: 100%; } }

.mega .controls { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 8px; }
.mega .controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 19px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
}
.mega .controls button span { overflow: hidden; text-overflow: ellipsis; }
.mega .controls kbd {
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 2px 5px;
  color: #000;
  background: var(--ink);
  opacity: .85;
}
.mega .controls button.primary kbd { background: var(--accent); }
/* Fly over, Photo and Rotate are icons (plus their key), not labels; the plane
   turns into a stop square during a fly-over (setFlyLabel()) */
.mega .controls .ctl__icon { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mega .controls .ctl__icon--stop { display: none; fill: currentColor; }
.mega #fly.on .ctl__icon--fly { display: none; }
.mega #fly.on .ctl__icon--stop { display: block; }
.mega .hint { margin: 0; font-size: 13px; opacity: .5; }
.mega .hint__keys button { padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega .hint__keys button:hover,
.mega .hint__keys button:focus-visible { color: var(--accent); }
.mega .hint__keys kbd { font: inherit; padding: 0 3px; color: #000; background: var(--ink); }
/* no keyboard to speak of on touch screens */
@media (hover: none) { .mega .hint__keys { display: none; } }

/* Keyboard shortcuts (?): one terminal over everything, the current context's section first and lit */
.mega .keys { position: fixed; inset: 0; z-index: 46; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: rgba(4, 4, 10, .7); }
.mega .keys[hidden] { display: none; }
.mega .keys__box {
  width: min(520px, 100%);
  background: rgba(5, 6, 10, .95);
  border: 1px solid var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink);
  font-family: vtFont, "Courier New", monospace;
  font-size: 16px;
  line-height: 1.25;
  animation: portal-in .28s steps(4);
}
.mega .keys .feed__head { align-items: center; }
.mega .keys__x { padding: 0 2px; font: inherit; letter-spacing: .08em; text-transform: uppercase; color: inherit; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega .keys__body { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 12px; }
.mega .keys section { opacity: .55; }
.mega .keys section.on { order: -1; opacity: 1; }
.mega .keys h3 { margin: 6px 0 4px; font: inherit; text-decoration: none; font-size: .85em; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.mega .keys section.on h3::after { content: " :: now"; opacity: .6; }
.mega .keys dl { display: grid; grid-template-columns: 7em 1fr; gap: 3px 14px; margin: 0; }
.mega .keys dt { white-space: nowrap; }
.mega .keys dd { margin: 0; }
.mega .keys kbd { display: inline-block; min-width: 1.3em; margin-right: 2px; padding: 0 4px; font: inherit; text-align: center; color: #000; background: var(--ink); }
.mega .keys section.on kbd { background: var(--accent); }

/* /vhs export progress (showRec()): a Portalis terminal like the keys panel, a blinking REC
   in its head, a segmented tape-counter bar and an Eject button */
.mega .rec {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 4, 10, .7);
}
.mega .rec[hidden] { display: none; }
.mega .rec__box {
  position: relative;
  width: min(420px, 100%);
  overflow: hidden;
  background: rgba(5, 6, 10, .94);
  border: 1px solid var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink);
  font-family: vtFont, "Courier New", monospace;
  font-size: 18px;
  line-height: 1.2;
  animation: portal-in .28s steps(4);
}
.mega .rec__dot { animation: hud-blink 1.2s steps(1) infinite; }
.mega .rec__box p { position: relative; z-index: 2; margin: 0; padding: 12px 14px 10px; }
.mega .rec__box p.rec__note { padding: 0 14px 10px; font-size: 15px; opacity: .6; }
.mega .rec__bar { position: relative; z-index: 2; height: 16px; margin: 0 14px 12px; padding: 2px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.mega .rec__bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 10px); }
.mega #recCancel {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 14px 14px auto;
  padding: 2px 10px;
  font: inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega #recCancel::before { content: "[ ⏏ "; color: var(--accent); }
.mega #recCancel::after { content: " ]"; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .mega .rec__box, .mega .rec__dot { animation: none; } }
/* the keep panel (saveFile on a phone): the rec panel's box, over it and over the counter */
.mega .keep { z-index: 47; }
.mega .keep__acts { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; margin: 0 14px 14px; }
.mega .keep__acts button { padding: 2px 10px; font: inherit; letter-spacing: .1em; text-transform: uppercase; border-radius: 0; backdrop-filter: none; }
.mega .keep__acts button::before { content: "[ "; color: var(--accent); }
.mega .keep__acts button::after { content: " ]"; color: var(--accent); }
.mega .keep__go { color: var(--accent); border-color: var(--accent); }

.mega button {
  font: inherit;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s, transform .1s, opacity .5s;
}
.mega button:hover { border-color: var(--ink); }
.mega button:active { transform: translateY(1px); }
.mega button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mega button.primary { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

.mega-page .err {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  font-size: 22px;
}

/* readouts give way to the city name as the HUD (= the square) narrows */
@container (max-width: 640px) { .mega .hud__data div:nth-child(1) { display: none; } }
/* heading outlasts MAG: it is the one readout street view uses */
@container (max-width: 440px) { .mega .hud__data div:nth-child(3) { display: none; } }
/* narrower still, the readouts and toggles would squeeze the name to a few letters:
   the name gets the full width and they share a row of their own under it */
@container (max-width: 520px) {
  .mega .hud__main { flex-wrap: wrap; gap: 8px; }
  .mega .ident { flex: 1 1 100%; }
  .mega .hud__right { flex: 1 1 100%; }
  .mega .hud__right > .hud__toggle,
  .mega .hud__data,
  .mega .hud__data div { flex: 1 1 0; }
}

@media (max-width: 560px) {
  .mega .hud__data div { min-width: 0; padding: 3px 6px 4px; }
  .mega .controls { grid-template-columns: 1fr 1fr 1fr 2fr; gap: 6px; }
  .mega .controls button { font-size: 17px; gap: 6px; padding: 8px 6px; letter-spacing: .03em; }
  .mega .controls kbd,
  .mega .hud__toggle kbd,
  .mega .radio__lbl { display: none; }
  .mega .hud__toggle { min-width: 0; padding: 3px 6px 4px; }
}

/* City feed: a news / markets terminal laid over the square view. */
.mega .feed {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #05060a;
  color: var(--ink);
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(14px, calc(var(--side, 500px) * .034), 19px);
  line-height: 1.15;
  --up: #39ff88;
  --dn: #ff3f5a;
}
.mega .feed[hidden] { display: none; }
.mega .feed__head,
.mega .feed__tick { flex: none; white-space: nowrap; overflow: hidden; }
.mega .feed__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 10px;
  color: #000;
  background: var(--accent);
  letter-spacing: .06em;
}
.mega .feed__head b { font-weight: normal; }
.mega .feed__body { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.mega .feed__roll { padding: 8px 10px 0; will-change: transform; }
.mega .fi { display: block; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.mega .fi > span { display: block; }
.mega .fi .k { font-size: .8em; letter-spacing: .08em; color: var(--accent); opacity: .85; }
.mega .fi .up { color: var(--up); }
.mega .fi .dn { color: var(--dn); }
.mega .fi--news { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.mega .fi--news .t { color: var(--accent); }
.mega .fi--news .h { text-transform: uppercase; }
/* Loyalty Contract: the feed's reports on you */
.mega .fi--watch .t,
.mega .fi--watch .h,
.mega .fi--watch .k,
.mega .feed__tickin .you { color: #ffd166; }
.mega .fi--wx .wx { font-size: 1.35em; color: #ffd166; }
.mega .fi--wx .row { opacity: .8; }
.mega .meter { display: inline-block; vertical-align: middle; width: 40%; height: .5em; border: 1px solid currentColor; }
.mega .meter i { display: block; height: 100%; background: #ffd166; }
.mega .fi--chart .px { font-size: 1.2em; }
.mega .fi svg { display: block; width: 100%; height: 3.2em; margin-top: 4px; overflow: visible; }
.mega .fi svg polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mega .fi svg polyline.area { fill: color-mix(in srgb, var(--accent) 14%, transparent); stroke: none; }
.mega .fi--spot { text-align: center; padding: 10px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mega .fi--spot .brand { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 2em; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); text-shadow: 0 0 .3em var(--accent); }
.mega .fi--spot .slogan { margin-top: 2px; }
/* Portalis's Terms of Iteration: a clause, in the fine print's colours */
.mega .fi--terms { padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); }
.mega .fi--terms .h { margin: 3px 0; }
.mega .fi--terms .f { font-size: .75em; letter-spacing: .08em; opacity: .6; }
.mega .fi--mkt table { width: 100%; border-collapse: collapse; margin-top: 2px; }
.mega .fi--mkt td { padding: 0; }
.mega .fi--mkt td:nth-child(2),
.mega .fi--mkt td:nth-child(3) { text-align: right; }
.mega .feed__tick { border-top: 1px solid var(--accent); padding: 3px 0; background: #000; }
.mega .feed__tickin { display: inline-flex; animation: feed-tick 60s linear infinite; }
.mega .feed__tickin span { padding: 0 1.2em; }
@keyframes feed-tick { to { transform: translateX(-50%); } }

/* Mailbox: shares the feed's terminal shell (.feed), with tabs, a message list and a reader. */
.mega .mail__tabs { flex: none; display: flex; border-bottom: 1px solid var(--accent); }
.mega .mail__tab {
  flex: 1 1 0;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 1em;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: .6;
}
.mega .mail__tab b { font-weight: normal; color: var(--accent); }
.mega .mail__tab[aria-selected="true"] { opacity: 1; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mega .mail__body { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; }
.mega .mail__list { list-style: none; margin: 0; padding: 0; }
.mega .mail__list > li { display: flex; padding: 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.mega .mail__list > li::before { content: none; }
.mega .mail__row {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1.1em minmax(0, 7em) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1px 8px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 1em;
  text-align: left;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: .62;
}
/* trash: deletes the message for good */
.mega .mail__del {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--dn);
  opacity: .55;
}
.mega .mail__del svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mega .mail__acts .mail__trash { display: inline-flex; align-items: center; gap: 6px; border-color: var(--dn); color: var(--dn); }
.mega .mail__acts .mail__trash svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mega .mail__acts .mail__trash:hover,
.mega .mail__acts .mail__trash:focus-visible { background: color-mix(in srgb, var(--dn) 16%, transparent); }
.mega .mail__del:hover,
.mega .mail__del:focus-visible { opacity: 1; background: color-mix(in srgb, var(--dn) 16%, transparent); }
.mega .mail__row:hover,
.mega .mail__row:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 1; }
.mega .mail__row.unread { opacity: 1; }
.mega .mail__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mega .mail__row .from { color: var(--accent); }
/* kind glyph: dim once read, lit while unread */
.mega .mail__row { --k: var(--accent); }
.mega .mail__row[data-k="spam"] { --k: var(--dn); }
.mega .mail__row[data-k="friend"] { --k: var(--up); }
.mega .mail__row[data-k="bill"] { --k: #ffa24a; }
.mega .mail__row[data-k="notice"] { --k: #c9a7ff; }
.mega .mail__row[data-k="ad"] { --k: #ff6fa8; }
.mega .mail__row[data-k="auto"] { --k: #9fb4c8; }
.mega .mail__row i { font-style: normal; text-align: center; color: var(--k); opacity: .55; }
.mega .mail__row.unread i { opacity: 1; text-shadow: 0 0 6px var(--k); }
.mega .mail__row .prev { grid-column: 2 / -1; font-size: .85em; opacity: .55; }
/* the Loyalty Contract offer, in the feed's yellow for reports on you */
.mega .mail__row--contract .from,
.mega .mail__row--contract .subj { color: #ffd166; }
.mega .mail__row--contract { --k: #ffd166; }
.mega .mail__row--contract:hover,
.mega .mail__row--contract:focus-visible { background: color-mix(in srgb, #ffd166 12%, transparent); }
.mega .mail__row .time { opacity: .6; font-size: .85em; }
.mega .mail em { font-style: normal; font-size: .8em; padding: 0 4px; color: #000; background: var(--dn); letter-spacing: .06em; }
.mega .mail__empty { margin: 0; padding: 18px 10px; opacity: .55; }
.mega .mail__read { padding: 8px 10px 12px; touch-action: pan-y; }
/* a collector card's mail (MAIL_KINDS.swag): the card itself, small; a tap opens the counter */
.mega .mail__card { display: block; width: min(150px, 40%); margin: 0 0 12px; padding: 0; border: 1px solid var(--line); border-radius: 0; background: none; cursor: zoom-in; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega .mail__card canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.mega .mail__card:hover,
.mega .mail__card:focus-visible { border-color: var(--accent); outline: none; }
.mega .mail__read[data-dir="r"] { animation: mail-r .16s steps(3); }
.mega .mail__read[data-dir="l"] { animation: mail-l .16s steps(3); }
@keyframes mail-r { from { transform: translateX(14px); opacity: .3; } }
@keyframes mail-l { from { transform: translateX(-14px); opacity: .3; } }
.mega .mail__nav { display: flex; justify-content: space-between; align-items: center; }
.mega .mail__pos { display: flex; align-items: center; gap: 6px; opacity: .7; font-size: .9em; }
.mega .mail__pos button { border: 0; background: transparent; color: var(--accent); padding: 0 8px; font: inherit; font-size: 1.3em; line-height: 1; }
.mega .mail__pos button:disabled { opacity: .25; }
.mega .mail__keys { margin: 12px 0 0; font-size: .8em; opacity: .4; letter-spacing: .06em; }
@media (hover: none) { .mega .mail__keys { display: none; } }
/* list toolbar: mark all read, empty spam */
.mega .mail__bar { display: flex; justify-content: flex-end; padding: 6px 10px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent); }
.mega .mail__bar button { font-family: inherit; font-size: .85em; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; padding: 2px 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mega .mail__bar .mail__trash { display: inline-flex; align-items: center; gap: 6px; border-color: var(--dn); color: var(--dn); }
.mega .mail__bar .mail__trash svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mega .mail__back,
.mega .mail__acts button {
  font-family: inherit;
  font-size: 1em;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 3px 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega .mail__back { border: 0; background: transparent; padding: 0; color: var(--accent); }
.mega .mail__hdr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.mega .mail__hdr dt { opacity: .55; font-size: .85em; letter-spacing: .08em; }
.mega .mail__hdr dd { margin: 0; overflow-wrap: anywhere; }
.mega .mail__hdr dd span { opacity: .55; }
.mega .mail__text { margin: 0 0 14px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.mega .mail__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mega .mail__acts button:first-child { border-color: var(--accent); }
.mega .mail__signed { align-self: center; padding: 3px 10px; letter-spacing: .08em; color: var(--accent); border: 1px dashed var(--accent); }
.mega .mail__write {
  flex: none;
  padding: 4px 12px;
  font-family: inherit;
  font-size: 1em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega .mail__write::before { content: "✎ "; }
.mega .mail__write:hover,
.mega .mail__write:focus-visible { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Outbox (setPost()): a small terminal at the top of the view, above the feed and the
   mailbox, so a phone keyboard doesn't cover it. */
.mega .post {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 4;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(5, 6, 10, .92);
  border: 1px solid var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--ink);
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(14px, calc(var(--side, 500px) * .03), 18px);
  line-height: 1.2;
  animation: portal-in .2s steps(3);
}
.mega .post[hidden] { display: none; }
.mega .post .feed__head span:last-child { opacity: .7; }
.mega .post__row { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.mega .post__prompt { color: var(--accent); }
/* the line, with the completion's ghost drawn behind it in the same font and box: an
   invisible copy of what is typed, then the rest of the suggestion, dimmed */
.mega .post__field { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.mega .post__field input,
.mega .post__ghost {
  padding: 2px 0;
  font-family: inherit;
  font-size: max(16px, 1em);   /* below 16px iOS zooms the page on focus */
  line-height: 1.3;
  letter-spacing: normal;
}
.mega .post__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  border-bottom: 1px solid transparent;
}
.mega .post__ghost i { font-style: normal; visibility: hidden; }
.mega .post__field input {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  color: var(--ink);
  caret-color: var(--accent);
  border: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 0;
  background: transparent;
  outline: none;
}
.mega .post__field input:focus { border-bottom-color: var(--accent); }
.mega .post__row button {
  flex: none;
  padding: 2px 8px;
  font: inherit;
  font-size: .85em;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega .post__row button[type="submit"] { border-color: var(--accent); color: var(--accent); }
/* completion list under the line: the same two columns as the /help lists */
.mega .post__menu {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: max-content 1fr;
  max-height: 8.6em;
  margin: 0;
  padding: 3px 0 5px;
  overflow-y: auto;
  list-style: none;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent;
}
.mega .post__menu[hidden] { display: none; }
.mega .post__menu > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 14px; padding: 2px 10px 2px 24px; cursor: pointer; }
.mega .post__menu > li::before { content: none; }
.mega .post__menu > li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.mega .post__menu > li[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.mega .post__menu > li[aria-selected="true"] b::before { content: "▸"; position: absolute; margin-left: -14px; }
.mega .post__menu b { font-weight: normal; color: var(--accent); }
.mega .post__menu span { opacity: .6; }
/* Toast (toast()): not a panel but a transmission projected over the city. No frame, no
   fill: white text split into red and cyan ghosts, four corner brackets, a haze behind it
   for legibility. It decodes out of glyph noise (JS) and goes out like a CRT switching off. */
.mega .toast { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mega .toast__box {
  position: absolute;
  top: 12%;
  left: 50%;
  width: min(420px, calc(100% - 40px));
  max-height: 76%;               /* taller than that, the body scrolls */
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  padding: 12px 16px 14px;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(15px, calc(var(--side, 500px) * .034), 20px);
  line-height: 1.25;
  color: #fff;
  --b: color-mix(in srgb, var(--accent) 80%, #fff);
  background:
    linear-gradient(var(--b), var(--b)) top left / 14px 1px, linear-gradient(var(--b), var(--b)) top left / 1px 14px,
    linear-gradient(var(--b), var(--b)) top right / 14px 1px, linear-gradient(var(--b), var(--b)) top right / 1px 14px,
    linear-gradient(var(--b), var(--b)) bottom left / 14px 1px, linear-gradient(var(--b), var(--b)) bottom left / 1px 14px,
    linear-gradient(var(--b), var(--b)) bottom right / 14px 1px, linear-gradient(var(--b), var(--b)) bottom right / 1px 14px;
  background-repeat: no-repeat;
  animation: holo-in .45s steps(6) both, holo-flick 4.7s steps(1) .45s infinite;
}
/* the haze behind the words: dark, and blurring what is under it (the mailbox's rows, the
   feed) into a soft glow, its edges fading out so it stays a projection rather than a panel */
.mega .toast__box::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(3, 4, 10, .95) 50%, rgba(3, 4, 10, .8) 75%, rgba(3, 4, 10, 0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 70%, transparent 100%);
  mask: radial-gradient(ellipse at 50% 50%, #000 70%, transparent 100%);
}
/* with the feed or the mailbox open, lower, clear of their heads, tabs and toolbar */
.mega .stage:has(> .feed:not([hidden])) .toast__box { top: 24%; }
.mega .toast__box.out { animation: holo-out .3s ease-in both; }
.mega .toast__hd { flex: none; margin-bottom: 6px; font-size: .72em; letter-spacing: .3em; color: var(--accent); text-shadow: 0 0 8px var(--accent); }
.mega .toast__hd span { opacity: .6; }
.mega .toast__msg {
  margin: 0;
  overflow-wrap: anywhere;
  text-shadow: -1.5px 0 rgba(255, 40, 110, .65), 1.5px 0 rgba(40, 240, 255, .65), 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.mega .toast__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, transparent) transparent;
}
.mega .toast__body::-webkit-scrollbar { width: 4px; }
.mega .toast__body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 70%, transparent); }
/* list rows (/help topics, /help commands): key and description in two aligned columns,
   brought in one by one once the text above has decoded */
.mega .toast__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 8px 4px 0;
  text-align: left;
  border-top: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
}
.mega .toast__list > li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: 0; opacity: 0; }
.mega .toast__list > li::before { content: none; }
.mega .toast__box.done .toast__list > li { animation: holo-row .2s steps(3) calc(var(--i) * 90ms) both; }
.mega .toast__list b { font-weight: normal; color: var(--accent); text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent); }
.mega .toast__list b::before { content: "▸ "; opacity: .6; }
.mega .toast__list span { min-width: 0; opacity: .75; overflow-wrap: anywhere; }   /* a link (/help here) has nowhere else to break */
@keyframes holo-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.mega .toast__msg i { font-style: normal; color: var(--accent); opacity: .7; }   /* undecoded glyphs */
.mega .toast__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes holo-in {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.02); filter: brightness(3); }
  40% { opacity: 1; transform: translateX(-50%) scaleY(.02); filter: brightness(3); }
  60% { transform: translateX(-52%) scaleY(1.04); }
  80% { transform: translateX(-49%) scaleY(1); filter: brightness(1.4); }
}
@keyframes holo-flick { 0%, 100% { opacity: 1; } 31% { opacity: .55; transform: translateX(-51%); } 32% { opacity: 1; transform: translateX(-50%); } 77% { opacity: .75; } 78% { opacity: 1; } }
@keyframes holo-out {
  50% { transform: translateX(-50%) scaleY(.02); filter: brightness(3); opacity: 1; }
  100% { transform: translateX(-50%) scale(0, .02); filter: brightness(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mega .toast__box, .mega .toast__box.out, .mega .toast__box.done .toast__list > li { animation: none; }
  .mega .toast__list > li { opacity: 1; }
}

/* Welcome screen: a Portalis Ltd arrivals board over the blurred city (startIntro). the
   flap rows are one canvas drawn with swFlap; the tile beside them is the city's card, as
   in the transit terminal */
.mega .intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px 16px 40px;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(6, 6, 16, .62) 0%, rgba(4, 4, 10, .9) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .6s ease .1s;
}
/* CRT (intro + Portalis): scanlines, an aperture-grille tint and a slow rolling bright band on top of everything */
.mega .crt::before,
.mega .crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mega .crt::after {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 0, 60, .035) 0 1px, rgba(0, 255, 120, .035) 1px 2px, rgba(40, 80, 255, .035) 2px 3px);
}
.mega .crt::before {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .045) 45%, rgba(255, 255, 255, .07) 50%, transparent 56%);
  background-size: 100% 300%;
  animation: intro-roll 7s linear infinite;
}
@keyframes intro-roll { from { background-position: 0 100%; } to { background-position: 0 -200%; } }
.mega .intro__box {
  position: relative;
  width: min(860px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3.5vh, 30px);
  animation: intro-flicker 3.3s steps(1) infinite;
}
.mega .board__head {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 .4em var(--accent);
}
.mega .board__head img { display: block; }
.mega .board__clock { margin-left: auto; color: var(--ink); text-shadow: none; }
.mega .intro__title {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  font-weight: 600;
  font-size: clamp(36px, 8vw, 92px);
  line-height: 1;
  letter-spacing: .06em;
  margin-right: -.06em;   /* the trailing letter-spacing would push the word off-centre */
  color: var(--ink);
  /* misconverged RGB, like a worn CRT */
  text-shadow: -.035em 0 rgba(255, 30, 90, .55), .035em 0 rgba(0, 220, 255, .55), 0 0 .25em var(--accent);
  white-space: nowrap;
}
.mega .board__body {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(14px, 3vw, 28px);
  align-items: start;
}
.mega .board__tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-top), var(--c-bot));
  border: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent);
}
.mega .board__tile canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  border-bottom: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent);
}
.mega .board__tile figcaption { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.mega .board__arch { font-size: 15px; line-height: 1.15; opacity: .8; }
.mega .board__meta {
  font-family: vtFont, "Courier New", monospace;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--c-neon);
  text-shadow: 0 0 .4em color-mix(in srgb, var(--c-neon) 60%, transparent);
}
.mega .board__tile.day .board__meta { color: var(--c-ink); text-shadow: none; opacity: .7; }
.mega .board__flaps { display: block; width: 100%; }
/* a phone: the tile goes under the board, beside nothing */
@media (max-width: 640px) {
  .mega .board__body { grid-template-columns: minmax(0, 1fr); }
  .mega .board__tile { order: 1; flex-direction: row; }
  .mega .board__tile canvas { width: 44%; border-bottom: 0; border-right: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent); }
}
@keyframes intro-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-.015em, .01em); }
}
.mega .intro__boot {
  margin: 0;
  min-height: 6.25em;     /* room for the whole log so the button doesn't move while it types */
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(14px, 1.9vw, 18px);
  line-height: 1.25;
  color: var(--accent);
  text-shadow: 0 0 .4em var(--accent);
  white-space: pre;
  opacity: .85;
}
.mega .intro__enter {
  font-family: vtFont, "Courier New", monospace;
  font-size: 30px;
  line-height: 1;
  padding: 10px 26px 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  text-shadow: 0 0 .35em var(--accent);
}
.mega .intro__enter::before { content: "[ "; color: var(--accent); }
.mega .intro__enter::after { content: " ]"; color: var(--accent); }
.mega .intro__enter:hover { background: var(--accent); color: #000; text-shadow: none; }
.mega .intro__enter:hover::before, .mega .intro__enter:hover::after { color: #000; }
@keyframes intro-flicker {
  0%, 100% { opacity: 1; }
  31% { opacity: .92; }
  32% { opacity: 1; }
  77% { opacity: .95; }
  78% { opacity: 1; }
}
.mega .intro.leaving { opacity: 0; pointer-events: none; }
/* the Portalis Ltd ident over the welcome screen (startIntro): opaque until it fades, the logo
   painted top to bottom in steps like a slow raster, then the division typed and a tagline */
.mega .intro__ident {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: #000;
  font-family: vtFont, "Courier New", monospace;
  color: var(--accent);
  text-shadow: 0 0 .4em var(--accent);
  transition: opacity .6s ease;
}
.mega .intro__ident.gone { opacity: 0; pointer-events: none; }
.mega .intro__ident .logo {
  width: clamp(170px, 30vw, 260px);
  overflow: visible;
  margin-bottom: 10px;
  filter: drop-shadow(-2px 0 rgba(255, 30, 90, .5)) drop-shadow(2px 0 rgba(0, 220, 255, .5)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
  animation: ident-paint 1.2s steps(9, end) .3s both;
}
.mega .intro__ident .logo text { font-family: vtFont, "Courier New", monospace; fill: var(--ink); }
.mega .intro__div { font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .3em; margin-right: -.3em; white-space: pre; }
.mega .intro__tag { font-size: clamp(15px, 1.8vw, 18px); color: var(--ink); text-shadow: none; animation: ident-in .5s ease 2.4s both; opacity: .7; }
@keyframes ident-paint { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ident-in { from { opacity: 0; } }
/* the publisher's line under the welcome screen; the licence clause drops on a phone */
.mega .intro__fine {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-family: vtFont, "Courier New", monospace;
  font-size: 13px;
  color: var(--ink);
  opacity: .45;
}
@media (max-width: 640px) { .mega .intro__fine span { display: none; } }
/* root and admin: the Portalis OS logon instead of the arrivals board (logon()), after a
   certain home PC's welcome screen. in Portalis OS's own colours (portalis/os.css: ink teal,
   the logo's cyan, halo gold, square corners, the dithered gloss) and Tahoma, whatever the
   city's palette */
.mega .intro.logon {
  --lg-gloss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='d' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h2v1H0zM0 1h1v1H0z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='a' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='b' width='2' height='2' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0z' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='c' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h1v1H0zM2 2h1v1H2z' fill='%23fff'/%3E%3C/pattern%3E%3C/defs%3E%3Cg opacity='.38'%3E%3Crect width='100%25' height='1' fill='%23fff'/%3E%3Crect y='1' width='100%25' height='18%25' fill='url(%23d)'/%3E%3Crect y='18%25' width='100%25' height='16%25' fill='url(%23a)'/%3E%3Crect y='34%25' width='100%25' height='14%25' fill='url(%23b)'/%3E%3Crect y='48%25' width='100%25' height='14%25' fill='url(%23c)'/%3E%3C/g%3E%3C/svg%3E");
  display: grid;
  grid-template-rows: 78px minmax(0, 1fr) 96px;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #072f3d;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: Tahoma, "Trebuchet MS", Verdana, sans-serif;
  color: #fff;
  text-shadow: none;
}
.mega .logon__top { background: var(--lg-gloss) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, #072f3d, #157a90 70%, #2a96ab); border-bottom: 2px solid #45f0ff; }
.mega .logon__mid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  background:
    radial-gradient(circle at 82% 88%, rgba(242, 193, 78, .18), transparent 26%),
    radial-gradient(circle at 8% 4%, rgba(69, 240, 255, .35), transparent 24%),
    radial-gradient(ellipse at 22% -10%, #2c8597, #11505f 60%, #0a3644);
}
/* the divider: brightest in the middle, gone at both ends */
.mega .logon__mid::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  margin: 16px 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7) 50%, transparent);
}
.mega .logon__brand { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; padding: 0 clamp(16px, 4vw, 44px); text-align: right; }
.mega .logon__flag { width: clamp(64px, 9vw, 92px); margin: 0 clamp(20px, 3vw, 34px) -6px 0; transform: skewY(-4deg); filter: drop-shadow(1px 2px 0 rgba(0, 20, 30, .45)); }
.mega .logon__word { margin: 0; font-size: clamp(34px, 5vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1; text-shadow: 1px 1px 0 rgba(0, 20, 30, .55); }
.mega .logon__word small { display: block; font-size: .26em; font-weight: 700; letter-spacing: 0; text-align: left; margin: 0 0 2px .3em; }
.mega .logon__word small sup { font-size: .6em; }
.mega .logon__word > sup { font-size: .5em; font-weight: 400; color: #f2c14e; vertical-align: .9em; margin-left: .05em; }
.mega .logon__hint { margin: clamp(20px, 5vh, 44px) 0 0; font-size: clamp(16px, 2vw, 21px); }
.mega .logon__users { grid-column: 3; grid-row: 1; padding: 0 clamp(16px, 4vw, 44px); }
.mega .logon__user {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  padding: 6px 18px 6px 6px;
  font: inherit;
  color: #fff;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega .logon__user:hover, .mega .logon__user:focus-visible, .mega .logon.busy .logon__user {
  outline: 0;
  background: linear-gradient(90deg, #072f3d, rgba(7, 47, 61, 0));
}
.mega .logon__user:disabled { cursor: progress; }
.mega .logon__pic { flex: none; display: block; padding: 2px; border: 2px solid #fff; border-radius: 0; background: #fff; box-shadow: 3px 3px 0 rgba(0, 20, 30, .45); }
.mega .logon__user:hover .logon__pic, .mega .logon__user:focus-visible .logon__pic, .mega .logon.busy .logon__pic { border-color: #f2c14e; background: #f2c14e; }
.mega .logon__pic canvas { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 0; image-rendering: pixelated; }
.mega .logon__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega .logon__name b { font-size: clamp(19px, 2.2vw, 23px); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.mega .logon__name i { font-style: normal; font-size: 14px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the bottom bar, with the gold rule along its top edge */
.mega .logon__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: var(--lg-gloss) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, #072f3d, #157a90 70%, #2a96ab);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, #f2c14e 40%, #f2c14e 60%, transparent) 1;
}
.mega .logon__off {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px;
  font: inherit;
  font-size: clamp(17px, 2vw, 20px);
  color: #fff;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mega .logon__off svg { width: 26px; height: 26px; flex: none; border: 1px solid #fff4cc; border-radius: 0; }
.mega .logon__off svg rect { fill: #e0a43a; }
.mega .logon__off svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mega .logon__off:hover, .mega .logon__off:focus-visible { outline: 0; text-decoration: underline; }
.mega .logon__off:hover svg rect, .mega .logon__off:focus-visible svg rect { fill: #f2c14e; }
.mega .logon__foot p { margin: 0; font-size: 12px; line-height: 1.35; text-align: left; }
/* a phone: the brand over the tile, the divider across */
@media (max-width: 640px) {
  .mega .intro.logon { grid-template-rows: 44px minmax(0, 1fr) 72px; }
  .mega .logon__mid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1px auto; align-content: center; gap: 28px; }
  .mega .logon__mid::before { grid-column: 1; grid-row: 2; margin: 0 16px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7) 50%, transparent); }
  .mega .logon__brand { grid-column: 1; grid-row: 1; align-items: center; text-align: center; }
  .mega .logon__flag { margin-right: 0; }
  .mega .logon__users { grid-column: 1; grid-row: 3; display: flex; justify-content: center; }
  .mega .logon__foot p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mega .intro__box,
  .mega .intro__ident .logo,
  .mega .intro__tag,
  .mega .crt::before,
  .mega .stage__tag--tr i,
  .mega .feed__tickin,
  .mega .reticle i,
  .mega .radio.on .radio__eq i,
  .mega .hud__toggle--mail .dd,
  .mega .mail__read,
  .mega .portal__card.chosen,
  .mega .shutter.snap { animation: none; }
  .mega .feed__body { overflow-y: auto; }
}

/* Portalis Ltd transit terminal: four destination cards, each in its own city's palette. */
.mega .portal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 72px 20px 24px;
  overflow-y: auto;
  background: rgba(4, 4, 10, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: portal-in .28s steps(4);
  transition: opacity .3s;
  --dn: #ff3f5a;   /* End iteration and Begin again, in the mail's delete red */
}
.mega .portal[hidden] { display: none; }
.mega .portal.leaving { opacity: 0; transition-delay: .2s; pointer-events: none; }
@keyframes portal-in {
  0% { opacity: 0; clip-path: inset(48% 0 48% 0); }
  50% { opacity: 1; clip-path: inset(30% 0 60% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.mega .portal__box { position: relative; width: min(1040px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mega .portal__head { text-align: center; }
.mega .portal__title {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  font-weight: 600;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1;
  letter-spacing: .12em;
  margin-right: -.12em;
  color: var(--ink);
  text-shadow: -.035em 0 rgba(255, 30, 90, .55), .035em 0 rgba(0, 220, 255, .55), 0 0 .25em var(--accent);
}
/* the company logo (logoSvg()), its name kept as text for screen readers; the same red/cyan
   split and glow as the old lettering, as drop shadows */
.mega .portal__title .logo {
  display: block;
  width: clamp(170px, 24vw, 250px);
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(-2px 0 rgba(255, 30, 90, .5)) drop-shadow(2px 0 rgba(0, 220, 255, .5)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
}
.mega .portal__title .logo text { font-family: vtFont, "Courier New", monospace; fill: var(--ink); }
.mega .reassign__title .logo { width: clamp(150px, 22vw, 210px); }
.mega .portal__name-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mega .portal__tag {
  margin: 8px 0 0;
  font-family: vtFont, "Courier New", monospace;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .85;
}
.mega .portal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.mega .portal__list > li { padding: 0; }
.mega .portal__list > li::before { content: none; }
.mega .portal__card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0 0 12px;
  text-align: left;
  color: var(--c-ink);
  background: linear-gradient(180deg, var(--c-top), var(--c-bot));
  border: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent);
  border-radius: 0;
  overflow: hidden;
}
.mega .portal__card:hover,
.mega .portal__card:focus-visible { border-color: var(--c-neon); box-shadow: 0 0 0 1px var(--c-neon), 0 0 22px color-mix(in srgb, var(--c-neon) 45%, transparent); outline: none; }
.mega .portal__card:hover canvas,
.mega .portal__card:focus-visible canvas { animation: intro-jitter .16s steps(2) infinite; }
.mega .portal__card canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  margin-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-neon) 45%, transparent);
}
.mega .portal__card > span { padding: 0 12px; }
.mega .portal__key {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 0 5px !important;
  font-family: vtFont, "Courier New", monospace;
  font-size: 18px;
  line-height: 1.1;
  color: #000;
  background: var(--c-neon);
}
.mega .portal__name { font-size: 22px; font-weight: 600; line-height: 1.05; }
.mega .portal__arch { font-size: 16px; opacity: .75; }
.mega .portal__meta {
  margin-top: 6px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--c-neon);
  text-shadow: 0 0 .4em color-mix(in srgb, var(--c-neon) 60%, transparent);
}
/* daylight destinations: neon text doesn't read on a pale sky */
.mega .portal__card.day .portal__meta { color: var(--c-ink); text-shadow: none; opacity: .7; }
.mega .portal__card.chosen { animation: portal-chosen .5s steps(10) forwards; }
@keyframes portal-chosen {
  0%, 20%, 40% { filter: none; transform: none; }
  10%, 30% { filter: invert(1); transform: translateX(-3px); }
  60% { filter: brightness(2.2); transform: scaleY(.04); }
  100% { filter: brightness(3); transform: scale(0, .02); }
}
.mega .portal__stay {
  font-family: vtFont, "Courier New", monospace;
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
}
.mega .portal__stay::before { content: "[ ESC ] "; color: var(--accent); }
.mega .portal__end {
  margin-top: -10px;
  padding: 2px 8px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dn);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: .7;
}
.mega .portal__end span { opacity: .6; text-transform: none; letter-spacing: .04em; }
/* the card collection: End iteration's quiet style, in the accent */
.mega .portal__cards {
  margin-top: -14px;
  padding: 2px 8px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: .75;
}
.mega .portal__cards[hidden] { display: none; }
.mega .portal__cards::before { content: "[ C ] "; }
.mega .portal__cards span { opacity: .6; text-transform: none; letter-spacing: .04em; }
.mega .portal__cards:hover,
.mega .portal__cards:focus-visible { opacity: 1; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mega .portal__end:hover,
.mega .portal__end:focus-visible { opacity: 1; background: color-mix(in srgb, var(--dn) 14%, transparent); }

/* Reassignment: the Portalis terminal's look, one panel of terms and two choices */
.mega .reassign { z-index: 45; }
.mega .reassign__box { width: min(560px, 100%); }
.mega .reassign__title { font-size: clamp(30px, 5vw, 48px); }
.mega .reassign__body {
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  font-family: vtFont, "Courier New", monospace;
  font-size: 18px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: rgba(0, 0, 0, .55);
}
.mega .reassign__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mega .reassign__acts button {
  font-family: vtFont, "Courier New", monospace;
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
}
.mega .reassign__acts .reassign__go { color: var(--dn); border-color: var(--dn); box-shadow: inset 0 -3px 0 var(--dn); }
.mega .reassign__acts .reassign__go:hover,
.mega .reassign__acts .reassign__go:focus-visible { background: var(--dn); color: #000; }
/* on Begin again: the panel collapses like a chosen destination card, then the page reloads */
.mega .reassign.wipe .reassign__box { animation: portal-chosen .5s steps(10) forwards; }
/* /swag: one collector card (4:5), as tall as the screen allows, dealt in like a terminal panel.
   a print (/poster, /swag postcard) may be another shape: swagStep sets --ar from the canvas */
.mega .swag { z-index: 45; }
.mega .swag__box { gap: 14px; }
.mega .swag__card {
  --ar: .8;
  display: block;
  width: min(100%, 560px, calc((100dvh - 200px) * var(--ar)));
  min-width: 200px;
  height: auto;
  aspect-ratio: var(--ar);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 18px 60px rgba(0, 0, 0, .7);
}
.mega .swag__card.deal { animation: portal-in .28s steps(4); }
.mega .swag__note {
  margin: 0;
  min-height: 1.2em;
  font-family: vtFont, "Courier New", monospace;
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
}
.mega .swag__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mega .swag__acts button {
  font-family: vtFont, "Courier New", monospace;
  font-size: 20px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0;
}
.mega .swag__acts button:disabled { opacity: .35; }
.mega .swag__acts kbd { font: inherit; color: var(--accent); }
@media (max-width: 600px), (pointer: coarse) {
  .mega .swag__acts kbd { display: none; }
}
@media (max-width: 420px) {
  .mega .swag__acts { gap: 6px; }
  .mega .swag__acts button { font-size: 16px; letter-spacing: .06em; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .mega .swag__card.deal { animation: none; }
}
@media (max-width: 820px) {
  .mega .portal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .mega .portal__name { font-size: 19px; }
  .mega .portal__meta { font-size: 13px; }
}

/* consciousness programmes: the flashy feed spot and the trip (startTrip()) */
.mega .fi--trip { display: block; width: 100%; font: inherit; color: #fff; text-align: center; padding: 12px 10px; cursor: pointer;
  border: 2px solid #fff; background: linear-gradient(110deg,#ff00c8,#00e5ff,#fff200,#ff00c8); background-size: 300% 100%;
  animation: trip-ad 2.4s linear infinite; box-shadow: 0 0 14px #ff00c8; }
.mega .fi--trip .k { display: block; font-size: .75em; letter-spacing: .1em; text-shadow: 0 0 4px #000; }
.mega .fi--trip .brand { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 2.1em; line-height: 1; text-transform: uppercase; text-shadow: 2px 0 #f0f, -2px 0 #0ff, 0 0 10px #000; }
.mega .fi--trip .prog { display: block; font-style: italic; font-size: 1.15em; text-shadow: 0 0 6px #000; }
.mega .fi--trip .go { display: inline-block; margin-top: 6px; padding: 2px 8px; background: #000; color: #fff200; animation: trip-blink .6s steps(2) infinite; }
/* resort ads: a vaporwave postcard, the only way to a resort (resortItem()). A sunset,
   a striped sun sinking into a scrolling perspective grid, chrome italic lettering */
.mega .fi--resort { position: relative; overflow: hidden; display: block; width: 100%; font: inherit; color: #fff; text-align: center; cursor: pointer;
  padding: 14px 10px 12px; border: 1px solid #ffd6f0; border-radius: 0;
  background: linear-gradient(180deg, #2b1055 0%, #6a2c91 34%, #ff6fa8 60%, #ffb38a 78%, #ffe3a8 100%);
  box-shadow: 0 0 18px rgba(255,111,168,.45); }
.mega .fi--resort > span { position: relative; display: block; }
.mega .fi--resort .sky { position: absolute; inset: 0; pointer-events: none; }
.mega .fi--resort .sky::before { content: ""; position: absolute; left: 50%; top: 22%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #fff38a 0%, #ffb35c 55%, #ff5fa0 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 50%, transparent 50% 54%, #000 54% 61%, transparent 61% 66%, #000 66% 73%, transparent 73% 79%, #000 79%);
          mask: linear-gradient(180deg, #000 0 50%, transparent 50% 54%, #000 54% 61%, transparent 61% 66%, #000 66% 73%, transparent 73% 79%, #000 79%);
  opacity: .9; }
.mega .fi--resort .sky i { position: absolute; left: -40%; right: -40%; bottom: -10%; height: 52%; transform: perspective(90px) rotateX(58deg); transform-origin: 50% 100%;
  background: linear-gradient(180deg, #2b1055 0%, #12062a 100%);
  background-image: linear-gradient(#ff4fd8 1px, transparent 1px), linear-gradient(90deg, #ff4fd8 1px, transparent 1px), linear-gradient(180deg, #2b1055, #12062a);
  background-size: 100% 14px, 22px 100%, 100% 100%; animation: resort-grid 1.6s linear infinite; }
.mega .fi--resort .k { color: #fff; opacity: .9; font-size: .72em; letter-spacing: .12em; text-shadow: 0 0 6px #ff4fd8; }
.mega .fi--resort .jp { font-size: .8em; opacity: .85; letter-spacing: .2em; margin-top: 2px; }
.mega .fi--resort .name { margin: 26px 0 2px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 1.9em; line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 0%, #d9f4ff 44%, #5a3d8c 50%, #ffd9f5 58%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2b1055) drop-shadow(0 0 8px rgba(255,79,216,.6)); }
.mega .fi--resort .tag { font-style: italic; text-shadow: 0 1px 3px #2b1055; }
.mega .fi--resort .go { display: inline-block; margin-top: 8px; padding: 3px 10px; background: #2fe0d0; color: #2b1055; font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 0 10px #2fe0d0; animation: resort-glow 2.2s ease-in-out infinite; }
@keyframes resort-grid { to { background-position: 0 14px, 0 0, 0 0; } }
@keyframes resort-glow { 50% { box-shadow: 0 0 2px #2fe0d0; filter: brightness(1.15); } }
/* in a resort: aphorisms, and the resort's notices to its guests */
.mega .fi--aph { text-align: center; padding: 6px 4px 10px; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.15em; color: #ffd9f5; text-shadow: 0 0 8px rgba(255,111,168,.5); }
.mega .fi--stay .k { color: #2fe0d0; }
.mega .fi--stay .wx { color: #ffe38a; }
.mega .fi--corp .h { text-transform: none; font-style: italic; }
.mega .mail__acts .mail__book { border-color: #2fe0d0; color: #2fe0d0; }
@media (prefers-reduced-motion: reduce) { .mega .fi--resort .sky i, .mega .fi--resort .go { animation: none; } }
/* graphics ads: the renderer's tiers sold in the feed (gfxItem()). One colour per tier
   (--gc), an animated icon on the left: the eye blinks and looks around, the flame
   flickers, the gauge's needle swings and settles, the battery charges */
.mega .fi--gfx { --gc: #5ef2c2; display: grid; grid-template-columns: 52px 1fr; gap: 6px 10px; align-items: center; width: 100%; font: inherit; color: #eef; text-align: left;
  padding: 10px; cursor: pointer; border: 1px solid var(--gc); border-radius: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 28%, #05070a), #05070a 72%); box-shadow: 0 0 12px color-mix(in srgb, var(--gc) 35%, transparent); }
.mega .fi--gfx-high { --gc: #ffb347; }
.mega .fi--gfx-low { --gc: #8dff6a; }
.mega .fi--gfx .k { grid-column: 1 / -1; color: var(--gc); }
.mega .fi--gfx .txt > span { display: block; }
.mega .fi--gfx .head { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 1.7em; line-height: 1; text-transform: uppercase; color: var(--gc); text-shadow: 0 0 .3em color-mix(in srgb, var(--gc) 60%, transparent); }
.mega .fi--gfx .line { margin-top: 3px; }
.mega .fi--gfx .go { grid-column: 1 / -1; justify-self: start; padding: 2px 8px; background: var(--gc); color: #05070a; font-weight: 600; letter-spacing: .06em; }
.mega .fi--gfx.is-on { cursor: default; }
.mega .fi--gfx.is-on .go { background: none; color: var(--gc); box-shadow: inset 0 0 0 1px var(--gc); }
.mega .fi--gfx svg.ic { width: 52px; height: 52px; margin: 0; overflow: visible; color: var(--gc); filter: drop-shadow(0 0 4px var(--gc)); }
.mega .fi--gfx svg.ic * { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.mega .fi--gfx svg.ic .f { fill: currentColor; stroke: none; }
.mega .fi--gfx .ic--eye .lid { transform-origin: 24px 24px; animation: gfx-blink 4.2s infinite; }
.mega .fi--gfx .ic--eye .iris { animation: gfx-look 6s ease-in-out infinite; }
.mega .fi--gfx .ic--flame .fl { transform-origin: 24px 44px; animation: gfx-flick .45s ease-in-out infinite alternate; }
.mega .fi--gfx .ic--flame .in { transform-origin: 24px 42px; animation: gfx-flick .3s ease-in-out infinite alternate-reverse; }
.mega .fi--gfx .ic--gauge .ok { stroke-width: 4; opacity: .55; }
.mega .fi--gfx .ic--gauge .needle { transform-origin: 24px 36px; animation: gfx-needle 4s ease-in-out infinite; }
.mega .fi--gfx .ic--battery .c { opacity: .12; animation: 2.8s steps(1) infinite; }
.mega .fi--gfx .ic--battery .c1 { animation-name: gfx-c1; } .mega .fi--gfx .ic--battery .c2 { animation-name: gfx-c2; }
.mega .fi--gfx .ic--battery .c3 { animation-name: gfx-c3; } .mega .fi--gfx .ic--battery .c4 { animation-name: gfx-c4; }
.mega .fi--gfx .ic--battery .bolt { animation: trip-blink 1.4s ease-in-out infinite; }
@keyframes gfx-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.06); } }
@keyframes gfx-look { 0%, 18% { transform: translate(0,0); } 28%, 45% { transform: translate(-6px,1px); } 55%, 72% { transform: translate(6px,-1px); } 82%, 100% { transform: translate(0,0); } }
@keyframes gfx-flick { from { transform: scale(1,1) skewX(-2deg); } to { transform: scale(.93,1.07) skewX(3deg); } }
@keyframes gfx-needle { 0% { transform: rotate(-80deg); } 25% { transform: rotate(35deg); } 40% { transform: rotate(-15deg); } 52% { transform: rotate(6deg); } 62%, 88% { transform: rotate(0deg); } 100% { transform: rotate(-80deg); } }
@keyframes gfx-c1 { 0% { opacity: .12; } 15%, 85% { opacity: 1; } 90%, 100% { opacity: .12; } }
@keyframes gfx-c2 { 0% { opacity: .12; } 32%, 85% { opacity: 1; } 90%, 100% { opacity: .12; } }
@keyframes gfx-c3 { 0% { opacity: .12; } 49%, 85% { opacity: 1; } 90%, 100% { opacity: .12; } }
@keyframes gfx-c4 { 0% { opacity: .12; } 66%, 85% { opacity: 1; } 90%, 100% { opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .mega .fi--gfx svg.ic * { animation: none !important; } .mega .fi--gfx .ic--battery .c { opacity: 1; } }
/* void :: lane ads (laneItem()): an arcade cabinet's attract screen in the lane's own
   palette (--vt sky, --vh horizon, --vr road, --ve edge, --vn neon). The lane rushes at
   the eye in perspective and the whole view banks side to side, the sled bobs over it with
   its nozzles burning, the title drags a neon ghost behind it */
.mega .fi--vl { position: relative; overflow: hidden; display: block; width: 100%; padding: 10px 10px 12px; text-align: center; text-decoration: none; color: #fff; cursor: pointer;
  border: 1px solid var(--ve); background: #000; box-shadow: 0 0 14px color-mix(in srgb, var(--ve) 40%, transparent), inset 0 0 0 1px #000; }
.mega .fi--vl > span:not(.lane) { position: relative; z-index: 1; display: block; }
.mega .fi--vl .lane { position: absolute; inset: -12% -12% 0; transform-origin: 50% 100%; perspective: 70px; perspective-origin: 50% 50%; animation: vl-bank 7s ease-in-out infinite;
  background: linear-gradient(180deg, var(--vt) 0%, var(--vh) 50%, color-mix(in srgb, var(--vh) 30%, #000) 50.5%, #000 100%); }
.mega .fi--vl .lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: var(--vn); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--vn) 60%, transparent); opacity: .7; }
.mega .fi--vl .lane i { position: absolute; left: 50%; bottom: 0; width: 56%; height: 900%; margin-left: -28%; transform: rotateX(86deg); transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, var(--ve) 0 3%, transparent 3% 32.6%, color-mix(in srgb, var(--ve) 55%, transparent) 32.6% 33.4%, transparent 33.4% 66.6%,
      color-mix(in srgb, var(--ve) 55%, transparent) 66.6% 67.4%, transparent 67.4% 97%, var(--ve) 97%),
    repeating-linear-gradient(180deg, transparent 0 34px, color-mix(in srgb, var(--vn) 30%, transparent) 34px 40px),
    var(--vr);
  box-shadow: 0 0 14px var(--ve); animation: vl-rush .3s linear infinite; }
.mega .fi--vl::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
.mega .fi--vl .sled { position: absolute; z-index: 1; left: 50%; bottom: 44px; width: 78px; height: 32px; margin: 0 0 0 -39px; overflow: visible; animation: vl-bob 1.3s ease-in-out infinite alternate; }
.mega .fi--vl .sled .body { fill: #2a2840; }
.mega .fi--vl .sled .cnp { fill: color-mix(in srgb, var(--ve) 70%, transparent); }
.mega .fi--vl .sled .fin { fill: var(--vn); }
.mega .fi--vl .sled .nz { fill: var(--vn); filter: drop-shadow(0 0 3px var(--vn)) drop-shadow(0 2px 4px var(--vn)); animation: trip-blink .18s steps(2) infinite; }
.mega .fi--vl .k { font-size: .72em; letter-spacing: .14em; color: var(--ve); opacity: .9; }
.mega .fi--vl .t { margin-top: 2px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-style: italic; font-size: 2.5em; line-height: .95; letter-spacing: .05em;
  background: linear-gradient(180deg, #fff 0%, #fff 46%, var(--ve) 54%, color-mix(in srgb, var(--ve) 50%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ve) 70%, transparent)); }
.mega .fi--vl .t::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: var(--vn); opacity: .55; -webkit-text-fill-color: var(--vn);
  transform: translateX(-7px); filter: blur(1px); animation: vl-ghost 2.6s steps(1) infinite; }
.mega .fi--vl .tag { font-style: italic; text-shadow: 0 1px 4px #000; }
.mega .fi--vl .row { display: flex !important; justify-content: space-between; gap: 8px; margin-top: 62px; font-size: .7em; letter-spacing: .1em; color: var(--ve); text-shadow: 0 0 4px #000, 0 0 2px #000; }
.mega .fi--vl .go { display: inline-block !important; margin-top: 6px; padding: 2px 14px; border: 1px solid var(--ve); color: var(--ve); font-weight: 600; letter-spacing: .14em;
  background: color-mix(in srgb, var(--vt) 75%, transparent); animation: vl-arm 1.6s ease-in-out infinite; }
.mega .fi--vl:hover .go, .mega .fi--vl:focus-visible .go { background: var(--ve); color: var(--vt); }
.mega .fi--vl:focus-visible { outline: 2px solid var(--ve); outline-offset: 3px; }
@keyframes vl-rush { to { background-position: 0 0, 0 40px, 0 0; } }
@keyframes vl-bank { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 60% { transform: rotate(-5deg); } }
@keyframes vl-bob { to { transform: translateY(-3px); } }
@keyframes vl-ghost { 0%, 100% { transform: translateX(-7px); } 92% { transform: translateX(-12px) skewX(-8deg); } 96% { transform: translateX(-3px); } }
@keyframes vl-arm { 50% { box-shadow: 0 0 10px var(--ve); } }
/* portalscript ads (psItem()): a devotional tract, not a bootcamp. gold leaf on oxblood
   inside a double rule, the Portalis disc as a halo with rays turning slowly behind it and a
   candle's breathing glow, a verse in serif with its chapter, the keywords as sacraments */
.mega .fi--ps { position: relative; overflow: hidden; display: block; width: 100%; padding: 12px 14px 10px; text-align: center; text-decoration: none; color: #f3e2b8; cursor: pointer;
  border: 3px double #c99a3a; background: radial-gradient(ellipse at 50% 28%, #6a1420 0%, #3a0810 45%, #12030a 100%);
  box-shadow: inset 0 0 0 4px #12030a, inset 0 0 0 5px color-mix(in srgb, #c99a3a 45%, transparent), 0 0 16px rgba(201,154,58,.25);
  font-family: Georgia, "Times New Roman", serif; }
.mega .fi--ps > span { position: relative; display: block; }
.mega .fi--ps .k { font-family: Georgia, "Times New Roman", serif; font-size: .7em; letter-spacing: .3em; color: #c99a3a; opacity: 1; }
.mega .fi--ps .halo { width: 76px; height: 76px; margin: 8px auto 4px; }
.mega .fi--ps .halo i { position: absolute; inset: -42px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,214,120,.32) 0 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 70%); mask: radial-gradient(circle, #000 18%, transparent 70%);
  animation: ps-rays 40s linear infinite; }
.mega .fi--ps .halo::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,120,.5), transparent 68%);
  animation: ps-candle 3.1s ease-in-out infinite; }
.mega .fi--ps .disc { position: relative; display: block; width: 100%; height: 100%; margin: 0; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,200,90,.7)); }
.mega .fi--ps .call { margin-top: 6px; font-size: 1.35em; line-height: 1.15; font-variant: small-caps; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff3c4, #d4a640 60%, #a07422); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #12030a); }
.mega .fi--ps .verse { margin: 8px auto 0; max-width: 32em; font-style: italic; color: #f3e2b8; opacity: .92; }
.mega .fi--ps .verse .ref { display: block; margin-top: 2px; font-style: normal; font-size: .72em; letter-spacing: .22em; text-transform: uppercase; color: #c99a3a; }
.mega .fi--ps .rites { display: flex !important; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 4px 0;
  border-top: 1px solid rgba(201,154,58,.4); border-bottom: 1px solid rgba(201,154,58,.4); font-family: vtFont, "Courier New", monospace; font-size: .95em; letter-spacing: .14em; color: #e8c46a; }
.mega .fi--ps .rites b { font-weight: normal; }
.mega .fi--ps .rites i { font-style: normal; color: #8a2a2a; }
.mega .fi--ps .go { display: inline-block !important; margin-top: 10px; padding: 3px 16px; border: 1px solid #c99a3a; color: #12030a; font-weight: 700; letter-spacing: .16em; font-size: .9em;
  background: linear-gradient(180deg, #fff3c4, #d4a640 55%, #a07422); box-shadow: 0 0 10px rgba(212,166,64,.45); }
.mega .fi--ps:hover .go, .mega .fi--ps:focus-visible .go { filter: brightness(1.15); box-shadow: 0 0 16px rgba(255,214,120,.8); }
.mega .fi--ps:focus-visible { outline: 2px solid #c99a3a; outline-offset: 3px; }
.mega .fi--ps .fine { margin-top: 6px; font-size: .7em; font-style: italic; opacity: .55; }
@keyframes ps-rays { to { transform: rotate(360deg); } }
@keyframes ps-candle { 0%, 100% { opacity: .75; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: .82; } 70% { opacity: .95; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .mega .fi--ps .halo i, .mega .fi--ps .halo::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { .mega .fi--vl .lane, .mega .fi--vl .lane i, .mega .fi--vl .sled, .mega .fi--vl .sled .nz, .mega .fi--vl .t::before, .mega .fi--vl .go { animation: none; } }
@keyframes trip-ad { 0% { background-position: 0 0; filter: hue-rotate(0deg); } 100% { background-position: 300% 0; filter: hue-rotate(360deg); } }
@keyframes trip-blink { 50% { opacity: .2; } }
body.trip-on .mega .stage, body.trip-on .mega .hud { pointer-events: none; }
body.trip-on .mega .hud #photo { pointer-events: auto; }   /* photos still allowed */
.mega__canvas.trip[data-look=psy] { animation: trip-fx var(--trip-dur,3s) ease-in-out infinite alternate; }
.mega__canvas.trip[data-look=tint] { filter: hue-rotate(var(--trip-hue,0deg)) saturate(1.3); }
.mega__canvas.trip[data-look=mono] { filter: grayscale(1) contrast(1.8) brightness(1.1); }
.mega__canvas.trip[data-look=duo] { filter: grayscale(1) sepia(1) hue-rotate(var(--trip-hue,0deg)) saturate(3) contrast(1.3); }
.mega__canvas.trip[data-look=negative] { filter: invert(1) hue-rotate(180deg) contrast(1.2); }
.mega__canvas.trip[data-look=washed] { filter: saturate(.3) brightness(1.35) contrast(.8) blur(1.5px); }
.mega__canvas.trip[data-look=sway] { animation: trip-sway var(--trip-dur,3s) ease-in-out infinite alternate; }
.mega__canvas.trip--px { image-rendering: pixelated; }
.mega__canvas.trip[data-look].jump { animation: street-jump .35s steps(6) 1; }   /* the hop glitch still plays over animated looks */
/* a resort's relaxation programme: pastel grades, hops fading up out of a pink haze */
.mega__canvas.trip[data-look=vapor] { filter: sepia(.5) hue-rotate(255deg) saturate(1.7) brightness(1.08) contrast(.92); }
.mega__canvas.trip[data-look=pastel] { filter: saturate(.55) brightness(1.22) contrast(.78); }
.mega__canvas.trip[data-look=sunset] { filter: sepia(.4) saturate(1.5) hue-rotate(-18deg) brightness(1.06); }
.mega__canvas.trip[data-look=dream] { filter: blur(1.4px) brightness(1.14) saturate(1.25) contrast(.9); }
.mega__canvas.trip[data-look=vhs] { filter: blur(.7px) saturate(1.5) contrast(1.12) hue-rotate(-8deg); animation: trip-vhs 3.2s steps(1) infinite; }
.mega__canvas.trip.drift, .mega__canvas.trip[data-look].drift { animation: trip-drift 1.8s ease-out 1; }
body.trip-soft .mega .stage { background: #ffd9ec; }
@keyframes trip-drift { from { opacity: .05; } to { opacity: 1; } }
@keyframes trip-vhs { 0%, 91% { transform: none; } 93% { transform: translateX(2px); } 95% { transform: translateX(-1px); } }
/* its feed spot: pastel, a slow shimmer, nothing blinking */
.mega .fi--trip.fi--trip-soft { border-color: #fff; background: linear-gradient(110deg,#ffc6e6,#d9c8ff,#bff3ee,#fff1c4,#ffc6e6); background-size: 300% 100%;
  animation: trip-ad-soft 9s ease-in-out infinite alternate; box-shadow: 0 0 14px rgba(255,170,220,.6); color: #3b2466; }
.mega .fi--trip-soft .k { color: #3b2466; text-shadow: none; opacity: .75; }
.mega .fi--trip-soft .brand { text-shadow: 0 1px 0 #fff, 0 0 10px rgba(255,255,255,.8); color: #3b2466; }
.mega .fi--trip-soft .prog { font-family: Georgia, "Times New Roman", serif; text-shadow: none; }
.mega .fi--trip-soft .go { background: #2fe0d0; color: #2b1055; animation: resort-glow 2.2s ease-in-out infinite; }
@keyframes trip-ad-soft { from { background-position: 0 0; } to { background-position: 100% 0; } }
/* the sea programmes' spot: underwater, light rippling down through it, bubbles rising */
.mega .fi--trip.fi--trip-soft.fi--trip-sea { position: relative; overflow: hidden; border-color: #aef4ff; color: #eafdff; animation: none;
  background: radial-gradient(130% 70% at 50% -25%, #8ff0ff 0%, transparent 65%), linear-gradient(180deg,#0aa6d6 0%,#05608f 55%,#022846 100%);
  box-shadow: 0 0 14px rgba(80,220,255,.55), inset 0 -18px 28px rgba(0,10,30,.5); }
.mega .fi--trip-sea > * { position: relative; z-index: 1; }
.mega .fi--trip-sea::before { content: ''; position: absolute; inset: -40%; pointer-events: none; opacity: .4; mix-blend-mode: screen; filter: blur(1.5px);
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.7) 0 3%, transparent 10%) 0 0/54px 46px,
    radial-gradient(ellipse at 70% 65%, rgba(190,255,255,.6) 0 3%, transparent 9%) 0 0/37px 43px;
  animation: sea-caustic 6s ease-in-out infinite alternate; }
.mega .fi--trip-sea::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle 3.5px at 50% 4.5px, transparent 55%, rgba(220,250,255,0.85) 78%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 3.5px, transparent 55%, rgba(220,250,255,0.7) 78%, transparent 100%),
    radial-gradient(circle 4.5px at 50% 5.5px, transparent 55%, rgba(220,250,255,0.8) 78%, transparent 100%),
    radial-gradient(circle 2.5px at 50% 3.5px, transparent 55%, rgba(220,250,255,0.7) 78%, transparent 100%),
    radial-gradient(circle 2px at 50% 3px, transparent 55%, rgba(220,250,255,0.6) 78%, transparent 100%),
    radial-gradient(circle 3px at 50% 4px, transparent 55%, rgba(220,250,255,0.65) 78%, transparent 100%);
  background-size: 9px 120px, 7px 90px, 11px 140px, 7px 70px, 6px 110px, 8px 160px; background-repeat: repeat-y; animation: sea-bubbles 5s linear infinite; }
.mega .fi--trip-sea .k { color: #c9f6ff; opacity: .85; }
.mega .fi--trip-sea .brand { color: #fff; text-shadow: 0 0 8px #3fe6ff, 0 2px 0 #05608f; }
.mega .fi--trip-sea .prog { color: #dffcff; }
.mega .fi--trip-sea .go { background: #ffe36b; color: #022846; }
@keyframes sea-caustic { from { transform: translate(0,0) rotate(0deg) scale(1); } to { transform: translate(16px,-12px) rotate(7deg) scale(1.12); } }
@keyframes sea-bubbles { from { background-position: 8% 0px, 23% 40px, 81% 20px, 92% 60px, 64% 10px, 40% 80px; } to { background-position: 8% -120px, 23% -50px, 81% -120px, 92% -10px, 64% -100px, 40% -80px; } }
@keyframes trip-sway { from { filter: hue-rotate(calc(var(--trip-hue,0deg) - 35deg)) saturate(1.4); } to { filter: hue-rotate(calc(var(--trip-hue,0deg) + 35deg)) saturate(1.4); } }
@keyframes trip-fx {
  0% { filter: hue-rotate(var(--trip-hue,0deg)) saturate(var(--trip-sat,2)) invert(var(--trip-inv,0)) contrast(1.2); }
  33% { filter: hue-rotate(calc(var(--trip-hue,0deg) + 120deg)) saturate(4) invert(var(--trip-inv,0)) blur(1px) contrast(1.6); }
  66% { filter: hue-rotate(calc(var(--trip-hue,0deg) + 240deg)) saturate(var(--trip-sat,2)) invert(calc(1 - var(--trip-inv,0))) contrast(1.1); }
  100% { filter: hue-rotate(calc(var(--trip-hue,0deg) + 360deg)) saturate(6) invert(var(--trip-inv,0)) brightness(1.4); }
}
@media (prefers-reduced-motion: reduce) { .mega .fi--trip, .mega .fi--trip .go, .mega .fi--trip-sea::before, .mega .fi--trip-sea::after, .mega__canvas.trip[data-look], .mega__canvas.trip.drift { animation: none; } .mega__canvas.trip[data-look=psy], .mega__canvas.trip[data-look=sway] { filter: hue-rotate(var(--trip-hue,0deg)) saturate(var(--trip-sat,2)); } }

/* /gb true: the Game Boy's four greens over every picture in the view (city, away scenes,
   trips, sponsor breaks, trip text), never over the UI. On the wrappers, not the canvases,
   so it stacks on the trip looks; the stage's own colour (seen through a trip's fades) too. */
body.gb .mega__view,
body.gb .mega .interlude,
body.gb .mega .triptext { filter: url(#gbPal); }
body.gb .mega .stage { background: #0f380f; }