.detective-layout {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.detective-panel,
.detective-stage {
  padding: 18px;
}

.detective-panel {
  display: grid;
  align-content: start;
  gap: 16px;
}

.hint {
  margin: 0;
  color: #405363;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.55;
}

.detective-stage {
  display: grid;
  gap: 18px;
  background: linear-gradient(160deg, rgba(185, 229, 255, 0.88), rgba(255, 253, 245, 0.94));
}

.shadow-card {
  display: grid;
  place-items: center;
  min-height: 270px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 32px;
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 224, 137, 0.52), transparent 8rem),
    rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 26px rgba(71, 85, 105, 0.13);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.option-card {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 150px;
  padding: 12px;
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  color: #263238;
  cursor: pointer;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(71, 85, 105, 0.12);
}

.option-card.is-correct {
  outline: 6px solid rgba(117, 199, 162, 0.56);
}

.option-card.is-wrong {
  outline: 6px solid rgba(217, 121, 159, 0.52);
}

.object-visual {
  --shape-color: #4da3c7;
  position: relative;
  width: 104px;
  height: 104px;
  color: var(--shape-color);
}

.object-visual.is-shadow {
  --shape-color: #263238;
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 18px 20px rgba(38, 50, 56, 0.22));
}

.object-visual::before,
.object-visual::after,
.object-visual span {
  position: absolute;
  display: block;
  content: "";
}

.cat::before {
  left: 22%;
  top: 24%;
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: currentColor;
}

.cat::after {
  left: 28%;
  top: 10%;
  width: 44%;
  height: 32%;
  background: currentColor;
  clip-path: polygon(0 100%, 18% 0, 42% 100%, 58% 100%, 82% 0, 100% 100%);
}

.fish::before {
  left: 16%;
  top: 30%;
  width: 58%;
  height: 40%;
  border-radius: 50%;
  background: currentColor;
}

.fish::after {
  right: 10%;
  top: 30%;
  width: 32%;
  height: 40%;
  background: currentColor;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.bird::before {
  left: 22%;
  top: 30%;
  width: 52%;
  height: 42%;
  border-radius: 48% 52% 44% 56%;
  background: currentColor;
}

.bird::after {
  right: 10%;
  top: 38%;
  width: 24%;
  height: 22%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rabbit::before {
  left: 24%;
  top: 34%;
  width: 52%;
  height: 48%;
  border-radius: 50%;
  background: currentColor;
}

.rabbit::after {
  left: 32%;
  top: 5%;
  width: 36%;
  height: 52%;
  background: currentColor;
  clip-path: polygon(0 100%, 10% 0, 38% 0, 48% 100%, 58% 100%, 70% 0, 98% 0, 100% 100%);
}

.dog::before {
  left: 18%;
  top: 32%;
  width: 64%;
  height: 44%;
  border-radius: 42% 44% 52% 50%;
  background: currentColor;
}

.dog::after {
  left: 16%;
  top: 18%;
  width: 68%;
  height: 30%;
  background: currentColor;
  clip-path: polygon(0 20%, 20% 100%, 36% 22%, 64% 22%, 80% 100%, 100% 20%, 78% 0, 50% 18%, 22% 0);
}

.turtle::before {
  left: 18%;
  top: 36%;
  width: 58%;
  height: 42%;
  border-radius: 50% 50% 44% 44%;
  background: currentColor;
}

.turtle::after {
  right: 12%;
  top: 43%;
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: currentColor;
  box-shadow:
    -54px 31px 0 -10px currentColor,
    -30px 31px 0 -10px currentColor,
    -54px -31px 0 -10px currentColor,
    -30px -31px 0 -10px currentColor;
}

.butterfly::before {
  left: 14%;
  top: 20%;
  width: 72%;
  height: 58%;
  background:
    radial-gradient(ellipse at 26% 34%, currentColor 0 27%, transparent 29%),
    radial-gradient(ellipse at 74% 34%, currentColor 0 27%, transparent 29%),
    radial-gradient(ellipse at 30% 74%, currentColor 0 22%, transparent 24%),
    radial-gradient(ellipse at 70% 74%, currentColor 0 22%, transparent 24%);
}

.butterfly::after {
  left: 46%;
  top: 22%;
  width: 8%;
  height: 60%;
  border-radius: 999px;
  background: currentColor;
}

.snail::before {
  left: 20%;
  top: 38%;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: currentColor;
}

.snail::after {
  left: 48%;
  top: 48%;
  width: 36%;
  height: 24%;
  border-radius: 999px 999px 28% 28%;
  background: currentColor;
  box-shadow: 26px -28px 0 -11px currentColor;
}

.car::before,
.bus::before {
  left: 12%;
  top: 34%;
  width: 76%;
  height: 38%;
  border-radius: 16px;
  background: currentColor;
}

.car::after,
.bus::after {
  left: 22%;
  top: 65%;
  width: 56%;
  height: 18%;
  background:
    radial-gradient(circle at 14% 50%, currentColor 0 34%, transparent 36%),
    radial-gradient(circle at 86% 50%, currentColor 0 34%, transparent 36%);
}

.plane::before {
  left: 12%;
  top: 43%;
  width: 76%;
  height: 16%;
  border-radius: 999px;
  background: currentColor;
}

.plane::after {
  left: 28%;
  top: 18%;
  width: 44%;
  height: 64%;
  background: currentColor;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 50% 72%, 0 100%);
}

.boat::before {
  left: 14%;
  top: 48%;
  width: 72%;
  height: 32%;
  border-radius: 0 0 50% 50%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 20% 100%);
}

