/* Barjo — layouts spécifiques aux écrans (home, party). */

#app { min-height: 100dvh; }

.screen {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
.screen__scroll {
    flex: 1;
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--space-3) var(--space-2)
             calc(env(safe-area-inset-bottom) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ————————————————————————————————————————————————
   Home
   ———————————————————————————————————————————————— */
.home__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding-top: calc(env(safe-area-inset-top) + var(--space-3));
    text-align: center;
}
.home__mark {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--pop-7), var(--color-accent) 45%, var(--pop-1));
    color: #fff;
    font-size: 2.5rem;
    font-weight: 900;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-4deg);
}
.home__title {
    font-size: var(--text-display);
    font-weight: 900;
    letter-spacing: -0.03em;
}
.home__tagline {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-width: 22rem;
}

.stack { display: flex; flex-direction: column; gap: var(--space-2); }

.home__cta { margin-top: var(--space-1); }

/* ————————————————————————————————————————————————
   Party
   ———————————————————————————————————————————————— */
.player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-2);
}
.player-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-0);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-pop),
                border-color var(--dur-fast) ease;
}
.player-card:active { transform: scale(0.96); }
.player-card__name {
    max-width: 100%;
    font-size: var(--text-base);
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Carte « ajouter un joueur » */
.player-card--add {
    border-style: dashed;
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
    justify-content: center;
    min-height: 132px;
}
.player-card--add .player-card__plus {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-accent-strong);
}

/* Éditeur de joueur (contenu du sheet) */
.player-editor__avatar-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.player-editor__photo-actions { display: flex; gap: var(--space-1); }

/* Actions empilées de l'accueil (Nouvelle partie) */
.home__actions { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-1); }

/* ————————————————————————————————————————————————
   Ambiances — les 3 grandes catégories de l'accueil
   Plus grosses que les cartes de jeu : c'est le premier choix de la soirée,
   il se tape sans viser (« à boire », « en groupe », « en voiture »).
   ———————————————————————————————————————————————— */
.mood-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.mood-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 104px;
    padding: var(--space-2);
    border: 2px solid color-mix(in srgb, var(--pop, var(--color-accent)) 45%, transparent);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--pop, var(--color-accent)) 22%, var(--color-surface)) 0%,
                var(--color-surface) 72%);
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-pop),
                border-color var(--dur-fast) ease;
}
.mood-card:active { transform: scale(0.985); }
.mood-card__emoji {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--pop, var(--color-accent));
    box-shadow: var(--shadow-sticker);
    font-size: 2.4rem;
    transform: rotate(-3deg);
}
.mood-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mood-card__title { font-size: var(--text-xl); font-weight: 900; letter-spacing: -0.02em; }
.mood-card__tagline { font-size: var(--text-sm); color: var(--color-text-muted); }
.mood-card__count {
    margin-top: 2px;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--pop, var(--color-accent-strong));
}
.mood-card__chevron { flex: none; font-size: var(--text-2xl); color: var(--color-text-muted); }
/* Le catalogue complet reste là, mais en second rideau. */
.mood-all { align-self: center; margin-top: var(--space-2); }

/* ————————————————————————————————————————————————
   Catalogue de jeux (#/jeux)
   ———————————————————————————————————————————————— */
.game-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.catalogue__intro { color: var(--color-text-muted); }

/* ————————————————————————————————————————————————
   Fiche d'un jeu (#/jeux/:id)
   ———————————————————————————————————————————————— */
.game-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--pop, var(--color-accent)) 14%, var(--color-surface));
    border: 2px solid color-mix(in srgb, var(--pop, var(--color-accent)) 40%, transparent);
}
.game-hero__emoji {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: var(--radius-lg);
    background: var(--pop, var(--color-accent));
    box-shadow: var(--shadow-sticker);
    font-size: 3rem;
    transform: rotate(-3deg);
}
.game-hero__title { font-size: var(--text-2xl); font-weight: 900; letter-spacing: -0.02em; }
.game-hero__family {
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pop, var(--color-accent-strong));
}
.game-hero__tagline { color: var(--color-text-muted); max-width: 24rem; }

.game-cta { margin-top: var(--space-1); }
.game-note {
    padding: var(--space-2);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-align: center;
    font-weight: 600;
}

/* ————————————————————————————————————————————————
   Deck plein écran (moteur de jeu à cartes)
   ———————————————————————————————————————————————— */
