*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito Sans',sans-serif;background:#FAFAF8;min-height:100vh;overflow-x:hidden;color:#2D2D2D}

/* Animations */
@keyframes fadeUp{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes popIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(600deg);opacity:0}}
@keyframes starPop{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes gentlePulse{0%,100%{box-shadow:0 0 0 0 rgba(124,107,205,0)}50%{box-shadow:0 0 0 6px rgba(124,107,205,.15)}}

.anim-fade-up{animation:fadeUp .45s ease-out forwards}
.anim-pop{animation:popIn .4s ease-out forwards}
.anim-float{animation:float 3s ease-in-out infinite}
.anim-shake{animation:shake .35s ease-in-out}
.anim-pulse{animation:gentlePulse 2s ease-in-out infinite}

/* Tiles */
.mj-tile{
  background:linear-gradient(160deg,#FFFEF7,#FFF6E8);
  border:2px solid #DDD0BC;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(160,140,100,.12),inset 0 1px 0 rgba(255,255,255,.7);
  cursor:pointer;transition:all .2s ease;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.mj-tile:hover:not(.disabled):not(.matched){transform:translateY(-3px);box-shadow:0 6px 14px rgba(160,140,100,.18)}
.mj-tile.selected{border-color:#7C6BCD;box-shadow:0 0 0 3px rgba(124,107,205,.25);transform:translateY(-3px)}
.mj-tile.correct{border-color:#5CB85C;background:linear-gradient(160deg,#F4FCF4,#E8F5E8)}
.mj-tile.wrong{border-color:#D95555;animation:shake .35s ease-in-out}
.mj-tile.disabled{opacity:.35;pointer-events:none}
.mj-tile.matched{opacity:.25;pointer-events:none;transform:scale(.92)}
.mj-tile.face-down{background:linear-gradient(160deg,#7C6BCD,#6355B0);border-color:#5D4FA0}

/* Buttons */
.btn{font-family:'Fredoka',sans-serif;font-weight:600;border:none;border-radius:12px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#7C6BCD;color:#fff;padding:10px 22px}
.btn-secondary{background:#fff;color:#7C6BCD;border:2px solid #E5E0F5;padding:10px 22px}
.btn-soft{background:#F3F1FA;color:#7C6BCD;padding:8px 18px}
.btn-success{background:#5CB85C;color:#fff;padding:10px 22px}
.btn-small{padding:7px 14px;font-size:13px}

/* Progress dots */
.dot{width:12px;height:12px;border-radius:50%;transition:all .3s}
.dot-done{background:#5CB85C}
.dot-active{background:#7C6BCD;transform:scale(1.15)}
.dot-pending{background:#E5E5E5}

/* Card */
.card{background:#fff;border-radius:18px;box-shadow:0 2px 12px rgba(0,0,0,.04);padding:28px;border:1px solid #F0EDE8}

/* Layout */
.tile-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.confetti-piece{position:fixed;top:-10px;animation:confettiFall 2s ease-in forwards;pointer-events:none;z-index:9999}

@media(max-width:640px){
  .card{padding:18px;border-radius:14px}
}

/* Group slots for build game */
.group-slot{border:2px dashed #DDD0BC;border-radius:14px;background:#FDFCF9;min-height:90px;transition:all .2s}
.group-slot.complete{border-color:#5CB85C;border-style:solid;background:#F8FDF8}
.group-slot.invalid{border-color:#D95555;animation:shake .35s}