.graywick-card-swipe {
    --gcs-max-width: 700px;
    --gcs-button-size: clamp(72px, 15vw, 112px);
    --gcs-gap: clamp(12px, 3vw, 28px);
    --gcs-choice-strength: 0;
    width: min(100%, var(--gcs-max-width));
    margin: 0 auto;
    padding: clamp(10px, 2.5vw, 24px) clamp(8px, 2vw, 18px) clamp(14px, 3vw, 28px);
    background: transparent !important;
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    font-family: inherit;
}

.graywick-card-swipe *,
.graywick-card-swipe *::before,
.graywick-card-swipe *::after {
    box-sizing: border-box;
}

.gcs-stage {
    position: relative;
    width: 100%;
    padding: clamp(20px, 4vw, 42px) clamp(18px, 5vw, 46px) 0;
    overflow: visible;
}

.gcs-stack {
    position: relative;
    width: min(100%, 535px);
    aspect-ratio: 975 / 1364;
    margin: 0 auto;
    perspective: 1400px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    transition: filter 280ms ease;
}

.gcs-card {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 50% 78%;
    will-change: transform, opacity, filter;
    border-radius: clamp(8px, 1.8vw, 18px);
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .32));
}

.gcs-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* The cards behind the front card deliberately use the SAME visible card image,
   heavily obscured. This preserves the messy pack look without revealing the next card. */
.gcs-card-back {
    pointer-events: none;
    opacity: .78;
    transition: transform 430ms cubic-bezier(.16,1,.3,1), opacity 300ms ease, filter 300ms ease;
    filter: grayscale(1) saturate(0) brightness(.28) contrast(.9) blur(.35px) drop-shadow(0 14px 16px rgba(0,0,0,.34));
}

.gcs-card-back::after {
    content: "";
    position: absolute;
    inset: 1.5%;
    border-radius: inherit;
    background: rgba(38, 38, 38, .44);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 34px rgba(0,0,0,.38);
}

.gcs-card-back-1 { transform: translate(-2.5%, 1.6%) rotate(-3.4deg) scale(.995); z-index: 4; }
.gcs-card-back-2 { transform: translate(3.6%, 1.2%) rotate(4.8deg) scale(.985); z-index: 3; }
.gcs-card-back-3 { transform: translate(-5.2%, 2.4%) rotate(-6.8deg) scale(.972); z-index: 2; }
.gcs-card-back-4 { transform: translate(5.7%, 3.1%) rotate(7.2deg) scale(.96); z-index: 1; }

/* A little pack movement while a card is being chosen. */
.gcs-changing .gcs-card-back-1 { transform: translate(-3.4%, 2.4%) rotate(-4.1deg) scale(.99); }
.gcs-changing .gcs-card-back-2 { transform: translate(4.7%, 2.0%) rotate(5.7deg) scale(.978); }
.gcs-changing .gcs-card-back-3 { transform: translate(-6.4%, 3.2%) rotate(-7.6deg) scale(.965); }
.gcs-changing .gcs-card-back-4 { transform: translate(6.8%, 4.0%) rotate(8.3deg) scale(.952); }

.gcs-card-front {
    z-index: 5;
    cursor: grab;
    transition: transform 400ms cubic-bezier(.16,.84,.28,1), opacity 300ms ease, filter 220ms ease;
    outline: none;
}

.gcs-card-front:active { cursor: grabbing; }
.gcs-card-front.gcs-dragging { transition: none; }
.gcs-card-front.gcs-exit { pointer-events: none; }

.gcs-card-front:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 6px;
}

.gcs-card-front {
    transform-style: preserve-3d;
}

