@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:block;src:url(fonts/YesevaOne-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Yeseva One';font-style:normal;font-weight:400;font-display:block;src:url(fonts/YesevaOne-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:block;src:url(fonts/Lora-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:block;src:url(fonts/Lora-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/Lora-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/Lora-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --lac:#14100C; --hood:#C8241B; --cin:#9E2A1F; --berry:#A0142A; --gold:#D4A23A; --gold2:#F0D27A;
  --spruce:#1F3A2B; --moss:#5E7A3E; --linen:#E9E2D0; --shadow:#2E3D4A; --sun:#FFD9A0;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--lac);overflow:hidden;color:var(--linen);font-family:Lora,Georgia,serif;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#game{position:fixed;inset:0}
#game canvas{display:block}
#ui{position:fixed;inset:0;pointer-events:none;z-index:2}
#ui > *{pointer-events:auto}
.screen{position:absolute;inset:0;display:none}
.screen.on{display:flex}

/* gold on lacquer, embossed */
.emboss{font-family:'Yeseva One',Georgia,serif;font-weight:400;margin:0;letter-spacing:.01em;
  color:var(--gold);
  background:linear-gradient(180deg,var(--gold2) 0%,var(--gold) 45%,#a8781f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -1px 0 rgba(255,236,180,.25));}

/* lacquer buttons */
button.lac{appearance:none;-webkit-appearance:none;border:0;margin:0;font:inherit;color:var(--gold2);cursor:pointer;
  background:radial-gradient(120% 140% at 30% 15%,#3a2c1f 0%,#1c1510 45%,#0c0907 100%);
  box-shadow:0 0 0 1.5px var(--gold),0 0 0 3px #0c0907,0 0 0 4px rgba(212,162,58,.45),0 6px 18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,170,.18);
  transition:transform .15s ease, box-shadow .2s ease, opacity .3s ease}
button.lac:active{transform:scale(.96)}
button.lac:focus-visible{outline:2px solid var(--gold2);outline-offset:4px}
.btn{white-space:nowrap;min-height:52px;padding:12px 28px;border-radius:30px;font-family:'Yeseva One',Georgia,serif;font-size:19px;letter-spacing:.02em}
.btn.ghost{min-height:44px;padding:8px 18px;font-family:Lora,serif;font-variant:small-caps;font-size:16px;letter-spacing:.08em;border-radius:24px}
.round{width:48px;height:48px;border-radius:50%;padding:0;font-family:'Yeseva One',serif;font-size:22px;display:flex;align-items:center;justify-content:center}
.round.big{width:84px;height:84px}
.round.big svg{width:46px;height:46px}

/* ---------- menu / dish map ---------- */
#menu{flex-direction:column;align-items:center;justify-content:center;gap:min(2.2vh,18px);padding:calc(14px + var(--safe-t)) 12px calc(14px + var(--safe-b));
  background:radial-gradient(70% 60% at 50% 45%,#2a1f15 0%,#17120d 55%,var(--lac) 100%)}
#menu::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 30% at 22% 8%,rgba(255,217,160,.13),transparent 70%)}
#title{font-size:clamp(34px,7.2vmin,72px);line-height:1.05;text-align:center;position:relative}
#dishwrap{position:relative;width:min(96vw,64vh,720px);aspect-ratio:1;flex:none}
#dish{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.7))}
#route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#stations{position:absolute;inset:0}
.st{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:64px;min-height:64px;justify-content:center;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.st .pin{width:clamp(22px,4.2vmin,34px);height:clamp(22px,4.2vmin,34px);border-radius:50%;position:relative}
.st.on .pin{background:radial-gradient(circle at 35% 30%,#e0606a 0%,var(--berry) 38%,#4d0812 100%);
  box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(212,162,58,.55),0 3px 6px rgba(0,0,0,.6)}
.st.on .pin::after{content:"";position:absolute;width:42%;height:30%;left:52%;top:-18%;border-radius:0 80% 0 80%;
  background:linear-gradient(135deg,var(--gold2),var(--gold));transform:rotate(-20deg)}
.st.off{cursor:default}
.st.off .pin{border:1.5px solid rgba(212,162,58,.4);background:rgba(20,16,12,.6)}
.st .nm{font-family:'Yeseva One',serif;font-size:clamp(15px,3vmin,22px);white-space:nowrap}
.st.on .nm{color:var(--gold2);text-shadow:0 1px 0 #000,0 0 10px rgba(212,162,58,.35)}
.st.off .nm{color:rgba(212,162,58,.62);text-shadow:0 1px 0 #000}
.st .sub{font-size:clamp(13px,2.2vmin,16px);font-style:italic;color:rgba(233,226,208,.55);white-space:nowrap}
.st.on .sub{color:rgba(240,210,122,.85)}
.st.on:hover .pin,.st.on:focus-visible .pin{box-shadow:0 0 0 2px var(--gold2),0 0 22px rgba(240,210,122,.8)}
.st:focus-visible{outline:none}
.menubar{position:relative;display:flex;gap:12px}
.menunote{margin:0;font-size:15px;font-style:italic;color:rgba(233,226,208,.6);text-align:center;position:relative}
#soundbtn{position:absolute;top:calc(12px + var(--safe-t));right:12px}
#soundbtn svg{width:24px;height:24px}
@media (orientation:landscape) and (max-height:520px){
  #menu{flex-direction:row;flex-wrap:wrap;align-content:center;column-gap:4vw}
  #dishwrap{width:min(86vh,60vw)}
  #menu .side{display:flex}
  #title{width:100%;font-size:clamp(28px,7vh,48px)}
  .menunote{width:100%}
}

/* ---------- cinema ---------- */
#bars{position:absolute;inset:0;pointer-events:none}
.bar{position:absolute;left:0;right:0;height:clamp(28px,9vh,84px);background:#0a0806;transition:transform .9s cubic-bezier(.6,0,.2,1)}
.bar.top{top:0;transform:translateY(-101%)}
.bar.bot{bottom:0;transform:translateY(101%)}
#bars.on .bar{transform:none}
#skipbtn{position:absolute;top:calc(max(6px,(clamp(28px,9vh,84px) - 44px)/2) + var(--safe-t));right:12px;opacity:0;pointer-events:none}
#skipbtn.on{opacity:.92;pointer-events:auto}

#dialog{position:absolute;left:0;right:0;bottom:0;display:none;align-items:flex-start;gap:16px;
  padding:20px clamp(16px,4vw,48px) calc(22px + var(--safe-b));min-height:150px;
  background:linear-gradient(180deg,rgba(20,16,12,.94),#0d0a07 70%);
  border-top:1px solid var(--gold);box-shadow:0 -1px 0 rgba(0,0,0,.8),0 -3px 0 rgba(212,162,58,.25),0 -24px 40px rgba(0,0,0,.45);cursor:pointer}
#dialog.on{display:flex;animation:rise .45s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.medal{flex:none;width:clamp(64px,13vmin,104px);aspect-ratio:1;border-radius:50%;padding:3px;margin-top:-34px;
  background:conic-gradient(from 200deg,var(--gold2),var(--gold),#7a5414,var(--gold),var(--gold2),#8a611a,var(--gold2));
  box-shadow:0 0 0 2px #0c0907,0 6px 16px rgba(0,0,0,.7)}
.medal img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#14100C}
.dtext{flex:1;min-width:0;padding-right:clamp(34px,7vw,90px)}
.who{font-family:Lora,serif;font-variant:small-caps;letter-spacing:.14em;font-size:15px;font-weight:600;color:var(--gold);margin-bottom:6px;text-transform:lowercase}
.line{font-size:clamp(18px,2.6vmin,23px);line-height:1.45;color:var(--linen);min-height:3em;max-width:62ch}
.travka{position:absolute;right:6px;bottom:calc(4px + var(--safe-b));width:clamp(56px,10vmin,96px);opacity:.9;pointer-events:none;filter:saturate(.85)}
.more{position:absolute;right:clamp(64px,12vmin,110px);bottom:calc(14px + var(--safe-b));width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--gold);opacity:0}
.more.on{opacity:.9;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
#mark{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:clamp(56px,16vmin,150px);opacity:0;pointer-events:none;transform:scale(.92);
  transition:opacity 1.2s ease, transform 2.4s ease;filter:drop-shadow(0 2px 0 rgba(0,0,0,.9)) drop-shadow(0 0 30px rgba(240,210,122,.45))}
#mark.on{opacity:1;transform:none}

#card{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 50%,rgba(20,16,12,.55),rgba(20,16,12,.92))}
#card.on{display:flex;animation:fadein 1s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.cardk{font-variant:small-caps;letter-spacing:.2em;color:var(--gold);font-size:16px}
#cardt{font-size:clamp(44px,11vmin,110px)}
.cards{font-style:italic;font-size:clamp(18px,2.8vmin,24px);color:var(--linen);max-width:30ch}

/* ---------- fork ---------- */
#forkui{position:absolute;left:0;right:0;top:calc(16px + var(--safe-t));display:none;flex-direction:column;align-items:center;pointer-events:none;text-align:center}
#forkui.on{display:flex}
#forkui h2{font-size:clamp(32px,7vmin,60px)}
#forktip{margin:4px 0 0;font-size:18px;font-style:italic;color:var(--linen);text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.8)}
#gobtn{position:absolute;left:50%;bottom:calc(22px + var(--safe-b));transform:translateX(-50%);display:none}
#gobtn.on{display:block}
#gobtn:active{transform:translateX(-50%) scale(.96)}

/* ---------- quest HUD ---------- */
#hud{position:absolute;top:calc(10px + var(--safe-t));left:50%;transform:translateX(-50%);display:none;gap:8px;padding:6px 14px;border-radius:14px;
  background:linear-gradient(180deg,rgba(28,21,15,.88),rgba(12,9,7,.88));box-shadow:0 0 0 1px var(--gold),0 0 0 3px rgba(12,9,7,.8),0 6px 18px rgba(0,0,0,.5);pointer-events:none}
#hud.on{display:flex}
.slot{width:48px;height:44px;display:flex;align-items:center;justify-content:center;position:relative}
.slot img{width:46px;height:auto;filter:brightness(.32) sepia(.4) drop-shadow(0 0 1px var(--gold)) drop-shadow(0 0 0 var(--gold));transition:filter .4s ease}
.slot.full img{filter:drop-shadow(0 0 1px var(--gold2)) drop-shadow(0 0 4px rgba(212,162,58,.5)) saturate(.8)}
.slot.glint::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,210,122,.9) 0%,rgba(240,210,122,0) 60%);animation:glint .8s ease-out forwards}
@keyframes glint{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}
#helpbtn{position:absolute;top:calc(12px + var(--safe-t));left:12px;display:none;font-size:20px}
#helpbtn.on{display:flex}
#actbtn{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(22px + var(--safe-b));display:none;opacity:.55}
#actbtn.on{display:flex}
#actbtn.ready{opacity:1;box-shadow:0 0 0 2px var(--gold2),0 0 0 4px #0c0907,0 0 0 5px rgba(240,210,122,.6),0 0 26px rgba(240,210,122,.55),0 6px 18px rgba(0,0,0,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 2px var(--gold2),0 0 0 4px #0c0907,0 0 0 5px rgba(240,210,122,.6),0 0 38px rgba(240,210,122,.8),0 6px 18px rgba(0,0,0,.6)}}
.plate{position:absolute;left:50%;transform:translateX(-50%);top:calc(74px + var(--safe-t));width:min(92vw,560px);padding:12px 18px;border-radius:12px;
  background:rgba(20,16,12,.78);box-shadow:0 0 0 1px rgba(212,162,58,.55);font-size:16px;line-height:1.45;color:var(--linen);text-align:center;
  opacity:0;transition:opacity .3s ease;pointer-events:none}
.plate.on{opacity:1}
.plate b{color:var(--gold2);font-weight:600}
.plate .goal{display:block;font-family:'Yeseva One',serif;color:var(--gold);font-size:18px;margin-bottom:4px}
.fly{position:absolute;width:90px;pointer-events:none;z-index:5;filter:drop-shadow(0 0 10px rgba(240,210,122,.7))}

/* ---------- done ---------- */
#done{align-items:center;justify-content:center;background:rgba(10,8,6,.6);padding:16px}
.donepanel{position:relative;width:min(94vw,760px);aspect-ratio:3/2;max-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.6vmin,14px);
  background:url(img/frame.webp) center/100% 100% no-repeat;padding:7% 10%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.7);animation:fadein 1.2s ease both}
.donepanel h2{font-size:clamp(34px,8vmin,72px)}
.donek{font-variant:small-caps;letter-spacing:.18em;color:var(--gold);font-size:15px}
.donepath{font-style:italic;font-size:clamp(18px,2.8vmin,24px)}
.donebaskets{display:flex;gap:clamp(8px,2vmin,18px)}
.donebaskets img{width:clamp(54px,11vmin,100px);filter:drop-shadow(0 0 2px var(--gold)) drop-shadow(0 6px 10px rgba(0,0,0,.6)) saturate(.8);animation:fadein .6s ease both}
.donebaskets img:nth-child(2){animation-delay:.25s}.donebaskets img:nth-child(3){animation-delay:.5s}
.donetime{font-size:15px;color:rgba(233,226,208,.6)}
@media (orientation:portrait){.donepanel{aspect-ratio:auto;padding:56px 26px;background-size:cover}}

#fade{position:absolute;inset:0;background:var(--lac);opacity:1;pointer-events:none;transition:opacity .7s ease}
#fade.clear{opacity:0}
#glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(60% 50% at 40% 30%,rgba(255,217,160,.55),rgba(255,217,160,0) 70%);mix-blend-mode:screen}
#glow.on{animation:bloom 1.8s ease-out}
@keyframes bloom{0%{opacity:0}25%{opacity:.8}100%{opacity:0}}
.xshot{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block}

/* ---------- quest 2: pies ---------- */
#hud.pies{gap:4px;padding:6px 10px}
#hud.pies .slot{width:34px;height:36px}
#hud.pies .slot img{width:34px}
#piemark{position:absolute;right:calc(20px + env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:none;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
#piemark.on{display:flex}
#piemark .pring{--a:calc(var(--p,100) * 3.6deg);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  background:conic-gradient(var(--gold2) var(--a),rgba(20,16,12,.7) 0);box-shadow:0 0 0 2px #0c0907,0 4px 12px rgba(0,0,0,.6)}
#piemark.low .pring{background:conic-gradient(#d2452f var(--a),rgba(20,16,12,.7) 0);animation:pulse2 .4s ease-in-out infinite alternate}
#piemark .pring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a2c1f,#14100c)}
#piemark .pring img{position:relative;width:38px}
#piemark .pring::after{content:"";position:absolute;right:-12px;top:50%;margin-top:-7px;border-left:10px solid var(--gold2);border-top:7px solid transparent;border-bottom:7px solid transparent}
#piemark span{font-size:13px;font-style:italic;color:var(--gold2);text-shadow:0 1px 2px #000,0 0 6px #000}
@keyframes pulse2{to{transform:scale(1.08)}}
.donebaskets.pies{flex-wrap:wrap;justify-content:center;gap:clamp(4px,1.2vmin,10px)}
.donebaskets.pies img{width:clamp(38px,7.5vmin,70px)}
.menubar{flex-wrap:wrap;justify-content:center}
#piesbtn{display:flex;align-items:center;gap:8px;padding:8px 22px 8px 14px}
#piesbtn img{width:40px;height:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}

/* ---------- quest 3: wolf ---------- */
#wolfvig{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(75% 70% at 50% 55%,rgba(20,16,12,0) 45%,rgba(14,20,28,.75) 100%)}
#wolfvig.warn{opacity:.6}
#wolfvig.look{opacity:1;background:radial-gradient(70% 65% at 50% 55%,rgba(20,16,12,0) 40%,rgba(10,14,22,.88) 100%)}
#wolfvig.hit{opacity:1;transition:opacity .15s ease;background:radial-gradient(70% 65% at 50% 55%,rgba(120,20,15,.15) 30%,rgba(90,10,8,.8) 100%)}
#hud.sneak{align-items:center;gap:12px;padding:6px 16px}
.wstate{width:54px;height:30px;display:flex;align-items:center}
.wstate svg{width:54px;height:27px;transition:transform .3s ease}
.wstate .iris,.wstate .pupil{transition:opacity .3s ease}
.wstate.calm svg{transform:scaleY(.18)}.wstate.calm .iris,.wstate.calm .pupil{opacity:0}
.wstate.warn svg{transform:scaleY(.6)}
.wstate.look svg{transform:none;filter:drop-shadow(0 0 6px rgba(230,160,50,.9))}
.wbar{position:relative;width:min(44vw,240px);height:8px;border-radius:4px;background:rgba(233,226,208,.14);box-shadow:inset 0 0 0 1px rgba(212,162,58,.5)}
.wbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:linear-gradient(90deg,#9c7322,var(--gold2))}
.wbar b{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#e8524a,var(--hood) 50%,#5a0d09);box-shadow:0 0 0 1.5px var(--gold2)}
.wbar::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle,#FFD9A0,rgba(255,217,160,0) 70%)}
#actbtn.hiding svg{filter:drop-shadow(0 0 6px rgba(240,210,122,.8))}
.donebaskets.wide img{width:clamp(120px,24vmin,220px)}

/* ---------- quest 5: hut ---------- */
#clues{position:absolute;inset:0;display:none;pointer-events:none}
#clues.on{display:block}
.clue{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;display:none;pointer-events:auto;font:inherit}
.clue.on,.clue.seen{display:block}
.clue.seen{pointer-events:none;opacity:.45}
#clues.asking .clue{pointer-events:none}
.clue .ring{position:absolute;inset:10px;border-radius:50%;box-shadow:0 0 0 2.5px var(--gold2),0 0 0 4px rgba(12,9,7,.7),0 0 18px rgba(240,210,122,.7);
  background:radial-gradient(circle,rgba(240,210,122,.25),rgba(240,210,122,0) 70%)}
.clue.on .ring{animation:cluep 1.6s ease-in-out infinite}
.clue.fresh .ring{box-shadow:0 0 0 2.5px #e8524a,0 0 0 4px rgba(12,9,7,.7),0 0 22px rgba(232,82,74,.8)}
@keyframes cluep{50%{transform:scale(1.18);box-shadow:0 0 0 2.5px var(--gold2),0 0 0 4px rgba(12,9,7,.7),0 0 30px rgba(240,210,122,.95)}}
.clue .lbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-4px;font-family:'Yeseva One',serif;font-size:16px;color:var(--gold2);
  white-space:nowrap;text-shadow:0 1px 0 #000,0 0 8px #000,0 0 14px #000}
#runbtn{position:absolute;left:50%;bottom:calc(36px + var(--safe-b));transform:translateX(-50%);display:none;font-size:clamp(24px,4.6vmin,34px);padding:16px 44px;overflow:hidden}
#runbtn.on{display:block;animation:runp .5s ease-in-out infinite alternate}
#runbtn:active{transform:translateX(-50%) scale(.96)}
#runbtn span{position:relative}
#runbtn .rring{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(200,36,27,.55),rgba(200,36,27,.25));transform-origin:left;
  animation:runt var(--t,3s) linear forwards}
@keyframes runt{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes runp{to{box-shadow:0 0 0 2px var(--gold2),0 0 0 4px #0c0907,0 0 34px rgba(232,82,74,.75),0 6px 18px rgba(0,0,0,.6)}}
.st.next .pin{animation:pinp 1.8s ease-in-out infinite}
@keyframes pinp{50%{box-shadow:0 0 0 2px var(--gold2),0 0 26px rgba(240,210,122,.95),0 3px 6px rgba(0,0,0,.6)}}

/* ---------- joystick ---------- */
#joy{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(16px + var(--safe-b));width:104px;height:104px;border-radius:50%;display:none;touch-action:none;
  background:radial-gradient(circle at 50% 45%,rgba(58,44,31,.75),rgba(12,9,7,.82) 70%);
  box-shadow:0 0 0 1.5px var(--gold),0 0 0 3px #0c0907,0 0 0 4px rgba(212,162,58,.4),0 6px 18px rgba(0,0,0,.6);opacity:.82}
#joy.on{display:block}
#joy.held{opacity:1}
#joy::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--gold),var(--gold)) 50% 8px/2px 10px no-repeat,linear-gradient(var(--gold),var(--gold)) 50% calc(100% - 8px)/2px 10px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 8px 50%/10px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) calc(100% - 8px) 50%/10px 2px no-repeat;opacity:.6;border-radius:50%}
#joy .knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#e8524a,var(--hood) 50%,#5a0d09);box-shadow:0 0 0 2px var(--gold2),0 3px 8px rgba(0,0,0,.6);transition:transform .08s linear}
#joy.held .knob{transition:none}

/* Pies quest on a short sideways screen: the controls sit at mid-height over the trees, clear of the dirt path */
@media (orientation:landscape) and (max-height:520px){body.q-pies #joy{bottom:auto;top:calc(50% - 44px)}body.q-pies #actbtn{bottom:auto;top:calc(50% - 34px)}}