/* ══════════════════════════════════════════════════════════
   pc-ui.css — 个人中心 v3
   ──────────────────────────────────────────────────────────
   结构：左侧常驻导航 + 右侧内容区
     总览：夜樱 hero（头像 / 徽章 / 状态 / 精选成就）→ 六项数据 →
           活跃足迹热力图 + 最近对局 → 抽奖 / 后台入口
     子页：徽章与成就、游戏记录、主题、壁纸、账号、音效与界面、导航、时区、聊天室
   图标一律走 brand.js 的 SVG 雪碧图，颜色跟随主题。
   app.css 里还留着旧版单栏的 .pc-* 规则，这里全部用 #player-center-modal 前缀压过去。
   ══════════════════════════════════════════════════════════ */

#player-center-modal{
  --pc-num:"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --pc-shell:#130F1D;
  --pc-rail:#0F0B17;
  --pc-panel:#1A1526;
  --pc-panel-2:#221B31;
  --pc-panel-3:#2A2240;
  --pc-line:rgba(255,255,255,.07);
  --pc-line-2:rgba(255,255,255,.13);
  --pc-ink:#F4EFF8;
  --pc-ink-2:#AFA2BF;
  --pc-ink-3:#716584;
  --pc-petal:#F7A8C8;
  --pc-violet:#A98BFF;
  --pc-gold:#F5C563;
  --pc-mint:#5DE0A6;
  --pc-red:#FB7185;
  --pc-spring:cubic-bezier(.16,1,.3,1);
  --pc-bounce:cubic-bezier(.3,1.5,.5,1);
}
body.theme-light #player-center-modal{
  --pc-shell:#FFF6FA; --pc-rail:#FCEAF2; --pc-panel:#FFFFFF; --pc-panel-2:#FDF1F6; --pc-panel-3:#F8E3EE;
  --pc-line:rgba(150,60,100,.10); --pc-line-2:rgba(150,60,100,.19);
  --pc-ink:#3A1F2E; --pc-ink-2:#86606F; --pc-ink-3:#B28E9E;
  --pc-petal:#D4548A; --pc-violet:#7C5BD6; --pc-gold:#B07A1E; --pc-mint:#0F9D6E; --pc-red:#E11D48;
  background:radial-gradient(ellipse at 50% 40%, rgba(250,225,238,.55), rgba(238,205,222,.75));
}
#player-center-modal svg.ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle;overflow:visible;pointer-events:none}
#player-center-modal .pc-hide-always{display:none !important}

/* ══ 外壳 ══════════════════════════════════════════════════ */
#player-center-modal .pc-shell{
  width:1080px; max-width:calc(100vw - 32px);
  height:720px; max-height:calc(100dvh - 40px);
  display:grid; grid-template-columns:232px minmax(0,1fr);
  background:var(--pc-shell); color:var(--pc-ink);
  border:1px solid var(--pc-line-2); border-radius:26px;
  box-shadow:0 50px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:none; -webkit-backdrop-filter:none; overflow:hidden;
}
#player-center-modal .pc-main{display:flex; flex-direction:column; min-height:0; min-width:0}

/* ══ 左侧导航 ═══════════════════════════════════════════════ */
#player-center-modal .pc-rail{
  display:flex; flex-direction:column; min-height:0;
  background:
    radial-gradient(120% 30% at 0% 0%, rgba(247,168,200,.10), transparent 70%),
    var(--pc-rail);
  border-right:1px solid var(--pc-line);
}
#player-center-modal .pc-rail-id{display:flex; align-items:center; gap:12px; padding:22px 18px 18px; border-bottom:1px solid var(--pc-line)}
#player-center-modal .pc-rail-av{
  position:relative; width:44px; height:44px; flex:none; border-radius:14px; overflow:visible;
  display:grid; place-items:center; font-size:20px;
  background:linear-gradient(140deg,#3A2B4E,#241B33);
  box-shadow:0 0 0 1.5px rgba(247,168,200,.55), 0 6px 16px -8px rgba(247,168,200,.7);
}
#player-center-modal .pc-rail-av img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:14px}
#player-center-modal .pc-rail-dot{position:absolute; right:-3px; bottom:-3px; width:12px; height:12px; border-radius:50%; background:var(--pc-mint); border:2.5px solid var(--pc-rail); z-index:2}
#player-center-modal .pc-rail-who{min-width:0}
#player-center-modal .pc-rail-name{font-size:14.5px; font-weight:650; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:128px}
#player-center-modal .pc-rail-uid{font:500 11px/1 var(--pc-num); color:var(--pc-ink-3); margin-top:5px}
#player-center-modal .pc-rail-nav{flex:1; overflow-y:auto; padding:12px 10px; scrollbar-width:none}
#player-center-modal .pc-rail-nav::-webkit-scrollbar{display:none}
#player-center-modal .pc-rail-grp{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; color:var(--pc-ink-3); letter-spacing:.18em; padding:14px 10px 6px}
#player-center-modal .pc-rail-grp::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--pc-line),transparent)}
#player-center-modal .pc-rail-i{
  position:relative; display:flex; align-items:center; gap:11px; width:100%; margin:1px 0;
  padding:9px 11px; border-radius:11px; border:0; background:transparent; cursor:pointer; text-align:left;
  color:var(--pc-ink-2); font-weight:500; font-size:13.5px; line-height:1.2; font-family:inherit;
  transition:background .18s var(--pc-spring), color .18s var(--pc-spring);
}
#player-center-modal .pc-rail-i span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#player-center-modal .pc-rail-i .pc-rail-ic{width:18px; height:18px; color:var(--pc-ink-3); transition:color .18s, transform .3s var(--pc-bounce)}
#player-center-modal .pc-rail-i:hover{background:rgba(255,255,255,.05); color:var(--pc-ink)}
#player-center-modal .pc-rail-i:hover .pc-rail-ic{transform:scale(1.1); color:var(--pc-ink-2)}
body.theme-light #player-center-modal .pc-rail-i:hover{background:rgba(150,60,100,.06)}
#player-center-modal .pc-rail-i.on{
  color:var(--pc-ink); font-weight:650;
  background:linear-gradient(95deg, rgba(247,168,200,.20), rgba(169,139,255,.10));
  box-shadow:inset 0 0 0 1px rgba(247,168,200,.24), 0 8px 20px -14px rgba(247,168,200,.8);
}
#player-center-modal .pc-rail-i.on .pc-rail-ic{color:var(--pc-petal)}
#player-center-modal .pc-rail-i.on::before{
  content:''; position:absolute; left:-10px; top:50%; width:3px; height:18px; margin-top:-9px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--pc-petal),var(--pc-violet)); box-shadow:0 0 10px rgba(247,168,200,.6);
}
#player-center-modal .pc-rail-i:focus-visible{outline:2px solid var(--pc-petal); outline-offset:1px}
#player-center-modal .pc-rail-n{font-style:normal; min-width:18px; height:18px; padding:0 6px; border-radius:9px; display:none; align-items:center; justify-content:center;
  font:800 10px/1 system-ui; color:var(--pc-mint); background:rgba(93,224,166,.13)}
#player-center-modal .pc-rail-n.show{display:inline-flex}
#player-center-modal .pc-rail-foot{padding:12px; border-top:1px solid var(--pc-line)}
#player-center-modal .pc-rail-logout{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border-radius:11px; cursor:pointer;
  border:1px solid var(--pc-line-2); background:transparent; color:var(--pc-ink-2); font-weight:500; font-size:12.5px; line-height:1; font-family:inherit;
  transition:.18s var(--pc-spring);
}
#player-center-modal .pc-rail-logout svg.ico{width:15px; height:15px}
#player-center-modal .pc-rail-logout:hover{color:var(--pc-red); border-color:rgba(251,113,133,.45); background:rgba(251,113,133,.08)}

