/* ============================================================================
   YUCLASS 专用补充样式：Three.js hero 层 / 参数旋钮 lab / 派活单卡 / 网格补充
   遵循 djhh 中文排版三层防线（见 components.css 顶部兜底）。
   ========================================================================== */

/* ---- Three.js hero 层：canvas 叠在暖米白底上，不挡交互 ---- */
/* hero canvas 绝对定位的锚点必须是所在屏，而不是整块 deck */
.slide { position: relative; }
.hero3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}
.hero3d.half { opacity: .38; }
.slide > .wrap { position: relative; z-index: 1; }
.slide.act-divider .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero3d { opacity: .55; } }

/* ---- 网格补充：四列 / 五列 ---- */
body.rebuild .code-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
body.rebuild .code-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  body.rebuild .code-grid.cols-4,
  body.rebuild .code-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body.rebuild .code-grid.cols-4,
  body.rebuild .code-grid.cols-5 { grid-template-columns: 1fr; }
}

/* ---- 参数旋钮 lab（pk-*） ---- */
.pk-controls { margin-bottom: 6px; }
.pk-scale {
  display: flex; justify-content: space-between;
  font-size: .74rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 0 2px 6px;
}
.pk-slider { margin: 6px 0 16px; }
.pk-readout {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-card); margin-bottom: 14px;
}
.pk-badge { display: flex; align-items: baseline; gap: .5em; flex: none; }
.pk-count {
  font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700; color: var(--coral-deep); line-height: 1;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pk-badge small { font-size: .82rem; color: var(--ink-3); }
.pk-verdict { flex: 1; min-width: 22ch; font-size: .95rem; color: var(--ink-2); text-wrap: pretty; }
.pk-dialog {
  border: 1px dashed var(--line-2); border-radius: 12px;
  padding: 16px 18px; background: var(--paper-2);
}
.pk-label { font-size: .82rem; font-weight: 700; color: var(--coral-deep); margin-bottom: 8px; }
.pk-answer {
  font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.8;
  color: var(--ink); min-height: 3.6em; text-wrap: pretty;
}
.pk-answer .pk-mark { color: var(--coral-deep); font-weight: 700; }

/* ---- 派活单卡片 ---- */
.prompt-card {
  margin-top: 14px; border: 1px solid var(--line-2); border-radius: 14px;
  background: #241f19; box-shadow: var(--shadow-md); overflow: hidden;
}
.prompt-card .pc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1em;
  padding: 10px 16px; background: #2c2721; color: #d8cdb8; font-size: .84rem;
}
.prompt-card .pc-head span { color: #9c8f76; font-size: .76rem; }
.prompt-card pre {
  margin: 0; padding: 16px 18px;
  font-family: var(--mono); font-size: clamp(.78rem, 1.05vw, .92rem);
  line-height: 1.8; color: #e9e0cc; white-space: pre-wrap; word-break: keep-all;
}

/* ---- #m6-action 行动清单：单列 + 收紧字号，1280×720 不截断（djhh keep-all） ---- */
#m6-action .action-grid { grid-template-columns: 1fr; gap: 8px; }
#m6-action .action-grid label {
  font-size: .88rem; line-height: 1.55;
  padding: 8px 12px; word-break: keep-all; overflow-wrap: break-word;
}
#m6-action .lab-body { padding: clamp(14px, 2vw, 20px); }

/* ---- #m6-feed 实测屏：参考图缩略 + 竖屏录屏并排 ---- */
.feed-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 18px; align-items: center; margin-top: 12px; }
.feed-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feed-ref img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-2); display: block; }
.feed-ref figcaption, .refvid figcaption { font-size: .74rem; color: var(--ink-3); margin-top: 4px; text-align: center; }
.feed-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; justify-items: center; }
.refvid video.figvid {
  height: min(60vh, 480px); width: auto; max-width: 100%;
  border-radius: 14px; border: 1px solid var(--line-2); background: #241f19;
  box-shadow: var(--shadow-md); display: block;
}
.feed-note { margin-top: 12px; font-size: .95rem; color: var(--ink-2); max-width: 58ch; text-wrap: pretty; }
.feed-tip { margin-top: 6px; font-size: .84rem; color: var(--ink-3); max-width: 66ch; text-wrap: pretty; }
@media (max-width: 860px) { .feed-grid { grid-template-columns: 1fr; } .refvid video.figvid { height: min(48vh, 380px); } }

/* ---- art-card 内 video 槽位：与 img 行为一致 ---- */
body.rebuild .art-card video.figvid {
  width: 100%; height: 100%; min-height: inherit;
  object-fit: cover; display: block; position: absolute; inset: 0;
}
body.rebuild .art-card.has-video img { display: none; }
body.rebuild .art-card video.figvid.gone { display: none; }