/* Island Kids — its own small design system. Warm paper, bright stickers, one rounded face (Nunito, self-hosted), big round
   shapes, springy motion that switches off for anyone who asks. Light and dark follow the device. */
@font-face { font-family: "Nunito"; src: url("/kids/fonts/nunito-var.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ground and ink */
  --paper: #fff7e8; --paper-2: #fdeed0; --card: #ffffff; --ink: #1b2a41; --ink-2: #41546a; --line: #e6d6b0;
  /* accents (the *-soft ones are tile grounds; text on them is always --ink) */
  --sea: #0e7c8c; --sea-ink: #ffffff; --sea-soft: #d3eef3;
  --coral: #c9402b; --coral-soft: #fbd8ce;
  --marsh: #2f7348; --marsh-soft: #d6ebd9;
  --plum: #6e4a9e; --plum-soft: #e6daf4;
  --sun: #ffc83d; --sun-soft: #ffefb8;
  --good: #1f7a45; --good-soft: #d7f0df; --warn: #8f5400; --warn-soft: #ffe9c2;
  --focus: #1456d9;
  --hero-sky-a: #a5dcec; --hero-sky-b: #e8f6f8;
  --shadow: 0 2px 0 rgba(27, 42, 65, .08), 0 12px 24px -14px rgba(27, 42, 65, .32);
  /* space, shape, type */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-s: 14px; --r-m: 22px; --r-l: 30px;
  --fs-s: 1rem; --fs-0: 1.125rem; --fs-1: 1.3rem; --fs-2: 1.7rem; --fs-3: clamp(2rem, 6.4vw, 3.1rem);
  --tab-h: 68px; --top-h: 64px; --rail-w: 116px;
  /* motion: --settle = a critically damped spring (no overshoot) for every ordinary change; --spring (bounce) only for
     celebrations and throws (apple-design) */
  --settle: cubic-bezier(.2, .9, .3, 1); --settle-t: .45s;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --settle: linear(0, .075 5%, .227 10%, .39 15%, .536 20%, .656 25%, .75 30%, .821 35%, .873 40%, .911 45%, .938 50%, .957 55%, .971 60%, .98 65%, .986 70%, .991 75%, .994 80%, .996 85%, .997 90%, .998 95%, 1); }
  :root { --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.083 25.1%, 1.077 28.1%, 1.038 34.3%, 1.01 40.4%, .998 46.9%, 1 59.1%, 1); }
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1d2e; --paper-2: #15283d; --card: #183049; --ink: #fff3da; --ink-2: #bccddc; --line: #2c4964;
    --sea: #5ccbdb; --sea-ink: #0f1d2e; --sea-soft: #16445a;
    --coral: #ff9a85; --coral-soft: #4b2b2d;
    --marsh: #86d89f; --marsh-soft: #1b3d2c;
    --plum: #c9aff3; --plum-soft: #36285c;
    --sun: #ffc83d; --sun-soft: #4a3c14;
    --good: #86e3a9; --good-soft: #14402a; --warn: #ffc36b; --warn-soft: #46330f;
    --focus: #90b9ff;
    --hero-sky-a: #17324c; --hero-sky-b: #25506b;
    --shadow: 0 2px 0 rgba(0, 0, 0, .4), 0 12px 24px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); scroll-padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 600 var(--fs-0) / 1.5 var(--font);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-y: none;
}
body.has-modal { overflow: hidden; }
h1, h2, h3 { font-weight: 900; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
h1 { letter-spacing: -.022em; line-height: 1.04; }
h1 { font-size: var(--fs-3); }
h2 { font-size: var(--fs-1); }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 400; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 12px; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

/* art */
.stk { display: block; width: 100%; height: auto; }
.stk-wrap { display: block; }
.gl { width: 1.35em; height: 1.35em; display: block; }
.ico { display: inline-grid; place-items: center; flex: none; }
.stk-wrap.big { width: min(150px, 40vw); margin: 0 auto; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .1)); }
@media (min-width: 744px) and (min-height: 700px) { .stk-wrap.big { width: 200px; } }
.stk-wrap.ghost { filter: grayscale(1) opacity(.5) drop-shadow(0 8px 0 rgba(0, 0, 0, .06)); }
.stk-wrap.pop { animation: pop .7s var(--spring); }
@keyframes pop { 0% { transform: scale(.6) rotate(-8deg); } 100% { transform: none; } }

/* shell */
.app { min-height: 100dvh; padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
.top {
  position: sticky; top: 0; z-index: 20; min-height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--paper) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; }
.mark svg { width: 38px; height: 38px; display: block; }
.brand-t { font-weight: 900; font-size: 1.2rem; letter-spacing: -.015em; }
@media (min-width: 560px) { .brand-t { font-size: 1.35rem; } }
.snd { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--ink); padding: 0; }
.snd[aria-pressed="true"] { color: var(--ink-2); border-style: dashed; }
.top-r { display: flex; align-items: center; gap: var(--sp-2); }
.stat { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border-radius: 999px; background: var(--sun); color: #1b2a41; font-weight: 900; }
.stat .gl { fill: #1b2a41; stroke: #1b2a41; width: 1.2em; height: 1.2em; }
.gu-door, .gu-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink); font-weight: 800; font-size: .95rem;
}
.gu-door span:last-child { display: none; }
.gu-chip { background: var(--warn-soft); border-color: var(--warn); }
.gu-time { font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .gu-door span:last-child { display: inline; } }
/* on a phone the lock chip is the lock and the minutes left (its label says the rest), so the bar never pushes the page sideways */
@media (max-width: 559px) { .gu-chip > span:nth-child(2) { display: none; } }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@media (prefers-reduced-transparency: reduce) { .tabs, .top { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.tab { min-height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--ink-2); font-weight: 800; font-size: .86rem; }
.tab .gl { width: 28px; height: 28px; }
.tab .ico { padding: 3px 16px; border-radius: 16px; transition: background .3s var(--ease), transform .45s var(--settle); }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .ico { background: var(--sun); color: #1b2a41; transform: translateY(-2px); }
.tab-l { display: none; }

.view { outline: none; padding: var(--sp-4) max(16px, env(safe-area-inset-right)) var(--sp-6) max(16px, env(safe-area-inset-left)); max-width: 780px; margin: 0 auto; }
.view h1:focus, .view h2:focus { outline: none; }

/* iPad and big screens, and phones on their side: the tabs become a rail, lists get a second pane */
@media (min-width: 744px), (orientation: landscape) and (max-height: 540px) {
  .app { padding-bottom: 0; }
  .tabs {
    top: var(--top-h); bottom: 0; right: auto; width: var(--rail-w); grid-template-columns: 1fr; align-content: start; gap: 4px;
    border-top: 0; border-right: 2px solid var(--line); padding: var(--sp-3) 0 var(--sp-3) env(safe-area-inset-left);
  }
  .tab { min-height: 84px; font-size: .9rem; text-align: center; padding: 0 4px; }
  .view { margin-left: calc(var(--rail-w) + env(safe-area-inset-left)); max-width: none; padding: var(--sp-5); }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 899px) {
  :root { --rail-w: 84px; --top-h: 56px; }
  .tab { min-height: 64px; }
  .tab-s { font-size: .8rem; }
}
@media (min-width: 744px) {
  :root { --rail-w: 96px; }
  html { scroll-padding: 0; }
  .view, .pane-list, .pane-detail { scroll-padding: 16px; }
  .view { padding: 0; height: calc(100dvh - var(--top-h)); overflow: auto; margin-left: var(--rail-w); }
  .home, .games-hub, .game, .gu, .oops, .loading { max-width: 900px; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-7); }
  .top { padding-left: var(--sp-5); padding-right: var(--sp-5); }
}
@media (min-width: 900px) {
  :root { --rail-w: 116px; }
  .tab-s { display: none; }
  .tab-l { display: block; line-height: 1.15; }
}

/* buttons, pills, chips */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 999px;
  border: 2.5px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 800; font-size: 1.05rem; line-height: 1.2; text-decoration: none; text-align: center;
  transition: transform .4s var(--settle), background .2s, box-shadow .2s; box-shadow: 0 4px 0 var(--ink);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); transition-duration: 80ms; }
