@import url("../../../assets/interactive-workbench.css");

:root {
  --tool-accent: #25a8b0;
  --tool-accent-strong: #178a92;
  --tool-accent-soft: #e8fbfc;
}

.catchcat-shell {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  align-items: start;
}

.catchcat-board-panel {
  padding: 18px;
  border-radius: 24px;
  border: 1px solid #dce7f3;
  background: linear-gradient(180deg, #fefefe 0%, #f7fbff 100%);
}

.catchcat-main .studio-btn-row {
  margin-top: 18px;
  justify-content: center;
}

.catchcat-board-caption {
  margin-bottom: 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #20374b;
}

.catchcat-board {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.catchcat-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.catchcat-row.is-offset {
  padding-left: 24px;
}

.catchcat-cell {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #acd3fb;
  cursor: pointer;
  position: relative;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.catchcat-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(20, 78, 135, 0.14);
}

.catchcat-cell.is-blocked {
  background: #0f3e78;
}

.catchcat-cell.is-cat {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 16%, transparent 17%),
    linear-gradient(180deg, #2a5b9f 0%, #1a4278 100%);
}

.catchcat-cat-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 19px;
  transform: translate(-50%, -42%);
  border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(circle at 35% 44%, #18375d 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 65% 44%, #18375d 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 50% 63%, #ff9a8f 0 2px, transparent 2.2px),
    radial-gradient(circle at 50% 80%, rgba(186, 132, 83, 0.45) 0 3px, transparent 3.2px),
    linear-gradient(180deg, #fff4de 0%, #ffdca8 100%);
  box-shadow: 0 2px 4px rgba(8, 25, 50, 0.18);
}

.catchcat-cat-marker::before,
.catchcat-cat-marker::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 10px;
  height: 10px;
  background: linear-gradient(180deg, #fff4de 0%, #ffd79b 100%);
  border-radius: 2px 8px 2px 8px;
}

.catchcat-cat-marker::before {
  left: 1px;
  transform: rotate(-32deg);
}

.catchcat-cat-marker::after {
  right: 1px;
  transform: scaleX(-1) rotate(-32deg);
}

.catchcat-cell.is-cat::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 58%;
  width: 20px;
  height: 7px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, transparent 0 40%, rgba(143, 93, 58, 0.45) 40% 60%, transparent 60% 100%),
    linear-gradient(90deg, transparent 0 12%, rgba(143, 93, 58, 0.5) 12% 16%, transparent 16% 44%, rgba(143, 93, 58, 0.5) 44% 48%, transparent 48% 52%, rgba(143, 93, 58, 0.5) 52% 56%, transparent 56% 84%, rgba(143, 93, 58, 0.5) 84% 88%, transparent 88% 100%);
  pointer-events: none;
}

.catchcat-cell.is-cat .catchcat-cat-marker,
.catchcat-cell.is-cat::after {
  display: flex;
  pointer-events: none;
}

.catchcat-cell.is-edge {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

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

@media (max-width: 1080px) {
  .catchcat-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .catchcat-board-panel {
    padding: 14px 8px 16px;
  }

  .catchcat-cell {
    width: 34px;
    height: 34px;
  }

  .catchcat-row {
    gap: 4px;
  }

  .catchcat-row.is-offset {
    padding-left: 18px;
  }
}