/* dex.css - 图鉴页（dex.html）
 * 批次六十八：与首页/分享卡统一视觉语言 ——
 * 天空渐变底 + 云朵、墨边 + 彩色硬影贴纸风、B3 浅彩按钮、底部五色窄彩条
 * （仅视觉层：类名/结构未动，js/dex.js 的 id 绑定与 hidden/active 切换不受影响）
 */

:root {
  --ink: #1d1d1d;
  --paper: #FFF9EF;
  --miku: #39C5BB;
  --teto: #F0605A;
  --tianyi: #66CCFF;
  --star: #FFD93D;
  --purple: #B98CF0;
  --pink: #FF8FB5;
  --orange: #FF9F45;
  --locked-bg: #EFEDE7;
  --locked-ink: #8f8b82;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 首页同款天空渐变 + 两朵白云（与首页 .cloud 同几何：长条胶囊底 + 两个圆包，背景图层绘制） */
  background:
    /* 云一（左上）：胶囊 84×26 @ (16,92)，圆包 34 @(30,76) + 24 @(60,82) */
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 30px 76px / 34px 34px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 60px 82px / 24px 24px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 16px 92px / 26px 26px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 74px 92px / 26px 26px no-repeat,
    linear-gradient(#fff, #fff) 29px 92px / 58px 26px no-repeat,
    /* 云二（右侧小号）：胶囊 64×20 @ (392,168)，圆包 26 @(403,156) + 18 @(426,161) */
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 403px 156px / 26px 26px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 426px 161px / 18px 18px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 392px 168px / 20px 20px no-repeat,
    radial-gradient(circle farthest-side, #fff 99%, transparent 100%) 436px 168px / 20px 20px no-repeat,
    linear-gradient(#fff, #fff) 402px 168px / 44px 20px no-repeat,
    linear-gradient(180deg, #6FC3F0 0%, #A8DCF7 55%, #E8F7FF 100%);
  color: var(--ink);
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

/* 底部五色窄彩条（首页 .stripe 同款配色，fixed 贴视口底） */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 12px;
  background: linear-gradient(90deg,
    #FF9EBB 0 20%, #FFD93D 20% 40%, #8FD8CB 40% 60%,
    #A8C8F0 60% 80%, #C9A8E8 80% 100%);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* ===== 顶栏：返回 + 标题 + 已收集计数 ===== */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
}

/* 返回：首页 FAB 同款 —— 白底圆钮 + 墨边 + 葱色彩影 */
.back {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--miku);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.back:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--miku);
}

/* 标题：分享卡同款黑胶囊 —— 墨底黄字 + 葱色错位影，微微歪头 */
.topbar h1 {
  padding: 7px 20px 6px;
  background: var(--ink);
  color: var(--star);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--miku);
  transform: rotate(-1.2deg);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 6px;
}

/* 已收集计数：葱色胶囊 + 星星黄彩影 */
.progress {
  margin-left: auto;
  padding: 6px 14px;
  background: var(--miku);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--star);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

/* 布置主页入口：B3 浅彩变体（葱系，与首页「前往主页」同族） */
.arrange-entry-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 14px 0;
}

.arrange-entry {
  min-height: 44px;
  padding: 8px 18px;
  background: #D9F4F2;
  color: #1FA79C;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--miku);
  transform: rotate(1deg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.arrange-entry:active {
  transform: rotate(1deg) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--miku);
}

/* ===== 分页 Tab：默认白底 FAB 风（各自彩色影子），选中 = B3 浅彩填充 ===== */
.tabs {
  display: flex;
  gap: 10px;
  padding: 10px 14px 4px;
}

.tab {
  --tc: var(--miku);
  flex: 1;
  min-height: 44px;
  padding: 9px 0;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--tc);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2px;
  font-family: inherit;
  cursor: pointer;
}

#tabBtnChar { --tc: var(--purple); }

.tab:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--tc);
}

#tabBtnItem.active {
  background: #D9F4F2;
  color: #1FA79C;
  transform: rotate(-1deg);
}

#tabBtnChar.active {
  background: #EDE4FF;
  color: #7B5CB8;
  transform: rotate(1deg);
}

#tabBtnItem.active:active { transform: rotate(-1deg) translate(2px, 2px); }
#tabBtnChar.active:active { transform: rotate(1deg) translate(2px, 2px); }

/* ===== 状态图例 ===== */
.legend {
  display: flex;
  gap: 6px;
  padding: 8px 14px 2px;
  flex-wrap: wrap;
}

.lg {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.lg-ok   { background: #D9F4F2; border: 2px solid var(--ink); color: #1FA79C; }
.lg-lock { background: var(--locked-bg); border: 2px solid #B9B5AA; color: var(--locked-ink); }
.lg-soon { background: #fff; border: 2px dashed #B9B5AA; color: var(--locked-ink); }

/* ===== 网格：一排 3 列，贴纸卡 ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 10px;
  padding: 10px 12px 20px;
}

.cell {
  /* --sh 彩色硬影 / --rot 微斜角，由下方 nth-child 轮换；locked/soon 归灰 */
  --sh: var(--miku);
  --rot: 0deg;
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--sh);
  transform: rotate(var(--rot));
  padding: 14px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* 已解锁卡：糖果色硬影六色轮换 + 交替微斜（贴纸墙感） */
.grid .cell:nth-child(6n+1) { --sh: var(--miku);   --rot: -1deg; }
.grid .cell:nth-child(6n+2) { --sh: var(--teto);   --rot: 0.8deg; }
.grid .cell:nth-child(6n+3) { --sh: var(--orange); --rot: -0.7deg; }
.grid .cell:nth-child(6n+4) { --sh: var(--tianyi); --rot: 1deg; }
.grid .cell:nth-child(6n+5) { --sh: var(--pink);   --rot: -0.9deg; }
.grid .cell:nth-child(6n+6) { --sh: var(--purple); --rot: 0.7deg; }

/* 未解锁 / 敬请期待：状态语义优先，归灰、不斜（须排在 nth-child 之后） */
.grid .cell.locked,
.grid .cell.soon { --sh: #C9C5BA; --rot: 0deg; }

.grid .cell:active {
  transform: rotate(var(--rot)) translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--sh);
}

.ic {
  width: 100%;
  max-width: 106px;
  aspect-ratio: 1;
  background: var(--tbg, #EAF7F5);
  border: 2px solid var(--ink);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ic img {
  max-width: 90%;
  max-height: 90%;
  display: block;
}

.nm {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 1.25;
}

.au {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 800;
  color: #7c7668;
}

/* 已解锁 ·「展示中」角标：贴纸歪贴 */
.onhome {
  position: absolute;
  top: -8px;
  left: -6px;
  z-index: 2;
  padding: 2px 8px;
  background: var(--miku);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--star);
  transform: rotate(-4deg);
  font-size: 9px;
  font-weight: 900;
}

/* ===== 未解锁：灰剪影 + 🔒 ===== */
.cell.locked {
  background: var(--locked-bg);
  border-color: #B9B5AA;
}

.cell.locked .ic {
  background: #E4E1D9;
  border-color: #B9B5AA;
}

.cell.locked .ic img {
  filter: brightness(0);
  opacity: 0.25;
}

.cell.locked .nm { color: #6f6b61; }
.cell.locked .au { color: #a09b8f; }

.lock-badge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 26px;
  height: 26px;
  background: #fff;
  border: 2px solid #B9B5AA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ===== 敬请期待：虚线灰卡，无锁 ===== */
.cell.soon {
  background: #F6F5F1;
  border-style: dashed;
  border-color: #B9B5AA;
  box-shadow: none;
}

.cell.soon .ic {
  background: #ECEAE3;
  border-style: dashed;
  border-color: #B9B5AA;
}

/* 有正式图的敬请期待条目（妙脆角猫）：灰显示意 */
.cell.soon .ic img {
  filter: grayscale(1);
  opacity: 0.22;
}

.cell.soon .nm { color: #8f8b82; }

.qmark {
  font-size: 34px;
  font-weight: 900;
  color: #C9C5BA;
}

.soon-txt {
  margin-top: 1px;
  font-size: 9px;
  font-weight: 900;
  color: #a09b8f;
}

/* 页底：解锁条件速查（星星黄软卡） */
.footnote {
  margin: 0 12px 26px;   /* 底部留出 fixed 彩条位置 */
  padding: 8px 12px;
  background: #FFF6D6;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--star);
  font-size: 10px;
  font-weight: 800;
  color: #9c8a4a;
  line-height: 1.7;
}

.hidden { display: none; }

/* ==================== 详情弹层 ====================
 * 批次六十九重做：不再用整条色带大头，改用首页面板语言
 * （cm-panel / home-settings-panel 同款）——
 * 奶油底大卡 + 墨边浅蓝影、虚线分隔头、软红圆关闭钮、
 * 内嵌相框大图、小墨影贴纸信息格；主 CTA 保留明黄 hero 风 */
.dex-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(29, 29, 29, 0.45);
}

.dex-overlay[hidden] { display: none; }

.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 41;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 40px));
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  background: #FFF9EC;               /* 首页设置面板同款奶油底 */
  border: 4px solid var(--ink);
  border-radius: 22px;
  box-shadow: 6px 6px 0 #A8C8F0;     /* 首页面板同款浅蓝影（批次五十一语言） */
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sheet[hidden] { display: none; }

/* 头部：白底标题 + 虚线分隔（首页 cm-head 同款），不再整条黄色 */
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 3px dashed rgba(29, 29, 29, 0.18);
  flex: none;
}

.sheet-head .ttl {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
}

/* 关闭钮：首页 cm-close 同款 —— 软红圆钮 + 墨边小墨影，hover 变红 */
.sheet-close {
  width: 44px;
  height: 44px;
  margin: -4px -6px -4px 0;   /* 视觉居中，触控目标保持 44×44 */
  background: #FFE3E1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.sheet-close:hover,
.sheet-close:focus-visible {
  background: var(--teto);
  color: #fff;
  outline: none;
}

.sheet-close:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ===== 批次七十 · V4「左图右文紧凑风」（方案稿 design-mockups/sheet-mock/v4.html） ===== */
/* 左图右文头部：方图 + 名字/绘师/状态芯片，省掉通栏大图区 */
.hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 18px 0;
  flex: none;
}

.thumb {
  flex: none;
  width: 118px;
  height: 118px;
  background: var(--tbg, #DFF5F2);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--miku);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.thumb img {
  max-width: 84%;
  max-height: 84%;
  display: block;
}

.thumb .qmark-big {
  font-size: 44px;
  font-weight: 900;
  color: #C9C5BA;
}

.hero-r { min-width: 0; }

.hero-r h2 {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.2;
}

/* 绘师：纯文字（不再胶囊） */
.author-band {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: #7B5CB8;
}

/* 状态/动态芯片：静态小胶囊排一行 */
.chips {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.state-chip,
.move-chip {
  padding: 3px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.state-chip {
  background: var(--miku);
  color: #fff;
}

.move-chip {
  background: #fff;
}

/* 信息分区：四格合并成一整框，内部虚线分格 */
.info {
  margin: 16px 18px 0;
  padding: 0;
  background: #FFFDF6;               /* 首页名单条目同款近白底 */
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  flex: none;
}

.info .cell {
  /* 批次七十四：必须全量重置基础 .cell 的框/影/斜（否则格中套格，框重叠） */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  min-width: 0;
  padding: 9px 12px;
  cursor: default;
  flex-direction: column;
  align-items: flex-start;
}

.info .cell:nth-child(odd)  { border-right: 2px dashed rgba(29, 29, 29, 0.15); }
.info .cell:nth-child(-n+2) { border-bottom: 2px dashed rgba(29, 29, 29, 0.15); }

.info .k {
  font-size: 10px;
  font-weight: 900;
  color: #9a9382;
  letter-spacing: 2px;
}

.info .v {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
}

.info .v small {
  font-size: 10px;
  color: #7c7668;
  font-weight: 800;
}

/* 解锁状态行：纯文字（不再描边框） */
.unlock-row {
  margin: 12px 22px 0;
  font-size: 12px;
  font-weight: 900;
  color: #1FA79C;
  flex: none;
}

/* 主按钮：首页「点击开启」同款 —— 明黄 + 粗墨边 + 墨影（hero CTA 保留墨影） */
.cta {
  margin: 14px 18px 18px;
  min-height: 52px;
  padding: 12px 0;
  background: var(--star);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 4px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  flex: none;
}

.cta:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* 未解锁态（sheet.locked 时切换） */
.sheet.locked .thumb { background: #E4E1D9; box-shadow: 3px 3px 0 #C9C5BA; }
.sheet.locked .thumb img { filter: brightness(0); opacity: 0.25; }
.sheet.locked .state-chip { background: #B9B5AA; }
.sheet.locked .unlock-row { color: var(--locked-ink); }

.sheet.locked .cta {
  background: var(--locked-bg);
  color: var(--locked-ink);
  border-color: #B9B5AA;
  box-shadow: 4px 4px 0 #C9C5BA;
  letter-spacing: 0;
  font-size: 13px;
  cursor: default;
}

.sheet.locked .cta:active {
  transform: none;
  box-shadow: 4px 4px 0 #C9C5BA;
}

.lock-big {
  display: none;
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 2px solid #B9B5AA;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.sheet.locked .lock-big { display: flex; }

/* 敬请期待态 */
.sheet.soon .state-chip { background: #B9B5AA; }
.sheet.soon .unlock-row { color: var(--locked-ink); }

/* 矮屏：方图压缩，保证按钮可见；彩条同步收窄 */
@media (max-height: 640px) {
  .hero { margin-top: 10px; }
  .thumb { width: 92px; height: 92px; }
  .thumb .qmark-big { font-size: 34px; }
  .hero-r h2 { font-size: 24px; }
  .info { margin-top: 12px; }
  .cta { margin-top: 10px; }
  body::after { height: 10px; }
}

/* 批次七十四：横屏矮屏改双栏 —— 左列图+名字，右列信息格+解锁行，整页可见免滚动
   批次七十五：用户选定 W1 —— CTA 收进右列置底；左列顶部对齐
   批次七十六：（已回退）左列按钮 + 逐行横排实验
   批次七十七：横屏定稿 W1（用户对照方案稿 b75-sheet-land-w1.png 拍板）
   批次七十八：严格对齐方案稿 —— 左列跨三行（信息/解锁/按钮）垂直居中，
   芯片行与右列按钮齐平；按钮底边距 12px 不贴边 */
@media (max-height: 640px) and (orientation: landscape) {
  .sheet {
    width: min(560px, calc(100vw - 40px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-content: start;
  }
  .sheet-head { grid-column: 1 / -1; }
  .hero {
    grid-row: 2 / 5;      /* 跨 信息/解锁/按钮 三行 */
    align-self: center;   /* 垂直居中 → 芯片行自然落到按钮高度 */
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 8px 0 8px 16px;
    text-align: center;
  }
  .hero .chips { justify-content: center; }
  .thumb { width: 76px; height: 76px; }
  .hero-r h2 { font-size: 22px; }
  .info { margin: 8px 16px 0 0; }
  .unlock-row { margin: 8px 16px 0 0; text-align: center; }
  .cta { grid-column: 2; margin: 10px 16px 12px 0; min-height: 46px; padding: 8px 0; }
}