/* ══ 顶栏 ══════════════════════════════════════════════════ */
#player-center-modal .pc-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 24px; border-bottom:1px solid var(--pc-line); background:transparent;
}
#player-center-modal .pc-head-t{display:flex; flex-direction:column; min-width:0}
#player-center-modal .pc-title{font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--pc-ink); background:none; -webkit-text-fill-color:currentColor}
#player-center-modal .pc-head-sub{font-size:12px; color:var(--pc-ink-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#player-center-modal .pc-head-acts{display:flex; align-items:center; gap:8px}
#player-center-modal .pc-uid{display:none}
#player-center-modal .pc-logout-btn{display:none}
#player-center-modal .pc-close,
#player-center-modal .pc-logout-btn{
  width:34px; height:34px; border-radius:11px; border:1px solid var(--pc-line-2); background:transparent; color:var(--pc-ink-2);
  cursor:pointer; place-items:center; transition:.18s var(--pc-spring);
}
#player-center-modal .pc-close{display:grid}
#player-center-modal .pc-close svg.ico{width:15px; height:15px}
#player-center-modal .pc-close:hover{color:var(--pc-ink); background:rgba(255,255,255,.06); transform:rotate(90deg)}
#player-center-modal .pc-body{flex:1; min-height:0; overflow-y:auto; padding:22px 24px 34px; display:block; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent}
#player-center-modal .pc-body::-webkit-scrollbar{width:7px}
#player-center-modal .pc-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:99px}
body.theme-light #player-center-modal .pc-body::-webkit-scrollbar-thumb{background:rgba(150,60,100,.2)}
#player-center-modal .pc-back-btn{display:none}
#player-center-modal .pc-subpage,#player-center-modal #pc-page-main{animation:pcPageIn .38s var(--pc-spring)}
@keyframes pcPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ══ 通用：卡片 / 按钮 / 分段 / 提示 ═══════════════════════════ */
#player-center-modal .pc-card{
  position:relative; background:var(--pc-panel); border:1px solid var(--pc-line); border-radius:18px; margin-bottom:14px; overflow:visible;
  box-shadow:0 18px 40px -32px rgba(0,0,0,.9);
}
body.theme-light #player-center-modal .pc-card{box-shadow:0 14px 34px -28px rgba(150,60,100,.5)}
#player-center-modal .pc-card-hd{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:13.5px; font-weight:700; color:var(--pc-ink); letter-spacing:.01em; text-transform:none;
  padding:15px 18px 4px; border:0;
}
#player-center-modal .pc-card-hd > svg.ico{width:18px; height:18px; color:var(--pc-petal)}
#player-center-modal .pc-hd-sp{flex:1}
#player-center-modal .pc-hd-sub{font-size:11.5px; font-weight:500; color:var(--pc-ink-3); letter-spacing:0}
#player-center-modal .pc-card-bd{padding:10px 18px 18px}
#player-center-modal .pc-empty{padding:26px 8px; text-align:center; font-size:12.5px; color:var(--pc-ink-3)}
#player-center-modal .pc-tip{font-size:12px; color:var(--pc-ink-3); line-height:1.65}
#player-center-modal .pc-tip-box{display:flex; gap:8px; align-items:flex-start; margin-top:14px; padding:10px 12px; border-radius:12px; background:var(--pc-panel-2); border:1px dashed var(--pc-line-2)}
#player-center-modal .pc-tip-box svg.ico{width:15px; height:15px; color:var(--pc-gold); margin-top:1px}
/* 可点的提示条（点开快捷键速查卡的彩蛋页） */
#player-center-modal .pc-tip-link{width:100%; font:inherit; font-size:12px; text-align:left; cursor:pointer; transition:background .15s,border-color .15s}
#player-center-modal .pc-tip-link span{flex:1}
#player-center-modal .pc-tip-link:hover{border-style:solid; border-color:var(--pc-gold); background:var(--pc-panel)}
#player-center-modal .pc-tip-link svg.pc-tip-go{color:var(--pc-ink-3); transition:transform .15s}
#player-center-modal .pc-tip-link:hover svg.pc-tip-go{transform:translateX(2px); color:var(--pc-gold)}
#player-center-modal .pc-form-msg{font-size:12px; min-height:16px; margin-top:7px}
#player-center-modal .pc-link{border:0; background:none; padding:0; cursor:pointer; font-weight:600; font-size:12px; line-height:1; font-family:inherit; color:var(--pc-violet)}
#player-center-modal .pc-link:hover{text-decoration:underline}

#player-center-modal .pc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 14px; border-radius:11px; cursor:pointer;
  font-weight:600; font-size:12.5px; line-height:1; font-family:inherit; white-space:nowrap; color:#fff;
  background:linear-gradient(135deg,#F28CB5,#B07BFF); border:1px solid transparent;
  box-shadow:0 8px 20px -10px rgba(242,140,181,.9);
  transition:transform .18s var(--pc-spring), filter .18s, box-shadow .18s;
}
#player-center-modal .pc-btn svg.ico{width:15px; height:15px}
#player-center-modal .pc-btn:hover{transform:translateY(-1px); filter:brightness(1.07)}
#player-center-modal .pc-btn:active{transform:scale(.97)}
#player-center-modal .pc-btn.ghost{color:var(--pc-ink); background:rgba(255,255,255,.05); border-color:var(--pc-line-2); box-shadow:none}
body.theme-light #player-center-modal .pc-btn.ghost{background:rgba(150,60,100,.05)}
#player-center-modal .pc-btn.ghost:hover{border-color:rgba(247,168,200,.5); filter:none}
#player-center-modal .pc-btn.danger{color:var(--pc-red); background:rgba(251,113,133,.08); border-color:rgba(251,113,133,.3); box-shadow:none}
#player-center-modal .pc-btn.sm{height:30px; padding:0 11px; font-size:12px; border-radius:9px}
#player-center-modal .pc-btn-row{display:flex; gap:8px; flex-wrap:wrap}

#player-center-modal .pc-seg{display:inline-flex; gap:2px; padding:3px; border-radius:11px; background:var(--pc-panel-2); border:1px solid var(--pc-line); flex-wrap:wrap}
#player-center-modal .pc-seg button{
  border:0; background:none; cursor:pointer; padding:6px 11px; border-radius:8px;
  font-weight:600; font-size:12px; line-height:1; font-family:inherit; color:var(--pc-ink-2); transition:background .18s, color .18s;
}
#player-center-modal .pc-seg button:hover{color:var(--pc-ink)}
#player-center-modal .pc-seg button.on{color:#fff; background:linear-gradient(135deg,rgba(242,140,181,.9),rgba(176,123,255,.85)); box-shadow:0 4px 12px -6px rgba(242,140,181,.9)}

/* 开关：原来是「图标 + 文字」的胶囊按钮，改成标准开关；文字保留给读屏 */
#player-center-modal .pc-toggle{
  position:relative; flex:none; width:46px; height:26px; padding:0; border-radius:13px; cursor:pointer;
  border:0; background:linear-gradient(135deg,#43C98A,#23A56C); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:background .25s; font-size:0;
}
#player-center-modal .pc-toggle::after{
  content:''; position:absolute; top:3px; left:23px; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); transition:left .28s var(--pc-bounce);
}
#player-center-modal .pc-toggle.muted,#player-center-modal .pc-toggle.off{background:var(--pc-panel-3); box-shadow:inset 0 0 0 1px var(--pc-line-2)}
#player-center-modal .pc-toggle.muted::after,#player-center-modal .pc-toggle.off::after{left:3px}
#player-center-modal .pc-toggle-icon,#player-center-modal .pc-toggle-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#player-center-modal .pc-toggle:focus-visible{outline:2px solid var(--pc-petal); outline-offset:2px}

