*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:#0f172a;
color:#e5e7eb;
min-height:100vh;
display:flex;
justify-content:center;
align-items:flex-start;
padding:24px;
}
.app-wrapper{
width:100%;
max-width:1400px;
background:#020617;
border-radius:24px;
padding:24px 24px 32px;
box-shadow:0 20px 40px rgba(0,0,0,0.5);
border:1px solid rgba(148,163,184,0.3);
}
.app-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
gap:12px;
}
.app-header h1{
font-size:24px;
font-weight:600;
letter-spacing:0.03em;
}
.controls{
display:flex;
gap:8px;
}
.controls button{
padding:8px 20px;
border-radius:999px;
border:none;
background:#22c55e;
color:#022c22;
font-weight:600;
font-size:14px;
cursor:pointer;
transition:transform 0.15s ease,box-shadow 0.15s ease,background 0.15s ease;
box-shadow:0 8px 16px rgba(34,197,94,0.35);
}
.controls button:hover{
transform:translateY(-1px);
box-shadow:0 12px 24px rgba(34,197,94,0.45);
background:#16a34a;
}
.controls button:active{
transform:translateY(0);
box-shadow:0 6px 12px rgba(34,197,94,0.35);
}
main{
overflow-x:auto;
padding-top:8px;
}
.card-grid{
display:flex;
flex-direction:column;
gap:12px;
padding:12px;
justify-content:center;
}
.card-row{
display:flex;
justify-content:center;
gap:12px;
}
.card{
position:relative;
width:110px;
aspect-ratio:1/1;
border-radius:14px;
overflow:hidden;
cursor:pointer;
box-shadow:0 8px 16px rgba(0,0,0,0.5);
transform-origin:center;
transition:transform 0.15s ease,box-shadow 0.15s ease;
background:#020617;
}
.card:hover{
transform:translateY(-2px) scale(1.01);
box-shadow:0 14px 28px rgba(0,0,0,0.7);
}
.card-face{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
transition:opacity 0.3s ease;
}
.card-back{
opacity:1;
z-index:2;
}
.card-front{
opacity:0;
z-index:1;
}
.card-label{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:700;
color:#ffffff;
z-index:3;
text-shadow:0 2px 4px rgba(0,0,0,0.6);
pointer-events:none;
}
.card.flipped .card-back{
opacity:0;
}
.card.flipped .card-front{
opacity:1;
}
.card.flipped .card-label{
opacity:0;
}
@media (max-width:900px){
.app-wrapper{
padding:16px 16px 24px;
}
.card-grid{
gap:10px;
padding:10px;
}
.card-row{
gap:10px;
}
.card{
width:96px;
}
}
@media (max-width:700px){
.card-grid{
gap:8px;
padding:8px;
}
.card-row{
gap:8px;
}
.card{
width:82px;
}
.app-header{
flex-direction:column;
align-items:flex-start;
}
}