/* ==========================================================================
   1. CSS VARIABLES & RESET
   ========================================================================== */
:root {
    --bg-color: #F8F9FA;
    --primary-text: #2C3E50;
    --success-color: #27AE60;
    --danger-color: #C0392B;
    --progress-color: #2ECC71;
    --card-bg: #FFFFFF;
    --border-color: #E0E6ED;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Prompt', sans-serif;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
}

input {
    user-select: auto;
}

body {
    background-color: var(--bg-color);
    color: var(--primary-text);
    display: flex;
    justify-content: center;
    overscroll-behavior-y: none;
}

.app-container {
    width: 100%;
    max-width: 480px;
    height: 100dvh; 
    padding: env(safe-area-inset-top, 20px) 20px env(safe-area-inset-bottom, 20px) 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   2. TOP STATUS BAR & PROGRESS (แถบสถานะด้านบน)
   ========================================================================== */
.top-section {
    padding-top: 10px;
    padding-bottom: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 20;
}

.top-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
    padding: 12px 20px;
    border: 2px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 4px 0 var(--border-color);
}

.progress-container {
    flex-grow: 1;
    height: 14px;
    background-color: var(--border-color);
    border-radius: 10px;
    margin-right: 15px;
    overflow: hidden;
    transition: opacity 0.3s ease;
    display: flex; 
    justify-content: flex-start;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.progress-container.boss-hp-container {
    justify-content: flex-end; 
}

.boss-hp-container .progress-bar {
    background-color: var(--danger-color);
    box-shadow: 0 0 10px rgba(192, 57, 43, 0.6);
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2ECC71, #27AE60);
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* C7: เรืองแสงให้แถบดูฉ่ำ + คลิปแสงวิ่งไว้ในแถบ */
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 7px rgba(46, 204, 113, 0.55);
}

/* C7: แถบแสงขาวโปร่งวิ่งซ้าย→ขวา ทำให้ progress bar ดูมีชีวิต (juice) */
.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: progress-shimmer 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes progress-shimmer {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   C5: COMBO BADGE (เม็ดไฟ 🔥 xN โผล่มุมขวาบนตอนตอบถูกติดกัน)
   ========================================================================== */
.combo-badge {
    position: fixed;
    top: 74px;
    right: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 11px;
    background: linear-gradient(135deg, #FFB300, #FF5722);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(255, 87, 34, 0.45);
    opacity: 0;
    transform: scale(0.3) translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.combo-badge.show {
    opacity: 1;
    animation: combo-pop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.6) forwards;
}

.combo-badge .combo-fire {
    font-size: 1.1em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    animation: combo-fire-flicker 0.6s ease-in-out infinite alternate;
}

.combo-badge .combo-count {
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

@keyframes combo-pop {
    0%   { transform: scale(0.3) translateY(-8px); }
    60%  { transform: scale(1.25) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes combo-fire-flicker {
    from { transform: scale(1) rotate(-4deg); }
    to   { transform: scale(1.15) rotate(4deg); }
}

.stats {
    display: flex;
    gap: 15px;
    font-size: 15px;
    font-weight: 700;
}

.stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.streak i { color: #F39C12; font-size: 22px; filter: drop-shadow(0 2px 2px rgba(243, 156, 18, 0.3)); }
.xp i { color: #3498DB; font-size: 22px; filter: drop-shadow(0 2px 2px rgba(52, 152, 219, 0.3));}
.hearts i { color: var(--danger-color); font-size: 22px; filter: drop-shadow(0 2px 2px rgba(192, 57, 43, 0.3));}

@keyframes xp-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); color: var(--success-color); }
    100% { transform: scale(1); }
}

.xp-pop {
    display: inline-block;
    animation: xp-bounce 0.5s ease-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.shake-error {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* ==========================================================================
   3. MAP VIEW STYLES (RPG UI, บันไดงู, ด่าน)
   ========================================================================== */
.map-view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden; /* C3: กันเมฆ/ใบไม้ที่ลอยล้นขอบไปสร้างสกรอลล์แนวนอน */
    padding-bottom: 120px;
    background-color: #F4F7F9;
    background-image: radial-gradient(#D5DBE4 2px, transparent 2px);
    background-size: 30px 30px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   C3: PARALLAX LAYER (เมฆ ☁️ / ใบไม้ 🍃 ลอยบนแผนที่)
   sticky + height:0 → ปักนิ่งกับ viewport ของแผนที่ ขณะโหนดเลื่อนผ่าน (= parallax)
   ========================================================================== */
.map-parallax {
    position: sticky;
    top: 0;
    height: 0;
    align-self: stretch;
    overflow: visible;
    z-index: 0;
    pointer-events: none;
}

.map-parallax .drift {
    position: absolute;
    user-select: none;
    will-change: transform;
}

.map-parallax .cloud {
    font-size: 52px;
    opacity: 0.5;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.05));
}
.map-parallax .leaf {
    font-size: 26px;
    opacity: 0.6;
}

/* เมฆลอยข้ามจอช้าๆ (คนละความเร็ว/ความสูง = ดูมีมิติ) */
.map-parallax .c1 { top: 40px;  animation: cloud-drift 42s linear infinite; }
.map-parallax .c2 { top: 150px; font-size: 38px; opacity: 0.38; animation: cloud-drift 58s linear infinite; animation-delay: -18s; }
.map-parallax .c3 { top: 300px; animation: cloud-drift 50s linear infinite; animation-delay: -34s; }

/* ใบไม้/ดอกไม้แกว่งเบาๆ อยู่กับที่ */
.map-parallax .l1 { top: 100px; left: 12%; animation: leaf-sway 7s ease-in-out infinite; }
.map-parallax .l2 { top: 360px; right: 14%; animation: leaf-sway 9s ease-in-out infinite; animation-delay: -3s; }
.map-parallax .l3 { top: 520px; left: 22%; animation: leaf-sway 8s ease-in-out infinite; animation-delay: -5s; }

@keyframes cloud-drift {
    from { transform: translateX(-70px); }
    to   { transform: translateX(520px); }
}

@keyframes leaf-sway {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50%      { transform: translateY(16px) rotate(12deg); }
}

.map-view::-webkit-scrollbar {
    display: none;
}

.map-header {
    display: none; 
}

.map-nodes-container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 40px; 
    padding: 30px 0 80px 0;
}

/* --- Chapter Banner (อัปเกรด Glassmorphism + สีแยกตามบท) --- */
.chapter-banner {
    width: 85%;
    color: white;
    padding: 16px 20px;
    border-radius: 20px;
    border: 3px solid rgba(255,255,255,0.4); /* เดิมอยู่ในธีม .theme-chN ย้ายมาไว้ที่ฐานเพราะทุกบทใช้เหมือนกัน */
    text-align: center;
    margin: 20px 0;
    position: sticky;
    top: 20px;
    z-index: 15;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.chapter-banner h3 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.chapter-banner p {
    font-size: 13px;
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* หมายเหตุ: สีธีมแต่ละ Chapter ย้ายไปเป็นข้อมูลใน chapters[] (lessons.js) แล้ว
   renderMap() ใส่ background/box-shadow/สีตัวอักษรแบบ inline ตอนสร้างป้าย
   → เพิ่ม Chapter ใหม่ไม่ต้องเขียน CSS เพิ่มอีกต่อไป */

/* --- The Nodes (ปุ่มด่าน 4D Glassmorphism) --- */
.level-node, .node-chest {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
    user-select: none;
    z-index: 2;
}

.node-left { margin-right: 65px; }
.node-right { margin-left: 65px; }

/* --- C9: The Journey Path (เส้นทาง chevron ไฟวิ่ง แทนบันไดไม้เดิม) --- */
/* ฐานร่วมทุกเส้น: ปักที่ "ขอบวงกลม" (ไม่ใช่ศูนย์กลาง) ยาวพอดีขอบ-ถึง-ขอบ เว้น gap ~2px หัวท้าย
   เรขาคณิตจริงจากโค้ด: โหนด 82px (รัศมี 41) · gap คอนเทนเนอร์ 40px → ศูนย์กลางแนวตั้ง 122px
   · แนวนอน (margin 65px) 65px → ศูนย์กลาง-ศูนย์กลาง ~138px
   → เส้นเริ่มที่ 43px จากศูนย์ (ขอบ41 + gap2) ยาว 52px จบที่ 95px (ขอบโหนดถัดไป − gap2)
   · มุมจากแนวตั้ง = atan(65/122) ≈ 28° · translateY(-43px) ดันบาร์ออกไปตามแนวเส้นให้พ้นวงกลม */
.level-node.has-line::before,
.node-chest.has-line::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: calc(50% - 10px); /* กึ่งกลางบาร์กว้าง 20px ให้ bottom-center ตรงศูนย์กลางโหนดพอดี */
    width: 20px;
    height: 52px;
    transform-origin: bottom center;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M4 2 L10 8 L16 2' fill='none' stroke='%23C0C9D4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: center 0;
}
.level-node.node-right.has-line::before,
.node-chest.node-right.has-line::before {
    transform: rotate(-28deg) translateY(-43px); /* โหนดถัดไปอยู่ "บน-ซ้าย" → เอียงทวนเข็ม */
}
.level-node.node-left.has-line::before,
.node-chest.node-left.has-line::before {
    transform: rotate(28deg) translateY(-43px);  /* โหนดถัดไปอยู่ "บน-ขวา" → เอียงตามเข็ม */
}

/* สถานะ (2) ผ่านแล้ว = chevron เขียวธีมจาง "นิ่ง" (ไม่มีไฟวิ่ง) */
.node-completed.has-line::before,
.node-chest.opened.has-line::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M4 2 L10 8 L16 2' fill='none' stroke='%2382D3A4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* สถานะ (1) เล่นต่อ = chevron ทอง #FFD54F "วิ่งเข้าหาโหนด" (เส้นเดียวที่วิ่ง) */
.node-active.has-line::before,
.node-chest.ready.has-line::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M4 2 L10 8 L16 2' fill='none' stroke='%23FFD54F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 0 3px rgba(255, 213, 79, 0.9));
    animation: chevron-flow 0.7s linear infinite;
}

/* ไฟวิ่งลง (ปลายบาร์ด้านล่าง = ฝั่งโหนด active) = "วิ่งเข้าหาโหนด" · 12px = สูง 1 cell พอดี ลูปเนียน */
@keyframes chevron-flow {
    from { background-position: center 0; }
    to   { background-position: center 12px; }
}

.map-decoration {
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.15));
}

/* --- Node States 4D Glassmorphism --- */
.node-completed {
    background: linear-gradient(145deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 0 #1E8449, inset 0 6px 8px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.node-completed:active { 
    transform: translateY(6px); 
    box-shadow: 0 0 0 #1E8449, inset 0 4px 6px rgba(255,255,255,0.4); 
}

.node-active {
    background: linear-gradient(145deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9));
    color: white;
    border: 4px solid #FFFFFF;
    box-shadow: 0 6px 0 #1E8449, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 6px rgba(46, 204, 113, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pulse-node 2s infinite;
}
.node-active:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1E8449, inset 0 4px 6px rgba(255,255,255,0.5);
}

/* --- C2: Player Pin (หมุดผู้เล่น) --- */
.player-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 44px;
    line-height: 1;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.35));
    animation: pin-bob 1s ease-in-out infinite;
}
@keyframes pin-bob {
    0%, 100% { transform: translate(-50%, calc(-50% - 11px)); }
    50%      { transform: translate(-50%, calc(-50% - 21px)); }
}

