/* ==========================================================================
   Menu principal en pages (Accueil · Garage · Amis · Profil · Classement), connexion, amis / groupe / discussion / vocal,
   invitations, reconnexion. Tout tient dans la fenêtre sans barre de défilement : seules les listes (amis, messages, classement)
   défilent à l'intérieur de leur carte.
   ========================================================================== */

/* --- Composants communs ---------------------------------------------------------------------- */
.scroll { overflow-y: auto; min-height: 0; }
.badge { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .4em; border-radius: 99px; background: var(--danger); color: #fff; font-family: var(--font-ui); font-size: .68rem; font-weight: 800; letter-spacing: 0; box-shadow: 0 0 10px rgba(255, 84, 112, .7); animation: pop .4s var(--ease) both; }
.tag { display: inline-flex; align-items: center; gap: .35em; padding: .12em .65em; border-radius: 99px; background: rgba(143, 190, 255, .12); border: 1px solid var(--line); color: var(--ice); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.tag svg { width: 1em; height: 1em; }
.tag.warn { color: var(--warn); background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .45); }
.tag.dim { color: var(--text-3); background: rgba(255, 255, 255, .04); }
.card-head .count { margin-left: .7em; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--text-3); }
.empty-note { padding: 18px 8px; text-align: center; color: var(--text-3); font-weight: 600; letter-spacing: .04em; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 18px; text-align: center; color: var(--text-3); }
.empty-state > svg { width: 2.4em; height: 2.4em; color: var(--ice); opacity: .7; }
.empty-state b { font-family: var(--font-display); font-size: .84rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.empty-state p { max-width: 40ch; font-weight: 600; font-size: .92rem; line-height: 1.4; }
.empty-state.big { flex: 1; justify-content: center; gap: 12px; }
.inline-form { display: flex; gap: 8px; }
.inline-form .input { flex: 1; min-width: 0; }
.inline-form .btn { flex: none; }
.select { width: 100%; padding: .5em .8em; border-radius: 10px; background: rgba(4, 10, 26, .72); border: 1px solid var(--line-hi); outline: none; color-scheme: dark; font-weight: 600; }
.select:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(110, 200, 255, .2); }
.spinner { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(143, 190, 255, .25); border-top-color: var(--ice); animation: spin .9s linear infinite; }

