@font-face { font-family: "Jersey 10"; src: url("../assets/fonts/jersey10.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jersey 10"; src: url("../assets/fonts/jersey10-ext.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next-ext.woff2") format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }

/* palette: the single source for the page; js/main.js reads these variables */
:root {
  --ink: #0A0D24; --night: #141A3A; --dusk: #222B5C; --slate: #3A4580; --haze: #6B6FA8; --moon: #B7B3D9;
  --cream: #FFF1D6; --window: #FFD66B; --lamp: #FFA34D; --ember: #D9622B; --brick: #7A3B3B;
  --neon: #FF4F9A; --plum: #9B2F7A; --mint: #5CF2B5; --teal: #2A9D8F; --deepteal: #1E5C5A; --red: #E0473E; --steel: #8C93AD;

  --px: 4px;
  --band: 96px; /* height of the pixel-dissolve strip at the top of each section */
  --pixel: "Jersey 10", ui-monospace, monospace;
  --sans: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  color-scheme: dark;
}
@media (max-width: 44rem) { :root { --band: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 4.25rem; }
body { margin: 0; font: 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--mint); text-underline-offset: 3px; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: .9; margin: 0; letter-spacing: .01em; -webkit-font-smoothing: none; }
h2 { font-size: clamp(3.5rem, 7vw, 6rem); color: var(--cream); }
h3 { font-size: clamp(2.25rem, 3.5vw, 3rem); }
:focus-visible { outline: var(--px) solid var(--mint); outline-offset: var(--px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--mint); color: var(--ink); padding: .5rem 1rem; font-family: var(--pixel); font-size: 1.5rem; }
.skip:focus { top: 1rem; }

/* ---------- pixel primitives ---------- */
/* notched 8-bit frame: a 4px ring made of four offset shadows, corners stay empty */
.frame { --c: var(--cream); box-shadow: 0 calc(var(--px) * -1) 0 0 var(--c), 0 var(--px) 0 0 var(--c), calc(var(--px) * -1) 0 0 0 var(--c), var(--px) 0 0 0 var(--c); }

.btn {
  --bg: var(--lamp); --hi: var(--window); --lo: var(--ember); --fg: var(--ink);
  display: inline-flex; align-items: center; gap: .6rem; position: relative;
  font: 400 1.75rem/1 var(--pixel); color: var(--fg); background: var(--bg); text-decoration: none;
  padding: .55rem 1.1rem .7rem; border: 0; cursor: inherit; white-space: nowrap;
  box-shadow:
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--lo), inset var(--px) var(--px) 0 var(--hi),
    0 calc(var(--px) * -1) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink);
}
.btn:active { transform: translateY(var(--px));
  box-shadow: inset var(--px) var(--px) 0 var(--lo), 0 calc(var(--px) * -1) 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), var(--px) 0 0 var(--ink), 0 var(--px) 0 var(--ink); }
.btn--ghost { --bg: var(--dusk); --hi: var(--slate); --lo: var(--ink); --fg: var(--cream); }
.btn__icon { width: 40px; height: 32px; flex: none; margin: -4px 0; image-rendering: pixelated; }
.btn--soon { --bg: var(--night); --hi: var(--dusk); --lo: var(--ink); --fg: var(--moon); cursor: default; }
.btn--soon:active { transform: none; }
@media (hover: hover) {
  a:hover { color: var(--cream); }
  .btn:not(.btn--soon):hover { --bg: var(--window); --hi: var(--cream); --lo: var(--lamp); color: var(--ink); }
  .btn--ghost:not(.btn--soon):hover { --bg: var(--slate); --hi: var(--haze); --lo: var(--dusk); color: var(--cream); }
}

.tag { display: inline-block; font: 1.25rem/1 var(--pixel); padding: .25rem .5rem .35rem; background: var(--dusk); color: var(--cream); }
.sec--dusk .tag { background: var(--night); }
.tag--mint, .sec--dusk .tag--mint { background: var(--deepteal); color: var(--mint); }
.tag--lamp, .sec--dusk .tag--lamp { background: var(--brick); color: var(--window); }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
/* the band at the top stays transparent so the city shows through the dissolve; JS fills it block by block */
.sec { --bgc: var(--night); position: relative; padding-block: calc(var(--band) + clamp(1.5rem, 5vw, 4rem)) clamp(4rem, 9vw, 8rem);
  background: linear-gradient(var(--bgc), var(--bgc)) 0 var(--band) / 100% calc(100% - var(--band)) no-repeat; }
.sec--dusk { --bgc: var(--dusk); }
.sec--ink { --bgc: var(--ink); }
html:not(.js) .sec, .sec:not([data-dissolve]) { background: var(--bgc); }
.dissolve { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: var(--band); pointer-events: none; image-rendering: pixelated; }
.sec__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec__head p { color: var(--moon); font-size: 1.1875rem; margin-top: 1rem; }

/* ---------- fixed night city: anchored to the bottom so a hiding mobile URL bar never uncovers a gap ---------- */
#city { position: fixed; left: 0; bottom: 0; z-index: -1; image-rendering: pixelated; }

