:root{
  --ink:#0b0e28;--glass:#10163ab8;--glass-line:#ffffff24;--field:#0a0d26b3;
  --text:#fff8ea;--muted:#d6cfe6;--dim:#a49dbd;--gold:#ffcf5c;--gold-deep:#b8741a;--gold-ink:#3a2003;
  --good:#7ff0b4;--warn:#ffb97a;--bad:#ffa3a8;
  --serif:Baskerville,"Hoefler Text","Linux Libertine O",Georgia,serif;
  --display:Didot,"Bodoni 72","Hoefler Text",Baskerville,"Linux Libertine O",Georgia,serif;
  --spring:cubic-bezier(.2,1.25,.35,1);--glide:cubic-bezier(.22,.8,.24,1);--day:2.4s;
  --top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px);
  font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);background:var(--ink);color-scheme:dark;font-synthesis:none;line-height:1.35;
  -webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
.motion-recording-root{overflow-y:auto}
.motion-recording-page{height:auto;min-height:100%;overflow:visible}
.motion-recording{width:min(100%,32rem);margin:auto;padding:calc(var(--top) + 16px) 16px calc(var(--bottom) + 20px);display:grid;gap:12px}
.motion-recording-setup{display:grid;gap:12px}
.motion-recording a{color:var(--gold)}
.motion-recording h1{font:700 2rem var(--serif)}
.motion-recording select,.motion-recording input{min-width:0;width:100%;font:inherit;color:var(--text);background:var(--field);border:1px solid var(--glass-line);border-radius:12px;padding:10px 12px}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--ink)}
.defs{position:absolute}
h1,h2,p,dl,dd,ol,ul{margin:0;padding:0}