.node-locked {
    background: linear-gradient(145deg, rgba(234, 236, 238, 0.85), rgba(213, 219, 228, 0.85));
    color: #95A5A6;
    border: 3px solid rgba(255,255,255,0.5);
    box-shadow: 0 6px 0 #AAB7B8, inset 0 4px 6px rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: not-allowed;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.node-locked-num { font-size: 22px; font-weight: 700; }
.node-locked-icon { font-size: 14px; margin-top: 2px; }

/* --- C4: โหนดทีเซอร์ท้ายแผนที่ (ยังมีด่านอีก · กันเข้าใจผิดว่าแอปจบ) --- */
.map-teaser {
    flex-direction: column;
    gap: 2px;
    background: rgba(236, 240, 241, 0.55);
    border: 3px dashed #B5C0CC;
    color: #8A97A3;
    box-shadow: none;
    cursor: default;
    animation: teaser-breathe 2.4s ease-in-out infinite;
}
.map-teaser .teaser-icon { font-size: 26px; line-height: 1; }
.map-teaser .teaser-text { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; }

@keyframes teaser-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

/* --- Boss Nodes 4D --- */
.node-boss {
    width: 100px;
    height: 100px;
    font-size: 34px;
}
.node-boss.node-locked { 
    border-color: rgba(255,255,255,0.5); 
    box-shadow: 0 8px 0 #AAB7B8, inset 0 4px 6px rgba(255,255,255,0.6);
}
.node-boss.node-active {
    background: linear-gradient(145deg, rgba(241, 196, 15, 0.9), rgba(243, 156, 18, 0.9));
    border: 4px solid #FFFFFF;
    box-shadow: 0 8px 0 #B9770E, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 6px rgba(241, 196, 15, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pulse-boss 2s infinite;
}
.node-boss.node-active:active { 
    transform: translateY(8px); 
    box-shadow: 0 0 0 #B9770E, inset 0 4px 6px rgba(255,255,255,0.5); 
}

/* --- Chest Nodes 4D --- */
.node-chest {
    font-size: 32px;
}
.node-chest.locked {
    background: linear-gradient(145deg, rgba(234, 236, 238, 0.85), rgba(213, 219, 228, 0.85));
    color: #95A5A6;
    border: 3px solid rgba(255,255,255,0.5);
    box-shadow: 0 6px 0 #AAB7B8, inset 0 4px 6px rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: not-allowed;
}
.node-chest.opened {
    background: linear-gradient(145deg, rgba(189, 195, 199, 0.9), rgba(149, 165, 166, 0.9));
    color: #FFFFFF;
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow: 0 4px 0 #7F8C8D, inset 0 4px 6px rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.node-chest.ready {
    background: linear-gradient(145deg, rgba(243, 156, 18, 0.9), rgba(214, 137, 16, 0.9));
    color: white;
    border: 4px solid #FFFFFF;
    box-shadow: 0 6px 0 #A04000, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 6px rgba(243, 156, 18, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pulse-chest 1.5s infinite;
}
.node-chest.ready:active { 
    transform: translateY(6px); 
    box-shadow: 0 0 0 #A04000, inset 0 4px 6px rgba(255,255,255,0.5); 
}

@keyframes pulse-node {
    0% { box-shadow: 0 6px 0 #1E8449, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(46, 204, 113, 0.7); }
    70% { box-shadow: 0 6px 0 #1E8449, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 15px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 6px 0 #1E8449, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(46, 204, 113, 0); }
}

@keyframes pulse-boss {
    0% { box-shadow: 0 8px 0 #B9770E, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(241, 196, 15, 0.7); }
    70% { box-shadow: 0 8px 0 #B9770E, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 20px rgba(241, 196, 15, 0); }
    100% { box-shadow: 0 8px 0 #B9770E, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(241, 196, 15, 0); }
}

@keyframes pulse-chest {
    0% { box-shadow: 0 6px 0 #A04000, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(243, 156, 18, 0.7); transform: scale(1); }
    50% { transform: scale(1.05); }
    70% { box-shadow: 0 6px 0 #A04000, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 20px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 6px 0 #A04000, inset 0 6px 8px rgba(255,255,255,0.5), 0 0 0 0 rgba(243, 156, 18, 0); transform: scale(1); }
}

/* ==========================================================================
   4. BOTTOM NAVIGATION (แถบเมนูด้านล่าง)
   ========================================================================== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background-color: var(--card-bg);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 15px)); 
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.06);
    border-top: 2px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    z-index: 100;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #95A5A6;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex: 1;
    max-width: 90px;
    height: 56px;
    border-radius: 18px;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-icon {
    font-size: 26px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ข้อความไทยใต้ไอคอน — ช่วยกลุ่มมือใหม่/อ่านอังกฤษไม่ออก รู้ว่าแต่ละเมนูคืออะไร */
.bottom-nav-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
}

.bottom-nav-item.active {
    color: #27AE60;
    background-color: #E9F9EF;
}

.bottom-nav-item.active .bottom-nav-label {
    font-weight: 700;
}

.bottom-nav-item.active .bottom-nav-icon {
    transform: scale(1.12) translateY(-1px);
}

.bottom-nav-item:active {
    transform: scale(0.9);
}

/* ==========================================================================
   5. LESSON VIEW STYLES (ห้องเรียน, การ์ดหลัก, ปุ่มไมค์/ลำโพง 3D)
   ========================================================================== */
.lesson-view {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.lesson-header-bar {
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.back-btn {
    background: white;
    border: 2px solid var(--border-color);
    color: #7F8C8D;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--border-color);
    transition: all 0.1s;
}

.back-btn i { font-size: 18px; }

.back-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

.middle-section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 20px;
    min-height: 0;
}

.main-card {
    background: var(--card-bg);
    border-radius: 28px;
    padding: 20px 20px;
    border: 3px solid var(--border-color);
    box-shadow: 0 10px 0 var(--border-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    transition: transform 0.5s ease;
}

.level-banner {
    background-color: #E8F8F5;
    color: var(--success-color);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 2px solid #A9DFBF;
}

.instruction-box {
    font-size: 18px;
    font-weight: 600;
    color: #7F8C8D;
    margin-bottom: 20px;
}

.challenge-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.action-buttons {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
}

/* 3D Action Buttons */
.speaker-btn {
    background: linear-gradient(145deg, #3498DB, #2980B9);
    color: white;
    border: 3px solid #1A5276;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 0 #1A5276, inset 0 4px 0 rgba(255,255,255,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
}

.speaker-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1A5276, inset 0 4px 0 rgba(255,255,255,0.3);
}

.speaker-btn.playing {
    animation: pulse-blue 1s infinite;
}

.slow-speaker-btn {
    background: linear-gradient(145deg, #F39C12, #D68910);
    color: white;
    border: 3px solid #A04000;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    line-height: 1;
    box-shadow: 0 6px 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    position: relative;
}

.slow-speaker-btn i {
    font-size: 24px;
}

.slow-speaker-btn .turtle-icon {
    font-size: 16px;
}

.slow-speaker-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3);
}

.slow-speaker-btn.playing {
    animation: pulse-orange 1s infinite;
}

@keyframes pulse-orange {
    0% { box-shadow: 0 6px 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3), 0 0 0 0 rgba(243, 156, 18, 0.7); }
    70% { box-shadow: 0 6px 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3), 0 0 0 15px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 6px 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3), 0 0 0 0 rgba(243, 156, 18, 0); }
}

.mic-btn {
    background: linear-gradient(145deg, #2ECC71, #27AE60);
    color: white;
    border: 3px solid #1E8449;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
    transition: transform 0.1s, box-shadow 0.1s, background 0.3s;
    position: relative;
}

.mic-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
}

.mic-btn.recording {
    background: linear-gradient(145deg, #E74C3C, #C0392B);
    border-color: #7B241C;
    box-shadow: 0 6px 0 #7B241C, inset 0 4px 0 rgba(255,255,255,0.3);
    animation: pulse-red 1.5s infinite;
}

/* D5a: ปุ่มสำรองข้อพูด — โผล่เฉพาะเมื่อไมค์ล้มเหลว/ไม่รองรับ (กันติดตายที่ด่านพูด) */
.speak-fallback-btn {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    background: #FFF6E6;
    color: #B9770E;
    border: 2px dashed #F0B34E;
    border-radius: 14px;
    font-family: 'Prompt', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.speak-fallback-btn:active {
    transform: scale(0.98);
    background: #FDEBC8;
}

.challenge-word {
    font-size: 32pt;
    font-weight: 700;
    color: var(--primary-text);
    letter-spacing: 1px;
    display: none;
    text-align: center;
    line-height: 1.2;
}

.input-field {
    width: 100%;
    font-size: 20px;
    padding: 16px 20px;
    text-align: center;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    background: #F4F7F9;
    color: var(--primary-text);
    outline: none;
    transition: all 0.3s;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.05);
    font-weight: 500;
}

.input-field:focus {
    border-color: #3498DB;
    background: #FFFFFF;
    box-shadow: inset 0 2px 6px rgba(52, 152, 219, 0.1);
}

/* --- โหมดแตะเลือกตอบ (Multiple Choice) สำหรับมือใหม่/เด็ก --- */
.choice-area {
    display: none;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

/* โหมด A0: ตัวเลือกเป็นรูป/ตัวอักษรเดี่ยว → การ์ดใหญ่ 2x2 แตะง่ายสำหรับเด็ก */
.choice-area--icons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.choice-area--icons .choice-btn {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
    padding: 0;
    font-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choice-btn {
    background-color: var(--card-bg);
    border: 3px solid var(--border-color);
    border-radius: 18px;
    padding: 12px 16px;
    color: var(--primary-text);
    text-align: center;
    font-family: 'Prompt', sans-serif;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
    box-shadow: 0 4px 0 var(--border-color);
}

.choice-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

.choice-btn.selected {
    border-color: #3498DB;
    background-color: #EBF5FB;
    color: #2980B9;
    box-shadow: 0 4px 0 #21618C;
}

.choice-btn.selected:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #21618C;
}

/* emoji ตัวใหญ่บนการ์ด (โหมดพูด) เพื่อช่วยจำคำศัพท์ */
.card-emoji {
    display: block;
    font-size: 56px;
    line-height: 1;
    margin-bottom: 10px;
}

/* บรรทัดเฉลย (emoji + คำ + ความหมาย) ใน popup ตอนตอบถูก */
.success-reveal {
    display: inline-block;
    margin-top: 6px;
    font-size: 17px;
    font-weight: 600;
    color: var(--success-color);
}

.bottom-section {
    flex-shrink: 0;
    padding-bottom: 15px;
    padding-top: 10px;
}

/* 3D Check Button */
.check-btn {
    width: 100%;
    background: linear-gradient(145deg, #3498DB, #2980B9);
    color: white;
    font-size: 20px;
    font-weight: 700;
    padding: 15px;
    border: 3px solid #1A5276;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 8px 0 #1A5276, inset 0 4px 0 rgba(255,255,255,0.2);
    transition: transform 0.1s, box-shadow 0.1s;
    text-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

.check-btn:active {
    transform: translateY(8px);
    box-shadow: 0 0 0 #1A5276, inset 0 4px 0 rgba(255,255,255,0.2);
}

/* ==========================================================================
   6. FEEDBACK MODALS & DIFF ALGORITHM STYLES
   ========================================================================== */
.feedback-modal {
    position: absolute;
    bottom: -250px;
    left: 0;
    width: 100%;
    padding: 20px 20px 35px 20px;
    border-radius: 24px 24px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    z-index: 4000;
}

.feedback-modal.show {
    bottom: 0;
}

.feedback-modal.success {
    background-color: #D5F5E3;
    color: var(--success-color);
    border-top: 4px solid #27AE60;
}

.feedback-modal.error {
    background-color: #FADBD8;
    color: var(--danger-color);
    border-top: 4px solid #C0392B;
}

/* ปุ่มกดไปต่อ (Manual Feedback Dismissal) */
.feedback-next-btn {
    width: 100%;
    margin-top: 18px;
    padding: 16px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Prompt', sans-serif;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    text-shadow: 0 2px 2px rgba(0,0,0,0.15);
    display: none; /* ซ่อนไว้ก่อน */
}

.feedback-modal.show .feedback-next-btn {
    display: block;
    animation: popUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
}

.feedback-modal.success .feedback-next-btn {
    background: linear-gradient(145deg, #2ECC71, #27AE60);
    color: white;
    border: 3px solid #1E8449;
    box-shadow: 0 6px 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
}

.feedback-modal.success .feedback-next-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
}

.feedback-modal.error .feedback-next-btn {
    background: linear-gradient(145deg, #E74C3C, #C0392B);
    color: white;
    border: 3px solid #7B241C;
    box-shadow: 0 6px 0 #7B241C, inset 0 4px 0 rgba(255,255,255,0.3);
}

.feedback-modal.error .feedback-next-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #7B241C, inset 0 4px 0 rgba(255,255,255,0.3);
}

.diff-correct {
    color: var(--success-color);
}

.diff-incorrect {
    color: var(--danger-color);
    text-decoration: underline;
    font-weight: 700;
}

.user-audio-btn {
    background: linear-gradient(145deg, #9B59B6, #8E44AD);
    color: white;
    border: 2px solid #6C3483;
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 8px;
    font-weight: 700;
    box-shadow: 0 4px 0 #6C3483;
    transition: transform 0.1s, box-shadow 0.1s;
    display: inline-flex;
    align-items: center;
}

.user-audio-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #6C3483;
}

.feedback-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ==========================================================================
   7. LEVEL COMPLETE OVERLAY (เมื่อผ่านด่าน)
   ========================================================================== */
.level-complete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 999; 
    backdrop-filter: blur(4px); 
    animation: fadeIn 0.3s ease;
}

.level-complete-overlay.show {
    display: flex;
}

.level-complete-modal {
    background-color: var(--card-bg);
    padding: 35px 25px;
    border-radius: 28px;
    border: 3px solid var(--border-color);
    text-align: center;
    width: 85%;
    max-width: 350px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    animation: popUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; /* C8: ให้ modal ลอยเหนือชั้นดาวตก */
    z-index: 2;
}

/* ==========================================================================
   C8: CHAPTER CELEBRATION (ฉลองจบบท — ดาวตก ⭐ + ลูกเจี๊ยบ 🐤 เด้ง)
   ========================================================================== */
.chapter-celebrate {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    z-index: 1;
}
.level-complete-overlay.chapter-complete .chapter-celebrate {
    display: block;
}

.chapter-celebrate .cc-star {
    position: absolute;
    top: -40px;
    font-size: 26px;
    opacity: 0;
    animation: cc-fall 3s linear infinite;
}
.chapter-celebrate .s1 { left: 8%;  font-size: 30px; animation-delay: 0s;   }
.chapter-celebrate .s2 { left: 26%; animation-delay: 0.7s; }
.chapter-celebrate .s3 { left: 45%; font-size: 32px; animation-delay: 1.4s; }
.chapter-celebrate .s4 { left: 63%; animation-delay: 0.3s; }
.chapter-celebrate .s5 { left: 80%; font-size: 30px; animation-delay: 1.0s; }
.chapter-celebrate .s6 { left: 92%; animation-delay: 1.9s; }

.chapter-celebrate .cc-chick {
    position: absolute;
    left: 50%;
    top: 18%;
    font-size: 60px;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
    animation: cc-bounce 0.7s ease-in-out infinite;
}

@keyframes cc-fall {
    0%   { transform: translateY(-40px) rotate(0deg);   opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(102vh) rotate(360deg); opacity: 0.9; }
}

@keyframes cc-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0)     rotate(-7deg); }
    50%      { transform: translateX(-50%) translateY(-24px) rotate(7deg); }
}

#level-complete-title {
    color: var(--success-color);
    font-size: 26px;
    margin-bottom: 8px;
    font-weight: 700;
}

#level-complete-msg {
    color: var(--primary-text);
    font-size: 16px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.next-level-btn {
    background: linear-gradient(145deg, #2ECC71, #27AE60);
    color: white;
    border: 3px solid #1E8449;
    padding: 16px 24px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 6px 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    text-shadow: 0 2px 2px rgba(0,0,0,0.15);
}

.next-level-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1E8449, inset 0 4px 0 rgba(255,255,255,0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes popUp {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   8. MINI-GAME ENGINE UI (Phase 4.4)
   ========================================================================== */
.minigame-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 3500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.minigame-modal {
    width: 100%;
    max-width: 420px;
    background-color: var(--card-bg);
    border-radius: 28px;
    border: 3px solid var(--border-color);
    padding: 24px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

/* --- D5b: หน้าโปรไฟล์ (สถิติย่อ + สำรอง/กู้คืนข้อมูล) --- */
.profile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 3500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}

.profile-modal {
    width: 100%;
    max-width: 420px;
    background-color: var(--card-bg);
    border-radius: 28px;
    border: 3px solid var(--border-color);
    padding: 24px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.profile-header h2 {
    color: var(--primary-text);
    font-size: 1.4rem;
}

.profile-close-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--bg-color);
    color: var(--primary-text);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin-bottom: 22px;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    background: var(--bg-color);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 6px;
}

.profile-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--progress-color);
}

.profile-stat-label {
    font-size: 0.8rem;
    color: var(--primary-text);
    opacity: 0.75;
}

.profile-backup {
    border-top: 2px solid var(--border-color);
    padding-top: 16px;
}

.profile-backup h3 {
    color: var(--primary-text);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.profile-backup-note {
    font-size: 0.85rem;
    color: var(--primary-text);
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 16px;
}

.profile-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
}

.profile-btn.export {
    background: var(--progress-color);
    color: #FFFFFF;
    border-color: var(--success-color);
    box-shadow: 0 4px 0 var(--success-color);
}

.profile-btn.import {
    background: var(--card-bg);
    color: var(--primary-text);
    box-shadow: 0 4px 0 var(--border-color);
}

.profile-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* --- D2a: Toast แจ้งเวอร์ชันใหม่ (auto-update UX) --- */
.update-toast {
    position: fixed;
    left: 50%;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)); /* ลอยเหนือ bottom-nav */
    transform: translateX(-50%) translateY(20px);
    background: var(--primary-text);
    color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 4000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 90%;
}

.update-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.update-toast-text {
    font-size: 0.9rem;
}

.update-toast-btn {
    background: var(--progress-color);
    color: #FFFFFF;
    border: none;
    padding: 8px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: 'Prompt', sans-serif;
    white-space: nowrap;
}

/* --- D5c: ป้ายสอนติดตั้งลงหน้าจอโฮม (iPhone Safari) --- */
.ios-install-banner {
    position: fixed;
    left: 50%;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)); /* ลอยเหนือ bottom-nav เหนือปุ่มแชร์ Safari */
    transform: translateX(-50%) translateY(20px);
    width: calc(100% - 24px);
    max-width: 420px;
    background: #FFFFFF;
    color: var(--primary-text);
    padding: 14px 16px;
    border-radius: 18px;
    border: 2px solid var(--progress-color);
    display: none;               /* JS เปิดเมื่อเข้าเงื่อนไข iOS Safari เท่านั้น */
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
    z-index: 4000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ios-install-banner.show {
    display: flex;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ios-install-mascot {
    font-size: 34px;
    line-height: 1;
    flex-shrink: 0;
}
.ios-install-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
    line-height: 1.35;
}
.ios-install-body strong {
    font-weight: 700;
    color: var(--progress-color);
}
.ios-share-icon {
    font-size: 0.95rem;
}
.ios-install-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1rem;
    color: #9AA5B1;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    font-family: 'Prompt', sans-serif;
}

