/* ============================================================
   DemanPlay · profile-card.css — 用户名片浮层 v2
   6 模板(neon/sakura/gilded/minimal/mecha/cyber)× 双身份(陪玩/老板)
   放在 play.css / play-neon.css 之后加载。
   仅依赖全局字体变量(--cn/--mono/--hud/--display),颜色全部自带。
   ============================================================ */

/* ---------- 浮层挂载点 ---------- */
#dp-card-pop{ position:absolute; z-index:600; } /* absolute=钉在锚点旁随内容滚动(fixed 会视觉上跟着滚动漂移) */
#dp-card-pop .dp-card{ animation:dpcIn .16s ease-out both; }
@keyframes dpcIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } }

/* ---------- 基础卡体(默认 = 01 暗黑霓虹 neon) ---------- */
.dp-card{
  --pc-r:18px;
  --pc-bg:linear-gradient(168deg,#181226,#0e0a18);
  --pc-border:linear-gradient(180deg,rgba(166,120,255,.55),rgba(166,120,255,.14) 55%,rgba(94,234,255,.22));
  --pc-accent:#a678ff;
  --pc-accent-2:#5eeaff;
  --pc-gold:#f0c46a;
  --pc-text:#f4f0ff;
  --pc-dim:#bcb2d8;
  --pc-mute:#8f86b3;
  --pc-line:rgba(255,255,255,.10);
  --pc-chip:rgba(255,255,255,.045);
  --pc-glow:0 0 0 1px rgba(166,120,255,.12), 0 0 32px -8px rgba(166,120,255,.5), 0 26px 60px -26px rgba(0,0,0,.85);
  --pc-deco:
    radial-gradient(120% 95% at 85% -30%, rgba(166,120,255,.55), transparent 60%),
    radial-gradient(90% 80% at 0% -20%, rgba(94,234,255,.26), transparent 55%);
  --pc-av-ring:#171129;

  width:var(--pc-w,310px);
  border-radius:var(--pc-r);
  border:1.5px solid transparent;
  background:var(--pc-bg) padding-box, var(--pc-border) border-box;
  box-shadow:var(--pc-glow);
  color:var(--pc-text);
  font-family:var(--cn,"Noto Sans SC",system-ui,sans-serif);
  position:relative;
  overflow:hidden;
}
.dp-card, .dp-card *{ box-sizing:border-box; }
.dp-card button{ font-family:inherit; }

/* ---------- 关闭键(pin 态) ---------- */
.dpc-close{
  position:absolute; top:9px; right:9px; z-index:5;
  width:24px; height:24px; border-radius:8px;
  border:1px solid rgba(255,255,255,.18); background:rgba(8,6,14,.5); color:#fff;
  cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:400 14px/1 sans-serif; display:grid; place-items:center; padding:0;
}
.dpc-close:hover{ background:rgba(8,6,14,.8); }

/* ---------- 封面区(photo 或模板氛围) ---------- */
.dpc-cover{
  height:132px; position:relative;
  background:var(--pc-deco);
  background-size:cover; background-position:center;
}
.dp-card[data-has-photo] .dpc-cover{ height:150px; background:#14101f; }
.dpc-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(10,8,18,.55)); }
.dp-card[data-has-photo] .dpc-cover::after{ z-index:2; background:linear-gradient(180deg,rgba(10,8,18,.10) 0%,transparent 40%,rgba(10,8,18,.70)); }
/* 上传照片(2026-07-28 用户:「不管多大都不是铺满,默认平铺是不是会美观一点」)
   原设计是 模糊放大填底 + 完整原图 contain 居中 —— 好处是整图可见,代价是几乎每张图都留黑边,
   看起来像没铺满。改成 cover 铺满(会裁掉溢出的边缘,但视觉干净得多)。
   底下那层模糊图保留:透明 PNG / 加载中时仍有东西垫着,不会露出空白。 */
.dpc-cf{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:blur(16px) saturate(1.15) brightness(.78); transform:scale(1.25); }
.dpc-cp{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; background-repeat:no-repeat; }

