/* ============================================================
   MEME BOOTH v2.0 — 界面皮肤
   色板：palette.png（奶油白 / 婴儿蓝 / 机器粉 / 棋盘黑 / 薄荷绿 / 红格纹）
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --pink: #F0A8C6;
  --pink-deep: #E07BA8;
  --red: #D95F57;
  --blue: #C4DEF0;
  --ink: #353331;
  --cream: #F7F1E5;
  --wood: #8A5A33;
  --mint: #C4DDA6;
  --orange: #E08A4C;
  --font: "Yuanti SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  --shadow-hard: 4px 4px 0 rgba(53,51,49,.22);
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
}

#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

button { font-family: var(--font); cursor: pointer; }

/* ---------- 通用：波点卡片 chip ---------- */
.chip {
  position: absolute;
  padding: 9px 20px;
  background: var(--cream);
  background-image: radial-gradient(rgba(53,51,49,.10) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

/* ---------- 加载遮罩 ---------- */
#veil {
  position: absolute; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  background-image: radial-gradient(var(--blue) 1.8px, transparent 2px);
  background-size: 26px 26px;
  opacity: 1; transition: opacity .4s ease;
}
#veil.hide { opacity: 0; pointer-events: none; }
.veil-card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 7px 7px 0 rgba(53,51,49,.20);
  padding: 26px 44px;
  text-align: center;
}
.veil-title {
  font-size: 30px; font-weight: 900; letter-spacing: 3px;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 var(--ink);
}
.veil-sub { margin-top: 8px; font-size: 13px; font-weight: 800; opacity: .75; }

/* ---------- 广场 ---------- */
#hint {
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

/* 3D 悬浮标签（hover 机器/领币柱/投币口） */
#floatLabel {
  position: absolute; z-index: 25;
  display: none;
  transform: translate(-50%, -100%);
  padding: 7px 16px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 rgba(53,51,49,.25);
  font-size: 13px; font-weight: 900;
  pointer-events: none;
  white-space: nowrap;
}
#floatLabel::after {
  content: '';
  position: absolute; left: 50%; bottom: -7px;
  width: 10px; height: 10px;
  background: #fff;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

/* 硬币持有标识 */
#coinChip {
  position: absolute; right: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 26;
  padding: 9px 18px;
  background: #FFF3C4;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  font-size: 15px; font-weight: 900;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  pointer-events: none;
}
#coinChip.fly { opacity: 0; }

/* 轻提示气泡 */
#toast {
  position: absolute; left: 50%; top: 20px;
  transform: translate(-50%, -16px);
  z-index: 60;
  padding: 10px 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 800;
  opacity: 0;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  max-width: 88vw;
  text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 白闪过渡 */
#wflash {
  position: absolute; inset: 0; z-index: 80;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

/* ═══ 拍摄场景 ═══ */
#boothUI { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
#boothUI button { pointer-events: auto; }


/* 回广场（右上，给语言切换让位） */
#exitBoothBtn {
  position: absolute; right: 84px; top: max(14px, env(safe-area-inset-top));
  z-index: 32;
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#exitBoothBtn:active { transform: translateY(3px); box-shadow: none; }

/* 语言切换（全局右上角） */
#langToggle {
  position: absolute; right: 14px; top: max(14px, env(safe-area-inset-top));
  z-index: 65;
  border: 2.5px solid var(--ink);
  background: var(--mint);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#langToggle:active { transform: translateY(3px); box-shadow: none; }


/* 取景叠加层：不再是悬浮面板！main.js 每帧把它投影对齐到帘内 3D 电视，
   倒数/提示/徽标/扫描线/白闪都落在电视屏幕上 */
#viewfinder {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  z-index: 2;
}
/* 视频/画布只作 3D 纹理数据源，DOM 里藏起来（不 display:none，避免浏览器停解码） */
#viewfinder video, #viewfinder canvas {
  position: absolute; left: -60px; top: -60px;
  width: 8px; height: 8px;
  opacity: 0.01;
  pointer-events: none;
}

.vfBadge {
  position: absolute; z-index: 3;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900;
  background: #fff; border: 2.5px solid var(--ink);
}
#modeBadge { top: 10px; left: 10px; background: #FFD84D; }
#shotBadge { top: 10px; right: 10px; background: var(--pink-deep); color: #fff; }

#countNum {
  position: absolute; inset: 0; z-index: 4;
  display: none; align-items: center; justify-content: center;
  font-size: 110px;
  font-size: 42cqh;              /* 跟随电视投影大小缩放 */
  font-weight: 900; color: #fff;
  text-shadow: 4px 4px 0 var(--ink);
  pointer-events: none;
}
#countNum.pop { display: flex; animation: pop .65s ease-out; }
@keyframes pop {
  0% { transform: scale(1.7); opacity: 0; }
  25% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.92); opacity: .9; }
}

#feedHint {
  position: absolute; z-index: 3;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 16px; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 2.5px solid var(--ink);
  font-size: 13.5px; font-weight: 900;
}

/* 站位检测扫描线 */
#scanLine {
  position: absolute; left: 0; right: 0; top: -8%;
  height: 8%;
  z-index: 5;
  background: linear-gradient(180deg, transparent, rgba(200,235,255,.75), transparent);
  opacity: 0;
  pointer-events: none;
}
#viewfinder.scanning #scanLine { opacity: 1; animation: scan 1.5s ease-in-out; }
@keyframes scan { 0% { top: -8%; } 100% { top: 100%; } }
#viewfinder.scanning::after {
  content: '';
  position: absolute; inset: 0; z-index: 4;
  border: 3px dashed rgba(255,255,255,.8);
  border-radius: 14px;
  margin: 14px;
  animation: scanFade 1.5s ease-in-out;
  pointer-events: none;
}
@keyframes scanFade { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* 抓拍白闪 */
#feedFlash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
#feedFlash.go { animation: flashAnim .45s ease-out; }
@keyframes flashAnim { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════
   大头贴机操作台（#kiosk）· 极简黑白
   ------------------------------------------------------------
   房间本身已经很热闹（粉格纹、绿植、贴纸、灯管），所以机器界面
   刻意做减法：纯白底、黑字、发丝线框，选中才变实心黑。
   ⚠️ 别往这里加奶油色/粉色/波点底纹——那是房间的语言，不是屏幕的。

   main.js 每帧算出 matrix3d 把整块面板贴到 3D 电视上，
   所以这里的 px 是「设计稿单位」，1000×750 固定不变。
   ═══════════════════════════════════════════════════════════ */
#kiosk {
  --k-line: #C2C2C2;          /* 发丝线。⚠️ 面板会被 matrix3d 缩到约 0.55 倍，
                                 所以线宽一律按 2px 起写，1px 会缩没 */
  --k-ink: #111;
  --k-mute: #8C8C8C;
  --k-fill: #EAEBED;          /* 占位块灰 */
  position: fixed;
  left: 0; top: 0;
  width: 1000px; height: 750px;
  transform-origin: 0 0;
  will-change: transform;
  container-type: size;
  z-index: 31;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: transparent;    /* 中间那格要透出电视贴图，别铺底色 */
  color: var(--k-ink);
  font-size: 24px;
  letter-spacing: .02em;
  pointer-events: auto;
}
/* ⚠️ 这条别加 border:0——它是 ID 选择器，会压过 .kChip/.kShot/.kTplBtn 等
   class 上的边框，整套界面会变成「没有框的纯文字」。要去边框的按钮单独写。 */
#kiosk button { pointer-events: auto; font-family: inherit; color: inherit; background: none; }

/* ---- 顶栏：BACK · 标题 · 步数/倒计时 ---- */
#kiosk .kHead {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 34px 18px;
  background: #fff;
}
#kBack {
  flex: 0 0 auto;
  border: 0;
  font-size: 22px; font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}
#kBack:hover { opacity: .55; }
#kTitle {
  flex: 1 1 auto; text-align: center;
  font-size: 34px; font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}