#player-center-modal .pc-volume-slider{
  flex:1; min-width:90px; max-width:220px; -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,var(--pc-petal),var(--pc-violet)); opacity:.9;
}
#player-center-modal .pc-volume-slider::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 4px rgba(247,168,200,.25); cursor:pointer}
#player-center-modal .pc-volume-slider::-moz-range-thumb{width:18px; height:18px; border:0; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4)}
#player-center-modal .pc-volume-val{width:42px; text-align:right; font:600 12px/1 var(--pc-num); color:var(--pc-ink-2)}

/* ══ 总览 · hero ═══════════════════════════════════════════ */
#player-center-modal .pc-hero{
  position:relative; overflow:hidden; border-radius:22px; margin-bottom:14px;
  background:var(--pc-panel); border:1px solid var(--pc-line-2);
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9);
}
#player-center-modal .pc-hero-art{
  position:relative; height:132px; overflow:hidden;
  background:
    radial-gradient(60% 140% at 12% 0%, rgba(242,120,170,.62), transparent 62%),
    radial-gradient(50% 120% at 70% -10%, rgba(150,110,255,.55), transparent 64%),
    radial-gradient(40% 90% at 100% 100%, rgba(95,184,245,.30), transparent 70%),
    linear-gradient(100deg,#2B1B40,#1A1330 60%,#15102A);
}
#player-center-modal .pc-hero-art::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(1.2px 1.2px at 20% 30%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 38% 70%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.4px 1.4px at 58% 22%,rgba(255,236,200,.8),transparent),radial-gradient(1px 1px at 76% 60%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.2px 1.2px at 88% 18%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 8% 76%,rgba(255,255,255,.45),transparent);
}
#player-center-modal .pc-hero-art::after{content:''; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(180deg,transparent,var(--pc-panel))}
#player-center-modal .pc-hero-mark{position:absolute; right:-26px; top:-34px; width:190px; height:190px; opacity:.5; filter:drop-shadow(0 10px 30px rgba(236,91,143,.45)); animation:pcMarkSpin 60s linear infinite}
@keyframes pcMarkSpin{to{transform:rotate(360deg)}}
#player-center-modal .pc-petal{
  position:absolute; top:-14px; width:10px; height:8px; border-radius:10px 1px 10px 1px; opacity:0;
  background:linear-gradient(135deg,#FFE3EE,#F79CC0); animation:pcPetal 9s linear infinite;
}
#player-center-modal .pc-petal:nth-child(2){left:14%; animation-delay:-1s}
#player-center-modal .pc-petal:nth-child(3){left:33%; animation-delay:-4.5s; animation-duration:11s; transform:scale(.8)}
#player-center-modal .pc-petal:nth-child(4){left:52%; animation-delay:-2.2s}
#player-center-modal .pc-petal:nth-child(5){left:68%; animation-delay:-6.5s; animation-duration:10s}
#player-center-modal .pc-petal:nth-child(6){left:84%; animation-delay:-3.4s; animation-duration:12s}
#player-center-modal .pc-petal:nth-child(7){left:44%; animation-delay:-8s; animation-duration:13s}
@keyframes pcPetal{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.9}70%{opacity:.7}100%{opacity:0;transform:translate(-60px,160px) rotate(420deg)}}
body.theme-light #player-center-modal .pc-hero-art{
  background:
    radial-gradient(60% 140% at 12% 0%, rgba(250,160,200,.9), transparent 62%),
    radial-gradient(50% 120% at 70% -10%, rgba(200,170,255,.8), transparent 64%),
    linear-gradient(100deg,#FCD9E8,#F3E4FB);
}

#player-center-modal .pc-avatar-row{display:flex; align-items:flex-end; gap:18px; padding:0 24px; margin-top:-52px; position:relative; z-index:2}
#player-center-modal .pc-avatar{
  position:relative; flex:none; width:100px; height:100px; border-radius:30px; cursor:pointer; overflow:hidden;
  display:grid; place-items:center; font-size:40px; font-weight:700;
  background:linear-gradient(140deg,#3E2D54,#241B33);
  border:4px solid var(--pc-panel);
  box-shadow:0 0 0 2px rgba(247,168,200,.55), 0 18px 36px -14px rgba(0,0,0,.8);
  transition:transform .3s var(--pc-bounce), box-shadow .3s;
}
body.theme-light #player-center-modal .pc-avatar{background:linear-gradient(140deg,#FBD9E8,#F0DCEF)}
#player-center-modal .pc-avatar img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0 !important}
#player-center-modal .pc-avatar:hover{transform:translateY(-3px) rotate(-2deg); box-shadow:0 0 0 2px var(--pc-petal), 0 22px 40px -14px rgba(0,0,0,.8)}
#player-center-modal .pc-avatar-cam{position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,6,20,.5); color:#fff; opacity:0; transition:opacity .2s}
#player-center-modal .pc-avatar-cam svg.ico{width:26px; height:26px}
#player-center-modal .pc-avatar:hover .pc-avatar-cam,#player-center-modal .pc-avatar:focus-visible .pc-avatar-cam{opacity:1}
#player-center-modal .pc-name-col{flex:1; min-width:0; padding-bottom:4px}
#player-center-modal .pc-name-line{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
#player-center-modal .pc-name{font-size:23px; font-weight:750; letter-spacing:-.02em; color:var(--pc-ink); margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
#player-center-modal .pc-role-badge{display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:8px; font-size:11px; font-weight:700; letter-spacing:.02em; border:1px solid transparent}
#player-center-modal .pc-role-badge.pc-role-super{color:#FCD34D; background:rgba(251,191,36,.13); border-color:rgba(251,191,36,.32)}
#player-center-modal .pc-role-badge.pc-role-admin{color:#C4B5FD; background:rgba(167,139,250,.14); border-color:rgba(167,139,250,.32)}
body.theme-light #player-center-modal .pc-role-badge.pc-role-super{color:#A16207; background:rgba(251,191,36,.16); border-color:rgba(202,138,4,.35)}
body.theme-light #player-center-modal .pc-role-badge.pc-role-admin{color:#6D28D9; background:rgba(167,139,250,.14); border-color:rgba(124,58,237,.3)}
#player-center-modal .pc-role-badge.pc-role-user{display:none !important}
#player-center-modal .pc-hero-meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:12px; color:var(--pc-ink-3)}
#player-center-modal .pc-hero-meta span{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
#player-center-modal .pc-hero-meta svg.ico{width:13px; height:13px}
#player-center-modal .pc-hero-meta b{color:var(--pc-ink-2); font-weight:650; font-variant-numeric:tabular-nums}
#player-center-modal .pc-hero-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
#player-center-modal .pc-chip{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:9px; cursor:pointer;
  font-weight:600; font-size:12px; line-height:1; font-family:inherit; white-space:nowrap; max-width:100%;
  color:var(--pc-ink); background:var(--pc-panel-2); border:1px solid var(--pc-line-2); transition:border-color .18s, transform .18s var(--pc-spring);
}
#player-center-modal .pc-chip:hover{border-color:rgba(247,168,200,.5); transform:translateY(-1px)}
#player-center-modal .pc-chip-badge{color:#FFD1E3; background:linear-gradient(135deg,rgba(247,168,200,.16),rgba(169,139,255,.1)); border-color:rgba(247,168,200,.3)}
body.theme-light #player-center-modal .pc-chip-badge{color:#A0185A}
#player-center-modal .pc-chip-status{color:var(--pc-ink-2)}
#player-center-modal .pc-chip-status.empty{border-style:dashed; color:var(--pc-ink-3)}
#player-center-modal .pc-hero-acts{display:flex; gap:8px; padding-bottom:6px; flex:none}
#player-center-modal .pc-inline-rename{display:flex; gap:6px; margin-top:10px}
#player-center-modal .pc-inline-rename input{flex:1; min-width:0; height:34px; padding:0 11px; border-radius:10px; border:1px solid var(--pc-line-2); background:var(--pc-panel-2); color:var(--pc-ink); font-weight:500; font-size:13px; line-height:1; font-family:inherit; outline:none}

