body {
    font-family: sans-serif;
    text-align: center;
    margin: 20px;
  }
  
  /* Containers for the tiles and guide row. They use flex layout for equal widths. */
  #tile-container,
  #guide-container {
    display: flex;
    justify-content: center;
    margin: 10px auto;
    gap: 10px;
    width: 100%;
    max-width: 800px;
  }
  
  /* Draggable tile styling.
     The tiles use flex:1 so their widths adjust automatically.
     The height is flexible so that if the emojis wrap, the tile expands. */
  .tile {
    flex: 1;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 2em;
    text-align: center;
    padding: 10px;
    cursor: grab;
    user-select: none;
    position: relative;
  }
  
  .tile.dragging {
    opacity: 0.7;
    cursor: grabbing;
    position: absolute;
    z-index: 1000;
  }
  
  /* Guide row styling.
     Each guide element gets equal space with fixed height and a slightly smaller font size. */
  .guide-element {
    flex: 1;
    height: 40px;
    font-size: 1.5em;
    color: #555;
    text-align: center;
    line-height: 40px;
  }
  
  /* Control buttons container and styling for toggle & reset buttons. */
  #controls {
    margin-top: 10px;
  }
  
  #controls button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    display: inline-block;
  }
  
  /* Mode selection buttons styling. */
  #mode-buttons {
    margin-top: 20px;
  }
  
  #mode-buttons button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    display: inline-block;
  }
  
  /* Slider controls styling. */
  #slider-controls {
    margin-top: 20px;
  }
  
  #slider-controls div {
    margin: 10px 0;
  }
  
  /* Celebration message styling. */
  #yay-message {
    font-size: 3em;
    color: #ff1493;
    margin-top: 20px;
    opacity: 0;
    animation: none;
  }
  
  @keyframes sparkle {
    0%   { opacity: 0; transform: scale(0.5); text-shadow: none; }
    50%  { opacity: 1; transform: scale(1.2); text-shadow: 0 0 10px gold, 0 0 20px gold; }
    100% { opacity: 0; transform: scale(0.5); text-shadow: none; }
  }