/* TearPoster: single, responsive poster with fixed tear-off slots and a real flip-to-back interaction. */
@font-face{font-family:'Geert Handdrawn';src:url('Geert_Handdrawn_2.ttf') format('truetype');font-style:normal;font-weight:normal;font-display:swap}
.tearposter{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;color:#111;font-family:'Geert Handdrawn',var(--wp--preset--font-family--heading, inherit);overflow:visible;position:relative}
.tearposter *{box-sizing:border-box;font-family:inherit}
.tp-poster-stage{position:relative;width:100%;max-width:100%;margin:0 auto;perspective:1600px;isolation:isolate;overflow:visible;line-height:0}
.tp-art-wrap{position:relative;width:100%;margin:0;padding:0;line-height:0;overflow:hidden;background:#f8f7f3}
.tp-art{display:block;width:100%;height:auto;max-width:100%;margin:0;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}
.tp-strip-layer{position:relative;display:grid;grid-template-columns:repeat(var(--tp-count,6),minmax(0,1fr));align-items:stretch;justify-content:stretch;z-index:2;width:100%;height:auto;min-height:1px;perspective:1600px;background:#f8f7f3;overflow:visible;margin:0;padding:0}
.tp-strip-slot{position:relative;min-width:0;width:100%;height:100%;min-height:1px;margin:0;padding:0;background:#f8f7f3;border-right:1px solid rgba(0,0,0,.25);line-height:0}
.tp-strip-slot:last-child{border-right:0}.tp-strip-slot.tp-slot-empty{background:#f3f0e9;box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.tp-strip{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:1px;margin:0;padding:0;border:0;border-radius:0;background:transparent;appearance:none;cursor:grab;touch-action:none;transform-origin:50% 0%;transform-style:preserve-3d;transition:transform .12s ease,filter .15s;outline-offset:-3px;box-shadow:none;line-height:normal;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;perspective:1200px;z-index:2;color:#111;font:inherit;overflow:visible}
.tp-strip:focus-visible{outline:2px solid #1769aa}.tp-strip:hover:not(:disabled){filter:brightness(1.025)}.tp-strip:active{cursor:grabbing}.tp-strip:disabled{cursor:default;pointer-events:none}
.tp-strip-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.75,.2,1);will-change:transform}
.tp-strip-face{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:#f8f7f3;background-repeat:no-repeat;background-size:100% 100%;line-height:normal}
.tp-strip-front{transform:rotateY(0deg);background-position:center;background-size:100% 100%;box-shadow:inset 0 1px 0 #ffffff70}
.tp-strip-back{transform:rotateY(180deg);background:#f8f7f3;border:1px solid #d1cec7;box-shadow:inset 0 1px 3px #0001;color:#111}
.tp-strip-back-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;z-index:0;margin:0;padding:0}
.tp-back-heading,.tp-back-valid{position:absolute;left:5%;right:5%;z-index:1;color:#111;font-size:clamp(8px,1vw,12px);font-weight:700;line-height:1.2;font-family:inherit;text-align:center}.tp-back-heading{top:4%}.tp-back-valid{bottom:3%;font-size:clamp(7px,.8vw,10px);font-weight:500}
/* Scratch layer is attached to the reverse face itself, never placed in a separate section below the poster. */
.tp-scratch-wrap{position:absolute;left:14%;right:14%;top:34%;height:24%;border-radius:2px;overflow:hidden;background:#fff;z-index:2;box-shadow:inset 0 0 0 1px #c8c8c8;line-height:normal}
.tp-code-under{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#000;background:#fff;font-size:clamp(8px,1vw,13px);font-weight:700;line-height:1.15;font-family:monospace;letter-spacing:.01em;padding:2px;overflow-wrap:anywhere;text-align:center}
.tp-scratch-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .18s;margin:0;padding:0}
.tp-copy-code{position:absolute;left:50%;top:61%;bottom:auto;transform:translateX(-50%);z-index:10;padding:10px 18px;min-width:70%;max-width:95%;box-sizing:border-box;font-size:clamp(14px,1.6vw,20px);font-weight:700;line-height:1.25;cursor:pointer;color:#000;background:#fff;border:2px solid #555;border-radius:4px;white-space:nowrap;pointer-events:auto;touch-action:manipulation;display:flex;align-items:center;justify-content:center}.tp-copy-code[hidden]{display:none}
/* Overlay matches the strip's original slot. The empty slot remains and other strips never reflow. */
.tp-detached-zone{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:20;margin:0;padding:0}
.tp-strip.tp-dragging{transition:none;z-index:50;filter:drop-shadow(0 14px 12px #0005)}.tp-strip.tp-loading{filter:brightness(.8);pointer-events:none}.tp-strip.tp-tearing{z-index:60;transition:transform .68s cubic-bezier(.18,.72,.24,1),filter .68s;filter:drop-shadow(0 18px 14px #0006);pointer-events:none}
.tp-strip.tp-detached{position:absolute;z-index:61;pointer-events:auto;cursor:grab;touch-action:none;filter:drop-shadow(0 10px 10px #0004);overflow:visible;transition:transform .18s ease,left .08s linear,top .08s linear}.tp-strip.tp-detached.tp-dragging{cursor:grabbing;transition:none;filter:drop-shadow(0 16px 14px #0006)}
.tp-strip.tp-detached .tp-strip-inner{transform:rotateY(180deg)}.tp-strip.tp-detached .tp-strip-front{pointer-events:none}.tp-strip.tp-detached .tp-strip-back{pointer-events:auto}
.tp-overlay-message{display:block;width:100%;padding:.5rem 0;color:#111;font-weight:700;line-height:1.35;font-size:clamp(13px,1.5vw,18px);text-align:center}.tp-overlay-message[hidden],.tp-result[hidden]{display:none}
.tp-instructions,.tp-expiry{color:#000;font-size:clamp(11px,1.1vw,14px);line-height:1.35;margin:.35rem 0;text-align:center}
.tp-result{width:100%;max-width:100%;border:1px solid #d6d6d6;padding:8px;margin-top:.35rem;background:#fafafa;color:#111;overflow:hidden}
.tp-message{padding:1rem;border:1px solid #ddd;color:#111}
@media(max-width:600px){.tp-instructions,.tp-expiry{font-size:11px}.tp-scratch-wrap{left:12%;right:12%;top:34%;height:24%}.tp-back-heading{font-size:7px}.tp-back-valid{font-size:7px}}
@media(prefers-reduced-motion:reduce){.tp-strip,.tp-strip-inner,.tp-strip.tp-tearing{transition:none}}
/* v1.0.5: the flipped strip grows and travels to the center of the poster. */
.tp-strip.tp-tearing{transition:transform .68s cubic-bezier(.18,.72,.24,1),filter .68s,width .68s cubic-bezier(.18,.72,.24,1),height .68s cubic-bezier(.18,.72,.24,1),left .68s cubic-bezier(.18,.72,.24,1),top .68s cubic-bezier(.18,.72,.24,1);}
.tp-strip.tp-detached{max-width:none;max-height:none;}
.tp-redeem-link{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:4;display:block;color:#000!important;background:#fff!important;border:1px solid #777;border-radius:3px;padding:4px 8px;font-size:clamp(10px,1.1vw,15px);font-weight:700;line-height:1.2;font-family:inherit;text-decoration:underline!important;white-space:nowrap;pointer-events:auto;}
.tp-redeem-link:hover,.tp-redeem-link:focus{color:#000!important;background:#f4f4f4!important;}
.tp-overlay-message{margin:.5rem auto 0;max-width:100%;}

/* v1.0.6: flatter artwork during the pull, with a paper edge and directional shadow for depth. */
.tp-strip{box-shadow:inset 0 0 0 1px rgba(60,52,40,.12);}
.tp-strip.tp-dragging{filter:drop-shadow(2px 5px 3px rgba(0,0,0,.22)) drop-shadow(0 14px 12px rgba(0,0,0,.28));}
.tp-strip.tp-tearing{filter:drop-shadow(2px 4px 2px rgba(0,0,0,.18)) drop-shadow(0 16px 13px rgba(0,0,0,.34));}
.tp-strip.tp-detached{filter:drop-shadow(2px 3px 2px rgba(0,0,0,.2)) drop-shadow(0 10px 10px rgba(0,0,0,.26));}

/* v1.0.7: status messages occupy the vacant strip row, not space below the poster. */
.tp-strip-layer{position:relative}
.tp-strip-layer>.tp-overlay-message{position:absolute;inset:0;z-index:15;display:block;box-sizing:border-box;padding:clamp(8px,2vw,24px);margin:0;background:transparent;color:#fe4746;text-align:center;font-weight:700;line-height:1.35;font-size:clamp(13px,1.8vw,20px);overflow-wrap:anywhere;white-space:normal}
.tp-strip-layer>.tp-overlay-message.tp-already-message{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}
.tp-strip-layer>.tp-overlay-message.tp-done-message{background:transparent}
.tp-strip-layer>.tp-overlay-message[hidden]{display:none}
.tp-strip-layer>.tp-overlay-message a{color:#fe4746!important;text-decoration:underline}

/* Once the code is revealed, keep the strip still so the copy button is easy to use. */
.tp-strip.tp-detached[data-revealed="1"]{cursor:default;touch-action:auto}

/* v1.1.4: enforce the bundled hand-drawn font against theme button/text rules. Keep code monospace. */
.tearposter, .tearposter :is(button,a,span,div,p,label,strong,em), .tp-message { font-family: 'Geert Handdrawn', sans-serif !important; }
.tearposter .tp-code-under, .tearposter textarea, .tearposter code, .tearposter pre { font-family: monospace !important; }

/* v1.1.9: ensure the bundled static TTF is applied to every status message; keep codes monospace. */
.tearposter, .tearposter *, .tearposter .tp-strip-layer > .tp-overlay-message, .tearposter .tp-strip-layer > .tp-overlay-message * { font-family: 'Geert Handdrawn', sans-serif !important; }
.tearposter .tp-code-under, .tearposter textarea, .tearposter code, .tearposter pre { font-family: monospace !important; }
