/* Fenêtre « Amis » (ui/FriendsScreen.js) — 2026-10-15 : MODALE sur l'accueil (voile sombre + cadre centré + croix au coin). Style ÉPURÉ : fond nuit bleutée, cartes de verre fumé à filet doré fin, boutons plats
   (pastille verte pour l'action, contour doré pour le reste). Pas de texture de bois ni de cadre en border-image, volontairement.
   Même palette que le reste (variables --pn-* de panels.css). Posée dans la section `.home` (z-index 28 : sous les confirmations, z-index 30). */
.fr-overlay {
  position: absolute; inset: 0; z-index: 28; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-top) + 26px) 14px calc(var(--safe-bottom) + 20px);
  background: rgba(2, 5, 14, 0.66); animation: fr-fade 0.18s ease-out;
}
.fr-overlay.leaving { opacity: 0; transition: opacity 0.16s ease-in; pointer-events: none; }
.fr-wrap { position: relative; width: min(390px, 100%); height: min(660px, 100%); }
@keyframes fr-fade { from { opacity: 0; } }
.fr-x {
  position: absolute; z-index: 2; right: -6px; top: -12px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer; touch-action: manipulation; color: var(--pn-cream);
  border: 1.5px solid var(--pn-edge); border-radius: 50%; background: #1a2440; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); transition: transform 0.1s, color 0.15s;
}
.fr-x svg { width: 16px; height: 16px; }
.fr-x:active { transform: scale(0.92); }
@media (hover: hover) { .fr-x:hover { color: var(--pn-gold); } }
.fr-x:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }
.fr {
  --line: rgba(255, 224, 160, 0.16);
  --card: rgba(22, 32, 56, 0.66);
  --card-hi: rgba(34, 48, 80, 0.8);
  --ok: #7fe39a;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; outline: none;
  border: 1.5px solid rgba(201, 164, 90, 0.75); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.12), 0 18px 50px rgba(0, 0, 0, 0.65); color: var(--pn-cream); font: 600 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(90% 38% at 50% 0%, rgba(96, 150, 255, 0.22), transparent 74%), linear-gradient(#0d1527, #060a15);
  animation: fr-in 0.24s cubic-bezier(0.3, 1.25, 0.5, 1);
}
@keyframes fr-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
.fr-loading { margin: auto; color: var(--pn-tan); }
.fr-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---- en-tête : retour · profil (pseudo + code ami) · ＋ */
.fr-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 14px; border-bottom: 1px solid var(--line); }
.fr-back, .fr-plus {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer; touch-action: manipulation; color: var(--pn-cream);
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.05); transition: transform 0.12s, background 0.15s, border-color 0.15s, color 0.15s;
}
.fr-back svg, .fr-plus svg { width: 22px; height: 22px; }
.fr-back:active, .fr-plus:active { transform: scale(0.93); }
@media (hover: hover) { .fr-back:hover { border-color: var(--pn-gold); color: var(--pn-gold); } }
.fr-plus { width: 42px; height: 42px; color: var(--pn-gold); border: 1.5px solid var(--pn-gold); background: rgba(255, 210, 94, 0.1); }
.fr-plus svg { width: 24px; height: 24px; transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); }
.fr-plus.on { background: rgba(255, 210, 94, 0.22); }
.fr-plus.on svg { transform: rotate(45deg); }
.fr-plus.danger { color: #ff8a80; border-color: rgba(255, 120, 110, 0.6); background: rgba(255, 90, 80, 0.1); width: 38px; height: 38px; }
.fr-plus.danger svg { width: 18px; height: 18px; }
.fr-plus:focus-visible, .fr-back:focus-visible, .fr-code:focus-visible, .fr-ic:focus-visible, .fr-room:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 2px; }

.fr-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; }
.fr-who { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.fr-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 18px/1.15 var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.fr-code {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px 3px 10px; cursor: pointer; touch-action: manipulation; color: var(--pn-cream);
  border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.05); transition: border-color 0.15s, background 0.15s;
}
.fr-code small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--pn-tan); }
.fr-code-v { font: 800 14px/1 var(--pn-serif); letter-spacing: 0.16em; color: var(--pn-cream); font-variant-numeric: tabular-nums; }
.fr-code-ic svg { display: block; width: 14px; height: 14px; color: var(--pn-tan); }
.fr-code:active { background: rgba(255, 255, 255, 0.1); }
.fr-code.ok { border-color: var(--ok); }
.fr-code.ok .fr-code-ic svg { color: var(--ok); }
@media (hover: hover) { .fr-code:hover { border-color: var(--pn-gold); } }

