300 lines
7.6 KiB
CSS
300 lines
7.6 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; }
|
|
|
|
/* ======= ENHANCEMENTS: Animations, Particles, Glows ======= */
|
|
|
|
/* ensure board stacking context for absolute animations */
|
|
#board { position: relative; z-index: 2; }
|
|
|
|
.particles {
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
|
|
background:
|
|
radial-gradient(circle at 20% 30%, rgba(0,234,255,0.18), transparent 45%),
|
|
radial-gradient(circle at 80% 70%, rgba(255,0,90,0.18), transparent 45%),
|
|
radial-gradient(circle at 50% 50%, rgba(140,0,255,0.14), transparent 55%),
|
|
radial-gradient(circle at 10% 85%, rgba(0,255,200,0.12), transparent 55%),
|
|
radial-gradient(circle at 90% 15%, rgba(255,0,255,0.15), transparent 45%);
|
|
|
|
filter: blur(55px) brightness(120%) saturate(130%);
|
|
animation: particlesFloat 18s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes particlesFloat {
|
|
0% { transform: translateY(0px) translateX(0px); }
|
|
50% { transform: translateY(-25px) translateX(10px); }
|
|
100% { transform: translateY(-40px) translateX(-15px); }
|
|
}
|
|
|
|
|
|
.cursor-light {
|
|
position: absolute;
|
|
width: 240px;
|
|
height: 240px;
|
|
background: radial-gradient(circle, rgba(0,255,255,0.25), transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
filter: blur(40px);
|
|
mix-blend-mode: screen;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
|
|
/* gentle vertical float */
|
|
@keyframes floatBg { 0% { transform: translateY(0);} 100% { transform: translateY(-14px);} }
|
|
|
|
/* Tile move / slide illusion: tiles appear from direction */
|
|
.tile {
|
|
transition: transform 0.14s cubic-bezier(.2,.8,.2,1), opacity 0.12s linear, box-shadow 0.12s;
|
|
will-change: transform, opacity, box-shadow;
|
|
}
|
|
|
|
/* 'new' pop kept but slightly tuned */
|
|
.tile.new {
|
|
animation: pop 0.22s cubic-bezier(.2,.9,.2,1);
|
|
}
|
|
|
|
/* merge pop */
|
|
.tile.merge {
|
|
animation: mergePop 0.24s ease-out;
|
|
z-index: 3;
|
|
}
|
|
@keyframes mergePop {
|
|
0% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
|
|
50% { transform: scale(1.18); box-shadow: 0 0 30px rgba(255,255,255,0.35); }
|
|
100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.1); }
|
|
}
|
|
|
|
/* board shake when invalid move */
|
|
#board.shake {
|
|
animation: shakeBoard 0.36s;
|
|
}
|
|
@keyframes shakeBoard {
|
|
0%,100% { transform: translateX(0); }
|
|
25% { transform: translateX(-8px); }
|
|
75% { transform: translateX(8px); }
|
|
}
|
|
|
|
/* ambient glow under board (keeps aesthetics) */
|
|
#board::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -36px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 340px;
|
|
height: 84px;
|
|
background: radial-gradient(ellipse at center, rgba(0,234,255,0.12), transparent 60%);
|
|
filter: blur(30px);
|
|
z-index: 0;
|
|
}
|
|
|
|
/* special 2048 tile sparkle (adds shimmer) */
|
|
.tile-2048 {
|
|
animation: goldShimmer 2.4s infinite;
|
|
}
|
|
@keyframes goldShimmer {
|
|
0% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
|
|
50% { box-shadow: 0 0 26px #ffd700aa; transform: translateY(-2px); }
|
|
100% { box-shadow: 0 0 10px #ffd70066; transform: translateZ(0); }
|
|
}
|
|
|
|
/* small particle bits that appear for merge */
|
|
.merge-particle {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
opacity: 0.95;
|
|
will-change: transform, opacity;
|
|
filter: blur(1px) drop-shadow(0 0 6px rgba(255,255,255,0.08));
|
|
}
|
|
|
|
/* ensure base tile readability on animation */
|
|
.tile { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
|
|
|
|
/* mobile touch hint (optional) */
|
|
.touch-hint {
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
background: rgba(0,0,0,0.45);
|
|
padding: 8px 10px;
|
|
border-radius: 10px;
|
|
font-size: 12px;
|
|
z-index: 4;
|
|
color: #cfefff;
|
|
}
|
|
|
|
.starfield {
|
|
position: fixed;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.starfield span {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: rgba(0,255,255,0.8);
|
|
border-radius: 50%;
|
|
filter: blur(2px);
|
|
animation: starMove linear infinite;
|
|
}
|
|
|
|
/* bintang bergerak random */
|
|
@keyframes starMove {
|
|
0% { transform: translateY(0); opacity: 0.8; }
|
|
100% { transform: translateY(-700px); opacity: 0; }
|
|
}
|