.btn.primary { background: var(--sea); color: var(--sea-ink); border-color: var(--sea); box-shadow: 0 4px 0 color-mix(in srgb, var(--sea) 55%, #000); }
.btn.big { min-height: 62px; font-size: 1.2rem; padding: 0 30px; }
.btn.small, .btn.tiny { min-height: 48px; font-size: .98rem; padding: 0 18px; }
.btn.quiet { border-color: var(--line); box-shadow: none; background: transparent; }
.btn.warn { background: var(--warn-soft); border-color: var(--warn); }
.btn.went[aria-pressed="true"] { background: var(--good-soft); border-color: var(--good); box-shadow: 0 4px 0 var(--good); }
.btn.went:not([aria-pressed="true"]) .gl { opacity: .45; }
.btn.out { box-shadow: 0 3px 0 var(--ink); }
.pill {
  min-height: 48px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, transform .35s var(--settle);
}
.pill:active { transform: scale(.95); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.big { min-height: 60px; font-size: 1.15rem; padding: 0 22px; }
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg.big { justify-content: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 10px; min-height: 30px; border-radius: 999px; background: var(--paper-2); border: 1.5px solid var(--line); font-weight: 800; font-size: .92rem; color: var(--ink); }
.chip .gl { width: 1em; height: 1em; }
.chip.age { background: var(--sun-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fine { font-size: .98rem; color: var(--ink-2); font-weight: 600; }
.note { color: var(--ink-2); margin-top: var(--sp-3); }
.big-p { font-size: var(--fs-1); line-height: 1.4; font-weight: 700; }

/* loading and oops */
.loading, .oops { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); text-align: center; }
.loading .stk-wrap, .oops .stk-wrap { width: 96px; }
.loading .stk-wrap { animation: bob 1.4s var(--ease) infinite alternate; }
@keyframes bob { to { transform: translateY(-8px) rotate(6deg); } }

/* home */
.home { display: grid; gap: var(--sp-4); }
.hero { position: relative; border-radius: var(--r-l); overflow: hidden; min-height: 210px; box-shadow: var(--shadow); isolation: isolate; }
.hero-pic { position: absolute; inset: 0; z-index: -1; }
.hero-pic svg { width: 100%; height: 100%; display: block; }
.hero-t { padding: var(--sp-5) var(--sp-5) 0; max-width: 15em; }
.hero-t h1 { font-size: clamp(2rem, 8.4vw, 2.8rem); }
.hero-t p { font-size: 1.15rem; font-weight: 800; margin-top: var(--sp-2); max-width: 11em; }
.today { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .today { grid-template-columns: 1.4fr 1fr; } }
.today-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-m); background: var(--card); border: 2px solid var(--line); text-decoration: none; color: var(--ink); min-height: 84px; }
.today-card .stk-wrap { width: 56px; flex: none; }
.today-t { display: grid; gap: 2px; min-width: 0; }
.today-t span { color: var(--ink-2); font-size: 1rem; }
.today-card .go .gl { transform: rotate(180deg); }
.today-card .go { margin-left: auto; }
.tide-card.is-good, .tide-live.is-good { background: var(--good-soft); border-color: var(--good); }
.tide-card.is-almost, .tide-live.is-almost { background: var(--warn-soft); border-color: var(--warn); }
.tide-card.is-wait, .tide-live.is-wait { background: var(--sea-soft); border-color: var(--sea); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.tile { position: relative; display: grid; align-content: start; gap: 4px; padding: var(--sp-4); min-height: 190px; border-radius: var(--r-l); text-decoration: none; color: var(--ink); background: var(--tile-bg, var(--card)); box-shadow: var(--shadow); overflow: hidden; transition: transform .45s var(--settle); }
.tile:active { transform: scale(.96); }
.tile-art { width: 84px; margin-bottom: var(--sp-2); transition: transform .5s var(--settle); }
.tile:hover .tile-art { transform: rotate(-6deg) scale(1.06); }
.tile h2 { font-size: 1.32rem; }
.tile p { color: var(--ink-2); font-size: 1rem; line-height: 1.3; }
.t-do { --tile-bg: var(--coral-soft); } .t-spot { --tile-bg: var(--marsh-soft); } .t-play { --tile-bg: var(--plum-soft); } .t-safe { --tile-bg: var(--sea-soft); } .t-game { --tile-bg: var(--sun-soft); }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

/* two-pane lists */
.panes { display: block; }
.pane-head { margin-bottom: var(--sp-4); }
.lede { color: var(--ink-2); font-size: var(--fs-1); margin-top: var(--sp-2); font-weight: 700; }
.panes:not(.has-detail) .pane-empty { display: none; }
.panes.has-detail .pane-list { display: none; }
@media (min-width: 744px) {
  .panes { display: grid; grid-template-columns: minmax(310px, 400px) 1fr; height: 100%; }
  .panes .pane-list, .panes .pane-detail { height: 100%; overflow: auto; padding: var(--sp-5); }
  .panes .pane-list { border-right: 2px solid var(--line); }
  .panes:not(.has-detail) .pane-empty, .panes.has-detail .pane-list { display: block; }
  .pane-empty { display: grid !important; place-content: center; justify-items: center; text-align: center; gap: var(--sp-4); color: var(--ink-2); }
  .pane-empty .stk-wrap { width: 160px; opacity: .9; }
  .back { display: none !important; }
  .pane-detail > :not(.back) { max-width: 640px; margin-left: auto; margin-right: auto; }
}
.filters { display: grid; gap: 4px; margin-bottom: var(--sp-4); }
.filters .seg { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)); padding: 2px var(--sp-4) 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.filters .seg::-webkit-scrollbar { display: none; }
@media (min-width: 744px) { .filters .seg { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.filters .pill { flex: none; scroll-snap-align: start; }
.f-h { font-size: .98rem; color: var(--ink-2); font-weight: 800; margin-top: var(--sp-1); }
.count { color: var(--ink-2); font-weight: 800; margin-bottom: var(--sp-2); }
.rows { display: grid; gap: var(--sp-3); }
.card-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; min-height: 92px; border-radius: var(--r-m); background: var(--card); border: 2px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .4s var(--settle), border-color .2s; }
.card-row:active { transform: scale(.98); }
.card-row.on { border-color: var(--sea); box-shadow: 0 0 0 4px var(--sea-soft); }
.row-art { position: relative; width: 72px; flex: none; }
.row-t { display: grid; gap: 4px; min-width: 0; flex: 1; }
.row-t strong { font-size: 1.12rem; line-height: 1.2; font-weight: 800; }
.row-sub { color: var(--ink-2); font-size: .98rem; line-height: 1.25; }
.card-row > .go { flex: none; color: var(--ink-2); } .card-row > .go .gl { transform: rotate(180deg); }
.tick { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; border: 3px solid var(--card); }
.tick .gl { width: 16px; height: 16px; stroke-width: 3.2; }
.empty { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; }
.empty .stk-wrap { width: 96px; }

/* a place, a badge, a card: the detail page */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding-right: 14px; text-decoration: none; font-weight: 800; color: var(--ink-2); }
.pane-detail { display: grid; gap: var(--sp-4); align-content: start; }
.place-hero { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.place-hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.place-hero .chips { justify-content: center; }
.hook { font-size: var(--fs-1); color: var(--ink-2); font-weight: 700; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.blk { display: grid; gap: var(--sp-2); background: var(--card); border: 2px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); }
.blk h2 { font-size: 1.05rem; color: var(--ink-2); font-weight: 800; }
.blk ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.blk li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.12rem; line-height: 1.4; font-weight: 700; }
.blk li .ico { color: var(--good); margin-top: 2px; } .blk li .gl { stroke-width: 3; }
.callout { grid-template-columns: auto 1fr; align-items: start; background: var(--warn-soft); border-color: var(--warn); }
.callout > .ico { color: var(--warn); } .callout > .ico .gl { width: 2em; height: 2em; }
.callout h2 { color: var(--warn); }
.tide-line { display: flex; gap: 10px; align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--sea-soft); border: 2px solid var(--sea); font-weight: 800; }
.tide-line.is-good { background: var(--good-soft); border-color: var(--good); }
.tide-line.is-almost { background: var(--warn-soft); border-color: var(--warn); }
.spotted-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--good); }
.spotted-on.none { color: var(--ink-2); }
.photo-box { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 2px dashed var(--line); border-radius: var(--r-m); }
.photo { width: min(320px, 100%); border-radius: var(--r-m); border: 4px solid var(--card); box-shadow: var(--shadow); transform: rotate(-1.5deg); }

