/* kids 端移动化公共样式（MOBILE-RENOVATION-PLAN §3.3）
 * 只放跨组件公共项；每条规则必须包在 @media (max-width: 767px) 内，桌面零影响。
 * 组件级样式一律写在对应 .m.vue 的 <style scoped> 里，禁止往这里堆页面私有规则。
 * 版本号 ?k=20261020002（登记表 .zcode/k-version-registry.md）
 *
 * 2026-10-20 设计系统落地（MOBILE-UI-STRICT-PROMPT §3）：
 *   纸感绘本方向：暖白纸底 + 单一印章色 + 1px 线 + 12/16/24 圆角 + 12/14/16/18/20/24/32 字号阶梯。
 *   组件只准引用 var(--m-*)，禁止再写十六进制色值与阶梯外字号。
 */
@media (max-width: 767px) {
  /* Baloo 2 已由 assets/css/fonts.css 全局声明（2026-11-05 批⓪修复：原 game-fonts.css 已改名
     practice-fonts.css 且收缩为 practice 树私有，kids 手机 body 的 Baloo 2 曾全局断链渲染系统字体），
     这里不重复 @font-face，避免同一 family 多套 unicode-range 互相覆盖。 */

  /* ============ 设计 token：唯一来源 ============ */
  :root {
    /* 纸与墨 */
    --m-paper: #fffbf3;
    --m-surface: #ffffff;
    --m-on-seal: #ffffff;
    --m-surface-2: #f6efe2;
    --m-line: #e8dcc8;
    --m-line-strong: #d6c6ac;
    --m-ink: #1e2a22;
    --m-ink-2: #4a5a4e;
    --m-ink-3: #5c6b60;
    --m-disabled: #a9b5ac;

    /* 印章色（每屏只准一个） */
    --m-green: #0d5f12;
    --m-green-press: #0a4a0e;
    --m-purple: #8e2f80;
    --m-purple-press: #73266a;
    --m-indigo: #2f3e8f;
    --m-indigo-press: #263275;
    --m-gold: #f2b233;
    --m-gold-ink: #7a4a00;

    /* 浅底（选中/提示），与印章色成对使用 */
    --m-green-tint: #eef5ea;
    --m-purple-tint: #f8eef6;
    --m-indigo-tint: #eef1fa;
    --m-gold-tint: #fdf4e1;
    --m-danger-tint: #fcefee;

    /* 语义色 */
    --m-success: #1b6b3a;
    --m-warning: #8a5a00;
    --m-danger: #b3261e;
    --m-info: #1f5fa8;

    /* 字体 */
    --m-font: 'Baloo 2', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

    /* 字号 / 行高 */
    --m-fs-12: 12px;
    --m-lh-12: 18px;
    --m-fs-14: 14px;
    --m-lh-14: 22px;
    --m-fs-16: 16px;
    --m-lh-16: 26px;
    --m-fs-18: 18px;
    --m-lh-18: 26px;
    --m-fs-20: 20px;
    --m-lh-20: 28px;
    --m-fs-24: 24px;
    --m-lh-24: 32px;
    --m-fs-32: 32px;
    --m-lh-32: 38px;

    /* 间距（4 的倍数） */
    --m-s1: 4px;
    --m-s2: 8px;
    --m-s3: 12px;
    --m-s4: 16px;
    --m-s5: 20px;
    --m-s6: 24px;
    --m-s8: 32px;
    --m-s10: 40px;
    --m-s12: 48px;
    --m-s16: 64px;

    /* 形状 */
    --m-r-sm: 5px;
    --m-r-md: 6px;
    --m-r-lg: 8px;
    --m-r-pill: 999px;

    /* 浮层 */
    --m-shadow: 0 4px 16px rgba(30, 42, 34, 0.08);
    --m-mask: rgba(30, 42, 34, 0.45);
    --m-mask-strong: rgba(30, 42, 34, 0.55);

    /* 动效 */
    --m-d-fast: 120ms;
    --m-d-base: 180ms;
    --m-d-slow: 240ms;
    --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 布局 */
    --m-pad: 16px;
    --m-header-h: 56px;
    --m-nav-h: 56px;
    --m-tap: 32px;
    --m-tap-lg: 36px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-focus: var(--m-ink);

    /* 层级 */
    --m-z-header: 100;
    --m-z-nav: 200;
    --m-z-mask: 800;
    --m-z-sheet: 900;
    --m-z-dialog: 1000;
    --m-z-toast: 1100;
  }

  /* ============ 基础重置（仅手机端） ============ */
  html {
    -webkit-text-size-adjust: 100%;
    background: var(--m-paper);
  }
  body {
    margin: 0;
    background: var(--m-paper);
    color: var(--m-ink);
    /* 旧 kids style.css 里 body 有 font-family: Montserrat !important，这里用同权重覆盖，
       否则 Baloo 2 / 系统中文字体全部失效。仅此一处 !important。 */
    font-family: var(--m-font) !important;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
  }
  button,
  input,
  select,
  textarea {
    font-family: inherit;
    font-size: 16px;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
  a {
    -webkit-touch-callout: none;
  }
  :focus-visible {
    outline: 2px solid var(--m-focus);
    outline-offset: 2px;
  }

  /* ============ 通用工具 ============ */
  .m-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* 基础盒模型只作用于新设计系统的类，避免全局 * 重置影响未改造的游戏页 */
  .m_btn,
  .m_input,
  .m_card,
  .m_chip,
  .m_field,
  .m_error,
  .m_skeleton {
    box-sizing: border-box;
  }

  /* 慢网提示行（验收 P0-3 统一口径）：骨架页的 *_slow 文案 + Retry 纵向排，
     与 m-page 底座 loading 态的 2s+Retry 行为一致；六页共用，避免各页重复样式。
     2026-10-23 上纸面卡：取回深色壁纸的页（作业/GrowUp/互动/头像/背景）上裸灰字看不见 */
  .m_slow_hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m-s2);
    padding: var(--m-s3) var(--m-s4);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    background: var(--m-surface);
  }

  /* ============ 按钮 ============ */
  .m_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m-s2);
    min-height: var(--m-tap-lg);
    padding: 0 var(--m-s5);
    border: 1px solid transparent;
    border-radius: var(--m-r-sm);
    font-size: var(--m-fs-16);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    transition: background-color var(--m-d-fast) var(--m-ease), transform var(--m-d-fast) var(--m-ease);
  }
  .m_btn:active {
    transform: scale(0.98);
  }
  .m_btn:disabled,
  .m_btn[aria-disabled='true'] {
    opacity: 0.38;
    pointer-events: none;
  }
  .m_btn--primary {
    background: var(--m-green);
    color: var(--m-on-seal);
  }
  .m_btn--primary:active {
    background: var(--m-green-press);
  }
  .m_btn--purple {
    background: var(--m-purple);
    color: var(--m-on-seal);
  }
  .m_btn--purple:active {
    background: var(--m-purple-press);
  }
  .m_btn--ghost {
    background: var(--m-surface);
    border-color: var(--m-line);
    color: var(--m-ink);
  }
  .m_btn--ghost:active {
    background: var(--m-surface-2);
  }
  .m_btn--text {
    min-height: var(--m-tap);
    padding: 0 var(--m-s3);
    background: transparent;
    color: var(--m-green);
    font-size: var(--m-fs-16);
  }
  .m_btn--block {
    width: 100%;
  }
  .m_btn--sm {
    min-height: var(--m-tap);
    padding: 0 var(--m-s4);
    font-size: var(--m-fs-14);
  }

  /* ============ 表单 ============ */
  .m_field {
    display: flex;
    flex-direction: column;
    gap: var(--m-s1);
  }
  .m_label {
    font-size: var(--m-fs-14);
    font-weight: 600;
    line-height: var(--m-lh-14);
    color: var(--m-ink-2);
  }
  .m_input {
    width: 100%;
    height: var(--m-tap-lg);
    padding: 0 var(--m-s4);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-sm);
    background: var(--m-surface);
    color: var(--m-ink);
    font-size: var(--m-fs-16);
    line-height: normal;
  }
  .m_input::placeholder {
    color: var(--m-ink-3);
  }
  /* 浏览器自动填充会把输入框刷成淡蓝，破掉纸面配色；用内阴影盖回纸色（文字色同步） */
  .m_input:-webkit-autofill,
  .m_input:-webkit-autofill:hover,
  .m_input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--m-surface) inset;
    -webkit-text-fill-color: var(--m-ink);
  }
  .m_input:focus {
    border-color: var(--m-green);
    box-shadow: 0 0 0 3px var(--m-green-tint);
    outline: none;
  }
  .m_hint {
    font-size: var(--m-fs-12);
    line-height: var(--m-lh-12);
    color: var(--m-ink-3);
  }
  .m_error {
    display: flex;
    /* 图标与文字垂直居中对齐（2026-10-22 定为通用规则：警示行任何页面都必须居中，不得顶对齐错位） */
    align-items: center;
    gap: var(--m-s2);
    padding: var(--m-s3);
    border: 1px solid var(--m-danger);
    border-radius: var(--m-r-sm);
    background: var(--m-danger-tint);
    color: var(--m-danger);
    font-size: var(--m-fs-14);
    line-height: var(--m-lh-14);
  }

  /* ============ 卡片 / 标签 ============ */
  .m_card {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
  }
  .m_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--m-s3);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-pill);
    background: var(--m-surface);
    color: var(--m-ink-2);
    font-size: var(--m-fs-14);
    font-weight: 600;
    white-space: nowrap;
  }
  .m_chip--active {
    background: var(--m-green);
    border-color: var(--m-green);
    color: var(--m-on-seal);
  }

  /* ============ 骨架 ============ */
  .m_skeleton {
    background: var(--m-surface-2);
    border-radius: var(--m-r-md);
    animation: m_skeleton_pulse 1.2s ease-in-out infinite;
  }
  @keyframes m_skeleton_pulse {
    0%,
    100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  /* ============ 旧底部导航（kidCenterNav，仅仍在使用的页面） ============ */
  .my_bottom_nav {
    transform: none;
    padding-bottom: var(--m-safe-b);
    background: linear-gradient(to top, rgba(13, 95, 18, 0.92), rgba(13, 95, 18, 0));
    padding-top: 8px;
  }
  .my_bottom_nav ul li {
    margin: 0 20px;
  }

  /* App.vue 全局 flash 消息框桌面 min-width:640px，是 quiz/placement 奖励页 390 视口横向溢出的真正源头
     （2026-10-22 两个会话分别实测定位）；手机端收窄为留边全宽，!important 盖过运行时注入的组件样式 */
  .flash_box {
    min-width: 0 !important;
    width: calc(100vw - 30px) !important;
    max-width: 640px;
  }

  /* ============ 成功/奖励页家族手机版整体接管（2026-10-24 重做，通用铁律 §18.8） ============
     覆盖 read/listen 完成页（common/book_success*.vue）、interactivity 成功页
     （interactivity/quiz_success_page.vue）、assessment 两张成功页
     （foundation/assessment_success_page，由 catch-to-check 手机壳渲染）
     ——同源 .reward_text 黄面板家族。桌面是 30vw/58.1vw 窄面板 + 大字号 + 绝对定位层叠，
     手机一律改纵向流式满宽（左右 15px、上下贴边、元素间内部间距）。
     定级测试奖励页不在本家族内：2026-10-25 已拆为手机专用组件
     KidMobile/placementTest/foundation-success.m.vue（自带 ptr_* 样式，类名独立）。
     2026-10-24 用户拍板：提示条缩小不贴边；插画/丝带比例匀称；底部模块大小统一；
     手机端去掉 Listen 图标；喇叭钮进面板内 44 触达。 */

  /* book_success.vue 根节点是内联 width:30vw 的无类 div（桌面阅读窗 30% 宽），按样式特征精确命中破开。
     阅读态的书页容器几何由 read/listen 手机壳各自的 --finish 规则放开（§18.8 样式归手机壳） */
  div[style*='width: 30vw'] {
    width: 100% !important;
    height: auto !important;
    position: static !important;
  }

  /* 黄色奖励面板：占满内容列、高度随内容；卡内左右 15px、上下贴边（§18.4） */
  .reward_wrapper {
    width: 100%;
    height: auto;
  }
  .reward_text {
    position: relative;
    width: calc(100% - 30px) !important;
    max-width: 480px;
    height: auto !important;
    min-height: 0 !important;
    margin: 15px auto !important;
    top: 0 !important;
    border-radius: var(--m-r-lg);
    box-shadow: 0 4px 14px rgba(9, 66, 12, 0.2);
    padding: 0 15px 16px;
    box-sizing: border-box;
  }
  /* 顶部贺词/结果标题：居中换行（桌面 nowrap 一行 395px 会撑出横向滚动） */
  .top-text .top-text-container,
  .top-text-container-assessment {
    padding: var(--m-s4) 15px var(--m-s2);
    font-size: var(--m-fs-18);
    font-weight: 700;
    text-align: center;
    white-space: normal;
  }
  .top-text-title,
  .top-text-title-assessment {
    font-size: var(--m-fs-18);
    line-height: 1.5;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
  }
  /* 插画拼图（2026-10-24 调匀）：角色图为唯一主角（约 1/4 卡高封顶），底图点缀缩小 */
  .reward_box {
    margin-top: 12px !important;
  }
  .reward_box .top_image {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    transform: none !important;
  }
  .reward_box .top_image img:nth-of-type(1) {
    width: min(30vw, 110px) !important;
    max-width: min(30vw, 110px) !important;
    height: auto !important;
  }
  .reward_box .top_image img:nth-of-type(2) {
    height: min(21dvh, 175px) !important;
  }
  /* 得分丝带（2026-10-25 按素材实测重排）：素材 308×173 为上横幅+下三格结构，固定 150px 高；
     四行文字中心对准横条实测中心（横幅 14.2%、三格 42.5/67.6/91.3%），top = 中心 − 字号一半
     （旧值 15/48/68/82 是把中心当 top 用，文字整体偏出横条，2026-10-25 用户拍板修正） */
  .reward_text_shape {
    display: flex;
    justify-content: center;
    margin-top: 12px !important;
    position: static !important;
  }
  .reward_text_shape .shape_image {
    position: relative;
    padding-bottom: 0;
  }
  .reward_text_shape .shape_image img {
    /* 组件 scoped 样式运行时注入晚于本文件，同特异性桌面规则会反超——关键属性一律 !important */
    height: 150px !important;
    width: auto !important;
  }
  .reward_text_shape .shape_image p {
    color: #fff;
    line-height: 1;
  }
  .reward_text_shape .shape_image p:nth-of-type(1) {
    position: absolute !important;
    top: 7.5% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  .reward_text_shape .shape_image p:nth-of-type(2) {
    position: absolute !important;
    top: 38% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
  }
  .reward_text_shape .shape_image p:nth-of-type(3) {
    position: absolute !important;
    top: 60% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
  }
  .reward_text_shape .shape_image p:nth-of-type(4) {
    position: absolute !important;
    top: 86.5% !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    font-size: 14px !important;
  }
  /* 录音已发送角标：桌面 side_image 小旗 + 绝对定位白字，手机改为绿卡流式居中（2026-10-24） */
  .send-record {
    position: static !important;
    width: fit-content;
    margin: var(--m-s3) auto 0 !important;
    right: auto !important;
    bottom: auto !important;
  }
  .send-record .send-record-shape-image {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: var(--m-s1);
    padding: var(--m-s2) var(--m-s4);
    border-radius: var(--m-r-md);
    background: rgba(9, 66, 12, 0.55);
  }
  .send-record .send-record-shape-image img {
    display: none;
  }
  .send-record .send-record-shape-image p:nth-of-type(1),
  .send-record .send-record-shape-image p:nth-of-type(2) {
    position: static !important;
    left: auto !important;
    top: auto !important;
    font-size: var(--m-fs-14) !important;
    color: #fff !important;
  }
  /* 双倍奖分：桌面横幅图 + 绝对定位白字，手机改绿字流式居中（2026-10-24） */
  .double-reward {
    margin-top: var(--m-s3) !important;
    text-align: center;
  }
  .double-reward .double-reward-shape-image {
    position: static !important;
    display: inline-flex;
  }
  .double-reward .double-reward-shape-image img {
    display: none;
  }
  .double-reward .double-reward-shape-image p:nth-of-type(1) {
    position: static !important;
    top: auto !important;
    color: var(--m-green) !important;
    font-size: var(--m-fs-16) !important;
    font-weight: 700 !important;
  }
  .double-reward .double-reward-shape-image .double_number_plus,
  .double-reward .double-reward-shape-image .double_number,
  .double-reward .double-reward-shape-image .double_text {
    font-size: inherit !important;
    top: 0 !important;
    left: 0 !important;
  }
  /* 收藏星 / 听读答图标 / 回 Home：底部动作行统一 12px 间距、44 触达（2026-10-24 调匀） */
  .book_fav,
  .book_icon,
  .bottom_right_home {
    position: static !important;
    margin: var(--m-s3) auto 0 !important;
    text-align: center;
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 收藏心：本体 20px 视觉太小，放大到约 30px（结构是 border 拼合，只能靠 scale） */
  .book_fav .heart {
    transform: scale(1.2) rotate(-45deg);
  }
  /* 手机端去掉 Listen 图标（2026-10-24 用户拍板）：图标行只留 读 / 答。
     book_icon 与 icons 是同一元素（Vue 合并 class），且 wrapper 带内联 display:inline——须 !important */
  .book_icon.icons > div:first-child {
    display: none !important;
  }
  /* 听读答图标行：取消桌面 book_success 态 scale(1.3) 放大；44 触达、1px 描边、图标 22 统一
     （read/答 图标桌面内联 31/23px 需 !important 覆盖） */
  .book_icon.icons {
    transform: none !important;
    max-width: 100%;
    height: auto !important;
  }
  .book_icon.icons a {
    width: 44px !important;
    height: 44px !important;
    margin: 0 6px !important;
    border-width: 1px !important;
  }
  .book_icon.icons a i {
    font-size: 22px !important;
  }
  .bottom_right_home img {
    height: 44px;
    width: auto;
  }
  /* 结果白条（interactivity/assessment 的 top-text-assessment）：从绝对层叠改流式 */
  .top-text-assessment {
    position: static !important;
    width: calc(100% - 30px) !important;
    margin: var(--m-s3) auto 0 !important;
    padding: var(--m-s2) 15px;
    border-radius: var(--m-r-sm);
    box-sizing: border-box;
  }
  /* 喇叭按钮（重播鼓励词）：面板右上角内嵌 44 白圆墨字（桌面 right:-41% 挂面板外、50px 灰图标） */
  .audio_box_show {
    top: var(--m-s2) !important;
    right: var(--m-s2) !important;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: var(--m-r-pill);
    background: var(--m-surface);
    box-shadow: var(--m-shadow);
  }
  .audio_box_show i {
    font-size: 18px !important;
    color: var(--m-ink) !important;
  }
  .audio_box {
    position: static !important;
    display: flex;
    justify-content: center;
    margin-top: var(--m-s3);
  }
  .audio_box .ar-player {
    width: min(100%, 300px);
  }
  /* 「太快了」提示条：缩小居中、左右不贴边（2026-10-24 用户拍板） */
  .reward_top_text_box {
    position: static !important;
    width: 100%;
    margin: 0;
    padding-top: 12px;
  }
  .reward_top_text_box .reward_top_text {
    font-size: var(--m-fs-14) !important;
    line-height: var(--m-lh-14);
    font-weight: 600;
    width: fit-content !important;
    max-width: calc(100% - 8px);
    margin: 0 auto !important;
    padding: 6px 14px;
    border-radius: var(--m-r-pill);
  }
  /* 非 fast 态插画上边距（桌面 zeroMarginTop 5dvh + top:-5px 同步收平） */
  .reward_box.zeroMarginTop {
    margin-top: 12px !important;
    position: static !important;
    top: auto !important;
  }

  /* ============ 奖章/升级弹层手机化（2026-10-24，badge.vue + growUp.vue 同类名一套覆盖） ============
     桌面是 105px 蓝影大标题 + 320px 旋转斜切标签 + 19% 小按钮，手机全溢出；压到字号阶梯内。
     弹层里的 .audio_box_show 喇叭已由上方家族块统一为 44 白圆 */
  .badge-container .container {
    margin-top: 12dvh;
  }
  .badge-header h1 {
    font-size: 24px !important;
    letter-spacing: 4px !important;
    text-shadow: none !important;
  }
  .badge-section img {
    width: min(45vw, 160px) !important;
  }
  .badge-section p {
    width: fit-content !important;
    max-width: 80%;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    padding: 6px 14px !important;
    border-radius: 12px !important;
    transform: none !important;
  }
  .badge-footer .next {
    position: static !important;
    width: auto !important;
    min-width: 140px;
    height: auto !important;
    min-height: 48px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 16px !important;
    color: var(--m-ink) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m_btn,
  .m_skeleton {
    animation: none;
    transition-duration: 1ms;
  }
}

/* ============ 纤细关闭图标（2026-10-24 用户拍板，全 KidMobile 端统一） ============
   规则：关闭按钮的视觉方块缩到一半（22px），× 用极细字重；
   命中区仍保持 44（透明外扩）。各页已挂 .m_close 约定，共享组件的旧关闭类一并收口。 */
@media (max-width: 767px) {
  .m_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .m_close i,
  .m_close .fa,
  .m_close .my_new_close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--m-surface-2);
    color: var(--m-ink-2);
    font-size: 14px;
    font-weight: 200;
    line-height: 22px;
  }
}