:root {
	--bg: #faf8ef;
	--grid-bg: #bbada0;
	--cell-bg: #cdc1b4;
	--text: #776e65;
	--white: #f9f6f2;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
	margin: 0;
	display: flex;
	flex-direction: column;align-items: center; 
	height: 100vh;
	height: 100dvh;
	/* Utilise la hauteur dynamique sur mobile (évite le bug de la barre d'adresse) */
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

header {
	width: 100%;
	max-width: 400px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
}

footer {
	width: 100%;
	max-width: 400px;
	padding: 20px;
	padding-bottom: 40px;
	/* Espace pour le pouce en bas */
	box-sizing: border-box;
}

.row {
	display: flex;
	justify-content: space-between;
	/* Boutons aux extrémités */
	gap: 10px;
}

button {
	flex: 1;
	/* Les boutons prennent la même largeur */
	padding: 15px;
	background: #70a1ff;
	color: #fff;
	border: solid 4px #fff;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	box-sizing: border-box;
	margin-bottom: 7px;
	transition: all .2s ease-in-out;
	box-shadow:
		inset 0 3px #79a8fe,
		inset 0 -7px #1e90ff;
}
button:hover{
	background: #1a87f4;
	transform: translateY(3px);
	box-shadow:
		inset 0 3px #70a1ff,
		inset 0 -4px #167ce2;
}

#score {
	display: inline-block;
	/* Crucial pour que le scale fonctionne */
	transition: color 0.2s;
	transform-origin: center;
}

.box {
	background: #bbada0;
	padding: 10px 20px;
	border-radius: 6px;
	color: white;
	text-align: center;
}

#game-over {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	/* Effet de flou sur les tuiles derrière */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

#game-over.visible {
	opacity: 1;
	pointer-events: auto;
}

.game-over-content {
	background: var(--t-background, #faf8ef);
	padding: 2rem;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#retry-btn {
	margin-top: 1rem;
	padding: 10px 20px;
	background: #8f7a66;
	color: white;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
}

#game-container {
	position: relative;
	width: min(75vh, 95vw, 1024px);
	/* Bloque la taille sur PC */
	aspect-ratio: 1 / 1;
	/* Reste toujours carré */
	background: var(--grid-bg);
	border-radius: .75rem;
	padding: .75rem;
	/* Padding relatif */
	box-sizing: border-box;
}

.grid-static {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: .75rem;
	box-sizing: border-box;

	.grid {
		position: relative;
		width: 100%;
		height: 100%;
	}
}

#tile-layer {
	z-index: 10;
}

.particle {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
}

/* On ajoute un petit effet de lueur sur les grosses tuiles */
.tile-128,
.tile-256,
.tile-512,
.tile-1024,
.tile-2048 {
	box-shadow:
		inset 0 3px var(--t-light),
		inset 0 -7px var(--t-shadow),
		0 0 15px var(--t-background);
	/* Glow extérieur */
}

@keyframes shine {
	0% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.2);
	}

	100% {
		filter: brightness(1);
	}
}

.tile-2048 {
	animation: shine 2s infinite ease-in-out;
}


/* Les tuiles */
.tile {
	position: absolute;
	width: calc((100% - .5rem * 3 - .75rem * 2) / 4);
	aspect-ratio: 1;
	display: flex;

	z-index: 10;

	background-color: var(--t-background);
	color: var(--t-text);

	border: solid 4px var(--t-outline);
	border-radius: 8px;
	box-sizing: border-box;

	transition: all 100ms ease-out;
	transform-origin: center center;

	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 1.5rem;

	box-shadow:
		inset 0 3px var(--t-light),
		inset 0 -7px var(--t-shadow);
}

.tile-empty {
	--t-background: var(--cell-bg);
	--t-text: var(--cell-bg);
	--t-outline: #0000;
	--t-light: var(--cell-bg);
	--t-shadow: var(--cell-bg);
}

/* Palette complète pour 2powX */

.tile-2 {
	--t-background: #eee4da;
	--t-text: #776e65;
	--t-outline: #dcd0c5;
	--t-light: #f4ebe3;
	--t-shadow: #d5c7ba;
}

.tile-4 {
	--t-background: #ede0c8;
	--t-text: #776e65;
	--t-outline: #dbcdb4;
	--t-light: #f5ebda;
	--t-shadow: #d0c0a3;
}

.tile-8 {
	--t-background: #f2b179;
	--t-text: #f9f6f2;
	--t-outline: #e09e66;
	--t-light: #f7c9a3;
	--t-shadow: #d99256;
}

.tile-16 {
	--t-background: #f59563;
	--t-text: #f9f6f2;
	--t-outline: #e27b4a;
	--t-light: #fbba9c;
	--t-shadow: #d66f40;
}

