.v-main.playground {
    //background: linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.9)), url(/static/bck-full.webp) no-repeat center center fixed;
    background-size: cover;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    margin:auto;
    max-width: 1200px;
}

.v-btn {
    text-transform: unset !important;
}

video{
    max-width: 100%;
}

.z-100 {
    z-index: 100;
}

:root {
    --svg-scale: 1;
}

.browse-asset {
    position: absolute !important;
    bottom: 44px;
    &.edit{
        left: 22px;
    }
    &.remove {
        right: 22px;
    }
}

.asset-browser{
    background-color: rgba(128,128,128,.05);
}

.img-preview {
    display: flex;
    flex-direction: column;
    .img-wrapper{
        flex-grow: 1;
        overflow: hidden;
        max-width: 270px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height:180px;
    }
    img{
        display: block;
        max-height:180px;
        max-width: 95%;
        transition: all 1s;
        margin: auto;
        &:hover{
            max-width: 125%;
        }
    }
}

.hover-effect {
    transform: scale(1);
    transition: all 0.73s !important;
    &:hover {
        transform: scale(0.98);
    }
}

.svg-container{
    svg{
        image{
            clip-path: circle(50% at 50% 50%);
        }
        circle {
            stroke: rgba(var(--v-theme-primary), .7);
            fill:rgba(255,255,255,.5);
            stroke-width: 2px;
        }
        g{
            &.selected circle{
                fill: rgba(var(--v-theme-secondary), .9);
            }
        }
        line, path{
            stroke: rgb(213, 226, 231);
            stroke-width: calc( 2px * var(--svg-scale) );
        }
        line.trigger, marker#arrow path {
            stroke: rgb(244, 215, 230);
            fill: rgb(172, 105, 139);
        }
        g.selector {
            line {
            stroke-dasharray: 0 calc(8 * var(--svg-scale)) 0;
            }
        }
        text {
            text-anchor: middle;
            fill:rgb(var(--v-theme-on-surface));
            stroke-width: 0;//calc( .1px * var(--svg-scale) );;
            user-select: none;
        }
        background-color: rgba(128,128,128,.05);
    }
    overflow: hidden;
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 188px);
    &.pan {
        cursor: grab;
    }
    &.Scene, &.GameObject, &.Task {
        cursor: grabbing;
    }
}

.game-designer-canvas, .game-play-canvas{
    width: 100%;
    max-width: 100vw;
    height: calc(100vh - 288px);
}

.game-play-canvas:has(canvas:fullscreen){
    width: 100vw;
    height: 100vh;
}

audio {
    min-width:400px;
}

.engine-stats {
    top:unset !important;
    left:unset !important;
    bottom: 0 !important;
    right: 0 !important;
}