/* =====================================================================
   KG-PLAYER — pause douce + plein ecran, EN ZONES TRANSPARENTES
   Sprint live-ux 2026-07
   =====================================================================
   REGLE ABSOLUE : on ne pose JAMAIS pointer-events:none sur l'iframe Twitch.
   Son UI doit rester utilisable en permanence — c'est par elle que passent le
   son, le volume et la qualite. Le seul moment ou l'on couvre tout, c'est
   pendant notre pause visuelle, pour pouvoir en sortir.

   NOS CONTROLES N'ONT PLUS D'APPARENCE. Ce sont deux zones transparentes posees
   exactement sur les boutons de Twitch : c'est SON icone qu'on voit, donc elles
   apparaissent et disparaissent avec sa barre, sur PC comme sur mobile, sans
   qu'on ait a deviner quoi que ce soit (l'iframe est cross-origin, sa barre nous
   est invisible — toute tentative de synchronisation par minuteur echouait, cf.
   l'entete de kg-player.js).
   Deux exceptions, la ou il n'y a aucune UI Twitch a suivre : sous le voile de
   pause, et en mini-live. La, le bouton redevient dessine.
   ===================================================================== */

.kgp {
    position: absolute;
    inset: 0;
    z-index: 8;
    font-family: var(--font-body);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    /* Le calque est totalement transparent aux appuis : ils vont tous a Twitch.
       Seuls les enfants qui le demandent interceptent. */
    pointer-events: none;
}
.kgp.kgp-off { display: none }

/* PAUSE VISUELLE — le flux continue dessous.
   Mettre reellement en pause un direct ouvre une nouvelle session a la reprise,
   et Twitch y colle une pre-roll. On voile donc l'image et on coupe le son : la
   reprise est instantanee, sans pub, et sans retard accumule. */
.kgp-veil {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 14, .94);
    display: none;
    align-items: center;
    justify-content: center;
}
/* Pendant la pause, le voile intercepte : un appui n'importe ou reprend la
   lecture. Sans ca on serait fige avec l'UI Twitch inaccessible dessous.
   z-index 4 : il passe AU-DESSUS des deux zones (2), qui n'ont plus rien a
   intercepter ici — c'est le voile entier qui fait office de bouton. */