.tile-32 {
	--t-background: #f67c5f;
	--t-text: #f9f6f2;
	--t-outline: #e16043;
	--t-light: #fba48f;
	--t-shadow: #d44d33;
}

.tile-64 {
	--t-background: #f65e3b;
	--t-text: #f9f6f2;
	--t-outline: #da462a;
	--t-light: #fb927d;
	--t-shadow: #c4381e;
}

.tile-128 {
	--t-background: #edcf72;
	--t-text: #f9f6f2;
	--t-outline: #d9bc5d;
	--t-light: #f5e1a4;
	--t-shadow: #c9af52;
	font-size: 1.5rem;
}

.tile-256 {
	--t-background: #edcc61;
	--t-text: #f9f6f2;
	--t-outline: #d9b84c;
	--t-light: #f5df97;
	--t-shadow: #c9aa3f;
	font-size: 1.5rem;
}

.tile-512 {
	--t-background: #edc850;
	--t-text: #f9f6f2;
	--t-outline: #d9b43c;
	--t-light: #f5dd8b;
	--t-shadow: #c9a62f;
	font-size: 1.5rem;
}

.tile-1024 {
	--t-background: #edc53f;
	--t-text: #f9f6f2;
	--t-outline: #d9b12b;
	--t-light: #f5db7e;
	--t-shadow: #c9a21f;
	font-size: 1.25rem;
}

.tile-2048 {
	--t-background: #edc22e;
	--t-text: #f9f6f2;
	--t-outline: #d9ae1a;
	--t-light: #f5d972;
	--t-shadow: #c99e0e;
	font-size: 1.25rem;
}

/* Bonus : Pour les fous qui vont au-delà */
/* --- PALETTE ÉLECTRIQUE (POST-2048) --- */

/* 4096 - Émeraude Profond */
.tile-4096 {
	--t-background: #2ecc71;
	--t-text: #eee;
	--t-outline: #eee;
	--t-light: #3ce583;
	--t-shadow: #27ae60;
	font-size: 1.25rem;
}

/* 8192 - Bleu Royal Électrique */
.tile-8192 {
	--t-background: #3498db;
	--t-text: #eee;
	--t-outline: #eee;
	--t-light: #41a7eb;
	--t-shadow: #2980b9;
	font-size: 1.25rem;
}

/* 16384 - Indigo / Violet Intense */
.tile-16384 {
	--t-background: #9b59b6;
	--t-text: #ffffff;
	--t-outline: #eee;
	--t-light: #cd84f1;
	--t-shadow: #8e44ad;
	font-size: 1.1rem;
}

/* 32768 - Magenta / Cyberpunk Pink */
.tile-32768 {
	--t-background: #c56cf0;
	--t-text: #ffffff;
	--t-outline: #eee;
	--t-light: #cd84f1;
	--t-shadow: #9b59b6;
	font-size: 1.1rem;
}

/* 65536 - L'entrée dans le Vide (Noir & Néon Cyan) */
.tile-65536 {
	--t-background: #111111;
	--t-text: #0ff;
	--t-outline: #0ff;
	--t-light: #222;
	--t-shadow: #000;
	font-size: 1rem;
	text-shadow: 0 0 8px #00ffff;
}

/* 131072 - L'Ultime Rainbow (Noir & Or Animé) */
.tile-131072 {
	--t-background: #000000;
	--t-text: #ffffff;
	--t-outline: #f39c12;
	--t-light: #ffffff;
	--t-shadow: #000;
	font-size: 0.85rem;
	font-weight: 900;
	/* On combine l'animation de brillance et le bord arc-en-ciel */
	animation: rainbow-border 2s linear infinite, ultimate-glow 1.5s infinite alternate;
}

/* --- ANIMATIONS --- */

@keyframes ultimate-glow {
	from {
		filter: brightness(1) drop-shadow(0 0 5px #fff);
	}

	to {
		filter: brightness(1.5) drop-shadow(0 0 20px #f1c40f);
	}
}

@keyframes rainbow-border {
	0% {
		border: 3px solid #ff0000;
		box-shadow: 0 0 20px #ff0000;
	}

	20% {
		border: 3px solid #ffff00;
		box-shadow: 0 0 20px #ffff00;
	}

	40% {
		border: 3px solid #00ff00;
		box-shadow: 0 0 20px #00ff00;
	}

	60% {
		border: 3px solid #00ffff;
		box-shadow: 0 0 20px #00ffff;
	}

	80% {
		border: 3px solid #0000ff;
		box-shadow: 0 0 20px #0000ff;
	}

	100% {
		border: 3px solid #ff00ff;
		box-shadow: 0 0 20px #ff00ff;
	}
}

/* Application des effets de brillance sur tout le haut de gamme */
.tile-4096,
.tile-8192,
.tile-16384,
.tile-32768,
.tile-65536 {
	animation: shine 3s infinite ease-in-out;
}