/* =====================================================================
 * starsand · 星砂工坊 —— DOM 皮肤层（css/skin.css）
 * ---------------------------------------------------------------------
 * 把 assets/skin/ui/* 的 26 张九宫格 / 图标落到 DOM：
 *   · 按钮三态（primary / secondary / mint）
 *   · 面板（panel_modal）、成绩卡（panel_rank）、角色卡（card / card_selected）
 *   · 画廊展柜（well / card）、输入框（field）、底栏图标底座（icon_plate_*）
 *   · 开关（toggle_on / off）、分隔线（divider）、库存数字底板（inventory_pill）
 *
 * ★ 三条 border-image 铁律（务必遵守，出自素材包 README_CN §尺寸与状态）：
 *   1. 生效时必须 border-style: solid; border-color: transparent;，
 *      否则默认 border-style: none → 整条 border-image 不渲染。
 *   2. 启用 border-image 的元素要去掉 background 与 border-radius（fill 已提供中心填充），
 *      box-shadow 可保留。
 *   3. border-image 会忽略 border-radius，圆角由素材自带。
 *   4. slice 顺序是「上 右 下 左」，而 manifest 的 slice_px_ltrb 是「左 上 右 下」→ 必须换位。
 *      例：256×78 按钮 [38,31,38,32] → 31 38 32 38 fill。
 *   5. border-image-width 必须显式给 px 且远小于 slice 源尺寸，
 *      否则按钮会被撑成 100px 高（边框宽 = slice 宽）。
 *
 * ★ 颜色 token 唯一真源：assets/themes/default/theme.json → styles
 *   本文件里的十六进制仅用于 border-image 无法 token 化的场合（素材自带色），
 *   已逐条注释指向 token。
 * ===================================================================== */

/* ─── 通用图标尺寸类（HTML 里所有 <img> 图标共用） ─── */
.ss-h2-icon {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-right: 6px;
  object-fit: contain;
}
.ss-btn-icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  margin-right: 5px;
  object-fit: contain;
  flex: 0 0 auto;
}
.ss-btn-icon-trail {
  margin-right: 0;
  margin-left: 6px;
}
.ss-inline-icon {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
  object-fit: contain;
}
.ss-item-icon {
  width: 22px;
  height: 22px;
  vertical-align: -6px;
  margin-right: 6px;
  object-fit: contain;
}
.ss-plate-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.ss-ad-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
}

/* ═════════════════════════════════════════════════════════════════
 * 1. 遮罩 + 面板
 * ═════════════════════════════════════════════════════════════════ */
.overlay {
  /* token ink_on_light @42%（U3） */
  background: rgba(57, 33, 59, 0.42);
}