/* sticker book */
.rank { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-4); border-radius: var(--r-m); background: var(--marsh-soft); margin-bottom: var(--sp-4); }
.rank-art { width: 64px; flex: none; }
.rank-t { display: grid; gap: 4px; flex: 1; min-width: 0; }
.rank-t strong { font-size: 1.3rem; font-weight: 900; }
.rank-t span { color: var(--ink-2); font-size: .98rem; line-height: 1.3; }
.meter { height: 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); overflow: hidden; margin-top: 4px; }
.meter i { display: block; height: 100%; background: var(--marsh); border-radius: 999px; transition: width .8s var(--settle); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.slot { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px 6px 12px; border-radius: var(--r-m); background: var(--card); border: 2px solid var(--line); text-decoration: none; color: var(--ink); text-align: center; transition: transform .4s var(--settle); }
.slot:active { transform: scale(.95); }
.slot.on { border-color: var(--sea); box-shadow: 0 0 0 4px var(--sea-soft); }
.slot.todo { border-style: dashed; }
.slot.todo .slot-art { filter: grayscale(1) opacity(.45); }
.slot-art { width: 76px; }
.slot-n { font-weight: 800; font-size: .92rem; line-height: 1.2; }
.slot .tick { right: 10px; bottom: 44px; }

/* grown-up panels */
.grown { border: 2px dashed var(--ink-2); border-radius: var(--r-m); background: var(--card); }
.grown > summary { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 var(--sp-4); font-weight: 800; cursor: pointer; list-style: none; }
.grown > summary::-webkit-details-marker { display: none; }
.grown > summary span:nth-of-type(1) { flex: 1; }
.grown[open] .chev .gl { transform: rotate(180deg); }
.grown-body { padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.grown-body h3 { font-size: 1.05rem; margin-top: var(--sp-2); }
.grown-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.facts { display: grid; grid-template-columns: 1fr; gap: 2px var(--sp-4); margin: 0; }
.facts dt { font-weight: 900; margin-top: var(--sp-3); color: var(--ink-2); font-size: .95rem; }
.facts dd { margin: 0; font-size: 1.02rem; line-height: 1.45; display: grid; gap: var(--sp-2); justify-items: start; }
.refs sup { margin-left: 3px; color: var(--ink-2); font-weight: 800; }
.srcs { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); font-size: .98rem; line-height: 1.35; }
.chk { color: var(--ink-2); }
.src-go { display: block; margin-top: 4px; }

/* safety */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); counter-reset: s; }
.steps li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); background: var(--card); border: 2px solid var(--line); border-radius: var(--r-m); min-height: 84px; }
.step-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 900; }
.step-ico { width: 52px; color: var(--sea); } .step-ico .gl { width: 44px; height: 44px; stroke-width: 1.9; }
.step-t { font-size: 1.15rem; line-height: 1.35; font-weight: 800; }
.tide-live { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-l); background: var(--paper-2); border: 2.5px solid var(--line); }
.tl-top { display: flex; gap: var(--sp-3); align-items: center; }
.tl-top .stk-wrap { width: 72px; flex: none; }
.tl-t { display: grid; gap: 2px; } .tl-t strong { font-size: 1.4rem; font-weight: 900; } .tl-t span { color: var(--ink-2); font-size: 1.05rem; }
.tide-live.is-good .tl-t span, .tide-live.is-almost .tl-t span { color: var(--ink); }
.tl-times { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2); }
.tide-svg { width: 100%; height: auto; display: block; }
.tide-fill { fill: var(--sea-soft); } .tide-line-p { stroke: var(--sea); stroke-width: 3.5; stroke-linejoin: round; }
.tide-now { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 3 4; }
.tide-dot { fill: var(--coral); stroke: var(--card); stroke-width: 3; }
.tk { font: 800 11px var(--font); fill: var(--ink-2); }
.guards { display: flex; gap: 10px; align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--sea-soft); border: 2px solid var(--sea); font-weight: 800; }
.guard-lines { margin: 8px 0 0; padding-left: 1.1em; font-weight: 600; font-size: .98rem; color: var(--ink-2); display: grid; gap: 4px; }

