:root {
  --blob-size: 84px;
  --play-area-min-height: 420px;
}

.blob-game {
  max-width: 820px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

.blob-hud {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.blob-meta {
  margin: 0;
}

.play-area {
  position: relative;
  min-height: var(--play-area-min-height);
  border: 2px solid #ff4fa8;
  border-radius: 14px;
  background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 60%, #e9e9e9 100%);
  box-shadow:
    6px 2px 0 #c43b86,
    8px 6px 14px rgba(0, 0, 0, 0.30),
    0 0 8px rgba(255, 79, 168, 0.35),
    inset 0 3px 6px rgba(255, 255, 255, 0.65),
    inset 0 -8px 12px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.blob-target {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--blob-size);
  height: var(--blob-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.blob-target img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.end-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  text-align: center;
  background: rgb(10 14 24 / 88%);
  padding: 24px;
}

.end-screen h2,
.end-screen p {
  margin: 0;
}

.restart-button {
  justify-self: center;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--sct-border, #b7c0d8);
  background: var(--sct-accent, #2d6bff);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  :root {
    --blob-size: 96px;
    --play-area-min-height: 360px;
  }
}