/* peekafish.com — design tokens and components. Mobile-first, light only, no external requests. */
@font-face { font-family: 'Fredoka'; src: url(/fonts/Fredoka.ttf) format('truetype'); font-weight: 300 700; font-display: swap; }

:root {
  --orange: #FF7A1F; --orange-dark: #E2660F; --navy: #1E2E4A; --ink-soft: #4A5B78; --water: #2E9BE0; --water-deep: #1F7FC2;
  --sky: #EAF6FD; --sky-2: #D6ECFA; --sand: #FFF4E8; --sand-2: #F3D48A; --white: #fff; --line: rgba(30,46,74,.12); --gem: #FF4FA3;
  --bobber-red: #FF3B3B;
  --display: 'Fredoka', 'Avenir Next', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r-card: 28px; --r-chip: 16px; --r-pill: 999px;
  --sh-card: 0 10px 30px rgba(30,46,74,.12); --sh-card-hover: 0 16px 40px rgba(30,46,74,.16); --sh-phone: 0 24px 60px rgba(30,46,74,.28);
  --fast: 160ms; --base: 260ms; --slow: 420ms; --ease: cubic-bezier(.2,.8,.2,1);
  --wrap: 1120px; --pad: 20px; --sec: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
/* In-page anchors (TOC chips, the skip link) land under the sticky header without this. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (min-width: 768px) { html { scroll-padding-top: 96px; } }
body { margin: 0; font: 16px/1.6 var(--body); color: var(--navy); background: var(--white); overflow-x: hidden; }
@media (min-width: 375px) { body { font-size: 17px; } }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; color: inherit; }
h1 { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 3.75rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h3 { font-size: 1.3rem; font-weight: 500; }
p { margin: 0 0 1em; max-width: 62ch; }
ul, ol { padding-left: 1.2em; }
a { color: var(--water-deep); }
img, video, svg { max-width: 100%; height: auto; display: block; }
/* picture is transparent to layout so the img is the grid / flex child; its <source> tags must not become boxes of their own
   (they had taken the first cell of .meet-boop / .nf-inner and pushed Boop into the text column — 12 Oct 2026). */
picture { display: contents; }
picture > source { display: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.btn:focus-visible, .badge:focus-visible, .chip:focus-visible { outline-color: var(--navy); }
.small { font-size: .88rem; } .muted { color: var(--ink-soft); } .center { text-align: center; }
/* A centred paragraph (the section buttons) spans the whole section — the 62ch paragraph cap had centred them inside the first text column (12 Oct 2026). */
p.center { max-width: none; }
.measure { max-width: 62ch; }
.eyebrow { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; margin-bottom: .4em; }
.on-dark .eyebrow, .on-dark .muted, .on-dark .small { color: rgba(255,255,255,.85); }
/* …but inside a white card on a dark sea the small print stays ink (the Wonder cards' "Moon Tide days only" had been white on white — review 12 Oct 2026). */
.on-dark .card .small, .on-dark .card .muted, .on-dark .card .eyebrow, .on-dark .fish-card .small, .on-dark .fish-card .muted { color: var(--ink-soft); }
.lede { font-size: 1.2rem; line-height: 1.5; max-width: 48ch; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.narrow { max-width: 760px; }
.sec { padding-block: var(--sec); position: relative; }
.sec.sky { background: var(--sky); } .sec.sand { background: var(--sand); } .sec.lagoon { background: linear-gradient(180deg, #EAF6FD, #D6ECFA); }
.sec.night { background: linear-gradient(180deg, #3D5BA8, #12264F); color: #fff; }
.sec.dusk { background: linear-gradient(180deg, #FFC58A, #5A8FD8); }
.sec.night a { color: #B3E5FF; }
.sec.night .eyebrow { color: rgba(255,255,255,.8); }
.sec-head { margin-bottom: 28px; }
@media (min-width: 768px) { :root { --pad: 24px; --sec: 88px; } }

/* ── Skip link, header ─────────────────────────────────────────────────── */
.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-pill); z-index: 100; }
.skip:focus { left: 8px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.head-inner { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.brand { display: inline-flex; margin-right: auto; flex: 0 0 auto; }
.wordmark { width: 122px; min-width: 122px; height: auto; }
.nav-desktop { display: none; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-header nav a { font-family: var(--display); font-weight: 500; text-decoration: none; color: var(--navy); padding: 10px 12px; border-radius: var(--r-chip); display: block; min-height: 44px; line-height: 24px; }
.site-header nav a:hover { background: var(--sky); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-family: var(--display); font-weight: 500; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 44px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--sky); }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: 20px; box-shadow: var(--sh-card); padding: 8px; min-width: 200px; }
.menu nav ul { flex-direction: column; }
.langs { display: inline-flex; gap: 4px; }
.langs .lang { font-family: var(--display); font-weight: 500; text-decoration: none; color: var(--navy); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; }
.langs a.lang:hover { background: var(--sky); }
.langs .lang.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.lang-note { max-width: 52ch; }
/* The burger stays until 1024 px: the seven desktop items (547 px EN / 583 px DE) plus the language pills do not fit beside a readable wordmark on a tablet. */
@media (min-width: 768px) { .head-inner { min-height: 64px; } .wordmark { width: 168px; min-width: 168px; } }
@media (min-width: 1024px) { .menu { display: none; } .nav-desktop { display: block; } }

/* ── Buttons, badges, pills, chips ─────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 24px; border-radius: var(--r-pill); font-family: var(--display); font-weight: 500; font-size: 1.05rem; text-decoration: none; border: 1px solid transparent; transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.btn.primary { background: var(--orange); color: var(--navy); box-shadow: 0 4px 0 var(--orange-dark); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-dark); }
.btn.secondary { background: var(--navy); color: #fff; }
.btn.ghost { background: rgba(255,255,255,.7); color: var(--navy); border-color: var(--line); }
.btns .btn { margin: 4px; }   /* symmetric: a centred button row stays centred (the 404 page's pair sat 4 px left) */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 4px; }
.badge { display: inline-flex; flex-direction: column; justify-content: center; min-height: 56px; min-width: 168px; padding: 8px 18px 8px 52px; background: var(--navy); color: #fff; border-radius: 14px; text-decoration: none; position: relative; line-height: 1.15; }
.badge::before { content: ''; position: absolute; left: 16px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); background: #fff; border-radius: 50%; opacity: .92; }
.badge.ios::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1.2 4.2h1.8l3.4 6h-1.8zM8.2 13.2l3.4-6h1.8l-3.4 6zm-.9 1.6h9.4v1.5H7.3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1.2 4.2h1.8l3.4 6h-1.8zM8.2 13.2l3.4-6h1.8l-3.4 6zm-.9 1.6h9.4v1.5H7.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.badge.play::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5v17l9.5-8.5z'/%3E%3Cpath d='M14.5 12 19 9.5 19 14.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5v17l9.5-8.5z'/%3E%3Cpath d='M14.5 12 19 9.5 19 14.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Store icons on the download page's two store cards: the same vector marks as the badges (the Apple private-use glyph  renders as nothing outside Apple platforms — review 12 Oct 2026). */
.card .icon.store { width: 34px; height: 34px; background: var(--navy); margin-bottom: 14px; }
.card .icon.store.ios { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1.2 4.2h1.8l3.4 6h-1.8zM8.2 13.2l3.4-6h1.8l-3.4 6zm-.9 1.6h9.4v1.5H7.3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm-1.2 4.2h1.8l3.4 6h-1.8zM8.2 13.2l3.4-6h1.8l-3.4 6zm-.9 1.6h9.4v1.5H7.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.card .icon.store.play { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5v17l9.5-8.5z'/%3E%3Cpath d='M14.5 12 19 9.5 19 14.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5v17l9.5-8.5z'/%3E%3Cpath d='M14.5 12 19 9.5 19 14.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.badge-eyebrow { font-size: .75rem; opacity: .85; }
.badge-name { font-family: var(--display); font-weight: 500; font-size: 1.2rem; }
.badges.large .badge { min-height: 64px; min-width: 200px; }
.coming { font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin: 6px 0 12px; }
.trust { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; font-family: var(--display); font-weight: 500; font-size: .95rem; }
.pill { display: inline-block; background: var(--pill, var(--sky-2)); color: var(--navy); border-radius: var(--r-pill); padding: 3px 12px; font-family: var(--display); font-weight: 500; font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: var(--r-chip); font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--navy); text-decoration: none; }
button.chip { cursor: pointer; }
.chip.is-on { background: var(--navy); color: #fff; }
.chip .small { font-family: var(--body); font-weight: 400; }
.on-dark .chip { color: var(--navy); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 40px 0 0; background: linear-gradient(180deg, #8EE3FF 0%, #2F9FE8 100%); }
.hero.sea-pond-dawn { background: linear-gradient(180deg, #FFE3B0 0%, #8ED0F5 34%, #8EE3FF 35%, #2F9FE8 100%); }
.hero .wrap { position: relative; z-index: 2; }
.blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.blob.b1 { width: 46vw; height: 46vw; max-width: 520px; max-height: 520px; left: -10vw; top: -8vw; background: radial-gradient(circle, rgba(255,255,255,.4), rgba(255,255,255,0) 70%); }
.blob.b2 { width: 36vw; height: 36vw; max-width: 420px; max-height: 420px; right: -8vw; top: 10%; background: radial-gradient(circle, rgba(255,122,31,.28), rgba(255,122,31,0) 70%); }
.blob.b3 { width: 30vw; height: 30vw; max-width: 360px; max-height: 360px; left: 30%; bottom: 0; background: radial-gradient(circle, rgba(255,255,255,.3), rgba(255,255,255,0) 70%); }
.bobber { position: absolute; right: 8%; top: 24px; z-index: 1; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.hero-grid { display: grid; gap: 28px; align-items: center; }
.hero-copy h1 { margin-top: 0; }
/* Keep the h1 clear of the bobber on phones — the German "Kuckuck. Tipp. Fang!" is longer than the English line. */
@media (max-width: 767px) { .hero .hero-copy h1 { padding-right: 56px; } }
.fact .original { margin-top: 8px; }
.hero-phone { position: relative; justify-self: center; padding-top: 150px; }
/* Only the home hero has Boop peeking over the phone (.boop-figure); the page heroes carry him beside it, so no air above the phone there (review 12 Oct 2026: 180 px of empty gradient on phones). */
.page-hero .hero-phone { padding-top: 0; }
.hero-phone .phone { position: relative; z-index: 1; }
.boop-figure { position: absolute; top: 0; left: 50%; width: 200px; transform: translateX(-60%); z-index: 0; }
.boop-figure .boo { display: none; }
.hero-phone:hover .boop-figure .peek { display: none; }
.hero-phone:hover .boop-figure .boo { display: block; }
.hero .wave-hero { margin-top: 28px; }
.wave svg { display: block; width: 100%; height: 64px; }
.wave-hero svg path { fill: #fff; }
.sec.shots { padding-top: 16px; }
.page-hero { padding: 40px 0 48px; overflow: hidden; }
.page-hero.sea-pond { background: linear-gradient(180deg, #8EE3FF, #2F9FE8 80%, #4AD0F5); }
.page-hero.lagoon-hero { background: linear-gradient(180deg, #4FD1FF 0%, #0B4F8A 78%, #F3D48A 78%); color: #fff; }
.page-hero.lagoon-hero .lede, .page-hero.lagoon-hero h1 { color: #fff; }
.hero-boop { display: flex; flex-direction: column; align-items: center; gap: 12px; justify-self: center; }
.hero-boop .boop { width: 240px; }
.hero-boop .huge { width: 320px; }
.hero-boop-inline .boop { width: 140px; margin-top: 12px; }
.beside { width: 140px; position: absolute; right: -20px; bottom: -10px; }
.beside.small { width: 110px; }
@media (min-width: 768px) {
  .hero { padding-top: 64px; }
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 40px; }
  .hero-phone { justify-self: end; }
  .boop-figure { width: 230px; }
  .hero-phone { padding-top: 170px; }
  .page-hero { padding: 56px 0 64px; }
}

/* ── Phone frame + video ────────────────────────────────────────────────── */
.phone { width: min(280px, 78vw); aspect-ratio: 390 / 844; background: var(--navy); border-radius: 44px; padding: 10px; box-shadow: var(--sh-phone); margin: 0 auto; }
.phone .screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #0F6FBF; position: relative; }
.phone .screen > *, .phone .screen img, .phone .screen video { width: 100%; height: 100%; object-fit: cover; }
.clip { background: #0F6FBF; }
/* v8: a clip the copy references before the media agent recorded it (lib/html.mjs missingClips) — no poster yet, a sea gradient instead of a black box */
.clip-pending { background: linear-gradient(180deg, #2E9BE0 0%, #0F6FBF 55%, #083E78 100%); }
.cast-grid .card.feature .icon { font-size: 2.2rem; }
@media (min-width: 768px) { .phone { width: 300px; } .hero .phone { width: 320px; } }
/* Inside a grid card the frame follows the column (three columns at 768 px are 226 px wide). */
.card .phone { max-width: 100%; }

/* ── Cards, grids ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 20px; margin: 0 0 24px; }
.card { background: #fff; border-radius: var(--r-card); padding: 24px; box-shadow: var(--sh-card); transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-3px); }
.card h3, .card h2 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card .icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 12px; }
.card .more { font-family: var(--display); font-weight: 500; text-decoration: none; display: inline-block; padding: 8px 0; margin: -4px 0; min-height: 44px; line-height: 28px; }
.card.kind .phone, .card.step .phone { margin-bottom: 16px; width: min(240px, 70vw); }
/* The four "how to play" step cards: the screenshot sits in a phone frame under the text, centred (it had been a 100-px thumbnail hugging the left edge — review 12 Oct 2026). */
.card.step .phone { margin: 16px auto 0; width: min(220px, 60vw); }
.step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: var(--navy); font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 12px; }
.step-shot { border-radius: 18px; margin-top: 12px; max-height: 220px; width: auto; object-fit: cover; object-position: top; }
.sec.night .card { background: rgba(255,255,255,.08); color: #fff; }
.on-dark .card { color: var(--navy); }
/* Feature block = one phone clip beside its copy. The copy column carries the block's own heading / lede / button
   (lib/pages-main.mjs videoBlock), so the text fills the phone's height instead of floating beside it; the block keeps
   clear air to the grid or paragraph that follows (12 Oct 2026 — the phone had touched the cards under it). */
.feature-block { display: grid; gap: 36px; align-items: center; margin: 0 0 40px; }
.feature-block:last-child { margin-bottom: 0; }
.grid + .feature-block { margin-top: 32px; }   /* the flipped phone would otherwise sit in the empty cells of the grid's last row */
.measure + .feature-block, .sec-head + .feature-block { margin-top: 8px; }
.feature-copy h2 { margin-top: 0; }
.feature-copy .eyebrow { margin-bottom: .4em; }
.feature-copy .lede { margin-bottom: .9em; }
.feature-copy .btn { margin-top: 4px; }
@media (min-width: 768px) {
  /* minmax(0, 1fr): a column never grows past its share for a fixed-width child (the phone frames in the play page's cards had pushed three columns to 928 px at 768). */
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; margin-bottom: 56px; }
  .grid + .feature-block { margin-top: 48px; }
  .feature-block .phone { width: 280px; }
  .feature-block.flip .phone { order: 2; }
}
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Shot cards (tilted) */
.shot-rail { grid-template-columns: repeat(3, 78vw); overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 4px 20px; -webkit-overflow-scrolling: touch; }
.shot-card { margin: 0; scroll-snap-align: center; background: #fff; border-radius: var(--r-card); padding: 14px 14px 18px; box-shadow: var(--sh-card); text-align: center; }
.shot-card .shot { border-radius: 20px; }
.shot-card figcaption { font-family: var(--display); font-weight: 500; font-size: 1.05rem; margin-top: 12px; }
.tilt-0 { transform: rotate(-2deg); } .tilt-1 { transform: rotate(1.5deg); } .tilt-2 { transform: rotate(-1.5deg); }
@media (min-width: 768px) { .shot-rail { grid-template-columns: repeat(3, 1fr); overflow: visible; } }

/* Sea rail + sea cards */
.sea-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78vw; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 20px; margin-bottom: 16px; }
.sea-card { scroll-snap-align: center; position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 240px; padding: 24px 22px 110px; border-radius: var(--r-card); color: var(--navy); text-decoration: none; box-shadow: var(--sh-card); overflow: hidden; transition: transform var(--base) var(--ease); }
.sea-card:hover { transform: translateY(-3px); }
.sea-card b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.sea-card .sea-emoji { font-size: 2rem; }
.sea-card .sea-blurb { margin: 6px 0; }
.sea-card.on-dark { color: #fff; }
.sea-card.on-dark .small { color: rgba(255,255,255,.9); }
.sea-card-boop { position: absolute; right: -6px; bottom: -10px; width: 110px; }
@media (min-width: 768px) { .sea-rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; } }
@media (min-width: 1280px) { .sea-rail { grid-template-columns: repeat(6, 1fr); } .sea-card { min-height: 300px; padding: 20px 16px 104px; } .sea-card-boop { width: 100px; } }

/* Sea banners (fish + levels index) */
.sea-sec { padding-top: 0; }
.sea-banner { padding: 32px 0; margin-bottom: 28px; color: var(--navy); }
.on-dark .sea-banner { color: #fff; }
.sea-banner-inner { display: flex; gap: 20px; align-items: center; }
.sea-boop { width: 110px; flex: none; }
/* Phones: the banner stacks (mascot above the text) instead of squeezing the sea's paragraph into a 220-px column (review 12 Oct 2026). */
@media (max-width: 479px) { .sea-banner-inner { flex-direction: column; align-items: flex-start; gap: 8px; } .sea-boop { width: 84px; } }
.sea-banner h2 { margin: 0 0 .3em; }
.facts-row { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sea-list[data-sea]:not([data-sea="all"]) .sea-sec { display: none; }
.sea-list[data-sea="pond"] .sea-sec[data-sea="pond"], .sea-list[data-sea="lake"] .sea-sec[data-sea="lake"], .sea-list[data-sea="bay"] .sea-sec[data-sea="bay"], .sea-list[data-sea="ice"] .sea-sec[data-sea="ice"], .sea-list[data-sea="deep"] .sea-sec[data-sea="deep"], .sea-list[data-sea="space"] .sea-sec[data-sea="space"] { display: block; }
.filter-sec { padding-bottom: 24px; }

/* Fish cards */
.fish-grid { gap: 16px; }
.fish-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 16px; background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-card); text-decoration: none; color: var(--navy); text-align: center; transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.fish-card:hover { transform: translateY(-3px); box-shadow: var(--sh-card-hover); }
.fish-card .fish-sprite { width: 100%; max-width: 200px; transition: transform var(--slow) var(--ease); background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c1) 22%, transparent), transparent 70%); border-radius: 50%; }
.fish-card:hover .fish-sprite { transform: translateX(6px); }
.fish-name { font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.fish-card.mini { padding: 12px 8px; }
.fish-card.mini .fish-sprite { max-width: 140px; }
/* The Wonder rim is an inset shadow, not an outline, so the orange :focus-visible ring stays visible on these cards. */
.fish-card.wonder { box-shadow: inset 0 0 0 2px #B3E5FF, var(--sh-card), 0 0 0 6px rgba(179,229,255,.35); }
.rarity-legend { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.grid-4.fish-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .grid-4.fish-grid { grid-template-columns: repeat(4, 1fr); } }

/* Species hero */
.species-hero { padding: 24px 0 48px; }
.species-hero.on-dark, .species-hero.on-dark a { color: #fff; }
.species-hero .chips { margin-top: 8px; }
.sprite-stage { position: relative; justify-self: center; width: min(420px, 90vw); aspect-ratio: 2 / 1; display: grid; place-items: center; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--c1) 45%, #fff) 0%, color-mix(in srgb, var(--c2) 30%, transparent) 55%, transparent 75%); border-radius: 50%; }
.sprite-stage .fish-sprite { position: absolute; width: 88%; transition: opacity var(--base) var(--ease); }
.sprite-stage .open { opacity: 0; }
.sprite-stage:hover .open { opacity: 1; } .sprite-stage:hover .closed { opacity: 0; }
.shimmer { position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 0 4px rgba(179,229,255,.7), 0 0 40px 10px rgba(179,229,255,.5); pointer-events: none; }
@media (min-width: 768px) { .species-hero .hero-grid { grid-template-columns: 5fr 7fr; } }

/* Boop says / bubbles / facts */
.says { display: flex; gap: 14px; align-items: flex-start; margin: 12px 0; }
.says-boop { width: 84px; flex: none; }
/* Phones: a smaller Boop beside the text so the column keeps ~270 px (review 12 Oct 2026). */
@media (max-width: 479px) { .says { gap: 10px; } .says-boop { width: 60px; } .says.card-line { flex-direction: column; gap: 6px; } .says.card-line .says-boop { width: 76px; } }
.card-line { margin: 0 auto 28px; max-width: 880px; }   /* a text-only section (Splash Royale, Visiting) sits centred instead of hugging the left half of a wide container */
.center-says { justify-content: center; max-width: 720px; margin: 0 auto 20px; }
.fact { margin: 0; background: #fff; color: var(--navy); border-radius: 22px 22px 22px 6px; padding: 14px 18px; box-shadow: var(--sh-card); position: relative; }
.fact p { margin: 0; }
.fact-who { display: block; font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--ink-soft); margin-bottom: 4px; }
.bubble { display: inline-block; background: #fff; color: var(--navy); border-radius: 22px 22px 22px 6px; padding: 10px 18px; font-family: var(--display); font-weight: 500; font-size: 1.15rem; box-shadow: var(--sh-card); margin: 0 0 12px; }
.bubble.big { font-size: 1.6rem; }
.meet-boop { display: grid; gap: 24px; align-items: center; }
.meet-figure { width: min(320px, 70vw); justify-self: center; }
.ticks { list-style: none; padding: 0; }
.ticks li { padding-left: 1.8em; position: relative; margin-bottom: .5em; max-width: 62ch; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--water-deep); font-weight: 700; }
.ticks.promise li::before { content: '🐟'; }
@media (min-width: 768px) { .meet-boop { grid-template-columns: 4fr 8fr; } }

/* Level chips + level pages */
.level-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.level-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 64px; padding: 6px; background: #fff; color: var(--navy); border-radius: var(--r-chip); box-shadow: var(--sh-card); text-decoration: none; transition: transform var(--base) var(--ease); border-top: 5px solid var(--sky-2); }
.level-chip:hover { transform: translateY(-3px); }
.level-chip b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1; }
.level-chip span { font-size: .95rem; margin-top: 4px; }
.level-chip.kind-dash { border-top-color: #FFD23F; } .level-chip.kind-boss { border-top-color: var(--orange); } .level-chip.tricky { border-top-color: #B36BFF; }
@media (min-width: 768px) { .level-row { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1280px) { .level-row { grid-template-columns: repeat(12, 1fr); } }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; }
.legend li { padding-left: 1.8em; }                                  /* hanging indent: a wrapped legend line continues under the text, not under the icon */
.legend li span { display: inline-block; width: 1.8em; margin-left: -1.8em; }
.level-hero { padding: 20px 0 44px; }
.level-hero.on-dark, .level-hero.on-dark a { color: #fff; }
.level-hero .chips { margin-top: 12px; }
.facts, .tips { padding-left: 1.2em; }
.facts { list-style: none; padding: 0; }
.facts li, .tips li { margin-bottom: .6em; }
.crumbs ol { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .9rem; }
.crumbs li + li::before { content: '/'; margin-right: 6px; opacity: .6; }
.crumbs a { color: inherit; }
.pager { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 768px) { .pager { grid-template-columns: 1fr auto 1fr; align-items: center; } .pager > :first-child { justify-self: start; } .pager > :last-child { justify-self: end; } }   /* a grid item stretches by default: the "← Level 18" pill had filled its whole column (review 12 Oct 2026) */

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 20px; margin-bottom: 10px; max-width: 800px; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 500; font-size: 1.1rem; padding: 14px 0; list-style: none; position: relative; padding-right: 32px; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--water-deep); }
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 0 14px; }
.faq details p { max-width: 70ch; }

/* CTA band */
.cta { background: linear-gradient(180deg, #8EE3FF, #2F9FE8); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.cta-boop { width: 160px; flex: none; }
.cta h2 { margin-top: 0; }

/* Footer */
.site-footer { background: var(--navy); color: #fff; margin-top: 0; }
.site-footer a { color: #fff; }
.wave-footer { background: #fff; } .wave-footer svg path { fill: var(--navy); }
.sec.sky + .site-footer .wave-footer, .faq-sec.sky + .site-footer .wave-footer { background: var(--sky); }
.foot-grid { display: grid; gap: 28px; padding-top: 24px; padding-bottom: 24px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 2px; }
.foot-grid li a { display: inline-block; padding: 8px 0; min-height: 44px; line-height: 28px; }
.foot-h { font-size: 1.05rem; font-weight: 500; margin-bottom: 10px; }
.foot-brand .wordmark { width: 150px; }
.foot-brand .badges { transform: scale(.9); transform-origin: left top; }
.foot-brand .coming { font-size: .95rem; }
.foot-boop { margin-top: 20px; }
.foot-boop .boop { width: 110px; animation: bob 2.4s ease-in-out infinite; }
.foot-small { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); font-size: .85rem; color: rgba(255,255,255,.8); }
.foot-small p { max-width: none; margin-bottom: 4px; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
/* Back to top: a 48-px circle (the text pill had covered CTAs and footer lines); main.js hides it while the footer is in view. */
.totop { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; text-decoration: none; border-radius: 50%; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1; box-shadow: var(--sh-card); border: 2px solid rgba(255,255,255,.7); }
.totop[hidden] { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Docs (privacy, support, impressum) */
.doc-hero { background: linear-gradient(180deg, var(--sky), #fff); padding-bottom: 24px; }
.doc-head { display: flex; gap: 20px; align-items: center; }
.doc-head > div { min-width: 0; }
/* Long German compounds ("Datenschutzerklärung") must wrap inside the 375-px column. */
.doc-head h1, .doc h2, .toc a { hyphens: auto; overflow-wrap: anywhere; }
.doc-boop { width: 110px; flex: none; }
@media (max-width: 479px) { .doc-head { gap: 14px; } .doc-boop { width: 84px; } }
.doc h2 { font-size: 1.5rem; margin-top: 1.6em; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 24px; }
.doc .toc a { font-size: .9rem; background: var(--sky); border-radius: var(--r-pill); padding: 6px 12px; text-decoration: none; color: var(--navy); }
.doc address { font-style: normal; background: var(--sand); border-radius: 18px; padding: 14px 18px; display: inline-block; }
.doc .notice { background: var(--sky); border-radius: 18px; padding: 4px 18px; }
.doc ul { max-width: 70ch; }
.meta { color: var(--ink-soft); }

/* Tables, closet, faces, scenes, tale, name picker */
.table-wrap { overflow-x: auto; }
.compare { border-collapse: collapse; width: 100%; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--sh-card); min-width: 520px; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font-family: var(--display); font-weight: 600; background: var(--sky); font-size: 1.1rem; }
/* Phones: the two columns stack into labelled rows (data-col from the generator) instead of a sideways scroll. */
@media (max-width: 767px) {
  .compare { min-width: 0; }
  .compare, .compare tbody, .compare tr, .compare td { display: block; }
  .compare thead { display: none; }
  .compare tr { border-bottom: 4px solid var(--sky); }
  .compare tr:last-child { border-bottom: 0; }
  .compare td { border-bottom: 0; padding: 10px 18px; }
  .compare td + td { padding-top: 0; }
  .compare td::before { content: attr(data-col); display: block; font-family: var(--display); font-weight: 600; font-size: .85rem; color: var(--ink-soft); margin-bottom: 2px; }
}
.closet figure, .faces figure { margin: 0; text-align: center; }
.closet .boop, .faces .boop { width: 100%; max-width: 180px; margin: 0 auto; }
.faces figcaption, .closet figcaption { font-family: var(--display); font-weight: 500; margin-top: 6px; }
.big-chips .chip { font-size: 1.05rem; }
.scenes .scene-swatch { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 10px 14px; box-shadow: var(--sh-card); font-family: var(--display); font-weight: 500; }
.scene-swatch .swatch { width: 64px; height: 64px; border-radius: 16px; flex: none; background: linear-gradient(180deg, var(--top) 0%, var(--bot) 72%, var(--sand) 72%); }
.tale-cover { background: linear-gradient(180deg, #3D5BA8, #12264F); border-radius: var(--r-card); padding: 32px 24px 24px; text-align: center; color: #fff; box-shadow: var(--sh-card); }
.tale-boop { width: min(260px, 60vw); margin: 0 auto 12px; }
.tale-title { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.chapters li { margin-bottom: .3em; }
.dl-badges { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.dl-badges .boop { width: 100px; }
.nf-inner { display: grid; gap: 24px; align-items: center; text-align: center; }
.nf .boop { width: min(300px, 70vw); margin: 0 auto; }
@media (min-width: 768px) { .nf-inner { grid-template-columns: 1fr 1fr; text-align: left; } }

/* Motion */
.boop:hover { animation: wiggle 600ms var(--ease) 1; }
@keyframes wiggle { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .fish-card:hover, .level-chip:hover, .sea-card:hover { transform: none; }
  .fish-card:hover .fish-sprite { transform: none; }
}