* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: system-ui, -apple-system, sans-serif; 
    min-height: 100vh; 
    /* 清新薄荷綠 + 天藍漸層 */
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #b5eac0 100%); 
    color: #2c3e50;  /* 深灰字，清爽 */
    padding: 20px; 
}
.container { max-width: 480px; margin: 0 auto; }
.card { 
    background: rgba(255,255,255,0.85);  /* 半透明白卡 */
    backdrop-filter: blur(15px); 
    border-radius: 24px; 
    padding: 30px 25px; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);  /* 柔和陰影 */
    text-align: center; 
    border: 1px solid rgba(255,255,255,0.3);
}
.title { font-size: 1.6em; margin-bottom: 20px; font-weight: 700; color: #27ae60; }
.furigana { font-size: 3em; font-weight: 700; margin: 20px 0; text-shadow: 1px 1px 3px rgba(0,0,0,0.1); color: #2c3e50; }
.kanji-meaning { 
    font-size: 1.3em; padding: 20px; 
    background: linear-gradient(135deg, #e8f5e8, #f0f8ff); 
    border-radius: 18px; margin: 20px 0; font-weight: 500; 
    color: #2c3e50; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.btn { 
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);  /* 清新藍 */
    color: white; border: none; padding: 15px 30px; margin: 10px; 
    border-radius: 40px; font-size: 1em; font-weight: 600; cursor: pointer; 
    transition: all 0.3s ease; box-shadow: 0 6px 18px rgba(79, 172, 254, 0.3); 
    min-width: 140px; position: relative; overflow: hidden;
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(79, 172, 254, 0.4); }
.btn:active { transform: translateY(-1px); }
.btn.danger { background: linear-gradient(135deg, #ff6b6b, #ee5a52); }  /* 清新紅 */
.btn.wide { min-width: 130px; flex: 1; padding: 16px 24px; font-size: 0.95em; }
.btn.audio { 
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;  /* 橘黃發音 */
    box-shadow: 0 5px 15px rgba(255, 183, 159, 0.4) !important;
    color: #d35400 !important; padding: 12px !important; min-width: auto !important; 
    font-size: 1.3em !important; border-radius: 50% !important; 
    width: 55px; height: 55px; display: flex; align-items: center; 
    justify-content: center; margin: 0 8px; font-weight: bold;
}
.btn.audio:hover { 
    background: linear-gradient(135deg, #ffcc99, #ff9966) !important; 
    transform: translateY(-2px) scale(1.08) !important; color: #b35900 !important;
}
.options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0; }
.option { 
    background: rgba(255,255,255,0.7); padding: 15px 25px; 
    border-radius: 18px; cursor: pointer; transition: all 0.3s; 
    flex: 1 1 180px; min-height: 60px; display: flex; align-items: center; 
    justify-content: center; font-size: 0.95em; color: #2c3e50;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}
.option:hover { background: rgba(255,255,255,0.9); transform: scale(1.03); }
.option.correct { 
    background: linear-gradient(135deg, #56ab2f, #a8e6cf) !important; 
    transform: scale(1.03); color: white !important;
}
.option.wrong { 
    background: linear-gradient(135deg, #ff6b6b, #ffa726) !important; 
    transform: scale(1.03); color: white !important;
}
.result { font-size: 1.4em; margin: 25px 0; padding: 18px; border-radius: 18px; font-weight: 700; }
.result.success { 
    background: linear-gradient(135deg, #d4edda, #c3e6cb); 
    color: #155724; border: 1px solid #c3e6cb;
}
.result.error { 
    background: linear-gradient(135deg, #f8d7da, #f5c6cb); 
    color: #721c24; border: 1px solid #f5c6cb;
}
.cooldown { 
    color: #e67e22; font-size: 1.2em; font-weight: bold; 
    margin: 12px 0; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); 
    background: rgba(255,193,7,0.2); padding: 10px; border-radius: 12px;
}
.confirm-title { margin: 25px 0; font-size: 1.2em; font-weight: 600; color: #34495e; }
.audio-row { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 20px; }
.loading { opacity: 0.6; pointer-events: none; }