/* ===== WORD MATCH WOW MODE ===== */

.match-instructions{
  text-align:center;
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#ffe4f2,#e0f2fe);
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
}

.match-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.match-column{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.match-card{
  position:relative;
  background:#ffffff;
  border-radius:22px;
  padding:16px 14px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.12),
    inset 0 0 0 2px #fce7f3;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.match-card:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.18),
    inset 0 0 0 2px #f9a8d4;
}

.match-card::after{
  content:"✨";
  position:absolute;
  top:-8px;
  right:-8px;
  font-size:18px;
  opacity:0;
  transform:scale(0.6);
  transition:.18s ease;
}

.match-card:hover::after{
  opacity:1;
  transform:scale(1);
}

/* ENGLISH SIDE */
#enColumn .match-card{
  background:linear-gradient(135deg,#eef2ff,#ffffff);
}

/* HEBREW SIDE */
#heColumn .match-card{
  background:linear-gradient(135deg,#fff7ed,#ffffff);
}

.match-card.selected{
  background:linear-gradient(135deg,#fbcfe8,#e0f2fe);
  box-shadow:
    0 0 0 4px rgba(236,72,153,0.45),
    0 14px 30px rgba(0,0,0,0.18);
  transform:scale(1.08);
}

.match-card.matched{
  background:linear-gradient(135deg,#bbf7d0,#dcfce7);
  box-shadow:
    inset 0 0 0 3px #22c55e,
    0 10px 24px rgba(34,197,94,0.35);
  opacity:0.75;
  pointer-events:none;
}

.match-card.matched::after{
  content:"⭐";
  opacity:1;
  transform:scale(1.2);
}

.match-card.wrong{
  background:linear-gradient(135deg,#fee2e2,#fecaca);
  animation:shake 0.35s;
  box-shadow:
    inset 0 0 0 3px #ef4444,
    0 10px 22px rgba(239,68,68,0.35);
}

@keyframes shake{
  0%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  50%{transform:translateX(6px);}
  75%{transform:translateX(-6px);}
  100%{transform:translateX(0);}
}

@media (max-width:480px){
  .match-card{
    font-size:18px;
    padding:14px 12px;
  }
}