.g-container.home-stamps-panel,
.home-stamps-panel {
    --panel-color: #ff3ee7;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0;
    overflow: hidden;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.home-stamps-window {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 4px;
    overflow: hidden;
    border: 3px solid #15102f;
    background: #b648bd;
    box-shadow:
        inset 0 0 0 2px #fa73e7,
        inset 0 0 0 4px #24ddd4,
        3px 3px 0 #17112f;
}

.home-stamps-viewport {
    --stamps-heat: 0;
    --stamps-pulse: 0.5;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border: 2px solid #161131;
    background: #1a0d48;
    box-shadow: inset 0 0 0 2px rgba(36, 221, 212, 0.4);
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0155.png') 8 8, grab;
    touch-action: none;
}

.home-stamps-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 70, 40, 0.55), transparent 70%),
        #b00018;
    opacity: calc(var(--stamps-heat) * (0.28 + 0.52 * var(--stamps-pulse)));
    transition: opacity 40ms linear;
}

.home-stamps-viewport.is-boosting {
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0156.png') 8 8, grabbing;
}

.home-stamps-track {
    --stamps-trail: 0px;
    position: relative;
    z-index: 1;
    display: flex;
    width: max-content;
    height: 100%;
    align-items: center;
    will-change: transform;
    transform: translate3d(var(--stamps-x, -50%), 0, 0);
}

.home-stamps-set {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    height: 100%;
    box-sizing: border-box;
}

.home-stamps-slot {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: 100%;
}

.home-stamps-coin {
    position: absolute;
    z-index: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: url('/static/cursors/kenney_cursor-pixel-pack/Tiles/tile_0134.png') 3 2, pointer;
    filter: drop-shadow(2px 2px 0 rgba(8, 4, 40, 0.65));
    transition: transform 140ms ease, filter 140ms ease;
}

.home-stamps-coin img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    -webkit-user-drag: none;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.home-stamps-coin[data-edge="top"] {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.home-stamps-coin[data-edge="bottom"] {
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.home-stamps-coin[data-edge="left"] {
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.home-stamps-coin[data-edge="right"] {
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.home-stamps-coin:hover,
.home-stamps-coin:focus-visible {
    z-index: 3;
    filter: drop-shadow(3px 3px 0 rgba(8, 4, 40, 0.8)) brightness(1.12);
}

.home-stamps-coin[data-edge="top"]:hover,
.home-stamps-coin[data-edge="top"]:focus-visible {
    transform: translateX(-50%) translateY(-2px) scale(1.12);
}

.home-stamps-coin[data-edge="bottom"]:hover,
.home-stamps-coin[data-edge="bottom"]:focus-visible {
    transform: translateX(-50%) translateY(2px) scale(1.12);
}

.home-stamps-coin[data-edge="left"]:hover,
.home-stamps-coin[data-edge="left"]:focus-visible {
    transform: translateY(-50%) translateX(-2px) scale(1.12);
}

.home-stamps-coin[data-edge="right"]:hover,
.home-stamps-coin[data-edge="right"]:focus-visible {
    transform: translateY(-50%) translateX(2px) scale(1.12);
}

.home-stamps-coin:focus-visible {
    outline: 2px dashed #fff578;
    outline-offset: 2px;
}

.home-stamps-coin.is-collected {
    pointer-events: none;
    animation: homeStampsCoinCollect 420ms cubic-bezier(0.16, 0.9, 0.25, 1.28) forwards;
}

@keyframes homeStampsCoinCollect {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.home-stamps-set > img,
.home-stamps-slot > img {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    height: 72px;
    width: auto;
    max-width: none;
    object-fit: contain;
    image-rendering: auto;
    transform: scale(0.9);
    transform-origin: center center;
    transition: transform 220ms cubic-bezier(0.22, 0.8, 0.24, 1.35);
    /* Trail pulls left (behind LTR motion); length comes from --stamps-trail */
    filter:
        drop-shadow(2px 2px 0 rgba(8, 4, 40, 0.55))
        drop-shadow(calc(var(--stamps-trail) * -0.35) 0 0 rgba(36, 221, 212, 0.5))
        drop-shadow(calc(var(--stamps-trail) * -0.7) 0 0 rgba(255, 62, 231, 0.32))
        drop-shadow(calc(var(--stamps-trail) * -1) 0 0 rgba(8, 4, 40, 0.2));
    pointer-events: auto;
}

.home-stamps-set > img:hover,
.home-stamps-slot > img:hover {
    transform: scale(1);
    z-index: 2;
}

@media (max-width: 700px) {
    .home-stamps-set {
        gap: 14px;
        padding: 0 14px;
    }

    .home-stamps-set > img,
    .home-stamps-slot > img {
        height: 58px;
    }

    .home-stamps-coin {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-stamps-track {
        transform: none !important;
        --stamps-trail: 0px !important;
    }

    .home-stamps-set > img,
    .home-stamps-slot > img {
        filter: drop-shadow(2px 2px 0 rgba(8, 4, 40, 0.55));
        transition: none;
    }

    .home-stamps-set[aria-hidden="true"] {
        display: none;
    }

    .home-stamps-coin,
    .home-stamps-coin.is-collected {
        animation: none !important;
        transition: none !important;
    }
}