/* formulaires : champs, mot de passe, case à cocher */
.field { position: relative; display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.field .input { padding-right: 3.6em; }
.field-count { position: absolute; right: .9em; bottom: .85em; font-style: normal; font-size: .72rem; font-weight: 700; color: var(--text-3); pointer-events: none; }
.field .eye { position: absolute; right: .3em; bottom: .25em; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 8px; color: var(--text-3); transition: color .2s, background .2s; }
.field .eye:hover { color: var(--ice); background: rgba(143, 190, 255, .12); }
.field.is-bad .input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 84, 112, .15); }
.field.shake { animation: shake .4s var(--ease); }
.strength { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: -4px; }
.strength i { display: block; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--sc, var(--danger)) var(--v, 0%), rgba(255, 255, 255, .1) var(--v, 0%)); transition: background .25s; }
.strength small { min-width: 6.5em; text-align: right; font-size: .76rem; font-weight: 700; letter-spacing: .06em; color: var(--sc, var(--danger)); }
.strength[data-s="0"] { --sc: #ff5470; }
.strength[data-s="1"] { --sc: #ff8f4d; }
.strength[data-s="2"] { --sc: #ffc933; }
.strength[data-s="3"] { --sc: #7be08c; }
.strength[data-s="4"] { --sc: #3ddc84; }
.check { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--text-2); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 6px; background: rgba(4, 10, 26, .7); border: 1.5px solid var(--line-hi); transition: background .2s, border-color .2s; }
.check i::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #04152e; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--ease); }
.check input:checked + i { background: linear-gradient(180deg, #8fdcff, #3aa0f5); border-color: #bfeaff; }
.check input:checked + i::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + i { outline: 2px solid var(--ice); outline-offset: 2px; }
.auth-hint { min-height: 1.3em; font-size: .88rem; font-weight: 600; color: var(--text-3); }
.auth-hint.is-error { color: var(--danger); }

/* pastille du vocal (salon) et présence */
.voice-chip { display: inline-flex; align-items: center; gap: .55em; max-width: 260px; padding: .4em .95em; border-radius: 99px; background: rgba(18, 34, 72, .72); border: 1px solid rgba(61, 220, 132, .5); color: var(--ok); font-weight: 700; font-size: .84rem; letter-spacing: .04em; transition: box-shadow .2s, background .2s; }
.voice-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-chip.is-off { color: var(--danger); border-color: rgba(255, 84, 112, .5); }
.voice-chip.talk { background: rgba(20, 70, 48, .6); box-shadow: 0 0 18px -2px var(--ok); }
.avwrap { position: relative; display: inline-block; flex: none; transition: filter .15s; }
.avwrap .avatar { width: 2.3em; height: 2.55em; font-size: .86rem; }
.presence { position: absolute; right: -1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--text-3); border: 2px solid #0b1530; }
.st-menu .presence { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.st-lobby .presence { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
.st-game .presence { background: var(--gold-2); box-shadow: 0 0 8px var(--gold-glow); }

/* --- Barre du haut : navigation par pages, compte ------------------------------------------------------ */
#screen-menu .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
#screen-menu .nav { justify-self: center; }
#screen-menu .topbar-right { justify-self: end; }
/* --- Décor plein écran : le village de Noël en 3D couvre tout l'écran, le menu flotte dessus ---------------------------------
   Le glisser (souris ou doigt) tourne la vue à 360° ; il traverse les zones vides de l'interface (les cartes, boutons et champs restent cliquables). */
#screen-menu .topbar, #screen-menu .pages { position: relative; z-index: 1; }
#screen-menu .topbar { z-index: 3; }                                                             /* au-dessus des pages : le menu déroulant du compte ne doit passer sous aucune carte */
#screen-menu .topbar { pointer-events: none; }                                                    /* la barre elle-même laisse passer le glissé vers le décor ; ses éléments restent cliquables */
#screen-menu .topbar > * { pointer-events: auto; }
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b1038; transition: filter .55s var(--ease); }
.backdrop canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.backdrop canvas.is-dragging { cursor: grabbing; }
.backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 8, 24, .62) 0, transparent 130px), linear-gradient(0deg, rgba(4, 8, 24, .55) 0, transparent 230px), radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(3, 6, 18, .45) 100%); }
/* les pages sans char 3D (Amis, Profil, Classement) : le village passe au second plan, flouté et assombri */
#screen-menu[data-page="friends"] .backdrop, #screen-menu[data-page="profile"] .backdrop, #screen-menu[data-page="ranking"] .backdrop { filter: blur(7px) brightness(.5) saturate(.85); }
#screen-menu .pages { pointer-events: none; }
.page .card, .page button, .page a, .page input, .page select, .page textarea, .page label, .page summary { pointer-events: auto; }
.page-home .card, .page-garage .card { backdrop-filter: blur(9px) saturate(1.15); }                  /* les panneaux flottent sur le village : le décor derrière eux est légèrement flouté */
.orbit-hint { position: absolute; z-index: 2; left: 50%; bottom: 142px; transform: translateX(-50%); display: flex; align-items: center; gap: .75em; max-width: min(92vw, 760px); padding: .55em 1.2em; border-radius: 99px; background: rgba(8, 16, 38, .7); border: 1px solid var(--line-hi); backdrop-filter: blur(8px); color: var(--text-2); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); }
.orbit-hint svg { flex: none; color: var(--ice); }
.orbit-hint.is-on { opacity: 1; }
#screen-menu:not([data-page="home"]) .orbit-hint { display: none; }
.nav { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(6, 14, 34, .62); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.nav button { position: relative; display: flex; align-items: center; gap: .55em; padding: .58em 1.1em; border-radius: 10px; font-weight: 700; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); transition: color .2s, background .2s, box-shadow .2s; }
.nav button:hover { color: var(--text); background: rgba(70, 120, 210, .18); }
.nav button.is-on { color: #03122c; background: linear-gradient(180deg, #8fdcff, #3aa0f5); box-shadow: 0 0 18px -4px var(--ice-glow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.nav .badge { position: absolute; top: -7px; right: -5px; }
.acct-wrap { position: relative; }
.acct { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 6px; border-radius: 12px; background: rgba(14, 26, 56, .55); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.acct:hover, .acct[aria-expanded="true"] { border-color: var(--line-hi); background: rgba(30, 56, 112, .5); }
.acct .avatar { width: 2.2em; height: 2.45em; font-size: .8rem; }
.acct-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 190px; text-align: left; line-height: 1; }
.acct-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; font-weight: 700; }
.acct-id small { overflow: hidden; text-overflow: ellipsis; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }       /* « Niv. 99 · Légende du Sapin » : le pire cas ne pousse pas la barre du haut */
.acct > svg { opacity: .6; transition: transform .2s var(--ease); }
.acct[aria-expanded="true"] > svg { transform: rotate(180deg); }
.acct-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, rgba(22, 40, 84, .98), rgba(9, 18, 42, .98)); border: 1px solid var(--line-hi); box-shadow: var(--shadow); animation: acctPop .18s var(--ease) both; }
@keyframes acctPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.acct-pop button { display: flex; align-items: center; gap: .7em; width: 100%; padding: .65em .85em; border-radius: 9px; text-align: left; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.acct-pop button:hover { background: rgba(70, 120, 210, .22); color: var(--text); }
.acct-pop hr { height: 1px; margin: 6px 4px; border: 0; background: var(--line); }
.acct-pop .danger:hover { background: rgba(255, 84, 112, .18); color: #ff9aae; }

/* --- Pages --------------------------------------------------------------------------------------------------- */
.pages { position: relative; flex: 1; min-height: 0; margin-top: 14px; }
.page { position: absolute; inset: 0; display: none; min-height: 0; }
.page.is-active { display: grid; animation: pageIn .38s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Accueil : groupe · char · JOUER ---------------------------------------------------------------------------- */
.page-home { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 20px; }
.home-side { display: flex; flex-direction: column; min-height: 0; }
.party-card { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.party-card .card-head { flex: none; margin-bottom: 0; }
.party-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; text-align: center; }
.party-empty b { font-family: var(--font-display); font-size: .9rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.party-empty p { max-width: 28ch; color: var(--text-3); font-weight: 600; font-size: .9rem; line-height: 1.4; }
.party-hex { display: grid; place-items: center; width: 74px; height: 82px; margin-bottom: 6px; font-size: 1.9rem; color: var(--ice); background: radial-gradient(circle at 50% 30%, rgba(110, 200, 255, .3), rgba(20, 44, 96, .55)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.quick { flex: none; display: flex; flex-direction: column; gap: 6px; }
.quick small { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.quick ul { display: flex; flex-direction: column; gap: 5px; }
.quick li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 10px; background: rgba(6, 14, 34, .5); }
.quick li .avatar { width: 1.9em; height: 2.1em; font-size: .72rem; }
.quick li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.party-open { flex: none; }
.party-foot { flex: none; display: flex; flex-wrap: wrap; gap: 8px; }
.party-hint { flex: none; color: var(--text-3); font-weight: 600; font-size: .82rem; line-height: 1.35; }
.party-card .members { flex: 1; min-height: 0; overflow-y: auto; }

.home-main { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.stage-slot { flex: 1 1 0; display: flex; min-height: 0; }
.stage { position: relative; flex: 1; min-width: 0; min-height: 0; container: showcase / size; }          /* plus de carte : un calque transparent sur le décor plein écran */
.showcase-label { position: absolute; left: 0; top: 0; right: 0; padding: 10px 6px 40px 14px; pointer-events: none; text-shadow: 0 2px 16px rgba(0, 0, 0, .85), 0 0 3px rgba(0, 0, 0, .6); }
.showcase-label small { font-weight: 700; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ice); }
.showcase-label h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.showcase-label p { color: var(--text); font-weight: 600; letter-spacing: .04em; }
.nav-btn { position: absolute; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; background: rgba(8, 16, 38, .62); backdrop-filter: blur(6px); pointer-events: auto; border: 1px solid var(--line-hi); font-size: 1.15rem; transition: background .2s, transform .2s, border-color .2s; }
.nav-btn:hover { background: rgba(40, 90, 180, .6); border-color: var(--ice); transform: scale(1.08); }
.nav-prev { left: 6px; }
.nav-next { right: 6px; }
@container showcase (max-height: 270px) {
  .showcase-label { padding: 12px 18px 26px; }
  .showcase-label h2 { font-size: 1.4rem; }
  .showcase-label p { display: none; }
}
@container showcase (max-height: 200px) { .showcase-label small { display: none; } }
@container showcase (max-width: 640px) { .showcase-label p { display: none; } }

.home-cta { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cards play" "note play"; gap: 10px 28px; align-items: center; }
.home-cta .class-cards { grid-area: cards; }
.home-cta .btn-cta { grid-area: play; justify-self: end; margin-right: 14px; }
.btn-cta[data-state="penalty"] { filter: drop-shadow(0 12px 28px rgba(255, 150, 40, .38)); }
.btn-cta[data-state="penalty"] .cta-in { padding: 16px 44px; font-size: 1.1rem; letter-spacing: .16em; background: linear-gradient(180deg, #ffeccb 0%, #ffbf5e 50%, #f08a12 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), inset 0 -5px 0 rgba(170, 80, 0, .45), 0 0 0 2px rgba(255, 220, 160, .5); }
.btn-cta[data-state="wait"] .cta-in, .btn-cta[data-state="blocked"] .cta-in { padding: 16px 40px; font-size: 1.02rem; letter-spacing: .14em; }
.btn-cta[data-state="penalty"][disabled] { filter: drop-shadow(0 12px 28px rgba(255, 150, 40, .38)); }
.play-note { grid-area: note; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 1.4em; color: var(--text-2); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.play-note > span { display: block; }                                   /* du texte qui coule normalement : un « inline-flex » avec gap écartait aussi le chiffre en gras et le point final */
.play-note svg { margin-right: .5em; color: var(--ice); }
.play-note b { color: var(--text); }
.play-note .warn { color: var(--warn); text-transform: none; font-size: .92rem; letter-spacing: .02em; }
.play-note .warn svg { color: var(--warn); }

/* choix du char (Accueil et Garage) */
.class-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: none; container: cards / inline-size; }
.cls-card {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 5px 12px 5px 8px; border-radius: 13px; text-align: left;
  background: linear-gradient(180deg, rgba(20, 36, 76, .7), rgba(8, 16, 38, .8)); border: 1px solid var(--line);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.cls-card img { flex: none; width: 78px; height: auto; max-height: 52px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .4)); transition: transform .3s var(--ease); }
.cls-card .t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cls-card b { font-family: var(--font-display); font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cls-card small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.cls-card:hover { transform: translateY(-2px); border-color: var(--line-hi); }
.cls-card:hover img { transform: scale(1.06); }
.cls-card.is-on { border-color: var(--ice); background: linear-gradient(180deg, rgba(36, 80, 160, .55), rgba(12, 28, 66, .85)); box-shadow: 0 0 0 1px rgba(143, 211, 255, .35), 0 10px 26px -10px var(--ice-glow); transform: translateY(-2px); }
.cls-card.is-on small { color: var(--ice); }
@container cards (max-width: 640px) {
  .cls-card { flex-direction: column; justify-content: center; gap: 1px; min-height: 0; padding: 5px 6px 6px; text-align: center; }
  .cls-card img { width: 66px; max-height: 40px; }
  .cls-card .t { align-items: center; }
  .cls-card b { font-size: .7rem; letter-spacing: .07em; }
  .cls-card small { display: none; }
}

/* --- Garage : statistiques et compétences ---------------------------------------------------------------------- */
.page-garage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.garage { display: flex; flex-direction: column; gap: 12px; min-height: 0; container: garage / size; }
.garage .stage-slot { min-height: 150px; }
.class-details { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; flex: none; }
.class-details .card { padding: 12px 15px; }
.stats { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.st-row { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 10px; align-items: center; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.st-row b { text-align: right; white-space: nowrap; color: var(--text); }
.st-row b .u { font-style: normal; text-transform: none; margin-left: .12em; opacity: .85; }
.weapon-line { margin-top: 2px; min-height: 2.5em; font-size: .78rem; font-weight: 600; color: var(--text-3); letter-spacing: .03em; line-height: 1.25; }  /* deux lignes réservées : le nom de l'arme le plus long ne change pas la hauteur de la carte */
.skillcard { display: flex; flex-direction: column; gap: 9px; container: skills / inline-size; }
.ab-row { display: flex; justify-content: center; gap: 9px; }
.ab-tile {
  --ac: #7fd0ff; position: relative; flex: 1 1 0; min-width: 42px; max-width: 74px; height: 46px; display: grid; place-items: center; padding: 0;
  border-radius: 12px; background: rgba(6, 14, 34, .62); border: 1px solid var(--line);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s var(--ease);
}
button.ab-tile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ac) 60%, transparent); }
.ab-tile.is-on { border-color: var(--ac); background: color-mix(in srgb, var(--ac) 15%, rgba(6, 14, 34, .72)); box-shadow: 0 0 16px -8px var(--ac); }
.ab-tile .ab-ico { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(4, 10, 26, .7); border: 1.5px solid color-mix(in srgb, var(--ac) 55%, transparent); color: var(--ac); }
.ab-tile .ab-ico svg { width: 20px; height: 20px; }
.ab-tile .ab-ico kbd { position: absolute; top: -.62em; left: -.5em; min-width: 1.55em; height: 1.55em; font-size: .6rem; margin: 0; padding: 0 .35em; }
.ab-tile .ab-ico kbd.wide { left: 50%; transform: translateX(-50%); padding: 0 .5em; letter-spacing: .06em; font-size: .5rem; white-space: nowrap; }
.ab-desc { min-height: 5.35em; color: var(--text-2); font-weight: 600; font-size: .82rem; line-height: 1.3; }
.ab-desc p { margin: 0; min-height: 3.95em; }
.ab-title { display: flex; align-items: center; justify-content: space-between; gap: .7em; margin-bottom: .22em; }
.ab-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-weight: 700; font-size: .9rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ac); text-shadow: 0 0 14px color-mix(in srgb, var(--ac) 55%, transparent); }
.ab-desc .cdp { flex: none; display: inline-flex; align-items: center; gap: .3em; padding: .02em .6em; border-radius: 99px; background: rgba(143, 190, 255, .14); color: var(--ice); font-size: .76rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.ab-desc .cdp svg { width: .95em; height: .95em; }
@container skills (min-width: 400px) { .ab-desc { min-height: 4.05em; } .ab-desc p { min-height: 2.65em; } }
@container garage (max-height: 440px) { .class-details { display: none; } }

/* --- Amis et groupe ------------------------------------------------------------------------------------------------- */
.page-friends { grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr); gap: 20px; }
.friends-card, .group-card { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.friends-card > .card-head, .group-card > .card-head { margin-bottom: 0; flex: none; }
.f-head, .g-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; margin-bottom: 0; }
.friends-card .inline-form, .g-invite { flex: none; }
.f-tabs { flex: none; display: flex; }
.f-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
.f-list { flex: 1; min-height: 0; }
.flist, .members { display: flex; flex-direction: column; gap: 6px; }
.fr, .pm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 10px 5px 8px; border-radius: 12px; background: rgba(6, 14, 34, .5); border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.fr:hover, .pm:hover { background: rgba(30, 56, 112, .5); }
.fr-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-id b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1rem; line-height: 1.05; }
.fr-id b em { font-style: normal; font-weight: 600; color: var(--text-3); font-size: .82em; }
.fr-id small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.st-menu .fr-id small { color: var(--ok); }
.st-lobby .fr-id small, .st-game .fr-id small { color: var(--gold); }
.fr .lvl { font-size: .66rem; min-width: 1.9em; height: 2.1em; }
.fr-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fr-id .crown { margin-left: .4em; color: var(--gold); filter: drop-shadow(0 0 6px var(--gold-glow)); }       /* chef du groupe — restreint à la liste : le podium des résultats a sa propre « .crown » */
.fr-id .crown svg { width: .95em; height: .95em; }
.pm { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.pm.pending { opacity: .7; border: 1px dashed var(--line-hi); background: transparent; }
.pm.empty { border: 1px dashed var(--line); background: transparent; color: var(--text-3); }
.pm.empty:hover { background: transparent; }
.slot-plus { display: grid; place-items: center; width: 2.3em; height: 2.55em; color: var(--text-3); }
.pm.empty .fr-id small { font-size: .74rem; }
.vmic { display: inline-grid; place-items: center; color: var(--ok); }
.vmic.off { color: var(--danger); }
.pm.talk { border-color: rgba(61, 220, 132, .6); box-shadow: 0 0 18px -8px var(--ok); }
.pm.talk .avwrap { filter: drop-shadow(0 0 7px var(--ok)); }
.vmic.talk { filter: drop-shadow(0 0 6px var(--ok)); }
.members.compact .pm { padding: 4px 8px 4px 6px; gap: 8px; }
.members.compact .avwrap .avatar { width: 2em; height: 2.2em; font-size: .74rem; }
.members.compact .fr-id b { font-size: .94rem; }
.members.compact .pm.empty { display: none; }
.g-note, .leader-note { flex: none; display: flex; align-items: center; gap: .6em; color: var(--text-3); font-weight: 600; font-size: .86rem; line-height: 1.3; }
.g-note svg { flex: none; color: var(--gold); }
.voicebox { flex: none; padding: 10px 12px; border-radius: 12px; background: rgba(6, 14, 34, .5); border: 1px solid var(--line); }
.vrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vhint { flex: 1; min-width: 14ch; color: var(--text-3); font-weight: 600; font-size: .84rem; line-height: 1.3; }
.ptt { flex: 1; min-width: 14ch; color: var(--text-2); font-weight: 600; font-size: .86rem; transition: color .15s; }
.ptt.down { color: var(--ok); }
.vrow.on .btn { flex: none; }
.vmeter { height: 4px; margin-top: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.vmeter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--ok), #a8ffd0); transition: width .08s linear; }
.vnote { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 176, 32, .08); border: 1px solid rgba(255, 176, 32, .38); color: var(--warn); }
.vnote > svg { flex: none; margin-top: .15em; width: 1.4em; height: 1.4em; }
.vnote b { display: block; font-weight: 700; letter-spacing: .03em; }
.vnote span { display: block; margin-top: 2px; color: var(--text-2); font-weight: 600; font-size: .86rem; line-height: 1.35; }
.vnote a { color: var(--ice); text-decoration: underline; user-select: text; }
.chatwrap { flex: 1 1 120px; min-height: 96px; display: flex; flex-direction: column; }
.group-card .g-members { flex: 0 1 auto; min-height: 0; overflow-y: auto; }          /* groupe de 5 dans une fenêtre basse : la liste défile plutôt que de rogner la discussion */

/* discussion (page Amis, salon) */
.chatbox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(4, 10, 26, .45); border: 1px solid var(--line); }
.chat-tabs { align-self: flex-start; flex: none; }
.chat-tabs button { position: relative; }
.chat-tabs .dot { position: absolute; top: 1px; right: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.chat-lines { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 2px 4px; user-select: text; -webkit-user-select: text; }
.cl { font-weight: 600; font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.cl b { margin-right: .5em; font-weight: 700; color: hsl(var(--h, 210) 90% 74%); }
.cl.mine b { color: var(--gold); }
.cl.sys, .cl.empty { color: var(--text-3); font-style: italic; font-size: .84rem; }
.cl-tag { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .5em; border-radius: 5px; font-style: normal; font-size: .62rem; font-weight: 800; background: rgba(143, 190, 255, .2); color: var(--ice); vertical-align: .08em; }
.cl.ch-team .cl-tag { background: rgba(255, 201, 51, .2); color: var(--gold); }
.chat-send { flex: none; display: flex; gap: 8px; }
.chat-send input { flex: 1; min-width: 0; padding: .5em .8em; border-radius: 9px; background: rgba(4, 10, 26, .8); border: 1px solid var(--line-hi); outline: none; font-weight: 600; user-select: text; -webkit-user-select: text; transition: border-color .2s, box-shadow .2s; }
.chat-send input:focus { border-color: var(--ice); box-shadow: 0 0 0 3px rgba(110, 200, 255, .18); }
.chat-send input:disabled { opacity: .55; }
.chat-send .btn { padding: .5em .8em; }
.chatbox.is-compact .cl { font-size: .86rem; }
.lobby-chat .chatbox { height: 100%; background: linear-gradient(180deg, rgba(20, 36, 76, .6), rgba(8, 16, 38, .75)); backdrop-filter: blur(10px); }

/* --- Profil ----------------------------------------------------------------------------------------------------------- */
.page-profile { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.profile-page { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "ident stats" "pen classes"; gap: 16px; min-height: 0; }
.profile-page > .card { min-height: 0; overflow: hidden; }
.pf-ident { grid-area: ident; display: flex; flex-direction: column; gap: 14px; }
.pf-stats { grid-area: stats; display: flex; flex-direction: column; }
.pf-pen { grid-area: pen; display: flex; flex-direction: column; gap: 10px; }
.pf-classes { grid-area: classes; display: flex; flex-direction: column; }
.pf-stats .card-head, .pf-classes .card-head, .pf-pen .card-head { flex: none; }
.pf-top { display: flex; align-items: center; gap: 14px; }
.pf-av .avatar { width: 3.6em; height: 4em; font-size: 1.3rem; }
.pf-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-id h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1.5rem; line-height: 1.05; letter-spacing: .02em; color: #fff; }
.pf-title { font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.pf-lvl { font-size: 1.1rem; min-width: 2.8em; height: 3.1em; }
.pf-xp-row { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .8rem; letter-spacing: .1em; font-weight: 700; color: var(--text-2); }
.pf-xp-row b { font-family: var(--font-display); font-size: .72rem; color: var(--gold); letter-spacing: .06em; }
.pf-lines { display: flex; flex-direction: column; }
.pf-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--text-2); }
.pf-lines li:last-child { border-bottom: 0; }
.pf-lines b { color: var(--text); text-align: right; }
.pf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.stat-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.stat-grid .stat { grid-template-rows: auto auto auto; align-content: center; }
.stat-grid .stat svg { grid-row: 1 / -1; }
.stat-grid .stat em { grid-column: 2; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pen-now { display: flex; align-items: center; gap: .6em; padding: 10px 12px; border-radius: 12px; background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .35); color: var(--ok); font-weight: 700; }
.pen-now.on { background: rgba(255, 176, 32, .1); border-color: rgba(255, 176, 32, .5); color: var(--warn); }
.pen-now b { margin-left: auto; font-family: var(--font-display); font-size: 1.05rem; }
.pen-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pen-steps li { padding: 6px 4px; border-radius: 10px; text-align: center; background: rgba(6, 14, 34, .5); border: 1px solid var(--line); }
.pen-steps small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.pen-steps b { font-family: var(--font-display); font-size: .78rem; }
.pen-steps li.done { border-color: rgba(255, 84, 112, .45); background: rgba(255, 84, 112, .1); }
.pen-steps li.done b { color: #ff9aae; }
.pen-steps li.next { border-color: var(--warn); background: rgba(255, 176, 32, .12); box-shadow: 0 0 14px -6px var(--warn); }
.pen-steps li.next b { color: var(--warn); }
.pen-note { color: var(--text-3); font-weight: 600; font-size: .84rem; line-height: 1.4; }
.pen-note b { color: var(--text-2); }
.pc-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 8px; }
.pc-row { display: grid; grid-template-columns: minmax(8.5em, 1.3fr) minmax(50px, 1.4fr) repeat(4, minmax(3.6em, auto)); align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(6, 14, 34, .5); border: 1px solid var(--line); }
.pc-name b { display: block; font-family: var(--font-display); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-name small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pc-num { text-align: center; line-height: 1.1; }
.pc-num b { display: block; font-family: var(--font-display); font-size: .95rem; }
.pc-num small { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* --- Classement ---------------------------------------------------------------------------------------------------------- */
.page-ranking { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 20px; }
.board { display: flex; flex-direction: column; min-height: 0; padding: 16px 18px; }
.board .card-head { flex: none; flex-wrap: wrap; }
.lb { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.lb-row { display: grid; grid-template-columns: 26px auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 11px; background: rgba(6, 14, 34, .5); border: 1px solid transparent; font-weight: 600; transition: background .2s, border-color .2s; }
.lb-row:hover { background: rgba(30, 56, 112, .5); }
.lb-row.is-me { border-color: rgba(255, 211, 77, .55); background: rgba(70, 52, 10, .35); }
.lb-row .avatar { width: 2em; height: 2.2em; font-size: .78rem; }
.lb-rank { font-family: var(--font-display); font-weight: 800; font-size: .9rem; text-align: center; color: var(--text-3); }
.lb-row:nth-child(1) .lb-rank { color: #ffd34d; text-shadow: 0 0 10px var(--gold-glow); }
.lb-row:nth-child(2) .lb-rank { color: #d6e2f5; }
.lb-row:nth-child(3) .lb-rank { color: #e8a36a; }
.lb-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .96rem; }
.lb-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name .lvl { font-size: .62rem; min-width: 1.9em; height: 2.1em; }
.lb-val { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--ice); }
.recent { display: flex; flex-direction: column; min-height: 0; padding: 16px 18px; }
.recent .card-head { flex: none; }
.recent-list { flex: 1; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.recent-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(6, 14, 34, .5); font-weight: 600; font-size: .9rem; }
.recent-list small { display: block; color: var(--text-3); font-size: .74rem; letter-spacing: .05em; }
.rc-win { width: 10px; height: 28px; border-radius: 4px; background: var(--tc, #888); box-shadow: 0 0 10px var(--tc, #888); }
.rc-score { font-family: var(--font-display); font-size: .74rem; color: var(--text-2); letter-spacing: .02em; }

/* --- Connexion / création de compte -------------------------------------------------------------------------------------- */
#screen-auth { overflow-x: hidden; overflow-y: auto; }                    /* centrage par les marges automatiques de .auth (et non justify-content : un contenu plus haut que l'écran resterait coupé en haut) */
.auth { width: min(1000px, 100%); margin: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, 440px); gap: clamp(24px, 5vw, 72px); align-items: center; }
.auth-hero { display: flex; flex-direction: column; gap: 12px; }
.auth-logo { display: grid; place-items: center; width: 84px; height: 94px; margin-bottom: 4px; font-size: 2.6rem; color: #eaf8ff; background: linear-gradient(145deg, #86d4ff, #2468e0); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: float 3.2s ease-in-out infinite; }
.auth-hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: .2em; background: linear-gradient(180deg, #fff, #9bd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero h1 { filter: drop-shadow(0 1px 6px rgba(2, 6, 18, .85)); }                  /* le titre est un texte « découpé » dans un dégradé : une text-shadow le traverserait, un drop-shadow non */
.auth-tag, .auth-points { text-shadow: 0 1px 8px rgba(2, 6, 18, .85), 0 0 2px rgba(2, 6, 18, .9); }
.auth-tag { font-weight: 700; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: #9fb7da; }
.auth-points { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.auth-points li { display: flex; align-items: flex-start; gap: 14px; }
.auth-points li > svg { box-sizing: content-box; width: 1.5em; height: 1.5em; padding: .45em; border-radius: 12px; background: rgba(30, 60, 120, .5); border: 1px solid var(--line-hi); color: var(--ice); }
.auth-points b { display: block; font-weight: 700; letter-spacing: .04em; }
.auth-points span { color: var(--text-2); font-weight: 600; font-size: .92rem; line-height: 1.35; }
.auth-card { padding: 20px 24px 22px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; margin-bottom: 18px; border-radius: 12px; background: rgba(4, 10, 26, .65); border: 1px solid var(--line); }
.auth-tabs button { padding: .62em; border-radius: 9px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); transition: color .2s, background .2s; }
.auth-tabs button:hover { color: var(--text); }
.auth-tabs button.is-on { background: linear-gradient(180deg, var(--ice-2), var(--ice-3)); color: #03122c; box-shadow: 0 0 14px -2px var(--ice-glow); }
#auth-form { display: flex; flex-direction: column; gap: 12px; }
#auth-form h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; }
.auth-sub { color: var(--text-2); font-weight: 600; font-size: .94rem; line-height: 1.4; }
.auth-sub b { color: var(--text); }
.auth-ok { width: 100%; margin-top: 2px; padding: .85em 1.2em; font-size: .98rem; letter-spacing: .14em; }
.auth-secure { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 176, 32, .1); border: 1px solid rgba(255, 176, 32, .38); color: var(--warn); font-weight: 600; font-size: .84rem; line-height: 1.4; }
.auth-secure a { color: var(--ice); text-decoration: underline; user-select: text; }

/* --- Invitations de groupe, reconnexion ------------------------------------------------------------------------------------ */
.invites { position: fixed; top: 78px; right: 18px; z-index: 70; display: flex; flex-direction: column; gap: 10px; width: min(320px, calc(100vw - 36px)); pointer-events: none; }
body[data-phase="playing"] .invites { display: none; }
.invite { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 15px; border-radius: 14px; pointer-events: auto; background: linear-gradient(180deg, rgba(26, 46, 96, .97), rgba(10, 20, 46, .97)); border: 1px solid var(--ice); box-shadow: var(--shadow), 0 0 28px -8px var(--ice-glow); animation: inviteIn .45s var(--ease) both; }
.invite.out { animation: inviteOut .3s var(--ease) both; }
@keyframes inviteIn { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes inviteOut { to { opacity: 0; transform: translateX(40px) scale(.96); } }
.inv-top { display: flex; align-items: center; gap: 12px; }
.inv-top .avatar { width: 2.4em; height: 2.65em; font-size: .86rem; }
.inv-top b { display: block; font-size: 1.05rem; font-weight: 700; }
.inv-top small { color: var(--text-2); font-weight: 600; }
.inv-acts { display: flex; gap: 8px; }
.inv-acts .btn-primary { flex: 1; }
.inv-bar { position: absolute; left: 0; bottom: 0; width: var(--v, 100%); height: 3px; background: var(--ice); box-shadow: 0 0 10px var(--ice-glow); transition: width .5s linear; }
.reconnect { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(2, 6, 16, .72); backdrop-filter: blur(6px); animation: fade .25s both; }
.reconnect .card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(410px, calc(100vw - 40px)); padding: 28px 30px; text-align: center; }
.reconnect b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; }
.reconnect small { color: var(--text-2); font-weight: 600; line-height: 1.4; }
.reconnect .swap { font-size: 2.2rem; color: var(--gold); }
.reconnect .btn { margin-top: 6px; }

/* --- Adaptations ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1640px) {
  .pill-txt { display: none; }
  .brand-text small { display: none; }
  .nav button { padding: .55em .85em; font-size: .8rem; letter-spacing: .07em; }
}
@media (max-width: 1560px) {
  .nav button:not(.is-on) span:not(.badge) { display: none; }              /* onglets inactifs en icônes seules : seul l'onglet actif garde son libellé */
}
@media (max-width: 1280px) {
  .page-home { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 1180px) {
  .brand-text b { font-size: 1.05rem; letter-spacing: .2em; }
  .page-friends { grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr); gap: 14px; }
  .profile-page { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}
/* barre du haut : la marque, la navigation et les boutons de droite se partagent la largeur — on retire d'abord le texte de la marque, puis le détail du compte */
@media (max-width: 1320px) {
  .brand-text { display: none; }
}
@media (max-width: 900px) {
  .acct-id { display: none; }
  .topbar-right .pill-live { display: none; }
}
@media (max-width: 800px) {
  .nav button.is-on span:not(.badge) { display: none; }                  /* icônes seules */
  #btn-fullscreen { display: none; }
}
@media (max-width: 980px) {
  .home-cta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cards" "play" "note"; justify-items: center; }
  .home-cta .class-cards { width: 100%; }
  .home-cta .btn-cta { justify-self: center; margin-right: 0; }
  .page-ranking { grid-template-columns: minmax(0, 1fr); }
  .page-ranking .recent { display: none; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-row { grid-template-columns: minmax(7em, 1.3fr) repeat(4, minmax(3.2em, auto)); }
  .pc-row .bar { display: none; }
}
@media (max-width: 1000px) {
  /* profil étroit : l'essentiel (identité, état des abandons, statistiques) ; le détail par char et la règle détaillée passent de côté */
  .profile-page { grid-template-areas: "ident stats" "pen stats"; }
  .pf-classes, .pen-note { display: none; }
}
@media (max-width: 880px) {
  .auth { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .auth-points { display: none; }
  .auth-hero { align-items: center; text-align: center; }
  .auth-logo { width: 56px; height: 62px; font-size: 1.7rem; }
  .page-home { grid-template-columns: minmax(0, 1fr); }
  .home-side { display: none; }
  .page-friends { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .friends-card { max-height: 44vh; }
  .profile-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "ident" "stats"; overflow-y: auto; align-content: start; }
  .pf-pen, .pf-classes { display: none; }
}
@media (max-width: 720px) {
  .topbar-right { gap: 6px; }
  .topbar-right .pill { display: none; }
  .play-note { justify-content: center; text-align: center; }
}
@media (max-height: 900px) {
  .btn-cta .cta-in { padding: 12px 54px; font-size: 1.3rem; }
  .btn-cta[data-state="penalty"] .cta-in { padding: 12px 34px; font-size: .98rem; }
  .btn-cta[data-state="wait"] .cta-in, .btn-cta[data-state="blocked"] .cta-in { padding: 12px 32px; font-size: .92rem; }
}
@media (max-height: 780px) {
  .pages { margin-top: 10px; }
  .cls-card { min-height: 52px; }
  .profile-page { gap: 12px; }
  .pf-ident { gap: 10px; }
  .pf-av .avatar { width: 3em; height: 3.3em; font-size: 1.1rem; }
  .pf-lines li { padding: 5px 0; }
  .pen-note { font-size: .78rem; }
}
@media (max-height: 780px) {
  .lb { gap: 4px; }
  .lb-row { padding-top: 4px; padding-bottom: 4px; }                       /* classement : 10 lignes sans barre de défilement même à 640 px de haut */
  .group-card .pm.empty { display: none; }
  .g-note { display: none; }
  .group-card .pm { padding: 3px 8px 3px 6px; gap: 8px; }
  .group-card .pm .avwrap .avatar { width: 1.9em; height: 2.1em; font-size: .72rem; }
  .group-card .members, .friends-card .flist { gap: 4px; }
  .group-card .fr-id b { font-size: .94rem; }
  .group-card { gap: 10px; }
}
@media (max-height: 680px) {
  .group-card .pm .fr-id small { display: none; }
}
@media (max-height: 700px) {
  .pen-note { display: none; }
  .pf-lines { display: none; }
  .stat-grid .stat em { display: none; }
  .voicebox .vhint { display: none; }
  .party-hint, .g-note { display: none; }
  .play-note { font-size: .74rem; }
  .showcase-label p { display: none; }
}