.game-shell {
max-width: 760px;
margin: auto;
}

.game-heading {
display: flex;
justify-content: space-between;
gap: 15px;
align-items: end;
margin-bottom: 20px;
}

.game-heading h1 {
margin: 4px 0;
font-size: 36px;
}

.game-heading p {
color: var(--muted);
margin: 0;
}

.game-stats {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}

.game-progress {
color: var(--accent-light);
font-weight: 700;
white-space: nowrap;
}

.memory-card {
padding: 18px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
}

.memory-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.memory-choice {
position: relative;

width: 100%;
aspect-ratio: 3 / 4;

padding: 0;

border: 0;
background: transparent;

border-radius: 12px;

cursor: pointer;

perspective: 800px;


}

.memory-choice:focus-visible {
outline: 3px solid var(--accent-light);
outline-offset: 3px;
}

.memory-choice:disabled {
cursor: default;
}

.memory-inner {
position: absolute;
inset: 0;

border-radius: 12px;

transform-style: preserve-3d;

transition:
    transform .4s ease;

border: 1px solid var(--border);


}

.memory-choice.flipped .memory-inner,
.memory-choice.matched .memory-inner {
transform: rotateY(180deg);
}

.memory-face {
position: absolute;
inset: 0;

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

gap: 7px;

padding: 8px;

border-radius: 11px;

backface-visibility: hidden;

text-align: center;


}

.memory-front {
background:
linear-gradient(
135deg,
#1b2240,
#0e1225
);

color: var(--accent-light);

font-size: 15px;
font-weight: 800;

letter-spacing: 2px;


}

.memory-back {
transform: rotateY(180deg);

background:
    radial-gradient(
        circle at 50% 35%,
        #202b49,
        #0c1020 70%
    );

border: 1px solid var(--border);


}

.planet {
width: 52px;
height: 52px;

border-radius: 50%;

position: relative;

flex-shrink: 0;

box-shadow:
    inset -9px -8px 13px rgba(0, 0, 0, .38),
    3px 4px 8px rgba(0, 0, 0, .25);


}

/*
|--------------------------------------------------------------------------

Mercury
*/

.planet-mercury {
background:
radial-gradient(
circle at 30% 28%,
#eeeeee 0 6%,
transparent 7%
),
radial-gradient(
circle at 68% 63%,
#666 0 8%,
transparent 9%
),
radial-gradient(
circle at 38% 70%,
#999 0 5%,
transparent 6%
),
radial-gradient(
circle at 62% 32%,
#777 0 4%,
transparent 5%
),
linear-gradient(
135deg,
#d0d0d0,
#777
);
}

/*
|--------------------------------------------------------------------------

Venus
*/

.planet-venus {
background:
repeating-linear-gradient(
160deg,
#f3d18a 0 5px,
#c99a4b 6px 9px,
#e7bd6c 10px 14px
);
}

/*
|--------------------------------------------------------------------------

Earth
*/

.planet-earth {
background:
radial-gradient(
ellipse at 65% 40%,
#55b86a 0 17%,
transparent 18%
),
radial-gradient(
ellipse at 35% 68%,
#4a9e58 0 14%,
transparent 15%
),
radial-gradient(
ellipse at 72% 72%,
#65bd68 0 9%,
transparent 10%
),
linear-gradient(
135deg,
#318bd1,
#124d9c
);
}

/*
|--------------------------------------------------------------------------

Mars
*/

.planet-mars {
background:
radial-gradient(
circle at 30% 35%,
#a94732 0 7%,
transparent 8%
),
radial-gradient(
circle at 65% 65%,
#8b392c 0 9%,
transparent 10%
),
radial-gradient(
circle at 55% 28%,
#b9543d 0 5%,
transparent 6%
),
linear-gradient(
135deg,
#e07858,
#913a2d
);
}

/*
|--------------------------------------------------------------------------

Jupiter
*/

.planet-jupiter {
background:
repeating-linear-gradient(
0deg,
#d9b38c 0 7px,
#b77e5b 8px 11px,
#efd1aa 12px 17px,
#c99470 18px 22px
);
}

/*
|--------------------------------------------------------------------------

Saturn
*/

.planet-saturn {
background:
linear-gradient(
135deg,
#e6d18c,
#a99258
);
}

.planet-saturn::after {
content: "";

position: absolute;

width: 76px;
height: 22px;

left: 50%;
top: 50%;

transform:
    translate(-50%, -50%)
    rotate(-18deg);

border:
    5px solid rgba(220, 197, 135, .8);

border-radius: 50%;


}

/*
|--------------------------------------------------------------------------

Uranus
*/

.planet-uranus {
background:
radial-gradient(
circle at 30% 28%,
#d5ffff,
#7ad7da 42%,
#398f9b
);
}

/*
|--------------------------------------------------------------------------

Neptune
*/

.planet-neptune {
background:
radial-gradient(
circle at 30% 28%,
#b7c5ff,
#536ed2 43%,
#263b91
);
}

/*
|--------------------------------------------------------------------------

Planet name
*/

.planet-name {
color: var(--text);

font-size: 12px;
font-weight: 700;


}

/*
|--------------------------------------------------------------------------

Feedback
*/

.feedback {
min-height: 48px;

display: flex;
align-items: center;
justify-content: center;

text-align: center;

margin-top: 18px;

font-weight: 700;
line-height: 1.45;


}

.feedback.good {
color: var(--good);
}

.feedback.try {
color: var(--accent-light);
}

/*
|--------------------------------------------------------------------------

Actions
*/

.game-actions {
display: flex;
justify-content: center;
gap: 9px;

margin-top: 15px;


}

.secondary-button {
min-height: 46px;

padding: 10px 17px;

border-radius: 10px;

cursor: pointer;

font-weight: 700;

background: transparent;
border: 1px solid var(--border);
color: var(--text);


}

.secondary-button:hover {
border-color: var(--accent);
color: var(--accent-light);
}

/*
|--------------------------------------------------------------------------

Desktop
*/

@media (min-width: 900px) {

.memory-grid {
    grid-template-columns: repeat(6, 1fr);
}


}

/*
|--------------------------------------------------------------------------

Mobile
*/

@media (max-width: 600px) {

.game-heading {
    align-items: flex-start;
    flex-direction: column;
}

.game-stats {
    width: 100%;
    justify-content: flex-start;
}

.memory-card {
    padding: 12px;
}

.memory-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.planet {
    width: 42px;
    height: 42px;
}

.planet-name {
    font-size: 10px;
}


}

/*
|--------------------------------------------------------------------------

Very small screens
*/

@media (max-width: 360px) {

.memory-grid {
    gap: 6px;
}

.planet {
    width: 36px;
    height: 36px;
}

.planet-name {
    font-size: 9px;
}


}