/* ==========================================================================
   CARTE DU JOUEUR — feuille de style
   Mode PAYSAGE : carte à gauche, titre + boutons à droite
   ========================================================================== */

/* ==========================================================================
   ÉCRAN DE CRÉATION (index.html) — carte éditable au centre
   ========================================================================== */

.create-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding: 20px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.5vw, 20px);
    overflow: hidden;
}

.create-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 0;            /* prend la place restante */
    min-width: 0;            /* autorise le shrink */
    max-width: 220px;
}

.create-side--left  { animation: fadeUp 0.5s ease-out backwards; animation-delay: 0.05s; }
.create-side--right {
    animation: fadeUp 0.5s ease-out backwards;
    animation-delay: 0.25s;
    align-items: stretch;
    justify-content: center;
}

.create-title {
    font-family: var(--font-title);
    font-size: clamp(18px, 5vh, 26px);
    color: var(--cream);
    letter-spacing: 2px;
    line-height: 1.1;
    text-transform: uppercase;
}

.create-title em {
    display: block;
    font-style: normal;
    color: var(--green);
    font-size: 0.65em;
    margin-top: 6px;
}

.create-hint {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-body);
    font-size: clamp(10px, 2vh, 12px);
    color: var(--cream-soft);
    opacity: 0.7;
    line-height: 1.45;
}

/* ----- Zone carte + flèches (centre) ----------------------------------- */

.create-card-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 16px);
    flex-shrink: 0;
    /* La carte ne doit jamais dépasser la moitié de l'écran environ */
    max-width: 50vw;
    animation: fadeUp 0.5s ease-out backwards;
    animation-delay: 0.15s;
}

.create-card-zone .arrow {
    flex-shrink: 0;
}

/* ----- Carte éditable -------------------------------------------------- */

.card-wrapper--editable {
    /* Hauteur réduite pour laisser de la place aux colonnes latérales et aux bords */
    height: clamp(170px, 75vh, 290px);
    aspect-ratio: 317 / 343;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

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

/* Bouton continuer dans la colonne droite : garantit qu'il reste à l'intérieur */
.create-side--right .btn {
    width: 100%;
    max-width: 200px;
    align-self: center;
}

/* Curseur pointer + petit hover sur les zones cliquables du SVG */
.card-pill-editable:hover,
#card-pill-hit:hover ~ .card-pill-editable {
    filter: brightness(1.15);
}

.card-name-editable {
    transition: fill 0.15s ease;
}

.card-name-editable:hover {
    fill: var(--green) !important;
}

/* ----- Input overlay pour éditer le nom ------------------------------ */

.name-overlay-input {
    position: fixed;
    z-index: 100;
    background-color: var(--bg-2);
    color: var(--cream);
    font-family: var(--font-title);
    border: 2px solid var(--green);
    outline: none;
    padding: 4px 10px;
    text-align: center;
    letter-spacing: 1px;
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
}

.name-overlay-input[hidden] { display: none; }

/* ==========================================================================
   ÉCRAN CARTE (résumé) — utilisé sur d'autres pages si besoin
   ========================================================================== */

.card-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    padding: 30px 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 60px);
}

/* ----- Carte (côté GAUCHE) -------------------------------------------- */

.card-wrapper {
    height: clamp(200px, 88vh, 320px);
    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 svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes cardEnter {
    0%   { opacity: 0; transform: translateY(20px) rotateY(-25deg) scale(0.85); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0)    rotateY(0)      scale(1);    }
}

#card-avatar-bg   { transition: fill 0.25s ease; }
#card-color-pill  { transition: fill 0.25s ease; }

/* ----- Colonne droite : titre + boutons ------------------------------- */

.card-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
    animation: fadeUp 0.5s ease-out backwards;
    animation-delay: 0.4s;
}

.card-screen__title {
    font-family: var(--font-title);
    font-size: clamp(18px, 5vh, 26px);
    color: var(--cream);
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
}

.card-screen__title em {
    display: block;
    font-style: normal;
    color: var(--green);
    margin-top: 4px;
}

/* ----- Boutons d'action (les styles .btn génériques sont dans style.css) -- */

.card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 180px;
}

/* ----- Petits écrans landscape (iPhone SE etc.) ----------------------- */

@media (orientation: landscape) and (max-height: 380px) {
    .create-screen { padding: 16px 20px; gap: 14px; }
    .create-side { gap: 10px; width: 22vw; }
    .card-wrapper--editable { height: 90vh; }

    .card-screen { padding: 18px 40px; gap: 32px; }
    .card-wrapper { height: 90vh; }
    .card-side { gap: 14px; }
    .card-actions { gap: 8px; }
    .btn { padding: 10px 20px; }
}