/* ============================================================
   ROOM TV v2 — Player plein espace + cercle propositions + QR sidebar
   ============================================================ */

/* === Player : maximise la place (la video remonte tout en haut) === */
.jb-room-view__player {
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
}
.jb-room-view__player > .jb-player {
    margin: 0 !important;
    width: 100% !important;
}
.jb-player {
    display: block;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #000;
    position: relative;
}
.jb-player #jb-yt-player {
    width: 100%;
    height: 100%;
}
/* Plein ecran maison (bouton a cote de Cast, ideal PC->TV en HDMI) :
   on remplit tout l'ecran sans le letterbox impose par l'aspect-ratio 16/9. */
.jb-player:fullscreen,
.jb-player:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
}
.jb-player:fullscreen #jb-yt-player,
.jb-player:-webkit-full-screen #jb-yt-player {
    width: 100%;
    height: 100%;
}

/* === Variante duo : 2 cercles cote a cote === */
.jb-draw-card.jb-draw-card--duo {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
    justify-items: center;
    padding: 16px 12px;
}
.jb-draw-card--duo .jb-draw-ring {
    width: 100%;
    max-width: 130px;
    height: auto;
    aspect-ratio: 1;
}
.jb-draw-card--duo .jb-draw-ring__time {
    font-size: 24px;
}
.jb-draw-card--duo .jb-draw-ring__label {
    font-size: 9px;
}
.jb-draw-card--duo > .jb-proposers-list {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 8px;
    max-height: 100px;
}

/* === Cercle des Propositions (couleur bleue, animation differente) === */
.jb-prop-ring__progress {
    stroke: #5b8cff !important;
    filter: drop-shadow(0 0 8px rgba(91, 140, 255, 0.5)) !important;
    animation: none !important;
}
.jb-prop-ring__count {
    color: #5b8cff !important;
    font-size: 32px !important;
    animation: none !important;
}
/* Quand toutes les propositions sont la (= chacun a propose) -> vert succes */
.jb-prop-ring.is-full .jb-prop-ring__progress {
    stroke: #10b981 !important;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.6)) !important;
}
.jb-prop-ring.is-full .jb-prop-ring__count {
    color: #10b981 !important;
}

/* === Cercle Connectes (vert, anime selon ratio current/max) === */
.jb-conn-ring__progress {
    stroke: #10b981 !important;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.45)) !important;
    animation: none !important;
}
.jb-conn-ring__count {
    color: #10b981 !important;
    font-size: 30px !important;
    animation: none !important;
}
/* Quand la Room est presque pleine (>80%) -> rose alert */
.jb-conn-ring.is-near-full .jb-conn-ring__progress {
    stroke: #ff3b6b !important;
    filter: drop-shadow(0 0 10px rgba(255, 59, 107, 0.55)) !important;
}
.jb-conn-ring.is-near-full .jb-conn-ring__count {
    color: #ff3b6b !important;
}