/* 精选成就展柜 */
#player-center-modal .pc-showcase{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 24px 0; padding:14px 0 20px; border-top:1px solid var(--pc-line)}
#player-center-modal .pc-showcase-lb{font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--pc-ink-3); margin-right:4px}
#player-center-modal .pc-show-it{
  position:relative; display:flex; align-items:center; gap:8px; height:40px; padding:0 13px 0 5px; border-radius:12px;
  background:var(--pc-panel-2); border:1px solid color-mix(in srgb,var(--rc) 40%,transparent);
  box-shadow:0 6px 18px -12px var(--rc); font-size:12.5px; font-weight:650; color:var(--pc-ink); cursor:default;
  animation:pcPop .5s var(--pc-bounce) both;
}
@supports not (border-color:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-show-it{border-color:var(--pc-line-2)}}
#player-center-modal .pc-show-it .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:17px; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(255,255,255,.03))}
#player-center-modal .pc-show-empty{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:12px; cursor:pointer;
  border:1.5px dashed var(--pc-line-2); color:var(--pc-ink-3); font-weight:600; font-size:12px; line-height:1; font-family:inherit; background:none;
}
#player-center-modal .pc-show-empty:hover{color:var(--pc-petal); border-color:rgba(247,168,200,.5)}
@keyframes pcPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* 六项数据 */
#player-center-modal .pc-kpis{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:14px}
#player-center-modal .pc-kpi{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:3px; padding:13px 14px; border-radius:16px; min-width:0;
  background:linear-gradient(160deg,color-mix(in srgb,var(--kc) 12%,transparent),transparent 60%),var(--pc-panel);
  border:1px solid var(--pc-line); transition:transform .25s var(--pc-spring), border-color .25s;
}
@supports not (background:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-kpi{background:var(--pc-panel)}}
#player-center-modal .pc-kpi:hover{transform:translateY(-3px); border-color:var(--pc-line-2)}
#player-center-modal .pc-kpi-link{cursor:pointer}
#player-center-modal .pc-kpi-ic{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; margin-bottom:6px; color:var(--kc);
  background:color-mix(in srgb,var(--kc) 16%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-kpi-ic{background:rgba(255,255,255,.06)}}
#player-center-modal .pc-kpi-ic svg.ico{width:17px; height:17px}
#player-center-modal .pc-kpi-ic svg.gico{width:24px; height:24px}
#player-center-modal .pc-kpi b{font:750 21px/1.15 var(--pc-num); letter-spacing:-.01em; color:var(--pc-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
#player-center-modal .pc-kpi b.txt{font-family:inherit; font-size:15px; letter-spacing:0; padding:2px 0}
#player-center-modal .pc-kpi i{font-style:normal; font-size:11.5px; color:var(--pc-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

#player-center-modal .pc-ov-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px}
#player-center-modal .pc-ov-grid .pc-card{margin-bottom:14px}
#player-center-modal .pc-ov-grid-even{grid-template-columns:repeat(2,minmax(0,1fr))}
#player-center-modal .pc-ov-grid-even:has(#pc-admin-section[style*="none"]){grid-template-columns:1fr}

/* 活跃足迹热力图 */
#player-center-modal .pc-streak{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:8px; font-size:12px; font-weight:700; color:#FDBA74; background:rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.26)}
#player-center-modal .pc-streak svg.ico{width:14px; height:14px}
#player-center-modal .pc-streak:empty{display:none}
#player-center-modal .pc-heat{position:relative; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
#player-center-modal .pc-heat::-webkit-scrollbar{display:none}
#player-center-modal .pc-heat-grid{display:grid; grid-template-columns:16px repeat(var(--weeks,26),minmax(9px,1fr)); gap:3px}
#player-center-modal .pc-heat-m{grid-row:1; font-size:10px; color:var(--pc-ink-3); white-space:nowrap; height:13px; overflow:visible}
#player-center-modal .pc-heat-w{font-size:9.5px; color:var(--pc-ink-3); line-height:1; align-self:center}
#player-center-modal .pc-heat-c{aspect-ratio:1; min-width:9px; border-radius:3px; background:var(--pc-panel-3); transition:transform .15s var(--pc-spring)}
#player-center-modal .pc-heat-c.l1{background:rgba(247,168,200,.28)}
#player-center-modal .pc-heat-c.l2{background:rgba(247,168,200,.5)}
#player-center-modal .pc-heat-c.l3{background:rgba(242,120,170,.78)}
#player-center-modal .pc-heat-c.l4{background:linear-gradient(135deg,#FF8DB9,#C38BFF); box-shadow:0 0 8px rgba(247,168,200,.5)}
#player-center-modal .pc-heat-c.today{outline:1.5px solid var(--pc-ink-2); outline-offset:1px}
#player-center-modal .pc-heat-c.future{visibility:hidden}
#player-center-modal .pc-heat-c:hover{transform:scale(1.35)}
#player-center-modal .pc-heat-foot{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11.5px; color:var(--pc-ink-3); flex-wrap:wrap}
#player-center-modal .pc-heat-foot b{color:var(--pc-ink-2); font-variant-numeric:tabular-nums}
#player-center-modal .pc-heat-leg{margin-left:auto; display:flex; align-items:center; gap:3px}
#player-center-modal .pc-heat-leg .pc-heat-c{width:10px; min-width:10px; height:10px}
/* 游戏偏好：按局数占比的横条 */
#player-center-modal .pc-prefs{margin-top:16px; padding-top:14px; border-top:1px dashed var(--pc-line)}
#player-center-modal .pc-prefs:empty{display:none}
#player-center-modal .pc-prefs-hd{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:650; color:var(--pc-ink-2); margin-bottom:10px}
#player-center-modal .pc-prefs-hd span{margin-left:auto; font-weight:500; color:var(--pc-ink-3); font-size:11px}
#player-center-modal .pc-pref{display:grid; grid-template-columns:26px 64px minmax(0,1fr) 62px; align-items:center; gap:10px; height:30px}
#player-center-modal .pc-pref .gi{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(145deg,var(--g1),var(--g2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#player-center-modal .pc-pref .gi svg{width:18px; height:18px}
#player-center-modal .pc-pref b{font-size:12px; font-weight:600; color:var(--pc-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#player-center-modal .pc-pref .tr{height:8px; border-radius:6px; background:var(--pc-panel-3); overflow:hidden}
#player-center-modal .pc-pref .tr i{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#F28CB5,#B07BFF); transform-origin:left; animation:pcGrow .9s var(--pc-spring) both}
#player-center-modal .pc-pref em{font-style:normal; text-align:right; font-size:11.5px; color:var(--pc-ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
#player-center-modal .pc-pref em small{font-size:10.5px; opacity:.75; margin-left:3px}
/* 提示挂在 body 上：个人中心弹窗打开时有 transform 动画，fixed 定位会被它带偏 */
.pc-heat-tip{position:fixed; z-index:99999; pointer-events:none; padding:6px 9px; border-radius:8px; font-size:11.5px; color:#fff; background:rgba(14,10,24,.95); border:1px solid rgba(255,255,255,.12); white-space:nowrap; transform:translate(-50%,-120%)}

/* 最近对局 */
#player-center-modal .pc-recent{display:flex; flex-direction:column; gap:2px}
#player-center-modal .pc-rc-row{display:flex; align-items:center; gap:11px; padding:7px 6px; border-radius:11px; transition:background .15s}
#player-center-modal .pc-rc-row:hover{background:var(--pc-panel-2)}
#player-center-modal .pc-rc-ic{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:linear-gradient(140deg,var(--g1,#2a2038),var(--g2,#18121f)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#player-center-modal .pc-rc-ic svg.gico{width:26px; height:26px}
#player-center-modal .pc-rc-t{flex:1; min-width:0}
#player-center-modal .pc-rc-t b{display:block; font-size:13px; font-weight:650; color:var(--pc-ink)}
#player-center-modal .pc-rc-t i{display:block; font-style:normal; font-size:11.5px; color:var(--pc-ink-3); margin-top:2px}
#player-center-modal .pc-rc-s{font:750 14px/1 var(--pc-num); color:var(--pc-gold); font-variant-numeric:tabular-nums}
#player-center-modal .pc-rc-s.pb::after{content:'最佳'; margin-left:6px; font:800 9.5px/1 system-ui; padding:2px 5px; border-radius:5px; color:#1a1206; background:var(--pc-gold); vertical-align:2px}

/* 抽奖 / 后台 */
#player-center-modal .pc-lottery-card{display:flex; align-items:center; gap:14px; padding:16px 18px; overflow:hidden;
  background:linear-gradient(110deg,rgba(247,168,200,.16),rgba(169,139,255,.08) 60%,transparent),var(--pc-panel); border-color:rgba(247,168,200,.24)}
