/* Scale It Lah character pass: a friendly market snapper who visibly judges the player's technique. */
.scale-game{
  border-color:#4a2d1f;
  background:
    radial-gradient(ellipse at 17% 24%,transparent 0 26%,#8c5a3530 27% 28%,transparent 29% 100%),
    radial-gradient(ellipse at 72% 72%,transparent 0 29%,#fff1c226 30% 31%,transparent 32% 100%),
    repeating-linear-gradient(2deg,#dcae74 0 16px,#d2a269 17px 19px,#e0b77e 20px 35px);
  box-shadow:inset 0 0 0 12px #b47b48,inset 0 0 0 15px #efd29d80,inset 0 0 35px #55351f55,0 10px 24px #2c1a1230;
}
.scale-game::before{
  content:"";position:absolute;z-index:0;inset:18px;border:1px solid #7b4f3090;border-radius:16px;
  box-shadow:inset 0 0 0 2px #f1d6a53d;pointer-events:none;
}
.scale-game::after{
  content:"BiteLah prep board";position:absolute;z-index:0;right:25px;bottom:17px;color:#7650359c;
  font:900 9px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:1.2px;text-transform:uppercase;pointer-events:none;
}
.scale-game .current-banner{display:none}
.fish-board{z-index:2}
.game-fish{
  isolation:isolate;
  width:min(64vw,500px);
  aspect-ratio:1.76/1;
  margin-left:4%;
  border:clamp(2px,.34vw,4px) solid #a6464e;
  border-radius:62% 44% 48% 60% / 55% 48% 52% 45%;
  background:
    radial-gradient(ellipse at 42% 2%,transparent 53%,#9d3e4930 55% 58%,#fff4df68 60% 63%,transparent 65%),
    radial-gradient(circle at 77% 34%,#ffcbb7 0 13%,transparent 14%),
    linear-gradient(178deg,#ffc1a7 0 49%,#f0837c 50% 72%,#cf5d68 73% 100%);
  background-size:34px 27px,100% 100%,100% 100%;
  box-shadow:inset 17px 13px 24px #fff6,inset -13px -17px 27px #8e344229,0 17px 22px #4b2f2442;
  animation:scaleFishBreathe 2.7s ease-in-out infinite;
}
.game-fish::before{
  left:-18%;top:17%;width:23%;height:67%;
  border:2px solid #a6464e;
  border-right:0;
  border-radius:52% 10% 10% 52%;
  background:linear-gradient(145deg,#ff9b84,#c6505d 76%);
  clip-path:polygon(100% 50%,8% 4%,24% 50%,8% 96%);
  filter:drop-shadow(0 4px 3px #71313b30);
  transform-origin:100% 50%;
  animation:scaleTailWag 1.15s ease-in-out infinite;
}
.fish-eye{
  right:8.5%;top:27%;width:7.2%;
  border:clamp(3px,.6vw,6px) solid #fff;
  background:#f8fcfa;
  box-shadow:0 0 0 2px #9f414c,0 3px 7px #672e3840;
  overflow:visible;
  transition:transform .18s ease;
}
.fish-eye::before{
  content:"";position:absolute;left:38%;top:29%;width:43%;height:47%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0 13%,#123342 16% 100%);
  transition:transform .18s ease,width .18s ease,height .18s ease;
}
.fish-eye::after{
  content:"";position:absolute;left:-12%;right:-12%;top:-28%;height:3px;border-radius:99px;
  background:#853740;transform:rotate(-5deg);transform-origin:50%;transition:transform .18s ease;
}
.fish-gill{right:18%;top:27%;height:48%;border-left-color:#a3454d88}
.fish-mouth{right:0;top:59%;width:8%;height:7%;border-bottom:3px solid #8b3843;border-radius:0 0 90% 35%;transition:transform .18s ease}
.fish-lateral-line{left:12%;right:22%;background:linear-gradient(90deg,transparent,#b24d5770 18% 82%,transparent)}
.fish-fin{border:1px solid #a6464e;background:linear-gradient(155deg,#ff9a82,#c75260 72%);filter:drop-shadow(0 3px 2px #6f30383b)}
.fish-fin.top{left:31%;top:-10%;width:37%;height:21%;border-radius:80% 90% 12% 12%;clip-path:polygon(0 100%,16% 56%,34% 18%,53% 3%,73% 22%,91% 58%,100% 100%)}
.fish-fin.bottom{left:46%;bottom:-8%;width:27%;height:17%;clip-path:polygon(0 0,100% 0,83% 42%,62% 90%,41% 96%,19% 58%)}
.fish-fin.side{left:62%;top:55%;width:17%;height:14%;border-radius:90% 18% 90% 18%;transform:rotate(13deg) skewX(-9deg)}
.fish-scale{border-radius:52% 18% 52% 18%;background:linear-gradient(135deg,#fff6e4c7,#d9686a75);box-shadow:inset 2px 2px #fff9,0 2px 5px #71343d38;transition:opacity .13s ease,transform .16s ease}
.fish-scale::after{content:"";position:absolute;inset:-8px}
.fish-scale.removed{transform:translateY(-9px) rotate(15deg) scale(.65)}
.scale-game,.fish-board,.game-fish{cursor:default}
.fish-scale{cursor:pointer}

.scale-chip{
  position:absolute;z-index:17;width:24px;height:17px;border:2px solid #fff2da;border-radius:52% 18% 52% 18%;
  background:#ee9689;pointer-events:none;animation:scaleChipFly .6s cubic-bezier(.15,.72,.3,1) forwards;
}
.scale-chip.gold{border-color:#fff2a5;background:#f5c845;box-shadow:0 0 9px #ffd44f}

.fish-judge{
  position:absolute;z-index:20;left:43%;bottom:calc(100% + 17px);width:max-content;max-width:min(260px,70vw);
  padding:10px 14px;border:2px solid #123746;border-radius:14px 14px 14px 4px;background:#fffdf5;color:#123746;
  box-shadow:0 9px 20px #002d433d;font:900 clamp(11px,1.5vw,14px)/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  opacity:0;pointer-events:none;transform:translate(-42%,8px) scale(.92);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.85,.3,1.25);
}
.fish-judge::after{content:"";position:absolute;left:17px;bottom:-8px;width:13px;height:13px;border-right:2px solid #123746;border-bottom:2px solid #123746;background:#fffdf5;transform:rotate(45deg)}
.fish-judge.show{opacity:1;transform:translate(-42%,0) scale(1)}
.game-fish.judge-side-eye .fish-eye::before{transform:translateX(-42%)}
.game-fish.judge-side-eye .fish-eye::after{transform:translateY(3px) rotate(10deg)}
.game-fish.judge-good .fish-eye::before{height:31%;transform:translateY(36%)}
.game-fish.judge-good .fish-mouth{transform:rotate(6deg) translateY(2px)}
.game-fish.judge-bad{animation:scaleFishOffended .25s ease 2}
.game-fish.judge-bad .fish-eye{transform:scaleY(.76)}
.game-fish.judge-bad .fish-eye::before{transform:translateX(-28%)}
.game-fish.judge-bad .fish-eye::after{transform:translateY(5px) rotate(-17deg)}
.game-fish.judge-bad .fish-mouth{transform:rotate(-13deg) translateY(4px)}

@keyframes scaleFishBreathe{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes scaleTailWag{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@keyframes scaleFishOffended{0%,100%{translate:0 0}50%{translate:-5px 0}}
@keyframes scaleChipFly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(.9)}100%{opacity:0;transform:translate(calc(-50% + var(--chip-x)),calc(-50% + var(--chip-y))) rotate(var(--chip-r)) scale(.35)}}
@media(max-width:620px){
  .game-fish{width:min(76vw,410px);margin-left:9%}
  .fish-judge{left:48%;bottom:calc(100% + 11px);max-width:220px;padding:8px 11px;transform:translate(-46%,7px) scale(.92)}
  .fish-judge.show{transform:translate(-46%,0) scale(1)}
  .scale-game::after{right:21px;bottom:15px;font-size:7px}
}
@media(prefers-reduced-motion:reduce){.game-fish,.game-fish::before,.game-fish.judge-bad,.scale-chip{animation:none}.fish-judge,.fish-eye,.fish-eye::before,.fish-eye::after,.fish-mouth{transition:none}}

/* FishKit gameplay body: one proportional snapper across phone, tablet and desktop. */
.game-fish{
  isolation:isolate;
  width:min(72vw,540px);
  aspect-ratio:120/84;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.game-fish::before,.game-fish::after,.fish-eye,.fish-gill,.fish-mouth,.fish-lateral-line{display:none}
.game-fish-art{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.fish-fin{z-index:6;border:0;background:transparent;filter:none;cursor:not-allowed}
.fish-fin.top{left:33%;top:2%;width:38%;height:27%;clip-path:polygon(0 100%,16% 44%,38% 0,58% 23%,73% 0,100% 100%)}
.fish-fin.bottom{left:40%;bottom:3%;width:31%;height:27%;clip-path:polygon(0 0,100% 0,73% 45%,45% 100%,20% 54%)}
.fish-fin.side{left:45%;top:55%;width:32%;height:27%;clip-path:polygon(0 0,100% 38%,20% 100%);transform:none}
.fish-tail-hit{left:2%;top:23%;width:24%;height:58%;z-index:7}
.fish-scale{z-index:8;width:6.4%;aspect-ratio:1.08;border-color:#e6f4f1cc;border-radius:58% 58% 44% 44%;background:linear-gradient(145deg,#f4fbf5d9,#6f8f947a);box-shadow:inset 2px 2px #fff9,0 2px 5px #17343b42;transform:rotate(-8deg)}
.fish-scale.gold{border-color:#fff0a1;background:linear-gradient(135deg,#fffbd2,#e5a828)}
.scale-chip{border-color:#e6f4f1;background:#91aaab}
.game-fish.judge-bad{animation:scaleFishOffended .25s ease 2}

@media(max-width:620px){
  .game-fish{width:min(88vw,400px);margin:0}
  .fish-scale{width:7.2%}
  .fish-judge{left:50%;bottom:calc(100% - 7px);max-width:min(220px,72vw);padding:8px 11px;transform:translate(-50%,7px) scale(.92)}
  .fish-judge.show{transform:translate(-50%,0) scale(1)}
}
@media(prefers-reduced-motion:reduce){.game-fish,.game-fish.judge-bad{animation:none}}