/* --- General Setup --- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

:root { 
    --bg-gradient: linear-gradient(135deg, #89f7fe, #66a6ff); 
    --container-bg: rgba(255, 255, 255, 0.97); 
    --primary-color: #ff6b6b; 
    --secondary-color: #4ecdc4; 
    --item-bg: #f7fff7; 
    --item-border: #90ee90; 
    --locked-color: #a0a0a0; 
    --locked-bg: #e0e0e0; 
    --celebrate-color1: #fca103; 
    --celebrate-color2: #e91e63; 
}
body { 
    font-family: 'Fredoka One', cursive; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    min-height: 100vh; 
    background: var(--bg-gradient); 
    user-select: none; 
    padding-top: 70px; 
    box-sizing: border-box; 
    margin: 0;
    overflow-x: hidden;
}

/* --- Header & Wallet --- */
#main-header { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 60px; 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
    z-index: 1000; 
}
#user-profile { display: flex; align-items: center; gap: 15px; }
#profile-icon { font-size: 2em; cursor: pointer; transition: transform 0.2s; }
#profile-icon:hover { transform: scale(1.1); }
#wallet-container { 
    display: none; /* Controlled by JS */
    align-items: center; gap: 8px; 
    background: #f0f0f0; 
    padding: 5px 12px; 
    border-radius: 20px; 
    font-size: 1.1em; 
    color: #333; 
    font-weight: bold; 
}
#coin-count { min-width: 20px; text-align: left; }

/* --- Auth Modal --- */
#auth-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.auth-modal-content { background-color: #fff; padding: 25px; border-radius: 20px; box-shadow: 0 5px 30px rgba(0,0,0,0.4); width: 90%; max-width: 350px; text-align: center; position: relative; }
.close-modal { position: absolute; top: 10px; right: 15px; font-size: 1.5em; cursor: pointer; color: #888; }
#auth-modal h3 { margin-top: 0; color: var(--secondary-color); }
#auth-modal input { width: calc(100% - 20px); padding: 12px; margin-bottom: 12px; border: 2px solid #ddd; border-radius: 10px; font-family: sans-serif; }
#auth-modal button { padding: 10px 20px; font-size: 1em; font-weight: bold; font-family: 'Fredoka One', cursive; color: white; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; margin: 5px; }
#auth-error { color: var(--primary-color); font-size: 0.8em; min-height: 1.2em; }
#user-info { display: none; }
#logout-btn { background-color: var(--primary-color); }

/* --- Screens & Level Select --- */
#app-container { width: 100%; display: flex; justify-content: center; }
.screen { 
    background-color: var(--container-bg); 
    padding: 20px; 
    border-radius: 25px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    text-align: center; 
    width: 95%; 
    max-width: 650px; 
    border: 5px solid var(--primary-color); 
    display: none; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
    z-index: 1; 
    margin-bottom: 20px;
}
.screen.active { display: flex; }
#level-select-screen h2 { color: var(--secondary-color); margin-bottom: 20px; font-size: 1.8em; }
#level-buttons-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); 
    gap: 10px; 
    width: 100%; 
    max-width: 550px; 
    padding: 10px; 
    overflow-y: auto; 
    max-height: 70vh;
}
.level-button { 
    padding: 12px 5px; 
    font-size: 1.1em; 
    font-weight: bold; 
    font-family: 'Fredoka One', cursive; 
    color: white; 
    border: none; 
    border-radius: 15px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); 
    aspect-ratio: 1 / 1;
}
.level-button.unlocked { background-color: var(--secondary-color); }
.level-button.locked { background-color: var(--locked-bg); color: var(--locked-color); cursor: not-allowed; }
.level-button.locked::after { content: '🔒'; font-size: 0.8em; margin-top: 5px; opacity: 0.7; }

/* --- Game Screen --- */
#game-screen h1 { color: #ffffff; background-color: var(--primary-color); padding: 8px 12px; border-radius: 15px; margin-top: 0; margin-bottom: 5px; display: inline-block; font-size: 1.5em; }
#level-display { font-size: 1.1em; color: var(--secondary-color); margin-bottom: 10px; font-weight: bold; }
.columns-container { display: flex; justify-content: space-around; align-items: flex-start; margin-top: 5px; position: relative; min-height: 250px; padding: 5px; width: 100%; }
.column { display: flex; flex-direction: column; gap: 10px; width: 45%; }
.item { 
    background-color: var(--item-bg); 
    border: 3px solid var(--item-border); 
    border-radius: 12px; 
    padding: 8px 4px; 
    font-size: 1.8em; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    box-shadow: 0 3px 5px rgba(0,0,0,0.1); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    min-height: 45px; 
    position: relative; 
    word-break: break-word; 
}
.item.selected { background-color: #ADD8E6; border-color: #4682B4; transform: scale(1.05); }
.item.matched { background-color: #e0e0e0; border-color: #b0b0b0; opacity: 0.6; transform: scale(0.95); }
.item.incorrect { background-color: #FFC0CB; border-color: #ff7a8a; animation: shake 0.4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-6px); } }
#connector-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
#connector-lines line { stroke: #50c878; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); }
#message { margin-top: 10px; font-size: 1.2em; font-weight: bold; min-height: 30px; }
.game-button { padding: 10px 20px; font-size: 0.9em; font-weight: bold; font-family: 'Fredoka One', cursive; color: white; border: none; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 3px 5px rgba(0,0,0,0.15); }
#back-button { background-color: #6c757d; }
#restart-level-button { background-color: var(--primary-color); }

/* --- Celebration --- */
#celebration-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 10; display: none; }
#celebration-container.active { display: block; }
.confetti { position: absolute; width: 10px; height: 20px; background-color: var(--celebrate-color1); top: -20px; opacity: 0; animation: confetti-fall 3s ease-out forwards; }
.confetti:nth-child(5n + 2) { background-color: var(--celebrate-color2); }
@keyframes confetti-fall { 0% { transform: translateY(0) rotateZ(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotateZ(720deg); opacity: 0; } }