* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html{
    --vw: 1vw;
    background-image: url('../img/bg-1.webp');
    background-size: cover;
    background-repeat: repeat;
}
body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    /* min-height: 100svh; */

    /* background-image: linear-gradient(to right, #000000a3, #000000a3), url('../img/bg.webp');
    background-size: cover, cover;
    background-repeat: no-repeat, repeat; */
    
}

/* ================================
   TV STACK WRAPPER
   ================================ */
.tv_stack{
    display: flex;
    flex-direction: column;
}

.tv_iframe {
    position: relative;
    width: 100%;
    background-size: contain;
}

.tv_iframe::before {
    content: "";
    display: block;
    width: 100%;
    height: 0px;
    padding-bottom: 62.4%;
    /* background-image: url('../img/layout.webp'); */
    background-image: url('../img/layout-2.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: relative;
    z-index: 2;
}
.tv_heading_left{
    position: absolute;
    z-index: 2;
    top: calc(1.3 * var(--vw));
    left: calc(1 * var(--vw));
    font-size: calc(1.1 * var(--vw));
    font-weight: 500;
    line-height: 1;
    color: #bbc4c6;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.05em;
    text-shadow: 0px 0px 3px black;
    transform: scaleY(1.4);
}

.tv_heading_center{
    position: absolute;
    z-index: 2;
    top: calc(3.2 * var(--vw));
    left: 51.3%;
    transform: translate(-50%,-50%);
    font-size: calc(3.7 * var(--vw));
    font-weight: 700;
    line-height: 1;
    color: #bbc4c6;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.05em;
    text-shadow: 0px 0px 5px black;
}
.tv_heading_center span{
    color:#72bde4;
}
.tv_heading_right{
    position: absolute;
    z-index: 2;
    top: calc(1.3 * var(--vw));
    right: calc(1 * var(--vw));
    font-size: calc(1.1 * var(--vw));
    font-weight: 500;
    line-height: 1;
    color: #bbc4c6;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: -0.05em;
    text-shadow: 0px 0px 3px black;
    transform: scaleY(1.4);
}

.tv_video {
    position: absolute;
    top: 13.5%;
    left: 22.5%;
    width: 55.6%;
    height: 53.5%;
    border-radius: 4%;
    -ms-transform: translate(-50%, -50%);
    -o-object-fit: cover;
    object-fit: cover;
    background: -o-radial-gradient(#d1f5ff, #2ac8ff);
    background: radial-gradient(#d1f5ff, #2ac8ff);
    background: url("../img/poster.webp");
    background-size: cover;
}
.tv_live_text{
    position: absolute;
    z-index: 2;
    top: calc(10.8 * var(--vw));
    left: calc(24.5 * var(--vw));
    font-size: calc(1.4 * var(--vw));
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.06em;
    transform: scaleY(1.6);
    padding: 0.1em 0.5em;
    background: #ec191a;
    border-radius: 3px;
    box-shadow: 0px 0px 3px black;
}
.tv_live_text::before{
    content: "";
    display: inline-block;
    width: 0.6em;
    min-width: 0.6em;
    height: 0.5em;
    border-radius: 50%;
    background-color: white;
    margin-right: 0.3em;
    margin-bottom: 0.1em;
    animation: pluse 1s infinite;
}
@keyframes pluse {
    0%,
    100%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
}
.tv_info{
    position: absolute;
    z-index: 2;
    font-size: calc(1.1 * var(--vw));
    font-weight: 600;
    line-height: 1;
    color: #bbc4c6;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.06em;
    transform: scaleY(1.6);
    padding: 0.2em 0.5em;
    background: #0000009c;
    border-radius: 5px;
}
.tv_video_name{
    top: calc(10.5 * var(--vw));
    right: calc(23.6 * var(--vw));
}
.tv_channel_name{
    top: calc(37.5 * var(--vw));
    left: calc(24 * var(--vw));
}
.tv_video_playing {
  top: calc(37.5 * var(--vw));
  right: calc(24 * var(--vw));
}

.channel_wrapper {
    position: absolute;
    top: 71.8%;
    left: 20.4%;
    right: 20.2%;
    z-index: 2;
    overflow: hidden;
    user-select: none;
}
.channel_heading{
    font-size: calc(2.82 * var(--vw));
    font-weight: 700;
    line-height: 1;
    color: #dad2ae;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: calc(0.8 * var(--vw));
    text-shadow: 0px 0px 5px black;
}
.channel_track {
    display: flex;
    gap: calc(2.1 * var(--vw));
    width: max-content;
    will-change: transform;
}

.channel_btn {
    max-width: calc(9.3 * var(--vw));
    flex: 0 0 auto;
    text-align: center;
    text-decoration: none;
    color: #dad2ae;
    text-transform: uppercase;
    font-weight: 700;
    font-size: calc(1.6 * var(--vw));
    text-wrap: wrap;
    line-height: 1;
}

.channel_btn img {
    width: calc(9.3 * var(--vw));
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: block;
    pointer-events: none;

    background-image: url("../img/btn-bg/btn-1-bg.webp");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 18%;
}
.channel_btn:nth-of-type(5n + 1) img {
    background-image: url("../img/btn-bg/btn-1-bg.webp");
}

.channel_btn:nth-of-type(5n + 2) img {
    background-image: url("../img/btn-bg/btn-2-bg.webp");
}

.channel_btn:nth-of-type(5n + 3) img {
    background-image: url("../img/btn-bg/btn-3-bg.webp");
}

.channel_btn:nth-of-type(5n + 4) img {
    background-image: url("../img/btn-bg/btn-4-bg.webp");
}

.channel_btn:nth-of-type(5n) img {
    background-image: url("../img/btn-bg/btn-5-bg.webp");
}
.channel_btn:hover{
    filter: drop-shadow(0px 0px 10px #2ac8ff);
}
.channel_name{
    padding-top: calc(0.4 * var(--vw));
    /* display: inline-block; */
    

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.channel_btn:hover{
    color:#2ac8ff
}

/* ================================
   DEFAULT (landscape, any device):
   only the first TV instance shows
   ================================ */
.tv_instance_secondary{
    display: none;
}

/* ================================
   MOBILE PORTRAIT ONLY: show both
   TVs stacked, no rotation
   (adjust the 768px breakpoint to
   match your mobile/tablet cutoff)
   ================================ */
@media (orientation: portrait) and (max-width: 768px) {

    .tv_stack{
        /* gap: calc(3 * var(--vw)); */
    }

    .tv_instance_secondary{
        display: block;
    }

    /*  */

    html {
        --vw: 1.4vw;
        min-height: 100svh;
        background-image: url("../img/bg.webp");
        background-size: 130%;
    }
    .tv_iframe::before{
        padding-bottom: 96%;
        background-size: cover;
    }

    .tv_heading_left,
    .tv_heading_right{
        display: none;
    }
    .tv_video {
        top: 13%;
        left: 7.5%;
        width: 85.8%;
        height: 54%;
    }
    .channel_wrapper {
        top: 72.8%;
        left: 4.4%;
        right: 4.4%;
    }

    .tv_live_text {
        top: calc(13 * var(--vw));
        left: calc(9 * var(--vw));
        box-shadow: 0px 0px 1px black;
    }

    .tv_video_name {
        top: calc(12 * var(--vw));
        right: calc(8 * var(--vw));
    }

    .tv_channel_name {
        top: calc(41 * var(--vw));
        left: calc(9 * var(--vw));
    }
    .tv_video_playing {
        top: calc(41 * var(--vw));
        right: calc(8 * var(--vw));
    }
    .tv_info{
        padding:0.3em 0.5em;
    }
}

/* ================================
   TABLET / LARGER PORTRAIT: keep the
   old force-landscape rotate hack,
   single TV only
   ================================ */
@media (orientation: portrait) and (min-width: 769px) {

    html{
        --vw: 1vh;
        max-width: max-content;
    }
    html, body {
        width: 100svh;
        height: 100svw;
        overflow-x: scroll;
        overflow-y: hidden;
        margin: 0;
        padding: 0;
    }

    body {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: top left;
        transform: rotate(90deg) translateY(-100%);
    }
}