/* ---------- loader (JS only; a CSS timer hides it even if the script never runs) ---------- */
#loader { display: none; }
.js #loader { position: fixed; inset: 0; z-index: 90; background: var(--ink); display: grid; place-content: center; gap: 2.25rem; padding: 1rem; text-align: center;
  animation: loader-failsafe 0s 6s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; } }
#loader.is-done { visibility: hidden; opacity: 0; transition: opacity .3s steps(3), visibility 0s .3s; }
.loader__logo { font: 7rem/1 var(--pixel); color: var(--cream); }
.loader__bar { width: min(22rem, 80vw); height: 28px; margin-inline: auto; padding: 4px; background: var(--ink); }
.loader__fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--mint) 0 16px, transparent 16px 20px); transition: width .2s steps(4); }
.loader__tip { font: 1.625rem/1.2 var(--pixel); color: var(--window); min-height: 2.5em; max-width: 26rem; margin: 0 auto; }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 1.5rem; padding: .6rem var(--gutter);
  background: color-mix(in srgb, var(--ink) 88%, transparent); border-bottom: var(--px) solid var(--dusk); }
.topbar__logo { font: 2.5rem/1 var(--pixel); color: var(--cream); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
/* easter egg: the kid in the logo waves at you (hover, focus or tap); 20-frame strip, 38x49 px each */
.topbar__logo { position: relative; }
.logo-kid { flex: none; width: 38px; height: 49px; margin: -6px 0; background: url(/assets/img/strip-hello.png) 0 0 / 760px 100% no-repeat; image-rendering: pixelated; }
.topbar__logo.is-waving .logo-kid { animation: hello 1.6s steps(20) 1; }
@keyframes hello { to { background-position: -760px 0; } }
.logo-kid__say { position: absolute; left: 6px; top: calc(100% + 12px); white-space: nowrap; pointer-events: none; opacity: 0;
  font: 1.25rem/1 var(--pixel); color: var(--ink); background: var(--cream); padding: .3rem .5rem .4rem; }
.logo-kid__say::before { content: ""; position: absolute; bottom: 100%; left: 12px; width: 8px; height: 8px; background: var(--cream); clip-path: polygon(0 100%, 100% 100%, 0 0); }
.topbar__logo.is-waving .logo-kid__say { animation: say-hi 1.6s steps(1) 1; }
@keyframes say-hi { 12%, 88% { opacity: 1; } }
#nav { display: flex; gap: 1.25rem; margin-left: auto; }
#nav a { font: 1.5rem/1 var(--pixel); color: var(--moon); text-decoration: none; }
.toggles { display: flex; gap: .5rem; }
.toggle { font: 1.25rem/1 var(--pixel); background: var(--dusk); color: var(--moon); border: 0; padding: .4rem .6rem .5rem; cursor: inherit; white-space: nowrap; }
.toggle[aria-pressed="true"] { background: var(--deepteal); color: var(--mint); }
.menu-btn { display: none; }
.lang { font: 1.375rem/1 var(--pixel); color: var(--ink); background: var(--window); border: 0; padding: .3rem .55rem .4rem; cursor: inherit;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink); }
@media (hover: hover) { #nav a:hover { color: var(--window); } }
#nav a[aria-current="page"] { color: var(--window); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
@media (max-width: 60rem) {
  .topbar { gap: .6rem; }
  .menu-btn { display: block; order: 3; color: var(--cream); }
  .toggles { margin-left: auto; gap: .35rem; }
  .toggle { font-size: 1.0625rem; padding: .35rem .45rem .45rem; }
  #nav { display: none; position: absolute; right: var(--gutter); top: calc(100% + .75rem); flex-direction: column; gap: .9rem; margin: 0;
    background: var(--ink); padding: 1rem 1.25rem; min-width: 12rem; --c: var(--slate);
    box-shadow: 0 -4px 0 var(--slate), 0 4px 0 var(--slate), -4px 0 0 var(--slate), 4px 0 0 var(--slate); }
  .topbar.is-open #nav { display: flex; }
}

/* ---------- "kej" (kejar) + "az" (aziz): one word, two tones; "az" is wet paint ---------- */
.az { position: relative; color: var(--neon); }
.az::after { content: ""; position: absolute; left: .02em; right: .04em; top: 74%; height: .34em; background: var(--neon); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 18%, 90% 18%, 90% 52%, 81% 52%, 81% 18%, 58% 18%, 58% 100%, 47% 100%, 47% 18%, 24% 18%, 24% 40%, 15% 40%, 15% 18%, 0 18%);
  transition: height .3s steps(3); }
.az::before { content: ""; position: absolute; left: .12em; top: 8%; width: .07em; height: .07em; background: var(--neon); pointer-events: none;
  box-shadow: 1.12em -.02em 0 var(--neon), 1.2em .3em 0 var(--plum), .02em .42em 0 var(--plum); }
@media (hover: hover) { a:hover .az::after { height: .52em; } }

