/* ============================================================
 * restyle_practice.css  ·  跟读练习页（/index.html · body.page-practice）
 * P2深度沉浸 · 全屏化纯CSS热修 · 竹 · 20260903 · v=20260903b
 *
 * 基于 R22 真身（commit edb5fe9，冬台账 md5 已核）补真缺口：
 *  - body 420 帽已由 restyle_global.css L277 P1补丁解除（不重复）
 *  - 首页主热区/大字号已由 restyle_home.css 做达标（年级tab44/视频钮68/
 *    播放64/慢放56/麦克风88/句卡32px/cast-guide-close44——不重复、不压）
 * 本件只补：tabbar与跟读弹层两处 420 悬浮帽满铺、弹层帽宽统一+dvh+safe-area、
 *          投屏钮热区 40→44、768 平板弹性铺满+内容栏居中、横屏纯色渐变兜底。
 *
 * 范围纪律（兰隔离审查对照）：
 *  - 每条规则一律带 body.page-practice 前缀，零外溢 game/pet/parent/
 *    town_map/pet_home/chat 任何一页。
 *  - 零 JS 改动、零新图（无一处 url()）、零功能变更；弹窗全保留只换皮。
 *  - 不碰 page_practice.js（L488 结果modal内联 max-width:380px 无!important，
 *    本件用 !important 外部覆盖）、kg2_adapter.js、style.css 原文件（只叠加）。
 *  - seg1 开场片 = splash.js 品牌启动页（overlay 无 class、z-index 99999、
 *    满铺 cover、跳过钮 z-20 原生 click/touch）：本件选择器零匹配，
 *    天然不被遮、跳过钮可点，刻意不勾它（封板启动层，无安全选择器）。
 *  - 撤引本件（index.html head 加在 restyle_home.css 之后的 1 行 link）即回滚。
 * ============================================================ */

/* ============ 1. 两处 420 悬浮帽满铺（tabbar + 跟读全屏弹层骨架） ============ */

/* body 底部预留 tabbar 高度 + 刘海安全区（global 已解 420 帽，本件补 safe-area） */
body.page-practice {
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}
/* 练习中（全屏弹层打开）底部不再为 tabbar 预留，安全区交给弹层内部 */
body.page-practice.practice-mode {
  padding-bottom: 0 !important;
}
body.page-practice.has-feedback {
  padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
}

/* 底部导航 tabbar：left:50%+translateX 居中420帽 → 满铺贴底（仅练习页前缀） */
body.page-practice .tabbar {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  padding-left: env(safe-area-inset-left) !important;
  padding-right: env(safe-area-inset-right) !important;
}

/* 跟读全屏弹层骨架：同款 420 居中帽 → 满铺；高度 dvh 双声明 */
body.page-practice .practice-overlay {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100vh;
  height: 100dvh;
}
/* 满铺后滑入动画不得再带 translateX(-50%)，否则横向跳变 */
@keyframes practiceRestyleSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
body.page-practice .practice-overlay {
  animation: practiceRestyleSlideUp 0.25s ease-out !important;
}

/* 弹层背景兜底纯色梯度（::before 主题图不 cover 横屏时两侧不露灰） */
body.page-practice .practice-overlay {
  background: linear-gradient(180deg, #F5F7FA 0%, #EEF3F6 100%) !important;
}

/* 弹层内层：刘海四向安全区，底部操作栏不贴 Home 指示条 */
body.page-practice .practice-overlay-inner {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============ 2. vh → dvh 双声明（旧浏览器回退 vh 行） ============ */

/* V6 滚动区 58vh 死帽 → 自适应；高度口径 dv 化 */
body.page-practice .practice-video-section.v6-scroll-ready {
  max-height: none !important;
  max-height: 72vh;
  max-height: 72dvh;
}
body.page-practice .practice-video-area {
  max-height: 60vh;
  max-height: 60dvh;
}
body.page-practice .feedback {
  max-height: 32vh;
  max-height: 32dvh;
}

/* ============ 3. 弹层帽宽统一 min(92vw,360px) + 遮罩满铺 ============ */

/* 结果总结弹窗 #_sumModal（page_practice.js L487-488 内联，无 !important → 外部覆盖） */
body.page-practice #_sumModal {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.page-practice #_sumModal > div {
  max-width: min(92vw, 360px) !important;
  width: 100% !important;
  max-height: 70vh;
  max-height: 70dvh;
}
/* 结果弹窗关闭钮：内联 padding:14px 视觉不动，仅补 min-height 达 44 线 */
body.page-practice #_sumClose {
  min-height: 44px;
}

/* KG2 鼓励弹窗（kg2_adapter 注入，style.css 帽 320px） */
body.page-practice .kg2-cheer-overlay {
  inset: 0 !important;
}
body.page-practice .kg2-cheer-card {
  max-width: min(92vw, 360px) !important;
  width: 100% !important;
}