.minigame-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 12px;
}

.minigame-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: #F39C12; 
}

.minigame-header p {
    font-size: 14px;
    color: #7F8C8D;
    margin-top: 4px;
}

.minigame-content {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
}

.minigame-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.minigame-btn {
    width: 100%;
    font-family: 'Prompt', sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding: 16px;
    border-radius: 20px;
    border: 3px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform 0.1s, box-shadow 0.1s;
}

.minigame-btn.check {
    background: linear-gradient(145deg, #F39C12, #D68910);
    color: white;
    border-color: #A04000;
    box-shadow: 0 6px 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3);
}

.minigame-btn.check:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #A04000, inset 0 4px 0 rgba(255,255,255,0.3);
}

.minigame-btn.skip {
    background: linear-gradient(145deg, #E0E6ED, #BDC3C7);
    color: #7F8C8D;
    border-color: #95A5A6;
    box-shadow: 0 6px 0 #95A5A6;
}

.minigame-btn.skip:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #95A5A6;
}

/* --- Sub Game 1: Flashcard Quiz Styles --- */
.flashcard-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.flashcard-option {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 16px;
    color: var(--primary-text);
    text-align: left;
    font-family: 'Prompt', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 0 var(--border-color);
    font-weight: 600;
}

.flashcard-option:active {
    background-color: #F4F7F9;
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

.flashcard-option.selected {
    border-color: #3498DB;
    background-color: #EBF5FB;
    color: #2980B9;
    box-shadow: 0 4px 0 #21618C;
}

.flashcard-option.selected:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 #21618C;
}