/* games */
.scoreline { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.score { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); font-weight: 800; min-height: 44px; }
.score .gl { fill: var(--sun); stroke: #b27a00; }
.stars { display: inline-flex; gap: 2px; margin-top: 6px; }
.stars .gl { width: 26px; height: 26px; fill: transparent; stroke: var(--ink-2); stroke-width: 1.8; }
.stars .on .gl { fill: var(--sun); stroke: #b27a00; }
.game-head { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.game-stage { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.game-msg { min-height: 2.8em; font-weight: 800; font-size: 1.12rem; color: var(--ink); }
.game-msg.good { color: var(--good); }
.progress-t { color: var(--ink-2); font-weight: 800; }
.q { font-size: clamp(1.4rem, 4.6vw, 1.9rem); line-height: 1.2; max-width: 22em; }
.end { display: grid; gap: var(--sp-4); justify-items: center; }
.end .stk-wrap.big { width: 140px; }
.end-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.choose { display: grid; gap: var(--sp-4); justify-items: center; }
.mgrid { display: grid; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto; }
.mgrid.n6 { grid-template-columns: repeat(3, 1fr); } .mgrid.n8, .mgrid.n10 { grid-template-columns: repeat(4, 1fr); }
.mcard { aspect-ratio: 1; min-height: 64px; padding: 0; border: 0; background: none; perspective: 700px; }
.mc-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .55s var(--settle); transform-style: preserve-3d; }
.mcard.up .mc-in, .mcard.done .mc-in { transform: rotateY(180deg); }
.mc-back, .mc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--r-m); display: grid; place-items: center; }
.mc-back { background: var(--sea); color: var(--sea-ink); border: 3px solid var(--card); box-shadow: var(--shadow); }
.mc-back > span { display: block; width: 42%; opacity: .85; }
.mc-back .gl { width: 100%; height: auto; stroke-width: 1.6; }
.mc-front { transform: rotateY(180deg); background: var(--card); border: 3px solid var(--line); padding: 6%; }
.mcard.done .mc-front { background: var(--good-soft); border-color: var(--good); }
.mc-front .stk-wrap { width: 100%; }
.scr { display: grid; gap: var(--sp-3); justify-items: center; width: 100%; }
.scr .stk-wrap.big { width: 130px; }
.clue { max-width: 20em; }
.slots-l { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tiles-l { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.slot-l, .tile-l { width: clamp(42px, 12.5vw, 58px); height: clamp(52px, 15vw, 64px); border-radius: 14px; font-weight: 900; font-size: clamp(1.5rem, 6vw, 1.9rem); display: grid; place-items: center; padding: 0; }
.slot-l { border: 3px dashed var(--ink-2); background: var(--card); color: var(--ink); }
.slot-l.full { border-style: solid; border-color: var(--ink); background: var(--sun-soft); }
.slot-l.right { border-color: var(--good); background: var(--good-soft); color: var(--ink); animation: pop .5s var(--spring); }
.tile-l { border: 0; background: var(--sun); color: #1b2a41; box-shadow: 0 5px 0 rgba(0, 0, 0, .22); transition: transform .35s var(--settle), opacity .2s; }
.tile-l:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.tile-l.used { opacity: .22; box-shadow: none; }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.who { display: grid; gap: var(--sp-3); justify-items: center; width: 100%; }
.who .stk-wrap.big { width: 130px; }
.answers { display: grid; gap: var(--sp-3); width: 100%; max-width: 520px; }
.ans { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 66px; padding: 12px 18px; border-radius: var(--r-m); border: 3px solid var(--line); background: var(--card); color: var(--ink); font-weight: 800; font-size: 1.15rem; line-height: 1.25; transition: transform .4s var(--settle), border-color .2s, background .2s; }
.ans:active:not(:disabled) { transform: scale(.97); }
.ans.yes { border-color: var(--good); background: var(--good-soft); }
.ans.no { opacity: .45; animation: shake .4s; }
.ans:disabled { cursor: default; }
.tc { display: grid; gap: var(--sp-3); justify-items: center; width: 100%; max-width: 560px; margin: 0 auto; }
.tc-sceneBox { width: 100%; border-radius: var(--r-l); overflow: hidden; border: 3px solid var(--card); box-shadow: var(--shadow); }
.tc-scene { width: 100%; height: auto; display: block; }
.tc-clock { display: flex; align-items: center; gap: 10px; font-size: 2rem; font-weight: 900; }
.tc-clock .gl { width: 1.1em; height: 1.1em; color: #b27a00; }
.tc-time { font-variant-numeric: tabular-nums; }
.tc-range { width: 100%; height: 56px; accent-color: var(--sea); background: transparent; }
.tc-range::-webkit-slider-thumb { height: 40px; width: 40px; }
.tide-chart { width: 100%; }
.fwd .gl { transform: rotate(180deg); }

/* grown-ups page */
.gu { display: grid; gap: var(--sp-4); }
.gu-on { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--warn-soft); border: 2px solid var(--warn); font-weight: 800; }
.gu-sec { display: grid; gap: var(--sp-3); background: var(--card); border: 2px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); }
.plain { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); font-weight: 600; line-height: 1.45; }

/* the grown-up question */
.gate-back { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--sp-4); background: rgba(10, 20, 33, .66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.gate-card { width: min(420px, 100%); display: grid; gap: var(--sp-3); justify-items: center; text-align: center; padding: var(--sp-5); border-radius: var(--r-l); background: var(--card); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); animation: pop .5s var(--spring); }
.gate-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); color: #1b2a41; } .gate-ico .gl { width: 30px; height: 30px; }
.gate-why { color: var(--ink-2); }
.gate-q { font-size: 1.35rem; font-weight: 900; }
.gate-in { width: 7ch; min-height: 64px; text-align: center; font-size: 2rem; font-weight: 900; border-radius: 16px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); }
.gate-err { min-height: 1.5em; color: var(--coral); font-weight: 800; }
.gate-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* toasts and confetti */
.toast { position: fixed; z-index: 250; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 24px); opacity: 0; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px); padding: 10px 20px 10px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; box-shadow: var(--shadow); transition: transform .5s var(--spring), opacity .25s; }
.toast.in { transform: translate(-50%, 0); opacity: 1; }
.toast .stk-wrap { width: 36px; flex: none; }
@media (min-width: 744px) { .toast { bottom: 24px; left: calc(50% + var(--rail-w) / 2); } }
.conf { position: fixed; z-index: 260; width: 10px; height: 14px; border-radius: 3px; pointer-events: none; }

