* {
    box-sizing: border-box;
}

@view-transition {
    navigation: auto;
}

/*
 * VT-2 — famille Auth.
 * Les pages index/login/register/start/game_pending restent des documents
 * FastAPI/Jinja classiques. Le panneau principal partage le même nom de
 * transition de contenu que les pages gameplay pour une continuité progressive.
 */
.auth-card {
    view-transition-name: astrion-content;
}

::view-transition-old(astrion-content) {
    animation: 140ms ease-out both astrion-auth-content-out;
}

::view-transition-new(astrion-content) {
    animation: 180ms ease-out both astrion-auth-content-in;
}

@keyframes astrion-auth-content-out {
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes astrion-auth-content-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(root),
    ::view-transition-group(astrion-content),
    ::view-transition-old(astrion-content),
    ::view-transition-new(astrion-content) {
        animation-duration: 0.001ms;
        animation-delay: 0ms;
    }
}

:root {
    color-scheme: dark;
    --gold: #d7ab58;
    --gold-strong: #efc674;
    --panel: #071521;
    --panel-border: rgba(218, 177, 97, 0.62);
    --text: #f4f6f8;
    --muted: #b5bec8;
    --field: rgba(4, 13, 22, 0.94);
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background-color: #020914;
}

.auth-page {
    min-height: 100vh;
    background:
        linear-gradient(rgba(2, 8, 16, 0.06), rgba(2, 8, 16, 0.20)),
        url("/static/images/guiro-auth-background.png") center top / cover no-repeat;
    background-attachment: scroll;
}

.auth-shell {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding:
        clamp(17rem, 31vh, 20rem)
        1rem
        4rem;
}

/*
 * Le grand logo GUIRO grisé et le slogan font partie du visuel de fond.
 * Aucun second logo HTML n'est superposé : on conserve une seule identité.
 */

.auth-card {
    position: relative;
    z-index: 1;
    width: min(94vw, 590px);
    padding: clamp(1.6rem, 4vw, 2.8rem);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 40, 0.995),
            rgba(3, 14, 23, 0.995)
        );
    box-shadow:
        0 28px 76px rgba(0, 0, 0, 0.72),
        0 0 45px rgba(2, 9, 18, 0.78),
        inset 0 1px rgba(255, 255, 255, 0.035);
}



/*
 * Recalage visuel V3 :
 * le panneau HTML recouvre exactement la zone du cadre présent dans la maquette
 * de fond. Il est volontairement opaque pour qu'aucun ancien champ/cadre ne
 * transparaisse dessous.
 */
.auth-shell-entry .auth-card {
    min-height: 620px;
    margin-top: 100px;
    transform: translateX(-30px);
    background: #071722;
    box-shadow:
        0 30px 82px rgba(0, 0, 0, 0.78),
        inset 0 1px rgba(255, 255, 255, 0.035);
}

/* Connexion : panneau un peu moins haut, mais toujours assez grand pour masquer
   complètement le cadre visuel du fond. */
.auth-shell-entry .auth-card[aria-labelledby="login-title"] {
    min-height: 590px;
}

/*
 * Une carte plus large et quasi opaque masque les anciens éléments décoratifs
 * intégrés au fond derrière la zone d'authentification.
 */