/* 投屏指引弹窗（index.html 内联 <style>，帽 420px / 85vh） */
body.page-practice .cast-guide-overlay {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.page-practice .cast-guide-modal {
  max-width: min(92vw, 360px) !important;
  width: 100% !important;
  max-height: 85vh;
  max-height: 85dvh;
}

/* ============ 4. 热区补口（主热区 restyle_home 已达标，本件只补遗漏） ============ */

/* 投屏钮 home 件为 min-height:40px → 补到 44（视觉几乎不动） */
body.page-practice .cast-guide-btn {
  min-height: 44px !important;
}
/* 换皮肤 / 会员入口 顶栏小钮：透明伪元素外扩，视觉尺寸不动 */
body.page-practice .practice-topbar-inner .skin-btn {
  position: relative;
}
body.page-practice .practice-topbar-inner .skin-btn::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

/* ============ 5. 768 平板断点：tab弹性铺满不横滑 + 内容栏居中（字号 home 已定，不碰） ============ */

@media (min-width: 768px) {
  /* 年级/册别 tab：均分铺满（375 小屏保留组件内横滑） */
  body.page-practice .practice-grade-row,
  body.page-practice .practice-volume-row {
    overflow: visible !important;
    flex-wrap: nowrap;
    gap: 12px;
  }
  body.page-practice .practice-grade-row .grade-tab,
  body.page-practice .practice-volume-row .volume-tab {
    flex: 1 1 0;
    min-width: 0;
  }
  /* 单元栏：弹性铺满，消除横向滚动（单元 36px 小图不放大，走 emoji 兜底） */
  body.page-practice .practice-video-section .unit-bar,
  body.page-practice .practice-video-section #unitBar {
    overflow-x: hidden !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px 12px;
  }
  body.page-practice .practice-video-section .unit-bar .unit-chip,
  body.page-practice .practice-video-section #unitBar .unit-chip {
    flex: 0 1 84px;
    width: 84px;
  }
  /* 首页内容栏：背景满铺不留白边，阅读内容居中限宽 720 */
  body.page-practice .practice-selector-area,
  body.page-practice .practice-progress-inline,
  body.page-practice .practice-guide-banner {
    padding-left: max(16px, calc((100% - 720px) / 2));
    padding-right: max(16px, calc((100% - 720px) / 2));
  }
  body.page-practice .practice-video-area {
    padding-left: max(20px, calc((100% - 720px) / 2));
    padding-right: max(20px, calc((100% - 720px) / 2));
  }
  /* 跟读弹层内卡/操作栏居中限宽（背景仍满铺） */
  body.page-practice .practice-card-overlay,
  body.page-practice .practice-mic-card,
  body.page-practice .practice-actions-overlay {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  body.page-practice .practice-overlay-topbar {
    background: transparent;
    box-shadow: none;
  }
}

/* ============ 6. 横屏：纯色渐变铺满兜底（零图片，防主题图两侧留白） ============ */

@media (orientation: landscape) {
  /* 跟读弹层：主题图只居中铺，两侧纯色梯度补满，::before 降透明不抢眼 */
  body.page-practice .practice-overlay {
    background: linear-gradient(135deg, #EEF3F6 0%, #F7F2EA 50%, #EEF3F6 100%) !important;
  }
  body.page-practice .practice-overlay::before {
    background-size: auto 100% !important;
    background-position: center center !important;
    opacity: 0.30 !important;
  }
  /* 首页视频区横屏梯度满铺 */
  body.page-practice .practice-video-section {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8C8 100%) !important;
  }
  /* 横屏高度紧张，弹层卡内距收紧保证操作钮可见 */
  body.page-practice .practice-card-overlay {
    margin: 8px 14px 4px;
  }
  body.page-practice #practiceCard .sentence-box {
    padding: 10px 18px;
  }
}

/* ============================================================
 * 7. kg2 组件热区补齐（2026-09-03 · v=20260903b 追加）
 *
 * 【年级 tab · 真红必修】restyle_home.css L56 的 44px 规则只命中旧 .grade-tab
 *   （容器 .practice-grade-row）；kg2_adapter.js 新生成的年级 tab 类名是
 *   .kg2-grade-tab（容器 #gradeTabs / .kg2-grade-row），类名不匹配 → 规则不命中，
 *   kg2 新 tab 漏掉 44 热区。生产实测 375/768/横屏高度恒 33px（style.css L7881
 *   padding:7px 4px + line-height:1.3 撑成，无 min-height；V6 L8965 仅改色）。
 *   本规则补 min-height:44。
 *
 * 【鼓励弹窗「继续」钮 · 兜底】.kg2-cheer-btn 静止态实测高 55px（style.css
 *   padding:14px + line-height:27）本已 ≥44 合规；三视口测到的 165×32 / 185×32
 *   是 .kg2-cheer-card 的 kg2CheerPop scale(0.6→1) 入场动画 0.4s 中途
 *   getBoundingClientRect 的测量假象（55×0.6≈33、260×0.6≈156、308×0.6≈185 全吻合，
 *   transform 末态 scale=1 时静止 260/308×55）。此处仍加 min-height 兜底防未来压扁
 *   （现状 55>44 不生效、零视觉变化）。注：min-height 约束不了 transform 动画期热区。
 *
 * 范围纪律：全部 body.page-practice 起手零外溢；只提 min-height + box-sizing，
 *   不碰颜色/字号/padding/position/显隐；grade-tab 行内 flex 拉伸、文字垂直居中不变。
 * ============================================================ */

/* kg2 年级 tab：热区 33 → ≥44px（选择器 0,2,1 稳压 style.css 单类 0,1,0） */
body.page-practice #gradeTabs .kg2-grade-tab,
body.page-practice .kg2-grade-row .kg2-grade-tab {
  min-height: 44px !important;
  box-sizing: border-box;
}

/* kg2 鼓励弹窗「继续」钮：静止 55 已达标，min-height 兜底 ≥44（overlay 为 body 子节点） */
body.page-practice .kg2-cheer-overlay .kg2-cheer-btn {
  min-height: 44px !important;
  box-sizing: border-box;
}

/* ============================================================
 * 本件结束。全部选择器以 body.page-practice 起手，无一条外溢。
 * 叠加顺序：须在 restyle_global.css、restyle_home.css 之后引用。
 * v=20260903b：追加第 7 节 kg2 年级 tab + 鼓励钮热区规则。
 * ============================================================ */