.home-scratch-shop {
    --shop-stand-width: min(94%, 463px);
    --shop-stand-bottom: 0px;
    --shop-stand-layer: 2;
    --shop-banner-layer: 3;
    --shop-banner-left: 2.5%;
    --shop-banner-top: 4.5%;
    --shop-banner-width: 95%;
    --shop-banner-height: 26%;
    --shop-speech-layer: 3;
    --shop-ui-layer: 4;
    --counter-pattern-left: 5.8%;
    --counter-pattern-top: 32.8%;
    --counter-pattern-width: 88.4%;
    --counter-pattern-height: 40.2%;
    --character-width: 29%;
    --character-left: 37%;
    --character-bottom: 10%;
    --speech-bubble-width: 65%;
    --speech-bubble-left: 72%;
    --speech-bubble-bottom: 70%;
    --register-width: 23.8%;
    --register-left: 13%;
    --register-bottom: 27%;
    --sign-width: 17.9%;
    --sign-left: 4%;
    --sign-top: 32%;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: var(--shop-stand-bottom);
    width: var(--shop-stand-width);
    transform: translateX(-50%);
}

.home-scratch-shop-stand,
.home-scratch-cash-register,
.home-scratch-shop-sign,
.home-scratch-character-base,
.home-scratch-character-loss,
.home-scratch-speech-bubble {
    position: absolute;
    display: block;
    height: auto;
    image-rendering: pixelated;
}

.home-scratch-shop-stand {
    position: relative;
    z-index: var(--shop-stand-layer);
    width: 100%;
    pointer-events: none;
}

.home-scratch-shop-banner {
    position: absolute;
    z-index: var(--shop-banner-layer);
    left: var(--shop-banner-left);
    top: var(--shop-banner-top);
    width: var(--shop-banner-width);
    height: var(--shop-banner-height);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.48fr;
    align-items: center;
    box-sizing: border-box;
    padding: 8px 16px;
    isolation: isolate;
    overflow: visible;
    border: clamp(2px, 0.55cqw, 3px) solid #43ece8;
    border-right-color: #ff72c9;
    border-bottom-color: #ff80d4;
    border-radius: clamp(8px, 2cqw, 14px);
    background: linear-gradient(105deg, rgba(29, 18, 91, 0.66), rgba(67, 20, 110, 0.38) 55%, rgba(19, 68, 109, 0.52));
    box-shadow:
        0 0 0 clamp(1px, 0.24cqw, 2px) #170a42,
        0 0 clamp(4px, 1.2cqw, 8px) rgba(61, 242, 234, 0.72),
        inset 0 0 clamp(6px, 1.7cqw, 12px) rgba(64, 233, 244, 0.2);
    color: #fff8be;
    font-family: 'PixelOperatorMono', 'PixeloidSans', monospace;
    pointer-events: none;
}

.home-scratch-shop-banner::before,
.home-scratch-shop-banner::after {
    content: "";
    position: absolute;
    z-index: -1;
    height: clamp(3px, 0.8cqw, 5px);
    border-radius: 999px;
    pointer-events: none;
}

.home-scratch-shop-banner::before {
    top: calc(clamp(3px, 0.8cqw, 5px) * -1);
    left: 14%;
    width: 45%;
    background: linear-gradient(90deg, #9a63ff, #46f4ed 42%, #ff65c8);
    box-shadow: 0 0 5px #4ef6ec, 0 0 5px #ff64ca;
}

.home-scratch-shop-banner::after {
    right: 8%;
    bottom: calc(clamp(3px, 0.8cqw, 5px) * -1);
    width: 32%;
    background: linear-gradient(90deg, #ff73ca, #ffeb78 54%, #50f5e9);
    box-shadow: 0 0 5px #ff72ca, 0 0 5px #ffeb78;
}

.home-scratch-shop-banner-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.12em;
    min-width: 0;
    color: #68f5ec;
    font-size: clamp(19px, 12cqw, 84px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.88;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #1d0c50, 2px 2px 0 #1d0c50, -1px -1px 0 #d3fffe, 3px 3px 0 #e648bc;
    white-space: nowrap;
}

.home-scratch-shop-banner-title b {
    color: #fff1a3;
    font-size: 0.78em;
    text-shadow: 1px 1px 0 #31105d, 2px 2px 0 #e853be;
}

.home-scratch-shop-banner-title i {
    color: #ff83d3;
    font-style: normal;
    text-shadow: 1px 1px 0 #3c125f, 2px 2px 0 #3c125f, -1px -1px 0 #ffd4f0, 3px 3px 0 #3de8e3;
}

.home-scratch-shop-banner-subtitle {
    align-self: start;
    color: #ffef99;
    font-size: clamp(7px, 21.62cqw, 16px);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #31105d;
    white-space: nowrap;
}

.home-scratch-counter-pattern {
    position: absolute;
    z-index: 0;
    left: var(--counter-pattern-left);
    top: var(--counter-pattern-top);
    width: var(--counter-pattern-width);
    height: var(--counter-pattern-height);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 151, 242, 0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 61%, rgba(108, 244, 255, 0.44) 0 2px, transparent 3px),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 10px),
        linear-gradient(115deg, #5c2d9c 0%, #8d42bd 46%, #356fc5 100%);
    background-size: 54px 54px, 71px 71px, 18px 18px, 190% 190%;
    background-position: 0 0, 0 0, 0 0, 0% 50%;
    animation: homeScratchCounterPattern 18s linear infinite;
}

.home-scratch-counter-pattern::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(27, 17, 87, 0.2) 3px 4px);
}

