/* bows.css —— v2.0 批次D：蝴蝶结图鉴页（孩子用）
 *
 * 🔴 儿童可用性硬指标（设计卡铁律⑤）：正文 ≥20px / 按钮 ≥24px /
 *    触摸区 ≥72px / 动效 ≥300ms。
 * 🔴 未得灰显口径（铁律④.5）：filter: grayscale(1) opacity(.35)。
 * 🔴 关闭按钮图标必须带 svg 尺寸（铁律③，防 .gate-close 同款 0×0 事故）。
 * 层级：图鉴页 40 —— 在内容(1)/齿轮(30)之上、通用浮层(50)/特效(70)/toast(99)之下，
 *       抽款庆祝走 #modal-overlay(50) 自然盖在图鉴页上。
 */

#view-bows {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 批次F ②：与主界面同款像素草地（顶部一层白光晕，柜格更醒目） */
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255, 255, 255, .45), transparent 60%),
    #7BAF4E url(../assets/pixel/bg_grass.png) repeat;
  background-size: auto, 256px 256px;
  image-rendering: pixelated;
  padding: calc(14px + var(--sat)) 16px calc(28px + var(--sab));
  animation: bowsPageIn 320ms ease-out; /* ≥300ms（铁律⑤） */
}

@keyframes bowsPageIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 头部：标题绝对居中 / ✕关闭靠右（批次F ⑦：删 ← 返回，仅留右上 ✕，铁律②） ---- */
.bows-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0 12px;
  background: linear-gradient(180deg, rgba(240, 246, 224, .92) 70%, transparent); /* 批次F ② */
}

/* 标题：绝对居中（唯一按钮在右，flex:1 会让标题偏左）；pointer-events:none 不挡 ✕ */
.bows-title {
  position: absolute;
  left: 0;
  right: 0;
  min-width: 0;
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-ink); /* 批次F ②：浅草地底改金棕 */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.bows-header .b-icon { display: inline-flex; }
.bows-header .b-icon svg { width: 30px; height: 30px; }

/* 关闭：72px 触摸区圆形（铁律⑤）；浅底玻璃（批次F ②） */
#bows-close {
  width: 72px;
  height: 72px;
  min-height: 72px;
  padding: 0;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .58);
  border: 2px solid var(--card-line);
  color: var(--ink);
  box-shadow: none;
  display: grid;
  place-items: center;
}

#bows-close:active { transform: scale(.94); }

/* 🔴 铁律③：图标 svg 必须显式给尺寸（hydrateIcons 产出的 svg 无宽高属性行） */
#bows-close svg { width: 28px; height: 28px; }

/* ---- 展示猫舞台 + 尾巴蝴蝶结（锚点 0–1 归一化，铁律④.5） ---- */
/* 🔴 舞台盒 = 猫图盒（同宽、猫图 100% 撑满）：锚点百分比相对猫图，
   舞台比猫宽会把 left:% 解析到错误的包含块 → 蝴蝶结整体偏移（QA 实测踩坑） */
.bows-stage {
  position: relative;
  width: min(268px, 70vw);
  margin: 6px auto 2px;
}

.bows-cat {
  display: block;
  width: 100%;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5));
  user-select: none;
  -webkit-user-drag: none;
}

/* 尾巴蝴蝶结：位置/大小全部由 bows.js 写 CSS 变量（--bow-x/--bow-y/--bow-w），
   值来自后端 cat_anchor 种子行（0–1 归一化），此处零像素硬编码 */
.bows-cat-bow {
  position: absolute;
  left: var(--bow-x, 10%);
  top: var(--bow-y, 40%);
  width: var(--bow-w, 28%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
  transition: opacity 300ms ease, left 300ms ease, top 300ms ease;
  pointer-events: none;
}

.bows-cat-bow.pop { animation: bowsPop 320ms cubic-bezier(.3, 1.6, .5, 1); }

@keyframes bowsPop {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-30deg); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

/* ---- 已收集计数（owned/total 全部来自接口，禁硬编码——铁律③/P1-3） ---- */
.bows-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin: 10px 0 4px;
}

.bows-count b {
  font-size: 32px;
  color: var(--accent-ink); /* 批次F ② */
  font-variant-numeric: tabular-nums;
}

