/* 主控页布局：手机优先，任何时刻只突出一件事。
   按 body[data-phase] 显示：join 输入协助码 / confirm 已连上待开始 / active 协助中 / ended 已结束。
   基础组件样式仍在 app.css，这里只覆盖布局和字号。 */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.app-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(120px + env(safe-area-inset-bottom));
}

.brand {
  margin: 4px 0 12px;
  font-size: 16px;
  color: #475569;
}

/* 状态：一句大标题 + 一句说明，不要卡片边框 */
.status-banner,
.status-banner.state-pending,
.status-banner.state-active,
.status-banner.state-ended {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 16px;
}
.status-badge {
  display: block;
  background: none;
  padding: 0;
  border: 0;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}
.status-banner .status-detail {
  margin: 8px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: #0f172a;
}

.error-box {
  font-size: 17px;
  margin-bottom: 16px;
}

.step-card {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 16px;
}

.code-input {
  width: 100%;
  box-sizing: border-box;
  height: 84px;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: center;
  border: 3px solid #2563eb;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
}
.code-input::placeholder {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: #94a3b8;
}

.btn-main {
  width: 100%;
  min-height: 76px;
  font-size: 26px;
  font-weight: 800;
  border-radius: 16px;
  margin-top: 14px;
}
.btn-main:not(:disabled) {
  animation: fa-breathe 1.8s ease-in-out infinite;
}
@keyframes fa-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.03); opacity: 0.86; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-main:not(:disabled) { animation: none; }
}

.hint {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #475569;
}

/* 画面区：只在协助中和结束后显示，尽量占满 */
.stage-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  margin: 0 0 16px;
}
.stage-card .video-stage-wrap {
  border-radius: 14px;
  max-height: 70vh;
}
.stage-card .gesture-hint {
  margin: 10px 0;
  font-size: 16px;
  line-height: 1.45;
  color: #0f172a;
}
.stage-card .control-bar .btn {
  min-height: 56px;
  font-size: 18px;
}
.stage-extra {
  margin-top: 12px;
}

/* 停止键固定在屏幕底部，协助过程中随时够得着 */
#stopBtn {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  min-height: 64px;
  font-size: 22px;
  margin: 0;
  z-index: 20;
}

.more-block {
  margin-top: 28px;
}
.more-block > summary {
  font-size: 16px;
  color: #475569;
  padding: 12px 0;
}

/* ---- 按阶段显示 ---- */
body[data-phase="join"] #stageCard,
body[data-phase="join"] #stopBtn,
body[data-phase="confirm"] #stageCard,
body[data-phase="active"] .brand,
body[data-phase="active"] .more-block,
body[data-phase="ended"] #stopBtn,
body[data-phase="ended"] #stageCard .control-bar,
body[data-phase="ended"] #stageCard .stage-extra,
body[data-phase="ended"] #stageCard .gesture-hint {
  display: none;
}

/* 协助中：标题缩小，把地方让给画面 */
body[data-phase="active"] .status-badge {
  font-size: 20px;
}
body[data-phase="active"] .status-banner .status-detail {
  display: none;
}
body[data-phase="active"] .status-banner {
  margin-bottom: 8px;
}