/* ---------- hero ---------- */
#hero { position: relative; min-height: 100svh; display: grid; background: var(--ink); overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
/* legibility on any frame: a hard pixel outline instead of a darkening wash */
.hero__copy { position: relative; align-self: start; padding: clamp(5.5rem, 12vh, 7.5rem) var(--gutter) 0; max-width: 60rem; }
.hero__copy h1 { font-size: clamp(3.25rem, 6.4vw, 6.5rem); color: var(--cream);
  text-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink), 8px 8px 0 var(--ink); }
.hero__copy h1 span { display: block; }
.hero__copy h1 span + span { color: var(--window); }
.hero__sub { display: inline-block; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); margin-top: 1.25rem; color: var(--cream); background: var(--ink); padding: .6rem .9rem; max-width: 30rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; }
.hero__start { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .25rem;
  font: 1.75rem/1 var(--pixel); color: var(--cream); text-decoration: none; text-shadow: 2px 2px 0 var(--ink); }
.hero__start .arrow { width: 20px; height: 12px; background: var(--window);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 80% 33%, 80% 66%, 60% 66%, 60% 100%, 40% 100%, 40% 66%, 20% 66%, 20% 33%, 0 33%); }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 44rem) {
  #hero { min-height: 0; grid-template-rows: auto auto; }
  .hero__video { position: relative; aspect-ratio: 16 / 9; height: auto; margin-top: 3.75rem; }
  .hero__copy { padding-top: 1.75rem; padding-bottom: 5.5rem; }
  .hero__start { bottom: 1rem; }
}

/* ---------- ledge: a rooftop strip where the crew walks, the city shows through ---------- */
.ledge { position: relative; height: 180px; overflow: hidden; }
.ledge::after { content: ""; position: absolute; inset: auto 0 0; height: 28px;
  background:
    linear-gradient(var(--slate), var(--slate)) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, var(--dusk) 0 28px, var(--ink) 28px 32px) 0 4px / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 12px, var(--dusk) 12px 44px) 0 16px / 100% 12px no-repeat; }
.walker { position: absolute; bottom: 26px; left: 0; z-index: 1; display: flex; gap: 22px; align-items: flex-end; animation: walk 46s linear infinite; }
.walker button { position: relative; background: none; border: 0; padding: 0; cursor: inherit; }
.walker img { height: calc(var(--h, 46) * 2px); width: auto; image-rendering: pixelated; animation: bob .5s steps(2) infinite; }
.walker button:nth-child(2n) img { animation-delay: -.25s; }
.walker .say { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 1.25rem/1 var(--pixel); color: var(--ink); background: var(--cream); padding: .3rem .5rem .4rem; opacity: 0; pointer-events: none; }
.walker .say::after { content: ""; position: absolute; top: 100%; left: 50%; width: 8px; height: 8px; background: var(--cream); clip-path: polygon(0 0, 100% 0, 0 100%); }
.walker button.is-hop img { animation: hop .45s steps(4); }
.walker button.is-hop .say { opacity: 1; }
@media (hover: hover) { .walker button:hover img { animation: hop .45s steps(4); } .walker button:hover .say { opacity: 1; } }
@keyframes walk { from { transform: translateX(-60vw); } to { transform: translateX(110vw); } }
@keyframes bob { 50% { transform: translateY(-2px); } }
@keyframes hop { 25% { transform: translateY(-16px); } 50% { transform: translateY(-24px); } 75% { transform: translateY(-12px); } }

/* ---------- now playing ---------- */
.np { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tv { position: relative; background: var(--steel); padding: 18px 18px 46px;
  box-shadow: inset -6px -6px 0 var(--haze), inset 6px 6px 0 var(--moon), 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 12px 12px 0 var(--ink); }
.tv__screen { position: relative; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; box-shadow: 0 0 0 4px var(--ink); }
.tv__screen video { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.tv__screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 3px, rgb(10 13 36 / .28) 3px 4px); pointer-events: none; }
.tv__knobs { position: absolute; bottom: 12px; right: 18px; display: flex; gap: 10px; }
.tv__knobs i { width: 16px; height: 16px; background: var(--dusk); box-shadow: inset 4px 4px 0 var(--haze); }
.tv__led { position: absolute; bottom: 18px; left: 22px; width: 8px; height: 8px; background: var(--red); }
.tv__caption { font-size: .9375rem; color: var(--moon); margin-top: 1.75rem; }
.np__logo { width: min(100%, 26rem); margin: 0 0 .5rem -6px; }
.np__pitch { font-size: 1.25rem; }
.np__badges { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.players { display: inline-flex; align-items: center; font: 1.75rem/1 var(--pixel); color: var(--ink); background: var(--mint); padding: .35rem .8rem .45rem;
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 6px 6px 0 var(--deepteal); }
.platforms { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: .5rem; }
.platforms li { display: flex; gap: .75rem; align-items: baseline; }
.platforms b { font: 400 1.5rem/1 var(--pixel); min-width: 9.5rem; color: var(--cream); }
.platforms span { color: var(--moon); }
.soon { display: inline-block; font: 1.75rem/1 var(--pixel); color: var(--window); padding: .55rem 1.1rem .7rem; outline: 4px dashed var(--brick); outline-offset: -4px; }
@media (max-width: 56rem) { .np { grid-template-columns: 1fr; } }

/* ---------- player select: kejar + aziz, fighting-game sized ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 4vw, 3rem); padding-bottom: 3.5rem; }
.pcard { --c: var(--window); --s: 3; position: relative; display: grid; justify-items: center; align-content: end; gap: .9rem; min-height: 25rem; padding: 3.5rem 1.5rem 2rem;
  font: inherit; color: var(--cream); background: var(--night); border: 0; cursor: inherit;
  box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), -4px 0 0 var(--c), 4px 0 0 var(--c), 10px 10px 0 var(--ink); }
.pcard--az { --c: var(--neon); }
.pcard__p { position: absolute; top: .9rem; left: 1rem; font: 2rem/1 var(--pixel); color: var(--c); }
.pcard__flag { position: absolute; top: .9rem; right: 1rem; width: 60px; height: 42px; image-rendering: pixelated; }
/* the character is a sprite strip; hovering, focusing or tapping plays it once, start to finish (JS adds .is-playing) */
.pcard__sprite { display: block; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px); image-rendering: pixelated;
  background: var(--strip) 0 0 / calc(var(--fw) * var(--n) * var(--s) * 1px) 100% no-repeat; animation: bob 1s steps(2) infinite; }
