@charset "UTF-8";
.categories {
    position:relative;
    display:flex;
    flex-direction:column;
    width:var(--theme-main-width);
    margin-left:var(--theme-main-offset);
    min-height:100dvh;
    min-height:100vh;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:var(--bg-secondary);
    transition:background-color .3s ease;
}

@media (max-width: 767px) {
    .categories {
        width:100%;
        margin-left:0;
    }
    .categories__menu--main {
        border-radius:0;
    }
}

.categories__menu--main {
    display:flex;
    border-radius:0;
    border-right:2px solid var(--border-tertiary);
    transition:left .3s ease;
    position:fixed;
}

.categories__room {
    position:relative;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    width:100%;
    min-height:0;
    /* Soft top fade only — no solid fill (header uses the same token) */
    background:var(--theme-background-header-categories-shadow);
}

.categories__stage {
    position:relative;
    flex:1 1 auto;
    width:100%;
    min-height:100%;
    overflow:hidden;
    --room-object-scale: 1;
}

.categories__stage-frame {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-origin:top left;
    will-change:transform;
}

.categories__background {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
}

.categories__background--desktop {
    display:none;
}

.categories__background--mobile {
    display:block;
}

.categories__room-element {
    position:absolute;
    z-index:3;
    display:block;
    /* Width % of stage-frame only — no rem max-width (breaks admin↔site WYSIWYG) */
    width:22%;
    transform-origin:bottom center;
    transform:translate(-50%) scale(var(--room-object-scale, 1));
    transition:transform .3s ease;
    cursor:pointer;
}

.categories__room-element img {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center bottom;
}

.categories__room-element:after {
    content:"";
    position:absolute;
    bottom:-1.25rem;
    left:50%;
    transform:translate(-50%);
    width:80%;
    height:1.875rem;
    background: var(--effect-object-glow);
    border-radius:50%;
    filter:blur(15px);
    opacity:0;
    transition:opacity .3s ease,bottom .3s ease;
    z-index:-1;
}

.categories__room-element:hover,.categories__room-element--hovered {
    transform:translate(-50%) translateY(-.3125rem) scale(var(--room-object-scale, 1));
}

.categories__room-element:hover:after,.categories__room-element--hovered:after {
    opacity:1;
    bottom:-1.5625rem;
}

.categories__room-element--hidden {
    display:none;
}

.categories__room-cat {
    position:absolute;
    bottom:55%;
    left:69%;
    width:13.4%;
    aspect-ratio:120/100;
    z-index:4;
    transform-origin:bottom center;
    transform:translate(-50%) scale(var(--room-object-scale, 1));
    cursor:pointer;
    filter:brightness(1);
    transition:filter .3s ease,transform .3s ease;
}

.categories__room-cat-sprite {
    position:absolute;
    inset:0;
    display:block;
    background-repeat:no-repeat;
    background-size:300% 100%;
    background-position:0% 0%;
    animation:cat-sprite-sleep 1s steps(3) infinite;
    transform:scaleX(var(--room-object-flip-x, 1));
    transform-origin:center center;
    pointer-events:none;
}

.categories__room-cat--hidden {
    display:none;
}

.categories__room-cat:hover,.categories__room-cat--hovered {
    filter:brightness(1.15);
}

@keyframes cat-sprite-sleep {
    0% {
        background-position:0% 0%;
    }
    to {
        background-position:150% 0%;
    }
}

.categories__room-dog {
    position:absolute;
    bottom:54%;
    left:48%;
    width:16.8%;
    aspect-ratio:150/230;
    z-index:4;
    transform-origin:bottom center;
    transform:translate(-50%) scale(var(--room-object-scale, 1));
    cursor:pointer;
    filter:brightness(1);
    transition:filter .3s ease,transform .3s ease;
}

.categories__room-dog-sprite {
    position:absolute;
    inset:0;
    display:block;
    background-repeat:no-repeat;
    background-size:700% 100%;
    background-position:0% 0%;
    animation:dog-sprite-walk .8s steps(6) infinite;
    transform:scaleX(var(--room-object-flip-x, 1));
    transform-origin:center center;
    pointer-events:none;
}

