:root{ --wmm-radius: 16px; --wmm-shadow: 0 6px 18px rgba(0,0,0,.12); --wmm-accent:#ff7a59; }
.wmm-wrap{ max-width: 980px; margin: 0 auto; padding: 12px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,'Helvetica Neue',Arial; color:#111; }
.wmm-bar{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:10px; }
.wmm-left{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.wmm-right{ display:flex; gap:8px; align-items:center; }
.wmm-btn{ border:1px solid #ddd; background:#fff; padding:6px 12px; border-radius:999px; box-shadow:var(--wmm-shadow); cursor:pointer; }
.wmm-stat b{ font-variant-numeric: tabular-nums; }

.wmm-board{ position:relative; display:grid; grid-template-columns: repeat(var(--cols,4), 1fr); gap:10px; background:linear-gradient(180deg,#f8fafc,#eef2f7); border-radius:var(--wmm-radius); padding:12px; box-shadow:var(--wmm-shadow); aspect-ratio: 16/10; }
.wmm-cardbtn{ position:relative; padding:0; border:none; background:transparent; perspective: 900px; }
.wmm-cardface{ position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:grid; place-items:center; overflow:hidden; }
.wmm-cardface.front{ background: radial-gradient(circle at 30% 20%, #fff, #f2f5fb); border:1px solid #e6eaf2; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 6px 12px rgba(0,0,0,.06); }
.wmm-cardface.back{ transform: rotateY(180deg); background:#fff; border:1px solid #e6eaf2; }
.wmm-cardbtn img{ width:80%; height:auto; object-fit:contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.15)); }

.wmm-cardbtn{ transform-style: preserve-3d; transition: transform .35s ease; }
.wmm-cardbtn.flip{ transform: rotateY(180deg); }
.wmm-cardbtn.match .back{ animation: wmm-pop .18s ease; border-color:#c6f6d5; box-shadow:0 6px 12px rgba(16,185,129,.25); }
@keyframes wmm-pop{ from{ transform: scale(.98); } to{ transform: scale(1); } }

/* Win modal */
.wmm-win{ position:fixed; inset:0; background:rgba(0,0,0,.28); opacity:0; pointer-events:none; display:grid; place-items:center; transition:opacity .2s ease; z-index: 999; }
.wmm-win.open{ opacity:1; pointer-events:all; }
.wmm-card{ background:#fff; border-radius:16px; padding:18px; min-width:min(420px, 90vw); box-shadow:var(--wmm-shadow); text-align:center; }

/* Confetti */
.wmm-confetti{ position:absolute; top:-10px; width:8px; height:12px; border-radius:2px; background: hsl(var(--h,0) 90% 60%); transform: translateX(0) translateY(0) rotate(0); animation: conf 1.1s ease forwards; filter:drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.wmm-confetti:nth-child(odd){ --h: 12; } .wmm-confetti:nth-child(even){ --h: 200; }
@keyframes conf{ 0%{ opacity:0; transform: translateX(0) translateY(0) rotate(0);} 10%{opacity:1;} 100%{ transform: translateX(calc(var(--tx) * 1px)) translateY(360px) rotate(180deg); opacity:0; } }

@media (max-width:680px){
  .wmm-board{ gap:8px; padding:10px; aspect-ratio: 4/5; }
}