/* Ticket #8（07）：笔记校验与开采循环
 * 红线：全部一次性 CSS transition，无循环动画 / 无粒子系统 */

/* ============ 通用布局 ============ */
.t08-wrap {
  max-width: 860px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.t08-wrap.in {
  opacity: 1;
  transform: translateY(0);
}

.t08-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.t08-head .ark-h1 { margin: 0; }
.t08-back {
  background: transparent;
  color: var(--ark-accent);
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 13px;
}
.t08-back:hover { background: var(--ark-bg-card); }

.t08-ratio {
  padding: 2px 10px;
  border-radius: 0;
  font-size: 13px;
  border: 1px solid var(--ark-border);
}
.t08-ratio.ok { color: var(--ark-ok); border-color: rgba(111, 227, 161, 0.4); }
.t08-ratio.warn { color: var(--ark-gold); border-color: rgba(255, 209, 102, 0.4); }

.t08-badge {
  padding: 2px 10px;
  border-radius: 0;
  font-size: 13px;
  color: var(--ark-text-dim);
  border: 1px solid var(--ark-border);
  background: var(--ark-bg-card);
}
.t08-badge.warn { color: var(--ark-gold); border-color: rgba(255, 209, 102, 0.4); }
.t08-badge.rare {
  color: #1a1300;
  background: linear-gradient(135deg, var(--ark-gold), #ffb347);
  border-color: var(--ark-gold);
  font-weight: 700;
}

/* ============ 入口表单 ============ */
.t08-field { display: block; margin: 12px 0; }
.t08-label { display: block; font-size: 13px; color: var(--ark-text-dim); margin-bottom: 4px; }
.t08-select, .t08-notes {
  width: 100%;
  background: var(--ark-bg-card);
  color: var(--ark-text);
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
}
.t08-notes { resize: vertical; line-height: 1.7; }
.t08-select:focus, .t08-notes:focus {
  outline: none;
  border-color: var(--ark-accent);
  box-shadow: 0 0 0 2px var(--ark-glow);
}

.t08-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.t08-actions.center { justify-content: center; }
.t08-btn {
  background: var(--ark-bg-card);
  color: var(--ark-text);
  border: 1px solid var(--ark-border);
  border-radius: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.t08-btn:hover { border-color: var(--ark-accent); }
.t08-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.t08-btn.primary {
  background: linear-gradient(135deg, #1d4e89, #2a6fb8);
  border-color: #3d86d0;
  color: #eaf4ff;
  font-weight: 700;
}
.t08-btn.big { padding: 12px 28px; font-size: 16px; }

.t08-error-inline {
  color: var(--ark-danger);
  font-size: 13px;
  min-height: 18px;
  margin: 4px 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.t08-error-inline.in { opacity: 1; }

/* 校验中面板 */
.t08-validating { text-align: center; padding: 48px 16px; }
.t08-validating-title {
  font-size: 22px;
  color: var(--ark-accent);
  margin: 0 0 6px;
  letter-spacing: 2px;
}

/* ============ 结果页 ============ */
.t08-section { margin: 14px 0; }
.t08-h2 { font-size: 15px; margin: 0 0 8px; }
.t08-h2.ok { color: var(--ark-ok); }
.t08-h2.warn { color: var(--ark-gold); }

.t08-list { list-style: none; margin: 0; padding: 0; }
.t08-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin: 6px 0;
  border: 1px solid var(--ark-border);
  border-radius: 0;
  background: var(--ark-bg-panel);
}
.t08-item.covered { border-left: 3px solid var(--ark-ok); }
.t08-item.missing { border-left: 3px solid var(--ark-gold); }
.t08-item.dim { color: var(--ark-text-dim); border-left: 3px solid var(--ark-border); }
.t08-item-name { font-weight: 600; }
.t08-kind {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 0;
  border: 1px solid var(--ark-border);
  color: var(--ark-text-dim);
}
.t08-kind-must { color: var(--ark-accent); border-color: var(--ark-accent); }
.t08-kind-bonus { color: var(--ark-text-dim); }
.t08-quote {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding: 4px 10px;
  border-left: 2px solid var(--ark-border);
  color: var(--ark-text-dim);
  font-size: 13px;
}

.t08-pass-note { color: var(--ark-ok); font-size: 15px; margin: 14px 0 8px; }

/* 微讲解面板 */
.t08-explain {
  border: 1px solid var(--ark-accent);
  border-radius: 0;
  background: rgba(21, 29, 58, 0.7);
  padding: 12px 16px;
  margin: 12px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.t08-explain.in { opacity: 1; transform: translateY(0); }
.t08-explain-body {
  white-space: pre-wrap;
  line-height: 1.8;
  max-height: 320px;
  overflow-y: auto;
}

/* ============ 开采仪式页 ============ */
.t08-ceremony { text-align: center; }
.t08-ceremony .t08-head { justify-content: center; }

.t08-stage {
  position: relative;
  margin: 8px auto 4px;
  max-width: 480px;
}

.t08-svg-wrap { position: relative; }
.t08-svg { width: 100%; height: auto; display: block; }

/* 星球光晕：一次性脉冲（transition 实现，非循环动画） */
.t08-glow {
  fill: var(--ark-glow);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.82);
  opacity: 0.28;
  transition: transform 0.7s ease-out, opacity 0.7s ease-out, fill 0.7s ease-out;
}
.t08-svg-wrap.pulse .t08-glow {
  transform: scale(1.28);
  opacity: 0.9;
  fill: var(--ark-glow-strong);
}
.t08-svg-wrap.settle .t08-glow {
  transform: scale(1);
  opacity: 0.32;
  fill: var(--ark-glow);
}
.t08-rare .t08-glow { fill: rgba(255, 209, 102, 0.12); }
.t08-rare .t08-svg-wrap.pulse .t08-glow { fill: rgba(255, 209, 102, 0.32); }
.t08-rare .t08-svg-wrap.settle .t08-glow { fill: rgba(255, 209, 102, 0.15); }

/* 矿石本体：分解时淡化 */
.t08-rock {
  fill: #3a4468;
  stroke: #5a6b9a;
  stroke-width: 2;
  transition: opacity 0.9s ease;
}
.t08-rock-facet, .t08-rock-facet {
  fill: none;
  stroke: #5a6b9a;
  stroke-width: 1.5;
  opacity: 0.8;
  transition: opacity 0.9s ease;
}
.t08-svg-wrap.split .t08-rock { opacity: 0.28; }
.t08-svg-wrap.split .t08-rock-facet { opacity: 0.2; }

/* 零件：初始叠在矿心（隐藏），split 后一次性散布到位 */
.t08-parts { transform-box: fill-box; }
.t08-part {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(0px, 0px) scale(0.4);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 0.9, 0.35, 1), opacity 0.7s ease;
}
.t08-part rect {
  fill: #1b2547;
  stroke: var(--ark-accent);
  stroke-width: 1.5;
}
.t08-part text {
  fill: #dce8ff;
  font-size: 13px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.t08-svg-wrap.split .t08-part {
  transform: translate(var(--dx), var(--dy)) scale(1);
  opacity: 1;
}
.t08-rare .t08-part rect { stroke: var(--ark-gold); }

/* 燃料飘字：一次性浮起 + 淡出 */
.t08-fuel-float {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, 6px);
  opacity: 0;
  pointer-events: none;
  font-family: "DSEG7", monospace;
  font-size: 30px;
  color: var(--ark-accent);
  text-shadow: 0 0 12px var(--ark-accent);
  transition: transform 0.7s ease-out, opacity 0.5s ease;
}
.t08-fuel-float.float {
  transform: translate(-50%, -52px);
  opacity: 1;
}
.t08-fuel-float.done {
  transform: translate(-50%, -84px);
  opacity: 0;
  transition: transform 0.8s ease-in, opacity 0.8s ease-in;
}
.t08-fuel-float.gold {
  color: var(--ark-gold);
  font-size: 34px;
  text-shadow: 0 0 16px rgba(255, 209, 102, 0.85);
}

.t08-result-line { margin: 12px 0 4px; color: var(--ark-ok); }

.t08-ceremony .t08-section { text-align: left; }