/* =========================
   BACKTRACK — LANDING CARD
   ========================= */
.landing-card{
width:min(390px,82vw);
height:min(390px,82vw);
min-width:250px;
min-height:250px;
margin:18px auto 25px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
border:1px solid rgba(52,211,153,.22);
border-radius:24px;
background:radial-gradient(
circle at center,
rgba(52,211,153,.08),
rgba(16,25,22,.98) 52%,
rgba(5,8,7,1)
);
box-shadow:
inset 0 0 45px rgba(52,211,153,.04),
0 20px 55px rgba(0,0,0,.45);
font-size:clamp(12rem,28vw,18rem);
line-height:1;
text-align:center;
}


/* =========================
   BACKTRACK — GAME CARD
   ========================= */

.memory-card{
width:min(650px,100%);
height:min(390px,62vw);
min-height:280px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
padding:20px;
border:1px solid rgba(52,211,153,.2);
border-radius:22px;
background:radial-gradient(
circle at center,
rgba(52,211,153,.07),
rgba(17,26,23,.98) 50%,
rgba(9,16,14,1)
);
font-size:clamp(8rem,18vw,12rem);
font-weight:800;
line-height:1;
text-align:center;
box-shadow:
inset 0 0 35px rgba(52,211,153,.025),
0 18px 50px rgba(0,0,0,.35);
opacity:0;
transform:translateX(0);
transition:
opacity .12s ease,
transform .25s ease,
background .12s ease,
box-shadow .12s ease,
border-color .12s ease;
}

.memory-card.show{
opacity:1;
transform:translateX(0);
}

.memory-card.slide-out{
opacity:0;
transform:translateX(-120%);
}

.memory-card.correct{
opacity:1;
border-color:var(--bk-green);
background:radial-gradient(
circle at center,
rgba(52,211,153,.1),
#123c2c 55%,
#0b241b
);
box-shadow:0 0 30px rgba(52,211,153,.3);
}

.memory-card.wrong{
opacity:1;
border-color:var(--bk-purple-light);
background:radial-gradient(
circle at center,
rgba(139,92,246,.12),
#27183e 55%,
#160d27
);
box-shadow:0 0 30px rgba(139,92,246,.3);
}

/* =========================
   CARD CONTENT
   ========================= */
.card-item{
position:absolute;
display:block;
line-height:1;
white-space:nowrap;
transform-origin:center;
}

#card {
  position: relative;
  overflow: hidden;
}

/* =========================
   MATCH BUTTON
   ========================= */

.match-area{
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
margin-top:25px;
}

.match-button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 36px;
min-width:190px;
font:500 1rem var(--bk-font);
letter-spacing:.03em;
color:var(--bk-green);
background:#0b1f17;
border:1.5px solid var(--bk-green);
border-radius:9px;
cursor:pointer;
box-shadow:0 4px 18px rgba(45,212,191,.18);
transition:
transform .15s ease,
box-shadow .2s ease,
background .2s ease;
}

.match-button:hover:not(:disabled){
transform:translateY(-2px);
background:#102a20;
box-shadow:0 7px 25px rgba(45,212,191,.28);
}

.match-button:active:not(:disabled){
transform:translateY(0);
}

.match-button:disabled{
opacity:.55;
cursor:not-allowed;
}

/* =========================
   RESULT STATES
   ========================= */

.accuracy-heading.not-perfect{
color:var(--bk-purple-light);
}

.accuracy-number.not-perfect{
color:var(--bk-purple-light);
}

.you-fill{
background:linear-gradient(
90deg,
#087f55,
#34d399,
#a7f3d0
);
}

.average-fill{
background:linear-gradient(
90deg,
#4c1d95,
#8b5cf6,
#c4b5fd
);

/* =========================
   BACKTRACK RESPONSIVE
   ========================= */

@media(max-width:650px){

.landing-card{
width:min(330px,82vw);
height:min(330px,82vw);
min-width:0;
min-height:0;
margin:12px auto 20px;
font-size:clamp(10rem,31vw,15rem);
}

.memory-card{
width:100%;
height:min(360px,75vw);
min-height:230px;
padding:12px;
font-size:clamp(8rem,30vw,14rem);
}

.match-area{
margin-top:20px;
}

.match-button{
padding:15px 30px;
min-width:185px;
}
}

@media(max-width:400px){

.landing-card{
width:min(290px,84vw);
height:min(290px,84vw);
font-size:clamp(9rem,32vw,13rem);
}

.memory-card{
height:235px;
min-height:0;
font-size:6.8rem;
}

.match-button{
padding:14px 26px;
min-width:175px;
font-size:.95rem;
}
}

@media(max-width:360px){

.landing-card{
width:260px;
height:260px;
font-size:8.5rem;
}

.memory-card{
height:220px;
font-size:6rem;
}

}