@font-face { font-family: Tiny5; src: url(assets/tiny5.woff2) format("woff2"); font-display: block; }
@font-face { font-family: PowerWords; src: url(assets/powerwords.woff2) format("woff2"); font-display: block; }

/* The HUD's own palette. The page never uses another colour for its chrome. */
:root {
  color-scheme: dark;
  --navy: #120E23;
  --wood: #402E2B;
  --gold: #EBB85B;
  --cream: #FFF1A9;
  --parchment: #DACEA4;
  --stone: #AEA47E;
  --u: 3px;         /* one HUD art pixel, in CSS pixels; snapped to device pixels by script */
  --gutter: 64px;
  --body: 24px;
  --body-line: 32px;
  --h2: 64px;
  --h3: 40px;
  --bug: 32;        /* art pixels of each ride sprite shown in its slot */
  --edge: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));  /* where page content starts */
  --shade: max(40%, calc(var(--edge) + 500px));                            /* where the hero's art starts */
}
@media (max-width: 1119px) {
  :root { --gutter: 32px; --h2: 48px; }
}
@media (max-width: 520px) {
  :root { --gutter: 16px; --u: 2px; --body: 20px; --body-line: 28px; --h2: 40px; --h3: 32px; }
}

* { box-sizing: border-box; }
html { background: var(--navy); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--parchment);
  font: var(--body)/var(--body-line) Tiny5, ui-monospace, monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-synthesis: none;
  overflow-x: clip;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h2 { font-size: var(--h2); line-height: 1; font-weight: 400; color: var(--gold); text-shadow: calc(var(--h2) / 8) calc(var(--h2) / 8) 0 var(--wood); text-wrap: balance; }
h3 { font-size: var(--h3); line-height: 1; font-weight: 400; color: var(--gold); }
a { color: var(--cream); text-underline-offset: 6px; text-decoration-thickness: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: var(--u) solid var(--cream); outline-offset: var(--u); }
[id] { scroll-margin-top: 24px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cream); color: var(--navy); padding: 4px 16px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* Art frames: an image scaled by whole device pixels, placed by script (fit() in main.js). */
.art { display: block; position: relative; overflow: hidden; background: var(--navy); --px: 3px; }
.art picture { display: contents; }
.art img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
img, .art { image-rendering: pixelated; }

/* Dissolves: the game's Bayer dither, on the art's own pixel grid. Never a soft fade. */
.fade-x { position: absolute; top: 0; bottom: 0; width: calc(64 * var(--px)); background: url(assets/dither_x.png) 0 0 / calc(64 * var(--px)) calc(4 * var(--px)) repeat-y; image-rendering: pixelated; }
.fade-x.to-left { left: 0; }
.fade-b { position: absolute; left: 0; right: 0; bottom: 0; height: calc(32 * var(--px)); background: url(assets/dither_y.png) 0 100% / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x; image-rendering: pixelated; }
.fade-t { position: absolute; left: 0; right: 0; top: 0; height: calc(32 * var(--px)); background: url(assets/dither_y.png) 0 100% / calc(4 * var(--px)) calc(32 * var(--px)) repeat-x; image-rendering: pixelated; transform: scaleY(-1); }

/* The HUD's own panel and button, nine-sliced. */
.panel {
  border-style: solid;
  border-width: calc(4 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  border-image: url(assets/panel.png) 4 4 6 4 fill / calc(4 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u));
  image-rendering: pixelated;
}
.btn {
  display: inline-block;
  border-style: solid;
  border-width: calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u));
  border-image: url(assets/button_small.png) 2 2 3 2 fill / calc(2 * var(--u)) calc(2 * var(--u)) calc(3 * var(--u));
  image-rendering: pixelated;
  color: var(--navy);
  font: 32px/32px Tiny5, monospace;
  padding: 4px 24px 8px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: none;
}
.btn:hover { color: var(--navy); transform: translateY(calc(-1 * var(--u))); }
.btn:active { transform: translateY(var(--u)); }
.btn.small { font-size: 24px; line-height: 24px; padding: 2px 16px 6px; }