.categories__room-dog:hover,.categories__room-dog--hovered {
    filter:brightness(1.5);
}

.categories__room-dog--hidden {
    display:none;
}

/*
 * Props: tooltip stays in-flow so <a.categories__room-element> sizes to the img.
 * Absolute inset:0 here collapses the link (no in-flow content) → tiny hitbox, no hover.
 */
.categories__room-tooltip.ui-tooltip {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.categories__room-tooltip .ui-tooltip__trigger {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    cursor: pointer;
}

.categories__room-tooltip .ui-tooltip__trigger img {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(var(--room-object-flip-x, 1));
    transform-origin: center center;
}

/* Animals: parent already has width + aspect-ratio — fill that box */
.categories__room-tooltip--animal.ui-tooltip {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.categories__room-tooltip--animal .ui-tooltip__trigger {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.categories__room-tooltip-hit {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.categories__room-tooltip--animal .ui-tooltip__panel {
    pointer-events: none;
}

/*
 * Mobile/tablet room HUD — off-screen props only.
 * Top chip (↑): props above observable viewport.
 * Bottom chip (↓): props below. In-view props keep per-item tooltips.
 */
.categories__room-hud {
    display: none;
}

@media (max-width: 1399px) {
    .categories__room-hud {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 7;
        pointer-events: none;
    }

    .categories__room-hud[hidden] {
        display: none !important;
    }

    .categories__room-hud-chip {
        position: absolute;
        left: 50%;
        translate: -50% 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        max-width: min(22rem, calc(100% - 2rem));
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
        border: 0.0625rem solid var(--border-secondary);
        background-color: var(--bg-tooltip);
        color: var(--fg-tooltip);
        -webkit-backdrop-filter: blur(0.5rem);
        backdrop-filter: blur(0.5rem);
        box-shadow: var(--effect-tooltip-shadow);
        font-family: var(--font-text);
        font-size: var(--text-sm);
        font-weight: 500;
        line-height: 1.25rem;
        letter-spacing: 0.01em;
        text-align: center;
        pointer-events: auto;
        cursor: pointer;
    }

    .categories__room-hud-chip[hidden] {
        display: none !important;
    }

    .categories__room-hud-chip--top {
        top: calc(var(--shop-header-clearance, 5.25rem) + 0.5rem);
    }

    .categories__room-hud-chip--bottom {
        bottom: 1rem;
    }

    .categories__room-hud-arrow {
        display: inline-flex;
        flex: 0 0 auto;
        width: 1rem;
        height: 1rem;
        color: inherit;
    }

    .categories__room-hud-arrow .icon {
        width: 100%;
        height: 100%;
    }

    .categories__room-hud-list {
        display: inline;
        min-width: 0;
    }

    .categories__room-hud-name {
        appearance: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--fg-tooltip) 35%, transparent);
        text-underline-offset: 0.15em;
    }

    .categories__room-hud-name:focus-visible {
        outline: 0.125rem solid var(--border-brand-primary);
        outline-offset: 0.125rem;
        border-radius: 0.25rem;
    }

    .categories__room-hud-more {
        appearance: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        white-space: nowrap;
    }
}

@keyframes dog-sprite-walk {
    0% {
        background-position:0% 0%;
    }
    to {
        background-position:100% 0%;
    }
}

@media (min-width: 1400px) {
    .categories__background--mobile {
        display:none;
    }
    .categories__background--desktop {
        display:block;
    }
}

@media (max-width: 1399px) {
    .categories__room-element {
        width:28%;
    }
    .categories__room-cat {
        bottom:74%;
        left:66%;
        width:18%;
    }
    .categories__room-dog {
        bottom:67%;
        left:27%;
        width:24%;
    }
}

@media (max-width: 440px) {
    .categories__room-cat {
        left:73%;
    }
}