@font-face{font-family:Archivo;src:url('../assets/fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#143831;--paper:#fff1d1;--gold:#ffd278;--gold-deep:#b9772d;--muted:#c8d4bd;--night:#0d2522;--hot:#ff8a4c;--vh:100dvh;--vt:0px;--H:900px;font-family:Archivo,Arial,sans-serif;font-synthesis:none;color:var(--paper);background:#0a1c1a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{border:0;background:none;touch-action:manipulation}
h1,h2,p,ol{margin:0;padding:0}
#app{position:fixed;top:var(--vt);left:0;width:100%;height:var(--vh);overflow:clip;background:var(--night);isolation:isolate;user-select:none;-webkit-user-select:none}

/* The world */
#shaft{position:absolute;inset:0;z-index:0;overflow:clip}
.layer{position:absolute;left:0;right:0;background-size:cover;background-position:center;will-change:transform;-webkit-mask-image:linear-gradient(transparent,#000 90px,#000 calc(100% - 40px),#0000);mask-image:linear-gradient(transparent,#000 90px,#000 calc(100% - 40px),#0000)}
.layer[hidden],.gate[hidden],.topside[hidden]{display:none}
.gate{position:absolute;left:0;right:0;border-top:3px solid #0a0704cc;box-shadow:0 2px 0 #ffe7ad40,0 -8px 14px #0008}
.buried{position:absolute;width:44px;opacity:.72}
.buried[hidden]{display:none}
.topside{position:absolute;left:0;right:0;background-size:cover;background-position:40% 44%}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
#vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#0a211e99 0,#0a211e00 14%,#0a211e00 40%,#0a211ed9 100%);transition:opacity .35s}
#daylight{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 62% 58% at 50% 0,#fff1c766,#ffe4a026 56%,#ffe4a000 100%)}
[data-phase=home] #daylight,[data-phase=end] #daylight{display:none}
[data-phase=digging] #vignette,[data-phase=reveal] #vignette{background:radial-gradient(ellipse at 50% 45%,#0000 40%,#061513cc 100%)}
[data-phase=home] #vignette,[data-phase=end] #vignette{opacity:0}

#rig{position:absolute;z-index:3;left:50%;top:0;height:var(--rig,220px);aspect-ratio:.8;margin-left:calc(var(--rig,220px)*-.4);will-change:transform;opacity:0;transition:opacity .22s;pointer-events:none;filter:drop-shadow(0 10px 14px #0009)}
#body{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#bit{display:none;position:absolute;left:32%;width:36%;top:62%;height:38%;background-size:400% 100%;background-repeat:no-repeat}
.split #bit{display:block}
#thread{position:absolute;inset:0;background:repeating-linear-gradient(162deg,#fff0 0 5px,#fff5 6px,#fff0 9px 14px);-webkit-mask:url(../assets/lite/drill-bit.webp) 0 0/400% 100% no-repeat;mask:url(../assets/lite/drill-bit.webp) 0 0/400% 100% no-repeat}
[data-phase=answering] #rig,[data-phase=digging] #rig,[data-phase=checking] #rig{opacity:1}
#slab{position:absolute;z-index:2;left:calc(50% - min(53%,520px));width:min(106%,1040px);top:0;height:calc(var(--rig,220px)*.42);opacity:0;pointer-events:none;will-change:transform}
.loaded #slab{background:url(../assets/lite/rock-slab.webp) center/100% 100% no-repeat}
#crack{position:absolute;inset:0;opacity:0;transition:opacity .08s}
.loaded #crack{background:url(../assets/lite/rock-crack.webp) center/100% 100% no-repeat}
[data-phase=answering] #slab,[data-phase=checking] #slab{opacity:1}
#slab.broken{opacity:0!important}
.shard{display:none;position:absolute;z-index:7;background:url(../assets/lite/rock-slab.webp) center/100% 100% no-repeat;pointer-events:none;will-change:transform,opacity}
.shard:nth-of-type(1){clip-path:polygon(0 0,44% 0,52% 22%,47% 41%,55% 63%,49% 100%,0 100%)}
.shard:nth-of-type(2){clip-path:polygon(44% 0,100% 0,100% 100%,49% 100%,55% 63%,47% 41%,52% 22%)}

/* Round status */
#hud{position:absolute;z-index:6;left:0;right:0;top:calc(env(safe-area-inset-top) + 10px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;gap:8px;opacity:0;transition:opacity .25s;pointer-events:none}
[data-phase=answering] #hud,[data-phase=digging] #hud,[data-phase=checking] #hud,[data-phase=reveal] #hud{opacity:1}
[data-phase=reveal] #hud{z-index:9}
.stat b{display:inline-block}
.flyer{position:absolute;z-index:10;pointer-events:none}
.stat{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;text-shadow:0 1px 4px #000a}
.stat b{font-size:24px;font-weight:800}.stat span{font-size:11px;font-weight:700;color:var(--muted)}
.stat.right{justify-content:flex-end}
#sockets{display:flex;gap:5px}
.socket{width:30px;height:30px;border-radius:50%;background:#0a211ecc;border:2px solid #d3a45a66;box-shadow:inset 0 2px 5px #0009;position:relative;overflow:hidden}
.socket.on{border-color:var(--gold);box-shadow:0 0 0 2px #ffd27833,inset 0 2px 5px #0009}
.socket.got{background:#143c33;border-color:var(--gold)}
.socket.miss{opacity:.45}
.socket .gem{position:absolute;inset:1px}
.gem{display:block;background:url(../assets/lite/treasures.webp) no-repeat;background-size:300% 200%}
.gem.t0{background-position:0 0}.gem.t1{background-position:50% 0}.gem.t2{background-position:100% 0}.gem.t3{background-position:0 100%}.gem.t4{background-position:50% 100%}.gem.t5{background-position:100% 100%}

/* The question sits in the world, not on a card */
#ask{position:absolute;z-index:6;left:20px;right:20px;top:calc(env(safe-area-inset-top) + 52px);opacity:0;transform:translateY(-6px);transition:opacity .22s,transform .22s;pointer-events:none}
[data-phase=answering] #ask,[data-phase=checking] #ask{opacity:1;transform:none}
#ask-count{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--gold);text-transform:uppercase;margin-bottom:5px}
#prompt{font-size:clamp(20px,calc(var(--vhn)*.031),26px);line-height:1.14;font-weight:800;letter-spacing:-.015em;text-shadow:0 2px 8px #000c}
#caption{position:absolute;z-index:6;left:0;right:0;padding:0 18px;top:calc(env(safe-area-inset-top) + 84px);text-align:center;font-size:18px;font-weight:800;text-shadow:0 2px 8px #000;opacity:0;pointer-events:none}
[data-phase=digging] #caption{opacity:1}
#caption.big{width:fit-content;max-width:calc(100% - 28px);margin-inline:auto;padding:6px 14px;border-radius:12px;background:#0a211ee6;box-shadow:0 0 0 1.5px #c7934799;font-size:21px;line-height:1.15;color:var(--gold)}

/* Dock: thumb's reach, right above the keyboard */
#dock{position:absolute;z-index:7;left:0;right:0;bottom:0;padding:0 12px calc(env(safe-area-inset-bottom) + 10px);transform:translateY(120%);transition:transform .24s cubic-bezier(.2,.9,.3,1)}
[data-phase=answering] #dock,[data-phase=checking] #dock{transform:none}
.dock-row{display:flex;align-items:center;gap:8px;padding:7px;border-radius:18px;background:linear-gradient(#25443c,#112c27);box-shadow:0 0 0 2px #c79347,0 0 0 4px #4e3518,0 8px 18px #0008,inset 0 1px 0 #fff3}
#timer{flex:none;position:relative;width:46px;height:46px;display:grid;place-items:center;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
#timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
#timer circle{fill:#0b221f;stroke:#ffffff1f;stroke-width:4}
#timer-arc{fill:none!important;stroke:var(--gold)!important;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .1s linear}
#timer span{position:relative}
#timer.hot #timer-arc{stroke:var(--hot)!important}#timer.hot{color:var(--hot)}
#timer.hot span{animation:beat 1s infinite}
@keyframes beat{50%{transform:scale(1.2)}}
#answer{flex:1;min-width:0;height:46px;padding:0 13px;border:0;border-radius:11px;background:#fff6e2;color:var(--ink);font-size:17px;font-weight:700;outline:0;box-shadow:inset 0 2px 5px #5a3d1a55;user-select:text;-webkit-user-select:text}
#answer::placeholder{color:#6d7a6c;font-weight:500}
#answer:focus{box-shadow:inset 0 2px 5px #5a3d1a55,0 0 0 2px var(--gold)}
#dig{flex:none;height:46px;min-width:70px;padding:0 12px;border-radius:11px;background:linear-gradient(#ffdf98,#f7b64f);color:#3a2507;font-weight:900;font-size:16px;box-shadow:0 3px 0 #a0651f,inset 0 1px 0 #fff8}
#dig:active{transform:translateY(2px);box-shadow:0 1px 0 #a0651f}
#note{width:fit-content;max-width:100%;margin:0 auto 6px;padding:5px 11px;border-radius:9px;background:#0a211ee0;text-align:center;font-size:14px;font-weight:700;color:#ffd9a3}
#note:empty{display:none}
#near{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
#near:empty{display:none}
#near button{min-height:44px;padding:0 14px;border-radius:12px;background:#143c33f2;box-shadow:0 0 0 1.5px var(--gold);font-size:15px;font-weight:700}
.shake{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}}

/* Reveal */
#reveal{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 50px) 22px calc(env(safe-area-inset-bottom) + 18px);text-align:center;background:radial-gradient(ellipse at 50% 46%,#081a1830 20%,#071715d0 85%)}
#reveal[hidden]{display:none}
#reveal-kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#reveal-tier{font-size:clamp(32px,10vw,44px);line-height:1.05;font-weight:850;letter-spacing:-.025em;margin-top:6px;text-shadow:0 3px 12px #000a}
#reveal-answer{font-weight:700;color:var(--muted);margin-top:3px}
#stage{position:relative;width:min(76vw,300px);aspect-ratio:1;margin:6px 0 -6px;flex:0 1 auto;min-height:150px}
#chest,#loot,#rays{position:absolute;display:block}
#chest{inset:4%;background:url(../assets/lite/chests.webp) no-repeat;background-size:200% 200%}
#chest.low.shut{background-position:0 0}#chest.low.open{background-position:100% 0}#chest.high.shut{background-position:0 100%}#chest.high.open{background-position:100% 100%}
#loot{left:28%;top:2%;width:44%;height:44%;opacity:0}
#rays{inset:-22%;opacity:0;background:repeating-conic-gradient(#ffe6a600 0 12deg,#ffe6a638 12deg 22deg);-webkit-mask-image:radial-gradient(#000 20%,#0000 66%);mask-image:radial-gradient(#000 20%,#0000 66%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#reveal-points{display:flex;flex-direction:column;align-items:center;min-height:62px}
#reveal-points b{font-size:58px;line-height:1;font-weight:900;color:var(--gold);letter-spacing:-.03em;text-shadow:0 4px 0 #6e4514,0 8px 16px #0009;font-variant-numeric:tabular-nums}
#reveal-points span{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
#reveal-next{font-size:13px;color:var(--muted);margin:6px 0 12px;min-height:18px}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:56px;padding:0 20px;border-radius:15px;background:linear-gradient(#ffdf98,#f7b64f);color:#3a2507;font-weight:850;font-size:18px;box-shadow:0 4px 0 #a0651f,0 10px 20px #0006,inset 0 1px 0 #fff8}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a0651f}
.btn.ghost{background:#123a32e6;color:var(--paper);box-shadow:0 0 0 1.5px #d7ddbc66,0 8px 16px #0005}
.btn.ghost:active{transform:translateY(1px)}
.fade-up{animation:fadeUp .3s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}

/* Pages */
.page{position:absolute;inset:0;z-index:9;padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 18px);display:flex;flex-direction:column;overflow:auto}
.page[hidden]{display:none}
.page.dark{background:linear-gradient(#0c2623fa,#0c2623f5);text-align:center}
.brandbar{font-weight:900;letter-spacing:.02em;color:#153a36;text-transform:uppercase;font-size:15px}
.home-copy{margin-top:calc(var(--vhn)*.055);text-align:center;color:#153a36}
.home-copy h1{font-size:min(15vw,clamp(50px,calc(var(--vhn)*.082),72px));line-height:1;font-weight:900;letter-spacing:-.04em;text-shadow:0 2px 0 #ffffff55}
.home-copy h1 span{display:block}
.home-copy p{font-size:17px;font-weight:800;line-height:1.2;margin-top:14px}
.home-actions{margin:auto -22px calc((env(safe-area-inset-bottom) + 18px)*-1);padding:44px 22px calc(env(safe-area-inset-bottom) + 18px);background:linear-gradient(#0c262300,#0c2623d9 34%,#0c2623f5);display:flex;flex-direction:column;gap:11px;text-align:center}
.rule{font-size:16px;font-weight:800;line-height:1.35;text-shadow:0 1px 5px #000c}.rule strong{color:var(--gold)}
.mode{display:flex;justify-content:center;gap:18px;font-size:13px;font-weight:700;margin-bottom:5px;text-shadow:0 1px 4px #000c}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page h2{font-size:30px;line-height:1.05;font-weight:850;letter-spacing:-.025em;margin-top:6px}
.total{display:flex;align-items:baseline;justify-content:center;gap:7px;margin-top:6px}
.total b{font-size:76px;line-height:1;font-weight:900;color:var(--gold);letter-spacing:-.04em}.total span{font-weight:800;color:var(--muted)}
#end-meta{font-size:14px;color:var(--muted)}
#strata{position:relative;margin-top:12px}
#strata-bands{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;height:10px;list-style:none;border-radius:6px;overflow:hidden}
#strata-bands .unseen{opacity:.28}
#strata-you,#strata-best{position:absolute;top:5px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%}
#strata-you{background:var(--gold);box-shadow:0 0 0 2px #3a2507,0 0 8px var(--gold)}
#strata-best{width:4px;height:18px;margin:-9px 0 0 -2px;border-radius:2px;background:var(--paper)}
#strata-next{margin-top:8px;font-size:14px;font-weight:800;color:var(--gold)}
#finds{list-style:none;margin:12px 0;text-align:left;flex:1}
#finds li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid #fff2;animation:fadeUp .3s both}
#finds .gem{width:42px;height:42px}
#finds .blank{width:42px;height:42px;border-radius:50%;border:2px dashed #fff3}
#finds b{display:block;font-size:16px;line-height:1.15}#finds small{font-size:12px;color:var(--muted)}
#finds em{font-style:normal;font-weight:900;font-size:21px;color:var(--gold)}
.end-links{display:flex;justify-content:center;gap:6px;margin-top:8px}
.link{min-height:44px;padding:0 10px;font-weight:800;font-size:14px;color:var(--paper);text-decoration:underline;text-underline-offset:3px}
a.link{display:inline-flex;align-items:center}
#duel-shafts{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.lane{position:relative;overflow:hidden;border-radius:60px 60px 12px 12px;box-shadow:0 0 0 2px #c7934788,inset 0 0 30px #000a;background:#0a1c1a}
.lane-world{position:absolute;left:0;right:0;top:0;bottom:0}
.lane-band{position:absolute;left:0;right:0;background-size:cover;background-position:center}
.lane-drill{position:absolute;left:50%;top:0;width:66%;aspect-ratio:.8;margin-left:-33%;margin-top:-58%;background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform .55s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 6px 8px #000a)}
.lane-gem{position:absolute;right:6px;width:30px;height:30px;margin-top:-34px;animation:fadeUp .3s both}
.lane-head{position:absolute;z-index:2;left:0;right:0;top:18px;font-weight:800;text-shadow:0 2px 6px #000}
.lane-head small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lane-head b{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums}
.lane.win{box-shadow:0 0 0 3px var(--gold),inset 0 0 30px #000a}
#duel-note,#cabinet-note{font-size:13px;color:var(--muted);margin-bottom:10px}
#shelves{flex:1;min-height:0;display:grid;grid-template:repeat(3,1fr)/repeat(2,1fr);gap:4px;margin:12px 0;padding:calc(var(--vhn)*.025) 7%;background:linear-gradient(#5b3a1c,#2d1b0d);background-size:100% 100%;border-radius:12px;box-shadow:0 10px 26px #0008}
#shelves.art{background:url(../assets/play/cabinet.webp) center/100% 100% no-repeat;padding:0 9%;gap:0 5%;grid-template-rows:15.5% 1fr 1fr 1fr 14.5%}
#shelves.art .niche:nth-child(-n+2){grid-row:2}#shelves.art .niche:nth-child(n+3):nth-child(-n+4){grid-row:3}#shelves.art .niche:nth-child(n+5){grid-row:4}
.niche{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;overflow:hidden;padding:9% 0 19%;font-size:11px;line-height:1.2;text-shadow:0 1px 3px #000}
.niche .gem{flex:1;min-height:0;aspect-ratio:1;max-width:100%}
.niche.none .gem{filter:brightness(0) opacity(.5)}
.niche b{display:block;font-size:12px}
.niche.none{color:#d9cdb5a8}

@media(max-height:760px){.home-copy p{display:none}.home-copy{margin-top:calc(var(--vhn)*.02)}.home-copy h1{font-size:50px}}
#debug{position:absolute;z-index:20;left:6px;top:calc(env(safe-area-inset-top) + 46px);padding:5px 7px;border-radius:6px;background:#000c;font:11px/1.3 ui-monospace,Menlo,monospace;color:#9fe;white-space:pre;pointer-events:none}

@media(prefers-reduced-motion:reduce){#rays,#timer.hot span{animation:none}.fade-up,#finds li{animation-duration:.01s}}

/* The question sits with the input, so reading and typing happen in one place */
#ask{top:auto;left:0;right:0;bottom:calc(var(--dock-h,70px) - 4px);padding:14px 20px 12px;background:linear-gradient(#0a211e00,#0a211ee8 22%,#0a211ef5)}
#picks{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
#picks:empty{display:none}
#picks button{min-height:44px;padding:0 14px;border-radius:11px;text-align:left;font-size:16px;font-weight:600;background:#112f29f5;box-shadow:0 0 0 1.5px #c7934788}
#picks button b{font-weight:850;color:var(--gold)}
#tools{position:absolute;z-index:30;right:6px;top:calc(env(safe-area-inset-top) + 50px);display:flex;flex-direction:row;align-items:flex-start;gap:6px;font-size:12px}
#tools[hidden]{display:none}
#tools>button{min-height:32px;padding:0 10px;border-radius:9px;background:#000b;font-weight:700;box-shadow:0 0 0 1px #fff4}
#tools>button.cheat{color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
#cheat-body{position:absolute;z-index:31;left:6px;right:6px;top:calc(env(safe-area-inset-top) + 88px);max-height:calc(var(--vh) - var(--dock-h,70px) - 190px);min-height:120px;overflow-y:auto;padding:8px 10px;border-radius:12px;background:#000e;box-shadow:0 0 0 1px var(--gold);font-size:13px}
#cheat-body[hidden]{display:none}
.cheat-row{display:grid;grid-template-columns:78px 1fr;gap:6px;padding:5px 0;border-top:1px solid #fff2}
.cheat-row:first-child{border-top:0}
.cheat-row small{font-weight:800;line-height:1.2;color:var(--gold)}.cheat-row small span{display:block;font-weight:500;color:var(--muted)}
.cheat-row div{display:flex;flex-wrap:wrap;gap:4px}
.cheat-row button{min-height:32px;padding:0 8px;border-radius:7px;background:#ffffff1c;text-align:left;font-weight:600}
.cheat-row em{font-style:normal;color:var(--muted)}

#vignette-tint{position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .6s}
[data-phase=home] #vignette-tint,[data-phase=end] #vignette-tint{background:none!important}
#picks button.active{background:#2c5a4d;box-shadow:0 0 0 2px var(--gold)}
#best{font-size:14px;font-weight:800;color:var(--gold);text-shadow:0 1px 4px #000c}
#best:empty{display:none}

/* Depth, always in view: where the drill is now and what lies below */
#layer-chip{position:absolute;z-index:6;left:50%;top:calc(env(safe-area-inset-top) + 48px);transform:translateX(-50%);padding:3px 11px;border-radius:99px;background:#0a211ecc;box-shadow:0 0 0 1px #d3a45a66;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
[data-phase=answering] #layer-chip,[data-phase=digging] #layer-chip,[data-phase=checking] #layer-chip{opacity:1}
#ladder{position:absolute;z-index:6;right:6px;top:calc(env(safe-area-inset-top) + 92px);height:min(36vh,calc(var(--vh) - 260px));width:6px;border-radius:9px;background:linear-gradient(#8d6a3d,#a74a1a);box-shadow:0 0 0 1px #0009;opacity:0;transition:opacity .25s;pointer-events:none}
[data-phase=answering] #ladder,[data-phase=digging] #ladder,[data-phase=checking] #ladder,[data-phase=reveal] #ladder{opacity:1}
#ladder-list,.rail-title,#haul{display:none}
#ladder-mark{position:absolute;left:50%;top:var(--at,0%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #3a2507,0 0 10px var(--gold)}

@media(hover:hover){
  button{cursor:pointer}
  .btn:hover,#dig:hover{filter:brightness(1.06)}
  .btn.ghost:hover,#picks button:hover{background:#2c5a4d}
  .link:hover{color:var(--gold)}
}

/* Tablets get room, not a stretched phone */
@media(min-width:620px){
  #ask,#dock{left:50%;right:auto;width:min(100%,640px);transform:translateX(-50%)}
  #dock{transform:translate(-50%,120%)}
  [data-phase=answering] #dock,[data-phase=checking] #dock{transform:translateX(-50%)}
  #ask{transform:translate(-50%,-6px);padding-inline:22px;border-radius:18px 18px 0 0}
  [data-phase=answering] #ask,[data-phase=checking] #ask{transform:translateX(-50%)}
  #reveal-next,#reveal-points{width:100%}
  #next{max-width:420px}
  #stage{width:min(50vh,420px)}
  .page.dark>*{width:min(100%,640px);margin-inline:auto}
  .home-actions{align-self:center;width:min(100%,520px)}
  #reveal-tier{font-size:48px}
}

/* Computers: the full window is the mine, with the shaft and the haul either side of the drill */
@media(min-width:1000px) and (min-height:560px){
  #ladder,#haul{position:absolute;z-index:6;top:50%;bottom:auto;height:auto;width:230px;transform:translateY(-50%);padding:16px;border-radius:16px;background:#0a211edb;box-shadow:0 0 0 1px #d3a45a55,0 12px 30px #0007;display:block;opacity:0;transition:opacity .25s;pointer-events:none}
  #ladder{left:28px;right:auto;padding-left:34px}
  #haul{right:28px;left:auto}
  [data-phase=answering] #haul,[data-phase=digging] #haul,[data-phase=checking] #haul,[data-phase=reveal] #haul{opacity:1}
  .rail-title{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  #ladder-list,#haul-list{display:block;list-style:none;margin:0;padding:0}
  #ladder-list li{display:flex;justify-content:space-between;align-items:baseline;height:42px;gap:8px;font-size:13px;color:#d9cdb599}
  #ladder-list li b{font-weight:700}#ladder-list li small{font-size:11px}
  #ladder-list li.past{color:var(--paper)}
  #ladder-list li.now{color:var(--gold)}#ladder-list li.now b{font-weight:900}
  #ladder::before{content:'';position:absolute;left:16px;top:44px;height:252px;width:5px;border-radius:9px;background:linear-gradient(#8d6a3d,#a74a1a)}
  #ladder-mark{left:18.5px;top:calc(44px + 252px * (var(--at-n,0)))}
  #haul-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;min-height:50px;font-size:13px;color:#d9cdb5aa}
  #haul-list li.on{color:var(--gold)}
  #haul-list .gem{width:32px;height:32px}
  #haul-list .blank{display:block;width:30px;height:30px;border-radius:50%;border:2px dashed #fff3}
  #haul-list li.on .blank{border-color:var(--gold)}
  #haul-list b{display:block;font-size:13px;line-height:1.15;color:var(--paper)}
  #haul-list li.on b{color:var(--gold)}
  #haul-list small{font-size:11px;color:var(--muted)}
  #haul-list em{font-style:normal;font-weight:900;color:var(--gold)}
  #hud{left:50%;right:auto;width:640px;transform:translateX(-50%)}
  #prompt{font-size:30px}
  #caption{font-size:24px}#caption.big{font-size:34px}
  #answer{font-size:19px}
  .stat b{font-size:30px}
  .topside{background-position:40% 62%}
  /* Home: the portrait art keeps its shape, and the words get their own column */
  .home-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(400px,36vw,560px);grid-template-rows:auto 1fr auto;padding:0;background:#0c2623}
  .home-hero::before{content:'';grid-column:1;grid-row:1/4;background:url(../assets/surface.webp) 40% 40%/cover}
  .brandbar,.home-copy,.home-actions{grid-column:2;color:var(--paper)}
  .brandbar{padding:32px 48px 0}
  .home-copy{align-self:end;margin:0;padding:0 48px 20px;text-align:left}
  .home-copy h1{font-size:clamp(52px,4.8vw,72px);text-shadow:none}
  .home-copy p{display:block;font-size:22px}
  .home-actions{margin:0;padding:12px 48px 48px;width:auto;background:none;text-align:left;align-self:start}
  .mode{justify-content:flex-start}
  /* Haul: score on the left, the finds beside it */
  #end{display:grid;grid-template-columns:minmax(0,420px) minmax(0,520px);justify-content:center;align-content:center;column-gap:64px;row-gap:4px;text-align:left}
  #end>*{width:auto;margin-inline:0;grid-column:1}
  #end .total{justify-content:flex-start}
  #end .total b{font-size:112px}
  #end h2{font-size:42px}
  #finds{grid-column:2;grid-row:1/9;margin:0}
  #finds li{grid-template-columns:56px 1fr auto;padding:12px 0}
  #finds .gem{width:54px;height:54px}
  #share{margin-top:18px}
  .end-links{justify-content:flex-start}
  #duel-shafts{max-width:760px}
  #shelves{flex:1 1 auto;aspect-ratio:3/4;width:auto!important;align-self:center}
  #cabinet{align-items:center}
  #cabinet>*:not(#shelves){width:min(100%,520px)}
  .niche{font-size:13px}.niche b{font-size:14px}
}
#home[hidden],#end[hidden],#duel[hidden],#cabinet[hidden]{display:none!important}
#app:not([data-phase=answering]) #tools{display:none}
[data-phase=reveal] .gate,[data-phase=end] .gate{opacity:0}
@media(min-width:620px){
  #duel-shafts,#finds,#shelves{margin-inline:auto}
}
@media(min-width:1000px) and (min-height:560px){
  #duel-shafts{width:min(100%,760px)}
  #end #finds{margin:0}
  #shelves{margin:12px auto}
}

/* Home: the hero fills the first screen, and the words search engines and curious players read sit below it */
#home{padding:0;scrollbar-color:#8a6a3d #1e120b}
.home-hero{position:relative;z-index:2;box-shadow:0 10px 20px -2px #000a;flex:none;min-height:var(--vh);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 20px) 22px calc(env(safe-area-inset-bottom) + 18px)}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brandbar a{color:inherit;text-decoration:none}
.brandbar nav{display:flex;gap:12px;font-size:13px;font-weight:800;text-transform:none;letter-spacing:0}
/* Below the hero the page keeps digging: the words sit in the shaft, between the game's own rock walls */
.home-deep{flex:none;--shaft:#2b1a10;--text:#efe2c8;--soft:#d3c1a0;--line:#e9b76a40;--wall:24px;--wall-w:90px;--col:min(100% - var(--wall)*2 - 36px,720px);position:relative;overflow:hidden;background:linear-gradient(#0c2623,var(--shaft) 110px);color:var(--text);user-select:text;-webkit-user-select:text;content-visibility:auto;contain-intrinsic-size:auto 2200px}
.home-deep ::selection{background:var(--gold);color:#2b1a10}
.home-deep::before,.home-deep::after{content:"";position:absolute;top:0;bottom:0;width:var(--wall-w);background:no-repeat center/100% 100%;pointer-events:none}
.home-deep::before{right:calc(50% + var(--col)/2 + 16px);background-image:url(../assets/lite/deep/wall-s-l.webp)}
.home-deep::after{left:calc(50% + var(--col)/2 + 16px);background-image:url(../assets/lite/deep/wall-s-r.webp)}
.home-more,.home-foot{position:relative;z-index:1;width:var(--col);margin-inline:auto}
.home-more{padding-block:64px 56px}
.home-more h2{margin:64px 0 12px;font-size:clamp(31px,8.4vw,46px);line-height:1.04;font-weight:900;letter-spacing:-.03em;color:var(--paper);text-wrap:balance}
.home-more h2:first-child{margin-top:0}
.home-more h2+p{font-size:17px;line-height:1.5;max-width:60ch;color:var(--text);text-wrap:pretty}
.home-more a,.home-foot a{text-underline-offset:3px}
.home-deep :focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* Steps hang off the drill string, and the bit finishes the run */
.home-more ol{--pipe:42px;position:relative;list-style:none;counter-reset:step;margin-top:30px;padding-bottom:46px}
.home-more ol::before{content:"";position:absolute;left:calc(var(--pipe)/2 - 5px);top:6px;bottom:44px;width:10px;background:linear-gradient(90deg,#5d4a30,#c9a35c 34%,#f6dc9e 48%,#a97f3c 70%,#4f3b22)}
.home-more ol::after{content:"";position:absolute;left:calc(var(--pipe)/2 - 21px);bottom:0;width:42px;height:56px;background:url(../assets/lite/drill-bit.webp) 0 0/400% 100% no-repeat;filter:drop-shadow(0 6px 8px #0009)}
.home-more li{position:relative;counter-increment:step;min-height:var(--pipe);padding:0 0 26px calc(var(--pipe) + 16px)}
.home-more li:last-child{padding-bottom:12px}
.home-more li::before{content:counter(step);position:absolute;left:0;top:0;width:var(--pipe);height:34px;display:grid;place-items:center;border-radius:5px;background:linear-gradient(#ffe3a6,#e5ad5a 55%,#b47a31);box-shadow:0 2px 0 #6d4719,0 7px 12px -3px #000b;color:#3b2109;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.home-more h3{margin:4px 0 5px;font-size:20px;line-height:1.15;font-weight:850;letter-spacing:-.012em;color:var(--gold)}
.home-more li p{font-size:16px;line-height:1.5;max-width:58ch;text-wrap:pretty}

/* The tier table is a cross-section: each treasure sits in its own layer, and rarer finds fill more of it */
.seam{display:block;margin:22px 0 0;width:100%;border-collapse:collapse;box-shadow:0 18px 30px -18px #000c}
.seam thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.seam tbody{display:block}
.seam tr{--g:46px;--n:28px;--art:92px;position:relative;display:grid;grid-template:1fr 1fr/minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:calc(var(--g) + 22px);padding:9px 12px 9px calc(var(--art) + 8px);background:#1e120b;border-top:1px solid #0009;isolation:isolate}
.seam tr::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:calc(var(--art) + 6px);background:var(--rock) left center/cover no-repeat;-webkit-mask:linear-gradient(90deg,#000 62%,#0000);mask:linear-gradient(90deg,#000 62%,#0000)}
.seam tr:first-child{border-top:0}
.seam td{display:block}
.seam td:nth-child(1){grid-area:1/1;align-self:end;font-size:18px;line-height:1.15;font-weight:850;letter-spacing:-.012em;color:var(--paper)}
.seam td:nth-child(3){grid-area:2/1;align-self:start;margin-top:2px;font-size:14px;line-height:1.3;color:var(--soft)}
.seam td:nth-child(2){grid-area:1/2/3/3;font-size:var(--n);line-height:1;font-weight:900;letter-spacing:-.02em;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
.seam td:nth-child(2)::after{content:"pts";display:block;margin-top:2px;font-size:12px;line-height:1.1;font-weight:800;color:var(--soft)}
.seam .gem{position:absolute;left:calc(var(--art)/2 - var(--g)/2 - 4px);top:50%;width:var(--g);height:var(--g);margin-top:calc(var(--g)/-2);filter:drop-shadow(0 5px 6px #000b)}
.seam .s0{--rock:url(../assets/lite/deep/seam-1.webp)}
.seam .s1{--g:50px;--n:30px;--rock:url(../assets/lite/deep/seam-2.webp)}
.seam .s2{--g:58px;--n:33px;--rock:url(../assets/lite/deep/seam-3.webp)}
.seam .s3{--g:66px;--n:37px;--rock:url(../assets/lite/deep/seam-4.webp)}
.seam .s4{--g:76px;--n:41px;--rock:url(../assets/lite/deep/seam-5.webp)}
.seam .s5{--g:86px;--n:48px;--rock:url(../assets/lite/deep/seam-6.webp)}
.seam .s5 td:nth-child(2){color:#ffb45e}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .seam .gem{animation:unearth linear both;animation-timeline:view();animation-range:entry 5% entry 80%}
  }
}
@keyframes unearth{from{transform:translateY(14%) scale(.78);opacity:.35}to{transform:none;opacity:1}}

.home-more details{border-bottom:1px solid var(--line)}
.home-more h2+details,.home-more details:first-of-type{margin-top:14px;border-top:1px solid var(--line)}
.home-more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding-block:12px;font-size:17px;line-height:1.25;font-weight:800;color:var(--paper);cursor:pointer;list-style:none;transition:color .15s}
.home-more summary::-webkit-details-marker{display:none}
.home-more summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;color:var(--gold);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.home-more details[open] summary{color:var(--gold)}
.home-more details[open] summary::after{transform:rotate(135deg)}
.home-more details p{padding-bottom:18px;font-size:16px;line-height:1.5;max-width:60ch;text-wrap:pretty}
@media(hover:hover){.home-more summary:hover{color:var(--gold)}.home-foot nav a:hover{color:var(--gold)}}

/* The foot of the page is the bottom of the mine */
.home-foot{padding-block:30px calc(env(safe-area-inset-bottom) + 30px);border-top:2px solid #e2571d99;font-size:14px;line-height:1.4;color:var(--soft)}
.home-foot .brand{display:block;font-size:18px;font-weight:900;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.home-foot .brand+p{margin-top:3px}
.home-foot nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-block:14px}
.home-foot nav a{min-height:44px;display:flex;align-items:center;color:var(--paper);text-decoration:none}
@media(min-width:620px){
  .home-deep{--wall:clamp(52px,calc(50% - 370px),290px);--wall-w:290px;--col:min(100% - var(--wall)*2 - 48px,720px)}
  .home-deep::before{background-image:url(../assets/lite/deep/wall-l.webp)}
  .home-deep::after{background-image:url(../assets/lite/deep/wall-r.webp)}
  .home-more{padding-block:96px 72px}
  .home-more h2{margin-top:84px}
  .home-more h2+p{font-size:19px}
  .home-more ol{--pipe:52px;margin-top:38px}
  .home-more ol::before{left:21px}
  .home-more ol::after{left:5px}
  .home-more li{padding:0 0 34px calc(var(--pipe) + 22px)}
  .home-more li::before{height:40px;font-size:21px}
  .home-more h3{margin-top:7px;font-size:23px}
  .home-more li p{font-size:17px}
  .seam tr{--g:62px;--n:38px;--art:190px;padding:12px 22px 12px calc(var(--art) + 10px);column-gap:18px}
  .seam td:nth-child(1){font-size:22px}
  .seam td:nth-child(3){font-size:16px}
  .seam .gem{left:calc(var(--art)/2 - var(--g)/2 - 6px)}
  .seam .s1{--g:68px;--n:42px}
  .seam .s2{--g:78px;--n:47px}
  .seam .s3{--g:90px;--n:53px}
  .seam .s4{--g:104px;--n:60px}
  .seam .s5{--g:122px;--n:70px}
  .home-more summary{font-size:19px;min-height:62px}
  .home-more details p{font-size:17px}
  .home-foot nav{display:flex;flex-wrap:wrap;gap:0 22px}
}
@media(max-width:360px){
  .seam tr{--art:72px;padding-right:9px}
  .seam .s3{--g:56px}.seam .s4{--g:60px}.seam .s5{--g:66px}
  .seam td:nth-child(1){font-size:17px}
}
/* Very wide screens: rock carries on past the walls and falls away into the dark */
@media(min-width:1440px){
  .home-deep{--wall-w:calc(50% - var(--col)/2 - 16px)}
  .home-deep::before{background:linear-gradient(90deg,#150c07,#150c07cc 32%,#0000 66%) 0 0/100% 100% no-repeat,url(../assets/lite/deep/wall-l.webp) right top/auto 100% no-repeat,url(../assets/lite/deep/wall-r.webp) right 270px top/auto 100% no-repeat}
  .home-deep::after{background:linear-gradient(270deg,#150c07,#150c07cc 32%,#0000 66%) 0 0/100% 100% no-repeat,url(../assets/lite/deep/wall-r.webp) left top/auto 100% no-repeat,url(../assets/lite/deep/wall-l.webp) left 270px top/auto 100% no-repeat}
}
/* Tablets: the shade behind the buttons runs edge to edge, with only its contents narrowed */
@media(min-width:620px){
  .home-actions{align-self:stretch;width:auto;padding-inline:max(22px,calc(50% - 260px))}
}
@media(min-width:1000px) and (min-height:560px){
  .home-hero{display:grid;padding:0}
  .home-actions{padding-inline:48px}
  .brandbar{flex-wrap:wrap}
}