.boat::after {
  left: 38%;
  top: 12%;
  width: 34%;
  height: 48%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 56%, 0 100%);
}

.train::before {
  left: 12%;
  top: 34%;
  width: 76%;
  height: 38%;
  border-radius: 12px;
  background: currentColor;
}

.train::after {
  left: 18%;
  top: 68%;
  width: 64%;
  height: 20%;
  background:
    radial-gradient(circle at 12% 50%, currentColor 0 28%, transparent 30%),
    radial-gradient(circle at 50% 50%, currentColor 0 28%, transparent 30%),
    radial-gradient(circle at 88% 50%, currentColor 0 28%, transparent 30%);
}

.bike::before {
  left: 12%;
  top: 52%;
  width: 76%;
  height: 32%;
  background:
    radial-gradient(circle at 20% 50%, transparent 0 25%, currentColor 27% 38%, transparent 40%),
    radial-gradient(circle at 80% 50%, transparent 0 25%, currentColor 27% 38%, transparent 40%);
}

.bike::after {
  left: 32%;
  top: 38%;
  width: 38%;
  height: 28%;
  border: 10px solid currentColor;
  border-top: 0;
  transform: skewX(-16deg);
}

.rocket::before {
  left: 30%;
  top: 10%;
  width: 40%;
  height: 74%;
  border-radius: 50% 50% 24% 24%;
  background: currentColor;
}

.rocket::after {
  left: 22%;
  top: 58%;
  width: 56%;
  height: 32%;
  background: currentColor;
  clip-path: polygon(16% 0, 34% 0, 50% 62%, 66% 0, 84% 0, 100% 100%, 0 100%);
}

.helicopter::before {
  left: 18%;
  top: 40%;
  width: 58%;
  height: 30%;
  border-radius: 999px;
  background: currentColor;
}

.helicopter::after {
  left: 10%;
  top: 18%;
  width: 80%;
  height: 56%;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 80% 9% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 22% / 8% 24% no-repeat,
    linear-gradient(currentColor, currentColor) 90% 58% / 28% 8% no-repeat,
    radial-gradient(circle at 28% 94%, currentColor 0 8%, transparent 10%),
    radial-gradient(circle at 64% 94%, currentColor 0 8%, transparent 10%);
}

.cup::before {
  left: 28%;
  top: 22%;
  width: 44%;
  height: 58%;
  border-radius: 8px 8px 20px 20px;
  background: currentColor;
}

.cup::after {
  right: 12%;
  top: 34%;
  width: 28%;
  height: 28%;
  border: 10px solid currentColor;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.key::before {
  left: 14%;
  top: 28%;
  width: 34%;
  height: 34%;
  border: 14px solid currentColor;
  border-radius: 50%;
}

.key::after {
  left: 46%;
  top: 44%;
  width: 42%;
  height: 14%;
  background: currentColor;
  box-shadow: 22px 14px 0 -2px currentColor;
}

.clock::before {
  left: 18%;
  top: 18%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  background: currentColor;
}

.clock::after {
  left: 48%;
  top: 30%;
  width: 9%;
  height: 32%;
  border-radius: 999px;
  background: #fffdf5;
  transform-origin: bottom center;
  transform: rotate(38deg);
}

.book::before {
  left: 18%;
  top: 22%;
  width: 64%;
  height: 58%;
  border-radius: 12px;
  background: currentColor;
}

.book::after {
  left: 49%;
  top: 25%;
  width: 4%;
  height: 52%;
  background: rgba(255, 253, 245, 0.82);
}

.umbrella::before {
  left: 12%;
  top: 20%;
  width: 76%;
  height: 42%;
  border-radius: 999px 999px 0 0;
  background: currentColor;
  clip-path: polygon(0 100%, 8% 30%, 22% 0, 50% 0, 78% 0, 92% 30%, 100% 100%);
}

.umbrella::after {
  left: 48%;
  top: 58%;
  width: 9%;
  height: 34%;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 13px 22px 0 -3px currentColor;
}

.chair::before {
  left: 22%;
  top: 18%;
  width: 46%;
  height: 48%;
  border-radius: 10px;
  background: currentColor;
}

.chair::after {
  left: 22%;
  top: 58%;
  width: 62%;
  height: 30%;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 44% no-repeat,
    linear-gradient(currentColor, currentColor) 6% 42% / 14% 58% no-repeat,
    linear-gradient(currentColor, currentColor) 82% 42% / 14% 58% no-repeat;
}

.shoe::before {
  left: 18%;
  top: 46%;
  width: 66%;
  height: 34%;
  border-radius: 50% 34% 20% 20%;
  background: currentColor;
}

.shoe::after {
  left: 52%;
  top: 34%;
  width: 28%;
  height: 28%;
  border-radius: 999px 999px 8px 8px;
  background: currentColor;
}

.gift::before {
  left: 20%;
  top: 34%;
  width: 60%;
  height: 48%;
  border-radius: 10px;
  background: currentColor;
}

.gift::after {
  left: 16%;
  top: 14%;
  width: 68%;
  height: 58%;
  background:
    linear-gradient(currentColor, currentColor) 48% 34% / 10% 66% no-repeat,
    linear-gradient(currentColor, currentColor) 0 48% / 100% 12% no-repeat,
    radial-gradient(ellipse at 35% 18%, transparent 0 18%, currentColor 20% 30%, transparent 32%),
    radial-gradient(ellipse at 65% 18%, transparent 0 18%, currentColor 20% 30%, transparent 32%);
}

@media (max-width: 820px) {
  .detective-layout {
    grid-template-columns: 1fr;
  }

  .option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shadow-card {
    min-height: 230px;
  }
}