/* =============================================
   流水行船复习关卡 · 屏作用域样式
   护栏 5：⛔ 不给关卡屏挂 data-module="river"（river.css:159-160 会隐掉学生栏与草稿入口），
   模块色由本文件在屏作用域内自定义；全部规则限定 #riverLevelSelect / #riverGame 两屏。
   ============================================= */

#riverLevelSelect,
#riverGame {
  --river-color: #0284C7;   /* 水蓝：本专题主色 */
  --river-light: #E0F2FE;   /* 浅水底 */
  --river-dark:  #075985;   /* 深水色（标题/文字） */
}

/* 06b：全局固定学生信息条（.student-bar，fixed top-right）会压住本专题两屏顶部标题
   （375×812 下条高 35px、1024×768 下 43px）。只在 river 两屏作用域内给顶部留出
   学生条高度＋间距，保留学生条功能，不改其他专题布局。 */
#riverLevelSelect,
#riverGame {
  padding-top: calc(var(--space-8) + var(--space-8));  /* 64px：两画幅实测条底 43/55px 之上 */
}

/* 修复轮1：选关页底部「返回首页」要绕过固定草稿按钮（#scratchpadBar，fixed bottom:80px、
   高 40px）。预留 128px 底部空间，滚到底时按钮完整落在草稿按钮上方。 */
#riverLevelSelect {
  padding-bottom: calc(var(--space-8) + var(--space-8) + var(--space-8) + var(--space-8));
}

/* 修复轮1：复用全局 .btn-ghost 作返回入口，并补足 44px 点击区与清晰按钮外观（只限本屏） */
#riverLevelSelect .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 120px;
  margin: var(--space-4) auto var(--space-2);
  padding: var(--space-2) var(--space-6);
  border: 2px solid var(--surface-dim);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--river-dark);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
}
#riverLevelSelect .btn-ghost:active { transform: scale(0.97); }

/* ---- 选关页 · 专题自绘缝（「继续」条与「先看动画」入口卡同缝）---- */
#riverLevelSelect .river-topic-slot {
  margin-bottom: var(--space-3);
}
#riverLevelSelect .river-resume-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                    /* 可点件 ≥44px（护栏/宪法 §4.4） */
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--warning-bg);
  border: 2px solid var(--warning);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  cursor: pointer;
}
#riverLevelSelect .river-resume-bar:active { transform: scale(0.97); }
#riverLevelSelect .river-anim-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--river-light);
  border: 2px dashed var(--river-color);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--river-dark);
  cursor: pointer;
}
#riverLevelSelect .river-anim-entry:active { transform: scale(0.97); }
#riverLevelSelect .river-anim-note {
  font-size: var(--text-caption);
  font-weight: var(--weight-normal);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* ---- 选关页 · 分带标题与前置提示（引擎渲染 tri-* 类，本屏作用域补样式）---- */
#riverLevelSelect .tri-band-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  color: var(--river-dark);
  margin: var(--space-4) 0 var(--space-2);
}
#riverLevelSelect .tri-prereq-hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
#riverLevelSelect .tri-review-entry {
  border-color: var(--river-color);
  color: var(--river-dark);
}

/* ---- 选关页 · 关卡卡片的迷你预览与卡点提示 ---- */
#riverLevelSelect .river-mini {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}
#riverLevelSelect .river-card-hint {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-top: var(--space-2);
}
#riverLevelSelect .river-stop-hint {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--warning);
  margin-top: var(--space-1);
  padding: 0 var(--space-2);          /* 修复轮1：内缩后自然换行，不顶满卡面、不跨卡读成一行 */
  line-height: var(--leading-normal); /* 换行后高度由内容承载 */
}
/* 锁定卡的「今天先到这里」不随整卡降透明度看不清（引擎 .locked 有 opacity）——保持原样继承即可 */

/* ---- 答题屏骨架（外壳配色随全局 .game-* 类；本屏只补占位与挂点样式）---- */
#riverGame .river-game-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}
#riverGame .river-content {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--surface-dim);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
}
#riverGame .river-placeholder {
  text-align: center;
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-loose);
  padding: var(--space-4);
}
#riverGame .river-placeholder-sub {
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
#riverGame .game-action-bar .game-action-btn {
  min-height: 44px;
}
#riverGame .game-nav-lock-hint {
  font-size: var(--text-caption);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-1);
}

/* ---- 分关发布保障 Task 1：未备关「正在准备」徽标与选关页提示条 ----
   配色只用 tokens.css 既有语义变量（⛔ 不新增色）；提示条纯展示不可点（不加 cursor:pointer）。 */
#riverLevelSelect .river-prep-badge {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--text-secondary);
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
}
#riverLevelSelect .river-prep-hint {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  text-align: center;
  line-height: var(--leading-normal);
}