/* =========================================================
   AperoRoom — Override couleurs page Room (.jb-room-view)
   ───────────────────────────────────────────────────────
   On ne touche PAS a la structure (player, sidebar, draw card,
   vinyl spin, etc.) : on reassigne uniquement les variables
   --jb-* de app.css aux valeurs AperoRoom Rose Garden + on
   ajuste les couleurs hardcodees qui restent.
   ========================================================= */

.jb-room-view {
    /* ─── Backgrounds rose nuit + halos ─── */
    --jb-bg:           #0A0408;
    --jb-bg-elevated:  #16091F;
    --jb-bg-card:      rgba(45, 15, 31, 0.55);
    --jb-bg-card-2:    rgba(58, 22, 42, 0.65);

    /* ─── Textes rose clair ─── */
    --jb-text:         #FFD6DC;
    --jb-text-muted:   rgba(255, 214, 220, 0.62);
    --jb-text-dim:     rgba(255, 214, 220, 0.32);

    /* ─── Accents Rose Garden ─── */
    --jb-accent:       #E83E6B;   /* rose principal */
    --jb-accent-hot:   #FF5C8A;   /* rose vif */
    --jb-accent-2:     #FFB000;   /* or */
    --jb-success:      #50C878;
    --jb-danger:       #FF5252;
    --jb-warning:      #FFB000;

    /* ─── Bordures ─── */
    --jb-border:        rgba(255, 214, 220, 0.12);
    --jb-border-strong: rgba(232, 62, 107, 0.30);

    /* ─── Fonts : on garde Inter pour body, mais Space Grotesk → Instrument Serif pour display ─── */
    --jb-font-display: 'Instrument Serif', 'Space Grotesk', serif;
    --jb-font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* Couleur de surface globale du .jb-room-view */
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(232,62,107,0.10), transparent 55%),
        radial-gradient(80% 60% at 90% 100%, rgba(142,90,110,0.18), transparent 60%),
        radial-gradient(60% 50% at 50% 50%, rgba(255,176,0,0.05), transparent 70%),
        #0A0408;
    color: var(--jb-text);
}

/* ─── Topbar Room : on l'aligne sur le style apero ─── */
.jb-room-view__topbar {
    background: rgba(22, 9, 16, 0.78);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid var(--jb-border);
}

/* Brand "JukeBoxLive" — on n'efface pas mais on lui donne le style apero
   (le remplacement par le logo officiel se fera en Phase 7 vocab) */
.jb-room-view .jb-brand {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--jb-text);
}
.jb-room-view .jb-brand__accent { color: var(--jb-accent); }
.jb-room-view .jb-brand__icon { filter: hue-rotate(-30deg); }

/* Titre H1 de la room */
.jb-room-view__title h1 {
    font-family: var(--jb-font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--jb-text);
}

/* Pills (catégorie, mode) */
.jb-room-view .jb-pill {
    background: rgba(232, 62, 107, 0.10);
    border: 1px solid rgba(232, 62, 107, 0.25);
    color: var(--jb-text);
}