.pcard--az .pcard__sprite { animation-delay: -.5s; }
.pcard.is-playing .pcard__sprite { animation: play 4s steps(var(--n)) 1; }
@keyframes play { from { background-position: 0 0; } to { background-position: calc(var(--fw) * var(--n) * var(--s) * -1px) 0; } }
.pcard__name { font: 4.5rem/.9 var(--pixel); color: var(--haze); }
.pcard__name b { font-weight: 400; color: var(--cream); }
.pcard--az .pcard__name b { color: var(--neon); }
.pcard__from { font: 1.625rem/1 var(--pixel); color: var(--moon); }
/* paint runs out of the bottom of the card the first time you play it, and stays there */
.pcard__paint { position: absolute; left: 6%; right: 6%; top: calc(100% + 4px); height: 0; background: var(--c); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 92% 30%, 92% 70%, 84% 70%, 84% 30%, 63% 30%, 63% 100%, 55% 100%, 55% 30%, 34% 30%, 34% 55%, 26% 55%, 26% 30%, 10% 30%, 10% 85%, 3% 85%, 3% 30%, 0 30%); }
.pcard.is-painted .pcard__paint { animation: drip 1.4s steps(7) forwards; }
@keyframes drip { to { height: 56px; } }
@media (hover: hover) { .pcard:hover { transform: translateY(-4px); } }
@media (min-width: 75rem) { .pcard { --s: 4; } } /* integer scales only: pixels stay square */
@media (max-width: 44rem) {
  .pcard { --s: 1.5; min-height: 0; padding: 3rem .75rem 1.25rem; gap: .6rem; }
  .pcard__p { font-size: 1.25rem; top: .6rem; left: .6rem; }
  .pcard__flag { width: 40px; height: 28px; top: .6rem; right: .6rem; }
  .pcard__name { font-size: 2.5rem; }
  .pcard__from { font-size: 1.25rem; }
}
.still .pcard.is-painted .pcard__paint { height: 56px; }

/* ---------- the sea map: sail the islands, plant a flag on each ---------- */
.map { --s: 2; position: relative; padding: clamp(1.5rem, 4vw, 3rem); overflow: hidden;
  background: var(--dusk) url(/assets/img/sea-tile.png) 0 0 / calc(48px * var(--s)) calc(24px * var(--s)); image-rendering: pixelated;
  animation: sea 8s steps(24) infinite; }
@keyframes sea { to { background-position: calc(48px * var(--s)) 0; } }
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route { stroke: var(--cream); stroke-width: 4; stroke-dasharray: 2 12; opacity: .45; }       /* the chart line ahead */
.wake { stroke: var(--teal); stroke-width: 22; }                                                /* water already sailed: the progress bar */
.foam { stroke: var(--mint); stroke-width: 4; stroke-dasharray: 8 16; animation: foam 1.2s steps(6) infinite; }
#map-reveal { stroke: #fff; stroke-width: 40; fill: none; stroke-linecap: round; }
@keyframes foam { to { stroke-dashoffset: -24; } }

/* desktop: one sea band of islands (odd ones high, even ones low) with the stories outside the ship's lane:
   odd stories above the band, even ones below. Each <li> spans all three rows through subgrid. */
.levels { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto minmax(21rem, auto) auto; column-gap: 1rem; row-gap: 1.25rem; }
.level { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; justify-items: center; text-align: center; }
.level > div { transition: opacity .25s steps(3); max-width: 15rem; }
.level:nth-child(odd) > div { grid-row: 1; align-self: end; }
.level:nth-child(even) > div { grid-row: 3; align-self: start; }
.level:not(.is-lit) > div { opacity: .45; }
.level h3 { font-size: 1.875rem; color: var(--cream); margin-bottom: .5rem; }
.level p { font-size: .9375rem; color: var(--cream); background: rgb(10 13 36 / .78); padding: .5rem .6rem; margin: 0; }

