.home-scratch-top {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px 0;
    box-sizing: border-box;
    font-family: 'PixelOperatorMono', 'PixeloidSans', monospace;
    text-transform: uppercase;
}

.home-scratch-top-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.home-scratch-logo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px 0 0 6px;
    line-height: 0.9;
    text-align: left;
}

.home-scratch-star {
    position: absolute;
    aspect-ratio: 1;
    background: linear-gradient(150deg, #fff2a3 0%, #ffd428 55%, #f2a316 100%);
    clip-path: polygon(50% 0, 63% 33%, 98% 37%, 72% 60%, 80% 95%, 50% 74%, 20% 95%, 28% 60%, 2% 37%, 37% 33%);
    filter: drop-shadow(2px 2px 0 rgba(28, 12, 63, 0.85));
    pointer-events: none;
}

.home-scratch-logo-star {
    left: -4px;
    bottom: -10px;
    width: 30px;
    transform: rotate(-14deg);
}

.home-scratch-wallet-star {
    right: -10px;
    top: -12px;
    width: 24px;
    transform: rotate(14deg);
}

.home-scratch-logo-buy {
    padding: 2px 14px 2px 6px;
    background: linear-gradient(115deg, #ff44c8 0%, #b13df0 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    box-shadow: 2px 2px 0 #1c0c3f;
    color: #fff;
    font-size: clamp(10px, 2.1cqw, 13px);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #6c1360;
    transform: rotate(-3deg);
}

.home-scratch-logo-main {
    background: linear-gradient(100deg, #59ecf6 0%, #a86ef7 48%, #ff5ec8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(20px, 6.2cqw, 34px);
    font-weight: bold;
    letter-spacing: 0.5px;
    filter: drop-shadow(2px 2px 0 #1c0c3f) drop-shadow(-1px -1px 0 rgba(33, 236, 233, 0.5));
    transform: rotate(-2deg);
    animation: home-qrcode-ad-chromatic 1.65s steps(2, end) infinite;
}

.home-scratch-logo-ticket {
    margin-top: -2px;
    background: linear-gradient(100deg, #ffe86e 0%, #ff9b53 55%, #ff5ec8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(17px, 4.6cqw, 27px);
    font-weight: bold;
    font-style: italic;
    text-transform: none;
    filter: drop-shadow(2px 2px 0 #1c0c3f);
    transform: rotate(-2deg) translateX(14px);
}

.home-scratch-wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: relative;
    min-width: 34%;
    padding: 5px 9px 7px;
    box-sizing: border-box;
    border: 2px solid #14102e;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, #38207e 0%, #251263 60%, #1b0d4e 100%);
    box-shadow:
        inset 0 0 0 2px #24ddd4,
        inset 0 0 14px rgba(120, 84, 240, 0.55),
        3px 3px 0 rgba(23, 17, 47, 0.85);
}

.home-scratch-wallet-label {
    color: #ffe0fa;
    font-size: clamp(12px, 2.3cqw, 14px);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #261044, 2px 2px 0 rgba(11, 4, 39, 0.72);
}

.home-scratch-wallet-amount {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    line-height: 1;
    text-shadow: 2px 2px 0 #2a1160;
}

.home-scratch-wallet-value {
    font-size: clamp(22px, 4.6cqw, 30px);
    font-weight: bold;
}

.home-scratch-wallet-unit {
    color: #f1edff;
    font-size: clamp(11px, 2cqw, 13px);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #261044;
    align-self: flex-end;
}

.home-scratch-coin {
    width: clamp(15px, 3.2cqw, 22px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    height: auto;
    image-rendering: pixelated;
}

.home-scratch-wallet-button,
.home-scratch-ticket-buy {
    box-sizing: border-box;
    border: 2px solid #14102e;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}

.home-scratch-wallet-button {
    min-height: 25px;
    padding: 3px 10px 4px;
    background: linear-gradient(180deg, #a8f2ff 0%, #4fd0ea 55%, #2b9fd0 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), 2px 2px 0 rgba(23, 17, 47, 0.85);
    color: #123a66;
    font-size: clamp(12px, 2.1cqw, 14px);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(221, 255, 255, 0.74);
}

.home-scratch-music {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px;
    width: 100%;
    margin-top: 2px;
    padding: 3px 4px 2px;
    box-sizing: border-box;
    border: 2px solid #14102e;
    background: rgba(12, 6, 40, 0.72);
    box-shadow: inset 0 0 0 1px #24ddd4;
    color: #b8fff4;
    font-size: clamp(9px, 1.8cqw, 11px);
    letter-spacing: 0.5px;
    cursor: pointer;
}

.home-scratch-music-label {
    white-space: nowrap;
    text-shadow: 1px 1px 0 #1c0c3f;
}

.home-scratch-music-pct {
    min-width: 2.6em;
    text-align: right;
    color: #ffe0fa;
    text-shadow: 1px 1px 0 #1c0c3f;
}

.home-scratch-music-slider {
    width: 100%;
    min-width: 0;
    height: 12px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #14102e;
    background: linear-gradient(180deg, #1a0d48 0%, #2d1870 100%);
    box-shadow: inset 1px 1px 0 #0a0620, inset -1px -1px 0 #5cf0ea;
    cursor: pointer;
}

.home-scratch-music-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 16px;
    border: 2px solid #14102e;
    background: linear-gradient(180deg, #a8f2ff 0%, #24ddd4 55%, #1a9aaa 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.home-scratch-music-slider::-moz-range-thumb {
    width: 12px;
    height: 16px;
    border: 2px solid #14102e;
    border-radius: 0;
    background: linear-gradient(180deg, #a8f2ff 0%, #24ddd4 55%, #1a9aaa 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.home-scratch-music-slider::-moz-range-track {
    height: 8px;
    border: 0;
    background: transparent;
}

.home-scratch-wallet-button:hover,
.home-scratch-ticket-buy:hover {
    filter: brightness(1.1);
}

.home-scratch-wallet-button:active,
.home-scratch-ticket-buy:active {
    transform: translate(1px, 1px);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.home-scratch-marquee {
    overflow: hidden;
    padding: 2px 4px;
    box-sizing: border-box;
    border: 2px solid #14102e;
    background:
        radial-gradient(circle at 50% 50%, rgba(80, 255, 190, 0.06) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
        #0a0620;
    box-shadow: inset 0 0 0 1px #3c2b7a, inset 0 0 10px rgba(57, 255, 136, 0.14), 2px 2px 0 rgba(23, 17, 47, 0.7);
}

.home-scratch-marquee-track {
    display: flex;
    width: max-content;
    animation: homeScratchMarquee 11s linear infinite;
}

.home-scratch-marquee-track span {
    white-space: nowrap;
    color: #52ffa1;
    font-size: clamp(9px, 2cqw, 13px);
    letter-spacing: 2px;
    line-height: 1.5;
    text-shadow: 0 0 5px rgba(82, 255, 161, 0.65);
}

.home-scratch-tickets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.home-scratch-ticket {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(2.2em, 2.2em) minmax(36px, 1fr) minmax(3em, 3em) auto auto;
    align-items: center;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 0 6px 7px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    filter: drop-shadow(3px 3px 0 rgba(20, 10, 45, 0.65));
    transition: transform 180ms cubic-bezier(0.22, 0.8, 0.24, 1.35), filter 180ms ease;
    /* ponytail: scalloped ticket edge via masked hole strips; browsers without
       mask-composite just show straight edges, which is fine */
    mask-image:
        radial-gradient(circle 4px at 0 9px, transparent 4px, #000 4.5px),
        radial-gradient(circle 4px at 100% 9px, transparent 4px, #000 4.5px);
    mask-size: 100% 18px;
    mask-repeat: repeat;
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.home-scratch-ticket::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 5px;
    opacity: 0;
    border: 1px solid #b7ffff;
    box-shadow: 0 0 0 1px rgba(255, 94, 229, 0.85), inset 0 0 10px rgba(93, 245, 255, 0.36);
    pointer-events: none;
}

@media (hover: hover) {
    .home-scratch-ticket:hover {
        transform: translateY(-3px) scale(1.025);
        filter: saturate(1.18) drop-shadow(5px 5px 0 rgba(48, 12, 92, 0.75));
    }

    .home-scratch-ticket:hover::after {
        opacity: 1;
        animation: homeScratchTicketSelect 780ms steps(2, end) infinite;
    }
}

.home-scratch-ticket:focus-within {
    transform: translateY(-3px) scale(1.025);
    filter: saturate(1.18) drop-shadow(5px 5px 0 rgba(48, 12, 92, 0.75));
}

.home-scratch-ticket:focus-within::after {
    opacity: 1;
    animation: homeScratchTicketSelect 780ms steps(2, end) infinite;
}

.home-scratch-ticket.is-basic {
    background:
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px),
        linear-gradient(170deg, #56b4f4 0%, #3a7ade 55%, #2a51bd 100%);
    box-shadow: inset 0 0 0 2px #17356d, inset 0 0 0 4px rgba(160, 220, 255, 0.4);
}

.home-scratch-ticket.is-lucky {
    background:
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px),
        linear-gradient(170deg, #b07df4 0%, #8b4fdd 55%, #6d33bd 100%);
    box-shadow: inset 0 0 0 2px #3d1670, inset 0 0 0 4px rgba(226, 195, 255, 0.4);
}

.home-scratch-ticket.is-mystery {
    background:
        repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 9px),
        linear-gradient(170deg, #f767c0 0%, #dd3b9c 55%, #b81f7e 100%);
    box-shadow: inset 0 0 0 2px #6d1048, inset 0 0 0 4px rgba(255, 197, 233, 0.4);
}

.home-scratch-ticket-tier {
    align-self: stretch;
    margin: 0 -6px 2px;
    padding: 3px 2px;
    background: rgba(16, 9, 43, 0.82);
    font-size: clamp(8px, 1.7cqw, 11px);
    letter-spacing: 1px;
}

.home-scratch-ticket.is-basic .home-scratch-ticket-tier {
    color: #7fe3ff;
}

.home-scratch-ticket.is-lucky .home-scratch-ticket-tier {
    color: #8dfa9a;
}

.home-scratch-ticket.is-mystery .home-scratch-ticket-tier {
    color: #ffd45e;
}

.home-scratch-ticket-name {
    align-self: center;
    margin: 0;
    color: #fff;
    font-size: clamp(16px, 3.2cqw, 20px);
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 0 rgba(20, 10, 50, 0.85);
}

.home-scratch-ticket-icon {
    align-self: center;
    justify-self: center;
    display: block;
    width: clamp(26px, 6cqw, 40px);
    aspect-ratio: 1;
    margin: 0;
    image-rendering: pixelated;
    object-fit: contain;
    filter: drop-shadow(3px 3px 0 rgba(57, 10, 101, 0.38));
}

.home-scratch-ticket-prize {
    display: grid;
    align-self: stretch;
    place-items: center;
    color: #fffaff;
    font-size: clamp(12px, 2.2cqw, 14px);
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 rgba(20, 10, 50, 0.7);
}

.home-scratch-ticket.is-basic .home-scratch-ticket-prize strong {
    color: #effaff;
}

.home-scratch-ticket.is-lucky .home-scratch-ticket-prize strong {
    color: #e5ffe9;
}

.home-scratch-ticket.is-mystery .home-scratch-ticket-prize strong {
    color: #fff0a2;
}

.home-scratch-ticket-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    align-self: stretch;
    margin: 0 -6px;
    padding: 3px 2px;
    background: rgba(16, 9, 43, 0.78);
    color: #fff;
    font-size: clamp(13px, 2.4cqw, 15px);
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 0 rgba(20, 10, 50, 0.8);
}

.home-scratch-ticket-buy {
    align-self: stretch;
    margin-top: 0;
    min-height: 27px;
    padding: 4px 2px 5px;
    background: linear-gradient(180deg, #9df06a 0%, #52c43a 55%, #2f9e2f 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(19, 84, 28, 0.7);
    color: #123a12;
    font-size: clamp(13px, 2.4cqw, 15px);
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 rgba(214, 255, 189, 0.7);
}

@keyframes homeScratchMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes homeScratchTicketSelect {
    0%, 100% {
        border-color: #b7ffff;
        box-shadow: 0 0 0 1px rgba(255, 94, 229, 0.85), inset 0 0 10px rgba(93, 245, 255, 0.36);
    }
    50% {
        border-color: #fff5a9;
        box-shadow: 0 0 0 2px rgba(90, 250, 255, 0.88), inset 0 0 14px rgba(255, 103, 225, 0.42);
    }
}