@font-face{font-family:'Drafton';src:url('../assets/fonts/Drafton.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
html,body{margin:0;padding:0;height:100%;background:#0f2a33;overflow:hidden;font-family:'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#3f97b8;text-decoration:none}a:hover{color:#2b6f8f}
#root{position:fixed;inset:0}
button{font:inherit}

@keyframes tamboWalkX{from{background-position-x:0}to{background-position-x:-1230px}}
@keyframes tamboWalkY{from{background-position-y:0}to{background-position-y:-2094px}}
@keyframes tamboIdleX{from{background-position-x:0}to{background-position-x:-1092px}}
@keyframes tamboIdleY{from{background-position-y:0}to{background-position-y:-1962px}}
@keyframes tamboExpX{from{background-position-x:0}to{background-position-x:-1386px}}
@keyframes tamboExpY{from{background-position-y:0}to{background-position-y:-2064px}}
@keyframes dokzHiX{from{background-position-x:0}to{background-position-x:-2115px}}
@keyframes dokzHiY{from{background-position-y:0}to{background-position-y:-3395px}}
@keyframes dokzIdleX{from{background-position-x:0}to{background-position-x:-1655px}}
@keyframes dokzIdleY{from{background-position-y:0}to{background-position-y:-3470px}}
@keyframes dokzWinX{from{background-position-x:0}to{background-position-x:-2400px}}
@keyframes dokzWinY{from{background-position-y:0}to{background-position-y:-3435px}}
@keyframes shimmer{0%,100%{opacity:.35;transform:scaleX(1)}50%{opacity:.8;transform:scaleX(1.06)}}
@keyframes birdFly{from{transform:translate(-120px,0)}to{transform:translate(1760px,-60px)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@keyframes ray{0%,100%{opacity:.25}50%{opacity:.55}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes smokeSway{0%,100%{transform:translateX(-50%) rotate(-2deg) scale(1)}50%{transform:translateX(-50%) rotate(2.5deg) scale(1.04)}}
@keyframes smokePuff{0%{opacity:0;transform:translate(-50%,0) scale(.35)}20%{opacity:.6}100%{opacity:0;transform:translate(-50%,-90px) scale(1.5)}}
@keyframes cloudDriftSlow{0%,100%{transform:scale(1.05) translateX(-1.5%)}50%{transform:scale(1.12) translateX(1.5%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hotspotPulse{0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.55}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
@keyframes hotspotGlow{0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,225,140,0))}50%{filter:brightness(1.07) drop-shadow(0 0 16px rgba(255,225,140,.9))}}
@keyframes hotspotShake{0%,88%,100%{transform:scale(1) rotate(0deg)}90%{transform:scale(1.04) rotate(-3deg)}92%{transform:scale(1.04) rotate(3deg)}94%{transform:scale(1.04) rotate(-2deg)}96%{transform:scale(1.04) rotate(2deg)}98%{transform:scale(1.02) rotate(0deg)}}
@keyframes fishJump{0%{transform:translate(0,0) rotate(-30deg);opacity:0}20%{opacity:1}50%{transform:translate(20px,-26px) rotate(0)}80%{opacity:1}100%{transform:translate(40px,4px) rotate(30deg);opacity:0}}
@keyframes ramuanBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
@keyframes mortarBrewX{from{background-position-x:0}to{background-position-x:-2115px}}
@keyframes mortarBrewY{from{background-position-y:0}to{background-position-y:-2215px}}
@keyframes resultCardIn{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes sunburstSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ramuanSelectedGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,225,140,0)) brightness(1)}50%{filter:drop-shadow(0 0 34px rgba(255,225,140,.95)) brightness(1.08)}}
@keyframes lanjutArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@keyframes typeBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes mortarShake{0%,100%{transform:rotate(0deg) scale(1)}20%{transform:rotate(-4deg) scale(1.04)}40%{transform:rotate(3deg) scale(1.04)}60%{transform:rotate(-3deg) scale(1.04)}80%{transform:rotate(2deg) scale(1.04)}}

/* tutorial cue (js/tutorial.js): glow + ring + arrow + label around the
   item the player should use next. Decoration only, never catches input */
.tutorial-dim,.tutorial-glow,.tutorial-ring,.tutorial-arrow,.tutorial-label{pointer-events:none}
.tutorial-dim{position:absolute;inset:0;background:rgba(18,10,4,.38);opacity:0;transition:opacity .35s ease}
.tutorial-dim.is-on{opacity:1}
.tutorial-glow{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,120,.95) 0%,rgba(255,196,60,.7) 38%,rgba(255,160,30,.28) 66%,rgba(255,150,20,0) 100%);animation:tutorialGlow 1.3s ease-in-out infinite alternate;will-change:transform,opacity}
.tutorial-ring{position:absolute;border-radius:50%;border:6px solid rgba(255,214,90,.95);box-shadow:0 0 18px 6px rgba(255,190,50,.75),inset 0 0 14px 4px rgba(255,220,110,.6);animation:tutorialRing 1.3s ease-in-out infinite alternate}
.tutorial-arrow{position:absolute;display:block;filter:drop-shadow(0 6px 8px rgba(40,20,0,.45)) drop-shadow(0 0 14px rgba(255,210,80,.85));animation:tutorialArrow 1.2s ease-in-out infinite;will-change:transform}
.tutorial-label{white-space:nowrap;padding:.22em .7em .16em;border-radius:999px;border:5px solid #e07b12;background:linear-gradient(#fff7cf,#ffe07a);color:#5a3a20;font-family:'Drafton','Baloo 2',sans-serif;letter-spacing:.03em;line-height:1;box-shadow:0 6px 0 #b85f0c,0 12px 18px rgba(40,20,0,.3);transform-origin:left center;animation:tutorialLabel 1.2s ease-in-out infinite}
.tutorial-label--left{transform-origin:right center;animation-name:tutorialLabelLeft}
.tutorial-target{animation:tutorialTarget 1.3s ease-in-out infinite alternate}
@keyframes tutorialGlow{from{transform:scale(.82);opacity:.65}to{transform:scale(1.12);opacity:1}}
@keyframes tutorialRing{from{transform:scale(.9);opacity:.6}to{transform:scale(1.08);opacity:1}}
@keyframes tutorialArrow{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes tutorialLabel{0%,100%{transform:rotate(-4deg) scale(1)}50%{transform:rotate(-4deg) scale(1.05)}}
@keyframes tutorialLabelLeft{0%,100%{transform:rotate(4deg) scale(1)}50%{transform:rotate(4deg) scale(1.05)}}
@keyframes tutorialTarget{from{transform:scale(1);filter:brightness(1) drop-shadow(0 0 6px rgba(255,214,90,.6))}to{transform:scale(1.05);filter:brightness(1.1) drop-shadow(0 0 22px rgba(255,200,60,.95))}}
@media (prefers-reduced-motion:reduce){.tutorial-glow,.tutorial-ring,.tutorial-arrow,.tutorial-label,.tutorial-target{animation:none}}