/* Original BiteLah puffer artwork: warm orange body, cream belly and readable fins. */
.hero-puffer,.puffer{background:radial-gradient(circle at 30% 23%,#ffb32d 0 4%,transparent 4.5%),radial-gradient(circle at 53% 17%,#ec7117 0 3%,transparent 3.5%),radial-gradient(circle at 72% 28%,#f68a1e 0 4%,transparent 4.5%),radial-gradient(circle at 48% 48%,#ffa323 0 69%,#ee7417 70% 100%);border:3px solid #f17817;box-shadow:inset 8px 9px 0 #ffc43b55,inset -9px -10px 0 #d95f1350,0 17px 32px #71370f38}
.hero-puffer:before,.puffer:before,.hero-puffer:after,.puffer:after{display:none}
.hero-puffer .spikes,.puffer .spikes{inset:-9px;background:repeating-conic-gradient(from 2deg,#ef7716 0 3deg,transparent 3deg 18deg)}
.hero-puffer .belly,.puffer .belly{position:absolute;z-index:1;left:14%;right:14%;bottom:3%;height:48%;border-radius:15% 15% 48% 48%/20% 20% 66% 66%;background:radial-gradient(ellipse at 20% 30%,#ee7c1d 0 5%,transparent 6%),radial-gradient(ellipse at 49% 55%,#ee7c1d 0 5%,transparent 6%),radial-gradient(ellipse at 77% 29%,#ee7c1d 0 5%,transparent 6%),#fff1c2;border-top:3px solid #f29126;box-shadow:inset 0 -6px 0 #ffd887}
.hero-puffer .fin,.puffer .fin{position:absolute;z-index:3;top:53%;width:18%;height:15%;background:linear-gradient(#ffe64b,#ffbd16);clip-path:polygon(0 50%,100% 0,82% 50%,100% 100%)}.hero-puffer .fin-a,.puffer .fin-a{left:3%;transform:rotate(7deg)}.hero-puffer .fin-b,.puffer .fin-b{right:3%;transform:scaleX(-1) rotate(7deg)}
.hero-puffer .eye,.puffer .eye{z-index:4;top:27%;width:15%;height:18%;background:#a64018;border:2px solid #8d2f13;box-shadow:inset 4px 4px 0 #fff,0 2px 0 #6c270f}.hero-puffer .eye-a,.puffer .eye-a{left:26%}.hero-puffer .eye-b,.puffer .eye-b{right:26%}
.hero-puffer .smile,.puffer .smile{z-index:5;left:37%;top:49%;width:26%;height:15%;border:0;border-bottom:5px solid #8d3518;border-radius:0 0 50% 50%;transform:none}.hero-puffer .smile:before,.puffer .smile:before,.hero-puffer .smile:after,.puffer .smile:after{content:"";position:absolute;top:-1px;width:52%;height:55%;border-bottom:4px solid #8d3518;border-radius:50%}.hero-puffer .smile:before,.puffer .smile:before{left:-31%;transform:rotate(17deg)}.hero-puffer .smile:after,.puffer .smile:after{right:-31%;transform:rotate(-17deg)}
.hero-puffer .cheek,.puffer .cheek{position:absolute;z-index:4;top:45%;width:11%;height:6%;border-radius:50%;background:#f36d3970}.hero-puffer .cheek-a,.puffer .cheek-a{left:21%}.hero-puffer .cheek-b,.puffer .cheek-b{right:21%}
.puffer .belly{border-top-width:2px}.puffer .eye{border-width:1px;box-shadow:inset 3px 3px 0 #fff,0 1px 0 #6c270f}.puffer .smile{border-bottom-width:3px}.puffer .smile:before,.puffer .smile:after{border-bottom-width:2px}.puffer.danger{background:radial-gradient(circle at 48% 48%,#ff745c 0 69%,#b92f29 70%);border-color:#9e2823}.puffer.danger .belly{background:#ffd1c2;border-top-color:#cb4939}.puffer.danger .fin{background:linear-gradient(#ff9b72,#e95642)}.puffer.danger .smile{border:0;border-top:4px solid #711f1c;border-radius:50% 50% 0 0}.puffer.danger .smile:before,.puffer.danger .smile:after{display:none}.puffer.gold{background:radial-gradient(circle at 48% 48%,#ffe55c 0 69%,#ef9d13 70%);filter:drop-shadow(0 0 15px #fff08b)}.puffer.gold .belly{background:#fff9d8}.puffer.wink .eye-a{height:4px;top:34%;border:0;border-radius:5px;box-shadow:none}
@media(max-width:700px){.puffer .fin{width:17%}.hero-puffer .fin{width:18%}}

/* Gameplay puffers use FishKit canvas artwork while retaining the existing pop/reaction motion. */
.puffer.fishkit-puffer{width:min(132px,98%);height:auto;aspect-ratio:120/84;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;filter:none!important}
.puffer.fishkit-puffer:before,.puffer.fishkit-puffer:after{display:none}
.puffer.fishkit-puffer.gold,.puffer.fishkit-puffer.danger{border:0!important;background:transparent!important;box-shadow:none!important;filter:none!important}
@media(max-width:700px){.puffer.fishkit-puffer{width:min(124px,100%)}}