body {background:linear-gradient(135deg, #1a2a6c, #2a4d69, #4b86b4);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:20px;color:white;}
.container {max-width:900px;width:100%;text-align:center;}
header {margin-bottom:20px;padding:15px;background:rgba(0, 0, 0, 0.3);border-radius:15px;box-shadow:0 8px 16px rgba(0, 0, 0, 0.3);}
h1 {font-size:2.8rem;margin-bottom:10px;color:#ffeb3b;text-shadow:0 0 10px rgba(255, 235, 59, 0.7);}

.game-info {display:flex;margin:20px 0;font-size:1.5rem;background:rgba(255, 255, 255, 0.1);gap:20px;justify-content:center;padding:15px 0;border-radius:12px;}
.info-box {background:rgba(0, 30, 60, 0.7);padding:10px;margin:0;border-radius:10px;min-width:120px;}

#timer {color:#ff5252;font-weight:bold;font-size:1.8rem;}
#score {color:#4caf50;font-weight:bold;font-size:1.8rem;}
.game-grid {display:grid;grid-template-columns:repeat(8, 1fr);gap:15px;margin:20px auto;}
.card {height:120px;background:rgba(255, 255, 255, 0.15);border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;transition:all 0.3s ease;perspective:1000px;position:relative;overflow:hidden;box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
.card:hover {transform:translateY(-5px);background:rgba(255, 255, 255, 0.25);box-shadow:0 6px 12px rgba(0, 0, 0, 0.3);}
.card.selected {background:rgba(100, 255, 218, 0.3);transform:scale(1.05);}
.card.matched {visibility:hidden;opacity:0;transform:scale(0);}
.element-name {font-size:1.6rem;font-weight:bold;margin-bottom:5px;}
.element-symbol {font-size:2.2rem;font-weight:bold;color:#ffeb3b;}
.element-number {position:absolute;top:8px;right:8px;font-size:0.9rem;color:rgba(255, 255, 255, 0.7);}
.controls {margin:20px 0;}
button {background:linear-gradient(to right, #ff416c, #ff4b2b);color:white;border:none;padding:15px 40px;font-size:1.2rem;border-radius:50px;cursor:pointer;margin:0 10px;transition:all 0.3s ease;box-shadow:0 4px 8px rgba(0, 0, 0, 0.3);}
button:hover {transform:translateY(-3px);box-shadow:0 6px 12px rgba(0, 0, 0, 0.4);}
button:active {transform:translateY(1px);}
#start-btn {background:linear-gradient(to right, #4caf50, #2e7d32);}
.instructions {background:rgba(255, 255, 255, 0.1);padding:20px;border-radius:15px;margin-top:20px;text-align:left;}
.instructions h2 {color:#ffeb3b;margin-bottom:15px;text-align:center;}
.instructions ul {padding-left:25px;}
.instructions li {margin:10px 0;line-height:1.6;}
.element-card {display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;width:100%;height:100%;}
.game-over {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.8);display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:100;display:none;}
.game-over-content {background:linear-gradient(135deg, #1a2a6c, #2a4d69);padding:40px;border-radius:20px;text-align:center;max-width:500px;width:90%;box-shadow:0 0 30px rgba(0, 150, 255, 0.5);}
.game-over h2 {font-size:3rem;color:#ffeb3b;margin-bottom:20px;}
.final-score {font-size:2.5rem;color:#4caf50;margin:20px 0;}
.particles {position:absolute;width:100%;height:100%;pointer-events:none;z-index:-1;}
.particle {position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255, 235, 59, 0.7);animation:float 15s infinite linear;}

@keyframes float {0% {transform:translateY(0) translateX(0);opacity:0;}
10% {opacity:1;}
90% {opacity:1;}
100% {transform:translateY(-100vh) translateX(100px);opacity:0;}
}

@media (max-width:768px) {
	.game-grid {grid-template-columns:repeat(6, 1fr);}
	.card {height:80px;}
	.element-name {font-size:1.3rem;}
	.element-symbol {font-size:1.8rem;}
}

@media (max-width:480px) {
	.game-grid {grid-template-columns:repeat(5, 1fr);}
	h1 {font-size:2.2rem;}
	.game-info {flex-direction:column;align-items:center;gap:15px;}
}