/* Minijeux de la Loutre — palette hub "loutre au bord de la rivière la nuit".
 * Bleu nuit profond comme fond + vert sapin comme accent : ambiance terrier au bord de l'eau.
 * Surcharge des tokens partagés (shared/ui/tokens.css ET shared/auth/styles.css). */
:root {
    /* === Palette générale du hub === */
    --mj-color-accent:       #7a9e3f;   /* vert sapin */
    --mj-color-accent-hover: #8eb44d;
    --mj-color-accent-dim:   #5e7c30;
    --mj-color-bg:           #0a1b2e;   /* bleu nuit rivière */
    --mj-color-bg-elevated:  #102640;   /* léger relevé pour cartes/tuiles */
    --mj-color-surface:      #16314f;   /* hover/focus */
    --mj-color-border:       #1d3f63;
    --mj-color-border-soft:  rgba(255, 255, 255, 0.06);
    --mj-color-text:         #e8edf3;
    --mj-color-text-soft:    #9fb1c7;
    --mj-color-text-dim:     #6d8093;

    /* === Surcharge des tokens shared/auth pour matcher le thème hub === */
    --mj-auth-accent:        #7a9e3f;   /* vert sapin au lieu du rouge motloutre */
    --mj-auth-accent-light:  #b6dc7c;   /* version éclatante pour hover/texte */
    --mj-auth-accent-dark:   #1d3f63;   /* bordures discrètes : on garde le bleu hub */
    --mj-auth-bg:            #102640;   /* fond dropdown/inputs : bleu relevé */
    --mj-auth-border-card:   #1d3f63;
    --mj-auth-text:          #e8edf3;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--mj-font-family);
    background: var(--mj-color-bg);
    color: var(--mj-color-text);
    min-height: 100vh;
    line-height: 1.5;
}

main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--mj-space-5);
}

/* === Dropdown utilisateur (surcharge shared/auth) ===
 * shared/auth/client.js fait `header.appendChild(wrapper)` et son CSS pose
 * `position: absolute; left: 12px; top: 50%`. Sur le hub, on veut au contraire que le wrapper
 * s'insère naturellement dans le flex .mj-header (côté droit, à côté du brand).
 * Utilise !important parce que shared/auth/styles.css est chargé dynamiquement, ordre non garanti. */
/* shared/auth/client.js fait `header.appendChild(wrapper)` — le wrapper se retrouve donc
 * en 4e enfant du `<header>`. Avec le layout grid 3 zones (1fr auto 1fr), le 4e enfant
 * partirait dans une 4e colonne implicite et casserait la mise en page (wrapper passe sous
 * le brand). On force le wrapper en grid-column 3 (zone droite) — il coexiste visuellement
 * avec `#header-actions` qui reste vide.
 *
 * `position: relative` (pas static !) pour que le dropdown enfant (`position: absolute`)
 * se positionne par rapport à ce wrapper, pas par rapport au body. */
header.mj-header .mj-user-menu-wrapper {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

/* Comme le wrapper est tout à droite du header, le dropdown qui s'ouvre via `left: 0`
 * sort de l'écran à droite. On le bascule à droite pour qu'il s'ouvre vers la gauche. */
header.mj-header .mj-user-menu-wrapper .mj-user-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* Bouton "Se connecter" en mode invité : même traitement que le wrapper user-menu —
 * shared/auth/client.js fait aussi `header.appendChild(btn)` pour ce bouton. */
header.mj-header .mj-guest-login-btn {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

/* === Lien admin dans le header (visible si user.isAdmin) ===
 * Posé dans #header-actions (à droite du brand). L'espacement avec le titre est géré par
 * .mj-header__actions { margin-left: auto; padding-left: ... } dans shared/ui/components.css.
 * L'espacement avec le user-menu/dropdown qui suit est géré par le `gap` du container. */
.admin-header-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: var(--mj-radius-pill);
    background: rgba(122, 158, 63, 0.12);
    color: var(--mj-color-accent);
    text-decoration: none;
    font-size: var(--mj-text-sm);
    font-weight: 600;
    border: 1px solid var(--mj-color-accent-dim);
    transition: background 0.15s, color 0.15s;
}
.admin-header-link:hover {
    background: var(--mj-color-accent);
    color: #fff;
}

/* === Profil CTA (sous le hero, user connecté) === */

#profile-cta {
    margin-top: var(--mj-space-4);
    display: flex;
    justify-content: center;
}

.profile-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--mj-space-2);
    padding: var(--mj-space-3) var(--mj-space-5);
    background: var(--mj-color-accent);
    color: #fff;
    border-radius: var(--mj-radius-pill);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--mj-text-sm);
    transition: filter var(--mj-transition-fast), transform var(--mj-transition-fast);
}
.profile-cta-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.profile-cta-hint {
    background: var(--mj-color-bg-elevated);
    border: 1px dashed var(--mj-color-border);
    border-radius: var(--mj-radius-md);
    padding: var(--mj-space-3) var(--mj-space-4);
    color: var(--mj-color-text-soft);
    font-size: var(--mj-text-sm);
    text-align: center;
    max-width: 520px;
}
.profile-cta-hint strong {
    color: var(--mj-color-text);
}