/* an island sits at the right of its column so the ship can moor in the water on its left */
.isle { grid-row: 2; justify-self: end; position: relative; flex: none; width: calc(var(--w) * var(--s) * 1px); height: calc(var(--h) * var(--s) * 1px); }
.level:nth-child(odd) .isle { align-self: start; }
.level:nth-child(even) .isle { align-self: end; }
/* grey island underneath, colour copy on top: when claimed, colour floods out from the flag (like the hero film) */
.isle__art, .isle__color { position: absolute; inset: 0; background: var(--isle) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
.isle__art { filter: grayscale(1) brightness(.55); }
.isle__color { clip-path: circle(0 at 38% 58%); }
.level.is-lit .isle__color { clip-path: circle(80% at 38% 58%); }
.level.is-cleared .isle__color { animation: flood .7s steps(7); }
@keyframes flood { from { clip-path: circle(0 at 38% 58%); } to { clip-path: circle(80% at 38% 58%); } }
.level.is-cleared .isle { animation: hop-isle .5s steps(4) .5s; }
@keyframes hop-isle { 40% { transform: translateY(calc(-4px * var(--s))); } }
/* "Claimed!" pops over the island, holds, floats away */
.isle__banner { position: absolute; left: 50%; bottom: 100%; z-index: 4; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 1.75rem/1 var(--pixel); color: var(--window); background: var(--ink); padding: .2rem .55rem .35rem; opacity: 0;
  box-shadow: 0 -3px 0 var(--window), 0 3px 0 var(--window), -3px 0 0 var(--window), 3px 0 0 var(--window); }
.level:nth-child(odd) .isle__banner { bottom: auto; top: calc(100% + 6px); } /* high islands: pop into the lane, away from the story above */
.level.is-cleared .isle__banner { animation: claimed 1.9s steps(19) forwards; }
@keyframes claimed {
  0% { opacity: 1; transform: translate(-50%, 0) scale(.4); } 8% { transform: translate(-50%, 0) scale(1.25); } 14% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; transform: translate(-50%, -8px); } 100% { opacity: 0; transform: translate(-50%, -28px); } }
.isle__num { position: absolute; right: 0; top: calc(-4px * var(--s)); z-index: 2; font: 1.625rem/1 var(--pixel); color: var(--ink);
  background: var(--slate); padding: .15rem .45rem .3rem; box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink); }
.level.is-lit .isle__num { background: var(--window); }
/* the planter (40-frame strip, 30x34 art px) steps off onto the left beach; the flag it plants stays at its pole */
.isle__planter, .isle__flag { position: absolute; z-index: 1; image-rendering: pixelated; pointer-events: none; }
.isle__planter { --pw: 30; --ph: 34; --pn: 40; left: 10%; bottom: 20%; width: calc(var(--pw) * var(--s) * 1px); height: calc(var(--ph) * var(--s) * 1px);
  background: url(/assets/img/strip-plant.png) 0 0 / calc(var(--pw) * var(--pn) * var(--s) * 1px) 100% no-repeat; visibility: hidden; }
.level.is-claiming .isle__planter { visibility: visible; background-position: calc(var(--f, 0) * var(--pw) * var(--s) * -1px) 0; } /* frame scrubbed by scroll */
.isle__flag { left: calc(10% + 23px * var(--s)); bottom: 20%; width: calc(12px * var(--s)); height: calc(24px * var(--s));
  background: url(/assets/img/flag.png) 0 0 / calc(36px * var(--s)) 100% no-repeat; visibility: hidden; }
.level.is-lit .isle__flag { visibility: visible; animation: flag-wave .6s steps(3) infinite; }
@keyframes flag-wave { to { background-position: calc(-36px * var(--s)) 0; } }

/* desktop, when the map fits the screen: pin it while the scroll sails the route (the spacer is the voyage length) */
@media (min-width: 52.01rem) and (min-height: 55rem) {
  .map-track::after { content: ""; display: block; height: 2600px; }
  .map { position: sticky; top: 5rem; }
}
.still .map-track::after { display: none; }
.still .map { position: relative; top: auto; }

/* fireworks: one pixel canvas over the whole map, at art scale */
.map__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; image-rendering: pixelated; }
/* islands claimed counter, top right of the chart */
.map__hud { position: absolute; top: 1rem; right: 1rem; z-index: 6; margin: 0; display: flex; align-items: center; gap: .45rem;
  font: 1.625rem/1 var(--pixel); color: var(--cream); background: var(--ink); padding: .3rem .6rem .45rem;
  box-shadow: 0 -3px 0 var(--slate), 0 3px 0 var(--slate), -3px 0 0 var(--slate), 3px 0 0 var(--slate); }