#player-center-modal .pc-lottery-art{position:relative; width:54px; height:54px; flex:none; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#F28CB5,#9B6BFF); box-shadow:0 12px 26px -12px rgba(242,140,181,.9)}
#player-center-modal .pc-lottery-art svg.ico{width:28px; height:28px; animation:pcGift 3s ease-in-out infinite}
#player-center-modal .pc-lottery-art i{position:absolute; width:6px; height:6px; border-radius:50%; background:#FFE38A; box-shadow:0 0 8px #FFE38A; animation:pcTwinkle 2.4s ease-in-out infinite}
#player-center-modal .pc-lottery-art i:nth-child(1){top:-2px; right:6px}
#player-center-modal .pc-lottery-art i:nth-child(2){bottom:4px; left:-3px; animation-delay:-.8s; width:4px; height:4px}
#player-center-modal .pc-lottery-art i:nth-child(3){top:10px; left:2px; animation-delay:-1.6s; width:3px; height:3px}
@keyframes pcGift{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) scale(1.05)}}
@keyframes pcTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
#player-center-modal .pc-lottery-t{flex:1; min-width:0}
#player-center-modal .pc-lottery-t b{display:block; font-size:14.5px; color:var(--pc-ink)}
#player-center-modal .pc-lottery-t span{display:block; font-size:12px; color:var(--pc-ink-3); margin-top:4px; line-height:1.5}
#player-center-modal .pc-lottery-btn{
  width:auto; flex:none; display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 12px 0 16px; border-radius:12px; cursor:pointer;
  font-weight:700; font-size:13px; line-height:1; font-family:inherit; color:#fff; border:0;
  background:linear-gradient(135deg,#F28CB5,#B07BFF); box-shadow:0 10px 24px -10px rgba(242,140,181,.95); transition:transform .18s var(--pc-spring);
}
#player-center-modal .pc-lottery-btn svg.ico{width:15px; height:15px}
#player-center-modal .pc-lottery-btn:hover{transform:translateY(-1px)}
#player-center-modal .pc-admin-card{padding:0; overflow:hidden}
#player-center-modal .pc-admin-btn{display:flex; align-items:center; gap:14px; height:100%; min-height:86px; padding:16px 18px; text-decoration:none; color:var(--pc-ink); background:none; border:0; border-radius:18px}
#player-center-modal .pc-admin-btn:hover{background:var(--pc-panel-2)}
#player-center-modal .pc-admin-icon{width:48px; height:48px; flex:none; border-radius:14px; display:grid; place-items:center; color:#C4B5FD; background:linear-gradient(140deg,rgba(169,139,255,.24),rgba(169,139,255,.08)); border:1px solid rgba(169,139,255,.3)}
#player-center-modal .pc-admin-icon svg.ico{width:24px; height:24px}
#player-center-modal .pc-admin-info{flex:1; min-width:0}
#player-center-modal .pc-admin-title{font-size:14.5px; font-weight:700}
#player-center-modal .pc-admin-sub{font-size:12px; color:var(--pc-ink-3); margin-top:4px}
#player-center-modal .pc-admin-go{color:var(--pc-ink-3); transition:transform .2s var(--pc-spring)}
#player-center-modal .pc-admin-btn:hover .pc-admin-go{transform:translateX(3px); color:var(--pc-ink)}

/* ══ 游戏记录 ═══════════════════════════════════════════════ */
#player-center-modal .pc-games-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
#player-center-modal .pc-games-sum{flex:1; min-width:0; display:flex; gap:8px; flex-wrap:wrap}
#player-center-modal .pc-sum-chip{display:inline-flex; align-items:baseline; gap:6px; padding:8px 12px; border-radius:12px; background:var(--pc-panel); border:1px solid var(--pc-line); font-size:12px; color:var(--pc-ink-3)}
#player-center-modal .pc-sum-chip b{font:750 16px/1 var(--pc-num); color:var(--pc-ink); font-variant-numeric:tabular-nums}
#player-center-modal .pc-games-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; padding:0; overflow:visible; flex:none}
#player-center-modal .pc-gcard{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:18px; cursor:pointer; text-align:left;
  background:var(--pc-panel); border:1px solid var(--pc-line); color:var(--pc-ink); font-family:inherit;
  transition:transform .25s var(--pc-spring), border-color .25s, box-shadow .25s;
  animation:pcPop .45s var(--pc-spring) both;
}
#player-center-modal .pc-gcard:hover{transform:translateY(-4px); border-color:rgba(247,168,200,.4); box-shadow:0 20px 40px -26px rgba(247,168,200,.6)}
#player-center-modal .pc-gcard .hd{display:flex; align-items:center; gap:11px}
#player-center-modal .pc-gcard .gi{width:52px; height:52px; flex:none; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--g1),var(--g2)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 22px -14px var(--g1)}
#player-center-modal .pc-gcard .gi svg.gico{width:36px; height:36px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); transition:transform .35s var(--pc-bounce)}
#player-center-modal .pc-gcard:hover .gi svg.gico{transform:scale(1.1) rotate(-5deg)}
#player-center-modal .pc-gcard .nm{flex:1; min-width:0}
#player-center-modal .pc-gcard .nm b{display:block; font-size:14.5px; font-weight:700}
#player-center-modal .pc-gcard .nm i{display:block; font-style:normal; font-size:11.5px; color:var(--pc-ink-3); margin-top:3px}
#player-center-modal .pc-rank{flex:none; display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-radius:8px; font:800 11.5px/1 system-ui; color:var(--pc-ink-2); background:var(--pc-panel-2); border:1px solid var(--pc-line-2)}
#player-center-modal .pc-rank.r1{color:#1a1206; background:linear-gradient(135deg,#FDE68A,#F59E0B); border-color:transparent}
#player-center-modal .pc-rank.r2{color:#111; background:linear-gradient(135deg,#F1F5F9,#94A3B8); border-color:transparent}
#player-center-modal .pc-rank.r3{color:#fff; background:linear-gradient(135deg,#FDBA74,#C2410C); border-color:transparent}
#player-center-modal .pc-gcard .st{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:6px; padding:10px 12px; border-radius:12px; background:var(--pc-panel-2)}
#player-center-modal .pc-gcard .st div{min-width:0}
#player-center-modal .pc-gcard .st b{display:block; font:750 15px/1.1 var(--pc-num); color:var(--pc-ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#player-center-modal .pc-gcard .st div:first-child b{color:var(--pc-gold); font-size:17px}
#player-center-modal .pc-gcard .st span{display:block; font-size:10.5px; color:var(--pc-ink-3); margin-top:3px}
#player-center-modal .pc-gcard .go{position:absolute; right:14px; bottom:14px; opacity:0; font-size:11.5px; font-weight:700; color:var(--pc-petal); transition:opacity .2s}
#player-center-modal .pc-gcard.new{border-style:dashed}
#player-center-modal .pc-gcard.new .gi{filter:grayscale(.55) brightness(.9)}
#player-center-modal .pc-gcard.new .st{opacity:.55}
#player-center-modal .pc-gcard.new:hover .gi{filter:none}
#player-center-modal .pc-game-actions{display:flex; gap:10px; margin-top:16px}
#player-center-modal .pc-action-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 14px; border-radius:13px; cursor:pointer;
  font-weight:650; font-size:13px; line-height:1; font-family:inherit; border:1px solid transparent; transition:transform .18s var(--pc-spring), background .18s;
}
#player-center-modal .pc-action-btn svg.ico{width:16px; height:16px}
#player-center-modal .pc-action-btn:hover{transform:translateY(-1px)}
#player-center-modal .pc-action-challenge{color:#C7D2FE; background:rgba(99,102,241,.14); border-color:rgba(99,102,241,.34)}
#player-center-modal .pc-action-accept{color:#FDA4C0; background:rgba(242,120,170,.12); border-color:rgba(242,120,170,.32)}
#player-center-modal .pc-action-upload{color:#9DD5FA; background:rgba(95,184,245,.1); border-color:rgba(95,184,245,.3)}
#player-center-modal .pc-action-clear-wp{color:var(--pc-red); background:rgba(251,113,133,.08); border-color:rgba(251,113,133,.26)}
body.theme-light #player-center-modal .pc-action-challenge{color:#4338CA}
body.theme-light #player-center-modal .pc-action-accept{color:#BE185D}
body.theme-light #player-center-modal .pc-action-upload{color:#0369A1}

