:root { color-scheme: dark; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif; background: #083aa5 url("assets/studs.svg") repeat; color: #bfc4cd; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; }
main { width: min(1040px, calc(100vw - 40px), calc((100svh - 40px) * 4 / 3)); transition: width .55s cubic-bezier(.2,.7,.3,1); }
body.game-expanded main { width: min(100vw, calc(100svh * 4 / 3)); }
body.game-expanded #stage { box-shadow: none; }
#stage { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #343840, 0 22px 90px #000; }
#isle { display: block; width: 100%; height: 100%; outline: none; }
#launcher { position: absolute; inset: 0; isolation: isolate; background: #121b23; transition: opacity .18s ease; }
#launcher.departing { opacity: 0; pointer-events: none; }
.artwork { position: absolute; inset: -3%; transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)); transition: transform 1.8s cubic-bezier(.2,.7,.3,1); }
.artwork img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; display: block; animation: drift 24s ease-in-out infinite alternate; filter: saturate(.86) contrast(1.07) brightness(.83); }
@keyframes drift { from { transform: scale(1.025) translate(-.3%, .3%); } to { transform: scale(1.055) translate(.5%, -.5%); } }
.crt-glass { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #0003 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #ff000009 0 1px, #00ff0007 1px 2px, #0000ff09 2px 3px); box-shadow: inset 0 0 90px 25px #0009, inset 0 0 5px 2px #000; }
.start-panel { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); width: min(280px, 90%); background: #c0c0c0; color: #111; padding: 3px; border: 2px solid; border-color: #fff #252525 #252525 #fff; box-shadow: 1px 1px 0 #000, 0 8px 35px #0007; color-scheme: light; }
.titlebar { display: flex; align-items: center; gap: 6px; padding: 2px 3px; background: #000080; color: #fff; font-size: 13px; font-weight: 700; }
.titlebar img { image-rendering: pixelated; }
.panel-body { padding: 12px 10px 11px; text-align: center; }
button { color: #111; background: #c0c0c0; font: inherit; border: 2px solid; border-color: #fff #555 #555 #fff; border-radius: 0; cursor: pointer; min-height: 26px; padding: 3px 12px; }
button:active:not(:disabled) { border-color: #555 #fff #fff #555; }
button:focus-visible { outline: 1px dotted currentColor; outline-offset: -5px; }
button:disabled { cursor: default; color: #777; text-shadow: 1px 1px #fff; }
.actions { display: flex; justify-content: center; gap: 8px; }
#play, #continue { width: 90px; font: 13px/1.3 "MS Sans Serif", Tahoma, Arial, sans-serif; }
.options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 12px; font-size: 12px; }
.options label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.options input { margin: 0; width: 14px; height: 14px; accent-color: #000080; }
#loading { margin-top: 16px; font-size: 12px; text-align: left; }
#loading-label { display: block; margin-bottom: 6px; min-height: 16px; }
#loading-bar { height: 17px; border: 2px solid; border-color: #777 #fff #fff #777; padding: 2px; background: #d5d5d5; overflow: hidden; }
#loading-fill { height: 100%; width: var(--progress, 0%); background: repeating-linear-gradient(90deg, #000080 0 9px, transparent 9px 12px); transition: width .2s ease; }
#loading-bar:not([aria-valuenow]) #loading-fill { width: 30%; animation: busy 1.6s ease-in-out infinite alternate; }
@keyframes busy { to { transform: translateX(235%); } }
#launcher-error { font-size: 14px; line-height: 1.45; margin: 14px 0 8px; }
#retry, #silent { margin-top: 8px; font-size: 14px; }
#travel { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); background: #c0c0c0; color: #111; padding: 12px 16px; width: min(320px, 85%); font-size: 14px; border: 2px outset #ddd; }
#travel progress { display: block; width: 100%; height: 13px; margin-top: 8px; accent-color: #000080; }
.no-script { position: absolute; top: 10%; left: 10%; right: 10%; padding: 16px; background: #c0c0c0; color: #111; text-align: center; }
[hidden] { display: none !important; }
@media (max-width: 560px) { main { width: calc(100vw - 16px); } .start-panel { bottom: 5%; width: min(285px, 85%); } .panel-body { padding: 10px 14px; } #loading { margin-top: 10px; } .options { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .artwork { transform: none; } }


body.game-instant main { transition: none; }

@font-face { font-family: "Neuland Island"; src: url("assets/neuland-island.woff2") format("woff2"); font-display: block; }
.masthead { height: 150px; padding: 0 0 16px; text-align: center; overflow: hidden; transition: height .55s ease, opacity .3s ease, padding .55s ease; }
.island-title { display: block; width: min(560px, 96%); height: 118px; margin: 0 auto; overflow: visible; }
.island-letters { font-family: "Neuland Island"; filter: drop-shadow(4px 6px 0 #25152c); }
.title-letter { animation: title-float 5.8s ease-in-out var(--phase) infinite; }
@keyframes title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.edition { margin: -1px 0 0 24%; font: 16px/1.2 "Times New Roman", Times, serif; letter-spacing: 3px; color: #fff; text-shadow: 1px 2px 0 #041949; }
body.game-expanded .masthead { height: 0; opacity: 0; padding: 0; }
body.game-instant .masthead { transition: none; }
@media (max-width: 560px) { .masthead { height: 118px; } .island-title { height: 88px; } .edition { font-size: 13px; letter-spacing: 2px; } }

/* Title is part of the cover, under its CRT glass, never a separate page header. */
.masthead { position: absolute; top: 4%; left: 8%; width: 84%; height: auto; padding: 0; overflow: visible; }
.island-title { width: 100%; height: auto; }
.edition { font-size: clamp(12px, 2.2vw, 23px); margin-top: -1%; }
@media (max-width: 560px) { .masthead { height: auto; } .island-title { height: auto; } .edition { font-size: 12px; } }

/* The expanded canvas includes the black margins, so the engine owns CRT spill there. */
:root { background: #000; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #083aa5 url("assets/studs.svg") repeat; opacity: 1; transition: opacity .55s ease; }
main { --cover-width: min(1040px, calc(100vw - 40px), calc((100svh - 40px) * 4 / 3)); width: var(--cover-width); height: calc(var(--cover-width) * 3 / 4); transition: width .55s cubic-bezier(.2,.7,.3,1), height .55s cubic-bezier(.2,.7,.3,1); }
#stage { height: 100%; }
body.game-expanded main { width: 100vw; height: 100svh; }
body.game-expanded::before { opacity: 0; }
body.game-instant::before, body.game-instant main { transition: none; }
@media (max-width: 560px) { main { --cover-width: min(calc(100vw - 16px), calc((100svh - 16px) * 4 / 3)); } }

.masthead { z-index: 0; }
.crt-glass { z-index: 1; }
.start-panel { z-index: 0; }
.edition { margin-top: 1%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(16px, 3.4vw, 32px); line-height: 1.2; letter-spacing: .12em; text-shadow: 0 2px 2px #071938, 1px 1px 0 #071938; }

.edition { margin-top: -2.5%; margin-left: 38%; }

@font-face { font-family: "Island Edition"; src: url("assets/edition.woff2") format("woff2"); font-display: swap; }
.edition { font-family: "Island Edition", Georgia, serif; letter-spacing: .105em; }
.edition > span > span { display: inline-block; transform: rotate(-1deg); }
.edition > span > span:nth-child(3n) { transform: translateY(-.035em) rotate(2deg); }
.edition > span > span:nth-child(4n) { transform: translateY(.025em) rotate(-2deg); }

/* ==== The stud plate behind the cover ========================================================================
   LEGO Racers' front-end backdrop, its MENUDATA/BACKDRP.BMP, measured and rebuilt as CSS in the sister
   repository (LegoRacers, lab/studs, card R41B). It is a product: an evenly lit plate with the corner shading
   multiplied on afterwards, which is exactly `background-blend-mode: multiply`.

     assets/studs.svg   one pitch of plate. Repeated, never stretched: a stud is round on any screen.
     the data: image    the light, a source below the bottom right, two soft cone edges, a floor,
                        stretched to the viewport and MULTIPLIED over the tile.
     the gradient       colour-dodged on top: the original is over-exposed in its hot corner (x1.22).

   Nine studs across the viewport's shorter side, the original's count. Both images and the gradient are written
   by that repository's make-svg.py from its C++ constants: regenerate them there, do not edit the numbers here.
   The fade to black when the game expands is `body.game-expanded::before` above, unchanged. */
body::before {
  --studs-pitch: calc(100vmin / 9);
  background-color: #00f;
  background-image:
    radial-gradient(ellipse 156.25% 208.333% at 100% 123.75%, rgb(94 94 94) 0%, rgb(66 66 66) 8%, rgb(26 26 26) 16%, #000 21.41%),
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 480%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3CradialGradient id=%22beam%22 gradientUnits=%22userSpaceOnUse%22 cx=%22640%22 cy=%22594%22 r=%221000%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%220.2141%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%220.24%22 stop-color=%22rgb(238,238,238)%22/%3E%3Cstop offset=%220.32%22 stop-color=%22rgb(196,196,196)%22/%3E%3Cstop offset=%220.4%22 stop-color=%22rgb(161,161,161)%22/%3E%3Cstop offset=%220.5%22 stop-color=%22rgb(123,123,123)%22/%3E%3Cstop offset=%220.6%22 stop-color=%22rgb(90,90,90)%22/%3E%3Cstop offset=%220.7%22 stop-color=%22rgb(63,63,63)%22/%3E%3Cstop offset=%220.8%22 stop-color=%22rgb(40,40,40)%22/%3E%3Cstop offset=%220.9%22 stop-color=%22rgb(21,21,21)%22/%3E%3Cstop offset=%221%22 stop-color=%22rgb(0,0,0)%22/%3E%3C/radialGradient%3E%3ClinearGradient id=%22edge0%22 gradientUnits=%22userSpaceOnUse%22 x1=%22309.75%22 y1=%22-286.97%22 x2=%2276.47%22 y2=%22-70.85%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%221%22/%3E%3Cstop offset=%220.2138%22 stop-color=%22%23000%22 stop-opacity=%220.85%22/%3E%3Cstop offset=%220.4277%22 stop-color=%22%23000%22 stop-opacity=%220.28%22/%3E%3Cstop offset=%220.717%22 stop-color=%22%23000%22 stop-opacity=%220.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22edge1%22 gradientUnits=%22userSpaceOnUse%22 x1=%22-184.04%22 y1=%22115.54%22 x2=%2285.29%22 y2=%22-53.54%22%3E%3Cstop offset=%220%22 stop-color=%22%23000%22 stop-opacity=%221%22/%3E%3Cstop offset=%220.2138%22 stop-color=%22%23000%22 stop-opacity=%220.85%22/%3E%3Cstop offset=%220.4277%22 stop-color=%22%23000%22 stop-opacity=%220.28%22/%3E%3Cstop offset=%220.717%22 stop-color=%22%23000%22 stop-opacity=%220.03%22/%3E%3Cstop offset=%221%22 stop-color=%22%23000%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%22640%22 height=%22480%22 fill=%22url(%23beam)%22/%3E%3Crect width=%22640%22 height=%22480%22 fill=%22url(%23edge0)%22/%3E%3Crect width=%22640%22 height=%22480%22 fill=%22url(%23edge1)%22/%3E%3Crect width=%22640%22 height=%22480%22 fill=%22%23fff%22 opacity=%220.178%22/%3E%3C/svg%3E"),
    url("assets/studs.svg");
  background-blend-mode: color-dodge, multiply, normal;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, var(--studs-pitch) var(--studs-pitch);
  background-position: 0 0, 0 0, 0 0;
}
/* ==== end of the stud plate ================================================================================= */

/* Credits stay below the cover in their own row, including when text is enlarged. */
body { height: 100svh; grid-template-rows: minmax(180px, 1fr) auto; }
.launcher-window { width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
main { --cover-width: min(1040px, calc(100cqw - 40px), calc((100cqh - 40px) * 4 / 3)); }
.project-note { width: 100%; padding: 10px max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); color: #edf1fa; background: rgb(2 8 23 / 76%); font: .8125rem/1.6 Tahoma, Arial, sans-serif; text-align: center; }
.project-note p { max-width: 1100px; margin: 0 auto; }
.project-note a, .project-note button, #credits a { color: #fff3a6; text-decoration: underline; text-underline-offset: .18em; }
.project-note button { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; color-scheme: dark; background: none; box-shadow: none; font: inherit; cursor: pointer; }
.project-note a:hover, .project-note button:hover, #credits a:hover { color: #fff; }
.project-note :focus-visible, #credits :focus-visible { outline: 2px solid #ffed00; outline-offset: 3px; }
body.game-expanded { grid-template-rows: minmax(0, 1fr); }
body.game-expanded .project-note { display: none; }
#credits { width: min(44rem, calc(100% - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 3px solid; border-color: #758dd8 #020a27 #020a27 #758dd8; border-radius: 0; color: #edf1fa; background: #0a1736; font: 1rem/1.65 Tahoma, Arial, sans-serif; box-shadow: 0 0 0 1px #000, 8px 8px 0 #0006; overflow-y: auto; overscroll-behavior: contain; }
#credits::backdrop { background: #000b; }
.credits-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 16px 24px; border-bottom: 3px solid #ffdb27; background: #122b78; }
.credits-heading h2 { margin: 0; font: 2rem/1.2 "Island Edition", Georgia, serif; color: #ffed00; text-shadow: 2px 2px 0 #020b28; }
.credits-heading button { flex-shrink: 0; min-height: 40px; padding: 4px 14px; border: 2px solid; border-color: #b7c8ff #07102f #07102f #b7c8ff; border-radius: 0; color: #ffed00; background: #294493; font: 1.375rem/1.2 "Island Edition", Georgia, serif; }
.credits-heading button:hover { color: #fff; background: #3b5cb8; }
.credits-heading button:active { border-color: #07102f #b7c8ff #b7c8ff #07102f; }
.credits-content { padding: 20px 24px 24px; overflow-wrap: anywhere; }
.credits-content p { margin: 0; }
.credits-content ul { margin: 0; padding-left: 1.2em; }
.credits-content li { padding-left: .35em; margin: 0 0 20px; }
.credits-content li::marker { color: #ffed00; }
.credits-ownership { border-top: 1px solid #536586; padding-top: 20px; }
@media (max-width: 600px) {
  main { --cover-width: min(calc(100cqw - 16px), calc((100cqh - 16px) * 4 / 3)); }
  .credits-heading { padding: 12px 16px; }
  .credits-content { padding: 16px; }
}