/*
Theme Name: Sweet Match
Author: Mahnoor Aftab
Description: A cute one-page memory match game — flip the treats, find the pairs.
Version: 1.0
Requires at least: 5.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sweet-match
*/

:root{
  --cream:#FFF8F0;
  --cream2:#FFEFDD;
  --pink:#F7B6C2;
  --raspberry:#C6486B;
  --raspberry-dark:#A83752;
  --mint:#BFE3D0;
  --brown:#6B4A3A;
  --yellow:#F4D793;
}
*{box-sizing:border-box;}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:var(--cream);
  color:var(--brown);
  font-family:'Quicksand',sans-serif;
  padding:2.5rem 1rem 3rem;
}
.page{width:100%; max-width:540px;}
header h1{
  font-family:'Fredoka',sans-serif;
  font-weight:600;
  font-size:2.6rem;
  color:var(--raspberry);
  text-align:center;
  margin:0 0 .3rem;
  letter-spacing:.5px;
}
.tagline{
  text-align:center;
  margin:0;
  opacity:.85;
  font-weight:600;
}
.sprinkles{display:flex; justify-content:center; gap:7px; margin:1.6rem 0 2rem; flex-wrap:wrap;}
.sprinkles span{width:5px; height:16px; border-radius:3px; display:inline-block;}
.sprinkles span:nth-child(6n+1){background:var(--raspberry); transform:rotate(12deg);}
.sprinkles span:nth-child(6n+2){background:var(--mint); transform:rotate(-10deg);}
.sprinkles span:nth-child(6n+3){background:var(--yellow); transform:rotate(8deg);}
.sprinkles span:nth-child(6n+4){background:var(--pink); transform:rotate(-14deg);}
.sprinkles span:nth-child(6n+5){background:var(--raspberry); transform:rotate(6deg);}
.sprinkles span:nth-child(6n+6){background:var(--mint); transform:rotate(-8deg);}

.stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.6rem;
}
.stat{
  background:#fff;
  border:2px solid var(--mint);
  border-radius:999px;
  padding:.45rem 1.1rem;
  font-weight:600;
  font-size:.95rem;
}
.stat span{
  color:var(--raspberry);
  font-family:'Fredoka',sans-serif;
  margin-left:.35rem;
}
button{font-family:'Quicksand',sans-serif; cursor:pointer;}
#newGameBtn, #playAgainBtn{
  background:var(--raspberry);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:.5rem 1.3rem;
  font-weight:700;
  font-size:.95rem;
  transition:transform .15s ease, background .15s ease;
}
#newGameBtn:hover, #playAgainBtn:hover{background:var(--raspberry-dark); transform:translateY(-1px);}
#newGameBtn:focus-visible, #playAgainBtn:focus-visible{outline:3px solid var(--mint); outline-offset:2px;}

.board{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.card{
  background:none;
  border:none;
  padding:0;
  aspect-ratio:1/1;
  perspective:600px;
}
.card:focus-visible{outline:3px solid var(--raspberry); outline-offset:3px; border-radius:14px;}
.card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}
.card.flipped .card-inner{transform:rotateY(180deg);}
.card.matched .card-inner{animation:pop .4s ease;}
@keyframes pop{
  0%{transform:rotateY(180deg) scale(1);}
  50%{transform:rotateY(180deg) scale(1.08);}
  100%{transform:rotateY(180deg) scale(1);}
}
.card-face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
}
.card-back{background:var(--cream2); border:2px dashed var(--raspberry);}
.badge{
  width:38px; height:38px; border-radius:50%;
  background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:.9rem;
}
.card-front{
  background:#fff;
  border:2px solid var(--mint);
  font-size:2.1rem;
  transform:rotateY(180deg);
}
.card.matched .card-front{border-color:var(--raspberry); box-shadow:0 0 0 3px rgba(198,72,107,.15);}

footer{text-align:center; margin-top:2rem; font-size:.85rem; opacity:.6;}

.win-overlay{
  position:fixed; inset:0;
  background:rgba(107,74,58,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.win-overlay[hidden]{display:none;}
.win-card{
  background:#fff;
  border-radius:20px;
  padding:2rem 1.75rem;
  text-align:center;
  max-width:300px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.win-card h2{font-family:'Fredoka',sans-serif; color:var(--raspberry); margin:0 0 .5rem;}
.win-card p{margin:0 0 1.2rem; font-weight:600;}

@media (max-width:420px){
  header h1{font-size:2.1rem;}
  .board{gap:7px;}
  .card-front{font-size:1.6rem;}
}
@media (prefers-reduced-motion:reduce){
  .card-inner, #newGameBtn, #playAgainBtn{transition:none;}
  .card.matched .card-inner{animation:none;}
}