#kStep {
  flex: 0 0 auto; min-width: 96px; text-align: right;
  font-size: 20px; font-weight: 700; color: var(--k-mute);
  white-space: nowrap;
}

/* ---- 中段：左栏 / 主区 / 右栏 ---- */
/* ⚠️ kBody 必须透明：中间那格要透出电视自己的摄像头贴图。
   白底由两侧栏各自铺。 */
#kiosk .kBody { flex: 1 1 auto; display: flex; min-height: 0; background: transparent; }
#kiosk .kRail {
  flex: 0 0 19%;
  background: #fff;
  display: flex; flex-direction: column; gap: 14px;
  padding: 8px 18px 18px;
  overflow: hidden;
}
#kLeft { border-right: 2px solid var(--k-line); }
#kRight { border-left: 2px solid var(--k-line); }
/* 只有拍摄和选模板两步需要两侧栏，其余步骤让主区独占 */
#kiosk[data-step="intro"] .kRail,
#kiosk[data-step="pick"] .kRail,
#kiosk[data-step="effect"] .kRail { display: none; }
#kiosk[data-step="print"] #kLeft { display: none; }

#kiosk .kMain { flex: 1 1 auto; position: relative; min-width: 0; background: transparent; }
#kStage {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 26px 20px;
  overflow: hidden;
  background: #fff;
}
/* 拍摄时舞台让开，露出电视里的实时画面 */
#kiosk[data-step="shoot"] #kStage { background: transparent; pointer-events: none; }

/* ---- 底栏：提示 + CONTINUE（靠右，MEI 那套） ---- */
#kiosk .kFoot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 34px 26px;
  background: #fff;
}
#kHint { flex: 1 1 auto; font-size: 19px; font-weight: 600; color: var(--k-mute); }
#kNext {
  flex: 0 0 auto;
  border: 3px solid var(--k-ink);
  padding: 16px 54px;
  font-size: 22px; font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
#kNext:not(:disabled):hover { background: var(--k-ink); color: #fff; }
#kNext.primary { background: var(--k-ink); color: #fff; }
#kNext:disabled { border-color: var(--k-line); color: var(--k-mute); background: none; }

/* ---- ① 开机页 ---- */
.kIntro { text-align: center; }
.kIntro h3 { font-size: 46px; font-weight: 900; letter-spacing: .06em; }
.kIntro .kSub { margin-top: 14px; font-size: 24px; font-weight: 600; color: var(--k-mute); }
.kChips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.kChip {
  border: 2px solid var(--k-line);
  padding: 12px 26px;
  font-size: 20px; font-weight: 700;
  white-space: nowrap;
  transition: border-color .15s ease;
}
.kChip:hover { border-color: var(--k-ink); }
.kChip.on { border: 3px solid var(--k-ink); }
.kChip.wide { display: block; width: 100%; margin-top: 12px; }
.kChip.small { font-size: 17px; padding: 9px 16px; }