/* --- Sub Game 2: Word Matching Grid Styles --- */
.matching-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.matching-item {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 8px;
    text-align: center;
    font-family: 'Prompt', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-text);
    cursor: pointer;
    transition: all 0.1s;
    word-break: break-word;
    box-shadow: 0 4px 0 var(--border-color);
}

.matching-item:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

.matching-item.selected {
    border-color: #F39C12;
    background-color: #FEF9E7;
    color: #D68910;
    box-shadow: 0 4px 0 #B9770E;
}

.matching-item.matched {
    border-color: var(--success-color);
    background-color: #EAFAF1;
    color: var(--success-color);
    box-shadow: 0 4px 0 var(--success-color);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

/* --- Sub Game 3 & 6: Sentence Builder & Scramble Styles --- */
.sentence-slots, .scramble-slots {
    min-height: 60px;
    background-color: #F4F7F9;
    border: 2px dashed #BDC3C7;
    border-radius: 20px;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-bottom: 16px;
    width: 100%;
    justify-content: center;
}

.word-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.word-chip {
    background-color: white;
    border: 2px solid var(--border-color);
    color: var(--primary-text);
    padding: 10px 16px;
    border-radius: 16px;
    font-family: 'Prompt', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--border-color);
    transition: transform 0.1s, box-shadow 0.1s;
}

