/* css/style_secret_proj_portrait.css */
/* Spécial Format PORTRAIT (1080x1920) - Fixe sans scroll */

/* ... (Début du fichier inchangé : BODY, LIVE-CONTAINER, LIVE-HEADER, THEMES, JOUEURS...) ... */
/* Copiez toute la première partie du fichier précédent jusqu'à la section VUE WAIT */

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Segoe UI', sans-serif;
    color: #fff;
}

.live-container {
    width: 100vw; height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
    padding: 20px;
}

/* --- 1. HEADER (Compact) --- */
.live-header {
    flex: 0 0 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #333;
    margin-bottom: 1.5vh;
    position: relative;
    background: #111;
    border-radius: 10px;
}

.cat-badge {
    font-size: 1.8vh; 
    font-weight: 600;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.chrono-box {
    position: absolute;
    right: 20px;
    font-size: 2.2vh;
    font-weight: bold;
    color: #ffb74d;
}
.chrono-box.reveal { color: #f44336; }

/* --- 2. THÈMES --- */
.themes-row {
    flex: 0 0 15%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    margin-bottom: 1.5vh;
    justify-content: center;
}

.theme-card {
    background: #263238;
    border-left: 10px solid #ffca28;
    border-radius: 8px;
    padding: 10px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    overflow: hidden; 
}

.theme-text {
    font-size: 3.5vh;
    line-height: 1.1;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}

.blur-text { filter: blur(10px); opacity: 0.6; }

/* --- 3. GRILLE JOUEURS (Colonne Unique) --- */
.players-grid-wrapper {
    flex: 1;
    overflow: hidden;
}

.players-grid {
    display: grid;
    grid-template-columns: 1fr; 
    grid-auto-rows: 1fr;
    gap: 1.5vh;
    height: 100%;
}

.player-card {
    background: #1e1e1e;
    border-radius: 12px;
    border-left-width: 0;
    position: relative;
    display: flex;
    flex-direction: row; 
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

/* Onglet Vertical (Nom) */
.p-header {
    width: 7vh; 
    padding: 1vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    border-right: 1px solid rgba(0,0,0,0.2);
}

.p-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: left;
    font-size: 2vh;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    white-space: nowrap;
}

/* --- NIVEAUX --- */
.corner-levels {
    position: absolute;
    top: 10px; right: 10px;
    display: flex; gap: 5px; z-index: 10;
}

.level-badge {
    background: #fff; color: #000;
    font-weight: 900; font-size: 3.5vh; 
    width: 5vh; height: 5vh;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    border: 2px solid rgba(0,0,0,0.1);
}

.level-badge.is-hidden { 
    background: #222; color: #888;
    border: 2px solid #555; box-shadow: none;
}

/* Corps */
.p-body {
    flex: 1;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding-right: 7vh;
}

.info-item {
    display: flex;
    flex-direction: column;
    padding: 5px 0;
}

.info-label {
    font-size: 1vh;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 2px;
}

.info-main {
    font-size: 3.2vh; 
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    line-height: 1;
    overflow-wrap: break-word; 
    hyphens: auto;
}

/* Styles Éléments Masqués */
.hidden-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5vh;
    opacity: 0.9;
    padding: 0.5vh 0;
}
.hidden-icon-svg { width: 4vh; height: 4vh; stroke: #ff5252; }
.hidden-text { font-size: 2.5vh; font-weight: bold; text-transform: uppercase; color: #ff5252; letter-spacing: 1px; }

.player-card.is-mc { display: none !important; }

/* VISIBILITÉ */
.vis-indicator, .vis-sub { font-size: 1.3vh; margin-top: 4px; font-weight: 500; line-height: 1.4; }
.vis-indicator { text-align: center; }
.vis-sub { text-align: right; }
.vis-txt-green { color: #4caf50; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.vis-txt-red { color: #f44336; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.vis-name-yes { color: #4caf50; font-weight: bold; margin-right: 6px; }
.vis-name-no { color: #777; text-decoration: line-through; margin-right: 6px; opacity: 0.7; }


/* =========================================
   VUE WAIT (ATTENTE / TEASING) - MODIFIÉE
   ========================================= */

.wait-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Sécurité globale */
}

/* --- HEADER (Fixe) --- */
.wait-header {
    flex: 0 0 auto; /* Hauteur naturelle */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 2vh;
    padding-bottom: 1vh;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wait-subtitle { 
    font-size: 2vh; 
    color: #aaa; 
    text-transform: uppercase; 
    letter-spacing: 3px;
    margin-bottom: 0.5vh;
}

.wait-title-cat { 
    font-size: 4vh; 
    line-height: 1.1; 
    margin: 0; 
    color: #ffca28; 
    text-transform: uppercase; 
    font-weight: 800;
}

/* --- CONTAINER CENTRAL (Flexible mais contraint) --- */
.wait-content-box {
    flex: 1; /* Prend TOUT l'espace disponible restant */
    min-height: 0; /* Important pour que le flex-shrink fonctionne */
    display: flex;
    flex-direction: column;
    gap: 2vh;
    margin-bottom: 2vh;
    overflow: hidden; /* Empêche de pousser les joueurs hors de l'écran */
}

/* BLOC DESCRIPTION */
.desc-wrapper {
    flex: 2; /* Prend 2/3 de l'espace dispo */
    min-height: 0; /* Permet au contenu de réduire */
    display: flex;
    flex-direction: column;
}

.desc-frame {
    flex: 1; /* Remplit le wrapper */
    background: rgba(41, 182, 246, 0.1);
    border-left: 8px solid #29b6f6;
    border-radius: 8px;
    padding: 2vh;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center; /* Centre verticalement */
    overflow: hidden; /* Masque ce qui dépasse avant resize */
}

.desc-text { 
    width: 100%;
    font-size: 6vh; /* Taille MAX de départ (sera réduite par JS) */
    line-height: 1.3; 
    color: #fff; 
    font-weight: 500;
    text-align: left;
    /* Le JS va ajuster le font-size ici */
}

/* BLOC RÔLE */
.role-wrapper {
    flex: 1; /* Prend 1/3 de l'espace dispo */
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #333;
    padding-top: 2vh;
}

.public-role-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.role-content-txt {
    font-size: 5vh; /* Taille MAX de départ */
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
}

/* Labels */
.section-label {
    flex: 0 0 auto;
    font-size: 2vh;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
    margin-bottom: 1vh;
    text-align: left;
    padding-left: 10px;
    font-weight: 600;
}
.role-label-txt {
    flex: 0 0 auto;
    color: #ffca28; 
    font-weight: bold;
    font-size: 2.5vh;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1vh;
}


/* --- JOUEURS (Fixe en bas) --- */
.wait-players {
    flex: 0 0 auto; /* Ne s'écrase pas */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1vh;
}

.players-grid-welcome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vh;
    width: 100%;
}

.player-pill {
    background: #222;
    border-left: 5px solid #777;
    padding: 0.8vh 1.2vh;
    border-radius: 6px;
    font-size: 1.6vh;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}
.p-dot { width: 1.2vh; height: 1.2vh; border-radius: 50%; }

/* --- FOOTER --- */
.wait-footer {
    flex: 0 0 auto;
    background: #111;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    margin-top: 1vh;
}
.cta-text { font-size: 2vh; color: #ccc; }
.cta-link { color: #ffca28; font-weight: bold; font-size: 2.5vh; }

.prog-title { font-size: 5vh; color: #fff; font-weight: bold; margin: 10px 0; }
.prog-date { font-size: 2.5vh; color: #ffca28; }