/**
 * Scratch Popup Module Styles
 * Premium visual system and isolated layout for the Owleys scratch popup.
 *
 * @author Igor Yakushev <https://igor-ya.ru/>
 * @since 2026-04
 */

#owleys-scratch-overlay,
#owleys-scratch-overlay *,
#owleys-scratch-overlay *::before,
#owleys-scratch-overlay *::after {
    box-sizing: border-box;
}

#owleys-scratch-overlay {
    isolation: isolate;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.4;
    text-indent: 0;
    text-transform: none;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

#owleys-scratch-overlay :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
}

#owleys-scratch-overlay :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

#owleys-scratch-overlay :where(form) {
    margin: 0;
}

#owleys-scratch-overlay :where(button, input, textarea, select) {
    min-width: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

#owleys-scratch-overlay :where(button) {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    text-transform: none;
}

#owleys-scratch-overlay :where(input, textarea, select) {
    margin: 0;
}

#owleys-scratch-overlay :where(a) {
    color: inherit;
    text-decoration: none;
}

#owleys-scratch-overlay :where(img, svg, canvas) {
    display: block;
    max-width: 100%;
}

body.owleys-scratch-lock {
    overflow: hidden;
}

.owleys-scratch-overlay {
    --scratch-shell: linear-gradient(140deg, #150f23 0%, #2d1d47 46%, #140d22 100%);
    --scratch-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(247, 242, 255, 0.98) 100%);
    --scratch-panel-line: rgba(255, 255, 255, 0.72);
    --scratch-panel-shadow: 0 44px 96px rgba(12, 7, 23, 0.44);
    --scratch-ink: #181320;
    --scratch-ink-soft: #5b526a;
    --scratch-ink-subtle: #7c738b;
    --scratch-accent-amber: #ffb44d;
    --scratch-accent-amber-deep: #ff8b3d;
    --scratch-accent-gold: #ffd46b;
    --scratch-accent-purple: #6e35f2;
    --scratch-accent-purple-soft: rgba(110, 53, 242, 0.1);
    --scratch-surface-soft: rgba(255, 255, 255, 0.82);
    --scratch-surface-line: rgba(62, 42, 95, 0.08);
    --scratch-surface-shadow: 0 22px 42px rgba(44, 23, 73, 0.1);
    --scratch-focus: rgba(116, 65, 246, 0.26);
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2.5vh, 24px) clamp(12px, 2vw, 24px);
    font-family: "Cabin", "Segoe UI", sans-serif;
    color: #fff;
}

.owleys-scratch-overlay.is-open {
    display: flex;
}

.owleys-scratch-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(255, 202, 114, 0.22), transparent 20%),
        radial-gradient(circle at 84% 18%, rgba(169, 110, 255, 0.18), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(255, 191, 102, 0.18), transparent 26%),
        rgba(10, 7, 18, 0.86);
    backdrop-filter: blur(12px);
}

.owleys-scratch-backdrop::before,
.owleys-scratch-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.owleys-scratch-backdrop::before {
    background:
        radial-gradient(circle at 12% 24%, rgba(255, 229, 149, 0.18), transparent 20%),
        radial-gradient(circle at 78% 16%, rgba(175, 119, 255, 0.16), transparent 22%),
        radial-gradient(circle at 24% 82%, rgba(255, 214, 119, 0.14), transparent 20%),
        radial-gradient(circle at 82% 76%, rgba(160, 112, 255, 0.12), transparent 22%);
    opacity: 0.84;
    animation: owleysScratchBackdropGlow 18s ease-in-out infinite alternate;
}

.owleys-scratch-backdrop::after {
    background:
        linear-gradient(116deg, transparent 0%, rgba(255, 255, 255, 0.1) 48%, transparent 56%),
        linear-gradient(286deg, transparent 0%, rgba(255, 255, 255, 0.06) 42%, transparent 56%);
    mix-blend-mode: screen;
    animation: owleysScratchVeilShift 16s ease-in-out infinite alternate;
}

.owleys-scratch-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.owleys-scratch-atmosphere__particle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    opacity: var(--alpha);
    transform: translate3d(0, 0, 0);
    background: radial-gradient(circle at center, rgba(255, 245, 208, 1) 0 44%, rgba(255, 214, 112, 0.95) 45% 74%, rgba(255, 214, 112, 0) 75%);
    box-shadow:
        0 0 calc(var(--size) * 2.2) rgba(255, 223, 140, 0.42),
        0 0 calc(var(--size) * 6) rgba(188, 137, 255, 0.12);
    animation:
        owleysScratchParticleDrift var(--duration) ease-in-out infinite,
        owleysScratchParticleTwinkle calc(var(--duration) * 0.56) ease-in-out infinite;
    animation-delay: var(--delay), calc(var(--delay) * 0.72);
}