/* ══ 徽章与成就 ═════════════════════════════════════════════ */
#player-center-modal .pc-ach-summary{display:flex; align-items:center; gap:22px; padding:18px 22px; overflow:hidden;
  background:radial-gradient(60% 140% at 0% 0%,rgba(245,197,99,.14),transparent 60%),var(--pc-panel)}
#player-center-modal .pc-ring{position:relative; width:96px; height:96px; flex:none}
#player-center-modal .pc-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
#player-center-modal .pc-ring .trk{fill:none; stroke:var(--pc-panel-3); stroke-width:9}
#player-center-modal .pc-ring .val{fill:none; stroke:url(#pcRingG); stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s var(--pc-spring)}
#player-center-modal .pc-ring-t{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
#player-center-modal .pc-ring-t b{font:800 22px/1 var(--pc-num); color:var(--pc-ink)}
#player-center-modal .pc-ring-t i{font-style:normal; font-size:10.5px; color:var(--pc-ink-3); margin-top:3px}
#player-center-modal .pc-ach-sum-r{flex:1; min-width:0}
#player-center-modal .pc-ach-sum-r h4{margin:0 0 4px; font-size:16px; color:var(--pc-ink)}
#player-center-modal .pc-ach-sum-r p{margin:0 0 12px; font-size:12.5px; color:var(--pc-ink-3)}
#player-center-modal .pc-rar-bars{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
#player-center-modal .pc-rar b{display:flex; justify-content:space-between; font-size:11.5px; color:var(--rc); font-weight:700}
#player-center-modal .pc-rar b span{color:var(--pc-ink-3); font-weight:600; font-variant-numeric:tabular-nums}
#player-center-modal .pc-rar .tr{height:6px; border-radius:6px; background:var(--pc-panel-3); margin-top:6px; overflow:hidden}
#player-center-modal .pc-rar .tr i{display:block; height:100%; border-radius:6px; background:var(--rc); transform-origin:left; animation:pcGrow 1s var(--pc-spring) both}
@keyframes pcGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#player-center-modal .pc-ach-grid{display:grid !important; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
#player-center-modal .pc-ach{
  position:relative; display:flex; gap:11px; align-items:center; padding:11px 12px; border-radius:14px;
  background:var(--pc-panel-2); border:1px solid var(--pc-line); transition:transform .2s var(--pc-spring), border-color .2s;
}
#player-center-modal .pc-ach:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--rc) 50%,transparent)}
#player-center-modal .pc-ach .ic{width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:23px;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rc) 35%,transparent),color-mix(in srgb,var(--rc) 8%,transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc) 45%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-ach .ic{background:rgba(255,255,255,.07)}}
#player-center-modal .pc-ach .t{flex:1; min-width:0}
#player-center-modal .pc-ach .t b{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--pc-ink)}
#player-center-modal .pc-ach .t b em{font-style:normal; font-size:9.5px; font-weight:800; color:var(--rc); letter-spacing:.04em}
#player-center-modal .pc-ach .t span{display:block; font-size:11.5px; color:var(--pc-ink-3); margin-top:3px; line-height:1.4}
#player-center-modal .pc-ach .t time{display:block; font-size:10.5px; color:var(--pc-ink-3); margin-top:3px; opacity:.8}
#player-center-modal .pc-ach.lock .ic{filter:grayscale(1); opacity:.45}
#player-center-modal .pc-ach.lock .t b{color:var(--pc-ink-2)}
#player-center-modal .pc-ach-star{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:9px; border:0; background:none; cursor:pointer; color:var(--pc-ink-3); display:grid; place-items:center}
#player-center-modal .pc-ach-star svg.ico{width:16px; height:16px}
#player-center-modal .pc-ach-star:hover{color:var(--pc-gold); background:rgba(245,197,99,.1)}
#player-center-modal .pc-ach-star.on{color:var(--pc-gold)}
#player-center-modal .pc-ach-star.on svg.ico{fill:currentColor; filter:drop-shadow(0 0 5px rgba(245,197,99,.7))}
#player-center-modal .pc-ach.featured{border-color:rgba(245,197,99,.45); box-shadow:0 0 0 1px rgba(245,197,99,.18)}

#player-center-modal .pc-badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px}
#player-center-modal .pc-badge-grid > div:not(.pc-badge-tile){font-size:11.5px !important; font-weight:700; letter-spacing:.06em; color:var(--pc-ink-3) !important; margin:6px 0 0 !important}
#player-center-modal .pc-badge-tile{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 8px 11px; border-radius:15px; text-align:center;
  background:var(--pc-panel-2); border:1px solid var(--pc-line); color:var(--pc-ink); font-size:12px;
  transition:transform .22s var(--pc-spring), border-color .22s, box-shadow .22s;
}
#player-center-modal .pc-badge-tile:not(.locked):hover{transform:translateY(-3px); border-color:rgba(247,168,200,.45)}
#player-center-modal .pc-badge-tile-icon{font-size:30px; line-height:1; height:36px; display:grid; place-items:center}
#player-center-modal .pc-badge-tile-name{font-weight:700; font-size:12.5px}
#player-center-modal .pc-badge-tile.selected{border-color:var(--pc-gold); background:linear-gradient(160deg,rgba(245,197,99,.14),var(--pc-panel-2)); box-shadow:0 0 0 1px rgba(245,197,99,.25), 0 12px 26px -16px rgba(245,197,99,.7); color:var(--pc-ink)}
#player-center-modal .pc-badge-tile.locked{opacity:.42; filter:grayscale(.7)}
/* 已达成的旧时间档：不能回退佩戴，但它是「拿到过」的，别和没解锁的画成一样灰 */
#player-center-modal .pc-badge-tile.time-old{opacity:.78; filter:none; border-style:dashed}
#player-center-modal .pc-badge-tile.time-cur:not(.selected){border-color:rgba(93,224,166,.45)}