/* motion off for anyone who asks */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print { .tabs, .top, .toast { display: none; } .app { padding: 0; } .view { margin: 0; height: auto; overflow: visible; } }


/* ── v2 (10/26: "make this thing insane for the kids … from all angles") ─────────────────────────────── */

/* The live island */
.hero.live { min-height: 230px; display: grid; grid-template-rows: 1fr auto; }
.hero.live .hero-t { padding: var(--sp-5) var(--sp-5) 0; }
.hero.live h1 { font-size: clamp(1.9rem, 8vw, 2.7rem); }
.hero-sub { font-size: 1.12rem; font-weight: 800; margin-top: 6px; }
.hero.sky-light .hero-t { color: #1b2a41; }
.hero.sky-dark .hero-t { color: #fff3da; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-4) var(--sp-4); }
.hero-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1b2a41; font-weight: 800; font-size: .92rem; }
.hero-chip .gl { width: 1.05em; height: 1.05em; }
.live-art { width: 100%; height: 100%; display: block; }

/* Today's mission and the island picker */
.mission-slot { display: grid; gap: var(--sp-2); }
.mission { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3); border-radius: var(--r-l); background: var(--ink); color: var(--paper); text-decoration: none; box-shadow: var(--shadow); transition: transform var(--settle-t) var(--settle); }
.mission:active { transform: scale(.98); transition-duration: 80ms; }
.mission-art { width: 76px; display: block; }
.mission-art .stk { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.mission-t { display: grid; gap: 2px; }
.mission-k { font-size: .95rem; font-weight: 800; color: var(--sun); }
.mission-t strong { font-size: 1.12rem; line-height: 1.3; font-weight: 800; }
.mission .go .gl { transform: rotate(180deg); }
.mission.done { background: var(--good-soft); color: var(--ink); }
.mission.done .mission-k { color: var(--good); }
.done-ico { color: var(--good); } .done-ico .gl { stroke-width: 3; width: 28px; height: 28px; }
.isle-change { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font-weight: 800; }
.isle-change .chg { color: var(--ink-2); font-weight: 700; margin-left: 4px; text-decoration: underline; text-underline-offset: 3px; }
.picker { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); justify-items: center; text-align: center; }
.picker h2 { font-size: 1.45rem; }
.picker-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); width: 100%; }
@media (min-width: 640px) { .picker-row { grid-template-columns: repeat(4, 1fr); } }
.isle { display: grid; justify-items: center; gap: 6px; padding: var(--sp-3) var(--sp-2); min-height: 132px; border-radius: var(--r-m); border: 2px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 900; font-size: 1.1rem; transition: transform var(--settle-t) var(--settle), border-color .2s; }
.isle:active { transform: scale(.95); transition-duration: 80ms; }
.isle .stk-wrap { width: 76px; }

/* Home doors with something live in each */
.home-tiles .tile { min-height: 168px; align-content: space-between; }
.home-tiles .tile h2 { font-size: 1.3rem; }
.strip { display: flex; margin-top: var(--sp-2); }
.strip > span { width: 44px; margin-right: -10px; display: block; }
.strip > span .stk { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12)); }
.strip.ghost > span { filter: grayscale(1) opacity(.4); }
.tile-stars, .tile-tide { display: flex; align-items: center; gap: 6px; font-weight: 900 !important; color: var(--ink) !important; font-size: 1.15rem !important; }
.tile-stars .gl { fill: var(--sun); stroke: #b27a00; }
.t-safe.is-good { --tile-bg: var(--good-soft); } .t-safe.is-almost { --tile-bg: var(--warn-soft); }

/* Detail pages: no box stacking — spacing and type do the grouping */
.intro { font-size: clamp(1.3rem, 4.6vw, 1.55rem); line-height: 1.38; font-weight: 800; }
.say { display: grid; gap: 6px; }
.say h2 { font-size: 1.02rem; font-weight: 900; color: var(--ink); letter-spacing: 0; }
.say.tips ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: var(--sp-3); }
.say.tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.12rem; line-height: 1.4; font-weight: 700; }
.say.tips li .ico { color: var(--good); margin-top: 2px; } .say.tips li .gl { stroke-width: 3; }
.say.callout { grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: var(--sp-4); border-radius: var(--r-m); background: var(--warn-soft); }
.say.callout > .ico { color: var(--warn); } .say.callout > .ico .gl { width: 2em; height: 2em; }
.say.callout h2 { color: var(--warn); }
.place-head, .card-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; }
.place-art, .card-art { width: clamp(92px, 26vw, 140px); }
.place-t, .card-head > div { display: grid; gap: 6px; min-width: 0; }
.place-head h1, .card-head h1 { font-size: clamp(1.7rem, 6.4vw, 2.4rem); }
.meta { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-weight: 800; font-size: 1rem; }
.meta .gl { width: 1.1em; height: 1.1em; }
.place-head .chips { margin-top: 2px; }
.card-head .hook { font-size: 1.12rem; }
.pane-detail.place, .pane-detail.card, .pane-detail.badge { gap: var(--sp-5); }
.row-actions { justify-content: flex-start; }

/* Stick it yourself */
.badge-hero { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
.badge-t { display: grid; gap: 4px; justify-items: center; }
.badge-hero h1 { font-size: clamp(1.9rem, 6.6vw, 2.6rem); }
.stick-stage { position: relative; width: min(100%, 340px); height: 352px; }
.stick-stage::before { content: ""; position: absolute; left: 50%; top: 0; width: 176px; height: 176px; margin-left: -88px; border-radius: 34px; background: var(--paper-2); border: 2px solid var(--line); }
.stick-stage.is-stuck { height: 176px; }
.stick-stage.is-stuck::before { display: none; }
.peel { position: absolute; left: 50%; top: 13px; width: 150px; margin-left: -75px; z-index: 2; touch-action: none; cursor: grab; will-change: transform; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .14)); user-select: none; -webkit-user-select: none; }
.peel .stk { pointer-events: none; }
.peel.lifted { cursor: grabbing; filter: drop-shadow(0 20px 16px rgba(0, 0, 0, .28)); }
.peel.stuck { cursor: default; }
.is-stuck .peel { top: 13px; }
.peel.wiggle { animation: wiggle .5s var(--settle); }
@keyframes wiggle { 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
.book-slot { position: absolute; left: 50%; bottom: 0; width: 164px; height: 164px; margin-left: -82px; border-radius: 50%; border: 4px dashed var(--ink-2); display: grid; place-items: center; color: var(--ink-2); font-weight: 900; font-size: 1rem; background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.book-slot.full { border-style: solid; border-color: var(--good); }
.is-stuck .book-slot { bottom: auto; top: 6px; }

/* The safety deck */
.deck { display: grid; gap: var(--sp-3); }
.deck-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 7% 14px; margin: 0 calc(-1 * var(--sp-4)); overscroll-behavior-x: contain; }
.deck-track::-webkit-scrollbar { display: none; }
.step-card { flex: 0 0 86%; scroll-snap-align: center; min-height: 250px; display: grid; justify-items: center; align-content: center; gap: 14px; padding: var(--sp-5); text-align: center; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow); position: relative; }
.step-card .step-n { position: absolute; top: 14px; left: 14px; }
.step-card .step-ico { width: 104px; color: var(--sea); display: block; }
.step-card .step-ico .gl { width: 84px; height: 84px; margin: 10px auto; stroke-width: 1.7; }
.step-card .step-t { font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.3; font-weight: 900; max-width: 16em; }
.step-card.last { background: var(--sun-soft); }
.done-art { width: 104px; }
.deck-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.nav-b { width: 56px; min-height: 56px; padding: 0; }
.nav-b:disabled { opacity: .35; box-shadow: none; }
.dots { display: flex; gap: 8px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: background .2s, transform var(--settle-t) var(--settle); }
.dots i.on { background: var(--ink); transform: scale(1.25); }
@media (min-width: 744px) { .deck-track { margin: 0; padding: 4px 4px 14px; } .step-card { flex-basis: 72%; } }

