/* Carcinization. All rules scoped under .ca-* */
.ca-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ca-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.ca-photo { width: 100%; display: grid; place-items: center; }
.ca-photo img { width: 100%; max-width: 360px; max-height: 38vh; object-fit: contain; border-radius: 16px; display: block; background: #000; }

/* the body */
.ca-body { width: 100%; max-width: 340px; max-height: 44vh; display: block; cursor: pointer; touch-action: manipulation; }
.ca-floor { fill: #1A2636; }
.ca-shell { fill: #D0643F; stroke: #F29A73; stroke-width: 2; }
.ca-legs path { fill: none; stroke: #C4583A; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ca-arm { fill: none; stroke: #C4583A; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.ca-chela { fill: #D0643F; stroke: #F29A73; stroke-width: 2; }
.ca-eyes circle { fill: #1B1B22; stroke: #F4E9D8; stroke-width: 1.5; }
.ca-tail rect, .ca-fan { fill: #B84E33; stroke: #F29A73; stroke-width: 1.5; }
.ca-under { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; stroke-linecap: round; }
.ca-ul { fill: var(--gold); font: 800 17px var(--sans); transition: opacity .3s; }

/* five times */
.ca-five { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 6px; width: 100%; max-width: 380px; }
.ca-five figure { margin: 0; grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ca-five figure:nth-child(4) { grid-column: 2 / span 2; }
.ca-five img { width: 100%; max-width: 108px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #000; }
.ca-five figcaption { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.2; }
.ca-five b { font-size: 13px; color: var(--text); }
.ca-five span { font-size: 12px; color: var(--dim); }

@media (max-height: 700px) {
  .ca-photo img { max-height: 30vh; }
  .ca-body { max-height: 36vh; }
  .ca-five img { max-width: 76px; }
}
.ca-body + .ca-cap { margin-top: 8px; }