:root {
  --back: #0f3460;
  --back2: #16498c;
  --face: var(--surface);
  --match: var(--green);
}
body {
  gap: 18px;
  user-select: none;
  -webkit-user-select: none;
}
.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.stats {
  display: flex;
  gap: 12px;
}
/* compact controls override shared button sizing */
select, button {
  padding: 9px 16px;
  font-size: 0.95rem;
  border-radius: 8px;
}
select { background: var(--face); color: var(--text); border: none; cursor: pointer; font-weight: 600; }
#board {
  display: grid;
  gap: 12px;
  perspective: 800px;
}
.card {
  width: var(--cs, 90px);
  height: var(--cs, 90px);
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.35s;
  border-radius: 12px;
}
.card.flipped, .card.matched { transform: rotateY(180deg); }
.card.locked { cursor: default; }
.face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.back {
  background: linear-gradient(135deg, var(--back), var(--back2));
  font-size: 1.8rem;
  color: rgba(255,255,255,0.5);
}
.front {
  background: var(--face);
  transform: rotateY(180deg);
  font-size: 2.6rem;
}
.card.matched .front {
  box-shadow: 0 0 0 3px var(--match), 0 4px 14px rgba(0,0,0,0.35);
  animation: pop 0.4s ease;
}
@keyframes pop { 0%{transform:rotateY(180deg) scale(1);} 50%{transform:rotateY(180deg) scale(1.12);} 100%{transform:rotateY(180deg) scale(1);} }
#win {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 20;
  text-align: center;
}
#win.show { display: flex; }
#win .big { font-size: 2.4rem; font-weight: 700; color: var(--accent); }
#win .sub { font-size: 1.1rem; opacity: 0.85; }