.sticker-board--rail {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    align-items: center;
    justify-items: center;
    gap: clamp( 0.7rem, 1.4vw, 1.15rem );
    width: auto;
}


/* =========================================================
   REMOVE OLD PLACEHOLDER APPEARANCE
   ========================================================= */
.sticker-placeholder--yume,
.sticker-placeholder--yami {
    position: relative;
    display: block;
    width: min( 100%, 11rem );
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    text-align: initial;
    text-transform: none;
}


/* =========================================================
   COMMON STICKER
   ========================================================= */
.crypt-sticker {
    isolation: isolate;
    cursor: default;
    transform: rotate(-1.4deg);
    transition:
        transform 180ms ease,
        filter 180ms ease;
}

.crypt-sticker:nth-child(even) { transform: rotate(1.6deg); }


/* =========================================================
   CUT-STICKER WHITE BORDER
   ========================================================= */
.crypt-sticker::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 3px;
    border:
        clamp( 3px, 0.28vw, 5px )
        solid
        var(--crypt-paper);
    border-radius: inherit;
    pointer-events: none;
    filter: drop-shadow( 0 4px 6px rgba(0, 0, 0, 0.26) );
}


/* =========================================================
   YUME SURFACE
   ========================================================= */
.crypt-sticker--yume {
    border-radius: 47% 53% 48% 52% / 53% 45% 55% 47%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 255, 255, 0.13),
            transparent 18%
        ),
        radial-gradient(
            circle at 56% 50%,
            rgba(255, 205, 224, 0.16),
            transparent 54%
        ),
        linear-gradient(
            145deg,
            rgba(20, 51, 101, 0.96),
            rgba(25, 20, 101, 0.92) 52%,
            rgba(64, 26, 51, 0.84) 76%,
            rgba(5, 11, 13, 0.96)
        );

    box-shadow:
        inset 0 0 0 1px rgba(255, 205, 224, 0.18),
        0 6px 14px rgba(0, 0, 0, 0.26);
}


/* =========================================================
   YAMI SURFACE
   ========================================================= */
.crypt-sticker--yami {
    border-radius: 55% 45% 59% 41% / 45% 58% 42% 55%;
    background:
        radial-gradient(
            circle at 62% 39%,
            rgba( 255, 205, 224, 0.08 ),
            transparent 28%
        ),

        linear-gradient(
            132deg,
            rgba( 25, 20, 101, 0.98 ),
            rgba( 20, 51, 101, 0.95 ) 42%,

            rgba( 64, 26, 51, 0.94 ) 72%,
            rgba( 5, 11, 13, 0.98 )
        );

    box-shadow:
        inset 0 0 0 1px rgba( 0, 255, 225, 0.16 ),
        0 6px 14px rgba( 0, 0, 0, 0.3 );
}


/* =========================================================
   P5 CANVAS
   ========================================================= */
.crypt-sticker__canvas {
    position: absolute;

    z-index: 1;

    inset: clamp( 5px, 0.4vw, 7px );
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}


.crypt-sticker__canvas canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important; 
    max-width: none !important;
}


/* =========================================================
   PRINT MISREGISTRATION EDGES
   ========================================================= */
.crypt-sticker--yume::after,
.crypt-sticker--yami::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 8px;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
}





@media ( max-width: 760px ) {
    .sticker-board--rail { gap: 0.8rem; }
    .sticker-placeholder--yume,
    .sticker-placeholder--yami { width: min( 100%, 9.5rem ); }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    .crypt-sticker { transition: none; }
}

}