:root { --ink:#123f44; --teal:#177b7b; --teal-dark:#0d565c; --mint:#bde7d3; --sand:#f5c76f; --clay:#c96b3d; --cream:#fff8e6; --rock:#e8b45d; --shadow:rgba(65,39,15,.28); }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--ink); background:#d79a4d; font-family:ui-rounded,"Avenir Next",Nunito,system-ui,sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; }
button:focus-visible, [tabindex]:focus-visible { outline:4px solid #fff; outline-offset:4px; }
[hidden] { display:none !important; }
.game { position:relative; width:100vw; height:100vh; min-width:1100px; min-height:680px; overflow:hidden; background:linear-gradient(rgba(255,190,95,.12),rgba(30,91,84,.08)),url("assets/dig-site.webp") center/cover no-repeat; }
.game::after { position:absolute; inset:0; content:""; pointer-events:none; box-shadow:inset 0 0 100px rgba(70,34,8,.2); }
.mission { position:absolute; z-index:30; left:28px; top:24px; width:360px; min-height:124px; padding:18px 22px 16px; border:1px solid rgba(255,255,255,.55); border-radius:24px; background:rgba(255,248,230,.94); box-shadow:0 10px 0 rgba(87,55,20,.16),0 20px 42px var(--shadow); backdrop-filter:blur(8px); }
.mission span { color:var(--clay); font-size:11px; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.mission h1 { margin:4px 0 3px; font-size:30px; line-height:1; letter-spacing:-.045em; }
.mission p { margin:0; color:#57706d; font-size:14px; font-weight:750; }
.meter { height:6px; margin-top:12px; overflow:hidden; border-radius:999px; background:#eadbc0; }
.meter i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--clay),#f1a83f); transition:width .15s ease-out; }
.mute { position:absolute; z-index:40; top:28px; right:28px; width:48px; height:48px; display:grid; place-items:center; padding:0; border:2px solid rgba(255,255,255,.66); border-radius:50%; color:#fff; background:var(--teal-dark); box-shadow:0 6px 0 #073e42,0 12px 24px rgba(25,48,40,.25); }
.mute svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.sound-off { display:none; }.mute[aria-pressed="true"] .sound-on{display:none}.mute[aria-pressed="true"] .sound-off{display:block}
.workbench { position:absolute; z-index:5; left:5.5%; right:8.8%; top:13%; bottom:5%; }
.dig-view,.assembly-view,.prediction-view,.transfer-view { position:absolute; inset:0; }
.fossil-bed { position:absolute; left:9%; right:15%; top:7%; bottom:4%; overflow:hidden; border-radius:36% 29% 31% 36%/24% 31% 27% 35%; isolation:isolate; touch-action:none; cursor:none; }
.buried { position:absolute; z-index:1; object-fit:contain; filter:sepia(.3) saturate(.72) brightness(.9) drop-shadow(0 2px 1px rgba(70,37,13,.35)); user-select:none; pointer-events:none; }
.skull{left:11%;top:26%;width:23%;transform:rotate(-7deg)}.ribs{left:32%;top:30%;width:31%;transform:rotate(5deg)}.legs{left:49%;top:43%;width:17%;transform:rotate(10deg)}.arms{left:33%;top:49%;width:8%;transform:rotate(21deg)}.tail{left:58%;top:32%;width:32%;transform:rotate(4deg)}
#digCanvas,#marineCanvas { position:absolute; z-index:4; inset:0; width:100%; height:100%; touch-action:none; }
.brush-cursor { position:absolute; z-index:8; left:50%; top:50%; width:76px; height:76px; border:2px solid rgba(255,255,255,.8); border-radius:50%; opacity:0; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 0 7px rgba(23,123,123,.16); }
.brush-cursor::before { position:absolute; left:26px; top:14px; width:54px; height:18px; content:""; border-radius:6px 22px 22px 6px; background:#e0a84f; transform:rotate(-35deg); box-shadow:-26px 0 0 5px var(--teal); }
.fossil-bed:hover .brush-cursor { opacity:1; }
.brush-callout { position:absolute; z-index:10; left:42%; top:48%; padding:9px 15px; border-radius:999px; color:#fff; background:var(--teal-dark); box-shadow:0 7px 18px rgba(9,58,55,.28); font-size:13px; font-weight:900; pointer-events:none; animation:callout 1.2s ease-in-out infinite alternate; }
.brush-callout span{display:inline-block;margin-right:6px;font-size:19px}
.assembly-view { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:24px; padding:116px 45px 22px; }
.blueprint { position:relative; overflow:hidden; border:5px solid var(--teal-dark); border-radius:30px; background:rgba(216,239,222,.93); box-shadow:0 14px 0 rgba(56,76,47,.25),0 28px 50px var(--shadow); }
.blueprint::before { position:absolute; inset:0; content:""; opacity:.25; background-image:linear-gradient(#4d9994 1px,transparent 1px),linear-gradient(90deg,#4d9994 1px,transparent 1px); background-size:34px 34px; }
.blueprint>img { position:absolute; left:5%; top:21%; width:90%; opacity:.13; filter:grayscale(1) sepia(1) hue-rotate(120deg); }
.slots i { position:absolute; border:3px dashed rgba(23,123,123,.42); border-radius:50%; }
.slots [data-slot="skull"]{left:5%;top:25%;width:23%;height:27%}.slots [data-slot="ribs"]{left:28%;top:29%;width:29%;height:36%}.slots [data-slot="legs"]{left:52%;top:46%;width:18%;height:42%}.slots [data-slot="arms"]{left:30%;top:57%;width:10%;height:24%}.slots [data-slot="tail"]{left:61%;top:30%;width:35%;height:31%}
.specimen-tray { display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; padding:12px; border:5px solid #6c431e; border-radius:26px; background:#147978; box-shadow:0 14px 0 #0b5054,0 28px 48px var(--shadow),inset 0 0 0 3px rgba(255,255,255,.16); }
.piece { position:relative; z-index:12; width:190px; height:88px; display:grid; place-items:center; padding:7px; border:0; border-radius:17px; background:rgba(4,63,64,.34); touch-action:none; transition:transform .14s ease,background .14s ease,opacity .2s; }
.piece img { max-width:100%; max-height:100%; pointer-events:none; filter:drop-shadow(0 3px 2px rgba(3,38,38,.45)); }
.piece[data-piece="legs"],.piece[data-piece="arms"] { height:102px; }.piece[data-piece="legs"] img,.piece[data-piece="arms"] img{max-height:96px}
.piece:hover,.piece:focus-visible { background:rgba(255,255,255,.16); transform:scale(1.04); }.piece.dragging{position:fixed;z-index:80;width:210px;pointer-events:none;transform:translate(-50%,-50%) scale(1.08)}.piece.placed{opacity:0;pointer-events:none}
.placed-piece { position:absolute; z-index:10; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 2px rgba(45,57,35,.28)); animation:snap-in .25s ease-out; }
.placed-piece.skull{left:5%;top:25%;width:23%;height:27%;transform:none}.placed-piece.ribs{left:28%;top:29%;width:29%;height:36%;transform:none}.placed-piece.legs{left:52%;top:46%;width:18%;height:42%;transform:none}.placed-piece.arms{left:30%;top:57%;width:10%;height:24%;transform:none}.placed-piece.tail{left:61%;top:30%;width:35%;height:31%;transform:none}
.prediction-view { padding:130px 110px 30px; }
.partial-clues { position:absolute; left:9%; right:9%; top:27%; bottom:15%; overflow:hidden; border:4px solid var(--teal-dark); border-radius:38px; background:rgba(215,166,85,.9) url("assets/dirt-overlay.webp") center/cover; box-shadow:0 14px 0 rgba(75,43,15,.22),0 25px 44px var(--shadow); }
.partial-clues img { position:absolute; z-index:2; object-fit:contain; filter:sepia(.25) saturate(.8) drop-shadow(0 2px 1px #64401f); }.clue-skull{left:9%;top:25%;width:21%}.clue-ribs{left:38%;top:25%;width:28%}.clue-leg{left:56%;top:43%;width:14%}
.field-sketch { position:absolute; z-index:8; left:16%; top:41%; width:48%; height:130px; touch-action:none; cursor:ew-resize; filter:drop-shadow(0 3px 0 rgba(255,255,255,.6)); }
.field-sketch span { position:absolute; display:block; border:4px dashed rgba(12,86,92,.78); background:rgba(189,231,211,.13); }.sketch-head{left:0;top:20px;width:100px;height:80px;border-radius:55% 38% 48% 42%}.sketch-body{left:85px;right:55px;top:8px;height:105px;border-radius:50%}.sketch-tail{right:0;top:46px;width:90px;height:31px;border-radius:0 100% 100% 0;transform:skewX(-28deg)}
.field-sketch b { position:absolute; right:-16px; top:38px; width:42px; height:42px; border:5px solid #fff; border-radius:50%; background:var(--teal); box-shadow:0 4px 0 var(--teal-dark); }
.test-sketch { position:absolute; z-index:12; left:50%; bottom:25px; min-width:230px; min-height:54px; padding:12px 22px; border:0; border-radius:17px; color:#fff; background:var(--teal); box-shadow:0 7px 0 var(--teal-dark),0 15px 28px rgba(34,66,54,.25); font-weight:950; transform:translateX(-50%); }.test-sketch:disabled{opacity:.48;cursor:not-allowed}
.transfer-view { padding:118px 55px 26px; }.marine-bed { position:relative; width:100%; height:100%; overflow:hidden; border:5px solid var(--teal-dark); border-radius:42px; background:#d9ad65; box-shadow:0 14px 0 rgba(73,42,17,.25),0 25px 50px var(--shadow); touch-action:none; }.marine-bed>img{position:absolute;z-index:1;left:6%;top:24%;width:88%;filter:sepia(.25) saturate(.72) drop-shadow(0 3px 2px #67431d)}
.trace-path{position:absolute;z-index:8;inset:0;touch-action:none}.trace-path i{position:absolute;width:42px;height:42px;border:4px solid #fff;border-radius:50%;background:rgba(23,123,123,.58);box-shadow:0 0 0 8px rgba(23,123,123,.18)}.trace-path i.reached{background:#f4b74f;transform:scale(.75)}.trace-path [data-trace="skull"]{left:8%;top:31%}.trace-path [data-trace="neck"]{left:31%;top:39%}.trace-path [data-trace="ribs"]{left:57%;top:49%}.trace-path [data-trace="paddle"]{left:67%;top:70%}.trace-path [data-trace="tail"]{left:88%;top:49%}
.toast { position:absolute; z-index:55; left:50%; bottom:35px; max-width:480px; padding:11px 18px; border-radius:999px; color:#fff; background:var(--teal-dark); box-shadow:0 10px 28px rgba(22,47,41,.34); font-size:14px; font-weight:850; opacity:0; transform:translate(-50%,12px); transition:.18s ease; pointer-events:none; }.toast.show{opacity:1;transform:translate(-50%,0)}
.success,.finish { position:absolute; z-index:70; left:50%; top:52%; width:470px; padding:28px 34px 30px; border:2px solid rgba(255,255,255,.7); border-radius:30px; background:rgba(255,248,230,.97); box-shadow:0 28px 90px rgba(68,37,13,.5); text-align:center; transform:translate(-50%,-50%); }.success::before,.finish::before{position:fixed;z-index:-1;inset:-100vh -100vw;content:"";background:rgba(39,34,22,.3)}
.success-mark{display:grid;width:66px;height:66px;margin:-3px auto 13px;place-items:center;border-radius:50%;color:#fff;background:var(--teal);box-shadow:0 0 0 10px rgba(23,123,123,.11);font-size:34px;font-weight:950;animation:pop .45s ease-out}.success>p:first-of-type,.finish>span{color:var(--clay);font-size:11px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.success h2,.finish h2{margin:5px 0 9px;font-size:34px;line-height:1.05;letter-spacing:-.045em}.success p,.finish p{margin:0 auto 22px;max-width:370px;color:#58706e;line-height:1.45}.success button,.finish button{min-width:190px;min-height:52px;padding:11px 20px;border:0;border-radius:16px;color:#fff;background:var(--clay);box-shadow:0 7px 0 #8d4025;font-weight:950}
.skeleton-whoa{height:150px;margin:-18px -15px 5px;display:grid;place-items:center}.skeleton-whoa img{max-width:95%;max-height:100%;animation:stomp .65s ease-out 2 alternate;transform-origin:60% 90%}
.dust { position:absolute; z-index:50; inset:0; overflow:hidden; pointer-events:none; }.dust i{position:absolute;width:9px;height:9px;border-radius:50%;background:#e6a449;animation:dust .65s ease-out forwards}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes callout{to{transform:translateX(12px)}}@keyframes pop{from{opacity:0;transform:scale(.5) rotate(-15deg)}}@keyframes snap-in{from{opacity:.2;transform:scale(.65) rotate(-8deg)}}@keyframes dust{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}@keyframes stomp{50%{transform:translateY(-10px) rotate(-1deg)}100%{transform:translateY(0) rotate(1deg)}}
@media (max-height:760px){.workbench{top:12%;bottom:3%}.mission{top:16px}.assembly-view{padding-top:103px}.prediction-view{padding-top:105px}.transfer-view{padding-top:103px}.piece{height:75px}.piece[data-piece="legs"],.piece[data-piece="arms"]{height:82px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}