/* ---- ② 拍摄：左栏题目 / 右栏格子 ---- */
.kRailTitle { font-size: 17px; font-weight: 700; letter-spacing: .1em; color: var(--k-mute); text-align: center; }
.kPrompt { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.kPromptArt {
  width: 100%; aspect-ratio: 1;
  display: grid; place-items: center;
  border: 2px solid var(--k-line);
  overflow: hidden;
  font-size: 68px;
  background: #fff;
}
.kPromptArt img { width: 100%; height: 100%; object-fit: contain; }

.kCells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kCell {
  aspect-ratio: 4 / 3;
  border: 2px solid var(--k-line);
  background: var(--k-fill);
  display: grid; place-items: center;
  overflow: hidden;
}
.kCell.filled { background: #fff; }
.kCell.live { border: 4px solid var(--k-ink); }
.kCell img { width: 100%; height: 100%; object-fit: cover; }
.kCellNo { font-size: 18px; font-weight: 700; color: var(--k-mute); }

/* ---- ③ 选片 / ④ 选滤镜 ---- */
.kPick { width: 100%; text-align: center; }
.kPickGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kEffects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kShot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--k-line);
  overflow: hidden;
  background: var(--k-fill);
  padding: 0;
}
.kShot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kShot.on { border: 5px solid var(--k-ink); }
.kShotNo {
  position: absolute; right: 8px; top: 8px;
  min-width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 800;
}
.kShot.on .kShotNo { background: var(--k-ink); color: #fff; }
/* 滤镜名：像 MEI 那样浮在图中央的小白牌 */
.kShotTag {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #fff; border: 2px solid var(--k-line);
  padding: 6px 16px;
  font-size: 16px; font-weight: 700; letter-spacing: .06em;
  white-space: nowrap;
}
.kSub { font-size: 19px; font-weight: 600; color: var(--k-mute); margin-top: 14px; }
.kNote { font-size: 15px; font-weight: 600; color: var(--k-mute); line-height: 1.5; margin-top: 8px; }

/* ---- ⑤ 选模板 / 底色 ---- */
.kTplBtn {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--k-line);
  padding: 10px 12px;
  font-size: 18px; font-weight: 700;
  text-align: left;
}
.kTplBtn.on { border: 3px solid var(--k-ink); }
.kTplName { flex: 1 1 auto; }
/* 模板缩略：用线框比例暗示版式，比缩略图更好认（同 MEI 的 PICK YOUR FORMAT） */
.kTplShape { flex: 0 0 auto; border: 2px solid var(--k-ink); background: var(--k-fill); }
.kTplShape.strip4    { width: 16px; height: 38px; }
.kTplShape.red3      { width: 38px; height: 15px; }
.kTplShape.heart3    { width: 16px; height: 38px; border-radius: 8px 8px 0 0; }
.kTplShape.idcard    { width: 38px; height: 25px; }
.kTplShape.wallpaper { width: 21px; height: 38px; }

.kSwatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kSwatch { aspect-ratio: 1; border: 2px solid var(--k-line); }
.kSwatch.on { outline: 4px solid var(--k-ink); outline-offset: 3px; }

.kToggle {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--k-line);
  padding: 11px 14px;
  font-size: 18px; font-weight: 700;
  margin-top: 6px;
}
.kToggle.on { border: 3px solid var(--k-ink); }
.kToggleDot { width: 16px; height: 16px; border: 2px solid var(--k-ink); }
.kToggle.on .kToggleDot { background: var(--k-ink); }

/* ---- 成片预览 ---- */
.kPreview {
  width: 100%; height: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
.kPreview img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border: 2px solid var(--k-line);
  background: #fff;
}

/* ═══ 装扮模式 ═══ */
#decoToggle {
  position: absolute; left: 14px; top: max(14px, env(safe-area-inset-top));
  z-index: 33;
  border: 2.5px solid var(--ink);
  background: var(--blue);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#decoToggle:active { transform: translateY(3px); box-shadow: none; }

/* 一键回正（广场左上，装扮按钮下方） */
#recenterBtn {
  position: absolute; left: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 46px);
  z-index: 33;
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#recenterBtn:active { transform: translateY(3px); box-shadow: none; }

/* 小岛视角下的返回按钮（回正按钮下方，仅在飞到小岛外时显示） */
#isleBackBtn {
  position: absolute; left: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 92px);
  z-index: 33;
  border: 2.5px solid var(--ink);
  background: var(--mint);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#isleBackBtn:active { transform: translateY(3px); box-shadow: none; }

/* ═══ 群岛地图 ═══ */
#mapBtn {
  position: absolute; right: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 46px);
  z-index: 34;
  border: 2.5px solid var(--ink);
  background: var(--cream);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#mapBtn:active { transform: translateY(3px); box-shadow: none; }