.panel {
  /* ui/panel_modal 240×240，slice_px_ltrb [52,52,52,52] → 52 fill */
  background: none;
  border: 10px solid transparent;
  border-image-source: url("../assets/skin/ui/panel_modal.png");
  border-image-slice: 52 fill;
  border-image-width: 16px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 22px 18px;
  /* token ink @28% */
  box-shadow: 0 10px 32px rgba(57, 33, 59, 0.28);
  color: var(--ss-ink, #39213B);
}

.panel h2 {
  color: var(--ss-ink, #39213B);
  letter-spacing: 0.4px;
}
.panel p { color: var(--ss-text-2, #5E526F); }
.panel-score { color: var(--score-color, #A91D55); }

/* ═════════════════════════════════════════════════════════════════
 * 2. 按钮三态
 * ═════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-mint,
[data-variant="mint"] {
  /* 256×78，slice_px_ltrb [38,31,38,32] → 31 38 32 38 fill */
  background: none;
  border: 8px solid transparent;
  border-image-slice: 31 38 32 38 fill;
  border-image-width: 8px 11px;
  border-image-repeat: stretch;
  border-radius: 0;
  color: var(--btn-text, #39213B);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.18);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.15s;
  padding: 11px 20px;
}
.btn-primary {
  border-image-source: url("../assets/skin/ui/button_primary_normal.png");
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active,
.btn-primary.is-pressed {
  border-image-source: url("../assets/skin/ui/button_primary_pressed.png");
  transform: translate(1px, 2px);
  box-shadow: 0 1px 4px rgba(57, 33, 59, 0.20);
}
.btn-primary:disabled,
.btn-primary.is-disabled {
  border-image-source: url("../assets/skin/ui/button_primary_disabled.png");
  color: #8B7C93;                    /* token neutralGray 系，禁用态灰紫字 */
  filter: none;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  border-image-source: url("../assets/skin/ui/button_secondary_normal.png");
}
.btn-secondary:hover { filter: brightness(1.04); }
.btn-secondary:active,
.btn-secondary.is-pressed {
  border-image-source: url("../assets/skin/ui/button_secondary_pressed.png");
  transform: translate(1px, 2px);
  box-shadow: 0 1px 4px rgba(57, 33, 59, 0.20);
}
.btn-secondary:disabled,
.btn-secondary.is-disabled {
  border-image-source: url("../assets/skin/ui/button_secondary_disabled.png");
  color: #8B7C93;
  filter: none;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-mint,
[data-variant="mint"] {
  border-image-source: url("../assets/skin/ui/button_mint_normal.png");
}
.btn-mint:active,
[data-variant="mint"]:active {
  border-image-source: url("../assets/skin/ui/button_mint_pressed.png");
  transform: translate(1px, 2px);
}
.btn-mint:disabled,
[data-variant="mint"]:disabled {
  border-image-source: url("../assets/skin/ui/button_mint_disabled.png");
  color: #8B7C93;
  cursor: not-allowed;
}

/* ★ v63 契约：失败弹窗两枚主按钮 flex 等分不能破。
   border-image-width 降到 6px 8px 保住横向可用宽度，flex 规则保持 1 1 0 */
#overlayGameOver .btn-primary {
  flex: 1 1 0;
  min-width: 0;
  margin: 6px 0;
  padding: 9px 6px;
  font-size: 12px;
  border-image-width: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
}
#overlayGameOver .btn-secondary { flex: 1 1 100%; margin: 6px 0; }

/* ═════════════════════════════════════════════════════════════════
 * 3. 成绩卡 / 主界面按钮
 * ═════════════════════════════════════════════════════════════════ */
#menuRankCard {
  /* ui/panel_rank 240×240，slice [52,52,52,52] */
  background: none;
  border: 8px solid transparent;
  border-image-source: url("../assets/skin/ui/panel_rank.png");
  border-image-slice: 52 fill;
  border-image-width: 14px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-shadow: 0 6px 18px rgba(57, 33, 59, 0.18);
  padding: 12px 14px;
}
#menuRankCard .mrc-top { color: var(--ss-danger, #A91D55); }
#menuRankCard .mrc-sep,
#menuRankCard .mrc-vline { background: rgba(57, 33, 59, 0.16); }
#menuRankCard .mrc-rank-label { color: var(--ss-text-2, #5E526F); }
#menuRankCard .mrc-rank-value { color: var(--ss-danger, #A91D55); }
#menuRankCard .mrc-rank-value.mrc-city { color: #3F7FA8; }   /* 湖蓝，对奶油底对比 4.6:1 */
#menuRankCard .mrc-week { color: var(--ss-text-2, #5E526F); }
#menuRankCard .mrc-info {
  border: 2px solid var(--ss-ink, #39213B);
  background: var(--ss-pearl, #FFF3DD);
  color: var(--ss-ink, #39213B);
}

/* 底栏 4 图标：ui/icon_plate_normal 96×96，slice [25,25,25,25] */
.menu-small-btn {
  background: none;
  border: 6px solid transparent;
  border-image-source: url("../assets/skin/ui/icon_plate_normal.png");
  border-image-slice: 25 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  border-radius: 0;
  min-width: 56px;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.18);
  color: transparent;
  font-size: 0;
}
.menu-small-btn:hover {
  border-image-source: url("../assets/skin/ui/icon_plate_selected.png");
  transform: translateY(-1px);
}
.menu-small-btn:active {
  border-image-source: url("../assets/skin/ui/icon_plate_pressed.png");
  transform: scale(0.96);
}
/* #btnMenuGallery 旧的 ::before 图标层改为无（图标已由 <img> 提供） */
#btnMenuGallery::before { display: none; }

/* 主菜单饰带：ui/divider.png（金色细线 + 绯晶菱形），替代包豪斯圆/方/三角 */
#mainMenuDecor { height: 12px; }
.menu-decor-divider {
  display: block;
  width: 100%;
  max-width: 220px;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
  margin: 0 auto;
}

/* 主界面「无限模式 / 收集模式」通栏按钮：内联 style 覆盖了部分属性，这里补 border-image */
#btnMenuEndless { border-image-source: url("../assets/skin/ui/button_primary_normal.png"); }
#btnMenuEndless:active { border-image-source: url("../assets/skin/ui/button_primary_pressed.png"); }
#btnMenuCollect { border-image-source: url("../assets/skin/ui/button_mint_normal.png"); }
#btnMenuCollect:active { border-image-source: url("../assets/skin/ui/button_mint_pressed.png"); }

/* ═════════════════════════════════════════════════════════════════
 * 4. 商店
 * ═════════════════════════════════════════════════════════════════ */
.shop-item {
  /* ui/card 240×240，slice [27,27,27,27] */
  background: none;
  border: 6px solid transparent;
  border-image-source: url("../assets/skin/ui/card.png");
  border-image-slice: 27 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 10px 12px;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.10);
}
.shop-item-name { color: var(--ss-ink, #39213B); }
.shop-item-desc { color: var(--ss-text-2, #5E526F); }
.shop-item-price { color: var(--ss-danger, #A91D55); }

.shop-buy-btn {
  /* 小尺寸主按钮：slice 缩放为 5px 7px（保持 256×78 视觉比例） */
  background: none;
  border: 4px solid transparent;
  border-image-source: url("../assets/skin/ui/button_primary_normal.png");
  border-image-slice: 31 38 32 38 fill;
  border-image-width: 5px 7px;
  border-image-repeat: stretch;
  border-radius: 0;
  color: var(--ss-ink, #39213B);
  font-weight: 700;
  padding: 7px 12px;
  box-shadow: 0 2px 6px rgba(57, 33, 59, 0.18);
}
.shop-buy-btn:hover:not(:disabled) { filter: brightness(1.05); }
.shop-buy-btn:active:not(:disabled) {
  border-image-source: url("../assets/skin/ui/button_primary_pressed.png");
  transform: translate(1px, 1px);
}
.shop-buy-btn:disabled {
  border-image-source: url("../assets/skin/ui/button_primary_disabled.png");
  color: #8B7C93;
  cursor: not-allowed;
  box-shadow: none;
}

/* 金币 pill：ui/inventory_pill 180×62，slice [31,25,31,25] → 25 31 25 31 fill */
#shopCoins,
.ss-coin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 5px solid transparent;
  border-image-source: url("../assets/skin/ui/inventory_pill.png");
  border-image-slice: 25 31 25 31 fill;
  border-image-width: 7px 9px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-ink, #39213B);
  margin: 6px 0 4px;
}

/* ═════════════════════════════════════════════════════════════════
 * 5. 角色卡（立绘 + 头像环 + 道具图，零 emoji）
 * ═════════════════════════════════════════════════════════════════ */
.char-card {
  background: none;
  border: 6px solid transparent;
  border-image-source: url("../assets/skin/ui/card.png");
  border-image-slice: 27 fill;
  border-image-width: 10px;
  border-image-repeat: stretch;
  border-radius: 0;
  padding: 10px 8px 12px;
  box-shadow: 0 6px 16px rgba(57, 33, 59, 0.14);
  gap: 5px;
  /* ★ min-width:0 让 3 张卡在 320~390px 都能等分收缩，不被内容宽撑出容器 */
  min-width: 0;
}
.char-card:hover {
  border-image-source: url("../assets/skin/ui/card_selected.png");
  border-color: transparent;
  transform: translateY(-2px) scale(1.02);
}
.char-portrait-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.char-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 6px rgba(57, 33, 59, 0.20));
}
.char-ring {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 34%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.char-name { color: var(--ss-ink, #39213B); font-size: 15px; font-weight: 700; }
.char-title { color: var(--ss-danger, #A91D55); font-size: 11px; font-weight: 700; }
.char-skill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px;
  color: var(--ss-text, #3E254C);
  font-weight: 700;
}
.char-item-icon { width: 18px; height: 18px; object-fit: contain; }
.char-skill-name { white-space: nowrap; }
.char-desc { color: var(--ss-text-2, #5E526F); font-size: 10px; line-height: 1.45; }

/* 选角卡的「选 择」按钮：必须 nowrap + 收窄 padding，
   否则 min-content = 1 个字 + 40px padding ≈ 56px，三张卡合计超宽把第 3 张挤出面板 */
.char-pick-btn {
  width: 100%;
  min-width: 0;
  /* ★ T11 修复：三张卡文案长短不同 → 按钮原本跟着文档流落在不同高度。
     卡片已是 flex 列（index.html 基础样式 .char-card{display:flex;flex-direction:column}，
     此处不再重复声明，避免与基础样式双写），
     靠 margin-top:auto 把按钮顶到卡片底部；父级 #charSelectGrid 默认 align-items:stretch，
     三卡等高，因此三个按钮底边严格对齐。 */
  margin-top: auto;
  padding: 7px 4px;
  font-size: 12px;
  white-space: nowrap;
  border-image-width: 6px 8px;
}

/* ═════════════════════════════════════════════════════════════════
 * 6. 画廊（只换 4 样：卡底 / 边框 / 剪影色 / 锁图标）
 * ═════════════════════════════════════════════════════════════════ */
.gallery-frame {
  background: none;
  border: 6px solid transparent;
  border-image-source: url("../assets/skin/ui/card.png");
  border-image-slice: 27 fill;
  border-image-width: 9px;
  border-image-repeat: stretch;
  border-radius: 0;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.10);
}
.gallery-frame.collected {
  border-image-source: url("../assets/skin/ui/card_selected.png");
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(57, 33, 59, 0.20);
}
.gallery-frame-title { color: var(--ss-text-2, #5E526F); }
.gallery-frame.collected .gallery-frame-title { color: var(--ss-danger, #A91D55); }
.gallery-frame-preview {
  /* ui/well 240×240，slice [27,27,27,27] */
  position: relative;
  background: none;
  border: 5px solid transparent;
  border-image-source: url("../assets/skin/ui/well.png");
  border-image-slice: 27 fill;
  border-image-width: 8px;
  border-image-repeat: stretch;
  border-radius: 0;
}
.gallery-lock {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
 * 7. 表单 / 开关 / 分隔线
 * ═════════════════════════════════════════════════════════════════ */
.account-input,
input.account-input {
  /* ui/field 240×240，slice [27,27,27,27] */
  background: none;
  border: 5px solid transparent;
  border-image-source: url("../assets/skin/ui/field.png");
  border-image-slice: 27 fill;
  border-image-width: 8px;
  border-image-repeat: stretch;
  border-radius: 0;
  color: var(--ss-ink, #39213B);
  padding: 10px 12px;
}
.account-input:focus {
  border-image-source: url("../assets/skin/ui/field.png");
  box-shadow: 0 0 0 2px rgba(255, 131, 173, 0.45);
  outline: none;
}
.account-input::placeholder { color: #8B7C93; }

/* 震动开关：ui/toggle_on / toggle_off 144×72 */
.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
  flex: 0 0 auto;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: url("../assets/skin/ui/toggle_off.png") center / contain no-repeat;
  border-radius: 14px;
  transition: background-image 0.15s;
  cursor: pointer;
}
.switch input:checked + .switch-slider {
  background-image: url("../assets/skin/ui/toggle_on.png");
}
.switch-slider::before { display: none; }

/* 分隔线：ui/divider 194×30（作为装饰细线，居中拉伸） */
.divider {
  border: none;
  height: 8px;
  margin: 12px 0;
  background: url("../assets/skin/ui/divider.png") center / 100% 100% no-repeat;
  opacity: 0.9;
}
.settings-divider {
  height: 8px;
  margin: 12px 0;
  background: url("../assets/skin/ui/divider.png") center / 100% 100% no-repeat;
  opacity: 0.9;
}

/* ═════════════════════════════════════════════════════════════════
 * 8. 游戏内 HUD / 工具栏 / 悬浮按钮
 * ═════════════════════════════════════════════════════════════════ */
#heroAvatar {
  border: none;
  border-radius: 50%;
  background: url("../assets/skin/ui/avatar_ring_selected.png") center / 100% 100% no-repeat;
  padding: 3px;
  box-shadow: 0 3px 8px rgba(57, 33, 59, 0.22);
}
#heroAvatar emoji, #heroAvatar span { display: none; }
#heroAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.tool-btn {
  background: var(--ss-surface, #FFFBF0);
  border: 1px solid rgba(57, 33, 59, 0.14);
  border-radius: 10px;
  color: var(--ss-ink, #39213B);
  box-shadow: 0 2px 8px rgba(57, 33, 59, 0.14);
}
.tool-btn:hover { background: var(--ss-pearl, #FFF3DD); }
.tool-btn.tool-active,
.tool-btn.tool-highlight {
  background: var(--ss-pearl, #FFF3DD);
  border-color: var(--ss-coral, #FF83AD);
}

#btnCart {
  background: var(--ss-pearl, #FFF3DD);
  border: 2px solid rgba(57, 33, 59, 0.18);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.20);
  font-size: 0;
  /* ★ 不要在此处写 display —— #btnCart 的显隐契约是 .visible 类（内联 display:none / .visible→flex） */
}
#btnCart img { width: 62%; height: 62%; object-fit: contain; }


#btnSettings {
  background: var(--ss-pearl, #FFF3DD);
  border: 2px solid rgba(57, 33, 59, 0.18);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.20);
}
#btnSettings:hover { background: var(--ss-gold, #FFD04D); }

#btnEndlessExit {
  background: var(--ss-pearl, #FFF3DD);
  border: 2px solid rgba(57, 33, 59, 0.18);
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(57, 33, 59, 0.20);
}
#btnEndlessExit:hover { background: var(--ss-gold, #FFD04D); }

/* 过关全屏页：奶油纸面（★ T12 返工 D2：原 0.94 半透明会让底层棋盘文字
   「GOAL: 1000 / 总分 / 像素网格」透上来，与「第 N 关 / 本关得分」叠成重影；
   基线 bauhaus 同位置为全不透明 rgb(245,241,232)，这里对齐为不透明 #FFF3E9） */
.level-clear-fullscreen {
  background: #FFF3E9;
}

/* 游戏内浮动提示：墨色胶囊 + 珠光字 */
#gameFeedback {
  background: rgba(57, 33, 59, 0.92) !important;
  color: var(--ss-pearl, #FFF3DD) !important;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(57, 33, 59, 0.30);
  font-weight: 700;
}

/* 画廊大图详情浮层 */
#galleryDetail { background: rgba(57, 33, 59, 0.88) !important; }

/* 账号 / 设置面板内部块 */
#accountLoggedIn > div,
.settings-account-info,
.settings-gameid-display {
  background: var(--ss-surface, #FFFBF0);
  border: 1px solid rgba(57, 33, 59, 0.14);
  border-radius: 10px;
}
.settings-row-label { color: var(--ss-ink, #39213B); }
.settings-row-label .small { color: var(--ss-text-2, #5E526F); }

/* 像素画收集动画卡片 */
.collect-anim-card {
  border: 6px solid transparent;
  border-image-source: url("../assets/skin/ui/panel_modal.png");
  border-image-slice: 52 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
}

/* 广告倒计时数字用 danger 色（对奶油底可读） */
#adCountdown { color: var(--ss-danger, #A91D55); }