:root {
  color-scheme: dark;
  --deep: #062f3c;
  --navy: #073b4c;
  --sea: #0c8996;
  --foam: #e9fffb;
  --paper: #fff4cc;
  --ink: #213b45;
  --gold: #ffc44d;
  --gold-dark: #9b5b12;
  --coral: #f5655b;
  --mint: #58d6c7;
  --line: rgba(18, 87, 96, .25);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 1100px; height: 100%; min-height: 720px; margin: 0; overflow: hidden; }
body { color: white; background: var(--deep); font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
button { color: inherit; font: inherit; cursor: pointer; }
button:focus-visible, [role="button"]:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
.lesson, .world { width: 100%; height: 100%; }
.world { position: relative; overflow: hidden; background: linear-gradient(rgba(3, 44, 58, .18), rgba(3, 44, 58, .36)), url("art/treasure-ocean-01.webp") center / cover no-repeat; }
.world::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 54% 52%, transparent 20%, rgba(3, 38, 50, .22) 82%), linear-gradient(180deg, rgba(5, 52, 66, .22), transparent 26%); pointer-events: none; }

.quest-hud { position: absolute; z-index: 20; left: 26px; right: 26px; top: 20px; height: 72px; display: grid; grid-template-columns: 208px 1fr auto auto; align-items: center; gap: 18px; }
.mission-card, .map-track, .difficulty-card, .scoreboard { border: 2px solid rgba(255, 239, 174, .72); background: linear-gradient(180deg, rgba(7, 59, 76, .94), rgba(4, 39, 51, .96)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px 0 rgba(3, 32, 40, .7), 0 14px 30px rgba(0, 25, 35, .25); backdrop-filter: blur(8px); }
.mission-card { height: 68px; display: grid; align-content: center; padding: 10px 17px; border-radius: 18px; }
.mission-card span { color: #aef7ed; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.mission-card strong { margin-top: 2px; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 20px; }
.map-track { height: 56px; min-width: 322px; display: flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 999px; }
.map-track i { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 2px solid #7dbab5; border-radius: 50%; color: #a8d9d4; background: #0a4a5b; font-style: normal; font-weight: 900; transition: transform 170ms ease-out, background 170ms ease-out; }
.map-track b { width: 38px; height: 3px; background: #478e8e; }
.map-track i.is-current { transform: scale(1.16) rotate(-4deg); border-color: #fff1ad; color: #3a280b; background: var(--gold); box-shadow: 0 0 0 6px rgba(255, 196, 77, .18), 0 0 22px rgba(255, 202, 80, .55); }
.map-track i.is-complete { border-color: #c5fff7; color: white; background: var(--sea); }
.map-track i.is-complete { font-size: 0; }.map-track i.is-complete::after { content: "✓"; font-size: 17px; }
.difficulty-card { width: 230px; height: 64px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-content: center; padding: 8px 14px; border-radius: 18px; }
.difficulty-card span { font-size: 11px; }.difficulty-card span b { color: var(--gold); font-size: 15px; }
.difficulty-card > i { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #062d3a; }
.difficulty-card > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--gold), var(--coral)); transition: width 220ms ease-out; }
.difficulty-card > strong { grid-column: 1 / -1; overflow: hidden; color: #c8f7f1; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.scoreboard { height: 68px; display: flex; align-items: stretch; padding: 6px; border-radius: 18px; }
.scoreboard > div { min-width: 73px; display: grid; place-content: center; padding: 0 10px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid rgba(207, 255, 248, .2); }
.scoreboard span { color: #b7e9e4; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.scoreboard strong { margin-top: 2px; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 20px; line-height: 1; }

.game-shell { position: absolute; z-index: 3; left: 26px; right: 26px; top: 110px; bottom: 22px; display: grid; grid-template-columns: 250px minmax(780px, 1fr); gap: 18px; }
.mascot-zone { position: relative; display: flex; align-items: end; justify-content: center; min-width: 0; }
.mascot { z-index: 3; width: 270px; max-width: 116%; max-height: 78%; object-fit: contain; object-position: bottom; transform-origin: 50% 88%; filter: drop-shadow(0 16px 12px rgba(0, 28, 36, .48)); }
.speech { position: absolute; z-index: 6; left: 0; right: 0; top: 7%; min-height: 76px; display: grid; place-items: center; padding: 14px 16px; border: 3px solid #7b4b16; border-radius: 22px 22px 22px 7px; color: var(--ink); background: #fff5cc; box-shadow: inset 0 1px white, 0 6px 0 rgba(82, 46, 10, .7), 0 14px 24px rgba(0, 29, 38, .25); font-size: 15px; font-weight: 900; line-height: 1.25; text-align: center; }
.speech::after { position: absolute; left: 34px; bottom: -14px; width: 23px; height: 23px; content: ""; transform: rotate(45deg); border-right: 3px solid #7b4b16; border-bottom: 3px solid #7b4b16; background: #fff5cc; }
.compass-dial { position: absolute; z-index: 2; right: -6px; bottom: -8px; width: 112px; height: 112px; display: grid; place-items: center; border: 6px solid #d98d22; border-radius: 50%; color: var(--gold); background: radial-gradient(circle, #0b5665 0 46%, #063845 47%); box-shadow: inset 0 0 0 3px #ffd572, 0 8px 0 #73440f, 0 12px 24px rgba(0, 25, 35, .35); }
.compass-dial::before, .compass-dial::after { position: absolute; width: 4px; height: 86px; content: ""; background: rgba(255,255,255,.2); }.compass-dial::after { transform: rotate(90deg); }
.compass-dial i { position: absolute; top: 7px; font-size: 11px; font-style: normal; }.compass-dial b { width: 4px; height: 58px; transform: rotate(28deg); border-radius: 5px; background: linear-gradient(var(--coral) 0 50%, #dffcff 50%); box-shadow: 0 0 8px rgba(255,255,255,.4); }.compass-dial span { position: absolute; font-size: 14px; }

.chart-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(430px, 1fr) 36px 76px; gap: 8px; padding: 18px 20px 16px; border: 3px solid rgba(123, 75, 22, .92); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 247, 210, .97), rgba(239, 218, 158, .96)); box-shadow: inset 0 0 0 5px rgba(255,255,255,.32), 0 9px 0 rgba(75, 43, 10, .72), 0 22px 45px rgba(0, 29, 38, .3); }
.challenge-copy { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--ink); }
.challenge-copy > div:first-child { min-width: 0; }
.challenge-copy span { color: #9b5814; font-size: 10px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.challenge-copy h1 { margin: 3px 0 2px; color: #073b4c; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.challenge-copy p { max-width: 670px; margin: 0; color: #466269; font-size: 14px; line-height: 1.35; }
.coordinate-log { flex: 0 0 auto; min-width: 146px; padding: 10px 14px; transform: rotate(1.5deg); border: 2px dashed #b87b2b; border-radius: 14px; background: #fff8dc; box-shadow: 0 4px 0 #c89a4f; text-align: center; }
.coordinate-log span { display: block; font-size: 8px; }.coordinate-log strong { color: #0a6070; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 25px; }

.chart-stage { position: relative; min-height: 430px; overflow: hidden; border: 3px solid #76511d; border-radius: 23px; background: linear-gradient(rgba(2, 91, 105, .1), rgba(2, 91, 105, .03)), #f6e8b9; box-shadow: inset 0 0 36px rgba(99, 67, 19, .26), 0 5px 0 #593813; }
#coordinateGrid { width: 100%; height: 100%; display: block; }
.chart-paper { fill: rgba(255, 250, 220, .86); stroke: rgba(127, 79, 20, .38); stroke-width: 3; stroke-dasharray: 7 8; }
.grid-line { stroke: rgba(15, 104, 111, .24); stroke-width: 2; }.grid-line.axis { stroke: #145f69; stroke-width: 4; }
.axis-arrow { fill: none; stroke: #145f69; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.axis-label { fill: #395e61; font: 800 15px system-ui, sans-serif; }.origin { fill: var(--gold); stroke: #7d4a11; stroke-width: 4; filter: url(#glow); }.origin-label { fill: #8b4b0c; font: 1000 10px system-ui, sans-serif; letter-spacing: .1em; }
.route { fill: none; stroke: var(--coral); stroke-width: 7; stroke-dasharray: 12 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 0 rgba(113,45,28,.3)); animation: chart-route 700ms ease-out both; }
.shown-marker circle { fill: #fff2a3; stroke: #d74c43; stroke-width: 6; filter: url(#glow); }.shown-marker path { fill: none; stroke: #d74c43; stroke-width: 7; stroke-linecap: round; }
.miss-marker circle { fill: rgba(255,255,255,.7); stroke: #a94043; stroke-width: 3; }.miss-marker path { stroke: #a94043; stroke-width: 5; stroke-linecap: round; }
.point-hit { fill: transparent; stroke: transparent; stroke-width: 3; cursor: crosshair; transition: fill 120ms ease-out, stroke 120ms ease-out, r 120ms ease-out; }
.point-hit:hover, .point-hit:focus { fill: rgba(245, 101, 91, .25); stroke: var(--coral); }
.ship-marker { pointer-events: none; filter: drop-shadow(0 7px 5px rgba(0, 48, 57, .4)); animation: ship-pop 420ms cubic-bezier(.2,.8,.2,1.3) both; }
.axis-badge { position: absolute; z-index: 6; padding: 7px 11px; border: 2px solid #80531a; border-radius: 999px; color: #4a3516; background: #ffe68a; box-shadow: 0 3px 0 #a76b20; font-size: 10px; font-weight: 1000; pointer-events: none; }.axis-x { right: 14px; bottom: 12px; }.axis-y { left: 13px; top: 12px; transform: rotate(-2deg); }
.coordinate-readout { position: absolute; z-index: 7; left: 50%; bottom: 10px; min-width: 146px; padding: 7px 13px; transform: translateX(-50%); border: 2px solid #0b5a67; border-radius: 999px; color: white; background: rgba(5, 62, 73, .92); box-shadow: 0 3px 0 rgba(2,34,42,.7); font-size: 11px; font-weight: 900; text-align: center; pointer-events: none; }
.treasure-reveal { position: absolute; z-index: 9; right: 3%; bottom: 3%; width: 175px; height: 175px; opacity: 0; transform: translateY(30px) scale(.35) rotate(8deg); object-fit: contain; filter: drop-shadow(0 0 22px rgba(255, 196, 55, .85)); pointer-events: none; }.treasure-reveal.is-visible { opacity: 1; animation: treasure-pop 680ms cubic-bezier(.16,.85,.25,1.32) both; }
.burst { position: absolute; z-index: 8; right: 15%; bottom: 20%; pointer-events: none; }.burst i { position: absolute; width: 13px; height: 13px; opacity: 0; background: var(--gold); clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); }.burst i:nth-child(2n) { background: var(--coral); }.burst i:nth-child(3n) { background: #fff; }

.feedback { min-height: 36px; display: grid; place-items: center; color: #266069; font-size: 13px; font-weight: 900; text-align: center; }.feedback.is-error { color: #a9383c; }
.action-area { min-height: 76px; display: flex; align-items: end; justify-content: center; }
.prediction-grid, .coordinate-choices, .explain-grid { width: min(820px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choice, .coordinate-choice, .primary { position: relative; min-height: 62px; border: 2px solid #0c6772; border-radius: 16px; color: white; background: linear-gradient(180deg, #13899a, #096371); box-shadow: inset 0 2px rgba(255,255,255,.2), 0 6px 0 #06414b; font-weight: 1000; transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out; }
.choice small { display: block; margin-top: 3px; color: #c6f5ef; font-size: 10px; }.coordinate-choice { color: #fff5bf; font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; font-size: 25px; }
.choice:hover, .coordinate-choice:hover, .primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 2px rgba(255,255,255,.2), 0 8px 0 #06414b; }.choice:active, .coordinate-choice:active, .primary:active { transform: translateY(4px); box-shadow: inset 0 2px rgba(255,255,255,.2), 0 2px 0 #06414b; }
.primary { min-width: 280px; padding: 0 28px; border-color: #fff0a1; color: #3e280d; background: linear-gradient(180deg, #ffe889, #f2ad2c); box-shadow: inset 0 2px white, 0 6px 0 #8d5112; font-size: 16px; }.primary:hover { box-shadow: inset 0 2px white, 0 8px 0 #8d5112; }.primary:active { box-shadow: inset 0 2px white, 0 2px 0 #8d5112; }.primary.is-coral { border-color: #ffc4ae; color: white; background: linear-gradient(180deg, #ff7668, #d94b47); box-shadow: inset 0 2px rgba(255,255,255,.3), 0 6px 0 #8c292d; }
.action-hint { min-width: 320px; padding: 14px 24px; border: 2px dashed #a46f23; border-radius: 16px; color: #6b471b; background: rgba(255, 247, 208, .76); font-size: 14px; font-weight: 1000; text-align: center; }.action-hint::before { content: "◎ "; color: var(--coral); font-size: 18px; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 32px; max-width: 70%; padding: 11px 20px; opacity: 0; transform: translate(-50%, 13px); border: 2px solid #fff0a1; border-radius: 999px; color: #35220a; background: #ffd761; box-shadow: 0 5px 0 #75410c, 0 12px 25px rgba(0,26,35,.35); pointer-events: none; font-size: 13px; font-weight: 1000; transition: opacity 150ms ease-out, transform 150ms ease-out; }.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.mascot-zone.is-cheering .mascot { animation: mascot-cheer 650ms ease-out; }.mascot-zone.is-oops .mascot { animation: mascot-oops 420ms ease-out; }
.world.is-miss .chart-panel { animation: gentle-shake 390ms ease-out; }.world.is-celebrating .chart-panel { box-shadow: inset 0 0 0 5px rgba(255,255,255,.32), 0 9px 0 rgba(75,43,10,.72), 0 0 60px rgba(255,215,79,.66); }
.world.is-celebrating .burst i { animation: sparkle-burst 760ms ease-out both; }
.burst i:nth-child(1) { --x: -100px; --y: -65px; }.burst i:nth-child(2) { --x: -38px; --y: -110px; animation-delay: 40ms !important; }.burst i:nth-child(3) { --x: 45px; --y: -105px; animation-delay: 80ms !important; }.burst i:nth-child(4) { --x: 104px; --y: -42px; animation-delay: 30ms !important; }.burst i:nth-child(5) { --x: 98px; --y: 48px; animation-delay: 90ms !important; }.burst i:nth-child(6) { --x: 20px; --y: 92px; animation-delay: 55ms !important; }.burst i:nth-child(7) { --x: -72px; --y: 74px; animation-delay: 100ms !important; }.burst i:nth-child(8) { --x: -118px; --y: 8px; animation-delay: 20ms !important; }

@keyframes chart-route { from { stroke-dashoffset: 210; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ship-pop { from { opacity: 0; transform: translateY(18px) scale(.55) rotate(-8deg); } 70% { transform: translateY(-4px) scale(1.08) rotate(2deg); } }
@keyframes treasure-pop { 0% { opacity: 0; transform: translateY(34px) scale(.3) rotate(10deg); } 62% { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes mascot-cheer { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-22px) rotate(-4deg) scale(1.04); } 66% { transform: translateY(-5px) rotate(3deg); } }
@keyframes mascot-oops { 0%,100% { transform: rotate(0); } 28% { transform: rotate(-5deg) translateX(-5px); } 65% { transform: rotate(4deg) translateX(5px); } }
@keyframes gentle-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 52% { transform: translateX(5px); } 76% { transform: translateX(-3px); } }
@keyframes sparkle-burst { 0% { opacity: 1; transform: translate(0,0) rotate(0) scale(.2); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(190deg) scale(1.25); } }

@media (max-width: 1200px) {
  .quest-hud { grid-template-columns: 190px 1fr auto; }.difficulty-card { position: absolute; left: 190px; top: 76px; }.map-track { min-width: 280px; }.map-track b { width: 27px; }.game-shell { grid-template-columns: 210px minmax(780px,1fr); }.mascot { width: 235px; }.speech { font-size: 13px; }
}
@media (max-height: 760px) {
  .quest-hud { top: 12px; height: 62px; }.mission-card, .scoreboard { height: 60px; }.game-shell { top: 86px; bottom: 14px; }.chart-panel { grid-template-rows: auto minmax(380px,1fr) 30px 66px; padding-top: 12px; }.challenge-copy { min-height: 66px; }.challenge-copy h1 { font-size: 29px; }.chart-stage { min-height: 380px; }.speech { top: 3%; }.choice, .coordinate-choice, .primary { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}