body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background: linear-gradient(135deg,#ffe0b2,#f8bbd0,#bbdefb);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  h1 {
    margin-bottom: 10px;
    color:#333;
    text-shadow:0 0 10px rgba(255,255,255,0.6);
  }
  #board {
    display: grid;
    grid-template-columns: repeat(3, 110px);
    grid-gap: 15px;
  }
  .cell {
    width:110px; height:110px;
    background: rgba(255,255,255,0.8);
    border-radius: 15px;
    font-size: 2.5em;
    color:#333;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: transform 0.25s, background 0.3s, box-shadow 0.3s;
  }
  .cell:hover {
    transform: scale(1.1);
    background: linear-gradient(145deg,#f1f8e9,#e3f2fd);
    box-shadow:0 0 15px rgba(255,255,255,0.7), 0 0 20px rgba(0,0,0,0.1);
  }
  #info {
    margin-top:20px;
    font-weight:600;
    color:#333;
  }
  #restart {
    margin-top:15px;
    padding:10px 25px;
    border:none;
    border-radius:25px;
    background:linear-gradient(90deg,#ffb74d,#f06292);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
  }
  #restart:hover {
    background:linear-gradient(90deg,#f06292,#ba68c8);
    transform:scale(1.05);
  }

  /* Sparkle animation */
  .sparkle {
    position:absolute;
    pointer-events:none;
    width:6px; height:6px;
    background:white;
    border-radius:50%;
    animation:spark 0.8s ease-out forwards;
  }
  @keyframes spark {
    0% { opacity:1; transform:scale(1) translate(0,0);}
    100% { opacity:0; transform:scale(0.3) translate(var(--x),var(--y)); }
  }