/* Moonkick landing (site/build_landing.py): the game's palette and type, the route's own pixel art. */
:root {
  --night: #0A0C0B; --chalk: #ECEDE6; --grey: #9BA19A; --hivis: #FF6A1A; --grass: #5C9A34; --line: #2A2E2B;
  --hero: "Doto", ui-monospace, monospace;
  --body: "Schibsted Grotesk", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--night); color: var(--chalk); font: 500 18px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The scoreboard bar */
.bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: var(--night); }
.mark { font: 900 22px/1 var(--hero); text-decoration: none; letter-spacing: .02em; }
.bar nav { display: flex; gap: 18px; font-size: 15px; }
.bar nav a { text-decoration: none; color: var(--grey); }
.bar nav a:hover { color: var(--chalk); }

/* Hero: the pitch from above, the copy on a scoreboard panel */
.hero { min-height: 86vh; display: flex; align-items: flex-end; padding: clamp(16px, 4vw, 48px);
  background: var(--grass) url(/assets/route-low.png) center bottom / 100% auto no-repeat; image-rendering: pixelated; }
.hero-copy { background: var(--night); padding: clamp(20px, 3vw, 36px); max-width: 640px; }
h1 { font: 900 clamp(48px, 9vw, 104px)/.95 var(--hero); margin: 0 0 18px; text-transform: uppercase; letter-spacing: .01em; }
.lead { font-size: clamp(19px, 2.2vw, 22px); max-width: 32ch; margin: 0 0 24px; color: var(--chalk); }
.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.store { display: inline-flex; align-items: center; gap: 12px; background: var(--chalk); color: var(--night);
  text-decoration: none; font: 700 18px/1 var(--body); padding: 10px 18px 10px 10px; }
.store img { border-radius: 8px; }
.store[aria-disabled="true"] { cursor: default; }
.soon { color: var(--grey); font-size: 15px; }

/* The playable kick */
.play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(24px, 5vw, 72px);
  align-items: start; padding: clamp(48px, 8vw, 104px) clamp(16px, 4vw, 48px); max-width: 1120px; margin: 0 auto; }
h2 { font: 900 clamp(34px, 5vw, 56px)/1 var(--hero); margin: 0 0 12px; text-transform: uppercase; }
.play-copy > p { color: var(--grey); max-width: 44ch; margin: 0 0 28px; }
.card { border: 2px solid var(--chalk); padding: clamp(18px, 3vw, 28px); }
.score { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--line); }
.dist { font: 900 clamp(36px, 5vw, 52px)/1 var(--hero); color: var(--hivis); font-variant-numeric: tabular-nums; }
.area { color: var(--grey); font-size: 15px; text-align: right; }
.qnum { color: var(--grey); font-size: 15px; margin: 0 0 6px; }
.prompt { font: 700 clamp(21px, 2.4vw, 25px)/1.25 var(--body); margin: 0 0 18px; }
.choices { display: grid; gap: 8px; }
.choice { font: 700 18px/1.2 var(--body); text-align: left; padding: 14px 16px; background: transparent; color: var(--chalk);
  border: 2px solid var(--chalk); cursor: pointer; }
.choice:hover { background: var(--chalk); color: var(--night); }
.open { display: flex; gap: 8px; }
.open[hidden], .choices:empty { display: none; }
#answer { flex: 1; min-width: 0; font: 500 19px/1 var(--body); color: var(--chalk); background: transparent;
  border: 2px solid var(--chalk); padding: 14px; }
#answer::placeholder { color: var(--grey); }
.kick, .next { font: 900 22px/1 var(--hero); text-transform: uppercase; background: var(--hivis); color: var(--night);
  border: 0; padding: 14px 20px; cursor: pointer; }
.next { margin-top: 18px; width: 100%; }
.result:empty { display: none; }
.result p { margin: 10px 0 0; }
.hint { color: var(--hivis); }

/* Stamps, as in the game: rotated, pips for how good it was; orange from Rare up, the gem filled */
.stamp { display: inline-flex; flex-direction: column; gap: 2px; transform: rotate(-5deg); margin: 6px 0 4px;
  font: 900 26px/1 var(--hero); text-transform: uppercase; padding: 8px 12px; border: 3px solid var(--chalk); }
.stamp small { font: 700 12px/1 var(--body); letter-spacing: 2px; }
.stamp.hot { border-color: var(--hivis); color: var(--hivis); }
.stamp.gem { background: var(--hivis); color: var(--night); }
.stamp.miss { border-color: var(--grey); color: var(--grey); }
.landed { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line); }
.landed .big { font: 900 28px/1.1 var(--hero); color: var(--chalk); text-transform: uppercase; margin: 0 0 6px; }

/* The window onto the route: only the first areas, fog above */
.window { position: relative; height: 600px; overflow: hidden; border: 2px solid var(--chalk); background: var(--night); }
.strip { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 78 / 480;
  background: url(/assets/route-low.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; will-change: transform; }
.fog { position: absolute; left: 0; right: 0; top: 0; height: 13.5%; display: flex; align-items: center; justify-content: center;
  padding: 0 18px; text-align: center; color: var(--chalk); font: 700 15px/1.35 var(--body);
  background-color: #8E9592;
  background-image: radial-gradient(circle, rgba(236,237,230,.55) 1.2px, transparent 1.5px);
  background-size: 6px 6px; box-shadow: 0 -400px 0 400px #8E9592; }
.fog span { background: var(--night); padding: 8px 10px; max-width: 26ch; }
.ball { position: absolute; left: 50%; top: 62%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; image-rendering: pixelated; }
.ball.flying { animation: spin .5s linear infinite; }
.ball.sag { animation: sag .7s ease-out; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sag { 30% { transform: translateY(18px); } 45% { transform: translate(-6px, 18px); } 60% { transform: translate(6px, 18px); } }

/* How it works */
.how { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.how ol { list-style: none; counter-reset: n; padding: 0; margin: 20px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.how li { counter-increment: n; border-top: 2px solid var(--chalk); padding-top: 14px; }
.how li::before { content: counter(n); display: block; font: 900 30px/1 var(--hero); color: var(--hivis); margin-bottom: 8px; }

footer { display: flex; flex-wrap: wrap; gap: 18px; padding: 28px clamp(16px, 4vw, 48px) 40px; color: var(--grey);
  font-size: 15px; border-top: 2px solid var(--line); }
footer a { text-decoration: none; }

@media (max-width: 760px) {
  .play { grid-template-columns: 1fr; }
  /* The window stays in view under the bar while the questions scroll beneath it. */
  .window { height: 240px; order: -1; position: sticky; top: 64px; z-index: 3; }
  .ball { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .fog span { font-size: 13px; }
  .hero { min-height: 78vh; }
  .bar nav { gap: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ball.flying, .ball.sag { animation: none; } }