/* === Bloc duo Connectes + QR === */
.jb-conn-qr-card {
    align-items: stretch !important;
}
.jb-conn-qr-card__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
}
.jb-conn-qr-card__qr img {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.jb-conn-qr-card__hint {
    color: var(--jb-text-muted);
    font-size: 10px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Phase 11h : code court a taper sous le QR (alternative au scan). */
.jb-conn-qr-card__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
}
.jb-conn-qr-card__code-label {
    color: var(--jb-text-muted);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.jb-conn-qr-card__code-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.18em;
    padding-left: 0.18em;
    color: #fff;
}

/* === Chat plus grand (gagne de la place) === */
.jb-sidebar-card--chat .jb-chat-panel {
    max-height: 400px !important;
    min-height: 280px;
}

/* === Room terminee : cache la sidebar entiere + force layout 1 col === */
.jb-room-view[data-room-ended="true"] .jb-room-view__sidebar {
    display: none !important;
}
.jb-room-view[data-room-ended="true"] .jb-room-view__layout {
    grid-template-columns: 1fr !important;
}
.jb-room-view[data-room-ended="true"] .jb-room-view__player {
    justify-content: center !important;
    align-items: center !important;
    min-height: 70vh;
}

/* === QR Card (ancienne, a la place de l'ancien bloc Propositions) === */
.jb-qr-card {
    text-align: center;
    padding: 18px;
}
.jb-qr-card__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.jb-qr-card__icon { font-size: 20px; }
.jb-qr-card__label {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.jb-qr-card__img-wrap {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.jb-qr-card__img-wrap img {
    display: block;
    width: 100%;
    max-width: 160px;
    height: auto;
}
.jb-qr-card__hint {
    color: var(--jb-text-muted);
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   Reactions live (Phase 7) — emojis qui montent sur la TV
   La couche couvre le player ; chaque emoji monte en flottant
   puis s'efface. pointer-events:none -> ne gene jamais la video.
   ============================================================ */
.jb-react-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
}
.jb-react-float {
    position: absolute;
    bottom: 8%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    will-change: transform, opacity;
    animation-name: jbReactRise;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: forwards;
}
.jb-react-emoji {
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}
.jb-react-who {
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
}
@keyframes jbReactRise {
    0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
    12%  { transform: translate(-50%, -8%) scale(1.15); opacity: 1; }
    22%  { transform: translate(-50%, -16%) scale(1); }
    100% { transform: translate(calc(-50% + var(--jb-react-drift, 0px)), -88vh) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .jb-react-float { animation-duration: 1200ms !important; }
}

/* ============================================================
   Phase 11i — Vue PC epuree : colonne droite masquee, video pleine
   largeur + QR permanent en overlay (haut-droite).
   La colonne droite fait doublon avec la telecommande -> MASQUEE.
   /!\ On MASQUE (display:none), on ne supprime PAS le DOM : le
   controleur de synchro room_view reference ses targets sans garde,
   les retirer casserait la lecture. CSS only = zero risque sync.
   ============================================================ */
/* /!\ Scope [data-controller] = vue PC (room/view) UNIQUEMENT. Le cast
   receiver charge AUSSI ce fichier mais n'a pas de data-controller (vanilla
   JS) et gere son plein-cadre dans sa propre CSS inline -> on ne le touche pas. */
.jb-room-view[data-controller] .jb-room-view__sidebar { display: none !important; }
.jb-room-view[data-controller] .jb-room-view__layout { grid-template-columns: 1fr !important; }

/* Phase 11j-fix : PLEIN CADRE sur PC (comme la TV). Avant on capait le
   <main> a la largeur 16/9 (calc((100vh-72px)*16/9)) pour eviter le scroll.
   L'user veut la video pleine largeur. Donc on donne au player une hauteur
   DEFINIE (100vh - topbar ~72px) et 100% de large ; .jb-player remplit ce
   cadre et YouTube gere lui-meme le letterbox 16/9 a l'interieur. Plus de
   cap de largeur, plus de scroll. L'overlay QR reste ancre au coin de .jb-player. */
.jb-room-view[data-controller] .jb-room-view__player {
    width: 100% !important;
    max-width: none !important;
    height: calc(100vh - 72px) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.jb-room-view[data-controller] .jb-room-view__player > .jb-player {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
}

/* QR + code permanent, en surimpression du coin haut-droit du player */
.jb-qr-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 35;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(10, 4, 8, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.jb-qr-overlay img {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
}
.jb-qr-overlay__hint {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    max-width: 120px;
    line-height: 1.3;
}
.jb-qr-overlay__tv {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 120px;
    line-height: 1.25;
}
.jb-qr-overlay__code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.jb-qr-overlay__code-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}
.jb-qr-overlay__code-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding-left: 0.12em;
    color: #fff;
}

/* Room terminee : plus de QR overlay (inutile de rejoindre une room finie) */
.jb-room-view[data-controller][data-room-ended="true"] .jb-qr-overlay { display: none !important; }

/* === Anneaux Tirage + Propositions en overlay, JUSTE SOUS le QR (vue PC) ===
   Sortis de la sidebar masquee. Scope [data-controller] = vue PC uniquement
   (le cast receiver charge ce fichier mais gere SES rings via sa CSS inline). */
.jb-room-view[data-controller] .jb-draw-overlay {
    position: absolute;
    top: 268px;          /* descendu pour degager le QR (la boite QR + code est haute) */
    right: 16px;
    z-index: 34;         /* sous le QR (35), au-dessus de la video */
    display: grid;       /* grille 2x2 : Tirage/Propositions puis Connectes/Bar-ferme */
    grid-template-columns: repeat(2, auto);
    gap: 16px 18px;      /* ca respire */
    padding: 18px 20px;
    border-radius: 20px;
    background: rgba(10, 4, 8, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
/* Chaque cellule : anneau + label EN DESSOUS, centres verticalement */
.jb-room-view[data-controller] .jb-draw-overlay .jb-ring-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}
.jb-room-view[data-controller] .jb-draw-overlay .jb-draw-ring {
    width: clamp(92px, 7.4vw, 124px) !important;
    height: clamp(92px, 7.4vw, 124px) !important;
}
.jb-room-view[data-controller] .jb-draw-overlay .jb-draw-ring__time {
    font-size: clamp(19px, 1.7vw, 27px) !important;
}
.jb-room-view[data-controller] .jb-draw-overlay .jb-prop-ring__count {
    font-size: clamp(20px, 1.8vw, 28px) !important;
}
/* Label SOUS l'anneau (sorti du centre -> plus de debordement), largeur bornee a l'anneau */
.jb-room-view[data-controller] .jb-draw-overlay .jb-ring-cell__label {
    font-size: clamp(9px, 0.8vw, 12px) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.72);
    max-width: clamp(92px, 7.4vw, 124px);
}
/* Anneau « Bar ferme dans » : ambre (distinct des autres) + compteur ajuste au format H:MM:SS */
.jb-room-view[data-controller] .jb-draw-overlay .jb-bar-ring__progress { stroke: #f0a830 !important; }
.jb-room-view[data-controller] .jb-draw-overlay .jb-bar-ring__count { color: #f6c667 !important; font-size: clamp(15px, 1.35vw, 21px) !important; }
/* Room terminee : plus d'overlay anneaux (comme le QR overlay ci-dessus) */
.jb-room-view[data-controller][data-room-ended="true"] .jb-draw-overlay { display: none !important; }

/* === Gagnant du tirage : carte centree sur la video (PC). Scope [data-controller]
   = vue PC uniquement (la TV a sa propre version inline). Confettis geres en JS
   (window.__aperoConfetti), couche transparente separee. === */
.jb-room-view[data-controller] .jb-winner-reveal {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 45;
    pointer-events: none;
}
.jb-room-view[data-controller] .jb-winner-reveal[hidden] { display: none; }
.jb-room-view[data-controller] .jb-winner-reveal__card {
    text-align: center;
    padding: 28px 44px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(232,62,107,0.95), rgba(142,90,110,0.92));
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
    animation: jbWinnerPop 0.55s cubic-bezier(0.22,1.2,0.36,1) both;
    max-width: 80%;
}
.jb-room-view[data-controller] .jb-winner-reveal__emojis {
    font-size: 40px; letter-spacing: 6px; margin-bottom: 6px;
    animation: jbWinnerEmojiWobble 1.4s ease-in-out 0.4s 2;
}
.jb-room-view[data-controller] .jb-winner-reveal__label {
    font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.85);
}
.jb-room-view[data-controller] .jb-winner-reveal__name {
    font-size: clamp(30px, 4.5vw, 64px); font-weight: 800; color: #fff;
    line-height: 1.05; margin-top: 6px; text-shadow: 0 3px 18px rgba(0,0,0,0.45);
    word-break: break-word;
}
.jb-room-view[data-controller] .jb-winner-reveal.is-fallback .jb-winner-reveal__card {
    background: linear-gradient(135deg, rgba(60,40,52,0.94), rgba(40,28,36,0.92));
}
.jb-room-view[data-controller] .jb-winner-reveal.is-fallback .jb-winner-reveal__name {
    font-size: clamp(22px, 3vw, 40px);
}
@keyframes jbWinnerPop {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes jbWinnerEmojiWobble {
    0%,100% { transform: rotate(0); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

/* Chat overlay TikTok (bas-gauche) : harmonise wine translucide comme le QR.
   Le contrôleur room_view alimente deja .jb-chat-overlay (target chatOverlay),
   on l'active juste en retirant `hidden` cote template. */
.jb-chat-msg {
    background: rgba(10, 4, 8, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* ============================================================
   Phase 11j — Ecran d'attente : poster de la categorie en fond
   (remplace le vinyle qui tourne). Phase 11j-fix : plein cadre comme
   le player -> meme hauteur definie (100vh - topbar) et 100% de large
   au lieu du cadre 16/9. Le poster (background cover) remplit tout
   l'ecran ; un degrade sombre garde le countdown lisible par dessus.
   ============================================================ */
.jb-countdown.jb-countdown--bg {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.jb-wait-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.jb-wait-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(10, 4, 8, 0.30) 0%,
        rgba(10, 4, 8, 0.55) 55%,
        rgba(10, 4, 8, 0.82) 100%);
}
.jb-countdown--bg .jb-vinyl-stage {
    position: relative;
    z-index: 1;
    padding: 0;
}
/* Le timer ressort mieux avec une ombre portee sur le poster. */
.jb-countdown--bg .jb-wait-timer {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   ECRAN D'ATTENTE « On nettoie les verres » (remplace vinyle + photo).
   .jb-countdown devient une zone plein-ecran (sous topbar) avec le fond
   gradient facon page maintenance ; le bloc .apero-clean (apero-finale.css)
   est centre. Le compteur .jb-wait-timer reste alimente par le controleur.
   ============================================================ */
.jb-countdown {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(232,62,107,0.15), transparent 55%),
        radial-gradient(80% 60% at 90% 100%, rgba(142,90,110,0.22), transparent 60%),
        radial-gradient(60% 50% at 50% 50%, rgba(255,176,0,0.08), transparent 70%),
        var(--pt-bg, #0A0408);
}

/* PC : grand ecran -> on AERE le bloc « On nettoie les verres ». Le badge
   remonte (bloc plus haut, centre = badge plus haut), un espace clair sous le
   badge (marge sticker : le pointillé deborde de 14px), plus d'air entre chaque
   element, et on profite de la place (cercle / titre / compteur plus grands). */
.jb-countdown .apero-clean {
    gap: 26px;
    max-width: 660px;
}
.jb-countdown .apero-clean__pill {
    font-size: 12px;
    padding: 6px 16px;
}
.jb-countdown .apero-clean__sticker {
    width: 150px; height: 150px;
    margin: 18px 0 8px;
}
.jb-countdown .apero-clean__sponge { font-size: 82px; }
.jb-countdown .apero-clean__title { font-size: clamp(46px, 5.6vw, 64px); }
.jb-countdown .apero-clean__sub { font-size: clamp(17px, 2.3vw, 22px); max-width: 520px; }
.jb-countdown .apero-clean__label { font-size: 13px; }
.jb-countdown .apero-clean__timer { font-size: clamp(48px, 9vw, 82px); }