/*
 * gamefa.net live - one stylesheet for all three pages.
 *
 * Dark on purpose: every page here is built around a video, and a light
 * surround makes the picture look washed out and tires the eye over the
 * length of a stream.
 */

@font-face {
    font-family: 'iransansxv';
    src: url(../fonts/IRANSansXV.woff2) format('woff2');
    font-weight: 100 1000;
    font-display: swap;
}

:root {
    --bg: #0f1013;
    --bg-2: #17191e;
    --bg-3: #1e2128;
    --border: #2a2e37;
    --text: #f2f3f5;
    --text-2: #9aa1ad;
    --primary: #ec204b;
    --primary-dark: #c6173d;
    --live: #ff3b30;
    --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'iransansxv', Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

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

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- header ---------- */

.site-head {
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}

.site-head .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
}

.brand span {
    color: var(--primary);
    white-space: nowrap;
}

.brand small {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-2);
}

/* On a phone the two halves cannot share a line - the tagline is a whole
 * sentence - so the name takes its own line and the sentence sits under it,
 * which also lets the header grow instead of squeezing the name. */
@media (max-width: 700px) {
    .site-head .wrap {
        height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: 17px;
        line-height: 1.5;
    }

    .brand small {
        line-height: 1.6;
    }
}

/* ---------- channel grid ---------- */

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin: 34px 0 60px;
}

@media (max-width: 700px) {
    .grid { grid-template-columns: 1fr; gap: 16px; }
}

.card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    transition: border-color .15s ease, transform .15s ease;
}

.card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg-3) center/cover no-repeat;
}

/* aspect-ratio landed in Safari 15. On anything older the box collapses to
 * zero height and the picture simply is not there - which looks exactly like
 * a broken image, on phones only. The padding trick has no such problem. */
@supports not (aspect-ratio: 16 / 9) {
    .card__thumb {
        height: 0;
        padding-top: 56.25%;
    }

    .player-shell video {
        height: 0;
        padding-top: 56.25%;
    }
}

/* Shown only while the channel is actually publishing - see site.js. */
.card__live,
.player-live {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--live);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}

.is-live .card__live,
.is-live .player-live { display: inline-flex; }

.card__live::before,
.player-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.card__body { padding: 14px 16px 16px; }

.card__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
}

.card__desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
}

.card__state {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
}

.is-live .card__state { color: var(--live); }

/* ---------- player ---------- */

.player-shell {
    position: relative;
    margin: 26px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.player-shell video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* The offline card sits on top of the video rather than replacing it, so the
 * player can start the moment the stream comes back without a reload.
 *
 * It carries the channel's own image, set from channels.json. The <video>
 * poster underneath would show the same picture, but only until the element
 * has any frames - and this card has to keep standing while the page waits,
 * so it has to hold the image itself rather than let the poster through. */
.player-offline {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-2) center/cover no-repeat;
    color: var(--text-2);
    text-align: center;
    padding: 20px;
}

/* A scrim, not a tint on the image itself: the text has to stay readable over
 * a bright poster as well as a dark one, and darkening the whole picture to
 * guarantee that would waste the picture. */
.player-offline::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .45) 60%, rgba(0, 0, 0, .62));
}

.player-offline > * { position: relative; }

