/* TeachJourney Premium Theme styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f6f9; display: flex; height: 100vh; overflow: hidden; position: relative; }

/* Sidebar Navigation Layout */
.sidebar { width: 240px; background: #1a1a2e; color: #ffffff; display: flex; flex-direction: column; padding: 20px 0; shrink: 0; position: relative; z-index: 10; }
.brand-title { font-size: 22px; font-weight: 700; color: #00b4d8; text-align: center; margin-bottom: 35px; }

/* FIXED: Sidebar Layout Config and Premium Custom Scrollbar */
.menu-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.menu-list::-webkit-scrollbar { width: 4px; }
.menu-list::-webkit-scrollbar-track { background: #1a1a2e; }
.menu-list::-webkit-scrollbar-thumb { background: #00b4d8; border-radius: 2px; }

/* FIXED: Premium Custom Multi-Lesson Left Sidebar Text Clip Warp */
.sidebar .menu-item { 
    padding: 12px 25px; 
    font-size: 14px; 
    cursor: pointer; 
    color: #b3b3b3; 
    transition: all 0.2s ease; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 4px solid transparent;
}
.sidebar .menu-item.active, .sidebar .menu-item:hover { 
    background: rgba(0, 180, 216, 0.1); 
    color: #fff; 
    font-weight: 600; 
    border-left: 4px solid #00b4d8;
}

/* Main Application Panel */
.main-wrapper { flex: 1; display: flex; flex-direction: column; background: #f8f9fa; overflow: hidden; transition: filter 0.3s ease; }
.notice-banner { background: #ffe3e3; color: #d90429; padding: 12px 30px; font-weight: 600; font-size: 14px; border-bottom: 2px solid #f5baba; }
.content-area { flex: 1; padding: 30px; display: flex; justify-content: center; align-items: flex-start; overflow-y: auto; }

/* Main Workspace App Grid */
.workspace-grid { display: flex; width: 100%; max-width: 1150px; gap: 30px; }

/* Left Side: Typing Workspace Container */
.typing-container { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.typing-box { background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e1e4e6; box-shadow: 0 4px 25px rgba(0,0,0,0.04); }
.lesson-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #f1f3f5; padding-bottom: 12px; }
.lesson-title { font-size: 20px; color: #2b2d42; font-weight: 600; }
.chapter-select { padding: 6px 12px; font-size: 14px; border-radius: 6px; border: 1px solid #ced4da; outline: none; cursor: pointer; background: #fff; }

/* FIXED: Immersive Storybook & Game Canvas Text Display */
.text-display { 
    font-size: 28px; 
    color: #94a3b8; /* Muted slate for untyped text */
    line-height: 1.8; 
    margin-bottom: 20px; 
    user-select: none; 
    padding: 30px; 
    border-radius: 16px; 
    border: none;
    /* Soft Paper/Parchment gradient background with deep premium glow */
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    box-shadow: inset 5px 5px 10px #e2e8f0, inset -5px -5px 10px #ffffff, 0 10px 30px rgba(0, 0, 0, 0.03);
    font-family: 'Fira Code', 'JetBrains Mono', monospace; 
    letter-spacing: 1px;
    position: relative;
}

/* Letter-by-Letter Highlighting Styles */
.text-display span { position: relative; transition: all 0.1s ease; padding: 0 1px; }
.text-display span.correct-char { 
    color: #64748b; /* Muted gray fade-out style like Monkeytype */
    background: transparent; 
}
.text-display span.incorrect-char { 
    color: #ffffff; 
    background: #ff4757; 
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(255, 71, 87, 0.5); /* Glowing error box */
}

/* FIXED: Smooth Sliding Neon Caret (Cursor) Animation with Glow Trail */
.text-display span.current-char { 
    background: rgba(0, 180, 216, 0.08); 
    color: #0f172a; 
    border-radius: 4px; 
    font-weight: bold; 
}
.text-display span.current-char::before {
    content: ""; 
    position: absolute; 
    left: -2px; 
    top: 15%; 
    width: 3.5px; 
    height: 70%;
    background: #00b4d8; 
    box-shadow: 0 0 12px #00b4d8, 0 0 20px #00b4d8; /* Intense neon glow */
    border-radius: 2px;
    animation: smoothBlink 0.8s infinite ease-in-out;
    /* Smooth sliding cursor transition trail */
    transition: left 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.typing-input { 
    width: 100%; 
    height: 100px; 
    font-size: 20px; 
    padding: 15px; 
    border: 2px solid #ced4da; 
    border-radius: 8px; 
    resize: none; 
    outline: none; 
    font-family: inherit;
    letter-spacing: 0.5px;
    transition: all 0.2s ease; 
    background: #fafafa;
}
.typing-input:focus { border-color: #00b4d8; background: #ffffff; box-shadow: 0 0 10px rgba(0, 180, 216, 0.15); }

/* Interactive Virtual Hands Guide Display Panel */
.hands-guide-box { background: #ffffff; padding: 20px; border-radius: 12px; border: 1px solid #e1e4e6; box-shadow: 0 4px 25px rgba(0,0,0,0.04); display: flex; justify-content: center; align-items: center; gap: 50px; }
.hand-svg { width: 160px; height: auto; }
.finger { fill: #eaeded; transition: fill 0.3s ease; }
.finger.active { fill: #ff4757; } 
.guide-text-panel { font-size: 16px; font-weight: 600; color: #2c3e50; background: #f8f9fa; padding: 10px 20px; border-radius: 8px; border-left: 4px solid #00b4d8; }

/* Right Sidebar layout for 3 Gauges */
.stats-sidebar { width: 240px; display: flex; flex-direction: column; gap: 20px; shrink: 0; }
.meter-card { background: #ffffff; border: 1px solid #e1e4e6; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 4px 25px rgba(0,0,0,0.03); }
.meter-label { font-size: 12px; font-weight: 700; color: #7f8c8d; letter-spacing: 1px; margin-bottom: 3px; }
.gauge-canvas { width: 100%; max-width: 160px; height: auto; display: block; margin: 0 auto; }
.digital-readout { font-size: 26px; font-weight: 800; color: #1a1a2e; margin-top: -5px; }
#wpm-readout { color: #00b4d8; }
#accuracy-readout { color: #2ecc71; }
#timer-readout { color: #ff9f43; }

/* Full Screen Message Overlay CSS Container */
.screen-blur-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(26, 26, 46, 0.85); 
    backdrop-filter: blur(8px); 
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.screen-blur-overlay.show { opacity: 1; pointer-events: auto; }

.modal-card {
    background: #ffffff; padding: 40px 60px; border-radius: 20px; text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); max-width: 500px; width: 90%;
    transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.screen-blur-overlay.show .modal-card { transform: scale(1); }

.modal-icon { font-size: 64px; margin-bottom: 15px; display: inline-block; animation: pulse 1.5s infinite; }
.modal-title { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.modal-desc { font-size: 16px; color: #57606f; margin-bottom: 25px; line-height: 1.5; }

.modal-countdown {
    font-size: 54px; font-weight: 900; background: #f1f2f6; width: 100px; height: 100px;
    display: flex; justify-content: center; align-items: center; border-radius: 50%;
    margin: 0 auto; color: #1e1e2f; border: 4px solid #00b4d8; box-shadow: 0 4px 15px rgba(0,180,216,0.2);
}

/* FIXED: Premium Badge Layout Styling for Modal Pop-up */
.badge-display {
    font-size: 22px;
    font-weight: 800;
    margin: 15px auto;
    padding: 8px 20px;
    border-radius: 30px;
    display: inline-block;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.badge-gold { background: #ffeaa7; color: #d63031; border: 2px solid #fdcb6e; }
.badge-silver { background: #dfe4ea; color: #2f3542; border: 2px solid #ced6e0; }
.badge-bronze { background: #ffdfd3; color: #a45c42; border: 2px solid #d8a28c; }

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