/* Hero */
.hero { position: relative; min-height: min(100svh, 1040px); display: grid; align-items: center; isolation: isolate; overflow: clip; }
.hero-art { position: absolute; inset: 88px 0 0 0; z-index: -1; }   /* the top band stays navy, so the art never shares the nav's row */
.hero-shade { position: absolute; left: 0; top: 0; bottom: 0; width: var(--shade); background: var(--navy); }
.hero-art .fade-x.to-left { left: var(--shade); }
.hero-art .fade-t { height: calc(40 * var(--px)); }
.motion { position: absolute; right: var(--edge); bottom: 24px; }
.motion[hidden] { display: none; }
.nav { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; gap: 32px; padding: 20px var(--edge); z-index: 2; }
.nav .links { display: flex; gap: 32px; }
.nav .links a { color: var(--cream); text-decoration: none; }
.nav .links a:hover { color: var(--gold); text-decoration: underline; }
.hero-copy { width: calc(var(--edge) + 540px); max-width: 60%; padding: 72px 0 96px var(--edge); }
.logo { position: relative; margin-bottom: 40px; --px: 6px; overflow: visible; background: none; }
.logo img { position: static; width: 100%; height: auto; }
.tagline { font-size: 48px; line-height: 48px; color: var(--cream); margin-bottom: 24px; }
.hero-copy .sub { margin-bottom: 40px; max-width: 30em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* The star from the mount summon, twinkling on the wordmark. */
.star { position: absolute; width: calc(32 * var(--px)); height: calc(32 * var(--px)); background: url(assets/star.png) 0 0 / calc(192 * var(--px)) 100%; image-rendering: pixelated; opacity: 0; animation: twinkle 7s steps(1) infinite; pointer-events: none; }
.star.one { left: calc(var(--px) * 66); top: calc(var(--px) * -13); }
.star.two { left: calc(var(--px) * 12); top: calc(var(--px) * -13); animation-delay: 3.4s; }
@keyframes twinkle {
  0% { opacity: 1; background-position-x: 0; }
  1% { background-position-x: calc(-32 * var(--px)); }
  2% { background-position-x: calc(-64 * var(--px)); }
  3% { background-position-x: calc(-96 * var(--px)); }
  4% { background-position-x: calc(-128 * var(--px)); }
  5% { background-position-x: calc(-160 * var(--px)); }
  6%, 100% { opacity: 0; }
}

/* Downloads */
.download { padding-top: 64px; }
.download h2, .closing h2 { margin-bottom: 24px; }
.download h2 + p { margin-bottom: 32px; }
.dl-line { margin-top: 24px; color: var(--stone); }
.dl-note { margin-top: 8px; color: var(--stone); font-size: 16px; line-height: 24px; }

/* Spell bar section: the one band of wood on the page */
.spells { background: var(--wood); margin-top: 128px; padding: 0 0 96px; position: relative; }
.spells::before, .spells::after { content: ""; position: absolute; left: 0; right: 0; height: calc(16 * var(--band, 4px)); background: url(assets/dither_wood.png) 0 100% / calc(4 * var(--band, 4px)) calc(16 * var(--band, 4px)) repeat-x; image-rendering: pixelated; }
.spells::before { bottom: 100%; }
.spells::after { top: 100%; transform: scaleY(-1); }
.spells h2 { padding-top: 48px; text-shadow: calc(var(--h2) / 8) calc(var(--h2) / 8) 0 var(--navy); }
.spells h2, .rides h2 { margin-bottom: 16px; }
.intro { margin-bottom: 48px; max-width: 40em; }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 48px; align-items: start; }
.stage-panel { width: fit-content; margin-inline: auto; }
.stage { aspect-ratio: 200 / 112; width: min(800px, calc(100vw - 2 * var(--gutter) - 8 * var(--u))); }
.spellbar { display: flex; flex-wrap: nowrap; width: max-content; max-width: 100%; margin: 24px auto 0; gap: calc(4 * var(--u)); padding: calc(1 * var(--u)) calc(2 * var(--u)) 0; }
.slot { all: unset; display: block; cursor: pointer; }
.slot .key { display: block; width: calc(8 * var(--u)); height: calc(7 * var(--u)); margin: 0 auto var(--u); }
.slot .face { display: block; position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); background: url(assets/slot.png) 0 0 / 100% 100%; image-rendering: pixelated; }
.slot:hover .face { background-image: url(assets/slot_hover.png); }
.slot[aria-pressed="true"] .face { background-image: url(assets/slot_selected.png); }
.slot .face img { position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.slot:focus-visible { outline: var(--u) solid var(--cream); outline-offset: var(--u); }
.words { font: 40px/48px PowerWords, Tiny5, monospace; color: #FBFBE8; min-height: 48px; --ink: #655894; text-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink); margin-bottom: 24px; }
.words span { animation: speak 1ms steps(1) both; }
@keyframes speak { from { visibility: hidden; } to { visibility: visible; } }
.meaning { color: var(--stone); margin-bottom: 24px; }
.book h3 { margin-bottom: 4px; }
.stats { display: grid; grid-template-columns: max-content 1fr; gap: 0 24px; margin-bottom: 24px; }
.stats dt { color: var(--stone); }
.stats dd { color: var(--cream); }

/* Rides: the spell book mirrored, back on the navy. Each slot shows the game's own ride sheet. */
.rides { padding-top: 192px; }
.slot .stall { display: block; padding: var(--u); border: calc(2 * var(--u)) solid; border-image: url(assets/slot.png) 2 fill / calc(2 * var(--u)); image-rendering: pixelated; }
.slot:hover .stall { border-image-source: url(assets/slot_hover.png); }
.slot[aria-pressed="true"] .stall { border-image-source: url(assets/slot_selected.png); }
.bug { display: block; width: calc(var(--bug) * var(--u)); height: calc(44 * var(--u)); --at: calc((48 - var(--bug)) / -2 * var(--u)); background: 0 0 / calc(192 * var(--u)) calc(224 * var(--u)) no-repeat; background-position: var(--at) calc(-4 * var(--u)); image-rendering: pixelated; }
.bug.dark { background-image: url(assets/saddlebug_dark.png); }
.bug.gold { background-image: url(assets/saddlebug_gold.png); }
.bug.pink { background-image: url(assets/saddlebug_pink.png); }
.bug.elite { background-image: url(assets/saddlebug_elite.png); }
.slot[aria-pressed="true"] .bug { animation: bob .6s steps(4) infinite; }
@keyframes bob { to { background-position-x: calc(var(--at) - 192 * var(--u)); } }

/* Closing */
.closing { padding-top: 160px; padding-bottom: 96px; }
.closing-row { display: flex; align-items: center; gap: 64px; }
.gate { --p: 6px; flex: none; width: calc(20 * var(--p)); height: calc(38 * var(--p)); background: url(assets/portal_gate_idle.png) 0 0 / calc(2400 * var(--p)) 100%; image-rendering: pixelated; animation: gate 12s steps(120) infinite; }
@keyframes gate { to { background-position-x: calc(-2400 * var(--p)); } }

footer { border-top: var(--u) solid var(--wood); margin-top: 32px; padding: 48px 0 64px; font-size: 16px; line-height: 24px; color: var(--stone); }
.foot { display: grid; grid-template-columns: 172px minmax(0, 1fr) max-content; gap: 32px 64px; }
.foot img { display: block; width: 172px; height: 50px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot a { color: var(--parchment); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Only a hand on a keyboard can press 1 to 6. */
.touch { display: none; }
@media (hover: none) {
  .keys { display: none; }
  .touch { display: inline; }
}

@media (max-width: 1199px) {
  :root { --shade: calc(var(--edge) + 440px); --bug: 30; }
  .hero-copy { width: calc(var(--edge) + 440px); }
}
@media (max-width: 1119px) {
  .book { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1120px) {
  .book.mirror { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
  .book.mirror > :last-child { order: -1; }
}
@media (max-width: 999px) {
  .hero { display: flex; flex-direction: column; min-height: 0; align-items: stretch; }
  .hero-copy { width: auto; max-width: none; padding: 104px var(--gutter) 24px; order: 1; }
  .hero-art { position: relative; inset: auto; order: 2; height: clamp(280px, 64vw, 520px); z-index: 0; }
  .hero-art .hero-shade, .hero-art .fade-x { display: none; }
  .motion { bottom: 16px; z-index: 1; }
  .closing-row { gap: 32px; }
  .gate { --p: 4px; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .spells { margin-top: 96px; }
  .rides { padding-top: 144px; }
  .closing { padding-top: 96px; }
}
@media (max-width: 640px) {
  :root { --bug: 26; }
  .nav .links { gap: 24px; }
  .closing-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .tagline { font-size: 40px; line-height: 40px; }
  .btn { font-size: 24px; line-height: 24px; padding: 4px 16px 6px; }
  .btn.small { font-size: 16px; line-height: 16px; padding: 2px 8px 4px; }
  .nav { padding-block: 16px; gap: 16px; }
  .words { font-size: 30px; line-height: 40px; min-height: 40px; text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink); }
}
@media (max-width: 360px) {
  .spellbar { gap: calc(2 * var(--u)); padding-inline: 0; }
}

/* Someone asked for stillness: the system setting, or the page's own pause button. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star, .gate, .words span, .slot[aria-pressed="true"] .bug { animation: none; }
  .btn:hover, .btn:active { transform: none; }
  .motion { display: none; }
}
.still .star, .still .gate, .still .words span, .still .slot[aria-pressed="true"] .bug { animation: none; }