body{
    background:black;
    color:white;
    font-family:Arial;
    margin:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    overflow-x:hidden;
}

/* космически фон */

.stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("https://www.transparenttextures.com/patterns/stardust.png");
animation:starsMove 200s linear infinite;
z-index:-1;
}
.h1 {
font-size:22px;
text-align:center;
margin-bottom:20px;
color:#00ffff;
text-shadow:0 0 4px #00ffff;
}
@keyframes starsMove{
from{background-position:0 0;}
to{background-position:10000px 5000px;}
}

h1{
margin-top:30px;
letter-spacing:3px;
}

.stats{
    display:flex;
    justify-content:center;
    gap:40px;
    font-size:20px;
    margin-bottom:20px;
    flex-wrap:wrap; /* 🔥 важно */
}


.game-board{
    width:100%;
    max-width:900px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.card{
    width:100%;
    aspect-ratio:1/1; /* 🔥 винаги квадрат */

    position:relative;
    transform-style:preserve-3d;
    transition:transform .6s;
    cursor:pointer;
}

.card.flip{
transform:rotateY(180deg);
}

.front,.back{
position:absolute;
width:100%;
height:100%;
border-radius:12px;
backface-visibility:hidden;
}

.front{
background:#111;
display:flex;
align-items:center;
justify-content:center;
font-size:35px;
}

.back{
transform:rotateY(180deg);
}

.back img{
    width:100%;
    height:100%;
    object-fit:contain; /* по-добре за планети */
    border-radius:12px;
}

/* бутон */

button{
margin-top:30px;
padding:10px 25px;
font-size:18px;
border:none;
background:#00aaff;
color:white;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#0077aa;
}

/* victory screen */

.victory{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
justify-content:center;
align-items:center;
}

.victory-box{
background:#111;
padding:40px;
border-radius:12px;
text-align:center;
box-shadow:0 0 20px #00ffff;
}

.victory-box h2{
font-size:40px;
margin-bottom:20px;
}
/* правилна двойка */

.card.matched{
animation:matchGlow 0.8s ease;
box-shadow:0 0 25px #00ffff;
}

@keyframes matchGlow{

0%{
transform:rotateY(180deg) scale(1);
}

50%{
transform:rotateY(180deg) scale(1.1);
box-shadow:0 0 40px #00ffff;
}

100%{
transform:rotateY(180deg) scale(1);
}

}
/* cosmic particles */

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
}

.particle{
position:absolute;
width:6px;
height:6px;
background:white;
border-radius:50%;
animation:particleMove 3s linear forwards;
box-shadow:0 0 10px #00ffff;
}

@keyframes particleMove{

0%{
transform:translateY(0) scale(1);
opacity:1;
}

100%{
transform:translateY(-600px) scale(0.3);
opacity:0;
}

}
/* БУТОН */
.instructions-btn{
display:block;
margin:20px auto;
padding:12px 25px;
font-size:16px;
border-radius:25px;
border:none;
background:#00d4ff;
color:black;
cursor:pointer;
transition:0.3s;
}

.instructions-btn:hover{
background:white;
transform:scale(1.05);
}

/* MODAL */
.instructions-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
z-index:5000;


justify-content:center;
align-items:center;
}

/* КУТИЯ */
.instructions-content{
background:rgba(0,0,0,0.9);
padding:40px;
border-radius:20px;
max-width:600px;
width:90%;
color:white;
text-align:center;

box-shadow:0 0 30px rgba(0,255,255,0.3);
animation:fadeIn 0.4s ease;
}

.instructions-content h2{
margin-bottom:20px;
font-size:28px;
color:#00d4ff;
}

.instructions-content ul{
text-align:left;
margin:20px 0;
padding-left:20px;
}

.instructions-content li{
margin-bottom:10px;
}

.goodluck{
margin-top:20px;
font-weight:bold;
color:#00ffcc;
}

/* CLOSE */
.close-instructions{

top:20px;
right:25px;
font-size:28px;
cursor:pointer;
}
.close-instructions:hover {
    color: #00ffff;
}


/* АНИМАЦИЯ */
@keyframes fadeIn{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}

@media (max-width: 900px){

    .game-board{
        max-width:600px;
        gap:15px;
    }

    h1{
        font-size:22px;
    }

}
@media (max-width: 600px){

    .game-board{
        max-width:350px;
        gap:10px;
    }

    .stats{
        gap:20px;
        font-size:16px;
    }

    button{
        font-size:14px;
        padding:8px 18px;
    }

}
@media (max-width: 400px){

    .game-board{
        max-width:300px;
        gap:8px;
    }

}