/* Live pill — accent rose pulsant */
.jb-room-view .jb-live-pill {
    background: linear-gradient(135deg, #E83E6B, #C2185B);
    color: #fff;
    box-shadow: 0 0 18px rgba(232, 62, 107, 0.55);
}

/* Credits pill → "glaçons" (texte deja modifie en Phase 7) */
.jb-room-view .jb-credits-pill {
    background: linear-gradient(135deg, rgba(255,176,0,0.18), rgba(232,62,107,0.10));
    border: 1px solid rgba(255, 176, 0, 0.35);
    color: #FFB000;
    font-family: var(--jb-font-mono);
    font-weight: 700;
}

/* Compte a rebours "Se termine dans" */
.jb-room-view .jb-room-remaining {
    background: rgba(232, 62, 107, 0.08);
    border: 1px solid rgba(232, 62, 107, 0.25);
}
.jb-room-view .jb-room-remaining__value {
    color: #FFB000;
    font-family: var(--jb-font-mono);
}

/* ─── Vinyl spin attente : on remet l'accent rose au lieu du rose+bleu original ─── */
.jb-room-view .jb-vinyl-text text { fill: var(--jb-text); }
.jb-room-view .jb-wait-timer {
    font-family: var(--jb-font-display);
    font-style: italic;
    color: #FFD6DC;
    text-shadow: 0 0 30px rgba(232, 62, 107, 0.45);
}
.jb-room-view .jb-wait-tease { font-style: italic; }

/* ─── Sidebar cards / draw card ─── */
.jb-room-view .jb-sidebar-card {
    background: var(--jb-bg-card);
    border: 1px solid var(--jb-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Draw ring progress — couleur rose accent */
.jb-room-view .jb-draw-ring__progress { stroke: var(--jb-accent); }
.jb-room-view .jb-draw-ring__bg { stroke: rgba(255, 214, 220, 0.08); }
.jb-room-view .jb-draw-ring__time {
    color: var(--jb-text);
    font-family: var(--jb-font-mono);
}

/* ─── Boutons primary partout dans .jb-room-view ─── */
.jb-room-view .jb-btn--primary {
    background: linear-gradient(135deg, #E83E6B, #C2185B);
    color: #fff;
    box-shadow: 0 6px 22px rgba(232, 62, 107, 0.35);
}
.jb-room-view .jb-btn--primary:hover {
    box-shadow: 0 10px 30px rgba(232, 62, 107, 0.50);
    transform: translateY(-1px);
}
.jb-room-view .jb-btn--secondary {
    background: rgba(255, 176, 0, 0.10);
    border: 1px solid rgba(255, 176, 0, 0.35);
    color: #FFB000;
}
.jb-room-view .jb-btn--ghost {
    border: 1px solid var(--jb-border);
    color: var(--jb-text);
    background: transparent;
}
.jb-room-view .jb-btn--ghost:hover {
    background: rgba(232, 62, 107, 0.08);
    border-color: rgba(232, 62, 107, 0.4);
}

/* ─── Bouton Cast (Chromecast) ─── */
.jb-room-view .jb-cast-btn {
    background: rgba(22, 9, 16, 0.78);
    border: 1px solid var(--jb-border);
    color: var(--jb-text);
}
.jb-room-view .jb-cast-btn.is-unavailable { opacity: 0.45; }
.jb-room-view .jb-cast-btn:not(.is-unavailable):hover {
    border-color: rgba(232, 62, 107, 0.45);
    background: rgba(232, 62, 107, 0.10);
}

/* ─── Equalizer (jb-eq) couleur accent rose ─── */
.jb-room-view .jb-eq { color: var(--jb-accent); }

/* ─── Room ended / duplicate blocks ─── */
.jb-room-view .jb-room-ended {
    background: var(--jb-bg-card);
    border: 1px solid var(--jb-border);
}
.jb-room-view .jb-room-ended h2 {
    font-family: var(--jb-font-display);
    font-style: italic;
    color: var(--jb-text);
}

/* ─── Cast overlay (En lecture sur ta TV) ─── */
.jb-room-view .jb-cast-overlay {
    background: rgba(10, 4, 8, 0.92);
}
.jb-room-view .jb-cast-overlay h2 {
    font-family: var(--jb-font-display);
    font-style: italic;
    color: var(--jb-text);
}

/* ─── Play overlay (gros bouton "Démarrer le live") ─── */
.jb-room-view .jb-play-overlay {
    background: rgba(10, 4, 8, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.jb-room-view .jb-play-overlay__btn {
    background: linear-gradient(135deg, rgba(232,62,107,0.25), rgba(142,90,110,0.18));
    border: 2px solid rgba(232, 62, 107, 0.55);
    color: var(--jb-text);
    box-shadow: 0 12px 40px rgba(232, 62, 107, 0.30);
}
.jb-room-view .jb-play-overlay__btn:hover {
    background: linear-gradient(135deg, rgba(232,62,107,0.40), rgba(232,62,107,0.20));
    transform: scale(1.02);
}
.jb-room-view .jb-play-overlay__label {
    font-family: var(--jb-font-display);
    font-style: italic;
}

/* ─── Sound toggle ─── */
.jb-room-view .jb-sound-toggle {
    background: rgba(255, 176, 0, 0.18);
    border: 1px solid rgba(255, 176, 0, 0.45);
    color: #FFB000;
}

/* ─── QR toggle haut-droit du player ─── */
.jb-room-view .jb-qr-toggle {
    background: rgba(22, 9, 16, 0.78);
    border: 1px solid var(--jb-border);
    backdrop-filter: blur(10px);
    color: var(--jb-text);
}
.jb-room-view .jb-qr-toggle:hover {
    border-color: rgba(232, 62, 107, 0.45);
    background: rgba(232, 62, 107, 0.12);
}

/* ─── Force text-shadow sur titres pour pop sur fond rose ─── */
.jb-room-view h1, .jb-room-view h2 {
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
}

/* ─── Partage de l'invitation (sous le QR de la carte Connectés) ─── */
.jb-room-view .jb-share {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
}
.jb-room-view .jb-share-invite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #E83E6B, #ff7aa2);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(232, 62, 107, 0.35);
    transition: transform .12s ease, box-shadow .12s ease;
}
.jb-room-view .jb-share-invite::before { content: "🔗"; }
.jb-room-view .jb-share-invite.is-copied { background: linear-gradient(135deg, #2e9e5b, #46c46f); box-shadow: 0 6px 18px rgba(46, 158, 91, 0.35); }
.jb-room-view .jb-share-invite.is-copied::before { content: "✓"; }
.jb-room-view .jb-share-invite:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232, 62, 107, 0.45);
}
.jb-room-view .jb-share-download {
    text-align: center;
    font-size: 0.82rem;
    color: var(--jb-text-dim, #cdb4bd);
    text-decoration: none;
    opacity: 0.85;
}
.jb-room-view .jb-share-download:hover { color: #FFB000; opacity: 1; }

/* ─── Partage dans l'overlay QR (haut-droite, visible dès la préparation) ─── */
.jb-room-view .jb-qr-overlay__share { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; pointer-events: auto; }
.jb-room-view .jb-qr-overlay__share .jb-share-invite { width: 100%; padding: 9px 10px; font-size: 0.8rem; border-radius: 10px; line-height: 1.2; text-align: center; }
.jb-room-view .jb-qr-overlay__share .jb-share-download { font-size: 0.72rem; text-align: center; margin-top: 2px; }