/* client live casino page, mobile layout. The desktop page is partials/lobby-tv
   (css/client/lobby-tv.css). Loaded below desktop width only. */

.c2-live__play {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 30px;
    font-weight: 500;
    color: var(--c2-gold-text);
    background: linear-gradient(180deg, #523c23 0, #161410);
    box-shadow: inset 1px 1px 1px #ffca77;
    cursor: pointer;
    transition: .3s;
}
.c2-live__play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    padding: 3px;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    border: 1px solid #4a3f33;
    border-radius: 30px;
    pointer-events: none;
}
.c2-live__play:hover { filter: brightness(1.5); }
.c2-live__empty { padding: 80px 0; text-align: center; color: var(--c2-dim); font-size: 16px; }

/* ---- mobile: one tile per provider on its hero backdrop ---- */
.c2-live-m { display: grid; gap: 12px; padding: 14px 12px 20px; }
.c2-live-m__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 150px;
    padding: 16px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--c2-bg) 70% 0 / cover no-repeat;
    box-shadow: 0 0 0 1px rgba(212, 181, 126, .3);
}
.c2-live-m__tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 9, 12, .9) 0%, rgba(10, 9, 12, .55) 55%, rgba(10, 9, 12, 0) 100%);
}
.c2-live-m__tile > * { position: relative; }
.c2-live-m__logo { width: 150px; height: 50px; background: 0 50% / contain no-repeat; }
.c2-live-m__logo.is-tile { width: 120px; height: 60px; border-radius: 6px; background-size: cover; }
.c2-live-m__logo.is-text { display: flex; align-items: center; font-size: 18px; font-weight: 800; color: var(--c2-gold-text); }
.c2-live-m__line { max-width: 60%; font-size: 12px; line-height: 1.4; color: var(--c2-gold-text); }
.c2-live-m .c2-live__play { width: 110px; height: 32px; margin: 4px 0 0; font-size: 13px; }
.c2-live-m__tile.is-down .c2-live__play { color: #5b523c; background: linear-gradient(180deg, #483d31 0, #151412); box-shadow: inset 1px 1px 1px #786653; }

/* tablet: two tiles a row */
@media (min-width: 600px) {
    .c2-live-m { grid-template-columns: repeat(2, 1fr); }
}