:root {
  color-scheme: light;
  --ink: #173a3c;
  --muted: #617476;
  --paper: #fffdf5;
  --teal: #167c75;
  --teal-dark: #0b514d;
  --coral: #e86d45;
  --coral-dark: #9b3f28;
  --gold: #f4bd49;
  --sand: #c88a49;
  --sand-dark: #7c4d2c;
  --bone: #fff1c6;
  font-family: "Avenir Next", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 880px; min-height: 650px; overflow: hidden; }
body { margin: 0; color: var(--ink); background: #d9edf0; }
button { color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 4px solid #096e91; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.lesson { width: 100%; height: 100%; padding: 14px; }
.dig-world { position: relative; width: min(1380px,100%); height: 100%; min-height: 620px; margin: auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(43,77,72,.18); border-radius: 28px; background: #f1d4a1; box-shadow: 0 9px 0 rgba(56,96,92,.13),0 27px 60px rgba(42,73,69,.18); }
.world-art { position: absolute; z-index: -4; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.76) contrast(.86) brightness(1.04); transform: scale(1.01); }
.world-wash { position: absolute; z-index: -3; inset: 0; background: linear-gradient(180deg,rgba(236,249,249,.28),rgba(255,246,221,.48) 46%,rgba(229,213,178,.72)); }
.world-wash::after { position: absolute; inset: 0; content: ""; background: radial-gradient(ellipse at 58% 45%,rgba(255,255,255,.04) 0 31%,rgba(255,253,242,.57) 78%,rgba(255,253,242,.75)); }

.field-hud { position: absolute; z-index: 30; left: 22px; right: 22px; top: 18px; height: 62px; display: grid; grid-template-columns: 178px 1fr minmax(0,330px) auto; align-items: center; gap: 16px; }
.mission-chip,.practice-meter,.scoreboard { border: 1px solid rgba(27,72,69,.16); background: rgba(255,253,245,.92); box-shadow: 0 5px 18px rgba(31,67,61,.1); backdrop-filter: blur(10px); }
.mission-chip { height: 58px; display: flex; flex-direction: column; justify-content: center; padding: 8px 15px; border-radius: 16px; }
.mission-chip span,.scoreboard span,.practice-meter span { color: var(--muted); font-size: 9px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.mission-chip strong { margin-top: 2px; font-size: 16px; }
.campaign-dots { justify-self: center; display: flex; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,253,245,.74); }
.campaign-dots i { width: 13px; height: 13px; border: 2px solid #bcae91; border-radius: 50%; background: #eee5d2; transition: transform 160ms ease-out,background 160ms ease-out; }
.campaign-dots i.done { border-color: var(--teal-dark); background: var(--teal); }
.campaign-dots i.current { transform: scale(1.25); border-color: var(--coral-dark); background: var(--coral); box-shadow: 0 0 0 5px rgba(232,109,69,.12); }
.practice-meter { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 9px 13px; border-radius: 15px; }
.practice-meter > i { grid-column: 1/-1; height: 7px; overflow: hidden; border-radius: 999px; background: #dce5df; }
.practice-meter > i b { display: block; width: 16%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--coral)); transition: width 220ms ease-out; }
.practice-meter strong { font-size: 11px; }
.scoreboard { height: 58px; display: flex; align-items: stretch; padding: 6px; border-radius: 16px; }
.scoreboard > div { min-width: 61px; display: grid; place-content: center; padding: 0 9px; text-align: center; }
.scoreboard > div + div { border-left: 1px solid #ddd8c8; }
.scoreboard strong { display: block; margin-top: 1px; font-size: 20px; line-height: 1; }
.dig-world:not(.is-practice-mode) .scoreboard > div:nth-child(n+2) { display: none; }

.mission-card { position: absolute; z-index: 5; left: 230px; right: 24px; top: 96px; bottom: 23px; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: 20px 24px 18px; border: 1px solid rgba(92,73,45,.17); border-radius: 25px; background: rgba(255,253,245,.94); box-shadow: 0 9px 0 rgba(78,83,55,.11),0 24px 48px rgba(61,68,45,.16); backdrop-filter: blur(12px); }
.mission-copy { text-align: center; }
.mission-copy > span { color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.mission-copy h1 { margin: 5px 0 3px; font-size: clamp(25px,2.6vw,37px); line-height: 1; letter-spacing: -.04em; }
.mission-copy p { margin: 0; color: var(--muted); font-size: 12px; }

.mascot { position: absolute; z-index: 18; left: 18px; bottom: 25px; width: 200px; pointer-events: none; transform-origin: 50% 100%; transition: transform 160ms ease-out; }
.sticker-art { overflow: hidden; border: 7px solid white; border-radius: 24px; background: white; box-shadow: 0 9px 20px rgba(48,61,48,.18),0 2px 0 rgba(96,84,58,.15); }
.mascot-art { width: 177px; height: 220px; margin-left: 4px; border-radius: 42% 42% 28% 28%; transform: rotate(-1deg); }
.mascot-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.mascot-speech { position: relative; z-index: 2; width: 170px; margin: 0 0 -7px 27px; padding: 11px 13px; border: 1px solid rgba(34,78,74,.16); border-radius: 17px 17px 17px 5px; background: rgba(255,253,245,.97); box-shadow: 0 6px 17px rgba(42,68,61,.12); font-size: 11px; font-weight: 900; line-height: 1.27; }
.mascot.is-happy { animation: mascot-pop 480ms ease-out; }.mascot.is-miss { animation: mascot-shake 340ms ease-out; }

.dig-bench { min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 210px; grid-template-rows: minmax(230px,1fr) auto; gap: 11px 18px; padding: 14px 0 10px; }
.slab { position: relative; grid-row: 1; min-height: 255px; overflow: hidden; border: 10px solid #9b673a; border-radius: 26px 23px 29px 21px; background: #76502f; box-shadow: inset 0 0 0 4px #d3a665,0 8px 0 #67422b,0 17px 25px rgba(73,57,37,.2); cursor: crosshair; touch-action: none; user-select: none; }
.slab::before { position: absolute; z-index: 0; inset: 0; content: ""; background: radial-gradient(circle at 12% 18%,rgba(255,239,184,.18) 0 2px,transparent 3px),radial-gradient(circle at 74% 68%,rgba(67,40,24,.22) 0 2px,transparent 3px),linear-gradient(128deg,#b87a42,#895b35 47%,#a9703d); background-size: 23px 19px,31px 28px,auto; }
.slab-rim { position: absolute; z-index: 4; inset: 7px; pointer-events: none; border: 2px dashed rgba(255,226,169,.25); border-radius: 17px; }
.fossil { position: absolute; z-index: 1; inset: 5%; display: grid; place-items: center; color: var(--bone); filter: drop-shadow(0 3px 0 #7b5636) drop-shadow(0 0 4px rgba(255,235,177,.3)); transition: transform 430ms cubic-bezier(.2,.85,.3,1.13),filter 300ms ease-out; }
.fossil svg { width: 96%; height: 94%; overflow: visible; }
.bone { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bone.thin { stroke-width: 2.6; }.bone.fill { fill: currentColor; stroke: #7b5636; stroke-width: 2.4; }
.dirt-grid { position: absolute; z-index: 3; inset: 0; display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(7,1fr); }
.dirt { position: relative; border: 0; opacity: 1; background-color: #a76d3d; background-image: radial-gradient(circle at 22% 30%,rgba(242,189,107,.45) 0 3%,transparent 4%),radial-gradient(circle at 75% 65%,rgba(94,55,31,.25) 0 4%,transparent 5%),linear-gradient(135deg,rgba(216,149,76,.25),rgba(111,68,38,.12)); background-size: 17px 15px,23px 19px,auto; box-shadow: inset 0 0 8px rgba(87,50,28,.12); transition: opacity 145ms ease-out,transform 145ms ease-out; }
.dirt:nth-child(4n+1) { background-color: #b87a42; }.dirt:nth-child(5n+2) { background-color: #986037; }.dirt.cleared { opacity: 0; transform: scale(.72) rotate(4deg); pointer-events: none; }
.brush-cursor { position: absolute; z-index: 7; left: 50%; top: 50%; width: 72px; height: 34px; opacity: 0; transform: translate(-8px,-50%) rotate(-22deg); pointer-events: none; transition: opacity 90ms ease-out; }
.brush-cursor::before { position: absolute; left: 0; top: 9px; width: 49px; height: 17px; content: ""; border: 2px solid #5a3925; border-radius: 10px 4px 4px 10px; background: #d69047; box-shadow: inset 0 3px rgba(255,255,255,.25); }
.brush-cursor span { position: absolute; right: 0; top: 5px; width: 27px; height: 25px; border-left: 5px solid #51666a; border-radius: 4px 12px 12px 4px; background: repeating-linear-gradient(90deg,#f3dba3 0 3px,#c49c62 3px 5px); }
.slab.is-brushing .brush-cursor { opacity: 1; }
.dust { position: absolute; z-index: 6; width: 9px; height: 9px; opacity: 0; border-radius: 50%; background: #e6b96e; pointer-events: none; box-shadow: 18px -8px #d49a50,-13px -15px #f0cf8d,25px 10px #bb7e42,-19px 8px #d8a259; }
.slab.is-dusting .dust { animation: dust-pop 290ms ease-out; }
.mount-shine { position: absolute; z-index: 6; inset: -40% 60% -40% -30%; opacity: 0; transform: skewX(-17deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent); pointer-events: none; }
.slab.is-mounted .fossil { transform: translateY(-7px) scale(1.055); filter: drop-shadow(0 8px 0 #69452e) drop-shadow(0 0 9px rgba(255,239,187,.7)); }
.slab.is-mounted .mount-shine { animation: shine 650ms ease-out; }
.brush-meter { grid-column: 1; display: flex; align-items: center; gap: 11px; padding: 0 5px; }
.brush-meter span { min-width: 92px; color: var(--muted); font-size: 10px; font-weight: 900; }
.brush-meter > i { height: 9px; flex: 1; overflow: hidden; border-radius: 999px; background: #e5ddc9; }
.brush-meter > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--teal)); transition: width 150ms ease-out; }
.clue-tag { grid-column: 2; grid-row: 1/-1; align-self: center; padding: 18px 17px; border: 1px solid rgba(90,75,49,.15); border-left: 5px solid var(--gold); border-radius: 8px 18px 18px 8px; background: #fff9e9; box-shadow: 0 6px 18px rgba(76,65,44,.1); animation: clue-in 260ms ease-out; }
.clue-tag span { color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.clue-tag strong { display: block; margin-top: 6px; font-size: 15px; line-height: 1.27; }

.decision-dock { min-height: 92px; display: grid; place-items: center; }
.action-area { width: min(820px,100%); display: grid; place-items: center; }
.brush-nudge { display: grid; grid-template-columns: 46px auto; grid-template-rows: auto auto; align-items: center; column-gap: 11px; color: var(--teal-dark); }
.brush-icon { grid-row: 1/-1; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--teal); border-radius: 14px; background: #dff3e8; font-size: 27px; transform: rotate(-20deg); }
.brush-nudge strong { align-self: end; font-size: 15px; }.brush-nudge small { align-self: start; color: var(--muted); font-size: 10px; }
.choice-grid { width: 100%; display: grid; grid-template-columns: repeat(var(--choice-count,3),minmax(0,1fr)); gap: 10px; }
.choice { min-height: 64px; padding: 8px 10px; border: 2px solid #c9c4b5; border-radius: 15px; background: white; box-shadow: 0 5px 0 #d9d2c2; font-size: 13px; font-weight: 950; line-height: 1.1; transition: transform 140ms ease-out,box-shadow 140ms ease-out,border-color 140ms ease-out; }
.choice:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 7px 0 #c7ddd6; }.choice:active { transform: translateY(4px); box-shadow: 0 1px 0 #c7ddd6; }
.choice small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; }
.primary { min-width: 225px; min-height: 58px; padding: 0 22px; border: 2px solid var(--teal-dark); border-radius: 15px; color: white; background: var(--teal); box-shadow: 0 6px 0 var(--teal-dark); font-size: 14px; font-weight: 950; transition: transform 140ms ease-out,box-shadow 140ms ease-out; }.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--teal-dark); }.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--teal-dark); }
.dig-world.is-miss .decision-dock { animation: dock-shake 320ms ease-out; }

.discovery-card { position: absolute; z-index: 45; left: 50%; top: 50%; width: min(690px,calc(100% - 70px)); min-height: 390px; display: grid; grid-template-columns: 285px 1fr; align-items: center; gap: 28px; padding: 28px; transform: translate(-50%,-50%); border: 1px solid rgba(46,80,69,.17); border-radius: 28px; background: rgba(255,253,245,.97); box-shadow: 0 14px 0 rgba(63,91,75,.1),0 38px 75px rgba(40,70,60,.24); backdrop-filter: blur(15px); }
.discovery-art { width: 285px; height: 285px; transform: rotate(-2deg); }
.discovery-art img { width: 100%; height: 100%; display: block; object-fit: contain; }
.reward-fossil { width: 100%; height: 100%; display: grid; place-items: center; padding: 17px; color: #8b5b35; background: radial-gradient(circle at 50% 42%,#fff9e7,#f3dfb4); }
.reward-fossil svg { width: 100%; height: 100%; }.reward-fossil .bone { stroke-width: 3.5; }.reward-fossil .bone.fill { fill: currentColor; }
.discovery-copy > span { color: var(--coral-dark); font-size: 9px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.discovery-copy h2 { margin: 7px 0 9px; font-size: 34px; line-height: 1; letter-spacing: -.04em; }
.discovery-copy p { margin: 0 0 23px; color: var(--muted); font-size: 15px; line-height: 1.45; }

.toast { position: absolute; z-index: 65; left: 50%; bottom: 35px; max-width: 590px; padding: 10px 17px; opacity: 0; transform: translate(-50%,10px); border-radius: 999px; color: white; background: var(--ink); pointer-events: none; font-size: 12px; font-weight: 900; transition: opacity 150ms ease-out,transform 150ms ease-out; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { background: var(--coral-dark); }
.celebration { position: absolute; z-index: 58; left: 54%; top: 45%; pointer-events: none; }.celebration i { position: absolute; width: 14px; height: 14px; opacity: 0; border-radius: 4px; background: var(--gold); }.dig-world.is-celebrating .celebration i { animation: sparkle 720ms ease-out both; }.celebration i:nth-child(1){--x:-230px;--y:-145px}.celebration i:nth-child(2){--x:-110px;--y:-190px;animation-delay:40ms}.celebration i:nth-child(3){--x:25px;--y:-205px;animation-delay:80ms}.celebration i:nth-child(4){--x:175px;--y:-150px;animation-delay:120ms}.celebration i:nth-child(5){--x:230px;--y:-25px;animation-delay:160ms}.celebration i:nth-child(6){--x:155px;--y:125px;animation-delay:200ms}.celebration i:nth-child(7){--x:-100px;--y:145px;animation-delay:240ms}.celebration i:nth-child(8){--x:-235px;--y:30px;animation-delay:280ms}

@keyframes dust-pop { 0%{opacity:.9;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(20px,-28px) scale(1.3)} }
@keyframes shine { 0%{opacity:0;transform:translateX(-20%) skewX(-17deg)}35%{opacity:1}100%{opacity:0;transform:translateX(230%) skewX(-17deg)} }
@keyframes clue-in { from{opacity:0;transform:translateX(9px) scale(.97)} }
@keyframes mascot-pop { 0%,100%{transform:scale(1) rotate(0)}45%{transform:scale(1.07) rotate(-2deg)} }
@keyframes mascot-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-2deg)}70%{transform:translateX(5px) rotate(2deg)} }
@keyframes dock-shake { 0%,100%{transform:translateX(0)}30%{transform:translateX(-7px)}70%{transform:translateX(7px)} }
@keyframes sparkle { 0%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)}28%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(200deg) scale(1.15)} }

@media (max-height: 760px) {
  .lesson { padding: 9px; }.dig-world { border-radius: 23px; }.field-hud { top: 12px; }.mission-card { top: 82px; bottom: 16px; }.mascot { transform: scale(.82); transform-origin: left bottom; bottom: 10px; }.mission-card { left: 195px; padding-top: 15px; }.slab { min-height: 215px; }.dig-bench { padding-top: 9px; }.decision-dock { min-height: 78px; }.choice { min-height: 56px; }.discovery-card { min-height: 350px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }