/* =========================================================
   app-visual.css —— 应用卡的「CSS 插图封面」
   复用上一版 .visual--bm / --mc / --vb / --auth 组件，
   不用截图，避免界面文字过密、也避免被平台判为截图堆砌。
   ========================================================= */

/* ---------- 1. 让 .visual 铺满应用卡封面 ---------- */
.app-card__cover .visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.app-card__cover .app-card__badge,
.app-card__cover .app-card__go {
  z-index: 6;
}

/* 旧悬停规则写的是 .work-card:hover，这里补上 .app-card:hover */
.app-card:hover .bm-bg {
  transform: scale(1.09);
  filter: brightness(0.5) saturate(1);
}
.app-card:hover .mc-window {
  transform: translateY(-6px);
  border-color: rgba(99, 210, 154, 0.28);
}
.app-card--static:hover .bm-bg,
.app-card--static:hover .mc-window {
  transform: none;
}

/* ---------- 2. hero 右侧：同一套方块矿工插图 ---------- */
.hero-visual {
  position: relative;
  aspect-ratio: 16 / 10.5;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--ink, #2b2119);
  box-shadow:
    0 34px 70px -34px rgba(0, 0, 0, 0.6),
    10px 10px 0 rgba(43, 33, 25, 0.14);
  background: #0c0b09;
}
html[data-theme="night"] .hero-visual {
  box-shadow:
    0 34px 70px -30px #000,
    10px 10px 0 rgba(0, 0, 0, 0.45);
}

/* ---------- 3. mcTool 三个变体的私有配色 ---------- */
.visual--mc {
  --mcv-bar: #e7f8ec;
  --mcv-line: rgba(43, 33, 25, 0.16);
  --mcv-ink: #2b4234;
  --mcv-dim: #6b8a74;
  --mcv-accent: #146c3a;
  --mcv-accent-soft: #cdf3d9;
  --mcv-panel: #f2fbf4;
}
html[data-theme="night"] .visual--mc {
  --mcv-bar: rgba(255, 255, 255, 0.04);
  --mcv-line: rgba(255, 246, 230, 0.14);
  --mcv-ink: #d8efe1;
  --mcv-dim: #8fb3a0;
  --mcv-accent: #8ee7b4;
  --mcv-accent-soft: rgba(99, 210, 154, 0.16);
  --mcv-panel: rgba(255, 255, 255, 0.05);
}

/* 16:9 的封面比原来的 16:10.5 矮，窗口给足高度 */
.app-card__cover .mc-window {
  inset: 7% 5% 6%;
}

/* 单栏版：grid -> flex，子项可控、底部说明自动靠底 */
.mc-window__body--single {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  overflow: hidden;
  justify-content: center;
}
.mc-window__body--single > * {
  flex: 0 0 auto;
}
/* 内容整体居中，说明文字紧跟其后 */
.mc-window__body--single .mc-cmd {
  flex: 0 0 auto;
}

/* --- 3a. 物品生成器：检索行 + 物品行 + 指令 --- */
.give-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--mcv-line);
  background: var(--mcv-panel);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.06em;
  color: var(--mcv-dim);
}
.give-search i {
  width: 8px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}
.give-search i::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 4px;
  height: 1.6px;
  background: currentColor;
  transform: rotate(45deg);
}
.give-search b {
  font-weight: 400;
  color: var(--mcv-ink);
}

.give-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.give-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--mcv-panel);
  font-family: var(--font-mono);
  font-size: 6.6px;
  letter-spacing: 0.04em;
  color: var(--mcv-dim);
}
.give-row b {
  font-weight: 400;
  color: var(--mcv-ink);
}
.give-row span:last-child {
  margin-left: auto;
  color: var(--mcv-accent);
}
.give-row--on {
  border-color: var(--mcv-accent);
  background: var(--mcv-accent-soft);
}
.give-row--on b {
  color: var(--mcv-accent);
}
.give-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* --- 3b. 牌子商店：告示牌 + 木种 --- */
.sign-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.sign-stack .sign {
  height: 104px;
  width: auto;
  max-width: 78%;
}
.sign-types {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
.sign-type {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--mcv-line);
  background: var(--mcv-panel);
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: 0.06em;
  color: var(--mcv-dim);
  white-space: nowrap;
}
.sign-type--on {
  border-color: var(--mcv-accent);
  background: var(--mcv-accent-soft);
  color: var(--mcv-accent);
}

