#game-guide{position:absolute;inset:0;z-index:20;overflow:auto;overscroll-behavior:contain;display:flex;align-items:center;justify-content:center;padding:18px;background:#102b2bf5;color:#fff1d1;--guide-accent:#ffcf71}#game-guide .guide-card{width:min(100%,430px);text-align:center}#game-guide .guide-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.8px;color:var(--guide-accent)}#guide-count{padding:7px 10px;border:1px solid #ffffff44;border-radius:20px;min-width:40px;font-size:12px;letter-spacing:0}#game-guide h2{font-size:27px;letter-spacing:-.7px;margin:14px 0 6px}#guide-label{font-size:13px;color:#c6d8bf;margin:0 0 16px}.guide-demo{position:relative;width:100%;height:220px;border-radius:22px;overflow:hidden;border:1px solid #ffffff30;background:#20483e;box-shadow:0 10px 30px #0003}.guide-steps{display:flex;justify-content:center;gap:11px;margin:18px 0 8px}.guide-steps i{display:flex;align-items:center;justify-content:center;width:25px;height:25px;font-style:normal;font-size:11px;border:1px solid #7b988a;color:#b6cbbb;border-radius:50%}.guide-steps .current{background:var(--guide-accent);border-color:var(--guide-accent);color:#204039}.guide-copy{min-height:91px;padding:0 7px}.guide-copy h3{font-size:18px;margin:12px 0 7px}.guide-copy p{font-size:13px;line-height:1.6;color:#d3e3ca;margin:0}.guide-progress{height:4px;background:#ffffff1c;border-radius:4px;overflow:hidden;margin:14px 0}.guide-progress i{display:block;height:100%;width:0;background:var(--guide-accent)}#guide-skip{width:100%;min-height:48px;border:0;border-radius:13px;background:var(--guide-accent);color:#214037;font-size:13px;font-weight:bold}#guide-skip:disabled{opacity:.5}.guide-note{display:block;font-size:10px;color:#b0c8b8;margin:12px 0 0}.demo-sprite{position:absolute;display:block;width:76px;height:76px;background-repeat:no-repeat;background-size:400% 300%;filter:drop-shadow(2px 5px 2px #10292d60);transition:transform .6s,opacity .4s}.demo-success{position:absolute;left:0;right:0;top:18px;text-align:center;color:#fff5bc;letter-spacing:2px;font-size:20px;text-shadow:0 2px #284b3d;opacity:0;transition:opacity .4s}.demo-control{position:absolute;right:16px;bottom:12px;border-radius:10px;padding:8px 13px;background:#164237ed;border:1px solid #ffdc8c;font-size:10px;color:#fff0bc}.demo-pointer{position:absolute;left:37%;top:45%;width:24px;height:24px;border:3px solid #fff8d1;border-radius:50%;box-shadow:0 0 0 6px #fff5bf33;animation:demo-tap 2s infinite}.demo-pointer:after{content:'';position:absolute;left:13px;top:12px;width:12px;height:26px;border:3px solid #fff8d1;border-radius:8px;background:#356057;transform:rotate(-35deg)}
[data-game=market] .guide-demo{background:url(arcade-assets/market-world.webp) center 75%/cover}.market-prop{background-image:url(arcade-assets/market-sprites.webp);background-position:33.3333% 0;top:40px}.prop-a{left:10%}.prop-b{left:39%}.prop-c{left:67%}.demo-tray{position:absolute;left:5%;right:5%;bottom:18px;display:flex;gap:5px;height:42px}.demo-tray i{flex:1;background:#ffecc8;border:2px solid #b18156;border-radius:8px}[data-game=market][data-step="1"] .prop-a{transform:translateY(115px) scale(.48)}[data-game=market][data-step="1"] .prop-b{transform:translate(-52px,115px) scale(.48)}[data-game=market][data-step="1"] .prop-c{transform:translate(-105px,115px) scale(.48)}[data-game=market][data-step="2"] .market-prop{opacity:0;transform:translateY(90px) scale(.1)}[data-game=market][data-step="2"] .demo-success{opacity:1}[data-game=market][data-step="2"] .demo-pointer{left:auto;right:38px;top:auto;bottom:17px}
[data-game=ocean]{--guide-accent:#78f0df}[data-game=ocean] .guide-demo{background:url(arcade-assets/ocean-world.webp) center/cover}.ocean-fish{background-image:url(arcade-assets/ocean-sprites.webp)}.hero-fish{left:14%;top:87px;width:94px;height:94px;background-position:0 0;outline:2px solid #adffdf;outline-offset:-12px;border-radius:50%}.little-fish{left:60%;top:65px;width:53px;height:53px;background-position:0 0}.big-fish{right:-70px;top:23px;width:145px;height:145px;background-position:100% 50%;opacity:0}.ocean-pearl{right:14%;bottom:14px;width:53px;height:53px;background-image:url(arcade-assets/ocean-sprites.webp);background-position:0 100%}[data-game=ocean][data-step="0"] .hero-fish{animation:demo-swim 2s ease-in-out infinite}[data-game=ocean][data-step="1"] .hero-fish{transform:translateX(80px) scale(1.35)}[data-game=ocean][data-step="1"] .little-fish{opacity:0;transform:scale(.1)}[data-game=ocean][data-step="2"] .big-fish{opacity:1;transform:translateX(-70px);outline:2px solid #ff8999;outline-offset:-25px;border-radius:50%}[data-game=ocean][data-step="2"] .hero-fish{transform:translate(100px,35px) scale(1.35)}[data-game=ocean] .demo-pointer{left:30%;top:58%}
[data-game=farm] .guide-demo{background:url(arcade-assets/farm-world.webp) center/cover}.demo-road{position:absolute;left:8%;top:49px;width:78%;height:113px;border-top:24px solid #d8ad76;border-right:24px solid #d8ad76;border-bottom:24px solid #d8ad76;border-radius:18px}.demo-pad{position:absolute;left:22%;top:100px;padding:3px 12px;border:2px dashed #fff1bd;border-radius:12px;background:#cdf59a55;font-size:27px}.farm-tower{left:19%;top:89px;background-image:url(arcade-assets/farm-sprites.webp);background-position:0 0;opacity:0}.farm-pest{left:3%;top:35px;width:53px;height:53px;background-image:url(arcade-assets/farm-sprites.webp);background-position:0 50%}.farm-goal{right:12px;bottom:10px;background-image:url(arcade-assets/farm-sprites.webp);background-position:0 100%;width:60px;height:60px}.demo-projectile{position:absolute;left:30%;top:110px;width:10px;height:10px;border-radius:50%;background:#ffd875;opacity:0}.demo-stars{position:absolute;left:24%;top:165px;color:#fff0a5;opacity:0;letter-spacing:2px}[data-game=farm][data-step="0"] .farm-tower{animation:demo-build 2s both}[data-game=farm][data-step="1"] .farm-tower,[data-game=farm][data-step="2"] .farm-tower{opacity:1}[data-game=farm][data-step="1"] .farm-pest{animation:demo-pest 2s linear infinite}[data-game=farm][data-step="1"] .demo-projectile{animation:demo-shot .7s infinite}[data-game=farm][data-step="2"] .demo-stars{opacity:1}[data-game=farm][data-step="2"] .farm-tower{transform:scale(1.12)}[data-game=farm][data-step="2"] .farm-pest{opacity:0}[data-game=farm] .demo-pointer{left:30%;top:58%}
[data-game=fruit] .guide-demo{background:url(fruit/assets/fruit-market.webp) center 65%/cover}.demo-basket{position:absolute;left:18%;right:18%;top:48px;bottom:18px;border:6px solid #dba666;border-top:0;border-radius:0 0 22px 22px;background:#f9dfa861}.demo-limit{position:absolute;left:20%;right:20%;top:75px;border-top:2px dashed #bb4744}.fruit-prop{background-image:url(fruit/assets/fruit-sprites.webp);background-position:0 50%}.falling-fruit{left:42%;top:4px;width:50px;height:50px}.waiting-fruit{left:43%;bottom:24px;width:50px;height:50px}.fruit-big{left:38%;bottom:20px;background-image:url(fruit/assets/fruit-sprites.webp);background-position:33.3333% 50%;opacity:0}[data-game=fruit][data-step="0"] .falling-fruit{animation:demo-drop 2s both}[data-game=fruit][data-step="1"] .fruit-prop,[data-game=fruit][data-step="2"] .fruit-prop{opacity:0}[data-game=fruit][data-step="1"] .fruit-big,[data-game=fruit][data-step="2"] .fruit-big{opacity:1}[data-game=fruit][data-step="1"] .demo-success{opacity:1}[data-game=fruit][data-step="2"] .demo-limit{border-color:#fff6cc;border-width:3px}[data-game=fruit] .demo-pointer{left:52%;top:25%}
[data-game=matatu] .guide-demo{background:#597881}.demo-lanes{position:absolute;inset:0 12%;background:repeating-linear-gradient(0deg,#edf2b7 0 19px,transparent 19px 38px) 33% 0/3px 100% repeat-y,repeating-linear-gradient(0deg,#edf2b7 0 19px,transparent 19px 38px) 67% 0/3px 100% repeat-y,#344e58}.demo-bus{left:39%;bottom:10px;width:85px;height:85px;background-image:url(matatu/assets/matatu-sprites.webp);background-position:0 0}.demo-pickup{position:absolute;left:19%;top:27px;color:#194d3d;background:#b8f09b;border-radius:50%;padding:12px 5px;font-size:9px;font-weight:bold;box-shadow:0 0 0 5px #9cdba84a}.demo-obstacle{position:absolute;right:18%;top:40px;width:28px;height:39px;background:#e99163;clip-path:polygon(50% 0,100% 100%,0 100%)}[data-game=matatu][data-step="0"] .demo-bus{animation:demo-lane 2s infinite}[data-game=matatu][data-step="1"] .demo-bus{transform:translate(-72px,-62px)}[data-game=matatu][data-step="1"] .demo-pickup{opacity:0}[data-game=matatu][data-step="1"] .demo-success{opacity:1}[data-game=matatu][data-step="2"] .demo-bus{transform:translate(-72px,0)}[data-game=matatu][data-step="2"] .demo-control{box-shadow:0 0 0 4px #ffda8d55}[data-game=matatu] .demo-pointer{left:42%;top:64%}
[data-game=kiosk] .guide-demo{background:url(kiosk/assets/street.webp) center/cover}.demo-pan{position:absolute;left:8%;top:91px;width:92px;height:82px;border:7px solid #5d6960;border-radius:50%;background:#2f413b;box-shadow:0 0 0 5px #e5b355}.kitchen-food{left:9%;top:94px;background-image:url(kiosk/assets/food.webp);background-position:0 0}.demo-plate{position:absolute;left:45%;bottom:35px;width:82px;height:49px;border:7px solid #f2e4bf;border-radius:50%;background:#fffbdf}.kitchen-topping{left:49%;top:111px;width:46px;height:46px;background-image:url(kiosk/assets/food.webp);background-position:33.3333% 50%;opacity:0}.kitchen-cup{right:6%;bottom:13px;width:52px;height:52px;background-image:url(kiosk/assets/food.webp);background-position:33.3333% 100%}.kitchen-guest{right:9%;top:17px;width:81px;height:81px;background-image:url(kiosk/assets/customers.webp);background-position:0 0}[data-game=kiosk][data-step="0"] .kitchen-food{animation:demo-cook 2s both}[data-game=kiosk][data-step="1"] .kitchen-food{transform:translateX(138px)}[data-game=kiosk][data-step="1"] .kitchen-topping{opacity:1}[data-game=kiosk][data-step="2"] .kitchen-food{transform:translate(228px,-75px) scale(.5);opacity:0}[data-game=kiosk][data-step="2"] .kitchen-cup{transform:translateY(-85px);opacity:0}[data-game=kiosk][data-step="2"] .demo-success{opacity:1}[data-game=kiosk] .demo-pointer{left:18%;top:65%}
[data-paused=true] .guide-demo *{animation-play-state:paused!important}@keyframes demo-tap{0%,65%,100%{transform:scale(1)}35%{transform:scale(.8);box-shadow:0 0 0 11px #fff5bf25}}@keyframes demo-drop{0%,35%{transform:translateX(-35px)}65%{transform:translateX(0)}100%{transform:translateY(140px)}}@keyframes demo-swim{0%,100%{transform:translateX(0)}65%{transform:translateX(45px)}}@keyframes demo-build{0%,40%{opacity:0;transform:scale(.5)}65%,100%{opacity:1;transform:scale(1)}}@keyframes demo-pest{from{transform:translateX(0)}to{transform:translateX(190px)}}@keyframes demo-shot{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(130px,-62px)}}@keyframes demo-lane{0%,100%{transform:translateX(0)}50%{transform:translateX(-72px)}}@keyframes demo-cook{from{filter:brightness(.6) drop-shadow(2px 4px 2px #10292d60)}to{filter:brightness(1.2) drop-shadow(0 0 10px #ffc74d)}}@media(max-height:600px){#game-guide{align-items:flex-start;padding:12px}.guide-demo{height:190px}#game-guide h2{font-size:23px;margin-top:8px}.guide-steps{margin-top:10px}.guide-copy{min-height:76px}.guide-note{margin-top:7px}}@media(prefers-reduced-motion:reduce){#game-guide *{animation:none!important;transition:none!important}}