/* ============== Espace joueur LRSY ============== */

/* Fenêtre dynamique (même style que les encadrés de score) */
#auth-overlay {
    position: absolute;
    inset: auto;
    left: var(--fit-left, 0px);
    top: var(--fit-top, 0px);
    width: calc(100 * var(--fit-vw, 1vw));
    height: calc(100 * var(--fit-vh, 1vh));
    background: rgba(0, 0, 0, .7);
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(3 * var(--fit-vh, 1vh)) 4%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#auth-overlay.visible { display: flex; }
/* Sélecteur de personnage : pas de voile sombre, et le fond reste cliquable
   (bouton retour, drapeaux des régions, blasons des départements). */
#auth-overlay.transparent {
    background: #fff url('Fond.webp') center/cover no-repeat;
    pointer-events: none;
}
#auth-overlay.transparent .auth-card { pointer-events: auto; }

.auth-card {
    background: rgba(255, 255, 255, .97);
    color: #cc0000;
    font-weight: bold;
    text-align: center;
    width: 100%;
    max-width: 92%;
    padding: 3vh 2.5vh;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
    font-family: inherit;
    max-height: 94vh;
    overflow-y: auto;
}
.auth-card h2 {
    margin: 0 0 1.6vh;
    font-size: 2.2vh;
    color: #cc0000;
}
.auth-card .auth-sub {
    color: #4a3318;
    font-size: 1.4vh;
    font-weight: 600;
    margin-bottom: 2vh;
}
.auth-card label {
    display: block;
    text-align: left;
    font-size: 1.4vh;
    color: #4a3318;
    margin: 1.1vh 0 .4vh;
    font-weight: 700;
}
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    width: 100%;
    border: 1.5px solid #4a3318;
    border-radius: 8px;
    padding: 1.1vh 1.2vh;
    font-size: 1.7vh;
    background: #fff;
    color: #000;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    font-weight: 500;
    position: static;
    transform: none;
    height: auto;
}
.auth-card input:focus { border-color: #cc0000; }

.auth-card .auth-row {
    display: flex;
    align-items: center;
    gap: .8vh;
    font-size: 1.3vh;
    color: #4a3318;
    margin: 1.4vh 0 .4vh;
    font-weight: 600;
    text-align: left;
}
.auth-card .auth-row input[type="checkbox"] {
    width: 2vh; height: 2vh;
    margin: 0;
}

.auth-btn {
    display: inline-block;
    background: #cc0000;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 1.3vh 2vh;
    font-size: 1.7vh;
    font-weight: bold;
    cursor: pointer;
    margin-top: 1.8vh;
    width: 100%;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.auth-btn:disabled { opacity: .55; cursor: not-allowed; }
.auth-btn.secondary {
    background: #fff;
    color: #cc0000;
    border: 1.5px solid #cc0000;
}

.auth-link {
    display: block;
    margin-top: 1.4vh;
    color: #4a3318;
    font-size: 1.45vh;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 600;
    width: 100%;
}
.auth-link.signup { color: #cc0000; margin-top: 2.2vh; }

.auth-error {
    color: #cc0000;
    background: #fff3f3;
    border: 1px solid #cc0000;
    border-radius: 6px;
    padding: .8vh 1vh;
    margin-top: 1.2vh;
    font-size: 1.35vh;
    font-weight: 600;
    display: none;
    text-align: left;
}
.auth-info {
    color: #1a6a1a;
    background: #f1faf1;
    border: 1px solid #1a6a1a;
    border-radius: 6px;
    padding: .8vh 1vh;
    margin-top: 1.2vh;
    font-size: 1.35vh;
    font-weight: 600;
    display: none;
    text-align: left;
}

/* ===== Grille des personnages ===== */
.char-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2vh .6vh;
    margin-top: 1.4vh;
}
.char-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.char-medallion {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #efe7d7 center/cover no-repeat;
    border: 2px solid #4a3318;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    color: #4a3318; font-size: 1.4vh; text-align: center;
    overflow: hidden;
}
.char-name {
    margin-top: .4vh;
    font-size: 1.05vh;
    color: #4a3318;
    font-weight: 700;
    text-align: center;
    width: 100%;
    line-height: 1.1;
    /* Force aucun mot à dépasser la largeur du médaillon */
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Animation zoom personnage */
#char-zoom-overlay {
    position: absolute;
    inset: auto;
    left: var(--fit-left, 0px);
    top: var(--fit-top, 0px);
    width: calc(100 * var(--fit-vw, 1vw));
    height: calc(100 * var(--fit-vh, 1vh));
    background: rgba(0,0,0,.55);
    z-index: 4500;
    display: none;
    pointer-events: auto;
}
#char-zoom-overlay.visible { display: block; }
.char-zoom-img {
    position: absolute;
    border-radius: 50%;
    background: #efe7d7 center/cover no-repeat;
    border: 3px solid #4a3318;
    box-shadow: 0 6px 30px rgba(0,0,0,.6);
    transition: top .45s cubic-bezier(.7,.05,.3,1),
                left .45s cubic-bezier(.7,.05,.3,1),
                width .45s cubic-bezier(.7,.05,.3,1),
                height .45s cubic-bezier(.7,.05,.3,1);
    display: flex; align-items: center; justify-content: center;
    color: #4a3318; font-weight: bold; font-size: 3vh; text-align: center;
    overflow: hidden;
}
.char-go-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #cc0000;
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 1.6vh 2.6vh;
    font-size: 1.9vh;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(0,0,0,.5);
    font-family: inherit;
    display: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 4600;
}
.char-go-btn.visible { display: block; }

/* ===== Médaillon joueur en haut à droite (même taille que i / ?) ===== */
#player-medallion {
    position: absolute;
    top: calc(var(--fit-top, 0px) + 1.5 * var(--fit-vh, 1vh));
    right: calc(var(--fit-right, 0px) + 3 * var(--fit-vw, 1vw));
    left: auto;
    width: calc(14 * var(--fit-vw, 1vw));
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    z-index: 3500;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#player-medallion img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#player-medallion.visible { display: flex; }
/* Plus de décalage : il est à droite, le bouton retour est à gauche */
#player-medallion.shifted { right: calc(var(--fit-right, 0px) + 3 * var(--fit-vw, 1vw)); left: auto; }

/* ===== Boutons reprise ===== */
.resume-actions {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    margin-top: 1.8vh;
}
.resume-game-name {
    color: #4a3318;
    font-size: 1.6vh;
    margin: 1vh 0 .6vh;
    font-weight: 700;
}

/* (encadré username retiré : input identique à email/mot de passe) */


/* ===== Page de sélection des personnages ===== */
.auth-card.fond {
    background: transparent;
    color: #4a3318;
    box-shadow: none;
}
.auth-card.fond h2 {
    color: #4a3318;
    font-size: 1.85vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auth-card.fond .char-grid { gap: 1.6vh .8vh; }

/* Avatar sans médaillon : juste l'image */
.char-avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    overflow: hidden;
}
.char-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-card.fond .char-name {
    color: #4a3318;
    font-weight: 800;
    text-shadow: none;
}

/* Zoom personnage : pas de cercle, juste l'image */
.char-zoom-img {
    border-radius: 0 !important;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    box-shadow: none !important;
}