/* === Sections génériques === */

.section-title {
    font-size: var(--mj-text-xl);
    font-weight: 600;
    margin: var(--mj-space-7) 0 var(--mj-space-4) 0;
    color: var(--mj-color-text);
}

.loading-placeholder {
    color: var(--mj-color-text-soft);
    font-size: var(--mj-text-sm);
    padding: var(--mj-space-5);
    text-align: center;
}

/* === Cartes de jeu === */

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mj-space-4);
}

.game-card {
    background: var(--mj-color-bg-elevated);
    border: 1px solid var(--mj-color-border);
    border-radius: var(--mj-radius-lg);
    padding: var(--mj-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--mj-space-3);
    transition: transform var(--mj-transition-base), border-color var(--mj-transition-base);
    /* Variable surchargée par JS depuis registry.palette.accent (couleur du jeu). */
    --game-accent: var(--mj-color-accent);
}
.game-card:hover {
    transform: translateY(-3px);
    border-color: var(--game-accent);
}

.game-card__header {
    display: flex;
    align-items: center;
    gap: var(--mj-space-3);
}
.game-card__emoji {
    font-size: var(--mj-text-2xl);
    line-height: 1;
}
/* Mascotte du jeu (image, override emoji). 80×80 sur desktop, 64×64 sur mobile via la
   règle @media plus bas. flex-shrink:0 pour éviter qu'elle se rétrécisse à côté du titre. */
.game-card__mascot {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: contain;
}
@media (max-width: 500px) {
    .game-card__mascot {
        width: 64px;
        height: 64px;
    }
}
.game-card__title {
    font-size: var(--mj-text-lg);
    font-weight: 600;
    margin: 0;
    color: var(--mj-color-text);
}

.game-card__description {
    color: var(--mj-color-text-soft);
    font-size: var(--mj-text-sm);
    margin: 0;
}

.game-card__status {
    display: flex;
    align-items: center;
    gap: var(--mj-space-2);
    font-size: var(--mj-text-sm);
}

.game-card__actions {
    margin-top: auto;
    display: flex;
    gap: var(--mj-space-2);
    flex-wrap: wrap;
}

.game-card__btn {
    flex: 1;
    min-width: 120px;
    padding: var(--mj-space-3) var(--mj-space-4);
    border-radius: var(--mj-radius-md);
    text-align: center;
    text-decoration: none;
    font-size: var(--mj-text-sm);
    font-weight: 600;
    transition: background var(--mj-transition-fast), transform var(--mj-transition-fast);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mj-space-2);
}
.game-card__btn:active {
    transform: scale(0.97);
}

/* Bouton principal "Jouer sur le web" — palette du jeu (accent défini en CSS var --game-accent). */
.game-card__btn--web {
    background: var(--game-accent);
    color: #fff;
}
.game-card__btn--web:hover {
    filter: brightness(1.1);
}

/* Bouton secondaire Discord — couleur blurple officielle. */
.game-card__btn--discord {
    background: #5865F2;
    color: #fff;
}
.game-card__btn--discord:hover {
    background: #4752C4;
}

/* === Stats globales === */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mj-space-4);
}

.stat-tile {
    background: var(--mj-color-bg-elevated);
    border: 1px solid var(--mj-color-border);
    border-radius: var(--mj-radius-lg);
    padding: var(--mj-space-5);
    text-align: center;
}
.stat-tile__value {
    font-size: var(--mj-text-3xl);
    font-weight: 700;
    color: var(--mj-color-accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-tile__label {
    font-size: var(--mj-text-sm);
    color: var(--mj-color-text-soft);
    margin-top: var(--mj-space-2);
}

/* === Section "Bientôt" === */

.coming-text {
    color: var(--mj-color-text-soft);
    font-size: var(--mj-text-base);
    background: var(--mj-color-bg-elevated);
    border: 1px dashed var(--mj-color-border);
    border-radius: var(--mj-radius-lg);
    padding: var(--mj-space-5);
}

/* === Footer === */

.site-footer {
    margin-top: var(--mj-space-8);
    padding: var(--mj-space-5);
    text-align: center;
    color: var(--mj-color-text-soft);
    font-size: var(--mj-text-sm);
    border-top: 1px solid var(--mj-color-border-soft);
}

/* === Mobile === */
@media (max-width: 500px) {
    .mj-hero {
        padding: var(--mj-space-5) var(--mj-space-3);
    }
    .mj-hero__title {
        font-size: var(--mj-text-2xl);
    }
    .game-grid {
        grid-template-columns: 1fr;
    }
}