.owleys-scratch-atmosphere__particle:nth-child(3n) {
    background: radial-gradient(circle at center, rgba(255, 248, 224, 1) 0 38%, rgba(255, 232, 166, 0.95) 39% 70%, rgba(255, 232, 166, 0) 71%);
}

.owleys-scratch-atmosphere__particle:nth-child(4n) {
    box-shadow:
        0 0 calc(var(--size) * 2.6) rgba(255, 242, 191, 0.46),
        0 0 calc(var(--size) * 7.2) rgba(172, 124, 255, 0.14);
}

.owleys-scratch-atmosphere__particle:nth-child(5n) {
    animation-duration: calc(var(--duration) * 1.22), calc(var(--duration) * 0.5);
}

.owleys-scratch-modal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 1188px);
    height: calc(100vh - clamp(16px, 5vh, 48px));
    height: calc(100dvh - clamp(16px, 5vh, 48px));
    max-height: 812px;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: clamp(22px, 4vh, 38px);
    background: var(--scratch-shell);
    box-shadow: var(--scratch-panel-shadow);
}

.owleys-scratch-modal::before,
.owleys-scratch-modal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.owleys-scratch-modal::before {
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 221, 137, 0.14), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(180, 121, 255, 0.14), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(255, 193, 97, 0.12), transparent 28%);
}

.owleys-scratch-modal::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 14%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 52%, transparent 100%);
}

.owleys-scratch-close {
    position: absolute;
    top: clamp(10px, 2vh, 20px);
    right: clamp(10px, 2vh, 20px);
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 6vh, 56px);
    height: clamp(40px, 6vh, 56px);
    border-radius: 999px;
    border: 2px solid rgba(24, 19, 32, 0.9);
    background: rgba(255, 255, 255, 0.9);
    color: #1b1625;
    font-size: clamp(24px, 4vh, 36px);
    line-height: 1;
    cursor: pointer;
    transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease;
}

.owleys-scratch-close:hover {
    transform: scale(1.04);
    background: #fff;
    border-color: rgba(24, 19, 32, 1);
}

.owleys-scratch-close:focus-visible {
    outline: 2px solid var(--scratch-focus);
    outline-offset: 4px;
}

.owleys-scratch-stage {
    display: none;
    overflow: hidden;
    padding: clamp(10px, 2.5vh, 26px);
}

.owleys-scratch-stage.is-active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    animation: owleysScratchStageIn 0.36s ease;
}

.owleys-scratch-scene {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
}

.owleys-scratch-panel {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: clamp(18px, 4vh, 42px) clamp(22px, 3vw, 42px) clamp(14px, 3.5vh, 36px);
    border: 1px solid var(--scratch-panel-line);
    border-radius: clamp(18px, 3vh, 30px);
    background: var(--scratch-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
    color: var(--scratch-ink);
}

.owleys-scratch-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%);
    pointer-events: none;
}

.owleys-scratch-panel--intro {
    padding: clamp(18px, 4.5vh, 44px) clamp(24px, 3.5vw, 48px) clamp(14px, 3.5vh, 36px);
    align-items: center;
    justify-content: center;
}

