body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f9;
    }

    #game-container {
      text-align: center;
    }

    #controls {
      margin-bottom: 20px;
    }

    #grid {
      display: grid;
      gap: 1px;
      background-color: #ddd;
    }

    .cell {
      width: 30px;
      height: 30px;
      background-color: #fff;
      border: 1px solid #ddd;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }

    .cell.mine {
      background-color: red;
    }

    .cell.flagged {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2z"/></svg>');
      background-size: cover;
    }

    .cell.revealed {
      border-color: #ccc;
    }

    .cell.revealed.mine {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 22h20L12 2z"/></svg>');
      background-size: cover;
    }

    .cell.revealed.number-1 {
      color: blue;
    }

    .cell.revealed.number-2 {
      color: green;
    }

    .cell.revealed.number-3 {
      color: red;
    }

    .cell.revealed.number-4 {
      color: darkblue;
    }

    .cell.revealed.number-5 {
      color: darkred;
    }

    .cell.revealed.number-6 {
      color: teal;
    }

    .cell.revealed.number-7 {
      color: black;
    }

    .cell.revealed.number-8 {
      color: gray;
    }