:root {
  color-scheme: light;
  --navy: #082f46;
  --ink: #123a4f;
  --muted: #607788;
  --paper: #fffaf0;
  --cream: #f5e9cc;
  --teal: #10a9a1;
  --teal-dark: #08756f;
  --coral: #f06f52;
  --gold: #ffc94e;
  --sky: #dff7f4;
  --line: rgba(14, 67, 87, .15);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1040px; height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(rgba(4, 38, 57, .32), rgba(4, 38, 57, .52)),
    url("./art/world-backdrop-01.webp") center / cover no-repeat;
  font-family: ui-rounded, "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
}
button { font: inherit; }

.game {
  display: grid;
  grid-template-columns: minmax(760px, 920px) 280px;
  gap: 18px;
  width: min(1220px, calc(100vw - 36px));
  height: min(850px, calc(100vh - 30px));
}
.play-card, .captain-card {
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 30px;
  background: rgba(255, 250, 240, .96);
  box-shadow: 0 24px 70px rgba(0, 25, 40, .32);
  backdrop-filter: blur(12px);
}
.play-card {
  display: grid;
  grid-template-rows: auto minmax(405px, 1fr) auto 24px;
  min-height: 0;
  padding: 25px 32px 20px;
  overflow: hidden;
}
.mission-copy { text-align: center; }
.eyebrow { margin: 0 0 5px; color: var(--teal-dark); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; color: var(--navy); font-size: clamp(28px, 3vw, 40px); line-height: 1.07; letter-spacing: -.04em; }
.nudge { margin: 7px 0 0; color: var(--muted); font-size: 15px; }