/* ══ 账号设置 ═══════════════════════════════════════════════ */
#player-center-modal .pc-acct{padding:18px 20px}
#player-center-modal .pc-acct-hd{display:flex; align-items:center; gap:12px; margin-bottom:14px}
#player-center-modal .pc-acct-hd b{display:block; font-size:14.5px; color:var(--pc-ink)}
#player-center-modal .pc-acct-hd i{display:block; font-style:normal; font-size:12px; color:var(--pc-ink-3); margin-top:3px; line-height:1.5}
#player-center-modal .pc-acct-ic{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 15%,transparent); border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-acct-ic{background:rgba(255,255,255,.06)}}
#player-center-modal .pc-avatar-edit{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
#player-center-modal #pc-avatar-preview-wrap{position:relative; flex:none; width:92px; height:92px; border-radius:28px; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,rgba(169,139,255,.35),rgba(242,120,170,.28)); box-shadow:0 0 0 2px rgba(247,168,200,.45)}
#player-center-modal #pc-avatar-img{width:100%; height:100%; object-fit:cover}
#player-center-modal #pc-avatar-letter{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:800; color:#fff}
#player-center-modal .pc-av-hover-mask{position:absolute; inset:0; display:grid; place-items:center; background:rgba(10,6,20,.5); color:#fff; opacity:0; transition:opacity .2s}
#player-center-modal .pc-av-hover-mask svg.ico{width:26px; height:26px}
#player-center-modal #pc-avatar-preview-wrap:hover .pc-av-hover-mask{opacity:1 !important}
#player-center-modal .pc-avatar-edit-r{flex:1; min-width:200px; display:flex; flex-direction:column; gap:8px}
#player-center-modal .pc-note{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--pc-ink-2); padding:0 0 10px}
#player-center-modal .pc-note svg.ico{width:15px; height:15px}
#player-center-modal .pc-note.warn{color:#FCA5A5}
/* ── 语言切换 ── */
#player-center-modal .pc-lang-seg{display:flex; gap:4px; padding:3px; border-radius:12px; background:var(--pc-panel-2); border:1px solid var(--pc-line-2)}
#player-center-modal .pc-lang-btn{padding:6px 14px; border:0; border-radius:9px; font-size:12.5px; font-weight:700; font-family:inherit;
  color:var(--pc-ink-2); background:transparent; cursor:pointer; transition:background .18s, color .18s}
#player-center-modal .pc-lang-btn:hover{color:var(--pc-ink)}
#player-center-modal .pc-lang-btn.on{color:#fff; background:linear-gradient(135deg,rgba(169,139,255,.75),rgba(242,120,170,.7))}

/* ── 危险操作区（注销账号）：边框换成警示色，别和上面的普通设置混在一起 ── */
#player-center-modal .pc-card.pc-danger{border-color:rgba(251,113,133,.28); background:linear-gradient(180deg,rgba(251,113,133,.05),transparent 60%)}

/* ── 我的举报 ── */
#player-center-modal .pc-rep-list{display:flex; flex-direction:column; gap:9px}
#player-center-modal .pc-rep{padding:10px 12px; border-radius:12px; background:var(--pc-panel-2); border:1px solid var(--pc-line-2)}
#player-center-modal .pc-rep-hd{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--pc-ink-3)}
#player-center-modal .pc-rep-st{padding:2px 8px; border-radius:999px; font-weight:800; font-size:11.5px; letter-spacing:.2px}
#player-center-modal .pc-rep-st.wait{background:rgba(252,165,165,.16); color:#FCA5A5}
#player-center-modal .pc-rep-st.ok{background:rgba(134,239,172,.16); color:#86EFAC}
#player-center-modal .pc-rep-st.no{background:rgba(255,255,255,.08); color:var(--pc-ink-3)}
#player-center-modal .pc-rep-type{color:var(--pc-ink-2); font-weight:700}
#player-center-modal .pc-rep-reason{color:var(--pc-ink-2)}
#player-center-modal .pc-rep-time{margin-left:auto}
#player-center-modal .pc-rep-msg{margin-top:6px; font-size:12.5px; line-height:1.55; color:var(--pc-ink-2);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
#player-center-modal .pc-rep-note{margin-top:6px; font-size:12.5px; line-height:1.5; color:var(--pc-ink)}
#player-center-modal .pc-rep-note.dim{color:var(--pc-ink-3)}
#player-center-modal .pc-field-row{display:flex; gap:8px; margin-bottom:8px; align-items:stretch}
#player-center-modal .pc-field-row > input{flex:1; min-width:0}
#player-center-modal .pc-pwd-form{display:flex; flex-direction:column; gap:9px}
#player-center-modal .pc-pwd-input{
  height:40px; padding:0 13px; border-radius:12px; margin:0 !important; font-weight:500; font-size:13.5px; line-height:1; font-family:inherit; outline:none;
  color:var(--pc-ink); background:var(--pc-panel-2); border:1px solid var(--pc-line-2); transition:border-color .18s, box-shadow .18s;
}
#player-center-modal .pc-pwd-input::placeholder{color:var(--pc-ink-3)}
#player-center-modal .pc-pwd-input:focus{border-color:rgba(247,168,200,.6); box-shadow:0 0 0 3px rgba(247,168,200,.14)}
#player-center-modal .pc-pwd-input:disabled{opacity:.5}
#player-center-modal .pc-pwd-btn{
  flex:none; height:40px; padding:0 16px; margin:0 !important; width:auto; border-radius:12px; cursor:pointer; white-space:nowrap;
  font-weight:650; font-size:13px; line-height:1; font-family:inherit; color:#fff; border:0; background:linear-gradient(135deg,#F28CB5,#B07BFF);
  box-shadow:0 8px 20px -10px rgba(242,140,181,.9); transition:transform .18s var(--pc-spring), filter .18s;
}
#player-center-modal .pc-pwd-btn:hover{filter:brightness(1.08)}
#player-center-modal .pc-pwd-btn:disabled{opacity:.5; cursor:not-allowed; filter:none}
#player-center-modal .pc-pwd-btn.ghost{color:var(--pc-ink); background:var(--pc-panel-3); box-shadow:none}
#player-center-modal .pc-pwd-form .pc-pwd-btn{align-self:flex-start; padding:0 22px}
#player-center-modal .pc-pwd-msg{font-size:12px; min-height:0; padding:0}
#player-center-modal .pc-pwd-msg.ok{color:var(--pc-mint)} #player-center-modal .pc-pwd-msg.err{color:var(--pc-red)}