.gcs-card-front img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The replacement card is first dealt face-down from the pack. */
.gcs-card-front.gcs-deal-back {
    animation: gcs-deal-card-back 430ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes gcs-deal-card-back {
    0% {
        transform: translate3d(0,24px,0) rotate(-1.4deg) scale(.91);
        opacity: 0;
        filter: drop-shadow(0 8px 10px rgba(0,0,0,.20));
    }
    68% {
        transform: translate3d(0,-4px,0) rotate(.45deg) scale(1.012);
        opacity: 1;
        filter: drop-shadow(0 18px 22px rgba(0,0,0,.38));
    }
    100% {
        transform: translate3d(0,0,0) rotate(0) scale(1);
        opacity: 1;
        filter: drop-shadow(0 16px 18px rgba(0,0,0,.32));
    }
}

/* Blackjack-style reveal: turn the generic back edge-on, swap the image,
   then finish the turn with the selected character face-up. */
.gcs-card-front.gcs-flip-out {
    animation: gcs-card-flip-out 215ms cubic-bezier(.55,.02,.82,.45) both;
    pointer-events: none;
}

.gcs-card-front.gcs-flip-in {
    animation: gcs-card-flip-in 285ms cubic-bezier(.16,1,.3,1) both;
    pointer-events: none;
}

@keyframes gcs-card-flip-out {
    0% {
        transform: perspective(1400px) translate3d(0,0,0) rotateY(0deg) scale(1);
        filter: drop-shadow(0 16px 18px rgba(0,0,0,.32));
    }
    100% {
        transform: perspective(1400px) translate3d(0,-7px,0) rotateY(90deg) scale(.975);
        filter: drop-shadow(0 8px 10px rgba(0,0,0,.24));
    }
}

@keyframes gcs-card-flip-in {
    0% {
        transform: perspective(1400px) translate3d(0,-7px,0) rotateY(-90deg) scale(.975);
        filter: drop-shadow(0 8px 10px rgba(0,0,0,.24));
    }
    70% {
        transform: perspective(1400px) translate3d(0,-2px,0) rotateY(4deg) scale(1.008);
        filter: drop-shadow(0 18px 22px rgba(0,0,0,.38));
    }
    100% {
        transform: perspective(1400px) translate3d(0,0,0) rotateY(0deg) scale(1);
        filter: drop-shadow(0 16px 18px rgba(0,0,0,.32));
    }
}

/* Swipe choice stamps: grow in as the card is dragged towards its destination. */
.gcs-drag-choice {
    position: absolute;
    top: 8%;
    z-index: 3;
    padding: .42em .72em .34em;
    border: 3px solid currentColor;
    border-radius: 9px;
    background: rgba(0,0,0,.76);
    font-size: clamp(15px, 4vw, 30px);
    line-height: 1;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .055em;
    opacity: 0;
    transform: scale(.84) rotate(var(--gcs-stamp-rotate));
    transition: opacity 80ms linear, transform 100ms ease;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
    box-shadow: 0 0 20px currentColor, inset 0 0 12px rgba(255,255,255,.06);
}

.gcs-drag-choice-monster {
    left: 7%;
    color: #b744ff;
    --gcs-stamp-rotate: -8deg;
}

.gcs-drag-choice-resident {
    right: 7%;
    color: #c9ef00;
    --gcs-stamp-rotate: 8deg;
}

.gcs-preview-monster .gcs-drag-choice-monster,
.gcs-preview-resident .gcs-drag-choice-resident {
    opacity: var(--gcs-choice-strength);
    transform: scale(.98) rotate(var(--gcs-stamp-rotate));
}

.gcs-preview-monster .gcs-card-front {
    filter: drop-shadow(0 16px 18px rgba(0,0,0,.32)) drop-shadow(0 0 24px rgba(183,68,255,.48));
}

.gcs-preview-resident .gcs-card-front {
    filter: drop-shadow(0 16px 18px rgba(0,0,0,.32)) drop-shadow(0 0 24px rgba(201,239,0,.44));
}

.gcs-status {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
}

.gcs-status:empty { display: none; }

/* Explicit confirmation after Monster/Resident is selected. */
.gcs-choice-feedback {
    position: absolute;
    left: 50%;
    bottom: -18px;
    z-index: 12;
    transform: translate(-50%, 8px) scale(.94);
    padding: 8px 14px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(8,8,8,.88);
    font-size: clamp(10px, 2.3vw, 13px);
    line-height: 1;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .08em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.35), 0 0 16px currentColor;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.16,1,.3,1);
}

