* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Simple Duo Theme: Paper & Pencil */
    --primary: #2d2d2d;
    --primary-dark: #1a1a1a;
    --secondary: #4a4a4a;
    --accent: #888888;
    --success: #48bb78;
    --warning: #ed8936;
    --danger: #f56565;
    --dark: #1a1a1a;
    --light: #fdfbf6;
    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Patrick Hand', 'Poppins', sans-serif;
    font-size: 1.1rem; /* Handwritten fonts usually need to be slightly larger */
    background: var(--light);
    min-height: 100vh;
    padding: 20px;
    color: var(--dark);
}

.container {
    max-width: 900px;
    margin: 0 auto;
}

/* Header */
.header {
    text-align: center;
    color: var(--dark);
    margin-bottom: 30px;
    animation: fadeInDown 0.8s ease;
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.header h1 i {
    margin-right: 10px;
}

.header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Lesson Selector */
.lesson-selector {
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.8s ease;
}

.lesson-selector h2 {
    font-size: 1.2rem;
    color: var(--dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lesson-selector h2 i {
    color: var(--primary);
}

.lesson-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lesson-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    background: white;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark);
    transition: var(--transition);
}

.lesson-btn:nth-child(odd) {
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.lesson-btn:nth-child(even) {
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
}

.lesson-btn:hover {
    border-color: var(--primary);
    background: #f2f2f2;
    transform: translateY(-2px);
}

.lesson-btn.active {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.lesson-btn i {
    font-size: 1rem;
}

/* Progress Bar */
.progress-container {
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.05);
    animation: fadeInUp 0.8s ease 0.1s backwards;
}

.progress-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 10px;
}

.progress-text {
    color: #718096;
    font-weight: 400;
    margin-left: 5px;
}

.progress-bar {
    height: 14px;
    background: transparent;
    border: 2px solid var(--dark);
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    padding: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--dark);
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    width: 0%;
    transition: width 0.5s ease;
}

/* Flashcard Container */
.flashcard-container {
    perspective: 1500px;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.flashcard {
    width: 100%;
    height: 380px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.flashcard:hover {
    transform: translate(-3px, -3px);
}

.flashcard-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; /* Sketchy card */
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--dark);
}

.flashcard-front {
    background: var(--light);
}

.flashcard-back {
    background: var(--dark);
    color: var(--light);
    transform: rotateY(180deg);
}

.card-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.flashcard-front .card-label {
    color: var(--dark);
}

.flashcard-back .card-label {
    color: var(--light);
}

.lesson-badge {
    display: inline-block;
    background: var(--gradient);
    color: white;
    padding: 6px 14px;
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 20px;
    align-self: flex-start;
}

.flashcard-front p,
.flashcard-back p {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.7;
    padding: 0 10px;
}

.flashcard-front p {
    color: var(--dark);
    font-weight: 500;
}

.flashcard-back p {
    font-size: 1.1rem;
}

.flip-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.6;
    margin-top: 15px;
}

.flashcard-front .flip-hint {
    color: var(--dark);
}

/* Controls */
.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    animation: fadeInUp 0.8s ease 0.3s backwards;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: none;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    cursor: pointer;
    font-family: 'Patrick Hand', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    border: 2px solid var(--dark); /* ensuring border exists for the look */
}

.prev-btn {
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.next-btn {
     border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
}

.prev-btn,
.next-btn {
    background: white;
    color: var(--dark);
}

.prev-btn:hover,
.next-btn:hover {
    background: var(--dark);
    color: var(--light); /* Ensure text is visible on dark background */
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
}

.shuffle-btn {
    background: var(--gradient);
    color: white;
}

.shuffle-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
}