#mapLabels { position: absolute; inset: 0; z-index: 36; display: none; pointer-events: none; }
.mapLabel {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  white-space: nowrap;
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 rgba(53,51,49,.35);
}
.mapLabel:active { transform: translate(-50%, calc(-50% + 3px)); box-shadow: none; }
.mapLabel.soon { background: #E9E6DE; color: rgba(53,51,49,.62); }
.mapLabel .tag {
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-size: 10.5px;
}
@media (max-width: 640px) {
  #mapBtn { padding: 8px 12px; font-size: 12px; }
  .mapLabel { font-size: 11.5px; padding: 6px 11px; }
  .mapLabel .tag { font-size: 9.5px; padding: 2px 5px; }
}

#decoUI { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#decoUI button { pointer-events: auto; }

/* 顶栏：标题 + 保存/重置/导出/完成 */
#decoBar {
  position: absolute; left: 14px; top: max(14px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--cream);
  background-image: radial-gradient(rgba(53,51,49,.10) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#decoTitle { font-size: 13px; font-weight: 900; padding: 0 4px; white-space: nowrap; }
#decoBar button {
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px; font-weight: 900;
  box-shadow: 0 2.5px 0 var(--ink);
  transition: transform .12s ease;
  white-space: nowrap;
}
#decoBar button:active { transform: translateY(2.5px); box-shadow: none; }
#decoSave { background: var(--mint) !important; }
#decoDone { background: var(--pink) !important; }

/* 选中家具的浮动工具条（旋转/删除） */
/* 同上：广场装扮的选中操作条也跟随库面板实测高度（--plaza-lib-h） */
#decoSel {
  position: absolute; left: 50%; bottom: calc(var(--plaza-lib-h, 148px) + 24px);
  z-index: 2;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  padding: 7px 10px;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#decoSel button {
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px; font-weight: 900;
}
#decoSel button:active { background: rgba(247,241,229,.18); }

/* 底部家具库 */
#decoLib {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(720px, 94vw);
  padding: 10px 14px 12px;
  background: var(--cream);
  background-image: radial-gradient(rgba(53,51,49,.10) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#decoLibTitle { font-size: 12px; font-weight: 900; opacity: .75; margin-bottom: 8px; }
#decoLibGrid {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
#decoLibGrid button {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 64px; padding: 7px 4px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease;
}
#decoLibGrid button:active { transform: translateY(3px); box-shadow: none; }
#decoLibGrid .sw {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 9px;
  font-size: 19px;
}
#decoLibGrid .nm { font-size: 11px; font-weight: 900; white-space: nowrap; }

/* 装扮模式提示（右上，语言切换下方） */
#decoHint {
  left: auto; right: 14px; top: max(64px, calc(env(safe-area-inset-top) + 50px));
  bottom: auto;
  max-width: 44vw;
  white-space: normal; text-align: center; line-height: 1.5;
  pointer-events: none;
}

/* 拖拽中的光标 */
#gl.deco-grab { cursor: grab; }
#gl.deco-dragging { cursor: grabbing !important; }

/* ---------- 移动端 390px ---------- */
@media (max-width: 640px) {
  #exitBoothBtn { right: 74px; padding: 8px 12px; font-size: 12px; }
  #langToggle { padding: 8px 12px; font-size: 12px; }
  #recenterBtn { padding: 8px 12px; font-size: 12px; }
  #isleBackBtn { padding: 8px 12px; font-size: 12px; }
  /* 窄屏：模式徽标移到取景框底部左侧，避免压住顶部"演示画面"标题 */
  #modeBadge { top: auto; bottom: 8px; left: 8px; font-size: 11px; max-width: 62%; }
  .chip { font-size: 12px; padding: 8px 16px; }
  #hint { max-width: 92vw; white-space: normal; text-align: center; line-height: 1.5; }
  .veil-title { font-size: 24px; }
  /* 装扮模式 · 移动端 */
  #decoToggle { padding: 8px 12px; font-size: 12px; }
  #decoBar { max-width: calc(100vw - 100px); flex-wrap: wrap; border-radius: 18px; gap: 6px; padding: 7px 10px; }
  #decoTitle { font-size: 12px; width: 100%; }
  #decoBar button { font-size: 11.5px; padding: 4px 10px; }
  #decoHint { display: none; }
  #decoLib { padding: 8px 10px 10px; border-radius: 16px; }
  #decoLibGrid button { width: 56px; }
  #decoLibGrid .sw { width: 30px; height: 30px; font-size: 16px; }
  #decoLibGrid .nm { font-size: 10px; }
  #decoSel { bottom: 132px; }
}