.word-chip:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

/* --- Sub Game 4: Time Attack Elements --- */
.time-attack-timer {
    width: 100%;
    height: 14px;
    background-color: var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.timer-fill {
    height: 100%;
    width: 100%;
    background-color: var(--danger-color);
    border-radius: 8px;
    transition: width 0.1s linear;
}

/* --- Sub Game 7: Missing Link --- */
.inline-blank {
    display: inline-block;
    min-width: 60px;
    border-bottom: 3px dashed #F39C12;
    margin: 0 6px;
    color: #F39C12;
    text-align: center;
}

/* ==========================================================================
   9. BOSS STAGE UI & ANIMATIONS (Phase 4.5 - "Poring Slime" Theme)
   ========================================================================== */
#boss-container {
    display: none;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    height: 78px;
}

/* เปลี่ยนสีร่างและทรงสไลม์ให้ดูกลม อ้วนท้วน สีชมพูน่ารัก */
#boss-character {
    width: 82px;
    height: 74px;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 15px 15px rgba(255, 118, 117, 0.3), inset -10px -15px 20px rgba(255, 118, 117, 0.4);
    position: relative;
    transition: all 0.3s ease;
}

/* เติมแก้มแดง 2 ข้าง ให้ดูเขินๆ */
.boss-blush {
    position: absolute;
    top: 52%;
    width: 15px;
    height: 8px;
    background: rgba(255, 118, 117, 0.6);
    border-radius: 50%;
    filter: blur(2px);
}
.boss-blush.left { left: 15%; }
.boss-blush.right { right: 15%; }

