/* Profils, amis, rôles, invitations, vitrine. Variables de la charte seulement (deux habillages, mode sombre). */
.invit-bandeau { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 70; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); padding: 10px 14px; background: var(--card); color: var(--ink); border: 2px solid var(--pink-deep); border-radius: var(--radius); box-shadow: var(--shadow); font-weight: 700; }
.ami-dlg .ami-corps { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; min-width: 220px; }
.ami-btn { min-height: 44px; }
.pf-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.pf-onglets .btn[aria-pressed="true"] { background: var(--pink-deep); color: var(--cream); }
.pf-liste { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.pf-carte { padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-carte h3 { margin: 0; font-family: var(--font-title); overflow-wrap: anywhere; }
.pf-carte .chip { align-self: flex-start; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pf-actions .btn { min-height: 44px; }
.pf-stats { width: 100%; border-collapse: collapse; font-size: .95rem; }
.pf-stats th, .pf-stats td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pf-rang { font-weight: 800; }
.pf-moi { background: var(--cream); }
.pf-perms { display: grid; gap: 6px; margin: 10px 0; }
.pf-perms label { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; }
.pf-roles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pf-msg { min-height: 1.4em; }
/* vitrine (visiteur sans compte) : les jeux se jouent tout seuls derrière le texte */
.vitrine { position: relative; min-height: 70vh; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); margin: 8px 0 24px; background: var(--card); }
.vitrine canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.vitrine-texte { position: relative; max-width: 34rem; padding: 24px 20px; text-align: center; background: color-mix(in srgb, var(--bg) 82%, transparent); border-radius: var(--radius); margin: 16px; }
.vitrine-texte h1 { margin: 0 0 8px; font-family: var(--font-title); }
.vitrine-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.vitrine-actions .btn { min-height: 48px; }
.vitrine-liste { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }
@media (prefers-reduced-motion: reduce) { .vitrine canvas { opacity: .35; } }
#hub.vitrine-on .hero, #hub.vitrine-on .cn-link, #hub.vitrine-on .credits { display: none; }

.rayon-ico { vertical-align: middle; margin-right: 8px; width: 28px; height: 28px; }
.vitrine { background-image: url("../img/jeux/a/commun/fond-accueil.jpg"); background-size: cover; background-position: center; }
.vitrine-logo { display: block; margin: 0 auto 6px; width: 72px; height: 72px; }
.pf-tete { display: flex; gap: 10px; align-items: center; }
.pf-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.pf-badge { width: 22px; height: 22px; vertical-align: middle; margin-right: 4px; }
.pf-trophee { width: 22px; height: 22px; vertical-align: middle; }