.stage { position: relative; display: grid; place-items: center; min-height: 0; margin-top: 7px; overflow: hidden; border-radius: 24px; }
.stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, rgba(16,169,161,.08), transparent 58%); pointer-events: none; }
.flag-brief {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 330px;
  height: 245px;
  overflow: hidden;
  border: 3px solid white;
  border-radius: 28px;
  background: linear-gradient(145deg, #e7fbf9, #c8eee9);
  box-shadow: 0 15px 0 #a8d9d4, 0 24px 45px rgba(8,47,70,.2);
  transition: width 220ms ease-out, height 220ms ease-out, transform 220ms ease-out;
}
.flag-brief > span { position: absolute; top: 14px; color: var(--teal-dark); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.flag-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 116px; line-height: 1; filter: drop-shadow(0 8px 6px rgba(8,47,70,.18)); animation: flag-arrive 420ms cubic-bezier(.2,.9,.2,1); }
.scan-line { position: absolute; left: 24px; right: 24px; height: 2px; background: rgba(16,169,161,.75); box-shadow: 0 0 12px var(--teal); animation: scan 2.4s ease-in-out infinite; }
.hint-chip { position: absolute; z-index: 6; top: 10px; right: 10px; display: flex; gap: 8px; align-items: center; padding: 9px 13px; border: 1px solid #e3c568; border-radius: 999px; background: #fff4bd; box-shadow: 0 6px 16px rgba(66,55,16,.13); font-size: 12px; }
.hint-chip b { color: #795d05; } .hint-chip span { color: #765f22; }
.hint-chip[hidden] { display: none; }

.map-wrap { position: absolute; inset: 7px 2px 0; z-index: 2; opacity: .13; transform: translateY(26px) scale(.96); pointer-events: none; transition: opacity 220ms ease-out, transform 220ms ease-out; }
.world-map { width: 100%; height: 100%; overflow: visible; }
.graticule path { fill: none; stroke: #65b9b7; stroke-width: 1; stroke-dasharray: 5 10; opacity: .45; }
.continents path { fill: #b9ded4; stroke: #2a8581; stroke-width: 3; stroke-linejoin: round; transition: fill 160ms ease-out, opacity 160ms ease-out; }
.continents path.is-highlighted { fill: #ffd765; stroke: #b98500; }
.continents path.is-muted { opacity: .35; }
.continent-labels text { fill: #3e797b; font-size: 13px; font-weight: 900; text-anchor: middle; letter-spacing: .03em; }
.target-layer .map-target { cursor: pointer; outline: none; }
.target-layer .target-ring { fill: rgba(255,255,255,.9); stroke: var(--coral); stroke-width: 5; stroke-dasharray: 5 5; transform-box: fill-box; transform-origin: center; animation: target-pulse 1.7s ease-in-out infinite; }
.target-layer .target-dot { fill: var(--gold); stroke: var(--navy); stroke-width: 3; pointer-events: none; }
.target-layer .map-target:hover .target-ring, .target-layer .map-target:focus .target-ring { fill: #fff3b6; transform: scale(1.18); }
.target-layer .map-target.is-wrong .target-ring { stroke: #d84936; animation: target-shake 260ms ease-out; }
.target-layer .map-target.is-correct .target-ring { fill: #dff7d9; stroke: var(--teal); stroke-dasharray: none; animation: target-pop 400ms ease-out; }
.flight-trail { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 10 12; opacity: 0; }
.flight-trail.is-flying { opacity: .9; animation: trail-draw 700ms ease-out both; }
.travel-pin { position: absolute; z-index: 6; left: 26px; bottom: 28px; width: 52px; height: 52px; border: 4px solid white; border-radius: 50% 50% 50% 8px; background: var(--coral); box-shadow: 0 7px 0 #a83f2b, 0 13px 24px rgba(8,47,70,.22); transform: rotate(-45deg); cursor: grab; }
.travel-pin span { position: absolute; inset: 12px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px rgba(8,47,70,.25); }
.travel-pin:active { cursor: grabbing; }
.map-instruction { position: absolute; right: 24px; bottom: 11px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; }

.stage.is-placing .map-wrap, .stage.is-observing .map-wrap, .stage.is-complete .map-wrap { opacity: 1; transform: none; pointer-events: auto; }
.stage.is-placing .flag-brief, .stage.is-observing .flag-brief, .stage.is-complete .flag-brief { position: absolute; top: 12px; left: 14px; width: 142px; height: 96px; transform: rotate(-2deg); box-shadow: 0 8px 0 #a8d9d4, 0 14px 24px rgba(8,47,70,.15); }
.stage.is-placing .flag-brief > span, .stage.is-observing .flag-brief > span, .stage.is-complete .flag-brief > span { display: none; }
.stage.is-placing .flag-emoji, .stage.is-observing .flag-emoji, .stage.is-complete .flag-emoji { font-size: 58px; }
.stage.is-placing .scan-line, .stage.is-observing .scan-line, .stage.is-complete .scan-line { display: none; }
.stage.is-observing .travel-pin, .stage.is-complete .travel-pin { display: none; }

.passport-card {
  position: absolute;
  z-index: 12;
  right: 25px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 15px;
  width: 355px;
  min-height: 142px;
  padding: 22px 20px 18px;
  border: 2px solid #d5ad3b;
  border-radius: 20px 20px 5px 20px;
  background: #fff7d7;
  box-shadow: 0 16px 38px rgba(33,42,32,.24);
  transform: rotate(1deg);
  animation: passport-pop 430ms cubic-bezier(.2,.9,.25,1);
}
.passport-card[hidden] { display: none; }
.stamp-label { position: absolute; top: 8px; left: 20px; color: #8c6b0b; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.card-flag { align-self: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 48px; }
.passport-card strong { display: block; margin-top: 8px; color: var(--navy); font-size: 23px; }
.passport-card p { margin: 3px 0 7px; color: #5d542f; font-size: 13px; }
.passport-card small { display: block; color: #5d614b; font-size: 11px; line-height: 1.3; }
.passport-stamp { position: absolute; right: 10px; top: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 3px double var(--coral); border-radius: 50%; color: var(--coral); font-size: 23px; font-style: normal; font-weight: 900; transform: rotate(-14deg) scale(1); animation: stamp-thunk 300ms 180ms both; }

.action-area { position: relative; z-index: 20; display: grid; place-items: center; min-height: 68px; margin-top: 8px; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(700px, 100%); }
.choice-grid.has-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice, .primary {
  min-height: 55px;
  border: 2px solid #c9d9d7;
  border-radius: 16px;
  color: var(--ink);
  background: white;
  box-shadow: 0 6px 0 #c9d9d7;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 130ms ease-out, border-color 130ms ease-out, box-shadow 130ms ease-out;
}
.choice:hover, .primary:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 9px 0 #9fd2ce; }
.choice:active, .primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #9fd2ce; }
.choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.primary { min-width: 240px; padding: 0 25px; border-color: var(--teal); color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); }
.primary:hover { border-color: var(--teal); box-shadow: 0 9px 0 var(--teal-dark); }
.feedback { min-height: 22px; margin: 4px 0 0; color: var(--coral); text-align: center; font-size: 13px; font-weight: 900; }
.feedback.is-good { color: var(--teal-dark); }

.captain-card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.mute { position: absolute; z-index: 20; top: 13px; right: 13px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(8,47,70,.14); border-radius: 50%; color: var(--navy); background: rgba(255,255,255,.9); cursor: pointer; }
.mute svg { width: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mute .sound-off, .mute[aria-pressed="true"] .sound-on { display: none; }
.mute[aria-pressed="true"] .sound-off { display: block; }
.mascot-stage { position: relative; height: 285px; flex: 0 0 285px; overflow: hidden; background: radial-gradient(circle at 50% 58%, #e2faf4, transparent 66%); }
.mascot-stage img { position: absolute; left: 15px; bottom: -74px; width: 250px; height: 250px; object-fit: contain; filter: drop-shadow(0 13px 12px rgba(8,47,70,.22)); transition: transform 170ms ease-out; }
.mascot-stage img[hidden] { display: none; }
.mascot-stage.is-encouraging img { animation: mascot-nudge 360ms ease-out; }
.mascot-stage.is-celebrating img { bottom: -25px; animation: mascot-hop 620ms cubic-bezier(.2,.8,.25,1); }
.speech { position: absolute; z-index: 5; top: 21px; left: 18px; width: 185px; padding: 11px 14px; border: 2px solid #c7e6df; border-radius: 16px 16px 16px 4px; background: white; box-shadow: 0 7px 17px rgba(8,47,70,.1); }
.speech b { display: block; color: var(--teal-dark); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.speech span { display: block; margin-top: 2px; color: var(--navy); font-size: 13px; font-weight: 800; line-height: 1.2; }
.passport-book { position: relative; flex: 1; min-height: 0; padding: 23px 20px 16px; border-top: 3px solid #d2ad46; background: #0b4160; color: white; overflow: hidden; }
.book-title span { display: block; color: #9dd9d4; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.book-title strong { display: block; margin-top: 3px; font-size: 20px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 17px 0 13px; }
.stats div { padding: 9px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.07); }
.stats span { display: block; color: #a9cfda; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.stats strong { display: block; margin-top: 1px; font-size: 23px; }
.stamp-rack { display: flex; flex-wrap: wrap; gap: 7px; min-height: 54px; padding: 11px; border: 1px dashed rgba(255,255,255,.22); border-radius: 13px; }
.stamp-rack i { display: grid; place-items: center; width: 31px; height: 31px; border: 2px double var(--gold); border-radius: 50%; color: var(--gold); font-size: 10px; font-style: normal; font-weight: 900; transform: rotate(var(--turn, -5deg)); }
.stamp-rack:empty::before { content: "New stamps land here"; align-self: center; color: #8fb5c1; font-size: 11px; }
.difficulty-block { position: relative; z-index: 3; margin-top: 14px; }
.difficulty-block > div:first-child { display: flex; align-items: end; justify-content: space-between; }
.difficulty-block span { color: #9dd9d4; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.difficulty-track { height: 8px; margin: 7px 0; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.14); }
.difficulty-track i { display: block; width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--gold), var(--coral)); transition: width 260ms ease-out; }
.difficulty-block p { margin: 0; color: #bad3dc; font-size: 10px; }
.travel-props { position: absolute; right: -38px; bottom: -55px; width: 165px; opacity: .16; transform: rotate(-6deg); pointer-events: none; }

.toast { position: fixed; left: 50%; bottom: 20px; z-index: 40; padding: 11px 19px; border-radius: 999px; color: white; background: var(--navy); box-shadow: 0 9px 25px rgba(0,0,0,.25); font-size: 13px; font-weight: 900; opacity: 0; transform: translate(-50%, 14px); transition: 170ms ease-out; pointer-events: none; }
.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; z-index: 50; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; left: var(--x); top: -20px; width: 11px; height: 20px; border-radius: 3px; background: var(--c); animation: confetti-fall 850ms cubic-bezier(.2,.7,.35,1) forwards; animation-delay: var(--delay); }

button:focus-visible, .travel-pin:focus-visible, .map-target:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }

@keyframes flag-arrive { from { opacity: 0; transform: scale(.55) rotate(-7deg); } 70% { transform: scale(1.08) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes scan { 0%, 100% { top: 58px; opacity: .2; } 50% { top: 200px; opacity: 1; } }
@keyframes target-pulse { 50% { transform: scale(1.14); opacity: .75; } }
@keyframes target-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes target-pop { 50% { transform: scale(1.45); } }
@keyframes passport-pop { from { opacity: 0; transform: translateY(25px) scale(.75) rotate(-4deg); } to { opacity: 1; transform: rotate(1deg); } }
@keyframes stamp-thunk { from { opacity: 0; transform: rotate(-14deg) scale(2.4); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
@keyframes mascot-nudge { 25% { transform: rotate(-4deg); } 70% { transform: rotate(4deg); } }
@keyframes mascot-hop { 0% { transform: translateY(45px) scale(.8); } 55% { transform: translateY(-12px) scale(1.05); } 100% { transform: none; } }
@keyframes trail-draw { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(620deg); opacity: .2; } }

@media (max-height: 760px) {
  .game { height: calc(100vh - 20px); }
  .play-card { grid-template-rows: auto minmax(340px, 1fr) auto 20px; padding-top: 18px; }
  .mascot-stage { height: 225px; flex-basis: 225px; }
  .mascot-stage img { bottom: -80px; }
  .passport-card { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .confetti { display: none; }
}