/* ===========================================================================
   One palette block per world, plus that world's overlay/texture layers.
   Set on <html data-world="...">. Adding a world = one block here + one entry
   in js/services/worlds.js.

   The first four worlds are the same 80s neon arcade from four different
   rooms, so the typography and radius tokens live once in base.css rather
   than being restated here. The three after them are places of their own and
   override them.
   ======================================================================== */

/* ------------------------------------------------------------------ arcade */
/* The original neon cabinet, restored by request. */
[data-world='arcade'] {
  --night: #05010f;
  --accent: #00f0ff;  --accent-soft: #c9fbff;  --accent-rgb: 0, 240, 255;
  --x: #00f0ff;  --x-rgb: 0, 240, 255;
  --o: #ff2bd1;  --o-rgb: 255, 43, 209;
  --accent-x: #ffffff;  --accent-o: #ffe900;
  --ink: #d7e8ff;  --ink-dim: #8aa0c0;  --ink-faint: #5a6b85;
  --mist: rgba(120, 200, 255, 0.14);  --mist-strong: rgba(120, 200, 255, 0.26);
  --display: var(--techno);
  --display-weight: 800;
  --display-transform: uppercase;
  --display-spacing: 0.06em;
  --chrome-font: var(--techno);
  --radius: 6px;  --radius-sm: 3px;
  --bg:
    radial-gradient(ellipse 100% 60% at 50% 0%, #2a0a4e 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 10% 100%, #0b2a5e 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 100%, #4a0a3a 0%, transparent 60%),
    linear-gradient(180deg, #0a0320 0%, #05010f 100%);
  --panel-bg: linear-gradient(145deg, rgba(20, 10, 50, 0.72), rgba(3, 1, 12, 0.85));
  --glow: radial-gradient(circle, rgba(0, 240, 255, 0.16) 0%, rgba(255, 43, 209, 0.12) 40%, transparent 70%);
  --vignette: radial-gradient(ellipse 90% 80% at 50% 45%, transparent 40%, rgba(2, 0, 8, 0.8) 100%);
}
[data-world='arcade'] .overlay {
  opacity: 0.4;
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 240, 255, 0.12) 58px 59px, transparent 59px 118px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255, 43, 209, 0.08) 58px 59px, transparent 59px 118px);
  mask-image: linear-gradient(180deg, transparent 38%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 100%);
  animation: grid-scroll 7s linear infinite;
}
@keyframes grid-scroll { to { background-position: 0 118px, 0 118px; } }
[data-world='arcade'] .texture {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px);
  opacity: 0.6;
}

/* -------------------------------------------------------------------- neon */
/* The back wall of the arcade, lights down. A black room, a row of cabinets
   glowing against it, and an 8-bit display face. Nothing flickers: this world
   used to wear VHS static and a dying-tube flicker, and a fault is not an
   aesthetic. It is the default world, hence the :root in the selector - inside
   :where(), so that as a fallback it carries no weight. A bare :root ties with
   every [data-world] selector and beat the arcade block above it on source
   order, which quietly gave the arcade world this world's palette. */
