/* Green Gash (gash.py, app.js runSmoke / addGashShelf): caught mid-session when you open the swamp.
   A tiny joint or the water fogger in its hand (the same .held spot as a mug), and puffs of smoke drifting up. */
.walker.smoking .held{z-index:2}
.walker.smoke-fogger .held{width:calc(16px * var(--held-k,1));height:calc(24px * var(--held-k,1));bottom:calc(var(--held-y,26px) - 10px)}
.walker.smoke-joint .held{animation:toke 1.6s ease-in-out infinite alternate}
.walker.smoke-fogger .held{animation:fog 1.2s ease-in-out infinite alternate}
@keyframes toke{from{rotate:0deg}to{rotate:-12deg;translate:calc(-2px * var(--held-k,1)) calc(-3px * var(--held-k,1))}}
@keyframes fog{from{translate:0 0}to{translate:0 calc(-2px * var(--held-k,1))}}
.walker.smoking .pengob{animation:chillsway 2.4s ease-in-out infinite alternate}
@keyframes chillsway{from{rotate:-2deg}to{rotate:2deg}}

.puffs{position:absolute;left:var(--held-x,36px);bottom:calc(var(--held-y,26px) + 14px);width:30px;height:60px;pointer-events:none;z-index:3}
.walker.face-left .puffs{left:auto;right:var(--held-x,36px)}
.puffs i{position:absolute;left:4px;bottom:0;width:14px;height:14px;border-radius:50%;opacity:0;
 background:radial-gradient(circle at 40% 40%,#eef3e4 0 45%,#c9d8b8 70%,transparent 72%);
 box-shadow:7px -3px 0 -2px #dfe8d2,-5px 2px 0 -3px #dfe8d2;animation:puff 3s ease-out infinite}
.puffs i:nth-child(2){animation-delay:.75s;left:9px}
.puffs i:nth-child(3){animation-delay:1.5s;left:1px}
.puffs i:nth-child(4){animation-delay:2.25s;left:12px}
@keyframes puff{0%{opacity:0;scale:.3;translate:0 0}15%{opacity:.95}
 100%{opacity:0;scale:2.2;translate:calc(var(--dir,1) * 10px) -52px}}

.gashlab{margin-top:6px}
.chip.gashgive{background:#93ad6c}

@media (prefers-reduced-motion:reduce){.walker.smoking .held,.walker.smoking .pengob,.puffs i{animation:none!important}.puffs i{opacity:.8}}