.owleys-scratch-panel--picker,
.owleys-scratch-panel--scratch {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.owleys-scratch-panel--form {
    align-items: center;
}

.owleys-scratch-scene-header {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(6px, 1.5vh, 12px);
}

.owleys-scratch-scene-header--center {
    width: 100%;
    justify-items: center;
    text-align: center;
}

.owleys-scratch-scene-header--narrow {
    max-width: 620px;
    margin-inline: auto;
}

.owleys-scratch-title {
    margin: 0;
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: clamp(28px, min(4.15vw, 7vh), 62px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.05em;
    color: var(--scratch-ink);
}

.owleys-scratch-title--intro {
    font-size: clamp(32px, min(4.9vw, 9vh), 78px);
    line-height: 0.92;
    letter-spacing: -0.07em;
}

.owleys-scratch-text {
    max-width: 560px;
    font-size: clamp(14px, min(1.9vw, 3vh), 22px);
    line-height: 1.52;
    color: var(--scratch-ink-soft);
}

.owleys-scratch-text--intro {
    max-width: 560px;
    font-size: clamp(16px, min(2.1vw, 3.5vh), 30px);
    line-height: 1.12;
    color: #272233;
}

.owleys-scratch-text strong {
    font-weight: 800;
    color: var(--scratch-ink);
}

.owleys-scratch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(26px, 4vh, 34px);
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(110, 53, 242, 0.09);
    color: #7532f2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#owleys-scratch-overlay .owleys-scratch-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: clamp(44px, 7vh, 60px) !important;
    padding: 0 32px !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffd977 0%, #ffb64d 100%) !important;
    box-shadow:
        0 18px 34px rgba(219, 145, 48, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
    color: #1d150a !important;
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.owleys-scratch-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 38px rgba(219, 145, 48, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.56);
    filter: brightness(1.02);
}

.owleys-scratch-button:focus-visible {
    outline: 2px solid var(--scratch-focus);
    outline-offset: 4px;
}

.owleys-scratch-button[disabled] {
    opacity: 0.72;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.owleys-scratch-button--wide {
    width: 100%;
}

.owleys-scratch-button--hero {
    min-width: min(100%, 400px) !important;
    min-height: clamp(48px, 8vh, 74px) !important;
    padding: 0 40px !important;
    border-radius: clamp(16px, 3vh, 24px) !important;
    font-size: clamp(20px, min(3vw, 5vh), 34px) !important;
}

.owleys-scratch-button--copy {
    min-width: 172px;
}

.owleys-scratch-form-status,
.owleys-scratch-copy-status {
    min-height: 22px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
}

.owleys-scratch-form-status.is-error,
.owleys-scratch-copy-status.is-error {
    color: #ca394d;
}

.owleys-scratch-form-status.is-success,
.owleys-scratch-copy-status.is-success {
    color: #2b915b;
}

.owleys-scratch-intro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "content art"
        "actions actions";
    gap: clamp(8px, 2vh, 20px) clamp(16px, 2vw, 24px);
    align-items: center;
    width: 100%;
    height: 100%;
}

.owleys-scratch-intro__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vh, 22px);
    align-items: flex-start;
    min-height: 0;
}

.owleys-scratch-intro__heading {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 12px);
    align-items: flex-start;
}

.owleys-scratch-intro__coin {
    width: clamp(40px, 8vh, 80px) !important;
    max-width: clamp(40px, 8vh, 80px) !important;
    height: auto;
    filter: drop-shadow(0 12px 16px rgba(71, 38, 12, 0.14));
}

.owleys-scratch-intro__copy {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.8vh, 8px);
    align-items: flex-start;
}

.owleys-scratch-intro-benefits {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 14px);
    max-width: 420px;
    width: 100%;
}

.owleys-scratch-intro-benefits__or {
    padding-left: 0;
    color: #3d334f;
    font-family: "Cabin", "Segoe UI", sans-serif;
    font-size: clamp(16px, min(1.8vw, 3vh), 28px);
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.owleys-scratch-intro-benefit {
    display: grid;
    grid-template-columns: clamp(36px, 5vh, 50px) minmax(0, 1fr);
    gap: clamp(8px, 1.2vw, 14px);
    align-items: center;
    padding: clamp(6px, 1.2vh, 14px) clamp(14px, 1.5vw, 20px);
    border: 1px solid rgba(62, 42, 95, 0.1);
    border-radius: clamp(14px, 2.5vh, 22px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: none;
}

.owleys-scratch-intro-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 4.5vh, 40px);
    height: clamp(28px, 4.5vh, 40px);
    border-radius: 999px;
    background: rgba(110, 53, 242, 0.1);
    color: #6c27f0;
    font-size: clamp(20px, 3.5vh, 30px);
    font-weight: 700;
    line-height: 1;
}

.owleys-scratch-intro-benefit__text {
    color: var(--scratch-ink);
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: clamp(16px, min(1.8vw, 3vh), 28px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.owleys-scratch-intro__art {
    grid-area: art;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
}

.owleys-scratch-intro__coin-float {
    display: none;
}

.owleys-scratch-intro__actions {
    grid-area: actions;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: clamp(2px, 1vh, 10px);
}

.owleys-scratch-ticket-deck {
    position: relative;
    isolation: isolate;
}

.owleys-scratch-ticket-deck::before,
.owleys-scratch-ticket-deck::after {
    display: none;
}

.owleys-scratch-ticket-deck--intro {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: 540px;
    height: auto;
    padding: 4px 0;
    margin: 0 auto;
}

.owleys-scratch-ticket-deck--picker {
    width: min(100%, 736px);
    height: clamp(220px, 52vh, 424px);
    margin-top: clamp(4px, 1.5vh, 12px);
}

.owleys-scratch-ticket-card {
    --ticket-width: 236px;
    --ticket-x: 0px;
    --ticket-y: 0px;
    --ticket-rotate: 0deg;
    --ticket-scale: 1;
    --ticket-z: 1;
    --ticket-lift: 0px;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ticket-width);
    z-index: var(--ticket-z);
    transform-origin: center bottom;
    transform: translate3d(var(--ticket-x), calc(var(--ticket-y) - var(--ticket-lift)), 0) rotate(var(--ticket-rotate)) scale(var(--ticket-scale));
    transition: transform 0.28s ease, filter 0.28s ease;
}

.owleys-scratch-ticket-card__frame {
    position: relative;
    display: block;
}

.owleys-scratch-ticket-card__image {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(41, 22, 73, 0.14));
}

