:root {
    --primary: #FF6B6B;      /* Fun Red/Pink */
    --primary-dark: #FF5252;
    --secondary: #4ECDC4;    /* Teal */
    --accent: #FFE66D;       /* Yellow */
    --bg-color: #F7F9FC;
    --text-main: #2D3436;
    --text-light: #636E72;
    --white: #FFFFFF;
    --shadow: 0 8px 30px rgba(0,0,0,0.08);
    --radius: 20px;
    --font-stack: 'Outfit', sans-serif;
}

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

body {
    font-family: var(--font-stack);
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 107, 107, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 20%);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 480px; /* Mobile width cap */
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Header */
.main-header {
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
}

.main-header h1 {
    font-weight: 800;
    font-size: 2rem;
    color: var(--text-main);
}

.highlight {
    color: var(--primary);
}

/* Views Management */
.view {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.view.active {
    display: block;
}

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

/* Cards */
.card, .hero-card {
    background: var(--white);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.hero-card h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
    border: none;
    margin: 10px 0;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.btn-secondary {
    background: transparent;
    color: var(--text-light);
    border: 2px solid #EEE;
}

.btn-full {
    width: 100%;
}

.btn-large {
    font-size: 1.3rem;
    padding: 20px 40px;
}

.button-group {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

.button-group .btn {
    flex: 1;
    margin: 0;
    padding: 15px 10px;
}

/* File Input */
input[type="file"] {
    display: none;
}

/* Editor Grid */
.word-list-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.word-item {
    display: flex;
    gap: 10px;
}

.word-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #EEE;
    border-radius: 12px;
    font-family: var(--font-stack);
    font-size: 1.1rem;
}

.btn-remove {
    background: #FFECEC;
    color: var(--primary);
    border: none;
    width: 50px;
    border-radius: 12px;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Game Interface */
.game-hud {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 20px;
    padding: 0 10px;
}

.btn-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--white);
    border: none;
    font-size: 2rem;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.4);
    cursor: pointer;
    margin-bottom: 10px;
}

.hint-text {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

#spelling-input {
    width: 100%;
    padding: 15px;
    font-size: 1.5rem;
    text-align: center;
    border: 3px solid #EEE;
    border-radius: 16px;
    margin-bottom: 20px;
    font-family: monospace;
    letter-spacing: 2px;
    outline: none;
}

#spelling-input:focus {
    border-color: var(--secondary);
}

/* Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #EEE;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Donation Styles */
.btn-donate {
    background: var(--accent);
    color: var(--text-main);
    box-shadow: 0 4px 15px rgba(255, 230, 109, 0.6);
    margin-top: 15px;
}

.home-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}

.link-donate {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.link-donate:hover {
    color: var(--primary);
}

/* Hides footer when not on home screen (managed via JS visibility classes roughly, but footer is outside views, so we might need to handle it. 
   Actually, looking at HTML structure, the footer was added AFTER the section closure but inside .app-container. 
   To keep it simple, we'll let it sit there. */