/* V7 is a native source video stage; the visual version selector stays in the shared shell. */
.fantasy-tree-visual-version[data-tree-visual-version-switcher="v7"] {
    grid-template-columns: repeat(5, 38px);
    grid-template-rows: 36px;
    grid-auto-flow: column;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-stage {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-stage
    > .fantasy-tree-v7-root {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-root {
    position: relative;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-scene {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-video {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: 0;
    outline: 0;
    background: #000;
    object-fit: contain;
    object-position: center;
}

body.fantasy-tree-v7-active
    .fantasy-tree-v7-video:focus-visible {
    outline: 1px solid rgba(0, 234, 255, 0.72);
    outline-offset: -3px;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body.fantasy-tree-v7-active
        .fantasy-tree-v7-scene {
        min-height: min(58vw, 72vh);
    }

    body.fantasy-tree-v7-active
        .fantasy-tree-v7-video {
        object-fit: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.fantasy-tree-v7-active
        .fantasy-tree-v7-video {
        animation: none;
    }
}