/*
  Flappy Dash - site stylesheet.

  The colours are the game's own (lib/core/palette32.dart), so the site and
  the game read as one thing: SKYLINE's sky behind everything, cards in the
  game's paper with its ink outline, and the ground strip at the foot of every
  page. Headings are inline SVGs drawn from the game's display face by
  build_site.py; everything else is set in the system font, because body text
  has to be read, and a pixel face at paragraph length is tiring.
*/

:root {
  --ink: #14101A;
  --shadow: #2C2230;
  --paper: #FFF4DC;
  --paper-2: #FFE9BF;
  --white: #FFFFFF;
  --sky: #4EC0CA;
  --sky-2: #8FE3E8;
  --sky-3: #EFFCFB;
  --water: #1B8FA8;
  --gold: #FFD54A;
  --orange: #FF8A3C;
  --rust: #C76D28;
  --pink: #FF5EA8;
  --berry: #C2405F;
  --leaf: #74BF2E;
  --leaf-dark: #3D7A18;
  --earth: #B07229;
  --earth-dark: #6B3D22;
  --sand: #D8B183;
  --radius: 6px;
  --page: 1040px;
  --text: 1.0625rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 400 var(--text)/1.65 system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--sky) 0, var(--sky-2) 520px, var(--sky-3) 1100px)
    var(--sky-3);
}

[hidden] { display: none !important; }

img, video, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--water); text-underline-offset: 2px; }
a:hover { color: var(--berry); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ink);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--gold); color: var(--ink);
  padding: 10px 14px; border: 3px solid var(--ink); font-weight: 800;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- headings */

h1, h2, h3, .pixel { margin: 0; line-height: 1; }

.px-line { display: inline-flex; flex-wrap: wrap; gap: .32em .5em; align-items: center; }
.px-word { display: inline-block; line-height: 0; }
.px { display: block; height: 1em; width: auto; overflow: visible; }

h1.pixel { font-size: clamp(2.1rem, 7.5vw, 3.4rem); }
h2.pixel { font-size: clamp(1.3rem, 4.2vw, 1.75rem); margin: 0 0 .9rem; }
h2.pixel.white, h2.pixel.gold { font-size: clamp(1.5rem, 5vw, 2.1rem); }
h3 { font-size: 1.15rem; font-weight: 800; margin: 1.4rem 0 .45rem; letter-spacing: .01em; }

/* ------------------------------------------------------------------ header */

.site-header {
  background: var(--ink);
  color: var(--paper);
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 4px 0 rgba(20, 16, 26, .25);
}
.header-inner {
  max-width: var(--page); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 20px; padding: 8px 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 40px; height: 40px; image-rendering: pixelated; }
.brand-name { font-size: 1.35rem; }
.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; flex-wrap: wrap;
}
.site-nav a {
  display: block; padding: 8px 10px;
  color: var(--paper); text-decoration: none;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  border-radius: 4px;
}
.site-nav a:hover { background: var(--shadow); color: var(--gold); }
.site-nav a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }

@media (max-width: 720px) {
  .header-inner { padding: 8px 12px 4px; }
  .site-nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav ul { flex-wrap: nowrap; }
  .site-nav a { padding: 8px 9px; white-space: nowrap; font-size: .9rem; }
}

/* -------------------------------------------------------------------- page */

main { flex: 1; width: 100%; max-width: var(--page); margin: 0 auto; padding: 24px 16px 40px; }

.page-hero { text-align: center; padding: 18px 0 8px; }
.page-hero .lede {
  max-width: 44rem; margin: 18px auto 0;
  font-size: 1.15rem; font-weight: 500; color: var(--ink);
}

.card {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 6px 0 rgba(20, 16, 26, .28);
  padding: 22px 26px;
  margin: 26px 0;
}
.card > :last-child { margin-bottom: 0; }
.card p { margin: 0 0 1rem; }
.card ul, .card ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.card li { margin: .3rem 0; }
@media (max-width: 560px) { .card { padding: 18px 16px; } }

.kicker {
  display: inline-block; margin: 0 0 10px;
  font: 800 .78rem/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--gold); padding: 6px 8px; border-radius: 3px;
}

.note {
  border-left: 5px solid var(--gold);
  background: var(--paper-2);
  padding: 12px 16px; border-radius: 0 4px 4px 0;
  margin: 0 0 1rem;
}