.owleys-scratch-ticket-card--choice {
    line-height: 0;
    cursor: pointer;
}

.owleys-scratch-ticket-card--choice:hover,
.owleys-scratch-ticket-card--choice:focus-visible {
    --ticket-lift: 14px;
    z-index: 6;
}

.owleys-scratch-ticket-card--choice.is-selected {
    --ticket-lift: 14px;
    z-index: 7;
    filter: saturate(1.05) brightness(1.03);
}

.owleys-scratch-ticket-card--choice:focus-visible {
    outline: 2px solid var(--scratch-focus);
    outline-offset: 8px;
}

.owleys-scratch-ticket-deck--intro .owleys-scratch-ticket-card {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 1;
    transform-origin: center bottom;
    --ticket-x: 0px;
    --ticket-y: 0px;
    --ticket-lift: 0px;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-1"] {
    --ticket-width: clamp(110px, min(13vw, 25vh), 182px);
    --ticket-rotate: -7deg;
    --ticket-scale: 1;
    --ticket-z: 2;
    margin-right: -14px;
    align-self: flex-end;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-2"] {
    --ticket-width: clamp(130px, min(15vw, 29vh), 210px);
    --ticket-rotate: 0deg;
    --ticket-scale: 1;
    --ticket-z: 4;
    align-self: flex-start;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-3"] {
    --ticket-width: clamp(110px, min(13vw, 25vh), 182px);
    --ticket-rotate: 7deg;
    --ticket-scale: 1;
    --ticket-z: 2;
    margin-left: -14px;
    align-self: flex-end;
}

.owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-1"] {
    --ticket-width: 274px;
    --ticket-x: 86px;
    --ticket-y: 124px;
    --ticket-rotate: -12deg;
    --ticket-scale: 1;
    --ticket-z: 2;
}

.owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-2"] {
    --ticket-width: 312px;
    --ticket-x: 212px;
    --ticket-y: 24px;
    --ticket-rotate: 0deg;
    --ticket-scale: 1.08;
    --ticket-z: 4;
}

.owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-3"] {
    --ticket-width: 274px;
    --ticket-x: 386px;
    --ticket-y: 124px;
    --ticket-rotate: 12deg;
    --ticket-scale: 1;
    --ticket-z: 2;
}

.owleys-scratch-ticket-card[data-ticket-context="form"] {
    --ticket-width: 286px;
    --ticket-x: 0px;
    --ticket-y: 0px;
    --ticket-rotate: 10deg;
    --ticket-scale: 1;
    --ticket-z: 1;
    position: relative;
    width: var(--ticket-width);
    transform: rotate(var(--ticket-rotate)) scale(var(--ticket-scale));
}

.owleys-scratch-ticket-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: #fff;
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-weight: 800;
}

.owleys-scratch-ticket-art__label {
    position: absolute;
    left: 50%;
    display: block;
    text-align: center;
    text-transform: uppercase;
    line-height: 0.96;
    transform: translateX(-50%);
    text-shadow: 0 2px 8px rgba(74, 24, 9, 0.2);
    white-space: nowrap;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--top,
.owleys-scratch-ticket-card[data-ticket-context="picker"] .owleys-scratch-ticket-art__label--top,
.owleys-scratch-ticket-card[data-ticket-context="form"] .owleys-scratch-ticket-art__label--top {
    top: 18.2%;
    width: 66%;
    font-size: clamp(13px, 1.15vw, 18px);
    letter-spacing: 0.02em;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--bottom,
.owleys-scratch-ticket-card[data-ticket-context="picker"] .owleys-scratch-ticket-art__label--bottom,
.owleys-scratch-ticket-card[data-ticket-context="form"] .owleys-scratch-ticket-art__label--bottom {
    bottom: 15%;
    width: 38%;
    font-size: clamp(20px, 1.8vw, 30px);
    letter-spacing: 0.01em;
}

.owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--top {
    width: 72%;
    font-size: clamp(11px, 0.95vw, 15px);
}

.owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--bottom {
    width: 44%;
    font-size: clamp(16px, 1.45vw, 24px);
}

.owleys-scratch-ticket-art__label--bottom::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -16%;
    width: 58%;
    height: 1.5px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(255, 222, 129, 0) 0%, rgba(255, 222, 129, 0.95) 22%, rgba(255, 222, 129, 0.95) 78%, rgba(255, 222, 129, 0) 100%);
}