/* ปรับตาสไลม์ให้เป็นตาแบ๊ว วงรีแนวตั้ง */
.boss-eyes {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.boss-eye {
    width: 12px;
    height: 18px;
    background: #2d3436; 
    border-radius: 50%;
    position: relative;
    box-shadow: none; 
    transform: none; 
}

/* จุดแสงสีขาวในตา (Catchlight) ให้ตาเป็นประกาย */
.boss-eye::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 7px;
    background: white;
    border-radius: 50%;
}

/* เปลี่ยนปากให้เป็นรอยยิ้มเล็กๆ คว่ำลง */
.boss-mouth {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    border-bottom: 3px solid #2d3436;
    border-radius: 0 0 15px 15px;
    background: transparent;
}

/* สถานะและแอนิเมชัน (ปรับแก้สีแฟลชสว่างขึ้น) */
.boss-idle {
    animation: boss-float 3s ease-in-out infinite;
}

.boss-hurt {
    animation: boss-damage 0.6s ease-out;
    background: linear-gradient(135deg, #ffffff, #ff7675) !important;
    transform: scale(0.8);
}

.boss-attack {
    animation: boss-lunge 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes boss-float {
    0%, 100% {
        transform: translateY(0) scale(1);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }
    50% {
        transform: translateY(-15px) scale(1.05);
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
}

@keyframes boss-damage {
    0% { transform: scale(1) translateX(0); }
    20% { transform: scale(0.8) translateX(-10px); }
    40% { transform: scale(0.8) translateX(10px); }
    60% { transform: scale(0.8) translateX(-10px); }
    80% { transform: scale(0.8) translateX(10px); }
    100% { transform: scale(1) translateX(0); }
}

@keyframes boss-lunge {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.4) translateY(20px); }
    100% { transform: scale(1) translateY(0); }
}

/* ==========================================================================
   🐤 MASCOT "ezeng" — ลูกเจี๊ยบ (inline SVG)
   โผล่ "กลางจอ" ตอนตอบถูก/ผิด · ถูก=กระโดด · ผิด=ซูมเข้า-ออก
   สลับหน้า+ขยับปีก ด้วย .feedback-modal.success/.error (sibling ~ .mascot)
   ========================================================================== */
.mascot {
    position: fixed;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 168px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5000;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
/* โผล่กลางจอเมื่อแถบ feedback แสดง (sibling combinator) */
.feedback-modal.show ~ .mascot {
    opacity: 1;
    visibility: visible;
}
/* ชั้นในสำหรับแอนิเมชันกระโดด/ซูม (แยกจากการจัดกลางของ .mascot) */
.mascot-inner {
    transform-origin: 50% 82%;
    will-change: transform;
}
.mascot-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.18));
}

