:root {
  --sea-deep: #0d1b2a;
  --sea: #10243a;
  --sea-2: #16486a;
  --foam: #eef6fa;
  --mist: #9fc3d6;
  --sand: #f3e3b3;
  --coral: #ef476f;
  --kelp: #06d6a0;
  --paper: #f5f8f9;
  --paper-2: #e6eef1;
  --rule: #cfdbe0;
  --ink: #132029;
  --ink-soft: #4e5f68;
  --focus: #2f7df6;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b151d;
    --paper-2: #13222d;
    --rule: #26404f;
    --ink: #e6eff3;
    --ink-soft: #9db2bd;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.brand img { width: 32px; height: 32px; image-rendering: pixelated; border-radius: 6px; }
.top nav { display: flex; gap: 18px; font-size: 15px; flex-wrap: wrap; }

.hero {
  /* Night sky over the whole text area; the sea is a strip along the bottom
     so the waterline never cuts through the text or buttons. */
  background: linear-gradient(180deg, #0c1c2d 0%, var(--sea) 55%, #15344f 100%);
  color: var(--foam);
  border-radius: var(--radius);
  padding: 44px 40px 108px;
  position: relative;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 72px;
  /* Pixel waves (16 x 4 tile drawn at 4x), then deep water with foam dashes. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='6' height='1' fill='%236fa3c0'/%3E%3Crect x='3' y='1' width='10' height='1' fill='%2316486a'/%3E%3Crect x='3' y='1' width='2' height='1' fill='%236fa3c0'/%3E%3Crect x='1' y='2' width='14' height='1' fill='%2316486a'/%3E%3Crect x='0' y='3' width='16' height='1' fill='%2316486a'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 16px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' shape-rendering='crispEdges'%3E%3Crect x='4' y='3' width='5' height='1' fill='%232a6a8f'/%3E%3Crect x='24' y='10' width='4' height='1' fill='%232a6a8f'/%3E%3C/svg%3E") repeat 0 16px / 160px 56px,
    linear-gradient(transparent 16px, #16486a 16px, #12405f 100%);
  image-rendering: pixelated;
}
.hero .bobber {
  position: absolute; z-index: 1;
  right: 12%; bottom: 46px;
  width: 32px; height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='2' height='3' fill='%23f3e3b3'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%23ef476f'/%3E%3Crect x='1' y='4' width='6' height='3' fill='%23ef476f'/%3E%3Crect x='1' y='7' width='6' height='2' fill='%23eef6fa'/%3E%3Crect x='2' y='9' width='4' height='1' fill='%23eef6fa'/%3E%3Crect x='0' y='11' width='8' height='1' fill='%23a9d3e8'/%3E%3C/svg%3E") no-repeat center / 32px 48px;
  image-rendering: pixelated;
  animation: bob 2.4s steps(4, end) infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hero .bobber { animation: none; } }
@media (max-width: 640px) {
  .hero { padding: 32px 22px 100px; }
  .hero .bobber { right: 22px; }
}
.badge {
  display: inline-block; font-size: 14px; font-weight: 700;
  background: rgba(239, 71, 111, .18); color: #ffc2d1;
  border: 1px solid rgba(239, 71, 111, .6); border-radius: 999px; padding: 3px 12px;
}
.hero h1 { font-size: clamp(36px, 6vw, 64px); line-height: 1.04; margin: 16px 0 12px; font-weight: 800; color: var(--sand); }
.hero p.lead { max-width: 40rem; color: #c9dbe4; font-size: 18px; margin: 0 0 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  font: inherit; font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sand); color: #10202b;
  padding: 12px 20px; border-radius: 10px; text-decoration: none; border: 0; cursor: pointer;
}
.btn:hover { background: #fff3cf; }
.btn.ghost { background: transparent; color: var(--foam); box-shadow: inset 0 0 0 1.5px rgba(238, 246, 250, .5); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--foam); }

.touch-note {
  margin-top: 26px; display: flex; gap: 12px; align-items: flex-start;
  background: rgba(13, 27, 42, .55); border: 1px solid rgba(159, 195, 214, .35);
  border-radius: 12px; padding: 14px 16px; max-width: 40rem; font-size: 15px;
}
.touch-note strong { color: var(--sand); }

section { padding: 64px 0 4px; }
h2 { font-size: 30px; line-height: 1.15; margin: 0 0 14px; font-weight: 800; }
h3 { font-size: 18px; margin: 0 0 6px; }
.lede { max-width: 44rem; color: var(--ink-soft); margin: 0 0 24px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
code { font-size: .9em; background: var(--paper-2); padding: 1px 6px; border-radius: 5px; }
ul.plain { padding-left: 20px; }
ul.plain li { margin: 4px 0; }

.support {
  margin: 64px 0 0; padding: 26px 28px; border-radius: 14px;
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 6px solid var(--coral);
}
.support p { margin: 0 0 14px; }
.support .btn { background: var(--sea); color: var(--foam); }
.support .btn:hover { background: var(--sea-2); }

footer { margin: 56px 0 0; padding: 26px 0 40px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 14px; }
footer p { margin: 4px 0; }

/* Play page */
.play-page { background: var(--sea-deep); color: var(--foam); min-height: 100vh; margin: 0; }
.play-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 14px; flex-wrap: wrap; }
.play-bar a { color: var(--mist); }
.stage { display: flex; justify-content: center; padding: 0 0 12px; }
.stage iframe {
  border: 0; display: block; background: var(--sea);
  height: calc(100vh - 92px); height: calc(100dvh - 92px);
  aspect-ratio: 9 / 18; max-width: 100vw;
  border-radius: 10px;
}
.play-help { max-width: 640px; margin: 0 auto; padding: 0 16px 24px; font-size: 14px; color: #c9dbe4; }
@media (max-width: 700px) and (pointer: coarse) {
  .stage iframe { aspect-ratio: auto; width: 100vw; border-radius: 0; }
}