.deck {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: radial-gradient(120% 80% at 50% 0%,
                color-mix(in srgb, var(--pop, var(--color-accent)) 30%, var(--color-bg)) 0%,
                var(--color-bg) 62%);
    animation: backdrop-in var(--dur-fast) ease;
}
.deck__bar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: calc(env(safe-area-inset-top) + var(--space-1)) var(--space-2) var(--space-1);
}
.deck__close { background: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.deck__title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deck__count {
    flex: none;
    min-width: 56px;
    text-align: right;
    color: var(--color-text-muted);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.deck__stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-2);
    text-align: center;
    overflow-y: auto;
}
.deck__turn { font-size: var(--text-base); font-weight: 700; color: var(--color-text-muted); }
.deck__turn strong { color: var(--pop, var(--color-accent-strong)); }
.deck__hint { font-size: var(--text-sm); color: var(--color-text-muted); }
.deck__card {
    width: 100%;
    max-width: 30rem;
    min-height: 44dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 3px solid var(--pop, var(--color-accent));
    box-shadow: var(--shadow-sticker);
    animation: card-in var(--dur-med) var(--ease-pop);
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.deck__kicker {
    font-size: var(--text-sm);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pop, var(--color-accent-strong));
}
.deck__card-text { font-size: var(--text-xl); font-weight: 800; line-height: var(--leading-tight); }
.deck__stage--end { justify-content: center; }
.deck__end-emoji { font-size: 3.5rem; }
.deck__end-title { font-size: var(--text-2xl); font-weight: 900; }
.deck__end-text { color: var(--color-text-muted); }
.deck__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
    padding: var(--space-2) var(--space-2) calc(env(safe-area-inset-bottom) + var(--space-2));
}

/* ————————————————————————————————————————————————
   Le fil de la soirée (#/party/:id/soiree) + son teaser sur l'écran de partie
   Le classement qui traverse les jeux. Podium très lisible de loin (le
   téléphone circule, on le lit à bout de bras), détail jeu par jeu en dessous
   pour couper court au « pourquoi il a 3 points, lui ? ».
   ———————————————————————————————————————————————— */
.soiree-title { display: flex; align-items: center; gap: var(--space-1); }

/* — Teaser sur l'écran de partie — */
.soiree-teaser {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    border: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--color-accent) 20%, var(--color-surface)) 0%,
                var(--color-surface) 72%);
    text-align: left;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-pop);
}
.soiree-teaser:active { transform: scale(0.985); }
.soiree-teaser__emoji {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    box-shadow: var(--shadow-sticker);
    font-size: 1.9rem;
    transform: rotate(-3deg);
}
.soiree-teaser__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.soiree-teaser__title { font-size: var(--text-lg); font-weight: 900; letter-spacing: -0.02em; }
.soiree-teaser__lead {
    font-weight: 800;
    color: var(--color-accent-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soiree-teaser__meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.soiree-teaser__chevron { flex: none; font-size: var(--text-2xl); color: var(--color-text-muted); }

/* — Classement cumulé — */
.soiree-crown {
    font-weight: 800;
    color: var(--color-accent-strong);
    margin-bottom: var(--space-1);
}
.soiree-board { display: flex; flex-direction: column; gap: var(--space-1); list-style: none; }
.soiree-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.soiree-row.is-first {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
}
.soiree-row__rank { width: 2rem; flex: none; font-size: var(--text-lg); font-weight: 900; }
.soiree-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soiree-row__name {
    font-size: var(--text-lg);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soiree-row__meta { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 700; }
.soiree-row__pts { flex: none; font-size: var(--text-lg); font-weight: 900; white-space: nowrap; }

/* — Détail jeu par jeu — */
.soiree-run {
    padding: var(--space-2);
    border: 2px solid color-mix(in srgb, var(--pop, var(--color-accent)) 40%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.soiree-run__head { display: flex; align-items: center; gap: var(--space-1); }
.soiree-run__emoji { flex: none; font-size: var(--text-xl); }
.soiree-run__title {
    flex: 1;
    min-width: 0;
    font-weight: 900;
    color: var(--pop, var(--color-accent-strong));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.soiree-run__when { flex: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.soiree-run__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-0);
    margin-top: var(--space-1);
    list-style: none;
}
.soiree-run__row { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.soiree-run__rank { width: 1.5rem; flex: none; color: var(--color-text-muted); font-weight: 800; }
.soiree-run__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Score brut du jeu (lettres, points de barème) — présent pour que le rang
   soit vérifiable, mais discret : ce n'est PAS lui qu'on additionne. */
.soiree-run__raw { flex: none; color: var(--color-text-muted); }
.soiree-run__pts { flex: none; width: 2.5rem; text-align: right; font-weight: 900; }

.soiree-rule { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ————————————————————————————————————————————————
   Éditeur de deck maison (#/decks/:id)
   ———————————————————————————————————————————————— */
/* Aperçu de la carte telle qu'elle apparaîtra dans le catalogue : choisir une
   vignette et une teinte à l'aveugle, c'est choisir deux fois. */
.deck-preview {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 2px solid var(--pop, var(--color-accent));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--pop, var(--color-accent)) 14%, var(--color-surface));
    box-shadow: var(--shadow-sticker);
}
.deck-preview__emoji {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--pop, var(--color-accent)) 26%, var(--color-surface));
    border: 2px solid var(--pop, var(--color-accent));
    font-size: 1.9rem;
}
.deck-preview__title {
    font-size: var(--text-lg);
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-editor__cards { display: flex; flex-direction: column; gap: var(--space-1); }
.deck-editor__card { display: flex; align-items: flex-start; gap: var(--space-1); }
/* Numéro de carte : le repère qu'on cherche quand on relit son paquet. */
.deck-editor__num {
    display: grid;
    place-items: center;
    width: 28px;
    flex: none;
    padding-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-text-muted);
}
.deck-editor__card .btn--icon { flex: none; }
.deck-editor__add { border-style: dashed; }
.deck-editor__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.deck-editor__note {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}