/* ---------- 头部:头像 + 名字 + 徽章 + 数据 ---------- */
.dpc-head{ display:flex; gap:11px; align-items:flex-end; padding:0 16px; margin-top:-26px; position:relative; z-index:2; }
.dpc-av{
  width:56px; height:56px; border-radius:50%; flex:none;
  display:grid; place-items:center; overflow:hidden;
  background-size:cover; background-position:center;
  border:2.5px solid var(--pc-av-ring);
  font:italic 800 20px var(--display,"Saira","Noto Sans SC",sans-serif); color:#fff;
}
.dpc-who{ min-width:0; flex:1; padding-bottom:2px; }
.dpc-name{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:16px; letter-spacing:-.01em; line-height:1.25; }
.dpc-name .dpc-nm{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dpc-idbadge{
  flex:none; font-family:var(--hud,"Chakra Petch","Noto Sans SC",sans-serif);
  font-weight:700; font-size:9.5px; letter-spacing:.05em;
  padding:3px 7px; border-radius:6px;
  background:color-mix(in srgb, var(--pc-accent) 20%, transparent);
  color:var(--pc-accent);
  border:1px solid color-mix(in srgb, var(--pc-accent) 40%, transparent);
}
.dpc-idbadge.gold{ background:linear-gradient(135deg,#f4d992,#c89a3f); color:#3a2600; border-color:transparent; }
.dpc-stats{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; color:var(--pc-mute); margin-top:3px; display:flex; align-items:center; gap:5px; }
.dpc-stats .star{ color:var(--pc-gold); }

/* ---------- 卡身 ---------- */
.dpc-body{ padding:12px 16px 14px; display:flex; flex-direction:column; gap:11px; }
.dpc-lb{
  font-family:var(--mono,ui-monospace,monospace); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--pc-mute); margin-bottom:6px;
}
.dpc-tags{ display:flex; flex-wrap:wrap; gap:5px; }

/* 身份组标签(沿用 rtag 视觉语言,--rc 取色) */
.dpc-rtag{
  font-weight:600; font-size:12px; padding:4px 10px 4px 8px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; line-height:1; white-space:nowrap;
  background:color-mix(in srgb, var(--rc,var(--pc-accent)) 16%, transparent);
  color:var(--rc,var(--pc-accent));
  border:1px solid color-mix(in srgb, var(--rc,var(--pc-accent)) 34%, transparent);
}
.dpc-rtag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--rc,var(--pc-accent)); flex:none; }

