/* Boitajeux — amis : écran « Mes amis », bandeau de l'accueil, invitations dans le salon, alertes */

/* Pastille « demande d'ami » sur le compte, code dans le menu */
.cl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 2px var(--surface); flex: none; margin-left: -4px; }
.cl-menu-tag { font: 700 13px var(--f-body); color: var(--muted); margin-left: 2px; letter-spacing: .04em; }

/* Pseudo#CODE : le code se lit à part */
.fr-handle { font-weight: 800; color: var(--fg); overflow-wrap: anywhere; }
.fr-tag { font-weight: 700; color: var(--muted); letter-spacing: .05em; margin-left: 1px; }

/* --- Écran --- */
.wrap.fr-wrap { max-width: 860px; }
.fr-desk { align-items: stretch; }

/* La carte « Mon code ami » : une carte de membre bleue */
.fr-card { flex: 1 1 280px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #2c58d6; color: #fff;
  box-shadow: 0 1px 0 rgba(43, 34, 56, .08), 0 12px 24px -12px rgba(28, 46, 120, .7); transform: rotate(-1deg); }
.fr-card-band { font: 400 18px/1 var(--f-display); letter-spacing: .02em; padding: 12px 16px 0; color: rgba(255, 255, 255, .8); }
.fr-card-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 16px 4px; }
.fr-card-code .fr-handle { font: 400 30px/1.05 var(--f-display); color: #fff; letter-spacing: .01em; }
.fr-card-code .fr-tag { display: inline-block; margin-left: 6px; padding: 3px 9px 2px; border-radius: 8px; background: var(--sun); color: #3a2a00; font: 400 22px/1 var(--f-display); letter-spacing: .08em; vertical-align: 3px; transform: rotate(-3deg); }
.fr-card .btn { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.fr-card .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .26); }
.fr-card-help { padding: 6px 16px 14px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.fr-add small { font-size: 13px; color: rgba(58, 42, 0, .72); }
.fr-add input { text-transform: none; letter-spacing: .02em; }

/* Listes d'amis */
.fr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.fr-row:first-child { border-top: 0; }
.fr-row .cl-av { width: 40px; height: 40px; font-size: 15px; }
.fr-row.off .cl-av { filter: grayscale(.8); opacity: .65; }
.fr-who { display: flex; flex-direction: column; gap: 1px; flex: 1 1 180px; min-width: 0; }
.fr-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.fr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #b8ad9f; }
.on .fr-dot { background: var(--ok); }
.room .fr-dot { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.play .fr-dot { background: var(--hot); }
.room .fr-st, .play .fr-st { color: var(--fg); font-weight: 700; }
.fr-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
.fr-n { display: inline-block; min-width: 20px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.fr-rm { color: var(--muted); }
.fr-count { font: 700 14px var(--f-body); color: var(--ok); margin-left: 4px; vertical-align: 2px; }
.fr-in { box-shadow: inset 4px 0 0 var(--hot), 0 12px 24px -16px rgba(43, 34, 56, .5) !important; }
.fr-empty { padding: 18px 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.fr-guest .actions { margin-top: 4px; }

/* Collection d'un ami */
.wrap.fr-wrap.fr-col { max-width: 1140px; }
.fr-back { align-self: flex-start; }
.fr-back::before { content: "‹"; margin-right: 6px; font-size: 18px; line-height: 0; }
.fr-col-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.fr-col-head > div { flex: 1 1 220px; min-width: 0; }
.fr-col-head .cl-av { width: 48px; height: 48px; font-size: 18px; }
.fr-col-head h2 { font-size: 28px; color: var(--fg); }
.fr-cell { position: relative; }
.fr-ribbon { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font: 800 12px/1 var(--f-body); color: #3a2a00; background: var(--sun); padding: 5px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(43, 34, 56, .3); }

/* --- Bandeau de l'accueil --- */
.fr-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 14px; background: var(--surface);
  box-shadow: 0 1px 0 rgba(43, 34, 56, .07), 0 12px 24px -16px rgba(43, 34, 56, .5); }
.fr-strip-t { font: 400 20px/1 var(--f-display); color: var(--accent); }
.fr-strip > p { flex: 1 1 220px; font-size: 14px; }
.fr-strip.quiet { background: color-mix(in srgb, var(--surface) 60%, transparent); box-shadow: none; border: 1.5px dashed rgba(43, 34, 56, .2); }
.fr-minis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; }
.fr-mini { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 5%, transparent); min-width: 0; }
.fr-mini:not(:has(.btn)) { padding-right: 14px; }
.fr-mini .cl-av { width: 32px; height: 32px; }
.fr-mini-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.fr-mini-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mini-t small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fr-mini.room .fr-mini-t small { color: var(--accent); font-weight: 700; }
.fr-mini.play .fr-mini-t small { color: var(--hot); font-weight: 700; }
.fr-mini .cl-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.fr-mini.room .cl-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.fr-mini.play .cl-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--hot); }
.fr-pill { font: 800 13px var(--f-body); color: #fff; background: var(--hot); border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.fr-pill:hover { filter: brightness(1.08); }

/* --- Alertes : en haut à droite, au-dessus de tout (jeux compris, d'où les couleurs fixes) --- */
#fr-notices { --surface: #fffaf1; --fg: #2b2238; --muted: #76695b; --line: rgba(43, 34, 56, .15); --glass: rgba(43, 34, 56, .05);
  --accent: #2c58d6; --accent-ink: #fff; --hot: #e0492c; --sun: #f5c13b;
  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif; --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: fixed; z-index: 28; top: calc(56px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  width: min(360px, calc(100vw - 28px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; color: var(--fg); font-family: var(--f-body); }
#fr-notices:empty { display: none; }
.fr-note { position: relative; pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 16px; border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: 0 2px 0 rgba(43, 34, 56, .1), 0 18px 38px -10px rgba(20, 14, 30, .55); border-top: 5px solid var(--accent);
  animation: fr-in .38s cubic-bezier(.2, .9, .3, 1.2) both; }
.fr-note-knock { border-top-color: var(--sun); }
.fr-note-request { border-top-color: var(--hot); }
.fr-note .cl-av { width: 40px; height: 40px; font-size: 15px; }
.fr-note-knock .cl-av { animation: fr-knock 1.2s .3s ease-in-out 2; }
.fr-note-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.fr-note h3 { font: 400 18px/1.1 var(--f-display); color: var(--fg); }
.fr-note p { font-size: 14px; line-height: 1.35; }
.fr-note .actions { margin-top: 4px; }
.fr-note .btn { font-family: var(--f-body); border-color: var(--line); background: var(--glass); color: var(--fg); }
.fr-note .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.fr-note-time { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--sun); transform-origin: left; animation-name: fr-time; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes fr-in { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes fr-time { to { transform: scaleX(0); } }
@keyframes fr-knock { 0%, 100% { transform: none; } 10%, 30% { transform: rotate(-9deg); } 20%, 40% { transform: rotate(9deg); } 50% { transform: none; } }
body.in-table #fr-notices { top: calc(52px + env(safe-area-inset-top, 0px)); }

/* Mode nuit */
html[data-mode="night"] .fr-strip.quiet { border-color: var(--line); }
html[data-mode="night"] .fr-card { box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .8); }
html[data-mode="night"] .fr-row.off .cl-av { opacity: .5; }
html[data-mode="night"] #fr-notices { --surface: #2a2231; --fg: #f1e8d9; --muted: #ab9e8e; --line: rgba(241, 232, 217, .14); --glass: rgba(241, 232, 217, .07);
  --accent: #7d9bff; --accent-ink: #0f1430; --hot: #ff6b4a; }
html[data-mode="night"] .fr-note { box-shadow: 0 0 0 1px rgba(241, 232, 217, .1), 0 18px 38px -10px rgba(0, 0, 0, .8); }

@media (max-width: 640px) {
  .fr-card-code .fr-handle { font-size: 26px; }
  .fr-card-code .fr-tag { font-size: 19px; }
  .fr-acts { margin-left: 52px; justify-content: flex-start; }
  .fr-strip .btn { margin-left: auto; }
  #fr-notices { left: 12px; right: 12px; width: auto; top: calc(10px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .fr-note, .fr-note-knock .cl-av { animation: none; }
  .fr-note-time { display: none; }
}