/* --- Inherited Styles from Homepage --- */
:root {
    --bg-light: #f3f4f6;
    --text-light: #111827;
    --card-bg-light: rgba(255, 255, 255, 0.85);

    --bg-dark: #090a0f;
    --text-dark: #e5e7eb;
    --card-bg-dark: rgba(31, 41, 55, 0.6);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light Theme */
body { background-color: var(--bg-light); color: var(--text-light); }
.light body { color: var(--text-light); }

/* Dark Theme */
.dark body {
    background-color: var(--bg-dark);
    background-image: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    color: var(--text-dark);
}

.lobster-font { font-family: 'Lobster', cursive; }

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- App-Specific Styles --- */
.glass-panel {
    backdrop-filter: blur(10px);
    border: 1px solid;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.light .glass-panel { background-color: var(--card-bg-light); border-color: rgba(0,0,0,0.1); }
.dark .glass-panel { background-color: var(--card-bg-dark); border-color: rgba(255,255,255,0.1); }

.puzzle-grid { border-collapse: collapse; margin: auto; user-select: none; }
.puzzle-grid td {
    text-align: center; vertical-align: middle;
    font-weight: 600; text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: background-color 0.1s, transform 0.2s, color 0.1s;
    aspect-ratio: 1 / 1;
}
.light .puzzle-grid td { border-color: #d1d5db; }
.dark .puzzle-grid td { border-color: rgba(255, 255, 255, 0.15); }

/* -- Interaction Styles -- */
.selecting { background-color: #a78bfa !important; color: white !important; }
.found { background-color: #4ade80 !important; color: #052e16 !important; }
.hint-reveal { background-color: #60a5fa !important; color: white !important; transform: scale(1.1); }
.solved { background-color: #f472b6 !important; color: #500724 !important; }
.word-found { text-decoration: line-through; }
.light .word-found { color: #6b7280; }
.dark .word-found { color: #9ca3af; }

/* Screens */
.screen { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; animation: fadeInUp 0.5s ease-out forwards; }
.screen.hidden { opacity: 0; transform: scale(0.98); pointer-events: none; position: absolute; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 20px; }
.light .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #9ca3af; }
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #4b5563; }

/* Toggle Switch */
.toggle-bg:after { content: ''; position: absolute; top: 2px; left: 2px; background: white; border-radius: 9999px; width: 1rem; height: 1rem; transition: transform 0.2s ease-in-out; }
input:checked + .toggle-bg:after { transform: translateX(100%); }
input:checked + .toggle-bg { background-color: #8b5cf6; }

/* Light theme contrast fix */
.light .difficulty-btn.bg-purple-500 { color: white; }
.light .tab-btn.active { color: white; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; }