/* Broad, large-scaled market fish artwork for the descaling game. */
.hero-scale-fish,
.game-fish,
.scale-preview {
  --fish-silver: #d9d2c2;
  --fish-bronze: #a99278;
  --fish-belly: #d9785b;
  --fish-dark: #493b3a;
  --fish-fin: #b85f4e;
}

.hero-scale-fish {
  width: 218px;
  height: 130px;
  border: 2px solid #f9f3e233;
  border-radius: 58% 43% 46% 55% / 52% 48% 52% 48%;
  background:
    radial-gradient(ellipse at 84% 40%, #f5eee1 0 4%, transparent 5%),
    linear-gradient(97deg, transparent 0 68%, #f1e7d5a8 83%, #c9b7a2 100%),
    radial-gradient(ellipse at 50% 0, transparent 54%, #57473e66 56% 60%, #fff7df78 62% 65%, transparent 67%),
    linear-gradient(165deg, #ded8ca 0 42%, #aa957e 67%, #dc7659 100%);
  background-position: 0 0, 0 0, 0 4px, 0 0;
  background-size: 100% 100%, 100% 100%, 31px 23px, 100% 100%;
}

.hero-scale-fish::before {
  left: -48px;
  top: 20px;
  width: 62px;
  height: 90px;
  border: 0;
  background:
    repeating-linear-gradient(72deg, transparent 0 12%, #f0b09345 13% 16%),
    linear-gradient(145deg, #b66b5a, #694849 62%, #9d594f);
  clip-path: polygon(100% 50%, 78% 40%, 18% 2%, 0 0, 13% 43%, 0 100%, 18% 98%, 78% 60%);
}

.hero-scale-fish::after {
  right: 23px;
  top: 36px;
  width: 13px;
  height: 13px;
  border: 4px solid #24303a;
  box-shadow: 0 0 0 3px #f8efe0;
  background: #080d12;
}

.hero-scale-fish i {
  width: 29px;
  height: 21px;
  border: 2px solid #fff5dca8;
  border-radius: 54% 10% 54% 10%;
  background: linear-gradient(135deg, #fff9e64d, #68584c22);
}

.hero-scale-fish .red-fin {
  position: absolute;
  background:
    repeating-linear-gradient(105deg, transparent 0 9%, #f6b09255 10% 12%),
    linear-gradient(155deg, #db886dcc, var(--fish-fin) 62%, #70413fdd);
  filter: drop-shadow(0 3px 2px #30252a55);
}

.hero-scale-fish .red-fin.top {
  left: 29%;
  top: -16%;
  width: 42%;
  height: 25%;
  border-radius: 80% 90% 8% 8%;
  clip-path: polygon(0 100%, 12% 58%, 30% 17%, 52% 0, 74% 15%, 91% 51%, 100% 100%);
}

.hero-scale-fish .red-fin.bottom {
  left: 45%;
  bottom: -12%;
  width: 30%;
  height: 21%;
  border-radius: 8% 8% 75% 75%;
  clip-path: polygon(0 0, 100% 0, 87% 42%, 64% 91%, 43% 100%, 20% 61%);
}

.hero-scale-fish .red-fin.side {
  left: 61%;
  top: 55%;
  width: 18%;
  height: 16%;
  border-radius: 90% 12% 90% 12%;
  transform: rotate(18deg) skewX(-12deg);
}

.hero-scale-fish .red-mouth {
  position: absolute;
  right: -1px;
  top: 60%;
  width: 20px;
  height: 7px;
  border-bottom: 3px solid #5f3d38;
  border-radius: 0 0 80% 20%;
  background: transparent;
}

.hero-scale-fish .hero-gill {
  position: absolute;
  right: 35px;
  top: 38px;
  width: 25px;
  height: 58px;
  border-left: 3px solid #80665b9c;
  border-radius: 50%;
  transform: rotate(-7deg);
}

.game-fish {
  width: min(66vw, 520px);
  aspect-ratio: 1.74 / 1;
  border: clamp(2px, .35vw, 4px) solid #f7ebd455;
  border-radius: 58% 43% 46% 55% / 52% 48% 52% 48%;
  background:
    linear-gradient(97deg, transparent 0 69%, #f4eadab8 84%, #c5ad94 100%),
    radial-gradient(ellipse at 50% 0, transparent 54%, #59483e70 56% 60%, #fff6dc82 62% 65%, transparent 67%),
    linear-gradient(165deg, #ddd6c8 0 40%, #aa947c 65%, #dc7659 100%);
  background-position: 0 0, 0 5px, 0 0;
  background-size: 100% 100%, 38px 28px, 100% 100%;
  box-shadow: inset 0 -24px 42px #723c3540, inset 18px 10px 28px #fff6, 0 24px 45px #002d4350;
  margin-left: 5%;
}

.game-fish::before {
  left: -17%;
  top: 13%;
  width: 21%;
  height: 74%;
  background:
    repeating-linear-gradient(72deg, transparent 0 12%, #f0b09345 13% 16%),
    linear-gradient(145deg, #b66b5a, #694849 62%, #9d594f);
  clip-path: polygon(100% 50%, 78% 40%, 18% 2%, 0 0, 13% 43%, 0 100%, 18% 98%, 78% 60%);
}

.game-fish::after {
  display: none;
}

.fish-eye {
  position: absolute;
  z-index: 8;
  right: 8.5%;
  top: 30%;
  width: 5.5%;
  aspect-ratio: 1;
  border: clamp(3px, .6vw, 6px) solid #f8efe0;
  border-radius: 50%;
  background: #111b22;
  box-shadow: 0 0 0 3px #25323a;
  pointer-events: none;
}

.fish-gill {
  position: absolute;
  z-index: 3;
  right: 18%;
  top: 25%;
  width: 10%;
  height: 52%;
  border-left: clamp(2px, .45vw, 4px) solid #765c5299;
  border-radius: 50%;
  transform: rotate(-6deg);
  pointer-events: none;
}

.fish-mouth {
  position: absolute;
  z-index: 8;
  right: -1px;
  top: 58%;
  width: 8%;
  height: 5%;
  border-bottom: clamp(2px, .35vw, 4px) solid #65443f;
  border-radius: 0 0 75% 20%;
  pointer-events: none;
}

.fish-lateral-line {
  position: absolute;
  z-index: 2;
  left: 9%;
  right: 20%;
  top: 49%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #6e5d5270 18% 82%, transparent);
  transform: rotate(-2deg);
  pointer-events: none;
}

.fish-fin {
  background:
    repeating-linear-gradient(105deg, transparent 0 9%, #f6b09255 10% 12%),
    linear-gradient(155deg, #db886dcc, var(--fish-fin) 62%, #70413fdd);
  filter: drop-shadow(0 3px 2px #30252a55);
}

.fish-fin.top {
  left: 29%;
  top: -12%;
  width: 42%;
  height: 24%;
  border-radius: 80% 90% 8% 8%;
  clip-path: polygon(0 100%, 12% 58%, 30% 17%, 52% 0, 74% 15%, 91% 51%, 100% 100%);
}

.fish-fin.bottom {
  left: 45%;
  bottom: -11%;
  width: 30%;
  height: 20%;
  border-radius: 8% 8% 75% 75%;
  clip-path: polygon(0 0, 100% 0, 87% 42%, 64% 91%, 43% 100%, 20% 61%);
}

.fish-fin.side {
  left: 61%;
  top: 54%;
  width: 18%;
  height: 15%;
  border-radius: 90% 12% 90% 12%;
  clip-path: none;
  transform: rotate(18deg) skewX(-12deg);
}

.fish-scale {
  border-color: #fff7dfa8;
  border-radius: 55% 12% 55% 12%;
  background: linear-gradient(135deg, #fff9e6a8, #8a77666e);
  box-shadow: inset 2px 2px #fff9, 0 2px 5px #392b2b55;
}

.fish-scale.gold {
  border-color: #fff0a1;
  background: linear-gradient(135deg, #fffbd2, #e5a828);
}

.fish-tail-hit {
  left: -17%;
  top: 13%;
  width: 21%;
  height: 74%;
}

.scale-preview {
  width: 174px;
  height: 105px;
  border: 2px solid #f7ead044;
  border-radius: 58% 43% 46% 55% / 52% 48% 52% 48%;
  background:
    linear-gradient(97deg, transparent 0 69%, #f4eadab8 84%, #c5ad94 100%),
    radial-gradient(ellipse at 50% 0, transparent 54%, #59483e70 56% 60%, #fff6dc82 62% 65%, transparent 67%),
    linear-gradient(165deg, #ddd6c8 0 40%, #aa947c 65%, #dc7659 100%);
  background-size: 100% 100%, 27px 21px, 100% 100%;
}

.scale-preview::before {
  border: 0;
  width: 49px;
  height: 76px;
  left: -38px;
  top: 14px;
  background:
    repeating-linear-gradient(72deg, transparent 0 12%, #f0b09345 13% 16%),
    linear-gradient(145deg, #b66b5a, #694849 62%, #9d594f);
  clip-path: polygon(100% 50%, 78% 40%, 18% 2%, 0 0, 13% 43%, 0 100%, 18% 98%, 78% 60%);
}

.scale-preview::after {
  border-color: #26333b;
  background: #111b22;
  box-shadow: 0 0 0 2px #f8efe0;
}

.scale-preview i {
  border-color: #fff7df9c;
  background: #fff8df30;
}

.scale-preview .preview-fin {
  position: absolute;
  z-index: 3;
  display: block;
  background:
    repeating-linear-gradient(105deg, transparent 0 9%, #f6b09255 10% 12%),
    linear-gradient(155deg, #db886dcc, var(--fish-fin) 62%, #70413fdd);
  filter: drop-shadow(0 2px 2px #30252a55);
}

.scale-preview .preview-fin.top {
  left: 29%;
  top: -14%;
  width: 42%;
  height: 25%;
  border-radius: 80% 90% 8% 8%;
  clip-path: polygon(0 100%, 12% 58%, 30% 17%, 52% 0, 74% 15%, 91% 51%, 100% 100%);
}

.scale-preview .preview-fin.bottom {
  left: 45%;
  bottom: -12%;
  width: 30%;
  height: 21%;
  border-radius: 8% 8% 75% 75%;
  clip-path: polygon(0 0, 100% 0, 87% 42%, 64% 91%, 43% 100%, 20% 61%);
}

.scale-preview .preview-fin.side {
  left: 61%;
  top: 55%;
  width: 18%;
  height: 16%;
  border-radius: 90% 12% 90% 12%;
  transform: rotate(18deg) skewX(-12deg);
}

@media (max-width: 620px) {
  .game-fish {
    /* Leave room for the full forked tail instead of clipping it at the board edge. */
    width: min(72vw, 430px);
  }
}