/* ============================================================
 *  魔法换装屋 · 样式
 * ============================================================ */

:root {
  --ink: #6b4a5a;
  --ink-soft: #ad7f97;
  --brand: #ff5fae;
  --brand-lite: #ff9ed2;
  --brand-deep: #e0409a;
  --sh-sm: 0 2px 6px rgba(198, 106, 164, 0.16);
  --sh-md: 0 5px 14px rgba(198, 106, 164, 0.20), 0 1px 3px rgba(198, 106, 164, 0.13);
  --sh-lg: 0 10px 26px rgba(198, 106, 164, 0.26), 0 2px 6px rgba(198, 106, 164, 0.15);
  --sh-brand: 0 8px 20px rgba(255, 95, 174, 0.44), 0 2px 5px rgba(224, 64, 154, 0.30);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #ffe9f5;
  overscroll-behavior: none;
}

#app {
  position: fixed; inset: 0;
  background: linear-gradient(168deg, #fff4fb 0%, #ffe6f5 45%, #ffc2e6 100%);
}
#app::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg,
    #ff5fae 0 14px, #ff9ed2 14px 28px, #ffd0e8 28px 42px);
  opacity: .55; z-index: 4; pointer-events: none;
}

#stage { position: absolute; inset: 0; overflow: hidden; }

/* ---------------- 场景背景 ---------------- */
#L-scene.scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---------------- 角色：多层叠加 ---------------- */
#doll {
  position: absolute;
  z-index: 1;
  /* left/top/width/height 由 JS 的 layout() 按可用空间算 */
}
#doll .layer {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* 提示浏览器这几张图会一起缩放，减少接缝 */
  image-rendering: auto;
}
#L-body  { z-index: 0; }
#L-hair  { z-index: 1; }
#L-dress { z-index: 2; }
#L-shoes { z-index: 3; }
#L-acc   { z-index: 4; }

/* ---------------- 星星 ---------------- */
.hud {
  position: absolute; left: 12px; top: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  box-shadow: var(--sh-md);
  font-size: 17px; letter-spacing: 1px;
  z-index: 5;
  max-width: 62vw;
  white-space: nowrap; overflow: hidden;
}

/* ---------------- 左侧全局操作 ---------------- */
#global-bar {
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  z-index: 5;
}
.gbtn {
  width: 52px; height: 52px;
  border-radius: 18px; border: 1.5px solid rgba(255,255,255,0.9);
  background: linear-gradient(165deg, #ffffff, #fff4fa);
  box-shadow: var(--sh-md);
  font-size: 24px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .18s var(--ease-pop), box-shadow .18s ease;
}
.gbtn:active { transform: scale(0.9); box-shadow: var(--sh-sm); }

/* ---------------- 右侧分类 ---------------- */
#rail {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 5;
}
.rail-btn {
  width: 68px; padding: 8px 4px 6px;
  border-radius: 20px; border: 1.5px solid rgba(255,255,255,0.9);
  background: linear-gradient(165deg, #ffffff, #fff4fa);
  box-shadow: var(--sh-md);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: inherit; color: #a9527f; font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: transform .18s var(--ease-pop), box-shadow .18s ease,
              background .18s ease, color .18s ease;
}
.rail-btn .ico { font-size: 24px; line-height: 1.15; }
.rail-btn:active { transform: scale(0.92); }
.rail-btn.on {
  background: linear-gradient(160deg, var(--brand-lite), var(--brand));
  color: #fff;
  box-shadow: var(--sh-brand);
}

/* ---------------- 二级面板 ---------------- */
#panel {
  position: absolute;
  right: 84px; top: 50%; transform: translateY(-50%);
  width: 300px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1.5px solid rgba(255,255,255,0.92);
  border-radius: 26px;
  box-shadow: var(--sh-lg);
  z-index: 6;
  overflow: hidden;
  transition: opacity .22s ease, transform .22s var(--ease-pop);
}
#panel[hidden] { display: none; }

#panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 8px;
}
#panel-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--brand-deep); }
#panel-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,0.9);
  box-shadow: var(--sh-sm);
  color: var(--ink-soft); font-size: 15px; font-weight: 700;
  cursor: pointer; display: grid; place-items: center;
}
#panel-close:active { transform: scale(0.9); }

#panel-body {
  padding: 2px 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------- 选项网格 ---------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 4px;
}

.opt {
  padding: 6px 2px 6px;
  border-radius: 16px; border: 1.5px solid rgba(255,255,255,0.9);
  background: linear-gradient(165deg, #ffffff, #fff6fb);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit; color: #a9527f; font-weight: 700; font-size: 11.5px;
  cursor: pointer;
  transition: transform .16s var(--ease-pop), background .16s ease,
              color .16s ease, box-shadow .16s ease;
}
.opt .thumb {
  width: 76px; height: 76px;
  border-radius: 11px;
  background: repeating-conic-gradient(#f4eef8 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}
.opt .lbl { line-height: 1.2; }
.opt:active { transform: scale(0.92); }
.opt[aria-pressed="true"] {
  background: linear-gradient(160deg, var(--brand-lite), var(--brand));
  color: #fff;
  box-shadow: var(--sh-brand);
}
.opt[aria-pressed="true"] .thumb {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

/* ---------------- Toast ---------------- */
#toast {
  position: absolute;
  left: 50%; top: 18px; transform: translate(-50%, -12px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(107, 74, 90, 0.9);
  color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-md);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s var(--ease-pop);
  z-index: 20;
  max-width: 78vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 保存预览 ---------------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(90, 50, 75, 0.55);
  display: grid; place-items: center;
  padding: 20px;
}
.ovbox {
  background: #fff; border-radius: 22px; padding: 14px;
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-height: 92vh;
}
.ovbox img {
  max-width: min(78vw, 420px); max-height: 68vh;
  border-radius: 14px; display: block;
}
.ovhint { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.ovbtn {
  padding: 10px 26px; border-radius: 999px; border: 0;
  background: linear-gradient(160deg, var(--brand-lite), var(--brand));
  color: #fff; font-family: inherit; font-size: 15px; font-weight: 700;
  box-shadow: var(--sh-brand); cursor: pointer;
}
.ovbtn:active { transform: scale(0.95); }

/* ---------------- 窄屏适配 ---------------- */
@media (max-width: 720px) {
  #panel { width: 258px; right: 78px; }
  .rail-btn { width: 60px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .opt .thumb { width: 64px; height: 64px; }
}

/* 封面导出模式：藏掉界面，只留脸 */
.thumb-mode, .thumb-mode body, .thumb-mode #app { background: #ffeef7 !important; }
.thumb-mode #hud, .thumb-mode #global-bar,
.thumb-mode #rail, .thumb-mode #panel,
.thumb-mode #toast { display: none !important; }