kbd {
  display: inline-block; min-width: 1.7em; text-align: center;
  font: 700 .85em/1 ui-monospace, Menlo, Consolas, monospace;
  background: var(--white); border: 2px solid var(--ink); border-bottom-width: 4px;
  border-radius: 4px; padding: 3px 6px;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  font: 900 1.02rem/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: 0 5px 0 var(--rust);
  transition: transform .06s ease, box-shadow .06s ease;
  cursor: pointer;
}
.btn:hover { color: var(--ink); background: #FFE07A; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--rust); }
.btn-quiet { background: var(--paper); box-shadow: 0 5px 0 var(--earth); }
.btn-quiet:hover { background: var(--white); }
.btn-big { min-height: 60px; padding: 16px 34px; font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 22px 0 6px; }
.small-print { font-size: .92rem; color: var(--shadow); margin-top: 12px; }

/* -------------------------------------------------------------------- home */

.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center;
  padding: 10px 0 6px;
}
.hero h1.pixel { font-size: clamp(2.6rem, 9vw, 4.6rem); }
.hero .tagline { font-size: 1.3rem; font-weight: 700; margin: 18px 0 6px; }
.hero .lede { font-size: 1.1rem; margin: 0; }
.hero .actions { justify-content: flex-start; }
.hero-media { justify-self: center; }
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .actions { justify-content: center; }
}

.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 16;
  border: 6px solid var(--ink); border-radius: 26px;
  background: var(--ink); overflow: hidden;
  box-shadow: 0 10px 0 rgba(20, 16, 26, .3);
}
.phone video, .phone img { display: block; width: 100%; height: 100%; object-fit: cover; }