/* Tide clock: drag the sun */
.tc-rail { position: relative; width: calc(100% - 48px); height: 76px; margin: 0 24px; touch-action: none; cursor: pointer; }
.tc-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 8px; border-radius: 99px; background: var(--line); }
.tc-fill { position: absolute; left: 0; top: 26px; height: 8px; border-radius: 99px; background: var(--sea); }
.tc-knob { position: absolute; top: 6px; width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: #1b2a41; box-shadow: 0 6px 14px rgba(0, 0, 0, .22), 0 0 0 4px var(--card); touch-action: none; cursor: grab; transition: background .25s, color .25s, transform var(--settle-t) var(--settle); }
.tc-knob .gl { width: 28px; height: 28px; }
.tc-knob.night { background: #1f3347; color: #fff3da; }
.tc-knob.lifted { transform: scale(1.12); cursor: grabbing; transition-duration: 120ms; }
.tc-rail.focus .tc-knob { outline: 4px solid var(--focus); outline-offset: 3px; }
.tc-lab { position: absolute; top: 50px; font-weight: 800; font-size: .9rem; color: var(--ink-2); transform: translateX(-50%); }
.tc-lab.l { left: 0; } .tc-lab.m { left: 50%; } .tc-lab.r { left: 100%; }
.tc-clock { font-size: 2.1rem; }

/* Drag spelling */
.tile-l { touch-action: none; position: relative; }
.tile-l.lifted { z-index: 6; box-shadow: 0 14px 20px rgba(0, 0, 0, .25); transition: none; }
.slot-l.drop { animation: pop .35s var(--spring); }
.peel.pop .stk { animation: pop .7s var(--spring); }

/* Live water (WebGL) under the beach drawing */
.hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: none; }
.hero.has-water .hero-gl { display: block; }
.hero-gl.lost { display: none !important; }

/* The island map */
:root { --map-sand: #fbecc4; --map-land: #f3dfb0; --map-marsh: #b9dcae; --map-sea-a: #5fc6d6; --map-sea-b: #1f8fa3; --map-label: #5b4a2e; }
@media (prefers-color-scheme: dark) { :root { --map-sand: #e4d3a6; --map-land: #c9b48a; --map-marsh: #7fae80; --map-sea-a: #1f6f86; --map-sea-b: #0e3c52; --map-label: #3c2f1a; } }
.map-door { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--sp-3); padding: 10px 14px 10px 10px; margin-bottom: var(--sp-4); border-radius: var(--r-m); background: var(--sea-soft); color: var(--ink); text-decoration: none; transition: transform var(--settle-t) var(--settle); }
.map-door:active { transform: scale(.98); transition-duration: 80ms; }
.map-door-art { width: 64px; display: block; }
.map-door strong { display: block; font-size: 1.1rem; line-height: 1.2; }
.map-door .go .gl { transform: rotate(180deg); }
.map-page { display: grid; gap: var(--sp-3); }
.map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); }
.map-head h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.map-wrap { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); background: var(--map-sea-b); }
.map-box { position: relative; height: min(64dvh, 620px); overflow: hidden; touch-action: none; cursor: grab; outline: none; }
.map-box:focus-visible { box-shadow: inset 0 0 0 4px var(--focus); }
.map-box.grabbing { cursor: grabbing; }
.map-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map-svg { display: block; }
.map-label { font: 900 44px var(--font); fill: var(--map-label); paint-order: stroke; stroke: rgba(255, 246, 229, .85); stroke-width: 10px; stroke-linejoin: round; letter-spacing: .02em; text-anchor: middle; }
.map-pins { position: absolute; inset: 0; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; width: 56px; height: 76px; margin: -76px 0 0 -28px; padding: 0; border: 0; background: none; pointer-events: auto; will-change: transform; display: grid; justify-items: center; }
.pin-art { width: 52px; display: block; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .3)); transform-origin: 50% 100%; transition: transform var(--settle-t) var(--settle); }
.map-box.ready .pin-art { animation: pin-in .7s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes pin-in { from { transform: translateY(-26px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.pin-stem { width: 4px; height: 18px; margin-top: -4px; border-radius: 2px; background: #1f3347; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.pin-lab { position: absolute; top: 80px; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #1b2a41; font-weight: 900; font-size: .9rem; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform var(--settle-t) var(--settle); pointer-events: none; }
.map-box.near .pin-lab, .pin.on .pin-lab, .pin:focus-visible .pin-lab { opacity: 1; transform: none; }
.pin.on .pin-art { transform: scale(1.28) translateY(-6px); }
.pin:active .pin-art { transform: scale(.92); transition-duration: 80ms; }
.pin:focus-visible { outline: none; } .pin:focus-visible .pin-art { outline: 4px solid var(--focus); border-radius: 50%; }
.map-ctl { position: absolute; right: 12px; top: 12px; display: grid; gap: 8px; }
.map-b { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; border: 0; background: color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); font: 900 1.8rem/1 var(--font); }
.map-b:active { transform: scale(.94); }
.map-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: var(--sp-3); padding: 10px 16px 16px; border-radius: var(--r-l); background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 -6px 30px rgba(0, 0, 0, .25); transform: translateY(calc(100% + 20px)); transition: transform .42s var(--settle); touch-action: none; }
.map-sheet.open { transform: none; }
.map-sheet.dragging { transition: none; }
.sheet-grip { justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
.sheet-row { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3); align-items: center; }
.sheet-art { width: 72px; display: block; }
.sheet-t { font-size: 1.2rem; line-height: 1.2; display: block; }
.sheet-sub { color: var(--ink-2); font-size: 1rem; line-height: 1.35; margin-top: 4px; }
.sheet-actions { display: flex; gap: var(--sp-2); }
.sheet-actions .btn.primary { flex: 1; }
.map-credit { font-size: .92rem; }
@media (min-width: 744px) { .map-page { max-width: 1100px; margin: 0 auto; padding: var(--sp-5) var(--sp-6); } .map-box { height: calc(100dvh - var(--top-h) - 230px); min-height: 420px; } .map-sheet { left: auto; width: 380px; } }
@media (prefers-reduced-transparency: reduce) { .map-sheet, .map-b { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the scene gets room on a phone: words at the top, open sky and water in the middle, the tide and sunset at the bottom */
.hero.live { min-height: 340px; }
@media (min-width: 744px) { .hero.live { min-height: 380px; } }

/* ── v3: life on the home scene ─────────────────────────────────────────────────────────────────────────
   A pelican glides right to left just above the horizon (a slow bob, a wingbeat now and then), then is gone for a while;
   a dolphin's back rolls up and under in the open water with a ring spreading after it. Transform and opacity only.
   Paused when the picture is off screen; for less motion the pelican rests mid-glide and the dolphin stays under. */
.hero-life { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-life .pel, .hero-life .dol { display: block; width: 100%; height: auto; }
.life-pel { position: absolute; left: 0; top: calc(60% - clamp(64px, 14%, 86px) * .52); width: 100%; transform: translateX(58%); animation: kd-glide 26s linear -7s infinite; }
.life-pel-bob { width: clamp(64px, 14%, 86px); animation: kd-bob 3.6s ease-in-out infinite alternate; }
.pel-wing { transform-box: fill-box; transform-origin: 15% 95%; animation: kd-flap 7s ease-in-out infinite; }
.pel-far { transform-box: fill-box; transform-origin: 10% 95%; animation: kd-flap 7s ease-in-out infinite; }
@keyframes kd-glide { 0% { transform: translateX(104%); } 64% { transform: translateX(-30%); } 100% { transform: translateX(-30%); } }
@keyframes kd-bob { from { transform: translateY(-3px) rotate(-1.5deg); } to { transform: translateY(4px) rotate(1deg); } }
@keyframes kd-flap { 0%, 80%, 100% { transform: none; } 84% { transform: scaleY(.25) skewX(8deg); } 88% { transform: none; } 92% { transform: scaleY(.3) skewX(8deg); } 96% { transform: none; } }
.life-dol { position: absolute; left: 16%; top: calc(60% + 14px); width: clamp(48px, 13%, 70px); }
.life-dol-clip { overflow: hidden; aspect-ratio: 80 / 34; }
.life-dol .dol { transform: translateY(105%); transform-origin: 50% 190%; animation: kd-roll 11s cubic-bezier(.45, .05, .55, .95) -4s infinite; }
@keyframes kd-roll { 0%, 58% { transform: translateY(105%) rotate(-26deg); } 63% { transform: translateY(26%) rotate(-12deg); } 68% { transform: translateY(6%) rotate(2deg); } 74% { transform: translateY(40%) rotate(18deg); } 80%, 100% { transform: translateY(105%) rotate(28deg); } }
.life-ring { position: absolute; left: 50%; bottom: -3px; width: 120%; height: 9px; margin-left: -60%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); opacity: 0; transform: scale(.3); animation: kd-ring 11s ease-out -4s infinite; }
@keyframes kd-ring { 0%, 62% { opacity: 0; transform: scale(.3); } 66% { opacity: .9; } 86%, 100% { opacity: 0; transform: scale(1.5); } }
.hero.paused .hero-life * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-life *, .hero-life *::before { animation: none !important; }
  .life-pel { transform: translateX(46%); }
  .life-dol { display: none; }
}

/* ── v3: sorting games (drag a sticker to where it belongs) ─────────────────────────────────────────────── */
.sort { display: grid; gap: var(--sp-4); }
.sort-top { display: grid; justify-items: center; text-align: center; gap: var(--sp-2); }
.sort-q { font-size: var(--fs-2); line-height: 1.15; letter-spacing: -.015em; outline: none; max-width: 16em; }
.sort-count { font-weight: 800; color: var(--ink-2); font-size: 1rem; }
.sort-tray { position: relative; width: 150px; height: 168px; display: grid; place-items: center; }
.sort-tray::before { content: ""; position: absolute; inset: 6px 4px 22px; border-radius: 34px; background: var(--paper-2); border: 2px dashed var(--line); }
.sort-peel { position: relative; z-index: 5; width: 132px; display: grid; justify-items: center; gap: 2px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; will-change: transform; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .14)); }
.sort-peel .peel-art { width: 118px; pointer-events: none; }
.peel-n { font-weight: 900; font-size: 1rem; background: var(--card); color: var(--ink); border-radius: 999px; padding: 2px 12px; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); pointer-events: none; }
.sort-peel.lifted { cursor: grabbing; filter: drop-shadow(0 20px 16px rgba(0, 0, 0, .28)); }
.sort-peel.in { animation: pop .5s var(--settle); }
.sort-peel.gone { opacity: 0; transition: opacity .35s var(--ease) .2s; }
.sort-bins { display: grid; gap: var(--sp-3); grid-template-columns: repeat(3, 1fr); }
.sort-bins.n2, .sort-bins.n4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 744px) { .sort-bins.n5 { grid-template-columns: repeat(5, 1fr); } .sort-bins.n4 { grid-template-columns: repeat(4, 1fr); } }
.sort-bin { position: relative; min-height: 120px; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 10px 6px; border-radius: var(--r-m); border: 2.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; transition: transform .4s var(--settle), border-color .2s; }
.sort-bin:active { transform: scale(.96); }
.sort-bin .bin-art { width: 72px; }
.bin-n { font-size: 1rem; line-height: 1.2; }
.bin-got { position: absolute; top: 6px; right: 8px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--good); color: var(--card); font-weight: 900; font-size: .9rem; line-height: 26px; }
.bin-got:empty { display: none; }
.sort-bin.got { border-color: var(--good); animation: pop .45s var(--spring); }
.sort-bin.nope { animation: nudge .4s var(--settle); }
@keyframes nudge { 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }

/* ── v3: the map, alive ───────────────────────────────────────────────────────────────────────────────
   Glints twinkle on real water points (transform + opacity only, paused for less motion). The zone buttons light up the
   chart's own marsh, beach line or water and fade the rest. */
.map-glints { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.glint { position: absolute; width: 22px; height: 6px; margin: -3px 0 0 -11px; border-radius: 6px; background: #fff; opacity: 0; transform: scaleX(.3); animation: kd-glint 5s ease-in-out var(--gd, 0s) infinite; }
@keyframes kd-glint { 0%, 100% { opacity: 0; transform: scale(calc(var(--gs, 1) / var(--k, 1))) translateX(-6px) scaleX(.3); } 45% { opacity: .8; transform: scale(calc(var(--gs, 1) / var(--k, 1))) scaleX(1); } 70% { opacity: 0; transform: scale(calc(var(--gs, 1) / var(--k, 1))) translateX(6px) scaleX(.5); } }
@media (prefers-reduced-motion: reduce) { .glint { animation: none !important; opacity: .5; transform: scale(calc(var(--gs, 1) / var(--k, 1))); } }
.map-svg .z { transition: opacity .45s var(--settle); }
.map-box[data-zone] .map-svg .z { opacity: .22; }
.map-box[data-zone] .map-glints { opacity: .25; }
.map-box[data-zone="marsh"] .map-svg .z-marsh, .map-box[data-zone="beach"] .map-svg .z-beach, .map-box[data-zone="sea"] .map-svg .z-sea { opacity: 1; }
/* the lit zone is drawn a step richer than its everyday color */
.map-box[data-zone="marsh"] { --map-marsh: #6dbb67; }
.map-box[data-zone="beach"] { --map-sand: #fff1c2; }
.map-box[data-zone="sea"] .map-glints { opacity: 1; }
.map-box[data-zone="beach"] .z-beach path:first-child { stroke-width: 30; }
.map-box[data-zone] .map-label { opacity: .9; }
.zones { display: flex; gap: var(--sp-2); }
.zone-b { flex: 1; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.15; transition: transform .35s var(--settle), background .2s, border-color .2s; }
.zone-b:active { transform: scale(.96); }
.zone-b[aria-pressed="true"] { background: var(--sun-soft); border-color: var(--ink); }
.zone-art { width: 40px; flex: none; }
.zone-art .stk { display: block; }
@media (max-width: 400px) { .zone-b { flex-direction: column; gap: 2px; border-radius: var(--r-m); padding: 6px; font-size: .92rem; } }

/* ── the beach the tide games play on (beach.js): the picture is the field; things sit on it in the picture's own units ── */
.bf { display: grid; gap: var(--sp-3); justify-items: center; width: 100%; max-width: 560px; margin: 0 auto; }
.bf .q { max-width: 14em; }
.bf-field { position: relative; width: 100%; aspect-ratio: 320 / 190; border-radius: var(--r-l); overflow: hidden; border: 3px solid var(--card); box-shadow: var(--shadow); touch-action: none; user-select: none; -webkit-user-select: none; }
.bf-field.build { cursor: crosshair; }
.bf-pic, .bf-pic svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bf-thing { position: absolute; width: 15%; min-width: 48px; min-height: 48px; margin: -7.5% 0 0 -7.5%; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; will-change: transform; transition: filter .25s var(--ease); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.bf-thing .bf-art { width: 100%; pointer-events: none; }
.bf-thing.lifted { cursor: grabbing; z-index: 3; filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .3)); }
.bf-thing.safe { cursor: default; animation: pop .5s var(--spring); }
.bf-thing.safe::after { content: ""; position: absolute; right: -2px; top: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 2px #fff; }
.bf-thing.gone { opacity: 0; transform: translateY(10px) scale(.6); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.bf-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-4); }
.bf-tide { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink-2); }
.bf-tide .gl { width: 1.1em; height: 1.1em; }
.bf-clock { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; }
/* the keyboard way to pile sand: out of the way until a keyboard reaches it */
.bf-kb { display: flex; align-items: center; gap: var(--sp-2); width: 100%; }
.bf-kb:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bf-kb .tc-range { flex: 1; height: 48px; }
@media (prefers-reduced-motion: reduce) { .bf-thing.safe { animation: none; } .bf-thing.gone { transition: none; } }
.turn { font-weight: 900; font-size: 1.15rem; padding: 6px 16px; border-radius: 999px; background: var(--sun); color: #1b2a41; }
.turn.p2 { background: var(--sea); color: var(--sea-ink); }
.dw { border-left: 6px solid var(--sea); }
.dw-line.open { color: var(--good); }

/* ── the Field Guide: the book by habitat, silhouettes until spotted, a shine that follows the finger once found ── */
.book { display: grid; gap: var(--sp-4); }
.book-h { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: var(--sp-2); }
.book-h-art { width: 40px; flex: none; }
.book-n { margin-left: auto; font-size: .95rem; font-weight: 800; color: var(--ink-2); }
.slot-pic { position: relative; display: block; width: 76px; border-radius: 50%; overflow: hidden; }
/* not spotted yet: a soft grey ghost of the creature — the shape shows, the colors wait for the real one */
.slot.todo .slot-art { filter: grayscale(1) contrast(.75) brightness(1.08) opacity(.5); }
.slot.got .holo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 25%), rgba(255,255,255,.9) 0, rgba(255,255,255,0) 28%), conic-gradient(from 0deg at var(--mx, 30%) var(--my, 25%), #ff9ab0, #ffe08a, #9df0c8, #8ad8ff, #c9a8ff, #ff9ab0); }
.marks { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 1.08rem; line-height: 1.4; }
.facts-l { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 1.1rem; line-height: 1.4; font-weight: 700; }
.eats { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .slot.got .holo { opacity: .3; } }
@media (prefers-reduced-transparency: reduce) { .slot.got .holo { display: none; } }

/* ── lights out for the turtles: a night beach, houses with lit windows, hatchlings that follow the light ── */
.lh-moon { position: absolute; left: 12%; top: 14%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #FFF3DA; box-shadow: 0 0 24px 6px rgba(255, 243, 218, .45); }
.lh-house { position: absolute; width: 10%; min-width: 48px; min-height: 48px; margin: -4% 0 0 -5%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: end center; }
.lh-house::before { content: ""; width: 100%; aspect-ratio: 1 / .9; background: #2E3A4A; clip-path: polygon(50% 0, 100% 40%, 100% 100%, 0 100%, 0 40%); border-radius: 2px; }
.lh-win { position: absolute; bottom: 14%; width: 34%; height: 30%; border-radius: 3px; background: #3A4656; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.lh-house.lit .lh-win { background: #FFE58A; box-shadow: 0 0 18px 6px rgba(255, 229, 138, .75); }
.lh-turtle { position: absolute; width: 5%; min-width: 16px; margin: -1.5% 0 0 -2.5%; pointer-events: none; transition: transform .4s var(--ease); }
.lh-turtle svg { width: 100%; height: auto; display: block; }
.lh-turtle.stuck { animation: wiggle 1.2s var(--settle) infinite; }
.lh-turtle.swim { opacity: .35; transform: scale(.8); }
.bf-field.lh.dark .bf-scene { filter: brightness(.85); }
.off-season { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; }
.showoff-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-4); }
@media (prefers-reduced-motion: reduce) { .lh-turtle.stuck { animation: none; } .lh-turtle { transition: none; } }