.owleys-scratch-form-scene {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: clamp(16px, 3vw, 34px);
    align-items: center;
    width: 100%;
}

.owleys-scratch-form-scene__content {
    display: grid;
    gap: clamp(10px, 2vh, 18px);
}

.owleys-scratch-form-scene__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.owleys-scratch-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.owleys-scratch-chip--label {
    background: rgba(110, 53, 242, 0.1);
    color: #6f33f0;
}

.owleys-scratch-chip--value {
    background: rgba(26, 21, 37, 0.06);
    color: #31273f;
}

.owleys-scratch-chip--reward {
    background: rgba(255, 196, 87, 0.2);
    color: #9e6306;
}

.owleys-scratch-form {
    display: grid;
    gap: clamp(8px, 1.8vh, 14px);
    margin-top: clamp(2px, 0.5vh, 4px);
}

.owleys-scratch-field {
    display: grid;
    gap: clamp(4px, 1vh, 8px);
}

.owleys-scratch-field__label {
    color: #2f2640;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.owleys-scratch-field input {
    width: 100%;
    min-height: clamp(42px, 7vh, 58px);
    padding: 0 18px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(57, 39, 88, 0.12);
    border-radius: 16px;
    background: rgba(250, 247, 255, 0.98);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: var(--scratch-ink);
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.owleys-scratch-field input:focus {
    outline: none;
    border-color: rgba(126, 58, 242, 0.38);
    box-shadow:
        0 0 0 4px rgba(126, 58, 242, 0.1),
        0 12px 24px rgba(74, 41, 122, 0.08);
    background: #fff;
    transform: translateY(-1px);
}

.owleys-scratch-consent {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-top: 2px;
    color: var(--scratch-ink-soft);
    font-size: 14px;
    line-height: 1.55;
}

.owleys-scratch-consent input {
    margin-top: 3px;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: #7e3af2;
}

.owleys-scratch-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.owleys-scratch-form-scene__art {
    display: flex;
    align-items: center;
    justify-content: center;
}

.owleys-scratch-form-preview {
    position: relative;
    display: grid;
    justify-items: center;
}

.owleys-scratch-form-preview__halo {
    position: absolute;
    inset: 46px 28px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(184, 116, 255, 0.28), transparent 58%),
        radial-gradient(circle at 50% 100%, rgba(255, 214, 110, 0.2), transparent 52%);
    filter: blur(24px);
}

.owleys-scratch-scratch-scene {
    position: relative;
    display: grid;
    gap: clamp(8px, 2vh, 20px);
    width: 100%;
    justify-items: center;
    padding-top: clamp(6px, 2vh, 18px);
}

.owleys-scratch-card-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 528px);
    display: grid;
    justify-items: center;
}

.owleys-scratch-card {
    position: relative;
    width: 100%;
}

.owleys-scratch-card__image {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 26px 38px rgba(44, 18, 72, 0.28));
}

.owleys-scratch-card .owleys-scratch-ticket-art__label--top {
    top: 18.1%;
    width: 58%;
    font-size: clamp(18px, 1.7vw, 27px);
}

.owleys-scratch-card .owleys-scratch-ticket-art__label--bottom {
    bottom: 14.7%;
    width: 36%;
    font-size: clamp(30px, 2.45vw, 42px);
}

.owleys-scratch-card__aura {
    position: absolute;
    inset: 12% 12% 6%;
    z-index: -1;
    border-radius: 36px;
    background:
        radial-gradient(circle at 50% 42%, rgba(191, 111, 255, 0.38), transparent 54%),
        radial-gradient(circle at 50% 100%, rgba(255, 214, 110, 0.22), transparent 48%);
    filter: blur(26px);
    opacity: 0.82;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.owleys-scratch-card__foil-zone {
    position: absolute;
    top: 27.8%;
    left: 18.4%;
    width: 63.4%;
    height: 29.2%;
    overflow: hidden;
    z-index: 2;
    border-radius: 9%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 18px rgba(41, 22, 75, 0.16);
}

.owleys-scratch-card__prize {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 18px 16px;
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.16) 32%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(180deg, rgba(133, 98, 216, 0.72) 0%, rgba(86, 57, 159, 0.86) 55%, rgba(40, 24, 88, 0.9) 100%);
    color: #fff;
    text-align: center;
}