.start-card {
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.auth-shell-start .start-card {
    margin-top: 100px;
    transform: translateX(-30px);
}

.auth-emblem {
    width: 58px;
    height: 58px;
    margin: 0 auto 1.2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(239, 198, 116, 0.68);
    border-radius: 50%;
    color: var(--gold-strong);
    font-size: 2rem;
    box-shadow: 0 0 25px rgba(215, 171, 88, 0.18);
}

.auth-card h1 {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
}

.auth-subtitle {
    max-width: 540px;
    margin: 0.7rem auto 1.7rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.5;
}

.auth-form {
    display: grid;
    gap: 0.62rem;
}

.auth-form label {
    color: #d3dae1;
    font-size: 0.88rem;
}

.auth-form input {
    width: 100%;
    min-height: 48px;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(160, 178, 193, 0.22);
    border-radius: 7px;
    outline: none;
    background: var(--field);
    color: #fff;
    font: inherit;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.auth-form input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(215, 171, 88, 0.12);
}

.primary-button,
.secondary-button {
    min-height: 49px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
}

.primary-button {
    width: 100%;
    margin-top: 0.8rem;
    border: 1px solid #ddb25f;
    background: linear-gradient(#b58b40, #7e5b25);
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.primary-button:hover {
    background: linear-gradient(#c69b4c, #906b2c);
}

.secondary-button {
    width: 100%;
    border: 1px solid rgba(213, 221, 228, 0.27);
    background: rgba(5, 14, 23, 0.78);
    color: #edf1f4;
}

.secondary-button:hover {
    border-color: var(--gold);
    color: var(--gold-strong);
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.4rem 0;
    color: #87919a;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(167, 179, 188, 0.2);
}

.auth-features {
    margin-top: 1.45rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(167, 179, 188, 0.13);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.3rem;
    color: #9ba6af;
    font-size: 0.76rem;
}

.auth-features span::before {
    content: "✦ ";
    color: var(--gold);
}

.auth-error {
    margin: -0.5rem 0 1rem;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(255, 119, 119, 0.42);
    border-radius: 7px;
    background: rgba(107, 23, 27, 0.72);
    color: #ffd4d4;
    font-size: 0.9rem;
}

.start-action-form {
    width: min(100%, 360px);
    margin: 0 auto;
}

.start-primary {
    width: min(100%, 360px);
    margin: 0.4rem auto 0;
}

.start-separator {
    margin-top: 1.8rem;
    margin-bottom: 1rem;
}

.start-features {
    margin-top: 0;
    padding-top: 1rem;
}

.start-logout-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.8rem;
    padding-top: 0.4rem;
}

.start-logout-wrap form {
    width: min(100%, 260px);
}

.start-logout {
    width: 100%;
}

@media (max-width: 900px) {
    .auth-shell {
        padding-top: clamp(15rem, 29vh, 18rem);
    }
}

@media (max-width: 650px) {
    .auth-page {
        background-position: center top;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-color: #020914;
    }

    .auth-shell {
        padding:
            clamp(12.5rem, 27vh, 15rem)
            0.75rem
            2.5rem;
    }

    .auth-card {
        width: min(96vw, 620px);
        padding: 1.4rem;
    }

    .auth-shell-entry .auth-card {
        min-height: 0;
    }

    .start-card {
        min-height: 0;
    }

    .auth-features {
        gap: 0.55rem 0.9rem;
    }
}

.account-card {
    width: min(94vw, 640px);
}

.account-data {
    display: grid;
    gap: 12px;
    margin: 1.4rem 0 1.2rem;
}

.account-data > div {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(215, 171, 88, 0.22);
    border-radius: 10px;
    background: rgba(2, 12, 20, 0.52);
}

.account-data span {
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.account-data strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.account-actions {
    display: grid;
    gap: 10px;
}

.account-actions .primary-button,
.account-actions .secondary-button {
    width: 100%;
    text-align: center;
}

/* ============================================================
   MOBILE-1A — Auth / accueil téléphone
   Neutralise les offsets desktop et recadre le visuel d'entrée.
   ============================================================ */
@media (max-width: 640px) {
    .auth-page {
        overflow-x: hidden;
        background-color: #020914;
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .auth-shell,
    .auth-shell-entry,
    .auth-shell-start {
        width: 100%;
        min-height: 100dvh;
        padding:
            clamp(11rem, 24vh, 13.5rem)
            12px
            28px;
        overflow-x: clip;
    }

    .auth-card,
    .account-card,
    .start-card {
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        padding: 18px 16px;
        border-radius: 12px;
    }

    .auth-shell-entry .auth-card,
    .auth-shell-start .start-card {
        min-height: 0;
        margin-top: 0;
        transform: none;
    }

    .auth-shell-entry .auth-card[aria-labelledby="login-title"] {
        min-height: 0;
    }

    .auth-emblem {
        width: 50px;
        height: 50px;
        margin-bottom: 14px;
        font-size: 1.65rem;
    }

    .auth-card h1 {
        font-size: clamp(1.05rem, 5.6vw, 1.35rem);
        line-height: 1.2;
        letter-spacing: .06em;
    }

    .auth-subtitle {
        margin: 8px auto 18px;
        font-size: .96rem;
        line-height: 1.4;
    }

    .auth-form {
        gap: 8px;
    }

    .auth-form label {
        font-size: .84rem;
    }

    .auth-form input {
        min-height: 52px;
        padding: 12px 13px;
        font-size: 16px;
        border-radius: 8px;
    }

    .primary-button,
    .secondary-button {
        min-height: 52px;
        font-size: .82rem;
        letter-spacing: .055em;
    }

    .auth-separator {
        margin: 18px 0;
        gap: 10px;
        font-size: .68rem;
    }

    .auth-features {
        margin-top: 18px;
        padding-top: 16px;
        gap: 7px 12px;
        font-size: .69rem;
        text-align: center;
    }

    .start-action-form,
    .start-primary,
    .start-logout-wrap form {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 390px) {
    .auth-shell,
    .auth-shell-entry,
    .auth-shell-start {
        padding-top: clamp(9.5rem, 22vh, 11.5rem);
    }

    .auth-card,
    .account-card,
    .start-card {
        padding-inline: 14px;
    }

    .auth-features {
        gap: 6px 9px;
        font-size: .66rem;
    }
}

/* ============================================================
   MOBILE-1B — Page d'accueil "/" téléphone
   Le visuel desktop est ajusté à la largeur du téléphone afin
   d'éviter le logo surdimensionné/coupé en affichage portrait.
   ============================================================ */
@media (max-width: 640px) {
    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) {
        background-position: center top !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-color: #020914 !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        padding-top: clamp(11.5rem, 48vw, 13.5rem) !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-card {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        padding-top: clamp(10rem, 46vw, 12rem) !important;
    }
}

/* ============================================================
   MOBILE-1C — Accueil téléphone compact
   Réduit la hauteur du formulaire pour rendre l'ensemble de la
   carte (dont "Se connecter") visible plus tôt sur petits écrans.
   ============================================================ */
@media (max-width: 640px) {
    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        padding-top: clamp(10.25rem, 43vw, 12rem) !important;
        padding-bottom: 20px !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-card {
        padding: 14px 14px 16px !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-emblem {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
        font-size: 1.45rem !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) h1 {
        font-size: clamp(.98rem, 5vw, 1.18rem) !important;
        line-height: 1.15 !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-subtitle {
        margin: 6px auto 12px !important;
        font-size: .88rem !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-form {
        gap: 5px !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-form label {
        font-size: .78rem !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-form input {
        min-height: 44px !important;
        padding: 9px 11px !important;
        font-size: 16px !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .primary-button,
    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .secondary-button {
        min-height: 46px !important;
        font-size: .78rem !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .primary-button {
        margin-top: 6px !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-separator {
        margin: 12px 0 !important;
        font-size: .64rem !important;
    }

    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-features {
        margin-top: 12px !important;
        padding-top: 10px !important;
        gap: 5px 8px !important;
        font-size: .62rem !important;
    }
}

@media (max-width: 390px) {
    body.auth-page:has(.auth-shell-entry .auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        padding-top: clamp(9rem, 41vw, 10.5rem) !important;
    }
}

/* ============================================================
   MOBILE-1E — Inscription / erreur mobile
   Aligne /register sur le rendu mobile validé de la page "/".
   ============================================================ */
@media (max-width: 640px) {
    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) {
        overflow-x: hidden;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-color: #020914 !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        width: 100%;
        min-height: 100dvh;
        padding:
            clamp(10.25rem, 43vw, 12rem)
            12px
            20px !important;
        overflow-x: clip;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-card {
        width: 100% !important;
        max-width: 520px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 14px 14px 16px !important;
        transform: none !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-emblem {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 10px !important;
        font-size: 1.45rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) h1 {
        font-size: clamp(.98rem, 5vw, 1.18rem) !important;
        line-height: 1.15 !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-subtitle {
        margin: 6px auto 12px !important;
        font-size: .88rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-error {
        margin: 0 0 12px !important;
        padding: 10px 12px !important;
        font-size: .82rem !important;
        line-height: 1.35 !important;
        border-radius: 8px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-form {
        gap: 5px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-form label {
        font-size: .78rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-form input {
        min-height: 44px !important;
        padding: 9px 11px !important;
        font-size: 16px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .primary-button,
    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .secondary-button {
        min-height: 46px !important;
        font-size: .78rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .primary-button {
        margin-top: 6px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-separator {
        margin: 12px 0 !important;
        font-size: .64rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-features {
        margin-top: 12px !important;
        padding-top: 10px !important;
        gap: 5px 8px !important;
        font-size: .62rem !important;
    }
}

@media (max-width: 390px) {
    body.auth-page:has(.auth-card[aria-labelledby="register-title"]) .auth-shell-entry {
        padding-top: clamp(9rem, 41vw, 10.5rem) !important;
    }
}

/* ============================================================
   MOBILE-1D — Connexion + démarrage téléphone
   Aligne /login et /start sur le cadrage mobile validé de "/".
   ============================================================ */
@media (max-width: 640px) {
    body.auth-page:has(.auth-card[aria-labelledby="login-title"]),
    body.auth-page:has(.auth-shell-start .start-card) {
        overflow-x: hidden;
        background-position: center top !important;
        background-size: 100% auto !important;
        background-repeat: no-repeat !important;
        background-color: #020914 !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-shell-entry,
    body.auth-page:has(.auth-shell-start .start-card) .auth-shell-start {
        width: 100%;
        min-height: 100dvh;
        padding:
            clamp(10.25rem, 43vw, 12rem)
            12px
            20px !important;
        overflow-x: clip;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-card,
    body.auth-page:has(.auth-shell-start .start-card) .start-card {
        width: 100% !important;
        max-width: 520px !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 16px 14px !important;
        transform: none !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-emblem,
    body.auth-page:has(.auth-shell-start .start-card) .auth-emblem {
        width: 46px !important;
        height: 46px !important;
        margin-bottom: 10px !important;
        font-size: 1.5rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) h1,
    body.auth-page:has(.auth-shell-start .start-card) h1 {
        font-size: clamp(1rem, 5vw, 1.2rem) !important;
        line-height: 1.16 !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-subtitle,
    body.auth-page:has(.auth-shell-start .start-card) .auth-subtitle {
        margin: 7px auto 14px !important;
        font-size: .9rem !important;
        line-height: 1.4 !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-form {
        gap: 6px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-form input {
        min-height: 46px !important;
        padding: 9px 11px !important;
        font-size: 16px !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .primary-button,
    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .secondary-button,
    body.auth-page:has(.auth-shell-start .start-card) .primary-button,
    body.auth-page:has(.auth-shell-start .start-card) .secondary-button {
        min-height: 48px !important;
        font-size: .79rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-separator,
    body.auth-page:has(.auth-shell-start .start-card) .auth-separator {
        margin: 13px 0 !important;
        font-size: .65rem !important;
    }

    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-features,
    body.auth-page:has(.auth-shell-start .start-card) .auth-features {
        margin-top: 12px !important;
        padding-top: 10px !important;
        gap: 5px 9px !important;
        font-size: .63rem !important;
    }

    body.auth-page:has(.auth-shell-start .start-card) .start-action-form,
    body.auth-page:has(.auth-shell-start .start-card) .start-primary,
    body.auth-page:has(.auth-shell-start .start-card) .start-logout-wrap form {
        width: 100% !important;
        max-width: none !important;
    }

    body.auth-page:has(.auth-shell-start .start-card) .start-logout-wrap {
        margin-top: 14px !important;
    }
}

@media (max-width: 390px) {
    body.auth-page:has(.auth-card[aria-labelledby="login-title"]) .auth-shell-entry,
    body.auth-page:has(.auth-shell-start .start-card) .auth-shell-start {
        padding-top: clamp(9rem, 41vw, 10.5rem) !important;
    }
}