.kgp.kgp-frozen .kgp-veil { display: flex; pointer-events: auto; z-index: 4 }
.kgp-veil-txt {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* LE GROS BOUTON PLAY — le seul objet a l'ecran pendant la pause.
   Les deux zones du bas s'effacent : sous le voile il n'y a plus d'UI Twitch a
   recouvrir, donc plus aucune raison de les montrer. */
.kgp-big {
    width: 68px;
    height: 68px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(14, 14, 16, .82);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
/* le triangle est optiquement decale a gauche dans son carre : on le recentre */
.kgp-big svg { margin-left: 3px; pointer-events: none }
.kgp-big:hover { background: rgba(30, 30, 36, .9) }
/* Cadre minuscule : 68px mangeraient toute l'image. */
.kgp.kgp-mini .kgp-big { width: 34px; height: 34px }
.kgp.kgp-mini .kgp-big svg { width: 17px; height: 17px; margin-left: 2px }

/* ============== LES DEUX ZONES ==============
   Geometrie relevee sur le vrai player (_live_redesign/measure_twitch_bar.py),
   IDENTIQUE a 390 / 844 / 960 / 1280 de large, souris comme tactile — d'ou des
   valeurs fixes, sans media query :
     pause       32x32 a  8px du bord gauche, 8px du bas
     son         32x32 a 40px du bord gauche  <- INTOUCHABLE : sur iPhone c'est
                                                 le seul moyen de mettre le son
     reglages    32x32 a 108px du bord droit
     plein ecran 32x32 a  76px du bord droit, 8px du bas

   Aucun fond, aucune bordure, aucun effet de survol : le moindre pixel dessine
   ici reapparaitrait alors que la barre de Twitch, elle, serait deja partie —
   c'est exactement le defaut qu'on corrige. */
.kgp-b {
    position: absolute;
    bottom: 8px;
    width: 32px;
    height: 32px;
    z-index: 2;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    /* Toujours actives : mieux vaut intercepter un clic de trop que d'en laisser
       passer un sur le bouton pause NATIF de Twitch (vraie pause = pre-roll au
       retour, cf. entete de kg-player.js). */
    pointer-events: auto;
}
/* En direct plein cadre, l'icone visible est celle de Twitch, dessous. */
.kgp-b svg { display: none }
/* Au clavier en revanche, il faut bien voir ou l'on est. :focus-visible ne se
   declenche pas au clic ni au doigt : aucun risque de trahir la zone. */
.kgp-b:focus-visible { outline: 2px solid #fff; outline-offset: -2px }

.kgp-pause { left: 8px }
.kgp-fs    { right: 76px }

/* HORS LIGNE, ON SE RETIRE. L'ecran d'attente (#offlineOverlay, z-index 5) passe
   sous notre calque (z-index 8) : sans ceci, deux zones invisibles resteraient
   cliquables par-dessus l'image d'attente et un appui dans le coin « mettrait en
   pause » un direct qui n'existe pas. Il n'y a derriere ni image ni barre Twitch,
   donc plus rien a intercepter.
   Le voile, lui, n'est pas concerne : si le direct s'arrete pendant notre pause,
   il faut pouvoir en sortir.
   En CSS pur — l'overlay est un frere PRECEDENT de .kgp (build() fait un
   appendChild sur #streamFrame) et sa classe .hidden est deja pilotee par
   app.js : rien a synchroniser. */
#offlineOverlay:not(.hidden) ~ .kgp .kgp-b { pointer-events: none }

/* En pause, les deux zones disparaissent pour de bon : plus de fond, plus
   d'icone, plus de clic. La sortie passe par le gros bouton play (ou par
   n'importe quel point du voile, qui est au-dessus d'elles). */
.kgp.kgp-frozen .kgp-b { pointer-events: none }

/* MINI-LIVE — l'iframe y est neutralisee (kg-mini.css coupe ses clics) et
   l'image est reduite : les coordonnees de Twitch n'ont plus cours et il n'y a
   plus rien a recouvrir. On dessine donc un bouton lisible dans un coin. */
.kgp.kgp-mini .kgp-fs { display: none }
.kgp.kgp-mini .kgp-b svg { display: block }
.kgp.kgp-mini .kgp-pause {
    left: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    background: rgba(4, 6, 14, .78);
}
.kgp.kgp-mini .kgp-veil-txt { font-size: .62rem }

/* ================= PLEIN ECRAN MAISON — LE CHAT RESTE =================
   L'API Fullscreen ne s'applique pas a un <div> sur iOS Safari, et le plein
   ecran natif de l'iframe sortirait de notre layout EN EMPORTANT LE CHAT, ce
   qui est precisement ce qu'on veut eviter. On le fait donc en CSS.

   CHOIX DE CONCEPTION : rien ne se recouvre. La version precedente posait le
   chat en bandeau translucide PAR-DESSUS l'image (38% de hauteur) : il fallait
   masquer la video pour lire le chat, et le chat n'avait qu'un tiers de
   l'ecran. Ici la video garde son 16:9 en haut et le chat prend TOUT le reste —
   sur un telephone de 844px de haut, il passe d'environ 320px a plus de 600px.
   ===================================================================== */
body.live-fs { overflow: hidden }
body.live-fs .main-header,
body.live-fs .mobile-nav,
body.live-fs #mobileLiveInfo { display: none !important }

body.live-fs .stream-box[data-mode="live"] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 56.25vw !important;      /* 16:9 exact */
    z-index: 300 !important;
}
body.live-fs .stream-box[data-mode="live"] .stream-frame { position: absolute; inset: 0 }
body.live-fs .chat-box[data-mode="live"] {
    top: 56.25vw !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 299 !important;
}
/* clavier ouvert : le chat cede la place, comme partout ailleurs */
body.live-fs.kgk-open .chat-box[data-mode="live"] { bottom: var(--kb-h) !important }

/* Paysage et grand ecran : video a gauche, chat en colonne a droite. C'est la
   disposition du mode paysage telephone, qui fait deja ses preuves — inutile
   d'en inventer une autre. En portrait, empiler est le seul choix sensé ; en
   paysage, empiler ecraserait les deux. */
@media (orientation: landscape), (min-width: 901px) {
    body.live-fs .stream-box[data-mode="live"] {
        height: 100% !important;
        bottom: 0 !important;
        right: auto !important;
        width: calc(100% - var(--chat-w)) !important;
    }
    body.live-fs .chat-box[data-mode="live"] {
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        width: var(--chat-w) !important;
        height: 100% !important;
    }
}
/* Sur grand ecran, 38vw de chat serait enorme (730px sur un 1920) : on fixe une
   largeur de colonne lisible. */
@media (min-width: 901px) {
    body.live-fs { --chat-w: 340px }
}

/* ================= INVITE A TOURNER LE TELEPHONE =================
   Sur iPhone, aucune page web ne peut faire tourner l'ecran (cf. lockLandscape
   dans le JS) : il ne reste que la demande. Elle est posee SUR LA VIDEO, pas au
   centre de l'ecran — en plein ecran portrait le centre tombe dans le chat.
   Elle ne capte aucun appui et s'efface seule au bout de 2,6 s. */
.kgp-rot-hint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56.25vw;          /* la hauteur de la video en plein ecran portrait */
    z-index: 320;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-family: var(--font-body);
}
body.live-fs .kgp-rot-hint { display: flex }
.kgp-rot-hint span {
    background: rgba(4, 6, 14, .92);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    transition: opacity .3s ease;
}
.kgp-rot-hint.kgp-rot-hint-out span { opacity: 0 }
body.low-perf .kgp-rot-hint span { transition: none }