/* 3+证书英语闯关 - 共用样式 */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;color:#2d3436}
a{color:inherit;text-decoration:none}

/* 通用页面容器 */
.page{max-width:600px;margin:0 auto;padding:15px 15px 30px}

/* 顶部栏 */
.top-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:10px}
.btn-back{width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,0.25);color:#fff;font-size:1.2em;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-back:active{transform:scale(0.9)}
.page-title{font-size:1.2em;color:#fff;font-weight:bold;text-shadow:1px 1px 3px rgba(0,0,0,0.2)}
.xp-badge{background:rgba(255,255,255,0.2);color:#fff;padding:5px 12px;border-radius:20px;font-size:0.85em;font-weight:bold;white-space:nowrap}
.xp-badge .xp-num{color:#feca57}

/* 卡片 */
.card{background:#fff;border-radius:20px;padding:20px;margin-bottom:15px;box-shadow:0 4px 15px rgba(0,0,0,0.1)}

/* 按钮 */
.btn{padding:14px 28px;font-size:1em;font-family:inherit;border:none;border-radius:50px;cursor:pointer;font-weight:bold;color:#fff;transition:transform 0.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(0.95)}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2)}
.btn-success{background:linear-gradient(135deg,#00b894,#00cec9)}
.btn-danger{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}
.btn-warning{background:linear-gradient(135deg,#feca57,#f0932b);color:#2d3436}
.btn-outline{background:transparent;border:2px solid #fff;color:#fff}
.btn-sm{padding:10px 18px;font-size:0.85em;border-radius:30px}
.btn-block{width:100%}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}

/* 单元列表 */
.unit-list{display:flex;flex-direction:column;gap:12px}
.unit-card{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,0.08);cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:14px;border:2px solid transparent}
.unit-card:active{transform:scale(0.98)}
.unit-card.locked{opacity:0.5;cursor:not-allowed}
.unit-card.locked:active{transform:none}
.unit-card.completed{border-color:#00b894}
.unit-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5em;flex-shrink:0}
.unit-info{flex:1;min-width:0}
.unit-info h3{font-size:1em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unit-info p{font-size:0.8em;color:#636e72}
.unit-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lock-icon{font-size:1.5em;color:#b2bec3}

/* 等级标签 */
.level-tag{display:inline-block;padding:3px 10px;border-radius:10px;font-size:0.7em;font-weight:bold;color:#fff}
.level-1{background:#00b894}
.level-2{background:#0984e3}
.level-3{background:#6c5ce7}
.level-4{background:#e84393}

/* 星星 */
.stars{color:#feca57;font-size:1em;letter-spacing:2px}
.stars .empty{color:#dfe6e9}

/* 游戏界面 */
.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:8px}
.game-stat{background:rgba(255,255,255,0.15);color:#fff;padding:6px 14px;border-radius:20px;font-size:0.9em;font-weight:bold}
.game-stat .val{color:#feca57}
.lives{font-size:1.1em}
.lives .lost{opacity:0.3}

/* 进度条 */
.progress-bar{width:100%;height:10px;background:rgba(255,255,255,0.2);border-radius:10px;overflow:hidden;margin-bottom:15px}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,#feca57,#ff6b6b);border-radius:10px;transition:width 0.3s ease}

/* 题目卡片 */
.question-card{background:#fff;border-radius:20px;padding:25px 20px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.12);margin-bottom:15px}
.question-text{font-size:1.3em;font-weight:bold;color:#2d3436;margin-bottom:20px;line-height:1.5}
.question-text .blank{display:inline-block;min-width:80px;border-bottom:3px solid #6c5ce7;color:#6c5ce7;margin:0 4px}

/* 选项按钮 */
.options{display:flex;flex-direction:column;gap:10px}
.opt-btn{width:100%;padding:14px 18px;border:2px solid #dfe6e9;border-radius:14px;background:#fff;font-size:1em;font-family:inherit;cursor:pointer;transition:all 0.2s;text-align:left;display:flex;align-items:center;gap:12px;font-weight:500}
.opt-btn:active{transform:scale(0.98)}
.opt-btn .opt-letter{width:30px;height:30px;border-radius:50%;background:#f1f2f6;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#636e72;flex-shrink:0;font-size:0.9em}
.opt-btn.correct{border-color:#00b894;background:#e6fffa}
.opt-btn.correct .opt-letter{background:#00b894;color:#fff}
.opt-btn.wrong{border-color:#ff6b6b;background:#ffe8e8}
.opt-btn.wrong .opt-letter{background:#ff6b6b;color:#fff}
.opt-btn.disabled{pointer-events:none;opacity:0.6}

/* 连击提示 */
.combo-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:2em;font-weight:bold;color:#feca57;text-shadow:2px 2px 8px rgba(0,0,0,0.3);pointer-events:none;z-index:100;animation:comboAnim 0.8s ease forwards}
@keyframes comboAnim{0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}

/* 消消乐 */
.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:400px;margin:0 auto}
.match-card{aspect-ratio:1;border-radius:12px;cursor:pointer;perspective:500px;user-select:none;-webkit-user-select:none}
.match-card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 0.4s ease;border-radius:12px}
.match-card.flipped .match-card-inner{transform:rotateY(180deg)}
.match-card-front,.match-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:bold;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.match-card-front{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:1.5em}
.match-card-back{background:#fff;transform:rotateY(180deg);padding:6px;font-size:clamp(0.7em,2.5vw,1em);text-align:center;border:2px solid #dfe6e9}
.match-card.matched .match-card-back{border-color:#00b894;background:#e6fffa}
.match-card.matched{pointer-events:none}

/* 拼写输入 */
.spell-input{width:100%;padding:16px;border:3px solid #dfe6e9;border-radius:14px;font-size:1.3em;font-family:inherit;text-align:center;outline:none;transition:border-color 0.2s}
.spell-input:focus{border-color:#667eea}
.spell-input.correct{border-color:#00b894;background:#e6fffa}
.spell-input.wrong{border-color:#ff6b6b;background:#ffe8e8}
.spell-hint{font-size:0.9em;color:#636e72;margin-top:8px;min-height:1.5em}
.hint-letters{letter-spacing:3px;font-size:1.1em;color:#6c5ce7;margin-top:5px}

/* 弹窗 */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:200;padding:20px}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:24px;padding:30px 25px;text-align:center;max-width:380px;width:100%;animation:popIn 0.3s ease}
@keyframes popIn{0%{transform:scale(0.7);opacity:0}100%{transform:scale(1);opacity:1}}
.modal h2{font-size:1.6em;margin-bottom:10px}
.modal p{color:#636e72;margin-bottom:8px;font-size:1em}
.modal .result-stars{font-size:2.5em;margin:15px 0}
.modal .result-score{font-size:2em;font-weight:bold;color:#6c5ce7;margin:10px 0}

/* 主页导航网格 */
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.nav-card{background:#fff;border-radius:18px;padding:20px 15px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,0.1);cursor:pointer;transition:transform 0.2s}
.nav-card:active{transform:scale(0.96)}
.nav-card .nav-icon{font-size:2.5em;margin-bottom:8px}
.nav-card .nav-title{font-weight:bold;font-size:1em;margin-bottom:4px}
.nav-card .nav-desc{font-size:0.75em;color:#636e72}

/* 大标题样式 */
.hero{text-align:center;padding:20px 0;color:#fff}
.hero h1{font-size:clamp(1.6em,5vw,2.2em);margin-bottom:8px;text-shadow:2px 3px 6px rgba(0,0,0,0.2)}
.hero p{font-size:0.95em;opacity:0.9}

/* 统计卡片 */
.stats-row{display:flex;gap:10px;margin-bottom:15px}
.stat-item{flex:1;background:#fff;border-radius:14px;padding:12px 10px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.08)}
.stat-item .stat-val{font-size:1.4em;font-weight:bold;color:#6c5ce7}
.stat-item .stat-label{font-size:0.7em;color:#636e72;margin-top:2px}

/* 响应式 */
@media(max-width:400px){
.page{padding:10px 10px 20px}
.question-card{padding:18px 14px}
.question-text{font-size:1.1em}
.opt-btn{padding:12px 14px;font-size:0.95em}
.nav-grid{gap:8px}
.nav-card{padding:15px 10px}
}