:where(:root),
[data-world='neon'] {
  --night: #000000;
  --accent: #00e5ff;  --accent-soft: #c9fbff;  --accent-rgb: 0, 229, 255;
  --x: #00e5ff;  --x-rgb: 0, 229, 255;
  --o: #ff2d95;  --o-rgb: 255, 45, 149;
  --accent-x: #ffffff;  --accent-o: #ffe900;
  --ink: #e6efff;  --ink-dim: #93a6c8;  --ink-faint: #5d6e8c;
  --mist: rgba(0, 229, 255, 0.11);  --mist-strong: rgba(0, 229, 255, 0.3);
  /* Black, with two accent pools well away from the middle. The old pink
     horizon lit the whole top of the page and left nothing for the neon to
     read against. */
  --bg:
    radial-gradient(ellipse 120% 70% at 50% 112%, rgba(255, 45, 149, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 90% 46% at 6% 0%, rgba(0, 229, 255, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 70% 40% at 94% 6%, rgba(124, 77, 255, 0.1) 0%, transparent 64%),
    linear-gradient(180deg, #05050c 0%, #020206 46%, #000000 100%);
  --panel-bg: linear-gradient(145deg, rgba(10, 13, 28, 0.82), rgba(0, 0, 0, 0.9));
  --glow: radial-gradient(circle, rgba(0, 229, 255, 0.16) 0%, rgba(255, 45, 149, 0.11) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 112% 100% at 50% 40%, transparent 52%, rgba(0, 0, 0, 0.82) 100%);
}
/* The 8-bit display face. THIS WORLD ONLY, which is why it is its own rule and
   not part of the block above: that block is also :root (neon is the default
   world), and :root carries the same specificity as [data-world='arcade'] but
   comes later in the file - so a --display set up there would win over the
   arcade world's own and put every world on the pixel face.
   --chrome-font deliberately stays on Orbitron: buttons and menus carry real
   sentences and must not grow 40% wider. shell.css and engine.css carry the
   matching size corrections. */
[data-world='neon'] {
  --display: var(--pixel);
  --display-weight: 400;
  --display-transform: uppercase;
  --display-spacing: 0;
}
/* The cabinet row, the room glow behind it, and the floor grid it stands on.
   Five ORIGINAL cabinets: the marquees and screens are abstract lit blocks, so
   there is no character, logo or silhouette borrowed from anyone. */
[data-world='neon'] .overlay {
  opacity: 0.92;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='290' viewBox='0 0 560 290'><defs><radialGradient id=%22gc%22><stop offset=%220%22 stop-color=%22%2300e5ff%22 stop-opacity=%22.5%22/><stop offset=%22.45%22 stop-color=%22%2300e5ff%22 stop-opacity=%22.17%22/><stop offset=%221%22 stop-color=%22%2300e5ff%22 stop-opacity=%220%22/></radialGradient><linearGradient id=%22rc%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22%2300e5ff%22 stop-opacity=%22.22%22/><stop offset=%221%22 stop-color=%22%2300e5ff%22 stop-opacity=%220%22/></linearGradient><radialGradient id=%22gm%22><stop offset=%220%22 stop-color=%22%23ff2d95%22 stop-opacity=%22.5%22/><stop offset=%22.45%22 stop-color=%22%23ff2d95%22 stop-opacity=%22.17%22/><stop offset=%221%22 stop-color=%22%23ff2d95%22 stop-opacity=%220%22/></radialGradient><linearGradient id=%22rm%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22%23ff2d95%22 stop-opacity=%22.22%22/><stop offset=%221%22 stop-color=%22%23ff2d95%22 stop-opacity=%220%22/></linearGradient><radialGradient id=%22ga%22><stop offset=%220%22 stop-color=%22%23ffd400%22 stop-opacity=%22.5%22/><stop offset=%22.45%22 stop-color=%22%23ffd400%22 stop-opacity=%22.17%22/><stop offset=%221%22 stop-color=%22%23ffd400%22 stop-opacity=%220%22/></radialGradient><linearGradient id=%22ra%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22%23ffd400%22 stop-opacity=%22.22%22/><stop offset=%221%22 stop-color=%22%23ffd400%22 stop-opacity=%220%22/></linearGradient><linearGradient id=%22bd%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22><stop offset=%220%22 stop-color=%22%230c0c18%22/><stop offset=%22.5%22 stop-color=%22%23040409%22/><stop offset=%221%22 stop-color=%22%230e0e1c%22/></linearGradient></defs><rect x=%2216%22 y=%22262%22 width=%2280%22 height=%2220%22 fill=%22url(%23rm)%22/><ellipse cx=%2256%22 cy=%2296%22 rx=%2288%22 ry=%2258%22 fill=%22url(%23gm)%22 opacity=%22.55%22/><path d=%22M12 262 L12 86 L12 86 L100 86 L100 86 L100 262 Z%22 fill=%22url(%23bd)%22/><path d=%22M12 262 L12 86 L12 86 L100 86 L100 86 L100 262%22 fill=%22none%22 stroke=%22%23ff2d95%22 stroke-width=%221%22 opacity=%22.38%22/><rect x=%2217%22 y=%2289%22 width=%2278%22 height=%2212%22 rx=%221%22 fill=%22%23ff2d95%22 opacity=%22.85%22/><rect x=%2221%22 y=%2292%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%2244%22 y=%2292%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%2268%22 y=%2292%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><ellipse cx=%2256%22 cy=%22143%22 rx=%2274%22 ry=%2270%22 fill=%22url(%23gm)%22 opacity=%22.35%22/><rect x=%2217%22 y=%22106%22 width=%2278%22 height=%2274%22 rx=%223%22 fill=%22%230a0a12%22 stroke=%22%23ff2d95%22 stroke-width=%221%22 opacity=%22.6%22/><rect x=%2219%22 y=%22108%22 width=%2274%22 height=%2270%22 fill=%22%23010106%22/><rect x=%2229%22 y=%22121%22 width=%223%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.9%22/><rect x=%2241%22 y=%22121%22 width=%223%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.9%22/><rect x=%2253%22 y=%22121%22 width=%223%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.9%22/><rect x=%2229%22 y=%22144%22 width=%223%22 height=%223%22 fill=%22%23ff2d95%22 opacity=%22.8%22/><rect x=%2265%22 y=%22144%22 width=%223%22 height=%223%22 fill=%22%23ff2d95%22 opacity=%22.8%22/><rect x=%2249%22 y=%22160%22 width=%225%22 height=%223%22 fill=%22%23ffffff%22 opacity=%22.85%22/><rect x=%2219%22 y=%22108%22 width=%2274%22 height=%2270%22 fill=%22%23ff2d95%22 opacity=%22.06%22/><path d=%22M15 186 L97 186 L94 200 L18 200 Z%22 fill=%22%230a0a12%22/><rect x=%2223%22 y=%22190%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%2231%22 y=%22190%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ff2d95%22 opacity=%22.8%22/><rect x=%2283%22 y=%22190%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ff2d95%22 opacity=%22.6%22/><rect x=%2249%22 y=%22234%22 width=%2214%22 height=%2210%22 rx=%221%22 fill=%22%230a0a12%22/><rect x=%2253%22 y=%22237%22 width=%226%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.95%22/><rect x=%2213%22 y=%22104%22 width=%222%22 height=%22130%22 fill=%22%23ff2d95%22 opacity=%22.5%22/><rect x=%2297%22 y=%22104%22 width=%222%22 height=%22130%22 fill=%22%23ff2d95%22 opacity=%22.5%22/><rect x=%22120%22 y=%22262%22 width=%2260%22 height=%2220%22 fill=%22url(%23rc)%22/><ellipse cx=%22150%22 cy=%2270%22 rx=%2268%22 ry=%2267%22 fill=%22url(%23gc)%22 opacity=%22.55%22/><path d=%22M116 262 L116 66 L122 60 L178 60 L184 66 L184 262 Z%22 fill=%22url(%23bd)%22/><path d=%22M116 262 L116 66 L122 60 L178 60 L184 66 L184 262%22 fill=%22none%22 stroke=%22%2300e5ff%22 stroke-width=%221%22 opacity=%22.38%22/><rect x=%22121%22 y=%2263%22 width=%2258%22 height=%2212%22 rx=%221%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22125%22 y=%2266%22 width=%2215%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22150%22 y=%2266%22 width=%2215%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><ellipse cx=%22150%22 cy=%22122%22 rx=%2254%22 ry=%2280%22 fill=%22url(%23gc)%22 opacity=%22.35%22/><rect x=%22121%22 y=%2280%22 width=%2258%22 height=%2284%22 rx=%223%22 fill=%22%230a0a12%22 stroke=%22%2300e5ff%22 stroke-width=%221%22 opacity=%22.6%22/><rect x=%22123%22 y=%2282%22 width=%2254%22 height=%2280%22 fill=%22%23010106%22/><rect x=%22133%22 y=%2293%22 width=%224%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22146%22 y=%2293%22 width=%224%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22159%22 y=%2293%22 width=%224%22 height=%223%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22147%22 y=%22138%22 width=%226%22 height=%223%22 fill=%22%23ffffff%22 opacity=%22.9%22/><rect x=%22148%22 y=%22119%22 width=%222%22 height=%226%22 fill=%22%23ff2d95%22 opacity=%22.8%22/><rect x=%22123%22 y=%2282%22 width=%2254%22 height=%2280%22 fill=%22%2300e5ff%22 opacity=%22.06%22/><path d=%22M119 170 L181 170 L178 184 L122 184 Z%22 fill=%22%230a0a12%22/><rect x=%22127%22 y=%22174%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%22135%22 y=%22174%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%2300e5ff%22 opacity=%22.8%22/><rect x=%22167%22 y=%22174%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%2300e5ff%22 opacity=%22.6%22/><rect x=%22143%22 y=%22234%22 width=%2214%22 height=%2210%22 rx=%221%22 fill=%22%230a0a12%22/><rect x=%22147%22 y=%22237%22 width=%226%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.95%22/><rect x=%22117%22 y=%2278%22 width=%222%22 height=%22156%22 fill=%22%2300e5ff%22 opacity=%22.5%22/><rect x=%22181%22 y=%2278%22 width=%222%22 height=%22156%22 fill=%22%2300e5ff%22 opacity=%22.5%22/><rect x=%22202%22 y=%22262%22 width=%22104%22 height=%2220%22 fill=%22url(%23ra)%22/><ellipse cx=%22254%22 cy=%22110%22 rx=%22112%22 ry=%2254%22 fill=%22url(%23ga)%22 opacity=%22.55%22/><path d=%22M198 262 L198 100 L198 100 L310 100 L310 100 L310 262 Z%22 fill=%22url(%23bd)%22/><path d=%22M198 262 L198 100 L198 100 L310 100 L310 100 L310 262%22 fill=%22none%22 stroke=%22%23ffd400%22 stroke-width=%221%22 opacity=%22.38%22/><rect x=%22203%22 y=%22103%22 width=%22102%22 height=%2212%22 rx=%221%22 fill=%22%23ffd400%22 opacity=%22.85%22/><rect x=%22207%22 y=%22106%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22230%22 y=%22106%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22254%22 y=%22106%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22278%22 y=%22106%22 width=%2214%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><ellipse cx=%22254%22 cy=%22154%22 rx=%2298%22 ry=%2264%22 fill=%22url(%23ga)%22 opacity=%22.35%22/><rect x=%22203%22 y=%22120%22 width=%22102%22 height=%2268%22 rx=%223%22 fill=%22%230a0a12%22 stroke=%22%23ffd400%22 stroke-width=%221%22 opacity=%22.6%22/><rect x=%22205%22 y=%22122%22 width=%2298%22 height=%2264%22 fill=%22%23010106%22/><rect x=%22227%22 y=%22162%22 width=%226%22 height=%225%22 fill=%22%23ff2d95%22 opacity=%22.85%22/><rect x=%22244%22 y=%22162%22 width=%226%22 height=%225%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22262%22 y=%22162%22 width=%226%22 height=%225%22 fill=%22%23ffd400%22 opacity=%22.85%22/><rect x=%22244%22 y=%22136%22 width=%225%22 height=%225%22 fill=%22%23ffffff%22 opacity=%22.7%22/><rect x=%22205%22 y=%22122%22 width=%2298%22 height=%2264%22 fill=%22%23ffd400%22 opacity=%22.06%22/><path d=%22M201 194 L307 194 L304 210 L204 210 Z%22 fill=%22%230a0a12%22/><rect x=%22209%22 y=%22198%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%22217%22 y=%22198%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%22293%22 y=%22198%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.6%22/><rect x=%22247%22 y=%22234%22 width=%2214%22 height=%2210%22 rx=%221%22 fill=%22%230a0a12%22/><rect x=%22251%22 y=%22237%22 width=%226%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.95%22/><rect x=%22199%22 y=%22118%22 width=%222%22 height=%22116%22 fill=%22%23ffd400%22 opacity=%22.5%22/><rect x=%22307%22 y=%22118%22 width=%222%22 height=%22116%22 fill=%22%23ffd400%22 opacity=%22.5%22/><rect x=%22328%22 y=%22262%22 width=%2268%22 height=%2220%22 fill=%22url(%23rc)%22/><ellipse cx=%22362%22 cy=%2284%22 rx=%2276%22 ry=%2262%22 fill=%22url(%23gc)%22 opacity=%22.55%22/><path d=%22M324 262 L324 79 L329 74 L395 74 L400 79 L400 262 Z%22 fill=%22url(%23bd)%22/><path d=%22M324 262 L324 79 L329 74 L395 74 L400 79 L400 262%22 fill=%22none%22 stroke=%22%2300e5ff%22 stroke-width=%221%22 opacity=%22.38%22/><rect x=%22329%22 y=%2277%22 width=%2266%22 height=%2212%22 rx=%221%22 fill=%22%2300e5ff%22 opacity=%22.85%22/><rect x=%22333%22 y=%2280%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22362%22 y=%2280%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><ellipse cx=%22362%22 cy=%22133%22 rx=%2262%22 ry=%2275%22 fill=%22url(%23gc)%22 opacity=%22.35%22/><rect x=%22329%22 y=%2294%22 width=%2266%22 height=%2279%22 rx=%223%22 fill=%22%230a0a12%22 stroke=%22%2300e5ff%22 stroke-width=%221%22 opacity=%22.6%22/><rect x=%22331%22 y=%2296%22 width=%2262%22 height=%2275%22 fill=%22%23010106%22/><rect x=%22343%22 y=%22118%22 width=%2210%22 height=%222%22 fill=%22%2300e5ff%22 opacity=%22.9%22/><rect x=%22363%22 y=%22118%22 width=%222%22 height=%2210%22 fill=%22%23ff2d95%22 opacity=%22.85%22/><rect x=%22350%22 y=%22146%22 width=%228%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.7%22/><rect x=%22331%22 y=%2296%22 width=%2262%22 height=%2275%22 fill=%22%2300e5ff%22 opacity=%22.06%22/><path d=%22M327 179 L397 179 L394 193 L330 193 Z%22 fill=%22%230a0a12%22/><rect x=%22335%22 y=%22183%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%22343%22 y=%22183%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%2300e5ff%22 opacity=%22.8%22/><rect x=%22383%22 y=%22183%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%2300e5ff%22 opacity=%22.6%22/><rect x=%22355%22 y=%22234%22 width=%2214%22 height=%2210%22 rx=%221%22 fill=%22%230a0a12%22/><rect x=%22359%22 y=%22237%22 width=%226%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.95%22/><rect x=%22325%22 y=%2292%22 width=%222%22 height=%22142%22 fill=%22%2300e5ff%22 opacity=%22.5%22/><rect x=%22397%22 y=%2292%22 width=%222%22 height=%22142%22 fill=%22%2300e5ff%22 opacity=%22.5%22/><rect x=%22418%22 y=%22262%22 width=%22124%22 height=%2220%22 fill=%22url(%23rm)%22/><ellipse cx=%22480%22 cy=%22146%22 rx=%22132%22 ry=%2242%22 fill=%22url(%23gm)%22 opacity=%22.55%22/><path d=%22M414 262 L414 136 L414 136 L546 136 L546 136 L546 262 Z%22 fill=%22url(%23bd)%22/><path d=%22M414 262 L414 136 L414 136 L546 136 L546 136 L546 262%22 fill=%22none%22 stroke=%22%23ff2d95%22 stroke-width=%221%22 opacity=%22.38%22/><rect x=%22419%22 y=%22139%22 width=%22122%22 height=%2212%22 rx=%221%22 fill=%22%23ff2d95%22 opacity=%22.85%22/><rect x=%22423%22 y=%22142%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22452%22 y=%22142%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22480%22 y=%22142%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><rect x=%22508%22 y=%22142%22 width=%2217%22 height=%226%22 fill=%22%23ffffff%22 opacity=%22.5%22/><ellipse cx=%22480%22 cy=%22183%22 rx=%22118%22 ry=%2250%22 fill=%22url(%23gm)%22 opacity=%22.35%22/><rect x=%22419%22 y=%22156%22 width=%22122%22 height=%2254%22 rx=%223%22 fill=%22%230a0a12%22 stroke=%22%23ff2d95%22 stroke-width=%221%22 opacity=%22.6%22/><rect x=%22421%22 y=%22158%22 width=%22118%22 height=%2250%22 fill=%22%23010106%22/><rect x=%22435%22 y=%22175%22 width=%222%22 height=%2212%22 fill=%22%2300e5ff%22 opacity=%22.9%22/><rect x=%22520%22 y=%22175%22 width=%222%22 height=%2212%22 fill=%22%23ff2d95%22 opacity=%22.9%22/><rect x=%22478%22 y=%22182%22 width=%223%22 height=%223%22 fill=%22%23ffffff%22 opacity=%22.95%22/><rect x=%22421%22 y=%22158%22 width=%22118%22 height=%2250%22 fill=%22%23ff2d95%22 opacity=%22.06%22/><path d=%22M417 216 L543 216 L540 228 L420 228 Z%22 fill=%22%230a0a12%22/><rect x=%22425%22 y=%22220%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ffd400%22 opacity=%22.8%22/><rect x=%22433%22 y=%22220%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ff2d95%22 opacity=%22.8%22/><rect x=%22529%22 y=%22220%22 width=%224%22 height=%224%22 rx=%222%22 fill=%22%23ff2d95%22 opacity=%22.6%22/><rect x=%22473%22 y=%22234%22 width=%2214%22 height=%2210%22 rx=%221%22 fill=%22%230a0a12%22/><rect x=%22477%22 y=%22237%22 width=%226%22 height=%222%22 fill=%22%23ffd400%22 opacity=%22.95%22/><rect x=%220%22 y=%22262%22 width=%22560%22 height=%221%22 fill=%22%2300e5ff%22 opacity=%22.35%22/></svg>"),
    radial-gradient(ellipse 64% 44% at 50% 100%, rgba(255, 45, 149, 0.13) 0%, transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 229, 255, 0.07) 58px 59px, transparent 59px 118px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255, 45, 149, 0.05) 58px 59px, transparent 59px 118px);
  background-repeat: repeat-x, no-repeat, repeat, repeat;
  background-position: center bottom, center bottom, 0 0, 0 0;
  background-size: 560px 290px, 100% 46vh, auto, auto;
  mask-image: linear-gradient(180deg, transparent 20%, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 60%);
  animation: neon-grid 9s linear infinite;
}
/* Only the two grid layers move. The cabinets are furniture; furniture that
   slides reads as a scrolling background, not as a room. */
@keyframes neon-grid {
  to { background-position: center bottom, center bottom, 0 118px, 0 118px; }
}
/* The room dims while an action cabinet is mounted: a lit arcade behind a
   playfield is fog over the thing you are trying to read. fx.quiet() already
   does exactly this for the particle field. */
html:has(.cabinet--realtime) .overlay { opacity: 0.42; }
html:has(.cabinet--realtime) .texture { opacity: 0.35; }
html:has(.cabinet--realtime) #scenery { opacity: 0.3; }
/* A clean tube: fine scanlines, and one slow refresh band that crosses and
   then waits. No jitter, no opacity stutter. */
[data-world='neon'] .texture {
  opacity: 0.55;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 229, 255, 0.055) 46%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px);
  background-repeat: no-repeat, repeat;
  background-size: 100% 46vh, auto;
  background-position: 0 -46vh, 0 0;
  animation: neon-sweep 19s linear infinite;
}
@keyframes neon-sweep {
  0%, 14%   { background-position: 0 -46vh, 0 0; }
  62%, 100% { background-position: 0 146vh, 0 0; }
}

