/* Old Guard Games web pages, Night Arcade look (design C, t431). */
:root {
  --bg: #0B1020;
  --panel: #141B34;
  --field: #0E1428;
  --line: #2C3763;
  --text: #E8ECF8;
  --muted: #A9B2CF;
  --accent: #35D6C6;
  --on-accent: #06121A;
  --err: #FF8A8A;
  --radius: 14px;
  /* t457 fonts (user 2026-11-05: "change all fonts to "penciled in / penned in" style fonts of different varieties
     based off of h1 h2 etc"): one token per level; self-hosted files can be added later without touching rules. */
  --font-h1: "Permanent Marker", "Segoe Print", "Ink Free", "Bradley Hand", cursive;
  --font-h2: "Caveat", "Segoe Script", "Ink Free", "Bradley Hand", cursive;
  --font-h3: "Kalam", "Segoe Print", "Ink Free", "Comic Neue", cursive;
  --font-body: "Patrick Hand", "Ink Free", "Segoe Print", "Comic Neue", "Comic Sans MS", cursive;
  /* Form inputs, placeholders and status lines stay in a plain sans font for legibility. */
  --font-ui: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --head: var(--font-h3);
  /* t457 layer stack (user 2026-11-05: "the bg's need to have consistent z indexes and blend in better").
     Bottom to top: page colour, still image, fight videos (all on one level), one tint/vignette, particles, content. */
  --z-world: -2;
  --z-particles: -1;
  --z-still: 0;
  --z-video: 1;
  --z-tint: 2;
  --z-scrim: -1;
  --z-card-caption: 1;
  --z-sidebar: 5;
  --z-head: 8;
  --z-dots: 9;
  --z-skip: 10;
  --head-h: 106px;
  --body: var(--font-body);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); }
a { color: var(--accent); }
a:hover, a:focus-visible { color: var(--text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: var(--z-skip); background: var(--panel); padding: 8px 12px; border-radius: var(--radius); }

.site-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 5%; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand svg { width: 28px; height: 28px; flex: none; }
.brand .tick { stroke: var(--accent); }
.brand span { font-family: var(--head); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.site-nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 15px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--text); }

