@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Nunito:wght@500;700;800&display=swap');
:root{--ink:#173957;--aqua:#08a9c6}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(#dff8ff 0 40%,#9ce5ee 40% 100%);color:var(--ink);font-family:Nunito,system-ui,sans-serif}
.game-shell{width:min(1320px,96vw);margin:0 auto;padding:22px 0 30px}.title-row{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px}.eyebrow{font-size:.85rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.7}h1,h2{font-family:"Baloo 2",sans-serif;margin:0;line-height:.95}h1{font-size:clamp(2rem,4vw,3.6rem)}h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:12px}
.game-card{position:relative;overflow:hidden;border:4px solid var(--ink);border-radius:24px;background:#48c8dc;box-shadow:0 12px 0 rgba(23,57,87,.16)}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;touch-action:none}
button{cursor:pointer}.small-btn,.primary-btn,.secondary-btn{border:3px solid var(--ink);border-radius:999px;font:800 1rem Nunito,sans-serif;color:var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}.small-btn:active,.primary-btn:active,.secondary-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.small-btn{padding:10px 16px;background:#fff8c7}.primary-btn{padding:13px 22px;background:#ffe36e;font-size:1.1rem}.secondary-btn{padding:11px 20px;background:white;margin-top:10px}
.pause-btn{position:absolute;top:14px;right:14px;z-index:5;width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);font:900 1.15rem Nunito,sans-serif;box-shadow:0 4px 0 rgba(23,57,87,.35);padding:0}.pause-btn::before,.pause-btn::after{content:'';position:absolute;top:12px;bottom:12px;width:6px;background:var(--ink);border-radius:3px}.pause-btn::before{left:14px}.pause-btn::after{right:14px}.pause-btn.paused::before{content:'▶';background:none;width:auto;height:auto;top:8px;left:15px;font-size:1.25rem;line-height:26px}.pause-btn.paused::after{display:none}.pause-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(23,57,87,.35)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(23,57,87,.18);z-index:4}.hidden{display:none}.panel{width:min(520px,92%);padding:30px;text-align:center;border:4px solid var(--ink);border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 10px 0 rgba(23,57,87,.25)}.panel p{font-size:1.08rem;line-height:1.4;margin:10px auto 20px;max-width:430px}.mini-title{font-size:.8rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#078da7}.controls{font-size:.8rem!important;opacity:.65;margin-bottom:0!important}.badge-message{font-weight:900;color:#078da7;min-height:24px}.badge-panel{max-height:90%;overflow:auto}.badge-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.badge{padding:12px;border:2px solid #b9dce3;border-radius:16px;text-align:left;background:#f4fcfd}.badge.locked{opacity:.42;filter:grayscale(.8)}.badge-icon{font-size:1.8rem;float:left;margin-right:8px}.badge strong{display:block;font-size:.9rem}.badge span{font-size:.75rem}
@media(max-width:650px){.title-row{align-items:center}h1{font-size:2rem}.small-btn{padding:8px 12px}.panel{padding:22px}.badge-list{grid-template-columns:1fr}}

.achievement-panel{position:relative;overflow:hidden}
.achievement-icon{font-size:5rem;line-height:1;margin:10px auto 14px;animation:badgePop .55s cubic-bezier(.2,1.55,.45,1) both}
.achievement-panel:before,.achievement-panel:after{content:"✦  ✧  ✦";position:absolute;left:50%;transform:translateX(-50%);color:#f2b705;font-size:1.4rem;letter-spacing:.8rem;animation:sparkle 1s ease-in-out infinite alternate}
.achievement-panel:before{top:22px}.achievement-panel:after{bottom:72px}
.log-note{font-weight:900!important;color:#078da7}
@keyframes badgePop{0%{transform:scale(.35);opacity:0}70%{transform:scale(1.16);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sparkle{from{opacity:.35}to{opacity:1}}


.zone-banner{
  position:absolute;
  left:50%;
  top:23%;
  transform:translate(-50%,-50%);
  z-index:8;
  pointer-events:none;
  text-align:center;
  padding:10px 24px;
  border-radius:22px;
  background:rgba(255,255,255,.88);
  box-shadow:0 5px 18px rgba(20,70,90,.16);
  color:#075d72;
}
.zone-banner #zoneName{font-size:1.45rem;font-weight:1000}
.zone-banner small{font-weight:800;font-size:.9rem}
.zone-banner.show-zone{animation:zoneReveal 2.8s ease both}
@keyframes zoneReveal{
  0%{opacity:0;transform:translate(-50%,-38%) scale(.88)}
  14%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-62%) scale(.96)}
}


.runtime-error{position:absolute;left:20px;right:20px;bottom:20px;z-index:99;padding:12px 16px;background:#fff1f1;border:2px solid #b43232;border-radius:12px;color:#7c1f1f;font:700 14px Arial,sans-serif}

/* Prototype 12.11: emphasize the first major voyage milestone. */
.zone-banner.open-ocean-callout #zoneName{font-size:2.175rem}

/* Prototype 12.13: Sunset Seas gets a warm milestone treatment without
   overpowering the larger Open Ocean callout. */
.zone-banner.sunset-callout{
  background:rgba(255,244,224,.92);
  color:#8c4f3e;
}
.zone-banner.sunset-callout #zoneName{font-size:1.75rem}

/* Prototype 12.14: nighttime milestone treatment. */
.zone-banner.starlight-callout{
  background:rgba(238,243,255,.94);
  color:#29456f;
}
.zone-banner.starlight-callout #zoneName{font-size:1.85rem}


/* Prototype 12.20: sound toggle sits beside Pause and remains available
   on overlays so parents/teachers can mute the prototype at any time. */
.sound-btn{
  position:absolute;
  top:14px;
  right:74px;
  z-index:6;
  width:48px;
  height:48px;
  border:3px solid var(--ink);
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--ink);
  font:900 1.2rem Nunito,sans-serif;
  box-shadow:0 4px 0 rgba(23,57,87,.35);
  padding:0;
  display:grid;
  place-items:center;
}
.sound-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(23,57,87,.35)}
.sound-btn.muted{background:rgba(235,242,245,.94)}




/* Prototype 12.24 — HUD / control polish */
.game-controls{
  position:absolute;
  top:14px;
  right:14px;
  z-index:9;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border:2px solid rgba(23,57,87,.28);
  border-radius:999px;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 5px 14px rgba(23,57,87,.12);
}
.game-controls .sound-btn,
.game-controls .pause-btn{
  position:relative;
  top:auto;
  right:auto;
  z-index:auto;
  flex:0 0 48px;
  width:48px;
  height:48px;
  margin:0;
  background:rgba(255,255,255,.96);
  box-shadow:0 3px 0 rgba(23,57,87,.30);
  transition:transform .08s,box-shadow .08s,background .15s;
}
.game-controls .sound-btn:hover,
.game-controls .pause-btn:hover{background:#fffdf2}
.game-controls .sound-btn:focus-visible,
.game-controls .pause-btn:focus-visible{
  outline:4px solid rgba(255,227,110,.95);
  outline-offset:3px;
}
.game-controls .sound-btn:active,
.game-controls .pause-btn:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(23,57,87,.30);
}
.game-controls .sound-btn.muted{
  background:rgba(232,240,243,.97);
  opacity:.86;
}

/* Keep controls comfortable on narrow layouts without shrinking touch targets. */
@media(max-width:650px){
  .game-controls{top:8px;right:8px;gap:6px;padding:4px}
}


/* Prototype 12.27 — milestone / achievement celebration polish */

/* A non-blocking acknowledgement connects the child's action to the badge
   immediately, while the full badge card still appears after the voyage. */
.badge-toast{
  position:absolute;
  top:92px;
  left:50%;
  transform:translateX(-50%);
  z-index:7;
  pointer-events:none;
  min-width:270px;
  max-width:min(430px,72%);
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px 10px 12px;
  border:3px solid rgba(23,57,87,.82);
  border-radius:22px;
  background:rgba(255,255,255,.95);
  box-shadow:0 6px 0 rgba(23,57,87,.18),0 10px 24px rgba(23,57,87,.14);
  color:#173957;
}
.badge-toast.hidden{display:none}
.badge-toast-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff5b8;
  border:2px solid #e4b909;
  font-size:1.75rem;
}
.badge-toast-copy{min-width:0}
.badge-toast-label{
  font-size:.68rem;
  line-height:1;
  font-weight:1000;
  letter-spacing:.12em;
  color:#078da7;
  margin-bottom:4px;
}
.badge-toast strong{
  display:block;
  font-family:"Baloo 2",sans-serif;
  font-size:1.18rem;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.badge-toast.milestone-toast{
  background:rgba(255,249,218,.97);
  border-color:#c99706;
}
.badge-toast.milestone-toast .badge-toast-label{color:#a66d00}
.badge-toast.show-toast{animation:badgeToastReveal 2.2s ease both}
@keyframes badgeToastReveal{
  0%{opacity:0;transform:translate(-50%,-12px) scale(.92)}
  13%,75%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.98)}
}

/* Let the existing voyage callout feel like a milestone without becoming a
   screen-covering celebration. */
.zone-banner.show-zone::before,
.zone-banner.show-zone::after{
  content:"✦";
  position:absolute;
  top:50%;
  color:#f2b705;
  font-size:1.15rem;
  opacity:0;
  animation:zoneSpark 2.8s ease both;
}
.zone-banner.show-zone::before{left:-24px}
.zone-banner.show-zone::after{right:-24px;animation-delay:.08s}
@keyframes zoneSpark{
  0%,7%,88%,100%{opacity:0;transform:translateY(-50%) scale(.4) rotate(0deg)}
  20%,65%{opacity:.9;transform:translateY(-50%) scale(1) rotate(25deg)}
}

/* The full badge card is the 'big' celebration after the run. */
.achievement-panel{
  background:
    radial-gradient(circle at 50% 29%,rgba(255,236,132,.34),rgba(255,255,255,0) 37%),
    rgba(255,255,255,.97);
}
.achievement-icon{
  width:116px;
  height:116px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:4px solid #e8bd20;
  background:#fff8ce;
  box-shadow:0 0 0 8px rgba(255,232,115,.22),0 8px 0 rgba(23,57,87,.10);
}
.achievement-panel h2{color:#173957}
.achievement-panel .mini-title{color:#a87300}
.achievement-panel .log-note{
  display:inline-block;
  padding:7px 14px;
  border-radius:999px;
  background:#e9fafd;
  border:2px solid #b9e5ed;
  margin-top:2px!important;
}

/* The toast sits below the top HUD; on smaller screens keep it compact. */
@media(max-width:650px){
  .badge-toast{top:82px;min-width:235px;max-width:78%;padding:8px 13px 8px 9px}
  .badge-toast-icon{flex-basis:42px;width:42px;height:42px;font-size:1.5rem}
  .badge-toast strong{font-size:1.02rem}
}


/* Prototype 12.29 — Device & Integration Pass */

/* Keep swipes inside the game from becoming page gestures or text selection. */
.game-card{
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  isolation:isolate;
}
#game{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Only small portrait phones get an orientation suggestion. Tablets remain
   usable in portrait, while phones get a much more playable landscape field. */
.orientation-hint{display:none}
@media (max-width:600px) and (orientation:portrait){
  .orientation-hint{
    position:absolute;
    inset:0;
    z-index:30;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(23,57,87,.60);
    text-align:center;
  }
  .orientation-hint-card{
    width:min(330px,90%);
    padding:20px 22px;
    border:4px solid var(--ink);
    border-radius:24px;
    background:rgba(255,255,255,.97);
    box-shadow:0 8px 0 rgba(23,57,87,.24);
  }
  .orientation-icon{
    width:54px;height:54px;
    margin:0 auto 8px;
    display:grid;place-items:center;
    border-radius:50%;
    background:#fff3aa;
    border:3px solid var(--ink);
    font:900 2rem/1 Nunito,sans-serif;
  }
  .orientation-hint strong{
    display:block;
    font-family:"Baloo 2",sans-serif;
    font-size:1.35rem;
    line-height:1.05;
    margin-bottom:5px;
  }
  .orientation-hint span{
    display:block;
    font-size:.88rem;
    line-height:1.25;
  }
}

/* On short landscape phones, maximize the actual playfield instead of making
   the player scroll past the prototype title before getting to Cayson. */
@media (max-width:900px) and (max-height:650px) and (orientation:landscape){
  body{min-height:100svh}
  .game-shell{
    width:min(96vw,calc((100svh - 18px) * 16 / 9));
    padding:8px 0 10px;
  }
  .title-row{display:none}
  .game-card{
    border-width:3px;
    border-radius:18px;
    box-shadow:0 6px 0 rgba(23,57,87,.14);
  }
}

/* HTML overlays do not scale with the canvas, so compact them when the physical
   viewport is short. This keeps Start/Pause/End controls reachable on phones. */
@media (max-height:520px) and (orientation:landscape){
  .overlay{
    padding:7px;
    overflow:auto;
  }
  .panel{
    width:min(500px,88%);
    padding:12px 18px;
    border-width:3px;
    border-radius:20px;
    box-shadow:0 5px 0 rgba(23,57,87,.22);
  }
  .panel h2{font-size:1.65rem;margin-bottom:4px}
  .panel p{
    font-size:.86rem;
    line-height:1.25;
    margin:5px auto 9px;
  }
  .mini-title{font-size:.65rem}
  .controls{font-size:.65rem!important}
  .primary-btn,.secondary-btn{
    padding:8px 14px;
    font-size:.86rem;
    box-shadow:0 3px 0 var(--ink);
  }
  .secondary-btn{margin-top:5px}
  .achievement-icon{
    width:72px;
    height:72px;
    font-size:3rem;
    margin:4px auto 6px;
    border-width:3px;
    box-shadow:0 0 0 5px rgba(255,232,115,.20),0 4px 0 rgba(23,57,87,.10);
  }
  .badge-list{
    gap:6px;
    margin:8px 0;
  }
  .badge{padding:7px;border-radius:12px}
  .badge-icon{font-size:1.35rem}
  .badge strong{font-size:.78rem}
  .badge span{font-size:.66rem}
}

/* Narrow embedded columns still keep the page furniture tidy. */
@media(max-width:700px){
  .game-shell{width:min(100%,96vw)}
  .title-row{gap:8px}
  .title-row h1{line-height:1}
}

/* Respect accessibility preferences without changing game timing. */
@media(prefers-reduced-motion:reduce){
  .badge-toast.show-toast,
  .zone-banner.show-zone,
  .achievement-icon,
  .achievement-panel:before,
  .achievement-panel:after,
  .zone-banner.show-zone::before,
  .zone-banner.show-zone::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}