.owleys-scratch-card__prize-label {
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: clamp(18px, 1.7vw, 28px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.02em;
    color: #ffdf86;
    text-shadow: 0 2px 16px rgba(255, 221, 129, 0.18);
}

.owleys-scratch-card__prize-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 164px;
    min-height: 60px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 8px 20px rgba(16, 9, 34, 0.16);
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: clamp(24px, 2.15vw, 34px);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.owleys-scratch-card__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.owleys-scratch-card__hint {
    position: absolute;
    left: 50%;
    bottom: 7.6%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 17px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: rgba(29, 14, 50, 0.2);
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}

.owleys-scratch-outcome {
    position: relative;
    z-index: 2;
    display: grid;
    gap: clamp(8px, 2vh, 16px);
    width: min(100%, 620px);
    justify-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.owleys-scratch-outcome__copy {
    display: grid;
    gap: clamp(6px, 1.2vh, 10px);
}

.owleys-scratch-outcome__eyebrow {
    color: #7a3af1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.owleys-scratch-outcome__title {
    color: #15111c;
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.owleys-scratch-outcome__text {
    max-width: 520px;
    color: var(--scratch-ink-soft);
    font-size: 16px;
    line-height: 1.6;
}

.owleys-scratch-outcome__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 30px rgba(43, 24, 76, 0.08);
}

.owleys-scratch-outcome__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    min-width: 176px;
    padding: 0 22px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(112, 77, 179, 0.14);
    color: #25193b;
    font-family: "Gilroy", "Trebuchet MS", sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.owleys-scratch-celebration {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.owleys-scratch-celebration__burst,
.owleys-scratch-celebration__spark {
    position: absolute;
    opacity: 0;
}

.owleys-scratch-celebration__burst {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 241, 184, 0.9) 0 4%, rgba(255, 229, 138, 0.22) 4%, rgba(255, 229, 138, 0) 74%),
        conic-gradient(from 0deg, rgba(255, 223, 126, 0) 0deg, rgba(255, 223, 126, 0.7) 18deg, rgba(255, 223, 126, 0) 36deg, rgba(255, 223, 126, 0) 72deg, rgba(255, 223, 126, 0.74) 92deg, rgba(255, 223, 126, 0) 110deg, rgba(255, 223, 126, 0) 144deg, rgba(255, 223, 126, 0.76) 164deg, rgba(255, 223, 126, 0) 182deg, rgba(255, 223, 126, 0) 214deg, rgba(255, 223, 126, 0.66) 234deg, rgba(255, 223, 126, 0) 252deg, rgba(255, 223, 126, 0) 288deg, rgba(255, 223, 126, 0.68) 304deg, rgba(255, 223, 126, 0) 324deg, rgba(255, 223, 126, 0) 360deg);
}

.owleys-scratch-celebration__burst--1 {
    top: 26px;
    left: 90px;
}

.owleys-scratch-celebration__burst--2 {
    top: 84px;
    right: 88px;
}

.owleys-scratch-celebration__burst--3 {
    bottom: 132px;
    left: 150px;
}

.owleys-scratch-celebration__spark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(255, 243, 192, 1) 0 34%, rgba(255, 221, 122, 0.94) 35% 58%, rgba(255, 221, 122, 0) 59%);
    box-shadow:
        0 0 0 3px rgba(255, 224, 133, 0.12),
        0 0 18px rgba(255, 214, 109, 0.3);
}

.owleys-scratch-celebration__spark--1 {
    top: 42px;
    left: 34%;
}

.owleys-scratch-celebration__spark--2 {
    top: 78px;
    right: 26%;
}

.owleys-scratch-celebration__spark--3 {
    top: 184px;
    left: 18%;
}

.owleys-scratch-celebration__spark--4 {
    top: 198px;
    right: 16%;
}

.owleys-scratch-celebration__spark--5 {
    bottom: 168px;
    right: 28%;
}

.owleys-scratch-scratch-scene[data-scratch-state="scratching"] .owleys-scratch-card__aura {
    opacity: 0.96;
    transform: scale(1.02);
}

.owleys-scratch-scratch-scene[data-scratch-state="revealed"] .owleys-scratch-card__aura {
    opacity: 1;
    transform: scale(1.06);
}

.owleys-scratch-scratch-scene[data-scratch-state="revealed"] .owleys-scratch-card__hint {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
}

.owleys-scratch-scratch-scene[data-scratch-state="revealed"] .owleys-scratch-outcome {
    opacity: 1;
    transform: translateY(0);
}

.owleys-scratch-scratch-scene[data-scratch-state="revealed"] .owleys-scratch-celebration__burst {
    animation: owleysScratchBurst 1.35s ease both;
}

.owleys-scratch-scratch-scene[data-scratch-state="revealed"] .owleys-scratch-celebration__spark {
    animation: owleysScratchSpark 1.5s ease both;
}

.owleys-scratch-card.is-revealed .owleys-scratch-card__canvas {
    opacity: 0;
    transition: opacity 0.26s ease;
}

