/* ==========================================================================
   ÉCRAN DE RÉVÉLATION — civil / imposteur
   Tous les sélecteurs sont scopés sur [data-view="reveal"][data-role="..."]
   pour que les couleurs ne contaminent pas les autres vues.
   ========================================================================== */

/* ----- Variables de rôle (fixes : vert/rouge) ------------------------- */

[data-view="reveal"][data-role="civil"] {
    --role-color:       #8bc34a;
    --role-color-deep:  #4a7826;
    --role-grid:        var(--grid);
}

[data-view="reveal"][data-role="imposteur"] {
    --role-color:       #b03737;
    --role-color-deep:  #5a1414;
    --role-grid:        #3a1212;
}

/* Le fond rouge est appliqué sur la VUE elle-même, pas sur le body */
[data-view="reveal"][data-role="imposteur"] {
    background-color: #1a0808;
    background-image:
        linear-gradient(var(--role-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--role-grid) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    transition: background-color 0.6s ease;
}

[data-view="reveal"] {
    transition: background-color 0.6s ease;
}

/* ----- Layout général --------------------------------------------------- */

.reveal-screen {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px 30px 70px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    gap: clamp(14px, 3vw, 30px);
    box-sizing: border-box;
}

/* ----- Badge de rôle (centré tout en haut) ---------------------------- */

.role-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 14px;
    background-color: var(--role-color, var(--green));
    border: 2px solid var(--role-color-deep, var(--green-deep));
    color: var(--bg);
    font-family: var(--font-body);
    font-size: clamp(12px, 2.4vh, 13px);
    letter-spacing: 1px;
    z-index: 10;
    animation: badgePop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.5) backwards;
    animation-delay: 0.1s;
}

.role-badge strong {
    font-weight: bold;
    text-transform: capitalize;
}

@keyframes badgePop {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[data-view="reveal"][data-role="imposteur"] .role-badge {
    background-color: var(--role-color-deep);
    border-color: var(--role-color);
    color: #f0d8d8;
}

/* ----- COLONNES gauche/droite ---------------------------------------- */

.reveal-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 200px;
    align-self: center;
    animation: fadeUp 0.5s ease-out backwards;
}

.reveal-col--left  { animation-delay: 0.2s; justify-self: end; }
.reveal-col--right { animation-delay: 0.3s; justify-self: start; }

.col-title {
    font-family: var(--font-title);
    font-size: clamp(15px, 4vh, 20px);
    color: var(--cream);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.atout-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: clamp(12px, 2.6vh, 14px);
    color: var(--cream);
    margin-bottom: 8px;
}

.atout-card__slash {
    color: var(--role-color, var(--green));
    margin-right: 2px;
}

.atout-card__icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    margin-left: 4px;
}

.atout-card__desc {
    font-family: var(--font-body);
    font-size: clamp(12px, 2.2vh, 14px);
    color: var(--cream-soft);
    line-height: 1.55;
    opacity: 0.85;
}

/* ----- CENTRE : carte ----------------------------------------------- */

.reveal-center {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeUp 0.5s ease-out backwards;
    animation-delay: 0.15s;
}

.card-wrapper--reveal {
    height: clamp(180px, 78vh, 300px);
    aspect-ratio: 317 / 343;
    flex-shrink: 0;
    perspective: 1200px;
    animation: cardEnter 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) backwards;
    animation-delay: 0.2s;
}

.card-wrapper--reveal svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ----- OBJECTIFS ---------------------------------------------------- */

.objectives {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    max-width: 220px;
}

.objectives li {
    display: flex;
    gap: 6px;
    font-family: var(--font-body);
    font-size: clamp(12px, 2.2vh, 14px);
    color: var(--cream);
    line-height: 1.5;
}

.objectives li::before {
    content: "•";
    color: var(--role-color, var(--green));
    font-weight: bold;
    flex-shrink: 0;
    margin-top: -2px;
}

.objectives li strong {
    color: var(--cream);
    font-weight: bold;
    margin-right: 4px;
}

.objectives li.objectives__alert strong {
    color: var(--role-color, var(--green));
}

/* ----- BOUTON PRÊT (en bas à droite) -------------------------------- */

.ready-btn {
    position: absolute;
    bottom: 18px;
    right: 30px;
    padding: 8px 22px;
    font-family: var(--font-body);
    font-size: clamp(12px, 2.4vh, 13px);
    color: var(--cream);
    background-color: #c08123;
    border: 2px solid #5e3c0d;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
    animation: fadeUp 0.4s ease-out backwards;
    animation-delay: 0.45s;
    z-index: 10;
}

.ready-btn::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #5e3c0d;
}

.ready-btn:hover {
    background-color: #d99230;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
}

.ready-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.ready-btn__count { font-weight: bold; }

.ready-btn.is-ready {
    background-color: var(--role-color, var(--green));
    border-color: var(--role-color-deep, var(--green-deep));
    color: var(--bg);
}

/* ----- Petits écrans landscape -------------------------------------- */

@media (orientation: landscape) and (max-height: 380px) {
    .reveal-screen { padding: 40px 20px 60px; gap: 14px; }
    .reveal-col { gap: 6px; max-width: 150px; }
    .objectives { gap: 6px; max-width: 160px; }
    .card-wrapper--reveal { height: 80vh; }
    .ready-btn { bottom: 12px; right: 18px; padding: 6px 16px; }
}