/* BiteLah fish art direction: soft two-tone bodies, forked tails, compact fins and bright readable eyes. */
.species-card-art{border:0!important;background:transparent!important;box-shadow:none!important}
.species-card-art::before,.species-card-art::after{content:none!important}
.species-card-art canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 15px #001d2c45)}
.puff-preview.species-card-art{width:124px;height:104px;right:31px;bottom:50px}
.scale-preview.species-card-art{width:162px;height:103px;right:26px;bottom:40px}
.tuna-art.species-card-art{height:112px;display:grid;place-items:center;overflow:visible}
.tuna-art.species-card-art canvas{width:150px;height:90px}

.hero-puffer.species-hero,.hero-scale-fish.species-hero,.hero-fish.species-hero{border:0;background:transparent;box-shadow:none;filter:none}
.hero-puffer.species-hero{width:230px;height:230px}
.hero-scale-fish.species-hero{width:250px;height:160px}
.hero-fish.species-hero{width:330px;height:190px}
.species-hero canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 20px 25px #001c2766)}
.hero-puffer.species-hero::before,.hero-puffer.species-hero::after,.hero-scale-fish.species-hero::before,.hero-scale-fish.species-hero::after,.hero-fish.species-hero::before,.hero-fish.species-hero::after{content:none}
.hero-puffer.species-hero>b{right:-22px;top:4px}

