/* AstroSwarm A-Card 3D 立方体卡片样式（2026-11-03）

卡片是一个真长方体：正面/背面沿 Z 轴各偏移 T/2，四条侧壁用 rotateY/rotateX
立在边上。.ac-card3d 上是拖动旋转（--rx/--ry），.ac-flipper 上是翻面（180°）。
社区 #/card 与个人中心共用。
*/

.ac-scene {
  display: grid;
  place-items: center;
  width: 100%;
  padding: 26px 0 4px;
  perspective: 1600px;
}

.ac-card3d {
  --t: 22px;                       /* 卡片总厚度 */
  --t2: calc(var(--t) / 2);
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 1.586 / 1;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
  cursor: grab;
  outline: none;
}
.ac-card3d.is-dragging { transition: none; cursor: grabbing; }
.ac-card3d:focus-visible { box-shadow: 0 0 0 3px rgba(138, 90, 43, .28); border-radius: 18px; }

.ac-flipper {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .68s cubic-bezier(.2, .7, .2, 1);
}
.ac-card3d.is-flipped .ac-flipper { transform: rotateY(180deg); }

/* ---------- 正面 / 背面 ---------- */
.ac-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: #F5F6FA;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 24px 56px rgba(16, 15, 12, .30), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}
.ac-front {
  transform: translateZ(var(--t2));
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(167, 139, 250, .32) 0%, rgba(167, 139, 250, 0) 46%),
    radial-gradient(90% 120% at 100% 100%, rgba(103, 213, 208, .16) 0%, rgba(103, 213, 208, 0) 52%),
    linear-gradient(150deg, #171325 0%, #0E1018 58%, #0A0C12 100%);
}
.ac-back {
  transform: rotateY(180deg) translateZ(var(--t2));
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(226, 205, 176, .24) 0%, rgba(226, 205, 176, 0) 46%),
    radial-gradient(90% 120% at 0% 100%, rgba(138, 90, 43, .20) 0%, rgba(138, 90, 43, 0) 55%),
    linear-gradient(140deg, #1A1712 0%, #11100D 60%, #0A0A08 100%);
}

