/* ============================================================
 * boot.css —— 启动页（工作室 logo + 资源完整性自检）
 *
 * 层次：盖在 .screen 之上（z 120 > overlay 70 / sheet 88 / cg 110）。
 * 它是一层"开机画面"：底下主菜单照常就绪，校验通过淡出即见。
 *
 * 视觉：沿用全局暖纸底与排版体系（material.css 的 token）。
 * 这里是全屏静态层，不浮不滚 —— 所以不用玻璃、不用阴影，
 * 只靠留白、字重和一条分隔线撑住版面。
 * ============================================================ */

.boot {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上松下紧的版式重心：logo 区占上 1/3，清单压着下半 */
  padding: 74px 30px 26px;
  background: linear-gradient(172deg, #F1F0ED 0%, #ECEBE7 58%, #E7E5E0 100%);
  transition: opacity .32s cubic-bezier(.4, 0, .2, 1), transform .32s cubic-bezier(.4, 0, .2, 1);
}
/* 退场：淡出 + 极轻微下沉，像一张揭开的纸 */
.boot.out { opacity: 0; transform: scale(.985); pointer-events: none; }

/* ---------- 工作室标 ---------- */
.boot-mark { flex: none; }
.boot-mark svg { display: block; width: 66px; height: 59px; }

/* A 标的两幕：先描边生长，后填色落定。
 * pathLength=1 把 dash 归一化，免 JS 量长度。 */
.boot-mark .bmk-stroke {
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bmk-draw .82s cubic-bezier(.16, 1, .3, 1) forwards,
             bmk-fill .42s ease-out .68s forwards;
}
@keyframes bmk-draw  { to { stroke-dashoffset: 0; } }
@keyframes bmk-fill  { to { fill-opacity: 1; } }

.boot-studio {
  margin-top: 22px;
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
/* 字重反差：实心工作室名 + 细体后缀，不再加任何图形装饰 */
.boot-studio b { font-weight: 600; }
.boot-studio i { font-style: normal; font-weight: 200; color: var(--text-2); }

/* 分隔：一条细线从中心展开，是"工作室 → 作品"的转场 */
.boot-rule {
  width: 44px; height: 1px;
  margin: 20px 0 14px;
  background: var(--md-primary-l);
  transform: scaleX(0);
  animation: bmk-rule .38s cubic-bezier(.16, 1, .3, 1) .95s forwards;
}
@keyframes bmk-rule { to { transform: scaleX(1); } }

.boot-game {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--text-2);
}
.boot-game b { font-weight: 500; color: var(--text); }

/* ---------- 开机贴士 ---------- */
/*
 * 上方一句小贴士，替掉原来那 8 行清单。
 * 高度固定，免得轮播时下方圆环跟着跳。
 */
.boot-tips {
  width: 100%;
  max-width: 252px;
  margin-top: 34px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boot-tips-in {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  text-align: center;
  opacity: 0;
}
.boot-tips-in.in { animation: tip-in .5s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes tip-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- 进度环 ---------- */
/*
 * ★ 为什么是环不是条
 *   进度条暗示"有确定进度"，而这个等待本来就是不确定时长的。
 *   环 + 中心一个图标，表达的是"在准备"，比停在一半的条诚实。
 *
 * ★ 用 SVG stroke-dasharray 而不是 conic-gradient
 *   conic-gradient 老内核不认（见 §9.11 那段的由来）。
 */
.boot-ring {
  position: relative;
  width: 72px; height: 72px;
  margin-top: 26px;
  display: flex; align-items: center; justify-content: center;
}
.boot-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.boot-ring-track {
  fill: none;
  stroke: var(--divider);
  stroke-width: 3;
}
.boot-ring-bar {
  fill: none;
  stroke: var(--md-primary);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset .34s cubic-bezier(.16, 1, .3, 1), stroke var(--fast);
}
.boot-ring.is-warn .boot-ring-bar { stroke: var(--warn); }
.boot-ring.is-fail .boot-ring-bar { stroke: var(--danger); }

/* 环中心的图标：等待态呼吸，结束时定格 */
.boot-ring-ic {
  width: 20px; height: 20px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.boot-ring-ic svg { display: block; width: 100%; height: 100%; }
.boot-ring-ic .bic-wait { animation: bic-breathe 1.1s ease-in-out infinite; transform-origin: center; }
@keyframes bic-breathe { 50% { opacity: .35; } }

/* ---------- 常驻声明 ---------- */
/*
 * 适龄分级 + 免责话术，**每次开机都显示**（不是"闪一下"）。
 * 所以它压在底部、字比贴士还小一级 —— 常驻的东西不该抢眼球，
 * 但必须一直在，随时可查。
 */
.boot-legal {
  width: 100%;
  max-width: 268px;
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.boot-legal-rate {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 2px;
}
.boot-legal-tag {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--md-accent-d);
  background: rgba(208, 138, 56, .13);
  border: 1px solid rgba(208, 138, 56, .3);
  border-radius: 5px;
  padding: 1px 5px;
}
.boot-legal-txt { font-size: 10.5px; color: var(--text-2); line-height: 1.5; }
.boot-legal-line {
  font-size: 10px;
  line-height: 1.55;
  color: var(--text-3);
  text-align: center;
  letter-spacing: .01em;
}

/* ---------- 出口 ---------- */
/*
 * ★ 版式：贴士 + 环在上，声明 + 按钮固定在下。
 *   .boot 是 flex column，靠 .boot-legal 的 margin-top:auto 把
 *   声明和按钮一起推到最底 —— 中间那段空白是有意的（呼吸感），
 *   不是没排满。所以这里 .boot-foot 不再要 margin-top:auto，
 *   否则两个 auto 会互相分走空白、把声明和按钮扯开。
 */
.boot-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(8px);
  animation: foot-in .4s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes foot-in { to { opacity: 1; transform: none; } }

.boot-enter {
  appearance: none;
  border: 0;
  padding: 11px 38px;
  border-radius: var(--r);
  background: var(--md-primary-d);
  color: #FFFDFB;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  cursor: pointer;
  box-shadow: var(--e2);
  transition: transform var(--mag), box-shadow var(--fast), background var(--fast);
}
.boot-enter:hover { background: var(--md-primary); }
.boot-enter:active { transform: scale(.97); box-shadow: var(--e1); }
.boot-enter:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 3px; }

.boot-hint { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.boot-hint b { font-weight: 500; color: var(--warn); }

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .boot-mark .bmk-stroke { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
  .boot-rule { animation: none; transform: none; }
  .boot-foot { animation-duration: .01s; animation-delay: 0s !important; }
  /* 环中心的等待图标不呼吸、贴士入场不动 —— 尊重系统偏好 */
  .boot-ring-ic .bic-wait { animation: none; }
  .boot-tips-in { animation: none; }
}

/* ============================================================
 * 过场声明（0.3.16）
 *
 * 自检通过之后浮现一次，玩家点"知道了"就再也不出现。
 * 盖在 .boot 之上（z 130）：它是"上一步已经过了、下面是声明"，
 * 所以必须压在自检页上面，而不是并排。
 *
 * 视觉：和 boot 页同一套（暖纸底、A 标、细分隔线），
 * 只有一个区别 —— 这里的正文是**成段的声明文字**，
 * 所以需要正文排版（行高、段间距），而不是自检页那种清单。
 * ============================================================ */
.splash {
  position: absolute;
  inset: 0;
  z-index: 130;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 26px;
  opacity: 0;
  transition: opacity .34s ease;
}
.splash.in { opacity: 1; }
.splash.out { opacity: 0; }

.splash-inner {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(10px);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
.splash.in .splash-inner { transform: none; }

.splash-mark { width: 44px; height: 39px; color: var(--md-primary-d); }
.splash-mark svg { display: block; width: 100%; height: 100%; }
.splash-mark .bmk-stroke { stroke-dashoffset: 1; animation: bmk-drawNoFill .8s ease .1s forwards; }

.splash-studio {
  margin-top: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}
.splash-studio b { font-weight: 600; }
.splash-studio i { font-style: normal; font-weight: 200; color: var(--text-2); }

.splash-rule {
  width: 40px; height: 1px;
  margin: 18px 0 20px;
  background: var(--md-primary-l);
}

/* ---- 正文：三条声明 ---- */
.splash-fic {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
  letter-spacing: .01em;
}
.splash-region {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}

/* ---- 适龄分级：给个框，让它明显是"一条外部标识"而不是正文 ---- */
.splash-rate {
  margin-top: 18px;
  padding: 11px 13px;
  border: 1px solid var(--divider);
  border-radius: var(--r);
  background: var(--surface-2);
  display: flex;
  align-items: flex-start;
  gap: 9px;
  text-align: left;
}
.splash-rate-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--md-accent-d);
  background: rgba(208, 138, 56, .12);
  border-radius: 6px;
  padding: 2px 7px;
  margin-top: 1px;
}
.splash-rate-txt { font-size: 12px; line-height: 1.7; color: var(--text-2); }

.splash-ok { margin-top: 26px; width: 100%; }

@keyframes bmk-drawNoFill { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .splash, .splash-inner { transition-duration: .01s; }
  .splash-mark .bmk-stroke { animation: none; stroke-dashoffset: 0; }
}