/* ===================================================
   TYPING ACADEMY - PHONG CÁCH TỐI GIẢN CHUẨN TYPING.COM
   Giao diện to, rõ, tập trung, êm mắt cho học sinh
   =================================================== */

#screen-typing {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: #0f172a; /* Deep clean navy background */
    color: #f8fafc;
    padding: 16px 24px 32px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    z-index: 50;
    font-family: 'Nunito', system-ui, sans-serif;
}

/* ================= TOP NAVIGATION BAR ================= */
.typing-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1020px;
    margin: 0 auto 16px auto;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.typing-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.btn-typing-back {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.btn-typing-back:hover {
    background: #334155;
    color: #ffffff;
    transform: translateX(-2px);
}

/* Bộ chọn bài học gọn gàng (Lesson Dropdown / Picker) */
.lesson-picker-btn {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 16px;
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.lesson-picker-btn:hover {
    background: #273549;
    border-color: #38bdf8;
}

.typing-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Nút TELEX / VNI */
.ime-pill {
    display: flex;
    background: #1e293b;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ime-pill-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ime-pill-btn.active {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.btn-typing-action {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-typing-action:hover {
    background: #334155;
    color: #ffffff;
}

/* ================= MAIN TYPING WORKSPACE ================= */
.typing-main-container {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Thanh chỉ số HUD tối giản */
.typing-compact-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
}

.hud-stat-group {
    display: flex;
    gap: 24px;
    align-items: center;
}

.hud-stat-box {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hud-stat-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hud-stat-number {
    font-size: 24px;
    font-weight: 900;
    color: #38bdf8;
    font-variant-numeric: tabular-nums;
}

/* Thanh tiến độ bài học (Progress Bar) */
.lesson-progress-bar {
    width: 100%;
    height: 6px;
    background: #1e293b;
    border-radius: 999px;
    overflow: hidden;
}

.lesson-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #10b981);
    border-radius: 999px;
    transition: width 0.15s ease;
}

/* ================= KHUNG CHỮ GÕ SIÊU TO RÕ RÀNG (FOCUS BOX) ================= */
.typing-text-display-box {
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 20px;
    padding: 28px 36px;
    font-size: 38px; /* Chữ to rõ ràng cho trẻ em */
    line-height: 1.6;
    font-family: 'Nunito', 'Segoe UI', monospace;
    font-weight: 700;
    min-height: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    user-select: none;
    letter-spacing: 1px;
    transition: border-color 0.2s ease;
}

.typing-text-display-box:focus-within {
    border-color: #38bdf8;
}

.char-correct {
    color: #10b981; /* Xanh lá dịu mắt */
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
}

.char-wrong {
    color: #ffffff;
    background: #ef4444; /* Đỏ rõ ràng */
    border-radius: 4px;
    animation: shake 0.2s ease-in-out;
}

.char-current {
    background: #0284c7; /* Highlight xanh nổi bật */
    color: #ffffff;
    border-radius: 6px;
    padding: 0 2px;
    position: relative;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.6);
}

.char-pending {
    color: #64748b; /* Xám dịu mắt */
}

/* Thanh hướng dẫn phím & ngón tay */
.typing-guide-instruction {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 16px;
    color: #cbd5e1;
    text-align: center;
}

/* ================= BÀN PHÍM ẢO TO, SẮC NÉT ================= */
.virtual-keyboard-clean {
    background: #111827;
    border: 2px solid #1f2937;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    user-select: none;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

.kb-clean-row {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.kb-clean-key {
    height: 48px;
    min-width: 46px;
    border-radius: 9px;
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 0 #111827;
    transition: all 0.08s ease;
    position: relative;
    padding: 0 6px;
}

/* Gờ nổi xúc giác cho phím F và J */
.kb-clean-key[data-key="f"]::after,
.kb-clean-key[data-key="j"]::after {
    content: '';
    position: absolute;
    bottom: 5px;
    width: 12px;
    height: 2px;
    background: #9ca3af;
    border-radius: 2px;
}

.kb-clean-space {
    flex-grow: 1;
    max-width: 320px;
}

.kb-clean-wide {
    min-width: 68px;
    font-size: 12px;
    color: #9ca3af;
}

.kb-clean-wider {
    min-width: 88px;
    font-size: 12px;
    color: #9ca3af;
}

/* Phím mục tiêu cần bấm */
.kb-clean-key.key-target {
    background: #f59e0b !important;
    color: #0f172a !important;
    border-color: #fde047 !important;
    font-weight: 900 !important;
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.8), 0 4px 0 #b45309 !important;
}

/* Phím khi người dùng ấn thật */
.kb-clean-key.key-pressed {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #000;
    background: #0284c7 !important;
    color: #ffffff !important;
}

/* ================= 2 BÀN TAY HƯỚNG DẪN SVG TRỰC QUAN ================= */
.hands-visual-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    padding: 12px 20px;
    background: #111827;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

.hand-svg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hand-svg-label {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hand-svg {
    width: 160px;
    height: 120px;
    overflow: visible;
}

/* Các ngón tay SVG */
.svg-finger {
    fill: #1f2937;
    stroke: #374151;
    stroke-width: 1.5;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.svg-finger.active {
    fill: #0284c7 !important;
    stroke: #38bdf8 !important;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 8px #0284c7);
    transform-origin: bottom center;
    transform: translateY(-4px) scale(1.05);
}

.svg-palm {
    fill: #1f2937;
    stroke: #374151;
    stroke-width: 1.5;
}

/* ================= MODAL CHỌN BÀI HỌC (LESSON SELECTOR MODAL) ================= */
.lesson-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.lesson-modal-content {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 24px;
    padding: 24px;
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.lesson-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lesson-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.lesson-modal-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lesson-modal-card:hover {
    background: #273549;
    border-color: #38bdf8;
    transform: translateY(-2px);
}

.lesson-modal-card.active {
    background: #0369a1;
    border-color: #38bdf8;
}

/* ================= MODAL HOÀN THÀNH BÀI GÕ CÂN ĐỐI HOÀN HẢO ================= */
.typing-result-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.typing-result-card {
    background: #0f172a;
    border: 2px solid #38bdf8;
    border-radius: 26px;
    padding: 36px 30px 30px 30px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.typing-res-stars-wrapper {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 8px;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.5));
}

.typing-res-title {
    font-size: 24px;
    font-weight: 900;
    color: #38bdf8;
    margin: 0 0 20px 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.typing-res-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    margin-bottom: 16px;
}

.typing-res-stat-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.typing-res-reward-box {
    width: 100%;
    background: rgba(251, 191, 36, 0.08);
    border: 1.5px solid rgba(251, 191, 36, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 24px;
    box-sizing: border-box;
    text-align: center;
}

.typing-res-reward-label {
    font-size: 13px;
    font-weight: 700;
    color: #fef08a;
    margin-bottom: 6px;
}

.typing-res-reward-val {
    font-size: 22px;
    font-weight: 900;
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.typing-res-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
}

.btn-modal-retry {
    background: #1e293b;
    border: 1.5px solid #475569;
    color: #e2e8f0;
    height: 50px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-modal-retry:hover {
    background: #334155;
    border-color: #94a3b8;
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-modal-next {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #0f172a;
    height: 50px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    transition: all 0.2s ease;
    width: 100%;
}

.btn-modal-next:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

/* ================= FARM DROP MINI GAME MODAL & CANVAS ================= */
.minigame-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.minigame-container {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #38bdf8;
    border-radius: 24px;
    width: 100%;
    max-width: 820px;
    height: 560px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.25);
    overflow: hidden;
    position: relative;
}

.minigame-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    background: rgba(30, 41, 59, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.minigame-title {
    font-size: 18px;
    font-weight: 900;
    color: #38bdf8;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.minigame-stats-bar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.minigame-stat-pill {
    background: #0f172a;
    padding: 6px 14px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
}

.minigame-playfield {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 30%, #1e3a5f 0%, #0b1329 100%);
}

.minigame-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(180deg, #15803d 0%, #166534 100%);
    border-top: 3px solid #4ade80;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbf7d0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ================= CÁC CHỦ ĐỀ MINI-GAME NÔNG TRẠI ĐỘC ĐÁO ================= */

/* 1. CHỦ ĐỀ 1: FARM DROP (Củ quả rơi) */
.falling-fruit {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none;
}

.falling-fruit-bubble {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 2px solid #38bdf8;
    box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    animation: fruitPulse 1.2s infinite alternate ease-in-out;
}

.falling-fruit-key {
    position: absolute;
    bottom: -10px;
    background: #fbbf24;
    color: #0f172a;
    font-weight: 900;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 1.5px solid #ffffff;
    text-transform: uppercase;
}

/* 2. CHỦ ĐỀ 2: BALLOON RISE (Bóng bay khinh khí cầu bay lên) */
.rising-balloon {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none;
}

.rising-balloon-bubble {
    width: 62px;
    height: 72px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: radial-gradient(circle at 35% 35%, #f472b6 0%, #db2777 100%);
    border: 2px solid #fbcfe8;
    box-shadow: 0 6px 20px rgba(219, 39, 119, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    position: relative;
    animation: balloonWiggle 2s infinite ease-in-out alternate;
}

.rising-balloon-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #db2777;
}

.rising-balloon-key {
    position: absolute;
    bottom: -16px;
    background: #38bdf8;
    color: #0f172a;
    font-weight: 900;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    border: 1.5px solid #ffffff;
    text-transform: uppercase;
}

@keyframes balloonWiggle {
    0% { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* 3. CHỦ ĐỀ 3: WHACK-A-MOLE (Ụ đất chuột chũi & củ khoai) */
.mole-burrow-grid {
    position: absolute;
    inset: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 10px;
}

.mole-burrow-hole {
    position: relative;
    background: radial-gradient(ellipse at 50% 60%, #1e150f 0%, #3d2314 60%, #5c351c 100%);
    border-radius: 50%;
    border: 3px solid #78350f;
    box-shadow: inset 0 8px 20px rgba(0,0,0,0.8), 0 4px 15px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mole-entity-popup {
    position: absolute;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: moleRise 0.25s ease-out;
}

@keyframes moleRise {
    0% { transform: translateY(60px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.mole-icon {
    font-size: 42px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

.mole-key-badge {
    background: #eab308;
    color: #0f172a;
    font-weight: 900;
    font-size: 15px;
    padding: 2px 10px;
    border-radius: 8px;
    border: 1.5px solid #ffffff;
    margin-top: -6px;
    text-transform: uppercase;
}

/* 4. CHỦ ĐỀ 4: TRUCK LOADING (Băng chuyền & Xe tải nông sản) */
.truck-conveyor-belt {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    height: 18px;
    background: repeating-linear-gradient(90deg, #334155 0px, #334155 15px, #1e293b 15px, #1e293b 30px);
    border-top: 2px solid #64748b;
    border-bottom: 2px solid #0f172a;
}

.truck-target-bay {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 140px;
    height: 100px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-radius: 12px;
    border: 2px solid #38bdf8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.4);
    font-size: 32px;
}

.crate-item-moving {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 95px;
}

.crate-box {
    width: 60px;
    height: 60px;
    background: #b45309;
    border: 2.5px solid #fbbf24;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.crate-key-badge {
    background: #fbbf24;
    color: #0f172a;
    font-weight: 900;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 6px;
    margin-top: -8px;
    border: 1.5px solid #ffffff;
}

/* 5. CHỦ ĐỀ 5: PEST DEFENSE (Sâu bọ bò ngang & xịt nước) */
.pest-crawler {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid #22c55e;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.pest-crawler-icon {
    font-size: 30px;
    animation: pestWiggle 0.6s infinite alternate ease-in-out;
}

@keyframes pestWiggle {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0.88); }
}

.pest-word-target {
    font-size: 18px;
    font-weight: 900;
    color: #4ade80;
    letter-spacing: 0.5px;
}

/* 6. CHỦ ĐỀ 6: TRACTOR RUSH (Đua xe máy cày gặt lúa) */
.tractor-rush-field {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 16px;
}

.tractor-track-lane {
    width: 100%;
    max-width: 680px;
    height: 70px;
    background: repeating-linear-gradient(90deg, #ca8a04 0px, #ca8a04 30px, #a16207 30px, #a16207 60px);
    border-radius: 16px;
    border: 2px solid #facc15;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.tractor-avatar {
    position: absolute;
    left: 20px;
    font-size: 46px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
    transition: left 0.3s ease-out;
}

.tractor-phrase-card {
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid #38bdf8;
    border-radius: 16px;
    padding: 16px 24px;
    font-size: 22px;
    font-weight: 800;
    color: #f8fafc;
    text-align: center;
    max-width: 680px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
}

@keyframes fruitPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

.fruit-splat {
    position: absolute;
    font-size: 24px;
    font-weight: 900;
    animation: splatPop 0.6s forwards ease-out;
    pointer-events: none;
    z-index: 10;
}

@keyframes splatPop {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -80%) scale(1.3); }
    100% { opacity: 0; transform: translate(-50%, -110%) scale(1.5); }
}