/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-image: url('https://spellinghive.co.uk/images/pattern.png'); /* User's original path */
    background-repeat: repeat;
}

/* Animations */
@keyframes feedback-pop {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}
.feedback-animation {
    animation: feedback-pop 0.7s ease-out forwards;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}


/* Message Box */
.message-box {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    font-weight: 600;
    font-size: 1rem;
}
.message-box.success { background-color: #a7f3d0; color: #047857; border: 2px solid #059669; }
.message-box.error { background-color: #fecaca; color: #b91c1c; border: 2px solid #dc2626; }
.message-box.info { background-color: #bae6fd; color: #0369a1; border: 2px solid #0ea5e9; }

/* Feedback Indicator */
.feedback-container { position: relative; }
#feedbackIndicator { /* Used in Test Mode */
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; font-size: 4rem;
}

/* Buttons */
.btn {
    padding: 1rem 1.5rem; border-radius: 12px; font-weight: 700;
    font-family: "Blue Custard", 'Inter', sans-serif; font-size: 1.1rem;
    text-transform: uppercase; border-bottom-width: 4px;
    transition: all 0.15s ease-out; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer; text-align: center;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.btn:active { transform: translateY(1px); filter: brightness(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.btn:disabled {
    background-color: #d1d5db !important; border-color: #9ca3af !important;
    color: #6b7280 !important; cursor: not-allowed;
    filter: none; transform: none; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-sky { background-color: #38bdf8; border-color: #0ea5e9; color: white; }
.btn-green { background-color: #4ade80; border-color: #22c55e; color: white; }
.btn-red { background-color: #f87171; border-color: #ef4444; color: white; }
.btn-yellow { background-color: #facc15; border-color: #eab308; color: #422006; }
.btn-gray { background-color: #9ca3af; border-color: #6b7280; color: white; }
.btn-purple { background-color: #c084fc; border-color: #a855f7; color: white; }
.btn-orange { background-color: #fb923c; border-color: #f97316; color: white; }
.btn-teal { background-color: #2dd4bf; border-color: #14b8a6; color: white; }
.btn-small { padding: 0.5rem 1rem; font-size: 0.9rem; border-bottom-width: 3px; display: flex; align-items: center; }

/* Audio Buttons */
.audio-button {
    background: none; border: none; padding: 10px; cursor: pointer;
    color: #0ea5e9; transition: color 0.2s ease-in-out, transform 0.1s ease;
}
.audio-button:hover { color: #0284c7; transform: scale(1.1); }
.audio-button:disabled { color: #9ca3af; cursor: not-allowed; transform: scale(1); }
.audio-button i { font-size: 2.5rem; }

/* Input Fields */
.input-field, .textarea-field {
    border-radius: 12px; border: 2px solid #cbd5e1; padding: 0.75rem 1rem;
    font-size: 1.1rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 100%;
}
.input-field:focus, .textarea-field:focus {
    border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.3); outline: none;
}

/* Leaderboard */
.leaderboard { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.leaderboard h3 { font-size: 1.25rem; font-weight: 600; color: #4b5563; margin-bottom: 0.5rem; text-align: center; }
.leaderboard ol { list-style-type: none; padding-left: 0; max-height: 150px; overflow-y: auto; }
.leaderboard li { display: flex; justify-content: space-between; padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; }
.leaderboard li:nth-child(odd) { background-color: #f3f4f6; }
.leaderboard .player-name { font-weight: 500; color: #1f2937; }
.leaderboard .player-score { font-weight: 700; color: #16a34a; }
.leaderboard li:first-child .player-score { color: #ca8a04; }
.leaderboard li:nth-child(2) .player-score { color: #71717a; }
.leaderboard li:nth-child(3) .player-score { color: #a16207; }

/* Profile Grid & Avatar */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.profile-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1rem; border: 2px solid #e5e7eb; border-radius: 12px;
    cursor: pointer; transition: all 0.2s ease-in-out; min-height: 140px;
}
.profile-card:hover { border-color: #38bdf8; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2); }
.profile-card.selected-profile {
    border-color: #0ea5e9; background-color: #f0f9ff; box-shadow: 0 0 0 3px #0ea5e9;
}
.avatar-display { /* For profile card and modal items */
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
    overflow: hidden; /* For SVG/img */
    border: 2px solid transparent;
}
.avatar-display svg, .avatar-display img, .avatar-display i {
    width: 100%; height: 100%; object-fit: cover; display: flex; justify-content: center; align-items: center;
}
.avatar-display i { font-size: 2rem; /* Adjust if using Font Awesome for avatars */ }

.profile-name { font-weight: 600; color: #374151; text-align: center; word-break: break-word; }
.add-profile-card .avatar-display { border-style: dashed; border-color: #9ca3af; }
.add-profile-card:hover .avatar-display { border-color: #38bdf8; }
.add-profile-card .avatar-icon-placeholder { font-size: 2.5rem; color: #9ca3af; }
.add-profile-card:hover .avatar-icon-placeholder { color: #38bdf8; }


/* Word List Grid */
.word-lists-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem; margin-top: 1.5rem;
}
.word-list-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 12px;
    background-color: #f9fafb; cursor: pointer; transition: all 0.2s ease-in-out;
    text-align: center; min-height: 120px;
}
.word-list-card:hover {
    border-color: #a5b4fc; box-shadow: 0 4px 12px rgba(165, 180, 252, 0.2); transform: translateY(-2px);
}
.word-list-card.selected-word-list { /* NEW for selected list */
    border-color: #4f46e5; /* indigo-600 */
    background-color: #e0e7ff; /* indigo-100 */
    box-shadow: 0 0 0 3px #4f46e5; /* Ring effect */
}
.word-list-card span { font-weight: 600; color: #4f46e5; margin-top: 0.5rem; }
.word-list-card .word-count { font-size: 0.8rem; color: #6b7280; font-weight: normal; margin-top: 0.25rem; }
.add-list-card i { color: #6b7280; }
.add-list-card:hover i { color: #4f46e5; }

/* Create List Screen - Added Words List */
.added-words-container ul { max-height: 200px; overflow-y: auto; }
.added-words-container li { border-bottom: 1px solid #e5e7eb; }
.added-words-container li:last-child { border-bottom: none; }

/* Modal Styles */
.modal {
    position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%;
    overflow: auto; background-color: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background-color: #fff; margin: auto; padding: 2rem; border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); width: 90%; max-width: 500px; position: relative;
}
.modal-close {
    color: #aaa; position: absolute; top: 10px; right: 15px; font-size: 28px;
    font-weight: bold; background: none; border: none; cursor: pointer;
}
.modal-close:hover, .modal-close:focus { color: black; text-decoration: none; }

/* Avatar Selection in Modal */
#avatarSelectionGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.75rem; /* Tailwind gap-3 */
    margin-top: 1rem; /* Tailwind mt-4 */
    margin-bottom: 1.5rem; /* Tailwind mb-6 */
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #e5e7eb; /* Tailwind border-gray-200 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
}
.avatar-select-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 50%; /* Make the border circular for the avatar */
    padding: 2px; /* Small padding so border doesn't cut into avatar */
    transition: border-color 0.2s ease;
}
.avatar-select-item:hover .avatar-display {
    border-color: #93c5fd; /* Tailwind blue-300 */
}
.avatar-select-item.selected .avatar-display {
    border-color: #2563eb; /* Tailwind blue-600 */
    box-shadow: 0 0 0 3px #60a5fa; /* Tailwind blue-400 ring */
}


/* Learn Mode Specific Styles */
#learnCorrectSpellingDisplay {
    font-size: 2.5rem; font-weight: 700; color: #1e40af;
    background-color: #eff6ff; padding: 0.75rem 1.5rem;
    border-radius: 0.75rem; border: 2px dashed #93c5fd;
    margin-bottom: 1rem; min-height: 60px;
    display: flex; align-items: center; justify-content: center; text-align: center;
}
#learnFeedbackDisplay {
    min-height: 24px; margin-top: 0.5rem; font-weight: 600;
}
#learnFeedbackDisplay.correct { color: #16a34a; }
#learnFeedbackDisplay.incorrect { color: #dc2626; }

/* Game Over - New Avatar Unlock */
#newAvatarUnlockSection {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #ecfdf5; /* Tailwind green-50 */
    border: 2px solid #34d399; /* Tailwind green-400 */
    border-radius: 0.75rem; /* Tailwind rounded-xl */
}
#newAvatarUnlockSection h4 {
    color: #059669; /* Tailwind green-600 */
}
#unlockedAvatarDisplay {
    width: 80px; height: 80px; margin: 0.5rem auto;
}

/* Stats Screen Styles */
#statsScreen .stat-card {
    background-color: #f9fafb; /* gray-50 */
    padding: 1rem; /* p-4 */
    border-radius: 0.75rem; /* rounded-xl */
    border: 1px solid #e5e7eb; /* gray-200 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* shadow-sm */
}
#statsScreen .stat-label {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* gray-500 */
    margin-bottom: 0.25rem; /* mb-1 */
}
#statsScreen .stat-value {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* gray-800 */
}
#statsScreen .stat-value.percentage {
     color: #16a34a; /* green-600 */
}
 #statsChallengingWords ul {
    list-style-type: disc;
    padding-left: 1.5rem; /* pl-6 */
}
#statsChallengingWords li {
    margin-bottom: 0.25rem; /* mb-1 */
}


.hidden { display: none !important; }
.logo { width: 300px; height: 230px; }
#appContainer { border-radius: 48px; border-width: 1px; border-style: solid; border-color: #fff; }