/* ===== auto-extracted from index.html (v1.19.37) ===== */

:root{
  /* === z-index 层级契约（Q1 v1.19.56：消灭"新弹窗被旧弹窗压层"的隐式全局契约）===
     新增弹窗只需在本阶梯插一级，禁止在各自文件写死数字。
     高→低：verbar(99999) > toast(99999) > auth(9000) > 反馈悬浮钮(900) > feedback(250) >
            quest(240) > power(230) > user(220) > mask(200) > 图鉴类(2000/2100) > 公告·贴士(1200) > menu(100) > content(20)
     v1.19.59 #49/#50：toast 原 99 低于所有 modal-mask(200)，导致轻提示被弹窗压在背后。提至 260。
     v1.19.68 修正：modal-z.js 上线后把 .modal-mask 运行时抬到 10000+（上限 99998），toast(260) 又被压回底层；提至 99999 浮于所有 modal 之上。 */
  --z-verbar: 99999;
  --z-modal-feedback: 250;   /* 反馈弹窗：须盖过签到/档案/实力卡 */
  --z-modal-quest: 240;      /* 签到/任务/成就弹窗 */
  --z-modal-power: 230;      /* 实力卡片（从档案打开） */
  --z-modal-user: 220;       /* 个人档案 */
  --z-modal-mask: 200;       /* 通用遮罩 */
  --z-menu: 100;             /* ☰/用户下拉菜单 */
  --z-toast: 99999;           /* 轻提示：须浮于所有 modal(≤99998)之上（v1.19.68：modal-z 上线后 modal 被抬到 10000+，toast 必须跟进，否则被压住） */
  --z-content: 20;           /* 内容区吸顶头 */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* v1.10.23 App Shell：整页不再滚动，每屏占满一屏、超出内容在屏内滚动（消除底部留白 / 整页下滚） */
  html, body { overflow: hidden; height: 100%; }
  body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: linear-gradient(160deg, #7ec8ff 0%, #a5e3ff 45%, #c9f2c9 100%);
    min-height: 100vh; min-height: 100dvh; display: flex; padding: 12px; box-sizing: border-box;
  }
  #app {
    width: 100%; max-width: 420px; background: rgba(255,255,255,0.92);
    border-radius: 22px; padding: 14px 12px 12px; box-shadow: 0 12px 40px rgba(30,90,160,0.25);
    position: relative; margin: auto;
    display: flex; flex-direction: column;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);   /* 跟随可视区（收起/键盘），矮屏也能在屏内滚动够到输入框 */
    min-height: 0; overflow: hidden;
  }
  /* 每屏填充 #app 剩余高度，超出内容在屏内滚动（"需要滚动就内嵌"） */
  .screen { display: none; }
  .screen.active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* 内容稀少的稀疏屏：垂直居中，消除底部大段留白 */
  #screen-home.active, #screen-result.active, #screen-review.active { justify-content: center; }
  /* v1.10.1 品牌闪屏：最先渲染「搞词 Get Words」，游戏就绪后淡出 */
  #splash {
    position: fixed; inset: 0; z-index: var(--z-verbar);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #5aa7ff 0%, #7ec8ff 45%, #a8e6a0 100%);
    transition: opacity 0.45s ease, visibility 0.45s ease;
  }
  #splash.sp-hide { opacity: 0; visibility: hidden; pointer-events: none; }
  #splash .sp-logo { display: flex; align-items: center; justify-content: center; animation: sp-bounce 1.6s ease-in-out infinite; }
  #splash .sp-logo svg { width: 120px; height: 120px; filter: drop-shadow(0 6px 18px rgba(22,16,79,.45)); }
  #splash .sp-name {
    margin-top: 14px; font-size: 30px; font-weight: 900; color: #fff;
    letter-spacing: 6px; text-shadow: 0 3px 12px rgba(20,80,160,0.35);
  }
  #splash .sp-en {
    margin-top: 6px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.92);
    letter-spacing: 4px;
  }
  #splash .sp-slogan { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,0.8); letter-spacing: 2px; }
  #splash .sp-bar { margin-top: 22px; width: 120px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.3); overflow: hidden; }
  #splash .sp-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: #fff; animation: sp-slide 1.1s ease-in-out infinite; }
  @keyframes sp-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  @keyframes sp-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
  h1 { font-size: 24px; color: #1a5fb4; text-align: center; letter-spacing: 2px; }
  .sub { text-align: center; color: #5b8ac9; font-size: 13px; margin-top: 3px; }
  .topbar {
    position: relative; z-index: var(--z-content);
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-size: 13px; color: #444;
  }
  .topbar .score { background: #fff3cd; padding: 4px 10px; border-radius: 20px; font-weight: 700; color: #8a6d1a; }
  .topbar .lv { background: #e8f4ff; padding: 4px 10px; border-radius: 20px; cursor: pointer; }
  .tb-left { display: flex; gap: 8px; align-items: center; }
  .tb-right { display: flex; align-items: center; gap: 8px; }
  .menu-btn { border: none; background: #eef3f9; color: #1a5fb4; font-weight: 800; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 13px; }
  .menu-btn:hover { background: #dce8f5; }
  .topbar-menu { position: absolute; top: 44px; left: 0; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.13); padding: 12px; min-width: 180px; z-index: var(--z-menu); display: none; flex-direction: column; gap: 8px; max-height: 80vh; overflow-y: auto; }  /* v1.18.20 #38：菜单项多时加滚动条（横屏/小屏按钮可选中） */
  .topbar-menu .menu-info { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #eef3f9; }
  .topbar-menu .menu-info .lv, .topbar-menu .menu-info .score { display: inline-flex; width: fit-content; }
  .topbar-menu .menu-info .lv-row { display: inline-flex; align-items: center; width: fit-content; }
  .topbar-menu .menu-info .lv-info-btn { border: none; background: none; color: #4a9df8; font-size: 15px; line-height: 1; padding: 0 2px; margin-left: 2px; cursor: pointer; font-weight: 800; transition: color .15s; }
  .topbar-menu .menu-info .lv-info-btn:hover { color: #1a5fb4; }
  .topbar-menu .menu-info .lvbar, .lv-row .lvbar { width: 128px; height: 8px; border-radius: 6px; background: #e6eef8; overflow: hidden; margin-top: 2px; }
  .lvbar > .lvbar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2e82e0, #7ac4ff); transition: width .4s ease; }
  .topbar-menu .menu-info .lv-title { font-size: 12px; color: #7a5a1a; font-weight: 700; }
  #menu-lv-bar { width: 128px; }
  .topbar-menu .menu-items { display: flex; flex-direction: column; gap: 6px; }
  .menu-item { border: none; background: #f7faff; color: #1a5fb4; font-weight: 700; padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: left; font-size: 14px; }
  .menu-item:hover { background: #eef3f9; }
  /* v1.10.11：菜单分组标签 / 设置折叠三级 / 分隔线 */
  .menu-group-label { font-size: 11px; font-weight: 800; color: #9db3cc; padding: 2px 4px 0; letter-spacing: .3px; }
  .menu-collapse { display: flex; align-items: center; justify-content: space-between; }
  .menu-collapse .mi-caret { font-size: 11px; color: #9db3cc; transition: transform .18s; }
  .menu-collapse.open .mi-caret { transform: rotate(180deg); }
  .menu-sub { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 2px 10px; border-left: 2px solid #e4edf7; margin-left: 4px; }
  .menu-sub .menu-item { font-size: 13px; padding: 7px 12px; background: #fbfcff; }
  .menu-sub .menu-item:hover { background: #f2f6fb; }
  .menu-sep { border-top: 1px solid #e9eef5; margin: 4px 0 2px; }
  .user-menu { position: absolute; top: 44px; right: 0; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.13); padding: 8px; min-width: 150px; z-index: var(--z-menu); display: none; flex-direction: column; gap: 4px; }
  .user-menu .um-item { padding: 8px 12px; font-size: 13px; color: #444; border-radius: 10px; cursor: pointer; }
  .user-menu .um-item:hover { background: #f7faff; }
  .user-menu .um-uid { font-size: 11px; color: #6b7c93; background: #eef3f9; letter-spacing: 0.3px; font-weight: 600; word-break: break-all; }
  .user-menu .um-logout { color: #b2571e; }
  .shop-btn { border: none; background: linear-gradient(135deg,#ffd76a,#ffb02e); color: #6a3d00;
    font-weight: 800; padding: 6px 12px; border-radius: 20px; cursor: pointer; font-size: 14px; box-shadow: 0 2px 6px rgba(255,176,46,.4); }
  .shop-btn:hover { filter: brightness(1.05); }
  .user-area { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
  .user-area .u-btn { background: #e8f4ff; color: #1a5fb4; padding: 4px 12px; border-radius: 20px; font-weight: 700; cursor: pointer; }
  /* v1.10.1 双按钮：注册为主行动突出，登录为次级 */
  .user-area .u-btn-login { background: #e8f4ff; color: #1a5fb4; }
  .user-area .u-btn-reg { background: #1a5fb4; color: #fff; }
  .user-area .u-btn:hover { filter: brightness(1.08); }
  .user-area .u-avatar { width: 28px; height: 28px; border-radius: 50%; background: #1a5fb4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; }
  .user-area .u-name { font-weight: 700; color: #1a5fb4; cursor: pointer; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .u-caret { font-size: 10px; color: #1a5fb4; margin-left: 2px; }
  .user-area .u-logout { color: #b2571e; cursor: pointer; font-size: 12px; }
  /* v1.5.0 专属 UID：点击复制，方便同学之间互加好友 */
  .user-area .u-uid {
    font-size: 11px; color: #6b7c93; background: #eef3f9; border-radius: 10px;
    padding: 2px 7px; cursor: pointer; letter-spacing: 0.3px; font-weight: 600;
  }
  .user-area .u-uid:active { background: #dce8f5; }
  /* v1.8.2 管理员标识 */
  .user-area .u-admin {
    font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#f0a020,#e0463c);
    border-radius: 10px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(224,70,60,.35);
  }
  .btn {
    display: block; width: 100%; padding: 11px; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 8px;
    background: #ffb02e; color: #5a3a00; box-shadow: 0 4px 0 #d98d10; transition: all .12s;
  }
  .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d98d10; }
  .btn.green { background: #43c97d; color: #fff; box-shadow: 0 4px 0 #2da55f; }
  .btn.gray { background: #cfd8e0; color: #5a6a78; box-shadow: 0 4px 0 #a8b4bf; }
  .btn.blue { background: #4a9df8; color: #fff; box-shadow: 0 4px 0 #2f7ad0; }
  .btn.small { padding: 8px; font-size: 14px; }
  .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
  /* v1.10.6：.footnote 样式随首页灰色小字移除而删除 */
  /* v1.18.20 #远哥：统一页面导航——每个页面「返回上一级（来源=home 时隐藏）+ 返回首页」按钮组 */
  .nav-row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 4px; }
  .nav-row .btn { flex: 0 0 auto; margin-top: 0; }
  .nav-row .btn[data-nav="home"] { background: #e8f4ff; color: #1a5fb4; box-shadow: 0 4px 0 #b8d8f2; }
  .nav-row .btn[data-nav="up"] { background: #eef2f7; color: #5b6b7b; box-shadow: 0 4px 0 #ccd5df; }
  /* v1.19.19 #远哥：顶部紧凑导航条——返回/返回首页改为页面上端小按钮（sticky 吸顶，长列表也不丢） */
  .top-nav {
    position: sticky; top: 0; z-index: 6;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: 0 0 10px; padding: 8px 10px;
    background: #f5f9fd; border: 1px solid #e4edf6; border-radius: 14px;
  }
  .top-nav .btn { width: auto; flex: 0 0 auto; margin-top: 0; padding: 7px 14px; font-size: 13px; border-radius: 999px; box-shadow: 0 2px 0 rgba(20,58,102,.12); }
  .top-nav .btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(20,58,102,.12); }
  .top-nav .btn[data-nav="home"], .top-nav .btn.home { background: #e8f4ff; color: #1a5fb4; box-shadow: 0 2px 0 #b8d8f2; }
  .top-nav .btn[data-nav="up"], .top-nav .btn.up { background: #eef2f7; color: #5b6b7b; box-shadow: 0 2px 0 #ccd5df; }
  .top-nav .spacer { flex: 1 1 auto; }

  /* 年级选择 */
  #grade-hero { text-align: center; padding: 10px 0 4px; }
  #grade-hero .hero-icon { font-size: 50px; }
  .grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .grade-cell {
    padding: 13px 10px; border-radius: 16px; background: #f4f9ff; border: 2px solid #d8e5f2;
    text-align: center; cursor: pointer; font-size: 16px; font-weight: 800; color: #1a5fb4; transition: all .1s;
  }
  .grade-cell:active { background: #eaf4ff; transform: scale(.97); }
  .grade-cell.selected { border-color: #4a9df8; background: #e8f4ff; box-shadow: 0 0 0 3px rgba(74,157,248,0.18); }

  /* v1.10：向导步骤指示器 + 底栏 */
  .wizard-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; margin: 8px 0 3px; font-size: 12px; }
  .wizard-steps .step { color: #9db3cc; font-weight: 700; padding: 3px 6px; border-radius: 10px; }
  .wizard-steps .step.active { color: #1a5fb4; background: #e8f4ff; }
  .wizard-steps .step.done { color: #2da55f; }
  .wizard-steps .step-sep { color: #c4d3e3; margin: 0 1px; }
  #grade-step-body { margin-top: 10px; }
  .wizard-nav { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
  .wizard-nav .btn { margin-top: 0; }

  /* 教材版本选择 */
  .ver-section { margin-top: 12px; }
  .ver-title { font-size: 14px; font-weight: 800; color: #26456e; text-align: center; }
  .ver-sub { font-size: 11px; color: #9db3cc; text-align: center; margin-top: 2px; }
  /* v1.10.1 教材版本：下拉菜单样式（替换原平铺卡片 ver-grid/ver-cell） */
  .ver-ctx {
    font-size: 13px; font-weight: 700; color: #1a5fb4; text-align: center;
    margin: 4px 0 10px; padding: 7px; background: #eef6ff; border-radius: 12px;
  }
  .ver-field { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .ver-select {
    width: 100%; padding: 11px 12px; font-size: 15px; font-weight: 700; color: #1a5fb4;
    background: #f4f9ff; border: 2px solid #d8e5f2; border-radius: 14px; cursor: pointer;
    appearance: none; -webkit-appearance: none; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a5fb4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .ver-select:focus { border-color: #4a9df8; box-shadow: 0 0 0 3px rgba(74,157,248,0.18); }
  .ver-select-hint { font-size: 12px; color: #9db3cc; text-align: center; }

  /* 发音选择 */
  .voice-section { margin-top: 12px; }
  .voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .voice-cell {
    position: relative; padding: 12px 10px; border-radius: 16px; background: #f4f9ff;
    border: 2px solid #d8e5f2; text-align: center; cursor: pointer; transition: all .1s;
  }
  .voice-cell:active { background: #eaf4ff; transform: scale(.97); }
  .voice-cell .vc-name { font-size: 15px; font-weight: 800; color: #1a5fb4; }
  .voice-cell .vc-tag { font-size: 11px; color: #7a94b5; margin-top: 3px; }
  .voice-cell.selected { border-color: #a06bd9; background: #f5efff; box-shadow: 0 0 0 3px rgba(160,107,217,0.18); }
  .voice-cell.selected .vc-check { display: block; }
  .voice-cell .vc-check {
    display: none; position: absolute; top: -9px; right: -9px; width: 22px; height: 22px;
    background: #a06bd9; color: #fff; border-radius: 50%; font-size: 13px; line-height: 22px;
    font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }

  /* 题面信息行：音标 + 发音按钮 */
  .q-extra { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; min-height: 24px; }
  .q-extra .ph { font-size: 14px; color: #7a94b5; font-weight: 600; }
  .speak-btn {
    border: none; background: #e8f4ff; color: #2f7ad0; border-radius: 12px;
    padding: 4px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .speak-btn:active { background: #d4e9ff; }

  /* 音节展示：不同音节不同颜色，· 分隔；v1.4.12 音标也按音节分色显示在字母下方 */
  .syl-display {
    display: flex; justify-content: center; align-items: flex-start; gap: 4px;
    margin-top: 8px; min-height: 52px; flex-wrap: wrap;
  }
  .syl-part {
    font-size: 30px; font-weight: 900; letter-spacing: 1px;
    display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05;
  }
  .syl-ph { font-size: 12px; font-weight: 600; opacity: 0.9; margin-top: 2px; white-space: nowrap; }
  .syl-dot { font-size: 22px; color: #c3d4e6; font-weight: 900; padding-top: 2px; }
  /* 音标行内的音节分隔点（比音节行的点更小更淡，不抢视觉） */
  .ph-sep { color: #c3d4e6; font-weight: 700; margin: 0 2px; }

  /* 拦路虎错题本 */
  .tiger-head { text-align: center; margin-bottom: 2px; }
  .tiger-head .tiger-count { font-size: 13px; color: #e0821e; font-weight: 800; margin-top: 2px; }
  .tiger-item {
    display: flex; align-items: center; gap: 10px; background: #fff8f0;
    border: 2px solid #ffe0b8; border-radius: 16px; padding: 11px 12px; margin-top: 8px;
  }
  .tiger-item .t-word { font-size: 17px; font-weight: 900; color: #b2571e; min-width: 90px; }
  .tiger-item .t-ph { font-size: 12px; color: #c07a3a; }
  .tiger-item .t-cn { font-size: 12px; color: #8a5a2a; margin-top: 2px; }
  .tiger-item .t-count { font-size: 11px; color: #e0821e; margin-top: 2px; font-weight: 700; }
  .tiger-item .t-actions { margin-left: auto; display: flex; flex-direction: column; gap: 5px; }
  .tiger-item .t-actions .btn { margin-top: 0; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .tiger-item.tamed { background: #f2fbf5; border-color: #bfe8d0; }
  .tiger-item.tamed .t-word { color: #2da55f; }
  .tiger-item.tamed .t-count { color: #43a06b; }
  .tiger-item.tamed .t-ph { color: #6aa58a; }
  .tiger-item.tamed .t-cn { color: #4d7a63; }
  .tiger-progress { margin-top: 3px; }
  .tiger-progress .tp-bar { display: flex; gap: 3px; margin-top: 2px; }
  .tiger-progress .tp-dot { width: 13px; height: 7px; border-radius: 4px; background: #ffe0b8; }
  .tiger-progress .tp-dot.on { background: #43c97d; }
  .tiger-progress .tp-label { font-size: 11px; color: #c07a3a; font-weight: 700; }
  .tiger-progress.tamed .tp-label { color: #2da55f; }
  .tiger-sec-title { font-size: 14px; font-weight: 800; color: #26456e; margin: 12px 0 2px; display: flex; align-items: center; gap: 6px; }
  .tiger-sec-note { font-size: 11px; color: #9db3cc; }
  .tiger-empty {
    text-align: center; padding: 32px 10px; color: #9db3cc; font-size: 14px; line-height: 1.8;
  }
  .tiger-empty .big { font-size: 52px; display: block; margin-bottom: 6px; }

  /* v1.16.9 错题本（学习风 UI，与拦路虎共用 S.wrongWords 词库但界面全新：蓝绿学习调） */
  .wb-head { text-align: center; margin-bottom: 2px; }
  .wb-head .wb-total { font-size: 13px; color: #1a8a4f; font-weight: 800; margin-top: 2px; }
  .wb-item {
    display: flex; align-items: center; gap: 8px;
    background: #f4fbf7; border: 1.5px solid #cdeeda; border-radius: 14px;
    padding: 10px 12px; margin-top: 8px;
  }
  .wb-item .wb-main { min-width: 0; flex: 1; }
  .wb-item .wb-word { font-size: 17px; font-weight: 900; color: #17613c; }
  .wb-item .wb-syl { font-size: 12px; color: #43a06b; }
  .wb-item .wb-meta { font-size: 12px; color: #6aa58a; }
  .wb-item .wb-cn { font-size: 12px; color: #4d7a63; margin-top: 2px; }
  .wb-item .wb-count { font-size: 11px; color: #d9693a; margin-top: 2px; font-weight: 700; }
  .wb-item .wb-actions { display: flex; flex-direction: column; gap: 5px; }
  .wb-item .wb-actions .btn { margin-top: 0; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .wb-item.done { background: #eef7f2; border-color: #bfe8d0; }
  .wb-item.done .wb-word { color: #2da55f; }
  .wb-item.done .wb-count { color: #43a06b; }
  .wb-progress { margin-top: 3px; }
  .wb-progress .wb-label { font-size: 11px; color: #43a06b; font-weight: 700; }
  .wb-progress .wb-bar { display: flex; gap: 3px; margin-top: 2px; }
  .wb-progress .wb-dot { width: 13px; height: 7px; border-radius: 4px; background: #d9efe2; }
  .wb-progress .wb-dot.on { background: #43c97d; }
  .wb-progress.done .wb-label { color: #2da55f; }
  .wb-sec-title { font-size: 14px; font-weight: 800; color: #1a5fb4; margin: 12px 0 2px; display: flex; align-items: center; gap: 6px; }
  .wb-sec-note { font-size: 11px; color: #9db3cc; }
  .wb-empty { text-align: center; padding: 32px 10px; color: #9db3cc; font-size: 14px; line-height: 1.8; }
  .wb-empty .big { font-size: 52px; display: block; margin-bottom: 6px; }

  /* 拼写区（拼写组合 / 全拼 / 听写） */
  .spell-display { display: flex; justify-content: center; align-items: flex-end; gap: 5px; margin: 6px 0 2px; min-height: 40px; flex-wrap: wrap; }
  .spell-slot {
    width: 32px; height: 48px; line-height: 46px; text-align: center; font-size: 30px; font-weight: 800;
    color: #2c4a75; background: transparent; border: none; border-bottom: 3px solid #a9c3e0;
    border-radius: 0;
  }
  .spell-slot.filled { color: #26456e; border-bottom-color: #4a9df8; }
  /* 音标段匹配（phmatch）：保留圆角块风格，与字母下划线槽区分 */
  .spell-slot.ph-slot {
    width: auto; min-width: 34px; padding: 0 8px; height: 40px; line-height: 38px;
    background: #f0f6fc; border: 2px solid #d8e5f2; border-radius: 10px;
  }
  .spell-meaning {
    display: block; text-align: center; font-size: 15px; font-weight: 700; color: #26456e;
    padding: 4px 0 8px; line-height: 1.5;
  }
  .letter-blocks { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .letter-block {
    width: 42px; height: 46px; line-height: 46px; text-align: center; font-size: 22px; font-weight: 800;
    color: #fff; background: linear-gradient(135deg,#4a9df8,#2f7ad0); border-radius: 10px; cursor: pointer;
    box-shadow: 0 3px 0 #1f5fae; user-select: none;
  }
  .letter-block:active { transform: translateY(2px); box-shadow: 0 1px 0 #1f5fae; }
  .letter-block.used { opacity: .25; pointer-events: none; }
  .kb { margin-top: 12px; }
  .kb-row { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
  .kb-row.r2 { padding: 0 3.5%; }   /* 第二行左右缩进，模拟真实键盘错位 */
  .kb-row.r3 { padding: 0 12.5%; }  /* 第三行再缩进 */
  .kb-key {
    flex: 1; max-width: 54px; height: 54px; line-height: 54px; text-align: center;
    font-size: 22px; font-weight: 700; background: #eef4fb; border: 1px solid #cfdce8;
    border-radius: 10px; cursor: pointer; color: #26456e; user-select: none;
  }
  .kb-key:active { background: #d8e9fb; }
  .kb-key.wide { flex: 2.2; max-width: none; font-size: 15px; background: #ffb02e; color: #5a3a00; border-color: #e0a33c; }
  .kb-key.danger { flex: 1.4; max-width: none; background: #ffe3e0; color: #b23a2e; border-color: #ffb3aa; }
  .spell-actions { display: flex; gap: 8px; margin-top: 8px; }
  .spell-actions .btn { flex: 1; margin-top: 0; }

  /* 首页（v1.10.6 重设计：logo 徽章 + 中英标题 + 三主按钮） */
  #home-hero { text-align: center; padding: 2px 0 2px; }
  .home-logo {
    width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #3d3a72, #1e1c4a 55%, #0a0920);
    box-shadow: 0 8px 24px rgba(61,58,114,.45), 0 0 0 3px rgba(201,169,110,.55), 0 0 34px rgba(201,169,110,.30), inset 0 2px 0 rgba(255,255,255,.30);
    display: flex; align-items: center; justify-content: center;
    animation: logo-pulse 3s ease-in-out infinite;
  }
  @keyframes logo-pulse { 0%,100% { box-shadow: 0 8px 24px rgba(61,58,114,.45), 0 0 0 3px rgba(201,169,110,.55), 0 0 22px rgba(201,169,110,.25), inset 0 2px 0 rgba(255,255,255,.30); } 50% { box-shadow: 0 8px 24px rgba(61,58,114,.45), 0 0 0 3px rgba(201,169,110,.55), 0 0 44px rgba(201,169,110,.45), inset 0 2px 0 rgba(255,255,255,.30); } }
  .home-logo .hl-inner { display: block; width: 78px; height: 78px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
  #home-hero h1 { margin-top: 0; }
  .home-en {
    font-size: 12px; font-weight: 800; letter-spacing: 5px; color: #5b8ac9;
    margin-top: 2px; margin-bottom: 2px;
  }
  /* v1.20.25 定位收敛：首页主卖点副标 */
  .home-slogan {
    font-size: 13px; font-weight: 700; color: #8a6d1f; margin-top: 4px;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
  }
  /* 三主按钮：开始战斗 / 练功房 / 拦路虎 同级大按钮（隐藏入口保留此样式，恢复时可用） */
  .home-main-btn { width: 100%; font-size: 16px; font-weight: 800; padding: 12px 0; margin-top: 8px; }
  .home-main-btn:first-of-type { margin-top: 10px; }
  /* v1.18.11 首页重构：自适应卡片网格（主卡 + 快捷卡），图标大小随卡片/视口缩放 */
  .home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
  .home-grid.quick { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
  /* v1.20.8 专项轨道分区标题 */
  .home-section-title { margin-top: 16px; font-size: 13px; font-weight: 800; color: #5b3df5; letter-spacing: .5px; }
  .home-card.qk.track { background: linear-gradient(160deg, #f3efff, #e9e2ff); border-color: #c9b8ff; }
  /* v1.20.9 升学冲刺模块页 */
  .examboost-intro { font-size: 13px; color: #6b7280; margin: 8px 2px 12px; }
  .examboost-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .eb-module-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border: 1px solid #d9d2ff; border-radius: 14px; background: #fff; cursor: pointer; transition: .15s; }
  .eb-module-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(91,61,245,.15); }
  .eb-module-card { /* v1.20.25 摘除考研占位，placeholder 变体样式一并移除 */ }
  .eb-mod-ic { font-size: 30px; }
  .eb-mod-tt { font-size: 16px; font-weight: 800; color: #2a2350; }
  .eb-mod-desc { font-size: 11px; color: #8a97a5; text-align: center; }
  .eb-tabs { display: flex; gap: 8px; margin: 10px 0; }
  .eb-tab { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 10px; background: #f7f7fb; font-weight: 700; color: #6b7280; cursor: pointer; }
  .eb-tab.active { background: #5b3df5; color: #fff; border-color: #5b3df5; }
  .eb-vocab-head { font-size: 13px; color: #6b7280; margin-bottom: 6px; }
  .eb-progress { height: 8px; background: #eceaff; border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
  .eb-progress-fill { height: 100%; width: 0; background: #5b3df5; transition: width .3s; }
  .eb-vocab-card, .eb-paper-item { background: #fff; border: 1px solid #e6e2f5; border-radius: 14px; padding: 16px; }
  .eb-q-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #5b3df5; background: #efeaff; padding: 2px 8px; border-radius: 8px; margin-bottom: 8px; }
  .eb-q-prompt { font-size: 17px; font-weight: 700; color: #2a2350; margin-bottom: 6px; }
  .eb-q-phon { font-size: 13px; color: #8a97a5; margin-bottom: 10px; }
  .eb-options { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
  .eb-opt { padding: 11px 14px; border: 1px solid #d9d2ff; border-radius: 10px; background: #faf9ff; cursor: pointer; font-size: 15px; text-align: left; }
  .eb-opt:hover { background: #efeaff; }
  .eb-opt.correct { background: #d6f5e3; border-color: #34c77b; color: #137a43; }
  .eb-opt.wrong { background: #ffe0e0; border-color: #ff6b6b; color: #c0392b; }
  .eb-feedback { margin-top: 10px; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
  .eb-feedback.ok { background: #e7f9ee; color: #137a43; }
  .eb-feedback.bad { background: #fdeaea; color: #c0392b; }
  .eb-feedback .eb-paper-note { font-weight: 400; font-size: 12px; margin-top: 4px; color: #6b7280; }
  .eb-vocab-actions { display: flex; gap: 10px; margin-top: 12px; }
  /* v1.20.25：eb-empty / eb-empty-sub 随考研占位屏移除 */
  .eb-summary { text-align: center; padding: 24px; }
  .eb-summary-tt { font-size: 18px; font-weight: 800; color: #5b3df5; margin-bottom: 10px; }
  .eb-summary-row { font-size: 15px; margin: 6px 0; }
  .eb-paper-tip { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
  .eb-paper-stem { font-size: 15px; color: #2a2350; margin-bottom: 10px; line-height: 1.6; }
  /* v1.20.15 词汇冲刺 8 模块：口语/拼写类 UI */
  .eb-speak-word { font-size: 30px; font-weight: 800; color: #5b3df5; text-align: center; margin: 6px 0; letter-spacing: 1px; }
  .eb-speak-actions { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
  .eb-spell-masked { font-size: 28px; font-weight: 800; color: #2a2350; text-align: center; margin: 10px 0; letter-spacing: 4px; }
  .eb-spell-input { min-height: 40px; font-size: 24px; font-weight: 800; color: #5b3df5; text-align: center; letter-spacing: 3px; border-bottom: 2px dashed #d9d2ff; padding-bottom: 4px; margin: 10px 0; }
  .eb-letters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
  .eb-letter { width: 42px; height: 42px; font-size: 20px; font-weight: 800; border: 1px solid #d9d2ff; border-radius: 10px; background: #faf9ff; cursor: pointer; }
  .eb-letter:hover { background: #efeaff; }
  .eb-letter.used { opacity: .35; pointer-events: none; }
  .eb-spell-text { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 18px; border: 1px solid #d9d2ff; border-radius: 10px; margin: 10px 0; text-align: center; text-transform: lowercase; }
  .eb-spell-text:focus { outline: none; border-color: #5b3df5; }
  /* v1.19.32 每日复习计划 */
  #screen-review-plan .rp-date { font-size: 12px; color: #8a97a5; margin-top: 2px; }
  #screen-review-plan .rp-summary { font-size: 13px; color: #5b7a9e; margin: 8px 0 10px; line-height: 1.6; }
  #screen-review-plan .rp-item { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
  #screen-review-plan .rp-item .rp-en { font-weight: 800; font-size: 15px; min-width: 86px; }
  #screen-review-plan .rp-item .rp-cn { color: #5b6b7b; font-size: 13px; flex: 1; }
  #screen-review-plan .rp-tag { font-size: 11px; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
  #screen-review-plan .rp-tag.wrong { background: #ffe9e6; color: #c0392b; }
  #screen-review-plan .rp-tag.refresh { background: #e7f0ff; color: #1a5fb4; }
  #screen-review-plan .rp-mast { font-size: 11px; color: #8a97a5; margin-top: 2px; }
  #screen-review-plan .rp-empty { text-align: center; color: #8a97a5; padding: 40px 12px; line-height: 1.8; }
  #screen-review-plan .rp-q { font-size: 20px; font-weight: 800; text-align: center; margin: 10px 0; }
  #screen-review-plan .rp-prog { text-align: center; font-size: 13px; color: #8a97a5; margin-bottom: 10px; }
  #screen-review-plan .rp-opt { display: block; width: 100%; text-align: left; padding: 11px 14px; margin: 7px 0; border-radius: 12px; border: 1px solid #e1e7ef; background: #fff; font-size: 15px; cursor: pointer; }
  #screen-review-plan .rp-opt.correct { background: #e8f9ef; border-color: #1d7a44; color: #1d7a44; }
  #screen-review-plan .rp-opt.wrong { background: #ffe3e0; border-color: #ff7b6e; color: #b23a2e; }
  #screen-review-plan .rp-fb { text-align: center; font-size: 14px; margin-top: 10px; min-height: 20px; }
  #screen-review-plan .rp-sum { text-align: center; padding: 14px; line-height: 1.9; }
  /* v1.19.16 每日阅读理解 */
  #screen-reading .rd-title { font-size: 18px; font-weight: 800; color: #1a6fb4; margin-bottom: 8px; }
  #screen-reading .rd-en { font-size: 16px; line-height: 1.9; color: #2b3a4d; background: #f6f9ff; border: 1px solid #e3ecf7; border-radius: 12px; padding: 12px 14px; }
  #screen-reading .rd-zh { font-size: 14px; line-height: 1.8; color: #5b6b7b; margin-top: 8px; }
  #screen-reading .rd-toggle { display: block; margin: 10px 0 0; background: none; border: 1px dashed #9bb6d6; color: #4a73a0; border-radius: 10px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
  #screen-reading .rd-prog { text-align: center; font-size: 13px; color: #8a97a5; margin-bottom: 10px; }
  #screen-reading .rd-q { font-size: 19px; font-weight: 800; text-align: center; margin: 10px 0; }
  #screen-reading .rd-opt { display: block; width: 100%; text-align: left; padding: 11px 14px; margin: 7px 0; border-radius: 12px; border: 1px solid #e1e7ef; background: #fff; font-size: 15px; cursor: pointer; }
  #screen-reading .rd-opt.correct { background: #e8f9ef; border-color: #1d7a44; color: #1d7a44; }
  #screen-reading .rd-opt.wrong { background: #ffe3e0; border-color: #ff7b6e; color: #b23a2e; }
  #screen-reading .rd-fb { text-align: center; font-size: 14px; margin-top: 10px; min-height: 20px; }
  #screen-reading .rd-sum { text-align: center; padding: 14px; line-height: 1.9; }
  .home-card {
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: linear-gradient(160deg, #ffffff, #f2f7ff);
    border: 1.5px solid #d8e6f5; border-radius: 16px;
    box-shadow: 0 4px 14px rgba(60,90,180,.10);
    padding: 14px 14px; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .home-card:active { transform: scale(.98); }
  .home-card.main { background: linear-gradient(160deg, #eafbf0, #dff3e6); border-color: #b9e3c8; }
  .home-card .hc-ic { font-size: clamp(26px, 6vw, 40px); line-height: 1; flex: none; }
  .home-card .hc-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .home-card .hc-tt b { font-size: clamp(14px, 3vw, 17px); font-weight: 900; color: #1c2f42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-card .hc-tt i { font-style: normal; font-size: clamp(10px, 2.4vw, 12px); color: #7a94b5; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-card .hc-tt i em { font-style: normal; color: #e11d48; font-weight: 900; }
  .home-card.qk { flex-direction: column; text-align: center; gap: 4px; padding: 12px 8px; background: linear-gradient(160deg, #fff, #f6f9ff); }
  .home-card.qk .hc-tt { align-items: center; }
  .home-card.qk .hc-tt b { font-size: clamp(12px, 2.6vw, 14px); }
  .progress-bar { background: #e6eef8; height: 10px; border-radius: 6px; overflow: hidden; margin: 10px 0 3px; }
  .progress-bar > div { height: 100%; background: linear-gradient(90deg,#ffb02e,#ff7b2e); border-radius: 6px; transition: width .4s; }
  .progress-tip { font-size: 11px; color: #7a94b5; text-align: center; margin-top: 3px; }

  /* 教材关卡选择 */
  .sem-head { text-align: center; margin-bottom: 2px; }
  .sem-head .sem-name { font-size: 19px; font-weight: 800; color: #1a5fb4; }
  .sem-divider { display: flex; align-items: center; gap: 10px; margin: 10px 0 3px; color: #7a94b5; font-size: 12px; font-weight: 700; }
  .sem-divider::before, .sem-divider::after { content: ""; flex: 1; height: 1px; background: #d8e5f2; }
  .stage-card {
    display: flex; align-items: center; gap: 10px; background: #f6fafe; border-radius: 16px;
    padding: 11px 12px; margin-top: 8px; border: 2px solid transparent; cursor: pointer;
    word-break: keep-all; overflow-wrap: break-word;
  }
  .stage-card .emoji { font-size: 34px; flex-shrink: 0; }
  .stage-card .name { font-weight: 700; font-size: 15px; color: #26456e; line-height: 1.25; }
  .stage-card .desc { font-size: 12px; color: #7a94b5; margin-top: 2px; line-height: 1.25; }
  .stage-card .state { margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; }
  .stage-card .state.done { color: #2da55f; }
  .stage-card .state.need-score { color: #d98d10; }
  .stage-card.locked { opacity: .6; cursor: not-allowed; }
  .stage-card.boss { border-color: #e5a24a; background: #fffaf0; }
  .stage-card.boss .name { color: #b05a13; }
  .btn.tiny { padding: 5px 9px; font-size: 12px; margin-top: 6px; display: inline-block; }

  /* 教材选择屏（v1.10.9：级联筛选框，替代平铺卡片） */
  .sem-form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
  .sem-field { display: flex; flex-direction: column; gap: 5px; }
  .sem-label { font-size: 13px; font-weight: 700; color: #5b6b7b; }
  .sem-static {
    padding: 11px 12px; font-size: 15px; font-weight: 700; color: #1a5fb4;
    background: #f4f9ff; border: 2px solid #d8e5f2; border-radius: 14px;
  }
  .sem-static-hint { font-size: 11px; color: #9db3cc; }
  .sem-preview { margin-top: 3px; }
  .sp-card {
    position: relative; padding: 13px; border-radius: 16px; background: #f4f9ff;
    border: 2px solid #d8e5f2; text-align: center;
  }
  .sp-card.current { border-color: #4a9df8; background: #e8f4ff; box-shadow: 0 0 0 3px rgba(74,157,248,0.18); }
  .sp-card.locked { opacity: .6; }
  .sp-card .sp-emoji { font-size: 32px; display: block; margin-bottom: 3px; }
  .sp-card .sp-name { font-size: 16px; font-weight: 800; color: #1a5fb4; }
  .sp-card.locked .sp-name { color: #8aa0b8; }
  .sp-card .sp-status { font-size: 12px; color: #7a94b5; margin-top: 4px; line-height: 1.5; }
  .sp-card .sp-badge {
    position: absolute; top: -8px; right: -8px; font-size: 10px; padding: 2px 7px;
    border-radius: 10px; background: #43c97d; color: #fff; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }
  .sp-actions { margin-top: 8px; }

  /* 下一册卡片 */
  .next-sem-card {
    background: linear-gradient(135deg,#fff3cd,#ffe9b8); border: 2px dashed #e0a33c;
    border-radius: 16px; padding: 12px; margin-top: 10px;
  }
  .next-sem-card .ns-title { font-weight: 800; color: #7a4d00; font-size: 15px; }
  .next-sem-card .ns-desc { font-size: 12px; color: #8a6d1a; margin-top: 3px; line-height: 1.5; }

  /* 战斗：整体一屏布局，战斗区压缩，答题区优先可见 */
  #screen-battle.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
  #battle-head { flex: 0 0 auto; padding: 4px 8px 2px; }
  #battle-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-top: 4px; gap: 6px; }
  .hp { display: flex; align-items: center; gap: 4px; background: #f0f6fc; padding: 4px 7px; border-radius: 12px; flex: 0 1 auto; min-width: 0; }
  .hp-player { flex: 1 1 0; justify-content: flex-start; }
  .hp-monster { flex: 1 1 0; justify-content: flex-end; }
  .hp-ico { width: 15px; height: 15px; flex: 0 0 15px; }
  .hp-bar { height: 7px; border-radius: 4px; background: rgba(90,110,140,.18); overflow: hidden; flex: 1 1 auto; min-width: 26px; max-width: 74px; }
  .hp-fill { height: 100%; width: 100%; background: #43c97d; border-radius: 4px; transition: width .35s ease; }
  .hp-monster .hp-fill { background: #ff8a5c; }
  .hp-num { font-size: 10px; font-weight: 700; color: #4a5a70; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
  #battle-sem { text-align: center; font-size: 11px; color: #2f7ad0; font-weight: 700; margin-bottom: 5px; }
  /* v1.10.15：战斗内子关卡进度（分批覆盖） */
  .battle-sublevel { margin: 4px auto 3px; max-width: 460px; }
  .battle-sublevel .sl-text { text-align: center; font-size: 11px; font-weight: 700; color: #1a5fb4; margin-bottom: 2px; }
  .battle-sublevel .sl-bar { height: 6px; background: #e3edf7; border-radius: 4px; overflow: hidden; }
  .battle-sublevel .sl-fill { height: 100%; width: 0; background: linear-gradient(90deg, #43c97d, #4a9df8); border-radius: 4px; transition: width .35s ease; }
  /* ===== v1.14.1 战斗屏重做：深色酷炫 + HUD 状态栏 + 大图描边发光 ===== */
  #battle-arena {
    position: relative; display: flex; flex-direction: column;
    margin-top: 2px; border-radius: 12px; overflow: hidden;
    min-height: 0; flex: 0 0 auto;
    background: linear-gradient(180deg, #0c1432 0%, #1a2350 40%, #2a1a4d 100%);
    box-shadow: 0 4px 18px rgba(0,0,0,.35), inset 0 0 30px rgba(100,120,255,.18);
    transition: background .5s ease;
    --hero-lunge-ms: 340ms; --hero-cast-ms: 440ms; --hero-slash-ms: 340ms;
    --monster-hit-ms: 400ms; --screen-shake-ms: 450ms;
  }
  /* 星空粒子背景（深色通用） */
  .battle-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.9), transparent 50%),
      radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,.7), transparent 50%),
      radial-gradient(1.5px 1.5px at 45% 22%, rgba(255,235,180,.8), transparent 50%),
      radial-gradient(1px 1px at 67% 14%, rgba(255,255,255,.85), transparent 50%),
      radial-gradient(1px 1px at 82% 6%, rgba(180,200,255,.7), transparent 50%),
      radial-gradient(1.5px 1.5px at 88% 24%, rgba(255,200,160,.75), transparent 50%),
      radial-gradient(1px 1px at 8% 38%, rgba(255,255,255,.5), transparent 50%),
      radial-gradient(1px 1px at 55% 36%, rgba(200,220,255,.6), transparent 50%),
      radial-gradient(1px 1px at 92% 40%, rgba(255,255,255,.6), transparent 50%);
  }
  /* 舞台地面（紫色霓虹带） */
  .battle-bg-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(120,90,220,0), rgba(160,120,255,.18) 60%, rgba(200,140,255,.32));
    border-top: 1px solid rgba(255,200,255,.18);
    box-shadow: 0 -8px 24px rgba(180,120,255,.35);
  }
  /* HUD 状态栏 */
  .battle-hud {
    position: relative; z-index: 5;
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 10px; height: 30px; flex: 0 0 auto;
    background: linear-gradient(90deg, rgba(40,30,80,.65), rgba(20,20,50,.5), rgba(40,30,80,.65));
    border-bottom: 1px solid rgba(180,160,255,.2);
  }
  .hud-left, .hud-right { flex: 1; display: flex; align-items: center; }
  .hud-right { justify-content: flex-end; }
  .hud-center { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
  .hud-round { color: #e8d5ff; font-size: 12px; font-weight: 700; text-shadow: 0 0 8px rgba(180,140,255,.6); }
  .hud-coin { color: #ffd766; font-size: 12px; font-weight: 800; text-shadow: 0 0 8px rgba(255,200,80,.55); }
  /* 计时胶囊居中（更深色更醒目） */
  #battle-timer {
    display: inline-flex; align-items: baseline; gap: 1px; padding: 3px 12px;
    background: linear-gradient(180deg, #1a2350, #0c1432);
    border: 1.5px solid #7F77DD; border-radius: 16px;
    color: #fff; font-weight: 900; box-shadow: 0 0 12px rgba(127,119,221,.55), inset 0 0 6px rgba(127,119,221,.3);
  }
  #battle-timer #battle-timer-text { font-size: 17px; min-width: 16px; text-align: center; color: #fff; }
  #battle-timer .timer-unit { font-size: 11px; color: #c8b8ff; margin-left: 1px; }
  #battle-timer.timer-warn { border-color: #ffba59; box-shadow: 0 0 14px rgba(255,186,89,.6); }
  #battle-timer.timer-warn #battle-timer-text { color: #ffe3a8; }
  #battle-timer.timer-low { border-color: #ff5b5b; background: linear-gradient(180deg,#3a1424,#1a0c14); box-shadow: 0 0 16px rgba(255,91,91,.7); animation: v14-timer-pulse .7s ease-in-out infinite; }
  #battle-timer.timer-low #battle-timer-text { color: #ff8a8a; }
  @keyframes v14-timer-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

  /* 战斗舞台（深色+对位大图） */
  .battle-stage {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    height: 200px; padding: 8px 10px 4px;
  }
  .arena-half { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
  .enemy-half, .hero-half { align-items: center; }
  /* 战斗分割线（中心紫光带） */
  .battle-stage::before {
    content: ""; position: absolute; left: 50%; top: 12%; bottom: 16%; transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(200,160,255,.5), transparent);
    box-shadow: 0 0 8px rgba(180,140,255,.4);
    z-index: 1;
  }
  .arena-char { text-align: center; width: 110px; z-index: 3; display: flex; flex-direction: column; align-items: center; position: relative; }
  /* 怪物/英雄大图（v1.14 放大 1.5×：默认 110px）+ 发光描边 */
  .arena-char .ch-emoji { display: block; width: 110px; height: 110px; line-height: 110px; font-size: 80px; }
  .arena-char .ch-emoji.mon-wrap,
  .arena-char .ch-emoji.hero-wrap { display: flex; align-items: center; justify-content: center; }
  /* v1.15 原神风圆形金边徽章 + 元素光晕 */
  .arena-char .ch-emoji.mon-wrap,
  .arena-char .ch-emoji.hero-wrap {
    border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 36%, #2a3566 0%, #0e1430 80%);
    border: 3px solid #ffd76a;
    box-shadow: 0 0 18px var(--med-glow, rgba(255,150,90,.6)), 0 0 0 1px rgba(255,215,120,.45), inset 0 0 22px rgba(0,0,0,.55);
  }
  .arena-char .ch-emoji.mon-wrap img,
  .arena-char .ch-emoji.hero-wrap img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
  .arena-char .ch-emoji.boss.mon-wrap {
    border-color: #ffb347;
    box-shadow: 0 0 26px var(--med-glow, rgba(255,120,80,.8)), 0 0 0 2px rgba(255,180,71,.6), inset 0 0 22px rgba(0,0,0,.5);
  }
  /* v1.15 单立绘：英雄受击红闪（攻击由 .anim-hero-lunge 突进表现） */
  .arena-char .ch-emoji.hero-wrap.anim-hero-hurt { animation: v15-hero-hurt .36s ease; }
  @keyframes v15-hero-hurt { 0%,100% { filter: none; } 30% { filter: brightness(1.8) sepia(1) hue-rotate(-30deg) saturate(4); } }
  /* BOSS 放大 */
  .arena-char .ch-emoji.boss img { filter: drop-shadow(0 0 12px rgba(255,80,80,.75)) drop-shadow(0 0 4px rgba(255,200,80,.5)); }
  /* 名字/HP/连击（深色适配） */
  .arena-char .ch-name { margin-top: 4px; font-size: 11px; font-weight: 800; color: #f0e4ff;
    text-shadow: 0 0 6px rgba(120,80,180,.7); min-height: 14px; }
  .arena-char .ch-name.boss-name { color: #ffc8c8; font-size: 12px; font-weight: 900;
    text-shadow: 0 0 8px rgba(255,120,120,.8); }
  .arena-char .monster-acc { font-size: 10px; color: #c8b8ff; min-height: 12px; }
  .arena-char .ch-hp { font-size: 10px; color: #e0d4ff; margin-top: 3px; font-weight: 700; min-height: 12px; }
  .arena-char .ch-combo { position: absolute; right: -22px; top: 16px; font-size: 11px; font-weight: 900;
    color: #ffe066; text-shadow: 0 0 6px rgba(255,200,80,.7); display: none; }
  .arena-char .ch-combo.show { display: block; animation: v14-combo-pop .3s ease-out; }
  @keyframes v14-combo-pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
  /* 血条（霓虹感：怪物红/英雄青） */
  .hpbar { width: 96px; height: 7px; background: rgba(20,12,40,.6); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); margin-top: 2px; }
  .hpbar-fill { height: 100%; transition: width .35s ease; }
  .monster-hp .hpbar-fill { background: linear-gradient(90deg, #ff5b5b, #ffa259); box-shadow: 0 0 6px rgba(255,91,91,.6); }
  .hero-hp .hpbar-fill { background: linear-gradient(90deg, #43c97d, #4a9df8); box-shadow: 0 0 6px rgba(74,158,248,.55); }
  /* 怪物光环（v1.14：脉冲更明显） */
  .monster-aura {
    position: absolute; left: 50%; top: 38%; width: 96px; height: 96px;
    transform: translate(-50%, -50%);
    border-radius: 50%; background: radial-gradient(circle, var(--med-glow, hsl(8,85%,55%)) 0%, transparent 70%);
    filter: blur(6px); opacity: .65; pointer-events: none; z-index: 0;
    animation: v14-aura-pulse 2.4s ease-in-out infinite;
  }
  @keyframes v14-aura-pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .55; } 50% { transform: translate(-50%,-50%) scale(1.08); opacity: .8; } }
  /* 拦路虎发光（v1.14 强化） */
  .tiger-glow .ch-emoji { animation: v14-tiger-pulse 1.1s ease-in-out infinite; }
  @keyframes v14-tiger-pulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(255,120,120,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.5)); } 50% { filter: drop-shadow(0 0 16px rgba(255,180,80,.95)) drop-shadow(0 0 4px rgba(255,80,80,.9)); } }

  /* 单词精灵（右上角小图，v1.14 缩小） */
  .hero-half .pet-slot {
    position: absolute; right: 8px; top: 8px; z-index: 4;
    background: rgba(20,15,40,.55); border-radius: 10px; padding: 3px 6px 4px;
    border: 1px solid rgba(180,160,255,.25); box-shadow: 0 0 8px rgba(127,119,221,.35);
  }
  .hero-half .pet-slot .pet-emoji img { width: 24px; height: 24px; }
  .hero-half .pet-slot .pet-name { color: #e8d5ff; font-size: 9px; }

  /* ===== fx 反馈层（全屏覆盖） ===== */
  #fx-zone { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
  /* 答对：怪物抖动 + 红色屏闪 */
  #battle-arena.hit-shake .enemy-half .ch-emoji.mon-wrap img { animation: v14-mon-hit .35s ease-out; }
  #battle-arena.hit-shake { animation: v14-screen-flash .35s ease-out; }
  @keyframes v14-mon-hit { 0% { transform: translateX(0); } 25% { transform: translateX(-6px) rotate(-2deg); } 60% { transform: translateX(8px) rotate(3deg); } 100% { transform: translateX(0); } }
  @keyframes v14-screen-flash { 0% { background: linear-gradient(180deg, #ff5b5b, #c84040); } 100% { background: var(--battle-bg, linear-gradient(180deg, #0c1432 0%, #1a2350 40%, #2a1a4d 100%)); } }
  /* 答错：屏震 */
  #battle-arena.hurt-shake { animation: v14-hurt-shake .4s ease-out; }
  @keyframes v14-hurt-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
  /* 暴击：全屏白闪 + 大数字 */
  #battle-arena.crit-flash { animation: v14-crit-flash .45s ease-out; }
  @keyframes v14-crit-flash { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(255,255,255,0); } 30% { box-shadow: 0 0 80px 20px rgba(255,255,255,.7), inset 0 0 100px 30px rgba(255,255,255,.55); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), inset 0 0 0 0 rgba(255,255,255,0); } }
  .fx-crit-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 12;
    font-size: 38px; font-weight: 900; color: #fff; letter-spacing: 2px;
    text-shadow: 0 0 12px #ffaa00, 0 0 24px #ff5500;
    animation: v14-crit-text .9s ease-out forwards;
  }
  @keyframes v14-crit-text { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 40% { transform: translate(-50%,-50%) scale(1.4); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1) translateY(-30px); opacity: 0; } }
  /* 击杀爆裂 */
  #battle-arena.kill-flash .enemy-half .ch-emoji.mon-wrap { animation: v14-mon-die .5s ease-in forwards; }
  @keyframes v14-mon-die { 0% { transform: scale(1); opacity: 1; filter: brightness(1.5); } 60% { transform: scale(1.5) rotate(20deg); opacity: .4; filter: brightness(2); } 100% { transform: scale(.1) rotate(60deg); opacity: 0; } }
  /* 伤害飘字 */
  .fx-dmg { position: absolute; font-weight: 900; font-size: 18px; color: #ffe066;
    text-shadow: 0 0 8px rgba(255,120,120,.8), 0 0 14px rgba(255,80,80,.7);
    animation: v14-fx-dmg 1s ease-out forwards; }
  @keyframes v14-fx-dmg { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-44px); opacity: 0; } }
  .fx-dmg.green { color: #b6ff8e; text-shadow: 0 0 8px rgba(74,220,140,.7); }
  .fx-dmg.red { color: #ffa59e; text-shadow: 0 0 8px rgba(255,80,80,.7); }
  /* 弹道光束 */
  .fx-bolt { position: absolute; height: 3px; background: linear-gradient(90deg, transparent, #fff4a8, #ff8c2a);
    border-radius: 2px; box-shadow: 0 0 8px #ffaa00, 0 0 14px #ff5b5b; animation: v14-bolt .35s linear forwards; }
  @keyframes v14-bolt { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

  /* 答题区（保持白底，arena 暗黑让答题区高对比突出） */
  #battle-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px;
    background: linear-gradient(180deg, #f7faff, #fff); border-radius: 0 0 12px 12px; }
  #q-wrap { text-align: center; }
  #q-badge { display: inline-block; background: #eef6ff; color: #2f7ad0; font-size: 11px; padding: 2px 9px; border-radius: 10px; margin-bottom: 3px; }
  #question { font-size: 18px; font-weight: 700; color: #26456e; text-align: center; min-height: 26px; }
  .options { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt {
    display: flex; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; padding: 12px 12px; border: 1.5px solid #d8e5f2; border-radius: 12px;
    background: #fff; font-size: 14px; color: #26456e; cursor: pointer; transition: all .12s;
    box-shadow: 0 1px 3px rgba(20,30,60,.06); text-align: left;
  }
  .opt::before { content: attr(data-key); width: 22px; height: 22px; border-radius: 8px; background: #7F77DD; color: #fff; font-size: 12px; font-weight: 800; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
  .opt:active { transform: translateY(1px) scale(.98); }
  .opt:hover { border-color: #7F77DD; background: #f7f4ff; }
  .opt.right { background: #d7f5e0; border-color: #43c97d; color: #1d7a44; box-shadow: 0 0 0 1px rgba(67,201,125,.4); animation: v14-opt-right .35s ease-out; }
  .opt.right::before { background: #43c97d; }
  .opt.wrong { background: #ffe3e0; border-color: #ff7b6e; color: #b23a2e; box-shadow: 0 0 0 1px rgba(255,123,110,.4); animation: v14-opt-wrong .4s ease-out; }
  .opt.wrong::before { background: #ff7b6e; }
  @keyframes v14-opt-right { 0% { transform: scale(1); } 40% { transform: scale(1.05); box-shadow: 0 0 18px rgba(67,201,125,.6); } 100% { transform: scale(1); } }
  @keyframes v14-opt-wrong { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
  #spell-zone { margin-top: 4px; }
  #battle-feedback {
    text-align: center; font-size: 14px; font-weight: 700; min-height: 22px; padding: 4px 6px;
    border-radius: 10px; display: none; margin-top: 2px;
  }
  #battle-actions { margin-top: auto; padding-top: 4px; display: flex; gap: 8px; align-items: stretch; }
  #battle-actions .btn { margin-top: 0; width: auto; white-space: nowrap; }
  #btn-flee { flex: 0 0 auto; background: #fff; color: #7a8ba0; box-shadow: none; border: 1.5px solid #d8e5f2; border-radius: 10px; font-size: 12px; padding: 9px 12px; }
  #btn-next { flex: 1 1 auto; min-width: 0; }
  #battle-feedback.good { background: #e8f9ef; color: #1d7a44; display: block; }
  #battle-feedback.bad { background: #fff0ee; color: #b23a2e; display: block; }

  /* 兼容老 arena-half 等选择器（被 ui-battle.js 引用的不直接废弃，防止 break） */
  .arena-half { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; }
  .arena-char .ch-emoji.boss { font-size: 64px; }
  /* 旧 arena-deco/vs-badge/arena-sun/arena-cloud/arena-ground/arena-horizon 已删 DOM，CSS 残留无害 */
  @keyframes tigerPulse {
    0%, 100% { filter: drop-shadow(0 0 5px #ffd23f) drop-shadow(0 0 12px #ff7a00); }
    50%      { filter: drop-shadow(0 0 13px #ffd23f) drop-shadow(0 0 26px #ff5500); }
  }
  .arena-char .ch-emoji { font-size: 44px; display: block; line-height: 1.05; filter: drop-shadow(0 4px 5px rgba(0,0,0,.16)); position: relative; z-index: 2; }
  .arena-char .ch-emoji.boss { font-size: 64px; }
  .arena-char .ch-name { font-size: 10px; color: #5b8ac9; margin-top: 1px; font-weight: 600; line-height: 1.2; }
  .arena-char .ch-name.boss-name { color: #d8433c; font-weight: 900; font-size: 11px; }
  /* v1.3：全服正确率徽标（"互联网反馈"难度的可视化来源） */
  .monster-acc { font-size: 9px; color: #e08a1e; margin-top: 1px; font-weight: 600; min-height: 11px; }
  .arena-char .ch-hp { font-size: 11px; letter-spacing: 1px; min-height: 14px; margin-top: 1px; }
  .ch-bars { width: 78px; display: flex; flex-direction: column; align-items: center; }
  .hpbar { width: 100%; height: 7px; border-radius: 5px; background: #f3d6d6; overflow: hidden; border: 1px solid rgba(0,0,0,.08); }
  .hpbar-fill { height: 100%; width: 100%; background: #ff5b52; transition: width .35s ease; }
  .hero-hp .hpbar-fill { background: #43c97d; }
  .ch-combo { font-size: 10px; color: #ba7517; font-weight: 700; min-height: 13px; margin-top: 1px; }
  .pet-slot { text-align: center; opacity: .92; margin-bottom: 2px; }
  .pet-emoji { font-size: 22px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.14)); }
  .pet-name { font-size: 9px; color: #3b6d11; margin-top: 1px; }
  /* v1.12.1 #15：单词精灵攻击动作——向右突进+弹回 */
  @keyframes petAttack {
    0%   { transform: translate(0,0) scale(1) rotate(0); }
    35%  { transform: translate(34px,-16px) scale(1.18) rotate(8deg); }
    70%  { transform: translate(-5px,3px) scale(.94) rotate(-5deg); }
    100% { transform: translate(0,0) scale(1) rotate(0); }
  }
  .anim-pet-attack { animation: petAttack .5s ease; }
  .battle-round { font-size: 11px; font-weight: 700; color: #6b4bb0; background: #efeafa; padding: 2px 8px; border-radius: 10px; }
  #fx-zone { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
  .fx-proj {
    position: absolute; right: 24%; bottom: 42px; font-size: 24px; z-index: 5;
    animation: fxFly .42s ease-in forwards;
  }
  .fx-burst { position: absolute; left: 20%; top: 22%; font-size: 46px; z-index: 6; animation: fxBurst .6s ease-out forwards; }
  .fx-dmg {
    position: absolute; left: 28%; top: 22%; font-size: 17px; font-weight: 900; z-index: 6;
    color: #ff4d3d; text-shadow: 0 2px 5px rgba(0,0,0,.18); animation: fxFloat .85s ease-out forwards;
  }
  .fx-dmg.player { left: auto; right: 26%; top: 20%; color: #2f7ad0; }
  .fx-feedback {
    position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font-size: 14px; font-weight: 800;
    color: #43c97d; z-index: 7; white-space: nowrap; animation: fxFloat .9s ease-out forwards;
  }
  .fx-feedback.bad { color: #ff6a5c; }
  .char-idle { animation: idleFloat 2.4s ease-in-out infinite; }
  .char-idle.slow { animation-duration: 3s; }
  /* v1.10.27：英雄换装由 hero-art.js SVG 部件实现（不再叠加 emoji） */
  .anim-monster-hit { animation: monsterHit var(--monster-hit-ms,400ms) ease; }
  .anim-monster-die { animation: monsterDie .55s ease forwards; }
  .anim-player-hit { animation: playerHit .5s ease; }
  /* v1.9.2/1.10.18：英雄近身突进 / 远程施法姿态 / 斩击弧光 */
  .anim-hero-lunge { animation: heroLunge var(--hero-lunge-ms,340ms) cubic-bezier(.18,.7,.2,1); }
  .anim-hero-cast { animation: heroCast var(--hero-cast-ms,440ms) cubic-bezier(.2,.8,.3,1); }
  .anim-hero-attack { animation: heroAttack var(--hero-slash-ms,360ms) cubic-bezier(.2,.8,.2,1); }
  .hero-slash {
    position: absolute; right: 20%; bottom: 38px; width: 90px; height: 90px; z-index: 6;
    border: 7px solid transparent; border-top-color: #cdebff; border-right-color: #cdebff;
    border-radius: 50%; transform: rotate(-35deg) scale(.35); opacity: 0; pointer-events: none;
    filter: drop-shadow(0 0 8px #7fd0ff); animation: heroSlash var(--hero-slash-ms,340ms) cubic-bezier(.2,.8,.2,1) forwards;
  }
  .hero-slash.crit { border-top-color: #ffe27a; border-right-color: #ffb648; width: 120px; height: 120px; filter: drop-shadow(0 0 12px #ffc24a); }
  .anim-counter { animation: counterJump .5s ease; }
  .screen-shake { animation: screenShake var(--screen-shake-ms,450ms) ease; }
  @keyframes idleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes fxFly {
    0% { transform: translate(0,0) scale(.55) rotate(20deg); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translate(-170px,-26px) scale(1.15) rotate(-25deg); opacity: 0; }
  }
  @keyframes fxBurst { 0% { transform: scale(.2); opacity: 0; } 40% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
  @keyframes fxFloat { 0% { transform: translate(-50%,0); opacity: 1; } 100% { transform: translate(-50%,-34px); opacity: 0; } }
  @keyframes monsterHit {
    0%,100% { transform: scale(1) rotate(0); filter: none; }
    15% { filter: brightness(2.5); }
    25% { transform: scale(1.15) rotate(-8deg); filter: brightness(2); }
    55% { transform: scale(.9) rotate(6deg); filter: none; }
    80% { transform: scale(1.05) rotate(-3deg); }
  }
  @keyframes monsterDie {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.3) rotate(12deg); }
    100% { transform: scale(0) rotate(45deg); opacity: 0; }
  }
  @keyframes playerHit {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    55% { transform: translateX(7px); }
    80% { transform: translateX(-4px); }
  }
  /* v1.10.18：英雄挥剑/法杖攻击（武器大幅摆动） */
  @keyframes heroAttack {
    0% { transform: rotate(0deg) translateX(0); }
    35% { transform: rotate(-35deg) translateX(-6px); }
    60% { transform: rotate(55deg) translateX(18px); }
    100% { transform: rotate(0deg) translateX(0); }
  }
  /* v1.9.2：英雄近身突进（蓄力后仰 → 前冲劈砍 → 收招） */
  @keyframes heroLunge {
    0% { transform: translateX(0) rotate(0) scale(1); }
    12% { transform: translateX(-6px) rotate(-3deg) scale(.98); }
    45% { transform: translateX(36px) rotate(5deg) scale(1.07); }
    72% { transform: translateX(26px) rotate(2deg) scale(1.03); }
    100% { transform: translateX(0) rotate(0) scale(1); }
  }
  /* v1.9.2：英雄远程施法姿态（上浮 + 蓄力金光） */
  @keyframes heroCast {
    0% { transform: translateY(0) scale(1); filter: none; }
    30% { transform: translateY(-6px) scale(1.13); filter: drop-shadow(0 0 10px #ffe27a); }
    62% { transform: translateY(-6px) scale(1.13); filter: drop-shadow(0 0 15px #ffe27a); }
    100% { transform: translateY(0) scale(1); filter: none; }
  }
  /* v1.9.2：斩击弧光扫动 */
  @keyframes heroSlash {
    0% { transform: rotate(-35deg) scale(.3); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: rotate(42deg) scale(1.25); opacity: 0; }
  }
  @keyframes counterJump {
    0% { transform: translate(0,0); }
    35% { transform: translate(-62px,-30px); }
    60% { transform: translate(-70px,-18px); }
    100% { transform: translate(0,0); }
  }
  @keyframes screenShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-4px,2px); }
    40% { transform: translate(4px,-2px); }
    60% { transform: translate(-3px,-1px); }
    80% { transform: translate(3px,1px); }
  }

  /* 题型 → 技能特效（P2-1 战斗第2层）：光弹/声波环/声波炮/法术连击/暴击大数字 */
  @keyframes fxOrb {
    0% { transform: translate(0,0) scale(.5); opacity: .9; }
    100% { transform: translate(240px,-120px) scale(1.3); opacity: 0; }
  }
  @keyframes fxWave {
    0% { transform: translate(0,0) scale(.2); opacity: .9; }
    100% { transform: translate(220px,-110px) scale(2.4); opacity: 0; }
  }
  @keyframes fxCannon {
    0% { transform: translate(0,0) scaleX(.2); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate(230px,-118px) scaleX(1.5); opacity: 0; }
  }
  @keyframes fxComboHit {
    0% { transform: scale(.3) rotate(0); opacity: 1; }
    100% { transform: scale(1.7) rotate(40deg); opacity: 0; }
  }
  @keyframes fxCrit {
    0% { transform: translate(-50%,0) scale(.4); opacity: 0; }
    25% { transform: translate(-50%,-6px) scale(1.25); opacity: 1; }
    100% { transform: translate(-50%,-54px) scale(1); opacity: 0; }
  }
  .fx-orb { position: absolute; left: 82px; bottom: 52px; width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #8b5cf6 60%, #5b21b6); box-shadow: 0 0 14px #8b5cf6; z-index: 5; animation: fxOrb .46s ease-in forwards; }
  .fx-wave { position: absolute; left: 90px; bottom: 64px; width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid #2f9be0; box-shadow: 0 0 12px #2f9be0; z-index: 5; animation: fxWave .62s ease-out forwards; }
  .fx-cannon { position: absolute; left: 66px; bottom: 48px; width: 64px; height: 16px; border-radius: 10px;
    background: linear-gradient(90deg, rgba(47,155,224,.15), #2f9be0); box-shadow: 0 0 16px #2f9be0; transform-origin: left center; z-index: 5; animation: fxCannon .7s ease-out forwards; }
  .fx-combo-hit { position: absolute; left: 78%; top: 14%; font-size: 30px; color: #f0a020; text-shadow: 0 0 8px #f0a020; z-index: 6; animation: fxComboHit .34s ease-out forwards; }
  .fx-crit { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); font-size: 34px; font-weight: 900; color: #ff3b2f; text-shadow: 0 3px 8px rgba(0,0,0,.25); z-index: 8; white-space: nowrap; animation: fxCrit .95s ease-out forwards; }

  /* 结算 */
  .result-box { text-align: center; padding: 16px 4px; }
  .result-box .big { font-size: 48px; }
  .result-box .title { font-size: 21px; font-weight: 800; color: #26456e; margin: 6px 0; }
  .result-box .info { color: #5b7a9e; font-size: 14px; line-height: 1.7; }
  .result-box .sem-done {
    background: #fff8e8; border: 2px dashed #e0a33c; border-radius: 14px; padding: 9px;
    font-size: 13px; color: #7a4d00; line-height: 1.6; margin: 6px 0;
  }
  /* v1.10.1：daily-cap-tip 样式已随算法提示一并移除 */

  /* 模态 */
  .modal-mask {
    position: fixed; inset: 0; background: rgba(20,40,70,0.55); display: none;
    align-items: center; justify-content: center; z-index: var(--z-modal-mask); padding: 16px;   /* v1.18.23：弹窗统一置顶于 ☰ 菜单(100)/用户菜单(100) 之上 */
  }
  .modal-mask.show { display: flex; }
  /* #27(v1.16.7→v1.16.7)：个人档案是被其他弹窗(rk-modal 等)之上再打开的二级弹窗；
     而 rk-modal 是运行时 append 到 body 末尾、z-index 同为 50，DOM 靠后会把静态的
     #modal-user 盖在下面 → 提档到 60 确保档案永远在最上层。 */
  #modal-user { z-index: var(--z-modal-user); }   /* v1.18.23：通用 modal-mask 200 之上（个人档案永远最上层） */
  #modal-power { z-index: var(--z-modal-power); }  /* v1.19.33 #43：实力卡片从个人档案内打开，须盖在档案(220)最上层，否则被档案遮住"不在最上方" */
  .modal {
    background: #fff; border-radius: 20px; padding: 20px 18px; width: 100%; max-width: 360px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.3); max-height: 86vh; overflow-y: auto;
  }
  .modal h3 { font-size: 18px; color: #26456e; text-align: center; margin-bottom: 8px; }

  /* 个人档案弹窗 (v1.10.44) */
  #modal-user .up-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
  #modal-user .up-ava { position: relative; font-size: 38px; width: 56px; height: 56px; flex: 0 0 56px;
    display: flex; align-items: center; justify-content: center; background: #eef3fb; border-radius: 16px; }
  #modal-user .up-frame { position: absolute; top: -8px; right: -8px; font-size: 20px; }
  #modal-user .up-nick { font-size: 18px; font-weight: 700; color: #26456e; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  #modal-user .up-admin { font-size: 11px; background: #ffd24d; color: #5a3b00; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
  #modal-user .up-uid { font-size: 12px; color: #8a94a6; margin-top: 2px; }
  #modal-user .up-bio { background: #f4f7fc; border-radius: 12px; padding: 8px 10px; font-size: 13px; color: #3a4a60; margin: 8px 0; word-break: break-word; }
  #modal-user .up-loc { font-size: 13px; color: #5a6b82; margin-bottom: 8px; }
  #modal-user .up-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0; }
  #modal-user .up-stat { background: #f4f7fc; border-radius: 12px; padding: 8px 4px; text-align: center; }
  #modal-user .up-stat-v { font-size: 16px; font-weight: 700; color: #26456e; }
  #modal-user .up-stat-k { font-size: 11px; color: #8a94a6; margin-top: 2px; }
  #modal-user .up-joined { font-size: 12px; color: #8a94a6; margin: 6px 0; }
  #modal-user .up-acts { display: flex; gap: 8px; margin-top: 12px; }
  #modal-user .up-acts .btn { flex: 1; margin-top: 0; }
  #modal-user .up-self { color: #8a94a6; font-size: 13px; }
  #modal-user .up-loading, #modal-user .up-fail { padding: 30px; text-align: center; color: #8a94a6; }
  .modal p { font-size: 14px; color: #5b7a9e; line-height: 1.7; }
  .power-card {
    background: linear-gradient(135deg,#ffe9b8,#ffd27a); border-radius: 16px; padding: 16px;
    text-align: center; margin: 10px 0; border: 2px dashed #e0a33c;
  }
  .power-card .pc-lv { font-size: 26px; font-weight: 800; color: #7a4d00; }
  .power-card .pc-row { font-size: 13px; color: #7a5a1a; margin-top: 5px; }
  .power-card .pc-word { background: rgba(255,255,255,0.6); border-radius: 8px; padding: 2px 8px; margin: 2px; display: inline-block; font-size: 13px; }
  input[type=text] {
    width: 100%; padding: 11px; border: 2px solid #d8e5f2; border-radius: 12px; font-size: 15px; margin-top: 8px; outline: none;
  }
  input[type=text]:focus { border-color: #4a9df8; }
  .row2 { display: flex; gap: 8px; }
  .row2 .btn { flex: 1; }
  .toast {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 40px; background: rgba(20,40,70,0.85);
    color: #fff; padding: 10px 18px; border-radius: 20px; font-size: 14px; z-index: var(--z-toast); display: none; max-width: 80%;
  }
  #review-flow { text-align: center; padding: 4px 0; }
  #review-flow .big { font-size: 42px; }
  #review-flow h1 { font-size: 19px; margin: 4px 0; }
  #review-feedback { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 14px; display: none; }
  #review-feedback.good { background: #e8f9ef; color: #1d7a44; display: block; }
  #review-feedback.bad { background: #fff0ee; color: #b23a2e; display: block; }
  #review-feedback.skip { background: #f3f6fa; color: #5b7a9e; display: block; }

  /* 口语同步（优化③）：主题化卡片，居中大词 + 圆形录音按钮 —— 压缩以保一屏 */
  .speak-zone { text-align: center; padding: 6px 4px; }
  .speak-card {
    background: #fff; border: 2px solid #d8e5f2; border-radius: 16px; padding: 10px 8px 12px;
    box-shadow: 0 4px 12px rgba(47,122,208,0.10);
  }
  .speak-word {
    font-size: 32px; font-weight: 900; color: #1a5fb4; letter-spacing: 1px;
    margin: 2px 0 4px; line-height: 1.1; word-break: break-word;
  }
  .speak-word.ok { color: #2da55f; }
  .speak-word.bad { color: #e0821e; }
  /* v1.11.5：口语卡片中英各一次——中文释义行（替代重复英文的音节行） */
  .speak-meaning {
    font-size: 16px; font-weight: 800; color: #7a5b00;
    background: #fff8e1; border: 1px solid #ffe9a8; border-radius: 10px;
    display: inline-block; padding: 3px 12px; margin: 2px 0 6px;
  }
  .speak-syl { margin-top: 1px; font-size: 14px; }
  .speak-ph { font-size: 13px; color: #7a94b5; margin-bottom: 4px; }
  .speak-hint { font-size: 12px; color: #5b7a9e; margin-bottom: 8px; }
  .speak-mic { font-size: 17px; padding: 12px 20px; width: min(240px, 84%); display: block; margin: 0 auto; min-height: 48px; border-radius: 24px; }
  .speak-mic:active { transform: translateY(2px) scale(.98); }
  /* v1.9.1：真正开始聆听时的明确录音态（红色脉冲），杜绝"闪一下"的歧义 */
  .speak-mic.listening { background: #e0392b; border-color: #b32a1f; color: #fff; animation: speakPulse 1.1s ease-out infinite; }
  @keyframes speakPulse {
    0%   { box-shadow: 0 0 0 0 rgba(224,57,43,.55); }
    70%  { box-shadow: 0 0 0 16px rgba(224,57,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(224,57,43,0); }
  }
  .speak-fallback { margin-top: 12px; }
  .speak-status { font-size: 14px; color: #2f7ad0; margin-top: 10px; font-weight: 700; min-height: 20px; }
  .theme-final .speak-card { background: #2a1d33; border-color: #6a4d77; }
  .theme-final .speak-word { color: #ffd9f6; }
  .theme-final .speak-meaning { background: #3a2c1d; border-color: #7a5b2a; color: #ffd98a; }
  .theme-final .speak-ph, .theme-final .speak-hint { color: #d7b8e0; }

  /* 听音辨义「显示音标」按钮（优化②） */
  .ph-reveal { background: #fff3e0; color: #b05a13; }
  .ph-reveal:active { background: #ffe6c2; }
  .ph-reveal:disabled { opacity: .6; }

  /* 键盘大小写切换（优化⑤） */
  .kb-key.caps { flex: 1.5; max-width: none; font-size: 15px; background: #eef4fb; color: #26456e; border-color: #cfdce8; }
  .kb-key.caps.on { background: #ffd27a; color: #5a3a00; border-color: #e0a33c; }

  /* 练功房（优化⑧） */
  .dojo-card {
    background: #f6fafe; border: 2px solid #e2ebf5; border-radius: 16px; padding: 12px; margin-top: 8px;
    text-align: center;
  }
  .dojo-card.know { background: #eefaf2; border-color: #bfe8d0; }
  .dojo-card.unknow { background: #fff6ef; border-color: #ffd9bf; }
  .dojo-word { font-size: 24px; font-weight: 900; color: #1a5fb4; letter-spacing: 1px; }
  .dojo-card.know .dojo-word { color: #2da55f; }
  .dojo-head { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
  .dojo-pos { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; font-weight: 700; color: #7a3fb5; background: linear-gradient(135deg,#f3ecfc,#eaddfb); border: 1px solid #d9c6f0; border-radius: 11px; padding: 3px 10px; box-shadow: 0 1px 0 #e6d6f7; }
  .dojo-pos .pos-en { font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: .3px; color: #6a2fb0; }
  .dojo-pos .pos-cn { font-weight: 700; font-size: 11px; color: #a982d6; }
  .dojo-ph { font-size: 14px; color: #c0392b; margin-top: 2px; font-weight: 600; }
  .dojo-syl { font-size: 13px; color: #a06bd9; margin-top: 2px; }
  .dojo-syl-display { margin-top: 3px; min-height: auto; }
  .dojo-syl-display .syl-part { font-size: 18px; padding: 0 1px; }
  .dojo-syl-display .syl-ph { font-size: 9px; margin-top: 3px; }
  .dojo-syl-display .syl-dot { font-size: 14px; padding-top: 1px; }
  .dojo-cn { font-size: 14px; color: #5b7a9e; margin-top: 3px; }
  .dojo-acts { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
  .dojo-acts .btn { flex: 1; margin-top: 0; font-size: 13px; padding: 8px 6px; }
  .dojo-summary { text-align: center; margin-top: 10px; }
  .dojo-sum-text { font-size: 14px; color: #26456e; font-weight: 700; margin-bottom: 6px; }
  /* 练功房单词列表内嵌滚动框 */
  /* v1.19.36：#screen-dojo 已随离线练功房一并删除，此死 CSS 规则移除 */
  #dojo-words {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 8px 10px;
    padding: 4px 8px 12px;
    background: #ffffff;
    border: 2px solid #dce7f2;
    border-radius: 16px;
    box-shadow: inset 0 2px 8px rgba(26,95,180,0.06);
  }
  #dojo-words::-webkit-scrollbar { width: 6px; }
  #dojo-words::-webkit-scrollbar-thumb { background: #c5d7e8; border-radius: 3px; }

  /* 单元通关挑战入口（优化④） */
  .stage-card.challenge { background: #f3edff; border-color: #d8c7f5; }
  .stage-card.challenge .name { color: #5b3a9e; }
  /* v1.10.12：单元选择下拉菜单 */
  .unit-select-wrap { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
  .unit-select-wrap .sem-label { font-size: 13px; font-weight: 700; color: #5b6b7b; padding-left: 4px; }
  /* v1.10.13/18：单元入口卡片（替代平铺小关卡片） */
  .stage-card.unit-entry-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: #e8f4ff; border-color: #4a9df8; cursor: default; }
  .unit-entry-main { display: flex; align-items: center; gap: 10px; }
  .stage-card.unit-entry-card .emoji { font-size: 32px; flex-shrink: 0; }
  .unit-entry-title { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; color: #1a5fb4; line-height: 1.25; }
  .stage-card.unit-entry-card .btn { display: inline-block; width: auto; flex-shrink: 0; margin-left: 0; margin-top: 0; white-space: nowrap; }
  .stage-card.unit-entry-card .btn:disabled { opacity: .6; cursor: not-allowed; }
  .unit-entry-meta { font-size: 13px; color: #4a7cb5; font-weight: 700; padding-left: 42px; line-height: 1.25; }
  /* v1.10.15：子关卡 chips（分批覆盖全单元词） */
  .sublevel-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; margin-top: 8px; background: #eef5fc; border: 1px dashed #9cc4e8; border-radius: 12px; color: #1a5fb4; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
  .sublevel-toggle:hover { background: #e2eefb; }
  .sublevel-toggle .arrow { transition: transform .2s; }
  .sublevel-toggle.open .arrow { transform: rotate(180deg); }
  .sublevel-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
  .sublevel-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 7px 5px; background: #fff; border: 2px solid #cfe0f0; border-radius: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
  .sublevel-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74,157,248,.25); border-color: #4a9df8; }
  .sublevel-chip .lab { font-size: 12px; font-weight: 700; color: #26456e; }
  .sublevel-chip .cnt { font-size: 10px; color: #7a94b5; margin-top: 1px; }
  .sublevel-chip .badge { font-size: 10px; margin-top: 1px; color: #b0c0d4; }
  .sublevel-chip.cleared { background: #eafaf0; border-color: #43c97d; }
  .sublevel-chip.cleared .lab { color: #2da55f; }
  .sublevel-chip.cleared .badge { color: #2da55f; }
  .sublevel-chip.current { border-color: #4a9df8; box-shadow: 0 0 0 3px rgba(74,157,248,.2); }
  .sublevel-chip.current .badge { color: #1a5fb4; }
  /* v1.10.31：子关卡下拉框（关卡 1..N，每单元从「关卡 1」开始命名） */
  .sublevel-panel { margin-top: 8px; padding: 10px; background: #f7fbff; border: 1px solid #d8e5f2; border-radius: 12px; }
  .sublevel-row { display: flex; gap: 8px; align-items: stretch; }
  .sublevel-row .ver-select { flex: 1; min-width: 0; }
  .sublevel-row .btn { white-space: nowrap; }
  .sublevel-hint { font-size: 11px; color: #7a94b5; margin-top: 6px; text-align: center; font-weight: 600; }

#screen-classic .classic-card {
      background: linear-gradient(160deg, #ffffff, #f3f8ff);
      border: 1px solid #d8e6f5; border-radius: 18px;
      box-shadow: 0 8px 24px rgba(31,90,180,.10);
      padding: 18px 16px; margin: 10px 0 14px; text-align: center;
    }
    #screen-classic .cc-word { font-size: 34px; font-weight: 800; color: #143a66; letter-spacing: 1px; overflow-wrap: anywhere; }
    #screen-classic .cc-meta { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; }
    #screen-classic .cc-pos { background: #eaf2ff; color: #1a5fb4; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: baseline; gap: 6px; }
    #screen-classic .cc-pos .pos-en { font-style: italic; font-weight: 900; font-size: 12px; color: #1a5fb4; }
    #screen-classic .cc-pos .pos-cn { font-weight: 600; font-size: 11.5px; color: #4a6a8c; }
    #screen-classic .cc-meaning { color: #33506e; font-size: 17px; font-weight: 600; }
    #screen-classic .cc-qwrap { margin-top: 6px; }
    #screen-classic .cc-badge { display: inline-block; background: #1a8a4f; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 12px; margin-bottom: 8px; }
    #screen-classic .cc-question { font-size: 17px; color: #1f2d3d; line-height: 1.5; min-height: 24px; overflow-wrap: anywhere; }
    #screen-classic .cc-masked { font-size: 28px; letter-spacing: 6px; font-weight: 800; color: #143a66; word-break: break-all; overflow-wrap: anywhere; }
    #screen-classic .cc-prompt { font-size: 13px; color: #7a94b5; }
    #screen-classic .cc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
    #screen-classic .cc-opt {
      background: #fff; border: 2px solid #d8e6f5; border-radius: 12px;
      padding: 12px 10px; font-size: 16px; color: #1f2d3d; cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      overflow-wrap: anywhere;
    }
    #screen-classic .cc-opt:hover { transform: translateY(-2px); border-color: #1a8a4f; }
    #screen-classic .cc-opt.correct { background: #e7f9ee; border-color: #27ae60; color: #1a8a4f; font-weight: 700; }
    #screen-classic .cc-opt.wrong { background: #fdeaea; border-color: #e74c3c; color: #c0392b; }
    #screen-classic .cc-input-zone { display: flex; gap: 8px; margin-top: 12px; }
    #screen-classic .cc-input { flex: 1; border: 2px solid #d8e6f5; border-radius: 12px; padding: 10px 12px; font-size: 16px; outline: none; }
    #screen-classic .cc-input:focus { border-color: #1a8a4f; }
    #screen-classic .cc-feedback { margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; }
    #screen-classic .cc-feedback.ok { background: #e7f9ee; color: #1a8a4f; }
    #screen-classic .cc-feedback.bad { background: #fdeaea; color: #c0392b; }
    /* v1.12.2 #17：操作按钮行吸附底部——反馈框不再把「下一词」挤到屏外需上滑 */
    #screen-classic .cc-actions {
      display: flex; gap: 10px; justify-content: center; margin-top: 14px;
      position: sticky; bottom: 0; z-index: 4;
      padding: 8px 0 2px;
      background: linear-gradient(to top, #f7fafd 72%, rgba(247,250,253,0));
    }
    #screen-classic .classic-progress { margin: 6px 0 4px; }
    #screen-classic .classic-progress-bar { background: #e6eef8; height: 8px; border-radius: 6px; overflow: hidden; }
    #screen-classic .classic-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#2f7ad0,#2da55f); transition: width .35s ease; }
    #screen-classic .classic-progress-text { font-size: 12px; color: #7a94b5; margin-top: 4px; text-align: right; }
    #screen-classic .cc-hint { font-size: 13px; color: #7a94b5; margin-top: 8px; }
    #screen-classic #classic-pick .ver-select { margin: 8px 0; }
    /* v1.19.3 学习道具栏（连对守护/重练豁免/双倍碎片） */
    .classic-bag { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; align-items: center; }
    .classic-bag .bag-label { font-size: 12px; font-weight: 700; color: #8a6d1a; }
    .classic-bag .bag-item { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #fff; border: 1.5px solid #d8c98a; color: #8a6d1a; cursor: pointer; user-select: none; transition: transform .15s; }
    .classic-bag .bag-item:hover { transform: translateY(-1px); }
    .classic-bag .bag-item.on { background: #ffefc2; border-color: #e0a800; color: #7a5c00; box-shadow: 0 0 0 2px rgba(224,168,0,.25); }
    /* v1.17.1 #30：分模式练习按钮（灰白默认 → 连续 3 轮全对变绿） */
    .classic-modes-tip { margin-top: 14px; font-size: 12px; color: #7a94b5; background: #f2f7ff; border-radius: 10px; padding: 8px 10px; }
    .classic-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .classic-modes .cm-btn {
      display: flex; align-items: center; justify-content: space-between; gap: 6px;
      background: #f6f9fc; border: 1.5px solid #dbe6f2; border-radius: 12px;
      padding: 10px 12px; font-size: 14px; font-weight: 700; color: #33506e; text-align: left; cursor: pointer;
    }
    .classic-modes .cm-btn:active { transform: translateY(1px); }
    .classic-modes .cm-btn .cm-name { min-width: 0; flex: 1; }
    .classic-modes .cm-btn .cm-emoji { font-size: 16px; }
    .classic-modes .cm-btn .cm-state { font-size: 11px; font-weight: 800; white-space: nowrap; }
    .classic-modes .cm-btn.done { background: #e7f9ee; border-color: #27ae60; color: #1a8a4f; box-shadow: 0 3px 0 #b5e6c8; }
    .classic-modes .cm-btn.done .cm-state { color: #1a8a4f; }

    #screen-classic .cs-emoji { font-size: 48px; }
    #screen-classic .cs-title { font-size: 20px; font-weight: 800; color: #143a66; margin: 6px 0; }
    #screen-classic .cs-sub { color: #33506e; margin-bottom: 14px; }
    #screen-classic .cs-sub b { color: #1a8a4f; font-size: 18px; }
    /* v1.17.1 #30：分模式结算提示（连续全对计数 / 已达成变绿） */
    #screen-classic .cs-mastery { margin: 4px 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; background: #f2f7ff; color: #1a5fb4; }
    #screen-classic .cs-mastery.done { background: #e7f9ee; color: #1a8a4f; }
    #screen-classic .cs-mastery.bad { background: #fdeaea; color: #c0392b; }

#shop-modal .modal { max-width: 460px; }
  .shop-balance-bar { display: flex; align-items: center; justify-content: space-between;
    background: #fff8e6; border: 1px solid #ffe2a8; border-radius: 12px; padding: 10px 14px; margin: 10px 0 14px; }
  .shop-balance-bar .b-label { font-size: 13px; color: #8a6d1a; }
  .shop-balance-bar .b-val { font-size: 20px; font-weight: 800; color: #c47f00; }
  .shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 52vh; overflow-y: auto; }
  .shop-card { background: #f7faff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
  .shop-emoji { font-size: 30px; }
  .shop-name { font-weight: 800; color: #26456e; margin-top: 4px; font-size: 15px; }
  .shop-owned { font-size: 11px; background: #d6f5e3; color: #1a7f4c; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
  .shop-desc { font-size: 12px; color: #6b7c93; line-height: 1.5; margin: 6px 0 10px; flex: 1; }
  .shop-foot { display: flex; align-items: center; justify-content: space-between; }
  .shop-cost { font-weight: 800; color: #c47f00; }
  .shop-buy { padding: 6px 14px; border-radius: 18px; font-size: 13px; }
  /* v1.5：商城/背包双 tab + 背包样式 */
  .shop-tabs { display: flex; gap: 8px; margin: 10px 0 4px; }
  .shop-tab { flex: 1; text-align: center; padding: 9px 0; border-radius: 10px;
    background: #eef2f7; cursor: pointer; font-size: 14px; font-weight: 700; color: #5b6b7b; }
  .shop-tab.active { background: #1a5fb4; color: #fff; }
  .bag-empty { text-align: center; color: #8a94a6; font-size: 14px; padding: 32px 8px; line-height: 1.8; }
  .bag-qty { font-weight: 800; color: #1a5fb4; }
  /* v1.19.32：道具栏「我的碎片」区块 */
  .bag-sec-title { font-size: 13px; font-weight: 800; color: #26456e; margin: 14px 2px 8px; display: flex; align-items: baseline; gap: 8px; }
  .bag-sec-sub { font-size: 11px; font-weight: 600; color: #8a97a5; }
  .frag-inv-list { display: flex; flex-direction: column; gap: 8px; }
  .frag-inv-card { display: flex; align-items: center; gap: 10px; background: #f7faff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 10px 12px; }
  .frag-inv-ava { font-size: 26px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eef2f7; border-radius: 10px; flex: 0 0 auto; }
  .frag-inv-main { flex: 1; min-width: 0; }
  .frag-inv-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
  .frag-inv-name { font-size: 14px; font-weight: 800; color: #2a3a52; }
  .frag-pill { font-size: 10.5px; font-weight: 800; color: #fff; padding: 1px 7px; border-radius: 999px; }
  .frag-inv-bar { height: 7px; border-radius: 999px; background: #eef2f7; overflow: hidden; margin-bottom: 5px; }
  .frag-inv-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
  .frag-inv-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #8a97a5; }
  .frag-inv-ready { color: #1a8a4f; font-weight: 800; }
  .frag-inv-lit { color: #b8860b; font-weight: 800; }
  .frag-inv-need { color: #c98a1a; font-weight: 700; }
  .rename-tip { font-size: 12px; color: #8a94a6; line-height: 1.5; }
  /* v1.11.7：积分明细（v1.11.8 #5 排版优化：原因+时间左、金额右） */
  .log-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
  .log-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f7faff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 10px 14px; }
  .log-body { flex: 1; min-width: 0; }
  .log-reason { font-size: 13.5px; font-weight: 800; color: #26456e; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
  .log-ref { font-size: 11.5px; color: #8a94a6; font-weight: 600; }
  .log-time { font-size: 11px; color: #a3adbb; margin-top: 3px; }
  .log-delta { font-size: 19px; font-weight: 900; min-width: 66px; text-align: right; letter-spacing: .5px; }
  .log-delta.plus { color: #1a8a4f; }
  .log-delta.minus { color: #dc2626; }
  .log-empty { text-align: center; color: #8a94a6; font-size: 14px; padding: 32px 8px; line-height: 1.8; }
  .log-more { margin: 10px auto 0; display: block; }
  /* v1.19.32：碎片商城 tab */
  .frag-sec-title { font-size: 13px; font-weight: 800; color: #26456e; margin: 10px 2px 6px; }
  .frag-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .frag-card { background: #f7faff; border: 1px solid #e3ebf5; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; }
  .frag-emoji { font-size: 30px; }
  .frag-name { font-weight: 800; color: #26456e; margin-top: 4px; font-size: 14px; }
  .frag-cost { font-weight: 800; color: #c47f00; font-size: 13px; margin: 4px 0 8px; }
  .frag-prev { display: flex; align-items: center; gap: 8px; background: #f1f5fb; border: 1px solid #e3ebf5; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
  .frag-prev-day { font-weight: 800; color: #1a5fb4; font-size: 13px; min-width: 48px; }
  .frag-prev-names { font-size: 12px; color: #5b6b7b; }
  .frag-tip { font-size: 12px; color: #8a94a6; line-height: 1.6; margin-top: 10px; background: #f6f8fb; border-radius: 8px; padding: 8px; }
  .frag-pick-item:hover { background: #eef4fb; }

/* v1.13.2 掉落动作反馈：弹入 + 稀有度光晕脉冲（音效 v0.2） */
  #modal-drop .modal { animation: ww-drop-pop .5s cubic-bezier(.18,1.25,.4,1) both; }
  /* v1.19.0 图鉴中心 tabs + 四大名著 */
  .fig-tab { flex:1; text-align:center; padding:8px 0; border-radius:10px; background:#eef2f7; cursor:pointer; font-size:14px; font-weight:700; color:#5b6b7b; border:none; transition:.15s; }
  .fig-tab.on { background:#1a5fb4; color:#fff; }
  .fig-btabs { display:flex; gap:8px; margin:10px 0; }
  .fig-btab { flex:1; text-align:center; padding:7px 0; border-radius:10px; background:#fff; cursor:pointer; font-size:13px; font-weight:700; color:#5b6b7b; border:1.5px solid #dde4ec; transition:.15s; }
  .fig-btab.on { border-color:#1a5fb4; color:#1a5fb4; background:#eaf1fb; }
  .fig-grid { display:flex; flex-wrap:wrap; gap:8px; }
  .fig-card { width:96px; border-radius:12px; border:1.5px solid #e0e5ea; background:#fff; padding:8px 4px 6px; text-align:center; cursor:pointer; transition:transform .12s, box-shadow .12s; }
  .fig-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(30,60,120,.12); }
  .fig-card .f-ava { width:48px; height:48px; margin:0 auto 4px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; background:#f0f3f8; overflow:hidden; }
  /* v1.19.17：CSS程序化头像（首字+珍稀度渐变+名著色边框+emoji角标） */
  .fig-card .f-ava-css { width:48px; height:48px; margin:0 auto 4px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--rc), var(--rc)88, var(--bc)CC); box-shadow: inset 0 -2px 6px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.1); text-shadow:0 1px 2px rgba(0,0,0,.35); border:2px solid var(--bc); letter-spacing:0; }
  .fig-card .f-ava-css::after { content:attr(data-emoji); position:absolute; bottom:-2px; right:-2px; font-size:14px; filter:grayscale(.2); transform:scale(.9); }
  .fig-card .f-ava-css.f-ava-lock { background:linear-gradient(135deg,#c8d1dc,#e2e8f0); color:#8a97a5; border-color:#d0d7de; }
  .fig-card .f-ava-css.f-ava-lock::after { display:none; }
  .fig-card .f-ava-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
  /* v1.19.25：图片类立绘（assets/ 开头）用矩形铺满，2:3 比例整体展示，避免圆形裁切 */
  .fig-card .f-ava-pic { width:100%; aspect-ratio:2/3; height:auto; border-radius:10px; background:#f0f3f8; margin:0 auto 4px; overflow:hidden; }
  .fig-card .f-ava-pic img { width:100%; height:100%; object-fit:contain; border-radius:10px; }
  /* v1.19.27：立绘神秘占位（未兑换成功前不展示真身立绘，保留探索神秘感） */
  .fig-card .f-ava-secret { background:linear-gradient(160deg,#2b3441,#3e4a5d) !important; display:flex; align-items:center; justify-content:center; }
  .fig-card .f-ava-secret .f-ava-secret-inner { font-size:34px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
  @keyframes figReveal { 0%{ opacity:0; transform:scale(.9);} 100%{ opacity:1; transform:scale(1);} }
  .fig-card.fc-lit .f-ava-pic img { animation: figReveal .5s ease; }
  .fig-card .f-name { font-size:12px; font-weight:700; color:#2a3a52; line-height:1.3; }
  .fig-card .f-frag { font-size:11px; color:#8a97a5; margin-top:2px; }
  .fig-card.fc-lit { border-color:#B8860B; background:linear-gradient(160deg,#fff8e6,#fff); }
  .fig-card.fc-lit .f-ava { background:linear-gradient(160deg,#FFD76A,#F0A500); }
  .fig-card.fc-own .f-ava { background:#e8f0fb; }
  .fig-card.fc-own { border-color:#a9c6ee; }
  .fig-card .f-pill { display:inline-block; font-size:10px; padding:1px 6px; border-radius:8px; color:#fff; margin-top:2px; }
  .fig-ach { display:flex; align-items:center; gap:8px; background:#f6f8fb; border:1px solid #e3e9f2; border-radius:10px; padding:8px 10px; margin:6px 0; font-size:12px; color:#5b6b7b; }
  .fig-ach.done { background:#f3ffe8; border-color:#bfe5a0; color:#2d7a1e; }
  .fig-progress-bar { height:10px; border-radius:6px; background:#e9eef5; overflow:hidden; }
  .fig-progress-bar > div { height:100%; border-radius:6px; background:linear-gradient(90deg,#4a9df8,#1a5fb4); transition:width .4s; }
  #modal-fig-drop .fig-drop-ain { animation: figPop .45s cubic-bezier(.2,1.4,.4,1) both; }
  /* v1.19.59 #52：碎片掉落仪式感——达成时头像发光脉冲 + 弹窗缩放入场 */
  #modal-fig-drop.dropped .fig-drop-ain { animation: figPop .45s cubic-bezier(.2,1.4,.4,1) both, figCelebrate 1.1s ease-out .45s 2; }
  #modal-fig-drop.dropped .modal { animation: figModalPop .5s cubic-bezier(.18,1.25,.4,1) both; }
  @keyframes figCelebrate {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,200,60,0); }
    50%  { transform: scale(1.12); box-shadow: 0 0 0 14px rgba(255,200,60,.35); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,200,60,0); }
  }
  @keyframes figModalPop {
    0%   { transform: scale(.8);  opacity: 0; }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1);   opacity: 1; }
  }
  @keyframes figPop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  #modal-fig-rank .r-row { display:flex; align-items:center; gap:8px; padding:7px 6px; border-bottom:1px dashed #e4e9f1; font-size:13px; }
  #modal-fig-rank .r-rank { width:26px; font-weight:800; color:#8a97a5; text-align:center; }
  #modal-fig-rank .r-row:nth-child(-n+3) .r-rank { color:#F0A500; }
  #modal-fig-rank .r-name { flex:1; font-weight:600; color:#2a3a52; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #modal-fig-rank .r-val { font-weight:800; color:#1a5fb4; }
  #modal-drop #drop-preview { display: flex; align-items: center; justify-content: center; }
  #modal-drop #drop-preview img { animation: ww-drop-glow 1.6s ease-in-out infinite; border-radius: 12px; }
  @keyframes ww-drop-pop { 0% { transform: scale(.55); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
  @keyframes ww-drop-glow { 0%, 100% { box-shadow: 0 0 4px var(--drop-glow, #8a97a5); } 50% { box-shadow: 0 0 20px var(--drop-glow, #8a97a5); } }
  /* v1.19.32：人物星级边框（兑换默认 1★，最高 5★；星级越高边框越炫酷） */
  .fig-card { position: relative; }
  .fig-card .f-starbadge { position:absolute; top:-7px; left:-7px; min-width:18px; height:18px; line-height:18px; padding:0 4px; border-radius:9px; font-size:11px; font-weight:800; color:#fff; background:#8a97a5; box-shadow:0 1px 3px rgba(0,0,0,.25); z-index:2; }
  .fig-card.star-1 { border:2px solid #cd7f32; box-shadow:0 0 0 1px #cd7f3255; }
  .fig-card.star-1 .f-starbadge { background:#cd7f32; }
  .fig-card.star-2 { border:2px solid #b9c2cc; box-shadow:0 0 6px #b9c2cc88; }
  .fig-card.star-2 .f-starbadge { background:#9aa6b2; }
  .fig-card.star-3 { border:2px solid #FFD24A; box-shadow:0 0 10px #FFD24A99; }
  .fig-card.star-3 .f-starbadge { background:#E8A900; }
  .fig-card.star-4 { border:2px solid transparent; border-image:linear-gradient(135deg,#9b5cff,#36c6ff) 1; box-shadow:0 0 12px #9b5cff99; animation: starGlow4 2.2s ease-in-out infinite; }
  .fig-card.star-4 .f-starbadge { background:#7b3cff; }
  .fig-card.star-5 { border:2px solid transparent; border-image:conic-gradient(from 0deg,#ff4d4d,#ff9a3d,#ffe14d,#4dff7a,#4dc3ff,#9b5cff,#ff4dd2,#ff4d4d) 1; box-shadow:0 0 18px #ff5ec7cc; animation: starGlow5 1.8s ease-in-out infinite; }
  .fig-card.star-5 .f-starbadge { background:linear-gradient(135deg,#ff4dd2,#9b5cff); }
  .fig-card.star-5::after { content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%); background-size:220% 100%; animation: starSweep 2.6s linear infinite; pointer-events:none; }
  @keyframes starGlow4 { 0%,100%{ box-shadow:0 0 10px #9b5cff88; } 50%{ box-shadow:0 0 18px #36c6ffcc; } }
  @keyframes starGlow5 { 0%,100%{ box-shadow:0 0 14px #ff5ec7aa; } 50%{ box-shadow:0 0 26px #9b5cffdd; } }
  @keyframes starSweep { 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
  /* 详情头像星级光环 */
  #fig-detail-ava.fig-ring-4 { border:3px solid #9b5cff; box-shadow:0 0 14px #9b5cffcc; }
  #fig-detail-ava.fig-ring-5 { border:3px solid transparent; border-image:conic-gradient(from 0deg,#ff4d4d,#ff9a3d,#ffe14d,#4dff7a,#4dc3ff,#9b5cff,#ff4dd2,#ff4d4d) 1; box-shadow:0 0 16px #ff5ec7dd; }

.auth-head{display:flex;justify-content:space-between;align-items:center;}
  .modal-x{border:none;background:none;font-size:20px;cursor:pointer;color:#9aa;line-height:1;}
  .auth-tabs,.auth-ways{display:flex;gap:8px;margin:12px 0;}
  .atab,.away{flex:1;text-align:center;padding:9px 0;border-radius:10px;background:#eef2f7;cursor:pointer;font-size:14px;font-weight:700;color:#5b6b7b;}
  .atab.active,.away.active{background:#1a5fb4;color:#fff;}
  .away.disabled{opacity:.45;cursor:not-allowed;}
  .auth-field{margin:9px 0;}
  .auth-field input{width:100%;padding:11px;border:1px solid #d6dee8;border-radius:10px;font-size:15px;box-sizing:border-box;}
  .auth-code-row{display:flex;gap:8px;}
  .auth-code-row input{flex:1;}
  .auth-code-btn{white-space:nowrap;padding:0 14px;border:none;border-radius:10px;background:#ffb02e;color:#5a3a00;font-weight:700;cursor:pointer;}
  .auth-code-btn:disabled{opacity:.5;cursor:default;}
  .auth-error{color:#d33;font-size:13px;min-height:18px;margin:6px 0;}
  .auth-hint{font-size:12px;color:#8a94a6;margin-top:10px;line-height:1.5;}
  .auth-foot{text-align:center;margin-top:12px;padding-top:10px;border-top:1px dashed #dfe6ef;font-size:12px;color:#8a94a6;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
  .auth-foot a{color:#4a9df8;text-decoration:none;}
  .auth-foot a:hover{text-decoration:underline;}
  /* v1.10 设置模态 */
  #modal-settings .modal { max-width: 340px; }
  #settings-voice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #bugbtn-enabled { display: none; }
  .ww-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
  .ww-switch input { display: none; }
  .ww-slider { position: absolute; cursor: pointer; inset: 0; background: #cfd8e3; border-radius: 24px; transition: .2s; }
  .ww-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
  .ww-switch input:checked + .ww-slider { background: #1a5fb4; }
  .ww-switch input:checked + .ww-slider::before { transform: translateX(20px); }

  /* 系统预设头像选择器 (v1.10.45) */
  #modal-avatar .av-loading, #modal-avatar .av-fail { padding: 30px; text-align: center; color: #8a94a6; }
  #modal-avatar .av-hint { font-size: 13px; color: #5a6b82; text-align: center; margin-bottom: 12px; }
  #modal-avatar .av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  #modal-avatar .av-cell { background: #f4f7fc; border: 2px solid transparent; border-radius: 14px; padding: 8px 4px; text-align: center; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
  #modal-avatar .av-cell:hover { transform: translateY(-2px); background: #eaf1fb; }
  #modal-avatar .av-cell.sel { border-color: #1a5fb4; background: #e3eefc; }
  #modal-avatar .av-thumb { width: 56px; height: 56px; margin: 0 auto 4px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
  #modal-avatar .av-name { font-size: 11px; color: #3a4a60; }
  #modal-avatar .av-lock-icon { font-size: 42px; text-align: center; margin: 8px 0 4px; }
  #modal-avatar .av-lock-title { font-size: 16px; font-weight: 700; color: #26456e; text-align: center; }
  #modal-avatar .av-lock-sub { font-size: 12px; color: #8a94a6; text-align: center; margin: 4px 0 10px; }
  #modal-avatar .av-lock-bal { font-size: 13px; color: #5a6b82; text-align: center; margin-bottom: 10px; }
  #modal-avatar .av-lock-bal b { color: #e08a00; }
  /* 顶栏头像 / 各场景头像统一用 .av-img 填满圆形容器 */
  img.av-img { display: block; }

  /* v1.17.3 #远哥：dictation 听写倒计时 + 间隔选择 + 听写占位卡（v1.17.5 倒计时居中） */
  .cc-dict-timer { display: flex; align-items: center; justify-content: center; width: 100%; font-size: 15px; font-weight: 800; color: #d9693a; margin: 6px 0 2px; }
  .cc-dict-now { text-align: center; font-size: 16px; font-weight: 800; color: #1a5fb4; padding: 8px 0; }
  .dict-interval-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12px; flex-wrap: wrap; }
  .dict-interval-row .dict-interval-label { font-weight: 800; color: #33506e; }
  .dict-interval-row .dict-interval-hint { color: #9db3cc; }
  /* v1.17.5 #远哥：间隔改 5 个按钮（5/10/15/20/30s），选中高亮 */
  .dict-interval-btns { display: flex; gap: 6px; }
  .dict-interval-btns .dib {
    min-width: 44px; padding: 5px 10px; font-size: 13px; font-weight: 800; color: #33506e;
    background: #f6f9fc; border: 1.5px solid #dbe6f2; border-radius: 10px; cursor: pointer;
  }
  .dict-interval-btns .dib.on { background: #1a5fb4; border-color: #1a5fb4; color: #fff; }

  /* ============================================================
   * v1.18.11 设备自适应层（远哥要求：平板/电脑宽屏 + 手机横屏也要好用）
   * 策略：竖屏手机（默认 <600px）零改动；宽屏按断点加宽 #app、网格增列、
   *       首页按钮/弹窗/战斗舞台等随宽度自适应。所有覆盖仅在 media 内生效。
   * 注意：必须放在所有 <style> 块的最后（文档顺序层叠），否则被后出现的
   *       同特异性普通规则覆盖（如 .classic-modes 在第二个 style 块）。
   * ============================================================ */
  @media (min-width: 600px) {
    #app { max-width: 720px; padding: 16px 18px 14px; border-radius: 24px; }
    /* 首页主按钮：宽屏两列并排（.screen.active 是 flex column，子项会被 blockify，
       inline-block 无效 → 必须用 flex-direction:row + flex-wrap 让按钮横向排布） */
    #screen-home.active { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; }
    #screen-home #home-hero, #screen-home .progress-tip, #screen-home .progress-bar { flex: 0 0 100%; }
    #screen-home .home-grid { flex: 0 0 100%; }   /* v1.18.11：卡片网格在 flex 行内占满整行 */
    #screen-home .home-main-btn { flex: 0 0 calc(50% - 4px); margin: 0; }
    /* 通用网格升列：年级/发音/选项/经典模式按钮/战斗选项 2列→3列 */
    .grade-grid, .voice-grid, #screen-classic .cc-options, .classic-modes, .options { grid-template-columns: 1fr 1fr 1fr; }
    /* 错题本/拦路虎/关卡卡片：两列布局 */
    #screen-wrongbook #wb-list, #screen-tiger #tiger-list, #screen-stage #stage-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
    #screen-wrongbook .wb-item, #screen-tiger .tiger-item, #screen-stage .stage-card { margin-top: 0; }
    /* v1.18.12 #33：分组标题/提示是 grid 子项会各自占格 → 强制跨整行（否则第一张卡被挤到第2/3列成孤卡） */
    #screen-wrongbook .wb-sec-title, #screen-wrongbook .wb-sec-note,
    #screen-tiger .tiger-sec-title, #screen-tiger .tiger-sec-note { grid-column: 1 / -1; }
    #screen-wrongbook .wb-sec-title { margin: 6px 0 2px; }
    /* 战斗舞台加宽加高 */
    .battle-stage { height: 240px; }
    .arena-char { width: 130px; }
    .arena-char .ch-emoji { width: 130px; height: 130px; line-height: 130px; font-size: 96px; }
    /* 弹窗加宽：宽度必须加在内层 .modal 卡片上！若加在外层 .modal-mask(fixed;inset:0) 会让遮罩被压成 520px 宽且贴左，内层卡片只在那 520px 内居中 → 档案偏到屏幕左侧。v1.19.34 修复 */
    #modal-user .modal { max-width: 520px; }
    /* 单元入口卡片行：标题区留出按钮宽度 */
    .unit-entry-card .unit-entry-main { flex-wrap: wrap; }
  }
  @media (min-width: 1024px) {
    #app { max-width: 1080px; }
    .grade-grid, .voice-grid, #screen-classic .cc-options, .classic-modes, .options { grid-template-columns: repeat(4, 1fr); }
    #screen-wrongbook #wb-list, #screen-tiger #tiger-list, #screen-stage #stage-list { grid-template-columns: repeat(3, 1fr); }
    .battle-stage { height: 300px; }
    .arena-char { width: 150px; }
    .arena-char .ch-emoji { width: 150px; height: 150px; line-height: 150px; font-size: 112px; }
    #screen-home .home-main-btn { flex: 0 0 calc(25% - 6px); margin: 0; }
    /* 经典模式学习卡/总结：横向更舒展 */
    #screen-classic .classic-card { padding: 20px 24px; }
  }
  /* 手机/平板横屏（矮视口）：控制高度让内容在屏内滚动，战斗/学习区横向铺开 */
  @media (orientation: landscape) and (max-height: 520px) {
    body { padding: 8px; }
    #app { height: calc(100vh - 16px); height: calc(100dvh - 16px); border-radius: 16px; padding: 10px 14px 10px; }
    .screen.active { padding-bottom: 6px; }
    .battle-stage { height: 200px; }
    .arena-char { width: 110px; }
    .arena-char .ch-emoji { width: 110px; height: 110px; line-height: 110px; font-size: 80px; }
    /* v1.17.7 #33：横屏矮视口错题本/拦路虎单列紧凑（两列太挤、行距过高） */
    #screen-wrongbook #wb-list, #screen-tiger #tiger-list { display: block; }
    #screen-wrongbook .wb-item, #screen-tiger .tiger-item { padding: 7px 10px; margin-top: 5px; }
    #screen-wrongbook .wb-item .wb-actions { flex-direction: row; gap: 6px; }
    #screen-wrongbook .wb-item .wb-progress, #screen-tiger .tiger-item .tiger-dots { display: none; }
    /* v1.19.14 横屏：放大虚拟键盘、铺满横向空间、缩减错位缩进，解决「键盘太小 / 空间浪费」 */
    .kb { max-width: 660px; margin-left: auto; margin-right: auto; }
    .kb-row { gap: 6px; }
    .kb-row.r2 { padding: 0 2.5%; }
    .kb-row.r3 { padding: 0 9%; }
    .kb-key { max-width: 64px; height: 58px; line-height: 58px; font-size: 26px; border-radius: 10px; }
    .kb-key.caps, .kb-key.wide, .kb-key.danger { font-size: 16px; }
    .spell-slot { width: 34px; height: 50px; line-height: 48px; font-size: 30px; }
    /* 横屏：经典模式答题选项与模式按钮放大铺满，避免小而散、不协调 */
    #screen-classic .cc-options { gap: 12px; }
    #screen-classic .cc-opt { font-size: 18px; padding: 14px 12px; }
    #screen-classic .cc-question { font-size: 18px; }
    .classic-modes .cm-btn { padding: 12px 10px; font-size: 16px; }
    /* v1.19.19 横屏：顶部导航更扁、常规按钮收窄高度，避免大按钮占满矮视口、浪费横向空间 */
    .top-nav { margin-bottom: 6px; padding: 6px 8px; }
    .top-nav .btn { padding: 6px 12px; font-size: 13px; }
    .screen.active .btn:not(.small):not(#btn-next):not(#classic-next) { padding: 9px 16px; font-size: 15px; }
  }
/* ============ 词形变化 + 例句 卡片（ui-forms.js） ============ */
#modal-word-forms .modal { max-width: 360px; max-height: 80vh; overflow: auto; }
#modal-word-forms .ff-sec { background: #f7fafc; border: 1px solid #e5edf3; border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
#modal-word-forms .ff-sec-t { font-size: 12px; font-weight: 700; color: #2a7bbf; letter-spacing: .5px; margin-bottom: 8px; }
#modal-word-forms .ff-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed #eef2f6; font-size: 14px; line-height: 1.5; }
#modal-word-forms .ff-row:last-child { border-bottom: none; }
#modal-word-forms .ff-label { color: #8a97a5; flex: none; margin-right: 12px; font-size: 13px; }
#modal-word-forms .ff-val { color: #2a3a52; text-align: right; word-break: break-word; }
#modal-word-forms .ff-val b { color: #1f6feb; }
#modal-word-forms .ff-ex { background: #f0f8ff; border-color: #cfe6fb; }
#modal-word-forms .ff-ex-en { font-size: 15px; color: #1f3a5f; font-weight: 600; line-height: 1.6; margin-bottom: 4px; }
#modal-word-forms .ff-ex-zh { font-size: 13px; color: #5a6b80; line-height: 1.6; }