/* ---------- 小屋 UI（p12 Jessie 的小家） ---------- */
#homeTitle {
  left: 14px; top: max(14px, env(safe-area-inset-top));
  z-index: 32; font-weight: 900;
}
#homeExitBtn {
  position: absolute; right: 84px; top: max(14px, env(safe-area-inset-top));
  z-index: 32;
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#homeExitBtn:active { transform: translateY(3px); box-shadow: none; }
#homeHint {
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 32; font-size: 12.5px;
}

@media (max-width: 640px) {
  #homeExitBtn { right: 74px; padding: 8px 12px; font-size: 12px; }
  #homeHint { display: none; }
  #homeTitle { font-size: 12px; padding: 8px 16px; }
  #homeRecenterBtn { padding: 8px 12px; font-size: 12px; }
}

/* ---------- 小屋布置模式 UI（p13） ---------- */
#homeDecoToggle {
  position: absolute; left: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 46px);
  z-index: 33;
  border: 2.5px solid var(--ink);
  background: var(--pink);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#homeDecoToggle:active { transform: translateY(3px); box-shadow: none; }

/* 小屋一键回正（布置按钮下方，与广场回正同款白底） */
#homeRecenterBtn {
  position: absolute; left: 14px; top: calc(max(14px, env(safe-area-inset-top)) + 92px);
  z-index: 33;
  border: 2.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ink);
}
#homeRecenterBtn:active { transform: translateY(3px); box-shadow: none; }
/* 布置模式：排到布置条正下方（布置条在手机上会换行变高，高度由 JS 实测写入变量） */
#homeRecenterBtn.deco-pos {
  top: calc(max(14px, env(safe-area-inset-top)) + var(--home-decobar-h, 46px) + 10px);
}

#homeDecoUI { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#homeDecoUI button { pointer-events: auto; }

/* 顶栏：标题 + 重置/完成 */
#homeDecoBar {
  position: absolute; left: 14px; top: max(14px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--cream);
  background-image: radial-gradient(rgba(53,51,49,.10) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#homeDecoTitle { font-size: 13px; font-weight: 900; padding: 0 4px; white-space: nowrap; }
#homeDecoBar button {
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px; font-weight: 900;
  box-shadow: 0 2.5px 0 var(--ink);
  transition: transform .12s ease;
  white-space: nowrap;
}
#homeDecoBar button:active { transform: translateY(2.5px); box-shadow: none; }
#homeDecoDone { background: var(--pink) !important; }

/* 选中家具的浮动工具条（旋转/删除） */
/* 选中操作条：紧贴在家具库面板上方。库面板高度随内容/屏宽变化，
 * 由 main.js 实测写进 --home-lib-h，别再写死 bottom（写死会被库面板压住）。 */
#homeDecoSel {
  position: absolute; left: 50%; bottom: calc(var(--home-lib-h, 140px) + 24px);
  z-index: 2;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  padding: 7px 10px;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#homeDecoSel button {
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12.5px; font-weight: 900;
}
#homeDecoSel button:active { background: rgba(247,241,229,.18); }

/* 底部家具库 */
#homeDecoLib {
  position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(560px, 94vw);
  padding: 10px 14px 12px;
  background: var(--cream);
  background-image: radial-gradient(rgba(53,51,49,.10) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard);
  pointer-events: auto;
}
#homeDecoLibTitle { font-size: 12px; font-weight: 900; opacity: .75; margin-bottom: 8px; }
#homeDecoLibGrid {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
#homeDecoLibGrid button {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 64px; padding: 7px 4px 6px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .12s ease;
}
#homeDecoLibGrid button:active { transform: translateY(3px); box-shadow: none; }
#homeDecoLibGrid .sw {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 9px;
  font-size: 19px;
}
#homeDecoLibGrid .nm { font-size: 11px; font-weight: 900; white-space: nowrap; }