.features {
  display: grid; gap: 18px; padding: 0; margin: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.feature {
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: 0 4px 0 rgba(20, 16, 26, .18);
}
.feature h3 { margin: 0 0 6px; }
.feature p { margin: 0; font-size: .98rem; }
.feature .icon { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: 8px; }

.gallery {
  display: grid; gap: 16px; list-style: none; padding: 0; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.gallery figure { margin: 0; text-align: center; }
.gallery img {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border: 4px solid var(--ink); border-radius: 14px; background: var(--ink);
}
.gallery figcaption { font-weight: 800; font-size: .9rem; margin-top: 8px; letter-spacing: .04em; }

.guide-links { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 0; list-style: none; margin: 0; }
.guide-links a {
  display: block; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: 0 4px 0 rgba(20, 16, 26, .18);
}
.guide-links a:hover { background: var(--paper-2); color: var(--ink); }
.guide-links strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.guide-links span { font-size: .95rem; color: var(--shadow); }

/* -------------------------------------------------------------------- play */

/*
  On the play page the game is the point, so the first screen is the game:
  as tall as the window allows on a computer, edge to edge on a phone. The
  header slims to one fixed row so the game's height can be worked out from
  it, and everything else - the title, the guides - waits below.
*/
.page-play { --header-h: 56px; }
.page-play .header-inner { height: var(--header-h); padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
.page-play .site-nav { width: auto; overflow-x: auto; }
.page-play .site-nav ul { flex-wrap: nowrap; }
.page-play main { max-width: none; padding: 0 0 40px; }
.page-body { max-width: var(--page); margin: 0 auto; padding: 8px 16px 0; }

.play-stage {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  padding: 12px 16px;
}
.game-frame {
  position: relative; flex: none;
  height: 100%; aspect-ratio: 9 / 16; max-width: 100%;
  border: 5px solid var(--ink); border-radius: 12px; overflow: hidden;
  background: var(--sky);
  box-shadow: 0 8px 0 rgba(20, 16, 26, .3);
}
.game-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.game-frame:fullscreen { border: 0; border-radius: 0; width: 100%; height: 100%; aspect-ratio: auto; background: var(--ink); }
.game-tools { display: flex; flex-direction: column; gap: 14px; width: 190px; }
.game-tools .btn { width: 100%; }
.tool-hint { margin: 4px 0 0; font-size: .92rem; line-height: 1.9; color: var(--shadow); }

/*
  Portrait screens - phones, and tablets held upright - are already the
  game's shape or taller, and the game fills any extra height with its own
  sky and ground. So there the frame is the whole screen below the header,
  edge to edge, and the buttons move underneath it. On a phone the game goes
  properly full screen at the first tap anyway; this is what it looks like
  before that tap, and in browsers that do not allow it.
*/
@media (max-aspect-ratio: 4 / 5) {
  .page-play .site-nav { display: none; }
  .play-stage { display: block; height: auto; padding: 0; }
  .game-frame {
    width: 100%; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
    aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
  }
  .game-tools { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 16px 16px 0; }
  .game-tools .btn { width: auto; }
  .tool-hint { display: none; }
}

/* ------------------------------------------------------------------ worlds */

.world { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.world img {
  width: 200px; aspect-ratio: 9 / 16; object-fit: cover;
  border: 4px solid var(--ink); border-radius: 12px; background: var(--ink);
}
.world .stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.world .stats li {
  margin: 0; font: 800 .8rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em;
  background: var(--ink); color: var(--paper); padding: 7px 9px; border-radius: 3px;
}
@media (max-width: 640px) {
  .world { grid-template-columns: 1fr; }
  .world img { width: 160px; justify-self: center; }
}

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; background: var(--white); border: 3px solid var(--ink); }
th, td { text-align: left; padding: 10px 12px; vertical-align: top; border-bottom: 2px solid #E6D9BC; }
th { background: var(--ink); color: var(--paper); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
tr:nth-child(even) td { background: #FFFBF0; }
td.num { white-space: nowrap; font-weight: 800; }
.power-name { font-weight: 900; letter-spacing: .03em; white-space: nowrap; }

/* On a phone a table becomes a stack of cards, one row each. Squeezed into
   columns, the descriptions came out one word to a line. Every cell carries
   its column's heading as data-label (build_site.py adds them), so the header
   row can go. */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { padding: 12px 14px; border-bottom: 2px solid #E6D9BC; }
  tr:nth-child(even) { background: #FFFBF0; }
  tr:last-child { border-bottom: 0; }
  td, tr:nth-child(even) td { border: 0; padding: 2px 0; background: transparent; }
  td:first-child { font-weight: 900; font-size: 1.05rem; }
  td.num { font-weight: 700; }
  td[data-label]::before { content: attr(data-label) ": "; font-weight: 800; color: var(--shadow); }
  .power-name { white-space: normal; }
}

/* --------------------------------------------------------------------- faq */

.faq details {
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius);
  margin: 0 0 12px; box-shadow: 0 3px 0 rgba(20, 16, 26, .15);
}
.faq summary {
  cursor: pointer; padding: 14px 16px; font-weight: 800; font-size: 1.04rem;
  list-style: none; position: relative; padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font: 900 1.4rem/1 ui-monospace, monospace; color: var(--berry);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 16px 14px; }
.faq details > div > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- legal */

.legal h2 { font-size: 1.3rem; font-weight: 800; margin: 1.6rem 0 .5rem; }
.legal h2:first-of-type { margin-top: .4rem; }
.legal .updated { font-weight: 700; color: var(--shadow); }

/* ------------------------------------------------------------------ footer */

.site-footer { margin-top: auto; background: var(--earth-dark); color: var(--paper); }
.site-footer .ground {
  height: 28px;
  background:
    repeating-linear-gradient(90deg, var(--leaf) 0 12px, var(--leaf-dark) 12px 16px, var(--leaf) 16px 28px, #9BE04F 28px 32px) top / 100% 16px no-repeat,
    linear-gradient(var(--leaf-dark), var(--leaf-dark)) 0 16px / 100% 4px no-repeat,
    linear-gradient(var(--sand), var(--sand)) 0 20px / 100% 8px no-repeat;
}
.footer-inner { max-width: var(--page); margin: 0 auto; padding: 26px 16px 34px; text-align: center; }
.footer-cta { margin: 0 0 20px; }
.footer-links { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer-links a { color: var(--paper); font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: var(--gold); text-decoration: underline; }
.copyright { margin: 0; font-size: .9rem; opacity: .85; }

/* -------------------------------------------------------------- not found */

.lost { text-align: center; padding: 30px 0; }
.lost img {
  width: 128px; image-rendering: pixelated;
  border: 4px solid var(--ink); border-radius: 22px;
  box-shadow: 0 6px 0 rgba(20, 16, 26, .3);
  transform: rotate(-10deg);
}
.brand img { border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}