.home-scratch-cash-register {
    z-index: var(--shop-ui-layer);
    left: var(--register-left);
    bottom: var(--register-bottom);
    width: var(--register-width);
    pointer-events: none;
}

.home-scratch-shop-sign {
    z-index: var(--shop-ui-layer);
    left: var(--sign-left);
    top: var(--sign-top);
    width: var(--sign-width);
    pointer-events: none;
}

.home-scratch-character {
    position: absolute;
    z-index: 1;
    left: var(--character-left);
    bottom: var(--character-bottom);
    width: var(--character-width);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: scale(1);
    transform-origin: 50% 100%;
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1.35), filter 220ms ease;
    filter: drop-shadow(3px 3px 0 rgba(57, 10, 101, 0.38));
}

@media (hover: hover) {
    .home-scratch-character:hover {
        transform: scale(1.12) rotate(-2deg);
        filter: drop-shadow(5px 5px 0 rgba(57, 10, 101, 0.48));
    }
}

.home-scratch-character:focus-visible {
    transform: scale(1.12) rotate(-2deg);
    filter: drop-shadow(5px 5px 0 rgba(57, 10, 101, 0.48));
}

.home-scratch-character-performer {
    position: relative;
    display: block;
    width: 100%;
    transform-box: border-box;
    transform-origin: center bottom;
    animation: homeScratchCharacterIdle 3.8s ease-in-out infinite;
}

.home-scratch-character-base,
.home-scratch-character-loss {
    width: 100%;
}

.home-scratch-character-base {
    position: relative;
    display: block;
}

.home-scratch-character-loss {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.home-scratch-character.is-loss .home-scratch-character-base {
    opacity: 0;
}

.home-scratch-character.is-loss .home-scratch-character-loss {
    opacity: 1;
}

.home-scratch-character-performer.is-frame-changing {
    animation: homeScratchCharacterFrameBoing 300ms cubic-bezier(0.2, 0.86, 0.32, 1.18) both;
}

.home-scratch-character:focus-visible {
    outline: 2px dashed #fff6a5;
    outline-offset: 4px;
}

.home-scratch-speech-bubble {
    z-index: var(--shop-speech-layer);
    opacity: 0;
    pointer-events: none;
    transform-origin: 18% 88%;
}

.home-scratch-speech-bubble.is-preview {
    opacity: 1;
    animation: homeScratchSpeechBubblePreview 920ms cubic-bezier(0.34, 0.08, 0.28, 1) infinite alternate;
}

.home-scratch-speech-bubble.is-speaking {
    opacity: 1;
    transform: none;
    animation: none;
}

@keyframes homeScratchSpeechBubblePreview {
    0% {
        opacity: 0.48;
        transform: scale(0.9) rotate(-5deg);
    }
    54% {
        opacity: 1;
        transform: scale(1.08) rotate(3deg);
    }
    100% {
        opacity: 0.7;
        transform: scale(0.96) rotate(-2deg);
    }
}

@keyframes homeScratchGradient {
    0% {
        background-position: 15% 15%, 88% 82%, 0% 45%;
        filter: saturate(1);
    }
    50% {
        background-position: 52% 24%, 55% 62%, 58% 55%;
        filter: saturate(1.12);
    }
    100% {
        background-position: 85% 68%, 18% 20%, 100% 50%;
        filter: saturate(1.03);
    }
}

@keyframes homeScratchCounterPattern {
    from {
        background-position: 0 0, 0 0, 0 0, 0% 50%;
    }
    to {
        background-position: 54px 54px, -71px 71px, 36px 36px, 100% 50%;
    }
}

@keyframes homeScratchCharacterIdle {
    0%, 100% {
        transform: rotate(-0.7deg) scaleX(1) scaleY(1);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    }
    31% {
        transform: translateY(1px) rotate(0.55deg) scaleX(1) scaleY(0.992);
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
    }
    58% {
        transform: translateY(-1px) rotate(-0.25deg) scaleX(1) scaleY(1.012);
        animation-timing-function: cubic-bezier(0.48, 0, 0.72, 0.5);
    }
    79% {
        transform: translateY(0) rotate(0.35deg) scaleX(1) scaleY(0.997);
    }
}

@keyframes homeScratchCharacterFrameBoing {
    0%, 100% {
        transform: rotate(0deg) scaleX(1) scaleY(1);
    }
    35% {
        transform: translateY(1px) rotate(2.1deg) scaleX(1.035) scaleY(0.97);
    }
    70% {
        transform: translateY(-1px) rotate(-1.55deg) scaleX(0.985) scaleY(1.02);
    }
}