/* 基础样式重置和全局设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    background: #f5f5f5;
    min-height: 100vh;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
}

/* ========== 页面标题部分 ========== */
.main-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    position: relative;
    margin-bottom: 30px;
}

.sun-decoration {
    position: absolute;
    left: 50px;
    font-size: 50px;
}

.sun {
    display: inline-block;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rainbow-decoration {
    position: absolute;
    right: 50px;
    font-size: 60px;
}

.rainbow {
    display: inline-block;
}

.title {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5px;
}

.title .small { font-size: 36px; color: #e74c3c; }
.title .medium { font-size: 42px; color: #e74c3c; }
.title .large { font-size: 56px; color: #27ae60; }
.title .blue { color: #3498db; }
.title .purple { color: #9b59b6; }
.title .pink { color: #e91e63; }
.title .red { color: #e74c3c; }
.title .orange { color: #f39c12; }

/* ========== 学习网格布局 ========== */
.learning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    margin-bottom: 30px;
}

/* 模块通用样式 */
.module {
    background: #fff;
    border: 3px solid;
    border-radius: 15px;
    padding: 20px;
    overflow: hidden;
}

.module-title {
    font-size: 24px;
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.module-title .number {
    font-size: 20px;
}

.module-title .text {
    font-weight: bold;
}

/* 背景色 */
.blue-bg { background: #e3f2fd; border-color: #bbdefb; color: #1565c0; }
.green-bg { background: #e8f5e9; border-color: #c8e6c9; color: #2e7d32; }
.pink-bg { background: #fce4ec; border-color: #f8bbd9; color: #c2185b; }
.orange-bg { background: #fff3e0; border-color: #ffe0b2; color: #e65100; }
.blue-bg-2 { background: #e3f2fd; border-color: #bbdefb; color: #1565c0; }
.purple-bg { background: #f3e5f5; border-color: #e1bee7; color: #7b1fa2; }
.green-bg-2 { background: #e8f5e9; border-color: #c8e6c9; color: #2e7d32; }
.orange-bg-2 { background: #fff3e0; border-color: #ffe0b2; color: #e65100; }

/* ========== 1. 字母模块 ========== */
.letters-module {
    grid-column: 1;
    grid-row: 1;
    border-color: #bbdefb;
}

.letters-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.letter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.letter {
    font-size: 20px;
    font-weight: bold;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1565c0;
}

.letter:hover {
    transform: scale(1.1);
    background: #e3f2fd;
}

.letter.red { color: #e74c3c; }
.letter.purple { color: #9b59b6; }
.letter.blue { color: #3498db; }
.letter.orange { color: #f39c12; }

/* ========== 2. 数字模块 ========== */
.numbers-module {
    grid-column: 2;
    grid-row: 1;
    border-color: #c8e6c9;
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.number-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.number-item:hover {
    transform: translateY(-5px);
}

.num {
    font-size: 48px;
    font-weight: bold;
    line-height: 1;
}

.num.red { color: #e74c3c; }
.num.blue { color: #3498db; }
.num.orange { color: #f39c12; }
.num.green { color: #27ae60; }
.num.purple { color: #9b59b6; }

.word {
    font-size: 14px;
    color: #333;
    margin-top: 5px;
}

/* ========== 3. 颜色模块 ========== */
.colors-module {
    grid-column: 3;
    grid-row: 1;
    border-color: #f8bbd9;
}

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

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.color-item:hover {
    transform: scale(1.1);
}

.color-blob {
    width: 50px;
    height: 50px;
    border-radius: 60% 40% 50% 50%;
    margin-bottom: 8px;
    position: relative;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15);
}

/* 颜料泼洒效果 */
.color-blob::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: -5px;
    right: -8px;
    opacity: 0.7;
}

.red-blob { 
    background: radial-gradient(circle at 30% 30%, #ff6b6b, #e74c3c);
}
.red-blob::after { background: #ff6b6b; }

.yellow-blob { 
    background: radial-gradient(circle at 30% 30%, #ffe66d, #f1c40f);
}
.yellow-blob::after { background: #ffe66d; }

.blue-blob { 
    background: radial-gradient(circle at 30% 30%, #74b9ff, #3498db);
}
.blue-blob::after { background: #74b9ff; }

.green-blob { 
    background: radial-gradient(circle at 30% 30%, #55efc4, #27ae60);
}
.green-blob::after { background: #55efc4; }

.orange-blob { 
    background: radial-gradient(circle at 30% 30%, #fab1a0, #f39c12);
}
.orange-blob::after { background: #fab1a0; }

.purple-blob { 
    background: radial-gradient(circle at 30% 30%, #a29bfe, #9b59b6);
}
.purple-blob::after { background: #a29bfe; }

.pink-blob { 
    background: radial-gradient(circle at 30% 30%, #fd79a8, #ff69b4);
}
.pink-blob::after { background: #fd79a8; }

.brown-blob { 
    background: radial-gradient(circle at 30% 30%, #cd853f, #8b4513);
}
.brown-blob::after { background: #cd853f; }

.black-blob { 
    background: radial-gradient(circle at 30% 30%, #555, #333);
}
.black-blob::after { background: #555; }

.white-blob { 
    background: radial-gradient(circle at 30% 30%, #fff, #f5f5f5);
    border: 2px solid #ddd;
}
.white-blob::after { background: #f5f5f5; border: 1px solid #ddd; }

.color-item .en {
    font-size: 13px;
    color: #333;
    font-weight: bold;
}

.color-item .cn {
    font-size: 12px;
    color: #666;
}

/* ========== 4. 问候语模块 ========== */
.greetings-module {
    grid-column: 1;
    grid-row: 2;
    border-color: #ffe0b2;
}

.greetings-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.greeting-row {
    display: flex;
    gap: 15px;
    justify-content: space-around;
}

.greeting-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.greeting-item:hover {
    transform: scale(1.05);
}

/* 卡通人物头像样式 */
.character {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 8px;
    position: relative;
    border: 3px solid;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* 男孩样式 */
.character.boy {
    background: linear-gradient(135deg, #ffcc80 0%, #ffb74d 100%);
    border-color: #ff9800;
}
.character.boy::before { content: "👦"; font-size: 32px; }

/* 女孩样式 */
.character.girl {
    background: linear-gradient(135deg, #ffccbc 0%, #ffab91 100%);
    border-color: #ff7043;
}
.character.girl::before { content: "👧"; font-size: 32px; }

/* 挥手男孩 */
.character.boy-waving {
    background: linear-gradient(135deg, #81d4fa 0%, #4fc3f7 100%);
    border-color: #29b6f6;
}
.character.boy-waving::before { 
    content: "👋"; 
    font-size: 32px;
    animation: wave 1s ease-in-out infinite;
}

/* 挥手女孩 */
.character.girl-waving {
    background: linear-gradient(135deg, #f48fb1 0%, #f06292 100%);
    border-color: #ec407a;
}
.character.girl-waving::before { 
    content: "👋"; 
    font-size: 32px;
    animation: wave 1s ease-in-out infinite;
}

/* 感谢女孩 */
.character.girl-thanking {
    background: linear-gradient(135deg, #ce93d8 0%, #ba68c8 100%);
    border-color: #ab47bc;
}
.character.girl-thanking::before { content: "🙏"; font-size: 28px; }

/* 欢迎男孩 */
.character.boy-welcome {
    background: linear-gradient(135deg, #a5d6a7 0%, #81c784 100%);
    border-color: #66bb6a;
}
.character.boy-welcome::before { content: "😊"; font-size: 32px; }

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.speech-bubble {
    background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
    border: 2px solid #ddd;
    border-radius: 15px 15px 15px 5px;
    padding: 8px 12px;
    text-align: center;
    position: relative;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    min-width: 80px;
}

.speech-bubble::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 20%;
    border: 8px solid transparent;
    border-bottom-color: #ddd;
    border-top: 0;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    top: -6px;
    left: calc(20% + 1px);
    border: 7px solid transparent;
    border-bottom-color: #fff;
    border-top: 0;
}

.speech-bubble .en {
    display: block;
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.speech-bubble .cn {
    display: block;
    font-size: 11px;
    color: #666;
}

/* ========== 5. 常用单词模块 ========== */
.words-module {
    grid-column: 2;
    grid-row: 2;
    border-color: #bbdefb;
}

.words-categories {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category {
    border: 2px dashed #ddd;
    border-radius: 10px;
    padding: 15px;
    position: relative;
}

.category-tag {
    position: absolute;
    top: -12px;
    left: 10px;
    padding: 3px 12px;
    border-radius: 15px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

.blue-tag { background: #3498db; }
.green-tag { background: #27ae60; }
.orange-tag { background: #f39c12; }

.words-row {
    display: flex;
    gap: 15px;
    justify-content: space-around;
    margin-top: 10px;
}

.word-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.word-item:hover {
    transform: translateY(-3px);
}

.icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin-bottom: 5px;
}

.word-item .en {
    font-size: 12px;
    font-weight: bold;
    color: #333;
}

.word-item .cn {
    font-size: 12px;
    color: #666;
}

/* ========== 6. 常用句型模块 ========== */
.sentences-module {
    grid-column: 3;
    grid-row: 2;
    border-color: #e1bee7;
}

.sentences-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sentence-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
    border: 2px solid #e0e0e0;
}

.sentence-item:hover {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-color: #ce93d8;
    transform: translateX(5px);
}

.star {
    font-size: 20px;
    animation: twinkle 2s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.sentence-text {
    flex: 1;
}

.sentence-text .en {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.sentence-text .cn {
    display: block;
    font-size: 14px;
    color: #666;
}

.sentence-image {
    font-size: 45px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.sentence-item:hover .sentence-image {
    transform: scale(1.1) rotate(10deg);
}

.sentence-image.apple {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
}

.sentence-image.bag-blue {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.sentence-image.dog {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.sentence-image.ball {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

/* ========== 7. 方位介词模块 ========== */
.prepositions-module {
    grid-column: 1 / 3;
    grid-row: 3;
    border-color: #c8e6c9;
}

.prepositions-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    flex-wrap: wrap;
}

.prep-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 12px;
}

.prep-item:hover {
    transform: scale(1.08);
    background: #e8f5e9;
}

/* 3D盒子场景 */
.box-scene {
    width: 100px;
    height: 80px;
    position: relative;
    margin-bottom: 15px;
    perspective: 400px;
}

/* 3D盒子容器 */
.box-container {
    width: 50px;
    height: 40px;
    position: absolute;
    left: 25px;
    top: 25px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(25deg);
}

/* 盒子的各个面 */
.box-front-face {
    position: absolute;
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.4) 0%, rgba(160, 130, 90, 0.6) 100%);
    border: 3px solid #8b7355;
    transform: translateZ(25px);
    border-radius: 3px;
}

.box-top-face {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(160, 130, 90, 0.5) 0%, rgba(180, 150, 110, 0.7) 100%);
    border: 3px solid #a0825a;
    transform: rotateX(-90deg) translateZ(25px);
    border-radius: 3px;
}

.box-side-face {
    position: absolute;
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, rgba(120, 100, 70, 0.5) 0%, rgba(140, 120, 80, 0.7) 100%);
    border: 3px solid #786446;
    transform: rotateY(90deg) translateZ(25px);
    border-radius: 3px;
}

/* 盒子内部（用于in的效果） */
.box-inner {
    position: absolute;
    width: 44px;
    height: 34px;
    background: rgba(139, 115, 85, 0.2);
    left: 3px;
    top: 3px;
    transform: translateZ(22px);
    border-radius: 2px;
}

/* 红球物体 */
.object {
    font-size: 28px;
    position: absolute;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
    transition: all 0.5s ease;
}

/* in - 球在盒子里面 */
.in-object {
    left: 36px;
    top: 30px;
    z-index: 2;
    animation: bounceIn 2s ease-in-out infinite;
}

@keyframes bounceIn {
    0%, 100% { transform: translateY(0) scale(0.9); }
    50% { transform: translateY(-3px) scale(0.9); }
}

/* on - 球在盒子上面 */
.on-object {
    left: 36px;
    top: 8px;
    z-index: 10;
    animation: rollOn 2s ease-in-out infinite;
}

@keyframes rollOn {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(5px) rotate(90deg); }
    75% { transform: translateX(-5px) rotate(-90deg); }
}

/* under - 球在盒子下面 */
.under-object {
    left: 36px;
    top: 50px;
    z-index: 0;
    animation: peekUnder 2s ease-in-out infinite;
}

@keyframes peekUnder {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* behind - 球在盒子后面 */
.behind-object {
    left: 60px;
    top: 25px;
    z-index: -1;
    opacity: 0.5;
    animation: peekBehind 2s ease-in-out infinite;
}

@keyframes peekBehind {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(-10px); opacity: 1; }
}

/* in front of - 球在盒子前面 */
.front-object {
    left: 15px;
    top: 25px;
    z-index: 20;
    animation: moveFront 2s ease-in-out infinite;
}

@keyframes moveFront {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(15px) scale(1.1); }
}

.prep-item .en {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.prep-item .cn {
    font-size: 13px;
    color: #666;
}

/* ========== 8. 常见动物模块 ========== */
.animals-module {
    grid-column: 3;
    grid-row: 3;
    border-color: #ffe0b2;
}

.animals-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.animal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.animal-item:hover {
    transform: scale(1.1);
}

.animal-icon {
    font-size: 45px;
    margin-bottom: 5px;
}

.animal-item .en {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.animal-item .cn {
    font-size: 12px;
    color: #666;
}

/* ========== 底部提示 ========== */
.learning-tips {
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border: 3px solid #ffeb3b;
    border-radius: 15px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 20px;
}

.tips-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.star-icon, .heart {
    font-size: 24px;
}

.tips-text {
    font-size: 20px;
    color: #5d4037;
    font-weight: bold;
}

.boy-decoration {
    position: absolute;
    right: 30px;
    font-size: 60px;
}

/* ========== 点读高亮效果 ========== */
.speaking {
    animation: pulse 0.5s ease-in-out 2;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ========== 响应式设计 ========== */

/* 平板设备 (768px - 1199px) */
@media (max-width: 1200px) {
    .container {
        padding: 15px;
    }
    
    .learning-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .letters-module { grid-column: 1; grid-row: 1; }
    .numbers-module { grid-column: 2; grid-row: 1; }
    .colors-module { grid-column: 1; grid-row: 2; }
    .greetings-module { grid-column: 2; grid-row: 2; }
    .words-module { grid-column: 1; grid-row: 3; }
    .sentences-module { grid-column: 2; grid-row: 3; }
    .prepositions-module { grid-column: 1 / 3; grid-row: 4; }
    .animals-module { grid-column: 1 / 3; grid-row: 5; }
    
    .title {
        font-size: 36px;
    }
    
    .title .large { font-size: 44px; }
    .title .medium { font-size: 38px; }
    .title .small { font-size: 32px; }
    
    .sun-decoration,
    .rainbow-decoration {
        display: none;
    }
    
    /* 方位介词在平板端调整 */
    .prepositions-grid {
        gap: 15px;
    }
    
    .box-scene {
        width: 80px;
        height: 70px;
    }
    
    /* 动物模块在平板端横向排列 */
    .animals-grid {
        flex-direction: row;
        justify-content: center;
    }
}

/* 手机设备 (小于 768px) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        max-width: 100%;
    }
    
    .main-header {
        padding: 15px 0;
        margin-bottom: 15px;
    }
    
    .learning-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    /* 重置所有网格定位 */
    .module {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100%;
        padding: 15px;
    }
    
    .module-title {
        font-size: 20px;
        padding: 6px 12px;
    }
    
    /* 标题响应式 */
    .title {
        font-size: 24px;
        letter-spacing: 2px;
        flex-wrap: wrap;
        line-height: 1.4;
    }
    
    .title .large { font-size: 30px; }
    .title .medium { font-size: 26px; }
    .title .small { font-size: 22px; }
    
    .sun-decoration,
    .rainbow-decoration,
    .boy-decoration {
        display: none;
    }
    
    /* 字母模块 */
    .letter {
        font-size: 16px;
        padding: 4px 6px;
    }
    
    /* 数字模块 */
    .numbers-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }
    
    .num {
        font-size: 32px;
    }
    
    .word {
        font-size: 12px;
    }
    
    /* 颜色模块 */
    .colors-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
    }
    
    .color-blob {
        width: 35px;
        height: 35px;
    }
    
    .color-item .en,
    .color-item .cn {
        font-size: 10px;
    }
    
    /* 问候语模块 */
    .greetings-grid {
        gap: 10px;
    }
    
    .greeting-row {
        gap: 10px;
    }
    
    .character {
        width: 45px;
        height: 45px;
    }
    
    .character::before {
        font-size: 24px !important;
    }
    
    .speech-bubble {
        padding: 6px 8px;
        min-width: 60px;
    }
    
    .speech-bubble .en {
        font-size: 12px;
    }
    
    .speech-bubble .cn {
        font-size: 10px;
    }
    
    /* 单词模块 */
    .words-categories {
        gap: 12px;
    }
    
    .category {
        padding: 12px 8px;
    }
    
    .words-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .word-item {
        min-width: 50px;
    }
    
    .icon {
        width: 40px;
        height: 40px;
        font-size: 28px;
    }
    
    .word-item .en,
    .word-item .cn {
        font-size: 10px;
    }
    
    /* 句型模块 */
    .sentences-list {
        gap: 10px;
    }
    
    .sentence-item {
        padding: 8px;
    }
    
    .sentence-text .en {
        font-size: 14px;
    }
    
    .sentence-text .cn {
        font-size: 11px;
    }
    
    .sentence-image {
        font-size: 30px;
        width: 40px;
        height: 40px;
    }
    
    /* 方位介词模块 - 手机端改为2列 */
    .prepositions-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 10px;
    }
    
    .prep-item:nth-child(5) {
        grid-column: 1 / 3;
        justify-self: center;
    }
    
    .box-scene {
        width: 80px;
        height: 70px;
    }
    
    .box-container {
        width: 40px;
        height: 32px;
        left: 20px;
        top: 20px;
    }
    
    .box-front-face {
        width: 40px;
        height: 32px;
        transform: translateZ(20px);
    }
    
    .box-top-face {
        width: 40px;
        height: 40px;
        transform: rotateX(-90deg) translateZ(20px);
    }
    
    .box-side-face {
        width: 40px;
        height: 32px;
        transform: rotateY(90deg) translateZ(20px);
    }
    
    .object {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }
    
    .in-object { left: 28px; top: 24px; }
    .on-object { left: 28px; top: 6px; }
    .under-object { left: 28px; top: 42px; }
    .behind-object { left: 48px; top: 20px; }
    .front-object { left: 10px; top: 20px; }
    
    .prep-item .en {
        font-size: 14px;
    }
    
    .prep-item .cn {
        font-size: 11px;
    }
    
    /* 动物模块 */
    .animals-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .animal-icon {
        font-size: 35px;
    }
    
    .animal-item .en {
        font-size: 12px;
    }
    
    .animal-item .cn {
        font-size: 10px;
    }
    
    /* 底部提示 */
    .learning-tips {
        padding: 15px;
    }
    
    .tips-content {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    
    .tips-text {
        font-size: 14px;
    }
}

/* 小屏手机 (小于 480px) */
@media (max-width: 480px) {
    .title {
        font-size: 18px;
    }
    
    .title .large { font-size: 24px; }
    .title .medium { font-size: 20px; }
    .title .small { font-size: 16px; }
    
    .numbers-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .num {
        font-size: 24px;
    }
    
    .colors-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .color-blob {
        width: 28px;
        height: 28px;
    }
    
    .greeting-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .greeting-item {
        flex: 1;
        min-width: 120px;
    }
    
    .words-row {
        flex-wrap: wrap;
    }
    
    .word-item {
        flex: 1;
        min-width: 60px;
    }
    
    .animals-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .animal-icon {
        font-size: 30px;
    }
    
    .sentence-item {
        flex-wrap: wrap;
    }
    
    .sentence-image {
        order: -1;
        margin-bottom: 5px;
    }
}