@media (max-width: 640px) {
  #homeDecoToggle { padding: 8px 12px; font-size: 12px; }
  #homeDecoBar { max-width: calc(100vw - 100px); flex-wrap: wrap; border-radius: 18px; gap: 6px; padding: 7px 10px; }
  #homeDecoTitle { font-size: 12px; width: 100%; }
  #homeDecoBar button { font-size: 11.5px; padding: 4px 10px; }
  #homeDecoLib { padding: 8px 10px 10px; border-radius: 16px; }
  #homeDecoLibGrid button { width: 56px; }
  #homeDecoLibGrid .sw { width: 30px; height: 30px; font-size: 16px; }
  #homeDecoLibGrid .nm { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════
 * 工坊·写字面板（p23 第一步）——白纸铺在绿色 cutting board 上，工坊配色
 * 铺满屏幕、半透背景露出后面 3D 桌面；.show 淡入
 * ═══════════════════════════════════════════════════════════ */
#studioWrite {
  position: fixed; inset: 0; z-index: 40;
  display: none; align-items: center; justify-content: center;
  background: rgba(60, 48, 36, 0.42);
  opacity: 0; transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#studioWrite.show { opacity: 1; }

/* 真实绿色切割垫——铺满整个背景（Jessie：整块 cutting board 当背景，面板底透明）。
 * 标准 self-healing mat：墨绿底 + 细毫米格 + 粗厘米格 + 一圈白刻度描边。 */
#studioWriteMat {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(rgba(233,243,238,.26) 0 1.5px, transparent 1.5px 56px),
    repeating-linear-gradient(90deg, rgba(233,243,238,.26) 0 1.5px, transparent 1.5px 56px),
    repeating-linear-gradient(rgba(150,205,178,.13) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(150,205,178,.13) 0 1px, transparent 1px 14px),
    #21463A;
  box-shadow: inset 0 0 0 3px #35604F, inset 0 0 0 7px #1A3229, inset 0 0 120px rgba(0,0,0,.35);
  opacity: 0; transition: opacity 0.3s ease;
}
#studioWrite.show #studioWriteMat { opacity: 1; }

/* 造字工具 iframe（铺满切割垫、透明底，内部元素浮在绿垫上；重排在 studio-skin.css） */
#studioWriteFrame {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border: 0; background: transparent;
  opacity: 0; transition: opacity 0.35s ease 0.08s;
}
#studioWrite.show #studioWriteFrame { opacity: 1; }

/* 起身按钮（右上角，奶油圆角） */
#studioWriteExit {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  border: 2px solid #C7A876; border-radius: 999px;
  background: #F7F1E5; color: #4A3A28;
  font: 700 14px/1 system-ui, sans-serif;
  padding: 9px 14px; cursor: pointer;
  box-shadow: 0 4px 0 #C7A876;
}
#studioWriteExit:active { transform: translateY(2px); box-shadow: 0 2px 0 #C7A876; }

@media (max-width: 640px) {
  #studioWriteMat { width: 94vw; padding: 20px 14px 16px; }
}

/* ---------- 工坊场景 UI（p23 开张：出门/标题/提示，照小屋那套） ---------- */
#studioTitle { left: 14px; top: max(14px, env(safe-area-inset-top)); z-index: 32; font-weight: 900; }
#studioExitBtn {
  position: absolute; right: 84px; top: max(14px, env(safe-area-inset-top)); z-index: 32;
  border: 2.5px solid var(--ink); background: #fff; border-radius: 999px;
  padding: 9px 18px; font-size: 13px; font-weight: 900; box-shadow: 0 3px 0 var(--ink);
}
#studioExitBtn:active { transform: translateY(3px); box-shadow: none; }
#studioHint { left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 32; font-size: 12.5px; }
@media (max-width: 640px) {
  #studioExitBtn { right: 74px; padding: 8px 12px; font-size: 12px; }
  #studioHint { display: none; }
  #studioTitle { font-size: 12px; padding: 8px 16px; }
}