@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Barlow+Condensed:wght@600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#101725;color:#fff4df;font-family:'Space Mono',monospace;min-height:100dvh}button,input{font:inherit}button{cursor:pointer;min-height:44px;color:#fff0d5;background:#142335e8;border:1px solid #769a9d;padding:12px 20px;box-shadow:3px 3px 0 #06101b;letter-spacing:1px}button:hover{background:#304651}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #ffce7b;outline-offset:4px}button.primary{border:2px solid #f2c67e;background:#d2a356;color:#17242b;font-weight:700;box-shadow:4px 4px 0 #5e4430}button.primary:hover{background:#f3cc86}#world{position:fixed;inset:0;overflow:hidden;z-index:-3}#camp{position:absolute;inset:0;background:url('assets/camp.png') center center/cover no-repeat;transition:opacity 1s}#cave{position:absolute;inset:0;background:url('assets/mine.png') center 0%/100% 500% no-repeat;opacity:0;transition:opacity .8s;will-change:background-position}.underground #camp{opacity:0}.underground #cave{opacity:1}.vignette{position:fixed;inset:0;background:linear-gradient(#08121d15 20%,transparent 40%,#070d1a90);z-index:-1;pointer-events:none}header{position:fixed;top:22px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:5}.brand{font-size:12px;letter-spacing:3px;background:#101c2bc9;padding:10px;color:#ffe3b2}header button{padding:8px 12px;font-size:12px}#hud{position:fixed;top:22px;left:22%;right:22%;display:flex;justify-content:space-between;align-items:center;z-index:3}#hud[hidden]{display:none}#hud>div:first-child,#hud>div:last-child{background:#101b2de8;border:1px solid #516671;padding:10px 20px;text-align:center;min-width:105px}small{font-size:10px;letter-spacing:2px;color:#b8c6cf}#hud strong{display:block;color:#ffd389;font-size:20px}#rounddots{display:flex;gap:5px}#rounddots i{width:12px;height:12px;border:1px solid #9eacaa;background:#182737}#rounddots i.filled{background:#d6a95e}#rounddots i.current{background:#7ce1cf}#app{max-width:760px;margin:0 auto;padding:120px 24px 40px;text-align:center;min-height:100dvh}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(76px,12vw,150px);line-height:.9;letter-spacing:8px;margin:15px 0;color:#fff1cc;text-shadow:4px 4px 0 #664b32,8px 8px 0 #233638}h2{font-family:'Barlow Condensed',sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.12;margin:14px 0}p{font-size:13px;line-height:1.7}.hero small{color:#254d4d;font-weight:bold;letter-spacing:5px}.hero p{color:#173f40;max-width:460px;margin:25px auto;font-weight:bold;text-shadow:0 1px #ccead5}.hero{padding-top:3vh}.stack{display:flex;flex-direction:column;gap:10px;max-width:350px;margin:auto}.home-actions{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);width:calc(100% - 48px)}.home-actions .primary{font-size:18px;min-height:60px}.secondary-actions{display:flex;gap:10px;justify-content:center}.secondary-actions button{font-size:11px;padding:10px}.legend{display:flex;justify-content:center;gap:15px;margin:15px 0}.legend span{font-size:9px;color:#ffedcd}.question-card{margin:20px auto 0;background:#101b2eea;padding:25px 32px;border:1px solid #657183;box-shadow:6px 6px 0 #050e19aa;max-width:580px}.question-card p{margin:0;color:#7de0d2;text-transform:uppercase;font-size:10px;letter-spacing:3px}.question-card small{letter-spacing:1px}.dock{position:fixed;bottom:0;left:0;right:0;padding:18px 20px 24px;background:linear-gradient(transparent,#08111bf5 20%);z-index:4}.dock-inner{max-width:650px;margin:auto}.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}form.row{flex-wrap:nowrap}input{min-width:0;flex:1;padding:17px;background:#0c1728e8;border:2px solid #6cb9b3;color:white;outline:none;font-size:16px}.clock{color:#ffd389;border:1px solid #b6a580;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;font-size:14px;flex-shrink:0}.feedback{font-size:12px;background:#101a2bea;margin-bottom:10px}.feedback:empty{display:none}.feedback p{padding:10px 8px 0}.feedback button{font-size:12px}.skip{padding:6px;border:0;background:none;box-shadow:none;font-size:11px;color:#acb5bf;min-height:32px;margin-top:6px}#mascot{position:absolute;left:calc(50% - 47px);top:62%;width:94px;filter:drop-shadow(0 0 18px #edbd5633);transition:top .7s;animation:bob 3s ease-in-out infinite}#mascot img{width:100%;image-rendering:pixelated}.home #mascot{top:57%;left:calc(50% - 45px)}.falling #mascot{animation:fallwobble .5s infinite alternate}.dust{position:absolute;inset:-50%;opacity:.25;background-image:radial-gradient(#e5d7b3 1px,transparent 2px);background-size:93px 127px;animation:drift 25s linear infinite;pointer-events:none}.falling .dust{animation-duration:2s}#ruler{position:fixed;right:7%;top:20%;height:60%;width:50px;border-right:1px solid #a0b6c04d;background:repeating-linear-gradient(transparent 0 39px,#a0b6c040 40px 41px);opacity:.7;font-size:10px;text-align:right;padding:12px 8px;white-space:pre-line;line-height:80px;z-index:-1}.reveal-card{margin:8vh auto 0;max-width:500px;text-shadow:0 3px 10px #000}.reveal-card h2{font-size:60px;color:var(--gem,#ffd389);letter-spacing:4px;text-transform:uppercase}.reveal-card .answer{font-size:23px;color:white}.gem{display:inline-block;width:52px;height:60px;background:var(--gem,#c9acff);clip-path:polygon(50% 0,90% 23%,100% 65%,50% 100%,0 65%,10% 23%);box-shadow:inset 20px 0 #ffffff30,inset -15px -15px #0003;animation:sparkle 2s ease-in-out infinite}.reveal-card .gem{width:80px;height:90px}.zone-label{font-size:11px;letter-spacing:4px;color:#8fe3da;margin-top:22px}.result-panel{background:#101b2ef5;padding:25px;border:1px solid #627988;max-width:650px;margin:auto}.result-panel ul{padding:0;list-style:none;text-align:left}.result-panel li{padding:12px 0;border-bottom:1px solid #3e4c5b;font-size:12px}.result-panel li div{color:#f3cc86;margin:6px 0}.result-panel small{letter-spacing:0}.result-panel .gem{width:20px;height:24px;margin-right:10px;vertical-align:middle}.result-panel p{color:#b9c7d2}@keyframes bob{50%{transform:translateY(-7px)}}@keyframes fallwobble{from{transform:translateY(10px) rotate(-8deg)}to{transform:translateY(30px) rotate(7deg)}}@keyframes drift{to{transform:translateY(-127px)}}@keyframes sparkle{50%{filter:brightness(1.3)}}@media(max-width:600px){#app{padding:100px 20px 220px}header{top:12px;left:12px;right:12px}.brand{display:none}#hud{top:12px;left:65px;right:75px}#hud>div:first-child,#hud>div:last-child{padding:5px 8px;min-width:65px}#hud strong{font-size:14px}#rounddots{gap:3px}#rounddots i{width:7px;height:9px}#hud small{font-size:8px}.question-card{padding:20px 18px;margin-top:0}.question-card h2{font-size:30px}#ruler{right:4%}#camp{background-position:42% center}#cave{background-size:auto 500%}h1{font-size:86px;letter-spacing:3px}.hero{padding-top:2vh}.hero p{max-width:285px;font-size:11px}.home-actions{bottom:3vh}.legend{gap:8px}.legend span{font-size:8px}.reveal-card{margin-top:4vh}.reveal-card h2{font-size:45px}.dock{padding:16px 12px 12px}input{padding:14px 10px}.dock .primary{padding:14px 12px}#mascot{width:80px;left:calc(50% - 40px);top:57%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.gem,.reveal-card .gem{width:110px;height:125px;background-image:url('assets/gems.png');background-size:500% auto;background-position:var(--sprite,0%) center;background-color:transparent;clip-path:none;box-shadow:none;image-rendering:pixelated}
.home #ruler{display:none}.home .hero p{background:#d4ead8c9;padding:8px 14px;color:#1a3a39}.result-panel{margin-top:110px;min-height:0!important}.result-panel .gem{width:32px;height:35px;background-size:500% auto}
@media(max-width:600px){.result-panel{margin:90px 14px 25px!important;width:calc(100% - 28px);padding:20px!important}.home #app{padding-top:90px}}
#ruler{width:75px;white-space:pre;line-height:80px}.underground .brand{visibility:hidden}#camp,#cave{image-rendering:pixelated}
#drill-rig{position:absolute;left:calc(50% - 76px);top:57%;width:152px;opacity:0;transform:translateY(60px);transition:opacity .2s,transform .5s;filter:drop-shadow(0 0 20px #e0b05b45)}
#drill-rig .rig{width:100%;display:block;image-rendering:pixelated}
#drill-rig .pilot{position:absolute;top:21%;left:36%;width:28%;image-rendering:pixelated;opacity:0}
.boarding #drill-rig,.drilling #drill-rig,.arrived #drill-rig{opacity:1;transform:translateY(0)}
.boarding #mascot{animation:board-drill .95s ease-in-out forwards!important}
.drilling #mascot,.arrived #mascot{opacity:0}
.drilling #drill-rig .pilot,.arrived #drill-rig .pilot{opacity:1}
.drilling #drill-rig{animation:rig-rumble .09s steps(2) infinite}
.drill-sparks{position:absolute;bottom:5%;left:50%;width:6px;height:6px;background:var(--ore-color,#ffd389);opacity:0;box-shadow:24px -15px #ffc66b,-29px -10px #ffdd88,38px -30px var(--ore-color),-38px -24px #ffedbf,14px -40px #fff}
.drilling .drill-sparks{opacity:1;animation:sparks .25s steps(3) infinite}
.rock-chips{position:absolute;bottom:2%;left:45%;width:9px;height:8px;background:#665644;opacity:0;box-shadow:42px -20px #8a715a,-42px -29px #836d57,22px -55px #b4a18b,-25px -66px #877b70}
.drilling .rock-chips{opacity:1;animation:chips .5s linear infinite}
.drilling #cave{filter:brightness(1.12)}
.reveal-card{transition:opacity .4s}.boarding .reveal-card,.drilling .reveal-card{opacity:.85}
@keyframes board-drill{0%{transform:translate(0,0) scale(1);opacity:1}40%{transform:translate(-35px,-80px) rotate(-12deg) scale(.9);opacity:1}85%{transform:translate(0,0) scale(.45);opacity:1}100%{transform:translate(0,10px) scale(.35);opacity:0}}
@keyframes rig-rumble{0%{transform:translate(-2px,0) rotate(-1deg)}100%{transform:translate(2px,3px) rotate(1deg)}}
@keyframes sparks{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.2) translateY(-12px);opacity:0}}
@keyframes chips{0%{transform:translateY(0) scale(.5);opacity:1}100%{transform:translateY(-80px) scale(1.4);opacity:0}}
@media(max-width:600px){#drill-rig{width:125px;left:calc(50% - 62px);top:58%}.reveal-card{margin-top:0}.reveal-card .gem{width:85px;height:92px}.reveal-card h2{font-size:38px;margin:6px}.reveal-card .answer{font-size:19px}.reveal-card p{margin:8px}.zone-label{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.boarding #mascot,.drilling #mascot{opacity:0}.drill-sparks,.rock-chips{display:none}}

/* Solid geology surrounds a freshly excavated, drill-width shaft. */
#cave{background-image:url('assets/earth.png');background-size:100% 500%}
#shaft{position:absolute;top:0;left:50%;width:148px;height:78%;transform:translateX(-50%);opacity:0;background:linear-gradient(90deg,#22180fc9,#100e0df5 17%,#13100ef5 80%,#3a281bcb);clip-path:polygon(4% 0,96% 0,96% 8%,100% 8%,100% 20%,95% 20%,95% 35%,99% 35%,99% 51%,95% 51%,95% 65%,100% 65%,100% 82%,95% 82%,95% 95%,80% 95%,80% 99%,60% 99%,50% 100%,35% 99%,20% 97%,7% 94%,7% 80%,2% 80%,2% 65%,6% 65%,6% 45%,1% 45%,1% 27%,5% 27%);transition:opacity .8s}
.underground #shaft{opacity:1}
#shaft:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 24px,#ac76431a 24px 28px);border-inline:12px solid #57381f55}
.drilling #shaft:after{animation:cut-walls .35s linear infinite}
.reveal-card{background:radial-gradient(ellipse,#100f17e8 0%,#100f17ae 48%,transparent 72%);padding:8px 12px 18px}
.drilling #drill-rig{filter:drop-shadow(0 10px 16px #ffbb5e85)}
@keyframes cut-walls{to{background-position:0 -28px}}
@media(max-width:600px){#cave{background-size:auto 500%}#shaft{width:122px}}

/* Wait beside the parked drill, then board before the camera descends. */
.playing #drill-rig{opacity:1;transform:translateY(0)}
.playing #mascot{left:calc(50% - 154px);top:calc(57% + 35px);width:80px;transition:none}
.playing:not(.boarding):not(.drilling):not(.arrived) #mascot{animation:bob 3s ease-in-out infinite}
.boarding #mascot{animation:hop-into-cockpit 1.2s ease-in-out forwards!important}
.surface #ruler{opacity:0}
#camp{transition:opacity .65s,transform 1.1s ease-in;transform:translateY(0)}
.underground #camp{transform:translateY(-35vh)}
.playing:not(.surface) #shaft{width:310px}
.playing.drilling #shaft,.playing.arrived #shaft{width:148px;transition:width .45s,opacity .8s}
@keyframes hop-into-cockpit{0%{transform:translate(0,0) scale(1);opacity:1}25%{transform:translate(14px,8px) scale(1.05,.85);opacity:1}60%{transform:translate(70px,-85px) rotate(8deg) scale(.8);opacity:1}90%{transform:translate(114px,-7px) scale(.52);opacity:1}100%{transform:translate(114px,-7px) scale(.45);opacity:0}}
@media(max-width:600px){.playing #mascot{left:calc(50% - 140px);top:calc(58% + 22px)}.playing:not(.surface) #shaft{width:285px}.playing.drilling #shaft,.playing.arrived #shaft{width:122px}@keyframes hop-into-cockpit{0%{transform:translate(0,0);opacity:1}25%{transform:translate(10px,8px) scale(1.05,.85);opacity:1}60%{transform:translate(60px,-75px) rotate(8deg) scale(.8);opacity:1}90%{transform:translate(100px,-5px) scale(.45);opacity:1}100%{transform:translate(100px,-5px) scale(.4);opacity:0}}}

.playing .brand{visibility:hidden}

/* Occupied artwork includes the pilot behind the windshield. */
#drill-rig .occupied-rig{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0}
.drilling #drill-rig .rig,.arrived #drill-rig .rig{visibility:hidden}
.drilling #drill-rig .occupied-rig,.arrived #drill-rig .occupied-rig{opacity:1}

.challenge-panel{margin:110px auto 40px!important}.challenge-form{display:flex;gap:8px;flex-wrap:wrap}.challenge-form input{width:100%;flex-basis:100%}.challenge-details{display:grid;gap:12px;margin:24px 0}.challenge-details strong{color:#ffd389;overflow-wrap:anywhere}.challenge-panel>button,.result-panel>button{margin:6px}.challenge-error{color:#ffaea6}.round-code{display:block;margin-top:12px;font-size:9px;color:#bec8d1}.notice{color:#9de4d0}.result-panel textarea{width:100%;min-height:100px}.secondary-actions{flex-wrap:wrap}

body:not(.playing) #ruler{display:none}
/* Shared ground line keeps the miner's feet and drill tracks supported. */
#world{--rig-size:164px;--ground-y:74%;--rig-top:calc(var(--ground-y) - var(--rig-size)*.70);--deep-tint:#704021}
#cave{background:url('assets/soil-detail.png') center 0/512px 512px repeat;image-rendering:auto;transition:opacity .65s;filter:none}
#cave:after{content:'';position:absolute;inset:0;background:var(--deep-tint);mix-blend-mode:color;opacity:.65;transition:background 1.5s}
#camp{image-rendering:auto}
#shaft,.playing:not(.surface) #shaft,.playing.drilling #shaft,.playing.arrived #shaft{width:calc(var(--rig-size)*.84);clip-path:none;border-radius:0 0 45% 45% / 0 0 24px 24px;background:linear-gradient(90deg,#34251a,#100e0d 16%,#12100e 84%,#382619);box-shadow:inset 8px 0 12px #0008,inset -8px 0 12px #0008;transition:opacity .5s}
#shaft:after{border-inline:5px solid #57381f55;background:repeating-linear-gradient(0deg,transparent 0 54px,#ac764315 55px 58px)}
#drill-rig,.playing #drill-rig{width:var(--rig-size);left:calc(50% - var(--rig-size)/2);top:var(--rig-top);transform:none;transition:opacity .25s;filter:drop-shadow(0 5px 3px #0009)}
#drill-rig .rig,#drill-rig .occupied-rig,#mascot img{image-rendering:auto}
#rest-chamber{position:absolute;left:50%;top:calc(var(--ground-y) - 190px);width:350px;height:205px;transform:translateX(-50%);border-radius:48% 45% 15% 18%;background:radial-gradient(ellipse at 70% 80%,#53381e,#1b1814 60%,#211a13);box-shadow:inset 0 8px 16px #0009,0 0 0 7px #4b352a77;opacity:0;transition:opacity .3s,transform .6s}
.underground #rest-chamber{opacity:1}
#mining-platform{position:absolute;left:50%;top:var(--ground-y);width:350px;height:52px;transform:translateX(-50%);opacity:0;transition:opacity .25s,transform .55s;filter:drop-shadow(0 9px 6px #0008)}
.playing #mining-platform{opacity:1}
#mining-platform i{position:absolute;top:0;height:19px;background:repeating-linear-gradient(90deg,transparent 0 44px,#30281b 45px 48px),linear-gradient(#c09a61 0 4px,#7b5531 5px 12px,#49301f 13px);border-top:2px solid #e0b780;border-bottom:3px solid #302015;box-shadow:0 3px #211b14}
.platform-left{left:0;width:calc(50% - 28px)}.platform-right{right:0;width:calc(50% - 28px)}
#mining-platform i:after{content:'';position:absolute;top:14px;left:18px;width:14px;height:45px;background:linear-gradient(90deg,#553823,#a07848,#4d3323);transform:skewX(30deg);border:2px solid #302117}.platform-right:after{left:auto!important;right:18px;transform:skewX(-30deg)!important}
.platform-lamp{position:absolute;left:8px;top:-43px;width:13px;height:28px;border:3px solid #4a3825;border-radius:4px;background:#ffda84;box-shadow:0 0 23px #ffc65d99}
.platform-lamp:before{content:'';position:absolute;left:3px;top:23px;height:20px;border-left:3px solid #755239}
.playing #mascot{left:calc(50% - 145px);top:auto;bottom:calc(100% - var(--ground-y) - 5px);width:76px;transform-origin:50% 92%;filter:drop-shadow(0 3px 2px #0009)}
.playing:not(.boarding):not(.drilling):not(.arrived) #mascot{animation:grounded-breathe 3s ease-in-out infinite}
#mascot img{display:block}
.boarding #mascot{animation:natural-board 1.2s ease-in-out forwards!important}
.disembarking:not(.boarding):not(.drilling):not(.arrived) #mascot{animation:natural-exit .65s ease-out both!important}
.drilling #mining-platform{opacity:0;transform:translate(-50%,-160px)}
.drilling #rest-chamber{opacity:0;transform:translate(-50%,-160px)}
.drilling #drill-rig{animation:gentle-rumble .12s linear infinite;filter:drop-shadow(0 6px 7px #dda35355)}
.drilling .rock-chips{width:5px;height:5px;background:#aa805a;animation:chips .45s linear infinite}
@keyframes grounded-breathe{50%{transform:scaleY(1.018)}}
@keyframes natural-board{0%{transform:translate(0,0);opacity:1}20%{transform:translate(0,2px) scaleY(.9);opacity:1}60%{transform:translate(58px,-80px) rotate(6deg) scale(.8);opacity:1}90%{transform:translate(106px,-50px) scale(.45);opacity:1}100%{transform:translate(106px,-50px) scale(.4);opacity:0}}
@keyframes natural-exit{0%{transform:translate(106px,-50px) scale(.4);opacity:0}25%{opacity:1}65%{transform:translate(32px,-35px) scale(.85)}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes gentle-rumble{0%,100%{transform:translateY(0)}50%{transform:translate(1px,1px)}}
@media(max-width:600px){#world{--rig-size:138px;--ground-y:74%}#mining-platform{width:310px}#rest-chamber{width:320px;height:180px;top:calc(var(--ground-y) - 165px)}.playing #mascot{left:calc(50% - 136px);width:68px}.question-card{padding:17px 16px}.question-card h2{font-size:clamp(23px,6.7vw,30px)}.reveal-card .gem{width:68px;height:76px}.reveal-card h2{font-size:34px}.zone-label{font-size:9px;letter-spacing:3px}.round-code{font-size:8px}.dock{padding-bottom:max(12px,env(safe-area-inset-bottom))}}
@media(max-height:650px){#world{--rig-size:110px;--ground-y:76%}.playing #mascot{width:55px;left:calc(50% - 120px)}.question-card{padding:10px 14px}.question-card h2{font-size:23px;margin:8px 0}.round-code{margin-top:6px}.reveal-card .gem{width:48px;height:52px}.reveal-card h2{font-size:29px}.reveal-card p{margin:4px}.reveal-card{margin-top:0}}
@media(prefers-reduced-motion:reduce){.playing #mascot{animation:none!important}.drilling #drill-rig{animation:none!important}#mining-platform,#rest-chamber{transition:none}}

@media(max-width:600px){#hud{right:84px}header #sound{padding:8px;font-size:10px}}