body.scratch2000-modal-open {
    overflow: hidden;
}

.scratch2000-modal[hidden] {
    display: none !important;
}

.scratch2000-modal {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: clamp(12px, 3vw, 30px);
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    opacity: 0;
    color: #fff8db;
    background:
        radial-gradient(circle at 20% 25%, rgba(255, 78, 213, 0.32), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(52, 238, 255, 0.28), transparent 31%),
        rgba(7, 3, 29, 0.9);
    transition: opacity 220ms ease;
}

.scratch2000-modal.is-open {
    opacity: 1;
}

.scratch2000-modal-pattern {
    position: fixed;
    z-index: 0;
    inset: -16%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.5px) 0 0 / 38px 38px,
        radial-gradient(circle, rgba(90, 249, 255, 0.62) 0 1px, transparent 2px) 17px 11px / 61px 61px,
        repeating-linear-gradient(135deg, rgba(255, 91, 224, 0.08) 0 2px, transparent 2px 14px),
        conic-gradient(from 45deg at 50% 50%, #15105b, #551568, #0e5475, #15105b);
    background-position: 0 0, 17px 11px, 0 0, 50% 50%;
    animation: scratch2000ModalPattern 24s linear infinite;
    pointer-events: none;
}

.scratch2000-modal-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(5, 4, 30, 0.24) 3px 4px);
    mix-blend-mode: multiply;
}

.scratch2000-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, 96vw);
    max-height: calc(100vh - 30px);
    max-height: calc(100dvh - 30px);
    min-height: 0;
    padding: clamp(14px, 3vw, 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 4px solid #120d38;
    outline: 3px solid #28ded8;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px),
        linear-gradient(155deg, rgba(62, 25, 126, 0.94), rgba(18, 18, 86, 0.96));
    box-shadow:
        0 0 0 7px #e54bc6,
        0 0 0 10px #1a1042,
        12px 14px 0 rgba(4, 2, 23, 0.72),
        inset 0 0 38px rgba(74, 234, 255, 0.14);
    font-family: 'PixelOperatorMono', 'PixeloidSans', monospace;
    transform: translateY(22px) scale(0.9);
    transition: transform 420ms cubic-bezier(0.2, 0.86, 0.32, 1.22);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #e54bc6 #17104e;
}

.scratch2000-modal.is-open .scratch2000-modal-dialog {
    transform: translateY(0) scale(1);
}

.scratch2000-modal-close {
    position: absolute;
    z-index: 6;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 28px;
    padding: 0 0 3px;
    border: 2px solid #100c32;
    background: linear-gradient(#56f2ef, #1eaaa9);
    box-shadow: inset 1px 1px 0 #d6ffff, 2px 2px 0 #ee4ac4;
    color: #17103d;
    font: 900 21px/1 'PixelOperatorMono', monospace;
    cursor: pointer;
}

.scratch2000-modal-title {
    margin: 0;
    padding-inline: 34px;
    color: #fff9ad;
    font-size: clamp(21px, 5vw, 34px);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #35115d, 5px 5px 0 #ef4bbf, -2px -2px 0 #2ce5df;
}

.scratch2000-modal-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 2px;
    padding: 3px 9px;
    border: 2px solid #141035;
    background: rgba(18, 10, 60, 0.72);
    box-shadow: 2px 2px 0 #31dcd7;
    color: #ffe1f8;
    font-size: 15px;
    text-transform: uppercase;
}

.scratch2000-modal-balance img {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
}

.scratch2000-modal-balance strong {
    color: #fff5a0;
    font-size: 22px;
}

.scratch2000-star-stage {
    position: relative;
    width: 100%;
    min-height: min(500px, calc(100vh - 170px));
    min-height: min(500px, calc(100dvh - 170px));
    display: grid;
    place-items: center;
    isolation: isolate;
    transition: min-height 240ms ease;
}

.scratch2000-modal.has-result .scratch2000-star-stage {
    min-height: min(430px, calc(100vh - 300px));
    min-height: min(430px, calc(100dvh - 300px));
}

.scratch2000-prize-star {
    position: absolute;
    z-index: 0;
    width: min(520px, 87vw);
    aspect-ratio: 1;
    opacity: 0.72;
    background:
        radial-gradient(circle at 36% 29%, rgba(255, 255, 255, 0.8) 0 2%, transparent 3%),
        linear-gradient(145deg, #fff175 0%, #ff6fc8 47%, #46e8ed 100%);
    clip-path: polygon(50% 0, 58% 27%, 78% 8%, 74% 34%, 100% 29%, 79% 50%, 100% 67%, 72% 66%, 78% 94%, 56% 73%, 44% 100%, 39% 72%, 14% 89%, 25% 62%, 0 57%, 26% 44%, 5% 23%, 33% 29%);
    filter: drop-shadow(8px 10px 0 rgba(25, 8, 64, 0.62));
    animation: scratch2000StarBreathe 5.4s ease-in-out infinite;
}

.scratch2000-ticket-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    place-items: center;
    transform-origin: center;
}

.scratch2000-modal.is-opening .scratch2000-ticket-stage {
    animation: scratch2000TicketEnter 620ms cubic-bezier(0.2, 0.86, 0.32, 1.22) both;
}

.scratch2000-modal.is-win .scratch2000-ticket-stage {
    animation: scratch2000TicketWin 720ms cubic-bezier(0.16, 0.9, 0.25, 1.28) both;
}

.scratch2000-modal.is-loss .scratch2000-ticket-stage {
    animation: scratch2000TicketLoss 520ms ease-out both;
}

.scratch2000-modal.is-win .scratch2000-prize-star {
    animation: scratch2000StarWin 720ms steps(6, end) both, scratch2000StarBreathe 5.4s ease-in-out 720ms infinite;
}

.scratch2000-result {
    width: min(480px, 92%);
    margin: 4px 0 2px;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    text-align: center;
    border: 3px solid #150d3d;
    background: linear-gradient(180deg, #31136d, #180d4f);
    box-shadow: 0 0 0 2px #e84fc5, 4px 4px 0 #31d9db;
    animation: scratch2000ResultEnter 380ms cubic-bezier(0.2, 0.86, 0.32, 1.22) both;
}

.scratch2000-result strong,
.scratch2000-result span {
    display: block;
}

.scratch2000-result strong {
    color: #fff47e;
    font-size: clamp(18px, 4vw, 26px);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #e049b8;
}

.scratch2000-result span {
    margin: 5px 0 9px;
    color: #effdff;
    font-size: 15px;
    line-height: 1.3;
    text-shadow: 1px 1px 0 #160d44;
}

.scratch2000-result button {
    min-width: 180px;
    min-height: 37px;
    padding: 8px 16px;
    border: 3px solid #16103a;
    background: linear-gradient(#aaff84, #42c95b);
    box-shadow: inset 2px 2px 0 #e8ffd6, 3px 3px 0 #f052c5;
    color: #142b20;
    font: 900 16px/1 'PixelOperatorMono', monospace;
    text-transform: uppercase;
    cursor: pointer;
}