/* Find the Firetruck (games/find/find-fire.js). Only transform and opacity animate; the global
   prefers-reduced-motion rule in playlab.html turns these off and everything simply shows in place. */
.ff-scene{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ff-scene image{pointer-events:none}
.ff-obj{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.ff-obj image{pointer-events:auto}
.ff-obj:focus-visible .ff-art{filter:drop-shadow(0 0 2px #4DA3FF) drop-shadow(0 0 3px #4DA3FF)}
.ff-art{transform-box:fill-box;transform-origin:50% 100%}
.ff-hang .ff-art{transform-origin:50% 0}
.ff-checked .ff-art{opacity:.6;filter:saturate(.55)}
.ff-checked{cursor:default}

/* quiet idle movement: a few things only */
.ff-bob{animation:ff-bob 3.6s ease-in-out infinite}
.ff-cloud{animation:ff-drift 14s ease-in-out infinite alternate}
.ff-cloud2{animation-duration:18s;animation-delay:-6s}
.ff-glow{transform-box:fill-box;transform-origin:50% 50%;opacity:.25;animation:ff-glowidle 3s ease-in-out infinite}

/* tap animations, one per thing */
.ff-bigbounce{animation:ff-bigbounce .75s cubic-bezier(.3,1.4,.5,1)}
.ff-tilt{animation:ff-tilt .8s ease-in-out}
.ff-wobble{animation:ff-wobble .85s ease-in-out}
.ff-squish{animation:ff-squish .7s ease-in-out}
.ff-hop{animation:ff-hop .7s ease-out}
.ff-sway{animation:ff-sway 1.1s ease-in-out}
.ff-flash{animation:ff-flashpop .8s ease-out}
.ff-glowtap{animation:ff-glowtap .9s ease-out}
.ff-bump{animation:ff-bump .55s ease-in-out}
.ff-hint .ff-art{animation:ff-hint 1s ease-in-out 2}

/* feedback */
.ff-label{animation:ff-label 2.200s ease both;pointer-events:none}
.ff-pop{transform-box:fill-box;transform-origin:50% 100%;animation:ff-pop .45s cubic-bezier(.3,1.5,.5,1) both;pointer-events:none}
.ff-pop.ff-fade{transition:opacity .45s;opacity:0}
.ani-spark{animation:ani-spark .9s ease-out both;pointer-events:none}
.ff-drop{animation:ff-drop .8s ease-out both}
.ff-ring{opacity:0;animation:ff-ring .9s ease-out both}
.ani-fly{position:fixed;z-index:9999;pointer-events:none;will-change:transform}
.ani-fly img,.ani-fly svg{display:block;width:100%;height:100%;object-fit:contain}
.ff-askg{animation:ff-pop .4s cubic-bezier(.3,1.5,.5,1) both;transform-box:fill-box;transform-origin:50% 0}

/* the finale */
.ff-truck{cursor:pointer;outline:none}
.ff-drive{animation:ff-drive 1.500s cubic-bezier(.2,.75,.3,1) both}
.ff-leave{animation:ff-leave 1.100s ease-in both}
.ff-park{transform-box:fill-box;transform-origin:50% 100%;animation:ff-park .5s ease-out}
.ff-spin{animation:ff-spin .45s linear infinite;animation-play-state:paused}
.ff-moving .ff-spin{animation-play-state:running}
.ff-light{opacity:0;animation:ff-blink .6s steps(1) infinite}
.ff-l2{animation-delay:-.3s}
.ff-cheer{transform-box:fill-box;transform-origin:50% 100%;animation:ff-cheer .9s ease-in-out 1.300s 4}
.ff-banner{transform-box:fill-box;transform-origin:50% 0;animation:ff-pop .5s cubic-bezier(.3,1.5,.5,1) 1.100s both}

@keyframes ff-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.500px)}}
@keyframes ff-drift{from{transform:translateX(0)}to{transform:translateX(14px)}}
@keyframes ff-glowidle{0%,100%{opacity:.15}50%{opacity:.35}}
@keyframes ff-bigbounce{0%{transform:translateY(0) scale(1)}18%{transform:translateY(0) scale(1.08,.9)}48%{transform:translateY(-18px) scale(.95,1.06)}78%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
@keyframes ff-tilt{0%,100%{transform:none}25%{transform:translateY(-5px) rotate(-12deg)}55%{transform:translateY(-3px) rotate(9deg)}80%{transform:rotate(-3deg)}}
@keyframes ff-wobble{0%,100%{transform:none}20%{transform:rotate(-11deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes ff-squish{0%,100%{transform:none}30%{transform:scale(1.14,.86)}60%{transform:scale(.93,1.08)}80%{transform:scale(1.03,.97)}}
@keyframes ff-hop{0%,100%{transform:none}25%{transform:translateY(-10px)}45%{transform:translateY(0) scale(1.05,.95)}65%{transform:translateY(-5px)}85%{transform:translateY(0)}}
@keyframes ff-sway{0%,100%{transform:none}20%{transform:rotate(9deg)}45%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}
@keyframes ff-flashpop{0%,100%{transform:none}30%{transform:scale(1.1)}60%{transform:scale(.97)}}
@keyframes ff-glowtap{0%{opacity:.2;transform:scale(.8)}25%{opacity:1;transform:scale(1.15)}50%{opacity:.4}70%{opacity:1}100%{opacity:.2;transform:scale(1)}}
@keyframes ff-bump{0%,100%{transform:none}40%{transform:scale(1.03,.97)}70%{transform:scale(.99,1.02)}}
@keyframes ff-hint{0%,100%{transform:none}50%{transform:scale(1.08)}}
@keyframes ff-label{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
@keyframes ff-pop{0%{opacity:0;transform:translateY(10px) scale(.3)}100%{opacity:1;transform:none}}
@keyframes ani-spark{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.2)}}
@keyframes ff-drop{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 22px))}}
@keyframes ff-ring{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes ff-drive{from{transform:translateX(-340px)}to{transform:none}}
@keyframes ff-leave{from{transform:none}to{transform:translateX(360px)}}
@keyframes ff-park{0%,100%{transform:none}35%{transform:scale(1.02,.96)}70%{transform:scale(.99,1.02)}}
@keyframes ff-spin{to{transform:rotate(360deg)}}
@keyframes ff-blink{0%{opacity:1}50%{opacity:.1}}
@keyframes ff-cheer{0%,100%{transform:none}20%{transform:translateY(-12px) rotate(-6deg)}40%{transform:translateY(0) rotate(4deg)}60%{transform:translateY(-8px) rotate(6deg)}80%{transform:translateY(0) rotate(-3deg)}}
@keyframes ff-slotpop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}

/* side panel */
.ff-ask{display:flex;gap:12px;align-items:center;background:#FFF3C4;border:2.500px solid #16111F;border-radius:18px;padding:10px 12px;margin-bottom:10px;text-align:left}
.ff-askpic{flex:none;width:72px;height:72px;display:grid;place-items:center;background:#fff;border-radius:14px;border:2px solid #16111F}
.ff-askpic img{max-width:86%;max-height:86%}
.ff-askw{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.3rem;line-height:1.1;color:#26244F}
.ff-hear{margin-top:6px;background:#2FC4A4;color:#fff}
.ff-progress{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.ff-progress b{font-family:'Baloo 2',sans-serif;font-size:1.05rem;color:#26244F;white-space:nowrap}
.ff-bar{flex:1;height:14px;border-radius:99px;background:#EEF2F8;border:2.500px solid #16111F;overflow:hidden}
.ff-bar i{display:block;height:100%;background:linear-gradient(90deg,#FFD84D,#FF8FB1);border-radius:99px;transition:width .5s ease}
.ff-tray{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin:6px 0 12px}
.ff-slot{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;background:#F6F9FC;border:2.500px dashed #C9D3E0}
.ff-slot img,.ff-slot svg{width:78%;height:78%;object-fit:contain}
.ff-slot.todo img{filter:grayscale(1);opacity:.22}
.ff-slot.empty svg{opacity:.18;filter:grayscale(1)}
.ff-slot.got{background:#FFF3C4;border:2.500px solid #16111F;box-shadow:0 3px 0 rgba(22,17,31,.12)}
.ff-slotpop{animation:ff-slotpop .5s ease-out}
.ff-tip{margin:0 0 6px}
.ff-donepic{display:grid;place-items:center;margin:4px 0 6px}
.ff-donepic img{width:min(220px,80%);height:auto}
#pstrip .sy img{height:30px;width:auto;display:block;margin:0 auto}
/* tall screens (a tablet held upright): the yard on top, the panel under it, so the yard is not a thin strip */
@media (orientation:portrait) and (min-width:700px){#play.ff-on .icemain{grid-template-columns:1fr;grid-template-rows:minmax(0,62%) 1fr}
 #play.ff-on .pcard{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;align-content:start}#play.ff-on .pcard>.ff-ask{grid-row:span 2}#play.ff-on .pcard>.btn{grid-column:1/-1}}
/* hide and seek */
.ff-rustle{animation:ff-rustle .7s ease-in-out}
.ff-nudge{animation:ff-nudge .4s ease-in-out}
@keyframes ff-rustle{0%,100%{transform:none}20%{transform:rotate(-4deg) scale(1.03)}45%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}
@keyframes ff-nudge{0%,100%{transform:none}30%{transform:translateX(-3px)}70%{transform:translateX(3px)}}
.ff-tin{transform-box:view-box;transform-origin:0 0}
.ff-trucks{grid-template-columns:repeat(3,1fr);margin:0}
.ff-trucks .ff-slot img{width:86%}
.ff-progress .ff-trucks{flex:1}
.ff-looks{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.1rem;color:#26244F;background:#E3F2FF;border:2.500px solid #16111F;border-radius:16px;padding:10px 12px;margin:4px 0 8px;text-align:center}
.ff-looks b{font-size:1.4rem;color:#C9453D}
.ff-next{width:100%;margin:4px 0 8px}
#pstrip .sy svg{height:30px;width:auto;display:block;margin:0 auto}