* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Roboto, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1200px 620px at 12% -12%, rgba(103, 80, 164, .10), transparent 60%),
    radial-gradient(1000px 540px at 108% 112%, rgba(121, 134, 203, .16), transparent 60%),
    linear-gradient(180deg, #f5f6fc 0%, #e9ebf6 100%);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.page {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.header {
  position: relative;
  z-index: 10;   /* 放大/旋转时名片不覆盖标题 */
  padding: max(18px, env(safe-area-inset-top)) 24px 0;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.title {
  display: inline-block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #1d1b20;
  padding: 10px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 6px 24px rgba(30, 27, 38, .10);
}
.sub {
  margin-top: 6px;
  font-size: 13px;
  color: #49454f;
  opacity: .72;
  letter-spacing: 1px;
}
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene {
  position: relative;
  width: min(90vw, 480px);
  aspect-ratio: 5 / 3;
  perspective: 1400px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.scene:active { cursor: grabbing; }
.card {
  --t: 3px;             /* 卡片厚度（正反面各偏移 ±t/2，中间由纸芯填充） */
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
.face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}
.front { transform: translateZ(calc(var(--t) / 2)); }
.back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
/* 卡片纸芯：与图片同轮廓（同圆角）垫在正反面之间，厚度 = --t */
.core {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #e4e0ee, #f6f4fa 50%, #dedae9);
}
/* 地面投影（跟随旋转/缩放，main.js 中实时更新） */
.card-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -16%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 27, 38, .32), rgba(30, 27, 38, .12) 60%, transparent);
  filter: blur(10px);
  pointer-events: none;
}
.footer {
  position: relative;
  z-index: 10;   /* 放大/旋转时按钮不被名片覆盖 */
  padding: 0 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
}
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 10px 36px rgba(30, 27, 38, .14);
}
mdui-fab.ctrl {
  --shape-corner-normal: 999px;   /* MDUI 官方圆角变量：胶囊形 */
  font-size: 15px;
  /* 通过 mdui elevation token 去掉按钮阴影（fab 常态用 level3，按压/hover 会跳级） */
  --mdui-elevation-level1: none;
  --mdui-elevation-level2: none;
  --mdui-elevation-level3: none;
  --mdui-elevation-level4: none;
  --mdui-elevation-level5: none;
}
/* 触摸遮罩（Material 状态层：按下时按钮表面浮现半透明遮罩） */
mdui-fab.ctrl::part(button) {
  position: relative;
  overflow: hidden;
}
mdui-fab.ctrl::part(button)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--shape-corner-normal);
  background: rgba(0, 0, 0, .14);
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
}
mdui-fab.ctrl.pressed::part(button)::after { opacity: 1; }
@media (hover: hover) {
  mdui-fab.ctrl:hover::part(button)::after { opacity: .5; }
}
.fab-icon { width: 24px; height: 24px; display: block; }
@media (max-width: 560px) {
  .bar { gap: 10px; padding: 10px 12px; }
  .ctrl .label { display: none; }
}
/* 关于弹窗（API 见 mdui 官方文档：close-on-overlay-click / close-on-esc / action slot / ::part(dialog)） */
#aboutDialog::part(dialog) { border-radius: 28px; }
.about-body { text-align: center; padding: 8px 0 4px; }
.about-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--mdui-color-on-surface);
  margin-bottom: 14px;
}
.about-links {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
}
.about-links a {
  color: var(--mdui-color-primary);
  text-decoration: none;
}
.about-beian {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.about-beian a {
  color: var(--mdui-color-on-surface-variant);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.about-beian .badge {
  width: 16px;
  height: 16px;
  display: block;
}
/* 关闭按钮全宽 */
#aboutClose {
  width: 100%;
}
#aboutClose::part(button) {
  width: 100%;
  justify-content: center;
}