/* Minitans site. One look, the game's own: its title type (Lilita One with an ink outline), gold and sky buttons,
   navy panels, and the real game sky. Few sizes, lots of room. */
@font-face { font-family: 'Lilita One'; src: url(../fonts/lilita-one-latin-400-normal.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Nunito'; font-weight: 800; src: url(../fonts/nunito-latin-800-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; font-weight: 900; src: url(../fonts/nunito-latin-900-normal.woff2) format('woff2'); font-display: swap; }

:root {
  color-scheme: light;
  --ink: #1b1530;
  --navy: #1d2a55;
  --navy-2: #24346a;
  --night: #141e40;
  --sky-1: #5590e6;
  --sky-2: #2c5bb0;
  --sky-top: #3466ad;   /* the top band of the game's sky (the hero shows it above the game) */
  --pale: #c3e1f3;
  --gold-1: #ffe46b;
  --gold-2: #ffbe1a;
  --gold: #ffd84a;
  --rune: #63f2e3;
  --green: #8ee86a;
  --red: #ff7a6b;
  --stone-1: #c9d0e0;
  --stone-2: #8e97b3;
  --soft: #c3cdf0;
  --muted: #8f9cc8;
  --soil: #2b2134;
  --fd: 'Lilita One', system-ui, sans-serif;
  --fb: 'Nunito', system-ui, sans-serif;
  /* type scale */
  --t-h1: clamp(38px, 4.4vw, 66px);
  --t-h2: clamp(30px, 3.2vw, 46px);
  --t-h3: clamp(28px, 2.4vw, 34px);
  --t-m: 24px;
  --t-body: 18px;
  --t-small: 15px;
  --wrap: 1180px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  --sec: 112px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--navy); color: #fff; font-family: var(--fb); font-weight: 800; font-size: var(--t-body); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.locked { overflow: hidden; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--gold); color: var(--ink); -webkit-text-fill-color: var(--ink); -webkit-text-stroke-color: transparent; text-shadow: none; }
.top, .sheet, .gate, .btn, .sq, .pill, .soon, kbd, .collab-tab, .realm-tab, .move, .task-badge, .foot-col, .foot .brand { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.keep { display: inline-block; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
kbd { font: inherit; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ---- type: the game's title style */
.d { font-family: var(--fd); font-weight: 400; color: #fff; letter-spacing: .2px; line-height: 1.04; margin: 0;
  -webkit-text-stroke: .11em var(--ink); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--ink); text-wrap: balance; }
.d.gold, .d .gold { color: var(--gold); }
h1.d { font-size: var(--t-h1); }
h2.d { font-size: var(--t-h2); }
h3.d { font-size: var(--t-h3); }
.lead { margin: 14px 0 0; max-width: 34em; color: var(--soft); font-size: var(--t-body); }
.sec-head { display: grid; gap: 0; margin-bottom: 40px; }

/* ---- buttons: the game's */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border: 3px solid var(--ink); border-radius: 15px; white-space: nowrap; user-select: none;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.45), 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s, filter .15s; }
.btn span { font-family: var(--fd); font-size: 22px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); line-height: 1; padding-bottom: 2px; }
.btn.gold { background: linear-gradient(var(--gold-1), var(--gold-2)); }
.btn.sky { background: linear-gradient(var(--sky-1), var(--sky-2)); }
.btn.stone { background: linear-gradient(var(--stone-1), var(--stone-2)); }
.btn.dark { background: linear-gradient(#34477f, var(--navy)); }
.btn.sm { height: 44px; padding: 0 16px; border-radius: 12px; }
.btn.sm span { font-size: 19px; -webkit-text-stroke-width: 4px; }
.btn.lg { height: 60px; padding: 0 30px; border-radius: 16px; }
.btn.lg span { font-size: 26px; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), inset 0 3px 0 rgba(255,255,255,.45), 0 1px 0 var(--ink); }
.btn[disabled], .btn.is-off { filter: grayscale(1) brightness(.78); opacity: .8; cursor: not-allowed; transform: none; }
.sq { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(var(--sky-1), var(--sky-2));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.4), 0 3px 0 var(--ink); }
.sq:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.4), 0 1px 0 var(--ink); }
.btn:focus-visible, .sq:focus-visible, .nav a:focus-visible, .move:focus-visible, .realm-tab:focus-visible, a:focus-visible, input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px #fff; }
.soon { font-style: normal; font-family: var(--fb); font-weight: 900; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 5px 0; line-height: 14px; -webkit-text-stroke: 0; text-shadow: none; }