.owleys-scratch-stage.is-active .owleys-scratch-ticket-card__frame {
    animation: owleysScratchTicketIn 0.56s cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.owleys-scratch-stage.is-active .owleys-scratch-ticket-card[data-ticket="ticket-2"] .owleys-scratch-ticket-card__frame {
    animation-delay: 0.05s;
}

.owleys-scratch-stage.is-active .owleys-scratch-ticket-card[data-ticket="ticket-3"] .owleys-scratch-ticket-card__frame {
    animation-delay: 0.1s;
}

@keyframes owleysScratchStageIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes owleysScratchBackdropGlow {
    0%, 100% {
        opacity: 0.76;
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        opacity: 0.92;
        transform: translate3d(0, -1.2%, 0) scale(1.04);
    }
}

@keyframes owleysScratchVeilShift {
    0% {
        opacity: 0.34;
        transform: translate3d(-1.5%, -1%, 0) scale(1);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.42;
        transform: translate3d(1.5%, 1%, 0) scale(1.05);
    }
}

@keyframes owleysScratchParticleDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(0.92);
    }
    35% {
        transform: translate3d(calc(var(--drift-x) * 0.72), calc(var(--drift-y) * -0.54), 0) scale(1.12);
    }
    65% {
        transform: translate3d(calc(var(--drift-x) * -0.58), calc(var(--drift-y) * 0.78), 0) scale(1);
    }
    100% {
        transform: translate3d(calc(var(--drift-x) * 1.4), calc(var(--drift-y) * -1.22), 0) scale(1.18);
    }
}

@keyframes owleysScratchParticleTwinkle {
    0%, 100% {
        opacity: calc(var(--alpha) * 0.56);
        filter: brightness(0.94);
    }
    38% {
        opacity: calc(var(--alpha) * 1.08);
        filter: brightness(1.18);
    }
    74% {
        opacity: calc(var(--alpha) * 0.74);
        filter: brightness(1.02);
    }
}

@keyframes owleysScratchTicketIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes owleysScratchBurst {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }
    22% {
        opacity: 0.88;
    }
    100% {
        opacity: 0;
        transform: scale(1.14);
    }
}

@keyframes owleysScratchSpark {
    0% {
        opacity: 0;
        transform: scale(0.4) translateY(0);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.24) translateY(-20px);
    }
}

@keyframes owleysScratchFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 1100px) {
    .owleys-scratch-ticket-deck--intro {
        max-width: 480px;
    }

    .owleys-scratch-ticket-deck--picker {
        width: min(100%, 672px);
        height: 396px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-1"] {
        --ticket-width: 248px;
        --ticket-x: 56px;
        --ticket-y: 116px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-2"] {
        --ticket-width: 294px;
        --ticket-x: 188px;
        --ticket-y: 22px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-3"] {
        --ticket-width: 248px;
        --ticket-x: 368px;
        --ticket-y: 116px;
    }

    .owleys-scratch-form-scene {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
        gap: 28px;
    }

    .owleys-scratch-card-shell {
        width: min(100%, 478px);
    }
}

@media (max-width: 920px) {
    .owleys-scratch-intro {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "content"
            "art"
            "actions";
        gap: clamp(8px, 2vh, 18px);
        justify-items: center;
        text-align: center;
        height: auto;
    }

    .owleys-scratch-intro__content {
        align-items: center;
    }

    .owleys-scratch-intro__heading {
        align-items: center;
    }

    .owleys-scratch-intro__copy {
        align-items: center;
    }

    .owleys-scratch-intro__art {
        min-height: auto;
    }

    .owleys-scratch-ticket-deck--intro {
        max-width: 480px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-1"] {
        --ticket-width: 160px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-2"] {
        --ticket-width: 186px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-3"] {
        --ticket-width: 160px;
    }

    .owleys-scratch-ticket-deck--picker {
        width: min(100%, 560px);
        height: 340px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-1"] {
        --ticket-width: 216px;
        --ticket-x: 28px;
        --ticket-y: 106px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-2"] {
        --ticket-width: 252px;
        --ticket-x: 152px;
        --ticket-y: 24px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-3"] {
        --ticket-width: 216px;
        --ticket-x: 316px;
        --ticket-y: 106px;
    }

    .owleys-scratch-form-scene {
        grid-template-columns: 1fr;
    }

    .owleys-scratch-form-scene__art {
        order: -1;
    }

    .owleys-scratch-card-shell {
        width: min(100%, 438px);
    }
}