/* 生日：自绘月 / 日选择（不用原生日期控件） */
#player-center-modal .pc-bday{position:relative; flex:1; min-width:0}
#player-center-modal .pc-bday-btn{
  width:100%; height:40px; display:flex; align-items:center; gap:9px; padding:0 12px; border-radius:12px; cursor:pointer;
  font-weight:600; font-size:13.5px; line-height:1; font-family:inherit; color:var(--pc-ink); background:var(--pc-panel-2); border:1px solid var(--pc-line-2); text-align:left;
}
#player-center-modal .pc-bday-btn svg.ico{width:16px; height:16px; color:var(--pc-red)}
#player-center-modal .pc-bday-btn span{flex:1}
#player-center-modal .pc-bday-btn .pc-bday-caret{color:var(--pc-ink-3); transform:rotate(90deg); transition:transform .2s}
#player-center-modal .pc-bday.open .pc-bday-caret{transform:rotate(-90deg)}
#player-center-modal .pc-bday-pop{
  position:absolute; left:0; top:calc(100% + 6px); z-index:30; width:min(320px,86vw); padding:12px; border-radius:16px;
  background:var(--pc-panel); border:1px solid var(--pc-line-2); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:pcPop .25s var(--pc-spring);
}
#player-center-modal .pc-bday-pop[hidden]{display:none}
#player-center-modal .pc-bday-sec{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--pc-ink-3); margin:2px 2px 8px}
#player-center-modal .pc-bday-months{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; margin-bottom:12px}
#player-center-modal .pc-bday-days{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
#player-center-modal .pc-bday-pop button{height:32px; border:0; border-radius:9px; cursor:pointer; font-weight:600; font-size:12.5px; line-height:1; font-family:inherit; color:var(--pc-ink-2); background:var(--pc-panel-2)}
#player-center-modal .pc-bday-pop button:hover{color:var(--pc-ink); background:var(--pc-panel-3)}
#player-center-modal .pc-bday-pop button.on{color:#fff; background:linear-gradient(135deg,#F28CB5,#B07BFF)}
#player-center-modal .pc-bday-foot{display:flex; justify-content:space-between; margin-top:10px}
#player-center-modal .pc-bday-foot button{padding:0 12px; background:none}

/* ══ 音效与界面 / 聊天室 ═══════════════════════════════════ */
#player-center-modal .pc-set-list{padding-top:6px}
#player-center-modal .pc-set-row{display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--pc-line); flex-wrap:nowrap}
#player-center-modal .pc-set-row:first-child{border-top:0}
#player-center-modal .pc-set-row.pc-set-sub{padding-top:0; border-top:0}
#player-center-modal .pc-set-row.pc-set-wrap{flex-wrap:wrap}
#player-center-modal .pc-set-wrap .pc-seg{margin-left:51px}
#player-center-modal .pc-set-ic{width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){#player-center-modal .pc-set-ic{background:rgba(255,255,255,.06)}}
#player-center-modal .pc-set-ic.ghost{background:none}
#player-center-modal .pc-set-t{flex:1; min-width:0}
#player-center-modal .pc-set-t b{display:block; font-size:13.5px; font-weight:650; color:var(--pc-ink)}
#player-center-modal .pc-set-t i{display:block; font-style:normal; font-size:12px; color:var(--pc-ink-3); margin-top:3px; line-height:1.5}

/* ══ 主题 / 壁纸 ═══════════════════════════════════════════ */
#player-center-modal .pc-theme-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px}
#player-center-modal .pc-theme-card{border-radius:15px; border-color:var(--pc-line-2); background:var(--pc-panel-2); transition:transform .25s var(--pc-spring), border-color .25s, box-shadow .25s}
#player-center-modal .pc-theme-card:not(.locked):hover{transform:translateY(-3px)}
#player-center-modal .pc-wallpaper-preview{
  height:auto; aspect-ratio:16/8; border-radius:16px; margin-bottom:14px; background-size:cover; background-position:center;
  background-color:var(--pc-panel-2); border:1px solid var(--pc-line-2); display:flex; align-items:center; justify-content:center;
}
#player-center-modal .pc-wp-placeholder{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12.5px; color:var(--pc-ink-3)}
#player-center-modal .pc-wp-placeholder svg.ico{width:34px; height:34px; opacity:.6}
#player-center-modal .pc-wp-actions{display:flex; gap:10px; margin-bottom:10px}

/* 提示条之类的旧浅色补丁已由变量接管，只留几处 app.css 里写死颜色的元素 */
body.theme-light #player-center-modal .pc-name,
body.theme-light #player-center-modal .pc-stat-val{color:var(--pc-ink) !important; -webkit-text-fill-color:currentColor}

/* ══ 窄屏：导航变顶部横滑，hero 纵向排 ═══════════════════════ */
@media (max-width:980px){
  #player-center-modal .pc-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  #player-center-modal .pc-ov-grid{grid-template-columns:minmax(0,1fr)}
  #player-center-modal .pc-ov-grid-even{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  #player-center-modal{padding:0 !important}
  #player-center-modal .pc-shell{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); width:100%; max-width:100%; height:100dvh; max-height:100dvh; border-radius:0; border:0}
  #player-center-modal .pc-rail{border-right:0; border-bottom:1px solid var(--pc-line); min-width:0}
  #player-center-modal .pc-main{min-width:0}
  #player-center-modal .pc-rail-id{display:none}
  #player-center-modal .pc-rail-nav{display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; padding:8px 10px}
  #player-center-modal .pc-rail-grp{display:none}
  #player-center-modal .pc-rail-i{width:auto; flex:none; padding:8px 12px; margin:0}
  #player-center-modal .pc-rail-i.on::before{display:none}
  #player-center-modal .pc-rail-foot{display:none}
  #player-center-modal .pc-logout-btn{display:grid}
  #player-center-modal .pc-header{padding:12px 14px; order:-1}
  #player-center-modal .pc-body{padding:14px 12px 30px}
  #player-center-modal .pc-hero-art{height:104px}
  #player-center-modal .pc-avatar-row{flex-wrap:wrap; padding:0 16px; margin-top:-46px; gap:12px}
  #player-center-modal .pc-avatar{width:84px; height:84px; border-radius:26px}
  #player-center-modal .pc-avatar-row{align-items:flex-start}
  #player-center-modal .pc-name-col{flex-basis:calc(100% - 100px); padding-top:52px}
  #player-center-modal .pc-name{font-size:20px}
  #player-center-modal .pc-hero-acts{width:100%}
  #player-center-modal .pc-hero-acts .pc-btn{flex:1}
  #player-center-modal .pc-showcase{margin:14px 16px 0}
  #player-center-modal .pc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  #player-center-modal .pc-ach-summary{flex-direction:column; align-items:flex-start}
  #player-center-modal .pc-rar-bars{grid-template-columns:repeat(2,minmax(0,1fr))}
  #player-center-modal .pc-games-list{grid-template-columns:minmax(0,1fr)}
  #player-center-modal .pc-games-sum{flex:1 1 100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  #player-center-modal .pc-games-head > .pc-seg{width:100%; display:grid; grid-template-columns:repeat(3,1fr)}
  #player-center-modal .pc-set-row{flex-wrap:wrap}
  #player-center-modal .pc-set-wrap .pc-seg{margin-left:0}
  #player-center-modal .pc-set-row .pc-volume-slider{max-width:none}
  #player-center-modal .pc-game-actions,#player-center-modal .pc-wp-actions{flex-direction:column}
  #player-center-modal .pc-lottery-card{flex-wrap:wrap}
  #player-center-modal .pc-lottery-btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  #player-center-modal *{animation:none !important; transition-duration:.01ms !important}
}

/* 图标配色（原来写在 index.html 的 style="--kc/--c"） */
#player-center-modal [data-tone="pink"]{--kc:#F7A8C8; --c:#F7A8C8}
#player-center-modal [data-tone="gold"]{--kc:#F5C563; --c:#F5C563}
#player-center-modal [data-tone="violet"]{--kc:#A98BFF; --c:#A98BFF}
#player-center-modal [data-tone="green"]{--kc:#5DE0A6; --c:#5DE0A6}
#player-center-modal [data-tone="blue"]{--kc:#5FB8F5; --c:#5FB8F5}
#player-center-modal [data-tone="orange"]{--kc:#FB923C; --c:#FB923C}
#player-center-modal [data-tone="rose"]{--kc:#FB7185; --c:#FB7185}
#player-center-modal .pc-tip-lead{margin-bottom:12px}
#player-center-modal .pc-action-block{width:100%; margin-top:14px}