:root{
  --bg:#f6f7f8;
  --ink:#222;
  --accent:#4CAF50;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(0,0,0,.12);
}

*,
*::before,
*::after { box-sizing:border-box; }

html,body { height:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:24px 16px 40px;
}

.title{
  margin:0;
  font-size:clamp(1.25rem, 2.4vw, 2rem);
  font-weight:700;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

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

.stat{
  font-size:.95rem;
  background:#fff;
  border:1px solid #eee;
  padding:6px 10px;
  border-radius:999px;
}

.btn{
  border:none;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease, box-shadow .2s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.btn:hover{ filter:brightness(.96); }
.btn:active{ transform:translateY(1px); }

/* Board grid */
.board{
  display:grid;
  gap:12px;
  /* auto-fit nice squares; adjust min card size here */
  grid-template-columns: repeat(auto-fit, minmax(min(22vw, 120px), 1fr));
  justify-items:center;
}

/* Card container */
.card{
  width: min(22vw, 120px);
  aspect-ratio: 1 / 1;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .4s ease;
  border-radius:12px;
  box-shadow: var(--shadow);
  background: var(--card);
  cursor:pointer;
  outline: none;
}
.card:focus-visible{
  box-shadow: 0 0 0 3px rgba(76,175,80,.25), var(--shadow);
}

/* Faces */
.card-face{
  position:absolute;
  inset:0;
  border-radius:12px;
  backface-visibility: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Front face: question mark */
.card-front{
  background: #E7F3E9;
  border:1px solid #dfe8e1;
  /* Inline SVG question mark as background */
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'>\
    <rect width='128' height='128' rx='16' ry='16' fill='%23ffffff'/>\
    <text x='50%' y='54%' text-anchor='middle' font-size='88' font-family='Arial' fill='%234CAF50'>?</text>\
  </svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:70%;
}

/* Back face: the logo/image */
.card-back{
  transform: rotateY(180deg);
  background:#fff center/70% no-repeat;
  border:1px solid #e9e9e9;
}

/* Flipped/matched states */
.card.selected,
.card.match{
  transform: rotateY(180deg);
}

.card.match{
  animation: pop .28s ease;
  box-shadow: 0 10px 32px rgba(76,175,80,.25);
  border:1px solid rgba(76,175,80,.25);
}

@keyframes pop{
  0%{ transform: rotateY(180deg) scale(.98); }
  100%{ transform: rotateY(180deg) scale(1); }
}

.win{
  margin-top:20px;
  text-align:center;
  background:#fff;
  border:1px solid #eee;
  padding:14px 16px;
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Small screens polish */
@media (max-width:520px){
  .controls{ justify-content:flex-end; }
}