:root {
    --bg-color: #050505;
    --grid-color: #111;
    --gap: 12px;
    --accent: #00b7c2;
}

body {
    background-color: var(--bg-color);
    color: white;
    font-family: 'Helvetica Neue', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
    touch-action: none;
}

/* --- SPLASH SCREEN (ACCUEIL) --- */
#splash-screen {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    animation: fadeIn 1s;
}

.logo-orb {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #00b7c2);
    box-shadow: 0 0 30px var(--accent);
    margin: 0 auto 20px auto;
    animation: breathe 4s infinite ease-in-out;
}

.main-title {
    font-size: 3rem; font-weight: 100; letter-spacing: 10px; margin: 0;
    background: linear-gradient(90deg, #fff, #555);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.subtitle { color: #555; letter-spacing: 5px; font-size: 0.8rem; margin-top: -10px; }

.stats-container {
    display: flex; gap: 40px;
    border-top: 1px solid #222; border-bottom: 1px solid #222;
    padding: 20px 0; margin: 20px 0;
}
.stat-box { display: flex; flex-direction: column; }
.stat-label { font-size: 0.7rem; color: #666; letter-spacing: 1px; }
.stat-value { font-size: 1.5rem; font-weight: bold; color: white; }

.btn-main {
    background: white; color: black; border: none;
    padding: 15px 50px; font-size: 1.2rem; letter-spacing: 2px;
    cursor: pointer; border-radius: 30px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    transition: 0.3s;
}
.btn-main:active { transform: scale(0.95); }

.btn-install {
    background: transparent; border: 1px solid var(--accent); color: var(--accent);
    padding: 10px 25px; border-radius: 20px; margin-top: 20px; font-size: 0.8rem;
}

/* --- JEU HEADER --- */
.header {
    width: 340px; display: flex; justify-content: space-between;
    align-items: center; margin-bottom: 15px;
}
.btn-small {
    background: transparent; border: 1px solid #444; color: #888;
    padding: 5px 15px; font-size: 0.7rem; cursor: pointer; border-radius: 15px;
}
.score-box { text-align: right; }
.score-display { font-size: 1.5rem; font-weight: bold; }
.score-label { font-size: 0.6rem; color: #666; letter-spacing: 2px; }

/* --- LÉGENDE --- */
.legend-container {
    width: 340px; display: flex; justify-content: space-between;
    margin-bottom: 15px; padding: 10px;
    background: rgba(255,255,255,0.03); border-radius: 10px; box-sizing: border-box;
}
.legend-dot { width: 12px; height: 12px; border-radius: 50%; }

/* --- PLATEAU --- */
#game-board {
    width: 340px; height: 340px;
    background-color: var(--grid-color);
    border-radius: 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--gap); padding: var(--gap);
    box-sizing: border-box; position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

.cell { background-color: rgba(255, 255, 255, 0.03); border-radius: 8px; width: 100%; height: 100%; }
.tile {
    width: 100%; height: 100%; border-radius: 8px;
    animation: appear 0.3s ease-out;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

/* --- PALETTE VELOURS --- */
.lvl-2 { background: radial-gradient(circle at 30% 30%, #3e2b5e, #1a0b2e); box-shadow: 0 0 5px rgba(62, 43, 94, 0.4); }
.lvl-4 { background: radial-gradient(circle at 30% 30%, #0f4c75, #051e3e); box-shadow: 0 0 8px rgba(15, 76, 117, 0.5); }
.lvl-8 { background: radial-gradient(circle at 30% 30%, #00b7c2, #005f73); box-shadow: 0 0 12px rgba(0, 183, 194, 0.6); }
.lvl-16 { background: radial-gradient(circle at 30% 30%, #51eaea, #088da5); box-shadow: 0 0 15px rgba(81, 234, 234, 0.6); }
.lvl-32 { background: radial-gradient(circle at 30% 30%, #2ecc71, #0b5f33); box-shadow: 0 0 15px rgba(46, 204, 113, 0.6); }
.lvl-64 { background: radial-gradient(circle at 30% 30%, #bada55, #5e7305); box-shadow: 0 0 15px rgba(186, 218, 85, 0.6); }
.lvl-128 { background: radial-gradient(circle at 30% 30%, #f1c40f, #997c03); box-shadow: 0 0 20px rgba(241, 196, 15, 0.7); }
.lvl-256 { background: radial-gradient(circle at 30% 30%, #e67e22, #85450f); box-shadow: 0 0 25px rgba(230, 126, 34, 0.7); }
.lvl-512 { background: radial-gradient(circle at 30% 30%, #e74c3c, #70160d); box-shadow: 0 0 30px rgba(231, 76, 60, 0.8); }
.lvl-1024 { background: radial-gradient(circle at 30% 30%, #ff00ff, #750475); box-shadow: 0 0 35px rgba(255, 0, 255, 0.8); }
.lvl-2048 { background: radial-gradient(circle at 30% 30%, #ffffff, #aaccff); box-shadow: 0 0 50px rgba(255, 255, 255, 1); animation: pulse 2s infinite; }

@keyframes breathe { 0% { opacity: 0.8; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.8; transform: scale(0.95); } }
@keyframes appear { 0% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* GAME OVER */
#game-over {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); display: none;
    flex-direction: column; justify-content: center; align-items: center;
    z-index: 10; backdrop-filter: blur(8px); border-radius: 15px;
}
.go-title { font-weight: 200; letter-spacing: 5px; margin-bottom: 10px; }
.btn-replay { background: white; border: none; color: black; padding: 10px 30px; font-size: 1rem; cursor: pointer; border-radius: 20px; }

/* MOBILE ELASTIQUE */
@media (max-width: 600px) {
    #game-board, .header, .legend-container { width: min(90vw, 55vh); }
    #game-board { height: min(90vw, 55vh); }
}