/* Scratch cards (is-scratch, cardState() 'krassen'), see js/scratch.js. The
   layout-reveal rules draw the cards made as a scratch layout before. */
.cv-scratch, .cv-scratch-skip, .cv-scratch-try { display: none; }

.layout-reveal .cv-card { width: min(100%, var(--card-width, 560px)); margin: 0 auto; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 2px rgb(23 34 28 / .06), 0 24px 50px rgb(23 34 28 / .22); }
/* The message lies on the picture; what does not fit opens with "Lees de hele boodschap". */
.layout-reveal .cv-front { position: relative; aspect-ratio: var(--frame, 3 / 2); overflow: hidden; }
.layout-reveal .cv-picture { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.layout-reveal .cv-message-front { position: absolute; left: 8%; right: 8%; top: 50%; z-index: 1; max-height: 84%; overflow: hidden; transform: translateY(-50%) rotate(-1.5deg); padding: 20px 22px; border-radius: 6px; background: rgb(255 253 249 / .94); text-align: center; box-shadow: 0 10px 28px rgb(0 0 0 / .25); }
.layout-reveal.has-overflow .cv-message-front { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
.layout-reveal.font-hand .cv-message { font-size: clamp(24px, 3vw, 32px); }
.is-scratch .cv-card { position: relative; overflow: hidden; }
.is-scratch .cv-scratch-try { display: inline-flex; align-self: center; }

.is-scratch.is-covered .cv-scratch { position: absolute; inset: 0; z-index: 3; display: block; transition: opacity .6s ease; }
.is-scratch.is-covered .cv-scratch canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.is-scratch.is-covered .cv-scratch-hint { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: #2E3338; pointer-events: none; }
.is-scratch.is-covered .cv-scratch-try { display: none; }
.is-scratch.is-covered .cv-scratch-skip { display: inline; align-self: center; }
.is-scratch.is-scratched .cv-scratch { opacity: 0; pointer-events: none; }
.receive .is-scratch .cv-scratch-skip { color: var(--lime); }