:root {
  color-scheme: light;
  --ink: #173f3d;
  --muted: #61766e;
  --teal: #07847f;
  --teal-dark: #075c59;
  --teal-soft: #e5f5ef;
  --gold: #f4b62f;
  --gold-dark: #a96708;
  --coral: #e96745;
  --paper: #fffdf5;
  --line: #c8d6c8;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: #e9f3df; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid rgba(7,132,127,.3); outline-offset: 4px; }

.game { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 1050px; min-height: 680px; overflow: hidden; isolation: isolate; }
.world-art { position: absolute; z-index: -5; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); object-fit: cover; filter: saturate(.8) blur(1.5px); transform: scale(1.015); }
.world-wash { position: absolute; z-index: -4; inset: 0; background: linear-gradient(105deg,rgba(236,246,227,.92),rgba(255,248,218,.58) 50%,rgba(228,242,222,.9)); }
.world-wash::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 52% 50%,rgba(255,255,255,.15),rgba(238,247,227,.65) 76%); }

.mission-hud { position: absolute; z-index: 15; top: 24px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.map-chip, .practice-stats { border: 1px solid rgba(23,63,61,.08); background: rgba(255,253,245,.88); box-shadow: 0 9px 30px rgba(35,73,55,.1); backdrop-filter: blur(12px); }
.map-chip { display: grid; gap: 3px; min-width: 168px; padding: 10px 15px; border-radius: 16px; }
.map-chip span, .practice-stats span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.map-chip strong { font-size: 14px; }
.practice-stats { display: flex; gap: 2px; padding: 7px; border-radius: 18px; }
.practice-stats > div { min-width: 62px; padding: 5px 10px; text-align: center; }
.practice-stats > div + div { border-left: 1px solid rgba(42,86,69,.1); }
.practice-stats strong { display: block; margin-top: 2px; font-size: 20px; line-height: 1; }
.practice-stats .difficulty-stat { width: 135px; text-align: left; }
.difficulty-stat span { display: flex; justify-content: space-between; }
.difficulty-stat i { display: block; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #dbe7da; }
.difficulty-stat i b { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--teal),var(--gold)); transition: width 220ms ease-out; }

