/* ========== VOCAB GAME STYLES — Minimal B&W ========== */

/* === 主容器 === */
.vg-container { display:flex; flex-direction:column; height:100%; background:#fff; }
.vg-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; }

/* === 导航栏 — [FIX-弹性保护带] padding-top适配状态栏 === */
.vg-nav { display:flex; align-items:center; padding:12px 16px; padding-top: var(--guard-top, env(safe-area-inset-top, 12px)); background:#fff; border-bottom:1px solid #e8e8e8; gap:8px; box-sizing: border-box; }
.vg-nav-back { width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; color:#111; }
.vg-nav-title { flex:1; font-size:17px; font-weight:600; color:#111; letter-spacing:-0.3px; }
.vg-nav-actions { display:flex; gap:6px; }
.vg-nav-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; color:#666; }

/* === 首页 Hero === */
.vg-home-hero { background:#111; border-radius:14px; padding:22px; margin-bottom:20px; color:#fff; }
.vg-home-hero h3 { font-size:17px; font-weight:600; margin:0 0 4px; letter-spacing:-0.3px; }
.vg-home-hero p { font-size:13px; color:#aaa; margin:0; }
.vg-home-stats { display:flex; gap:8px; margin-top:16px; }
.vg-home-stat { background:rgba(255,255,255,0.1); border-radius:10px; padding:10px; flex:1; text-align:center; }
.vg-home-stat .num { font-size:20px; font-weight:700; color:#fff; }
.vg-home-stat .label { font-size:11px; color:#888; margin-top:2px; }

/* === 功能入口网格 === */
.vg-menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.vg-menu-item { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:14px 6px; text-align:center; cursor:pointer; transition:background 0.15s; }
.vg-menu-item:active { background:#f5f5f5; }
.vg-menu-icon { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:16px; background:#111; color:#fff; }
.vg-menu-item span { font-size:11px; color:#333; font-weight:500; display:block; }

/* === 选择联系人 === */
.vg-contact-list { display:flex; flex-direction:column; gap:1px; background:#e8e8e8; border-radius:12px; overflow:hidden; }
.vg-contact-item { display:flex; align-items:center; gap:12px; background:#fff; padding:14px 16px; cursor:pointer; transition:background 0.15s; }
.vg-contact-item:active { background:#f5f5f5; }
.vg-contact-item img { width:40px; height:40px; border-radius:50%; object-fit:cover; background:#e8e8e8; }
.vg-contact-item .name { font-size:15px; font-weight:500; color:#111; }
.vg-contact-item .desc { font-size:12px; color:#999; margin-top:2px; }

/* === 选择词书 === */
.vg-book-list { display:flex; flex-direction:column; gap:10px; }
.vg-book-item { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:16px; cursor:pointer; transition:border-color 0.15s; }
.vg-book-item.selected { border-color:#111; }
.vg-book-item:active { background:#fafafa; }
.vg-book-icon { width:40px; height:40px; border-radius:10px; background:#111; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; flex-shrink:0; }
.vg-book-info { flex:1; min-width:0; }
.vg-book-name { font-size:15px; font-weight:600; color:#111; }
.vg-book-meta { font-size:12px; color:#999; margin-top:3px; }
.vg-book-progress { height:3px; background:#e8e8e8; border-radius:2px; margin-top:8px; overflow:hidden; }
.vg-book-progress-bar { height:100%; background:#111; border-radius:2px; transition:width 0.3s; }
.vg-book-delete { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:#ccc; font-size:12px; border-radius:50%; flex-shrink:0; cursor:pointer; transition:color 0.15s,background 0.15s; }
.vg-book-delete:hover,.vg-book-delete:active { color:#e74c3c; background:#fef0ef; }

/* === 单词卡片 === */
.vg-card-area { display:flex; flex-direction:column; align-items:center; padding:24px 0; flex:1; }
.vg-card-counter { font-size:13px; color:#999; margin-bottom:14px; letter-spacing:0.5px; }
.vg-card-wrapper { width:280px; height:360px; perspective:1000px; cursor:pointer; margin-bottom:24px; }
.vg-card-inner { width:100%; height:100%; position:relative; transition:transform 0.6s; transform-style:preserve-3d; }
.vg-card-inner.flipped { transform:rotateY(180deg); }
.vg-card-front, .vg-card-back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; box-sizing:border-box; }
.vg-card-front { background:#111; color:#fff; }
.vg-card-back { background:#fff; color:#111; transform:rotateY(180deg); border:1px solid #e8e8e8; }
.vg-card-word { font-size:30px; font-weight:700; margin-bottom:8px; text-align:center; word-break:break-word; letter-spacing:-0.5px; }
.vg-card-phonetic { font-size:14px; color:#888; margin-bottom:12px; }
.vg-card-pos { font-size:13px; color:#aaa; background:rgba(255,255,255,0.15); padding:4px 14px; border-radius:20px; }
.vg-card-meaning { font-size:22px; font-weight:600; margin-bottom:10px; text-align:center; color:#111; }
.vg-card-example { font-size:13px; color:#666; text-align:center; line-height:1.6; margin-top:8px; }
.vg-card-hint { font-size:12px; color:#666; margin-top:20px; }
.vg-card-back-hint { font-size:12px; color:#bbb; margin-top:20px; }

/* 卡片操作按钮 */
.vg-card-actions { display:flex; gap:20px; margin-top:8px; }
.vg-card-btn { width:56px; height:56px; border-radius:50%; border:1px solid #e8e8e8; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:all 0.15s; background:#fff; }
.vg-card-btn:active { transform:scale(0.92); }
.vg-card-btn-wrong { color:#111; }
.vg-card-btn-sound { color:#111; font-size:16px; }
.vg-card-btn-right { color:#111; background:#111; color:#fff; border-color:#111; }

/* 联系人评论气泡 */
.vg-contact-bubble { background:#f5f5f5; border-radius:12px; padding:10px 14px; margin-top:16px; max-width:260px; display:flex; align-items:flex-start; gap:8px; }
.vg-contact-bubble img { width:24px; height:24px; border-radius:50%; flex-shrink:0; }
.vg-contact-bubble .text { font-size:13px; color:#333; line-height:1.5; }

/* === 学习报告 === */
.vg-report { background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:28px 20px; text-align:center; }
.vg-report h3 { font-size:18px; font-weight:600; margin:0 0 20px; color:#111; }
.vg-report-stats { display:flex; justify-content:center; gap:28px; margin-bottom:24px; }
.vg-report-stat { text-align:center; }
.vg-report-stat .num { font-size:28px; font-weight:700; color:#111; }
.vg-report-stat .label { font-size:12px; color:#999; margin-top:4px; }
.vg-report-bar { height:4px; background:#e8e8e8; border-radius:2px; margin:0 0 20px; overflow:hidden; }
.vg-report-bar-inner { height:100%; background:#111; border-radius:2px; }
.vg-report-actions { display:flex; gap:10px; }
.vg-report-btn { flex:1; padding:13px; border:none; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; letter-spacing:-0.2px; }
.vg-report-btn-primary { background:#111; color:#fff; }
.vg-report-btn-secondary { background:#f5f5f5; color:#333; border:1px solid #e8e8e8; }

/* === 拼写挑战 === */
.vg-spell-area { display:flex; flex-direction:column; align-items:center; padding:20px 0; }
.vg-spell-meaning { font-size:18px; font-weight:600; color:#111; margin-bottom:4px; text-align:center; }
.vg-spell-pos { font-size:13px; color:#999; margin-bottom:20px; }
.vg-spell-input-row { display:flex; gap:5px; margin-bottom:16px; flex-wrap:wrap; justify-content:center; }
.vg-spell-char { width:34px; height:42px; border:1.5px solid #ddd; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:#111; background:#fff; transition:border-color 0.2s; }
.vg-spell-char.active { border-color:#111; }
.vg-spell-char.correct { border-color:#111; background:#111; color:#fff; }
.vg-spell-char.wrong { border-color:#ccc; background:#f5f5f5; color:#999; text-decoration:line-through; }
.vg-spell-keyboard { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; max-width:340px; margin:0 auto; }
.vg-spell-key { width:30px; height:38px; border:1px solid #ddd; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; background:#fff; cursor:pointer; transition:all 0.1s; color:#111; }
.vg-spell-key:active { background:#111; color:#fff; border-color:#111; }
.vg-spell-key.used { opacity:0.2; pointer-events:none; }
.vg-spell-hint { margin-top:10px; padding:8px 16px; background:#f5f5f5; border-radius:8px; font-size:13px; color:#666; }
.vg-spell-timer { font-size:13px; color:#999; margin-bottom:6px; }
.vg-spell-score { font-size:13px; color:#111; font-weight:600; margin-bottom:14px; }

/* === 连连看 === */
.vg-match-area { padding:12px 0; }
.vg-match-columns { display:flex; gap:10px; }
.vg-match-col { flex:1; display:flex; flex-direction:column; gap:8px; }
.vg-match-item { padding:12px 8px; background:#fff; border-radius:10px; text-align:center; font-size:13px; font-weight:500; cursor:pointer; border:1.5px solid #e8e8e8; transition:all 0.2s; user-select:none; color:#111; }
.vg-match-item.selected { border-color:#111; background:#111; color:#fff; }
.vg-match-item.matched { background:#f5f5f5; border-color:#ddd; color:#bbb; pointer-events:none; }
.vg-match-item.wrong { border-color:#999; animation:vg-shake 0.4s; }
.vg-match-timer { text-align:center; font-size:13px; color:#999; margin-bottom:6px; }
.vg-match-score { text-align:center; font-size:13px; color:#111; font-weight:600; margin-bottom:12px; }

/* === 限时闪卡 === */
.vg-flash-area { display:flex; flex-direction:column; align-items:center; padding:24px 0; }
.vg-flash-card { width:280px; background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:28px; text-align:center; margin-bottom:16px; transition:transform 0.3s,opacity 0.3s; }
.vg-flash-card.slide-left { transform:translateX(-120%) rotate(-8deg); opacity:0; }
.vg-flash-card.slide-right { transform:translateX(120%) rotate(8deg); opacity:0; }
.vg-flash-word { font-size:24px; font-weight:700; color:#111; margin-bottom:8px; letter-spacing:-0.3px; }
.vg-flash-meaning { font-size:15px; color:#666; }
.vg-flash-timer-bar { width:280px; height:4px; background:#e8e8e8; border-radius:2px; overflow:hidden; margin-bottom:16px; }
.vg-flash-timer-inner { height:100%; background:#111; border-radius:2px; transition:width 0.1s linear; }
.vg-flash-btns { display:flex; gap:24px; }
.vg-flash-btn { width:60px; height:60px; border-radius:50%; border:1.5px solid #e8e8e8; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; background:#fff; color:#111; }
.vg-flash-btn:active { transform:scale(0.9); }
.vg-flash-btn-wrong { }
.vg-flash-btn-right { background:#111; color:#fff; border-color:#111; }

/* === PK对战 === */
.vg-pk-area { padding:12px 0; }
.vg-pk-header { display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:16px; margin-bottom:14px; }
.vg-pk-player { display:flex; flex-direction:column; align-items:center; gap:4px; }
.vg-pk-player img { width:36px; height:36px; border-radius:50%; object-fit:cover; background:#e8e8e8; }
.vg-pk-player .name { font-size:12px; color:#333; font-weight:500; }
.vg-pk-player .score { font-size:20px; font-weight:700; color:#111; }
.vg-pk-vs { font-size:14px; font-weight:700; color:#999; letter-spacing:1px; }
.vg-pk-round { font-size:12px; color:#999; text-align:center; margin-bottom:8px; }
.vg-pk-question { background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:20px; margin-bottom:12px; }
.vg-pk-stem { font-size:16px; font-weight:600; color:#111; margin-bottom:16px; text-align:center; }
.vg-pk-options { display:flex; flex-direction:column; gap:8px; }
.vg-pk-option { padding:13px 16px; background:#fafafa; border-radius:10px; font-size:14px; color:#111; cursor:pointer; border:1.5px solid transparent; transition:all 0.15s; }
.vg-pk-option:active { background:#f0f0f0; }
.vg-pk-option.selected { border-color:#111; background:#f5f5f5; }
.vg-pk-option.correct { border-color:#111; background:#111; color:#fff; }
.vg-pk-option.wrong { border-color:#ccc; background:#f5f5f5; color:#999; text-decoration:line-through; }
.vg-pk-result { text-align:center; padding:10px; font-size:14px; font-weight:500; border-radius:8px; margin-top:10px; }
.vg-pk-result.win { background:#f5f5f5; color:#111; }
.vg-pk-result.lose { background:#f5f5f5; color:#999; }
.vg-pk-result.draw { background:#f5f5f5; color:#666; }

/* === 联系人出题/讲题 聊天 === */
.vg-chat-area { display:flex; flex-direction:column; height:100%; }
.vg-chat-msgs { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.vg-chat-msg { max-width:80%; padding:12px 16px; border-radius:14px; font-size:14px; line-height:1.6; word-break:break-word; }
.vg-chat-msg.contact { background:#f5f5f5; color:#111; align-self:flex-start; border-bottom-left-radius:4px; }
.vg-chat-msg.user { background:#111; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.vg-chat-msg.system { background:#f5f5f5; color:#999; align-self:center; font-size:12px; border-radius:20px; padding:6px 14px; }
.vg-chat-input-bar { display:flex; gap:8px; padding:12px 16px; background:#fff; border-top:1px solid #e8e8e8; }
.vg-chat-input-bar input { flex:1; padding:10px 16px; border:1px solid #e8e8e8; border-radius:24px; font-size:14px; background:#fafafa; outline:none; color:#111; }
.vg-chat-input-bar input:focus { border-color:#111; }
.vg-chat-input-bar button { padding:10px 18px; background:#111; color:#fff; border:none; border-radius:24px; font-size:14px; cursor:pointer; white-space:nowrap; }

/* === 错题集 === */
.vg-wrong-list { display:flex; flex-direction:column; gap:10px; }
.vg-wrong-card { background:#fff; border:1px solid #e8e8e8; border-radius:12px; padding:16px; }
.vg-wrong-word { font-size:16px; font-weight:600; color:#111; }
.vg-wrong-meaning { font-size:13px; color:#666; margin-top:4px; }
.vg-wrong-detail { font-size:12px; color:#999; margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.vg-wrong-tag { display:inline-block; padding:3px 10px; background:#f5f5f5; border-radius:6px; font-size:11px; color:#666; }
.vg-wrong-tag.type-spelling { background:#f5f5f5; color:#111; font-weight:500; }
.vg-wrong-tag.type-meaning { background:#f5f5f5; color:#111; font-weight:500; }
.vg-wrong-note { font-size:12px; color:#444; margin-top:8px; padding:8px 12px; background:#fafafa; border-radius:6px; border-left:3px solid #111; }
.vg-wrong-actions { display:flex; gap:8px; margin-top:10px; }
.vg-wrong-actions button { padding:7px 14px; border:1px solid #e8e8e8; border-radius:8px; font-size:12px; background:#fff; color:#333; cursor:pointer; }
.vg-wrong-actions button:active { background:#f5f5f5; }

/* === 错题分析 === */
.vg-analysis { background:#fff; border:1px solid #e8e8e8; border-radius:14px; padding:16px; margin-bottom:14px; }
.vg-analysis h4 { font-size:14px; font-weight:600; color:#111; margin:0 0 12px; }
.vg-analysis-bar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vg-analysis-bar .label { font-size:12px; color:#666; width:50px; }
.vg-analysis-bar .bar { flex:1; height:6px; background:#f0f0f0; border-radius:3px; overflow:hidden; }
.vg-analysis-bar .bar-inner { height:100%; border-radius:3px; background:#111; }
.vg-analysis-bar .count { font-size:12px; color:#999; width:30px; text-align:right; }

/* === 通用按钮 === */
.vg-btn-primary { width:100%; padding:14px; background:#111; color:#fff; border:none; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; letter-spacing:-0.2px; }
.vg-btn-primary:active { opacity:0.8; }
.vg-btn-secondary { width:100%; padding:14px; background:#fff; color:#111; border:1px solid #e8e8e8; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; }
.vg-btn-secondary:active { background:#f5f5f5; }
.vg-empty { text-align:center; padding:48px 20px; color:#bbb; font-size:14px; }

/* === 筛选栏 === */
.vg-filter-bar { display:flex; gap:8px; padding:12px 0; overflow-x:auto; }
.vg-filter-btn { padding:7px 16px; border-radius:20px; font-size:13px; background:#f5f5f5; color:#666; border:none; cursor:pointer; white-space:nowrap; }
.vg-filter-btn.active { background:#111; color:#fff; }

/* === 动画 === */
@keyframes vg-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
@keyframes vg-fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.vg-animate-in { animation:vg-fadeIn 0.25s ease; }

/* === 加载中 === */
.vg-loading { text-align:center; padding:48px; }
.vg-loading i { font-size:20px; color:#111; }
.vg-loading p { font-size:13px; color:#999; margin-top:8px; }

/* === 学习中心入口 === */
.vg-icon-vocab { background:#111; }

/* === 弹窗 === */
.vg-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; z-index:9999; }
.vg-modal-box { background:#fff; border-radius:16px; width:90%; max-width:360px; max-height:80vh; overflow-y:auto; padding:24px; }
.vg-modal-title { font-size:17px; font-weight:600; color:#111; margin-bottom:16px; }

/* === Section title === */
.vg-section-title { font-size:14px; font-weight:600; color:#111; margin-bottom:10px; display:flex; align-items:center; gap:6px; }

/* [FIX-层级遮挡] 背单词layer在DOM中排在study layer之前，
   CSS的 .layer.show ~ .layer.show 规则让后面的layer层级更高，
   导致从学习App点"背单词"时被study layer遮挡。
   强制给vocab-game更高的z-index解决此问题 */
#layer-vocab-game.show {
    z-index: 5100 !important;
}

/* [FIX-词书导入] 词书独立上传弹窗样式 */
.vg-import-section { margin-top:16px; padding:16px; background:#f9f9f9; border-radius:12px; }
.vg-import-section h4 { font-size:14px; font-weight:600; color:#111; margin:0 0 8px; }
.vg-import-section p { font-size:12px; color:#888; margin:0 0 12px; line-height:1.5; }
.vg-import-textarea { width:100%; min-height:120px; border:1px solid #ddd; border-radius:8px; padding:10px; font-size:13px; font-family:inherit; resize:vertical; box-sizing:border-box; }
.vg-import-textarea:focus { border-color:#111; outline:none; }
.vg-import-input { width:100%; border:1px solid #ddd; border-radius:8px; padding:8px 10px; font-size:13px; box-sizing:border-box; margin-bottom:8px; }
.vg-import-input:focus { border-color:#111; outline:none; }
.vg-import-actions { display:flex; gap:8px; margin-top:12px; }
.vg-import-btn { flex:1; padding:10px; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; }
.vg-import-btn--primary { background:#111; color:#fff; }
.vg-import-btn--primary:active { background:#333; }
.vg-import-btn--secondary { background:#e8e8e8; color:#333; }
.vg-import-btn--secondary:active { background:#ddd; }
.vg-import-file-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:1px dashed #ccc; border-radius:8px; font-size:13px; color:#666; cursor:pointer; margin-bottom:8px; }
.vg-import-file-btn:active { background:#f5f5f5; }
.vg-import-format-hint { font-size:11px; color:#aaa; margin-top:6px; line-height:1.6; }
.vg-import-format-hint code { background:#eee; padding:1px 4px; border-radius:3px; font-size:11px; }
.vg-home-import-btn { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; background:#f5f5f5; border:1px dashed #ccc; border-radius:12px; margin-top:16px; font-size:13px; color:#666; cursor:pointer; }
.vg-home-import-btn:active { background:#eee; }