/* The boot curtain paints before any game UI or display effect is exposed. */
#boot-screen{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;overflow:hidden;background:#000;color:#dcca91;isolation:isolate;opacity:1;transition:opacity calc(.8s / 1.3) ease;touch-action:manipulation}
#boot-screen[hidden]{display:none}
#boot-screen.leaving{opacity:0;pointer-events:none}
#boot-screen::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#29351e66,transparent 65%);pointer-events:none;opacity:0;transition:opacity calc(.45s / 1.3) ease}
#boot-screen.entry-ready::before{opacity:1}
#boot-screen.between::before{opacity:0}
.boot-card{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity calc(.45s / 1.3) ease;perspective:900px;pointer-events:none}
.boot-card.active{opacity:1}
.boot-footer{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:12px var(--font-ui,monospace)}
.boot-footer[hidden]{display:none}
body #boot-begin{position:relative;z-index:2;max-width:calc(100vw - 48px);padding:18px 28px;border:1px solid #a8956055;border-radius:3px;background:#122016;color:#dfd1a5;font:400 clamp(16px,3vw,26px)/1.4 var(--font-ui,monospace);cursor:pointer;filter:none;box-shadow:0 0 40px #8b814515;min-height:56px;opacity:0;visibility:hidden;transition:opacity .8s ease}
body #boot-screen.entry-ready #boot-begin{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){body #boot-begin{transition:opacity .15s linear}}
body #boot-begin:hover,body #boot-begin:focus-visible{border-color:#e5c779;background:#283521;outline:2px solid #e5c779;outline-offset:5px}
#boot-status{margin:0;display:flex;align-items:center;gap:10px;min-height:24px}
#boot-status::before{content:"";display:block;width:9px;height:12px;border-radius:45% 45% 55% 55%;background:linear-gradient(#8a713c 30%,#e5bd60 31%);box-shadow:0 0 12px #d9bb5977;animation:boot-breathe 1.3s ease-in-out infinite}
body :is(#boot-skip,#boot-sound){border:1px solid #a8956055;border-radius:3px;background:#122016;color:#dfd1a5;padding:8px 14px;font:inherit;cursor:pointer;filter:none;box-shadow:none;min-height:36px}
body :is(#boot-skip,#boot-sound):hover,body :is(#boot-skip,#boot-sound):focus-visible{border-color:#e5c779;background:#283521;outline:2px solid #e5c779;outline-offset:3px}
@keyframes boot-breathe{50%{opacity:.4;box-shadow:0 0 3px #d9bb5933}}
@media(prefers-reduced-motion:reduce){#boot-screen,#boot-screen::before,.boot-card{transition:opacity .15s linear}.boot-card:is(.active,.fading) .boot-art *{animation:none!important;transform:none!important}.studio-window{opacity:1!important}.system-leaf{opacity:0!important}.graphics-sparkle{display:none}#boot-status::before{animation:none}}

#boot-status{margin-right:auto}body #boot-screen button[hidden]{display:none}@media(max-width:420px){.boot-footer{left:16px;right:16px;gap:8px;font-size:10px}body #boot-screen button{padding:7px 9px}}

/* Unequal lead-ins and long final holds give each fake brand an over-serious bow. */
/* Separate raster layers keep the lettering still until the timed contact. */
.boot-art{position:relative;width:min(900px,88vw,114dvh);aspect-ratio:3/2}
.boot-card:is(.active,.fading) .boot-art{animation:boot-reveal .85s ease-in-out both}
@keyframes boot-reveal{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.boot-card:is(.active,.fading) .boot-art{animation-duration:.15s}}
.boot-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;pointer-events:none}
.studio-house{clip-path:inset(0 0 38% 0)}
.studio-letters{clip-path:inset(61% 0 0 0);transform-origin:50% 88%}
.studio-hammer{clip-path:polygon(45.2% 48.8%,47.6% 47.6%,48.4% 48.7%,47.8% 50%,48.1% 54%,47.4% 54.2%,46.6% 50.3%,45.6% 50.4%);transform-origin:47.5% 54%}
.studio-gear{clip-path:circle(2.05% at 48.85% 54.85%);transform-origin:48.85% 54.85%}
.studio-window{clip-path:ellipse(2.55% 4% at 57.8% 28.6%);opacity:0}
.boot-art .studio-badge{inset:auto;left:35%;bottom:1%;width:30%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 3px #0009)}
.studio-art .studio-credit{position:absolute;top:100%;left:0;width:100%;margin:12px 0 0;padding:0;text-align:center;color:#a99c7c;font:400 clamp(9px,1.15vw,12px)/1.8 Arial,sans-serif;letter-spacing:.035em;text-shadow:0 1px 3px #000}
.studio-credit span{color:#817b69;font-size:.9em}
.graphics-letters{transform-origin:50% 92%}
/* Keep every pose, including reduced motion, clear of the credit line. */
.graphics-acorn{clip-path:inset(0 0 31% 0);transform-origin:49% 67%;translate:0 -6%}
.graphics-sparkle{position:absolute;left:49%;top:61%;width:4%;aspect-ratio:1;background:#fff7c4;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);opacity:0;filter:drop-shadow(0 0 12px #ffe095);transform:translate(-50%,-50%) scale(0)}
.boot-card:is(.active,.fading) .studio-hammer{animation:studio-taps 1.6s .35s linear both}
.boot-card:is(.active,.fading) .studio-gear{animation:studio-turn 1.3s 1.57s ease-out both}
.boot-card:is(.active,.fading) .studio-window{animation:studio-light .7s 2.41s ease-out both}
.boot-card:is(.active,.fading) .studio-letters{animation:letter-bounce .75s 1.57s ease-out both}
.boot-card:is(.active,.fading) .graphics-acorn{animation:acorn-land 1.8s .3s linear both}
.boot-card:is(.active,.fading) .graphics-letters{animation:letter-impact .52s .804s ease-out both}
.boot-card:is(.active,.fading) .graphics-sparkle{animation:acorn-sparkle .6s .804s ease-out both}
@keyframes studio-taps{0%,26%,60%,100%{transform:rotate(-24deg)}10%,41%,76%{transform:rotate(8deg)}18%,49%,85%{transform:rotate(-8deg)}}
@keyframes studio-turn{from{transform:rotate(0)}to{transform:rotate(120deg)}}
@keyframes studio-light{from{opacity:0;filter:brightness(.6)}to{opacity:1;filter:brightness(1.3) drop-shadow(0 0 8px #ffd66b)}}
@keyframes letter-bounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-1.4%)}65%{transform:translateY(.5%)}}
/* Source seconds: contact .804, rebound 1.308, tap 1.704, settle 2.1.
   Accelerate into each contact and decelerate out: no floaty symmetric easing. */
@keyframes acorn-land{
  0%{transform:translate(-9%,-46%) rotate(-28deg) scale(.94,1.06);animation-timing-function:cubic-bezier(.55,0,.9,.45)}
  25%{transform:translate(0,1%) rotate(5deg) scale(.91,1.12);animation-timing-function:ease-out}
  28%{transform:translate(0,3%) rotate(5deg) scale(1.16,.8);animation-timing-function:cubic-bezier(.12,.7,.25,1)}
  42%{transform:translate(3%,-11%) rotate(13deg) scale(.96,1.05);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  56%{transform:translate(1%,3%) rotate(-7deg) scale(1.08,.9);animation-timing-function:cubic-bezier(.15,.7,.3,1)}
  67%{transform:translate(-1%,-2%) rotate(-5deg) scale(.98,1.025);animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  78%{transform:translate(0,3%) rotate(3deg) scale(1.035,.96);animation-timing-function:ease-out}
  88%{transform:translate(0,2.5%) rotate(-1.5deg) scale(1,1.01)}
  100%{transform:translate(0,3%) rotate(0) scale(1)}
}
@keyframes letter-impact{0%{transform:none}12%{transform:scale(1.04,.88)}42%{transform:scale(.98,1.07) translateY(-1%)}67%{transform:scale(1.015,.97)}100%{transform:none}}
@keyframes acorn-sparkle{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(15deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(65deg)}}

/* A rendered overhead forest turns slowly, then the camera dives into its clearing. */
.station-art{width:100vw;height:100dvh;aspect-ratio:auto;overflow:hidden}
.station-forest{position:absolute;inset:0;overflow:hidden;opacity:0;background:#000}
.station-forest::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,transparent 35%,#0008 100%);pointer-events:none}
.boot-art .station-mark{inset:0;margin:auto;width:min(690px,85vw);height:auto;opacity:0;filter:drop-shadow(0 0 10px #78a9b744)}
.boot-card:is(.active,.fading) .station-forest{animation:forest-passage 5.95s linear both}
.boot-card:is(.active,.fading) .station-woods{animation:woods-dive 7.7s cubic-bezier(.3,0,.65,1) both}
.boot-card:is(.active,.fading) .station-mark{animation:station-reveal 4.4s 6.25s ease-out both}
@keyframes forest-passage{0%{opacity:0}12%,78%{opacity:1}100%{opacity:0}}
@keyframes station-reveal{0%{opacity:0;filter:blur(9px);transform:scale(1.035)}30%,100%{opacity:1;filter:blur(0);transform:scale(1)}}
/* Sprite sheets are rendered from the game's keeper asset, with twelve stride poses. */
.station-runner{position:absolute;left:0;bottom:10%;width:100px;height:140px;opacity:0;filter:drop-shadow(0 5px 3px #0008)}
.runner-sprite{display:block;width:100px;height:140px;background-size:1200px 140px;background-repeat:no-repeat}
.runner-1{--start:6.35s}.runner-2{--start:6.62s}.runner-3{--start:6.89s}.runner-4{--start:7.8s}
.boot-card:is(.active,.fading) .station-runner{animation:gnome-dash 3.25s var(--start) linear both}
.boot-card:is(.active,.fading) .runner-sprite{animation:keeper-run .52s var(--start) steps(12) infinite}
@keyframes keeper-run{to{background-position:-1200px 0}}
@keyframes gnome-dash{0%{opacity:0;transform:translateX(-110%)}5%,95%{opacity:1}100%{opacity:0;transform:translateX(calc(100vw + 110%))}}
.station-forest{perspective:800px;background:radial-gradient(ellipse at 50% 42%,#23303a,#080f15 43%,#000 78%)}
.station-woods{position:absolute;inset:0;transform-style:preserve-3d}
.boot-art .station-tree{left:var(--x);top:var(--y);width:var(--size);height:auto;inset:auto;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translateZ(var(--depth));filter:brightness(var(--light));backface-visibility:hidden}
@keyframes woods-dive{0%{transform:translateZ(-420px) rotateZ(-12deg)}55%{transform:translateZ(-300px) rotateZ(7deg)}80%{transform:translateZ(180px) rotateZ(12deg)}100%{transform:translateZ(1000px) rotateZ(15deg)}}
@media(prefers-reduced-motion:reduce){.boot-card:is(.active,.fading) .station-forest{opacity:0}.boot-card:is(.active,.fading) .station-mark{opacity:1}.station-runner{display:none}}

.station-forest-3d{position:absolute;inset:0;width:100%;height:100%}

.boot-keeper-sprite{display:block;width:100%;height:100%;background-size:1200% 100%;background-repeat:no-repeat}

/* Ropes reach the floor before any keeper enters; all four clear the bottom. */
.graphics-rappels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.graphics-rope{position:absolute;top:0;bottom:0;left:var(--rope-x);width:clamp(52px,7vw,100px)}
.rope-1{--rope-x:10%;--rope-delay:.15s;--descent-delay:1.1s}
.rope-2{--rope-x:25%;--rope-delay:.23s;--descent-delay:1.25s}
.rope-3{--rope-x:73%;--rope-delay:.19s;--descent-delay:1.18s}
.rope-4{--rope-x:88%;--rope-delay:.27s;--descent-delay:1.33s}
.graphics-rope::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:repeating-linear-gradient(155deg,#e0c38a 0 3px,#806540 4px 6px);box-shadow:1px 0 2px #000a;transform-origin:top;transform:scaleY(0)}
.graphics-rappeller{position:absolute;left:-68%;top:-160px;width:100%;aspect-ratio:5/7;transform-origin:68% 60%;visibility:hidden}
.boot-card:is(.active,.fading) .graphics-rope::before{animation:rope-drop .75s var(--rope-delay) cubic-bezier(.4,0,.8,1) both}
.boot-card:is(.active,.fading) .graphics-rappeller{animation:keeper-rappel 3s var(--descent-delay) linear both}
@keyframes rope-drop{0%{transform:scaleY(0)}85%{transform:scaleY(1)}93%{transform:scaleY(.97)}100%{transform:scaleY(1)}}
@keyframes keeper-rappel{
  0%{visibility:visible;transform:translateY(0) rotate(-5deg)}
  22%{transform:translateY(calc(22dvh + 70px)) rotate(3deg)}
  27%{transform:translateY(calc(23dvh + 74px)) rotate(-4deg)}
  55%{transform:translateY(calc(55dvh + 176px)) rotate(3deg)}
  60%{transform:translateY(calc(56dvh + 180px)) rotate(-3deg)}
  100%{visibility:visible;transform:translateY(calc(100dvh + 320px)) rotate(0)}
}
@media(max-width:600px){.graphics-rope::before{width:2px}}
@media(prefers-reduced-motion:reduce){.graphics-rappels{display:none}}