/* sunair.fun — the front door.
   A poster, not a shop window: flat colour, hard shapes, no gloss. The games are
   the thing, and anything the shelf does to draw attention it takes from them. */

:root {
  --sand:  #fdf3e0;   /* the page */
  --ink:   #1b3a4b;   /* deep sea-blue, not black — every border and letter
                         carries a blue undertone without anything being "blue" */
  --dim:   #6a8695;
  --sun:   #ffc93c;
  --coral: #ff6b4a;

  --wave-h: clamp(96px, 15vh, 160px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  /* Flex, not grid-template-rows. The pages have different numbers of children,
     and a fixed row template silently assigns 1fr to whichever child happens to
     land in slot two. */
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
  /* The extra bottom padding is the wave's height — otherwise, on a short page,
     the footer lands in the water. */
  padding: clamp(40px, 8vh, 88px) clamp(22px, 6vw, 56px) calc(var(--wave-h) + 28px);
  background: var(--sand);
  color: var(--ink);
  /* No web fonts — the CSP is `default-src 'self'`, which blocks them outright.
     ui-rounded resolves to SF Rounded on Apple platforms and degrades to a
     friendly system sans everywhere else. Zero network requests, soft feel. */
  font: 17px/1.6 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Two flat shapes, and that is the entire illustration. No blur, no glow: they
   read as SHAPES rather than light sources, which is what makes it a poster
   rather than a photograph. Sun above, sea below; the page sits between them.

   ABSOLUTE, not fixed. Fixed pins them to the VIEWPORT, so on any page long
   enough to scroll (/about, /privacy) the text slid underneath the water and the
   sun hung in the middle of a paragraph. Absolute pins them to the PAGE: the sun
   is at the top of the document and the sea is at the bottom of it, wherever that
   falls. The layout is a poster, so its shapes belong to the poster, not to the
   window you happen to be looking through. */
body::before,
body::after {
  content: "";
  position: absolute;
  z-index: -1;
}

body::before {                    /* the sun */
  top: -130px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: var(--sun);
}

/* The sea. An inline SVG data-URI rather than CSS shapes, because a wave built
   out of border-radius is always visibly a stack of ellipses.
   `preserveAspectRatio: none` + `background-size: 100% 100%` lets one 1440-wide
   path stretch edge-to-edge at ANY viewport width — so it never tiles, never
   repeats, and never leaves a gap on an ultrawide monitor.
   Two paths, pale behind and deeper in front: the only depth cue in the design,
   and it stays completely flat. */
body::after {
  left: 0; right: 0; bottom: 0;
  height: var(--wave-h);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,92 C180,32 340,138 620,94 C900,50 1130,148 1440,84 L1440,160 L0,160 Z' fill='%23bfe6f0'/%3E%3Cpath d='M0,124 C200,72 420,166 700,120 C980,74 1210,158 1440,112 L1440,160 L0,160 Z' fill='%237fc7dd'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
}

header h1 {
  margin: 0;
  font-size: clamp(44px, 9vw, 84px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

header h1 span { color: var(--coral); }

header p {
  margin: 14px 0 0;
  color: var(--dim);
  font-size: 17px;
}

main { width: 100%; max-width: 800px; }

.games {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
}

/* The hard offset shadow IS the style. On hover the card presses INTO it — it
   travels exactly as far as the shadow shrinks, so it reads as a physical button
   being pushed rather than a rectangle sliding around. */
.game {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 3.5vw, 34px);
  align-items: center;
  padding: 26px clamp(20px, 3vw, 30px);
  text-decoration: none;
  color: inherit;
  background: #fffdf8;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}

.game:hover,
.game:focus-visible {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--ink);
  outline: none;
}

/* Native 584x130. Only ever scaled DOWN — its edges are anti-aliased, so
   `image-rendering: pixelated` would show ragged alpha rather than clean blocks. */
.game-art {
  width: clamp(150px, 24vw, 250px);
  height: auto;
}

.game-blurb {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.6;
}

.game-go {
  font-size: 14px;
  font-weight: 800;
  color: var(--coral);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---- the empty state, which is also the copy --------------------------------

   Drawn as an EMPTY CARD SLOT: the same size, radius and border-weight as a real
   game card, but dashed and unfilled. It occupies the space the first game will
   take, so the page reads as composed-and-waiting rather than broken-and-empty —
   and it carries the prose that stops an automated classifier reading the domain
   as parked.

   It removes itself the instant a real game exists. From then on the description
   lives only on /about.html.
   --------------------------------------------------------------------------- */

.empty {
  padding: clamp(30px, 5vw, 44px) clamp(22px, 3.5vw, 34px);
  border: 2.5px dashed #c9b89a;   /* sand, darkened — reads as a pencil outline */
  border-radius: 18px;
  max-width: 560px;
}

.empty-lead {
  margin: 0;
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.empty-sub {
  margin: 10px 0 0;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.65;
}

.empty-soon {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--coral);
}

/* The whole block is scaffolding. When there's a game, it goes. */
body:has(.game) .empty { display: none; }

/* ---- prose: /about and /privacy --------------------------------------------- */

/* Tight on purpose. These pages exist to be READ ONCE and believed — a policy you
   have to scroll through twice is a policy nobody finishes. */
.prose {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
}

.prose p { margin: 0 0 12px; color: #46626f; }

.prose h2 {
  margin: 26px 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.prose b { color: var(--ink); }

.prose code {
  background: #fffdf8;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 14px;
}

.prose .updated {
  margin-top: 34px;
  font-size: 14px;
  color: #90a6b1;
}

/* One link style everywhere: coral, and underlined on hover. Links in body text
   must not rely on colour alone to be findable. */
.prose a,
.empty a,
footer a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
}

.prose a:hover, .prose a:focus-visible,
footer a:hover, footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The wordmark doubles as the home link on the sub-pages. */
h1 a.home {
  color: inherit;
  text-decoration: none;
}

footer {
  margin-top: auto;   /* pin to the bottom on short pages */
}

footer p {
  margin: 0;
  color: #90a6b1;
  font-size: 14px;
}

/* Three columns of anything is a mess at 380px wide. */
@media (max-width: 640px) {
  .game {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}