/* ปีก (แขน) ขยับได้ */
.wing {
    transform-box: view-box;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wing-left  { transform-origin: 43px 98px; }
.wing-right { transform-origin: 157px 98px; }

/* หน้า: โชว์ยิ้ม · ซ่อนเศร้าไว้ก่อน */
.chick-sad { display: none; }

/* === ตอบถูก 😄 : กระโดด + ยิ้ม + กระพือปีกขึ้น === */
/* กระโดดวน ~3 วินาที (0.6s × 5) */
.feedback-modal.success ~ .mascot .mascot-inner { animation: chick-jump 0.6s ease-in-out 5 both; }
.feedback-modal.success ~ .mascot .wing-left  { transform: rotate(-38deg); }
.feedback-modal.success ~ .mascot .wing-right { transform: rotate(38deg); }

/* === ตอบผิด 🥺 : ซูมเข้า-ออก + หน้าเศร้า + ปีกตก === */
/* ซูมเข้า-ออกวน ~3 วินาที (1s × 3) */
.feedback-modal.error ~ .mascot .mascot-inner { animation: chick-zoom 1s ease-in-out 3 both; }
.feedback-modal.error ~ .mascot .chick-happy { display: none; }
.feedback-modal.error ~ .mascot .chick-sad   { display: block; }
.feedback-modal.error ~ .mascot .wing-left  { transform: rotate(14deg); }
.feedback-modal.error ~ .mascot .wing-right { transform: rotate(-14deg); }

/* ----- Keyframes ----- */
@keyframes chick-jump {
    0%   { transform: translateY(0)     scaleY(1); }
    14%  { transform: translateY(0)     scaleY(0.9); }
    40%  { transform: translateY(-34px) scaleY(1.05); }
    58%  { transform: translateY(0)     scaleY(0.94); }
    76%  { transform: translateY(-14px) scaleY(1.02); }
    100% { transform: translateY(0)     scaleY(1); }
}
@keyframes chick-zoom {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.16); }
    55%  { transform: scale(0.95); }
    78%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* (ลบคอนเฟตตีออกตามคำสั่งเจ้าของ — เก็บเฉพาะลูกเจี๊ยบ + กระโดด/ซูม/หน้า) */