/* ---------- 四条真实侧壁 ---------- */
.ac-side {
  position: absolute;
  backface-visibility: visible;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ac-side--right,
.ac-side--left {
  top: 16px;
  height: calc(100% - 32px);
  width: var(--t);
}
.ac-side--right {
  left: calc(100% - var(--t2));
  transform-origin: center center;
  transform: rotateY(90deg);
  background: linear-gradient(180deg, #3B3155 0%, #241D3A 42%, #0C0A14 100%);
}
.ac-side--left {
  left: calc(0px - var(--t2));
  transform-origin: center center;
  transform: rotateY(90deg);
  background: linear-gradient(180deg, #332A4A 0%, #1F1932 48%, #0B0912 100%);
}
.ac-side--top,
.ac-side--bottom {
  left: 16px;
  width: calc(100% - 32px);
  height: var(--t);
}
.ac-side--top {
  top: calc(0px - var(--t2));
  transform-origin: center center;
  transform: rotateX(90deg);
  background: linear-gradient(90deg, #463A63 0%, #2C2444 55%, #141020 100%);
}
.ac-side--bottom {
  top: calc(100% - var(--t2));
  transform-origin: center center;
  transform: rotateX(90deg);
  background: linear-gradient(90deg, #221B36 0%, #140F22 60%, #09070F 100%);
}

/* ---------- 卡面高光 ---------- */
.ac-sheen {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 28%), rgba(255, 255, 255, .18), transparent 42%);
  mix-blend-mode: screen;
  transform: translateZ(calc(var(--t2) + 1px));
}

/* ---------- 卡面内容 ---------- */
.ac-top { display: flex; align-items: center; gap: 10px; }
.ac-logo {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
  background: linear-gradient(140deg, #EDE3D2 0%, #C9A87C 100%);
  box-shadow: 0 0 12px rgba(201, 168, 124, .35);
}
.ac-brand { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 246, 250, .74); }
.ac-level {
  margin-left: auto; font-size: 11px; color: #E7D3B4;
  border: 1px solid rgba(226, 205, 176, .45); border-radius: 999px; padding: 2px 10px;
}
.ac-mid { margin-top: auto; display: flex; align-items: flex-end; gap: 14px; }
.ac-av {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, .10); color: #F5F6FA;
  font-size: 20px; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset;
}
.ac-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-name { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.ac-role { margin-top: 3px; font-size: 11.5px; color: rgba(245, 246, 250, .62); }
.ac-id {
  margin-top: 10px; font-family: ui-monospace, Consolas, monospace;
  font-size: 16px; letter-spacing: .18em; color: rgba(245, 246, 250, .92);
}
.ac-foot {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245, 246, 250, .5);
}
.ac-foot .ac-theme { margin-left: auto; }
.ac-back-body { margin-top: auto; margin-bottom: auto; }
.ac-back-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 246, 250, .5); }
.ac-link {
  display: block; margin-top: 6px; word-break: break-all;
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: rgba(245, 246, 250, .85);
}
.ac-stats { display: flex; gap: 26px; margin-top: 18px; }
.ac-stats div { display: flex; flex-direction: column; gap: 2px; }
.ac-stats b { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 300; }
.ac-stats span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 246, 250, .5); }
.ac-back-chip { font-size: 9px; letter-spacing: .14em; color: rgba(226, 205, 176, .8); margin-left: auto; }
.ac-tip { margin: 18px 0 0; text-align: center; font-size: 11.5px; color: var(--ink3, #74747A); }

/* ---------- 个人中心挂载区 ---------- */
.account-card-mount {
  width: min(620px, 100%);
  max-width: 620px;
  margin: 0 auto;
  flex: 0 0 auto;
}
.cstage > .account-card-mount { width: min(620px, 100%); }
.ac-login-note { padding: 26px; text-align: center; font-size: 13px; color: var(--ink3, #74747A); }
.ac-sig-row {
  display: flex; align-items: center; gap: 10px; margin: 10px auto 0; max-width: 520px;
}
.ac-sig-row label { font-size: 12px; color: var(--ink2, #4E4E53); white-space: nowrap; }
.ac-sig-row input {
  flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 8px;
  background: #fff; color: var(--ink, #0B0B0C); font: inherit; font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(16,15,12,.10);
}
.ac-sig-row input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold, #8A5A2B), 0 0 0 3px rgba(138,90,43,.12); }

/* 旧的卡面 DOM 只用于兼容 account.js 的绑定，必须真正隐藏 */
.cardwrap[hidden], .cstage .skinfab[hidden] { display: none !important; }
.skinfab[hidden] { display: none !important; }

@media (max-width: 560px) {
  .ac-face { padding: 16px; }
  .ac-name { font-size: 20px; }
  .ac-id { font-size: 14px; }
  .ac-av { width: 46px; height: 46px; flex-basis: 46px; font-size: 17px; }
  .ac-scene { padding-top: 16px; }
  .ac-card3d { --t: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-card3d, .ac-flipper { transition: none; }
}

/* ---------- WebGL 3D 卡片舞台 ---------- */
.ac3d-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  touch-action: none;
  cursor: grab;
}
.ac3d-stage:active { cursor: grabbing; }
.ac3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.ac3d-fallback-note { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--ink3, #74747A); }
/* 社区 #/card 的 3D 舞台限宽，和个人中心保持一致 */
#acMount { width: min(620px, 100%); margin: 0 auto; }

/* 3D 卡片的接触阴影（CSS 椭圆，比 3D 平面更柔和） */
.ac3d-stage::after {
  content: "";
  position: absolute;
  left: 14%; right: 14%; bottom: 3%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(16, 15, 12, .30) 0%, rgba(16, 15, 12, .12) 45%, rgba(16, 15, 12, 0) 72%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}
.ac3d-canvas { z-index: 1; }