.gcs-choice-monster .gcs-choice-feedback { color: #b744ff; }
.gcs-choice-resident .gcs-choice-feedback { color: #c9ef00; }
.gcs-choice-visible .gcs-choice-feedback { opacity: 1; transform: translate(-50%, 0) scale(1); }

.gcs-controls {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gcs-gap);
    width: 100%;
    margin-top: clamp(30px, 6vw, 48px);
    padding-inline: 4px;
}

.gcs-control {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    flex: 0 1 var(--gcs-button-size);
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 1.5vw, 10px);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: transform 180ms cubic-bezier(.16,1,.3,1), filter 180ms ease, opacity 160ms ease, background-color 180ms ease, padding 180ms cubic-bezier(.16,1,.3,1), border-radius 180ms ease;
}

.gcs-control:hover {
    transform: translateY(-1px) scale(.94);
    padding: clamp(5px, 1vw, 8px);
    border-radius: clamp(12px, 2vw, 18px);
    background: rgba(0, 0, 0, .5) !important;
}
.gcs-control:active {
    transform: translateY(0) scale(.91);
    background: rgba(0, 0, 0, .58) !important;
}
.gcs-control:disabled { opacity: .28; cursor: not-allowed; transform: none; filter: grayscale(.6); }
.gcs-control:focus-visible { outline: none; }

.gcs-control-icon {
    display: block;
    width: var(--gcs-button-size);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform 200ms cubic-bezier(.16,1,.3,1), filter 200ms ease;
}

.gcs-control-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .28));
}

.gcs-control-label {
    display: block;
    font-size: clamp(11px, 2.4vw, 18px);
    line-height: 1;
    font-weight: 800;
    font-style: italic;
    letter-spacing: .035em;
    white-space: nowrap;
    text-shadow: 0 2px 7px rgba(0,0,0,.45);
    transition: transform 180ms ease, text-shadow 180ms ease;
}

.gcs-control-monster .gcs-control-label { color: #b744ff; }
.gcs-control-random .gcs-control-label { color: #ff9d10; }
.gcs-control-resident .gcs-control-label { color: #c9ef00; }

.gcs-control.gcs-selected {
    animation: gcs-control-pop 520ms cubic-bezier(.16,1,.3,1);
}

.gcs-control.gcs-selected .gcs-control-icon {
    transform: scale(1.09);
}

.gcs-control-monster.gcs-selected .gcs-control-icon {
    filter: drop-shadow(0 0 13px rgba(183,68,255,.92)) drop-shadow(0 0 26px rgba(183,68,255,.55));
}

.gcs-control-resident.gcs-selected .gcs-control-icon {
    filter: drop-shadow(0 0 13px rgba(201,239,0,.92)) drop-shadow(0 0 26px rgba(201,239,0,.50));
}

.gcs-control-random.gcs-selected .gcs-control-icon {
    filter: drop-shadow(0 0 13px rgba(255,157,16,.92)) drop-shadow(0 0 26px rgba(255,157,16,.50));
}

.gcs-control.gcs-selected .gcs-control-label {
    transform: scale(1.08);
    text-shadow: 0 0 9px currentColor, 0 2px 7px rgba(0,0,0,.55);
}

@keyframes gcs-control-pop {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-7px) scale(1.08); }
    70% { transform: translateY(-2px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .graywick-card-swipe {
        --gcs-button-size: clamp(64px, 23vw, 92px);
        --gcs-gap: clamp(8px, 2.5vw, 14px);
        padding-inline: 2px;
    }

    .gcs-stage { padding-inline: 24px; }
    .gcs-control-label { font-size: clamp(10px, 3.6vw, 14px); }
    .gcs-drag-choice { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .graywick-card-swipe *,
    .graywick-card-swipe *::before,
    .graywick-card-swipe *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}