/* layout-flow.css — v6.6.3 弹性重组覆盖层（仅 index.html / index-flow.html 加载，叠在 layout-anchored.css 之后）
   视口高出的部分（--flow-extra，由 App.updateFlowExtra 写入舞台）不再堆在底部，
   而是按各图层的「弹性系数 t」分摊进内容间隙：顶部 UI t=0 不动，贴底元素 t=1
   保持底缘间距，中间元素线性过渡。题目页图层的 t 由 quiz.js 按坐标自动分类
   （底缘 ≥80% 贴底，其余按中心点 28%→70% 线性插值）；开屏图层在此手工标注。 */

/* ---------- 开屏 P1 ---------- */
.p1-title { top: calc(23.0667cqw + var(--flow-extra, 0px) * 0.05); }
.p1-characters { top: calc(67.2178cqw + var(--flow-extra, 0px) * 0.7); }
.p1-umbrella { top: calc(48.1067cqw + var(--flow-extra, 0px) * 0.35); }
.p1-sock { top: calc(75.0044cqw + var(--flow-extra, 0px) * 0.5); }
.p1-dear { top: calc(142.8978cqw + var(--flow-extra, 0px) * 0.9); }
.p1-copyright { top: calc(171.0044cqw + var(--flow-extra, 0px)); }

.p1-deco-41 { top: calc(91.4489cqw + var(--flow-extra, 0px) * 0.55); }
.p1-deco-42 { top: calc(75.7867cqw + var(--flow-extra, 0px) * 0.45); }
.p1-deco-43 { top: calc(23.0044cqw + var(--flow-extra, 0px) * 0.1); }
.p1-deco-44 { top: calc(62.1156cqw + var(--flow-extra, 0px) * 0.3); }
.p1-deco-45 { top: calc(105.2267cqw + var(--flow-extra, 0px) * 0.65); }
.p1-deco-46 { top: calc(130.4533cqw + var(--flow-extra, 0px) * 0.85); }
.p1-deco-47 { top: calc(101.12cqw + var(--flow-extra, 0px) * 0.6); }
.p1-deco-48 { top: calc(94.1156cqw + var(--flow-extra, 0px) * 0.55); }

.splash-start { top: calc(153.3333cqw + var(--flow-extra, 0px)); }
.splash-begin { top: calc(151.5556cqw + var(--flow-extra, 0px)); }

/* ---------- 开屏 P2 ----------
   h5修改3 调位：团案（friends 两组）往下挪（t↑）、纸张与旋转木马往上挪（t↓）、
   开始按钮保持贴底；纸张左缘补回设计稿里的画笔（仅 flow 入口有此图层）。 */
.p2-paper { top: calc(30.7733cqw + var(--flow-extra, 0px) * 0.3); }
.p2-crayon { left: 7.8889%; width: 13.3333%; top: calc(80.6667cqw + var(--flow-extra, 0px) * 0.3); height: 17.1111cqw; z-index: 3; }
.p2-friends-top { top: calc(10.2222cqw + var(--flow-extra, 0px) * 0.2); }
.p2-friends-left { top: calc(19.3422cqw + var(--flow-extra, 0px) * 0.25); }
.p2-carousel { top: calc(119.3422cqw + var(--flow-extra, 0px) * 0.75); }
#screen-splash-2.is-active .p2-crayon { animation: layerFade 0.48s ease 0.12s both; }

/* ---------- 开屏 P3 ---------- */
.p3-spinner { top: calc(75.6622cqw + var(--flow-extra, 0px) * 0.43); }
.p3-caption { top: calc(111.8933cqw + var(--flow-extra, 0px) * 0.63); }

/* ---------- 题目页 ---------- */
/* 返回上一站贴底：底缘间距与设计稿一致（4.8% = 76.8px）。 */
.quiz-back { top: calc(160.7111cqw + var(--flow-extra, 0px)); }

/* 压在选项卡上方的前景小件容器（3 站派对帽等 aboveOptions 图层）：
   层级高于 .quiz-cards（z-index 4），随场景一起揭示。 */
.quiz-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.02);
  transform-origin: center;
}
#screen-quiz.show .quiz-overlay { animation: bgReveal 0.42s ease forwards; }

/* ---------- 折叠屏展开 / 平板 / 横屏（视口宽于 9:16） ----------
   宽度锚定的内容高 177.78cqw，视口高度不足时底部按钮会被裁掉（不可达）；
   退化为按高度锚定的 9:16 居中舞台：内容恰好铺满舞台（弹性量自动归零），
   两侧由 #app 环境色渐变承接（quiz.js/result.js 的 flow 宽屏分支）。 */
@media (min-aspect-ratio: 9 / 16) {
  .design-stage {
    width: min(56.25vh, 480px);
    width: min(56.25dvh, 480px);
    height: auto;
    max-height: 100%;
    aspect-ratio: 9 / 16;
  }
}