@media (max-width: 760px) {
    .owleys-scratch-title {
        font-size: clamp(34px, 8vw, 48px);
    }

    .owleys-scratch-title--intro {
        font-size: clamp(46px, 11vw, 62px);
    }

    .owleys-scratch-text {
        font-size: 17px;
    }

    .owleys-scratch-text--intro {
        font-size: clamp(20px, 5vw, 28px);
    }

    .owleys-scratch-intro__coin {
        width: 64px !important;
        max-width: 64px !important;
    }

    .owleys-scratch-intro-benefit {
        min-height: 66px;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 0 18px;
        border-radius: 20px;
    }

    .owleys-scratch-intro-benefit__icon {
        width: 38px;
        height: 38px;
        font-size: 28px;
    }

    .owleys-scratch-intro-benefit__text {
        font-size: clamp(20px, 5vw, 24px);
    }

    .owleys-scratch-button--hero {
        width: 100%;
        min-width: 0 !important;
        min-height: 68px !important;
        font-size: clamp(22px, 5.8vw, 28px) !important;
    }

    .owleys-scratch-intro__coin-float {
        display: none;
    }

    .owleys-scratch-ticket-deck--intro {
        max-width: 420px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-1"] {
        --ticket-width: 140px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-2"] {
        --ticket-width: 162px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-3"] {
        --ticket-width: 140px;
    }

    .owleys-scratch-ticket-deck--picker {
        width: min(100%, 318px);
        height: 276px;
        margin-top: 6px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-1"] {
        --ticket-width: 150px;
        --ticket-x: 8px;
        --ticket-y: 86px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-2"] {
        --ticket-width: 176px;
        --ticket-x: 72px;
        --ticket-y: 8px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="picker"][data-ticket="ticket-3"] {
        --ticket-width: 150px;
        --ticket-x: 162px;
        --ticket-y: 86px;
    }

    .owleys-scratch-ticket-card--choice:hover,
    .owleys-scratch-ticket-card--choice:focus-visible,
    .owleys-scratch-ticket-card--choice.is-selected {
        --ticket-lift: 10px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--top,
    .owleys-scratch-ticket-card[data-ticket-context="picker"] .owleys-scratch-ticket-art__label--top,
    .owleys-scratch-ticket-card[data-ticket-context="form"] .owleys-scratch-ticket-art__label--top {
        font-size: clamp(10px, 2.9vw, 13px);
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"] .owleys-scratch-ticket-art__label--bottom,
    .owleys-scratch-ticket-card[data-ticket-context="picker"] .owleys-scratch-ticket-art__label--bottom,
    .owleys-scratch-ticket-card[data-ticket-context="form"] .owleys-scratch-ticket-art__label--bottom {
        font-size: clamp(14px, 4vw, 18px);
    }

    .owleys-scratch-form-scene__art {
        display: none;
    }

    .owleys-scratch-card-shell {
        width: min(100%, 376px);
    }

    .owleys-scratch-card .owleys-scratch-ticket-art__label--top {
        font-size: clamp(14px, 4.2vw, 18px);
    }

    .owleys-scratch-card .owleys-scratch-ticket-art__label--bottom {
        font-size: clamp(22px, 6vw, 28px);
    }

    .owleys-scratch-card__prize-label {
        font-size: clamp(15px, 4vw, 20px);
    }

    .owleys-scratch-card__prize-code {
        min-width: 128px;
        min-height: 48px;
        font-size: clamp(18px, 5vw, 24px);
    }

    .owleys-scratch-outcome__actions {
        width: 100%;
        display: grid;
    }

    .owleys-scratch-outcome__code,
    .owleys-scratch-button--copy {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .owleys-scratch-overlay {
        padding: 12px;
    }

    .owleys-scratch-modal {
        border-radius: 28px;
    }

    .owleys-scratch-close {
        top: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 30px;
    }

    .owleys-scratch-stage {
        padding: 12px;
    }

    .owleys-scratch-panel {
        padding: 60px 18px 22px;
        border-radius: 24px;
    }

    .owleys-scratch-intro__heading {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
    }

    .owleys-scratch-intro__copy {
        text-align: left;
    }

    .owleys-scratch-intro__coin {
        width: 56px !important;
        max-width: 56px !important;
    }

    .owleys-scratch-ticket-deck--intro {
        max-width: 360px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-1"] {
        --ticket-width: 120px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-2"] {
        --ticket-width: 140px;
    }

    .owleys-scratch-ticket-card[data-ticket-context="intro"][data-ticket="ticket-3"] {
        --ticket-width: 120px;
    }

    .owleys-scratch-intro-benefits__or {
        font-size: 28px;
    }

    .owleys-scratch-outcome__title {
        font-size: clamp(24px, 7vw, 32px);
    }

    .owleys-scratch-outcome__text {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .owleys-scratch-overlay *,
    .owleys-scratch-overlay *::before,
    .owleys-scratch-overlay *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .owleys-scratch-celebration {
        display: none;
    }
}