/* Floating profile card (Discord style): opens next to the avatar or name that was clicked; a sheet on phones. */
#pop-root:empty{display:none}
.pop-layer{position:fixed;inset:0;z-index:60}
.pop-scrim{position:absolute;inset:0;background:transparent}
.pop-card{
  --presence-online:#5fd99a;--presence-ingame:#63e5ff;--presence-away:#ffc24a;--presence-dnd:#ff5e6c;
  position:fixed;left:50%;top:80px;width:340px;max-height:calc(100dvh - 24px - var(--fx-bleed-top,0px) - var(--fx-bleed,0px));
  display:flex;flex-direction:column;isolation:isolate;border-radius:18px;background:var(--surface,#1b161e);color:var(--ink);
  box-shadow:0 18px 60px #000000a6,0 0 0 1px #ffffff14;outline:none;animation:pop-in .16s var(--ease,ease-out)
}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.pop-card>.fx-background{position:absolute;inset:0;z-index:0;border-radius:inherit}
.pop-card>:not(.fx-background,.fx-border){position:relative;z-index:1}
.pop-card:not(.has-fx-border){overflow:hidden}
.pop-banner.profile-banner{flex:none;height:120px;border-radius:18px 18px 0 0;overflow:hidden;background:var(--profile-bg);border:0}
.pop-close{position:absolute!important;z-index:9!important;right:10px;top:10px;width:30px;height:30px;border-radius:50%;border:0;background:#0d0a10b3;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.pop-close:hover{background:#0d0a10e6}
.pop-avatar{flex:none;margin:-48px 0 0 18px;width:max-content}
.pop-avatar .avatar{box-shadow:0 0 0 5px var(--surface,#1b161e)}
.pop-body{display:grid;gap:12px;padding:10px 18px 18px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.pop-head{display:grid;gap:3px}
.pop-head h2{margin:0;font:800 22px/1.15 var(--font-display,var(--font));overflow-wrap:anywhere}
.pop-head small{color:var(--muted);font-size:13px}
.pop-you{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#10171c;background:var(--accent,#ff9e57);border-radius:4px;padding:1px 5px;vertical-align:4px}
.pop-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px;font-size:12px;color:var(--muted)}
.pop-playing{justify-self:start;font-size:12px;font-weight:700;color:#63e5ff}
.pop-actions{display:flex;flex-wrap:wrap;gap:8px}
.pop-actions .btn{min-height:36px;padding:7px 14px;font-size:13px}
.pop-friends{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#5fd99a}
.pop-section{display:grid;gap:6px;padding:12px;border-radius:12px;background:#0d0a1066}
.pop-section h3{margin:0;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pop-section p{margin:0;font-size:13px;line-height:1.5}
.pop-bio{white-space:pre-line;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.pop-games{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pop-games li{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;font-weight:700}
.pop-games .game-art{width:54px;height:26px;border-radius:6px;overflow:hidden}
.pop-games .game-art img{width:100%;height:100%;object-fit:cover}
.pop-games span:not(.game-art){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-games b{font-size:10px;color:#5fd99a;text-transform:uppercase;letter-spacing:.4px}
.pop-full{justify-self:start;padding:0;border:0;background:none;color:var(--accent,#ff9e57);font-weight:800;font-size:13px;cursor:pointer}
.pop-full:hover{text-decoration:underline}
/* the card's own colours, like on the profile page */
.pop-card.has-card-color{background:var(--card-fill)}
.pop-card.has-card-color .pop-avatar .avatar{box-shadow:0 0 0 5px var(--card-a,var(--surface))}
.pop-card.has-card-text :is(.pop-head h2,.pop-section p,.pop-games li){color:var(--card-text)}
.pop-card.has-card-text :is(.pop-head small,.pop-status,.presence,.pop-section h3){color:var(--card-text);opacity:.8}
.pop-card .nfx.has-color{color:var(--nfx-c)}
.pop-card.has-fx-bg .pop-section{background:#0b0a16a6;backdrop-filter:blur(4px)}
/* phones: a sheet at the bottom with a dimmed page behind it */
@media (max-width:730px){
  .pop-scrim{background:#0008}
  .pop-card{left:12px!important;right:12px;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:calc(86dvh - var(--fx-bleed-top,0px))}
  .pop-card.has-fx-border{--fx-bleed-max:12px}
}
@media (prefers-reduced-motion:reduce){.pop-card{animation:none}}
/* Minimal card (2026-11-11): name, tag, status and the profile text; everything else is on the profile page. */
.pop-bio{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.pop-card.has-card-text .pop-bio{color:var(--card-text)}