/* Ocean island board for the Preschool, Pre-K and K maps. Loaded after grade-map.css.
   Static-first: layout and route are pure CSS; tiles are real links. Motion is transform/opacity only. */
.journey-board {
  --sea-top:#5fd0e0;--sea-mid:#3cb5d6;--sea-deep:#2a8fc0;
  --board-ink:#123f5c;--card:#fffdf6;--card-edge:#bfe6ee;--route:#fff;
  --vehicle:#d8784b;--sign:#fff8dc;--sparkle:#ffd54a;
  --card-w:78%;--card-min:7.2rem;--card-mb:.9rem;
  --map-ink:var(--board-ink);--map-rail:#fff;--map-soft:#e3f8f6;
  background:linear-gradient(180deg,#e6fbfb 0%,#c8eef3 45%,#eefbf4 100%);
}
.journey-board[data-vehicle="fish"] {--vehicle:#d8784b;}
.journey-board[data-vehicle="turtle"] {--vehicle:#14897a;}
.journey-board[data-vehicle="submarine"] {--vehicle:#1878a4;}
/* Preschool: bright turquoise water, coral pink and sunny sand (Coral Cove). */
.journey-board.board-preschool {
  --sea-top:#6fe0dc;--sea-mid:#3dc0d6;--sea-deep:#2a9bc6;
  --map-cover:#0b7f94;--map-accent:#c43d63;--map-highlight:#ffd98a;--card-edge:#ffc7cf;--sparkle:#ff7b86;
}
/* Pre-K: lagoon green and teal with seagrass (Turtle Lagoon). */
.journey-board.board-pre-k {
  --sea-top:#6fdcb6;--sea-mid:#37bfa2;--sea-deep:#1f9593;
  --map-cover:#0f7a68;--map-accent:#0f7a58;--map-highlight:#f4e9a6;--card-edge:#bfeccf;--sparkle:#7be0a8;
}
/* K: deeper reef blue with gold treasure accents (Treasure Reef). */
.journey-board.board-k {
  --sea-top:#58b4ec;--sea-mid:#2f8ad4;--sea-deep:#1c5fa6;
  --map-cover:#17559a;--map-accent:#1a5fa8;--map-highlight:#ffcf55;--card-edge:#ffe08a;--sparkle:#ffd54a;
}

/* Compact cover */
.journey-board .board-cover {min-height:clamp(13rem,24vw,16.5rem);padding:clamp(1.3rem,3.4vw,2.4rem);}
.journey-board .board-cover::after {background:linear-gradient(90deg,var(--map-cover) 0%,var(--map-cover) 34%,transparent 100%);}
.journey-board .board-cover h1 {font-size:clamp(2.1rem,6vw,3.7rem);max-width:12ch;}
.journey-board .map-cover-art {display:grid;place-items:center;}
.journey-board .map-cover-art img {position:absolute;inset:0;object-position:60% center;}

/* Sea: water gradient with a repeating wave and bubble pattern. --board-art can host a painted scene later. */
.board-wrap {
  position:relative;isolation:isolate;margin-bottom:2rem;
  padding:clamp(2.1rem,5vw,3.2rem) clamp(.8rem,3vw,2.2rem) clamp(1.6rem,4vw,2.6rem);
  border-radius:clamp(24px,5vw,44px);
  background:
    radial-gradient(circle at 50% 100%,transparent 0 10px,rgb(255 255 255 / .16) 11px 13px,transparent 14px) 0 0 / 48px 24px,
    radial-gradient(circle,rgb(255 255 255 / .24) 0 3px,transparent 4px) 12px 18px / 88px 88px,
    radial-gradient(circle,rgb(255 255 255 / .15) 0 6px,transparent 7px) 56px 60px / 132px 132px,
    linear-gradient(180deg,var(--sea-top),var(--sea-mid) 52%,var(--sea-deep));
  box-shadow:inset 0 0 0 5px rgb(255 255 255 / .5),0 18px 34px rgb(10 60 100 / .24);
}
.board-sea {
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;overflow:clip;
  background-image:linear-gradient(var(--board-wash,transparent),var(--board-wash,transparent)),var(--board-art,none);
  background-size:auto,100% auto;background-repeat:repeat-y;background-position:center top;
}
/* Painted scenes: each file is the 3:2 scene stacked with its vertical mirror, so repeat-y on tall boards has no seam. The gradient on .board-wrap stays as the fallback. */
.journey-board.board-preschool {--board-art:url(/assets/boards/coral-cove-tile.webp);--board-wash:rgb(255 255 255 / .06);}
.journey-board.board-pre-k {--board-art:url(/assets/boards/turtle-lagoon-tile.webp);--board-wash:rgb(255 255 255 / .04);}
.journey-board.board-k {--board-art:url(/assets/boards/treasure-reef-tile.webp);}

/* Tiles: one flat serpentine grid. Rows alternate direction through explicit columns. */
.board-tiles {
  --gx:3.2rem;--gy:3.6rem;
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);grid-auto-flow:dense;gap:var(--gy) var(--gx);
}
.journey-board .board-tiles > .board-tile {
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);
  width:100%;max-width:22rem;margin:0 auto;min-width:0;
  --tile-sand:#ffe29a;color:var(--board-ink);
}
.board-tile[id] {scroll-margin-top:calc(var(--header-h,4.5rem) + 2.5rem);}
.board-tile[data-topic="0"] {--tile-sand:#ffe29a;}
.board-tile[data-topic="1"] {--tile-sand:#ffc9a8;}
.board-tile[data-topic="2"] {--tile-sand:#c6eec4;}
.board-tile[data-topic="3"] {--tile-sand:#dccfff;}
.board-tile[data-topic="4"] {--tile-sand:#bfe4ff;}
.board-tile[data-topic="5"] {--tile-sand:#ffc8dc;}
.tile-island {grid-area:1/1;z-index:1;width:100%;height:auto;aspect-ratio:200 / 140;color:var(--tile-sand);pointer-events:none;transform:scale(1.1);transform-origin:50% 78%;}
.tile-start {position:absolute;z-index:1;left:2%;top:34%;width:2.9rem;height:2.9rem;pointer-events:none;}
.tile-flag {display:none;position:absolute;z-index:3;left:14%;top:8%;width:2.5rem;height:2.5rem;color:#e5484d;pointer-events:none;}
.journey-board .board-tile .map-step {
  left:calc((100% - var(--card-w)) / 2 - 1rem);top:auto;
  bottom:calc(var(--card-mb) + var(--card-min) - .4rem);z-index:3;
  width:2.7rem;height:2.7rem;font-size:1.15rem;background:var(--map-highlight);border-color:#fff;color:#16405e;
}
.board-region {
  position:absolute;z-index:4;top:-1.5rem;left:0;max-width:92%;
  padding:.28rem .8rem;border-radius:12px;background:var(--sign);color:#5a3a1c;
  border:3px solid #fff;box-shadow:0 4px 0 rgb(8 40 70 / .18);
  font:700 .88rem/1.2 var(--font-display);transform:rotate(-2deg);pointer-events:none;
}
.journey-board .board-tile .map-node-link {
  grid-area:1/1;z-index:2;align-self:end;justify-self:center;
  flex-direction:column;justify-content:center;align-items:center;gap:.45rem;text-align:center;
  width:var(--card-w);min-height:var(--card-min);margin-bottom:var(--card-mb);padding:.8rem .85rem;
  background:var(--card);border:3px solid #fff;border-radius:24px;
  box-shadow:0 7px 0 var(--card-edge),0 14px 22px rgb(8 40 70 / .22);
}
.journey-board .board-tile .map-node-main {flex:0 1 auto;align-items:center;}
.journey-board .board-tile .map-node-title {font-size:clamp(1.12rem,2.6vw,1.3rem);overflow-wrap:anywhere;}
.journey-board .board-tile .map-node-count {font-size:.8rem;}
.journey-board .board-tile .map-node-link:hover {border-color:var(--map-accent);}
.journey-board .board-tile .map-node-link:focus-visible {outline:4px solid #14325a;outline-offset:3px;box-shadow:0 0 0 3px #fff,0 7px 0 var(--card-edge);}
.journey-board .journey-next-hint {margin-inline:auto;}

/* Route: dotted connectors from each tile to the next one. 1 column: always down. */
.board-tile::after {
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:calc(50% - 3px);top:calc(100% - 1.4rem);width:0;height:calc(var(--gy) + 2.8rem);
  border:0 dotted var(--route);border-left-width:6px;
}
.board-tile:last-child::after {display:none;}
/* horizontal connectors for 2 and 3 columns are set in the breakpoints below */
.board-tile::after {--run:calc(var(--gx) + 2.8rem);}

/* Vehicle parks in the tile dock; the dock never blocks the link beneath it. */
.tile-dock {position:absolute;z-index:4;right:4%;bottom:calc(var(--card-mb) + var(--card-min) - 1.2rem);width:56px;height:56px;pointer-events:none;}
.board-vehicle {
  position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;
  background:#fff;color:var(--vehicle);border:3px solid var(--vehicle);box-shadow:0 5px 0 rgb(8 40 70 / .18);
}
.board-vehicle svg {width:34px;height:34px;}

/* Progress: flag + sunny glow on touched islands; pulse ring on the next one. */
.board-tile.has-progress .tile-flag {display:block;}
.board-tile.has-progress .tile-island {filter:drop-shadow(0 0 12px rgb(255 214 90 / .95));}
.board-tile.has-progress .map-node-link {border-color:#ffd54a;}
.journey-board .board-tile.is-next .map-node-link {border-color:#ffd54a;}
.board-tile.is-next .map-node-link::after {
  content:"";position:absolute;inset:-8px;border:4px solid var(--map-highlight);border-radius:30px;pointer-events:none;
}

/* Celebration */
.board-fx {position:absolute;z-index:6;left:50%;top:55%;width:0;height:0;pointer-events:none;}
.fx-spark {position:absolute;left:-14px;top:-14px;width:28px;height:28px;color:var(--sparkle);opacity:0;}
.fx-spark svg {display:block;width:100%;height:100%;}
.fx-spark:nth-child(3n+2) {color:#ffd54a;}
.fx-spark:nth-child(3n+3) {color:#fff;}
.fx-spark:nth-child(1) {--dx:120px;--dy:0px;}
.fx-spark:nth-child(2) {--dx:78px;--dy:45px;}
.fx-spark:nth-child(3) {--dx:60px;--dy:104px;}
.fx-spark:nth-child(4) {--dx:0px;--dy:84px;}
.fx-spark:nth-child(5) {--dx:-60px;--dy:104px;}
.fx-spark:nth-child(6) {--dx:-78px;--dy:45px;}
.fx-spark:nth-child(7) {--dx:-120px;--dy:0px;}
.fx-spark:nth-child(8) {--dx:-104px;--dy:-60px;}
.fx-spark:nth-child(9) {--dx:-45px;--dy:-78px;}
.fx-spark:nth-child(10) {--dx:0px;--dy:-120px;}
.fx-spark:nth-child(11) {--dx:45px;--dy:-78px;}
.fx-spark:nth-child(12) {--dx:104px;--dy:-60px;}
.board-bravo {
  position:fixed;z-index:40;left:50%;bottom:max(1rem,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:max-content;max-width:min(92vw,28rem);margin:0;padding:.85rem 1.5rem;text-align:center;
  border-radius:100px;background:#fff;color:#16405e;border:4px solid #ffd54a;
  font:700 clamp(1.05rem,3.4vw,1.25rem)/1.3 var(--font-display);box-shadow:0 10px 26px rgb(8 40 70 / .3);
}

/* Finish */
.board-finish {display:grid;place-items:center;margin-top:2.4rem;}
.board-finish > svg:first-child {width:clamp(6.5rem,24vw,9rem);height:auto;aspect-ratio:120 / 100;}

/* Small boards (Preschool 2 tiles, Pre-K 3 tiles): bigger tiles so the painted water feels inhabited. */
.journey-board.board-preschool,.journey-board.board-pre-k {--card-min:9.6rem;--gy:4.6rem;}
.journey-board.board-preschool .board-tiles > .board-tile,.journey-board.board-pre-k .board-tiles > .board-tile {--card-w:80%;}
.journey-board.board-preschool .board-tile .map-node-title,.journey-board.board-pre-k .board-tile .map-node-title {font-size:clamp(1.3rem,3.6vw,1.65rem);}
.journey-board.board-preschool .board-tile .map-node-count,.journey-board.board-pre-k .board-tile .map-node-count {font-size:.9rem;}
.board-wrap {padding-bottom:clamp(2.6rem,6vw,3.6rem);}

.board-life {display:none;}
/* Shore scenery: decorative corners beside the treasure; Preschool also gets a whale on wide screens. */
.board-scenery {position:absolute;inset:0;pointer-events:none;}
.scene {position:absolute;bottom:.7rem;display:block;width:clamp(4.8rem,18vw,8rem);aspect-ratio:1;filter:drop-shadow(0 4px 3px rgb(8 40 70 / .2));}
.scene-a {left:3%;}
.scene-b {right:3%;}
.scene-c {display:none;}

/* Treasure sparkle */
.board-finish {position:relative;}
.twinkle {position:absolute;width:1.3rem;height:1.3rem;color:#ffd54a;opacity:.9;}
.twinkle-1 {left:calc(50% + 2.4rem);top:0;}
.twinkle-2 {left:calc(50% - 3.6rem);top:1.2rem;width:1rem;height:1rem;color:#fff;}
.twinkle-3 {left:calc(50% + 3.6rem);top:3.2rem;width:.9rem;height:.9rem;color:#fff;}

/* 2 columns: 1 right, 2 down, 3 left, 4 down */
@media (min-width:560px) {
  .board-tiles {grid-template-columns:repeat(2,minmax(0,1fr));}
  .journey-board .board-tiles > .board-tile {max-width:none;--card-w:80%;}
  .board-tile:nth-child(4n+3) {grid-column:2;}
  .board-tile:nth-child(4n+4) {grid-column:1;}
  .board-tile:nth-child(n)::after {
    left:calc(50% - 3px);right:auto;top:calc(100% - 1.4rem);bottom:auto;width:0;height:calc(var(--gy) + 2.8rem);
    border-left-width:6px;border-top-width:0;
  }
  .board-tile:nth-child(4n+1)::after,.board-tile:nth-child(4n+3)::after {
    top:auto;bottom:calc(var(--card-mb) + var(--card-min) / 2 - 3px);width:var(--run);height:0;border-left-width:0;border-top-width:6px;
  }
  .board-tile:nth-child(4n+1)::after {left:calc(100% - 1.4rem);}
  .board-tile:nth-child(4n+3)::after {left:auto;right:calc(100% - 1.4rem);}
  .board-tile:last-child::after {display:none;}
}
/* 3 columns: 1 right, 2 right, 3 down, 4 left, 5 left, 6 down */
@media (min-width:900px) {
  .board-tiles {grid-template-columns:repeat(3,minmax(0,1fr));}
  .journey-board .board-tiles > .board-tile {--card-w:76%;}
  .board-tile:nth-child(4n+3) {grid-column:auto;}
  .board-tile:nth-child(4n+4) {grid-column:auto;}
  .board-tile:nth-child(6n+4) {grid-column:3;}
  .board-tile:nth-child(6n+5) {grid-column:2;}
  .board-tile:nth-child(6n+6) {grid-column:1;}
  .board-tile:nth-child(n)::after {
    left:calc(50% - 3px);right:auto;top:calc(100% - 1.4rem);bottom:auto;width:0;height:calc(var(--gy) + 2.8rem);
    border-left-width:6px;border-top-width:0;
  }
  .board-tile:nth-child(6n+1)::after,.board-tile:nth-child(6n+2)::after,
  .board-tile:nth-child(6n+4)::after,.board-tile:nth-child(6n+5)::after {
    top:auto;bottom:calc(var(--card-mb) + var(--card-min) / 2 - 3px);width:var(--run);height:0;border-left-width:0;border-top-width:6px;
  }
  .board-tile:nth-child(6n+1)::after,.board-tile:nth-child(6n+2)::after {left:calc(100% - 1.4rem);}
  .board-tile:nth-child(6n+4)::after,.board-tile:nth-child(6n+5)::after {left:auto;right:calc(100% - 1.4rem);}
  .board-tile:last-child::after {display:none;}
}
@media (max-width:559px) {
  .journey-board.board-preschool .board-tiles > .board-tile,.journey-board.board-pre-k .board-tiles > .board-tile {max-width:26rem;}
}
@media (min-width:560px) {
  .journey-board.board-preschool .board-tiles {max-width:50rem;margin-inline:auto;}
  /* Whole painted scene visible: 3:2 board with the route centered in the open water. */
  .board-preschool .board-wrap,.board-pre-k .board-wrap {aspect-ratio:3 / 2;display:flex;flex-direction:column;justify-content:center;}
}
@media (min-width:900px) {
  .journey-board.board-preschool .board-tiles {grid-template-columns:repeat(2,minmax(0,1fr));}
  .board-preschool .scene-c {display:block;right:2%;top:46%;bottom:auto;width:7rem;}
}
@media (max-width:359px) {
  .board-wrap {padding-inline:.5rem;}
  .journey-board .board-tiles > .board-tile {--card-w:84%;}
  .board-region {font-size:.8rem;}
}

/* Calm motion only: transforms and opacity. Ambient friends exist only when motion is welcome (and container units work). */
@media (prefers-reduced-motion:no-preference) {
  .board-vehicle svg {animation:board-bob 3.8s ease-in-out infinite;}
  .board-tile.is-next .map-node-link::after {animation:board-pulse 2.6s ease-out infinite;}
  .board-tile.is-next .map-node-link::before {animation:board-point 1.4s ease-in-out infinite;}
  .fx-spark {animation:board-burst 1.8s ease-out both;}
  .fx-spark:nth-child(even) {animation-delay:.12s;}
  .board-bravo {animation:board-bravo 5.4s ease both;}
  .twinkle {animation:board-twinkle 2.8s ease-in-out infinite;}
  .twinkle-2 {animation-delay:-.9s;}
  .twinkle-3 {animation-delay:-1.8s;}
  .scene-c {animation:board-float 7s ease-in-out infinite;}
}
@supports (width:1cqw) {
  @media (prefers-reduced-motion:no-preference) {
    /* The layer sticks to the viewport so friends stay in sight on tall boards. */
    .board-life {display:block;position:sticky;top:var(--header-h,0px);height:min(100svh,100%);container-type:size;overflow:clip;}
    .board-life::before {
      content:"";position:absolute;inset:-10% -40%;
      background:linear-gradient(105deg,transparent 42%,rgb(255 255 255 / .16) 50%,transparent 58%);
      animation:life-shimmer 16s ease-in-out infinite alternate;
    }
    .life {position:absolute;left:0;display:block;will-change:transform;}
    .life svg {display:block;width:100%;height:100%;}
    .life.flip svg {transform:scaleX(-1);}
    .life:nth-child(1) {top:14%;width:3.4rem;height:3.4rem;animation:life-swim-r 28s linear -6s infinite;}
    .life:nth-child(2) {top:37%;width:2.6rem;height:2.6rem;animation:life-swim-l 21s linear -12s infinite;}
    .life:nth-child(3) {top:60%;width:3rem;height:3rem;animation:life-swim-r 34s linear -20s infinite;}
    .life:nth-child(4) {top:82%;width:2.2rem;height:2.2rem;animation:life-swim-l 24s linear -3s infinite;}
    .life.life-sub {width:4.6rem;height:2.6rem;}
    .life-bubble {top:88%;width:1.1rem;height:1.1rem;opacity:0;}
    .life:nth-child(5) {left:9%;animation:life-rise 11s ease-in -3s infinite;}
    .life:nth-child(6) {left:48%;width:.8rem;height:.8rem;animation:life-rise 14s ease-in -8s infinite;}
    .life:nth-child(7) {left:91%;animation:life-rise 12s ease-in -1s infinite;}
  }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .journey-board .board-tile .map-node-link:hover {transform:translateY(-4px);}
  .board-tile:hover .tile-island {animation:tile-wiggle .8s ease-in-out;}
  .board-tile:hover::before {animation:tile-splash 1s ease-out;}
}
@media (prefers-reduced-motion:no-preference) {
  .board-tile:focus-within .tile-island {animation:tile-wiggle .8s ease-in-out;}
  .board-tile:focus-within::before {animation:tile-splash 1s ease-out;}
}
@media (prefers-reduced-motion:reduce) {
  .board-fx {display:none;}
}
/* Splash ring under the island; only plays on hover or keyboard focus. */
.journey-board .board-tiles > .board-tile::before {
  content:"";position:absolute;z-index:0;left:2%;right:2%;top:46%;height:34%;
  border:4px solid rgb(255 255 255 / .85);border-radius:50%;opacity:0;pointer-events:none;
}
/* Up next: a bobbing gold pointer above the card (JS marks the tile; static boards have none). */
.board-tile.is-next .map-node-link::before {
  content:"";position:absolute;left:calc(50% - .9rem);top:-1.9rem;width:1.8rem;height:1.5rem;
  background:#ffd54a;clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none;
}
@keyframes board-bob {0%,100%{transform:translateY(3px) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes board-pulse {0%{transform:scale(1);opacity:.95}100%{transform:scale(1.1);opacity:0}}
@keyframes board-point {0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes board-twinkle {0%,100%{transform:scale(.3) rotate(0);opacity:0}50%{transform:scale(1) rotate(25deg);opacity:1}}
@keyframes board-float {0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@keyframes tile-wiggle {
  0%,100%{transform:scale(1.1) rotate(0)}
  25%{transform:scale(1.15) rotate(-2.5deg)}
  50%{transform:scale(1.15) rotate(2.5deg)}
  75%{transform:scale(1.12) rotate(-1deg)}
}
@keyframes tile-splash {0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.15);opacity:0}}
@keyframes life-swim-r {0%{transform:translate(-5rem,0)}50%{transform:translate(calc(50cqw - 2rem),-.8rem)}100%{transform:translate(calc(100cqw + 1rem),0)}}
@keyframes life-swim-l {0%{transform:translate(calc(100cqw + 1rem),0)}50%{transform:translate(calc(50cqw - 2rem),.8rem)}100%{transform:translate(-5rem,0)}}
@keyframes life-rise {0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.85}100%{transform:translate(.7rem,-14rem) scale(1.1);opacity:0}}
@keyframes life-shimmer {from{transform:translateX(-18%)}to{transform:translateX(18%)}}
@keyframes board-burst {
  0%{transform:translate(0,0) scale(.2);opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}
}
@keyframes board-bravo {
  0%{transform:translate(-50%,24px);opacity:0}
  10%,85%{transform:translate(-50%,0);opacity:1}
  100%{transform:translate(-50%,0);opacity:0;visibility:hidden}
}