.player-offline strong {
    color: #fff;
    font-size: 17px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

.player-offline span {
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.player-offline.is-hidden { display: none; }

/* ---------- youtube channel ---------- */

/* A YouTube broadcast is the whole reason the page was opened, so it gets the
 * whole width rather than the column the rest of the page sits in. The height
 * is 16:9 of that width, but never taller than the viewport - otherwise the
 * bottom of the picture sits below the fold on a short laptop screen, which is
 * the opposite of what a bigger player is for. */
.player-shell--yt {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: min(calc(100vw * 9 / 16), calc(100vh - 96px));
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}

/* 100vw counts the scrollbar; the page must not gain a sideways one for it. */
body.has-yt { overflow-x: hidden; }

.player-shell--yt #yt-player,
.player-shell--yt iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Shown only when the browser refused to start the video with sound. A click
 * inside the iframe never reaches this page, so this button is the one place
 * the viewer can hand us the gesture the sound needs. */
.player-unmute {
    position: absolute;
    /* Physical, not logical: the shell is centred the same way in both
     * directions, and the logical pair flips the translate the wrong way. */
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--live, #e11d48);
    color: #fff;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

.player-unmute:hover { filter: brightness(1.1); }

body.embed-page .player-shell--yt {
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
}

.player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
}

.player-head h1 { margin: 0; font-size: 21px; font-weight: 800; }
.player-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }

.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.back:hover { border-color: var(--primary); }

/* ---------- embed box ---------- */

.embed {
    margin: 30px 0 60px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    padding: 18px;
}

.embed h2 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.embed p  { margin: 0 0 12px; font-size: 13px; color: var(--text-2); }

.embed__row { display: flex; gap: 10px; align-items: stretch; }

.embed__row textarea {
    flex: 1;
    min-height: 84px;
    resize: vertical;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-3);
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 1.7;
    direction: ltr;
    text-align: left;
}

.embed__row button {
    flex-shrink: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .15s ease;
}

.embed__row button:hover { background: var(--primary-dark); }

@media (max-width: 600px) {
    .embed__row { flex-direction: column; }
    .embed__row button { padding: 12px; }
}

/* ---------- embed page: nothing but the video ---------- */

body.embed-page {
    background: #000;
}

body.embed-page .player-shell {
    margin: 0;
    border: 0;
    border-radius: 0;
    height: 100vh;
}

body.embed-page .player-shell video { height: 100%; aspect-ratio: auto; }

.site-foot {
    border-top: 1px solid var(--border);
    padding: 26px 0;
    color: var(--text-2);
    font-size: 12px;
}

.site-foot .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.social {
    display: flex;
    gap: 10px;
}

.social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-2);
    transition: color .15s ease, border-color .15s ease;
}

.social a:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.powered { margin: 0; }
.powered a { color: var(--primary); font-weight: 700; }

/* ---------- embed tabs ---------- */

.embed__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.embed__tabs button {
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.embed__tabs button.is-on {
    border-color: var(--primary);
    background: rgba(236, 32, 75, .12);
    color: var(--text);
}

.embed__hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-2);
}

/* ---------- countdown ---------- */

.cd-wrap {
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius);
    background: var(--bg-2);
}

.cd-wrap__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.cd-wrap__head strong { font-size: 14px; }
.cd-wrap__head span   { font-size: 12px; color: var(--text-2); }

.cd {
    display: flex;
    gap: 8px;

    /* Left to right on an RTL page, so the units read days, hours, minutes,
     * seconds from left to right - the order a clock is read in. Without it
     * the row follows the page and starts with days on the right. */
    direction: ltr;
}

.cd__u {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 62px;
    padding: 8px 4px;
    border-radius: 10px;
    background: var(--bg-3);
}

.cd__u b {
    /* Tabular figures, or the whole row jitters sideways once a second as the
     * digits change width. */
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
}

.cd__u i {
    font-style: normal;
    font-size: 11px;
    color: var(--text-2);
}

.cd__done {
    font-size: 14px;
    font-weight: 700;
    color: var(--live);
}

/* The compact form that rides on a card in the grid. */
.cd--sm {
    margin-top: 10px;
    gap: 5px;
}

.cd--sm .cd__u {
    min-width: 46px;
    padding: 5px 3px;
    border-radius: 8px;
}

.cd--sm .cd__u b { font-size: 15px; }
.cd--sm .cd__u i { font-size: 10px; }

@media (max-width: 480px) {
    .cd__u { min-width: 0; flex: 1; }
}


/* ---------- live player controls ---------- */

/*
 * A live stream has no timeline worth showing: there is nothing behind the
 * playhead to scrub back to, and a bar that only ever sits at the far right
 * invites a drag that ends in a stall.
 *
 * These pseudo-elements are WebKit's, which covers Chrome, Edge, Safari and
 * every iOS browser. Firefox does not expose its controls this way and keeps
 * its own bar; the alternative is replacing the native controls wholesale,
 * which costs far more than that one browser is worth here.
 */
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button {
    display: none !important;
}