/* ---- avatars */
.fr-av {
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background-color: #162033; background-size: 700% 700%;
  box-shadow: 0 0 0 2px #c9a45a, 0 2px 6px rgba(0, 0, 0, 0.55); color: var(--pn-gold); font: 800 18px/1 var(--pn-serif);
}
.fr-av-me { width: 50px; height: 50px; box-shadow: 0 0 0 2.5px var(--pn-gold), 0 3px 8px rgba(0, 0, 0, 0.6); }
.fr-dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #0d1527; background: #6f7686; }
.fr-dot.on { background: #3ddc5b; }
.fr-dot.busy { background: #ffb02e; }

/* ---- « Ajouter un ami » : se déroule sous l'en-tête */
.fr-add { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.24s ease; }
.fr-add.open { grid-template-rows: 1fr; }
.fr-add-in { min-height: 0; overflow: hidden; padding: 0 14px; }
.fr-add.open .fr-add-in { padding: 12px 14px 4px; }
.fr-add-form { display: flex; gap: 8px; }
.fr-input {
  flex: 1; min-width: 0; height: 42px; padding: 0 14px; font: 700 15px/1 system-ui, sans-serif; color: var(--pn-cream); text-transform: uppercase; letter-spacing: 0.18em;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.35); outline: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
.fr-input::placeholder { color: rgba(216, 204, 170, 0.45); letter-spacing: 0.12em; }
.fr-input:focus { border-color: var(--pn-gold); }
.fr-chat-form .fr-input::placeholder { letter-spacing: 0; }
.fr-chat-form .fr-input { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 99px; padding: 0 16px; }
.fr-msg { margin: 8px 2px 4px; font-size: 12.5px; color: var(--pn-tan); }
.fr-msg[hidden] { display: none; }
.fr-msg.ok { color: var(--ok); }
.fr-msg.warn { color: #ffcf6b; }

/* ---- boutons : pastille verte (action) / contour (secondaire) */
.fr-btn {
  flex: none; height: 42px; padding: 0 18px; cursor: pointer; touch-action: manipulation; font: 800 14px/1 var(--pn-serif); letter-spacing: 0.02em; color: #fff;
  border: 1px solid rgba(160, 255, 170, 0.45); border-radius: 99px; background: linear-gradient(#4cc950, #1f8a2a); text-shadow: 0 1px 2px rgba(0, 40, 10, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.1s, filter 0.15s;
}
.fr-btn.sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.fr-btn.big { height: 46px; padding: 0 26px; font-size: 15px; }
.fr-btn.ghost { color: var(--pn-cream); border-color: var(--line); background: rgba(255, 255, 255, 0.06); box-shadow: none; text-shadow: none; }
.fr-btn:active { transform: scale(0.95); }
.fr-btn:disabled { filter: grayscale(0.7) brightness(0.75); cursor: default; }
@media (hover: hover) { .fr-btn:not(:disabled):hover { filter: brightness(1.12); } }

/* ---- liste */
.fr-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 14px; }
.fr-h { display: flex; align-items: baseline; gap: 7px; margin: 14px 2px 8px; font: 800 13px/1 var(--pn-serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pn-tan); }
.fr-h small { font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0; color: var(--pn-gold); font-variant-numeric: tabular-nums; }
.fr-reqs[hidden] { display: none; }
.fr-list, .fr-reqs { display: grid; gap: 8px; }
.fr-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.fr-click { cursor: pointer; touch-action: manipulation; }
.fr-click:active { transform: scale(0.985); }
.fr-click:focus-visible { outline: none; border-color: var(--pn-gold); }
@media (hover: hover) { .fr-click:hover { border-color: rgba(255, 210, 94, 0.5); background: var(--card-hi); } }
.fr-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fr-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 15.5px/1.2 var(--pn-serif); color: var(--pn-cream); }
.fr-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: #9aa3b5; }
.fr-row.on .fr-status { color: var(--ok); }
.fr-row.busy .fr-status { color: #ffb02e; }
.fr-who .fr-status { font-size: 12px; }
.fr-ic {
  position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; touch-action: manipulation; color: var(--pn-tan);
  border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.05); transition: color 0.15s, border-color 0.15s;
}
.fr-ic svg { width: 17px; height: 17px; }
@media (hover: hover) { .fr-ic:not(:disabled):hover { color: var(--pn-gold); border-color: var(--pn-gold); } }
.fr-ic:active:not(:disabled) { transform: scale(0.92); }
.fr-ic.go { color: #fff; border-color: rgba(160, 255, 170, 0.5); background: linear-gradient(#4cc950, #1f8a2a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 5px rgba(0, 0, 0, 0.4); }
@media (hover: hover) { .fr-ic.go:not(:disabled):hover { color: #fff; border-color: rgba(190, 255, 200, 0.8); filter: brightness(1.12); } }
.fr-ic:disabled { cursor: default; opacity: 0.32; box-shadow: none; filter: grayscale(0.6); }
.fr-ic.go:disabled { background: rgba(255, 255, 255, 0.06); border-color: var(--line); color: var(--pn-tan); }
.fr-row .fr-ic { margin-left: -3px; }
.fr-row .fr-main { margin-right: 2px; }
.fr-more[aria-expanded="true"] { color: var(--pn-gold); border-color: var(--pn-gold); background: rgba(255, 210, 94, 0.12); }

/* ---- menu « ⋮ » d'une ligne */
.fr-menu {
  position: absolute; z-index: 6; min-width: 196px; padding: 6px; border: 1px solid rgba(201, 164, 90, 0.6); border-radius: 14px; background: #131c33;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); animation: fr-menu 0.14s ease-out; transform-origin: top right;
}
@keyframes fr-menu { from { opacity: 0; transform: scale(0.94); } }
.fr-mi {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 42px; padding: 0 12px; cursor: pointer; touch-action: manipulation; text-align: left;
  color: var(--pn-cream); border: 0; border-radius: 10px; background: none; font: 700 14px/1 system-ui, sans-serif;
}
.fr-mi svg { flex: none; width: 18px; height: 18px; color: var(--pn-tan); }
.fr-mi:active, .fr-mi:focus-visible { outline: none; background: rgba(255, 255, 255, 0.09); }
@media (hover: hover) { .fr-mi:hover { background: rgba(255, 255, 255, 0.07); } }
.fr-mi.danger, .fr-mi.danger svg { color: #ff8a80; }
.fr-mi + .fr-mi.danger { margin-top: 3px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }

/* ---- fiche d'un ami */
.fr-pcard { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 26px 20px; text-align: center; }
.fr-av-big { width: 96px; height: 96px; font-size: 38px; box-shadow: 0 0 0 3px var(--pn-gold), 0 6px 16px rgba(0, 0, 0, 0.6); }
.fr-av-big .fr-dot { width: 20px; height: 20px; right: 2px; bottom: 2px; border-width: 3px; }
.fr-name.big { margin-top: 10px; font-size: 24px; }
.fr-pcard .fr-status { font-size: 13.5px; }
.fr-plabel { margin-top: 16px; font: 700 11px/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pn-tan); }
.fr-pcode { padding: 6px 14px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, 0.05); font: 800 17px/1 var(--pn-serif); letter-spacing: 0.18em; color: var(--pn-cream); }
.fr-pact { display: flex; gap: 10px; margin-top: 22px; }
.fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fr-btn svg { width: 18px; height: 18px; }
.fr-btn.ghost svg { color: var(--pn-tan); }
.fr-badge {
  position: absolute; right: -4px; top: -5px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; border: 2px solid #0d1527;
  background: #e8372c; color: #fff; font: 800 10.5px/1 system-ui, sans-serif; font-style: normal;
}
.fr-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; text-align: center; color: var(--pn-tan); border: 1px dashed var(--line); border-radius: 16px; }
.fr-empty span svg { width: 38px; height: 38px; color: rgba(255, 210, 94, 0.55); }
.fr-empty p { margin: 4px 0 0; font: 800 16px/1.2 var(--pn-serif); color: var(--pn-cream); }
.fr-empty small { font-size: 12.5px; font-weight: 600; max-width: 250px; }

/* ---- chargement : lignes du miroir (pas encore de direct) et squelettes */
.fr-row.pending .fr-av { opacity: 0.9; }
.fr-skel { pointer-events: none; }
.fr-skel .fr-av { box-shadow: none; background: rgba(255, 255, 255, 0.07); }
.fr-skel .fr-main { gap: 7px; }
.fr-skel i { display: block; height: 11px; width: 62%; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.fr-skel i + i { width: 38%; height: 9px; }
.fr-skel { animation: fr-pulse 1.2s ease-in-out infinite; }
@keyframes fr-pulse { 50% { opacity: 0.55; } }

/* ---- pied : « Créer un salon » (factice) */
.fr-foot { flex: none; padding: 10px 14px 14px; border-top: 1px solid var(--line); background: linear-gradient(transparent, rgba(0, 0, 0, 0.28)); }
.fr-hint { margin: 0 0 8px; text-align: center; font-size: 12.5px; color: #ffcf6b; }
.fr-hint[hidden] { display: none; }
.fr-room {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; padding: 0 16px; cursor: pointer; touch-action: manipulation;
  color: var(--pn-gold); border: 1.5px solid rgba(255, 210, 94, 0.7); border-radius: 16px; background: linear-gradient(rgba(255, 210, 94, 0.14), rgba(255, 210, 94, 0.05));
  transition: transform 0.1s, background 0.15s;
}
.fr-room b { font: 800 16px/1 var(--pn-serif); letter-spacing: 0.04em; text-shadow: 0 2px 0 #4a3000; }
.fr-room em { padding: 3px 8px; border-radius: 99px; background: rgba(255, 210, 94, 0.2); color: var(--pn-cream); font: 800 10px/1 system-ui, sans-serif; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.fr-room-ic svg { display: block; width: 22px; height: 22px; }
.fr-room:active { transform: scale(0.98); }
@media (hover: hover) { .fr-room:hover { background: linear-gradient(rgba(255, 210, 94, 0.22), rgba(255, 210, 94, 0.1)); } }

/* ---- discussion */
.fr-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 7px; margin: 12px 14px 0; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(0, 0, 0, 0.28); }
.fr-line { display: flex; flex-direction: column; align-items: flex-start; max-width: 85%; }
.fr-line.mine { align-self: flex-end; align-items: flex-end; }
.fr-bubble { padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #222d44; border: 1px solid var(--line); overflow-wrap: anywhere; color: var(--pn-cream); }
.fr-line.mine .fr-bubble { border-radius: 16px 16px 4px 16px; border-color: rgba(160, 255, 170, 0.4); background: linear-gradient(#2f9a33, #1b7a24); color: #fff; }
.fr-line time { margin-top: 2px; font-size: 10.5px; color: #8892a6; }
.fr-note { margin: auto; text-align: center; color: var(--pn-tan); font-size: 13px; }
.fr-chatview .fr-msg { margin: 6px 16px 0; }
.fr-chat-form { display: flex; gap: 8px; padding: 10px 14px 14px; }
.fr-send { flex: none; display: grid; place-items: center; width: 46px; height: 42px; padding: 0; cursor: pointer; color: #fff; border: 1px solid rgba(160, 255, 170, 0.45); border-radius: 99px; background: linear-gradient(#4cc950, #1f8a2a); }
.fr-send svg { width: 20px; height: 20px; }
.fr-send:disabled { filter: grayscale(0.7) brightness(0.75); }

/* ---- porte (pas de compte réel) */
.fr-gate-title { margin: 0 auto 0 4px; font: 800 22px/1 var(--pn-serif); color: var(--pn-gold); text-shadow: 0 2px 0 #4a3000; }
.fr-gate { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 24px 30px; text-align: center; color: var(--pn-tan); }
.fr-gate p { margin: 0; max-width: 300px; font-size: 14.5px; }
.fr-gate-ic svg { width: 52px; height: 52px; color: rgba(255, 210, 94, 0.6); }

@media (prefers-reduced-motion: reduce) { .fr, .fr-overlay, .fr-skel, .fr-add, .fr-plus svg { animation: none; transition: none; } }

@media (max-height: 640px) { .fr-wrap { height: 100%; } .fr-top { padding-top: 10px; padding-bottom: 8px; } .fr-room { height: 46px; } }

/* menu : entrée indisponible (ami hors ligne / en partie) et message passager */
.fr-mi:disabled { opacity: 0.38; cursor: default; }
.fr-mi:disabled:hover { background: none; }
.fr-toast {
  position: absolute; z-index: 7; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 9px 16px; border: 1px solid rgba(201, 164, 90, 0.6);
  border-radius: 99px; background: #131c33; color: var(--pn-cream); font: 700 13px/1.2 system-ui, sans-serif; text-align: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); animation: fr-menu 0.16s ease-out;
}
.fr-toast { width: max-content; }
.fr[data-view="chat"] .fr-toast, .fr[data-view="profile"] .fr-toast { bottom: 84px; }
.fr[data-view="profile"] .fr-toast { bottom: 24px; }

/* ================================================================== en partie (ui/GameSocial.js) : notification de message, icône du HUD, menu du profil */
/* carte de notification : sous le HUD, centrée ; s'envole vers l'avatar du joueur (animation pilotée en JS) */
.msg-toast {
  position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: calc(var(--gu) * 9); max-width: calc(100% - var(--gu) * 24); padding: calc(var(--gu) * 6) calc(var(--gu) * 14) calc(var(--gu) * 6) calc(var(--gu) * 7);
  color: var(--pn-cream); cursor: pointer; touch-action: manipulation; border: 1.5px solid rgba(201, 164, 90, 0.8); border-radius: 99px; background: rgba(13, 21, 39, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 224, 160, 0.1) inset; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transform-origin: 50% 50%;
  animation: mt-in 0.26s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@keyframes mt-in { from { opacity: 0; transform: translate(-50%, -14px) scale(0.92); } }
.msg-toast .fr-av { width: calc(var(--gu) * 34); height: calc(var(--gu) * 34); font-size: calc(var(--gu) * 15); }
.mt-txt { min-width: 0; display: grid; gap: 1px; text-align: left; }
.mt-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(var(--gu) * 13.5) / 1.15 var(--pn-serif, Georgia, serif); color: var(--pn-gold); text-shadow: 0 1px 0 #4a3000; }
.mt-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--gu) * 11); font-weight: 600; color: var(--pn-tan); }
.mt-ic svg { display: block; width: calc(var(--gu) * 20); height: calc(var(--gu) * 20); color: var(--pn-gold); }

/* avatar du joueur dans le HUD : zone tactile + icône de message (remplace le portrait tant qu'un message attend) */
.pl-hit { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pl-hit:focus-visible { outline: 2px solid var(--pn-gold); outline-offset: 1px; }
.pl-msg {
  position: absolute; inset: 7%; z-index: 1; display: none; place-items: center; border-radius: 50%; pointer-events: none; color: #3a2400;
  background: radial-gradient(circle at 36% 28%, #fff1b8, #f2b73a 60%, #c98a12); box-shadow: inset 0 -3px 6px rgba(120, 70, 0, 0.45), 0 0 10px rgba(255, 200, 70, 0.8);
}
.pl-msg svg { width: 54%; height: 54%; filter: drop-shadow(0 1px 0 rgba(255, 244, 207, 0.6)); }
.pl-msg-n {
  position: absolute; z-index: 4; pointer-events: none; min-width: calc(var(--gu) * 16); height: calc(var(--gu) * 16); padding: 0 calc(var(--gu) * 4); display: grid; place-items: center; border-radius: 99px; border: 2px solid #0d1527;
  background: #e8372c; color: #fff; font: 800 calc(var(--gu) * 9.5) / 1 system-ui, sans-serif; font-style: normal; font-variant-numeric: tabular-nums;
}
.pl-avatar.has-msg { background-image: none !important; } /* le portrait cède la place à l'icône */
.pl-avatar.has-msg .pl-msg { display: grid; animation: msg-pulse 1.5s ease-in-out infinite; }
.pl-avatar.has-msg .pl-msg.pop { animation: msg-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), msg-pulse 1.5s 0.5s ease-in-out infinite; }
@keyframes msg-pop { from { transform: scale(0.2); opacity: 0; } 60% { transform: scale(1.18); } }
@keyframes msg-pulse { 50% { box-shadow: inset 0 -3px 6px rgba(120, 70, 0, 0.45), 0 0 18px rgba(255, 210, 90, 1); } }

/* menu du profil (aucun message en attente) : contacts + raccourcis */
.pl-menu {
  position: absolute; z-index: 12; width: min(calc(var(--gu) * 252), calc(100% - 16px)); padding: calc(var(--gu) * 8); border: 1.5px solid rgba(201, 164, 90, 0.75); border-radius: calc(var(--gu) * 16);
  background: rgba(13, 21, 39, 0.97); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); color: var(--pn-cream); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  animation: pm-in 0.16s ease-out; transform-origin: 14% 0;
}
@keyframes pm-in { from { opacity: 0; transform: scale(0.94) translateY(-6px); } }
.pl-menu h4 { margin: calc(var(--gu) * 2) calc(var(--gu) * 6) calc(var(--gu) * 6); font: 800 calc(var(--gu) * 11) / 1 var(--pn-serif, Georgia, serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pn-tan); }
.pm-list { display: grid; gap: calc(var(--gu) * 2); max-height: calc(var(--gu) * 210); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 164, 90, 0.6) transparent; }
.pm-note { margin: calc(var(--gu) * 4) calc(var(--gu) * 6) calc(var(--gu) * 6); font-size: calc(var(--gu) * 12); color: var(--pn-tan); }
.pm-sep { height: 1px; margin: calc(var(--gu) * 6) 0; background: rgba(255, 224, 160, 0.16); }
.pm-row {
  position: relative; display: flex; align-items: center; gap: calc(var(--gu) * 10); width: 100%; min-height: calc(var(--gu) * 40); padding: calc(var(--gu) * 4) calc(var(--gu) * 8); text-align: left; cursor: pointer; touch-action: manipulation;
  color: var(--pn-cream); border: 0; border-radius: calc(var(--gu) * 11); background: none; font: 700 calc(var(--gu) * 13.5) / 1.2 system-ui, sans-serif;
}
.pm-row > svg { flex: none; width: calc(var(--gu) * 19); height: calc(var(--gu) * 19); color: var(--pn-tan); }
.pm-row:active, .pm-row:focus-visible { outline: none; background: rgba(255, 255, 255, 0.09); }
@media (hover: hover) { .pm-row:hover { background: rgba(255, 255, 255, 0.07); } }
.pm-friend .fr-av { width: calc(var(--gu) * 30); height: calc(var(--gu) * 30); font-size: calc(var(--gu) * 13); box-shadow: 0 0 0 1.5px #c9a45a; }
.pm-friend .fr-dot { width: calc(var(--gu) * 10); height: calc(var(--gu) * 10); border-width: 2px; }
.pm-main { flex: 1; min-width: 0; display: grid; }
.pm-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(var(--gu) * 13.5) / 1.2 var(--pn-serif, Georgia, serif); }
.pm-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--gu) * 10.5); font-weight: 600; color: #9aa3b5; }
.pm-friend.on .pm-main small { color: #7fe39a; }
.pm-friend.busy .pm-main small { color: #ffb02e; }
.pm-badge { flex: none; min-width: calc(var(--gu) * 18); height: calc(var(--gu) * 18); padding: 0 calc(var(--gu) * 5); display: grid; place-items: center; border-radius: 99px; background: #e8372c; color: #fff; font: 800 calc(var(--gu) * 10) / 1 system-ui, sans-serif; font-style: normal; }
@media (prefers-reduced-motion: reduce) { .msg-toast, .pl-menu, .pl-avatar.has-msg .pl-msg, .pl-avatar.has-msg .pl-msg.pop { animation: none; } }

.pl-msg-n[hidden] { display: none; }

/* menu de l'avatar : section « Message reçu », ligne de danger (Quitter) */
.pm-notif:empty { display: none; }
.pm-h-new { color: #ffd25e !important; }
.pm-new { background: rgba(255, 210, 94, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 210, 94, 0.45); }
.pm-new .pm-main small { color: #ffd25e; }
.pm-go svg { display: block; width: calc(var(--gu) * 20); height: calc(var(--gu) * 20); color: #ffd25e; }
.pm-row.danger, .pm-row.danger > svg { color: #ff8a80; }

/* ---- pied : « Rejoindre un salon » (code d'un ami) */
.fr-join { display: flex; gap: 8px; margin-top: 10px; }
.fr-join .fr-input { letter-spacing: 0.22em; text-align: center; }