body {
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: #0d1b2a; /* dark navy */
    color: #d0aaff; /* light purple */
  }
  
  #controls {
    margin: 20px;
    color: #d0aaff;
  }
  
  #puzzle-container {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    border: 2px solid #b38bff; /* slightly darker purple */
    background-color: #1b263b;
  }
  
  .tile {
    background-size: 300px 300px;
    cursor: pointer;
    transition: 0.2s;
    background-color: #ffc0cb; /* light pink */
    border-radius: 5px;
  }
  
  .empty {
    background: #ffdce5; /* lighter pink */
    cursor: default;
  }