/* ============================================================
 * 亚男编程 · 手机端适配（assets/css/mobile.css）
 * ------------------------------------------------------------
 * 原则：
 *   ① 只收紧留白与字号，不改 HTML 结构、不改交互
 *   ② 选择器精准到首屏 hero，避免误伤其它模块
 *   ③ 不复用 .card-premium（那是「打字能力提升中心」等卡片，
 *      首屏 hero 用的是内联渐变，没有语义 class）
 * ============================================================ */

html { -webkit-text-size-adjust: 100%; }
img, video, svg, iframe { max-width: 100%; }
img { height: auto; }

/* ============================================================
 *  手机（≤ 640px）
 * ============================================================ */
@media (max-width: 640px) {

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* ------------------------------------------------------------
     * 全站通用：收敛标题与卡片留白
     * 用户反馈「所有页面打开都很大一个、显示不全」→ 统一压缩
     * ------------------------------------------------------------ */
    h1 {
        font-size: 22px !important;
        line-height: 1.32 !important;
        letter-spacing: 0 !important;
    }
    h2 { font-size: 18px !important; line-height: 1.38 !important; }
    h3 { font-size: 15.5px !important; line-height: 1.42 !important; }

    /* 大卡片内边距：p-8 / p-10 / p-11 / p-12 及其 md: 变体统一收紧 */
    main div[class~="p-8"],
    main div[class~="p-10"],
    main div[class~="p-11"],
    main div[class~="p-12"],
    main div[class~="md:p-10"],
    main div[class~="md:p-11"],
    main div[class~="md:p-12"] {
        padding: 18px 15px !important;
    }

    /* 吉祥物：只缩小首屏，不要全局放大！
       （曾经给 .animate-float 统一 104px，结果把区块标题旁 48px 的小图标也撑大了） */
    #menu-screen > div:first-of-type .animate-float {
        width: 104px !important;
        max-width: 104px !important;
    }

    /* 装饰性大光晕在小屏隐藏（避免拥挤与溢出） */
    main [class*="blur-3xl"] { display: none !important; }

    /* 区块标题旁的吉祥物小图标：手机端隐藏，改用左侧色条（更干净）
       标题行特征：flex items-center gap-3 mb-6 */
    main .flex.items-center.gap-3.mb-6 > img {
        display: none !important;
    }
    main .flex.items-center.gap-3.mb-6 {
        border-left: 3px solid #FF6F00;
        padding-left: 10px;
        margin-bottom: 14px !important;
        min-height: 26px;
    }
    main .flex.items-center.gap-3.mb-6 > h2 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* ------------------------------------------------------------
     * 首页首屏 hero：#menu-screen 里的第一张深蓝卡片
     * ------------------------------------------------------------ */
    #menu-screen > div:first-of-type {
        margin-top: 4px !important;
        margin-bottom: 14px !important;
        border-radius: 20px !important;
    }

    #menu-screen > div:first-of-type > div[class~="p-8"],
    #menu-screen > div:first-of-type > div[class~="md:p-11"] {
        padding: 16px 14px !important;
        gap: 8px !important;
    }

    #menu-screen > div:first-of-type h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    #menu-screen > div:first-of-type p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #menu-screen > div:first-of-type .glass-pill {
        padding: 5px 10px !important;
        font-size: 11.5px !important;
        margin-bottom: 10px !important;
    }

    /* 顶部标签组：允许换行，完整显示不裁切 */
    #menu-screen > div:first-of-type .flex.flex-wrap {
        flex-wrap: wrap !important;
        overflow: visible !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #menu-screen > div:first-of-type .animate-float {
        width: 104px !important;
        max-width: 104px !important;
    }

    #menu-screen > div:first-of-type div[class~="w-60"],
    #menu-screen > div:first-of-type div[class~="w-52"] {
        width: 118px !important;
        height: 118px !important;
    }

    #menu-screen { padding: 10px 12px 82px !important; }

    /* ------------------------------------------------------------
     * 登录页：压缩左侧/顶部品牌区，让登录表单尽早出现在首屏
     * 手机是单列布局，品牌区排在表单前面，不压缩就看不到表单
     * ------------------------------------------------------------ */
    .auth-brand {
        padding: 16px 16px 18px !important;
    }
    /* 吉祥物和光晕在手机上隐藏（纯装饰，省出约 250px） */
    .auth-brand .auth-mascot-wrap { display: none !important; }
    .auth-brand h1 { margin-bottom: 6px !important; }
    .auth-brand .lead {
        font-size: 13px !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .auth-brand ul { margin: 4px 0 0 !important; }
    .auth-brand ul li {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 3px !important;
    }
    .auth-brand ul li i { font-size: 11px !important; }
    .auth-panel { padding: 18px 16px !important; }

    /* ------------------------------------------------------------
     * 课程介绍三栏（适合年龄 / 课程时长 / 学习内容）
     * 手机横排 3 个，每列做成一张浅色小卡片，视觉更整齐
     * ------------------------------------------------------------ */
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    /* 每列 → 浅色卡片 */
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] > div {
        background: linear-gradient(180deg, #F8FAFF, #F2F6FE);
        border: 1px solid #E8EFFA;
        border-radius: 14px;
        padding: 12px 8px 14px;
    }
    /* 圆形图标：80px → 44px，去掉双重阴影更清爽 */
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] > div > div:first-child {
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 8px !important;
    }
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] > div > div:first-child i {
        font-size: 18px !important;
    }
    /* 小标题 */
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] > div > h3 {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        margin-bottom: 5px !important;
        font-weight: 800 !important;
    }
    /* 说明文字：10.5px，最多 7 行（与另两列高度接近，减少卡片内空白） */
    main .grid[class~="md:grid-cols-3"][class~="gap-8"] > div > p {
        font-size: 10.5px !important;
        line-height: 1.6 !important;
        word-break: break-word;
        color: #6B7A90 !important;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0 !important;
    }

    /* 区块图标（如「打字能力提升中心」左侧小吉祥物）：56px → 44px */
    main img.sec-ico {
        width: 44px !important;
        height: 44px !important;
    }

    /* ------------------------------------------------------------
     * 触控目标：小于 44px 的可点元素撑到达标高度
     * 审计发现 34 个触控区不足 44px（最小 18×28），拇指很难点准
     * ------------------------------------------------------------ */
    main a[href]:not([class*="absolute"]),
    main button:not([class*="absolute"]) {
        min-height: 44px;
    }
    main a[href]:not([class*="absolute"]):not([class*="block"]) {
        display: inline-flex;
        align-items: center;
    }

    /* ------------------------------------------------------------
     * 底部留白：课程页等 body 为 min-h-screen（整页滚动），
     * 不加留白时最后一块内容会被固定 Tab 栏压住半截
     * （index.html 的 body 是 h-screen + overflow-hidden，不在此列）
     * ------------------------------------------------------------ */
    body.min-h-screen {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    /* ------------------------------------------------------------
     * 页面头部 hero（课程页 / 品牌页 / 关于 / FAQ / 题库共用）
     * 手机上原占屏近 90%：py-16(64px) + 吉祥物 256px + 两行按钮
     * 这里整体收紧，目标压到 40% 屏高以内
     * ------------------------------------------------------------ */
    header .container {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }
    header .grid { gap: 0 !important; }

    /* 隐藏 hero 吉祥物与装饰光晕（纯装饰，手机上占 256px+） */
    header img.animate-float { display: none !important; }
    header [class*="blur-2xl"],
    header [class*="blur-3xl"] { display: none !important; }

    /* 顶部信息标签 */
    header .container span[class*="rounded-full"] {
        font-size: 11px !important;
        padding: 4px 10px !important;
        margin-bottom: 10px !important;
    }

    /* 主标题 */
    header h1 { margin-bottom: 10px !important; }

    /* 说明文字限 3 行 */
    header p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 数据块（60+ / 4 阶段 / 1000+）收紧 */
    header .flex.flex-wrap {
        margin-bottom: 14px !important;
        gap: 8px !important;
    }
    header .flex.flex-wrap > div {
        padding: 10px 8px !important;
    }
    header .flex.flex-wrap > div > div:first-child {
        font-size: 19px !important;
        line-height: 1.2 !important;
    }
    header .flex.flex-wrap > div > div:last-child {
        font-size: 10px !important;
        margin-top: 2px !important;
    }

    /* 按钮：缩小内边距，两个按钮并排不换行 */
    header a[class*="rounded-full"] {
        padding: 9px 16px !important;
        font-size: 13.5px !important;
        min-height: 44px !important;
    }
    header .flex.flex-wrap a { flex: 0 1 auto; }

    /* ------------------------------------------------------------
     * 品牌简介 / 关于 / FAQ 等页面的首屏卡片（section > .hero-grid）
     * 原先同样占满整屏：py-10 + p-8 + 吉祥物 250px
     * ------------------------------------------------------------ */
    section:has(> div.hero-grid) {
        padding-top: 10px !important;
        padding-bottom: 12px !important;
    }
    section > div.hero-grid {
        border-radius: 20px !important;
    }
    section > div.hero-grid > div[class*="p-8"] {
        padding: 18px 14px !important;
        gap: 8px !important;
    }
    section > div.hero-grid h1 {
        font-size: 21px !important;
        line-height: 1.32 !important;
        margin-bottom: 8px !important;
    }
    section > div.hero-grid p {
        font-size: 13px !important;
        line-height: 1.62 !important;
        margin-bottom: 10px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    section > div.hero-grid .glass-pill {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }
    /* 吉祥物保留但缩小（品牌感 vs 占屏的平衡）
       注意：品牌/关于/FAQ/题库/软件页用的是 .mascot-float（w-48=192px），
       不是 .animate-float —— 两种都要覆盖 */
    section > div.hero-grid img.mascot-float,
    section > div.hero-grid img.animate-float {
        width: 92px !important;
        max-width: 92px !important;
        height: auto !important;
    }
    section > div.hero-grid [class*="blur-2xl"],
    section > div.hero-grid [class*="blur-3xl"] {
        display: none !important;
    }

    /* ------------------------------------------------------------
     * Scratch 课程页：标题强调词原是浅紫 #C4B5FD，
     * 压在橙红渐变上产生「色彩振动」（互补色同明度相邻会刺眼）
     * → 手机端换成同族暖亮色，与背景协调
     * ------------------------------------------------------------ */
    h1 span[class*="C4B5FD"] {
        color: #FFE4A3 !important;
    }
}

/* ============================================================
 *  手机端视觉系统（设计 token 落地）
 * ------------------------------------------------------------
 *  目标：把 9 种文字色 / 20 个字号碎值 / 6 种阴影
 *        收敛成一套统一的卡片语言与字阶
 *  只作用于 ≤640px，电脑端完全不受影响
 * ============================================================ */
@media (max-width: 640px) {

    :root {
        /* 文字阶梯（4 级） */
        --m-ink: #171A20;
        --m-body: #5A6474;
        --m-muted: #8A93A3;
        /* 结构与面 */
        --m-line: #E9EDF4;
        --m-line-soft: #F1F4F9;
        --m-surface: #FFFFFF;
        --m-bg: #F6F8FB;
        /* 品牌 */
        --m-brand: #153FC6;
        --m-brand-soft: #EDF2FF;
        /* 圆角与阴影 */
        --m-r-card: 16px;
        --m-r-sm: 12px;
        --m-shadow: 0 1px 3px rgba(16, 24, 40, .05);
    }

    /* ---------- 页面底色：冷白，比原来的蓝白更干净 ---------- */
    body { background-color: var(--m-bg) !important; }

    /* ---------- 大区块卡片：白底 + 1px 细边框 + 极轻阴影 ----------
       替代原本的 shadow-xl / shadow-lg 重投影，视觉重心回到内容 */
    .card-premium {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-card) !important;
        box-shadow: var(--m-shadow) !important;
        margin-bottom: 14px !important;
    }
    .card-premium .sec-top { display: none !important; }
    .card-premium .sec-body { padding: 14px !important; }

    /* ---------- 功能小卡片：改成紧凑列表式横排 ----------
       原来每张 430px 高（图标竖排 + 3 行描述 + 大按钮），三张占三屏；
       改为「图标 + 标题标签 + 小按钮」一行，单张约 86px */
    .dl-card {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-sm) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 12px 12px 14px !important;
        min-height: 72px !important;
        position: relative;
    }
    /* 图标 + 文字 + 按钮 强制单行 */
    .dl-card-head { flex: 1 1 auto !important; }
    .dl-card-head > .min-w-0 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 6px !important;
    }
    .dl-name { white-space: nowrap; }
    /* 顶部彩条改为左侧 4px 竖条，保留色彩识别又不占高度 */
    .dl-card-top {
        position: absolute !important;
        left: 0; top: 14px; bottom: 14px;
        width: 4px !important;
        height: auto !important;
        border-radius: 0 4px 4px 0 !important;
    }
    .dl-card-head {
        flex: 1 1 auto !important;
        min-width: 0;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .dl-ico {
        width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px;
        border-radius: 12px !important;
    }
    .dl-ico svg, .dl-ico i { width: 20px !important; height: 20px !important; font-size: 18px !important; }
    .dl-name { font-size: 15px !important; font-weight: 800 !important; color: var(--m-ink) !important; }
    .dl-tag { font-size: 10.5px !important; padding: 1px 7px !important; }
    /* 描述在列表式里隐藏（详情在各自的训练页里），保证一行放下 */
    .dl-desc { display: none !important; }
    /* 按钮改成小胶囊（原 span 有 width:100%，必须显式收窄，否则独占一行） */
    .dl-btn {
        flex: 0 0 auto;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 9px 13px !important;
        font-size: 12.5px !important;
        border-radius: 999px !important;
        white-space: nowrap;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 卡片网格：单列下间距 10px，节奏更紧 */
    main .grid[class*="gap-5"] { gap: 10px !important; }

    /* ---------- 区块标题：统一字阶，去掉花哨 ---------- */
    .sec-head { margin-bottom: 12px !important; align-items: flex-start !important; }
    .sec-title {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: var(--m-ink) !important;
        letter-spacing: -.01em;
    }
    .sec-desc {
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: var(--m-muted) !important;
        margin-top: 3px !important;
    }
    .sec-ico { width: 36px !important; height: 36px !important; }

    /* ---------- 文字色收敛：把散落的棕灰/深灰映射到 3 级 ---------- */
    .text-\[\#212121\] { color: var(--m-ink) !important; }
    .text-\[\#757575\] { color: var(--m-body) !important; }
    .text-textPrimary { color: var(--m-ink) !important; }
    .text-textSecondary { color: var(--m-body) !important; }

    /* ---------- 首屏 hero：克制的品牌渐变 + 大圆角 ---------- */
    #menu-screen > div:first-of-type {
        background: linear-gradient(155deg, #142E78 0%, #1D49CE 55%, #2F6BFF 100%) !important;
        border-radius: 20px !important;
        box-shadow: 0 12px 30px -22px rgba(20, 46, 120, .75) !important;
    }

    /* ---------- 通用二级卡片（bg-white + rounded）统一骨架 ---------- */
    main section.bg-white,
    main .bg-white.rounded-2xl,
    main .bg-white.rounded-xl {
        border: 1px solid var(--m-line) !important;
        border-radius: var(--m-r-card) !important;
        box-shadow: var(--m-shadow) !important;
    }

    /* ---------- 按钮统一高度与字重 ---------- */
    main a[class*="rounded-full"],
    main button[class*="rounded-full"] {
        font-weight: 700 !important;
        letter-spacing: .01em;
    }

    /* ---------- 底部 Tab 精修：图标更大、选中态更明确 ---------- */
    #yn-tabbar .yn-tab svg { width: 22px !important; height: 22px !important; }
    #yn-tabbar .yn-tab.on { color: var(--m-brand) !important; }
    #yn-tabbar .yn-tab.on span { font-weight: 800 !important; }

    /* ============================================================
     *  打字练习 · 手机端（index.html 内嵌打字界面）
     * ============================================================ */

    /* --- 顶部信息区压缩：给中间的文字输入区让出空间 --- */
    #wpm-display, #accuracy-display, #progress-display {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }
    #header-stats ~ div .uppercase.tracking-wider,
    .uppercase.tracking-wider {
        font-size: 9px !important;
        letter-spacing: .06em !important;
    }
    #current-mode-display, #timed-display, #difficulty-select {
        font-size: 11px !important;
        padding: 3px 9px !important;
    }
    .tgl-btn { padding: 6px 9px !important; font-size: 12px !important; min-height: 34px; }
    #strict-btn { font-size: 11.5px !important; }

    /* 工具行整体收紧（gap-2 → 6px，按钮组 gap 减半） */
    main .flex.gap-2 { gap: 6px !important; }
    main .flex.gap-5 { gap: 12px !important; }

    /* 输入区留白收紧，文字区获得更多高度 */
    #game-container { padding: 12px 12px !important; margin-bottom: 10px !important; }

    /* ---------- 虚拟键盘：自适应 + 按压反馈 ---------- */
    #keyboard-container { padding: 8px 6px 10px !important; border-radius: 14px !important; }
    #keyboard-container > .text-center { font-size: 10px !important; margin-bottom: 6px !important; }

    .keyboard-row {
        gap: 4px !important;
        margin-bottom: 5px !important;
    }
    .k-key {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: 44px !important;
        height: 40px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    .k-key.wide {
        flex: 1.5 1 0 !important;
        max-width: none !important;
        font-size: 12.5px !important;
    }
    .k-key.space {
        flex: 4 1 0 !important;
        max-width: none !important;
    }
    /* 按压反馈：手指按下时明显下沉 + 变色 */
    .k-key.pressed {
        transform: scale(.9) translateY(2px) !important;
        background: #DBEAFE !important;
        border-color: #93C5FD !important;
        box-shadow: none !important;
        color: #1D4ED8 !important;
    }
    /* Shift 锁存态 */
    .k-key.shift-on {
        background: #FEF3C7 !important;
        border-color: #F59E0B !important;
        color: #92400E !important;
    }
    /* 严格模式下按错键抖动提示 */
    .k-key.vk-err {
        background: #FEE2E2 !important;
        border-color: #F87171 !important;
        animation: vkShake .18s ease;
    }
    @keyframes vkShake {
        0%, 100% { transform: translateX(0); }
        33% { transform: translateX(-3px); }
        66% { transform: translateX(3px); }
    }
}

/* 小屏手机（≤360px）：键盘再紧凑一档 */
@media (max-width: 360px) {
    .k-key { height: 36px !important; font-size: 13px !important; }
    .keyboard-row { gap: 3px !important; }
}

/* ============================================================
 *  小屏（≤ 360px）
 * ============================================================ */
@media (max-width: 360px) {
    #menu-screen > div:first-of-type h1 { font-size: 20px !important; }
    #menu-screen > div:first-of-type .animate-float { width: 92px !important; }
}