/* ---- sound gate */
.gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--night); overflow: hidden; padding: 24px; }
/* behind the gate: the real game running (the home page's opening run), dimmed. It starts on the plain sky colour
   and the game fades in once (a still picture first, then the live game, looked like the page was reloading) */
.gate .gate-clip { opacity: .42; background: var(--sky-top); }
.gate .clip canvas { animation-duration: .9s; }
.gate-box { position: relative; text-align: center; }
.gate-pfp { width: 108px; height: 108px; margin: 0 auto 18px; border: 4px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--ink); }
.gate-name { font-size: clamp(54px, 8vw, 84px); }
.gate-line { margin: 10px 0 28px; font-family: var(--fd); font-size: 20px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.gate-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.gate { will-change: opacity; }
.gate.out { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease, visibility 0s .4s; }

/* ---- header */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: calc(16px + env(safe-area-inset-top, 0px)) 0 16px; transition: background .25s, padding .25s, box-shadow .25s; }
.top.solid, body:not(.home) .top { background: var(--navy); padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; box-shadow: 0 3px 0 var(--ink); }
.top-row { display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); }
.brand .d { font-size: 28px; }
.nav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
.nav a, .nav .off { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 11px; font-family: var(--fd); font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.nav a:hover { background: rgba(255,255,255,.12); }
.nav a[aria-current] { color: var(--gold); }
.nav .off { color: #cfd6ee; cursor: default; }
.sound svg { width: 22px; height: 22px; }
.sound .waves { opacity: .2; transition: opacity .2s; }
.sound[aria-pressed="true"] .waves { opacity: 1; }
/* sound is on but the browser is waiting for a first click or tap: the waves pulse until it plays */
.sound.wait .waves { animation: wait 1.2s ease-in-out infinite; }
@keyframes wait { 50% { opacity: .25; } }
.menu-btn { display: none; }
.menu-btn i { display: block; width: 18px; height: 3px; background: #fff; border-radius: 2px; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
.sheet { position: fixed; inset: 0; z-index: 50; background: var(--navy); padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; height: 50px; }
.sheet nav { display: flex; flex-direction: column; margin: 24px 0 auto; }
.sheet nav a, .sheet nav .off { display: flex; align-items: center; gap: 10px; padding: 13px 0; font-family: var(--fd); font-size: 30px; border-bottom: 2px solid rgba(255,255,255,.07); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.sheet nav a[aria-current] { color: var(--gold); }
.sheet nav .off { color: #cfd6ee; }
.sheet .btn { width: 100%; }

/* ---- bands */
.band { position: relative; padding: var(--sec) 0; }
.band.navy { background: var(--navy); }
.band.night { background: var(--night); }
/* the game's own sky: its bands and dithering, starting at the light part so dark text reads */
.band.sky { background: var(--pale) url(../assets/sky.png) repeat-x 0 -270px / 1600px 790px; image-rendering: pixelated; color: var(--ink); overflow: hidden; }
.band.sky > * { image-rendering: auto; }
.band.sky .lead, .band.sky p { color: var(--ink); }
/* moving strips slide with transform (drawn once, moved by the graphics card) instead of repainting every frame */
.clouds { position: absolute; left: 0; right: 0; top: 36px; height: 360px; overflow: hidden; pointer-events: none; }
.clouds::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 3072px); height: 100%; background: url(../assets/clouds.png) repeat-x 0 0 / 3072px 360px; image-rendering: pixelated; animation: drift 170s linear infinite; will-change: transform; }
@keyframes drift { to { transform: translate3d(-3072px, 0, 0); } }
.band.sky .wrap { position: relative; }

/* ---- the gameplay clips: the real game drawn live (js/clips.js), whole-number pixel scaling so it stays sharp.
   Until the clip is ready, a still picture of it shows in its place. */
.clip { position: absolute; inset: 0; overflow: hidden; background: center / cover no-repeat; }
.clip canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; animation: clip-in .45s ease-out both; }
@keyframes clip-in { from { opacity: 0; } }

/* ---- hero: the game fills it, the road near the bottom, the sky behind the title */
.hero { position: relative; height: 100svh; min-height: 640px; max-height: 1060px; overflow: hidden; background: var(--sky-top); }
.hero-clip { z-index: 0; background: url(../media/hero.jpg) 50% calc(100% + 6.5vw) / 100% auto no-repeat; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(120px, 17vh, 176px); text-align: center; }
.hero-copy h1 { max-width: 16ch; margin: 0 auto; }
.hero-sub { margin: 16px 0 0; font-family: var(--fd); font-size: 21px; letter-spacing: .6px; word-spacing: 1px; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.hero-sub span { display: inline-block; }
.hero-copy .row { display: flex; gap: 14px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* ---- moves */
.moves-grid { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; column-gap: 64px; align-items: start; }
.moves-head { grid-column: 1; }
.stage { grid-column: 2; grid-row: 1 / span 2; align-self: center; position: relative; aspect-ratio: 16 / 9; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: #6fa7dd; box-shadow: 0 7px 0 var(--ink); }
.stage .clip { background-image: url(../media/moves.jpg); }
.move-list { grid-column: 1; display: grid; gap: 8px; margin-top: 32px; }
.move { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; width: 100%; text-align: left; padding: 14px 18px 16px; border: 3px solid transparent; border-radius: 16px; overflow: hidden; transition: background .2s; }
.move:hover { background: rgba(255,255,255,.04); }
.move-name { font-size: var(--t-m); }
.move-line { grid-column: 1 / -1; color: var(--soft); font-size: 16px; line-height: 1.45; }
.keys { display: flex; gap: 6px; }
kbd { font-family: var(--fb); font-weight: 900; font-size: 12px; color: var(--ink); background: #e9eefc; border: 2px solid var(--ink); border-radius: 7px; padding: 2px 7px 1px; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.move.on { background: linear-gradient(#3f74d6, #2d58b4); border-color: var(--ink); box-shadow: inset 0 3px 0 rgba(255,255,255,.2), 0 4px 0 var(--ink); }
.move.on .move-line { color: #e6ecff; }
.move .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--gold-2); transform: scaleX(0); transform-origin: 0 0; }
.move:not(.on) .bar { visibility: hidden; }

/* ---- realms */
.realm-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.realm-tab { position: relative; display: grid; text-align: left; padding: 9px 14px 11px; border: 3px solid var(--ink); border-radius: 14px; background: var(--navy); box-shadow: 0 4px 0 var(--ink); color: #fff; transition: transform .1s; }
.realm-tab:active { transform: translateY(2px); }
.realm-tab small { font-family: var(--fb); font-weight: 900; font-size: 12px; color: #aebbe6; line-height: 1.2; }
.realm-tab b { font-family: var(--fd); font-weight: 400; font-size: 21px; line-height: 1.1; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; white-space: nowrap; }
.realm-tab img { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; }
.realm-tab.lock { background: #3a4677; }
.realm-tab.lock b { color: #d0d7ef; }
.realm-tab.on { background: linear-gradient(var(--gold-1), var(--gold-2)); }
.realm-tab.on small { color: #6b4a00; }
.realm-tab.on b { color: #fff; }
.cine { position: relative; margin-top: 22px; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; aspect-ratio: 12 / 5; background: #6fa7dd; box-shadow: 0 7px 0 var(--ink); }
.cine .clip { z-index: 0; background-image: url(../media/ruins.jpg); }
.cine.small .clip { background-image: url(../media/king.jpg); }
/* a locked realm is the Titan Ruins seen through that realm's colours, as the game's realm map shows it */
.cine[data-tint]::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(13, 21, 48, .45); pointer-events: none; }
.cine[data-tint="ember"] .clip { filter: hue-rotate(150deg) saturate(1.9) brightness(.85); }
.cine[data-tint="crystal"] .clip { filter: hue-rotate(55deg) saturate(1.4) brightness(.62); }
.cine[data-tint="sky"] .clip { filter: hue-rotate(185deg) saturate(1.25) brightness(1.12); }
.locked-note { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; z-index: 2; }
.locked-note img { width: 48px; height: 48px; }
.locked-note .d { font-size: 34px; }
.cine-cap { margin-top: 20px; min-height: 3.2em; }
.cine-cap p { margin: 0; max-width: 46em; font-size: 17px; }
.cine-cap b { font-weight: 900; }
.cine.small { margin-top: 28px; }

/* ---- bosses */
.boss-main { display: grid; grid-template-columns: 4fr 7fr; gap: 56px; align-items: center; }
.boss-art { position: relative; display: grid; place-items: center; min-height: 420px; }
.boss-art::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(99, 242, 227, .14), rgba(99, 242, 227, 0)); }
/* the King's picture is the game's own drawing at 4 pixels per art pixel (king-sm.png: 2), shown at exactly that */
.boss-art img { position: relative; width: 368px; height: auto; }
.boss-tag { margin: 0 0 6px; font-family: var(--fb); font-weight: 900; font-size: 14px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.boss-row { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.boss-row li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; border: 3px solid var(--ink); border-radius: 16px; background: var(--navy); }
.boss-row .q { grid-row: 1 / span 2; width: 46px; height: 46px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: #0e1631; font-size: 26px; color: #6f7eb3; -webkit-text-stroke: 0; text-shadow: none; }
.boss-row small { font-weight: 900; font-size: 12px; color: var(--muted); line-height: 1.2; }
.boss-row b { font-family: var(--fd); font-weight: 400; font-size: 19px; line-height: 1.15; color: #d0d7ef; }

/* ---- waitlist band and the Runner Pass */
.steps { list-style: none; margin: 26px 0 32px; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 1.3; }
.steps li::before { content: counter(s); flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 10px; background: var(--navy); color: #fff; font-family: var(--fd); font-size: 17px; box-shadow: 0 3px 0 var(--ink); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.pass { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; border-radius: 22px; border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink); overflow: hidden;
  background: url(../assets/banner.png) right bottom / auto 100% no-repeat, #3466ad; image-rendering: pixelated; }
.pass::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 30, 64, .96) 0%, rgba(20, 30, 64, .86) 46%, rgba(20, 30, 64, 0) 78%); }
.pass > * { position: absolute; image-rendering: auto; }
.pass-brand { left: 6cqw; top: 6cqw; display: flex; align-items: center; gap: 1.6cqw; font-family: var(--fd); font-size: 4.4cqw; color: #fff; -webkit-text-stroke: .9cqw var(--ink); paint-order: stroke fill; line-height: 1; }
.pass-brand img { width: 6cqw; height: 6cqw; border: .5cqw solid var(--ink); border-radius: 1.6cqw; image-rendering: pixelated; }
.pass-av { left: 6cqw; top: 22cqw; width: 23cqw; height: 23cqw; object-fit: cover; border: .7cqw solid var(--gold-2); outline: .5cqw solid var(--ink); border-radius: 3cqw; image-rendering: pixelated; background: #3466ad; }
.pass-av.photo { image-rendering: auto; }
.pass-who { left: 33cqw; top: 22.5cqw; right: 4cqw; }
.pass-who small { display: block; font-family: var(--fb); font-weight: 900; font-size: 2.6cqw; letter-spacing: .3cqw; text-transform: uppercase; color: var(--gold); }
.pass-who b { display: block; margin: .8cqw 0 1.8cqw; font-family: var(--fd); font-weight: 400; font-size: 6.6cqw; line-height: 1; color: #fff; -webkit-text-stroke: 1.2cqw var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pass-who i { display: inline-block; font-style: normal; font-family: var(--fd); font-size: 2.8cqw; color: #fff; -webkit-text-stroke: .7cqw var(--ink); paint-order: stroke fill; padding: .7cqw 1.8cqw .9cqw; border: .45cqw solid var(--ink); border-radius: 1.4cqw; background: linear-gradient(var(--gold-1), var(--gold-2)); box-shadow: 0 .45cqw 0 var(--ink); }
.pass-who em { display: block; margin-top: 2.2cqw; font-style: normal; font-family: var(--fb); font-weight: 900; font-size: 2.4cqw; color: #c3cdf0; }
.pass-who u { display: block; margin-top: .9cqw; text-decoration: none; font-family: var(--fb); font-weight: 900; font-size: 2.2cqw; color: var(--muted); }
/* the APPLIED ribbon across the top-right corner: the same spot and size as on the downloaded card
   (870, 0, 330 wide, of 1200 x 675) */
.pass .pass-stamp { left: 72.5cqw; top: 0; width: 27.5cqw; height: auto; image-rendering: auto; }

/* ---- footer: the Minitan runs on the road */
.foot { display: flow-root; background: var(--soil); overflow-x: clip; }
/* the road sits over the bottom of the section above, so the gaps between the grass blades show that section's sky */
.road { position: relative; height: 102px; margin-top: -102px; }
.road::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% + 1152px); height: 102px; background: url(../assets/ground.png) repeat-x 0 0 / 1152px 102px; image-rendering: pixelated; animation: road 2.4s linear infinite; will-change: transform; }
@keyframes road { to { transform: translate3d(-1152px, 0, 0); } }
.road .runner { position: absolute; left: 16%; bottom: 84px; width: 168px; height: 144px; overflow: hidden; z-index: 1; }
.road .runner::before { content: ''; position: absolute; top: 0; left: 0; width: 1344px; height: 144px; background: url(../assets/run.png) 0 0 / 1344px 144px; image-rendering: pixelated; animation: run .6s steps(8) infinite; will-change: transform; }
@keyframes run { to { transform: translate3d(-1344px, 0, 0); } }
/* the footer: the logo and tagline, then Explore and Follow; the copyright line at the bottom */
.foot-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 40px; padding-bottom: 30px; }
.foot-brand p { margin: 14px 0 0; max-width: 22em; font-size: 15px; color: #cfc5dd; text-wrap: balance; }
.foot-title { margin: 8px 0 12px; font-weight: 900; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold); }
.foot-col a { display: block; width: fit-content; padding: 3px 0; font-size: 15px; color: #cfc5dd; }
.foot-col a:hover { color: #fff; }
.foot-base { padding: 18px 0 calc(30px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid rgba(255, 255, 255, .08); }
.foot .brand .d { font-size: 24px; }
.foot .brand img { width: 38px; height: 38px; }
.foot small { font-size: 14px; color: #8f84a3; }
/* the page before the footer leaves room above the road for the runner */
main > .band:last-child { padding-bottom: 280px; }


/* ---- panels, fields and pills (waitlist, collabs) */
.panel { position: relative; background: var(--navy); color: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); padding: 26px; }
.field { display: flex; align-items: center; height: 46px; flex: 1; min-width: 0; background: #0f1736; border: 3px solid var(--ink); border-radius: 12px; box-shadow: inset 0 3px 0 rgba(0,0,0,.35); }
.field:focus-within { border-color: var(--gold-2); }
.field span { padding: 0 2px 0 12px; font-weight: 900; color: var(--muted); }
.field input, .field select, .field textarea { flex: 1; min-width: 0; height: 100%; padding: 0 12px; background: none; border: 0; outline: none; color: #fff; font: 800 16px var(--fb); }
.field.at input { padding-left: 2px; }
.field input::placeholder, .field textarea::placeholder { color: #5f6c9a; }
.err { margin: 8px 0 0; color: var(--red); font-size: 14px; font-weight: 900; }
.note { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.pill { display: inline-block; padding: 4px 12px 5px; border: 3px solid var(--ink); border-radius: 999px; font-family: var(--fd); font-size: 17px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; box-shadow: 0 3px 0 var(--ink); }
.pill.gold { background: linear-gradient(var(--gold-1), var(--gold-2)); }
.pill.green { background: linear-gradient(#9cf06e, #46b52e); }
.closed-note { margin: 0 0 16px; }
.pill.red { background: linear-gradient(#ff7a6b, #e0393f); }
.muted { color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---- the application (home) */
.join { scroll-margin-top: 0; }
.join .sec-head { scroll-margin-top: 90px; }
.join-wrap { max-width: calc(820px + 2 * var(--gut)); }
.quote-box .pass { max-width: 440px; margin-bottom: 14px; border-width: 3px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.quote-box .row { margin-bottom: 4px; }
/* ---- waitlist page */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.task { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 16px; border: 3px solid var(--ink); border-radius: 16px; background: #24346a; transition: opacity .2s, box-shadow .2s, background .2s; }
.task-text h3 { margin: 0; font-family: var(--fd); font-weight: 400; font-size: 21px; line-height: 1.15; }
.task-text p { margin: 2px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.task-act { grid-column: 2; }
.task-act .row, .quote-form, .handle-form, .wallet-form { display: flex; gap: 10px; align-items: center; }
.quote-form { margin-top: 12px; }
.mini-av { width: 40px; height: 40px; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: #3466ad; image-rendering: pixelated; object-fit: cover; }
.mini-av.photo { image-rendering: auto; }
.task-badge { grid-row: 1 / span 2; align-self: start; width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 12px; background: linear-gradient(var(--gold-1), var(--gold-2)); box-shadow: 0 3px 0 var(--ink); }
.task-badge b { font-family: var(--fd); font-weight: 400; font-size: 21px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.task.active { background: #2a3d7a; box-shadow: 0 0 0 3px var(--gold-2); }
.task.locked { opacity: .62; }
.task.locked .task-text p { color: #9eabd6; }
.task.locked .task-act { display: none; }
.task.locked .task-badge { background: #3a4677; }
.task.locked .task-badge b { font-size: 0; width: 16px; height: 16px; background: url(../assets/ui_lock.png) center / 16px 16px no-repeat; image-rendering: pixelated; }
.task.done .task-act { display: none; }
.task.done .task-badge { background: linear-gradient(#9cf06e, #46b52e); }
.task.done .task-badge b { font-size: 0; width: 20px; height: 12px; border: solid #fff; border-width: 0 0 5px 5px; transform: translateY(-3px) rotate(-45deg); filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }
.task.done::after { content: 'Done'; grid-column: 2; font-family: var(--fd); font-size: 16px; color: var(--green); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.task.done .task-text p { display: none; }
.task.checking .task-act .btn { pointer-events: none; filter: brightness(.85); }
/* the quote step keeps the card (and its Download) once the link is in */
.task.done[data-step="4"] .task-act { display: block; }
.task.done[data-step="4"] .quote-form, .task.done[data-step="4"] [data-open], .task.done[data-step="4"] .err { display: none; }
/* after applying: the card, big */
.done-card .pass { max-width: 560px; margin: 22px 0 26px; }
.done-panel .note { margin-top: 14px; }
.task.checking .task-act::after { content: 'Checking...'; display: block; margin-top: 8px; font-size: 14px; font-weight: 900; color: var(--gold); }
.finish { margin-top: 22px; display: grid; justify-items: start; gap: 12px; }
.finish .btn { width: 100%; }
.btn.busy span { opacity: .6; }
.done-panel .row { display: flex; gap: 12px; flex-wrap: wrap; }
.done-panel .lead { color: var(--soft); }
.status-panel h3 { font-size: 24px; margin-bottom: 14px; }
.status-out { margin: 12px 0 0; min-height: 1.6em; font-size: 15px; }
.band.sky .panel p.lead, .band.sky .panel .note, .band.sky .panel .err, .band.sky .panel .status-out { color: inherit; }
.band.sky .panel .note { color: var(--muted); }
.band.sky .panel .err { color: var(--red); }
.band.sky .panel .lead { color: var(--soft); }

/* ---- inner pages */
.page-head { padding: calc(150px + env(safe-area-inset-top, 0px)) 0 56px; }
.page-head h1 { max-width: 18ch; }


.page-head.tight { padding-bottom: 44px; }
/* how to play */
.ctl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.panel-title { font-size: 28px; margin-bottom: 16px; }
.ctl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ctl-list li { display: grid; grid-template-columns: 96px auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: #0f1736; border: 3px solid var(--ink); border-radius: 14px; }
.ctl-list.phone li { grid-template-columns: 96px 1fr; }
.ctl-name { font-family: var(--fd); font-size: 21px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.ctl-name.gold { color: var(--gold); }
.ctl-tip { color: var(--soft); font-size: 15px; line-height: 1.4; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.facts li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--navy); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
.facts img { flex: none; width: 48px; height: 48px; }
.facts h3 { margin: 2px 0 4px; font-family: var(--fd); font-weight: 400; font-size: 22px; line-height: 1.1; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.facts p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.cta-inner { display: grid; justify-items: center; text-align: center; }
.cta-inner .btn { margin-top: 26px; }
.lost-page { min-height: 70vh; }
.lost-btn { margin-top: 28px; }
/* collabs: one box, three folder tabs on top of it; the Follow button once, under it */
.collab-box { max-width: 760px; margin-top: 18px; }
/* the Collabs tabs: a row of buttons above the box, like the home page's realm picker; the open one is gold */
.collab-tabs { display: flex; gap: 10px; max-width: 760px; margin-top: 44px; }
.collab-tab { min-width: 150px; padding: 10px 22px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--navy); box-shadow: 0 4px 0 var(--ink); text-align: center;
  font-family: var(--fd); font-size: 21px; line-height: 1.1; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; transition: transform .1s, filter .15s; }
.collab-tab:hover { filter: brightness(1.12); }
.collab-tab:active { transform: translateY(2px); }
.collab-tab.on { background: linear-gradient(var(--gold-1), var(--gold-2)); }
.collab-tab:focus-visible { outline: none; box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--ink), 0 0 0 6px #fff; }
.collab-pane .soon-box h2 { font-size: var(--t-h3); }
.collab-follow { display: grid; justify-items: start; gap: 14px; margin-top: 30px; max-width: 760px; }
.collab-follow .lead { margin: 0; }
.collab-panel { max-width: 760px; margin-top: 64px; }
.soon-box { display: grid; justify-items: start; gap: 4px; padding: 6px 4px 4px; }
.soon-box h2 { font-size: var(--t-h3); margin-top: 14px; }
.soon-box .btn { margin-top: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.lbl { display: grid; gap: 8px; font-size: 15px; font-weight: 900; }
.lbl em { font-style: normal; color: var(--muted); font-weight: 800; }
.lbl.wide { grid-column: 1 / -1; }
.field select { appearance: none; cursor: pointer; }
.field select option { color: #000; }
.field.area { height: auto; }
.field textarea { padding: 10px 12px; resize: vertical; min-height: 110px; }
.collab-form > .btn { margin-top: 12px; }
.ok-msg { margin: 12px 0 0; color: var(--green); font-weight: 900; }
/* privacy */
.prose { max-width: calc(780px + 2 * var(--gut)); }
.prose h2 { margin: 34px 0 8px; font-family: var(--fd); font-weight: 400; font-size: 26px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.prose p { margin: 0; color: var(--soft); max-width: 40em; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---- tablet */
@media (max-width: 1080px) {
  :root { --sec: 96px; }
  .nav, .top .cta { display: none; }
  .menu-btn { display: grid; }
  .moves-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .moves-head, .stage, .move-list { grid-column: 1; grid-row: auto; }
  .stage { margin-top: 36px; }
  .move-list { margin-top: 24px; }
  .realm-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); padding: 2px 2px 8px; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); scrollbar-width: none; }
  .realm-tabs::-webkit-scrollbar { display: none; }
  .realm-tab { flex: none; scroll-snap-align: start; }
  .boss-main { grid-template-columns: 1fr; gap: 36px; }
  .boss-art { min-height: 0; }
  .boss-art img { width: 368px; }
  .boss-row { grid-template-columns: repeat(2, 1fr); margin-top: 40px; }
  .ctl-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
}
/* ---- phones */
@media (max-width: 640px) {
  :root { --sec: 72px; --t-body: 17px; }
  .brand .d { font-size: 26px; }
  .brand img, .sq { width: 42px; height: 42px; }
  .hero { height: auto; min-height: 0; max-height: none; padding-bottom: 64.4vw; }
  .hero-clip { background-size: 230% auto; background-position: 46.5% calc(100% + 21vw); }
  .hero-copy { padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
  .hero-sub { font-size: 18px; -webkit-text-stroke-width: 3px; }
  .hero-copy .row { gap: 12px; margin-top: 24px; }
  .hero-copy .row .btn { width: min(100%, 320px); height: 56px; }
  .hero-copy .row .btn span { font-size: 23px; }
  .sec-head { margin-bottom: 28px; }
  .move { padding: 13px 14px 15px; }
  .stage, .cine { border-radius: 18px; }
  .cine { aspect-ratio: 16 / 10; }
  .locked-note .d { font-size: 28px; }
  .boss-art img { width: 184px; }
  .boss-row li { padding: 12px; column-gap: 10px; }
  .boss-row .q { width: 38px; height: 38px; font-size: 22px; }
  .boss-row b { font-size: 16px; }
  .road .runner { left: 6%; }
  .panel { padding: 20px 16px; border-radius: 18px; }
  .task { padding: 14px 12px; gap: 6px 12px; }
  .task-act { grid-column: 1 / -1; }
  .task-badge { grid-row: auto; align-self: center; width: 38px; height: 38px; }
  .task.done::after { grid-column: 2; }
  .handle-form, .quote-form, .wallet-form { flex-wrap: wrap; }
  .handle-form .field { flex-basis: calc(100% - 50px); }
  .handle-form .btn, .quote-form .btn, .wallet-form .btn { flex: 1 1 100%; }
  .task-act .row .btn { flex: 1; }
  .facts { grid-template-columns: 1fr; }
  .collab-tabs { gap: 8px; }
  .collab-tab { flex: 1 1 0; min-width: 0; padding: 9px 6px 11px; font-size: 18px; -webkit-text-stroke-width: 3.5px; }
  .facts li { padding: 16px; }
  .ctl-list li { grid-template-columns: 1fr auto; }
  .ctl-list li .ctl-tip { grid-column: 1 / -1; }
  .ctl-list.phone li { grid-template-columns: 1fr; gap: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
  .foot-main { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-top: 34px; }
  .foot-brand { grid-column: 1 / -1; }
}
/* a page swapped in (js/site.js) fades in quickly */
main.enter { animation: page-in .22s ease-out both; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .clouds::before, .road::before, .road .runner::before, main.enter, .clip canvas, .sound.wait .waves { animation: none; }
  html { scroll-behavior: auto; }
}