.map__hud b { font-weight: 400; color: var(--window); }
.map__hud.is-bump b { animation: pop .3s steps(3); display: inline-block; }
.map__hud-flag { width: 24px; height: 48px; margin: -12px 0 -14px; background: url(/assets/img/flag.png) 0 0 / 72px 100% no-repeat; image-rendering: pixelated; }

/* the ship, built like a game sprite: the outer box only moves (one JS-owned transform on the art-pixel grid);
   the inner boat only swaps frames (hero aboard / ashore, facing right / left) and bobs */
.map__ship { --fw: 69; --fh: 67; --dir: 0; --ashore: 0; position: absolute; left: 0; top: 0; z-index: 3; /* .is-behind: y-sorted behind an island */ pointer-events: none; will-change: transform; }
.map__ship.is-back { --dir: 2; }
.map__ship.is-behind { z-index: 0; }
.map__ship.is-ashore { --ashore: 1; }
.map__boat { display: block; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px); image-rendering: pixelated;
  background: url(/assets/img/ship.png) calc((var(--dir) + var(--ashore)) * var(--fw) * var(--s) * -1px) 0 / calc(var(--fw) * 4 * var(--s) * 1px) 100% no-repeat;
  animation: boat-bob 1.4s steps(2) infinite; }
@keyframes boat-bob { 50% { transform: translateY(calc(1px * var(--s))); } }

@media (max-width: 52rem) {
  .map { --s: 1; }
  .levels { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2.5rem; padding-left: 5.25rem; padding-top: 3.25rem; } /* room for the counter */
  .level, .level:nth-child(odd), .level:nth-child(even) { grid-row: auto; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 1rem; }
  .level > div, .level:nth-child(odd) > div, .level:nth-child(even) > div { display: grid; gap: .5rem; max-width: none; }
  .isle, .level:nth-child(odd) .isle, .level:nth-child(even) .isle { align-self: flex-start; }
  .isle__num { font-size: 1.25rem; }
}
.still .map, .still .foam, .still .map__boat { animation: none; }

/* ---------- why play ---------- */
.why { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.why__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.why__row:nth-child(even) .why__clip { order: 2; --sx: -16px; --c: var(--neon); }
/* no rotation anywhere: rotated pixel art stops being square pixels */
.why__clip { background: var(--ink); padding: 10px; --c: var(--lamp);
  box-shadow: 0 -4px 0 var(--c), 0 4px 0 var(--c), -4px 0 0 var(--c), 4px 0 0 var(--c), var(--sx, 16px) 16px 0 var(--dusk); }
.why__row:nth-child(3) .why__clip { --c: var(--mint); }
.why__clip video { width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; }
.why__row h3 { font-size: clamp(3rem, 5.5vw, 4.75rem); margin-bottom: 1.25rem; }
.why__row:nth-child(1) h3 { color: var(--lamp); }
.why__row:nth-child(2) h3 { color: var(--neon); }
.why__row:nth-child(3) h3 { color: var(--mint); }
.why__row p { font-size: 1.1875rem; }
@media (max-width: 48rem) { .why__row { grid-template-columns: 1fr; } .why__row:nth-child(even) .why__clip { order: 0; } }

/* ---------- devlog ---------- */
.log { display: grid; gap: clamp(4rem, 9vw, 7.5rem); }
.entry__art { position: relative; background: var(--ink); overflow: hidden; }
.entry__art img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; image-rendering: pixelated; }
.entry__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.5rem 0 1rem; }
.entry__meta time { font: 1.5rem/1 var(--pixel); color: var(--window); margin-right: .5rem; }
.entry h3 { font-size: clamp(3rem, 6vw, 5rem); margin-bottom: 1rem; max-width: 24ch; }
.entry ul { margin: 0; padding-left: 1.25rem; max-width: 62ch; font-size: 1.1875rem; }
.entry li::marker { content: "▪ "; color: var(--lamp); }
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 8px; margin-left: -4px; background: var(--cream); pointer-events: none;
  box-shadow: -4px 0 0 var(--ink), 4px 0 0 var(--ink); }
.ba__handle::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--cream); color: var(--ink); font: 1.5rem/1 var(--pixel); padding: .35rem .5rem .45rem; white-space: nowrap; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; touch-action: pan-y; }
.ba input:focus-visible + .ba__handle { background: var(--mint); }
.ba__labels { position: absolute; inset: auto 0 .75rem; display: flex; justify-content: space-between; padding: 0 .75rem; pointer-events: none; }

