/* 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: swap; }
@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%; }
.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(.6) brightness(.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; its still picture until it starts */
.gate .gate-clip { opacity: .42; background-image: url(../media/hero.jpg); background-position: 50% 80%; background-size: cover; }
.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.out { opacity: 0; visibility: hidden; 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; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.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 */
.wl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.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); } }
.foot-row { display: flex; align-items: center; gap: 28px; padding-top: 34px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
.foot .brand .d { font-size: 24px; }
.foot .brand img { width: 38px; height: 38px; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; color: #cfc5dd; }
.foot nav a:hover { color: #fff; }
.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; }
.panel.tabbed { margin-top: 22px; padding-top: 30px; }
.panel-tab { position: absolute; left: 22px; top: -22px; height: 40px; display: grid; place-items: center; padding: 0 18px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--navy);
  font-family: var(--fd); font-size: 20px; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.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); }
.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 */
.wl-page { padding-top: 0; }
.wl-page .page-head { padding-bottom: 40px; }
.wl-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.wl-main { display: grid; gap: 22px; }
.wl-side { position: sticky; top: 96px; }
.side-note { margin: 18px 0 0; font-size: 15px; color: var(--ink); }
.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, .status-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: .5; }
.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); }
.x-row .btn[data-done][disabled] { filter: grayscale(.7) brightness(.75); }
/* 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; }
/* collabs: one box, three folder tabs on top of it; the Follow button once, under it */
.collab-box { max-width: 760px; margin-top: 44px; }
.collab-tabs { position: absolute; left: 18px; bottom: 100%; display: flex; gap: 6px; }
.collab-tab { height: 42px; padding: 0 16px; margin-bottom: -3px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0; background: #2a3769;
  font-family: var(--fd); font-size: 19px; letter-spacing: .5px; text-transform: uppercase; color: #aebbe6; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; transform: translateY(5px); transition: transform .12s, color .12s; }
.collab-tab:hover { color: #fff; }
.collab-tab.on { background: var(--navy); color: var(--gold); transform: none; position: relative; z-index: 1; }
.collab-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px #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, .wl-grid { 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; }
  .wl-grid .pass { order: 2; }
  .wl-layout { grid-template-columns: 1fr; gap: 28px; }
  .ctl-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .wl-side { position: static; order: -1; max-width: 560px; }
}
/* ---- 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; }
  .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, .status-form { flex-wrap: wrap; }
  .handle-form .field { flex-basis: calc(100% - 50px); }
  .handle-form .btn, .quote-form .btn, .wallet-form .btn, .status-form .btn { flex: 1 1 100%; }
  .task-act .row .btn { flex: 1; }
  .facts { grid-template-columns: 1fr; }
  .collab-tabs { left: 10px; gap: 4px; }
  .collab-tab { height: 38px; padding: 0 10px; font-size: 16px; -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-row { gap: 18px; }
  .foot nav { gap: 16px 20px; }
}
/* 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; }
}