body{
    margin:0;
    width:100vw;
    height:100dvh;
    background:black;
    overflow:hidden;
    position:relative;
}

/* DESKTOP SCENE */
#scene{
    position:absolute;
    inset:0;
    margin:auto;
    aspect-ratio:2560 / 1440;
    width:min(100vw, calc(100dvh * (2560 / 1440)));
    height:min(100dvh, calc(100vw * (1440 / 2560)));
    overflow:hidden;
}

/* Main visual layers */
#tvFrame,
#snowVideo,
#channelContainer,
#channelDisplay,
#tvControls{
    position:absolute;
}



.click-flag,
.click-grandbank,
.click-blackhorse,
.click-home{
    position:absolute;
    z-index:30;
    cursor:pointer;
    background:transparent;   /* TEMP for mapping */
    opacity:0.4;
}

/* channel area */
#channelContainer{
    top:7.5%;
    left:18.5%;
    width:50.5%;
    height:62%;
    z-index:1;
}

/* iframe content */
#channelFrame{
    width:100%;
    height:100%;
    border:none;
    background:black;
}

/* TV frame overlay */
#tvFrame{
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:center;
    z-index:10;
    pointer-events:none;
    opacity:1;
}

/* TV controls wrapper */
#tvControls{
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:30;
    pointer-events:none;
}

#tvControls div{
    position:absolute;
    z-index:30;
    cursor:pointer;
    background:transparent;
    pointer-events:auto;
}

/* small channel buttons - desktop */
.channelUp{
    top:146px;
    left:1314px;
    width:55px;
    height:17px;
}

.channelDown{
    top:146px;
    left:1243px;
    width:55px;
    height:17px;
}


    #tvControls .socialFacebook{
        top:27%;
        left:76.4%;
        width:60px;
        height:60px;
    }

    #tvControls .socialInstagram{
        top:27%;
        left:80.2%;
        width:60px;
        height:60px;
    }

    #tvControls .socialX{
        top:27%;
        left:84.1%;
        width:60px;
        height:60px;
    }

/* snow video area - desktop */
#snowVideo{
    top:7.0%;
    left:18.2%;
    width:52.55%;
    height:62.01%;
    object-fit:cover;
    z-index:5;
    display:none;
}

/* channel number display - desktop */
#channelDisplay{
    left:78%;
    top:4.8%;
    width:5.31%;
    height:6.39%;
    z-index:15;
}

/* optional desktop mappings - set when ready */
.channelUpBig,
.channelDownBig,
.socialFacebook,
.socialInstagram,
.socialX{
    width:0;
    height:0;
}

/* paper links - desktop */
.paper00, .paper01, .paper02, .paper03,
.paper04, .paper05, .paper06, .paper07{
    position:absolute;
    z-index:30;
    cursor:pointer;
    background:transparent;
    opacity:1;
}

.paper00{
    top:37%;
    left:77%;
    width:150px;
    height:40px;
}

.paper01{
    top:42%;
    left:77%;
    width:150px;
    height:40px;
}

.paper02{
    top:46.4%;
    left:77%;
    width:150px;
    height:40px;
}

.paper03{
    top:50.8%;
    left:77%;
    width:150px;
    height:40px;
}

.paper04{
    top:54.8%;
    left:77%;
    width:150px;
    height:40px;
}

.paper05{
    top:58.8%;
    left:77%;
    width:150px;
    height:40px;
}

.paper06{
    top:62.8%;
    left:77%;
    width:150px;
    height:40px;
}

.paper07{
    top:66.8%;
    left:77%;
    width:150px;
    height:40px;
}



.click-flag{
    top:0.2%;
    left:11.5%;
    width:120px;
    height:80px;
}

.click-grandbank{
    top:91%;
    left:27%;
    width:150px;
    height:80px;
}

.click-blackhorse{
    top:65%;
    left:0.4%;
    width:170px;
    height:250px;
}

.click-home{
    top:0.5%;
    left:39%;
    width:200px;
    height:55px;
}


#tvControls .remote00,
#tvControls .remote01,
#tvControls .remote02,
#tvControls .remote03,
#tvControls .remote04,
#tvControls .remote05,
#tvControls .remote06,
#tvControls .remote07,
#tvControls .remote08,
#tvControls .remote09,
#tvControls .remote10,
#tvControls .remote11,
#tvControls .remote12{
    position:absolute;
    bottom: 4.8%;
    width: 1.85%;
    height: 6.2%;
    z-index: 50;
    cursor: pointer;
    background: transparent;

    pointer-events: auto;
}

#tvControls .remote00 { right: 42.7%; }
#tvControls .remote01 { right: 39.65%; }
#tvControls .remote02 { right: 36.7%; }
#tvControls .remote03 { right: 33.75%; }
#tvControls .remote04 { right: 30.8%; bottom: 4.45%;}
#tvControls .remote05 { right: 27.95%; bottom: 4.4%;}
#tvControls .remote06 { right: 25.03%; bottom: 4.2%;}
#tvControls .remote07 { right: 22.35%; bottom: 4.0%;}
#tvControls .remote08 { right: 19.40%; bottom: 3.9%;}
#tvControls .remote09 { right: 16.35%; bottom: 3.7%;}
#tvControls .remote10 { right: 13.5%; bottom: 3.5%;}
#tvControls .remote11 { right: 10.65%; bottom: 3.3%; }
#tvControls .remote12 { right: 7.7%; bottom: 3.1%;}


