/* client desktop lobby screen (partials/lobby-tv), used by the sports and live casino
   pages. Mirrors the reference sportView (.reg_sport / .are_sport / .nav_sport): a big
   screen shows the selected provider, gold taglines with a Play Now on it, then a row
   of provider tabs. Loaded at desktop width only. */

.c2-tv {
    position: relative;
    width: 100%;
    min-height: 700px;
    margin-bottom: 70px;
    background: var(--c2-bg);
}
/* sports: the reference stadium, whose painted screen the provider picture covers */
.c2-tv--sport { background: var(--c2-bg) url('../../images/client/sport/bg_sports.jpg') 50% 0 no-repeat; }
/* live: the casino floor behind the reference live hero, blurred and dimmed */
.c2-tv--live { overflow: hidden; }
.c2-tv--live::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: url('../../images/client/live/bg_liveRG.jpg') 50% 0 / cover no-repeat;
    filter: blur(8px) brightness(.4) saturate(1.1);
}
.c2-tv--live::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 40% at 50% 40%, rgba(255, 214, 140, .14), rgba(255, 214, 140, 0) 70%),
        linear-gradient(180deg, rgba(19, 18, 23, 0) 60%, var(--c2-bg) 100%);
}

.c2-tv__area {
    position: relative;
    z-index: 1;
    left: calc(50% - 450px);
    width: 540px;
    padding-top: 290px;
}
.c2-tv__area[hidden] { display: none; }

/* the screen: 895x395 at the reference offset, cut to the reference outline (edges bow
   in 21px at the middle) with an 8px LED grid, darker sides and a lit top edge */
.c2-tv__set {
    position: absolute;
    top: 90px;
    left: 2px;
    width: 895px;
    height: 395px;
}
.c2-tv__screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
    -webkit-mask: url('../../images/client/sport/mask_screen.png') 0 0 / 100% 100% no-repeat;
    mask: url('../../images/client/sport/mask_screen.png') 0 0 / 100% 100% no-repeat;
}
.c2-tv__screen img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.c2-tv__screen::before,
.c2-tv__screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.c2-tv__screen::before {
    z-index: 1;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 8px);
}
.c2-tv__screen::after {
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18) 0, rgba(255, 255, 255, 0) 12%),
        linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, .55)),
        radial-gradient(ellipse 60% 55% at 30% 82%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}
/* the stadium draws its own bezel; on live the TV casing is drawn: the same curved
   outline a little larger, dark metal with a gold hairline, and a shadow under it */
.c2-tv__bezel { display: none; }
.c2-tv--live .c2-tv__set { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .75)) drop-shadow(0 0 1px rgba(212, 181, 126, .6)); }
.c2-tv--live .c2-tv__bezel {
    display: block;
    position: absolute;
    inset: -9px -9px;
    background: linear-gradient(180deg, #3a3834 0%, #151417 18%, #0b0b0d 80%, #26241f 100%);
    -webkit-mask: url('../../images/client/sport/mask_screen.png') 0 0 / 100% 100% no-repeat;
    mask: url('../../images/client/sport/mask_screen.png') 0 0 / 100% 100% no-repeat;
}

.c2-tv__name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c2-gold-text);
}
.c2-tv__copy { position: relative; padding: 10px 0 20px; text-align: center; }
.c2-tv__gold {
    display: block;
    padding-bottom: 5px;
    letter-spacing: -.5px;
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(180deg, #fff 0, #fffb99 59%, #f7cf69 62%, #ddb046 80%, #fffb99);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 1px #000);
}
.c2-tv__row { position: relative; }
.c2-tv__play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 213px;
    height: 47px;
    margin: 0 auto;
    padding-right: 30px;
    border: 0;
    font-size: 20px;
    font-weight: 700;
    color: #351805;
    background: url('../../images/client/sport/btn_play.png') 0 50% / auto 100% no-repeat;
    cursor: pointer;
    transition: .3s;
}
.c2-tv__play:hover { filter: brightness(1.2); }
.c2-tv__row.is-down .c2-tv__play { pointer-events: none; filter: grayscale(1) brightness(.45); }
/* covers the whole (dimmed) Play Now button, its rounded ends included */
.c2-tv__maintain {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 213px;
    height: 47px;
    border-radius: 24px;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    color: #e9e2d2;
    background: rgba(28, 26, 24, .9);
    box-shadow: inset 0 0 0 1px rgba(212, 181, 126, .45);
}

.c2-tv__nav {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-evenly;
    gap: 13px;
    width: 1051px;
    max-width: 100%;
    margin: 60px auto 0;
    padding: 0;
    list-style: none;
}
.c2-tv__tab {
    width: 253px;
    height: 123px;
    overflow: hidden;
    border-radius: 10px;
    transform: scale(.89);
    filter: grayscale(100%);
    cursor: pointer;
    transition: .3s;
}
.c2-tv__tab.is-active,
.c2-tv__tab:hover { transform: scale(1); filter: grayscale(0); }
.c2-tv__tab img { width: 100%; height: 100%; object-fit: cover; }
.c2-tv__empty { position: relative; z-index: 1; padding: 300px 0 0; text-align: center; color: var(--c2-dim); font-size: 16px; }