/* Shortcuts */
.shortcuts {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    color: var(--dark);
    font-size: 0.85rem;
    margin-bottom: 25px;
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.shortcuts p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shortcuts span {
    display: flex;
    align-items: center;
    gap: 5px;
}

kbd {
    background: transparent;
    padding: 4px 10px;
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    border: 2px solid var(--dark);
    font-family: 'Patrick Hand', sans-serif;
    font-size: 0.9rem;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

/* Stats */
.stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    animation: fadeInUp 0.8s ease 0.5s backwards;
}

.stat-item {
    background: transparent;
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    padding: 20px 35px;
    text-align: center;
    color: var(--dark);
    border: 2px solid var(--dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.stat-item:nth-child(1) {
     border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
}

.stat-item:nth-child(2) {
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
}

.stat-item:nth-child(3) {
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
}

.stat-item i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

.stat-item span {
    font-size: 2rem;
    font-weight: 700;
    display: block;
}

.stat-item p {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 5px;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.flashcard:hover .flashcard-front,
.flashcard:hover .flashcard-back {
    box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .header {
        display: none;
    }

    .lesson-buttons {
        justify-content: center;
    }

    .lesson-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .flashcard {
        height: 350px;
    }

    .flashcard-front p,
    .flashcard-back p {
        font-size: 1rem;
    }

    .controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "prev next"
            "shuffle shuffle";
        gap: 10px;
        margin-bottom: 15px;
    }

    .prev-btn { grid-area: prev; }
    .next-btn { grid-area: next; }
    .shuffle-btn { grid-area: shuffle; }

    .secondary-controls {
         margin-bottom: 10px;
    }

    .control-btn {
        width: 100%;
        min-width: 0; 
        padding: 12px;
        justify-content: center;
        font-size: 0.9rem;
    }

    .control-btn span {
        display: none; /* Hide text on mobile for extra compactness? Or keep it? User didn't explicitly say hide text, but "more compact". Maybe just smaller font and padding is enough. Let's keep text for now but reduce padding. */
    }

    /* Actually, let's keep text but make it fit nicely */
    .control-btn span {
        display: inline; 
        font-size: 0.8rem;
    }
    
    .stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .stat-item {
        width: calc(33.33% - 10px);
        min-width: 80px;
        padding: 10px 5px;
    }
    
    .stat-item i {
        font-size: 1rem;
    }
    
    .stat-item span {
        font-size: 1.2rem;
    }
    
    .stat-item p {
        font-size: 0.7rem;
    }

    .shortcuts {
        display: none;
    }
}

@media (max-width: 480px) {
    body {
        padding: 15px;
    }

    .flashcard {
        height: 320px;
    }

    .flashcard-front,
    .flashcard-back {
        padding: 20px;
    }
}

/* Secondary Controls (Reset Button) */
.secondary-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease 0.35s backwards;
}

.reset-btn {
    background: transparent;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-family: 'Patrick Hand', sans-serif;
    letter-spacing: 1px;
}

.reset-btn:hover {
    background: var(--dark);
    color: var(--light);
    border-color: var(--dark);
    transform: translateY(-2px);
}

/* Notifications */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--light);
    border: 2px solid var(--dark);
    padding: 15px 25px;
    border-radius: 255px 18px 245px 12px / 20px 235px 25px 240px;
    box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    z-index: 1000;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification.show {
    transform: translateX(0);
}

.notification-success {
    border-left: 4px solid var(--success);
}

.notification-success i {
    color: var(--success);
}

.notification-info {
    border-left: 4px solid var(--primary);
}

.notification-info i {
    color: var(--primary);
}

.notification i {
    font-size: 1.2rem;
}

/* Shuffled indicator */
.shuffle-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--warning);
    color: white;
    padding: 4px 10px;
    border-radius: 23px 255px 12px 230px / 240px 15px 250px 18px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Progress saved indicator */
.saved-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--light);
    border: 1px dashed var(--dark);
    color: var(--dark);
    padding: 8px 15px;
    border-radius: 15px 225px 25px 235px / 255px 25px 225px 15px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.saved-indicator i {
    color: var(--success);
}

@media (max-width: 768px) {
    .notification {
        top: 10px;
        right: 10px;
        left: 10px;
        transform: translateY(-120%);
    }
    
    .notification.show {
        transform: translateY(0);
    }
    
    .saved-indicator {
        bottom: 10px;
        left: 10px;
        right: 10px;
        justify-content: center;
    }
}