.game-card__art--aquarium {
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.62), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--blue) 10%, var(--canvas)), color-mix(in srgb, var(--lime) 22%, var(--canvas)));
}

.game-card__art--aquarium::after {
    border-color: rgba(73, 103, 214, 0.08);
}

.aquarium-card-preview {
    position: relative;
    z-index: 1;
    width: 166px;
    height: 104px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ink) 34%, transparent);
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 22%, rgba(183, 217, 76, 0.32), transparent 33%),
        radial-gradient(circle at 80% 24%, rgba(73, 103, 214, 0.25), transparent 34%),
        radial-gradient(circle at 52% 82%, rgba(241, 108, 91, 0.22), transparent 38%),
        rgba(255, 255, 255, 0.58);
    box-shadow: 0 12px 24px rgba(31, 37, 34, 0.14);
    transform: rotate(-2deg);
}

.aquarium-card-preview__creature {
    position: absolute;
    border: 2px solid var(--ink);
}

.aquarium-card-preview__creature::before,
.aquarium-card-preview__creature::after {
    content: "";
    position: absolute;
    border: 2px solid var(--ink);
}

.aquarium-card-preview__creature--winged {
    top: 20px;
    left: 26px;
    width: 27px;
    height: 20px;
    border-radius: 50%;
    background: var(--lime);
}

.aquarium-card-preview__creature--winged::before,
.aquarium-card-preview__creature--winged::after {
    left: 4px;
    width: 15px;
    height: 13px;
    border-radius: 70% 10%;
    background: color-mix(in srgb, var(--lime) 45%, white);
}
.aquarium-card-preview__creature--winged::before { top: -13px; transform: rotate(-18deg); }
.aquarium-card-preview__creature--winged::after { bottom: -13px; transform: rotate(18deg) scaleY(-1); }

.aquarium-card-preview__creature--shell {
    top: 43px;
    right: 27px;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--blue);
}
.aquarium-card-preview__creature--shell::before {
    inset: 5px;
    border-radius: 50%;
    border-color: white;
}
.aquarium-card-preview__creature--shell::after {
    left: -12px;
    top: 8px;
    width: 14px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.aquarium-card-preview__creature--tripod {
    top: 28px;
    left: 78px;
    width: 27px;
    height: 24px;
    clip-path: polygon(100% 50%, 18% 0, 0 50%, 18% 100%);
    background: var(--coral);
}
.aquarium-card-preview__creature--tripod::before,
.aquarium-card-preview__creature--tripod::after {
    left: 8px;
    width: 12px;
    height: 9px;
    border-width: 0 0 2px 2px;
}
.aquarium-card-preview__creature--tripod::before { top: -7px; transform: rotate(22deg); }
.aquarium-card-preview__creature--tripod::after { bottom: -7px; transform: rotate(-22deg) scaleY(-1); }

.aquarium-card-preview__grove {
    position: absolute;
    bottom: 8px;
    left: 26px;
    width: 45px;
    height: 15px;
    border: 2px solid var(--ink);
    border-radius: 9px;
    background:
        radial-gradient(circle at 18% 0, var(--lime) 0 4px, transparent 4.5px),
        radial-gradient(circle at 50% 0, var(--lime) 0 4px, transparent 4.5px),
        radial-gradient(circle at 82% 0, var(--lime) 0 4px, transparent 4.5px),
        color-mix(in srgb, var(--lime) 28%, white);
}

.aquarium-card-preview__tower {
    position: absolute;
    right: 24px;
    bottom: 7px;
    width: 13px;
    height: 28px;
    border: 2px solid var(--ink);
    background: color-mix(in srgb, var(--blue) 22%, white);
}

.aquarium-card-preview__tower::before {
    content: "";
    position: absolute;
    left: 2px;
    top: -10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 -8px 0 -1px rgba(73, 103, 214, 0.45);
}

.aquarium-card-preview > b {
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(73, 103, 214, 0.52);
    border-radius: 50%;
}

.aquarium-card-preview > b:nth-of-type(1) { top: 11px; right: 17px; }
.aquarium-card-preview > b:nth-of-type(2) { top: 31px; right: 11px; width: 3px; height: 3px; }
.aquarium-card-preview > b:nth-of-type(3) { top: 18px; left: 9px; width: 4px; height: 4px; }