main.signup { flex: 1; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; justify-content: center; padding: 56px 5%; max-width: 1180px; margin: 0 auto; width: 100%; }
.hero { flex: 1 1 380px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
h1 { margin: 0; font-family: var(--head); font-size: 52px; line-height: 1.05; font-weight: 700; }
h2 { margin: 0; font-family: var(--head); font-size: 30px; line-height: 1.1; font-weight: 700; }
.lead { margin: 0; font-size: 19px; color: var(--muted); max-width: 30rem; }
.small { margin: 0; font-size: 15px; color: var(--muted); }
.art-list { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.art { margin: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.art img, .art video { width: 100%; height: 300px; object-fit: cover; display: block; background: var(--field); }
.art figcaption { padding: 12px 16px; font-family: var(--head); font-size: 20px; font-weight: 700; }

.panel { flex: 1 1 420px; max-width: 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel form, .panel .view { display: flex; flex-direction: column; gap: 18px; margin: 0; }
fieldset.games { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
fieldset.games legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.game-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.game-card { flex: 1 1 180px; display: flex; flex-direction: column; border: 3px solid var(--line); border-radius: var(--radius); background: var(--field); overflow: hidden; cursor: pointer; min-width: 0; }
.game-card:has(input:checked) { border-color: var(--accent); }
.game-card:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.game-card img, .game-card video { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--field); }
/* t434: light 3D tilt on hover, only for a fine pointer and when motion is allowed. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .game-cards { perspective: 900px; }
  .game-card { transition: transform 0.25s ease, box-shadow 0.25s ease; transform-style: preserve-3d; }
  .game-card:hover { transform: rotateX(4deg) rotateY(-5deg) translateZ(6px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
}
.game-card .row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; }
.game-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.game-card .name { display: block; font-family: var(--head); font-size: 18px; font-weight: 700; color: var(--text); }
.game-card .kind { display: block; font-size: 13px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--text); }
.field input { height: 46px; width: 100%; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); }
.field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent); }
.hint { font-size: 13px; color: var(--muted); margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--muted); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.btn { height: 50px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; padding: 0 16px; }
.btn.secondary { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn:disabled { opacity: 0.5; cursor: default; }
.center { text-align: center; }
.status { min-height: 24px; margin: 0; font-size: 15px; }
.status.err { color: var(--err); }
.status.ok { color: var(--accent); }
.notice { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.notice svg { width: 28px; height: 28px; flex: none; stroke: var(--accent); }

.site-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 20px 5%; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* Single-column pages: action handler and legal texts. */
main.narrow { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
main.narrow .banner { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius); display: block; }
main.narrow .panel { max-width: none; flex: none; padding: 24px 20px; }
main.legal { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 40px 5%; }
main.legal h1 { font-size: 40px; margin-bottom: 16px; }
main.legal h2 { font-size: 26px; margin: 32px 0 10px; }
main.legal p, main.legal li { color: var(--text); }
main.legal code { font-size: 14px; background: var(--field); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
main.legal table { border-collapse: collapse; width: 100%; font-size: 15px; }
main.legal th, main.legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
main.legal th { background: var(--panel); font-weight: 600; }
.soon { padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }

@media (max-width: 600px) {
  main.signup { padding: 28px 16px; gap: 28px; }
  h1 { font-size: 36px; }
  .lead { font-size: 17px; }
  .art-list { display: none; }
  .panel { padding: 20px 16px; }
  .site-head, .site-foot { padding: 16px; }
  .site-nav { gap: 16px; }
  main.legal h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* Skyblade: the swordsman stands at the right edge of the art; keep him in view (user 2026-11-05). */
video[data-game="sky"] { object-position: 85% 40%; }
/* Layout (user 2026-11-05): the two game pictures side by side in one row, the sign-up form centred below. */
main.signup { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 36px; max-width: 1240px; }
main.signup .hero { flex: none; width: 100%; align-items: center; text-align: center; }
.snap .art-list { flex-direction: row; flex-wrap: wrap; width: 100%; gap: 22px; }
.snap .art { flex: 1 1 380px; min-width: 0; text-align: left; }
.snap .art img, .snap .art video { height: clamp(200px, 26vw, 340px); }
main.signup .panel { flex: none; width: 100%; max-width: 560px; }
/* One set of pictures only: the big cards choose the game; the form keeps a compact text choice. */
.game-card img, .game-card video { display: none; }
.snap .art { cursor: pointer; border-width: 3px; transition: border-color .15s; }
.snap .art.picked { border-color: var(--accent); }
.snap .art:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
/* 3D ember field (js/particles.js): fixed behind everything, never takes clicks. */
.bg-particles { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: var(--z-particles); pointer-events: none; }
body { position: relative; isolation: isolate; }
/* Depth glow behind the ember field: teal from the top, gold from below. */
html { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(53,214,198,.10), transparent 70%), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(217,174,82,.08), transparent 70%), var(--bg); background-attachment: fixed; }
body { background: transparent; }
/* Game world behind the embers (user 2026-11-05): the picked game's own scene, blurred and dark. */
.world { position: fixed; inset: -20px; z-index: var(--z-world); pointer-events: none; background: center / cover no-repeat url("../assets/bg-ran.jpg"); opacity: .9; transition: opacity .6s ease; }
.world::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 45%, rgba(11,16,32,.2), rgba(11,16,32,.7)); }
/* The big pictures are the game choice; the radio list stays only as the form value. */
fieldset.games { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.snap .art video[data-game="sky"] { object-position: 82% 30%; }
/* Skyblade still: slow 3D push toward the swordsman and a small turn, until its Flow clip returns (user 2026-11-05). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sky-push { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, 0.8%); } }
  .snap .art video[data-game="sky"] { transform-origin: 82% 30%; animation: sky-push 16s ease-in-out infinite alternate; will-change: transform; }
}
/* Keep the moving Skyblade picture inside its frame; the name bar stays on top (user screenshot 2026-11-05). */
.snap .art figcaption { position: relative; z-index: var(--z-card-caption); background: var(--panel); }
/* One background per game (user 2026-11-05), same look; a slow cross-fade so the page never feels like a new site. */
.world::before { content: ""; position: absolute; inset: 0; background: center / cover no-repeat url("../assets/bg-sky.jpg"); opacity: 0; transition: opacity .9s ease; }
.world.sky::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world::before { transition: none; } }
/* Fight loop per game (js/bg-variants.js): over the still, under the vignette (::after paints last); same 0.9 s cross-fade. */
.world-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.world-video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .world-video { transition: none; } }
/* The game that is not picked fades back a little (user 2026-11-05). */
.snap .art { transition: border-color .15s, opacity .3s ease; }
.snap .art:not(.picked) { opacity: .6; }
.snap .art:not(.picked):hover, .snap .art:not(.picked):focus-visible { opacity: .85; }
/* User phone screenshots 2026-11-05: (1) tall screens left a gap above the title -> start at the top;
   (2) narrow screens hid the game pictures, the only game choice -> show both side by side, smaller. */
main.signup { justify-content: flex-start; }
@media (max-width: 600px) {
  .snap .art-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .snap .art { flex: 1 1 0; border-width: 2px; }
  .snap .art img, .snap .art video { height: 112px; }
  .snap .art figcaption { padding: 8px 10px; font-size: 14px; line-height: 1.25; }
}
/* Tall portrait screens wider than a phone (desktop mode on a phone, user 2026-11-05): bigger pictures and the
   content centred, so the space is shared above and below instead of all at the bottom. */
@media (orientation: portrait) and (min-width: 900px) {
  main.signup { justify-content: center; }
  .snap .art-list { flex-direction: row; }
  .snap .art img, .snap .art video { height: clamp(220px, 15vh, 380px); }
  /* Desktop mode on a phone: the page is shown scaled down, so the form gets wider and larger text. */
  main.signup .panel { max-width: 100%; font-size: 1.3em; padding: 36px 40px; }
  main.signup .panel input, main.signup .panel .btn { font-size: 1em; padding: 16px 18px; }
  main.signup .panel .small, main.signup .panel .hint { font-size: .9em; }
  main.signup .panel .field label, main.signup .panel .check label { font-size: 1em; }
}
/* The form names the picked game. */
.form-game { margin: 0 0 18px; font-family: var(--head); font-size: 1.5em; line-height: 1.2; color: var(--accent); }
/* t445b (user 2026-11-05: "whichever game we switch to the other one gets not minimized but smallerized and gets
   onto floating sidebar"). The picked game is the one large card; the other one becomes small. */
.snap .art.picked { order: -1; }
/* Tall screens and phones: no room for a sidebar, so the other game sits small beside the picked one. */
@media (max-width: 600px), (orientation: portrait) {
  .snap .art-list { flex-wrap: nowrap; }
  .snap .art.picked { flex: 1 1 0; }
  .snap .art:not(.picked) { flex: 1 1 0; }
}
@media (max-width: 600px) {
  .snap .art:not(.picked) figcaption { font-size: 12px; padding: 6px 8px; }
}
/* The swap: the newly picked card grows in, the other one docks in. No animation for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes art-grow { from { opacity: .4; transform: scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes art-dock { from { opacity: 0; transform: translateX(-24px) scale(.9); } to { opacity: .6; transform: none; } }
  .snap .art.picked { animation: art-grow .45s ease-out; }
  .snap .art:not(.picked) { animation: art-dock .45s ease-out; }
}
/* User 2026-11-05: the wide picked card cut the Ran monster's head off -> show the whole 16:9 picture. */
.snap .art.picked img, .snap .art.picked video { height: auto; aspect-ratio: 16 / 9; max-height: 62vh; object-position: 50% 20%; }
/* t445c/t445d wide landscape (user 2026-11-05: "have it below the other game but just slightly bigger and highlighted so
   the sign up box and the animated bg are beside each other"): both games live in a floating left sidebar, the other
   game small and dim on top under a pencil note "Try our other game", the picked game below it, 1.25x and highlighted.
   The centre column keeps only the title, intro and the form. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) {
  :root { --side: clamp(150px, min(14vw, 30vh), 240px); --gutter: calc(1.25 * var(--side) + 16px); }
  main.signup ~ .site-foot { padding-left: calc(var(--gutter) + 24px); padding-right: calc(var(--gutter) + 24px); justify-content: center; column-gap: 40px; }
  main.signup .hero, main.signup .panel { max-width: min(560px, calc(100vw - 2 * var(--gutter) - 48px)); }
  main.signup .hero { margin: 0 auto; }
  .snap .art-list { position: fixed; z-index: var(--z-sidebar); left: 16px; top: 80px; bottom: 8px; margin: auto 0; height: fit-content;
    width: auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
  .snap .art.art { flex: none; order: 0; border-width: 2px; }
  .snap .art.art:not(.picked) { width: var(--side); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    transition: border-color .15s, opacity .3s ease, transform .25s ease, box-shadow .25s ease; }
  .snap .art.art.picked { order: 1; width: calc(1.25 * var(--side)); opacity: 1;
    box-shadow: 0 0 0 1px var(--accent), 0 0 22px rgba(53, 214, 198, .45), 0 12px 28px rgba(0, 0, 0, .5); }
  .snap .art.art img, .snap .art.art video { height: auto; aspect-ratio: 16 / 9; max-height: none; }
  .snap .art figcaption { padding: 8px 12px; font-size: 15px; line-height: 1.25; }
  .snap .art:not(.picked) figcaption::before { content: "Switch to "; display: block; font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--accent); }
  .snap .art.picked figcaption::before { content: "\2713  Selected"; display: block; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--accent); white-space: pre; }
  .snap .art:not(.picked):hover, .snap .art:not(.picked):focus-visible { transform: translateX(4px) scale(1.03); box-shadow: 0 16px 34px rgba(0, 0, 0, .6); }
  /* Pencil note with a hand-drawn arrow (assets/try-arrow.svg) above the other game; it is the sidebar's first item. */
  .snap .art-list::before { content: "Try our other game"; order: -1; display: block; width: var(--side); box-sizing: border-box;
    padding: 0 0 44px 6px; margin-bottom: -10px; transform: rotate(-4deg); transform-origin: 20% 50%;
    font-family: "Segoe Print", "Bradley Hand", "Comic Neue", "Comic Sans MS", cursive; font-size: 17px; line-height: 1.2;
    color: rgba(232, 236, 248, .85); background: url("../assets/try-arrow.svg") no-repeat 58% 100% / 52px 46px; pointer-events: none; }
}
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) and (prefers-reduced-motion: no-preference) {
  @keyframes note-wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-2.5deg) translateY(-1px); } }
  .snap .art-list::before { animation: note-wiggle 3.2s ease-in-out infinite; }
}
/* t450 logo (user 2026-11-05: "create our logo as well"): shield with crossed swords, two-line wordmark. */
.brand svg.logo { width: 64px; height: 64px; }
@media (max-width: 600px) { .brand svg.logo { width: 52px; height: 52px; } }
.brand .acc { stroke: var(--accent); }
.brand .accf { fill: var(--accent); }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand .wordmark b { font-family: var(--head); font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.brand .wordmark small { font-family: var(--head); font-size: 11px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
/* t450 gap (user 2026-11-05: "remove some of the white space"): in the wide layout the title and form sit right
   beside the sidebar instead of the page centre, so the animated background gets the right side. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) {
  main.signup { max-width: none; margin: 0; align-items: center; padding: 28px calc(var(--gutter) + 24px) 40px; gap: 22px; }
  main.signup .hero { margin: 0 auto; align-items: center; text-align: center; }
}
/* t450 (user 2026-11-05: "have some transparency to the sign up window"): the fight shows through the form. */
main.signup .panel { background: rgba(20, 27, 52, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* t451 (user 2026-11-05: "center the sign up and the animations and put sign up box on top of the animation a bit
   more transparent"): the Skyblade loops have their fighters in the right part of the frame, so the clip moves left
   and grows a little until the fight sits behind the centred form. The uncovered right strip fades into the still. */
/* t452 (user: "the monster looks cut off"): shift only, no zoom, and fade just the last 6% so both fighters stay whole.
   While a clip plays, the still painting behind it is hidden so the uncovered strip is plain night, not a second picture. */
/* t459: the t451/t452 Skyblade shift is replaced by per-clip framing (--fx, --fy below), the same system as Ran. */
/* t457 S2 "Full-screen snap" (user 2026-11-05: "S2 Full-screen snap"): four sections after the sign-up form
   (server and game info, download, shop, guide). Wide landscape: each fills the screen, snaps (proximity, so a tall
   form is never trapped), sits beside the floating sidebar and moves the fight camera (js/sections.js sets
   #world data-sec). Phones and portrait: plain stacked blocks. Text per game: data-for="ran" or "skyblade". */
.world:not(.sky) ~ * [data-for="skyblade"], .world.sky ~ * [data-for="ran"] { display: none; }
.site-nav { align-items: center; }
.site-nav a { color: var(--muted); text-decoration: none; font-family: var(--head); font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.on { color: var(--text); }
.site-nav a.on { box-shadow: 0 2px 0 var(--accent); }
.site-nav a.cta { background: var(--accent); color: var(--on-accent); padding: 5px 14px; border-radius: 999px; }
.site-nav a.cta.on { box-shadow: 0 0 14px rgba(53, 214, 198, .6); }
.snap { position: relative; padding: 64px 5%; }
.snap .pane { position: relative; width: min(720px, 100%); margin: 0 auto; }
.snap .kick { margin: 0; font-family: var(--head); font-size: clamp(13px, .8vw, 16px); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--accent); }
.snap h2 { margin: .2em 0 .3em; font-size: clamp(40px, 4.2vw, 72px); line-height: 1.02; letter-spacing: .01em; }
.snap .lead { margin: 0 0 clamp(20px, 3vh, 34px); max-width: 38em; font-size: clamp(18px, 1.05vw, 22px); line-height: 1.5; }
.snap .note-soon { display: inline-flex; align-items: center; gap: 10px; margin: calc(-1 * clamp(8px, 1.5vh, 16px)) 0 clamp(20px, 3vh, 30px); font-family: var(--head); font-size: clamp(14px, .85vw, 17px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.snap .note-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.snap .grid { display: grid; gap: clamp(12px, 1.1vw, 20px); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.snap .grid + .grid { margin-top: clamp(12px, 1.1vw, 20px); }
.snap .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snap .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snap .grid.one { grid-template-columns: minmax(0, 440px); }
.snap .tile { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 1.6vw, 28px); border: 1px solid var(--line); border-radius: 12px; background: rgba(11, 16, 32, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.snap .grid.two .tile, .snap .grid.three .tile, .snap .grid.one .tile { min-height: clamp(140px, 17.5vh, 210px); }
.snap .tile b { font-family: var(--head); font-size: clamp(20px, 1.4vw, 27px); font-weight: 700; line-height: 1.15; }
.snap .tile span { font-size: clamp(14px, .9vw, 17px); line-height: 1.5; color: var(--muted); }
.snap .stat { gap: 4px; padding: clamp(12px, 1.1vw, 20px) clamp(16px, 1.4vw, 24px); }
.snap .stat span { font-family: var(--head); font-size: clamp(11px, .7vw, 14px); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.snap .stat b { font-size: clamp(22px, 1.6vw, 32px); font-weight: 800; }
.snap .tile .price { font-family: var(--head); font-size: clamp(32px, 2.6vw, 50px); font-weight: 800; line-height: 1.05; color: var(--text); }
.snap .dl .btn { margin-top: auto; align-self: flex-start; min-width: 180px; }
.dots { display: none; }
/* t459: same brightness in every section (0.8 total, from the .world grade); small pans keep the fighters centred. */
.world[data-sec="info"] { --pan: 2.5%; --zoom: 1.08; }
.world[data-sec="download"] { --pan: -2%; --zoom: 1.04; }
.world[data-sec="shop"] { --pan: 1.5%; --zoom: 1.12; }
.world[data-sec="guide"] { --pan: -3%; --zoom: 1.06; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .world { transition: opacity .6s ease, filter .9s ease; }
  .reveal { transition: opacity .7s ease, transform .7s ease; }
  .reveal-on .reveal:not(.in) { opacity: 0; transform: var(--rev-persp, perspective(900px)) translateY(40px) rotateX(var(--rev-tilt, 8deg)); }
}
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) {
  html { scroll-snap-type: y proximity; }
  /* User 2026-11-05: "scroll of this goes into the header and gets mixed up there": a solid, blurred header
     above all content, and snaps and anchor jumps land below it (scroll-padding-top = header height). */
  html { scroll-padding-top: var(--head-h); }
  .site-head { position: sticky; top: 0; z-index: var(--z-head); min-height: var(--head-h); border-bottom-color: transparent;
    background: rgba(11, 16, 32, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .site-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
    background: linear-gradient(rgba(11, 16, 32, .6), rgba(11, 16, 32, 0)); }
  main.signup { scroll-snap-align: start; scroll-margin-top: var(--head-h); }
  .snap { min-height: calc(100vh - var(--head-h)); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 36px 56px 48px calc(var(--gutter) + 24px); overflow: hidden; }
  .snap .pane { width: min(1100px, 62vw, 100%); margin: 0; }
  .dots { position: fixed; z-index: var(--z-dots); right: 16px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
  .dots a { display: block; width: 21px; height: 21px; padding: 6px; border-radius: 50%; background: var(--line); background-clip: content-box; }
  .dots a.on { background-color: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
}
/* Wide screens: the 2x2 tiles become one row of four. */
@media (min-width: 1600px) and (orientation: landscape) { .snap .grid.two { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Camera: a small pan and zoom per section, on top of the per-clip framing. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) and (prefers-reduced-motion: no-preference) {
  .world-video { transform: translateX(var(--pan, 0%)) scale(var(--zoom, 1)); transition: opacity .9s ease, transform .9s ease, filter .9s ease; }
}
@media (max-width: 600px) {
  .site-nav { gap: 6px 14px; }
  .site-nav a { font-size: 13px; }
  .snap { padding: 44px 16px; }
  .snap h2 { font-size: 34px; }
  .snap .grid.three { grid-template-columns: 1fr; }
  .snap .grid.two .tile, .snap .grid.three .tile, .snap .grid.one .tile { min-height: 0; }
}
/* t457 fonts: hand-drawn type per level (tokens in :root). Inputs and status lines keep --font-ui. */
body { font-size: 17px; }
h1 { font-family: var(--font-h1); font-weight: 400; letter-spacing: .01em; }
h2 { font-family: var(--font-h2); }
.btn, .linkish, .site-nav a, .snap .kick, .snap .tile b, .site-foot nav a { font-family: var(--font-h3); }
.small { font-size: 16px; }
.hint { font-size: 14px; }
.snap .tile span { font-size: clamp(15px, .95vw, 18px); }
.snap .art-list::before { font-family: var(--font-h2); }
.field input, .field input::placeholder, .status, #verify-email, #sk-change-acct { font-family: var(--font-ui); }
.form-game { font-family: var(--font-h2); }
/* t457 layer stack and blend: every layer has its token; the videos fade out on all four edges into the page
   colour (no seam at any size), and one grade on the whole .world (still, clips and tint together) keeps Ran and
   Skyblade in the same night palette, so a cross-fade never changes colour. The section dim multiplies in. */
.world { filter: saturate(.85) brightness(calc(.8 * var(--dim, 1))) contrast(1.05); }
.world::before { z-index: var(--z-still); }
/* User 2026-11-05: "the boxed edge is a lil too obvious, please blend in better": a wide feather on every side
   (radial ellipse to the closest side, plus a left/right fade from 20% in), fully clear at the clip's own edge, so the
   shifted Skyblade clip also fades out before its right edge. Same mask for Ran and Skyblade clips. */
.world-video { z-index: var(--z-video);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%), linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 55%, transparent 100%), linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
  mask-composite: intersect; }
/* The tint darkens the still the same way toward its edges, so there is no brightness step where a clip ends. */
.world::after { z-index: var(--z-tint);
  background: radial-gradient(ellipse closest-side at 50% 50%, transparent 55%, rgba(11, 16, 32, .92) 100%), radial-gradient(ellipse 75% 65% at 50% 45%, rgba(11, 16, 32, .2), rgba(11, 16, 32, .7)); }
/* Hand fonts are wider: keep the header nav on one line on narrower wide screens. */
@media (min-width: 601px) and (max-width: 1180px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 14px; letter-spacing: .03em; }
}
/* The wordmark and the nav never touch: the logo keeps its size, the nav shrinks first. */
.brand { flex: none; }
.site-nav { min-width: 0; justify-content: flex-end; }
/* t459 (user 2026-11-05: "the mobile definitely needs major overhaul the desktop is close to acceptable just needs
   proper centerings and consistencies on blending in 3d animations/vids to main bg and having good centerings").
   One soft dark scrim sits behind each text column instead of darkening the whole fight. */
.m-cta, .menu-btn { display: none; }
/* t459 (user 2026-11-05: "these two are in a box that looks so obvious and doesn't look like they blend in well to the
   main bg"): the clips blend with lighten, so their dark background drops away and only the bright fighters show over
   the page still (which stays visible). Still, clips and tint share the one .world stacking context. */
.world-video { mix-blend-mode: lighten; }
/* User 2026-11-05: "theres a stray character on the right": the page still has painted characters, so it is hidden
   once a clip (or, with reduced motion, its poster) is shown (js/bg-variants.js sets data-clip); page colour only. */
.world[data-clip="on"] { background-image: none; }
.world[data-clip="on"]::before { opacity: 0; }
/* t459 fighter framing of the wide (1920x824) files, measured over each whole clip (2 frames a second): pair centre
   (--fx, --fy) and pair size (--sx, --sy) as shares of the frame. Narrow screens zoom and place each clip from these,
   so the pair sits in the middle and stays whole. A new clip without a line uses its game's values. */
.world-video[data-game="ran"] { --fx: .45; --fy: .43; --sx: .6; --sy: .7; }
.world-video[data-game="sky"] { --fx: .78; --fy: .55; --sx: .45; --sy: .65; }
/* t468: Ran values re-measured on the skill loops (character alpha, 24 samples per clip, 5-95% bounds). */
.world-video[data-src="assets/bg/ran-hd-v1.mp4"] { --fx: .45; --fy: .384; --sx: .44; --sy: .77; }
.world-video[data-src="assets/bg/ran-hd-v2.mp4"] { --fx: .52; --fy: .422; --sx: .3; --sy: .47; }
.world-video[data-src="assets/bg/ran-hd-v3.mp4"] { --fx: .47; --fy: .565; --sx: .44; --sy: .54; }
.world-video[data-src="assets/bg/ran-hd-v4.mp4"] { --fx: .6; --fy: .408; --sx: .41; --sy: .52; }
.world-video[data-src="assets/bg/sky-hd-v1.mp4"] { --fx: .83; --fy: .515; --sx: .31; --sy: .61; }
.world-video[data-src="assets/bg/sky-hd-v2.mp4"] { --fx: .85; --fy: .65; --sx: .37; --sy: .62; }
.world-video[data-src="assets/bg/sky-hd-v3.mp4"] { --fx: .83; --fy: .56; --sx: .31; --sy: .64; }
.world-video[data-src="assets/bg/sky-hd-v4.mp4"] { --fx: .77; --fy: .57; --sx: .45; --sy: .6; }
.world-video[data-game="sky"]:not([data-shape="wide"]) { transform: none; }
/* Clip changes dip (user 2026-11-05: "as i scrolled it looked like they bugged out"): with lighten two clips would add
   up, so the old one fades out in .35 s and the new one fades in after it (js/bg-variants.js), never both at once. */
.world-video:not(.on) { transition-duration: .35s, .9s, .9s; }
.world-video.on { transition-duration: .45s, .9s, .9s; transition-delay: .35s, 0s, 0s; }
/* Desktop and landscape from 900 px (user 2026-11-05: "horrendous spacings"): the content column is centred in the
   space between the sidebar (+48 px) and the dots (+48 px), and a wide file keeps its shape and is placed so its pair
   sits centred on that column, as large as the screen height allows while the whole pair stays inside the column
   (+60 px each side). Ran and Skyblade use the same rule and the same fade. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) {
  :root { --side: clamp(110px, min(14vw, 30vh), 240px); --pl: calc(24px + 1.25 * var(--side) + 48px); --pr: calc(24px + 21px + 48px); }
  .world-video[data-shape="wide"] { --colw: calc(100vw - var(--pl) - var(--pr));
    --w: min(calc((100vh + 40px) * 1920 / 824), calc((var(--colw) + 120px) / (var(--sx) + .1))); --h: calc(var(--w) * 824 / 1920);
    width: var(--w); height: var(--h); max-width: none; inset: auto;
    left: calc(20px + var(--pl) + var(--colw) / 2 - var(--fx) * var(--w)); top: calc(20px + 50vh - var(--fy) * var(--h));
    -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 70%, transparent 100%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 70%, transparent 100%), linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
}
.snap .pane, main.signup .hero { isolation: isolate; }
.snap .pane::before { content: ""; position: absolute; inset: -40px -56px; z-index: var(--z-scrim); pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(11, 16, 32, .62), rgba(11, 16, 32, .4) 62%, rgba(11, 16, 32, 0)); }
main.signup .hero { position: relative; }
main.signup .hero::before { content: ""; position: absolute; inset: -24px -48px; z-index: var(--z-scrim); pointer-events: none;
  background: radial-gradient(ellipse closest-side, rgba(11, 16, 32, .55), rgba(11, 16, 32, 0)); }
.band { display: none; }
/* Footer (user 2026-11-05: "footer dont have good footer"): small mark, even links, copyright; centred. */
main.signup ~ .site-foot { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px;
  padding: 28px 16px 32px; border-top-color: rgba(44, 55, 99, .6); text-align: center; }
.site-foot .foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.site-foot .foot-logo { width: 40px; height: 40px; flex: none; }
.site-foot .acc { stroke: var(--accent); }
.site-foot .accf { fill: var(--accent); }
.site-foot .wordmark { display: none; flex-direction: column; line-height: 1; text-align: left; }
.site-foot .wordmark b { font-family: var(--head); font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.site-foot .wordmark small { font-family: var(--head); font-size: 9px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--accent); margin-top: 3px; }
main.signup ~ .site-foot nav { justify-content: center; gap: 4px 20px; }
main.signup ~ .site-foot nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 10px; font-family: var(--font-h3); font-size: 16px; }
.site-foot .copy { font-family: var(--font-body); font-size: 13px; color: var(--muted); }

/* Desktop: one centred column (on the viewport centre, clear of the sidebar and the dots), the same width and the
   same vertical centring in every section and the sign-up; header, sidebar, dots and footer share one edge margin. */
@media (min-width: 900px) and (orientation: landscape) and (min-height: 500px) {
  :root { --edge: 24px; --col: min(960px, 100%); }
  .site-head { padding: 0 var(--edge); }
  .site-nav a.cta { order: 1; }
  .site-nav #nav-signin { order: 2; }
  main.signup ~ .site-foot { flex-direction: row; column-gap: 32px; padding-left: var(--edge); padding-right: var(--edge); }
  .site-foot .wordmark { display: flex; }
  .snap .art-list { left: var(--edge); }
  .dots { right: var(--edge); }
  main.signup, .snap { min-height: calc(100vh - var(--head-h)); padding: 36px var(--pr) 48px var(--pl); justify-content: center; }
  main.signup .hero { width: var(--col); max-width: none; }
  main.signup .panel { width: min(560px, var(--col)); max-width: none; }
  .snap .pane { width: var(--col); }
}

/* Phones, tablets in portrait and narrow windows: one compact header row with a menu button; the Download screen shows
   the title, two equal game tabs, the fight in a band and the download card; sections stack without snap. */
@media (max-width: 899.98px), (orientation: portrait), (max-height: 499.98px) {
  :root { --mh: 60px; --m-pad: 16px; --m-h1: clamp(28px, 8.4vw, 44px); --m-kick: 20px; --m-tabs: 48px; --gap: 18px;
    --band-top: calc(var(--mh) + 18px + var(--m-kick) + 6px + 1.2 * var(--m-h1) + 2 * var(--gap) + var(--m-tabs));
    /* The band: at least 42% of a phone screen, 16:10 of the width on tablets, smaller on short landscape screens. */
    /* t468 (user 2026-11-05: "we need this layout fixed"): the band leaves room for the download card (about 150px
       below the band), so title, tabs, fight and card fit on one screen. */
    --band-h: clamp(150px, min(max(42vh, 62.5vw), 100vh - var(--band-top) - 150px), 600px); }
  html { scroll-padding-top: var(--mh); }
  /* Header */
  .site-head { position: sticky; top: 0; z-index: var(--z-head); padding: 0 var(--m-pad); gap: 10px; border-bottom-color: var(--line);
    background: rgba(11, 16, 32, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .js-menu .site-head { flex-wrap: nowrap; height: var(--mh); }
  .brand { gap: 8px; min-height: 44px; }
  .brand svg.logo { width: 36px; height: 36px; }
  .brand .wordmark b { font-size: 17px; letter-spacing: .04em; }
  .brand .wordmark small { font-size: 9px; letter-spacing: .38em; }
  .js-menu .m-cta { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font-family: var(--font-h3); font-size: 16px; font-weight: 700; text-decoration: none; }
  .js-menu .menu-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--line); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
  .menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
  .menu-btn .bars { position: relative; }
  .menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
  .menu-btn .bars::before { top: -6px; }
  .menu-btn .bars::after { top: 6px; }
  .menu-open .menu-btn .bars { background: transparent; }
  .menu-open .menu-btn .bars::before { top: 0; transform: rotate(45deg); }
  .menu-open .menu-btn .bars::after { top: 0; transform: rotate(-45deg); }
  .js-menu .site-nav { display: none; }
  .js-menu .menu-open .site-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; gap: 0; padding: 4px var(--m-pad) 12px; background: #0B1020; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .45); }
  .js-menu .menu-open .site-nav a, .js-menu .menu-open .site-nav .linkish { display: flex; align-items: center; min-height: 50px; padding: 0 4px;
    border-bottom: 1px solid rgba(44, 55, 99, .6); font-family: var(--font-h3); font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
    text-decoration: none; text-align: left; color: var(--text); box-shadow: none; }
  .js-menu .menu-open .site-nav .linkish { border-bottom: 0; color: var(--accent); }
  .js-menu .menu-open .site-nav a.cta { display: none; }
  .js-menu .menu-open .site-nav a.on { color: var(--accent); }
  /* Download screen: fixed heights above the band keep it where the fight is drawn. */
  .snap.first { padding-top: 18px; }
  .snap.first .pane::before { display: none; }
  .snap.first .kick { height: var(--m-kick); line-height: var(--m-kick); }
  .snap.first h2 { margin: 6px 0 0; font-size: var(--m-h1); line-height: 1.2; height: calc(1.2 * var(--m-h1)); white-space: nowrap; }
  .snap .art-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; width: 100%; height: var(--m-tabs); margin: var(--gap) 0 0; }
  .snap .art.art { flex: 1 1 0; order: 0; min-width: 0; justify-content: center; border: 2px solid var(--line); border-radius: 12px;
    background: rgba(20, 27, 52, .72); opacity: .78; animation: none; text-align: center; }
  .snap .art.art.picked { border-color: var(--accent); background: rgba(53, 214, 198, .14); opacity: 1; box-shadow: 0 0 14px rgba(53, 214, 198, .3); }
  .snap .art.art img, .snap .art.art video { display: none; }
  .snap .art.art figcaption, .snap .art.art:not(.picked) figcaption { display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 0 8px; background: transparent; font-size: 15px; line-height: 1.2; }
  .band { display: block; width: 100%; height: var(--band-h); margin-top: var(--gap); flex: none; }
  /* The download card overlaps the band's faded bottom by 24px, so band and card read as one block. */
  .snap.first .grid.one { position: relative; margin-top: -24px; }
  .snap.first .tile { background: rgba(20, 27, 52, .86); }
  /* Sign-up: title, one line, the form. Inputs stay 16px (no iOS zoom). */
  main.signup { padding: 36px var(--m-pad) 36px; gap: var(--gap); justify-content: flex-start; }
  main.signup .hero { gap: 6px; }
  main.signup .hero::before { inset: -16px -8px; }
  main.signup h1 { font-size: var(--m-h1); line-height: 1.2; }
  main.signup .hero .lead { font-size: 17px; }
  main.signup .panel { width: 100%; max-width: 560px; padding: 22px 18px; gap: 16px; background: rgba(20, 27, 52, .86);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .form-game { font-size: 26px; margin-bottom: 4px; text-align: center; }
  .field input { height: 48px; font-size: 16px; }
  .btn { min-height: 50px; }
  .check input { width: 22px; height: 22px; }
  /* Fight on the Download screen ("band" frame, js/bg-variants.js sets .world data-frame): drawn where .band sits. A wide
     (1920x824) file keeps its shape and is zoomed so the pair fills about 92% of the screen width (at most 82% of the
     band height), centred on the pair; tall and mid files are framed with the fighters centred and cover the band. */
  .world { inset: 0; }
  .world::after { background: rgba(11, 16, 32, .15); }
  .world-video, .world-video[data-game="sky"] { top: var(--band-top); bottom: auto; left: 0; width: 100%; height: var(--band-h); max-width: none;
    transform: none; object-fit: cover; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
  .world-video[data-shape="wide"], .world-video[data-game="sky"][data-shape="wide"] {
    --w: min(calc(100vw / (var(--sx) + .08)), calc(var(--band-h) * .82 / var(--sy) * 1920 / 824)); --h: calc(var(--w) * 824 / 1920);
    top: calc(var(--band-top) + var(--band-h) / 2 - var(--fy) * var(--h)); height: var(--h);
    width: var(--w); left: calc(50vw - var(--fx) * var(--w)); }
  /* t468 (user 2026-11-05: "looks cut off to the right"): Skyblade clips have a painted ground and the pair stands
     near the clip's right edge, so centring the pair showed the clip's edge. The clip now always reaches the right
     edge of the screen; the pair then sits a little right of centre. */
  .world-video[data-game="sky"][data-shape="wide"] { left: max(calc(50vw - var(--fx) * var(--w)), calc(100vw - var(--w))); }
  /* Other sections ("page" frame): the pair is smaller, whole inside the screen width, behind the section heading
     (about a quarter down the screen) and a little dimmer behind the tiles. */
  .world[data-frame="page"] .world-video { top: 0; height: 100vh; }
  .world[data-frame="page"] .world-video[data-shape="wide"] { --w: calc(100vw / (var(--sx) + .16));
    top: calc(24vh - var(--fy) * var(--h)); height: var(--h); }
  .world[data-frame="page"] .world-video.on { opacity: .8; }
  /* Sections */
  .snap { padding: 44px var(--m-pad); }
  .snap .pane { width: 100%; max-width: 560px; margin: 0 auto; text-align: center; }
  .snap .pane::before { inset: -24px -12px; }
  .snap .kick { font-size: 13px; }
  .snap h2 { font-size: 40px; }
  .snap .lead { margin: 0 auto 20px; font-size: 18px; }
  .snap .note-soon { margin: -6px 0 18px; justify-content: center; }
  .snap .grid, .snap .grid.two, .snap .grid.three, .snap .grid.one { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .snap .grid + .grid { margin-top: 12px; }
  .snap .tile, .snap .grid.two .tile, .snap .grid.three .tile, .snap .grid.one .tile { min-height: 0; padding: 16px 18px; align-items: center; text-align: center; }
  .snap .stat { flex-direction: row; justify-content: space-between; align-items: center; padding: 12px 18px; text-align: left; }
  .snap .dl .btn { align-self: center; min-width: 200px; }
}
@media (max-width: 899.98px) and (orientation: landscape), (max-height: 499.98px) and (orientation: landscape) {
  :root { --m-h1: 28px; }
  /* t468 (user 2026-11-05: "we need this layout fixed"): on short landscape windows the pair behind the other sections
     is at most 80% of the screen height and centred on it, so no fighter is cut off at the top. */
  .world[data-frame="page"] .world-video[data-shape="wide"] {
    --w: min(calc(100vw / (var(--sx) + .16)), calc(80vh / var(--sy) * 1920 / 824)); top: calc(50vh - var(--fy) * var(--h)); }
}

/* t462 (user 2026-11-05: "shop shop, redundant, remove the shop in white font, promote the green font shop as the
   surviving header"): each section keeps one heading, the green label, at heading size. */
.snap h2.kick { margin: .2em 0 .35em; font-family: var(--font-h1); font-size: clamp(34px, 3.4vw, 60px); line-height: 1.05;
  letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
@media (max-width: 899px), (orientation: portrait), (max-height: 499.98px) {
  :root { --m-kick: 0px; }
  .snap h2.kick, .snap.first h2.kick { height: auto; line-height: 1.05; font-size: var(--m-h1); }
}
/* t464 (user 2026-11-05: "download isn't even close to being on the right spot"): every section centres its
   heading and cards on the same axis as the sign-up block. */
.snap .pane { margin-left: auto; margin-right: auto; text-align: center; }
.snap .pane .grid.one { max-width: 560px; margin-left: auto; margin-right: auto; }
.snap .pane .tile { text-align: center; }
.snap .pane .btn { margin-left: auto; margin-right: auto; }
.snap .pane .grid.one { grid-template-columns: minmax(0, 1fr); justify-items: stretch; width: 100%; }
.snap .pane .grid.one > .tile { width: 100%; margin: 0; }
/* t468 D1 (Android test 2026-11-05: the page was 5-6 px wider than a 412 px phone before the info boxes appeared):
   on the phone layout, boxes waiting to appear only slide up; the 3D tilt made them wider than the screen. */
@media (max-width: 899.98px), (orientation: portrait), (max-height: 499.98px) {
  :root { --rev-tilt: 0deg; --rev-persp: translateY(0); }
}