/* ══════════════════════════════════════════════════════════
   profile-ui.css — 用户资料卡 + 头像裁剪弹窗
   ══════════════════════════════════════════════════════════ */

/* ══════════ 资料卡 ══════════ */
.user-profile-overlay{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(6,3,16,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.user-profile-overlay.show{display:flex}
.up-card{width:372px;max-width:100%;max-height:min(88vh,720px);display:flex;flex-direction:column;overflow:hidden;
  border-radius:24px;background:var(--tk-bg);box-shadow:var(--tk-shadow);color:var(--tk-ink)}

/* 横幅：配色按 uid 生成，深浅主题通用 */
.up-banner{position:relative;height:92px;flex:none;
  background:linear-gradient(120deg,var(--b1,#e0578c) 0%,var(--b2,#a98bff) 52%,var(--b3,#3d6fd9) 100%)}
.up-banner-art{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(130% 120% at 12% -30%,rgba(255,255,255,.4),transparent 58%),
             url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='54'><g fill='none' stroke='rgba(255,255,255,.18)' stroke-width='1'><circle cx='27' cy='27' r='17'/><circle cx='0' cy='0' r='9'/><circle cx='54' cy='54' r='9'/></g></svg>") repeat}
.up-banner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom,transparent,var(--tk-solid))}
.up-x{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;background:rgba(10,6,20,.38);color:#fff;transition:background .15s,transform .12s}
.up-x svg.ico{width:15px;height:15px}
.up-x:hover{background:rgba(10,6,20,.62)}
.up-x:active{transform:scale(.9)}

.up-head{position:relative;z-index:2;display:flex;align-items:flex-end;gap:12px;padding:0 20px;margin-top:-34px}
.up-av{position:relative;width:78px;height:78px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--b1,#e0578c),var(--b3,#3d6fd9));color:#fff;
  box-shadow:0 0 0 3px var(--tk-solid),0 10px 26px -10px rgba(0,0,0,.7)}
.up-av-fb{font-size:1.9rem;font-weight:800;letter-spacing:0}
.up-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.up-head-txt{min-width:0;padding-bottom:4px}
.up-name{font-size:1.12rem;font-weight:800;letter-spacing:.4px;line-height:1.3;word-break:break-word}
.up-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.up-tags:empty{display:none}
.up-role{font-size:.66rem;font-weight:700;letter-spacing:.5px;padding:2px 9px;border-radius:999px}
.up-role.admin{background:rgba(169,139,255,.16);color:var(--tk-violet);box-shadow:inset 0 0 0 1px rgba(169,139,255,.34)}
.up-role.super{background:rgba(245,197,99,.16);color:var(--tk-gold);box-shadow:inset 0 0 0 1px rgba(245,197,99,.36)}
.up-badge{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;padding:2px 10px;border-radius:999px;
  background:rgba(247,168,200,.14);color:var(--tk-petal);box-shadow:inset 0 0 0 1px rgba(247,168,200,.3)}

.up-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:14px 20px 4px}
.up-sig{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;line-height:1.6;color:var(--tk-ink-2);
  padding:10px 12px;border-radius:13px;background:var(--tk-bg-2);box-shadow:inset 0 0 0 1px var(--tk-line);margin-bottom:12px}
.up-sig svg.ico{width:15px;height:15px;flex:none;margin-top:1px;color:var(--tk-petal);opacity:.8}
.up-sig[hidden]{display:none}

.up-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.up-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 9px;border-radius:14px;min-width:0;
  background:var(--tk-bg-2);box-shadow:inset 0 0 0 1px var(--tk-line)}
.up-stat-i{display:grid;place-items:center;color:var(--tk-ink-3)}
.up-stat-i svg.ico{width:15px;height:15px}
.up-stat b{font-family:var(--tk-num);font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-stat i{font-style:normal;font-size:.6rem;letter-spacing:.5px;color:var(--tk-ink-3)}
.up-stat[data-k="achievements"] b{color:var(--tk-mint)}
.up-stat[data-k="best"] b{color:var(--tk-petal)}
.up-stat[data-k="games"] .up-stat-i{color:var(--tk-sky)}
.up-stat[data-k="messages"] .up-stat-i{color:var(--tk-violet)}
.up-stat[data-k="achievements"] .up-stat-i{color:var(--tk-mint)}
.up-stat[data-k="best"] .up-stat-i{color:var(--tk-petal)}
.up-stat b.sk{width:32px;border-radius:6px;background:linear-gradient(90deg,var(--tk-bg-3),var(--tk-bg-4),var(--tk-bg-3));
  background-size:200% 100%;animation:upSk 1.1s linear infinite;color:transparent}
@keyframes upSk{to{background-position:-200% 0}}

.up-reg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.7rem;color:var(--tk-ink-3)}
.up-reg[hidden]{display:none}
.up-reg span{display:inline-flex;align-items:center;gap:5px}
.up-reg svg.ico{width:14px;height:14px;opacity:.75}

.up-achs-wrap{margin-top:14px}
.up-achs-wrap[hidden]{display:none}
.up-achs-h{display:flex;align-items:center;gap:6px;font-size:.68rem;letter-spacing:1px;color:var(--tk-ink-3);margin-bottom:8px}
.up-achs-h svg.ico{width:14px;height:14px;color:var(--tk-gold)}
.up-achs-h em{font-style:normal;margin-left:auto;font-variant-numeric:tabular-nums}
.up-achs{display:flex;flex-wrap:wrap;gap:6px}
.up-ach{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--ac,#a98bff) 12%,transparent);color:var(--ac,#a98bff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac,#a98bff) 34%,transparent)}
.up-ach > span{color:var(--tk-ink-2)}
.up-ach.r-legendary > span{color:var(--tk-gold)}

.up-err{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px;border-radius:13px;font-size:.8rem;
  background:rgba(251,113,133,.1);color:var(--tk-red);box-shadow:inset 0 0 0 1px rgba(251,113,133,.28)}
.up-err[hidden]{display:none}
.up-err svg.ico{width:16px;height:16px}
.up-retry{margin-left:auto;border:0;cursor:pointer;font:inherit;font-size:.74rem;font-weight:700;padding:5px 12px;border-radius:9px;
  background:rgba(251,113,133,.18);color:var(--tk-red)}

.up-acts{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px}
.up-btn{flex:1 1 92px;min-width:92px;height:38px;padding:0 14px;border:0;border-radius:12px;cursor:pointer;font:inherit;
  font-size:.79rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--tk-bg-3);color:var(--tk-ink-2);box-shadow:inset 0 0 0 1px var(--tk-line);
  transition:filter .15s,transform .12s,background .15s,opacity .2s}
.up-btn svg.ico{width:15px;height:15px}
.up-btn:hover{background:var(--tk-bg-4);color:var(--tk-ink)}
.up-btn:active{transform:scale(.97)}
.up-btn[hidden]{display:none}
.up-btn.primary{background:var(--tk-grad);color:#fff;box-shadow:0 10px 22px -12px rgba(242,140,181,.9)}
.up-btn.primary:hover{filter:brightness(1.08)}
.up-btn.ok{background:linear-gradient(135deg,#34d3a6,#0e9d88);color:#fff;box-shadow:0 10px 22px -12px rgba(14,157,136,.9)}
.up-btn.ok:hover{filter:brightness(1.08)}
.up-btn.ok.done,.up-btn:disabled{filter:none;opacity:.55;cursor:default;background:var(--tk-bg-3);color:var(--tk-ink-3);box-shadow:inset 0 0 0 1px var(--tk-line)}
.up-btn.danger{background:rgba(251,113,133,.12);color:var(--tk-red);box-shadow:inset 0 0 0 1px rgba(251,113,133,.3)}
.up-btn.danger:hover{background:rgba(251,113,133,.2)}
.up-btn:focus-visible,.up-x:focus-visible,.ac-btn:focus-visible,.ac-tool:focus-visible,.ac-mini:focus-visible{outline:2px solid var(--tk-petal);outline-offset:2px}

@media (max-width:520px){
  .user-profile-overlay{align-items:flex-end;padding:0}
  .up-card{width:100%;max-width:none;max-height:92vh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .up-banner{height:82px}
}

/* ══════════ 头像裁剪 ══════════ */
#pc-crop-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;
  background:rgba(4,2,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#pc-crop-modal.show{display:flex}
.ac-box{width:340px;max-width:100%;max-height:94vh;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:16px 18px 18px;border-radius:22px;background:var(--tk-bg);box-shadow:var(--tk-shadow);color:var(--tk-ink)}
.ac-head{display:flex;align-items:center;gap:8px;width:100%;font-size:.92rem;font-weight:800;letter-spacing:.5px}
.ac-head svg.ico{width:17px;height:17px;color:var(--tk-petal)}
.ac-x{margin-left:auto;width:28px;height:28px;border:0;border-radius:9px;cursor:pointer;display:grid;place-items:center;
  background:var(--tk-bg-2);color:var(--tk-ink-3);transition:background .15s,color .15s}
.ac-x svg.ico{width:14px;height:14px}
.ac-x:hover{background:var(--tk-bg-3);color:var(--tk-ink)}
/* 方框（不是圆）显示整张画布：圆外那圈变暗的部分能让人看清画面被裁掉了多少 */
.ac-stage{position:relative;width:280px;height:280px;max-width:100%;border-radius:18px;overflow:hidden;cursor:grab;
  touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:inset 0 0 0 1px var(--tk-line),0 18px 50px -20px rgba(0,0,0,.9)}
.ac-stage.dragging{cursor:grabbing}
.ac-stage canvas{display:block;width:100%;height:100%}
.ac-hint{font-size:.72rem;color:var(--tk-ink-3);letter-spacing:.5px;text-align:center}
.ac-zoom{display:flex;align-items:center;gap:10px;width:100%}
.ac-mini{width:28px;height:28px;flex:none;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:var(--tk-bg-2);color:var(--tk-ink-2);box-shadow:inset 0 0 0 1px var(--tk-line);transition:background .15s,transform .12s}
.ac-mini svg.ico{width:14px;height:14px}
.ac-mini:hover{background:var(--tk-bg-3);color:var(--tk-ink)}
.ac-mini:active{transform:scale(.9)}
#pc-crop-zoom{flex:1;min-width:0;height:22px;-webkit-appearance:none;appearance:none;background:none;cursor:pointer}
#pc-crop-zoom::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:var(--tk-bg-4)}
#pc-crop-zoom::-moz-range-track{height:5px;border-radius:5px;background:var(--tk-bg-4)}
#pc-crop-zoom::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;
  background:var(--tk-grad);box-shadow:0 2px 8px -2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.25) inset}
#pc-crop-zoom::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#f28cb5}
.ac-tools{display:flex;gap:8px;width:100%}
.ac-tool{flex:1;height:32px;border:0;border-radius:11px;cursor:pointer;font:inherit;font-size:.74rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  background:var(--tk-bg-2);color:var(--tk-ink-2);box-shadow:inset 0 0 0 1px var(--tk-line);transition:background .15s,color .15s,transform .12s}
.ac-tool svg.ico{width:14px;height:14px}
.ac-tool:hover{background:var(--tk-bg-3);color:var(--tk-ink)}
.ac-tool:active{transform:scale(.96)}
.ac-tool[data-r="90"] svg.ico{transform:scaleX(-1)}
.ac-acts{display:flex;gap:10px;width:100%;margin-top:2px}
.ac-btn{flex:1;height:38px;border:0;border-radius:12px;cursor:pointer;font:inherit;font-size:.8rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--tk-bg-3);color:var(--tk-ink-2);box-shadow:inset 0 0 0 1px var(--tk-line);transition:filter .15s,transform .12s}
.ac-btn svg.ico{width:15px;height:15px}
.ac-btn.go{flex:1.4;background:var(--tk-grad);color:#fff;box-shadow:0 10px 24px -12px rgba(242,140,181,.9)}
.ac-btn.go:hover{filter:brightness(1.08)}
.ac-btn:active{transform:scale(.97)}
@media (max-width:420px){
  .ac-stage{width:240px;height:240px}
  .ac-tool span{display:none}
}