:root{
  --gap: 8px;
  --tile-size: calc((100vw - 64px) / 6);
  --accent: #222;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;
  background: linear-gradient(180deg,#f7f8fb,#ffffff);
  color:var(--accent);
  display:flex;
  flex-direction:column;   /* stack content top to bottom */
  align-items:center;      /* center horizontally */
  justify-content:flex-start; /* push everything to top */
  padding:16px;
  min-height:100vh;
}

.app{
  width:100%;
  max-width:1000px;
}

header{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

header h1{
  margin:0;
  font-size:1.6rem;
}

.controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.controls select, .controls button{
  padding:8px 10px;
  font-size:1rem;
  border-radius:8px;
  border:1px solid #ddd;
  background:white;
}

.status{
  display:flex;
  gap:12px;
  font-size:0.95rem;
  color:#555;
  flex-wrap:wrap;
}

.game-area{
  display:grid;
  gap: var(--gap);
  padding:10px;
  border-radius:12px;
  width:100%;
}

.tile{
  position:relative;
  width:100%;
  padding-top:100%; /* square */
  perspective:800px;
  cursor:pointer;
  user-select:none;
  border-radius:8px;
  overflow:visible;
}

.face{
  position:absolute;
  inset:0;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  backface-visibility:hidden;
  transition: transform 220ms ease, opacity 220ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.back{
  background:linear-gradient(180deg, #e9e9e9, #ffffff);
  transform: rotateY(0deg);
}

.front{
  transform: rotateY(180deg);
  font-size:1.6rem;
  color:white;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tile.revealed .back{
  transform: rotateY(-180deg);
  opacity:0;
}
.tile.revealed .front{
  transform: rotateY(0deg);
  opacity:1;
}

.matched{
  visibility: hidden;
  transform: scale(0.95);
  transition: visibility 200ms ease, transform 200ms ease;
}

footer{
  margin-top:12px;
  color:#777;
  font-size:0.9rem;
}

/* responsive grid sizes (maps to difficulties) */
.grid-easy{ grid-template-columns: repeat(4, 1fr); }
.grid-medium{ grid-template-columns: repeat(6, 1fr); }
.grid-hard{ grid-template-columns: repeat(6, 1fr); }
.grid-veryhard{ grid-template-columns: repeat(8, 1fr); }

/* make tiles touch-friendly */
@media (max-width:420px){
  :root{--gap:6px}
  header h1{font-size:1.3rem}
}