/* An enchanted forest at night. Four standing stones light one rune per step; the gate turns gold at the claim. */
.app{position:fixed;inset:0;overflow:hidden;overflow:clip;background:var(--ink);
  --far:#1b2a55;--mid:#10193c;--near:#080d24;--bark:#090e27;--stone:#2a3560;--stars:.3}
.app[data-sky=night]{--far:#0e2140;--mid:#091530;--near:#050a1c;--bark:#050a1c;--stone:#1a2a4c;--stars:.6}
.app[data-sky=predawn]{--far:#143a55;--mid:#0c2238;--near:#061220;--bark:#061220;--stone:#1f3f5c;--stars:.4}
.app[data-sky=dawn]{--far:#1a5563;--mid:#0e2f3d;--near:#071925;--bark:#071925;--stone:#25505f;--stars:.15}
.app[data-sky=sunrise]{--far:#6a4b63;--mid:#37263f;--near:#1a1226;--bark:#1a1226;--stone:#5b4256;--stars:.05}
.sky{position:absolute;inset:0;pointer-events:none}
.sky-layer{position:absolute;inset:0;opacity:0;transition:opacity var(--day) ease}
.sky-dusk{background:linear-gradient(#0d1030 0,#181a48 42%,#29386a 68%,#3c6484 92%)}
.sky-night{background:linear-gradient(#050a1c 0,#09132e 50%,#0e2746 78%,#143a56 95%)}
.sky-predawn{background:linear-gradient(#08122a 0,#0e2542 46%,#184660 72%,#2a7079 94%)}
.sky-dawn{background:linear-gradient(#0b1434 0,#172c58 42%,#1c5a6e 70%,#3f9d8c 93%)}
.sky-sunrise{background:linear-gradient(#131336 0,#2b2860 42%,#664868 68%,#b9835a 88%,#e4b56a 98%)}
.app[data-sky=dusk] .sky-dusk,.app[data-sky=night] .sky-night,.app[data-sky=predawn] .sky-predawn,
.app[data-sky=dawn] .sky-dawn,.app[data-sky=sunrise] .sky-sunrise{opacity:1}
.stars{position:absolute;inset:0 0 40%;opacity:var(--stars);transition:opacity var(--day);
  background-image:radial-gradient(1.2px 1.2px at 40px 60px,#fff,#0000),radial-gradient(1px 1px at 210px 40px,#fff,#0000),radial-gradient(1.4px 1.4px at 300px 190px,#d8f4ff,#0000),radial-gradient(1px 1px at 110px 280px,#fff,#0000);
  background-size:380px 380px}
.moon{position:absolute;top:calc(var(--top) + 118px);right:15%;width:54px;height:54px;border-radius:50%;opacity:.85;
  background:radial-gradient(circle at 62% 34%,#b9d0da 0 9%,#0000 10%),radial-gradient(circle at 36% 62%,#bcd2db 0 13%,#0000 14%),radial-gradient(circle at 38% 34%,#f6fbff,#d9e8ee 70%,#bdd3dd);box-shadow:0 0 30px 6px #cfe8f02e;transition:transform var(--day) var(--glide),opacity var(--day)}
.app[data-sky=night] .moon{transform:translate(-6px,-6px);opacity:.95}
.app[data-sky=predawn] .moon{transform:translate(-70px,16px) scale(.92);opacity:.7}
.app[data-sky=dawn] .moon{transform:translate(-160px,40px) scale(.84);opacity:.32}
.app[data-sky=sunrise] .moon{transform:translate(-210px,70px) scale(.75);opacity:0}
.far-forest,.land{position:absolute;left:0;right:0;bottom:0;width:100%}
.far-forest{height:46%;fill:var(--far);opacity:.75;transition:fill var(--day)}
.land{height:38%}
.land path,.tree{transition:fill var(--day)}
.ground-far{fill:var(--far)}
.ground-mid{fill:var(--mid)}
.ground-near{fill:var(--near)}
.stones{fill:var(--stone);transition:fill var(--day)}
.rune{stroke:#7ff0dc;opacity:.1;transition:opacity 1.4s,stroke var(--day)}
.app[data-sky=night] .rune-1,.app[data-sky=predawn] :is(.rune-1,.rune-2),.app[data-sky=dawn] :is(.rune-1,.rune-2,.rune-3),.app[data-sky=sunrise] .rune{opacity:1;filter:drop-shadow(0 0 3px currentColor);color:#7ff0dc}
.app[data-sky=sunrise] .rune{stroke:#ffe59a;color:#ffd262}
.tree{position:absolute;top:0;bottom:0;height:100%;width:auto;max-width:52%;fill:var(--bark)}
.tree-left{left:0}
.tree-right{right:0}
.mist{position:absolute;left:0;bottom:24%;width:220%;height:26%;opacity:.5;
  background:radial-gradient(ellipse 28% 42% at 22% 55%,#bfe0e440,#0000),radial-gradient(ellipse 22% 34% at 58% 44%,#bfe0e433,#0000),radial-gradient(ellipse 26% 40% at 84% 60%,#bfe0e43d,#0000);animation:drift 70s ease-in-out infinite alternate}
.mist-low{bottom:4%;height:20%;opacity:.3;animation-duration:95s;animation-direction:alternate-reverse}
.aura{position:absolute;left:50%;bottom:9%;width:320px;height:320px;margin-left:-160px;border-radius:50%;opacity:0;transition:opacity var(--day)}
.aura-arcane{background:radial-gradient(circle,#7ff0dc66,#7ff0dc1a 42%,#0000 68%)}
.aura-gold{background:radial-gradient(circle,#fff0b0,#ffd26299 34%,#ffb45e33 54%,#0000 70%)}
.app[data-sky=predawn] .aura-arcane{opacity:.35}
.app[data-sky=dawn] .aura-arcane{opacity:.85}
.app[data-sky=sunrise] .aura-gold{opacity:1}
.fx{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fffdf0,#ffd76e 55%,#ff9a5e)}

.screens{position:absolute;inset:0;margin:auto;max-width:480px}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;
  padding:calc(var(--top) + 12px) 18px calc(var(--bottom) + 16px);animation:screen-in .5s var(--glide) both}
.screen-entry,.screen-field{overflow-y:auto;overscroll-behavior-y:contain}
.ghost,.ghost *{animation:none!important;transition:none!important;pointer-events:none!important}

button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.primary,.secondary{position:relative;display:block;width:100%;min-height:56px;padding:12px 16px;border-radius:19px;font-size:17px;font-weight:800;letter-spacing:.005em;overflow:hidden;
  transition:transform .35s var(--spring),box-shadow .25s,background .3s,color .3s,opacity .3s}
.primary{border:0;background:linear-gradient(#fff0b0,#ffd262 42%,#f0a92f);color:var(--gold-ink);
  box-shadow:inset 0 1.5px 0 #fff9dc,inset 0 -2px 0 #c67f1c,0 3px 0 #8c5610}
.primary:active:not(:disabled){transform:translateY(4px) scale(.985);transition-duration:.08s;box-shadow:inset 0 1.5px 0 #fff9dc,inset 0 -2px 0 #c67f1c,0 1px 0 #8c5610,0 5px 12px #ffb84a44}
.primary:disabled{background:#ffffff1f;color:var(--dim);box-shadow:inset 0 0 0 1px #ffffff1f}
.primary-call:not(:disabled){animation:call 1.8s ease-in-out infinite}
.secondary{border:1px solid var(--glass-line);background:var(--glass);color:var(--text);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.secondary:active:not(:disabled){transform:scale(.97);transition-duration:.08s}
.secondary:disabled{color:var(--dim)}
.link{border:0;background:none;padding:8px 0;min-height:44px;color:var(--gold);font-size:15px;font-weight:700;transition:opacity .2s,transform .3s var(--spring)}
.link:active{opacity:.6;transform:scale(.96)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 13px;border:1px solid var(--glass-line);border-radius:99px;background:var(--glass);color:var(--text);font-size:13px;font-weight:700;white-space:nowrap;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .3s var(--spring),color .4s,border-color .4s}
button.chip:active{transform:scale(.94);transition-duration:.08s}
.chip-status{color:var(--muted)}
.chip-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.7}
.chip-status[data-tone=good]{color:var(--good);border-color:#7ff0b466}
.chip-status[data-tone=good]::before{opacity:1}
.chip-status[data-tone=warn]{color:var(--warn);border-color:#ffb97a66}
.chip-status[data-tone=warn]::before{opacity:1}
.icon-button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--glass-line);border-radius:50%;background:var(--glass);color:var(--text);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .3s var(--spring)}
.icon-button:active{transform:scale(.88);transition-duration:.08s}
.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.topbar{display:flex;align-items:center;gap:8px;flex:none;min-height:44px;position:relative;z-index:2}
.spacer{flex:1}
.quiet{font-size:13px;color:var(--muted);text-align:center;text-shadow:0 1px 6px #0009}
.fineprint{font-size:12px;color:var(--dim)}
.alert{flex:none;padding:10px 13px;border-radius:14px;background:#5a1f3ad9;border:1px solid #ff9db066;color:#ffe3e6;font-size:14px;overflow-wrap:anywhere;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:drop-in .45s var(--spring) both}
.row{display:flex;gap:10px}
.row>*{flex:1;min-width:0}
.art{display:block;width:100%;height:100%;overflow:visible}

/* Rotating light kept for the claim only. */
.rays{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;margin:0;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#ffe39a2e 0 10deg,#ffe39a00 10deg 36deg);
  -webkit-mask-image:radial-gradient(circle,#000 14%,#0000 60%);mask-image:radial-gradient(circle,#000 14%,#0000 60%);animation:spin 26s linear infinite}

/* Loading */
.screen-loading{align-items:center;justify-content:center;color:var(--muted);gap:18px;font-family:var(--serif);font-size:18px;font-style:italic}
.loader{position:relative;width:128px;height:128px;display:grid;place-items:center}
.loader::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #ffffff1c;border-top-color:var(--gold);animation:spin 1.1s linear infinite}
.loader .art{width:74px;height:60px;animation:bob 2.2s ease-in-out infinite}

/* Entry */
.screen-entry[data-keyboard="true"]:has(#entry-form:not([hidden])){top:var(--entry-top);bottom:var(--entry-bottom)}
.screen-entry[data-keyboard="true"]:has(#entry-form:not([hidden])) .hero{display:none}
.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.hero-art{position:relative;flex:0 1 112px;min-height:0;aspect-ratio:16/13;max-width:150px;animation:chest-land .9s var(--spring) both .08s}
.hero-art .art{position:relative;animation:bob 3.4s ease-in-out infinite;filter:drop-shadow(0 10px 14px #0007)}
.wordmark{display:flex;flex-direction:column;align-items:center;font-weight:400;line-height:1;animation:rise-in .8s var(--glide) both .25s}
.wordmark small{font-family:var(--serif);font-size:clamp(14px,4.4vw,18px);letter-spacing:.52em;margin-right:-.52em;text-transform:uppercase;color:var(--text);text-shadow:0 1px 10px #0008}
.wordmark span{font-family:var(--display);font-style:italic;font-size:clamp(64px,21vw,92px);line-height:1.04;letter-spacing:-.015em;padding:0 .12em .06em;
  background:linear-gradient(100deg,#ffb94a 0,#fff4c6 28%,#ffd066 46%,#fffbe6 56%,#ffc14f 76%,#ffe9a8 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gilt 7s ease-in-out infinite alternate}
.hero p{font-size:16px;color:var(--text);max-width:31ch;text-shadow:0 1px 10px #0009;animation:rise-in .8s var(--glide) both .4s}
.panel{flex:none;display:flex;flex-direction:column;gap:10px;animation:rise-in .55s var(--glide) both .5s}
.panel-card{padding:14px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);animation:panel-in .5s var(--spring) both}
.panel-head{display:flex;align-items:center;gap:12px}
.panel-head h2{font-family:var(--serif);font-size:22px;font-weight:700}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-error{color:var(--bad);font-size:13px}
label{font-size:14px;font-weight:700;color:var(--muted)}
input:not([type=range]),textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--glass-line);border-radius:15px;background:var(--field);color:var(--text);font-size:16px;transition:border-color .25s,box-shadow .25s}
input:not([type=range]):focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px #ffcf5c33}
input[aria-invalid=true],input[aria-invalid=true]:focus{border-color:var(--bad)}
input::placeholder,textarea::placeholder{color:var(--dim)}
.code-input{text-transform:uppercase;letter-spacing:.16em;font-weight:800}
.code-input::placeholder{text-transform:none;letter-spacing:0;font-weight:400}

/* Field */
.steps{position:relative;flex:none;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;--s:0}
.steps[data-step="1"]{--s:1}
.steps[data-step="2"]{--s:2}
.steps[data-step="3"]{--s:3}
.steps::before,.steps::after{content:"";position:absolute;left:12.5%;right:12.5%;top:6px;height:3px;border-radius:3px;background:#ffffff2e}
.steps::after{background:linear-gradient(90deg,#ffb94a,#ffe9a8);transform-origin:left;transform:scaleX(calc(var(--s)/3));transition:transform .9s var(--glide)}
.steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--dim);text-shadow:0 1px 6px #0009;transition:color .5s}
.steps li::before{content:"";width:15px;height:15px;border-radius:50%;background:#3a3362;border:2px solid #ffffff4d;transition:background .5s,border-color .5s,box-shadow .5s,transform .6s var(--spring)}
.steps .done{color:var(--muted)}
.steps .done::before{background:var(--gold);border-color:#fff0b0}
.steps .current{color:var(--gold)}
.steps .current::before{background:#fff4c6;border-color:var(--gold);transform:scale(1.2);box-shadow:0 0 0 4px #ffcf5c2e}

.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.gauge,.collected{position:relative;flex:0 1 auto;min-height:0;height:100%;max-height:min(56vw,236px);aspect-ratio:1}
.gauge{animation:gauge-in .7s var(--spring) both}
.gauge-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;overflow:visible}
.gauge-disc{fill:#0e0b2c52}
.gauge-track{stroke:#ffffff1f;stroke-width:9}
.gauge-arc{stroke:var(--gauge);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s var(--glide),stroke .6s}
.gauge-head{transform-origin:100px 100px;transform:rotate(var(--angle,0deg));transition:transform .8s var(--glide);opacity:0}
.gauge[data-lit="1"] .gauge-head{opacity:1}
.gauge-head-glow{fill:none}
.gauge-head-dot{fill:#fff}
.gauge-zone{stroke:var(--gold);stroke-width:1.5;opacity:0;transform-origin:100px 100px;transform:scale(var(--zone,.3));transition:transform .35s var(--spring),opacity .4s;fill:#ffcf5c14}
.gauge[data-zone="1"] .gauge-zone{opacity:1}
.gauge{--gauge:#c9c2dd}
.gauge[data-tone=good]{--gauge:var(--good)}
.gauge[data-tone=warn]{--gauge:var(--warn)}
.gauge[data-tone=gold]{--gauge:var(--gold)}
.ping{position:absolute;inset:8%;border-radius:50%;border:1.5px solid var(--gauge);opacity:0;pointer-events:none}
.gauge[data-heat="1"] .ping,.gauge[data-heat="2"] .ping,.gauge[data-heat="3"] .ping{animation:ping var(--beat,3.6s) ease-out infinite}
.gauge[data-heat="2"]{--beat:2.4s}
.gauge[data-heat="3"]{--beat:1.4s}
.gauge-glyph{position:absolute;left:29%;top:19%;width:42%;height:36%;overflow:visible;opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s var(--spring);filter:drop-shadow(0 8px 12px #0008)}
.gauge[data-empty="1"] .gauge-glyph{opacity:1;transform:none;animation:bob 3.2s ease-in-out infinite}
.gauge-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14%}
.gauge-core strong{font-family:var(--serif);font-size:clamp(44px,15vw,66px);font-weight:700;font-variant-numeric:tabular-nums lining-nums;line-height:1;letter-spacing:-.02em;text-shadow:0 2px 14px #0007}
.gauge-core span{font-size:13px;font-weight:600;color:var(--muted)}
.gauge[data-empty="1"] .gauge-core{justify-content:flex-end;padding-bottom:21%}
.gauge[data-empty="1"] .gauge-core strong{display:none}

.collected{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:none}
.rays-big{width:200%;animation:rays-in 1s ease-out both .5s,spin 40s linear infinite .5s}
.chest-live{position:relative;flex:1 1 auto;min-height:0;width:80%;overflow:visible;filter:drop-shadow(0 14px 26px #0009);animation:chest-land .75s var(--spring) both}
.chest-body{fill:var(--chest-paint,url(#g-wood))}
.chest-lid{fill:var(--chest-paint,url(#g-lid))}
.chest-trim{fill:var(--chest-metal,url(#g-gold))}
[data-card="campus-compass"]{--chest-paint:url(#g-compass-chest)}
[data-card="workshop-gear"]{--chest-paint:url(#g-gear-chest);--chest-metal:url(#g-copper-trim)}
[data-card="library-bookmark"]{--chest-paint:url(#g-book-chest)}
[data-card="circuit-key"]{--chest-paint:url(#g-circuit-chest);--chest-metal:url(#g-mint-trim)}
[data-card="studio-sketch"]{--chest-paint:url(#g-sketch-chest);--chest-metal:url(#g-ink-trim)}
[data-card="garden-lantern"]{--chest-paint:url(#g-lantern-chest)}
.collected[data-card]:not([data-card=""]) .chest-keyhole{display:none}
.lid-shut,.lid-open,.hoard{transform-box:fill-box;transform-origin:50% 100%}
.lid-shut{animation:lid-shut .22s ease-in both .42s}
.lid-open{animation:lid-open .38s var(--spring) both .62s}
.hoard{animation:hoard .6s var(--spring) both .66s;transform-origin:50% 100%}
.receipt{position:relative;flex:none;margin-top:6px;padding:5px 13px;border-radius:99px;background:#1a0d2ec9;border:1px solid #ffcf5c66;font-size:12.5px;font-weight:700;color:#ffeab0;white-space:nowrap;animation:rise-in .6s var(--glide) both 1.1s}
.headline{flex:none;font-family:var(--serif);font-size:clamp(28px,8.6vw,35px);font-weight:700;letter-spacing:-.005em;line-height:1.12;text-shadow:0 2px 14px #000a}
.message{flex:none;font-size:16px;font-weight:500;color:var(--text);max-width:33ch;overflow-wrap:anywhere;text-shadow:0 1px 9px #000b}
.app[data-sky=sunrise] .message,.app[data-sky=dawn] .message{text-shadow:0 1px 2px #2c0d3acc,0 1px 14px #2c0d3a}
.app[data-sky=sunrise] .headline{color:#fff4c6;text-shadow:0 2px 3px #2c0d3a99,0 2px 18px #2c0d3a}
.readouts{flex:none;display:flex;justify-content:center;gap:16px;animation:rise-in .5s var(--glide) both}
.readouts div{display:flex;align-items:baseline;gap:5px}
.readouts dt{font-size:12px;color:var(--muted)}
.readouts div{text-shadow:0 1px 5px #000c}
.readouts dd{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dock{flex:none;display:flex;flex-direction:column;gap:8px}
.dock>*{animation:dock-in .5s var(--spring) both}
.dock .link{align-self:center;min-height:36px;padding:4px 16px}
.place-panel{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3)}
.place-panel label{display:flex;justify-content:space-between;color:var(--text)}
.place-panel output{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
input[type=range]{--pct:18%;width:100%;height:30px;margin:0;background:none;-webkit-appearance:none;appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffb94a,#ffe9a8 var(--pct),#ffffff2e var(--pct))}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#ffb94a,#ffe9a8 var(--pct),#ffffff2e var(--pct))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;border:3px solid #fff6d0;background:radial-gradient(circle at 38% 32%,#fff6d0,#f6b93a);box-shadow:0 3px 10px #0008,0 0 14px #ffcf5c99}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;border:3px solid #fff6d0;background:#f6b93a}

/* Camera */
.screen-camera{background:#000;padding:0;animation:iris .62s cubic-bezier(.5,0,.2,1) both}
.screen-camera .topbar{padding:calc(var(--top) + 12px) 16px 0}
.screen-camera .chip,.screen-camera .icon-button{background:#000a;border-color:#fff4}
video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.camera-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,#1f1a4d,#07061a)}
.reticle{position:relative;width:min(62vw,240px);aspect-ratio:1;animation:scan 1.8s ease-in-out infinite}
.reticle i{position:absolute;width:26%;height:26%;border:3px solid var(--gold);filter:drop-shadow(0 0 6px #ffcf5c)}
.reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:18px}
.reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:18px}
.reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:18px}
.reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:18px}
.treasure{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;border:0;padding:0;overflow:hidden;background:radial-gradient(circle at 50% 47%,#ffcf5c26,#0000 40%);color:#fff;font-size:17px;font-weight:800}
.treasure .art{position:relative;width:min(44vw,180px);height:auto;aspect-ratio:16/13;filter:drop-shadow(0 18px 26px #000c);animation:materialize .8s var(--spring) both,bob 2.6s ease-in-out infinite .8s;transition:scale .3s var(--spring)}
.treasure:active .art{scale:.92}
.shock{position:absolute;left:50%;top:47%;width:120px;height:120px;margin:-60px;border-radius:50%;border:4px solid #fff0b0;animation:shock .9s ease-out both}
.treasure span{position:relative;padding:9px 18px;border-radius:99px;background:#000a;animation:rise-in .5s var(--glide) both .5s}
.camera-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:26px 18px calc(var(--bottom) + 18px);background:linear-gradient(#0000,#000c);text-align:center;font-size:15px;font-weight:600;pointer-events:none}
.camera-foot button{pointer-events:auto}

/* Sheets */
.scrim{position:absolute;inset:0;z-index:5;background:#070420a8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in .3s ease-out both}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;margin:auto;max-width:480px;max-height:92%;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding:24px 18px calc(var(--bottom) + 18px);border-radius:28px 28px 0 0;background:#141a44e6;border-top:1px solid #ffffff33;outline:none;
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);box-shadow:0 -18px 50px #0007;animation:sheet-in .42s cubic-bezier(.22,1,.36,1) both}
.sheet::before{content:"";position:absolute;left:50%;top:9px;width:40px;height:5px;margin-left:-20px;border-radius:5px;background:#ffffff40}
.sheet>*{flex:none}
.sheet-head{display:flex;align-items:center;gap:8px}
.sheet-head h2{flex:1;min-width:0;font-family:var(--serif);font-size:23px;font-weight:700}
.sheet-head h2 b{font-family:ui-rounded,system-ui,sans-serif;font-size:19px;letter-spacing:.08em;color:var(--gold)}
.room-count{display:block;color:var(--muted);font:600 12px ui-rounded,system-ui,sans-serif;letter-spacing:0}
.sheet form{display:flex;flex-direction:column;gap:10px}
.players{list-style:none;display:flex;flex-direction:column;max-height:132px;overflow-y:auto;border-radius:15px;background:var(--field)}
.players li{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;font-size:15px}
.players li+li{border-top:1px solid #ffffff14}
.players span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players em{flex:none;font-style:normal;font-size:13px;font-weight:700;color:var(--gold)}
.identity{display:flex;align-items:center;gap:10px}
.identity p{flex:1;min-width:0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.menu-list{display:flex;flex-direction:column;border-radius:17px;overflow:hidden;background:var(--field)}
.menu-list>*{position:relative;display:block;width:100%;min-height:47px;padding:13px 32px 13px 15px;border:0;border-top:1px solid #ffffff14;background:none;color:var(--text);font-size:15px;font-weight:600;text-align:left;text-decoration:none;transition:background .2s}
.menu-list>*::after{content:"›";position:absolute;right:15px;top:50%;translate:0 -50%;font-size:20px;color:var(--dim)}
.menu-list>*:first-child{border-top:0}
.menu-list>:active:not(:disabled){background:#ffffff1a}
.menu-list>:disabled{color:var(--dim)}
.menu-list>#open-reset:not(:disabled){color:var(--bad)}
.progress-tabs,.treasure-book-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.progress-tabs button{padding-inline:8px;font-size:14px}
.progress-tabs button[aria-pressed="true"]{color:var(--gold);border-color:var(--gold)}
.leaderboard-table{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--field);border-radius:12px;font-size:13px}
.leaderboard-table th,.leaderboard-table td{padding:8px 5px;text-align:left;overflow-wrap:anywhere}
.leaderboard-table th{font-size:11px;color:var(--muted)}
.leaderboard-table th:first-child{width:13%}
.leaderboard-table th:nth-child(3){width:16%}
.leaderboard-table th:last-child{width:24%}
.leaderboard-table tbody tr{border-top:1px solid #ffffff14}
.leaderboard-table tr[data-self="1"]{color:var(--gold)}
.treasure-book-cards{list-style:none}
.treasure-book-cards li{padding:10px;border:1px solid var(--glass-line);border-radius:12px;background:var(--field);overflow-wrap:anywhere}
.treasure-book-cards svg{display:block;width:min(100%,104px);height:auto;margin:0 auto 6px;filter:drop-shadow(0 3px 5px #0006)}
.treasure-book-cards li[data-unlocked="0"] svg{filter:grayscale(1);opacity:.53}
.treasure-book-cards strong{display:block;font-size:14px}
.treasure-book-cards span{font-size:11px;color:var(--muted)}
.treasure-book-cards li[data-unlocked="1"] span,.treasure-reward{color:var(--gold)}
.treasure-book-cards p{margin-top:5px;font-size:12px;line-height:1.35}
textarea{resize:none}

@media (max-width:350px){
  .chip{padding:6px 10px;font-size:12px;gap:5px}
}
@media (max-height:600px){
  .screen{gap:7px;padding-top:calc(var(--top) + 8px);padding-bottom:calc(var(--bottom) + 10px)}
  .primary,.secondary{min-height:48px;font-size:16px}
  .message{font-size:14.5px}
  .hero p{display:none}
  .wordmark span{font-size:clamp(46px,16vw,60px)}
  .gauge-core strong{font-size:clamp(34px,11vw,44px)}
  .gauge-core span{font-size:11.5px}
  .headline{font-size:25px}
  .land{height:26%}
  .far-forest{height:32%}
  .moon{width:40px;height:40px;top:calc(var(--top) + 96px)}
}
@media (max-height:440px){
  .screen-entry .hero,.screen-field .stage{flex-shrink:0}
  .screen-entry .hero-art{display:none}
  .screen-entry:has(#entry-form:not([hidden])) .hero{display:none}
}

@keyframes screen-in{from{opacity:0;transform:scale(.975)}}
@keyframes iris{from{clip-path:circle(0% at 50% 88%)}to{clip-path:circle(150% at 50% 88%)}}
@keyframes rise-in{from{opacity:0;transform:translateY(16px)}}
@keyframes panel-in{from{opacity:0;transform:translateY(26px) scale(.97)}}
@keyframes dock-in{from{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes drop-in{from{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes sheet-in{from{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}
@keyframes gauge-in{from{opacity:0;transform:scale(.8)}}
@keyframes chest-land{0%{opacity:0;transform:translateY(-34px) scale(.72)}}
@keyframes bob{50%{transform:translateY(-8px)}}
@keyframes spin{to{rotate:360deg}}
@keyframes drift{to{transform:translateX(-52%)}}
@keyframes gilt{to{background-position:100% 0}}
@keyframes call{50%{box-shadow:inset 0 1.5px 0 #fff9dc,inset 0 -2px 0 #c67f1c,0 5px 0 #8c5610,0 0 42px 10px #ffcf5ccc}}
@keyframes ping{0%{opacity:.4;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
@keyframes scan{50%{transform:scale(.9);opacity:.65}}
@keyframes materialize{0%{opacity:0;transform:scale(.2) translateY(30px);filter:brightness(4) drop-shadow(0 0 30px #fff)}}
@keyframes shock{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(5)}}
@keyframes rays-in{from{opacity:0}}
@keyframes lid-shut{to{transform:scaleY(0)}}
@keyframes lid-open{from{transform:scaleY(0)}}
@keyframes hoard{from{transform:translateY(42px) scale(.8)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.lid-shut{transform:scaleY(0)}}

/* Functional direction overlay; retain the existing forest screens and visual system. */
.ar-guidance{position:absolute;z-index:2;top:calc(var(--top) + 72px);left:16px;right:16px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;pointer-events:none}
.ar-guidance p{max-width:32ch;padding:6px 12px;background:#000a;border-radius:12px;font-size:14px;text-shadow:0 1px 3px #000}
.ar-arrow{display:block;font-size:54px;line-height:1;color:var(--gold);transform:rotate(var(--bearing-delta,0deg));text-shadow:0 2px 10px #000;transition:transform .1s linear}
.screen-camera{--radar-width:clamp(100px,29vw,124px)}
.screen-camera[data-radar="1"] .ar-guidance{right:calc(var(--radar-width) + 24px)}
.motion-radar{position:absolute;z-index:3;top:calc(var(--top) + 64px);right:12px;width:var(--radar-width);padding:6px;border:1px solid var(--glass-line);border-radius:12px;background:#101326e8;line-height:1.25;text-align:center;pointer-events:none}
.motion-radar header{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.motion-radar header span,.motion-radar p{color:var(--muted);font-size:10px}
.motion-radar svg{display:block;width:100%;height:auto}
.motion-radar circle,.radar-grid{fill:none;stroke:#fff5;stroke-width:.75}
#radar-chest circle,#radar-edge path{fill:var(--gold);stroke:#191527;stroke-width:1}
#radar-you path{fill:var(--good);stroke:#191527;stroke-width:1.5}
.treasure.ar-target{inset:auto;left:50%;top:50%;width:min(34vw,145px);height:auto;aspect-ratio:16/13;transform:translate3d(calc(var(--target-x,0px) - 50%),calc(var(--target-y,0px) - 50%),0);background:none;pointer-events:none;overflow:visible}
.treasure.ar-target .art{width:100%;height:100%;animation:none;filter:drop-shadow(0 6px 14px #000a)}
.aim-reticle{position:absolute;z-index:3;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);display:grid;place-items:center;border:2px solid #fff9;border-radius:50%;color:white;pointer-events:none;box-shadow:0 0 0 3px #0005}
.aim-reticle::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--gold) var(--aim-progress,0%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.aim-reticle span{font-size:24px;text-shadow:0 1px 4px #000}
.aim-reticle[data-ready="1"]{border-color:var(--good);color:var(--good);box-shadow:0 0 18px #7ff0b477}
.aim-reticle[data-ready="1"]::before{background:var(--good)}
#claim:disabled{color:#e0d9e9;background:#17112bdd}
@media(max-height:600px){.ar-guidance{top:calc(var(--top) + 56px);gap:2px}.ar-arrow{font-size:34px}.ar-guidance p{font-size:12px;padding:4px 8px}.camera-foot{gap:6px;padding-top:12px}.camera-foot p{font-size:12px}}

/* GPS recovery and the functional camera companion. */
.gps-spinner{width:38px;height:38px;border:3px solid #ffffff45;border-top-color:var(--gold);border-radius:50%;animation:gps-spin 1s linear infinite}
@keyframes gps-spin{to{transform:rotate(360deg)}}
.guide-controls{position:absolute;z-index:4;right:12px;left:12px;bottom:calc(var(--bottom) + 172px);display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.guide-preview{pointer-events:auto;max-width:290px;max-height:66px;overflow:hidden;text-align:left;border:1px solid var(--glass-line);border-radius:12px;background:#101326dd;padding:8px 10px;font-size:12px;line-height:1.35}
.assist-launchers{position:absolute;z-index:7;top:calc(var(--top) + 12px);left:max(18px,calc(50% - 222px));display:flex;align-items:center;gap:6px}
.assist-launchers .chip{min-height:44px;background:#161a33ec}
.assist-launchers .icon-button{background:#161a33ec}
.app[data-assist="1"] :is(.screen-entry,.screen-field) .topbar{padding-left:128px}
.app[data-assist="1"] .screen-camera .topbar{padding-left:146px}
.app[data-assist="1"] .sheet{max-height:calc(100% - var(--top) - 66px)}
#open-account{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
#location-status,#camera-status{min-width:0;white-space:normal;line-height:1.15}
#location-status::before,#camera-status::before{flex:none}
.guide-scrim,.guide-panel{visibility:hidden;opacity:0;pointer-events:none}
.guide-scrim{position:absolute;inset:0;z-index:10;background:#06051599;transition:opacity .17s ease-in,visibility 0s linear .17s}
.guide-panel{position:absolute;z-index:11;left:10px;right:10px;bottom:calc(var(--bottom) + 8px);max-width:460px;margin:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--glass-line);border-radius:18px;background:#101326f5;box-shadow:0 10px 30px #0008;font-size:14px;
  transform:translate3d(0,22px,0) scale(.974);transform-origin:center bottom;transition:opacity .16s ease-in,transform .2s cubic-bezier(.45,0,.8,.4),visibility 0s linear .2s}
.guide-scrim[data-open="true"],.guide-panel[data-open="true"]{visibility:visible;opacity:1;pointer-events:auto}
.guide-scrim[data-open="true"]{transition:opacity .19s ease-out}
.guide-panel[data-open="true"]{transform:none;transition:opacity .17s ease-out,transform .34s cubic-bezier(.18,.95,.32,1.18)}
.guide-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.guide-panel header div{min-width:0}.guide-panel header p{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.guide-panel[data-waiting="true"] #guide-status::after{content:"";display:inline-block;width:4px;height:4px;margin-inline-start:7px;vertical-align:2px;border-radius:50%;background:#ffcf5c55;
  box-shadow:6px 0 #ffcf5c55,12px 0 #ffcf5c55;animation:guide-wait .95s ease-in-out infinite}
@keyframes guide-wait{
  24%{background:var(--gold);box-shadow:6px 0 #ffcf5c55,12px 0 #ffcf5c55}
  48%{background:#ffcf5c55;box-shadow:6px 0 var(--gold),12px 0 #ffcf5c55}
  72%{background:#ffcf5c55;box-shadow:6px 0 #ffcf5c55,12px 0 var(--gold)}
}
.guide-messages{min-height:50px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;flex:1;display:flex;flex-direction:column;gap:8px}
.guide-message{--guide-bubble-x:-12px;border-radius:10px;background:#ffffff0c;padding:8px;overflow-wrap:anywhere;white-space:pre-wrap;transform-origin:left bottom}.guide-message strong{display:block;font-size:10px;color:var(--gold);margin-bottom:3px}.guide-user{--guide-bubble-x:16px;background:#ffffff18;transform-origin:right bottom}
.guide-message[data-entering]{animation:guide-bubble-pop .32s cubic-bezier(.2,.72,.28,1) both}
@keyframes guide-bubble-pop{
  from{opacity:.35;transform:translate(var(--guide-bubble-x),10px) scale(.84)}
  65%{opacity:1;transform:translateY(-2px) scale(1.022)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .guide-message[data-entering]{animation:guide-bubble-fade .16s ease-out both!important}
}
@keyframes guide-bubble-fade{from{opacity:.45}to{opacity:1}}
.guide-tutorial-offer{margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-line)}
.guide-tutorial-offer p{margin-bottom:6px;color:var(--muted);font-size:12px;line-height:1.35}
.guide-tutorial-actions{display:flex;flex-wrap:wrap;gap:6px}
.guide-tutorial-actions .chip{min-height:44px}
.guide-tutorial-open{border-color:var(--gold);color:var(--gold)}
.guide-questions{display:flex;flex-wrap:wrap;gap:5px}.guide-questions .chip{font-size:11px;padding:6px 8px}
.guide-form{display:flex;gap:6px}.guide-form input{min-width:0;flex:1;border:1px solid var(--glass-line);border-radius:10px;background:#0003;padding:10px;font-size:16px}.guide-form button{flex:none}
.guide-notice{font-size:10px;line-height:1.3;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-height:600px){.guide-controls{bottom:calc(var(--bottom) + 140px)}.guide-panel{gap:6px;padding:9px}.guide-preview{max-height:50px}.guide-notice{font-size:9px}}

.guide-panel{bottom:calc(var(--bottom) + 8px + var(--guide-keyboard,0px));max-height:min(470px,calc(var(--guide-visible-height,100dvh) - 20px));overflow:hidden}
.guide-panel header,.guide-form,.guide-questions,.guide-notice{flex-shrink:0}.guide-messages{min-height:24px}
.guide-panel[data-keyboard="true"] .guide-questions{display:none}
@media(max-height:360px){.guide-questions{display:none}.guide-panel{gap:4px}.guide-notice{font-size:9px}}

.tutorial-overlay{--tutorial-detail-time:.2s;position:absolute;inset:0;z-index:12;pointer-events:none;animation:tutorial-overlay-enter .24s ease-out both}
.tutorial-overlay::before{content:"";position:absolute;inset:0;background:#060515ae;transition:opacity var(--tutorial-detail-time) ease-out}
.tutorial-overlay[data-target="true"][data-step-phase="ready"]::before{opacity:0}
.tutorial-overlay[data-choosing="true"]{pointer-events:auto}
.tutorial-spotlight{position:absolute;border:2px solid var(--gold);border-radius:12px;box-shadow:0 0 0 200vmax #060515ae;opacity:0;transition:opacity var(--tutorial-detail-time) ease-out}
.tutorial-overlay[data-step-phase="ready"] .tutorial-spotlight{opacity:1}
.tutorial-arrow{position:absolute;top:0;left:0;z-index:1;pointer-events:none;color:var(--gold);font-size:30px;line-height:1.2;text-shadow:0 1px 6px #000}
.tutorial-card{position:absolute;pointer-events:auto;left:12px;right:12px;bottom:calc(var(--tutorial-bottom,0px) + max(12px,var(--bottom)));max-width:400px;margin:auto;
  max-height:min(var(--tutorial-card-space,440px),calc(var(--tutorial-height,100dvh) - 28px));overflow-y:auto;overscroll-behavior:contain;display:grid;gap:8px;
  padding:12px;border:1px solid var(--glass-line);border-radius:18px;background:#101326fa;box-shadow:0 10px 30px #0008;font-size:14px;
  transition:opacity var(--tutorial-detail-time) ease-out}
.tutorial-overlay[data-choosing="true"] .tutorial-card{animation:tutorial-card-enter .28s .04s cubic-bezier(.2,.78,.25,1) both}
.tutorial-overlay[data-side="top"] .tutorial-card{bottom:auto;top:calc(var(--tutorial-top,0px) + max(12px,var(--top)))}
.tutorial-overlay[data-step-phase="leaving"] :is(.tutorial-card,.tutorial-spotlight){opacity:calc(var(--tutorial-detail-opacity,1)*var(--tutorial-exit-alpha,1));pointer-events:none;transition:none}
.tutorial-overlay[data-step-phase="flying"] :is(.tutorial-card,.tutorial-spotlight){opacity:0;visibility:hidden;pointer-events:none;transition:none}
.tutorial-overlay[data-closing="true"]{opacity:0;animation:tutorial-overlay-exit .22s ease-out both}
.tutorial-overlay[data-closing="true"],.tutorial-overlay[data-closing="true"] .tutorial-card{pointer-events:none}
@keyframes tutorial-overlay-enter{from{opacity:0}to{opacity:1}}
@keyframes tutorial-card-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tutorial-overlay-exit{from{opacity:var(--tutorial-close-opacity,1)}to{opacity:0}}
.tutorial-card header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tutorial-card h2{font:700 18px var(--serif)}
.tutorial-card p{color:var(--muted);line-height:1.35}
.tutorial-choices{display:grid;gap:8px}
.tutorial-choices .secondary{min-height:44px;padding:8px 12px;font-size:14px;animation:tutorial-choice-enter .22s var(--tutorial-choice-delay,.06s) ease-out both}
@keyframes tutorial-choice-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Mode choices share the existing sheet and button styling. */
.sheet-actions{display:grid;gap:8px}
#mode-question{font-weight:800;text-align:center}