/* ------------------------------------------------------------------- cyber */
/* Forty floors up, raining. Chrome, window light, and something on the wire. */
[data-world='cyber'] {
  --night: #01060f;
  --accent: #00f0ff;  --accent-soft: #d2fbff;  --accent-rgb: 0, 240, 255;
  --x: #00f0ff;  --x-rgb: 0, 240, 255;
  --o: #c8d8e8;  --o-rgb: 200, 216, 232;
  --accent-x: #5effd8;  --accent-o: #ffffff;
  --ink: #cfe0f2;  --ink-dim: #7f95ae;  --ink-faint: #4c5f76;
  --mist: rgba(0, 240, 255, 0.12);  --mist-strong: rgba(0, 240, 255, 0.24);
  --bg:
    radial-gradient(ellipse 120% 50% at 50% 0%, #10265e 0%, transparent 52%),
    radial-gradient(ellipse 70% 44% at 18% 96%, #1a2a6c 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 86% 100%, #063a4a 0%, transparent 62%),
    linear-gradient(180deg, #061030 0%, #030a1c 52%, #01060f 100%);
  --panel-bg: linear-gradient(145deg, rgba(14, 30, 64, 0.76), rgba(1, 6, 15, 0.88));
  --glow: radial-gradient(circle, rgba(0, 240, 255, 0.16) 0%, rgba(26, 42, 108, 0.18) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 88% 78% at 50% 44%, transparent 34%, rgba(0, 3, 9, 0.88) 100%);
}
/* A skyline of lit windows, drifting slowly past. */
[data-world='cyber'] .overlay {
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 240, 255, 0.07) 0 7px, transparent 7px 13px,
      rgba(200, 216, 232, 0.05) 13px 18px, transparent 18px 34px),
    repeating-linear-gradient(0deg,
      rgba(0, 240, 255, 0.06) 0 9px, transparent 9px 21px);
  background-size: 34px 100%, 100% 30px;
  mask-image: linear-gradient(180deg, transparent 30%, #000 72%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 72%, #000 100%);
  animation: skyline-drift 46s linear infinite;
}
@keyframes skyline-drift { to { background-position: 340px 0, 0 0; } }
/* Rain, on two planes at different speeds. */
[data-world='cyber'] .texture {
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(73deg, rgba(210, 248, 255, 0.16) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(69deg, rgba(210, 248, 255, 0.09) 0 1px, transparent 1px 23px);
  background-size: 110px 150px, 170px 230px;
  animation: rain 0.75s linear infinite;
}
@keyframes rain { to { background-position: -46px 150px, -58px 230px; } }

/* ------------------------------------------------------------------ galaxy */
/* The game room on the orbital. Pixel planets, stars falling upward, and
   something out there answering the ping. */
[data-world='galaxy'] {
  --night: #04000e;
  --accent: #ff00a0;  --accent-soft: #ffd3ef;  --accent-rgb: 255, 0, 160;
  --x: #9d4edd;  --x-rgb: 157, 78, 221;
  --o: #ff00a0;  --o-rgb: 255, 0, 160;
  --accent-x: #ffffff;  --accent-o: #ffe066;
  --ink: #ece4ff;  --ink-dim: #a294c4;  --ink-faint: #665a85;
  --mist: rgba(157, 78, 221, 0.16);  --mist-strong: rgba(255, 0, 160, 0.26);
  --bg:
    radial-gradient(ellipse 100% 60% at 72% 8%, #3d0a52 0%, transparent 54%),
    radial-gradient(ellipse 80% 50% at 18% 30%, #1d0b4e 0%, transparent 58%),
    radial-gradient(ellipse 90% 46% at 50% 104%, #5c0a44 0%, transparent 62%),
    linear-gradient(180deg, #0c0126 0%, #070018 50%, #04000e 100%);
  --panel-bg: linear-gradient(145deg, rgba(36, 10, 72, 0.76), rgba(4, 0, 14, 0.88));
  --glow: radial-gradient(circle, rgba(255, 0, 160, 0.17) 0%, rgba(157, 78, 221, 0.13) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 94% 84% at 50% 44%, transparent 42%, rgba(2, 0, 7, 0.86) 100%);
}
/* Nebula. The planets that used to hang here as hard-stopped gradients are
   drawn by js/scenery/galaxy.js now, so that they can answer the pointer. */
[data-world='galaxy'] .overlay {
  opacity: 0.6;
  background-image:
    radial-gradient(ellipse 70% 44% at 76% 30%, rgba(255, 0, 160, 0.16) 0%, transparent 68%),
    radial-gradient(ellipse 60% 40% at 22% 58%, rgba(157, 78, 221, 0.18) 0%, transparent 70%);
  animation: nebula-drift 64s ease-in-out infinite;
}
@keyframes nebula-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-1.4%, 1.1%, 0) scale(1.035); }
}
/* Shooting stars: rare, because constant ones stop reading as rare. */
[data-world='galaxy'] .texture {
  opacity: 0.7;
  background-image:
    linear-gradient(118deg, transparent 0 46%, rgba(255, 255, 255, 0.85) 48%, transparent 50% 100%),
    linear-gradient(112deg, transparent 0 40%, rgba(199, 125, 255, 0.7) 42%, transparent 44% 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 150px 2px, 110px 2px;
  animation: shoot-a 7s linear infinite, shoot-b 11s linear infinite 3.5s;
}
@keyframes shoot-a {
  0%      { background-position: -160px 14%, -120px 58%; }
  14%     { background-position: 115vw 46%, -120px 58%; }
  100%    { background-position: 115vw 46%, -120px 58%; }
}
@keyframes shoot-b {
  0%, 62% { background-position: 115vw 46%, -120px 58%; }
  78%     { background-position: 115vw 46%, 115vw 24%; }
  100%    { background-position: 115vw 46%, 115vw 24%; }
}

/* ==========================================================================
   The three worlds below are their own places, not rooms in the arcade, so
   they set their own type and corners as well as their palette.
   ======================================================================== */

/* -------------------------------------------------------------------- reef */
/* Forty fathoms down. Restored from the 7 Oct 2026 snapshot and given a
   seabed: kelp, branching coral, sea fans and a starfish, all drawn here. */
[data-world='reef'] {
  --night: #01121c;
  --accent: #7fe3ff;  --accent-soft: #e8fbff;  --accent-rgb: 127, 227, 255;
  --x: #ff9e7d;  --x-rgb: 255, 158, 125;
  --o: #bfe9ff;  --o-rgb: 191, 233, 255;
  --accent-x: #ffd1a8;  --accent-o: #ffffff;
  --ink: #d6eef7;  --ink-dim: #8bb4c7;  --ink-faint: #5a8196;
  --mist: rgba(150, 220, 245, 0.12);  --mist-strong: rgba(150, 220, 245, 0.24);
  --display: var(--serif);
  --display-weight: 600;
  --display-transform: none;
  --display-spacing: 0.02em;
  --chrome-font: var(--sans);
  --radius: 14px;  --radius-sm: 8px;
  --bg:
    radial-gradient(ellipse 130% 70% at 50% -20%, #2d8fae 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 105%, #02293d 0%, transparent 60%),
    linear-gradient(176deg, #0d5a76 0%, #063247 35%, #041e2e 70%, #01121c 100%);
  --panel-bg: linear-gradient(145deg, rgba(22, 92, 120, 0.62), rgba(3, 26, 40, 0.86));
  --glow: radial-gradient(circle, rgba(127, 227, 255, 0.18) 0%, rgba(255, 158, 125, 0.05) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 95% 86% at 50% 30%, transparent 36%, rgba(0, 10, 18, 0.78) 100%);
}
/* The seabed, and shafts of light coming down through the water above it.
   Only the shafts move. */
[data-world='reef'] .overlay {
  opacity: 0.9;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='230' viewBox='0 0 720 230'><path d='M34 206 C43 195 43 180 34 168 C25 157 25 142 34 131 C43 120 43 105 34 94 C25 82 25 67 34 56' fill='none' stroke='%231c6a66' stroke-width='5' stroke-linecap='round' opacity='0.75'/><path d='M52 206 C43 198 43 187 52 179 C61 171 61 160 52 152 C43 144 43 133 52 125 C61 117 61 106 52 98' fill='none' stroke='%232a8478' stroke-width='4' stroke-linecap='round' opacity='0.6'/><path d='M70 206 C79 193 79 175 70 162 C61 149 61 131 70 118 C79 105 79 87 70 74 C61 61 61 43 70 30' fill='none' stroke='%2315524f' stroke-width='6' stroke-linecap='round' opacity='0.8'/><path d='M96 210 Q106 172 146 174 T216 210 Z' fill='%2304202d'/><path d='M108 183 Q120 173 151 175' fill='none' stroke='%237fe3ff' stroke-width='1' opacity='.16'/><path d='M150 200 L150 164 M150 183 L136 166 L134 148 M150 175 L164 156 L168 137 M136 166 L125 158 M164 156 L176 152 M150 164 L147 141 M134 148 L127 135' fill='none' stroke='%23ff9e7d' stroke-width='5.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.7'/><circle cx='134' cy='148' r='2.7' fill='%23ffd1a8' opacity='0.7'/><circle cx='168' cy='137' r='2.7' fill='%23ffd1a8' opacity='0.7'/><circle cx='125' cy='158' r='2.7' fill='%23ffd1a8' opacity='0.7'/><circle cx='176' cy='152' r='2.7' fill='%23ffd1a8' opacity='0.7'/><circle cx='147' cy='141' r='2.7' fill='%23ffd1a8' opacity='0.7'/><circle cx='127' cy='135' r='2.7' fill='%23ffd1a8' opacity='0.7'/><path d='M236 202 L196 179' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L203 169' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L213 162' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L224 158' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L236 156' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L248 158' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L259 162' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L269 169' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M236 202 L276 179' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M196 179 A46 46 0 0 1 276 179' fill='none' stroke='%23c98bb0' stroke-width='1.6' opacity='0.45'/><path d='M211 187 A29 29 0 0 1 261 187' fill='none' stroke='%23c98bb0' stroke-width='1.2' opacity='0.45'/><path d='M300 206 C291 199 291 190 300 183 C309 176 309 167 300 160 C291 153 291 144 300 137 C309 130 309 121 300 114' fill='none' stroke='%232a8478' stroke-width='4' stroke-linecap='round' opacity='0.55'/><path d='M318 210 Q325 184 357 186 T410 210 Z' fill='%2304202d'/><path d='M327 192 Q336 185 360 186' fill='none' stroke='%237fe3ff' stroke-width='1' opacity='.16'/><path d='M372 200 L372 173 M372 187 L362 174 L360 160 M372 181 L382 166 L386 152 M362 174 L353 168 M382 166 L392 163 M372 173 L370 155 M360 160 L354 150' fill='none' stroke='%23ff7f8e' stroke-width='4.0' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'/><circle cx='360' cy='160' r='2.1' fill='%23ffd1a8' opacity='0.6'/><circle cx='386' cy='152' r='2.1' fill='%23ffd1a8' opacity='0.6'/><circle cx='353' cy='168' r='2.1' fill='%23ffd1a8' opacity='0.6'/><circle cx='392' cy='163' r='2.1' fill='%23ffd1a8' opacity='0.6'/><circle cx='370' cy='155' r='2.1' fill='%23ffd1a8' opacity='0.6'/><circle cx='354' cy='150' r='2.1' fill='%23ffd1a8' opacity='0.6'/><path d='M428 206 A34 26 0 0 1 496 206 Z' fill='%23b9627a' opacity='.5'/><path d='M438 200 q6 -10 12 0 t12 0 t12 0 t12 0 M446 188 q6 -8 12 0 t12 0 t12 0' fill='none' stroke='%23ffd1a8' stroke-width='1.3' opacity='.4'/><path d='M528 206 C519 194 519 177 528 165 C537 153 537 136 528 124 C519 112 519 95 528 83 C537 71 537 54 528 42' fill='none' stroke='%231c6a66' stroke-width='5' stroke-linecap='round' opacity='0.75'/><path d='M546 206 C555 197 555 185 546 176 C537 167 537 155 546 146 C555 137 555 125 546 116 C537 107 537 95 546 86' fill='none' stroke='%232a8478' stroke-width='4' stroke-linecap='round' opacity='0.6'/><path d='M566 210 Q575 166 612 169 T676 210 Z' fill='%2304202d'/><path d='M577 179 Q588 167 617 169' fill='none' stroke='%237fe3ff' stroke-width='1' opacity='.16'/><path d='M612 200 L612 169 M612 186 L600 171 L598 155 M612 178 L624 162 L627 146 M600 171 L590 164 M624 162 L634 159 M612 169 L609 150 M598 155 L592 144' fill='none' stroke='%23ffb38f' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.65'/><circle cx='598' cy='155' r='2.3' fill='%23ffd1a8' opacity='0.65'/><circle cx='627' cy='146' r='2.3' fill='%23ffd1a8' opacity='0.65'/><circle cx='590' cy='164' r='2.3' fill='%23ffd1a8' opacity='0.65'/><circle cx='634' cy='159' r='2.3' fill='%23ffd1a8' opacity='0.65'/><circle cx='609' cy='150' r='2.3' fill='%23ffd1a8' opacity='0.65'/><circle cx='592' cy='144' r='2.3' fill='%23ffd1a8' opacity='0.65'/><path d='M672 202 L639 183' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L645 175' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L653 169' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L662 165' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L672 164' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L682 165' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L691 169' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L699 175' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M672 202 L705 183' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M639 183 A38 38 0 0 1 705 183' fill='none' stroke='%238fd8ef' stroke-width='1.6' opacity='0.35'/><path d='M651 190 A24 24 0 0 1 693 190' fill='none' stroke='%238fd8ef' stroke-width='1.2' opacity='0.35'/><path d='M0 230 L0 208 Q90 198 180 205 T360 203 T540 206 T720 208 L720 230 Z' fill='%23031a26'/><path d='M0 208 Q90 198 180 205 T360 203 T540 206 T720 208' fill='none' stroke='%237fe3ff' stroke-width='1' opacity='.14'/><path d='M262 214 l4 -9 l4 9 l9 1 l-7 6 l2 9 l-8 -5 l-8 5 l2 -9 l-7 -6 Z' fill='%23ffb38f' opacity='.55'/></svg>"),
    repeating-linear-gradient(100deg, transparent 0 90px, rgba(190, 245, 255, 0.05) 90px 150px, transparent 150px 260px),
    repeating-linear-gradient(96deg, transparent 0 140px, rgba(190, 245, 255, 0.035) 140px 176px, transparent 176px 340px);
  background-repeat: repeat-x, repeat, repeat;
  background-position: center bottom, 0 0, 0 0;
  background-size: 720px 230px, auto, auto;
  animation: reef-shafts 38s ease-in-out infinite alternate;
}
@keyframes reef-shafts {
  to { background-position: center bottom, 130px 0, -90px 0; }
}
/* Caustics: the net of light the surface throws on everything below. */
[data-world='reef'] .texture {
  opacity: 0.5;
  background:
    repeating-linear-gradient(74deg, transparent 0 34px, rgba(180, 245, 255, 0.055) 34px 42px, transparent 42px 80px),
    repeating-linear-gradient(-66deg, transparent 0 48px, rgba(140, 230, 255, 0.045) 48px 54px, transparent 54px 104px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  animation: reef-caustics 14s ease-in-out infinite alternate;
}
@keyframes reef-caustics {
  from { transform: translate3d(-2%, -1%, 0) skewX(-2deg) scale(1.05); }
  to   { transform: translate3d(2%, 1.5%, 0) skewX(3deg) scale(1.12); }
}

/* ------------------------------------------------------------------- lunar */
/* The surface of the moon. Not Galaxy's coloured nebula: a black sky, grey
   ground, hard light, and the Earth hanging over the horizon. The stars do
   not twinkle, because there is no air to make them. */
[data-world='lunar'] {
  --night: #030305;
  --accent: #ffb347;  --accent-soft: #ffe6bf;  --accent-rgb: 255, 179, 71;
  --x: #e8edf2;  --x-rgb: 232, 237, 242;
  --o: #4da3ff;  --o-rgb: 77, 163, 255;
  --accent-x: #ffb347;  --accent-o: #ffffff;
  --ink: #e3e6ea;  --ink-dim: #9aa0aa;  --ink-faint: #666b76;
  --mist: rgba(220, 225, 235, 0.11);  --mist-strong: rgba(220, 225, 235, 0.26);
  --radius: 3px;  --radius-sm: 2px;
  --bg:
    radial-gradient(ellipse 120% 36% at 50% 106%, #2c2e35 0%, transparent 64%),
    linear-gradient(180deg, #000000 0%, #030305 62%, #0a0b0f 100%);
  --panel-bg: linear-gradient(145deg, rgba(34, 36, 44, 0.84), rgba(4, 4, 7, 0.92));
  --glow: radial-gradient(circle, rgba(255, 179, 71, 0.13) 0%, rgba(77, 163, 255, 0.08) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 110% 96% at 50% 42%, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
}
/* The horizon with its craters, and the Earth rising behind it. The lander
   is drawn by js/scenery/lunar.js, so that it can fly. */
[data-world='lunar'] .overlay {
  opacity: 0.95;
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='960' height='250' viewBox='0 0 960 250'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%238d929b'/><stop offset='.18' stop-color='%235b5f68'/><stop offset='1' stop-color='%2315161b'/></linearGradient><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%236f747d'/><stop offset='1' stop-color='%232a2c33'/></linearGradient></defs><path d='M0 250 L0 96 L60 84 L110 92 L150 62 L196 78 L250 70 L300 96 L372 88 L430 104 L500 80 L548 58 L600 82 L668 92 L730 76 L790 98 L850 86 L910 100 L960 96 L960 250 Z' fill='url(%23f)' opacity='.55'/><path d='M0 250 L0 132 Q120 112 240 126 T480 122 T720 130 T960 132 L960 250 Z' fill='url(%23g)'/><path d='M0 132 Q120 112 240 126 T480 122 T720 130 T960 132' fill='none' stroke='%23e8edf2' stroke-width='1.4' opacity='.55'/><ellipse cx='150' cy='168' rx='54' ry='11' fill='%230d0e12'/><path d='M96 168 A54 11 0 0 0 204 168' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M96 168 A54 11 0 0 1 204 168' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><ellipse cx='420' cy='150' rx='30' ry='6' fill='%230d0e12'/><path d='M390 150 A30 6 0 0 0 450 150' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M390 150 A30 6 0 0 1 450 150' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><ellipse cx='610' cy='196' rx='86' ry='17' fill='%230d0e12'/><path d='M524 196 A86 17 0 0 0 696 196' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M524 196 A86 17 0 0 1 696 196' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><ellipse cx='846' cy='160' rx='40' ry='8' fill='%230d0e12'/><path d='M806 160 A40 8 0 0 0 886 160' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M806 160 A40 8 0 0 1 886 160' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><ellipse cx='300' cy='214' rx='44' ry='9' fill='%230d0e12'/><path d='M256 214 A44 9 0 0 0 344 214' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M256 214 A44 9 0 0 1 344 214' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><ellipse cx='60' cy='222' rx='26' ry='6' fill='%230d0e12'/><path d='M34 222 A26 6 0 0 0 86 222' fill='none' stroke='%23c9ced6' stroke-width='1.2' opacity='.5'/><path d='M34 222 A26 6 0 0 1 86 222' fill='none' stroke='%23000' stroke-width='1.2' opacity='.6'/><g fill='%230d0e12' opacity='.8'><path d='M508 138 l10 -9 l12 3 l5 8 Z'/><path d='M742 172 l8 -7 l10 2 l4 7 Z'/><path d='M226 190 l7 -6 l9 2 l3 6 Z'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><defs><radialGradient id='h' cx='.5' cy='.5' r='.5'><stop offset='.62' stop-color='%234da3ff' stop-opacity='.42'/><stop offset='1' stop-color='%234da3ff' stop-opacity='0'/></radialGradient><clipPath id='c'><circle cx='100' cy='100' r='62'/></clipPath></defs><circle cx='100' cy='100' r='100' fill='url(%23h)'/><g clip-path='url(%23c)'><rect width='200' height='200' fill='%231f6fd0'/><path d='M52 78 q16 -22 40 -14 q10 12 -2 24 q-4 18 -22 14 q-20 -6 -16 -24 Z M112 112 q22 -8 34 8 q4 20 -14 30 q-18 2 -24 -14 q-4 -14 4 -24 Z M70 138 q10 -6 18 2 q0 12 -10 14 q-10 -4 -8 -16 Z' fill='%233d9a6a'/><path d='M40 96 q30 -12 62 -2 t64 -10 M34 122 q36 10 66 0 t66 6 M60 60 q24 8 44 0 t40 4' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' opacity='.7'/><circle cx='140' cy='124' r='74' fill='%23000' opacity='.78'/></g></svg>");
  background-repeat: repeat-x, no-repeat;
  background-position: center bottom, 80% calc(100% - 170px);
  background-size: 960px 250px, 190px 190px;
}
/* The sky turns, very slowly. That is the only thing here that moves. */
[data-world='lunar'] .texture {
  opacity: 0.8;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><rect x='505' y='88' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='143' y='36' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='169' y='225' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='307' y='282' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='278' y='294' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='470' y='281' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='489' y='338' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='463' y='191' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='240' y='67' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='157' y='227' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='25' y='485' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='93' y='28' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='23' y='212' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='418' y='39' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='440' y='397' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='139' y='101' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='473' y='30' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='416' y='258' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='477' y='30' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='402' y='135' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='407' y='335' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='280' y='93' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='264' y='310' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='249' y='205' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='76' y='110' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='386' y='365' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='501' y='271' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='432' y='504' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='11' y='229' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='208' y='194' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='256' y='355' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='171' y='200' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='468' y='46' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='214' y='497' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='343' y='145' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='446' y='54' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='334' y='89' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='186' y='411' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='9' y='458' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='177' y='462' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='228' y='393' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='497' y='341' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='423' y='379' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='92' y='153' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='307' y='453' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='191' y='133' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='62' y='54' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='476' y='173' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='178' y='224' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='324' y='515' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='271' y='366' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='250' y='306' width='1' height='1' fill='%23ffffff' opacity='.35'/><rect x='368' y='277' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='470' y='114' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='387' y='165' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='296' y='203' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='159' y='111' width='1' height='1' fill='%23ffffff' opacity='.7'/><rect x='402' y='16' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='509' y='42' width='1' height='1' fill='%23ffffff' opacity='.9'/><rect x='232' y='30' width='1' height='1' fill='%23ffffff' opacity='.5'/><rect x='435' y='107' width='2' height='2' fill='%23ffffff' opacity='.35'/><rect x='144' y='113' width='2' height='2' fill='%23ffffff' opacity='.9'/><rect x='290' y='21' width='2' height='2' fill='%23ffffff' opacity='.35'/><rect x='197' y='372' width='2' height='2' fill='%23ffffff' opacity='.35'/><rect x='118' y='89' width='2' height='2' fill='%23ffffff' opacity='.35'/><rect x='374' y='158' width='2' height='2' fill='%23ffffff' opacity='.5'/><rect x='357' y='478' width='2' height='2' fill='%23ffffff' opacity='.9'/><rect x='68' y='46' width='2' height='2' fill='%23ffffff' opacity='.5'/><rect x='309' y='86' width='2' height='2' fill='%23ffffff' opacity='.5'/><rect x='242' y='474' width='2' height='2' fill='%23ffffff' opacity='.7'/><rect x='420' y='382' width='2' height='2' fill='%23ffffff' opacity='.5'/><rect x='383' y='392' width='2' height='2' fill='%23ffffff' opacity='.7'/><rect x='311' y='140' width='2' height='2' fill='%23ffffff' opacity='.5'/><rect x='411' y='404' width='2' height='2' fill='%23ffffff' opacity='.9'/></svg>");
  background-size: 520px 520px;
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 74%);
  animation: lunar-sky 420s linear infinite;
}
@keyframes lunar-sky { to { background-position: -520px 0; } }

/* ----------------------------------------------------------------- balloon */
/* Up at first light. The sky going from indigo to gold, hills still dark
   below, and five balloons already in the air. */
[data-world='balloon'] {
  --night: #0e1030;
  --accent: #ffb86b;  --accent-soft: #ffe8c7;  --accent-rgb: 255, 184, 107;
  --x: #ff6b6b;  --x-rgb: 255, 107, 107;
  --o: #5ec8e5;  --o-rgb: 94, 200, 229;
  --accent-x: #ffe08a;  --accent-o: #ffffff;
  --ink: #f8f2ea;  --ink-dim: #d2c6d6;  --ink-faint: #9a90b0;
  --mist: rgba(255, 214, 170, 0.13);  --mist-strong: rgba(255, 214, 170, 0.28);
  --display: var(--serif);
  --display-weight: 600;
  --display-transform: none;
  --display-spacing: 0.02em;
  --chrome-font: var(--sans);
  --radius: 16px;  --radius-sm: 9px;
  --bg:
    radial-gradient(ellipse 80% 22% at 50% 100%, rgba(255, 196, 120, 0.7) 0%, transparent 72%),
    linear-gradient(180deg, #10143c 0%, #262259 34%, #4a3372 58%, #7d4279 76%, #b85a6c 89%, #e88a5c 100%);
  --panel-bg: linear-gradient(145deg, rgba(52, 40, 100, 0.82), rgba(16, 14, 46, 0.9));
  --glow: radial-gradient(circle, rgba(255, 184, 107, 0.18) 0%, rgba(255, 107, 107, 0.08) 42%, transparent 70%);
  --vignette: radial-gradient(ellipse 120% 100% at 50% 46%, transparent 56%, rgba(10, 8, 34, 0.6) 100%);
}
/* The balloons themselves are drawn by js/scenery/balloon.js, so that they can
   answer the pointer. */
/* Cloud going past on the wind, and the hills. Only the cloud moves. */
[data-world='balloon'] .texture {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='170' viewBox='0 0 900 170'><path d='M0 170 L0 92 Q110 44 220 80 T450 66 T680 86 T900 92 L900 170 Z' fill='%235b3566' opacity='.75'/><path d='M0 170 L0 122 Q90 88 190 112 T400 104 T620 120 T900 122 L900 170 Z' fill='%233a2452' opacity='.92'/><path d='M0 170 L0 146 Q140 124 280 140 T560 136 T900 146 L900 170 Z' fill='%231c1436'/><g fill='%231c1436'><path d='M118 134 l7 -20 l7 20 Z M132 136 l5 -15 l5 15 Z M604 132 l7 -22 l7 22 Z M620 134 l5 -14 l5 14 Z M760 140 l6 -17 l6 17 Z'/></g><g fill='%23ffd27a' opacity='.8'><rect x='340' y='141' width='2' height='2'/><rect x='352' y='143' width='2' height='2'/><rect x='690' y='142' width='2' height='2'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='520' viewBox='0 0 1400 520'><g transform='translate(180 110) scale(1.5)' fill='%23ffd9c2' opacity='0.16'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g><g transform='translate(760 60) scale(1.0)' fill='%23ffd9c2' opacity='0.12'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g><g transform='translate(1140 210) scale(1.9)' fill='%23ffd9c2' opacity='0.14'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g><g transform='translate(480 330) scale(1.2)' fill='%23ffd9c2' opacity='0.1'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g><g transform='translate(980 440) scale(1.6)' fill='%23ffd9c2' opacity='0.12'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g><g transform='translate(90 430) scale(0.9)' fill='%23ffd9c2' opacity='0.09'><ellipse cx='0' cy='0' rx='70' ry='15'/><ellipse cx='-30' cy='-9' rx='30' ry='15'/><ellipse cx='12' cy='-15' rx='36' ry='19'/><ellipse cx='46' cy='-6' rx='24' ry='12'/></g></svg>");
  background-repeat: repeat-x, repeat-x;
  background-position: center bottom, 0 12%;
  background-size: 900px 170px, 1400px 520px;
  animation: balloon-clouds 170s linear infinite;
}
@keyframes balloon-clouds { to { background-position: center bottom, 1400px 12%; } }