/* English Farm - Cartoon Farm Style CSS */
/* Design: warm colors, rounded shapes, playful but clean */

:root {
    --green-dark: #2E7D32;
    --green-mid: #4CAF50;
    --green-light: #81C784;
    --green-bg: #E8F5E9;
    --amber-dark: #E65100;
    --amber-mid: #FF9800;
    --amber-light: #FFB74D;
    --amber-bg: #FFF3E0;
    --sky-blue: #64B5F6;
    --sky-bg: #E3F2FD;
    --soil-dark: #6D4C41;
    --soil-mid: #8D6E63;
    --soil-light: #BCAAA4;
    --cream: #FFF8E1;
    --white: #FFFFFF;
    --text-dark: #1B5E20;
    --text-mid: #388E3C;
    --text-light: #757575;
    --danger: #EF5350;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;

    /* ===== Phase 57: 游戏化全局规范（对齐《前端游戏化重构指令书》）===== */
    /* 主色语义 */
    --color-primary: #FFB800;      /* 明黄：按钮、金币 */
    --color-secondary: #4CAF50;    /* 草绿：农场、成功 */
    --color-accent: #FF6B6B;       /* 橙红：警告、战斗 */
    --color-info: #4A90E2;         /* 天蓝：学习、英语角 */
    --color-purple: #9B59B6;       /* 紫：游乐场、钻石 */
    /* 背景/文字 */
    --bg-page: #F0F7E6;
    --bg-card: #FFFFFF;
    --text-primary: #2C3E50;
    --text-secondary: #7F8C8D;
    --text-inverse: #FFFFFF;
    /* 圆角/阴影 */
    --radius-md: 16px;
    --radius-full: 9999px;
    --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-button: 0 4px 0 rgba(0,0,0,0.15);
    --shadow-float: 0 8px 24px rgba(0,0,0,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Phase 57: 全局游戏化交互反馈 —— 所有按钮按压缩放 */
button:not(:disabled):active { transform: scale(0.95); transition: transform 0.1s; }

/* Phase 57: 全局动画关键帧 */
@keyframes flyToWallet {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx, 0px), var(--ty, -120px)) scale(0.4); opacity: 0; }
}
@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@keyframes comboPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,184,0,.55); }
    50% { box-shadow: 0 0 30px rgba(255,184,0,.9); }
}
@keyframes floatBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Phase 57: 通用游戏按钮（新页面逐步套用） */
.gbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; font-weight: 900;
    border-radius: var(--radius-full); padding: 12px 28px; font-size: 17px;
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--color-primary), #FF8C00);
    box-shadow: var(--shadow-button);
    transition: transform 0.1s, filter 0.15s;
    font-family: inherit;
}
.gbtn:active { transform: scale(0.95); }
.gbtn.success { background: linear-gradient(135deg, #66BB6A, var(--green-dark)); }
.gbtn.info { background: linear-gradient(135deg, #64B5F6, #1565C0); }
.gbtn.accent { background: linear-gradient(135deg, #FF8A80, #E53935); }
.gbtn.purple { background: linear-gradient(135deg, #BA68C8, #6A1B9A); }

/* Phase 57: 通用插画封面卡（轻松练/游乐场封面卡基座） */
.gcard {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-card); box-shadow: var(--shadow-card);
    cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: none; padding: 0; text-align: center;
    font-family: inherit;
}
.gcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.gcard:active { transform: scale(0.96); }

/* ===== Phase 59: 分龄动态主题（teen = 9-15 岁探险/任务风） ===== */
:root[data-age="teen"] {
    --color-primary: #4A90E2;      /* 科技蓝 */
    --color-accent: #7C4DFF;       /* 冷紫 */
    --bg-page: #EEF2F7;            /* 冷调浅灰蓝背景 */
    --radius: 10px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;             /* 小圆角 */
    --shadow-card: 0 2px 10px rgba(23,43,77,.10);
    --shadow-float: 0 6px 18px rgba(23,43,77,.16);
    --shadow-button: 0 2px 0 rgba(23,43,77,.18);
    /* 同步覆盖旧农场变量（既有样式大量引用，才能整体变冷） */
    --green-bg: #EEF2F7;
    --green-dark: #1565C0;
    --green-mid: #4A90E2;
    --green-light: #90CAF9;
    --amber-dark: #1565C0;
    --amber-mid: #4A90E2;
    --amber-light: #90CAF9;
    --amber-bg: #E8F0FA;
    --sky-blue: #64B5F6;
    --sky-bg: #E8F0FA;
    --cream: #F4F7FB;
    --text-dark: #1A2B45;
    --text-mid: #40608F;
    --danger: #E53935;
}
:root[data-age="teen"] body,
:root[data-age="teen"] { font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
/* 高龄段：去掉低幼浮动动画（保留功能性反馈） */
:root[data-age="teen"] .rx-card-ico,
:root[data-age="teen"] .hub-icon,
:root[data-age="teen"] .enemy-art-emoji,
:root[data-age="teen"] .recharge-coins-art,
:root[data-age="teen"] .recharge-art .cs,
:root[data-age="teen"] .recharge-art .gem-shine,
:root[data-age="teen"] .npc-guide-avatar,
:root[data-age="teen"] .town-enter-ico,
:root[data-age="teen"] .town-arrive-ico,
:root[data-age="teen"] .town-arrive-go { animation: none; }
/* 高龄段：宠物跟随简化（影子小、不摇头） */
:root[data-age="teen"] .farm-pet { transform: scale(.85); opacity: .92; }
/* 高龄段：按钮渐变更冷峻 */
:root[data-age="teen"] .gbtn { background: linear-gradient(135deg, #64B5F6, #1565C0); }
:root[data-age="teen"] .gbtn.success { background: linear-gradient(135deg, #66BB6A, #2E7D32); }
:root[data-age="teen"] .gbtn.accent { background: linear-gradient(135deg, #7C4DFF, #4527A0); }
/* 高龄段：战斗选关卡更酷（暗色底座） */
:root[data-age="teen"] .enemy-art { filter: saturate(.82) contrast(1.05); }
:root[data-age="teen"] .enemy-card { border-width: 1px; }
/* 高龄段：农场页背景冷一点 */
:root[data-age="teen"] body { background: var(--bg-page); }

/* ===== Phase 59b: adult 档（16 岁+ 大学）—— Notion 式干净质感 ===== */
:root[data-age="adult"] {
    --color-primary: #2F6FED;
    --color-accent: #5E35B1;
    --bg-page: #F7F8FA;
    --radius: 6px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-card: 0 1px 4px rgba(20,30,50,.08);
    --shadow-float: 0 4px 14px rgba(20,30,50,.12);
    --shadow-button: 0 1px 0 rgba(20,30,50,.14);
    /* 旧变量同步（干净冷灰，零童趣） */
    --green-bg: #F7F8FA;
    --green-dark: #1F2937;
    --green-mid: #3B82F6;
    --green-light: #93C5FD;
    --amber-dark: #1F2937;
    --amber-mid: #3B82F6;
    --amber-light: #93C5FD;
    --amber-bg: #EEF1F5;
    --sky-blue: #3B82F6;
    --sky-bg: #EEF1F5;
    --cream: #FFFFFF;
    --text-dark: #111827;
    --text-mid: #4B5563;
    --text-light: #9CA3AF;
}
:root[data-age="adult"] body { font-family: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg-page); }
:root[data-age="adult"] .gbtn { background: linear-gradient(135deg, #3B82F6, #1D4ED8); box-shadow: 0 1px 0 rgba(20,30,50,.2); }
:root[data-age="adult"] .gbtn.success { background: linear-gradient(135deg, #34D399, #059669); }
:root[data-age="adult"] .gbtn.accent { background: linear-gradient(135deg, #8B5CF6, #5B21B6); }
/* adult：关闭全部低幼装饰动画与圆脸元素 */
:root[data-age="adult"] .rx-card-ico,
:root[data-age="adult"] .hub-icon,
:root[data-age="adult"] .enemy-art-emoji,
:root[data-age="adult"] .recharge-coins-art,
:root[data-age="adult"] .recharge-art .cs,
:root[data-age="adult"] .recharge-art .gem-shine,
:root[data-age="adult"] .npc-guide-avatar,
:root[data-age="adult"] .town-enter-ico,
:root[data-age="adult"] .town-arrive-ico,
:root[data-age="adult"] .town-arrive-go,
:root[data-age="adult"] .rp-final-icon { animation: none; }
:root[data-age="adult"] .npc-guide { display: none; }   /* 大学档不需要吉祥物引导 */
:root[data-age="adult"] .enemy-card { border-width: 1px; }
:root[data-age="adult"] .enemy-art { filter: grayscale(.25) contrast(1.02); height: 76px; }
:root[data-age="adult"] .farm-pet { transform: scale(.8); opacity: .8; }

body {
    font-family: 'Nunito', 'Arial Rounded MT Bold', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: var(--green-bg);
    color: var(--text-dark);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* Screens */
.screen { display: none; height: 100vh; height: 100dvh; }
.screen.active { display: flex; flex-direction: column; }

/* ============ Auth Screen ============ */
#authScreen {
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #81C784 0%, #4CAF50 40%, #66BB6A 70%, #43A047 100%);
    padding: 20px;
}

.auth-container {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: var(--shadow-lg);
}

.auth-logo { text-align: center; margin-bottom: 24px; }

.logo-icon {
    width: 120px;
    height: 80px;
    margin: 0 auto 12px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #64B5F6 0%, #90CAF9 50%, #81C784 50%, #4CAF50 100%);
}

.sun {
    width: 28px; height: 28px; border-radius: 50%;
    background: #FFD54F; position: absolute; top: 8px; right: 12px;
    box-shadow: 0 0 0 4px rgba(255,213,79,0.3);
}

.cloud {
    position: absolute; background: var(--white); border-radius: 20px;
}
.cloud-1 { width: 40px; height: 14px; top: 14px; left: 16px; border-radius: 14px; }
.cloud-1::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:var(--white); top:-6px; left:8px; }
.cloud-2 { width: 30px; height: 10px; top: 22px; left: 50px; border-radius: 10px; }

.hill {
    position: absolute; bottom: 0; border-radius: 50% 50% 0 0;
}
.hill-1 { width: 80px; height: 30px; background: #66BB6A; left: -10px; }
.hill-2 { width: 60px; height: 24px; background: #4CAF50; right: -5px; }

.fence {
    position: absolute; bottom: 4px; left: 0; right: 0; height: 10px;
    background: repeating-linear-gradient(90deg, #8D6E63 0, #8D6E63 3px, transparent 3px, transparent 12px);
}

.auth-logo h1 {
    font-size: 28px; color: var(--green-dark); font-weight: 700;
    margin-top: 8px;
}

.tagline { color: var(--text-light); font-size: 14px; margin-top: 4px; }

.auth-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    background: var(--green-bg); border-radius: var(--radius-sm); padding: 4px;
}

.tab-btn {
    flex: 1; padding: 10px; border: none; background: transparent;
    font-size: 15px; font-weight: 500; color: var(--text-light);
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
}

.tab-btn.active { background: var(--white); color: var(--green-dark); box-shadow: var(--shadow); }

.auth-form { display: none; }
.auth-form.active { display: flex; flex-direction: column; gap: 12px; }

.auth-form input {
    padding: 14px 16px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm);
    font-size: 16px; transition: border-color 0.2s; background: #FAFAFA;
}

.auth-form input:focus { border-color: var(--green-mid); outline: none; background: var(--white); }

.difficulty-selector { margin: 4px 0; }
.difficulty-selector > label { font-size: 13px; color: var(--text-light); display: block; margin-bottom: 6px; }
.diff-options { display: flex; gap: 8px; }
.diff-option {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 8px 4px; border: 2px solid #E0E0E0; border-radius: 8px;
    font-size: 12px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.diff-option input { display: none; }
.diff-option:has(input:checked) { border-color: var(--green-mid); background: var(--green-bg); color: var(--green-dark); }

.btn-primary {
    padding: 14px; border: none; border-radius: var(--radius-sm);
    background: var(--green-mid); color: var(--white);
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; margin-top: 4px;
}
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary:active { transform: translateY(0); }

.auth-hint { text-align: center; font-size: 12px; color: var(--text-light); margin-top: 16px; }

/* ============ App Screen ============ */
#appScreen { background: var(--green-bg); }

/* Top Bar */
.top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); z-index: 10;
}

.player-info { display: flex; align-items: center; gap: 10px; }

.player-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--green-mid); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; border: 3px solid var(--green-light);
}

.player-meta { display: flex; flex-direction: column; }
.player-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.player-level { font-size: 12px; color: var(--green-mid); font-weight: 500; }

.resources { display: flex; gap: 8px; }

.resource {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px; border-radius: 20px;
    font-size: 14px; font-weight: 600;
}

.resource.coins { background: var(--amber-bg); color: var(--amber-dark); }
.resource.gems { background: #F3E5F5; color: #7B1FA2; }
.resource.streak { background: #FFEBEE; color: #C62828; }

.resource-icon {
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--white);
}
.coins .resource-icon { background: var(--amber-mid); }
.gems .resource-icon { background: #AB47BC; }
.streak .resource-icon { background: #EF5350; }

/* XP Bar */
.xp-bar-container {
    height: 6px; background: #E0E0E0; position: relative;
}
.xp-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--green-mid), var(--green-light));
    border-radius: 0 3px 3px 0; transition: width 0.5s ease;
    width: 0%;
}
.xp-bar-text {
    position: absolute; right: 8px; top: -18px;
    font-size: 11px; color: var(--text-light); font-weight: 500;
}

/* Main Content */
.main-content { flex: 1; overflow-y: auto; position: relative; }

.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* ============ Farm View ============ */
.farm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
}

.farm-header h2 { font-size: 20px; color: var(--green-dark); }

.farm-stats-mini { display: flex; gap: 6px; }
.stat-pill {
    background: var(--white); padding: 4px 10px; border-radius: 12px;
    font-size: 11px; color: var(--text-light); box-shadow: var(--shadow);
}
.stat-pill b { color: var(--green-dark); }

.farm-canvas-wrapper {
    flex: 1; position: relative; margin: 0 12px;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 350px;
}

#farmCanvas { width: 100%; height: 100%; display: block; }

.farm-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

/* Farm Actions */
.farm-actions {
    display: flex; gap: 8px; padding: 12px 16px 16px;
}

.action-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 12px 4px; border: none; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all 0.2s; position: relative;
}

.action-btn:active { transform: scale(0.95); }

.plant-btn { background: var(--green-light); color: var(--white); }
.plant-btn:hover { background: var(--green-mid); }
.water-btn { background: var(--sky-blue); color: var(--white); }
.water-btn:hover { background: #42A5F5; }
.grammar-btn { background: var(--amber-light); color: var(--white); }
.grammar-btn:hover { background: var(--amber-mid); }

.action-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.3); display: flex;
    align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700;
}

.action-badge {
    position: absolute; top: 6px; right: 20%;
    background: var(--danger); color: var(--white);
    font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid var(--white);
}

/* ============ Learning View ============ */
.learn-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.learn-header h2 { font-size: 18px; color: var(--green-dark); }
.learn-progress { font-size: 14px; color: var(--text-light); font-weight: 500; }

.back-btn {
    padding: 6px 14px; border: 2px solid var(--green-light); border-radius: 20px;
    background: transparent; color: var(--green-dark); font-size: 13px;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.back-btn:hover { background: var(--green-bg); }

.learn-content {
    flex: 1; overflow-y: auto; padding: 20px 16px;
    display: flex; flex-direction: column; align-items: center;
}

/* Word Card */
.word-card {
    background: var(--white); border-radius: var(--radius-lg);
    padding: 32px 24px; width: 100%; max-width: 420px;
    box-shadow: var(--shadow-lg); text-align: center;
    margin-bottom: 16px; animation: cardSlideIn 0.3s ease;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.word-card .word-text {
    font-size: 36px; font-weight: 700; color: var(--text-dark);
    margin-bottom: 8px;
}

.word-card .word-phonetic {
    font-size: 16px; color: var(--text-light); margin-bottom: 16px;
    font-family: 'Georgia', serif;
}

.word-card .word-meaning {
    font-size: 22px; color: var(--green-dark); font-weight: 500;
    margin-bottom: 12px;
}

.word-card .word-pos {
    display: inline-block; padding: 2px 10px; border-radius: 8px;
    background: var(--green-bg); font-size: 12px; color: var(--green-mid);
    margin-bottom: 16px;
}

.word-card .word-example {
    font-size: 14px; color: var(--text-light); line-height: 1.6;
    padding: 12px; background: #FAFAFA; border-radius: var(--radius-sm);
    margin-top: 8px;
}

.word-card .word-example-cn {
    font-size: 13px; color: var(--text-light); margin-top: 6px;
}

.speak-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: var(--sky-blue); color: var(--white); font-size: 18px;
    cursor: pointer; margin: 8px auto; display: flex;
    align-items: center; justify-content: center;
}
.speak-btn:hover { background: #42A5F5; }

/* Quiz Options */
.quiz-options { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 420px; }

.quiz-option {
    padding: 16px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm);
    background: var(--white); font-size: 16px; cursor: pointer;
    transition: all 0.2s; text-align: center;
}

.quiz-option:hover { border-color: var(--green-light); background: var(--green-bg); }

.quiz-option.correct {
    border-color: var(--green-mid); background: var(--green-bg);
    color: var(--green-dark); font-weight: 600;
}

.quiz-option.wrong {
    border-color: var(--danger); background: #FFEBEE;
    color: var(--danger);
}

.quiz-option.disabled { pointer-events: none; opacity: 0.7; }

/* Phase 33: 提示卡按钮 */
.hint-btn {
    margin-top: 12px; padding: 10px 18px; border: 2px dashed #FFB300;
    border-radius: var(--radius-sm); background: #FFF8E1; color: #B26A00;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.hint-btn:hover { background: #FFECB3; }
.hint-btn:active { transform: scale(0.96); }
.quiz-option.hint-glow { box-shadow: 0 0 0 4px rgba(255, 179, 0, 0.35); animation: hintPulse 1s ease-in-out 2; }
@keyframes hintPulse { 50% { transform: scale(1.04); } }

/* Spelling Input */
.spell-input {
    width: 100%; max-width: 420px; padding: 16px;
    border: 2px solid var(--green-light); border-radius: var(--radius-sm);
    font-size: 20px; text-align: center; letter-spacing: 2px;
    text-transform: lowercase;
}
.spell-input:focus { outline: none; border-color: var(--green-mid); }

/* Learn Footer */
.learn-footer {
    padding: 12px 16px; background: var(--white);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.06);
}

.learn-rewards {
    display: flex; gap: 12px; justify-content: center;
    font-size: 14px; color: var(--text-light);
}

.learn-rewards .reward-item {
    display: flex; align-items: center; gap: 4px;
}

.learn-rewards .reward-coins { color: var(--amber-dark); }
.learn-rewards .reward-xp { color: var(--green-mid); }

/* Session Complete */
.session-complete {
    text-align: center; padding: 40px 20px;
}

.session-complete .complete-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--green-bg); margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
}

.session-complete h2 { font-size: 24px; color: var(--green-dark); margin-bottom: 8px; }
.session-complete p { color: var(--text-light); margin-bottom: 20px; }

.session-summary {
    display: flex; gap: 16px; justify-content: center; margin-bottom: 24px;
}

.summary-item {
    text-align: center;
}
.summary-item .summary-value { font-size: 28px; font-weight: 700; color: var(--green-dark); }
.summary-item .summary-label { font-size: 12px; color: var(--text-light); }

/* ============ Shop View ============ */
.shop-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px; padding: 16px;
}

.shop-item {
    background: var(--white); border-radius: var(--radius);
    padding: 16px; text-align: center; box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.shop-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.shop-item .shop-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--green-bg); margin: 0 auto 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; color: var(--green-mid);
}

.shop-item h3 { font-size: 14px; color: var(--text-dark); margin-bottom: 4px; }
.shop-item p { font-size: 11px; color: var(--text-light); margin-bottom: 8px; line-height: 1.4; }

.shop-price {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 12px;
    font-size: 13px; font-weight: 600;
}
.shop-price.coins { background: var(--amber-bg); color: var(--amber-dark); }
.shop-price.gems { background: #F3E5F5; color: #7B1FA2; }

.buy-btn {
    width: 100%; padding: 8px; border: none; border-radius: 8px;
    background: var(--green-mid); color: var(--white);
    font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 8px;
}
.buy-btn:hover { background: var(--green-dark); }
.buy-btn:disabled { background: #BDBDBD; cursor: not-allowed; }

/* ============ Stats View ============ */
.stats-content { padding: 16px; }

.stats-card {
    background: var(--white); border-radius: var(--radius);
    padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow);
}

.stats-card h3 { font-size: 15px; color: var(--green-dark); margin-bottom: 12px; }

.stats-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}

.stat-box {
    text-align: center; padding: 16px 8px;
    background: var(--green-bg); border-radius: var(--radius-sm);
}

.stat-box .stat-value { font-size: 28px; font-weight: 700; color: var(--green-dark); }
.stat-box .stat-label { font-size: 11px; color: var(--text-light); margin-top: 4px; }

.cefr-bar {
    display: flex; height: 24px; border-radius: 8px; overflow: hidden; margin-top: 8px;
}
.cefr-segment {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: var(--white);
    transition: width 0.3s;
}

/* ============ Leaderboard ============ */
.leaderboard-list { padding: 16px; }

.lb-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--white);
    border-radius: var(--radius-sm); margin-bottom: 8px;
    box-shadow: var(--shadow);
}

.lb-rank {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.lb-rank.rank-1 { background: #FFD700; color: #F57F17; }
.lb-rank.rank-2 { background: #E0E0E0; color: #616161; }
.lb-rank.rank-3 { background: #FFCC80; color: #E65100; }
.lb-rank.rank-other { background: var(--green-bg); color: var(--green-mid); }

.lb-info { flex: 1; }
.lb-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.lb-detail { font-size: 12px; color: var(--text-light); }

.lb-score { text-align: right; }
.lb-score .lb-xp { font-size: 16px; font-weight: 700; color: var(--green-dark); }
.lb-score .lb-words { font-size: 11px; color: var(--text-light); }

/* ============ Bottom Nav ============ */
.bottom-nav {
    display: flex; background: var(--white);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.08); padding: 6px 0;
    padding-bottom: env(safe-area-inset-bottom, 6px);
}

.nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px; border: none; background: transparent;
    color: var(--text-light); cursor: pointer; transition: color 0.2s;
}

.nav-btn.active { color: var(--green-mid); }

.nav-icon {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}

.nav-btn.active .nav-icon { background: var(--green-bg); }

.nav-label { font-size: 11px; font-weight: 500; }

/* ============ Toast ============ */
.toast-container {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    z-index: 1000; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--text-dark); color: var(--white);
    padding: 10px 20px; border-radius: 20px;
    font-size: 14px; font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: toastSlide 0.3s ease, toastFade 0.3s ease 2.7s forwards;
}

.toast.success { background: var(--green-mid); }
.toast.error { background: var(--danger); }
.toast.reward { background: var(--amber-mid); }

@keyframes toastSlide {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastFade {
    to { opacity: 0; transform: translateY(-10px); }
}

/* ============ Modals ============ */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 2000;
    align-items: center; justify-content: center;
}

.modal-overlay.active { display: flex; }

.modal-content {
    background: var(--white); border-radius: var(--radius-lg);
    padding: 32px 24px; max-width: 320px; width: 90%;
    text-align: center; box-shadow: var(--shadow-lg);
    animation: modalPop 0.3s ease;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.level-up-stars { font-size: 32px; color: #FFD700; margin-bottom: 8px; }
.level-up-modal h2 { font-size: 28px; color: var(--green-dark); margin-bottom: 8px; }
.level-up-modal p { color: var(--text-light); margin-bottom: 4px; }
.level-up-bonus { color: var(--amber-dark); font-weight: 600; margin: 8px 0 16px !important; }

.harvest-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--amber-bg); margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; color: var(--amber-dark);
}

.harvest-modal h2 { font-size: 24px; color: var(--amber-dark); margin-bottom: 8px; }
.harvest-modal p { color: var(--text-light); margin-bottom: 16px; }

/* ============ Responsive ============ */
@media (min-width: 768px) {
    .auth-container { max-width: 420px; }
    .top-bar { padding: 12px 24px; }
    .farm-header { padding: 16px 24px; }
    .farm-actions { padding: 16px 24px 20px; }
    .word-card { padding: 40px 32px; }
    .word-card .word-text { font-size: 42px; }
    .learn-content { padding: 24px; }
    .shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (min-width: 1024px) {
    /* Phase 45: 桌面/iPad 横屏不再锁 480px 小条，由底部大屏满屏自适应层整体放大铺满 */
}

/* Scrollbar */
::-webkit-scrollbar { width: 0; }

/* ============ Journey View ============ */
.journey-content {
    flex: 1; overflow-y: auto; padding: 0 0 16px;
}

.journey-canvas-wrapper {
    height: 280px; position: relative; margin: 0 12px;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
}

#journeyCanvas { width: 100%; height: 100%; display: block; }

.journey-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.journey-info {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
}

.journey-encounters {
    font-size: 14px; color: var(--text-mid);
}
.journey-encounters b { color: var(--amber-dark); font-size: 18px; }

.journey-btn {
    flex: 0 0 auto; padding: 10px 24px; background: var(--amber-mid);
    color: var(--white); font-size: 14px;
}
.journey-btn:hover { background: var(--amber-dark); }

.journey-distance {
    font-size: 14px; color: var(--amber-dark); font-weight: 600;
}

.pet-list { padding: 12px 16px; }
.pet-list h3 { font-size: 16px; color: var(--green-dark); margin-bottom: 12px; }

.pet-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.pet-card {
    background: var(--white); border: 2px solid; border-radius: var(--radius-sm);
    padding: 12px 8px; text-align: center; box-shadow: var(--shadow);
    cursor: pointer; transition: transform 0.2s; position: relative;
}
.pet-card:hover { transform: translateY(-2px); }

.pet-emoji {
    width: 40px; height: 40px; border-radius: 50%; margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--white);
}

.pet-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.pet-type { font-size: 11px; color: var(--text-light); }
.pet-skill { font-size: 10px; color: var(--green-mid); margin-top: 2px; }
.pet-level { font-size: 10px; color: var(--amber-dark); margin-top: 4px; }

.pet-active-badge {
    display: inline-block; background: var(--green-mid); color: var(--white);
    font-size: 9px; padding: 2px 6px; border-radius: 8px; margin-top: 4px;
}

.empty-hint { color: var(--text-light); font-size: 13px; text-align: center; padding: 20px; }

/* Encounter Modal */
.encounter-modal {
    max-width: 360px;
}

.encounter-pet-display { text-align: center; margin-bottom: 12px; }

.encounter-pet-emoji {
    width: 80px; height: 80px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--white);
}

.encounter-rarity {
    font-size: 16px; letter-spacing: 4px; text-align: center; margin-top: 4px;
}

.encounter-desc {
    font-size: 13px; color: var(--text-light); line-height: 1.5; margin-bottom: 8px;
    text-align: center;
}

.encounter-skill { text-align: center; margin-bottom: 16px; }

.skill-badge {
    display: inline-block; background: var(--sky-bg); color: var(--sky-blue);
    padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
}

.encounter-quiz-question {
    text-align: center; margin-bottom: 12px;
}

.encounter-quiz .quiz-word {
    font-size: 28px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px;
}
.encounter-quiz .quiz-phonetic { font-size: 14px; color: var(--text-light); }
.encounter-quiz .quiz-hint { font-size: 12px; color: var(--text-light); margin-top: 8px; }

.encounter-success, .encounter-fail {
    text-align: center; padding: 20px 0;
}
.encounter-success h3, .encounter-fail h3 {
    font-size: 20px; margin-bottom: 8px;
}
.encounter-success h3 { color: var(--green-dark); }
.encounter-fail h3 { color: var(--text-light); }
.encounter-xp { color: var(--amber-dark); font-weight: 600; }

.encounter-actions { margin-top: 16px; }

/* ============ Battle View ============ */
.battle-content {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
}

.battle-arena {
    height: 240px; position: relative; margin: 0 12px;
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow);
}

#battleCanvas { width: 100%; height: 100%; display: block; }

.battle-hud {
    display: flex; justify-content: space-between; padding: 12px 16px;
}

.hud-enemy, .hud-player {
    flex: 1; max-width: 180px;
}

.hud-enemy { text-align: right; }
.hud-player { text-align: left; }

.hud-label {
    font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px;
}

.hp-bar {
    height: 14px; background: #E0E0E0; border-radius: 7px; overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.hp-fill {
    height: 100%; border-radius: 7px; transition: width 0.5s ease; width: 100%;
}
.enemy-hp { background: linear-gradient(90deg, #EF5350, #E53935); }
.player-hp { background: linear-gradient(90deg, #66BB6A, #43A047); }

.hud-hp-text {
    font-size: 11px; color: var(--text-light); margin-top: 2px;
}

.combo-display {
    text-align: center; min-height: 24px;
}

.battle-question {
    flex: 1; padding: 16px; display: flex; flex-direction: column; align-items: center;
}

.battle-q-type {
    font-size: 11px; color: var(--text-light); margin-bottom: 8px;
    text-transform: uppercase;
}

.battle-q-text {
    font-size: 18px; color: var(--text-dark); text-align: center;
    margin-bottom: 16px; line-height: 1.5; max-width: 420px;
}

.battle-options {
    width: 100%; max-width: 420px;
}

/* Battle Select */
.battle-select { padding: 16px; }

.battle-scenario-group {
    margin-bottom: 20px;
}

.battle-scenario-group h3 {
    font-size: 16px; color: var(--green-dark); margin-bottom: 12px;
    padding-bottom: 4px; border-bottom: 2px solid var(--green-light);
}

.boss-group h3 { color: var(--danger); border-color: var(--danger); }

.enemy-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.enemy-card {
    background: var(--white); border: 2px solid; border-radius: var(--radius-sm);
    padding: 12px; text-align: center; box-shadow: var(--shadow);
    cursor: pointer; transition: transform 0.2s; position: relative;
}

.enemy-card:hover { transform: translateY(-2px); }

.boss-card {
    border-color: #B71C1C !important; background: #FFEBEE;
}

.enemy-emoji {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--green-bg); margin: 0 auto 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: var(--green-mid);
}

.boss-card .enemy-emoji { background: #FFCDD2; color: #B71C1C; }

.enemy-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.enemy-stats { font-size: 11px; color: var(--text-light); margin: 4px 0; }

.enemy-diff {
    display: inline-block; padding: 2px 8px; border-radius: 8px;
    font-size: 10px; font-weight: 700; color: var(--white);
}
.enemy-diff.boss { background: #B71C1C; }

/* Battle Result */
.battle-result-modal { max-width: 320px; }

.result-icon { margin-bottom: 12px; }

.result-win, .result-lose {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700; color: var(--white);
}
.result-win { background: var(--green-mid); }
.result-lose { background: var(--danger); }

.battle-result-modal h2 {
    font-size: 24px; margin-bottom: 12px;
}

.result-rewards {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px;
}

.result-reward-item {
    font-size: 16px; color: var(--amber-dark); font-weight: 600;
}

.result-reward-item.level-up {
    color: var(--green-mid); font-size: 18px;
}

/* ============ Scenario View ============ */
.scenario-content {
    flex: 1; overflow-y: auto; padding: 16px;
}

.scenario-list { margin-bottom: 20px; }

.scenario-card {
    background: var(--white); border-radius: var(--radius); padding: 16px;
    margin-bottom: 10px; box-shadow: var(--shadow);
    cursor: pointer; transition: transform 0.2s;
}
.scenario-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.scenario-card-header {
    display: flex; gap: 12px; align-items: flex-start;
}

.scenario-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--green-bg); display: flex; align-items: center; justify-content: center;
    font-size: 24px; flex-shrink: 0;
}

.scenario-card-header h3 {
    font-size: 16px; color: var(--green-dark); margin-bottom: 4px;
}

.scenario-card-header p {
    font-size: 12px; color: var(--text-light); line-height: 1.5;
}

.scenario-meta {
    display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}

.scenario-badge {
    padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 600;
}
.scenario-badge.builtin { background: var(--sky-bg); color: var(--sky-blue); }
.scenario-badge.custom { background: #F3E5F5; color: #7B1FA2; }

.scenario-type, .scenario-cefr, .scenario-qcount {
    font-size: 11px; color: var(--text-light); padding: 2px 8px;
    background: #F5F5F5; border-radius: 8px;
}

/* Scenario Generator */
.scenario-generator {
    background: var(--white); border-radius: var(--radius); padding: 20px;
    box-shadow: var(--shadow); border: 2px dashed var(--green-light);
}

.scenario-generator h3 {
    font-size: 16px; color: var(--green-dark); margin-bottom: 4px;
}

.gen-hint { font-size: 12px; color: var(--text-light); margin-bottom: 12px; }

.scenario-input {
    width: 100%; padding: 12px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm);
    font-size: 15px; margin-bottom: 8px; background: #FAFAFA;
}
.scenario-input:focus { border-color: var(--green-mid); outline: none; }

.scenario-textarea {
    width: 100%; padding: 12px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm);
    font-size: 14px; min-height: 80px; resize: vertical; margin-bottom: 12px;
    font-family: inherit; background: #FAFAFA;
}
.scenario-textarea:focus { border-color: var(--green-mid); outline: none; }

.gen-options {
    display: flex; gap: 16px; margin-bottom: 12px;
}
.gen-options label {
    font-size: 13px; color: var(--text-light); display: flex; align-items: center; gap: 6px;
}
.gen-options select {
    padding: 6px 8px; border: 2px solid #E0E0E0; border-radius: 8px;
    font-size: 13px; background: var(--white);
}

/* ============ Responsive New Views ============ */
@media (min-width: 768px) {
    .journey-canvas-wrapper { height: 320px; }
    .battle-arena { height: 300px; }
    .enemy-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .pet-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (min-width: 1024px) {
    .journey-canvas-wrapper { height: 280px; }
    .battle-arena { height: 260px; }
}

/* ============ Speaking Practice ============ */

.speaking-stats-mini {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--green-dark, #2E7D32);
}

.speaking-content {
    padding: 16px;
    display: flex;
    justify-content: center;
}

.speaking-card {
    background: white;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.speak-word-display {
    margin-bottom: 8px;
}

.speak-prompt {
    color: #999;
    font-size: 14px;
    padding: 20px 0;
}

.speak-word-text {
    font-size: 32px;
    font-weight: 600;
    color: var(--green-dark, #2E7D32);
    margin: 12px 0;
}

.speak-phonetic {
    font-size: 16px;
    color: var(--amber-mid, #FF9800);
    margin-bottom: 4px;
}

.speak-meaning {
    font-size: 15px;
    color: #666;
    margin-bottom: 8px;
}

.speak-example {
    font-size: 13px;
    color: #999;
    font-style: italic;
    margin-bottom: 16px;
}

.speak-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--green-mid, #4CAF50);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.speak-btn:hover {
    background: var(--green-dark, #2E7D32);
    transform: scale(1.05);
}

.speak-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.speak-icon {
    font-size: 14px;
    background: rgba(255,255,255,0.25);
    padding: 4px 8px;
    border-radius: 12px;
}

.speak-listening {
    color: var(--amber-mid, #FF9800);
    font-size: 14px;
    padding: 12px 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.speak-score-display {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    text-align: left;
}

.speak-score-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.speak-score-detail {
    flex: 1;
}

.speak-spoken {
    font-size: 13px;
    color: #333;
    margin: 2px 0;
}

.speak-target {
    font-size: 13px;
    color: #666;
    margin: 2px 0;
}

.speak-accuracy {
    font-size: 12px;
    color: var(--green-mid, #4CAF50);
    margin: 2px 0;
    font-weight: 500;
}

.speak-feedback {
    font-size: 14px;
    font-weight: 500;
    color: var(--amber-mid, #FF9800);
    margin: 4px 0;
}

.speak-reward {
    font-size: 13px;
    color: var(--amber-dark, #E65100);
    font-weight: 500;
}

.speak-levelup {
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--green-bg, #E8F5E9);
    border-radius: 8px;
    color: var(--green-dark, #2E7D32);
    font-weight: 600;
    font-size: 14px;
}

.speak-error {
    color: #f44336;
    font-size: 14px;
    padding: 12px 0;
}

.speak-next-btn {
    margin-top: 16px;
    width: 100%;
}

/* ============ Teacher Dashboard ============ */

.teacher-entry-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    background: transparent;
    border: 2px solid #1565C0;
    color: #1565C0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.teacher-entry-btn:hover {
    background: #1565C0;
    color: #fff;
}

.teacher-topbar {
    background: #1565C0;
}

.teacher-avatar {
    background: #fff;
    color: #1565C0;
}

.teacher-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px 80px;
}

.teacher-actions .btn-secondary {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

/* Class List */
.teacher-class-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.teacher-class-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.15s;
    border-left: 4px solid #1565C0;
}

.teacher-class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.class-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.class-card-header h3 {
    font-size: 18px;
    margin: 0;
    color: #333;
}

.class-grade {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
}

.class-student-count {
    text-align: center;
}

.count-num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #1565C0;
}

.count-label {
    font-size: 11px;
    color: #999;
}

.class-desc {
    color: #666;
    font-size: 13px;
    margin: 8px 0;
}

.class-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.invite-code-display {
    font-size: 12px;
    color: #1565C0;
    font-weight: 600;
    background: #E3F2FD;
    padding: 4px 10px;
    border-radius: 4px;
}

.class-date {
    font-size: 12px;
    color: #aaa;
}

/* Create Class Form */
.teacher-form-card {
    max-width: 500px;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.teacher-input {
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.teacher-input:focus {
    border-color: #1565C0;
}

.teacher-textarea {
    padding: 12px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    min-height: 80px;
    resize: vertical;
    outline: none;
    font-family: inherit;
}

.teacher-textarea:focus {
    border-color: #1565C0;
}

/* Class Detail */
.class-invite-code {
    display: flex;
    align-items: center;
    gap: 4px;
}

.invite-label {
    font-size: 12px;
    color: #999;
}

.invite-code-text {
    font-size: 14px;
    color: #1565C0;
    font-weight: 700;
    background: #E3F2FD;
    padding: 4px 12px;
    border-radius: 4px;
}

.teacher-stats-overview {
    margin: 12px 0;
}

.stat-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 600px) {
    .stat-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-grid-4 .stat-box {
    background: #fff;
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.stat-grid-4 .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.stat-grid-4 .stat-label {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* Student Table */
.teacher-student-table {
    margin-top: 16px;
    overflow-x: auto;
}

.student-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.student-table th {
    background: #1565C0;
    color: #fff;
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

.student-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.student-table tr:hover {
    background: #f5f9ff;
}

.td-rank {
    font-weight: 700;
    color: #1565C0;
}

.td-name {
    font-weight: 600;
    text-align: left !important;
}

.td-mastered {
    color: #2E7D32;
    font-weight: 600;
}

.td-good {
    color: #2E7D32;
    font-weight: 600;
}

.td-warn {
    color: #FF9800;
    font-weight: 600;
}

.td-bad {
    color: #f44336;
    font-weight: 600;
}

.btn-sm {
    padding: 4px 10px;
    border: 1px solid #1565C0;
    background: #fff;
    color: #1565C0;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin: 0 2px;
}

.btn-sm:hover {
    background: #1565C0;
    color: #fff;
}

.btn-danger-sm {
    border-color: #ef5350;
    color: #ef5350;
}

.btn-danger-sm:hover {
    background: #ef5350;
    color: #fff;
}

/* Student Ranking Bars */
.rank-bar-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.rank-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.rank-num {
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: #1565C0;
}

.rank-name {
    width: 80px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-bar-track {
    flex: 1;
    height: 18px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.rank-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #42A5F5, #1565C0);
    border-radius: 4px;
    transition: width 0.3s;
}

.rank-val {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
}

/* Student Detail */
.student-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .student-detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 13px;
}

.detail-row span {
    color: #888;
}

.detail-row b {
    color: #333;
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}

.mini-table th {
    background: #f5f5f5;
    padding: 6px 4px;
    text-align: center;
    font-weight: 600;
    color: #666;
}

.mini-table td {
    padding: 6px 4px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.empty-hint {
    color: #bbb;
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

/* ============ Dark Mode ============ */
:root[data-theme="dark"] {
    --green-dark: #81C784;
    --green-mid: #66BB6A;
    --green-light: #4CAF50;
    --green-bg: #1a1f1a;
    --amber-bg: #2a2018;
    --sky-bg: #1a2330;
    --cream: #1e1e2e;
    --white: #252535;
    --text-dark: #E0E0E0;
    --text-mid: #B0B0B0;
    --text-light: #888;
    --shadow: 0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] body { background: #121212; color: #E0E0E0; }
:root[data-theme="dark"] .screen { background: var(--green-bg); }
:root[data-theme="dark"] .auth-container,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .stats-card,
:root[data-theme="dark"] .learn-content,
:root[data-theme="dark"] .shop-grid > *,
:root[data-theme="dark"] .teacher-form-card,
:root[data-theme="dark"] .teacher-student-table { background: #1e1e2e; color: #E0E0E0; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    background: #2a2a3a; color: #E0E0E0; border-color: #444;
}
:root[data-theme="dark"] .bottom-nav { background: #1a1a2a; }
:root[data-theme="dark"] .top-bar { background: #1e2a1e; }
:root[data-theme="dark"] .view,
:root[data-theme="dark"] .main-content { background: transparent; }
:root[data-theme="dark"] a { color: var(--sky-blue); }

/* ============ Top Tools (bell + theme) ============ */
.top-tools { display: flex; gap: 6px; align-items: center; }
.tool-btn {
    position: relative; background: rgba(255,255,255,0.3); border: none;
    border-radius: 50%; width: 34px; height: 34px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: background 0.2s;
}
.tool-btn:hover { background: rgba(255,255,255,0.5); }
:root[data-theme="dark"] .tool-btn { background: rgba(255,255,255,0.1); }
.notify-badge {
    position: absolute; top: -2px; right: -2px; background: var(--danger);
    color: #fff; font-size: 9px; border-radius: 10px; padding: 1px 5px; min-width: 16px;
    text-align: center; line-height: 1.3;
}
.notify-dropdown {
    position: fixed; top: 56px; right: 12px; width: 320px; max-height: 400px;
    overflow-y: auto; background: var(--white); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); z-index: 200; border: 1px solid rgba(0,0,0,0.1);
}
:root[data-theme="dark"] .notify-dropdown { background: #1e1e2e; border-color: #444; }
.notify-header {
    padding: 12px 16px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex; justify-content: space-between; align-items: center;
}
.notify-markall { background: none; border: none; color: var(--green-mid); font-size: 12px; cursor: pointer; }
.notify-list .notify-item {
    padding: 10px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); cursor: pointer;
}
.notify-item.unread { background: var(--sky-bg); }
.notify-item .n-title { font-weight: 600; font-size: 14px; }
.notify-item .n-body { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.notify-item .n-time { font-size: 10px; color: #aaa; margin-top: 4px; }
.notify-empty { padding: 24px; text-align: center; color: #aaa; }

/* ============ Auth extras ============ */
.forgot-link { display: block; text-align: center; margin-top: 8px; font-size: 13px; color: var(--green-mid); text-decoration: none; }
.auth-extra-entries { display: flex; gap: 10px; justify-content: center; }
.auth-extra-entries .teacher-entry-btn { flex: 1; }

/* ============ Parent Portal ============ */
.parent-report-content { margin-top: 16px; }
.parent-report-content .pr-card {
    background: var(--white); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px;
    box-shadow: var(--shadow);
}
.pr-card h3 { font-size: 14px; color: var(--text-mid); margin-bottom: 8px; }
.pr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pr-stat { text-align: center; }
.pr-stat b { display: block; font-size: 20px; color: var(--green-dark); }
.pr-stat span { font-size: 11px; color: var(--text-light); }
.pr-activity { font-size: 12px; color: var(--text-mid); }
.pr-activity div { padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }

/* ============ Assignments ============ */
.assignment-list { padding: 12px; }
.assignment-card {
    background: var(--white); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px;
    box-shadow: var(--shadow); display: flex; justify-content: space-between; align-items: center;
}
.assignment-card .a-info h4 { font-size: 15px; }
.assignment-card .a-info p { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.assignment-card .a-reward { font-size: 12px; color: var(--amber-dark); margin-top: 4px; }
.assignment-card .a-status {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.a-status.pending { background: var(--amber-bg); color: var(--amber-dark); }
.a-status.done { background: var(--green-bg); color: var(--green-dark); }
.assignments-section { margin-top: 16px; }
.teacher-assignment-list { padding: 0 12px; }
.ta-card {
    background: var(--white); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px;
    box-shadow: var(--shadow);
}
.ta-card h4 { font-size: 14px; }
.ta-card .ta-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; }
.ta-progress { height: 6px; background: #eee; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.ta-progress-fill { height: 100%; background: var(--green-mid); border-radius: 3px; }

/* ============ Misc ============ */
.reset-hint { font-size: 13px; color: var(--text-light); margin-bottom: 8px; }
#exportCsvBtn { font-size: 12px; padding: 6px 14px; }

/* ============ Phase 6: Daily Tasks / Weather / Animals / Achievements / Placement / i18n ============ */

.weather-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; margin-bottom: 10px;
    border-radius: 14px; font-size: 14px; font-weight: 600;
    background: linear-gradient(135deg, rgba(124,179,66,.15), rgba(79,195,247,.12));
    border: 1px solid var(--border, #e0e0e0);
}
.weather-banner.rain { background: linear-gradient(135deg, rgba(79,195,247,.2), rgba(33,150,243,.15)); }
.weather-banner.snow { background: linear-gradient(135deg, rgba(179,229,252,.25), rgba(227,242,253,.2)); }
.weather-banner.sunny { background: linear-gradient(135deg, rgba(255,213,79,.22), rgba(255,167,38,.12)); }

.daily-tasks-panel {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #eee);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.daily-tasks-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.daily-tasks-header h3 { margin: 0; font-size: 15px; }
.daily-tasks-progress { font-size: 13px; font-weight: 700; color: var(--primary, #7CB342); }
.daily-tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.daily-task-card {
    border: 1px solid var(--border, #eee); border-radius: 12px; padding: 10px;
    font-size: 12px; display: flex; flex-direction: column; gap: 6px;
    background: var(--bg-soft, #fafafa);
}
.daily-task-card.completed { border-color: var(--primary, #7CB342); background: rgba(124,179,66,.08); }
.daily-task-card .task-title { font-weight: 600; }
.daily-task-bar { height: 6px; border-radius: 3px; background: #e5e5e5; overflow: hidden; }
.daily-task-bar-fill { height: 100%; background: var(--primary, #7CB342); transition: width .3s; }
.daily-task-meta { display: flex; justify-content: space-between; align-items: center; }
.daily-task-reward { color: #f57f17; font-weight: 600; }
.daily-claim-btn {
    border: none; border-radius: 8px; padding: 4px 10px; font-size: 11px; font-weight: 700;
    background: var(--primary, #7CB342); color: #fff; cursor: pointer;
}
.daily-claim-btn:disabled { background: #bbb; cursor: default; }

.farm-animals-section {
    background: linear-gradient(180deg, #F1F8EA, #E4F2D8);
    border: 2px solid #CBE0BB;
    border-radius: 18px; padding: 14px 16px 8px; margin-top: 12px;
    box-shadow: inset 0 6px 14px rgba(120, 170, 90, 0.10);
}
.animals-header h3 { letter-spacing: .5px; }
/* Phase 63d: 卡片萌系头像（与画布动物同款手绘） */
.animal-card .a-kawaii, .animal-shop-card .a-kawaii {
    display: block; margin: 0 auto;
    filter: drop-shadow(0 2px 3px rgba(90, 60, 30, 0.25));
}
.animals-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.animals-header h3 { margin: 0; font-size: 15px; }
.animals-buy-toggle {
    border: 1px solid var(--primary, #7CB342); background: transparent; color: var(--primary, #7CB342);
    border-radius: 10px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.animals-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.animal-shop-card {
    border: 1px solid var(--border, #eee); border-radius: 12px; padding: 10px;
    text-align: center; font-size: 12px;
}
.animal-shop-card .a-emoji { font-size: 28px; }
.animal-buy-btn {
    margin-top: 6px; border: none; border-radius: 8px; padding: 5px 12px;
    background: #f57f17; color: #fff; font-weight: 700; font-size: 11px; cursor: pointer;
}
.animal-buy-btn:disabled { background: #bbb; }
.animals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.animal-card {
    border: 1px solid var(--border, #eee); border-radius: 12px; padding: 10px;
    text-align: center; font-size: 12px; position: relative;
    animation: animalBounce 3s ease-in-out infinite;
}
@keyframes animalBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.animal-card .a-emoji { font-size: 30px; }
.animal-card .a-level { position: absolute; top: 6px; right: 8px; font-size: 10px; background: rgba(0,0,0,.55); color: #fff; border-radius: 6px; padding: 1px 6px; }
.animal-collect-btn {
    margin-top: 6px; border: none; border-radius: 8px; padding: 5px 12px;
    background: var(--primary, #7CB342); color: #fff; font-weight: 700; font-size: 11px; cursor: pointer;
}
.animal-collect-btn:disabled { background: #bbb; }
.animal-timer { font-size: 10px; color: var(--text-light, #999); }

.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.achievement-card {
    border: 1px solid var(--border, #eee); border-radius: 14px; padding: 14px 12px;
    text-align: center; font-size: 12px; opacity: .55; position: relative; overflow: hidden;
}
.achievement-card.unlocked { opacity: 1; border-color: #ffb300; background: linear-gradient(160deg, rgba(255,179,0,.08), transparent); }
.achievement-card .ach-icon { font-size: 30px; margin-bottom: 6px; }
.achievement-card .ach-name { font-weight: 700; font-size: 13px; }
.achievement-card .ach-desc { color: var(--text-light, #888); margin: 4px 0; }
.achievement-card .ach-bar { height: 5px; background: #e5e5e5; border-radius: 3px; overflow: hidden; margin: 6px 0; }
.achievement-card .ach-bar-fill { height: 100%; background: #ffb300; }
.achievement-card .ach-check { position: absolute; top: 8px; right: 10px; font-size: 14px; }
#achievementSummary { font-size: 13px; font-weight: 600; color: #f57f17; }

.placement-intro, .placement-quiz, .placement-result { max-width: 560px; margin: 24px auto; text-align: center; }
.placement-desc { line-height: 1.8; color: var(--text-light, #666); margin-bottom: 18px; }
.placement-progress { font-size: 13px; font-weight: 700; color: var(--primary, #7CB342); }
.placement-question-card {
    font-size: 17px; font-weight: 700; padding: 22px 18px;
    border: 1px solid var(--border, #eee); border-radius: 16px; margin-bottom: 16px;
    background: var(--card-bg, #fff);
}
.placement-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.placement-option {
    border: 2px solid var(--border, #e0e0e0); border-radius: 12px; padding: 13px 16px;
    font-size: 15px; cursor: pointer; text-align: left; background: var(--bg-soft, #fafafa);
    transition: all .15s;
}
.placement-option:hover { border-color: var(--primary, #7CB342); }
.placement-option.selected { border-color: var(--primary, #7CB342); background: rgba(124,179,66,.1); font-weight: 700; }
.placement-result .level-badge {
    font-size: 46px; font-weight: 900; color: var(--primary, #7CB342);
}
.placement-result .level-bars { max-width: 380px; margin: 14px auto; text-align: left; }
.placement-result .level-bar-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.placement-result .level-bar-row .lb-label { width: 32px; font-weight: 700; }
.placement-result .level-bar-row .lb-bar { flex: 1; height: 8px; background: #e5e5e5; border-radius: 4px; overflow: hidden; }
.placement-result .level-bar-row .lb-fill { height: 100%; background: var(--primary, #7CB342); }

.ach-toast {
    position: fixed; top: 70px; right: 16px; z-index: 3000;
    background: linear-gradient(135deg, #ffb300, #ff8f00); color: #fff;
    padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 14px;
    box-shadow: 0 8px 24px rgba(255,143,0,.4);
    animation: achToastIn .4s ease, achToastOut .4s ease 3.2s forwards;
}
@keyframes achToastIn { from { transform: translateX(120%); } to { transform: translateX(0); } }
@keyframes achToastOut { to { transform: translateX(120%); opacity: 0; } }

/* dark mode fixes for new components */
[data-theme="dark"] .daily-task-card, [data-theme="dark"] .animal-card,
[data-theme="dark"] .achievement-card, [data-theme="dark"] .placement-question-card,
[data-theme="dark"] .placement-option { background: #2a2f38; }
[data-theme="dark"] .daily-task-bar, [data-theme="dark"] .ach-bar { background: #3a4048; }

/* ============ Phase 7: Photo Homework ============ */
.hw-upload-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px; padding: 28px 20px; text-align: center; color: #fff;
    box-shadow: 0 8px 24px rgba(102, 126, 234, .35); margin-bottom: 18px;
}
.hw-desc { font-size: 15px; line-height: 1.6; margin-bottom: 16px; opacity: .95; }
.hw-upload-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hw-btn {
    border: none; border-radius: 14px; padding: 13px 22px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: transform .15s, box-shadow .15s; color: #fff;
}
.hw-btn:hover { transform: translateY(-2px) scale(1.03); }
.hw-btn:active { transform: scale(.96); }
.hw-btn-photo { background: linear-gradient(135deg, #ff9a44, #fc6076); box-shadow: 0 5px 15px rgba(252, 96, 118, .4); }
.hw-btn-text { background: rgba(255, 255, 255, .22); backdrop-filter: blur(4px); border: 2px solid rgba(255,255,255,.5); }
.hw-list-title { font-size: 16px; margin: 18px 4px 10px; color: var(--text-dark); }
.hw-sheet-list { display: flex; flex-direction: column; gap: 10px; }
.hw-sheet-card {
    display: flex; align-items: center; gap: 12px; background: var(--white);
    border-radius: 14px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-left: 5px solid var(--green-mid);
}
.hw-sheet-card.completed { border-left-color: #f5a623; }
.hw-sheet-card.needs_text { border-left-color: #e74c3c; }
.hw-sheet-info { flex: 1; min-width: 0; }
.hw-sheet-title { font-weight: 700; font-size: 15px; }
.hw-sheet-meta { font-size: 12px; color: #888; margin: 3px 0 6px; }
.hw-sheet-bar { height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
.hw-sheet-bar-fill { height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); border-radius: 3px; transition: width .6s; }
.hw-sheet-btn {
    border: none; background: var(--green-mid); color: #fff; border-radius: 10px;
    padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .15s;
}
.hw-sheet-btn:hover { transform: scale(1.05); }
.hw-sheet-btn.done { background: #f5a623; }
.hw-sheet-btn.need { background: #e74c3c; }
.hw-empty { text-align: center; color: #999; padding: 24px 0; font-size: 14px; }
.hw-textarea {
    width: 100%; min-height: 160px; border: 2px solid #d5d8e0; border-radius: 14px;
    padding: 14px; font-size: 15px; resize: vertical; box-sizing: border-box; font-family: inherit;
}
.hw-textarea:focus { outline: none; border-color: var(--green-mid); }
.hw-text-actions { display: flex; gap: 10px; margin-top: 12px; }
.hw-title-input { flex: 1; border: 2px solid #d5d8e0; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.hw-needs-text-card { background: var(--amber-bg); border-radius: 16px; padding: 20px; }
.hw-needs-text-card p { margin-bottom: 12px; font-size: 14px; }
.hw-analyzing { text-align: center; padding: 48px 0; }
.hw-analyzing p { margin-top: 18px; color: #888; font-size: 15px; }
.hw-spinner {
    width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
    border: 5px solid #e0e0e0; border-top-color: #764ba2;
    animation: hwspin 0.9s linear infinite;
}
@keyframes hwspin { to { transform: rotate(360deg); } }
.hw-analysis-banner {
    display: flex; align-items: center; gap: 10px; background: var(--sky-bg);
    border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; flex-wrap: wrap;
}
.hw-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.hw-player-card {
    background: var(--white); border-radius: 18px; padding: 22px 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08); margin-bottom: 14px; position: relative;
}
.hw-q-type { font-size: 12px; color: #999; margin-bottom: 10px; display: flex; justify-content: space-between; }
.hw-combo {
    color: #ff5722; font-weight: 800; font-size: 14px;
    animation: comboPulse .6s ease infinite alternate;
}
@keyframes comboPulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.hw-q-text { font-size: 18px; font-weight: 600; line-height: 1.55; }
.hw-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hw-option {
    border: 2px solid #dde1e8; background: var(--white); border-radius: 14px;
    padding: 14px 16px; font-size: 15px; text-align: left; cursor: pointer;
    transition: all .18s; font-family: inherit;
}
.hw-option:hover:not(:disabled) { border-color: var(--green-mid); transform: translateX(4px); }
.hw-option:disabled { cursor: default; opacity: .85; }
.hw-option.correct { border-color: #4CAF50; background: #E8F5E9; animation: hwBounce .45s; }
.hw-option.wrong { border-color: #e74c3c; background: #FDECEA; animation: hwShake .4s; }
@keyframes hwBounce { 0%,100% { transform: scale(1); } 40% { transform: scale(1.04); } }
@keyframes hwShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hw-feedback { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.hw-feedback.good { background: #E8F5E9; color: #2E7D32; }
.hw-feedback.bad { background: #FDECEA; color: #c0392b; }
.hw-feedback.hint { background: var(--amber-bg); color: #E65100; }
.hw-exp { font-size: 13px; margin-top: 6px; opacity: .85; }
.hw-player-actions { display: flex; gap: 12px; align-items: center; }
.hw-hint-btn {
    border: 2px solid var(--amber-mid); background: var(--white); color: var(--amber-dark);
    border-radius: 12px; padding: 12px 18px; font-weight: 700; cursor: pointer; font-size: 14px;
    transition: transform .15s;
}
.hw-hint-btn:hover { transform: scale(1.05); background: var(--amber-bg); }
.hw-autosave { font-size: 12px; color: #999; text-align: right; margin-top: 10px; opacity: .7; }
.hw-autosave.flash { animation: saveFlash 1s; }
@keyframes saveFlash { 0% { opacity: 1; color: #4CAF50; transform: scale(1.15); } 100% { opacity: .7; } }
.hw-result-card {
    background: var(--white); border-radius: 20px; padding: 32px 24px; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,.1); animation: hwBounce .5s;
}
.hw-result-stars { font-size: 44px; margin-bottom: 10px; letter-spacing: 4px; }
.hw-result-score { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.hw-result-reward { font-size: 16px; margin: 12px 0; color: var(--amber-dark); font-weight: 700; }
.hw-result-levelup { font-size: 16px; color: #764ba2; font-weight: 800; margin-bottom: 8px; }
.hw-result-actions { margin-top: 16px; }

/* ============ Game FX ============ */
.fx-confetti-canvas {
    position: fixed; inset: 0; z-index: 9999; pointer-events: none;
}
.fx-float-text {
    position: fixed; z-index: 9999; pointer-events: none;
    font-size: 22px; font-weight: 800; transform: translate(-50%, -50%);
    animation: floatUp 1.4s ease-out forwards; text-shadow: 0 2px 6px rgba(0,0,0,.2);
}
@keyframes floatUp {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
    20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}
.fx-levelup {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
    justify-content: center; background: rgba(0,0,0,.35); pointer-events: none;
    animation: fadeOut 2.6s forwards;
}
.fx-levelup-card {
    background: linear-gradient(135deg, #ffd54f, #ff9800); color: #fff;
    border-radius: 24px; padding: 34px 48px; text-align: center;
    font-size: 42px; box-shadow: 0 10px 40px rgba(255,152,0,.5);
    animation: levelPop .6s cubic-bezier(.18, .89, .32, 1.28);
}
.fx-levelup-title { font-size: 34px; font-weight: 900; letter-spacing: 2px; }
.fx-levelup-sub { font-size: 16px; margin-top: 8px; }
@keyframes levelPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeOut { 0%,75% { opacity: 1; } 100% { opacity: 0; } }
.coin-pop { animation: coinPopAnim .5s; }
@keyframes coinPopAnim { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); filter: brightness(1.3); } }
/* XP bar smooth animation */
.xp-bar-fill { transition: width .8s cubic-bezier(.25, .8, .25, 1); }

/* dark mode */
[data-theme="dark"] .hw-sheet-card, [data-theme="dark"] .hw-player-card,
[data-theme="dark"] .hw-result-card, [data-theme="dark"] .hw-option { background: #2a2f38; }
[data-theme="dark"] .hw-sheet-bar { background: #3a4048; }
[data-theme="dark"] .hw-option { border-color: #3a4048; color: #e0e0e0; }
[data-theme="dark"] .hw-analysis-banner { background: #263243; }
[data-theme="dark"] .hw-feedback.good { background: #1b3a20; color: #81C784; }
[data-theme="dark"] .hw-feedback.bad { background: #3a1d1a; color: #ff8a80; }
[data-theme="dark"] .hw-feedback.hint { background: #3a2d1a; color: #FFB74D; }
[data-theme="dark"] .hw-needs-text-card { background: #3a2d1a; }
[data-theme="dark"] .hw-q-text, [data-theme="dark"] .hw-list-title { color: #e0e0e0; }

/* ============ Phase 8: Tutoring + Classroom ============ */
.tutor-card {
    display: flex; gap: 14px; background: var(--white); border-radius: 16px;
    padding: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.08); margin-bottom: 12px;
    align-items: flex-start; flex-wrap: wrap;
}
.tutor-avatar { font-size: 40px; width: 60px; height: 60px; background: var(--sky-bg); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tutor-info { flex: 1; min-width: 200px; }
.tutor-name { font-weight: 800; font-size: 16px; }
.tutor-rating { color: #f5a623; font-size: 13px; margin-left: 6px; }
.tutor-title { font-size: 13px; color: #764ba2; font-weight: 700; margin: 3px 0; }
.tutor-tags { margin: 5px 0; }
.tutor-tag { display: inline-block; background: var(--amber-bg); color: var(--amber-dark);
    border-radius: 20px; padding: 2px 10px; font-size: 12px; margin: 0 6px 4px 0; }
.tutor-intro { font-size: 13px; color: #777; line-height: 1.5; }
.tutor-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tutor-price { font-weight: 800; color: #f5a623; font-size: 16px; }
.tutor-price small { font-size: 11px; color: #999; font-weight: 400; }
.order-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9000;
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.order-overlay .modal-card { background: var(--white); border-radius: 20px; padding: 24px; width: 100%; max-width: 420px;
    animation: hwBounce .4s; max-height: 88vh; overflow-y: auto; }
.order-modal h3 { margin: 0 0 14px; font-size: 18px; }
.order-field { margin-bottom: 14px; }
.order-field label { display: block; font-size: 13px; font-weight: 700; color: #666; margin-bottom: 6px; }
.order-field input[type=text], .order-field input:not([type]) {
    width: 100%; box-sizing: border-box; border: 2px solid #d5d8e0; border-radius: 10px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; }
.order-durs { display: flex; gap: 8px; flex-wrap: wrap; }
.order-dur { background: var(--sky-bg); border-radius: 10px; padding: 8px 12px; font-size: 13px;
    display: flex; align-items: center; gap: 6px; cursor: pointer; }
.order-warn { font-size: 12px; color: #e67e22; background: var(--amber-bg); border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.order-btns { display: flex; gap: 10px; justify-content: flex-end; }

/* Classroom */
.cr-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cr-code { background: linear-gradient(135deg,#43cea2,#185a9d); color: #fff; font-weight: 800;
    border-radius: 10px; padding: 6px 14px; letter-spacing: 2px; }
.cr-members { flex: 1; font-size: 12px; color: #888; min-width: 120px; }
.cr-exit { border: none; background: #e74c3c; color: #fff; border-radius: 10px; padding: 7px 14px;
    font-weight: 700; cursor: pointer; }
.cr-layout { display: flex; gap: 12px; align-items: stretch; }
.cr-board-wrap { flex: 1.6; min-width: 0; display: flex; flex-direction: column; }
.cr-tools { display: flex; align-items: center; gap: 8px; background: var(--white);
    border-radius: 12px 12px 0 0; padding: 8px 12px; flex-wrap: wrap; }
.cr-tool-title { font-size: 13px; font-weight: 800; color: #666; }
.cr-color { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .15s; }
.cr-color.active { transform: scale(1.3); border-color: #ffd54f; }
.cr-color.c-red { background: #e74c3c; } .cr-color.c-blue { background: #2980ff; }
.cr-color.c-green { background: #27ae60; } .cr-color.c-black { background: #333; }
.cr-tool-btn { border: none; background: var(--sky-bg); border-radius: 8px; padding: 6px 12px;
    font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 4px; }
.cr-canvas-wrap { position: relative; background: #fdfdfa; border: 2px solid #e3e6ec; border-top: none;
    border-radius: 0 0 12px 12px; height: 380px; overflow: hidden; }
#crSlideImg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    background: #fff; }
#crCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.cr-chat { flex: 1; min-width: 240px; max-width: 360px; display: flex; flex-direction: column;
    background: var(--white); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cr-chat-head { padding: 10px 14px; font-weight: 800; font-size: 14px; border-bottom: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center; }
.cr-switch { font-size: 12px; font-weight: 500; color: #888; display: flex; align-items: center; gap: 4px; }
.cr-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; min-height: 260px; max-height: 380px; }
.cr-msg { margin-bottom: 10px; }
.cr-msg-name { font-size: 11px; color: #999; margin-bottom: 2px; }
.cr-msg.mine .cr-msg-name { color: #2980ff; }
.cr-msg-text { background: var(--sky-bg); border-radius: 4px 12px 12px 12px; padding: 8px 12px;
    font-size: 14px; display: inline-block; max-width: 100%; word-break: break-word; }
.cr-msg.mine .cr-msg-text { background: #dcedff; }
.cr-msg-tr { font-size: 12px; color: #764ba2; background: #f3effa; border-radius: 8px;
    padding: 4px 10px; margin-top: 3px; display: inline-block; }
.cr-sys { text-align: center; font-size: 12px; color: #e74c3c; margin: 8px 0; }
.cr-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #eee; }
.cr-input-row input { flex: 1; border: 2px solid #d5d8e0; border-radius: 10px; padding: 9px 12px; font-size: 14px; }
@media (max-width: 720px) {
    .cr-layout { flex-direction: column; }
    .cr-chat { max-width: none; }
    .cr-canvas-wrap { height: 300px; }
    .cr-msgs { min-height: 140px; max-height: 200px; }
    .tutor-actions { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
}
[data-theme="dark"] .tutor-card, [data-theme="dark"] .cr-chat, [data-theme="dark"] .cr-tools,
[data-theme="dark"] .order-overlay .modal-card { background: #2a2f38; }
[data-theme="dark"] .cr-canvas-wrap { background: #1e222a; border-color: #3a4048; }
[data-theme="dark"] .cr-msg-text { background: #34435c; color: #e8e8e8; }
[data-theme="dark"] .cr-msg.mine .cr-msg-text { background: #1f3a5f; }
[data-theme="dark"] .cr-msg-tr { background: #3a2d4d; }
[data-theme="dark"] .tutor-tag { color: #FFB74D; }
[data-theme="dark"] .tutor-title { color: #b39ddb; }
[data-theme="dark"] .order-field input { background: #1e222a; color: #eee; border-color: #3a4048; }

/* Recharge */
.recharge-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px 4px; }
.recharge-card { background: var(--white); border-radius: 16px; padding: 16px 12px; text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); border: 2px solid transparent; transition: transform .15s, border-color .15s; }
.recharge-card:hover { transform: translateY(-2px); border-color: #7CB342; }
.recharge-coins { font-size: 32px; font-weight: 800; color: #f1c40f; line-height: 1; }
.recharge-coins::before { content: 'C '; font-size: 16px; color: #7CB342; }
.recharge-label { font-weight: 700; margin: 8px 0 4px; }
.recharge-bonus { font-size: 12px; color: #e67e22; font-weight: 700; background: #fff3e0; border-radius: 10px;
    display: inline-block; padding: 2px 8px; margin-bottom: 6px; }
.recharge-price { color: #7CB342; font-size: 18px; font-weight: 800; margin: 6px 0 12px; }
.recharge-buy-btn { border: none; background: linear-gradient(135deg,#43cea2,#185a9d); color: #fff; border-radius: 20px;
    padding: 8px 18px; font-weight: 700; cursor: pointer; }
.recharge-order-row { display: flex; justify-content: space-between; align-items: center; background: var(--white);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.recharge-order-row.paid { border-left: 4px solid #27ae60; }
.recharge-order-row.pending { border-left: 4px solid #e67e22; }
#rechargeQrcodeImg { background: #fff; padding: 10px; }
[data-theme="dark"] .recharge-card, [data-theme="dark"] .recharge-order-row { background: #2a2f38; }
[data-theme="dark"] .recharge-buy-btn { background: linear-gradient(135deg,#2d9d78,#144a75); }
[data-theme="dark"] .cr-input-row input { background: #1e222a; color: #eee; border-color: #3a4048; }

/* ============ Hub Navigation (grouped features) ============ */
.hub-header { text-align: center; padding: 20px 16px 10px; }
.hub-header h2 { margin: 0 0 6px; font-size: 22px; color: var(--green-dark); }
.hub-header p { margin: 0; font-size: 13px; color: var(--text-light); }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 12px 16px 24px; }
.hub-card { background: var(--white); border: none; border-radius: 18px; padding: 18px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    box-shadow: 0 3px 10px rgba(0,0,0,.06); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.hub-card:hover, .hub-card:active { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.hub-icon { font-size: 32px; line-height: 1; }
.hub-title { font-size: 16px; font-weight: 800; color: var(--text-dark); }
.hub-desc { font-size: 12px; color: var(--text-light); }
[data-theme="dark"] .hub-card { background: #2a2f38; }
[data-theme="dark"] .hub-title { color: #eee; }
[data-theme="dark"] .hub-desc { color: #aaa; }
[data-theme="dark"] .hub-header h2 { color: #8bc34a; }

/* ============ Phase 11: 游乐场 Playground ============ */

/* ---- 大厅 ---- */
.pg-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 6px; }
.pg-header h2 { margin: 0; font-size: 24px; color: var(--green-dark); }
.pg-online-bubble { display: inline-flex; align-items: center; gap: 4px; background: var(--white);
    border: 1.5px solid var(--green-light); border-radius: 999px; padding: 5px 12px; font-size: 12px;
    font-weight: 700; color: var(--green-dark); box-shadow: 0 2px 8px rgba(76,175,80,.15); }
.pg-online-icon { font-size: 14px; }
.pg-subtitle { padding: 0 16px 14px; margin: 0; font-size: 13px; color: var(--text-light); }
.pg-cards { display: flex; flex-direction: column; gap: 16px; padding: 6px 16px 18px; }
.pg-game-card { display: flex; align-items: center; gap: 16px; border: none; width: 100%; text-align: left;
    cursor: pointer; border-radius: 28px; padding: 18px 20px; color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s; }
.pg-game-card:active { transform: scale(.97); }
.pg-card-icon { width: 84px; height: 84px; min-width: 84px; border-radius: 50%; background: rgba(255,255,255,.94);
    display: flex; align-items: center; justify-content: center; font-size: 42px;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); }
.pg-card-title { font-size: 19px; font-weight: 800; display: block; }
.pg-card-sub { font-size: 12.5px; color: rgba(255,255,255,.92); display: block; margin-top: 4px; }
.pg-card-monopoly { background: linear-gradient(135deg, #FF9800, #F4511E); }
.pg-card-draw { background: linear-gradient(135deg, #AB47BC, #5E35B1); }
.pg-card-roleplay { background: linear-gradient(135deg, #26A69A, #00897B); }
.pg-tip { margin: 4px 16px 20px; padding: 12px 14px; background: var(--amber-bg); color: var(--amber-dark);
    border-radius: 14px; font-size: 12.5px; line-height: 1.6; }
[data-theme="dark"] .pg-header h2 { color: #8bc34a; }
[data-theme="dark"] .pg-online-bubble { background: #2a2f38; border-color: #3f6d45; color: #a5d6a7; }
[data-theme="dark"] .pg-subtitle { color: #aaa; }
[data-theme="dark"] .pg-tip { background: #3a3f2a; color: #ffe0b2; }

/* ---- 全屏覆盖层 ---- */
.game-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #E8F5E9 0%, #C8E6C9 100%); }
.game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
    background: linear-gradient(90deg, #43A047, #66BB6A); color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.game-topbar .back-btn { border: none; background: rgba(255,255,255,.22); color: #fff; font-size: 15px;
    font-weight: 700; border-radius: 999px; padding: 9px 16px; min-height: 44px; min-width: 72px; cursor: pointer; }
.game-title { font-size: 17px; font-weight: 800; }
.game-coin-badge { background: rgba(255,255,255,.22); border-radius: 999px; padding: 7px 13px;
    font-size: 14px; font-weight: 700; white-space: nowrap; }
.game-coin-badge b { font-size: 16px; }
.game-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
[data-theme="dark"] .game-overlay { background: linear-gradient(180deg, #1e2a1e 0%, #162016 100%); }

/* ---- 单词大富翁 ---- */
.mono-wrap { height: 100%; display: flex; flex-direction: column; }
.mono-lobby { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.mono-lobby-title { font-size: 30px; font-weight: 900; color: var(--green-dark); }
.mono-lobby-sub { margin: 0; font-size: 14px; color: var(--text-light); }
.mono-lobby-players { display: flex; gap: 12px; }
.mono-count-btn { border: 2.5px solid var(--green-light); background: var(--white); color: var(--green-dark);
    font-size: 17px; font-weight: 800; border-radius: 999px; padding: 12px 26px; min-width: 72px;
    min-height: 52px; cursor: pointer; transition: all .15s; }
.mono-count-btn.active { background: var(--green-mid); border-color: var(--green-mid); color: #fff;
    transform: scale(1.08); box-shadow: 0 4px 14px rgba(76,175,80,.4); }
.mono-start-btn { border: none; background: linear-gradient(135deg, #FF9800, #F4511E); color: #fff;
    font-size: 19px; font-weight: 800; border-radius: 999px; padding: 16px 48px; min-height: 60px;
    cursor: pointer; box-shadow: 0 6px 18px rgba(244,81,30,.35); }
.mono-lobby-rule { background: var(--white); border-radius: 16px; padding: 14px 20px; font-size: 13px;
    line-height: 2; color: var(--text-mid); box-shadow: var(--shadow); }
.mono-game { flex: 1; display: flex; flex-direction: column; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); gap: 8px; }
.mono-players { display: flex; gap: 6px; flex-wrap: wrap; }
.mono-player { display: flex; align-items: center; gap: 5px; background: var(--white); border-radius: 999px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--text-dark); box-shadow: var(--shadow);
    opacity: .65; transition: all .2s; }
.mono-player.active { opacity: 1; transform: scale(1.06); box-shadow: 0 4px 12px rgba(76,175,80,.35);
    outline: 2.5px solid var(--green-mid); }
.mono-dot { width: 11px; height: 11px; border-radius: 50%; }
.mono-pcoins { color: var(--amber-dark); }
.mono-plaps { color: #1565C0; }
.mono-status { text-align: center; font-size: 14.5px; font-weight: 700; color: var(--green-dark); min-height: 22px; }
.mono-board-wrap { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.12); background: #E8F5E9; }
.mono-board-wrap canvas { display: block; width: 100%; height: 100%; }
.mono-bottom { display: flex; justify-content: center; padding-top: 4px; }
.mono-dice-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mono-dice-num { font-size: 26px; font-weight: 900; color: var(--green-dark); width: 52px; height: 52px;
    line-height: 52px; text-align: center; background: var(--white); border-radius: 14px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.08); transition: transform .06s; }
.mono-dice-num.dice-rolling { transform: rotate(12deg) scale(1.15); color: #F4511E; }
.mono-dice-btn { width: 84px; height: 84px; min-width: 84px; min-height: 84px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, #FFB300, #F4511E); color: #fff; font-size: 15px; font-weight: 900;
    box-shadow: 0 6px 16px rgba(244,81,30,.4), inset 0 -4px 0 rgba(0,0,0,.15); cursor: pointer;
    transition: transform .12s; touch-action: manipulation; }
.mono-dice-btn:active { transform: scale(.92); }
.mono-dice-btn:disabled { opacity: .5; }
.mono-modal { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 24px; }
.mono-modal-card { background: var(--white); border-radius: 24px; padding: 28px 24px; width: 100%;
    max-width: 360px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); animation: pgPopIn .25s ease; }
.mono-modal-type { display: inline-block; background: var(--amber-bg); color: var(--amber-dark);
    font-size: 13px; font-weight: 800; border-radius: 999px; padding: 5px 16px; margin-bottom: 10px; }
.mono-modal-word { font-size: 34px; font-weight: 900; color: var(--text-dark); letter-spacing: 1px; }
.mono-speak { border: 2px solid var(--sky-blue); background: var(--sky-bg); color: #1565C0;
    font-size: 15px; font-weight: 800; border-radius: 999px; padding: 10px 22px; margin: 12px 0 6px;
    cursor: pointer; min-height: 48px; touch-action: manipulation; }
.mono-modal-hint { font-size: 13px; color: var(--text-light); margin-bottom: 14px; }
.mono-modal-options { display: flex; flex-direction: column; gap: 10px; }
.mono-opt { border: 2px solid var(--green-light); background: var(--white); color: var(--text-dark);
    font-size: 15px; font-weight: 700; border-radius: 14px; padding: 13px 14px; cursor: pointer;
    min-height: 52px; transition: all .15s; touch-action: manipulation; }
.mono-opt:active { transform: scale(.98); }
.mono-opt.correct { background: #C8E6C9; border-color: #43A047; color: #1B5E20; }
.mono-opt.wrong { background: #FFCDD2; border-color: #E53935; color: #B71C1C; }
.mono-opt:disabled { cursor: default; }
.mono-result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center; }
.mono-result-icon { font-size: 64px; animation: pgBounce 1s ease infinite; }
.mono-result h2 { font-size: 26px; color: var(--green-dark); }
.mono-result-sub { margin: 0; font-size: 14px; color: var(--text-light); }
.mono-result-rewards { display: flex; flex-direction: column; gap: 8px; background: var(--white);
    border-radius: 16px; padding: 16px 28px; margin: 6px 0; box-shadow: var(--shadow); }
.mono-result-reward { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.mono-result-reward.levelup { color: #F4511E; animation: pgPulse 1s ease infinite; }
.mono-again, .mono-exit { border: none; border-radius: 999px; font-size: 16px; font-weight: 800;
    padding: 14px 36px; min-height: 56px; cursor: pointer; touch-action: manipulation; }
.mono-again { background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; }
.mono-exit { background: var(--white); color: var(--green-dark); border: 2px solid var(--green-light); }
[data-theme="dark"] .mono-lobby-title { color: #8bc34a; }
[data-theme="dark"] .mono-lobby-sub { color: #aaa; }
[data-theme="dark"] .mono-count-btn { background: #2a2f38; color: #c8e6c9; }
[data-theme="dark"] .mono-lobby-rule, [data-theme="dark"] .mono-player,
[data-theme="dark"] .mono-result-rewards, [data-theme="dark"] .mono-opt { background: #2a2f38; color: #e0e0e0; }
[data-theme="dark"] .mono-status { color: #a5d6a7; }
[data-theme="dark"] .mono-modal-card { background: #232830; }
[data-theme="dark"] .mono-modal-word { color: #eee; }
[data-theme="dark"] .mono-modal-hint { color: #aaa; }
[data-theme="dark"] .mono-result h2 { color: #8bc34a; }
[data-theme="dark"] .mono-exit { background: #2a2f38; color: #c8e6c9; }

/* ---- Phase 15: 单词大富翁 3D 立体视觉 ---- */
.mono-game {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
    background: linear-gradient(180deg, #FFF8E7 0%, #FFE8C0 100%);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}
[data-theme="dark"] .mono-game { background: linear-gradient(180deg, #2a2418 0%, #1f1a10 100%); }

/* Top: themed mode selector + trophy */
.mono-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 0;
    flex-shrink: 0;
}
.mono-modes {
    display: flex;
    gap: 5px;
    flex: 1;
    min-width: 0;
}
.mono-mode-btn {
    flex: 1;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 5px 3px;
    cursor: pointer;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.35),
        0 3px 0 rgba(0,0,0,.18),
        0 5px 10px rgba(0,0,0,.15);
    transition: all .12s;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c1) 55%, var(--c2) 100%);
}
.mono-mode-btn .mode-icon { font-size: 17px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mono-mode-btn .mode-label { font-size: 9.5px; font-weight: 800; margin-top: 2px; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.mono-mode-btn.active { transform: translateY(-2px); outline: 2.5px solid rgba(255,255,255,.55); }
.mono-mode-btn:active { transform: translateY(1px); }
.mono-mode-btn.apple { --c1: #FF8B8B; --c2: #C14545; }
.mono-mode-btn.ocean { --c1: #7BC4FF; --c2: #2874A6; }
.mono-mode-btn.space { --c1: #C8A8FF; --c2: #7E4FCF; }

.mono-trophy {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #FFF6D8 0%, #FFEBA8 100%);
    border-radius: 12px;
    padding: 4px 8px;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 3px 8px rgba(229,184,0,.25);
    min-height: 46px;
    flex-shrink: 0;
}
.trophy-cup { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }
.trophy-meta { display: flex; flex-direction: column; gap: 1px; }
.trophy-label { font-size: 8.5px; font-weight: 800; color: #B9770E; line-height: 1; }
.trophy-stars { font-size: 9px; line-height: 1; letter-spacing: -1px; }
.trophy-stars span { filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

[data-theme="dark"] .mono-trophy { background: linear-gradient(180deg, #3a3020 0%, #2a2010 100%); }
[data-theme="dark"] .trophy-label { color: #d8b860; }

/* Player status row */
.mono-players {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
}
.mono-player {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF4DC 100%);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #2c1810;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.06),
        0 2px 6px rgba(0,0,0,.08);
    opacity: .55;
    transition: all .2s;
}
.mono-player.active {
    opacity: 1;
    transform: scale(1.05);
    outline: 2.5px solid #FFD56B;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.06),
        0 4px 12px rgba(255,213,107,.45);
}
.mono-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
}
.mono-pcoins { color: #B9770E; }
.mono-plaps { color: #2874A6; }
[data-theme="dark"] .mono-player { background: linear-gradient(180deg, #2a2f38 0%, #232830 100%); color: #e0e0e0; }

.mono-status {
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #B9770E;
    min-height: 16px;
    padding: 0 4px;
    flex-shrink: 0;
}
[data-theme="dark"] .mono-status { color: #d8b860; }

/* Board wrap - holds board + flags */
.mono-board-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 2px;
    overflow: hidden;
}

/* The 7x7 board */
.mono-board {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
    padding: 5px;
    background: linear-gradient(135deg, #FFF6D8 0%, #FFE0A8 100%);
    border-radius: 16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 0 rgba(0,0,0,.08),
        0 4px 14px rgba(0,0,0,.12);
    margin: 0 auto;
}
@media (min-width: 768px) {
    .mono-board {
        max-width: 580px;
        gap: 5px;
        padding: 8px;
        border-radius: 20px;
    }
}
@media (min-width: 1024px) {
    .mono-board {
        max-width: 640px;
        gap: 6px;
        padding: 10px;
    }
}
[data-theme="dark"] .mono-board { background: linear-gradient(135deg, #2a2418 0%, #1f1a10 100%); }

/* 3D Pillow Tile */
.mono-tile {
    position: relative;
    border-radius: 9px;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mono-tile .cell-face {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--c1) 0%, var(--c1) 55%, var(--c2) 100%);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 2px 0 var(--c2),
        0 3px 7px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    transition: transform .12s;
    letter-spacing: -0.5px;
    line-height: 1;
}
@media (min-width: 768px) {
    .mono-tile .cell-face { font-size: 19px; border-radius: 10px; }
    .mono-tile { border-radius: 10px; }
}
.mono-tile:hover .cell-face { transform: translateY(-1px); }
.mono-tile .cell-players {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 1px;
    z-index: 2;
    pointer-events: none;
}
.cell-player-token {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
@media (min-width: 768px) {
    .cell-player-token { width: 13px; height: 13px; }
}

/* Tile type variants */
.mono-tile .cell-face.type-start {
    background: linear-gradient(180deg, #FFE066 0%, #FFD23F 55%, #E5B800 100%);
    font-size: 14px;
}
.mono-tile .cell-face.type-lucky {
    background: linear-gradient(180deg, #7BC4FF 0%, #5DADE2 55%, #2874A6 100%);
    font-size: 14px;
}
.mono-tile .cell-face.type-trap {
    background: linear-gradient(180deg, #B0BCD0 0%, #8B9DB5 55%, #5A6B85 100%);
    font-size: 14px;
}
.mono-tile .cell-face.type-shop {
    background: linear-gradient(180deg, #C8A8FF 0%, #B083F0 55%, #7E4FCF 100%);
    font-size: 14px;
}

/* Center cells (5x5 inside the 7x7) */
.mono-center-cell {
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 768px) { .mono-center-cell { border-radius: 10px; } }
.mono-center-cell.empty { background: transparent; box-shadow: none; }
.mono-center-cell.center-mascot-cell {
    background: linear-gradient(180deg, #FFF8E7 0%, #FFEED4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 0 rgba(0,0,0,.06),
        0 2px 5px rgba(0,0,0,.08);
}
.mascot-svg {
    width: 78%;
    height: 78%;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
[data-theme="dark"] .mono-center-cell.center-mascot-cell { background: linear-gradient(180deg, #3a3020 0%, #2a2010 100%); }

.mono-center-cell.center-label {
    background: linear-gradient(180deg, #FFD56B 0%, #FFB347 55%, #E58E2E 100%);
    color: #fff;
    flex-direction: column;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -3px 0 rgba(0,0,0,.18),
        0 2px 0 #B9770E,
        0 3px 7px rgba(0,0,0,.18);
    border-radius: 9px;
    padding: 2px;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.center-label-icon { font-size: 15px; line-height: 1; }
.center-label-text { font-size: 9px; font-weight: 900; line-height: 1.1; margin-top: 1px; text-align: center; }
@media (min-width: 768px) {
    .center-label-icon { font-size: 18px; }
    .center-label-text { font-size: 11px; }
    .mono-center-cell.center-label { border-radius: 10px; }
}

.mono-center-cell.center-dots {
    background: linear-gradient(180deg, #FFF8E7 0%, #FFEED4 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -2px 0 rgba(0,0,0,.06);
    flex-direction: row;
    gap: 3px;
}
.mono-center-cell .dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.2),
        inset 0 1px 0 rgba(255,255,255,.4),
        0 1px 3px rgba(0,0,0,.2);
}
@media (min-width: 768px) {
    .mono-center-cell .dot { width: 16px; height: 16px; }
    .mono-center-cell.center-dots { gap: 4px; }
}
.mono-center-cell .dot.red { background: linear-gradient(180deg, #FF8B8B 0%, #E55656 100%); }
.mono-center-cell .dot.blue { background: linear-gradient(180deg, #7BC4FF 0%, #4096E5 100%); }
.mono-center-cell .dot.yellow { background: linear-gradient(180deg, #FFE066 0%, #E5B800 100%); }
[data-theme="dark"] .mono-center-cell.center-dots { background: linear-gradient(180deg, #3a3020 0%, #2a2010 100%); }

.mono-center-cell.center-dice-preview {
    background: linear-gradient(180deg, #FFFFFF 0%, #F0E0C0 100%);
    flex-direction: column;
    cursor: pointer;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.6),
        inset 0 -3px 0 rgba(0,0,0,.1),
        0 2px 0 #C8B080,
        0 3px 8px rgba(0,0,0,.2);
    transition: transform .12s;
    touch-action: manipulation;
    border-radius: 9px;
}
.mono-center-cell.center-dice-preview:active { transform: scale(0.96); }
.cdp-num {
    font-size: 22px;
    font-weight: 900;
    color: #B9770E;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
@media (min-width: 768px) { .cdp-num { font-size: 28px; } }
.cdp-label {
    font-size: 7.5px;
    font-weight: 800;
    color: #B9770E;
    margin-top: 2px;
    text-align: center;
    line-height: 1;
}
@media (min-width: 768px) { .cdp-label { font-size: 9px; } }
[data-theme="dark"] .mono-center-cell.center-dice-preview { background: linear-gradient(180deg, #3a3020 0%, #2a2010 100%); }
[data-theme="dark"] .cdp-num, [data-theme="dark"] .cdp-label { color: #d8b860; }

/* Country flags strip */
.mono-flags {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF4DC 100%);
    border-radius: 12px;
    padding: 4px 8px;
    box-shadow:
        inset 0 -2px 0 rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 2px 8px rgba(0,0,0,.08);
    max-width: 460px;
    width: 100%;
    justify-content: center;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .mono-flags { max-width: 580px; padding: 5px 10px; gap: 6px; }
}
@media (min-width: 1024px) { .mono-flags { max-width: 640px; } }
.flag-pill {
    display: flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(180deg, #F0F8FF 0%, #DCE8F5 100%);
    border-radius: 9px;
    padding: 3px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #2c4870;
    box-shadow:
        inset 0 -1px 0 rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.5),
        0 1px 2px rgba(0,0,0,.06);
}
.flag-emoji { font-size: 13px; line-height: 1; }
@media (min-width: 768px) {
    .flag-pill { padding: 4px 8px; font-size: 12px; }
    .flag-emoji { font-size: 15px; }
}
.flags-label {
    font-size: 9.5px;
    font-weight: 700;
    color: #5DADE2;
    margin-left: 3px;
    white-space: nowrap;
}
@media (min-width: 768px) { .flags-label { font-size: 11px; } }
[data-theme="dark"] .mono-flags { background: linear-gradient(180deg, #2a2f38 0%, #232830 100%); }
[data-theme="dark"] .flag-pill { background: linear-gradient(180deg, #3a4a5e 0%, #2a3a4e 100%); color: #c8d8e8; }
[data-theme="dark"] .flags-label { color: #7BC4FF; }

/* Bottom: dice button */
.mono-bottom {
    display: flex;
    justify-content: center;
    padding-top: 2px;
    flex-shrink: 0;
}
.mono-dice-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.mono-dice-num {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient(180deg, #FF8B8B 0%, #E55656 100%);
    border-radius: 12px;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.2),
        inset 0 2px 0 rgba(255,255,255,.3),
        0 3px 8px rgba(229,86,86,.4);
    transition: transform .06s;
}
.mono-dice-num.dice-rolling {
    transform: rotate(15deg) scale(1.15);
    background: linear-gradient(180deg, #FFE066 0%, #E5B800 100%);
}
.mono-dice-btn {
    border: none;
    background: linear-gradient(180deg, #FFD56B 0%, #FFB347 55%, #E58E2E 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    border-radius: 999px;
    padding: 12px 28px;
    min-height: 52px;
    min-width: 150px;
    cursor: pointer;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.4),
        inset 0 -3px 0 rgba(0,0,0,.2),
        0 3px 0 #B9770E,
        0 6px 12px rgba(229,142,46,.4);
    transition: transform .12s, box-shadow .12s;
    display: flex;
    align-items: center;
    gap: 6px;
    touch-action: manipulation;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.mono-dice-btn .dice-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.mono-dice-btn:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.4),
        inset 0 -3px 0 rgba(0,0,0,.2),
        0 1px 0 #B9770E,
        0 2px 4px rgba(229,142,46,.3);
}
.mono-dice-btn:disabled { opacity: .5; pointer-events: none; }
[data-theme="dark"] .mono-dice-num { background: linear-gradient(180deg, #5DADE2 0%, #2874A6 100%); }
[data-theme="dark"] .mono-dice-btn { background: linear-gradient(180deg, #C8A8FF 0%, #B083F0 55%, #7E4FCF 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.2), 0 3px 0 #5A3A9E, 0 6px 12px rgba(126,79,207,.4); }

/* Lobby tweaks for warm theme */
.mono-lobby {
    background: linear-gradient(180deg, #FFF8E7 0%, #FFE8C0 100%);
    border-radius: 20px;
    margin: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"] .mono-lobby { background: linear-gradient(180deg, #2a2418 0%, #1f1a10 100%); }

@media (max-width: 380px) {
    .mono-modes { gap: 3px; }
    .mono-mode-btn { min-height: 42px; padding: 4px 2px; }
    .mono-mode-btn .mode-icon { font-size: 15px; }
    .mono-mode-btn .mode-label { font-size: 8.5px; }
    .mono-trophy { padding: 3px 6px; min-height: 42px; }
    .trophy-cup { font-size: 18px; }
    .trophy-label { font-size: 7.5px; }
    .trophy-stars { font-size: 8px; }
    .mono-dice-btn { min-width: 130px; padding: 10px 20px; font-size: 13px; }
}

/* ---- 你画我猜 ---- */
.dg-wrap { height: 100%; display: flex; flex-direction: column; }
.dg-lobby { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 24px; }
.dg-lobby-title { font-size: 30px; font-weight: 900; color: var(--green-dark); }
.dg-lobby-sub { margin: 0; font-size: 14px; color: var(--text-light); }
.dg-mode-btn { border: none; border-radius: 999px; font-size: 17px; font-weight: 800; cursor: pointer;
    min-height: 58px; padding: 14px 40px; width: 100%; max-width: 300px;
    background: linear-gradient(135deg, #AB47BC, #5E35B1); color: #fff;
    box-shadow: 0 6px 18px rgba(94,53,177,.3); touch-action: manipulation; }
.dg-mode-btn.room { background: linear-gradient(135deg, #26A69A, #00897B); box-shadow: 0 6px 18px rgba(0,137,123,.3); }
.dg-room-box { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 320px; }
.dg-input { flex: 1; min-width: 140px; border: 2px solid var(--green-light); border-radius: 12px;
    padding: 12px 14px; font-size: 16px; color: var(--text-dark); background: var(--white); min-height: 50px; }
.dg-input.big { font-size: 19px; font-weight: 800; text-align: center; }
.dg-small-btn { border: 2px solid var(--green-light); background: var(--white); color: var(--green-dark);
    border-radius: 12px; padding: 12px 18px; font-size: 14px; font-weight: 800; min-height: 50px; cursor: pointer; }
.dg-game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dg-setup, .dg-choose, .dg-handoff { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.dg-setup-title { font-size: 22px; font-weight: 900; color: var(--green-dark); }
.dg-rounds { display: flex; gap: 12px; }
.dg-round-btn { border: 2.5px solid var(--green-light); background: var(--white); color: var(--green-dark);
    font-size: 16px; font-weight: 800; border-radius: 999px; padding: 12px 30px; min-height: 52px; cursor: pointer; transition: all .15s; }
.dg-round-btn.active { background: var(--green-mid); border-color: var(--green-mid); color: #fff; transform: scale(1.08); }
.dg-start { border: none; background: linear-gradient(135deg, #AB47BC, #5E35B1); color: #fff; font-size: 18px;
    font-weight: 800; border-radius: 999px; padding: 15px 44px; min-height: 58px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(94,53,177,.3); }
.dg-setup-tip { margin: 0; font-size: 13px; color: var(--text-light); }
.dg-round-tag { display: inline-block; background: var(--sky-bg); color: #1565C0; font-size: 13px;
    font-weight: 800; border-radius: 999px; padding: 6px 16px; }
.dg-choose-hint { margin: 0; font-size: 13px; color: var(--text-light); }
.dg-secret-word { font-size: 40px; font-weight: 900; color: #5E35B1; letter-spacing: 2px;
    background: var(--white); border-radius: 20px; padding: 18px 36px; box-shadow: var(--shadow-lg); }
.dg-speak-word { border: 2px solid var(--sky-blue); background: var(--sky-bg); color: #1565C0;
    font-size: 15px; font-weight: 800; border-radius: 999px; padding: 10px 24px; min-height: 48px; cursor: pointer; }
.dg-ready { border: none; background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; font-size: 17px;
    font-weight: 800; border-radius: 999px; padding: 14px 40px; min-height: 58px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(67,160,71,.3); touch-action: manipulation; }
.dg-draw { flex: 1; display: flex; flex-direction: column; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); gap: 8px; min-height: 0; }
.dg-draw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dg-timer { font-size: 18px; font-weight: 900; color: var(--green-dark); background: var(--white);
    border-radius: 12px; padding: 6px 14px; min-width: 52px; text-align: center; }
.dg-timer.urgent { color: #E53935; animation: pgPulse 1s ease infinite; }
.dg-secret-mini { font-size: 14px; font-weight: 700; color: #5E35B1; background: #EDE7F6; border-radius: 12px;
    padding: 6px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.dg-done-btn { border: none; background: linear-gradient(135deg, #FF9800, #F4511E); color: #fff; font-size: 14px;
    font-weight: 800; border-radius: 999px; padding: 9px 18px; min-height: 48px; cursor: pointer; }
.dg-canvas-wrap { flex: 1; min-height: 0; border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.12); touch-action: none; }
.dg-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.dg-tools { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dg-color { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%;
    border: 3px solid transparent; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); touch-action: manipulation; }
.dg-color.active { border-color: #fff; outline: 3px solid var(--green-mid); transform: scale(1.12); }
.dg-tool-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 2px solid var(--green-light);
    background: var(--white); font-size: 18px; cursor: pointer; touch-action: manipulation; }
.dg-guess { flex: 1; display: flex; flex-direction: column; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 8px; min-height: 0; }
.dg-guess-top { display: flex; align-items: center; justify-content: space-between; }
.dg-guess-who { font-size: 15px; font-weight: 800; color: var(--green-dark); }
.dg-attempts { font-size: 13px; font-weight: 700; color: var(--amber-dark); background: var(--amber-bg);
    border-radius: 999px; padding: 5px 12px; }
.dg-attempts.shake { animation: pgShake .4s ease; }
.dg-guess-input-row { display: flex; gap: 8px; align-items: center; }
.dg-guess-btn { border: none; background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; font-size: 17px;
    font-weight: 800; border-radius: 14px; padding: 12px 22px; min-height: 52px; cursor: pointer; touch-action: manipulation; }
.dg-skip { border: none; background: transparent; color: var(--text-light); font-size: 13px;
    padding: 8px; text-decoration: underline; cursor: pointer; min-height: 44px; }
.dg-big-emoji { font-size: 56px; animation: pgBounce 1s ease infinite; }
.dg-handoff h2, .dg-round-result h2, .dg-final h2, .dg-room-wait h2 { color: var(--green-dark); }
.dg-handoff p { margin: 0; font-size: 14px; color: var(--text-light); }
.dg-round-result, .dg-final { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.dg-answer-word { margin: 0; font-size: 15px; }
.dg-who-scored { margin: 0; font-size: 13px; color: #5E35B1; font-weight: 700; }
.dg-scores { display: flex; gap: 14px; }
.dg-scores.final { gap: 20px; }
.dg-score-box { background: var(--white); border-radius: 16px; padding: 14px 22px; font-size: 13px;
    font-weight: 700; color: var(--text-mid); box-shadow: var(--shadow); min-width: 90px; }
.dg-score-box b { display: block; font-size: 26px; color: var(--green-dark); margin-top: 2px; }
.dg-final-reward { display: flex; flex-direction: column; gap: 6px; background: var(--white); border-radius: 16px;
    padding: 12px 26px; font-size: 14px; font-weight: 700; color: var(--text-dark); box-shadow: var(--shadow); }
.dg-final-reward .levelup { color: #F4511E; animation: pgPulse 1s ease infinite; }
.dg-exit-btn { border: 2px solid var(--green-light); background: var(--white); color: var(--green-dark);
    border-radius: 999px; font-size: 16px; font-weight: 800; padding: 13px 34px; min-height: 54px; cursor: pointer; }
.dg-room-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center; }
.dg-room-hint { margin: 0; font-size: 14px; color: var(--text-light); }
[data-theme="dark"] .dg-lobby-title { color: #8bc34a; }
[data-theme="dark"] .dg-lobby-sub, [data-theme="dark"] .dg-setup-tip, [data-theme="dark"] .dg-choose-hint,
[data-theme="dark"] .dg-skip, [data-theme="dark"] .dg-room-hint { color: #aaa; }
[data-theme="dark"] .dg-input, [data-theme="dark"] .dg-small-btn, [data-theme="dark"] .dg-round-btn,
[data-theme="dark"] .dg-score-box, [data-theme="dark"] .dg-final-reward, [data-theme="dark"] .dg-tool-btn { background: #2a2f38; color: #e0e0e0; }
[data-theme="dark"] .dg-secret-word { background: #2a2f38; color: #b39ddb; }
[data-theme="dark"] .dg-guess-who, [data-theme="dark"] .dg-handoff h2,
[data-theme="dark"] .dg-round-result h2, [data-theme="dark"] .dg-final h2,
[data-theme="dark"] .dg-room-wait h2 { color: #a5d6a7; }
[data-theme="dark"] .dg-score-box b { color: #8bc34a; }
[data-theme="dark"] .dg-exit-btn { background: #2a2f38; color: #c8e6c9; }

/* ---- 角色扮演 ---- */
.rp-wrap { height: 100%; display: flex; flex-direction: column; overflow-y: auto; }
.rp-title { font-size: 30px; font-weight: 900; color: var(--green-dark); padding: 22px 20px 4px; text-align: center; }
.rp-sub { margin: 0; padding: 0 20px 14px; font-size: 14px; color: var(--text-light); text-align: center; }
.rp-scenes { display: flex; flex-direction: column; gap: 12px; padding: 6px 16px 16px; }
.rp-scene-btn { display: flex; align-items: center; gap: 14px; border: none; background: var(--white);
    border-radius: 18px; padding: 14px 16px; cursor: pointer; text-align: left;
    box-shadow: 0 3px 10px rgba(0,0,0,.07); transition: transform .15s; touch-action: manipulation; }
.rp-scene-btn:active { transform: scale(.98); }
.rp-scene-icon { width: 52px; height: 52px; min-width: 52px; border-radius: 50%; background: var(--green-bg);
    display: flex; align-items: center; justify-content: center; font-size: 26px; }
.rp-scene-name { font-size: 16px; font-weight: 800; color: var(--text-dark); display: block; }
.rp-scene-npc { font-size: 12.5px; color: var(--text-light); display: block; margin-top: 3px; }
.rp-tip { margin: 0 16px 20px; padding: 10px 14px; background: var(--sky-bg); color: #1565C0;
    border-radius: 14px; font-size: 12.5px; line-height: 1.6; }
.rp-chat { flex: 1; display: flex; flex-direction: column; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
.rp-chat-top { display: flex; align-items: center; justify-content: space-between; }
.rp-chat-npc { font-size: 14px; font-weight: 800; color: var(--green-dark); }
.rp-round { font-size: 12.5px; font-weight: 700; color: var(--amber-dark); background: var(--amber-bg);
    border-radius: 999px; padding: 5px 12px; }
.rp-bubble-row { display: flex; gap: 8px; align-items: flex-end; }
.rp-bubble-row.me { flex-direction: row-reverse; }
.rp-avatar { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--white);
    display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow); }
.rp-bubble { max-width: 78%; background: var(--white); border-radius: 16px; padding: 12px 16px; font-size: 15.5px;
    font-weight: 600; color: var(--text-dark); line-height: 1.55; box-shadow: var(--shadow);
    border-bottom-left-radius: 4px; }
.rp-bubble.me { background: linear-gradient(135deg, #43A047, #66BB6A); color: #fff; border-bottom-left-radius: 16px;
    border-bottom-right-radius: 4px; }
.rp-options { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.rp-opt { border: 2px solid var(--green-light); background: var(--white); color: var(--text-dark);
    font-size: 15px; font-weight: 700; border-radius: 14px; padding: 13px 14px; cursor: pointer;
    min-height: 52px; text-align: left; transition: all .15s; touch-action: manipulation; }
.rp-opt:active { transform: scale(.98); }
.rp-opt.correct { background: #C8E6C9; border-color: #43A047; color: #1B5E20; }
.rp-opt.wrong { background: #FFCDD2; border-color: #E53935; color: #B71C1C; }
.rp-opt:disabled { cursor: default; }
.rp-score { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--amber-dark); }
.rp-final { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center; }
.rp-final-icon { font-size: 64px; animation: pgBounce 1s ease infinite; }
.rp-final h2 { font-size: 26px; color: var(--green-dark); }
.rp-final-sub { margin: 0; font-size: 14px; color: var(--text-light); }
.rp-final-reward { display: flex; flex-direction: column; gap: 6px; background: var(--white); border-radius: 16px;
    padding: 14px 28px; margin: 6px 0; font-size: 15px; font-weight: 700; color: var(--text-dark); box-shadow: var(--shadow); }
.rp-final-reward .levelup { color: #F4511E; animation: pgPulse 1s ease infinite; }
.rp-again, .rp-exit { border: none; border-radius: 999px; font-size: 16px; font-weight: 800;
    padding: 14px 36px; min-height: 56px; cursor: pointer; touch-action: manipulation; }
.rp-again { background: linear-gradient(135deg, #26A69A, #00897B); color: #fff; }
.rp-exit { background: var(--white); color: var(--green-dark); border: 2px solid var(--green-light); }
[data-theme="dark"] .rp-title { color: #8bc34a; }
[data-theme="dark"] .rp-sub, [data-theme="dark"] .rp-scene-npc, [data-theme="dark"] .rp-final-sub { color: #aaa; }
[data-theme="dark"] .rp-scene-btn, [data-theme="dark"] .rp-bubble, [data-theme="dark"] .rp-opt,
[data-theme="dark"] .rp-final-reward { background: #2a2f38; color: #e0e0e0; }
[data-theme="dark"] .rp-scene-name { color: #eee; }
[data-theme="dark"] .rp-chat-npc, [data-theme="dark"] .rp-final h2 { color: #a5d6a7; }
[data-theme="dark"] .rp-exit { background: #2a2f38; color: #c8e6c9; }

/* ---- 动画 ---- */
@keyframes pgPopIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pgBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pgPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pgShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }

/* 移动端补丁：全屏沉浸时锁滚动 + 触摸优化 */
body.in-game { overflow: hidden !important; position: fixed !important; width: 100% !important; }
.game-body button, .game-body .dg-color, .game-body .dg-tool-btn { touch-action: manipulation; }

/* ============================================================
   Phase 12: 儿童/成人模式换肤 + 游乐场补完五~九
   ============================================================ */

/* ---- theme tokens (child default: warm colors) ---- */
:root {
    --primary-color: #FF9800;
    --primary-strong: #F4511E;
    --primary-gradient: linear-gradient(135deg, #FFA726, #F4511E);
    --surface: #ffffff;
    --surface-soft: #FFF8E1;
    --text-main: #1B5E20;
    --text-sub: #6d8b74;
    --radius-lg: 22px;
}
:root[data-mode="adult"] {
    --primary-color: #37474F;
    --primary-strong: #212121;
    --primary-gradient: linear-gradient(135deg, #546E7A, #263238);
    --surface: #fafafa;
    --surface-soft: #eeeeee;
    --text-main: #212121;
    --text-sub: #757575;
}
:root[data-mode="adult"] .top-bar { background: #1c1c1e; }
:root[data-mode="adult"] .bottom-nav { background: #f5f5f5; }
:root[data-mode="adult"] .bottom-nav .nav-btn .nav-label { color: #616161; }
:root[data-mode="adult"] .pg-header h2 { color: #212121; }
:root[data-mode="adult"] .pg-subtitle { color: #757575; }
:root[data-mode="adult"] .pg-game-card { box-shadow: 0 4px 14px rgba(0,0,0,.16); }
:root[data-mode="adult"] .pg-ugc-btn,
:root[data-mode="adult"] .pg-album-btn { background: #fafafa; color: #37474F; border: 1.5px solid #cfd8dc; }
:root[data-mode="adult"] .playground-tab.active { background: var(--primary-gradient); }

/* ---- mode toggle switch ---- */
.mode-toggle { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.mode-toggle-icon { font-size: 15px; }
.mode-toggle-track { width: 42px; height: 24px; border-radius: 999px; background: linear-gradient(135deg,#FFA726,#F4511E); position: relative; transition: background .3s; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
.mode-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform .3s; }
:root[data-mode="adult"] .mode-toggle-track { background: linear-gradient(135deg,#607D8B,#263238); }
.mode-toggle:active .mode-toggle-thumb { transform: scale(.9); }

/* ---- playground: new game cards + bottom actions ---- */
.pg-card-undercover { background: linear-gradient(135deg, #5C6BC0, #283593); }
.pg-card-story { background: linear-gradient(135deg, #EC407A, #AD1457); }
.pg-bottom-actions { display: flex; gap: 12px; padding: 2px 16px 10px; }
.pg-ugc-btn, .pg-album-btn { flex: 1; border: none; border-radius: 16px; padding: 13px 8px;
    font-size: 15px; font-weight: 800; color: #fff; cursor: pointer; touch-action: manipulation; }
.pg-ugc-btn { background: linear-gradient(135deg, #FFA726, #F4511E); box-shadow: 0 5px 14px rgba(244,81,30,.35); }
.pg-album-btn { background: linear-gradient(135deg, #EC407A, #AD1457); box-shadow: 0 5px 14px rgba(173,20,87,.3); }
.pg-ugc-btn:active, .pg-album-btn:active { transform: scale(.96); }

/* ---- UGC bottom sheet ---- */
.ugc-sheet { position: fixed; inset: 0; z-index: 12000; display: none; align-items: flex-end;
    justify-content: center; background: rgba(0,0,0,.45); }
.ugc-sheet-panel { width: 100%; max-width: 520px; background: var(--surface); border-radius: 26px 26px 0 0;
    padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); animation: sheetUp .28s ease;
    box-shadow: 0 -6px 30px rgba(0,0,0,.25); }
@keyframes sheetUp { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.ugc-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.ugc-sheet-head h3 { margin: 0; color: var(--text-main); font-size: 20px; }
.ugc-close { border: none; background: #eee; color: #555; width: 36px; height: 36px; border-radius: 50%;
    font-size: 16px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.ugc-desc { color: var(--text-sub); font-size: 13.5px; margin: 4px 0 12px; line-height: 1.5; }
.ugc-input { width: 100%; box-sizing: border-box; padding: 13px 14px; margin-bottom: 10px;
    border: 2px solid #eee; border-radius: 14px; font-size: 16px; background: var(--surface);
    color: var(--text-main); outline: none; min-height: 48px; }
.ugc-input:focus { border-color: var(--primary-color); }
.ugc-submit { width: 100%; border: none; border-radius: 16px; padding: 15px; font-size: 17px; font-weight: 800;
    color: #fff; background: var(--primary-gradient); cursor: pointer; touch-action: manipulation;
    box-shadow: 0 6px 16px rgba(244,81,30,.3); }
.ugc-status { text-align: center; font-size: 14px; color: var(--primary-strong); margin: 10px 0 0; min-height: 18px; }

/* ---- story album ---- */
.story-album-list { max-height: 56vh; overflow-y: auto; }
.story-album-item { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-soft);
    margin-bottom: 10px; align-items: flex-start; }
.story-album-item img { width: 84px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #e0e0e0; }
.story-album-meta b { display: block; color: var(--text-main); font-size: 15px; }
.story-album-meta span { color: var(--text-sub); font-size: 12px; }
.story-album-meta p { margin: 4px 0 0; color: var(--text-main); font-size: 12.5px; line-height: 1.5; }

/* ---- 🕵️ 谁是卧底 ---- */
.uc-wrap { max-width: 640px; margin: 0 auto; height: 100%; display: flex; flex-direction: column;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.uc-lobby, .uc-room-wait { text-align: center; padding-top: 26px; flex: 1; }
.uc-logo { font-size: 64px; line-height: 1; }
.uc-title { font-size: 26px; font-weight: 900; color: var(--text-main); margin: 10px 0 4px; }
.uc-sub { color: var(--text-sub); font-size: 14px; margin: 0 0 18px; }
.uc-mode-btns { display: flex; flex-direction: column; gap: 12px; padding: 0 12px; max-width: 360px; margin: 0 auto; }
.uc-join-row { display: flex; gap: 10px; max-width: 360px; margin: 16px auto 0; padding: 0 12px; }
.uc-input { flex: 1; min-height: 48px; border: 2px solid #e8e0d0; border-radius: 14px; padding: 10px 14px;
    font-size: 16px; outline: none; background: var(--surface); color: var(--text-main); min-width: 0; }
.uc-rule { color: var(--text-sub); font-size: 13px; line-height: 1.7; margin: 18px 10px 0; text-align: left; }
.uc-members { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.uc-member-chip { background: var(--surface-soft); border-radius: 999px; padding: 8px 14px; font-size: 14px;
    font-weight: 700; color: var(--text-main); }
.uc-start-btn { margin-top: 8px; }
/* in-game */
.uc-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; gap: 8px; }
.uc-round { background: var(--primary-gradient); color: #fff; font-weight: 800; border-radius: 999px;
    padding: 7px 14px; font-size: 14px; white-space: nowrap; }
.uc-my-word { background: var(--surface-soft); border-radius: 999px; padding: 7px 14px; font-size: 14px;
    font-weight: 700; color: var(--text-main); white-space: nowrap; }
.uc-my-word b { color: var(--primary-strong); }
.uc-timer-ring { position: relative; width: 64px; height: 64px; }
.uc-timer-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--text-main); }
.uc-stage { flex: 1; overflow-y: auto; padding-bottom: 10px; }
.uc-phase-banner { text-align: center; font-size: 18px; font-weight: 800; color: var(--primary-strong);
    padding: 10px 0 12px; }
.uc-desc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.uc-desc-item { background: var(--surface-soft); border-radius: 14px; padding: 10px 14px; font-size: 15px;
    color: var(--text-main); }
.uc-desc-item b { color: var(--primary-strong); }
.uc-desc-input-row { display: flex; gap: 10px; margin-top: 8px; }
.uc-send-btn { flex-shrink: 0; }
.uc-vote-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: 8px; }
.uc-vote-avatar { width: 92px; min-height: 110px; background: var(--surface); border: 2.5px solid #e8e0d0;
    border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 4px; cursor: pointer; position: relative; touch-action: manipulation; transition: transform .12s; }
.uc-vote-avatar:active { transform: scale(.93); }
.uc-vote-avatar b { font-size: 13px; color: var(--text-main); max-width: 84px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.uc-vote-avatar.uc-voted { border-color: var(--primary-color); background: var(--surface-soft); }
.uc-vote-check { position: absolute; top: -7px; right: -7px; background: var(--primary-gradient); color: #fff;
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* avatar circles: 60px+ tap targets */
.uc-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--primary-gradient);
    display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.uc-result { text-align: center; padding-top: 40px; }
.uc-result-emoji { font-size: 70px; }
.uc-result-title { font-size: 24px; font-weight: 900; color: var(--text-main); margin: 10px 0; }
.uc-result-executed { color: var(--text-sub); font-size: 15px; margin: 0 0 6px; }
.uc-result-word { font-size: 15px; color: var(--text-main); background: var(--surface-soft); display: inline-block;
    border-radius: 14px; padding: 10px 16px; margin: 6px 0 14px; }
.uc-result-coins { font-size: 20px; font-weight: 900; color: var(--primary-strong); margin: 8px 0 20px; }

/* ---- 📖 故事接龙 ---- */
.sr-wrap { max-width: 640px; margin: 0 auto; height: 100%; display: flex; flex-direction: column;
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.sr-story-box { background: var(--surface-soft); border-radius: 18px; padding: 12px 14px; flex-shrink: 0;
    max-height: 38%; display: flex; flex-direction: column; }
.sr-story-head { font-weight: 800; color: var(--primary-strong); font-size: 15px;
    display: flex; justify-content: space-between; margin-bottom: 6px; }
.sr-count { color: var(--text-sub); font-size: 13px; }
.sr-story-text { overflow-y: auto; font-size: 14.5px; line-height: 1.6; color: var(--text-main); }
.sr-story-text p { margin: 4px 0; }
.sr-story-text b { color: var(--primary-strong); }
.sr-img-box { flex: 1; min-height: 0; margin: 10px 0; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, #ffe0b2, #ffcc80); display: flex; align-items: center; justify-content: center; }
.sr-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-img-final { max-height: 260px; border-radius: 16px; margin: 10px auto; }
.sr-img-loading, .sr-img-fallback { color: #8d6e63; font-size: 15px; font-weight: 700; text-align: center; padding: 20px; }
.sr-input-area { flex-shrink: 0; }
.sr-input-row { display: flex; gap: 10px; }
.sr-input { flex: 1; min-width: 0; }
.sr-send-btn { flex-shrink: 0; }
.sr-actions { display: flex; justify-content: center; margin-top: 10px; }
.sr-end-btn { background: linear-gradient(135deg, #FFB74D, #FF9800) !important; }
.sr-end-mini { margin-left: 8px; border: none; border-radius: 12px; padding: 4px 10px; font-size: 12px;
    font-weight: 800; color: #fff; background: linear-gradient(135deg, #FFB74D, #FF9800);
    box-shadow: var(--shadow); }
.sr-wait-banner, .sr-done-banner { text-align: center; color: var(--primary-strong); font-weight: 800;
    font-size: 16px; padding: 14px; }
.sr-final-story { max-height: 30vh; overflow-y: auto; background: var(--surface-soft); border-radius: 14px;
    padding: 12px; text-align: left; font-size: 13.5px; line-height: 1.6; color: var(--text-main); margin: 10px 0; }
.sr-final-story p { margin: 4px 0; }
.sr-final-story b { color: var(--primary-strong); }

/* ---- 🐾 宠物餐厅/医院（语音互动） ---- */
.pet-wrap { height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    position: relative; }
.pet-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
    font-weight: 800; font-size: 14px; color: #5d4037; }
.pet-closeness, .pet-order-no, .pet-coins { background: rgba(255,255,255,.75); border-radius: 999px;
    padding: 6px 12px; }
.pet-closeness b, .pet-coins b { color: #e53935; }
.pet-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 16px; position: relative; }
.pet-npc { text-align: center; transition: transform .3s; }
.pet-npc.bowing { animation: petBow .9s ease; }
@keyframes petBow { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-10deg) translateY(4px); }
    50% { transform: rotate(10deg) translateY(6px); } 75% { transform: rotate(-6deg) translateY(2px); } }
.pet-npc-avatar { font-size: 74px; line-height: 1.1; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); }
.pet-npc-name { font-size: 15px; font-weight: 800; color: #4e342e; margin-top: 2px; }
.pet-npc-face { font-size: 30px; }
.pet-order-bubble { background: #fff; border-radius: 20px; padding: 14px 20px; margin-top: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14); text-align: center; max-width: 88%; position: relative;
    animation: bubblePop .35s ease; }
@keyframes bubblePop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pet-bubble-speaker { display: block; font-size: 11px; color: #bdbdbd; font-weight: 800; margin-bottom: 4px; }
.pet-bubble-text { font-size: 21px; font-weight: 900; color: #3e2723; line-height: 1.4; }
.pet-hint { color: #6d4c41; font-size: 14px; font-weight: 700; margin-top: 12px; text-align: center; min-height: 20px; }
.pet-say { color: #4e342e; font-size: 13.5px; margin-top: 6px; min-height: 20px; }
.pet-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pet-heart { position: absolute; bottom: 20%; font-size: 26px; animation: petFloatUp 1.5s ease forwards; }
.pet-coin-fly { position: absolute; bottom: 30%; left: 45%; font-size: 22px; font-weight: 900;
    color: #ff8f00; animation: petFloatUp 1.5s ease forwards; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
@keyframes petFloatUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }
/* 90px breathing mic button（呼吸动画只动 transform——iOS 上 box-shadow 动画会产生残影"双按钮"） */
.pet-mic-btn { width: 90px; height: 90px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(145deg, #ff5252, #d32f2f); color: #fff; margin: 0 auto 18px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    box-shadow: 0 8px 24px rgba(211,47,47,.45), 0 0 0 10px rgba(255,82,82,.18);
    animation: micBreath 2s ease-in-out infinite; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.pet-mic-icon { font-size: 32px; line-height: 1; }
.pet-mic-label { font-size: 11px; font-weight: 800; }
.pet-mic-btn.listening { animation: none; transform: scale(1.08); box-shadow: 0 0 0 14px rgba(255,82,82,.25),
    0 8px 28px rgba(211,47,47,.5); }
@keyframes micBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.pet-fallback { display: flex; gap: 10px; justify-content: center; padding-bottom: 12px; }
.pet-final { text-align: center; padding-top: 40px; }
.pet-final-icon { font-size: 70px; }
.pet-final h2 { color: var(--text-main); font-size: 24px; }
.pet-final .rp-final-reward { color: var(--text-sub); font-size: 14px; margin: 10px 0 22px; }

/* ---- rp pet cards (lobby) ---- */
.rp-pet-cards { display: flex; gap: 14px; padding: 4px 16px 14px; }
.rp-pet-card { flex: 1; border: none; border-radius: 20px; padding: 18px 10px; color: #fff; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: manipulation;
    box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .15s; }
.rp-pet-card:active { transform: scale(.94); }
.rp-pet-cafe { background: linear-gradient(160deg, #FFB74D, #F4511E); }
.rp-pet-hospital { background: linear-gradient(160deg, #64B5F6, #1E88E5); }
.rp-pet-icon { font-size: 52px; line-height: 1; }
.rp-pet-name { font-size: 18px; font-weight: 900; }
.rp-pet-npc { font-size: 13px; opacity: .95; }
.rp-pet-tag { font-size: 11px; background: rgba(255,255,255,.28); border-radius: 999px; padding: 4px 12px;
    font-weight: 800; }
.rp-divider { text-align: center; color: var(--text-sub); font-size: 13px; font-weight: 700;
    margin: 4px 0 10px; letter-spacing: 2px; }

/* ---- warm buttons (老大叮嘱：冷色按钮换暖色) ---- */
.dg-mode-btn { background: var(--primary-gradient) !important; box-shadow: 0 6px 16px rgba(244,81,30,.32) !important; }
.dg-mode-btn.room { background: linear-gradient(135deg, #FFA726, #F4511E) !important; }
.mono-start-btn { background: var(--primary-gradient) !important; }
.mono-dice-btn { background: var(--primary-gradient) !important; }
.mono-opt.correct { background: linear-gradient(135deg, #66BB6A, #2E7D32) !important; }
.mono-opt.wrong { background: linear-gradient(135deg, #EF5350, #C62828) !important; }
.rp-opt.correct { background: linear-gradient(135deg, #66BB6A, #2E7D32) !important; color: #fff !important; }
.rp-opt.wrong { background: linear-gradient(135deg, #EF5350, #C62828) !important; color: #fff !important; }
.rp-again, .rp-exit { background: var(--primary-gradient) !important; }
.dg-start, .dg-guess-btn { background: var(--primary-gradient) !important; }



/* ============================================================
   Phase 13: 情绪层优化
   1) 登录页动态欢迎角色  2) 游乐场卡片动画+今日热门
   3) 游乐场高饱和暖色主题  4) （音效在 gamefx.js / app.js）
   ============================================================ */

/* ---- 1) Auth mascot: bouncing chick + rotating welcome bubble ---- */
.auth-mascot { display: flex; justify-content: center; margin: 4px 0 16px; }
.mascot-animation { display: flex; align-items: flex-end; gap: 10px; }
.mascot-emoji { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
    animation: mascotBounce 2.2s ease-in-out infinite; transform-origin: bottom center; }
.mascot-bubble { position: relative; background: #fff; border: 3px solid #FFB300; border-radius: 18px;
    padding: 10px 14px; font-size: 14px; font-weight: 700; color: var(--green-dark);
    box-shadow: 0 4px 12px rgba(255,179,0,.35); animation: bubblePop .5s cubic-bezier(.34,1.56,.64,1);
    max-width: 210px; text-align: center; }
.mascot-bubble::before { content: ''; position: absolute; left: -13px; bottom: 14px;
    border: 8px solid transparent; border-right-color: #FFB300; }
.mascot-bubble::after { content: ''; position: absolute; left: -7px; bottom: 15px;
    border: 6px solid transparent; border-right-color: #fff; }
.mascot-bubble.swap { animation: bubbleSwap .45s ease; }
@keyframes mascotBounce { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes bubblePop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bubbleSwap { 0% { transform: scale(.85); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }

/* ---- 2)+3) Playground: hot color theme + card float anims + hot badge ---- */
#playgroundView { --pg-primary: #FF6B6B; --pg-secondary: #4ECDC4; --pg-accent: #FFE66D; }
#playgroundView .pg-header h2 { font-size: 28px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53 55%, #FFB300);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#playgroundView .pg-online-bubble { border: 2px solid #FFB300; color: #E65100; background: #FFF8E1; font-weight: 700; }
#playgroundView .pg-subtitle { color: #E65100; font-weight: 600; }
#playgroundView .pg-game-card { position: relative; background: linear-gradient(145deg, #ffffff, #fff3ee);
    border: 3px solid var(--pg-primary); border-radius: 24px; box-shadow: 0 8px 0 var(--pg-primary);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
#playgroundView .pg-game-card:hover { transform: scale(1.04) translateY(-4px); box-shadow: 0 12px 0 var(--pg-primary); }
#playgroundView .pg-game-card:active { transform: scale(.96); box-shadow: 0 4px 0 var(--pg-primary); }
#playgroundView .pg-card-title { color: #C62828; }
#playgroundView .pg-card-sub { color: #8D6E63; }

/* per-card floating icon (staggered) */
.pg-card-monopoly .pg-card-icon { animation: pgFloat 2s ease-in-out infinite; }
.pg-card-draw .pg-card-icon { animation: pgFloat 2.4s ease-in-out infinite .3s; }
.pg-card-roleplay .pg-card-icon { animation: pgFloat 2.8s ease-in-out infinite .6s; }
.pg-card-undercover .pg-card-icon { animation: pgFloat 2.2s ease-in-out infinite .15s; }
.pg-card-story .pg-card-icon { animation: pgFloat 2.6s ease-in-out infinite .45s; }
@keyframes pgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* today's hot badge (from /api/game/hot) */
.pg-hot-badge { position: absolute; top: -10px; right: 14px; background: linear-gradient(135deg, #FF3D00, #FF6D00);
    color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
    box-shadow: 0 3px 8px rgba(255,61,0,.45); animation: hotPulse 1.6s ease-in-out infinite; z-index: 2; }
@keyframes hotPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* adult mode: keep minimal, drop the candy colors */
:root[data-mode="adult"] #playgroundView .pg-header h2 { background: none; -webkit-text-fill-color: #212121; font-size: 24px; }
:root[data-mode="adult"] #playgroundView .pg-online-bubble { border-color: #BDBDBD; color: #616161; background: #fff; }
:root[data-mode="adult"] #playgroundView .pg-subtitle { color: #757575; }
:root[data-mode="adult"] #playgroundView .pg-game-card { background: #fff; border-color: #BDBDBD; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
:root[data-mode="adult"] #playgroundView .pg-game-card:hover { transform: scale(1.02) translateY(-3px); }
:root[data-mode="adult"] #playgroundView .pg-card-title { color: #212121; }
:root[data-mode="adult"] #playgroundView .pg-card-sub { color: #757575; }

/* ============================================================
   Phase 14: Avatar System — Onboarding Wizard + Avatar Display
   ============================================================ */

/* ---- Onboarding overlay ---- */
.ob-overlay { position: fixed; inset: 0; z-index: 9999;
    background: linear-gradient(160deg, #FFF8E1 0%, #FFECB3 40%, #FFE0B2 100%);
    display: flex; flex-direction: column; animation: obIn .4s ease; }
@keyframes obIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

.ob-progress-bar { width: 100%; height: 5px; background: rgba(255,255,255,.45); }
.ob-progress-fill { height: 100%; width: 16.6%; background: linear-gradient(90deg, #FF6B6B, #FFA726);
    transition: width .35s ease; border-radius: 0 3px 3px 0; }

.ob-screen { flex: 1; display: flex; flex-direction: column; align-items: center;
    overflow-y: auto; padding: 16px 20px 80px; gap: 16px; }

/* ---- Preview area ---- */
.ob-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.ob-preview-avatar { width: 130px; height: 130px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 4px 20px rgba(255,152,0,.2);
    animation: obPreviewFloat 3s ease-in-out infinite; }
@keyframes obPreviewFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ob-preview-avatar svg { width: 120px; height: 120px; }
.ob-preview-name { font-size: 18px; font-weight: 800; color: #E65100; text-shadow: 0 2px 4px rgba(255,255,255,.8); }

/* ---- Step content ---- */
.ob-content { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.ob-step-title { font-size: 20px; font-weight: 800; color: #BF360C; text-align: center; margin: 0; }
.ob-step-hint { font-size: 13px; color: #E65100; text-align: center; margin: -8px 0 4px; }

/* ---- Species grid ---- */
.ob-species-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ob-species-btn { display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #fff; border: 3px solid transparent; border-radius: 18px; padding: 12px 6px;
    cursor: pointer; transition: all .25s ease; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.ob-species-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(255,152,0,.2); }
.ob-species-btn.selected { border-color: #FF6B6B; background: #FFF3E0; transform: scale(1.05); }
.ob-species-emoji { font-size: 36px; }
.ob-species-name { font-size: 12px; font-weight: 700; color: #5D4037; }

/* ---- Color dots ---- */
.ob-color-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ob-color-dot { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff;
    cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.ob-color-dot:hover { transform: scale(1.12); }
.ob-color-dot.selected { border-color: #FF6B6B; transform: scale(1.15); box-shadow: 0 4px 12px rgba(255,107,107,.4); }

/* ---- Style/option grid ---- */
.ob-opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ob-opt-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: #fff; border: 3px solid transparent; border-radius: 14px; padding: 10px 4px;
    cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 8px rgba(0,0,0,.06); min-height: 56px; }
.ob-opt-btn:hover { transform: translateY(-2px); }
.ob-opt-btn.selected { border-color: #FF6B6B; background: #FFF3E0; transform: scale(1.04); }
.ob-opt-label { font-size: 11px; font-weight: 700; color: #5D4037; }

/* ---- Two-column section ---- */
.ob-section { display: flex; flex-direction: column; gap: 6px; }
.ob-section-label { font-size: 14px; font-weight: 700; color: #BF360C; text-align: center; }

/* ---- Name input ---- */
.ob-name-input { width: 100%; max-width: 280px; padding: 14px 18px; font-size: 18px; font-weight: 700;
    border: 3px solid #FFB300; border-radius: 16px; text-align: center; color: #5D4037;
    background: #fff; outline: none; transition: border-color .2s; }
.ob-name-input:focus { border-color: #FF6B6B; }
.ob-year-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 340px; margin: 0 auto; }
.ob-year-btn { padding: 8px 14px; font-size: 14px; font-weight: 700; border-radius: 12px;
    background: #fff; border: 2px solid transparent; cursor: pointer; color: #5D4037; transition: all .2s; }
.ob-year-btn:hover { transform: translateY(-2px); }
.ob-year-btn.selected { border-color: #FF6B6B; background: #FFF3E0; }

/* ---- Finish button ---- */
.ob-finish-btn { margin-top: 8px; padding: 16px 40px; font-size: 20px; font-weight: 800;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53); color: #fff; border: none;
    border-radius: 24px; cursor: pointer; box-shadow: 0 6px 0 #E64A19; transition: all .2s;
    align-self: center; animation: obFinishPulse 2s ease-in-out infinite; }
.ob-finish-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #E64A19; }
@keyframes obFinishPulse { 0%,100% { box-shadow: 0 6px 0 #E64A19, 0 0 0 0 rgba(255,107,107,.4); }
    50% { box-shadow: 0 6px 0 #E64A19, 0 0 0 12px rgba(255,107,107,0); } }

/* ---- Bottom nav ---- */
.ob-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 56px;
    background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
    border-top: 1px solid rgba(0,0,0,.06); }
.ob-back-btn { padding: 8px 16px; font-size: 14px; font-weight: 700; color: #E65100;
    background: transparent; border: none; cursor: pointer; }
.ob-step-indicator { font-size: 13px; font-weight: 700; color: #FFA726; }
.ob-skip-btn { margin-left: auto; padding: 8px 14px; font-size: 13px; font-weight: 700;
    color: #9E9E9E; background: transparent; border: none; cursor: pointer; }
.ob-skip-btn:active { color: #E65100; }

/* ---- Avatar in playground header ---- */
.pg-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pg-avatar-large { width: 72px; height: 72px; }
.pg-avatar-large svg { width: 72px; height: 72px; }
.pg-avatar-name { font-size: 12px; font-weight: 700; color: var(--green-dark, #2E7D32); }
:root[data-mode="adult"] .pg-avatar-name { color: #616161; }

/* ---- Avatar state animations ---- */
.avatar-svg.state-idle { animation: avatarIdle 3s ease-in-out infinite; transform-origin: bottom center; }
.avatar-svg.state-happy { animation: avatarHappy 1.8s ease-in-out infinite; transform-origin: bottom center; }
.avatar-svg.state-celebrate { animation: avatarCelebrate 1.2s ease-in-out infinite; transform-origin: bottom center; }
.avatar-svg.state-sad { animation: avatarSad 3.5s ease-in-out infinite; transform-origin: bottom center; }
.avatar-svg.state-jump { animation: avatarJump 1s ease-in-out infinite; transform-origin: bottom center; }
.avatar-svg.state-dance { animation: avatarDance 0.9s ease-in-out infinite; transform-origin: bottom center; }
@keyframes avatarJump {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14%) scaleY(1.05); }
  60% { transform: translateY(-11%) scaleY(0.98); }
}
@keyframes avatarDance {
  0%, 100% { transform: rotate(-7deg); }
  25% { transform: rotate(7deg) translateY(-5%); }
  50% { transform: rotate(-7deg); }
  75% { transform: rotate(6deg) translateY(-4%); }
}
.avatar-svg .avatar-ring { animation: avatarRing 1.5s linear infinite; transform-origin: 50px 50px; }

@keyframes avatarIdle { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.01); } }
@keyframes avatarHappy { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-2deg); }
    75% { transform: translateY(-6px) rotate(2deg); } }
@keyframes avatarCelebrate { 0%,100% { transform: translateY(0) rotate(0) scale(1); }
    25% { transform: translateY(-10px) rotate(-5deg) scale(1.05); }
    75% { transform: translateY(-10px) rotate(5deg) scale(1.05); } }
@keyframes avatarSad { 0%,100% { transform: translateY(2px) rotate(0); } 50% { transform: translateY(4px) rotate(-1deg); } }
@keyframes avatarRing { 0% { stroke-dasharray: 280; stroke-dashoffset: 280; opacity: .8; }
    100% { stroke-dashoffset: 0; opacity: .3; } }

/* ---- Adult mode onboarding (minimal) ---- */
:root[data-mode="adult"] .ob-overlay { background: linear-gradient(160deg, #f5f5f5 0%, #e0e0e0 100%); }
:root[data-mode="adult"] .ob-step-title { color: #212121; }
:root[data-mode="adult"] .ob-step-hint { color: #616161; }
:root[data-mode="adult"] .ob-species-btn, :root[data-mode="adult"] .ob-opt-btn { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
:root[data-mode="adult"] .ob-species-btn.selected, :root[data-mode="adult"] .ob-opt-btn.selected { border-color: #424242; background: #f5f5f5; }
:root[data-mode="adult"] .ob-finish-btn { background: linear-gradient(135deg, #455A64, #263238); box-shadow: 0 6px 0 #1c1c1c; }

/* ============================================================
   Phase 16: 大富翁「软糖 3D」换肤 — 对齐概念图（奶油底+糖果瓷砖+
   底部 5 键导航+抽屉面板+亲子任务胜利结算页）。无红色"答"章。
   ============================================================ */

/* ---- cream canvas ---- */
.mono-wrap {
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
}
.mono-game { background: transparent; }

/* ---- glossier candy tiles ---- */
.mono-board {
    background: linear-gradient(135deg, #FFF9E8 0%, #FCEBC8 100%);
    border-radius: 22px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.85),
        inset 0 -3px 0 rgba(196,150,90,.25),
        0 10px 24px rgba(150,105,50,.16);
}
.mono-tile { border-radius: 12px; }
.mono-tile .cell-face {
    border-radius: 12px;
    box-shadow:
        inset 0 3px 0 rgba(255,255,255,.55),
        inset 0 -4px 0 rgba(0,0,0,.16),
        0 3px 0 var(--c2),
        0 5px 10px rgba(0,0,0,.16);
    overflow: hidden;
    position: relative;
}
.mono-tile .cell-face::after {
    content: '';
    position: absolute;
    left: 12%; right: 12%; top: 6%; height: 34%;
    background: linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%;
    pointer-events: none;
}
@media (min-width: 768px) {
    .mono-tile { border-radius: 14px; }
    .mono-tile .cell-face { border-radius: 14px; }
}

/* ---- trophy star counter ---- */
.trophy-stars { font-size: 12px; }
.trophy-stars .star-num {
    font-weight: 900; color: #B9770E; letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* ---- quiz modal → speech-bubble candy style ---- */
.mono-modal { background: rgba(90,60,20,.45); }
.mono-modal-card {
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 4px solid #FFE0A8;
    border-radius: 30px;
    box-shadow: 0 14px 40px rgba(120,80,20,.3);
}
.mono-modal-type {
    background: linear-gradient(135deg, #FFD54F, #FFA726);
    color: #fff; font-size: 15px; font-weight: 900;
    border-radius: 999px; padding: 7px 22px;
    box-shadow: 0 3px 0 #E58E2E, 0 5px 10px rgba(229,142,46,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    position: relative;
}
.mono-modal-type::after {
    content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: #FFA726; border-bottom: none;
}
.mono-modal-word {
    font-size: 40px; color: #6D4C41; letter-spacing: 2px;
    text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.mono-modal-hint { font-size: 14px; color: #A1887F; }
.mono-speak {
    border: none; background: linear-gradient(135deg, #81D4FA, #4FC3F7); color: #fff;
    border-radius: 999px; box-shadow: 0 3px 0 #29A3DD, 0 5px 10px rgba(79,195,247,.4);
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
}
.mono-opt {
    border: none; color: #fff; font-size: 19px; font-weight: 900;
    border-radius: 999px; padding: 15px 18px; min-height: 58px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.18);
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .12s;
}
.mono-opt:active { transform: scale(.97); }
.mono-opt.candy-0 { background: linear-gradient(180deg, #FF8A80, #E55656); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #C43C3C, 0 6px 12px rgba(229,86,86,.3); }
.mono-opt.candy-1 { background: linear-gradient(180deg, #7BC4FF, #4096E5); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #2E7CC4, 0 6px 12px rgba(64,150,229,.3); }
.mono-opt.candy-2 { background: linear-gradient(180deg, #FFD56B, #FFB300); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(0,0,0,.15), 0 4px 0 #E5A000, 0 6px 12px rgba(255,179,0,.3); }
.mono-opt.candy-3 { background: linear-gradient(180deg, #B9A8FF, #9766E5); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.18), 0 4px 0 #7E4FCF, 0 6px 12px rgba(151,102,229,.3); }
.mono-opt.correct { background: linear-gradient(135deg, #66BB6A, #2E7D32) !important; box-shadow: 0 4px 0 #1B5E20 !important; }
.mono-opt.wrong { background: linear-gradient(135deg, #EF5350, #C62828) !important; box-shadow: 0 4px 0 #A01C1C !important; }

/* ---- bottom candy nav ---- */
.mono-nav {
    display: flex; gap: 6px; justify-content: space-between; align-items: stretch;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF3DC 100%);
    border-radius: 22px; padding: 8px 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 0 rgba(196,150,90,.22), 0 6px 16px rgba(150,105,50,.18);
    flex-shrink: 0;
}
.mono-nav-btn {
    flex: 1; min-width: 0; border: none; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 16px; padding: 6px 2px; transition: transform .12s, background .15s;
    font-family: inherit; touch-action: manipulation;
}
.mono-nav-btn:active { transform: scale(.93); background: rgba(255,183,77,.25); }
.mono-nav-btn .nav-ico { font-size: 21px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.mono-nav-btn .nav-txt { font-size: 9.5px; font-weight: 800; color: #8D6E63; line-height: 1; }
.mono-nav-btn .nav-dice {
    font-size: 10px; font-weight: 900; color: #fff; min-width: 17px; height: 17px; line-height: 17px;
    background: linear-gradient(180deg, #FF8A80, #E55656); border-radius: 8px; padding: 0 3px;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); text-align: center;
}
.mono-nav-btn .nav-dice.dice-rolling { background: linear-gradient(180deg, #FFE066, #E5B800); color: #6D4C41; }
.mono-nav-btn.nav-start {
    background: linear-gradient(180deg, #FFD56B 0%, #FFB347 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.15), 0 3px 0 #E58E2E;
}
.mono-nav-btn.nav-start .nav-txt { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
@media (min-width: 768px) {
    .mono-nav { border-radius: 26px; padding: 10px 16px; }
    .mono-nav-btn .nav-ico { font-size: 26px; }
    .mono-nav-btn .nav-txt { font-size: 12px; }
}

/* ---- bottom sheet panels ---- */
.mono-sheet {
    position: fixed; inset: 0; z-index: 11000; display: flex; align-items: flex-end; justify-content: center;
    background: rgba(70,45,15,.45); animation: sheetFade .2s ease;
}
@keyframes sheetFade { from { opacity: 0; } to { opacity: 1; } }
.mono-sheet-card {
    width: 100%; max-width: 520px; max-height: 72vh; overflow-y: auto;
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border-radius: 28px 28px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(90,55,15,.35);
    animation: sheetUp .28s ease; box-sizing: border-box;
}
.sheet-title { font-size: 20px; font-weight: 900; color: #6D4C41; margin-bottom: 14px; text-align: center; }
.sheet-hint { font-size: 12.5px; color: #A1887F; text-align: center; margin: 12px 0 0; }
.mono-sheet-close {
    display: block; margin: 16px auto 0; border: none; cursor: pointer;
    background: linear-gradient(135deg, #FFD54F, #FFA726); color: #fff;
    font-size: 14px; font-weight: 800; border-radius: 999px; padding: 10px 34px; min-height: 44px;
    box-shadow: 0 3px 0 #E58E2E; font-family: inherit; touch-action: manipulation;
}

/* tasks panel */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.mono-task-row {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(150,105,50,.12);
}
.mono-task-row.done { background: linear-gradient(135deg, #FFF8E1, #FFECB3); }
.task-ico { font-size: 24px; line-height: 1; }
.task-mid { flex: 1; min-width: 0; }
.task-label { font-size: 13.5px; font-weight: 800; color: #6D4C41; margin-bottom: 5px; }
.task-bar { height: 8px; background: #F1E3C8; border-radius: 999px; overflow: hidden; }
.task-fill { height: 100%; background: linear-gradient(90deg, #FFB347, #FF6B6B); border-radius: 999px; transition: width .4s ease; }
.task-reward { font-size: 12.5px; font-weight: 800; color: #B9770E; white-space: nowrap; }
.task-claim {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #66BB6A, #43A047); color: #fff;
    font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 8px 14px; min-height: 38px;
    box-shadow: 0 3px 0 #2E7D32; animation: pgPulse 1.2s ease infinite; touch-action: manipulation;
}
.task-claimed { font-size: 12px; font-weight: 800; color: #66BB6A; white-space: nowrap; }

/* rewards panel */
.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.reward-card {
    background: #fff; border-radius: 18px; padding: 16px 6px; text-align: center;
    box-shadow: 0 3px 10px rgba(150,105,50,.14); display: flex; flex-direction: column; gap: 3px;
}
.reward-card.star { background: linear-gradient(160deg, #FFF8E1, #FFECB3); }
.reward-card.coin { background: linear-gradient(160deg, #FFF3E0, #FFE0B2); }
.reward-card.ok { background: linear-gradient(160deg, #E8F5E9, #C8E6C9); }
.rc-ico { font-size: 26px; line-height: 1; }
.rc-num { font-size: 22px; font-weight: 900; color: #6D4C41; }
.rc-label { font-size: 10.5px; font-weight: 800; color: #A1887F; }

/* me panel */
.me-card { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 20px;
    padding: 16px; box-shadow: 0 3px 10px rgba(150,105,50,.14); }
.me-avatar {
    width: 58px; height: 58px; min-width: 58px; border-radius: 50%;
    background: linear-gradient(160deg, #FFE0B2, #FFCC80); display: flex; align-items: center;
    justify-content: center; font-size: 30px; box-shadow: 0 3px 8px rgba(150,105,50,.2);
}
.me-rows { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.me-row { display: flex; justify-content: space-between; font-size: 13.5px; }
.me-row span { color: #A1887F; font-weight: 700; }
.me-row b { color: #6D4C41; font-weight: 900; }

/* ---- victory screen (概念图1) ---- */
.mono-victory {
    min-height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 26px 18px calc(30px + env(safe-area-inset-bottom)); gap: 12px;
    background:
        radial-gradient(circle at 18% 6%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 36%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
    box-sizing: border-box;
}
.mv-bubble {
    position: relative; font-size: 34px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, #FFA726, #FF7043);
    border-radius: 26px; padding: 12px 40px;
    box-shadow: 0 6px 0 #E65100, 0 12px 26px rgba(230,81,0,.35);
    text-shadow: 0 2px 3px rgba(0,0,0,.25);
    animation: mvPop .5s cubic-bezier(.34,1.56,.64,1);
}
.mv-bubble.lose { background: linear-gradient(135deg, #90CAF9, #42A5F5); box-shadow: 0 6px 0 #1E88E5, 0 12px 26px rgba(30,136,229,.35); }
.mv-bubble::after {
    content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
    border: 11px solid transparent; border-top-color: #FF7043; border-bottom: none;
}
.mv-bubble.lose::after { border-top-color: #42A5F5; }
@keyframes mvPop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mv-sub { font-size: 14px; font-weight: 700; color: #8D6E63; margin-top: 4px; }
.mv-trophy-wrap { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 0 2px; }
.mv-trophy { font-size: 110px; line-height: 1; filter: drop-shadow(0 10px 18px rgba(230,140,0,.45));
    animation: mvTrophyFloat 2.6s ease-in-out infinite; }
@keyframes mvTrophyFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.mv-balloon { position: absolute; font-size: 44px; animation: mvBalloon 3s ease-in-out infinite; }
.mv-balloon.b1 { left: -34px; top: -12px; }
.mv-balloon.b2 { right: -34px; top: 2px; animation-delay: .8s; }
@keyframes mvBalloon { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
.mv-ribbon { position: absolute; right: -26px; bottom: -4px; font-size: 36px; transform: rotate(18deg); }
.mv-stars { display: flex; align-items: center; gap: 4px; font-size: 34px; }
.mv-stars span { animation: pgPopIn .5s ease backwards; filter: drop-shadow(0 3px 5px rgba(230,140,0,.4)); }
.mv-stars span:nth-child(2) { animation-delay: .15s; }
.mv-stars span:nth-child(3) { animation-delay: .3s; }
.mv-star-total { font-size: 13px; font-weight: 800; color: #B9770E; margin-left: 8px; }
.mv-tasks { display: flex; gap: 8px; width: 100%; max-width: 480px; justify-content: center; flex-wrap: wrap; }
.mv-task-card {
    flex: 1; min-width: 96px; max-width: 160px; cursor: pointer; position: relative;
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 3px solid #FFE0A8; border-radius: 20px; padding: 14px 6px 12px; text-align: center;
    box-shadow: 0 5px 14px rgba(150,105,50,.16); transition: transform .15s;
    touch-action: manipulation; font-family: inherit;
}
.mv-task-card:active { transform: scale(.96); }
.mv-task-card.done { border-color: #FFB300; background: linear-gradient(175deg, #FFF8E1, #FFECB3); transform: scale(1.04); }
.mvt-ico { font-size: 38px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.mvt-label { font-size: 14.5px; font-weight: 900; color: #6D4C41; margin-top: 8px; }
.mvt-sub { font-size: 10.5px; font-weight: 700; color: #A1887F; margin-top: 3px; }
.mvt-heart { font-size: 15px; margin-top: 7px; opacity: .45; transition: all .2s; }
.mv-task-card.done .mvt-heart { opacity: 1; transform: scale(1.25); }
.mv-rewards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mv-chip {
    background: #fff; border-radius: 999px; padding: 8px 16px;
    font-size: 13.5px; font-weight: 800; color: #6D4C41;
    box-shadow: 0 2px 6px rgba(150,105,50,.15);
}
.mv-chip.levelup { color: #E65100; animation: pgPulse 1s ease infinite; }
.mv-back {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #FFD54F, #FFA726); color: #fff;
    font-size: 19px; font-weight: 900; border-radius: 999px; padding: 16px 66px; min-height: 60px;
    box-shadow: 0 5px 0 #E58E2E, 0 10px 20px rgba(229,142,46,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.2); touch-action: manipulation; transition: transform .12s;
}
.mv-back:active { transform: translateY(3px); box-shadow: 0 2px 0 #E58E2E, 0 5px 10px rgba(229,142,46,.3); }
.mv-exit {
    border: 2px solid #FFE0A8; cursor: pointer; font-family: inherit;
    background: #fff; color: #8D6E63; font-size: 14px; font-weight: 800;
    border-radius: 999px; padding: 10px 30px; min-height: 46px; touch-action: manipulation;
}
@media (max-width: 380px) {
    .mv-trophy { font-size: 88px; }
    .mv-bubble { font-size: 28px; padding: 10px 28px; }
    .mv-task-card { min-width: 104px; }
}

/* dark theme adjustments for candy UI */
[data-theme="dark"] .mono-wrap {
    background: linear-gradient(165deg, #2a2418 0%, #231d12 100%);
}
[data-theme="dark"] .mono-nav { background: linear-gradient(180deg, #3a3020 0%, #322a1a 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .mono-nav-btn .nav-txt { color: #d8c8a8; }
[data-theme="dark"] .mono-sheet-card { background: linear-gradient(175deg, #322a1a 0%, #2a2214 100%); }
[data-theme="dark"] .sheet-title { color: #e8d8b8; }
[data-theme="dark"] .mono-task-row, [data-theme="dark"] .reward-card, [data-theme="dark"] .me-card, [data-theme="dark"] .mv-chip { background: #3a3020; color: #e8d8b8; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-theme="dark"] .task-label, [data-theme="dark"] .rc-num, [data-theme="dark"] .me-row b, [data-theme="dark"] .mvt-label { color: #f0e4c8; }
[data-theme="dark"] .me-row span, [data-theme="dark"] .rc-label, [data-theme="dark"] .mvt-sub, [data-theme="dark"] .mv-sub { color: #b8a888; }
[data-theme="dark"] .mv-task-card { background: linear-gradient(175deg, #3a3020, #322a1a); border-color: #6b5a34; }
[data-theme="dark"] .mv-back { background: linear-gradient(135deg, #FFA726, #FF7043); }
[data-theme="dark"] .mv-exit { background: #3a3020; color: #d8c8a8; border-color: #6b5a34; }

/* ============================================================
   Phase 17: 大富翁补全（落地动物动画/国家词库入口/主题联动）
   + 亲子奖励页独立模块（parentReward.js）
   ============================================================ */

/* ---- 落地动物：跳起→变大→转圈→回落 ---- */
.cell-animal {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; line-height: 1;
    z-index: 3; pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.cell-animal.land-anim { animation: cellLand 1.2s cubic-bezier(.34,1.3,.5,1) forwards; }
@keyframes cellLand {
    0%   { transform: translate(-50%, -30%) scale(.4) rotate(0deg); opacity: 0; }
    30%  { transform: translate(-50%, -85%) scale(1.5) rotate(180deg); opacity: 1; }
    55%  { transform: translate(-50%, -55%) scale(1.15) rotate(360deg); }
    75%  { transform: translate(-50%, -45%) scale(1.05) rotate(360deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 1; }
}

/* ---- 国家词库入口：可点击 + 选中态 ---- */
.mono-flags .flag-pill { cursor: pointer; transition: transform .12s, box-shadow .15s; touch-action: manipulation; }
.mono-flags .flag-pill:active { transform: scale(.93); }
.mono-flags .flag-pill.active {
    background: linear-gradient(180deg, #FFE082, #FFB300);
    color: #5D4037; transform: scale(1.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(255,179,0,.45);
}

/* ---- 主题联动：切换场景换背景色调 + 中央萌宠 emoji ---- */
.theme-ocean .mono-board { background: linear-gradient(135deg, #E8F6FF 0%, #C8E8FB 100%); }
.mono-wrap.theme-ocean {
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #EAF6FE 0%, #D8EEFB 45%, #C4E4F7 100%);
}
.theme-space .mono-board { background: linear-gradient(135deg, #F0EBFF 0%, #DDD2F8 100%); }
.mono-wrap.theme-space {
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #F1ECFE 0%, #E4DBFB 45%, #D6C9F7 100%);
}
.center-emoji-mascot { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
    animation: pgFloat 2.4s ease-in-out infinite; }
@media (min-width: 768px) { .center-emoji-mascot { font-size: 46px; } }
[data-theme="dark"] .theme-ocean .mono-board { background: linear-gradient(135deg, #1a2a38 0%, #14202c 100%); }
[data-theme="dark"] .theme-space .mono-board { background: linear-gradient(135deg, #241a38 0%, #1c142c 100%); }

/* ---- 游乐场头部：亲子奖励入口 ---- */
.pg-parent-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 2px solid #FFB300; background: linear-gradient(135deg, #FFD54F, #FFA726);
    color: #fff; font-size: 12px; font-weight: 800; font-family: inherit;
    border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap;
    box-shadow: 0 3px 0 #E58E2E, 0 4px 10px rgba(229,142,46,.3);
    text-shadow: 0 1px 1px rgba(0,0,0,.2); touch-action: manipulation;
    animation: pgFloat 3s ease-in-out infinite;
}
.pg-parent-btn:active { transform: scale(.94); }

/* ---- 亲子奖励页（独立模块，复用糖果胜利视觉） ---- */
.pr-overlay {
    position: fixed; inset: 0; z-index: 11500; display: flex; align-items: flex-start;
    justify-content: center; overflow-y: auto;
    background: rgba(70,45,15,.5);
}
.pr-page {
    position: relative; width: 100%; max-width: 520px; min-height: 100%;
    display: flex; flex-direction: column; align-items: center;
    padding: 30px 18px calc(40px + env(safe-area-inset-bottom)); gap: 12px;
    background:
        radial-gradient(circle at 18% 6%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 36%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
    box-sizing: border-box;
}
.pr-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.8); color: #8D6E63; font-size: 16px; font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,.15); touch-action: manipulation; font-family: inherit;
}
.pr-section-title { font-size: 16px; font-weight: 900; color: #6D4C41; margin-top: 8px; }
.pr-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 480px; }
.pr-shop-item {
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 3px solid #FFE0A8; border-radius: 20px; padding: 14px 8px; text-align: center;
    box-shadow: 0 4px 12px rgba(150,105,50,.14);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.prs-ico { font-size: 32px; line-height: 1; }
.prs-name { font-size: 13px; font-weight: 800; color: #6D4C41; }
.prs-cost { font-size: 11px; font-weight: 800; color: #B9770E; }
.prs-btn {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #66BB6A, #43A047); color: #fff;
    font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 8px 18px; min-height: 38px;
    box-shadow: 0 3px 0 #2E7D32; touch-action: manipulation;
}
.prs-btn:disabled { background: #CFD8DC; box-shadow: 0 3px 0 #90A4AE; cursor: default; opacity: .7; }
[data-theme="dark"] .pr-page { background: linear-gradient(165deg, #2a2418 0%, #231d12 100%); }
[data-theme="dark"] .pr-section-title { color: #e8d8b8; }
[data-theme="dark"] .pr-shop-item { background: linear-gradient(175deg, #3a3020, #322a1a); border-color: #6b5a34; }
[data-theme="dark"] .prs-name { color: #f0e4c8; }
[data-theme="dark"] .pr-close { background: rgba(58,48,32,.9); color: #d8c8a8; }

/* ============================================================
   Phase 18: 轻松练（Relax Hub）— 4 个低压力小游戏
   ============================================================ */
.rx-wrap {
    min-height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); gap: 14px;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
    box-sizing: border-box;
}
[data-theme="dark"] .rx-wrap { background: linear-gradient(165deg, #2a2418 0%, #231d12 100%); }
.rx-hero { text-align: center; }
.rx-hero-title { font-size: 30px; font-weight: 900; color: #6D4C41; }
.rx-hero-sub { font-size: 13px; font-weight: 700; color: #A1887F; margin-top: 4px; }
.rx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 440px; }
.rx-card {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 3px solid #FFE0A8; border-radius: 22px; padding: 18px 8px 14px; cursor: pointer;
    box-shadow: 0 5px 14px rgba(150,105,50,.15); transition: transform .15s;
    font-family: inherit; touch-action: manipulation;
}
.rx-card:active { transform: scale(.95); }
/* Phase 57: 悬停上浮 + 图标交错浮动 */
.rx-card:hover { transform: translateY(-5px); box-shadow: 0 10px 22px rgba(150,105,50,.22); }
.rx-card .rx-card-ico { animation: floatBob 2.8s ease-in-out infinite; }
.rx-card:nth-child(2n) .rx-card-ico { animation-delay: .4s; }
.rx-card:nth-child(3n) .rx-card-ico { animation-delay: .8s; }
.rx-card-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.12)); }
.rx-card-name { font-size: 15.5px; font-weight: 900; color: #6D4C41; margin-top: 4px; }
.rx-card-sub { font-size: 10.5px; font-weight: 700; color: #A1887F; }
.rx-card-time { font-size: 9.5px; font-weight: 700; color: #66BB6A; margin-top: 2px; }
.rx-foot { font-size: 12px; font-weight: 700; color: #A1887F; }

/* in-game common */
.rx-game-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 440px; }
.rx-back {
    border: 2px solid #FFE0A8; background: #fff; color: #8D6E63; font-size: 13px; font-weight: 800;
    border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; font-family: inherit;
    touch-action: manipulation;
}
.rx-game-name { font-size: 16px; font-weight: 900; color: #6D4C41; }
.rx-combo { font-size: 12.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #FF8A80, #E55656);
    border-radius: 999px; padding: 6px 12px; box-shadow: 0 2px 6px rgba(229,86,86,.35); }
.rx-status { font-size: 14.5px; font-weight: 800; color: #6D4C41; text-align: center; }
.rx-progress { width: 100%; max-width: 440px; height: 8px; background: #F1E3C8; border-radius: 999px; overflow: hidden; }
.rx-progress-fill { height: 100%; background: linear-gradient(90deg, #FFB347, #FF6B6B); border-radius: 999px; transition: width .3s; }

/* 1) match grid */
.rx-match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 440px; }
.rx-tile {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF3DC 100%);
    border-radius: 14px; padding: 13px 4px; font-size: 13.5px; font-weight: 800; color: #6D4C41;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(196,150,90,.2), 0 3px 8px rgba(150,105,50,.14);
    min-height: 58px; transition: transform .12s, opacity .3s; touch-action: manipulation;
    word-break: break-word;
}
.rx-tile.cn { color: #2E7CC4; }
.rx-tile.picked { background: linear-gradient(180deg, #FFE082, #FFB300); color: #5D4037; transform: scale(1.06); }
.rx-tile.gone { opacity: 0; transform: scale(.5); pointer-events: none; }
.rx-tile.shake { animation: pgShake .4s ease; }
@media (max-width: 360px) { .rx-match-grid { grid-template-columns: repeat(3, 1fr); } .rx-tile { font-size: 12px; min-height: 52px; } }

/* 2) listen + 4) pic */
.rx-speaker {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #81D4FA, #4FC3F7); color: #fff;
    font-size: 15px; font-weight: 900; border-radius: 999px; padding: 12px 30px; min-height: 50px;
    box-shadow: 0 3px 0 #29A3DD, 0 5px 10px rgba(79,195,247,.4); touch-action: manipulation;
}
.rx-speaker:active { transform: scale(.95); }
.rx-pic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 400px; }
.rx-pic-opt {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF3DC 100%);
    border-radius: 20px; padding: 20px 6px; touch-action: manipulation;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 4px 10px rgba(150,105,50,.15);
    transition: transform .15s;
}
.rx-pic-opt:active { transform: scale(.94); }
.rx-pic-emoji { font-size: 54px; line-height: 1; }
.rx-pic-opt.right { background: linear-gradient(180deg, #C8E6C9, #A5D6A7); outline: 3px solid #43A047; }
.rx-pic-opt.wrong { background: linear-gradient(180deg, #FFCDD2, #EF9A9A); animation: pgShake .4s ease; }

/* 3) spell runner · 卡通蓝天版（sp-*，皮肤挂在 #relaxView 上） */
#gameBody #relaxView.sp-live, #relaxView.sp-live {
    display: flex !important; flex-direction: column; min-height: 100%; box-sizing: border-box;
    background: linear-gradient(180deg, #7EC8F5 0%, #A8DDF8 46%, #C9EDC5 72%, #8FE06A 100%);
}
.sp-sky {
    flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
    position: relative; box-sizing: border-box;
}
.sp-sun { position: absolute; top: 18px; right: 20px; font-size: 40px; line-height: 1;
    filter: drop-shadow(0 0 14px rgba(255,220,80,.85)); animation: pgFloat 3.2s ease-in-out infinite; }
.sp-cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .9;
    box-shadow: 0 4px 10px rgba(120,170,220,.25); }
.sp-cloud::before, .sp-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.sp-c1 { width: 92px; height: 28px; top: 44px; left: 7%; animation: spDrift 36s linear infinite; }
.sp-c1::before { width: 38px; height: 38px; top: -18px; left: 16px; }
.sp-c1::after { width: 28px; height: 28px; top: -12px; left: 52px; }
.sp-c2 { width: 74px; height: 22px; top: 96px; right: 9%; opacity: .8; animation: spDrift 46s linear infinite reverse; }
.sp-c2::before { width: 30px; height: 30px; top: -14px; left: 12px; }
.sp-c2::after { width: 22px; height: 22px; top: -9px; left: 40px; }
.sp-c3 { width: 58px; height: 18px; top: 150px; left: 16%; opacity: .7; animation: spDrift 40s linear infinite; }
.sp-c3::before { width: 24px; height: 24px; top: -11px; left: 10px; }
.sp-c3::after { width: 17px; height: 17px; top: -7px; left: 32px; }
@keyframes spDrift { from { transform: translateX(0); } to { transform: translateX(70px); } }
.sp-progress { font-size: 17px; font-weight: 900; color: #2E5E2E; background: rgba(255,255,255,.85);
    border-radius: 999px; padding: 6px 18px; box-shadow: 0 2px 8px rgba(60,110,60,.18); z-index: 1; }
.sp-progress-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; z-index: 1; }
.sp-goal { font-size: 13px; font-weight: 900; color: #7A4A10; background: rgba(255,255,255,.85);
    border-radius: 999px; padding: 7px 14px; box-shadow: 0 2px 8px rgba(60,110,60,.15); z-index: 1; }
.sp-track {
    position: relative; width: 100%; height: 80px;
    background: linear-gradient(180deg, #E8C79A 0%, #D2B48C 100%);
    border: 4px solid #fff; border-radius: 40px; overflow: hidden;
    box-shadow: 0 4px 12px rgba(90,120,70,.25); z-index: 1;
}
.sp-dash { position: absolute; width: 100%; top: 50%; height: 4px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 16px, transparent 16px 32px); }
.sp-runner { position: absolute; bottom: 16px; font-size: 34px; line-height: 1;
    transition: left .6s ease; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); z-index: 2; }
.sp-runner.hop { animation: spRun .45s ease; }
.sp-runner.trip { animation: pgShake .5s ease; filter: grayscale(.55); }
@keyframes spRun { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.sp-flag { position: absolute; right: 14px; bottom: 16px; font-size: 30px; line-height: 1; z-index: 2; }
.sp-question { text-align: center; z-index: 1; }
.sp-cn { font-size: 22px; font-weight: 900; color: #2E5E2E; margin-bottom: 8px; }
.sp-word { font-size: 40px; font-weight: 900; letter-spacing: 8px; color: #4E342E; }
.sp-blank { display: inline-block; width: 46px; border-bottom: 4px solid #4E342E; }
.sp-letters { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; z-index: 1; }
.sp-letter {
    width: 68px; height: 68px; min-width: 68px; border: none; cursor: pointer; font-family: inherit;
    background: #FFF9E6; color: #6D4C41; font-size: 27px; font-weight: 900; border-radius: 16px;
    box-shadow: 0 4px 0 #DCD2B8, 0 6px 12px rgba(120,90,40,.18);
    transition: transform .15s, box-shadow .15s, background .2s; touch-action: manipulation;
}
.sp-letter:active { transform: translateY(3px); box-shadow: 0 1px 0 #DCD2B8; }
.sp-letter.correct { background: #BCF2BC; box-shadow: 0 4px 0 #8CD88C; animation: spBounce .5s ease; }
.sp-letter.wrong { background: #FFCDD2; animation: pgShake .4s ease; }
.sp-letter:disabled { cursor: default; }
.sp-letter.used { opacity: .45; pointer-events: none; box-shadow: 0 2px 0 #DCD2B8; }
.sp-levels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; z-index: 1; }
.sp-lv-btn {
    border: 2px solid rgba(255,255,255,.9); background: rgba(255,255,255,.75); color: #2E5E2E;
    font-size: 13.5px; font-weight: 900; border-radius: 999px; padding: 7px 16px; min-height: 34px;
    cursor: pointer; font-family: inherit; transition: transform .15s, background .2s, box-shadow .2s;
    touch-action: manipulation; box-shadow: 0 2px 6px rgba(60,110,60,.15);
}
.sp-lv-btn:active { transform: scale(.94); }
.sp-lv-btn.active { background: linear-gradient(135deg, #FFB300, #FF8F00); color: #fff; border-color: #FF8F00;
    box-shadow: 0 3px 8px rgba(255,143,0,.4); }
.sp-read-row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sp-read-btn {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #529BFF, #387CD8); color: #fff;
    font-size: 14.5px; font-weight: 900; border-radius: 12px; padding: 9px 16px; min-height: 40px;
    box-shadow: 0 3px 0 #2A66B8, 0 4px 10px rgba(56,124,216,.35);
    transition: transform .12s, box-shadow .12s; touch-action: manipulation;
}
.sp-read-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2A66B8; }
/* 词性 + 例句卡（复习模式）：例句先遮词，答对揭晓 */
.sp-example { background: rgba(255,255,255,.78); border-radius: 14px; padding: 10px 16px;
    max-width: 480px; width: 100%; box-sizing: border-box; font-size: 14.5px; font-weight: 700;
    color: #4E342E; z-index: 1; text-align: center; box-shadow: 0 2px 8px rgba(90,120,70,.15); }
.sp-pos { display: inline-block; background: linear-gradient(135deg, #FFB300, #FF8F00); color: #fff;
    border-radius: 8px; padding: 1px 8px; margin-right: 6px; font-size: 12px; font-weight: 900; vertical-align: 1px; }
.sp-ex-cn { display: block; color: #6B7A55; font-size: 12.5px; margin-top: 3px; }
.sp-hl { color: #E65100; font-weight: 900; }
@keyframes spBounce { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
.sp-pop {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(.6);
    padding: 14px 28px; background: #fff; border-radius: 16px; font-size: 21px; font-weight: 900;
    color: #2E7D32; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s; z-index: 5; white-space: nowrap;
}
.sp-pop.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* 拼写结算屏叠在蓝天上（rx-result 自带米色底，这里透明化） */
#relaxView.sp-live .rx-result { flex: 1; background: transparent; }

/* ============================================================
   M3 批4-6: 限时抢答 / 阅读闯关 / 专业词汇挑战
   ============================================================ */
/* ---- 批4 限时抢答 qr-*（初中 · 科技蓝霓虹） ---- */
.pg-card-quizrush { background: linear-gradient(135deg, #536DFE, #304FFE); }
.qr-wrap { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 20px 16px calc(26px + env(safe-area-inset-bottom));
    background: radial-gradient(circle at 20% 0%, rgba(83,109,254,.35) 0%, rgba(83,109,254,0) 42%),
                linear-gradient(180deg, #0B2E49 0%, #173F63 100%); }
.qr-top { width: 100%; max-width: 460px; display: flex; align-items: center; gap: 10px; }
.qr-prog { font-size: 14px; font-weight: 900; color: #9FB8E8; }
.qr-score { margin-left: auto; font-size: 16px; font-weight: 900; color: #fff;
    background: rgba(83,109,254,.35); border: 1px solid rgba(129,154,255,.5); border-radius: 999px; padding: 5px 14px; }
.qr-streak { font-size: 13.5px; font-weight: 900; color: #FFB300;
    background: rgba(255,179,0,.14); border: 1px solid rgba(255,179,0,.45); border-radius: 999px; padding: 5px 10px; }
.qr-timer { width: 100%; max-width: 460px; height: 10px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.qr-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #4FC3F7, #536DFE); border-radius: 999px; transition: width .1s linear; }
.qr-timer-fill.low { background: linear-gradient(90deg, #FF8A80, #E55656); }
.qr-stem { font-size: 32px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 2px;
    text-shadow: 0 0 18px rgba(83,109,254,.8); margin-top: 6px; }
.qr-hint { font-size: 13px; font-weight: 700; color: #9FB8E8; }
.qr-opts { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.qr-opt { border: 2px solid rgba(129,154,255,.5); background: rgba(255,255,255,.06); color: #E8F0FF;
    font-size: 18px; font-weight: 800; border-radius: 14px; padding: 15px 18px; min-height: 56px; cursor: pointer;
    font-family: inherit; transition: transform .12s, background .2s, border-color .2s; touch-action: manipulation; }
.qr-opt:active { transform: scale(.97); }
.qr-opt.right { background: rgba(76,175,80,.28); border-color: #4CAF50; color: #C8F7CD; }
.qr-opt.wrong { background: rgba(229,86,86,.25); border-color: #E55656; color: #FFCDD2; }
.qr-result, .qr-chip { font-family: inherit; }
.qr-result { min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; box-sizing: border-box;
    background: radial-gradient(circle at 50% 12%, rgba(83,109,254,.4) 0%, rgba(83,109,254,0) 45%),
                linear-gradient(180deg, #0B2E49, #173F63); }
.qr-result-ico { font-size: 64px; line-height: 1; }
.qr-result h2 { color: #fff; font-size: 24px; }
.qr-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(129,154,255,.4); color: #E8F0FF;
    border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 800; }
.qr-chip.score b { color: #4FC3F7; font-size: 18px; }
.qr-chip.star { border-color: rgba(255,179,0,.5); color: #FFE0A8; }
.qr-loading { font-size: 13px; color: #9FB8E8; font-weight: 700; }
.qr-btn { border: none; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #536DFE, #304FFE);
    color: #fff; font-size: 16px; font-weight: 900; border-radius: 999px; padding: 12px 34px; min-height: 48px;
    box-shadow: 0 4px 16px rgba(83,109,254,.5); touch-action: manipulation; }
.qr-btn:active { transform: scale(.96); }
.qr-exit { border: none; background: none; color: #9FB8E8; font-size: 14px; font-weight: 800; cursor: pointer;
    font-family: inherit; padding: 8px; touch-action: manipulation; }

/* ---- 批5 阅读闯关 rq-*（高中 · 纸感清爽） ---- */
.pg-card-reading { background: linear-gradient(135deg, #26A69A, #00796B); }
.rq-wrap { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 20px 16px calc(26px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #F2F7F3 0%, #E4EFE6 100%); }
.rq-title { font-size: 26px; font-weight: 900; color: #1B4D3E; }
.rq-sub { font-size: 13px; font-weight: 700; color: #5C7A6B; text-align: center; }
.rq-lv-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rq-lv { font-size: 13.5px; font-weight: 900; color: #1B4D3E; background: #fff; border: 2px solid #B8D8C4;
    border-radius: 999px; padding: 7px 16px; }
.rq-lv.on { background: linear-gradient(135deg, #26A69A, #00796B); color: #fff; border-color: #00796B; }
.rq-lv.lock { opacity: .45; }
.rq-top { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rq-lv-tag { font-size: 13px; font-weight: 900; color: #1B4D3E; background: #DCEDE2; border-radius: 999px; padding: 6px 14px; }
.rq-score { font-size: 15px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #26A69A, #00796B);
    border-radius: 999px; padding: 6px 14px; }
.rq-paper { width: 100%; max-width: 560px; background: #fff; border: 2px solid #D6E5DB; border-radius: 18px;
    padding: 18px 20px; box-shadow: 0 4px 14px rgba(27,77,62,.08); }
.rq-paper p { font-size: 15px; line-height: 1.75; color: #2E4A3D; margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; }
.rq-paper p:last-child { margin-bottom: 0; }
.rq-q { font-size: 19px; font-weight: 900; color: #1B4D3E; text-align: center; width: 100%; max-width: 560px; }
.rq-opts { display: flex; flex-direction: column; gap: 11px; width: 100%; max-width: 540px; }
.rq-opt { border: 2px solid #C6DED0; background: #fff; color: #2E4A3D; font-size: 15.5px; font-weight: 800;
    border-radius: 13px; padding: 13px 16px; min-height: 50px; cursor: pointer; font-family: inherit;
    text-align: left; transition: transform .12s, background .2s, border-color .2s; touch-action: manipulation; }
.rq-opt:active { transform: scale(.98); }
.rq-opt.right { background: #E0F2E4; border-color: #43A047; color: #1B5E20; }
.rq-opt.wrong { background: #FDE3E3; border-color: #E55656; color: #B71C1C; }
.rq-chip { background: #fff; border: 2px solid #C6DED0; color: #2E4A3D; border-radius: 999px;
    padding: 8px 18px; font-size: 14px; font-weight: 800; }
.rq-chip.score b { color: #00796B; font-size: 18px; }
.rq-result { min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 24px; box-sizing: border-box;
    background: linear-gradient(180deg, #F2F7F3, #DCEDE2); }
.rq-result-ico { font-size: 62px; line-height: 1; }
.rq-result h2 { color: #1B4D3E; font-size: 24px; }
.rq-loading { font-size: 13px; color: #5C7A6B; font-weight: 700; }
.rq-btn { border: none; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #26A69A, #00796B);
    color: #fff; font-size: 15.5px; font-weight: 900; border-radius: 999px; padding: 12px 32px; min-height: 48px;
    box-shadow: 0 4px 14px rgba(0,121,107,.4); touch-action: manipulation; }
.rq-btn:active { transform: scale(.96); }
.rq-btn.rq-ghost { background: #fff; color: #00796B; border: 2px solid #B8D8C4; box-shadow: none; min-height: 42px; padding: 9px 22px; font-size: 14px; }
.rq-exit { border: none; background: none; color: #5C7A6B; font-size: 14px; font-weight: 800; cursor: pointer;
    font-family: inherit; padding: 8px; touch-action: manipulation; }

/* ---- 批6 专业词汇挑战 vm-*（大学 · 深色 Pro） ---- */
.pg-card-vocab { background: linear-gradient(135deg, #37474F, #102027); }
.vm-wrap { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;
    gap: 16px; padding: 20px 16px calc(26px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #10192B 0%, #1A2740 100%); }
.vm-title { font-size: 26px; font-weight: 900; color: #fff; }
.vm-sub { font-size: 13px; font-weight: 700; color: #8FA3C8; text-align: center; }
.vm-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; }
.vm-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #1B2740;
    border: 2px solid #2E4266; border-radius: 18px; padding: 20px 10px; cursor: pointer; font-family: inherit;
    transition: transform .15s, border-color .2s; touch-action: manipulation; }
.vm-cat:active { transform: scale(.96); }
.vm-cat:hover { border-color: #4FC3F7; }
.vm-cat-ico { font-size: 30px; line-height: 1; }
.vm-cat-name { font-size: 15px; font-weight: 900; color: #E8F0FF; }
.vm-cat-n { font-size: 11px; font-weight: 700; color: #8FA3C8; }
.vm-top { width: 100%; max-width: 460px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vm-cat-tag { font-size: 12.5px; font-weight: 900; color: #8FA3C8; background: #1B2740; border: 1px solid #2E4266;
    border-radius: 999px; padding: 5px 12px; }
.vm-prog { font-size: 14px; font-weight: 900; color: #8FA3C8; margin-left: auto; }
.vm-score { font-size: 15px; font-weight: 900; color: #fff; background: rgba(79,195,247,.18);
    border: 1px solid rgba(79,195,247,.5); border-radius: 999px; padding: 5px 14px; }
.vm-streak { font-size: 13px; font-weight: 900; color: #FFB300; }
.vm-term { font-size: 34px; font-weight: 900; color: #fff; text-align: center; letter-spacing: 1px;
    text-shadow: 0 0 22px rgba(79,195,247,.55); margin-top: 4px; }
.vm-hint { font-size: 13px; font-weight: 700; color: #8FA3C8; }
.vm-opts { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; }
.vm-opt { border: 2px solid #2E4266; background: #1B2740; color: #E8F0FF; font-size: 17px; font-weight: 800;
    border-radius: 14px; padding: 14px 18px; min-height: 54px; cursor: pointer; font-family: inherit;
    transition: transform .12s, background .2s, border-color .2s; touch-action: manipulation; }
.vm-opt:active { transform: scale(.97); }
.vm-opt.right { background: rgba(76,175,80,.22); border-color: #4CAF50; color: #C8F7CD; }
.vm-opt.wrong { background: rgba(229,86,86,.2); border-color: #E55656; color: #FFCDD2; }
.vm-result { min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 24px; box-sizing: border-box;
    background: radial-gradient(circle at 50% 10%, rgba(79,195,247,.25) 0%, rgba(79,195,247,0) 45%),
                linear-gradient(180deg, #10192B, #1A2740); }
.vm-result-ico { font-size: 62px; line-height: 1; }
.vm-result h2 { color: #fff; font-size: 24px; }
.vm-chip { background: #1B2740; border: 1px solid #2E4266; color: #E8F0FF; border-radius: 999px;
    padding: 8px 18px; font-size: 14px; font-weight: 800; }
.vm-chip.score b { color: #4FC3F7; font-size: 18px; }
.vm-chip.star { border-color: rgba(255,179,0,.5); color: #FFE0A8; }
.vm-loading { font-size: 13px; color: #8FA3C8; font-weight: 700; }
.vm-btn { border: none; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, #4FC3F7, #2979FF);
    color: #fff; font-size: 16px; font-weight: 900; border-radius: 999px; padding: 12px 34px; min-height: 48px;
    box-shadow: 0 4px 16px rgba(41,121,255,.45); touch-action: manipulation; }
.vm-btn:active { transform: scale(.96); }
.vm-exit { border: none; background: none; color: #8FA3C8; font-size: 14px; font-weight: 800; cursor: pointer;
    font-family: inherit; padding: 8px; touch-action: manipulation; }
@media (max-width: 400px) {
    .qr-stem { font-size: 26px; }
    .qr-opt, .vm-opt { font-size: 15.5px; min-height: 48px; }
    .rq-paper { padding: 14px 15px; }
    .rq-paper p { font-size: 14px; }
    .vm-term { font-size: 28px; }
    .vm-cats { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
    .sp-word { font-size: 32px; letter-spacing: 6px; }
    .sp-blank { width: 38px; }
    .sp-letter { width: 58px; height: 58px; min-width: 58px; font-size: 23px; }
    .sp-cn { font-size: 19px; }
    .sp-example { font-size: 13px; padding: 8px 12px; }
    .sp-ex-cn { font-size: 11.5px; }
    .sp-goal { font-size: 12px; padding: 6px 10px; }
    .sp-progress { font-size: 15px; padding: 6px 14px; }
}

/* 4) pic word grid */
.rx-bigpic {
    font-size: 96px; line-height: 1.2; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
    animation: pgFloat 2.6s ease-in-out infinite;
}
.rx-word-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 400px; }
.rx-word-opt {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF3DC 100%); color: #6D4C41;
    font-size: 18px; font-weight: 900; border-radius: 16px; padding: 14px 8px; min-height: 56px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(196,150,90,.2), 0 3px 8px rgba(150,105,50,.14);
    transition: transform .12s; touch-action: manipulation;
}
.rx-word-opt:active { transform: scale(.96); }
.rx-word-opt.right { background: linear-gradient(180deg, #C8E6C9, #A5D6A7); outline: 3px solid #43A047; }
.rx-word-opt.wrong { background: linear-gradient(180deg, #FFCDD2, #EF9A9A); animation: pgShake .4s ease; }

/* result */
.rx-result {
    min-height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 24px;
    background:
        radial-gradient(circle at 18% 6%, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 36%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
    box-sizing: border-box;
}
[data-theme="dark"] .rx-result { background: linear-gradient(165deg, #2a2418 0%, #231d12 100%); }
.rx-result-ico { font-size: 64px; animation: pgBounce 1s ease infinite; }
.rx-result h2 { font-size: 24px; font-weight: 900; color: #6D4C41; margin: 0; }
.rx-chip {
    background: #fff; border-radius: 999px; padding: 9px 18px;
    font-size: 14px; font-weight: 800; color: #6D4C41; box-shadow: 0 2px 6px rgba(150,105,50,.15);
}
.rx-chip.score b { color: #E65100; font-size: 17px; }
.rx-chip.star { background: linear-gradient(135deg, #FFF8E1, #FFECB3); color: #B9770E; }
.rx-loading { font-size: 13px; font-weight: 700; color: #A1887F; }
.rx-btn {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #FFD54F, #FFA726); color: #fff;
    font-size: 17px; font-weight: 900; border-radius: 999px; padding: 14px 48px; min-height: 56px;
    box-shadow: 0 4px 0 #E58E2E, 0 8px 18px rgba(229,142,46,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.2); touch-action: manipulation;
}
.rx-btn:active { transform: translateY(2px); }

/* 7-tab bottom nav: keep labels readable on narrow phones */
@media (max-width: 380px) {
    .nav-label { font-size: 9.5px; }
    .nav-icon { width: 20px; height: 20px; font-size: 11px; }
}
/* 8-tab bottom nav (Phase 21 英语角加入) */
@media (max-width: 430px) {
    .nav-label { font-size: 9px; letter-spacing: -0.2px; }
    .nav-icon { width: 19px; height: 19px; font-size: 10.5px; }
    .nav-btn { padding: 6px 1px; }
}

/* ============================================================
   Phase 21: 英语角（English Corner）
   ============================================================ */
.co-wrap {
    min-height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); gap: 14px;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #EDE7F6 0%, #E3DDF3 45%, #D8CFF0 100%);
    box-sizing: border-box;
}
[data-theme="dark"] .co-wrap { background: linear-gradient(165deg, #221d2e 0%, #1a1624 100%); }
.co-loading, .co-owner { color: #6A4FA3; font-weight: 800; font-size: 13px; }
.co-hero { text-align: center; }
.co-hero-title { font-size: 30px; font-weight: 900; color: #4A2E8E; }
.co-lv-pill {
    display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, #9C6BFF, #5E35B1); border-radius: 999px; padding: 7px 16px;
    box-shadow: 0 3px 8px rgba(94,53,177,.35);
}
.co-lvbar { width: 200px; max-width: 60vw; height: 8px; background: #CFC5EE; border-radius: 999px; overflow: hidden; margin: 8px auto 0; }
.co-lvfill { height: 100%; background: linear-gradient(90deg, #B388FF, #7C4DFF); border-radius: 999px; transition: width .4s; }
.co-card {
    width: 100%; max-width: 460px; background: linear-gradient(175deg, #FFFFFF 0%, #F4EEFC 100%);
    border: 3px solid #D3C4F5; border-radius: 20px; padding: 14px;
    box-shadow: 0 5px 14px rgba(94,53,177,.14); box-sizing: border-box;
    display: flex; flex-direction: column; gap: 10px;
}
[data-theme="dark"] .co-card { background: linear-gradient(175deg, #322a44 0%, #2a2338 100%); border-color: #584a78; }
.co-card-title { font-size: 15px; font-weight: 900; color: #4A2E8E; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-theme="dark"] .co-card-title { color: #D1C4E9; }
.co-badge { font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #B39DDB, #7E57C2); border-radius: 999px; padding: 4px 10px; }
.co-badge.done { background: linear-gradient(135deg, #81C784, #43A047); }
.co-sentence { font-size: 21px; font-weight: 900; color: #311B92; letter-spacing: .3px; }
[data-theme="dark"] .co-sentence { color: #E8DAFF; }
.co-sentence-zh { font-size: 13px; font-weight: 700; color: #7E57C2; }
.co-btn-row { display: flex; gap: 10px; }
.co-btn {
    border: none; cursor: pointer; font-family: inherit; touch-action: manipulation;
    font-size: 14px; font-weight: 900; border-radius: 999px; padding: 12px 20px; min-height: 48px; color: #fff;
}
.co-btn.speak { background: linear-gradient(135deg, #7986CB, #3F51B5); box-shadow: 0 3px 0 #283593; flex: 1; }
.co-btn.read { background: linear-gradient(135deg, #FFB74D, #F57C00); box-shadow: 0 3px 0 #E65100; flex: 1; }
.co-btn.sm { min-height: 42px; padding: 8px 12px; flex: none; }
.co-btn:disabled { opacity: .6; }
.co-score { min-height: 22px; font-size: 13.5px; font-weight: 800; color: #5E35B1; }
.co-score-badge { display: inline-block; border-radius: 999px; color: #fff; padding: 4px 12px; font-size: 13px; }
.co-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.co-scene {
    display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
    border: 2px solid #D3C4F5; background: #fff; border-radius: 16px; padding: 12px 4px;
    font-family: inherit; touch-action: manipulation; transition: transform .12s;
}
[data-theme="dark"] .co-scene { background: #322a44; border-color: #584a78; }
.co-scene:active { transform: scale(.94); }
.co-scene.done { border-color: #81C784; background: #F1F8E9; }
.co-scene-ico { font-size: 28px; line-height: 1; }
.co-scene-name { font-size: 12.5px; font-weight: 900; color: #4A2E8E; }
[data-theme="dark"] .co-scene-name { color: #D1C4E9; }
.co-scene-tag { font-size: 9px; font-weight: 700; color: #9575CD; }
.co-npc-row { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.co-npc-face {
    width: 56px; height: 56px; min-width: 56px; border-radius: 50%; font-size: 30px;
    background: linear-gradient(160deg, #D1C4E9, #B39DDB); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 8px rgba(94,53,177,.25);
}
.co-npc-bubble {
    flex: 1; background: #fff; border-radius: 4px 16px 16px 16px; padding: 12px;
    box-shadow: 0 3px 8px rgba(94,53,177,.15);
}
[data-theme="dark"] .co-npc-bubble { background: #3a3350; }
.co-npc-en { font-size: 16.5px; font-weight: 900; color: #311B92; }
[data-theme="dark"] .co-npc-en { color: #E8DAFF; }
.co-npc-zh { font-size: 12px; font-weight: 700; color: #7E57C2; margin-top: 3px; }
.co-options { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.co-opt {
    border: none; cursor: pointer; font-family: inherit; text-align: left; touch-action: manipulation;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0EAFB 100%); color: #4A2E8E;
    font-size: 14.5px; font-weight: 800; border-radius: 14px; padding: 13px 14px; min-height: 50px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 3px 8px rgba(94,53,177,.14);
    transition: transform .12s;
}
[data-theme="dark"] .co-opt { background: linear-gradient(180deg, #322a44 0%, #2a2338 100%); color: #D1C4E9; }
.co-opt:active { transform: scale(.97); }
.co-opt.right { background: linear-gradient(180deg, #C8E6C9, #A5D6A7); outline: 3px solid #43A047; color: #1B5E20; }
.co-opt.wrong { background: linear-gradient(180deg, #FFCDD2, #EF9A9A); animation: pgShake .4s ease; }
.co-hint { min-height: 20px; font-size: 12.5px; font-weight: 800; color: #E65100; text-align: center; }
.co-skin-row { display: flex; gap: 12px; align-items: flex-start; }
.co-skin-preview {
    width: 110px; min-width: 110px; height: 130px; border-radius: 16px; background: #F6F1FD;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(94,53,177,.12);
}
[data-theme="dark"] .co-skin-preview { background: #3a3350; }
.co-skin-preview svg { width: 100%; height: 100%; }
.co-skin-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.co-anim-row {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    width: 100%; margin-top: 10px; scroll-margin-bottom: 70px;
}
.co-anim-btn {
    border: 1.5px solid #D3C4F5; background: #fff; color: #5E35B1; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 800; border-radius: 999px;
    padding: 6px 13px; min-height: 30px; touch-action: manipulation;
}
.co-anim-btn.on { background: #7E57C2; color: #fff; border-color: #7E57C2; }

/* ============================================================
   Phase 25: 角色扮演 3D 化 + 大富翁发音按钮
   ============================================================ */
.rp-hero {
    display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.75); border: 2px solid #FFD54F;
    border-radius: 20px; padding: 10px 16px; width: 100%; box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.18);
}
[data-theme="dark"] .rp-hero { background: rgba(50, 42, 20, 0.8); }
.rp-mascot {
    width: 84px; height: 96px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px; overflow: visible;
}
.rp-mascot canvas, .rp-mascot svg { width: 100% !important; height: 100% !important; }
.rp-mascot-say {
    font-size: 13.5px; font-weight: 900; color: #6D4C41; line-height: 1.45;
    background: #FFF8E1; border-radius: 14px; padding: 9px 12px; flex: 1;
    border: 1.5px solid #FFE082;
}
[data-theme="dark"] .rp-mascot-say { background: #3a3320; color: #FFE0B2; border-color: #5d5230; }
.rp-pet-avatar {
    width: 64px; height: 72px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: rgba(255, 255, 255, 0.65); margin-bottom: 4px;
    overflow: visible;
}
[data-theme="dark"] .rp-pet-avatar { background: rgba(255, 255, 255, 0.12); }
.rp-pet-avatar canvas, .rp-pet-avatar svg { width: 100% !important; height: 100% !important; }
.rp-pet-card { display: flex; flex-direction: column; align-items: center; }
.pet-npc-avatar3d {
    width: 96px; height: 108px; margin: 0 auto;
    display: flex; align-items: flex-end; justify-content: center;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}
.pet-npc-avatar3d canvas, .pet-npc-avatar3d svg { width: 100% !important; height: 100% !important; }
.rp-chat-pet {
    width: 40px; height: 44px; display: inline-flex; align-items: flex-end; justify-content: center;
    flex-shrink: 0;
}
.rp-chat-pet canvas, .rp-chat-pet svg { width: 100% !important; height: 100% !important; }

/* ============================================================
   Phase 28: 可爱化素材位 + 惊喜蛋 + 炸弹果园
   ============================================================ */
/* 商店招牌小鸡 */
.shop-sign {
    display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3); border: 2px solid #FFD54F;
    border-radius: 16px; padding: 10px 14px;
}
.shop-sign img {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.shop-sign-txt b { display: block; font-size: 15px; color: #6B4E00; }
.shop-sign-txt span { font-size: 12.5px; color: #8D6E63; }

/* 游乐场吉祥物兔子 */
.pg-mascot {
    display: flex; align-items: center; gap: 10px; margin: -6px auto 10px; width: fit-content;
    cursor: pointer; position: relative;
}
.pg-mascot img {
    width: 58px; height: 58px; border-radius: 50%; object-fit: cover;
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18);
    animation: pgMascotBounce 2.6s ease-in-out infinite;
}
@keyframes pgMascotBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pg-mascot-bubble {
    background: #fff; border: 1.5px solid #FFD54F; color: #6B4E00; font-size: 12px; font-weight: 800;
    border-radius: 999px; padding: 6px 12px; box-shadow: 0 3px 8px rgba(0,0,0,.1);
}
.pg-mascot:active { transform: scale(.95); }

/* 惊喜蛋开箱 */
#eggModal {
    position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}

/* Phase 54: 农场通用弹窗（除草/捉虫挑战 + 谷仓订单） */
.farm-modal-mask {
    position: fixed; inset: 0; z-index: 10060; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    animation: farmModalIn .18s ease;
}
@keyframes farmModalIn { from { opacity: 0; } to { opacity: 1; } }
.farm-modal-box {
    background: linear-gradient(180deg, #FFFDE7, #FFF3C4); border-radius: 24px;
    padding: 24px 22px; width: 100%; max-width: 380px; max-height: 82vh; overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.3); text-align: center;
}
.farm-modal-title { font-size: 21px; font-weight: 900; color: #5D4037; margin-bottom: 12px; }
.farm-modal-close {
    margin-top: 14px; border: none; background: rgba(109, 76, 44, .12); color: #6D4C41;
    font-size: 14px; font-weight: 800; padding: 10px 22px; border-radius: 999px; cursor: pointer;
}
.farm-modal-close:active { transform: scale(.94); }
.chore-ask { font-size: 14px; font-weight: 700; color: #7A5A00; margin: 0 0 10px; }
.chore-word-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.chore-word {
    font-size: 26px; font-weight: 900; color: #E65100;
    background: rgba(255, 255, 255, .6); border-radius: 14px; padding: 8px 18px;
}
.chore-speak {
    width: 46px; height: 46px; border: none; border-radius: 50%; font-size: 22px;
    background: #FFECB3; cursor: pointer; box-shadow: 0 3px 0 rgba(109, 76, 44, .25);
}
.chore-speak:active { transform: scale(.92); }
.chore-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.chore-opt {
    border: 2px solid rgba(109, 76, 44, .2); background: #fff; color: #4E342E;
    font-size: 16px; font-weight: 800; padding: 13px 12px; border-radius: 14px; cursor: pointer;
    transition: transform .12s, background .12s;
}
.chore-opt:active { transform: scale(.97); }
.chore-opt.right { background: #C8E6C9; border-color: #43A047; color: #1B5E20; }
.chore-opt.wrong { background: #FFCDD2; border-color: #E53935; color: #B71C1C; animation: choreShake .3s; }
@keyframes choreShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.chore-hint { min-height: 20px; font-size: 13px; font-weight: 700; color: #7A5A00; margin: 12px 0 0; }
.barn-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.barn-tab {
    border: none; background: rgba(109, 76, 44, .12); color: #6D4C41;
    font-size: 14px; font-weight: 800; padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.barn-tab.on { background: #FFB300; color: #fff; box-shadow: 0 3px 0 rgba(109, 76, 44, .3); }
.barn-list { display: grid; gap: 10px; text-align: left; }
.barn-item, .barn-order {
    display: flex; align-items: center; gap: 10px; background: #fff;
    border: 2px solid rgba(109, 76, 44, .12); border-radius: 14px; padding: 10px 12px;
}
.barn-item.done, .barn-order.done { opacity: .62; }
.barn-emoji { font-size: 24px; }
.barn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barn-info b { font-size: 15px; color: #4E342E; }
.barn-info i { font-style: normal; font-size: 12px; color: #8D6E63; }
.barn-qty { font-size: 14px; font-weight: 900; color: #E65100; white-space: nowrap; }
.barn-sell, .barn-deliver {
    border: none; background: #66BB6A; color: #fff; font-size: 13px; font-weight: 800;
    padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.barn-sell:disabled, .barn-deliver:disabled { background: #BCAAA4; cursor: default; }
.barn-order-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.barn-need { font-size: 14px; font-weight: 900; color: #E53935; }
.barn-need.ok { color: #43A047; }
.barn-reward { font-size: 12px; font-weight: 800; color: #7A5A00; white-space: nowrap; }
.barn-done-tag { font-size: 13px; font-weight: 800; color: #43A047; white-space: nowrap; }
.barn-speak {
    border: none; background: #FFECB3; color: #6D4C41; width: 34px; height: 34px;
    border-radius: 50%; font-size: 15px; cursor: pointer; flex-shrink: 0;
}
.barn-speak:active { transform: scale(.9); }
.barn-empty, .barn-loading { text-align: center; color: #8D6E63; font-weight: 700; padding: 18px 0; }
.barn-btn { background: linear-gradient(180deg, #FFB74D, #FB8C00); }

/* =================== Phase 55: 英语角场景化小剧场（小餐厅打样） =================== */
.th-wrap { max-width: 560px; margin: 0 auto; padding: 12px; }
.th-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.th-title { flex: 1; text-align: center; font-weight: 900; color: #5D4037; font-size: 15px; }
.th-coins { font-weight: 900; color: #E65100; font-size: 14px; }

.th-stage { border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.14); background: #fff; }
.th-scene {
    position: relative; height: 280px; overflow: hidden;
    background: linear-gradient(180deg, #FFE0B2 0%, #FFCC80 55%, #D7CCA8 55.5%, #C9BA8F 100%);
}
/* 窗户 */
.th-window {
    position: absolute; top: 26px; left: 24px; width: 74px; height: 62px;
    background: linear-gradient(180deg, #B3E5FC, #E1F5FE);
    border: 5px solid #8D6E63; border-radius: 10px;
}
.th-window::after {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #8D6E63; transform: translateX(-50%);
}
.th-window.w2 { left: auto; right: 24px; }
/* 吊灯 */
.th-lamp {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 46px; height: 30px;
    background: radial-gradient(ellipse at bottom, #FFF59D 30%, #FBC02D 70%);
    border-radius: 0 0 24px 24px;
}
.th-lamp::before { content: ''; position: absolute; top: -12px; left: 50%; width: 2px; height: 12px; background: #8D6E63; transform: translateX(-50%); }
/* 桌子 */
.th-table {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    width: 190px; height: 16px; background: linear-gradient(180deg, #A1887F, #8D6E63);
    border-radius: 8px; box-shadow: 0 4px 0 #6D4C41;
}
.th-table::after {
    content: ''; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
    width: 22px; height: 34px; background: #795548; border-radius: 0 0 6px 6px;
}
/* 托盘（道具落点）：悬在角色头顶上方，避免被 NPC/avatar 挡住 */
.th-tray {
    position: absolute; bottom: 128px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; align-items: flex-end; justify-content: center; width: 200px; height: 60px;
    z-index: 5;
}
.th-prop {
    font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
    animation: thPropIn .8s cubic-bezier(.34,1.56,.64,1);
}
.th-prop.settled { animation: thPropFloat 2.4s ease-in-out infinite; }
@keyframes thPropIn { 0% { transform: scale(0) translateY(-30px); opacity: 0; } 60% { transform: scale(1.35) translateY(0); opacity: 1; } 100% { transform: scale(1); } }
@keyframes thPropFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* NPC */
.th-npc {
    position: absolute; left: 14px; bottom: 10px; text-align: center;
    animation: thNpcBob 3s ease-in-out infinite;
}
@keyframes thNpcBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.th-npc-name {
    display: inline-block; margin-top: 2px; padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.85); color: #6D4C41; font-size: 11px; font-weight: 800;
}
/* 玩家 avatar：从右门口走进桌边 */
.th-avatar {
    position: absolute; right: -80px; bottom: 12px;
    transition: right 1.4s ease-in-out, transform .3s;
}
.th-avatar.in { right: 26%; }
.th-avatar.leave { right: -80px; transition: right 1.6s ease-in-out; }
/* NPC 气泡 */
.th-bubble {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: min(78%, 340px); background: rgba(255,255,255,.94); border-radius: 16px;
    padding: 10px 14px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.15);
    pointer-events: none;
}
.th-bubble.pop { animation: thBubblePop .35s ease; }
@keyframes thBubblePop { 0% { transform: translateX(-50%) scale(.7); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
.th-bubble-en { font-size: 15px; font-weight: 900; color: #33691E; line-height: 1.35; }
.th-bubble-zh { font-size: 11px; color: #8D6E63; margin-top: 2px; }

/* 控制区：提示 + 大麦克风 */
.th-controls { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px; gap: 8px; position: relative; }
.th-hint-btn {
    border: none; background: #FFF3C4; color: #B28704; font-size: 13px; font-weight: 800;
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.th-mic {
    border: none; cursor: pointer; width: 100%; max-width: 320px;
    background: linear-gradient(180deg, #66BB6A, #43A047);
    border-radius: 999px; padding: 15px 20px; color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 0 6px 0 #2E7D32, 0 10px 24px rgba(46,125,50,.35);
    transition: transform .12s, box-shadow .12s;
}
.th-mic:active { transform: translateY(3px); box-shadow: 0 3px 0 #2E7D32; }
.th-mic .th-mic-ico { font-size: 26px; }
.th-mic .th-mic-label { font-size: 17px; font-weight: 900; letter-spacing: .5px; }
.th-mic.listening { animation: thMicPulse 1s ease-in-out infinite; }
.th-mic.disabled { filter: grayscale(.45); opacity: .75; }
@keyframes thMicPulse {
    0%,100% { box-shadow: 0 6px 0 #2E7D32, 0 0 0 0 rgba(102,187,106,.55); }
    50% { box-shadow: 0 6px 0 #2E7D32, 0 0 0 14px rgba(102,187,106,0); }
}
.th-hint { min-height: 20px; font-size: 13px; font-weight: 800; color: #E65100; }
.th-hint.show { background: #FFF8E1; border-radius: 10px; padding: 6px 12px; }

/* 兜底气泡选项 */
.th-fallback {
    display: none; flex-direction: column; gap: 8px; padding: 0 14px 14px;
}
.th-fb-tip { text-align: center; font-size: 13px; font-weight: 800; color: #7A5A00; margin: 0; }
.th-fb-opt {
    border: 2px solid rgba(109,76,44,.2); background: #fff; color: #4E342E;
    font-size: 15px; font-weight: 800; padding: 11px 12px; border-radius: 14px; cursor: pointer;
}
.th-fb-opt.good { border-color: #AED581; background: #F1F8E9; }
.th-fb-opt.picked { border-color: #43A047; background: #C8E6C9; }

/* 结算 */
.th-result {
    background: linear-gradient(180deg, #FFFDE7, #FFF3C4); border-radius: 24px;
    padding: 26px 22px; text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.th-result-ico { font-size: 54px; }
.th-result h2 { color: #5D4037; margin: 6px 0; }
.th-result-stars { font-size: 30px; }
.th-combo { font-size: 14px; font-weight: 900; color: #E65100; }
.th-sentences { margin: 14px 0; display: grid; gap: 8px; text-align: left; }
.th-sent-title { text-align: center; font-weight: 900; color: #7A5A00; margin: 0 0 4px; }
.th-sentence {
    display: flex; align-items: center; gap: 10px; background: #fff;
    border-radius: 14px; padding: 10px 12px;
}
.th-sentence b { display: block; font-size: 15px; color: #33691E; }
.th-sentence i { font-style: normal; font-size: 12px; color: #8D6E63; }
.th-sent-play {
    border: none; background: #FFECB3; width: 40px; height: 40px; border-radius: 50%;
    font-size: 18px; cursor: pointer; flex-shrink: 0;
}
.th-sent-play:active { transform: scale(.9); }
.th-share {
    border: none; background: linear-gradient(180deg, #FFB74D, #FB8C00); color: #fff;
    font-size: 15px; font-weight: 900; padding: 12px 26px; border-radius: 999px;
    cursor: pointer; margin-right: 8px; box-shadow: 0 4px 0 #E65100;
}
.th-share:active { transform: translateY(2px); }
.th-share-img { display: block; width: 100%; max-width: 340px; margin: 14px auto 0; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

/* =================== Phase 57: 战斗选关卡片游戏化 =================== */
.enemy-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 0 0 12px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
}
.enemy-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.enemy-card:active { transform: scale(0.96); }
.enemy-art {
    width: 100%; height: 92px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #FFF3E0, #FFCC80);
}
.enemy-art .enemy-art-emoji {
    font-size: 54px; line-height: 1;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.22));
    animation: floatBob 2.6s ease-in-out infinite;
}
.enemy-card.boss-card .enemy-art { background: linear-gradient(160deg, #FFEBEE, #FF8A80); height: 108px; }
.enemy-card.boss-card .enemy-art-emoji { font-size: 64px; animation-duration: 1.8s; }
.enemy-name { font-weight: 900; color: var(--text-primary); font-size: 14px; margin: 8px 10px 6px; }
.enemy-hp-track {
    height: 8px; margin: 0 12px 6px; border-radius: 4px;
    background: rgba(0,0,0,.08); overflow: hidden;
}
.enemy-hp-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #66BB6A, #FFB300 70%, #EF5350);
}
.enemy-stats { font-size: 12px; font-weight: 800; color: var(--text-secondary); margin-bottom: 6px; }
.enemy-diff {
    display: inline-block; color: #fff; font-size: 11px; font-weight: 900;
    padding: 3px 12px; border-radius: var(--radius-full);
}

/* =================== Phase 57: 充值页游戏化 =================== */
.recharge-teaser { text-align: center; padding: 30px 16px 20px; }
.recharge-coins-art { font-size: 46px; letter-spacing: 6px; margin-bottom: 18px; animation: floatBob 2.4s ease-in-out infinite; }
.recharge-coins-art span:nth-child(4) { font-size: 54px; display: inline-block; filter: drop-shadow(0 0 10px rgba(155,89,182,.65)); }
.recharge-teaser-bubble {
    display: inline-block; background: var(--bg-card); color: var(--text-primary);
    font-size: 15px; font-weight: 800; line-height: 1.6;
    border-radius: var(--radius-md); padding: 12px 22px; margin-bottom: 18px;
    box-shadow: var(--shadow-card); position: relative;
}
.recharge-teaser-bubble::before {
    content: '🛍️'; position: absolute; top: -14px; left: -10px; font-size: 24px;
}
.recharge-card {
    background: var(--bg-card); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card); padding: 14px 12px; text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.recharge-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.recharge-art { height: 66px; display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-bottom: 4px; }
.recharge-art .cs { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
.recharge-art .cs2 { font-size: 44px; }
.recharge-art .cs3 { font-size: 54px; }
.recharge-art .gem-shine {
    font-size: 56px; line-height: 66px; display: inline-block;
    animation: gemShine 2s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(155,89,182,.6));
}
@keyframes gemShine {
    0%, 100% { transform: scale(1) rotate(-4deg); }
    50% { transform: scale(1.15) rotate(4deg); }
}
.recharge-card.gem-card { border: 2px solid rgba(155,89,182,.35); background: linear-gradient(180deg, #fff, #F3E5F5); }
.recharge-card .recharge-buy-btn { padding: 9px 22px; font-size: 14px; }

/* =================== Phase 57: NPC 引导组件 + Hub 卡片增强 =================== */
.npc-guide {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px;
}
.npc-guide-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(160deg, #FFE0B2, #FFCC80);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; flex-shrink: 0;
    box-shadow: var(--shadow-card);
    animation: floatBob 2.6s ease-in-out infinite;
}
.npc-guide-bubble {
    position: relative; background: var(--bg-card); color: var(--text-primary);
    font-size: 14px; font-weight: 800;
    border-radius: var(--radius-md); padding: 10px 16px;
    box-shadow: var(--shadow-card); text-align: left;
}
.npc-guide-bubble::before {
    content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    border: 8px solid transparent; border-right-color: var(--bg-card); border-left: 0;
}
/* Hub 卡片（学习页/课堂页）统一增强 */
.hub-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.hub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); }
.hub-card .hub-icon { display: inline-block; animation: floatBob 3s ease-in-out infinite; }
.hub-card:nth-child(2n) .hub-icon { animation-delay: .5s; }
.hub-card:nth-child(3n) .hub-icon { animation-delay: 1s; }

/* 游乐场在线气泡：有人时跳动 */
#pgOnlineBubble.has-online { animation: floatBob 1.2s ease-in-out infinite; }

/* =================== Phase 61: 成就称号（teen/adult 档） =================== */
.co-title-badge {
    display: inline-block; margin-top: 8px;
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
    border: 2px solid #FFB300; border-radius: var(--radius-full);
    color: #5D4037; font-size: 13px; font-weight: 900;
    padding: 5px 16px; box-shadow: 0 2px 6px rgba(255,179,0,.35);
}
:root[data-age="teen"] .co-title-badge { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); border-color: #1E88E5; color: #0D47A1; }
:root[data-age="adult"] .co-title-badge { background: #EEF2FF; border-color: #3B82F6; color: #1E3A8A; box-shadow: none; }

/* =================== Phase 60: 皮肤碎片（场景毕业 → 换装扮） =================== */
.th-shard-badge {
    display: none; margin: 10px auto 0; max-width: 360px;
    background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
    border: 2px solid #66BB6A; border-radius: var(--radius-md);
    color: #2E7D32; font-size: 13.5px; font-weight: 800;
    padding: 10px 14px; animation: comboPop .4s ease;
}
.co-shard-bar {
    text-align: center; font-size: 13px; font-weight: 700; color: var(--text-mid);
    background: var(--amber-bg); border-radius: var(--radius-full);
    padding: 8px 14px; margin-bottom: 10px;
}
.co-shard-bar b { color: #E65100; font-size: 15px; }
.co-skin { position: relative; }
.co-skin-redeem {
    position: absolute; right: 6px; bottom: 6px;
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #FFB300, #FB8C00); color: #fff;
    font-size: 11px; font-weight: 900; border-radius: var(--radius-full);
    padding: 4px 10px; box-shadow: 0 2px 0 rgba(230,81,0,.4);
    animation: glowPulse 1.8s ease-in-out infinite;
}
.co-skin-redeem:active { transform: scale(.92); }

/* =================== Phase 58: 英语小镇（走着玩） =================== */
.town-wrap { max-width: 640px; margin: 0 auto; padding: 12px; }
.town-stage {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-float); background: #AED581;
}
#townCanvas { display: block; width: 100%; height: 460px; touch-action: none; }
.town-tip {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,.92); color: var(--text-primary);
    font-size: 13px; font-weight: 800; padding: 8px 16px;
    border-radius: var(--radius-full); box-shadow: var(--shadow-card);
    transition: opacity .8s; pointer-events: none; white-space: nowrap;
}
.town-tip.fade { opacity: 0; }
/* 进店气泡（到达建筑门口时弹出） */
.town-arrive {
    position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
    z-index: 10; animation: comboPop .3s ease;
}
.town-arrive-bubble {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #FFFDE7, #FFE082);
    border: 3px solid #FFB300; border-radius: 18px;
    padding: 10px 16px; cursor: pointer;
    box-shadow: 0 6px 0 rgba(230,81,0,.35), 0 10px 24px rgba(0,0,0,.2);
    animation: glowPulse 1.6s ease-in-out infinite;
}
.town-arrive-ico { font-size: 32px; }
.town-arrive-txt { text-align: left; }
.town-arrive-txt b { display: block; font-size: 15px; color: #5D4037; }
.town-arrive-txt i { font-style: normal; font-size: 11px; color: #8D6E63; }
.town-arrive-go {
    background: #FF6B6B; color: #fff; font-weight: 900; font-size: 13px;
    border-radius: var(--radius-full); padding: 8px 14px;
    animation: floatBob 1s ease-in-out infinite;
}
/* 英语角入口大按钮 */
.town-enter-btn {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #B3E5FC, #81D4FA);
    border: 3px solid #4FC3F7; border-radius: var(--radius-md);
    padding: 12px 16px; cursor: pointer; margin-bottom: 12px;
    box-shadow: 0 5px 0 rgba(3,155,229,.4);
    transition: transform .12s;
    font-family: inherit; text-align: left;
}
.town-enter-btn:active { transform: scale(.97); }
.town-enter-ico { font-size: 34px; }
.town-enter-txt { flex: 1; }
.town-enter-txt b { display: block; font-size: 16px; color: #01579B; }
.town-enter-txt i { font-style: normal; font-size: 11.5px; color: #0277BD; }
.town-enter-arrow { font-size: 22px; font-weight: 900; color: #0288D1; }

/* 场景变体：动物园（蓝天草地） */
.th-scene--zoo { background: linear-gradient(180deg, #B3E5FC 0%, #E1F5FE 45%, #AED581 45.5%, #7CB342 100%); }
.th-scene--zoo::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 56px; height: 8px;
    background: repeating-linear-gradient(90deg, #8D6E63 0 14px, transparent 14px 26px);
    opacity: .5;
}
/* 场景变体：学校（教室：蓝墙 + 黑板） */
.th-scene--school { background: linear-gradient(180deg, #B3C7E6 0%, #D6E4F7 55%, #C9BA8F 55.5%, #B9A87E 100%); }
.th-scene--school .th-lamp { background: radial-gradient(ellipse at bottom, #E3F2FD 30%, #90CAF9 70%); }
.th-scene--school .th-window { background: linear-gradient(180deg, #2E3A46, #3B4A58); border-color: #5D4037; }
/* 场景变体：商店（粉紫货架感） */
.th-scene--shopping { background: linear-gradient(180deg, #F8BBD0 0%, #FCE4EC 50%, #E1C6E0 50.5%, #D3B3D6 100%); }
.th-scene--shopping::before {
    content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 52px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 40px, rgba(206,147,216,.25) 40px 80px);
    border-radius: 8px; margin: 0 12px;
}
/* 场景变体：公园（绿意 + 太阳） */
.th-scene--park { background: linear-gradient(180deg, #C8E6C9 0%, #E8F5E9 45%, #81C784 45.5%, #4CAF50 100%); }
.th-scene--park::after {
    content: '☀️'; position: absolute; top: 10px; right: 18px; font-size: 30px; opacity: .9;
}
.egg-box {
    background: linear-gradient(180deg, #FFFDE7, #FFE082); border-radius: 24px;
    padding: 30px 26px; width: 100%; max-width: 340px; text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.egg-title { font-size: 21px; font-weight: 900; color: #6B4E00; margin-bottom: 16px; }
.egg-visual {
    width: 150px; height: 150px; border: none; background: rgba(255,255,255,.55);
    border-radius: 50%; font-size: 84px; cursor: pointer; display: block; margin: 0 auto 14px;
    line-height: 150px; transition: transform .2s; touch-action: manipulation;
}
.egg-visual:active { transform: scale(.92); }
.egg-visual.egg-shake { animation: eggWobble .3s ease-in-out 2; }
@keyframes eggWobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.egg-visual.egg-opened { background: #FFF59D; animation: eggPop .4s ease; }
@keyframes eggPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.egg-hint { font-size: 15px; font-weight: 800; color: #7A5A00; margin-bottom: 16px; min-height: 44px; }
.egg-hint b { color: #E65100; font-size: 17px; }
.egg-close { border: none; }

/* 炸弹果园 */
.bo-wrap {
    flex: 1; display: flex; flex-direction: column; gap: 12px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 100%); overflow-y: auto;
}
.bo-hud { display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,.85); border-radius: 12px; padding: 8px 14px;
    font-size: 16px; font-weight: 800; }
.bo-timer.bo-danger { color: #D84315; animation: boBlink .6s infinite; }
@keyframes boBlink { 50% { opacity: .4; } }
.bo-prompt {
    background: #fff; border-radius: 16px; padding: 14px; text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.bo-prompt-cn { font-size: 22px; font-weight: 900; color: #4B9E5E; margin-bottom: 8px; }
.bo-prompt-speak {
    border: 2px solid #4B9E5E; background: #EAF5EC; color: #3C8A4E; font-weight: 800;
    font-size: 14px; border-radius: 999px; padding: 8px 18px; cursor: pointer; touch-action: manipulation;
    min-height: 40px;
}
.bo-prompt-speak:active { transform: scale(.95); }
.bo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bo-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: #fff; border: 2.5px solid #FFE0B2; border-radius: 16px; padding: 14px 6px;
    min-height: 84px; cursor: pointer; font-family: inherit; touch-action: manipulation;
    transition: transform .12s, border-color .15s;
}
.bo-item:active { transform: scale(.94); }
.bo-item-icon { font-size: 36px; line-height: 1; }
.bo-item-word { font-size: 13.5px; font-weight: 800; color: #5D4037; }

/* ===== Phase 33: G7 单词保卫战（打靶） ===== */
.pd-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.pd-hud { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 15px; font-weight: 700; }
.pd-crops { font-size: 22px; letter-spacing: 2px; }
.pd-combo { color: #E65100; }
.pd-score { color: #F57F17; }
.pd-canvas { width: 100%; border-radius: 16px; border: 3px solid #AED581; display: block; }
.pd-question { font-size: 16px; font-weight: 700; color: #33691E; text-align: center; }
.pd-question b { color: #D84315; }
.pd-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pd-opt {
    padding: 14px 8px; min-height: 48px; border: 2.5px solid #C5E1A5; border-radius: 14px;
    background: #fff; font-size: 16px; font-weight: 800; color: #33691E;
    cursor: pointer; touch-action: manipulation; transition: transform .12s, border-color .15s, opacity .2s;
}
.pd-opt:active { transform: scale(.94); }
.pd-opt-off { pointer-events: none; opacity: .55; }
.pd-opt-wrong { border-color: #EF5350; background: #FFEBEE; color: #C62828; animation: pdShake .4s; }
@keyframes pdShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.pd-msg { min-height: 20px; font-size: 14px; font-weight: 600; color: #558B2F; text-align: center; }
.pd-finish { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; }
.pd-finish-emoji { font-size: 64px; }
.pd-finish-sub { color: #666; }
.pd-finish-coins { font-size: 20px; font-weight: 800; color: #F57F17; }
.pd-again { min-width: 200px; }
.pd-exit { background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 8px; }

/* ===== Phase 34: 安全剧情 + 单元考试 ===== */
.sa-loading { text-align: center; padding: 40px 16px; color: #888; font-size: 15px; }
.sa-map-head { text-align: center; margin-bottom: 14px; }
.sa-map-head h3 { margin: 0 0 4px; color: #2E7D32; }
.sa-map-head p { margin: 0; color: #888; font-size: 13px; }
.sa-path { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 16px; }
.sa-node { position: relative; }
.sa-node-btn {
    display: flex; align-items: center; gap: 12px; min-width: 240px; min-height: 60px;
    border: 3px solid #AED581; border-radius: 999px; background: #fff; padding: 10px 22px;
    cursor: pointer; touch-action: manipulation; font-family: inherit; transition: transform .12s;
}
.sa-node-btn:active { transform: scale(.95); }
.sa-node-icon { font-size: 28px; }
.sa-node-name { font-size: 16px; font-weight: 800; color: #33691E; }
.sa-node-locked { opacity: .55; background: #F5F5F5; border-color: #E0E0E0; }
.sa-node-done { border-color: #81C784; background: #F1F8E9; }
.sa-node-go { border-color: #FFB300; background: #FFFDE7; animation: saBounce 1.6s ease-in-out infinite; }
@keyframes saBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sa-check { position: absolute; right: -6px; top: -8px; font-size: 20px; }
.sa-dots { color: #8D6E63; font-size: 13px; letter-spacing: 4px; opacity: .7; padding: 2px 0; }
.sa-badge { text-align: center; background: #FFF8E1; border: 2px dashed #FFB300; color: #B26A00; border-radius: 14px; padding: 12px; font-weight: 700; }
.sa-scene-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sa-back { background: none; border: none; color: #666; font-size: 14px; font-weight: 700; cursor: pointer; padding: 6px; }
.sa-hearts { font-size: 16px; letter-spacing: 2px; }
.sa-scene-banner { font-size: 56px; text-align: center; }
.sa-scene-title { text-align: center; color: #33691E; margin: 6px 0; }
.sa-scene-title small { color: #999; font-size: 12px; }
.sa-intro, .sa-story { background: #F9FBE7; border-radius: 14px; padding: 14px; color: #4E5B31; font-size: 15px; line-height: 1.6; }
.sa-start, .sa-next { width: 100%; margin-top: 12px; }
.sa-step-tag { text-align: center; color: #8D6E63; font-size: 13px; font-weight: 700; margin: 6px 0; }
.sa-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sa-choice {
    min-height: 52px; border: 2.5px solid #C5E1A5; border-radius: 14px; background: #fff;
    font-size: 15px; font-weight: 700; color: #33691E; cursor: pointer; touch-action: manipulation;
    transition: transform .12s; padding: 12px; text-align: left; font-family: inherit;
}
.sa-choice:active { transform: scale(.97); }
.sa-off { pointer-events: none; opacity: .5; }
.sa-right { border-color: #4B9E5E; background: #EAF5EC; }
.sa-wrong { border-color: #E53935; background: #FFEBEE; animation: pdShake .4s; }
.sa-explain { margin-top: 12px; }
.sa-explain-ok { background: #E8F5E9; color: #2E7D32; border-radius: 12px; padding: 12px; font-weight: 700; }
.sa-explain-no { background: #FFF3E0; color: #BF360C; border-radius: 12px; padding: 12px; font-weight: 700; }
.sa-gentle { text-align: center; color: #888; font-size: 14px; }
.sa-finish { text-align: center; padding: 20px 8px; }
.sa-finish-icon { font-size: 60px; }
.sa-tip { color: #666; background: #FFF8E1; border-radius: 12px; padding: 12px; font-size: 14px; line-height: 1.6; }
.sa-words-title { color: #666; font-size: 14px; margin: 14px 0 8px; }
.sa-words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sa-word {
    display: flex; flex-direction: column; align-items: center; border: 2px solid #AED581;
    background: #fff; border-radius: 12px; padding: 8px 14px; cursor: pointer; font-family: inherit;
}
.sa-word b { color: #33691E; font-size: 16px; }
.sa-word span { color: #999; font-size: 12px; }
.sa-reward { font-size: 16px; font-weight: 800; color: #F57F17; margin: 14px 0; }
/* 单元考试 */
.ex-units { display: flex; flex-direction: column; gap: 10px; }
.ex-unit {
    display: flex; align-items: center; gap: 12px; background: #fff; border: 2.5px solid #FFE0B2;
    border-radius: 16px; padding: 12px 14px;
}
.ex-unit-icon { font-size: 32px; }
.ex-unit-info { flex: 1; display: flex; flex-direction: column; }
.ex-unit-info b { color: #5D4037; font-size: 15px; }
.ex-unit-info span { color: #999; font-size: 12px; }
.ex-unit-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ex-pass-badge { color: #2E7D32; font-size: 12px; font-weight: 800; }
.ex-best { color: #B26A00; font-size: 12px; font-weight: 700; }
.ex-start-btn { min-width: 96px; min-height: 40px; font-size: 14px; padding: 8px 12px; }
.ex-start-btn:disabled { opacity: .55; }
.ex-rule { text-align: center; color: #A1887F; font-size: 12px; margin-top: 14px; }
.ex-qtype { text-align: center; color: #8D6E63; font-size: 13px; font-weight: 700; margin: 8px 0; }
.ex-progress { color: #2E7D32; font-weight: 800; }
.ex-prompt-word { text-align: center; font-size: 34px; font-weight: 900; color: #33691E; }
.ex-prompt-cn { text-align: center; font-size: 28px; font-weight: 900; color: #5D4037; }
.ex-speak { margin: 0 auto 8px; }
.ex-dict-btn {
    display: block; margin: 10px auto; min-height: 48px; padding: 10px 22px;
    border: 2.5px solid #42A5F5; border-radius: 999px; background: #E3F2FD;
    color: #1565C0; font-size: 15px; font-weight: 800; cursor: pointer; touch-action: manipulation;
}
.ex-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ex-opt {
    min-height: 52px; border: 2.5px solid #C5E1A5; border-radius: 14px; background: #fff;
    font-size: 16px; font-weight: 800; color: #33691E; cursor: pointer; touch-action: manipulation;
    transition: transform .12s; padding: 10px; font-family: inherit;
}
.ex-opt:active { transform: scale(.95); }
.ex-spell {
    width: 100%; margin-top: 14px; padding: 14px; font-size: 18px; text-align: center;
    border: 2.5px solid #AED581; border-radius: 14px; font-family: inherit; outline: none;
}
.ex-spell:focus { border-color: #66BB6A; }
.ex-ok { width: 100%; margin-top: 12px; }
.ex-answered-strip { text-align: center; color: #BDBDBD; font-size: 12px; margin-top: 10px; min-height: 16px; }
.ex-score-ring {
    width: 120px; height: 120px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 900; color: #fff;
}
.ex-score-ring small { font-size: 16px; margin-left: 2px; }
.ex-ring-pass { background: linear-gradient(135deg, #66BB6A, #43A047); box-shadow: 0 8px 24px rgba(102,187,106,.4); }
.ex-ring-fail { background: linear-gradient(135deg, #FFB74D, #FB8C00); box-shadow: 0 8px 24px rgba(251,140,0,.35); }
.ex-wrong-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ex-wrong-item {
    display: flex; flex-direction: column; border: 2px solid #FFCCBC; background: #FFF3E0;
    border-radius: 12px; padding: 10px 14px; cursor: pointer; font-family: inherit; text-align: left;
}
.ex-wrong-item b { color: #BF360C; font-size: 15px; }
.ex-wrong-item span { color: #666; font-size: 13px; }
.ex-wrong-item em { color: #E53935; font-size: 12px; font-style: normal; margin-top: 2px; }
.sa-back-link { background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 10px; }

/* ===== Phase 35: G8 小蜜蜂打飞机 ===== */
.bs-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.bs-hud { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 15px; font-weight: 700; }
.bs-lives { font-size: 16px; letter-spacing: 2px; }
.bs-combo { color: #E65100; }
.bs-score { color: #F57F17; }
.bs-canvas { width: 100%; border-radius: 16px; border: 3px solid #90CAF9; display: block; touch-action: none; }
.bs-question { font-size: 16px; font-weight: 700; color: #1565C0; text-align: center; }
.bs-question b { color: #C62828; }
.bs-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }

/* ===== Phase 35: 成长路线（四级分层） ===== */
.sr-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 0 auto; padding: 4px 2px 30px; }
.sr-card { position: relative; border-radius: 18px; padding: 16px; border: 3px solid; transition: transform .12s; }
.sr-card:active { transform: scale(.98); }
.sr-head { display: flex; align-items: center; gap: 12px; }
.sr-icon { font-size: 38px; }
.sr-name { font-size: 17px; font-weight: 900; }
.sr-age { font-size: 12px; color: #777; font-weight: 700; }
.sr-desc { margin-top: 8px; font-size: 13px; color: #666; line-height: 1.55; }
.sr-progress { margin-top: 10px; }
.sr-bar { height: 10px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.sr-bar-fill { height: 100%; border-radius: 999px; transition: width .6s ease; }
.sr-bar-text { font-size: 12px; color: #888; margin-top: 4px; }
.sr-current { position: absolute; top: -10px; right: 12px; background: #FFB300; color: #fff; font-size: 11px; font-weight: 900; border-radius: 999px; padding: 3px 10px; box-shadow: 0 3px 8px rgba(255,179,0,.4); }
.sr-locked { opacity: .62; filter: saturate(.55); }
.sr-lock-row { margin-top: 10px; font-size: 12.5px; color: #9C6B00; background: #FFF8E1; border-radius: 10px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-select-btn { border: none; background: #2E7D32; color: #fff; font-weight: 800; border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; touch-action: manipulation; }
.sr-select-btn:disabled { opacity: .5; }
/* 注册阶段选择 */
.reg-stage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.reg-stage { border: 2.5px solid #E0E0E0; border-radius: 12px; background: #fff; padding: 8px 6px; text-align: center; cursor: pointer; font-family: inherit; transition: all .15s; }
.reg-stage .rs-icon { font-size: 22px; display: block; }
.reg-stage .rs-name { font-size: 13px; font-weight: 800; color: #444; }
.reg-stage .rs-age { font-size: 11px; color: #999; }
.reg-stage.active { border-color: #66BB6A; background: #E8F5E9; }
/* M3 阶段扩容：16+/18+ 两档用简洁酷风（不用卡通浅绿） */
.reg-stage.reg-stage-cool { border-color: #90A4AE; background: linear-gradient(160deg, #263238, #37474F); }
.reg-stage.reg-stage-cool .rs-name { color: #ECEFF1; letter-spacing: .5px; }
.reg-stage.reg-stage-cool .rs-age { color: #90A4AE; }
.reg-stage.reg-stage-cool.active { border-color: #4FC3F7; background: linear-gradient(160deg, #0D1B2A, #1B3A4B); box-shadow: 0 0 10px rgba(79, 195, 247, .35); }
.reg-stage.reg-stage-cool.active .rs-name { color: #4FC3F7; }
[data-theme="dark"] .reg-stage.reg-stage-cool { border-color: #455A64; }
/* 陪练评价 + 阶段筛选 */
.tutor-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; }
.tutor-chip { flex-shrink: 0; border: 2px solid #CFD8DC; background: #fff; color: #546E7A; border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.tutor-chip.active { border-color: #66BB6A; background: #E8F5E9; color: #2E7D32; }
.tutor-rating small { color: #FFA000; font-weight: 700; }
.review-stars { display: flex; gap: 6px; justify-content: center; margin: 10px 0; }
.review-star { font-size: 30px; background: none; border: none; cursor: pointer; filter: grayscale(1); transition: transform .1s; }
.review-star.on { filter: none; transform: scale(1.12); }
.review-comment { width: 100%; min-height: 64px; border: 2px solid #E0E0E0; border-radius: 12px; padding: 10px; font-family: inherit; font-size: 14px; resize: none; }

/* ===== Phase 36: 阶段大考 + 家长报告 ===== */
.ex-wrap-s { max-width: 480px; margin: 0 auto; padding: 4px 2px 30px; }
.ex-options-1 { grid-template-columns: 1fr; }
.sr-exam-link { background: #7E57C2; color: #fff; border: none; border-radius: 999px; font-size: 12px; font-weight: 800; padding: 4px 12px; cursor: pointer; touch-action: manipulation; }
.ex-prompt-cn b { color: #7E57C2; font-size: 30px; }
.pr-card { max-width: 480px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 18px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.pr-head { text-align: center; border-bottom: 2px dashed #E0E0E0; padding-bottom: 12px; margin-bottom: 14px; }
.pr-head h3 { margin: 0 0 4px; color: #33691E; }
.pr-head p { margin: 0 0 10px; color: #999; font-size: 12.5px; }
.pr-print { min-width: 180px; min-height: 42px; font-size: 14px; }
.pr-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.pr-cell { background: #F1F8E9; border-radius: 12px; padding: 10px 4px; text-align: center; }
.pr-cell b { display: block; font-size: 20px; color: #2E7D32; }
.pr-cell span { font-size: 11px; color: #888; }
.pr-section { margin-bottom: 16px; }
.pr-section h4 { margin: 0 0 8px; color: #5D4037; font-size: 14.5px; }
.pr-note { font-size: 12.5px; color: #999; margin: 6px 0 0; }
.pr-cat { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pr-cat > span { width: 52px; font-size: 13px; font-weight: 700; color: #5D4037; flex-shrink: 0; }
.pr-cat-bar { flex: 1; }
.pr-weak { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-weak-tag { background: #FFF3E0; color: #BF360C; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; }
.pr-exam { font-size: 13px; color: #555; padding: 6px 0; border-bottom: 1px dashed #F0F0F0; }
.pr-tip { font-size: 13px; color: #555; line-height: 1.6; margin: 4px 0; }
@media print {
    body * { visibility: hidden; }
    .pr-card, .pr-card * { visibility: visible; }
    .pr-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; }
    .pr-print { display: none; }
}

/* ===== Phase 37: G9 打地鼠 + G10 切水果 ===== */
.wm-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 480px; margin: 0 auto; }
.wm-prompt { font-size: 16px; font-weight: 800; color: #5D4037; text-align: center; }
.wm-prompt b { color: #D84315; font-size: 20px; }
.wm-say { display: inline-flex; min-height: 34px; padding: 4px 12px; margin: 0 4px; }
.wm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 420px; }
.wm-hole {
    position: relative; height: 86px; border-radius: 0 0 18px 18px; background: #8D6E63;
    border: 3px solid #6D4C41; border-top: none; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: center;
}
.wm-mole {
    position: absolute; bottom: -86px; left: 0; right: 0; height: 86px;
    display: none; align-items: center; justify-content: center; flex-direction: column-reverse;
    cursor: pointer; touch-action: manipulation; animation: wmPop .22s ease-out forwards;
}
@keyframes wmPop { from { bottom: -86px; } to { bottom: 0; } }
.wm-mole::before {
    content: '🐭'; font-size: 34px; line-height: 1;
}
.wm-sign {
    background: #FFF8E1; border: 2px solid #FFB300; color: #5D4037;
    font-size: 13px; font-weight: 800; border-radius: 8px; padding: 1px 8px;
    margin-bottom: 2px; z-index: 1;
}
.wm-mole.wm-bonk { animation: wmBonk .22s ease-in forwards; }
@keyframes wmBonk { to { bottom: -60px; opacity: .2; } }
.wm-mole.wm-bonk::before { content: '😵'; }
.wm-mole.wm-laugh::before { content: '😂'; }
.wm-star { font-size: 40px; margin-bottom: 30px; }
.fn-canvas { width: 100%; border-radius: 16px; border: 3px solid #FFCC80; display: block; touch-action: none; background: #E8F5E9; }

/* ===== Phase 38: 参观码分享 ===== */
.vs-modal { max-width: 340px; text-align: center; }
.vs-modal h3 { margin: 4px 0 10px; color: #33691E; }
.vs-code { font-size: 40px; font-weight: 900; letter-spacing: 6px; color: #7E57C2; background: #F3E5F5; border-radius: 14px; padding: 12px; margin: 8px 0; }
.vs-desc { color: #777; font-size: 13.5px; line-height: 1.6; margin: 8px 0; }
.vs-link { background: #F5F5F5; border-radius: 10px; padding: 10px; font-size: 12px; color: #666; word-break: break-all; margin-bottom: 12px; }
.vs-farm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }

/* ===== Phase 40: 桌面端游戏画面放大 ===== */
@media (min-width: 700px) {
    .bs-wrap, .pd-wrap, .wm-wrap { max-width: 660px; }
    .pd-opt { font-size: 19px; min-height: 60px; padding: 16px 10px; }
    .bs-question, .wm-prompt { font-size: 20px; }
    .bs-question b, .wm-prompt b { font-size: 25px; }
    .wm-grid { max-width: 560px; gap: 16px; }
    .wm-hole { height: 112px; }
    .wm-mole { height: 112px; bottom: -112px; }
    @keyframes wmPop { from { bottom: -112px; } to { bottom: 0; } }
    .wm-sign { font-size: 15px; padding: 2px 10px; }
    .pd-hud, .bs-hud { font-size: 18px; }
    .pd-msg { font-size: 16px; min-height: 24px; }
    .pd-crops { font-size: 28px; }
    .fn-canvas, .bs-canvas, .pd-canvas { border-radius: 20px; }
    .pd-question { font-size: 18px; }
}

/* ===== Phase 41: 消消乐翻牌卡 + 宠物动作 + 大富翁活化 ===== */
/* —— 翻牌卡 —— */
.rx-flip { perspective: 600px; cursor: pointer; }
.rxf-inner { position: relative; width: 100%; height: 100%; min-height: 84px; transform-style: preserve-3d; transition: transform .3s; }
.rx-flip.flipped .rxf-inner { transform: rotateY(180deg); }
.rxf-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; box-shadow: 0 4px 12px rgba(0,0,0,.13);
}
.rxf-back { background: linear-gradient(145deg, #FFB74D, #FF8A65); border: 3px solid #FFCC80; }
.rxf-back span { font-size: 30px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.rxf-front { transform: rotateY(180deg); border: 3px solid rgba(255,255,255,.7); }
.rxf-front.cat-animal { background: #DCEDC8; }
.rxf-front.cat-food { background: #FFE0B2; }
.rxf-front.cat-traffic { background: #B3E5FC; }
.rxf-front.cat-nature { background: #E1BEE7; }
.rxf-front.cat-thing { background: #FFF59D; }
.rxf-emoji { font-size: 34px; line-height: 1; }
.rxf-word { font-weight: 900; color: #33691E; font-size: 15px; }
.rxf-cnword { color: #5D4037; font-size: 17px; }
.rxf-deco { font-size: 12px; opacity: .7; }
.rx-flip.matched .rxf-inner { transition: transform .45s ease-in; transform: translateY(-26px) scale(1.12) rotateY(180deg); box-shadow: 0 0 18px 6px rgba(255,213,79,.75); border-radius: 16px; }
.rx-flip.gone { visibility: hidden; }
.rx-flip.shake .rxf-inner { animation: rxShake .4s; }
@keyframes rxShake { 25% { transform: rotateY(180deg) translateX(-6px); } 50% { transform: rotateY(180deg) translateX(6px); } 75% { transform: rotateY(180deg) translateX(-4px); } }
.rx-combo-hot { color: #E65100; font-weight: 900; text-shadow: 0 0 8px rgba(255,179,0,.6); animation: comboPop .3s; }
@keyframes comboPop { 50% { transform: scale(1.35); } }
.rx-burst { position: fixed; z-index: 9998; font-size: 18px; pointer-events: none; animation: rxBurst .7s ease-out forwards; }
@keyframes rxBurst { to { transform: translate(var(--bx), var(--by)) scale(.4); opacity: 0; } }
.rx-float-score { position: fixed; z-index: 9998; transform: translateX(-50%); font-size: 18px; font-weight: 900; color: #FF6D00; text-shadow: 0 2px 4px #fff; pointer-events: none; animation: rxFloat .9s ease-out forwards; }
@keyframes rxFloat { to { transform: translateX(-50%) translateY(-40px); opacity: 0; } }
.rx-match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* —— 宠物 8 动作（#farmPet） —— */
#farmPet { transition: filter .3s; }
#farmPet.fp-jump { animation: fpJump .7s ease; }
@keyframes fpJump { 30% { transform: translateY(-18px) scale(1.06); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
#farmPet.fp-dance { animation: fpDance .9s ease; }
@keyframes fpDance { 20% { transform: rotate(-12deg) translateY(-6px); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-10deg) translateY(-6px); } 80% { transform: rotate(10deg); } }
#farmPet.fp-kiss { animation: fpKiss .9s ease; }
@keyframes fpKiss { 40% { transform: scale(1.18) translateY(-4px); } 70% { transform: scale(.96); } }
#farmPet.fp-trumpet { animation: fpTrumpet 1.1s ease; }
@keyframes fpTrumpet { 25% { transform: translateY(-12px) rotate(-8deg); } 50% { transform: translateY(-12px) rotate(8deg); } 75% { transform: translateY(-12px) rotate(-8deg); } }
#farmPet.fp-sad { animation: fpSad 1.2s ease; filter: grayscale(.5) brightness(.92); }
@keyframes fpSad { 30% { transform: rotate(-8deg) translateY(2px); } 60% { transform: rotate(8deg); } }
#farmPet.fp-read { animation: fpRead 1s ease; }
@keyframes fpRead { 40% { transform: translateY(-5px) scale(1.05); } }
#farmPet.fp-run { animation: fpRun .8s ease; }
@keyframes fpRun { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-5px); } }
#farmPet.fp-sleep { filter: brightness(.85) saturate(.7); animation: fpZzz 2.4s ease-in-out infinite; }
@keyframes fpZzz { 50% { transform: translateY(2px) scale(.97); } }
.fp-fx { position: absolute; font-size: 16px; pointer-events: none; animation: fpFxUp 1.2s ease-out forwards; z-index: 5; }
@keyframes fpFxUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-42px); opacity: 0; } }
.fp-bubble {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%) scale(.7);
    background: #fff; border: 2px solid #FFB300; color: #5D4037; font-size: 12.5px; font-weight: 800;
    border-radius: 10px; padding: 3px 9px; white-space: nowrap; opacity: 0;
    transition: all .2s; pointer-events: none; z-index: 6;
}
.fp-bubble.show { opacity: 1; transform: translateX(-50%) scale(1); }

/* —— 大富翁活化 —— */
.dice-spin3d { animation: diceSpin3d .9s ease; }
@keyframes diceSpin3d { to { transform: rotateY(720deg) rotateX(360deg); } }
.cpt-inner { display: block; width: 100%; height: 100%; border-radius: 50%; }
.cpt-inner.hop { animation: cptHop .28s ease; }
@keyframes cptHop { 50% { transform: translateY(-10px) scale(1.1); } }
.cpt-inner.party { animation: cptParty 1.1s ease; }
@keyframes cptParty { 20% { transform: translateY(-12px) scale(1.25) rotate(-15deg); } 40% { transform: translateY(-12px) scale(1.25) rotate(15deg); } 60% { transform: translateY(-12px) scale(1.25) rotate(-15deg); } 80% { transform: translateY(-12px) scale(1.25) rotate(15deg); } }

/* ===== Phase 42: AI 卡通插画接入 ===== */
.rxf-img { width: 72%; height: 56%; object-fit: contain; border-radius: 12px; }
.rxf-img + .rxf-emoji { display: none; }
.rx-word-img { width: 84%; height: 70%; object-fit: contain; border-radius: 12px; }
.rx-word-img + .rx-pic-emoji { display: none; }

/* ===== Phase 42: 全站立体卡通 UI（暖色渐变 + 立体按钮 + 卡片质感） ===== */
html:not([data-mode="adult"]) body {
    background: linear-gradient(180deg, #FFF9EF 0%, #FFF4E2 45%, #FFEDC7 100%) fixed !important;
}
.btn-primary, .hw-btn-photo, .sr-select-btn, .ex-ok, .pd-again {
    border-radius: 16px !important;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .13), 0 8px 18px rgba(0, 0, 0, .12) !important;
    transition: transform .08s, box-shadow .08s;
}
.btn-primary:active, .hw-btn-photo:active, .sr-select-btn:active, .ex-ok:active, .pd-again:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .13), 0 3px 8px rgba(0, 0, 0, .10) !important;
}
.hub-card, .shop-item, .pr-card, .modal-content, .ci-box, .ex-unit {
    border-radius: 18px !important;
    box-shadow: 0 5px 0 rgba(0, 0, 0, .05), 0 12px 26px rgba(0, 0, 0, .10) !important;
}
h1, h2, h3 {
    font-family: "Baloo 2", "Yuanti SC", "幼圆", "YouYuan", "Microsoft YaHei", sans-serif;
}

/* ===== Phase 43: 玩家小农夫 / 皮肤稀有度 / NPC 邻居 / 剧情 NPC ===== */
.sa-story-row { display: flex; align-items: flex-start; gap: 10px; }
.sa-npc {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
    background: #FFF3E0; border: 2.5px solid #FFCC80;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.sf-npc-title { font-size: 13px; font-weight: 800; color: #7E57C2; margin: 4px 0 8px; }
.sf-friend-card.sf-npc { background: #F3E5F5; border: 2px dashed #CE93D8; }
.co-skin-rar { font-size: 10.5px; font-weight: 900; border-radius: 999px; padding: 1px 8px; }
.co-skin.rar-n .co-skin-rar { background: #F5F5F5; color: #757575; }
.co-skin.rar-r .co-skin-rar { background: #E3F2FD; color: #1565C0; }
.co-skin.rar-r { border-color: #64B5F6 !important; }
.co-skin.rar-s .co-skin-rar { background: #F3E5F5; color: #7B1FA2; }
.co-skin.rar-s { border-color: #BA68C8 !important; }
.co-skin.rar-l .co-skin-rar { background: #FFF8E1; color: #B26A00; }
.co-skin.rar-l { border-color: #FFC107 !important; box-shadow: 0 0 8px rgba(255,193,7,.45); }
.bo-item.bo-bomb { background: #37474F; border-color: #263238; }
.bo-item.bo-right { border-color: #4B9E5E; background: #EAF5EC; animation: boPop .35s ease; }
.bo-item.bo-wrong { border-color: #E53935; background: #FFEBEE; animation: boShake .4s ease; }
@keyframes boPop { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes boShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.bo-combo { text-align: center; font-size: 17px; font-weight: 900; color: #E65100; min-height: 24px; }
.bo-finish { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: linear-gradient(180deg, #E8F5E9, #C8E6C9); padding: 30px 20px; text-align: center; }
.bo-finish-emoji { font-size: 60px; }
.bo-finish h2 { font-size: 26px; color: #2E7D32; }
.bo-finish-sub { color: #558B2F; font-weight: 700; }
.bo-finish-coins { font-size: 24px; font-weight: 900; color: #E65100; background: #fff;
    border-radius: 999px; padding: 10px 28px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.bo-again { border: none; }
.bo-exit { border: none; background: transparent; color: #2E7D32; font-weight: 800; font-size: 15px;
    cursor: pointer; padding: 10px; min-height: 44px; }

/* ============================================================
   Phase 45: 大屏满屏自适应 —— 手机不变，平板/电脑整体等比放大铺满
   （iPad/桌面打开不再是中间一小条，像手机上一样铺满全屏）
   原理：按屏幕宽度给最顶层 .screen 容器加 zoom 等比放大；
   body 与特效层（金币雨/漂浮字/彩带，都是 fixed 挂在 body 上）
   保持不缩放，坐标系不变、位置永远正确。
   老浏览器不支持 zoom 时自动回退为居中窄栏（现状），无副作用。
   ============================================================ */
:root { --app-zoom: 1; }
.screen {
    zoom: var(--app-zoom);
    height: calc(100vh / var(--app-zoom));
    height: calc(100dvh / var(--app-zoom));
}
/* flex 视图里被 max-width 限宽的内容条自动水平居中（全宽元素不受影响） */
.view > * { margin-left: auto; margin-right: auto; }

@media (min-width: 700px)  { :root { --app-zoom: 1.12; } } /* 小平板/大手机横屏：轻微放大 */
@media (min-width: 900px)  { :root { --app-zoom: 1.22; } } /* iPad 竖屏 */
@media (min-width: 1100px) { :root { --app-zoom: 1.35; } } /* iPad 横屏 */
@media (min-width: 1440px) { :root { --app-zoom: 1.5; } }  /* 电脑大屏 */

/* 大屏下收窄个别超宽容器（zoom 后保证铺满且不横向溢出） */
@media (min-width: 700px) {
    .uc-wrap, .sr-wrap, .ugc-sheet-panel, .bs-wrap, .pd-wrap, .wm-wrap, .mono-sheet-card, .mono-flags { max-width: 480px; }
    .wm-grid { max-width: 420px; gap: 12px; }
    .wm-hole, .wm-mole { height: 100px; }
    .wm-mole { bottom: -100px; }
    @keyframes wmPop { from { bottom: -100px; } to { bottom: 0; } }
    /* zoom 内部的 vh 单位会被放大，弹层限高改成与视口成比例的百分比/固定值 */
    .order-overlay .modal-card, .col-box { max-height: 620px; }
    .mono-sheet-card, .ugc-sheet-panel { max-height: 70%; }
    .story-album-list { max-height: 400px; }
    .sr-final-story { max-height: 200px; }
    /* 特效层挂在未缩放的 body 上，平板上稍放大保持视觉协调 */
    .fx-coin { font-size: 30px !important; }
    .fx-float-text { font-size: 30px !important; }
    .toast { font-size: 16px; }
}
/* 电脑/iPad 横屏（zoom 变温和后）：内容条适度加宽，减少两侧空旷感 */
@media (min-width: 1100px) {
    .rx-wrap, .rx-cards, .rx-match-grid, .sf-list, .sf-plots { max-width: 560px; }
    .rx-wrap .rx-match-grid, .rx-cards { max-width: 560px; }
}

/* ============================================================
   Phase 54: 全新开始门面页（打开 app 的第一眼）
   大标题 + 吉祥物 + 巨大开始按钮；登录收进右上角；
   本页不参与全局 zoom（自己就是全响应式：手机单列 / 平板 / 电脑 1200px 居中）
   ============================================================ */
#authScreen {
    zoom: 1 !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: linear-gradient(180deg, #8ED3F8 0%, #C9EBFC 58%, #EAF9EF 58.2%, #D9F2C8 100%);
    overflow: hidden;
    align-items: stretch !important;   /* 覆盖旧规则的 center：场景层必须拉满宽度 */
    justify-content: flex-start !important;
    padding: 0 !important;             /* 覆盖旧规则的 20px 内边距 */
}
.start-scene {
    position: relative; flex: 1; display: flex; flex-direction: column; min-height: 100%;
    background-image: url('/static/img/hero-farm.svg');
    background-size: cover;               /* 任何屏幕比例都铺满，水平方向居中裁切 */
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #C9EBFC;
}
.start-topbar, .start-hero, .start-foot {
    position: relative; z-index: 3; width: 100%;
    max-width: 1200px; margin-left: auto; margin-right: auto;
}
.start-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: clamp(14px, 2.5vh, 24px) clamp(16px, 4vw, 40px);
}
.start-logo {
    font-weight: 900; font-size: clamp(18px, 2.4vw, 26px); color: #1B5E20;
    text-shadow: 0 2px 0 rgba(255, 255, 255, .65);
}
.start-auth-links { display: flex; gap: 10px; }
.start-link {
    border: 2px solid #2E7D32; background: rgba(255, 255, 255, .88);
    color: #2E7D32; font-weight: 800; border-radius: 999px;
    padding: 8px clamp(16px, 2.4vw, 24px); font-size: clamp(13px, 1.4vw, 15px);
    cursor: pointer; transition: transform .12s, background .2s;
}
.start-link:active { transform: scale(.94); }
.start-link-solid { background: #43A047; border-color: #2E7D32; color: #fff; }
.start-hero {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 4px 20px clamp(90px, 16vh, 200px);
}
.start-mascot {
    position: relative; font-size: clamp(58px, 9vw, 104px); line-height: 1;
    animation: startBounce 2.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(27, 94, 32, .25));
}
@keyframes startBounce { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.start-bubble {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: #fff; color: #33691E; font-size: clamp(12px, 1.6vw, 16px); font-weight: 700;
    border-radius: 999px; padding: 6px 14px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}
.start-bubble::after {
    content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff; border-radius: 2px;
}
.start-title {
    font-size: clamp(36px, 7vw, 72px); font-weight: 900; line-height: 1.14;
    color: #1B5E20; margin: clamp(14px, 2.6vh, 26px) 0 0;
    text-shadow: 0 3px 0 rgba(255, 255, 255, .8), 0 10px 24px rgba(27, 94, 32, .18);
}
.start-title em { font-style: normal; color: #FF8F00; }
.start-sub {
    font-size: clamp(15px, 2vw, 20px); color: #33691E; font-weight: 700;
    margin: clamp(10px, 1.8vh, 18px) 0 clamp(18px, 3.4vh, 34px);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .6);
}
.btn-start {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: clamp(220px, 30vw, 340px); min-height: clamp(64px, 9vh, 84px);
    border: none; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-weight: 900; letter-spacing: 3px;
    font-size: clamp(22px, 3vw, 32px); color: #fff;
    background: linear-gradient(180deg, #66BB6A 0%, #388E3C 100%);
    box-shadow: 0 8px 0 #1B5E20, 0 20px 44px rgba(27, 94, 32, .35);
    animation: startPulse 2.2s ease-in-out infinite;
    transition: transform .1s, box-shadow .1s;
}
.btn-start:active {
    transform: translateY(6px); box-shadow: 0 2px 0 #1B5E20, 0 8px 20px rgba(27, 94, 32, .3);
}
@keyframes startPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.start-foot {
    text-align: center; padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.start-mini {
    background: transparent; border: none; color: #E8F5E9; font-weight: 700;
    font-size: clamp(12px, 1.4vw, 14px); cursor: pointer; opacity: .95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35); padding: 6px 8px;
}
.start-mini:hover { opacity: 1; text-decoration: underline; }
.start-dot { color: #E8F5E9; opacity: .8; }
/* 登录/注册面板：手机=底部上滑面板，平板/电脑=居中悬浮卡 */
.auth-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6000;
    max-width: 460px; margin: 0 auto; background: #fff;
    border-radius: 26px 26px 0 0; padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .28);
    transform: translateY(112%); transition: transform .38s cubic-bezier(.2, .9, .3, 1.08);
}
.auth-panel.open { transform: translateY(0); }
.auth-panel-close {
    position: absolute; top: 12px; right: 14px; width: 34px; height: 34px;
    border-radius: 50%; border: none; background: #F1F3F1; color: #666;
    font-size: 15px; cursor: pointer;
}
@media (min-width: 768px) {
    .auth-panel { bottom: 30px; border-radius: 24px; padding-bottom: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
}
/* 窄屏：顶栏组件收紧，保证 登录/注册 都在屏内 */
@media (max-width: 480px) {
    .start-topbar { padding-left: 12px; padding-right: 12px; }
    .start-logo { font-size: 16px; }
    .start-link { padding: 7px 14px; font-size: 13px; }
    .start-auth-links { gap: 8px; }
}
.action-btn.weak-btn { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); }
.action-btn.weak-btn .action-icon { color: #E65100; }

/* Phase 32: 农场宠物 + 金币雨 + 签到 + 更新提示 */
.farm-pet { position: absolute; bottom: 14px; right: 16px; width: 64px; height: 64px;
    z-index: 5; pointer-events: none; display: none; }
.farm-pet canvas, .farm-pet svg { width: 100% !important; height: 100% !important; }
.farm-pet.on { display: block; animation: petIdle 2.4s ease-in-out infinite; }
@keyframes petIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.farm-pet.jump { animation: petJump .6s ease; }
@keyframes petJump { 0% { transform: translateY(0); } 40% { transform: translateY(-34px) rotate(6deg); } 100% { transform: translateY(0); } }
.farm-pet.clap { animation: petClap .7s ease; }
@keyframes petClap { 0% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-6deg); } 70% { transform: scale(1.28) rotate(6deg); } 100% { transform: scale(1); } }

.fx-coin { position: fixed; top: -40px; z-index: 10070; animation: coinFly 1.2s ease-out forwards;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); pointer-events: none; }
@keyframes coinFly { 0% { transform: translate(0,0) rotate(0); opacity: 1; }
    100% { transform: translate(calc(var(--dx,0)), 78vh) rotate(360deg); opacity: 0; } }

/* 签到翻牌 */
#checkinModal { position: fixed; inset: 0; z-index: 10080; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center; padding: 20px; }
.ci-box { background: linear-gradient(180deg, #FFF8E1, #FFE082); border-radius: 22px;
    padding: 26px 20px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 14px 44px rgba(0,0,0,.3); }
.ci-title { font-size: 21px; font-weight: 900; color: #6B4E00; margin-bottom: 4px; }
.ci-sub { font-size: 13px; color: #8D6E63; font-weight: 700; margin-bottom: 14px; }
.ci-cards { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
.ci-card { flex: 1; aspect-ratio: 3/4; background: linear-gradient(145deg, #fff, #FFF3C4);
    border: 2.5px solid #FFC93C; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; cursor: pointer; transition: transform .15s; font-family: inherit; color: #B08900; font-weight: 900; }
.ci-card:active { transform: scale(.9); }
.ci-card.picked { cursor: default; }
.ci-card.picked span { animation: ciPop .45s ease; }
@keyframes ciPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.ci-card.locked { opacity: .5; }
.ci-result { font-size: 16px; font-weight: 900; color: #E65100; min-height: 46px; }
.ci-close { border: none; padding: 10px 0; width: 100%; margin-top: 4px; }

/* 更新提示条 */
#updateToast { position: fixed; top: 0; left: 0; right: 0; z-index: 10100;
    background: linear-gradient(90deg, #4B9E5E, #66BB6A); color: #fff; text-align: center;
    padding: 11px 12px; font-size: 14px; font-weight: 800; display: none;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#updateToast b { text-decoration: underline; cursor: pointer; margin-left: 6px; }

/* 农场儿歌 */
.co-chant {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB); border: 1.5px solid #90CAF9;
    border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
    font-family: inherit; touch-action: manipulation; text-align: left;
}
.co-chant.done { opacity: .68; }
.co-chant:active { transform: scale(.97); }
.co-chant-icon { font-size: 26px; }
.co-chant-title { flex: 1; font-weight: 800; font-size: 14px; color: #1565C0; }
.co-chant-tag { font-size: 11.5px; font-weight: 800; color: #fff; background: #5B8DEF;
    border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.co-chant.done .co-chant-tag { background: #78909C; }
.co-chant-player { width: 100%; }
.co-chant-head { display: flex; align-items: center; justify-content: space-between;
    font-weight: 900; font-size: 15px; color: #1565C0; margin-bottom: 8px; }
.co-chant-back { border: none; background: #E3F2FD; color: #1565C0; font-weight: 800;
    font-size: 12.5px; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-family: inherit; }
.co-chant-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.co-chant-line { display: flex; align-items: center; gap: 10px; background: #F5F9FF;
    border-radius: 12px; padding: 8px 10px; border: 1.5px solid transparent; }
.co-chant-line.singing { border-color: #5B8DEF; background: #E3F2FD; }
.co-chant-play { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; border: none;
    background: #5B8DEF; color: #fff; font-size: 13px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.co-line-en { font-weight: 800; font-size: 13.5px; color: #1F2329; }
.co-line-cn { font-size: 12px; color: #646A73; }

/* G1 小鸡开口跑 */
.cr-wrap { flex: 1; display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #FFF8E1 0%, #FFF 100%); overflow-y: auto; }
.cr-hud { display: flex; justify-content: space-between; background: rgba(255,255,255,.9);
    border-radius: 12px; padding: 8px 14px; font-weight: 800; font-size: 15px; }
.cr-lane { position: relative; height: 170px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, #B3E5FC 0%, #E1F5FE 45%, #C5E1A5 46%, #AED581 100%); }
.cr-sky { position: absolute; top: 6px; width: 100%; text-align: center; font-size: 18px; }
.cr-ground { position: absolute; bottom: 0; width: 200%; height: 34px;
    background: repeating-linear-gradient(90deg, #8BC34A 0 40px, #9CCC65 40px 80px); }
.cr-lane.running .cr-ground { animation: crScroll .5s linear infinite; }
@keyframes crScroll { from { transform: translateX(0); } to { transform: translateX(-80px); } }
.cr-chick { position: absolute; bottom: 26px; left: 20%; font-size: 46px; line-height: 1; }
.cr-chick.cr-jump { animation: crJump .55s ease; }
@keyframes crJump { 0% { transform: translateY(0); } 45% { transform: translateY(-58px) rotate(-8deg); } 100% { transform: translateY(0); } }
.cr-obstacle { position: absolute; bottom: 30px; left: 100%; transition: left 8s linear; }
.cr-obstacle.cr-passed { transition: left .5s ease; }
.cr-sign { width: 62px; height: 62px; background: #FFF3E0; border: 3px solid #8D6E63;
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; box-shadow: 0 4px 8px rgba(0,0,0,.15); }
.cr-prompt { background: #fff; border-radius: 16px; padding: 12px; text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.cr-word { font-size: 24px; font-weight: 900; color: #E65100; }
.cr-cn { font-size: 13px; color: #646A73; font-weight: 700; }
.cr-ctrl { display: flex; gap: 10px; }
.cr-mic { flex: 1; border: none; background: var(--green, #4B9E5E); color: #fff; font-weight: 900;
    font-size: 16px; border-radius: 999px; padding: 14px; cursor: pointer; min-height: 50px;
    font-family: inherit; touch-action: manipulation; }
.cr-mic:active { transform: scale(.96); }
.cr-mic-off { background: #B0BEC5 !important; font-size: 13px !important; }
.cr-skip { border: 2px solid #EF9A9A; background: #fff; color: #C62828; font-weight: 800;
    font-size: 12.5px; border-radius: 999px; padding: 8px 14px; cursor: pointer;
    font-family: inherit; min-height: 44px; touch-action: manipulation; }
.cr-msg { text-align: center; font-size: 14px; font-weight: 800; color: #E65100; min-height: 20px; }
.cr-finish { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; background: linear-gradient(180deg, #FFF8E1, #FFE082); padding: 30px 20px; text-align: center; }
.cr-finish-emoji { font-size: 60px; }
.cr-finish h2 { color: #6B4E00; }
.cr-finish-sub { color: #7A5A00; font-weight: 700; }
.cr-finish-coins { font-size: 24px; font-weight: 900; color: #E65100; background: #fff;
    border-radius: 999px; padding: 10px 28px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.cr-again { border: none; }
.cr-exit { border: none; background: transparent; color: #6B4E00; font-weight: 800; font-size: 15px;
    cursor: pointer; padding: 10px; min-height: 44px; }

/* 图鉴 */
#collectionModal { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.col-box { background: #F7F9F5; border-radius: 20px; width: 100%; max-width: 480px;
    max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.col-head { display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 6px; }
.col-head h2 { font-size: 20px; font-weight: 900; color: #2E7D32; }
.col-close { border: none; background: #E0E0E0; color: #555; width: 34px; height: 34px;
    border-radius: 50%; font-size: 15px; cursor: pointer; }
.col-progress { padding: 0 18px 10px; font-size: 14px; font-weight: 800; color: #2E7D32; }
.col-bar { height: 10px; background: #E0E0E0; border-radius: 999px; margin-top: 6px; overflow: hidden; }
.col-bar-fill { height: 100%; background: linear-gradient(90deg, #66BB6A, #9CCC65); border-radius: 999px; }
.col-body { overflow-y: auto; padding: 6px 18px 20px; }
.col-loading { text-align: center; color: #646A73; padding: 20px; }
.col-row-title { font-size: 14px; font-weight: 900; color: #4B9E5E; margin: 12px 0 8px; }
.col-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.col-item { background: #fff; border-radius: 14px; padding: 10px 4px; text-align: center;
    border: 1.5px solid #E4EFE6; }
.col-item.got { border-color: #A5D6A7; background: #F1F8E9; }
.col-item.locked { opacity: .6; filter: grayscale(.4); }
.col-icon { font-size: 28px; display: block; }
.col-name { display: block; font-size: 11px; font-weight: 800; color: #1F2329; margin-top: 2px; }
.col-need { display: block; font-size: 10px; color: #9E9E9E; font-weight: 700; }

/* Phase 31: 故事详情阅读页 */
.story-detail { width: 100%; text-align: left; }
.story-detail-img { width: 100%; border-radius: 14px; margin-bottom: 10px; display: block; }
.story-detail-title { font-size: 17px; font-weight: 900; color: #4B9E5E; margin: 4px 0 8px; }
.story-detail-lines { background: #FFFDF5; border: 1.5px solid #FFE082; border-radius: 14px; padding: 12px 14px; }
.story-detail-lines p { font-size: 14px; line-height: 1.65; color: #4E342E; margin-bottom: 8px; font-weight: 600; }
.story-detail-lines p:last-child { margin-bottom: 0; }
.co-skin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
.co-skin {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start; cursor: pointer;
    border: 2px solid #D3C4F5; background: #fff; border-radius: 12px; padding: 8px 10px;
    font-family: inherit; touch-action: manipulation;
}
[data-theme="dark"] .co-skin { background: #322a44; border-color: #584a78; }
.co-skin span:first-child { font-size: 12px; font-weight: 900; color: #4A2E8E; }
[data-theme="dark"] .co-skin span:first-child { color: #D1C4E9; }
.co-skin-lv { font-size: 9.5px; font-weight: 700; color: #7E57C2; }
.co-skin.locked { opacity: .55; }
.co-voice-note { font-size: 13px; font-weight: 700; color: #7E57C2; margin: 0 0 8px; line-height: 1.6; }
.co-voice { background: linear-gradient(175deg, #F3E8FF 0%, #EDE1FA 100%); }

/* Phase 21b: 语音房 */
.vr-note { font-size: 12.5px; font-weight: 700; color: #7E57C2; margin: 0 0 10px; }
.vr-join-row { display: flex; gap: 8px; }
.vr-status { min-height: 18px; font-size: 12.5px; font-weight: 800; color: #5E35B1; margin-top: 8px; }
.vr-room-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.vr-room-code { font-size: 14px; font-weight: 900; color: #4A2E8E; }
.vr-count { font-size: 11px; font-weight: 800; color: #fff; background: #7E57C2; border-radius: 999px; padding: 3px 10px; }
.vr-me { font-size: 13.5px; font-weight: 900; color: #311B92; background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
[data-theme="dark"] .vr-me { background: #3a3350; color: #E8DAFF; }
.vr-peers { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.vr-peer {
    font-size: 13px; font-weight: 800; color: #4A2E8E; background: #fff; border-radius: 10px;
    padding: 8px 12px; display: flex; align-items: center; gap: 8px;
}
[data-theme="dark"] .vr-peer { background: #3a3350; color: #D1C4E9; }
.vr-peer-dot { width: 9px; height: 9px; border-radius: 50%; background: #FFB300; flex-shrink: 0; }
.vr-btn-row { display: flex; gap: 10px; }
.vr-btn {
    flex: 1; border: none; cursor: pointer; font-family: inherit; touch-action: manipulation;
    font-size: 14px; font-weight: 900; color: #fff; border-radius: 999px; padding: 12px; min-height: 48px;
}
.vr-btn.mute { background: linear-gradient(135deg, #66BB6A, #2E7D32); box-shadow: 0 3px 0 #1B5E20; }
.vr-btn.mute.muted { background: linear-gradient(135deg, #EF9A9A, #E53935); box-shadow: 0 3px 0 #B71C1C; }
.vr-btn.leave { background: linear-gradient(135deg, #90A4AE, #546E7A); box-shadow: 0 3px 0 #37474F; }

/* ============================================================
   Phase 19: 打字侠 Typing Hero
   ============================================================ */
.pg-card-typing { background: linear-gradient(135deg, #26C6DA, #00838F); }

.th-wrap {
    min-height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); gap: 12px;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #E8F7FA 0%, #D2EFF5 45%, #BFE7F0 100%);
    box-sizing: border-box;
}
[data-theme="dark"] .th-wrap { background: linear-gradient(165deg, #12262b 0%, #0d1c20 100%); }
.th-hero { text-align: center; }
.th-hero-title { font-size: 30px; font-weight: 900; color: #006064; }
.th-hero-sub { font-size: 13px; font-weight: 700; color: #00838F; margin-top: 4px; }
.th-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; }
.th-level-card {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: linear-gradient(175deg, #FFFFFF 0%, #E8F7FA 100%);
    border: 3px solid #80DEEA; border-radius: 20px; padding: 14px 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,131,143,.15); transition: transform .15s;
    font-family: inherit; touch-action: manipulation;
}
.th-level-card:active { transform: scale(.95); }
.th-level-card.locked { opacity: .55; cursor: default; background: #ECEFF1; border-color: #B0BEC5; }
.th-lv-ico { font-size: 32px; line-height: 1; }
.th-lv-name { font-size: 14px; font-weight: 900; color: #006064; }
.th-lv-desc { font-size: 10.5px; font-weight: 700; color: #00838F; }
.th-lb-btn {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #26C6DA, #00838F); color: #fff;
    font-size: 15px; font-weight: 900; border-radius: 999px; padding: 12px 30px; min-height: 50px;
    box-shadow: 0 4px 0 #006064, 0 6px 14px rgba(0,131,143,.35); touch-action: manipulation;
}
.th-foot { font-size: 12px; font-weight: 700; color: #00838F; }

/* board */
.th-board {
    width: 100%; max-width: 440px; background: linear-gradient(175deg, #FFFFFF 0%, #E8F7FA 100%);
    border-radius: 18px; padding: 14px; box-shadow: 0 4px 12px rgba(0,131,143,.14);
    display: flex; flex-direction: column; gap: 6px;
}
.th-board-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 12px; font-size: 14px; }
.th-board-row.me { background: #E0F7FA; outline: 2px solid #26C6DA; }
.thb-rank { min-width: 38px; font-weight: 900; color: #006064; }
.thb-name { flex: 1; font-weight: 800; color: #00838F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thb-wpm { font-weight: 900; color: #006064; }

/* gameplay */
.th-play { gap: 8px; }
.th-hud { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; }
.th-hud-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.th-hud-level { font-size: 15px; font-weight: 900; color: #006064; }
.th-hud-kills { font-size: 12px; font-weight: 800; color: #00838F; }
.th-hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.th-hud-wpm { font-size: 13px; font-weight: 900; color: #006064; background: #fff; border-radius: 999px; padding: 4px 10px;
    box-shadow: 0 2px 6px rgba(0,131,143,.2); }
.th-hud-time { font-size: 12px; font-weight: 800; color: #00838F; }
.th-combo-bar { display: flex; gap: 8px; align-items: center; }
.th-combo { font-size: 12.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #FF8A80, #E55656);
    border-radius: 999px; padding: 6px 12px; box-shadow: 0 2px 6px rgba(229,86,86,.35); }
.th-rage { font-size: 12.5px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #FF7043, #F4511E);
    border-radius: 999px; padding: 6px 12px; animation: pgPulse .8s ease infinite;
    box-shadow: 0 2px 8px rgba(244,81,30,.45); }

/* falling sky */
.th-sky {
    position: relative; width: 100%; max-width: 460px; flex: 1; min-height: 260px;
    background: linear-gradient(180deg, #FFFFFF 0%, #E0F5F9 100%);
    border-radius: 18px; overflow: hidden;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), 0 5px 14px rgba(0,131,143,.16);
}
.th-sky.miss { animation: pgShake .3s ease; }
.th-drop {
    position: absolute; transform: translateX(-50%);
    background: linear-gradient(180deg, #FFFFFF 0%, #DFF3F7 100%);
    border: 2.5px solid #4DD0E1; border-radius: 14px; padding: 8px 14px;
    font-size: 22px; font-weight: 900; color: #006064; white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,131,143,.2); z-index: 2;
}
.th-drop.word, .th-drop.sentence { font-size: 17px; border-radius: 999px; }
.th-drop.sentence { font-size: 14px; }
.th-drop.active { border-color: #FFB300; box-shadow: 0 4px 12px rgba(255,179,0,.4); }
.th-drop.killed { animation: thKill .35s ease forwards; pointer-events: none; }
@keyframes thKill { to { transform: translateX(-50%) scale(1.7); opacity: 0; } }
.th-drop-txt i { font-style: normal; color: #90A4AE; }
.th-drop-txt i.typed { color: #006064; }
.th-typebuf { min-height: 22px; font-size: 14px; font-weight: 800; color: #00838F; letter-spacing: 1px; }

/* virtual keyboard */
.th-vk { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 5px; }
.th-vk-row { display: flex; gap: 4px; justify-content: center; }
.th-key {
    flex: 1; max-width: 42px; min-height: 44px; border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(180deg, #FFFFFF 0%, #DFF3F7 100%); color: #006064;
    font-size: 15px; font-weight: 900; border-radius: 10px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -3px 0 rgba(0,131,143,.3), 0 2px 4px rgba(0,0,0,.12);
    transition: transform .08s; touch-action: manipulation;
}
.th-key:active { transform: scale(.9); background: #B2EBF2; }
[data-theme="dark"] .th-key { background: linear-gradient(180deg, #1e3a40 0%, #16292e 100%); color: #80DEEA; }

/* ============================================================
   Phase 20: 农场社交化（Social Farm）
   ============================================================ */
.fert-banner {
    margin: 4px 12px; padding: 8px 12px; text-align: center;
    background: linear-gradient(135deg, #FFF8E1, #FFECB3); color: #B9770E;
    border: 2px solid #FFB300; border-radius: 12px; font-size: 12.5px; font-weight: 800;
}
.sf-wrap {
    min-height: 100%; display: flex; flex-direction: column; align-items: center;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); gap: 12px;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 34%),
        linear-gradient(165deg, #FDF4E0 0%, #FBEBD2 45%, #F8E4C8 100%);
    box-sizing: border-box;
}
[data-theme="dark"] .sf-wrap { background: linear-gradient(165deg, #2a2418 0%, #231d12 100%); }
.sf-loading { color: #A1887F; font-weight: 700; }
.sf-empty { color: #A1887F; font-size: 13px; text-align: center; line-height: 1.7; }
.sf-top { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 460px; }
.sf-steal-left {
    font-size: 12.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #8BC34A, #4CAF50);
    border-radius: 999px; padding: 7px 14px; box-shadow: 0 2px 6px rgba(76,175,80,.35);
}
.sf-add-row { display: flex; gap: 8px; width: 100%; max-width: 460px; }
.sf-input {
    flex: 1; min-width: 0; border: 2px solid #FFE0A8; border-radius: 14px; padding: 12px 14px;
    font-size: 15px; color: #6D4C41; background: #fff; min-height: 48px;
    box-sizing: border-box; outline: none;
}
.sf-input:focus { border-color: #FFA726; }
.sf-add-btn {
    border: none; cursor: pointer; font-family: inherit; flex-shrink: 0;
    background: linear-gradient(135deg, #FFD54F, #FFA726); color: #fff;
    font-size: 14px; font-weight: 900; border-radius: 14px; padding: 0 18px; min-width: 84px;
    box-shadow: 0 3px 0 #E58E2E; touch-action: manipulation;
}
.sf-add-btn:active { transform: translateY(2px); }
.sf-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 460px; }
.sf-friend-card {
    background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 3px solid #FFE0A8; border-radius: 18px; padding: 12px;
    box-shadow: 0 4px 12px rgba(150,105,50,.14); display: flex; flex-direction: column; gap: 10px;
}
.sf-friend-head { display: flex; align-items: center; gap: 10px; }
.sf-avatar {
    width: 46px; height: 46px; min-width: 46px; border-radius: 50%;
    background: linear-gradient(160deg, #FFE0B2, #FFCC80); display: flex; align-items: center;
    justify-content: center; font-size: 24px;
}
.sf-friend-info { display: flex; flex-direction: column; }
.sf-friend-info b { font-size: 15.5px; color: #6D4C41; }
.sf-friend-info span { font-size: 11.5px; color: #A1887F; margin-top: 2px; }
.sf-friend-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sf-act {
    flex: 1; min-width: 70px; border: none; cursor: pointer; font-family: inherit;
    font-size: 12px; font-weight: 800; border-radius: 999px; padding: 9px 8px; min-height: 36px;
    touch-action: manipulation; transition: transform .1s;
}
.sf-act:active { transform: scale(.94); }
.sf-act:disabled { opacity: .5; cursor: default; }
.sf-act.water { background: linear-gradient(135deg, #81D4FA, #4FC3F7); color: #fff; box-shadow: 0 2px 0 #29A3DD; }
.sf-act.steal { background: linear-gradient(135deg, #A5D6A7, #66BB6A); color: #fff; box-shadow: 0 2px 0 #2E7D32; }
.sf-act.visit { background: linear-gradient(135deg, #FFD54F, #FFA726); color: #fff; box-shadow: 0 2px 0 #E58E2E; }
.sf-act.msg { background: linear-gradient(135deg, #B9A8FF, #9766E5); color: #fff; box-shadow: 0 2px 0 #7E4FCF; }
.sf-expand-btn {
    width: 100%; max-width: 460px; border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #8BC34A, #558B2F); color: #fff;
    font-size: 15px; font-weight: 900; border-radius: 16px; padding: 14px; min-height: 52px;
    box-shadow: 0 4px 0 #33691E; touch-action: manipulation;
}
.sf-expand-btn:active { transform: translateY(2px); }

/* 拜访视图 */
.sf-visit-actions { display: flex; gap: 10px; width: 100%; max-width: 460px; }
.sf-visit-actions .sf-act { flex: 1; padding: 12px 8px; font-size: 13px; min-height: 44px; }
.sf-owner { font-size: 15px; font-weight: 900; color: #6D4C41; }
.sf-plots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px; }
.sf-plot {
    background: linear-gradient(175deg, #FFF9E8 0%, #FCEBC8 100%); border-radius: 14px; padding: 10px;
    border: 2px solid #FFE0A8; box-shadow: 0 3px 8px rgba(150,105,50,.12);
}
.sf-plot.ripe { border-color: #43A047; background: linear-gradient(175deg, #FFF8E1, #FFECB3); }
.sf-plot-slot { font-size: 11px; font-weight: 800; color: #A1887F; margin-bottom: 4px; }
.sf-plot-word { font-size: 12.5px; font-weight: 700; color: #6D4C41; margin: 3px 0; }
.sf-plot-empty { font-size: 12px; color: #CBB79A; }
.sf-gbar { height: 5px; background: #EFE2C8; border-radius: 999px; overflow: hidden; margin-top: 3px; }
.sf-gfill { height: 100%; background: linear-gradient(90deg, #66BB6A, #2E7D32); border-radius: 999px; }
.sf-msg-box {
    width: 100%; max-width: 460px; background: linear-gradient(175deg, #FFFDF6 0%, #FFF4DE 100%);
    border: 3px solid #FFE0A8; border-radius: 18px; padding: 14px; box-shadow: 0 4px 12px rgba(150,105,50,.14);
    box-sizing: border-box;
}
.sf-msg-title { font-size: 15px; font-weight: 900; color: #6D4C41; margin-bottom: 8px; }
.sf-msg-list { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
.sf-msg { background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; color: #6D4C41; display: flex; flex-direction: column; }
.sf-msg b { font-size: 11.5px; color: #B9770E; }
.sf-msg span { margin: 2px 0; }
.sf-msg i { font-size: 10px; color: #CBB79A; font-style: normal; }
.sf-msg-row { display: flex; gap: 8px; }
[data-theme="dark"] .sf-friend-card, [data-theme="dark"] .sf-plot, [data-theme="dark"] .sf-msg-box { background: linear-gradient(175deg, #3a3020, #322a1a); border-color: #6b5a34; }
[data-theme="dark"] .sf-friend-info b, [data-theme="dark"] .sf-owner, [data-theme="dark"] .sf-msg-title, [data-theme="dark"] .sf-plot-word { color: #f0e4c8; }
[data-theme="dark"] .sf-friend-info span, [data-theme="dark"] .sf-plot-slot, [data-theme="dark"] .sf-empty { color: #b8a888; }
[data-theme="dark"] .sf-input { background: #3a3020; color: #f0e4c8; border-color: #6b5a34; }
[data-theme="dark"] .sf-msg { background: #2a2214; color: #e8d8b8; }

/* =================== Phase 62: 全局称号徽章 + 成就墙 =================== */
/* 顶栏徽章：跟在 Lv. 后面，所有页面可见（kid 档 JS 隐藏） */
.player-title-badge {
    display: inline-flex; align-items: center; max-width: 150px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: linear-gradient(135deg, #FFF8E1, #FFE082);
    border: 1.5px solid #FFB300; border-radius: 999px;
    color: #5D4037; font-size: 10.5px; font-weight: 900;
    padding: 2px 8px; line-height: 1.4;
    box-shadow: 0 1px 4px rgba(255,179,0,.35);
}
:root[data-age="teen"] .player-title-badge {
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    border-color: #1E88E5; color: #0D47A1; box-shadow: 0 1px 4px rgba(30,136,229,.35);
}
:root[data-age="adult"] .player-title-badge {
    background: #EEF2FF; border-color: #93C5FD; color: #1E3A8A; box-shadow: none; font-weight: 700;
}
[data-theme="dark"] .player-title-badge {
    background: rgba(255,179,0,.18); border-color: #FFB300; color: #FFE082; box-shadow: none;
}
[data-theme="dark"] :root[data-age="teen"] .player-title-badge,
:root[data-age="teen"][data-theme="dark"] .player-title-badge {
    background: rgba(30,136,229,.22); border-color: #64B5F6; color: #90CAF9;
}
[data-theme="dark"] :root[data-age="adult"] .player-title-badge,
:root[data-age="adult"][data-theme="dark"] .player-title-badge {
    background: rgba(59,130,246,.15); border-color: #3B82F6; color: #93C5FD;
}

/* 成就墙（学习中心底部，teen/adult 档） */
.achieve-wall {
    max-width: 480px; width: 100%; margin: 14px auto 0;
    background: var(--bg-card, #fff); border-radius: var(--radius-lg, 18px);
    border: 2px solid var(--border-color, #E8EFE6);
    padding: 14px; box-shadow: var(--shadow-card, 0 2px 10px rgba(0,0,0,.06));
    box-sizing: border-box;
}
.aw-loading { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-mid, #9E9E9E); padding: 14px 0; }
.aw-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.aw-header h3 { margin: 0; font-size: 16.5px; font-weight: 900; color: var(--text-primary, #1F2329); }
.aw-header p { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--text-mid, #9E9E9E); }
.aw-count {
    flex-shrink: 0; font-size: 14px; font-weight: 900; color: #fff;
    background: linear-gradient(135deg, #FFB300, #FB8C00);
    border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 6px rgba(251,140,0,.35);
}
.aw-count i { font-style: normal; opacity: .75; font-weight: 700; padding: 0 2px; }
:root[data-age="teen"] .aw-count { background: linear-gradient(135deg, #1E88E5, #1565C0); box-shadow: 0 2px 6px rgba(21,101,192,.35); }
:root[data-age="adult"] .aw-count { background: #3B82F6; box-shadow: none; }
.aw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aw-card {
    display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
    border-radius: 14px; padding: 10px 12px; border: 2px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease;
}
.aw-card.unlocked {
    background: linear-gradient(145deg, #FFF8E1, #FFECB3);
    border-color: #FFC107; box-shadow: 0 2px 8px rgba(255,193,7,.28);
}
.aw-card.unlocked:hover { transform: translateY(-3px); box-shadow: 0 5px 14px rgba(255,193,7,.4); }
:root[data-age="teen"] .aw-card.unlocked {
    background: linear-gradient(145deg, #E3F2FD, #BBDEFB); border-color: #64B5F6;
    box-shadow: 0 2px 8px rgba(100,181,246,.3);
}
:root[data-age="adult"] .aw-card.unlocked {
    background: #EFF6FF; border-color: #93C5FD; box-shadow: none;
}
.aw-card.locked {
    background: var(--bg-mid, #F5F5F5); border-color: transparent; opacity: .82;
}
.aw-card.locked .aw-name { color: var(--text-mid, #9E9E9E); filter: grayscale(1); }
.aw-name { font-size: 13.5px; font-weight: 900; color: var(--text-primary, #1F2329); }
.aw-desc { font-size: 10.5px; font-weight: 600; color: var(--text-mid, #9E9E9E); }
.aw-state {
    font-size: 10.5px; font-weight: 900; color: #E65100; margin-top: 4px;
}
:root[data-age="teen"] .aw-state { color: #1565C0; }
:root[data-age="adult"] .aw-state { color: #1E3A8A; }
.aw-progress { font-size: 10.5px; font-weight: 800; color: var(--text-mid, #9E9E9E); margin-top: 4px; }
.aw-bar {
    width: 100%; height: 5px; border-radius: 999px; overflow: hidden;
    background: rgba(0,0,0,.08); margin-top: 3px;
}
.aw-bar i { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #B0BEC5, #90A4AE); transition: width .5s ease; }
:root[data-age="teen"] .aw-bar i { background: linear-gradient(90deg, #64B5F6, #1E88E5); }
:root[data-age="adult"] .aw-bar i { background: linear-gradient(90deg, #93C5FD, #3B82F6); }
[data-theme="dark"] .achieve-wall { background: #2a2f2a; border-color: #3a4438; }
[data-theme="dark"] .aw-card.locked { background: #232823; }
[data-theme="dark"] .aw-header h3 { color: #ECEFF1; }
[data-theme="dark"] .aw-bar { background: rgba(255,255,255,.1); }
@media (max-width: 380px) { .aw-grid { grid-template-columns: 1fr; } }

/* =================== Phase 66: 五维度竞技排行榜 =================== */
.aw-lb-btn {
    border: none; cursor: pointer; font-family: inherit; flex-shrink: 0;
    background: linear-gradient(135deg, #FF8A65, #F4511E); color: #fff;
    font-size: 10.5px; font-weight: 900; border-radius: 999px;
    padding: 4px 10px; margin-right: 6px;
    box-shadow: 0 2px 6px rgba(244, 81, 30, .35);
}
:root[data-age="teen"] .aw-lb-btn { background: linear-gradient(135deg, #26C6DA, #00838F); box-shadow: 0 2px 6px rgba(0, 131, 143, .35); }
:root[data-age="adult"] .aw-lb-btn { background: #3B82F6; box-shadow: none; }
.aw-lb-btn:active { transform: scale(.93); }

.lb-tabs {
    display: flex; gap: 6px; overflow-x: auto; padding: 4px 12px 10px;
    max-width: 480px; margin: 0 auto; scrollbar-width: none;
}
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tab {
    flex-shrink: 0; border: 2px solid var(--border-color, #E8EFE6);
    background: var(--bg-card, #fff); color: var(--text-mid, #646A73);
    border-radius: 999px; padding: 6px 14px; font-family: inherit;
    font-size: 12.5px; font-weight: 800; cursor: pointer;
    transition: all .15s ease;
}
.lb-tab.active {
    background: linear-gradient(135deg, #FFB300, #FB8C00);
    border-color: transparent; color: #fff;
    box-shadow: 0 3px 10px rgba(251, 140, 0, .4);
}
:root[data-age="teen"] .lb-tab.active {
    background: linear-gradient(135deg, #26C6DA, #00838F);
    box-shadow: 0 3px 10px rgba(0, 131, 143, .4);
}
:root[data-age="adult"] .lb-tab.active { background: #3B82F6; box-shadow: none; }
.lb-tab:active { transform: scale(.94); }

.lb-me {
    display: flex; align-items: center; gap: 10px;
    max-width: 480px; margin: 0 auto 8px; padding: 10px 14px;
    background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
    border: 2px solid #FFB300; border-radius: 14px;
}
:root[data-age="teen"] .lb-me { background: linear-gradient(135deg, #E0F7FA, #B2EBF2); border-color: #00ACC1; }
:root[data-age="adult"] .lb-me { background: #EFF6FF; border-color: #3B82F6; }
.lb-me-rank { font-size: 16px; font-weight: 900; color: #E65100; }
:root[data-age="teen"] .lb-me-rank { color: #00838F; }
.lb-me-name { flex: 1; font-size: 13.5px; font-weight: 900; color: var(--text-primary, #1F2329); }
.lb-me-val { font-size: 13px; font-weight: 900; color: var(--text-mid, #646A73); }

.lb-item {
    display: flex; align-items: center; gap: 10px;
    max-width: 480px; margin: 0 auto 8px; padding: 10px 14px;
    background: var(--bg-card, #fff); border: 1.5px solid var(--border-color, #E8EFE6);
    border-radius: 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lb-item.me {
    border: 2px solid #FFB300; background: linear-gradient(135deg, #FFF8E1, #FFECB3);
    box-shadow: 0 3px 10px rgba(255, 179, 0, .3);
}
:root[data-age="teen"] .lb-item.me { border-color: #26C6DA; background: linear-gradient(135deg, #E0F7FA, #B2EBF2); box-shadow: 0 3px 10px rgba(0, 131, 143, .3); }
:root[data-age="adult"] .lb-item.me { border-color: #3B82F6; background: #EFF6FF; box-shadow: none; }
.lb-rank {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 900;
    background: var(--bg-mid, #F0F3F0); color: var(--text-mid, #646A73);
}
.lb-rank.rank-1 { background: linear-gradient(160deg, #FFE082, #FFC107); color: #6B4E00; box-shadow: 0 2px 8px rgba(255, 193, 7, .45); }
.lb-rank.rank-2 { background: linear-gradient(160deg, #E0E0E0, #BDBDBD); color: #424242; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.lb-rank.rank-3 { background: linear-gradient(160deg, #FFCC80, #ED9C4C); color: #5D3A00; box-shadow: 0 2px 6px rgba(237, 156, 76, .4); }
.lb-info { flex: 1; min-width: 0; }
.lb-name { font-size: 13.5px; font-weight: 900; color: var(--text-primary, #1F2329); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-detail { font-size: 10.5px; font-weight: 600; color: var(--text-mid, #9E9E9E); }
.lb-score { font-size: 16px; font-weight: 900; color: #E65100; }
:root[data-age="teen"] .lb-score { color: #00838F; }
:root[data-age="adult"] .lb-score { color: #1E3A8A; }
.lb-score small { font-size: 10px; font-weight: 700; color: var(--text-mid, #9E9E9E); }
[data-theme="dark"] .lb-tab { background: #2a2f2a; border-color: #3a4438; }
[data-theme="dark"] .lb-item { background: #2a2f2a; border-color: #3a4438; }
[data-theme="dark"] .lb-item.me { background: #33402e; }
[data-theme="dark"] .lb-name { color: #ECEFF1; }
[data-theme="dark"] .lb-rank { background: #232823; }

/* =================== Phase 67: 个人资料页（16-18 / 18+） =================== */
.profile-wrap { max-width: 480px; width: 100%; margin: 0 auto; padding: 4px 14px 20px; }
.pf-hero {
    text-align: center; border-radius: 20px; padding: 26px 18px 22px; margin-bottom: 14px;
    position: relative; overflow: hidden;
}
.pf-hero.b1618 {
    background: linear-gradient(165deg, #EFF6FF, #DBEAFE);
    border: 2px solid #93C5FD; box-shadow: 0 6px 22px rgba(59, 130, 246, .18);
}
.pf-hero.b18 {
    background: linear-gradient(165deg, #2B2F3A, #1E2230);
    border: 2px solid #C9A227; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
}
.pf-hero-emoji { font-size: 52px; line-height: 1.1; }
.pf-hero.b1618 .pf-hero-emoji {
    width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFFFFF, #BFDBFE);
    border: 3px solid #93C5FD; display: flex; align-items: center; justify-content: center;
    font-size: 42px;
}
.pf-hero-title { font-size: 22px; font-weight: 900; color: #1E3A8A; margin-bottom: 2px; }
.pf-hero.b18 .pf-hero-title { color: #F5D67B; font-family: serif; }
.pf-hero-name { font-size: 14px; font-weight: 900; color: #1E3A8A; margin-top: 6px; }
.pf-hero.b18 .pf-hero-name { color: #E8DAFF; }
.pf-hero-sub { font-size: 11.5px; font-weight: 700; color: var(--text-mid, #9E9E9E); margin-top: 3px; }
.pf-hero.b18 .pf-hero-sub { color: #9FA8C5; }
.pf-hero-badge {
    display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 900;
    color: #F5D67B; border: 1.5px solid #C9A227; border-radius: 999px; padding: 4px 14px;
    letter-spacing: 1px;
}
.pf-section-title { font-size: 14px; font-weight: 900; color: var(--text-primary, #1F2329); margin: 14px 0 8px; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-stat {
    background: var(--bg-card, #fff); border: 1.5px solid var(--border-color, #E8EFE6);
    border-radius: 14px; padding: 10px 4px; text-align: center;
}
.pf-stat b { display: block; font-size: 15px; font-weight: 900; color: var(--text-primary, #1F2329); }
.pf-stat span { font-size: 10px; font-weight: 600; color: var(--text-mid, #9E9E9E); }
[data-theme="dark"] .pf-stat { background: #2a2f2a; border-color: #3a4438; }
[data-theme="dark"] .pf-stat b { color: #ECEFF1; }

/* 18+ 证书卡 */
.cert-card { margin-bottom: 14px; }
.cert-inner {
    background: linear-gradient(170deg, #FDF8EC, #F7EEDA);
    border: 3px solid #C9A227; border-radius: 10px;
    padding: 16px 14px; text-align: center; position: relative;
    box-shadow: 0 6px 18px rgba(100, 80, 20, .22);
}
.cert-inner::after {
    content: ''; position: absolute; inset: 5px;
    border: 1.5px solid #E3CE8F; border-radius: 6px; pointer-events: none;
}
.cert-org { font-size: 9.5px; font-weight: 700; color: #8D6E63; letter-spacing: 1.5px; }
.cert-title { font-size: 21px; font-weight: 900; color: #5D4037; font-family: serif; letter-spacing: 6px; margin: 4px 0; }
.cert-body { font-size: 11.5px; color: #7A6A50; margin-top: 4px; }
.cert-body b { color: #4E342E; }
.cert-tt { font-size: 19px; font-weight: 900; color: #B8860B; font-family: serif; margin: 5px 0 2px; }
.cert-desc { font-size: 10.5px; color: #8D6E63; margin-bottom: 10px; }
.cert-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cert-no, .cert-date { font-size: 9px; color: #A1887F; font-weight: 700; }
.cert-stamp {
    width: 46px; height: 46px; border-radius: 50%;
    border: 2.5px solid #D32F2F; color: #D32F2F;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; line-height: 1.1;
    transform: rotate(-12deg); opacity: .85; flex-shrink: 0;
}
.cert-save {
    width: 100%; margin-top: 8px; border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #2B2F3A, #1E2230); color: #F5D67B;
    border: 1.5px solid #C9A227; border-radius: 999px;
    font-size: 12px; font-weight: 800; padding: 9px;
}
.cert-save:active { transform: scale(.97); }

/* ---- Phase 62b: 佩戴 + kid 档宠物徽章 ---- */
/* 佩戴中的称号卡：金边高亮 */
.aw-card.worn {
    border-color: #FFB300 !important;
    box-shadow: 0 0 0 2px rgba(255,179,0,.35), 0 3px 10px rgba(255,179,0,.35) !important;
    animation: glowPulse 2.2s ease-in-out infinite;
}
:root[data-age="teen"] .aw-card.worn { border-color: #1E88E5 !important; box-shadow: 0 0 0 2px rgba(30,136,229,.3), 0 3px 10px rgba(30,136,229,.3) !important; }
:root[data-age="adult"] .aw-card.worn { animation: none; box-shadow: 0 0 0 2px rgba(59,130,246,.35) !important; }
.aw-wear-btn {
    margin-top: 4px; border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #FFB300, #FB8C00); color: #fff;
    font-size: 10.5px; font-weight: 900; border-radius: 999px;
    padding: 3px 12px; box-shadow: 0 2px 0 rgba(230,81,0,.4);
}
:root[data-age="teen"] .aw-wear-btn { background: linear-gradient(135deg, #1E88E5, #1565C0); box-shadow: 0 2px 0 rgba(13,71,161,.4); }
:root[data-age="adult"] .aw-wear-btn { background: #3B82F6; box-shadow: none; }
.aw-wear-btn:active { transform: scale(.92); }
/* kid 档宠物徽章：3-5 脖子挂 🌱 圆牌；6-8 挂称号 emoji 小挂件（均无文字） */
.fp-title-badge {
    position: absolute; left: -2px; bottom: 10px; z-index: 6;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(160deg, #FFF8E1, #FFE082);
    border: 2px solid #FFB300; box-shadow: 0 2px 5px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1; pointer-events: none;
    animation: floatBob 2.6s ease-in-out infinite;
}
:root[data-band="b68"] .fp-title-badge {
    left: auto; right: -2px; bottom: 14px;
    background: linear-gradient(160deg, #FFFFFF, #E3F2FD);
    border-color: #64B5F6;
}

/* =================== Phase 63: 农场小镇场景 Hub =================== */
.fh-wrap {
    position: relative; width: 100%; max-width: 720px;
    margin: 0 auto; padding: 0 12px;
}
#farmHubCanvas {
    display: block; width: 100%; height: clamp(330px, 56vh, 470px);
    border-radius: 20px; box-shadow: var(--shadow-float, 0 8px 26px rgba(0,0,0,.14));
    touch-action: manipulation;
}
.fh-hint {
    position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 252, 240, 0.92); color: #8D6E63;
    font-size: 12px; font-weight: 800; padding: 5px 14px;
    border-radius: 999px; pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    animation: floatBob 2.6s ease-in-out infinite;
}
.fh-mini-row {
    display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 16px;
    max-width: 720px; margin: 0 auto; scrollbar-width: none;
}
.fh-mini-row::-webkit-scrollbar { display: none; }
.fh-mini {
    flex-shrink: 0; display: flex; align-items: center; gap: 5px;
    background: var(--bg-card, #fff); border: 1.5px solid #E3C88F;
    border-radius: 999px; padding: 7px 13px; font-family: inherit;
    font-size: 12px; font-weight: 800; color: #6D4C41; cursor: pointer;
    box-shadow: 0 2px 6px rgba(140, 100, 50, 0.14);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fh-mini span { font-size: 15px; }
.fh-mini:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(140, 100, 50, 0.22); }
.fh-mini:active { transform: scale(.94); }
[data-theme="dark"] .fh-mini { background: #3a3f38; border-color: #5a5340; color: #f0e4c8; }

/* Phase 63b: 今日任务 = 右上小圆钮 + 右侧滑出抽屉（绝不常驻遮挡农场） */
.tasks-fab {
    position: absolute; top: 10px; right: 10px; z-index: 7;
    width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid #A67C4E; cursor: pointer; font-family: inherit;
    background: linear-gradient(160deg, #F7E8C8, #EDD5A3);
    box-shadow: 0 3px 10px rgba(60, 40, 20, 0.30);
    font-size: 20px; display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.tasks-fab:active { transform: scale(.9); }
.tf-badge {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    background: #E65100; color: #fff; font-size: 9.5px; font-weight: 900;
    border-radius: 999px; padding: 1px 7px; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.tasks-drawer-mask {
    position: absolute; inset: 0; z-index: 8;
    background: rgba(20, 30, 15, 0.35);
}
.tasks-drawer {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 9;
    width: min(300px, 82%);
    background: linear-gradient(170deg, #FDF6E3, #F3E5C2);
    border-left: 3px solid #A67C4E;
    box-shadow: -6px 0 22px rgba(40, 26, 10, 0.35);
    padding: 14px 12px; overflow-y: auto;
    transform: translateX(105%);
    transition: transform .28s cubic-bezier(.22, .9, .34, 1);
}
.tasks-drawer.open { transform: translateX(0); }
.tasks-drawer .daily-tasks-header { margin-bottom: 12px; cursor: default; }
.tasks-drawer-close {
    border: none; background: #E8D5AC; color: #6D4C41;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 12px; font-weight: 900; cursor: pointer; font-family: inherit;
    flex-shrink: 0;
}
.tasks-drawer-close:active { transform: scale(.9); }
.tasks-drawer .daily-tasks-grid { grid-template-columns: 1fr; }
[data-theme="dark"] .tasks-drawer {
    background: linear-gradient(170deg, #3d3423, #37301f);
    border-left-color: #6b5a34;
}
.daily-tasks-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; gap: 6px; user-select: none;
}
.daily-tasks-header h3 { margin: 0; font-size: 14px; color: #5D4037; flex: 1; }
.daily-tasks-progress {
    font-size: 13px; font-weight: 900; color: #E65100;
    background: #fff; border-radius: 999px; padding: 1px 9px;
}
.daily-tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-theme="dark"] .daily-tasks-header h3 { color: #f0e4c8; }

/* Phase 63b: 农活工具盘（左下角收纳五按钮） */
.tools-fab {
    position: absolute; left: 12px; bottom: 12px; z-index: 7;
    width: 58px; height: 58px; border-radius: 50%;
    border: 3px solid #fff; cursor: pointer; font-family: inherit;
    background: linear-gradient(160deg, #8BC34A, #558B2F);
    box-shadow: 0 4px 14px rgba(40, 70, 20, 0.45);
    font-size: 24px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0;
    transition: transform .15s ease;
}
.tools-fab:active { transform: scale(.9); }
.tools-fab-label {
    font-size: 9px; font-weight: 900; color: #fff; line-height: 1.1;
}
.tools-panel {
    position: absolute; left: 12px; bottom: 78px; z-index: 7;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
    background: rgba(255, 252, 240, 0.96);
    border: 2px solid #A67C4E; border-radius: 16px;
    padding: 12px; box-shadow: 0 6px 20px rgba(40, 26, 10, 0.35);
    width: min(240px, calc(100% - 24px));
    box-sizing: border-box;
    animation: comboPop .25s ease;
}
.tools-panel .action-btn { padding: 10px 4px; }
[data-theme="dark"] .tools-panel { background: rgba(45, 40, 28, 0.97); border-color: #6b5a34; }

/* Phase 63b: 牧场动物 = 网格小卡片 */
.animals-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    padding: 4px 2px 8px;
}
@media (max-width: 420px) { .animals-grid { grid-template-columns: repeat(2, 1fr); } }
.animal-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: linear-gradient(170deg, #FFFDF5, #F7F0DC);
    border: 2px solid #E8D9B0; border-radius: 16px;
    padding: 12px 6px 10px; text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
.animal-card:hover { transform: translateY(-3px); box-shadow: 0 5px 14px rgba(140, 100, 50, 0.22); }
.animal-card.ready {
    border-color: #FFB300;
    box-shadow: 0 0 0 2px rgba(255, 179, 0, .3), 0 3px 10px rgba(255, 179, 0, .3);
    animation: glowPulse 2.2s ease-in-out infinite;
    background: linear-gradient(170deg, #FFF8E1, #FFECB3);
}
.a-level {
    position: absolute; top: 6px; left: 6px; right: auto;
    font-size: 9.5px; font-weight: 900; color: #fff;
    background: #7E57C2; border-radius: 999px; padding: 1px 7px;
}
.a-ready-dot {
    position: absolute; top: 8px; right: 8px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #FFB300; box-shadow: 0 0 6px rgba(255, 179, 0, .8);
    animation: floatBob 1.4s ease-in-out infinite;
}
.animal-card .a-emoji { font-size: 34px; line-height: 1.15; }
.animal-card .a-name { font-size: 12px; font-weight: 800; color: #5D4037; }
.animal-card .animal-timer { font-size: 11px; font-weight: 700; color: #A1887F; }
/* Phase 64: 卡片亲密度 */
.animal-card .a-intimacy {
    font-size: 9.5px; font-weight: 800; color: #E91E63;
    background: rgba(233, 30, 99, 0.08); border-radius: 999px;
    padding: 1px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}

/* =================== Phase 64: 动物互动养成卡 =================== */
.ac-card {
    position: relative; width: min(330px, 88vw);
    background: linear-gradient(175deg, #FFFDF5, #FFF3D6);
    border: 3px solid #FFB300; border-radius: 24px;
    padding: 20px 18px 18px; text-align: center;
    box-shadow: 0 14px 40px rgba(60, 40, 10, 0.35);
    animation: comboPop .3s ease;
}
.ac-close {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: #F0E0B8; color: #8D6E63; font-size: 13px; font-weight: 900;
    cursor: pointer; font-family: inherit;
}
.ac-close:active { transform: scale(.9); }
.ac-head {
    width: 104px; height: 104px; margin: 0 auto 6px;
    background: radial-gradient(circle at 35% 30%, #FFF9E8, #FFE9B8);
    border-radius: 50%; border: 3px solid #FFE082;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
}
.ac-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; }
.ac-name-row b { font-size: 17px; color: #5D4037; }
.ac-lv {
    font-size: 10.5px; font-weight: 900; color: #fff;
    background: #7E57C2; border-radius: 999px; padding: 2px 8px;
}
.ac-tier {
    font-size: 10.5px; font-weight: 900; color: #E91E63;
    background: rgba(233, 30, 99, 0.10); border-radius: 999px; padding: 2px 8px;
}
.ac-intimacy-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ac-heart { font-size: 15px; }
.ac-bar {
    flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
    background: rgba(233, 30, 99, 0.12);
}
.ac-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #FF8A80, #E91E63);
    transition: width .5s ease;
}
.ac-num { font-size: 11.5px; font-weight: 900; color: #E91E63; }
.ac-bonus { font-size: 10.5px; font-weight: 700; color: #E65100; margin-bottom: 14px; }
.ac-actions { display: flex; gap: 10px; }
.ac-btn {
    flex: 1; border: none; cursor: pointer; font-family: inherit;
    border-radius: 16px; padding: 11px 6px 9px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 14.5px; font-weight: 900; color: #fff;
    transition: transform .12s ease;
    touch-action: manipulation;
}
.ac-btn:active { transform: scale(.93); }
.ac-btn small { font-size: 9.5px; font-weight: 700; opacity: .9; }
.ac-btn.pet { background: linear-gradient(135deg, #FF8A80, #E53935); box-shadow: 0 3px 0 rgba(183, 28, 28, .45); }
.ac-btn.feed { background: linear-gradient(135deg, #FFB300, #FB8C00); box-shadow: 0 3px 0 rgba(230, 81, 0, .45); }
.ac-btn:disabled { background: #CFD8DC; box-shadow: none; color: #90A4AE; cursor: default; }
[data-theme="dark"] .ac-card { background: linear-gradient(175deg, #3d3524, #38301e); }
[data-theme="dark"] .ac-name-row b { color: #f0e4c8; }

/* =================== Phase 68: 我的牧场三端自适应 =================== */
/* 手机 <768：单列（默认 flex 竖排）—— width:100% 防 Phase 45 的 margin:auto 收缩成内容宽 */
.farm-grid { display: flex; flex-direction: column; width: 100%; }
.farm-main { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.farm-side { display: none; }
/* 平板 768-1200：主区加宽 */
@media (min-width: 768px) {
    .farm-main { max-width: 860px; }
    .animals-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 电脑 ≥1200：三栏布局，左右填满 */
@media (min-width: 1200px) {
    .farm-grid {
        display: grid;
        grid-template-columns: 250px minmax(0, 740px) 250px;
        gap: 16px;
        justify-content: center;
        align-items: start;
        width: 100%; max-width: 1280px; margin: 0 auto;
    }
    .farm-main { max-width: none; }
    .farm-side {
        display: flex; flex-direction: column; gap: 12px;
        position: sticky; top: 70px;
    }
    .animals-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
.fside-card {
    background: var(--bg-card, #fff); border: 2px solid #CBE0BB;
    border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 3px 10px rgba(100, 140, 80, .12);
}
.fside-card h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 900; color: #4E7A3A; }
.fside-tip { font-size: 11.5px; font-weight: 700; color: #7C8F6A; line-height: 1.5; }
.fside-goal-line { font-size: 11.5px; font-weight: 800; color: #556B45; padding: 3px 0; line-height: 1.4; }
.fside-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #556B45; padding: 3px 0; }
.fside-row .frank { color: #E65100; font-weight: 900; min-width: 24px; }
.fside-row .fval { margin-left: auto; color: #E65100; font-weight: 900; }
.fside-avatar-box { display: flex; justify-content: center; padding: 2px 0; }
.fside-avatar-box .avatar-svg { width: 96px !important; height: 104px !important; }
.fside-pet-name { text-align: center; font-size: 12px; font-weight: 800; color: #6D4C41; }
.fside-more {
    width: 100%; margin-top: 8px; border: none; cursor: pointer; font-family: inherit;
    background: #EAF5E0; color: #4E7A3A; border-radius: 10px; padding: 7px;
    font-size: 11.5px; font-weight: 800;
}
.fside-more:active { transform: scale(.96); }
/* 大卡通皮肤立绘（左右各一个） */
.fside-stand {
    min-height: 235px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(180deg, #EAF5E0 0%, #CDE8BE 100%);
    border: 2px solid #CBE0BB;
    display: flex; align-items: flex-end; justify-content: center;
    position: relative;
}
.fside-stand::before {
    content: ''; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 14px; border-radius: 50%;
    background: rgba(90, 130, 70, 0.30);
}
.fside-stand .avatar-svg { width: 190px !important; height: 210px !important; }
.fside-stand-cap {
    text-align: center; font-size: 11.5px; font-weight: 900; color: #4E7A3A;
    padding: 5px 0 0; letter-spacing: 1px;
}
/* 大屏放弃 zoom 放大，改用真响应式布局（避免与三栏冲突） */
@media (min-width: 1100px) { :root { --app-zoom: 1; } }

/* ============================================================
   Phase 68B: 全站大屏适配（≥1024px 平板/电脑）——
   对标主流产品：内容区 1100px 铺满、卡片自动多列、
   窄栏流程页（战斗中/跟读等）内部自有窄宽不受影响。
   ============================================================ */
@media (min-width: 1024px) {
    /* 1) 全站直接子容器上限放开（内部自有窄宽的流程页不受影响） */
    .view > * { max-width: 1100px; }
    /* 2) 已知限宽容器统一放开 */
    .hub-grid, .hub-header, .pg-cards, .pg-header, .pg-subtitle, .pg-mascot,
    .rx-wrap, .rx-cards, .co-wrap, .sf-wrap, .sf-list, .sf-plots,
    .journey-content, .scenario-content, .assignment-list, .exam-list,
    .safety-map, #stageRoad, .battle-select, .bs-wrap, .learn-content,
    .leaderboard-list, .lb-tabs, .lb-me, .achieve-wall, .aw-grid,
    .profile-wrap, .farm-main, .farm-header, .fh-wrap, .fh-mini-row,
    .weather-banner, .fert-banner, .daily-tasks-grid, .story-detail,
    .stats-content, .cr-wrap, .th-wrap, .th-levels, .sf-plots, .lb-item {
        max-width: 1100px !important;
    }
    /* 3) 卡片网格自动多列 */
    .hub-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
    .aw-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important; }
    .rx-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; }
    .pg-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
        gap: 16px !important;
    }
    .leaderboard-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; padding: 8px 12px 20px; }
    .lb-tabs { justify-content: center; }
    .daily-tasks-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
    /* 4) 农场小镇场景画布放大（高度吃满视口，消除底部空白） */
    .fh-wrap { max-width: 1120px !important; }
    .fh-mini-row { max-width: 1120px !important; }
    #farmHubCanvas { height: clamp(480px, calc(100vh - 278px), 700px) !important; }
    /* 5) 农场画布与牧场区加高加宽 */
    .farm-canvas-wrapper { min-height: 470px !important; }
    .farm-main { max-width: 1100px !important; }
    .animals-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important; }
    .farm-grid { max-width: 1140px !important; }
    @media (min-width: 1200px) {
        .farm-grid { grid-template-columns: 260px minmax(0, 1fr) 260px !important; max-width: 1280px !important; }
    }
    /* 6) 成就墙/排行榜标题行撑满 */
    .aw-header { max-width: 1100px !important; }
}
.animal-card .animal-collect-btn {
    border: none; cursor: pointer; font-family: inherit;
    background: linear-gradient(135deg, #FFB300, #FB8C00); color: #fff;
    font-size: 11px; font-weight: 900; border-radius: 999px;
    padding: 4px 12px; box-shadow: 0 2px 0 rgba(230, 81, 0, .4);
}
.animal-card .animal-collect-btn:active { transform: scale(.92); }
[data-theme="dark"] .animal-card {
    background: linear-gradient(170deg, #3a3527, #332e20);
    border-color: #5a5340;
}
[data-theme="dark"] .animal-card .a-name { color: #f0e4c8; }

/* ============ 平台升级 M1/M2：手机号账号体系（学生注册/老师审核制） ============ */
.auth-form select.reg-select,
.auth-form textarea.teacher-textarea {
    padding: 14px 16px; border: 2px solid #E0E0E0; border-radius: var(--radius-sm);
    font-size: 16px; background: #FAFAFA; color: var(--text-main); width: 100%;
    font-family: inherit;
}
.auth-form select.reg-select:focus,
.auth-form textarea.teacher-textarea:focus { border-color: var(--green-mid); outline: none; background: var(--white); }

.login-mode-switch { text-align: center; margin-top: 2px; }
.mode-link {
    background: none; border: none; padding: 4px 8px;
    color: var(--green-mid); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: underline;
}

.sms-row { display: flex; gap: 8px; align-items: stretch; }
.sms-row input { flex: 1; min-width: 0; }
.btn-sms {
    flex-shrink: 0; border: 2px solid var(--green-mid); background: var(--green-bg);
    color: var(--green-dark); border-radius: var(--radius-sm);
    padding: 8px 10px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-sms:disabled { opacity: .55; cursor: not-allowed; }

.sms-test-tip {
    background: #fff8e1; border: 1px dashed #fbc02d; color: #8d6e00;
    font-size: 12px; padding: 6px 8px; border-radius: 8px; line-height: 1.5;
}

.reg-step-tip { font-weight: 700; color: var(--green-dark); font-size: 14px; }

.avatar-pick { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.avatar-pick::after { content: '点击上传头像（选填）'; font-size: 12px; color: var(--text-light); }
.avatar-pick img {
    width: 56px; height: 56px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--green-mid);
}
.avatar-placeholder {
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    border: 2px dashed var(--green-mid); color: var(--green-dark); background: var(--green-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.avatar-placeholder span { display: none; }

.teacher-pending { text-align: center; align-items: center; }
.teacher-pending h3 { margin: 4px 0; font-size: 18px; }
.teacher-pending p { font-size: 13px; color: var(--text-light); line-height: 1.7; }
.pending-icon { font-size: 46px; animation: pendingFloat 1.6s ease-in-out infinite; }
@keyframes pendingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 老师工作台 tab */
.twb-tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.twb-tab {
    flex: 1; border: 2px solid var(--green-mid); background: var(--white);
    color: var(--green-dark); border-radius: 12px; padding: 8px 10px;
    font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s;
}
.twb-tab.active { background: var(--green-mid); color: var(--white); }
.twb-placeholder { display: none; }
.twb-empty {
    text-align: center; padding: 56px 16px;
    background: var(--white); border-radius: var(--radius-md);
    border: 2px dashed #c5e1a5;
}
.twb-empty-icon { font-size: 44px; margin-bottom: 10px; }
.twb-empty h3 { margin: 0 0 6px; }
.twb-empty p { color: var(--text-light); font-size: 13px; }

[data-theme="dark"] .sms-test-tip { background: #3a3417; border-color: #8d7715; color: #e8d98a; }
[data-theme="dark"] .twb-empty { background: var(--card-dark, #2d2d2d); border-color: #4a5d3a; }

/* ============ M3: 大富翁左右大角色台（2.5D 卡通 + 待机动画 + 游戏联动） ============ */
.mono-arena {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(4px, 1.6vw, 26px);
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}
.mono-side {
    flex: 1 1 0;
    min-width: 0;
    max-width: 205px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

/* 角色本体：呼吸 + 眨眼（SVG 内动画） */
.side-actor { width: 100%; display: flex; justify-content: center; transform-origin: 50% 95%; }
/* M3: Canvas 手绘角色（替换 SVG 版）—— canvas 内含木台，object-fit 完整显示不裁剪 */
.side-actor canvas.cv-actor { width: min(100%, 250px); height: auto; max-height: 46vh; object-fit: contain; display: block; }
.side-actor.is-turn canvas.cv-actor { filter: drop-shadow(0 0 16px rgba(255, 205, 60, .85)); }
.side-actor svg { height: clamp(150px, 34vh, 300px); width: auto; animation: monoBreathe 2.8s ease-in-out infinite; transform-origin: 50% 96%; }
@keyframes monoBreathe {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    50% { transform: scaleY(1.035) scaleX(1.02); }
}
.side-actor .actor-eyelid {
    transform-box: fill-box; transform-origin: 50% 50%;
    transform: scaleY(0); animation: monoBlink 3.6s infinite;
}
@keyframes monoBlink {
    0%, 91%, 100% { transform: scaleY(0); }
    95% { transform: scaleY(1); }
}

/* 通用跳/转动画（JS 按游戏事件触发） */
.side-actor.idle-hop { animation: monoIdleHop .48s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes monoIdleHop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-13%) scaleY(1.04); }
    70% { transform: translateY(0) scaleY(.96); }
}
.side-actor.turn-jump { animation: monoTurnJump .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes monoTurnJump {
    0%, 100% { transform: translateY(0) rotate(0); }
    35% { transform: translateY(-16%) rotate(-6deg); }
    70% { transform: translateY(0) rotate(4deg); }
}
.side-actor.cheer { animation: monoCheerJump .55s ease 2; }
@keyframes monoCheerJump {
    0%, 100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-22%) rotate(-7deg) scale(1.05); }
    60% { transform: translateY(0) rotate(5deg); }
}
.side-actor.sad { animation: monoShake .6s ease-in-out 2; transform-origin: 50% 92%; }
@keyframes monoShake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-9deg) translateY(3%); }
    75% { transform: rotate(9deg) translateY(3%); }
}
.side-actor.spin { animation: monoSpin .95s cubic-bezier(.4, .1, .3, 1); }
@keyframes monoSpin {
    0% { transform: translateY(0) rotate(0) scale(1); }
    30% { transform: translateY(-14%) rotate(160deg) scale(1.06); }
    100% { transform: translateY(0) rotate(360deg) scale(1); }
}

/* 当前回合：金光常亮 */
.side-actor.is-turn svg { filter: drop-shadow(0 0 16px rgba(255, 205, 60, .85)); }
.side-actor.is-turn::after {
    content: '👆';
    position: absolute;
    top: -6px;
    font-size: 20px;
    animation: monoFinger 1s ease-in-out infinite alternate;
}
.side-actor { position: relative; }
@keyframes monoFinger { from { transform: translateY(0); } to { transform: translateY(5px); } }

/* 头顶 HUD：名字 + 金币/答对/圈数 + 进度条 */
.side-hud {
    width: 100%; max-width: 172px;
    background: rgba(255, 255, 255, .94);
    border: 2.5px solid #E8D9A8; border-radius: 14px;
    padding: 7px 10px; text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .09);
    transition: box-shadow .25s, border-color .25s;
}
.side-hud.is-turn { border-color: #FFC93A; box-shadow: 0 0 14px rgba(255, 201, 58, .55); }
.hud-name { font-size: 14px; font-weight: 900; color: #5D4037; line-height: 1.2; }
.hud-stats { font-size: 12.5px; font-weight: 800; color: #8D6E63; margin-top: 2px; }
.hud-bar { height: 8px; background: #EFEBDC; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.hud-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFD54F, #FF9800); border-radius: 99px; transition: width .4s; }

/* 木台 */
.side-wood {
    width: 72%; max-width: 148px; height: 22px; margin-top: -5px;
    background: linear-gradient(180deg, #C98A4B, #96602C);
    border-radius: 6px 6px 10px 10px;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 5px 12px rgba(0, 0, 0, .18);
    position: relative;
}
.side-wood i { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .13); }
.side-wood i:first-child { left: 33%; }
.side-wood i:last-child { left: 66%; }

/* 气泡 */
.side-bubble {
    opacity: 0; transform: translateY(8px) scale(.8);
    transition: all .22s ease;
    background: #fff; border: 2.5px solid #FFD54F; color: #6D4C1F;
    font-weight: 800; font-size: 13px; padding: 5px 11px;
    border-radius: 12px; margin-bottom: 3px;
    pointer-events: none; white-space: nowrap;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
    z-index: 6;
}
.side-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.side-bubble::after {
    content: ''; position: absolute; bottom: -8px; left: 50%; margin-left: -6px;
    border: 8px solid transparent; border-bottom: 0; border-top-color: #FFD54F;
}

/* 手机：角色悬浮在棋盘两角，不挤占棋盘 */
@media (max-width: 620px) {
    .mono-arena { position: relative; }
    .mono-side { position: absolute; bottom: 8%; z-index: 5; flex: none; max-width: none; }
    #monoSide0 { left: 0; }
    #monoSide1 { right: 0; }
    .side-actor svg { height: clamp(76px, 15vh, 110px); }
    .side-hud { max-width: 92px; padding: 3px 5px; border-width: 2px; border-radius: 10px; }
    .hud-name { font-size: 11px; }
    .hud-stats { font-size: 9.5px; margin-top: 1px; }
    .hud-bar { height: 5px; margin-top: 3px; }
    .side-wood { max-width: 82px; height: 13px; margin-top: -3px; }
    .side-bubble { font-size: 10px; padding: 3px 7px; }
}
/* 中屏：角色略缩 */
@media (min-width: 621px) and (max-width: 900px) {
    .side-actor svg { height: clamp(120px, 26vh, 200px); }
    .side-hud { max-width: 130px; }
}

/* ============ M3: 游乐场分龄分类 Tab + 三套卡片视觉 ============ */
.pg-band-tabs {
    display: flex; gap: 6px; padding: 0 16px 6px;
    overflow-x: auto; scrollbar-width: none;
}
.pg-band-tabs::-webkit-scrollbar { display: none; }
.pg-band-tab {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    border: 2.5px solid #E0E0E0; background: #fff; border-radius: 14px;
    padding: 7px 13px; cursor: pointer; font-family: inherit;
    transition: all .15s; min-width: 64px;
}
.pg-band-tab .pbt-ico { font-size: 20px; line-height: 1.1; }
.pg-band-tab .pbt-name { font-size: 13px; font-weight: 900; color: #444; }
.pg-band-tab .pbt-age { font-size: 10px; color: #999; font-weight: 700; }
.pg-band-tab.tb-kid.active { border-color: #FF9800; background: #FFF3E0; box-shadow: 0 3px 10px rgba(255, 152, 0, .3); }
.pg-band-tab.tb-kid.active .pbt-name { color: #E65100; }
.pg-band-tab.tb-mid.active { border-color: #42A5F5; background: #E3F2FD; box-shadow: 0 3px 10px rgba(66, 165, 245, .3); }
.pg-band-tab.tb-mid.active .pbt-name { color: #1565C0; }
.pg-band-tab.tb-pro.active { border-color: #475569; background: #1E293B; box-shadow: 0 3px 10px rgba(30, 41, 59, .4); }
.pg-band-tab.tb-pro.active .pbt-name { color: #E2E8F0; }
.pg-band-tab.tb-pro.active .pbt-age { color: #94A3B8; }
.pg-band-sub { padding: 0 18px 10px; font-size: 12.5px; font-weight: 800; color: var(--text-light); }

/* 启蒙/小学低：更大更亮更圆，图标放大 */
.pg-cards.pg-mode-kid .pg-game-card { border-radius: 26px; padding: 14px 16px; }
.pg-cards.pg-mode-kid .pg-card-icon { width: 92px; height: 92px; min-width: 92px; font-size: 44px; }
.pg-cards.pg-mode-kid .pg-card-title { font-size: 21px; }

/* 小学高/初中：冷色调、卡片稍小、排行榜角标 */
.pg-cards.pg-mode-mid .pg-game-card { border-radius: 16px; padding: 10px 14px; filter: saturate(.82); }
.pg-cards.pg-mode-mid .pg-card-icon { width: 64px; height: 64px; min-width: 64px; font-size: 30px; border-width: 2px; }
.pg-cards.pg-mode-mid .pg-card-title { font-size: 17px; }
.pg-cards.pg-mode-mid .pg-game-card::after {
    content: '🏆';
    position: absolute; top: 8px; right: 12px;
    font-size: 15px; opacity: .85;
}
.pg-cards.pg-mode-mid .pg-game-card { position: relative; }

/* 高中/大学：极简深色任务清单风（无卡通动物感）——用 ID 前缀压过 #playgroundView 底色 */
.pg-cards.pg-mode-pro { gap: 10px; }
#playgroundView .pg-cards.pg-mode-pro .pg-game-card,
.pg-cards.pg-mode-pro .pg-game-card {
    background-image: none;
    background-color: #1E293B;
    border-radius: 12px; padding: 12px 16px; gap: 14px;
    border: 1.5px solid #334155;
    box-shadow: none;
}
.pg-cards.pg-mode-pro .pg-game-card:active { transform: scale(.985); }
.pg-cards.pg-mode-pro .pg-card-icon {
    width: 46px; height: 46px; min-width: 46px; border-radius: 10px;
    font-size: 22px; background: rgba(148, 163, 184, .15);
    border: 1.5px solid #475569;
}
.pg-cards.pg-mode-pro .pg-card-title { font-size: 15.5px; font-weight: 800; color: #E2E8F0; letter-spacing: .3px; }
.pg-cards.pg-mode-pro .pg-card-sub { font-size: 12px; color: #94A3B8; margin-top: 2px; }
.pg-cards.pg-mode-pro .pg-game-card::after {
    content: '›';
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 22px; color: #64748B; font-weight: 700;
}
.pg-cards.pg-mode-pro .pg-game-card { position: relative; }

[data-theme="dark"] .pg-band-tab { background: rgba(255,255,255,.06); border-color: #555; }
[data-theme="dark"] .pg-band-tab .pbt-name { color: #eee; }
[data-theme="dark"] .pg-band-tab.tb-kid.active { background: #4a3010; }
[data-theme="dark"] .pg-band-tab.tb-mid.active { background: #12304d; }
[data-theme="dark"] .side-hud { background: rgba(40, 40, 40, .95); }
[data-theme="dark"] .hud-name { color: #f0e4c8; }

/* 新卡渐变底色 */
.pg-card-listentap { background: linear-gradient(135deg, #4FC3F7, #1E88E5); }
.pg-card-matchpair { background: linear-gradient(135deg, #AED581, #558B2F); }
.pg-card-relaxmatch { background: linear-gradient(135deg, #F48FB1, #C2185B); }
.pg-card-relaxspell { background: linear-gradient(135deg, #FFB74D, #E65100); }

/* M3 批2: 消消乐复用 relaxView——在游戏容器里强制显示（原 #relaxView 是学习视图默认 display:none） */
#gameBody #relaxView { display: block !important; }

/* ============ M3: 启蒙游戏 · 听音点图（listenTap） ============ */
.lt-wrap {
    width: 100%; max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 14px 24px; gap: 10px; min-height: 100%;
}
.lt-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.lt-stars { font-size: 20px; font-weight: 900; color: #F59E0B; }
.lt-progress { font-size: 15px; font-weight: 800; color: var(--text-light); }
.lt-mascot { position: relative; font-size: 46px; line-height: 1; }
.lt-bubble {
    position: absolute; left: 120%; top: 2px; white-space: nowrap;
    background: #fff; border: 2.5px solid #FFD54F; color: #6D4C1F;
    font-size: 14px; font-weight: 800; padding: 6px 12px; border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.lt-play-big {
    width: 92px; height: 92px; border-radius: 50%;
    border: none; background: linear-gradient(160deg, #FFD75E, #F5A623);
    font-size: 44px; cursor: pointer; color: #fff;
    box-shadow: 0 6px 0 #D98B12, 0 10px 20px rgba(0,0,0,.18);
    transition: transform .1s;
}
.lt-play-big:active { transform: scale(.93); }
.lt-hint { font-size: 14px; font-weight: 800; color: var(--text-light); }
.lt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 420px; }
.lt-card {
    aspect-ratio: 1.25 / 1; border: 3px solid #FFE0A8; border-radius: 24px;
    background: #fff; font-size: 62px; cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.1);
    transition: transform .12s; font-family: inherit;
}
.lt-card:active { transform: scale(.94); }
.lt-card.right {
    border-color: #66BB6A; background: #E8F5E9;
    animation: ltPop .5s cubic-bezier(.3, 1.6, .5, 1);
}
.lt-card.shake { animation: ltShake .45s ease; }
@keyframes ltPop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ltShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.lt-exit {
    margin-top: 8px; border: 2.5px solid #E0E0E0; background: #fff;
    color: var(--text-light); border-radius: 999px; padding: 9px 26px;
    font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.lt-finish { justify-content: center; gap: 14px; min-height: 70vh; }
.lt-fin-icon { font-size: 74px; }
.lt-fin-title { font-size: 28px; font-weight: 900; color: var(--green-dark); }
.lt-fin-stats { font-size: 16px; font-weight: 800; color: var(--text-light); }
.lt-again {
    border: none; background: var(--green-mid); color: #fff;
    border-radius: 999px; padding: 13px 40px; font-size: 17px; font-weight: 900;
    cursor: pointer; font-family: inherit; box-shadow: 0 5px 0 var(--green-dark);
}

/* ============ M3: 启蒙游戏 · 翻翻配（matchPair） ============ */
.mp-wrap {
    width: 100%; max-width: 560px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 14px 24px; gap: 10px; min-height: 100%;
}
.mp-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.mp-title { font-size: 18px; font-weight: 900; color: var(--green-dark); }
.mp-stars { font-size: 20px; font-weight: 900; color: #F59E0B; }
.mp-mascot { position: relative; font-size: 40px; line-height: 1; }
.mp-bubble {
    position: absolute; left: 115%; top: 2px; white-space: nowrap;
    background: #fff; border: 2.5px solid #AED581; color: #33691E;
    font-size: 13px; font-weight: 800; padding: 5px 11px; border-radius: 13px;
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
.mp-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    width: 100%; max-width: 500px;
}
.mp-card {
    aspect-ratio: 1 / 1; position: relative; border: none; background: none;
    cursor: pointer; padding: 0; perspective: 500px; font-family: inherit;
}
.mp-face {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border-radius: 20px; backface-visibility: hidden; transition: transform .3s;
    font-size: 44px;
}
.mp-front { gap: 2px; padding: 5px; }
.mp-emoji { font-size: 46px; line-height: 1.15; }
.mp-word { font-size: 15px; font-weight: 900; color: #558B2F; letter-spacing: .2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-back {
    background: linear-gradient(160deg, #8BC34A, #558B2F);
    box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.15);
    transform: rotateY(0deg);
}
.mp-card.flipped .mp-back, .mp-card.done .mp-back { transform: rotateY(180deg); }
.mp-front {
    background: #fff; border: 3px solid #DCEDC8;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    transform: rotateY(180deg);
}
.mp-card.flipped .mp-front, .mp-card.done .mp-front { transform: rotateY(0deg); }
.mp-card.done { pointer-events: none; }
.mp-card.done .mp-front { border-color: #AED581; background: #F1F8E9; }
.mp-front.pop { animation: mpPop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mpPop { 0% { transform: rotateY(0) scale(1); } 50% { transform: rotateY(0) scale(1.15); } 100% { transform: rotateY(0) scale(1); } }
.mp-card.shake .mp-front { animation: ltShake .4s ease; }

/* M3: 雪花闪烁庆祝粒子 */
.fx-snow {
    position: fixed; top: -8vh; z-index: 9998; pointer-events: none;
    animation: fxSnowFall 1.8s linear forwards;
    filter: drop-shadow(0 0 5px rgba(160, 220, 255, .95));
}
@keyframes fxSnowFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(108vh) rotate(240deg); opacity: .15; }
}

/* M2e: 老师邮箱注册 —— 区号/手机号、国籍/母语两列行 + 验证链接按钮 */
.reg-row { display: flex; gap: 8px; }
.reg-row .reg-select { flex: 1; min-width: 0; }
.reg-row .reg-select-code { flex: 0 0 108px; }
.btn-verify-link { display: inline-block; text-align: center; max-width: 240px; }