147 lines
3.5 KiB
CSS
147 lines
3.5 KiB
CSS
/* ======================
|
|
GLOBAL
|
|
====================== */
|
|
body {
|
|
background: radial-gradient(circle at center, #0a0a0a, #000);
|
|
background-size: 300% 300%;
|
|
animation: bgMove 15s infinite alternate;
|
|
font-family: 'Poppins', sans-serif;
|
|
color: white;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
/* Background animasi lembut */
|
|
@keyframes bgMove {
|
|
0% { background-position: 0% 30%; }
|
|
50% { background-position: 50% 70%; }
|
|
100% { background-position: 100% 30%; }
|
|
}
|
|
|
|
h1 {
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 20px #00eaff, 0 0 40px #0099ff;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 22px;
|
|
margin: 8px;
|
|
background: #111;
|
|
color: white;
|
|
border: 2px solid #00eaff;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: 0.25s;
|
|
font-weight: bold;
|
|
}
|
|
button:hover {
|
|
box-shadow: 0 0 15px #00eaff;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
#score {
|
|
color: #00eaff;
|
|
text-shadow: 0 0 10px #00eaff;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* ======================
|
|
BOARD
|
|
====================== */
|
|
|
|
|
|
/* ==========================
|
|
BOARD — MIRIP BORDER LOGIN
|
|
========================== */
|
|
|
|
#board {
|
|
width: 460px;
|
|
height: 460px;
|
|
margin: 35px auto;
|
|
padding: 20px;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(4, 1fr);
|
|
gap: 12px;
|
|
|
|
background: rgba(30, 0, 50, 0.6); /* DALAM GELAP SAMA LOGIN */
|
|
backdrop-filter: blur(10px);
|
|
|
|
border: 2px solid rgba(0, 217, 255, 0.3); /* SAMA LOGIN */
|
|
border-radius: 20px;
|
|
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
|
0 0 40px rgba(0, 217, 255, 0.3),
|
|
inset 0 0 30px rgba(0, 217, 255, 0.1);
|
|
|
|
animation: glowBorderBoard 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* Border berubah warna seperti login */
|
|
@keyframes glowBorderBoard {
|
|
0%, 100% {
|
|
border-color: rgba(0, 217, 255, 0.4);
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
|
0 0 40px rgba(0, 217, 255, 0.3),
|
|
inset 0 0 30px rgba(0, 217, 255, 0.1);
|
|
}
|
|
50% {
|
|
border-color: rgba(255, 0, 255, 0.5);
|
|
box-shadow:
|
|
0 20px 60px rgba(0, 0, 0, 0.5),
|
|
0 0 50px rgba(255, 0, 255, 0.4),
|
|
inset 0 0 40px rgba(255, 0, 255, 0.15);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ======================
|
|
TILE
|
|
====================== */
|
|
.tile {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
|
|
color: white;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
text-shadow: 0 0 10px white;
|
|
|
|
transition: 0.1s;
|
|
}
|
|
|
|
/* animasi tile baru */
|
|
.tile.new {
|
|
animation: pop 0.25s ease-out;
|
|
}
|
|
@keyframes pop {
|
|
0% { transform: scale(0.2); opacity: 0; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
/* Neon warna berdasarkan angka */
|
|
.tile-2 { background: #00eaff55; box-shadow: 0 0 10px #00eaff; }
|
|
.tile-4 { background: #00ff9955; box-shadow: 0 0 10px #00ff99; }
|
|
.tile-8 { background: #ff00ff55; box-shadow: 0 0 10px #ff00ff; }
|
|
.tile-16 { background: #ff006655; box-shadow: 0 0 10px #ff0066; }
|
|
.tile-32 { background: #ffaa0055; box-shadow: 0 0 10px #ffaa00; }
|
|
.tile-64 { background: #ff000055; box-shadow: 0 0 10px #ff0000; }
|
|
.tile-128 { background: #5f00ff55; box-shadow: 0 0 10px #5f00ff; }
|
|
.tile-256 { background: #00ffea55; box-shadow: 0 0 10px #00ffea; }
|
|
.tile-512 { background: #ff00aa55; box-shadow: 0 0 10px #ff00aa; }
|
|
.tile-1024 { background: #00ffaa55; box-shadow: 0 0 10px #00ffaa; }
|
|
.tile-2048 { background: #ffd70066; box-shadow: 0 0 15px #ffd700; }
|
|
|