.bows-hint {
  text-align: center;
  font-size: 20px; /* 铁律⑤：正文下限 */
  color: var(--ink-dim);
  margin-bottom: 14px;
}

/* ---- 蝴蝶结柜 ---- */
.bows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

.bow-cell {
  position: relative;
  min-height: 148px; /* 触摸区 ≥72px（铁律⑤，实际远超） */
  padding: 12px 8px 10px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .6); /* 批次F ②：浅底柜格 */
  border: 2px solid var(--card-line);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 20px;
  color: var(--ink);
  transition: transform .2s, border-color .3s;
}

.bow-cell:active { transform: scale(.95); }

.bow-cell img {
  width: 84px;
  max-height: 84px;
  object-fit: contain;
  transition: filter 300ms ease;
}

/* 🔴 铁律④.5：已得亮 / 未得灰（口径逐字对齐设计卡） */
.bow-cell:not(.owned) img { filter: grayscale(1) opacity(.35); }
.bow-cell:not(.owned) .bow-name { color: var(--ink-dim); }

.bow-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* 未解锁小牌（点按另有 toast 提示；批次F ② 浅底小牌） */
.bow-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, .55);
  border-radius: 12px;
  padding: 2px 10px;
}

/* 当前佩戴标记 */
.bow-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 20px;
  font-weight: 900;
  color: #3a2800;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-deep));
  border-radius: 14px;
  padding: 3px 12px;
  box-shadow: var(--glow);
}

/* 稀有/隐藏彩边（common 无） */
.bow-cell[data-rarity="rare"] { border-color: rgba(122, 92, 255, .55); }
.bow-cell[data-rarity="hidden"] { border-color: rgba(255, 154, 200, .6); }

/* ---- 加载 / 出错态 ---- */
.bows-state {
  max-width: 560px;
  margin: 40px auto;
  text-align: center;
  font-size: 22px;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.bows-state .btn { min-width: 220px; }

/* ---- 抽款庆祝弹窗（render 进 #modal-box，复用 .overlay(50)） ---- */
.bows-draw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 6px 4px;
}

.bows-draw-title {
  font-size: 30px;
  font-weight: 900;
  color: var(--accent-ink); /* 批次F ②：弹窗已浅底化 */
}

.bows-draw-img {
  width: 190px;
  animation: bowsPop 320ms cubic-bezier(.3, 1.6, .5, 1); /* ≥300ms（铁律⑤） */
  filter: drop-shadow(0 6px 18px rgba(255, 201, 77, .35));
}

.bows-draw-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
}

.bows-draw-sub { font-size: 20px; color: var(--ink-dim); }

.bows-draw .btn { min-width: 240px; }

/* ---- 主界面入口按钮「看蝴蝶结」（固定在 #btn-gear 正上方，铁律④：独立按钮） ---- */
#btn-bows {
  position: fixed;
  right: 16px;
  bottom: 96px; /* 齿轮 16+64+16，正好叠在其上方不重叠 */
  min-height: 72px; /* 铁律⑤：触摸区下限 */
  padding: 0 20px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px; /* 铁律⑤：按钮字号下限 */
  font-weight: 800;
  color: #4d2504;
  background: linear-gradient(180deg, #FFB0D8, #FF7FBE);
  border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: 0 5px 18px rgba(255, 127, 190, .38);
  z-index: 30;
  transition: transform .2s, box-shadow .3s;
}

#btn-bows:active { transform: scale(.94); }

#btn-bows svg { width: 30px; height: 30px; }

/* ---- 窄屏：柜格降为 2 列起排，入口按钮不与齿轮打架（fixed 右列天然兼容） ---- */
@media (max-width: 480px) {
  .bows-grid { grid-template-columns: repeat(2, 1fr); }
  .bow-cell { min-height: 132px; }
  .bow-cell img { width: 72px; max-height: 72px; }
}

/* ---- 减动效降级（铁律⑥）：本页全部动画/过渡停止，布局位不变 ---- */
@media (prefers-reduced-motion: reduce) {
  #view-bows,
  .bows-cat-bow,
  .bows-cat-bow.pop,
  .bows-draw-img,
  .bow-cell,
  .bow-cell img,
  #btn-bows,
  #bows-close {
    animation: none !important;
    transition: none !important;
  }
}