/* 个人标签(星座/MBTI/风格/自定义,可带小图标)— 与资质 rtag 区分:圆角胶囊,无圆点 */
.dpc-ptag{
  font-weight:600; font-size:12px; padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px; line-height:1; white-space:nowrap;
  background:color-mix(in srgb, var(--pk,#c084fc) 15%, transparent);
  color:color-mix(in srgb, var(--pk,#c084fc) 80%, var(--pc-text));
  border:1px solid color-mix(in srgb, var(--pk,#c084fc) 38%, transparent);
}
.dpc-pk-zodiac{ --pk:#c084fc; }
.dpc-pk-mbti{ --pk:#7dd3fc; }
.dpc-pk-style{ --pk:#6ee7b7; }
.dpc-pk-custom{ --pk:#f0c46a; }
.dpc-picon{ width:14px; height:14px; border-radius:4px; object-fit:cover; flex:none; }

/* 游戏·段位 */
.dpc-gp{
  font-weight:600; font-size:12px; padding:4px 10px; border-radius:8px; white-space:nowrap;
  background:var(--pc-chip); border:1px solid var(--pc-line); color:var(--pc-dim);
  display:inline-flex; gap:6px; align-items:center;
}
.dpc-gp b{ color:var(--pc-accent-2); font-weight:700; }

.dpc-bio{ font-size:12.5px; line-height:1.65; color:var(--pc-dim); }
.dpc-bio-empty{ font-style:italic; color:var(--pc-mute,var(--pc-dim)); opacity:.72; }

/* ---------- 语音签名 ---------- */
.dpc-voice{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px;
  cursor:pointer; user-select:none;
  background:color-mix(in srgb, var(--pc-accent,#a678ff) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--pc-accent,#a678ff) 28%, transparent);
  transition:border-color .15s;
}
.dpc-voice:hover{ border-color:color-mix(in srgb, var(--pc-accent,#a678ff) 55%, transparent); }
.dpc-play{
  width:26px; height:26px; border-radius:50%; border:0; flex:none; cursor:pointer;
  display:grid; place-items:center; padding:0;
  background:var(--pc-accent,#a678ff); color:#100a1e;
}
.dpc-play svg{ width:11px; height:11px; display:block; }
.dpc-voice .ic-pause{ display:none; }
.dpc-voice.playing .ic-play{ display:none; }
.dpc-voice.playing .ic-pause{ display:block; }
.dpc-wave{ flex:1; display:flex; align-items:center; gap:2.5px; height:20px; }
.dpc-wave i{
  flex:1; max-width:4px; min-width:2.5px; border-radius:2px;
  background:color-mix(in srgb, var(--pc-accent,#a678ff) 70%, #fff 8%);
  opacity:.8; transform-origin:center;
}
.dpc-wave i:nth-child(1){ height:38%; } .dpc-wave i:nth-child(2){ height:62%; }
.dpc-wave i:nth-child(3){ height:48%; } .dpc-wave i:nth-child(4){ height:85%; }
.dpc-wave i:nth-child(5){ height:58%; } .dpc-wave i:nth-child(6){ height:100%; }
.dpc-wave i:nth-child(7){ height:52%; } .dpc-wave i:nth-child(8){ height:78%; }
.dpc-wave i:nth-child(9){ height:44%; } .dpc-wave i:nth-child(10){ height:92%; }
.dpc-wave i:nth-child(11){ height:56%; } .dpc-wave i:nth-child(12){ height:70%; }
.dpc-voice.playing .dpc-wave i{ animation:dpcWave .8s ease-in-out infinite alternate; }
.dpc-voice.playing .dpc-wave i:nth-child(3n){ animation-delay:.14s; }
.dpc-voice.playing .dpc-wave i:nth-child(3n+1){ animation-delay:.30s; }
@keyframes dpcWave{ from{ transform:scaleY(.4); } to{ transform:scaleY(1.05); } }
.dpc-vlen{ font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; color:var(--pc-mute,#8f86b3); flex:none; }

/* ---------- 底部动作 ---------- */
.dpc-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.dpc-actions button{
  font-weight:700; font-size:12.5px; line-height:1; padding:10px 0;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--pc-accent) 38%, transparent);
  background:color-mix(in srgb, var(--pc-accent) 13%, transparent);
  color:var(--pc-text); cursor:pointer; transition:.15s;
}
.dpc-actions button:hover{
  color:#fff;
  border-color:color-mix(in srgb, var(--pc-accent) 70%, transparent);
  background:color-mix(in srgb, var(--pc-accent) 26%, transparent);
  box-shadow:0 4px 14px -6px color-mix(in srgb, var(--pc-accent) 60%, transparent);
}
.dpc-full{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 0 1px; margin-top:1px; border-top:1px solid var(--pc-line);
  font-weight:600; font-size:12px; color:var(--pc-accent); text-decoration:none;
}
.dpc-full:hover{ text-decoration:underline; }

/* ============================================================
   02 粉色少女 sakura
   ============================================================ */
.dpc-sakura{
  --pc-r:22px;
  --pc-bg:linear-gradient(165deg,#26101b,#150a11);
  --pc-border:linear-gradient(180deg,rgba(255,143,193,.6),rgba(255,143,193,.14) 60%,rgba(255,184,138,.28));
  --pc-accent:#ff8fc1;
  --pc-accent-2:#ffb88a;
  --pc-text:#fff0f7;
  --pc-dim:#dcb6c9;
  --pc-mute:#ab8093;
  --pc-glow:0 0 0 1px rgba(255,143,193,.12), 0 0 32px -8px rgba(255,143,193,.45), 0 26px 60px -26px rgba(0,0,0,.85);
  --pc-deco:
    radial-gradient(120% 100% at 85% -30%, rgba(255,143,193,.55), transparent 62%),
    radial-gradient(80% 70% at 5% -10%, rgba(255,184,138,.30), transparent 55%);
  --pc-av-ring:#22101a;
}
.dpc-sakura .dpc-cover::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.32) 1px, transparent 1.5px);
  background-size:11px 11px;
  -webkit-mask:linear-gradient(180deg,#000,transparent); mask:linear-gradient(180deg,#000,transparent);
}

/* ============================================================
   03 金色高奢 gilded
   ============================================================ */
.dpc-gilded{
  --pc-r:16px;
  --pc-bg:linear-gradient(172deg,#1d170b,#100c06 60%,#151007);
  --pc-border:linear-gradient(155deg,#f4d992,#7c5f28 38%,#f7e6b1 62%,#5d461c);
  --pc-accent:#e8c87e;
  --pc-accent-2:#f4d992;
  --pc-gold:#f4d992;
  --pc-text:#f8f2e2;
  --pc-dim:#cec19d;
  --pc-mute:#98895f;
  --pc-line:rgba(244,217,146,.16);
  --pc-chip:rgba(244,217,146,.05);
  --pc-glow:0 0 0 1px rgba(244,217,146,.10), 0 0 30px -10px rgba(244,217,146,.35), 0 26px 60px -26px rgba(0,0,0,.9);
  --pc-deco:
    radial-gradient(130% 100% at 80% -35%, rgba(244,217,146,.42), transparent 60%),
    linear-gradient(120deg, transparent 30%, rgba(244,217,146,.13) 45%, transparent 60%);
  --pc-av-ring:#2a2110;
}
.dpc-gilded .dpc-name{ font-family:var(--display,"Saira","Noto Sans SC",sans-serif); font-style:italic; letter-spacing:.01em; }

/* ============================================================
   04 极简纯色 minimal(无封面,信息优先)
   ============================================================ */
.dpc-minimal{
  --pc-r:14px;
  --pc-bg:linear-gradient(#17151e,#17151e);
  --pc-border:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16));
  --pc-accent:#a78bfa;
  --pc-accent-2:#a78bfa;
  --pc-glow:0 18px 44px -22px rgba(0,0,0,.7);
  --pc-deco:none;
  --pc-av-ring:transparent;
}
.dpc-minimal .dpc-cover{ display:none; }
.dpc-minimal .dpc-head{ margin-top:16px; }

/* ============================================================
   05 电竞机能 mecha(切角 + HUD)
   ============================================================ */
.dpc-mecha{
  --pc-r:6px;
  --pc-bg:linear-gradient(180deg,#131820,#0b0e14);
  --pc-border:linear-gradient(180deg,rgba(94,234,255,.65),rgba(94,234,255,.16));
  --pc-accent:#5eeaff;
  --pc-accent-2:#f5d90a;
  --pc-text:#ecf5fa;
  --pc-dim:#a9bcc9;
  --pc-mute:#71838f;
  --pc-glow:0 0 0 1px rgba(94,234,255,.10), 0 0 28px -8px rgba(94,234,255,.4), 0 26px 60px -26px rgba(0,0,0,.9);
  --pc-deco:
    repeating-linear-gradient(90deg, rgba(94,234,255,.12) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgba(94,234,255,.08) 0 1px, transparent 1px 13px),
    linear-gradient(120deg, rgba(94,234,255,.28), transparent 65%);
  --pc-av-ring:#101820;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
}
.dpc-mecha .dpc-name{ font-family:var(--hud,"Chakra Petch","Noto Sans SC",sans-serif); }
.dpc-mecha .dpc-lb::before{ content:"// "; }
.dpc-mecha .dpc-voice,
.dpc-mecha .dpc-play,
.dpc-mecha .dpc-rtag,
.dpc-mecha .dpc-gp,
.dpc-mecha .dpc-actions button{ border-radius:4px; }
.dpc-mecha .dpc-idbadge{ border-radius:3px; }
.dpc-mecha .dpc-actions button{ font-family:var(--hud,"Chakra Petch","Noto Sans SC",sans-serif); }

/* ============================================================
   06 赛博渐变 cyber(三色渐变描边 + 渐变名字)
   ============================================================ */
.dpc-cyber{
  --pc-r:18px;
  --pc-bg:linear-gradient(160deg,#161231,#0d1024 55%,#1a0f2b);
  --pc-border:linear-gradient(120deg,#9d6bff,#5eeaff 45%,#ff7ad9);
  --pc-accent:#8fa2ff;
  --pc-accent-2:#ff7ad9;
  --pc-text:#f1f2ff;
  --pc-dim:#b9bfe6;
  --pc-mute:#858cba;
  --pc-glow:0 0 0 1px rgba(157,107,255,.14), 0 0 34px -8px rgba(94,234,255,.32), 0 0 40px -12px rgba(255,122,217,.32), 0 26px 60px -26px rgba(0,0,0,.85);
  --pc-deco:
    radial-gradient(100% 90% at 20% -20%, rgba(94,234,255,.4), transparent 55%),
    radial-gradient(110% 90% at 90% -25%, rgba(255,122,217,.45), transparent 60%),
    radial-gradient(80% 100% at 50% 120%, rgba(157,107,255,.4), transparent 60%);
  --pc-av-ring:#141230;
}
.dpc-cyber .dpc-name .dpc-nm{
  background:linear-gradient(90deg,#b79dff,#7fe8ff 55%,#ff9be2);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}