/* Puffer game: retain the expressive front view while matching the shared palette, eyes and softer shading. */
.hero-puffer:not(.species-hero),.puffer{
  border-color:#9f551f;
  background:linear-gradient(180deg,#ffd866 0 54%,#f5a43b 55% 100%);
  box-shadow:inset 8px 9px 0 #fff4a94d,inset -9px -10px 0 #b65c1d30,0 17px 32px #71370f38;
}
.puffer .eye,.hero-puffer:not(.species-hero) .eye{
  border:2px solid #9f551f;
  background:radial-gradient(circle at 38% 33%,#fff 0 14%,#102f3d 16% 48%,#fff 50% 100%);
  box-shadow:none;
}
.puffer .fin,.hero-puffer:not(.species-hero) .fin{background:linear-gradient(#ffd95b,#ee922e)}
.puffer .belly,.hero-puffer:not(.species-hero) .belly{background:#fff0c6;border-top-color:#cf7530}
.puffer .spikes,.hero-puffer:not(.species-hero) .spikes{background:repeating-conic-gradient(from 2deg,#d97827 0 2.6deg,transparent 2.8deg 20deg)}

/* Scale It Lah: a friendly coral snapper with the same face and fin grammar as the aquarium fish. */
.game-fish{
  border-color:#8f414966;
  border-radius:59% 45% 47% 57% / 52% 48% 52% 48%;
  background:radial-gradient(ellipse at 40% 0,transparent 52%,#8f414938 54% 57%,#fff4df62 59% 62%,transparent 64%),linear-gradient(180deg,#ffb79b 0 53%,#df6b69 54% 100%);
  background-size:34px 27px,100% 100%;
  box-shadow:inset 15px 10px 25px #fff5,inset 0 -18px 28px #913d4930,0 22px 42px #002d4345;
}
.game-fish::before{
  background:linear-gradient(145deg,#f08472,#bd4f59);
  clip-path:polygon(100% 50%,4% 4%,22% 50%,4% 96%);
}
.fish-eye{border-color:#fff;box-shadow:0 0 0 2px #8f4149;background:radial-gradient(circle at 37% 31%,#fff 0 13%,#102f3d 16% 100%)}
.fish-gill{border-left-color:#8f414988}
.fish-mouth{border-bottom-color:#8f4149}
.fish-fin{background:linear-gradient(155deg,#f28c78,#bd4f59 70%);filter:drop-shadow(0 2px 2px #632f3940)}
.fish-scale{border-color:#fff3df;background:linear-gradient(135deg,#fff6e39c,#d96b6960);box-shadow:inset 2px 2px #fff8,0 2px 5px #71343d38}

/* Makan race fish: same compact side profile at lane scale. */
.racing-fish{border:1px solid color-mix(in srgb,var(--fish-color),#173f52 36%);border-radius:59% 46% 48% 58% / 52% 48% 52% 48%}
.racing-fish::before{clip-path:polygon(100% 50%,3% 3%,23% 50%,3% 97%)}
.racing-fish::after{width:5px;height:5px;border:2px solid #fff;background:#102f3d;box-shadow:0 0 0 1px color-mix(in srgb,var(--fish-color),#173f52 45%)}

/* Puff You Ah live sprites: the same round, bright-eyed character as the hero, with cleaner reactions. */
.puff-board .puffer{
  isolation:isolate;
  border:2px solid #9f551f;
  background:
    radial-gradient(circle at 25% 18%,#dc7e28 0 2.2%,transparent 2.5%),
    radial-gradient(circle at 72% 18%,#dc7e28 0 2.2%,transparent 2.5%),
    radial-gradient(circle at 16% 39%,#dc7e28 0 2%,transparent 2.3%),
    radial-gradient(circle at 83% 40%,#dc7e28 0 2%,transparent 2.3%),
    linear-gradient(180deg,#ffdf70 0 53%,#f4a33a 54% 100%);
  box-shadow:inset 6px 7px 0 #fff4a34a,inset -7px -8px 0 #a74d1830,0 10px 18px #08273545;
}
.puff-board .puffer .spikes{
  z-index:2;
  inset:-14px;
  background:center/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath id='q' d='M60 4V15' fill='none' stroke='%23ad632b' stroke-width='3' stroke-linecap='round'/%3E%3Cuse href='%23q' transform='rotate(22.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(45 60 60)'/%3E%3Cuse href='%23q' transform='rotate(67.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(90 60 60)'/%3E%3Cuse href='%23q' transform='rotate(112.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(135 60 60)'/%3E%3Cuse href='%23q' transform='rotate(157.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(180 60 60)'/%3E%3Cuse href='%23q' transform='rotate(202.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(225 60 60)'/%3E%3Cuse href='%23q' transform='rotate(247.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(270 60 60)'/%3E%3Cuse href='%23q' transform='rotate(292.5 60 60)'/%3E%3Cuse href='%23q' transform='rotate(315 60 60)'/%3E%3Cuse href='%23q' transform='rotate(337.5 60 60)'/%3E%3C/svg%3E");
  -webkit-mask:none;
  mask:none;
}
.puff-board .puffer .belly{
  left:16%;right:16%;bottom:4%;height:44%;
  border:0;border-top:2px solid #cd762f;
  border-radius:18% 18% 48% 48%/18% 18% 70% 70%;
  background:
    radial-gradient(circle at 25% 38%,#d87b2c 0 3%,transparent 3.7%),
    radial-gradient(circle at 52% 62%,#d87b2c 0 3%,transparent 3.7%),
    radial-gradient(circle at 77% 35%,#d87b2c 0 3%,transparent 3.7%),
    #fff0c8;
  box-shadow:inset 0 -4px 0 #f7d792;
}
.puff-board .puffer .fin{
  z-index:3;top:54%;width:18%;height:14%;
  border:1px solid #b36327;
  border-radius:70% 30% 70% 30%;
  background:linear-gradient(145deg,#ffd965,#ee9330);
  clip-path:none;
}
.puff-board .puffer .fin-a{left:2%;transform:rotate(-22deg)}
.puff-board .puffer .fin-b{right:2%;transform:rotate(22deg)}
.puff-board .puffer .eye{
  top:27%;width:17%;height:20%;
  border:1px solid #9f551f;
  background:radial-gradient(circle at 43% 39%,#fff 0 12%,#173242 14% 43%,#fff 45% 100%);
  box-shadow:none;
}
.puff-board .puffer .eye-a{left:24%}.puff-board .puffer .eye-b{right:24%}
.puff-board .puffer .cheek{top:47%;width:10%;height:5%;background:#ef765568}
.puff-board .puffer .smile{
  z-index:5;left:39%;top:48%;width:22%;height:16%;
  border:0;border-bottom:3px solid #9f551f;
  border-radius:0 0 50% 50%;transform:none;
}
.puff-board .puffer .smile::before,.puff-board .puffer .smile::after{display:none}
.puff-board .puffer.gold{
  border-color:#aa6f00;
  background:linear-gradient(180deg,#fff49b 0 53%,#ffc72e 54% 100%);
  filter:drop-shadow(0 0 12px #fff08b);
}
.puff-board .puffer.gold .belly{background:#fff9dc;border-top-color:#ddb12b}
.puff-board .puffer.danger{
  border-color:#8f2827;
  background:linear-gradient(180deg,#ff9c83 0 53%,#e84f43 54% 100%);
}
.puff-board .puffer.danger .belly{background:#ffd7ca;border-top-color:#bd433b}
.puff-board .puffer.danger .fin{border-color:#9b332f;background:linear-gradient(145deg,#ff9c7e,#db443c)}
.puff-board .puffer.danger .eye{
  top:34%;height:4px;
  border:0;border-radius:99px;
  background:#711f1c;box-shadow:none;
}
.puff-board .puffer.danger .smile{border:0;border-top:3px solid #711f1c}
.puff-board .puffer.wink .eye-a{height:3px;top:35%;border:0;background:#713b22;border-radius:99px}
.puff-board .puffer.reaction-dizzy .eye{height:4px;top:35%;border:0;background:#713b22;border-radius:2px}
.puff-board .puffer.reaction-shocked .smile{left:43%;top:50%;width:14%;height:14%;border:3px solid #8d3518;border-radius:50%}
.puff-board .puffer.reaction-smug .smile{transform:rotate(-12deg)}
.puff-board .puff-taunt{
  left:50%;max-width:94%;
  white-space:normal;text-align:center;line-height:1.1;
  transform:translateX(-50%) scale(.8);
}

@media(max-width:700px){
  .puff-preview.species-card-art{right:18px;bottom:54px;width:104px;height:90px}
  .scale-preview.species-card-art{right:15px;bottom:48px;width:132px;height:86px}
  .hero-puffer.species-hero{display:none}
}
@media(max-width:480px){.tuna-art.species-card-art canvas{width:96px;height:64px}}