#tvControls .click-power{
    position:absolute;
    top:16.2%;
    left:85.1%;
    width:30px;
    height:7%;
    z-index:60;
    cursor:pointer;
    background:transparent; /* testing */
    border:none;       /* testing */
    pointer-events:auto;
}

/* MOBILE */
@media (max-width:768px){

    #scene{
        position:absolute;
        inset:0;
        margin:auto;
        aspect-ratio:1440 / 2560;
        width:min(100vw, calc(100dvh * (1440 / 2560)));
        height:min(100dvh, calc(100vw * (2560 / 1440)));
        overflow:hidden;
    }

    #tvFrame{
        top:0;
        left:0;
        width:100%;
        height:100%;
        object-fit:fill;
        object-position:center;
        z-index:10;
        pointer-events:none;
    }

#channelContainer{
    top:25%;
    left:10%;
    width:75%;
    height:39.5%;
}

#snowVideo{
    top:25%;
    left:10%;
    width:76%;
    height:39.5%;
}

    #channelDisplay{
        left:77.1%;
        top:68.8%;
        width:9%;
        height:auto;
    }

    #tvControls .channelUp{
        top:69.6%;
        left:70.2%;
        width:11px;
        height:3px;
    }

    #tvControls .channelDown{

        top:69.6%;
        left:66.2%;
        width:11px;
        height:3px;
    }

    #tvControls .channelUpBig{
        top:68.7%;
        left:7.8%;
        width:25px;
        height:25px;
    }

    #tvControls .channelDownBig{
                top:68.7%;
        left:25.4%;
        width:25px;
        height:25px;
    }

    #tvControls .socialFacebook{
        top:66%;
        left:41%;
        width:15px;
        height:15px;
    }

    #tvControls .socialInstagram{
        top:66%;
        left:48%;
        width:15px;
        height:15px;
    }

    #tvControls .socialX{
        top:66%;
        left:54.5%;
        width:15px;
        height:15px;
    }

    .paper00{
        top:82%;
        left:25%;
        width:120px;
        height:13px;
    }

    .paper01{
        top:84.2%;
        left:25%;
        width:120px;
        height:13px;
    }

    .paper02{
        top:86.3%;
        left:27%;
        width:120px;
        height:13px;
    }

    .paper03{
        top:88.4%;
        left:27.5%;
        width:120px;
        height:13px;
    }

    .paper04{
        top:90.5%;
        left:28.2%;
        width:120px;
        height:13px;
    }

    .paper05{
        top:92.6%;
        left:27%;
        width:120px;
        height:13px;
    }

    .paper06{
        top:94.7%;
        left:27%;
        width:120px;
        height:13px;
    }

    .paper07{
        top:96.9%;
        left:27.5%;
        width:120px;
        height:13px;
    }
    
    
    
    
    #tvControls .click-flag{
    top:2%;
    left:20%;
    width:200px;
    height:120px;
}

#tvControls .click-grandbank{
    top:11%;
    left:84%;
    width:70px;
    height:30px;
}

#tvControls .click-blackhorse{
    top:5%;
    left:1%;
    width:55px;
    height:100px;
}

#tvControls .click-home{
    top:69%;
    left:39%;
    width:75px;
    height:25px;
}

#tvControls .click-power{
    top:69.1%;
    left:92%;
    width:4%;
    height:3%;
    z-index:60;
    cursor:pointer;
    background:transparent; /* testing */
    border:none;       /* testing */
}



/* mobile remote buttons */
#tvControls .remote00,
#tvControls .remote01,
#tvControls .remote02,
#tvControls .remote03,
#tvControls .remote04,
#tvControls .remote05,
#tvControls .remote06,
#tvControls .remote07,
#tvControls .remote08,
#tvControls .remote09,
#tvControls .remote10,
#tvControls .remote11,
#tvControls .remote12{
    position:absolute;
    width:6.2%;
    height:2.5%;
    z-index:60;
    cursor:pointer;
    background:transparent;

    pointer-events:auto;
}

/* left column */
#tvControls .remote00{ left:61.8%; top:79.2%; }
#tvControls .remote02{ left:63.8%; top:82.2%; }
#tvControls .remote05{ left:66.3%; top:85.0%; }
#tvControls .remote07{ left:69.5%; top:88.0%; }
#tvControls .remote09{ left:72.8%; top:91%; }
#tvControls .remote11{ left:75.3%; top:93.7%; }

/* right column - slightly higher */
#tvControls .remote01{ left:71.0%; top:78.7%; }
#tvControls .remote03{ left:73.2%; top:81.3%; }
#tvControls .remote06{ left:75.8%; top:84.4%; }
#tvControls .remote08{ left:78.7%; top:86.9%; }
#tvControls .remote10{ left:82.3%; top:89.8%; }
#tvControls .remote12{ left:85.5%; top:92.7%; }

/* optional if you want 4 centered a bit differently */
#tvControls .remote04{ left:66.0%; top:82.8%; width:0; height:0; }



}