/* ==========================================================================
   PLACEMENT TEST (แบบวัดระดับก่อนเริ่ม — โผล่เฉพาะ launch ครั้งแรก)
   ใช้คลาสปุ่ม .choice-btn เดิมในหน้าเลือกคำตอบ เพื่อให้หน้าตากลืนกับด่านจริง
   ========================================================================== */
.placement-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    text-align: center;
    overflow-y: auto;
}

.pl-screen {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pl-mascot {
    font-size: 84px;
    line-height: 1;
    margin-bottom: 12px;
    animation: pl-bob 2s ease-in-out infinite;
}
@keyframes pl-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.pl-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-text);
    margin: 0 0 10px;
    line-height: 1.35;
}

.pl-sub {
    font-size: 16px;
    color: #5B6B7A;
    line-height: 1.55;
    margin: 0 0 26px;
}
.pl-result-hint {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: #7A8896;
}

.pl-btn {
    width: 100%;
    max-width: 340px;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 19px;
    padding: 15px;
    border-radius: 18px;
    cursor: pointer;
    margin-bottom: 12px;
    transition: transform 0.1s, box-shadow 0.1s;
}
.pl-btn-primary {
    background: linear-gradient(145deg, #2ECC71, #27AE60);
    color: #fff;
    border: 3px solid #1E8449;
    box-shadow: 0 6px 0 #1E8449, inset 0 3px 0 rgba(255,255,255,0.2);
    text-shadow: 0 2px 2px rgba(0,0,0,0.15);
}
.pl-btn-primary:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1E8449, inset 0 3px 0 rgba(255,255,255,0.2);
}
.pl-btn-secondary {
    background: var(--card-bg);
    color: #5B6B7A;
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 0 var(--border-color);
}
.pl-btn-secondary:active {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--border-color);
}

.pl-dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}
.pl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s, transform 0.2s;
}
.pl-dot.done    { background: #2ECC71; }
.pl-dot.current { background: #F1C40F; transform: scale(1.25); }

.pl-card {
    width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 24px;
    padding: 24px 18px;
    box-shadow: 0 6px 0 var(--border-color);
}
.pl-instruction {
    font-size: 19px;
    font-weight: 600;
    color: var(--primary-text);
    line-height: 1.5;
    margin-bottom: 18px;
}
.pl-read-sentence {
    display: block;
    margin-top: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #2980B9;
}
.pl-speaker {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
    background: linear-gradient(145deg, #3498DB, #2980B9);
    border: 3px solid #1A5276;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 0 #1A5276;
    transition: transform 0.1s, box-shadow 0.1s;
}
.pl-speaker:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #1A5276;
}
.pl-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}