.play-surface { position: relative; z-index: 3; width: min(780px,calc(100% - 470px)); min-width: 720px; height: min(790px,calc(100% - 90px)); min-height: 630px; display: grid; grid-template-rows: auto minmax(410px,1fr) auto auto; padding: 27px 48px 25px; border: 1px solid rgba(217,223,197,.9); border-radius: 34px; background: rgba(255,253,245,.965); box-shadow: 0 28px 80px rgba(46,72,43,.16), inset 0 2px rgba(255,255,255,.8); backdrop-filter: blur(18px); }
.mission-copy { max-width: 650px; margin: 0 auto 4px; text-align: center; }
.phase-label { color: var(--coral); font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 5px 0 0; font-size: clamp(27px,2.5vw,38px); font-weight: 950; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
h1 strong { color: var(--teal-dark); }
.mission-copy p { min-height: 22px; margin: 7px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; }

.grid-shell { position: relative; min-height: 0; display: grid; place-items: center; padding: 2px 0 0; }
.coordinate-grid { display: block; width: min(100%,550px); height: min(100%,550px); min-height: 400px; overflow: visible; filter: drop-shadow(0 9px 12px rgba(68,77,43,.11)); }
.map-paper { fill: #fffaf0; stroke: #dacda8; stroke-width: 4; }
.grid-line { stroke: #cfdbc9; stroke-width: 2; }
.grid-line.major { stroke: #b5c6b8; stroke-width: 2.5; }
.axis-line { stroke: #245b58; stroke-width: 5; stroke-linecap: round; }
.axis-arrow { fill: #245b58; }
.tick-label { fill: #4d6862; font-size: 18px; font-weight: 800; text-anchor: middle; }
.tick-label.y { text-anchor: end; dominant-baseline: middle; }
.axis-name { fill: var(--teal-dark); font-size: 23px; font-weight: 950; }
.origin-ring { fill: #fffdf5; stroke: var(--gold-dark); stroke-width: 5; }
.origin-dot { fill: var(--gold); }
.point-hit { fill: transparent; cursor: crosshair; }
.point-dot { fill: #6b9084; opacity: .42; pointer-events: none; transition: opacity 120ms ease-out, transform 120ms ease-out, fill 120ms ease-out; transform-box: fill-box; transform-origin: center; }
.grid-point:hover .point-dot, .grid-point:focus .point-dot { fill: var(--teal); opacity: 1; transform: scale(1.7); }
.grid-point.is-selected .point-dot { fill: var(--coral); opacity: 1; transform: scale(1.65); }
.route-x, .route-y { fill: none; stroke: var(--coral); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 12 11; }
.route-y { stroke: var(--gold-dark); }
.route-label { fill: #8a4b24; font-size: 18px; font-weight: 950; paint-order: stroke; stroke: #fffaf0; stroke-width: 6; stroke-linejoin: round; }
.marked-halo { fill: rgba(7,132,127,.13); stroke: var(--teal); stroke-width: 4; stroke-dasharray: 8 7; }
.marked-pin { fill: var(--teal); stroke: #fffdf5; stroke-width: 5; }
.picture-line { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.picture-node { fill: var(--gold); stroke: #fffdf5; stroke-width: 4; }
.flag-pole { stroke: #704c24; stroke-width: 7; stroke-linecap: round; }
.flag-cloth { fill: var(--coral); stroke: #9f3b27; stroke-width: 3; }
.flag-star { fill: #fff8d9; font-size: 19px; font-weight: 950; text-anchor: middle; }
.success-ring { fill: none; stroke: var(--gold); stroke-width: 7; }
.success-mark { animation: flagDrop 420ms cubic-bezier(.18,.9,.28,1.22); transform-box: fill-box; transform-origin: center bottom; }
.success-ring { animation: treasurePulse 700ms ease-out; transform-box: fill-box; transform-origin: center; }
.grid-readout { position: absolute; left: 50%; bottom: 7px; min-width: 128px; padding: 6px 12px; border: 1px solid #d8dfcc; border-radius: 999px; color: var(--muted); background: rgba(255,253,245,.96); box-shadow: 0 5px 13px rgba(50,78,53,.09); font-size: 11px; font-weight: 850; text-align: center; transform: translateX(-50%); }
.spark-burst { position: absolute; left: 50%; top: 50%; color: var(--gold); font-size: 72px; opacity: 0; pointer-events: none; text-shadow: 0 8px 25px rgba(210,135,11,.25); transform: translate(-50%,-50%) scale(.35); }
.spark-burst.is-showing { animation: sparkPop 520ms ease-out; }

.action-area { min-height: 62px; max-width: 610px; width: 100%; margin: 1px auto 0; }
.choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.choice, .primary { min-height: 56px; border-radius: 16px; font-weight: 900; cursor: pointer; transition: transform 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out; }
.choice { padding: 10px 14px; border: 2px solid #d9e1d4; background: #fff; box-shadow: 0 5px 0 #d5dfd1; font-size: 18px; }
.choice:hover { border-color: #86bdb0; background: var(--teal-soft); transform: translateY(-2px); box-shadow: 0 7px 0 #cbdcd4; }
.choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #cbdcd4; }
.primary { display: flex; align-items: center; justify-content: center; width: min(360px,100%); margin: 0 auto; padding: 12px 19px; color: #fff; border: 1px solid #066c68; background: linear-gradient(180deg,#12a19a,var(--teal)); box-shadow: 0 6px 0 var(--teal-dark), 0 13px 27px rgba(7,132,127,.18); font-size: 16px; }
.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark), 0 15px 29px rgba(7,132,127,.21); }
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }
.primary.is-gold { color: #4e3508; border-color: #c38311; background: linear-gradient(180deg,#ffd65f,var(--gold)); box-shadow: 0 6px 0 #ad6c0b, 0 13px 27px rgba(188,119,12,.18); }
.feedback { min-height: 19px; margin: 8px 0 0; color: var(--coral); font-size: 13px; font-weight: 850; text-align: center; }
.play-surface.is-miss { animation: gentleShake 320ms ease-out; }

.mascot { position: absolute; z-index: 5; left: max(20px,calc(50% - 685px)); bottom: 42px; width: 215px; pointer-events: none; transform-origin: 50% 100%; }
.sticker-art, .sticker-prop { overflow: hidden; padding: 7px; border: 1px solid rgba(34,73,52,.11); border-radius: 27px; background: #fff; box-shadow: 0 13px 31px rgba(37,68,45,.16); }
.sticker-art img, .sticker-prop img { display: block; width: 100%; border-radius: 20px; }
.mascot p { position: absolute; top: 8px; left: 155px; width: 155px; margin: 0; padding: 11px 13px; border-radius: 16px 16px 16px 5px; color: var(--teal-dark); background: rgba(255,255,255,.95); box-shadow: 0 10px 25px rgba(38,72,48,.12); font-size: 12px; font-weight: 850; line-height: 1.3; }
.mascot.is-happy { animation: mascotPop 600ms cubic-bezier(.2,.85,.25,1.2); }
.mascot.is-sad { animation: mascotNudge 360ms ease-out; }
.compass-art, .chest-art { position: absolute; z-index: 1; pointer-events: none; }
.compass-art { right: max(30px,calc(50% - 675px)); top: 102px; width: 142px; opacity: .72; transform: rotate(4deg); }
.chest-art { right: max(16px,calc(50% - 700px)); bottom: 45px; width: 195px; transform: rotate(-2deg); transition: transform 180ms ease-out; }
.chest-art.is-open { animation: chestBounce 620ms cubic-bezier(.18,.9,.25,1.2); }

.toast { position: absolute; z-index: 50; top: 24px; left: 50%; max-width: 430px; padding: 11px 18px; border-radius: 999px; color: #fff; background: #173f3d; box-shadow: 0 15px 35px rgba(24,62,56,.2); font-size: 13px; font-weight: 850; opacity: 0; pointer-events: none; transform: translate(-50%,-12px) scale(.96); transition: opacity 180ms ease-out, transform 180ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0) scale(1); }
.celebration { position: absolute; z-index: 45; inset: 0; overflow: hidden; pointer-events: none; }
.celebration i { position: absolute; top: 52%; left: 50%; color: var(--gold); font-style: normal; font-size: 25px; opacity: 0; }
.celebration.is-showing i { animation: confetti 850ms cubic-bezier(.15,.72,.25,1) forwards; }
.celebration i:nth-child(1){--x:-310px;--y:-245px}.celebration i:nth-child(2){--x:-240px;--y:-290px;color:var(--teal)}.celebration i:nth-child(3){--x:-165px;--y:-250px;color:var(--coral)}.celebration i:nth-child(4){--x:-85px;--y:-310px}.celebration i:nth-child(5){--x:25px;--y:-275px;color:var(--teal)}.celebration i:nth-child(6){--x:120px;--y:-320px;color:var(--coral)}.celebration i:nth-child(7){--x:195px;--y:-255px}.celebration i:nth-child(8){--x:275px;--y:-290px;color:var(--teal)}.celebration i:nth-child(9){--x:335px;--y:-220px;color:var(--coral)}.celebration i:nth-child(10){--x:70px;--y:-235px}

@keyframes gentleShake { 0%,100%{transform:translateX(0)} 28%{transform:translateX(-7px) rotate(-.2deg)} 68%{transform:translateX(6px) rotate(.2deg)} }
@keyframes mascotPop { 0%,100%{transform:translateY(0) rotate(0)} 35%{transform:translateY(-18px) rotate(-3deg)} 64%{transform:translateY(0) rotate(2deg)} }
@keyframes mascotNudge { 35%{transform:rotate(-4deg)} 72%{transform:rotate(3deg)} }
@keyframes chestBounce { 35%{transform:translateY(-13px) rotate(2deg) scale(1.04)} 70%{transform:translateY(0) rotate(-3deg)} }
@keyframes flagDrop { from{opacity:0;transform:translateY(-45px) scale(.75)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes treasurePulse { from{opacity:1;transform:scale(.25)} to{opacity:0;transform:scale(2.1)} }
@keyframes sparkPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-15deg)} 42%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(8deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(18deg)} }
@keyframes confetti { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 12%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(480deg) scale(1.1)} }

@media (max-width: 1220px) {
  .play-surface { width: min(740px,calc(100% - 340px)); min-width: 700px; padding-inline: 38px; }
  .mascot { left: 16px; width: 145px; }
  .mascot p { left: 82px; top: -38px; width: 145px; border-radius: 16px 16px 16px 5px; }
  .chest-art { right: 14px; width: 138px; }
  .compass-art { display: none; }
}

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