/* ═══════════════════════════════════════════ */
/* ─── Overlay Layers: Stamps, Corners, Borders ─── */
/* ═══════════════════════════════════════════ */
/* These layers sit between the background texture and content. */
/* All are pointer-events:none so cards/games remain interactive. */

/* ─── Stamp Layer ─── */
/* Tiled SVG motif background — z-index 1 (above texture, below emojis) */
.ds-stamp-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
  background-repeat: repeat;
  overflow: hidden;
}

/* ─── Corner Accents ─── */
/* Small geometric shapes in card corners — z-index 4 */
.ds-corner-accent {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  opacity: var(--corner-opacity, 0.35);
}

/* Corner positions */
.ds-corner-top-left {
  top: 14px;
  left: 14px;
}
.ds-corner-top-right {
  top: 14px;
  right: 14px;
}
.ds-corner-bottom-left {
  bottom: 14px;
  left: 14px;
}
.ds-corner-bottom-right {
  bottom: 14px;
  right: 14px;
}

/* Mirror corners so shapes point inward */
.ds-corner-top-right {
  transform: scaleX(-1);
}
.ds-corner-bottom-left {
  transform: scaleY(-1);
}
.ds-corner-bottom-right {
  transform: scale(-1, -1);
}

/* ── Corner Type: dots ── */
/* Cluster of 3 circles in an L-shape */
.ds-corner-dots {
  width: 8px;
  height: 8px;
  background: var(--corner-color);
  border-radius: 50%;
  box-shadow:
    10px 0 0 0 var(--corner-color),
    0 10px 0 0 var(--corner-color);
}

/* ── Corner Type: sparkle ── */
/* 4-pointed star via clip-path + smaller companion */
.ds-corner-sparkle {
  width: 16px;
  height: 16px;
  background: var(--corner-color);
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
}
.ds-corner-sparkle::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--corner-color);
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0% 50%, 39% 35%);
  top: -4px;
  right: -6px;
  opacity: 0.6;
}

/* ── Corner Type: circle-ring ── */
/* Two concentric unfilled circles */
.ds-corner-circle-ring {
  width: 24px;
  height: 24px;
  border: 2px solid var(--corner-color);
  border-radius: 50%;
  background: transparent;
}
.ds-corner-circle-ring::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--corner-color);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

/* ── Corner Type: diamond ── */
/* Rotated square + smaller companion */
.ds-corner-diamond {
  width: 14px;
  height: 14px;
  border: 2px solid var(--corner-color);
  background: transparent;
  transform: rotate(45deg);
}
.ds-corner-diamond::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--corner-color);
  top: -12px;
  right: -12px;
  opacity: 0.5;
}
/* Override position mirrors for diamond — rotation already handles direction */
.ds-corner-top-right .ds-corner-diamond,
.ds-corner-top-right.ds-corner-diamond {
  transform: rotate(45deg) scaleX(-1);
}
.ds-corner-bottom-left .ds-corner-diamond,
.ds-corner-bottom-left.ds-corner-diamond {
  transform: rotate(45deg) scaleY(-1);
}
.ds-corner-bottom-right .ds-corner-diamond,
.ds-corner-bottom-right.ds-corner-diamond {
  transform: rotate(45deg) scale(-1, -1);
}

/* ── Corner Type: cross ── */
/* Bold plus/cross shape */
.ds-corner-cross {
  width: 20px;
  height: 20px;
  background: transparent;
}
.ds-corner-cross::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 20px;
  background: var(--corner-color);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
}
.ds-corner-cross::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 3px;
  background: var(--corner-color);
  top: 50%;
  transform: translateY(-50%);
  border-radius: 1px;
}

/* ── Corner Type: triangle ── */
/* CSS triangle pointing into the card */
.ds-corner-triangle {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 20px solid var(--corner-color);
  background: transparent;
}

/* ── Corner Type: leaf-sprig ── */
/* Elongated ellipse rotated 45deg with a stem */
.ds-corner-leaf-sprig {
  width: 18px;
  height: 9px;
  background: var(--corner-color);
  border-radius: 0 50% 50% 0;
  transform: rotate(-45deg);
}
.ds-corner-leaf-sprig::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 1.5px;
  background: var(--corner-color);
  bottom: -4px;
  left: 2px;
  transform: rotate(0deg);
  border-radius: 1px;
}
/* Override mirrors for leaf */
.ds-corner-top-right.ds-corner-leaf-sprig {
  transform: rotate(-45deg) scaleX(-1);
}
.ds-corner-bottom-left.ds-corner-leaf-sprig {
  transform: rotate(-45deg) scaleY(-1);
}
.ds-corner-bottom-right.ds-corner-leaf-sprig {
  transform: rotate(-45deg) scale(-1, -1);
}

/* ── Corner Type: arrow-marks ── */
/* Two small chevrons pointing into the corner */
.ds-corner-arrow-marks {
  width: 16px;
  height: 16px;
  background: transparent;
}
.ds-corner-arrow-marks::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--corner-color);
  border-top: 2px solid var(--corner-color);
  top: 0;
  left: 0;
}
.ds-corner-arrow-marks::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-left: 2px solid var(--corner-color);
  border-top: 2px solid var(--corner-color);
  top: 5px;
  left: 5px;
  opacity: 0.6;
}