/* --- 3c. 史莱姆区块：居中方块图 --- */
.mc-view--slime-solo {
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.mc-view--slime-solo .slime-grid {
  height: 100%;
  width: auto;
  max-height: 100%;
  aspect-ratio: 1;
  padding: 3px;
  gap: 1px;
}

/* ---------- 4. 窄屏：插图里的字本来就很小，等比缩小即可 ---------- */
@media (max-width: 520px) {
  .app-card__cover .visual {
    font-size: 90%;
  }
}

/* ---------- 5. 方块矿工：16:9 封面下的构图微调 ---------- */
.app-card__cover .bm-device {
  width: 40%;
  right: 5%;
  bottom: -24%;
}
.app-card__cover .visual .bm-logo {
  width: 30%;
  max-width: none;
  /* 让开左上角的「游戏」标签 */
  top: 21%;
  left: 6%;
}

/* 卡面纹理压暗，和另外五张平涂插图放在一起不抢眼 */
.app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.3) saturate(0.85);
  background-size: 62% auto;
}
.app-card:hover .app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.38) saturate(0.95);
  transform: scale(1.07);
}
.app-card--static:hover .app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.3) saturate(0.85);
}
.app-card__cover .bm-tools {
  bottom: 7%;
  gap: 4px;
}
.app-card__cover .bm-tools span {
  font-size: 7px;
  padding: 3px 6px 3px 4px;
}
.app-card__cover .bm-tools img {
  width: 13px;
  height: 13px;
}
.app-card:hover .bm-device {
  transform: rotate(3deg) translateY(-6px);
}

/* ---------- 6. 告示牌：卡面里把木纹提亮，文字对比度更高 ---------- */
.app-card__cover .sign {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.1) 0 2px,
      transparent 2px 33%
    ),
    linear-gradient(180deg, #d8a765, #c08a4a 55%, #a3703f);
  box-shadow: inset 0 0 0 2px rgba(60, 38, 18, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.18), 0 10px 22px -14px rgba(0, 0, 0, 0.7);
}
.app-card__cover .sign span {
  color: #2a1a0c;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}
.app-card__cover .sign span:nth-child(1) {
  color: #14501f;
}
.app-card__cover .sign span:nth-child(4) {
  color: #33227d;
}
html[data-theme="night"] .app-card__cover .sign {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.22) 0 2px,
      transparent 2px 33%
    ),
    linear-gradient(180deg, #9a6a3c, #7d5227 55%, #5f3c1c);
}
html[data-theme="night"] .app-card__cover .sign span {
  color: #f6e6cf;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
html[data-theme="night"] .app-card__cover .sign span:nth-child(1) {
  color: #b9f3c6;
}
html[data-theme="night"] .app-card__cover .sign span:nth-child(4) {
  color: #cfc0ff;
}

/* ---------- 7. VoiceBlock：16:9 里徽章与状态行会撞，留状态行 ---------- */
.app-card__cover .vb-badges {
  display: none;
}
.app-card__cover .vb-state {
  font-size: 7px;
}

/* =========================================================
   8. 修正：插图里的图片不该被 .app-card__cover img 的 100% 裁切
      —— 方块矿工的 logo（512×160）之前被塞进 127×230 的竖框，
         裁掉大半，看起来像被放大的断字。
   ========================================================= */
.app-card__cover .visual img,
.app-card__cover .hero-visual img {
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
}

/* logo 保持 3.2:1，宽度按场景给 */
.bm-logo {
  height: auto;
  aspect-ratio: 512 / 160;
}
.app-card__cover .visual .bm-logo {
  width: 30%;
  max-width: none;
  /* 让开左上角的「游戏」标签 */
  top: 21%;
  left: 6%;
}

/* 卡面纹理压暗，和另外五张平涂插图放在一起不抢眼 */
.app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.3) saturate(0.85);
  background-size: 62% auto;
}
.app-card:hover .app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.38) saturate(0.95);
  transform: scale(1.07);
}
.app-card--static:hover .app-card__cover .visual--bm .bm-bg {
  filter: brightness(0.3) saturate(0.85);
}

/* 手机里的纵向截图：宽度铺满机身，高度按比例 */
/* 机身框直接按截图比例，图片铺满、无留白也无拉伸 */
.visual .bm-device {
  aspect-ratio: 520 / 1000;
}
.visual .bm-device img {
  width: 100%;
  height: 100%;
  /* cover 而不是 fill：内边距会让内容框比例差 1% 左右，
     fill 会把这个误差变成轻微拉伸，cover 只会裁掉 1%，绝不会压扁 */
  object-fit: cover;
}

/* 工具小图标恢复 16px */
.app-card__cover .visual .bm-tools img {
  width: 16px;
  height: 16px;
}

/* 背景纹理是 512×160 的可平铺贴图，别用 cover 硬拉 */
.bm-bg {
  background-size: 46% auto;
  background-repeat: repeat;
  background-position: center;
}

/* 夜间：night.css 的 html[data-theme] body.theme-bright :is(.bm-bg,…)
   特异性是 (0,3,2)，会把纹理提亮到 0.86；这里用同级选择器压回去 */
html[data-theme="night"] body.theme-bright .visual--bm .bm-bg {
  filter: brightness(0.28) saturate(0.6) hue-rotate(-8deg);
}
html[data-theme="night"] body.theme-bright .app-card:hover .visual--bm .bm-bg {
  filter: brightness(0.34) saturate(0.7) hue-rotate(-8deg);
}
html[data-theme="night"] body.theme-bright .app-card--static:hover .visual--bm .bm-bg {
  filter: brightness(0.28) saturate(0.6) hue-rotate(-8deg);
}

/* 插图的 logo / 机身不该被夜间「压暗截图」的规则连坐 */
html[data-theme="night"] body.theme-bright .app-card__cover .visual img {
  filter: none;
}