body {
      background-color: #f8f9fa;
    }
    .game-container {
      max-width: 360px;
      margin: 60px auto;
    }
    #board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      background-color: #bbada0;
      padding: 10px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .tile {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: bold;
      color: #776e65;
      background: #cdc1b4;
      border-radius: 6px;
    }
    .tile[data-value="2"]    { background: #eee4da; }
    .tile[data-value="4"]    { background: #ede0c8; }
    .tile[data-value="8"]    { background: #f2b179; color: white; }
    .tile[data-value="16"]   { background: #f59563; color: white; }
    .tile[data-value="32"]   { background: #f67c5f; color: white; }
    .tile[data-value="64"]   { background: #f65e3b; color: white; }
    .tile[data-value="128"]  { background: #edcf72; color: white; }
    .tile[data-value="256"]  { background: #edcc61; color: white; }
    .tile[data-value="512"]  { background: #edc850; color: white; }
    .tile[data-value="1024"] { background: #edc53f; color: white; }
    .tile[data-value="2048"] { background: #edc22e; color: white; }