/* ── Corner Type: star-4pt ── */
/* Two overlapping rotated squares */
.ds-corner-star-4pt {
  width: 16px;
  height: 16px;
  background: transparent;
  position: absolute;
}
.ds-corner-star-4pt::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--corner-color);
  top: 2px;
  left: 2px;
}
.ds-corner-star-4pt::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--corner-color);
  top: 2px;
  left: 2px;
  transform: rotate(45deg);
}

/* ─── Border Treatments ─── */
/* Decorative edge effects — z-index 3 (above emojis, below corners) */
.ds-border-treatment {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
}

/* ── Border: scalloped ── */
/* Repeating semicircles along inner edges */
.ds-border-scalloped {
  background:
    /* top */
    radial-gradient(
      circle at 50% 0,
      var(--border-color) calc(var(--border-size, 18px) * 0.4),
      transparent calc(var(--border-size, 18px) * 0.4 + 1px)
    ),
    /* bottom */
    radial-gradient(
        circle at 50% 100%,
        var(--border-color) calc(var(--border-size, 18px) * 0.4),
        transparent calc(var(--border-size, 18px) * 0.4 + 1px)
      ),
    /* left */
    radial-gradient(
        circle at 0 50%,
        var(--border-color) calc(var(--border-size, 18px) * 0.4),
        transparent calc(var(--border-size, 18px) * 0.4 + 1px)
      ),
    /* right */
    radial-gradient(
        circle at 100% 50%,
        var(--border-color) calc(var(--border-size, 18px) * 0.4),
        transparent calc(var(--border-size, 18px) * 0.4 + 1px)
      );
  background-size:
    var(--border-size, 18px) calc(var(--border-size, 18px) * 0.5),
    var(--border-size, 18px) calc(var(--border-size, 18px) * 0.5),
    calc(var(--border-size, 18px) * 0.5) var(--border-size, 18px),
    calc(var(--border-size, 18px) * 0.5) var(--border-size, 18px);
  background-position:
    top center,
    bottom center,
    left center,
    right center;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  opacity: 0.4;
}

/* ── Border: film-strip ── */
/* Sprocket holes along left and right edges */
.ds-border-film-strip::before,
.ds-border-film-strip::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 14px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 6px,
    var(--border-color) 6px,
    var(--border-color) 14px,
    transparent 14px,
    transparent 20px
  );
  opacity: 0.4;
  border-radius: 2px;
}
.ds-border-film-strip::before {
  left: 4px;
}
.ds-border-film-strip::after {
  right: 4px;
}

/* ── Border: ticket-stub ── */
/* Vertical dashed line near left edge + "ADMIT ONE" text */
.ds-border-ticket-stub::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 60px;
  width: 0;
  border-left: 2px dashed var(--border-color);
  opacity: 0.4;
}
.ds-border-ticket-stub::after {
  content: 'ADMIT ONE';
  position: absolute;
  top: 50%;
  left: 30px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: top left;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--border-color);
  opacity: 0.3;
  white-space: nowrap;
}

/* ── Border: rope ── */
/* Twisted rope pattern inset from edge */
.ds-border-rope {
  border: 8px solid transparent;
  background-clip: padding-box;
  outline: none;
}
.ds-border-rope::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 4px solid transparent;
  border-image: repeating-linear-gradient(
      45deg,
      var(--border-color) 0px,
      var(--border-color) 4px,
      transparent 4px,
      transparent 8px
    )
    10;
  opacity: 0.35;
  border-radius: 0;
}

/* ── Border: double-line ── */
/* Two concentric inset borders */
.ds-border-double-line::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--border-color);
  border-radius: 18px;
  opacity: 0.3;
}
.ds-border-double-line::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  opacity: 0.22;
}

/* ── Border: railroad ── */
/* Parallel lines with perpendicular cross-ties */
.ds-border-railroad::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  opacity: 0.25;
}
.ds-border-railroad::after {
  content: '';
  position: absolute;
  inset: 4px;
  background:
    /* top cross-ties */
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 16px,
        var(--border-color) 16px,
        var(--border-color) 18px
      )
      0 6px / 100% 6px no-repeat,
    /* bottom cross-ties */
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 16px,
        var(--border-color) 16px,
        var(--border-color) 18px
      )
      0 calc(100% - 6px) / 100% 6px no-repeat,
    /* left cross-ties */
    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 16px,
        var(--border-color) 16px,
        var(--border-color) 18px
      )
      6px 0 / 6px 100% no-repeat,
    /* right cross-ties */
    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 16px,
        var(--border-color) 16px,
        var(--border-color) 18px
      )
      calc(100% - 6px) 0 / 6px 100% no-repeat;
  opacity: 0.2;
  border-radius: inherit;
}

/* ── Border: dotted-inset ── */
/* Inner border of evenly-spaced small dots */
.ds-border-dotted-inset::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dotted var(--border-color);
  border-radius: 14px;
  opacity: 0.35;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .ds-corner-accent {
    transform: scale(0.8);
  }
  .ds-corner-top-left {
    top: 10px;
    left: 10px;
  }
  .ds-corner-top-right {
    top: 10px;
    right: 10px;
    transform: scaleX(-1) scale(0.8);
  }
  .ds-corner-bottom-left {
    bottom: 10px;
    left: 10px;
    transform: scaleY(-1) scale(0.8);
  }
  .ds-corner-bottom-right {
    bottom: 10px;
    right: 10px;
    transform: scale(-0.8, -0.8);
  }
}