/* ---------- websites: a quest board of notes, then the enquiry form ---------- */
.sec--page { padding-top: calc(var(--band) + 6rem); min-height: 100svh; } /* first section of a subpage: clears the fixed header */
.page-title { font-size: clamp(3.5rem, 8vw, 7rem); color: var(--cream); text-shadow: var(--px) var(--px) 0 var(--ink); }
.quests { list-style: none; margin: 0 0 3rem; padding: 2.25rem clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem);
  background: var(--brick) repeating-linear-gradient(var(--brick) 0 38px, #5a2b2b 38px 42px);
  box-shadow: inset 0 0 0 6px #5a2b2b, 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink); }
.quest { position: relative; background: var(--cream); color: var(--ink); padding: 1.75rem 1.25rem 1.25rem; box-shadow: 6px 6px 0 rgb(10 13 36 / .45); }
.quest::before { content: ""; position: absolute; top: 8px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: var(--neon); box-shadow: 0 0 0 3px var(--ink), inset -3px -3px 0 var(--plum); }
.quest:nth-child(2) { margin-top: 1.25rem; }
.quest h3 { font-size: 2.125rem; color: var(--plum); margin-bottom: .6rem; }
.quest p { margin: 0; font-size: 1rem; }

.enquiry { --c: var(--cream); background: var(--ink); padding: clamp(1.25rem, 4vw, 2.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.enquiry__head, .enquiry .chips, .field--wide, .enquiry__send, .enquiry__status { grid-column: 1 / -1; }
.enquiry__head h3 { font-size: clamp(2.25rem, 4vw, 3rem); color: var(--window); margin-bottom: .75rem; }
.enquiry__head p { margin: 0 0 .35rem; color: var(--moon); }
.enquiry__lang { color: var(--mint) !important; }
.field { display: grid; gap: .5rem; font: 1.5rem/1 var(--pixel); color: var(--cream); }
.field small { font: .875rem var(--sans); color: var(--haze); }
.field input, .field textarea { width: 100%; font: 1.0625rem/1.5 var(--sans); color: var(--cream); background: var(--night); border: 0; padding: .75rem .9rem; resize: vertical;
  box-shadow: 0 -3px 0 var(--slate), 0 3px 0 var(--slate), -3px 0 0 var(--slate), 3px 0 0 var(--slate); }
.field input::placeholder, .field textarea::placeholder { color: var(--haze); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: 0 -3px 0 var(--mint), 0 3px 0 var(--mint), -3px 0 0 var(--mint), 3px 0 0 var(--mint); }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.chips legend { font: 1.5rem/1 var(--pixel); color: var(--cream); margin-bottom: .75rem; padding: 0; }
.chips label { position: relative; cursor: inherit; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; font: 1.375rem/1 var(--pixel); color: var(--moon); background: var(--dusk); padding: .45rem .8rem .55rem;
  box-shadow: 0 -3px 0 var(--slate), 0 3px 0 var(--slate), -3px 0 0 var(--slate), 3px 0 0 var(--slate); }
.chips input:checked + span { color: var(--ink); background: var(--mint); box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 4px 4px 0 var(--deepteal); }
.chips input:focus-visible + span { outline: var(--px) solid var(--window); outline-offset: 4px; }
@media (hover: hover) { .chips label:hover span { color: var(--cream); } .chips label:hover input:checked + span { color: var(--ink); } }
.enquiry__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.enquiry__send .note { margin: 0; font-size: .9375rem; color: var(--haze); }
.enquiry button[disabled] { opacity: .6; }
.enquiry__status { margin: 0; min-height: 1.2em; font: 1.625rem/1.2 var(--pixel); color: var(--lamp); }
.enquiry__status.is-ok { color: var(--mint); }
.enquiry { position: relative; }
@media (max-width: 52rem) { .quests { grid-template-columns: 1fr; } .quest:nth-child(2) { margin-top: 0; } .enquiry { grid-template-columns: 1fr; } }

/* ---------- INSERT COIN (shown once a newsletter endpoint exists) ---------- */
.arcade { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; background: var(--plum); padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: inset -8px -8px 0 #6d1f56, inset 8px 8px 0 var(--neon), 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink); }
.arcade h2 { color: var(--window); text-shadow: var(--px) var(--px) 0 var(--ink); }
.arcade p { color: #FFE3F0; font-size: 1.1875rem; margin-top: 1rem; }
.coin-form { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.coin-form label { flex-basis: 100%; font: 1.5rem/1 var(--pixel); color: var(--cream); }
.coin-form input { flex: 1 1 16rem; min-width: 0; font: 1.125rem var(--sans); color: var(--cream); background: var(--ink); border: 0; padding: .8rem 1rem; cursor: text;
  box-shadow: 0 -4px 0 var(--cream), 0 4px 0 var(--cream), -4px 0 0 var(--cream), 4px 0 0 var(--cream); }
.coin-form input:focus-visible { outline: none; box-shadow: 0 -4px 0 var(--mint), 0 4px 0 var(--mint), -4px 0 0 var(--mint), 4px 0 0 var(--mint); }
.arcade .coin-msg { min-height: 1.6em; margin-top: 1rem; font: 1.625rem/1.1 var(--pixel); color: var(--window); }
.slot-machine { position: relative; width: 150px; height: 230px; background: var(--ink); display: grid; place-items: center; align-content: center; gap: 12px;
  box-shadow: 0 -4px 0 var(--cream), 0 4px 0 var(--cream), -4px 0 0 var(--cream), 4px 0 0 var(--cream); }
.slot-machine__slit { width: 12px; height: 56px; background: #000; box-shadow: 0 0 0 6px var(--haze), 0 0 0 10px var(--slate); }
.slot-machine__light { width: 64px; height: 20px; background: var(--brick); margin-top: 18px; }
.slot-machine.is-lit .slot-machine__light { background: var(--mint); animation: blink .25s steps(1) 6; }
.slot-machine__label { font: 1.25rem/1 var(--pixel); color: var(--window); }
.coin { position: absolute; left: 50%; top: -90px; width: 40px; height: 40px; margin-left: -20px; opacity: 0; image-rendering: pixelated; pointer-events: none; }
.coin.is-dropping { animation: coin-drop .9s steps(9) forwards, coin-spin .3s steps(3) 3; }
@keyframes coin-drop { 0% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(130px); } 100% { opacity: 0; transform: translateY(150px) scaleY(.2); } }
@keyframes coin-spin { 50% { scale: .2 1; } }
@media (max-width: 44rem) { .arcade { grid-template-columns: 1fr; } .slot-machine { order: -1; margin: 0 auto; width: 120px; height: 180px; } }

/* ---------- FAQ: the NPC answers ---------- */
.faq { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.npc { --s: 3; position: sticky; top: 6rem; display: grid; justify-items: center; gap: .5rem; }
/* Pola the panda: a sprite strip that plays once whenever a question opens (JS adds .is-talking) */
.npc__sprite { display: block; width: calc(var(--fw) * var(--s) * 1px); height: calc(var(--fh) * var(--s) * 1px); image-rendering: pixelated;
  background: var(--strip) 0 0 / calc(var(--fw) * var(--n) * var(--s) * 1px) 100% no-repeat; animation: bob 1.2s steps(2) infinite; }
.npc.is-talking .npc__sprite { animation: play 4s steps(var(--n)) 1; }
.npc__name { font: 1.5rem/1 var(--pixel); color: var(--red); }
.asks { display: flex; flex-direction: column; gap: 1.25rem; }
.ask { background: var(--ink); }
.ask summary { list-style: none; cursor: inherit; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.25rem; font: 1.875rem/1.05 var(--pixel); }
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after { content: ""; flex: none; width: 16px; height: 10px; background: var(--window); clip-path: polygon(0 0, 100% 0, 100% 40%, 75% 40%, 75% 70%, 50% 70%, 50% 100%, 50% 100%, 25% 70%, 25% 40%, 0 40%); }
.ask[open] summary::after { transform: rotate(180deg); }
.ask[open] summary { color: var(--window); }
.ask__a { padding: 0 1.25rem 1.25rem; font-size: 1.125rem; }
.ask:not([open]) > .ask__a { display: none; } /* belt and braces: some engines lay out closed <details> content */
.ask__a p { margin: 0; }
.ask__a .typed::after { content: "▌"; color: var(--mint); animation: blink .8s steps(1) infinite; }
.ask__a .typed.is-done::after { content: none; }
@media (max-width: 44rem) { .faq { grid-template-columns: minmax(0, 1fr); } .npc { --s: 2; position: static; grid-auto-flow: column; justify-content: start; align-items: end; } }

/* ---------- footer: the city stands on this roof (see drawCity) ---------- */
.foot { position: relative; padding-top: 14rem; }
.foot__roof { position: absolute; left: 0; right: 0; top: calc(14rem - 24px); height: 24px; background: var(--ink); box-shadow: 0 -4px 0 var(--slate); }
.cat { position: absolute; top: calc(14rem - 24px - 36px); left: 0; width: 64px; height: 36px; animation: cat-walk 26s linear infinite; }
.cat canvas { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes cat-walk { from { transform: translateX(-80px); } to { transform: translateX(100vw); } }
.foot__body { background: var(--ink); padding: 2.5rem 0 3rem; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: end; }
.foot__logo { font: 4.5rem/1 var(--pixel); }
.foot__love { color: var(--moon); margin: .5rem 0 0; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot nav a { font: 1.5rem/1 var(--pixel); color: var(--moon); text-decoration: none; }
@media (hover: hover) { .foot nav a:hover { color: var(--window); } }
.foot small { display: block; margin-top: 2rem; color: var(--haze); }

/* ---------- CRT overlay: scanlines + still grain + one slow refresh band ---------- */
.crt { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden;
  background: repeating-linear-gradient(transparent 0 2px, rgb(10 13 36 / .12) 2px 3px), var(--grain, none) 0 0 / 128px 128px; }
.crt::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18vh;
  background: linear-gradient(transparent, rgb(255 241 214 / .035) 40%, rgb(255 241 214 / .05) 50%, rgb(255 241 214 / .035) 60%, transparent);
  transform: translateY(-20vh); animation: refresh 9s linear infinite; }
@keyframes refresh { 0%, 55% { transform: translateY(-20vh); } 100% { transform: translateY(110vh); } }

/* ---------- motion off: everything holds still ---------- */
.still *, .still *::before, .still *::after { animation-play-state: paused !important; transition: none !important; }
.still .walker { animation: none; transform: none; left: 8%; }
.still .cat { animation: none; left: 70%; }
.still .crt::after { display: none; }
html.still { scroll-behavior: auto; }