@import url("../games/styles.css?v=20260609-legal-footer-dark-cards");

.scribbles-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px),
    radial-gradient(circle at 14% 8%, rgba(100, 241, 220, 0.11), transparent 0 18rem),
    radial-gradient(circle at 84% 18%, rgba(255, 190, 77, 0.1), transparent 0 16rem),
    var(--bg);
  background-size: 88px 88px, 88px 88px, auto, auto, auto;
}

.scribble-grid {
  align-items: stretch;
}

.scribble-grid article {
  min-width: 0;
}

.scribble-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(184px, 16vw, 232px);
  border-color: rgba(220, 255, 244, 0.2);
  background: #070a0c;
}

.scribble-card::before,
.scribble-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scribble-card::before {
  z-index: -2;
  background-image: var(--card-bg);
  background-position: top left;
  background-size: cover;
  filter: blur(3px) saturate(0.98) contrast(1.06);
  opacity: 0.76;
  transform: scale(1.02);
}

.scribble-card::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 6, 6, 0.68), rgba(5, 6, 6, 0.86)),
    linear-gradient(135deg, rgba(187, 255, 42, 0.12), transparent 38%);
}

.scribble-card h3 {
  max-width: 100%;
  white-space: normal;
}

.scribble-card p {
  max-width: 35rem;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.54);
}

.scribble-card .card-link {
  background: rgba(5, 6, 6, 0.52);
  backdrop-filter: blur(8px);
}

.scribble-card:hover,
.scribble-card:focus-visible {
  background: #070a0c;
}

.scribble-card:hover::before,
.scribble-card:focus-visible::before {
  opacity: 0.66;
  transform: scale(1.05);
}

@media (max-width: 640px) {
  .scribble-card {
    min-height: 178px;
  }

  .scribble-card .card-link {
    width: max-content;
  }
}