#site-minesweeper {
  .description {
    max-width: 600px;
    text-align: center;
    margin-bottom: 20px;
  }

  .game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
  }

  .reactions-container {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
  }

  .reaction {
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
    color: white;
    background-color: #725e91;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(9, 40px);
    grid-template-rows: repeat(9, 40px);
    gap: 4px;
  }

  .cell {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #414141;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    opacity: 0.7; /* Dimmed by default */

    &:hover {
      transform: scale(1.15);
    }
  }

  .init {
    cursor: pointer;
  }

  .cell.clickable {
    cursor: pointer;
    opacity: 1;
    background-color: #eeeeee;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .cell.clickable:hover {
    transform: scale(1.05);
  }

  .cell.revealed {
    box-shadow: none;
    transform: none;
    opacity: 1;
    cursor: not-allowed;
  }

  .cell.bomb {
    background: repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px 2500px, repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60%/2500px 2500px;
    background-blend-mode: difference;
    animation: noise-animation 0.2s infinite alternate;
  }

  .color-pyro {
    background-color: var(--pyro-secondary-white) !important;
    color: white;
  }
  .color-hydro {
    background-color: var(--hydro-secondary-white) !important;
    color: white;
  }
  .color-anemo {
    background-color: var(--anemo-secondary-white) !important;
    color: white;
  }
  .color-electro {
    background-color: var(--electro-secondary-white) !important;
    color: white;
  }
  .color-dendro {
    background-color: var(--dendro-secondary-white) !important;
    color: white;
  }
  .color-cryo {
    background-color: var(--cryo-secondary-white) !important;
    color: white;
  }
  .color-geo {
    background-color: var(--geo-secondary-white) !important;
    color: white;
  }
  .color-empty {
    background-color: #d1d1d1 !important;
    color: white;
  }

  .controls {
    margin-top: 20px;
    display: flex;
    gap: 15px;
  }

  button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #725e91;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  button:hover {
    background-color: #573d7f;
  }

  .hidden {
    visibility: hidden;
  }

  .game-stats {
    margin-top: 10px;
    font-weight: bold;
  }

  .game-over-message {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    padding: 10px 20px;
    border-radius: 10px;
    display: none;
  }

  .win {
    background-color: #a5f7a5;
    color: #007700;
  }

  .lose,
  .win {
    display: block;
  }

  .lose {
    background-color: #f7a5a5;
    color: #770000;
  }

  .legend {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .legend-color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}